/* ===================================================================
   SCHRIFTEN -- hierher verschoben aus css/fonts.css
   Google bemaengelte "Anfragen zum Blockieren des Renderings"
   (geschaetzte Einsparung 420 ms) und nannte dabei ausdruecklich
   styles-v4.css UND fonts.css. Beide mussten geladen sein, bevor
   ueberhaupt etwas erschien. Zusammengelegt ist es eine blockierende
   Anfrage weniger -- auf jeder Seite, bei jedem Besuch.
   =================================================================== */

@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/nuFiD-vYSZviVYUb_rj3ij__anPXDTLYgFE_.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/nuFiD-vYSZviVYUb_rj3ij__anPXDTzYgA.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/*
 * styles-v4.css
 * Calcagno Feinkost – V4 Design-System
 * Kein Bootstrap. Alle Farben, Abstände und Komponenten als Custom Properties.
 */

/* ═══════════════════════════════════════════════════════════════
   1. DESIGN TOKENS
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* Farben */
  --ink:        #201914;
  --muted:      #6b5f55;
  --paper:      #fffaf1;
  --porcelain:  #f4efe5;
  --olive:      #526532;
  --terracotta: #ad4e2f;
  --saffron:    #d9a441;
  --blue:       #1c5b7a;
  --bordeaux:   #7b1f2e;
  --line:       rgba(32, 25, 20, 0.16);
  --shadow:     0 24px 80px rgba(32, 25, 20, 0.18);

  /* Typografie */
  --font-sans:  Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  /* Playfair Display traegt die Ueberschriften. Die Schrift lag schon immer
     auf dem Server und wurde auf jeder Seite mitgeladen, war aber nirgends
     verdrahtet -- die Ueberschriften liefen in Georgia, der Windows-Standard-
     schrift. Georgia bleibt als Ausweichschrift, falls der Download scheitert.
     Verfuegbar ist nur der Schnitt 600, siehe font-weight bei h1-h6. */
  --font-serif: "Playfair Display", Georgia, "Times New Roman", serif;

  /* Abstände */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;

  /* Radien */
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  16px;
  --radius-full: 999px;

  color-scheme: light;
}

/* ═══════════════════════════════════════════════════════════════
   2. RESET & BASIS
   ═══════════════════════════════════════════════════════════════ */

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

html {
  scroll-behavior: smooth;
  overflow-x: clip;
}

body {
  overflow-x: hidden;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.5;
}

a {
  color: inherit;
}

img {
  display: block;
  max-width: 100%;
}

/* Umbruch-Strategie: Zeilen brechen nur an Wortgrenzen. break-word greift
   ausschließlich wenn ein einzelnes Wort breiter als die Spalte ist —
   keine Silbentrennung, keine Umbrüche mitten im Wort. */
h1, h2, h3, h4, h5, h6, p {
  overflow-wrap: break-word;
  hyphens: manual;
}

/* Von Playfair Display liegt nur der Schnitt 600 vor. Ohne diese Angabe
   forderten die Ueberschriften den Standard-Fettdruck 700 an -- manche
   Browser rechnen den fehlenden Schnitt dann kuenstlich breit, was unsauber
   aussieht. 600 ist bei Playfair bereits kraeftig genug. */
h1, h2, h3, h4, h5, h6 {
  font-weight: 600;
}

h1 {
  margin: 0;
  font-family: var(--font-serif);
  font-size: clamp(3rem, 10vw, 9rem);
  line-height: 0.92;
  letter-spacing: 0;
}

h2 {
  max-width: 18ch;
  margin: 0 0 18px;
  font-family: var(--font-serif);
  font-size: clamp(2.2rem, 5vw, 5.4rem);
  line-height: 0.98;
  letter-spacing: 0;
}

h3 {
  margin: 0 0 10px;
  font-family: var(--font-serif);
  font-size: clamp(1.3rem, 2vw, 1.9rem);
  line-height: 1.06;
  letter-spacing: 0;
}

h4 {
  margin: 0 0 8px;
  font-family: var(--font-serif);
  font-size: clamp(1.1rem, 1.5vw, 1.4rem);
  line-height: 1.15;
}

fieldset {
  margin: 0;
  padding: 0;
  border: 0;
}

legend {
  margin-bottom: 10px;
  font-weight: 700;
}

/* ═══════════════════════════════════════════════════════════════
   3. UTILITY: VISIBILITY / ACCESSIBILITY
   ═══════════════════════════════════════════════════════════════ */

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

.visually-hidden-focusable:not(:focus):not(:focus-within) {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.visually-hidden-focusable:focus {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 9999;
  width: auto;
  height: auto;
  clip: auto;
  padding: 8px 16px;
  background: var(--saffron);
  color: var(--ink);
  border-radius: var(--radius-md);
  font-weight: 700;
  text-decoration: none;
}

.d-none {
  display: none !important;
}

/* ═══════════════════════════════════════════════════════════════
   4. UTILITY: TEXT
   ═══════════════════════════════════════════════════════════════ */

.text-muted  { color: var(--muted); }
.text-center { text-align: center; }

/* Auszeichnungszeile ueber Ueberschriften.
   Farbe: Terracotta statt Safran. Safran auf hellem Grund erreicht nur
   2,16:1 Kontrast -- die Zeile war fuer aeltere Augen praktisch unsichtbar,
   und sie steht 234-mal auf der Website (u.a. auf jeder Produktkarte).
   Terracotta erreicht 5,17:1 und erfuellt damit WCAG AA. */
.eyebrow {
  margin: 0 0 12px;
  color: var(--terracotta);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Auf den dunklen Foto-Sektionen bleibt Safran: dort erreicht es 7,71:1,
   waehrend Terracotta auf denselben Untergrund nur rund 3,2:1 kaeme.
   Betrifft den Startseiten-Hero und die Kopfbereiche der 10 Produzenten-
   seiten (Code-Review). WICHTIG: Kommt eine weitere Sektion mit hellem
   Text auf dunklem Bild dazu, muss sie hier ergaenzt werden. */
.hero .eyebrow,
.producer-hero .eyebrow {
  color: var(--saffron);
}

/* ═══════════════════════════════════════════════════════════════
   5. UTILITY: ABSTÄNDE
   ═══════════════════════════════════════════════════════════════ */

.mt-0 { margin-top: 0 !important; }
.mt-1 { margin-top: var(--space-1) !important; }
.mt-2 { margin-top: var(--space-2) !important; }
.mt-3 { margin-top: var(--space-3) !important; }
.mt-4 { margin-top: var(--space-4) !important; }
.mt-5 { margin-top: var(--space-5) !important; }

.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: var(--space-1) !important; }
.mb-2 { margin-bottom: var(--space-2) !important; }
.mb-3 { margin-bottom: var(--space-3) !important; }
.mb-4 { margin-bottom: var(--space-4) !important; }
.mb-5 { margin-bottom: var(--space-5) !important; }

/* ═══════════════════════════════════════════════════════════════
   6. UTILITY: CONTAINER & GRID
   ═══════════════════════════════════════════════════════════════ */

.container {
  width: min(1180px, calc(100% - 40px));
  margin-inline: auto;
}

.container-narrow {
  max-width: 760px;
  margin-inline: auto;
  padding-inline: 20px;
}

.container-wide {
  max-width: 1400px;
  margin-inline: auto;
  padding-inline: 20px;
}

.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

@media (max-width: 900px) {
  .grid-3,
  .grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 560px) {
  .grid-2,
  .grid-3,
  .grid-4 {
    grid-template-columns: 1fr;
  }
}

/* ═══════════════════════════════════════════════════════════════
   7. NAVIGATION / HEADER
   ═══════════════════════════════════════════════════════════════ */

.site-header {
  position: fixed;
  inset: 16px 18px auto;
  z-index: 100;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 24px;
  max-width: 1180px;
  margin: 0 auto;
  padding: 10px 14px;
  border: 1px solid rgba(255, 250, 241, 0.28);
  border-radius: var(--radius-full);
  color: #fffaf1;
  background: rgba(32, 25, 20, 0.56);
  box-shadow: 0 16px 60px rgba(0, 0, 0, 0.22);
  backdrop-filter: blur(18px);
  transition: background 280ms ease, box-shadow 280ms ease;
}

.site-header.navbar-scrolled {
  background: rgba(32, 25, 20, 0.82);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.32);
}

