@charset "utf-8";
/* Nalai Sushi — „El Mook".
   Cremefarbener Druckbogen, Tinte, das Hausrot. Fotos liegen als Tafeln auf dem
   Papier, jedes Bauteil eines Rolls laeuft an einem Band aus dem Gericht heraus,
   und der Baukasten sitzt auf dem leichteren Bogen, der in der Mitte eingebunden
   ist. Spitze nur an Kanten, nie hinter Fliesstext. */

/* ---------- Schriften ---------- */
@font-face { font-family: "Zen Old Mincho"; src: url("fonts/zen-old-mincho-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Zen Old Mincho"; src: url("fonts/zen-old-mincho-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Zen Old Mincho"; src: url("fonts/zen-old-mincho-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Zen Kaku"; src: url("fonts/zen-kaku-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Zen Kaku"; src: url("fonts/zen-kaku-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Zen Kaku"; src: url("fonts/zen-kaku-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }

/* ---------- Token ---------- */
:root {
  --paper: #f2ebdf;
  --paper-2: #ece3d3;
  --tissue: #fbf8f2;
  --ink: #141010;
  --ink-2: #55483d;
  --ink-3: #6f6152;
  --red: #d70f0e;
  --red-deep: #9d0b0a;
  --rule: #cbbda6;
  --rule-soft: #ddd2be;
  --plate: #0d0b0b;
  --violet: #5b21b6;

  --serif: "Zen Old Mincho", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --sans: "Zen Kaku", "Hiragino Sans", "Segoe UI", system-ui, -apple-system, sans-serif;

  --wrap: 74rem;
  --gut: clamp(1.15rem, 4vw, 3rem);
  --s1: .35rem; --s2: .7rem; --s3: 1.1rem; --s4: 1.7rem;
  --s5: 2.6rem; --s6: 4rem; --s7: 6rem; --s8: 8.5rem;
  --strip: 2.15rem;

  /* Schriftleiter. Jede Groesse auf der Seite kommt aus dieser Leiter —
     verstreute Einzelwerte sind der Anfang davon, dass ein System zerfaellt. */
  --t-2xs: .62rem;
  --t-xs: .68rem;
  --t-s: .78rem;
  --t-sm: .85rem;
  --t-md: .94rem;
  --t-base: clamp(1rem, .96rem + .2vw, 1.075rem);
  --t-lg: 1.12rem;
  --t-xl: 1.35rem;
  --t-2xl: 1.5rem;

  /* Anzeigegroessen, alle mitwachsend. */
  --d-sm: 2rem;
  --d-md: 2.5rem;
  --d-lead: clamp(1.06rem, 1rem + .35vw, 1.24rem);
  --d-h3: clamp(1.08rem, .98rem + .45vw, 1.28rem);
  --d-coord: clamp(1.15rem, 1rem + .6vw, 1.45rem);
  --d-quote: clamp(1.2rem, 1rem + 1vw, 1.7rem);
  --d-h2: clamp(1.45rem, 1.05rem + 1.5vw, 2.15rem);
  --d-num: clamp(2rem, 1.4rem + 2vw, 2.9rem);
  --d-price: clamp(2.4rem, 1.4rem + 3.4vw, 3.7rem);
  --d-h1: clamp(2.2rem, 1.1rem + 4.4vw, 4.25rem);
  --d-cover: clamp(2.5rem, 1rem + 6.2vw, 5.1rem);

  /* Farben, die bisher als Einzelwerte im Blatt standen. */
  --white: #fff;
  --black: #000;
  --green: #3a6b32;
  --on-dark: #b3a79c;
  --on-dark-label: #9d9086;
  --on-dark-rule: #4b423b;
  --on-dark-rule-2: #352d28;

  --ease: cubic-bezier(.16, .84, .3, 1);
}

/* ---------- Grundlage ---------- */
*, *::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: 400 clamp(1rem, .96rem + .2vw, 1.075rem)/1.68 var(--sans);
  letter-spacing: .004em;
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
}

img, svg { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
:where(a):focus-visible, :where(button):focus-visible,
:where(input):focus-visible, :where(summary):focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 3px;
  border-radius: 2px;
}
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: fixed; left: var(--gut); top: .4rem; z-index: 80;
  transform: translateY(-160%); background: var(--ink); color: var(--paper);
  padding: .6rem 1rem; font: 500 var(--t-sm)/1 var(--sans); text-decoration: none;
  transition: transform .2s var(--ease);
}
.skip:focus { transform: none; }

/* ---------- PixelUno-Streifen ---------- */
/* Streifen und Kopfleiste kleben als ein Block. So braucht die Kopfleiste keine
   angenommene Streifenhoehe — auf dem Handy laeuft der Hinweis ueber zwei Zeilen
   und nichts verrutscht. */
.topbar { position: sticky; top: 0; z-index: 70; }
.preview-strip {
  background: var(--violet); color: var(--white);
  display: grid; place-items: center;
  padding: .42rem var(--gut);
}
.preview-strip p {
  margin: 0; text-align: center;
  font: 500 var(--t-xs)/1.3 var(--sans); letter-spacing: .035em;
}

/* ---------- Kopf ---------- */
.masthead-bar {
  background: color-mix(in srgb, var(--paper) 94%, transparent);
  backdrop-filter: blur(9px);
  border-bottom: 1px solid var(--rule);
}
.masthead-bar__in {
  max-width: var(--wrap); margin: 0 auto; padding: .7rem var(--gut);
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--s3);
}
.brand { display: block; text-decoration: none; }
.brand__mark { width: clamp(7.4rem, 13vw, 10.4rem); height: auto; }
.brand__sub {
  display: block; margin-top: .2rem;
  font: 500 var(--t-2xs)/1 var(--sans); letter-spacing: .28em;
  text-transform: uppercase; color: var(--ink-3);
}
.sitenav { display: contents; }
.sitenav__list, .langs { list-style: none; margin: 0; padding: 0; display: flex; }
.sitenav__list { gap: clamp(.8rem, 1.7vw, 1.55rem); justify-content: center; }
.sitenav__list a {
  text-decoration: none; font: 500 var(--t-s)/1 var(--sans);
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2);
  padding: .45rem 0; display: block; position: relative;
}
.sitenav__list a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: .1rem;
  height: 1px; background: var(--red); transition: right .3s var(--ease);
}
.sitenav__list a:hover, .sitenav__list a[aria-current] { color: var(--ink); }
.sitenav__list a:hover::after, .sitenav__list a[aria-current]::after { right: 0; }
.langs { gap: .55rem; align-items: center; }
.langs a {
  display: inline-flex; align-items: center; min-height: 2rem;
  text-decoration: none; font: 500 var(--t-xs)/1 var(--sans); letter-spacing: .1em;
  color: var(--ink-3); padding: .3rem .25rem;
}
.langs a[aria-current] { color: var(--ink); border-bottom: 1px solid var(--red); }
.folio {
  margin: 0; grid-column: 3; font: 500 var(--t-xs)/1 var(--sans);
  letter-spacing: .15em; text-transform: uppercase; color: var(--ink-3);
  white-space: nowrap;
}
.folio span:first-child { display: block; font-size: var(--t-2xs); margin-bottom: .2rem; }
.folio__of { text-transform: none; letter-spacing: .06em; }
.burger { display: none; }

@media (max-width: 60em) {
  .masthead-bar__in { grid-template-columns: 1fr auto; }
  .folio { display: none; }
  .burger {
    display: inline-flex; align-items: center; gap: .5rem; min-height: 2.75rem;
    background: none; border: 1px solid var(--rule); color: var(--ink);
    padding: .65rem .85rem; font: 500 var(--t-xs)/1 var(--sans);
    letter-spacing: .12em; text-transform: uppercase; cursor: pointer;
  }
  .burger__bars, .burger__bars::before, .burger__bars::after {
    display: block; width: 1.05rem; height: 1px; background: currentColor;
  }
  .burger__bars { position: relative; }
  .burger__bars::before, .burger__bars::after { content: ""; position: absolute; left: 0; }
  .burger__bars::before { top: -5px; }
  .burger__bars::after { top: 5px; }
  /* Ueber grid-template-rows statt max-height: das laeuft ohne Layout-Ruckeln
     und braucht keine geratene Hoehenobergrenze. */
  /* visibility ist eine Sprungeigenschaft: sie darf nicht mitlaufen, sondern
     beim Oeffnen sofort und beim Schliessen erst nach dem Zusammenfahren
     umschalten. Sonst bleibt das geoeffnete Menue fuer Tastatur und
     Screenreader unsichtbar. */
  .sitenav {
    display: grid; grid-column: 1 / -1;
    grid-template-rows: 0fr; visibility: hidden;
    transition: grid-template-rows .35s var(--ease), visibility 0s linear .35s;
  }
  .sitenav > * { overflow: hidden; min-height: 0; }
  .sitenav.is-open {
    grid-template-rows: 1fr auto; visibility: visible;
    transition: grid-template-rows .35s var(--ease), visibility 0s;
  }
  .sitenav__list {
    flex-direction: column; gap: 0; padding-top: .6rem; border-top: 1px solid var(--rule-soft);
    margin-top: .6rem;
  }
  .sitenav__list a { padding: .82rem 0; font-size: var(--t-md); letter-spacing: .06em; }
  .sitenav__list li + li { border-top: 1px solid var(--rule-soft); }
  .langs { padding: .9rem 0 .4rem; }
  .langs a { font-size: var(--t-sm); padding: .4rem .5rem; }
}

/* ---------- Typografie ---------- */
h1, h2, h3 { font-family: var(--serif); font-weight: 600; letter-spacing: -.008em; }
h1 {
  font-size: var(--d-h1);
  line-height: 1.06; margin: 0 0 var(--s3); text-wrap: balance;
}
h2 { font-size: var(--d-h2); line-height: 1.16; margin: 0 0 var(--s3); text-wrap: balance; }
h3 { font-size: var(--d-h3); line-height: 1.28; margin: 0 0 var(--s2); font-weight: 600; }
p { margin: 0 0 var(--s3); }
p:last-child { margin-bottom: 0; }

.lead {
  font-size: var(--d-lead);
  line-height: 1.62; color: var(--ink-2); max-width: 46ch; margin-bottom: var(--s4);
}
.fine { font-size: var(--t-sm); line-height: 1.6; color: var(--ink-3); max-width: 62ch; }
.fine--flag {
  border-left: 1px solid var(--red); padding-left: .8rem;
}
.quote {
  font-family: var(--serif); font-weight: 500;
  font-size: var(--d-quote); line-height: 1.35;
  color: var(--red-deep); max-width: 22ch; margin: var(--s4) 0 var(--s3);
}
.tagline {
  font: 500 var(--t-xs)/1 var(--sans); letter-spacing: .16em; text-transform: uppercase;
  color: var(--red-deep); margin: 0 0 var(--s2);
}

.h-rule {
  display: flex; align-items: baseline; gap: var(--s3);
  margin-bottom: var(--s4);
}
.h-rule::after {
  content: ""; flex: 1; height: 1px; background: var(--rule);
  transform: translateY(-.35em);
}

/* ---------- Raster ---------- */
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gut); }
.narrow { max-width: 46rem; }
.band { padding: var(--s7) 0; border-top: 1px solid var(--rule-soft); }
.band:first-of-type { border-top: 0; }
.page-head { padding: var(--s7) 0 var(--s5); }
.page-head h1 { max-width: 18ch; }

