@font-face{font-family:"Archivo";src:url(fonts/archivo.woff2) format("woff2");font-weight:100 900;font-stretch:62% 125%;font-display:swap}
:root{--wall:#e4e1db;--wall2:#d4d0c8;--ink:#1f2226;--ink2:#4a4e55;--sun:#f26a1b;--sun-d:#b8470a;--white:#fff;--pad:clamp(16px,4vw,56px)}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--wall);color:var(--ink);font:400 18px/1.55 "Archivo",Arial,Helvetica,sans-serif;font-stretch:100%;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration-color:var(--sun);text-decoration-thickness:2px;text-underline-offset:3px}
a:hover{color:var(--sun-d)}
:focus-visible{outline:3px solid var(--sun);outline-offset:3px}
.skip{position:absolute;left:-999px;top:0;background:var(--sun);color:var(--ink);padding:10px 14px;z-index:99}
.skip:focus{left:8px}
h1,h2,h3{margin:0;line-height:1.02}
.lead{font-size:clamp(20px,2vw,24px);line-height:1.45}

/* Kopf */
.top{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px var(--pad);background:var(--ink);color:var(--white)}
.brand,.foot-brand{display:flex;align-items:center;gap:.28em;text-decoration:none;color:var(--white);font-weight:800;font-stretch:125%;font-size:22px;letter-spacing:.02em;text-transform:uppercase;line-height:1}
.brand:hover{color:var(--white)}
.sun{width:1.45em;height:1.45em;fill:var(--sun);flex:none}
.brand:hover .sun{transform:rotate(30deg);transition:transform .5s}
nav.main ul{display:flex;gap:clamp(14px,2.4vw,34px);list-style:none;margin:0;padding:0}
nav.main a{color:var(--white);text-decoration:none;font-weight:600;font-size:16px;padding:6px 0;border-bottom:3px solid transparent}
nav.main a:hover,nav.main a[aria-current]{border-color:var(--sun);color:var(--white)}
.menu-btn{display:none;background:none;border:2px solid var(--sun);color:var(--white);font:600 15px "Archivo",sans-serif;padding:7px 14px;cursor:pointer}

/* Hero */
.hero{position:relative;height:min(88svh,1000px);min-height:480px;overflow:hidden;background:var(--ink)}
.hero img{width:100%;height:100%;object-fit:cover;object-position:60% 50%}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(31,34,38,0) 40%,rgba(31,34,38,.78) 100%)}
.hero-t{position:absolute;z-index:2;left:var(--pad);right:var(--pad);bottom:clamp(24px,6vh,64px);color:var(--white)}
.hero h1{font-weight:900;font-stretch:125%;font-size:clamp(44px,8.6vw,150px);letter-spacing:-.025em;line-height:.92;max-width:11ch;text-shadow:0 2px 24px rgba(0,0,0,.35)}
.hero-t p{max-width:46ch;margin:22px 0 0;font-size:clamp(17px,1.6vw,21px)}
@media (prefers-reduced-motion:no-preference){
 .hero img{animation:settle 2.4s cubic-bezier(.2,.7,.2,1) both}
 .hero h1{animation:rise 1.1s .25s cubic-bezier(.2,.7,.2,1) both}
 .hero-t p{animation:rise 1.1s .45s cubic-bezier(.2,.7,.2,1) both}
}
@keyframes settle{from{transform:scale(1.12)}to{transform:none}}
@keyframes rise{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:none}}

/* Abschnitte */
.intro{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:32px 64px;align-items:end;padding:clamp(48px,7vw,96px) var(--pad)}
.intro p:first-child{margin:0;font-size:clamp(21px,2.3vw,30px);line-height:1.38;max-width:34ch}
.btn{display:inline-block;background:var(--sun);color:var(--ink);text-decoration:none;font-weight:800;font-stretch:112%;padding:15px 24px;font-size:18px;border:0}
.btn:hover{background:var(--ink);color:var(--white)}
.tel{display:inline-block;margin-left:18px;font-weight:700}
.sh{font-weight:900;font-stretch:125%;font-size:clamp(42px,7.4vw,112px);letter-spacing:-.03em;line-height:.9;padding:0 var(--pad);margin-bottom:clamp(24px,3vw,40px)}