/* Helle Seiten (kein dunkler Hero) — Header sofort fest */
body[data-hero="light"] .site-header {
  background: rgba(32, 25, 20, 0.82);
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  font-weight: 800;
  color: #fffaf1;
}

/* Logo als hängendes Badge: aus der Leiste gelöst, ragt unten heraus.
   Beim Scrollen (navbar-scrolled) schrumpft es zurück in die Leiste. */
.brand {
  position: relative;
  width: 108px;
  min-height: 44px;
}

.brand img {
  position: absolute;
  top: -4px;
  left: 0;
  width: 108px;
  height: 108px;
  padding: 9px;
  box-sizing: border-box;
  border-radius: 50%;
  background: var(--ink);
  object-fit: contain;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.28);
  transition: width 260ms ease, height 260ms ease, top 260ms ease;
}

.site-header.navbar-scrolled .brand img {
  top: 50%;
  transform: translateY(-50%);
  width: 56px;
  height: 56px;
  padding: 5px;
  box-shadow: none;
}

/* Auch auf hellen Seiten (Header sofort fest) hängt das Badge anfangs groß */
@media (max-width: 560px) {
  .brand {
    width: 80px;
  }
  .brand img {
    width: 80px;
    height: 80px;
    padding: 7px;
  }
  .site-header.navbar-scrolled .brand img {
    width: 46px;
    height: 46px;
  }
}

.nav-links {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
}

.nav-links a {
  min-height: 40px;
  padding: 10px 14px;
  border-radius: var(--radius-full);
  text-decoration: none;
  font-size: 0.9rem;
  color: rgba(255, 250, 241, 0.88);
  transition: background 160ms ease, color 160ms ease;
  white-space: nowrap;
}

.nav-links a:hover,
.nav-links a.is-active {
  background: rgba(255, 250, 241, 0.14);
  color: #fffaf1;
}

.nav-links a.is-active {
  font-weight: 700;
}

.nav-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 40px;
  padding: 10px 16px;
  border-radius: var(--radius-full);
  background: rgba(255, 250, 241, 0.14);
  color: #fffaf1;
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 700;
  transition: background 160ms ease;
  white-space: nowrap;
}

.nav-action:hover {
  background: rgba(255, 250, 241, 0.24);
}

/* Hamburger */
.nav-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid rgba(255, 250, 241, 0.28);
  border-radius: var(--radius-full);
  background: transparent;
  cursor: pointer;
}

.nav-hamburger span {
  display: block;
  width: 18px;
  height: 2px;
  background: #fffaf1;
  border-radius: 2px;
  transition: transform 220ms ease, opacity 220ms ease;
}

