/* ============================================================
   Bauernhof am Heidengraben – Design-System
   Abgeleitet aus dem freigegebenen Konzept "Am Keltenwall":
   Stein/Moos-Palette, Hügellandschaft als Leitmotiv, Serife für
   Headlines + Monospace für Labels/Nav als strukturelle Signatur.
   Schriften bewusst systemeigen (Georgia/Courier New) — kein
   Webfont-Laden, kein Cookie-/DSGVO-Thema.
   ============================================================ */

:root{
  --stone: #3a3a34;
  --stone-dark: #2a2a25;
  --stone-light: #46463e;
  --moss: #6e7a52;
  --moss-dim: #4f5a3a;
  --moss-light: #9aa67a;
  --wheat: #e9e2cf;
  --wheat-dim: rgba(233,226,207,0.72);
  --iron: #8a5a3a;
  --line: rgba(233,226,207,0.16);
  --radius: 10px;
  --maxw: 1100px;
  --font-serif: Georgia, "Iowan Old Style", "Palatino Linotype", serif;
  --font-sans: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Courier New", Courier, monospace;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--stone-dark);
  color:var(--wheat);
  font-family:var(--font-serif);
  line-height:1.6;
}
a{color:inherit;}
img{max-width:100%; display:block;}
h1,h2,h3{font-family:var(--font-serif); font-weight:700; margin:0;}
.container{max-width:var(--maxw); margin:0 auto; padding:0 1.6rem;}

.skip-link{
  position:absolute; left:-999px; top:0; z-index:100;
  background:var(--moss); color:var(--stone-dark);
  padding:0.8rem 1.2rem; font-family:var(--font-sans); font-weight:700;
  text-decoration:none;
}
.skip-link:focus{left:1rem; top:1rem;}

.label{
  font-family:var(--font-mono);
  letter-spacing:0.1em;
  text-transform:uppercase;
  font-size:0.78rem;
  color:var(--moss);
}

/* ---------- Header: Hügellandschaft statt Standard-Leiste ---------- */
.hof-landschaft{color:var(--moss); line-height:0;}
.hof-landschaft svg{display:block; width:100%; height:auto; max-height:128px;}

.wall-top{position:relative; padding:0.7rem 1.6rem 0.9rem; max-width:var(--maxw); margin:0 auto;}
.brandrow{display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:0.8rem;}
.brand{font-size:1.65rem; font-weight:700; text-decoration:none;}
.brand .label{display:block; margin-top:0.3rem; font-size:0.85rem;}

nav.offset{display:flex; gap:1.6rem; padding-top:0.3rem;}
nav.offset a{
  text-decoration:none; font-family:var(--font-mono); font-size:0.95rem;
  letter-spacing:0.06em; text-transform:uppercase;
  border-bottom:1px solid transparent; padding-bottom:0.2rem;
}
nav.offset a:hover, nav.offset a[aria-current="page"]{border-bottom-color:var(--moss);}

.nav-toggle{
  display:none;
  background:transparent; border:1px solid var(--line); color:var(--wheat);
  font-family:var(--font-mono); text-transform:uppercase; letter-spacing:0.06em;
  font-size:0.85rem; padding:0.5rem 0.9rem; border-radius:999px; cursor:pointer;
  align-items:center; gap:0.5rem;
}
.nav-toggle__bars{display:flex; flex-direction:column; gap:3px;}
.nav-toggle__bars span{display:block; width:16px; height:2px; background:var(--wheat);}

.nav-overlay{
  position:fixed; inset:0; z-index:50;
  background:var(--stone-dark);
  display:flex; flex-direction:column;
  padding:1.6rem;
  transform:translateY(-100%);
  transition:transform 0.25s ease;
}
.nav-overlay.is-open{transform:translateY(0);}
.nav-overlay__top{display:flex; justify-content:space-between; align-items:center; margin-bottom:2rem;}
.nav-overlay__close{
  background:none; border:1px solid var(--line); color:var(--wheat);
  font-family:var(--font-mono); padding:0.5rem 0.9rem; border-radius:999px; cursor:pointer;
}
.nav-overlay nav{display:flex; flex-direction:column; gap:1.4rem;}
.nav-overlay nav a{
  font-family:var(--font-serif); font-size:1.6rem; text-decoration:none; color:var(--wheat);
}
.nav-overlay__footer{margin-top:auto; font-family:var(--font-sans); font-size:0.95rem; color:var(--wheat-dim);}
.nav-overlay__footer a{text-decoration:underline;}

@media (max-width:1023px){
  nav.offset{display:none;}
  .nav-toggle{display:inline-flex;}
}
@media (min-width:1024px){
  .nav-overlay{display:none;}
}

