/* CSS-Reset (leicht) */
*,*::before,*::after{box-sizing:border-box}
html:focus-within{scroll-behavior:smooth}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;line-height:1.6;color:var(--fg);background:var(--bg)}
img,svg,video{max-width:100%;display:block}
a{color:inherit}
:root{
  --bg:#0f130f; /* Dark default, auto-switches with prefers-color-scheme */
  --fg:#ecf1e8;
  --muted:#c9d6c3;
  --accent:#77b255;
  --accent-2:#2e7d32;
  --card:#151a15;
  --border:#2a332a;
  --shadow:0 10px 30px rgba(0,0,0,.25);
  --radius:18px;
  --space:clamp(1rem,1.2vw,1.25rem);
  --space-lg:clamp(1.5rem,2.5vw,2rem);
  --max:1200px;
}
@media (prefers-color-scheme: light){
  :root{--bg:#f4f7f2;--fg:#0e190e;--muted:#3a513a;--card:#ffffff;--border:#dfe8d9;--shadow:0 10px 30px rgba(16,24,16,.08)}
}
/* Fokus für Tastaturbedienung */
:focus{outline:3px solid var(--accent);outline-offset:3px}

/* Layout */
.container{max-width:var(--max);margin-inline:auto;padding:0 var(--space)}
.stack{display:grid;gap:var(--space)}
.grid{display:grid;gap:var(--space)}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:900px){.grid-3{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.grid-3,.grid-2{grid-template-columns:1fr}}

/* Header */
.skip{position:absolute;left:-999px;top:auto}
.skip:focus{left:var(--space);top:var(--space);background:var(--card);padding:.6rem 1rem;border-radius:10px;z-index:9999;box-shadow:var(--shadow)}
header{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--bg),transparent 10%);backdrop-filter:saturate(140%) blur(8px);border-bottom:1px solid var(--border)}
.nav{display:flex;align-items:center;justify-content:space-between;padding:.8rem 0}
.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none}
.brand img{width:40px;height:40px;border-radius:10px}
.brand strong{font-weight:800;font-size:1.05rem}
nav ul{display:flex;gap:1rem;list-style:none;margin:0;padding:0}
nav a{padding:.5rem .7rem;border-radius:10px;text-decoration:none;color:var(--fg)}
nav a:hover{background:color-mix(in srgb,var(--fg),transparent 90%)}
.menu-btn{display:none;background:transparent;border:1px solid var(--border);padding:.4rem .6rem;border-radius:10px}
@media (max-width:900px){
  nav ul{display:none}
  .menu-btn{display:inline-flex;align-items:center;gap:.4rem;color:var(--fg)}
  .mobile-menu{
    display:block;               /* statt display:none */
    position:absolute;left:0;right:0;top:100%;
    background:var(--card);
    border-bottom:1px solid var(--border);
    z-index:999;                 /* über dem Inhalt */
  }
  .mobile-menu[hidden]{display:none} /* nur ausblenden, wenn [hidden] gesetzt ist */
  .mobile-menu ul{list-style:none;margin:0;padding:.6rem}
  .mobile-menu a{display:block;padding:.8rem 1rem;border-radius:10px}
  .mobile-menu a:hover{background:color-mix(in srgb,var(--fg),transparent 90%)}
}

/* Hero mit Slider */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.hero-slides {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.hero-slides .slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 1s ease-in-out;
}
.hero-slides .slide.active {
  opacity: 1;
}
.hero::after {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.55),rgba(0,0,0,.25),rgba(0,0,0,.55));
  z-index:-1;
}
.hero-inner {
  padding:clamp(4rem,8vw,8rem) 0;
  color:#fff;
  position: relative;
  z-index: 1;
}
.kicker{letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:#eaffd1;opacity:.9}
h1{font-size:clamp(2rem,4.6vw,3.6rem);line-height:1.1;margin:.4rem 0 1rem}
.lead{font-size:clamp(1.05rem,1.5vw,1.25rem);max-width:52ch;color:#f0ffe7}
.cta-row{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.3rem}
.btn{display:inline-flex;align-items:center;gap:.5rem;border:1px solid var(--border);background:var(--accent-2);color:white;padding:.85rem 1.1rem;border-radius:999px;text-decoration:none;font-weight:700;box-shadow:var(--shadow)}
.btn.secondary{background:transparent;color:#fff;border-color:rgba(255,255,255,.35)}

/* Hero Dots */
.hero-dots {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
  z-index: 5;
}
.hero-dots .dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(255,255,255,0.6);
  cursor: pointer;
  transition: background 0.3s;
}
.hero-dots .dot.active {
  background: var(--accent-2);
}

/* Hero Pfeile */
.hero-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0,0,0,0.4);
  color: #fff;
  border: none;
  padding: 0.6rem;
  border-radius: 50%;
  cursor: pointer;
  z-index: 5;
  transition: background 0.3s, transform 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-arrow svg {
  width: 24px;
  height: 24px;
}
.hero-arrow:hover {
  background: rgba(0,0,0,0.7);
  transform: translateY(-50%) scale(1.1);
}
.hero-arrow.prev {left: 20px;}
.hero-arrow.next {right: 20px;}

@media (max-width:640px){
  .hero-arrow {padding:0.4rem;}
  .hero-arrow svg {width:20px;height:20px;}
  .hero-arrow.prev {left:10px;}
  .hero-arrow.next {right:10px;}
  .hero-dots {bottom:10px;gap:6px;}
  .hero-dots .dot {width:10px;height:10px;}
}

/* Sections */
section{padding:clamp(2.5rem,6vw,4rem) 0}
section .heading{display:flex;align-items:end;justify-content:space-between;gap:1rem;margin-bottom:1rem}
h2{font-size:clamp(1.6rem,3vw,2.2rem);margin:0}
.sub{color:var(--muted)}

.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}
.card .p{padding:1rem}
.badge{display:inline-block;font-weight:700;padding:.2rem .6rem;border-radius:8px;background:color-mix(in srgb,var(--accent),transparent 75%);border:1px solid color-mix(in srgb,var(--accent),transparent 50%);color:var(--accent-2)}
.price{font-weight:800}

