:root{
  --bg:#f8fbef;
  --brand:#B0CB1F;
  --brand-d:#6fa30b;
  --text:#1f2937;
  --muted:#64748b;
  --card:#ffffff;
  --border:#e5e7eb;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; font:16px/1.6 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text); background:var(--bg);
}
.container{max-width:1100px; margin:0 auto; padding:0 18px}
/* Header immer über der Leaflet-Map halten */
header {
  position: sticky;      /* falls noch nicht gesetzt */
  top: 0;
  z-index: 10000;        /* > Leaflet-Panes (200–800) */
  background: #fff;      /* wichtig, damit nichts „durchscheint“ */
}

/* Falls dein mobiles Dropdown über Content liegen soll */
body.menu-open header nav {
  z-index: 10001;
}

header{
  position:sticky; top:0; backdrop-filter:saturate(180%) blur(8px);
  background:rgba(255,255,255,.8); border-bottom:1px solid var(--border); z-index:50;
}
.nav{display:flex; align-items:center; justify-content:space-between; padding:10px 0}
.nav .brand{display:flex; align-items:center; gap:12px; text-decoration:none; color:inherit}
.nav img{height:42px}
.nav a{color:var(--text); text-decoration:none; margin-left:16px; font-weight:600}
.nav a:hover{color:var(--brand-d)}

.hero{padding:64px 0}
.hero .wrap{display:grid; grid-template-columns:1.2fr 1fr; gap:32px; align-items:center}
.hero h1{font-size:40px; line-height:1.2; margin:0 0 12px}
.hero p{color:var(--muted); margin:0 0 16px}
.cta{display:inline-block; padding:12px 18px; border-radius:12px; background:var(--brand); color:#fff; text-decoration:none; font-weight:700}
.cta:hover{background:var(--brand-d)}

.section{padding:48px 0}
.section h2{font-size:28px; margin:0 0 18px}
.grid{display:grid; gap:18px; grid-template-columns:repeat(3, 1fr)}
.card{background:var(--card); border:1px solid var(--border); border-radius:16px; padding:18px}
.card h3{margin:0 0 8px; font-size:20px}
.card p{margin:0; color:var(--muted)}
.gallery{display:grid; gap:12px; grid-template-columns:repeat(5, 1fr)}
.gallery img{width:100%; height:140px; object-fit:cover; border-radius:12px; border:1px solid var(--border)}

.info{display:grid; gap:24px; grid-template-columns:1.3fr 1fr}
.info .box{background:var(--card); border:1px solid var(--border); border-radius:16px; padding:18px}

footer{padding:28px 0; border-top:1px solid var(--border); color:var(--muted); font-size:14px}

@media(max-width:900px){
  .hero .wrap{grid-template-columns:1fr}
  .grid{grid-template-columns:1fr 1fr}
  .gallery{grid-template-columns:repeat(3, 1fr)}
  .info{grid-template-columns:1fr}
}
@media(max-width:600px){
  .grid{grid-template-columns:1fr}
  .gallery{grid-template-columns:repeat(2, 1fr)}
  .hero h1{font-size:30px}
}

/* Burger menu */
.burger{display:none; background:transparent; border:0; padding:8px; margin-right:8px; cursor:pointer}
.burger span{display:block; width:26px; height:3px; margin:5px 0; background:#1f2937; transition:transform .25s ease, opacity .25s ease}
@media(max-width:900px){
  .burger{display:block}
  header .nav{position:relative}
  header .nav nav{position:absolute; right:8px; top:56px; background:#fff; border:1px solid var(--border); border-radius:12px; padding:12px; box-shadow:0 8px 30px rgba(0,0,0,.08); transform-origin: top right; transform:scale(.95); opacity:0; visibility:hidden; transition:opacity .18s ease, transform .18s ease}
  header .nav nav a{display:block; margin:8px 6px}
  body.menu-open header .nav nav{opacity:1; visibility:visible; transform:scale(1)}
  body.menu-open .burger span:nth-child(1){transform:translateY(8px) rotate(45deg)}
  body.menu-open .burger span:nth-child(2){opacity:0}
  body.menu-open .burger span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
}

/* Modal */
.modal{position:fixed; inset:0; display:grid; place-items:center; opacity:0; visibility:hidden; transition:opacity .2s ease; z-index:100}
.modal.open{opacity:1; visibility:visible}
.modal__backdrop{position:absolute; inset:0; background:rgba(0,0,0,.45)}
.modal__dialog{position:relative; width:min(860px, 92vw); max-height:86vh; overflow:auto; background:#fff; border-radius:16px; border:1px solid var(--border); padding:24px; transform:translateY(12px); animation:slideIn .22s ease both}
.modal__close{position:absolute; right:10px; top:8px; width:36px; height:36px; border-radius:50%; border:0; background:#f1f5f9; cursor:pointer; font-size:24px; line-height:36px}
@keyframes slideIn{from{opacity:.8; transform:translateY(18px)} to{opacity:1; transform:translateY(0)}}

/* Brand: logo only in header */
.nav .brand strong{display:none}

/* Minor: hero spacing when header shrinks on mobile */
header{backdrop-filter:saturate(180%) blur(8px)}

/* Ensure single display of service name */
.hero h1{margin-top:6px}

#map{min-height:320px}


/* --- Map Z-Index Fix: sorgt dafür, dass die Karte NIE über dem Sticky-Header liegt --- */
.leaflet-container,
.leaflet-pane,
.leaflet-top,
.leaflet-bottom {
  z-index: 0 !important;
}