/* Hülle für die Speisekarte in v1.
   ═══════════════════════════════
   Wird NACH wiedemann-menu.css geladen und darf deshalb überschreiben.
   Zwei Aufgaben:

   1. Das Overlay selbst — Vollbild, Leiste, Schließen. Gibt es in der
      Einzelseite nicht, dort ist die Karte die ganze Seite.
   2. Die Höhen korrigieren. Das Original rechnet durchgehend mit
      calc(100dvh - 128px), weil dort Kopf- und Fußzeile Platz brauchen.
      Im Overlay gibt es beides nicht, dafür eine schmalere eigene Leiste. */

.ww-karte {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  z-index: 200;
  display: grid;
  grid-template-rows: auto 1fr;
  overflow: hidden;
  background: var(--surface);
  color: var(--paper);
  font-family: "Karla", system-ui, sans-serif;
  /* Höhe der eigenen Leiste — von den Szenen unten abgezogen. */
  --ww-leiste: 64px;
}
.ww-karte[hidden] { display: none; }

/* ── v1 aussperren ──────────────────────────────────────────────────────
   v1 stylt `header`, `section` und `footer` als blanke Elemente. Das
   Speisekarten-Markup benutzt dieselben Elemente — die Seitenköpfe im
   Buch sind <header>, die Szenen sind <section> —, und damit erbte der
   Buchkopf v1s cremefarbenen, klebenden Seitenkopf und jede Szene die
   Abschnittspolsterung von bis zu 148 px.

   Bewusst mit Element-Spezifität (0,1,1): Die Regeln des Handoff-Pakets
   sind alle klassenbasiert (0,2,0) und gewinnen daher weiterhin. Diese
   Zeilen setzen nur zurück, was v1 von außen hineinträgt.               */
.ww-karte header {
  position: static;
  top: auto;
  z-index: auto;
  background: none;
  border-bottom: 0;
}
.ww-karte section { padding: 0; }
.ww-karte footer {
  background: none;
  color: inherit;
  padding: 0;
  margin: 0;
}

/* ── Leiste ─────────────────────────────────────────────────────────── */
.ww-karte .ww-karte-leiste {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 18px;
  height: var(--ww-leiste);
  padding: 0 clamp(16px, 3vw, 32px);
  border-bottom: 1px solid var(--line);
}
.ww-karte .ww-karte-schliessen {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--paper);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  transition: border-color .2s ease, color .2s ease, background .2s ease;
}
.ww-karte .ww-karte-schliessen:hover,
.ww-karte .ww-karte-schliessen:focus-visible {
  border-color: var(--gold);
  color: var(--gold-bright);
  background: rgb(198 162 77 / .08);
}

/* ── Bühne ──────────────────────────────────────────────────────────── */
.ww-karte .ww-karte-buehne { overflow-y: auto; overscroll-behavior: contain; }

/* In der React-Vorlage wird der Ladehinweis aus dem DOM genommen, sobald
   das Buch bereit ist. Hier bleibt er stehen und wird nur per [hidden]
   ausgeblendet — und `display: grid` aus .book-loading schlägt das
   [hidden]-Standardverhalten. Ohne diese Zeile liegt der Hinweis
   dauerhaft über der aufgeschlagenen Karte. */
.ww-karte .book-loading[hidden] { display: none; }

/* Die Szenen des Pakets rechnen mit 128 px Seiten-Chrome. Hier ist es
   die eigene Leiste — sonst entsteht unten ein toter Streifen und das
   Buch wird kleiner gezeichnet, als der Platz hergibt. */
.ww-karte .closed-scene,
.ww-karte .opened-scene,
.ww-karte .reader { min-height: calc(100dvh - var(--ww-leiste)); }

/* Buch senkrecht mittig statt oben klebend. Ohne das saß es direkt unter
   der Werkzeugleiste und ließ darunter über hundert Pixel tot — die
   Öffnungsbewegung lief dann sichtbar im oberen Drittel ab, statt dort,
   wo das Auge sie erwartet. */