.nav-hamburger[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.nav-hamburger[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}
.nav-hamburger[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Mobile Nav Drawer */
.nav-mobile {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 99;
  padding: 88px 20px 32px;
  background: rgba(32, 25, 20, 0.96);
  backdrop-filter: blur(20px);
  overflow-y: auto;
}

.nav-mobile.is-open {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.nav-mobile a {
  display: block;
  padding: 14px 20px;
  border-radius: var(--radius-md);
  text-decoration: none;
  font-size: 1.25rem;
  color: rgba(255, 250, 241, 0.88);
  font-family: var(--font-serif);
  transition: background 140ms ease;
}

.nav-mobile a:hover,
.nav-mobile a.is-active {
  background: rgba(255, 250, 241, 0.1);
  color: #fffaf1;
}

.nav-mobile .nav-mobile-action {
  margin-top: 16px;
  padding: 14px 20px;
  border-radius: var(--radius-full);
  background: var(--saffron);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 700;
  text-align: center;
}

@media (max-width: 900px) {
  .site-header {
    grid-template-columns: auto auto;
  }

  .nav-links {
    display: none;
  }

  .nav-hamburger {
    display: flex;
  }
}

@media (max-width: 560px) {
  .site-header {
    inset: 10px 10px auto;
    gap: 8px;
  }

  .brand span {
    display: none;
  }

  .nav-action {
    min-height: 38px;
    padding-inline: 12px;
    font-size: 0.85rem;
  }
}

/* ═══════════════════════════════════════════════════════════════
   8. BUTTONS
   ═══════════════════════════════════════════════════════════════ */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 13px 22px;
  border: 1px solid currentColor;
  border-radius: var(--radius-full);
  text-decoration: none;
  font-family: var(--font-sans);
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  transition: transform 180ms ease, background 180ms ease, box-shadow 180ms ease;
}

.button:hover {
  transform: translateY(-2px);
}

.button.primary {
  border-color: var(--saffron);
  color: var(--ink);
  background: var(--saffron);
}

.button.primary:hover {
  background: #c4922d;
  border-color: #c4922d;
}

.button.ghost {
  color: #fffaf1;
  border-color: rgba(255, 250, 241, 0.5);
  background: rgba(255, 250, 241, 0.08);
}

.button.ghost:hover {
  background: rgba(255, 250, 241, 0.18);
}

.button.dark {
  color: var(--ink);
  border-color: var(--line);
  background: transparent;
}

.button.dark:hover {
  background: var(--porcelain);
}

.button.olive {
  color: #fff;
  border-color: var(--olive);
  background: var(--olive);
}

.button.olive:hover {
  background: #3e4d25;
  border-color: #3e4d25;
}

/* ═══════════════════════════════════════════════════════════════
   9. HERO
   ═══════════════════════════════════════════════════════════════ */

.hero {
  position: relative;
  min-height: 92svh;
  overflow: hidden;
  display: grid;
  align-items: end;
  padding: 138px 24px 44px;
  color: #fffaf1;
}

.hero picture,
.hero picture img,
.hero-shade {
  position: absolute;
  inset: 0;
}

.hero picture img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-shade {
  background:
    linear-gradient(90deg, rgba(20, 12, 8, 0.84), rgba(20, 12, 8, 0.44) 48%, rgba(20, 12, 8, 0.18)),
    linear-gradient(0deg, rgba(20, 12, 8, 0.78), rgba(20, 12, 8, 0.02) 42%);
}

/* Der Textblock sitzt bewusst links aussermittig, damit rechts das Bild wirkt.
   Frueher: transform: translateX(-18vw) -- eine feste Verschiebung, die den
   Block bei Fensterbreiten zwischen 900 und 1188 px links aus dem Bild schob
   (bei 1024 px um 52 px). Weil der Hero den Ueberlauf abschneidet, gab es
   nicht einmal einen Rollbalken, der darauf hingewiesen haette.
   Jetzt: max() begrenzt die Verschiebung so, dass links immer mindestens
   32 px Abstand bleiben -- die Optik auf grossen Schirmen bleibt gleich. */
.hero-content {
  position: relative;
  z-index: 2;
  width: min(760px, 100%);
  margin: 0 auto 5vh;
  transform: translateX(max(-18vw, min(380px, 50vw) - 50vw + 32px));
}

.hero-copy {
  max-width: 620px;
  margin: 22px 0 0;
  font-size: clamp(1.05rem, 2vw, 1.35rem);
  color: rgba(255, 250, 241, 0.88);
}

.hero-actions,
.visit-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

.signal-panel {
  position: absolute;
  right: max(24px, 7vw);
  bottom: 44px;
  z-index: 3;
  width: min(320px, calc(100% - 48px));
  padding: 18px;
  border: 1px solid rgba(255, 250, 241, 0.26);
  border-radius: var(--radius-md);
  background: rgba(32, 25, 20, 0.62);
  backdrop-filter: blur(14px);
}

.signal-panel p,
.signal-panel small {
  margin: 0;
  color: rgba(255, 250, 241, 0.72);
  /* Ohne display:block teilen sich Text und der darunter stehende Knopf
     denselben Textfluss -- das letzte Wort rutschte dann neben den Knopf
     ("... wenn etwas frei | wird."). */
  display: block;
}

.signal-panel .button {
  display: inline-flex;
  align-items: center;
}

.signal-panel strong {
  display: block;
  margin: 6px 0;
  font-size: 1.18rem;
}

.status-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 8px;
  border-radius: 50%;
  background: #83bd62;
  box-shadow: 0 0 0 6px rgba(131, 189, 98, 0.18);
}

/* Ausgebucht: roter Punkt im Signal-Panel */
.status-dot.is-full {
  background: #d9534f;
  box-shadow: 0 0 0 6px rgba(217, 83, 79, 0.18);
}

/* Vollflächig klickbare Kachel (Local-SEO-Links u.a.):
   ganze Karte ist der Link, Hover hebt sie an und zeigt einen Pfeil. */
.tile-link {
  position: relative;
  display: block;
  padding: 20px 44px 20px 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: #fff;
  text-decoration: none;
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.tile-link h3 {
  margin: 0 0 6px;
  font-size: 1rem;
  color: var(--olive);
}

.tile-link p {
  margin: 0;
  font-size: 0.9rem;
  color: var(--muted);
}

.tile-link-arrow {
  position: absolute;
  top: 50%;
  right: 16px;
  transform: translateY(-50%);
  color: var(--olive);
  font-size: 1.1rem;
  opacity: 0;
  transition: opacity 180ms ease, right 180ms ease;
}

.tile-link:hover,
.tile-link:focus-visible {
  transform: translateY(-3px);
  border-color: var(--olive);
  box-shadow: 0 12px 32px rgba(32, 25, 20, 0.12);
}

.tile-link:hover .tile-link-arrow,
.tile-link:focus-visible .tile-link-arrow {
  right: 12px;
  opacity: 1;
}

@media (max-width: 900px) {
  .hero-content {
    margin-inline: 0;
    transform: none;
  }

  .signal-panel {
    position: relative;
    right: auto;
    bottom: auto;
    margin-top: 28px;
  }
}

@media (max-width: 560px) {
  .hero {
    min-height: 100svh;
    padding: 102px 18px 28px;
  }

  h1 {
    max-width: 100%;
    font-size: 3rem;
    line-height: 0.92;
  }

  .hero-actions .button {
    width: 100%;
  }
}

/* ═══════════════════════════════════════════════════════════════
   10. SEKTIONEN / LAYOUT-BLÖCKE
   ═══════════════════════════════════════════════════════════════ */

.section {
  width: min(1180px, calc(100% - 40px));
  margin: 0 auto;
  padding: 92px 0;
}

.section-wide {
  width: 100%;
  padding-inline: max(20px, calc((100vw - 1180px) / 2));
  padding-block: 92px;
}

.split-section {
  width: min(1180px, calc(100% - 40px));
  margin: 0 auto;
  padding: 92px 0;
  display: grid;
  grid-template-columns: minmax(280px, 430px) 1fr;
  gap: clamp(36px, 7vw, 92px);
  align-items: center;
}

.intent-band {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-bottom: 1px solid var(--line);
  background: #fff;
}

.intent-band a {
  min-height: 166px;
  padding: 28px;
  border-right: 1px solid var(--line);
  text-decoration: none;
}

.intent-band a:last-child {
  border-right: 0;
}

.intent-band span {
  display: block;
  color: var(--terracotta);
  font-weight: 900;
}

.intent-band strong {
  display: block;
  margin: 22px 0 6px;
  font-family: var(--font-serif);
  font-size: 2rem;
}

.intent-band small {
  color: var(--muted);
  font-size: 1rem;
}

/* Saisonale Startseiten-Note (gesteuert über data/seasonal.json) */
.seasonal-band {
  background: linear-gradient(120deg, rgba(217, 164, 65, 0.14), rgba(173, 78, 47, 0.10));
  border-block: 1px solid var(--line);
}

.seasonal-band-inner {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 28px;
  align-items: center;
  width: min(1180px, calc(100% - 40px));
  margin: 0 auto;
  padding-block: 44px;
}

.seasonal-band h2 {
  max-width: none;
  margin: 4px 0 10px;
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  line-height: 1.1;
}

.seasonal-band-text {
  max-width: 640px;
  margin: 0;
  color: var(--muted);
}

@media (max-width: 900px) {
  .seasonal-band-inner {
    grid-template-columns: 1fr;
    gap: 18px;
  }
}

.portrait-wrap {
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--porcelain);
  box-shadow: var(--shadow);
}

.portrait-wrap img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

.section-copy > p:not(.eyebrow) {
  max-width: 700px;
  color: var(--muted);
  font-size: 1.1rem;
}

.proof-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 28px;
}

