/* ============================================================
   ANDYS BACKSTUBE · REDESIGN v3 — MEISTERBÄCKEREI
   Ruhig, präzise, handwerklich-edel: warme, gedeckte Palette,
   Fraunces (Display) + Instrument Sans (Fließtext), feine
   1px-Linien, viel Weißraum, reduzierte Line-Art, dezente Reveals.
   ============================================================ */
:root {
  /* Flächen */
  --grund:       #FAF6EF;   /* warmes Off-White, Seitengrund */
  --flaeche:     #F3ECDF;   /* Creme, Sektionswechsel & Seitenkopf */
  --karte:       #FFFDF8;   /* Kartenfläche */
  --dunkel:      #221B13;   /* dunkles Braun: Hero, Footer */
  --dunkel-tief: #181209;

  /* Text */
  --tinte:       #3C342A;   /* Fließtext auf hell */
  --tinte-hell:  #6E6353;   /* gedämpfter Text auf hell (AA) */
  --hell:        #F6EFE2;   /* Text auf dunkel */
  --hell-ged:    #CFC5B2;   /* gedämpfter Text auf dunkel */

  /* Akzente */
  --gold:        #8A6425;   /* Ochsengold als Textakzent (AA auf hell) */
  --gold-hell:   #C9A25E;   /* Gold dekorativ / auf dunklen Flächen */
  --rost:        #8C3B22;   /* Rostrot, sparsam: Primär-CTA */
  --rost-dunkel: #74301B;
  --linie:       #E3D9C6;   /* 1px-Haarlinien */
  --linie-dunkel: rgba(246, 239, 226, .16); /* Haarlinie auf dunkel */

  /* Typografie */
  --font-display: "Fraunces", "Times New Roman", serif;
  --font-body: "Instrument Sans", system-ui, sans-serif;

  /* Abstände (4/8/12/16/24/32/48/64) */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px;
  --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px;

  --radius: 8px;
  --radius-btn: 3px;
  --schatten: 0 12px 32px -18px rgba(34, 27, 19, .28);
  --max-breite: 1120px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.7;
  color: var(--tinte);
  background: var(--grund);
  overflow-x: hidden;
}
h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.12;
  color: var(--dunkel);
  margin: 0 0 var(--s4);
  letter-spacing: -0.01em;
}
h1 { font-size: clamp(2.3rem, 5.5vw, 3.9rem); font-weight: 350; }
h2 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); }
h3 { font-size: 1.2rem; }
p { margin: 0 0 var(--s4); }
img, svg { max-width: 100%; height: auto; display: block; }
a { color: var(--gold); }
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 2px;
}

.container { max-width: var(--max-breite); margin-inline: auto; padding-inline: var(--s5); }

