/* RAZLAF — Dachkante. Weißraum. Handwerk. */
:root{--accent:#01D300;--accent-deep:#00B800;--bg:#fff;--ink:#111111;--ink-soft:#505050;--paper:#fff;--bg-2:#F5F5F5;--line:#D9DED7;--sans:"Segoe UI",Arial,Helvetica,sans-serif;--wrap:1400px;--gut:clamp(22px,4vw,72px)}
body{font-family:var(--sans);font-size:17px;line-height:1.65}
h1,h2,h3{font-family:var(--sans);font-weight:750;letter-spacing:-.065em;text-wrap:balance}
h2{font-size:clamp(2.6rem,5vw,5.3rem);line-height:1.02}
h2 em{font-style:normal;color:var(--accent)}
h3{font-size:1.65rem;line-height:1.12;letter-spacing:-.04em}
.sec-sub,.lede{line-height:1.7}
.mono-lbl{font-size:10px;letter-spacing:.2em;color:#505050}
.mono-lbl i{color:var(--accent)}
.site-head,.site-head.stuck,.legal-page .site-head{background:rgba(255,255,255,.94);backdrop-filter:blur(20px);border-bottom:1px solid var(--line)}
.head-in{min-height:94px;gap:26px}
.brand img{width:210px}
.nav{gap:25px}
.nav a{font-size:.83rem;font-weight:650}
.nav .n-i{display:none}
.tel-cta{border-left:0;background:#F0FFE9;padding:11px 18px}
.tel-num{font-family:var(--sans);font-size:1rem}
.tel-lbl{font-size:8px;letter-spacing:.14em}
.btn{padding:20px 24px;gap:28px;font-size:.9rem;font-weight:700;letter-spacing:0;min-height:60px}
.btn b{font-size:23px;font-weight:400}
.btn-primary{box-shadow:0 8px 24px rgba(0,0,0,.10)}
.btn-ghost{font-family:var(--sans);font-weight:650;border-color:#CFD4CD}
:focus-visible{outline:3px solid #01D300;outline-offset:5px}
section[id]{scroll-margin-top:90px}

/* Der Einstieg baut sich um die Dachkante des Logos auf. */
.hero{padding:150px 0 0;min-height:850px;min-height:max(850px,100svh);background:#fff;isolation:isolate}
.hero::before{content:"";position:absolute;top:0;bottom:0;right:0;width:35%;background:#F2F5F0;z-index:-1}
.hero::after{display:none}
.hero-in-wrap{padding:42px 0 105px;justify-content:flex-start;min-height:570px}
.hero-copy{max-width:55%}
.eyebrow{font-family:var(--mono);font-size:9px;line-height:1.8;letter-spacing:.18em;margin-bottom:30px;color:#505050;align-items:flex-start}
.eyebrow span{margin-top:8px;width:22px}
.hero h1{font-size:clamp(5rem,8.9vw,9.7rem);line-height:.83;letter-spacing:-.085em;font-weight:800;position:relative;z-index:3;white-space:normal}
.hero h1 .hero-name{display:block;color:var(--accent);position:relative}
.hero h1 em{font-family:var(--sans);font-size:clamp(1.65rem,3vw,3.1rem);font-weight:600;letter-spacing:-.055em;font-style:normal;color:var(--ink);margin-top:24px;line-height:1.1;white-space:nowrap}
.hero h1 .w{transform:translateY(45px)}
.lede{max-width:40ch;font-size:1rem;margin-top:27px;color:#505050}
.cta-row{margin-top:29px;gap:12px}
.hero .hero-photo{inset:150px 4vw auto auto;width:43%;height:560px;margin:0;transform:perspective(1400px) rotateY(-5deg) rotateZ(1.5deg);border-radius:2px;overflow:visible;box-shadow:18px 30px 80px rgba(20,39,28,.15);z-index:1;transition:transform .5s ease;will-change:transform}
.hero-photo::before{content:"";position:absolute;inset:-17px 20px 16px -16px;background:var(--accent);clip-path:polygon(0 18%,22% 0,100% 0,100% 100%,0 100%);z-index:-1}
.hero .hero-photo::after{background:linear-gradient(0deg,rgba(6,25,13,.48),transparent 35%);inset:0;pointer-events:none}
.hero-photo img{object-position:55% 40%;border-radius:2px}
.photo-label{position:absolute;left:22px;right:22px;top:22px;z-index:2;display:flex;justify-content:space-between;gap:12px;font:9px/1.3 var(--mono);letter-spacing:.1em;color:#fff;text-shadow:0 1px 6px #000}
.hero-photo figcaption{right:14px;bottom:14px;z-index:2;background:rgba(255,255,255,.91);color:var(--ink);font-size:8px;max-width:90%;padding:6px 9px}
.hero-wordmark{position:absolute;left:3.5vw;bottom:81px;font-size:clamp(80px,15vw,240px);font-weight:850;line-height:.8;letter-spacing:-.09em;color:#EAF1EB;z-index:0;pointer-events:none;user-select:none}
.hero-meta{background:#fff;margin-top:auto;z-index:2}
.hm-in{grid-template-columns:1.15fr 1.15fr 1fr 1fr}
.hm-in>div{padding:22px 26px;gap:4px}
.hm-l{font-size:8px;letter-spacing:.16em}
.hm-v{font-family:var(--sans);font-size:.85rem;font-weight:600}
.marquee{background:var(--accent);border:0;transform:rotate(-1deg);margin:-1px -2vw 0;padding:17px 0;position:relative;z-index:4}
.mq-item{color:white;font-size:.7rem;letter-spacing:.12em}
.mq-item::after{background:#A9E2B9}

/* Leistungen: eigene, mit der Dachkante verbundene Kacheln. */
.sec{padding:clamp(85px,9vw,150px) 0}
#leistungen .sec-head{max-width:none;display:grid;grid-template-columns:1fr 1fr;gap:20px 70px;align-items:end;margin-bottom:52px}
#leistungen .mono-lbl{grid-column:1/-1;margin:0 0 12px}
#leistungen .sec-sub{margin:0;max-width:45ch;font-size:1rem}
.index{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border:0;gap:18px}
.ix{display:flex;flex-direction:column;gap:0;padding:30px 28px 28px;min-height:355px;border:1px solid var(--line);background:#F8FAF7;overflow:hidden;transition:transform .45s var(--ease),box-shadow .45s var(--ease),background .4s}
.ix::before{top:0;height:4px;background:var(--accent)}
.ix-n{font-size:10px;padding:0;color:#617667;position:absolute;right:25px;top:27px}
.service-icon{width:55px;height:59px;color:var(--accent);margin-bottom:30px;transition:transform .4s}
.ix h3{max-width:14ch;min-height:2.3em;margin-bottom:16px;font-size:1.55rem}
.ix p{font-size:.88rem;color:#505050;line-height:1.65;margin-bottom:27px}
.ix-a{position:relative;inset:auto;display:flex;align-items:center;justify-content:center;width:38px;height:38px;background:#E4F0E7;color:var(--accent);padding:0;margin-top:auto;align-self:flex-end;border-radius:50%;text-decoration:none;transition:background .3s,color .3s,transform .3s}
.ix:hover{padding-left:28px;transform:translateY(-7px);box-shadow:0 18px 40px rgba(18,50,29,.08);background:#fff}
.ix:hover .service-icon{transform:translateY(-3px)}
.ix:hover .ix-a{transform:rotate(45deg);background:var(--accent);color:#fff}
.sec-foot{font-size:.88rem;max-width:80ch;margin-top:32px}

/* Interaktives Materialstudio, komplett lokal. */
#material{background:#F2F5F0;overflow:hidden}
#material .sec-head{display:grid;grid-template-columns:1.2fr 1fr;gap:20px 70px;align-items:end;margin-bottom:48px}
#material .mono-lbl{grid-column:1/-1;margin:0 0 10px}
#material .sec-sub{margin:0;font-size:1rem;max-width:43ch}
.material-lab{display:grid;grid-template-columns:1.12fr 1fr;background:#fff;box-shadow:0 24px 60px rgba(20,45,28,.06)}
.material-display{position:relative;overflow:hidden;min-height:510px;background:#7C3923;isolation:isolate}
.material-surface{position:absolute;inset:-40px;transform:perspective(800px) rotateX(18deg) rotateZ(-12deg) scale(1.12);transition:background .45s,transform 1s var(--ease)}
.material-display:hover .material-surface{transform:perspective(800px) rotateX(10deg) rotateZ(-7deg) scale(1.2)}
.material-display::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.5),transparent 60%);z-index:0}
.material-code,.material-word{position:absolute;z-index:1;color:#fff;left:30px}
.material-code{top:28px;font:10px var(--mono);letter-spacing:.14em}
.material-word{bottom:30px;font-size:clamp(1.9rem,3vw,3.7rem);font-weight:750;letter-spacing:-.06em;line-height:.95;max-width:90%;overflow-wrap:anywhere}
[data-material="ziegel"]>.material-surface{background:repeating-linear-gradient(90deg,rgba(0,0,0,.22) 0 3px,transparent 3px 68px),repeating-linear-gradient(0deg,#9B462A 0 43px,#67301D 43px 47px,#BE6541 47px 52px)}
[data-material="schiefer"]>.material-surface{background:repeating-linear-gradient(40deg,rgba(255,255,255,.12) 0 1px,transparent 1px 63px),repeating-linear-gradient(-40deg,rgba(0,0,0,.4) 0 3px,transparent 3px 63px),linear-gradient(120deg,#53616A,#252F35)}
[data-material="zink"]>.material-surface{background:repeating-linear-gradient(90deg,#A5B0AF 0 88px,#677D7D 88px 93px,#CFD8D6 93px 98px)}
[data-material="kupfer"]>.material-surface{background:repeating-linear-gradient(90deg,transparent 0 110px,rgba(0,0,0,.3) 110px 114px),linear-gradient(135deg,#BC7D4E,#A36236 43%,#53957D)}
[data-material="beton"]>.material-surface{background:repeating-linear-gradient(90deg,rgba(0,0,0,.3) 0 3px,transparent 3px 80px),repeating-linear-gradient(0deg,#58605F 0 45px,#333E39 45px 49px,#727C76 49px 52px)}
.material-controls{padding:34px 38px;display:flex;flex-direction:column}
.material-controls .mono-lbl{margin-bottom:20px!important}
.material-buttons{display:grid;gap:0}
.material-buttons button{width:100%;display:flex;align-items:center;gap:15px;padding:15px 8px;background:none;border:0;border-bottom:1px solid var(--line);font:600 1.04rem var(--sans);color:var(--ink);cursor:pointer;text-align:left;transition:padding .3s,background .3s,color .3s}
.material-buttons button>span:last-child{margin-left:auto;font:9px var(--mono);opacity:.65}
.material-buttons button[aria-pressed="true"]{padding-left:15px;color:var(--accent);background:#F0F7F1}
.material-dot{display:block;width:22px;height:22px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.1)}
.dot-ziegel{background:#A65030}.dot-schiefer{background:#35434D}.dot-zink{background:#AAB9B8}.dot-kupfer{background:linear-gradient(135deg,#AB653D,#5B9C82)}.dot-beton{background:#5A645D}
.material-description{font-size:.91rem;color:#4D6154;line-height:1.6;margin-top:27px;min-height:5em}
.material-note{font-size:.68rem;color:#617667;line-height:1.5;margin-top:auto;padding-top:18px}

/* Der Ablauf als horizontale Abfolge. */
.ablauf-grid{display:block}
.ablauf-side{position:static;display:grid;grid-template-columns:1.2fr 1fr;gap:20px 70px;align-items:end;margin-bottom:55px}
.ablauf-side .mono-lbl{grid-column:1/-1;margin-bottom:10px}
.ablauf-side .sec-sub{margin:0;max-width:40ch;font-size:1rem}
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:26px;border:0}
.steps li{position:relative;display:flex;flex-direction:column;gap:24px;padding:25px 0 0;border:0;border-top:2px solid #D9DED7}
.steps li::before{content:"";position:absolute;left:0;top:-5px;width:8px;height:8px;border-radius:50%;background:var(--accent)}
.s-num{font-family:var(--sans);font-size:5rem;font-weight:750;letter-spacing:-.07em;color:#D7E6DA;line-height:1}
.steps h3{font-size:1.3rem;min-height:2.4em;margin-bottom:15px}
.steps p{font-size:.88rem;line-height:1.65;color:#505050}

/* Der Betrieb wird zur sichtbaren Marke. */
#betrieb{background:#F5F5F5}
.betrieb-grid{display:grid;grid-template-columns:1fr 1fr;gap:55px 70px;align-items:start}
.brand-panel{grid-column:2;grid-row:1/3;background:var(--accent);color:#fff;min-height:520px;padding:38px;display:flex;flex-direction:column;justify-content:space-between;clip-path:polygon(0 12%,16% 0,100% 0,100% 100%,0 100%);position:relative;isolation:isolate}
.brand-panel::after{content:"R";font-size:480px;font-weight:900;position:absolute;right:-45px;top:-20px;opacity:.06;line-height:1;z-index:-1}
.brand-panel>span{font-weight:750;font-size:clamp(2rem,3.3vw,3.9rem);line-height:1;letter-spacing:-.055em;padding-top:40px}
.brand-panel img{background:#fff;padding:20px;width:100%;max-width:350px;transform:rotate(-4deg);box-shadow:10px 12px 0 rgba(0,0,0,.1);margin:30px 0}
.brand-panel small{font:9px var(--mono);letter-spacing:.12em}
.betrieb-grid>div:last-child p{font-size:1rem;line-height:1.7;color:#505050}
.betrieb-grid>div:last-child p+p{margin-top:23px}
#gebiet{background:#fff;padding-top:100px}
#gebiet h2{font-size:clamp(2.6rem,6vw,6rem);max-width:15ch}
.places{display:flex;flex-wrap:wrap;gap:10px;max-width:1100px}
.places li{padding:12px 21px;border:1px solid var(--line);background:white;font-family:var(--sans);font-size:clamp(.94rem,1.5vw,1.2rem);font-weight:550;letter-spacing:-.03em;transition:background .3s,color .3s,transform .3s}
.places li:first-child{background:var(--accent);color:white;border-color:var(--accent)}
.places li:hover{background:#EBF5ED;transform:translateY(-3px);color:var(--accent)}
.places li::before{display:none}
.places-note{font-size:.88rem;max-width:65ch;color:#505050;margin-top:28px}

/* Kontakt als großer, grüner Schlusspunkt. */
#kontakt{background:var(--accent);color:white;position:relative;overflow:hidden}
#kontakt::before{content:"↗";position:absolute;right:-40px;top:-100px;font-size:500px;line-height:1;color:rgba(255,255,255,.045);pointer-events:none}
.kontakt-grid{grid-template-columns:1.05fr 1fr;gap:70px;align-items:start}
#kontakt .mono-lbl,#kontakt .mono-lbl i{color:#CCE9D4}
#kontakt .mono-lbl::after{background:rgba(255,255,255,.35)}
#kontakt h2{font-size:clamp(3.4rem,6.5vw,7rem);line-height:.98;color:white}
#kontakt h2 em{color:#A8DEB7;font-style:normal}
#kontakt .sec-sub{font-size:.95rem;color:#E2F0E5;max-width:42ch}
.contact-card{margin-top:30px}
#kontakt .cc-row{border-color:rgba(255,255,255,.22);padding:18px 0;display:grid;grid-template-columns:75px minmax(0,1fr);gap:18px}
#kontakt .cc-lbl{color:#C4E3CE;font-size:9px}
#kontakt .cc-val{font-family:var(--sans);color:white;font-size:clamp(1rem,1.5vw,1.4rem);font-weight:550;letter-spacing:-.035em;overflow-wrap:anywhere}
.contact-direct{background:#fff;border:0;padding:40px;color:var(--ink);box-shadow:14px 14px 0 rgba(0,0,0,.1);transform:rotate(1deg)}
#kontakt .contact-direct .mono-lbl{color:var(--accent)}
.contact-direct h3{font-family:var(--sans);font-size:clamp(1.7rem,2.6vw,2.6rem);font-weight:700;line-height:1.08;letter-spacing:-.055em}
.contact-direct p{font-size:.94rem;color:#505050}
.contact-direct .f-note{font-size:.72rem;line-height:1.55;color:#505050}
.contact-direct .btn-ghost{color:var(--accent);border-color:var(--line);width:100%;font-size:.9rem}
.contact-direct .btn-primary{width:100%}
.footer-signature{display:flex;align-items:center;justify-content:space-between;font-size:clamp(5rem,18vw,19rem);font-weight:800;line-height:.85;letter-spacing:-.09em;color:var(--accent);padding:8px 0 65px}
.footer-signature>span{font-size:.7em;font-weight:400;letter-spacing:0}
.site-foot{background:#F5F5F5;padding-top:75px}
.foot-brand img{width:210px}
.foot-bar{font-size:.75rem}

/* Juristische Unterseiten teilen Typografie und Navigation. */
.legal h1{font-size:clamp(3rem,6vw,5.5rem);line-height:1.05}
.legal h2{font-size:1.4rem;letter-spacing:-.03em}
.legal .legal-wrap{max-width:880px;overflow-wrap:anywhere}

@media(min-width:1600px){.hero .hero-photo{right:max(4vw,calc((100vw - 1400px)/2));max-width:660px}.hero-copy{max-width:720px}}
@media(max-width:1180px){
 .brand img{width:180px}.nav{gap:19px}.head-in{gap:22px}.tel-cta{padding:10px}
 .hero h1{font-size:clamp(5rem,10vw,8rem)}.hero-copy{max-width:53%}.hero .hero-photo{width:40%;height:520px;top:175px}
 .hero-in-wrap{min-height:590px}.cta-row{flex-direction:column;align-items:flex-start}.cta-row .btn{padding:17px 22px;min-height:54px}.hero{min-height:900px}
 .index{grid-template-columns:repeat(2,minmax(0,1fr))}.ix{min-height:330px}
 .kontakt-grid{gap:40px}.material-controls{padding:30px}.material-display{min-height:500px}.material-word{font-size:2.4rem}
}
@media(max-width:860px){
 .head-in{min-height:82px}.site-head.stuck .head-in{min-height:72px}.brand img{width:180px}.nav{background:rgba(255,255,255,.98)}.nav a{font-family:var(--sans);font-weight:650;color:var(--ink)}
 .hero{padding:120px 0 0;min-height:auto;display:flex}.hero::before{width:28%}.hero-copy{max-width:100%}.hero-in-wrap{min-height:auto;padding:24px 0 45px;order:1}
 .hero h1{font-size:clamp(5rem,15vw,8.5rem)}.hero h1 em{font-size:clamp(1.65rem,4vw,2.5rem);margin-top:20px}.eyebrow{margin-bottom:30px}.lede{max-width:48ch;font-size:.98rem}
 .cta-row{flex-direction:row;align-items:stretch}.hero .hero-photo{position:relative;inset:auto;width:calc(100% - var(--gut)*2 - 12px);height:360px;aspect-ratio:auto;margin:0 auto 40px;transform:rotate(1deg);order:2;will-change:auto;max-width:650px}
 .hero-photo::before{inset:-12px 16px 12px -11px}.hero-wordmark{display:none}.hero-meta{order:3;margin-top:0}.hm-in{grid-template-columns:1fr 1fr}.hm-in>div{padding:20px 18px}.hm-v{font-size:.8rem}
 .photo-label{font-size:8px;left:15px;right:15px;top:15px}.hero-photo figcaption{font-size:7px}
 #leistungen .sec-head,#material .sec-head,.ablauf-side{grid-template-columns:1fr;gap:22px}#leistungen .sec-sub,#material .sec-sub,.ablauf-side .sec-sub{max-width:58ch}
 .material-lab{grid-template-columns:1fr}.material-display{min-height:340px}.material-controls{padding:30px}.material-description{min-height:0}.material-word{font-size:3rem}
 .steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 30px}.steps h3{min-height:0}.s-num{font-size:4rem}
 .betrieb-grid{gap:36px;grid-template-columns:1fr 1fr}.brand-panel{min-height:450px;padding:25px}.brand-panel>span{font-size:2rem}.brand-panel small{font-size:7px}
 .kontakt-grid{grid-template-columns:1fr;gap:45px}.contact-direct{max-width:650px;transform:rotate(.6deg);padding:32px}.contact-card{max-width:650px}#kontakt h2{font-size:clamp(3.4rem,9vw,5rem)}
 .footer-signature{padding-bottom:45px}.foot-grid{gap:36px}.fab{font-size:.85rem;padding:13px 18px;box-shadow:0 6px 22px rgba(0,0,0,.16);border:1px solid rgba(255,255,255,.6)}
}
@media(max-width:540px){
 body{font-size:16px}h2{font-size:2.65rem;line-height:1.04}.sec{padding:75px 0}.hero h1{font-size:clamp(4.7rem,22vw,6.7rem);line-height:.85}.hero h1 em{font-size:1.7rem;letter-spacing:-.055em}
 .hero-in-wrap{padding-top:15px;padding-bottom:40px}.lede{font-size:.9rem;line-height:1.7;margin-top:25px}.cta-row{display:flex;flex-direction:column;gap:10px;margin-top:24px}.cta-row .btn{width:100%;justify-content:space-between}.cta-row .btn-ghost{justify-content:center}
 .hero .hero-photo{height:280px}.photo-label{font-size:7px}.hero-photo figcaption{bottom:10px;right:10px}.hm-in>div{padding:15px 16px}.hm-v{font-size:.72rem}.hm-l{font-size:7px}
 .marquee{padding:13px 0}.mq-item{font-size:.6rem;padding:0 18px}.index{grid-template-columns:1fr;gap:14px}.ix{min-height:0;padding:27px}.ix:hover{padding-left:27px}.ix h3{min-height:0;max-width:none;font-size:1.6rem}.ix p{margin-bottom:18px}.service-icon{margin-bottom:24px}
 .material-display{min-height:285px}.material-controls{padding:25px}.material-word{font-size:2.6rem;left:25px}.material-description{font-size:.87rem}.material-buttons button{padding:13px 4px;font-size:.96rem}
 .steps{grid-template-columns:1fr;gap:30px}.steps li{display:grid;grid-template-columns:65px minmax(0,1fr);gap:18px;padding-top:24px}.s-num{font-size:3.3rem}.steps h3{font-size:1.25rem;margin-bottom:12px}.steps p{font-size:.86rem}
 .betrieb-grid{display:flex;flex-direction:column;gap:30px}.brand-panel{width:100%;order:3;min-height:350px;padding:28px}.brand-panel>span{font-size:2.5rem}.brand-panel img{max-width:260px;margin:22px 0}.brand-panel small{font-size:8px}
 .betrieb-grid>div:last-child p{font-size:.93rem}#gebiet{padding-top:75px}#gebiet h2{font-size:3rem}.places{gap:8px}.places li{font-size:.88rem;padding:10px 14px}
 #kontakt h2{font-size:3.5rem}.contact-direct{padding:27px;box-shadow:8px 8px 0 rgba(0,0,0,.12);gap:22px}.contact-direct h3{font-size:2rem}.contact-direct p{font-size:.88rem}#kontakt .cc-row{gap:10px;grid-template-columns:57px minmax(0,1fr)}#kontakt .cc-val{font-size:1rem}
 .footer-signature{font-size:20vw;padding-bottom:35px}.site-foot{padding-top:48px}.foot-brand{grid-column:1/-1}.foot-grid{gap:30px 20px}.foot-bar{gap:20px}.foot-bar nav{gap:20px;flex-wrap:wrap}
}
@media(prefers-reduced-motion:reduce){
 *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
 .hero .hero-photo,.contact-direct,.brand-panel img{transform:none!important}.hero h1 .w,.hero-seq,.hero-copy,.reveal,.stagger>*{opacity:1!important;transform:none!important}.material-surface{transform:none!important}
}
@media print{.hero .hero-photo,.hero-wordmark,.footer-signature,.brand-panel,.service-icon,.marquee{display:none!important}.index,.steps,.material-lab,.kontakt-grid{display:block}.sec,#kontakt{background:white!important;color:black!important}.sec h2,#kontakt h2,#kontakt .cc-val{color:black!important}.ix{break-inside:avoid;box-shadow:none}.material-display{min-height:100px}}

.hero-in h1 .w{transform:none}


.hero-photo img{object-position:52% 44%}

/* Prägnanter Markenname, emotionaler Slogan und echtes Neubau-Steildach. */
.hero h1.slogan-new{font-size:clamp(4rem,7vw,7.6rem);letter-spacing:-.075em;line-height:.95}
.hero h1.slogan-new em{font-size:clamp(1.45rem,2.6vw,2.8rem);margin-top:18px;letter-spacing:-.05em;white-space:normal}
.hero .hero-photo{height:460px;top:175px}
.hero-photo img{object-position:53% 34%}
@media(min-width:861px) and (max-width:1180px){.hero .hero-photo{height:450px;top:190px}}
@media(max-width:860px){.hero h1.slogan-new{font-size:clamp(3.4rem,10.4vw,6.5rem)}.hero .hero-photo{height:360px;top:auto}.hero h1.slogan-new em{font-size:clamp(1.45rem,3.8vw,2.3rem)}}
@media(max-width:540px){.hero h1.slogan-new{font-size:clamp(2.8rem,14.8vw,4.8rem);line-height:1.02}.hero h1.slogan-new em{font-size:1.45rem;margin-top:16px}.hero .hero-photo{height:260px}.hero-photo img{object-position:53% 30%}}

.photo-label span{background:rgba(255,255,255,.92);color:var(--ink);padding:5px 7px;text-shadow:none}


.hero h1.slogan-roof{font-size:clamp(3rem,6.4vw,6.7rem);line-height:1;letter-spacing:-.07em}
.hero h1.slogan-roof em{font-size:clamp(1rem,1.8vw,1.7rem);margin-top:22px;letter-spacing:-.035em;white-space:normal}
@media(max-width:540px){.hero h1.slogan-roof{font-size:11.7vw}.hero h1.slogan-roof em{font-size:1rem}}


/* Firmenname und Detailaufnahme prägen den Einstieg. */
.hero h1.slogan-company{font-size:clamp(3rem,6.5vw,7rem);line-height:1;letter-spacing:-.07em}
.hero h1.slogan-company em{font-size:clamp(1rem,2vw,1.85rem);line-height:1.25;margin-top:22px;letter-spacing:-.035em;white-space:normal}
.hero .hero-photo{height:510px;top:165px}
.hero-photo img{object-position:50% 50%}
.hero .hero-photo::after{background:linear-gradient(0deg,rgba(6,25,13,.15),transparent 25%)}
@media(min-width:861px) and (max-width:1180px){.hero .hero-photo{height:480px;top:180px}}
@media(max-width:860px){.hero h1.slogan-company{font-size:clamp(3rem,9.6vw,6rem)}.hero .hero-photo{height:350px;top:auto}}
@media(max-width:540px){.hero h1.slogan-company{font-size:11.5vw}.hero h1.slogan-company em{font-size:1.05rem}.hero .hero-photo{height:285px}}

/* Enger fotografischer Ausschnitt: glänzende Eindeckung statt matter Oberfläche. */
.photo-window{position:absolute;inset:0;overflow:hidden;background:#111A17}
.hero-photo .photo-window img{width:100%;height:100%;object-fit:cover;object-position:36% 48%;transform:scale(2.65);transform-origin:37% 48%}
.hero .hero-photo::after{background:linear-gradient(0deg,rgba(0,0,0,.08),transparent 18%)}
@media(max-width:860px){.hero-photo .photo-window img{transform:scale(2.65);object-position:36% 48%;transform-origin:37% 48%}}

.hero-photo .photo-window img{transform:scale(3.4);transform-origin:35% 43%}


/* Detailausschnitt auf einzelne glänzende Ziegel. */
.hero-photo .photo-window img{position:absolute;inset:auto;left:50%;top:50%;width:1000%;max-width:none;height:auto;object-fit:initial;transform:translate(-40%,-46%);transform-origin:center}


/* Videovorschau: Das ganze Motiv bleibt innerhalb des Rahmens sichtbar. */
.hero .hero-photo{width:46%;height:auto;aspect-ratio:16/10;top:195px}
.hero-photo .photo-window{background:#111111;display:flex;align-items:center}
.roof-video{display:block;width:100%;height:100%;object-fit:contain}
.video-toggle{position:absolute;left:18px;bottom:45px;z-index:4;border:1px solid #fff;background:#fff;color:#111111;padding:10px 14px;font:600 12px var(--sans);cursor:pointer;box-shadow:0 3px 14px #0002}
.video-toggle:focus-visible{outline:3px solid #01d300;outline-offset:4px}
@media(max-width:860px){.hero .hero-photo{width:100%;height:auto;top:auto;aspect-ratio:16/10}}
@media(max-width:860px){.hero .hero-photo{width:calc(100% - var(--gut)*2 - 12px)}}

/* Das Drohnenvideo begleitet die gesamte Seite. */
.video-background-site{position:relative;isolation:isolate;background:#233b30}
.site-backdrop{position:fixed;inset:0;margin:0;width:100%;height:100vh;height:100dvh;z-index:-1;pointer-events:none;overflow:hidden}
.site-backdrop .photo-window{position:absolute;inset:0;background:#233b30}
.site-backdrop .roof-video{width:100%;height:100%;object-fit:cover;object-position:center}
.video-controls .video-toggle{position:fixed;left:22px;bottom:38px;z-index:20;pointer-events:auto;border:1px solid #cbd8ce;font-size:11px}
.video-controls .video-caption{position:fixed;left:22px;bottom:12px;background:#ffffffed;color:#111111;padding:3px 8px;font-size:9px;line-height:1.4;pointer-events:auto}
.video-background-site .grain{display:none}
.video-background-site .hero{background:transparent;isolation:auto;min-height:100svh}
.video-background-site .hero::before{display:none}
.video-background-site .hero-in-wrap{padding:45px 0 90px;min-height:650px}
.video-background-site .hero-copy{max-width:650px;width:58%;padding:32px;background:rgba(255,255,255,.9);border-left:4px solid var(--accent);box-shadow:0 16px 70px #112a1c15;backdrop-filter:blur(8px)}
.video-background-site .hero h1.slogan-company{font-size:clamp(3rem,5.8vw,6rem)}
.video-background-site .hero-meta{background:#ffffffed}
.video-background-site .sec{background:rgba(255,255,255,.87);backdrop-filter:blur(8px)}
.video-background-site #material,.video-background-site #betrieb{background:rgba(248,250,247,.92)}
.video-background-site #gebiet{background:rgba(255,255,255,.88)}
.video-background-site #kontakt{background:rgba(1,211,0,.93)}
.video-background-site .site-foot{background:rgba(249,250,248,.96);padding-bottom:90px}
@media(max-width:860px){
 .video-background-site .hero-in-wrap{padding:28px 0 100px;min-height:750px}
 .video-background-site .hero-copy{width:100%;max-width:650px;padding:25px 22px}
 .video-background-site .hero h1.slogan-company{font-size:clamp(3rem,9.6vw,6rem)}
 .site-backdrop .roof-video{object-position:55% center}
 .video-controls .video-toggle{left:12px;bottom:36px;padding:8px 10px}
 .video-controls .video-caption{left:12px;bottom:12px;font-size:8px;max-width:calc(100% - 24px)}
}
@media(max-width:540px){.video-background-site .hero h1.slogan-company{font-size:10.7vw}.video-background-site .hero-copy{padding:25px 18px}.video-background-site .hero-in-wrap{padding-bottom:90px}}
@media print{.site-backdrop{display:none}.video-background-site{background:white}.video-background-site .hero-copy{width:100%;background:white;box-shadow:none;border:0}}

.video-controls{position:fixed;left:0;bottom:0;z-index:65;pointer-events:none}
@media print{.video-controls{display:none}}

/* Originale KI-Dachvisualisierung mit ruhiger, unterbrechungsfreier Bewegung. */
.site-backdrop .roof-scene{display:block;width:100%;height:100%;object-fit:cover;object-position:55% center;transform:scale(1.055);transform-origin:55% 42%;animation:roof-camera-drift 36s ease-in-out infinite alternate;will-change:transform}
.site-backdrop .roof-scene.is-paused{animation-play-state:paused}
@keyframes roof-camera-drift{from{transform:translate3d(-.6%,.3%,0) scale(1.035)}to{transform:translate3d(.6%,-.3%,0) scale(1.085)}}
@media(prefers-reduced-motion:reduce){.site-backdrop .roof-scene{animation:none;transform:scale(1.035);will-change:auto}}

/* WhatsApp wird erst beim Anklicken geöffnet; keine externen Widgets. */
.btn-whatsapp{background:#01d300;color:#fff;border:1px solid #01d300;text-decoration:none}
.btn-whatsapp:hover{background:#00b800;color:#fff}
.whatsapp-fab{display:inline-flex;right:24px;bottom:24px;min-height:48px;background:#01d300;color:white;border:1px solid #ffffffb3;border-radius:6px;box-shadow:0 8px 30px #102f2440}
.whatsapp-fab:hover{background:#00b800;color:#fff}
.whatsapp-fab svg{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;width:22px;height:22px}
@media(max-width:540px){.whatsapp-fab{right:14px;bottom:92px;padding:12px 16px;font-size:.85rem;gap:8px}}
@media print{.whatsapp-fab{display:none!important}}

/* Logo-Farben und logo-nahe Arial-Typografie als gemeinsame Grundlage. */
:root{--brand-green:#01D300;--brand-black:#111;--accent:var(--brand-green);--accent-2:#01D300;--accent-deep:#00B800;--ink:var(--brand-black);--ink-soft:#505050;--ink-mute:#5D5D5D;--p-ink:#111;--p-soft:#505050;--p-mute:#5D5D5D;--line:#D9DED7;--line-2:#D9DED7;--p-line:#D9DED7;--p-line-2:#E6E8E4;--sans:Arial,Helvetica,sans-serif;--serif:Arial,Helvetica,sans-serif;--mono:Arial,Helvetica,sans-serif}
body,button,input,select,textarea{font-family:var(--sans)}
h1,h2,h3,h4,.hero h1,.hero h1.slogan-company{font-family:var(--sans);font-weight:700;letter-spacing:-.035em}
.hero h1.slogan-company em{font-family:var(--sans);font-weight:700;letter-spacing:-.025em}
.hero h1 .hero-name{color:#111;text-decoration:underline;text-decoration-color:var(--brand-green);text-decoration-thickness:.065em;text-underline-offset:.1em}
h2 em,#kontakt h2 em{color:inherit;text-decoration:underline;text-decoration-color:var(--brand-green);text-decoration-thickness:.045em;text-underline-offset:.12em}
#kontakt h2 em{text-decoration-color:#111}
.brand-panel>span,.material-word{font-weight:700;letter-spacing:-.025em}
.nav a,.tel-num,.btn,.hm-v,.places li{font-family:var(--sans);font-weight:700}
.eyebrow,.mono-lbl,.hm-l,.tel-lbl,.cc-lbl,.material-code,.ix-n,.step-n,.brand-panel small,.site-foot h4,.mq-item{font-family:var(--sans);font-weight:700;letter-spacing:.1em}
.btn-primary,.btn-whatsapp,.fab,.skip{background:var(--brand-green);border-color:var(--brand-green);color:#111}
.btn-primary::before,.sec-paper .btn-primary::before{background:#00B800}
.btn-primary:hover,.btn-whatsapp:hover,.whatsapp-fab:hover{color:#111;background:#00B800}
.btn-ghost{color:#111;border-color:#BEC5BA}
.btn-ghost:hover{color:#111;background:#F0FFE9;border-color:var(--brand-green)}
.brand-panel{background:var(--brand-green);color:#111}
.brand-panel::after{color:#111}
.marquee{background:var(--brand-green)}
.mq-item{color:#111}.mq-item::after{background:#111}
.mono-lbl i,.service-icon{color:#111}
.ix-a{background:var(--brand-green);color:#111}
.ix:hover .ix-a{background:#00B800;color:#111}
.material-buttons button[aria-pressed="true"]{color:#111;background:#F0FFE9;box-shadow:inset 4px 0 var(--brand-green)}
.places li:first-child{background:var(--brand-green);color:#111}
.places li:hover{color:#111;background:#F0FFE9}
#kontakt,.video-background-site #kontakt{background:rgba(1,211,0,.94);color:#111}
#kontakt h2,#kontakt .sec-sub,#kontakt .cc-val,#kontakt .mono-lbl,#kontakt .mono-lbl i,#kontakt .cc-lbl{color:#111}
#kontakt .cc-row{border-color:rgba(0,0,0,.22)}
#kontakt .mono-lbl::after{background:#1115}
#kontakt .contact-direct .mono-lbl{color:#444}
.contact-direct,.video-controls .video-toggle,.video-controls .video-caption{color:#111}
.site-foot a:hover,.legal a{color:#111;text-decoration-color:var(--brand-green);text-decoration-thickness:2px}
.video-background-site .hero-copy{border-left-color:var(--brand-green)}
.site-head{color:#111}
.nav a::after,.progress i{background:var(--brand-green)}
@media(max-width:540px){.video-background-site .hero h1.slogan-company{font-size:10.2vw;letter-spacing:-.045em}.hero h1.slogan-company em{font-size:1.05rem;line-height:1.35}.brand-panel>span{letter-spacing:-.025em}}

/* Das helle Logo-Grün betont die Konturen, Schwarz trägt den Text. */
#kontakt,.video-background-site #kontakt{background:rgba(255,255,255,.94);border-top:6px solid var(--brand-green)}
#kontakt h2 em{text-decoration-color:var(--brand-green)}
#kontakt .contact-direct{border:1px solid #D9DED7;border-top:3px solid var(--brand-green);background:#fff}
#kontakt .contact-direct .btn-ghost{color:#111}


.hero h1 .hero-name{text-decoration:none}
.hero h1 .hero-name::after{content:'';position:absolute;left:0;bottom:-9px;width:3.7em;max-width:100%;height:4px;background:var(--brand-green)}


/* Finale Kopfzeile: sichtbares Firmenlogo und klare Berufsbezeichnung. */
:root{--header-space:144px}
.head-in,.site-head.stuck .head-in{min-height:122px;gap:24px}
.brand img{width:330px;max-width:100%;height:auto}
.nav{gap:23px}.nav a{font-size:.85rem}
.brand-descriptor{display:block;font-family:Arial,Helvetica,sans-serif;font-size:clamp(22px,2.3vw,32px);font-weight:700;line-height:1.15;letter-spacing:-.025em;color:#111;margin-bottom:25px}
.hero .hero-copy .brand-descriptor{text-transform:uppercase}
.video-background-site .hero{padding-top:172px}
.foot-brand img{width:min(310px,100%)}
section[id],main[id]{scroll-margin-top:var(--header-space)}
.legal{padding-top:180px}
.video-controls{display:none}.js .video-controls{display:block}
html:not(.js) .roof-scene{animation:none}
@media(min-width:861px) and (max-width:1180px){.brand img{width:290px}.tel-cta{display:none}.nav{gap:20px}}
@media(max-width:860px){
 :root{--header-space:118px}
 .head-in,.site-head.stuck .head-in{min-height:102px;gap:14px}
 .brand img{width:clamp(200px,61vw,270px)}
 .nav{padding-top:126px}.burger{flex:0 0 46px}
 .video-background-site .hero{padding-top:124px}
 .brand-descriptor{font-size:24px;margin-bottom:23px}
 .legal{padding-top:145px}
}
@media(max-width:360px){.brand img{width:200px}.head-in,.site-head.stuck .head-in{min-height:94px}.brand-descriptor{font-size:22px}}
@media(prefers-reduced-motion:reduce){.video-controls .video-toggle{display:none}}
@media print{.head-in,.site-head.stuck .head-in{min-height:0}.brand img{width:250px}.legal{padding-top:25px}.video-background-site .hero{padding-top:25px}.video-controls{display:none!important}}

.steps .s-num{color:#505050}
@media(max-width:540px){.video-controls .video-toggle{font-size:11px;min-height:40px;bottom:38px}.video-controls .video-caption{bottom:10px}}