:root{--copper:#e0ad88;--white:#fffdf8;--muted:#e0e3d8;--line:#e0ad884a;--dark:#344036}*{box-sizing:border-box}html{scroll-behavior:smooth;background:#53604f}body{margin:0;color:var(--white);font-family:Arial,Helvetica,sans-serif;line-height:1.6;isolation:isolate}body::before{content:"";position:fixed;inset:0;z-index:-1;background:radial-gradient(ellipse at 85% 25%,#929b87 0,#64725e 48%,#404f41 100%);pointer-events:none}a{color:inherit;text-decoration:none}img{max-width:100%}a:focus-visible{outline:2px solid #ffd5b6;outline-offset:5px}header{position:sticky;top:0;z-index:20;background:#3e4c40ed;backdrop-filter:blur(14px);border-bottom:1px solid #ffffff25}.nav{max-width:1248px;margin:auto;padding:15px 24px;display:flex;align-items:center;justify-content:space-between;gap:26px}.region{font-size:11px;color:#efc7a9;letter-spacing:.06em;margin-bottom:5px}.brand{font-size:15px;letter-spacing:2px;font-weight:800;line-height:1.3}.brand span{color:var(--copper)}nav{display:flex;gap:25px;align-items:center;font-size:13px}nav a:hover{color:#ffd1b1}.wrap{max-width:1248px;margin:auto;padding-left:24px;padding-right:24px}.hero{padding:78px 0 88px}.hero-grid{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:60px}.eyebrow{font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:#f0c4a3}.hero h1{font-size:clamp(35px,5.6vw,72px);line-height:1.06;color:var(--copper);letter-spacing:-.025em;margin:20px 0 25px}.hero-slogan{font-size:clamp(24px,3vw,38px);font-weight:700;line-height:1.25;margin:0 0 22px}.hero-copy{font-size:18px;color:#f0f1e9;max-width:540px;margin-bottom:0}.hero-art{margin:0;position:relative}.hero-art img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;border:1px solid var(--line)}.hero-art figcaption,.image-note{font-size:11px;color:#e8dfd2;margin-top:10px;line-height:1.5}.btn{display:inline-flex;align-items:center;justify-content:center;gap:20px;padding:15px 23px;border:1px solid var(--copper);background:var(--copper);color:#26372d;font-weight:700;font-size:14px;margin-top:30px;transition:background .2s}.btn:hover{background:#f2c8a8}.btn.secondary{color:#fffdf8;background:transparent}.intro{padding:65px 24px 75px;border-top:1px solid #ffffff2c;display:grid;grid-template-columns:1fr 1fr;gap:70px}.intro h2{font-size:clamp(30px,4vw,48px);line-height:1.14;margin:15px 0}.intro p{margin:0;color:var(--muted);font-size:18px;max-width:550px}.gallery-section{border-top:1px solid #ffffff2c;padding:75px 0 85px;scroll-margin-top:115px}.section-head{display:grid;grid-template-columns:1fr 1fr;gap:65px;align-items:end;margin-bottom:34px}.section-head h2{font-size:clamp(30px,4vw,50px);line-height:1.1;letter-spacing:-.02em;margin:15px 0 0}.section-head p{margin:0;color:var(--muted);max-width:510px;font-size:17px}.category-layout{display:grid;grid-template-columns:minmax(260px,.7fr) minmax(0,1.3fr);gap:48px;align-items:start}.service-label{font-size:10px;letter-spacing:.2em;color:#e6c7ae;margin:0 0 14px}.service-grid{display:grid}.service-item{display:flex;align-items:center;gap:14px;padding:20px 0;border-bottom:1px solid var(--line);font-size:17px;line-height:1.4}.service-item:first-child{border-top:1px solid var(--line)}.service-item:hover{color:#ffddc3}.service-arrow{margin-left:auto;color:var(--copper);font-size:23px}.category-collage{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:4px;aspect-ratio:1.25;background:#c6957044;border:1px solid var(--line);overflow:hidden}.collage-3 .collage-panel:first-child{grid-row:1/3}.collage-panel{position:relative;min-width:0;min-height:0;overflow:hidden;background:#495646}.collage-panel img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .4s}.collage-label{position:absolute;inset:auto 0 0;padding:35px 15px 14px;font-size:14px;font-weight:700;line-height:1.35;background:linear-gradient(transparent,#18281de6);color:white}.collage-panel:focus-visible{outline-offset:-4px}.process{border-top:1px solid #ffffff2c;padding:75px 0}.process h2{font-size:clamp(30px,4vw,48px);line-height:1.2;margin:15px 0 40px}.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:40px}.step{padding-top:18px;border-top:1px solid var(--line)}.step .number{color:var(--copper);font-family:Georgia,serif;font-size:29px}.step h3{font-size:20px;margin:10px 0}.step p{color:var(--muted);font-size:15px;margin:0}.contact{text-align:center;border-top:1px solid #ffffff2c;padding:90px 24px}.contact h2{font-size:clamp(34px,5vw,62px);line-height:1.12;max-width:800px;margin:20px auto}.contact p{max-width:600px;margin:18px auto;color:var(--muted)}.phone{display:inline-block;font-size:27px;color:#ffd4b4;font-weight:700;white-space:nowrap}.contact-actions{display:flex;align-items:center;justify-content:center;gap:25px;flex-wrap:wrap}.contact-actions .btn{margin:0}.contact-name{font-size:15px;margin:22px 0!important}footer{border-top:1px solid #ffffff2c;padding:30px 0 25px;font-size:12px;color:#e5e7dd}.footer-main{display:flex;align-items:center;justify-content:space-between;gap:24px}.legal-links{display:flex;gap:20px;flex-wrap:wrap}.legal-links a:hover{text-decoration:underline}.footer-note{font-size:10px;color:#d7dacd;margin:18px 0 0}.detail-page{display:none;min-height:80vh;padding:48px 0 80px;scroll-margin-top:102px}.detail-page:target{display:block}body:has(.detail-page:target) .home-only{display:none}.detail-back{display:inline-block;color:#f6cfb3;font-size:13px;margin-bottom:42px}.detail-layout{display:grid;grid-template-columns:1.05fr 1fr;gap:65px;align-items:start}.detail-copy h2{font-size:clamp(36px,5.3vw,65px);letter-spacing:-.035em;line-height:1.08;margin:18px 0 28px;overflow-wrap:break-word}.detail-line{height:2px;background:var(--copper);width:70px;margin-bottom:26px}.detail-lead{font-size:18px;line-height:1.8;color:#f3f3eb;margin:0 0 30px}.detail-features{list-style:none;padding:0;margin:0 0 30px;display:grid;gap:17px}.detail-features li{position:relative;padding:0 0 0 23px;font-size:15px;line-height:1.65}.detail-features li::before{content:"";position:absolute;left:0;top:.68em;width:6px;height:6px;background:var(--copper);border-radius:50%}.detail-photo{margin:0}.detail-photo img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;border:1px solid var(--line)}.detail-photo figcaption{font-size:11px;color:#e6dacb;line-height:1.5;margin-top:11px}.detail-actions{display:flex;align-items:center;gap:24px;flex-wrap:wrap}.detail-actions .btn{margin:0}.detail-phone{font-size:17px;color:#f5c8a6;white-space:nowrap}.detail-next{border-top:1px solid var(--line);padding-top:23px;margin-top:60px;font-size:14px;color:#f6d0b4}.legal{padding:55px 24px 80px;max-width:900px;margin:auto}.legal h1{font-size:clamp(35px,6vw,58px);line-height:1.1}.legal h2{font-size:22px;margin:38px 0 12px;color:#f2c9aa}.legal p,.legal li{color:#edf0e5;font-size:16px;line-height:1.8}.legal a{text-decoration:underline;text-underline-offset:3px}.legal .draft-note{border-left:2px solid var(--copper);padding-left:18px;color:#ffe1cb;font-size:14px}.legal .missing{color:#ffdab8;font-style:italic}.skip{position:fixed;top:-100px;left:20px;background:var(--dark);padding:10px;z-index:30}.skip:focus{top:10px}
@media(hover:hover) and (prefers-reduced-motion:no-preference){.collage-panel:hover img{transform:scale(1.025)}}
@media(max-width:900px){.hero-grid{gap:30px}.category-layout{grid-template-columns:.8fr 1.2fr;gap:28px}.detail-layout{gap:35px}.nav{gap:15px}nav{gap:16px}.brand{font-size:13px}.region{font-size:10px}.section-head{gap:30px}}
@media(max-width:700px){.nav{padding:13px 20px;align-items:flex-start;gap:13px}.brand{font-size:11px;letter-spacing:1.1px}.region{font-size:9px;letter-spacing:0;max-width:165px}nav{gap:5px 14px;flex-wrap:wrap;justify-content:flex-end;max-width:165px;font-size:10px}.wrap{padding-left:22px;padding-right:22px}.hero{padding:45px 0 55px}.hero-grid,.intro,.section-head,.category-layout,.detail-layout{grid-template-columns:1fr;gap:30px}.hero h1{font-size:48px}.hero-art img{aspect-ratio:4/3}.hero-copy{font-size:16px}.hero-slogan{font-size:27px}.hero-art{margin-top:8px}.intro{padding-top:45px;padding-bottom:50px;gap:12px}.intro p{font-size:16px}.gallery-section{padding:50px 0 55px;scroll-margin-top:100px}.section-head{gap:16px;margin-bottom:28px}.section-head p{font-size:16px}.category-layout{gap:26px}.service-item{padding:16px 0;font-size:16px}.category-collage{aspect-ratio:1}.collage-3 .collage-panel:first-child{grid-row:auto;grid-column:1/3}.collage-label{padding:28px 10px 11px;font-size:12px}.steps{grid-template-columns:1fr;gap:27px}.process{padding:50px 0}.process h2{margin-bottom:30px}.step{padding-top:14px}.step h3{margin:4px 0 8px}.contact{padding:60px 22px}.contact h2{font-size:38px}.contact-actions{flex-direction:column;gap:18px}.footer-main{align-items:flex-start;flex-direction:column;gap:18px}.legal-links{gap:20px}.detail-page{padding:35px 0 55px}.detail-back{margin-bottom:30px}.detail-lead{font-size:17px;line-height:1.75}.detail-copy h2{font-size:43px}.detail-photo img{aspect-ratio:4/3}.detail-layout{gap:35px}.detail-next{margin-top:35px}.legal{padding:35px 22px 55px}}
@media(max-width:360px){.hero h1{font-size:42px}.detail-copy h2{font-size:36px}.nav{padding-left:16px;padding-right:16px}.brand{font-size:10px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}
/* Korrekte Bildhöhen trotz Größenangaben für verzögerungsfreies Laden. */
.hero-art img,.detail-photo img{height:auto}
@media(max-width:700px){.hero h1{font-size:clamp(35px,10.8vw,48px)}footer nav{max-width:none;justify-content:flex-start;font-size:12px}}

/* Eigene Projektvideos: vollständig sichtbar und direkt steuerbar. */
.project-video{border:1px solid var(--line);background:#263128;overflow:hidden;box-shadow:0 20px 55px #15221925}.project-video video{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:contain;background:#20251f}.project-video-caption{padding:16px 18px 18px}.project-video-caption .eyebrow{display:block;font-size:10px;letter-spacing:1.8px;margin-bottom:8px}.project-video select{display:block;width:100%;background:#354435;color:var(--white);border:1px solid var(--line);padding:11px;font:inherit;font-size:14px;border-radius:3px}.project-video-actions{display:flex;align-items:center;gap:10px;margin-top:12px}.project-video button{background:transparent;color:var(--white);border:1px solid var(--line);min-width:42px;min-height:42px;padding:7px 12px;font:inherit;font-size:14px;cursor:pointer}.project-video button:hover{background:#e0ad8820}.project-video button:focus-visible,.project-video select:focus-visible{outline:2px solid var(--copper);outline-offset:3px}#project-counter{font-size:12px;color:var(--muted)}#project-sound{margin-left:auto}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media(max-width:700px){.project-video video{aspect-ratio:3/4;max-height:70svh}.project-video-caption{padding:13px}.project-video-actions{gap:8px}}

/* Raumdesign: Lichtkonzept als größtes Motiv, Beratung bewusst kompakter. */
#raumdesign .collage-3{grid-template-columns:.85fr 1.15fr;grid-template-rows:1fr 1fr;aspect-ratio:1.18;gap:6px}
#raumdesign .collage-3 .collage-panel:first-child{grid-column:1;grid-row:1}
#raumdesign .collage-3 .collage-panel:nth-child(2){grid-column:1;grid-row:2}
#raumdesign .collage-3 .collage-panel:nth-child(3){grid-column:2;grid-row:1/3}
#raumdesign .collage-panel:nth-child(3) img{object-position:48% center}
#leistung-3d-visualisierung .detail-photo img,#leistung-lichtkonzept .detail-photo img{aspect-ratio:3/2;object-fit:cover}
#leistung-beratung .detail-photo{width:82%;justify-self:center}
@media(max-width:700px){#raumdesign .collage-3{grid-template-columns:1fr 1fr;grid-template-rows:1fr 1.5fr;aspect-ratio:.85}#raumdesign .collage-3 .collage-panel:first-child{grid-column:1;grid-row:1}#raumdesign .collage-3 .collage-panel:nth-child(2){grid-column:2;grid-row:1}#raumdesign .collage-3 .collage-panel:nth-child(3){grid-column:1/3;grid-row:2}#raumdesign .collage-panel:nth-child(3) img{object-position:center}}

/* Projektfilm: dezente, rahmenlose Darstellung mit nativen Video-Reglern. */
.hero-grid .project-video{width:min(100%,380px);justify-self:center;border:0;box-shadow:none;background:transparent;overflow:visible}
.hero-grid .project-video video{display:block;width:100%;height:auto;aspect-ratio:9/16;object-fit:contain;background:transparent;border:0;box-shadow:none}
@media(max-width:700px){.hero-grid .project-video{width:min(78vw,350px);margin:12px auto 0}.hero-grid .project-video video{aspect-ratio:9/16;max-height:none}}

/* Own project photography */
.category-project-photo{margin:0;position:relative}.category-project-photo img{display:block;width:100%;height:auto;max-height:650px;object-fit:contain}.category-project-photo figcaption,.detail-photo figcaption{font-size:12px;color:var(--muted);text-align:right;margin-top:10px;letter-spacing:.06em}.detail-layout.detail-layout--text{grid-template-columns:minmax(0,1fr);max-width:900px}.footer-project-photos{text-align:right;color:var(--muted);font-size:12px;letter-spacing:.06em;margin:18px 0 0}

.hero h1 .hero-name{color:var(--white)}

/* Trockenbau: eigene Projektaufnahmen vollständig zeigen */
.detail-project-gallery{display:grid;gap:28px;min-width:0;align-self:start}
#leistung-trockenbau .detail-project-gallery .detail-photo img{aspect-ratio:auto;height:auto;object-fit:contain}

#leistung-mikrozement .detail-photo img{aspect-ratio:auto;height:auto;object-fit:contain}

#leistung-epoxidharzboeden .detail-photo img{aspect-ratio:auto;height:auto;object-fit:contain}

/* Projektgalerien: Touch-Swipe und bedienbare Pfeile */
.project-carousel{margin:0;min-width:0;max-width:100%;align-self:start}
.project-carousel-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain;aspect-ratio:3/4;border:1px solid var(--line)}
.project-carousel-track::-webkit-scrollbar{display:none}
.project-carousel-track img{display:block;flex:0 0 100%;width:100%;min-width:0;height:100%;object-fit:contain;scroll-snap-align:start;scroll-snap-stop:always}
.project-carousel-controls{display:flex;align-items:center;justify-content:center;gap:22px;margin-top:12px}
.project-carousel-controls button{border:1px solid var(--copper);background:transparent;color:var(--white);width:44px;height:44px;font:22px Arial;cursor:pointer;border-radius:50%}
.project-carousel-controls button:disabled{opacity:.3;cursor:default}
.project-carousel-count{font-size:13px;font-variant-numeric:tabular-nums}
.project-carousel figcaption{font-size:12px;color:var(--muted);text-align:right;margin-top:10px;line-height:1.5}
.project-carousel-track:focus-visible,.project-carousel-controls button:focus-visible{outline:2px solid var(--copper);outline-offset:3px}

#leistung-exklusive-raumloesungen .detail-photo img{aspect-ratio:auto;height:auto;object-fit:contain}

/* Schwarze Videobalken aus der Trockenbauaufnahme ausblenden */
#leistung-trockenbau .detail-photo img{border:0}
.trockenbau-photo-crop{aspect-ratio:708/1258;overflow:hidden}
#leistung-trockenbau .trockenbau-photo-crop img,#innenausbau .trockenbau-photo-crop img{width:100%;height:auto;max-height:none;transform:translateY(-9.04948%)}

.category-layout.category-layout--text{grid-template-columns:minmax(0,1fr)}
#leistung-individuelle-einbauten .detail-photo img{aspect-ratio:auto;height:auto;object-fit:contain}

#leistung-natursteinwaende .detail-photo img{aspect-ratio:auto;height:auto;object-fit:contain}

#leistung-epoxidharzboeden .project-carousel-track{aspect-ratio:4/3}
#leistung-epoxidharzboeden .project-carousel-track img{object-fit:cover;object-position:center 70%}

#leistung-beratung .detail-photo img,#leistung-3d-visualisierung .detail-photo img,#leistung-lichtkonzept .detail-photo img{aspect-ratio:auto;object-fit:contain;border:0;height:auto}

/* Centered contact details and balanced contact actions. */
#kontakt .contact-details{display:flex;flex-direction:column;align-items:center;gap:3px;max-width:600px;margin:28px auto 0;font-style:normal;text-align:center;color:var(--muted);font-size:15px;line-height:1.6}
#kontakt .contact-role{font-size:12px;letter-spacing:.08em}
#kontakt .contact-details strong{font-size:20px;color:var(--white);font-weight:600;margin-bottom:5px}
#kontakt .contact-region{margin-top:9px}
#kontakt .contact-email{margin:14px auto 28px;font-size:15px;overflow-wrap:anywhere}
#kontakt .contact-actions{display:grid;grid-template-columns:repeat(2,minmax(0,250px));gap:14px;max-width:514px;margin:0 auto}
#kontakt .contact-actions .btn{display:flex;width:100%;min-height:56px;box-sizing:border-box;margin:0;padding:14px 18px;font-size:15px;font-weight:600;line-height:1.4;letter-spacing:0;text-decoration:none}
#kontakt .contact-actions .contact-call{background:transparent;color:var(--white);border:1px solid var(--copper)}
#kontakt .contact-actions .contact-call:hover{background:#e0ad881a}
@media(max-width:560px){#kontakt .contact-actions{grid-template-columns:minmax(0,1fr);max-width:300px}}

/* Consistent project photos: same portrait frame as the gold wall-light photo. */
.category-project-photo,.detail-photo,.project-carousel{width:100%;max-width:487.5px;justify-self:center}
.category-project-photo>img,.detail-photo>img{display:block;width:100%!important;height:auto!important;max-height:none!important;aspect-ratio:3/4!important;object-fit:cover!important;object-position:center;transform:none!important}
.trockenbau-photo-crop{width:100%;aspect-ratio:3/4;overflow:hidden}
#innenausbau .trockenbau-photo-crop img,#leistung-trockenbau .trockenbau-photo-crop img{display:block;width:100%;height:100%;max-height:none;aspect-ratio:auto;object-fit:cover;object-position:center;transform:none}
.project-carousel .project-carousel-track{width:100%;aspect-ratio:3/4!important}
.project-carousel .project-carousel-track img{height:100%;object-fit:cover;object-position:center}
#leistung-epoxidharzboeden .project-carousel-track img{object-position:center 70%}
@media(max-width:700px){.category-project-photo,.detail-photo,.project-carousel{max-width:100%}}