/* ---------- Sections / Typografie ---------- */
section{padding:3.5rem 1.6rem 4.5rem; max-width:var(--maxw); margin:0 auto;}
.hero{padding-top:2.2rem;}
.hero-split{display:grid; grid-template-columns:1.1fr 0.9fr; gap:2.6rem; align-items:center;}
.hero-split .placeholder{margin-top:0; min-height:320px;}
@media (max-width:760px){.hero-split{grid-template-columns:1fr;}}
h1{font-size:clamp(2rem, 5vw, 3.2rem); line-height:1.15; margin:0 0 1.3rem; max-width:18ch;}
.page-title{font-size:clamp(1.8rem, 4.5vw, 2.8rem); line-height:1.18; margin:0 0 1rem; max-width:20ch;}
.lead{font-size:1.1rem; max-width:56ch; opacity:0.88; margin:0 0 2rem; font-family:var(--font-sans);}
h2{font-size:1.7rem; margin-bottom:0.4rem;}
section p{font-family:var(--font-sans); font-size:0.98rem;}

/* ---------- Angebots-Banner: groß, zentriert, eigener Blickfang ---------- */
.angebot{
  display:flex; flex-direction:column; align-items:center; gap:0.5rem; text-align:center;
  background:var(--stone); border:1px solid var(--moss-dim); border-top:5px solid var(--iron);
  padding:2.4rem 2.2rem; font-family:var(--font-sans);
  max-width:620px; margin:2.2rem auto 0;
}
.angebot .label{color:var(--iron); font-size:0.85rem;}
.angebot b{display:block; font-size:1.9rem; font-family:var(--font-serif); margin:0.3rem 0 0.1rem; line-height:1.2;}
.angebot small{opacity:0.75; font-size:1.05rem;}
.angebot[hidden]{display:none;}

/* ---------- Angebots-Popup: kleiner, dezenter Hinweis unten rechts ---------- */
.angebot-popup{
  position:fixed; right:1.1rem; bottom:1.1rem; z-index:40;
  background:var(--stone); border:1px solid var(--moss-dim); border-left:4px solid var(--iron);
  padding:0.9rem 2rem 0.9rem 1.1rem; max-width:240px;
  box-shadow:0 10px 24px rgba(0,0,0,0.35); font-family:var(--font-sans);
}
.angebot-popup[hidden]{display:none;}
.angebot-popup .label{font-size:0.7rem; color:var(--iron);}
.angebot-popup b{display:block; font-size:0.95rem; font-family:var(--font-serif); margin:0.25rem 0 0.1rem;}
.angebot-popup small{opacity:0.75; font-size:0.82rem;}
.angebot-popup__close{
  position:absolute; top:0.35rem; right:0.5rem; background:none; border:none; color:var(--wheat-dim);
  cursor:pointer; font-size:0.85rem; line-height:1; padding:0.2rem;
}
.angebot-popup__close:hover{color:var(--wheat);}
@media (max-width:480px){.angebot-popup{left:1.1rem; right:1.1rem; max-width:none;}}

/* ---------- Platzhalter für fehlendes Kundenbildmaterial ---------- */
.placeholder{
  border:1.5px dashed var(--line); border-radius:2px; padding:2.6rem 1.2rem;
  text-align:center; color:rgba(233,226,207,0.5); font-size:0.85rem;
  margin-top:2.2rem; min-height:220px; display:flex; align-items:center; justify-content:center;
  font-family:var(--font-sans);
}

.photo{
  margin-top:2.2rem; border-radius:4px; overflow:hidden; border:1px solid var(--line);
}
.photo img{display:block; width:100%; height:100%; object-fit:cover; aspect-ratio:4/3;}
.hero-split .photo, .story .photo{margin-top:0;}

/* ---------- Ringwall-Trennlinie ---------- */
.ringwall{position:relative; margin:0; max-width:var(--maxw); margin-left:auto; margin-right:auto; padding:0 1.6rem;}
.ringwall svg{display:block; width:100%; height:40px;}

/* ---------- Produkt-Grid ---------- */
.grid-produkte{display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; margin-top:1.8rem; font-family:var(--font-sans);}
@media (max-width:760px){.grid-produkte{grid-template-columns:1fr 1fr;}}
@media (max-width:480px){.grid-produkte{grid-template-columns:1fr;}}
.produkt{border-top:2px solid var(--moss); padding-top:0.9rem;}
.produkt h3{margin:0 0 0.4rem; font-size:1.02rem; font-family:var(--font-serif);}
.produkt p{margin:0; font-size:0.9rem; opacity:0.8;}

/* ---------- Immer-offen-Block ---------- */
.immer-offen{
  background:var(--stone); border-radius:var(--radius); border:1px solid var(--line);
  padding:2.2rem 2rem; display:grid; grid-template-columns:auto 1fr; gap:1.8rem; align-items:center;
  font-family:var(--font-sans);
}
.immer-offen .clock{
  width:72px; height:72px; border-radius:50%; border:2px solid var(--moss);
  display:flex; align-items:center; justify-content:center; font-size:1.3rem; color:var(--moss);
  font-weight:800; font-family:var(--font-mono); flex-shrink:0;
}
.immer-offen h3{margin:0 0 0.4rem; font-size:1.3rem; font-family:var(--font-serif);}
.immer-offen p{margin:0; opacity:0.85;}

