/* EMS Innenausbau – Leistungsseiten */
:root{--ink:#2d3540;--ink-2:#4a5360;--muted:#6b7380;--line:#e2e5e9;--bg:#fff;--soft:#f4f5f7;--dark:#1c2129;--on-ink:#fff;--ink-hover:#161b22;--blue:#0a63b8;--link:#0a63b8;--red:#cf1717;--max:1100px;--ease:cubic-bezier(.16,1,.3,1);color-scheme:light;
--f-display:"Barlow Semi Condensed","Arial Narrow",system-ui,sans-serif;--f-text:"Barlow",system-ui,-apple-system,"Segoe UI",sans-serif}
:root[data-theme=dark]{--ink:#e6e9ee;--ink-2:#b3bbc5;--muted:#8a939f;--line:#283039;--bg:#111519;--soft:#171c22;--dark:#0b0e11;--on-ink:#111519;--ink-hover:#fff;--link:#5a9be0;color-scheme:dark}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{font-family:var(--f-text);font-size:clamp(17px,1rem + .15vw,18px);line-height:1.65;color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased;hyphens:auto;-webkit-hyphens:auto;overflow-x:clip}
img{max-width:100%;display:block;height:auto}
a{color:var(--link)}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.wrap{max-width:var(--max);margin:0 auto;padding:0 32px}
h1,h2,h3{font-family:var(--f-display);font-weight:700;line-height:1.05;letter-spacing:-.01em;hyphens:manual;-webkit-hyphens:manual;text-wrap:balance}
h1{font-size:clamp(38px,1.2rem + 4vw,76px);margin:22px 0 26px;line-height:1}
h2{font-size:clamp(28px,1.2rem + 1.6vw,44px);margin-bottom:22px}
h3{font-size:clamp(19px,1rem + .35vw,22px);line-height:1.25}
p{max-width:68ch;text-wrap:pretty;color:var(--ink-2)}
p + p{margin-top:16px}
.skip{position:absolute;left:16px;top:-60px;z-index:200;background:var(--ink);color:var(--on-ink);padding:12px 18px;font-weight:600;text-decoration:none}
.skip:focus{top:12px}
/* Kopf */
header{border-bottom:1px solid var(--line);position:sticky;top:0;z-index:60;background:var(--bg)}
.nav{height:72px;display:flex;align-items:center;gap:26px}
.nav .logo{margin-right:auto}
.nav img{height:38px;width:auto}
.logo-d{display:none}:root[data-theme=dark] .logo-l{display:none}:root[data-theme=dark] .logo-d{display:block}
.nav a.t{font-size:15px;font-weight:500;color:var(--ink-2);text-decoration:none}
.nav a.t:hover{color:var(--ink)}
.theme{width:36px;height:36px;flex:none;border-radius:50%;border:1px solid var(--line);background:none;color:var(--ink);cursor:pointer;display:grid;place-items:center}
.theme:hover{border-color:var(--ink)}
.theme svg{width:18px;height:18px}
.theme .sun{display:none}:root[data-theme=dark] .theme .sun{display:block}:root[data-theme=dark] .theme .moon{display:none}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;padding:17px 26px;font-family:var(--f-text);font-weight:600;font-size:16px;line-height:1;letter-spacing:.02em;text-decoration:none;transition:background .3s,color .3s}
.btn-primary{background:var(--ink);color:var(--on-ink)}.btn-primary:hover{background:var(--ink-hover)}
.btn-ghost{box-shadow:inset 0 0 0 1.5px var(--ink);color:var(--ink)}.btn-ghost:hover{background:var(--ink);color:var(--on-ink)}
.btn-wa{background:#1f8f4e;color:#fff}.btn-wa:hover{background:#17733e}
.btn svg{width:18px;height:18px;flex:none}
.nav .btn{padding:11px 18px;font-size:15px}
/* Einstieg */
.crumb{font-size:14px;color:var(--muted);padding-top:34px}
.crumb a{color:var(--muted);text-decoration:none}.crumb a:hover{color:var(--ink);text-decoration:underline}
.crumb span{margin:0 8px}
.eyebrow{font-size:13px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;display:flex;align-items:center;gap:14px;margin-top:44px}
.eyebrow::before{content:"";width:32px;height:2px;background:var(--blue)}
.eyebrow::after{content:"";width:32px;height:2px;background:var(--red)}
.lead{font-size:clamp(19px,1.1rem + .35vw,22px);line-height:1.5;color:var(--ink-2);max-width:36em}
.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}
.pic{margin:64px 0 0;position:relative;background:var(--soft)}
.pic img{width:100%;aspect-ratio:16/9;object-fit:cover}
.pic figcaption{position:absolute;right:0;bottom:0;background:rgba(28,33,41,.72);color:#fff;font-size:12px;letter-spacing:.16em;text-transform:uppercase;padding:7px 12px}
/* Inhalt */
section{padding:88px 0 0}
.two{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start}
.list{list-style:none;border-top:1.5px solid var(--ink)}
.list li{padding:14px 0 14px 30px;border-bottom:1px solid var(--line);position:relative;color:var(--ink);font-weight:500}
.list li::before{content:"—";position:absolute;left:0;color:var(--blue)}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;list-style:none;counter-reset:s}
.steps li{counter-increment:s;border-top:2px solid var(--ink);padding-top:18px}
.steps li::before{content:"0" counter(s);font-family:var(--f-display);font-weight:800;font-size:15px;letter-spacing:.12em;color:var(--muted);display:block;margin-bottom:10px}
.steps p{font-size:16px;margin-top:8px}
.faq{border-top:1.5px solid var(--ink)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:24px;padding:20px 0;font-family:var(--f-display);font-weight:600;font-size:clamp(19px,1rem + .45vw,23px);line-height:1.25}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:none;width:34px;height:34px;border:1.5px solid currentColor;border-radius:50%;display:grid;place-items:center;font-family:var(--f-text);font-weight:400;font-size:20px;line-height:1;transition:transform .4s var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 58px 22px 0}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.chips span,.chips a{font-size:15px;font-weight:500;padding:9px 15px;border:1px solid var(--line);color:var(--ink);text-decoration:none}
.chips a:hover{border-color:var(--ink);background:var(--ink);color:var(--on-ink)}
.svc-links{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1.5px solid var(--ink)}
.svc-links a{display:block;height:100%;padding:22px 20px 24px 0;border-bottom:1px solid var(--line);text-decoration:none;color:var(--ink)}
.svc-links strong{display:block;font-family:var(--f-display);font-weight:700;font-size:clamp(20px,1rem + .5vw,24px);line-height:1.2}
.svc-links strong::after{content:" \2192";color:var(--blue)}
.svc-links span{display:block;font-size:15.5px;color:var(--ink-2);margin-top:6px}
.svc-links a:hover strong{text-decoration:underline;text-decoration-color:var(--blue);text-underline-offset:4px}
@media (max-width:900px){.svc-links{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.svc-links{grid-template-columns:1fr}}
.cta{margin-top:96px;background:var(--soft);padding:72px 0;border-top:3px solid transparent;border-image:linear-gradient(90deg,var(--blue) 0 50%,var(--red) 50%) 1}
.cta h2{font-size:clamp(34px,1.2rem + 3vw,64px)}
.cta .note{font-size:15px;color:var(--muted);margin-top:22px}
footer{background:var(--dark);color:#9aa3ae;padding:48px 0 34px;font-size:15px}
footer .wrap{display:flex;flex-wrap:wrap;gap:14px 28px;justify-content:space-between;align-items:center}
footer nav{display:flex;flex-wrap:wrap;gap:10px 24px}
footer a{color:#9aa3ae;text-decoration:none}footer a:hover{color:#fff}
.mbar{display:none}
@media (max-width:900px){
  .two{grid-template-columns:1fr;gap:36px}
  .steps{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  .wrap{padding:0 16px}
  .nav{height:64px;gap:14px}.nav img{height:32px}
  .nav a.t{display:none}
  section{padding-top:64px}
  .pic{margin-top:44px}.pic img{aspect-ratio:4/3}
  .steps{grid-template-columns:1fr}
  .faq details p{padding-right:0}
  .actions .btn{flex:1 1 auto}
  .cta{margin-top:72px;padding:56px 0}
  footer{padding-bottom:96px}
  .mbar{display:grid;grid-template-columns:1fr 1fr;position:fixed;left:0;right:0;bottom:0;z-index:55;padding-bottom:env(safe-area-inset-bottom);background:var(--dark)}
  .mbar a{display:flex;align-items:center;justify-content:center;gap:10px;min-height:54px;font-weight:600;font-size:16px;text-decoration:none;color:#fff}
  .mbar .mb-call{background:#2d3540}
  .mbar .mb-wa{background:#1f8f4e}
  .mbar svg{width:20px;height:20px}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}

/* ---------- Social-Icons, Galerie ---------- */
.social{display:flex;gap:12px}
.social a{width:44px;height:44px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.22);border-radius:50%;color:#fff;transition:background .3s,border-color .3s,color .3s}
.social a:hover{background:#fff;border-color:#fff;color:#2d3540}
.social svg{width:20px;height:20px}
.gal{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:48px}
.gal figure{margin:0}
.gal a{display:block;overflow:hidden;background:var(--soft)}
.gal img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;transition:transform .6s}
.gal a:hover img{transform:scale(1.04)}
.gal figcaption{display:flex;justify-content:space-between;gap:12px;padding-top:10px;font-size:15px;line-height:1.4}
.gal figcaption{flex-direction:column;gap:2px}
.gal figcaption span{color:var(--muted)}
.gal-empty{margin-top:48px;border:1px dashed var(--line);padding:56px 28px;text-align:center}
.gal-empty p{max-width:34em;margin:0 auto 22px;color:var(--ink-2)}
.gal-empty .actions{justify-content:center;margin-top:0}
.gal-empty .btn svg{width:18px;height:18px}
.lb{position:fixed;inset:0;z-index:200;background:rgba(15,18,23,.94);display:none;align-items:center;justify-content:center;padding:56px 16px}
.lb.open{display:flex}
.lb img{max-width:100%;max-height:100%;object-fit:contain}
.lb p{position:absolute;left:0;right:0;bottom:16px;text-align:center;color:#fff;font-size:15px;padding:0 60px}
.lb button{position:absolute;background:none;border:0;color:#fff;font-size:34px;line-height:1;width:52px;height:52px;cursor:pointer}
.lb .lb-x{top:8px;right:8px}.lb .lb-p{left:4px;top:50%;margin-top:-26px}.lb .lb-n{right:4px;top:50%;margin-top:-26px}
@media (max-width:1000px){.gal{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.gal{grid-template-columns:1fr 1fr;gap:10px}.gal figcaption{font-size:13px;flex-direction:column;gap:2px}}
.hsoc{display:flex;gap:2px}
.hsoc a{width:34px;height:34px;display:grid;place-items:center;color:var(--ink-2)}
.hsoc a:hover{color:var(--ink)}
.hsoc svg{width:19px;height:19px}
.hsoc .h-call{display:none}
@media (max-width:760px){.hsoc{gap:0}.hsoc .h-call{display:grid}.hsoc a{width:40px;height:40px;color:var(--ink)}.hsoc svg{width:21px;height:21px}}
@media (max-width:560px){.nav .btn{display:none}}