/* === 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:var(--surface);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;font-size:22px;letter-spacing:.2px}
.brand-title .tag{color:var(--muted);font-size:12px;letter-spacing:.18em}
.logo{height:100px;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:var(--ink);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; }

.hero h2{margin:0 0 8px;font-size:44px;line-height:1.1;letter-spacing:-.5px}
.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:var(--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}

.contact-card{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px;background:var(--surface);border:2px solid rgba(11,110,45,.28);border-radius:18px;padding:20px;box-shadow:0 12px 28px rgba(0,0,0,.08)}
.email-cta{display:inline-flex;align-items:center;gap:10px;padding:14px 18px;border-radius:9999px;border:2px solid var(--primary);background:var(--primary);color:#fff;font-weight:800}
.email-cta:hover{background:var(--primary-700)}

/* Footer */
main{ flex:1; } /* sticky footer support */
footer.site{background:var(--surface);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:var(--ink);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:var(--muted)}
small .c-symbol{font-weight:900}

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

/* === 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;
}