/* ---------- Story / zweispaltig ---------- */
.story{display:grid; grid-template-columns:0.95fr 1.05fr; gap:2.8rem; align-items:start;}
@media (max-width:640px){.story{grid-template-columns:1fr;}}
.story h2{font-size:1.6rem; margin:0 0 1rem;}

/* ---------- Steckbrief-Karte (Kontakt/Anfahrt) ---------- */
.fundkarte{background:var(--stone); border:1px solid var(--line); padding:1.6rem 1.8rem; font-family:var(--font-sans);}
.fundkarte .label{margin-bottom:0.6rem;}
.fundkarte p{margin:0.25rem 0; font-size:0.95rem;}
.fundkarte .addr{margin-top:0.9rem; font-weight:700;}

.split{display:grid; grid-template-columns:1fr 1fr; gap:2.6rem; align-items:start;}
@media (max-width:760px){.split{grid-template-columns:1fr;}}
.map-frame{width:100%; height:320px; border:0; border-radius:var(--radius); filter:grayscale(0.3) invert(0.92) contrast(0.9);}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:0.5rem;
  font-family:var(--font-sans); font-weight:700; font-size:0.95rem;
  padding:0.8rem 1.5rem; border-radius:999px; text-decoration:none; cursor:pointer; border:1px solid transparent;
}
.btn-moss{background:var(--moss); color:var(--stone-dark);}
.btn-moss:hover{background:var(--moss-light);}
.btn-outline{border-color:var(--wheat); color:var(--wheat); background:transparent;}
.btn-outline:hover{background:var(--wheat); color:var(--stone-dark);}

/* ---------- Formular (Kontaktseite) ---------- */
.form-grid{display:grid; gap:1.1rem; max-width:560px; font-family:var(--font-sans);}
.form-grid label{display:block; font-size:0.85rem; margin-bottom:0.35rem; color:var(--wheat-dim);}
.form-grid input, .form-grid textarea{
  width:100%; background:var(--stone); border:1px solid var(--line); color:var(--wheat);
  padding:0.75rem 0.9rem; border-radius:6px; font-family:var(--font-sans); font-size:0.95rem;
}
.form-grid input:focus, .form-grid textarea:focus{outline:2px solid var(--moss); outline-offset:1px;}
.form-note{font-size:0.82rem; color:var(--wheat-dim); margin-top:0.3rem;}
.form-status{margin-top:1rem; font-size:0.92rem;}
.form-status[data-state="ok"]{color:var(--moss-light);}
.form-status[data-state="error"]{color:#d98c6a;}
.hp-field{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden;}

/* ---------- Tabellen (Öffnungszeiten etc.) ---------- */
table.hours-table{width:100%; border-collapse:collapse; font-family:var(--font-sans); font-size:0.95rem;}
table.hours-table th, table.hours-table td{text-align:left; padding:0.4rem 0; border-bottom:1px solid var(--line); font-weight:400;}

/* ---------- Footer ---------- */
footer.site-footer{background:var(--stone); border-top:1px solid var(--line); font-family:var(--font-sans);}
.footer-grid{display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:2.4rem; padding:3rem 1.6rem 2rem; max-width:var(--maxw); margin:0 auto;}
@media (max-width:700px){.footer-grid{grid-template-columns:1fr;}}
.footer-brand{font-family:var(--font-serif); font-size:1.2rem; font-weight:700; margin-bottom:0.6rem;}
.footer-col h5{font-family:var(--font-mono); text-transform:uppercase; letter-spacing:0.08em; font-size:0.75rem; color:var(--moss); margin:0 0 0.7rem;}
.footer-col ul{list-style:none; margin:0; padding:0;}
.footer-col li{margin-bottom:0.4rem; font-size:0.92rem;}
.footer-col a{text-decoration:none;}
.footer-col a:hover{text-decoration:underline;}
.footer-bottom{
  border-top:1px solid var(--line); padding:1.2rem 1.6rem; max-width:var(--maxw); margin:0 auto;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:0.8rem; font-size:0.82rem; opacity:0.75;
}
.footer-bottom .links{display:flex; gap:1.2rem; flex-wrap:wrap;}
.footer-bottom a{text-decoration:underline;}

/* ---------- Rechtstexte (Impressum/Datenschutz) ---------- */
.legal h2{margin-top:2rem; font-size:1.3rem;}
.legal p, .legal li{font-family:var(--font-sans); font-size:0.95rem;}
.legal .todo{
  background:rgba(138,90,58,0.18); border:1px dashed var(--iron); color:var(--wheat);
  padding:0.9rem 1.1rem; font-size:0.88rem; border-radius:6px; margin:0.6rem 0;
}