/* Red Onion Imbiss - dunkles Design (Vorlage final, 1:1) - alles lokal, keine externen Aufrufe */

/* Schriften lokal, latin */
@font-face{font-family:'Archivo';font-style:normal;font-weight:600;font-stretch:100%;font-display:swap;src:url("../fonts/archivo-latin.woff2") format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Archivo';font-style:normal;font-weight:700;font-stretch:100%;font-display:swap;src:url("../fonts/archivo-latin.woff2") format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Archivo';font-style:normal;font-weight:800;font-stretch:100%;font-display:swap;src:url("../fonts/archivo-latin.woff2") format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Merriweather';font-style:italic;font-weight:700;font-display:swap;src:url("../fonts/merriweather-latin.woff2") format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Merriweather';font-style:italic;font-weight:900;font-display:swap;src:url("../fonts/merriweather-latin.woff2") format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Work Sans';font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/worksans-latin.woff2") format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Work Sans';font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/worksans-latin.woff2") format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Work Sans';font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/worksans-latin.woff2") format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Work Sans';font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/worksans-latin.woff2") format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}

/* Animationen/Layout (Export) */
*{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{margin:0;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
  
  
    
  
      @keyframes revFadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
  .rev-stagger>figure{opacity:0;animation:revFadeUp .55s ease forwards}
  .rev-stagger>figure:nth-child(1){animation-delay:.02s}
  .rev-stagger>figure:nth-child(2){animation-delay:.16s}
  .rev-stagger>figure:nth-child(3){animation-delay:.30s}
  @media (prefers-reduced-motion: reduce){ .rev-stagger>figure{animation:none;opacity:1} }

  
  
  
  
  
/* Header */


.ro-header a:focus-visible,.ro-header button:focus-visible,.ro-hero-button:focus-visible{outline:3px solid #f6b73c;outline-offset:3px}

/* Hero + Laufbanner fuellen gemeinsam den ersten Screen unter dem Header */
.ro-firstscreen{display:flex;flex-direction:column;min-height:calc(100vh - var(--ro-hdr,80px));min-height:calc(100svh - var(--ro-hdr,80px));background:#0a0a0a}
.ro-hero{position:relative;isolation:isolate;overflow:hidden;flex:1 1 auto;min-height:0;display:flex;align-items:center;background:#0a0a0a}
.ro-hero-media{position:absolute;z-index:-3;top:0;right:0;width:76%;height:100%;overflow:hidden}
.ro-hero-media img{display:block;width:100%;height:100%;object-fit:cover;object-position:52% 59%}
.ro-hero-overlay{position:absolute;z-index:-2;inset:0;background:linear-gradient(90deg,#0a0a0a 0%,rgba(10,10,10,.98) 24%,rgba(10,10,10,.88) 39%,rgba(10,10,10,.4) 63%,rgba(10,10,10,.08) 100%)}
.ro-hero-inner{width:100%;max-width:1500px;margin:0 auto;padding:clamp(46px,6vh,76px) clamp(24px,5vw,78px);display:flex;align-items:center}
.ro-hero-content{width:min(100%,570px);text-align:left}


.ro-hero-title{max-width:520px;margin:0;font:italic 700 clamp(48px,4.5vw,68px)/1 'Merriweather',serif;letter-spacing:-.045em;text-wrap:balance;text-shadow:0 2px 18px rgba(0,0,0,.36)}
.ro-hero-title span{display:block;color:#f6ede1}
.ro-hero-title span+span{margin-top:.08em;color:#f6ede1}
.ro-hero-title .ro-ort{color:#e8442b}
.ro-hero-copy{max-width:520px;margin:clamp(20px,2.7vh,28px) 0 0;color:#ded2c4;font:400 clamp(18px,1.45vw,21px)/1.55 'Work Sans',sans-serif}
.ro-hero-button{display:inline-flex;align-items:center;justify-content:center;gap:10px;margin-top:clamp(24px,3vh,32px);padding:15px 22px;color:#fff;background:#e8442b;border:1px solid #f05a40;border-radius:15px;text-decoration:none;font:700 16px/1 'Archivo',sans-serif;transition:background-color .2s ease,transform .2s ease}
.ro-hero-button:hover{background:#cf3a22;transform:translateY(-1px)}

@keyframes roBanner{from{transform:translate3d(0,0,0)}to{transform:translate3d(calc(0px - var(--ro-banner-group-width)),0,0)}}


@media (max-width:767px){
  .ro-firstscreen{min-height:calc(100vh - var(--ro-hdr,70px));min-height:calc(100svh - var(--ro-hdr,70px))}
  .ro-hero{min-height:500px;align-items:flex-end}
  .ro-hero-media{inset:0;width:100%;height:100%}
  .ro-hero-media img{object-position:50% 51%}
  .ro-hero-overlay{background:linear-gradient(180deg,rgba(8,8,8,.18) 0%,rgba(8,8,8,.38) 28%,rgba(8,8,8,.78) 62%,rgba(8,8,8,.96) 100%)}
  .ro-hero-inner{padding:clamp(42px,8vh,72px) clamp(20px,6vw,32px) clamp(30px,5vh,46px);align-items:flex-end}
  .ro-hero-content{width:min(100%,540px)}
  
  .ro-hero-title{font-size:clamp(40px,12vw,58px);line-height:1.01;letter-spacing:-.04em}
  .ro-hero-copy{margin-top:18px;font-size:16px;line-height:1.5;max-width:440px}
  .ro-hero-button{margin-top:21px;padding:14px 19px;font-size:15px}
  
}
@media (max-height:720px) and (min-width:768px){
  .ro-hero-inner{padding-block:30px}.ro-hero-copy{margin-top:16px}.ro-hero-button{margin-top:18px}
  
}
@media (prefers-reduced-motion:reduce){
  .ro-header *,.ro-hero-button{transition:none}
  .ro-hero-button:hover{transform:none}
  
  
  
  
  
}

.rev-dots{display:none}
.acc-item.closed .acc-panel{display:none}
@media (prefers-reduced-motion: reduce){ .acc-item:not(.mpanel) .acc-panel{display:block !important} }
[id^="kat-"]{scroll-margin-top:var(--scroll-off)}


@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} }

/* Hover */


[data-h="7"]:hover{color:#e8442b !important}

/* ============================================================
   AB HIER: Editorial-Design (ehem. concepts/red-onion-editorial.css).
   Reihenfolge entspricht der frueheren Lade-Reihenfolge der zwei
   <link>-Tags — NICHT umsortieren, die Kaskade haengt daran.
   ============================================================ */

/* ============================================================
   Red Onion — Light Editorial
   Aufgeraeumt: pro Selektor genau EINE Definition (jeweils der
   zuletzt gueltige Wert), Reihenfolge Header -> Hero -> Bewertungen
   -> Ueber uns -> Speisekarte -> Abschluss -> Zeiten -> Kontakt
   -> Footer -> Media Queries.
   ============================================================ */

/* ---------- 1. Basis & Farbtoken ---------- */
.red-onion-editorial {
  /* Hoehe der klebenden Kopfzeile im festgeklebten Zustand (gemessen: 65px),
     plus 24px Luft = Sprung-Offset fuer alle Ankerziele. An EINER Stelle. */
  --roh-stuck: var(--header-h, 65px);
  --scroll-off: calc(var(--roh-stuck) + var(--anker-luft, 24px));
  --paper: #faf7f1;
  --paper-warm: #f3eee6;
  --paper-deep: #ede5da;
  --ink: #1b1917;
  --muted: #6e655e;
  --black: #0d0d0c;
  --charcoal: #171716;
  --red: #e8442b;
  --red-dark: #b62f20;
  --green: #4e9b58;
  --yellow: #e7aa36;
  --line: rgba(27, 25, 23, .14);
  --line-light: rgba(250, 247, 241, .16);

  /* Eine Leselinie fuer die ganze Seite: jeder Abschnitt sitzt in derselben
     Spalte, damit die linke Textkante beim Scrollen stehen bleibt.
     --container-wide gilt nur fuer die Speisekarte: ihre zweispaltigen
     Preiszeilen (Doener, Duerum, Teller, Nudeln) werden bei 1300px zu eng. */
  --container: 1300px;
  --container-wide: 1440px;
  --container-pad: clamp(18px, 3vw, 32px);

  /* --- Runde 30: Farbumkehr ---------------------------------------------
     Zwei Grundflaechen und die jeweils darauf gueltigen Textstufen. Regel
     fuer Rot: auf HELL immer --red-dark, auf DUNKEL immer --red.
     Neu erfunden sind nur die zwei Gruentoene ganz unten. */
  --sek-dunkel: #1a1917;
  --auf-dunkel: #f6ede1;
  --auf-dunkel-leise: rgba(246, 237, 225, .72);
  --auf-dunkel-still: rgba(246, 237, 225, .55);
  --linie-dunkel: rgba(246, 237, 225, .12);
  --strich-dunkel: rgba(246, 237, 225, .14);

  --sek-hell: var(--paper-warm);
  --auf-hell: #1b1917;
  --auf-hell-leise: rgba(27, 25, 22, .78);
  --auf-hell-still: rgba(27, 25, 22, .62);
  --linie-hell: rgba(27, 25, 22, .10);

  /* Statuspunkt: --green mit halbierter Buntheit, damit der Punkt eine
     Marke bleibt und kein Signallicht wird. Geschlossen ohne Buntheit. */
  --punkt-offen: #6b8a66;
  --punkt-zu: rgba(246, 237, 225, .38);
  /* Vegetarisch-Kennzeichnung (Runde 36: Blatt statt Sternchen). Warmes
     Olivgruen, passt zum Rest der Palette und erreicht auf --paper-warm
     5,29:1. */
  --veg-hell: #4a6b2f;
  background: var(--paper);
  color: var(--ink);
  overflow-x: hidden;
}

.red-onion-editorial,
.red-onion-editorial * {
  box-sizing: border-box;
}

.editorial-site {
  min-height: 100vh;
  overflow-x: hidden;
  background: var(--paper);
  color: var(--ink);
  font-family: "Work Sans", sans-serif;
}

.red-onion-editorial main,
.red-onion-editorial section {
  overflow-x: clip;
}

.red-onion-editorial a:focus-visible,
.red-onion-editorial button:focus-visible {
  outline: 3px solid var(--red);
  outline-offset: 3px;
}

/* ---------- 2. Header ---------- */


/* ---------- 3. Hero ---------- */
/* Voller erster Bildschirm: 100dvh (nicht 100vh) — der schwebende Header
   liegt darueber, das Foto reicht buendig bis zur Oberkante. */
.red-onion-editorial .ro-firstscreen {
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--black);
  /* Runde 33: die rote Trennkante entfaellt. Rot hat auf dieser Seite nur
     zwei Rollen - Markenakzent und Zustandsmarkierung. Als Trenner waere
     es eine dritte. Die Schnellinfo soll ausserdem als Sockel des Fotos
     gelesen werden, nicht als eigener Abschnitt. */
  border-bottom: 0;
}

/* Der Hero fuellt den Screen; Inhalt sitzt UNTEN, damit die Mitte des Fotos
   (Wagen mit Ausgabefenster + Streifen) frei und hell bleibt. */
.red-onion-editorial .ro-hero {
  min-height: 100vh;
  min-height: 100dvh;
  aspect-ratio: auto;
  display: flex;
  align-items: flex-end;
  background: var(--black);
}

.red-onion-editorial .ro-hero-media {
  inset: 0;
  width: 100%;
  height: 100%;
}

.red-onion-editorial .ro-hero-media img {
  object-position: center;
  filter: none;
}

/* Diagonale Abdunklung: LINKS kraeftig (traegt den linksbuendigen Text),
   nach RECHTS auslaufend, damit die rechte Bildhaelfte mit Bretterbude und
   Fensterfront sichtbar bleibt. (Auf Handy per Media-Query wieder senkrecht,
   weil der Text dort ueber die ganze Breite laeuft.) */
.red-onion-editorial .ro-hero-overlay {
  background:
    linear-gradient(100deg,
      rgba(10, 10, 9, .9) 0%,
      rgba(10, 10, 9, .78) 24%,
      rgba(10, 10, 9, .5) 46%,
      rgba(10, 10, 9, .18) 66%,
      rgba(10, 10, 9, 0) 88%);
}

/* Hero-Inhalt unten im Leseband, horizontal zentriert */
.red-onion-editorial .ro-hero-inner {
  max-width: 1480px;
  padding-top: clamp(52px, 7vh, 82px);
  padding-bottom: clamp(52px, 7vh, 82px);
}

/* Linksbuendiger Textblock auf einer linken Kante */
.red-onion-editorial .ro-hero-content {
  width: min(100%, 600px);
  margin-inline: 0;
  text-align: left;
}


.red-onion-editorial .ro-hero-title {
  max-width: 12ch;
  font-size: clamp(46px, 4.5vw, 68px);
  margin-inline: 0;
  line-height: 1;
  text-shadow: 0 2px 18px rgba(0, 0, 0, .28);
}

.red-onion-editorial .ro-hero-title span {
  color: #f6f0e7;
}

.red-onion-editorial .ro-hero-title span + span {
  margin-top: .1em;
  color: #f6f0e7;
}
.red-onion-editorial .ro-hero-title .ro-ort { color: var(--red); }

.red-onion-editorial .ro-hero-copy {
  max-width: 46ch;
  margin-top: clamp(20px, 2.8vh, 28px);
  margin-inline: 0;
  color: #ddd4c8;
  font-size: clamp(17px, 1.35vw, 20px);
  line-height: 1.62;
}

.editorial-hero-actions {
  margin-top: clamp(30px, 4vh, 42px);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
}

/* ============================================================
   Hero-Aktionen (Runde 3): kein Rot mehr, klare Hierarchie, jeder
   Button bringt seinen eigenen deckenden Grund mit — Lesbarkeit
   unabhaengig vom Foto. Kein Milchglas/backdrop-filter.
   PRIMAER  Speisekarte  = warme Creme-Flaeche, Ink-Text  (16,4:1)
   SEKUNDAER Oeffnungszeiten = dunkle Flaeche, Creme-Text (14,6:1)
   Die helle Flaeche tritt vor, die dunkle tritt zurueck -> Hierarchie
   ohne Farbe. Fokus = Doppelring (innen dunkel 17,6:1 auf Creme,
   aussen creme 15:1 auf Foto), sichtbar auf beiden Untergruenden.
   ============================================================ */
.red-onion-editorial .editorial-hero-actions .ro-hero-button {
  margin-top: 0;
  margin-inline: 0;
}

/* PRIMAER (gilt auch als Basis fuer beide Buttons) */
.red-onion-editorial .ro-hero-button {
  margin-top: clamp(24px, 3vh, 32px);
  margin-inline: auto;
  min-height: 50px;
  padding: 13px 22px;
  color: #1b1917;
  background: #faf7f1;
  border: 1px solid #e7dcc9;
  border-radius: 9px;
  box-shadow: none;
  font-weight: 700;
}

.red-onion-editorial .ro-hero-button:hover {
  color: #1b1917;
  background: #f0e7d6;
  border-color: #ddd0ba;
}

.red-onion-editorial .ro-hero-button:active {
  background: #e7dcc9;
}

.red-onion-editorial .ro-hero-button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2.5px #14110d, 0 0 0 5.5px #f4ece0;
}

/* SEKUNDAER — muss NACH der Primaer-Regel stehen (gleiche Spezifitaet) */


.red-onion-editorial #ro-dot,
.red-onion-editorial #ro-dot2 {
  box-shadow: none !important;
}

/* ---------- 4. Bewertungen (dunkel) ---------- */
.editorial-reviews {
  position: relative;
  padding: clamp(38px, 4vw, 52px) 0 clamp(38px, 4vw, 50px);
  background: var(--paper-warm);
  color: var(--ink);
}

.editorial-reviews::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 1px;
  background: var(--line);
}

.editorial-reviews-heading-wrap,
.editorial-reviews-stage-wrap {
  width: min(100%, 1160px);
  margin: 0 auto;
  padding: 0 clamp(20px, 5vw, 42px);
}

.editorial-reviews-heading {
  display: block;
  text-align: left;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px 48px;
  align-items: end;
  margin-bottom: clamp(14px, 1.8vw, 20px);
  text-align: center;
}

.editorial-reviews-heading > p:first-child {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--red);
  font: 700 12px/1 "Archivo", sans-serif;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.editorial-reviews-heading h2 {
  max-width: none;
  margin: 10px auto 13px;
  color: var(--ink);
  font: italic 700 clamp(34px, 5vw, 56px)/1.06 "Merriweather", serif;
  letter-spacing: -.04em;
}

.editorial-reviews-heading > p:last-child {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  justify-items: start;
  gap: 7px 10px;
  margin: 0;
}

.editorial-google-mark {
  width: 19px;
  height: 19px;
  flex: 0 0 19px;
}

.editorial-reviews-heading > p:last-child span:nth-of-type(1) {
  color: var(--ink);
  font: 800 22px/1 "Archivo", sans-serif;
  letter-spacing: 1px;
}

.editorial-reviews-heading > p:last-child span:nth-of-type(2) {
  color: var(--yellow);
  font: 700 16px/1 "Work Sans", sans-serif;
  letter-spacing: 1px;
}

.editorial-reviews-heading > p:last-child span:nth-of-type(3) {
  grid-column: auto;
  color: var(--muted);
  font: 400 13px/1.35 "Work Sans", sans-serif;
}

.editorial-review-stage {
  padding-top: 4px;
  border-top: 0;
}

.editorial-review-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 18px;
}

/* Alle sichtbaren Karten IMMER voll lesbar — kein Einblend-Dimmen der 2./3. Karte */
.red-onion-editorial .rev-stagger > figure {
  opacity: 1;
  animation: none;
}

/* Gruppe mit nur 2 Karten: zweispaltig und mittig statt Loch rechts */
.editorial-review-grid:has(> figure:first-child:nth-last-child(2)) {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  width: min(100%, 772px);
  margin-inline: auto;
}

.editorial-review-card {
  min-height: 0;
  margin: 0;
  padding: 17px 19px;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 9px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .18);
}

.editorial-review-stars {
  margin-bottom: 13px;
  color: var(--yellow);
  font-size: 15px;
  letter-spacing: 1.5px;
}

.editorial-review-quote {
  margin: 0;
  color: var(--ink);
  font: 400 15.5px/1.62 "Work Sans", sans-serif;
}

.editorial-review-author {
  margin-top: auto;
  padding-top: 17px;
  color: var(--muted);
  font: 700 13px/1 "Archivo", sans-serif;
}

/* Slider-Punkte auf ALLEN Breiten sichtbar (JS setzt display:flex + aktive Breite/Farbe) */
/* Punkte sitzen direkt unter den Karten, der CTA folgt darunter */
.editorial-reviews .rev-dots {
  display: flex !important;
  gap: 9px !important;
  justify-content: center !important;
  margin-top: clamp(18px, 1.9vw, 24px) !important;
}

.editorial-reviews .rev-dot {
  width: 10px;
  height: 8px;
  padding: 0;
  background: rgba(27, 25, 23, .22) !important;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  transition: width .25s ease, background .25s ease;
}

.editorial-reviews .rev-dot[aria-current="true"] {
  background: var(--red) !important;
}


.editorial-review-button {
  margin-top: 0;
  padding: 11px 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  color: #f6ede1;
  background: var(--charcoal);
  border: 1px solid rgba(13, 13, 12, .55);
  border-radius: 7px;
  font: 700 14px/1 "Archivo", sans-serif;
  text-decoration: none;
}

.editorial-review-button:hover,
.editorial-review-button:focus-visible {
  color: #fff;
  background: var(--red);
  border-color: var(--red);
}

/* ---------- 5. Ueber uns (hell, Teilung: Spiess-Foto + Text) ---------- */
.editorial-about {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 0;
  padding:
    clamp(62px, 7vw, 92px)
    max(clamp(20px, 5vw, 64px), calc((100vw - 1180px) / 2))
    clamp(62px, 7.5vw, 94px);
  display: grid;
  grid-template-columns: minmax(0, 40fr) minmax(0, 60fr);
  gap: clamp(32px, 4.5vw, 62px);
  align-items: center;
  background: var(--paper-warm);
  border-top: 0;
}

.editorial-about-image {
  position: relative;
  z-index: 2;
  grid-column: 1;
  grid-row: 1;
  width: 100%;
  height: clamp(340px, 33vw, 430px);
  margin: 0;
  object-fit: cover;
  object-position: center 42%;
  border: 1px solid rgba(27, 25, 23, .12);
  border-radius: 9px;
}

.editorial-about-scrim {
  display: none;
}

.editorial-about-content {
  position: relative;
  z-index: 3;
  grid-column: 2;
  grid-row: 1;
  align-self: center;
}

.editorial-about-copy {
  max-width: 46ch;
}

.editorial-about-copy .editorial-about-eyebrow {
  margin: 0 0 17px;
  color: var(--red);
  font: 700 11.5px/1 "Archivo", sans-serif;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.editorial-about-copy h2 {
  margin: 0 0 23px;
  color: #f6ede1;
  font: italic 700 clamp(31px, 3.5vw, 44px)/1.06 "Merriweather", serif;
  letter-spacing: -.035em;
}

.editorial-about-copy p {
  margin: 0;
  color: rgba(246, 237, 225, .74);
  font: 400 16px/1.78 "Work Sans", sans-serif;
}

.editorial-about-copy p + p {
  margin-top: 15px;
}

/* ---------- 6. Speisekarte (dunkel) ---------- */
/* Dunkler Grund mit feiner Struktur statt toter Flaeche:
   warme, kaum sichtbare Ungleichmaessigkeit (zwei braune Radials, Alpha .09/.06)
   + selbst gehostete Koernung als SVG-data-URI (feTurbulence, ~2%).
   Kontrast auf dem waermsten Punkt gerechnet: Text #f2ece2 14,4:1 ·
   Beschreibung #9a9088 5,4:1 · Nummer #948b81 5,0:1 · Kategorie-Anker
   #e8442b 4,25:1 (Grosstext, Ziel 3:1). */
/* Schiefertafel: selbst gehostetes, aufbereitetes Schiefer-Foto (Lichter
   gedeckelt, warm getoent) + ein warmer dunkler Wasch-Verlauf darueber, der
   die Flaeche auf die Helligkeit des alten Grunds abdunkelt — so bleiben ALLE
   Textfarben gueltig (hellster Komposit-Punkt ~ wie #1a1917). Bild liegt lokal
   in images/, keine externe Ressource. Textur bleibt sichtbar. */
.editorial-menu {
  /* Unterpolsterung war inhaltsunabhaengig bis 122px und erzeugte bei kurzen
     Kategorien eine grosse schwarze Flaeche. Jetzt 52-76px Abstand zur
     Bewertungssektion, gemessen ab dem letzten Gericht. */
  padding: clamp(26px, 2.6vw, 38px) 0 clamp(52px, 4.6vw, 76px);
  background-color: #121313;
  background-image: linear-gradient(180deg, rgba(255,255,255,.022) 0%, rgba(0,0,0,.16) 100%);
  color: #f6ede1;
}


/* Pills in einem gerundeten Rahmen-Behaelter, mittig (Neugestaltung) */


.red-onion-editorial .menu-items > div,
.red-onion-editorial .editorial-accordion-panel > div {
  border-bottom-color: rgba(250, 247, 241, .13) !important;
}

.red-onion-editorial #speisekarte span[style*="#8fae4f"] {
  color: #df6b58 !important;
}

/* EIN einheitliches Akkordeon-System fuer alle 9 Kategorien */
.editorial-accordions {
  margin-top: clamp(26px, 3.5vw, 40px);
  display: flex;
  flex-direction: column;
}

/* Im Tab-Modus ist immer genau EIN Panel sichtbar. Die Akkordeon-Trennlinien
   oben/unten haben damit keinen Bezug mehr — die letzte erzeugte unter
   „Getraenke & Snacks" eine Fremdlinie. overflow:hidden stammt aus der
   Auf-/Zuklapp-Animation und beschnitt nur noch Fokusringe. */
.editorial-accordion {
  background: transparent;
  border: 0;
  border-radius: 0;
}

.editorial-accordion-button {
  width: 100%;
  padding: 16px 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 14px;
  color: #f6ede1;
  background: transparent;
  border: 0;
  cursor: pointer;
  text-align: left;
}

/* Kategoriename nimmt die Breite, Zahl + Plus sitzen rechts */
.editorial-accordion-button > span:first-child {
  flex: 1 1 auto;
  min-width: 0;
}

/* Geoeffnet: Name wechselt auf Rot = Zustand "hier bin ich gerade".
   Textschatten haelt das Rot auch ueber helleren Schiefer-Adern lesbar. */
.editorial-accordion:not(.closed) .editorial-accordion-button > span:first-child {
  color: #e8442b !important;
  text-shadow: 0 1px 7px rgba(0, 0, 0, .8);
}
/* Hover-Hinweis + sichtbarer Tastaturfokus auf der ganzen Zeile */
.editorial-accordion-button:hover > span:first-child {
  color: #f4563b;
}

.editorial-accordion-button:focus-visible {
  outline: 2px solid rgba(246, 237, 225, .7);
  outline-offset: 3px;
}

.editorial-accordion-panel {
  padding: 0 0 20px;
}

/* ---------- 7. Gemeinsamer Abschluss (hell) ---------- */
.editorial-closing {
  padding: clamp(40px, 4.2vw, 58px) 0 clamp(44px, 4.6vw, 62px);
  background: var(--paper);
  color: var(--ink);
  border-top: 1px solid rgba(27, 25, 23, .12);
}


/* ---------- 8. Oeffnungszeiten ---------- */


/* heutiger Tag: farbig hinterlegte Zeile — kein Badge, damit die Uhrzeit
   buendig rechts stehen bleibt. Der Tag wird per JS tagesaktuell gesetzt. */


/* Gut zu wissen: Vorbestellung, Barzahlung, Service — schlichte Liste, keine Kacheln */


/* ---------- 9. Kontakt & Anfahrt ---------- */


/* Vorbestell-Hinweis direkt bei den Kontaktmoeglichkeiten */


/* 4 Kacheln (Telefon / WhatsApp / E-Mail / Standort) als 2x2-Raster */


/* Karte + Route-Button = EIN zusammenhaengender Block (keine Naht, kein Spalt) */


/* Social: schlichte Textlinks, keine Feeds/Skripte */


/* ---------- 10. Footer (dunkel) ---------- */
.editorial-footer {
  padding: clamp(48px, 6vw, 70px) 0 22px;
  /* Runde 33: der Footer setzt sich ueber den Ton ab, nicht ueber eine Linie.
     Sektionen #1a1917, Footer #0f0e0d. */
  background: #0f0e0d;
  color: #aaa19a;
  border-top: 0;
}

.editorial-footer-inner {
  width: min(100%, 1160px);
  margin: 0 auto;
  padding: 0 clamp(20px, 5vw, 42px);
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(4, minmax(0, 1fr));
  gap: clamp(28px, 4vw, 48px);
  align-items: start;
}

.editorial-footer-brand > span {
  display: block;
  color: #f4ede4;
  font: 800 20px/1 "Archivo", sans-serif;
  letter-spacing: -.02em;
}

.editorial-footer-brand > span > span {
  color: var(--red);
}

.editorial-footer-brand p {
  max-width: 30ch;
  margin: 12px 0 0;
  color: #8f8780;
  font: 400 13.5px/1.6 "Work Sans", sans-serif;
}

.editorial-footer-col h3 {
  margin: 0 0 12px;
  color: #f4ede4;
  font: 700 11px/1 "Archivo", sans-serif;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.editorial-footer-col p {
  margin: 0 0 7px;
  color: #a49b94;
  font: 400 13.5px/1.6 "Work Sans", sans-serif;
}


.editorial-footer a {
  color: #d4cbc2;
  text-decoration: none;
}

.editorial-footer a:hover {
  color: #fff;
}

.editorial-footer-meta {
  width: min(100%, 1160px);
  margin: clamp(32px, 4vw, 46px) auto 0;
  padding: 18px clamp(20px, 5vw, 42px) 0;
  display: flex;
  justify-content: space-between;
  gap: 8px 24px;
  color: #8f8780;
  border-top: 1px solid rgba(250, 247, 241, .11);
  font: 400 12.5px/1.5 "Work Sans", sans-serif;
}

.editorial-footer-meta p {
  margin: 0;
}

/* ============================================================
   11. Media Queries
   ============================================================ */

@media (min-width: 768px) and (max-width: 900px) {
  .red-onion-editorial .ro-hero {
    min-height: 610px;
  }

  .red-onion-editorial .ro-hero-title {
    font-size: clamp(44px, 6.2vw, 58px);
  }

  .editorial-review-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  /* Ungerade Kartenzahl: die letzte Karte steht sonst allein links —
     sie bekommt die volle Rasterbreite und wird mittig gesetzt. */
  .editorial-review-grid > figure:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    width: calc(50% - clamp(18px, 1.8vw, 24px) / 2);
    margin-inline: auto;
  }

  
}

/* Unter 1160px passen die 9 Kategorie-Kaertchen nicht mehr zentriert in eine Zeile
   -> linksbuendig starten und seitlich scrollen (statt zweiter Reihe). */

/* Unter 1000px liegt das Spiess-Foto vollflaechig hinter dem Text -> Text nach unten
   in den dunklen Teil des Verlaufs. */
@media (max-width: 999px) {
  /* schmal: Seitenverhaeltnis des Querformats wuerde den Hero platt druecken
     -> wieder feste Mindesthoehe, Handy-Bild (ebenfalls ohne Gaeste) fuellt sie */
  .red-onion-editorial .ro-hero {
    aspect-ratio: auto;
    min-height: 100vh;
    min-height: 100dvh;
    align-items: flex-end;
  }

  .red-onion-editorial .ro-hero-inner {
    align-items: flex-end;
  }

  /* schmal: Text laeuft ueber die ganze Breite -> Abdunklung wieder senkrecht
     (unten dunkel), sonst stuende der rechte Textrand auf hellem Foto. */
  .red-onion-editorial .ro-hero-overlay {
    background:
      linear-gradient(180deg,
        rgba(10, 10, 9, .16) 0%,
        rgba(10, 10, 9, 0) 24%,
        rgba(10, 10, 9, 0) 48%,
        rgba(10, 10, 9, .46) 68%,
        rgba(10, 10, 9, .84) 100%);
  }

}


@media (max-width: 767px) {
  .red-onion-editorial .ro-firstscreen {
    min-height: 100vh;
    min-height: 100dvh;
  }

  .red-onion-editorial .ro-hero {
    min-height: 100vh;
    min-height: 100dvh;
    align-items: flex-end;
  }

  .red-onion-editorial .ro-hero-media img {
    object-position: 50% 51%;
  }

  .red-onion-editorial .ro-hero-overlay {
    background:
      linear-gradient(180deg,
        rgba(10, 10, 9, .1) 0%,
        rgba(10, 10, 9, 0) 24%,
        rgba(10, 10, 9, 0) 46%,
        rgba(10, 10, 9, .45) 66%,
        rgba(10, 10, 9, .76) 82%,
        rgba(10, 10, 9, .93) 100%);
  }

  .red-onion-editorial .ro-hero-inner {
    padding: clamp(42px, 8vh, 70px) clamp(20px, 6vw, 32px) clamp(34px, 5vh, 46px);
    align-items: flex-end;
  }

  .red-onion-editorial .ro-hero-content {
    width: min(100%, 540px);
  }

  .red-onion-editorial .ro-hero-title {
    font-size: clamp(39px, 11.5vw, 55px);
    line-height: 1.01;
  }

  .red-onion-editorial .ro-hero-copy {
    font-size: 16px;
    line-height: 1.52;
  }

  .editorial-reviews {
    padding-top: 68px;
    padding-bottom: 60px;
  }

  .editorial-reviews-heading > p:last-child {
    width: fit-content;
    margin-right: auto;
    margin-left: auto;
  }

  .editorial-reviews-heading > p:last-child span:nth-of-type(3) {
    flex-basis: 100%;
  }

  .editorial-review-grid,
  .editorial-review-grid:has(> figure:first-child:nth-last-child(2)) {
    grid-template-columns: 1fr !important;
    width: 100%;
  }

  .editorial-review-card {
    min-height: 0;
  }

  .editorial-about {
    padding: 56px clamp(20px, 6vw, 34px) 60px;
    grid-template-columns: 1fr;
    gap: 26px;
  }

  .editorial-about-image {
    grid-column: 1;
    grid-row: 1;
    height: clamp(320px, 80vw, 460px);
    border-radius: 8px;
  }

  .editorial-about-content {
    grid-column: 1;
    grid-row: 2;
  }

  .editorial-about-copy {
    max-width: none;
  }

  .editorial-menu {
    padding-top: 34px;
    /* 80px waren auf dem Handy zu viel schwarze Flaeche unter dem letzten
       Gericht — Zielkorridor 48-64px. */
    padding-bottom: 56px;
  }

  

  

  

  

  

  

  

  .editorial-footer-inner {
    grid-template-columns: 1fr 1fr;
    gap: 30px 24px;
  }

  .editorial-footer-brand {
    grid-column: 1 / -1;
  }

  .editorial-footer-meta {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 480px) {
  .red-onion-editorial .ro-hero {
    min-height: 650px;
  }

  

  

  .red-onion-editorial .ro-hero-button {
    padding: 13px 17px;
  }

  

  

  

  .editorial-footer-inner {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   12. HEADER — Variante 1c "Buehne"
   Oben keine Leiste: Logo, Navigation und Kontakt stehen direkt
   auf dem Hero-Foto, gehalten von einem Verlauf an der Oberkante.
   Beim Scrollen wird daraus eine cremefarbene Leiste.

   Kontrast-Grundlage (gemessen am hellsten Fotobereich, 95. Perzentil
   = Grau 215, weisse Fassade): der Verlauf haelt im gesamten Textband
   mindestens Alpha .62 -> Wortmarke 6.2:1, Navigation 5.3:1.
   Deshalb steht die Wortmarke auf dem Foto KOMPLETT in Creme:
   Marken-Rot auf dem hellen Foto kaeme nur auf 1.8:1 und braeuchte
   einen fast deckend schwarzen Kasten. Das Rot traegt hier der
   Telefon-Button — die staerkste Handlung im Header.
   ============================================================ */

.roh {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 60;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color .3s ease, border-color .3s ease, box-shadow .3s ease;
}

.roh--solid {
  position: sticky;
}

/* Verlauf: weich auslaufend, kein Kasten, keine sichtbare Kante */
.roh-scrim {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 270px;
  pointer-events: none;
  background: linear-gradient(180deg,
    rgba(10, 10, 9, .72) 0%,
    rgba(10, 10, 9, .62) 52%,
    rgba(10, 10, 9, .32) 78%,
    rgba(10, 10, 9, 0) 100%);
  transition: opacity .3s ease;
}

.roh-row {
  position: relative;
  width: 100%;
  max-width: 1560px;
  margin: 0 auto;
  padding: 0 clamp(20px, 3vw, 46px);
  display: grid;
  align-items: center;
  column-gap: clamp(30px, 4vw, 74px);
  grid-template-columns: 1fr auto 1fr;
  grid-template-rows: 88px 52px;
  grid-template-areas:
    "social logo contact"
    "navs   navs navs";
}

/* ---------- Logo ---------- */
.roh-logo {
  grid-area: logo;
  justify-self: center;
  display: inline-flex;
  align-items: center;
  gap: 15px;
  color: #f6ede1;
  text-decoration: none;
  white-space: nowrap;
}

.roh-logo img {
  width: auto;
  height: 58px;
  display: block;
  flex: none;
  transition: height .3s ease;
}

.roh-wordmark {
  font: italic 700 25px/1 "Merriweather", Georgia, serif;
  letter-spacing: -.02em;
  transition: font-size .3s ease, color .3s ease;
}

/* ---------- Navigation ---------- */
.roh-navs {
  grid-area: navs;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(26px, 3vw, 44px);
  align-self: stretch;
  border-top: 1px solid rgba(246, 237, 225, .24);
  transition: border-color .3s ease;
}

.roh-nav {
  display: flex;
  align-items: center;
  gap: clamp(26px, 3vw, 44px);
}

.roh-nav a {
  position: relative;
  color: #e7dccb;
  text-decoration: none;
  font: 600 15px/1 "Work Sans", sans-serif;
  padding: 6px 0;
  transition: color .2s ease;
}

.roh-nav a::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 1.5px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s ease;
}

.roh-nav a:hover,
.roh-nav a:focus-visible {
  color: #fff;
  outline: none;
}

.roh-nav a:hover::after,
.roh-nav a:focus-visible::after,
.roh-nav a.is-active::after {
  transform: scaleX(1);
}

.roh-nav a.is-active {
  color: #fff;
}

.roh.is-stuck .roh-nav a.is-active,
.roh--solid .roh-nav a.is-active,
.roh-panel-nav a.is-active {
  color: #b62f20;
}

/* ---------- Kontakt: eine Gruppe, klare Hierarchie ---------- */
.roh-contact {
  grid-area: contact;
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.roh-call,
.roh-wa {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
  white-space: nowrap;
  border-radius: 10px;
  font: 700 14.5px/1 "Archivo", sans-serif;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

/* primaer */
.roh-call {
  padding: 12px 18px;
  color: #fff;
  background: #e8442b;
  border: 1px solid #e8442b;
}

.roh-call:hover,
.roh-call:focus-visible {
  color: #fff;
  background: #b62f20;
  border-color: #b62f20;
}

/* sekundaer */
.roh-wa {
  padding: 11px 16px;
  color: #f6ede1;
  background: transparent;
  border: 1px solid rgba(246, 237, 225, .5);
  font-weight: 600;
}

.roh-wa:hover,
.roh-wa:focus-visible {
  color: #fff;
  background: rgba(246, 237, 225, .13);
  border-color: #f6ede1;
}

.roh-ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
}

.roh-ic svg {
  display: block;
  width: 17px;
  height: 17px;
}

/* ---------- Social: klein, dezent, nachrangig ---------- */
.roh-social {
  grid-area: social;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 16px;
}

.roh-social a {
  display: inline-flex;
  color: #f6ede1;
  transition: color .2s ease, opacity .2s ease;
}

.roh-social svg {
  display: block;
  width: 17px;
  height: 17px;
}

.roh-social a:hover,
.roh-social a:focus-visible {
  color: #fff;
}

/* ---------- Burger (nur mobil) ---------- */
.roh-burger {
  grid-area: burger;
  justify-self: start;
  display: none;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  padding: 0;
  color: #f6ede1;
  background: transparent;
  border: 1px solid rgba(246, 237, 225, .38);
  border-radius: 10px;
  cursor: pointer;
  transition: color .3s ease, border-color .3s ease;
}

.roh-burger svg {
  display: block;
  width: 22px;
  height: 22px;
}

.roh-ic--close {
  display: none;
}

.roh.is-open .roh-ic--open {
  display: none;
}

.roh.is-open .roh-ic--close {
  display: inline-flex;
}

/* Fokus-Ring ohne dritte Farbe: auf dem Foto Creme, auf der Leiste
   Marken-Rot — beides deutlich sichtbar gegen seinen Untergrund. */
.roh a:focus-visible,
.roh button:focus-visible {
  outline: 3px solid #f6ede1;
  outline-offset: 3px;
}

.roh.is-stuck a:focus-visible,
.roh.is-stuck button:focus-visible,
.roh.is-open a:focus-visible,
.roh.is-open button:focus-visible,
.roh--solid a:focus-visible,
.roh--solid button:focus-visible {
  outline-color: #e8442b;
}

/* ============================================================
   Gescrollter Zustand + Rechtsseiten: cremefarbene Leiste
   Navigation 2/2 um das kleine Logo, Kontakt rechts.
   ============================================================ */
.roh.is-stuck,
.roh.is-open,
.roh--solid {
  /* Runde 33: vollstaendig deckend. Bei .97 schien der Seiteninhalt durch -
     das liest sich als Grafikfehler, nicht als Effekt. Kein Alpha, kein
     backdrop-filter. Die Kante nach unten uebernimmt die Abgrenzung. */
  background: var(--paper);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-bottom-color: rgba(27, 25, 23, .13);
}

.roh.is-stuck .roh-scrim,
.roh.is-open .roh-scrim,
.roh--solid .roh-scrim {
  opacity: 0;
}

.roh.is-stuck .roh-row,
.roh--solid .roh-row {
  grid-template-rows: 64px;
  grid-template-areas: "navA logo navB";
}

.roh.is-stuck .roh-social,
.roh--solid .roh-social {
  display: none;
}

.roh.is-stuck .roh-navs,
.roh--solid .roh-navs {
  display: contents;
}

.roh.is-stuck .roh-nav:first-child,
.roh--solid .roh-nav:first-child {
  grid-area: navA;
  justify-self: end;
}

.roh.is-stuck .roh-nav:last-child,
.roh--solid .roh-nav:last-child {
  grid-area: navB;
  justify-self: start;
}

.roh.is-stuck .roh-nav a,
.roh--solid .roh-nav a {
  color: #302c29;
  font-size: 14.5px;
}

.roh.is-stuck .roh-nav a:hover,
.roh.is-stuck .roh-nav a:focus-visible,
.roh--solid .roh-nav a:hover,
.roh--solid .roh-nav a:focus-visible {
  color: #b62f20;
}

.roh.is-stuck .roh-logo,
.roh--solid .roh-logo {
  color: #1b1917;
}

.roh.is-stuck .roh-logo img,
.roh--solid .roh-logo img {
  height: 38px;
}

.roh.is-stuck .roh-wordmark,
.roh--solid .roh-wordmark {
  font-size: 17px;
}

/* Marken-Rot kehrt zurueck, sobald der Untergrund Creme ist:
   #b62f20 auf Creme = 5.8:1 (AA), #e8442b waere nur 3.7:1. */
.roh.is-stuck .roh-wm-accent,
.roh--solid .roh-wm-accent {
  color: #b62f20;
}

.roh.is-stuck .roh-contact,
.roh--solid .roh-contact {
  position: absolute;
  top: 50%;
  right: clamp(20px, 3vw, 46px);
  transform: translateY(-50%);
}

.roh.is-stuck .roh-call,
.roh--solid .roh-call {
  padding: 10px 15px;
  font-size: 13.5px;
}

.roh.is-stuck .roh-wa,
.roh--solid .roh-wa {
  padding: 9px;
  color: #24211f;
  border-color: rgba(27, 25, 23, .26);
}

.roh.is-stuck .roh-wa:hover,
.roh.is-stuck .roh-wa:focus-visible,
.roh--solid .roh-wa:hover,
.roh--solid .roh-wa:focus-visible {
  color: #b62f20;
  background: rgba(27, 25, 23, .05);
  border-color: rgba(27, 25, 23, .5);
}

/* in der Leiste nur das Zeichen — spart Breite, Hierarchie bleibt */
.roh.is-stuck .roh-wa-label,
.roh--solid .roh-wa-label {
  display: none;
}

.roh.is-stuck .roh-burger,
.roh.is-open .roh-burger,
.roh--solid .roh-burger {
  color: #1b1917;
  border-color: rgba(27, 25, 23, .2);
}

/* Schmaler Desktop: fuer die 2/2-Navigation um das Logo fehlt in der
   Leiste die Breite (Navigation und Kontakt wuerden sich ueberlappen).
   Dort steht das Logo links, die Navigation mittig, Kontakt rechts. */
@media (min-width: 1000px) and (max-width: 1279px) {
  .roh-logo img {
    height: 52px;
  }

  .roh-wordmark {
    font-size: 22px;
  }

  .roh.is-stuck .roh-row,
  .roh--solid .roh-row {
    column-gap: clamp(20px, 2.6vw, 34px);
    grid-template-columns: auto 1fr auto;
    grid-template-areas: "logo navs contact";
  }

  .roh.is-stuck .roh-logo,
  .roh--solid .roh-logo {
    grid-area: logo;
    justify-self: start;
  }

  .roh.is-stuck .roh-navs,
  .roh--solid .roh-navs {
    grid-area: navs;
    display: flex;
    justify-self: center;
    gap: clamp(18px, 2.4vw, 30px);
    border-top: 0;
  }

  .roh.is-stuck .roh-nav,
  .roh--solid .roh-nav {
    gap: clamp(18px, 2.4vw, 30px);
  }

  .roh.is-stuck .roh-contact,
  .roh--solid .roh-contact {
    position: static;
    grid-area: contact;
    justify-self: end;
    transform: none;
  }
}

/* ---------- Menue-Panel (mobil) ---------- */
.roh-panel {
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
  padding: 6px clamp(16px, 4vw, 24px) 18px;
  display: flex;
  flex-direction: column;
  /* ebenfalls deckend: das Panel haengt an der Kopfleiste und liess
     denselben Durchschein-Effekt zu */
  background: var(--paper);
  border-top: 1px solid rgba(27, 25, 23, .12);
  border-bottom: 1px solid rgba(27, 25, 23, .13);
}

.roh-panel[hidden] {
  display: none;
}

.roh-panel-nav {
  display: flex;
  flex-direction: column;
}

.roh-panel-nav a {
  padding: 15px 4px;
  color: #1b1917;
  text-decoration: none;
  font: 600 17px/1 "Work Sans", sans-serif;
  border-bottom: 1px solid rgba(27, 25, 23, .1);
}

.roh-panel-wa {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin-top: 14px;
  padding: 13px 16px;
  color: #24211f;
  text-decoration: none;
  font: 700 15px/1 "Archivo", sans-serif;
  border: 1px solid rgba(27, 25, 23, .26);
  border-radius: 10px;
}

.roh-panel-wa:hover,
.roh-panel-wa:focus-visible {
  color: #b62f20;
  border-color: rgba(27, 25, 23, .5);
}

.roh-panel-legal {
  display: flex;
  gap: 20px;
  padding: 15px 4px 0;
}

.roh-panel-legal a {
  color: #6e655e;
  text-decoration: none;
  font: 600 14px/1 "Work Sans", sans-serif;
}

/* ============================================================
   Header mobil (< 1000px): Logo gross und mittig auf dem Foto,
   Anrufen bleibt sichtbar — nicht im Burger versteckt.
   ============================================================ */
@media (max-width: 999px) {
  .roh-scrim {
    height: 330px;
  }

  .roh-row,
  .roh.is-stuck .roh-row,
  .roh--solid .roh-row {
    column-gap: 12px;
    grid-template-columns: auto 1fr;
    grid-template-rows: 68px auto;
    grid-template-areas:
      "burger contact"
      "logo   logo";
  }

  .roh-burger {
    display: inline-flex;
  }

  /* die Desktop-Regeln fuer die Leiste (display:contents, Rasterfelder)
     duerfen hier NICHT durchschlagen — sonst zerfaellt das Raster */
  .roh-social,
  .roh-navs,
  .roh.is-stuck .roh-navs,
  .roh.is-open .roh-navs,
  .roh--solid .roh-navs,
  .roh.is-stuck .roh-social,
  .roh--solid .roh-social {
    display: none;
  }

  .roh-logo {
    grid-area: logo;
    flex-direction: column;
    gap: 10px;
    padding: 6px 0 24px;
  }

  .roh-logo img {
    height: 62px;
  }

  .roh-wordmark {
    font-size: 18px;
  }

  .roh-call {
    padding: 11px 15px;
    font-size: 14px;
  }

  .roh-wa {
    padding: 10px;
  }

  .roh-wa-label {
    display: none;
  }

  /* gescrollt/Rechtsseiten: flache Leiste, Logo mittig */
  .roh.is-stuck .roh-row,
  .roh.is-open .roh-row,
  .roh--solid .roh-row {
    grid-template-rows: 58px;
    grid-template-areas: "burger contact";
  }

  .roh.is-stuck .roh-logo,
  .roh.is-open .roh-logo,
  .roh--solid .roh-logo {
    position: absolute;
    top: 50%;
    left: 50%;
    flex-direction: row;
    gap: 9px;
    padding: 0;
    transform: translate(-50%, -50%);
  }

  .roh.is-stuck .roh-logo img,
  .roh.is-open .roh-logo img,
  .roh--solid .roh-logo img {
    height: 34px;
  }

  .roh.is-stuck .roh-wordmark,
  .roh.is-open .roh-wordmark,
  .roh--solid .roh-wordmark {
    display: none;
  }

  .roh.is-stuck .roh-contact,
  .roh.is-open .roh-contact,
  .roh--solid .roh-contact {
    position: static;
    transform: none;
  }

  /* In der flachen Leiste bleibt nur die wichtigste Handlung stehen:
     die ausgeschriebene Nummer. WhatsApp ist im Menue-Panel und in der
     Kontakt-Sektion erreichbar — sonst stiesse die Gruppe ans Logo. */
  .roh.is-stuck .roh-wa,
  .roh.is-open .roh-wa,
  .roh--solid .roh-wa {
    display: none;
  }

  .roh.is-stuck .roh-call,
  .roh.is-open .roh-call,
  .roh--solid .roh-call {
    padding: 9px 13px;
    font-size: 13px;
  }
}

/* Sehr schmale Geraete: enger setzen, aber die Nummer bleibt lesbar
   stehen — sie ist die wichtigste Handlung der Seite. */
@media (max-width: 379px) {
  .roh-row {
    padding-inline: 14px;
    column-gap: 8px;
  }

  .roh-call {
    gap: 7px;
    padding: 10px 11px;
    font-size: 12.5px;
  }

  .roh-wa {
    padding: 9px;
  }
}

/* ============================================================
   Folgen des schwebenden Headers: der Hero beginnt jetzt ganz
   oben, sein Inhalt braucht Luft unter der Kopfzeile; Sprungziele
   duerfen nicht unter der Leiste landen.
   ============================================================ */
.red-onion-editorial .ro-hero-inner {
  padding-top: clamp(150px, 20vh, 190px);
  padding-bottom: clamp(48px, 8vh, 78px);
}

.red-onion-editorial [id],
.red-onion-editorial .acc-item {
  scroll-margin-top: var(--scroll-off);
}

/* Sprungziel fuer Sektionen, die selbst keine Box haben (display: contents) */


/* Handy: geklebte Kopfzeile ist 59px hoch -> Offset entsprechend kleiner */
@media (max-width: 767px) {
  .red-onion-editorial {
    --roh-stuck: var(--header-h, 59px);
  }
}

@media (max-width: 999px) {
  .red-onion-editorial .ro-firstscreen {
    min-height: 100vh;
    min-height: 100dvh;
  }

  .red-onion-editorial .ro-hero-inner {
    padding-top: clamp(150px, 22vh, 200px);
  }
}

/* Handy: Karten gestapelt (1 Spalte), etwas hoeher damit das Essen wirkt */

@media (prefers-reduced-motion: reduce) {
  .red-onion-editorial *,
  .red-onion-editorial *::before,
  .red-onion-editorial *::after,
  .roh *,
  .roh {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ==========================================================================
   Layoutfassung vom 2026-07-31 uebernommen: Ueber uns, Bewertungen
   ========================================================================== */

/* --- Zwiebel-Ornament (Ueber uns / wiederverwendbar) --- */
.ro-ornament{display:flex;align-items:center;gap:14px;margin:0 0 22px}
.ro-ornament-line{display:block;width:52px;height:1px;background:var(--red);opacity:.55}
.ro-ornament svg{display:block;flex:none}

/* --- Ueber uns: abgesetzte Karte --- */
.editorial-about{
  display:block;background:var(--charcoal);
  padding:clamp(30px,3.2vw,48px) clamp(16px,2.5vw,34px);
}
.editorial-about-card{
  /* Hochformat links: etwas schmaler als beim frueheren Querformat, sonst
     wird die Bildsaeule gegenueber dem Textblock zu hoch. */
  display:grid;grid-template-columns:minmax(0,44fr) minmax(0,56fr);
  gap:clamp(34px,4vw,64px);align-items:center;
  max-width:1420px;margin:0 auto;
  padding:clamp(18px,1.9vw,30px) 0;
  background:none;border-radius:0;box-shadow:none;
}
/* Bildseite traegt den Doenerspiess vor der gluehenden Grillwand.
   Die Aufnahme ist hochformatig; bei 1,12 wurde die Krone des Spiesses
   angeschnitten. Die Datei liegt im Verhaeltnis 0,90 vor; der Rahmen steht
   auf 0,98, damit die Bildsaeule nicht ueber den Textblock hinauswaechst.
   Der Unterschied betraegt 8 % der Bildhoehe und wird ueber object-position
   ueberwiegend unten weggenommen (Haende und Schneidegeraet), damit die
   Krone des Spiesses oben stehen bleibt. */
.editorial-about-image{
  grid-column:1;grid-row:1;width:100%;height:auto;aspect-ratio:1.15/1;
  border-radius:16px;border:1px solid rgba(246,237,225,.14);
  box-shadow:0 18px 44px -26px rgba(0,0,0,.7);
}
/* Lesebreiten: Ueberschrift kompakter als der Fliesstext, damit sie als
   Block wirkt und nicht ueber die ganze Spalte laeuft */
.editorial-about-copy{max-width:540px}
.editorial-about-copy h2{max-width:470px}
.editorial-about-copy h2{font-size:clamp(32px,3.5vw,50px);line-height:1.08}
.editorial-about-copy p{font-size:clamp(16px,1.15vw,17.5px);line-height:1.72}
.editorial-about-content{grid-column:2;grid-row:1}
.editorial-about-copy h2{font-style:normal;letter-spacing:-.035em}

/* --- Bewertungen: CTA-Band --- */


.rev-cta-text h3{margin:0}
.rev-cta-text p{margin:5px 0 0}
.editorial-review-button{display:inline-flex;align-items:center;gap:10px;white-space:nowrap}

/* --- Bewertungen: Info-Leiste --- */


@media (max-width:999px){
  .editorial-about-card{grid-template-columns:1fr;gap:26px;padding:clamp(18px,4vw,26px);border-radius:16px}
  /* Bild oben, Text darunter. Breite gedeckelt statt Hoehe beschnitten:
     so bleibt der Spiess vollstaendig und die Bildhoehe im Rahmen. */
  .editorial-about-image{
    grid-column:1;grid-row:1;height:auto;aspect-ratio:.98/1;
    width:min(100%,420px);margin-inline:auto;
  }
  .editorial-about-content{grid-column:1;grid-row:2}
  .editorial-about-copy,.editorial-about-copy h2{max-width:none}
  .ro-ornament{margin-bottom:18px}
  .ro-ornament-line{width:38px}
  
  
  
}

/* --- Hero-Ausschnitt fuer das neue Standfoto (Schirm/Wagen aus dem dunklen
   Verlaufsbereich nach rechts ruecken, damit der Stand frei steht) --- */
.red-onion-editorial .ro-hero-media img{object-position:22% 56%}
@media (max-width:999px){ .red-onion-editorial .ro-hero-media img{object-position:50% 52%} }
@media (max-width:767px){ .red-onion-editorial .ro-hero-media img{object-position:50% 52%} }
/* individuelle Ausschnitte je Motiv (gemessene Schwerpunkte) */


/* --- Menuelisten: schmalere Leselinie, dunkle Sektion bleibt voll breit ---- */
.editorial-accordions{max-width:1000px;margin-inline:auto}

/* --- Footer kompakter ------------------------------------------------------ */
.editorial-footer-inner{
  grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,.7fr);
  gap:clamp(24px,3vw,48px);
  padding-block:clamp(34px,4vw,52px);
}
.editorial-footer-col p{margin:3px 0}
.editorial-footer-meta{padding-block:clamp(14px,1.6vw,20px)}

@media (max-width:820px){
  .editorial-footer-inner{grid-template-columns:1fr 1fr;gap:26px 22px}
}
@media (max-width:700px){
  .editorial-footer-inner{grid-template-columns:1fr;gap:22px}
}

/* Ueber-uns-Bild ist jetzt <picture> -> Bild darin fuellt den Rahmen ohne Verzerrung */
picture.editorial-about-image{display:block;overflow:hidden}
picture.editorial-about-image img{
  display:block;width:100%;height:100%;object-fit:cover;object-position:50% 13%;
  border-radius:inherit;
}
/* ==========================================================================
   RUNDE 9 — Schnellinfo + Speisekarte zweispaltig
   Ersetzt die Bloecke der Runden 5 bis 8 (gestapelte Karte, zentrierter Kopf,
   volle Bildbuehne). Aufbau jetzt:
     Kopfzeile (Eyebrow/Ueberschrift links, Vorbestell-Knopf rechts)
     Kategorieleiste ueber der vollen Kartenbreite
     Raster: Bildkarte links (58-62 %) | Listenkarte rechts (38-42 %)
   Beide Karten sind gleich hoch; die Listenkarte scrollt ab 1000px INNEN,
   damit die Sektion nicht wieder ueber mehrere Bildschirme laeuft.
   ========================================================================== */

/* ---------- Schnellinfo direkt unter dem Hero ---------- */

/* Status: Uhr steht UEBER dem Statustext, alles als ein zentrierter
   vertikaler Block. Die Spalte liegt bereits auf der Seitenmitte
   (40fr zwischen 30fr/30fr) — zentriert wird nur der Inhalt.
   Telefon und Bewertung bleiben unveraendert linksbuendig. */


/* ---------- Speisekarte: Rahmen ----------
   1760px waren zu breit: die Gerichtsspalten wurden ~490px lang. 1400px
   ergibt Spalten um 390px = ruhige Speisekarten-Lesebreite. */
.menu-shell{width:min(1520px, calc(100% - 64px));margin-inline:auto;padding-inline:0}

/* Kopf steht mittig ueber dem GESAMTEN Bereich, nicht ueber der Bildspalte */
.menu-kopf{
  display:block;text-align:center;
  margin-bottom:clamp(16px,2vw,24px);
}


/* ---------- Kategorieleiste ---------- */
.mtabs{
  display:flex;gap:11px;justify-content:safe center;margin:clamp(10px,1.2vw,16px) 0 clamp(24px,2.8vw,34px);
  overflow-x:auto;overflow-y:hidden;
  /* 9px oben/unten: der Fokusring (3px Kontur + 3px Versatz) passt hinein,
     overflow-y:hidden wuerde ihn sonst abschneiden. */
  padding:9px 0 11px;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;
  scroll-snap-type:x proximity;
}
.mtabs::-webkit-scrollbar{display:none}
.mtab{
  appearance:none;cursor:pointer;flex:0 0 auto;scroll-snap-align:center;
  padding:12px 26px;border-radius:999px;white-space:nowrap;
  border:1px solid rgba(246,237,225,.22);background:rgba(255,255,255,.035);
  font:600 15.5px/1.15 'Work Sans',sans-serif;color:rgba(246,237,225,.8);
  transition:border-color .18s ease,color .18s ease,background-color .18s ease;
}
.mtab:hover{color:#f6ede1;border-color:rgba(246,237,225,.4);background:rgba(255,255,255,.06)}
.mtab.is-active{background:#e8442b;border-color:#e8442b;color:#fff}
.mtab:focus-visible{outline:3px solid #f6b73c;outline-offset:3px}

/* ---------- Raster: Bildkarte | Listenkarte ---------- */
.menu-grid{display:grid;grid-template-columns:1fr;gap:20px}

/* Nebeneinander erst ab 1101px. Bei 1024 blieb sonst neben der einspaltigen
   Pizza-Liste eine ueber 900px hohe Leerspalte stehen — gestapelt nutzt das
   Bild dort die volle Breite und die Liste beginnt direkt darunter. */
@media (min-width:1101px){
  .menu-grid{grid-template-columns:42fr 58fr;gap:clamp(32px,2.6vw,42px);align-items:start}
}
/* Ab 1500px traegt die Bildseite mehr Gewicht, ohne dass die Gerichtsspalten
   darunter leiden — der Container waechst dort mit. */
@media (min-width:1500px){
  .menu-grid{grid-template-columns:44fr 56fr}
}

/* ---------- linke Karte: grosses Bild + Kartenfuss ----------
   Keine Kartenbox: oben das Foto mit feiner Kante, darunter ein abgesetzter
   Fussbereich mit Kennzeichnung, Gerichtname, Kurzbeschreibung und einem
   ruhigen Verweis zurueck auf die Kategorieleiste. */
.menu-bildkarte{position:relative;display:flex;flex-direction:column}

/* Kennzeichnung liegt oben links AUF dem Foto (wie im Mockup).
   Gemessen: Creme auf der unbehandelten Zone oben links kommt nur auf
   3,99-4,61:1 (Doener am schlechtesten) — deshalb der Verlauf unten.
   Marken-Rot waere dort bei ~1,8:1 und ist als Textfarbe nicht nutzbar. */
.menu-karte-eyebrow{
  position:absolute;z-index:3;top:clamp(11px,1.2vw,16px);left:clamp(14px,1.5vw,22px);
  margin:0;padding:0;
  /* dieselbe lokale Serif wie „Was darf's heute sein?" — kursiv, gemischte
     Schreibweise, gastronomisch statt technisch. Merriweather liegt lokal nur
     als italic 700/900 vor, deshalb genau diese Kombination. */
  font:italic 700 clamp(17px,1.5vw,23px)/1.15 'Merriweather',Georgia,serif;
  letter-spacing:.005em;text-transform:none;color:#f6ede1;
  text-shadow:0 1px 8px rgba(0,0,0,.7);
}
/* weicher Verlauf am oberen Bildrand — kein Kasten, keine Plakette */
.ms-viewport::before{
  content:'';position:absolute;inset:0 0 auto 0;height:28%;z-index:2;
  background:linear-gradient(180deg, rgba(0,0,0,.46) 0%, rgba(0,0,0,.20) 55%, rgba(0,0,0,0) 100%);
  pointer-events:none;
}

/* Gerichtname und Kurzbeschreibung stehen bereits rechts in der Karte.
   Unter dem Bild werden sie deshalb nicht mehr gezeigt — die figcaption
   bleibt fuer Screenreader bestehen und wird vom Slider weiter gepflegt. */
.ms-caption{
  position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;
}

/* Aufklapp-Schalter unter der Gerichtsliste. Erscheint nur, wenn wirklich
   Gerichte verborgen sind — das Skript setzt/entfernt hidden. */
.menu-mehr{
  position:relative;
  display:flex;width:fit-content;margin:clamp(24px,2.2vw,32px) auto 0;
  align-items:center;gap:9px;
  appearance:none;background:none;border:0;cursor:pointer;
  padding:0 0 3px;
  font:600 14.5px/1.2 'Work Sans',sans-serif;letter-spacing:.01em;
  color:rgba(246,237,225,.84);
  border-bottom:1px solid rgba(246,237,225,.26);
  transition:color .18s ease,border-color .18s ease;
}
.menu-mehr[hidden]{display:none}
/* Tippflaeche auf ~44px vergroessern, ohne die Optik zu veraendern */
.menu-mehr::before{content:'';position:absolute;inset:-12px -8px -9px}
.menu-mehr svg{
  width:15px;height:15px;flex:none;
  transform-origin:50% 50%;transition:transform .18s ease;
}
/* aufgeklappt zeigt der Winkel nach oben — kein seitliches Wandern, sonst
   wuerde der Hover-Zustand die Drehung ueberschreiben */
.menu-mehr[aria-expanded="true"] svg{transform:rotate(180deg)}
.menu-mehr:hover{color:#f6ede1;border-bottom-color:rgba(232,68,43,.8)}
.menu-mehr:focus-visible{outline:3px solid #f6b73c;outline-offset:4px;border-radius:2px}
@media (prefers-reduced-motion:reduce){ .menu-mehr svg{transition:none} }
.menu-bildkarte .menu-slider{position:relative;margin:0}
/* Haarlinie statt Kartenrahmen — box-shadow, damit das Raster unberuehrt bleibt */
.ms-viewport{
  position:relative;overflow:hidden;border-radius:10px;cursor:pointer;
  box-shadow:0 0 0 1px rgba(246,237,225,.13);
}
.ms-viewport:focus-visible{outline:3px solid #f6b73c;outline-offset:3px}
/* 4/3 = exaktes Format der Bilddateien (1600x1200) -> kein Beschnitt */
.ms-track{position:relative;aspect-ratio:4/3}
.ms-slide{
  position:absolute;inset:0;margin:0;
  opacity:0;visibility:hidden;
  transition:opacity .6s ease,visibility 0s linear .6s;
}
.ms-slide.is-active{opacity:1;visibility:visible;transition:opacity .6s ease,visibility 0s}
.ms-slide picture{display:block;width:100%;height:100%}
.ms-slide img{display:block;width:100%;height:100%;object-fit:cover}
/* Bildlage je Gericht, aus der gemessenen Speisenlage der 4K-Quellen */
.ms-slide[data-kat="doener"] img{object-position:50% 50%}
.ms-slide[data-kat="duerum"] img{object-position:50% 50%}
.ms-slide[data-kat="pizza"] img{object-position:50% 50%}
.ms-slide[data-kat="calzone"] img{object-position:50% 50%}

.ms-arrow{
  position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  width:34px;height:34px;border-radius:50%;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(246,237,225,.16);
  background:rgba(18,19,19,.42);color:#f6ede1;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  transition:background-color .18s ease,border-color .18s ease;
}
.ms-arrow svg{width:19px;height:19px}
.ms-arrow:hover{background:#e8442b;border-color:#e8442b}
.ms-arrow:focus-visible{outline:3px solid #f6b73c;outline-offset:3px}
.ms-prev{left:12px}
.ms-next{right:12px}
.ms-dots{
  position:absolute;left:0;right:0;bottom:12px;z-index:3;
  display:flex;justify-content:center;gap:9px;
}
.ms-dot{
  width:8px;height:8px;padding:0;border-radius:50%;cursor:pointer;
  border:1px solid rgba(255,255,255,.7);background:rgba(0,0,0,.3);
  transition:background-color .18s ease,transform .18s ease;
}
.ms-dot.is-active{background:#e8442b;border-color:#e8442b;transform:scale(1.3)}
.ms-dot:focus-visible{outline:3px solid #f6b73c;outline-offset:3px}

.ms-caption{flex:none;padding:0;display:block}
.ms-caption-name{
  display:block;font:700 clamp(20px,1.5vw,23px)/1.2 'Archivo',sans-serif;color:#f6ede1;
}
.ms-caption-text{
  display:block;margin-top:6px;max-width:48ch;
  font:400 14px/1.55 'Work Sans',sans-serif;color:rgba(246,237,225,.68);
}

/* ---------- rechte Karte: aktive Kategorie ---------- */
.menu-listenkarte{position:relative}
.menu-listenkarte .editorial-accordions{max-width:none;margin:0}
.mpanel{border:0;padding:0}
.mpanel[hidden]{display:none}

.mpanel-side{padding:0 0 12px;margin-bottom:14px;border-bottom:1px solid rgba(246,237,225,.12)}
.mpanel-head{
  margin:0;display:flex;align-items:baseline;gap:10px;
  border:0;background:none;padding:0;cursor:default;
}
.mpanel-side > p{
  margin:7px 0 0;font:400 14px/1.55 'Work Sans',sans-serif;
  font-style:italic;color:#a79d92;
}
.mpanel .acc-panel{padding:0}


.menu-body{display:block}

/* Hinweis, dass weiterer Inhalt folgt */


/* ---------- Tablet und Handy: kein verschachteltes Scrollen ---------- */
@media (max-width:1100px){
  .menu-grid{grid-template-columns:1fr}
}
@media (max-width:700px){
  .menu-shell{width:calc(100% - 32px)}
  .mtabs{margin-inline:-16px;padding-inline:16px}
  .ms-arrow{width:34px;height:34px}
  .ms-arrow svg{width:17px;height:17px}
}
@media (prefers-reduced-motion:reduce){
  .ms-slide{transition:none}
}

/* echtes Red-Onion-Maskottchen im Zier-Ornament */
.ro-ornament-logo{display:block;height:30px;width:auto;flex:none}
@media (max-width:700px){ .ro-ornament-logo{height:26px} }

/* ==========================================================================
   RUNDE 10 — Bewertungen hell: nur noch der gruene Google-Knopf und der
   Verzicht auf Anfuehrungszeichen. Die Farben stehen jetzt direkt in
   Abschnitt 4 oben, nicht mehr als Override hier unten.
   ========================================================================== */
.editorial-review-quote{quotes:none}
.editorial-review-quote::before,.editorial-review-quote::after{content:none}
/* Karten redaktionell statt SaaS: warme Flaeche, feine Linie, kein Schatten,
   ruhige Rundung, grosszuegiger Innenabstand. Die Bewertung soll wirken,
   nicht der Rahmen. */
.editorial-review-card{
  box-shadow:none;
  background:var(--paper);
  border:1px solid rgba(27,25,23,.10);
  border-radius:6px;
  padding:clamp(20px,1.9vw,26px) clamp(20px,1.9vw,26px) clamp(18px,1.7vw,24px);
}
.editorial-review-stars{margin-bottom:clamp(12px,1.2vw,15px);font-size:15.5px}
.editorial-review-quote{font-size:15.5px;line-height:1.66}
.editorial-review-author{
  margin-top:auto;padding-top:clamp(16px,1.6vw,22px);
  font:700 12.5px/1 'Archivo',sans-serif;letter-spacing:.04em;
  text-transform:uppercase;color:var(--muted);
}
/* Kartenflaeche breiter als der Kopf, aber nie bis an den Seitenrand */
.editorial-reviews-stage-wrap{width:min(100%,1320px)}
.editorial-review-grid{gap:clamp(18px,1.8vw,24px)}
/* Gruppe 4 hat nur zwei Karten: gemeinsam zentriert, gleiche Kartenbreite
   wie in den Dreiergruppen — keine leere dritte Spalte. */
/* Nur im dreispaltigen Raster (ab 901px): zwei Karten exakt so breit wie in
   den Dreiergruppen — 2 x (100% - 2g)/3 + g = (200% - g)/3. Darunter gilt das
   zwei- bzw. einspaltige Raster, dort waere die Sonderbreite falsch. */
@media (min-width:901px){
  .editorial-review-grid:has(> figure:first-child:nth-last-child(2)){
    width:min(100%, calc((200% - clamp(18px,1.8vw,24px)) / 3));
  }
}
/* Punkte: klein, aber mit ausreichender Tippflaeche */
.editorial-reviews .rev-dot{position:relative}
.editorial-reviews .rev-dot::before{content:'';position:absolute;inset:-16px -8px}
.editorial-reviews .rev-dot:focus-visible{outline:3px solid var(--yellow);outline-offset:5px}

.editorial-review-button:hover,.editorial-review-button:focus-visible{
  background:var(--red);border-color:var(--red);color:#fff;
}
.editorial-review-button:focus-visible{outline:3px solid var(--yellow);outline-offset:3px}
.editorial-review-button svg{flex:none}

/* ==========================================================================
   RUNDE 10 — Farbrhythmus dunkel/hell und Feinschliff
   Hero · Schnellinfo · Speisekarte  = dunkel
   Bewertungen                        = hell (warmes Papier)
   Ueber uns                          = dunkel
   Oeffnungszeiten · Kontakt          = hell
   Footer                             = dunkel
   ========================================================================== */
.editorial-about{color:#f6ede1}
.editorial-about .ro-ornament-line{background:rgba(232,68,43,.55)}
.editorial-about-scrim{display:none}

/* rechte Menuekarte: groessere Kategorieueberschrift */


/* Sterne: Gold bleibt, aber auf hellem Papier eine Stufe tiefer —
   #e7aa36 kam dort nur auf 1,8:1 Kontrast. Jetzt 3,7-4,0:1. */
.editorial-reviews .editorial-review-stars,
.editorial-reviews-heading > p:last-child span:nth-of-type(2){color:#a3720c}

/* ==========================================================================
   RUNDE 12 — ruhiges System: Zweispalten-Speisenliste, betonter Status,
   Favoriten-Kopf, Kontakt-Raster. Ersetzt Karten-, Scroll- und Zaehlerbau.
   ========================================================================== */
/* Gerichte der aktiven Kategorie in zwei gleichwertigen Spalten */
/* Spaltenzahl nach Inhaltsmenge.
   Zwei Spalten erst ab 1200px Viewport: darunter waere die Gerichtsspalte
   unter 300px und Name, Zutaten und Preis wuerden sich draengen.
   Kategorien mit hoechstens drei Gerichten tragen data-spalten="1" und
   bleiben immer einspaltig — die beiden .menu-column stapeln dann
   untereinander, es entsteht also keine leere zweite Spalte. */
.menu-spalten{display:grid;grid-template-columns:1fr;gap:0 clamp(30px,3vw,54px)}
@media (min-width:1300px){
  .menu-spalten{grid-template-columns:1fr 1fr;gap:0 clamp(36px,2.8vw,52px);position:relative}
  /* dezente Mittellinie, exakt in der Rasterluecke; beginnt unter Ueberschrift
     und Erklaerung (die stehen ausserhalb) und endet mit der Gerichtsliste.
     Gleiche Deckkraft wie die waagerechten Linien. Nur zweispaltig. */
  .mpanel:not([data-spalten="1"]) .menu-spalten::after{
    content:'';position:absolute;top:0;bottom:0;left:50%;width:1px;
    transform:translateX(-.5px);
    background:rgba(246,237,225,.12);pointer-events:none;
  }
}
.mpanel[data-spalten="1"] .menu-spalten{grid-template-columns:1fr;max-width:660px}
.menu-column{min-width:0}
.menu-column .menu-items{display:block}
/* Letzte Zeile je Spalte ohne Unterlinie: sonst steht unter der kuerzeren
   Spalte eine Linie ins Leere und unter der laengeren eine zweite auf anderer
   Hoehe. Die Breiten stehen inline im Markup, daher !important. */
/* Verborgene Gerichtszeilen: das hidden-Attribut allein reicht nicht, weil die
   Zeilen ein inline display:flex tragen. Welche Zeile die letzte SICHTBARE
   ihrer Spalte ist, markiert das Skript — in CSS ist das nicht ausdrueckbar. */
.menu-items > div[hidden]{display:none !important}
.menu-column .menu-items > div.ist-letzte{border-bottom:0 !important}

/* Preisspalten: 84px waren gemessen 28px zu breit (breitester Preis „11,00 €"
   = 56px). Bei zwei Preisspalten frass das 56px, die dem Gerichtnamen fehlten —
   bei 1366px blieben ihm nur 132px. Jetzt 66px je Spalte, Abstand 12px:
   feste Breite bleibt (Preise springen zwischen Kategorien nicht), rechte Kante
   bleibt buendig, der Name gewinnt 40px. Die Breiten stehen inline im Markup,
   deshalb ist !important hier unvermeidbar. */

/* Schnellinfo: Status traegt die staerkste Gewichtung.
   22-24px auf allen Desktopbreiten (1024 -> 22, 1440 -> 23, 1920 -> 24);
   Telefon und Bewertung bleiben bei 17px, also nur leicht zurueckgenommen. */
/* Punkt laeuft wieder in der Zeile mit: seit die Uhr die Gruppe anfuehrt,
   wird die GRUPPE zentriert, nicht mehr die einzelne Textzeile. */

/* Bewertungs-CTA: kompakte Zeile zwischen Zusammenfassung und Karten */
.editorial-review-cta{
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  margin:0 0 clamp(20px,2.6vw,28px);padding:13px clamp(16px,2vw,22px);
  border:1px solid var(--line);border-radius:12px;background:var(--paper);
}
.rev-cta-text h3{margin:0;color:var(--ink);font:italic 700 clamp(17px,1.6vw,20px)/1.25 'Merriweather',serif}
.rev-cta-text p{margin:2px 0 0;color:var(--muted);font:400 13.5px/1.4 'Work Sans',sans-serif}
@media (max-width:640px){
  .editorial-review-cta{flex-direction:column;align-items:flex-start}
}

/* Kontakt: Informationen links, echte Karte rechts */


/* Runde-12-Nachbesserungen aus der Pruefung */


/* ==========================================================================
   RUNDE 13 — Standortblock statt Karte, kompaktere Abschluss-Sektionen
   ========================================================================== */
/* Standort: ruhige Flaeche, keine vorgetaeuschte Strassenkarte */


/* ==========================================================================
   RUNDE 19 — Bewertungen auf EINE Mittelachse
   Eyebrow -> Ueberschrift -> Gesamtbewertung -> CTA -> Karten -> Punkte.
   Die fruehere Zweiteilung (Ueberschrift links, CTA rechts) ist aufgehoben:
   der Wrapper ist jetzt eine zentrierte Spalte, die DOM-Reihenfolge liefert
   die gewuenschte Abfolge bereits.
   ========================================================================== */
.editorial-reviews-heading-wrap{
  display:flex;flex-direction:column;align-items:center;text-align:center;
}
/* Lesebreite des Kopfes, unabhaengig von der breiteren Kartenflaeche.
   Der Kopf endet jetzt mit der Gesamtbewertung — der CTA ist nach unten
   gewandert, deshalb ruecken die Karten dichter heran. */
.editorial-reviews-heading{
  width:min(100%,820px);
  margin:0 auto clamp(32px,3.2vw,44px);
  display:block;text-align:center;
}
.editorial-reviews-heading h2{
  margin:clamp(9px,1vw,13px) auto 0;
  font-size:clamp(30px,3.5vw,50px);
}
/* Gesamtbewertung als eine kompakte Zeile: G · 4,8 · Sterne · Zusatz */
.editorial-reviews-heading > p:last-child{
  margin-top:clamp(19px,2.1vw,26px);
  gap:8px 12px;
}
.editorial-reviews-heading > p:last-child span:nth-of-type(1){font-size:26px}
.editorial-reviews-heading > p:last-child span:nth-of-type(2){font-size:18px;letter-spacing:2px}
.editorial-google-mark{width:21px;height:21px;flex:0 0 21px}

/* CTA sitzt jetzt UNTER Karten und Punkten: eine kompakte Zeile,
   Text links, Knopf rechts, beide auf gemeinsamer Hoehe. Kein Kasten,
   nur eine feine Trennlinie nach oben. */
.rev-cta-wrap{
  width:min(100%,1160px);margin:0 auto;
  padding:0 clamp(20px,5vw,42px);
}
.rev-cta-wrap .editorial-review-cta{
  display:flex;flex-direction:row;align-items:center;justify-content:space-between;
  gap:clamp(20px,2.4vw,40px);
  width:min(100%,1000px);
  margin:clamp(22px,2.4vw,32px) auto 0;
  padding:clamp(18px,1.8vw,24px) 0 0;
  border:0;border-top:1px solid var(--line);background:none;border-radius:0;
  text-align:left;
}
.rev-cta-wrap .rev-cta-text{flex:1 1 auto;min-width:0}
.rev-cta-wrap .rev-cta-text h3{font-size:clamp(17px,1.5vw,19px)}
.rev-cta-wrap .rev-cta-text p{margin-top:3px}
.rev-cta-wrap .editorial-review-button{flex:none;white-space:nowrap}

@media (max-width:640px){
  .rev-cta-wrap .editorial-review-cta{
    flex-direction:column;align-items:center;text-align:center;gap:14px;
  }
  .rev-cta-wrap .editorial-review-button{width:min(100%,320px);justify-content:center}
}

/* Oeffnungszeiten: Tabelle etwas groesser, Zusatzfakten als Leiste */


/* Footer: kompakter, Inhalte vertikal ausgewogen */
.editorial-footer{padding-block:clamp(24px,2.4vw,32px)}
.editorial-footer-inner{padding-bottom:clamp(18px,2vw,26px)}
.editorial-footer-inner > *{align-self:center}
.editorial-footer-inner{gap:clamp(20px,2.4vw,34px)}
.editorial-footer-meta{padding-block:clamp(9px,1vw,12px)}

/* ==========================================================================
   RUNDE 22 — Abschlussbereich: zwei gleichwertige Karten
   Links Standort (Adresse, Kontakt, Ortskarte), rechts Oeffnungszeiten.
   Heller Grund, feine Linien, Rot nur als Akzent. Ansprache durchgehend Du.
   ========================================================================== */
.editorial-closing{background:#fcfbf9}
.ro-schluss{width:min(100%,1120px);margin-inline:auto;padding-inline:clamp(20px,4vw,40px);color:var(--ink)}

/* ---------- Kopf ---------- */
.ro-schluss-kopf{text-align:center;margin-bottom:clamp(26px,2.8vw,38px)}
.ro-schluss-marke{
  display:inline-flex;align-items:center;justify-content:center;gap:14px;color:var(--red);
}
.ro-schluss-marke::before,.ro-schluss-marke::after{
  content:'';width:26px;height:1px;background:currentColor;opacity:.55;
}
.ro-schluss-marke svg{width:26px;height:26px}
.ro-schluss-titel{
  margin:clamp(12px,1.2vw,16px) auto 0;max-width:20ch;
  font:italic 700 clamp(28px,3.2vw,44px)/1.12 'Merriweather',Georgia,serif;
  letter-spacing:-.03em;color:var(--ink);
}

/* ---------- Zwei Karten ---------- */
.ro-schluss-grid{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(18px,1.8vw,26px);align-items:stretch;
}


/* ---------- links: Adresse und Kontakt ---------- */


/* ---------- Karte im unteren Teil der linken Kachel ---------- */
.ro-karte-map{
  position:relative;margin-top:auto;aspect-ratio:16/10;
  border-top:1px solid var(--line);background:#f3f1ec;
}
/* Bild aus dem Fluss nehmen, sonst ueberstimmt seine Inhaltshoehe das
   aspect-ratio (die Kachel ist ein Flex-Element der Karte). */
.ro-karte-map img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%}
.ro-route{
  position:absolute;left:clamp(14px,1.4vw,18px);bottom:clamp(14px,1.4vw,18px);
  display:inline-flex;align-items:center;gap:9px;text-decoration:none;
  padding:10px 16px;border-radius:999px;
  background:rgba(255,255,255,.95);border:1px solid rgba(27,25,23,.10);
  box-shadow:0 6px 18px -12px rgba(27,25,23,.55);
  font:700 11.5px/1 'Archivo',sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);
  transition:background-color .18s ease,color .18s ease;
}
.ro-route svg{width:14px;height:14px;color:var(--red);transition:color .18s ease}
.ro-route:hover{background:var(--red);color:#fff}
.ro-route:hover svg{color:#fff}
.ro-route:focus-visible{outline:3px solid var(--yellow);outline-offset:3px}

/* ---------- rechts: Zeiten ---------- */
.ro-status{
  margin:0 0 clamp(14px,1.4vw,18px);display:flex;align-items:center;gap:8px;
  font:600 14px/1.2 'Work Sans',sans-serif;color:var(--ink);
}
.ro-zeiten{margin:0;display:grid}
.ro-zeiten > div{
  display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  padding:11px 0;border-bottom:1px dashed rgba(27,25,23,.16);
}
.ro-zeiten > div:last-child{border-bottom:0}
.ro-zeiten dt{margin:0;font:500 15.5px/1.4 'Work Sans',sans-serif;color:var(--ink)}
.ro-zeiten dd{margin:0;font:600 15.5px/1.4 'Work Sans',sans-serif;color:var(--red-dark);white-space:nowrap}
.ro-zeiten dd.ist-ruhetag{color:var(--muted);font-weight:500}
.ro-hinweis{margin:clamp(13px,1.3vw,16px) 0 0;font:400 13.5px/1.5 'Work Sans',sans-serif;color:var(--muted)}


/* ---------- Fakten und Gruss ---------- */


/* ---------- Tablet und Handy ---------- */
@media (max-width:860px){
  .ro-schluss-grid{grid-template-columns:1fr}
  /* gestapelt wuerde die Ortskarte in ihrem Eigenverhaeltnis (1.52) sehr hoch
     werden; feste Hoehe + object-fit haelt die Kachel kompakt, der Marker
     bleibt mittig. aspect-ratio greift hier nicht, weil die Kachel ein
     Flex-Element ist und ihre Inhaltshoehe das Verhaeltnis ueberstimmt. */
  .ro-karte-map{aspect-ratio:16/9}
}
@media (max-width:560px){
  
  .ro-karte-map{aspect-ratio:640/420}
  .ro-route{left:12px;bottom:12px}
}

/* ==========================================================================
   RUNDE 24 — HERO auf das Standfoto ohne Schirm (Desktop)
   Quelle: quellmaterial/fotos-original/IMG_3607.jpg (6048x8064 Hochformat),
   Zuschnitt volle Breite, y 0,263-0,732 -> 6048x3780, Verhaeltnis 1,600.
   Lage im Zuschnitt: IMBISS-Schild 0,175-0,239 · Verkaufsfenster 0,303-0,602 ·
   pinker Streifen 0,644-0,772 · Raeder und Kuebel 0,719-0,932.
   Der Textblock sitzt deshalb ganz unten: Schild, Fenster und der Grossteil des
   Streifens bleiben frei. Keine Personen im Bild, also auch keine Abdecklogik
   und keine ueberbreite Schaltflaeche mehr.
   Der Mobil-Block darunter bleibt unveraendert (Bild IMG_3606).
   ========================================================================== */

.red-onion-editorial .ro-hero{align-items:flex-end;background:#0a0a09}
.red-onion-editorial .ro-hero-media{inset:0;width:100%;height:100%}
.red-onion-editorial .ro-hero-media img{
  width:100%;height:100%;object-fit:cover;
  /* 15 % senkrecht: bei Fenstern breiter als 1,600 schneidet cover oben und
     unten. Mit 15 % bleibt oben fast alles stehen, das IMBISS-Schild rutscht
     also nicht hinter die Kopfleiste; weg faellt der leere Vorplatz unten. */
  object-position:50% 15%;
  filter:none;
}

/* ---------- Verlauf ----------
   Nur zwei Lagen: ein Band von unten, das den Textblock traegt, und ein
   knapper Deckel oben fuer die Kopfleiste. Keine Seitenverlaeufe, keine
   Flaeche hinter dem Text - im Bild ist nichts mehr zu verstecken. */
.red-onion-editorial .ro-hero-overlay{
  background:
    linear-gradient(to top,
      rgba(10,10,9,.86) 0%,
      rgba(10,10,9,.78) 9%,
      rgba(10,10,9,.62) 18%,
      rgba(10,10,9,.40) 27%,
      rgba(10,10,9,.20) 36%,
      rgba(10,10,9,.07) 45%,
      rgba(10,10,9,.01) 54%,
      rgba(10,10,9,0) 62%),
    linear-gradient(to bottom,
      rgba(10,10,9,.30) 0%,
      rgba(10,10,9,.16) 10%,
      rgba(10,10,9,.05) 18%,
      rgba(10,10,9,0) 26%);
}

/* ---------- Textblock: zentriert, ganz unten, kompakt ---------- */
.red-onion-editorial .ro-hero-inner{
  max-width:1680px;
  align-items:flex-end;
  padding-top:clamp(150px,20vh,190px);
  padding-bottom:calc(clamp(24px,3.2vh,46px) + 52px);
}
.red-onion-editorial .ro-hero-content{
  width:min(100%,1120px);margin-inline:auto;text-align:center;
  transform:translateY(-12px);
}


/* einzeilige Schlagzeile: der Satz steht in zwei <span>, die hier im Fluss
   bleiben - dadurch eine Zeile statt zwei, der Block wird flacher. */
.red-onion-editorial .ro-hero-title span{display:inline}
.red-onion-editorial .ro-hero-title .ro-ort{display:inline}
.red-onion-editorial .ro-hero-title{
  max-width:none;margin-inline:auto;
  font-size:clamp(30px,3.05vw,46px);line-height:1.12;letter-spacing:-.035em;
  text-shadow:0 1px 3px rgba(0,0,0,.6),0 3px 14px rgba(0,0,0,.5);
}
.red-onion-editorial .ro-hero-copy{
  max-width:40ch;margin:clamp(7px,0.9vh,11px) auto 0;
  color:#ddd3c6;font-size:clamp(16px,1.2vw,19px);line-height:1.5;
  text-shadow:0 2px 14px rgba(0,0,0,.5);
}
.red-onion-editorial .editorial-hero-actions{
  margin-top:clamp(11px,1.5vh,18px);justify-content:center;
}
.red-onion-editorial .ro-hero-button{min-height:54px;padding:14px 30px;font-size:16.5px}

/* ---------- Handy und kleines Tablet ---------- */
@media (max-width:999px){
  .red-onion-editorial .ro-hero{align-items:flex-end}
  /* Eigener Hochformat-Zuschnitt: Holzhaus und Auto liegen ausserhalb,
     der Wagen steht vollstaendig im Bild, darunter freies Pflaster fuer
     den Textblock. */
  .red-onion-editorial .ro-hero-media img{object-position:50% 8%}
  .red-onion-editorial .ro-hero-overlay{
    background:
      linear-gradient(to top,
        rgba(10,10,9,.74) 0%,
        rgba(10,10,9,.70) 13%,
        rgba(10,10,9,.60) 25%,
        rgba(10,10,9,.36) 34%,
        rgba(10,10,9,.19) 43%,
        rgba(10,10,9,.08) 53%,
        rgba(10,10,9,.02) 64%,
        rgba(10,10,9,0) 76%),
      /* schmale Kante links: dort sitzt der aeussere Gast direkt am Bildrand,
         die zentrierte Schlagzeile reicht nicht so weit hinaus */
      linear-gradient(to right,
        rgba(10,10,9,.52) 0%,
        rgba(10,10,9,.32) 7%,
        rgba(10,10,9,.13) 13%,
        rgba(10,10,9,0) 19%),
      /* gleicher Deckel wie auf dem Desktop: nimmt dem Schirm Gewicht */
      linear-gradient(to bottom,
        rgba(10,10,9,.32) 0%,
        rgba(10,10,9,.24) 12%,
        rgba(10,10,9,.14) 22%,
        rgba(10,10,9,.06) 31%,
        rgba(10,10,9,0) 40%);
  }
  .red-onion-editorial .ro-hero-inner{
    padding:clamp(110px,15vh,150px) clamp(16px,4.6vw,28px) calc(clamp(80px,13vh,120px) + 35px);
    align-items:flex-end;
  }
  .red-onion-editorial .ro-hero-content{width:100%;text-align:center;transform:translateY(-8px)}
  
  
  /* Mobil bleibt bei der zweizeiligen Schlagzeile wie bisher - die
     einzeilige Fassung gilt nur fuer den Desktop. */
  .red-onion-editorial .ro-hero-title span{display:block}
  .red-onion-editorial .ro-hero-title .ro-ort{display:inline}
  .red-onion-editorial .ro-hero-title{font-size:clamp(22px,7.3vw,36px);line-height:1.09}
  .red-onion-editorial .ro-hero-copy{max-width:23ch;margin-top:20px;font-size:16px;line-height:1.55;text-wrap:balance}
  .red-onion-editorial .editorial-hero-actions{margin-top:20px}
  .red-onion-editorial .ro-hero-button{width:100%;max-width:360px;min-height:58px;font-size:16.5px}
}

@media (max-width:767px){
  .red-onion-editorial .ro-hero-inner{
    padding-bottom:calc(clamp(80px,13vh,120px) + 22px);
  }
}

/* ==========================================================================
   RUNDE 25 — Schnellinfo als schmale Serviceleiste
   Ersetzt die drei Info-Module zwischen Hero und Speisekarte. Kein Kasten,
   keine Kachel, keine Flaeche je Eintrag — ein durchgehendes Creme-Band im
   Ton der Kopfleiste, drei Inhalte, dazwischen zwei kurze Haarlinien.
   Links und rechts steht nur je eine Zeile, in der Mitte der Live-Status.
   Die alten .ro-qi-Regeln sind entfernt, hier steht der vollstaendige Stand.
   ========================================================================== */
.ro-quickinfo{
  /* Flaeche und Textfarben stehen seit der Farbumkehr im Block RUNDE 30.
     Die frueheren Kanten und der weisse Lichtsaum der hellen Fassung sind
     hier entfernt: die Leiste ist der Sockel des Hero-Fotos und bekommt
     nach oben ausdruecklich keine Trennlinie. */
  padding:0;
}
.ro-sl{
  /* Breite kommt aus der gemeinsamen Leselinie (Block RUNDE 29,
     var(--container)) - die frueher hier gesetzte Sonderverengung auf
     1240px ist entfallen. Die Leiste ist jetzt genauso breit wie jeder
     andere Abschnitt.
     Der Innenabstand haengt bewusst an vw, nicht an vh: die Hoehe einer
     Leiste darf sich nicht aendern, nur weil das Fenster flacher wird. */
  margin-inline:auto;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  gap:clamp(20px,3vw,52px);
  padding-block:clamp(26px,2.2vw,40px);
  min-height:0;
}

/* ---------- aussen: Symbol + eine Zeile ---------- */
.ro-sl-punkt{
  margin:0;display:flex;align-items:center;gap:11px;min-width:0;
}
.ro-sl-rechts{justify-content:flex-end}
.ro-sl-icon{flex:none;display:flex;color:var(--red)}
.ro-sl-icon svg{width:26px;height:26px}
.ro-sl-text{
  /* groessere Schrift braucht weniger Sperrung, sonst zerfaellt das Wort */
  font:700 13px/1.35 'Archivo',sans-serif;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink);
}

/* ---------- Mitte: Live-Status ---------- */
.ro-sl-status{
  margin:0;display:flex;flex-direction:column;align-items:center;gap:3px;
  text-align:center;
  /* Gemessene Hoehe im geschlossenen Zustand: Statuszeile 24,1 + gap 3 +
     zweite Zeile 17,5 = 44,7px. Fest gesetzt, damit die Leiste im
     geoeffneten Zustand - wo die zweite Zeile per JS verschwindet - genauso
     hoch bleibt und der Seiteninhalt um 11 Uhr nicht springt. */
  min-height:45px;
  justify-content:center;
}
.ro-sl-zeile{display:flex;align-items:center;gap:11px}
.ro-sl-led{
  flex:none;width:9px;height:9px;border-radius:50%;background:var(--muted);
  animation:ro-sl-atmen 2.2s ease-in-out infinite;
}
.ro-sl-wort{
  font:800 clamp(17px,1.35vw,21px)/1.15 'Archivo',sans-serif;
  letter-spacing:.09em;text-transform:uppercase;color:var(--ink);
}
.ro-sl-naechste{
  font:400 13px/1.35 'Work Sans',sans-serif;color:var(--muted);
}
/* Zustaende setzt script.js ueber die Klassen — geoeffnet gruen, sonst rot */
.ro-sl-status.ist-offen .ro-sl-led{background:#3d9c4e}
.ro-sl-status.ist-offen .ro-sl-wort{color:#2c7a3a}
.ro-sl-status.ist-zu .ro-sl-led{background:var(--red)}
.ro-sl-status.ist-zu .ro-sl-wort{color:var(--red-dark)}
/* zweite Zeile existiert nur im geschlossenen Zustand (hidden per JS) und
   reserviert deshalb keinen Platz */
.ro-sl-naechste[hidden]{display:none}

@keyframes ro-sl-atmen{
  0%,100%{opacity:1;transform:scale(1)}
  50%{opacity:.62;transform:scale(.88)}
}
@media (prefers-reduced-motion:reduce){
  .ro-sl-led{animation:none}
}

/* ---------- zwei kurze Haarlinien statt Kaesten ---------- */
@media (min-width:761px){
  .ro-sl-status{position:relative}
  .ro-sl-status::before,.ro-sl-status::after{
    content:"";position:absolute;top:50%;translate:0 -50%;
    width:1px;height:26px;background:rgba(27,25,23,.13);
  }
  .ro-sl-status::before{right:calc(100% + clamp(10px,1.5vw,26px))}
  .ro-sl-status::after{left:calc(100% + clamp(10px,1.5vw,26px))}
}

/* ---------- Handy: Status oben, darunter die beiden Zeilen ---------- */
@media (max-width:760px){
  .ro-sl{
    /* Breite ebenfalls aus var(--container); die frueher hier gesetzte
       Sonderbreite ist entfallen. */
    grid-template-columns:1fr 1fr;
    grid-template-areas:"status status" "links rechts";
    gap:10px clamp(14px,4vw,24px);
    padding-block:clamp(22px,4.5vw,30px);
  }
  /* Gemessene Hoehe im geschlossenen Zustand auf dem Handy: Statuszeile 21,8
     + gap 3 + zweite Zeile 16,9 + 10 Polster + 1 Kante = 52,7px. */
  .ro-sl-status{
    grid-area:status;padding-bottom:10px;
    border-bottom:1px solid rgba(27,25,23,.10);
    min-height:53px;justify-content:center;
  }
  .ro-sl-links{grid-area:links}
  .ro-sl-rechts{grid-area:rechts;justify-content:flex-start}
  .ro-sl-punkt{gap:9px;align-items:flex-start}
  .ro-sl-icon svg{width:22px;height:22px}
  .ro-sl-text{font-size:11px;letter-spacing:.12em}
  .ro-sl-wort{font-size:19px}
  .ro-sl-naechste{font-size:12.5px}
}
@media (max-width:430px){
  .ro-sl{grid-template-columns:1fr;grid-template-areas:"status" "links" "rechts";gap:9px}
  .ro-sl-punkt{align-items:center}
}

/* ==========================================================================
   RUNDE 26 — Speisekarte: Feinschliff
   Inhalt, Bilder, Slider und Kategorien bleiben unveraendert. Die
   Gerichtszeilen trugen ihre Gestaltung bisher als Inline-Stil; sie sind jetzt
   ueber Klassen gesetzt (mzeile, mnr, mtext, mname, mbesch, mpreise, mpreis,
   mpreiszeile, mpreiskopf, mkat, mkat-hinweis, mveg) — reine Umstellung, kein
   Textknoten wurde angefasst.
   ========================================================================== */

/* ---------- Kopf: nur noch ein Wort, darunter das Maskottchen ---------- */
.menu-kopf{display:block;text-align:center;margin-bottom:clamp(14px,1.6vw,20px)}
.menu-titel{
  margin:0;
  font:italic 700 clamp(34px,4vw,56px)/1.02 'Merriweather',Georgia,serif;
  letter-spacing:-.032em;color:#f6ede1;
}
/* Maskottchen zwischen zwei feinen roten Linien — dasselbe Motiv wie die
   Markenzeile im Abschlussbereich, nur mit Bild statt Symbol. */
.menu-zier{
  margin:clamp(11px,1.2vw,16px) 0 0;
  display:flex;align-items:center;justify-content:center;
  gap:clamp(12px,1.3vw,18px);
}
.menu-zier::before,.menu-zier::after{
  content:"";height:1px;width:clamp(30px,3.6vw,56px);
  /* innen voll rot, nur das aeussere Drittel laeuft aus */
  background:linear-gradient(to right,rgba(232,68,43,0) 0%,rgba(232,68,43,.92) 38%,rgba(232,68,43,.92) 100%);
}
.menu-zier::after{
  background:linear-gradient(to left,rgba(232,68,43,0) 0%,rgba(232,68,43,.92) 38%,rgba(232,68,43,.92) 100%);
}
.menu-siegel{
  display:block;flex:none;
  width:auto;height:clamp(34px,3.2vw,46px);opacity:.92;
}

/* ---------- Kategorien: kantige Kacheln statt runder Pillen ---------- */
.mtabs{gap:9px}
.mtab{
  padding:11px 19px;border-radius:5px;
  border:1px solid rgba(246,237,225,.20);background:transparent;
  font:700 12.5px/1.15 'Archivo',sans-serif;
  letter-spacing:.1em;text-transform:uppercase;
  color:rgba(246,237,225,.72);
  box-shadow:none;
}
.mtab:hover{color:#f6ede1;border-color:rgba(246,237,225,.38);background:rgba(246,237,225,.05)}
.mtab.is-active{background:#e8442b;border-color:#e8442b;color:#fff;box-shadow:none}

/* ---------- Auszeichnung ueber dem Bild ---------- */
.menu-karte-eyebrow{
  font:italic 700 clamp(16px,1.35vw,20px)/1.2 'Merriweather',Georgia,serif;
  color:#f6ede1;text-shadow:0 1px 8px rgba(0,0,0,.75);
}
.menu-karte-eyebrow::after{
  content:"";display:block;width:26px;height:2px;margin-top:7px;
  background:var(--red);border-radius:1px;
}

/* ---------- Kategorieueberschrift: gleiche Schrift wie der Kopf, kleiner ---------- */
.mkat{
  font:italic 700 clamp(22px,2.2vw,29px)/1.08 'Merriweather',Georgia,serif;
  letter-spacing:-.025em;text-transform:none;
  /* Rot als Akzent — denselben Wert setzt bereits die aeltere Akkordeonregel
     .editorial-accordion:not(.closed) .editorial-accordion-button > span:first-child;
     hier steht er ausdruecklich, damit die Farbe nicht von ihr abhaengt. */
  color:var(--red);
}
.mpanel-head::before{
  content:"";flex:none;align-self:center;width:16px;height:2px;
  background:var(--red);border-radius:1px;
}
.mkat-hinweis{
  margin:0 0 8px;font:italic 400 14px/1.55 'Work Sans',sans-serif;color:#a79d92;
}

/* ---------- Gerichtszeilen: Karte statt Tabelle ---------- */
.mzeile{
  display:flex;gap:14px;align-items:baseline;
  padding:15px 0;
  border-bottom:1px solid rgba(246,237,225,.085);
}
.mnr{
  flex:none;min-width:22px;
  font:600 11.5px/1.4 'Archivo',sans-serif;letter-spacing:.05em;
  color:rgba(246,237,225,.34);
}
.mtext{flex:1 1 auto;min-width:0}
.mname{font:600 17px/1.35 'Work Sans',sans-serif;color:#f6ede1}
.mbesch{
  display:block;margin-top:3px;
  font:400 13.5px/1.5 'Work Sans',sans-serif;color:#a99e91;
}
.mveg{color:#8fae4f;font-weight:800}
.mpreise{flex:none;display:flex;gap:12px;align-items:baseline}
.mpreis{
  width:66px;text-align:right;
  font:600 16px/1 'Archivo',sans-serif;color:#f2ece2;
  font-variant-numeric:tabular-nums;
}
.mpreiszeile{display:flex;justify-content:flex-end;gap:12px;padding-bottom:6px}
.mpreiskopf{
  width:66px;text-align:right;
  font:700 10px/1.2 'Archivo',sans-serif;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(246,237,225,.42);
}

@media (max-width:700px){
  .mtab{padding:10px 15px;font-size:11.5px;letter-spacing:.09em}
  .mzeile{gap:11px;padding:13px 0}
  .mname{font-size:16px}
  .mbesch{font-size:13px}
  .mpreis{width:60px;font-size:15px}
  .mpreiskopf{width:60px}
  .mpreise{gap:10px}
  .menu-siegel{height:28px}
}

/* ==========================================================================
   RUNDE 28 — „Ueber uns": Bild und Text tauschen die Seite
   Nur die Position: das Foto steht jetzt rechts, der Text links. Die Spalten
   sind mitvertauscht (56fr | 44fr statt 44fr | 56fr), damit beide Bloecke
   exakt so breit bleiben wie vorher. Groessen, Zuschnitt und Abstaende
   unveraendert. Auf dem Handy bleibt es beim Stapel Bild ueber Text.
   ========================================================================== */
@media (min-width:1000px){
  .editorial-about-card{grid-template-columns:minmax(0,56fr) minmax(0,44fr)}
  .editorial-about-content{grid-column:1;grid-row:1}
  .editorial-about-image{grid-column:2;grid-row:1}
}


/* ============================================================
   RUNDE 29 - Punkt 1: einheitliche Containerbreite
   Alle Abschnittshuellen laufen ueber dieselbe Formel. Die frueheren
   Einzelbreiten (1520 / 1420 / 1240 / 1160 / 1120) entfallen.
   Ausnahmen mit Absicht: das Hero-Foto bleibt randlos, sein Textblock
   ist mittig gesetzt und hat deshalb keine linke Kante; die Speisekarte
   laeuft auf --container-wide.
   ============================================================ */
.red-onion-editorial .ro-sl,
.red-onion-editorial .editorial-about-card,
.red-onion-editorial .editorial-reviews-heading-wrap,
.red-onion-editorial .editorial-reviews-stage-wrap,
.red-onion-editorial .rev-cta-wrap,
.red-onion-editorial .ro-schluss,
.red-onion-editorial .editorial-footer-inner,
.red-onion-editorial .editorial-footer-meta{
  width:min(var(--container), calc(100% - var(--container-pad) * 2));
  max-width:none;
  margin-inline:auto;
  padding-inline:0;
}

/* Speisekarte: gleiche Formel, nur breiterer Wert */
.red-onion-editorial .menu-shell{
  position:relative;
  isolation:isolate;
  width:min(var(--container-wide), calc(100% - var(--container-pad) * 2));
  max-width:none;
  margin-inline:auto;
  padding-inline:0;
}
.red-onion-editorial .menu-engraving{
  position:absolute;
  z-index:0;
  top:-70px;
  right:-100px;
  display:block;
  width:clamp(260px, 22vw, 420px);
  height:auto;
  opacity:.07;
  pointer-events:none;
  user-select:none;
  transform:rotate(-42deg);
  transform-origin:50% 50%;
}
.red-onion-editorial .menu-shell > :not(.menu-engraving){
  position:relative;
  z-index:1;
}
@media (max-width:480px){
  /* Auf dem Handy stand die Zwiebel bisher auf display:none. Sie bleibt
     dieselbe Illustration wie auf dem Desktop, nur klein und innerhalb der
     Huelle: der Titel steht hier mittig, rechts daneben sind nur rund 70 bis
     90px frei. Der Rahmen faellt durch die Drehung groesser aus als die
     Bildbreite, deshalb ist sie bewusst schmal gehalten und sitzt etwas
     oberhalb der Titelzeile. Kein negativer rechter Rand - sonst entsteht
     seitlicher Ueberlauf. */
  .red-onion-editorial .menu-engraving{
    display:block;
    top:-34px;
    right:-68px;
    /* Das Motiv fuellt nur 76.7 Prozent der Dateibreite (gemessen: x 122..906
       von 1024), der Rest ist Leerrand - fuer eine sichtbare Zwiebel von rund
       160px braucht das Element daher gut 200px.
       Gedreht wie auf dem Desktop, aber flacher: die Zwiebel ist hochformatig
       (1024x1536), bei den -42 Grad des Desktops waechst der Rahmen so stark,
       dass sie halb aus der Huelle faellt. -26 Grad behalten die Neigung und
       lassen sie in der Ecke stehen. */
    transform:rotate(-26deg);
    width:clamp(150px, 53vw, 240px);
    opacity:.07;
  }
}

/* Die Sektionen selbst duerfen keinen eigenen Seitenabstand mehr setzen,
   sonst addiert er sich auf den Container und die Kanten laufen wieder
   auseinander. */
.red-onion-editorial .editorial-about{padding-inline:0}


/* ---- Punkt 5a: Nummer einmal, darunter die beiden Handlungen -------------
   Die Handlungslinks sitzen in der kleinen Beschriftungszeile und duerfen
   deshalb nicht wie die grossen Kontaktlinks aussehen. */


/* ==========================================================================
   RUNDE 30 - FARBUMKEHR DER SEKTIONEN
   Hero Foto | Schnellinfo DUNKEL | Ueber uns HELL | Bewertungen DUNKEL |
   Speisekarte HELL | Oeffnungszeiten DUNKEL | Footer sehr dunkel.

   Anlass ist die Speisekarte: die vier Speisenfotos liegen auf hellen
   Papptellern. Auf dunklem Grund leuchtet der Teller, auf Creme verschwindet
   sein Rand und das Braune und Goldene vom Essen bleibt uebrig. Der Rest
   folgt daraus, damit der Wechsel hell/dunkel erhalten bleibt.

   Der Block steht am Dateiende und setzt bewusst alles noch einmal
   ausdruecklich: die frueheren Werte bleiben als Verlauf stehen, wirken
   aber nicht mehr. Zurueckdrehen heisst diesen Block entfernen.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. SCHNELLINFO -> DUNKEL
   Oben keine Trennlinie: die Leiste soll als Sockel des Hero-Fotos gelesen
   werden. Der weisse Lichtsaum (box-shadow inset) wuerde auf Dunkel zum
   grellen Strich ueber die volle Breite und faellt deshalb weg.
   -------------------------------------------------------------------------- */
.red-onion-editorial .ro-quickinfo{
  background:var(--sek-dunkel);
  color:var(--auf-dunkel);
  border-top:0;
  border-bottom:0;
  box-shadow:none;
}
.red-onion-editorial .ro-sl-icon{color:var(--auf-dunkel)}
.red-onion-editorial .ro-sl-text{color:var(--auf-dunkel)}
/* Das Statuswort steht in derselben Farbe wie seine beiden Nachbarn - der
   Wortlaut traegt die Aussage, nicht die Farbe. */
.red-onion-editorial .ro-sl-wort,
.red-onion-editorial .ro-sl-status.ist-offen .ro-sl-wort,
.red-onion-editorial .ro-sl-status.ist-zu .ro-sl-wort{color:var(--auf-dunkel)}
.red-onion-editorial .ro-sl-naechste{color:var(--auf-dunkel-still)}
.red-onion-editorial .ro-sl-led,
.red-onion-editorial .ro-sl-status.ist-zu .ro-sl-led{background:var(--punkt-zu)}
.red-onion-editorial .ro-sl-status.ist-offen .ro-sl-led{background:var(--punkt-offen)}

@media (min-width:761px){
  .red-onion-editorial .ro-sl-status::before,
  .red-onion-editorial .ro-sl-status::after{background:var(--strich-dunkel)}
}
@media (max-width:760px){
  .red-onion-editorial .ro-sl-status{border-bottom:1px solid var(--strich-dunkel)}
}

/* --------------------------------------------------------------------------
   2. UEBER UNS -> HELL
   -------------------------------------------------------------------------- */
.red-onion-editorial .editorial-about{
  background:var(--sek-hell);
  color:var(--auf-hell);
}
.red-onion-editorial .editorial-about-copy h2{color:var(--auf-hell)}
.red-onion-editorial .editorial-about-copy p{color:var(--auf-hell-leise)}
.red-onion-editorial .editorial-about-copy .editorial-about-eyebrow{color:var(--red-dark)}
/* Die Zierlinie stand auf .55 Alpha UND .55 opacity, zusammen rund 30 % Rot.
   Auf Creme waere das ein blasser Rosastrich - deshalb einmal sauber gesetzt. */
.red-onion-editorial .editorial-about .ro-ornament-line{
  background:rgba(182, 47, 32, .9);
  opacity:1;
}
/* Das Spiessfoto ist dunkel und warm. Auf Creme braucht es eine Tintenkante
   statt der Cremekante, und einen weichen Schlagschatten, damit es nicht
   als aufgeklebter Kasten steht. */
.red-onion-editorial picture.editorial-about-image{
  border-color:rgba(27, 25, 23, .14);
  box-shadow:0 22px 46px -30px rgba(27, 25, 23, .5);
}
.red-onion-editorial .editorial-about a:focus-visible,
.red-onion-editorial .editorial-about button:focus-visible{outline-color:var(--red-dark)}

/* --------------------------------------------------------------------------
   3. BEWERTUNGEN -> DUNKEL
   Die Karten werden nicht invertiert, sondern aufgeloest: keine Flaeche,
   kein Rahmen, kein Schatten. Getrennt wird ueber Weissraum und je eine
   Haarlinie. Der Innenabstand faellt seitlich weg, sonst stuende der Text
   ohne Grund weiter innen als jeder andere Abschnitt.
   -------------------------------------------------------------------------- */
.red-onion-editorial .editorial-reviews{
  background:var(--sek-dunkel);
  color:var(--auf-dunkel);
}
.red-onion-editorial .editorial-reviews::before{background:var(--linie-dunkel)}
.red-onion-editorial .editorial-reviews-heading > p:first-child{color:var(--red)}
.red-onion-editorial .editorial-reviews-heading h2{color:var(--auf-dunkel)}
.red-onion-editorial .editorial-reviews-heading > p:last-child span:nth-of-type(1),
.red-onion-editorial .editorial-reviews-heading > p:last-child span:nth-of-type(3){color:var(--auf-dunkel)}
.red-onion-editorial .editorial-reviews-heading > p:last-child span:nth-of-type(2){color:var(--yellow)}

.red-onion-editorial .editorial-review-card{
  background:none;
  border:0;
  border-top:1px solid var(--linie-dunkel);
  border-radius:0;
  box-shadow:none;
  padding-left:0;
  padding-right:0;
}
.red-onion-editorial .editorial-review-stars{color:var(--yellow)}
.red-onion-editorial .editorial-review-quote{color:var(--auf-dunkel)}
.red-onion-editorial .editorial-review-author{color:var(--auf-dunkel-still)}

/* Die Punkte bekommen ihre Farbe sonst inline aus script.js - die beiden
   !important hier sind die Bremse davor und muessen mitgedreht werden. */
.red-onion-editorial .editorial-reviews .rev-dot{background:rgba(246, 237, 225, .28) !important}
.red-onion-editorial .editorial-reviews .rev-dot[aria-current="true"]{background:var(--red) !important}
.red-onion-editorial .editorial-reviews .rev-dot:focus-visible{outline-color:var(--yellow)}

.red-onion-editorial .rev-cta-wrap .editorial-review-cta{border-top-color:var(--linie-dunkel)}
.red-onion-editorial .rev-cta-text h3{color:var(--auf-dunkel)}
.red-onion-editorial .rev-cta-text p{color:var(--auf-dunkel-leise)}
/* War dunkler Knopf auf hell, jetzt heller Knopf auf dunkel. */
.red-onion-editorial .editorial-review-button{
  color:var(--auf-hell);
  background:var(--auf-dunkel);
  border-color:var(--auf-dunkel);
}
.red-onion-editorial .editorial-review-button:hover,
.red-onion-editorial .editorial-review-button:focus-visible{
  color:#fff;
  background:var(--red-dark);
  border-color:var(--red-dark);
}

/* --------------------------------------------------------------------------
   4. SPEISEKARTE -> HELL
   Der wolkige Grund neu gebaut: vier sehr grosse radial-gradients unter
   3 % Deckkraft an unregelmaessigen Punkten, dazu ein schraeger
   linear-gradient unter 3 %. Alle Toene stammen aus der vorhandenen
   Palette (--red, --yellow, --muted, --ink). Keine Koernung.
   -------------------------------------------------------------------------- */
.red-onion-editorial .editorial-menu{
  overflow:clip;
  background-color:var(--sek-hell);
  background-image:
    radial-gradient(142% 94% at 11% 4%,   rgba(232, 68, 43, .030), transparent 62%),
    radial-gradient(118% 82% at 89% 21%,  rgba(231, 170, 54, .030), transparent 58%),
    radial-gradient(156% 108% at 67% 97%, rgba(110, 101, 94, .028), transparent 66%),
    radial-gradient(104% 128% at 33% 57%, rgba(232, 68, 43, .018), transparent 60%),
    linear-gradient(104deg, rgba(255, 255, 255, .030) 0%, rgba(27, 25, 23, .022) 100%);
  color:var(--auf-hell);
}
.red-onion-editorial .menu-titel{color:var(--auf-hell)}
.red-onion-editorial .menu-zier::before{
  background:linear-gradient(to right, rgba(182,47,32,0) 0%, rgba(182,47,32,.92) 38%, rgba(182,47,32,.92) 100%);
}
.red-onion-editorial .menu-zier::after{
  background:linear-gradient(to left, rgba(182,47,32,0) 0%, rgba(182,47,32,.92) 38%, rgba(182,47,32,.92) 100%);
}
.red-onion-editorial .menu-siegel{opacity:1}

/* Kategorie-Pills */
.red-onion-editorial .mtab{
  border-color:rgba(27, 25, 22, .24);
  background:transparent;
  color:rgba(27, 25, 22, .72);
}
.red-onion-editorial .mtab:hover{
  color:var(--auf-hell);
  border-color:rgba(27, 25, 22, .42);
  background:rgba(27, 25, 22, .05);
}
.red-onion-editorial .mtab.is-active{
  background:var(--red-dark);
  border-color:var(--red-dark);
  color:#fff;
}
.red-onion-editorial .mtab:focus-visible{outline:3px solid var(--red-dark)}

/* Akkordeon-Koepfe: geschlossen Tinte, geoeffnet --red-dark.
   Der Textschatten stammt aus der Schiefer-Fassung und ist auf Creme ein
   schmutziger Hof - er faellt weg. Das !important spiegelt Z.890. */
.red-onion-editorial .editorial-accordion-button{color:var(--auf-hell)}
.red-onion-editorial .editorial-accordion-button > span:first-child{color:var(--auf-hell)}
.red-onion-editorial .editorial-accordion:not(.closed) .editorial-accordion-button > span:first-child,
.red-onion-editorial .editorial-accordion-button:hover > span:first-child,
.red-onion-editorial .mkat{
  color:var(--red-dark) !important;
  text-shadow:none;
}
.red-onion-editorial .editorial-accordion-button:focus-visible{outline:2px solid var(--red-dark)}
.red-onion-editorial .mpanel-side > p,
.red-onion-editorial .mkat-hinweis{color:var(--auf-hell-still)}
.red-onion-editorial .mpanel-side{border-bottom-color:var(--linie-hell)}
.red-onion-editorial .mpanel-head::before{background:var(--red-dark)}

/* Gerichteliste. Die gemeinsame rechte Preiskante bleibt unangetastet -
   hier wechselt ausschliesslich die Farbe. */
.red-onion-editorial .menu-items > div,
.red-onion-editorial .editorial-accordion-panel > div{border-bottom-color:var(--linie-hell) !important}
.red-onion-editorial .mzeile{border-bottom-color:var(--linie-hell)}
.red-onion-editorial .mnr{color:var(--auf-hell-still)}
.red-onion-editorial .mname{color:var(--auf-hell)}
.red-onion-editorial .mbesch{color:var(--auf-hell-still)}
.red-onion-editorial .mpreis{color:var(--auf-hell)}
.red-onion-editorial .mpreiskopf{color:var(--auf-hell-still)}
.red-onion-editorial .mveg{color:var(--veg-hell)}
@media (min-width:1300px){
  .red-onion-editorial .mpanel:not([data-spalten="1"]) .menu-spalten::after{background:var(--linie-hell)}
}
.red-onion-editorial .editorial-menu a:focus-visible,
.red-onion-editorial .editorial-menu button:focus-visible{outline-color:var(--red-dark)}
/* Ausnahme: was AUF dem Foto liegt, bleibt hell - Bildbeschriftung,
   Pfeile und Punkte des Sliders haben weiter das Bild als Grund. */
.red-onion-editorial .menu-slider button:focus-visible{outline-color:#f6b73c}

/* --------------------------------------------------------------------------
   5. OEFFNUNGSZEITEN / STANDORT -> DUNKEL
   Die zwei Kacheln haben auf Dunkel keine eigene Flaeche mehr, sie werden
   bis zum Strukturumbau ueber Haarlinien getrennt.
   -------------------------------------------------------------------------- */
.red-onion-editorial .editorial-closing{
  background:var(--sek-dunkel);
  color:var(--auf-dunkel);
  border-top-color:var(--linie-dunkel);
}
.red-onion-editorial .ro-schluss{color:var(--auf-dunkel)}
.red-onion-editorial .ro-schluss-marke{color:var(--red)}
.red-onion-editorial .ro-schluss-titel{color:var(--auf-dunkel)}


/* Die Kartengrafik ist ein Bild mit eingebranntem hellem Grund. Die
   Flaeche dahinter behaelt genau denselben Wert, sonst entsteht am
   Bildrand eine Naht. */
.red-onion-editorial .ro-karte-map{border-top-color:var(--linie-dunkel); background:#f3f1ec}
.red-onion-editorial .ro-route{
  background:var(--red-dark);
  border-color:var(--red-dark);
  color:#fff;
  box-shadow:0 6px 18px -10px rgba(0, 0, 0, .75);
}
.red-onion-editorial .ro-route svg{color:#fff}
/* Beim Ueberfahren dreht der Knopf auf Creme - Weiss auf --red waere nur
   3,97:1 und faellt durch. */
.red-onion-editorial .ro-route:hover{background:var(--auf-dunkel); border-color:var(--auf-dunkel); color:var(--red-dark)}
.red-onion-editorial .ro-route:hover svg{color:var(--red-dark)}

.red-onion-editorial .ro-status{color:var(--auf-dunkel)}
.red-onion-editorial .ro-zeiten > div{border-bottom-color:var(--linie-dunkel)}
.red-onion-editorial .ro-zeiten dt{color:var(--auf-dunkel)}
.red-onion-editorial .ro-zeiten dd{color:var(--red)}
.red-onion-editorial .ro-zeiten dd.ist-ruhetag{color:var(--auf-dunkel-still)}
.red-onion-editorial .ro-hinweis{color:var(--auf-dunkel-still)}


/* --------------------------------------------------------------------------
   6. FOOTER - unveraendert (#050505, rote Oberkante). Er bleibt um
   dL* 7,4 dunkler als die Sektion darueber (#1a1917), die rote Haarlinie
   markiert die Fuge zusaetzlich.
   -------------------------------------------------------------------------- */


/* ==========================================================================
   RUNDE 32 - Bewertungen: Karten zurueck, in Creme
   Die Farbumkehr hatte die Kaesten aufgeloest und durch Haarlinien ersetzt.
   Auf dunklem Grund liest sich das als durchlaufendes Textband statt als
   drei getrennte Aussagen. Eine Bewertung ist aber ein abgegrenztes Objekt -
   eine Person, eine Aussage. Hier ist die Karte inhaltlich richtig.
   Rahmen der Sektion, Ueberschrift, Notenzeile, Punkte und der Block
   "Geschmeckt?" bleiben direkt auf dem dunklen Grund.
   ========================================================================== */

/* ---------- die Karte ---------- */
.red-onion-editorial .editorial-review-card{
  /* --paper (#faf7f1), nicht #fff: reines Weiss waere heller als jede
     andere Flaeche der Seite. Radius wie bei den uebrigen Karten
     (.ro-karte, .editorial-about-image): 16px. */
  background:var(--paper);
  border:0;
  border-radius:16px;
  box-shadow:none;
  padding:28px 32px;
  /* Spaltenhoehe fuellen, damit die drei Karten einer Slider-Seite
     unabhaengig von der Textlaenge gleich hoch sind. Die Namenszeile haengt
     ueber margin-top:auto ohnehin am unteren Rand. */
  display:flex;
  flex-direction:column;
  height:100%;
  min-height:0;
}
.red-onion-editorial .editorial-review-grid{align-items:stretch}

/* ---------- Text kippt auf der Creme-Karte zurueck auf dunkel ---------- */
.red-onion-editorial .editorial-review-quote{color:#1b1917}
.red-onion-editorial .editorial-review-author{color:rgba(27, 25, 22, .55)}
/* Gold war fuer den dunklen Grund gewaehlt und kommt auf Creme nur auf
   1,93:1. Eine Stufe tiefer: 4,54:1, der Goldcharakter bleibt.
   Gilt NUR fuer die Sterne in den Karten - die Sterne neben der 4,8 stehen
   weiter auf Dunkel und behalten --yellow. */
.red-onion-editorial .editorial-review-stars{color:#96690b}

@media (max-width:700px){
  .red-onion-editorial .editorial-review-card{padding:22px 24px}
}

/* ---------- "Auf Google bewerten": Umriss statt Flaeche ----------
   Sobald die Karten Creme sind, wuerde ein cremefarbener Knopf mit ihnen
   konkurrieren. Die Bewertungen sind der Inhalt, der Knopf ist eine Bitte. */
.red-onion-editorial .editorial-review-button{
  background:transparent;
  border:1px solid rgba(246, 237, 225, .35);
  color:var(--auf-dunkel);
  min-height:48px;
}
.red-onion-editorial .editorial-review-button:hover,
.red-onion-editorial .editorial-review-button:focus-visible{
  background:rgba(246, 237, 225, .06);
  border-color:rgba(246, 237, 225, .6);
  color:var(--auf-dunkel);
}

/* ---------- Tippflaeche der Slider-Punkte auf dem Handy ----------
   Der Desktop hat sie schon (ab 901px). Auf dem Handy waren es 10x8px.
   Mit 34px Abstand liegen die 44x44-Flaechen exakt aneinander, ohne sich
   zu ueberlappen - ueberlappende Ziele treffen sonst den falschen Punkt. */
@media (max-width:900px){
  .red-onion-editorial .rev-dots{gap:34px !important}
  .red-onion-editorial .rev-dot{position:relative}
  .red-onion-editorial .rev-dot::before{content:"";position:absolute;inset:-18px -17px}
}


/* ==========================================================================
   RUNDE 34 - "Standort & Oeffnungszeiten" neu aufgebaut
   Der alte Aufbau mit zwei gleich grossen Kaesten enthielt fuenfzehn
   Elemente; die Haelfte davon steht anderswo auf der Seite (Telefon und
   WhatsApp im Header, Adresse und E-Mail im Footer, Status und Parkplatz in
   der Serviceleiste). Uebrig bleiben sechs Dinge: Ueberschrift, Wochentage,
   Feiertagshinweis, Barzahlungshinweis, Karte, Adressplatte mit Route.
   Rot liegt in dieser Sektion nur noch auf zwei Rollen: Flaeche des
   Route-Knopfs (--red-dark) und Markierung des heutigen Tages (--red).
   ========================================================================== */


/* ---------- zwei Spalten, bewusst nicht haelftig ----------
   Links steht, ob man jetzt hin kann; rechts, wie man hinkommt. */
.red-onion-editorial .ro-schluss-grid{
  display:grid;
  grid-template-columns:minmax(0,44fr) minmax(0,56fr);
  gap:clamp(64px,5vw,88px);
  align-items:start;
  margin-top:clamp(30px,3.2vw,44px);
}

/* ---------- links: die sieben Tage ---------- */
.red-onion-editorial .ro-zeiten{margin:0;padding:0;display:block}
.red-onion-editorial .ro-zeit-zeile{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  min-height:44px;
  padding:0 0 0 14px;
  border-bottom:1px solid rgba(246, 237, 225, .10);
  border-left:3px solid transparent;
}
.red-onion-editorial .ro-zeit-zeile:last-child{border-bottom:0}
.red-onion-editorial .ro-zeiten dt{
  margin:0;
  font:400 15.5px/1.3 'Work Sans', sans-serif;
  color:var(--auf-dunkel);
}
.red-onion-editorial .ro-zeiten dd{
  margin:0;
  /* gemeinsame rechte Kante, Ziffern in fester Laufweite */
  text-align:right;
  font-variant-numeric:tabular-nums;
  font:400 15.5px/1.3 'Work Sans', sans-serif;
  color:var(--auf-dunkel);
}
.red-onion-editorial .ro-zeiten dd.ist-ruhetag{color:var(--auf-dunkel-still)}

/* Heutiger Tag. Drei Traeger, damit die Markierung auch ohne
   Farbwahrnehmung ankommt: Flaeche, 3px-Balken links, schwererer Schnitt. */
.red-onion-editorial .ro-zeit-zeile.ist-heute{
  background:rgba(232, 68, 43, .12);
  border-left-color:var(--red);
  border-radius:0;
}
.red-onion-editorial .ro-zeit-zeile.ist-heute dt,
.red-onion-editorial .ro-zeit-zeile.ist-heute dd{
  font-weight:500;
  color:var(--auf-dunkel);
}

.red-onion-editorial .ro-hinweis{
  margin:clamp(14px,1.5vw,18px) 0 0;
  font:400 13px/1.5 'Work Sans', sans-serif;
  color:var(--auf-dunkel-still);
}

/* ---------- links unten: der einzige Fakt, der hier bleibt ----------
   Kein Aufzaehlungspunkt, sondern eine Warnung - wer ohne Bargeld
   ankommt, steht sonst am Wagen und kann nicht zahlen. */
.red-onion-editorial .ro-bar{
  margin-top:32px;
  padding-top:24px;
  border-top:1px solid rgba(246, 237, 225, .10);
}
.red-onion-editorial .ro-bar-titel{
  margin:0;
  font:700 17px/1.25 'Archivo', sans-serif;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:var(--auf-dunkel);
}
.red-onion-editorial .ro-bar-text{
  margin:6px 0 0;
  font:400 15px/1.5 'Work Sans', sans-serif;
  color:rgba(246, 237, 225, .7);
}

/* ---------- rechts: die Karte ---------- */
.red-onion-editorial .ro-kartenspalte{min-width:0;position:relative}
.red-onion-editorial .ro-karte-map{
  position:relative;
  /* genau so hoch wie die Wochentabelle: 7 Zeilen a 44px */
  height:308px;
  border:0;
  border-radius:12px;
  overflow:hidden;
  background:#f3f1ec;          /* gleicher Wert wie die Grundflaeche der Grafik */
  box-shadow:none;
}
.red-onion-editorial .ro-karte-map img{
  display:block;width:100%;height:100%;object-fit:cover;object-position:50% 50%;
}

/* deckende Platte, kein Milchglas */
.red-onion-editorial .ro-adressplatte{
  position:absolute;left:20px;bottom:20px;
  padding:16px 20px;
  background:var(--auf-dunkel);
  border-radius:8px;
}
.red-onion-editorial .ro-adresszeile{
  margin:0 0 12px;
  font:500 15.5px/1.35 'Work Sans', sans-serif;
  color:var(--auf-hell);
  white-space:nowrap;
}
.red-onion-editorial .ro-route{
  /* Der Knopf lag im alten Aufbau absolut auf der Karte. Jetzt sitzt er in
     der Platte und muss deshalb ausdruecklich wieder in den Fluss. */
  position:static;left:auto;bottom:auto;
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:48px;
  padding:0 20px;
  background:var(--red-dark);
  border:0;
  border-radius:6px;
  color:#fff;
  font:700 13.5px/1 'Archivo', sans-serif;
  letter-spacing:.06em;
  text-transform:uppercase;
  text-decoration:none;
  box-shadow:none;
  transition:background-color .18s ease;
}
.red-onion-editorial .ro-route svg{width:16px;height:16px;color:#fff;flex:none}
.red-onion-editorial .ro-route:hover{background:#8f2418}
.red-onion-editorial .ro-route:hover svg{color:#fff}
.red-onion-editorial .ro-route:focus-visible{outline:3px solid var(--yellow);outline-offset:3px}

/* Namensnennung: die Geometrie stammt aus OpenStreetMap (ODbL) */
.red-onion-editorial .ro-kartenquelle{
  position:absolute;right:10px;bottom:8px;margin:0;
  font:400 11px/1.2 'Work Sans', sans-serif;
  /* .55 kam auf der hellen Kartenflaeche nur auf 3,78:1 */
  color:rgba(27, 25, 22, .72);
}

/* ---------- Handy: untereinander, Platte unter die Karte ---------- */
@media (max-width:760px){
  .red-onion-editorial .ro-schluss-grid{
    grid-template-columns:1fr;
    gap:clamp(30px,6vw,40px);
  }
  .red-onion-editorial .ro-karte-map{
    height:240px;
    border-radius:12px 12px 0 0;
  }
  /* Die Platte wuerde bei 240px Kartenhoehe fast die Haelfte verdecken -
     deshalb wandert sie darunter. */
  .red-onion-editorial .ro-adressplatte{
    position:static;
    padding:16px 20px 18px;
    border-radius:0 0 12px 12px;
  }
  .red-onion-editorial .ro-adresszeile{white-space:normal}
  .red-onion-editorial .ro-route{width:100%;padding:0 16px}
  /* unten rechts ist auf dem Handy frei, weil die Platte darunter sitzt */
  .red-onion-editorial .ro-kartenquelle{right:10px;bottom:8px;top:auto}
  .red-onion-editorial .ro-zeit-zeile{min-height:48px}
}

/* Das Ornament mit dem Pin bleibt, aber nicht in Rot: sonst laege Rot in
   dieser Sektion auf drei Rollen statt auf den zwei vorgesehenen
   (Route-Knopf und heutiger Tag). Es traegt keine Information, deshalb
   genuegt die stille Cremefassung. */
.red-onion-editorial .ro-schluss-marke{color:rgba(246, 237, 225, .45)}


/* ==========================================================================
   RUNDE 35 - Footer: zwei Spalten statt drei, halbe Hoehe
   Die Spalte "Navigation" ist entfallen: dieselben fuenf Punkte stehen im
   klebenden Kopf, der auf der ganzen Seite mitlaeuft. Sie war zugleich die
   laengste Spalte (6 Zeilen gegen 2) und damit die Ursache der ueberschuessigen
   Hoehe - die kuerzeren Spalten standen mittig in einer Reihe, die sich an ihr
   ausrichtete. Auch die Ueberschrift "Kontakt" ist weg: bei Adresse und
   Telefonnummer ist offensichtlich, was da steht.
   ========================================================================== */
.red-onion-editorial .editorial-footer{
  padding-block:56px 40px;
}
.red-onion-editorial .editorial-footer-inner{
  /* Nachtrag: links gesetzt liess rechts 778px Leere stehen. Jetzt drei
     inhaltsbreite Gruppen - Wortmarke, Adresse, Telefon/E-Mail - gleichmaessig
     ueber die Breite verteilt. space-between teilt den Freiraum in zwei
     gleich grosse Luecken, statt ihn an einer Stelle zu sammeln. */
  grid-template-columns:auto auto auto;
  justify-content:space-between;
  column-gap:clamp(40px,4vw,64px);
  align-items:start;
  padding-block:0;
}
/* Der Satz unter der Wortmarke laeuft auf dem breiten Desktop in einer Zeile
   durch - je breiter die linke Gruppe, desto kleiner die Luecken daneben. */
.red-onion-editorial .editorial-footer-brand p{max-width:none;white-space:nowrap}
/* Unter 900px wird die Zeile zu breit: die drei Gruppen kaemen auf 694px und
   der Container hat dort nur noch rund 740. Also wieder umbrechen lassen. */
@media (max-width:900px){
  .red-onion-editorial .editorial-footer-brand p{max-width:30ch;white-space:normal}
}
/* Die frueher mittige Ausrichtung erzeugte ueber und unter der kuerzeren
   Spalte Leerraum. Beide Spalten beginnen jetzt auf derselben Linie. */
.red-onion-editorial .editorial-footer-inner > *{align-self:start}
/* Eine Altregel aus Runde 3 zieht die Wortmarke unter 768px ueber alle Spalten
   (grid-column:1/-1). Zwischen 761 und 767px, wo das Handy-Raster noch nicht
   greift, brach die Reihe dadurch um. Hier ausdruecklich zurueckgenommen. */
.red-onion-editorial .editorial-footer-brand{grid-column:auto}
/* letzter Absatz der Kontaktspalte trug noch 3px Aussenabstand nach unten */
.red-onion-editorial .editorial-footer-col p:last-child{margin-bottom:0}
.red-onion-editorial .editorial-footer-meta{
  margin-top:32px;
  padding-block:12px 0;
}
/* Tippflaeche der Rechtslinks: der Text bleibt 12,5px, die Trefferflaeche
   waechst auf 45px Hoehe. Waagerecht nur +8px, damit sich die beiden
   Flaechen im Abstand des Trennpunkts nicht ueberlappen. */
.red-onion-editorial .editorial-footer-meta a{position:relative}
.red-onion-editorial .editorial-footer-meta a::before{
  content:"";position:absolute;inset:-15px -4px;
}

@media (max-width:760px){
  .red-onion-editorial .editorial-footer{padding-block:40px 32px}
  .red-onion-editorial .editorial-footer-inner{
    grid-template-columns:1fr;
    justify-content:stretch;
    gap:26px;
  }
  /* Handy: alles untereinander. Adresse und Telefon/E-Mail ruecken wieder
     zusammen, sie gehoeren inhaltlich zueinander. */
  .red-onion-editorial .editorial-footer-inner{row-gap:0}
  .red-onion-editorial .editorial-footer-brand{margin-bottom:26px}
  .red-onion-editorial .fuss-ort{margin-bottom:3px}
  .red-onion-editorial .editorial-footer-brand p{max-width:30ch;white-space:normal}
  .red-onion-editorial .editorial-footer-meta{margin-top:28px}
}


/* ==========================================================================
   RUNDE 36 - Speisekarte: fuenf Praezisierungen
   1) Das Karussell zeigt eine eigene Auswahl, nicht die geoeffnete Kategorie -
      das wird jetzt gesagt statt vorausgesetzt, und der Bildblock rueckt von
      der Liste ab. Autoplay ist aus (im Inline-Skript).
   2) Leere Zellen in der zweiten Preisspalte bekommen einen Gedankenstrich -
      leer las sich wie vergessen.
   3) Blatt statt Stern, mit Legende und verstecktem Wort.
   4) Die einspaltigen Kategorien standen 380-480px vom Preis entfernt.
   5) Spiess statt Strich vor dem Kategorienamen.
   ========================================================================== */

/* ---------- 1) Karussell: Unterzeile und Abstand ---------- */
/* Der Bildblock setzt sich deutlicher von der Liste ab. */
.red-onion-editorial .menu-grid{column-gap:clamp(48px, 3.6vw, 68px)}

/* ---------- 2) Gedankenstrich statt leerer Zelle ---------- */
.red-onion-editorial .mpreis-ohne{
  color:rgba(27, 25, 22, .35);
  /* Breite, Ausrichtung und Ziffernlaufweite kommen aus .mpreis - der Strich
     steht damit auf derselben rechten Kante wie die Preise darueber. */
}

/* ---------- 3) Blatt statt Stern ---------- */
.red-onion-editorial .mveg{
  color:var(--veg-hell);
  font-weight:400;
}
.red-onion-editorial .mveg-blatt{
  display:inline-block;
  vertical-align:-2px;
}
/* Letztes Wort und Blatt bleiben zusammen - ein geschuetzter Abstand allein
   verhindert den Umbruch vor einem Inline-Block nicht zuverlaessig. */
.red-onion-editorial .mname-letzte{white-space:nowrap}
/* Nur fuer Screenreader: das Symbol darf nicht der einzige Traeger sein. */
.red-onion-editorial .nur-sr{
  position:absolute;
  width:1px;height:1px;
  margin:-1px;padding:0;border:0;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
}
.red-onion-editorial .menu-legende{
  display:flex;align-items:center;gap:8px;
  margin:clamp(18px,1.8vw,24px) 0 0;
  font:400 13px/1.4 'Work Sans', sans-serif;
  color:var(--auf-hell-still);
}
.red-onion-editorial .menu-legende-icon{
  display:inline-flex;
  color:var(--veg-hell);
}

/* ---------- 4) Preisspalten naeher an die Namen ----------
   Betroffen sind die drei einspaltigen Kategorien (Calzone, Doenerpfanne,
   Getraenke): dort war die Zeile 660px breit bei Namen von 78-180px, der
   Preis stand bis zu 480px entfernt. Die gemeinsame rechte Preiskante bleibt,
   sie rueckt nur mit nach links. */
.red-onion-editorial .mpanel[data-spalten="1"] .menu-spalten{max-width:340px}
/* Damit die Kopflinie nicht ueber die volle Kartenbreite laeuft, waehrend die
   Gerichtszeilen darunter nur 340px breit sind. */
.red-onion-editorial .mpanel[data-spalten="1"] .mpanel-side{max-width:340px}

/* ---------- 5) Spiess statt Strich ---------- */
.red-onion-editorial .mpanel-head::before{content:none}
/* Runde 37: statt der gezeichneten Fassung das echte Spiesslogo. Die Grafik
   ist einfarbig und wurde beim Aufbereiten auf --red-dark gefaerbt, damit sie
   denselben Rotton traegt wie der Kategoriename daneben. */

/* ---------- Handy ---------- */
@media (max-width:760px){
  .red-onion-editorial .mpanel[data-spalten="1"] .menu-spalten,
  .red-onion-editorial .mpanel[data-spalten="1"] .mpanel-side{max-width:none}
  /* Tippflaechen des Karussells */
  .red-onion-editorial .ms-arrow{width:44px;height:44px}
  /* 44x44 Trefferflaeche. Der Abstand von 34px sorgt dafuer, dass die
     Flaechen aneinanderstossen statt sich zu ueberlappen. */
  .red-onion-editorial .ms-dot{position:relative}
  .red-onion-editorial .ms-dot::before{content:"";position:absolute;inset:-19px -19px}
  .red-onion-editorial .ms-dots{gap:38px}
}


/* ==========================================================================
   RUNDE 38 - Speisekarte: Inhalt
   Nur zwei Ergaenzungen noetig: eine sekundaere Zeile fuer die
   Sachhinweise unter der Kategorie-Einleitung, und der Knopf
   "Weitere Gerichte entdecken" trug noch die Cremefarben der dunklen
   Fassung und war auf dem hellen Grund unsichtbar.
   ========================================================================== */

/* Sachhinweis unter der Einleitung: eine Stufe kleiner und aufrecht statt
   kursiv - dieselbe Farbe, damit der Kontrast von 4,66:1 erhalten bleibt.
   Keine Box, kein Badge, keine neue Farbe. */
.red-onion-editorial .mkat-zusatz{
  margin:0 0 8px;
  font:400 12.5px/1.5 'Work Sans', sans-serif;
  color:var(--auf-hell-still);
}
.red-onion-editorial .mkat-hinweis:has(+ .mkat-zusatz){margin-bottom:2px}

/* Knopf "Weitere Gerichte entdecken": Tinte statt Creme. */
.red-onion-editorial .menu-mehr{
  color:var(--auf-hell);
  border-bottom-color:rgba(27, 25, 22, .28);
}
.red-onion-editorial .menu-mehr:hover{
  color:var(--auf-hell);
  border-bottom-color:var(--red-dark);
}
.red-onion-editorial .menu-mehr:focus-visible{outline-color:var(--red-dark)}


/* ==========================================================================
   RUNDE 40 - Desktop-Feinschliff
   Punkt 6  Anker der Speisekarte fest in CSS statt nur ueber das Skript
   Punkt 9  Footer in die helle Farbwelt
   Punkt 10 Statuswort und -punkt der Schnellinfo wieder eindeutig faerben
   ========================================================================== */

/* ---------- Punkt 6: Sprungziel Speisekarte ----------
   Der Wert stand bisher nur als Inline-Stil aus dem Ankerskript
   (gemessen: 51px bei 1920, 54 bei 1366, 63 bei 1024). Dieselbe Rechnung hier
   ausdruecklich in CSS: Kopfleiste + Luft minus dem Innenabstand der Sektion,
   denn direkt darunter beginnt die Ueberschrift. Damit landet der Anker auch
   dann richtig, wenn das Skript spaeter oder gar nicht laeuft. */
.red-onion-editorial #speisekarte{
  scroll-margin-top:calc(var(--roh-stuck) + var(--anker-luft, 24px) - clamp(26px, 2.6vw, 38px));
}

/* ---------- Punkt 9: Footer hell ----------
   Ausschliesslich Farben. Aufbau, Reihenfolge und Wortlaut unveraendert. */
.red-onion-editorial .editorial-footer{
  background:var(--sek-hell);
  color:var(--auf-hell-still);
}
.red-onion-editorial .editorial-footer-brand > span{color:var(--auf-hell)}
.red-onion-editorial .editorial-footer-brand > span > span{color:var(--red-dark)}
.red-onion-editorial .editorial-footer-brand p{color:var(--auf-hell-still)}
.red-onion-editorial .editorial-footer-col p{color:var(--auf-hell-still)}
.red-onion-editorial .editorial-footer a{color:var(--auf-hell)}
.red-onion-editorial .editorial-footer a:hover{color:var(--red-dark)}
/* Die Hover-Hilfsklasse aus Runde 3 setzt #e8442b mit !important - auf hellem
   Grund gilt aber --red-dark. */
.red-onion-editorial .editorial-footer a[data-h="7"]:hover{color:var(--red-dark) !important}
.red-onion-editorial .editorial-footer-meta{
  color:var(--auf-hell-still);
  border-top-color:var(--linie-hell);
}
.red-onion-editorial .editorial-footer a:focus-visible{outline-color:var(--red-dark)}

/* ---------- Punkt 10: Status wieder eindeutig ----------
   Geoeffnet gruen, geschlossen rot - Punkt UND Wort. Beide Werte stammen aus
   der vorhandenen Palette: --green ist gedaempft (5,15:1 auf dem dunklen
   Grund), --red ist das Markenrot fuer dunkle Flaechen.
   Die Zusatzzeile bleibt creme und wird ausdruecklich nicht mitgefaerbt. */
.red-onion-editorial .ro-sl-status.ist-offen .ro-sl-led{background:var(--green)}
.red-onion-editorial .ro-sl-status.ist-offen .ro-sl-wort{color:var(--green)}
.red-onion-editorial .ro-sl-status.ist-zu .ro-sl-led{background:var(--red)}
.red-onion-editorial .ro-sl-status.ist-zu .ro-sl-wort{color:var(--red)}
.red-onion-editorial .ro-sl-naechste{color:var(--auf-dunkel-still)}


/* ---------- Nachtrag Runde 40: Speisekarten-Knopf ueber die Schlagzeile ----
   Er stand vorher unter der Unterzeile und fiel dort auf den Schriftzug am
   Wagen. Jetzt sitzt er an der Stelle, an der frueher das Eyebrow stand -
   der Knopf selbst bleibt unveraendert, nur die Abstaende drehen sich um. */
.red-onion-editorial .editorial-hero-actions{
  margin-top:0;
  margin-bottom:clamp(18px, 2.2vh, 26px);
}
@media (max-width:999px){
  .red-onion-editorial .editorial-hero-actions{
    margin-top:0;
    margin-bottom:clamp(16px, 2vh, 22px);
  }
}


/* ==========================================================================
   RUNDE 42 - Standortkarte groesser, Kontakt als eigener Abschnitt
   1) Die Kartenhoehe war in Runde 34 bewusst an die Wochentabelle gekoppelt
      (7 Zeilen a 44px = 308px). Die Kopplung faellt jetzt weg. Nebeneffekt:
      die Grafik wird weniger beschnitten, weil 380px naeher am Seitenverhaeltnis
      der SVG (640x420 = 1.524) liegt als 308px.
   2) #kontakt sass auf .ro-schluss-grid, also nur rund 170px unter #zeiten -
      beide Menuepunkte fuehrten praktisch auf dasselbe Bild. Kontakt ist jetzt
      ein eigener heller Abschnitt zwischen der dunklen Standort-Sektion und
      dem Footer.
   ========================================================================== */

/* ---------- 1. Standortkarte ---------- */
/* aspect-ratio aus dem alten Aufbau muss weg: mit fester Hoehe leitet
   der Browser daraus die Breite ab, und die Karte lief aus ihrer Spalte. */
.red-onion-editorial .ro-karte-map{aspect-ratio:auto;width:100%;height:380px}
@media (max-width:1024px){
  /* Tablet: hier schrumpft die Kartenspalte auf 360-485px. Eine feste Hoehe
     waere dort fast quadratisch, deshalb laeuft sie mit der Breite mit. */
  .red-onion-editorial .ro-karte-map{height:clamp(250px, 34vw, 330px)}
}
@media (max-width:760px){
  /* gestapelt: die Adressplatte sitzt darunter, die Karte bleibt kompakt */
  .red-onion-editorial .ro-karte-map{height:265px}
}

/* ---------- 2. Kontaktabschnitt ---------- */
/* Hell, aber einen Ton heller als der Footer (--paper 97.31 L* gegen
   --sek-hell 94.28 L*). Diese leichte Tonabweichung ersetzt eine Trennlinie:
   die beiden hellen Flaechen bleiben unterscheidbar, ohne dass eine weitere
   Farbflaeche oder Kante dazukommt. */
.red-onion-editorial .ro-draht{
  background:var(--paper);
  color:var(--auf-hell);
  padding-block:clamp(66px, 6.4vw, 98px);
}
.red-onion-editorial .ro-draht-inner{
  width:min(var(--container), calc(100% - var(--container-pad) * 2));
  margin-inline:auto;
  display:grid;
  grid-template-columns:minmax(0,44fr) minmax(0,56fr);
  gap:clamp(44px, 4.6vw, 84px);
  align-items:start;
}

/* Textspalte */
.red-onion-editorial .ro-draht-eyebrow{
  margin:0 0 16px;
  color:var(--red-dark);
  font:700 11.5px/1 'Archivo', sans-serif;
  letter-spacing:.18em;
  text-transform:uppercase;
}
/* Merriweather liegt nur kursiv als Webfont vor - aufrecht faellt die Zeile
   auf Georgia zurueck. Deshalb wie .ro-schluss-titel kursiv gesetzt. */
.red-onion-editorial .ro-draht-titel{
  margin:0 0 18px;
  max-width:18ch;
  color:var(--auf-hell);
  font:italic 700 clamp(28px, 3vw, 40px)/1.1 'Merriweather', Georgia, serif;
  letter-spacing:-.03em;
}

/* Kontaktwege: Zeilen, keine Karten. Getrennt nur durch Haarlinien. */
.red-onion-editorial .ro-draht-wege{margin:0;padding:0;list-style:none}
.red-onion-editorial .ro-draht-weg + .ro-draht-weg{
  border-top:1px solid var(--linie-hell);
}
.red-onion-editorial .ro-draht-link{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  align-items:center;
  gap:clamp(14px, 1.4vw, 20px);
  min-height:78px;
  padding:15px 0;
  color:inherit;
  text-decoration:none;
}
.red-onion-editorial .ro-draht-zeichen{
  display:inline-flex;align-items:center;justify-content:center;
  width:25px;height:25px;
  color:var(--red-dark);
}
.red-onion-editorial .ro-draht-zeichen svg{display:block;width:100%;height:100%}
.red-onion-editorial .ro-draht-feld{min-width:0}
.red-onion-editorial .ro-draht-art{
  display:block;
  color:var(--auf-hell-still);
  font:700 11px/1 'Archivo', sans-serif;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.red-onion-editorial .ro-draht-wert{
  display:block;
  margin-top:8px;
  color:var(--auf-hell);
  font:500 clamp(18px, 1.45vw, 21px)/1.35 'Work Sans', sans-serif;
  letter-spacing:-.01em;
  overflow-wrap:anywhere;
}
.red-onion-editorial .ro-draht-link:hover .ro-draht-wert{color:var(--red-dark)}
.red-onion-editorial .ro-draht-link:hover .ro-draht-zeichen{color:var(--auf-hell)}
/* Fokusring in --red-dark, nicht --yellow: Gelb ist im Projekt fuer DUNKLE
   Flaechen reserviert (.ro-route, Bewertungspunkte) und erreicht auf --paper
   nur 1.93:1. --red-dark kommt auf 5.75:1 und folgt der Regel "auf hell immer
   --red-dark", die auch .editorial-about, .editorial-menu und der Footer
   anwenden. */
.red-onion-editorial .ro-draht-link:focus-visible{
  outline:3px solid var(--red-dark);
  outline-offset:4px;
  border-radius:4px;
}

/* Tablet bleibt zweispaltig, erst darunter wird gestapelt - gleicher
   Umbruchpunkt wie .ro-schluss-grid darueber. */
@media (max-width:760px){
  .red-onion-editorial .ro-draht{padding-block:clamp(50px, 9vw, 64px)}
  .red-onion-editorial .ro-draht-inner{
    grid-template-columns:1fr;
    gap:clamp(28px, 5vw, 38px);
  }
  .red-onion-editorial .ro-draht-titel{max-width:none}
  .red-onion-editorial .ro-draht-link{min-height:72px}
}


/* ==========================================================================
   RUNDE 43 - Allergene und Zusatzstoffe, Mehrwertsteuerzeile
   Aufklappbar ueber <details>, also ohne zusaetzliches JavaScript, per
   Tastatur bedienbar und standardmaessig geschlossen. Die Speisekarte selbst
   bleibt frei von Kennzeichnungen an jeder Zeile.
   ========================================================================== */

.red-onion-editorial .menu-allergene{
  margin-top:clamp(30px, 3vw, 44px);
  border-top:1px solid var(--linie-hell);
}
.red-onion-editorial .menu-allergene > summary{
  display:flex;
  align-items:center;
  gap:12px;
  min-height:52px;
  cursor:pointer;
  list-style:none;                 /* Firefox */
  color:var(--auf-hell);
  font:700 12px/1.2 'Archivo', sans-serif;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.red-onion-editorial .menu-allergene > summary::-webkit-details-marker{display:none}
/* Chevron rein aus CSS, keine zusaetzliche Grafik */
.red-onion-editorial .menu-allergene > summary::after{
  content:'';
  width:7px;
  height:7px;
  border-right:1.6px solid currentColor;
  border-bottom:1.6px solid currentColor;
  transform:translateY(-2px) rotate(45deg);
  transition:transform .18s ease;
}
.red-onion-editorial .menu-allergene[open] > summary::after{
  transform:translateY(1px) rotate(-135deg);
}
.red-onion-editorial .menu-allergene > summary:hover{color:var(--red-dark)}
.red-onion-editorial .menu-allergene > summary:focus-visible{
  outline:3px solid var(--red-dark);
  outline-offset:3px;
}
.red-onion-editorial .menu-allergene-inhalt{
  padding:2px 0 clamp(20px, 2vw, 30px);
}
.red-onion-editorial .menu-allergene-intro{
  margin:0 0 clamp(18px, 1.8vw, 24px);
  color:var(--auf-hell-leise);
  font:400 13.5px/1.6 'Work Sans', sans-serif;
}
/* Desktop mehrspaltig, mobil einspaltig - ueber auto-fit ohne Breakpoint */
.red-onion-editorial .menu-allergene-spalten,
.red-onion-editorial .menu-allergene-legende{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(190px, 1fr));
  gap:clamp(18px, 1.8vw, 26px) clamp(24px, 2.4vw, 40px);
}
.red-onion-editorial .menu-allergene-legende{
  margin-top:clamp(20px, 2vw, 28px);
  padding-top:clamp(18px, 1.8vw, 24px);
  border-top:1px solid var(--linie-hell);
}
.red-onion-editorial .mall-titel{
  margin:0 0 9px;
  color:var(--auf-hell-still);
  font:700 10.5px/1 'Archivo', sans-serif;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.red-onion-editorial .mall-liste{margin:0;padding:0;list-style:none}
.red-onion-editorial .mall-liste li{
  display:grid;
  /* Mindestens 3.1em, damit alle Nummern buendig stehen - aber mitwachsend,
     weil in "Extras & Getraenke" zwei Wortmarken stehen (Ketchup, Mayonnaise),
     die sonst in die Code-Spalte laufen. */
  grid-template-columns:minmax(3.1em, max-content) minmax(0, 1fr);
  gap:8px;
  padding:2px 0;
  color:var(--auf-hell-leise);
  font:400 13px/1.5 'Work Sans', sans-serif;
}
.red-onion-editorial .mall-nr{color:var(--auf-hell);font-weight:500}
.red-onion-editorial .mall-code{overflow-wrap:anywhere}
.red-onion-editorial .mall-liste-legende li{grid-template-columns:minmax(1.7em, max-content) minmax(0, 1fr)}
.red-onion-editorial .menu-mwst{
  margin:clamp(16px, 1.6vw, 22px) 0 0;
  color:var(--auf-hell-still);
  font:400 12.5px/1.5 'Work Sans', sans-serif;
}
@media (max-width:700px){
  .red-onion-editorial .menu-allergene-spalten,
  .red-onion-editorial .menu-allergene-legende{grid-template-columns:1fr}
  .red-onion-editorial .menu-allergene > summary{min-height:56px}
  .red-onion-editorial .mall-liste li{padding:3px 0}
}


/* ==========================================================================
   RUNDE 44 - Mobile-Pass nach echtem iPhone-Test.
   Alles hier steht in Mobil-Media-Queries; Desktop ab 1000px bleibt
   unberuehrt. Einzige Ausnahme ist der verwaiste Preis-Spaltenkopf, der
   ueber verteile() in index.html geloest wird und deshalb auch im Band
   1000-1299px greift - so war es beauftragt ("darf NIEMALS sichtbar sein").
   ========================================================================== */

@media (max-width:999px){

  /* ---------- 1  Kopfleiste: eine Zeile in jedem Zustand ---------- */
  .red-onion-editorial .roh-row,
  .red-onion-editorial .roh.is-stuck .roh-row,
  .red-onion-editorial .roh.is-open .roh-row,
  .red-onion-editorial .roh--solid .roh-row{
    position:relative;
    grid-template-columns:auto 1fr;
    grid-template-rows:60px;
    grid-template-areas:"burger contact";
    column-gap:10px;
    align-items:center;
    padding-inline:12px;
  }

  /* Brand: absolut zur Mitte der Zeile, und die Zeile ist so breit wie das
     Fenster - damit steht die Wortmarke geometrisch auf 50% des Viewports,
     unabhaengig davon, wie breit Burger und Knoepfe sind. Gilt in ALLEN
     Zustaenden, auch geklebt und bei offenem Menue. */
  .red-onion-editorial .roh-logo,
  .red-onion-editorial .roh.is-stuck .roh-logo,
  .red-onion-editorial .roh.is-open .roh-logo,
  .red-onion-editorial .roh--solid .roh-logo{
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    grid-area:auto;
    justify-self:auto;
    display:inline-flex;
    flex-direction:row;
    align-items:center;
    gap:7px;
    padding:0;
    margin:0;
    z-index:2;
    white-space:nowrap;
  }
  .red-onion-editorial .roh-logo img,
  .red-onion-editorial .roh.is-stuck .roh-logo img,
  .red-onion-editorial .roh.is-open .roh-logo img,
  .red-onion-editorial .roh--solid .roh-logo img{ height:26px; }

  /* Die Wortmarke bleibt in JEDEM Zustand stehen - das war der Kernfehler. */
  .red-onion-editorial .roh-wordmark,
  .red-onion-editorial .roh.is-stuck .roh-wordmark,
  .red-onion-editorial .roh.is-open .roh-wordmark,
  .red-onion-editorial .roh--solid .roh-wordmark{
    display:inline;
    font-size:13.5px;
  }

  /* Kontaktknoepfe rechts: WhatsApp zuerst, dann Telefon - beide nur Symbol.
     Die DOM-Reihenfolge bleibt (Desktop zeigt weiter Telefon zuerst). */
  .red-onion-editorial .roh-contact,
  .red-onion-editorial .roh.is-stuck .roh-contact,
  .red-onion-editorial .roh.is-open .roh-contact,
  .red-onion-editorial .roh--solid .roh-contact{
    grid-area:contact;
    position:static;
    transform:none;
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:7px;
    z-index:3;
  }
  .red-onion-editorial .roh-wa,
  .red-onion-editorial .roh.is-stuck .roh-wa,
  .red-onion-editorial .roh.is-open .roh-wa,
  .red-onion-editorial .roh--solid .roh-wa{
    display:inline-flex;
    order:1;
  }
  .red-onion-editorial .roh-call,
  .red-onion-editorial .roh.is-stuck .roh-call,
  .red-onion-editorial .roh.is-open .roh-call,
  .red-onion-editorial .roh--solid .roh-call{ order:2; }
  .red-onion-editorial .roh-call,
  .red-onion-editorial .roh-wa,
  .red-onion-editorial .roh.is-stuck .roh-call,
  .red-onion-editorial .roh.is-stuck .roh-wa,
  .red-onion-editorial .roh.is-open .roh-call,
  .red-onion-editorial .roh.is-open .roh-wa,
  .red-onion-editorial .roh--solid .roh-call,
  .red-onion-editorial .roh--solid .roh-wa{
    width:40px;
    height:40px;
    min-width:40px;
    padding:0;
    gap:0;
    align-items:center;
    justify-content:center;
    font-size:0;
    /* sichtbar 40px, antippbar 44px - der Rahmen liegt ausserhalb der Optik */
    position:relative;
  }
  .red-onion-editorial .roh-call::after,
  .red-onion-editorial .roh-wa::after{
    content:'';
    position:absolute;
    left:50%;
    top:50%;
    width:44px;
    height:44px;
    transform:translate(-50%,-50%);
  }
  .red-onion-editorial .roh-call .roh-ic,
  .red-onion-editorial .roh-wa .roh-ic{ width:19px;height:19px; }
  /* Die Nummer steht weiterhin im Kontaktbereich, im Footer und im Menue. */
  .red-onion-editorial .roh-call-label{ display:none; }

  /* Bei offenem Menue ist die Leiste hell wie im geklebten Zustand. Die
     vorhandenen Farbregeln (Z2018, Z2035, Z2055) nennen aber nur .is-stuck
     und .roh--solid. Solange die Wortmarke bei .is-open ausgeblendet war,
     fiel das nicht auf - jetzt stuende sie creme auf creme. Nur die drei
     fehlenden Faelle nachziehen, dieselben Werte wie im geklebten Zustand. */
  .red-onion-editorial .roh.is-open .roh-logo{ color:#1b1917; }
  .red-onion-editorial .roh.is-open .roh-wm-accent{ color:#b62f20; }
  .red-onion-editorial .roh.is-open .roh-wa{ color:#24211f;border-color:rgba(27, 25, 23, .26); }

  .red-onion-editorial .roh-burger,
  .red-onion-editorial .roh.is-stuck .roh-burger,
  .red-onion-editorial .roh.is-open .roh-burger{
    grid-area:burger;
    width:42px;
    height:42px;
    padding:0;
    align-items:center;
    justify-content:center;
    z-index:3;
  }

  /* ---------- 2 + 3  Hero: neues Foto, kuerzer, kein 100dvh ---------- */
  .red-onion-editorial .ro-firstscreen{
    min-height:0;
  }
  .red-onion-editorial .ro-hero{
    min-height:560px;                       /* Rueckfall ohne svh */
    min-height:clamp(520px, 74svh, 620px);
    align-items:flex-end;
  }
  /* Ausschnitt fuer das finale Standfoto im Hochformat */
  .red-onion-editorial .ro-hero-media img{ object-position:50% 46%; }

  /* ---------- 4  Heroinhalt ---------- */
  .red-onion-editorial .editorial-hero-actions{
    display:flex;
    justify-content:center;
    margin-top:0;
    margin-bottom:clamp(18px, 2.6vh, 24px);
  }
  .red-onion-editorial .ro-hero-button{
    width:auto;
    max-width:none;
    min-height:52px;
    padding:14px 26px;
    font-size:16px;
  }
  .red-onion-editorial .ro-hero-title{
    font-size:clamp(26px, 7.8vw, 34px);
    line-height:1.1;
  }
  .red-onion-editorial .ro-hero-copy{
    /* 26ch riss den Satz nach "Seit" auseinander; mit der vollen Breite und
       text-wrap:balance bricht er an der Satzgrenze. */
    max-width:34ch;
    margin-top:14px;
    font-size:15.5px;
    line-height:1.5;
  }
}

/* ---------- 5  Schnellinfo kompakter, zwei Fakten nebeneinander ------- */
@media (max-width:760px){
  .red-onion-editorial .ro-sl{
    padding-block:clamp(16px, 3.4vw, 22px);
    gap:8px clamp(12px, 3.5vw, 20px);
  }
}
@media (max-width:430px){
  /* nicht automatisch dreizeilig werden - erst wenn es wirklich nicht passt */
  .red-onion-editorial .ro-sl{
    grid-template-columns:1fr 1fr;
    grid-template-areas:"status status" "links rechts";
    gap:8px 12px;
  }
  .red-onion-editorial .ro-sl-text{ font-size:10px;letter-spacing:.09em; }
  .red-onion-editorial .ro-sl-punkt{ gap:7px; }
}

/* ---------- 6  Ueber uns: nur doppelte Abstaende straffen ------------- */
@media (max-width:760px){
  /* Innenabstand NICHT anfassen: die Sektion steht mobil bereits auf 30px
     oben und unten, also enger als das im Auftrag genannte Band 40-50px.
     Ein "Reduzieren" auf 40px haette sie um 20px verlaengert. Es bleibt bei
     der Zeilenhoehe, die mit 1.72 knapp ueber dem Zielband 1.55-1.65 lag. */
  .red-onion-editorial .editorial-about-copy p{ font-size:16px;line-height:1.62; }
}

/* ---------- 7  Bewertungen: mobil genau eine Karte -------------------- */
@media (max-width:900px){
  .red-onion-editorial .editorial-review-stage{
    display:flex;
    gap:14px;
    overflow-x:auto;
    overflow-y:hidden;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    padding-top:2px;
  }
  .red-onion-editorial .editorial-review-stage::-webkit-scrollbar{ display:none; }
  /* Die vier Gruppen loesen sich auf, damit alle zwoelf Karten eine Reihe
     bilden. display:contents laesst die Karten direkt zu Flex-Kindern der
     Buehne werden, ohne das Markup zu aendern. */
  .red-onion-editorial .rev-group{ display:contents; }
  .red-onion-editorial .editorial-review-card{
    flex:0 0 100%;
    width:100%;
    height:auto;
    scroll-snap-align:center;
    padding:24px 24px 22px;
  }
  .red-onion-editorial .rev-dots{ display:none !important; }
  .red-onion-editorial .rev-zaehler{
    display:block;
    margin:16px 0 0;
    text-align:center;
    color:var(--auf-dunkel-still);
    font:500 13px/1 'Work Sans', sans-serif;
    letter-spacing:.04em;
  }
  .red-onion-editorial .rev-cta-wrap{ margin-top:clamp(26px, 6vw, 36px); }
}
.rev-zaehler{ display:none; }

/* ---------- 10  Speisekarte leicht straffen --------------------------- */
@media (max-width:760px){
  .red-onion-editorial .menu-legende{ margin-top:clamp(14px, 3vw, 18px); }
  .red-onion-editorial .menu-allergene{ margin-top:clamp(22px, 5vw, 30px); }
  .red-onion-editorial .menu-mwst{ margin-top:clamp(12px, 3vw, 16px); }
}

/* ---------- 12  Kontakt kompakter ------------------------------------- */
@media (max-width:760px){
  .red-onion-editorial .ro-draht{ padding-block:clamp(42px, 9vw, 52px); }
  .red-onion-editorial .ro-draht-titel{ font-size:clamp(30px, 8.2vw, 35px); }
  .red-onion-editorial .ro-draht-link{ min-height:64px;padding:12px 0; }
}

/* ---------- 13  Footer straffen --------------------------------------- */
@media (max-width:760px){
  .red-onion-editorial .editorial-footer{ padding-block:32px 24px; }
  /* gap NICHT anfassen: Runde 35 setzt hier row-gap:0 und laesst die Gruppen
     ihren eigenen Abstand tragen. Ein gap-Kurzwert hat das zurueckgesetzt und
     den Footer um 40px verlaengert. */
  .red-onion-editorial .editorial-footer-inner{ column-gap:20px; }
  .red-onion-editorial .editorial-footer-meta{ margin-top:20px; }
}

/* ---------- 11  Oeffnungszeiten: nur Kopfabstand ---------------------- */
@media (max-width:760px){
  .red-onion-editorial .ro-schluss-kopf{ margin-bottom:clamp(20px, 4.5vw, 28px); }
}


/* ==========================================================================
   RUNDE 45 - Mobiler Feinschliff
   1 Hero + Schnellinfo bilden zusammen den ersten Bildschirm
   2 "Nur Barzahlung" als dritte Schnellinfo-Zeile (nur Handy)
   3 leere Preisspalten erzeugen keinen sichtbaren Inhalt mehr
   ========================================================================== */

/* ---------- 1  First View ---------- */
/* Die Schnellinfo liegt jetzt IM .ro-firstscreen. Damit der Desktop exakt so
   bleibt wie freigegeben, gibt dort nicht mehr der Wrapper die Hoehe vor,
   sondern der Hero selbst - Ergebnis ist dieselbe Geometrie wie vorher. */
@media (min-width:1000px){
  .red-onion-editorial .ro-firstscreen{ min-height:0; }
  .red-onion-editorial .ro-hero{
    min-height:100vh;
    min-height:100dvh;
  }
}

@media (max-width:999px){
  /* svh statt dvh: die Hoehe bleibt stehen, wenn Safari seine Leisten ein-
     oder ausblendet. Kein JavaScript fuer die Viewporthoehe. */
  .red-onion-editorial .ro-firstscreen{
    min-height:100vh;
    min-height:100svh;
    display:flex;
    flex-direction:column;
  }
  /* Der Hero nimmt die verbleibende Hoehe auf, hat aber weiter einen eigenen
     Boden fuer sehr flache Geraete. Kein 100dvh-Zwang mehr auf dem Hero. */
  .red-onion-editorial .ro-hero{
    flex:1 1 auto;
    min-height:420px;
    min-height:clamp(420px, 52svh, 560px);
  }
  .red-onion-editorial .ro-quickinfo{ flex:0 0 auto; }
}

/* ---------- 2  "Nur Barzahlung" ---------- */
/* Zusatzinformation, kein vierter Hauptpunkt: kleiner gesetzt als der Status,
   ohne Flaeche, ohne Rahmen, in derselben Linienfarbe abgesetzt.
   Nur auf dem Handy - ab 761px behaelt die Leiste ihren freigegebenen
   einzeiligen Aufbau, dort steht der Hinweis weiter bei den Oeffnungszeiten. */
.red-onion-editorial .ro-sl-bar{ display:none; }

@media (max-width:760px){
  .red-onion-editorial .ro-sl{
    grid-template-columns:1fr 1fr;
    grid-template-areas:"status status" "links rechts" "bar bar";
  }
  .red-onion-editorial .ro-sl-bar{
    grid-area:bar;
    display:flex;
    justify-content:center;
    align-items:center;
    gap:8px;
    margin-top:2px;
    padding-top:10px;
    border-top:1px solid var(--strich-dunkel);
  }
  .red-onion-editorial .ro-sl-bar .ro-sl-text{
    font-size:11px;
    font-weight:700;
    letter-spacing:.12em;
    color:var(--auf-dunkel-leise);
  }
  .red-onion-editorial .ro-sl-bar .ro-sl-icon svg{ width:19px;height:19px; }
  .red-onion-editorial .ro-sl-bar .ro-sl-icon{ color:var(--auf-dunkel-leise); }

  /* Die beiden Servicepunkte mittig in ihrer Haelfte, damit das Paar
     ausgewogen unter dem Status steht statt links angeschlagen. */
  .red-onion-editorial .ro-sl-links,
  .red-onion-editorial .ro-sl-rechts{
    justify-content:center;
    align-items:center;
  }
  .red-onion-editorial .ro-sl-links .ro-sl-text,
  .red-onion-editorial .ro-sl-rechts .ro-sl-text{ line-height:1.45; }
}
@media (max-width:430px){
  /* Der 430er-Block setzt das Raster erneut - die dritte Zeile muss mit. */
  .red-onion-editorial .ro-sl{
    grid-template-columns:1fr 1fr;
    grid-template-areas:"status status" "links rechts" "bar bar";
  }
}

/* ---------- 3  leere Preisspalten ---------- */
/* Sicherheitsnetz ohne JavaScript: enthaelt eine Preisspalte kein sichtbares
   Gericht, erzeugt sie auch keinen Inhalt. Greift zusaetzlich zu verteile(),
   also auch dann, wenn das Skript noch nicht gelaufen ist. */
/* Das hidden-Attribut allein reicht hier NICHT: es wirkt nur ueber die
   Browser-Grundregel [hidden]{display:none}, und die wird von jeder eigenen
   display-Angabe geschlagen. .mpreiszeile{display:flex} (Z3511) hat genau das
   getan - der Preiskopf stand trotz hidden=true mit 30px im Bild. Deshalb
   beide Faelle ausdruecklich abschalten. */
.red-onion-editorial .menu-column[hidden]{ display:none !important; }
.red-onion-editorial .mpreiszeile[hidden]{ display:none !important; }
.red-onion-editorial .menu-column:not(:has(.mzeile:not([hidden]))){ display:none; }


/* Nur unterhalb 375px: dort blieb zwischen Wortmarke und WhatsApp-Knopf
   nur 1px. Nach der in Runde 44 vereinbarten Reihenfolge zuerst der
   Aussenabstand, dann Schriftgrad und Maskottchen - Aufbau, Zentrierung und
   Knopfgroessen bleiben unveraendert. Ab 375px aendert sich nichts. */
@media (max-width:374px){
  .red-onion-editorial .roh-row,
  .red-onion-editorial .roh.is-stuck .roh-row,
  .red-onion-editorial .roh.is-open .roh-row,
  .red-onion-editorial .roh--solid .roh-row{ padding-inline:10px; }
  .red-onion-editorial .roh-wordmark,
  .red-onion-editorial .roh.is-stuck .roh-wordmark,
  .red-onion-editorial .roh.is-open .roh-wordmark,
  .red-onion-editorial .roh--solid .roh-wordmark{ font-size:12.5px; }
  .red-onion-editorial .roh-logo img,
  .red-onion-editorial .roh.is-stuck .roh-logo img,
  .red-onion-editorial .roh.is-open .roh-logo img,
  .red-onion-editorial .roh--solid .roh-logo img{ height:24px; }
  .red-onion-editorial .roh-logo{ gap:6px; }
}


/* ==========================================================================
   RUNDE 46 - Verdunklung zurueckgenommen
   Gemessen wurde der reine Untergrund (Kopfleiste und Eyebrow ausgeblendet),
   und zwar die hellsten 5% des Bandes, nicht der Mittelwert.
   ========================================================================== */

/* ---- Speisekartenbild: Verlauf kurz statt schwach ----
   Der Eyebrow "Unsere Klassiker" sitzt bei JEDER Breite in den obersten
   11-49px und traegt schon einen Textschatten. Der Untergrund ist dort das
   hellblaue Tischtuch (#b3c3cf) - schwaecher als 46% faellt der Kontrast
   unter 4.5:1, deshalb bleibt die Deckung oben gleich. Der alte Verlauf zog
   sich aber ueber die GANZE Bildhoehe (20% Schwarz noch bei 55%, erst unten
   null) und hat damit das Gericht selbst gedaempft. Jetzt endet er nach
   118px - der Teller bleibt im Originalton. */
.red-onion-editorial .ms-viewport::before{
  background:linear-gradient(to bottom,
    rgba(0, 0, 0, .46) 0,
    rgba(0, 0, 0, .42) 46px,
    rgba(0, 0, 0, .16) 82px,
    rgba(0, 0, 0, 0) 118px);
}

/* ---- Hero-Kopf: von 72% auf 48% ----
   Hinter der Wortmarke liegen im ungueenstigsten Fall #979b9b (390px) bzw.
   #aebcc5 (1920px). Mit 48% Deckung kommt #f6ede1 dort auf 6.3:1 bzw. 4.9:1,
   bleibt also ueber 4.5:1 - bei 40% waere 1920px mit 4.06:1 durchgefallen.
   Der Verlauf laeuft ausserdem frueher aus. */
.red-onion-editorial .roh-scrim{
  background:linear-gradient(180deg,
    rgba(10, 10, 9, .48) 0%,
    rgba(10, 10, 9, .40) 46%,
    rgba(10, 10, 9, .18) 74%,
    rgba(10, 10, 9, 0) 100%);
}


/* ==========================================================================
   RECHTSSEITEN - Impressum und Datenschutzerklaerung
   Reiner Lesetext in der bestehenden hellen Papierwelt. Keine Karten, keine
   Kacheln, keine Badges - nur Lesebreite, klare Ueberschriften und Luft.
   Greift ausschliesslich in <main class="recht">, beruehrt also nichts auf
   der Startseite.
   ========================================================================== */

.red-onion-editorial .recht{
  width:min(880px, calc(100% - var(--container-pad) * 2));
  margin-inline:auto;
  /* oben Platz fuer die feste Kopfleiste. Die solide Variante der
     Rechtsseiten ist nur 61-65px hoch, der Wert braucht also nicht mit der
     Fensterbreite mitzuwachsen - 13vw liess bei 1440px 190px Leere stehen. */
  padding-block:clamp(96px, 8vw, 124px) clamp(56px, 8vw, 92px);
  color:var(--auf-hell);
}
.red-onion-editorial .recht h1{
  margin:0 0 10px;
  font:italic 700 clamp(32px, 5vw, 46px)/1.1 'Merriweather', Georgia, serif;
  letter-spacing:-.03em;
  color:var(--auf-hell);
}
.red-onion-editorial .recht .recht-intro{
  margin:0 0 clamp(30px, 4vw, 44px);
  color:var(--auf-hell-still);
  font:400 15.5px/1.6 'Work Sans', sans-serif;
}
.red-onion-editorial .recht section{
  margin:0 0 clamp(26px, 3.4vw, 38px);
  padding-top:clamp(20px, 2.6vw, 28px);
  border-top:1px solid var(--linie-hell);
}
.red-onion-editorial .recht h2{
  margin:0 0 12px;
  font:700 clamp(17px, 1.6vw, 20px)/1.3 'Archivo', sans-serif;
  letter-spacing:-.01em;
  color:var(--auf-hell);
}
.red-onion-editorial .recht p{
  margin:0 0 13px;
  color:var(--auf-hell-leise);
  font:400 16px/1.72 'Work Sans', sans-serif;
  overflow-wrap:break-word;
}
.red-onion-editorial .recht p:last-child{margin-bottom:0}
.red-onion-editorial .recht ul{
  margin:0 0 13px;
  padding:0 0 0 20px;
  color:var(--auf-hell-leise);
  font:400 16px/1.72 'Work Sans', sans-serif;
}
.red-onion-editorial .recht li{margin:0 0 4px}
.red-onion-editorial .recht a{
  color:var(--red-dark);
  text-decoration:underline;
  text-underline-offset:2px;
  overflow-wrap:anywhere;
}
.red-onion-editorial .recht a:hover{color:var(--auf-hell)}
.red-onion-editorial .recht a:focus-visible{
  outline:3px solid var(--red-dark);
  outline-offset:3px;
}

@media (max-width:760px){
  .red-onion-editorial .recht{
    padding-block:clamp(84px, 22vw, 104px) clamp(44px, 9vw, 60px);
  }
  .red-onion-editorial .recht p,
  .red-onion-editorial .recht ul{font-size:15.5px;line-height:1.68}
}


/* ==========================================================================
   RUNDE 48 - zwei Mobil-Korrekturen
   ========================================================================== */

@media (max-width:999px){

  /* ---------- 1  Verlauf ueber dem Speisekartenbild ----------
     Der Kasten .ms-viewport::before ist nur 28% des Bildes hoch (Z2612).
     Der in Runde 46 gesetzte Pixel-Verlauf reichte bis 118px und wurde auf
     dem Handy bei rund 74px ABGESCHNITTEN - mit noch etwa 29% Schwarz an der
     Kante. Das ergab genau den harten dunklen Balken.
     Jetzt bestimmt die Kastenhoehe die Zone (76px), und der Verlauf laeuft in
     Prozent bis exakt null an der Unterkante - also kein Schnitt mehr.
     Die Deckung oben bleibt bei 46%: darunter faellt der Kontrast des
     Schriftzugs auf dem hellblauen Tischtuch unter 4.5:1 (44% = 4.55:1,
     42% = 4.29:1). */
  .red-onion-editorial .ms-viewport::before{
    height:76px;
    background:linear-gradient(180deg,
      rgba(0, 0, 0, .46) 0%,
      rgba(0, 0, 0, .44) 50%,
      rgba(0, 0, 0, .18) 78%,
      rgba(0, 0, 0, 0) 100%);
  }
  /* etwas naeher an die obere Bildkante */
  .red-onion-editorial .menu-karte-eyebrow{ top:8px; }

  /* ---------- 2  Ueber uns: Reihenfolge auf dem Handy ----------
     Erst der Abschnitt, dann das Bild. Umgesetzt ueber display:contents und
     order - das Markup bleibt unveraendert, es gibt keine doppelten Inhalte,
     und ab 1000px greift nichts davon. */
  .red-onion-editorial .editorial-about{ padding-top:44px; }
  .red-onion-editorial .editorial-about-card{ gap:0; }
  .red-onion-editorial .editorial-about-content,
  .red-onion-editorial .editorial-about-copy{ display:contents; }

  .red-onion-editorial .editorial-about-copy .editorial-about-eyebrow{
    order:1;
    margin:0;
  }
  .red-onion-editorial .editorial-about-card .ro-ornament{
    order:2;
    margin:8px 0 0;
  }
  .red-onion-editorial .editorial-about-copy h2{
    order:3;
    margin:13px 0 0;
  }
  .red-onion-editorial picture.editorial-about-image{
    order:4;
    /* die Zeilen-/Spaltenbindung aus Z2464 muss weg, sonst haelt sie das
       Bild trotz order in der ersten Rasterzeile fest */
    grid-row:auto;
    grid-column:auto;
    margin:27px auto 0;
  }
  .red-onion-editorial .editorial-about-copy h2 + p{
    order:5;
    margin:27px 0 0;
  }
  .red-onion-editorial .editorial-about-copy p + p{
    order:5;
    margin:21px 0 0;
  }
}


/* ==========================================================================
   RUNDE 49 - Variante C auf dem Handy
   Status als Pille unten links im Hero, darunter drei gleichwertige Punkte
   mit Symbol ueber dem Text. Barzahlung mittig, Parkplaetze aussen.
   Alles in @media (max-width:999px) - Desktop bleibt unberuehrt.
   ========================================================================== */

@media (max-width:999px){

  /* ---------- Kopfleiste deckend statt Verlauf ----------
     Mit einer deckenden Leiste braucht das Foto oben gar keine Abdunklung
     mehr: der Verlauf faellt ersatzlos weg, das Bild beginnt unangetastet
     direkt unter der Leiste. Der geklebte Zustand bleibt wie freigegeben. */
  .red-onion-editorial .roh:not(.is-stuck):not(.is-open) .roh-row{
    background:var(--sek-dunkel);
  }
  .red-onion-editorial .roh-scrim{ display:none; }

  /* ---------- Status als Pille unten links im Hero ----------
     Kein Markup-Umbau: die Schnellinfo liegt seit Runde 45 mit dem Hero im
     selben .ro-firstscreen. Die Pille wird deshalb aus der Schnellinfo heraus
     nach oben ueber den Hero gesetzt - bottom:100% haengt sie exakt an deren
     Oberkante, unabhaengig davon, wie hoch die Leiste gerade ist. */
  /* Die Statuszeile steht direkt unter der Kopfleiste, nicht mehr unten im
     Hero. Sie braucht dort einen Traeger: an dieser Stelle liegen im Foto
     Himmel und weisses Vordach (#cad9e5), auf denen der Zustand nur 1.2:1
     erreichen wuerde. Der Streifen hat denselben Ton wie die Leiste darueber
     und liest sich als deren Fortsetzung - das Foto selbst bleibt voellig
     unangetastet, es beginnt einfach darunter.
     Anker ist .ro-firstscreen, weil dort seit Runde 45 Hero UND Schnellinfo
     drinliegen; top:60px entspricht der Hoehe der mobilen Kopfzeile. */
  .red-onion-editorial .ro-firstscreen{ position:relative; }
  .red-onion-editorial .ro-sl{ position:static; }
  .red-onion-editorial .ro-sl-status{
    position:absolute;
    top:60px;
    left:0;
    right:0;
    margin:0;
    padding:10px 16px 11px;
    background:var(--sek-dunkel);
    border-bottom:1px solid var(--strich-dunkel);
    z-index:4;
    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
    align-items:center;
    justify-content:center;
    gap:0 15px;
    border-radius:0;
    min-height:0;
  }
  .red-onion-editorial .ro-sl-naechste{
    position:relative;
    padding-left:16px;
  }
  .red-onion-editorial .ro-sl-naechste::before{
    content:'';
    position:absolute;
    left:0;
    top:50%;
    width:1px;
    height:15px;
    transform:translateY(-50%);
    background:rgba(246, 237, 225, .34);
  }
  /* kein Textschatten noetig - der Streifen traegt den Kontrast */
  .red-onion-editorial .ro-sl-wort,
  .red-onion-editorial .ro-sl-naechste{ text-shadow:none; }
  .red-onion-editorial .ro-sl-status::before,
  .red-onion-editorial .ro-sl-status::after{ content:none; }
  .red-onion-editorial .ro-sl-zeile{ gap:9px; }
  /* 19px fett: damit gilt die WCAG-Grossschrift-Schwelle von 3:1 statt 4.5:1.
     Bei 16px waere der Zustand ohne Flaeche darunter nicht sicher lesbar,
     ohne den Hero deutlich abzudunkeln. Die Vorlage zeigt den Schriftzug
     ohnehin groesser. */
  .red-onion-editorial .ro-sl-wort{ font-size:19px;letter-spacing:.10em; }
  /* wie in der Vorlage: die Zeitangabe steht gleichwertig daneben, nicht
     kleingedruckt darunter - groesser und heller als in der Leistenfassung */
  .red-onion-editorial .ro-sl-naechste{
    font-size:14.5px;
    color:var(--auf-dunkel);
  }

  /* ---------- drei gleichwertige Punkte, Symbol ueber dem Text ---------- */
  .red-onion-editorial .ro-sl{
    grid-template-columns:repeat(3, minmax(0, 1fr));
    grid-template-areas:"links bar rechts";
    gap:0;
    padding-block:clamp(18px, 4.4vw, 26px);
    align-items:start;
  }
  .red-onion-editorial .ro-sl-links{ grid-area:links; }
  .red-onion-editorial .ro-sl-bar{ grid-area:bar; }
  .red-onion-editorial .ro-sl-rechts{ grid-area:rechts; }
  .red-onion-editorial .ro-sl-punkt{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:flex-start;
    gap:9px;
    margin:0;
    padding:0 8px;
    text-align:center;
    border-top:0;
  }
  /* feine Trennstriche zwischen den drei Punkten */
  .red-onion-editorial .ro-sl-bar,
  .red-onion-editorial .ro-sl-rechts{
    border-left:1px solid var(--strich-dunkel);
  }
  .red-onion-editorial .ro-sl-punkt .ro-sl-icon{ color:var(--auf-dunkel-leise); }
  .red-onion-editorial .ro-sl-punkt .ro-sl-icon svg{ width:25px;height:25px; }
  .red-onion-editorial .ro-sl-punkt .ro-sl-text{
    font:700 10.5px/1.45 'Archivo', sans-serif;
    letter-spacing:.11em;
    text-transform:uppercase;
    color:var(--auf-dunkel-leise);
  }
}

@media (max-width:430px){
  /* der 430er-Block aus Runde 45 setzt das Raster erneut - mitziehen */
  .red-onion-editorial .ro-sl{
    grid-template-columns:repeat(3, minmax(0, 1fr));
    grid-template-areas:"links bar rechts";
    gap:0;
  }
  .red-onion-editorial .ro-sl-punkt{ gap:8px;padding:0 4px; }
  .red-onion-editorial .ro-sl-punkt .ro-sl-text{ font-size:9.5px;letter-spacing:.09em; }
  .red-onion-editorial .ro-sl-punkt .ro-sl-icon svg{ width:23px;height:23px; }
}


/* Der Hero-Verlauf wird im untersten Streifen etwas tiefer gezogen, weil dort
   jetzt die Statuszeile ohne eigene Flaeche steht. Der Untergrund war dort
   #444138 (hellste 5%) - zu hell fuer den Zustand. Betroffen ist nur der
   Bereich, der ohnehin fuer Schlagzeile und Unterzeile abgedunkelt ist. */
/* Der Hero-Verlauf geht auf seinen freigegebenen Stand zurueck: die
   Vertiefung war nur noetig, solange die Statuszeile ohne Flaeche unten im
   Hero stand. Jetzt sitzt sie oben auf eigenem Grund. */
@media (max-width:999px){
  .red-onion-editorial .ro-hero-overlay{
    background:linear-gradient(to top,
      rgba(10,10,9,.74) 0%,
      rgba(10,10,9,.70) 13%,
      rgba(10,10,9,.62) 25%,
      rgba(10,10,9,.36) 34%,
      rgba(10,10,9,.19) 43%,
      rgba(10,10,9,.08) 53%,
      rgba(10,10,9,.02) 64%,
      rgba(10,10,9,0) 74%);
  }
}

/* ==========================================================================
   RUNDE 52 - Handy: anderes Hero-Foto, kein Balken mehr
   1  Der Spiess traegt den Hero, der Stand wandert zu "Ueber uns".
      Der Tausch laeuft ueber <source media> im <picture> - kein doppeltes
      Markup, kein Skript, und ab 1000px greift keine der Quellen.
   2  Die deckende Kopfleiste UND der dunkle Streifen unter ihr fallen weg.
      Statt zwei harter Flaechen uebereinander traegt EIN durchgehender
      weicher Verlauf von oben sowohl die Wortmarke als auch den Zustand.
   Alles in @media (max-width:999px) - Desktop bleibt unberuehrt.
   ========================================================================== */

@media (max-width:999px){

  /* ---------- Kopfleiste wieder durchsichtig ----------
     Die Flaeche aus Runde 49 faellt weg. Der eigene .roh-scrim bleibt aus:
     er liegt im fixierten Kopf (z-index 60) und wuerde die Statuszeile
     darunter mit abdunkeln. Der Verlauf sitzt deshalb im Hero. */
  .red-onion-editorial .roh:not(.is-stuck):not(.is-open) .roh-row{
    background:transparent;
  }

  /* ---------- ein Verlauf fuer Kopfzeile und Zustand ----------
     Der Spiess ist warm und mittelhell - die hellsten 5% liegen im obersten
     Zehntel bei #f3e0b4. Ohne Abdunklung erreicht Weiss dort 1.15:1.
     Der Verlauf haelt seine Deckung bis etwa 115px und laeuft dann bis 250px
     auf null aus: keine Kante, kein Balken, und im Fenster zwischen Scrollwert
     0 und 70 (ab dort wird die Leiste ohnehin deckend) bleibt die Wortmarke
     die ganze Zeit auf getragenem Grund. */
  .red-onion-editorial .ro-hero-overlay{
    background:
      linear-gradient(to bottom,
        rgba(10,10,9,.60) 0px,
        rgba(10,10,9,.58) 72px,
        rgba(10,10,9,.52) 112px,
        rgba(10,10,9,.32) 158px,
        rgba(10,10,9,.13) 205px,
        rgba(10,10,9,0) 250px),
      linear-gradient(to top,
        rgba(10,10,9,.74) 0%,
        rgba(10,10,9,.70) 13%,
        rgba(10,10,9,.62) 25%,
        rgba(10,10,9,.36) 34%,
        rgba(10,10,9,.19) 43%,
        rgba(10,10,9,.08) 53%,
        rgba(10,10,9,.02) 64%,
        rgba(10,10,9,0) 74%);
  }

  /* ---------- Zustand: nur Schrift, keine Flaeche ----------
     Position bleibt wie zuletzt freigegeben - direkt unter der Kopfzeile -,
     aber Flaeche und Unterkante fallen weg. */
  .red-onion-editorial .ro-sl-status{
    top:63px;
    padding:0 16px;
    background:none;
    border-bottom:0;
  }
  .red-onion-editorial .ro-sl-naechste::before{
    background:rgba(246, 237, 225, .40);
  }

  /* ---------- Ueber uns zeigt jetzt den Stand ----------
     Das Standfoto ist quer, der Kasten fast quadratisch. Ohne Korrektur
     schneidet die Mitte den Stand an; 46% x setzt den Eingang mittig. */
  .red-onion-editorial picture.editorial-about-image img{
    object-position:46% 50%;
  }
}

/* ==========================================================================
   RUNDE 52 b - Hero-Foto weiter aufziehen
   Der Ausschnitt sass zu nah am Spiess. Ursache ist reine Geometrie: der
   Hero ist auf dem Handy 390 zu 750 (Verhaeltnis .57), das Foto 1122 zu 1246
   (.90). "cover" muss deshalb 42% der Bildbreite abschneiden.
   Das Bild bekommt jetzt nur noch 80% der Hoehe und wird mittig gesetzt -
   dadurch faellt der Beschnitt auf 27%, man sieht deutlich mehr vom Raum.
   Die frei werdenden Streifen oben und unten fuellt dasselbe Foto weich
   gezeichnet und abgedunkelt. Beide Streifen liegen ohnehin unter dem
   Verlauf (oben) bzw. unter der Schlagzeile (unten), es entsteht also keine
   sichtbare Kante, sondern eine Tiefenunschaerfe.
   Die Fuellung nutzt exakt die Datei, die das <img> bei den ueblichen
   Geraetebreiten ohnehin laedt - kein zusaetzlicher Abruf.
   ========================================================================== */

@media (max-width:999px){
  .red-onion-editorial .ro-hero-media{
    overflow:hidden;
    /* Hoehe des unscharfen Bandes. Steht als eigene Angabe da, weil sie an
       zwei Stellen gebraucht wird: als Oberkante des Fotos und in dessen
       Hoehe. Beide Prozentwerte beziehen sich auf dieselbe Hoehe. */
    --band:clamp(112px, 15%, 132px);
  }

  .red-onion-editorial .ro-hero-media::before{
    content:'';
    position:absolute;
    inset:0;
    /* eigene, sehr kleine Fuellgrafik statt des Hero-Fotos: sie ist bereits
       weichgezeichnet und wird nie scharf gesehen, braucht also keine
       Aufloesung. Wuerde hier das Hero-Foto stehen, laedt ein Geraet mit
       dreifacher Pixeldichte eine zweite Datei (gemessen +129 kB), weil das
       <img> dort die 1122er Fassung waehlt, die CSS-Angabe aber die 900er. */
    background-image:url('../images/hero-fuellung-300.jpg');
    background-image:-webkit-image-set(
      url('../images/hero-fuellung-300.webp') type('image/webp'),
      url('../images/hero-fuellung-300.jpg')  type('image/jpeg'));
    background-image:image-set(
      url('../images/hero-fuellung-300.webp') type('image/webp'),
      url('../images/hero-fuellung-300.jpg')  type('image/jpeg'));
    background-size:cover;
    background-position:50% 50%;
    filter:blur(10px) brightness(.66) saturate(.85);
    /* der Weichzeichner zieht die Bildkante nach innen - leicht ueberskalieren,
       sonst steht aussen ein heller Saum */
    transform:scale(1.14);
    z-index:0;
  }

  /* unten buendig: der frei werdende Rand liegt dadurch komplett oben, also
     genau in der Zone, die der Verlauf ohnehin abdunkelt. Unten entstuende
     sonst ein flacher Streifen zwischen Foto und Schnellinfo, der wie ein
     Loch aussieht.
     Die Oberkante ist eine harte Kante. Ein weiches Einblenden liess das
     Foto selbst unscharf wirken, statt das Band als eigene Flaeche zu zeigen.
     Die Kante haengt nicht mehr an der Herohoehe: bei 20 % waere sie auf
     kurzen Fenstern (Hero 545px) auf 109px gerutscht und damit nur 24px
     unter die Statuszeile - zu eng fuer eine sichtbare Kante. clamp() haelt
     sie zwischen 128px und 170px, der Abstand zur Statuszeile bleibt dadurch
     ueberall bei mindestens 43px. */
  .red-onion-editorial .ro-hero-media img{
    position:absolute;
    left:0;
    right:0;
    top:var(--band);
    /* die Hoehe muss ausgerechnet werden. Mit height:auto gilt fuer ein
       absolut gesetztes Bild die Eigenhoehe, und bottom wird verworfen -
       das Foto endete dadurch mitten im Hero (gemessen bei 583 statt 749). */
    height:calc(100% - var(--band));
    width:100%;
    z-index:1;
    object-position:50% 50%;
  }
}

/* ==========================================================================
   RUNDE 52 c - Statuszeile auf schmalen Geraeten
   "Geschlossen" braucht bei 19px mit .10em Sperrung 192px, die Zeitangabe
   136px, dazu 31px Abstand und Trennstrich - zusammen 359px. Bei 390px
   Geraetebreite bleiben 358px Platz: es passte auf einen Hauch genau, ab
   374px abwaerts brach es um.
   19px bleibt gesetzt - darunter greift die WCAG-Schwelle 4.5:1 statt 3:1,
   und die 3.33:1 des Rot wuerden dann nicht mehr reichen. Gespart wird
   deshalb an Sperrung und Abstaenden, nicht an der Schriftgroesse.
   Unter 340px reicht auch das nicht mehr: dort stehen Zustand und Zeit
   sauber untereinander, der senkrechte Strich faellt weg.
   ========================================================================== */

@media (max-width:374px){
  .red-onion-editorial .ro-sl-status{ padding-inline:10px; gap:0 10px; }
  .red-onion-editorial .ro-sl-wort{ letter-spacing:.05em; }
  .red-onion-editorial .ro-sl-naechste{ padding-left:11px; font-size:14px; }
}

@media (max-width:339px){
  /* hier steht der Zustand zweizeilig und endet erst bei 104 statt 85 -
     das Band braucht deshalb etwas mehr Hoehe, sonst sitzt die Kante direkt
     unter der Schrift. */
  .red-onion-editorial .ro-hero-media{ --band:132px; }
  .red-onion-editorial .ro-sl-status{
    flex-direction:column;
    gap:2px;
    text-align:center;
  }
  .red-onion-editorial .ro-sl-naechste{ padding-left:0; }
  .red-onion-editorial .ro-sl-naechste::before{ content:none; }
}

/* Etwas mehr Deckung genau im Band der Statuszeile: das Rot des geschlossenen
   Zustands stand bei 3.33:1 (noetig 3:1 bei 19px fett) sehr knapp ueber der
   Schwelle. Der Verlauf ist stufenlos, die Vertiefung ist nicht sichtbar. */
@media (max-width:999px){
  .red-onion-editorial .ro-hero-overlay{
    background:
      linear-gradient(to bottom,
        rgba(10,10,9,.66) 0px,
        rgba(10,10,9,.66) 72px,
        rgba(10,10,9,.56) 112px,
        rgba(10,10,9,.33) 158px,
        rgba(10,10,9,.13) 205px,
        rgba(10,10,9,0) 250px),
      linear-gradient(to top,
        rgba(10,10,9,.74) 0%,
        rgba(10,10,9,.70) 13%,
        rgba(10,10,9,.62) 25%,
        rgba(10,10,9,.36) 34%,
        rgba(10,10,9,.19) 43%,
        rgba(10,10,9,.08) 53%,
        rgba(10,10,9,.02) 64%,
        rgba(10,10,9,0) 74%);
  }
}

/* ==========================================================================
   RUNDE 52 d - Schnellinfo: Trennlinien und Textlage
   Zwei gemessene Fehler:
   1  Die drei Spalten waren nur so hoch wie ihr Inhalt (align-items:start).
      Die Trennlinien waren dadurch unterschiedlich lang - bei 390px 45px vs
      59px. Mit stretch sind alle Spalten gleich hoch, die Linien also auch.
   2  "PARKPLAETZE DIREKT" war per geschuetztem Leerzeichen zusammengeklebt
      und damit unteilbar 115px breit. Die Spalte ist bei 390px aber nur
      118px breit und bei 360px 108px - der Text lief gemessen 3 bis 4px
      UEBER die Trennlinie. Die Klebung sitzt jetzt bei "am Stand"; das war
      der eigentliche Wunsch (untere Zeile), und "Parkplaetze direkt" darf
      umbrechen, wenn der Platz nicht reicht.
   Dazu bekommen die Spalten einen echten Innenabstand, damit zwischen
   Schrift und Linie immer Luft steht.
   ========================================================================== */

@media (max-width:999px){
  .red-onion-editorial .ro-sl{ align-items:stretch; }
  .red-onion-editorial .ro-sl-punkt{ padding:0 10px; }
}

/* Der wirksamere Hebel ist der Aussenabstand des Streifens, nicht die
   Schriftgroesse: 18px auf jeder Seite kosten 12px je Spalte. Mit 12px
   wachsen alle drei Spalten, ohne dass die Beschriftung kleiner wird als
   noetig. Die Sperrung faellt von .09em auf .045em - bei 17 Zeichen sind
   das allein 7px. */
@media (max-width:430px){
  .red-onion-editorial .ro-sl{ padding-inline:12px; }
  .red-onion-editorial .ro-sl-punkt{ padding:0 8px; }
  .red-onion-editorial .ro-sl-punkt .ro-sl-text{ font-size:9px;letter-spacing:.045em; }
}

@media (max-width:374px){
  .red-onion-editorial .ro-sl-punkt{ padding:0 7px; }
}

/* ==========================================================================
   RUNDE 52 e - Schnellinfo weiter aufziehen
   Die drei Gruppen wirkten zur Mitte gezogen, aussen blieb Platz liegen.
   Zwei Stellschrauben, gemessen bei 360, 390 und 430:
   - der Aussenabstand des Streifens faellt weg (er kostete jeder Spalte
     Breite, ohne dass aussen etwas gewonnen war - die Beschriftung steht
     ohnehin mittig in ihrer Spalte und behaelt 13px bis zur Kante),
   - die beiden Aussenspalten werden schmaler als die Mitte. Das schiebt die
     Trennlinien nach aussen UND die Symbolmitten mit, denn beides haengt an
     derselben Spaltengrenze.
   Bei 390px: Symbolmitten von 85/196/306 auf 74/195/317, Trennlinien von
   140/250 auf 130/260 - je rund 10px nach aussen. Der Abstand zwischen
   Schrift und Linie bleibt bei mindestens 10px.
   ========================================================================== */

@media (max-width:999px){
  .red-onion-editorial .ro-sl{
    padding-inline:0;
    grid-template-columns:.86fr 1fr .86fr;
  }
}

@media (max-width:430px){
  .red-onion-editorial .ro-sl{ padding-inline:0; }
}

/* ==========================================================================
   RUNDE 52 f - Kopfzeile bleibt dunkel
   Beim Runterziehen auf dem iPhone und beim Neuladen erschien hinter der
   durchsichtigen Kopfzeile eine weisse Flaeche.
   Gemessen: <html> hat gar keine eigene Hintergrundfarbe. Die Leinwand
   uebernimmt deshalb die des <body> - und die ist Creme (#faf7f1). Genau
   diese Flaeche zeigt iOS im ueberdehnten Bereich oberhalb der Seite, und
   sie liegt beim Neuladen hinter der Kopfzeile, solange das Foto fehlt.
   Die Wortmarke stand in diesen Momenten Creme auf Creme.
   Zwei Angaben beheben das:
   - <html> bekommt den dunklen Ton, der ohnehin oben im Hero liegt. Er
     entspricht auch dem theme-color #101010 der Seite.
   - das Bildfeld bekommt denselben Ton als Grund, damit schon der erste
     Anstrich dunkel ist, bevor irgendein Bild geladen wurde.
   Nur bis 999px, damit der Desktop unberuehrt bleibt.
   ========================================================================== */

@media (max-width:999px){
  html{ background-color:#1a1917; }
  .red-onion-editorial .ro-hero-media{ background-color:#1a1917; }
}

/* ==========================================================================
   RUNDE 53 - Bewertungen auf dem Handy
   Der Zaehler "x von 12" steht nicht mehr sichtbar da. Er wird aber NICHT
   auf display:none gesetzt: er ist ein aria-live-Bereich und meldet beim
   Wischen die erreichte Karte. display:none nimmt ihn auch aus dem
   Barrierefreiheitsbaum. Stattdessen wird er auf einen Bildpunkt
   zusammengezogen und abgeschnitten - unsichtbar, aber weiter vorlesbar.
   ========================================================================== */

@media (max-width:900px){
  .red-onion-editorial .rev-zaehler{
    position:absolute;
    width:1px;
    height:1px;
    margin:-1px;
    padding:0;
    border:0;
    overflow:hidden;
    white-space:nowrap;
    clip-path:inset(50%);
  }
}


/* ==========================================================================
   CATERING-UEBERGANG ALS OVERLAY AUF DEM BESTEHENDEN TEASER
   Der Teaser bleibt im Dokumentfluss. Schwarz und Introtext liegen getrennt
   darueber und verschwinden ohne Einfluss auf Hoehe oder Scrollposition.
   Ohne JavaScript bleibt der finale Teaser sichtbar.
   ========================================================================== */

.red-onion-editorial .roc-catering-sektion{
  position:relative;
  margin:0;
  padding:0 clamp(20px, 3.2vw, 60px);
  background:var(--sek-hell);
}
.red-onion-editorial .roc-trigger{
  position:absolute;
  top:12%;
  left:0;
  width:2px;
  height:2px;
  pointer-events:none;
}
.red-onion-editorial .roc-buehne{
  position:relative;
  width:100%;
  height:clamp(440px, 25vw, 480px);
  margin:0 auto;
  overflow:hidden;
  isolation:isolate;
  background:var(--paper-warm);
}
.red-onion-editorial .roc-stage{
  display:grid;
  grid-template-columns:minmax(0, 1.3fr) minmax(420px, 1fr);
  width:100%;
  height:100%;
  background:var(--paper-warm);
  transform-origin:50% 50%;
}
@media (min-width:901px){
  .red-onion-editorial .roc-trigger{ left:50%; }
  .red-onion-editorial .roc-buehne{
    width:100vw;
    margin-left:calc(50% - 50vw);
    margin-right:calc(50% - 50vw);
  }
  .red-onion-editorial .roc-stage{
    width:auto;
    margin-inline:3vw;
  }
}

/* ---------- Kompakter Catering-Endzustand ---------- */
.red-onion-editorial .roc-bild{
  position:relative;
  margin:24px 0 24px 24px;
  overflow:hidden;
  border-radius:4px;
  background:var(--paper-deep);
  transform-origin:50% 60%;
}
.red-onion-editorial .roc-bild img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 53%;
}
.red-onion-editorial .roc-bild figcaption{
  position:absolute;
  left:12px;
  bottom:12px;
  padding:7px 10px;
  background:rgba(250,247,241,.94);
  color:var(--ink);
  font:700 10.5px/1 "Archivo", sans-serif;
  letter-spacing:.1em;
  text-transform:uppercase;
}
.red-onion-editorial .roc-text{
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:32px clamp(30px, 4vw, 58px);
}
.red-onion-editorial .roc-text::before{
  content:"";
  position:absolute;
  left:0;
  top:16%;
  bottom:16%;
  width:3px;
  background:var(--red);
  transform-origin:bottom;
}
.red-onion-editorial .roc-kicker{
  margin:0;
  color:var(--red);
  font:700 11px/1 "Archivo", sans-serif;
  letter-spacing:.18em;
  text-transform:uppercase;
}
.red-onion-editorial .roc-titel{
  max-width:560px;
  margin:11px 0 13px;
  color:var(--ink);
  font:italic 700 clamp(32px, 2.7vw, 46px)/.96 "Merriweather", serif;
  letter-spacing:-.043em;
  overflow-wrap:normal;
}
.red-onion-editorial .roc-lead{
  max-width:43ch;
  margin:0 0 12px;
  color:var(--muted);
  font-size:15px;
  line-height:1.5;
}
.red-onion-editorial .roc-cta{
  align-self:flex-start;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:42px;
  padding:0 18px;
  border-radius:4px;
  background:var(--red);
  color:#fff;
  text-decoration:none;
  font:700 11.5px/1 "Archivo", sans-serif;
  letter-spacing:.1em;
  text-transform:uppercase;
  transition:background-color .2s ease;
}
.red-onion-editorial .roc-cta:hover{ background:var(--red-dark); }
.red-onion-editorial .roc-cta:focus-visible{
  outline:3px solid var(--red-dark);
  outline-offset:3px;
}

/* ---------- Schwarzes Overlay und Introtext als getrennte Ebenen ---------- */
.red-onion-editorial .roc-vorhang{ display:none; }
.red-onion-editorial .roc-catering-sektion.roc-motion-ready .roc-vorhang{
  position:absolute;
  z-index:10;
  inset:0;
  display:grid;
  place-items:center;
  color:#f8f1e8;
  background:transparent;
  opacity:1;
  visibility:visible;
  pointer-events:none;
}
.red-onion-editorial .roc-catering-sektion.roc-motion-ready .roc-vorhang::before{
  content:"";
  position:absolute;
  z-index:0;
  inset:0;
  background:#191817;
  opacity:1;
}
.red-onion-editorial .roc-vorhang-signal{
  position:absolute;
  z-index:1;
  top:44%;
  left:50%;
  display:grid;
  justify-items:center;
  gap:12px;
  width:min(100%, 1100px);
  margin:0;
  padding:28px;
  text-align:center;
  transform:translate(-50%, -50%);
}
.red-onion-editorial .roc-vorhang-signal small{
  color:rgba(248,241,232,.76);
  font:700 11px/1 "Archivo", sans-serif;
  letter-spacing:.23em;
  text-transform:uppercase;
  opacity:0;
  transform:translateY(10px) scale(.96);
  filter:blur(1.5px);
}
.red-onion-editorial .roc-vorhang-signal strong{
  max-width:900px;
  color:var(--red);
  font:italic 700 clamp(52px, 4.2vw, 72px)/.98 "Merriweather", serif;
  letter-spacing:-.05em;
  opacity:0;
  transform:translateY(13px) scale(.96);
  filter:blur(1.5px);
  text-shadow:0 0 0 rgba(183,42,38,0);
}
.red-onion-editorial .roc-catering-sektion.roc-motion-ready .roc-buehne:not(.ist-aktiv):not(.ist-fertig) .roc-stage{
  opacity:0;
  transform:translateY(16px) scale(.99);
}
.red-onion-editorial .roc-catering-sektion.roc-motion-ready .roc-buehne.ist-aktiv .roc-vorhang::before{
  animation:rocSchwarzAus .86s cubic-bezier(.42,0,.58,1) 1.02s forwards;
}
.red-onion-editorial .roc-catering-sektion.roc-motion-ready .roc-buehne.ist-aktiv .roc-vorhang-signal small{
  animation:
    rocSignalKickerEin .42s cubic-bezier(.28,0,.12,1) both,
    rocSignalKickerAus .86s cubic-bezier(.42,0,.58,1) 1.02s forwards;
}
.red-onion-editorial .roc-catering-sektion.roc-motion-ready .roc-buehne.ist-aktiv .roc-vorhang-signal strong{
  animation:
    rocSignalHeadlineEin .42s cubic-bezier(.28,0,.12,1) both,
    rocSignalHeadlineAus 1.18s cubic-bezier(.42,0,.58,1) 1.24s forwards,
    rocSignalHeadlineGlow 1.18s ease-in-out 1.24s forwards;
}
.red-onion-editorial .roc-catering-sektion.roc-motion-ready .roc-buehne.ist-aktiv .roc-stage{
  animation:rocCateringEin .88s cubic-bezier(.2,.72,.16,1) .78s both;
}
.red-onion-editorial .roc-catering-sektion.roc-motion-ready .roc-buehne.ist-fertig .roc-stage{
  opacity:1;
  transform:none;
  animation:none;
}
.red-onion-editorial .roc-catering-sektion.roc-motion-ready .roc-buehne.ist-fertig .roc-vorhang{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}

@keyframes rocSignalKickerEin{
  0%{ opacity:0; transform:translateY(10px) scale(.96); filter:blur(1.5px); }
  100%{ opacity:1; transform:none; filter:blur(0); }
}
@keyframes rocSignalKickerAus{
  0%{ opacity:1; transform:none; filter:blur(0); }
  100%{ opacity:0; transform:none; filter:blur(0); }
}
@keyframes rocSignalHeadlineEin{
  0%{ opacity:0; transform:translateY(13px) scale(.96); filter:blur(1.5px); text-shadow:0 0 0 rgba(183,42,38,0); }
  100%{ opacity:1; transform:none; filter:blur(0); text-shadow:0 0 0 rgba(183,42,38,0); }
}
@keyframes rocSignalHeadlineAus{
  0%{ opacity:1; transform:scale(1); }
  100%{ opacity:0; transform:scale(1.018); }
}
@keyframes rocSignalHeadlineGlow{
  0%{ text-shadow:0 0 0 rgba(183,42,38,0); }
  45%{ text-shadow:0 0 22px rgba(183,42,38,.16); }
  100%{ text-shadow:0 0 28px rgba(183,42,38,0); }
}
@keyframes rocSchwarzAus{
  0%{ opacity:1; }
  100%{ opacity:0; }
}
@keyframes rocCateringEin{
  0%{ opacity:0; transform:translateY(16px) scale(.99); }
  100%{ opacity:1; transform:none; }
}
@keyframes rocOverlayReduziert{
  0%{ opacity:1; }
  100%{ opacity:0; }
}

@media (max-width:900px){
  .red-onion-editorial .roc-catering-sektion{
    padding:0 20px;
  }
  .red-onion-editorial .roc-buehne{
    height:660px;
  }
  .red-onion-editorial .roc-stage{
    grid-template-columns:1fr;
    grid-template-rows:300px 1fr;
  }
  .red-onion-editorial .roc-bild{
    margin:18px 18px 0;
  }
  .red-onion-editorial .roc-text{
    padding:30px 42px 34px;
  }
  .red-onion-editorial .roc-text::before{
    left:18px;
    top:26px;
    bottom:30px;
  }
  .red-onion-editorial .roc-titel{
    font-size:clamp(34px, 5.5vw, 42px);
  }
  .red-onion-editorial .roc-lead{ font-size:14px; }
  .red-onion-editorial .roc-vorhang-signal strong{
    font-size:clamp(42px, 8vw, 58px);
  }
}

@media (max-width:560px){
  .red-onion-editorial .roc-catering-sektion{
    padding:0 16px;
  }
  .red-onion-editorial .roc-buehne{ height:640px; }
  .red-onion-editorial .roc-stage{
    grid-template-rows:270px 1fr;
  }
  .red-onion-editorial .roc-bild{ margin:12px 16px 0; }
  .red-onion-editorial .roc-text{ padding:18px 24px 24px; }
  .red-onion-editorial .roc-catering-sektion .roc-cta{ width:auto; }
  .red-onion-editorial .roc-text::before{
    left:16px;
    top:16px;
    bottom:22px;
  }
  .red-onion-editorial .roc-titel{ font-size:26px; }
  .red-onion-editorial .roc-vorhang-signal strong{ font-size:clamp(30px, 9vw, 38px); }
}

@media (prefers-reduced-motion:reduce){
  .red-onion-editorial .roc-catering-sektion.roc-motion-ready .roc-buehne .roc-stage{
    opacity:1 !important;
    transform:none !important;
    animation:none !important;
  }
  .red-onion-editorial .roc-catering-sektion.roc-motion-ready .roc-vorhang-signal small,
  .red-onion-editorial .roc-catering-sektion.roc-motion-ready .roc-vorhang-signal strong{
    opacity:1 !important;
    transform:none !important;
    filter:none !important;
    text-shadow:none !important;
    animation:none !important;
  }
  .red-onion-editorial .roc-catering-sektion.roc-motion-ready .roc-buehne.ist-aktiv .roc-vorhang{
    animation:rocOverlayReduziert .16s linear forwards;
  }
  .red-onion-editorial .roc-catering-sektion.roc-motion-ready .roc-buehne.ist-aktiv .roc-vorhang::before{
    animation:none !important;
  }
  .red-onion-editorial .roc-cta{ transition:none; }
}


/* ==========================================================================
   CATERING-UNTERSEITE catering.html
   Setzt den kompakten Einstieg der Startseite fort: gleiche Tokens, gleiche
   Schriften, gleicher Namensraum .roc- . Kein zweites Designsystem.
   Aufbau: Seitenkopf, Faktenzeile, beide Buffets (58/42), die vier
   Bestandteile des indischen Buffets, kompakter Abschluss.
   ========================================================================== */

.red-onion-editorial .roc-seite{
  max-width:1180px;
  margin:0 auto;
  padding:clamp(96px, 12vh, 132px) clamp(20px, 5vw, 46px) clamp(56px, 8vh, 84px);
}

/* ---------- Seitenkopf ---------- */
.red-onion-editorial .roc-seite-kopf{
  max-width:720px;
  margin:0 auto clamp(24px, 3.4vh, 34px);
  text-align:center;
}
.red-onion-editorial .roc-seite-kopf h1{
  max-width:720px;
  margin:10px auto 12px;
  color:var(--ink);
  font:italic 700 clamp(34px, 4.4vw, 56px)/.98 "Merriweather", serif;
  letter-spacing:-.043em;
}
.red-onion-editorial .roc-seite-lead{
  max-width:52ch;
  margin:0 auto;
  color:var(--muted);
  font-size:16px;
  line-height:1.6;
}

/* ---------- Faktenzeile ---------- */
.red-onion-editorial .roc-fakten{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  margin:0 0 clamp(26px, 4vh, 40px);
  padding:0;
  list-style:none;
  border-top:1px solid var(--linie-hell);
  border-bottom:1px solid var(--linie-hell);
}
.red-onion-editorial .roc-fakten li{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:56px;
  padding:10px;
  color:var(--muted);
  text-align:center;
  font:700 11.5px/1.35 "Archivo", sans-serif;
  letter-spacing:.1em;
  text-transform:uppercase;
}
.red-onion-editorial .roc-fakten li + li{ border-left:1px solid var(--linie-hell); }

/* ---------- Die beiden Buffets: 58 zu 42 ---------- */
.red-onion-editorial .roc-angebote{
  display:grid;
  grid-template-columns:1.16fr .84fr;
  gap:clamp(14px, 1.6vw, 22px);
  margin:0 0 clamp(40px, 6vh, 62px);
}
.red-onion-editorial .roc-angebot{
  display:flex;
  flex-direction:column;
  min-width:0;
  overflow:hidden;
  border-radius:6px;
  background:var(--paper-warm);
}
.red-onion-editorial .roc-angebot-bild{
  margin:0;
  height:240px;
  overflow:hidden;
}
.red-onion-editorial .roc-angebot--haupt .roc-angebot-bild{ height:268px; }
.red-onion-editorial .roc-angebot-bild img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 53%;
}
.red-onion-editorial .roc-angebot-text{
  padding:clamp(16px, 2vw, 22px);
}
.red-onion-editorial .roc-preis{
  margin:0 0 6px;
  color:var(--ink);
  font:700 24px/1 "Merriweather", serif;
}
.red-onion-editorial .roc-preis span{
  margin-left:6px;
  color:var(--muted);
  font:700 10px/1 "Archivo", sans-serif;
  letter-spacing:.11em;
  text-transform:uppercase;
}
.red-onion-editorial .roc-angebot-text h2{
  margin:0 0 12px;
  color:var(--ink);
  font:italic 700 22px/1 "Merriweather", serif;
  letter-spacing:-.028em;
}
.red-onion-editorial .roc-liste{
  margin:0;
  padding:0;
  list-style:none;
  color:var(--muted);
  font-size:14.5px;
  line-height:1.55;
}
.red-onion-editorial .roc-liste li{
  position:relative;
  padding-left:16px;
}
.red-onion-editorial .roc-liste li::before{
  content:"";
  position:absolute;
  left:0;
  top:.62em;
  width:6px;
  height:1px;
  background:var(--red);
}

/* ---------- Die vier Bestandteile ---------- */
.red-onion-editorial .roc-gerichte{
  margin:0 0 clamp(40px, 6vh, 62px);
}
.red-onion-editorial .roc-gerichte-titel{
  margin:0 0 clamp(16px, 2.2vh, 22px);
  color:var(--ink);
  font:italic 700 clamp(21px, 2.1vw, 26px)/1.05 "Merriweather", serif;
  letter-spacing:-.03em;
}
.red-onion-editorial .roc-gerichte-liste{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:clamp(10px, 1.2vw, 16px);
  margin:0;
  padding:0;
  list-style:none;
}
.red-onion-editorial .roc-gerichte-liste > li{
  min-width:0;
}
.red-onion-editorial .roc-gerichte.roc-gerichte-wartet .roc-gerichte-liste > li{
  opacity:0;
  transform:translateY(34px) scale(.72);
}
.red-onion-editorial .roc-gerichte.roc-gerichte-spielt .roc-gerichte-liste > li{
  transform-origin:center bottom;
  animation:rocTellerPop 720ms cubic-bezier(.2,1.35,.35,1) both;
}
.red-onion-editorial .roc-gerichte.roc-gerichte-spielt .roc-gerichte-liste > li:nth-child(1){ animation-delay:0ms; }
.red-onion-editorial .roc-gerichte.roc-gerichte-spielt .roc-gerichte-liste > li:nth-child(2){ animation-delay:170ms; }
.red-onion-editorial .roc-gerichte.roc-gerichte-spielt .roc-gerichte-liste > li:nth-child(3){ animation-delay:340ms; }
.red-onion-editorial .roc-gerichte.roc-gerichte-spielt .roc-gerichte-liste > li:nth-child(4){ animation-delay:510ms; }
@keyframes rocTellerPop{
  0%{ opacity:0; transform:translateY(34px) scale(.72); }
  68%{ opacity:1; transform:translateY(-3px) scale(1.045); }
  100%{ opacity:1; transform:translateY(0) scale(1); }
}
.red-onion-editorial .roc-gerichte-liste figure{
  margin:0;
  overflow:hidden;
  border-radius:6px;
  background:var(--paper-warm);
}
.red-onion-editorial .roc-gerichte-liste img{
  display:block;
  width:100%;
  height:150px;
  object-fit:cover;
  object-position:center 55%;
}
.red-onion-editorial .roc-gerichte-liste figcaption{
  padding:11px 13px 13px;
  color:var(--ink);
  font:700 11.5px/1.3 "Archivo", sans-serif;
  letter-spacing:.1em;
  text-transform:uppercase;
}

/* ---------- Abschluss ---------- */
.red-onion-editorial .roc-abschluss{
  display:grid;
  grid-template-columns:1.3fr .7fr;
  align-items:center;
  gap:clamp(20px, 3vw, 40px);
  padding:clamp(24px, 3.4vw, 34px);
  border-radius:6px;
  background:var(--sek-dunkel);
  color:var(--auf-dunkel);
}
.red-onion-editorial .roc-abschluss h2{
  margin:0 0 8px;
  color:var(--auf-dunkel);
  font:italic 700 clamp(21px, 2.1vw, 26px)/1.05 "Merriweather", serif;
  letter-spacing:-.03em;
}
.red-onion-editorial .roc-abschluss p{
  max-width:46ch;
  margin:0;
  color:#c9c0b8;
  font-size:14.5px;
  line-height:1.55;
}
.red-onion-editorial .roc-abschluss-wege{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:12px;
}
.red-onion-editorial .roc-tel{
  color:var(--auf-dunkel);
  text-decoration:none;
  font:700 15px/1 "Archivo", sans-serif;
  letter-spacing:.02em;
  border-bottom:1px solid rgba(246, 237, 225, .34);
  padding-bottom:2px;
}
.red-onion-editorial .roc-tel:hover{ border-bottom-color:var(--auf-dunkel); }
.red-onion-editorial .roc-tel:focus-visible{
  outline:3px solid var(--auf-dunkel);
  outline-offset:3px;
}

/* ---------- Tablet ---------- */
@media (max-width:900px){
  .red-onion-editorial .roc-angebote{ grid-template-columns:1fr; }
  .red-onion-editorial .roc-angebot-bild,
  .red-onion-editorial .roc-angebot--haupt .roc-angebot-bild{ height:230px; }
  .red-onion-editorial .roc-gerichte-liste{ grid-template-columns:repeat(2, 1fr); }
  .red-onion-editorial .roc-abschluss{ grid-template-columns:1fr; align-items:start; }
}

/* ---------- Handy ---------- */
@media (max-width:560px){
  .red-onion-editorial .roc-fakten{ grid-template-columns:1fr; }
  .red-onion-editorial .roc-fakten li{
    min-height:0;
    padding:13px 10px;
  }
  .red-onion-editorial .roc-fakten li + li{
    border-left:0;
    border-top:1px solid var(--linie-hell);
  }
  .red-onion-editorial .roc-angebot-bild,
  .red-onion-editorial .roc-angebot--haupt .roc-angebot-bild{ height:196px; }
  .red-onion-editorial .roc-gerichte-liste img{ height:128px; }
  .red-onion-editorial .roc-abschluss-wege{ align-self:stretch; }
  .red-onion-editorial .roc-cta{ width:100%; }
}

@media (prefers-reduced-motion:reduce){
  .red-onion-editorial .roc-gerichte.roc-gerichte-wartet .roc-gerichte-liste > li,
  .red-onion-editorial .roc-gerichte.roc-gerichte-spielt .roc-gerichte-liste > li{
    opacity:1;
    transform:none;
    animation:none !important;
  }
}


/* ==========================================================================
   Navigation: Platz fuer den sechsten Punkt "Catering"
   In der einreihigen Leiste (geklebt bzw. auf den Unterseiten) stehen jetzt
   sechs statt fuenf Punkte. Gemessen bei 1000px: "Ueber uns" brach in zwei
   Zeilen um und die Kontaktgruppe lief 29px aus dem Fenster.
   Engere Abstaende und kein Umbruch holen das zurueck; der Aufbau der
   Leiste bleibt unveraendert. Ab 1240px ist wieder Platz genug.
   ========================================================================== */
@media (min-width:1000px) and (max-width:1239px){
  .red-onion-editorial .roh.is-stuck .roh-navs,
  .red-onion-editorial .roh--solid .roh-navs{ gap:14px; }
  .red-onion-editorial .roh.is-stuck .roh-nav,
  .red-onion-editorial .roh--solid .roh-nav{ gap:14px; }
  .red-onion-editorial .roh.is-stuck .roh-nav a,
  .red-onion-editorial .roh--solid .roh-nav a{
    white-space:nowrap;
    font-size:13.5px;
  }
}

/* ========================================================================== 
   Footer: kompakter Abschluss in zwei Zeilen
   ========================================================================== */
.red-onion-editorial .editorial-footer{
  padding-block:30px 20px;
}
.red-onion-editorial .editorial-footer-inner{
  grid-template-columns:minmax(0, 1fr) auto minmax(0, 1fr);
  align-items:center;
  column-gap:clamp(24px, 3vw, 46px);
  row-gap:0;
  padding-block:0;
}
.red-onion-editorial .editorial-footer-inner > *{
  align-self:center;
}
.red-onion-editorial .editorial-footer-brand{
  grid-column:auto;
  justify-self:start;
  margin:0;
}
.red-onion-editorial .fuss-ort{
  justify-self:center;
  margin:0;
  text-align:center;
}
.red-onion-editorial .fuss-draht{
  min-width:0;
  justify-self:end;
  text-align:right;
}
.red-onion-editorial .editorial-footer-col p{
  margin:0;
}
.red-onion-editorial .fuss-draht p{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  flex-wrap:nowrap;
  white-space:nowrap;
}
.red-onion-editorial .editorial-footer-separator{
  margin-inline:.45em;
}
.red-onion-editorial .editorial-footer-meta{
  display:block;
  margin-top:18px;
  padding-block:13px 0;
}

@media (max-width:900px){
  .red-onion-editorial .editorial-footer-inner{
    grid-template-columns:auto minmax(0, 1fr);
    row-gap:12px;
  }
  .red-onion-editorial .fuss-ort{
    justify-self:end;
    text-align:right;
  }
  .red-onion-editorial .fuss-draht{
    grid-column:1 / -1;
    justify-self:start;
    text-align:left;
  }
  .red-onion-editorial .fuss-draht p{
    justify-content:flex-start;
    flex-wrap:wrap;
  }
  .red-onion-editorial .editorial-footer-meta{
    margin-top:16px;
  }
}

@media (max-width:760px){
  .red-onion-editorial .editorial-footer{
    padding-block:22px 16px;
  }
  .red-onion-editorial .editorial-footer-inner{
    grid-template-columns:minmax(0, 1fr);
    row-gap:0;
  }
  .red-onion-editorial .editorial-footer-brand{
    margin-bottom:8px;
  }
  .red-onion-editorial .fuss-ort{
    justify-self:start;
    margin-bottom:7px;
    text-align:left;
  }
  .red-onion-editorial .fuss-draht{
    grid-column:auto;
    width:100%;
  }
  .red-onion-editorial .fuss-draht p{
    align-items:flex-start;
    flex-direction:column;
    gap:6px;
    white-space:normal;
  }
  .red-onion-editorial .fuss-draht a{
    display:block;
    max-width:100%;
    overflow-wrap:anywhere;
  }
  .red-onion-editorial .editorial-footer-separator{
    display:none;
  }
  .red-onion-editorial .editorial-footer-meta{
    margin-top:14px;
    padding-top:13px;
  }
}

/* ==========================================================================
   Startseite Catering: kompakte, zeitbasierte Mobile-Buehne
   ========================================================================== */
@media (max-width:768px){
  .red-onion-editorial .roc-catering-sektion .roc-buehne{
    height:auto;
  }
  .red-onion-editorial .roc-catering-sektion .roc-stage{
    height:auto;
    grid-template-rows:clamp(260px, 32vh, 320px) auto;
    grid-template-rows:clamp(260px, 32svh, 320px) auto;
  }
  .red-onion-editorial .roc-catering-sektion .roc-text{
    padding-bottom:48px;
  }
  .red-onion-editorial .roc-catering-sektion .roc-text::before{
    bottom:40px;
  }
  .red-onion-editorial .roc-catering-sektion.roc-motion-ready .roc-buehne.ist-aktiv .roc-vorhang::before{
    animation:rocSchwarzAus .6s cubic-bezier(.42,0,.58,1) .9s forwards;
  }
  .red-onion-editorial .roc-catering-sektion.roc-motion-ready .roc-buehne.ist-aktiv .roc-vorhang-signal small{
    animation:
      rocSignalKickerEin .32s cubic-bezier(.28,0,.12,1) both,
      rocSignalKickerAus .5s cubic-bezier(.42,0,.58,1) .78s forwards;
  }
  .red-onion-editorial .roc-catering-sektion.roc-motion-ready .roc-buehne.ist-aktiv .roc-vorhang-signal strong{
    animation:
      rocSignalHeadlineEin .38s cubic-bezier(.28,0,.12,1) .06s both,
      rocSignalHeadlineAus .72s cubic-bezier(.42,0,.58,1) .92s forwards,
      rocSignalHeadlineGlow .72s ease-in-out .92s forwards;
  }
  .red-onion-editorial .roc-catering-sektion.roc-motion-ready .roc-buehne.ist-aktiv .roc-stage{
    animation:rocCateringEin .72s cubic-bezier(.2,.72,.16,1) .92s both;
  }
}

/* ==========================================================================
   Phase 2: Mobile Proportionen und individuelle Speisekarten-Symbole
   ========================================================================== */
.red-onion-editorial .mkat-symbol{
  flex:none;
  align-self:center;
  display:block;
  width:28px;
  height:28px;
  object-fit:contain;
  filter:brightness(0) saturate(100%) invert(22%) sepia(91%) saturate(2574%) hue-rotate(353deg) brightness(75%) contrast(85%);
}
.red-onion-editorial .mpanel-head > .mkat-symbol:first-child{
  flex:0 0 28px;
  min-width:28px;
}
@media (max-width:999px){
  .red-onion-editorial .ro-sl-status{
    top:60px;
  }
  .red-onion-editorial .ro-sl{
    padding-block:clamp(14px, 3.2vw, 20px);
  }
}

/* ===========================================================================
   Phase 2 Nachkorrektur: Mobile Abstaende und gemeinsame Bildkanten
   ========================================================================== */
@media (max-width:999px){
  .red-onion-editorial .ro-hero-media{
    --band:100px;
  }
  .red-onion-editorial .ro-sl{
    padding-block:8px;
  }
  .red-onion-editorial .editorial-about-card{
    width:min(var(--container), calc(100% - 32px));
  }
  .red-onion-editorial .editorial-about-image{
    aspect-ratio:1.34 / 1;
  }
  .red-onion-editorial .editorial-about-copy h2 + p{
    margin-top:18px;
    line-height:1.5;
  }
  .red-onion-editorial .editorial-about-copy p + p{
    margin-top:14px;
    line-height:1.5;
  }
}

@media (max-width:900px){
  .red-onion-editorial .roc-catering-sektion{
    padding-inline:16px;
  }
  .red-onion-editorial .roc-catering-sektion .roc-bild{
    margin-inline:0;
  }
  .red-onion-editorial .roc-catering-sektion .roc-text{
    padding-left:23px;
    padding-right:0;
  }
  .red-onion-editorial .roc-catering-sektion .roc-text::before{
    left:0;
  }
}

@media (max-width:430px){
  .red-onion-editorial .ro-sl-punkt{
    gap:6px;
  }
}

@media (min-width:375px) and (max-width:383px){
  .red-onion-editorial .ro-sl-status{
    padding-inline:10px;
    gap:0 10px;
  }
  .red-onion-editorial .ro-sl-wort{
    letter-spacing:.05em;
  }
  .red-onion-editorial .ro-sl-naechste{
    padding-left:11px;
  }
}

@media (max-width:343px){
  .red-onion-editorial .ro-hero-media{
    --band:120px;
  }
}

/* ===========================================================================
   Mobile Feinkorrektur und Catering-Reveal nach Variante A
   ========================================================================== */
@media (max-width:999px){
  .red-onion-editorial .editorial-about{
    padding-top:36px;
    padding-bottom:18px;
  }
  .red-onion-editorial .editorial-about-card{
    padding-top:14px;
    padding-bottom:14px;
  }
  .red-onion-editorial .editorial-about-card .ro-ornament{
    margin-top:8px;
  }
  .red-onion-editorial .editorial-about-copy h2{
    margin-top:13px;
  }
  .red-onion-editorial picture.editorial-about-image{
    margin-top:20px;
  }
}

@media (max-width:768px){
  .red-onion-editorial .roc-catering-sektion .roc-text{
    padding-top:16px;
  }

  /* Das bestehende Bild und der bestehende Text bleiben im Fluss. */
  .red-onion-editorial .roc-catering-sektion.roc-motion-ready .roc-buehne:not(.ist-aktiv):not(.ist-fertig) .roc-stage,
  .red-onion-editorial .roc-catering-sektion.roc-motion-ready .roc-buehne.ist-aktiv .roc-stage{
    opacity:1;
    transform:none;
    animation:none;
  }

  /* Der vorhandene Vorhang liegt mobil nur auf dem vorhandenen Buffetbild. */
  .red-onion-editorial .roc-catering-sektion.roc-motion-ready .roc-vorhang{
    inset:12px 0 auto;
    height:calc(clamp(260px, 32vh, 320px) - 12px);
    height:calc(clamp(260px, 32svh, 320px) - 12px);
    overflow:hidden;
    border-radius:4px;
  }
  .red-onion-editorial .roc-catering-sektion.roc-motion-ready .roc-vorhang::before{
    background:linear-gradient(180deg, rgba(11,10,9,.42) 0%, rgba(11,10,9,.63) 46%, rgba(11,10,9,.70) 100%);
    opacity:1;
  }
  .red-onion-editorial .roc-catering-sektion.roc-motion-ready .roc-vorhang-signal{
    opacity:1;
    filter:none;
  }
  .red-onion-editorial .roc-catering-sektion.roc-motion-ready .roc-vorhang-signal small,
  .red-onion-editorial .roc-catering-sektion.roc-motion-ready .roc-vorhang-signal strong{
    opacity:1;
    transform:none;
    filter:none;
    animation:none;
  }

  .red-onion-editorial .roc-catering-sektion.roc-motion-ready .roc-buehne:not(.ist-fertig) .roc-bild img{
    transform:scale(1.06);
    transform-origin:50% 50%;
    will-change:transform;
  }
  .red-onion-editorial .roc-catering-sektion.roc-motion-ready .roc-buehne:not(.ist-fertig) .roc-bild figcaption{
    opacity:0;
    transform:translateY(10px);
  }
  .red-onion-editorial .roc-catering-sektion.roc-motion-ready .roc-buehne:not(.ist-fertig) .roc-text{
    opacity:.001;
    transform:translateY(18px);
  }

  .red-onion-editorial .roc-catering-sektion.roc-motion-ready .roc-buehne.ist-aktiv:not(.ist-fertig) .roc-vorhang-signal{
    animation:rocMobileIntroAus 1s cubic-bezier(.16,1,.3,1) 1.5s both;
  }
  .red-onion-editorial .roc-catering-sektion.roc-motion-ready .roc-buehne.ist-aktiv:not(.ist-fertig) .roc-vorhang-signal small,
  .red-onion-editorial .roc-catering-sektion.roc-motion-ready .roc-buehne.ist-aktiv:not(.ist-fertig) .roc-vorhang-signal strong{
    opacity:1;
    transform:none;
    filter:none;
    animation:none;
  }
  .red-onion-editorial .roc-catering-sektion.roc-motion-ready .roc-buehne.ist-aktiv:not(.ist-fertig) .roc-vorhang::before{
    animation:rocMobileSchleierAuf 1.2s cubic-bezier(.16,1,.3,1) 1.8s both;
  }
  .red-onion-editorial .roc-catering-sektion.roc-motion-ready .roc-buehne.ist-aktiv:not(.ist-fertig) .roc-bild img{
    animation:rocMobileBildBeruhigt 2.1s cubic-bezier(.16,1,.3,1) 1.5s both;
  }
  .red-onion-editorial .roc-catering-sektion.roc-motion-ready .roc-buehne.ist-aktiv:not(.ist-fertig) .roc-bild figcaption{
    animation:
      rocMobileLabelDeckkraft .7s ease 2.5s both,
      rocMobileLabelBewegung .7s cubic-bezier(.16,1,.3,1) 2.5s both;
  }
  .red-onion-editorial .roc-catering-sektion.roc-motion-ready .roc-buehne.ist-aktiv:not(.ist-fertig) .roc-text{
    animation:
      rocMobileTextDeckkraft .8s ease 2.8s both,
      rocMobileTextBewegung .8s cubic-bezier(.16,1,.3,1) 2.8s both;
  }
  .red-onion-editorial .roc-catering-sektion.roc-motion-ready .roc-buehne.ist-fertig .roc-vorhang::before,
  .red-onion-editorial .roc-catering-sektion.roc-motion-ready .roc-buehne.ist-fertig .roc-vorhang-signal small,
  .red-onion-editorial .roc-catering-sektion.roc-motion-ready .roc-buehne.ist-fertig .roc-vorhang-signal strong{
    animation:none;
  }
}

@media (min-width:561px) and (max-width:768px){
  .red-onion-editorial .roc-catering-sektion.roc-motion-ready .roc-vorhang{
    inset:18px 0 auto;
    height:calc(clamp(260px, 32vh, 320px) - 18px);
    height:calc(clamp(260px, 32svh, 320px) - 18px);
  }
}

@media (max-width:768px){
  @keyframes rocMobileIntroAus{
    0%{ opacity:1; filter:blur(0); transform:translate(-50%, -50%) scale(1); }
    100%{ opacity:0; filter:blur(8px); transform:translate(-50%, calc(-50% - 6px)) scale(1.035); }
  }
  @keyframes rocMobileSchleierAuf{
    0%{ opacity:1; }
    100%{ opacity:.1; }
  }
  @keyframes rocMobileBildBeruhigt{
    0%{ transform:scale(1.06); }
    100%{ transform:scale(1); }
  }
  @keyframes rocMobileLabelDeckkraft{
    0%{ opacity:0; }
    100%{ opacity:1; }
  }
  @keyframes rocMobileLabelBewegung{
    0%{ transform:translateY(10px); }
    100%{ transform:translateY(0); }
  }
  @keyframes rocMobileTextDeckkraft{
    0%{ opacity:.001; }
    100%{ opacity:1; }
  }
  @keyframes rocMobileTextBewegung{
    0%{ transform:translateY(18px); }
    100%{ transform:translateY(0); }
  }
}

/* ===========================================================================
   Animations-Feinschliff: mobile Catering-Texte und Gerichte-Reihen
   ========================================================================== */
@media (max-width:768px){
  .red-onion-editorial .roc-catering-sektion.roc-motion-ready .roc-buehne:not(.ist-fertig) .roc-text{
    opacity:0;
    transform:translateY(8px);
  }
  .red-onion-editorial .roc-catering-sektion.roc-motion-ready .roc-buehne.ist-aktiv:not(.ist-fertig) .roc-text{
    animation:rocMobileTextWeichEin 1.5s cubic-bezier(.4,0,.2,1) 2s both;
  }

  @keyframes rocMobileTextWeichEin{
    0%{ opacity:0; transform:translateY(8px); }
    100%{ opacity:1; transform:translateY(0); }
  }
}

@media (max-width:900px){
  .red-onion-editorial .roc-gerichte.roc-gerichte-mobil-bereit .roc-gerichte-liste > li > figure{
    opacity:0;
    transform:translateY(22px) scale(.93);
    transform-origin:center bottom;
  }
  .red-onion-editorial .roc-gerichte.roc-gerichte-mobil-bereit .roc-gerichte-liste > li.roc-gericht-spielt > figure{
    animation:rocGerichtMobilEin 1.1s cubic-bezier(.22,1,.36,1) .3s both;
  }
  .red-onion-editorial .roc-gerichte.roc-gerichte-mobil-bereit .roc-gerichte-liste > li.roc-gericht-spielt:nth-child(even) > figure{
    animation-delay:.48s;
  }

  @keyframes rocGerichtMobilEin{
    0%{ opacity:0; transform:translateY(22px) scale(.93); }
    100%{ opacity:1; transform:translateY(0) scale(1); }
  }
}

@media (max-width:900px) and (prefers-reduced-motion:reduce){
  .red-onion-editorial .roc-gerichte.roc-gerichte-mobil-bereit .roc-gerichte-liste > li > figure{
    opacity:1;
    transform:none;
    animation:none !important;
  }
}

/* ===========================================================================
   Mobile Catering: ruhiger Textwechsel im Bild und zum Teaser
   ========================================================================== */
@media (max-width:768px){
  .red-onion-editorial .roc-catering-sektion.roc-motion-ready .roc-buehne:not(.ist-fertig) .roc-text{
    opacity:0;
    transform:translateY(16px);
  }

  .red-onion-editorial .roc-catering-sektion.roc-motion-ready .roc-buehne.ist-aktiv:not(.ist-fertig) .roc-vorhang-signal{
    animation:rocMobileIntroFliessendAus 1.7s cubic-bezier(.45,0,.55,1) 1.5s both;
  }

  .red-onion-editorial .roc-catering-sektion.roc-motion-ready .roc-buehne.ist-aktiv:not(.ist-fertig) .roc-text{
    animation:rocMobileTextFliessendEin 1.8s cubic-bezier(.45,0,.55,1) .65s both;
  }

  @keyframes rocMobileIntroFliessendAus{
    0%{ opacity:1; filter:blur(0); transform:translate(-50%, -50%); }
    100%{ opacity:0; filter:blur(3px); transform:translate(-50%, calc(-50% - 4px)); }
  }

  @keyframes rocMobileTextFliessendEin{
    0%{ opacity:0; transform:translateY(16px); }
    100%{ opacity:1; transform:translateY(0); }
  }
}

/* ===========================================================================
   Mobile Catering: kompakter Ablauf innerhalb des Buffetbildes
   ========================================================================== */
@media (max-width:768px){
  .red-onion-editorial .roc-catering-sektion.roc-motion-ready .roc-buehne.ist-aktiv:not(.ist-fertig) .roc-vorhang-signal{
    animation:rocMobileIntroFliessendAus .95s cubic-bezier(.45,0,.55,1) .65s both;
  }

  .red-onion-editorial .roc-catering-sektion.roc-motion-ready .roc-buehne.ist-aktiv:not(.ist-fertig) .roc-vorhang::before{
    animation:rocMobileSchleierKompaktAuf .85s cubic-bezier(.45,0,.55,1) .65s both;
  }

  .red-onion-editorial .roc-catering-sektion.roc-motion-ready .roc-buehne.ist-aktiv:not(.ist-fertig) .roc-bild img{
    animation:rocMobileBildBeruhigt 1.1s cubic-bezier(.45,0,.55,1) .65s both;
  }

  .red-onion-editorial .roc-catering-sektion.roc-motion-ready .roc-buehne.ist-aktiv:not(.ist-fertig) .roc-bild figcaption{
    animation:
      rocMobileLabelDeckkraft .55s cubic-bezier(.45,0,.55,1) 1.25s both,
      rocMobileLabelBewegung .55s cubic-bezier(.45,0,.55,1) 1.25s both;
  }

  @keyframes rocMobileSchleierKompaktAuf{
    0%{ opacity:1; }
    100%{ opacity:0; }
  }
}

/* ===========================================================================
   Mobile Catering: eigener Sichtbarkeitstrigger fuer den Teasertext
   und kompakter Einstieg der Catering-Unterseite
   ========================================================================== */
@media (max-width:768px){
  .red-onion-editorial .roc-catering-sektion.roc-motion-ready .roc-buehne:not(.roc-text-sichtbar) .roc-stage .roc-text{
    opacity:0;
    transform:translateY(16px);
    animation:none;
  }

  .red-onion-editorial .roc-catering-sektion.roc-motion-ready .roc-buehne.roc-text-sichtbar .roc-stage .roc-text{
    animation:rocMobileTextFliessendEin 1.1s cubic-bezier(.45,0,.55,1) both;
  }

  .red-onion-editorial .roc-seite{
    padding-top:32px;
  }
}

@media (max-width:768px) and (prefers-reduced-motion:reduce){
  .red-onion-editorial .roc-catering-sektion .roc-text{
    opacity:1 !important;
    transform:none !important;
    animation:none !important;
  }
}

/* ===========================================================================
   Finaler Mobile-Feinschliff: Catering-Unterseite
   ========================================================================== */
@media (max-width:560px){
  .red-onion-editorial .roc-seite .roc-abschluss .roc-abschluss-wege{
    align-items:center;
    gap:0;
  }

  .red-onion-editorial .roc-seite .roc-abschluss .roc-tel{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:44px;
    margin-top:4px;
    padding:0 12px;
    border-bottom:0;
    text-decoration:none;
    font:600 13px/1.2 "Archivo", sans-serif;
  }
}

@media (max-width:900px){
  .red-onion-editorial .roc-gerichte.roc-gerichte-mobil-bereit .roc-gerichte-liste > li.roc-gericht-spielt > figure{
    animation-duration:1.6s;
    animation-delay:.4s;
  }

  .red-onion-editorial .roc-gerichte.roc-gerichte-mobil-bereit .roc-gerichte-liste > li.roc-gericht-spielt:nth-child(even) > figure{
    animation-delay:.64s;
  }
}

/* ===========================================================================
   TECHNISCHE SEO — responsive Cateringbilder, Geometrie unveraendert
   =========================================================================== */
.red-onion-editorial .roc-bild > picture,
.red-onion-editorial .roc-angebot-bild > picture{
  display:block;
  width:100%;
  height:100%;
}
.red-onion-editorial .roc-gerichte-liste figure > picture{
  display:block;
}

/* ===========================================================================
   Speisekarte: individuelle Kategoriesymbole gut sichtbar skalieren
   ========================================================================== */
.red-onion-editorial .mpanel-head{
  align-items:flex-start;
  gap:13px;
}
.red-onion-editorial .mkat-symbol{
  align-self:flex-start;
  width:52px;
  height:52px;
  object-fit:contain;
}
.red-onion-editorial .mpanel-head > .mkat-symbol:first-child{
  flex-basis:52px;
  min-width:52px;
}
.red-onion-editorial .mpanel-head > .mkat{
  padding-top:10px;
}

@media (max-width:999px){
  .red-onion-editorial .mpanel-head{
    gap:10px;
  }
  .red-onion-editorial .mkat-symbol{
    width:44px;
    height:44px;
  }
  .red-onion-editorial .mpanel-head > .mkat-symbol:first-child{
    flex-basis:44px;
    min-width:44px;
  }
}

/* Der heutige Wochentag folgt demselben Berliner Live-Status wie die
   Schnellinfo; alle nicht heutigen Zeilen bleiben neutral. */
.red-onion-editorial .ro-zeit-zeile.ist-heute.ist-offen{
  background:rgba(78, 155, 88, .12);
  border-left-color:var(--green);
}
.red-onion-editorial .ro-zeit-zeile.ist-heute.ist-zu{
  background:rgba(232, 68, 43, .12);
  border-left-color:var(--red);
}

/* Desktop: Bewertungsbitte wieder als kompakte Gruppe auf der Mittelachse. */
@media (min-width:1000px){
  .red-onion-editorial .rev-cta-wrap .editorial-review-cta{
    justify-content:center;
  }
  .red-onion-editorial .rev-cta-wrap .rev-cta-text{
    flex:0 1 auto;
    text-align:center;
  }
}

/* Desktop-Hero: freigegebene Reihenfolge und Position am Ausgabetresen. */
@media (min-width:1000px){
  .red-onion-editorial .ro-hero{
    align-items:center;
  }
  .red-onion-editorial .ro-hero-content{
    display:flex;
    flex-direction:column;
    align-items:center;
    transform:translate(
      clamp(-24px,-1.3vw,-13px),
      clamp(16px,calc(16px + 10vw - 18vh),44px)
    );
  }
  .red-onion-editorial .ro-hero-title{
    order:1;
    font-size:clamp(38px,3.6vw,58px);
  }
  .red-onion-editorial .ro-hero-copy{
    order:2;
    margin-top:18px;
    font-size:clamp(17px,1.2vw,22px);
  }
  .red-onion-editorial .editorial-hero-actions{
    order:3;
    margin:19px 0 0;
  }
}

/* Kontakt: nach Entfernen des Einleitungssatzes kompakt und ausgewogen. */
.red-onion-editorial .ro-draht-titel{ margin-bottom:0; }
@media (min-width:761px){
  .red-onion-editorial .ro-draht-text{ align-self:center; }
}
@media (max-width:760px){
  .red-onion-editorial .ro-draht-inner{ row-gap:28px; }
}

/* Nur im mitlaufenden Desktop-Kopf vier Schnellziele zeigen. */
@media (min-width:1000px){
  .red-onion-editorial .roh.is-stuck:not(.roh--solid) .roh-nav a[href="#kontakt"]{ display:none; }
}

/* Abschlussrunde: nur Kontrastbehandlung, Hinweisposition und Kartenquelle. */
@media (min-width:1000px){
  .red-onion-editorial .ro-hero-overlay{
    background:linear-gradient(to bottom,
      rgba(10,10,9,.34) 0%,
      rgba(10,10,9,.20) 18%,
      rgba(10,10,9,.22) 28%,
      rgba(10,10,9,.38) 40%,
      rgba(10,10,9,.54) 54%,
      rgba(10,10,9,.63) 68%,
      rgba(10,10,9,.71) 84%,
      rgba(10,10,9,.78) 100%);
  }
}

.red-onion-editorial a.ro-kartenquelle{
  display:inline-block;
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-decoration-color:rgba(27,25,22,.38);
  text-underline-offset:2px;
}
.red-onion-editorial a.ro-kartenquelle:hover{
  color:rgba(27,25,22,.92);
  text-decoration-color:currentColor;
}
.red-onion-editorial a.ro-kartenquelle:focus-visible{
  outline:2px solid var(--red-dark);
  outline-offset:2px;
}


/* ==========================================================================
   LINKFIX-RUNDE - KONTAKT IM HELLEN KOPF
   Auf den Unterseiten (Catering, Impressum, Datenschutz) traegt der Kopf
   dauerhaft .roh--solid und zeigt fuenf Navigationspunkte. Zwischen rund
   1280px und 1400px schiebt sich der fuenfte Punkt "Kontakt" dabei unter die
   Telefon-Pille: gemessen 57px Ueberdeckung bei 1280px, 28px bei 1360px.
   Folge: bei 1280px und 1300px trifft KEINE Stelle des Links mehr den Link
   selbst - jeder Klick auf "Kontakt" loeste stattdessen den Anruf aus.
   Dieselbe Platznot ist der Grund, aus dem der mitlaufende Kopf schon vier
   statt fuenf Punkte zeigt (Regel weiter oben). Diese Regel zieht die gleiche
   Entscheidung auf den hellen Kopf. Kontakt bleibt ueber die Fusszeile und
   unter 1000px ueber das Menue erreichbar.
   ========================================================================== */
@media (min-width:1000px){
  .red-onion-editorial .roh.roh--solid .roh-nav a[href$="#kontakt"]{ display:none; }
}


/* ==========================================================================
   CATERING-UNTERSEITE, DESKTOP: BUFFETBILDER WEITER NACH OBEN
   Gemessen vorher (1440x900): 108px zwischen Leiste und Einleitung, dazu
   30px vor der Faktenzeile und 36px davor bis zu den Bildern. Das erste
   Buffetbild begann bei y=517. Die Bilder selbst bleiben unveraendert -
   nur die Luft davor wird gestrafft. Ab 769px, damit die bereits passende
   mobile Einleitung (eigene Regel bei max-width:768px) unberuehrt bleibt.
   ========================================================================== */
@media (min-width:769px){
  .red-onion-editorial .roc-seite{
    padding-top:clamp(40px, 4.4vh, 54px);
  }
  /* Die Kopfspalte war auf 720px gedeckelt - daran brach die Schlagzeile auf
     drei Zeilen um, nicht an der Schriftgroesse. Volle Containerbreite plus
     etwas kleinere Schrift ergibt eine Zeile ohne nowrap und ohne Winzschrift. */
  .red-onion-editorial .roc-seite-kopf{
    max-width:none;
    margin-bottom:clamp(24px, 3vh, 34px);
  }
  .red-onion-editorial .roc-seite-kopf h1{
    max-width:none;
    margin-top:15px;
    margin-bottom:16px;
    font-size:clamp(30px, 3.1vw, 44px);
  }
  /* Im Markup steht ein harter Umbruch zwischen den beiden Saetzen. Der wird
     hier nur fuer den Desktop stillgelegt - der Wortlaut bleibt unveraendert,
     und der mobile Umbruch bleibt genau wie er ist. */
  .red-onion-editorial .roc-seite-kopf h1 br{
    display:none;
  }
  .red-onion-editorial .roc-seite-lead{
    max-width:none;
    font-size:16px;
    line-height:1.62;
  }
  .red-onion-editorial .roc-fakten{
    margin-bottom:clamp(26px, 3.4vh, 38px);
  }
}


/* ==========================================================================
   RUNDE 58 - MOBILER HERO: REIHENFOLGE UND LAGE
   Im Markup steht der Knopf vor der Schlagzeile (der Desktop dreht das seit
   jeher ueber order). Mobil fehlte diese Drehung, deshalb stand "Zur
   Speisekarte" ueber der Headline. Gleiches Verfahren wie im Desktop-Block
   bei min-width:1000px: Flexspalte plus order, kein Markup-Umbau.
   Bildausschnitt, Abdunklung, Hero-Hoehe und Schriftgestaltung bleiben.
   ========================================================================== */
@media (max-width:999px){
  .red-onion-editorial .ro-hero-content{
    display:flex;
    flex-direction:column;
    align-items:center;
    /* Der Block sass sehr tief (432px Luft oben, 141px unten). Weiter nach
       oben geht nicht: der Spiess wird nach oben heller, gemessen faellt die
       Unterzeile bei -40px auf 4.12:1 und die Schlagzeile bei -32px auf
       3.02:1. Bei -24px (die bisherigen -8px plus 16px) bleiben 3.11:1 und
       4.86:1 - beide ueber der Schwelle. Die Abdunklung bleibt unangetastet. */
    transform:translateY(-24px);
  }
  .red-onion-editorial .ro-hero-title{ order:1; }
  .red-onion-editorial .ro-hero-copy{ order:2; margin-top:14px; }
  .red-onion-editorial .editorial-hero-actions{ order:3; margin-top:26px; }
}