/* ─────────────────────────────────────────────
   BÖR — Einheitliche Grundgestaltung für alle Seiten
   Wird auf jeder Seite nach dem Seiten-CSS geladen und
   legt Navigation, Footer, Überschriften, Fließtext und
   Buttons verbindlich fest.
   ───────────────────────────────────────────── */

@font-face {
  font-family: 'BOER Serif';
  src: url('../fonts/brand-font_01.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --boer-serif: 'BOER Serif', 'Big Moore', Georgia, serif;
  --boer-sans: 'Poppins', sans-serif;
  --boer-gold: #BB9554;
  --boer-gold-bright: #F0C972;
  --boer-navy: #092337;

  /* Überschriften-Stufen */
  --boer-h-xl: clamp(2.4rem, 3.6vw, 4rem);      /* Seiten- und Abschnittsüberschriften */
  --boer-h-m: clamp(1.6rem, 2.4vw, 2.2rem);     /* Unterüberschriften */
  --boer-h-s: clamp(1.25rem, 1.7vw, 1.65rem);   /* Karten-Titel */

  /* Text */
  --boer-text: 0.95rem;
  --boer-text-lh: 1.82;

  /* Kontrast (WCAG AA, mind. 4,5 : 1) */
  --boer-gold-ink: #856A3C;                 /* Gold für Text auf hellem Grund (5,1 : 1 auf Weiß) */
  --boer-ink-muted: rgba(9,35,55,0.68);     /* Nebentext auf hellem Grund */
  --boer-cream-muted: rgba(238,232,220,0.62); /* Nebentext auf dunklem Grund */
}

/* ── Navigation ── */
body #nav {
  height: 68px;
  padding: 0 max(36px, 5vw);
}
/* Logo sitzt vollständig und mittig in der Leiste (280×133 → 128×61) */
body #nav > a:first-child {
  display: flex;
  align-items: center;
  align-self: center;
  height: 68px;
}
body #nav .nav-logo {
  display: block;
  width: 128px;
  height: auto;
  margin: 0;
  align-self: center;
}
body #nav .nav-links > li > a {
  height: 68px;
  line-height: 68px;
  padding: 0 17px;
  font-family: var(--boer-sans);
  font-size: 11.5px;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.92);
}
body #nav .nav-links > li > a:hover { color: var(--boer-gold); }

/* ── Produktseiten: Spalten dürfen am Handy nicht breiter als der Bildschirm werden ── */
body .product-main > * { min-width: 0; }
body .product-info table { width: 100%; }

/* ── Footer ── */
body #site-footer .ft-col-head {
  font-family: var(--boer-sans);
  font-weight: 500;
  letter-spacing: 0.18em;
  color: var(--boer-gold);
}
body #site-footer .ft-legal a {
  letter-spacing: 0.06em;
  color: var(--boer-cream-muted);
}
body #site-footer .ft-legal a.active,
body #site-footer .ft-legal a[aria-current="page"] { color: var(--boer-gold); }

/* ── Überschriften: Stufe XL ── */
body .imp-h1,
body .gh-h1,
body .art-h1,
body .product-name,
body .prod-heading,
body .wt-heading,
body .art-related-head,
body .depth-heading,
body h1#hero-eyebrow,
body .brauerei-headline,
body .auftauchen-headline,
body .wellen-headline,
body .dw-headline,
body .shop-hd-title {
  font-family: var(--boer-serif);
  font-size: var(--boer-h-xl);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: normal;
}

/* ── Überschriften: Stufe M ── */
body .s-h2,
body .gh-h2,
body .art-h2,
body .cta-wrap .depth-heading {
  font-family: var(--boer-serif);
  font-size: var(--boer-h-m);
  font-weight: 400;
  line-height: 1.18;
  letter-spacing: normal;
}

/* ── Überschriften: Karten-Titel ── */
body .wellen-card-title,
body .shop-card-name,
body .form-success h3,
body .gh-success h3 {
  font-family: var(--boer-serif);
  font-size: var(--boer-h-s);
  font-weight: 400;
  line-height: 1.2;
}

/* ── Fließtext ── */
body .depth-text p,
body p.depth-text,
body .dw-gauge-taste,
body .fo-info,
body .fo-details p,
body .s-body,
body .art-p,
body .gh-intro,
body .imp-block p:not(.imp-h2),
body .wellen-card-desc,
body .auftauchen-body p,
body .dw-narrative-p,
body .dw-gauge-text,
body .shop-card-desc {
  font-family: var(--boer-sans);
  font-size: var(--boer-text);
  font-weight: 300;
  line-height: var(--boer-text-lh);
}