/* ---------- Titelbogen ---------- */
.cover {
  max-width: var(--wrap); margin: 0 auto; padding: var(--s6) var(--gut) var(--s7);
  display: grid; gap: var(--s6) var(--s6); align-items: center;
}
@media (min-width: 62em) {
  .cover {
    grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr);
    padding-block: var(--s7) calc(var(--s8) + 2rem);
  }
}
.cover__h { font-size: var(--d-cover); max-width: 13ch; }
.cover__lead { font-size: var(--d-lead); max-width: 40ch; color: var(--ink-2); }
.cover__where { margin-top: var(--s4); }
.cover__where a {
  font: 500 var(--t-sm)/1.5 var(--sans); letter-spacing: .09em; text-transform: uppercase;
  color: var(--ink-3); text-decoration: none; border-bottom: 1px solid var(--rule);
  padding-bottom: .18rem;
}
.cover__where a:hover { color: var(--ink); border-color: var(--red); }

/* Tafel und Bildunterschrift wie im Mook: die Legende schiebt sich ueber die
   Kante der Tafel auf das Papier und benennt jedes Teil des Gerichts. */
.cover__coord { position: relative; }
.cover__legend {
  background: var(--paper); border: 1px solid var(--ink);
  padding: var(--s3) var(--s4) var(--s4);
}
.cover__dish {
  font-family: var(--serif); font-weight: 600; font-size: var(--t-lg); line-height: 1.3;
  margin: 0 0 var(--s2); display: flex; flex-wrap: wrap; gap: .2rem .7rem; align-items: baseline;
}
.cover__price { font-family: var(--sans); font-weight: 500; font-size: var(--t-md); color: var(--red-deep); }
.cover__legend .ribbons { margin-top: 0; }
.cover__legend-link { margin-top: var(--s3); }
@media (min-width: 62em) {
  .cover__legend {
    position: absolute; z-index: 3; left: -3.2rem; bottom: -3.4rem; width: 21.5rem;
    box-shadow: 0 22px 44px -30px rgba(20, 16, 16, .5);
  }
}
@media (max-width: 61.99em) {
  .cover__legend { position: relative; z-index: 3; margin: -1.6rem 1rem 0; }
}

