/* ==========================================================================
   Tandour — Rollo-Regal in der Speisekarte (22.09.2026)
   Alle zwölf Rollos stehen wie auf der Theke nebeneinander, darunter ihr Name
   in der Sortenschrift der Tafel. Rechner: eine Reihe, Handy: drei Reihen zu vier.
   Antippen öffnet das Rollo-Blatt (<dialog>) mit großem Bild, Text und Preis.
   Schriften und Farben kommen aus sorten.css ([data-sorte] setzt die Variablen).
   ========================================================================== */

/* 1 ── Sortenname, überall gleich gebaut ---------------------------------- */
.sorten-name[data-sorte] {
  font-family: var(--sorte-schrift);
  font-weight: var(--sorte-gewicht, 400);
  font-style: var(--sorte-stil, normal);
  font-size: calc(var(--sorte-karte, 1.45rem) * var(--name-faktor, 1));
  line-height: 1.02;
  letter-spacing: var(--sorte-abstand, 0);
  text-transform: var(--sorte-fall, none);
  color: var(--sorte-farbe);
}
.sorten-name[data-sorte="kikiriki"] {
  --k: var(--sorte-kontur);
  color: #F1BD80;
  text-shadow:
    .9px 0 0 var(--k), -.9px 0 0 var(--k), 0 .9px 0 var(--k), 0 -.9px 0 var(--k),
    .65px .65px 0 var(--k), -.65px .65px 0 var(--k), .65px -.65px 0 var(--k), -.65px -.65px 0 var(--k),
    1.6px 1.6px 0 color-mix(in srgb, var(--k) 40%, transparent);
}
.sorten-name[data-sorte="dulkebab"] { text-shadow: 1px 1px 0 color-mix(in srgb, var(--sorte-schatten) 55%, transparent); }
.sorten-name[data-sorte="arabic"] .wortmarke { display: inline-block; height: 1.02em; vertical-align: -.06em; }

/* Die zwei Tierzeichen vom Schild (25.09.2026). Sonst ändert sich an den Namen nichts:
   Der Hahn sitzt oben auf den letzten Buchstaben von „Kikiriki", das Lamm steht vor
   „Dul Kebab" — genau wie auf dem Schild am Laden. Die Hülle .sorten-wort umschließt nur
   das Wort; nur daran sitzt der Hahn über dem letzten Buchstaben statt am Spaltenrand. */
.sorten-wort { position: relative; display: inline-block; white-space: nowrap; }
/* Der Kikiriki-Zug ist jetzt eng um die Buchstaben geschnitten (der Hahn steckte vorher mit
   in der viewBox) — deshalb hier eine eigene Höhe, sonst steht das Wort größer als die Nachbarn. */
/* Der Hahn ragt über die Zeile — im Rollo-Blatt braucht die Überschrift dafür Luft nach oben. */
.rollo-blatt__name[data-sorte="kikiriki"] { margin-top: .75em; }

/* Dieselben zwei Zeichen im Hero: am großen Wort hinter dem Rollo und am Sortennamen.
   Kleiner als im Regal, sonst ragt der Hahn aus der Bühne. */
/* Füße genau auf der Versalhöhe des letzten „K" — gemessen, nicht geschätzt */
.hero__wort .sorten-zeichen--hahn { height: .34em; bottom: calc(100% - .16em); right: .12em; }
.hero__sorte b.hat-zeichen { white-space: nowrap; position: relative; display: inline-block; }
.hero__sorte b .sorten-zeichen--hahn { position: absolute; right: 0; bottom: .78em; height: .5em; margin: 0; }
.hero__wort .sorten-zeichen--lamm { height: .4em; margin-right: .12em; vertical-align: -.01em; }
.hero__sorte b .sorten-zeichen--lamm { height: .82em; margin-right: .14em; vertical-align: -.04em; }
.hero__sorte b[data-sorte="dulkebab"] { display: inline-flex; align-items: center; gap: .04em; }

/* Handy: der Name stand doppelt da — einmal klein über dem Rollo, einmal groß dahinter.
   Weg kommt die kleine Zeile; das große Wort bleibt. Für Screenreader bleibt die Überschrift
   erhalten, sie wird nur unsichtbar gestellt. */
@media (max-width: 760px) {
  .hero__sorte {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0; border: 0;
    clip-path: inset(50%);
    overflow: hidden; white-space: nowrap;
  }
  /* „Zur Karte", Punkte und Pfeil hängen an dieser Marke — ohne die Namenszeile rücken sie hoch */
  .hero { --pille-oben-m: calc(var(--text-oben-m) + 1.55rem + .8rem); }
  /* „DUL KEBAB" ist mit dem Lamm davor das breiteste Wort und lief sonst über den Rand */
  .hero__wort[data-sorte="dulkebab"] { font-size: clamp(2.1rem, 12.4vw, 4.4rem); }
}
/* „Dul Kebab" darf weiter umbrechen — mit Lamm passt es sonst in keine Spalte. */
.sorten-zeichen { display: inline-block; width: auto; }
/* Lamm links neben dem (zweizeiligen) Namen, mittig — wie auf dem Schild */
.rollo-regal__name .sorten-name[data-sorte="dulkebab"],
.sorten-name[data-sorte="dulkebab"] { display: flex; align-items: center; justify-content: center; gap: .16em; }
.sorten-zeichen--lamm { height: .95em; flex: none; }
.sorten-zeichen--hahn {
  position: absolute;
  right: 0;                 /* kein Überstand: sonst misst das Einpassen in regal.js zu breit */
  bottom: .9em;              /* Versalhöhe von Anton (≈ .73 em) plus Unterlänge des Zeilenkastens */
  height: .8em;
  pointer-events: none;
}