.eyebrow {
  display: inline-block;
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: var(--s3);
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  padding: 13px 28px;
  border-radius: var(--radius-btn);
  border: 1px solid transparent;
  font-family: var(--font-body);
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: .02em;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.btn-primaer { background: var(--rost); color: #FFF9F2; }
.btn-primaer:hover { background: var(--rost-dunkel); }
.btn-sekundaer { background: transparent; color: var(--hell); border-color: rgba(246, 239, 226, .55); }
.btn-sekundaer:hover { background: rgba(246, 239, 226, .1); border-color: var(--hell); }
.btn-kruste { background: var(--dunkel); color: var(--hell); }
.btn-kruste:hover { background: #38290f; }

/* ============================================================
   TOPBAR — ruhig, Haarlinie, aktive Seite unterstrichen
   ============================================================ */
.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(250, 246, 239, .94);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--linie);
}
.topbar-inhalt {
  display: flex;
  align-items: center;
  gap: var(--s4);
  padding-block: var(--s4);
}
.marke {
  display: flex;
  align-items: center;
  gap: var(--s3);
  text-decoration: none;
  color: var(--dunkel);
  font-family: var(--font-display);
  font-size: 1.2rem;
  margin-right: auto;
}
.marke svg { width: 20px; height: auto; color: var(--gold); }
.marke-logo {
  width: 156px; height: 156px;
  margin-top: -12px; margin-bottom: -72px;
  position: relative; z-index: 1;
  filter: drop-shadow(0 8px 16px rgba(24, 18, 9, .38));
  transition: width .28s ease, height .28s ease, margin .28s ease, transform .25s ease, filter .25s ease;
}
.marke:hover .marke-logo { transform: translateY(-2px); filter: drop-shadow(0 12px 20px rgba(24, 18, 9, .44)); }
/* Kompakter Zustand beim Scrollen: Logo sitzt innerhalb der Leiste, verdeckt keinen Inhalt */
.topbar.ist-gescrollt .marke-logo {
  width: 58px; height: 58px;
  margin-top: -6px; margin-bottom: -6px;
  filter: drop-shadow(0 4px 9px rgba(24, 18, 9, .30));
}
@media (max-width: 480px) {
  .marke-logo { width: 108px; height: 108px; margin-top: -8px; margin-bottom: -50px; filter: drop-shadow(0 5px 11px rgba(24, 18, 9, .34)); }
}
.topbar nav { display: flex; gap: var(--s5); }
.topbar nav a {
  text-decoration: none;
  font-weight: 500;
  font-size: .92rem;
  letter-spacing: .02em;
  color: var(--tinte);
  position: relative;
  padding-block: var(--s1);
}
.topbar nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 100%; bottom: 0;
  height: 1px;
  background: var(--gold);
  transition: right .2s ease;
}
.topbar nav a:hover::after { right: 0; }
.topbar nav a[aria-current="page"] { color: var(--dunkel); font-weight: 600; }
.topbar nav a[aria-current="page"]::after { right: 0; }
.heute-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  background: transparent;
  border: 1px solid var(--linie);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: .82rem;
  font-weight: 500;
  color: var(--tinte);
  white-space: nowrap;
}
.heute-chip .punkt {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--gold);
}

/* ============================================================
   HERO — dunkle, edle Fläche mit starker Typo und feiner Ähre
   ============================================================ */
.hero {
  position: relative;
  overflow: hidden;
  color: var(--hell);
  background:
    radial-gradient(120% 90% at 18% 0%, rgba(201, 162, 94, .1) 0%, rgba(201, 162, 94, 0) 55%),
    linear-gradient(180deg, var(--dunkel) 0%, var(--dunkel-tief) 100%);
  padding-block: clamp(72px, 12vw, 128px);
}
.hero-inhalt {
  position: relative;
  z-index: 2;
  max-width: 640px;
}
.hero .eyebrow { color: var(--gold-hell); }
.hero h1 { color: var(--hell); margin-bottom: var(--s5); }
.hero-sub { font-size: 1.1rem; line-height: 1.75; color: var(--hell-ged); max-width: 520px; }
.hero-aktionen { display: flex; gap: var(--s4); flex-wrap: wrap; margin-top: var(--s6); }
.hero a:focus-visible { outline-color: var(--gold-hell); }
.hero-aehre {
  position: absolute;
  right: clamp(24px, 9vw, 140px);
  bottom: -32px;
  height: min(420px, 70vw);
  width: auto;
  color: var(--gold-hell);
  opacity: .28;
  z-index: 1;
  pointer-events: none;
}

/* ============================================================
   WERTE-LEISTE (Marker "marquee") — ruhige, statische Zeile
   ============================================================ */
.werte-leiste {
  background: var(--grund);
  border-bottom: 1px solid var(--linie);
  padding-block: var(--s4);
}
.werte {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  column-gap: var(--s5);
  row-gap: var(--s2);
}
.werte li {
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--tinte-hell);
  display: inline-flex;
  align-items: center;
  gap: var(--s5);
}
.werte li + li::before {
  content: "";
  width: 3px; height: 3px;
  border-radius: 50%;
  background: var(--gold-hell);
}

/* ============================================================
   SEKTIONEN & KARTEN
   ============================================================ */