/* Projekt-Streifen */
.projects{padding-top:clamp(24px,4vw,48px)}
.strips{list-style:none;margin:0;padding:0}
.strip{position:relative;display:block;height:clamp(230px,36vw,560px);overflow:hidden;text-decoration:none;color:var(--white);background:var(--ink);border-top:6px solid var(--wall)}
.strip img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.strip::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(20,22,25,.72) 0%,rgba(20,22,25,.15) 55%,rgba(20,22,25,0) 100%)}
.strips li:nth-child(even) .strip::after{background:linear-gradient(270deg,rgba(20,22,25,.72) 0%,rgba(20,22,25,.15) 55%,rgba(20,22,25,0) 100%)}
.st{position:absolute;z-index:2;left:var(--pad);bottom:clamp(18px,3vw,40px);max-width:80%}
.strips li:nth-child(even) .st{left:auto;right:var(--pad);text-align:right}
.st b{display:block;font-weight:900;font-stretch:125%;font-size:clamp(30px,5.4vw,84px);letter-spacing:-.025em;line-height:.95}
.st span{display:inline-block;margin-top:10px;font-weight:600;font-size:clamp(15px,1.4vw,19px);border-top:3px solid var(--sun);padding-top:6px}
.strip:hover{color:var(--white)}
.strip:hover img,.strip:focus-visible img{transform:scale(1.04)}
.strip:focus-visible{outline-offset:-6px}

.leist{padding:clamp(64px,9vw,128px) 0 clamp(32px,5vw,64px)}
.leist ul{list-style:none;margin:0;padding:0 var(--pad);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px clamp(24px,4vw,56px)}
.leist h3{font-weight:800;font-stretch:112%;font-size:clamp(21px,1.9vw,26px);margin-bottom:10px;padding-top:14px;border-top:3px solid var(--ink)}
.leist p{margin:0;color:var(--ink2);max-width:36ch}

.steps{background:var(--ink);color:var(--white);padding:clamp(56px,8vw,112px) 0}
.steps ol{list-style:none;counter-reset:s;margin:0;padding:0 var(--pad);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px}
.steps li{counter-increment:s}
.steps li::before{content:counter(s);display:block;font-weight:900;font-stretch:125%;font-size:clamp(64px,7vw,110px);line-height:.9;color:transparent;-webkit-text-stroke:2px var(--sun);margin-bottom:16px}
.steps h3{font-weight:800;font-stretch:112%;font-size:23px;margin-bottom:10px}
.steps p{margin:0;color:#c9ccd1}

.franz{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(28px,5vw,72px);padding:clamp(64px,9vw,128px) var(--pad);align-items:start}
.franz img{width:100%;max-height:820px;object-fit:cover}
.franz .sh{padding:0}
.franz>div>p,.press{max-width:62ch}
.franz h3{font-weight:800;font-stretch:112%;font-size:22px;margin:36px 0 12px}
.press{padding:0;list-style:none}
.press li{padding:12px 0;border-top:1px solid var(--wall2)}

.cta{background:var(--sun);color:var(--ink);padding:clamp(56px,8vw,112px) var(--pad)}
.cta h2{font-weight:900;font-stretch:125%;font-size:clamp(36px,6vw,92px);letter-spacing:-.03em;line-height:.92;max-width:14ch}
.cta p{font-size:20px;margin:24px 0 0}
.cta .btn{background:var(--ink);color:var(--white)}
.cta .btn:hover{background:var(--white);color:var(--ink)}

/* Projektseite */
.phero{position:relative;height:min(80svh,900px);min-height:380px;background:var(--ink);overflow:hidden}
.phero img{width:100%;height:100%;object-fit:cover}
.phero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,22,25,0) 45%,rgba(20,22,25,.8) 100%)}
.phero-t{position:absolute;z-index:2;left:var(--pad);right:var(--pad);bottom:clamp(20px,5vh,56px);color:var(--white)}
.phero-t p{margin:0 0 12px;font-weight:600;font-size:clamp(16px,1.5vw,20px);display:inline-block;border-top:3px solid var(--sun);padding-top:6px}
.phero h1{font-weight:900;font-stretch:125%;font-size:clamp(40px,7.6vw,128px);letter-spacing:-.03em;line-height:.9;max-width:20ch}
.pinfo{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:32px clamp(32px,6vw,96px);padding:clamp(48px,7vw,96px) var(--pad)}
.ptext p{margin:0 0 18px;max-width:62ch}
.facts{margin:0;align-self:start}
.facts div{padding:12px 0;border-top:3px solid var(--ink)}
.facts dt{font-size:14px;font-weight:700;color:var(--ink2)}
.facts dd{margin:2px 0 0;font-weight:600}
.pano{margin:0 0 clamp(32px,5vw,64px)}
.pano-scroll{overflow-x:auto;background:var(--ink)}
.pano-scroll img{height:clamp(200px,28vw,400px);width:auto;max-width:none}
.pano figcaption{padding:10px var(--pad) 0;font-size:15px;color:var(--ink2)}
.gal{padding:0 var(--pad) clamp(48px,7vw,96px)}
.gh{font-weight:900;font-stretch:125%;font-size:clamp(28px,4vw,56px);letter-spacing:-.02em;margin:clamp(48px,7vw,96px) 0 24px}
.g{display:flex;flex-wrap:wrap;gap:6px;--h:300px}
.g a{flex-grow:calc(var(--r)*100);flex-basis:calc(var(--r)*var(--h));max-width:calc(var(--r)*var(--h)*1.9);background:var(--wall2);overflow:hidden}
.g a:only-child{flex:0 0 auto;width:min(100%,640px);max-width:none}
.g::after{content:"";flex-grow:1e6}
.g img{width:100%;height:100%;object-fit:cover;transition:opacity .2s}
.g a:hover img{opacity:.85}
.pn{display:grid;grid-template-columns:1fr 1fr;border-top:6px solid var(--ink)}
.pn a{display:block;padding:clamp(24px,4vw,48px) var(--pad);text-decoration:none;font-weight:900;font-stretch:118%;font-size:clamp(22px,3vw,40px);line-height:1}
.pn a+a{text-align:right;border-left:6px solid var(--ink)}
.pn small{display:block;font-weight:600;font-stretch:100%;font-size:15px;margin-bottom:10px;color:var(--ink2)}