.proof-grid article {
  min-height: 148px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: #fff;
}

.proof-grid strong,
.proof-grid span {
  display: block;
}

.proof-grid strong {
  margin-bottom: 10px;
  color: var(--blue);
}

.proof-grid span {
  color: var(--muted);
}

/* Genuss-Finder */
.finder-section {
  width: 100%;
  max-width: none;
  padding-block: 92px;
  padding-inline: max(20px, calc((100vw - 1180px) / 2));
  background: var(--porcelain);
}

.finder-intro {
  max-width: 880px;
}

.finder-intro h2 {
  max-width: 18ch;
}

.finder-intro p {
  max-width: 700px;
  color: var(--muted);
  font-size: 1.1rem;
}

.finder-shell {
  display: grid;
  grid-template-columns: 1fr minmax(320px, 460px);
  gap: 24px;
  margin-top: 34px;
}

.finder-form,
.recommendation,
.visit-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: #fffaf6;
  box-shadow: 0 20px 54px rgba(32, 25, 20, 0.08);
}

.finder-form {
  display: grid;
  gap: 18px;
  padding: 22px;
}

.choice-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.choice {
  min-height: 44px;
  padding: 11px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-full);
  color: var(--ink);
  background: #fff;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
}

.choice:hover {
  border-color: var(--olive);
}

.choice.is-active {
  border-color: var(--olive);
  color: #fff;
  background: var(--olive);
}

.recommendation {
  padding: 26px;
  background:
    linear-gradient(145deg, rgba(28, 91, 122, 0.09), transparent 46%),
    #fffaf6;
}

.assistant-label {
  margin: 0 0 18px;
  color: var(--terracotta);
  font-weight: 900;
  text-transform: uppercase;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
}

.recommendation p:not(.assistant-label),
.recommendation li {
  color: var(--muted);
}

.recommendation ul {
  display: grid;
  gap: 8px;
  margin: 18px 0 24px;
  padding-left: 20px;
}

/* Erlebnisse */
.experience-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.experience-grid article {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: #fff;
  transition: transform 200ms ease, box-shadow 200ms ease;
}

/* Die ganze Karte ist klickbar. Der Link sitzt bewusst in der Ueberschrift:
   So gibt es genau einen Tab-Stopp mit sprechendem Linktext, und das
   ausgedehnte Pseudo-Element macht die Flaeche drumherum mitklickbar. */
.experience-grid h3 a {
  color: inherit;
  text-decoration: none;
}

.experience-grid h3 a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.experience-grid article:hover,
.experience-grid article:focus-within {
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(32, 25, 20, 0.12);
}

.experience-grid article:focus-within {
  outline: 2px solid var(--terracotta);
  outline-offset: 2px;
}

.experience-grid img {
  width: 100%;
  aspect-ratio: 1 / 0.9;
  object-fit: cover;
  background: var(--porcelain);
}

.experience-grid div {
  padding: 20px;
}

.experience-grid span {
  color: var(--terracotta);
  font-weight: 800;
  font-size: 0.8rem;
  text-transform: uppercase;
}

.experience-grid p {
  color: var(--muted);
}

/* Besuch */
.visit-section {
  display: grid;
  grid-template-columns: 1fr minmax(300px, 420px);
  gap: 36px;
  align-items: start;
}

.visit-section h2 {
  max-width: 16ch;
}

.visit-section p {
  color: var(--muted);
  font-size: 1.1rem;
}

.visit-card {
  padding: 26px;
}

.visit-card p {
  margin-top: 0;
}

@media (max-width: 900px) {
  .split-section,
  .finder-shell,
  .experience-grid,
  .visit-section,
  .proof-grid,
  .intent-band {
    grid-template-columns: 1fr;
  }

  .intent-band a {
    min-height: 128px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
}

@media (max-width: 560px) {
  .section,
  .split-section,
  .finder-section,
  .visit-section {
    width: min(100% - 28px, 1180px);
    padding-block: 62px;
  }

  .finder-section {
    width: 100%;
    padding-inline: 14px;
  }
}

/* ═══════════════════════════════════════════════════════════════
   11. PRODUKT-KOMPONENTEN
   ═══════════════════════════════════════════════════════════════ */

/* Produkt-Karte */
.product-card {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: #fff;
  transition: box-shadow 200ms ease, transform 200ms ease;
}

.product-card:hover {
  box-shadow: 0 12px 40px rgba(32, 25, 20, 0.12);
  transform: translateY(-2px);
}

.product-card--hidden {
  display: none;
}

.product-photo {
  width: 100%;
  aspect-ratio: 400 / 220;
  object-fit: cover;
  background: var(--porcelain);
}

.product-photo-placeholder {
  width: 100%;
  aspect-ratio: 400 / 220;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--porcelain);
  color: var(--muted);
  font-size: 0.85rem;
}

.product-info {
  padding: 14px 16px 18px;
}

.product-name {
  margin: 0 0 6px;
  font-family: var(--font-serif);
  font-size: 1.05rem;
  line-height: 1.2;
}

.product-desc {
  margin: 0 0 10px;
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.45;
}

.product-price {
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--ink);
}

/* Produzenten-Block */
.producer-block {
  margin-bottom: 52px;
}

.producer-block--hidden {
  display: none;
}

.producer-block-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}

.producer-logo {
  max-height: 60px;
  width: auto;
  object-fit: contain;
}

