@charset "utf-8";
/* CSS Document */
:root{
  --ink:#1a1a1a; --grey:#6f6f6f; --line:#dcdcdc; --paper:#fafaf8;
  --mint:#7fe0c3; --mint-dark:#23775f; --sky:#1e4fb4;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:84px}
body{font-family:"Roboto",sans-serif;color:var(--ink);background:var(--paper);line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:inherit}
a:focus-visible{outline:2px solid var(--mint);outline-offset:3px}
.wrap{max-width:1180px;margin:0 auto;padding:0 32px}
img{max-width:100%;height:auto}

/* Header */
header{position:sticky;top:0;z-index:10;background:rgba(250,250,248,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
header .wrap{display:flex;align-items:center;justify-content:space-between;height:84px}
header img{height:52px;width:auto;display:block}
nav a{text-decoration:none;font-size:14px;letter-spacing:.14em;text-transform:uppercase;color:var(--grey);margin-left:28px;transition:color .2s}
nav a:hover{color:var(--ink)}

/* Hero */
.hero{position:relative;height:min(78vh,720px);height:min(78svh,720px);overflow:hidden}
.hero img{width:100%;height:100%;object-fit:cover;display:block}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,20,30,.72) 0%,rgba(10,20,30,.35) 50%,transparent 85%)}
.hero .ccm-block-hero-image-text{position:absolute;z-index:2;left:0;right:0;bottom:12%;color:#fff}
.hero h1{font-weight:200;font-size:clamp(2.5rem,1.5rem + 4vw,5.125rem);line-height:1.04;letter-spacing:-.01em;max-width:11ch}
.hero h1 b{font-weight:500}
.hero p{margin-top:22px;font-size:clamp(1rem,.9rem + .5vw,1.25rem);font-weight:300;max-width:34ch;opacity:.92}
.hero .bar{display:inline-block;width:64px;height:4px;background:var(--mint);margin-bottom:26px}

section{padding:120px 0}
.label{font-size:13px;letter-spacing:.24em;text-transform:uppercase;color:var(--mint-dark);margin-bottom:20px;display:flex;align-items:center;gap:14px}
.label::before{content:"";width:28px;height:1px;background:var(--mint-dark)}
h2{font-weight:200;font-size:clamp(2rem,1.4rem + 2.2vw,3.25rem);line-height:1.12;letter-spacing:-.01em}

/* Intro */
.intro .grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:start}
.intro p{color:#444;font-size:18px;font-weight:300}
.intro p+p{margin-top:18px}

/* Projekte */
.projekte{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.projekte .head{display:flex;justify-content:space-between;align-items:end;margin-bottom:56px;gap:40px}
.projekte .head p{color:var(--grey);max-width:38ch}
.gallery{display:grid;grid-template-columns:repeat(6,1fr);gap:24px}
.card{position:relative;overflow:hidden;background:#eee}
.card img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.card:hover img{transform:scale(1.04)}
.card figcaption{position:absolute;left:0;right:0;bottom:0;padding:22px 24px;color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.55))}
.card figcaption span{display:block;font-size:12px;letter-spacing:.2em;text-transform:uppercase;opacity:.85}
.card figcaption strong{font-weight:400;font-size:20px}
.c1{grid-column:span 6;aspect-ratio:1800/700}
.c2,.c3{grid-column:span 3;aspect-ratio:4/3}

/* Gallery */
.gallery > [id^="ccm-block-gallery"]{grid-column:1 / -1}
.ccm-block-gallery .row{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:0}
.ccm-block-gallery .row > a{display:block;position:relative;width:auto;max-width:none;flex:none;padding:0;aspect-ratio:1 / 1;overflow:hidden;background:#eee}
.ccm-block-gallery-image,
.ccm-block-gallery-image picture{display:block;width:100%;height:100%}
.ccm-block-gallery-image img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.ccm-block-gallery .row > a:hover img{transform:scale(1.04)}
.ccm-block-gallery-image-overlay{position:absolute;inset:0;pointer-events:none}
.ccm-block-gallery-image-overlay-color{position:absolute;inset:0;background:var(--ink);opacity:0;transition:opacity .3s}
.ccm-block-gallery .row > a:hover .ccm-block-gallery-image-overlay-color{opacity:.15}

/* Leistungen */
.leistungen ul{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:56px;border-top:1px solid var(--ink)}
.leistungen li{padding:32px 28px 8px 0}
.leistungen li+li{padding-left:28px;border-left:1px solid var(--line)}
.leistungen .n{font-size:13px;color:var(--mint-dark);letter-spacing:.1em}
.leistungen h3{font-weight:500;font-size:19px;margin:10px 0 10px}
.leistungen p{color:var(--grey);font-size:15px}

/* Angebot */
.angebot .lead{color:#444;font-size:18px;font-weight:300;max-width:62ch;margin-top:28px}
.angebot ul{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);margin-top:56px;border-top:1px solid var(--ink)}
.angebot li{padding:28px 28px 28px 0;border-bottom:1px solid var(--line)}
.angebot li:not(:nth-child(3n+1)){padding-left:28px;border-left:1px solid var(--line)}
.angebot .n{font-size:13px;color:var(--mint-dark);letter-spacing:.1em}
.angebot h3{font-weight:500;font-size:19px;margin-top:8px}

/* Netzwerk */
.netzwerk{background:#eef7f3}
.netzwerk .grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:start}
.netzwerk p{color:#444;font-size:18px;font-weight:300}
.tags{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.tags span{border:1px solid var(--mint-dark);color:var(--mint-dark);padding:7px 16px;font-size:14px;letter-spacing:.06em}

/* Kennzahlen */
.stat{display:flex;gap:56px;margin-top:44px;flex-wrap:wrap}
.stat div{font-size:14px;color:var(--grey)}
.stat b{display:block;font-size:clamp(36px,5vw,48px);font-weight:200;color:var(--ink);line-height:1.1}

/* Persönlich */
.person .grid{display:grid;grid-template-columns:340px 1fr;gap:80px;align-items:start}
.foto{aspect-ratio:4/5;display:block;width:100%;object-fit:cover}
.person h3{font-weight:300;font-size:34px}
.person .rolle{color:var(--grey);margin-top:6px;font-size:17px}
.person .facts{display:flex;gap:48px;margin-top:28px;flex-wrap:wrap}
.person .facts div{font-size:15px;color:#444}
.person .facts span{display:block;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--grey);margin-bottom:4px}
.person dl{display:grid;grid-template-columns:150px 1fr;margin-top:36px;border-top:1px solid var(--ink)}
.person dt,.person dd{padding:14px 0;border-bottom:1px solid var(--line);font-size:16px}
.person dt{color:var(--mint-dark);font-variant-numeric:tabular-nums}
.person dd{color:#333}

/* Kontakt */
.kontakt{background:var(--ink);color:#eee}
.kontakt h2{color:#fff}
.kontakt .label{color:var(--mint)}
.kontakt .label::before{background:var(--mint)}
.kontakt .grid{display:grid;grid-template-columns:1.1fr 1fr 1fr;gap:60px;margin-top:56px}
.kontakt h4{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:#9a9a9a;font-weight:400;margin-bottom:14px}
.kontakt p,.kontakt a{font-size:18px;font-weight:300;line-height:1.75;text-decoration:none}
.kontakt a:hover{color:var(--mint)}
.kontakt .cta{display:inline-block;margin-top:28px;padding:14px 26px;border:1px solid var(--mint);color:var(--mint);font-size:14px;letter-spacing:.14em;text-transform:uppercase}
.kontakt .cta:hover{background:var(--mint);color:var(--ink)}

footer{background:#111;color:#8a8a8a;font-size:13px}
footer .wrap{display:flex;justify-content:space-between;padding-top:26px;padding-bottom:26px}

/* Responsive */
@media (max-width:900px){
  nav{display:none}
  section{padding:80px 0}
  .intro .grid,.kontakt .grid,.netzwerk .grid,.person .grid{grid-template-columns:1fr;gap:36px}
  .projekte .head{flex-direction:column;align-items:start}
  .c2,.c3{grid-column:span 6}
  .c1{aspect-ratio:4/3}
  .leistungen ul{grid-template-columns:1fr 1fr}
  .leistungen li:nth-child(3){padding-left:0;border-left:0}
  .angebot ul{grid-template-columns:1fr 1fr}
  .angebot li:not(:nth-child(3n+1)){padding-left:0;border-left:0}
  .angebot li:nth-child(even){padding-left:24px;border-left:1px solid var(--line)}
  .person .foto{max-width:300px}
  footer .wrap{flex-direction:column;gap:6px}
}
@media (max-width:560px){
  .wrap{padding:0 20px}
  header img{height:40px}
  .leistungen ul{grid-template-columns:1fr}
  .leistungen li,.leistungen li+li{padding-left:0;border-left:0}
  .angebot ul{grid-template-columns:1fr}
  .angebot li:nth-child(even){padding-left:0;border-left:0}
  .person dl{grid-template-columns:1fr}
  .person dt{padding-bottom:0;border-bottom:0}
}

/* Bewegung reduzieren */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .card img{transition:none}
}