/* ---------- Zustand ---------- */
.status {
  display: flex; align-items: flex-start; gap: .6rem;
  font: 500 var(--t-sm)/1.5 var(--sans); color: var(--ink-2);
  margin: 0 0 var(--s4); max-width: 42ch;
}
.status__dot {
  width: .52rem; height: .52rem; border-radius: 50%;
  background: var(--ink-3); flex: none; margin-top: .48rem;
}
.status.is-open .status__dot { background: var(--green-open); }
.status.is-open .status__text strong { color: var(--green-open); }
.status.is-closed .status__dot { background: var(--red); }

/* ---------- Schaltflaechen ---------- */
.actions { display: flex; flex-wrap: wrap; gap: .7rem; margin: 0; }
@media (max-width: 32em) {
  .actions { display: grid; gap: .6rem; }
  .actions .btn { justify-content: center; }
}
.btn {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .84rem 1.35rem; text-decoration: none;
  font: 500 var(--t-sm)/1.15 var(--sans); letter-spacing: .09em; text-transform: uppercase;
  border: 1px solid transparent; cursor: pointer; background: none; color: var(--ink);
  transition: background .22s var(--ease), color .22s var(--ease),
              border-color .22s var(--ease), transform .22s var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn--solid { background: var(--red); color: var(--white); border-color: var(--red); }
.btn--solid:hover { background: var(--red-deep); border-color: var(--red-deep); }
.btn--line { border-color: var(--ink); }
.btn--line:hover { background: var(--ink); color: var(--paper); }
.btn--ghost { border-color: var(--rule); color: var(--ink-2); }
.btn--ghost:hover { border-color: var(--ink); color: var(--ink); }
.btn__sub { font-size: .78em; letter-spacing: .03em; text-transform: none; color: inherit; opacity: .72; }
.btn[disabled] { opacity: .42; cursor: not-allowed; }
.btn[disabled]:active { transform: none; }

.link-arrow {
  display: inline-flex; align-items: center; gap: .45rem; min-height: 2rem;
  font: 500 var(--t-sm)/1.4 var(--sans); letter-spacing: .09em; text-transform: uppercase;
  text-decoration: none; color: var(--ink); border-bottom: 1px solid var(--red);
  padding-bottom: .22rem;
}
.link-arrow::after { content: "→"; transition: transform .25s var(--ease); }
.link-arrow:hover::after { transform: translateX(.28rem); }
.more { margin-top: var(--s5); }

/* ---------- Tafeln ---------- */
.plate { margin: 0; position: relative; }
.plate__frame {
  display: block; background: var(--plate);
  border: 1px solid var(--ink); position: relative;
  box-shadow: 0 14px 34px -22px rgba(20, 16, 16, .55);
}
.plate__frame::after {
  content: ""; position: absolute; inset: 5px; border: 1px solid rgba(242, 235, 223, .13);
  pointer-events: none;
}
.plate__no {
  position: absolute; z-index: 2; top: -.65rem; left: -.55rem;
  background: var(--paper); color: var(--ink-3);
  font: 500 var(--t-2xs)/1 var(--sans); letter-spacing: .16em;
  padding: .3rem .5rem; border: 1px solid var(--rule);
}
.plate__cap {
  margin-top: .7rem; font: 400 var(--t-s)/1.5 var(--sans); color: var(--ink-3);
  max-width: 40ch;
}
.plate--cover .plate__frame { box-shadow: 0 26px 60px -34px rgba(20, 16, 16, .62); }
.plate--wide img { width: 100%; }

/* ---------- Baender ---------- */
.ribbons {
  list-style: none; margin: var(--s3) 0 0; padding: 0; display: grid; gap: .5rem;
}
.ribbon {
  display: grid; grid-template-columns: auto 1fr; align-items: center;
  gap: .1rem .7rem; font-size: var(--t-md); line-height: 1.4;
}
/* Der Wimpel: Tintenkontur, Papierfuellung, eingekerbte Enden. Als
   border-image gestreckt — so bleiben die Enden bei jeder Beschriftungslaenge
   scharf und die Mitte waechst mit dem Wort. */
.ribbon__band {
  display: inline-flex; align-items: center; justify-content: center;
  border-style: solid; border-width: 1px 15px;
  border-image: url("marks/ribbon.svg") 1 15 fill / 1px 15px / 0 stretch;
  min-width: 5.6rem; height: 1.55rem; padding: 0 .1rem;
  font: 500 var(--t-2xs)/1 var(--sans); letter-spacing: .15em;
  text-transform: uppercase; color: var(--ink-2); white-space: nowrap;
}
.ribbon__text { color: var(--ink); font-weight: 500; }

/* Die eine gestaltete Bewegung: der Wimpel entrollt sich beim Hereinscrollen
   aus seiner eigenen Mitte. Ueber die Scroll-Zeitleiste, nicht ueber ein
   Skript — ein Beobachter, der in gedrosselten Umgebungen nicht feuert, laesst
   sonst genau das unsichtbar, was die Seite erklaert. Wo die Zeitleiste fehlt,
   liegt das Band schlicht da. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .ribbon__band {
      animation: unfurl linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 100%;
    }
  }
}
@keyframes unfurl {
  from { clip-path: inset(0 46% 0 46%); }
  to { clip-path: inset(0 0 0 0); }
}

/* ---------- Coordinates (Startseite) ---------- */
.coords { display: grid; gap: var(--s5); }
@media (min-width: 46em) { .coords { grid-template-columns: repeat(3, 1fr); gap: var(--s4); } }
.coord {
  border-top: 2px solid var(--ink); padding-top: var(--s3);
}
.coord__name { font-size: var(--d-coord); margin-bottom: .2rem; }
.coord__price {
  font: 500 var(--t-md)/1 var(--sans); color: var(--red-deep); margin: 0 0 var(--s2);
}

/* ---------- Baender mit Spitze ---------- */
.band--sheet, .band--tissue, .page-head--tissue { background: var(--tissue); }
.band--sheet { position: relative; }
.band--sheet::before, .page-head--tissue::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 26px;
  background: url("marks/lace.svg") repeat-x top left / 240px 26px;
  opacity: .3; pointer-events: none;
}
.band--sheet { padding-top: calc(var(--s7) + 1.2rem); }
.band--tissue { padding-top: var(--s6); }
.page-head--tissue { position: relative; padding-top: calc(var(--s7) + 1.2rem); }
/* Der eingebundene Bogen endet unten mit derselben Borte, auf dem Kopf. */
.band--tissue::after {
  content: ""; position: absolute; inset: auto 0 0; height: 26px;
  background: url("marks/lace.svg") repeat-x bottom left / 240px 26px;
  transform: scaleY(-1); opacity: .3; pointer-events: none;
}
.band--sheet, .band--tissue { position: relative; }
.band--note { background: var(--paper-2); }
.band--close { background: var(--paper-2); }
.band--close .hours { margin-bottom: 0; }
.band--close .hours__row { border-bottom-color: var(--rule); }
.band--warn { background: var(--paper-2); }