.ww-karte .reader {
  display: flex;
  flex-direction: column;
  /* WICHTIG — hier lag die „Spiegelung“ unterhalb des Hinweistextes:
     page-flip dreht die umschlagende Seite im 3D-Raum und zeichnet sie
     dabei kurzzeitig über die Buchfläche hinaus. In der Einzelseite fing
     das `.menu-experience { overflow: hidden }` ab — eine Regel, die ich
     beim Kapseln als Seiten-Chrome verworfen habe. Ohne sie wuchs die
     scrollbare Bühne während der Bewegung, und die gedrehte Seite wurde
     unten sichtbar. Beschnitten wird nur die Buchansicht; die
     Listenansicht bleibt scrollbar. */
  overflow: hidden;
}
.ww-karte .book-stage { margin-top: auto; margin-bottom: auto; }
.ww-karte .book-stage {
  /* Die perspektivisch gedrehte harte Seite kann während weniger Frames
     rechnerisch über die Buchfläche hinausragen. Clip verhindert den
     dunklen, spiegelnden Keil unterhalb des Buchs, ohne die Seite selbst
     innerhalb der Doppelseite abzuschneiden. */
  overflow: clip;
}
.ww-karte .reader-hint { margin-top: 0; }
.ww-karte .reader-view-actions {
  display: flex;
  align-items: center;
  justify-self: end;
  gap: 18px;
}
.ww-karte .text-button:disabled {
  cursor: default;
  opacity: 0.35;
}

/* Einstiegsbild einspaltig und mittig — in der Vorlage steht der Deckel
   rechts neben einer Textspalte, das Buch erscheint danach aber zentriert.
   Der Deckel sprang dadurch beim Klick von rechts in die Mitte, noch bevor
   die Öffnungsbewegung begann. Ein Sprung, den niemand als Absicht liest. */
.ww-karte .closed-scene {
  grid-template-columns: 1fr;
  justify-items: center;
  text-align: center;
  gap: clamp(20px, 3vw, 34px);
  width: min(100% - 48px, 760px);
  min-height: calc(100dvh - var(--ww-leiste) - 32px);
  align-content: center;
}

/* Der geschlossene Deckel wird auf Buchgröße gebunden. In der Vorlage
   rechnet er mit `calc(100dvh - 210px)` — das war für die Einzelseite mit
   Kopf und Fuß gedacht und ergab im Overlay 782 px, also mehr, als unten
   Platz ist: Der Deckel ragte aus dem Bild, und beim Klick sprang er um
   gut 200 px nach oben und schrumpfte, bevor die Öffnung überhaupt begann.
   720 px ist die Seitenhöhe, mit der page-flip zeichnet — damit steht der
   Deckel vorher und nachher gleich groß an derselben Stelle. */
.ww-karte .cover-trigger img {
  width: auto;
  max-width: min(100%, 560px);
  /* 300 px sind die Leiste, der Textblock darüber, der Abstand und die
     „Speisekarte öffnen“-Zeile darunter. Ohne diesen Abzug rechnete die
     Vorlage nur gegen die Fensterhöhe und schob den Deckel unter den
     unteren Rand — er stand dann angeschnitten da und sprang beim Klick
     um gut 200 px nach oben. */
  height: min(560px, calc(100dvh - var(--ww-leiste) - 290px));
  max-height: none;
}

/* Die Vorlage skaliert den Titel mit der Fenster-BREITE. In der
   zweispaltigen Einzelseite ging das auf; einspaltig und zentriert steht
   er über dem Deckel und schob ihn bei 1920 px Breite unter den Rand.
   Hier deckelt eine Obergrenze, die zur Höhe passt. */
.ww-karte .closed-copy h1 { font-size: clamp(2rem, 4vw, 3.4rem); }

/* ── Deckelgrafik im Buch ───────────────────────────────────────────────
   Das Paket adressiert sie als `.menu-cover-page > img`, also als direktes
   Kind. Für die WebP-Auslieferung steckt sie hier in einem <picture> —
   damit greift der Selektor nicht mehr, und ohne ihn fehlen object-fit
   und Höhenbindung. Der Deckel wurde dadurch auf die Seitenhöhe gezerrt
   und stand verformt und viel zu groß da. Das war kein Fehler des Pakets,
   sondern meiner beim Einbau der WebP-Variante.                         */