/* ── Kontrast: Gold auf hellem Grund ── */
body .imp-eyebrow,
body .gh-section-eyebrow,
body .prod-eyebrow,
body .grid-cat-row span,
body .s-eyebrow,
body .wt-eyebrow,
body .wellen-eyebrow,
body .shop-hd-eye,
body .shop-card-eye,
body .product-badge,
body .product-depth,
body .product-spec-val,
body .shop-price,
body .wellen-card-cat,
body .wt-card-depth,
body .filter-tab.active,
body .placeholder,
body .form-grid label,
body #gh-form label,
body .form-check-label a,
body .gh-check-label a,
body .brauerei-eyebrow,
body #brauerei .fact-num,
body #story .section-eyebrow,
body .uphof-text .section-eyebrow,
body .journal-grid-wrap .wellen-card-cat {
  color: var(--boer-gold-ink);
}
body #brauerei .fact-lbl { color: var(--boer-ink-muted); }

/* ── Kontrast: Nebentext auf hellem Grund ── */
body .shop-breadcrumb a,
body .accordion-note,
body .art-tag,
body .color-btn:not(.active),
body .color-selector-label,
body .form-check-label,
body .gh-check-label,
body .form-submit-note,
body .gh-submit-note,
body .form-success p,
body .gh-success p,
body .nutri-header,
body .product-badge--soon,
body .product-price-note,
body .product-spec-label,
body .shop-card-desc,
body .shop-hd-sub,
body .wellen-card-date,
body .wt-card-desc,
body .wt-card-label,
body .filter-tab:not(.active),
body .art-meta-bar span {
  color: var(--boer-ink-muted);
}

/* ── Kontrast: Nebentext auf dunklem Grund ── */
body .art-back,
body .art-date,
body .art-related-link,
body .art-related .wellen-card-date,
body .art-related .wellen-card-desc,
body .meta-item,
body .char-sub,
body .spec-lbl,
body #site-footer .ft-col a:not(.ft-btn-link),
body #site-footer .ft-legal a:not(.active),
body #site-footer .ft-copy {
  color: var(--boer-cream-muted);
}
body .art-related .wellen-card-cat { color: var(--boer-gold); }

/* ─────────────────────────────────────────────
   Buttons — zwei Designs für die ganze Website

   1. HAUPTBUTTON  (gefüllt)  → für Aktionen: bestellen, buchen, senden
      Immer 48 px hoch, mindestens 200 px breit.
      Auf dunklem Grund: Gold        → Mouse-Over: helles Gold
      Auf hellem Grund:  Dunkelblau  → Mouse-Over: Gold

   2. TEXTLINK MIT PFEIL      → für Weiterlesen / Entdecken
      Mouse-Over: Gold, Pfeil rückt nach rechts
   ───────────────────────────────────────────── */

/* ── 1. Hauptbutton: Grundform ── */
body .btn-primary,
body .btn-auftauchen,
body .shop-btn,
body .shop-cta-link,
body .wt-card-link,
body .form-submit,
body .gh-submit,
body #nav .nav-shop,
body #nav-drawer .drawer-shop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  box-sizing: border-box;
  height: 48px;
  min-width: 200px;
  padding: 0 32px;
  border: 1px solid transparent;
  border-radius: 0;
  font-family: var(--boer-sans);
  font-size: 12px;
  font-weight: 400;
  line-height: 18px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.25s, color 0.25s, border-color 0.25s;
}
/* Shop-Button in der Navigation: gleiche Höhe, ohne Mindestbreite */
body #nav .nav-shop { min-width: 0; }
/* Handy-Menü: volle Breite */
body #nav-drawer .drawer-shop { display: flex; width: 100%; min-width: 0; padding: 0; }

/* ── 1a. Hauptbutton auf dunklem Grund: Gold ── */
body .btn-primary,
body .btn-auftauchen,
body #nav .nav-shop,
body #nav-drawer .drawer-shop {
  background: var(--boer-gold);
  border-color: var(--boer-gold);
  color: var(--boer-navy) !important;
}
body .btn-primary:hover,
body .btn-auftauchen:hover,
body #nav .nav-shop:hover,
body #nav-drawer .drawer-shop:hover {
  background: var(--boer-gold-bright);
  border-color: var(--boer-gold-bright);
  color: var(--boer-navy) !important;
}

/* ── 1b. Hauptbutton auf hellem Grund: Dunkelblau ── */
body .shop-btn,
body .shop-cta-link,
body .wt-card-link,
body .form-submit,
body .gh-submit {
  background: var(--boer-navy);
  border-color: var(--boer-navy);
  color: #EEE8DC;
}
body .shop-btn:hover,
body .shop-cta-link:hover,
body .wt-card:hover .wt-card-link,
body .wt-card-link:hover,
body .form-submit:hover,
body .gh-submit:hover {
  background: var(--boer-gold);
  border-color: var(--boer-gold);
  color: var(--boer-navy);
}