/* ---------- Schnittmusterbogen ---------- */
.sheet-teaser { display: grid; gap: var(--s5); }
@media (min-width: 52em) { .sheet-teaser { grid-template-columns: 1fr 1fr; gap: var(--s6); align-items: center; } }
.sheet-teaser__steps {
  list-style: none; margin: 0; padding: 0; counter-reset: s;
  display: grid; gap: 0;
}
.sheet-teaser__steps li {
  display: flex; align-items: center; gap: var(--s3);
  padding: .95rem 0; border-bottom: 1px dashed var(--rule);
  font: 500 var(--t-md)/1.3 var(--sans);
}
.sheet-teaser__steps li:first-child { border-top: 1px dashed var(--rule); }
.step__no {
  width: 1.9rem; height: 1.9rem; flex: none; display: grid; place-items: center;
  border: 1px solid var(--red); border-radius: 50%; color: var(--red-deep);
  font: 500 var(--t-s)/1 var(--sans);
}

/* ---------- Aufteilungen ---------- */
.split { display: grid; gap: var(--s5); align-items: center; }
@media (min-width: 52em) {
  .split { grid-template-columns: 1fr 1fr; gap: var(--s6); }
  .split--flip .split__text { order: 2; }
}
.price-big {
  font-family: var(--serif); font-weight: 700;
  font-size: var(--d-price); line-height: 1;
  margin: 0 0 var(--s3); color: var(--ink);
}
.price-big span {
  display: block; font: 500 var(--t-s)/1.4 var(--sans); letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-3); margin-top: .5rem;
}

