/* === Theme variables === */
:root[data-theme="light"]{
  --bg:#fcfcfd;
  --surface:#ffffff;
  --ink:#0f1220;
  --muted:#5b616e;
  --line:#e7ebef;
  --primary:#0b6e2d;
  --primary-700:#095925;
}

@media (prefers-color-scheme: dark){
  :root{ color-scheme: dark; }
  :root:not([data-theme="light"]){
    --bg:#0e1116;
    --surface:#12161d;
    --ink:#e7eaf3;
    --muted:#9aa3b2;
    --line:#1f2630;
    --primary:#19b15b;
    --primary-700:#0fa04f;
  }
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
/* Sticky footer layout */
html, body { height:100%; }
body { min-height:100vh; display:flex; flex-direction:column; }

body{ font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif; color:var(--ink); background:linear-gradient(180deg,var(--surface) 0%, var(--bg) 100%); }
/* === v16 tweak: Dark-mode with extra mid-right glow (subtle) === */


a{color:var(--primary);text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:1120px;margin:0 auto;padding:0 20px}

/* Header */
header.site{background: #127B00; color: white;border-bottom:none;position:sticky;top:0;z-index:50;box-shadow:0 6px 16px rgba(0,0,0,.06)}
header .row{display:flex;align-items:center;justify-content:space-between;padding:14px 0}
.brand-wrap{display:flex;align-items:center;gap:14px}
.brand-title{display:flex;flex-direction:column}
.brand-title h1 {
    margin: 0;
    transform: translateY(-33px);
    font-size: 25px;
    letter-spacing: .2px;
}
.brand-title .tag{color: #ffffff;font-size:12px;letter-spacing:.18em}
.logo{height:120px;width:auto;border-radius:10px;background:var(--surface);box-shadow:0 6px 18px rgba(0,0,0,.10);padding:8px}
@media (max-width:980px){.logo{height:84px}}

nav.primary{display:flex;gap:18px}
nav.primary a{
  color: #ffffff;opacity:.85;font-weight:600;padding:8px 12px;border-radius:12px;position:relative;
  transition:background .25s ease, box-shadow .25s ease, color .25s ease, opacity .25s ease
}
nav.primary a:hover{opacity:1;background:linear-gradient(135deg, rgba(11,110,45,.12), rgba(11,110,45,.22));box-shadow:0 8px 22px rgba(11,110,45,.22);text-decoration:none}



:root[data-theme="light"] 

/* Hero */
.hero{padding:64px 0 28px;background:transparent;text-align:center; max-width: 6220ch; margin: 0 auto 8px;}
.hero h2{margin:0 0 8px;font-size:43px;line-height:1.15;letter-spacing:-.5px;  text-align: center;/}
.hero h5{margin:0 0 8px;font-size:20px;line-height:1.2;text-align:center;}
.hero p{color:var(--muted);font-size:18px;margin:0 0 22px}
.hero .cta{display:inline-flex;align-items:center;gap:10px;padding:14px 20px;border-radius:12px;border:2px solid var(--primary);background:var(--primary);color:#fff;font-weight:700;box-shadow:0 14px 34px rgba(0,0,0,.08)}

.cta-primary{display:inline-flex;align-items:center;gap:10px;padding:14px 20px;border-radius:12px;border:2px solid var(--primary);background:var(--primary);color:#fff;font-weight:700;box-shadow:0 14px 34px rgba(0,0,0,.08)}

.cta-primary:hover{background:var(--primary-700);transform:translateY(-1px)}


.hero .cta:hover{background:var(--primary-700);transform:translateY(-1px)}

/* Sections */
.section{padding:44px 0}
.section .head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:14px}
.section .head h3{margin:0;font-size:22px;letter-spacing:.2px}
.section .head .sub{color:var(--muted)}

/* Services */
#services .grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;align-items:stretch}
#services .grid > .card{height:auto}
.card{
  background:var(--surface);border:2px solid rgba(11,110,45,.28);border-radius:14px;padding:14px 16px;
  box-shadow:0 12px 28px rgba(0,0,0,.08);overflow:hidden
}
.card:hover{ box-shadow:0 16px 36px rgba(0,0,0,.10) }
.card .cap{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 2px 0;padding:0;border-bottom:none}
.card h4{margin:0;font-size:18px}
.badge{font-size:11px;padding:5px 9px;border:1px solid #d6ebdd;background:#eaf6ee;border-radius:9999px;color:var(--primary)}
.reveal{overflow:hidden;max-height:0;transition:max-height .45s ease;border-top:none}
.reveal.open{max-height:320px}
.reveal p{margin:8px 0 0;color:#fff(--muted);line-height:1.6}

/* Symmetric bullets */
.dots{list-style:none;margin:8px 0 0 0;padding-left:0}
.dots li{position:relative;padding-left:18px;margin:6px 0;line-height:1.6}
.dots li::before{content:"•";position:absolute;left:0;top:0;transform:translateY(2px)}

/* Contact */
.contact{background:transparent;border-top:none;display:flex;justify-content:center;padding:24px 0;}

.contact-card{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;background:var(--surface);border:2px solid rgba(11,110,45,.28);border-radius:18px;padding:14px 22px;box-shadow:0 12px 28px rgba(0,0,0,.08);max-width:720px;width:100%;}
.email-cta{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:14px 28px;border-radius:12px;border:2px solid var(--primary);background:var(--primary);color:#fff;font-weight:800;font-size:20px;letter-spacing:0.2px;text-decoration:none;}
.email-cta:hover{background:var(--primary-700);transform:none;}

/* Footer */
main{ flex:1; } /* sticky footer support */
footer.site{background: #127B00; color: green;border-top:none;margin-top:20px;box-shadow:0 -6px 16px rgba(0,0,0,.06)}
footer .row{display:flex;align-items:center;justify-content:space-between;padding:16px 0}
footer nav{display:flex;gap:16px;flex-wrap:wrap}
footer nav a{color: #ffffff;opacity:.85;font-weight:600;padding:8px 12px;border-radius:12px;transition:background .25s, box-shadow .25s, color .25s, opacity .25s}
footer nav a:hover{opacity:1;background:linear-gradient(135deg, rgba(11,110,45,.12), rgba(11,110,45,.22));box-shadow:0 8px 22px rgba(11,110,45,.22);text-decoration:none}
small.copyright{display:flex;align-items:center;gap:8px;color: #ffffff}
small .c-symbol{color: #ffffff;font-weight:900}

/* Responsive */
@media (max-width:980px){
  #services .grid{grid-template-columns:1fr}
  .hero h2{font-size:20px}
}

/* === Green "Mehr Infos" box === */

.cta-primary svg{flex:0 0 auto}




/* Dark mode tuning to keep it vivid */



/* === Ambient Green Glow (2 spots) === */
html{
  background:
    radial-gradient(1200px 360px at 14% -10%, rgba(11,110,45,.28), transparent 72%),
    radial-gradient(760px 300px at 86% 52%, rgba(11,110,45,.20), transparent 74%),
    linear-gradient(180deg, var(--surface) 0%, var(--bg) 100%);
}
body{
  background:
    radial-gradient(1200px 360px at 14% -10%, rgba(11,110,45,.28), transparent 72%),
    radial-gradient(760px 300px at 86% 52%, rgba(11,110,45,.20), transparent 74%),
    linear-gradient(180deg, var(--surface) 0%, var(--bg) 100%);
}
/* Keep hero transparent to avoid double glow */
.hero{ background: transparent; }


/* === Ambient Green Glow (2 spots) – stronger === */
html{
  background:
    radial-gradient(1300px 400px at 14% -10%, rgba(11,110,45,.40), transparent 72%),
    radial-gradient(820px 340px at 86% 52%, rgba(11,110,45,.30), transparent 74%),
    linear-gradient(180deg, var(--surface) 0%, var(--bg) 100%);
}
body{
  background:
    radial-gradient(1300px 400px at 14% -10%, rgba(11,110,45,.40), transparent 72%),
    radial-gradient(820px 340px at 86% 52%, rgba(11,110,45,.30), transparent 74%),
    linear-gradient(180deg, var(--surface) 0%, var(--bg) 100%);
}

/* Keep hero transparent to avoid double overlay */
.hero{ background: transparent; }

/* Force white background on contact section */
#contact, .contact{
  background: #ffffff !important;
}


/* === FINAL OVERRIDE: Stronger top-left ambient glow === */
html{
  background:
    radial-gradient(1600px 460px at 14% -12%, rgba(11,110,45,.54), transparent 74%), /* stronger top-left */
    radial-gradient(820px 340px at 86% 52%, rgba(11,110,45,.30), transparent 74%),
    linear-gradient(180deg, var(--surface) 0%, var(--bg) 100%);
}
body{
  background:
    radial-gradient(1600px 460px at 14% -12%, rgba(11,110,45,.54), transparent 74%), /* stronger top-left */
    radial-gradient(820px 340px at 86% 52%, rgba(11,110,45,.30), transparent 74%),
    linear-gradient(180deg, var(--surface) 0%, var(--bg) 100%);
}
/* Keep hero clean */
.hero{ background: transparent; }
/* Keep contact white */
#contact, .contact{ background:#ffffff !important; }


/* === FINAL OVERRIDE: Two ambient glows (tuned) === */
html{
  background:
    /* Top-left: +10% to the right and larger */
    radial-gradient(1800px 520px at 24% -12%, rgba(11,110,45,.56), transparent 75%),
    /* Mid-left: moved slightly to the right with subtle grain layering */
    radial-gradient(820px 340px at 45% 52%, rgba(11,110,45,.28), transparent 74%),
    radial-gradient(720px 300px at 45% 52%, rgba(11,110,45,.10), transparent 78%),
    linear-gradient(180deg, var(--surface) 0%, var(--bg) 100%);
}
body{
  background:
    radial-gradient(1800px 520px at 24% -12%, rgba(11,110,45,.56), transparent 75%),
    radial-gradient(820px 340px at 45% 52%, rgba(11,110,45,.28), transparent 74%),
    radial-gradient(720px 300px at 45% 52%, rgba(11,110,45,.10), transparent 78%),
    linear-gradient(180deg, var(--surface) 0%, var(--bg) 100%);
}
/* Keep hero clean & contact white */
.hero{ background: transparent; }
#contact, .contact{ background:#ffffff !important; }



/* === FINAL OVERRIDE 2: Middle glow snapped to right edge === */
html{
  background:
    /* keep tuned top-left */
    radial-gradient(1800px 520px at 24% -12%, rgba(11,110,45,.56), transparent 75%),
    /* move middle glow to the far right edge, with subtle grain layering */
    radial-gradient(820px 340px at 99% 52%, rgba(11,110,45,.28), transparent 74%),
    radial-gradient(720px 300px at 99% 52%, rgba(11,110,45,.10), transparent 78%),
    linear-gradient(180deg, var(--surface) 0%, var(--bg) 100%);
}
body{
  background:
    radial-gradient(1800px 520px at 24% -12%, rgba(11,110,45,.56), transparent 75%),
    radial-gradient(820px 340px at 99% 52%, rgba(11,110,45,.28), transparent 74%),
    radial-gradient(720px 300px at 99% 52%, rgba(11,110,45,.10), transparent 78%),
    linear-gradient(180deg, var(--surface) 0%, var(--bg) 100%);
}
/* keep hero clean & contact white */
.hero{ background: transparent; }
#contact, .contact{ background:#ffffff !important; }



/* === FINAL OVERRIDE 3: Remove right glow, stronger & larger top-left only === */
html{
  background:
    radial-gradient(2000px 560px at 24% -12%, rgba(11,110,45,.60), transparent 76%),
    linear-gradient(180deg, var(--surface) 0%, var(--bg) 100%);
}
body{
  background:
    radial-gradient(2000px 560px at 24% -12%, rgba(11,110,45,.60), transparent 76%),
    linear-gradient(180deg, var(--surface) 0%, var(--bg) 100%);
}
/* Keep hero clean and contact white */
.hero{ background: transparent; }
#contact, .contact{ background:#ffffff !important; }


/* Datenschutz: Sektionen 2 & 3 mit weißem Hintergrund */
.white-section{
  background:#ffffff !important;
  background-image:none !important;
}


/* === Global rule: glow only at the very top; rest stays white === */
html, body{
  background-color:#ffffff !important;
  background-image:none !important;
}

/* Top-only glow as fixed overlay (behind content) */
body{
  position: relative;
  z-index: 0;
}
/* removed old body::before glow */

/* Ensure all content paints above the glow */
body > header,
body > main,
body > section,
body > footer,
.site, .hero, .policy, #contact {
  position: relative;
  z-index: 1;
  background: transparent;
}



/* === FINAL: Static top glow (no scroll movement) === */

/* Keep the global page white */
html{ background:#ffffff !important; }
body{ background: transparent !important; position: relative; z-index: 1; }

/* Render the glow as a FIXED overlay pinned to the top of the viewport */
/* removed fixed html::before glow */

/* Ensure all real content sits above the overlay */
body > header,
body > main,
body > section,
body > footer,
.site, .hero, .policy, #contact {
  position: relative;
  z-index: 1;
}



/* === Base white background site-wide === */
html, body{ background:#ffffff !important; background-image:none !important; }



/* === Document-top glow: scrolls away with content (not fixed) === */
body{ position: relative; z-index: 0; }
body::before{
  content:"";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 520px;  /* adjust height as desired */
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(1800px 520px at 24% -12%, rgba(11,110,45,.56), transparent 75%);
}
/* Ensure actual content sits above */
body > header,
body > main,
body > section,
body > footer,
.site, .hero, .policy, #contact {
  position: relative;
  z-index: 1;
  background: transparent;
}



/* Fix hero and contact centering and sizes */
.hero { text-align: center; }
.hero h5 { margin: 0 0 8px; font-size: 44px; line-height:1.2; text-align:center; }
.contact { display:flex; justify-content:center; padding:24px 0; }
.contact-card { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; padding:14px 22px; max-width:720px; width:100%; box-sizing:border-box; }
.email-cta { font-size:20px; padding:14px 28px; border-radius:12px; }
.contact-note { margin:6px 0 0; text-align:center; color:var(--muted); font-size:15px; max-width:680px; }
@media (max-width:600px) {
  .email-cta { font-size:16px; padding:12px 18px; }
  .hero h5 { font-size:18px; }
}


/* Footer grid layout */
.contact-footer {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  padding: 28px 0;
  align-items: start;
  color: #fff !important;

}
.contact-footer .footer-col { color: #fff !important; font-size:14px; line-height:1.45; }
.contact-footer .footer-col strong { color: #fff !important; display:block; margin-bottom:6px; }
.contact-footer a { color: #fff !important; text-decoration:underline; }
@media (max-width:600px) {
  .contact-footer { grid-template-columns: 1fr; }
}


/* Spacing adjustment between hero and contact */
.hero { padding-bottom: 24px; }
.contact { padding-top: 12px; margin-top: -10px; }


/* Tighten spacing around "Mehr Infos", hero and contact */
.hero { padding-bottom: 12px; }
.hero .container { margin-bottom: 0; }
.hero .cta { margin-top: 6px; } /* bring cta closer to h5 */
.contact { padding-top: 6px; margin-top: -6px; } /* pull contact closer to hero/cta */
.contact-card { margin-top: 0; }


/* Footer heading placement and spacing */
.contact-footer { padding: 32px 0 24px; gap:20px; }
.contact-footer .footer-col { text-align:left; }
.contact-footer .footer-col strong { display:block; margin-bottom:6px; font-size:15px; color:var(--text); }
.contact-footer .footer-col p, .contact-footer .footer-col a { margin:0 0 6px; color: #fff; font-size:14px; line-height:1.45; }
.contact-footer .footer-col a { text-decoration:none; }
.contact-footer { border-top:1px solid rgba(0,0,0,0.04); }
@media (max-width:600px) {
  .contact-footer { padding:20px 0; }
  .contact-footer .footer-col { text-align:left; }
}


/* Logo text next to image */
.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}
.logo-text {
  font-size: 20px;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
}


/* Footer text color fix */
footer, .footer, .footer * {
  color: #fff !important; opacity:.85;font-weight:600;padding:8px 12px;border-radius:12px;position:relative;
                                        transition:background .25s ease, box-shadow .25s ease, color .25s ease, opacity .25s ease
}

.hero > .container{
  max-width: 1400px;   /* oder 100% wenn du es extrem willst */
}