/* Calcagno-Eigenmarke: weißes SVG-Logo braucht dunklen Kreis auf hellem Grund */
.producer-logo[src*="logo-calcagno"] {
  width: 72px;
  height: 72px;
  max-height: 72px;
  padding: 7px;
  border-radius: 50%;
  background: var(--ink);
}

/* De-Gregorio: dunkler Hintergrund für helles Logo */
.producer-logo[src*="/cantine-de-gregorio/"] {
  background: #2f2a24;
  border-radius: 6px;
  padding: 0.5rem 0.6rem;
}

/* Tab-Navigation */
.tab-nav {
  display: flex;
  gap: 4px;
  border-bottom: 2px solid var(--line);
  margin-bottom: 32px;
  overflow-x: auto;
  scrollbar-width: none;
}

.tab-nav::-webkit-scrollbar {
  display: none;
}

.tab-nav-item {
  padding: 12px 20px;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: color 160ms ease, border-color 160ms ease;
}

.tab-nav-item:hover {
  color: var(--ink);
}

.tab-nav-item.is-active {
  border-bottom-color: var(--olive);
  color: var(--olive);
  font-weight: 700;
}

.tab-content {
  position: relative;
}

.tab-pane {
  display: none;
}

.tab-pane.is-active {
  display: block;
}

/* Filter Pills */
.filter-pill-bar,
.product-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 24px;
}

.filter-pill {
  padding: 8px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-full);
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
}

.filter-pill:hover {
  border-color: var(--olive);
  color: var(--olive);
}

.filter-pill.is-active,
.filter-pill.active {
  border-color: var(--olive);
  background: var(--olive);
  color: #fff;
}

/* ═══════════════════════════════════════════════════════════════
   12. EVENT-KOMPONENTEN
   ═══════════════════════════════════════════════════════════════ */

.event-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 20px;
  align-items: start;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: #fff;
  box-shadow: 0 8px 28px rgba(32, 25, 20, 0.07);
  transition: box-shadow 200ms ease, transform 200ms ease;
}

.event-card:hover {
  box-shadow: 0 16px 48px rgba(32, 25, 20, 0.13);
  transform: translateY(-2px);
}

.event-date-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 64px;
  padding: 12px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--porcelain);
  text-align: center;
  line-height: 1;
}

.event-date-badge .day {
  font-family: var(--font-serif);
  font-size: 2rem;
  font-weight: 400;
  line-height: 1;
}

.event-date-badge .month {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  margin-top: 4px;
}

.event-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.event-title {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 1.25rem;
  line-height: 1.15;
}

.event-meta {
  color: var(--muted);
  font-size: 0.88rem;
}

.event-desc {
  color: var(--muted);
  font-size: 0.93rem;
  margin: 0;
}

.event-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.event-badge-available,
.event-badge-sold-out {
  display: inline-block;
  padding: 4px 10px;
  border-radius: var(--radius-full);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.03em;
}

.event-badge-available {
  background: rgba(82, 101, 50, 0.12);
  color: var(--olive);
}

.event-badge-sold-out {
  background: rgba(173, 78, 47, 0.12);
  color: var(--terracotta);
}

/* Buchungsformular */
.booking-form {
  max-width: 560px;
  margin: 0 auto;
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: #fffaf6;
  box-shadow: 0 20px 54px rgba(32, 25, 20, 0.08);
}

.booking-form h2,
.booking-form h3 {
  margin-bottom: 20px;
}

@media (max-width: 560px) {
  .event-card {
    grid-template-columns: 1fr;
  }
}

/* ═══════════════════════════════════════════════════════════════
   13. PRODUZENTEN-DETAIL-SEITEN
   ═══════════════════════════════════════════════════════════════ */

.producer-hero {
  position: relative;
  min-height: 68vh;
  overflow: hidden;
  display: grid;
  align-items: end;
  padding: 138px 24px 56px;
  color: #fffaf1;
}

.producer-hero picture,
.producer-hero picture img {
  position: absolute;
  inset: 0;
}

.producer-hero picture img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.producer-hero-shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(0deg, rgba(20, 12, 8, 0.82), rgba(20, 12, 8, 0.18) 56%);
}

.producer-hero-content {
  position: relative;
  z-index: 2;
  max-width: 720px;
}

.story-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 6vw, 72px);
  align-items: center;
  padding: 72px 0;
}

.story-section.reverse {
  direction: rtl;
}

.story-section.reverse > * {
  direction: ltr;
}

.story-section img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--radius-md);
}

.values-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  padding: 48px 0;
}

.values-grid article {
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: #fff;
}

.values-grid strong {
  display: block;
  margin-bottom: 8px;
  color: var(--olive);
  font-size: 1.05rem;
}

.values-grid p {
  margin: 0;
  color: var(--muted);
  font-size: 0.93rem;
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.gallery-grid img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--radius-sm);
}

@media (max-width: 900px) {
  .story-section,
  .values-grid {
    grid-template-columns: 1fr;
  }

  .story-section.reverse {
    direction: ltr;
  }

  .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ═══════════════════════════════════════════════════════════════
   14. FORMULAR-KOMPONENTEN
   ═══════════════════════════════════════════════════════════════ */

.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 20px;
}

.form-group:last-of-type {
  margin-bottom: 0;
}

.form-label {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: 0.01em;
}

.form-control {
  width: 100%;
  padding: 10px 0;
  border: none;
  border-bottom: 2px solid var(--line);
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 1rem;
  line-height: 1.4;
  outline: none;
  transition: border-color 180ms ease;
  -webkit-appearance: none;
  appearance: none;
}

.form-control:focus {
  border-bottom-color: var(--olive);
}

.form-control::placeholder {
  color: var(--muted);
  opacity: 0.7;
}

textarea.form-control {
  resize: vertical;
  min-height: 100px;
  padding-top: 8px;
}

select.form-control {
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236b5f55' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 4px center;
  padding-right: 24px;
}

/* Checkbox / Radio */
.form-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 12px;
}

.form-check-input {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  border: 2px solid var(--line);
  border-radius: 4px;
  background: #fff;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: background 160ms ease, border-color 160ms ease;
}

.form-check-input:checked {
  background: var(--olive);
  border-color: var(--olive);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='10' viewBox='0 0 12 10'%3E%3Cpath d='M1 5l3.5 4L11 1' stroke='%23fff' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}

.form-check-input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.form-check-input[type="radio"] {
  border-radius: 50%;
}

.form-check-input[type="radio"]:checked {
  background-image: none;
  box-shadow: inset 0 0 0 3px #fff;
}

.form-check-label {
  font-size: 0.93rem;
  color: var(--ink);
  cursor: pointer;
}