.sortiment { padding-block: clamp(64px, 9vw, 96px); }
.sektions-kopf { max-width: 640px; margin-bottom: var(--s7); }
.sektions-kopf p { color: var(--tinte-hell); }
.karten-raster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--s5);
}
.karte {
  background: var(--karte);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  padding: var(--s6) var(--s5) var(--s5);
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.karte:hover { border-color: var(--gold-hell); box-shadow: var(--schatten); }
.karte-illu {
  height: 64px;
  display: flex;
  align-items: center;
  color: var(--gold);
  margin-bottom: var(--s2);
}
.karte-illu svg { height: 56px; width: auto; }
.karte h3 { margin-bottom: 0; }
.karte .karten-text { font-size: .94rem; color: var(--tinte-hell); margin: 0; }
.karte ul { list-style: none; margin: var(--s2) 0 0; padding: 0; display: grid; gap: var(--s2); }
.karte li {
  display: flex;
  justify-content: space-between;
  gap: var(--s3);
  font-size: .94rem;
  border-bottom: 1px solid var(--linie);
  padding-bottom: var(--s2);
}
.karte li:last-child { border-bottom: 0; }
.karte .preis { font-weight: 600; color: var(--dunkel); white-space: nowrap; font-variant-numeric: tabular-nums; }
.badge {
  display: inline-block;
  border: 1px solid var(--gold-hell);
  color: var(--gold);
  background: transparent;
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  border-radius: 2px;
  padding: 2px 8px;
  margin-left: var(--s2);
  vertical-align: middle;
}

/* Kategorie-Karten (Teaser + Übersicht) */
.karte .kategorie-anzahl {
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tinte-hell);
  margin: 0;
}
.karten-link {
  margin-top: auto;
  padding-top: var(--s3);
  font-weight: 600;
  font-size: .92rem;
  text-decoration: none;
  color: var(--gold);
  border-top: 1px solid var(--linie);
}
.karten-link:hover { color: var(--dunkel); }

/* ============================================================
   ÜBER UNS — Text + statisches Emblem "Meisterbetrieb seit 1997"
   ============================================================ */
.ueber { background: var(--flaeche); border-block: 1px solid var(--linie); padding-block: clamp(64px, 9vw, 96px); }
.ueber-raster {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: var(--s8);
  align-items: center;
}
.ueber p { color: var(--tinte); }
.emblem-buehne { display: grid; place-items: center; }
.emblem { width: min(280px, 68vw); color: var(--gold); }

/* ============================================================
   BEWERTUNGEN — ruhige Zitatkarten
   ============================================================ */
.bewertungen { padding-block: clamp(64px, 9vw, 96px); }
.bewertungs-raster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--s5);
  margin-bottom: var(--s6);
}
.bewertung {
  background: var(--karte);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  padding: var(--s6) var(--s5) var(--s5);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.bewertung:hover { border-color: var(--gold-hell); box-shadow: var(--schatten); }
.bewertung::before {
  content: "";
  display: block;
  width: 28px;
  height: 2px;
  background: var(--gold-hell);
  margin-bottom: var(--s4);
}
.sterne-reihe { color: var(--gold); letter-spacing: 3px; font-size: .95rem; margin-bottom: var(--s3); }
.bewertung blockquote { margin: 0 0 var(--s4); font-size: .97rem; line-height: 1.7; }
.bewertung footer { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); font-size: .86rem; }
.bewertung cite { font-style: normal; font-weight: 600; color: var(--dunkel); }
.quelle-chip {
  border: 1px solid var(--linie);
  border-radius: 999px;
  padding: 2px 10px;
  font-size: .72rem;
  font-weight: 500;
  color: var(--tinte-hell);
}
.bewertungen-aktion { text-align: center; }

/* ============================================================
   ANFAHRT & ÖFFNUNGSZEITEN
   ============================================================ */