/* 2 ── Block „Rollo" über den übrigen Gruppen ------------------------------ */
.rollo-regal { margin-bottom: clamp(2.6rem, 5vw, 4rem); }
.rollo-regal__kopf {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .4rem 1.4rem;
  padding-bottom: .9rem;
  border-bottom: 2px solid rgba(16, 14, 12, .12);
}
.rollo-regal__kopf h3 {
  font-family: var(--schrift-display);
  font-weight: 400;
  text-transform: uppercase;
  font-size: 1.5rem;
  letter-spacing: .03em;
}
.rollo-regal__preis { font-size: .95rem; color: #55483C; }
.rollo-regal__preis b { font-family: var(--schrift-display); font-weight: 400; font-size: 1.15rem; letter-spacing: .02em; color: var(--nacht); }

.rollo-regal__reihe {
  list-style: none;
  margin: 0;
  padding: clamp(1.6rem, 3vw, 2.4rem) 0 0;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 1rem clamp(.3rem, .8vw, .8rem);
  align-items: end;
}
.rollo-regal__reihe > li { min-width: 0; }

.rollo-regal__sorte {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto;
  justify-items: center;
  gap: .75rem;
  padding: .4rem 0 .6rem;
  border: 0;
  border-radius: 12px;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
  position: relative;
  -webkit-tap-highlight-color: transparent;
}
.rollo-regal__stand { position: relative; display: block; width: 100%; max-width: 96px; }
/* Schatten auf der Theke — liegt unter dem Bild */
.rollo-regal__stand::before {
  content: "";
  position: absolute;
  left: 20%;
  right: 20%;
  bottom: -3px;
  height: 9px;
  border-radius: 50%;
  background: rgba(60, 30, 20, .26);
  filter: blur(3px);
  transition: transform 320ms var(--ease-weich), opacity 320ms var(--ease-weich);
}
.rollo-regal__stand img {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  /* KEIN drop-shadow: Safari legt den weichen Schatten bei bewegten Bildern (Anheben) als Rechteck um das
     ganze Bild statt um die Rollo-Form — der kleine Schatten unter dem Rollo steckt in .rollo-regal__stand::before. */
  transition: transform 320ms var(--ease-weich);
}
.rollo-regal__name {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  width: 100%;
  min-width: 0;
  min-height: 2.75rem;
  text-align: center;
  --name-faktor: .82;
  overflow-wrap: normal;
  hyphens: none;
}
.rollo-regal__name .sorten-name { display: block; min-width: 0; max-width: 100%; }

@media (hover: hover) {
  .rollo-regal__sorte:hover img { transform: translateY(-9px); }
  .rollo-regal__sorte:hover .rollo-regal__stand::before { transform: scaleX(.8); opacity: .7; }
}
.rollo-regal__sorte[aria-current="true"] img,
.rollo-regal__sorte[data-schwebt] img { transform: translateY(-9px); }
.rollo-regal__sorte[aria-current="true"] .rollo-regal__stand::before,
.rollo-regal__sorte[data-schwebt] .rollo-regal__stand::before { transform: scaleX(.8); opacity: .7; }
.rollo-regal__sorte:focus-visible { outline: 3px solid var(--marke-rot); outline-offset: 2px; }

.rollo-regal__theke {
  /* Die Theke läuft von Bildschirmkante zu Bildschirmkante, nicht nur über die Inhaltsspalte —
     sonst sieht es aus, als würde der Balken mitten im Bild aufhören. */
  height: 12px;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  border-radius: 0;
  background: linear-gradient(#DCCBB4, #C6B296);
  box-shadow: 0 6px 14px -8px rgba(60, 30, 20, .45);
}

/* 3 ── Infozeile unter dem Regal (nur Rechner) ----------------------------- */
.rollo-regal__info {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr) auto;
  align-items: center;
  gap: .5rem 1.8rem;
  margin-top: 1.4rem;
  padding: 1.05rem 1.4rem;
  border: 1px solid rgba(16, 14, 12, .1);
  border-radius: 14px;
  background: #FBF8F2;
}
.rollo-regal__info .sorten-name { --name-faktor: 1.12; }
.rollo-regal__info-text { color: #6A5B4D; font-size: .98rem; margin: 0; }
.rollo-regal__info .gericht__preis { font-size: 1.25rem; }
.rollo-regal__hinweis { margin-top: .9rem; font-size: .9rem; color: #6B5F54; }
.rollo-regal__hinweis b { color: var(--marke-rot); font-weight: 700; }
.rollo-regal__tipp { display: none; }

/* 4 ── Übrige Gruppen: jetzt zwei statt drei Spalten ----------------------- */
.karte-gruppen.karte-gruppen--zwei { grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); }
@media (min-width: 1100px) {
  .karte-gruppen.karte-gruppen--zwei { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .karte-gruppen--zwei .foto { aspect-ratio: 2 / 1; }
}

/* 5 ── Rollo-Blatt (Dialog) ------------------------------------------------- */
.rollo-blatt {
  border: 0;
  padding: 0;
  background: transparent;
  width: min(760px, calc(100vw - 2rem));
  max-width: none;
  max-height: calc(100dvh - 2rem);
  overflow: auto;
  overscroll-behavior: contain;
  color: var(--nacht);
}
.rollo-blatt::backdrop { background: rgba(8, 7, 6, .62); backdrop-filter: blur(5px); }
/* Animiert wird der Dialog selbst, nicht der Kasten darin: ein verschobener Kasten vergrößert die
   Scrollfläche des Dialogs, und der Fokus auf „Schließen" scrollte dann mit (Blatt schoss hoch und sprang). */
.rollo-blatt[open] { animation: rollo-blatt-auf 320ms var(--ease-weich); }
.rollo-blatt[open]::backdrop { animation: rollo-blatt-grund 240ms ease-out; }
@keyframes rollo-blatt-grund { from { opacity: 0; } to { opacity: 1; } }
@keyframes rollo-blatt-auf {
  from { opacity: 0; transform: translateY(20px) scale(.985); }
  to   { opacity: 1; transform: none; }
}
.rollo-blatt__kasten {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0 clamp(1.4rem, 3vw, 2.4rem);
  padding: clamp(1.4rem, 3vw, 2rem) clamp(1.6rem, 4vw, 2.8rem) clamp(1.4rem, 3vw, 2rem) clamp(1.2rem, 3vw, 2rem);
  border-radius: 20px;
  background: radial-gradient(90% 90% at 20% 40%, #FFFDF8 0%, var(--creme) 70%);
  box-shadow: 0 40px 90px rgba(0, 0, 0, .45);
}
.rollo-blatt__bild {
  display: block;
  height: min(560px, 68dvh);
  width: auto;
  /* auch hier kein drop-shadow: der Dialog fährt mit transform ein (Safari-Rechteck, siehe oben) */
}
.rollo-blatt__zeile {
  font-size: .68rem;
  letter-spacing: .32em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--glut-dunkel);
  margin: 0 0 .7rem;
}
.rollo-blatt__name { --name-faktor: 1.7; margin: 0; }
.rollo-blatt__satz { margin: 1rem 0 1.3rem; color: #55483C; font-size: 1.02rem; max-width: 34ch; }
.rollo-blatt__groessen { display: flex; gap: .7rem; flex-wrap: wrap; }
.rollo-blatt__groessen span {
  display: grid;
  gap: .1rem;
  padding: .6rem .95rem .55rem;
  border: 1.5px solid rgba(16, 14, 12, .16);
  border-radius: 10px;
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 700;
  color: #6A5B4D;
}
.rollo-blatt__groessen b { font-family: var(--schrift-display); font-weight: 400; font-size: 1.35rem; letter-spacing: .02em; color: var(--nacht); text-transform: none; }
.rollo-blatt__extra { margin-top: 1rem; font-size: .86rem; color: #6B5F54; }
.rollo-blatt__zu {
  position: absolute;
  top: .8rem;
  right: .8rem;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 0;
  background: rgba(16, 14, 12, .07);
  color: var(--nacht);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background-color 200ms;
}
.rollo-blatt__zu:hover { background: rgba(16, 14, 12, .14); }
.rollo-blatt__zu:focus-visible { outline: 3px solid var(--marke-rot); outline-offset: 2px; }

/* 6 ── Tablet und Handy ----------------------------------------------------- */
@media (max-width: 1100px) {
  /* Mehrere Reihen: jede Reihe bekommt denselben Thekenbalken wie am Rechner — Rollos, darunter die Namen,
     darunter der Balken. Jedes Rollo malt sein Stück Balken (über die halbe Spaltenlücke links und rechts),
     zusammen ergibt das eine durchgehende Leiste; an den Reihenenden steht sie wie am Rechner etwas über. */
  .rollo-regal__reihe { --spalt: .8rem; grid-template-columns: repeat(6, minmax(0, 1fr)); column-gap: var(--spalt); row-gap: 2rem; }
  .rollo-regal__stand { max-width: 104px; }
  .rollo-regal__reihe > li { position: relative; padding-bottom: 12px; }
  .rollo-regal__reihe > li::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: calc(var(--spalt) / -2);
    right: calc(var(--spalt) / -2);
    height: 12px;
    background: linear-gradient(#DCCBB4, #C6B296);
    box-shadow: 0 6px 14px -8px rgba(60, 30, 20, .45);
  }
  .rollo-regal__reihe > li:nth-child(6n+1)::after { left: calc(var(--spalt) * -1); border-bottom-left-radius: 8px; }
  .rollo-regal__reihe > li:nth-child(6n)::after { right: calc(var(--spalt) * -1); border-bottom-right-radius: 8px; }
  .rollo-regal__theke { display: none; }
}
@media (max-width: 760px) {
  .rollo-regal__reihe { --spalt: .5rem; grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 1.8rem; }
  .rollo-regal__sorte { gap: .6rem; }
  .rollo-regal__stand { max-width: 84px; }
  .rollo-regal__name { --name-faktor: .68; min-height: 2.25rem; }
  /* Reihenenden jetzt alle 4 statt alle 6 */
  .rollo-regal__reihe > li:nth-child(n)::after { left: calc(var(--spalt) / -2); right: calc(var(--spalt) / -2); border-radius: 0; }
  .rollo-regal__reihe > li:nth-child(4n+1)::after { left: calc(var(--spalt) * -1); border-bottom-left-radius: 8px; }
  .rollo-regal__reihe > li:nth-child(4n)::after { right: calc(var(--spalt) * -1); border-bottom-right-radius: 8px; }
  /* Am Handy bleibt das zuletzt angetippte Rollo auf dem Balken stehen — angehoben wird nur,
     was gerade unter dem Finger ist (data-schwebt, siehe regal.js). */
  .rollo-regal__sorte[aria-current="true"]:not([data-schwebt]) img { transform: none; }
  .rollo-regal__sorte[aria-current="true"]:not([data-schwebt]) .rollo-regal__stand::before { transform: none; opacity: 1; }
  .rollo-regal__info { display: none; }
  .rollo-regal__tipp { display: block; margin-top: .9rem; font-size: .9rem; font-weight: 600; color: var(--nacht); text-align: center; }

  /* Blatt als Bogen von unten */
  .rollo-blatt {
    width: 100%;
    max-height: 92dvh;
    margin: auto 0 0;
  }
  .rollo-blatt__kasten {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    padding: 1rem 1.4rem calc(1.6rem + env(safe-area-inset-bottom, 0px));
    border-radius: 22px 22px 0 0;
  }
  .rollo-blatt__kasten::before {
    content: "";
    width: 42px;
    height: 4px;
    border-radius: 2px;
    background: rgba(16, 14, 12, .18);
    margin-bottom: .9rem;
  }
  .rollo-blatt[open] { animation: rollo-blatt-hoch 340ms cubic-bezier(.22, .61, .36, 1); }
  @keyframes rollo-blatt-hoch {
    from { transform: translateY(100%); }
    to   { transform: none; }
  }
  .rollo-blatt__bild { height: min(420px, 46dvh); }
  .rollo-blatt__zeile { margin-top: 1rem; }
  .rollo-blatt__name { --name-faktor: 1.4; }
  .rollo-blatt__satz { margin: .7rem auto 1rem; }
  .rollo-blatt__groessen { justify-content: center; }
}

/* Kleine Handys (z. B. iPhone SE): Bild im Blatt etwas niedriger, damit alles ohne Scrollen passt */
@media (max-width: 760px) and (max-height: 700px) {
  .rollo-blatt__bild { height: 40dvh; }
  .rollo-blatt__satz { margin: .5rem auto .8rem; }
}

@media (prefers-reduced-motion: reduce) {
  .rollo-regal__stand img, .rollo-regal__stand::before { transition: none; }
  .rollo-blatt[open], .rollo-blatt[open]::backdrop { animation: none; }
}

/* ==========================================================================
   Frühstück hervorgehoben (22.09.2026) — Angaben vom Aushang „Frühstück bei Tandour":
   neun Frühstücksröllchen à 4 EUR, täglich 7–11 Uhr, dazu Kaffee oder Tee.
   Beim Hereinscrollen ploppt das Band auf und leuchtet dreimal kurz auf; danach ist Ruhe
   (dauerhafte Bewegung wäre nach WCAG 2.2.2 pausierbar zu machen) und bei
   prefers-reduced-motion passiert gar nichts.
   ========================================================================== */
.fruehstueck { box-shadow: 0 22px 50px rgba(129, 13, 8, .22), 0 0 0 0 rgba(233, 180, 76, 0); }
.fruehstueck__neu {
  position: absolute;
  top: 0;
  right: clamp(1.4rem, 3vw, 2.4rem);
  z-index: 2;
  padding: .45rem .85rem .4rem;
  border-radius: 0 0 8px 8px;
  background: var(--gold);
  color: #3B1206;
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .24em;
  text-transform: uppercase;
}
.fruehstueck__mitte { display: grid; gap: .8rem; }
.fruehstueck__merkmale {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem .5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.fruehstueck__merkmale li {
  padding: .34rem .7rem .3rem;
  border: 1px solid rgba(233, 180, 76, .45);
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: #FBE7C2;
  background: rgba(233, 180, 76, .1);
}
.fruehstueck__preis b { transform-origin: 50% 70%; }

/* Lichtschweif über das Band */
.fruehstueck::before {
  content: "";
  position: absolute;
  top: -20%;
  bottom: -20%;
  left: -40%;
  width: 28%;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 244, 222, .26), transparent);
  opacity: 0;
}
/* Der Glanz läuft dauerhaft — ausdrücklicher Wunsch, das Band soll ständig blinken. */
.fruehstueck::before { animation: fruehstueck-schweif 5.5s linear infinite; }
.fruehstueck[data-an] { animation: fruehstueck-glut 1.9s var(--ease-weich) 3; }
.fruehstueck[data-an] .fruehstueck__neu { animation: fruehstueck-marke 620ms var(--ease-weich) both; }
.fruehstueck[data-an] .fruehstueck__preis b { animation: fruehstueck-preis 760ms var(--ease-weich) both; }

@keyframes fruehstueck-schweif {
  0%   { opacity: 0; transform: translateX(0) skewX(-12deg); }
  12%  { opacity: 1; }
  60%  { opacity: 1; }
  100% { opacity: 0; transform: translateX(560%) skewX(-12deg); }
}
@keyframes fruehstueck-glut {
  0%, 100% { box-shadow: 0 22px 50px rgba(129, 13, 8, .22), 0 0 0 0 rgba(233, 180, 76, 0); }
  45%      { box-shadow: 0 22px 50px rgba(129, 13, 8, .3), 0 0 0 6px rgba(233, 180, 76, .3); }
}
@keyframes fruehstueck-marke {
  from { transform: translateY(-120%); }
  to   { transform: none; }
}
@keyframes fruehstueck-preis {
  0%   { transform: scale(.82); opacity: .4; }
  60%  { transform: scale(1.06); opacity: 1; }
  100% { transform: none; }
}

@media (max-width: 980px) {
  /* Preis neben die Überschrift, Text und Merkmale darunter über die volle Breite */
  .fruehstueck__kopf { grid-row: 1; grid-column: 1; }
  .fruehstueck__preis { grid-row: 1; grid-column: 2; align-self: center; border-left: 0; padding-left: 0; margin-top: 1.3rem; }   /* Platz für die „Neu"-Marke darüber */
  .fruehstueck__mitte { grid-row: 2; grid-column: 1 / -1; }
  .fruehstueck__text { max-width: none; }
}
@media (max-width: 520px) {
  .fruehstueck__neu { right: 1.2rem; font-size: .58rem; }
  .fruehstueck__merkmale li { font-size: .68rem; }
}
@media (prefers-reduced-motion: reduce) {
  .fruehstueck[data-an],
  .fruehstueck::before,
  .fruehstueck[data-an]::before,
  .fruehstueck[data-an] .fruehstueck__neu,
  .fruehstueck[data-an] .fruehstueck__preis b { animation: none; }
}


/* ==========================================================================
   8 ── Umlaut-Punkte (24.09.2026)
   Die Display-Schrift setzt Ö/Ü/Ä höher als die Versalhöhe. Bei line-height .95
   klebten die Punkte an der Zeile darüber („ZWÖLF", „RÖLLCHEN") und waren
   kaum zu erkennen. Etwas mehr Zeilenabstand gibt ihnen Luft.
   ========================================================================== */
.titel { line-height: 1.04; }
.fruehstueck h3 { line-height: 1.14; }

/* ==========================================================================
   9 ── Speisekarte am Rechner: beide Spalten enden bündig
   Vorher lief die rechte Spalte länger und links blieb ein großes Loch.
   Jetzt sind die Gruppen Flex-Spalten, und die Fotos nehmen den Rest auf.
   ========================================================================== */
@media (min-width: 1100px) {
  .karte-gruppen--zwei .karte-gruppe { display: flex; flex-direction: column; }
  .karte-gruppen--zwei .karte-gruppe > h3,
  .karte-gruppen--zwei .karte-gruppe > .gericht { flex: 0 0 auto; }
  .karte-gruppen--zwei .karte-gruppe > .foto { flex: 1 1 auto; min-height: 13rem; }
  .karte-gruppen--zwei .karte-gruppe > .foto:last-child { margin-bottom: 0; }
}

/* ==========================================================================
   10 ── Allergene & Zusatzstoffe (25.09.2026)
   Wie bei großen Speisekarten: am Gericht nur die kleinen Zeichen, die ganze
   Liste einmal weiter unten auf der Seite.
   ========================================================================== */
.stoffe-kurz {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .3rem .5rem;
  margin: .9rem 0 0;
  padding-top: .8rem;
  border-top: 1px solid rgba(16, 14, 12, .12);
  font-size: .8rem;
}
.stoffe-kurz__codes { display: inline-flex; flex-wrap: wrap; gap: .25rem; }
.stoffe-kurz__codes b {
  display: grid;
  place-items: center;
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 3px;
  background: rgba(16, 14, 12, .08);
  color: #3C3229;
  font-family: var(--schrift-text);
  font-size: .7rem;
  font-weight: 700;
  line-height: 1;
  cursor: help;
}
.stoffe-kurz__codes b.stoffe-kurz__zahl { border-radius: 999px; background: rgba(129, 13, 8, .12); color: var(--marke-rot); }
.stoffe-kurz__link { font-size: .78rem; color: #6B5F54; text-underline-offset: .2em; }
.stoffe-kurz__link:hover { color: var(--marke-rot); }

/* Blatt-Zeichen für vegan und vegetarisch — eigenes Zeichen, nicht das geschützte V-Label */
.kost-zeichen {
  display: inline-grid;
  place-items: center;
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 999px;
  background: #fff;
  box-shadow: inset 0 0 0 1.5px #2F7D45;
}
.kost-zeichen::before {
  content: "";
  width: .68rem;
  height: .68rem;
  background: #2F7D45;
  /* Blatt */
  clip-path: path("M11 1C6 1 1 5 1 10c0 0 5 1 8-2s2-7 2-7z");
  transform: scale(.9) rotate(-8deg);
}
/* vegan: volles Grün mit hellem Blatt — deutlich anders als der Umriss bei vegetarisch */
.kost-zeichen--vegan { background: #2F7D45; box-shadow: inset 0 0 0 1.5px #1F6B34; }
.kost-zeichen--vegan::before { background: #EAF6EC; }

/* Die ganze Liste am Ende der Karte */
.kennzeichnung {
  margin-top: clamp(2rem, 4vw, 3rem);
  padding: clamp(1.2rem, 3vw, 2rem) clamp(1.2rem, 3vw, 2rem) clamp(1.2rem, 2.6vw, 1.6rem);
  border-radius: 14px;
  background: rgba(16, 14, 12, .04);
  box-shadow: inset 0 0 0 1px rgba(16, 14, 12, .1);
}
.kennzeichnung__schalter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  cursor: pointer;
  list-style: none;
}
.kennzeichnung__schalter::-webkit-details-marker { display: none; }
.kennzeichnung__schalter:focus-visible { outline: 2px solid var(--marke-rot); outline-offset: 4px; border-radius: 6px; }
.kennzeichnung__kopf { display: block; }
.kennzeichnung__pfeil {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 999px;
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(16, 14, 12, .16);
  transition: transform 260ms var(--ease-weich), box-shadow 260ms var(--ease-weich);
}
.kennzeichnung__pfeil::before {
  content: "";
  width: .55rem;
  height: .55rem;
  border-right: 2px solid var(--marke-rot);
  border-bottom: 2px solid var(--marke-rot);
  transform: rotate(45deg) translate(-2px, -2px);
}
.kennzeichnung[open] .kennzeichnung__pfeil { transform: rotate(180deg); }
.kennzeichnung__schalter:hover .kennzeichnung__pfeil { box-shadow: inset 0 0 0 1px rgba(129, 13, 8, .45); }
.kennzeichnung[open] .kennzeichnung__lead { margin-bottom: 1.2rem; }
.kennzeichnung[open] .kennzeichnung__spalten { margin-top: 1.2rem; }

.kennzeichnung h3 {
  margin: 0 0 .4rem;
  font-family: var(--schrift-display);
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(1.2rem, 2.4vw, 1.6rem);
  letter-spacing: .03em;
  color: var(--marke-rot);
}
.kennzeichnung__lead { display: block; margin: 0; font-size: .92rem; color: #6B5F54; max-width: 60ch; }
.kennzeichnung__spalten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
  gap: 1.2rem clamp(1.6rem, 4vw, 3rem);
}
.kennzeichnung__titel {
  margin: 0 0 .6rem;
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #6B5F54;
}
.kennzeichnung__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.kennzeichnung__liste li {
  display: grid;
  grid-template-columns: 1.4rem minmax(0, 1fr);
  align-items: center;
  gap: .6rem;
  font-size: .9rem;
  color: #3C3229;
}
.kennzeichnung__liste b {
  display: grid;
  place-items: center;
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 3px;
  background: rgba(16, 14, 12, .08);
  font-size: .78rem;
  font-weight: 700;
}
.kennzeichnung__liste--zahl b { border-radius: 999px; background: rgba(129, 13, 8, .12); color: var(--marke-rot); }
.kennzeichnung__liste--kost .kost-zeichen { width: 1.4rem; height: 1.4rem; }
.kennzeichnung__fuss { margin: 1.2rem 0 0; font-size: .8rem; line-height: 1.55; color: #7A6D61; }

/* ==========================================================================
   11 ── Stimmen als Boxen statt Laufband (24.09.2026)
   Sterne stehen nur dort, wo eine echte Sternbewertung belegt ist (Google).
   Presse- und Portalzitate tragen stattdessen ihre Quelle an derselben Stelle.
   ========================================================================== */
.stimmen__gitter {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
  gap: clamp(.9rem, 1.6vw, 1.3rem);
  margin: 0;
  padding: 0;
}
.stimmen__gitter .stimme {
  width: auto;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: .75rem;
  margin: 0;
  padding: 1.3rem 1.35rem 1.15rem;
  border: 1px solid rgba(16, 14, 12, .12);
  border-radius: 14px;
  background: #FFFDF8;
  box-shadow: 0 8px 20px rgba(60, 40, 20, .05);
}
.stimme__kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .8rem;
  min-height: 1.1rem;
}
.stimmen__gitter .stimme__sterne { margin: 0; font-size: .95rem; letter-spacing: .1em; color: #E9B44C; }
.stimme__marke,
.stimmen__gitter .stimme__quelle {
  margin: 0;
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #8A7C6F;
}
.stimme__marke { color: var(--marke-rot, #810D08); }
.stimmen__gitter .stimme__text {
  margin: 0;
  flex: 1 1 auto;
  font-size: 1rem;
  line-height: 1.55;
  color: #2C241D;
}
.stimmen__gitter .stimme__wer {
  display: block;
  margin: 0;
  font-size: .78rem;
  letter-spacing: .01em;
  color: #7A6D61;
  opacity: 1;
}
@media (min-width: 1100px) { .stimmen__gitter { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ==========================================================================
   12 ── Frühstücks-Band: Bild dazu, Überschrift neu (24.09.2026)
   „Neun Frühstücksröllchen" klang, als bekäme man neun Stück — man wählt aber
   eine von neun Kombis. Dazu das Produktbild vom Aushang: Röllchen + Kaffee.
   ========================================================================== */
.fruehstueck { grid-template-columns: auto minmax(13rem, 1.15fr) minmax(0, 1.85fr) auto auto; }
.fruehstueck h3 { font-size: clamp(1.5rem, 2.25vw, 2.3rem); }
.fruehstueck__zeile { white-space: nowrap; }
.fruehstueck__paar {
  display: flex;
  align-items: center;          /* Tasse auf halber Höhe des Rollos, nicht am Boden */
  gap: clamp(.3rem, .8vw, .7rem);
}
.fruehstueck__ware {
  display: block;
  height: auto;
  filter: drop-shadow(0 12px 16px rgba(20, 4, 2, .45));
}
.fruehstueck__ware--rollo { width: clamp(3.6rem, 6vw, 5.6rem); }
.fruehstueck__ware--tasse { width: clamp(4.2rem, 7vw, 6.6rem); }
.fruehstueck__plus {
  font-family: var(--schrift-display);
  font-size: clamp(1.1rem, 2vw, 1.8rem);
  line-height: 1;
  color: var(--gold);
}
.fruehstueck__mehr { margin: .8rem 0 0; font-size: .82rem; }
.fruehstueck__mehr a { color: var(--gold); text-underline-offset: .25em; }

@media (max-width: 1180px) {
  .fruehstueck { grid-template-columns: auto minmax(0, 1fr) auto auto; row-gap: 1.2rem; }
  .fruehstueck__paar  { grid-row: 1; grid-column: 1; }
  .fruehstueck__kopf  { grid-row: 1; grid-column: 2; }
  .fruehstueck__preis { grid-row: 1; grid-column: 3; }
  .fruehstueck__zeit  { grid-row: 1; grid-column: 4; }
  .fruehstueck__mitte { grid-row: 2; grid-column: 1 / -1; }
  .fruehstueck__text  { max-width: none; }
}
@media (max-width: 980px) {
  .fruehstueck { grid-template-columns: auto minmax(0, 1fr) auto; }
  
  /* Die Uhrzeit bleibt sichtbar, nur flach als Zeile unter dem Text */
  .fruehstueck__zeit {
    display: flex; align-items: baseline; gap: .45rem;
    grid-row: 3; grid-column: 1 / -1;
    justify-items: start; text-align: left;
    border-left: 0; padding-left: 0;
  }
  .fruehstueck__zeit b { font-size: 1.5rem; }
  .fruehstueck__zeit small { margin-top: 0; }
}
@media (max-width: 620px) {
  .fruehstueck { grid-template-columns: auto minmax(0, 1fr); gap: 1rem 1.1rem; }
  .fruehstueck h3 { font-size: clamp(1.3rem, 6.4vw, 1.7rem); }
  .fruehstueck__paar  { grid-row: 1; grid-column: 1; flex-direction: column; gap: .1rem; align-items: center; }
  .fruehstueck__ware--rollo { width: 3.4rem; }
  .fruehstueck__ware--tasse { width: 3.8rem; }
  .fruehstueck__plus { font-size: 1rem; }
  .fruehstueck__kopf  { grid-row: 1; grid-column: 2; min-width: 0; padding-right: 3.2rem; }
  .fruehstueck__mitte { grid-row: 2; grid-column: 1 / -1; }
  .fruehstueck__preis { grid-row: 3; grid-column: 1; justify-items: start; text-align: left; border-left: 0; padding-left: 0; margin-top: 0; }
  .fruehstueck__preis b { font-size: 3rem; }
  .fruehstueck__zeit { grid-row: 3; grid-column: 2; align-self: end; padding-bottom: .35rem; }
}

/* Am Handy: Codes in einer Zeile, Namen als Fließtext — sonst wird das Blatt zu hoch */
.stoffe__kurz { display: none; }
@media (max-width: 620px) {
  .stoffe { margin-top: .85rem; padding-top: .75rem; }
  .stoffe__titel { display: none; }
  .stoffe__liste { display: none; }
  .stoffe__kurz { display: block; margin: 0; font-size: .8rem; line-height: 1.5; color: #4A4038; }
  .stoffe__codes { display: inline-flex; flex-wrap: wrap; gap: .25rem; margin-right: .45rem; vertical-align: -.15em; }
  .stoffe__codes b {
    display: grid; place-items: center; width: 1.1rem; height: 1.1rem;
    border-radius: 3px; background: var(--nacht, #150B09); color: #fff;
    font-size: .66rem; font-weight: 700; line-height: 1;
  }
  .stoffe__codes b.stoffe__zusatz { border-radius: 999px; background: var(--marke-rot, #810D08); }
  .stoffe__namen { color: #6B5F54; }
}

/* ==========================================================================
   13 ── Speisekarte vollständig (24.09.2026)
   Vorher standen nur Anzahlen („Pizza, 21 Sorten"). Jetzt steht jedes Gericht
   einzeln da — Quelle ist die gepflegte Karte des Vorbestell-Systems.
   ========================================================================== */
.karte-voll { display: grid; gap: clamp(2rem, 4.5vw, 3.4rem); }
.karte-teil { display: grid; gap: 1rem; }
.karte-teil__kopf { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem 1rem; }
.karte-teil__kopf h3 {
  margin: 0;
  font-family: var(--schrift-display);
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(1.35rem, 2.6vw, 1.9rem);
  letter-spacing: .03em;
  color: var(--marke-rot);
}
.karte-teil__kopf p { margin: 0; font-size: .9rem; color: #6B5F54; }
.karte-teil__foto { aspect-ratio: 16 / 5; border-radius: 12px; }
.speisen {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
  gap: 0 clamp(1.4rem, 3vw, 2.8rem);
}
.speise {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: .15rem .9rem;
  padding: .75rem 0;
  border-bottom: 1px solid rgba(16, 14, 12, .1);
}
.speise__name { font-weight: 700; font-size: 1rem; color: #221A14; }
.speise__preis {
  font-family: var(--schrift-display);
  font-weight: 400;
  font-size: 1.02rem;
  letter-spacing: .02em;
  white-space: nowrap;
  color: #3C3229;
}
.speise__text { grid-column: 1 / -1; font-size: .86rem; line-height: 1.45; color: #6B5F54; }
@media (min-width: 1100px) {
  .karte-teil[data-spalten="3"] .speisen { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .karte-teil[data-spalten="2"] .speisen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ==========================================================================
   14 ── Stimmen laufen durch (24.09.2026)
   Die Boxen bleiben, sie wandern jetzt waagerecht. Anhalten geht über den
   Knopf, beim Überfahren und wenn das System weniger Bewegung wünscht.
   ========================================================================== */
.stimmen__band {
  position: relative;
  overflow: hidden;
  padding: .4rem 0 1.2rem;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 4%, #000 96%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 4%, #000 96%, transparent);
}
.stimmen__spur {
  list-style: none;
  display: flex;
  width: max-content;
  gap: clamp(.9rem, 1.6vw, 1.3rem);
  margin: 0;
  padding: 0;
  animation: stimmen-lauf 68s linear infinite;
}
.stimmen__band:hover .stimmen__spur,
.stimmen__band:focus-within .stimmen__spur,
.stimmen__band[data-haelt] .stimmen__spur { animation-play-state: paused; }
.stimmen__band--rueck { padding-top: 0; }
.stimmen__band--rueck .stimmen__spur { animation-name: stimmen-lauf-rueck; animation-duration: 78s; }
@keyframes stimmen-lauf-rueck { from { transform: translate3d(-50%, 0, 0); } to { transform: translate3d(0, 0, 0); } }
.stimmen__spur > li { flex: 0 0 auto; width: min(21rem, 78vw); }
.stimmen__spur .stimme {
  height: 100%;
  background: #fff;
  border-color: rgba(16, 14, 12, .16);
  box-shadow: 0 6px 18px rgba(60, 40, 20, .08);
}
.stimmen__spur .stimme__kopf { min-height: 1.3rem; }
.stimmen__spur .stimme__sterne { font-size: 1rem; letter-spacing: .14em; }
@keyframes stimmen-lauf { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }
.stimmen__halt {
  display: block;
  margin: .4rem auto 0;
  padding: .45rem 1rem;
  border: 1px solid rgba(16, 14, 12, .18);
  border-radius: 999px;
  background: #FFFDF8;
  color: #6B5F54;
  font: inherit;
  font-size: .78rem;
  cursor: pointer;
}
.stimmen__halt:hover { border-color: rgba(16, 14, 12, .34); color: #2C241D; }
@media (prefers-reduced-motion: reduce) {
  .stimmen__spur { animation: none; }
  .stimmen__band { overflow-x: auto; }
}

/* ==========================================================================
   15 ── Frühstücks-Fenster beim Öffnen der Seite
   Einmal je Besuch, wegklickbar, Escape schließt. Ohne Bewegungswunsch
   erscheint es ohne Animation.
   ========================================================================== */
.fru-fenster {
  border: 0;
  padding: 0;
  background: transparent;
  width: min(30rem, calc(100vw - 2rem));
  max-width: none;
  max-height: calc(100dvh - 2rem);
  overflow: auto;
  overscroll-behavior: contain;
  color: var(--creme);
}
.fru-fenster::backdrop { background: rgba(8, 7, 6, .68); backdrop-filter: blur(5px); }
.fru-fenster[open] { animation: fru-fenster-auf 420ms var(--ease-weich, cubic-bezier(.22, 1, .36, 1)) both; }
@keyframes fru-fenster-auf { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: none; } }
.fru-fenster__kasten {
  position: relative;
  display: grid;
  justify-items: center;
  text-align: center;
  gap: .5rem;
  padding: clamp(1.6rem, 5vw, 2.4rem) clamp(1.2rem, 4vw, 2rem) clamp(1.4rem, 4vw, 2rem);
  border-radius: 16px;
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(255, 255, 255, .10), transparent 55%),
    linear-gradient(120deg, #8E1009, #5E0803);
  box-shadow: 0 30px 70px rgba(0, 0, 0, .5), inset 0 0 0 1px rgba(233, 180, 76, .34);
}
.fru-fenster__zu {
  position: absolute;
  top: .7rem;
  right: .7rem;
  display: grid;
  place-items: center;
  width: 2.2rem;
  height: 2.2rem;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, .14);
  color: var(--creme);
  cursor: pointer;
}
.fru-fenster__zu:hover { background: rgba(255, 255, 255, .26); }
.fru-fenster__zeile {
  margin: 0;
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--gold);
}
.fru-fenster__titel {
  margin: .2rem 0 .4rem;
  font-family: var(--schrift-display);
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(1.8rem, 7vw, 2.6rem);
  line-height: 1.06;
  letter-spacing: .01em;
  color: #fff;
}
.fru-fenster__paar { display: flex; align-items: center; gap: .5rem; margin: .2rem 0 .3rem; }
.fru-fenster__paar .fruehstueck__ware--rollo { width: clamp(4.4rem, 20vw, 6rem); }
.fru-fenster__paar .fruehstueck__ware--tasse { width: clamp(5rem, 23vw, 7rem); }
.fru-fenster__text { margin: 0; max-width: 34ch; font-size: .92rem; color: rgba(247, 242, 233, .86); }
.fru-fenster__preis { margin: .4rem 0 .2rem; display: flex; align-items: baseline; gap: .6rem; }
.fru-fenster__preis b {
  font-family: var(--schrift-display);
  font-weight: 400;
  font-size: clamp(2.6rem, 11vw, 3.6rem);
  line-height: .9;
  color: var(--gold);
}
.fru-fenster__preis b span { font-size: .42em; }
.fru-fenster__preis small { font-size: .6rem; letter-spacing: .2em; text-transform: uppercase; color: rgba(247, 242, 233, .7); }
.fru-fenster__knoepfe { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; margin-top: .6rem; }
.fru-fenster__knoepfe .knopf--linie { color: var(--creme); border-color: rgba(247, 242, 233, .45); background: transparent; cursor: pointer; }
@media (prefers-reduced-motion: reduce) { .fru-fenster[open] { animation: none; } }

/* ==========================================================================
   16 ── Speisekarte: Kategorie-Leiste, kleinere Fotos am Rechner (24.09.2026)
   ========================================================================== */
.karte-leiste {
  /* Klebt direkt unter der Kopfzeile — ohne Lücke — und läuft wie die Theke
     von Bildschirmkante zu Bildschirmkante. */
  position: sticky;
  top: calc(var(--kopf-hoehe, 5rem) + env(safe-area-inset-top, 0px));
  z-index: 40;
  width: 100vw;
  margin: 0 calc(50% - 50vw) clamp(1.6rem, 3vw, 2.4rem);
  padding: .55rem 0 .6rem;
  background: var(--creme);
  box-shadow: 0 1px 0 rgba(16, 14, 12, .1), 0 10px 18px -16px rgba(60, 30, 20, .5);
}
.karte-leiste ul {
  list-style: none;
  display: flex;
  gap: .4rem;
  width: min(1240px, calc(100% - 2 * clamp(1.2rem, 5vw, 4rem)));
  margin-inline: auto;
  padding: 0 0 .1rem;
  overflow-x: auto;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
}
.karte-leiste ul::-webkit-scrollbar { display: none; }
.karte-leiste li { flex: 0 0 auto; scroll-snap-align: start; }
.karte-leiste a {
  display: block;
  padding: .5rem .95rem;
  border-radius: 999px;
  border: 1px solid rgba(16, 14, 12, .14);
  background: #FFFDF8;
  color: #4A4038;
  font-size: .86rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.karte-leiste a:hover { border-color: rgba(129, 13, 8, .4); color: var(--marke-rot); }
.karte-leiste a[aria-current="true"] {
  background: var(--marke-rot);
  border-color: var(--marke-rot);
  color: #fff;
}
/* Sprungziele nicht unter der Kopfzeile verstecken */

@media (min-width: 1100px) {
  /* Am Rechner steht jedes Foto an derselben Stelle: schmale Spalte links,
     rechts Überschrift und Liste. Dadurch wiederholt sich derselbe Aufbau in
     jeder Kategorie, statt dass die Bilder überall anders sitzen. */
  .karte-teil {
    grid-template-columns: 13rem minmax(0, 1fr);
    column-gap: clamp(1.8rem, 3vw, 2.8rem);
    row-gap: .9rem;
    align-items: start;
  }
  .karte-teil__foto {
    grid-column: 1;
    grid-row: 1 / span 2;
    aspect-ratio: 3 / 4;
    margin: 0;
    align-self: start;
  }
  .karte-teil__kopf { grid-column: 2; grid-row: 1; }
  .karte-teil .speisen { grid-column: 2; grid-row: 2; }
  /* Getränke hat kein Foto, behält aber die leere Bildspalte — sonst stünde die
     Kategorie weiter links als alle anderen. */
  .karte-teil--ohne-foto .karte-teil__kopf { grid-column: 2; grid-row: 1; }
  .karte-teil--ohne-foto .speisen { grid-column: 2; grid-row: 2; }
}

/* ==========================================================================
   17 ── Footer: „Treffpunkt Tandour" und die Handschrift der Agentur
   ========================================================================== */
.fuss__treffpunkt {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin: 0;
  line-height: 1;
}
.fuss__treffpunkt b {
  font-family: var(--schrift-text);
  font-weight: 800;
  font-size: clamp(1.4rem, 3vw, 2rem);
  letter-spacing: -.01em;
  color: var(--creme);
}
.fuss__wortmarke { height: clamp(1.6rem, 3.4vw, 2.4rem); width: auto; display: block; }
.fuss__macher {
  /* steht in der unteren Zeile ganz rechts */
  margin: 0 0 0 auto;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .5rem;
  font-size: .82rem;
  color: var(--creme-leise);
}
.fuss__macher a {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .45rem .95rem .45rem .6rem;
  border-radius: 999px;
  border: 1px solid rgba(247, 242, 233, .24);
  background: rgba(255, 255, 255, .06);
  color: var(--creme);
  font-weight: 700;
  font-size: .95rem;
  text-decoration: none;
}
.fuss__macher a:hover { border-color: rgba(247, 242, 233, .55); background: rgba(255, 255, 255, .12); }
.fuss__macher img { height: 1.5rem; width: auto; display: block; }

/* ==========================================================================
   18 ── Sprungziele sauber anfahren (24.09.2026)
   Die Kopfzeile liegt fest über der Seite, in der Speisekarte zusätzlich die
   Kategorie-Leiste. Ohne Abstand landet jeder Anker unter diesen Balken und
   die Überschrift ist angeschnitten. Beide Höhen misst regal.js und legt sie
   als --kopf-hoehe und --leiste-hoehe ab.
   ========================================================================== */
:where(section[id], div[id], aside[id], details[id], ol[id], ul[id]) {
  scroll-margin-top: calc(var(--kopf-hoehe, 5rem) + 1.4rem);
}
/* In der Speisekarte klebt die Kategorie-Leiste unter der Kopfzeile */
#karte-rollos,
#karte-fruehstueck,
.karte-teil {
  scroll-margin-top: calc(var(--kopf-hoehe, 5rem) + var(--leiste-hoehe, 3.4rem) + 1rem);
}

/* ==========================================================================
   22 ── Frühstück: das Wort „Frühstück" als Blickfang (10.10.2026)
   ========================================================================== */
.fruehstueck__zeile,
.fru-fenster__zeile {
  display: flex;
  flex-direction: column;
  gap: .18rem;
  letter-spacing: normal;
  text-transform: none;
  font-size: inherit;
}
.fruehstueck__zeile b,
.fru-fenster__zeile b {
  font-family: var(--schrift-display);
  font-weight: 400;
  text-transform: uppercase;
  line-height: .9;
  letter-spacing: .012em;
  color: var(--gold);
}
.fruehstueck__zeile b { font-size: clamp(1.9rem, 3vw, 2.9rem); }
.fru-fenster__zeile b { font-size: clamp(2rem, 8vw, 2.9rem); }
.fruehstueck__zeile span,
.fru-fenster__zeile span {
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: rgba(247, 242, 233, .74);
}
/* Die Überschrift tritt einen Schritt zurück, damit das Wort führt */
.fruehstueck h3 { font-size: clamp(1.25rem, 1.9vw, 1.8rem); }
.fru-fenster__titel { font-size: clamp(1.4rem, 5.4vw, 2rem); }
@media (max-width: 760px) {
  .fruehstueck__zeile b { font-size: clamp(1.7rem, 7.6vw, 2.3rem); }
  .fruehstueck h3 { font-size: clamp(1.1rem, 4.6vw, 1.4rem); }
}

/* Wortmarke auf dem Frühstücks-Band und im Fenster (11.10.2026) */
.fruehstueck__marke {
  position: absolute;
  top: .9rem;
  left: clamp(1.4rem, 3vw, 2.4rem);
  z-index: 2;
  height: clamp(1.1rem, 1.9vw, 1.55rem);
  width: auto;
  opacity: .95;
  filter: drop-shadow(0 2px 7px rgba(0, 0, 0, .28));
}
.fru-fenster__marke {
  display: block;
  height: 1.45rem;
  width: auto;
  margin: 0 auto .55rem;
  opacity: .95;
}
@media (max-width: 760px) {
  .fruehstueck__marke { top: .75rem; height: 1.15rem; }
}
@media (max-width: 760px) {
  /* Platz für die Wortmarke, damit sie das Rollo nicht berührt */
  .fruehstueck { padding-top: 2.9rem; }
}

/* Wortmarke präsenter (11.10.2026) */
.fruehstueck__marke {
  top: 1.05rem;
  height: clamp(1.7rem, 2.9vw, 2.45rem);
  opacity: 1;
  filter: drop-shadow(0 3px 10px rgba(0, 0, 0, .32));
}
.fru-fenster__marke { height: 2.1rem; opacity: 1; margin-bottom: .65rem; }
@media (max-width: 760px) {
  .fruehstueck__marke { top: .85rem; height: 1.75rem; }
  .fruehstueck { padding-top: 3.5rem; }
}