/* Scroll chapters: native page scrolling, one stable stage per service. */
.service-intro{display:grid;grid-template-columns:1fr 1fr;gap:8%;align-items:end;background:#eef1e9}
.service-intro h2{margin-top:26px}.service-intro-details>p:first-child{font-size:20px;line-height:1.7;color:#596250}.service-intro .service-jumps{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:28px}.service-jumps a{font-size:14px;border:1px solid #bac4b1;border-radius:30px;padding:10px 16px;transition:background .25s}.service-jumps a:hover{opacity:1;background:var(--acid)}
.scroll-scene{position:relative;scroll-margin-top:0;--scene-ink:#f4f7ee;--scene-muted:#a8b7a2;--scene-accent:#c5f36b;background:#14271a;color:var(--scene-ink)}
.scene-stage{position:relative;isolation:isolate;height:900px;min-height:660px;overflow:hidden;background:radial-gradient(ellipse at 65% 66%,#365232 0%,#1d3322 40%,#132519 80%)}
.scenes-ready .scene-stage{height:100vh;height:100svh;min-height:620px}
.scenes-ready .scroll-scene.scene-unavailable{height:auto}.scene-unavailable .scene-stage{position:relative}.scene-unavailable .scene-scroll{display:none}
.scene-top{position:absolute;z-index:3;left:7%;right:7%;top:6%;display:flex;align-items:center;justify-content:space-between;gap:20px}.scene-top .eyebrow{font-size:12px;letter-spacing:1.5px}.scene-top>a{font-size:13px;color:var(--scene-muted);transition:color .2s}.scene-top>a:hover{color:var(--scene-ink)}
.scene-copy{position:absolute;z-index:2;left:7%;top:15%;pointer-events:none}.scene-copy h2{font-size:clamp(40px,5.5vw,88px);letter-spacing:-.055em;line-height:1.06;font-weight:500;padding-bottom:.12em}.scene-copy em{color:var(--scene-accent)}.scene-copy p{font-size:16px;line-height:1.7;margin-top:23px;max-width:430px;color:var(--scene-muted)}
.service-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:1;opacity:0;transition:opacity .3s}.scene-loaded .service-canvas{opacity:1}.scene-fallback{position:absolute;right:12%;bottom:17%;width:50%;height:40%;object-fit:contain}.scene-loaded .scene-fallback{display:none}
.scene-bottom{position:absolute;z-index:3;left:7%;right:7%;bottom:5%;display:grid;grid-template-columns:1fr 1fr 1fr;gap:30px;align-items:end;border-top:1px solid #ffffff20;padding-top:21px}.scene-bottom>span:first-child{font-size:11px;letter-spacing:1.2px;line-height:1.7}.scene-scroll{justify-self:center;text-align:center;font-size:12px;color:var(--scene-muted)}.scene-meter{height:2px;width:160px;background:#ffffff25;margin-top:12px;overflow:hidden}.scene-meter i{display:block;height:100%;width:100%;background:var(--scene-accent);transform:scaleX(0);transform-origin:left}.scene-result{font-size:15px;justify-self:end;letter-spacing:-.3px}
.snow-scene{--scene-ink:#172837;--scene-muted:#5e7181;--scene-accent:#477b98;background:#eaf2f8}.snow-scene .scene-stage{background:radial-gradient(ellipse at 62% 56%,#fff 0%,#eef4f9 50%,#dee9f1 100%)}.snow-scene .scene-bottom{border-color:#18344725}.snow-scene .scene-meter{background:#18344720}
.glass-scene{--scene-ink:#f4f8fc;--scene-muted:#b7d8e8;--scene-accent:#63e0f1;background:#174e79}.glass-scene .scene-stage{background:linear-gradient(112deg,#174a73 0%,#17638f 42%,#2386b1 73%,#39a9cf 100%)}.glass-scene .scene-copy{top:15%;left:7%;width:67%;max-width:70%;clip-path:inset(0 100% 0 0);will-change:clip-path}.glass-scene .scene-copy h2{font-size:clamp(40px,5.25vw,84px);max-width:none;letter-spacing:-.045em;text-shadow:0 1px 1px #174a73}.glass-scene .scene-detail{position:absolute;z-index:2;right:7%;top:17%;width:24%;max-width:390px;font-size:clamp(14px,1.25vw,19px);line-height:1.7;color:#c3e3f1;text-shadow:0 1px 1px #174a73}.glass-scene .scene-copy em{color:#75e8f4}.glass-scene .scene-bottom{border-color:#e8f8ff50}.glass-scene .scene-meter{background:#e8f8ff35}.glass-scene .scene-fallback{left:34%;right:auto;top:24%;bottom:auto;width:34%;height:auto;transform:scaleY(-1) rotate(5deg)}
.glass-scene .scene-copy,.glass-scene .scene-detail{z-index:1}.glass-scene .scene-copy{clip-path:none;will-change:auto}.glass-scene .service-canvas{z-index:2}
.object-scene{--scene-ink:#f4f7fb;--scene-muted:#c1d1dc;--scene-accent:#c5f36b;background:#102336;color:var(--scene-ink)}.object-stage{background:linear-gradient(135deg,#203649,#0d1d2c)}.object-building{position:absolute;z-index:0;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 56%;opacity:.74;filter:saturate(.72)}.object-stage::before{content:"";position:absolute;z-index:1;inset:0;background:linear-gradient(90deg,#0b1c2be8 0%,#0b1c2bbd 35%,#0b1c2b60 69%,#0b1c2b88 100%),linear-gradient(0deg,#0a1a28dd 0%,transparent 31%,transparent 82%,#0a1a2866 100%);pointer-events:none}.object-scene .scene-copy{z-index:3;top:15%;left:7%;right:7%;width:auto;max-width:none}.object-scene .scene-copy h2{width:64%;max-width:720px;font-size:clamp(42px,5.25vw,82px);letter-spacing:-.05em;text-shadow:0 2px 20px #07182758;clip-path:inset(0 100% 0 0);will-change:clip-path}.object-scene .scene-copy em{color:#c5f36b}.object-scene .scene-copy p{position:absolute;top:3px;right:0;width:27%;max-width:370px;margin:0;padding:0 0 0 16px;border-left:1px solid #c5f36b9c;color:#e2edf3;font-size:clamp(16px,1.2vw,18px);line-height:1.65;text-shadow:0 1px 10px #07182790}.object-scene .object-canvas{z-index:2}.object-scene .scene-fallback{z-index:2;left:5%;right:auto;bottom:15%;width:35%;height:43%;object-fit:contain}.object-scene .scene-bottom{border-color:#dbeaf34a}.object-scene .scene-meter{background:#dbeaf338}.object-scene .scene-meter i{background:#c5f36b}.object-scene .scene-result{color:#f3f8fb}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(min-width:651px){.lawn-scene .scene-copy,.snow-scene .scene-copy{right:7%}.lawn-scene .scene-copy p,.snow-scene .scene-copy p{position:absolute;right:0;top:15px;width:25%;max-width:290px;margin-top:0}.lawn-scene .scene-copy h2,.snow-scene .scene-copy h2{max-width:72%}}
@media(min-width:1600px){.scene-copy h2{font-size:88px}}
@media(max-width:900px){.scene-copy h2{font-size:56px}.glass-scene .scene-copy h2{font-size:44px}.scene-copy p{font-size:15px}.service-intro{gap:5%}.scene-bottom{gap:15px}}
@media(max-width:650px){.service-intro{grid-template-columns:1fr;gap:30px}.service-intro-details>p:first-child{font-size:17px}.service-intro .service-jumps a{display:inline-block;padding:9px 12px;font-size:13px}.scene-stage,.scenes-ready .scene-stage{min-height:630px}.scene-top{top:5%;left:7%;right:7%;gap:12px}.scene-top .eyebrow{font-size:10px;letter-spacing:1px}.scene-top>a{font-size:11px}.scene-copy{top:14%;left:7%;right:7%}.scene-copy h2{font-size:clamp(36px,9.8vw,52px);letter-spacing:-.06em}.scene-copy p{font-size:14px;line-height:1.6;margin-top:18px;max-width:310px}.scene-bottom{left:7%;right:7%;bottom:4%;grid-template-columns:1fr auto;gap:15px;padding-top:17px}.scene-bottom>span:first-child{font-size:9px;max-width:145px;letter-spacing:.8px}.scene-result{display:none}.scene-scroll{font-size:10px;justify-self:end}.scene-meter{width:105px;margin-top:9px}.glass-scene .scene-copy{top:13%;max-width:none}.glass-scene .scene-copy h2{font-size:clamp(36px,9.8vw,52px)}.glass-scene .scene-copy p{max-width:320px}.scene-fallback{width:80%;right:10%;bottom:17%;height:38%}.glass-scene .scene-fallback{width:70%;right:15%;bottom:13%}.object-scene .object-building{object-position:57% 52%}.object-scene .scene-copy{top:13%;width:auto;max-width:none}.object-scene .scene-copy h2{width:100%;max-width:none;font-size:clamp(34px,8.8vw,48px)}.object-scene .scene-copy p{top:calc(100% + 16px);left:0;right:auto;width:92%;max-width:320px;font-size:14px;line-height:1.55;padding-left:11px}.object-scene .scene-fallback{left:1%;bottom:15%;width:74%;height:40%}.object-scene .scene-bottom>span:first-child{max-width:150px}}
@media(max-height:620px) and (min-width:651px){.scenes-ready .scene-stage{height:620px;min-height:620px}.scene-copy h2{font-size:44px}.scene-copy p{font-size:14px;margin-top:15px}}
/* Explicit scroll-controlled lawn scene: pin, roll to center, hold, release.
   Scoped to this chapter so winter and glass keep their existing behavior. */
#gruenpflege .scene-scroll{display:block}
#gruenpflege .scene-bottom{grid-template-columns:1fr 1fr 1fr}
#gruenpflege .scene-copy h2{font-size:clamp(36px,min(5.2vw,8.4svh),80px)}
header .brand-logo{display:block;width:clamp(92px,10vw,122px);height:clamp(72px,8vw,94px);object-fit:contain}
#gruenpflege .scene-copy h2{clip-path:inset(0 100% 0 0);will-change:clip-path}
.scenes-ready #gruenpflege.scene-unavailable{height:auto}
#gruenpflege.scene-unavailable .scene-stage{position:relative}
#gruenpflege.scene-unavailable .scene-scroll{display:none}
@media(max-width:650px){#gruenpflege .scene-bottom{grid-template-columns:1fr auto}#gruenpflege .scene-result{display:none}#gruenpflege .scene-copy h2{font-size:clamp(32px,min(9.5vw,7svh),48px)}header .brand-logo{width:84px;height:68px}}
/* Winterdienst follows the same pinned, scroll-driven chapter as green care. */
#winterdienst .scene-copy h2{clip-path:inset(0 100% 0 0);will-change:clip-path}
.scenes-ready #winterdienst.scene-unavailable{height:auto}
#winterdienst.scene-unavailable .scene-stage{position:relative}
#winterdienst.scene-unavailable .scene-scroll{display:none}
@media(max-width:650px){#winterdienst .scene-copy h2{font-size:clamp(32px,min(9.5vw,7svh),48px)}}
/* Window-cleaning uses the same pinned, scroll-led chapter and reveal timing. */
#reinigung .scene-copy{top:15%;left:7%;width:67%;max-width:70%}
#reinigung .scene-copy h2{font-size:clamp(40px,5.25vw,84px)}
.scenes-ready #reinigung.scene-unavailable{height:auto}
#reinigung.scene-unavailable .scene-stage{position:relative}
#reinigung.scene-unavailable .scene-scroll{display:none}
@media(max-width:900px){#reinigung .scene-detail{width:28%;font-size:14px}}
@media(max-width:650px){#reinigung .scene-copy{top:14%;left:7%;width:86%;max-width:86%}#reinigung .scene-copy h2{font-size:clamp(31px,8.4vw,42px);line-height:1.08}#reinigung .scene-detail{left:7%;right:7%;top:30%;width:auto;max-width:320px;font-size:13px;line-height:1.55}.glass-scene .scene-fallback{left:24%;top:43%;width:52%;right:auto;bottom:auto}}
/* Object care uses the same long pinned scroll chapter as the other animated services. */
#objektbetreuung .scene-scroll{display:block}
#objektbetreuung .scene-bottom{grid-template-columns:1fr 1fr 1fr}
.scenes-ready #objektbetreuung.scene-unavailable{height:auto}
#objektbetreuung.scene-unavailable .scene-stage{position:relative}
#objektbetreuung.scene-unavailable .scene-scroll{display:none}
@media(max-width:650px){#objektbetreuung .scene-bottom{grid-template-columns:1fr auto}#objektbetreuung .scene-result{display:none}}
.scene-scroll .scene-meter{margin-top:0}
/* Keep anchor jumps flush with each pinned chapter and align the progress meter
   exactly in the middle, including reduced-motion and narrow-screen layouts. */
html{scroll-padding-top:0}
.scene-bottom{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)!important}
.scene-bottom>span:first-child{min-width:0}
.scene-scroll{display:block!important;justify-self:center}
.scene-result{display:block!important;justify-self:end;text-align:right;min-width:0}
.draft-note{text-transform:uppercase;letter-spacing:.08em}.service-intro .service-jumps .draft-note{display:inline-flex;align-items:center;margin:0 0 0 2px;font-size:11px;line-height:1.4;color:#68705f}
@media(max-width:650px){
  .scene-bottom{left:6%;right:6%;gap:8px;grid-template-columns:minmax(0,1fr) 105px minmax(0,1fr)!important;padding-top:14px}
  .scene-bottom>span:first-child{max-width:none;font-size:8px;letter-spacing:.45px;line-height:1.45}
  .scene-result{max-width:none;font-size:10px;line-height:1.4;letter-spacing:-.1px}
  .scene-meter{width:105px}
}
.region-map{position:relative;min-width:0;overflow:hidden;border:1px solid #dbe2d5;border-radius:14px;background:#edf1e8;box-shadow:0 18px 48px #263b2010}
.region-map img{display:block;width:100%;height:auto;aspect-ratio:760/530}
footer .brand-logo{display:block;width:clamp(96px,10vw,126px);height:96px;object-fit:contain}
@media(max-width:650px){.region-map{border-radius:10px}footer .brand-logo{width:92px;height:82px}}
#objektbetreuung .object-cart-fallback{left:5%;bottom:10%;width:30%;height:39%}
@media(max-width:650px){#objektbetreuung .object-cart-fallback{left:17%;bottom:13%;width:66%;height:34%}}

/* Kleine Pfeilkorrektur im Hero; externe Links bleiben als Textglyphen lesbar. */
.nav-contact span,.pill span{font-variant-emoji:text;font-family:Arial,sans-serif}
.round-link b{font-size:23px;transform:translateX(2px);transition:background-color .24s ease,box-shadow .24s ease}
.pill{transition:background-color .24s cubic-bezier(.2,.7,.25,1),box-shadow .24s}

/* Phone layout: preserve clear text/cart separation and keep every chapter
   within the safe viewport on iOS Safari and Android Chrome. */
.service-canvas{pointer-events:none}
@media(max-width:650px){
  html{scroll-padding-top:0;-webkit-text-size-adjust:100%}
  body{overflow-x:hidden}
  .scene-stage,.scenes-ready .scene-stage{height:100svh;min-height:0}
  #objektbetreuung .scene-copy{top:max(11%,env(safe-area-inset-top));left:6%;right:6%}
  #objektbetreuung .scene-copy h2{font-size:clamp(32px,8.5vw,46px);line-height:1.04;max-width:100%}
  #objektbetreuung .scene-copy p{top:calc(100% + 13px);width:min(90%,340px);font-size:clamp(13px,3.7vw,15px);line-height:1.48;padding-left:10px}
  .object-scene .scene-bottom{left:6%;right:6%;bottom:max(3%,env(safe-area-inset-bottom));gap:6px;grid-template-columns:minmax(0,1fr) 100px minmax(0,1fr)!important}
  .object-scene .scene-bottom>span:first-child{font-size:7.5px;letter-spacing:.35px;line-height:1.4}
  .object-scene .scene-result{font-size:9px;line-height:1.35}
  #objektbetreuung .object-cart-fallback{left:8%;bottom:14%;width:84%;height:38%}
  .scene-scroll{font-size:9px}
  .scene-meter{width:100px}
  .hero-image{height:min(365px,54svh)}
  .section-pad{padding-left:6%;padding-right:6%}
  .service-card,.service-intro-details,.contact-placeholder{min-width:0;overflow-wrap:anywhere}
}
@media(max-width:650px) and (max-height:720px){
  #objektbetreuung .scene-copy{top:9%}
  #objektbetreuung .scene-copy h2{font-size:clamp(30px,7.8vw,40px)}
  #objektbetreuung .scene-copy p{top:calc(100% + 9px);font-size:13px}
  .object-scene .scene-bottom{bottom:max(2%,env(safe-area-inset-bottom))}
}

/* Compact header and footer. */
header{height:86px}
header .brand-logo{width:106px;height:72px}
.nav-contact{padding:11px 20px}
.nav-contact span{display:none}
footer{padding:27px 5.5% 18px;gap:16px 28px}
footer .brand-logo{width:92px;height:70px}
.legal-links{display:flex;align-items:center;gap:24px;font-size:13px;color:#666e62}
.legal-links a{transition:opacity .2s}
.legal-links a:hover{opacity:.65}
footer>a:last-of-type{transition:opacity .2s}
footer>a:last-of-type:hover{opacity:.65}
.draft-footer{margin-top:4px;padding-top:13px;font-size:11px}
@media(max-width:650px){header{height:74px;padding:0 6%}header .brand-logo{width:78px;height:62px}.nav-contact{padding:10px 15px}footer{padding:20px 7% 14px;gap:14px 20px}footer .brand-logo{width:78px;height:60px}.legal-links{gap:16px;font-size:12px}footer>a:last-of-type{font-size:12px}.draft-footer{padding-top:11px;margin-top:0}}

/* Scene 03 now follows the scrubber pass; keep the existing cool-blue chapter. */
.glass-scene .scene-copy,.glass-scene .scene-detail{z-index:4}
.glass-scene .scene-copy h2{clip-path:inset(0 100% 0 0);will-change:clip-path}
.glass-scene .scene-fallback.scrubber-fallback{z-index:2;left:3%;right:auto;top:auto;bottom:8%;width:56%;height:50%;object-fit:contain;transform:none}
@media(max-width:650px){.glass-scene .scene-fallback.scrubber-fallback{left:2%;right:auto;top:auto;bottom:9%;width:88%;height:40%;transform:none}}

/* Scene 05: compact fastening vignette, paced like the four service scenes. */
.repair-scene{--scene-ink:#1c2c2d;--scene-muted:#57696a;--scene-accent:#65913d;background:#e8eeeb;color:var(--scene-ink)}
.repair-stage{background:radial-gradient(ellipse at 64% 60%,#fbfdf9 0%,#e9efeb 49%,#dce5e1 100%)}
.repair-scene .scene-copy{z-index:4;top:15%;left:7%;right:7%;width:auto}
.repair-scene .scene-copy h2{max-width:64%;font-size:clamp(42px,5.25vw,82px);letter-spacing:-.05em;clip-path:inset(0 100% 0 0);will-change:clip-path}
.repair-scene .scene-copy em{color:#65913d}
.repair-scene .scene-copy p{position:absolute;top:3px;right:0;width:27%;max-width:370px;margin:0;color:#586a69;font-size:clamp(16px,1.2vw,18px);line-height:1.65}
.repair-scene .scene-top .eyebrow{color:#3c5353}
.repair-scene .scene-bottom{border-top:0;padding-top:21px;align-items:end}
.repair-scene .scene-bottom>span:first-child{color:#405756}
.repair-scene .scene-meter{background:#2c454326}
.repair-scene .scene-result{color:#405756}
.repair-scene .repair-canvas{z-index:2}
.repair-scene .driver-fallback{z-index:2;left:22%;right:auto;bottom:9%;width:56%;height:54%;object-fit:contain}
.scenes-ready #weitere-dienstleistungen.scene-unavailable{height:auto}
#weitere-dienstleistungen.scene-unavailable .scene-stage{position:relative}
#weitere-dienstleistungen.scene-unavailable .scene-scroll{display:none}
@media(max-width:650px){
  .repair-scene .scene-copy{top:max(11%,env(safe-area-inset-top));left:6%;right:6%}
  .repair-scene .scene-copy h2{max-width:100%;font-size:clamp(32px,8.5vw,46px);line-height:1.04}
  .repair-scene .scene-copy p{top:calc(100% + 13px);left:0;right:auto;width:min(90%,340px);max-width:340px;margin:0;padding-left:10px;border-left:1px solid #65913d9c;font-size:clamp(13px,3.7vw,15px);line-height:1.48}
  .repair-scene .scene-top{left:6%;right:6%}
  .repair-scene .scene-bottom{left:6%;right:6%;padding-top:14px}
  .repair-scene .driver-fallback{left:5%;bottom:12%;width:90%;height:43%}
}

/* Familiar interaction cues: a clear jump action, mobile-sized targets, and
   a semantic progress indicator whose value follows native page scrolling. */
@media(max-width:650px){
  .hero-bottom{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;align-items:start;margin:24px 0 28px}
  .round-link{display:inline-flex;justify-self:start;gap:12px;font-size:14px;line-height:1.35}
  .round-link>span{display:block}
  .round-link br{display:none}
  .round-link b{width:44px;height:44px;flex:0 0 44px}
  .service-intro .service-jumps a{min-height:44px;display:inline-flex;align-items:center;padding:10px 14px;font-size:14px}
  .nav-contact{min-height:44px;display:inline-flex;align-items:center}
}

.region-map-wrap{min-width:0}
.region-places-label{margin-top:16px;color:#687366;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.region-places{display:flex;flex-wrap:wrap;gap:7px;margin:10px 0 0;padding:0;list-style:none}
.region-places li{padding:6px 10px;border:1px solid #d6ded2;border-radius:18px;background:#fbfcf8;color:#586254;font-size:12px;line-height:1.35}
@media(max-width:650px){.region-places-label{margin-top:13px;font-size:12px}.region-places{gap:7px}.region-places li{padding:7px 10px;font-size:13px}}

/* Horizontal transparent Hochstrasser wordmark in the header and footer. */
header{height:106px}
header .brand-logo{width:202px;height:101px;object-fit:contain}
footer .brand-logo{width:180px;height:90px;object-fit:contain}
@media(max-width:650px){header{height:102px}header .brand-logo{width:clamp(164px,49vw,192px);height:clamp(82px,24.5vw,96px)}footer .brand-logo{width:136px;height:68px}}

@media(max-width:650px){footer>a:last-of-type{margin-left:auto;text-align:right}}

/* Align the hero jump action to the right on narrow screens. */
@media(max-width:650px){.hero-bottom .round-link{justify-self:end}}
/* The statement CTA stays a single uniform pill; only its arrow points down. */
.pill .pill-arrow{display:block;flex:0 0 auto;width:auto;height:auto;margin:0;padding:0;border:0;border-radius:0;background:transparent;color:inherit;font-family:inherit;font-size:23px;font-weight:400;line-height:1}
.pill:hover{transform:none}
@media(hover:hover){
  .round-link:hover b{transform:translateX(2px);box-shadow:0 2px 9px rgba(28,33,29,.14)}
  .pill:hover{box-shadow:0 3px 12px rgba(28,33,29,.12)}
}
@media(max-width:650px){.hero-bottom .round-link{align-items:center}}
@media(hover:none){.pill:hover{transform:none}.round-link:hover b{transform:translateX(2px);box-shadow:none}.contact-form button:hover{background:#172119;box-shadow:none;transform:none}}

/* Compact contact form that flows directly into the existing green section. */
.contact.section-pad{min-height:calc(100vh + 40px);min-height:calc(100svh + 40px);display:flex;flex-direction:column;justify-content:center;padding-block:clamp(38px,5.2vh,64px)}
.contact h2{margin-top:14px;font-size:clamp(44px,4.8vw,72px);line-height:1.03}
.contact-bottom{display:grid;grid-template-columns:minmax(190px,.58fr) minmax(0,1.42fr);align-items:start;gap:clamp(28px,5vw,72px);margin-top:24px;padding-top:20px}
.contact-bottom>p{max-width:255px;line-height:1.5}
.contact-form{min-width:0;padding:0;background:transparent;color:#172119;border:0;border-radius:0}
.contact-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px 14px}
.contact-fields label{display:grid;gap:5px;font-size:13px;font-weight:500}
.contact-fields input,.contact-fields textarea{width:100%;min-width:0;border:1px solid #9fc85e;border-radius:11px;background:#f7f9f3;color:#172119;padding:10px 13px;font:inherit;font-size:16px;line-height:1.3;outline:none;transition:border-color .2s,box-shadow .2s}
.contact-fields input{min-height:46px}
.contact-fields textarea{min-height:88px;resize:vertical}
.contact-fields input::placeholder,.contact-fields textarea::placeholder{color:#8a9387;font-size:13px;opacity:1}
.contact-fields input:focus,.contact-fields textarea:focus{border-color:#3f6128;box-shadow:0 0 0 1px #517c2c2a}
.contact-fields input:focus-visible,.contact-fields textarea:focus-visible,.contact-form button:focus-visible,.contact-privacy a:focus-visible{outline:2px solid #365a27;outline-offset:1px}
@media(min-width:651px){
  .contact-fields input:focus,.contact-fields textarea:focus{box-shadow:0 0 0 .5px #517c2c2a}
  .contact-fields input:focus-visible,.contact-fields textarea:focus-visible{outline-width:1px}
}
.contact-message{grid-column:1/-1}
.contact-form button{display:flex;align-items:center;justify-content:center;width:100%;min-height:40px;margin:15px 0 0;padding:0 22px;border:0;border-radius:22px;background:#172119;color:#f7f9f3;font:inherit;font-size:14px;cursor:pointer;transition:background .2s,box-shadow .2s}
.contact-form button:hover{background:#2b3e2d;transform:none;box-shadow:0 3px 12px rgba(28,33,29,.12)}
@media(hover:none){.contact-form button:hover{background:#172119;box-shadow:none}}
.contact-privacy{margin:8px 0 0;color:#40523a;font-size:12px;line-height:1.45}
.contact-privacy a{color:#22391f;text-decoration:underline;text-underline-offset:2px}
.contact-privacy .privacy-arrow{display:inline-block;width:11px;height:11px;margin-left:2px;vertical-align:-1px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:650px){.contact.section-pad{min-height:calc(100vh + 18px);min-height:calc(100svh + 18px);padding-block:22px 40px}.contact h2{margin-top:9px;font-size:clamp(36px,8.6vw,45px);line-height:1.02}.contact-bottom{grid-template-columns:minmax(0,1fr);gap:12px;margin-top:14px;padding-top:12px}.contact-bottom>p{font-size:15px;line-height:1.4}.contact-info address{gap:3px;margin-top:10px;line-height:1.35}.contact-fields{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 10px}.contact-fields label{gap:4px;font-size:12px}.contact-fields input,.contact-fields textarea{padding:9px 10px;font-size:16px;border-radius:9px}.contact-fields input::placeholder,.contact-fields textarea::placeholder{font-size:12px}.contact-fields input{min-height:42px}.contact-fields textarea{height:84px;min-height:84px}.contact-form button{min-height:38px;margin-top:10px}.contact-privacy{margin-top:6px;font-size:11px;line-height:1.35}}
/* Single column on narrow phones so the fields stay comfortably wide. */
@media(max-width:430px){.contact-fields{grid-template-columns:minmax(0,1fr)}}
.contact-info>p{font-size:18px;max-width:255px;line-height:1.5}
.contact-info address{display:grid;gap:6px;margin-top:18px;font-style:normal;font-size:14px;line-height:1.5;overflow-wrap:anywhere}
.contact-info address strong{font-size:14px;font-weight:600}
.contact-info address a{text-decoration:underline;text-decoration-color:#405c31;text-underline-offset:3px}
.contact-info address a:hover{opacity:.7}
@media(max-width:650px){.contact-info>p{font-size:15px;line-height:1.4}.contact-info address{gap:4px;margin-top:13px;font-size:14px}}
@media(max-width:650px){#kontakt{scroll-margin-top:-16px}}

/* Keep the large scroll-linked layers composited during parallax. */
.statement-inner{will-change:transform}

/* Extra mobile scroll room keeps the message field reachable above the iOS keyboard. */
@media(max-width:650px){
  .contact.section-pad{
    min-height:calc(100vh + 100px);
    min-height:calc(100svh + 100px);
    justify-content:flex-start;
    padding-bottom:120px;
  }
  .contact-fields textarea{
    height:132px;
    min-height:132px;
    scroll-margin-block:16px;
  }
}

@media(max-width:650px){
  .contact-fields label{font-size:12px}
  .contact-fields input,
  .contact-fields textarea{
    /* Keep the iOS no-zoom font size without scaling the layout box. */
    box-sizing:border-box;
    width:100%;
    min-width:0;
    font-size:16px;
    line-height:1.3;
    transform:none;
    padding:9px 10px;
    border-width:1px;
    border-radius:9px;
  }
  .contact-fields input{min-height:46px;margin-bottom:0}
  .contact-fields textarea{height:176px;min-height:176px;margin-bottom:0}
  .contact-fields input::placeholder,
  .contact-fields textarea::placeholder{font-size:16px}
}

/* Slim, consistent scroll cue inside each pinned service scene. */
.scene-scroll-cue{position:absolute;z-index:5;top:52%;right:5%;display:flex;align-items:center;gap:5px;transform:translateY(-50%);color:var(--scene-ink);opacity:.82;pointer-events:none;user-select:none}
.scene-scroll-cue span{display:block;width:42px;text-align:center;white-space:nowrap;transform:rotate(-90deg);font-size:9px;font-weight:600;line-height:1;letter-spacing:2px}
.scene-scroll-cue svg{display:block;width:15px;height:clamp(120px,26svh,210px);overflow:visible;fill:none;stroke:currentColor;stroke-width:1.35;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:650px){.scene-scroll-cue{right:2%}.scene-scroll-cue span{margin-right:-14px;font-size:8px;letter-spacing:1.8px}.scene-scroll-cue svg{width:13px;height:clamp(105px,23svh,170px)}}
@media(max-height:620px) and (min-width:651px){.scene-scroll-cue svg{height:120px}}

/* On mobile, let the next section begin just inside the first viewport. */
@media(max-width:650px){
  .hero-image{height:340px;height:min(340px,50svh)}
  .intro.section-pad{padding-top:42px}
}

/* Keep iPhone form geometry steady while the keyboard is open. In particular,
   don't transform the reveal wrapper around focused inputs or let fields exceed
   their grid tracks. */
@media(max-width:650px){
  .contact.section-pad{min-height:calc(100svh + 100px)}
  .contact-bottom,.contact-form,.contact-fields,.contact-fields label{min-width:0;max-width:100%}
  .contact-form,.contact-fields{width:100%}
  .contact .reveal{transform:none!important}
  html:has(#kontakt :focus){scroll-behavior:auto!important}
  .contact-fields input,.contact-fields textarea{
    box-sizing:border-box;
    width:100%;
    min-width:0;
    max-width:100%;
    /* 16px is the smallest size at which iOS does not zoom into a focused field. */
    font-size:16px!important;
    line-height:1.3;
    transform:none!important;
    -webkit-text-size-adjust:100%;
  }
  /* The zoom rule applies to typed text only; hints sit closer to the labels. */
  .contact-fields input::placeholder,.contact-fields textarea::placeholder{font-size:14px!important}
  .contact-fields label{font-size:13px}
}


/* Safari samples a fixed edge element for the iPhone status-area tint.
   Its direct color lookup skips boxes 10px high or less. Keep the visible
   four-pixel line separate from an empty, paintless 11px sampler. */
:root{--page-theme-color:#f8f9f5;background-color:var(--page-theme-color)}
body{background-color:var(--page-theme-color)}
.scene-color-bar{position:fixed;z-index:2147483646;top:0;left:0;right:0;height:4px;background-color:var(--page-theme-color);pointer-events:none;transition:background-color .18s linear}
.safari-status-sampler{display:none}
@supports (-webkit-background-clip:text){
  @media(max-width:650px){
    html.has-iphone-safe-area .safari-status-sampler{display:block;position:fixed;top:0;left:0;right:0;height:11px;z-index:2147483647;pointer-events:none;border:0;outline:0;box-shadow:none;background-color:var(--page-theme-color);-webkit-background-clip:text;background-clip:text}
    html.has-iphone-safe-area[data-status-sample-refresh] .safari-status-sampler{height:12px}
  }
}
@media(max-width:650px){
  html.has-iphone-safe-area:not(.has-dynamic-island) header{height:calc(102px + env(safe-area-inset-top,0px));padding-top:env(safe-area-inset-top,0px);padding-left:max(6%,env(safe-area-inset-left,0px));padding-right:max(6%,env(safe-area-inset-right,0px))}
  html.has-iphone-safe-area:not(.has-dynamic-island) footer{padding-bottom:calc(22px + env(safe-area-inset-bottom,0px))}
  html.has-iphone-safe-area:not(.has-dynamic-island) .scene-top{top:calc(5% + env(safe-area-inset-top,0px))}
  html.has-iphone-safe-area:not(.has-dynamic-island) .scene-copy{top:calc(14% + env(safe-area-inset-top,0px))}
  html.has-iphone-safe-area:not(.has-dynamic-island) .glass-scene .scene-copy{top:calc(13% + env(safe-area-inset-top,0px))}
  html.has-iphone-safe-area:not(.has-dynamic-island) #objektbetreuung .scene-copy{top:calc(13% + env(safe-area-inset-top,0px))}
  html.has-iphone-safe-area:not(.has-dynamic-island) #weitere-dienstleistungen .scene-copy{top:calc(11% + env(safe-area-inset-top,0px))}
}
.form-error{margin:8px 0 0;color:#8a1414;font-size:13px;line-height:1.4}

/* Scenes play once in time while scrolling is held (see scenes.mjs). Each chapter
   is exactly one stage tall; the scroll cue appears once the gadget has arrived. */
/* Reserve the scrollbar's space so hiding overflow during a hold never shifts
   the layout sideways. */
html{scrollbar-gutter:stable}
html.scene-hold{overflow:hidden;scroll-behavior:auto;overscroll-behavior:none}
.scenes-ready .scroll-scene{height:auto}
.scenes-ready .scene-stage{position:relative;top:auto}
@media(max-width:650px){.scenes-ready .scene-stage{height:100vh;height:100svh;min-height:0}}
.scenes-ready .scene-scroll-cue{transition:opacity .4s ease}
.scenes-ready .scroll-scene:not(.scene-done) .scene-scroll-cue{opacity:0}
.scene-meter i{transition:none}

/* Every surface paints its own background. The page background follows the
   colour at the top of the viewport (for the browser chrome), so a transparent
   section would otherwise take on the previous section's colour. */
.hero,.intro,.region,footer{background:var(--paper)}

/* Floating back-to-top button. script.js shows it once the visitor is past the
   first screen, and hides it near the footer (which has its own link) and, on
   phones, over the scene captions and the contact form's submit button that sit
   in the same corner. */
.to-top{position:fixed;z-index:50;right:max(18px,env(safe-area-inset-right,0px));bottom:calc(18px + env(safe-area-inset-bottom,0px));display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:var(--acid);color:var(--ink);font-size:23px;font-weight:400;line-height:1;opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity .25s ease,transform .25s ease,box-shadow .24s ease,visibility 0s linear .25s}
.to-top.is-visible{opacity:1;visibility:visible;transform:none;transition:opacity .25s ease,transform .25s ease,box-shadow .24s ease,visibility 0s}
/* Same circle and glyph as the hero's "Leistungen in Aktion" button. */
.to-top span{font-variant-emoji:text}
@media(hover:hover){.to-top:hover{box-shadow:0 2px 9px rgba(28,33,29,.14)}}
html.scene-hold .to-top{opacity:0;visibility:hidden}
@media(max-width:650px){.to-top{width:44px;height:44px;right:max(14px,env(safe-area-inset-right,0px));bottom:calc(14px + env(safe-area-inset-bottom,0px))}}


/* Hero parallax driven by the scroll itself where supported (Safari 26, Chrome
   115+): it runs in step with scrolling, unlike a script, which on phones lags
   behind the scroll thread and moves in jerks. The timeline is named on the
   frame because the frame (overflow: hidden) would otherwise be the scroller the
   image's own view() tracks. script.js covers other desktops; older phones keep
   the photo still. It follows the visitor's own scrolling, so it stays on with
   reduced motion, overriding the global animation reset in style.css. */
@supports (animation-timeline: view()) {
  .hero-image{view-timeline:--hero-frame block}
  .hero-image img{animation:hero-parallax linear both!important;animation-timeline:--hero-frame!important;animation-range:cover 0% cover 100%}
  @keyframes hero-parallax{from{transform:translateY(-75px) scale(1.035)}to{transform:translateY(75px) scale(1.035)}}
}


/* Accessibility (WCAG 2.1 AA). Colours below were measured against the actual
   pixels behind each text in WebKit and Chromium. */
.skip-link{position:fixed;z-index:2147483647;left:16px;top:12px;padding:10px 16px;border-radius:24px;background:var(--ink);color:#fff;font-size:14px;transform:translateY(-200%);transition:transform .15s ease}
.skip-link:focus,.skip-link:focus-visible{transform:none;outline:3px solid var(--acid);outline-offset:2px}
main:focus{outline:none}
/* Form: hints at 4.5:1 or more; required fields marked. */
.contact-fields input::placeholder,.contact-fields textarea::placeholder{color:#677164}
.required-mark{font-weight:inherit;color:inherit}
.contact-required{margin:8px 0 0;color:#40523a;font-size:12px}
/* Winter: description text was 4.4:1 on the brightest snow. */
.snow-scene .scene-copy p{color:#4c5f6f}
/* Cleaning: the detail text sat on the light end of the gradient and the
   bottom captions on the light floor. A soft shade behind both, under the text
   and above the artwork. */
.glass-scene .scene-stage::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;background:radial-gradient(ellipse 42% 34% at 86% 22%,rgba(12,52,86,.55),rgba(12,52,86,0) 100%),linear-gradient(0deg,rgba(9,40,66,.78) 0%,rgba(9,40,66,.5) 9%,rgba(9,40,66,0) 18%)}
.glass-scene .scene-detail{color:#f2f9fc}
.glass-scene .scene-copy,.glass-scene .scene-detail,.glass-scene .scene-bottom{z-index:4}
@media(max-width:650px){.glass-scene .scene-stage::after{background:radial-gradient(ellipse 70% 20% at 40% 30%,rgba(12,52,86,.5),rgba(12,52,86,0) 100%),linear-gradient(0deg,rgba(9,40,66,.8) 0%,rgba(9,40,66,.5) 10%,rgba(9,40,66,0) 20%)}}
/* Object care: slightly deeper shade behind the description over the photo. */
.object-stage::before{background:linear-gradient(90deg,#0b1c2be8 0%,#0b1c2bbd 35%,#0b1c2b80 62%,#0b1c2bb0 100%),linear-gradient(0deg,#0a1a28dd 0%,transparent 31%,transparent 82%,#0a1a2866 100%)}