/* ========= Farben & Grundwerte ========= */
:root{
  --bg:#f6f8f5;
  --fg:#0f120e;
  --muted:#4d5a4d;
  --brand:#2f5d2f;
  --brand-2:#7aa279;
  --card:#ffffff;
  --accent:#1f3f1f;
  --topbar-h:64px;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Arial,sans-serif;
  line-height:1.6;
  color:var(--fg);
  background:var(--bg);
}

/* ========= HEADER / TOPBAR ========= */
.topbar{
  position:sticky; top:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  height:var(--topbar-h);
  padding:10px 18px;
  background:#fff;
  border-bottom:1px solid #e6e9e6;
  box-shadow:0 2px 10px rgba(0,0,0,.05);
}
.brand{
  display:flex; gap:10px; align-items:center;
  text-decoration:none; color:var(--fg); font-weight:700;
}
.brand img{max-height:42px; width:auto;}
.nav a{
  margin-left:14px; text-decoration:none;
  color:var(--fg); font-weight:600;
}
.nav a.cta{
  padding:8px 12px; border-radius:8px;
  background:var(--brand); color:#fff;
}

/* Menü-Button standardmäßig ausblenden */
.menu-toggle{ display:none !important; }

/* ========= HERO ========= */
.hero{
  background: radial-gradient(80% 80% at 50% 20%, #cfe3cf 0%, #e7efe7 60%, #f6f8f5 100%);
  padding:80px 18px 60px;
  text-align:center;
}
.hero h1{
  font-size:clamp(28px,4vw,44px);
  margin:.5rem 0;
}
.hero h1 span{font-weight:600; color:var(--brand);}
.hero p{
  max-width:720px;
  margin:0 auto 18px;
  color:var(--muted);
}
.btns{display:flex; gap:12px; justify-content:center; flex-wrap:wrap;}
.btn{
  display:inline-block; padding:12px 18px;
  border-radius:10px; text-decoration:none;
  font-weight:700; border:2px solid var(--brand);
}
.btn.primary{background:var(--brand); color:#fff;}
.btn.ghost{background:transparent; color:var(--brand);}

/* ========= SECTION LAYOUT ========= */
.section{padding:56px 18px; max-width:1100px; margin:0 auto;}
.section.alt{background:#eef3ee; border-top:1px solid #e1e7e1; border-bottom:1px solid #e1e7e1;}

.grid{display:grid; gap:18px;}
.cards{grid-template-columns:repeat(auto-fit,minmax(240px,1fr));}
.card{
  background:var(--card); padding:16px;
  border-radius:12px; border:1px solid #e6ece6;
  box-shadow:0 1px 0 rgba(0,0,0,.02);
}
.card h3{margin-top:6px;}
.hint{color:var(--muted); font-size:.9rem; margin-top:12px;}

/* ========= SPALTEN ========= */
.cols{display:grid; gap:24px; grid-template-columns:1.3fr .7fr; align-items:center;}
.figure{display:flex; justify-content:center;}
.figure img{max-width:360px; width:100%; height:auto;}

.ticks{padding-left:18px;}
.ticks li{margin:.3rem 0;}

/* ========= KONTAKT ========= */
.contact .cols{grid-template-columns:1fr 1fr;}
.contact-form{
  background:var(--card); padding:16px;
  border-radius:12px; border:1px solid #e6ece6;
}
.contact-form label{display:block; font-weight:600; margin:10px 0 6px;}
.contact-form input,
.contact-form textarea{
  width:100%; padding:12px;
  border-radius:10px; border:1px solid #cfd8cf;
  font:inherit; background:#fff;
}
.contact-form .tiny{font-size:.8rem; color:var(--muted);}
.contact-data{
  background:#fff; border:1px solid #e6ece6;
  border-radius:12px; padding:16px;
}
.contact-data ul{list-style:none; padding:0; margin:0;}
.contact-data li{margin:.4rem 0;}

/* ========= RECHTLICHES ========= */
.legal details{margin:8px 0;}
.legal summary{cursor:pointer; font-weight:700;}

/* ========= FLOAT BUTTONS ========= */
.float-btn{
  position:fixed; right:16px;
  width:48px; height:48px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  text-decoration:none; font-size:22px;
  border:2px solid var(--brand); background:#fff;
  box-shadow:0 8px 24px rgba(0,0,0,.12);
}
.float-btn.phone{bottom:88px;}
.float-btn.wa{bottom:28px;}

/* ========= FOOTER ========= */
.footer{padding:24px 18px; text-align:center; color:var(--muted);}

/* ========= MOBILE MENU ========= */
@media (max-width:860px){
  .cols{grid-template-columns:1fr;}
  .contact .cols{grid-template-columns:1fr;}

  .menu-toggle{
    display:flex !important;
    align-items:center; justify-content:center;
    width:44px; height:44px;
    border:0; background:transparent;
    cursor:pointer; border-radius:10px;
  }
  .menu-toggle:focus-visible{
    outline:2px solid var(--brand); outline-offset:2px;
  }
  .menu-toggle .bar{
    display:block; width:24px; height:2px;
    background:var(--fg); margin:4px 0;
    transition:transform .25s, opacity .25s;
  }
  .menu-toggle[aria-expanded="true"] .bar:nth-child(1){
    transform:translateY(6px) rotate(45deg);
  }
  .menu-toggle[aria-expanded="true"] .bar:nth-child(2){
    opacity:0;
  }
  .menu-toggle[aria-expanded="true"] .bar:nth-child(3){
    transform:translateY(-6px) rotate(-45deg);
  }

  .nav{
    position:fixed; left:0; right:0; top:var(--topbar-h);
    background:#fff; border-top:1px solid #e6e9e6;
    display:none; flex-direction:column; padding:6px 0;
    box-shadow:0 12px 24px rgba(0,0,0,.08);
    z-index:99;
  }
  .nav.open{display:flex;}
  .nav a{
    display:block; padding:14px 18px;
    font-weight:700; text-decoration:none; color:var(--fg);
    border-top:1px solid #f1f3f1;
  }
  .nav a.cta{
    margin:6px 12px; text-align:center;
    border-radius:10px; background:var(--brand);
    color:#fff; border:2px solid var(--brand);
  }
}

/* ========= REFERENZEN ========= */
.refs-grid{
  display:grid;
  gap:24px;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
}
.ref{
  background:#fff;
  border:1px solid #e6ece6;
  border-radius:14px;
  padding:14px;
  text-align:center;
  box-shadow:0 2px 8px rgba(0,0,0,.05);
  transition:transform .2s ease, box-shadow .2s ease;
}
.ref:hover{
  transform:scale(1.02);
  box-shadow:0 8px 20px rgba(0,0,0,.1);
}
.ref img{
  width:100%;
  height:auto;
  max-height:260px;
  object-fit:cover;
  border-radius:10px;
  cursor:zoom-in;
  transition:transform .2s ease, box-shadow .2s ease;
  cursor: pointer;                 /* zeigt an, dass Bild klickbar ist */
  pointer-events: auto;            /* sorgt dafür, dass der Klick durchgeht */
  touch-action: manipulation;      /* verhindert Safari-Touch-Delay */
  -webkit-user-select: none;       /* kein versehentliches Markieren */
  -webkit-tap-highlight-color: transparent; /* kein grauer Touch-Effekt */
}
.ref figcaption{
  margin-top:10px;
  font-weight:600;
  color:var(--fg);
}

/* ======= Mobile-Optimierung (iPhone-fix) ======= */
@media (max-width:900px){
  .refs-grid{
    gap:16px;
    grid-template-columns:1fr;
  }
  .ref{
    max-width:360px;
    margin:0 auto;
    padding:12px;
  }
  .ref img{
    width:100%;
    height:auto;
    max-height:180px;
    object-fit:cover;
    border-radius:8px;
  }
}
@media (max-width:480px){
  .ref{
    max-width:320px;
  }
  .ref img{
    max-height:140px;
  }
}

/* ========= LIGHTBOX ========= */
.lightbox{
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  background:rgba(0,0,0,0.85);
  z-index:9999;
  padding:20px;
}
.lightbox.open{display:flex;}
.lightbox-inner{
  position:relative;
  max-width:90vw;
  max-height:90vh;
  display:flex;
  flex-direction:column;
  align-items:center;
}
.lb-img{
  max-width:100%;
  max-height:80vh;
  border-radius:10px;
  box-shadow:0 8px 40px rgba(0,0,0,0.5);
}
.lb-caption{
  color:#fff;
  margin-top:12px;
  text-align:center;
  font-weight:500;
}
.lb-close{
  position:absolute;
  top:-10px;
  right:-10px;
  background:#fff;
  color:#000;
  border:none;
  font-size:28px;
  border-radius:50%;
  cursor:pointer;
  width:36px;
  height:36px;
  box-shadow:0 4px 12px rgba(0,0,0,0.4);
}
.lb-close:hover{background:#eee;}
/* ======= iPhone / Safari-Fix ======= */
@supports (-webkit-touch-callout: none) {
  @media (max-device-width: 1024px) {
    .refs-grid {
      grid-template-columns: 1fr !important;
      justify-items: center;
    }
    .ref {
      width: 90% !important;
      max-width: 340px !important;
      margin: 0 auto !important;
    }
    .ref img {
      width: 100% !important;
      height: auto !important;
      max-height: 160px !important;
      object-fit: cover !important;
      border-radius: 8px;
    }
  }
}