/* Kemkes Bautechnik – Stylesheet
   Hell und sachlich wie ein Bauplan. Türkis aus dem Logo ist die einzige Akzentfarbe. */

@font-face{font-family:"Archivo"; font-style:normal; font-weight:300 850; font-stretch:62% 125%; font-display:swap;
  src:url(../fonts/archivo-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Archivo"; font-style:normal; font-weight:300 850; font-stretch:62% 125%; font-display:swap;
  src:url(../fonts/archivo-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"IBM Plex Mono"; font-style:normal; font-weight:400; font-display:swap; src:url(../fonts/plexmono-400-latin.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono"; font-style:normal; font-weight:500; font-display:swap; src:url(../fonts/plexmono-500-latin.woff2) format("woff2")}

:root{
  --bg:#F6F8F7; --card:#FFFFFF; --ink:#18211F; --muted:#56625F; --line:#DCE3E1;
  --teal:#9ACEC8; --teal-ink:#2C7A71; --teal-soft:#E3F2EF;
  --font:"Archivo", "Helvetica Neue", Arial, sans-serif;
  --mono:"IBM Plex Mono", ui-monospace, Consolas, monospace;
  --max:1200px;
  --gutter:clamp(18px, 4vw, 48px);
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:92px; -webkit-text-size-adjust:100%}
body{margin:0; background:var(--bg); color:var(--ink); font-family:var(--font); font-size:17px; line-height:1.6}
img,video{max-width:100%; height:auto; display:block}
h1,h2,h3,h4{margin:0; text-wrap:balance; line-height:1.1; hyphens:auto; overflow-wrap:break-word}
p{margin:0}
a{color:var(--teal-ink)}
:focus-visible{outline:3px solid var(--teal-ink); outline-offset:3px; border-radius:2px}
.wrap{max-width:var(--max); margin:0 auto; padding-left:max(var(--gutter), env(safe-area-inset-left, 0px)); padding-right:max(var(--gutter), env(safe-area-inset-right, 0px))}
.skip{position:absolute; left:12px; top:-60px; background:var(--ink); color:#fff; padding:10px 16px; z-index:100; border-radius:6px}
.skip:focus{top:12px}
.mono{font-family:var(--mono)}
.eyebrow{font-family:var(--mono); font-size:12.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--teal-ink)}
.sr-only{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}

/* ---------- Kopfzeile ---------- */
.top{position:sticky; top:0; z-index:50; background:color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border-bottom:1px solid var(--line)}
.top .wrap{display:flex; align-items:center; gap:28px; min-height:76px}
.logo{display:flex; align-items:center; gap:12px; color:var(--ink); text-decoration:none; white-space:nowrap}
.logo .mark{width:54px; height:54px; flex:none}
.logo .wm{display:flex; flex-direction:column; line-height:1.05}
.logo .wm b{font-weight:400; font-size:23px; letter-spacing:-.005em}
.logo .wm small{font-size:11.5px; letter-spacing:.06em; color:var(--muted)}
.nav{display:flex; gap:26px; margin-left:auto}
.nav a{color:var(--ink); text-decoration:none; font-size:15.5px; padding-block:6px}
.nav a:hover{color:var(--teal-ink)}
.call{display:inline-flex; align-items:center; gap:8px; background:var(--teal-ink); color:#fff; text-decoration:none; border-radius:999px; padding:9px 18px; font-weight:600; font-size:15px; white-space:nowrap; font-variant-numeric:tabular-nums}
.call:hover{background:var(--ink)}
.call svg{width:16px; height:16px}
.menu-btn{display:none; margin-left:auto; background:none; border:1.5px solid var(--ink); border-radius:999px; padding:7px 14px; font:600 14px var(--font); color:var(--ink); cursor:pointer}
@media (max-width:900px){
  .menu-btn{display:inline-block}
  .nav{display:none; position:absolute; left:0; right:0; top:100%; flex-direction:column; gap:0; background:var(--card); border-bottom:1px solid var(--line); padding:8px max(var(--gutter), env(safe-area-inset-left, 0px)) 16px}
  .nav.open{display:flex}
  .nav a{padding:12px 0; border-bottom:1px solid var(--line); font-size:17px}
  .top .call span{display:none}
  .top .call{padding:10px 12px}
}
@media (max-width:480px){
  .top .wrap{gap:10px}
  .logo{gap:9px}
  .logo .mark{width:44px; height:44px}
  .logo .wm b{font-size:19px}
  .logo .wm small{font-size:10px}
  .menu-btn{padding:6px 12px}
}
@media (max-width:360px){ .logo .wm small{display:none} }

/* ---------- Kopfbereich mit 3D-Modell ---------- */
.hero .wrap{display:grid; grid-template-columns:1fr 1.15fr; gap:clamp(24px, 4vw, 56px); align-items:center; padding-top:clamp(32px, 6vw, 72px); padding-bottom:32px}
.hero h1{font-size:clamp(2.1rem, 3.6vw, 3.3rem); line-height:1.02; font-weight:780; font-stretch:110%; letter-spacing:-.015em; margin:16px 0 20px}
.hero .lead{color:var(--muted); font-size:clamp(17px, 1.5vw, 19px); max-width:44ch}
.cta{display:flex; flex-wrap:wrap; gap:12px; margin-top:28px}
.btn{display:inline-flex; align-items:center; gap:8px; padding:13px 22px; border-radius:999px; font:600 16px var(--font); text-decoration:none; border:1.5px solid var(--ink); color:var(--ink); background:transparent; cursor:pointer}
.btn:hover{border-color:var(--teal-ink); color:var(--teal-ink)}
.btn.primary{background:var(--ink); color:#fff}
.btn.primary:hover{background:var(--teal-ink); border-color:var(--teal-ink); color:#fff}
.stage{position:relative; aspect-ratio:5/4; max-width:100%; min-height:280px; border-radius:8px; background:radial-gradient(120% 90% at 60% 40%, #fff 0%, var(--bg) 70%)}
.stage canvas{position:absolute; inset:0; width:100%; height:100%; display:block}
.stage .lbl{position:absolute; left:12px; top:10px; font-family:var(--mono); font-size:11.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted)}
.stage .fallback{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border-radius:8px; display:none}
.stage.no3d .fallback{display:block}
.stage.no3d .lbl, .stage.no3d canvas{display:none}
.replay{position:absolute; right:10px; bottom:10px; font:600 13.5px var(--font); padding:7px 14px; border-radius:999px; border:1.5px solid var(--ink); background:#fff; color:var(--ink); cursor:pointer}
.phases{list-style:none; margin:14px 0 0; padding:0; display:grid; grid-template-columns:repeat(4,1fr); gap:10px}
.phase{display:flex; flex-direction:column; gap:6px; font-size:13.5px; color:var(--muted); min-width:0}
.phase i{display:block; height:3px; background:var(--line); border-radius:2px; overflow:hidden}
.phase b{display:block; height:100%; width:0; background:var(--teal-ink)}
.phase.on{color:var(--ink); font-weight:600}
.status{margin-top:8px; font-family:var(--mono); font-size:12.5px; color:var(--muted); min-height:1.6em}
@media (max-width:900px){ .hero .wrap{grid-template-columns:1fr} }
@media (max-width:480px){ .phases{grid-template-columns:repeat(2,1fr)} }

/* ---------- Kennzahlen ---------- */
.facts{display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.facts div{padding:24px 0; display:flex; gap:16px; align-items:baseline; min-width:0}
.facts div + div{border-left:1px solid var(--line); padding-left:28px}
.facts strong{font-size:2.8rem; font-weight:800; font-stretch:120%; color:var(--teal-ink); line-height:1}
.facts span{font-size:15.5px; color:var(--muted); line-height:1.35}
@media (max-width:760px){ .facts{grid-template-columns:1fr} .facts div + div{border-left:0; border-top:1px solid var(--line); padding-left:0} }

/* ---------- Abschnitte ---------- */
.sec{padding-block:clamp(48px, 8vw, 96px)}
.sec + .sec{border-top:1px solid var(--line)}
.sec-head{display:flex; flex-direction:column; gap:12px; margin-bottom:clamp(24px, 4vw, 40px); max-width:62ch}
.sec-head h2{font-size:clamp(1.8rem, 3.4vw, 2.6rem); font-weight:770; font-stretch:110%; letter-spacing:-.01em}
.sec-head p{color:var(--muted); font-size:18px}

.groups{display:grid; grid-template-columns:repeat(2,1fr); gap:20px; align-items:start}
.group{background:var(--card); border:1px solid var(--line); border-radius:8px; padding:24px 26px 26px; min-width:0}
.group h3{font-size:19px; font-weight:720; display:flex; justify-content:space-between; gap:8px; margin-bottom:6px; padding-bottom:12px; border-bottom:2px solid var(--ink)}
.group h3 span{font-family:var(--mono); font-weight:400; color:var(--muted); font-size:13px}
.group ul{margin:0; padding:0; list-style:none; display:flex; flex-direction:column}
.group li{padding:12px 0 12px 18px; position:relative; display:flex; flex-direction:column; gap:3px}
.group li + li{border-top:1px solid var(--line)}
.group li::before{content:""; position:absolute; left:0; top:1.2em; width:8px; height:8px; background:var(--teal)}
.group li strong{font-size:16.5px; font-weight:650}
.group li span{font-size:15.5px; color:var(--muted); line-height:1.5}
.extra{margin-top:22px; color:var(--muted); font-size:15.5px; max-width:80ch}
@media (max-width:860px){ .groups{grid-template-columns:1fr} }

.steps{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,1fr); gap:28px; counter-reset:st}
.steps li{display:flex; flex-direction:column; gap:8px; min-width:0}
.steps li::before{counter-increment:st; content:"0" counter(st); font-family:var(--mono); font-size:13px; color:var(--teal-ink); border-top:2px solid var(--ink); padding-top:12px}
.steps strong{font-size:20px; font-weight:720}
.steps span{color:var(--muted); font-size:16px}
@media (max-width:860px){ .steps{grid-template-columns:repeat(2,1fr); row-gap:32px} }
@media (max-width:480px){ .steps{grid-template-columns:1fr} }

.film{margin:0 0 24px; display:flex; flex-direction:column; gap:10px}
.film video{width:100%; aspect-ratio:16/9; border-radius:8px; border:1px solid var(--line); background:var(--card); object-fit:cover}
.film figcaption{display:flex; justify-content:space-between; gap:12px; font-size:14px; color:var(--muted)}
.film button{font:600 14px var(--font); padding:6px 14px; border-radius:999px; border:1.5px solid var(--ink); background:var(--card); color:var(--ink); cursor:pointer}
.refs{display:grid; grid-template-columns:repeat(2,1fr); gap:20px}
.refs figure{margin:0; display:flex; flex-direction:column; gap:10px; min-width:0}
.refs img{width:100%; aspect-ratio:975/321; object-fit:cover; border-radius:6px}
.refs figcaption{font-size:15px; color:var(--muted)}
.refs figcaption b{color:var(--ink); font-weight:650}
@media (max-width:680px){ .refs{grid-template-columns:1fr} }

.about{display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px, 5vw, 64px)}
.about .text{display:flex; flex-direction:column; gap:16px; font-size:17.5px; max-width:60ch}
.about blockquote{margin:0; padding:24px 26px; background:var(--teal-soft); border-radius:8px; font-size:clamp(1.3rem, 2.2vw, 1.7rem); font-weight:650; font-stretch:108%; line-height:1.25; align-self:start}
.about blockquote footer{margin-top:14px; font-size:14px; font-weight:400; font-stretch:100%; color:var(--muted)}
.about ul{margin:0; padding:0; list-style:none; display:flex; flex-direction:column; border-top:1px solid var(--line)}
.about li{padding:12px 0; border-bottom:1px solid var(--line); display:flex; gap:14px; font-size:16px}
.about li b{min-width:9ch; font-weight:650}
.about li span{color:var(--muted)}
@media (max-width:860px){ .about{grid-template-columns:1fr} }

.contact{display:grid; grid-template-columns:1fr 1.2fr; gap:32px; align-items:stretch}
.addr{display:flex; flex-direction:column; gap:16px; font-size:17px}
.addr .big{font-size:clamp(1.8rem, 3.4vw, 2.5rem); font-weight:780; font-stretch:112%; font-variant-numeric:tabular-nums; color:var(--ink); text-decoration:none; line-height:1.1}
.addr .big:hover{color:var(--teal-ink)}
.addr .mail{font-size:19px; font-weight:600}
.addr dl{margin:0; display:grid; grid-template-columns:auto 1fr; gap:4px 18px; font-size:15.5px}
.addr dt{font-family:var(--mono); font-size:12px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); padding-top:3px}
.addr dd{margin:0}
.map{position:relative; margin:0; border-radius:8px; overflow:hidden; border:1px solid var(--line); min-height:280px; background:var(--card)}
.map img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center}
.map .pin{position:absolute; left:50%; top:50%; width:26px; height:26px; background:var(--teal-ink); border:3px solid #fff; border-radius:50% 50% 50% 0; transform:translate(-50%,-100%) rotate(-45deg); box-shadow:0 4px 12px rgba(0,0,0,.25)}
.map .route{position:absolute; right:12px; top:12px; background:var(--card); color:var(--ink); border:1.5px solid var(--ink); text-decoration:none; font-weight:600; font-size:14px; padding:7px 14px; border-radius:999px}
.map .route:hover{background:var(--ink); color:#fff}
.map figcaption{position:absolute; left:0; bottom:0; background:rgba(255,255,255,.88); font-size:11.5px; padding:3px 8px; color:var(--muted)}
.map figcaption a{color:var(--muted)}
@media (max-width:800px){ .contact{grid-template-columns:1fr} }

/* ---------- Fuß ---------- */
.foot{border-top:1px solid var(--line); padding-block:28px 40px; font-size:14.5px; color:var(--muted)}
.foot .wrap{display:flex; flex-wrap:wrap; gap:10px 28px; align-items:center}
.foot a{color:var(--muted)}
.foot .r{margin-left:auto; display:flex; gap:22px}
@media (max-width:600px){ .foot .r{margin-left:0} }

/* ---------- Rechtstexte ---------- */
.legal{padding-block:clamp(40px, 7vw, 80px)}
.legal article{max-width:72ch; display:flex; flex-direction:column; gap:14px}
.legal h1{font-size:clamp(2rem, 4vw, 3rem); font-weight:780; font-stretch:110%; margin-bottom:12px}
.legal h2{font-size:1.3rem; font-weight:720; margin-top:22px}
.legal h3{font-size:1.05rem; font-weight:700; margin-top:10px}
.legal ul{margin:0; padding-left:22px; display:flex; flex-direction:column; gap:4px}
.legal address{font-style:normal}
.legal .stand{font-family:var(--mono); font-size:13px; color:var(--muted)}

@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} }