/*!
 * Feierling — Joomla site template
 * Hausbrauerei Feierling, Freiburg
 * Design tokens mirror the "Feierling" design system (tokens.json).
 */

/* ---------- Fonts (self-hosted, no third-party requests) ---------- */
@font-face {
  font-family: "Feierling Hand";
  src: url("../fonts/texgyrechorus-mediumitalic.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Lora";
  src: url("../fonts/lora-latin.woff") format("woff");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Lora";
  src: url("../fonts/lora-italic-latin.woff") format("woff");
  font-weight: 400 700;
  font-style: italic;
  font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  /* colour */
  --cream: #f7f0e3;
  --cream-raised: #fffaf1;
  --line: #e2d5bf;
  --ink: #2a1d12;
  --ink-muted: #6b5a47;
  --amber: #c8811f;
  --amber-deep: #8a4f0e;
  --foam: #f1dfb4;
  --malt: #6e3b1a;
  --malt-deep: #4a2610;
  --teal: #2d989d;          /* logo colour rgb(45,152,157) */
  --teal-deep: #1d6e72;     /* buttons, links, focus — 5.7:1 with cream-raised */
  --teal-hover: #175a5d;
  --teal-dark: #0f3f42;     /* footer, top bar */
  --teal-tint: #e2f1f1;     /* tinted cards */

  /* type */
  --font-serif: "Lora", Georgia, "Times New Roman", serif;
  --font-hand: "Feierling Hand", "Bradley Hand", "Segoe Print", "Ink Free", cursive;
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* spacing (8px base) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;

  /* radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-full: 9999px;

  --shadow-sm: 0 1px 2px rgba(42, 29, 18, .06), 0 1px 1px rgba(42, 29, 18, .04);
  --shadow-md: 0 8px 24px rgba(42, 29, 18, .10);

  --container: 1200px;
  --gutter: var(--space-6);
  --header-h: 76px;

  /* Bootstrap bridge (core layouts, forms, alerts, pagination) */
  --bs-body-font-family: var(--font-sans);
  --bs-body-font-size: 1.0625rem;
  --bs-body-line-height: 1.65;
  --bs-body-color: var(--ink);
  --bs-body-bg: var(--cream);
  --bs-emphasis-color: var(--ink);
  --bs-secondary-color: var(--ink-muted);
  --bs-border-color: var(--line);
  --bs-link-color: var(--teal-deep);
  --bs-link-color-rgb: 29, 110, 114;
  --bs-link-hover-color: var(--teal-hover);
  --bs-link-hover-color-rgb: 23, 90, 93;
  --bs-primary: var(--teal-deep);
  --bs-primary-rgb: 29, 110, 114;
  --bs-border-radius: var(--radius-md);
  --bs-border-radius-sm: var(--radius-sm);
  --bs-heading-color: var(--ink);
  --bs-focus-ring-color: rgba(29, 110, 114, .35);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body.has-sticky-header { scroll-padding-top: calc(var(--header-h) + var(--space-4)); }

h1, h2, h3, h4, .h1, .h2, .h3, .h4 {
  font-family: var(--font-serif);
  font-weight: 600;
  color: var(--ink);
  line-height: 1.2;
  margin: 0 0 var(--space-4);
  text-wrap: balance;
}
h1, .h1 { font-size: clamp(1.625rem, 1.25rem + 1.4vw, 2.25rem); letter-spacing: -.005em; }
h2, .h2 { font-size: clamp(1.3125rem, 1.1rem + .8vw, 1.75rem); }
h3, .h3 { font-size: 1.1875rem; }
h4, .h4 { font-size: 1.0625rem; }

p, ul, ol, dl, table, figure { margin: 0 0 var(--space-4); }
img { max-width: 100%; height: auto; }
img[loading] { background: var(--line); }

a { color: var(--teal-deep); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { color: var(--teal-hover); text-decoration-thickness: 2px; }

:focus-visible { outline: 3px solid var(--teal-deep); outline-offset: 2px; border-radius: var(--radius-sm); }

hr { border: 0; border-top: 1px solid var(--line); margin: var(--space-8) 0; opacity: 1; }

blockquote {
  margin: 0 0 var(--space-6);
  padding: var(--space-2) 0 var(--space-2) var(--space-6);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.25rem;
  color: var(--teal-deep);
  border: 0;
  position: relative;
}
blockquote::before {
  content: "\201E";
  position: absolute; left: 0; top: -.2em;
  font-size: 2.5rem; line-height: 1; color: var(--teal);
}

.visually-hidden, .element-invisible {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: var(--space-4); top: -100px; z-index: 1000;
  padding: var(--space-2) var(--space-4);
  background: var(--teal-deep); color: var(--cream-raised);
  border-radius: var(--radius-md); text-decoration: none; font-weight: 600;
}
.skip-link:focus-visible { top: var(--space-2); color: var(--cream-raised); }

.container {
  width: 100%;
  max-width: calc(var(--container) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}
@media (max-width: 575.98px) { :root { --gutter: var(--space-4); } }

/* ---------- Buttons ---------- */
.btn {
  --bs-btn-font-family: var(--font-sans);
  --bs-btn-font-weight: 600;
  --bs-btn-border-radius: var(--radius-md);
  --bs-btn-padding-x: 1.25rem;
  --bs-btn-padding-y: .625rem;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: .9375rem;
  line-height: 1.25;
  padding: .625rem 1.25rem;
  border-radius: var(--radius-md);
  border: 2px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.btn-primary, .readmore .btn, button[type="submit"].btn:not(.btn-secondary):not(.btn-danger) {
  --bs-btn-bg: var(--teal-deep); --bs-btn-border-color: var(--teal-deep); --bs-btn-color: var(--cream-raised);
  --bs-btn-hover-bg: var(--teal-hover); --bs-btn-hover-border-color: var(--teal-hover); --bs-btn-hover-color: var(--cream-raised);
  --bs-btn-active-bg: var(--teal-hover); --bs-btn-active-border-color: var(--teal-hover);
  background: var(--teal-deep); border-color: var(--teal-deep); color: var(--cream-raised);
}
.btn-primary:hover, .readmore .btn:hover { background: var(--teal-hover); border-color: var(--teal-hover); color: var(--cream-raised); }

.btn-secondary, .btn-outline {
  --bs-btn-bg: transparent; --bs-btn-color: var(--teal-deep); --bs-btn-border-color: var(--teal-deep);
  --bs-btn-hover-bg: var(--teal-deep); --bs-btn-hover-color: var(--cream-raised);
  background: transparent; color: var(--teal-deep); border-color: var(--teal-deep);
}
.btn-secondary:hover, .btn-outline:hover { background: var(--teal-deep); color: var(--cream-raised); }

.btn-cta {
  background: var(--amber); color: var(--ink); border-color: var(--amber);
}
.btn-cta:hover { background: #d9963a; border-color: #d9963a; color: var(--ink); }

/* ---------- Top bar ---------- */
.topbar {
  background: var(--teal-dark);
  color: var(--cream);
  font-size: .875rem;
}
.topbar__inner { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); justify-content: space-between; padding-block: var(--space-2); }
.topbar p { margin: 0; }
.topbar a { color: #a5e0e2; }

/* ---------- Header ---------- */
.site-header {
  background: var(--cream-raised);
  border-top: 4px solid var(--teal);
  border-bottom: 1px solid var(--line);
  z-index: 100;
}
.has-sticky-header .site-header { position: sticky; top: 0; }
.site-header.is-scrolled { box-shadow: var(--shadow-md); }

.site-header__inner {
  display: flex; align-items: center; gap: var(--space-6);
  min-height: var(--header-h);
}

.brand {
  display: inline-flex; flex-direction: column; justify-content: center;
  text-decoration: none; color: var(--ink); margin-right: auto; line-height: 1;
}
.brand:hover { color: var(--ink); }
.brand__name { font-family: var(--font-serif); font-weight: 700; font-size: 1.75rem; letter-spacing: -.01em; }
.brand__tagline {
  margin-top: 6px;
  font-size: .6875rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--teal-deep);
}
.brand__logo { display: block; max-height: 56px; width: auto; }
.brand--center { align-items: center; text-align: center; margin: 0 0 var(--space-6); }

/* Navigation (core mod_menu markup) */
.site-nav ul { list-style: none; margin: 0; padding: 0; }
.site-nav a, .site-nav .separator, .site-nav .nav-header, .site-nav .mod-menu__heading {
  display: block;
  color: var(--ink);
  text-decoration: none;
  font-weight: 600;
  font-size: .9375rem;
}
.site-nav .site-nav__cta { display: none; }

/* Auf-/Zuklapp-Button, den Joomla 5 hinter jedem Punkt mit Untermenü ausgibt (<button class="mod-menu__toggle-sub">).
 * Ohne eigene Gestaltung wäre das ein grauer Standard-Button unter dem Link – deshalb hier als schlichter Pfeil. */
.site-nav .mod-menu__toggle-sub {
  margin: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; line-height: 1; cursor: pointer;
}
.site-nav .mod-menu__toggle-sub .icon-chevron-down {
  display: block; width: 7px; height: 7px; font-size: 0;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg); transition: transform .15s ease;
}
/* falls Joomlas Icon-Schrift geladen ist, nicht doppelt zeichnen */
.site-nav .mod-menu__toggle-sub .icon-chevron-down::before { content: none !important; }
/* Dritte Ebene: wird immer ausgeklappt gezeigt, braucht keinen Button */
.site-nav .mod-menu__sub .mod-menu__toggle-sub { display: none; }

@media (min-width: 992px) {
  .site-header .nav-toggle { display: none; }

  /* Alle Hauptpunkte in einer Zeile, gleich hoch und mittig – egal ob mit oder ohne Untermenü */
  .site-nav > ul, .site-nav .mod-menu { display: flex; flex-wrap: nowrap; align-items: stretch; gap: var(--space-1); }
  .site-nav .mod-menu > li { position: relative; display: flex; align-items: center; border-radius: var(--radius-md); }
  .site-nav .mod-menu > li:hover { background: var(--cream); }
  .site-nav .mod-menu > li > a,
  .site-nav .mod-menu > li > span {
    display: flex; align-items: center;
    min-height: 44px; padding: 0 var(--space-3);
    line-height: 1.25; white-space: nowrap;
  }
  .site-nav .mod-menu > li.parent > a, .site-nav .mod-menu > li.parent > span { padding-right: var(--space-1); }
  .site-nav .mod-menu > li.active { border-radius: var(--radius-md) var(--radius-md) 0 0; box-shadow: inset 0 -3px 0 var(--teal); }
  .site-nav .mod-menu > li.active > a, .site-nav .mod-menu > li.current > a { color: var(--teal-deep); }

  .site-nav .mod-menu > li > .mod-menu__toggle-sub {
    flex: none; align-self: stretch; display: grid; place-items: center;
    width: 28px; margin-right: var(--space-1); border-radius: var(--radius-sm); opacity: .65;
  }
  .site-nav .mod-menu > li > .mod-menu__toggle-sub:hover { opacity: 1; }
  .site-nav .mod-menu__toggle-sub[aria-expanded="true"] .icon-chevron-down { transform: translateY(2px) rotate(-135deg); }
  .nav-hover .site-nav .mod-menu > li:hover > .mod-menu__toggle-sub .icon-chevron-down { transform: translateY(2px) rotate(-135deg); }

  /* Pfeil am Link nur, wenn Joomla keinen Button ausgibt (ältere Menü-Layouts) */
  .site-nav .mod-menu > li.parent:not(:has(> .mod-menu__toggle-sub)) > a::after,
  .site-nav .mod-menu > li.parent:not(:has(> .mod-menu__toggle-sub)) > span::after {
    content: ""; flex: none; width: 6px; height: 6px; margin: -3px 0 0 8px;
    border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg);
    opacity: .6;
  }

  /* Dropdown: öffnet per Klick auf den Pfeil-Button (Maus, Tastatur, Touch); im Modus „Mausüberfahren“ (Body-Klasse nav-hover) auch beim Überfahren */
  .site-nav .mod-menu > li > .mod-menu__sub, .site-nav .mod-menu > li > ul {
    position: absolute; left: 0; top: 100%;
    min-width: 230px; width: max-content; max-width: 340px; padding: var(--space-2);
    list-style: none; margin: 0;
    background: var(--cream-raised);
    border: 1px solid var(--line); border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    opacity: 0; visibility: hidden; transform: translateY(6px);
    transition: opacity .15s ease, transform .15s ease, visibility .15s;
    z-index: 20;
  }
  .nav-hover .site-nav .mod-menu > li.parent:hover > ul,
  .site-nav .mod-menu > li > .mod-menu__toggle-sub[aria-expanded="true"] + ul { opacity: 1; visibility: visible; transform: translateY(0); }
  .site-nav .mod-menu__sub a { padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); font-weight: 500; }
  .site-nav .mod-menu__sub a:hover { background: var(--cream); color: var(--teal-deep); }
  .site-nav .mod-menu__sub li.current > a { color: var(--teal-deep); background: var(--cream); }

  /* Letzter Punkt: Dropdown rechtsbündig, damit es nicht über den Rand ragt */
  .site-nav .mod-menu > li:last-child > ul { left: auto; right: 0; }

  /* 3. Ebene (z. B. Speisen & Getränke → Karten): im Dropdown eingerückt, immer sichtbar */
  .site-nav .mod-menu__sub .mod-menu__sub {
    position: static; min-width: 0; width: auto; max-width: none; margin: 0; padding: 0 0 var(--space-1) var(--space-4);
    background: none; border: 0; border-radius: 0; box-shadow: none;
    opacity: 1; visibility: visible; transform: none; transition: none;
  }
  .site-nav .mod-menu__sub .mod-menu__sub a { font-size: .875rem; color: var(--ink-muted); padding-block: var(--space-1); }
  .site-nav .mod-menu__sub .mod-menu__sub a:hover { color: var(--teal-deep); }
}

/* Schmale Desktop-Breiten: enger setzen, damit nichts umbricht */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .site-header__inner { gap: var(--space-3); }
  .site-nav .mod-menu > li > a, .site-nav .mod-menu > li > span { padding: 0 var(--space-2); font-size: .875rem; }
  .site-nav .mod-menu > li.parent > a { padding-right: 2px; }
  .site-nav .mod-menu > li > .mod-menu__toggle-sub { width: 22px; margin-right: 0; }
  .site-header__cta { padding-inline: var(--space-3); }
}

.nav-toggle {
  display: inline-flex; align-items: center; gap: var(--space-2);
  background: none; border: 1px solid var(--line); border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3);
  font: 600 .875rem var(--font-sans); color: var(--ink); cursor: pointer;
}
.nav-toggle__bars, .nav-toggle__bars::before, .nav-toggle__bars::after {
  display: block; width: 18px; height: 2px; background: currentColor; border-radius: 2px;
  transition: transform .2s ease, opacity .2s ease;
}
.nav-toggle__bars { position: relative; }
.nav-toggle__bars::before, .nav-toggle__bars::after { content: ""; position: absolute; left: 0; }
.nav-toggle__bars::before { top: -6px; }
.nav-toggle__bars::after { top: 6px; }
.nav-open .nav-toggle__bars { background: transparent; }
.nav-open .nav-toggle__bars::before { transform: translateY(6px) rotate(45deg); }
.nav-open .nav-toggle__bars::after { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 991.98px) {
  .site-header__cta { display: none; }
  .site-nav {
    position: fixed; inset: var(--header-h) 0 0 0;
    background: var(--cream-raised);
    padding: var(--space-4) var(--gutter) var(--space-12);
    overflow-y: auto;
    display: none;
    border-top: 1px solid var(--line);
  }
  .nav-open .site-nav { display: block; }
  .nav-open { overflow: hidden; }
  /* Das Bootstrap-CSS von Joomla setzt auf ul.nav "display:flex; flex-wrap:wrap": hier untereinander statt nebeneinander */
  .site-nav > ul, .site-nav .mod-menu { display: block; }
  .site-nav .mod-menu > li { display: block; width: 100%; }
  .site-nav .mod-menu > li { display: flex; flex-wrap: wrap; align-items: center; border-bottom: 1px solid var(--line); }
  .site-nav .mod-menu > li > a, .site-nav .mod-menu > li > span { flex: 1 1 0; min-width: 0; padding: .625rem 0; font-family: var(--font-serif); font-size: 1.1875rem; line-height: 1.3; }
  /* Pfeil-Button: klappt die zweite Ebene auf und zu */
  .site-nav .mod-menu > li > .mod-menu__toggle-sub { flex: none; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; margin-right: -.625rem; border-radius: 50%; opacity: .8; }
  .site-nav .mod-menu > li > .mod-menu__toggle-sub:active { background: var(--cream); }
  .site-nav .mod-menu__toggle-sub[aria-expanded="true"] .icon-chevron-down { transform: translateY(2px) rotate(-135deg); }
  /* Zweite Ebene: standardmäßig eingeklappt (der Zweig der aktuellen Seite ist beim Öffnen des Menüs aufgeklappt) */
  .site-nav .mod-menu > li > .mod-menu__sub, .site-nav .mod-menu > li > ul {
    display: none; flex: 0 0 100%; margin: 0 0 var(--space-2) var(--space-1); padding: 0 0 0 var(--space-4);
    list-style: none; border-left: 2px solid var(--line);
  }
  .site-nav .mod-menu > li > .mod-menu__toggle-sub[aria-expanded="true"] + ul { display: block; }
  .site-nav .mod-menu__sub a { padding: .375rem 0; font-weight: 500; font-size: 1rem; color: var(--ink-muted); }
  /* Dritte Ebene bleibt unter ihrem Punkt immer sichtbar */
  .site-nav .mod-menu__sub .mod-menu__sub { display: block; margin: 0 0 var(--space-1) var(--space-1); padding-left: var(--space-4); list-style: none; border-left: 2px solid var(--line); }
  .site-nav .mod-menu__sub .mod-menu__sub a { font-size: .9375rem; padding-block: .25rem; }
  .site-nav li.current > a, .site-nav li.active > a { color: var(--teal-deep); }
  .site-nav .site-nav__cta { display: flex; margin-top: var(--space-6); width: 100%; color: var(--ink); }
}

/* ---------- Hero / banner / slider ---------- */
.hero { position: relative; background: var(--teal-dark); }
.hero .moduletable, .hero .custom { margin: 0; }
.hero img { display: block; width: 100%; height: clamp(280px, 56vh, 640px); object-fit: cover; }
.hero p { margin: 0; }

.hero-banner { position: relative; margin: 0; }
.hero-banner::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(42, 29, 18, .72) 0%, rgba(42, 29, 18, .15) 55%, rgba(42, 29, 18, 0) 100%);
  pointer-events: none;
}
.hero-banner figcaption, .hero-banner .hero-caption {
  position: absolute; z-index: 1; left: 0; right: 0; bottom: 0;
  max-width: calc(var(--container) + 2 * var(--gutter)); margin-inline: auto;
  padding: var(--space-12) var(--gutter);
  color: var(--cream-raised);
}
.hero-banner h1, .hero-banner h2 { color: var(--cream-raised); font-size: clamp(1.75rem, 1.2rem + 2.4vw, 2.75rem); max-width: 18ch; margin-bottom: var(--space-3); }
.hero-banner figcaption p { max-width: 52ch; font-size: 1.125rem; margin-bottom: var(--space-6); }

/* ---------- Photo slider ----------
 * Built from the template settings (home page) or by hand in a module:
 * <div class="fs-slider"><figure><img …><figcaption>…</figcaption></figure> …</div>
 */