/* ── 2. Textlink mit Pfeil ── */
body .btn-ghost,
body .link-arrow,
body .wellen-card-cta,
body .wellen-header-cta,
body .art-related-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: auto;
  min-width: 0;
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--boer-sans);
  font-size: 12px !important;
  font-weight: 400;
  line-height: 18px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.25s;
}
body .btn-ghost::after,
body .link-arrow::after,
body .wellen-card-cta::after,
body .wellen-header-cta::after,
body .art-related-link::after {
  content: '→';
  display: inline-block;
  letter-spacing: 0;
  transition: transform 0.25s;
}
body .btn-ghost:hover::after,
body .link-arrow:hover::after,
body .wellen-card-cta:hover::after,
body .wellen-header-cta:hover::after,
body .art-related-link:hover::after {
  transform: translateX(5px);
}
/* Seitenregeln vergrößern den Abstand beim Mouse-Over – hier fest */
body .wellen-card-cta:hover,
body .wellen-header-cta:hover { gap: 10px; }

/* 2a. auf dunklem Grund: hell → Gold */
body .btn-ghost,
body .art-related-link,
body .art-related .wellen-card-cta {
  color: rgba(238,232,220,0.85);
}
body .btn-ghost:hover,
body .art-related-link:hover,
body .art-related .wellen-card-cta:hover {
  color: var(--boer-gold-bright) !important;
  background: none;
}

/* 2b. auf hellem Grund: Dunkelblau → dunkles Gold */
body .link-arrow,
body .wellen-card-cta,
body .wellen-header-cta {
  color: var(--boer-navy);
}
body .link-arrow:hover,
body .wellen-card-cta:hover,
body .wellen-header-cta:hover {
  color: var(--boer-gold-ink);
}
/* Artikelseite: Karten liegen auf dunklem Grund (Regel oben muss gewinnen) */
body .art-related .wellen-card-cta { color: rgba(238,232,220,0.85); }
body .art-related .wellen-card-cta:hover { color: var(--boer-gold-bright); }

/* ─────────────────────────────────────────────
   Footer
   • Großhandel / Gastronomie: goldene Rahmen-Buttons (einzige Ausnahme
     vom Zwei-Design-System), 48 px hoch, beide gleich breit
   • Alle übrigen Links und Icons: Mouse-Over → Weiß
   Einige Seiten setzen Footer-Werte mit !important, daher hier ebenso.
   ───────────────────────────────────────────── */
body #site-footer .ft-col .ft-btn-link {
  display: flex !important;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 100%;
  max-width: 240px;
  height: 48px;
  padding: 0 20px !important;
  margin-bottom: 12px !important;
  border: 1px solid var(--boer-gold) !important;
  background: transparent !important;
  color: var(--boer-gold) !important;
  font-family: var(--boer-sans);
  font-size: 12px !important;
  font-weight: 400;
  line-height: 18px !important;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.25s, color 0.25s;
}
body #site-footer .ft-col .ft-btn-link::after { content: none; }
body #site-footer .ft-col .ft-btn-link:hover {
  background: var(--boer-gold) !important;
  color: var(--boer-navy) !important;
}

/* Footer-Links, E-Mail, Social-Icons, rechtliche Links: Mouse-Over Weiß */
body #site-footer .ft-col a:not(.ft-btn-link),
body #site-footer .ft-legal a,
body #site-footer .ft-social-link {
  transition: color 0.22s, transform 0.22s;
}
body #site-footer .ft-col a:not(.ft-btn-link):hover,
body #site-footer .ft-legal a:hover,
body #site-footer .ft-legal a.active:hover,
body #site-footer .ft-social-link:hover {
  color: #FFFFFF;
}
body #site-footer .ft-social-link:hover { transform: translateY(-2px); }

/* ── Auswahlfelder (z. B. 6 / 12 Flaschen) – kein Button, aber einheitlich ── */
body .shop-var {
  height: 30px;
  padding: 0 14px;
  border: 1px solid rgba(9,35,55,0.25);
  background: transparent;
  color: var(--boer-ink-muted);
  font-family: var(--boer-sans);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}
body .shop-var:hover { border-color: var(--boer-navy); color: var(--boer-navy); }
body .shop-var.s-on {
  background: var(--boer-navy);
  border-color: var(--boer-navy);
  color: #EEE8DC;
}