/* Kontakt / Rechtliches */
.kontakt{padding:clamp(56px,8vw,112px) var(--pad) clamp(32px,4vw,56px)}
.kontakt h1{font-weight:900;font-stretch:125%;font-size:clamp(44px,8vw,128px);letter-spacing:-.03em;line-height:.9;max-width:12ch;margin-bottom:28px}
.kontakt>p{max-width:60ch}
.big{font-weight:800;font-stretch:112%;font-size:clamp(24px,3.4vw,46px);line-height:1.25}
.legal{padding:clamp(40px,6vw,80px) var(--pad);border-top:6px solid var(--ink);max-width:900px}
.legal h2{font-weight:900;font-stretch:118%;font-size:36px;margin:0 0 16px}
.legal h2+p{margin-top:0}
.legal h3{font-size:19px;font-weight:800;margin:26px 0 6px}
.legal p{margin:0 0 12px;max-width:68ch}
#datenschutz{margin-top:56px}

/* Fuß */
.foot{background:var(--ink);color:#c9ccd1;padding:clamp(40px,6vw,72px) var(--pad) 24px;font-size:16px}
.foot a{color:var(--white)}
.foot-in{display:grid;grid-template-columns:1.2fr 1fr 1fr 1.2fr;gap:28px}
.foot-in p{margin:0}
.foot-brand{font-size:20px}
.copy{margin:40px 0 0;font-size:14px;color:#8f949b}

/* Großansicht */
.lb{position:fixed;inset:0;z-index:100;background:rgba(20,22,25,.96);display:none;align-items:center;justify-content:center}
.lb.on{display:flex}
.lb img{max-width:94vw;max-height:84vh;object-fit:contain}
.lb button{position:absolute;background:none;border:0;color:var(--white);font-size:46px;line-height:1;cursor:pointer;padding:10px 16px}
.lb button:hover{color:var(--sun)}
.lb .x{top:8px;right:8px}.lb .p{left:4px;top:50%;transform:translateY(-50%)}.lb .n{right:4px;top:50%;transform:translateY(-50%)}
.lb .c{position:absolute;bottom:14px;left:16px;right:16px;text-align:center;color:#d6d8db;font-size:15px}

@media (max-width:980px){
 .leist ul{grid-template-columns:repeat(2,minmax(0,1fr))}
 .steps ol{grid-template-columns:repeat(2,minmax(0,1fr))}
 .foot-in{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
 .menu-btn{display:block}
 nav.main{position:absolute;top:100%;left:0;right:0;background:var(--ink);display:none;padding:8px var(--pad) 20px}
 nav.main.open{display:block}
 nav.main ul{flex-direction:column;gap:4px}
 nav.main a{display:block;font-size:20px;padding:10px 0}
 .brand{font-size:18px}
 .intro,.pinfo,.franz{grid-template-columns:1fr}
 .leist ul,.steps ol,.foot-in{grid-template-columns:1fr}
 .g{--h:180px}
 .strips li:nth-child(even) .st{left:var(--pad);right:auto;text-align:left}
 .strips li:nth-child(even) .strip::after,.strip::after{background:linear-gradient(180deg,rgba(20,22,25,0) 35%,rgba(20,22,25,.8) 100%)}
 .pn{grid-template-columns:1fr}.pn a+a{text-align:left;border-left:0;border-top:6px solid var(--ink)}
 .tel{margin:14px 0 0;display:block}
 .phero h1,.st b,.sh,.cta h2,.kontakt h1,.gh{font-stretch:100%;hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}