/*
  Mosterei Pfarrhof Rethwisch — modernized theme
  Rebuilds the original kraft-paper / forest-green / gold identity
  (see logo.png, bg4.jpg) as a responsive, self-contained stylesheet.
*/

@font-face {
  font-family: 'FuturaLocal';
  src: url('futura-book.woff') format('woff'), url('futura-book.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'FuturaLocal';
  src: url('futura-medium.woff') format('woff'), url('futura-medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'FuturaLocal';
  src: url('futura-bold.woff') format('woff'), url('futura-bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'FuturaLocal';
  src: url('futura-light.woff') format('woff'), url('futura-light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

:root {
  --ink: #2b2a22;
  --muted: #6b6353;
  --paper-line: #d8c9a3;
  --cream: #fffaf0;
  --forest: #1f6a3f;
  --forest-deep: #123a22;
  --gold: #ab8a3e;
  --gold-light: #ece7a7;
  --shadow: 0 20px 45px rgba(40, 30, 10, .18);
  --shadow-sm: 0 8px 20px rgba(60, 40, 10, .22);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .18), rgba(255, 255, 255, 0) 260px),
    url('bg4.jpg') repeat;
  color: var(--ink);
  font-family: 'FuturaLocal', 'Century Gothic', Arial, Helvetica, sans-serif;
  line-height: 1.7;
}

.wrap { max-width: 1180px; margin: 0 auto; padding: 1.25rem; }

img { max-width: 100%; height: auto; }

a { color: var(--forest); }
a:hover { color: var(--gold); }

h1, h2, h3, h4, h5, h6 {
  font-family: 'FuturaLocal', 'Century Gothic', Arial, sans-serif;
  font-weight: 700;
  line-height: 1.15;
  margin-top: 0;
  color: var(--forest);
}

/* the template prints a top-level <h1>{title}</h1> in every page, but every
   page already carries its own on-page heading (.ueberschrift or the
   homepage welcome block) — hide the redundant duplicate */
article > h1:first-child { display: none; }

/* ---------- header ---------- */

.site-shell-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  overflow: hidden;
  margin: 1.25rem 0;
  background: var(--cream);
  border: 1px solid var(--paper-line);
  border-radius: 26px 26px 18px 18px;
  box-shadow: var(--shadow);
}

.site-shell-header > a#logo {
  flex: 0 0 130px;
  height: 130px;
  margin: 20px 0 20px 26px;
  background: url('logo.png') no-repeat center / contain;
}

.site-shell-header > h2 {
  flex: 1 1 auto;
  margin: 40px 24px 0 22px;
  font-size: 1.05rem;
  text-transform: uppercase;
  letter-spacing: .02em;
  color: var(--forest-deep);
}

.site-shell-header > h2 strong {
  display: block;
  font-weight: 400;
  color: var(--muted);
}

nav#navi {
  position: relative;
  flex: 0 0 100%;
  margin-top: 18px;
  background: linear-gradient(180deg, var(--forest), var(--forest-deep));
}

nav#navi::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -9px;
  height: 10px;
  background:
    linear-gradient(135deg, var(--forest-deep) 50%, transparent 50%),
    linear-gradient(-135deg, var(--forest-deep) 50%, transparent 50%);
  background-size: 20px 20px;
  background-position: top left;
  background-repeat: repeat-x;
}

nav#navi .menu ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  list-style: none;
  margin: 0;
  padding: .5rem 1rem;
  gap: .1rem .4rem;
}

nav#navi .menu ul li { margin: 0; }

nav#navi .menu ul li a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .3rem;
  padding: .65rem 1.1rem;
  color: var(--gold-light);
  text-decoration: none;
  text-transform: uppercase;
  font-weight: 500;
  font-size: .8rem;
  letter-spacing: .03em;
  border-bottom: 2px solid transparent;
  transition: color .15s ease, border-color .15s ease;
}