/* ---------- Vertrauen ---------- */
.scores { list-style: none; margin: 0 0 var(--s3); padding: 0; display: grid; gap: var(--s4); }
@media (min-width: 40em) { .scores { grid-template-columns: repeat(3, 1fr); } }
.scores li { border-top: 1px solid var(--rule); padding-top: var(--s2); }
.scores__n {
  display: block; font-family: var(--serif); font-weight: 700;
  font-size: var(--d-num); line-height: 1;
}
.scores__src { display: block; margin-top: .4rem; font-size: var(--t-sm); color: var(--ink-3); }

/* ---------- Wege ---------- */
.ways { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s5); }
@media (min-width: 46em) { .ways { grid-template-columns: repeat(3, 1fr); gap: var(--s4); } }
.way { border-top: 2px solid var(--ink); padding-top: var(--s3); }
.way p { color: var(--ink-2); font-size: var(--t-md); }

/* ---------- Karte / Gerichte ---------- */
.jump { margin: var(--s4) 0 var(--s3); }
.jump ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .45rem; }
.jump a {
  display: flex; align-items: center; min-height: 2.5rem;
  padding: .42rem .85rem; text-decoration: none;
  border: 1px solid var(--rule); font: 500 var(--t-s)/1.2 var(--sans);
  letter-spacing: .07em; color: var(--ink-2);
}
.jump a:hover { border-color: var(--ink); color: var(--ink); }

.dishes { list-style: none; margin: 0; padding: 0; }
/* Die Bildspalte ist immer da, auch wenn kein Foto vorliegt. Das haelt die
   Textbreite ueber alle Zeilen gleich und die Preise in einer Flucht — ein
   gefloatetes Bild reisst bei einzeiligen Gerichten sonst ein Loch auf. */