.ww-karte .menu-cover-page {
  /* Die beiden sichtbaren Flächen liegen absolut übereinander. Vor der
     Initialisierung von page-flip braucht der Deckel deshalb selbst ein
     Seitenverhältnis, damit die Bühne bei ihrer ersten Messung nicht auf
     Höhe 0 kollabiert und fälschlich ins Hochformat wechselt. */
  aspect-ratio: 500 / 720;
  transform-style: preserve-3d;
}
.ww-karte .menu-cover-face {
  position: absolute;
  inset: 0;
  display: block;
  overflow: hidden;
  border-radius: 2px 12px 12px 2px;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform-style: preserve-3d;
}
.ww-karte .menu-cover-front {
  transform: rotateY(0deg) translateZ(1px);
}
.ww-karte .menu-cover-front > picture {
  display: block;
  width: 100%;
  height: 100%;
}
.ww-karte .menu-cover-front picture > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.ww-karte .menu-cover-back {
  display: grid;
  place-items: center;
  border: 1px solid rgb(198 162 77 / 0.55);
  background:
    radial-gradient(circle at 50% 45%, rgb(198 162 77 / 0.1), transparent 34%),
    repeating-radial-gradient(circle at 40% 30%, #242422 0, #242422 1px, #21211f 2px, #232321 4px);
  box-shadow: inset 0 0 46px rgb(0 0 0 / 0.42);
  transform: rotateY(180deg) translateZ(1px);
}
.ww-karte .menu-cover-back::after {
  position: absolute;
  inset: 17px;
  border: 1px solid rgb(198 162 77 / 0.48);
  content: "";
}
.ww-karte .menu-cover-back > img {
  width: 92px;
  height: 92px;
  object-fit: contain;
  opacity: 0.58;
}

/* ── Inhaltsverzeichnis ───────────────────────────────────────────────
   Keine zusätzliche Kartenwand: Die Ziele stehen wie in einer gedruckten
   Karte als ruhiges Register untereinander. Jede Zeile ist vollständig
   klickbar und zeigt die echte Buchseite an. */
.ww-karte .index-frame {
  padding: 31px 34px 27px;
}
.ww-karte .index-frame .page-heading {
  padding-bottom: 14px;
}
.ww-karte .index-frame .page-heading h2 {
  font-size: 1.55rem;
}
.ww-karte .menu-index {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 12px;
  padding-top: 13px;
}
.ww-karte .menu-index-group h3 {
  margin: 0 0 3px;
  color: var(--gold);
  font-size: 0.53rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.ww-karte .menu-index-links {
  display: grid;
}
.ww-karte .menu-index-link {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 28px;
  border: 0;
  border-bottom: 1px solid rgb(198 162 77 / 0.22);
  padding: 3px 1px;
  background: transparent;
  color: var(--paper);
  cursor: pointer;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.72rem;
  text-align: left;
  transition: color 160ms ease, border-color 160ms ease, transform 160ms ease;
}
.ww-karte .menu-index-link:hover,
.ww-karte .menu-index-link:focus-visible {
  border-color: var(--gold-bright);
  color: var(--gold-bright);
  outline: none;
}
.ww-karte .menu-index-link:active {
  transform: translateY(1px);
}
.ww-karte .menu-index-link > * {
  /* page-flip prüft beim Pointer-Start nur das direkt getroffene Element.
     So bleibt das Ziel immer der Button und wird nicht zusätzlich als
     Blättergeste interpretiert, wenn der Text im Button getroffen wird. */
  pointer-events: none;
}
.ww-karte .menu-index-page {
  color: var(--gold);
  font-family: "Karla", system-ui, sans-serif;
  font-size: 0.52rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.06em;
  white-space: nowrap;
}
.ww-karte .index-allergens {
  position: relative;
  z-index: 1;
  margin-top: auto;
  padding-top: 10px;
  color: var(--muted);
  font-size: 0.58rem;
  line-height: 1.38;
}
.ww-karte .index-allergens p {
  margin: 0;
}
.ww-karte .index-allergens-title {
  margin-bottom: 3px !important;
  color: var(--gold);
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}
.ww-karte .index-allergens-note {
  margin-top: 5px !important;
  color: rgb(185 179 167 / 0.78);
  font-style: italic;
}

/* ── Kapitelseiten ──────────────────────────────────────────────────────
   Jede der drei Karten des Hauses beginnt mit einer eigenen Seite. Erbt
   das Aussehen der Begrüßungsseite und ergänzt Untertitel und Legende.  */
.ww-karte .menu-page-kapitel .kapitel-untertitel {
  margin: 10px 0 0;
  color: var(--muted);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1rem;
  font-style: italic;
}
.ww-karte .kapitel-legende {
  margin-top: auto;
  padding-top: 26px;
  border-top: 1px solid rgb(198 162 77 / 0.3);
  width: 100%;
}
.ww-karte .kapitel-legende-titel {
  margin: 0 0 6px;
  color: var(--gold);
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.ww-karte .kapitel-legende-liste {
  margin: 0;
  color: var(--muted);
  font-size: 0.62rem;
  line-height: 1.6;
}
/* Fehlende Angaben werden ausgewiesen, nicht verschwiegen. */
.ww-karte .kapitel-offen {
  margin-top: auto;
  padding: 10px 14px;
  border: 1px solid rgb(198 162 77 / 0.45);
  color: var(--gold-bright);
  font-size: 0.62rem;
  line-height: 1.5;
  font-style: italic;
}

/* ── Kennzeichnung und Allergene ────────────────────────────────────── */
.ww-karte .dish-marke {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 7px;
  border-radius: 2px;
  font-family: "Karla", system-ui, sans-serif;
  font-size: 0.52rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  vertical-align: middle;
  white-space: nowrap;
}
.ww-karte .dish-marke-vegan { background: rgb(122 158 106 / 0.28); color: #bcd6ac; }
.ww-karte .dish-marke-vegetarisch { background: rgb(198 162 77 / 0.24); color: var(--gold-bright); }

.ww-karte .dish-allergene {
  color: rgb(185 179 167 / 0.72);
  font-size: 0.92em;
  letter-spacing: 0.04em;
  white-space: nowrap;
  cursor: help;
}

/* ── Listenansicht: nach Karten gruppiert ───────────────────────────── */
.ww-karte .karten-block { margin-top: 54px; }
.ww-karte .karten-block:first-of-type { margin-top: 0; }
.ww-karte .karten-kopf {
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 8px;
}
.ww-karte .karten-kopf h2 {
  margin: 0;
  color: var(--paper);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(1.6rem, 3.4vw, 2.3rem);
  font-weight: 400;
}
.ww-karte .karten-kopf p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 0.78rem;
}
.ww-karte .karten-legende {
  margin: 0 0 10px;
  color: var(--muted);
  font-size: 0.66rem;
  letter-spacing: 0.02em;
}
.ww-karte .karten-hinweis {
  max-width: 78ch;
  margin: 0 0 18px;
  color: rgb(185 179 167 / 0.82);
  font-size: 0.7rem;
  font-style: italic;
  line-height: 1.5;
}
.ww-karte .karten-block .kapitel-offen { margin: 0 0 10px; display: inline-block; }

@media (max-width: 767px) {
  .ww-karte .reader-view-actions { gap: 9px; }
  .ww-karte .reader-view-actions .text-button { font-size: 0.61rem; }
  .ww-karte .index-frame { padding: 24px 24px 23px; }
  .ww-karte .index-frame .page-heading { padding-bottom: 11px; }
  .ww-karte .index-frame .page-heading h2 { font-size: 1.25rem; }
  .ww-karte .menu-index { gap: 9px; padding-top: 10px; }
  .ww-karte .menu-index-link { min-height: 25px; font-size: 0.65rem; }
  .ww-karte .index-allergens { padding-top: 8px; font-size: 0.52rem; }
}

/* Der Bake-off-Entwurf zeigt V1 in einem niedrigeren iframe. Dort wird
   das Register zweispaltig, damit Legende und Hinweis innerhalb der
   Buchseite bleiben, ohne die gesamte Karte kleiner lesen zu müssen. */
@media (max-height: 700px) and (min-width: 768px) {
  .ww-karte .index-frame { padding: 25px 30px 24px; }
  .ww-karte .index-frame .page-heading { padding-bottom: 11px; }
  .ww-karte .index-frame .page-heading h2 { font-size: 1.35rem; }
  .ww-karte .menu-index { gap: 9px; padding-top: 9px; }
  .ww-karte .menu-index-links {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 14px;
  }
  .ww-karte .menu-index-link { min-height: 25px; font-size: 0.64rem; }
  .ww-karte .index-allergens { padding-top: 8px; font-size: 0.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .ww-karte *,
  .ww-karte *::before,
  .ww-karte *::after { animation: none !important; transition: none !important; }
}