nav#navi .menu ul li a::before {
  font-size: 1.1rem;
  line-height: 1;
}

nav#navi .menu ul li:nth-child(1) a::before { content: '\1F34E'; }
nav#navi .menu ul li:nth-child(2) a::before { content: '\1F37E'; }
nav#navi .menu ul li:nth-child(3) a::before { content: '\1F3E0'; }
nav#navi .menu ul li:nth-child(4) a::before { content: '\1F6B2'; }
nav#navi .menu ul li:nth-child(5) a::before { content: '\260E'; }

nav#navi .menu ul li a:hover,
nav#navi .menu ul li.current_page_item a {
  color: #fff;
  border-color: var(--gold);
}

/* ---------- article / layout ---------- */

article {
  margin: 1.25rem 0 2rem;
  padding: clamp(1.25rem, 3vw, 2.25rem);
  background: rgba(255, 250, 240, .92);
  border: 1px solid var(--paper-line);
  border-radius: 26px;
  box-shadow: var(--shadow);
}

article:has(#sidebar) {
  display: grid;
  grid-template-columns: 250px 1fr;
  gap: 2rem;
  align-items: start;
}

@media (max-width: 860px) {
  article:has(#sidebar) { grid-template-columns: 1fr; }
}

/* ---------- homepage hero ---------- */

#home-slider #slider {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
  margin: 0 0 1.75rem;
}

#home-slider #slider a {
  display: block;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

#home-slider #slider img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

#startsite-content {
  position: relative;
  min-height: 170px;
  padding: .5rem 0 .5rem 170px;
  background: url('mosterei-screendesign-obst-startseite.png') no-repeat left center / 150px auto;
}

#startsite-content h2 {
  margin: 0;
  font-weight: 400;
  font-size: 1.3rem;
  color: var(--ink);
}

#startsite-content h1 {
  margin: .1rem 0 .6rem;
  font-size: clamp(1.6rem, 4vw, 2.5rem);
  color: var(--forest);
}

#startsite-content p {
  margin: 0;
  font-size: 1.1rem;
  color: var(--muted);
}

@media (max-width: 560px) {
  #startsite-content { padding-left: 0; background-position: center top; padding-top: 160px; text-align: center; }
}

/* ---------- sidebar ---------- */

aside#sidebar {
  background: var(--cream);
  border: 1px solid var(--paper-line);
  border-radius: 20px;
  padding: 1.25rem;
  box-shadow: var(--shadow-sm);
}

aside#sidebar nav ul {
  list-style: none;
  margin: 0 0 1.25rem;
  padding: 0;
  border-top: 1px solid var(--paper-line);
}

aside#sidebar nav ul li { border-bottom: 1px solid var(--paper-line); }

aside#sidebar nav ul li a {
  display: block;
  padding: .6rem .1rem;
  text-decoration: none;
  color: var(--forest);
  font-weight: 500;
  text-transform: uppercase;
  font-size: .82rem;
  letter-spacing: .02em;
}

aside#sidebar nav ul li a:hover,
aside#sidebar nav ul li.current_page_item a { color: var(--gold); }

aside#sidebar div#contact { text-align: center; margin-bottom: 1.25rem; }

aside#sidebar div#contact a {
  display: block;
  width: 100%;
  max-width: 220px;
  aspect-ratio: 263 / 266;
  margin: 0 auto;
  background: url('mosterei-screendesign-apfel-telefon.png') no-repeat center / contain;
}

aside#sidebar div#contact hgroup { margin-top: .4rem; }

aside#sidebar div#contact hgroup h3 {
  margin: 0;
  font-size: .78rem;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--muted);
}

aside#sidebar div#contact hgroup h2 {
  margin: .15rem 0 0;
  font-size: 1.3rem;
  color: var(--forest);
}

aside#sidebar div#book { text-align: center; }

