/* Wohnwagen Sill · Design System 2.0 / Markenabgleich Oktober 2026
   Präzision statt Dekoration. Authentische Aussagen, symbolische Bildmotive.
   Ein aufgeräumtes responsives Stylesheet ohne historische Overrides.
*/
:root{
  color-scheme:light;
  --ink:#142d24;
  --forest:#142d24;
  --forest-2:#234537;
  --sand:#c89c60;
  --sand-bright:#ddbb8c;
  --cream:#f5f1e7;
  --paper:#fcfaf5;
  --surface:#efeee7;
  --line:#dcded5;
  --muted:#59665e;
  --mint:#b4c4b5;
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  --mono:var(--font);
  --container:1360px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:92px}
body{margin:0;background:var(--cream);color:var(--ink);font:400 15px/1.7 var(--font);-webkit-font-smoothing:antialiased}
[hidden]{display:none!important}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
input,select,textarea{max-width:100%}
img,svg{display:block;max-width:100%}
h1,h2,h3,p{margin:0}
h1,h2,h3{line-height:1.13;letter-spacing:-.045em}
p{line-height:1.72}
.shell{width:min(var(--container),calc(100% - 88px));margin-inline:auto}
.skip-link{position:fixed;left:16px;top:-100px;z-index:999;background:#fff;color:var(--forest);padding:10px 16px;border:2px solid var(--sand)}
.skip-link:focus{top:14px}
:focus-visible{outline:3px solid var(--sand);outline-offset:4px}
::selection{background:#dfc7a4;color:#1d3127}
button,select,input,textarea{accent-color:var(--forest)}

/* Site identity */
.site-header{position:sticky;top:0;z-index:90;background:rgba(249,248,244,.97);backdrop-filter:blur(15px);border-bottom:1px solid #e7e6de}
.nav-row{min-height:84px;display:flex;align-items:center;justify-content:space-between;gap:28px}
.brand{display:block;flex:0 0 auto;min-width:0}
.brand-logo{width:275px;height:auto;max-width:100%}
.desktop-nav{display:flex;gap:clamp(14px,2.2vw,32px);align-items:center}
.desktop-nav a{font-size:12px;font-weight:540;white-space:nowrap;color:#4e5b51;position:relative;line-height:2.4;transition:color .2s}
.desktop-nav a::after{content:"";position:absolute;bottom:0;left:0;right:100%;height:1px;background:var(--sand);transition:right .2s}
.desktop-nav a:hover,.desktop-nav a[aria-current=page]{color:#172e23}
.desktop-nav a:hover::after,.desktop-nav a[aria-current=page]::after{right:0}
.btn{border:1px solid transparent;display:inline-flex;align-items:center;justify-content:center;gap:22px;padding:0 24px;min-height:48px;border-radius:999px;white-space:nowrap;line-height:1.2;font-size:12px;font-weight:670;transition:background .18s,color .18s,border-color .18s,transform .18s}
.btn span:last-child{font-size:17px;font-weight:450}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn-dark{background:var(--forest);color:#fffefa}
.btn-dark:hover{background:#29503f}
.btn-accent,.btn-submit{background:var(--sand);color:#1c3125}
.btn-accent:hover,.btn-submit:hover{background:var(--sand-bright)}
.nav-cta{padding-inline:25px;min-height:46px}
.mobile-toggle{display:none;flex-direction:column;align-items:center;justify-content:center;gap:5px;flex:0 0 46px;height:46px;border-radius:6px;border:1px solid #d5d7cd;background:transparent}
.mobile-toggle span{width:20px;height:1.5px;background:var(--forest)}
.mobile-menu{display:none}
.mobile-menu:not([hidden]){display:block;border-top:1px solid var(--line);padding:9px 24px 18px;background:#f9f8f4;box-shadow:0 15px 24px #1b2e2614}
.mobile-menu a{display:block;padding:12px 10px;border-bottom:1px solid var(--line);font-size:13px;font-weight:580}

/* Editorial visual language */
.kicker,.section-top-aside,.eyebrow,.editorial-kicker,.form-kicker,.hero-tech-index,.footer-contact>span,.about-intro .kicker{
  font-family:var(--mono);font-weight:500;letter-spacing:.11em;
}
.kicker{color:#755b37;font-size:11px}
.section{padding:clamp(82px,9vw,130px) 0}
.section-top{display:flex;align-items:center;gap:18px;margin-bottom:39px}
.section-top .rule{display:block;flex:1;height:1px;background:#d9dcd2}
.section-top-aside{color:#586959;font-size:11px}
.section-heading{display:flex;align-items:end;justify-content:space-between;gap:42px;margin-bottom:49px}
.section-heading h2{font-size:clamp(41px,4.45vw,65px);font-weight:560}
.section-heading p{max-width:310px;font-size:13px;color:var(--muted)}
h2 em{font-style:normal;color:#aa8555}
.text-link{display:inline-flex;align-items:center;gap:15px;padding-bottom:5px;border-bottom:1px solid #a5a99c;font-size:12px;font-weight:650;transition:color .2s}
.text-link:hover{color:#99734a}
.text-link span{font-size:17px;font-weight:400}

/* Hero: big image, clean technical grid/crosshair, clear readable copy */
.hero-landscape{position:relative;isolation:isolate;min-height:630px;overflow:hidden;background:#172e23;color:#f7f8f2}
.hero-landscape-visual{position:absolute;inset:0;z-index:-2;background-image:url("assets/hero-ausflug-sonnenuntergang.avif");background-repeat:no-repeat;background-size:cover;background-position:54% 68%}
.hero-landscape::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(10,26,18,.93) 0%,rgba(10,27,19,.83) 24%,rgba(13,29,20,.56) 42%,rgba(12,24,18,.09) 76%,rgba(12,24,18,.06) 100%)}
.hero-landscape::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.17;background:linear-gradient(90deg,transparent calc(50% - .5px),#e9e6da 50%,transparent calc(50% + .5px)),linear-gradient(0deg,transparent calc(50% - .5px),#e9e6da 50%,transparent calc(50% + .5px));background-size:100% 100%}
.hero-inner{display:flex;align-items:center;min-height:630px;position:relative;z-index:1}
.hero-copy{padding:74px 0 78px;max-width:510px}
.hero-landscape .eyebrow{color:#f0e9dc;font-size:11px}
.hero-accent{display:block;width:54px;height:2px;margin:18px 0 28px;background:var(--sand)}
.hero-landscape h1{font-size:clamp(49px,4.8vw,75px);font-weight:510;letter-spacing:-.044em;line-height:1.065;max-width:620px;color:#fffefa}
.hero-landscape .hero-lead{max-width:450px;font-size:15px;line-height:1.73;color:#ebebe2;margin:27px 0 30px}
.hero-landscape .hero-actions{display:flex;align-items:center;gap:13px;flex-wrap:wrap}
.hero-landscape .hero-actions .btn{min-height:49px;padding:0 25px}
.btn-hero-outline{border-color:rgba(247,247,239,.76);color:#fff;backdrop-filter:blur(4px);background:#ffffff04}
.btn-hero-outline:hover{border-color:white;background:#ffffff19}
.hero-tech-index{position:absolute;right:0;bottom:24px;font-size:9px;color:#eee7d1}

/* Four compact service markers */
.service-ribbon{background:#f9f8f4;border-bottom:1px solid #dfe2d8}
.ribbon-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.ribbon-item{position:relative;display:flex;align-items:center;min-height:127px;gap:16px;padding:22px 22px 22px 8px;transition:background .2s}
.ribbon-item+ .ribbon-item{border-left:1px solid #e0e2db;padding-left:22px}
.ribbon-item::before{content:"";position:absolute;left:0;right:100%;top:0;height:2px;background:#a88758;transition:right .2s}
.ribbon-item:hover,.ribbon-item:focus-visible{background:#f0efe9}
.ribbon-item:hover::before,.ribbon-item:focus-visible::before{right:0}
.ribbon-icon{width:49px;flex:0 0 49px;color:#967648}
.ribbon-icon svg{width:43px;height:43px}
.ribbon-item strong{display:block;color:#293c30;font-size:13px;font-weight:620;line-height:1.35}
.ribbon-item small{display:block;max-width:210px;margin-top:5px;color:#526552;font-size:11px;line-height:1.55}

/* Four-panel photographic editorial / genuine symbolic imagery only */
.editorial-strip{display:grid;grid-template-columns:28% 29% 22% 21%;min-height:380px;background:var(--forest)}
.editorial-photo{min-height:380px;overflow:hidden;position:relative;background:#354c38}
.editorial-photo::after{content:"";position:absolute;inset:0;border:1px solid rgba(255,255,255,.08);pointer-events:none}
.editorial-photo-work{background:url("assets/detail-handwerk.avif") center / cover no-repeat}
.editorial-photo-nature{background:url("assets/detail-natur.avif") center / cover no-repeat}
.editorial-photo-tools{background:url("assets/detail-werkzeug.avif") center / cover no-repeat}
.editorial-content{min-width:0;background:#203b2c;color:#f7f6ee;padding:clamp(26px,3vw,45px);display:flex;flex-direction:column;align-items:flex-start}
.editorial-kicker{font-size:10px;color:#d5cfc2}
.editorial-rule{display:block;width:54px;height:1px;background:var(--sand);margin:14px 0 18px}
.editorial-content h2{font-size:clamp(28px,2.4vw,39px);font-weight:480;color:#f9f9f4;line-height:1.16;letter-spacing:-.035em}
.editorial-content p{margin:15px 0 24px;font-size:12px;line-height:1.7;color:#d0d9ce;max-width:350px}
.editorial-content .btn{min-height:42px;margin-top:auto;padding:0 21px;font-size:11px}
.symbol-image-note{font-size:11px;color:#556958;text-align:center;line-height:1.5;padding:9px 18px;margin:0;background:#f4f3ee}

/* Four core service details plus a separate gas-inquiry feature */
.services-section{background:var(--paper)}
.service-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:55px 8%}
.service-card{display:flex;flex-direction:column;min-height:228px;padding:26px 0 0;border-top:1px solid #cfd6cd}
.service-card h3{font-size:clamp(25px,2.1vw,31px);font-weight:570;margin-bottom:11px}
.service-card p{max-width:450px;font-size:13px;line-height:1.77;color:var(--muted)}
.service-link{display:inline-flex;align-items:center;align-self:flex-start;gap:20px;margin-top:auto;padding-top:18px;font-size:12px;font-weight:650;color:#254436}
.service-link span{font-size:19px;font-weight:400;transition:transform .2s}
.service-link:hover span{transform:translate(2px,-2px)}
.service-note{font-size:12px;color:#546757;margin-top:33px;max-width:760px}
/* Gas inquiries: editorial feature without unverified certification claims. */
.gas-feature{
 display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
 gap:clamp(25px,5vw,75px);margin-top:clamp(42px,6vw,75px);
 padding:clamp(25px,4.5vw,52px);background:#e9ede7;
 border-top:2px solid #b4976b;border-radius:0 0 9px 9px;
}
.gas-feature-index{display:block;font:11px/1.6 var(--mono);letter-spacing:.12em;color:#795b36;margin-bottom:28px}
.gas-feature-heading h3{font-size:clamp(29px,3.3vw,45px);font-weight:550;line-height:1.13;letter-spacing:-.04em;max-width:440px}
.gas-feature-heading h3 em{font-style:normal;color:#56715d}
.gas-feature-subtitle{color:#4f6a54;font-size:13px;margin-top:19px;max-width:320px;line-height:1.65}
.gas-feature-details{padding-top:32px;display:flex;flex-direction:column;align-items:flex-start;gap:17px}
.gas-feature-details>p{max-width:520px;font-size:13px;line-height:1.8;color:#405748}
.gas-feature-details>.gas-feature-caution{font-size:12px;line-height:1.7;color:#536957}
.gas-feature .service-link{margin-top:auto;padding-top:11px}
@media(max-width:780px){.gas-feature{grid-template-columns:1fr;gap:22px}.gas-feature-index{margin-bottom:20px}.gas-feature-details{padding-top:0}}
@media(max-width:400px){.gas-feature{padding:24px 19px}.gas-feature-heading h3{font-size:clamp(27px,8vw,37px)}}


/* About Story: sticky typographic statement + sequentially revealed values */
.about-section{background:#f0efe9}
.about-grid.about-story{
 display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1fr);
 gap:clamp(54px,9vw,148px);
 align-items:stretch;
}
.about-sticky{
 position:sticky;top:118px;align-self:start;
 max-width:590px;padding-bottom:20px;
}
.about-intro{
 display:flex;justify-content:space-between;align-items:center;gap:18px;
 padding-top:15px;border-top:1px solid #bec8be;margin-bottom:41px;
}
.about-intro .kicker{margin:0;white-space:nowrap}
.about-intro p{max-width:245px;text-align:right;font:10px/1.55 var(--mono);letter-spacing:.06em;color:#748274}
.about-sticky h2{font-size:clamp(43px,4.4vw,66px);font-weight:540;margin:0 0 28px}
.about-sticky .about-lead{font-size:16px;color:#526458;max-width:510px;line-height:1.86;margin-bottom:30px}
.about-sticky .text-link{margin-top:1px}
.values-eyebrow,.values-footer{
 font:10px/1.6 var(--mono);color:#859080;letter-spacing:.1em;
}
.values-eyebrow{padding:15px 0 14px;border-top:1px solid #bec8be;margin:0}
.values-eyebrow span,.values-footer span{color:#a1845d;padding:0 6px}
.value-row{
 position:relative;display:grid;grid-template-columns:minmax(0,1fr);
 align-items:start;gap:0;min-height:222px;padding:35px 0 45px;
 border-top:1px solid #ccd3c7;
}
.value-row::before{
 content:"";position:absolute;top:-1px;left:0;width:100%;height:2px;
 background:#b08c5e;transform:scaleX(0);transform-origin:left;
 transition:transform .9s cubic-bezier(.19,1,.22,1);
}
.value-row.is-visible::before{transform:scaleX(1)}
.value-content h3{font-size:clamp(34px,3.35vw,50px);line-height:1.1;font-weight:530;color:#253e2e;letter-spacing:-.046em}
.value-content h3 span{color:#af8d61}
.value-content p{max-width:410px;font-size:14px;line-height:1.78;color:#647266;margin-top:16px}
.values-footer{padding-top:22px;border-top:1px solid #ccd3c7;margin:0}
@media(max-width:980px){
 .about-grid.about-story{gap:44px;grid-template-columns:minmax(0,.89fr) minmax(0,1fr)}
 .about-sticky{top:105px}
 .about-intro{display:block}
 .about-intro p{text-align:left;margin-top:12px}
 .value-row{grid-template-columns:minmax(0,1fr);gap:0;min-height:207px}
}
@media(max-width:780px){
 .about-grid.about-story{grid-template-columns:1fr;gap:38px}
 .about-sticky{position:static;padding-bottom:0;max-width:640px}
 .about-sticky h2{font-size:clamp(43px,7vw,59px)}
 .about-intro{margin-bottom:28px}
 .about-values{max-width:700px}
 .value-row{min-height:0;padding:31px 0 34px}
}
@media(max-width:650px){
 .about-grid.about-story{gap:38px}
 .about-intro{border-top:none;padding:0;margin-bottom:22px}
 .about-intro p{display:none}
 .about-sticky h2{font-size:clamp(40px,9vw,54px)}
 .about-sticky .about-lead{font-size:15px}
 .values-eyebrow{font-size:9px}
 .value-content h3{font-size:clamp(29px,8.4vw,43px)}
 .value-content p{font-size:13px;margin-top:11px}
 .value-row{grid-template-columns:minmax(0,1fr);gap:0;padding:28px 0 32px}
 .values-footer{font-size:9px}
}
@media(prefers-reduced-motion:reduce){
 .value-row::before{transform:scaleX(1)!important;transition:none!important}
}

/* Process timeline */
.process-section{background:#fbfaf7}
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(22px,4vw,55px)}
.steps article{padding-top:6px}
.step-line{height:1px;background:#d2d7cc;position:relative;margin:0 0 31px}
.step-line::after{content:"";position:absolute;right:0;top:-3px;width:7px;height:7px;background:#b49463;border-radius:100%}
.steps h3{font-size:22px;font-weight:560;margin-bottom:13px}
.steps p{font-size:13px;color:var(--muted);max-width:325px}

/* Request & preparation demo */
.contact-section{background:var(--forest);color:#f9f8f0}
.request-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1fr);gap:clamp(46px,8vw,115px);align-items:start}
.request-intro{padding-top:28px}
.light-kicker{color:#e0b981}
.request-intro h2{font-size:clamp(51px,5.5vw,79px);font-weight:530;margin:25px 0 21px;color:#f7f6ee}
.request-intro h2 em{font-style:normal;color:#d6b287}
.request-intro>p{max-width:435px;font-size:15px;color:#d4dfd3;line-height:1.82}
.request-benefits{margin:43px 0;display:grid;gap:18px}
.request-benefits div{display:flex;align-items:center;gap:14px;font-size:13px;color:#f2f3e9}
.request-benefits div::before{content:"✓";display:grid;place-items:center;width:26px;height:26px;border-radius:50%;border:1px solid #788f80;color:#e0bb8b;flex:0 0 26px;font-size:11px}
.request-aside{display:flex;gap:14px;align-items:flex-start;max-width:450px;padding:18px;border:1px solid #ffffff33;background:#ffffff08}
.request-aside-spark{width:25px;height:25px;display:grid;place-items:center;border:1px solid #c2a376;color:#d9b98e;border-radius:50%;flex:0 0 25px;font-family:Georgia,serif;font-style:italic}
.request-aside strong,.request-aside small{display:block}
.request-aside strong{font-size:13px;margin-bottom:5px}
.request-aside small{font-size:11px;color:#c0d0c2;line-height:1.7}
.contact-phone{display:flex;flex-direction:column;gap:9px;margin-top:42px;color:#d1ddd1;font-size:12px}
.contact-phone strong{font-size:27px;letter-spacing:-.035em;color:white;line-height:1.3}
.contact-phone strong span{font-weight:400;color:#e0bf92}
.request-card{background:#fffefa;color:var(--ink);padding:clamp(25px,3.2vw,45px);border-radius:7px;box-shadow:0 28px 55px #06160b2b}
.form-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:25px;padding-bottom:26px;border-bottom:1px solid #e2e5dc}
.form-kicker{font-size:10px;color:#a18154}
.form-head h3{font-size:29px;font-weight:590;margin-top:10px}
.field-label{display:block;font-size:12px;font-weight:640;margin:18px 0 8px;color:#3c4e40}
.field-label>span:not(.optional){color:#a57849}
.field-label .optional{color:#8d968b;font-weight:420}
select,input:not([type=radio]):not([type=checkbox]),textarea{
 width:100%;min-height:48px;padding:12px 13px;border:1px solid #d9dfd5;border-radius:5px;background:#fffefa;color:#283e32;font-size:13px;outline:none;
}
textarea{min-height:117px;resize:vertical;line-height:1.55}
select:focus,input:focus,textarea:focus{border-color:#a78a61;box-shadow:0 0 0 3px #c9a57430}
input::placeholder,textarea::placeholder{color:#969e95}
.form-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px}
.radio-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.radio-pill{position:relative;cursor:pointer}
.radio-pill input{position:absolute;width:1px;height:1px;opacity:0}
.radio-pill span{display:grid;place-items:center;min-height:44px;border:1px solid #d9ded3;border-radius:5px;color:#677369;font-size:11px;font-weight:600;padding:6px;text-align:center}
.radio-pill input:checked+span{background:#ece9df;border-color:#ad986f;color:#274032}
.radio-pill input:focus-visible+span{outline:3px solid var(--sand);outline-offset:3px}
.consent{display:flex;gap:12px;margin-top:23px;font-size:12px;color:#657064;line-height:1.6;cursor:pointer}
.consent input{margin-top:2px;flex:0 0 17px;width:17px;height:17px;accent-color:var(--forest)}
.consent strong{color:#a57849}
.form-notice{display:flex;align-items:flex-start;gap:12px;margin:21px 0 15px;padding:14px;background:#f1efe7;border:1px solid #e3ded0;color:#616b61}
.form-notice>span{font-size:17px;color:#987a52;line-height:1.2}
.form-notice p{font-size:12px;line-height:1.65}
.form-error{color:#a2352d;background:#fff0ed;font-size:12px;padding:11px;margin:10px 0}
.btn-submit{width:100%;border-radius:5px;min-height:50px;margin-top:8px}
.form-footnote{font-size:12px;color:#576b5d;margin-top:12px}
.request-result h3{font-size:29px;margin:14px 0}
.request-result p{font-size:13px;color:var(--muted);line-height:1.7}
.result-icon{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:#e5efdf;color:#2a633d}
.result-summary{white-space:pre-wrap;overflow-wrap:anywhere;max-height:360px;overflow:auto;background:#f0efe9;padding:18px;font-size:12px;line-height:1.7;margin:18px 0}
.btn-outline-secondary{background:#fff;border-color:#cdd7cd;margin-top:10px;width:100%;border-radius:5px}
.reset-link{display:block;background:none;border:0;color:#355540;margin:19px auto 0;padding:5px;border-bottom:1px solid #8a9d8c;font-size:12px}

/* Clear FAQ */
.faq-section{background:#fbfaf7}
.faq-grid{display:grid;grid-template-columns:minmax(0,.58fr) minmax(0,1fr);gap:clamp(40px,9vw,125px)}
.faq-intro .kicker{display:block;margin-bottom:25px}
.faq-intro h2{font-size:clamp(42px,4.5vw,65px);font-weight:550}
.faq-intro p{max-width:295px;font-size:13px;color:var(--muted);margin-top:19px}
.faq-list{border-top:1px solid #cbd5c9}
.faq-list details{border-bottom:1px solid #d6ddd3}
.faq-list summary{display:flex;justify-content:space-between;gap:22px;align-items:center;list-style:none;padding:24px 0;cursor:pointer;font-size:15px;font-weight:590;line-height:1.45}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary span{color:#ad8956;font-size:23px;font-weight:330;transition:transform .2s}
.faq-list details[open] summary span{transform:rotate(45deg)}
.faq-list details>p{font-size:13px;color:var(--muted);line-height:1.8;max-width:610px;padding-bottom:21px}

/* Footer */
.footer{background:#10291c;color:#f9f7ee;padding:61px 0 25px}
.footer-main{display:flex;align-items:flex-start;justify-content:space-between;gap:45px;padding-bottom:54px}
.footer-brand img{width:275px;height:auto}
.footer-brand p{color:#c5d1c2;font-size:12px;margin-top:15px}
.footer-contact{display:flex;flex-direction:column;gap:10px;text-align:right}
.footer-contact>span{font-size:10px;color:#d7af80}
.footer-contact a{font-size:23px;font-weight:580}
.footer-contact a:hover{color:#e0b981}
.footer-bottom{border-top:1px solid #34503e;padding-top:20px;display:flex;align-items:center;justify-content:space-between;gap:18px;font-size:11px;color:#b0bfb0}
.footer-bottom .preview-status{max-width:560px;text-align:center;line-height:1.6}
.footer-bottom .preview-status strong{font-weight:650;color:#efe2c7}
.footer-bottom a{color:#e2bc8a;white-space:nowrap}
.footer-bottom a:hover{text-decoration:underline}

/* Medium screens */
@media(max-width:1180px){
 .desktop-nav,.nav-cta{display:none}
 .mobile-toggle{display:flex}
 .shell{width:calc(100% - 64px)}
 .brand-logo{width:245px}
 .desktop-nav{gap:15px}
 .nav-row{gap:17px}
 .nav-cta{padding-inline:20px}
 .editorial-strip{grid-template-columns:27% 31% 21% 21%;min-height:340px}
 .editorial-photo{min-height:340px}
 .editorial-content{padding:29px}
 .ribbon-item{gap:12px;padding-right:12px}
 .ribbon-item+ .ribbon-item{padding-left:12px}
 .ribbon-icon{width:39px;flex-basis:39px}
 .ribbon-icon svg{width:35px;height:35px}
 .ribbon-item strong{font-size:12px}
 .ribbon-item small{font-size:11px}
}
@media(max-width:980px){
 .desktop-nav,.nav-cta{display:none}
 .mobile-toggle{display:flex}
 .nav-row{min-height:76px}
 .hero-inner,.hero-landscape{min-height:595px}
 .hero-landscape-visual{background-position:58% 63%}
 .hero-landscape::before{background:linear-gradient(90deg,#102519f0 0%,#102519bd 41%,#10251927 100%)}
 .ribbon-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .ribbon-item{min-height:109px;border-bottom:1px solid #e0e2db}
 .ribbon-item:nth-child(3){border-left:0}
 .editorial-strip{grid-template-columns:repeat(2,1fr)}
 .editorial-photo,.editorial-content{min-height:315px}
 .editorial-content{padding:37px}
 .editorial-photo-nature,.editorial-photo-tools{min-height:285px}
 .section-heading h2{font-size:clamp(41px,5.4vw,57px)}
 .request-grid{grid-template-columns:1fr;gap:40px}
 .request-intro{padding-top:0}
 .request-intro>p{max-width:630px}
 .request-benefits{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
 .request-card{max-width:720px;width:100%;margin-inline:auto}
 .about-grid{gap:50px}
 .faq-grid{gap:45px}
}
/* Mobile */
@media(max-width:650px){
 html{scroll-padding-top:80px}
 .shell{width:calc(100% - 36px)}
 .nav-row{min-height:73px}
 .brand-logo{width:211px}
 .mobile-menu:not([hidden]){padding:8px 18px 18px}
 .hero-inner,.hero-landscape{min-height:650px}
 .hero-landscape-visual{background-position:61% 56%}
 .hero-landscape::before{background:linear-gradient(90deg,rgba(12,29,20,.87) 0%,rgba(12,29,20,.72) 45%,rgba(12,29,20,.40) 100%),linear-gradient(0deg,rgba(12,29,20,.22),transparent 57%)}
 .hero-landscape::after{opacity:.10}
 .hero-copy{padding:64px 0;max-width:420px}
 .hero-landscape h1{font-size:clamp(42px,10.3vw,60px)}
 .hero-landscape .hero-lead{font-size:13px;line-height:1.75;margin:23px 0 26px}
 .hero-landscape .eyebrow{font-size:9px}
 .hero-landscape .hero-actions{gap:12px}
 .hero-landscape .hero-actions .btn{min-height:45px;padding:0 19px;font-size:11px}
 .hero-tech-index{font-size:8px}
 .ribbon-item{display:block;padding:21px 13px!important;min-height:153px}
 .ribbon-item:nth-child(odd){border-left:0}
 .ribbon-icon{display:block;width:33px;margin-bottom:10px}
 .ribbon-icon svg{width:31px;height:31px}
 .ribbon-item strong{font-size:12px}
 .ribbon-item small{font-size:11px}
  .editorial-strip{grid-template-columns:repeat(2,1fr);grid-template-areas:"copy copy" "work nature"}
 .editorial-content{grid-area:copy;min-height:0;padding:39px 24px}
 .editorial-photo-work{grid-area:work}
 .editorial-photo-nature{grid-area:nature}
 .editorial-photo-tools{display:none}
 .editorial-photo-work,.editorial-photo-nature{min-height:230px}
 .editorial-content h2{font-size:36px}
 .editorial-content .btn{margin-top:5px}
 .symbol-image-note{font-size:11px}
 .section{padding:76px 0}
 .section-top{margin-bottom:25px}
 .section-top-aside{display:none}
 .section-heading{display:block;margin-bottom:26px}
 .section-heading h2{font-size:clamp(37px,9vw,51px)}
 .section-heading p{max-width:540px;margin-top:15px}
 .service-grid{grid-template-columns:1fr;gap:0}
 .service-card{min-height:0;padding:22px 0 29px}
 .service-card h3{font-size:25px}
 .service-link{margin-top:0;padding-top:19px}
 .service-note{margin-top:25px}
 .about-grid,.faq-grid{grid-template-columns:1fr;gap:28px}
 .steps{grid-template-columns:1fr;gap:23px}
 .steps article{padding:0}
 .step-line{margin:0 0 19px}
 .steps p{max-width:520px}
 .request-intro h2{font-size:clamp(48px,10vw,67px)}
 .request-benefits{grid-template-columns:1fr;gap:14px;margin:30px 0}
 .contact-phone{margin-top:31px}
 .request-card{padding:25px 19px}
 .form-two{grid-template-columns:1fr;gap:0}
 .faq-intro .kicker{margin-bottom:17px}
 .faq-intro p{margin-top:13px}
 .faq-list summary{font-size:14px;padding:21px 0}
 .footer{padding:47px 0 22px}
 .footer-main{display:block;padding-bottom:35px}
 .footer-brand img{width:253px}
 .footer-contact{text-align:left;margin-top:29px}
 .footer-bottom{flex-wrap:wrap;justify-content:space-between}
 .footer-bottom .preview-status{order:3;max-width:none;width:100%;text-align:left}
}
@media(max-width:380px){
 .shell{width:calc(100% - 28px)}
 .brand-logo{width:192px}
 .hero-landscape h1{font-size:42px}
 .hero-landscape .hero-actions .btn{padding:0 14px;gap:9px}
 .radio-pill span{font-size:10px}
 .form-head h3{font-size:26px}
}
@media(prefers-reduced-motion:reduce){
 html{scroll-behavior:auto}
 *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}


/* Design 2.1 – Motion: behutsame Tiefe statt Daueranimation.
   Alle Inhalte sind ohne JavaScript uneingeschränkt sichtbar. */
.site-header{position:sticky}
.scroll-progress{
 position:absolute;inset:auto 0 0;z-index:3;height:2px;overflow:hidden;
 background:transparent;pointer-events:none;
}
.scroll-progress span{
 display:block;width:100%;height:100%;background:var(--sand);
 transform:scaleX(0);transform-origin:left center;
}
@media (prefers-reduced-motion:no-preference){
 .hero-landscape-visual{
   transform:translate3d(0,var(--parallax-y,0px),0) scale(1.075);
   transform-origin:center;
   will-change:transform;
 }
 .hero-landscape .eyebrow{
   animation:hero-enter .7s .06s both cubic-bezier(.2,.75,.25,1);
 }
 .hero-landscape h1{
   animation:hero-enter .85s .17s both cubic-bezier(.2,.75,.25,1);
 }
 .hero-landscape .hero-lead{
   animation:hero-enter .85s .29s both cubic-bezier(.2,.75,.25,1);
 }
 .hero-landscape .hero-actions{
   animation:hero-enter .85s .4s both cubic-bezier(.2,.75,.25,1);
 }
 @keyframes hero-enter{
   from{opacity:0;transform:translate3d(0,16px,0)}
   to{opacity:1;transform:translate3d(0,0,0)}
 }
 /* Content reveals only when IntersectionObserver has been initialized. */
 .motion-ready [data-reveal]{
   opacity:0;
   transform:translate3d(0,21px,0);
   transition:opacity .72s cubic-bezier(.19,1,.22,1),
              transform .72s cubic-bezier(.19,1,.22,1);
   transition-delay:calc(var(--reveal-step,0) * 65ms);
 }
 .motion-ready [data-reveal].is-visible{
   opacity:1;transform:translate3d(0,0,0);
 }
 /* Engineering-style fill travels along each step as the section enters view. */
 .step-line{overflow:visible}
 .step-line::before{
   content:"";position:absolute;left:0;top:0;height:2px;width:100%;
   background:var(--sand);transform-origin:left center;transform:scaleX(0);
   transition:transform .8s cubic-bezier(.2,.8,.2,1);
 }
 #ablauf.in-view .steps article:nth-child(1) .step-line::before{transform:scaleX(1);transition-delay:.12s}
 #ablauf.in-view .steps article:nth-child(2) .step-line::before{transform:scaleX(1);transition-delay:.29s}
 #ablauf.in-view .steps article:nth-child(3) .step-line::before{transform:scaleX(1);transition-delay:.46s}
 .service-card{position:relative}
 .service-card::before{
   content:"";position:absolute;left:0;top:-1px;width:100%;height:2px;
   background:var(--sand);transform:scaleX(0);transform-origin:left;
   transition:transform .48s cubic-bezier(.18,.8,.22,1);
 }
 .service-card:hover::before,.service-card:focus-within::before{transform:scaleX(1)}
 .service-link span{transition:transform .25s ease}
 .service-card:hover .service-link span,.service-card:focus-within .service-link span{transform:translate(3px,-2px)}
 /* Photographic panels zoom by just 2%, with no layout shift. */
 .editorial-photo{background-image:none}
 .editorial-photo::before{
   content:"";position:absolute;inset:-2%;background-position:center;
   background-size:cover;background-repeat:no-repeat;transform:scale(1);
   transition:transform 1.2s cubic-bezier(.19,1,.22,1);
 }
 .editorial-photo-work::before{background-image:url("assets/detail-handwerk.avif")}
 .editorial-photo-nature::before{background-image:url("assets/detail-natur.avif")}
 .editorial-photo-tools::before{background-image:url("assets/detail-werkzeug.avif")}
 .editorial-photo:hover::before{transform:scale(1.04)}
}
/* Mobile: stable imagery; no parallax or large hover-scale effects. */
@media(max-width:767px){
 .hero-landscape-visual{transform:none!important;will-change:auto}
 .editorial-photo:hover::before{transform:none}
}
/* Motion never hides content for people who request reduced movement. */
@media(prefers-reduced-motion:reduce){
 .scroll-progress{display:none}
 .motion-ready [data-reveal]{opacity:1!important;transform:none!important;transition:none!important}
 .hero-landscape .eyebrow,.hero-landscape h1,
 .hero-landscape .hero-lead,.hero-landscape .hero-actions{animation:none!important}
 .hero-landscape-visual{transform:none!important;will-change:auto!important}
 .step-line::before{transition:none!important;transform:none!important}
 .editorial-photo::before{display:none}
}
@media print{
 .scroll-progress{display:none}
 .motion-ready [data-reveal]{opacity:1!important;transform:none!important}
}


/* Design 2.3 – quiet scroll storytelling / functional wayfinding */
.story-progress{display:none;margin-top:44px;padding-top:23px;border-top:1px solid #cbd1c7;max-width:450px}
.motion-ready .story-progress{display:block}
.story-progress-head{display:flex;justify-content:space-between;gap:20px;margin-bottom:15px;font:10px/1.5 var(--mono);letter-spacing:.11em;color:#798476}
.story-progress-track{width:100%;height:2px;background:#cdd3c8;position:relative;overflow:hidden}
.story-progress-track span{display:block;width:100%;height:100%;background:#ab895c;transform:scaleX(.3333);transform-origin:left center;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.story-progress-name{display:block;margin-top:15px;font:10px/1.6 var(--mono);letter-spacing:.12em;color:#56705c}
.value-row .value-content h3{transition:color .45s ease}
.motion-ready .value-row.is-current .value-content h3{color:#193c29}
.value-row.is-current::before{transform:scaleX(1)}
.desktop-nav a[aria-current="location"]{color:var(--forest)}
.desktop-nav a[aria-current="location"]::after{right:0}
@media(max-width:780px){
 .motion-ready .story-progress{display:none}
 .value-row .value-content h3{color:#253e2e}
}
@media(prefers-reduced-motion:reduce){
 .story-progress{display:none!important}
 .story-progress-track span,.value-row .value-content h3{transition:none!important}
}




/* Design 2.6 · Real sunset, editorial cinematography.
   No added sun, glow, flare, rays or composited artificial lighting. */
.hero-landscape{--evening-fade:0}
.hero-landscape::after{opacity:.045}
.hero-landscape-visual{will-change:auto;transform:none}
.hero-landscape-visual::after{
 content:"";
 position:absolute;inset:0;pointer-events:none;
 background:linear-gradient(100deg,rgba(8,24,31,.06) 0%,rgba(12,24,35,.23) 48%,rgba(13,27,45,.65) 100%);
 opacity:var(--evening-fade);
 transition:opacity .13s linear;
}
.hero-tech-index{position:absolute;right:0;bottom:24px}
@media (prefers-reduced-motion:no-preference) and (min-width:768px){
 .hero-landscape-visual{
   transform:translate3d(0,var(--parallax-y,0px),0) scale(1.025);
 }
 .motion-ready .hero-landscape.is-sunset-visible .hero-landscape-visual{
   animation:premium-camera 26s cubic-bezier(.2,.48,.34,1) 1 both;
   will-change:transform;
 }
 @keyframes premium-camera{
   from{transform:translate3d(0,var(--parallax-y,0px),0) scale(1.025)}
   to{transform:translate3d(-.55%,var(--parallax-y,0px),0) scale(1.085)}
 }
}
@media(max-width:767px){
 .hero-landscape-visual{animation:none!important;transform:none!important;will-change:auto!important}
 .hero-landscape-visual::after{opacity:.07!important;transition:none}
}
@media(prefers-reduced-motion:reduce){
 .hero-landscape-visual{animation:none!important;transform:none!important;will-change:auto!important}
 .hero-landscape-visual::after{opacity:.07!important;transition:none!important}
}
@media print{.hero-landscape-visual{animation:none!important}}

/* Anfrageformular: ruhige Sicherheitsprüfung, nur nach Aktivierung angezeigt. */
.turnstile-area{margin:20px 0 14px;min-height:0}
.turnstile-area p{font-size:11px;color:var(--muted);margin-top:8px;line-height:1.55}
.consent a{text-decoration:underline;text-underline-offset:3px;color:var(--forest)}

/* Sarahs gewählte Marke: Tannengrün, Cremeweiß, Gold und Caravan-Sonne. */
.site-header{background:rgba(20,45,36,.98);border-bottom-color:#c89c6040;color:var(--cream)}
.brand-logo{width:300px}
.desktop-nav a{color:#e0e4da}
.desktop-nav a:hover,.desktop-nav a[aria-current=page],.desktop-nav a[aria-current="location"]{color:#e4bc83}
.nav-cta{background:var(--sand);color:var(--forest)}
.nav-cta:hover{background:var(--sand-bright)}
.mobile-toggle{border-color:#c89c6070}
.mobile-toggle span{background:var(--cream)}
.mobile-menu:not([hidden]){background:var(--forest);border-color:#c89c6040}
.mobile-menu a{border-color:#ffffff20;color:var(--cream)}
.btn{border-radius:4px;font-weight:600;letter-spacing:.02em}
.hero-landscape::after{display:none}
.hero-copy{max-width:620px;padding:60px 0 72px}
.hero-emblem{width:310px;height:auto;margin-bottom:22px}
.hero-landscape h1{font-size:clamp(34px,3.5vw,53px);font-weight:400;letter-spacing:.105em;line-height:1.15;white-space:nowrap}
.hero-landscape h1 span{color:var(--sand)}
.hero-descriptor{margin-top:13px;font-size:clamp(11px,1.2vw,16px);letter-spacing:.2em;color:var(--cream)}
.hero-accent{width:75px;height:1px;margin:26px 0 22px}
.hero-landscape .eyebrow{color:#e8d8bd;letter-spacing:.24em;font-size:12px}
.hero-landscape .hero-lead{max-width:480px;margin:25px 0 29px;font-size:14px}
.hero-tech-index{letter-spacing:.14em;color:#e8d8bd}
.editorial-content,.contact-section{background:var(--forest)}
.service-ribbon{background:var(--cream)}
.kicker{color:#76572f;letter-spacing:.16em}
.section-heading h2,.about-intro+h2{font-weight:450;letter-spacing:-.025em}
h2 em{color:#89673a}
.contact-section h2 em{color:var(--sand-bright)}
.section-top .rule,.service-card{border-color:#c89c6055}
.footer{background:var(--forest);border-top:1px solid #c89c6055}
.footer-brand img{width:340px;max-width:100%}
.footer-brand .footer-tagline{color:var(--sand-bright);letter-spacing:.2em;font-size:10px;margin-top:22px}
.footer-contact .footer-domain{color:var(--cream);font:400 14px/1.7 var(--font);letter-spacing:.04em}
@media(max-width:1180px){.brand-logo{width:275px}}
@media(max-width:650px){
 .brand-logo{width:250px}
 .hero-copy{max-width:100%;padding:46px 0 62px}
 .hero-emblem{width:245px;margin-bottom:22px}
 .hero-landscape h1{font-size:clamp(26px,6.4vw,39px);letter-spacing:.07em}
 .hero-descriptor{font-size:clamp(9px,2.5vw,13px);letter-spacing:.12em}
 .hero-landscape .eyebrow{font-size:10px;letter-spacing:.16em}
 .hero-landscape .hero-lead{font-size:13px}
 .hero-tech-index{font-size:7px;letter-spacing:.08em}
 .footer-brand img{width:295px}
}
@media(max-width:380px){.brand-logo{width:218px}.hero-emblem{width:225px}}