/* ==========================================================================
   ALAFIA RESTAURANT — STYLESHEET
   Farbwelt und Typografie orientieren sich an der gedruckten Speisekarte.
   ========================================================================== */

/* ---------- Schriften (selbst gehostet, keine externen Aufrufe) ---------- */
@font-face {
  font-family: 'Oswald'; font-style: normal; font-display: swap;
  font-weight: 200 700;
  src: url('../fonts/oswald-latin-wght-normal.woff2') format('woff2-variations');
  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;
}
@font-face {
  font-family: 'Oswald'; font-style: normal; font-display: swap;
  font-weight: 200 700;
  src: url('../fonts/oswald-latin-ext-wght-normal.woff2') format('woff2-variations');
  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: 'Inter'; font-style: normal; font-display: swap;
  font-weight: 100 900;
  src: url('../fonts/inter-latin-wght-normal.woff2') format('woff2-variations');
  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;
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-display: swap;
  font-weight: 100 900;
  src: url('../fonts/inter-latin-ext-wght-normal.woff2') format('woff2-variations');
  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: 'Cairo'; font-style: normal; font-display: swap;
  font-weight: 200 900;
  src: url('../fonts/cairo-arabic-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC;
}

/* ---------------------------- Design-Tokens ----------------------------- */
:root {
  --cream-50:  #FEFAF0;
  --cream-100: #FAF2DE;
  --cream-150: #F6EACA;
  --cream-200: #F2E3B8;   /* identisch mit dem Hintergrund der Speisefotos */
  --cream-300: #E4D3A4;
  --cream-400: #CDB884;

  --red-400: #C8362F;
  --red-500: #B02420;
  --red-600: #A11A17;
  --red-700: #7E120F;
  --red-900: #4A0A08;

  --gold-500: #C08F2A;
  --gold-300: #E0BE6A;

  --green-600: #2E7D50;

  --ink:      #23201C;
  --ink-soft: #5E564C;
  --ink-mute: #8A8073;

  --shadow-sm: 0 1px 2px rgba(74,50,20,.06), 0 2px 6px rgba(74,50,20,.05);
  --shadow-md: 0 2px 6px rgba(74,50,20,.07), 0 10px 26px -8px rgba(74,50,20,.16);
  --shadow-lg: 0 8px 20px rgba(74,50,20,.10), 0 30px 60px -18px rgba(74,50,20,.28);

  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-xl: 30px;

  --font-display: 'Oswald', 'Inter', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --topbar-h: 66px;
  --catnav-h: 64px;

  /* Auf Laptopbreite bleibt die Karte kompakt, auf großen Monitoren darf
     sie bis 1440 px wachsen. So entsteht weder Enge noch eine leere Insel. */
  --wrap: clamp(75rem, 75vw, 90rem);
}

html[lang="ar"] {
  --font-display: 'Cairo', 'Oswald', system-ui, sans-serif;
  --font-body: 'Cairo', 'Inter', system-ui, sans-serif;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  overflow-x: clip;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  html.js .secban__txt, html.js .section .menu-list > .mrow,
  html.js .section .drinks > .drink, html.js .section .specials > .special {
    opacity: 1 !important; transform: none !important;
  }
  html.js .secban__img { transform: none !important; }
  html.js .secban__txt::before { transform: scaleX(1) !important; }
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  /* Ruhiger Untergrund: das Rautenmuster ist raus. Es erzeugte Unruhe
     hinter jedem Text, ohne etwas beizutragen – jetzt tragen die Fotos
     die Seite, nicht die Tapete. */
  background-color: var(--cream-50);
  overflow-wrap: break-word;
}

/* --------------------------- Licht über der Seite ------------------------
   Die Verläufe hingen vorher am Seitenanfang. Auf einer Speisekarte, die
   über zehn Bildschirmhöhen lang ist, hieß das: die ersten 700 Pixel haben
   Tiefe, der ganze Rest ist eine flache Cremefläche.

   Jetzt liegt das Licht FEST im Sichtfenster. Beim Scrollen wandert es
   über die Seite, statt oben zu kleben — dieselbe Wirkung wie in der
   Fußzeile, nur ins Helle übersetzt.

   Als feste Ebene und nicht über background-attachment: fixed — das ist
   auf iPhones unzuverlässig und bremst beim Scrollen. Eine eigene Ebene
   wird vom Browser als Bild behandelt und bleibt ruhig.                  */
body::before {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(72% 58% at 88% -6%,  rgba(224,190,106,.22), transparent 64%),
    radial-gradient(58% 52% at -8% 18%,  rgba(161,26,23,.07),   transparent 62%),
    radial-gradient(85% 55% at 45% 108%, rgba(224,190,106,.15), transparent 66%);
}

/* Dasselbe feine Rauschen wie unten. Auf hellen Flächen fallen Stufen
   sogar stärker auf als auf dunklen, weil das Auge dort empfindlicher
   ist — ohne diese Ebene bekäme die Seite genau die Streifen, die wir
   in der Fußzeile gerade beseitigt haben.                              */
body::after {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 160px 160px;
  opacity: .028;
}

img { max-width: 100%; height: auto; display: block; }
button { font: inherit; color: inherit; }

/* muss stärker sein als die Anzeige-Regeln der Komponenten */
[hidden] { display: none !important; }

/* Preise, Nummern und Uhrzeiten immer von links nach rechts lesen */
.price, .drink__size, .citem__price, .total-row b, .dish__num,
.variant b, .special__code, .hours li span:last-child, .legend code, .qty span {
  direction: ltr;
  unicode-bidi: isolate;
}
a { color: var(--red-600); text-decoration-thickness: 1px; text-underline-offset: 3px; }

:focus-visible {
  outline: 3px solid var(--red-500);
  outline-offset: 2px;
  border-radius: 4px;
}

.wrap { width: min(100% - 2rem, var(--wrap)); margin-inline: auto; }
@media (min-width: 700px) { .wrap { width: min(100% - 3rem, var(--wrap)); } }

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

.skip-link {
  position: absolute; inset-inline-start: 1rem; top: -60px; z-index: 200;
  background: var(--red-600); color: #fff; padding: .7rem 1.1rem;
  border-radius: 0 0 var(--r-sm) var(--r-sm); font-weight: 600; text-decoration: none;
  transition: top .18s;
}
.skip-link:focus { top: 0; }

/* ------------------------------ Buttons --------------------------------- */
.btn {
  --btn-bg: var(--red-600);
  --btn-fg: #fff;
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  padding: .78em 1.35em;
  border: 0; border-radius: 999px;
  background: var(--btn-bg); color: var(--btn-fg);
  font-family: var(--font-body); font-weight: 650; font-size: .95rem;
  letter-spacing: .01em; line-height: 1.15;
  text-decoration: none; cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: transform .16s ease, box-shadow .16s ease, background-color .16s ease;
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn:active { transform: translateY(0); }
.btn svg { width: 1.15em; height: 1.15em; flex: none; }

.btn--ghost {
  --btn-bg: transparent; --btn-fg: var(--red-700);
  border: 1.5px solid var(--red-600); box-shadow: none;
}
.btn--ghost:hover { --btn-bg: rgba(161,26,23,.08); }

.btn--cream {
  --btn-bg: var(--cream-50); --btn-fg: var(--ink);
  border: 1.5px solid var(--cream-300);
}
.btn--wa { --btn-bg: #167D43; }
.btn--wa:hover { --btn-bg: #116B38; }
.btn--dark { --btn-bg: var(--ink); }
.btn--lg { padding: .95em 1.7em; font-size: 1.02rem; }
.btn--sm { padding: .5em .95em; font-size: .85rem; }
.btn--block { width: 100%; }

/* ------------------------------ Topbar ---------------------------------- */
.topbar {
  position: sticky; top: 0; z-index: 60;
  height: calc(var(--topbar-h) + env(safe-area-inset-top));
  padding-block-start: env(safe-area-inset-top);
  background: rgba(250,242,222,.92);
  backdrop-filter: saturate(1.4) blur(12px);
  -webkit-backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid rgba(192,143,42,.42);
}
.topbar__inner { height: 100%; display: flex; align-items: center; gap: .75rem; }

.brand { display: flex; align-items: center; gap: .6rem; text-decoration: none; color: inherit; margin-inline-end: auto; min-width: 0; }
.brand img { height: 42px; width: auto; }
.brand__txt { display: flex; flex-direction: column; line-height: 1.05; min-width: 0; }
.brand__name {
  font-family: var(--font-display); font-weight: 600; font-size: 1.12rem;
  letter-spacing: .03em; color: var(--red-700); text-transform: uppercase;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.brand__ar { font-family: 'Cairo', sans-serif; font-size: .82rem; color: var(--ink-soft); }
@media (max-width: 560px) { .brand__txt { display: none; } }

.topbar__tools { display: flex; align-items: center; gap: .4rem; }

.iconbtn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 50%;
  border: 1.5px solid var(--cream-300); background: var(--cream-50);
  cursor: pointer; position: relative;
  transition: background-color .16s, border-color .16s, transform .16s;
}
.iconbtn:hover { background: #fff; border-color: var(--cream-400); transform: translateY(-1px); }
.iconbtn svg { width: 20px; height: 20px; }
.iconbtn--accent { background: var(--red-600); border-color: var(--red-600); color: #fff; }
.iconbtn--accent:hover { background: var(--red-500); border-color: var(--red-500); }

.cartbtn__count {
  position: absolute; top: -4px; inset-inline-end: -4px;
  min-width: 21px; height: 21px; padding: 0 5px;
  border-radius: 999px; background: var(--red-600); color: #fff;
  font-size: .72rem; font-weight: 700; line-height: 21px; text-align: center;
  border: 2px solid var(--cream-100);
  transform: scale(0); transition: transform .2s cubic-bezier(.34,1.56,.64,1);
}
.cartbtn__count.is-visible { transform: scale(1); }

/* Sprachumschalter */
.lang { position: relative; }
.lang__btn { display: inline-flex; align-items: center; gap: .35rem; width: auto; padding: 0 .75rem; border-radius: 999px; }
.lang__btn span { font-weight: 700; font-size: .85rem; letter-spacing: .04em; }
.lang__menu {
  position: absolute; top: calc(100% + 8px); inset-inline-end: 0; z-index: 70;
  min-width: 172px; padding: .35rem;
  background: var(--cream-50); border: 1px solid var(--cream-300);
  border-radius: var(--r-md); box-shadow: var(--shadow-lg);
  display: none;
}
.lang__menu.is-open { display: block; }
.lang__item {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  width: 100%; padding: .58rem .7rem; border: 0; border-radius: var(--r-sm);
  background: transparent; cursor: pointer; text-align: start; font-size: .93rem;
}
.lang__item:hover { background: var(--cream-150); }
.lang__item[aria-current="true"] { background: var(--red-600); color: #fff; font-weight: 650; }
.lang__item small { font-size: .74rem; letter-spacing: .08em; opacity: .65; font-weight: 700; }

/* -------------------------------- Hero ---------------------------------- */
/* Randloser Bild-Hero. Das Foto liegt darunter, ein dunkler Verlauf
   darüber – so ist die weiße Schrift überall lesbar, egal wie hell das
   Bild an der Stelle gerade ist. */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: min(78dvh, 660px);
  min-height: min(78svh, 660px);
  display: grid; align-items: end;
  padding: clamp(3rem, 8svh, 5rem) 0 clamp(2.25rem, 5svh, 3.5rem);
  margin-bottom: clamp(1.5rem, 4vw, 2.5rem);
}
.hero__media { position: absolute; inset: 0; z-index: -2; }
/* Die Fotos wirken auf dem Bildschirm etwas flau – eine Spur mehr
   Helligkeit und Sättigung macht das Essen appetitlicher, ohne dass es
   künstlich aussieht. */
.hero__media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  object-position: center 52%;
  filter: brightness(1.08) saturate(1.06);
}
@media (min-aspect-ratio: 21/9) {
  .hero__media img { object-position: center 56%; }
}
/* Zwei Verläufe: einer von unten für die Grundabdunklung, einer von der
   Textseite her. Ohne den zweiten läge die Überschrift je nach Foto über
   einer hellen Stelle und wäre kaum zu lesen. */
.hero::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to inline-end, rgba(18,11,5,.66) 0%, rgba(18,11,5,.34) 40%, rgba(18,11,5,0) 68%),
    linear-gradient(to top, rgba(18,11,5,.72) 0%, rgba(18,11,5,.3) 32%, rgba(18,11,5,.04) 60%, rgba(18,11,5,.28) 100%);
}
/* „to inline-end" kennen ältere Browser nicht – dort greift diese Fassung,
   die zwar nicht spiegelt, aber sicher funktioniert. */
@supports not (background: linear-gradient(to inline-end, #000, #fff)) {
  .hero::after {
    background:
      linear-gradient(to right, rgba(18,11,5,.66) 0%, rgba(18,11,5,.34) 40%, rgba(18,11,5,0) 68%),
      linear-gradient(to top, rgba(18,11,5,.72) 0%, rgba(18,11,5,.3) 32%, rgba(18,11,5,.04) 60%, rgba(18,11,5,.28) 100%);
  }
}
@media (max-width: 767px) {
  /* Auf dem Handy steht der Text mittig – dort wäre eine Seitenabdunklung
     unpassend, deshalb nur der Verlauf von unten, dafür kräftiger. */
  .hero::after {
    background: linear-gradient(to top, rgba(18,11,5,.82) 0%, rgba(18,11,5,.5) 42%, rgba(18,11,5,.18) 76%, rgba(18,11,5,.34) 100%);
  }
}
.hero__inner { position: relative; text-align: start; }
@media (max-width: 767px) { .hero__inner { text-align: center; } }

.hero__logo {
  width: min(170px, 38vw); margin: 0 0 1.25rem;
  box-sizing: content-box; object-fit: contain;
  padding: clamp(.6rem, 1.1vw, .78rem) clamp(.72rem, 1.35vw, .95rem);
  border: 1px solid rgba(224,190,106,.72);
  border-radius: 20px;
  background: linear-gradient(145deg, rgba(255,253,247,.96), rgba(250,242,222,.91));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    0 14px 38px rgba(12,7,3,.30);
  -webkit-backdrop-filter: blur(10px) saturate(1.15);
  backdrop-filter: blur(10px) saturate(1.15);
  filter: none;
}
@media (max-width: 767px) { .hero__logo { margin-inline: auto; } }

.hero__kicker {
  font-family: var(--font-display); font-weight: 500; font-size: clamp(.78rem, 1.4vw, .92rem);
  letter-spacing: .26em; text-transform: uppercase; color: var(--gold-300);
  margin: 0 0 .7rem;
}
html[lang="ar"] .hero__kicker { letter-spacing: 0; }

.hero h1 {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(2.6rem, 8.5vw, 5.5rem); line-height: .98;
  margin: 0 0 .85rem; color: #fff; text-transform: uppercase;
  letter-spacing: -.01em; text-wrap: balance;
  text-shadow: 0 2px 24px rgba(0,0,0,.45);
}
html[lang="ar"] .hero h1 { text-transform: none; line-height: 1.3; }

.hero__text {
  font-size: clamp(1.02rem, 1.7vw, 1.22rem); line-height: 1.55;
  color: rgba(255,255,255,.92); margin: 0 0 1.7rem; max-width: 46ch;
}
.hero__inner > .hero__text:last-child { margin-bottom: 0; }
@media (max-width: 767px) { .hero__text { margin-inline: auto; } }

.hero__actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-bottom: 1.6rem; }
@media (max-width: 767px) { .hero__actions { justify-content: center; } }
/* Auf dem Bild braucht der zweitrangige Knopf einen eigenen Untergrund –
   ein durchsichtiger Rahmen verschwindet je nach Bildstelle. */
.hero .btn--ghost {
  background: rgba(255,255,255,.14); color: #fff; border-color: rgba(255,255,255,.5);
  backdrop-filter: blur(6px);
}
.hero .btn--ghost:hover { background: rgba(255,255,255,.24); color: #fff; }

.badges { display: flex; flex-wrap: wrap; gap: .5rem; }
@media (max-width: 899px) { .badges { justify-content: center; } }
.badge {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .42rem .85rem; border-radius: 999px;
  background: var(--cream-50); border: 1px solid var(--cream-300);
  font-size: .82rem; font-weight: 600; color: var(--ink-soft);
  box-shadow: var(--shadow-sm);
}
.badge svg { width: 15px; height: 15px; color: var(--green-600); }
.badge--halal { color: var(--green-600); border-color: rgba(46,125,80,.3); background: rgba(46,125,80,.07); }

/* Auf dem dunklen Hero-Bild brauchen die Merkmale eigenen Kontrast. */
.hero .badges { justify-content: inherit; }
.hero .badge {
  background: rgba(255,255,255,.13); border-color: rgba(255,255,255,.32);
  color: #fff; box-shadow: none; backdrop-filter: blur(6px);
}
.hero .badge svg { color: #7BE0A4; }
.hero .badge--halal { color: #9BEDBD; background: rgba(46,125,80,.28); border-color: rgba(155,237,189,.4); }

/* Die alte gerahmte Bildfassung ist entfallen – das Foto liegt jetzt
   randlos hinter dem Hero (siehe oben). */


/* ---------------------------- Bewertungen -------------------------------- */
.rev {
  position: relative; overflow: hidden;
  margin: clamp(2rem, 5vw, 3.25rem) 0 0;
  padding: clamp(1.6rem, 4vw, 2.4rem) clamp(1.3rem, 4vw, 2.4rem);
  background: linear-gradient(160deg, #FFFDF8 0%, var(--cream-50) 55%, var(--cream-100) 100%);
  border: 1px solid var(--cream-300);
  border-radius: var(--r-xl); box-shadow: var(--shadow-md);
}
/* Warmer Lichtschein oben rechts – gibt dem Kasten Tiefe, ohne Bild. */
.rev__glow {
  position: absolute; inset-inline-end: -90px; top: -110px;
  width: 300px; height: 300px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(232,163,23,.16) 0%, rgba(232,163,23,0) 70%);
}
.rev > *:not(.rev__glow) { position: relative; }

.rev__top {
  display: flex; align-items: center; gap: clamp(1rem, 3vw, 2rem);
  flex-wrap: wrap; margin-bottom: 1.4rem;
}
.rev__intro { flex: 1 1 16rem; min-width: 0; }
.rev__title {
  margin: 0; font-family: var(--display, inherit); font-weight: 500;
  font-size: clamp(1.4rem, 3.4vw, 2rem); line-height: 1.15; color: var(--red-700);
}
.rev__lead { margin: .35rem 0 0; font-size: .92rem; line-height: 1.5; color: var(--ink-soft); }

/* Bewertungszahl als ruhige Einheit, nicht als loser Zahlenhaufen. */
.rev__score {
  flex: none; display: grid; grid-template-columns: auto auto; align-items: baseline;
  gap: 0 .3rem; padding: .9rem 1.2rem;
  background: #fff; border: 1px solid var(--cream-300); border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
}
.rev__num { font-size: 2.5rem; font-weight: 800; line-height: 1; color: var(--ink); }
.rev__of { font-size: .95rem; font-weight: 600; color: var(--ink-mute); }
.rev__score .stars { grid-column: 1 / -1; margin-top: .35rem; }
.rev__count { grid-column: 1 / -1; margin-top: .2rem; font-size: .78rem; color: var(--ink-soft); }

.stars { display: inline-flex; gap: 2px; }
.star { color: var(--cream-400); font-size: 1.1rem; line-height: 1; }
.star.is-full { color: #E8A317; }
/* Halber Stern: linke Hälfte gefüllt – hängt am Text, nicht an der Seite,
   deshalb stimmt es auch bei arabischer Leserichtung. */
.star.is-half {
  background: linear-gradient(90deg, #E8A317 50%, var(--cream-400) 50%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

.rev__list {
  display: grid; gap: .9rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
}
.rev__card {
  position: relative; margin: 0; padding: 1.15rem 1.2rem 1.1rem;
  background: #fff; border: 1px solid var(--cream-300); border-radius: var(--r-lg);
  display: flex; flex-direction: column; gap: .55rem;
  box-shadow: var(--shadow-sm);
}
.rev__quote {
  position: absolute; inset-inline-end: .8rem; top: .1rem;
  font-family: Georgia, serif; font-size: 3rem; line-height: 1;
  color: var(--cream-300); pointer-events: none;
}
.rev__card blockquote {
  margin: 0; font-size: .92rem; line-height: 1.6; color: var(--ink);
}
.rev__card figcaption {
  margin-top: auto; padding-top: .5rem; border-top: 1px solid var(--cream-200);
  display: flex; gap: .5rem; flex-wrap: wrap; align-items: baseline;
}
.rev__who { font-size: .82rem; font-weight: 700; color: var(--ink); }
.rev__when { font-size: .76rem; color: var(--ink-mute); }

.rev__foot {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-top: 1.4rem;
}
.rev__src { font-size: .76rem; color: var(--ink-mute); }
.rev__cta {
  background: #fff; color: var(--ink); border: 1.5px solid var(--cream-400);
  display: inline-flex; align-items: center; gap: .6rem;
}
.rev__cta:hover { background: var(--cream-50); border-color: var(--ink-mute); color: var(--ink); }
.gmark { width: 19px; height: 19px; flex: none; }

/* --- Einladung: wenn (noch) keine Sterne da sind ------------------------- */
.rev--invite { text-align: center; }
.rev__invite {
  display: flex; flex-direction: column; align-items: center; gap: .5rem;
  max-width: 34rem; margin: 0 auto;
}
.rev__bigstars {
  font-size: clamp(1.5rem, 4vw, 2rem); letter-spacing: .28em;
  color: #E8A317; text-indent: .28em;   /* gleicht den Abstand rechts aus */
}
.rev--invite .rev__lead { margin: 0 0 .6rem; font-size: 1rem; }
.rev--invite .rev__src { margin-top: .1rem; }

/* ---------------------------- Kombi-Angebote ----------------------------- */
#cat-kombi { padding-top: clamp(1.3rem, 2.5vw, 2rem); }
.setgrid-web {
  display: grid; gap: 1rem; justify-content: center;
  max-inline-size: 72rem; margin-inline: auto;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 35.5rem));
}
.setcard {
  display: flex; flex-direction: column; gap: .55rem;
  padding: 1.1rem 1.2rem 1rem;
  background: var(--cream-50); border: 1px solid var(--cream-300);
  border-radius: var(--r-lg); box-shadow: var(--shadow-sm);
}
.setcard__head { display: flex; align-items: flex-start; gap: .6rem; }
.setcard__name {
  margin: 0; font-family: var(--display, inherit); font-weight: 600;
  font-size: 1.15rem; line-height: 1.25; color: var(--red-700); flex: 1;
}
.setcard__save {
  flex: none; padding: .2rem .6rem; border-radius: 999px;
  background: #E7F4EC; color: #1D6B44; border: 1px solid #C6E4D3;
  font-size: .76rem; font-weight: 800; white-space: nowrap;
}
.setcard__desc { margin: 0; font-size: .88rem; color: var(--ink-soft); line-height: 1.5; }
.setcard__list {
  list-style: none; margin: 0; padding: .6rem 0 0; display: grid; gap: .3rem;
  border-top: 1px dashed var(--cream-400);
}
.setcard__list li { display: flex; gap: .45rem; font-size: .9rem; align-items: baseline; }
.setcard__list em { font-style: normal; color: var(--ink-mute); }
.setcard__qty { font-weight: 800; color: var(--red-600); flex: none; min-width: 1.6rem; }
.setcard__foot {
  margin-top: auto; padding-top: .7rem;
  display: flex; align-items: center; justify-content: space-between; gap: .8rem;
}
.setcard__price { font-size: 1.2rem; font-weight: 800; color: var(--ink); }
.setcard__price s { font-size: .85rem; font-weight: 500; color: var(--ink-mute); margin-inline-start: .35rem; }
.setcard__add { min-block-size: 44px; flex: none; }
.setcard__add.is-added {
  background: var(--green-600); border-color: var(--green-600); color: #fff;
}

/* --------------------------- Kategorie-Navi ------------------------------ */
.catnav {
  position: sticky; top: calc(var(--topbar-h) + env(safe-area-inset-top)); z-index: 50;
  background: rgba(250,242,222,.94);
  backdrop-filter: saturate(1.4) blur(10px);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
  border-block: 1px solid var(--cream-300);
}
.catnav__scroll {
  display: flex; gap: .45rem; overflow-x: auto; padding: .6rem 0;
  scrollbar-width: none; -ms-overflow-style: none; scroll-behavior: smooth;
}
.catnav__scroll::-webkit-scrollbar { display: none; }
.catnav__scroll .chip[hidden] { display: none; }
.chip {
  flex: none; display: inline-flex; align-items: center; gap: .45rem;
  min-block-size: 44px; padding: .5rem 1rem; border-radius: 999px;
  background: var(--cream-50); border: 1.5px solid var(--cream-300);
  color: var(--ink-soft); font-size: .89rem; font-weight: 600;
  white-space: nowrap; cursor: pointer; text-decoration: none;
  transition: background-color .16s, color .16s, border-color .16s;
}
.chip:hover { border-color: var(--red-400); color: var(--red-700); }
.chip.is-active { background: var(--red-600); border-color: var(--red-600); color: #fff; }
.chip--offer { background: var(--gold-300); border-color: var(--gold-500); color: var(--red-900); font-weight: 700; }
.chip--offer.is-active { background: var(--red-600); border-color: var(--red-600); color: #fff; }
.chip img { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; background: var(--cream-200); }
.chip__kurz { display: none; }

/* iPad und Desktop: alle Kategorien sind ohne seitliches Scrollen sichtbar.
   Flache Handy-Querformate behalten dagegen bewusst die Wischleiste. */
@media (min-width: 1200px), (min-width: 720px) and (min-height: 600px) {
  .catnav__scroll {
    display: grid;
    grid-template-columns: repeat(var(--catnav-cols), minmax(0, 1fr));
    grid-auto-flow: row; grid-auto-rows: 1fr;
    overflow-x: visible; overflow-y: visible;
    scroll-behavior: auto;
  }
  .chip {
    min-inline-size: 0; inline-size: 100%; min-block-size: 48px;
    justify-content: center; gap: 0; padding: .35rem .28rem; border-radius: 12px;
    text-align: center; white-space: normal; line-height: 1.2; font-size: .75rem;
  }
  .chip span { min-inline-size: 0; overflow-wrap: anywhere; hyphens: auto; -webkit-hyphens: auto; }
  .chip__voll { display: none; }
  .chip__kurz { display: inline; }
  /* Das Bild gehoert auch auf dem iPad dazu. NEBEN den Namen passt es nicht:
     bei 17 Kategorien bleiben je Chip nur rund 63 px Innenbreite, und allein
     „Hauptspeisen" braucht bei dieser Schriftgroesse 80 px. Darum steht das
     Bild OBEN und der Name darunter — der Name behaelt seine volle Breite.
     flex: none ist Pflicht: ohne das quetscht die schmale Rasterzelle das
     runde Bild zu einem Streifen zusammen. */
  .chip--bild { flex-direction: column; gap: .2rem; padding-block: .3rem; }
  .chip img { display: block; width: 22px; height: 22px; flex: none; }
}

/* Auf breiten Rechnern ist genug Platz für die vollen Namen und Bilder. */
@media (min-width: 1200px) {
  /* Ab hier ist Platz fuer die vollen Namen; das Bild rueckt wieder neben
     den Text. flex-direction MUSS zurueckgesetzt werden, sonst wirkt die
     Spalten-Regel aus dem iPad-Block weiter (beide Bloecke greifen hier). */
  .chip { gap: .45rem; padding: .45rem .5rem; border-radius: 14px; font-size: .82rem; }
  .chip--bild { flex-direction: row; gap: .45rem; padding-block: .45rem; }
  .chip__voll { display: inline; }
  .chip__kurz { display: none; }
  .chip img { display: block; width: 20px; height: 20px; flex: none; }
}

/* ------------------------------ Toolbar --------------------------------- */
.toolbar { padding: 1.4rem 0 .35rem; }
.toolbar__row { display: flex; flex-wrap: wrap; gap: .7rem; align-items: center; }

.search { position: relative; flex: 1 1 260px; min-width: 0; }
.search svg {
  position: absolute; inset-inline-start: 14px; top: 50%; transform: translateY(-50%);
  width: 19px; height: 19px; color: var(--ink-mute); pointer-events: none;
}
.search input {
  width: 100%; padding: .82rem 1rem .82rem 2.85rem;
  padding-inline-end: 3rem;
  font: inherit; font-size: .97rem; color: var(--ink);
  background: var(--cream-50); border: 1.5px solid var(--cream-300);
  border-radius: 999px; transition: border-color .16s, box-shadow .16s;
}
html[dir="rtl"] .search input { padding: .82rem 2.85rem .82rem 3rem; }
.search input::placeholder { color: var(--ink-mute); }
.search input:focus { outline: none; border-color: var(--red-500); box-shadow: 0 0 0 4px rgba(176,36,32,.13); }
.search__clear {
  position: absolute; inset-inline-end: 8px; top: 50%; transform: translateY(-50%);
  width: 30px; height: 30px; border-radius: 50%; border: 0; background: var(--cream-200);
  cursor: pointer; display: none; align-items: center; justify-content: center;
}
.search__clear.is-visible { display: flex; }
.search__clear svg { position: static; transform: none; width: 14px; height: 14px; color: var(--ink-soft); }

.toolbar__filters { display: flex; gap: .45rem; flex-wrap: wrap; }
.filter {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .55rem 1rem; border-radius: 999px; cursor: pointer;
  background: var(--cream-50); border: 1.5px solid var(--cream-300);
  font-size: .88rem; font-weight: 600; color: var(--ink-soft);
  transition: background-color .16s, color .16s, border-color .16s;
}
.filter:hover { border-color: var(--green-600); }
.filter.is-active { background: var(--green-600); border-color: var(--green-600); color: #fff; }
.filter svg { width: 15px; height: 15px; }

.toolbar__meta { font-size: .87rem; color: var(--ink-mute); padding: .55rem 0 0; }

/* ------------------------------ Sektionen -------------------------------- */
/* Deutlich mehr Luft: die Seite soll atmen, nicht gedrängt wirken. */
.section { padding-block: clamp(3rem, 7vw, 5.5rem); scroll-margin-top: calc(var(--topbar-h) + var(--catnav-h) + env(safe-area-inset-top) + 8px); }
.section + .section { padding-top: 0; }

#menu, #sections, #kontakt {
  scroll-margin-top: calc(var(--topbar-h) + var(--catnav-h) + env(safe-area-inset-top) + 10px);
}

/* --------------------------- Lieferband (Hero) --------------------------- */
.delband {
  margin-top: 1rem; display: grid; gap: .9rem; grid-template-columns: 1fr;
}
@media (min-width: 1100px) { .delband:has(.delband__ext) { grid-template-columns: 1.55fr 1fr; } }

.delband__own {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  padding: 1.05rem 1.25rem; border-radius: var(--r-lg);
  background: var(--cream-50); border: 1px solid var(--cream-300);
  box-shadow: var(--shadow-sm);
}
.delband__icon {
  width: 50px; height: 50px; flex: none; border-radius: 50%;
  background: var(--red-600); color: #fff; display: grid; place-items: center;
}
.delband__icon svg { width: 27px; height: 27px; }
.delband__body { flex: 1 1 230px; min-width: 0; }
.delband__body strong {
  display: block; font-family: var(--font-display); font-weight: 500;
  font-size: 1.2rem; color: var(--red-700);
}
.delband__body p { margin: .1rem 0 0; font-size: .87rem; color: var(--ink-soft); }
.delband__facts { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .55rem; }
.delband__facts span {
  font-size: .76rem; font-weight: 650; color: var(--ink-soft);
  background: var(--cream-150); border-radius: 999px; padding: .18rem .6rem;
}

.delband__ext {
  display: flex; align-items: center; gap: .55rem; flex-wrap: wrap;
  padding: 1.05rem 1.25rem; border-radius: var(--r-lg);
  background: rgba(255,255,255,.55); border: 1px dashed var(--cream-400);
}
.delband__label {
  width: 100%; font-size: .74rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-mute); margin-bottom: .15rem;
}
html[lang="ar"] .delband__label { letter-spacing: 0; text-transform: none; }

.dbtn {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .6rem 1.1rem; border-radius: 999px;
  font-weight: 700; font-size: .92rem; color: #fff; text-decoration: none;
  box-shadow: var(--shadow-sm); transition: transform .16s, box-shadow .16s, filter .16s;
}
.dbtn:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); filter: brightness(1.06); }
.dbtn svg { width: 19px; height: 19px; flex: none; }
.dbtn--lieferando { background: #FF8000; }
.dbtn--wolt { background: #00A8CC; }
/* Uber-Eats-Grün ist so hell, dass weiße Schrift darauf kaum lesbar wäre
   (Kontrast 2,4:1). Mit Schwarz sind es 8,9:1 – und so hält es Uber selbst. */
.dbtn--uber { background: #06C167; color: #101010; }

/* ------------------------------- Angebote -------------------------------- */
.offerband {
  position: relative; overflow: hidden;
  border-radius: var(--r-xl); margin-bottom: 1.5rem;
  padding: 1.4rem 1.6rem 1.5rem;
  background: linear-gradient(115deg, var(--red-700) 0%, var(--red-600) 45%, #C23A28 100%);
  box-shadow: var(--shadow-lg); color: #fff;
}
.offerband::before {
  content: ''; position: absolute; inset: 0; opacity: .16; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cg fill='none' stroke='%23FFE9B0' stroke-width='1'%3E%3Cpath d='M36 6l7.8 13.5H28.2L36 6zM36 66l-7.8-13.5h15.6L36 66zM6 36l13.5-7.8v15.6L6 36zM66 36l-13.5 7.8V28.2L66 36z'/%3E%3Ccircle cx='36' cy='36' r='11'/%3E%3C/g%3E%3C/svg%3E");
}
.offerband__txt { position: relative; }
.offerband__kicker {
  display: inline-grid; place-items: center; width: 42px; height: 42px;
  border-radius: 50%; background: var(--gold-300); color: var(--red-900);
  font-family: var(--font-display); font-weight: 600; font-size: 1.4rem;
  margin-bottom: .6rem;
}
.offerband__title {
  font-family: var(--font-display); font-weight: 600; text-transform: uppercase;
  font-size: clamp(1.6rem, 4.6vw, 2.6rem); line-height: 1.05; margin: 0;
  letter-spacing: .015em;
}
html[lang="ar"] .offerband__title { text-transform: none; }
.offerband__sub { margin: .25rem 0 0; color: var(--gold-300); font-size: .98rem; }

.tag--offer { background: var(--red-600); color: #fff; }

.mrow__price--offer { display: inline-flex; align-items: baseline; gap: .4rem; }
.mrow__price--offer s {
  font-family: var(--font-body); font-size: .82rem; font-weight: 600;
  color: var(--ink-mute); text-decoration-thickness: 1.5px;
}
.mrow__price--offer b { font-weight: 600; color: var(--red-600); }

/* --------------------------- Kategorie-Banner ---------------------------- */
.secban {
  position: relative; display: flex; align-items: flex-end;
  height: clamp(300px, 40vw, 540px);
  border-radius: var(--r-xl); overflow: hidden;
  margin-bottom: clamp(1.75rem, 3.5vw, 2.5rem); background: var(--cream-200);
  box-shadow: var(--shadow-lg);
}
.secban__img {
  position: absolute; inset: 0; z-index: 0;
  filter: brightness(1.06) saturate(1.05);
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.09);
  transition: transform 1.2s cubic-bezier(.22,.61,.36,1);
}
html.js .secban.is-in .secban__img { transform: scale(1); }
html.js .secban:hover .secban__img { transform: scale(1.06); transition-duration: 2.2s; }
.secban::after {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(to top,
      rgba(26,9,6,.8) 0%, rgba(26,9,6,.52) 28%, rgba(26,9,6,.12) 58%, rgba(26,9,6,0) 100%),
    linear-gradient(to right,
      rgba(26,9,6,.6) 0%, rgba(26,9,6,.18) 42%, rgba(26,9,6,0) 70%);
}
html[dir="rtl"] .secban::after {
  background:
    linear-gradient(to top,
      rgba(26,9,6,.94) 0%, rgba(26,9,6,.78) 26%, rgba(26,9,6,.34) 58%, rgba(26,9,6,.04) 100%),
    linear-gradient(to left,
      rgba(26,9,6,.78) 0%, rgba(26,9,6,.34) 40%, rgba(26,9,6,0) 72%);
}
/* Auf schmalen Bildschirmen weniger Abdunklung, sonst verschwindet das Foto */
@media (max-width: 760px) {
  .secban::after, html[dir="rtl"] .secban::after {
    background: linear-gradient(to top,
      rgba(26,9,6,.93) 0%, rgba(26,9,6,.62) 42%, rgba(26,9,6,.14) 76%, rgba(26,9,6,0) 100%);
  }
}

.secban__txt {
  position: relative; z-index: 2;
  padding: 1.5rem 1.75rem 1.7rem; color: #fff;
}
.secban__txt::before {
  content: ''; display: block; width: 52px; height: 3px; border-radius: 2px;
  background: var(--red-500); margin-bottom: .7rem;
  transform-origin: left center; transition: transform .6s .25s ease-out;
}
html[dir="rtl"] .secban__txt::before { transform-origin: right center; }
html.js .secban__txt { opacity: 0; transform: translateY(22px); }
html.js .secban.is-in .secban__txt {
  opacity: 1; transform: none;
  transition: opacity .75s .1s ease-out, transform .75s .1s cubic-bezier(.22,.61,.36,1);
}
html.js .secban__txt::before { transform: scaleX(0); }
html.js .secban.is-in .secban__txt::before { transform: scaleX(1); }
.secban__title {
  font-family: var(--font-display); font-weight: 600; text-transform: uppercase;
  font-size: clamp(1.85rem, 5.2vw, 3.25rem); line-height: 1.02; letter-spacing: .015em;
  margin: 0; text-shadow: 0 2px 24px rgba(0,0,0,.5);
}
html[lang="ar"] .secban__title { text-transform: none; line-height: 1.3; }
.secban__ar {
  font-family: 'Cairo', sans-serif; color: var(--gold-300);
  margin: .3rem 0 0; font-size: clamp(1.05rem, 1.9vw, 1.4rem);
  text-shadow: 0 1px 14px rgba(0,0,0,.55);
}
.secban__count {
  display: inline-block; margin-top: .45rem;
  font-size: .74rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
  color: rgba(255,255,255,.72);
}
html[lang="ar"] .secban__count { letter-spacing: 0; text-transform: none; }

/* Kategorien ohne Bild (Getränke) */
.sechead { margin-bottom: 1.2rem; }
.sechead__title {
  font-family: var(--font-display); font-weight: 600; text-transform: uppercase;
  font-size: clamp(1.5rem, 4vw, 2.15rem); line-height: 1.1; letter-spacing: .01em;
  color: var(--red-700); margin: 0;
}
html[lang="ar"] .sechead__title { text-transform: none; }
.section__swash {
  display: block; width: clamp(110px, 22vw, 190px); height: 11px;
  margin-top: .3rem; color: var(--red-600);
}
.sechead .section__swash { margin-top: .25rem; }
.sechead__ar, .secban__txt .sechead__ar { color: var(--gold-500); }
.sechead .secban__ar { color: var(--gold-500); text-shadow: none; margin-top: .3rem; }

.section__lead { color: var(--ink-soft); font-size: .95rem; margin: -.6rem 0 1.1rem; }

.section__note {
  margin: 0 0 1.15rem; padding: .8rem 1.05rem;
  background: rgba(192,143,42,.1); border-inline-start: 3px solid var(--gold-500);
  border-radius: var(--r-sm); font-size: .9rem; color: var(--ink-soft);
}

/* ------------------------------ Gerichtliste ----------------------------- */
.menu-list { display: grid; gap: 0 3rem; grid-template-columns: 1fr; }
@media (min-width: 960px)  { .menu-list { grid-template-columns: 1fr 1fr; gap-inline: 2rem; } }
@media (min-width: 1200px) { .menu-list { gap-inline: 3rem; } }
@media (min-width: 1300px) { .menu-list { gap: 0 3.5rem; } }

html.js .section .menu-list > .mrow,
html.js .section .drinks > .drink,
html.js .section .specials > .special { opacity: 0; transform: translateY(14px); }
html.js .section.is-in .menu-list > .mrow,
html.js .section.is-in .drinks > .drink,
html.js .section.is-in .specials > .special {
  opacity: 1; transform: none;
  transition: opacity .5s ease-out, transform .5s cubic-bezier(.22,.61,.36,1);
}
html.js .section.is-in .menu-list > .mrow:nth-child(2)  { transition-delay: .04s; }
html.js .section.is-in .menu-list > .mrow:nth-child(3)  { transition-delay: .08s; }
html.js .section.is-in .menu-list > .mrow:nth-child(4)  { transition-delay: .12s; }
html.js .section.is-in .menu-list > .mrow:nth-child(5)  { transition-delay: .16s; }
html.js .section.is-in .menu-list > .mrow:nth-child(6)  { transition-delay: .2s; }
html.js .section.is-in .specials > .special:nth-child(2) { transition-delay: .08s; }
html.js .section.is-in .specials > .special:nth-child(3) { transition-delay: .16s; }
html.js .section.is-in .specials > .special:nth-child(4) { transition-delay: .24s; }

.mrow {
  padding: 1.15rem .7rem; margin-inline: -.7rem;
  border-bottom: 1px solid var(--cream-200);
  border-radius: var(--r-sm);
  transition: background-color .15s ease;
}
.mrow:hover { background: rgba(255, 252, 245, .72); }

.mrow__head { display: flex; align-items: baseline; gap: .45rem; }
.mrow__no {
  flex: none; min-width: 1.85em;
  font-family: var(--font-display); font-weight: 500; font-size: .92rem;
  color: var(--red-500); font-variant-numeric: tabular-nums;
}
.mrow__name {
  font-family: var(--font-display); font-weight: 500; font-size: 1.16rem;
  line-height: 1.25; letter-spacing: .005em; color: var(--ink); margin: 0;
  min-width: 0; overflow-wrap: anywhere;
}
html[lang="ar"] .mrow__name { font-weight: 600; font-size: 1.08rem; }
.mrow__lead {
  flex: 1 1 1.5rem; min-width: 1.2rem; align-self: center;
  border-bottom: 1px dotted var(--cream-400); transform: translateY(.15em);
}
.mrow__price {
  flex: none; font-family: var(--font-display); font-weight: 600; font-size: 1.14rem;
  color: var(--red-700); white-space: nowrap;
}
.mrow__price--req { font-family: var(--font-body); font-size: .88rem; font-weight: 650; color: var(--gold-500); }

.mrow__add {
  flex: none; width: 31px; height: 31px; border-radius: 50%;
  border: 1.5px solid var(--red-600); background: transparent; color: var(--red-600);
  display: grid; place-items: center; cursor: pointer; align-self: center;
  transition: background-color .15s, color .15s, transform .15s;
}
.mrow__add:hover { background: var(--red-600); color: #fff; transform: scale(1.08); }
.mrow__add svg { width: 16px; height: 16px; }
.mrow__add.is-added { background: var(--green-600); border-color: var(--green-600); color: #fff; }

.mrow__desc {
  margin: .18rem 0 0; padding-inline-start: 2.3rem;
  font-size: .875rem; line-height: 1.5; color: var(--ink-soft);
}
.mrow__tags {
  display: flex; flex-wrap: wrap; gap: .28rem; align-items: center;
  margin-top: .38rem; padding-inline-start: 2.3rem;
}
.mrow__variants {
  display: flex; flex-wrap: wrap; gap: .4rem;
  margin-top: .5rem; padding-inline-start: 2.3rem;
}

.mrow--paused { opacity: .6; }
.mrow--paused .mrow__name { text-decoration: line-through; color: var(--ink-mute); }
.mrow--paused .mrow__price { color: var(--ink-mute); }

/* ---------------------- Kennzeichnungen am Gericht ----------------------- */
.tag {
  display: inline-flex; align-items: center; gap: .25rem;
  padding: .15rem .5rem; border-radius: 999px;
  font-size: .7rem; font-weight: 650; letter-spacing: .02em; line-height: 1.5;
}
.tag svg { width: 11px; height: 11px; flex: none; }
.tag--veg { background: rgba(46,125,80,.12); color: var(--green-600); }
.tag--hot { background: rgba(176,36,32,.11); color: var(--red-600); }
.tag--allergen {
  background: var(--cream-150); color: var(--ink-mute);
  border: 1px solid var(--cream-300); cursor: help;
  font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: isolate;
}
body.hide-allergens .tag--allergen { display: none; }

/* --------------------------- Größenauswahl ------------------------------- */
.variant {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .3rem .45rem .3rem .7rem; border-radius: 999px;
  background: var(--cream-150); border: 1px solid var(--cream-300);
  font-size: .82rem; font-weight: 600; color: var(--ink-soft); cursor: pointer;
  transition: border-color .16s, background-color .16s;
}
.variant:hover { border-color: var(--red-500); background: var(--cream-50); }
.variant b { font-family: var(--font-display); font-weight: 600; color: var(--red-700); font-size: .95rem; }
.variant span.plus {
  width: 20px; height: 20px; border-radius: 50%; background: var(--red-600); color: #fff;
  display: grid; place-items: center; font-size: 14px; line-height: 1;
}

/* ---------------------------- Spezialitäten ------------------------------ */
.specials { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 700px)  { .specials { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px)  { .specials { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1200px) { .specials { grid-template-columns: repeat(4, 1fr); } }

.special {
  position: relative; overflow: hidden;
  border-radius: var(--r-lg);
  background: linear-gradient(178deg, var(--cream-50), var(--cream-150));
  border: 1px solid var(--cream-300); box-shadow: var(--shadow-md);
  display: flex; flex-direction: column;
}
.special__img { width: 100%; aspect-ratio: 4/3; object-fit: cover; background: var(--cream-200); }
.special__noimg { width: 100%; aspect-ratio: 4/3; background: var(--cream-200); display: grid; place-items: center; }
.special__noimg svg { width: 54px; height: 54px; color: var(--cream-400); }
.special__body { padding: 1rem 1.05rem 1.15rem; flex: 1; display: flex; flex-direction: column; }
.special__code {
  position: absolute; top: .8rem; inset-inline-start: .8rem;
  background: var(--red-600); color: #fff; border-radius: 999px;
  font-family: var(--font-display); font-weight: 600; font-size: .82rem;
  padding: .18rem .68rem; letter-spacing: .06em; box-shadow: var(--shadow-sm);
}
.special__name { font-family: var(--font-display); font-weight: 600; font-size: 1.35rem; margin: 0; color: var(--red-700); }
.special__ar { font-family: 'Cairo', sans-serif; font-size: 1.02rem; color: var(--gold-500); margin: 0 0 .35rem; }
html[lang="ar"] .special__ar { display: none; }
.special__desc { font-size: .89rem; color: var(--ink-soft); margin: 0 0 .8rem; flex: 1; }
.special__meta { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; }
.pill {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .25rem .65rem; border-radius: 999px;
  background: var(--cream-200); color: var(--ink-soft);
  font-size: .77rem; font-weight: 600;
}
.pill--request { background: rgba(192,143,42,.16); color: #8A6512; }

/* ------------------------------ Getränke --------------------------------- */
.drinks {
  display: grid; gap: .1rem 2.5rem; grid-template-columns: 1fr;
  background: var(--cream-50); border: 1px solid var(--cream-300);
  border-radius: var(--r-lg); padding: .6rem 1.15rem; box-shadow: var(--shadow-sm);
}
@media (min-width: 760px) { .drinks { grid-template-columns: 1fr 1fr; } }
.drink {
  display: flex; align-items: center; gap: .7rem;
  padding: .68rem .1rem; border-bottom: 1px dashed var(--cream-300);
}
.drink:last-child, .drinks > .drink:nth-last-child(2):nth-child(odd) { border-bottom: 0; }
.drink__name { font-family: var(--font-display); font-weight: 500; font-size: 1.06rem; }
.drink__size { font-size: .82rem; color: var(--ink-mute); font-variant-numeric: tabular-nums; }
.drink__dots { flex: 1; border-bottom: 1px dotted var(--cream-400); height: .7em; }
.drink .price { font-size: 1.05rem; }
.addbtn {
  flex: none; width: 31px; height: 31px; border-radius: 50%;
  border: 1.5px solid var(--red-600); background: transparent; color: var(--red-600);
  display: grid; place-items: center; cursor: pointer;
  transition: background-color .15s, color .15s, transform .15s;
}
.addbtn:hover { background: var(--red-600); color: #fff; transform: scale(1.08); }
.addbtn.is-added { background: var(--green-600); border-color: var(--green-600); color: #fff; }
.drink .addbtn { width: 32px; height: 32px; }
.drink .addbtn svg { width: 15px; height: 15px; }

/* ---------------------------- Keine Treffer ------------------------------ */
.empty { text-align: center; padding: 3.5rem 1rem; display: none; }
.empty.is-visible { display: block; }
.empty svg { width: 60px; height: 60px; color: var(--cream-400); margin-inline: auto; }
.empty h3 { font-family: var(--font-display); font-weight: 500; font-size: 1.4rem; margin: .8rem 0 .3rem; }
.empty p { color: var(--ink-soft); margin: 0 0 1.1rem; }

/* ------------------------------ Allergene -------------------------------- */
.info-section { padding-block: clamp(2.25rem, 5vw, 3.5rem); scroll-margin-top: calc(var(--topbar-h) + var(--catnav-h) + 8px); }
.panel {
  background: var(--cream-50); border: 1px solid var(--cream-300);
  border-radius: var(--r-lg); box-shadow: var(--shadow-sm); overflow: hidden;
}
.panel > summary {
  list-style: none; cursor: pointer; padding: 1.1rem 1.25rem;
  display: flex; align-items: center; gap: .75rem;
  font-family: var(--font-display); font-weight: 500; font-size: 1.25rem; color: var(--red-700);
}
.panel > summary::-webkit-details-marker { display: none; }
.panel > summary::after {
  content: ''; inset-inline-start: auto; margin-inline-start: auto;
  width: 11px; height: 11px; border-inline-end: 2px solid var(--red-600); border-block-end: 2px solid var(--red-600);
  transform: rotate(45deg); transition: transform .2s; flex: none;
}
.panel[open] > summary::after { transform: rotate(-135deg); }
.panel > summary svg { width: 22px; height: 22px; color: var(--gold-500); flex: none; }
.panel__body { padding: 0 1.25rem 1.35rem; }

.legend-grid { display: grid; gap: 1.5rem; grid-template-columns: 1fr; }
@media (min-width: 800px) { .legend-grid { grid-template-columns: repeat(3, 1fr); } }
.legend h4 {
  font-family: var(--font-display); font-weight: 500; font-size: .95rem;
  text-transform: uppercase; letter-spacing: .12em; color: var(--ink-mute);
  margin: 0 0 .6rem; padding-bottom: .4rem; border-bottom: 1px solid var(--cream-300);
}
html[lang="ar"] .legend h4 { letter-spacing: 0; text-transform: none; }
.legend ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; }
.legend li { display: flex; gap: .55rem; align-items: baseline; font-size: .87rem; color: var(--ink-soft); }
.legend code {
  flex: none; min-width: 26px; text-align: center;
  background: var(--cream-150); border: 1px solid var(--cream-300); border-radius: 6px;
  font-family: var(--font-body); font-weight: 700; font-size: .76rem; color: var(--ink);
  padding: .05rem .3rem;
}
.legend-note { margin: 1.35rem 0 0; padding: .85rem 1rem; background: var(--cream-150); border-radius: var(--r-sm); font-size: .85rem; color: var(--ink-soft); }
.legend-note + .legend-note { margin-top: .55rem; }

/* -------------------------- Goldener Wellenübergang ----------------------
   Breite Ellipsen erzeugen sehr flache, glatte Wellen. Weil jede Ebene eine
   geschlossene CSS-Fläche ist, gibt es weder Kacheln noch Verlaufsbänder. */
.contact-waves {
  position: relative;
  height: clamp(46px, 6vw, 76px);
  overflow: hidden;
  pointer-events: none;
}
.contact-waves::after {
  content: '';
  position: absolute;
  z-index: 4;
  inset-inline: 0;
  inset-block-end: 0;
  height: 50%;
  background: #2B100E;
}
.contact-waves__wave {
  position: absolute;
  inset-inline-start: -27.5%;
  width: 155%;
  height: calc(100% + 64px);
  border-radius: 50%;
}
.contact-waves__wave--soft {
  z-index: 1;
  inset-block-start: 3px;
  background: #EEDAA5;
}
.contact-waves__wave--gold {
  z-index: 2;
  inset-block-start: 9px;
  background: #C08F2A;
}
.contact-waves__wave--front {
  z-index: 3;
  inset-block-start: 15px;
  border: 1px solid rgba(224,190,106,.58);
  background: #2B100E;
}

/* ------------------------------- Kontakt ---------------------------------
   Eine deckende Burgundfläche statt mehrerer Vollflächen-Verläufe verhindert
   sichtbare Rasterbänder. Ein begrenzter Schmuckring bringt Tiefe, ohne den
   Hintergrund erneut in große Farbflächen zu zerlegen.                   */
.contact {
  background: #2B100E;
  color: #F6E8D2;
  padding-block: clamp(3.25rem, 6vw, 5.25rem);
  position: relative; isolation: isolate; overflow: hidden;
  border-block-start: 0;
}
.contact::before {
  content: ''; position: absolute; z-index: -1;
  inset-block-start: -13rem; inset-inline-end: -8rem;
  width: clamp(18rem, 30vw, 28rem); aspect-ratio: 1;
  border: 1px solid rgba(224,190,106,.09); border-radius: 50%;
  box-shadow: 0 0 0 4rem rgba(224,190,106,.025), 0 0 0 8rem rgba(224,190,106,.014);
  pointer-events: none;
}
.contact > * { position: relative; }
.contact h2 {
  font-family: var(--font-display); font-weight: 600; text-transform: uppercase;
  font-size: clamp(1.7rem, 4.5vw, 2.5rem); margin: 0 0 .35rem; color: #fff; letter-spacing: .01em;
}
html[lang="ar"] .contact h2 { text-transform: none; }
.contact__sub { color: var(--gold-300); margin: 0 0 2rem; font-family: 'Cairo', sans-serif; }

/* ======================================================================
   KONTAKT — „Waage und Sockel"
   Vorher: drei gleich breite Spalten. Die Öffnungszeiten sind achtzeilig,
   das Telefon zweizeilig — gemessen blieben 172 px unter der Adresse und
   228 px unter dem Telefon leer, zusammen 400 px totes Feld.

   Jetzt zwei Spuren: der schmale Stapel (Telefon über Adresse) gegen die
   hohe Zeitenkarte. Der Ausgleich entsteht durch GRUPPIERUNG — es steht
   keine 90-px-Karte mehr neben einer 350-px-Karte, weil die kurze Karte
   einen Partner bekommen hat.

   Zwei Umbruchpunkte, beide schon in dieser Datei vorhanden: 760 px und
   620 px. Es kommt kein neuer Schwellenwert dazu.
   ====================================================================== */

/* ------------------------------------------------------------- Kopf --- */
.contact__kopf {
  display: flex; flex-wrap: wrap;
  align-items: baseline; justify-content: space-between;
  gap: .6rem 1.5rem;
  margin-block-end: clamp(1.5rem, 3vw, 2.25rem);
}
.contact__titel { min-inline-size: 0; }
.contact h2 { margin: 0 0 .35rem; }
.contact__sub { margin: 0; }
.contact__kopf .status { margin-bottom: 0; }

/* ----------------------------------------------------------- Gitter --- */
.contact__grid {
  --cgap:      clamp(1rem, 2vw, 1.75rem);
  --card-pad:  clamp(1.15rem, 2.2vw, 1.6rem);
  display: grid; gap: var(--cgap);
  grid-template-columns: 1fr;
  align-items: stretch;
}
/* .85 zu 1.15 — bei 1200 px sind das 478 px zu 646 px. Bewusst deutlich
   ungleich: 0,9/1,1 liest das Auge als Schieflage, dieses Verhältnis
   als Absicht. */
@media (min-width: 760px) {
  .contact__grid { grid-template-columns: .85fr 1.15fr; }
}

.cstapel { display: grid; gap: var(--cgap); grid-template-rows: 1fr auto; }

/* ---------------------------------------------- Karten mit Fläche ----- */
/* Bisher stand nackter Text auf dem Verlauf — jede ungenutzte Höhe war
   sichtbar leerer Hintergrund. Mit einer eigenen Fläche wird Resthöhe zu
   Innenpolster: der Unterschied zwischen „da fehlt was" und „da ist Platz
   gelassen". */
.ccard {
  min-width: 0;
  background: rgba(255,250,240,.055);
  border: 1px solid rgba(224,190,106,.18);
  border-radius: var(--r-lg);
  padding: var(--card-pad);
  display: flex; flex-direction: column;
  box-shadow: inset 0 1px rgba(255,255,255,.05), 0 20px 44px rgba(0,0,0,.12);
}
.ccard h3 {
  display: flex; align-items: center; gap: .5rem;
  font-size: .78rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--gold-300);
  margin: 0 0 .75rem;
}
html[lang="ar"] .ccard h3 { letter-spacing: 0; text-transform: none; }
.ccard h3 svg {
  width: 36px; height: 36px; flex: none; padding: 8px;
  border: 1px solid rgba(224,190,106,.2); border-radius: 11px;
  background: rgba(224,190,106,.09);
}
.ccard p { margin: 0 0 .3rem; line-height: 1.65; }
.ccard a { color: #fff; text-decoration: none; border-bottom: 1px solid rgba(224,190,106,.5); }
.ccard a:hover { border-bottom-color: var(--gold-300); }

/* Verweis am Kartenfuß. Der Pfeil kommt aus dem CSS statt aus dem Skript —
   nur so dreht er sich in Arabisch mit. */
.ccard__link { margin-block: .65rem 0 0; }
.ccard__link a { font-weight: 600; border-bottom: 0; }
.ccard__link a::after { content: '\2009\2192'; }
html[dir="rtl"] .ccard__link a::after { content: '\2009\2190'; }
.ccard__link a:hover span,
.ccard__link a:focus-visible span { text-decoration: underline; text-underline-offset: .22em; }

/* TELEFON — der kürzeste Inhalt wird das stärkste Element statt das
   leerste. Die Karte nimmt den Höhenüberschuss des Stapels auf und
   zentriert ihren Inhalt darin. */
.ccard--tel { justify-content: center; }
.cphone { margin: 0; }
.cphone a {
  display: inline-block; padding-block: .15rem;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2rem); line-height: 1.15;
  border-bottom: 0;
  unicode-bidi: isolate;
}
.cmail { margin-block: .5rem 0 0; }
.ccard--adr { justify-content: flex-start; }
.ccard--zeiten .hours { flex: 1; }

/* ------------------------------------------------- Die Wochenliste ---- */
/* minmax(2.1rem, 1fr): die Restfläche verteilt sich auf die ZEILEN, nicht
   auf die Lücken — so bleiben die Trennlinien am Text. */
.hours {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: .18rem;
  grid-auto-rows: minmax(2.1rem, 1fr);
  font-variant-numeric: tabular-nums;
}
.hours li {
  display: flex; align-items: center; gap: .6rem;
  padding-block: .28rem; padding-inline: .55rem;
  border-block-end: 1px solid rgba(246,232,210,.16);
  border-radius: 10px; font-size: .93rem;
}
/* Auto-Rand statt space-between: bei markiertem Tag zog space-between
   DREI Elemente auseinander (Tag | Zeit | Punkt) statt zwei. */
.hours li > span:first-child { min-width: 0; }
.hours li > span:last-child {
  flex: none; margin-inline-start: auto; white-space: nowrap; text-align: end;
}
.hours li:last-child { border-block-end: 0; }

/* HEUTE als eigene Kachel — der Blickfang der Karte. Nutzt die Klasse
   .is-today, die das Skript ohnehin vergibt. Die Auszeichnung hängt nicht
   an Farbe allein (Fläche + Ring + Punkt + Fettung), trägt also auch bei
   Farbfehlsichtigkeit. */
.hours li.is-today {
  color: #fff; font-weight: 650;
  background: rgba(224,190,106,.14);
  box-shadow: inset 0 0 0 1px rgba(224,190,106,.75);
  border-block-end-color: transparent;
  padding-inline: .7rem;
}
.hours li.is-today > span:last-child { font-size: 1.05rem; }
.hours li.is-today::after {
  content: '●'; color: var(--gold-300); font-size: .6rem;
  align-self: center; margin-inline-start: .5rem;
}

/* --------------------------------------------------- Sockelleiste ----- */
.contact__sockel {
  display: flex; flex-wrap: wrap;
  align-items: center; justify-content: space-between;
  gap: 1.25rem 2rem;
  margin-block-start: clamp(1.75rem, 3vw, 2.5rem);
  padding-block-start: clamp(1.5rem, 2.5vw, 2rem);
  border-block-start: 1px solid rgba(246,232,210,.18);
}
.contact__sockel .contact__actions,
.contact__sockel .social { margin-top: 0; flex: 0 1 auto; }

/* Tastaturfokus: global ist der Ring rot und auf diesem Grund fast
   unsichtbar. Gold hebt sich ab. */
.contact :focus-visible {
  outline: 3px solid var(--gold-300); outline-offset: 2px; border-radius: 4px;
}

/* ------------------------------------------------------------ Handy --- */
/* Unter 620 px — dieselbe Schwelle, an der auch die Fußzeile umbaut, damit
   beide gleichzeitig umschalten. */
@media (max-width: 759.98px) {
  /* WhatsApp bekommt die ganze Zeile: das ist der Knopf, den ein hungriger
     Gast will. PDF und Drucken teilen sich die zweite. */
  .contact .contact__actions {
    display: grid; grid-template-columns: 1fr 1fr; gap: .55rem; inline-size: 100%;
  }
  .contact .contact__actions .btn--wa { grid-column: 1 / -1; }
  .contact .contact__actions .btn { inline-size: 100%; min-block-size: 44px; }

  /* Sozialknöpfe als runde 44er. Das Wort verschwindet optisch, bleibt
     aber im Text und im aria-label — Vorleseprogramme verlieren nichts.
     position:relative ist Pflicht, sonst landet der Span in der Ecke des
     ganzen Kontaktbereichs, der ist selbst positioniert. */
  .contact .social { inline-size: 100%; gap: .6rem; }
  .contact .soc {
    position: relative;
    inline-size: 44px; block-size: 44px;
    padding: 0; justify-content: center;
  }
  .contact .soc > span {
    position: absolute; inline-size: 1px; block-size: 1px;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
  .contact .social__lead { inline-size: 100%; margin-inline-end: 0; }
  .contact__sockel { padding-inline-end: 0; }
}

@media print {
  .ccard { background: none; border-color: #999; box-shadow: none; }
  .hours li.is-today { background: none; box-shadow: none;
    border-block-end: 1px solid #999; font-weight: 700; }
  .contact__sockel { border-block-start: 0; padding-inline-end: 0; }
  .social, .contact-waves { display: none !important; }
}

.status { display: inline-flex; align-items: center; gap: .45rem; font-size: .88rem; font-weight: 650; margin-bottom: .8rem; padding: .3rem .8rem; border-radius: 999px; }
.status--open { background: rgba(46,125,80,.25); color: #A9E4BE; }
.status--closed { background: rgba(255,255,255,.1); color: #E6D3B4; }
.status i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; display: block; }

.contact__actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 2.25rem; }

/* ---------------------------------------------------- Soziale Netzwerke
   Die Knöpfe tragen ihre Markenfarbe, so wie der WhatsApp-Knopf daneben.

   Das ist auf dunklem Grund nicht umsonst zu haben: eine Farbe, die dunkel
   genug für weiße Schrift ist (4,5:1), hebt sich kaum noch vom dunklen
   Hintergrund ab (3:1 nötig). TikTok-Schwarz kommt dort auf 1,29:1 — der
   Knopf hätte keine erkennbare Form mehr.

   Gelöst über einen hellen RING: er trägt die Abgrenzung, dann darf die
   Fläche die echte Markenfarbe sein. Gemessen gegen den Kontaktgrund:
   Facebook 6,8:1 · Instagram 6,7:1 · TikTok 4,2:1.                       */
.social { display: flex; flex-wrap: wrap; align-items: center; gap: .55rem; margin-top: 1.5rem; }

/* Die Zeile stand vorher auf --ink-mute. Das ist ein Ton für HELLE
   Hintergründe und kam auf dem dunklen Grund nur auf 4,05:1 — zu wenig.
   Jetzt aus der Textfarbe des Kontaktbereichs abgeleitet: 8,9:1.        */
.social__lead {
  font-size: .8rem; font-weight: 600; color: rgba(246,232,210,.82);
  margin-inline-end: .35rem; text-transform: uppercase; letter-spacing: .08em;
}
.soc {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .5rem .95rem; border-radius: 999px;
  color: #fff; background: #444;
  text-decoration: none; font-size: .86rem; font-weight: 650;
  border: 1.5px solid rgba(246,232,210,.55);
  transition: filter .16s, transform .16s;
}
.soc svg { width: 1.2rem; height: 1.2rem; flex: none; color: currentColor; }

/* Facebook nicht im offiziellen #1877F2: weiße Schrift kommt darauf nur
   auf 4,23:1. #1568D4 ist eine Spur dunkler und schafft 5,30:1. */
.soc--fb { background: #1568D4; }

/* Instagram als Verlauf wie im Original — aber ohne das Orange am Ende.
   Weiße Schrift auf #F09433 wären 2,34:1. Diese drei Stufen halten alle:
   6,4:1 · 5,1:1 · 6,5:1. */
.soc--ig { background: linear-gradient(135deg, #DC2743 0%, #C13584 50%, #833AB4 100%); }

.soc--tt { background: #0B0B0B; }

.soc:hover, .soc:focus-visible {
  filter: brightness(1.14); transform: translateY(-1px);
  border-color: rgba(246,232,210,.85);
}


/* Keine vollflächigen Noise-Ebenen: sie verursachten auf großen Ansichten
   sichtbare Kachelgrenzen und damit genau die dunklen Streifen. */
.contact::after,
.footer::after {
  content: none;
}
.contact::after { z-index: 0; }
.footer::after  { z-index: 0; }
.contact > *, .footer > * { position: relative; z-index: 1; }

/* ------------------------------- Fußzeile --------------------------------
   Eine kompakte, einfarbige Abschlussleiste mit feiner Goldkante. */
.footer {
  position: relative;
  background: #1C0B0A;
  color: rgba(246,232,210,.80);
  padding: 1.35rem 0 calc(1.35rem + env(safe-area-inset-bottom));
  font-size: .9rem;
  line-height: 1.6;
}
/* Die Kante zwischen Kontaktfläche und Fußzeile. */
.footer::before {
  content: ''; position: absolute; inset-inline: 0; top: 0; height: 1px;
  background: rgba(224,190,106,.28);
}
.footer__inner {
  display: flex; flex-wrap: wrap; gap: 1rem 1.75rem;
  align-items: center; justify-content: space-between;
}
.footer a {
  display: inline-flex; align-items: center; min-height: 40px;
  color: rgba(246,232,210,.88); text-decoration: none;
}
.footer a:hover, .footer a:focus-visible {
  color: var(--gold-300); text-decoration: underline; text-underline-offset: .22em;
}
.footer__links { display: flex; gap: .1rem 1.25rem; flex-wrap: wrap; }


/* Auf schmalen Geräten untereinander statt gequetscht nebeneinander. */
@media (max-width: 619px) {
  .footer__inner { flex-direction: column; align-items: flex-start; gap: .8rem; }
  .footer__links { gap: 0 1.1rem; }
}

/* Die Social-Links bleiben auf der dunklen Fläche ruhig. Ihre Markenfarbe
   sitzt im Icon; so konkurrieren sie nicht mit dem primären WhatsApp-Knopf. */
.soc,
.soc--fb,
.soc--ig,
.soc--tt {
  min-height: 44px;
  background: rgba(255,250,240,.055);
  border-color: rgba(224,190,106,.24);
  transition: background-color .16s, border-color .16s, transform .16s;
}
.soc--fb svg { color: #6EAAFF; }
.soc--ig svg { color: #F06AA7; }
.soc--tt svg { color: #FFF; }
.soc:hover, .soc:focus-visible {
  filter: none; background: rgba(255,250,240,.11);
  border-color: rgba(224,190,106,.62);
}
.footer :focus-visible { outline-color: var(--cream-200); }

@media (max-width: 619.98px) {
  .soc {
    inline-size: 44px; block-size: 44px; min-height: 44px;
    padding: 0; justify-content: center;
  }
}
@media (max-width: 380px) {
  .hours li { gap: .45rem; font-size: .86rem; }
  .hours li > span:last-child { white-space: normal; }
}

/* ------------------------ Schnellaktionen unten --------------------------
   Auf PCs bleibt die Seite frei. Handy und iPad erhalten weiter unten eine
   kompakte Drei-Felder-Leiste statt der hohen runden Symbolspalte. */
.quickbar { display: none; }

/* --------------------------- Warenkorb-Panel ------------------------------ */
.overlay {
  position: fixed; inset: 0; z-index: 80; background: rgba(35,20,10,.5);
  backdrop-filter: blur(3px); opacity: 0; pointer-events: none; transition: opacity .24s;
}
.overlay.is-open { opacity: 1; pointer-events: auto; }

.drawer {
  position: fixed; inset-block: 0; inset-inline-end: 0; z-index: 90;
  width: min(430px, 100%); height: 100vh; max-height: 100vh;
  height: 100dvh; max-height: 100dvh;
  background: var(--cream-100);
  display: flex; flex-direction: column;
  box-shadow: var(--shadow-lg);
  transform: translateX(100%); transition: transform .28s cubic-bezier(.4,0,.2,1);
}
html[dir="rtl"] .drawer { transform: translateX(-100%); }
.drawer.is-open { transform: translateX(0) !important; }

.drawer__head {
  display: flex; align-items: center; gap: .75rem;
  padding: calc(1rem + env(safe-area-inset-top)) 1.15rem 1rem;
  border-bottom: 1px solid var(--cream-300); background: var(--cream-50);
}
.drawer__title { font-family: var(--font-display); font-weight: 600; font-size: 1.3rem; color: var(--red-700); margin: 0; margin-inline-end: auto; text-transform: uppercase; }
html[lang="ar"] .drawer__title { text-transform: none; }
.drawer__body {
  flex: 1; min-height: 0; overflow-y: auto; padding: 1rem 1.15rem;
  overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
}
.drawer__foot { border-top: 1px solid var(--cream-300); padding: 1rem 1.15rem calc(1rem + env(safe-area-inset-bottom)); background: var(--cream-50); }

.citem { display: flex; gap: .75rem; padding: .75rem 0; border-bottom: 1px dashed var(--cream-300); }
.citem:last-child { border-bottom: 0; }
.citem__no {
  width: 40px; height: 40px; flex: none; border-radius: var(--r-sm);
  background: var(--cream-150); border: 1px solid var(--cream-300);
  display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 500; font-size: .95rem;
  color: var(--red-600); font-variant-numeric: tabular-nums;
}
.citem__body { flex: 1; min-width: 0; }
.citem__name { font-family: var(--font-display); font-weight: 500; font-size: 1rem; margin: 0; line-height: 1.25; }
.citem__meta { font-size: .8rem; color: var(--ink-mute); }
.citem__row { display: flex; align-items: center; gap: .5rem; margin-top: .4rem; }
.qty { display: inline-flex; align-items: center; gap: .1rem; background: var(--cream-150); border-radius: 999px; padding: .12rem; }
.qty button {
  width: 28px; height: 28px; border-radius: 50%; border: 0; background: transparent;
  cursor: pointer; display: grid; place-items: center; color: var(--red-700); font-size: 1rem; line-height: 1;
}
.qty button:hover { background: var(--cream-50); }
.qty span { min-width: 26px; text-align: center; font-weight: 650; font-variant-numeric: tabular-nums; font-size: .92rem; }
.citem__price { margin-inline-start: auto; font-family: var(--font-display); font-weight: 600; color: var(--red-700); font-variant-numeric: tabular-nums; }

.cart-empty { text-align: center; padding: 3rem 1rem; color: var(--ink-soft); }
.cart-empty svg { width: 56px; height: 56px; color: var(--cream-400); margin-inline: auto; }
.cart-empty p { margin: .8rem 0 0; }
.cart-empty small { display: block; margin-top: .3rem; color: var(--ink-mute); }

.note-field { width: 100%; margin-bottom: .85rem; }
.note-field label { display: block; font-size: .82rem; font-weight: 600; color: var(--ink-soft); margin-bottom: .3rem; }
.note-field textarea {
  width: 100%; min-height: 62px; resize: vertical; font: inherit; font-size: .9rem;
  padding: .6rem .75rem; border-radius: var(--r-sm);
  border: 1.5px solid var(--cream-300); background: var(--cream-50); color: var(--ink);
}
.note-field textarea:focus { outline: none; border-color: var(--red-500); box-shadow: 0 0 0 3px rgba(176,36,32,.12); }

.total-row { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: .85rem; }
.total-row span { font-size: .95rem; font-weight: 600; color: var(--ink-soft); }
.total-row b { font-family: var(--font-display); font-weight: 600; font-size: 1.75rem; color: var(--red-700); font-variant-numeric: tabular-nums; }
.drawer__hint { font-size: .76rem; color: var(--ink-mute); margin: .7rem 0 0; line-height: 1.45; }
.drawer__fine {
  font-size: .74rem; line-height: 1.5; color: var(--ink-mute);
  margin: .45rem 0 0; text-align: center;
}
.drawer__fine a { color: inherit; text-decoration: underline; }
.drawer__actions { display: grid; gap: .5rem; }

/* -------------------------------- Modal ---------------------------------- */

/* ------------------------------ Toast ------------------------------------ */
.toast {
  position: fixed; inset-block-end: calc(1.25rem + env(safe-area-inset-bottom)); inset-inline-start: 50%;
  transform: translate(-50%, 120%); z-index: 100;
  background: var(--ink); color: #fff; padding: .7rem 1.2rem; border-radius: 999px;
  font-size: .9rem; font-weight: 600; box-shadow: var(--shadow-lg);
  display: flex; align-items: center; gap: .5rem;
  transition: transform .3s cubic-bezier(.34,1.4,.64,1), opacity .22s ease;
  max-width: calc(100% - 2rem);
  /* Wegschieben allein genügt NICHT: auf Handy und iPad wird der Hinweis über
     die Schnellleiste gehoben (siehe .has-quickbar … .toast weiter unten), und
     120 % der eigenen Höhe reichen dann nicht mehr aus dem Bild heraus. Er
     stand dort dauerhaft als leere dunkle Blase mit grünem Haken auf dem
     Knopf „Anrufen“. opacity statt visibility/display, damit Vorlesehilfen
     die Meldung weiterhin ansagen (role="status" aria-live="polite"). */
  opacity: 0; pointer-events: none;
}
.toast.is-visible { transform: translate(-50%, 0); opacity: 1; }
.toast svg { width: 17px; height: 17px; color: #7BE0A3; flex: none; }

/* ------------------------- Pausierte Gerichte ---------------------------- */
.soldout {
  display: inline-flex; align-items: center; padding: .3rem .7rem; border-radius: 999px;
  background: var(--cream-200); color: var(--ink-mute);
  font-size: .74rem; font-weight: 650; white-space: nowrap;
}

/* ---------------------------- Bestellvorgang ----------------------------- */
.segment {
  display: grid; grid-template-columns: 1fr 1fr; gap: .25rem; padding: .25rem;
  background: var(--cream-150); border-radius: 999px; margin-bottom: 1.1rem;
}
.segment__btn {
  border: 0; background: transparent; border-radius: 999px; padding: .6rem .5rem;
  font-weight: 650; font-size: .92rem; color: var(--ink-soft); cursor: pointer;
  transition: background-color .16s, color .16s;
}
.segment__btn.is-on { background: var(--red-600); color: #fff; box-shadow: var(--shadow-sm); }

.cform { display: grid; gap: .7rem; }
.cform__row { display: grid; grid-template-columns: 100px 1fr; gap: .7rem; }
.cfield--half { min-width: 0; }
.cfield { display: block; }
.cfield > span { display: block; font-size: .8rem; font-weight: 650; color: var(--ink-soft); margin-bottom: .25rem; }
.cfield input, .cfield textarea {
  width: 100%; font: inherit; font-size: .95rem; padding: .62rem .8rem;
  border: 1.5px solid var(--cream-300); border-radius: var(--r-sm);
  background: var(--cream-50); color: var(--ink); resize: vertical;
}
.cfield input:focus, .cfield textarea:focus {
  outline: none; border-color: var(--red-500); box-shadow: 0 0 0 3px rgba(176,36,32,.13);
}
.cfield.is-bad input { border-color: var(--red-600); background: #FDF1F0; }

/* ------------------------------------------------------------- Bezahlung */
.pay { margin-top: 1.1rem; }
.pay__title {
  margin: 0 0 .45rem; font-size: .8rem; font-weight: 650;
  color: var(--ink-soft); text-transform: none;
}
.pay__opts { display: grid; gap: .5rem; }
@media (min-width: 400px) { .pay__opts { grid-template-columns: 1fr 1fr; } }
.pay__opt {
  display: flex; flex-direction: column; gap: .12rem; text-align: start;
  padding: .7rem .85rem; cursor: pointer; font: inherit;
  border: 1.5px solid var(--cream-300); border-radius: var(--r-sm);
  background: var(--cream-50); color: var(--ink);
  transition: border-color .16s, background-color .16s, box-shadow .16s;
}
.pay__opt:hover { border-color: var(--red-500); }
.pay__opt.is-on {
  border-color: var(--red-600); background: #fff;
  box-shadow: 0 0 0 3px rgba(176,36,32,.13);
}
.pay__name { font-weight: 650; font-size: .93rem; }
.pay__hint { font-size: .76rem; color: var(--ink-soft); line-height: 1.35; }
.pay__opt.is-on .pay__name { color: var(--red-700); }
.pay__only {
  margin: 0; padding: .7rem .9rem; border-radius: var(--r-sm);
  background: var(--cream-150); font-size: .86rem; font-weight: 600; line-height: 1.45;
}
.pay__only span { display: block; font-weight: 500; color: var(--ink-soft); font-size: .78rem; }
.pay__test {
  margin: .5rem 0 0; padding: .5rem .75rem; border-radius: var(--r-sm);
  background: #FFF6E0; border: 1px solid #E9C97A; color: #6B4E00;
  font-size: .78rem; font-weight: 650;
}

.cart-warn {
  margin: .9rem 0 0; padding: .7rem .9rem; border-radius: var(--r-sm);
  background: rgba(176,36,32,.09); color: var(--red-700);
  font-size: .86rem; font-weight: 600; line-height: 1.45;
}
.sumline {
  display: flex; justify-content: space-between; gap: 1rem;
  font-size: .89rem; color: var(--ink-soft); padding: .15rem 0;
  font-variant-numeric: tabular-nums;
}

.cart-done { text-align: center; padding: 2rem .5rem; }
.cart-done__check {
  width: 66px; height: 66px; border-radius: 50%; background: var(--green-600);
  display: grid; place-items: center; margin: 0 auto 1.1rem; color: #fff;
}
.cart-done__check svg { width: 32px; height: 32px; }
.cart-done h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.5rem; color: var(--red-700); margin: 0 0 .8rem; }
.cart-done__no { margin: 0 0 .5rem; color: var(--ink-soft); font-size: .9rem; }
.cart-done__no b {
  display: block; font-family: var(--font-display); font-size: 2rem;
  color: var(--ink); letter-spacing: .04em; margin-top: .1rem;
}
.cart-done__time { margin: 0 0 .8rem; color: var(--ink-soft); font-size: .95rem; }
.cart-done__time b { color: var(--red-700); }
.cart-done__hint { font-size: .84rem; color: var(--ink-mute); margin: 0; }

/* -------------------------- Datenschutz-Hinweis --------------------------- */
.consent {
  position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 70;
  padding: .85rem .85rem calc(.85rem + env(safe-area-inset-bottom));
  transform: translateY(120%); transition: transform .34s cubic-bezier(.4,0,.2,1);
}
.consent.is-visible { transform: translateY(0); }
.consent__box {
  width: min(100%, 940px); margin-inline: auto;
  display: flex; flex-wrap: wrap; align-items: center; gap: .9rem 1.25rem;
  padding: 1rem 1.15rem; border-radius: var(--r-lg);
  background: var(--cream-50); border: 1px solid var(--cream-300);
  box-shadow: var(--shadow-lg);
}
.consent__text { flex: 1 1 320px; min-width: 0; }
.consent__text strong {
  display: block; font-family: var(--font-display); font-weight: 500;
  font-size: 1.05rem; color: var(--red-700); margin-bottom: .15rem;
}
.consent__text p { margin: 0; font-size: .85rem; color: var(--ink-soft); line-height: 1.5; }
.consent__actions { display: flex; gap: .5rem; flex-wrap: wrap; margin-inline-start: auto; }
@media (max-width: 560px) { .consent__actions { width: 100%; } .consent__actions .btn { flex: 1; } }

/* ======================= Responsive Feinschliff ==========================
   Vier bewusst getrennte Situationen: Fingerbedienung, kurze Laptops,
   iPad quer und sehr schmale Handys. Die Inhaltsreihenfolge bleibt gleich. */

/* Nummern bleiben auch in der arabischen Fassung zuverlässig lesbar. */
.mrow__price, .setcard__price, .cphone a, .cmail a,
.sumline > span:last-child {
  direction: ltr; unicode-bidi: isolate;
}
#cf-phone, #cf-email, #cf-zip { direction: ltr; text-align: start; }

/* Grobe Zeiger sind Finger: alle wichtigen Ziele mindestens 44 × 44 px. */
@media (any-pointer: coarse) {
  .btn, .chip, .filter, .variant { min-height: 44px; }
  .iconbtn { width: 44px; height: 44px; }
  .lang__btn { width: auto; min-width: 64px; }
  .mrow__add, .drink .addbtn { width: 44px; height: 44px; }
  .qty button { width: 40px; height: 40px; }
  .search__clear { width: 44px; height: 44px; inset-inline-end: 3px; }
}

/* Auf Touch-Geräten verhindert 16 px Schrift den automatischen iOS-Zoom. */
@media (max-width: 1024px), (max-width: 1366px) and (any-pointer: coarse) {
  :root {
    --quickbar-size: 70px;
    --quickbar-bottom: max(.625rem, env(safe-area-inset-bottom));
  }

  .search input, .cfield input, .cfield textarea, .note-field textarea {
    font-size: 16px;
  }

  /* Der Anruf sitzt auf kleinen Geräten bereits in der unteren Leiste. */
  #callTop { display: none; }

  .quickbar {
    position: fixed;
    left: max(.75rem, env(safe-area-inset-left));
    right: max(.75rem, env(safe-area-inset-right));
    bottom: var(--quickbar-bottom);
    z-index: 65;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .35rem;
    max-width: 620px;
    min-height: var(--quickbar-size);
    margin-inline: auto;
    padding: .35rem;
    border: 1px solid rgba(224,190,106,.42);
    border-radius: 20px;
    background: rgba(28,11,10,.96);
    box-shadow: 0 16px 44px rgba(24,8,7,.28), 0 3px 10px rgba(24,8,7,.2);
    -webkit-backdrop-filter: blur(16px) saturate(125%);
    backdrop-filter: blur(16px) saturate(125%);
    transition: opacity .18s, visibility .18s, transform .18s;
  }
  .quickbar__item {
    min-width: 0;
    min-height: 58px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .16rem;
    padding: .35rem .25rem;
    border: 1px solid rgba(224,190,106,.16);
    border-radius: 14px;
    background: rgba(255,250,240,.07);
    color: #FFF9EE;
    text-decoration: none;
    font-size: clamp(.72rem, 1.75vw, .82rem);
    font-weight: 720;
    line-height: 1.05;
    letter-spacing: .01em;
    -webkit-tap-highlight-color: transparent;
    transition: background-color .16s, border-color .16s, transform .12s;
  }
  .quickbar__item svg {
    width: 23px;
    height: 23px;
    flex: none;
  }
  .quickbar__item span { min-width: 0; text-align: center; }
  .quickbar__item--wa svg { color: #72E5A3; }
  .quickbar__item--call svg { color: #FF9D95; }
  .quickbar__item--route svg { color: var(--gold-300); }
  .quickbar__item:active { transform: scale(.97); }
  .quickbar__item:focus-visible {
    outline-color: var(--gold-300);
    outline-offset: -2px;
  }
  body.drawer-open .quickbar,
  body.consent-open .quickbar {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(calc(100% + 1.5rem));
  }

  /* Am Seitenende bleibt genug dunkle Fläche frei, damit die Leiste weder
     Footerlinks noch fokussierte Bedienelemente verdeckt. */
  html { scroll-padding-block-end: calc(var(--quickbar-size) + var(--quickbar-bottom) + .75rem); }
  .has-quickbar:not(.quickbar-suppressed) .footer {
    padding-block-end: calc(1.35rem + var(--quickbar-size) + var(--quickbar-bottom));
  }
  .has-quickbar:not(.quickbar-suppressed) .toast {
    inset-block-end: calc(var(--quickbar-size) + var(--quickbar-bottom) + .75rem);
  }
}

@media (max-width: 1024px) and (hover: hover) {
  .quickbar__item:hover {
    background: rgba(255,250,240,.14);
    border-color: rgba(224,190,106,.48);
  }
}

/* Im Querformat bleibt der Inhalt sichtbar, die Ziele aber groß genug. */
@media (max-width: 1024px) and (max-height: 520px) {
  :root { --quickbar-size: 60px; }
  .quickbar { padding: .25rem; border-radius: 16px; }
  .quickbar__item {
    min-height: 52px;
    flex-direction: row;
    gap: .35rem;
    border-radius: 12px;
  }
  .quickbar__item svg { width: 21px; height: 21px; }
}

/* Textseite und Abdunklung spiegeln sich in Arabisch gemeinsam. */
@media (min-width: 768px) {
  html[dir="rtl"] .hero::after {
    background:
      linear-gradient(to left, rgba(18,11,5,.66) 0%, rgba(18,11,5,.34) 40%, rgba(18,11,5,0) 68%),
      linear-gradient(to top, rgba(18,11,5,.72) 0%, rgba(18,11,5,.3) 32%, rgba(18,11,5,.04) 60%, rgba(18,11,5,.28) 100%);
  }
}

/* Laptop mit wenig Bildschirmhöhe: Bild bleibt eindrucksvoll, ohne die
   gesamte erste Ansicht zu verbrauchen. */
@media (min-width: 768px) and (max-height: 800px) {
  .hero {
    min-height: min(620px, calc(100svh - var(--topbar-h)));
    padding-block: 2rem;
  }
  .hero__logo { width: 145px; margin-bottom: .8rem; }
  .hero h1 { font-size: clamp(2.8rem, 6vw, 4.5rem); }
  .hero__text, .hero__actions { margin-bottom: 1rem; }
}

/* iPad und ähnliche Tablets im Querformat. */
@media (min-width: 600px) and (max-width: 1024px) and
       (orientation: landscape) and (max-height: 820px) {
  :root { --topbar-h: 58px; }
  .brand img { height: 38px; }
  .catnav__scroll { padding-block: .35rem; }
  .hero { min-height: 560px; padding-block: 2.5rem 2rem; }
  .hero__logo { width: 145px; margin-bottom: .75rem; }
  .hero h1 { font-size: clamp(3rem, 6vw, 4.5rem); }
  .hero__text { margin-bottom: 1.1rem; }
  .hero__actions { margin-bottom: 1rem; }
  .secban { height: clamp(280px, 33vw, 340px); }
  .section { padding-bottom: 3.5rem; }
}

/* Zwischen Tablet und kleinem Laptop bekommen Aktionen eine eigene Zeile;
   dadurch wirken weder Kontakt noch Footer zufällig zusammengequetscht. */
@media (min-width: 620px) and (max-width: 1100px) {
  .contact__sockel { align-items: flex-start; }
  .contact__sockel .contact__actions,
  .contact__sockel .social { flex-basis: 100%; }
  .footer__inner { flex-direction: column; align-items: flex-start; gap: .5rem; }
}

/* Handy: klare Reihenfolge und keine gequetschten Bedienelemente. */
@media (max-width: 430px) {
  :root { --topbar-h: 62px; }
  .wrap { width: min(100% - 1.25rem, var(--wrap)); }
  .topbar__inner { gap: .4rem; }
  .brand img { height: 38px; }
  .topbar__tools { gap: .25rem; }
  .lang__btn { padding-inline: .55rem; }

  .hero { padding-block: 2.75rem 2.25rem; }
  .hero__logo { width: min(165px, 44vw); margin-bottom: .85rem; }
  .hero h1 { font-size: clamp(2.35rem, 12vw, 3.25rem); }
  .hero__text { font-size: 1rem; margin-bottom: 1.25rem; }
  .hero__actions {
    display: grid; grid-template-columns: 1fr 1fr;
    width: min(100%, 32rem); gap: .55rem; margin-inline: auto;
  }
  .hero__actions .btn { min-height: 48px; padding-inline: .7rem; }
  .hero__actions .btn:first-child { grid-column: 1 / -1; }
  .badges { gap: .4rem; }
  .badge { padding-inline: .7rem; }

  .toolbar__filters { flex: 1 1 100%; }
  .filter { flex: 1 1 10rem; justify-content: center; }

  .delband__own {
    display: grid; grid-template-columns: auto minmax(0, 1fr);
    gap: .75rem;
  }
  .delband__body { min-width: 0; }
  .delband__own > .btn { grid-column: 1 / -1; width: 100%; }

  .section { padding-block: 2.65rem; }
  .secban {
    height: clamp(250px, 76vw, 340px);
    border-radius: var(--r-lg); margin-bottom: 1.4rem;
  }
  .secban__txt { padding: 1.2rem 1.25rem 1.35rem; }
  .offerband { padding: 1.15rem 1.2rem 1.25rem; border-radius: var(--r-lg); }

  .mrow { padding-block: 1rem; }
  .mrow__head { align-items: flex-start; flex-wrap: wrap; }
  .mrow__name { flex: 1 1 8rem; }
  .mrow__lead { display: none; }
  .mrow__price, .mrow__head > .soldout { margin-inline-start: auto; }

  .drink {
    display: grid; grid-template-columns: minmax(0, 1fr) auto auto;
    gap: .2rem .55rem;
  }
  .drink__name { grid-column: 1; grid-row: 1; min-width: 0; overflow-wrap: anywhere; }
  .drink__size { grid-column: 1; grid-row: 2; }
  .drink__dots { display: none; }
  .drink .price { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
  .drink .addbtn, .drink .soldout {
    grid-column: 3; grid-row: 1 / span 2; align-self: center;
  }

  .rev { padding: 1.2rem; border-radius: var(--r-lg); }
  .rev__score { width: 100%; }
  .rev__cta { width: 100%; justify-content: center; }

  #statusBox, .status { max-width: 100%; }
  .status { white-space: normal; line-height: 1.4; }
  .status i { flex: none; }

  .footer__links {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%; column-gap: 1rem;
  }
}

/* Sehr kleine Handys: breite Wörter bekommen eine volle Zeile. */
@media (max-width: 380px) {
  .toolbar__filters {
    width: 100%; display: grid; grid-template-columns: 1fr;
  }
  .filter { justify-content: center; }
  .contact .contact__actions { grid-template-columns: 1fr; }
  .contact .contact__actions .btn { grid-column: auto; }
  .cform__row { grid-template-columns: 1fr; }
  .consent {
    max-height: calc(100dvh - .5rem); overflow-y: auto;
  }
  .consent__actions { display: grid; grid-template-columns: 1fr; }
  .consent__actions .btn { width: 100%; min-height: 44px; }
}

/* Gedrehte Handys und sehr niedrige Browserfenster. */
@media (orientation: landscape) and (max-height: 650px) {
  .hero { min-height: 500px; padding-block: 1.75rem; }
  .hero__logo { width: 108px; padding: .45rem .58rem; margin-bottom: .45rem; }
  .hero__kicker { margin-bottom: .35rem; }
  .hero h1 { font-size: clamp(2.2rem, 8vw, 3.5rem); margin-bottom: .5rem; }
  .hero__text { margin-bottom: .75rem; }
  .hero__actions { margin-bottom: .75rem; }
  .drawer__foot { max-height: 45dvh; overflow-y: auto; }
}

/* ------------------------------ Rechtstexte ------------------------------- */
.legal { padding-block: clamp(2rem, 5vw, 3.5rem); }
.legal__inner {
  width: min(100% - 2rem, 780px); margin-inline: auto;
  background: var(--cream-50); border: 1px solid var(--cream-300);
  border-radius: var(--r-lg); box-shadow: var(--shadow-sm);
  padding: clamp(1.25rem, 4vw, 2.5rem);
}
.legal h1 {
  font-family: var(--font-display); font-weight: 600; text-transform: uppercase;
  font-size: clamp(1.7rem, 4.5vw, 2.4rem); color: var(--red-700);
  margin: 0 0 .35rem; letter-spacing: .01em;
}
.legal__lead { color: var(--ink-mute); font-size: .9rem; margin: 0 0 2rem; }
.legal h2 {
  font-family: var(--font-display); font-weight: 500; font-size: 1.25rem;
  color: var(--red-700); margin: 2rem 0 .5rem;
  padding-bottom: .35rem; border-bottom: 1px solid var(--cream-300);
}
.legal h3 { font-family: var(--font-display); font-weight: 500; font-size: 1.02rem; margin: 1.35rem 0 .3rem; color: var(--ink); }
.legal p, .legal li { font-size: .93rem; line-height: 1.7; color: var(--ink-soft); }
.legal p { margin: 0 0 .8rem; }
.legal ul { margin: 0 0 .9rem; padding-inline-start: 1.15rem; }
.legal li { margin-bottom: .25rem; }
.legal address { font-style: normal; line-height: 1.7; font-size: .95rem; color: var(--ink); }
.legal__box {
  background: var(--cream-150); border-radius: var(--r-md);
  padding: .95rem 1.15rem; margin: 0 0 1.2rem;
}
.legal__box p:last-child { margin-bottom: 0; }
.legal ol { margin: 0 0 .9rem; padding-inline-start: 1.35rem; }
.legal ol li { margin-bottom: .45rem; }

/* Hinweis, der über dem Text steht statt darin — für Fassungen, in denen
   nicht bestellt werden kann. */
.legal__note {
  background: rgba(161,26,23,.07); border-inline-start: 3px solid var(--red-600);
  border-radius: var(--r-sm); padding: .85rem 1.05rem; margin: 0 0 1.4rem;
  font-size: .89rem;
}

/* Gebührenstaffel in den AGB. Schmal, damit zwei Spalten nebeneinander
   lesbar bleiben, und mit eigenem Rollbereich für kleine Bildschirme. */
.legal__box:has(.agbtab) { overflow-x: auto; }
.agbtab { border-collapse: collapse; font-size: .9rem; min-width: 15rem; }
.agbtab th, .agbtab td {
  text-align: start; padding: .35rem 1.6rem .35rem 0; color: var(--ink-soft);
  white-space: nowrap;
}
.agbtab th {
  font-weight: 600; color: var(--ink); font-size: .82rem;
  text-transform: uppercase; letter-spacing: .04em;
  border-bottom: 1px solid var(--cream-300); padding-bottom: .3rem;
}
.agbtab tbody tr + tr td { border-top: 1px solid rgba(0,0,0,.05); }
.agbtab td:last-child { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--ink); }
.legal__todo {
  background: rgba(192,143,42,.13); border-inline-start: 3px solid var(--gold-500);
  border-radius: var(--r-sm); padding: .85rem 1.05rem; margin: 1.2rem 0;
  font-size: .87rem; color: var(--ink-soft);
}
.legal__todo strong { color: #8A6512; }
.legal__back { display: inline-flex; margin-top: 2rem; }

/* ------------------------------ Drucken ---------------------------------- */
@media print {
  .topbar, .catnav, .toolbar, .quickbar, .drawer, .overlay, .toast,
  .hero__actions, .btn, .addbtn, .variant span.plus, .contact__actions { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .section { padding-block: .5rem; break-inside: auto; }
  .menu-list { grid-template-columns: repeat(2, 1fr); gap: 0 1.5rem; }
  .mrow { break-inside: avoid; padding: .18rem 0; margin: 0; border-bottom: 1px dotted #bbb; }
  .mrow:hover { background: none; }
  .secban { height: auto; border: 0; box-shadow: none; background: none; margin-bottom: .4rem; }
  .secban__img, .secban::after { display: none !important; }
  .secban__txt { padding: .3rem 0; color: #000; }
  .secban__title { color: #000; text-shadow: none; }
  .secban__ar, .secban__count { color: #444; }
  .hero__media, .special__img { display: none !important; }
  .contact { background: #fff; color: #000; }
  .contact::before { display: none; }
  .contact h2, .ccard h3 { color: #000; }
  .panel { break-inside: avoid; }
  a[href]::after { content: ''; }
}

/* ---------------------- Entfernung im Bestellformular --------------------- */
.dist {
  margin-top: .9rem; padding: .7rem .9rem; border-radius: var(--r-sm);
  font-size: .86rem; line-height: 1.5;
  background: var(--cream-150); color: var(--ink-soft);
}
.dist:empty { display: none; }
.dist b { color: var(--ink); }
.dist.is-ok { background: #E7F4EC; color: #1B5E3A; }
.dist.is-ok b { color: #134E2F; }
.dist.is-call { background: #FFF6E0; color: #6B4E00; }
.dist.is-call a { color: inherit; font-weight: 700; }
.dist.is-bad { background: rgba(176,36,32,.09); color: var(--red-700); }
.dist.is-bad b { color: var(--red-700); }


/* ------------------------------- Aktionen -------------------------------- */
.sumline--promo { color: #1D6B44; font-weight: 650; }
.promohint {
  margin: .5rem 0 0; padding: .5rem .7rem; border-radius: var(--r-sm);
  background: var(--cream-150); color: var(--ink-soft);
  font-size: .82rem; line-height: 1.45;
}

/* Ausweg, wenn die Adresse zu weit weg ist */
.dist__msg { margin: 0 0 .6rem; }
.dist__ways { display: flex; gap: .5rem; flex-wrap: wrap; }
.dist__ways .btn { flex: 1 1 auto; justify-content: center; }

/* --------------------------- Adress-Schreibhilfe ------------------------- */
.adrhelp { display: grid; gap: 2px; margin: -.45rem 0 .7rem; }
.adrhelp:empty { display: none; }
.adrhelp__row {
  text-align: start; border: 1px solid var(--cream-300); background: #fff;
  border-radius: var(--r-sm); padding: .5rem .7rem; cursor: pointer;
  font: inherit; font-size: .86rem; color: var(--ink-soft);
  transition: background-color .14s, border-color .14s;
}
.adrhelp__row:hover { background: var(--cream-50); border-color: var(--red-500); color: var(--ink); }
.dist.is-ok s { opacity: .65; font-weight: 500; margin-inline-start: .2rem; }
/* Noch fehlende Pflichtangabe im Impressum – sichtbar, nicht still */
.fehlt { color: var(--red-600); font-weight: 600; }

/* Datenschutz: Abschnitte zählen sich selbst. Feste Nummern gingen nicht,
   weil Abschnitte je nach eingesetzten Diensten erscheinen oder fehlen —
   dann klafften Lücken in der Zählung. */
.legal__inner { counter-reset: dsabschnitt; }
.legal__inner h2::before {
  counter-increment: dsabschnitt;
  content: counter(dsabschnitt) ". ";
}
.legal__inner section[hidden] { display: none; }

/* ================================================== Vorbestell-Anfrage
   Durchgehend logische Eigenschaften — der Bereich muss in Arabisch von
   selbst kippen. */
.special__cta { margin-block-start: auto; padding-block-start: .9rem; }
.special__cta .btn { inline-size: 100%; }

.anfrage { display: grid; gap: 1rem; }
.anfrage__gericht {
  display: flex; gap: .8rem; align-items: center;
  padding-block-end: .9rem; border-block-end: 1px solid var(--cream-300);
}
.anfrage__bild {
  inline-size: 96px; block-size: 72px; object-fit: cover;
  border-radius: var(--r-sm); flex: none; background: var(--cream-200);
}
.anfrage__gtxt { min-inline-size: 0; }
.anfrage__nr {
  display: inline-block; background: var(--red-600); color: #fff;
  border-radius: 999px; padding: .1rem .5rem; font-size: .72rem; font-weight: 700;
}
.anfrage__name { margin: .25rem 0 0; font-size: 1.15rem; }
.anfrage__weitere { margin: .2rem 0 0; font-size: .82rem; color: var(--ink-mute); }

/* Steht VOR den Feldern, nicht erst am Ende: Der Gast ist unsicher, weil
   kein Preis dasteht. Die Klarstellung muss kommen, bevor er tippt. */
.anfrage__frist {
  margin: 0; padding: .7rem .85rem; border-radius: var(--r-sm);
  background: var(--cream-150); color: var(--ink-soft);
  font-size: .87rem; line-height: 1.5;
}
.anfrage__block { border: 0; margin: 0; padding: 0; }
.anfrage__legende {
  padding: 0 0 .45rem; font-size: .82rem; font-weight: 600; color: var(--ink-soft);
}
.fleischwahl, .dazu__liste { display: flex; flex-wrap: wrap; gap: .5rem; }
.fleischwahl__opt, .dazu__chip {
  min-block-size: 44px; padding-inline: 1rem;
  border: 1.5px solid var(--cream-300); border-radius: 999px;
  background: var(--cream-50); color: var(--ink);
  font: inherit; font-size: .9rem; font-weight: 600; cursor: pointer;
}
.fleischwahl__opt { flex: 1 1 8rem; }
.fleischwahl__opt.is-on {
  background: var(--red-600); color: #fff; border-color: var(--red-600);
}
.dazu__chip:hover { border-color: var(--red-600); }
.anfrage__felder { display: grid; gap: .7rem; }
.anfrage__hinweis { margin: -.35rem 0 0; font-size: .78rem; color: var(--ink-mute); }
.cfield em { font-style: normal; font-weight: 400; color: var(--ink-mute); }

/* Honigtopf: für Menschen unerreichbar, für Bots verlockend. Nicht
   display:none — manche Bots überspringen versteckte Felder. */
.anfrage__topf {
  position: absolute; inline-size: 1px; block-size: 1px;
  overflow: hidden; clip-path: inset(50%); opacity: 0;
  pointer-events: none;
}

/* ============================================== Laufende Aktionen
   Zwei eigenständige Karten: Rabattaktion und Kombi sind damit sofort
   unterscheidbar und haben jeweils das richtige Sprungziel. */
.aktband {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(20rem, .85fr);
  gap: 1rem; margin-top: 1rem;
}
.aktband--einzeln { grid-template-columns: minmax(0, 42rem); justify-content: center; }
.aktkarte {
  position: relative; overflow: hidden; min-inline-size: 0; min-block-size: 10.5rem;
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: 1fr auto; gap: .8rem 1rem;
  padding: 1.2rem 1.25rem; border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  transition: transform .18s ease, box-shadow .18s ease;
}
.aktkarte:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.aktkarte--aktion {
  border: 1.5px solid var(--gold-300);
  background: linear-gradient(115deg, #FFFDF7 0%, var(--cream-100) 100%);
}
.aktkarte--kombi {
  border: 1.5px solid #2E7953;
  background: linear-gradient(125deg, #174D34 0%, #24724C 58%, #2D875B 100%);
  color: #fff;
}
.aktkarte__symbol {
  position: relative; z-index: 1; grid-row: 1 / -1;
  display: grid; place-items: center; inline-size: 52px; block-size: 52px;
  border-radius: 16px; background: var(--gold-300); color: var(--red-900);
  font-family: var(--font-display); font-size: 1.35rem; font-weight: 700;
}
.aktkarte--kombi .aktkarte__symbol { background: #F3CF72; }
.aktkarte__inhalt { position: relative; z-index: 1; min-inline-size: 0; }
.aktkarte__kicker {
  margin: 0 0 .4rem; font-size: .72rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .08em; color: #735214;
}
.aktkarte--kombi .aktkarte__kicker { color: #F6D985; }
.aktkarte__liste { display: grid; gap: .7rem; }
.aktkarte__eintrag + .aktkarte__eintrag {
  padding-top: .7rem; border-top: 1px dashed var(--gold-300);
}
.aktkarte__meta {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: .35rem .7rem;
}
.aktkarte__name { color: var(--ink-soft); font-size: .78rem; font-weight: 700; }
.aktkarte__frist {
  display: inline-flex; align-items: center; min-block-size: 26px;
  padding: .18rem .55rem; border-radius: 999px;
  background: #F6E7BC; color: #6F4D0D;
  font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .035em;
}
.aktkarte h2 {
  margin: .16rem 0 0; font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.45rem, 3vw, 2rem); line-height: 1.08; color: var(--red-700);
}
.aktkarte__bed { margin: .35rem 0 0; color: var(--ink-soft); font-size: .9rem; line-height: 1.45; }
.aktkarte__titelzeile { display: flex; align-items: center; gap: .75rem; }
.aktkarte--kombi h2 { color: #fff; }
.aktkarte__anzahl {
  display: grid; place-items: center; min-inline-size: 34px; block-size: 34px;
  padding-inline: .45rem; border-radius: 999px;
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.28);
  color: #fff; font-size: .82rem; font-weight: 800;
}
.aktkarte__kurz {
  max-inline-size: 29rem; margin: .45rem 0 0;
  color: rgba(255,255,255,.86); font-size: .88rem; line-height: 1.4;
}
.aktkarte__abpreis { margin: .35rem 0 0; color: #F6D985; font-size: .92rem; font-weight: 700; }
.aktkarte__cta {
  position: relative; z-index: 1; grid-column: 2;
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  justify-self: start; min-block-size: 44px; padding: .55rem 1rem;
  border-radius: 999px; background: var(--red-600); color: #fff;
  font-size: .86rem; font-weight: 750; text-decoration: none;
  box-shadow: 0 5px 14px rgba(75,13,11,.14);
}
.aktkarte__cta:hover { background: var(--red-700); color: #fff; }
.aktkarte__cta span { font-size: 1rem; transition: transform .16s ease; }
.aktkarte__cta:hover span { transform: translateX(3px); }
.aktkarte--kombi .aktkarte__cta { background: var(--gold-300); color: var(--red-900); }
.aktkarte--kombi .aktkarte__cta:hover { background: #F3CF72; color: var(--red-900); }
html[dir="rtl"] .aktkarte__cta span { transform: scaleX(-1); }
@media (max-width: 800px) {
  .aktband { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .aktkarte { grid-template-columns: 44px minmax(0, 1fr); padding: 1rem; gap-inline: .8rem; }
  .aktkarte__symbol { grid-row: 1; inline-size: 44px; block-size: 44px; border-radius: 13px; }
  .aktkarte__cta { grid-column: 1 / -1; inline-size: 100%; justify-self: stretch; }
}

/* Das Fenster. Eigenständig gebaut — die frühere Modal-Hülle wurde mit dem
   QR-Code entfernt. */
.aktfenster {
  position: fixed; inset: 0; z-index: 95;
  display: grid; place-items: center; padding: 1.2rem;
  background: rgba(26, 10, 9, .62);
  backdrop-filter: blur(4px);
}
.aktfenster[hidden] { display: none; }
.aktfenster__box {
  position: relative; inline-size: min(38rem, 100%);
  max-block-size: min(88dvh, 760px); overflow-y: auto; overscroll-behavior: contain;
  padding: 2rem clamp(1rem, 4vw, 1.8rem) 1.4rem; border-radius: var(--r-lg);
  background: var(--cream-50); text-align: start;
  box-shadow: 0 24px 60px rgba(26,10,9,.35);
  border-block-start: 5px solid var(--gold-500);
}
.aktfenster__box:focus { outline: none; }
@media (prefers-reduced-motion: no-preference) {
  .aktfenster__box { animation: aktAuf .26s cubic-bezier(.2,.9,.3,1) both; }
}
@keyframes aktAuf { from { opacity: 0; transform: translateY(14px) scale(.97); } }
.aktfenster__x {
  position: absolute; inset-block-start: .5rem; inset-inline-end: .5rem;
  inline-size: 44px; block-size: 44px; border: 0; border-radius: 50%;
  background: var(--cream-150); color: var(--ink); font-size: 1.5rem;
  line-height: 1; cursor: pointer;
}
.aktfenster__x:hover { background: var(--cream-200); }
.aktfenster__x:focus-visible { outline: 3px solid var(--gold-500); outline-offset: 2px; }
.aktfenster__kopf { text-align: center; padding-inline: 2rem; }
.aktfenster__kicker {
  margin: 0 0 .35rem; font-size: .78rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .12em; color: #8A6318;
}
.aktfenster__kopf h2 {
  margin: 0; font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.7rem, 5vw, 2.35rem); color: var(--red-700);
}
.aktfenster__kopf > p:last-child { margin: .25rem 0 0; color: var(--ink-soft); }
.aktfenster__inhalt { display: grid; gap: .85rem; margin-block: 1.2rem 1rem; }
.aktfenster__gruppe {
  padding: .9rem; border: 1px solid var(--cream-300); border-radius: var(--r-md);
  background: #fff;
}
.aktfenster__gruppetitel {
  margin: 0 0 .55rem; font-size: .72rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .07em; color: #735214;
}
.aktfenster__eintrag { margin: 0; padding: .25rem 0 .8rem; }
.aktfenster__eintrag + .aktfenster__eintrag {
  padding-top: .8rem; border-top: 1px dashed var(--cream-300);
}
.aktfenster__eintrag:last-child { padding-bottom: .2rem; }
.aktfenster__eintrag h3 {
  margin: 0 0 .3rem; font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.25rem, 4vw, 1.6rem); color: var(--red-700);
}
.aktfenster__eintrag p { margin: 0; color: var(--ink-soft); font-size: .95rem; }
.aktfenster__vorteil { color: var(--green-700, #1D6B44) !important; font-weight: 800; }
.aktfenster__frist {
  margin-top: .35rem !important; font-size: .8rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em; color: #8A6318 !important;
}
.aktfenster__setkopf { display: flex; align-items: flex-start; justify-content: space-between; gap: .7rem; }
.aktfenster__setkopf span {
  display: block; font-size: .68rem; font-weight: 750; text-transform: uppercase;
  letter-spacing: .06em; color: var(--ink-mute);
}
.aktfenster__setkopf h3 {
  margin: .1rem 0 0; font-family: var(--font-display); font-size: 1.3rem;
  font-weight: 600; color: var(--red-700);
}
.aktfenster__setkopf strong {
  flex: none; padding: .2rem .55rem; border-radius: 999px;
  background: #E7F4EC; color: #1D6B44; font-size: .76rem;
}
.aktfenster__setdesc { margin: .35rem 0 0; color: var(--ink-soft); font-size: .85rem; }
.aktfenster__setliste {
  list-style: none; display: flex; flex-wrap: wrap; gap: .25rem .75rem;
  margin: .65rem 0; padding: .6rem 0; border-block: 1px dashed var(--cream-300);
}
.aktfenster__setliste li { font-size: .82rem; color: var(--ink-soft); }
.aktfenster__setliste b { color: var(--red-600); }
.aktfenster__setfuss { display: flex; align-items: center; justify-content: space-between; gap: .8rem; }
.aktfenster__preis { font-size: 1.2rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.aktfenster__preis s { margin-inline-start: .25rem; color: var(--ink-mute); font-size: .82rem; font-weight: 500; }
.aktfenster__add { min-block-size: 44px; }
.aktfenster__add.is-added { background: var(--green-600); border-color: var(--green-600); color: #fff; }
.aktfenster__mehr { margin: .65rem 0 0; text-align: center; font-size: .78rem; color: var(--ink-mute); }

/* Mehrere Kombi-Angebote im Fenster brauchen eine sichtbare Fuge. Ohne sie
   begann das zweite Angebot unmittelbar unter dem Knopf des ersten, und
   beide lasen sich wie ein einziger Block. */
.aktfenster__set + .aktfenster__set {
  margin-block-start: .9rem;
  padding-block-start: .9rem;
  border-block-start: 1px solid var(--cream-300);
}
.aktfenster__ansehen { display: flex; inline-size: fit-content; margin-inline: auto; }
.aktfenster__spaeter {
  display: block; min-block-size: 44px; margin: .45rem auto 0; padding-inline: .8rem;
  border: 0; background: none;
  font: inherit; font-size: .84rem; color: var(--ink-mute);
  text-decoration: underline; text-underline-offset: .2em; cursor: pointer;
}
body.akt-offen { overflow: hidden; }
@media (max-width: 520px) {
  .aktfenster { padding: .65rem; }
  .aktfenster__box { max-block-size: 92dvh; border-radius: var(--r-md); }
  .aktfenster__setfuss { align-items: stretch; flex-direction: column; }
  .aktfenster__add { inline-size: 100%; justify-content: center; }
}

/* --------------- Nur Speisekarte: die Seite nimmt nichts an ---------------
   Der Wirt hat alle Bezahlarten abgeschaltet oder die Bestellannahme
   pausiert. Dann soll die Seite gar nicht erst zum Sammeln einladen:
   kein Warenkorb, keine Plus-Knöpfe. Bestellt wird per Telefon oder
   WhatsApp — beides steht groß im Lieferband und unten in der Leiste. */
body.nur-karte #cartBtn,
body.nur-karte .mrow__add,
body.nur-karte .addbtn,
body.nur-karte .variant,
body.nur-karte .dazu__chip,
/* Auch die Kombi-Karten und das Angebotsfenster haben eigene
   Hinzufügen-Knöpfe — sonst lädt die Seite dort weiter zum Sammeln ein. */
body.nur-karte .setcard__add,
body.nur-karte .aktfenster__add { display: none !important; }

/* Ohne Plus-Knopf wirkt die Preisspalte sonst angeschnitten. */
body.nur-karte .mrow__price { padding-inline-end: 0; }

.delband__zu {
  display: flex; flex-direction: column; gap: .9rem;
  align-items: center; text-align: center; padding: 1.4rem 1.1rem;
}
.delband__zu p {
  margin: 0; font-size: 1.02rem; font-weight: 600; color: var(--ink-soft);
  max-width: 46ch;
}
.delband__wege { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; }
.delband__wege .btn { min-inline-size: 11rem; }

/* ------------------------------ Halal-Siegel ------------------------------
   Sitzt oben rechts im Hero, dem Logo gegenüber. Auf schmalen Geräten ist
   der Hero mittig gesetzt — dort rückt das Siegel unter die Überschrift und
   bleibt in der Mitte, statt über dem Text zu kleben. */
.halalsiegel {
  position: absolute;
  /* Tiefer gesetzt und deutlich größer, damit die Umschrift auch auf dem
     unruhigen Foto lesbar bleibt. Der Abstand von oben wächst mit dem
     Fenster mit, sonst rutscht das Siegel auf großen Schirmen wieder in
     die Ecke. */
  inset-block-start: clamp(1.5rem, 6vw, 4.5rem);
  inset-inline-end: 0;
  inline-size: clamp(112px, 13.5vw, 182px);
  filter: drop-shadow(0 12px 30px rgba(12,7,3,.42));
  pointer-events: none;             /* rein bildlich, nichts zum Antippen */
}
.halalsiegel__mark { inline-size: 100%; block-size: auto; display: block; }

@media (max-width: 767px) {
  .halalsiegel {
    position: static; margin: 1.25rem auto 0;
    inline-size: clamp(124px, 34vw, 168px);
  }
}
/* Flaches Querformat: der Hero ist dort sehr niedrig, das Siegel darf nicht
   über die Überschrift wandern. */
@media (max-width: 1024px) and (max-height: 520px) {
  .halalsiegel { inline-size: 92px; inset-block-start: .75rem; }
}
@media print { .halalsiegel { display: none; } }