/*
Theme Name: MD Baudienstleistungen
Theme URI: https://md-rundumshaus.de/
Author: MD Baudienstleistungen
Description: Custom WordPress theme for MD Baudienstleistungen in Hünfelden.
Version: 1.0.2
Text Domain: md-baudienstleistungen
*/

:root{
  --ink:#171717;--muted:#686868;--paper:#f5f3ef;--white:#fff;--accent:#c78b3c;
  --line:#dedad3;--max:1180px
}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--ink);background:var(--paper);line-height:1.55}
a{color:inherit;text-decoration:none}.site-header{height:82px;display:flex;align-items:center;gap:28px;padding:0 max(24px,calc((100vw - var(--max))/2));background:rgba(245,243,239,.95);position:sticky;top:0;z-index:50;border-bottom:1px solid var(--line);backdrop-filter:blur(12px)}
.brand{display:flex;align-items:center;gap:12px;margin-right:auto}.brand-mark{display:grid;place-items:center;width:46px;height:46px;background:var(--ink);color:#fff;font-weight:900;font-size:20px;letter-spacing:-1px}.brand strong{display:block;text-transform:uppercase;letter-spacing:.05em;font-size:14px}.brand small{display:block;color:var(--muted)}
.nav{display:flex;gap:26px;font-size:14px}.nav a:hover{color:var(--accent)}.btn{display:inline-flex;justify-content:center;align-items:center;background:var(--ink);color:#fff;padding:14px 20px;font-weight:750;border:1px solid var(--ink);transition:.2s}.btn:hover{transform:translateY(-1px);opacity:.9}.btn-small{padding:10px 14px;font-size:14px}.btn-ghost{background:transparent;color:var(--ink)}.btn-light{background:#fff;color:var(--ink);border-color:#fff;width:100%}.nav-toggle{display:none;border:0;background:none;font-size:24px}
.hero{max-width:var(--max);margin:auto;min-height:650px;display:grid;grid-template-columns:1.1fr .9fr;align-items:center;gap:64px;padding:70px 24px}.eyebrow{text-transform:uppercase;letter-spacing:.15em;font-weight:800;font-size:12px;color:var(--accent)}h1,h2,h3{line-height:1.07;margin:0 0 20px}h1{font-size:clamp(44px,6vw,78px);letter-spacing:-.055em}h2{font-size:clamp(34px,4vw,54px);letter-spacing:-.04em}h3{font-size:22px;letter-spacing:-.02em}.lead{font-size:20px;color:var(--muted);max-width:650px}.hero-actions{display:flex;gap:12px;margin:34px 0}.trust-row{display:flex;flex-wrap:wrap;gap:18px;font-size:13px;color:var(--muted)}
.hero-visual{height:500px;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:8px;background:#dedbd4;padding:8px;position:relative;overflow:hidden}.tile{background:linear-gradient(135deg,#e7e4dd,#bab6ad);position:relative}.tile:after{content:"";position:absolute;inset:14%;border:1px solid rgba(255,255,255,.5);z-index:1;pointer-events:none}.tile-b,.tile-c{background:linear-gradient(135deg,#a9a59c,#ece8e0)}.tile-photo{overflow:hidden}.tile-photo img{width:100%;height:100%;display:block;object-fit:cover;transition:transform .35s ease}.tile-photo:hover img{transform:scale(1.03)}.hero-card{position:absolute;right:24px;bottom:24px;z-index:2;background:var(--ink);color:#fff;padding:22px 24px;min-width:200px}.hero-card strong{font-size:30px;display:block}.hero-card span{color:#c9c9c9;font-size:13px}
.strip{background:var(--ink);color:#fff;display:grid;grid-template-columns:repeat(3,1fr);gap:1px;padding:1px}.strip>div{padding:25px max(24px,calc((100vw - var(--max))/6));background:#202020}.strip strong,.strip span{display:block}.strip span{color:#aaa;font-size:13px;margin-top:3px}
.section{max-width:var(--max);margin:0 auto;padding:110px 24px}.section-head{max-width:720px;margin-bottom:45px}.section-head>p:last-child,.local>p:last-child{color:var(--muted);font-size:18px}.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.card{background:#fff;padding:30px;min-height:280px;border:1px solid #ebe8e2}.card .num{font-size:12px;color:var(--accent);font-weight:800}.card h3{margin-top:55px}.card p{color:var(--muted)}
.split{display:grid;grid-template-columns:1fr 1fr;max-width:none;padding:0}.panel-dark{background:var(--ink);color:#fff;padding:100px max(24px,calc((100vw - var(--max))/2));padding-right:8vw}.panel-dark p:last-child{color:#bdbdbd;font-size:18px}.light{color:#dfad68}.checklist{padding:70px max(24px,calc((100vw - var(--max))/2));padding-left:6vw;background:#ebe8e1}.checklist>div{display:flex;gap:22px;border-bottom:1px solid #cec9c0;padding:24px 0}.checklist strong{color:var(--accent)}.checklist span{display:flex;flex-direction:column}.checklist small{color:var(--muted);margin-top:4px}
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.gallery figure{margin:0}.placeholder{aspect-ratio:4/3;display:grid;place-content:center;text-align:center;background:linear-gradient(135deg,#d8d4cc,#f1eee8);border:1px solid #d4d0c8;font-weight:800;font-size:18px}.placeholder small{font-weight:500;color:var(--muted)}
.local{text-align:center;max-width:900px}.contact{max-width:none;background:#252525;color:#fff;display:grid;grid-template-columns:1.1fr .9fr;gap:60px;padding:90px max(24px,calc((100vw - var(--max))/2))}.contact p{color:#bbb;max-width:640px}.contact-box{background:#303030;padding:28px}.contact-link{display:block;padding:18px 0;border-bottom:1px solid #484848}.contact-link span,.contact-link strong{display:block}.contact-link span{font-size:12px;text-transform:uppercase;letter-spacing:.1em;color:#999}.contact-link strong{margin-top:4px}.contact-box .btn{margin-top:24px}
footer{max-width:var(--max);margin:auto;padding:35px 24px;display:flex;justify-content:space-between;gap:30px;font-size:13px;color:var(--muted)}footer strong,footer span{display:block}footer div:last-child{display:flex;gap:18px}
.legal{max-width:900px;margin:auto;padding:80px 24px}.legal h1{font-size:48px}.legal h2{font-size:26px;margin-top:35px}.legal a{text-decoration:underline}
@media(max-width:900px){
  .nav,.header-cta{display:none}.nav-toggle{display:block}.nav.open{display:flex;position:absolute;top:82px;left:0;right:0;background:var(--paper);padding:24px;flex-direction:column;border-bottom:1px solid var(--line)}
  .hero{grid-template-columns:1fr;min-height:auto}.hero-visual{height:380px;order:-1}.strip,.cards,.gallery{grid-template-columns:1fr 1fr}.split,.contact{grid-template-columns:1fr}.panel-dark,.checklist,.contact{padding-left:24px;padding-right:24px}
}
@media(max-width:600px){
  .hero{padding-top:45px;gap:35px}.hero-visual{height:300px}.hero-actions{flex-direction:column}.strip,.cards,.gallery{grid-template-columns:1fr}.section{padding-top:75px;padding-bottom:75px}.card{min-height:220px}.card h3{margin-top:35px}footer{flex-direction:column}
}

.outdoor{padding-top:90px}
.outdoor .section-head{max-width:760px}
.outdoor-split{margin-top:60px}
@media(max-width:900px){.outdoor-split{grid-template-columns:1fr}}
.real-gallery{grid-template-columns:repeat(3,1fr);align-items:start}
.project{background:#fff;border:1px solid #e3dfd7;overflow:hidden}
.project img{width:100%;height:360px;display:block;object-fit:cover;object-position:center}
.project figcaption{padding:14px 16px;font-size:14px;font-weight:700}
@media(max-width:900px){.real-gallery{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.real-gallery{grid-template-columns:1fr}.project img{height:auto;max-height:560px;object-fit:contain;background:#111}}
.outdoor-references{margin-top:70px}
.outdoor-gallery{grid-template-columns:repeat(2,1fr);margin-bottom:60px}
.outdoor-gallery .project img{height:430px}
@media(max-width:600px){.outdoor-gallery{grid-template-columns:1fr}.outdoor-gallery .project img{height:auto}}
.container-service{padding-top:90px}
.container-banner{margin-top:55px;background:#171717;color:#fff;padding:50px;display:flex;align-items:end;justify-content:space-between;gap:40px}
.container-banner>div{max-width:720px}
.container-banner p:last-child{color:#bdbdbd;font-size:17px}
.container-banner .btn{min-width:190px}
@media(max-width:700px){.container-banner{padding:32px 24px;flex-direction:column;align-items:stretch}}
.container-references{margin-top:65px}
.container-gallery{grid-template-columns:repeat(2,1fr);margin-bottom:55px}
.container-gallery .project img{height:430px}
@media(max-width:600px){.container-gallery{grid-template-columns:1fr}.container-gallery .project img{height:auto}}
.btn-whatsapp{
  background:#1f8f4e;
  border-color:#1f8f4e;
  color:#fff;
}
.btn-whatsapp:hover{opacity:.92}
.contact-whatsapp{margin-top:12px;width:100%}
.whatsapp-float{
  position:fixed;
  right:22px;
  bottom:22px;
  z-index:100;
  display:flex;
  align-items:center;
  gap:9px;
  background:#1f8f4e;
  color:#fff;
  padding:13px 17px;
  border-radius:999px;
  box-shadow:0 10px 30px rgba(0,0,0,.24);
  font-weight:800;
  font-size:14px;
}
.whatsapp-float:hover{transform:translateY(-1px)}
.wa-icon{
  width:28px;
  height:28px;
  border:2px solid currentColor;
  border-radius:50%;
  display:grid;
  place-items:center;
  font-size:16px;
  line-height:1;
}
@media(max-width:600px){
  .whatsapp-float{right:14px;bottom:14px;padding:12px 14px}
  .hero-actions .btn-whatsapp{width:100%}
}
.card{display:flex;flex-direction:column}
.card p{flex:1}
.card-wa{display:inline-block;margin-top:16px;font-size:13px;font-weight:800;color:#1f8f4e}
.card-wa:hover{text-decoration:underline}
.service-jumps{
  max-width:1180px;margin:-20px auto 40px;padding:0 24px;
  display:grid;grid-template-columns:repeat(3,1fr);gap:12px
}
.service-jumps a{
  background:#fff;border:1px solid #dedad3;padding:18px 20px;
  display:flex;flex-direction:column;transition:.2s
}
.service-jumps a:hover{transform:translateY(-2px);border-color:#aaa}
.service-jumps strong{font-size:16px}
.service-jumps span{font-size:12px;color:#686868;margin-top:3px}
.project img{transition:transform .35s ease}
.project:hover img{transform:scale(1.015)}
footer a:hover{color:#171717}
@media(max-width:700px){
  .service-jumps{grid-template-columns:1fr;margin-top:-10px}
}