@charset "UTF-8";
/* Burdo Restaurante — Designwelt „La R Invertida"
   Papier und Tinte aus der gedruckten Karte, Neon aus dem Gastraum.
   Siehe DESIGN.md. Reihenfolge: Marken → Grundlagen → Bausteine → Seiten → Druck. */

/* ─── Schriften ───────────────────────────────────────────────────────────── */
@font-face {
  font-family: "Syne";
  src: url("assets/fonts/syne-var.woff2") format("woff2-variations");
  font-weight: 400 800;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: "Petrona";
  src: url("assets/fonts/petrona-var.woff2") format("woff2-variations");
  font-weight: 300 700;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: "Petrona";
  src: url("assets/fonts/petrona-italic-var.woff2") format("woff2-variations");
  font-weight: 400;
  font-display: swap;
  font-style: italic;
}

/* ─── Marken ──────────────────────────────────────────────────────────────── */
:root {
  --paper:      #F4F3DC;
  --leaf:       #FAF8EA;
  --ink:        #0B0B0A;
  --ink-soft:   #57544A;
  --rule:       #C9C6AC;
  --rule-soft:  #DEDBC4;
  --neon:       #FF6C02;
  --rojo:       #C63B29;
  --night:      #03170E;
  --night-leaf: #0A2417;
  --night-rule: #23392E;

  --display: "Syne", ui-sans-serif, system-ui, sans-serif;
  --text: "Petrona", Georgia, "Times New Roman", serif;

  --gutter: clamp(1.25rem, 5vw, 3rem);
  --measure: 66ch;
  --band: clamp(4.5rem, 9vw, 8rem);

  --lift: 0 2px 3px rgba(11, 11, 10, .05), 0 10px 26px -12px rgba(11, 11, 10, .28);
  --ease: cubic-bezier(.16, 1, .3, 1);

  /* Lageplan */
  --map-land: #F4F3DC; --map-water: #DCE4D6; --map-coast: #B6C2AE;
  --map-road: #CFCCB4; --map-hi: #FF6C02; --map-sea-label: #9FB098;
  --map-label: #57544A; --map-pin: #0B0B0A; --map-pin-ring: #F4F3DC;
}

/* ─── Grundlagen ──────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--text);
  font-size: clamp(1rem, .96rem + .2vw, 1.0625rem);
  font-weight: 400;
  line-height: 1.62;
  font-variant-numeric: lining-nums tabular-nums;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -.03em;
  text-wrap: balance;
  margin: 0;
}
h1 { font-size: clamp(2.15rem, 1.1rem + 5.2vw, 5.25rem); font-weight: 800; }
h2 { font-size: clamp(1.7rem, 1.1rem + 2.9vw, 3.25rem); }
h3 { font-size: clamp(1.15rem, 1rem + .7vw, 1.5rem); letter-spacing: -.02em; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { text-decoration-color: var(--rojo); }
img, svg { max-width: 100%; height: auto; display: block; }
ul { margin: 0; padding: 0; list-style: none; }
strong, b { font-weight: 600; }

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
  border-radius: 1px;
}
.night :focus-visible { outline-color: var(--neon); }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--ink); color: var(--paper);
  padding: .7rem 1.1rem; font-family: var(--display); font-size: .85rem;
}
.skip:focus { left: .5rem; top: .5rem; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

.wrap { width: min(74rem, 100%); margin-inline: auto; padding-inline: var(--gutter); }
.wrap-narrow { width: min(50rem, 100%); margin-inline: auto; padding-inline: var(--gutter); }

.lead {
  font-size: clamp(1.1rem, 1.02rem + .42vw, 1.375rem);
  line-height: 1.5;
  max-width: 34ch;
  color: var(--ink);
}
.prose { max-width: var(--measure); }
.muted { color: var(--ink-soft); }

/* Kleinschrift läuft in der Displayschrift, weit gesperrt — wie der Agatsatz
   einer gedruckten Karte. Nie als Kicker über einer Überschrift. */