.fs-slider {
  position: relative;
  height: clamp(340px, 64vh, 700px);
  overflow: hidden;
  background: var(--teal-dark);
  isolation: isolate;
}
.fs-slider__track { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; }
.fs-slider__slide, .fs-slider > figure, .fs-slider__track > * {
  position: absolute; inset: 0; margin: 0;
  opacity: 0; visibility: hidden;
  transition: opacity .9s ease, visibility 0s linear .9s;
}
.fs-slider__slide.is-active, .fs-slider > figure.is-active, .fs-slider__track > .is-active,
.fs-slider:not(.is-ready) .fs-slider__track > :first-child,
.fs-slider:not(.is-ready) > figure:first-child {
  opacity: 1; visibility: visible; z-index: 1;
  transition: opacity .9s ease, visibility 0s;
}
.fs-slider img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.04); transition: transform 7s ease-out;
}
/* Zoom erst, wenn das Skript bereit ist – sonst stünde das erste Bild schon beim Laden auf 1 und zoomte nicht (ab 1.17.10) */
.fs-slider.is-zooming .is-active img { transform: scale(1); }
.fs-slider figure::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(0deg, rgba(15, 63, 66, .85) 0%, rgba(15, 63, 66, .45) 50%, rgba(15, 63, 66, 0) 80%);
}
.fs-slider__caption, .fs-slider figcaption {
  position: absolute; z-index: 1; left: 0; right: 0; bottom: 0;
  padding-bottom: calc(var(--space-12) + 32px);
  color: var(--cream-raised);
}
.fs-slider figcaption > :not(.container) { max-width: calc(var(--container) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.fs-slider .fs-slider__title {
  font-family: var(--font-serif); font-weight: 600; color: var(--cream-raised);
  font-size: clamp(2rem, 1.3rem + 3vw, 3.5rem); line-height: 1.1; max-width: 18ch; margin: 0 0 var(--space-3);
  text-shadow: 0 1px 12px rgba(15, 63, 66, .35);
}
.fs-slider .fs-slider__text { font-size: 1.125rem; max-width: 52ch; margin: 0 0 var(--space-6); }
.fs-slider__eyebrow {
  display: inline-block; margin-bottom: var(--space-3); padding: 4px 12px; border-radius: var(--radius-full);
  background: var(--teal); color: var(--ink); font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
}

.fs-slider__controls {
  position: absolute; z-index: 2; left: 0; right: 0; bottom: var(--space-6);
}
.fs-slider__controls .container { display: flex; align-items: center; gap: var(--space-3); justify-content: flex-end; }
.fs-slider__dots { display: flex; gap: var(--space-2); margin-right: auto; }
.fs-slider__dot {
  width: 28px; height: 6px; padding: 0; border: 0; border-radius: var(--radius-full);
  background: rgba(255, 250, 241, .45); cursor: pointer; transition: background-color .2s ease, width .2s ease;
}
.fs-slider__dot[aria-current="true"] { background: var(--teal); width: 48px; }
.fs-slider__dot:hover { background: var(--cream-raised); }
.fs-slider__btn {
  width: 44px; height: 44px; display: grid; place-items: center; padding: 0;
  border-radius: var(--radius-full); border: 1px solid rgba(255, 250, 241, .55);
  background: rgba(15, 63, 66, .45); color: var(--cream-raised); cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease;
}
.fs-slider__btn:hover { background: var(--teal); border-color: var(--teal); color: var(--ink); }
.fs-slider__btn svg { width: 18px; height: 18px; }
.fs-slider__btn .icon-play { display: none; }
.fs-slider.is-paused .fs-slider__btn .icon-play { display: block; }
.fs-slider.is-paused .fs-slider__btn .icon-pause { display: none; }
.fs-slider :focus-visible { outline-color: var(--cream-raised); }

@media (max-width: 575.98px) {
  .fs-slider { height: clamp(380px, 72vh, 560px); }
  .fs-slider__btn--prev, .fs-slider__btn--next { display: none; }
  .fs-slider__text { font-size: 1rem; }
}
@media (prefers-reduced-motion: reduce) {
  .fs-slider img { transform: none !important; }
}

/* ---------- Page body ---------- */
.site-body { padding-block: var(--space-8) var(--space-16); }
.is-home .site-body { padding-top: var(--space-12); }

.breadcrumbs-wrap { margin-bottom: var(--space-6); font-size: .875rem; }
.breadcrumb { --bs-breadcrumb-divider-color: var(--ink-muted); --bs-breadcrumb-item-active-color: var(--ink-muted); margin: 0; padding: 0; background: none; }
.breadcrumb { display: flex; flex-wrap: wrap; list-style: none; gap: var(--space-2); }
.breadcrumb-item { display: flex; gap: var(--space-2); color: var(--ink-muted); }
.breadcrumb-item + .breadcrumb-item::before { content: "/"; float: none; padding: 0; color: var(--line); }
.breadcrumb a { color: var(--ink-muted); }

.layout { display: grid; gap: var(--space-12); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 992px) {
  .has-sidebar .layout { grid-template-columns: minmax(0, 1fr) 320px; }
}
.layout__main:focus { outline: none; }

/* Positions with cards */
.pos-top {
  display: grid; gap: var(--space-6);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.pos-top { margin-bottom: var(--space-12); }
/* „bottom“: unter dem Inhalt, die Seitenleiste läuft rechts daneben weiter */
.pos-bottom { display: grid; gap: var(--space-8) var(--space-6); grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); margin-top: var(--space-16); }
.pos-content { margin-bottom: var(--space-8); }
.pos-content > * + * { margin-top: var(--space-6); }
.pos-marginal > * + * { margin-top: var(--space-10, 2.5rem); }

/* Module ohne Zusatzklasse: offen, ohne Kasten. Kasten und Farben über die Modulklassen card, highlight, warm, brand, dark, teaser. */
.module-card { position: relative; padding: 0; background: none; border: 0; }
.module-card__title { margin: 0 0 var(--space-3); font-size: 1.25rem; }
.module-card__title::before { content: ""; display: block; width: 2.5rem; height: 3px; margin-bottom: .6rem; border-radius: 3px; background: var(--amber); }
.module-card__title a, .module-card h2 a, .module-card h3 a, .module-card .mod-articles-title a, .module-card .newsflash-title a { text-decoration: none; color: inherit; }
.module-card__title a:hover, .module-card h2 a:hover, .module-card h3 a:hover, .module-card .mod-articles-title a:hover, .module-card .newsflash-title a:hover { color: var(--teal-deep); text-decoration: underline; text-underline-offset: .2em; }
.module-card__body > :last-child { margin-bottom: 0; }
/* Listen in Modulen der Seitenleiste und der Position „bottom“ (zum Beispiel „Neueste Beiträge“) */
:is(.pos-marginal, .pos-bottom) .module-card ul:not([class*="menu"]):not(.nav) { margin-block: 0; padding-left: 0; list-style: none; }
:is(.pos-marginal, .pos-bottom) .module-card ul:not([class*="menu"]):not(.nav) > li { padding: .5rem 0; border-bottom: 1px dotted var(--line); }
:is(.pos-marginal, .pos-bottom) .module-card ul:not([class*="menu"]):not(.nav) > li:last-child { border-bottom: 0; }
:is(.pos-marginal, .pos-bottom) .module-card ul:not([class*="menu"]):not(.nav) > li > a:first-child { text-decoration: none; font-weight: 600; }
:is(.pos-marginal, .pos-bottom) .module-card ul:not([class*="menu"]):not(.nav) > li > a:first-child:hover { color: var(--teal-deep); text-decoration: underline; text-underline-offset: .2em; }
.module-card figure { margin: 0 0 var(--space-3); }
.module-card figcaption { font-size: .875rem; color: var(--ink-muted); }
.module-card img { border-radius: var(--radius-md); }
.hide-captions figcaption, .hide-captions .caption, .news-cards figcaption { display: none; }

/* Mit Kasten */
.module-card.card, .module-card.highlight, .module-card.warm, .module-card.brand, .module-card.dark, .module-card.teaser {
  background: var(--cream-raised); border: 1px solid var(--line); border-radius: var(--radius-md); padding: var(--space-6);
}
.module-card.plain { background: none; border: 0; padding: 0; }
.module-card.highlight { background: var(--teal-tint); border-color: #c4e3e4; }
.module-card.warm { background: var(--foam); border-color: var(--foam); }
.module-card.brand { background: var(--teal); border-color: var(--teal); color: var(--ink); }
.module-card.brand a { color: var(--ink); }
.module-card.dark { background: var(--teal-dark); border-color: var(--teal-dark); color: var(--cream); }
.module-card.dark .module-card__title, .module-card.dark h2, .module-card.dark h3 { color: var(--cream-raised); }
.module-card.dark a { color: #a5e0e2; }

/* Seitenleiste: eine feine Linie statt Kästen */
@media (min-width: 992px) {
  .has-sidebar .layout__aside { padding-left: var(--space-8); border-left: 1px solid var(--line); }
}

/* Teaser: module class suffix " teaser" — image, then title, then text */
.module-card.teaser {
  display: flex; flex-direction: column;
  padding: 0; overflow: hidden;
  position: relative;
  transition: transform .2s ease, box-shadow .2s ease;
}
.module-card.teaser { border-bottom: 3px solid var(--teal); }
.module-card.teaser:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.module-card.teaser:hover .module-card__title { color: var(--teal-deep); }
.module-card.teaser .module-card__title { order: 2; margin: var(--space-4) var(--space-6) var(--space-1); }
.module-card.teaser .module-card__body { display: contents; }
/* mod_custom verpackt den Inhalt in <div class="mod-custom">: auflösen, damit Bild, Titel und Text in der richtigen Reihenfolge stehen */
.module-card.teaser .mod-custom, .module-card.teaser .custom { display: contents; }
.module-card.teaser { --teaser-ratio: 4 / 3; }
.module-card.teaser img {
  order: 1; display: block; margin: 0; border-radius: 0;
  /* !important: überstimmt feste Größen (style/width/height), die der Editor in das Bild schreibt */
  width: 100% !important; max-width: 100% !important; height: auto !important;
  aspect-ratio: var(--teaser-ratio); object-fit: cover;
}
.module-card.teaser p { order: 3; margin: 0 var(--space-6) var(--space-6); color: var(--ink-muted); font-size: .9375rem; }
.module-card.teaser p:has(> img:only-child),
.module-card.teaser p:has(> a:only-child > img) { margin: 0; order: 1; }
.module-card.teaser a { color: inherit; text-decoration: none; }
.module-card.teaser a::after { content: ""; position: absolute; inset: 0; }
.module-card.teaser:focus-within { outline: 3px solid var(--teal-deep); outline-offset: 2px; }
.module-card.teaser a:focus-visible { outline: none; }

/* Opening hours: <dl class="hours"><dt>Gaststätte</dt><dd>Mo–So 18–24 Uhr</dd>…</dl> */
.hours { display: grid; grid-template-columns: auto 1fr; gap: var(--space-1) var(--space-6); margin: 0 0 var(--space-4); }
.hours dt { font-weight: 600; }
.hours dd { margin: 0; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* Label / eyebrow */
.label, .eyebrow {
  display: inline-block; font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--teal-deep); margin-bottom: var(--space-2);
}
.badge-pill {
  display: inline-block; padding: 2px 10px; border-radius: var(--radius-full);
  background: var(--foam); color: var(--ink); font-size: .8125rem; font-weight: 600;
}

/* ---------- Content (com_content) ---------- */
.page-header { margin-bottom: var(--space-6); }
.page-header h1, .page-header h2 { margin-bottom: 0; }
.item-page, .com-content-article { max-width: none; }
/* Einstellung „Inhaltsbreite: schmal“ (nur ohne Seitenleiste): lesefreundliche Zeilenlänge */
.content-narrow:not(.has-sidebar) .item-page, .content-narrow:not(.has-sidebar) .com-content-article { max-width: 760px; }
.item-page > p:first-of-type, .com-content-article__body > p:first-of-type { font-size: 1.1875rem; color: var(--ink); }

.article-info, .article-info-term {
  display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4);
  font-size: .875rem; color: var(--ink-muted); margin: 0 0 var(--space-6); padding: 0;
}
/* Veröffentlichungsdatum dicht unter der Überschrift (ab 1.17.6) */
.page-header:has(+ .article-info), .page-header:has(+ dl.article-info) { margin-bottom: var(--space-1); }
.item-title:has(+ .article-info), .blog-item h2:has(+ .article-info) { margin-bottom: var(--space-1); }
.page-header + .article-info, .item-title + .article-info { margin-top: 0; }
.article-info dd { margin: 0; }
.article-info-term { display: none; }
.icon-fw, .article-info [class^="icon-"] { display: none; }

.item-image, .item-image img, figure.item-image img { border-radius: var(--radius-md); }
.float-start.item-image, .pull-left.item-image { margin: 0 var(--space-6) var(--space-4) 0; }
.float-end.item-image, .pull-right.item-image { margin: 0 0 var(--space-4) var(--space-6); }
.item-page img, .blog-item img { border-radius: var(--radius-md); }
figure figcaption { font-size: .875rem; color: var(--ink-muted); margin-top: var(--space-2); }

/* Blog as card grid */
.blog-items, .com-content-category-blog__items, .com-content-featured__items {
  display: grid; gap: var(--space-6);
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  margin-bottom: var(--space-8);
}
.blog-items.items-leading, .com-content-category-blog__items.items-leading, .com-content-featured__items.items-leading { grid-template-columns: 1fr; }
.blog-item, .com-content-category-blog__item, .com-content-featured__item {
  background: var(--cream-raised); border: 1px solid var(--line); border-radius: var(--radius-md);
  padding: var(--space-6);
  overflow: hidden;
}
.blog-item .item-title, .blog-item h2 { font-size: 1.1875rem; }
.blog-item .item-title a, .blog-item h2 a { color: var(--ink); text-decoration: none; }
.blog-item .item-title a:hover, .blog-item h2 a:hover { color: var(--teal-deep); }
.readmore { margin: var(--space-4) 0 0; }

/* Blog-Karten: Bild immer oben, randlos und im gleichen Format zugeschnitten (3 : 2) – egal wie das Original aussieht */
.blog-item, .com-content-category-blog__item, .com-content-featured__item { --blog-img-ratio: 3 / 2; }
.blog-item .item-content, .com-content-category-blog__item .item-content, .com-content-featured__item .item-content {
  display: flex; flex-direction: column;
}
.blog-item .item-image, .com-content-category-blog__item .item-image, .com-content-featured__item .item-image {
  order: -1; float: none !important; width: auto; max-width: none;
  margin: calc(-1 * var(--space-6)) calc(-1 * var(--space-6)) var(--space-4);
  border-radius: 0;
}
.blog-item .item-image img, .com-content-category-blog__item .item-image img, .com-content-featured__item .item-image img {
  display: block; margin: 0; border-radius: 0;
  width: 100% !important; max-width: 100% !important; height: auto !important;
  aspect-ratio: var(--blog-img-ratio); object-fit: cover;
}
/* Beitragsbild als Link (Einstellung in Joomla): ganze Bildfläche klickbar; Bildunterschrift erscheint in Blog/Hauptbeiträgen nicht */
.blog-item .item-image > a, .com-content-category-blog__item .item-image > a, .com-content-featured__item .item-image > a { display: block; }
.blog-item .item-image figcaption, .com-content-category-blog__item .item-image figcaption, .com-content-featured__item .item-image figcaption { display: none; }
.blog-item, .com-content-category-blog__item, .com-content-featured__item { display: flex; flex-direction: column; }
.blog-item .item-content, .com-content-category-blog__item .item-content, .com-content-featured__item .item-content { flex: 1; }
.blog-item .readmore, .com-content-category-blog__item .readmore, .com-content-featured__item .readmore { margin-top: auto; padding-top: var(--space-4); }

/* Startseiten-Teaser im Beitrag „Home“: <div class="teaser-boxen"><div class="teaser-box"><a><img></a><h2>…</h2><p>…</p></div> …</div>
 * (Klassen stammen aus dem alten Template). Alle Bilder gleich groß, ganze Karte anklickbar. */
.teaser-boxen { display: grid; gap: var(--space-6); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); margin: 0 0 var(--space-8); }
.teaser-box {
  position: relative; display: flex; flex-direction: column; overflow: hidden;
  background: var(--cream-raised); border: 1px solid var(--line); border-bottom: 3px solid var(--teal); border-radius: var(--radius-md);
  transition: transform .2s ease, box-shadow .2s ease;
}
.teaser-box:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.teaser-box:hover h2 { color: var(--teal-deep); }
.teaser-box > a { display: block; }
.teaser-box img {
  display: block; margin: 0; border-radius: 0;
  width: 100% !important; max-width: 100% !important; height: auto !important;
  aspect-ratio: 4 / 3; object-fit: cover;
}
.teaser-box h2 { font-size: 1.25rem; margin: var(--space-4) var(--space-6) var(--space-1); }
.teaser-box p { margin: 0 var(--space-6) var(--space-6); color: var(--ink-muted); font-size: .9375rem; }
.teaser-box a::after { content: ""; position: absolute; inset: 0; }
.teaser-box a:focus-visible { outline: none; }
.teaser-box:focus-within { outline: 3px solid var(--teal-deep); outline-offset: 2px; }
@media (max-width: 575.98px) { .teaser-box img { aspect-ratio: 16 / 9; } }

/* Startseite: der Beitrag „Home“ ist nur Träger der Teaser – kein Kartenrahmen, keine Autoren-/Klick-Angaben, keine doppelte Überschrift */
.is-home .blog-featured .blog-item, .is-home .com-content-featured .blog-item { background: none; border: 0; padding: 0; }
.is-home .blog-featured .article-info, .is-home .com-content-featured .article-info,
.is-home .blog-featured .blog-item .page-header, .is-home .com-content-featured .blog-item .page-header { display: none; }

/* Erster (großer) Beitrag („Leading Article“): Bild über die volle Kartenbreite, Text darunter.
 * Breiteres Format als die kleinen Karten, damit das Bild bei voller Breite nicht zu hoch wird. */
.items-leading .blog-item, .items-leading .com-content-category-blog__item, .items-leading .com-content-featured__item { --blog-img-ratio: 16 / 9; }
@media (min-width: 768px) {
  .items-leading .blog-item, .items-leading .com-content-category-blog__item, .items-leading .com-content-featured__item { --blog-img-ratio: 21 / 9; }
}

.category-desc { margin-bottom: var(--space-8); max-width: 760px; }

/* Tables (menus / Speisekarte, price lists) */
table, .table {
  --bs-table-bg: transparent; --bs-table-color: var(--ink); --bs-table-border-color: var(--line);
  --bs-table-striped-bg: rgba(241, 223, 180, .35);
  width: 100%; border-collapse: collapse;
}
table th, table td { padding: var(--space-3) var(--space-3); border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
table th { font-weight: 700; font-size: .875rem; letter-spacing: .02em; }
table td:last-child.price, .price { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.table-responsive, .table-wrap { overflow-x: auto; }

/* Speisekarte: <ul class="menu-list"><li><span class="dish">…</span><span class="price">…</span><small>…</small></li></ul> */
.menu-list { list-style: none; padding: 0; margin: 0 0 var(--space-8); }
.menu-list li { display: grid; grid-template-columns: 1fr auto; gap: 0 var(--space-4); padding: var(--space-3) 0; border-bottom: 1px dashed var(--line); }
.menu-list .dish { font-family: var(--font-serif); font-weight: 600; font-size: 1.125rem; }
.menu-list small { grid-column: 1 / -1; color: var(--ink-muted); font-size: .875rem; }

/* Pagination
 * Joomla zeichnet „Anfang / Zurück / Weiter / Ende“ als leere <span class="icon-angle-…">, die erst durch die Icon-Schrift sichtbar werden.
 * Die Schrift ist hier nicht geladen → diese Felder waren leer und nur 14 px hoch, die Zahlen 40 px. Jetzt: alle Felder gleich groß,
 * Pfeile per CSS-Maske (unabhängig von Icon-Schriften). */
.pagination {
  --bs-pagination-color: var(--ink); --bs-pagination-bg: var(--cream-raised); --bs-pagination-border-color: var(--line);
  --bs-pagination-hover-color: var(--teal-deep); --bs-pagination-hover-bg: var(--cream); --bs-pagination-hover-border-color: var(--teal);
  --bs-pagination-active-bg: var(--teal-deep); --bs-pagination-active-border-color: var(--teal-deep); --bs-pagination-active-color: var(--cream-raised);
  --bs-pagination-disabled-color: var(--ink-muted); --bs-pagination-disabled-bg: transparent; --bs-pagination-disabled-border-color: var(--line);
  --bs-pagination-focus-box-shadow: 0 0 0 3px rgba(29, 110, 114, .35);
  --bs-pagination-border-radius: var(--radius-sm);
  display: flex; flex-wrap: wrap; align-items: stretch; gap: var(--space-2);
  list-style: none; padding-left: 0; margin: var(--space-6) 0;
}
.pagination .page-item { display: flex; }
.pagination .page-item:not(:first-child) .page-link { margin-left: 0; }
.pagination .page-link,
.pagination .page-item:first-child .page-link,
.pagination .page-item:last-child .page-link {
  display: flex; align-items: center; justify-content: center;
  min-width: 2.75rem; height: 2.75rem; padding: 0 var(--space-3);
  font-size: .9375rem; font-weight: 600; line-height: 1;
  border-radius: var(--radius-sm);
}
.pagination .disabled .page-link { opacity: .55; }

.pagination [class*="icon-angle-"] {
  display: block; width: 1.125rem; height: 1.125rem; font-size: 0; background-color: currentColor;
  -webkit-mask: var(--pg-icon) center / contain no-repeat; mask: var(--pg-icon) center / contain no-repeat;
}
.pagination [class*="icon-angle-"]::before { content: none !important; }
.pagination .icon-angle-left { --pg-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 18l-6-6 6-6'/%3E%3C/svg%3E"); }
.pagination .icon-angle-right { --pg-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18l6-6-6-6'/%3E%3C/svg%3E"); }
.pagination .icon-angle-double-left { --pg-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 17l-5-5 5-5M18 17l-5-5 5-5'/%3E%3C/svg%3E"); }
.pagination .icon-angle-double-right { --pg-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 17l5-5-5-5M6 17l5-5-5-5'/%3E%3C/svg%3E"); }

@media (max-width: 575.98px) {
  .pagination { gap: 6px; }
  .pagination .page-link,
  .pagination .page-item:first-child .page-link,
  .pagination .page-item:last-child .page-link { min-width: 2.5rem; height: 2.5rem; padding: 0 var(--space-2); }
}
.com-content-category-blog__navigation, .pagination__wrapper { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4); }
.counter { color: var(--ink-muted); font-size: .875rem; }

/* Einzelansicht eines Beitrags: Beitragsbild rechts, vom Text umflossen (ab Tablet-Breite); mobil über die volle Breite */
@media (min-width: 768px) {
  .com-content-article > .item-image { float: right !important; width: min(44%, 34rem); margin: 0 0 var(--space-4) var(--space-8); }
  .com-content-article > .item-image img { display: block; width: 100%; height: auto; }
  .com-content-article > .item-image figcaption { margin-top: var(--space-2); font-size: .875rem; color: var(--ink-muted); }
}

/* ============ Startseite (ab 1.2.0) ============ */
[hidden] { display: none !important; }

/* Info-Leiste: Custom-Modul in Position „top“, Modulklasse „ infobar“.
 * Helle Gasthaus-Leiste: links Öffnungszeiten und Gerichte des Tages, rechts das Reservierungs-Widget von resmio. */
.pos-top > .infobar {
  grid-column: 1 / -1; position: relative; overflow: visible;
  padding: var(--space-8); color: var(--ink);
  background: var(--cream-raised); border: 1px solid #e3d5b6; border-top: 4px solid var(--amber); border-radius: var(--radius-md);
  box-shadow: var(--shadow-md), inset 0 0 0 6px var(--cream-raised), inset 0 0 0 7px #efe3c8;
}
.infobar .module-card__body { display: block; }
.infobar .mod-custom { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-6) var(--space-12); }
.infobar p { margin: 0; }

/* Linke Spalte: Zeiten und Gerichte */
.infobar__info { flex: 1 1 24rem; align-self: stretch; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: var(--space-6); }
.infobar__hours { font-size: .9375rem; line-height: 1.9; }
.infobar__hours::before, .infobar__label {
  display: block; margin-bottom: var(--space-2);
  font-family: var(--font-sans); font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--amber);
}
.infobar__hours::before { content: "Geöffnet"; }
.infobar__hours strong { display: inline-block; min-width: 6.4em; font-family: var(--font-serif); font-weight: 700; color: var(--teal-deep); }
.infobar__menu { flex: 1 1 22rem; min-width: 0; }
.infobar__info > .infobar__menu { flex: 0 0 auto; padding-top: var(--space-6); border-top: 1px dotted #cdb98f; }
.infobar__dishes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.infobar__dishes li { display: flex; align-items: baseline; gap: var(--space-2); font-family: var(--font-serif); font-size: 1.125rem; font-weight: 600; line-height: 1.35; color: var(--ink); }
.infobar__dishes li::after { content: ""; order: 1; flex: 1 1 1.5rem; min-width: 1.5rem; align-self: flex-end; margin-bottom: .35em; border-bottom: 2px dotted #cdb98f; }
.infobar__dishes li:not(:has(.price))::after { display: none; }
.infobar__dishes .price { order: 2; margin: 0; font-family: var(--font-sans); font-size: .9375rem; font-weight: 700; color: var(--teal-deep); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Rechte Spalte: Reservierungs-Widget (resmio, 291 × 406 px laut Einbettungscode) */
.infobar__resmio { flex: 0 0 291px; max-width: 100%; min-height: 406px; margin-inline: auto; }
#resmio-hausbrauerei-feierling { min-height: 406px; }
#resmio-hausbrauerei-feierling:empty::before { content: "Reservierung wird geladen …"; display: block; padding: var(--space-8) var(--space-4); text-align: center; color: var(--ink-muted); font-size: .9375rem; }
#resmio-hausbrauerei-feierling iframe { display: block; max-width: 100%; border: 0; }

/* Ältere Modul-Fassung (Zeiten, Gerichte und Knopf nebeneinander) bleibt lesbar */
.infobar .mod-custom > .infobar__hours { flex: 0 0 auto; }
.infobar .mod-custom > .infobar__menu { flex: 1 1 22rem; }
.infobar .btn-cta { margin-left: auto; box-shadow: 0 2px 0 rgba(0, 0, 0, .2); }
.infobar .mod-custom > p:has(> .btn-cta) { margin-left: auto; }
@media (min-width: 768px) {
  .infobar .mod-custom > .infobar__hours { padding-right: var(--space-12); border-right: 1px solid #e3d5b6; }
}
@media (max-width: 767.98px) {
  .pos-top > .infobar { padding: var(--space-6) var(--space-4); }
  .infobar .mod-custom { gap: var(--space-6); }
  .infobar__info { flex-basis: 100%; }
  .infobar .mod-custom > .infobar__hours { width: 100%; }
  .infobar .btn-cta { margin-left: 0; width: 100%; }
  .infobar .mod-custom > p:has(> .btn-cta) { margin-left: 0; width: 100%; }
  .infobar__dishes li { flex-direction: column; gap: 0; }
  .infobar__dishes li::after { display: none; }
}

/* Info-Leiste ab 1.16.0: drei gleichwertige Spalten – Öffnungszeiten (verschachteltes Modul), Gerichte von heute, Reservierung.
 * Jede Spalte hat dieselbe Kopfzeile; getrennt werden sie durch eine gepunktete Linie wie auf einer Speisekarte. */
.infobar__grid { flex: 1 1 100%; min-width: 0; display: grid; grid-template-columns: minmax(15rem, 1fr) minmax(16rem, 1.15fr) calc(291px + var(--space-8)); gap: var(--space-8) 0; align-items: stretch; }
.infobar__col { min-width: 0; padding-inline: var(--space-8); }
.infobar__col:first-child { padding-left: 0; }
.infobar__col:last-child { padding-right: 0; }
.infobar__col + .infobar__col { border-left: 1px dotted #cdb98f; }
.infobar .infobar__label { margin: 0 0 var(--space-3); padding: 0 0 var(--space-2); border-bottom: 2px solid var(--foam); font-family: var(--font-sans); font-size: .75rem; line-height: 1.4; }
.infobar__col .infobar__label::before { content: none; }
.infobar .infobar__more { margin: var(--space-4) 0 0; font-size: .9375rem; }
.infobar__more a { font-weight: 600; }
.infobar__fallback { display: none; margin: 0; color: var(--ink-muted); font-size: .9375rem; }
.infobar__menu[hidden] + .infobar__fallback { display: block; }

/* Öffnungszeiten-Modul in der Leiste: kompakt, ohne Wochenübersicht-Rahmen */
.infobar .oz--list .oz__item { padding: .5rem 0; }
.infobar .oz__name { font-size: 1.125rem; }
.infobar .oz__today { font-size: .9375rem; }
.infobar .oz__status { font-size: .8125rem; }
.infobar .oz__week { margin-top: var(--space-3); }

/* Gerichte in der mittleren Spalte: Name über dem Preis, damit lange Namen nicht umbrechen müssen */
.infobar__col--menu .infobar__dishes { gap: var(--space-3); }
.infobar__col--menu .infobar__dishes li { font-size: 1.0625rem; }

/* Reservierung: Widget bündig unter der Kopfzeile */
.infobar__col--res .infobar__resmio { flex: none; min-height: 0; margin: 0; }
.infobar__col--res { display: flex; flex-direction: column; }
.infobar__col--res .infobar__resmio, .infobar__col--res #resmio-hausbrauerei-feierling { width: 291px; max-width: 100%; }

@media (max-width: 1099.98px) {
  /* Tablet: Zeiten und Gerichte übereinander links, Widget rechts */
  .infobar__grid { grid-template-columns: minmax(0, 1fr) calc(291px + var(--space-8)); grid-template-rows: auto auto; gap: var(--space-8) 0; }
  .infobar__grid > .infobar__col--hours { grid-column: 1; grid-row: 1; padding-right: var(--space-8); }
  .infobar__grid > .infobar__col--menu { grid-column: 1; grid-row: 2; padding-left: 0; padding-right: var(--space-8); border-left: 0; border-top: 1px dotted #cdb98f; padding-top: var(--space-6); }
  .infobar__grid > .infobar__col--res { grid-column: 2; grid-row: 1 / span 2; padding-right: 0; border-left: 1px dotted #cdb98f; padding-left: var(--space-8); }
}
@media (max-width: 767.98px) {
  .infobar__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
  .infobar__grid > .infobar__col { grid-column: 1; grid-row: auto; padding: 0; border-left: 0; border-top: 0; }
  .infobar__grid > .infobar__col + .infobar__col { border-top: 1px dotted #cdb98f; padding-top: var(--space-6); }
  .infobar__col--res { align-items: center; }
  .infobar__col--res .infobar__label { align-self: stretch; }
  .infobar__col--menu .infobar__dishes li { flex-direction: row; flex-wrap: wrap; justify-content: space-between; gap: 0 var(--space-3); }
}

/* ============ Seite „Biergarten“ (ab 1.16.0): nutzt Aufbau und Piktogramme der Gaststätte, dazu Saison-Leiste und Vesper-Hinweis ============ */
.gst-page { --ico-guests: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='17' cy='15' r='6'/%3E%3Ccircle cx='33' cy='18' r='5'/%3E%3Cpath d='M5 40c0-8 5-13 12-13s12 5 12 13'/%3E%3Cpath d='M30 28c8-1 13 4 13 12'/%3E%3C/svg%3E"); --ico-sun: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='24' cy='24' r='8'/%3E%3Cpath d='M24 5v6M24 37v6M5 24h6M37 24h6M10.5 10.5l4 4M33.5 33.5l4 4M10.5 37.5l4-4M33.5 14.5l4-4'/%3E%3C/svg%3E"); --ico-gallery: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 22h36M6 40h36'/%3E%3Cpath d='M11 22v18M19 22v18M27 22v18M35 22v18'/%3E%3Cpath d='M12 15c4-7 20-7 24 0'/%3E%3C/svg%3E"); }
.gst-page .gst-facts li[data-ico="guests"] { --ico: var(--ico-guests); }
.gst-page .gst-facts li[data-ico="sun"] { --ico: var(--ico-sun); }
.gst-page .gst-facts li[data-ico="gallery"] { --ico: var(--ico-gallery); }
.bg-page .gst-intro__text p:not(.gst-lead) { max-width: 38rem; }
/* Saison: Monatsleiste, März bis Spätherbst gefüllt */
.bg-season { margin: var(--space-12) 0 0; }
.bg-season h2 { margin: 0 0 var(--space-4); }
.bg-season__months { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 6px; margin: 0; padding: 0; list-style: none; }
.bg-season__months li { padding: var(--space-3) 0; text-align: center; font-family: var(--font-serif); font-size: .9375rem; font-weight: 700; color: #a69a85; background: transparent; border: 1px dashed #d8c9a8; border-radius: var(--radius-sm); }
.bg-season__months li.on { color: var(--cream-raised); background: var(--amber); border: 1px solid var(--amber-deep); box-shadow: 0 2px 0 rgba(0, 0, 0, .15); }
.bg-season__months li.late { color: var(--amber-deep); background: linear-gradient(90deg, var(--foam), transparent); border: 1px dashed var(--amber); }
.bg-season__note { margin: var(--space-3) 0 0; font-size: .9375rem; color: var(--ink-muted); }
@media (max-width: 767.98px) {
  .bg-season__months { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
/* Vesperkarte: Foto als Schnappschuss, daneben der Hinweis und der Weg zur Karte */
.bg-vesper { display: grid; gap: var(--space-12); grid-template-columns: minmax(0, 1fr); align-items: center; margin: var(--space-12) 0 var(--space-8); }
@media (min-width: 900px) { .bg-vesper { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); } }
.bg-vesper__photo { margin: 0; }
.bg-vesper__photo img { display: block; width: 100%; height: auto; }
.bg-vesper__photo:has(img.is-missing) { display: none; }
.bg-vesper:has(img.is-missing) { grid-template-columns: minmax(0, 1fr); }
.bg-vesper__text { padding: var(--space-6) var(--space-8); background: var(--cream-raised); border: 1px solid #e3d5b6; border-left: 4px solid var(--amber); border-radius: var(--radius-md); }
.bg-vesper__text h2 { margin: 0 0 var(--space-3); }
.bg-vesper__text p { margin: 0 0 var(--space-4); }
.bg-vesper__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin: var(--space-6) 0 0; }

/* ============ Seite „Insel“ (ab 1.17.0): Aufbau wie Gaststätte, dazu Öffnungszeiten (verschachteltes Modul) und Feiern ============ */
.ins-page { --ico-lamp: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M24 4v10'/%3E%3Cpath d='M12 30c0-9 5-16 12-16s12 7 12 16z'/%3E%3Cpath d='M20 36a4 4 0 008 0'/%3E%3Cpath d='M10 30h28'/%3E%3C/svg%3E"); --ico-cheers: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 12l9 3-2 10a5 5 0 01-9-3z'/%3E%3Cpath d='M39 12l-9 3 2 10a5 5 0 009-3z'/%3E%3Cpath d='M12 27l-3 13M36 27l3 13M5 40h8M35 40h8'/%3E%3Cpath d='M22 6l2-3 2 3M17 8l-2-2M31 8l2-2'/%3E%3C/svg%3E"); }
.gst-page .gst-facts li[data-ico="lamp"] { --ico: var(--ico-lamp); }
.gst-page .gst-facts li[data-ico="cheers"] { --ico: var(--ico-cheers); }
.ins-info { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-8); margin: var(--space-12) 0 0; }
@media (min-width: 900px) { .ins-info { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: stretch; } }
.ins-hours, .ins-events { padding: var(--space-6) var(--space-8); background: var(--cream-raised); border: 1px solid #e3d5b6; border-radius: var(--radius-md); }
.ins-hours { border-top: 4px solid var(--amber); }
.ins-events { border-left: 4px solid var(--teal-deep); }
.ins-hours h2, .ins-events h2 { margin: 0 0 var(--space-4); }
.ins-events p { margin: 0 0 var(--space-4); }
.ins-events__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6) !important; }
.ins-events a[href^="tel:"] { white-space: nowrap; }
@media (max-width: 575.98px) { .ins-hours, .ins-events { padding: var(--space-6) var(--space-4); } }
.ins-welcome { margin: var(--space-12) 0 var(--space-8); text-align: center; font-family: var(--font-hand); font-size: clamp(2rem, 4vw, 2.75rem); line-height: 1.2; color: var(--teal-deep); transform: rotate(-1.5deg); }

/* ============ Abstände auf der Startseite (ab 1.17.3): ein gemeinsamer Rhythmus statt aufaddierter Außenabstände ============ */
:root { --home-gap: 40px; }
@media (max-width: 767.98px) { :root { --home-gap: 32px; } }
.is-home .pos-content { margin-bottom: var(--home-gap); }
.is-home .pos-content > * + * { margin-top: var(--home-gap); }
.is-home .blog-featured .blog-items, .is-home .com-content-featured__items { margin-bottom: 0; }
.is-home .teaser-boxen { margin-bottom: 0; }
.home-section { margin-top: var(--home-gap); }
:where(.com-content-article__body, .item-content) > .home-section:first-child { margin-top: 0; }
.is-home .pos-bottom { margin-top: var(--home-gap); }
/* Leere Absätze, die der Editor um {loadmoduleid …} oder Module legt, erzeugen keine Lücken */
.com-content-article__body p:empty, .item-content p:empty, .com-content-article__body p:has(> br:only-child), .item-content p:has(> br:only-child), p.is-empty { display: none; }

/* ============ Seite „Stellenanzeigen“ (ab 1.17.7): Stellen als Karten mit Piktogramm, Umfang als Schildchen ============ */
.jobs-page, .jobs { --ico-chef: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 30c-5 0-8-4-8-8s4-8 9-7c1-5 5-8 9-8s8 3 9 8c5-1 9 3 9 7s-3 8-8 8'/%3E%3Cpath d='M14 26v14h20V26'/%3E%3Cpath d='M14 34h20'/%3E%3C/svg%3E"); --ico-pot: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 20h32v12a8 8 0 01-8 8H16a8 8 0 01-8-8z'/%3E%3Cpath d='M4 22h4M40 22h4M18 20v-4h12v4'/%3E%3Cpath d='M18 10c0-2 2-2 2-4M24 10c0-2 2-2 2-4M30 10c0-2 2-2 2-4'/%3E%3C/svg%3E"); --ico-tap: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 10h20v8H10z'/%3E%3Cpath d='M24 18v6h-6'/%3E%3Cpath d='M16 4v6'/%3E%3Cpath d='M14 30h16l-2 14H16z'/%3E%3Cpath d='M15 34h14'/%3E%3Cpath d='M18 24v2'/%3E%3C/svg%3E"); }
.jobs-intro__actions { margin-top: var(--space-6); }
.jobs { margin: var(--space-12) 0 0; }
.jobs > h2 { margin: 0 0 var(--space-6); }
.jobs__list { display: grid; gap: var(--space-6); grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.job { position: relative; display: flex; flex-direction: column; padding: var(--space-8) var(--space-6) var(--space-6); background: var(--cream-raised); border: 1px solid #e3d5b6; border-top: 4px solid var(--amber); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); transition: transform .2s ease, box-shadow .2s ease; }
.job:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.job::before { content: ""; display: block; width: 3rem; height: 3rem; margin-bottom: var(--space-4); background: var(--amber); -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat; }
.job[data-ico="chef"] { --ico: var(--ico-chef); }
.job[data-ico="pot"] { --ico: var(--ico-pot); }
.job[data-ico="tap"] { --ico: var(--ico-tap); }
.job h3 { margin: 0 0 var(--space-3); font-size: 1.25rem; }
.job__tags { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0 0 var(--space-4); padding: 0; list-style: none; }
.job__tags li { padding: .15rem .7rem; border-radius: var(--radius-full); background: var(--teal-tint); color: var(--teal-deep); font-size: .8125rem; font-weight: 700; }
.job__tags li.is-season { background: var(--foam); color: var(--amber-deep); }
.job__label { margin: 0 0 var(--space-2); font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--amber-deep); }
.job__text { margin: 0 0 var(--space-4); color: var(--ink-muted); }
.job__list { margin: 0 0 var(--space-4); padding: 0; list-style: none; }
.job__list li { position: relative; padding-left: 1.5rem; margin-bottom: var(--space-2); }
.job__list li::before { content: ""; position: absolute; left: 0; top: .55em; width: .55rem; height: .55rem; border-radius: 50%; background: var(--amber); }
.job__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin: auto 0 0 !important; padding-top: var(--space-4); }
.jobs-page .gst-facts { margin-top: var(--space-12); }
.jobs-apply { margin: var(--space-12) 0 var(--space-8); padding: var(--space-8); text-align: center; background: var(--teal-dark); color: var(--cream); border-radius: var(--radius-md); }
.jobs-apply h2 { margin: 0 0 var(--space-3); color: var(--cream-raised); }
.jobs-apply p { max-width: 40rem; margin: 0 auto var(--space-4); }
.jobs-apply p:last-child { margin-bottom: 0; }
@media (prefers-reduced-motion: reduce) { .job, .job:hover { transition: none; transform: none; } }

/* Neues: Joomla-Modul „Beiträge – Newsflash“ in Position „content“, Modulklasse „ plain news-cards“ (Titel anzeigen) */
.news-cards .module-card__title { font-size: 1.5rem; margin-bottom: var(--space-4); }
.news-cards .mod-articlesnews, .news-cards .newsflash { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); }
@media (max-width: 767.98px) { .news-cards .mod-articlesnews, .news-cards .newsflash { grid-template-columns: minmax(0, 1fr); } }
.news-cards .mod-articlesnews__item {
  position: relative; display: flex; flex-direction: column; overflow: hidden;
  background: var(--cream-raised); border: 1px solid var(--line); border-bottom: 3px solid var(--teal); border-radius: var(--radius-md);
  transition: transform .2s ease, box-shadow .2s ease;
}
.news-cards .mod-articlesnews__item:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.news-cards .newsflash-image { order: -2; margin: 0; }
.news-cards .newsflash-image img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 0; margin: 0; }
.news-cards .newsflash-image figcaption { display: none; }
.news-cards .newsflash-title { order: -1; margin: var(--space-4) var(--space-6) var(--space-2); font-size: 1.25rem; }
.news-cards .newsflash-title a { color: inherit; text-decoration: none; }
.news-cards .newsflash-title a::after { content: ""; position: absolute; inset: 0; }
.news-cards .mod-articlesnews__item:hover .newsflash-title a { color: var(--teal-deep); }
.news-cards .mod-articlesnews__item:focus-within { outline: 3px solid var(--teal-deep); outline-offset: 2px; }
.news-cards .newsflash-title a:focus-visible { outline: none; }
.news-cards .mod-articlesnews__item > :not(.newsflash-image):not(.newsflash-title) { margin-inline: var(--space-6); }
.news-cards .mod-articlesnews__item > :last-child { margin-bottom: var(--space-6); }
.news-cards .mod-articlesnews__item > p { color: var(--ink-muted); font-size: .9375rem; }
.news-cards .mod-articlesnews__item .readmore { font-weight: 600; margin-top: auto; }

/* Abschnitte im Beitrag „Home“ */
.home-section > h2, .home-section__head h2 { font-size: 1.5rem; margin: 0 0 var(--space-4); }
.home-section__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3) var(--space-6); margin-bottom: var(--space-4); }
.home-section__head h2 { margin: 0; }
.home-section > h2::before, .home-section__head h2::before { content: ""; display: block; width: 2.5rem; height: 3px; margin-bottom: .6rem; border-radius: 3px; background: var(--amber); }
.home-section__head { align-items: flex-end; }

/* Instagram-Leiste: Bilder liegen auf dem eigenen Server (Skript instagram-sync.php), Link zu Instagram erst beim Klick */
.insta__grid { margin: 0; padding: 0; display: grid; gap: var(--space-3); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 576px) { .insta__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 992px) { .insta__grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.insta__grid:empty { display: none; }
.insta__grid a { display: block; border-radius: var(--radius-md); overflow: hidden; }
.insta__grid img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; transition: transform .25s ease; }
@media (prefers-reduced-motion: no-preference) { .insta__grid a:hover img { transform: scale(1.04); } }

/* Besuch uns: Adresse/Öffnungszeiten links, Karte rechts. Die Karte (Google Maps) lädt erst nach Klick (Skript: data-map). */
.visit { display: grid; gap: var(--space-6); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 992px) { .visit { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
.visit__info {
  display: flex; flex-direction: column; gap: var(--space-6);
  background: var(--cream-raised); border: 1px solid var(--line); border-radius: var(--radius-md); padding: var(--space-8);
}
.visit__info h2 { font-size: 1.25rem; margin: 0 0 var(--space-3); }
.visit__info section + section { padding-top: var(--space-6); border-top: 1px solid var(--line); }
.visit__info address { font-style: normal; font-size: 1.0625rem; line-height: 1.6; margin: 0 0 var(--space-4); }
.visit__info address strong { font-family: var(--font-serif); }
.visit__info .hours { margin-bottom: var(--space-3); }
.visit__note { margin: 0; font-size: .875rem; color: var(--ink-muted); }
.visit__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }

.visit__map {
  --map-art: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 900 520%22 preserveAspectRatio=%22xMidYMid slice%22%3E%0A%3Crect width=%22900%22 height=%22520%22 fill=%22%23eadfc8%22/%3E%0A%3Cg fill=%22%23f6efe0%22%3E%0A%3Crect x=%2220%22 y=%2224%22 width=%22150%22 height=%22110%22 rx=%228%22/%3E%3Crect x=%22190%22 y=%2224%22 width=%22190%22 height=%2286%22 rx=%228%22/%3E%3Crect x=%22400%22 y=%2224%22 width=%22120%22 height=%22120%22 rx=%228%22/%3E%0A%3Crect x=%22640%22 y=%2224%22 width=%22230%22 height=%2296%22 rx=%228%22/%3E%3Crect x=%2220%22 y=%22156%22 width=%22110%22 height=%22130%22 rx=%228%22/%3E%3Crect x=%22150%22 y=%22132%22 width=%22170%22 height=%22104%22 rx=%228%22/%3E%0A%3Crect x=%22560%22 y=%22150%22 width=%22130%22 height=%22110%22 rx=%228%22/%3E%3Crect x=%22710%22 y=%22146%22 width=%22160%22 height=%22120%22 rx=%228%22/%3E%3Crect x=%2220%22 y=%22310%22 width=%22190%22 height=%2290%22 rx=%228%22/%3E%0A%3Crect x=%22230%22 y=%22262%22 width=%22140%22 height=%22130%22 rx=%228%22/%3E%3Crect x=%22400%22 y=%22300%22 width=%22170%22 height=%22100%22 rx=%228%22/%3E%3Crect x=%22600%22 y=%22290%22 width=%22120%22 height=%22110%22 rx=%228%22/%3E%0A%3Crect x=%22740%22 y=%22290%22 width=%22130%22 height=%22120%22 rx=%228%22/%3E%3Crect x=%2220%22 y=%22424%22 width=%22250%22 height=%2276%22 rx=%228%22/%3E%3Crect x=%22300%22 y=%22424%22 width=%22150%22 height=%2276%22 rx=%228%22/%3E%3Crect x=%22480%22 y=%22424%22 width=%22390%22 height=%2276%22 rx=%228%22/%3E%0A%3C/g%3E%0A%3Crect x=%22400%22 y=%22162%22 width=%22130%22 height=%22112%22 rx=%2210%22 fill=%22%23dfe6c6%22/%3E%0A%3Cpath d=%22M-20 270 C 140 236, 260 300, 420 262 S 700 214, 940 258%22 fill=%22none%22 stroke=%22%23c3e0e1%22 stroke-width=%2222%22 stroke-linecap=%22round%22/%3E%0A%3Cpath d=%22M-20 270 C 140 236, 260 300, 420 262 S 700 214, 940 258%22 fill=%22none%22 stroke=%22%23d7ecec%22 stroke-width=%2212%22 stroke-linecap=%22round%22/%3E%0A%3Cg fill=%22none%22 stroke=%22%23fffaf1%22 stroke-linecap=%22round%22%3E%0A%3Cpath d=%22M0 142 L900 150%22 stroke-width=%2212%22/%3E%3Cpath d=%22M0 412 L900 408%22 stroke-width=%2212%22/%3E%3Cpath d=%22M184 0 L196 520%22 stroke-width=%2210%22/%3E%3Cpath d=%22M386 0 L392 520%22 stroke-width=%2212%22/%3E%0A%3Cpath d=%22M536 0 L548 520%22 stroke-width=%2210%22/%3E%3Cpath d=%22M700 0 L690 520%22 stroke-width=%2212%22/%3E%3Cpath d=%22M0 286 L330 300 L560 280%22 stroke-width=%227%22/%3E%3Cpath d=%22M552 150 L548 278%22 stroke-width=%226%22/%3E%0A%3C/g%3E%0A%3Cellipse cx=%22610%22 cy=%22218%22 rx=%2220%22 ry=%227%22 fill=%22%232a1d12%22 opacity=%22.16%22/%3E%0A%3Cpath d=%22M610 214 C 590 188, 576 172, 576 152 a34 34 0 1 1 68 0 c0 20 -14 36 -34 62z%22 fill=%22%23c8811f%22/%3E%0A%3Ccircle cx=%22610%22 cy=%22152%22 r=%2213%22 fill=%22%23fffaf1%22/%3E%0A%3C/svg%3E");
  position: relative; min-height: 360px; overflow: hidden;
  background: var(--map-art) center / cover no-repeat #eadfc8;
  border: 1px solid var(--line); border-radius: var(--radius-md);
}
.visit__map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.visit__map > .btn { position: absolute; left: var(--space-6); bottom: var(--space-6); }
.map-consent { position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: flex-start; padding: var(--space-6); }
.map-consent__box {
  max-width: 25rem; padding: var(--space-6);
  background: rgba(255, 250, 241, .97); border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: var(--shadow-md);
}
.map-consent__box h3 { font-size: 1.125rem; margin: 0 0 var(--space-2); }
.map-consent__box p { margin: 0 0 var(--space-4); font-size: .875rem; color: var(--ink-muted); }
.map-consent__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-4); }
@media (max-width: 575.98px) {
  .visit__info { padding: var(--space-6); }
  .visit__map { min-height: 420px; }
  .map-consent { padding: var(--space-3); }
}

/* ============ Fassabfüllung (ab 1.6.0) ============ */
.item-page:has(.fass-page), .com-content-article:has(.fass-page) { max-width: none; }

/* Tafel: Einleitung und drei Kennzahlen in einem Band statt in Kästchen */
.fass-hero {
  padding: calc(var(--space-12) + 6px) var(--space-8) var(--space-8);
  color: var(--cream); border-radius: var(--radius-md); box-shadow: var(--shadow-md);
  background:
    radial-gradient(circle at 15px -2px, var(--cream) 12px, transparent 12.5px) 0 0 / 30px 14px repeat-x,
    var(--teal-dark);
}
.fass-hero__lead { max-width: 42rem; margin: 0 0 var(--space-8); font-family: var(--font-serif); font-size: clamp(1.375rem, 2.8vw, 2rem); line-height: 1.3; color: var(--cream-raised); }
.fass-stats { display: flex; flex-wrap: wrap; gap: var(--space-6) 0; list-style: none; margin: 0; padding: 0; }
.fass-stats li { display: flex; align-items: center; gap: var(--space-3); padding-right: var(--space-8); }
.fass-stats li + li { padding-left: var(--space-8); border-left: 1px solid rgba(247, 240, 227, .22); }
.fass-stats b { font-family: var(--font-serif); font-size: clamp(2rem, 4vw, 2.75rem); line-height: 1; color: var(--foam); }
.fass-stats span { max-width: 9.5rem; font-size: .875rem; line-height: 1.3; color: rgba(247, 240, 227, .88); }
@media (max-width: 767.98px) {
  .fass-hero { padding: calc(var(--space-8) + 6px) var(--space-6) var(--space-6); }
  .fass-stats li { width: 100%; padding: 0; }
  .fass-stats li + li { padding: var(--space-4) 0 0; border-left: 0; border-top: 1px solid rgba(247, 240, 227, .22); }
}

/* Bestellzettel: Auswahl | Bon, darunter hinter der Abreißlinie das Formular */
.fass-config { margin-top: var(--space-12); }
.fass-slip {
  display: grid; grid-template-columns: minmax(0, 1fr);
  background: var(--cream-raised); border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: var(--shadow-md);
}
@media (min-width: 900px) { .fass-slip { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); } }
.fass-slip__main { padding: var(--space-8); }
.fass-slip__main h2 { margin: 0 0 var(--space-1); font-size: 1.375rem; }
.fass-slip__hint { margin: 0 0 var(--space-4); font-size: .9375rem; color: var(--ink-muted); }
.fass-slip__hint--limit { margin: var(--space-3) 0 0; color: #7d2415; }
.fass-slip__hint--limit[hidden] { display: none; }

/* Mit JavaScript: Regler; ohne: Preistabelle */
.fass-config:not(.is-live) .fass-rows, .fass-config:not(.is-live) .fass-bon__body { display: none; }
.fass-config.is-live .fass-table { display: none; }
.fass-table { width: 100%; max-width: 32rem; border-collapse: collapse; font-size: .9375rem; }
.fass-table caption { text-align: left; font-weight: 600; padding-bottom: var(--space-2); }
.fass-table th, .fass-table td { padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--line); text-align: left; }
.fass-table td:last-child, .fass-table th:last-child { text-align: right; font-variant-numeric: tabular-nums; }

/* Eine Zeile je Größe: Fass-Symbol, Name, Stückzahl und Regler */
.fass-rows { display: block; }
.fass-row {
  display: grid; grid-template-columns: 3.5rem minmax(0, 1fr) auto; column-gap: var(--space-4); align-items: center;
  padding: var(--space-3) var(--space-3) var(--space-3) var(--space-4); margin-inline: calc(var(--space-4) * -1);
  border-bottom: 1px dashed #d8c9a8; border-left: 4px solid transparent; transition: background-color .2s ease, border-color .2s ease;
}
.fass-row:last-child { border-bottom: 0; }
.fass-row.is-active { background: #fbf3dc; border-left-color: var(--amber); }
.fass-row__icon { grid-row: 1 / span 2; display: flex; align-items: flex-end; justify-content: center; height: 3.5rem; opacity: .55; filter: grayscale(.4); transition: opacity .2s ease, filter .2s ease; }
.fass-row.is-active .fass-row__icon { opacity: 1; filter: none; }
.fass-row__icon svg { height: calc(var(--k, 1) * 3.5rem); width: auto; }
.fass-row__label { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--space-3); margin: 0; font-weight: 400; }
.fass-row__label b { font-family: var(--font-serif); font-size: 1.1875rem; }
.fass-row__label span { color: var(--ink-muted); font-size: .9375rem; }
.fass-row__label i { font-style: normal; font-size: .875rem; color: var(--teal-deep); font-variant-numeric: tabular-nums; }
.fass-row__qty { min-width: 2.25rem; padding: 2px var(--space-2); border-radius: 999px; text-align: center; font-family: var(--font-serif); font-size: 1.125rem; font-weight: 700; color: var(--ink-muted); background: var(--cream); transition: background-color .2s ease, color .2s ease; }
.fass-row.is-active .fass-row__qty { background: var(--amber); color: var(--ink); }
.fass-row .fass-range { grid-column: 2 / -1; }

.fass-range { --p: 0%; display: block; width: 100%; height: 2rem; margin: 0; padding: 0; background: transparent; border: 0; box-shadow: none; -webkit-appearance: none; appearance: none; cursor: pointer; }
.fass-range::-webkit-slider-runnable-track { height: 8px; border-radius: 999px; background: linear-gradient(to right, var(--teal) var(--p), #e3d6b8 var(--p)); }
.fass-range::-webkit-slider-thumb { -webkit-appearance: none; width: 28px; height: 28px; margin-top: -10px; border-radius: 50%; background: var(--amber); border: 3px solid var(--cream-raised); box-shadow: 0 1px 5px rgba(0, 0, 0, .35); transition: transform .15s ease; }
.fass-range::-moz-range-track { height: 8px; border-radius: 999px; background: #e3d6b8; }
.fass-range::-moz-range-progress { height: 8px; border-radius: 999px; background: var(--teal); }
.fass-range::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: var(--amber); border: 3px solid var(--cream-raised); box-shadow: 0 1px 5px rgba(0, 0, 0, .35); }
.fass-range:active::-webkit-slider-thumb { transform: scale(1.12); }
.fass-range:focus { box-shadow: none; }
.fass-range:focus-visible { outline: 3px solid var(--teal-deep); outline-offset: 4px; border-radius: 999px; }

/* Bon */
.fass-bon { position: relative; padding: var(--space-8); background: #fbf3dc; border-top: 2px dashed #c9b896; }
@media (min-width: 900px) { .fass-bon { border-top: 0; border-left: 2px dashed #c9b896; border-top-right-radius: var(--radius-md); } }
.fass-bon__title { margin: 0 0 var(--space-4); font-size: .8125rem; font-family: var(--font-sans); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--teal-deep); }
.fass-bon__empty { margin: 0 0 var(--space-4); padding: var(--space-6) 0; font-family: var(--font-serif); font-size: 1.125rem; color: var(--ink-muted); }
.fass-bon__lines { list-style: none; margin: 0; padding: 0; }
.fass-bon__line { display: grid; grid-template-columns: auto minmax(1.5rem, 1fr) auto; column-gap: var(--space-2); align-items: baseline; padding: var(--space-1) 0; font-size: 1rem; }
.fass-bon__line::after { content: ""; grid-column: 2; grid-row: 1; align-self: end; margin-bottom: .35em; border-bottom: 2px dotted #c9b896; }
.fass-bon__name { grid-column: 1; grid-row: 1; }
.fass-bon__amt { grid-column: 3; grid-row: 1; align-self: end; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.fass-bon__amt--soft { font-style: italic; color: var(--ink-muted); }
.fass-bon__rule { height: 6px; margin: var(--space-3) 0 var(--space-2); border-top: 2px solid var(--ink); border-bottom: 1px solid var(--ink); }
.fass-bon__total { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--space-4); align-items: baseline; font-family: var(--font-serif); font-weight: 700; color: var(--teal-deep); }
.fass-bon__total-label { font-size: 1.0625rem; }
.fass-bon__total-amt { font-size: 1.875rem; line-height: 1.1; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fass-bon__note { margin: var(--space-3) 0 var(--space-4); font-size: .875rem; color: var(--ink-muted); }
.fass-bon__fine { margin: var(--space-4) 0 0; padding: var(--space-4) 0 0 1.1rem; border-top: 1px dashed #c9b896; font-size: .8125rem; color: var(--ink-muted); }
.fass-bon__fine li + li { margin-top: var(--space-1); }
.fass-stamp { display: inline-block; margin-top: var(--space-4); padding: 3px var(--space-3); border: 2px solid #a1301e; border-radius: 6px; color: #a1301e; font-size: .75rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; transform: rotate(-3deg); }

/* Formular unter der Abreißlinie */
.fass-form { position: relative; grid-column: 1 / -1; padding: var(--space-8); border-top: 2px dashed #c9b896; }
.fass-form::before, .fass-form::after { content: ""; position: absolute; top: -12px; width: 22px; height: 22px; border-radius: 50%; background: var(--cream); border: 1px solid var(--line); }
.fass-form::before { left: -12px; clip-path: inset(0 0 0 50%); }
.fass-form::after { right: -12px; clip-path: inset(0 50% 0 0); }
.fass-form h3 { margin: 0 0 var(--space-3); font-size: 1.1875rem; }
.fass-form__summary { margin: 0 0 var(--space-6); }
.fass-form__summary span { color: var(--ink-muted); }
.fass-form__grid { display: grid; gap: var(--space-4) var(--space-8); grid-template-columns: repeat(6, minmax(0, 1fr)); max-width: 50rem; }
.fass-field { display: flex; flex-direction: column; gap: var(--space-1); grid-column: span 3; min-width: 0; }
.fass-field--wide { grid-column: 1 / -1; }
.fass-field--third { grid-column: span 2; }
.fass-field--twothirds { grid-column: span 4; }
.fass-form .fass-field input[type="text"], .fass-form .fass-field input[type="email"], .fass-form .fass-field input[type="tel"], .fass-form .fass-field input[type="date"], .fass-form .fass-field textarea {
  width: 100%; padding: .55rem .25rem; background: transparent; border: 0; border-bottom: 2px solid #9a8264; border-radius: 0;
}
.fass-form .fass-field input:focus, .fass-form .fass-field textarea:focus { border-bottom-color: var(--teal-deep); box-shadow: 0 2px 0 0 var(--teal-deep); }
.fass-field__hint { font-size: .8125rem; color: var(--ink-muted); }
.fass-field input:user-invalid, .fass-field textarea:user-invalid { border-bottom-color: #a1301e; }
.fass-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.fass-checks { display: flex; flex-direction: column; gap: var(--space-3); max-width: 50rem; margin: var(--space-6) 0 40px; }
/* Text und Link fließen in einer Zeile, auch wenn der Editor das <span> um den Text entfernt hat */
.fass-check { display: block; position: relative; padding-left: 2rem; font-weight: 400; font-size: .9375rem; line-height: 1.5; }
.fass-check input { position: absolute; left: 0; top: .15rem; width: 1.125rem; height: 1.125rem; margin: 0; accent-color: var(--teal-deep); }
/* Captcha-Kästchen (ohne Drittanbieter) */
.fass-captcha { display: flex; flex-direction: column; gap: var(--space-2); max-width: 50rem; margin: 40px 0 var(--space-6); }
.fass-captcha__label { display: inline-flex; align-items: center; gap: var(--space-3); width: fit-content; max-width: 100%; margin: 0; padding: var(--space-3) var(--space-4); background: rgba(255, 255, 255, .6); border: 1px solid #b9a782; border-radius: var(--radius-sm); font-weight: 600; cursor: pointer; transition: border-color .2s ease, background-color .2s ease; }
.fass-captcha__label input { flex: none; width: 1.5rem; height: 1.5rem; margin: 0; accent-color: var(--teal-deep); }
.fass-captcha__text { font-weight: 400; font-size: .875rem; color: var(--ink-muted); }
.fass-captcha__note { font-size: .8125rem; color: var(--ink-muted); }
.fass-captcha[data-state="busy"] .fass-captcha__label input { -webkit-appearance: none; appearance: none; border: 3px solid #e3d6b8; border-top-color: var(--teal); border-radius: 50%; background: transparent; animation: fass-spin .8s linear infinite; }
.fass-captcha[data-state="ok"] .fass-captcha__label { border-color: var(--teal); background: var(--teal-tint); }
.fass-captcha[data-state="ok"] .fass-captcha__text { color: var(--teal-deep); font-weight: 600; }
.fass-captcha[data-state="error"] .fass-captcha__label { border-color: #a1301e; background: #fbefec; }
.fass-captcha[data-state="error"] .fass-captcha__text { color: #7d2415; }
@keyframes fass-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .fass-captcha[data-state="busy"] .fass-captcha__label input { animation-duration: 2.4s; } }
.fass-status { margin: var(--space-4) 0 0; padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm); background: var(--teal-tint); color: var(--teal-deep); font-weight: 600; }
.fass-status.is-error { background: #fbefec; color: #7d2415; }
.fass-status[hidden] { display: none; }
.fass-thanks { grid-column: 1 / -1; padding: var(--space-8); border-top: 2px dashed #c9b896; background: var(--teal-tint); border-radius: 0 0 var(--radius-md) var(--radius-md); }
.fass-thanks h3 { margin-top: 0; }
@media (max-width: 767.98px) {
  .fass-slip__main, .fass-bon, .fass-form, .fass-thanks { padding: var(--space-6); }
  .fass-form__grid { grid-template-columns: minmax(0, 1fr); }
  .fass-field, .fass-field--third, .fass-field--twothirds { grid-column: 1 / -1; }
  .fass-row { margin-inline: calc(var(--space-3) * -1); padding-inline: var(--space-3); }
}

/* Zapf-Anleitung: Kreis auf einem Bierdeckel, Text ohne Kasten */
.fass-guide { margin-top: var(--space-16); }
.fass-guide__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3) var(--space-6); margin-bottom: var(--space-4); }
.fass-guide__head h2 { margin: 0; font-size: 1.375rem; }
.fass-guide__need { max-width: 46rem; margin: 0 0 var(--space-8); font-size: 1.0625rem; }
.cycle-steps { padding-left: 1.25rem; }
.cycle-steps h3 { font-size: 1.125rem; margin: var(--space-4) 0 var(--space-1); }
.cycle-steps .tip { font-style: italic; color: var(--ink-muted); }
.cycle { display: grid; gap: var(--space-8); grid-template-columns: minmax(0, 1fr); align-items: center; }
@media (min-width: 900px) { .cycle { grid-template-columns: minmax(0, 440px) minmax(0, 1fr); gap: var(--space-16); } }
.cycle__ring {
  position: relative; width: calc(100% - 16px); max-width: 424px; margin: 8px auto; aspect-ratio: 1 / 1; border-radius: 50%;
  background: var(--cream-raised); box-shadow: 0 0 0 8px #eadbb8, 0 0 0 10px #d9c79b, 0 14px 28px rgba(60, 40, 10, .12);
}
.cycle__svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.cycle__track, .cycle__progress { fill: none; stroke-width: 2.2; }
.cycle__track { stroke: #e3d6b8; stroke-dasharray: .6 2.4; }
.cycle__progress { stroke: var(--teal); stroke-linecap: round; transition: stroke-dashoffset .5s ease; }
.cycle__nodes { position: absolute; inset: 0; list-style: none; margin: 0; padding: 0; }
.cycle__nodes li { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%); }
.cycle__node {
  display: grid; place-items: center; width: 3.25rem; height: 3.25rem; padding: 0;
  font-family: var(--font-serif); font-size: 1.25rem; font-weight: 700; color: var(--teal-deep);
  background: var(--cream-raised); border: 2px solid var(--teal); border-radius: 50%; cursor: pointer;
  transition: background-color .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.cycle__node:hover { background: var(--teal-tint); }
.cycle__node.is-done { background: var(--teal-tint); }
.cycle__node[aria-current="step"] { background: var(--teal-deep); border-color: var(--teal-deep); color: var(--cream-raised); transform: scale(1.14); box-shadow: 0 4px 12px rgba(15, 63, 66, .35); }
.cycle__node:focus-visible { outline: 3px solid var(--amber); outline-offset: 3px; }
.cycle__hub { position: absolute; inset: 22%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: var(--space-1); padding: var(--space-2); }
.cycle__hub-count { font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-muted); }
.cycle__hub-number { font-family: var(--font-serif); font-size: clamp(3rem, 12vw, 4.75rem); line-height: 1; color: var(--teal-deep); }
.cycle__hub-title { font-family: var(--font-serif); font-size: clamp(.9375rem, 2.6vw, 1.125rem); line-height: 1.25; font-weight: 600; }
.cycle__detail { padding-left: var(--space-6); border-left: 4px solid var(--amber); }
.cycle__detail h3 { font-size: 1.375rem; margin: 0 0 var(--space-3); }
.cycle__detail p { margin: 0 0 var(--space-3); font-size: 1.125rem; }
.cycle__tip { font-style: italic; color: var(--teal-deep); font-size: 1rem !important; }
.cycle__nav { display: flex; gap: var(--space-3); margin-top: var(--space-6); }
.cycle__step-in { animation: step-in .3s ease both; }
@keyframes step-in { from { opacity: 0; transform: translateX(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .cycle__progress, .cycle__node, .cycle__step-in, .fass-row, .fass-range::-webkit-slider-thumb { transition: none; animation: none; } }
@media (max-width: 575.98px) {
  .cycle__node { width: 2.5rem; height: 2.5rem; font-size: 1rem; }
  .cycle__detail { padding-left: var(--space-4); }
}

/* Fotos wie aufgesteckte Schnappschüsse */
.fass-snaps { display: grid; gap: var(--space-6); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin-top: var(--space-16); padding: var(--space-4) var(--space-2) 0; }
.fass-snaps img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .25s ease; }
.fass-snaps img:hover { transform: translateY(-3px); }
.fass-prost { grid-column: 1 / -1; margin: var(--space-4) 0 0; text-align: center; font-family: var(--font-serif); font-size: 1.75rem; color: var(--teal-deep); }
@media (prefers-reduced-motion: reduce) { .fass-snaps img, .fass-snaps img:hover { transition: none; } }

/* ============ Geschichte / Zeitleiste (ab 1.8.0) ============ */
.item-page:has(.geschichte), .com-content-article:has(.geschichte) { max-width: none; }
.geschichte, .bw-page { --cap-amber: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpolygon points='50.00,1.00 56.63,6.00 64.44,3.18 69.31,9.91 77.60,9.51 80.27,17.38 88.31,19.45 88.54,27.75 95.61,32.10 93.38,40.10 98.86,46.34 94.38,53.33 97.77,60.90 91.42,66.26 92.44,74.50 84.79,77.75 83.33,85.92 75.07,86.77 71.26,94.15 63.12,92.52 57.30,98.45 50.00,94.50 42.70,98.45 36.88,92.52 28.74,94.15 24.93,86.77 16.67,85.92 15.21,77.75 7.56,74.50 8.58,66.26 2.23,60.90 5.62,53.33 1.14,46.34 6.62,40.10 4.39,32.10 11.46,27.75 11.69,19.45 19.73,17.38 22.40,9.51 30.69,9.91 35.56,3.18 43.37,6.00' fill='%23d9952f' stroke='%238a5510' stroke-width='1.2' stroke-linejoin='round'/%3E%3Ccircle cx='50' cy='50' r='36' fill='%230f3f42' stroke='%23f1dfb4' stroke-width='1.4'/%3E%3Ccircle cx='50' cy='50' r='40.5' fill='none' stroke='%238a5510' stroke-width='.8' opacity='.55'/%3E%3C/svg%3E"); --cap-teal: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpolygon points='50.00,1.00 56.63,6.00 64.44,3.18 69.31,9.91 77.60,9.51 80.27,17.38 88.31,19.45 88.54,27.75 95.61,32.10 93.38,40.10 98.86,46.34 94.38,53.33 97.77,60.90 91.42,66.26 92.44,74.50 84.79,77.75 83.33,85.92 75.07,86.77 71.26,94.15 63.12,92.52 57.30,98.45 50.00,94.50 42.70,98.45 36.88,92.52 28.74,94.15 24.93,86.77 16.67,85.92 15.21,77.75 7.56,74.50 8.58,66.26 2.23,60.90 5.62,53.33 1.14,46.34 6.62,40.10 4.39,32.10 11.46,27.75 11.69,19.45 19.73,17.38 22.40,9.51 30.69,9.91 35.56,3.18 43.37,6.00' fill='%232d989d' stroke='%2312595d' stroke-width='1.2' stroke-linejoin='round'/%3E%3Ccircle cx='50' cy='50' r='36' fill='%230f3f42' stroke='%23f1dfb4' stroke-width='1.4'/%3E%3Ccircle cx='50' cy='50' r='40.5' fill='none' stroke='%2312595d' stroke-width='.8' opacity='.55'/%3E%3C/svg%3E"); margin-top: var(--space-6); }

/* Überblick: grobe Einordnung auf einer Zeitachse (maßstabsgetreu von 1870 bis heute) */
.tl-overview { margin: 0 0 var(--space-16); }
.tl-overview h2 { margin: 0 0 var(--space-8); font-size: 1.3125rem; }
.tl-scale { position: relative; height: 2.25rem; margin: 2.25rem var(--space-3) 2.5rem; }
.tl-scale__track { position: absolute; left: 0; right: 0; top: 50%; height: 4px; transform: translateY(-50%); border-radius: 4px; background: #e3d6b8; }
.tl-scale__band { position: absolute; top: 50%; left: var(--from); width: var(--len); height: 18px; transform: translateY(-50%); border-radius: 999px; }
.tl-scale__band--insel { background: var(--amber); }
.tl-scale__band--haus { background: var(--teal-deep); }
.tl-scale__tick { position: absolute; left: var(--at); top: -4px; bottom: -4px; width: 0; border-left: 2px solid var(--ink); }
.tl-scale__tick span { position: absolute; left: 0; transform: translateX(-50%); font-family: var(--font-serif); font-size: 1rem; font-weight: 700; white-space: nowrap; }
.tl-scale__tick--up span { bottom: 100%; margin-bottom: 4px; }
.tl-scale__tick--down span { top: 100%; margin-top: 4px; }
.tl-scale__tick--end span { transform: translateX(-100%); }
.tl-legend { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-8); margin: 0; padding: 0; list-style: none; font-size: .9375rem; }
.tl-legend li { display: flex; align-items: center; gap: var(--space-2); }
.tl-legend i { flex: none; width: 1.75rem; height: 12px; border-radius: 999px; }
.tl-legend .is-insel { background: var(--amber); }
.tl-legend .is-haus { background: var(--teal-deep); }
.tl-overview__note { margin: var(--space-3) 0 0; font-size: .9375rem; color: var(--ink-muted); }

/* Zeitleiste */
.tl { --tl-progress: 100%; position: relative; list-style: none; margin: 0 auto; padding: var(--space-4) 0 var(--space-8); max-width: 66rem; }
.tl::before, .tl::after { content: ""; position: absolute; top: 0; left: 50%; width: 4px; transform: translateX(-50%); border-radius: 4px; }
.tl::before { bottom: 0; background: #e3d6b8; }
.tl::after { height: var(--tl-progress); max-height: 100%; background: linear-gradient(to bottom, var(--teal), var(--amber)); }
.tl-item { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 5.5rem minmax(0, 1fr); column-gap: var(--space-4); margin-bottom: var(--space-16); }
.tl-item:last-child { margin-bottom: 0; }
.tl-cap {
  grid-column: 2; grid-row: 1; justify-self: center; z-index: 1; display: grid; place-items: center; width: 5.5rem; height: 5.5rem;
  background: var(--cap-amber) center / contain no-repeat; filter: drop-shadow(0 3px 5px rgba(42, 29, 18, .3));
  font-family: var(--font-serif); font-size: 1.125rem; font-weight: 700; line-height: 1; color: var(--foam);
}
.tl-cap--small { font-size: .8125rem; letter-spacing: .02em; }
.tl-item--now .tl-cap { background-image: var(--cap-teal); }
.tl-card { position: relative; grid-row: 1; padding: var(--space-8); background: var(--cream-raised); border-radius: var(--radius-md); box-shadow: var(--shadow-md); }
.tl-item:nth-child(odd) .tl-card { grid-column: 1; }
.tl-item:nth-child(even) .tl-card { grid-column: 3; }
.tl-card::after { content: ""; position: absolute; top: calc(2.75rem - 2px); width: var(--space-4); height: 4px; background: var(--amber); }
.tl-item:nth-child(odd) .tl-card::after { right: calc(var(--space-4) * -1); }
.tl-item:nth-child(even) .tl-card::after { left: calc(var(--space-4) * -1); }
.tl-when { margin: 0 0 var(--space-1); font-size: .8125rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--teal-deep); }
.tl-card h2 { margin: 0 0 var(--space-3); font-size: 1.5rem; }
.tl-card p { margin: 0 0 var(--space-4); font-size: 1.0625rem; line-height: 1.65; }
.tl-card p:last-child { margin-bottom: 0; }
.tl-card strong { font-weight: 700; color: var(--ink); }
.tl-photo { margin: var(--space-6) 0 0; padding: 8px 8px 0; background: #fffdf8; border-radius: 3px; box-shadow: 0 4px 12px rgba(60, 40, 10, .2); transform: rotate(-1deg); }
.tl-item:nth-child(even) .tl-photo { transform: rotate(1deg); }
.tl-photo img { display: block; width: 100%; height: auto; border-radius: 0; }
.tl-photo figcaption { padding: var(--space-3) var(--space-2); font-size: .875rem; font-style: italic; color: var(--ink-muted); text-align: center; }
.tl-item--now .tl-card { background: var(--teal-dark); color: var(--cream); }
.tl-item--now .tl-card h2, .tl-item--now .tl-card strong { color: var(--cream-raised); }
.tl-item--now .tl-when { color: var(--foam); }
.tl-item--now .tl-card::after { background: var(--teal); }

@media (max-width: 899.98px) {
  .tl::before, .tl::after { left: 1.75rem; }
  .tl-item { grid-template-columns: 3.5rem minmax(0, 1fr); column-gap: var(--space-4); margin-bottom: var(--space-12); }
  .tl-cap { grid-column: 1; width: 3.5rem; height: 3.5rem; font-size: .75rem; }
  .tl-cap--small { font-size: .6875rem; letter-spacing: 0; }
  .tl-item:nth-child(odd) .tl-card, .tl-item:nth-child(even) .tl-card { grid-column: 2; padding: var(--space-6); }
  .tl-item:nth-child(odd) .tl-card::after, .tl-item:nth-child(even) .tl-card::after { display: none; }
  .tl-card h2 { font-size: 1.3125rem; }
  .tl-scale { margin-inline: var(--space-4); }
}

/* Auftritt beim Scrollen (nur mit JavaScript) */
.tl.is-live .tl-item .tl-card { opacity: 0; transform: translateY(28px); transition: opacity .6s ease, transform .6s ease; }
.tl.is-live .tl-item .tl-cap { opacity: 0; transform: scale(.6); transition: opacity .4s ease, transform .5s cubic-bezier(.3, 1.6, .5, 1); }
.tl.is-live .tl-item.is-visible .tl-card, .tl.is-live .tl-item.is-visible .tl-cap { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .tl.is-live .tl-item .tl-card, .tl.is-live .tl-item .tl-cap { opacity: 1; transform: none; transition: none; }
}
@media print { .tl.is-live .tl-item .tl-card, .tl.is-live .tl-item .tl-cap { opacity: 1 !important; transform: none !important; } }

/* ============ Brauerei: Prozess, Quiz, Führungen (ab 1.9.0) ============ */
.item-page:has(.bw-page), .com-content-article:has(.bw-page) { max-width: none; }
.bw-page { margin-top: var(--space-4); }
.bw-section { margin-top: var(--space-16); scroll-margin-top: 9rem; }
.bw-section > h2, .bw-inselhopf__text h2, .qz-head h2 { margin: 0 0 var(--space-3); font-size: clamp(1.3125rem, 1.1rem + .8vw, 1.75rem); }
.bw-section__intro { max-width: 46rem; margin: 0 0 var(--space-8); font-size: 1.0625rem; color: var(--ink-muted); }
img.is-missing { display: none; }
.bw-tour__photo:has(img.is-missing) { display: none; }

/* Kopf mit Foto und mitlaufender Sprungleiste */
.bw-hero__photo { position: relative; height: clamp(11rem, 30vw, 24rem); overflow: hidden; border-radius: var(--radius-md); box-shadow: var(--shadow-md); background: linear-gradient(135deg, var(--teal-dark), #2a1d12); }
.bw-hero__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
.bw-hero__photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(15, 63, 66, .45), transparent 55%); pointer-events: none; }
.bw-nav { position: sticky; top: 5.25rem; z-index: 6; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); width: fit-content; max-width: 100%; margin: calc(var(--space-6) * -1) auto 0; padding: var(--space-2); background: rgba(255, 250, 241, .96); border: 1px solid var(--line); border-radius: 999px; box-shadow: var(--shadow-md); backdrop-filter: blur(6px); }
.bw-nav a { padding: .4rem 1rem; border-radius: 999px; font-size: .9375rem; font-weight: 600; text-decoration: none; color: var(--ink); transition: background-color .2s ease, color .2s ease; }
.bw-nav a:hover { background: var(--cream); }
.bw-nav a.is-current { background: var(--teal-deep); color: var(--cream-raised); }
@media (max-width: 575.98px) { .bw-nav { border-radius: var(--radius-md); gap: 2px; } .bw-nav a { padding: .35rem .7rem; font-size: .875rem; } }

/* Inselhopf: Text und Bieretikett */
.bw-inselhopf { display: grid; gap: var(--space-12); grid-template-columns: minmax(0, 1fr); align-items: center; }
@media (min-width: 900px) { .bw-inselhopf { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); } }
.bw-lead { font-family: var(--font-serif); font-size: clamp(1.25rem, 2.3vw, 1.625rem); line-height: 1.4; }
.bw-label { position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--space-2); max-width: 22rem; margin-inline: auto; padding: var(--space-8) var(--space-6); text-align: center; background: #fbf3dc; border: 3px double var(--amber); border-radius: 18px; box-shadow: var(--shadow-md); transform: rotate(1.5deg); }
.bw-label::before, .bw-label::after { content: ""; position: absolute; left: 50%; width: 3rem; height: 3px; transform: translateX(-50%); background: var(--amber); border-radius: 3px; }
.bw-label::before { top: var(--space-4); }
.bw-label::after { bottom: var(--space-4); }
.bw-label__brand { margin-top: var(--space-2); font-size: .75rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--teal-deep); }
.bw-label__name { font-family: var(--font-serif); font-size: clamp(2.5rem, 6vw, 3.25rem); font-weight: 700; line-height: 1; color: var(--ink); }
.bw-label__type { font-family: var(--font-serif); font-size: 1.0625rem; font-style: italic; color: var(--ink-muted); }
.bw-label__facts { display: flex; gap: var(--space-6); margin: var(--space-3) 0; padding: var(--space-3) 0; list-style: none; border-block: 1px solid #d8c9a8; }
.bw-label__facts li { display: flex; flex-direction: column; }
.bw-label__facts b { font-family: var(--font-serif); font-size: 1.25rem; color: var(--teal-deep); }
.bw-label__facts span { font-size: .75rem; color: var(--ink-muted); }
.bw-label__foot { margin-bottom: var(--space-4); font-size: .8125rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }

/* Brauprozess: Stationen von heiß (Amber) nach kalt (Petrol) */
.brew-steps { padding-left: 1.25rem; }
.brew-steps h3 { margin: var(--space-4) 0 var(--space-1); font-size: 1.125rem; }
.brew { display: grid; gap: var(--space-8); }
.brew__scroll { overflow-x: auto; padding: var(--space-3) 0 var(--space-2); scrollbar-width: thin; }
.brew__inner { position: relative; min-width: 40rem; --n: 8; }
.brew__pipe { position: absolute; left: calc(50% / var(--n)); right: calc(50% / var(--n)); top: calc(var(--space-3) * 0 + 1.5rem); height: 10px; transform: translateY(-50%); border-radius: 999px; background: #e3d6b8; overflow: hidden; }
.brew__flow { position: absolute; inset: 0 auto 0 0; width: var(--flow, 0%); border-radius: 999px; background: linear-gradient(to right, #a8501a, #d9952f 40%, #5fb0ae 70%, #1d6e72); transition: width .6s ease; }
.brew__flow::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(115deg, rgba(255, 255, 255, .28) 0 6px, transparent 6px 14px); animation: brew-bubbles 1.6s linear infinite; }
@keyframes brew-bubbles { to { background-position: 14px 0; } }
.brew__nodes { position: relative; display: flex; margin: 0; padding: 0; list-style: none; }
.brew__nodes li { flex: 1 1 0; display: flex; justify-content: center; }
.brew__node { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); padding: 0; background: none; border: 0; cursor: pointer; font-weight: 600; font-size: .8125rem; color: var(--ink-muted); }
.brew__num { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; background: var(--cream-raised); border: 3px solid var(--c); font-family: var(--font-serif); font-size: 1.25rem; font-weight: 700; color: var(--c); transition: transform .25s ease, background-color .25s ease, color .25s ease, box-shadow .25s ease; }
.brew__node.is-done .brew__num { background: color-mix(in srgb, var(--c) 18%, var(--cream-raised)); }
.brew__node[aria-current="step"] { color: var(--ink); }
.brew__node[aria-current="step"] .brew__num { background: var(--c); color: #fff; transform: scale(1.18); box-shadow: 0 6px 14px rgba(42, 29, 18, .3); }
.brew__node:hover .brew__num { transform: scale(1.1); }
.brew__node:focus-visible { outline: 3px solid var(--amber); outline-offset: 4px; border-radius: 8px; }
.brew__detail { display: grid; gap: var(--space-6); padding: var(--space-8); background: var(--cream-raised); border-radius: var(--radius-md); border-left: 6px solid var(--c, var(--amber)); box-shadow: var(--shadow-md); transition: border-color .4s ease; }
@media (min-width: 900px) { .brew__detail { grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: var(--space-8); } }
.brew__big { font-family: var(--font-serif); font-size: clamp(4rem, 9vw, 6.5rem); line-height: .9; font-weight: 700; color: var(--c, var(--amber)); transition: color .4s ease; }
.brew__body h3 { margin: 0 0 var(--space-2); font-size: 1.375rem; }
.brew__body p { margin: 0 0 var(--space-3); font-size: 1.125rem; }
.brew__facts { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-3) 0 0; padding: 0; list-style: none; }
.brew__facts li { padding: .25rem .8rem; border-radius: 999px; background: #fbf3dc; border: 1px solid #d8c9a8; font-weight: 700; font-size: .9375rem; color: var(--ink); }
.brew__nav { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6); }
.brew__step-in { animation: step-in .35s ease both; }
@media (prefers-reduced-motion: reduce) { .brew__flow, .brew__flow::after, .brew__num, .brew__step-in { transition: none; animation: none; } }

/* Quiz: Spielfeld als dunkle Tafel */
.qz-section { padding: calc(var(--space-12) + 6px) var(--space-8) var(--space-8); color: var(--cream); border-radius: var(--radius-md); box-shadow: var(--shadow-md);
  background: radial-gradient(circle at 15px -2px, var(--cream) 12px, transparent 12.5px) 0 0 / 30px 14px repeat-x, var(--teal-dark); }
.qz-head { max-width: 46rem; margin-bottom: var(--space-6); }
.qz-head h2 { color: var(--cream-raised); }
.qz-head p { margin: 0; color: rgba(247, 240, 227, .88); }
.qz-stage:empty { display: none; }
.qz__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3) var(--space-6); margin-bottom: var(--space-6); }
.qz__caps { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.qz__caps li { width: 2rem; height: 2rem; border-radius: 50%; background: rgba(247, 240, 227, .12); border: 2px dashed rgba(247, 240, 227, .35); transition: transform .3s ease, background-color .3s ease; }
.qz__caps li.is-current { border-style: solid; border-color: var(--foam); }
.qz__caps li.is-right { border: 0; background: var(--cap-amber) center / contain no-repeat; transform: scale(1.1); }
.qz__caps li.is-wrong { border-style: solid; border-color: #e8806d; background: rgba(232, 128, 109, .22); }
.qz__score { margin: 0; font-size: .9375rem; color: rgba(247, 240, 227, .88); }
.qz__score b { margin-right: .75em; font-family: var(--font-serif); font-size: 1.375rem; color: var(--foam); font-variant-numeric: tabular-nums; }
.qz__tag { margin: 0 0 var(--space-2); font-size: .75rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--foam); }
.qz__question { margin: 0 0 var(--space-6); font-size: clamp(1.25rem, 1rem + 1vw, 1.625rem); color: var(--cream-raised); }
.qz__question:focus, .qz__rank:focus { outline: none; }
.qz__options { display: grid; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
@media (min-width: 900px) { .qz__options { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.qz__option { display: flex; align-items: flex-start; gap: var(--space-3); width: 100%; height: 100%; padding: var(--space-4); text-align: left; font: inherit; font-size: 1.0625rem; color: var(--cream-raised); background: rgba(247, 240, 227, .08); border: 2px solid rgba(247, 240, 227, .28); border-radius: var(--radius-md); cursor: pointer; transition: background-color .2s ease, border-color .2s ease, transform .2s ease; }
.qz__option:hover:not(:disabled) { background: rgba(247, 240, 227, .16); border-color: var(--foam); transform: translateY(-2px); }
.qz__option:focus-visible { outline: 3px solid var(--amber); outline-offset: 3px; }
.qz__letter { flex: none; display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--foam); color: var(--teal-dark); font-weight: 800; }
.qz__option:disabled { cursor: default; }
.qz__option.is-correct { background: rgba(45, 152, 157, .38); border-color: #6fd2d6; }
.qz__option.is-wrong { background: rgba(232, 128, 109, .25); border-color: #e8806d; }
.qz__option.is-dim { opacity: .55; }
.qz__feedback { margin-top: var(--space-6); padding: var(--space-6); color: var(--ink); background: var(--cream-raised); border-radius: var(--radius-md); border-left: 6px solid var(--teal); }
.qz__feedback.is-wrong { border-left-color: #c9503a; }
.qz__verdict { margin: 0 0 var(--space-2); font-family: var(--font-serif); font-size: 1.375rem; font-weight: 700; color: var(--teal-deep); }
.qz__feedback.is-wrong .qz__verdict { color: #a1301e; }
.qz__answer-label { margin: 0 0 var(--space-1); font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-muted); }
.qz__answer p, .qz__answer ul { margin: 0 0 var(--space-2); }
.qz__next { margin-top: var(--space-4); }
.qz__result { text-align: center; padding: var(--space-4) 0; }
.qz__result .qz__rank { margin: var(--space-3) 0 var(--space-2); font-family: var(--font-serif); font-size: clamp(1.625rem, 1.1rem + 1.6vw, 2.375rem); line-height: 1.1; color: var(--foam); }
.qz__result p { margin: 0 auto var(--space-4); max-width: 34rem; font-size: 1.125rem; color: var(--cream-raised); }
.qz__result .qz__caps { justify-content: center; }
.qz__result .qz__caps li { width: 2.5rem; height: 2.5rem; }
.qz__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3); margin-top: var(--space-6); }
/* Helle Schaltflächen auf der dunklen Quiz-Tafel */
.qz-section .btn-secondary { color: var(--cream-raised); border-color: var(--foam); background: transparent; }
.qz-section .btn-secondary:hover { background: var(--foam); color: var(--teal-dark); }
.qz-read { margin-top: var(--space-8); color: var(--cream-raised); }
.qz-read summary { cursor: pointer; font-weight: 600; color: var(--foam); }
.qz-read[open] summary { margin-bottom: var(--space-4); }
.faq-list { max-width: 50rem; margin: 0; padding-left: 1.25rem; }
.faq-list > li { margin-bottom: var(--space-4); }
.faq-list h3 { margin: 0 0 var(--space-1); font-size: 1.0625rem; color: var(--cream-raised); }
.faq-options { display: none; }
.faq-answer p, .faq-answer ul { margin: 0 0 var(--space-2); color: rgba(247, 240, 227, .9); }
@media (max-width: 767.98px) { .qz-section { padding: calc(var(--space-8) + 6px) var(--space-4) var(--space-6); } }
@media (prefers-reduced-motion: reduce) { .qz__option, .qz__caps li { transition: none; } }

/* Führungen: Eintrittskarte mit Foto */
.bw-tour { display: grid; gap: var(--space-8); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 900px) { .bw-tour { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
.bw-tour__photo img { display: block; width: 100%; height: auto; }
.bw-ticket { position: relative; padding: var(--space-8); background: #fbf3dc; border-radius: var(--radius-md); box-shadow: var(--shadow-md); border-left: 2px dashed #c9b896; }
.bw-ticket::before, .bw-ticket::after { content: ""; position: absolute; left: -13px; width: 24px; height: 24px; border-radius: 50%; background: var(--cream); }
.bw-ticket::before { top: -12px; }
.bw-ticket::after { bottom: -12px; }
.bw-ticket h2 { margin: 0 0 var(--space-4); font-size: 1.5rem; }
.bw-ticket p { margin: 0 0 var(--space-4); }
.bw-when { margin: var(--space-6) 0; padding: var(--space-4); background: rgba(255, 255, 255, .55); border-radius: var(--radius-sm); }
.bw-when ul { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; text-align: center; font-size: .8125rem; font-weight: 700; }
.bw-when__months { grid-template-columns: repeat(12, minmax(0, 1fr)); margin-bottom: var(--space-3) !important; }
.bw-when__days { grid-template-columns: repeat(7, minmax(0, 1fr)); max-width: 24rem; }
.bw-when li { padding: .35rem 0; border-radius: 6px; background: #e9dcc0; color: var(--ink-muted); }
.bw-when__months li { background: var(--amber); color: var(--ink); }
.bw-when__months li.is-off { background: repeating-linear-gradient(135deg, #e9dcc0 0 5px, #f3e8d0 5px 10px); color: var(--ink-muted); font-weight: 600; }
.bw-when__days li.is-on { background: var(--teal-deep); color: var(--cream-raised); }
.bw-when li.is-now { outline: 3px solid var(--ink); outline-offset: 1px; }
.bw-when__label { margin: 0 0 var(--space-2); font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--amber-deep); }
.bw-when__now { margin: calc(var(--space-6) * -1 + var(--space-3)) 0 var(--space-6); font-weight: 600; color: var(--teal-deep); }
@media (max-width: 575.98px) { .bw-when__months { grid-template-columns: repeat(6, minmax(0, 1fr)); } .bw-ticket { padding: var(--space-6); } }

/* ============ Gaststätte: Karten (ab 1.11.0) ============ */
.item-page:has(.gst-page), .com-content-article:has(.gst-page) { max-width: none; }
.gst-page { margin-top: var(--space-4); }
.gst-page h2 { font-size: clamp(1.3125rem, 1.1rem + .8vw, 1.75rem); }

/* Einleitung mit Foto */
.gst-intro { display: grid; gap: var(--space-12); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 900px) { .gst-intro { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); } }
.gst-intro__text h2 { margin: 0 0 var(--space-4); }
.gst-lead { font-family: var(--font-serif); font-size: clamp(1.25rem, 2.3vw, 1.625rem); line-height: 1.4; }
.gst-intro__photo { margin: 0; }
.gst-intro__photo img { display: block; width: 100%; height: auto; }
.gst-intro__photo:has(img.is-missing) { display: none; }
.gst-intro:has(img.is-missing) { grid-template-columns: minmax(0, 1fr); max-width: 52rem; }
.gst-page { --ico-years: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 6h22M13 42h22'/%3E%3Cpath d='M15 6c0 11 9 13 9 18s-9 7-9 18M33 6c0 11-9 13-9 18s9 7 9 18'/%3E%3Cpath d='M19 37c2-3 8-3 10 0'/%3E%3C/svg%3E"); --ico-floors: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 42V8h32v34M4 42h40'/%3E%3Cpath d='M8 17h32M8 27h32'/%3E%3Cpath d='M15 12h4M15 22h4M15 32h4M25 12h4M25 22h4M25 32h4M32 36v6'/%3E%3C/svg%3E"); --ico-kettle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 24c0-8 6-13 14-13s14 5 14 13v9a8 8 0 0 1-8 8H18a8 8 0 0 1-8-8z'/%3E%3Cpath d='M10 24h28M24 11V5h7'/%3E%3Cpath d='M16 31h.01M24 33h.01M32 31h.01'/%3E%3C/svg%3E"); --ico-tree: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M24 42V29M24 32l-6-5M24 30l7-6'/%3E%3Cpath d='M24 5c-7 0-13 4-13 10 0 2 .8 4 2.3 5.5C10.5 21.5 9 24 9 26.5 9 30 12 32 15.5 32c1.4 0 2.8-.4 3.800-1.200M24 5c7 0 13 4 13 10 0 2-.8 4-2.300 5.500C37.500 21.500 39 24 39 26.500 39 30 36 32 32.500 32c-1.400 0-2.800-.4-3.800-1.200'/%3E%3C/svg%3E"); }
.gst-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-6); margin: var(--space-12) 0 0; padding: var(--space-6) 0; list-style: none; border-block: 2px dashed #d8c9a8; }
.gst-facts li { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--space-4); align-items: center; min-width: 0; }
.gst-facts li::before { content: ""; grid-row: 1 / span 2; width: 3.5rem; height: 3.5rem; background: var(--amber); -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat; }
.gst-facts li[data-ico="years"] { --ico: var(--ico-years); }
.gst-facts li[data-ico="floors"] { --ico: var(--ico-floors); }
.gst-facts li[data-ico="kettle"] { --ico: var(--ico-kettle); }
.gst-facts li[data-ico="tree"] { --ico: var(--ico-tree); }
.gst-facts b { align-self: end; font-family: var(--font-serif); font-size: clamp(1.5rem, 3vw, 2.25rem); line-height: 1.1; color: var(--teal-deep); overflow-wrap: anywhere; }
.gst-facts span { align-self: start; font-size: .9375rem; line-height: 1.35; color: var(--ink-muted); }
@media (max-width: 991.98px) { .gst-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 479.98px) { .gst-facts { grid-template-columns: minmax(0, 1fr); } }

/* Kartenbereich */
.gst-karten { margin-top: var(--space-16); scroll-margin-top: 7rem; }
.gst-karten > h2 { margin: 0 0 var(--space-6); }

/* Wochenkarte als Tafel im Holzrahmen */
.menu-week {
  position: relative; margin-bottom: var(--space-12); padding: var(--space-8); color: var(--cream);
  background: radial-gradient(ellipse at 15% 0%, rgba(255, 255, 255, .08), transparent 55%), #0b2f31;
  border: 12px solid #7a4e24; border-radius: 10px;
  box-shadow: inset 0 0 0 2px rgba(247, 240, 227, .28), inset 0 0 40px rgba(0, 0, 0, .35), var(--shadow-md);
}
.menu-week, .menu-week * { font-synthesis: none; }
.menu-week h3 { margin: 0; font-family: var(--font-hand); font-size: clamp(2.5rem, 6vw, 3.75rem); font-weight: 400; line-height: 1.1; color: var(--cream-raised); text-shadow: 0 0 6px rgba(255, 255, 255, .25); }
.menu-week__date { margin: var(--space-1) 0 var(--space-6); font-family: var(--font-hand); font-size: 1.5rem; color: var(--foam); }
.menu-week__date:empty { margin: 0; }
.menu-week__list:empty { display: none; }
/* Gerichte in Spalten über die volle Breite der Tafel (Name oben, Preis darunter, Kreidelinie darüber) */
.menu-week__dishes { list-style: none; margin: 0 0 var(--space-8); padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: var(--space-8) var(--space-12); }
.menu-week__dishes li { display: flex; flex-direction: column; gap: var(--space-3); padding-top: var(--space-4); border-top: 2px dotted rgba(247, 240, 227, .4); font-family: var(--font-hand); font-size: clamp(1.625rem, 2.8vw, 2.125rem); font-weight: 400; line-height: 1.2; color: var(--cream-raised); text-shadow: 0 0 5px rgba(255, 255, 255, .18); }
.menu-week__dishes .price { order: 2; margin-top: auto; font-family: var(--font-hand); font-size: 1.875rem; font-weight: 400; color: var(--foam); white-space: nowrap; }
.menu-week__note, .menu-week__empty { margin: 0; font-family: var(--font-hand); font-size: 1.375rem; color: rgba(247, 240, 227, .9); }
.menu-week__empty { margin-bottom: var(--space-3); color: var(--foam); }
.menu-week__empty[hidden] { display: none; }

/* Reiter für die drei Karten */
.menu-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); margin-bottom: var(--space-6); }
.menu-tab { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); padding: var(--space-4) var(--space-3); font: inherit; font-family: var(--font-serif); font-size: clamp(.9375rem, 2.2vw, 1.1875rem); font-weight: 700; line-height: 1.2; text-align: center; color: var(--ink); background: var(--cream-raised); border: 2px solid var(--line); border-radius: var(--radius-md); cursor: pointer; transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .2s ease, box-shadow .2s ease; }
.menu-tab:hover { border-color: var(--teal); transform: translateY(-2px); }
.menu-tab:focus-visible { outline: 3px solid var(--amber); outline-offset: 3px; }
.menu-tab svg { width: 2.5rem; height: 2.5rem; fill: none; stroke: var(--amber); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: stroke .2s ease; }
.menu-tab[aria-selected="true"] { color: var(--cream-raised); background: var(--teal-deep); border-color: var(--teal-deep); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.menu-tab[aria-selected="true"] svg { stroke: var(--foam); }
@media (max-width: 575.98px) { .menu-tab { padding: var(--space-3) var(--space-2); } .menu-tab svg { width: 2rem; height: 2rem; } }

/* Karte als Papier mit doppeltem Rahmen */
.menu-card { position: relative; padding: var(--space-12) var(--space-8) var(--space-8); background: var(--cream-raised); border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: var(--shadow-md), inset 0 0 0 8px var(--cream-raised), inset 0 0 0 9px #d8c9a8; }
.menu-cards:not(.is-live) .menu-card + .menu-card { margin-top: var(--space-8); }
.menu-card[hidden] { display: none; }
.menu-card.menu-card--in { animation: step-in .3s ease both; }
.menu-card > h3 { margin: 0 0 var(--space-6); text-align: center; font-size: clamp(1.3125rem, 1.1rem + .8vw, 1.625rem); }
.menu-card > h3::after { content: ""; display: block; width: 6rem; height: 8px; margin: var(--space-3) auto 0; background: radial-gradient(circle at 50% 50%, var(--amber) 3px, transparent 3.5px) center / 8px 8px no-repeat, linear-gradient(var(--amber), var(--amber)) left center / calc(50% - 10px) 2px no-repeat, linear-gradient(var(--amber), var(--amber)) right center / calc(50% - 10px) 2px no-repeat; }
.menu-columns { column-count: 2; column-gap: var(--space-12); }
@media (max-width: 899.98px) { .menu-columns { column-count: 1; } .menu-card { padding-inline: var(--space-6); } }
.menu-group { break-inside: avoid; margin: 0 0 var(--space-6); }
.menu-group h4 { display: flex; align-items: center; gap: var(--space-3); margin: 0 0 var(--space-2); font-family: var(--font-sans); font-size: .8125rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--amber); }
.menu-group h4::after { content: ""; flex: 1; height: 1px; background: #d8c9a8; }
.menu-items, .menu-sub { list-style: none; margin: 0; padding: 0; }
.menu-item, .menu-item__main { display: flex; align-items: flex-end; gap: var(--space-2); padding: .4rem 0; line-height: 1.5; }
.menu-item:not(.menu-item--group)::after, .menu-item__main::after { content: ""; order: 1; flex: 1 1 1.25rem; min-width: 1.25rem; align-self: flex-end; margin-bottom: .55em; border-bottom: 2px dotted #c9b896; }
.menu-item__name { flex: 0 1 auto; min-width: 0; }
.menu-item__price, .menu-item__prices { order: 2; flex: none; font-weight: 700; color: var(--teal-deep); font-variant-numeric: tabular-nums; white-space: nowrap; }
.menu-item__prices { display: flex; gap: var(--space-4); }
.menu-item__prices span { display: inline-flex; align-items: baseline; gap: .4em; }
.menu-item__prices i { font-style: normal; font-weight: 400; font-size: .8125rem; color: var(--ink-muted); }
.menu-item--group { display: block; padding: .4rem 0 0; }
.menu-item--group > .menu-item__name { display: block; font-weight: 400; }  /* Position ohne Preis mit Unterpunkten: normale Schrift (ab 1.18.5) */
.menu-item--group > .menu-item__main { padding: 0; }
.menu-item--group > .menu-item__main .menu-item__name { font-weight: 400; }
.menu-sub { margin: .25rem 0 var(--space-2) var(--space-6); padding-left: var(--space-4); border-left: 2px solid #e3d6b8; }
.menu-sub .menu-item { padding: .25rem 0; font-size: .9375rem; }
.menu-tag { display: inline-block; margin-left: .25em; padding: 0 .55em; border-radius: 999px; background: #e1efe0; color: #2c6a2f; font-size: .75rem; font-weight: 700; white-space: nowrap; }
.menu-card__note { margin: var(--space-6) 0 0; text-align: center; font-size: .875rem; color: var(--ink-muted); }
.menu-card__note + .menu-card__note { margin-top: var(--space-1); }
@media (prefers-reduced-motion: reduce) { .menu-tab, .menu-card.menu-card--in { transition: none; animation: none; } }

/* Küche: Foto umflossen vom Text */
.gst-kitchen { display: flow-root; margin-top: var(--space-16); }
.gst-kitchen > h2 { margin: 0 0 var(--space-4); }
.gst-kitchen__photo { float: right; width: min(42%, 26rem); margin: var(--space-2) 0 var(--space-4) var(--space-8); }
.gst-kitchen__photo img { display: block; width: 100%; height: auto; border-radius: var(--radius-md); box-shadow: var(--shadow-md); }
.gst-kitchen__photo:has(img.is-missing) { display: none; }
.gst-kitchen h3 { margin: var(--space-6) 0 var(--space-3); font-size: 1.1875rem; }
.gst-kitchen > h2 + .gst-kitchen__photo + h3 { margin-top: var(--space-2); }
.gst-checks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.gst-checks li { position: relative; padding-left: 2.25rem; }
.gst-checks li::before { content: ""; position: absolute; left: 0; top: .15em; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--teal-deep) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%23fff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 80% no-repeat; }

/* „Worauf wir verzichten“: wie von Hand durchgestrichen */
.gst-nos { list-style: none; margin: 0; padding: 0; }
.gst-nos li { position: relative; display: inline-block; margin: 0 var(--space-6) var(--space-2) 0; padding: 0 .2em; font-weight: 600; }
.gst-nos li::after { content: ""; position: absolute; left: -.25em; right: -.25em; top: 50%; height: .95em; transform: translateY(-48%) rotate(-1.4deg); background: center / 100% 100% no-repeat; pointer-events: none; }
.gst-nos li:nth-child(4n+1)::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 20' preserveAspectRatio='none' fill='none' stroke='%23b3261e' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath vector-effect='non-scaling-stroke' d='M2 11 C 28 6, 58 15, 98 9 S 168 13, 198 7'/%3E%3C/svg%3E"); transform: translateY(-48%) rotate(-1.4deg); }
.gst-nos li:nth-child(4n+2)::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 20' preserveAspectRatio='none' fill='none' stroke='%23b3261e' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath vector-effect='non-scaling-stroke' d='M3 8 C 38 14, 78 5, 120 11 S 178 8, 197 13'/%3E%3C/svg%3E"); transform: translateY(-48%) rotate(1.1deg); }
.gst-nos li:nth-child(4n+3)::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 20' preserveAspectRatio='none' fill='none' stroke='%23b3261e' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath vector-effect='non-scaling-stroke' d='M2 12 C 50 7, 90 14, 130 8 S 180 12, 198 9'/%3E%3Cpath vector-effect='non-scaling-stroke' d='M10 14 C 60 10, 110 15, 190 11'/%3E%3C/svg%3E"); transform: translateY(-48%) rotate(-0.6deg); }
.gst-nos li:nth-child(4n+4)::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 20' preserveAspectRatio='none' fill='none' stroke='%23b3261e' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath vector-effect='non-scaling-stroke' d='M3 9 C 30 13, 70 6, 110 10 S 165 6, 197 11'/%3E%3C/svg%3E"); transform: translateY(-48%) rotate(1.6deg); }

/* ============ Bildansicht (Lightbox) für Bilder in Beiträgen ============ */
.com-content-article img[data-zoom] { cursor: zoom-in; }
.com-content-article img[data-zoom]:focus-visible { outline: 3px solid var(--amber); outline-offset: 3px; }
html.lb-open { overflow: hidden; }
.lb { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center; padding: var(--space-6); background: rgba(15, 27, 28, .92); animation: lb-in .2s ease both; }
.lb[hidden] { display: none; }
.lb__figure { margin: 0; max-width: min(100%, 1400px); max-height: 100%; display: flex; flex-direction: column; align-items: center; gap: var(--space-3); }
.lb__img { display: block; max-width: 100%; max-height: calc(100vh - 9rem); max-height: calc(100dvh - 9rem); width: auto; height: auto; border-radius: 4px; box-shadow: 0 20px 60px rgba(0, 0, 0, .5); background: #111; }
.lb.is-loading .lb__img { opacity: .35; }
.lb__caption { max-width: 60rem; margin: 0; text-align: center; font-size: 1rem; color: #f5ecd9; }
.lb__caption:empty { display: none; }
.lb__btn { position: absolute; display: grid; place-items: center; width: 3rem; height: 3rem; padding: 0; font-size: 1.75rem; line-height: 1; color: #fff; background: rgba(255, 255, 255, .14); border: 0; border-radius: 50%; cursor: pointer; transition: background-color .2s ease; }
.lb__btn:hover { background: rgba(255, 255, 255, .28); }
.lb__btn:focus-visible { outline: 3px solid var(--amber); outline-offset: 2px; }
.lb__close { top: var(--space-4); right: var(--space-4); }
.lb__prev { left: var(--space-4); top: 50%; transform: translateY(-50%); }
.lb__next { right: var(--space-4); top: 50%; transform: translateY(-50%); }
.lb__count { position: absolute; left: 50%; bottom: var(--space-3); transform: translateX(-50%); font-size: .875rem; color: rgba(255, 255, 255, .75); }
.lb--single .lb__prev, .lb--single .lb__next, .lb--single .lb__count { display: none; }
@keyframes lb-in { from { opacity: 0; } to { opacity: 1; } }
@media (max-width: 575.98px) { .lb { padding: var(--space-3); } .lb__prev { left: var(--space-2); } .lb__next { right: var(--space-2); } .lb__btn { width: 2.5rem; height: 2.5rem; } }
@media (prefers-reduced-motion: reduce) { .lb { animation: none; } }

/* ============ Neu in 1.13.0 ============ */

/* Brauerei: Prozessbild neben dem Öko-Siegel */
.bw-process__foot { margin-top: var(--space-12); }
.bw-figure { max-width: 46rem; margin: 0 auto; }
.bw-figure img { display: block; width: 100%; height: auto; }
.bw-figure figcaption { padding: var(--space-3) 0 0; font-size: .875rem; color: var(--ink-muted); }
.bw-figure:has(img.is-missing) { display: none; }
/* Siegel (Rosette mit Lorbeer): eigenes Zeichen, kein geschütztes Logo */
.bw-seal { position: relative; width: min(17rem, 78%); aspect-ratio: 200 / 252; margin-inline: auto; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 252'%3E%3Cpolygon points='72,170 50,248 80,236 100,250 100,178' fill='%23245a29'/%3E%3Cpolygon points='128,170 150,248 120,236 100,250 100,178' fill='%231d4a22'/%3E%3Cpolygon points='199.0,100.0 195.4,105.0 189.5,109.4 188.8,114.1 193.5,119.9 195.6,125.6 190.9,129.5 184.0,132.2 182.2,136.6 185.1,143.4 185.7,149.5 180.1,152.0 172.8,152.9 169.9,156.6 171.0,163.9 170.0,170.0 163.9,171.0 156.6,169.9 152.9,172.8 152.0,180.1 149.5,185.7 143.4,185.1 136.6,182.2 132.2,184.0 129.5,190.9 125.6,195.6 119.9,193.5 114.1,188.8 109.4,189.5 105.0,195.4 100.0,199.0 95.0,195.4 90.6,189.5 85.9,188.8 80.1,193.5 74.4,195.6 70.5,190.9 67.8,184.0 63.4,182.2 56.6,185.1 50.5,185.7 48.0,180.1 47.1,172.8 43.4,169.9 36.1,171.0 30.0,170.0 29.0,163.9 30.1,156.6 27.2,152.9 19.9,152.0 14.3,149.5 14.9,143.4 17.8,136.6 16.0,132.2 9.1,129.5 4.4,125.6 6.5,119.9 11.2,114.1 10.5,109.4 4.6,105.0 1.0,100.0 4.6,95.0 10.5,90.6 11.2,85.9 6.5,80.1 4.4,74.4 9.1,70.5 16.0,67.8 17.8,63.4 14.9,56.6 14.3,50.5 19.9,48.0 27.2,47.1 30.1,43.4 29.0,36.1 30.0,30.0 36.1,29.0 43.4,30.1 47.1,27.2 48.0,19.9 50.5,14.3 56.6,14.9 63.4,17.8 67.8,16.0 70.5,9.1 74.4,4.4 80.1,6.5 85.9,11.2 90.6,10.5 95.0,4.6 100.0,1.0 105.0,4.6 109.4,10.5 114.1,11.2 119.9,6.5 125.6,4.4 129.5,9.1 132.2,16.0 136.6,17.8 143.4,14.9 149.5,14.3 152.0,19.9 152.9,27.2 156.6,30.1 163.9,29.0 170.0,30.0 171.0,36.1 169.9,43.4 172.8,47.1 180.1,48.0 185.7,50.5 185.1,56.6 182.2,63.4 184.0,67.8 190.9,70.5 195.6,74.4 193.5,80.1 188.8,85.9 189.5,90.6 195.4,95.0' fill='%232f6f35'/%3E%3Ccircle cx='100' cy='100' r='84' fill='none' stroke='%23e9d9a8' stroke-width='2.4'/%3E%3Ccircle cx='100' cy='100' r='88.5' fill='none' stroke='%23e9d9a8' stroke-width='.8' stroke-dasharray='1.5 4' opacity='.8'/%3E%3Ccircle cx='100' cy='100' r='62' fill='%23275f2d' stroke='%23e9d9a8' stroke-width='1.2'/%3E%3Cellipse cx='118.4' cy='173.7' rx='9' ry='3.6' transform='rotate(196.0 118.4 173.7)' fill='%23e9d9a8'/%3E%3Cellipse cx='136.8' cy='166.5' rx='9' ry='3.6' transform='rotate(181.0 136.8 166.5)' fill='%23e9d9a8'/%3E%3Cellipse cx='152.8' cy='154.7' rx='9' ry='3.6' transform='rotate(166.0 152.8 154.7)' fill='%23e9d9a8'/%3E%3Cellipse cx='165.1' cy='139.1' rx='9' ry='3.6' transform='rotate(151.0 165.1 139.1)' fill='%23e9d9a8'/%3E%3Cellipse cx='173.1' cy='120.9' rx='9' ry='3.6' transform='rotate(136.0 173.1 120.9)' fill='%23e9d9a8'/%3E%3Cellipse cx='176.0' cy='101.3' rx='9' ry='3.6' transform='rotate(121.0 176.0 101.3)' fill='%23e9d9a8'/%3E%3Cellipse cx='173.7' cy='81.6' rx='9' ry='3.6' transform='rotate(106.0 173.7 81.6)' fill='%23e9d9a8'/%3E%3Cellipse cx='166.5' cy='63.2' rx='9' ry='3.6' transform='rotate(91.0 166.5 63.2)' fill='%23e9d9a8'/%3E%3Cellipse cx='154.7' cy='47.2' rx='9' ry='3.6' transform='rotate(76.0 154.7 47.2)' fill='%23e9d9a8'/%3E%3Cellipse cx='81.6' cy='173.7' rx='9' ry='3.6' transform='rotate(164.0 81.6 173.7)' fill='%23e9d9a8'/%3E%3Cellipse cx='63.2' cy='166.5' rx='9' ry='3.6' transform='rotate(179.0 63.2 166.5)' fill='%23e9d9a8'/%3E%3Cellipse cx='47.2' cy='154.7' rx='9' ry='3.6' transform='rotate(194.0 47.2 154.7)' fill='%23e9d9a8'/%3E%3Cellipse cx='34.9' cy='139.1' rx='9' ry='3.6' transform='rotate(209.0 34.9 139.1)' fill='%23e9d9a8'/%3E%3Cellipse cx='26.9' cy='120.9' rx='9' ry='3.6' transform='rotate(224.0 26.9 120.9)' fill='%23e9d9a8'/%3E%3Cellipse cx='24.0' cy='101.3' rx='9' ry='3.6' transform='rotate(239.0 24.0 101.3)' fill='%23e9d9a8'/%3E%3Cellipse cx='26.3' cy='81.6' rx='9' ry='3.6' transform='rotate(254.0 26.3 81.6)' fill='%23e9d9a8'/%3E%3Cellipse cx='33.5' cy='63.2' rx='9' ry='3.6' transform='rotate(269.0 33.5 63.2)' fill='%23e9d9a8'/%3E%3Cellipse cx='45.3' cy='47.2' rx='9' ry='3.6' transform='rotate(284.0 45.3 47.2)' fill='%23e9d9a8'/%3E%3C/svg%3E") center / 100% 100% no-repeat; filter: drop-shadow(0 10px 12px rgba(30, 60, 30, .28)); }
.bw-seal__text { position: absolute; left: 23%; right: 23%; top: 18.3%; height: 42.9%; display: grid; place-items: center; margin: 0; text-align: center; font-family: var(--font-serif); font-size: .95rem; font-weight: 700; line-height: 1.25; color: #fffaf0; text-shadow: 0 1px 1px rgba(0, 0, 0, .25); }
/* Siegel am unteren Rand des Quiz-Abschnitts: halb darüber hinausragend, rechts */
.qz-section { position: relative; margin-bottom: 13rem; }
.bw-seal--edge { position: absolute; right: var(--space-12); bottom: 0; width: 14rem; margin: 0; transform: translateY(65%); }
/* Platz unten im Quiz freihalten, damit das Siegel keine Antworten verdeckt (ab 1.17.8) */
@media (min-width: 992px) { .qz-section:has(.bw-seal--edge) { padding-bottom: 7rem; } }
.bw-seal--edge .bw-seal__text { font-size: .8125rem; }
/* Mobil: Siegel nicht mehr über dem Quiz, sondern als eigener Abschluss unter dem Quiz innerhalb des Abschnitts (ab 1.17.8) */
@media (max-width: 991.98px) { .qz-section { margin-bottom: var(--space-12); } .bw-seal--edge { position: relative; right: auto; bottom: auto; width: 10.5rem; margin: var(--space-8) auto calc(-1 * var(--space-2)); transform: none; } .bw-seal--edge .bw-seal__text { font-size: .6875rem; } }
@media (max-width: 575.98px) { .bw-seal { width: min(15rem, 78%); } .bw-seal__text { font-size: .8125rem; } }

/* Brauerei: Kosten der Führung */
.bw-price { display: flex; align-items: center; gap: var(--space-4); margin: 0 0 var(--space-4); padding: var(--space-4); background: rgba(255, 255, 255, .6); border: 2px dashed #c9b896; border-radius: var(--radius-md); }
.bw-price__amount { flex: none; display: grid; justify-items: center; padding: .35rem 1rem; border-radius: 999px; background: var(--amber); color: var(--ink); font-family: var(--font-serif); font-size: 1.625rem; font-weight: 700; line-height: 1.1; transform: rotate(-3deg); }
.bw-price__amount small { font-family: var(--font-sans); font-size: .6875rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.bw-ticket .bw-price p { margin: 0; }

/* Gaststätte: Grußwort der Eigentümerfamilie */
.gst-greeting { max-width: 60rem; margin: var(--space-16) auto 0; padding: var(--space-12) var(--space-12); display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-8) var(--space-12); align-items: start;
  background: var(--cream-raised); border: 1px solid #d8c9a8; border-radius: 6px; box-shadow: inset 0 0 0 7px var(--cream-raised), inset 0 0 0 8px #d8c9a8, var(--shadow-md); }
.gst-greeting__crest { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); text-align: center; }
.gst-greeting__monogram { display: grid; place-items: center; width: 6.5rem; height: 6.5rem; border: 3px double var(--amber); border-radius: 50%; font-family: var(--font-serif); font-size: 3.5rem; font-weight: 700; line-height: 1; color: var(--teal-deep); background: radial-gradient(circle, #fffdf6, #f6ecd2); }
.gst-greeting__family { margin: 0; font-family: var(--font-serif); font-size: 1.0625rem; font-weight: 600; line-height: 1.25; color: var(--ink); }
.gst-greeting__eyebrow { margin: 0 0 var(--space-2); font-size: .8125rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--amber); }
.gst-greeting h2 { margin: 0 0 var(--space-6); font-size: clamp(1.4375rem, 1.1rem + 1vw, 1.875rem); }
.gst-greeting h2::after { content: ""; display: block; width: 4.5rem; height: 3px; margin-top: var(--space-3); border-radius: 3px; background: var(--amber); }
.gst-greeting p { margin: 0 0 var(--space-4); font-family: var(--font-serif); font-size: 1.1875rem; line-height: 1.75; }
.gst-greeting__salutation { font-style: italic; }
.gst-greeting__sign { margin-top: var(--space-8) !important; }
.gst-greeting__sign span { display: block; font-family: var(--font-hand); font-size: 2.5rem; font-weight: 400; line-height: 1.2; color: var(--teal-deep); transform: rotate(-2deg); transform-origin: left; }
@media (max-width: 767.98px) { .gst-greeting { grid-template-columns: minmax(0, 1fr); padding: var(--space-8) var(--space-6); } .gst-greeting__crest { flex-direction: row; justify-content: flex-start; text-align: left; } .gst-greeting__monogram { width: 4.5rem; height: 4.5rem; font-size: 2.25rem; } }

/* Geschichte: Platzhalter-Foto und Schwerpunkte */
.tl-photo--placeholder { transform: rotate(1deg); }
.tl-photo__ph { display: grid; place-items: center; align-content: center; gap: var(--space-2); aspect-ratio: 4 / 3; color: var(--ink-muted); font-size: .9375rem; font-weight: 600; background: repeating-linear-gradient(135deg, #f1e8d3 0 12px, #f7f0e0 12px 24px); }
.tl-photo__ph::before { content: ""; width: 4.5rem; height: 4.5rem; background: #cbb98f; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='black'%3E%3Ccircle cx='24' cy='16' r='9'/%3E%3Cpath d='M6 44c0-10 8-17 18-17s18 7 18 17z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='black'%3E%3Ccircle cx='24' cy='16' r='9'/%3E%3Cpath d='M6 44c0-10 8-17 18-17s18 7 18 17z'/%3E%3C/svg%3E") center / contain no-repeat; }
.tl-focus { display: grid; gap: var(--space-4); margin: var(--space-4) 0 0; }
.tl-focus h3 { margin: 0 0 var(--space-2); font-family: var(--font-sans); font-size: .8125rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--foam); }
.tl-focus ul { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--space-1); }
.tl-focus li { position: relative; padding-left: 1.4rem; }
.tl-focus li::before { content: ""; position: absolute; left: .1rem; top: .65em; width: .5rem; height: .5rem; border-radius: 50%; background: var(--amber); }

/* Wochenkarte als Modul (Seitenleiste und andere Positionen): Zettel an einer Holzklammer */
.wk { position: relative; margin: 0 0 var(--space-4); padding: var(--space-6) var(--space-6) var(--space-8); background: #fffdf6; border: 1px solid #e3d5b6; border-top: 3px solid var(--amber); border-bottom: 0; border-radius: 3px 3px 0 0; filter: drop-shadow(0 6px 8px rgba(60, 40, 10, .12)); }
.wk::after { content: ""; position: absolute; left: -1px; right: -1px; bottom: -10px; height: 10px; background: linear-gradient(135deg, #fffdf6 5px, transparent 0) 0 0 / 14px 10px, linear-gradient(225deg, #fffdf6 5px, transparent 0) 0 0 / 14px 10px; }
.wk__date { margin: 0 0 var(--space-3); font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--amber); }
.wk__dishes { list-style: none; margin: 0; padding: 0; }
.wk__dishes li { display: flex; flex-direction: column; gap: .15rem; margin: 0; padding: .65rem 0; border-bottom: 1px dotted #cdb98f; font-family: var(--font-serif); font-size: 1.0625rem; font-weight: 600; line-height: 1.35; color: var(--ink); }
.wk__dishes li:last-child { border-bottom: 0; }
.wk__dishes .price { font-family: var(--font-sans); font-size: .9375rem; font-weight: 700; color: var(--teal-deep); font-variant-numeric: tabular-nums; }
.wk__empty { margin: 0 0 var(--space-3); font-size: .9375rem; color: var(--ink-muted); }
.wk__more { margin: var(--space-3) 0 0; font-size: .9375rem; font-weight: 600; }
.wk__more a { text-underline-offset: .2em; }

/* Forms */
.form-control, .form-select, input[type="text"], input[type="email"], input[type="tel"], input[type="password"], input[type="date"], textarea, select {
  font: inherit;
  background-color: var(--cream-raised);
  border: 1px solid #9a8264;
  border-radius: var(--radius-sm);
  padding: .625rem .75rem;
  color: var(--ink);
  max-width: 100%;
}
.form-control:focus, .form-select:focus, input:focus, textarea:focus, select:focus {
  border-color: var(--teal-deep);
  box-shadow: 0 0 0 3px rgba(29, 110, 114, .25);
  outline: none;
}
label, .form-label, .control-label { font-weight: 600; font-size: .9375rem; }
.control-group { margin-bottom: var(--space-4); }
.star, .form-control-feedback, .invalid-feedback { color: #a1301e; }

/* Messages */
#system-message-container { margin-bottom: var(--space-6); }
#system-message-container:empty { display: none; margin: 0; }
.alert, joomla-alert {
  display: block; border-radius: var(--radius-md); border: 1px solid var(--line);
  background: var(--cream-raised); color: var(--ink); padding: var(--space-4) var(--space-6);
}
.alert-success, joomla-alert[type="success"] { background: #e6efe3; border-color: #b8ceb2; }
.alert-warning, joomla-alert[type="warning"] { background: var(--foam); border-color: #e3c98a; }
.alert-danger, .alert-error, joomla-alert[type="danger"], joomla-alert[type="error"] { background: #f7e1dc; border-color: #e3b1a6; }

/* Embeds (resmio booking, maps) */
iframe { max-width: 100%; border: 0; }
.embed-card {
  background: var(--cream-raised); border: 1px solid var(--line); border-radius: var(--radius-md);
  padding: var(--space-4); overflow: hidden;
}
.embed-card iframe { display: block; width: 100%; min-height: 640px; }
.ratio { border-radius: var(--radius-md); overflow: hidden; }

/* Two-column content helper */
.grid-2 { display: grid; gap: var(--space-8); grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); align-items: start; }
.grid-3 { display: grid; gap: var(--space-6); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--teal-dark);
  color: var(--cream);
  padding-block: var(--space-12) var(--space-6);
  font-size: .9375rem;
}
.site-footer a { color: #a5e0e2; }
.site-footer a:hover { color: var(--cream-raised); }
.site-footer h2, .site-footer h3, .site-footer h4, .site-footer .module-card__title {
  color: var(--cream-raised); font-size: 1.125rem; margin-bottom: var(--space-3);
}
.site-footer .module-card { background: none; border: 0; padding: 0; }
.site-footer__cols {
  display: grid; gap: var(--space-8);
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  padding-bottom: var(--space-8);
}
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li + li { margin-top: var(--space-1); }
.site-footer__note {
  margin: 0 0 var(--space-6); padding: var(--space-3) var(--space-4);
  border: 1px solid rgba(165, 224, 226, .35); border-radius: var(--radius-md);
  font-size: .875rem;
}
.site-footer__bottom {
  display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-6); align-items: center; justify-content: space-between;
  border-top: 1px solid rgba(165, 224, 226, .25); padding-top: var(--space-6);
  font-size: .875rem;
}
.site-footer__bottom p { margin: 0; }
.site-footer__links ul, .site-footer__links .mod-menu { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); }
.site-footer__links li + li { margin-top: 0; }

/* Error / offline pages (these load without the header background colour of site-header) */
.error-page .site-body { padding-block: var(--space-12) var(--space-16); }
.error-box { display: grid; gap: var(--space-8) var(--space-12); grid-template-columns: minmax(0, 1fr); align-items: center; max-width: 1100px; }
@media (min-width: 900px) { .error-box { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); } }
.error-box__art { width: 100%; max-width: 40rem; margin-inline: auto; }
.err-art { display: block; width: 100%; height: auto; overflow: visible; }
.error-box__eyebrow { margin: 0 0 var(--space-3); font-size: .9375rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--amber); }
.error-box__title { margin: 0 0 var(--space-4); font-size: clamp(1.75rem, 3.6vw, 2.5rem); }
.error-box__text { margin: 0 0 var(--space-6); font-size: 1.125rem; }
.error-box__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin: 0 0 var(--space-6); }
.error-box__message { font-size: .875rem; color: var(--ink-muted); }
.error-box__debug { text-align: left; font-size: .75rem; overflow: auto; }
.err-drip { animation: err-drip 2.6s ease-in infinite; transform-box: fill-box; transform-origin: center; }
.err-drip--2 { animation-delay: 1.3s; }
.err-foam { animation: err-foam 4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.err-foam--1 { animation-delay: 1.2s; } .err-foam--2 { animation-delay: 2.4s; }
.err-bubble { animation: err-bubble 3.6s ease-out infinite; transform-box: fill-box; }
.err-bubble--1 { animation-delay: 1.2s; } .err-bubble--2 { animation-delay: 2.4s; }
@keyframes err-drip { 0% { transform: translateY(-4px) scale(.6); opacity: 0; } 15% { opacity: 1; } 70% { transform: translateY(18px) scale(1); opacity: 1; } 100% { transform: translateY(20px) scale(.8); opacity: 0; } }
@keyframes err-foam { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }
@keyframes err-bubble { 0% { transform: translateY(0); opacity: 0; } 20% { opacity: 1; } 100% { transform: translateY(-34px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .err-drip, .err-foam, .err-bubble { animation: none; } .err-bubble { opacity: 0; } }

.offline { min-height: 100vh; display: grid; place-items: center; padding: var(--space-6); }
.offline__card {
  width: 100%; max-width: 440px; background: var(--cream-raised); border: 1px solid var(--line);
  border-radius: var(--radius-md); padding: var(--space-8); text-align: center; box-shadow: var(--shadow-md);
}
.offline__login { text-align: left; margin-top: var(--space-6); }
.offline__login summary { cursor: pointer; color: var(--ink-muted); font-size: .875rem; text-align: center; }
.offline__login form { margin-top: var(--space-4); }

/* Back to top */
.back-to-top {
  position: fixed; right: var(--space-4); bottom: var(--space-4); z-index: 90;
  width: 44px; height: 44px; display: grid; place-items: center;
  border-radius: var(--radius-full); background: var(--teal-deep); color: var(--cream-raised);
  box-shadow: var(--shadow-md);
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
}
.back-to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.back-to-top:hover { color: var(--cream-raised); background: var(--teal-hover); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ---------- Print ---------- */
@media print {
  .topbar, .site-header, .hero, .pos-top, .pos-bottom, .layout__aside, .back-to-top, .site-footer__cols, .site-footer__links { display: none !important; }
  body { background: #fff; }
  .site-footer { background: none; color: var(--ink); }
}

@media (max-width: 575.98px) {
  .module-card.teaser { --teaser-ratio: 16 / 9; }
  .pos-top { gap: var(--space-4); }
}

/* ============ Neu in 1.17.8 ============ */
/* Brauprozess: Stationen, Prozessbild und Erklärung als ein gemeinsames Feld */
.brew--photo { gap: var(--space-6); padding: var(--space-6) var(--space-6) var(--space-8); background: var(--cream-raised); border-radius: var(--radius-md); box-shadow: var(--shadow-md); border-top: 6px solid #d9952f; }
.brew--photo .brew__scroll { padding-top: var(--space-2); border-bottom: 1px dashed #d8c9a8; padding-bottom: var(--space-4); }
.brew__stage { display: grid; gap: var(--space-6); align-items: start; }
@media (min-width: 900px) { .brew__stage { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--space-8); } }
.brew__stage:has(img.is-missing) { grid-template-columns: minmax(0, 1fr); }
.brew__photo.bw-figure { position: relative; max-width: none; margin: 0; padding: 0; background: none; border-radius: var(--radius-md); box-shadow: none; }
.brew__photo img { border-radius: var(--radius-md); box-shadow: 0 4px 12px rgba(60, 40, 10, .18); }
.brew__photo figcaption { padding: var(--space-2) 0 0; font-size: .8125rem; }
.brew__tag { position: absolute; left: var(--space-3); top: var(--space-3); z-index: 1; padding: .3rem .8rem; border-radius: 999px; background: var(--c, var(--amber)); color: #fff; font-weight: 700; font-size: .875rem; box-shadow: 0 3px 8px rgba(0, 0, 0, .25); transition: background-color .4s ease; pointer-events: none; }
.brew--photo .brew__detail { box-shadow: none; background: #fffdf8; padding: var(--space-6); }
@media (min-width: 900px) { .brew--photo .brew__detail { grid-template-columns: minmax(0, 1fr); } .brew--photo .brew__big { display: none; } }
@media (max-width: 575.98px) { .brew--photo { padding: var(--space-4) var(--space-3) var(--space-6); } .brew--photo .brew__detail { padding: var(--space-4); } .brew--photo .brew__big { font-size: 3.5rem; } }
@media (max-width: 899.98px) { .brew--photo .brew__detail { order: -1; } .brew--photo .brew__big { display: none; } }

/* ============ Neu in 1.18.0: einheitlicher Fotostil ============ */
/* Hauptstil: gerade, runde Ecken, weicher Schatten. Nur die Geschichte (.tl-photo) behält den Polaroid-Stil. */
:root { --photo-radius: 14px; --photo-shadow: 0 18px 40px -18px rgba(42, 29, 18, .45), 0 2px 6px rgba(42, 29, 18, .08); }
.gst-intro__photo img, .bg-vesper__photo img, .bw-tour__photo img, .bw-figure img, .fass-snaps img,
.foto { border-radius: var(--photo-radius); box-shadow: var(--photo-shadow); }
.foto { display: block; max-width: 100%; height: auto; }
.brew__photo img { border-radius: var(--radius-md); }

/* ============ Neu in 1.18.1: Führungsanfrage (Brauerei) ============ */
.tour-book { position: relative; margin-top: var(--space-12); padding: var(--space-8); background: #fbf3dc; border-radius: var(--radius-md); box-shadow: var(--shadow-md); border-top: 2px dashed #c9b896; }
.tour-book > h2 { margin: 0 0 var(--space-2); }
.tour-book__intro { margin: 0 0 var(--space-6); max-width: 46rem; color: var(--ink-muted); }
.tour-book .fass-form { padding: 0; border-top: 0; }
.tour-book .fass-form::before, .tour-book .fass-form::after { content: none; }
.tour-book .fass-form[hidden] { display: none; }
.fass-form .fass-field select {
  width: 100%; padding: .55rem .25rem; background: transparent; border: 0; border-bottom: 2px solid #9a8264; border-radius: 0; font: inherit; color: inherit;
}
.fass-form .fass-field select:focus { outline: none; border-bottom-color: var(--teal-deep); box-shadow: 0 2px 0 0 var(--teal-deep); }
.fass-field select:user-invalid { border-bottom-color: #a1301e; }
.tour-closed { display: flex; gap: var(--space-4); align-items: flex-start; max-width: 46rem; margin: 0; padding: var(--space-4) var(--space-6); background: var(--cream-raised); border-left: 4px solid var(--amber); border-radius: var(--radius-sm); }
.tour-closed[hidden] { display: none; }
.tour-closed strong { display: block; font-family: var(--font-serif); font-size: 1.125rem; }
.tour-closed p { margin: 0; }
@media (max-width: 575.98px) { .tour-book { padding: var(--space-6); } }

/* ============ Neu in 1.18.4: Brauerei – Service-Kästen (Fassabfüllung, Führungen) und Seite „Führungen“ ============ */
.bw-services { --ico-keg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 7h22c2.5 5 3.5 11 3.5 17S37.5 36 35 41H13c-2.5-5-3.5-11-3.5-17S10.5 12 13 7z'/%3E%3Cpath d='M10.5 15h27M10.5 33h27'/%3E%3Cpath d='M24 20v8M21 24h6'/%3E%3C/svg%3E");
  --ico-tour: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='17' cy='10' r='4'/%3E%3Cpath d='M17 14v12l-5 14M17 26l5 14M17 18l-6 6M17 18l8 2'/%3E%3Cpath d='M30 28c0-5 3-8 8-8s8 3 8 8v14H30z'/%3E%3Cpath d='M34 20v-6M38 20v-9M42 20v-5'/%3E%3C/svg%3E");
  display: grid; gap: var(--space-6); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 768px) { .bw-services { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.bw-services > h2 { grid-column: 1 / -1; margin: 0; }
.bw-service { position: relative; display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-8) var(--space-8) var(--space-8) calc(var(--space-8) + 4.25rem); background: var(--cream-raised); border-radius: var(--radius-md); box-shadow: var(--shadow-md); border-top: 5px solid var(--amber); }
.bw-service:nth-of-type(2) { border-top-color: var(--teal-deep); }
.bw-service::before { content: ""; position: absolute; left: var(--space-8); top: var(--space-8); width: 3.25rem; height: 3.25rem; background: var(--amber); -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat; }
.bw-service:nth-of-type(2)::before { background: var(--teal-deep); }
.bw-service[data-ico="keg"] { --ico: var(--ico-keg); }
.bw-service[data-ico="tour"] { --ico: var(--ico-tour); }
.bw-service h3 { margin: 0; font-size: 1.375rem; }
.bw-service p { margin: 0; }
.bw-service__facts { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.bw-service__facts li { padding: .2rem .7rem; border-radius: 999px; background: #fbf3dc; border: 1px solid #d8c9a8; font-size: .875rem; font-weight: 700; }
.bw-service .btn { align-self: flex-start; margin-top: auto; }
@media (max-width: 575.98px) { .bw-service { padding: calc(var(--space-6) + 3.5rem) var(--space-6) var(--space-6); } .bw-service::before { left: var(--space-6); top: var(--space-6); width: 2.75rem; height: 2.75rem; } }
/* Seite „Führungen“: Eckdaten im Ticket */
.bw-ticket__facts { display: grid; gap: var(--space-2); margin: 0 0 var(--space-6); padding: 0; list-style: none; }
.bw-ticket__facts li { position: relative; padding-left: 1.75rem; }
.bw-ticket__facts li::before { content: ""; position: absolute; left: 0; top: .45em; width: .9rem; height: .9rem; border-radius: 50%; background: var(--amber); box-shadow: inset 0 0 0 3px #fbf3dc, 0 0 0 1px var(--amber); }
.bw-ticket__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6); }
.tour-page .tour-book { margin-top: var(--space-16); }

/* ============ Neu in 1.18.6: Fassabfüllung – Einleitung mit Motto und Vorteilen mit Symbol ============ */
.fass-hero__text { max-width: 44rem; margin: calc(var(--space-8) * -1 + var(--space-3)) 0 var(--space-8); font-size: 1.0625rem; line-height: 1.6; color: rgba(247, 240, 227, .92); }
.fass-perks {
  --ico-kegs: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 20h12c1.3 3 2 6 2 10s-.7 7-2 10H6c-1.3-3-2-6-2-10s.7-7 2-10z'/%3E%3Cpath d='M4.5 26h15M4.5 34h15'/%3E%3Cpath d='M26 8h16c1.8 4.5 2.8 9.5 2.8 16S43.8 35.5 42 40H26c-1.8-4.5-2.8-9.5-2.8-16S24.2 12.5 26 8z'/%3E%3Cpath d='M23.6 16h20.8M23.6 32h20.8'/%3E%3C/svg%3E");
  --ico-party: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 14h12l-1.5 22a2 2 0 0 1-2 2h-5a2 2 0 0 1-2-2z'/%3E%3Cpath d='M28 14h12l-1.5 22a2 2 0 0 1-2 2h-5a2 2 0 0 1-2-2z'/%3E%3Cpath d='M9 20h10M29 20h10'/%3E%3Cpath d='M22 8l2-4 2 4M17 7l-2-3M31 7l2-3'/%3E%3C/svg%3E");
  --ico-leaf: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 38C8 22 18 10 40 8c1 20-10 31-26 30'/%3E%3Cpath d='M8 42c6-10 14-18 24-24'/%3E%3C/svg%3E");
  --ico-guide: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='24' cy='24' r='18'/%3E%3Ccircle cx='24' cy='24' r='12'/%3E%3Cpath d='M19 24l4 4 7-8'/%3E%3C/svg%3E");
  display: grid; gap: var(--space-6); grid-template-columns: repeat(4, minmax(0, 1fr)); list-style: none; margin: 0; padding: 0;
}
.fass-perks li { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--space-3); align-items: start; }
.fass-perks li::before { content: ""; grid-row: 1 / span 2; width: 2.75rem; height: 2.75rem; background: var(--foam); -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat; }
.fass-perks li[data-ico="kegs"] { --ico: var(--ico-kegs); }
.fass-perks li[data-ico="party"] { --ico: var(--ico-party); }
.fass-perks li[data-ico="leaf"] { --ico: var(--ico-leaf); }
.fass-perks li[data-ico="guide"] { --ico: var(--ico-guide); }
.fass-perks b { font-family: var(--font-serif); font-size: 1.1875rem; line-height: 1.25; color: var(--foam); }
.fass-perks span { font-size: .875rem; line-height: 1.35; color: rgba(247, 240, 227, .85); }
@media (max-width: 991.98px) { .fass-perks { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 479.98px) { .fass-perks { grid-template-columns: minmax(0, 1fr); } }

/* ============ Neu in 1.18.7: Stellenanzeigen aus der Komponente, Vorteile für Küche und Service ============ */
.job__date { margin: auto 0 0; padding-top: var(--space-4); font-size: .8125rem; color: var(--ink-muted); }
.job__date + .job__actions { margin-top: 0 !important; padding-top: var(--space-3); }
.jobs__empty { padding: var(--space-6); background: var(--cream-raised); border: 1px dashed #d8c9a8; border-radius: var(--radius-md); }
.jobs-perks {
  --ico-plate: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='24' cy='26' r='12'/%3E%3Ccircle cx='24' cy='26' r='6'/%3E%3Cpath d='M6 10v10a3 3 0 0 0 3 3v16M3.5 10v9M8.5 10v9M42 10c-3 2-4 6-4 11 0 2 1 3 4 3v15'/%3E%3C/svg%3E");
  --ico-coins: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cellipse cx='18' cy='14' rx='11' ry='5'/%3E%3Cpath d='M7 14v8c0 2.8 4.9 5 11 5s11-2.2 11-5v-8'/%3E%3Cpath d='M7 22v8c0 2.8 4.9 5 11 5 2 0 3.9-.2 5.5-.7'/%3E%3Ccircle cx='33' cy='32' r='9'/%3E%3Cpath d='M33 28v8M30 32h6'/%3E%3C/svg%3E");
  --ico-team: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='17' cy='15' r='6'/%3E%3Ccircle cx='33' cy='17' r='5'/%3E%3Cpath d='M5 40c0-7 5.4-12 12-12s12 5 12 12'/%3E%3Cpath d='M27 30c1.8-1.3 3.8-2 6-2 5.5 0 10 4.5 10 11'/%3E%3C/svg%3E");
  --ico-plan: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='6' y='9' width='36' height='32' rx='3'/%3E%3Cpath d='M6 18h36M15 5v8M33 5v8'/%3E%3Cpath d='M17 30l5 5 9-10'/%3E%3C/svg%3E");
  --ico-cheers: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 16l12-3 4 18a5 5 0 0 1-4 6l-2 .5a5 5 0 0 1-6-4z'/%3E%3Cpath d='M40 16l-12-3-4 18a5 5 0 0 0 4 6l2 .5a5 5 0 0 0 6-4z'/%3E%3Cpath d='M9.5 22l11-2.7M38.5 22l-11-2.7M24 6V2M17 7l-2-3M31 7l2-3'/%3E%3C/svg%3E");
  --ico-mix: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M24 4v40'/%3E%3Cpath d='M24 10h14l4 5-4 5H24M24 24H10l-4 5 4 5h14'/%3E%3C/svg%3E");
  margin: var(--space-12) 0 0;
}
.jobs-perks > h2 { margin: 0 0 var(--space-6); }
.jobs-perks ul { display: grid; gap: var(--space-6) var(--space-8); grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; padding: var(--space-8) 0; list-style: none; border-top: 2px dashed #e0cfa9; border-bottom: 2px dashed #e0cfa9; }
@media (max-width: 991.98px) { .jobs-perks ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575.98px) { .jobs-perks ul { grid-template-columns: minmax(0, 1fr); } }
.jobs-perks li { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--space-4); align-items: start; }
.jobs-perks li::before { content: ""; grid-row: 1 / span 2; width: 3rem; height: 3rem; background: var(--amber); -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat; }
.jobs-perks li[data-ico="plate"] { --ico: var(--ico-plate); }
.jobs-perks li[data-ico="coins"] { --ico: var(--ico-coins); }
.jobs-perks li[data-ico="team"] { --ico: var(--ico-team); }
.jobs-perks li[data-ico="plan"] { --ico: var(--ico-plan); }
.jobs-perks li[data-ico="cheers"] { --ico: var(--ico-cheers); }
.jobs-perks li[data-ico="learn"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 18l21-9 21 9-21 9z'/%3E%3Cpath d='M11 22v10c0 3 6 6 13 6s13-3 13-6V22'/%3E%3Cpath d='M45 18v12'/%3E%3C/svg%3E"); }
.jobs-perks li[data-ico="mix"] { --ico: var(--ico-mix); }
.jobs-perks b { font-family: var(--font-serif); font-size: 1.1875rem; line-height: 1.3; color: var(--teal-deep); }
.jobs-perks span { font-size: .9375rem; line-height: 1.45; color: var(--ink-muted); }