/* ─────────────────────────────────────────────
   Karten: Buttons und Links stehen in einer Reihe immer auf gleicher Höhe.
   Karten einer Reihe sind gleich hoch, der Button sitzt am unteren Rand.
   ───────────────────────────────────────────── */
body .wt-grid,
body .shop-grid,
body .wellen-grid,
body .journal-grid,
body .art-related-grid { align-items: stretch; }

/* Shop-Karten „Weitere Tiefen“ / Shop-Übersicht */
body .wt-card { height: 100%; }
body .wt-card-body { flex: 1; text-align: left; }
body .wt-card-link { margin-top: auto; }

/* Shop-Karten Startseite */
body .shop-card { display: flex; flex-direction: column; height: 100%; }
body .shop-card-body { display: flex; flex-direction: column; flex: 1; }
body .shop-card-footer { margin-top: auto; align-items: flex-end; }

/* Journal-Karten */
body .wellen-card { height: 100%; }
body .wellen-card-body { flex: 1; }
body .wellen-card-cta { margin-top: auto; }

/* Journal: Hinweis bei noch nicht veröffentlichten Artikeln (statt Link) */
body .wellen-card-soon {
  margin-top: auto;
  font-family: var(--boer-sans);
  font-size: 12px;
  line-height: 18px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--boer-ink-muted);
}
body .art-related .wellen-card-soon { color: var(--boer-cream-muted); }

/* Journal-Übersicht: Seitenkopf */
body .journal-head {
  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(56px, 7vw, 96px) 40px clamp(32px, 4vw, 48px);
  text-align: center;
}
body .journal-eyebrow {
  margin: 0 0 18px;
  font-family: var(--boer-sans);
  font-size: clamp(11px, 0.95vw, 14px);
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--boer-gold-ink);
}
body .journal-h1 {
  margin: 0 0 16px;
  font-family: var(--boer-serif);
  font-size: var(--boer-h-xl);
  font-weight: 400;
  line-height: 1.08;
  color: var(--boer-navy);
}
body .journal-lead {
  margin: 0 auto;
  max-width: 560px;
  font-family: var(--boer-sans);
  font-size: var(--boer-text);
  font-weight: 300;
  line-height: var(--boer-text-lh);
  color: var(--boer-ink-muted);
}
@media (max-width: 640px) { body .journal-head { padding-left: 24px; padding-right: 24px; } }

/* 404-Seite */
body .notfound { min-height: 60vh; }
body .notfound-text {
  max-width: 560px;
  margin: 0 0 40px;
  font-family: var(--boer-sans);
  font-size: var(--boer-text);
  font-weight: 300;
  line-height: var(--boer-text-lh);
  color: var(--boer-ink-muted);
}
body .notfound-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 36px; }
body .notfound .btn-primary { background: var(--boer-navy); border-color: var(--boer-navy); color: #EEE8DC !important; }
body .notfound .btn-primary:hover { background: var(--boer-gold); border-color: var(--boer-gold); color: var(--boer-navy) !important; }

/* Warenkorb-Symbol ausgeblendet, solange es keinen echten Warenkorb gibt */
body #nav .nav-cart { display: none; }

/* Startseite Shop-Karten: Zusatzzeile unter dem Preis (Grundpreis, Pfand, Verfügbarkeit) */
body .shop-price small {
  display: block;
  margin-top: 4px;
  font-family: var(--boer-sans);
  font-size: 11px;
  font-weight: 300;
  letter-spacing: 0.02em;
  line-height: 1.5;
  color: var(--boer-ink-muted);
}

/* Hinweise im Produktbild („Neu“, „Bald“): rundes Siegel wie eine Prägung,
   beide gleich gestaltet, oben rechts */
body .shop-card-img .shop-badge {
  position: absolute;
  top: 16px;
  right: 16px;
  left: auto;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 64px;
  height: 64px;
  padding: 0;
  border: 1px solid var(--boer-gold);
  border-radius: 50%;
  background: rgba(9,35,55,0.35);
  font-family: var(--boer-serif);
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0.02em;
  text-transform: none;
  line-height: 1;
  color: var(--boer-gold-bright);
  pointer-events: none;
}
/* feiner innerer Ring */
body .shop-card-img .shop-badge::before {
  content: "";
  position: absolute;
  inset: 4px;
  border: 1px solid rgba(187,149,84,0.35);
  border-radius: 50%;
}
body .shop-card--soon .shop-card-photo { opacity: 0.7; }
/* Shop-Karten Startseite: Preis oben, Button darunter in voller Breite */
body .shop-card-footer {
  flex-direction: column;
  align-items: stretch;
  gap: 16px;
}
body .shop-card-footer .shop-btn { width: 100%; }
body .shop-card-footer .shop-price { min-height: 62px; }

/* ─────────────────────────────────────────────
   Seiten Upholm-Hof, Fundorte, Service: Bausteine
   ───────────────────────────────────────────── */
body .bp-section { background: #FFFFFF; padding: clamp(64px, 8vw, 112px) 0; }
body .bp-section--tint { background: #F7F4EF; }
body .bp-inner { max-width: 1200px; margin: 0 auto; padding: 0 clamp(20px, 5vw, 40px); }
body .bp-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 80px); align-items: center; }
body .bp-split--map { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); align-items: start; }
@media (max-width: 860px) { body .bp-split, body .bp-split--map { grid-template-columns: 1fr; } }

