:root{
  --green-900:#2d5e22;
  --green-800:#3a6e2b;
  --green-700:#447a32;
  --green-600:#4d8839;
  --green-500:#5a9b43;
  --green-100:#e9f2e8;
  --bg:#f3f6f2;
  --text:#1f2a1e;
  --muted:#6b746c;
  --radius:18px;
  --shadow:0 12px 30px rgba(0,0,0,.08);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:'Nunito',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text);
  background:var(--bg);
  line-height:1.55;
}

.container{width:min(1100px, 92%); margin-inline:auto}
a{color:inherit; text-decoration:none}
img{max-width:100%; display:block}

.btn{
  display:inline-block;
  padding:.9rem 1.25rem;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.08);
  background:#ffffffcf;
  backdrop-filter:saturate(180%) blur(6px);
  font-weight:800;
  transition:transform .12s ease, background .2s ease, box-shadow .2s ease;
  box-shadow:var(--shadow);
}
.btn:hover{transform:translateY(-1px)}
.btn-sm{padding:.6rem 1rem; font-weight:700}
.btn-primary{background:var(--green-600); color:#fff; border-color:transparent}
.btn-primary:hover{background:var(--green-700)}
.btn-ghost{background:transparent; border-color:#fff; color:#fff}
.btn-ghost:hover{background:#ffffff2a}

.site-header .nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: space-between; /* verteilt gleichmäßig */
  align-items: center;
  background-color: #f4f6f1;
  padding: 0.8rem 3rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  z-index: 1000;
}
.brand{display:flex; align-items:center; gap:.5rem; font-weight:900; letter-spacing:.2px}
.brand-icon{font-size:1.3rem}
.brand-name{font-size:1.05rem}
.nav-links{display:flex; gap:1rem; align-items:center; list-style:none; margin:0; padding:0}
.nav-toggle{display:none; font-size:1.4rem; background:none; border:none; cursor:pointer}

.hero {
  position: relative;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.hero-bg {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: saturate(95%) contrast(1.05);
  z-index: -2;
}
.hero-overlay {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, rgba(20,50,10,.55), rgba(20,50,10,.45));
  z-index: -1;
}
.hero-overlay{position:absolute; inset:0; background:linear-gradient(180deg, rgba(16,32,12,.7), rgba(16,32,12,.5));}
.hero-content{position:relative; color:#fff; text-align:center; padding-bottom:4rem}
.hero h1{font-size:clamp(2.2rem, 4.8vw, 4.5rem); margin:0 0 1rem; font-weight:900}
.hero p{font-size:1.2rem; margin:0 0 1.6rem; opacity:.95}
.hero-actions{display:flex; gap:1rem; justify-content:center; flex-wrap:wrap}
.scroll-indicator {
  position: absolute;
  left: 50%;
  bottom: -5.8rem;  /* closer to bottom as requested */
  transform: translateX(-50%);
  opacity: .9;
  animation: float 2s ease-in-out infinite;
  z-index: 5;
}
@keyframes float {
  0%, 100% { transform: translate(-50%, 0); }
  50% { transform: translate(-50%, -4px); }
}
@keyframes float {
  0%, 100% { transform: translate(-50%, 0); }
  50% { transform: translate(-50%, -6px); }
}
.scroll-indicator .mouse{display:inline-block; width:26px; height:42px; border:2px solid #fff; border-radius:16px; position:relative}
.scroll-indicator .mouse::after{content:''; width:4px; height:8px; background:#fff; border-radius:2px; position:absolute; left:50%; transform:translateX(-50%); top:6px; animation:wheel 1.8s infinite}
@keyframes wheel{0%{opacity:0; transform:translate(-50%, 0)} 30%{opacity:1} 100%{opacity:0; transform:translate(-50%, 14px)}}

.section{padding:4.5rem 0}
.section-head{ text-align:center; margin-bottom:2rem}
.section-head h2{font-size:2.2rem; color:var(--green-900); margin:.2rem 0 0}
.section-head p{color:var(--muted); margin:.4rem 0 0}

.grid.cards{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:1.2rem;
}
.card{
  background:#fff; border-radius:var(--radius); padding:1.4rem;
  box-shadow:var(--shadow);
  border:1px solid #eaeaea;
  transition:transform .12s ease, box-shadow .2s ease;
}
.card:hover{transform:translateY(-2px); box-shadow:0 18px 38px rgba(0,0,0,.12)}
.card .icon{width:44px; height:44px; display:grid; place-items:center; background:var(--green-100); color:var(--green-700); border-radius:999px; margin-bottom:.8rem}
.card h3{margin:.2rem 0 .4rem}

.about{
  display:grid; grid-template-columns:1.1fr .9fr; gap:2rem; align-items:center;
}
.about-media img{border-radius:24px; box-shadow:var(--shadow)}
.checks{list-style:none; padding:0; margin:1rem 0 0; display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:.6rem 1.2rem}
.checks li{display:flex; gap:.5rem; align-items:center}
.checks svg{color:var(--green-600)}

.gallery{display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem}
.gallery figure{margin:0}
.gallery img{border-radius:18px; box-shadow:var(--shadow); object-fit:cover; width:100%; height:260px}

.contact{display:grid; grid-template-columns:1.2fr .8fr; gap:1.4rem; align-items:start}
.contact-form{background:#fff; padding:1.2rem; border-radius:var(--radius); box-shadow:var(--shadow); border:1px solid #eee}
.contact-form .row{display:grid; grid-template-columns:1fr 1fr; gap:.8rem}
.contact-form input, .contact-form textarea{
  width:100%; padding:.9rem 1rem; border-radius:12px; border:1px solid #e7e7e7; font:inherit;
  background:#fafafa;
}
.contact-form textarea{resize:vertical}
.uploader{display:block; margin:.6rem 0 1rem; padding:1rem; border:2px dashed #e0e0e0; border-radius:12px; text-align:center; color:var(--muted); cursor:pointer}
.uploader input{display:none}

.contact-cards{display:grid; gap:.8rem}
.info{display:flex; gap:.8rem; align-items:flex-start; background:#fff; padding:1rem; border-radius:16px; border:1px solid #eee; box-shadow:var(--shadow)}
.info-icon{width:42px; height:42px; display:grid; place-items:center; border-radius:999px; background:var(--green-100); color:var(--green-700)}

.site-footer{background:var(--green-800); color:#eaf3ea; padding:2.2rem 0 1.2rem; margin-top:2rem}
.footer-grid{display:grid; grid-template-columns:2fr 1fr 1fr; gap:1rem}
.footer-grid h5{margin:.2rem 0 .6rem}
.links{list-style:none; padding:0; margin:0; display:grid; gap:.35rem}
.copy{border-top:1px solid rgba(255,255,255,.18); text-align:center; padding-top:1rem; margin-top:1.2rem; font-size:.95rem; color:#d5e3d5}

.muted{color:var(--muted)}

@media (max-width: 900px){
  .grid.cards{grid-template-columns:1fr 1fr}
  .about{grid-template-columns:1fr}
  .gallery{grid-template-columns:1fr; }
  .gallery img{height:220px}
  .contact{grid-template-columns:1fr}
  .contact-form .row{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  .nav-toggle{display:block}
  .nav-links{position:absolute; right:0; top:100%; background:#fff; border-radius:12px; padding:.6rem; box-shadow:var(--shadow); display:none; flex-direction:column}
  .nav-links a{padding:.5rem .8rem}
  .nav.open .nav-links{display:flex}
  .btn-ghost{border-color:rgba(255,255,255,.7)}
}


/* Inline icon in buttons */
.btn .icon-inline {
  display:inline-grid;
  place-items:center;
  width:1.15em; height:1.15em;
  margin-right:.55rem;
  line-height:1;
}
.btn .icon-inline svg{display:block; width:100%; height:100%}


/* Reference gallery hover cards */
.ref-card{position:relative; overflow:hidden; border-radius:18px; box-shadow:var(--shadow)}
.ref-card img{transition:transform .6s ease, filter .6s ease; height:260px; width:100%; object-fit:cover}
.ref-card::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(20,50,10,.40) 18%, rgba(20,50,10,0) 62%);
  opacity:0; transition:opacity .35s ease;
 z-index:1;}
.ref-card .caption{
  position:absolute; left:0; right:0; bottom:0; padding:1rem 1rem 1.2rem;
  color:#fff; transform:translateY(18px); opacity:0;
  transition:transform .35s ease, opacity .35s ease;
 z-index:2; color:#fff; text-shadow:0 2px 8px rgba(0,0,0,.35), 0 1px 2px rgba(0,0,0,.6);}
.ref-card .caption h4{margin:0 0 .25rem; font-size:1.05rem}
.ref-card .caption p{margin:.1rem 0 0; font-size:.95rem; opacity:.95}

.ref-card:hover img{transform:scale(1.05); filter:saturate(110%)}
.ref-card:hover::after{opacity:1}
.ref-card:hover .caption{transform:translateY(0); opacity:1}

/* reduced motion */
@media (prefers-reduced-motion: reduce){
  .ref-card img, .ref-card .caption, .ref-card::after{transition:none z-index:1;}
}


/* ===== Hero on-load animations ===== */
.hero-bg{will-change: transform;
  animation: kb-zoom 16s ease-out both;
}
.hero-overlay{
  opacity:0;
  animation: overlay-in .9s ease-out .15s forwards;
}
.reveal-up{opacity:0; transform: translateY(12px);}
.reveal-fade{opacity:0}
.reveal-stagger{opacity:0; transform: translateY(10px);}

/* Animated state applied by JS on page load */
.is-ready .reveal-up{animation: up-in .65s cubic-bezier(.2,.7,.2,1) .10s forwards}
.is-ready .reveal-fade{animation: fade-in .7s ease .28s forwards}
.is-ready .reveal-stagger{animation: up-in .65s cubic-bezier(.2,.7,.2,1) .38s forwards}

/* Keyframes */
@keyframes up-in {
  from {opacity:0; transform: translateY(12px)}
  to   {opacity:1; transform: translateY(0)}
}
@keyframes fade-in {
  from {opacity:0}
  to   {opacity:1}
}
@keyframes overlay-in {
  from {opacity:0}
  to   {opacity:.98}
}
@keyframes kb-zoom {
  from {transform: scale(1) translateZ(0)}
  to   {transform: scale(1.06) translateZ(0)}
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .hero-bg, .hero-overlay, .reveal-up, .reveal-fade, .reveal-stagger{animation:none !important; opacity:1 !important; transform:none !important;}
}


/* tint rules reset */

/* tint rules reset */




/* tint rules reset */
/* removed adjacent suppression */

/* ensure content is above the pseudo-elements */



/* ===== Scroll-reveal for sections (e.g., Über uns) ===== */
.reveal-scroll{opacity:0; transform: translateY(16px)}
.reveal-scroll.is-visible{animation: up-in .6s cubic-bezier(.2,.7,.2,1) .05s forwards}
@media (prefers-reduced-motion: reduce){
  .reveal-scroll{opacity:1 !important; transform:none !important; animation:none !important}
}




.tinted::before,

/* Top: fade from white -> transparent inside the section */

/* Bottom: fade from white -> transparent inside the section (inverted) */

/* Keep content above overlays */






/* ===== Alternating full-width section backgrounds ===== */
.section{ 
  position: relative;
  background:#fff; /* default white */
}

/* mirror the background beyond the container to full viewport width */
.section::before{
  content:'';
  position:absolute;
  inset:0;
  left:50%;
  transform:translateX(-50%);
  width:100vw;
  height:100%;
  background:inherit;
  z-index:-1;
}

/* light grey/green tint for alternating sections */
.section.alt{
  background: var(--bg); /* e.g., #f3f6f2 */
}

/* optional subtle separator shadow for depth (looks professional, very light) */
.section + .section::before{
  box-shadow: 0 -10px 30px rgba(0,0,0,.02);
}


/* ===== Footer social buttons ===== */
.footer-social{
  margin-top:1rem;
  display:flex;
  flex-wrap:wrap;
  gap:.6rem;
}
.btn-social{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  padding:.55rem 1rem;
  border-radius:999px;
  font-weight:700;
  color:#fff;
  text-decoration:none;
  font-size:.95rem;
  transition:transform .15s ease, box-shadow .2s ease;
}
.btn-social i{font-size:1.1rem}
.btn-social:hover{transform:translateY(-2px); box-shadow:0 6px 12px rgba(0,0,0,.15)}
.btn-social.whatsapp{background:#25D366}
.btn-social.facebook{background:#1877F2}
@media(max-width:600px){
  .footer-social{flex-direction:column; align-items:flex-start}
}
.about-image img {
  width: 450px;
  height: 520px;
  object-fit: cover;
  border-radius: 50%;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2);
  transition: transform 0.35s ease, box-shadow 0.35s ease;
  transform: scale(1);
}

.about-image img:hover {
  transform: scale(1.05) translateY(-4px); /* leicht vergrößern + schweben */
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.25);
}
.logo {
  height: 38px;
  width: auto;
  object-fit: contain;
}

.footer-logo {
  width: 100px;
  margin-bottom: .8rem;
}
.cookie-banner {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: min(95%, 600px);
  background: #ffffff;
  padding: 1.2rem 1.6rem;
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.16);
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: center;
  z-index: 9999;
  font-size: .95rem;
  border: 1px solid #e9e9e9;
}

.cookie-banner p {
  margin: 0;
  color: var(--text);
  flex: 1;
}
.cookie-banner a {
  color: var(--green-700);
  text-decoration: underline;
}

.cookie-banner button {
  white-space: nowrap;
  padding: .6rem 1.2rem;
}
@media (max-width: 600px) {
  .grid.cards {
    grid-template-columns: 1fr !important;
  }
}
@media (max-width: 600px) {
  body {
    font-size: 15px;
  }

  .site-header .nav {
    padding: 0.6rem 1rem;
  }

  .brand-name {
    font-size: 0.95rem;
  }

  .hero {
    height: 80vh;
  }

  .hero-content {
    padding: 0 1rem 3rem;
  }

  .hero p {
    font-size: 1rem;
  }

  .hero-actions {
    flex-direction: column;
    gap: 0.75rem;
  }

  .section {
    padding: 3rem 0;
  }

  .card {
    padding: 1.4rem;
  }

  .about-image img {
    width: 260px;
    height: 260px;
    margin: 0 auto;
  }

  .checks {
    grid-template-columns: 1fr;
  }

  .gallery img {
    height: 200px;
  }

  .contact {
    gap: 1rem;
  }

  .contact-form {
    padding: 1rem;
  }

  .info {
    padding: 0.9rem;
  }

  .footer-grid {
    gap: 1.4rem;
  }
}
@media (max-width: 600px) {
  .hero {
    height: auto !important;
    padding: 80px 0 40px !important;
  }

  .hero .hero-content h1 {
    font-size: 1.9rem !important;
    line-height: 2.3rem !important;
  }
}