.dish {
  display: grid; grid-template-columns: minmax(0, 1fr) 5.6rem; gap: .4rem var(--s3);
  padding: var(--s4) 0; border-top: 1px solid var(--rule-soft);
  align-items: start;
}
.dish:first-child { border-top: 1px solid var(--ink); }
.dish__body { min-width: 0; grid-column: 1; grid-row: 1; }
.dish .plate--dish { grid-column: 1; grid-row: 2; width: 7.5rem; margin-top: var(--s2); }
@media (min-width: 34em) {
  .dish { grid-template-columns: minmax(0, 1fr) 7rem 5.6rem; gap: .4rem var(--s4); }
  .dish .plate--dish {
    grid-column: 2; grid-row: 1; width: 100%; margin: 0; align-self: center;
  }
}
@media (min-width: 52em) { .dish { grid-template-columns: minmax(0, 1fr) 9.5rem 5.6rem; } }
.dish .plate--dish .plate__frame { box-shadow: none; }
.dish__name { margin-bottom: .3rem; display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem; }
.dish__desc { color: var(--ink-2); font-size: var(--t-md); margin: 0; max-width: 58ch; }
.dish__price {
  margin: 0; font: 500 1rem/1.3 var(--sans); white-space: nowrap;
  font-variant-numeric: tabular-nums; text-align: right;
}
.tag {
  font: 500 var(--t-2xs)/1 var(--sans); letter-spacing: .13em; text-transform: uppercase;
  padding: .28rem .45rem; border: 1px solid currentColor; white-space: nowrap;
}
.tag--hot { color: var(--red-deep); }
.tag--veg { color: var(--green); }

/* ---------- Buffet ---------- */
.pills { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
@media (min-width: 40em) { .pills { grid-template-columns: repeat(2, 1fr); gap: .55rem var(--s4); } }
.pills li {
  display: flex; gap: .8rem; align-items: baseline;
  padding: .7rem 0; border-bottom: 1px dashed var(--rule);
}
.pill__n {
  font: 500 var(--t-s)/1 var(--sans); color: var(--red-deep); min-width: 1.6rem;
  font-variant-numeric: tabular-nums;
}
.bufrolls { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s4); }
@media (min-width: 46em) { .bufrolls { grid-template-columns: repeat(2, 1fr); gap: var(--s4) var(--s6); } }
@media (min-width: 68em) { .bufrolls { grid-template-columns: repeat(3, 1fr); } }
.bufroll { border-top: 1px solid var(--rule); padding-top: var(--s2); }

/* ---------- Menues ---------- */
.setmenus { display: grid; gap: var(--s5); }
@media (min-width: 52em) { .setmenus { grid-template-columns: repeat(3, 1fr); gap: var(--s4); } }
.setmenu { border-top: 2px solid var(--ink); padding-top: var(--s3); }
.setmenu__price {
  font-family: var(--serif); font-weight: 700; font-size: var(--d-sm); line-height: 1;
  margin: 0 0 var(--s3); color: var(--red-deep);
}
.setmenu__parts { margin: 0; }
.setmenu__parts dt {
  font: 500 var(--t-2xs)/1.5 var(--sans); letter-spacing: .15em; text-transform: uppercase;
  color: var(--ink-3); margin-top: var(--s3);
}
.setmenu__parts dd { margin: .2rem 0 0; font-size: var(--t-md); color: var(--ink); }

/* ---------- Aktionen ---------- */
.promos { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s5); }
@media (min-width: 46em) { .promos { grid-template-columns: repeat(3, 1fr); gap: var(--s4); } }
.promo { border-top: 1px solid var(--rule); padding-top: var(--s3); }
.promo--hi { border-top: 2px solid var(--red); }
.promo__days {
  font: 500 var(--t-xs)/1.4 var(--sans); letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-3); margin: 0 0 var(--s2); display: flex; gap: .5rem; align-items: baseline;
  flex-wrap: wrap;
}
.promo__days [data-today-flag] {
  background: var(--red); color: var(--white); padding: .2rem .42rem; letter-spacing: .1em;
}
.promo p:not(.promo__days):not(.fine) { color: var(--ink-2); font-size: var(--t-md); }