body .bp-text {
  margin: 0 0 18px;
  max-width: 560px;
  font-family: var(--boer-sans);
  font-size: var(--boer-text);
  font-weight: 300;
  line-height: var(--boer-text-lh);
  color: var(--boer-ink-muted);
}
body .bp-img img { display: block; width: 100%; height: auto; }
body .bp-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 32px; margin-top: 28px; }

/* Kennzahlen */
body .bp-facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: clamp(48px, 6vw, 72px) 0 0;
  border-top: 1px solid rgba(9,35,55,0.1);
}
body .bp-facts > div { padding: 28px 0 0; }
body .bp-facts dt { font-family: var(--boer-serif); font-size: clamp(2rem, 3vw, 2.8rem); line-height: 1; color: var(--boer-gold-ink); }
body .bp-facts dd {
  margin: 10px 0 0;
  font-family: var(--boer-sans); font-size: 11.5px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--boer-ink-muted);
}
@media (max-width: 640px) { body .bp-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 8px; } }

/* Öffnungszeiten & Adresse */
body .bp-hours { width: 100%; max-width: 420px; margin: 8px 0 32px; border-collapse: collapse; font-family: var(--boer-sans); }
body .bp-hours th, body .bp-hours td {
  padding: 14px 0; border-bottom: 1px solid rgba(9,35,55,0.1);
  font-size: var(--boer-text); text-align: left; color: var(--boer-navy);
}
body .bp-hours th { font-weight: 400; }
body .bp-hours td { font-weight: 300; text-align: right; }
body .bp-address {
  font-style: normal; font-family: var(--boer-sans); font-size: var(--boer-text);
  font-weight: 300; line-height: var(--boer-text-lh); color: var(--boer-ink-muted);
}
body .bp-address strong { font-weight: 500; color: var(--boer-navy); }