/* Validierungs-Feedback */
.form-error {
  font-size: 0.82rem;
  color: var(--terracotta);
  margin-top: 4px;
}

.form-success {
  font-size: 0.82rem;
  color: var(--olive);
  margin-top: 4px;
}

/* Alert-Boxen */
.alert-success,
.alert-danger,
.alert-warning {
  padding: 14px 18px;
  border-radius: var(--radius-md);
  font-size: 0.93rem;
  margin-bottom: 20px;
}

.alert-success {
  background: rgba(82, 101, 50, 0.1);
  color: #3a4a1e;
  border: 1px solid rgba(82, 101, 50, 0.25);
}

.alert-danger {
  background: rgba(173, 78, 47, 0.1);
  color: #7a2e12;
  border: 1px solid rgba(173, 78, 47, 0.25);
}

.alert-warning {
  background: rgba(217, 164, 65, 0.12);
  color: #7a5510;
  border: 1px solid rgba(217, 164, 65, 0.3);
}

/* ═══════════════════════════════════════════════════════════════
   15. FADE-IN ANIMATION
   ═══════════════════════════════════════════════════════════════ */

.fade-in {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 600ms ease, transform 600ms ease;
}

.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ═══════════════════════════════════════════════════════════════
   16. SCROLL-TO-TOP BUTTON
   ═══════════════════════════════════════════════════════════════ */

#scroll-top {
  position: fixed;
  right: 20px;
  bottom: 100px;
  z-index: 90;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--paper);
  color: var(--ink);
  font-size: 1.1rem;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  box-shadow: 0 4px 16px rgba(32, 25, 20, 0.14);
  transition: opacity 240ms ease, transform 240ms ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

#scroll-top.show {
  opacity: 1;
  pointer-events: auto;
}

#scroll-top:hover {
  transform: translateY(-2px);
}

/* ═══════════════════════════════════════════════════════════════
   17. WHATSAPP FLOATING BUTTON
   ═══════════════════════════════════════════════════════════════ */

.wa-float {
  position: fixed;
  right: 20px;
  bottom: 24px;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #25d366;
  color: #fff;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
  font-size: 1.5rem;
  text-decoration: none;
  transition: transform 200ms ease, box-shadow 200ms ease;
}

.wa-float:hover {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.25);
}

/* SVG-Icon im WhatsApp-Button */
.wa-float svg {
  width: 28px;
  height: 28px;
  fill: currentColor;
}

/* ═══════════════════════════════════════════════════════════════
   18. FOOTER
   ═══════════════════════════════════════════════════════════════ */

.site-footer {
  background: var(--paper);
  border-top: 1px solid var(--line);
  padding: 48px max(20px, calc((100vw - 1180px) / 2)) 32px;
}

.footer-grid {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 40px;
  align-items: start;
  margin-bottom: 32px;
}

.footer-brand {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-brand img {
  width: 120px;
  height: 120px;
  padding: 12px;
  box-sizing: border-box;
  border-radius: 50%;
  background: var(--ink);
  object-fit: contain;
}

.footer-brand-name {
  font-family: var(--font-serif);
  font-size: 1.1rem;
  color: var(--ink);
}

.footer-nav {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-nav-group {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
}

.footer-nav a {
  color: var(--muted);
  text-decoration: none;
  font-size: 0.9rem;
  transition: color 160ms ease;
}

.footer-nav a:hover {
  color: var(--ink);
}

.footer-social {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 14px;
}

.footer-social-links {
  display: flex;
  gap: 10px;
}

.footer-social-links a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--muted);
  text-decoration: none;
  font-size: 1.1rem;
  transition: color 160ms ease, border-color 160ms ease, background 160ms ease;
}

.footer-social-links a:hover {
  color: var(--ink);
  border-color: var(--ink);
}

.footer-social-links svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

.footer-topics {
  padding-top: 20px;
  border-top: 1px solid var(--line);
  font-size: 0.82rem;
  color: var(--muted);
  text-align: center;
}

.footer-topics a {
  color: var(--muted);
  text-decoration: none;
  margin: 0 6px;
}

.footer-topics a:hover {
  color: var(--ink);
  text-decoration: underline;
}

.footer-bottom {
  margin-top: 20px;
  text-align: center;
  font-size: 0.82rem;
  color: var(--muted);
}

.footer-bottom a {
  color: var(--muted);
  text-decoration: none;
}

.footer-bottom a:hover {
  color: var(--ink);
  text-decoration: underline;
}

@media (max-width: 900px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 28px;
  }

  .footer-brand {
    grid-column: 1 / -1;
    flex-direction: row;
    align-items: center;
  }

  .footer-social {
    align-items: flex-start;
  }
}

@media (max-width: 560px) {
  .footer-grid {
    grid-template-columns: 1fr;
  }

  .footer-brand {
    grid-column: auto;
  }
}

/* ═══════════════════════════════════════════════════════════════
   19. COOKIE-CONSENT (DSGVO — kein Bootstrap)
   ═══════════════════════════════════════════════════════════════ */

/* Banner */
.cc-banner {
  position: fixed;
  inset: auto 0 0;
  z-index: 1000;
  padding: 20px max(20px, calc((100vw - 1180px) / 2));
  background: rgba(32, 25, 20, 0.94);
  backdrop-filter: blur(16px);
  border-top: 1px solid rgba(255, 250, 241, 0.14);
  color: #fffaf1;
  box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.24);
}

.cc-banner[hidden] {
  display: none;
}

.cc-banner-inner {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  flex-wrap: wrap;
}

.cc-banner-text {
  flex: 1;
  min-width: 260px;
}

.cc-banner-text p {
  margin: 0;
  font-size: 0.9rem;
  color: rgba(255, 250, 241, 0.82);
  line-height: 1.5;
}

.cc-banner-text a {
  color: var(--saffron);
  text-decoration: underline;
}

.cc-banner-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

/* Modal Overlay */
.cc-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1001;
  background: rgba(32, 25, 20, 0.62);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.cc-modal-overlay[hidden] {
  display: none;
}

/* Modal Box */
.cc-modal {
  width: min(560px, 100%);
  max-height: 90vh;
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--paper);
  box-shadow: var(--shadow);
}

.cc-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 24px 16px;
  border-bottom: 1px solid var(--line);
}

.cc-modal-header h2 {
  margin: 0;
  font-size: 1.25rem;
  font-family: var(--font-serif);
}

.cc-modal-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  font-size: 1.1rem;
  cursor: pointer;
  transition: color 160ms ease, background 160ms ease;
}

