/* Mountainhouse studio presentation. */
.studio-draft{--draft-accent:#ff8759}
.header{position:sticky;top:0;z-index:20;background:#171916ed;backdrop-filter:blur(18px);height:96px;border-color:#a5ad9426}
.header:after{content:"";position:absolute;bottom:-1px;left:0;width:100%;height:2px;background:linear-gradient(90deg,#ff8759,#d4dfbf);transform:scaleX(var(--reading-progress,0));transform-origin:left;pointer-events:none}
.header nav a[aria-current]{color:#ff8759}
.header nav a[aria-current]:after{transform:scaleX(1)}
.hero{overflow:clip}
.hero:before{inset:-100px -80px 0;background:radial-gradient(ellipse at 78% 45%,#a5ad941a,transparent 48%),radial-gradient(ellipse at 40% 90%,#ff875908,transparent 45%)}
.hero-grid{min-height:680px;grid-template-columns:1.05fr 1fr;gap:25px}
.hero-copy{position:relative;z-index:2}
.hero-copy h1{font-size:clamp(58px,6.6vw,100px)}
.hero-copy h1 span{background:linear-gradient(110deg,#ff8759 30%,#ffd2b6 55%,#ff8759 80%);background-size:220% 100%;background-clip:text;-webkit-background-clip:text;color:transparent}
.hero-copy>p{max-width:450px}
.hero-note{padding-left:17px;border-left:1px solid #ff875973}
.summit{height:620px;overflow:visible;--demo-ink:#d4dfbf;--demo-wash:#d4dfbf15}
.summit-scene{position:absolute;inset:0;pointer-events:none;z-index:-1}
.summit-halo{position:absolute;inset:12% -5%;background:radial-gradient(ellipse,#a5ad9425,transparent 66%);filter:blur(12px)}
.summit-orbits{position:absolute;width:115%;height:auto;left:-8%;top:4%;fill:none;stroke:url(#orbit-ink);stroke-width:.8}
.summit-orbits .orbit-accent{stroke:#ff8759;stroke-width:1.8;stroke-dasharray:370;stroke-dashoffset:0}
.summit-orbits .orbit-point{fill:#ff8759;stroke:none}
.summit-orbits .sage{fill:#d4dfbf}
.summit-grid{inset:0 -25px;background-size:35px 35px;opacity:.6;transform:perspective(650px) rotateX(18deg)}
.terrain{width:125%;left:-14%;top:3%;opacity:.42}
.coordinate{top:28px;right:4%;font-size:8px}
.satellite{position:absolute;display:grid;place-items:center;width:68px;height:68px;border:1px solid #83916b70;border-radius:14px;background:linear-gradient(135deg,#39432eee,#20261cee);box-shadow:0 12px 25px #0004,inset 0 1px #e4ebd312;backdrop-filter:blur(8px)}
.satellite svg{width:38px;height:38px;fill:none;stroke:#c4d1ae;stroke-width:1.2}
.satellite-code{left:1%;top:92px;transform:rotate(-12deg)}
.satellite-layers{right:0;top:120px;transform:rotate(12deg);width:58px;height:58px}
.satellite-phone{right:4%;bottom:110px;transform:rotate(9deg);width:61px;height:76px}
.satellite-phone svg{stroke:#ffad89}
.preview-window{top:172px;left:5%;width:87%;border-color:#9baa7a9c;border-radius:10px;background:linear-gradient(125deg,#39432f,#20271e 75%);box-shadow:0 40px 80px #0008,0 0 60px #a5ad940b}
.preview-window .window-top{padding:12px 16px;background:#e4ebd304}
.preview-title{font-size:clamp(34px,3.8vw,55px);margin:17px 0}
.window-content{padding:23px 26px 0}
.preview-bottom{font-size:10px;gap:10px}
.preview-bottom svg{width:34px;height:34px;flex-shrink:0}
.preview-bars{height:25px;gap:6px;margin-top:12px;opacity:.5}
.preview-bars i{background:var(--demo-ink)}
.demo-interface{display:flex;gap:12px;height:106px;margin-top:18px;padding:11px;border:1px solid #c8d6b126;border-radius:5px;background:#151c1680;transition:background .4s}
.demo-sidebar{width:23px;display:flex;flex-direction:column;gap:9px;border-right:1px solid #c8d6b120;padding-right:8px}
.demo-sidebar i{height:5px;background:var(--demo-ink);opacity:.3;border-radius:2px}
.demo-sidebar i:first-child{opacity:.9}
.demo-workspace{flex:1;min-width:0;position:relative;overflow:hidden}
.demo-toolbar{display:flex;gap:4px;margin-bottom:9px}
.demo-toolbar i{width:5px;height:3px;background:var(--demo-ink);opacity:.35}
.demo-toolbar i:first-child{width:45%;margin-right:auto}
.demo-modules{display:flex;gap:7px;transition:transform .4s}
.demo-module{flex:1;padding:8px;border:1px solid #c8d6b126;border-radius:3px;background:var(--demo-wash)}
.demo-module span{display:block;width:11px;height:11px;background:var(--demo-ink);opacity:.7;border-radius:2px;margin-bottom:8px}
.demo-module i{display:block;width:75%;height:3px;background:var(--demo-ink);opacity:.25;margin-top:5px}
.demo-module i:last-child{width:50%}
.demo-chart{position:absolute;width:100%;height:38px;left:0;bottom:-5px;fill:none;stroke:var(--demo-ink);stroke-width:1.3;opacity:.8}
.summit[data-preview="software"]{--demo-ink:#ffd2b6;--demo-wash:#ff87591a}
.summit[data-preview="software"] .demo-modules{transform:translateY(5px)}
.summit[data-preview="software"] .demo-module:nth-child(2){transform:translateY(-5px)}
.summit[data-preview="app"]{--demo-ink:#d6d9ff;--demo-wash:#d6d9ff16}
.summit[data-preview="app"] .demo-interface{width:48%;margin-inline:auto;height:122px;border-radius:14px 14px 0 0;border-bottom:0;padding:12px 8px 0}
.summit[data-preview="app"] .demo-sidebar{display:none}
.summit[data-preview="app"] .demo-module:nth-child(3){display:none}
.summit[data-preview="app"] .demo-chart{height:30px}
.playground{bottom:24px;left:5%;right:auto;z-index:3;gap:16px;background:#171916d9;border:1px solid #a5ad9430;border-radius:40px;padding:9px 10px 9px 17px;backdrop-filter:blur(10px);box-shadow:0 10px 30px #0003}
.playground>div{border:0;background:transparent;padding:0}
.summit-tag{bottom:-6px;right:5%}
.services{gap:14px;border-top:0}
.services article,.services article+article{padding:27px 22px 23px;border:1px solid #4c5542;border-radius:6px;background:linear-gradient(145deg,#2c32261f,#171916);display:flex;flex-direction:column;overflow:hidden}
.services article:before{content:"";position:absolute;top:0;left:22px;right:22px;height:1px;background:linear-gradient(90deg,transparent,#c4d1ae66,transparent)}
.services article:hover{border-color:#a5ad94;background:linear-gradient(145deg,#353e2a70,#1c2119);box-shadow:0 14px 40px #0002}
.services h3{font-size:25px}
.services p{min-height:0;flex:1}
.services .tags{margin-top:10px;min-height:55px;align-content:start}
.services article>a{margin-top:20px}
.projects{background:radial-gradient(ellipse at 90% 25%,#a5ad940c,transparent 50%),#20231d}
.project{border-radius:8px;background:linear-gradient(125deg,#2c3425,#252c21);box-shadow:0 20px 55px #0002}
.project-info{align-self:center;padding:42px}
.project+.project{margin-top:32px}
.route-visual{min-height:390px;background-color:#343f2c;background-size:85px 95px;box-shadow:inset 25px 0 50px #20271d20}
.route-visual:before{content:"";position:absolute;width:210px;height:210px;border:1px solid #c8d6b120;border-radius:50%;top:-50px;right:-30px;box-shadow:0 0 0 45px #c8d6b108,0 0 0 90px #c8d6b106}
.map-card{left:8%;right:8%;bottom:48px;padding:22px;box-shadow:0 20px 45px #0004;transform:rotate(-2deg)}
.project:hover .map-card{transform:rotate(0) translateY(-6px)}
.project-rog{min-height:350px}
.project-rog .project-info{padding:34px 40px}
.project-rog .rog-visual{height:350px;align-self:stretch;contain:layout paint}
.project-rog .rog-laptop{max-height:350px;transform:translate(-22px,-8px) rotate(-7deg)}
.project-rog .rog-app-crop{width:62%;max-width:310px;bottom:44px;right:6%;transform:rotate(3deg);border-color:#a5ad94;box-shadow:0 22px 45px #0007}
.project-rog .rog-app-bar{padding:10px;font-size:9px}
.project-rog .rog-caption{font-size:7px;bottom:15px}
.steps{position:relative}
.steps:before{content:"";position:absolute;left:10px;top:32px;bottom:40px;width:1px;background:linear-gradient(#ff875966,#a5ad9426);pointer-events:none}
.steps li{position:relative;gap:25px}
.steps li>span{position:relative;z-index:1;flex-shrink:0;display:grid;place-items:center;width:24px;height:27px;background:#171916;border:1px solid #ff87594d;border-radius:4px;font-size:9px;margin-top:0}
.steps li:hover>span{background:#ff8759;color:#171916}
.contact{position:relative;isolation:isolate;overflow:hidden;background:#df7047}
/* Fine static grain softens gradient banding, without concentric edges. */
.contact:before{content:"";position:absolute;z-index:-1;inset:0;pointer-events:none;opacity:0;mix-blend-mode:soft-light;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cfilter id='grain'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23808080' filter='url(%23grain)' d='M0 0h180v180H0z'/%3E%3C/svg%3E")}
@media(prefers-reduced-motion:no-preference){
 .hero-copy h1{animation:hero-enter .9s cubic-bezier(.2,.7,.2,1) both}
 .hero-copy h1 span{animation:ink-pass 2.5s ease-out both}
 .summit-scene{animation:scene-enter 1.4s cubic-bezier(.2,.65,.2,1) both}
 .summit-orbits{transform-origin:50% 50%;animation:orbit-turn 90s linear infinite}
 .summit.orbits-paused .summit-orbits{animation-play-state:paused}
 .orbit-accent{animation:orbit-draw 1.8s .2s ease-out both}
 .satellite-code{animation:satellite-enter 1s .25s ease-out both}
 .satellite-layers{animation:satellite-enter 1s .45s ease-out both}
 .satellite-phone{animation:satellite-enter 1s .65s ease-out both}
 .project.studio-reveal .rog-app-crop{animation:app-enter 1s .15s cubic-bezier(.2,.7,.2,1) both}
 @keyframes hero-enter{from{opacity:0;translate:0 22px}to{opacity:1;translate:0 0}}
 @keyframes ink-pass{from{background-position:100% 0}to{background-position:0 0}}
 @keyframes scene-enter{from{opacity:0;scale:.93}to{opacity:1;scale:1}}
 @keyframes orbit-turn{to{transform:rotate(360deg)}}
 @keyframes orbit-draw{from{stroke-dashoffset:370}to{stroke-dashoffset:0}}
 @keyframes satellite-enter{from{opacity:0;translate:0 18px}to{opacity:1;translate:0 0}}
 @keyframes app-enter{from{opacity:0;translate:15px 24px}to{opacity:1;translate:0 0}}
}
@media(min-width:761px) and (max-width:1200px){.services article,.services article+article{padding:26px;border:1px solid #4c5542}.services .tags{min-height:32px}}
@media(min-width:761px) and (max-width:1100px){.hero-grid{min-height:650px;gap:15px}.summit{height:580px}.preview-window{top:160px}.window-content{padding:20px 18px 0}.preview-title{font-size:37px}.playground{left:0;gap:9px;padding-left:12px}.playground button{padding:8px 12px}.satellite{width:52px;height:52px}.satellite-code{top:96px}.satellite-phone{bottom:95px}.project-rog .project-info{padding:30px}.project-rog .rog-visual{height:330px}}
@media(max-width:760px){
 .header{height:80px;backdrop-filter:blur(12px)}
 .hero-grid{grid-template-columns:1fr;min-height:0;gap:0}
 .hero-copy h1{font-size:clamp(51px,10vw,78px)}
 .hero-note{margin-bottom:8px}
 .summit{height:570px;max-width:480px}
 .summit-orbits{width:110%;left:-5%;top:4%}
 .coordinate{top:20px;right:0}
 .preview-window{top:162px;left:6%;width:85%}
 .preview-title{font-size:clamp(30px,8.4vw,43px)}
 .window-content{padding:20px 20px 0}
 .demo-interface{height:90px;margin-top:15px}
 .summit[data-preview="app"] .demo-interface{height:106px}
 .demo-module{padding:6px}.demo-chart{height:27px}
 .satellite-code{top:80px;left:6%;width:53px;height:53px}
 .satellite-layers{top:100px;right:0;width:49px;height:49px}
 .satellite-phone{bottom:80px;right:0;width:46px;height:62px}
 .satellite svg{width:29px;height:29px}
 .playground{bottom:20px;left:4%;gap:10px;padding:8px 9px 8px 12px}
 .playground>span{font-size:7px}.playground button{padding:8px 13px}
 .summit-tag{bottom:0}
 .services{gap:12px}.services article,.services article+article{padding:25px;border:1px solid #4c5542}
 .services .tags{min-height:0}.services h3{font-size:28px}
 .project-info{padding:28px}.route-visual{min-height:300px}.map-card{padding:18px}
 .project-rog .project-info{padding:28px}.project-rog .rog-visual{height:260px}
 .project-rog .rog-laptop{max-height:260px;transform:translate(-25px,-5px) rotate(-7deg)}
 .project-rog .rog-app-crop{width:60%;max-width:250px;bottom:34px}
 .project-rog .rog-app-bar{font-size:8px;padding:8px}.project-rog .rog-caption{font-size:5px;bottom:11px}
}
@media(max-width:380px){.hero-copy h1{font-size:49px}.summit{height:550px}.preview-window{top:160px}.window-content{padding:19px 16px 0}.preview-title{font-size:30px}.preview-bottom{font-size:9px}.playground{left:0;gap:8px;padding-left:10px}.playground button{padding:8px 11px}.demo-interface{gap:8px}.demo-module{padding:5px}}
@media(prefers-reduced-motion:reduce){.hero-copy h1 span{background:none;color:#ff8759}.project:hover .map-card{transform:rotate(-2deg)}}
/* Keep the preview controls clear of the tilted window in every demo mode. */
.preview-window{top:140px}
.services article:first-child,.services article:last-child{padding-left:22px;padding-right:22px}
@media(min-width:761px) and (max-width:1200px){.services article:first-child,.services article:last-child{padding:26px}}
@media(min-width:761px) and (max-width:1100px){.preview-window{top:135px}}
@media(max-width:760px){.summit{height:590px}.preview-window{top:140px}.services article:first-child,.services article:last-child{padding:25px}}
@media(max-width:380px){.summit{height:570px}.preview-window{top:140px}}
/* Let controls follow the actual window height, including longer demo titles. */
.summit{height:auto;min-height:620px;display:flex;flex-direction:column;padding:140px 0 25px}
.preview-window{position:relative;top:auto;left:auto;margin-left:5%;flex-shrink:0}
.playground{position:relative;bottom:auto;left:auto;right:auto;align-self:flex-start;margin:44px 0 0 5%;flex-shrink:0}
@media(max-width:760px){.summit{height:auto;min-height:590px;padding-top:140px;padding-bottom:25px}.preview-window{top:auto;margin-left:6%}.playground{margin-left:4%}}
@media(max-width:380px){.summit{height:auto;min-height:570px}.preview-window{top:auto}.playground{margin-left:0}}

/* Align the ticker with the content instead of spanning the viewport. */
.ticker{width:calc(100% - 128px);max-width:1272px;margin-inline:auto;border-radius:4px}
@media(max-width:1100px){.ticker{width:calc(100% - 70px)}}
@media(max-width:760px){.ticker{width:calc(100% - 46px)}}
/* One shared outer width; decorative hero artwork stays inside its column. */
.header{max-width:1400px}
.summit{overflow:clip}
@media(min-width:761px){.hero-grid{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr)}}
/* Compact floating preview, with a glow that fades before the content edge. */
.hero:before{inset:0 64px;background:radial-gradient(ellipse closest-side at 76% 48%,#a5ad9414,transparent 100%)}
.summit-halo{inset:12% 6%;background:radial-gradient(ellipse closest-side,#a5ad941c,transparent 100%);filter:none}
.preview-window{width:76%;max-width:420px;margin-left:10%;border-radius:7px;box-shadow:0 24px 50px #0006}
.preview-window .window-top{padding:10px 13px;font-size:7px}
.window-content{padding:19px 22px 0}
.preview-title{font-size:40px;letter-spacing:-2px;margin:14px 0}
.preview-bottom{font-size:9px}
.demo-interface{height:76px;margin-top:12px;padding:8px;gap:9px}
.demo-module{padding:5px}
.demo-module span{width:8px;height:8px;margin-bottom:5px}
.demo-chart{height:25px}
.preview-bars{height:21px;margin-top:9px}
.summit[data-preview="app"] .demo-interface{height:88px}
.playground{margin-left:10%;margin-top:36px}
.summit-tag{bottom:1px}
@media(max-width:1100px){.hero:before{inset:0 35px}.preview-title{font-size:clamp(25px,3.1vw,36px)}.window-content{padding:17px 17px 0}}
@media(max-width:760px){.hero:before{inset:0 23px}.preview-window{width:80%;max-width:360px;margin-left:8%}.preview-title{font-size:clamp(25px,7.4vw,36px)}.playground{margin-left:4%}.summit{min-height:540px}.summit[data-preview="app"] .demo-interface{height:88px}}
@media(max-width:380px){.preview-title{font-size:25px}.window-content{padding:17px 14px 0}.preview-window .window-top{font-size:6px}.playground{margin-left:0}}
/* Keep the window wide and shallow; size its contents to the window itself. */
.summit{overflow:visible}
.summit-scene{overflow:visible}
.summit-orbits{width:100%;left:0;top:7%}
.summit-grid{inset:0;background-size:35px 35px}
.terrain{width:100%;left:0;height:88%;top:7%}
.summit-tag{bottom:4px}
.preview-window{container-type:inline-size;width:80%;max-width:440px;margin-left:8%}
.preview-window .window-top{padding:9px 12px;font-size:clamp(5px,1.65cqw,7px)}
.window-content{padding:16px 18px 15px}
.preview-label{font-size:clamp(6px,1.85cqw,8px)}
.preview-title{font-size:clamp(20px,8.2cqw,36px);line-height:1.06;letter-spacing:-.04em;margin:12px 0;white-space:nowrap}
.preview-bottom{font-size:clamp(7px,2.1cqw,9px);gap:8px}
.preview-bottom svg{width:26px;height:26px}
.demo-interface{height:56px;margin-top:11px;padding:6px;gap:8px}
.demo-toolbar{margin-bottom:5px}
.demo-module{padding:4px}
.demo-module span{width:6px;height:6px;margin-bottom:3px}
.demo-module i{height:2px;margin-top:3px}
.demo-chart{height:20px;bottom:-3px}
.preview-bars{display:none}
.summit[data-preview="app"] .demo-interface{height:56px;width:45%;border-radius:8px 8px 0 0}
.summit[data-preview="app"] .demo-chart{height:20px}
.playground{margin-top:38px;margin-left:8%}
@media(max-width:1100px){.preview-title{font-size:clamp(18px,8.2cqw,36px)}.window-content{padding:14px 15px 13px}}
@media(max-width:760px){.preview-window{width:84%;max-width:360px;margin-left:6%}.preview-title{font-size:clamp(18px,8.2cqw,30px)}.window-content{padding:14px 15px 13px}.playground{margin-left:4%}.summit{min-height:490px}}
@media(max-width:380px){.preview-title{font-size:clamp(18px,8.2cqw,30px)}.preview-window .window-top{font-size:clamp(5px,1.65cqw,7px)}.playground{margin-left:0}}
/* Scale vertical spacing with the card too, rather than only shrinking its width. */
.preview-window .window-top{padding:2cqw 2.7cqw}
.window-content{padding:3.5cqw 4.1cqw 3cqw}
.preview-title{margin:2.7cqw 0}
.preview-bottom svg{width:6cqw;height:6cqw}
.demo-interface,.summit[data-preview="app"] .demo-interface{height:13cqw;margin-top:2.5cqw;padding:1.4cqw}
/* Type in place, keeping the final line breaks and the complete accessible name. */
.hero-copy h1{animation:none}
.hero-copy h1 .typed-letter{display:inline;color:inherit;background:none;-webkit-background-clip:initial;background-clip:initial;animation:none;white-space:pre-wrap}
.hero-copy h1.is-typing .typed-letter{visibility:hidden}
.hero-copy h1.is-typing .typed-letter.is-typed{visibility:visible}
.hero-copy h1 .software-word{color:#ff8759;background:none;animation:none}
@media(prefers-reduced-motion:no-preference){
 .hero-copy h1 .software-word.software-shine{color:transparent;background:linear-gradient(105deg,#ff8759 0%,#ff8759 40%,#ffdabd 49%,#fff1dd 50%,#ffdabd 51%,#ff8759 60%,#ff8759 100%);background-size:300% 100%;background-position:100% 0;background-clip:text;-webkit-background-clip:text;animation:software-gloss 1.8s .15s ease-in-out both}
 @keyframes software-gloss{from{background-position:100% 0}to{background-position:0% 0}}
}
/* Test: full viewport chapters, with native snapping and room for longer content. */
html.chapter-test{--chapter-header:96px;scroll-padding-top:var(--chapter-header);scroll-snap-type:y mandatory}
html.chapter-test.snap-in-flight{scroll-snap-type:none}
.chapter-test .hero,.chapter-test #leistungen,.chapter-test #projekte,.chapter-test #zusammenarbeit,.chapter-test #kontakt,.chapter-test .faq,.chapter-test footer{scroll-snap-align:start}
.chapter-test #leistungen,.chapter-test #projekte,.chapter-test #zusammenarbeit,.chapter-test #kontakt{min-height:calc(100svh - var(--chapter-header));padding-top:clamp(40px,6vh,80px);padding-bottom:clamp(40px,6vh,80px);display:flex;flex-direction:column;justify-content:center}
.chapter-test #projekte>.wrap,.chapter-test #kontakt>.wrap{width:100%}
.chapter-test .scene-headline .typed-letter{color:inherit;background:none;background-clip:initial;-webkit-background-clip:initial;animation:none;white-space:pre-wrap}
.chapter-test .scene-headline.is-typing .typed-letter{visibility:hidden}
.chapter-test .scene-headline.is-typing .typed-letter.is-typed{visibility:visible}
.chapter-test .scene-headline .scene-accent{--gloss-base:#a5ad94;--gloss-light:#edf2df;color:var(--gloss-base)}
.chapter-test .contact .scene-headline .scene-accent{--gloss-base:#1c2119;--gloss-light:#657044}
@media(prefers-reduced-motion:no-preference){
 .chapter-test .scene-headline .scene-accent.chapter-shine{color:transparent;background:linear-gradient(105deg,var(--gloss-base) 0%,var(--gloss-base) 40%,var(--gloss-light) 50%,var(--gloss-base) 60%,var(--gloss-base) 100%);background-size:300% 100%;background-clip:text;-webkit-background-clip:text;animation:software-gloss 1.8s .15s ease-in-out both}
}
@media(max-width:760px){html.chapter-test{--chapter-header:80px}}
@media(prefers-reduced-motion:reduce){html.chapter-test{scroll-snap-type:none}.chapter-test .scene-headline .typed-letter{visibility:visible}}

/* A single wheel animation replaces the browser's delayed second snap. */
html.chapter-test{scroll-snap-type:none}
.chapter-test .hero-copy h1 .scene-accent{--gloss-base:#ff8759;--gloss-light:#fff1dd;background:none;animation:none;color:#ff8759}
@media(prefers-reduced-motion:no-preference){
 .chapter-test .hero-copy h1 .scene-accent.chapter-shine{color:transparent;background:linear-gradient(105deg,var(--gloss-base) 0%,var(--gloss-base) 40%,var(--gloss-light) 50%,var(--gloss-base) 60%,var(--gloss-base) 100%);background-size:300% 100%;background-clip:text;-webkit-background-clip:text;animation:software-gloss 1.8s .15s ease-in-out both}
}
@media(pointer:coarse) and (prefers-reduced-motion:no-preference){html.chapter-test:not(.snap-in-flight){scroll-snap-type:y proximity}}

/* Reserve headline space before arrival without showing the complete text first. */
@media(prefers-reduced-motion:no-preference){
 .headlines-pending .hero-copy h1,.headlines-pending #leistungen h2,.headlines-pending #projekte h2,.headlines-pending #zusammenarbeit h2,.headlines-pending #kontakt h2{visibility:hidden}
 .chapter-test .scene-headline.is-waiting .typed-letter{visibility:hidden}
}
/* Runtime measurements determine the chapter space, rather than fixed viewport guesses. */
html.chapter-test{scroll-padding-top:var(--measured-header,var(--chapter-header))}
.chapter-test #leistungen,.chapter-test #projekte,.chapter-test #zusammenarbeit,.chapter-test #kontakt{min-height:var(--measured-page,calc(100svh - var(--chapter-header)));padding-block:var(--measured-padding,24px);justify-content:flex-start}
.chapter-test #leistungen>*,.chapter-test #projekte>*,.chapter-test #zusammenarbeit>*,.chapter-test #kontakt>*{flex-shrink:0}
.chapter-test .section-heading{margin-bottom:var(--measured-gap,28px)}
.chapter-test .section-heading h2{margin-block:var(--measured-heading-gap,18px)}
.chapter-test .project+.project{margin-top:var(--measured-gap,28px)}
.chapter-test .section-heading+.project{margin-top:0}
.chapter-test .hero{min-height:var(--measured-page);display:flex;flex-direction:column}
.chapter-test .hero-grid{min-height:0;flex:1;padding-block:var(--measured-padding,16px)}
.chapter-test .hero .summit{min-height:0}
.chapter-test .hero .hero-foot{margin-top:auto}

/* The questions belong to chapter 03, rather than an extra stop before 04. */
.chapter-test #zusammenarbeit>.chapter-faq{padding:0;margin-top:var(--measured-gap,24px);width:100%}
.chapter-test .chapter-faq>.eyebrow{margin-bottom:16px}
.chapter-test .chapter-faq details{padding-block:16px}

/* Touch devices use a continuous document, without desktop chapter framing. */
@media(max-width:900px),(pointer:coarse){
 html.chapter-test,html.chapter-test:not(.snap-in-flight){scroll-snap-type:none;scroll-behavior:auto}
 .chapter-test .hero,.chapter-test #leistungen,.chapter-test #projekte,.chapter-test #zusammenarbeit,.chapter-test #kontakt,.chapter-test .faq,.chapter-test footer{scroll-snap-align:none}
 .chapter-test #leistungen,.chapter-test #projekte,.chapter-test #zusammenarbeit,.chapter-test #kontakt{min-height:0;padding-block:48px;display:block}
 .chapter-test .hero{min-height:0;display:block}
 .chapter-test .hero-grid{padding-block:0;flex:none}
 .chapter-test .section-heading{margin-bottom:28px}
 .chapter-test .section-heading h2{margin-block:16px}
 .chapter-test .project+.project{margin-top:20px}
 .chapter-test .chapter-faq{margin-top:32px}
 .chapter-test .contact input,.chapter-test .contact select,.chapter-test .contact textarea{font-size:16px}
}
@media(max-width:900px){
 .header{height:72px}
 .header nav{display:none}
 .hero-grid{grid-template-columns:minmax(0,1fr);gap:0}
 .hero-copy h1{font-size:clamp(48px,10vw,72px);margin-top:28px;letter-spacing:-.055em}
 .hero-copy>p{font-size:15px}
 .hero-note{margin-top:26px;margin-bottom:0}
 .chapter-test .hero .summit{min-height:0;max-width:400px;padding:64px 0 24px;margin:24px auto 12px}
 .summit-orbits{top:0}
 .coordinate{top:0;font-size:7px}
 .satellite-code{top:12px;width:44px;height:44px}
 .satellite-layers{top:35px;width:42px;height:42px}
 .satellite-phone{bottom:56px;width:40px;height:54px}
 .preview-window{max-width:320px}
 .playground{margin-top:28px}
 .summit-tag{font-size:5px;bottom:0}
 .hero-foot{padding-block:18px}
 .services article,.services article+article,.services article:first-child,.services article:last-child{padding:20px}
 .services h3{font-size:24px;margin:16px 0 12px}
 .service-top svg{width:48px;height:40px}
 .services p{min-height:0;flex:none;margin-block:0 14px}
 .services .tags{min-height:0;margin-top:0}
 .services article>a{margin-top:20px;padding-top:16px}
 .project-info,.project-rog .project-info{padding:24px}
 .project h3{font-size:38px;margin-top:18px}
 .project-rog h3{font-size:28px}
 .route-visual{min-height:230px}
 .project-rog .rog-visual{height:220px}
 .project-rog .rog-laptop{max-height:220px}
 .about-grid{gap:30px}
 .contact-grid{gap:24px}
 .contact h2{margin-block:24px;font-size:clamp(56px,16vw,80px)}
 .contact form{padding-top:0}
}

@media(max-width:900px){.about-grid,.contact-grid,.project,.project-rog{grid-template-columns:minmax(0,1fr)}}

/* Keep the ticker inside the first chapter, directly above its closing line. */
.hero>.ticker{width:100%;max-width:none;margin:0;flex-shrink:0}

/* Readable closing statement and real chapter navigation. */
.hero-foot{gap:24px;align-items:center}
.hero-foot>span:first-child{font-size:clamp(11px,1vw,14px);font-weight:600;line-height:1.7;letter-spacing:.08em;color:#e4e7dc;max-width:70ch}
.chapter-next{display:inline-flex;align-items:center;justify-content:space-between;gap:18px;min-height:44px;font-size:11px;font-weight:600;letter-spacing:.08em;line-height:1.5;color:#d4dfbf;text-decoration:none;border-bottom:1px solid #a5ad9466;cursor:pointer}
.chapter-next:hover{color:#ffad89;border-color:currentColor}
.chapter-next:focus-visible{outline:2px solid currentColor;outline-offset:5px}
.hero-foot>.chapter-next{flex-shrink:0;margin-left:auto}
.section>.chapter-next{align-self:flex-end;margin-top:24px;margin-left:auto;width:fit-content;display:flex}
.chapter-navigation{width:100%;margin-top:24px;display:flex;justify-content:flex-end}
#kontakt .chapter-next{color:#171916;border-color:#17191680}
@media(max-width:760px){.hero-foot{flex-wrap:wrap;gap:8px}.hero-foot>span:first-child{font-size:11px}.hero-foot>.chapter-next{font-size:10px}}

/* A persistent way back, after leaving the beginning of the page. */
.back-to-top{position:fixed;right:max(24px,env(safe-area-inset-right));bottom:max(24px,env(safe-area-inset-bottom));z-index:30;display:grid;place-items:center;width:48px;height:48px;border:1px solid #ffb18f;border-radius:50%;background:#ff8759;color:#171916;box-shadow:0 6px 24px #0005;transition:background .2s,transform .2s}
.back-to-top[hidden]{display:none}
.back-to-top:hover{background:#ffad89;transform:translateY(-3px)}
.back-to-top:focus-visible{outline:2px solid #f1f1e9;outline-offset:4px}
@media(max-width:760px){.back-to-top{right:max(16px,env(safe-area-inset-right));bottom:max(16px,env(safe-area-inset-bottom))}}

/* Organic wireframe range shared with the MH cover and business stationery. */
.summit .mountain-terrain{width:120%;height:auto;left:-10%;top:0;opacity:.94;object-fit:contain;pointer-events:none}
.chapter-test .hero .summit{padding-top:175px}
@media(max-width:900px){.summit .mountain-terrain{width:112%;left:-6%;top:0}.chapter-test .hero .summit{padding-top:128px}}

/* Development above, hosting and everyday IT support as two clear companion services. */
@media(min-width:1101px){.services{grid-template-columns:repeat(6,minmax(0,1fr))}.services>article{grid-column:span 2}.services>article:nth-child(n+4){grid-column:span 3}}
@media(min-width:761px) and (max-width:1100px){.services{grid-template-columns:repeat(2,minmax(0,1fr))}.services>article:last-child{grid-column:1/-1}}
@media(max-width:760px){.services{grid-template-columns:minmax(0,1fr)}.services>article{grid-column:auto}}

.service-link{display:inline;transition:color .2s}.service-link span{display:inline-block;margin-left:10px;font-size:.7em;color:#ff8759;transition:transform .2s}.service-link:hover{color:#ff8759}.service-link:hover span{transform:translateX(4px)}.inline-link{color:inherit;text-decoration:underline;text-decoration-color:#ff875999;text-underline-offset:3px;transition:color .2s}.inline-link:hover{color:#ff8759}
.services article>.service-actions{display:flex;justify-content:space-between;gap:16px;border-top:1px solid #45483d;margin-top:28px;padding-top:18px;font-size:12px}.service-actions a{display:inline-flex;gap:8px;align-items:center}.service-actions .service-page{color:#ff8759;font-weight:600}.service-actions .service-page:hover span{transform:translateX(3px)}.service-actions span{color:#ff8759;transition:transform .2s}.service-actions a:hover{color:#ff8759}#fragen .faq{padding-bottom:0}#fragen .faq details:first-child{border-top:1px solid #45483d}
.service-link:after{content:"";position:absolute;inset:0;z-index:1;border-radius:inherit}.services article:has(.service-link){cursor:pointer}.services article:has(.service-link:hover) h3{color:#ff8759}.service-actions{position:relative;z-index:2}
.topbar{border-bottom:1px solid #2c2f28;background:#121411;font-size:12px;color:#a2ad94}.topbar-in{max-width:1520px;margin:auto;padding:0 64px;height:38px;display:flex;align-items:center;justify-content:space-between;gap:20px}.topbar nav{display:flex;align-items:stretch;height:100%}.topbar nav a{display:flex;align-items:center;padding:0 16px;color:#c9cdbf;border-left:1px solid #2c2f28;transition:color .2s,background .2s}.topbar nav a:hover{color:#ff8759;background:#1a1d17}.topbar nav a.active{color:#f1f1e9;box-shadow:inset 0 -2px 0 #ff8759}.topbar nav .topbar-tel{color:#f1f1e9;font-weight:600}
@media(max-width:1100px){.topbar-in{padding:0 35px}}@media(max-width:760px){.topbar-in{padding:0 0 0 23px;height:36px}.topbar-loc{display:none}.topbar nav{width:100%}.topbar nav a{flex:1;justify-content:center;padding:0 8px;font-size:11px;text-align:center}.topbar nav a:first-child{border-left:0}.topbar nav .topbar-tel{display:none}}