.anfahrt { background: var(--flaeche); border-top: 1px solid var(--linie); padding-block: clamp(64px, 9vw, 96px); }
.anfahrt-raster {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s8);
  align-items: start;
}
.karte-rahmen {
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--linie);
  aspect-ratio: 4 / 3;
  background: var(--grund);
}
.karte-rahmen iframe { width: 100%; height: 100%; border: 0; display: block; }
.zeiten-tabelle { width: 100%; border-collapse: collapse; margin-block: var(--s4) var(--s5); }
.zeiten-tabelle th, .zeiten-tabelle td {
  text-align: left;
  padding: 10px 4px;
  border-bottom: 1px solid var(--linie);
  font-size: .95rem;
}
.zeiten-tabelle th { font-weight: 500; }
.zeiten-tabelle td { text-align: right; font-weight: 500; font-variant-numeric: tabular-nums; }
.zeiten-tabelle tr.heute th, .zeiten-tabelle tr.heute td { color: var(--gold); font-weight: 700; }
.adresse-block { margin-bottom: var(--s5); }
.adresse-block p { margin-bottom: var(--s2); }

/* ============================================================
   FOOTER — dunkel, ruhig, ohne Dekor-Figuren
   ============================================================ */
.footer-nacht {
  position: relative;
  background: linear-gradient(180deg, var(--dunkel) 0%, var(--dunkel-tief) 100%);
  color: var(--hell-ged);
  padding-block: clamp(56px, 8vw, 80px) var(--s5);
}
.footer-nacht a { color: var(--gold-hell); }
.footer-nacht a:focus-visible { outline-color: var(--gold-hell); }
.footer-inhalt { position: relative; }
.footer-claim {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2.8vw, 1.7rem);
  color: var(--hell);
  max-width: 520px;
  margin-bottom: var(--s7);
}
.footer-spalten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--s6);
  padding-bottom: var(--s6);
  border-bottom: 1px solid var(--linie-dunkel);
  margin-bottom: var(--s5);
}
.footer-spalten h3 {
  color: var(--gold-hell);
  font-size: .76rem;
  font-family: var(--font-body);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .18em;
}
.footer-spalten ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); }
.footer-spalten a { text-decoration: none; }
.footer-spalten a:hover { text-decoration: underline; }
.footer-unten {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s4);
  justify-content: space-between;
  font-size: .82rem;
  color: #9A8F7C;
}

/* ============================================================
   UNTERSEITEN: SEITENKOPF, CHIPS, PRODUKTE, PAGINATION
   ============================================================ */
.seitenkopf {
  background: var(--flaeche);
  border-bottom: 1px solid var(--linie);
  padding-block: clamp(48px, 8vw, 80px);
}
.seitenkopf h1 { font-size: clamp(2rem, 4.5vw, 3rem); margin-bottom: var(--s3); }
.seitenkopf p { max-width: 640px; margin-bottom: 0; color: var(--tinte-hell); }
.seiteninhalt { padding-block: var(--s7) clamp(64px, 9vw, 96px); }

/* Rechtstexte (Impressum, Datenschutz) */
.rechtstext { max-width: 760px; }
.rechtstext h2 { font-size: 1.5rem; margin-top: var(--s7); margin-bottom: var(--s3); }
.rechtstext > h2:first-child { margin-top: 0; }
.rechtstext h3 { margin-top: var(--s5); margin-bottom: var(--s2); color: var(--tinte); font-size: 1.05rem; }
.rechtstext p, .rechtstext li { color: var(--tinte); }
.rechtstext ul { margin: 0 0 var(--s4); padding-left: var(--s5); }
.rechtstext li { margin-bottom: var(--s1); }
.rechtstext a { color: var(--gold); }
.rechtstext .platzhalter {
  background: #FBEDD8;
  color: var(--rost-dunkel);
  padding: 1px 6px;
  border-radius: 3px;
  font-size: .92em;
  border: 1px dashed var(--gold-hell);
  white-space: nowrap;
}
.rechtstext .stand { color: var(--tinte-hell); font-size: .92rem; margin-top: var(--s7); }