/* ---------- Tabellen ---------- */
.tablewrap { overflow-x: auto; margin: 0 0 var(--s3); }
table { border-collapse: collapse; width: 100%; font-size: var(--t-md); }
caption { text-align: left; }
th, td { text-align: left; padding: .78rem .9rem .78rem 0; border-bottom: 1px solid var(--rule-soft); vertical-align: top; }
thead th {
  font: 500 var(--t-xs)/1.4 var(--sans); letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-3); border-bottom: 1px solid var(--ink);
}
tbody th { font-weight: 500; }
.zones td { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---------- Kontakt ---------- */
.big-addr {
  font-family: var(--serif); font-style: normal; font-weight: 500;
  font-size: var(--d-quote); line-height: 1.35; margin: 0 0 var(--s4);
}
.hours { margin: 0 0 var(--s5); }
.hours__row {
  display: flex; justify-content: space-between; gap: var(--s3);
  padding: .58rem 0; border-bottom: 1px solid var(--rule-soft);
}
.hours dt { font-weight: 500; }
.hours dd { margin: 0; font-variant-numeric: tabular-nums; color: var(--ink-2); }
.hours__closed { color: var(--red-deep); }
.hours__row.is-today { border-bottom-color: var(--ink); }
.hours__row.is-today dt, .hours__row.is-today dd { color: var(--ink); font-weight: 500; }
.reach { margin: 0 0 var(--s4); }
.reach dt {
  font: 500 var(--t-2xs)/1.5 var(--sans); letter-spacing: .15em; text-transform: uppercase;
  color: var(--ink-3); margin-top: var(--s3);
}
.reach dd { margin: .2rem 0 0; }
.reach a { text-decoration: none; border-bottom: 1px solid var(--rule); }
.reach a:hover { border-color: var(--red); }
.map { margin: 0; }
.map__frame { display: block; border: 1px solid var(--ink); overflow: hidden; }
.map__svg { width: 100%; height: auto; display: block; }
.doclist { list-style: none; margin: 0 0 var(--s3); padding: 0; display: grid; gap: .8rem; justify-items: start; }
.chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.chips a {
  display: block; padding: .5rem .9rem; border: 1px solid var(--rule);
  text-decoration: none; font: 500 var(--t-s)/1.2 var(--sans); color: var(--ink-2);
}
.chips a:hover { border-color: var(--ink); color: var(--ink); }

/* ---------- Baukasten ---------- */
.sheet { display: grid; gap: var(--s5); }
@media (min-width: 62em) {
  .sheet { grid-template-columns: 1fr 20.5rem; gap: var(--s6); align-items: start; }
  .sheet__panel { position: sticky; top: 8.5rem; }
}
.sheet__steps { display: grid; gap: var(--s5); min-width: 0; }
.step {
  border: 0; border-top: 1px dashed var(--rule); margin: 0; padding: var(--s4) 0 0;
}
.step[data-skip="1"] { opacity: .48; }
.step__legend { display: flex; align-items: center; gap: .8rem; padding: 0; margin-bottom: .5rem; }
.step__legend:focus { outline: none; }
.step__name { font-family: var(--serif); font-weight: 600; font-size: var(--t-xl); }
.step__help { color: var(--ink-2); font-size: var(--t-md); margin: 0 0 var(--s3); max-width: 46ch; }
.step__err {
  margin: .7rem 0 0; font-size: var(--t-sm); color: var(--red-deep); min-height: 1.2em;
}
.step[hidden] { display: none; }

.opts { display: grid; gap: .4rem; }
@media (min-width: 34em) { .opts { grid-template-columns: repeat(2, 1fr); gap: .4rem .9rem; } }
@media (min-width: 62em) { .opts { grid-template-columns: repeat(2, 1fr); } }
.opt {
  position: relative;
  display: grid; grid-template-columns: 1.1rem 1fr auto; align-items: center; gap: .65rem;
  padding: .62rem .2rem; cursor: pointer; border-bottom: 1px solid transparent;
  transition: border-color .2s var(--ease);
}
.opt:hover { border-bottom-color: var(--rule); }
.opt input { position: absolute; opacity: 0; width: 1.1rem; height: 1.1rem; margin: 0; }
.opt__box {
  width: 1.1rem; height: 1.1rem; border: 1px solid var(--ink-3);
  display: grid; place-items: center; position: relative;
}
.opt input[type="radio"] + .opt__box { border-radius: 50%; }
.opt__box::after {
  content: ""; width: .52rem; height: .52rem; background: var(--red);
  transform: scale(0); transition: transform .18s var(--ease);
}
.opt input[type="radio"] + .opt__box::after { border-radius: 50%; }
.opt input:checked + .opt__box { border-color: var(--red); }
.opt input:checked + .opt__box::after { transform: scale(1); }
.opt input:focus-visible + .opt__box { outline: 2px solid var(--red); outline-offset: 3px; }
.opt input:disabled ~ .opt__label { color: var(--ink-3); }
.opt:has(input:disabled) { cursor: not-allowed; }
.opt__label { font-size: var(--t-md); line-height: 1.35; }
.opt__delta {
  font: 500 var(--t-s)/1 var(--sans); color: var(--red-deep); font-variant-numeric: tabular-nums;
}
.opt--skip { grid-column: 1 / -1; border-bottom: 1px dashed var(--rule); }

.ticket {
  background: var(--paper); border: 1px solid var(--ink); padding: var(--s4);
  position: relative;
}
.ticket::after {
  content: ""; position: absolute; inset: auto 0 -1px 0; height: 9px;
  background: url("marks/tear.svg") repeat-x bottom left / 140px 9px;
}
.ticket__kicker {
  font: 500 var(--t-2xs)/1.5 var(--sans); letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink-3); margin: 0 0 .3rem;
}
.ticket__total {
  font-family: var(--serif); font-weight: 700; font-size: var(--d-md); line-height: 1;
  margin: 0 0 var(--s3); font-variant-numeric: tabular-nums;
}
.ticket__lines { list-style: none; margin: 0 0 var(--s3); padding: 0; display: grid; gap: .35rem; }
.ticket__lines li {
  display: grid; grid-template-columns: 4.6rem 1fr auto; gap: .5rem;
  font-size: var(--t-sm); padding-bottom: .35rem; border-bottom: 1px dotted var(--rule);
}
.ticket__lines .ticket__empty { display: block; color: var(--ink-3); border: 0; }
.ticket__role {
  font: 500 var(--t-2xs)/1.6 var(--sans); letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-3);
}
.ticket__delta { font-variant-numeric: tabular-nums; color: var(--red-deep); font-size: var(--t-s); }
.ticket__open span:nth-child(2) { color: var(--ink-3); font-style: italic; }
.ticket__state {
  font: 500 var(--t-s)/1.5 var(--sans); color: var(--ink-3);
  margin: 0 0 var(--s2); padding-top: .55rem; border-top: 1px solid var(--rule);
}
.ticket__state.is-ready { color: #1f7a3d; }
.ticket__note { font-size: var(--t-s); line-height: 1.55; color: var(--ink-3); margin: 0; }
.ticket__acts { display: flex; flex-wrap: wrap; gap: .5rem; margin: var(--s3) 0 0; }
.ticket__acts .btn { padding: .62rem 1rem; font-size: var(--t-s); }
.ticket__order { margin: var(--s3) 0 0; }
.ticket__order .btn { width: 100%; justify-content: center; }

/* Auf dem Handy steht der Zettel am Ende der Seite. Damit der Preis beim
   Waehlen trotzdem sichtbar bleibt, laeuft er unten als schmale Leiste mit. */
.rollbar { display: none; }
@media (max-width: 61.99em) {
  .rollbar {
    position: fixed; inset: auto 0 0; z-index: 40;
    display: flex; justify-content: space-between; align-items: baseline;
    gap: .8rem; padding: .55rem var(--gut);
    background: color-mix(in srgb, var(--paper) 96%, transparent);
    backdrop-filter: blur(9px);
    border-top: 1px solid var(--ink);
  }
  .rollbar__label {
    font: 500 var(--t-2xs)/1.4 var(--sans); letter-spacing: .16em; text-transform: uppercase;
    color: var(--ink-3);
  }
  .rollbar__sum {
    font-family: var(--serif); font-weight: 700; font-size: var(--t-2xl); line-height: 1;
    font-variant-numeric: tabular-nums;
  }
  body:has(.rollbar) .foot { padding-bottom: 4.5rem; }
}
@media print { .rollbar { display: none !important; } }


/* ---------- Fuss ---------- */
.foot {
  background: var(--ink); color: var(--paper);
  padding: var(--s7) 0 var(--s4); margin-top: var(--s8);
}
.foot__in {
  max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gut);
  display: grid; gap: var(--s5);
}
@media (min-width: 46em) { .foot__in { grid-template-columns: 1.2fr 1fr 1fr; gap: var(--s6); } }
.foot h2 {
  font: 500 var(--t-xs)/1.5 var(--sans); letter-spacing: .18em; text-transform: uppercase;
  color: var(--on-dark-label); margin: 0 0 var(--s3);
}
.foot__addr { font-style: normal; line-height: 1.7; font-size: var(--t-md); }
.foot__lines { margin-top: var(--s3); font-size: var(--t-md); line-height: 1.7; }
.foot__lines a, .foot__list a { color: var(--paper); text-decoration: none; border-bottom: 1px solid var(--on-dark-rule); }
.foot__lines a:hover, .foot__list a:hover { border-color: var(--red); }
.foot__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .15rem; font-size: var(--t-md); }
.foot__list a, .foot__lines a, .foot__sig a {
  display: inline-flex; align-items: center; min-height: 2rem;
}
.foot__list + .foot__list { margin-top: var(--s3); }
.foot__base {
  max-width: var(--wrap); margin: var(--s6) auto 0; padding: var(--s3) var(--gut) 0;
  border-top: 1px solid var(--on-dark-rule-2); display: flex; align-items: center; gap: .75rem;
  flex-wrap: wrap;
}
.foot__signet { flex: none; }
.foot__sig { margin: 0; font-size: var(--t-sm); color: var(--on-dark); }
.foot__sig a { color: var(--paper); text-decoration: none; border-bottom: 1px solid var(--red); }
/* Das Hausrot erreicht auf der Tinte nur 3,6:1. Auf Dunkel eine hellere
   Stufe desselben Rots. */
.foot__heart { color: #ef6a66; }

/* ---------- Druck ---------- */
@media print {
  .preview-strip, .masthead-bar, .topbar, .foot, .sheet__steps, .ticket__acts,
  .ticket__order, .skip, .nojs { display: none !important; }
  body { padding-top: 0; background: #fff; color: #000; }
  .band, .page-head { padding: 0; border: 0; }
  .sheet { display: block; }
  .sheet__panel { position: static; }
  .ticket { border: 1px solid var(--black); }
  .ticket::after { display: none; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .7em; }
}