.prod-img{aspect-ratio:4/3;object-fit:cover;width:100%}

/* Hofladen block */
.info{display:grid;grid-template-columns:1.2fr .8fr;gap:var(--space)}
@media (max-width:900px){.info{grid-template-columns:1fr}}
.list{margin:0;padding:0;list-style:none}
.list li{padding:.6rem 0;border-bottom:1px dashed var(--border)}

/* Newsletter */
form{display:grid;gap:.6rem}
input,textarea{background:var(--bg);color:var(--fg);border:1px solid var(--border);padding:.8rem;border-radius:12px}
input::placeholder,textarea::placeholder{color:color-mix(in srgb,var(--muted),transparent 30%)}
.help{font-size:.9rem;color:var(--muted)}

/* Footer */
footer{border-top:1px solid var(--border);padding:2rem 0;background:
  radial-gradient(80% 140% at 10% 0%, color-mix(in srgb,var(--accent),transparent 85%), transparent),
  radial-gradient(80% 120% at 90% 0%, color-mix(in srgb,var(--accent-2),transparent 90%), transparent)}
.foot{display:flex;flex-wrap:wrap;gap:1rem;align-items:center;justify-content:space-between}
.small{font-size:.92rem;color:var(--muted)}

/* Motion reduction */
@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}
}
.map-embed{
  position: relative;
  width: 100%;
  aspect-ratio: 16/10; /* passt sich responsiv an */
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  background: var(--bg);
  margin: 1rem;
}
.map-embed iframe{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* === Hero Slider Overrides & Styles === */
.hero::before{ background:none !important; } /* remove static bg to reveal slides */
.hero{ position:relative; isolation:isolate; overflow:hidden; }
.hero-slides{ position:absolute; inset:0; z-index:-2; }
.hero-slides .slide{
  position:absolute; inset:0;
  background-size:cover; background-position:center;
  opacity:0; transition:opacity .8s ease;
  will-change:opacity;
}
.hero-slides .slide.active{ opacity:1; }

/* keep existing gradient overlay */
.hero::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.55),rgba(0,0,0,.25),rgba(0,0,0,.55)); z-index:-1;
}

/* Arrows */
.hero-arrow{
  position:absolute; top:50%; transform:translateY(-50%);
  background:rgba(0,0,0,.35); border:1px solid var(--border);
  width:44px; height:44px; border-radius:999px;
  display:grid; place-items:center; cursor:pointer; color:#fff;
  box-shadow:var(--shadow);
}
.hero-arrow:hover{ background:rgba(0,0,0,.5); }
.hero-arrow.prev{ left:clamp(.5rem,1.5vw,1rem); }
.hero-arrow.next{ right:clamp(.5rem,1.5vw,1rem); }
.hero-arrow svg{ width:22px; height:22px; }

/* Dots */
.hero-dots{
  position:absolute; left:50%; bottom:clamp(.8rem,2vw,1.2rem);
  transform:translateX(-50%); display:flex; gap:.5rem;
}
.hero-dots .dot{
  width:10px; height:10px; border-radius:999px;
  border:1px solid rgba(255,255,255,.6); background:rgba(255,255,255,.25);
  cursor:pointer;
}
.hero-dots .dot.active{ background:#fff; }

/* === Map Embed === */
.map-embed{
  position: relative;
  width: 100%;
  aspect-ratio: 16/10;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  background: var(--bg);
  margin: 1rem 0;
}
.map-embed iframe{
  position: absolute; inset: 0;
  width: 100%; height: 100%; border: 0;
}
.prod-img {
  aspect-ratio: 4/3;
  object-fit: cover;
  width: 100%;
  height: auto;
  border-radius: var(--radius);
}

@media (max-width: 480px) {
  .lead {
    font-size: 0.95rem; /* etwas kleiner für Smartphones */
    line-height: 1.5;   /* bessere Lesbarkeit */
	}

    .lead, .kicker, h1, .cta-row { padding: 10px; }
    .hero-arrow { visibility: hidden}
}