:root{
  --green:#1e3932;      /* Hauptfarbe */
  --green-2:#24443d;    /* Nuance */
  --gold:#bfa46f;       /* Akzent */
  --ink:#0f172a;        /* Text dunkel */
  --muted:#6b7280;      /* Sekundärtext */
  --bg:#f6f7f8;         /* helles Grau */
  --card:#ffffff;
  --radius:16px;
  --shadow:0 12px 30px rgba(2,6,23,.08);
  --navH:64px;          /* Höhe der Topbar */
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:var(--ink);background:var(--bg);line-height:1.6}
a{text-decoration:none;color:inherit}
img{max-width:100%;height:auto;display:block}
.wrap{max-width:1080px;margin:auto;padding:0 24px}

/* Topbar / Navigation */
.topbar{background:var(--green);color:#fff;position:sticky;top:0;z-index:50}
.nav{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 0}
.brand{display:flex;align-items:center;gap:12px}
.brand img{height:42px;width:auto}
.nav-links{display:flex;gap:18px;align-items:center}
.nav a.link{color:#fff;opacity:.9}
.nav a.link:hover{opacity:1}
.cta-small{background:var(--gold);color:var(--green);padding:10px 14px;border-radius:999px;font-weight:600;white-space:nowrap}
.burger{display:none;gap:8px;align-items:center;border:1px solid rgba(255,255,255,.25);border-radius:10px;padding:8px 10px;background:transparent;color:#fff}
.burger span{width:18px;height:2px;background:#fff;display:block;position:relative}
.burger span:before,.burger span:after{content:"";position:absolute;left:0;right:0;height:2px;background:#fff}
.burger span:before{top:-6px}.burger span:after{top:6px}
.mobile-menu{display:none;flex-direction:column;gap:10px;padding:12px 0}
.mobile-menu a{color:#fff;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.2);padding:10px 12px;border-radius:10px}

/* Hero */
.hero{background:var(--green);color:#fff}
.hero .inner{
  min-height:calc(100svh - var(--navH));
  padding:8vh 0 10vh;
  text-align:center;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;
}
.kicker{display:inline-block;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.2);border-radius:999px;padding:6px 12px;font-size:13px}
h1{font-size:44px;line-height:1.15;margin:0}
.lead{font-size:18px;color:var(--gold);max-width:760px;margin:0 auto}
.hero-ctas{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.btn{display:inline-block;padding:14px 18px;border-radius:12px;font-weight:700}
.btn-primary{background:var(--gold);color:var(--green)}
.btn-outline{border:2px solid var(--gold);color:#fff}

/* Sections */
.section{padding:64px 0}
.section h2{font-size:32px;margin:0 0 10px;text-align:center;color:var(--green)}
.sub{color:var(--muted);text-align:center;margin:0 auto 30px;max-width:760px}

/* Cards / Grids */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.card{background:var(--card);border:1px solid #e5e7eb;border-radius:var(--radius);padding:20px;box-shadow:var(--shadow)}
.card h3{margin:8px 0 6px;font-size:18px;color:var(--green)}

/* Steps */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.step{background:var(--card);border:1px solid #e5e7eb;border-radius:var(--radius);padding:20px;position:relative;box-shadow:var(--shadow)}
.badge{position:absolute;top:-14px;left:-14px;background:var(--gold);color:var(--green);width:40px;height:40px;border-radius:999px;display:flex;align-items:center;justify-content:center;font-weight:800}

/* Kontakt */
form{max-width:760px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:12px}
form .full{grid-column:1/-1}
input,textarea{width:100%;padding:12px;border:1px solid #d1d5db;border-radius:12px;background:#fff;font:inherit}
textarea{min-height:120px}
.notice{font-size:12px;color:var(--muted)}
.submit{background:var(--green);color:#fff;border:none;padding:14px;border-radius:12px;font-weight:700}

/* Sticky Contact (professionell) */
.sticky {
  position:fixed;
  bottom:20px;
  right:20px;
  z-index:50;
  display:flex;
  flex-direction:column;
  gap:12px;
}

.sticky a {
  display:flex;
  align-items:center;
  gap:8px;
  padding:10px 16px;
  border-radius:999px;
  font-size:15px;
  font-weight:600;
  text-decoration:none;
  box-shadow:0 6px 18px rgba(0,0,0,.2);
  transition:all .25s ease;
}

/* Anrufen-Button */
.sticky a.call {
  background:var(--gold);
  color:var(--green);
  border:1px solid var(--gold);
}
.sticky a.call:hover {
  background:#d8bc85;
}

/* WhatsApp-Button */
.sticky a.wa {
  background:var(--green);
  color:#fff;
  border:1px solid var(--green);
}
.sticky a.wa:hover {
  background:#264d45;
}

/* Icons */
.sticky a svg {
  width:18px;
  height:18px;
  flex-shrink:0;
}


/* Footer */
footer{background:#12221e;color:#cbd5e1;padding:28px 0}
.footergrid{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
footer a{color:var(--gold)}

/* === Animations === */
@keyframes fadeUp {
  from {opacity:0; transform:translateY(20px);}
  to {opacity:1; transform:translateY(0);}
}
.reveal-up {
  opacity:0;
  transform:translateY(20px);
  transition:all .6s ease;
}
.reveal-up.animate {
  opacity:1;
  transform:translateY(0);
}

/* Responsive */
@media (max-width:900px){
  h1{font-size:34px}
  .cards,.steps{grid-template-columns:1fr}
  form{grid-template-columns:1fr}
  .hero .inner{min-height:calc(100svh - var(--navH));padding:10vh 0}
  .btn{width:100%}
  .cta-small{display:none}
  .nav-links{display:none}
  .burger{display:flex}
  .mobile-menu.show{display:flex}
}
@media (max-width:480px){
  h1{font-size:28px}
  .wrap{padding:0 16px}
  .badge{top:-12px;left:-12px;width:34px;height:34px}
}
@media (min-width:901px){
  .hero .inner{min-height:80vh;}
}

/* FAQ */
.faq .sub{margin-bottom:22px}
.faq-list{max-width:760px;margin:0 auto;display:flex;flex-direction:column;gap:12px}
.faq-item{
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:14px;
  box-shadow:var(--shadow);
  overflow:hidden;
}
.faq-q{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:16px 18px;
  background:#fff;
  border:none;
  cursor:pointer;
  font:inherit;
  color:var(--green);
  font-weight:700;
  text-align:left;
}
.faq-q svg{
  width:18px;height:18px;
  stroke:currentColor; fill:none; stroke-width:2;
  transition:transform .25s ease;
}
.faq-q[aria-expanded="true"] svg{transform:rotate(180deg)}
.faq-a{
  padding:0 18px 0;
  color:#334155;
  line-height:1.65;
  max-height:0;
  overflow:hidden;
  transition:max-height .28s ease, padding .28s ease;
  border-top:1px solid #eef2f6;
}
.faq-item.open .faq-a{
  padding:12px 18px 16px;
  max-height:300px; /* reicht für 2–3 Absätze; bei Bedarf erhöhen */
}
@media (max-width:480px){
  .faq-q{padding:14px 16px}
  .faq-a{padding:0 16px}
}
/* Promo-Bar */
.promo-bar{
  background: var(--gold);
  color: var(--green);
  text-align: center;
  padding: 8px 12px;
  font-weight: 600;
  font-size: 15px;
  position: relative;
  z-index: 60;
}

.promo-bar a{
  color: var(--green);
  font-weight: 700;
  text-decoration: none;
  display: inline-block;
  animation: promoPulse 6s infinite ease-in-out;
}

.promo-bar a:hover{
  text-decoration: underline;
}

/* Dezente Rotation/Wippen-Animation */
@keyframes promoPulse {
  0%, 90%, 100% { transform: rotate(0deg); }
  92% { transform: rotate(1.5deg); }
  96% { transform: rotate(-1.5deg); }
}

html {
  scroll-behavior: smooth;
}
/* Mobile-Menü (Animation verbessert) */
.mobile-menu {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0 0; /* kein padding im geschlossenen Zustand */
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.35s ease, opacity 0.35s ease, padding 0.35s ease;
}

.mobile-menu.show {
  padding: 12px 0;
  max-height: 400px; /* ausreichend für Links */
  opacity: 1;
}