:root { --color-primary:#ed6b16; --color-black:#151515; --color-white:#fff; --color-gray-50:#f7f7f5; --color-gray-200:#e7e6e1; --color-gray-700:#51514e; --container-width:76rem; --space-xs:.5rem; --space-sm:1rem; --space-md:2rem; --space-lg:4rem; --space-xl:7rem; --radius:0; --font-primary:Montserrat,Arial,sans-serif; --transition:200ms ease; }
/* Erfolgs- und Fehlermeldungen der Grav-Formulare */
.form-wrapper .notices{margin:0 0 1.5rem;padding:1rem 1.15rem;border-left:4px solid transparent;font-weight:600}
.form-wrapper .notices.success,.form-wrapper .notices.green{background:#e9f6ec;border-left-color:#26733a;color:#174b26}
.form-wrapper .notices.error,.form-wrapper .notices.red{background:#fff0f0;border-left-color:#b42318;color:#7a1c16}
.container{width:min(100% - 2rem,var(--container-width));margin:auto}.hero{position:relative;min-height:min(48rem,calc(100svh - 5.5rem));display:grid;align-items:end;background:var(--color-gray-50);overflow:hidden}.hero__media{position:absolute;inset:0 0 0 34%;min-height:100%}.hero__content{position:relative;width:min(100% - 2rem,var(--container-width));margin:0 auto;padding:clamp(4rem,10vw,9rem) 0;align-self:center}.eyebrow{color:var(--color-primary);font-size:.76rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}.hero__claim{font-size:1.25rem;line-height:1.45}.button-row{display:flex;flex-wrap:wrap;gap:.75rem}.section{padding-block:var(--space-xl)}.section>h2{max-width:22ch}.card-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:1rem}.service-card{display:block;padding-bottom:1.25rem;text-decoration:none;border:1px solid var(--color-gray-200);transition:transform var(--transition),box-shadow var(--transition)}.service-card:hover{transform:translateY(-.3rem);box-shadow:0 1rem 2rem #00000012}.service-card .image-placeholder{aspect-ratio:1.2;display:block}.service-card h3,.service-card p,.service-card>span:not(.image-placeholder){margin-left:1rem;margin-right:1rem}.service-card h3{margin-top:1.3rem}.service-card p{font-size:.88rem;color:var(--color-gray-700);min-height:4.5rem}.service-card>span:last-child{font-size:.72rem;font-weight:800;text-transform:uppercase}.image-placeholder{background:linear-gradient(135deg,#deddd7,#faf9f7 45%,#c9c7c0);position:relative}.image-placeholder::after{content:'Originalbild folgt';position:absolute;inset:auto 1rem 1rem auto;padding:.35rem .5rem;background:#151515cc;color:#fff;font-size:.65rem;font-weight:700;text-transform:uppercase}.image-placeholder--large{min-height:20rem}.benefits{padding-block:var(--space-lg);background:var(--color-gray-50)}.benefit-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:1.5rem}.benefit-grid h3{font-size:.9rem;text-transform:uppercase}.benefit-grid p{font-size:.85rem;color:var(--color-gray-700)}.split{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:clamp(2rem,8vw,8rem)}.section--dark{background:var(--color-black);color:#fff}.section--dark .image-placeholder{background:linear-gradient(135deg,#4c4b49,#201f1e)}.cta-band{padding-block:var(--space-lg);background:var(--color-primary)}.cta-band>.container{display:flex;justify-content:space-between;align-items:center;gap:2rem}.cta-band .eyebrow{color:var(--color-black)}.cta-band h2{margin-bottom:0}.cta-band .button{background:var(--color-black);border-color:var(--color-black)}.cta-band .button--outline{background:transparent;color:var(--color-black)}@media(max-width:900px){.hero{min-height:42rem}.hero__media{inset:0;opacity:.25}.card-grid{grid-template-columns:repeat(2,1fr)}.benefit-grid{grid-template-columns:repeat(2,1fr)}.split{grid-template-columns:1fr}.cta-band>.container{align-items:flex-start;flex-direction:column}}@media(max-width:520px){.card-grid{grid-template-columns:1fr}.benefit-grid{grid-template-columns:1fr}.hero__content{padding-block:6rem}.site-header__inner{min-height:4.75rem}.main-navigation.is-open{top:4.75rem}}
.product-hero{padding-block:clamp(4rem,9vw,8rem);background:var(--color-gray-50);display:grid;grid-template-columns:1fr 1fr;align-items:stretch}.product-hero .container{padding-right:3rem}.product-hero__subtitle{font-size:1.25rem}.image-placeholder--product{min-height:22rem}.fact-box{padding:2rem;background:var(--color-black);color:#fff}.fact-box ul{padding-left:1.2rem}.fact-box li{margin-bottom:.7rem}.section--soft{background:var(--color-gray-50)}.variant-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}.variant-grid article{padding:1.5rem;background:#fff;border:1px solid var(--color-gray-200)}@media(max-width:900px){.product-hero{grid-template-columns:1fr}.product-hero .container{padding-right:0;padding-block:3rem}.variant-grid{grid-template-columns:1fr}}
.form-section{max-width:46rem;margin-top:0;padding:2rem;background:var(--color-gray-50)}.form-field{margin-bottom:1rem}.form-field label{display:block;margin-bottom:.35rem;font-weight:700}.form-field input,.form-field textarea,.form-field select{width:100%;padding:.8rem;border:1px solid #bbb;background:#fff;font:inherit}.form-field textarea{min-height:9rem}.form-field .button{border-radius:0}.form-notices{padding:1rem;background:#e9f6ec;border-left:4px solid #26733a}
.main-navigation{font-size:1.02rem;gap:1.25rem}.nav-toggle{font-size:1rem;font-weight:700}.site-header{background:#f7f7f7}@media(max-width:1100px){.main-navigation{font-size:.9rem;gap:.75rem}}@media(max-width:900px){.main-navigation.is-open{display:flex!important;z-index:30;box-shadow:0 .8rem 1.5rem #00000018}.main-navigation.is-open a{padding:.55rem 0;font-size:1.05rem}.nav-toggle{min-height:2.75rem;min-width:4.6rem}}
.benefit-icon{display:block;width:2.8rem;height:2.8rem;margin-bottom:1rem;stroke:var(--color-primary);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}@media(max-width:900px){.benefit-icon{width:2.5rem;height:2.5rem;margin-bottom:.75rem}}
.benefit-grid>div{text-align:center}.benefit-icon{margin-inline:auto}
.generated-panel--about{background-image:url('../images/generated/about-craft.png');background-size:cover;background-position:center}
.hero .eyebrow{font-size:.95rem}.button--outline{background:transparent;background:#ffffff9e}
.product-hero__image{min-height:28rem;background-color:#ddd;background-position:center;background-size:cover}.product-hero__image--lamellenstoren{background-image:url('../images/generated/product-lamellenstoren.png')}.product-hero__image--markisen{background-image:url('../images/generated/product-markisen.png')}.product-hero__image--rolllaeden{background-image:url('../images/generated/product-rolllaeden.png')}.product-hero__image--insektenschutz{background-image:url('../images/generated/product-insektenschutz.png')}@media(max-width:900px){.product-hero__image{min-height:20rem}}
#unsere-loesungen{scroll-margin-top:calc(6.5rem - 50px)}
.site-header{background:#f7f7f7}.main-navigation{font-size:1.1rem;font-weight:500;text-transform:uppercase}@media(max-width:1100px){.main-navigation{font-size:1rem}}@media(max-width:900px){.site-header{background:#f7f7f7}.main-navigation.is-open{background:#f7f7f7}.main-navigation.is-open a{font-size:1.1rem;font-weight:500}}@media(max-width:600px){.site-header{background:#f7f7f7}}
.site-header{background-color:#f7f7f7!important;background:#f7f7f7!important}.site-header .main-navigation{font-size:1.1rem!important;font-weight:500!important;text-transform:uppercase!important}
.hero__media--generated,.generated-panel{background-image:url('../images/generated/hero-pergola.png');background-position:center;background-size:cover}.service-card__image{display:block;aspect-ratio:1.2;background-image:url('../images/generated/services-contact-sheet.png');background-size:500% 100%;background-repeat:no-repeat}.service-card__image--1{background-position:0 50%}.service-card__image--2{background-position:25% 50%}.service-card__image--3{background-position:50% 50%}.service-card__image--4{background-position:75% 50%}.service-card__image--5{background-position:100% 50%}.generated-panel{min-height:23rem}.generated-panel--service{background-image:url('../images/generated/services-contact-sheet.png');background-size:500% 100%;background-position:100% 50%}.contact-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(20rem,1fr);gap:clamp(2rem,6vw,6rem);align-items:start;margin-top:2.5rem}.contact-layout__info h2{font-size:1.25rem;margin-top:2rem}.contact-layout__info ul{padding-left:1.2rem}.main-navigation{font-size:.92rem}@media(max-width:1100px){.main-navigation{gap:.75rem;font-size:.82rem}.main-navigation .button--small{font-size:.62rem}}@media(max-width:900px){.contact-layout{grid-template-columns:1fr;gap:2rem}.form-section{max-width:none}.hero__media--generated{opacity:.42;background-position:65% center}.main-navigation{font-size:1rem}.service-card__image{aspect-ratio:1.45}}@media(max-width:600px){.site-header{background:#fffffff2}.brand{width:8rem}.nav-toggle{font-size:.9rem}.contact-page{padding-top:3rem}.form-section{padding:1.25rem}.generated-panel{min-height:16rem}.hero__content{padding-block:5rem}.button-row .button{width:100%}}
*{box-sizing:border-box} html{scroll-behavior:smooth} body{margin:0;background:var(--color-white);color:var(--color-black);font:400 1rem/1.65 var(--font-primary)} img{max-width:100%;height:auto} a{color:inherit;text-underline-offset:.2em} h1,h2,h3,p{margin-top:0} h1,h2,h3{line-height:1.08;letter-spacing:-.035em} h1{font-size:clamp(2.45rem,6vw,5.6rem)} h2{font-size:clamp(1.8rem,3.4vw,3.2rem)} h3{font-size:1.15rem;letter-spacing:-.02em}.skip-link{position:absolute;left:-999px;z-index:50;background:var(--color-black);color:#fff;padding:.75rem}.skip-link:focus{left:1rem;top:1rem}.site-header{position:sticky;top:0;z-index:20;background:#fffffff2;border-bottom:1px solid var(--color-gray-200);backdrop-filter:blur(12px)}.site-header__inner,.site-footer__inner,.site-footer__legal,.page-shell{width:min(100% - 2rem,var(--container-width));margin:auto}.site-header__inner{min-height:5.5rem;display:flex;align-items:center;justify-content:space-between;gap:1rem}.brand{width:9rem}.brand img{width:100%;height:auto}.main-navigation{display:flex;align-items:center;gap:1.1rem;font-size:.78rem;font-weight:700;text-transform:uppercase}.main-navigation>a{text-decoration:none}.main-navigation>a:not(.button):hover{color:var(--color-primary)}.nav-toggle{display:none;background:none;border:1px solid var(--color-black);padding:.55rem .75rem;font:inherit}.button{display:inline-flex;justify-content:center;align-items:center;min-height:3.25rem;padding:.75rem 1.25rem;border:1px solid var(--color-primary);background:var(--color-primary);color:#fff;font-size:.78rem;font-weight:800;letter-spacing:.02em;text-decoration:none;text-transform:uppercase;transition:background var(--transition),color var(--transition)}.button:hover{background:#c9550c;border-color:#c9550c}.button--dark{background:var(--color-black);border-color:var(--color-black)}.button--dark:hover{background:#333}.button--outline{background:transparent;color:var(--color-black)}.button--small{min-height:2.7rem;padding:.5rem .75rem;font-size:.66rem}.page-shell{padding-block:var(--space-xl);min-height:55vh}.page-shell>h1{max-width:17ch}.page-shell>p{max-width:70ch;color:var(--color-gray-700)}.site-footer{background:var(--color-black);color:#fff;padding-top:var(--space-lg)}.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:var(--space-md);padding-bottom:var(--space-lg)}.footer-grid img{width:11rem;filter:brightness(0) invert(1)}.footer-grid h2{font-size:.9rem;letter-spacing:.06em;text-transform:uppercase}.footer-grid a{display:block;margin:.45rem 0}.site-footer__legal{border-top:1px solid #ffffff33;padding-block:1rem;color:#ccccca;font-size:.8rem}:focus-visible{outline:3px solid var(--color-primary);outline-offset:3px}@media(max-width:900px){.nav-toggle{display:block}.main-navigation{display:none}.main-navigation.is-open{position:absolute;top:5.5rem;left:0;right:0;display:flex;flex-direction:column;align-items:stretch;padding:1.5rem;background:#fff;border-bottom:1px solid var(--color-gray-200)}.main-navigation .button{width:100%}.footer-grid{grid-template-columns:1fr}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}