aside#sidebar div#book a#buchen {
  display: inline-block;
  padding: .85rem 1.3rem;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--gold), #8a6c2e);
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: .02em;
  font-size: .82rem;
  box-shadow: 0 10px 22px rgba(140, 100, 30, .35);
  transition: transform .15s ease;
}

aside#sidebar div#book a#buchen:hover { transform: translateY(-2px); color: #fff; }

/* ---------- main content column ---------- */

section#right .post h1.ueberschrift {
  font-size: clamp(1.7rem, 4vw, 2.5rem);
  margin: 0 0 1rem;
  padding-bottom: .5rem;
  border-bottom: 3px solid var(--gold-light);
}

.entry { color: var(--ink); }
.entry p, .entry li { color: var(--ink); }
.entry h2, .entry h3, .entry h4 { color: var(--forest); }
.entry h4 { color: var(--gold); text-transform: uppercase; letter-spacing: .04em; font-size: .95rem; }

.entry .most {
  background: var(--gold-light) url('most-bg.png') repeat;
  border-radius: 16px;
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.5rem;
}

.entry img { border-radius: 14px; box-shadow: var(--shadow-sm); margin: .5rem 0; }

.pics {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin: 1.5rem 0;
}

.pics a {
  display: block;
  border: 6px solid #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.pics img { display: block; margin: 0; box-shadow: none; border-radius: 0; }

.entry dl {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: .35rem 1.5rem;
  margin: 0 0 1.5rem;
  padding: 0;
}

.entry dl dt { grid-column: 1; }
.entry dl dd {
  grid-column: 2;
  margin: 0;
  font-weight: 700;
  color: var(--forest);
  white-space: nowrap;
}

.entry input[type="text"],
.entry textarea {
  display: block;
  width: 100%;
  max-width: 420px;
  margin: .4rem 0 .9rem;
  padding: .65rem .8rem;
  border: 1px solid var(--paper-line);
  border-radius: 10px;
  background: #fff;
  color: var(--ink);
  font-family: inherit;
}

.entry button,
.entry input[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .7rem 1.4rem;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--gold), #8a6c2e);
  color: #fff;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .02em;
  cursor: pointer;
}

.entry iframe {
  width: 100%;
  min-height: 600px;
  border: 0;
  border-radius: 16px;
  box-shadow: var(--shadow);
}

/* ---------- footer ---------- */

.site-shell-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1.75rem 3rem;
  margin: 1.25rem 0 2rem;
  padding: 1.75rem clamp(1.25rem, 3vw, 2.25rem);
  background: linear-gradient(180deg, var(--forest), var(--forest-deep));
  border-radius: 18px 18px 26px 26px;
  box-shadow: var(--shadow);
  color: #dfe9d3;
}

.site-shell-footer section#inhaber h4 {
  margin: 0 0 .5rem;
  text-transform: uppercase;
  color: #fff;
}

.site-shell-footer section#inhaber ul { list-style: none; margin: 0; padding: 0; }
.site-shell-footer section#inhaber,
.site-shell-footer section#inhaber a { color: #dfe9d3; }
.site-shell-footer section#inhaber a:hover { color: var(--gold-light); }

.site-shell-footer nav#footer-navi {
  display: flex;
  flex-wrap: wrap;
  gap: 1.75rem 2.5rem;
}

.site-shell-footer nav#footer-navi ul {
  list-style: none;
  margin: 0;
  padding: 0;
  min-width: 150px;
}

.site-shell-footer nav#footer-navi a {
  display: block;
  padding: .2rem 0;
  color: #cfe0c2;
  text-decoration: none;
}

.site-shell-footer nav#footer-navi a:hover { color: #fff; text-decoration: underline; }

@media (max-width: 720px) {
  .wrap { padding: .8rem; }
  .site-shell-header > a#logo { flex: 0 0 96px; height: 96px; margin: 16px 0 14px 18px; }
  .site-shell-header > h2 { margin-top: 24px; font-size: .9rem; }
}