.cc-modal-close:hover {
  background: var(--porcelain);
  color: var(--ink);
}

.cc-modal-body {
  padding: 20px 24px;
}

.cc-modal-body p {
  margin: 0 0 20px;
  color: var(--muted);
  font-size: 0.93rem;
}

.cc-category {
  margin-bottom: 20px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: #fff;
}

.cc-category-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}

.cc-category-label {
  font-weight: 700;
  font-size: 0.95rem;
}

.cc-category-desc {
  margin: 0;
  color: var(--muted);
  font-size: 0.83rem;
  line-height: 1.5;
}

.cc-modal-footer {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
  padding: 16px 24px 22px;
  border-top: 1px solid var(--line);
}

/* Cookie-Consent Buttons */
.cc-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 18px;
  border: 1px solid var(--saffron);
  border-radius: var(--radius-full);
  background: var(--saffron);
  color: var(--ink);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 160ms ease;
}

.cc-btn-primary:hover {
  background: #c4922d;
  border-color: #c4922d;
}

.cc-btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 18px;
  border: 1px solid rgba(255, 250, 241, 0.3);
  border-radius: var(--radius-full);
  background: transparent;
  color: rgba(255, 250, 241, 0.88);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 160ms ease;
}

.cc-btn-secondary:hover {
  background: rgba(255, 250, 241, 0.1);
}

/* Im Modal: sekundärer Button hat andere Farbe */
.cc-modal .cc-btn-secondary {
  border-color: var(--line);
  color: var(--muted);
}

.cc-modal .cc-btn-secondary:hover {
  background: var(--porcelain);
  color: var(--ink);
}

.cc-link {
  color: var(--saffron);
  text-decoration: underline;
  cursor: pointer;
}

.cc-link:hover {
  color: #c4922d;
}

@media (max-width: 560px) {
  .cc-banner-inner {
    flex-direction: column;
    gap: 16px;
  }

  .cc-banner-actions {
    width: 100%;
  }

  .cc-btn-primary,
  .cc-btn-secondary {
    flex: 1;
    justify-content: center;
  }
}

/* ═══════════════════════════════════════════════════════════════
   20. LEGAL / TEXT-SEITEN
   ═══════════════════════════════════════════════════════════════ */

.legal-page {
  max-width: 720px;
  margin: 0 auto;
  padding: 120px 24px 80px;
  line-height: 1.75;
  color: var(--ink);
}

.legal-page h1 {
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.1;
  margin-bottom: 12px;
}

.legal-page h2 {
  max-width: none;
  margin: 40px 0 16px;
  font-size: 1.35rem;
  line-height: 1.25;
  border-bottom: 1px solid var(--line);
  padding-bottom: 8px;
}

.legal-page h3 {
  max-width: none;
  margin: 28px 0 10px;
  font-size: 1.1rem;
}

.legal-page p,
.legal-page li {
  color: var(--muted);
  font-size: 0.95rem;
}

.legal-page a {
  color: var(--blue);
  text-decoration: underline;
}

.legal-page ul,
.legal-page ol {
  padding-left: 1.5rem;
}

/* ═══════════════════════════════════════════════════════════════
   21. 404-SEITE
   ═══════════════════════════════════════════════════════════════ */

.error-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 80vh;
  text-align: center;
  padding: 40px 24px;
}

.error-page .error-code {
  font-family: var(--font-serif);
  font-size: clamp(5rem, 18vw, 14rem);
  line-height: 1;
  color: var(--porcelain);
  user-select: none;
  margin: 0 0 16px;
}

.error-page h1 {
  font-size: clamp(1.5rem, 3vw, 2.5rem);
  line-height: 1.15;
  margin-bottom: 16px;
}

.error-page p {
  max-width: 440px;
  color: var(--muted);
  margin-bottom: 28px;
}

/* ═══════════════════════════════════════════════════════════════
   22. PAGE STRUCTURE HELPERS
   ═══════════════════════════════════════════════════════════════ */

/* Seiteninhalt unter dem fixierten Header */
.page-body {
  padding-top: 88px;
}

.page-hero {
  padding-top: 80px;
}

/* Sektionsüberschriften mit optionalem Divider */
.section-header {
  margin-bottom: 40px;
}

.section-header h2 {
  margin-bottom: 12px;
}

.section-header p {
  max-width: 640px;
  color: var(--muted);
  font-size: 1.05rem;
}

/* Karten-Basis */
.card {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: #fff;
  overflow: hidden;
}

.card-body {
  padding: 20px;
}

/* Review-Karte */
.review-card {
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: #fff;
}

.review-stars {
  display: flex;
  gap: 3px;
  margin-bottom: 10px;
  color: var(--saffron);
}

.review-stars svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

.review-author {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
}

.review-author-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--porcelain);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  color: var(--muted);
  font-weight: 700;
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════
   23. PRODUZENTEN-ÜBERSICHT
   ═══════════════════════════════════════════════════════════════ */

.producer-card {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: #fff;
  text-decoration: none;
  color: inherit;
  transition: box-shadow 200ms ease, transform 200ms ease;
}

.producer-card:hover {
  box-shadow: 0 12px 40px rgba(32, 25, 20, 0.12);
  transform: translateY(-2px);
}

.producer-card-image {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: var(--porcelain);
}

.producer-card-body {
  padding: 18px;
}

.producer-card-region {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--terracotta);
  margin-bottom: 6px;
}

.producer-card-name {
  margin: 0 0 8px;
  font-family: var(--font-serif);
  font-size: 1.2rem;
}

