:root{
  --primary:#BED600; /* HL-inspiriertes Grün */
  --primary-dark:#70831B;
  --bg:#ffffff;
  --fg:#181121;
  --muted:#4B2942;
  --alt:#f5f7ef;
  --radius:12px;
  --cta-height:64px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;color:var(--fg);background:var(--bg);line-height:1.6}
img{max-width:100%;display:block}
.container{width:min(1120px,92vw);margin:0 auto}
.skip-link{position:absolute;left:-999px}
.skip-link:focus{left:8px;top:8px;background:#000;color:#fff;padding:6px 10px;border-radius:6px}

/* Header: Brand zentriert */
.site-header{background:#fff;border-bottom:1px solid #eee;position:sticky;top:0;z-index:20}
.header-bar{display:flex;align-items:center;justify-content:center;padding:12px 0}
.brand{text-decoration:none;color:inherit;font-weight:700;font-size:1.2rem;letter-spacing:.01em}

/* Hero – vertikaler Verlauf (zartes Grün -> Weiß) */
.hero{background:linear-gradient(180deg,#f8fbe8 0%,#ffffff 100%);padding:80px 0 48px 0;text-align:center}
.hero-inner{display:grid;gap:14px;justify-items:center}
.hero h1{margin:0;font-size:clamp(28px,4vw,44px)}
.lead{color:var(--muted);font-size:clamp(16px,2.2vw,20px)}
.hero-ctas{margin-top:20px}

/* Buttons */
.btn{display:inline-block;padding:12px 22px;border-radius:8px;text-decoration:none;border:1px solid transparent;font-weight:600}
.btn.primary{background:var(--primary);color:var(--fg)}
.btn.primary:hover{background:var(--primary-dark);color:#fff}
.btn.ghost{border-color:#cbd5a7;color:var(--fg)}

/* Portrait Foto 2 */
.portrait-section{background:none;padding:32px 0 0 0;text-align:center}
.portrait-container{display:flex;justify-content:center;align-items:center}
.portrait-img{max-width:320px;width:100%;height:auto;border-radius:12px;box-shadow:0 4px 24px rgba(34,34,34,.08);background:#fff;margin:0 auto}


/* Content Sektionen */
.section{padding:56px 0}
.section.alt{background:var(--alt)}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.card{background:#fff;border:1px solid #eee;border-radius:var(--radius);padding:22px;box-shadow:0 2px 8px rgba(0,0,0,.03)}
.steps{padding-left:20px}
.faq details{border:1px solid #eee;border-radius:10px;padding:14px;background:#fff;margin-bottom:12px}

/* Kontakt-Bereich */
.contact-buttons{display:flex;gap:18px;flex-wrap:wrap;margin-top:24px}
.contact-buttons .btn{display:flex;align-items:center;justify-content:center;min-width:210px}
.contact-note{margin-top:10px;color:var(--muted)}
.btn.whatsapp{border:1px solid #25D366;color:#0e5a2b;background:#fff}
.btn.whatsapp:hover{background:#25D366;color:#fff;border-color:#25D366}

/* Sticky Footer-Leiste (mobil) */
.sticky-cta{position:fixed;left:0;right:0;bottom:0;height:calc(var(--cta-height) + var(--safe-bottom));padding-bottom:var(--safe-bottom);background:#ffffffcc;backdrop-filter:saturate(180%) blur(8px);border-top:1px solid #eaeaea;box-shadow:0 -4px 12px rgba(0,0,0,.06);display:none;z-index:1000}
.sticky-cta .cta-item{flex:1 1 0;min-width:0;height:var(--cta-height);display:flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;color:var(--fg);font-weight:700;border-right:1px solid #ececec}
.sticky-cta .cta-item:last-child{border-right:0}
.sticky-cta .cta-item.whatsapp{color:#0e5a2b}
.sticky-cta .cta-item.whatsapp svg{color:#25D366}
.sticky-cta .cta-item:active{background:#f7f9f0}
.sticky-cta .cta-item.whatsapp:active{background:#eafaf1}
.sticky-cta .cta-item:focus-visible{outline:3px solid color-mix(in srgb, var(--primary) 45%, transparent);outline-offset:2px;border-radius:6px}

/* Footer Links */
.site-footer{border-top:1px solid #eee;padding:24px 0;text-align:center;color:var(--muted)}
.footer-nav{margin-bottom:8px}
.footer-nav a{color:var(--muted);text-decoration:underline;margin:0 6px}
.footer-nav a:hover{color:var(--primary)}
.sep{color:#c0c0c0;margin:0 2px}

/* Responsive */
@media (max-width:900px){
  .grid3{grid-template-columns:1fr}
  .sticky-cta{display:flex}
  body{padding-bottom:calc(var(--cta-height) + var(--safe-bottom))}
}
@media (max-width:700px){
  .contact-buttons{flex-direction:column}
  .contact-buttons .btn{width:100%}
  .hero{padding:40px 0 24px 0}
  .portrait-img{max-width:90vw}
}
.portrait-reviews-section {
  padding: 32px 0 0 0;
  background: none;
}
.portrait-reviews-flex {
  display: flex;
  gap: 40px;
  align-items: flex-start;
  justify-content: center;
  flex-wrap: wrap;
}
.portrait-col {
  flex: 0 0 320px;
  display: flex;
  justify-content: center;
}
.portrait-img {
  max-width: 320px;
  width: 100%;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 4px 24px rgba(34,34,34,0.08);
  background: #fff;
  margin: 0 auto;
}
.reviews-col {
  flex: 1 1 320px;
  min-width: 280px;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.reviews-title {
  font-size: 1.25rem;
  color: var(--fg);
  margin-bottom: 18px;
  text-align: center;
}

/* Mobil: untereinander statt nebeneinander */
@media (max-width: 900px) {
  .portrait-reviews-flex {
    flex-direction: column;
    gap: 24px;
    align-items: center;
  }
  .reviews-col, .portrait-col {
    max-width: 100%;
    flex: 1 1 100%;
  }
  .portrait-img {
    max-width: 90vw;
  }
}