/* Speisekarte: Register mit allen Preisen (Stile in site.css), darunter die Originalkarte zum Blättern und Hinweise. */

/* ---------- Kopf: drei freigestellte Teller wie auf einem Tisch, leicht überlappend ---------- */
.karte-strip { position: relative; height: clamp(15rem, 30vw, 28rem); margin-top: var(--block-gap); }
.kp { position: absolute; height: auto; filter: drop-shadow(0 1.5rem 1.75rem rgba(32, 30, 20, 0.28)); rotate: var(--turn-now, 0deg); }
.kp-1 { width: 31%; left: 0; top: 12%; }
.kp-2 { width: 30%; left: 34%; top: 0; z-index: 2; }
.kp-3 { width: 29%; right: 0; top: 8%; }
@media (max-width: 47.99em) {
  .karte-strip { height: 60vw; }
  .kp-1 { width: 42%; left: -6%; top: 24%; }
  .kp-2 { width: 50%; left: 25%; top: 0; }
  .kp-3 { width: 40%; right: -6%; top: 28%; }
}

/* ---------- Originalkarte ---------- */
.chapters { display: flex; flex-wrap: wrap; gap: 0 1.5rem; margin-bottom: 1.5rem; }
.chapters a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 0.3em; text-decoration-thickness: 1px; color: var(--text-soft); transition: color var(--t-fast) ease, text-decoration-color var(--t-fast) ease; }
.chapters a[aria-current] { color: var(--ivory-100); text-decoration-color: var(--brass-400); }
@media (hover: hover) and (pointer: fine) { .chapters a:hover { color: var(--ivory-100); } }

/* So groß, wie der Bildschirm es zulässt; der geschlossene Deckel liegt mittig */
.book-wrap { margin-inline: auto; width: min(100%, calc((100svh - var(--header-h) - 10rem) * 0.7071 * 2)); transition: translate 600ms var(--ease-in-out); }
.book-wrap:focus-visible { outline-offset: 8px; }
.book-wrap[data-closed="front"] { translate: -25% 0; }
.book-wrap[data-closed="back"] { translate: 25% 0; }
.book:not(.is-book) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gutter); }
.book .page { background: #fff; overflow: hidden; }
.book .page img { width: 100%; height: 100%; object-fit: cover; }
.book.is-book { cursor: grab; }
.book.is-book:active { cursor: grabbing; }
.book-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.75rem 1rem; margin-top: 1.5rem; }
@media (max-width: 47.99em) {
  .book-controls { display: grid; grid-template-columns: 1fr 1fr; }
  .book-count, .book-controls [data-zoom] { grid-column: 1 / -1; grid-row: auto; }
  .book-count { order: -1; }
}
.book-controls[hidden] { display: none; }
.book-count { min-width: 14ch; text-align: center; }
@media (max-width: 59.99em) {
  .book-wrap { width: min(100%, calc((100svh - var(--header-h) - 11rem) * 0.7071)); }
  .book:not(.is-book) { grid-template-columns: 1fr; }
  .book-controls [data-zoom] { flex-basis: 100%; }
}
@media (prefers-reduced-motion: reduce) { .book-wrap { transition: none; } }

/* ---------- Hinweise ---------- */
.notes-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: var(--head-gap); align-items: start; }
.notes-grid h2 { grid-column: 1 / -1; }
.notes-list { grid-column: 1 / span 8; display: grid; grid-template-columns: 1fr 1fr; gap: 1.75rem var(--block-gap); }
.notes-list dt { font-size: var(--fs-h3); font-style: italic; color: var(--heading); margin-bottom: 0.3rem; }
.notes-list dd { margin: 0; }
.notes-cta { grid-column: 10 / span 3; display: grid; gap: 1.25rem; align-content: start; padding: var(--pad-card); background: var(--ivory-200); }
@media (max-width: 59.99em) {
  .notes-grid { grid-template-columns: 1fr; }
  .notes-list, .notes-cta { grid-column: 1; }
  .notes-list { grid-template-columns: 1fr; }
}