/* Kategorie-Chips-Navigation */
.kategorie-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  margin-bottom: var(--s6);
}
.kategorie-chip {
  display: inline-flex;
  align-items: center;
  background: transparent;
  border: 1px solid var(--linie);
  border-radius: 999px;
  padding: 7px 16px;
  font-size: .84rem;
  font-weight: 500;
  color: var(--tinte);
  text-decoration: none;
  white-space: nowrap;
  transition: border-color .18s ease, background-color .18s ease, color .18s ease;
}
.kategorie-chip:hover { border-color: var(--gold); color: var(--dunkel); }
.kategorie-chip[aria-current="page"] {
  background: var(--dunkel);
  border-color: var(--dunkel);
  color: var(--hell);
  font-weight: 600;
}

/* Produktkarten mit Bild */
.produkt-bild {
  height: 150px;
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--flaeche);
  border: 1px solid var(--linie);
  color: var(--gold);
  margin-bottom: var(--s2);
}
.produkt-bild img { width: 100%; height: 100%; object-fit: cover; }
.produkt-bild svg { height: 56px; width: auto; }
.produkt-fuss { margin-top: auto; display: flex; justify-content: flex-end; margin-bottom: 0; padding-top: var(--s3); border-top: 1px solid var(--linie); }
.leere-kategorie { text-align: center; color: var(--tinte-hell); margin-block: var(--s7); }

/* Pagination */
.pagination {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  justify-content: center;
  align-items: center;
  margin-top: var(--s7);
}
.seiten-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 6px 14px;
  border-radius: var(--radius-btn);
  border: 1px solid var(--linie);
  background: var(--karte);
  color: var(--dunkel);
  font-weight: 500;
  font-size: .92rem;
  text-decoration: none;
  font-variant-numeric: tabular-nums;
  transition: border-color .18s ease, background-color .18s ease;
}
.seiten-btn:hover { border-color: var(--gold); }
.seiten-btn[aria-current="page"] { background: var(--dunkel); border-color: var(--dunkel); color: var(--hell); font-weight: 600; }
.seiten-btn.inaktiv { opacity: .4; pointer-events: none; }

/* ============================================================
   SCROLL-REVEALS — klein, kurz, dezent
   ============================================================ */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity .55s ease, transform .55s ease; }
.reveal.sichtbar { opacity: 1; transform: none; }
.reveal-verz-1 { transition-delay: .07s; }
.reveal-verz-2 { transition-delay: .14s; }
.reveal-verz-3 { transition-delay: .21s; }

/* ============================================================
   REDUZIERTE BEWEGUNG
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}

/* ============================================================
   RESPONSIV (Prüfpunkte 320 / 768 / 1080)
   ============================================================ */
@media (max-width: 900px) {
  .ueber-raster, .anfahrt-raster { grid-template-columns: 1fr; gap: var(--s7); }
}
@media (max-width: 768px) {
  .nav-toggle { display: inline-flex; }
  .topbar-inhalt { gap: var(--s3); }
  /* Navigation wird zum Aufklapp-Menü unter der Leiste */
  .topbar nav {
    position: absolute;
    top: 100%; left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--grund);
    border-bottom: 1px solid var(--linie);
    box-shadow: 0 16px 30px -20px rgba(34, 27, 19, .5);
    padding: var(--s2) var(--s5) var(--s4);
    opacity: 0;
    transform: translateY(-10px);
    pointer-events: none;
    transition: opacity .22s ease, transform .22s ease;
  }
  .topbar.nav-offen nav { opacity: 1; transform: none; pointer-events: auto; }
  .topbar nav a { padding-block: var(--s3); font-size: 1rem; border-bottom: 1px solid var(--linie); }
  .topbar nav a:last-child { border-bottom: 0; }
  .topbar nav a::after { display: none; }
  /* Beim Öffnen Logo kompakt, damit es das Menü nicht überdeckt */
  .topbar.nav-offen .marke-logo { width: 58px; height: 58px; margin: -6px; }
  .hero-aehre { display: none; }
}
@media (max-width: 480px) {
  body { font-size: 16px; }
  .heute-chip { font-size: .76rem; }
  .karten-raster { grid-template-columns: 1fr; }
  .werte { justify-content: flex-start; }
}

