/* Schriften (lokal, keine Verbindung zu Google) */
@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 500 600; font-display: swap; src: url(fonts/cormorant-garamond.woff2) format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-style: italic; font-weight: 500; font-display: swap; src: url(fonts/cormorant-garamond-italic.woff2) format("woff2"); }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 400 700; font-display: swap; src: url(fonts/manrope.woff2) format("woff2"); }

/* Farbwelten: hell und dunkel */
.lt  { --bg: #f1efe8; --fg: #15211a; --mut: #4d564f; --rule: #d6d2c4; --gold: #735618; --btnbg: #15211a; --btnfg: #f1efe8; }
.lt2 { --bg: #e6e2d4; --fg: #15211a; --mut: #4a5249; --rule: #cfc9b6; --gold: #735618; --btnbg: #15211a; --btnfg: #f1efe8; }
.dk  { --bg: #15211a; --fg: #ece6d6; --mut: #b9b4a5; --rule: #2f3d33; --gold: #d4b56a; --btnbg: #d4b56a; --btnfg: #15211a; }
.dk2 { --bg: #1c2b22; --fg: #ece6d6; --mut: #b9b4a5; --rule: #2f3d33; --gold: #d4b56a; --btnbg: #d4b56a; --btnfg: #15211a; }
.lt, .lt2, .dk, .dk2 { background: var(--bg); color: var(--fg); }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: #15211a; font-family: Manrope, system-ui, sans-serif; font-size: 17px; line-height: 1.65; }
img { display: block; max-width: 100%; height: auto; }
a { color: var(--fg); }
a:hover { color: var(--gold); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
h1, h2, h3, p, dl, dd, ul { margin: 0; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

.w { max-width: 1180px; margin: 0 auto; padding: 0 28px; }
.s { font-family: "Cormorant Garamond", Georgia, serif; font-weight: 500; line-height: 1.05; }
.h2 { margin-bottom: 24px; font-size: clamp(40px, 4.6vw, 64px); }
.mut { color: var(--mut); }
.gold { color: var(--gold); }
.center { text-align: center; }
.skip { position: absolute; left: -9999px; top: 0; z-index: 100; background: #ffffff; color: #15211a; padding: 10px 16px; }
.skip:focus { left: 16px; top: 16px; }

.btn { display: inline-block; padding: 14px 28px; text-decoration: none; font-weight: 700; font-size: 15px; letter-spacing: .04em; background: var(--btnbg); color: var(--btnfg); transition: filter .15s; }
.btn:hover { color: var(--btnfg); filter: brightness(1.08); }
.btn-o, .more-link { display: inline-block; padding: 13px 26px; text-decoration: none; font-weight: 700; font-size: 15px; letter-spacing: .04em; color: var(--fg);
  box-shadow: inset 0 0 0 1px var(--gold); transition: background-color .15s, color .15s; }
.btn-o:hover, .more-link:hover { background: var(--gold); color: var(--bg); }

/* Navigation */
.nav { display: flex; gap: 28px; font-size: 15px; font-weight: 500; }
.nav a { text-decoration: none; }

/* Hero */
.hero { min-height: min(100svh, 860px); display: flex; flex-direction: column; justify-content: space-between; text-align: center;
  background-image: linear-gradient(180deg, rgba(21,33,26,.55) 0%, rgba(21,33,26,.35) 45%, #15211a 100%), url(img/hero.webp);
  background-size: cover; background-position: 50% 55%; }
.hero > .w { width: 100%; }
.hero .hero-top { display: flex; justify-content: space-between; align-items: center; padding-top: 24px; text-align: left; }
/* Logo einfarbig hell: per Filter statt CSS-Maske, damit es auch lokal (file://) und auf jedem Server angezeigt wird */
.logo-light { display: block; width: 130px; height: auto; filter: brightness(0) invert(93%) sepia(10%) saturate(260%) hue-rotate(10deg); }
.hero h1 { margin: 0 auto; font-size: clamp(48px, 7vw, 108px); max-width: 14ch; }
.hero p { font-size: 19px; max-width: 46ch; margin: 24px auto 32px; color: #d9d3c3; }
.hero .w:last-child { padding-bottom: 80px; }
@media (max-width: 520px) { .hero .w:last-child { padding-bottom: 56px; } }

/* Leiste beim Scrollen */
.bar { position: fixed; inset: 0 0 auto 0; z-index: 50; background: #ffffff; color: #15211a; box-shadow: 0 1px 0 #d6d2c4;
  transform: translateY(-100%); transition: transform .25s ease; }
.bar.on { transform: none; }
.bar .w { display: flex; justify-content: space-between; align-items: center; gap: 24px; height: 76px; }
.bar img { height: 52px; width: auto; }
.bar-right { display: flex; align-items: center; gap: 20px; }
.bar-tel { font-weight: 700; text-decoration: none; }
.bar .btn { padding: 11px 20px; }
@media (prefers-reduced-motion: reduce) { .bar { transition: none; } }

/* Layouts */
section { padding: 110px 0; }
.g2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 72px; align-items: center; }
.g4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; }
.g4 img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.g4 h3 { margin: 20px 0 8px; font-size: 28px; }
.g4 p { font-size: 15px; }
.cover { width: 100%; object-fit: cover; }
.tall { aspect-ratio: 4 / 5; }

.about { padding-top: 40px; }
.about p + p { margin-top: 1em; }
.about .sig { margin-top: 1.4em; font-size: 26px; font-style: italic; }
.tiere { padding-top: 110px; }
.tiere .more { margin-top: 44px; }

.menu { list-style: none; padding: 0; margin-bottom: 26px; border-top: 1px solid var(--rule); }
.menu li { padding: 14px 0; border-bottom: 1px solid var(--rule); font-family: "Cormorant Garamond", Georgia, serif; font-size: 27px; line-height: 1.2; }

.sk { padding: 120px 28px; display: flex; justify-content: center;
  background-image: linear-gradient(rgba(21,33,26,.45), rgba(21,33,26,.45)), url(img/obstgarten.webp); background-size: cover; background-position: 50% 55%; }
.sk-card { width: 100%; max-width: 640px; padding: 56px 64px 60px; text-align: center; }
.sk-card img { width: 220px; margin: 0 auto 36px; }
.sk-card h2 { margin-bottom: 16px; font-size: clamp(34px, 3.4vw, 46px); line-height: 1.08; }
.sk-card p { margin-bottom: 32px; }

.facts { margin: 26px 0 34px; }
.facts div { padding: 16px 0; border-top: 1px solid var(--rule); }
.facts div:last-child { border-bottom: 1px solid var(--rule); }
.facts dt { font-size: 24px; }
.facts dd { margin-top: 2px; }

.nat { display: grid; grid-template-columns: 1fr 1.1fr 1fr; gap: 28px; align-items: center; }
.nat img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }

.kontakt { padding-bottom: 40px; }
.kontakt h2 { margin-bottom: 28px; font-size: clamp(48px, 6vw, 92px); }
.lines { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 40px; font-size: clamp(24px, 2.6vw, 34px); }
.lines a { text-decoration: none; }
.kontakt address { font-style: normal; margin-top: 28px; }
.foot { margin-top: 80px; padding-top: 22px; border-top: 1px solid var(--rule); display: flex; flex-wrap: wrap; gap: 8px 22px; justify-content: space-between; font-size: 14px; }
.foot nav { display: flex; gap: 22px; }

/* Unterseiten (Impressum, Datenschutz) */
.legal { padding: 140px 0 90px; }
.legal .w { max-width: 760px; }
.legal h1 { font-size: clamp(44px, 5vw, 68px); margin-bottom: 32px; }
.legal h2 { font-size: 30px; margin: 40px 0 10px; }
.legal p, .legal ul { margin-bottom: 1em; }
.legal ul { padding-left: 20px; }
.todo { background: #fff3c4; color: #15211a; padding: 0 4px; }

@media (max-width: 900px) {
  section { padding: 80px 0; }
  .nav { display: none; }
  .bar .btn { display: none; }
  .g2, .nat { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
  .sk { padding: 72px 16px; }
  .sk-card { padding: 40px 24px 44px; }
  .sk-card img { width: 180px; margin-bottom: 28px; }
  .about { padding-top: 24px; }
  .tall { aspect-ratio: 4 / 3; }
}
@media (max-width: 520px) {
  .w { padding: 0 16px; }
  .g4 { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .g4 img, .nat img { aspect-ratio: 4 / 3; }
  .menu li { font-size: 22px; }
  .bar-tel { display: none; }
  .bar img { height: 44px; }
  .hero p { font-size: 17px; }
}

/* ---------- Unterseiten ---------- */
.nav a[aria-current="page"] { color: var(--gold); }
.bar .nav a[aria-current="page"] { color: #735618; }

.page-hero { min-height: min(72svh, 620px); display: flex; flex-direction: column; justify-content: space-between; text-align: center;
  background-size: cover; background-position: 50% 50%; }
.page-hero > .w { width: 100%; }
.page-hero .hero-top { display: flex; justify-content: space-between; align-items: center; padding-top: 24px; text-align: left; }
.page-hero h1 { font-size: clamp(48px, 6.4vw, 96px); }
.page-hero p { font-size: 19px; max-width: 48ch; margin: 20px auto 0; color: #d9d3c3; }
.page-hero .w:last-child { padding-bottom: 72px; }
.ph-hof      { background-image: linear-gradient(180deg, rgba(21,33,26,.55) 0%, rgba(21,33,26,.4) 45%, #15211a 100%), url(img/jungrinder.webp); background-position: 50% 40%; }
.ph-angebot  { background-image: linear-gradient(180deg, rgba(21,33,26,.6) 0%, rgba(21,33,26,.45) 45%, #15211a 100%), url(img/speckangebot.webp); }
.ph-rezepte  { background-image: linear-gradient(180deg, rgba(21,33,26,.6) 0%, rgba(21,33,26,.45) 45%, #15211a 100%), url(img/obstgarten.webp); background-position: 50% 60%; }

.more-link { margin-top: 24px; }

.lead-text { font-family: "Cormorant Garamond", Georgia, serif; font-size: clamp(24px, 2.4vw, 32px); line-height: 1.35; max-width: 34ch; margin: 0 auto; }
.intro { padding-top: 40px; }

.row { display: grid; grid-template-columns: 5fr 6fr; gap: 72px; align-items: center; }
.row + .row { margin-top: 96px; }
.row.flip > :first-child { order: 2; }
.row img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.row h2, .row h3 { margin-bottom: 18px; }
.row h3 { font-size: clamp(32px, 3.4vw, 46px); }
.row p + p { margin-top: 1em; }

.gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 48px; }
.gallery figure { margin: 0; }
.gallery img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.gallery figcaption { margin-top: 10px; font-size: 15px; color: var(--mut); }
.gallery figcaption b { display: block; font-family: "Cormorant Garamond", Georgia, serif; font-weight: 500; font-size: 24px; color: var(--fg); }

.prod { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 56px; list-style: none; padding: 0; border-top: 1px solid var(--rule); }
.prod li { padding: 18px 0; border-bottom: 1px solid var(--rule); }
.prod b { display: block; font-family: "Cormorant Garamond", Georgia, serif; font-weight: 500; font-size: 26px; line-height: 1.2; }
.prod span { color: var(--mut); font-size: 15px; }

.toc { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 28px; list-style: none; padding: 0; margin-top: 32px; }
.toc a { display: inline-block; padding: 10px 20px; font-weight: 700; font-size: 14px; letter-spacing: .04em; text-decoration: none; box-shadow: inset 0 0 0 1px var(--gold); transition: background-color .15s, color .15s; }
.toc a:hover { background: var(--gold); color: var(--bg); }
.toc { gap: 10px 12px; }
.kontakt address .btn-o { margin-top: 18px; }
.rezept { display: grid; grid-template-columns: 4fr 7fr; gap: 64px; padding: 64px 0; border-top: 1px solid var(--rule); }
.rezept:first-of-type { border-top: 0; padding-top: 0; }
.rezept h2 { font-size: clamp(34px, 3.4vw, 48px); margin-bottom: 8px; }
.rezept .menge { color: var(--gold); font-family: "Cormorant Garamond", Georgia, serif; font-style: italic; font-size: 22px; }
.rezept h3 { font-family: Manrope, system-ui, sans-serif; font-size: 14px; font-weight: 700; letter-spacing: .06em; margin: 26px 0 8px; color: var(--mut); }
.rezept ul { padding-left: 18px; }
.rezept li { margin: 4px 0; }
.rezept p + p { margin-top: 1em; }
.tipp { margin-top: 1.4em; padding-top: 14px; border-top: 1px solid var(--rule); font-style: italic; }

@media (max-width: 900px) {
  .row, .rezept { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .row.flip > :first-child { order: 0; }
  .row + .row { margin-top: 64px; }
  .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .prod { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 520px) {
  .page-hero .w:last-child { padding-bottom: 48px; }
  .gallery { grid-template-columns: minmax(0, 1fr); }
}

/* Kleinere Hero-Bilder auf dem Handy */
@media (max-width: 700px) {
  .hero       { background-image: linear-gradient(180deg, rgba(21,33,26,.55) 0%, rgba(21,33,26,.35) 45%, #15211a 100%), url(img/hero-m.webp); }
  .ph-hof     { background-image: linear-gradient(180deg, rgba(21,33,26,.55) 0%, rgba(21,33,26,.4) 45%, #15211a 100%), url(img/jungrinder-m.webp); }
  .ph-angebot { background-image: linear-gradient(180deg, rgba(21,33,26,.6) 0%, rgba(21,33,26,.45) 45%, #15211a 100%), url(img/speckangebot-m.webp); }
  .ph-rezepte { background-image: linear-gradient(180deg, rgba(21,33,26,.6) 0%, rgba(21,33,26,.45) 45%, #15211a 100%), url(img/obstgarten-m.webp); }
  .sk { background-image: linear-gradient(rgba(21,33,26,.45), rgba(21,33,26,.45)), url(img/obstgarten-m.webp); }
}

/* ---------- Mobile Navigation ---------- */
.menu-btn { display: none; align-items: center; justify-content: center; width: 48px; height: 48px; margin-right: -10px;
  background: none; border: 0; padding: 0; color: inherit; cursor: pointer; }
.menu-btn svg { width: 28px; height: 28px; }
.hero .menu-btn, .page-hero .menu-btn { color: #ece6d6; }
.bar .menu-btn { color: #15211a; }

.mnav { position: fixed; inset: 0; z-index: 100; display: flex; flex-direction: column; overflow-y: auto;
  opacity: 0; transform: translateY(-12px); transition: opacity .2s ease, transform .2s ease; }
.mnav[hidden] { display: none; }
.mnav > .w { width: 100%; }
.mnav.open { opacity: 1; transform: none; }
.mnav-top { display: flex; justify-content: space-between; align-items: center; padding-top: 24px; padding-bottom: 24px; }
.mnav-top .logo-light { width: 110px; }
.mnav-links { display: flex; flex-direction: column; padding-top: 24px; padding-bottom: 32px; }
.mnav-links a { font-family: "Cormorant Garamond", Georgia, serif; font-size: 40px; line-height: 1.15; text-decoration: none;
  padding: 10px 0; border-bottom: 1px solid var(--rule); }
.mnav-links a[aria-current="page"] { color: var(--gold); }
.mnav-foot { margin-top: auto; display: flex; flex-direction: column; gap: 12px; padding-bottom: 32px; }
.mnav-foot a { text-align: center; }
.mnav-foot p { font-size: 14px; text-align: center; margin-top: 8px; }
body.menu-open { overflow: hidden; }
@media (max-width: 900px) { .menu-btn { display: inline-flex; } }
@media (min-width: 901px) { .mnav { display: none !important; } }
@media (prefers-reduced-motion: reduce) { .mnav { transition: none; transform: none; } }

/* Cookie-Banner */
#cc-main { --cc-font-family: Manrope, system-ui, sans-serif; --cc-bg: #f1efe8; --cc-primary-color: #15211a; --cc-secondary-color: #4d564f; --cc-link-color: #735618;
  --cc-btn-primary-bg: #15211a; --cc-btn-primary-color: #f1efe8; --cc-btn-primary-border-color: #15211a; --cc-btn-primary-hover-bg: #2f3d33; --cc-btn-primary-hover-border-color: #2f3d33;
  --cc-btn-secondary-bg: #15211a; --cc-btn-secondary-color: #f1efe8; --cc-btn-secondary-border-color: #15211a; --cc-btn-secondary-hover-bg: #2f3d33; --cc-btn-secondary-hover-border-color: #2f3d33;
  --cc-btn-border-radius: 0; --cc-modal-border-radius: 0; --cc-separator-border-color: #d6d2c4; --cc-toggle-on-bg: #735618;
  --cc-cookie-category-block-bg: #e6e2d4; --cc-cookie-category-block-border: #cfc9b6; --cc-cookie-category-block-hover-bg: #ddd8c8; --cc-cookie-category-block-hover-border: #cfc9b6;
  --cc-footer-bg: #e6e2d4; --cc-footer-color: #4d564f; --cc-footer-border-color: #d6d2c4; }
#cc-main .cm__title, #cc-main .pm__title { font-family: "Cormorant Garamond", Georgia, serif; font-weight: 500; font-size: 26px; }
#cc-main .cm__btn, #cc-main .pm__btn { font-weight: 700; letter-spacing: .04em; }
.cc-link { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }