*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--kopf-hoehe) + 8px); -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
@media (max-width: 959px) { html { scroll-padding-top: calc(var(--kopf-oben) + 8px); } }
body {
  margin: 0;
  background: var(--grund);
  color: var(--text-stark);
  font-family: var(--schrift-text);
  font-size: var(--groesse-text);
  line-height: 1.6;
  font-variant-numeric: tabular-nums;
}
img { display: block; max-width: 100%; height: auto; }
figure { margin: 0; }
a { color: var(--leit-text); }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--leit-text);
  outline-offset: 3px;
}
h1, h2, h3 {
  font-family: var(--schrift-display);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: 0.01em;
  margin: 0;
  overflow-wrap: anywhere;
  hyphens: manual;
}
h1 { font-size: var(--groesse-h1); text-transform: uppercase; }
h2 { font-size: var(--groesse-h2); text-transform: uppercase; color: var(--leit-text); text-wrap: balance; }
h3 { font-size: var(--groesse-h3); line-height: 1.1; }
p { margin: 0 0 var(--abstand-s); max-width: 36em; }
p:last-child { margin-bottom: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
strong { font-weight: 600; }
mark.platzhalter {
  background: var(--zettel); color: var(--text-stark);
  padding: 0 6px; border: 1px dashed var(--rand); font-weight: 600;
}

.innen { width: min(100% - 32px, 1180px); margin-inline: auto; }
.sprung {
  position: absolute; inset-inline-start: -999px; top: 8px;
  background: var(--schiene); color: var(--auf-schiene);
  padding: 8px 16px; z-index: 100;
}
.sprung:focus { inset-inline-start: 8px; }
.vorspann { font-size: var(--groesse-vorspann); line-height: 1.5; }
.leise { color: var(--text-leise); }
.klein { font-size: var(--groesse-klein); }
.meta { font-size: var(--groesse-meta); }

/* Knöpfe: Schildplatten */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 56px; padding: 12px 24px;
  border-radius: var(--radius);
  font-family: var(--schrift-display);
  font-size: 22px; letter-spacing: 0.04em; text-transform: uppercase;
  text-decoration: none; border: var(--schiene-staerke) solid transparent;
  transition: transform var(--dauer) ease-out, box-shadow var(--dauer) ease-out;
  cursor: pointer;
}
.knopf:hover { transform: translateY(-2px); box-shadow: var(--schatten-weit); }
.knopf:active { transform: translateY(0); box-shadow: none; }
@media (prefers-reduced-motion: reduce) { .knopf, .knopf:hover { transition: none; transform: none; } }
.knopf--leit { background: var(--leit-flaeche); color: var(--auf-leit); border-color: var(--leit-flaeche); }
.knopf--gruen { background: var(--gruen); color: var(--auf-gruen); border-color: var(--gruen); }
.knopf--dunkel { background: var(--tafel); color: var(--leit-text); border-color: var(--tafel); }
.knopf svg { width: 24px; height: 24px; flex: none; }
.knopf[disabled] { opacity: 0.6; cursor: wait; transform: none; box-shadow: none; }

/* Status */
.status { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; }
.status::before { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--rand); flex: none; }
.status--offen { color: var(--gruen); }
.status--offen::before { background: var(--gruen); }
.status--zu { color: var(--text-leise); }
.status--zu::before { background: var(--leit-flaeche); }

/* Tafel: die Schildtafel */
.tafel { background: transparent; margin: 0 auto; }
.innen:has(> .tafel), .innen:has(> .zettel-bild) { width: 100%; }
.tafel-innen, .zettel-bild, .tafel-band { padding-inline: max(16px, calc((100% - 1180px) / 2)); }
#metzgerei .tafel, #vorbestellen .tafel, #anfahrt .tafel, .breit { background: var(--tafel); }
.tafel-band {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px;
  background: var(--leit-flaeche); color: var(--auf-leit);
  padding-block: 10px;
  font-family: var(--schrift-display); font-size: 18px; letter-spacing: 0.08em; text-transform: uppercase;
}
.tafel-band small { font-family: var(--schrift-text); font-size: var(--groesse-meta); letter-spacing: 0.02em; text-transform: none; opacity: 0.85; }
.tafel-innen { padding-block: var(--abstand-l) var(--abstand-xl); }
.tafel h2 { margin-bottom: var(--abstand-s); }
.tafel--dunkel { background: var(--leit-flaeche); color: var(--auf-leit); }
.tafel--dunkel .tafel-band { background: var(--tafel); color: var(--leit-text); }
.tafel--dunkel h2 { color: var(--auf-leit); }
.tafel--dunkel .leise { color: var(--zettel); }
@media (min-width: 800px) {
  .tafel-innen { padding-block: var(--abstand-xl) var(--abstand-xxl); }
}

.kicker { font-family: var(--schrift-display); text-transform: uppercase; letter-spacing: 0.08em; font-size: 18px; color: var(--leit-text); margin: 0 0 var(--abstand-xs); max-width: none; }
.kicker::before { content: ""; display: block; width: 72px; height: 6px; background: var(--leit-flaeche); margin-bottom: 14px; }
.kicker span + span, .kicker span:not(:first-child) { color: var(--text-leise); }
[dir="rtl"] .kicker { font-weight: 700; letter-spacing: 0; text-transform: none; }

/* Fotos: eingesetzte Schildflächen */
.schild-foto { background: var(--flaeche-leise); }
.schild-foto img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.schild-foto--quadrat img { aspect-ratio: 1; }
figcaption { font-size: var(--groesse-meta); color: var(--text-leise); padding: 6px 0 0; }

/* Kopf */
.kopf {
  position: sticky; top: 0; z-index: 50;
  background: var(--tafel);
  border-bottom: 1px solid var(--linie);
}
.kopf-innen { display: flex; align-items: center; gap: var(--abstand-s); min-height: 76px; }
.kopf-marke { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--text-stark); flex: none; }
.kopf-marke img { width: 64px; height: 64px; }
@media (min-width: 800px) { .kopf-marke img { width: 76px; height: 76px; } .kopf-innen { min-height: 92px; } .kopf-marke span { font-size: 28px; } }
.kopf-marke span { font-family: var(--schrift-display); font-size: 24px; letter-spacing: 0.03em; text-transform: uppercase; white-space: nowrap; }
.kopf-nav { display: flex; gap: 0; margin-inline-start: auto; padding-inline-start: 48px; }
@media (max-width: 959px) {
  .kopf-innen { flex-wrap: wrap; row-gap: 0; }
  .kopf-nav { order: 10; flex: 1 1 100%; margin: 0 -16px; padding: 0 8px 4px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; justify-content: flex-start; }
  .kopf-nav::-webkit-scrollbar { display: none; }
  /* Handy: seite.js hängt die Menüzeile hinter den Kopf, nur die obere Reihe klebt */
  .kopf-nav--frei { margin: 0; background: var(--tafel); border-bottom: 1px solid var(--linie); }
  /* Verlauf am Ende der Menüzeile zeigt, dass sie weiterläuft; verschwindet am Ende (seite.js) */
  .kopf-nav::after {
    content: ""; position: sticky; inset-inline-end: 0; flex: none; align-self: stretch;
    width: 56px; margin-inline-start: -56px; pointer-events: none;
    background: linear-gradient(to right, rgba(255,255,255,0), var(--tafel) 65%);
    transition: opacity var(--dauer) ease-out;
  }
  [dir="rtl"] .kopf-nav::after { background: linear-gradient(to left, rgba(255,255,255,0), var(--tafel) 65%); }
  .kopf-nav--ende::after { opacity: 0; }
  .kopf-nav a { font-size: 16px; padding: 8px 8px 10px; }
  .kopf-innen { min-height: 0; padding-top: 6px; gap: 8px; }
  .kopf-sprachen a { padding: 8px 4px; }
  .kopf-sprachen a img { width: 24px; height: 18px; }
  .kopf-tel, .kopf-route { width: 44px; height: 44px; }
  .kopf-marke img { width: 56px; height: 56px; }
}
@media (max-width: 599px) { .kopf-marke span { display: none; } }
.kopf-nav a {
  color: var(--text-stark); text-decoration: none;
  font-family: var(--schrift-display); font-size: 18px; letter-spacing: 0.05em; text-transform: uppercase;
  padding: 12px 8px; white-space: nowrap;
}
.kopf-nav a:hover { background: var(--leit-flaeche); color: var(--auf-leit); }
.kopf-sprachen { display: flex; gap: 4px; margin-inline-start: auto; align-items: center; flex: none; }
.kopf-sprachen a { display: grid; place-items: center; padding: 8px 5px; border-bottom: 3px solid transparent; flex: none; }
.kopf-sprachen a img { width: 28px; height: 21px; display: block; box-shadow: 0 0 0 1px rgba(27,20,18,0.15); }
.kopf-sprachen a[aria-current="page"] { border-bottom-color: var(--leit-flaeche); }
.kopf-sprachen a:not([aria-current="page"]) img { opacity: 0.75; }
.kopf-sprachen a:hover img { opacity: 1; }
.kopf-tel, .kopf-route {
  display: inline-grid; place-items: center; width: 48px; height: 48px;
  background: var(--leit-flaeche); color: var(--auf-leit); text-decoration: none;
}
.kopf-route { background: var(--grund); color: var(--leit-text); }
.kopf-route svg { width: 22px; height: 22px; }
.kopf-tel svg { width: 22px; height: 22px; }
.kopf-tel-nummer { display: none; }
@media (min-width: 1280px) {
  .kopf-tel, .kopf-route { width: auto; padding: 0 16px; gap: 10px; grid-auto-flow: column; font-family: var(--schrift-display); font-size: 18px; letter-spacing: 0.04em; white-space: nowrap; }
  .kopf-tel-nummer { display: inline; }
}
@media (min-width: 960px) {
  .kopf-sprachen { margin-inline-start: 0; }
}

/* Schmale Handys: obere Reihe enger, damit sie einreihig bleibt und der klebende Kopf flach ist */
@media (max-width: 400px) {
  .kopf-innen { gap: 6px; }
  .kopf-sprachen { gap: 2px; }
  .kopf-sprachen a { padding: 8px 3px; }
}

/* Erste Tafel */
.buehne { padding-top: 0; }
.buehne .tafel-innen { padding-top: var(--abstand-l); padding-bottom: var(--abstand-l); min-height: calc(100svh - var(--kopf-hoehe)); display: flex; flex-direction: column; justify-content: center; }
.buehne-oben { flex: 1; }
.buehne-text { align-self: center; }
.buehne .knopf { font-size: 18px; min-height: 48px; padding: 8px 18px; }
.buehne-oben { display: grid; gap: var(--abstand-m); align-items: center; }
.buehne h1 { color: var(--leit-text); margin-bottom: var(--abstand-s); text-wrap: balance; font-size: clamp(28px, 3.4vw, 42px); }
.buehne h1 span { color: var(--text-stark); }
.buehne .vorspann { font-size: var(--groesse-text); }
.buehne-zeile { display: flex; flex-wrap: wrap; gap: 8px 24px; align-items: center; margin: var(--abstand-s) 0 var(--abstand-m); }
.buehne-zeiten { font-weight: 600; }
.buehne-adresse { color: var(--text-leise); }
.buehne-foto { margin: 0; }
.buehne-foto img { aspect-ratio: 4 / 3; object-position: 50% 100%; }
.buehne-aktionen { display: flex; flex-wrap: wrap; gap: 12px; }
@media (min-width: 1000px) {
  .buehne .tafel-innen { padding-block: 0; padding-inline-end: 0; }
  .buehne-oben { grid-template-columns: 1fr 1.5fr; gap: 0; align-items: stretch; }
  .buehne-foto { margin-inline-start: -160px; position: relative; }
  .buehne-foto::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 45%; background: linear-gradient(to right, var(--grund) 0%, var(--grund) 30%, rgba(244,239,226,0) 100%); pointer-events: none; }
  [dir="rtl"] .buehne-foto::before { inset: 0 0 0 auto; background: linear-gradient(to left, var(--grund) 0%, var(--grund) 30%, rgba(244,239,226,0) 100%); }
  .buehne-text { position: relative; z-index: 1; }
  .buehne-text { align-self: center; padding-block: var(--abstand-xl); }
  .buehne-foto { height: 100%; }
  .buehne-foto img { width: 100%; height: 100%; min-height: 560px; aspect-ratio: auto; object-fit: cover; object-position: 40% 100%; }
  .buehne h1 { font-size: clamp(38px, 3.6vw, 54px); }
  }

/* Zweispalter innerhalb einer Tafel */
.zweispalter { display: grid; gap: var(--abstand-l); align-items: start; }
.zweispalter-fotos { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; position: relative; align-content: start; }
.zweispalter-fotos > :first-child { grid-column: 1 / -1; }
.schild-foto--klein img { aspect-ratio: 16 / 10; }
@media (min-width: 800px) {
  .zweispalter { grid-template-columns: 1fr 1fr; gap: var(--abstand-xl); }
}

/* Belege: Liste mit grünem Quadrat */
.belege { margin: var(--abstand-m) 0; display: grid; gap: 12px; }
.belege li { position: relative; padding-inline-start: 26px; }
.belege li::before { content: ""; position: absolute; inset-inline-start: 0; top: 0.5em; width: 12px; height: 12px; background: var(--leit-flaeche); }
.halal-siegel { width: 96px; height: 96px; position: absolute; inset-inline-end: 12px; bottom: 12px; filter: drop-shadow(0 4px 10px rgba(27,20,18,0.35)); }
@media (min-width: 800px) { .halal-siegel { width: 120px; height: 120px; inset-inline-end: 16px; bottom: 16px; } }
.sorten { display: flex; flex-wrap: wrap; gap: 8px; margin: var(--abstand-s) 0; }
.sorten li {
  background: var(--flaeche-leise); padding: 4px 12px;
  font-family: var(--schrift-display); font-size: 17px; letter-spacing: 0.05em; text-transform: uppercase;
}
.halal-marke {
  display: inline-block; background: var(--gruen); color: var(--auf-gruen);
  font-family: var(--schrift-display); font-size: 15px; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 4px 10px;
}

/* Der Angebotszettel als Bild (Vorlage von Otto, 12.09.2026) */
.zettel-bild { display: grid; gap: var(--abstand-m); align-items: start; padding-block: var(--abstand-l); --zettel-gruen: #015A23; --zettel-rot: #D1080A; }
.zettel-seiten { display: grid; gap: var(--abstand-l); }
.zettel-seiten figcaption { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; font-family: var(--schrift-display); text-transform: uppercase; letter-spacing: 0.08em; font-size: 18px; color: var(--zettel-rot); }
.zettel-seiten figcaption::before { content: ""; flex: none; width: 40px; height: 6px; background: var(--zettel-rot); }
[dir="rtl"] .zettel-seiten figcaption { font-weight: 700; letter-spacing: 0; text-transform: none; }
.zettel-bild figure img { width: 100%; height: auto; border: 6px solid var(--zettel-gruen); }
.zettel-teil { margin: var(--abstand-m) 0 0; padding-bottom: 6px; border-bottom: 3px solid var(--zettel-gruen); color: var(--zettel-gruen); font-size: 20px; }
.zettel-teil + .zettel-liste { margin-top: var(--abstand-s); }
.zettel-liste s { font-size: 15px; color: var(--text-leise); margin-inline-end: 6px; }
.zettel-text .kicker { color: var(--zettel-rot); }
.zettel-text .kicker::before { background: var(--zettel-rot); }
.zettel-text h2 { margin-bottom: var(--abstand-s); color: var(--zettel-gruen); }
.zettel-liste { display: grid; gap: 8px; margin: var(--abstand-m) 0; max-width: 28em; }
.zettel-liste li { display: flex; justify-content: space-between; gap: 16px; padding-bottom: 8px; border-bottom: 1px solid var(--zettel-rot); }
.zettel-liste span { color: var(--zettel-gruen); }
.zettel-liste strong { font-family: var(--schrift-display); font-size: 22px; color: var(--zettel-rot); font-weight: 400; white-space: nowrap; }
@media (min-width: 1000px) {
  .zettel-bild { grid-template-columns: 560px 1fr; gap: var(--abstand-xl); padding-block: var(--abstand-xl); }
  .zettel-text { position: sticky; top: 120px; }
}
.hinweis-platte {
  display: inline-block; background: var(--zettel); color: var(--text-stark);
  border: 1px dashed var(--rand); padding: 6px 12px; font-size: var(--groesse-meta); font-weight: 600;
}
.hinweis-platte {
  display: inline-block; background: var(--zettel); color: var(--text-stark);
  border: 1px dashed var(--rand); padding: 6px 12px; font-size: var(--groesse-meta); font-weight: 600;
}
@media (min-width: 640px) { .felder { grid-template-columns: repeat(3, 1fr); gap: var(--abstand-s); } }
@media (min-width: 800px) {
  .zettel { padding: var(--abstand-l); margin-top: var(--abstand-xl); }
  .zettel-kopf { grid-template-columns: 120px 1fr auto; }
  .zettel-kopf img { width: 120px; height: 120px; }
  .zettel .gueltig { grid-column: auto; align-self: end; }
}

/* Bewertungen als Laufband */
.breit { padding: var(--abstand-l) 0 0; margin: 0; }
.breit h2 { margin-bottom: var(--abstand-l); }
.breit .innen > p { margin-bottom: var(--abstand-m); }
.lauf { overflow: hidden; display: flex; padding: 0 0 var(--abstand-l); }
.lauf-spur { display: flex; gap: var(--abstand-l); flex: none; padding-inline-end: var(--abstand-l); animation: lauf 70s linear infinite; }
.lauf:hover .lauf-spur, .lauf:focus-within .lauf-spur { animation-play-state: paused; }
.lauf-zitat { flex: 0 0 auto; width: min(360px, 80vw); position: relative; padding-inline-start: 30px; }
.lauf-zitat::before { content: "„"; position: absolute; inset-inline-start: 0; top: -4px; font-family: var(--schrift-display); font-size: 48px; line-height: 1; color: var(--leit-text); }
.lauf-zitat p { margin-bottom: 6px; }
.lauf-name { font-weight: 600; font-size: var(--groesse-klein); }
.lauf-name span { font-weight: 400; color: var(--text-leise); margin-inline-start: 8px; }
@keyframes lauf { from { transform: translateX(0); } to { transform: translateX(-100%); } }
@media (prefers-reduced-motion: reduce) {
  .lauf { display: block; }
  .lauf-spur { animation: none; flex-wrap: wrap; padding-inline-end: 0; }
  .lauf-spur[aria-hidden="true"] { display: none; }
}

/* Sortiment */
.regal { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: var(--abstand-m); }
.fach { display: flex; flex-direction: column; gap: 10px; }
.fach h3 { font-size: 22px; text-transform: uppercase; letter-spacing: 0.03em; }
.fach p { font-size: var(--groesse-klein); color: var(--text-leise); }
.fach--gross { grid-column: span 2; }
.fach--ohne .schild-foto { display: grid; place-items: center; aspect-ratio: 3 / 2; text-align: center; padding: 12px; }
.fach--text { justify-content: end; }
@media (min-width: 640px) { .regal { grid-template-columns: repeat(4, 1fr); gap: var(--abstand-m); } }

/* Lieferzeiten im Sortiment */
.liefer-titel { font-size: 20px; text-transform: uppercase; letter-spacing: 0.04em; margin: var(--abstand-m) 0 var(--abstand-xs); }
.liefer { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px 24px; margin: 0 0 var(--abstand-l); font-size: var(--groesse-klein); color: var(--text-leise); }
.liefer strong { display: block; color: var(--text-stark); }
@media (min-width: 800px) { .liefer { grid-template-columns: repeat(4, 1fr); } }

/* Blick in den Laden: laufende Galerie */
.galerie { padding: var(--abstand-l) 0; margin: 0; }
.galerie h2 { margin-bottom: var(--abstand-s); }
.galerie-lauf { overflow: hidden; display: flex; }
.galerie-spur { display: flex; gap: 12px; flex: none; padding-inline-end: 12px; animation: lauf 90s linear infinite; will-change: transform; }
.galerie-spur li { flex: none; height: 240px; }
.galerie-spur li picture, .galerie-spur li figure { display: block; height: 100%; }
.galerie-spur img { height: 100%; width: auto; max-width: none; display: block; object-fit: cover; }
@media (min-width: 800px) { .galerie-spur li { height: 320px; } .galerie { padding: var(--abstand-xl) 0; } }
@media (prefers-reduced-motion: reduce) {
  .galerie-lauf { display: block; }
  .galerie-spur { animation: none; flex-wrap: wrap; padding: 0 16px; }
  .galerie-spur[aria-hidden="true"] { display: none; }
}

/* Vorbestellen */
.schritte { display: grid; gap: var(--abstand-m); counter-reset: schritt; margin: var(--abstand-m) 0 var(--abstand-l); }
.schritte li { counter-increment: schritt; display: grid; grid-template-columns: 56px 1fr; gap: 16px; align-items: start; }
.schritte li::before {
  content: counter(schritt);
  display: grid; place-items: center; width: 56px; height: 56px;
  background: var(--leit-flaeche); color: var(--auf-leit);
  font-family: var(--schrift-display); font-size: 28px;
}
.schritte h3 { font-size: 22px; margin-bottom: 4px; text-transform: uppercase; letter-spacing: 0.03em; }
.feste { display: grid; gap: 12px; margin: var(--abstand-s) 0 var(--abstand-m); }
.fest { background: var(--grund); padding: 16px 18px; }
.fest h3 { font-size: 22px; text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 6px; }
.fest p { font-size: var(--groesse-klein); }
@media (min-width: 800px) { .feste { grid-template-columns: 1fr 1fr 1fr; } }

/* Inhaber */
.inhaber-innen { display: grid; gap: var(--abstand-l); align-items: center; }
.sprachen { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--abstand-m); }
.sprachen li { background: rgba(255,255,255,0.18); padding: 6px 12px; font-size: var(--groesse-klein); }
@media (min-width: 800px) { .inhaber-innen { grid-template-columns: 1fr 1fr; gap: var(--abstand-xl); } }

/* Anfahrt */
.standort { display: grid; gap: var(--abstand-l); }
.zeiten { border-collapse: collapse; width: 100%; max-width: 420px; }
.zeiten th, .zeiten td { text-align: start; padding: 8px 0; border-bottom: 1px solid var(--linie); }
.zeiten th { font-weight: 600; }
.zeiten td { text-align: end; }
.zeiten tr:last-child th, .zeiten tr:last-child td { border-bottom: 0; }
.anfahrt-liste { margin: var(--abstand-s) 0 var(--abstand-m); display: grid; gap: 12px; }
.anfahrt-liste li { display: grid; grid-template-columns: 28px 1fr; gap: 12px; }
.anfahrt-liste svg { width: 24px; height: 24px; color: var(--leit-text); margin-top: 3px; }
.adresse { font-style: normal; font-size: var(--groesse-vorspann); line-height: 1.4; margin-bottom: var(--abstand-s); }
@media (min-width: 800px) { .standort { grid-template-columns: 1fr 1fr; gap: var(--abstand-xl); } }

/* Karte mit Klick-Freigabe */
.karte { background: var(--grund); aspect-ratio: 4 / 3; display: grid; place-items: center; }
.karte-hinweis { padding: 20px; text-align: center; max-width: 28em; }
.karte-hinweis p { font-size: var(--groesse-klein); margin-bottom: var(--abstand-s); }
.karte--geladen { aspect-ratio: auto; display: block; }
.karte iframe { width: 100%; height: 100%; min-height: 360px; border: 0; display: block; }

/* Fuß */
.fuss { background: var(--leit-flaeche); color: var(--zettel); padding: var(--abstand-l) 0 calc(var(--abstand-l) + 72px); font-size: var(--groesse-klein); margin-top: 0; }
.fuss-innen { display: grid; gap: var(--abstand-m); }
.fuss img { width: 120px; height: 120px; background: var(--tafel); border-radius: 50%; }
.fuss a { color: var(--auf-schiene); }
.fuss strong { color: var(--auf-schiene); }
.fuss ul li { margin-bottom: 6px; }
@media (min-width: 800px) {
  .fuss { padding-bottom: var(--abstand-l); }
  .fuss-innen { grid-template-columns: auto 1fr 1fr 1fr; gap: var(--abstand-xl); }
}

/* Feste Leiste am Handy */
.leiste {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  display: grid; grid-template-columns: 1fr 1fr;
  background: var(--tafel);
  padding-bottom: env(safe-area-inset-bottom);
}
.leiste a {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 60px; text-decoration: none;
  font-family: var(--schrift-display); font-size: 20px; letter-spacing: 0.04em; text-transform: uppercase;
}
.leiste a svg { width: 24px; height: 24px; }
.leiste-whatsapp { background: var(--gruen); color: var(--auf-gruen); }
.leiste-anruf { background: var(--leit-flaeche); color: var(--auf-leit); }
@media (min-width: 800px) { .leiste { display: none; } }

/* Bewertungswidget (Vorenza) am Handy über die feste Leiste heben */
@media (max-width: 799px) {
  [data-vorenza-feedback] {
    position: fixed; top: 0; left: 0; right: 0;
    bottom: calc(60px + env(safe-area-inset-bottom));
    transform: translate(0, 0);
    pointer-events: none;
  }
}

/* Kontaktformular */
.kontakt-formular { display: grid; gap: var(--abstand-s); }
.kontakt-formular .feld { display: grid; gap: 6px; }
.kontakt-formular label { font-family: var(--schrift-display); font-size: 17px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-stark); }
.kontakt-formular input, .kontakt-formular textarea {
  width: 100%; min-height: 56px; padding: 12px 16px;
  border: 1px solid var(--rand); border-radius: var(--radius);
  background: var(--tafel); color: var(--text-stark); font: inherit;
}
.kontakt-formular textarea { resize: vertical; min-height: 160px; }
.kontakt-formular input:focus-visible, .kontakt-formular textarea:focus-visible { border-color: var(--leit-text); }
.kontakt-formular [aria-invalid="true"] { border-color: var(--leit-text); box-shadow: inset 0 0 0 1px var(--leit-text); }
.kontakt-formular p { margin: 0; }
.kontakt-formular .feld-hinweis { margin-top: -8px; }
.kontakt-formular .knopf { justify-self: start; }
.feld-paar { display: grid; gap: var(--abstand-s); }
@media (min-width: 560px) { .feld-paar { grid-template-columns: 1fr 1fr; } }
.feld-falle { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.kontakt-meldung { min-height: 1.6em; font-weight: 600; }
.kontakt-meldung--ok { color: var(--gruen); }
.kontakt-meldung--fehler { color: var(--leit-text); }

/* Rechtstexte */
.rechtstext main { padding: var(--abstand-xl) 0; max-width: 40em; }
.rechtstext h1 { margin-bottom: var(--abstand-m); color: var(--leit-text); }
.rechtstext h2 { font-size: var(--groesse-h3); margin: var(--abstand-l) 0 var(--abstand-s); color: var(--text-stark); }
.rechtstext h2 + p, .rechtstext h2 + ul { margin-top: 0; }
.hinweis { background: var(--zettel); padding: 16px; border: 1px dashed var(--rand); }

/* Handy-Feinschliff */
@media (max-width: 479px) {
  .knopf { width: 100%; }
  .buehne-aktionen .knopf { width: 100%; }
}
@media (max-width: 799px) {
  /* Die feste Leiste hat WhatsApp schon, der dritte Knopf der ersten Tafel entfällt am Handy */
  .buehne .buehne-aktionen .knopf--gruen { display: none; }
  /* Weiße Knöpfe auf weißen Tafeln (Metzgerei, Anfahrt) bekommen die Beige-Platte wie der Route-Knopf im Kopf */
  #metzgerei .knopf--dunkel, #anfahrt .buehne-aktionen .knopf--dunkel { background: var(--grund); border-color: var(--grund); }
}

/* Rechts nach links: Arabisch und Persisch */
[dir="rtl"] { --schrift-display: "Tahoma", "Geeza Pro", "Noto Naskh Arabic", "Segoe UI", sans-serif; --schrift-text: "Tahoma", "Geeza Pro", "Noto Naskh Arabic", "Segoe UI", sans-serif; }
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] .knopf, [dir="rtl"] .tafel-band, [dir="rtl"] .kopf-nav a, [dir="rtl"] .kopf-marke span, [dir="rtl"]   font-weight: 700; letter-spacing: 0; text-transform: none; .sorten li, [dir="rtl"] .leiste a, [dir="rtl"] .kopf-tel, [dir="rtl"] .kopf-route, [dir="rtl"] .schritte li::before, [dir="rtl"] .zettel-liste strong, [dir="rtl"] .fach h3, [dir="rtl"] .fest h3, [dir="rtl"] .schritte h3, [dir="rtl"] .kanal h3 {
}
[dir="rtl"] .kontakt-formular label { font-weight: 700; letter-spacing: 0; }
[dir="rtl"] h1 { font-size: clamp(26px, 3.6vw, 44px); line-height: 1.35; }
[dir="rtl"] h2 { font-size: clamp(24px, 3.4vw, 38px); line-height: 1.35; }
[dir="rtl"] h3 { font-size: 20px; line-height: 1.4; }
[dir="rtl"] .buehne h1 { font-size: clamp(24px, 2.8vw, 34px); }
[dir="rtl"] .knopf { font-size: 17px; }
[dir="rtl"] .tafel-band { font-size: 16px; }
[dir="rtl"] .kopf-nav a { font-size: 16px; }
[dir="rtl"] .kopf-marke span { font-size: 22px; }
[dir="rtl"] .lauf-spur, [dir="rtl"] .galerie-spur { animation-name: lauf-rtl; }
@keyframes lauf-rtl { from { transform: translateX(0); } to { transform: translateX(100%); } }
[dir="rtl"] .kopf-tel-nummer, [dir="rtl"] .fuss a[href^="tel"], [dir="rtl"] .zettel-liste strong { direction: ltr; unicode-bidi: isolate; }
[dir="rtl"] .knopf[href^="tel"] { direction: ltr; unicode-bidi: isolate; flex-direction: row-reverse; }

/* Cookie-Hinweis */
.cookie-hinweis {
  position: fixed; left: var(--abstand-s); right: var(--abstand-s); bottom: var(--abstand-s); z-index: 70;
  max-width: 560px; margin-inline: auto;
  background: var(--tafel); color: var(--text-stark);
  border-top: var(--schiene-staerke) solid var(--leit-flaeche);
  box-shadow: var(--schatten-weit);
  padding: var(--abstand-m);
  font-size: var(--groesse-klein); line-height: 1.5;
}
.cookie-hinweis p { margin: 0 0 var(--abstand-s); }
.cookie-hinweis a { color: var(--leit-text); }
.cookie-hinweis-knoepfe { display: flex; gap: var(--abstand-xs); justify-content: flex-end; flex-wrap: wrap; }
.cookie-hinweis .knopf { min-height: 48px; padding: 8px 20px; font-size: 18px; }
.knopf--rand { background: var(--tafel); color: var(--leit-text); border-color: var(--leit-flaeche); }
@media (max-width: 799px) {
  .cookie-hinweis { bottom: calc(60px + var(--abstand-s) + env(safe-area-inset-bottom)); }
}