/* ============================================================
   VORBESTELLUNG — Formular in der v3-Formensprache
   ============================================================ */
.vorbestell-formular {
  max-width: 760px;
  background: var(--karte);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  box-shadow: var(--schatten);
  padding: var(--s6);
}
.vorbestell-formular fieldset {
  border: none;
  border-top: 1px solid var(--linie);
  margin: 0 0 var(--s5);
  padding: var(--s5) 0 0;
}
.vorbestell-formular legend {
  font-family: var(--font-display);
  font-size: 1.25rem;
  color: var(--dunkel);
  padding-right: var(--s3);
}
.vorbestell-formular .feld { margin-bottom: var(--s4); }
.vorbestell-formular label {
  display: block;
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--tinte-hell);
  margin-bottom: var(--s1);
}
.vorbestell-formular input,
.vorbestell-formular select,
.vorbestell-formular textarea {
  width: 100%;
  font: inherit;
  color: var(--tinte);
  background: var(--grund);
  border: 1px solid var(--linie);
  border-radius: var(--radius-btn);
  padding: 10px var(--s3);
}
.vorbestell-formular input:focus-visible,
.vorbestell-formular select:focus-visible,
.vorbestell-formular textarea:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 1px;
}
.vorbestell-formular textarea { resize: vertical; }
.formular-zeile {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s4);
}
.position-zeile {
  display: grid;
  grid-template-columns: 1fr 110px;
  gap: var(--s4);
  align-items: end;
}
.btn-position-hinzu { margin-top: var(--s2); }
.feld-hinweis {
  display: block;
  font-size: .84rem;
  color: var(--tinte-hell);
  margin-top: var(--s1);
}
.feld-fehler {
  display: block;
  font-size: .84rem;
  color: var(--rost);
  margin-top: var(--s1);
}
.feld-fehler-eingabe { border-color: var(--rost) !important; }
.honigtopf {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  overflow: hidden;
}
.formular-aktionen {
  display: flex;
  align-items: center;
  gap: var(--s4);
  flex-wrap: wrap;
}
.formular-aktionen .feld-hinweis { flex: 1; min-width: 240px; margin: 0; }
.formular-banner {
  max-width: 760px;
  border-radius: var(--radius);
  padding: var(--s5) var(--s6);
  margin-bottom: var(--s5);
  border: 1px solid var(--linie);
}
.formular-banner h2 { margin-bottom: var(--s2); }
.formular-banner p { margin: 0 0 var(--s3); }
.formular-banner p:last-child { margin-bottom: 0; }
.formular-banner-ok { background: #EFF3E4; border-color: #C9D4A8; }
.formular-banner-fehler { background: #F8E9E2; border-color: #E0B9A6; }
.produkt-fuss {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s3);
}
.vorbestell-link {
  font-size: .84rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--gold);
  text-decoration: none;
}
.vorbestell-link:hover { color: var(--rost); text-decoration: underline; }
@media (max-width: 640px) {
  .formular-zeile { grid-template-columns: 1fr; gap: 0; }
  .position-zeile { grid-template-columns: 1fr 90px; }
  .vorbestell-formular { padding: var(--s5); }
}

/* ============================================================
   MOBIL-NAVIGATION (Hamburger → X)
   ============================================================ */
.nav-toggle {
  display: none;
  align-items: center; justify-content: center;
  width: 44px; height: 44px; flex: none;
  margin-left: var(--s2);
  background: transparent;
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  color: var(--dunkel);
  cursor: pointer;
  position: relative; z-index: 3;
}
.nav-toggle:hover { border-color: var(--gold-hell); }
.nav-toggle-balken, .nav-toggle-balken::before, .nav-toggle-balken::after {
  content: "";
  position: absolute;
  width: 20px; height: 2px; border-radius: 2px;
  background: currentColor;
  transition: transform .24s ease, opacity .18s ease, background-color .18s ease;
}
.nav-toggle-balken { left: 50%; top: 50%; transform: translate(-50%, -50%); }
.nav-toggle-balken::before { left: 0; top: -6px; }
.nav-toggle-balken::after  { left: 0; top: 6px; }
.topbar.nav-offen .nav-toggle-balken { background: transparent; }
.topbar.nav-offen .nav-toggle-balken::before { transform: translateY(6px) rotate(45deg); }
.topbar.nav-offen .nav-toggle-balken::after  { transform: translateY(-6px) rotate(-45deg); }