.agate {
  font-family: var(--display);
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* ─── Die Marke ───────────────────────────────────────────────────────────── */
.mark { display: block; fill: currentColor; }
.logo-row { height: clamp(1.15rem, .9rem + 1.05vw, 1.6rem); width: auto; }
.logo-stack { height: 5rem; width: auto; }

/* Der einzige gestaltete Moment: der gekastelte R dreht sich in Position.
   Nur die Gruppe .pivot wird gedreht; sie traegt selbst kein transform-Attribut,
   denn eine CSS-Animation auf transform wuerde es ersatzlos ueberschreiben. */
.spin { transform-box: fill-box; transform-origin: 50% 50%; }
.js .spin { animation: spin-home .62s var(--ease) both; }
@keyframes spin-home {
  from { transform: rotate(-32deg) scale(.86); }
  to   { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .js .spin { animation: none; }
}

/* ─── Vorschaustreifen von PixelUno ───────────────────────────────────────── */
/* Streifen und Kopf kleben zusammen, damit der Hinweis immer sichtbar bleibt,
   egal auf wie viele Zeilen er auf schmalen Geraeten umbricht. */
.topbar { position: sticky; top: 0; z-index: 50; }
.preview-bar {
  background: #5A3BC4;
  color: #fff;
  font-family: var(--display);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .045em;
  line-height: 1.35;
  text-align: center;
  padding: .45rem var(--gutter);
}
.preview-bar a { color: #fff; }

/* ─── Kopf ────────────────────────────────────────────────────────────────── */
.masthead {
  background: var(--leaf);
  border-bottom: 1px solid var(--rule);
}
.masthead-in {
  display: flex; align-items: center; gap: 1rem;
  min-height: 4rem;
}
.brand { display: inline-flex; align-items: center; color: var(--ink); text-decoration: none; }
.brand:hover { color: var(--rojo); }

.nav { margin-left: auto; display: flex; align-items: center; gap: clamp(1rem, 2.2vw, 1.9rem); }
.nav ul { display: flex; align-items: center; gap: clamp(.9rem, 2vw, 1.75rem); }
.nav a {
  font-family: var(--display); font-size: .82rem; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase;
  text-decoration: none; padding-block: .35rem;
  border-bottom: 2px solid transparent;
  transition: border-color .16s var(--ease), color .16s var(--ease);
}
.nav a:hover { border-bottom-color: var(--neon); }
.nav a[aria-current="page"] { border-bottom-color: var(--ink); }

.head-tools { display: flex; align-items: center; gap: .65rem; margin-left: auto; }
.nav + .head-tools { margin-left: clamp(.9rem, 2vw, 1.75rem); }
.head-tools .btn { white-space: nowrap; }

.langs { display: flex; align-items: center; gap: .1rem; flex: none; }
.langs a {
  font-family: var(--display); font-size: .72rem; font-weight: 700;
  letter-spacing: .08em; text-decoration: none;
  padding: .3rem .42rem; color: var(--ink-soft);
}
.langs a:hover { color: var(--ink); }
.langs a[aria-current="true"] { color: var(--ink); box-shadow: inset 0 -2px 0 var(--neon); }

.burger {
  display: none; align-items: center; justify-content: center;
  width: 2.6rem; height: 2.6rem; padding: 0;
  background: none; border: 1px solid var(--rule); color: inherit; cursor: pointer;
}
.burger svg { width: 1.15rem; height: 1.15rem; }
.burger .x { display: none; }
.burger[aria-expanded="true"] .m { display: none; }
.burger[aria-expanded="true"] .x { display: block; }

/* ─── Knöpfe ──────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 3rem; padding: .7rem 1.35rem;
  font-family: var(--display); font-size: .86rem; font-weight: 700;
  letter-spacing: .045em; text-transform: uppercase; text-decoration: none;
  border: 1.5px solid var(--ink); border-radius: 2px;
  background: var(--ink); color: var(--paper); cursor: pointer;
  overflow-wrap: break-word;
  transition: background .16s var(--ease), color .16s var(--ease),
              border-color .16s var(--ease), transform .16s var(--ease);
}
.btn:hover { background: var(--neon); border-color: var(--neon); color: var(--ink); }
.btn:active { transform: translateY(1px); }
.btn svg { width: 1em; height: 1em; flex: none; }

.btn-ghost { background: transparent; color: var(--ink); }
.btn-ghost:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }

.btn-sm { min-height: 2.5rem; padding: .45rem .9rem; font-size: .76rem; }

.night .btn { background: var(--neon); border-color: var(--neon); color: var(--night); }
.night .btn:hover { background: var(--paper); border-color: var(--paper); }
.night .btn-ghost { background: transparent; border-color: var(--paper); color: var(--paper); }
.night .btn-ghost:hover { background: var(--paper); color: var(--night); }

.btn-row { display: flex; flex-wrap: wrap; gap: .75rem; }

/* ─── Statuszeile ─────────────────────────────────────────────────────────── */
.status {
  display: inline-flex; align-items: baseline; gap: .55rem;
  font-family: var(--display); font-size: .78rem; font-weight: 600;
  letter-spacing: .07em; text-transform: uppercase;
}
.status .dot {
  width: .5rem; height: .5rem; border-radius: 50%;
  background: var(--ink-soft); align-self: center; flex: none;
}
.status.is-open .dot { background: var(--neon); }
.status .when { color: var(--ink-soft); letter-spacing: .05em; text-transform: none;
  font-family: var(--text); font-size: .95rem; font-weight: 400; }
.night .status .when { color: #A9BDAF; }

/* ─── Abschnitte und Linien ───────────────────────────────────────────────── */
.band { padding-block: var(--band); }
.night + .night { padding-top: 0; }
.band-rule { border-top: 1px solid var(--rule); }

.night {
  background: var(--night);
  color: var(--paper);
  --rule: var(--night-rule);
  --rule-soft: #16281E;
  --ink: #F4F3DC;
  --ink-soft: #A9BDAF;
  --leaf: var(--night-leaf);
  --rojo: var(--neon);
}

.head-block { margin-bottom: clamp(2rem, 4vw, 3.25rem); }
.head-block p { max-width: 46ch; color: var(--ink-soft); margin-top: .9rem; }
.head-block h2 + p { font-size: 1.0625rem; }

/* Haarlinie, die sich beim Erscheinen zeichnet. */
.rule-draw { height: 1px; background: var(--rule); transform-origin: left center; }
.js .rule-draw.reveal { transform: scaleX(0); }
.js .rule-draw.in { transform: scaleX(1); transition: transform .8s var(--ease); }

.js .reveal { opacity: 0; transform: translateY(14px); }
.js .reveal.in { opacity: 1; transform: none; transition: opacity .6s var(--ease), transform .6s var(--ease); }
@media (prefers-reduced-motion: reduce) {
  .js .reveal, .js .rule-draw.reveal { opacity: 1; transform: none; transition: none; }
}

/* ─── Bild im Rahmen, wie eine Abbildung im Satz ──────────────────────────── */
figure { margin: 0; }
.plate img { border: 1px solid var(--rule); background: var(--leaf); width: 100%; }
.plate figcaption {
  margin-top: .7rem; font-size: .875rem; line-height: 1.45; color: var(--ink-soft);
  max-width: 40ch;
}

/* ─── Titelblock ──────────────────────────────────────────────────────────── */
.opener { padding-block: clamp(2.75rem, 6vw, 5rem) clamp(3rem, 6vw, 5rem); }
.opener-grid {
  display: grid; gap: clamp(2rem, 5vw, 4rem);
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}
.opener h1 { font-size: clamp(2.15rem, .95rem + 4.3vw, 4.5rem); margin-bottom: 1.4rem; }
.opener .lead { margin-bottom: 1.75rem; }
.opener .btn-row { margin-bottom: 1.5rem; }
.opener-facts {
  display: grid; gap: .1rem .5rem; margin-top: 1.75rem;
  padding-top: 1.25rem; border-top: 1px solid var(--rule);
  font-size: .9375rem;
}
.opener-facts dt { font-family: var(--display); font-size: .72rem; font-weight: 700;
  letter-spacing: .11em; text-transform: uppercase; color: var(--ink-soft); }
.opener-facts dd { margin: 0 0 .85rem; }
.opener-facts dd:last-of-type { margin-bottom: 0; }

@media (min-width: 60rem) {
  .opener-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, .8fr); align-items: center; }
  .opener-facts { grid-template-columns: max-content 1fr; align-items: baseline; gap: .55rem 1.6rem; }
  .opener-facts dd { margin-bottom: .35rem; }
}

/* ─── Seitenkopf der Unterseiten ──────────────────────────────────────────── */
.page-head { padding-block: clamp(2.25rem, 5vw, 4rem) clamp(1.75rem, 3vw, 2.75rem); }
.page-head h1 { margin-bottom: 1rem; }
.page-head .lead { max-width: 52ch; }

/* ─── Kartenpositionen: Zeilen, keine Kacheln ─────────────────────────────── */
.menu-section + .menu-section { margin-top: clamp(3.25rem, 6vw, 5rem); }
.menu-section > h2 { margin-bottom: .6rem; }
.menu-section > .section-lead { color: var(--ink-soft); max-width: 52ch; margin-bottom: 1.6rem; }

.dishes { border-top: 1px solid var(--ink); }
.dish {
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content;
  column-gap: 1.25rem; row-gap: .3rem;
  padding-block: 1.1rem;
  border-bottom: 1px solid var(--rule-soft);
}
.dish-name {
  font-family: var(--display); font-size: 1.0625rem; font-weight: 700;
  letter-spacing: -.012em; line-height: 1.25; margin: 0;
}
.dish-unit { font-family: var(--text); font-weight: 400; font-size: .875rem; color: var(--ink-soft); }
.dish-price {
  font-family: var(--display); font-size: 1.0625rem; font-weight: 700;
  white-space: nowrap; text-align: right; align-self: start; padding-top: .05rem;
}
.dish-price small { display: block; font-family: var(--text); font-size: .78rem;
  font-weight: 400; color: var(--ink-soft); letter-spacing: 0; }
.dish-desc { grid-column: 1 / -1; margin: 0; font-size: .9375rem; line-height: 1.5;
  color: var(--ink-soft); max-width: 62ch; }
.dish-option {
  grid-column: 1 / -1; margin: .45rem 0 0;
  font-family: var(--display); font-size: .74rem; font-weight: 600; letter-spacing: .04em;
  display: inline-block; justify-self: start;
  background: var(--neon); color: #0B0B0A; padding: .22rem .5rem;
}
.dish-tags { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .5rem; }
.tag {
  font-family: var(--display); font-size: .66rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  border: 1px solid var(--rule); padding: .16rem .42rem; color: var(--ink-soft);
}
.dish.is-signature .dish-name::after {
  content: ""; display: inline-block; width: .42em; height: .42em;
  margin-left: .5em; background: var(--neon); vertical-align: .1em;
}

/* Kompakte Abschnitte: Extras, Spirituosen, Erfrischungen. */
.dishes.compact { columns: 1; }
.dishes.compact .dish { padding-block: .62rem; break-inside: avoid; }
.dishes.compact .dish-name { font-size: .98rem; font-weight: 600; }
.dishes.compact .dish-price { font-size: .98rem; font-weight: 600; }
@media (min-width: 46rem) {
  .dishes.compact { columns: 2; column-gap: clamp(2rem, 5vw, 4rem); }
}

.group-name {
  font-family: var(--display); font-size: .74rem; font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase; color: var(--ink-soft);
  margin: 1.6rem 0 .25rem; break-after: avoid;
}
.dishes.compact .group-name:first-child { margin-top: 0; }

/* Kombipreis-Tafel */
.tiers {
  display: flex; flex-wrap: wrap; gap: .5rem 1.75rem;
  border: 1.5px solid var(--ink); padding: .9rem 1.1rem; margin-bottom: 1.6rem;
}
.tiers div { display: flex; align-items: baseline; gap: .55rem; }
.tiers dt { font-family: var(--display); font-size: .74rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; }
.tiers dd { margin: 0; font-size: .95rem; }
.tiers dd b { font-weight: 600; }

/* ─── Kartenindex, klebend ────────────────────────────────────────────────── */
.index-bar {
  position: sticky; top: var(--top, 5.9rem); z-index: 20;
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
.night .index-bar { background: var(--night); }
.index-scroll { display: flex; align-items: center; gap: .25rem; overflow-x: auto;
  scrollbar-width: none; padding-block: .55rem; }
.index-scroll::-webkit-scrollbar { display: none; }
.index-scroll a {
  flex: none; display: inline-flex; align-items: center; gap: .45rem;
  font-family: var(--display); font-size: .76rem; font-weight: 600;
  letter-spacing: .05em; text-transform: uppercase; text-decoration: none;
  padding: .4rem .6rem; white-space: nowrap; color: var(--ink-soft);
  border-bottom: 2px solid transparent;
}
.index-scroll a:hover { color: var(--ink); }
.index-scroll a.is-here { color: var(--ink); border-bottom-color: var(--neon); }
.index-scroll .mark { width: .68em; height: .68em; opacity: 0; transition: opacity .16s; }
.index-scroll a.is-here .mark { opacity: 1; }

.filters { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 2rem; }
.filters button {
  font-family: var(--display); font-size: .74rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  background: transparent; color: var(--ink-soft); cursor: pointer;
  border: 1px solid var(--rule); border-radius: 2px; padding: .48rem .8rem;
  transition: color .16s var(--ease), border-color .16s var(--ease), background .16s var(--ease);
}
.filters button:hover { color: var(--ink); border-color: var(--ink); }
.filters button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.filter-empty { padding: 2rem 0; color: var(--ink-soft); }

/* ─── Der Tagesablauf ─────────────────────────────────────────────────────── */
.day { display: grid; gap: 0; }
.day-part {
  display: grid; gap: .5rem 1.75rem; padding-block: clamp(1.5rem, 3vw, 2.25rem);
  border-top: 1px solid var(--rule);
  grid-template-columns: minmax(0, 1fr);
}
.day-part:last-child { border-bottom: 1px solid var(--rule); }
.day-time {
  font-family: var(--display); font-size: clamp(1.75rem, 1.2rem + 2vw, 2.75rem);
  font-weight: 800; letter-spacing: -.035em; line-height: 1;
  color: var(--neon); -webkit-text-stroke: .5px var(--ink);
}
.day-part p { color: var(--ink-soft); max-width: 56ch; margin: 0; }
.day-part h3 { margin-bottom: .35rem; }
@media (min-width: 48rem) {
  .day-part { grid-template-columns: minmax(9.5rem, max-content) minmax(0, 1fr); align-items: start; }
  .day-body { display: grid; grid-template-columns: minmax(0, 13rem) minmax(0, 1fr); gap: .5rem 2.5rem; }
}

/* ─── Das Manifest ────────────────────────────────────────────────────────── */
.manifesto p {
  font-family: var(--display);
  font-size: clamp(1.35rem, 1rem + 1.8vw, 2.15rem);
  font-weight: 600; line-height: 1.18; letter-spacing: -.028em;
  margin-bottom: .8em; max-width: 22ch;
}
/* Der Schlusssatz traegt die Akzentfarbe. Die Quellenzeile steht ausserhalb
   des Manifests und darf hier nicht hineinrutschen. */
.manifesto > p:last-of-type { color: var(--rojo); }
.manifesto .agate { color: var(--ink-soft); }
.manifesto-source { margin-top: 1.75rem; }

/* ─── Belegbare Zahlen ────────────────────────────────────────────────────── */
.facts { display: grid; gap: 0; }
.fact { padding-block: 1.5rem; border-top: 1px solid var(--rule); }
.fact:last-child { border-bottom: 1px solid var(--rule); }
.fact h3 { margin-bottom: .35rem; }
.fact p { color: var(--ink-soft); font-size: .9375rem; margin: 0; max-width: 52ch; }
@media (min-width: 48rem) {
  .fact { display: grid; grid-template-columns: minmax(0, 18rem) minmax(0, 1fr); gap: .4rem 2.5rem; }
}

/* ─── Gerichte-Vitrine auf der Startseite ─────────────────────────────────── */
.showcase { display: grid; gap: clamp(1.5rem, 3vw, 2.25rem); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 56rem) { .showcase { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.showcase figure { display: flex; flex-direction: column; }
.showcase figure img { border: 1px solid var(--rule); width: 100%;
  aspect-ratio: 1 / 1; object-fit: cover; }
.showcase .sc-head { display: grid; grid-template-columns: minmax(0, 1fr) max-content;
  gap: .5rem 1rem; align-items: baseline; margin-top: .8rem;
  padding-top: .55rem; border-top: 1px solid var(--rule); }
.showcase .sc-name, .showcase .sc-price {
  font-family: var(--display); font-weight: 700; font-size: 1rem;
  letter-spacing: -.01em; margin: 0; line-height: 1.25; }
.showcase .sc-price { text-align: right; white-space: nowrap; }
.showcase .sc-desc { font-size: .875rem; color: var(--ink-soft); line-height: 1.45; margin-top: .3rem; }

/* ─── Übergang ins Nachtband ──────────────────────────────────────────────── */
.night-open { padding-top: 0; }
.night-open .plate { margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.night-open .plate img { border-color: var(--night-rule); }
.split {
  display: grid; gap: clamp(2rem, 5vw, 4rem);
  grid-template-columns: minmax(0, 1fr); align-items: center;
}
@media (min-width: 58rem) {
  .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .split.split-narrow { grid-template-columns: minmax(0, .85fr) minmax(0, 1fr); }
}

/* ─── Reservierung: Einwilligung vor dem Fremd-iframe ─────────────────────── */
.consent {
  border: 1.5px solid var(--ink); background: var(--leaf);
  padding: clamp(1.5rem, 4vw, 2.5rem);
}
.consent h2 { font-size: clamp(1.25rem, 1.1rem + .8vw, 1.6rem); margin-bottom: .7rem; }
.consent p { color: var(--ink-soft); max-width: 58ch; font-size: .9375rem; }
.frame-wrap { border: 1.5px solid var(--ink); background: var(--leaf); }
.frame-wrap iframe { display: block; width: 100%; min-height: 34rem; border: 0; }

/* ─── Lageplan ────────────────────────────────────────────────────────────── */
.map { border: 1px solid var(--rule); background: var(--map-land); }
.map svg { width: 100%; height: auto; display: block; }

.contact-list { display: grid; gap: 0; }
.contact-list > div { padding-block: 1.35rem; border-top: 1px solid var(--rule); }
.contact-list > div:last-child { border-bottom: 1px solid var(--rule); }
.contact-list dt { font-family: var(--display); font-size: .72rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: .3rem; }
.contact-list dd { margin: 0; font-size: 1.0625rem; }
.contact-list a { text-decoration-color: var(--rule); }

.hours-table { width: 100%; border-collapse: collapse; font-size: .9375rem; }
.hours-table th, .hours-table td { text-align: left; padding: .42rem 0; font-weight: 400; }
.hours-table td { text-align: right; font-variant-numeric: tabular-nums; }
.hours-table tr + tr th, .hours-table tr + tr td { border-top: 1px solid var(--rule-soft); }
.hours-table .is-today th, .hours-table .is-today td { font-weight: 600; }
.hours-table .is-closed { color: var(--ink-soft); }

/* ─── Fuß ─────────────────────────────────────────────────────────────────── */
.site-foot { background: var(--night); color: var(--paper); padding-block: clamp(3rem, 6vw, 4.5rem) 0; }
.site-foot a { color: var(--paper); }
.site-foot a:hover { text-decoration-color: var(--neon); }
.foot-grid { display: grid; gap: 2.5rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 52rem) { .foot-grid { grid-template-columns: 1.2fr 1fr 1fr; } }
.foot-grid h2 { font-size: .74rem; font-weight: 700; letter-spacing: .13em;
  text-transform: uppercase; color: #A9BDAF; margin-bottom: .85rem; }
.foot-grid li + li { margin-top: .4rem; }
.foot-brand .logo-stack { height: 5.5rem; color: var(--paper); margin-bottom: 1.1rem; }
.foot-brand p { color: #A9BDAF; max-width: 30ch; font-size: .9375rem; }

/* Die Kachel der Kartenrückseite. */
.foot-tiles {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  display: flex; overflow: hidden;
  border-top: 1px solid var(--night-rule);
  color: var(--night-rule);
}
.foot-tiles .mark { flex: 0 0 auto; width: 2.9rem; height: auto; padding: .55rem; }
.foot-tiles .mark:nth-child(5n+3) { color: var(--neon); opacity: .5; }

.foot-legal {
  border-top: 1px solid var(--night-rule);
  padding-block: 1.15rem;
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.5rem;
  font-size: .84rem; color: #A9BDAF;
}
.foot-legal ul { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; }
.foot-legal .made { margin-left: auto; }
.foot-legal .made a { font-weight: 600; text-decoration-color: var(--neon); }
.foot-legal .heart { color: var(--neon); }

/* ─── Mobil ───────────────────────────────────────────────────────────────── */
@media (max-width: 61.9375rem) {
  /* Die geschlossene Schublade steht rechts ausserhalb des Bildes und wuerde
     sonst die Scrollbreite aufziehen. clip statt hidden, damit der klebende
     Kopf klebt. */
  html { overflow-x: clip; }
  .burger { display: inline-flex; }
  .nav {
    position: fixed; inset: 0 0 0 auto; width: min(21rem, 84vw);
    background: var(--leaf); border-left: 1px solid var(--rule);
    padding: 5.5rem var(--gutter) 2rem;
    transform: translateX(100%); visibility: hidden;
    transition: transform .28s var(--ease), visibility .28s;
    z-index: 70; overflow-y: auto;
  }
  .nav[data-open="true"] { transform: none; visibility: visible; }
  .no-js .nav { visibility: visible; }
  .nav { flex-direction: column; align-items: stretch; gap: 0; }
  .nav ul { flex-direction: column; align-items: stretch; gap: 0; }
  .nav .langs { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--rule); }
  .nav .langs a { font-size: .85rem; padding: .55rem .7rem; }
  .nav li + li { border-top: 1px solid var(--rule-soft); }
  .nav a { display: block; font-size: 1rem; padding-block: .95rem; border-bottom: 0; }
  .nav a[aria-current="page"] { color: var(--rojo); }
  .no-js .nav { position: static; width: auto; transform: none; padding: 0;
    background: none; border: 0; }
  .no-js .nav { flex-direction: row; flex-wrap: wrap; gap: .4rem 1rem; }
  .no-js .nav ul { flex-direction: row; flex-wrap: wrap; gap: .4rem 1rem; }
  .no-js .nav .langs { margin: 0; padding: 0; border-top: 0; }
  .no-js .nav li + li { border-top: 0; }
  .no-js .nav a { padding-block: .4rem; font-size: .82rem; }
  .no-js .burger { display: none; }
  .scrim {
    position: fixed; inset: 0; z-index: 65; background: rgba(11, 11, 10, .5);
    opacity: 0; pointer-events: none; transition: opacity .28s var(--ease);
  }
  .scrim[data-open="true"] { opacity: 1; pointer-events: auto; }
  body[data-locked="true"] { overflow: hidden; }
}
@media (min-width: 62rem) { .scrim { display: none; } }

/* Auf sehr schmalen Geraeten duerfen lange Woerter trennen, sonst schiebt
   ein deutsches Kompositum die ganze Seite zur Seite. Die Sprache steht am
   html-Element, also trennt der Browser richtig. */
@media (max-width: 26rem) {
  h1, h2 { hyphens: auto; overflow-wrap: break-word; }
}

@media (max-width: 34rem) {
  .btn-row .btn { flex: 1 1 100%; }
  /* Zwei Spalten auf 390 px lassen Name und Preis nicht nebeneinander. */
  .showcase .sc-head { grid-template-columns: 1fr; gap: .15rem; }
  .showcase .sc-price { text-align: left; }
}

/* ─── Druck: die Karte muss sauber auf Papier ─────────────────────────────── */
@media print {
  .preview-bar, .masthead, .index-bar, .filters, .site-foot, .btn-row,
  .scrim, .plate, .skip { display: none !important; }
  body { background: #fff; color: #000; font-size: 10.5pt; }
  .band { padding-block: 0; }
  .dishes { columns: 2; column-gap: 14mm; border-top: .5pt solid #000; }
  .dish { break-inside: avoid; padding-block: 2.5mm; border-bottom: .25pt solid #999; }
  .menu-section { break-before: auto; }
  .menu-section > h2 { break-after: avoid; }
  a[href^="http"]::after { content: ""; }
}

/* ─── Abschnittskopf der Karte mit Foto ───────────────────────────────────── */
.menu-head { display: grid; gap: 1.5rem; align-items: end; margin-bottom: 1.6rem; }
.menu-head .menu-head-text { align-self: end; }
.menu-head h2 { margin-bottom: .6rem; }
.menu-head .section-lead { color: var(--ink-soft); max-width: 46ch; margin: 0; }
.menu-head .plate img { aspect-ratio: 4 / 3; max-height: 14rem; width: 100%; object-fit: cover; }
@media (min-width: 52rem) {
  .menu-head { grid-template-columns: minmax(0, 1fr) minmax(0, 17rem); gap: 2.5rem; }
}