/* Karte im Stil einer Seekarte: Dunkelblau, Insel als Goldumriss */
body .bp-map { margin: 0; }
body .bp-map svg { display: block; width: 100%; height: auto; background: #061A2A; border: 1px solid rgba(187,149,84,0.35); }
body .bp-map-grid line { stroke: rgba(187,149,84,0.12); stroke-width: 1; stroke-dasharray: 2 6; }
body .bp-map-island { fill: rgba(187,149,84,0.07); stroke: var(--boer-gold); stroke-width: 2; stroke-linejoin: round; }
body .bp-map-deco path { fill: none; stroke: var(--boer-gold); stroke-width: 1.6; }
body .bp-map-deco > g { transform: translate(930px, 64px) scale(1.5); }
body .bp-map-deco text { font-family: var(--boer-sans); font-size: 22px; letter-spacing: 0.2em; fill: rgba(240,201,114,0.7); }
body .bp-pin-ring { fill: rgba(240,201,114,0.12); stroke: var(--boer-gold-bright); stroke-width: 1; }
body .bp-pin-dot { fill: var(--boer-gold-bright); }
body .bp-pin-label { font-family: var(--boer-serif); font-size: 28px; fill: #FFFFFF; }
body .bp-map figcaption { margin-top: 10px; font-family: var(--boer-sans); font-size: 11px; color: var(--boer-ink-muted); }
body .bp-map figcaption a { color: inherit; }

/* Fundorte-Liste */
body .bp-places { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
body .bp-place { background: #FFFFFF; border: 1px solid rgba(187,149,84,0.25); padding: 28px; }
body .bp-place--main { border-color: var(--boer-gold); }
body .bp-place-tag {
  margin: 0 0 10px; font-family: var(--boer-sans); font-size: 11px; font-weight: 500;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--boer-gold-ink);
}
body .bp-place-name { margin: 0 0 8px; font-family: var(--boer-serif); font-size: var(--boer-h-s); font-weight: 400; line-height: 1.2; color: var(--boer-navy); }
body .bp-place-info, body .bp-place-addr {
  margin: 0 0 6px; font-family: var(--boer-sans); font-size: 14px; font-weight: 300; line-height: 1.7; color: var(--boer-ink-muted);
}
body .bp-place-links { display: flex; flex-wrap: wrap; gap: 12px 28px; margin-top: 18px; }
body .bp-more { margin: 20px 0 0; font-family: var(--boer-sans); font-size: 14px; font-weight: 300; color: var(--boer-ink-muted); }
body .bp-cta-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(32px, 6vw, 80px); }
@media (max-width: 860px) { body .bp-cta-row { grid-template-columns: 1fr; } }

/* Führungen: Eckdaten + Formularüberschrift */
body .bp-meta { display: flex; flex-wrap: wrap; gap: 20px 40px; margin: 32px 0 56px; padding: 24px 0; border-top: 1px solid rgba(9,35,55,0.1); border-bottom: 1px solid rgba(9,35,55,0.1); }
body .bp-meta dt { font-family: var(--boer-sans); font-size: 11px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--boer-gold-ink); }
body .bp-meta dd { margin: 6px 0 0; font-family: var(--boer-sans); font-size: var(--boer-text); font-weight: 300; color: var(--boer-navy); }
body .bp-form-head { margin: 0 0 28px; font-family: var(--boer-serif); font-size: var(--boer-h-s); font-weight: 400; color: var(--boer-navy); }

/* FAQ */
body .bp-faq-wrap { max-width: 1200px; }
body .bp-faq-group {
  margin: 56px 0 8px; font-family: var(--boer-sans); font-size: 12px; font-weight: 500;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--boer-gold-ink); scroll-margin-top: 96px;
}
body .bp-faq-group:first-child { margin-top: 0; }
body .bp-faq { border-bottom: 1px solid rgba(9,35,55,0.1); scroll-margin-top: 96px; }
body .bp-faq summary {
  position: relative; list-style: none; cursor: pointer; padding: 22px 40px 22px 0;
  font-family: var(--boer-serif); font-size: clamp(1.1rem, 1.5vw, 1.3rem); color: var(--boer-navy);
}
body .bp-faq summary::-webkit-details-marker { display: none; }
body .bp-faq summary::after {
  content: '+'; position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  font-family: var(--boer-sans); font-size: 22px; font-weight: 300; color: var(--boer-gold-ink); transition: transform 0.25s;
}
body .bp-faq[open] summary::after { transform: translateY(-50%) rotate(45deg); }
body .bp-faq summary:hover { color: var(--boer-gold-ink); }
body .bp-faq-a p { margin: 0 0 22px; max-width: 760px; font-family: var(--boer-sans); font-size: var(--boer-text); font-weight: 300; line-height: var(--boer-text-lh); color: var(--boer-ink-muted); }
body .bp-faq-a a { color: var(--boer-gold-ink); }
body .gh-lead a, body .gh-infobar-val a { color: var(--boer-gold); }
body .bp-faq-contact { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px 24px; margin-top: 56px; }
body .bp-faq-contact .bp-text { margin: 0; }
/* Hauptbutton auf hellen Abschnitten der neuen Seiten: Dunkelblau */
body .bp-section .btn-primary { background: var(--boer-navy); border-color: var(--boer-navy); color: #EEE8DC !important; }
body .bp-section .btn-primary:hover { background: var(--boer-gold); border-color: var(--boer-gold); color: var(--boer-navy) !important; }

/* ── Upholm-Hof: dunkle Abschnitte, Kennzahlen-Band, gerahmtes Bild ── */
body .bp-section--dark { background: #092337; }
body .bp-section--dark .gh-section-eyebrow { color: var(--boer-gold); }
body .bp-section--dark .gh-h2 { color: #EEE8DC; }
body .bp-section--dark .bp-hours th,
body .bp-section--dark .bp-hours td { color: #EEE8DC; border-bottom-color: rgba(187,149,84,0.25); }
body .bp-section--dark .bp-address { color: var(--boer-cream-muted); }
body .bp-section--dark .bp-address strong { color: #EEE8DC; }
body .bp-section--dark .btn-primary { background: var(--boer-gold); border-color: var(--boer-gold); color: var(--boer-navy) !important; }
body .bp-section--dark .btn-primary:hover { background: var(--boer-gold-bright); border-color: var(--boer-gold-bright); }
body .bp-section--dark .link-arrow { color: rgba(238,232,220,0.85); }
body .bp-section--dark .link-arrow:hover { color: var(--boer-gold-bright); }
body .bp-section--dark .bp-map figcaption { color: var(--boer-cream-muted); }

body .bp-band { background: #061A2A; padding: clamp(48px, 6vw, 72px) 0; }
body .bp-band .bp-facts { margin: 0; border-top: 0; }
body .bp-band .bp-facts > div { padding: 0 0 0 28px; border-left: 1px solid rgba(187,149,84,0.3); }
body .bp-band .bp-facts dt { font-size: clamp(2.4rem, 4vw, 3.6rem); color: var(--boer-gold); }
body .bp-band .bp-facts dd { color: var(--boer-cream-muted); }
@media (max-width: 640px) { body .bp-band .bp-facts { row-gap: 32px; } }


/* Brauerei: Bild randlos links, Text rechts */
body .bp-brew { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); background: #FFFFFF; min-height: clamp(480px, 46vw, 680px); }
body .bp-brew-img { position: relative; overflow: hidden; }
body .bp-brew-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 12% 55%; }
body .bp-brew-text { display: flex; flex-direction: column; justify-content: center; padding: clamp(56px, 7vw, 120px) clamp(24px, 6vw, 96px); }
body .bp-brew-text .bp-text { max-width: 520px; }
@media (max-width: 860px) {
  body .bp-brew { grid-template-columns: 1fr; min-height: 0; }
  body .bp-brew-img { height: 62vw; min-height: 260px; }
}

/* Führungen: zwei Spalten – Infos links, Formular rechts */
body .bp-split--tours { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); align-items: start; }
body .bp-tours-info .bp-text { max-width: 480px; }
body .bp-tours-info .bp-meta { display: block; margin: 36px 0 0; padding: 0; border: 0; max-width: 480px; }
body .bp-tours-info .bp-meta > div {
  display: flex; justify-content: space-between; align-items: baseline; gap: 24px;
  padding: 16px 0; border-bottom: 1px solid rgba(9,35,55,0.1);
}
body .bp-tours-info .bp-meta > div:first-child { border-top: 1px solid rgba(9,35,55,0.1); }
body .bp-tours-info .bp-meta dd { margin: 0; text-align: right; }
body .bp-tours-form { background: #F7F4EF; padding: clamp(28px, 4vw, 48px); }
body .bp-tours-form .gh-form-grid { gap: 28px 24px; }
body .bp-tours-form .gh-field label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 860px) { body .bp-split--tours { grid-template-columns: 1fr; } }


/* ─────────────────────────────────────────────
   Fundorte: Verzeichnis ohne Rahmen
   ───────────────────────────────────────────── */
body .fo-hero .fo-map figcaption { margin-top: 6px; font-size: 10px; }
@media (max-width: 860px) {
  body .fo-hero .fo-map { position: static; transform: none; width: 100%; max-width: 440px; margin-top: 40px; }
}

body .fo-inner { max-width: 1200px; margin: 0 auto; padding: 0 clamp(20px, 5vw, 40px); }
body .fo-list { background: #FFFFFF; padding: clamp(64px, 8vw, 112px) 0; }
body .fo-places { list-style: none; margin: 24px 0 0; padding: 0; }
body .fo-place {
  display: grid;
  grid-template-columns: 96px minmax(0, 1.9fr) minmax(0, 1fr) auto;
  gap: 24px 40px;
  align-items: start;
  padding: 40px 0;
  border-top: 1px solid rgba(9,35,55,0.12);
}
body .fo-place:last-child { border-bottom: 1px solid rgba(9,35,55,0.12); }
body .fo-num { font-family: var(--boer-serif); font-size: clamp(2.4rem, 3.4vw, 3.2rem); line-height: 0.9; color: var(--boer-gold-ink); }
body .fo-tag {
  margin: 0 0 10px; font-family: var(--boer-sans); font-size: 11px; font-weight: 500;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--boer-gold-ink);
}
body .fo-name { margin: 0 0 8px; font-family: var(--boer-serif); font-size: var(--boer-h-m); font-weight: 400; line-height: 1.15; color: var(--boer-navy); }
body .fo-info, body .fo-details p {
  margin: 0 0 10px; font-family: var(--boer-sans); font-size: var(--boer-text); font-weight: 300; line-height: 1.7; color: var(--boer-ink-muted);
}
body .fo-links { display: flex; flex-direction: column; gap: 14px; padding-top: 4px; }
body .fo-place--soon .fo-num,
body .fo-place--soon .fo-name { color: rgba(9,35,55,0.58); }
@media (max-width: 960px) {
  body .fo-place { grid-template-columns: 64px minmax(0, 1fr); }
  body .fo-details, body .fo-links { grid-column: 2; }
  body .fo-links { flex-direction: row; flex-wrap: wrap; gap: 12px 28px; }
}

body .fo-cta { background: #F7F4EF; padding: clamp(64px, 8vw, 112px) 0; }
body .fo-cta-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; }
body .fo-cta-grid > div { padding-right: clamp(24px, 5vw, 72px); }
body .fo-cta-grid > div + div { padding: 0 0 0 clamp(24px, 5vw, 72px); border-left: 1px solid rgba(9,35,55,0.12); }
body .fo-cta .btn-primary { background: var(--boer-navy); border-color: var(--boer-navy); color: #EEE8DC !important; }
body .fo-cta .btn-primary:hover { background: var(--boer-gold); border-color: var(--boer-gold); color: var(--boer-navy) !important; }
@media (max-width: 860px) {
  body .fo-cta-grid { grid-template-columns: 1fr; gap: 56px; }
  body .fo-cta-grid > div + div { padding: 56px 0 0; border-left: 0; border-top: 1px solid rgba(9,35,55,0.12); }
}

/* Verweis auf die Service-Seite (Produktseiten, Shop-Übersicht) */
body .form-faq-link { margin-top: 28px; }
body .prod-service { margin: clamp(40px, 5vw, 64px) 0 0; text-align: center; }

/* ─────────────────────────────────────────────
   Newsletter „Flaschenpost“
   Footer: nur ein Link unter den Social-Icons → eigene Seite flaschenpost.html
   ───────────────────────────────────────────── */
body #site-footer .ft-col a.ft-nl-link {
  display: inline-flex; align-items: center; gap: 10px; margin-top: 18px;
  font-family: var(--boer-sans); font-size: 12px; font-weight: 400; line-height: 18px;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--boer-gold);
}
body #site-footer .ft-col a.ft-nl-link::after { content: "→"; letter-spacing: 0; transition: transform 0.25s; }
body #site-footer .ft-col a.ft-nl-link:hover { color: #FFFFFF; }
body #site-footer .ft-col a.ft-nl-link:hover::after { transform: translateX(5px); }

/* Seite „Flaschenpost“ */
body .fp-page { background: #FFFFFF; padding: clamp(64px, 8vw, 112px) 0; }
body .fp-page-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(40px, 7vw, 112px); align-items: start; }
@media (max-width: 860px) { body .fp-page-grid { grid-template-columns: 1fr; } }
body .fp-list { list-style: none; margin: 8px 0 0; padding: 0; }
body .fp-list li {
  display: flex; align-items: baseline; gap: 24px; padding: 20px 0;
  border-top: 1px solid rgba(9,35,55,0.12);
  font-family: var(--boer-serif); font-size: var(--boer-h-s); line-height: 1.3; color: var(--boer-navy);
}
body .fp-list li:last-child { border-bottom: 1px solid rgba(9,35,55,0.12); }
body .fp-list-num { flex: 0 0 40px; font-family: var(--boer-serif); font-size: 1.1em; color: var(--boer-gold-ink); }
body .fp-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
body .fp-form input {
  display: block; width: 100%; height: 52px; margin: 8px 0 28px; padding: 0; border: 0;
  border-bottom: 1px solid rgba(9,35,55,0.3); border-radius: 0; background: transparent; outline: none;
  font-family: var(--boer-sans); font-size: 1.05rem; font-weight: 300; color: var(--boer-navy); transition: border-color 0.25s;
}
body .fp-form input::placeholder { color: rgba(9,35,55,0.5); }
body .fp-form input:focus { border-bottom-color: var(--boer-gold-ink); }
body .fp-form .btn-primary { background: var(--boer-navy); border-color: var(--boer-navy); color: #EEE8DC !important; }
body .fp-form .btn-primary:hover { background: var(--boer-gold); border-color: var(--boer-gold); color: var(--boer-navy) !important; }
body .fp-note { margin: 20px 0 0; max-width: 480px; font-family: var(--boer-sans); font-size: 13px; font-weight: 300; line-height: 1.7; color: var(--boer-ink-muted); }
body .fp-note a { color: inherit; text-decoration: underline; }
body .fp-msg { margin: 14px 0 0; font-family: var(--boer-sans); font-size: 14px; color: var(--boer-navy); }
body .fp-msg:empty { display: none; }
body .fp-msg--ok { color: var(--boer-gold-ink); }
body .fp-msg--error { color: #B3261E; }

/* Footer: Abstände und Zeilenhöhen auf allen Seiten gleich (einige Seiten wichen ab) */
body #site-footer .ft-col-head { line-height: 19px; margin-bottom: 18px; }
body #site-footer .ft-legal { padding-top: 18px; padding-bottom: 18px; margin-top: 0; }
body #site-footer .ft-legal a,
body #site-footer .ft-legal .ft-legal-sep,
body #site-footer .ft-legal .ft-copy { line-height: 17px; }