/* ============================================================
   VERSPIELTE DETAILS — Getreide, Brotdampf, Mikro-Interaktionen
   (klassisch-familiär, dezent; deaktiviert bei prefers-reduced-motion)
   ============================================================ */

/* Weizenähre im Hero: wächst beim Scrollen (JS setzt --aehre-wachstum)
   und wiegt sich sanft am Halm. scale/rotate sind unabhängige
   Eigenschaften und kombinieren sich sauber. */
.hero-aehre {
  transform-origin: bottom center;
  scale: 1 var(--aehre-wachstum, .6);
  rotate: 0deg;
  transition: scale .12s linear;
  animation: aehre-wiegen 7s ease-in-out infinite;
}
@keyframes aehre-wiegen {
  0%, 100% { rotate: -1.6deg; }
  50%      { rotate: 1.6deg; }
}

/* Brotkarte: aufsteigender Dampf in feinen Linien */
.karte-illu { position: relative; }
.karte--brote .dampf {
  position: absolute;
  left: 42px; top: -2px;
  transform: translateX(-50%);
  width: 34px; height: 22px;
  display: flex; justify-content: space-between; align-items: flex-end;
  pointer-events: none;
}
.karte--brote .dampf i {
  width: 2px; height: 16px; border-radius: 2px;
  background: linear-gradient(to top, rgba(201, 162, 94, .6), rgba(201, 162, 94, 0));
  opacity: 0;
  animation: brot-dampf 3.2s ease-in-out infinite;
}
.karte--brote .dampf i:nth-child(2) { height: 20px; animation-delay: 1.05s; }
.karte--brote .dampf i:nth-child(3) { animation-delay: 2.1s; }
@keyframes brot-dampf {
  0%   { opacity: 0; transform: translateY(6px)  translateX(0)   scaleY(.6); }
  25%  { opacity: .85; }
  60%  { opacity: .5;  transform: translateY(-8px) translateX(2px) scaleY(1); }
  100% { opacity: 0;  transform: translateY(-18px) translateX(-2px) scaleY(1.1); }
}

/* Karten heben sich beim Hover, die Illustration neigt sich verspielt */
.karte { transition: border-color .2s ease, box-shadow .25s ease, transform .25s ease; }
.karte:hover { transform: translateY(-4px); }
.karte-illu svg { transition: transform .35s cubic-bezier(.34, 1.56, .64, 1); transform-origin: bottom center; }
.karte:hover .karte-illu svg { transform: rotate(-4deg) scale(1.07); }

/* „Heute geöffnet“-Punkt pulsiert ruhig */
.heute-chip .punkt { animation: chip-puls 2.6s ease-in-out infinite; }
@keyframes chip-puls {
  0%, 100% { box-shadow: 0 0 0 0 rgba(138, 100, 37, .5); }
  50%      { box-shadow: 0 0 0 5px rgba(138, 100, 37, 0); }
}

/* Buttons und Karten-Links: dezente Anhebung */
.btn { transition: transform .18s ease, background-color .2s ease, color .2s ease, box-shadow .2s ease; }
.btn:hover { transform: translateY(-2px); }
.karten-link { transition: color .18s ease; }
.karten-link span { display: inline-block; transition: transform .2s ease; }
.karten-link:hover span { transform: translateX(4px); }

@media (prefers-reduced-motion: reduce) {
  .hero-aehre { scale: 1 1; animation: none; }
  .karte:hover { transform: none; }
  .karte:hover .karte-illu svg { transform: none; }
  .btn:hover { transform: none; }
}