.producer-card-desc {
  margin: 0;
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.5;
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE-ERLEBNIS (Pakete A+B+C, 2026-08)
   ═══════════════════════════════════════════════════════════════ */

/* ── A1: Inline-Grid-Rettung ─────────────────────────────────────
   Viele Sektionen nutzen Inline-Styles mit festen Spalten
   (z.B. "minmax(280px,420px) 1fr" auf der Kontaktseite). Inline-
   Styles kennen keine Media-Queries — unter 700px erzwingen wir
   deshalb eine Spalte. Ausnahme: die bewusst kompakten Klassen-
   Grids (.grid-2/3/4, Fakten-Leisten) sind hiervon unberührt,
   weil sie keine Inline-Spaltendefinition tragen. */
@media (max-width: 700px) {
  /* Mit viewport-fit=cover zeichnet die Seite bis in die Display-Ecken --
     nur so wirkt env(safe-area-inset-*) ueberhaupt (Codex-Review). Im
     Querformat liegen Notch bzw. Kameraleiste dann seitlich im Bild,
     deshalb hier der seitliche Sicherheitsabstand. Hochkant sind die
     Werte 0, das Layout bleibt unveraendert. */
  body {
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
  }

  /* Raster mit auto-fill/auto-fit brechen bereits von selbst um und legen ihre
     Spaltenzahl anhand der Mindestbreite fest. Sie werden deshalb gar nicht
     erst ueberschrieben -- ihr Inline-Wert bleibt unveraendert erhalten.
     (Eine Ausnahmeregel mit festem Wert waere falsch: sie wuerde auto-fit
     stillschweigend in auto-fill verwandeln, was leere Spuren erzeugt.
     Codex-Review.) */
  [style*="grid-template-columns"]:not([style*="auto-fill"]):not([style*="auto-fit"]) {
    grid-template-columns: 1fr !important;
  }
}

/* ── A2: Anker-Ziele nicht unterm fixierten Header verstecken ──
   Desktop: schwebende Header-Pille (~64px + 16px Abstand).
   Mobile: höherer Wert wegen kompakterem, aber breiterem Header. */
[id] {
  scroll-margin-top: 96px;
}
@media (max-width: 700px) {
  [id] {
    scroll-margin-top: 132px;
  }
}

/* ── A3: Tab-Leiste — sichtbarer Wisch-Hinweis auf Mobile ────── */
@media (max-width: 700px) {
  .tab-nav {
    position: relative;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* Fade rechts signalisiert: hier geht es weiter */
    -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 88%, transparent 100%);
    mask-image: linear-gradient(90deg, #000 0%, #000 88%, transparent 100%);
  }
  .tab-nav::-webkit-scrollbar { display: none; }
  .tab-nav-item {
    flex-shrink: 0;
    white-space: nowrap;
  }
}

/* ── B1: Bottom-Action-Bar (nur Mobile) ─────────────────────────
   App-artige Leiste am unteren Rand: Anrufen · WhatsApp · Route.
   Immer erreichbar, ein Daumen-Tipp. */
.action-bar {
  display: none;
}

@media (max-width: 700px) {
  .action-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 90;
    display: grid;
    grid-template-columns: 1fr 1.4fr 1fr;
    gap: 1px;
    background: rgba(32, 25, 20, 0.96);
    /* Safari braucht das -webkit-Präfix, sonst kein Blur (Codex-Review) */
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border-top: 1px solid rgba(255, 250, 241, 0.14);
    padding-bottom: env(safe-area-inset-bottom, 0);
  }

  /* Das Cookie-Banner liegt ebenfalls fix am unteren Rand (z-index 1000) und
     verdeckte die Action-Bar (z-index 90) beim Erstbesuch vollstaendig - genau
     dann, wenn Anrufen/WhatsApp/Route am wichtigsten sind. Deshalb wird das
     Banner auf Mobile um die Hoehe der Leiste angehoben, solange es sichtbar
     ist. Wert konsistent mit dem body-padding-bottom weiter unten. */
  .cc-banner {
    bottom: calc(56px + env(safe-area-inset-bottom, 0px));
  }

  .action-bar a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 54px;
    color: #fffaf1;
    font-size: 0.86rem;
    font-weight: 700;
    text-decoration: none;
  }

  .action-bar a svg {
    width: 17px;
    height: 17px;
    flex-shrink: 0;
  }

  .action-bar .action-bar-primary {
    background: var(--saffron);
    color: var(--ink);
  }

  /* Platz schaffen: Inhalt + Floats dürfen nicht unter der Bar liegen */
  body {
    padding-bottom: calc(56px + env(safe-area-inset-bottom, 0));
  }

  /* WhatsApp-Float ist durch die Bar doppelt → ausblenden */
  .wa-float {
    display: none;
  }

  /* Scroll-Top-Button über die Bar heben */
  #scroll-top {
    bottom: calc(72px + env(safe-area-inset-bottom, 0));
  }
}

/* ── B2: Auto-Hide-Header ───────────────────────────────────────
   Beim Runterscrollen verschwindet der Header (mehr Platz, nichts
   wird verdeckt), beim Hochscrollen kommt er sofort zurück. */
.site-header {
  transition: background 280ms ease, box-shadow 280ms ease,
              transform 300ms ease, opacity 300ms ease;
}

.site-header.nav-hidden {
  transform: translateY(-140%);
  opacity: 0;
  pointer-events: none;
}

/* ── B3: Intent-Band kompakt auf Mobile ─────────────────────────
   Statt 3 riesiger Kacheln untereinander: eine schlanke Reihe. */
@media (max-width: 700px) {
  .intent-band {
    grid-template-columns: repeat(3, 1fr);
  }
  .intent-band a {
    min-height: 0;
    padding: 16px 10px;
    border-right: 1px solid var(--line);
    border-bottom: 0;
    text-align: center;
  }
  .intent-band a:last-child { border-right: 0; }
  .intent-band span { font-size: 0.72rem; }
  .intent-band strong {
    margin: 6px 0 0;
    font-size: 1.05rem;
  }
  .intent-band small { display: none; }
}

/* ── B4: Mobile-Straffung — kompaktere Sektionen ──────────────── */
@media (max-width: 700px) {
  .split-section,
  .finder-section,
  .experience-section,
  .visit-section,
  .section {
    padding-block: 44px;
  }
  .experience-grid img {
    aspect-ratio: 16 / 9;
  }
  .portrait-wrap img {
    aspect-ratio: 4 / 3;
  }
  .seasonal-band-inner {
    padding-block: 28px;
  }
}

/* ── C1: Schnellstart-Karte (nur Mobile) ────────────────────────
   Beantwortet die 3 Erstbesucher-Fragen ohne Scrollen:
   Wo? Wann? Wie erreichen? */
.quickstart {
  display: none;
}

@media (max-width: 700px) {
  .quickstart {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px 14px;
    padding: 12px 16px;
    background: var(--ink);
    color: rgba(255, 250, 241, 0.85);
    font-size: 0.82rem;
    text-align: center;
  }
  .quickstart strong { color: #fffaf1; }
  .quickstart a {
    color: var(--saffron);
    font-weight: 700;
    text-decoration: none;
  }
}

/* ── C2 (entfernt am 24.08.2026): Die frühere CSS-Umsortierung des
   Genuss-Finders wurde durch echte HTML-Reihenfolge ersetzt
   (Barrierefreiheit: sichtbare Reihenfolge = Tab-Reihenfolge,
   WCAG 1.3.2/2.4.3). Der Finder steht jetzt in index.tpl.php
   direkt hinter dem Intent-Band. */