@charset "utf-8";
/* ===========================================================================
   TOKi Sushi — Designwelt „El Mon"

   Das Wappen der Marke ist ein Kamon aus vier Bögen. Dieser Bogen ist das
   Maß der Seite: der Rundbogen (--arch) an Bildern und Tafeln, der
   vierstrahlige Stern als einziges Ornament, die Vierfachsymmetrie im
   Argumenteblock.

   Die Farben sind an den echten Innenraumfotos gemessen, nicht geraten:
   68 % der gesättigten Bildpunkte des Saals liegen im Kupferbereich,
   11 % im Grün. Kupfer trägt also, Grün ist die zweite Stimme. Deshalb ist
   das hier keine schwarze Seite mit Goldlinien, sondern eine Seite mit zwei
   Gründen — dunklem Marmorgrün und hellem Kupferfeld.
   ======================================================================== */

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

/* ---------------------------------------------------------------- Marken */
:root {
  --ink:      #12160f;
  --ink-2:    #1a1f16;
  --ink-3:    #242a1e;
  --ink-4:    #333a2b;

  --copper:      #c08a4e;
  --copper-soft: #d8a877;
  --copper-deep: #8a5c2b;
  --paper:       #f2ead9;
  --paper-2:     #e4d8c0;

  --jade:  #2c3a29;
  --sage:  #93a681;
  --mint:  #bcd6bf;
  --hanko: #c4161c;    /* nur das eine Siegel in der Fusszeile */
  --hanko-lt: #ef7a66; /* Schaerfemarke - klart 6:1 auf dem dunklen Grund */
  --hanko-ink: #ffffff; /* die Kana im Siegel */

  /* Gehoert ausdruecklich NICHT zur Marke: der Vorschaustreifen von
     PixelUno. Als Token benannt, damit er nicht als Farbdrift durchgeht. */
  --pixeluno: #5b2bd9;
  --pixeluno-ink: #ffffff;

  --shade: #000000;    /* nur fuer Schatten, nie als Flaeche */

  --text:     #f1e9da;
  --text-dim: #b9af99;
  --on-paper:     #191d13;
  --on-paper-dim: #4d5340;

  --line:      color-mix(in srgb, var(--copper) 26%, transparent);
  --line-soft: color-mix(in srgb, var(--text) 12%, transparent);

  /* Der Bogen des Wappens als Maß */
  --arch: 999px;
  --r:  4px;
  --r2: 10px;
  --r-board: 24px;  /* Kopf der Preistafel */
  --r-seal:  14px;  /* das Hanko der Fusszeile */

  /* Tiefe gibt es nur auf hellem Grund; dunkle Flaechen bleiben glatt. */
  --elev-pill: 0 6px 22px -12px color-mix(in srgb, var(--shade) 90%, transparent);
  --elev-board: 0 18px 38px -26px color-mix(in srgb, var(--on-paper) 62%, transparent);

  /* Kleinschriftleiter. Vorher lagen hier vierzehn Einzelwerte zwischen
     0,67 und 0,97 rem; vier Stufen mit rund 1,09 Verhaeltnis reichen und
     machen die Abstufung ueberhaupt erst sichtbar. */
  --fs-micro: .72rem;   /* Versalien mit Sperrung: Marken, Spalten, Nummern */
  --fs-xs:    .8rem;    /* kleine Bedienelemente und Angaben */
  --fs-sm:    .875rem;  /* Sekundaertext, Bildunterschriften, Hinweise */
  --fs-md:    .95rem;   /* Fliesstext neben dem Grundmass */

  --s1: .25rem;  --s2: .5rem;   --s3: .75rem;  --s4: 1rem;
  --s5: 1.5rem;  --s6: 2rem;    --s7: 3rem;    --s8: 4rem;
  --s9: 6rem;    --s10: 8rem;

  --pad: clamp(1.15rem, 4.5vw, 3.5rem);
  --wide: 1280px;
  --read: 68ch;

  --strip-h: 2.25rem;
  --head-h: 4.5rem;

  --ease: cubic-bezier(.16, .84, .32, 1);
  --dur: .5s;
}

/* ------------------------------------------------------------------ Basis */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--strip-h) + var(--head-h) + 1rem);
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--text);
  font: 400 clamp(1rem, .96rem + .2vw, 1.09rem)/1.62 "Zen Kaku",
        system-ui, -apple-system, "Segoe UI", sans-serif;
  font-feature-settings: "kern" 1, "liga" 1;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; }
figure { margin: 0; }
img { height: auto; background: var(--ink-2); }

a { color: inherit; }
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 2px solid var(--copper-soft);
  outline-offset: 3px;
  border-radius: var(--r);
}

::selection { background: var(--copper); color: var(--ink); }

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

.skip {
  position: absolute; left: var(--s4); top: calc(var(--strip-h) + var(--s2));
  z-index: 90; transform: translateY(-200%);
  background: var(--copper); color: var(--ink);
  padding: .6rem 1rem; font-weight: 700; text-decoration: none;
  transition: transform .2s var(--ease);
}
.skip:focus { transform: none; }

/* ------------------------------------------------------------ Typografie */
h1, h2, h3, .display {
  font-family: "Shippori Mincho", Georgia, "Times New Roman", serif;
  font-weight: 700;
  /* Kopfraum für spanische Akzente und deutsche Umlaute */
  line-height: 1.14;
  letter-spacing: -0.012em;
  text-wrap: balance;
  margin: 0;
}

h1, .h1 { font-size: clamp(2.35rem, 1.1rem + 5.2vw, 5.1rem); }
h2, .h2 { font-size: clamp(1.75rem, 1rem + 2.8vw, 3rem); line-height: 1.18; }
h3, .h3 { font-size: clamp(1.15rem, 1rem + .7vw, 1.5rem); line-height: 1.28; }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

.lede {
  font-size: clamp(1.06rem, 1rem + .5vw, 1.32rem);
  line-height: 1.55;
  color: var(--text-dim);
  max-width: var(--read);
}

.num {
  font-family: "Shippori Mincho", Georgia, serif;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

/* ---------------------------------------------------------------- Layout */
.wrap { width: min(var(--wide), 100%); margin-inline: auto; padding-inline: var(--pad); }
.sec { padding-block: clamp(3.5rem, 9vw, 7.5rem); }
.sec--tight { padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.sec--cont { padding-top: 0; }

/* Die einzige Zierform der Seite: der vierstrahlige Stern aus dem Wappen. */
.star { width: 12px; height: 12px; color: var(--copper); flex: none; }
.rule {
  display: flex; align-items: center; gap: var(--s3);
  color: var(--line); margin-block: var(--s6);
}
.rule::before, .rule::after {
  content: ""; height: 1px; flex: 1;
  background: currentColor;
}

.head-block { max-width: var(--read); }
.head-block h1, .head-block h2 { max-width: 19ch; }
.wall__head .head-block h2 { max-width: 26ch; }
.head-block .lede { margin-top: var(--s4); }
h1 + .lede, h2 + .lede { margin-top: var(--s4); }

/* ---------------------------------------------------- Vorschaustreifen */
.preview {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  height: var(--strip-h);
  display: flex; align-items: center; justify-content: center;
  background: var(--pixeluno); color: var(--pixeluno-ink);
  font-size: var(--fs-micro); letter-spacing: .045em;
  padding-inline: var(--s3); text-align: center;
}
.preview p { margin: 0; line-height: 1.25; }

/* --------------------------------------------------------------- Kopf */
.head {
  position: fixed; inset: var(--strip-h) 0 auto 0; z-index: 80;
  background: color-mix(in srgb, var(--ink) 88%, transparent);
  backdrop-filter: blur(14px) saturate(1.2);
  border-bottom: 1px solid transparent;
  transition: background .3s var(--ease), border-color .3s var(--ease);
}
.head.is-stuck {
  background: color-mix(in srgb, var(--ink) 97%, transparent);
  border-bottom-color: var(--line);
}
.head__in {
  display: flex; align-items: center; gap: var(--s5);
  height: var(--head-h);
  width: min(var(--wide), 100%); margin-inline: auto; padding-inline: var(--pad);
}

.brand { display: flex; align-items: center; gap: .7rem; text-decoration: none; flex: none; }
.brand__mark svg { width: 30px; height: 30px; color: var(--copper); }
.brand__word svg { width: 84px; height: auto; color: var(--text); }
.brand:hover .brand__mark svg { color: var(--copper-soft); }
.brand__mark svg, .brand__word svg { transition: color .25s var(--ease); }

.nav { margin-inline: auto; }
.nav__list, .langs ul, .mnav__list, .mnav__langs, .foot__col ul {
  list-style: none; margin: 0; padding: 0;
}
.nav__list { display: flex; gap: clamp(.9rem, 2vw, 2rem); }
.nav__list a {
  text-decoration: none; font-size: var(--fs-md); font-weight: 500;
  letter-spacing: .01em; color: var(--text-dim);
  padding-block: .4rem; position: relative;
  transition: color .2s var(--ease);
}
.nav__list a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: 0;
  height: 1px; background: var(--copper);
  transition: right .3s var(--ease);
}
.nav__list a:hover { color: var(--text); }
.nav__list a:hover::after { right: 0; }
.nav__list a[aria-current] { color: var(--copper-soft); }
.nav__list a[aria-current]::after { right: 0; }

.head__end { display: flex; align-items: center; gap: var(--s4); flex: none; }
.langs ul { display: flex; gap: .1rem; }
.langs a {
  display: block; padding: .3rem .45rem; text-decoration: none;
  font-size: var(--fs-micro); font-weight: 700; letter-spacing: .09em;
  color: var(--text-dim); transition: color .2s var(--ease);
}
.langs a:hover { color: var(--text); }
.langs a[aria-current] { color: var(--ink); background: var(--copper); }
.langs abbr { text-decoration: none; }

.burger { display: none; }

/* -------------------------------------------------------------- Buttons */
.btn {
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .82rem 1.35rem;
  font: 700 .92rem/1 "Zen Kaku", system-ui, sans-serif;
  letter-spacing: .012em; text-decoration: none;
  border: 1px solid transparent; border-radius: var(--r);
  cursor: pointer;
  transition: background .25s var(--ease), color .25s var(--ease),
              border-color .25s var(--ease), transform .25s var(--ease);
}
.btn .ico { width: 18px; height: 18px; }
.btn--wa { background: var(--copper); color: #17190f; }
.btn--wa:hover { background: var(--copper-soft); transform: translateY(-1px); }
.btn--ghost { border-color: var(--line); color: var(--text); }
.btn--ghost:hover { border-color: var(--copper); color: var(--copper-soft); }
.btn--paper { background: var(--on-paper); color: var(--paper); }
.btn--paper:hover { background: var(--ink); transform: translateY(-1px); }
.btn--paper-ghost { border-color: color-mix(in srgb, var(--on-paper) 30%, transparent); color: var(--on-paper); }
.btn--paper-ghost:hover { border-color: var(--on-paper); }
.btn[disabled] { opacity: .45; cursor: not-allowed; transform: none; }

.head__cta { padding: .62rem 1rem; font-size: var(--fs-sm); }

/* ----------------------------------------------------------------- Hero */
.hero {
  position: relative;
  padding-top: calc(var(--strip-h) + var(--head-h) + clamp(2.5rem, 8vh, 6rem));
  padding-bottom: clamp(2.5rem, 7vh, 5rem);
  min-height: min(100svh, 940px);
  display: flex; align-items: flex-end;
  isolation: isolate;
}
.hero__bg { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.hero__bg img { width: 100%; height: 100%; object-fit: cover; }
.hero__veil {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--ink) 82%, transparent) 0%,
      color-mix(in srgb, var(--ink) 46%, transparent) 34%,
      color-mix(in srgb, var(--ink) 88%, transparent) 78%,
      var(--ink) 100%);
}
.hero__in { width: min(var(--wide), 100%); margin-inline: auto; padding-inline: var(--pad); }
.hero h1 { max-width: 15ch; }
.hero .lede { margin-top: var(--s5); max-width: 52ch; color: var(--text); }
.hero__acts { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s6); }

/* Tageszeit-Pille: aus Europe/Madrid gerechnet, kein Fake-Zustand. */
.now {
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .45rem .95rem .45rem .7rem;
  border: 1px solid var(--line); border-radius: var(--arch);
  font-size: var(--fs-sm); font-weight: 700; color: var(--text);
  letter-spacing: .01em;
  background: color-mix(in srgb, var(--ink) 88%, transparent);
  backdrop-filter: blur(10px);
  box-shadow: var(--elev-pill);
  margin-bottom: var(--s5);
}
.now__dot {
  width: 7px; height: 7px; border-radius: 50%; flex: none;
  background: var(--sage); box-shadow: 0 0 0 3px color-mix(in srgb, var(--sage) 25%, transparent);
}
.now[data-open="0"] .now__dot { background: var(--copper-deep); box-shadow: 0 0 0 3px color-mix(in srgb, var(--copper-deep) 22%, transparent); }
.now__price { color: var(--copper-soft); font-weight: 700; }

/* ---------------------------------------------------------- Papiergrund
   Der zweite Grund der Seite. Er dreht die Tokens, statt einzelne Farben
   umzufaerben - sonst muesste jede Regel doppelt geschrieben werden.
   Kupfer wird darin zu Kupferdunkel: #c08a4e auf Papier ergaebe nur 2:1. */
.paper {
  background: var(--paper);
  color: var(--on-paper);
  --text: var(--on-paper);
  --text-dim: var(--on-paper-dim);
  --copper: var(--copper-deep);
  --copper-soft: var(--copper-deep);
  --line: color-mix(in srgb, var(--on-paper) 20%, transparent);
  --line-soft: color-mix(in srgb, var(--on-paper) 11%, transparent);
}
.paper .btn--wa { background: var(--on-paper); color: var(--paper); }
.paper .btn--wa:hover { background: var(--ink); }
.paper .btn--ghost { border-color: color-mix(in srgb, var(--on-paper) 32%, transparent); }
.paper .btn--ghost:hover { border-color: var(--on-paper); color: var(--copper-deep); }
.paper .star { color: var(--copper-deep); }

/* --------------------------------------------------------------- Preise */
.prices h2 { max-width: 20ch; }
/* Eine Tafel, von einer Linie geteilt - nicht zwei gleich grosse Karten
   nebeneinander, die wie eine Preistabelle aussehen. Der Kopf traegt den
   Bogen des Wappens, die geltende Haelfte bekommt das Kupferfeld. */
.prices__grid {
  display: grid; margin-top: var(--s7);
  grid-template-columns: 1fr 1fr;
  border: 1px solid var(--on-paper);
  border-radius: var(--r-board) var(--r-board) var(--r) var(--r);
  overflow: hidden;
  max-width: 56rem;
  /* Tiefe gibt es nur auf dem hellen Grund - auf Dunkel bliebe ein Schatten
     ohnehin unsichtbar und die Flaechen sollen glatt bleiben. */
  box-shadow: var(--elev-board);
}
.tier {
  padding: calc(var(--s6) + 2rem) var(--s5) var(--s6);
  position: relative;
  transition: background .3s var(--ease);
}
.tier + .tier { border-left: 1px solid color-mix(in srgb, var(--on-paper) 24%, transparent); }
.tier.is-now { background: color-mix(in srgb, var(--copper) 15%, transparent); }
.tier__when {
  font-size: var(--fs-sm); font-weight: 700; letter-spacing: .01em;
  color: var(--on-paper-dim); margin: 0 0 var(--s4);
}
.tier__fig { display: flex; align-items: baseline; gap: .5rem; }
.tier__fig .num { font-size: clamp(2.6rem, 1.5rem + 4vw, 4rem); font-weight: 700; }
.tier__fig span { font-size: var(--fs-md); color: var(--on-paper-dim); }
.tier__child { margin-top: var(--s3); font-size: var(--fs-md); color: var(--on-paper-dim); }
.tier__child b { color: var(--on-paper); font-weight: 700; }
.tier__flag {
  position: absolute; top: var(--s5); left: var(--s5);
  display: inline-block;
  background: var(--on-paper); color: var(--paper);
  font-size: var(--fs-micro); font-weight: 700; letter-spacing: .11em; text-transform: uppercase;
  padding: .28rem .62rem; border-radius: var(--arch);
}
.tier__flag[hidden] { display: none; }
.prices__note {
  margin-top: var(--s6); max-width: var(--read);
  font-size: var(--fs-sm); line-height: 1.6; color: var(--on-paper-dim);
}

/* --------------------------------------------------------- Wie es läuft */
.steps {
  display: grid; gap: var(--s6); margin-top: var(--s7);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  counter-reset: step;
}
.step { position: relative; }
.step__no {
  counter-increment: step;
  display: grid; place-items: end center;
  width: 58px; height: 34px; padding-bottom: .3rem;
  border: 1px solid var(--line); border-bottom: 0;
  border-radius: var(--arch) var(--arch) 0 0;
  margin-bottom: var(--s4);
}
.step__no::before {
  content: counter(step, decimal-leading-zero);
  font-family: "Shippori Mincho", serif; font-size: var(--fs-md); font-weight: 700;
  color: var(--copper); letter-spacing: .06em;
}
.step h3 { margin-bottom: var(--s2); }
.step p { color: var(--text-dim); font-size: var(--fs-md); max-width: 34ch; }

/* ------------------------------------------------- Die Wand aus 203 Fotos */
.wall { background: var(--ink); }
.wall__head { display: flex; flex-wrap: wrap; gap: var(--s5) var(--s7); align-items: end; }

.wall__head .btn { margin-left: auto; }
.wall__grid {
  margin-top: var(--s6);
  display: grid; gap: 3px;
  grid-auto-flow: dense;
  grid-template-columns: repeat(auto-fill, minmax(clamp(58px, 7.2vw, 96px), 1fr));
}
/* Ein paar doppelt grosse Kacheln geben dem Mosaik Takt, sonst liest es
   sich wie ein Kontaktbogen. Der Schlusssatz sitzt als eigene Zelle in der
   letzten Reihe, damit die Wand nicht in einem Loch endet. */
.wall__t--big { grid-column: span 2; grid-row: span 2; }
/* Ruhige Fuellzelle: setzt die Flaeche des Mosaiks fort, ohne ein Gericht
   vorzutaeuschen, das es nicht gibt. */
.wall__t--fill { background: var(--ink-2); }
.wall__t {
  position: relative; aspect-ratio: 4 / 3; overflow: hidden;
  background: var(--ink-2);
}
.wall__t img { width: 100%; height: 100%; object-fit: cover; }
.wall__foot {
  margin-top: var(--s5); display: flex; flex-wrap: wrap; gap: var(--s4);
  align-items: center; justify-content: space-between;
}
.wall__count { margin-top: var(--s4); font-size: var(--fs-sm); color: var(--text-dim); }

/* --------------------------------------------------------------- Ausschnitt */
.picks {
  display: grid; gap: var(--s5); margin-top: var(--s7);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}
.pick { text-decoration: none; display: block; }
.pick__ph {
  display: block;
  /* Der Rundbogen aus dem Wappen — die einzige Stelle, an der er Bilder fasst */
  border-radius: var(--arch) var(--arch) var(--r) var(--r);
  overflow: hidden; background: var(--ink-2);
  aspect-ratio: 4 / 5;
}
.pick__ph img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.pick:hover .pick__ph img { transform: scale(1.045); }
.pick__n { display: block; margin-top: var(--s3); font-size: var(--fs-xs); color: var(--copper); font-weight: 700; letter-spacing: .06em; }
.pick h3 { font-size: 1.06rem; margin-top: .15rem; }
.pick p { font-size: var(--fs-sm); color: var(--text-dim); margin-top: .3rem; }

/* ------------------------------------------------------------- Der Saal */
.room { background: var(--ink-2); }
.room__lead { display: grid; gap: var(--s6); align-items: start; }
@media (min-width: 62rem) {
  .room__lead { grid-template-columns: 1.05fr .95fr; gap: var(--s8); }
}
.room__shots {
  display: grid; gap: var(--s3); margin-top: var(--s7);
  grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 60rem) { .room__shots { grid-template-columns: repeat(2, 1fr); } }
.room__shots figure { margin: 0; }
.room__shots img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--r); }
.room__shots figcaption { margin-top: var(--s2); font-size: var(--fs-sm); color: var(--text-dim); }

.mats { list-style: none; margin: var(--s5) 0 0; padding: 0; display: grid; gap: var(--s4); }
.mats li { display: grid; grid-template-columns: 74px 1fr; gap: var(--s4); align-items: start; }
.mats img { width: 74px; height: 74px; object-fit: cover;
  border-radius: var(--arch) var(--arch) var(--r) var(--r); }
.mats .star { margin-top: .34rem; }
.mats b { display: block; font-weight: 700; }
.mats span { color: var(--text-dim); font-size: var(--fs-md); }

/* ------------------------------------------------------------ Vertrauen */
.trust__grid {
  display: grid; gap: var(--s6); margin-top: var(--s7);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}
.trust__i h3 { margin-bottom: var(--s2); }
.trust__i p { color: var(--text-dim); font-size: var(--fs-md); }
.trust__i { border-top: 1px solid var(--line); padding-top: var(--s4); }

/* Belege als ein Satz mit dem Wappenstern als Trenner - nicht als Reihe
   grosser Zahlen mit kleinen Beschriftungen darunter. */
.proof {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s4);
  margin-top: var(--s7); padding-top: var(--s5);
  border-top: 1px solid var(--line);
  font-size: var(--fs-md); color: var(--text-dim);
}
.proof b { font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.proof a { color: var(--text); }
.proof .star { opacity: .85; }
/* ------------------------------------------------------- Reservierung */
.book { background: var(--jade); }
.book__grid { display: grid; gap: var(--s7); }
@media (min-width: 58rem) { .book__grid { grid-template-columns: 1.1fr .9fr; gap: var(--s8); } }

.form { display: grid; gap: var(--s4); margin-top: var(--s6); }
.form__row { display: grid; gap: var(--s4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr)); }
.field { display: grid; gap: .38rem; }
.field label { font-size: var(--fs-sm); font-weight: 700; letter-spacing: .02em; color: var(--mint); }
.field input, .field select, .field textarea {
  font: 400 1rem/1.4 "Zen Kaku", system-ui, sans-serif;
  color: var(--text); background: color-mix(in srgb, var(--ink) 55%, transparent);
  border: 1px solid color-mix(in srgb, var(--mint) 28%, transparent);
  border-radius: var(--r); padding: .72rem .85rem; width: 100%;
}
.field textarea { min-height: 4.5rem; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: color-mix(in srgb, var(--text) 72%, transparent); }

.msg {
  margin-top: var(--s5); border: 1px solid color-mix(in srgb, var(--mint) 30%, transparent);
  border-radius: var(--r2); padding: var(--s4) var(--s5);
  background: color-mix(in srgb, var(--ink) 42%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--mint) 14%, transparent);
}
.msg h3 { font-size: var(--fs-sm); font-family: "Zen Kaku", sans-serif; font-weight: 700; letter-spacing: .05em; color: var(--mint); text-transform: uppercase; }
.msg p { margin-top: var(--s3); font-size: 1.02rem; line-height: 1.55; }
.book__send { margin-top: var(--s5); }

.facts { list-style: none; margin: var(--s6) 0 0; padding: 0; display: grid; gap: var(--s5); }
.facts li { display: grid; grid-template-columns: 22px 1fr; gap: var(--s3); }
.facts .ico { color: var(--mint); margin-top: .1rem; }
.facts b { display: block; }
.facts a { color: var(--text); }
.facts span, .facts p { color: color-mix(in srgb, var(--text) 74%, transparent); font-size: var(--fs-md); }

.map { margin-top: var(--s6); border: 1px solid color-mix(in srgb, var(--mint) 22%, transparent); border-radius: var(--r2); overflow: hidden; background: var(--ink); }
.map svg { width: 100%; height: auto; display: block; }

/* -------------------------------------------------------- Kartenseite */
.carta-top { padding-top: calc(var(--strip-h) + var(--head-h) + var(--s7)); }

.rail {
  position: sticky; top: calc(var(--strip-h) + var(--head-h));
  z-index: 40; background: color-mix(in srgb, var(--ink) 96%, transparent);
  backdrop-filter: blur(10px);
  border-block: 1px solid var(--line);
  margin-top: var(--s6);
}
.rail__in { display: flex; gap: var(--s4); align-items: center; width: min(var(--wide), 100%); margin-inline: auto; padding: var(--s3) var(--pad); }
.rail__wrap { position: relative; min-width: 0; flex: 1; }
.rail__wrap::after {
  content: ""; position: absolute; inset: 0 0 0 auto; width: 44px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--ink));
}
.rail__scroll { display: flex; gap: .35rem; overflow-x: auto; scrollbar-width: thin;
  padding-bottom: 2px; padding-right: 44px; }
.rail__scroll::-webkit-scrollbar { height: 3px; }
.rail__scroll::-webkit-scrollbar-thumb { background: var(--line); }
.chip {
  flex: none; border: 1px solid var(--line); background: none; color: var(--text-dim);
  font: 500 .82rem/1 "Zen Kaku", sans-serif; padding: .5rem .8rem;
  border-radius: var(--arch); cursor: pointer; white-space: nowrap;
  transition: color .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease);
}
.chip:hover { color: var(--text); border-color: var(--copper); }
.chip[aria-pressed="true"] { background: var(--copper); border-color: var(--copper); color: #17190f; }

.search { flex: none; width: min(15rem, 38vw); }
.search input::placeholder { color: color-mix(in srgb, var(--text) 72%, transparent); }
.search input {
  width: 100%; font: 400 .9rem/1 "Zen Kaku", sans-serif; color: var(--text);
  background: var(--ink-2); border: 1px solid var(--line); border-radius: var(--arch);
  padding: .55rem .9rem;
}

.cat { padding-top: var(--s8); scroll-margin-top: calc(var(--strip-h) + var(--head-h) + 4.4rem); }
.cat__h { display: flex; align-items: baseline; gap: var(--s3); flex-wrap: wrap; }
.cat__h h2 { font-size: clamp(1.35rem, 1.1rem + 1.1vw, 1.9rem); }
.cat__h span { font-size: var(--fs-sm); color: var(--text-dim); }

.dishes {
  margin-top: var(--s5); display: grid; gap: var(--s5) var(--s4);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 13.5rem), 1fr));
}
.dish { display: flex; flex-direction: column; gap: .55rem; }
/* Die Angabenzeile jeder Karte sitzt unten, damit die Zeilen des
   Rasters trotz unterschiedlich langer Beschreibungen fluchten. */
.dish__meta { margin-top: auto; }
.dish__ph { display: block; flex: none; position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--r); background: var(--ink-2); }
.dish__ph img { width: 100%; height: 100%; object-fit: cover; }
.dish__ph--none { display: grid !important; place-items: center; background: var(--ink-3); }
.dish__ph--none span { font-size: var(--fs-micro); color: var(--text-dim); text-align: center; padding: .5rem; }
.dish__n { font-size: var(--fs-micro); font-weight: 700; letter-spacing: .07em; color: var(--copper); font-variant-numeric: tabular-nums; }
.dish h3 { font-size: 1rem; line-height: 1.25; }
.dish__d { font-size: var(--fs-sm); color: var(--text-dim); line-height: 1.45; }
.dish__meta { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; padding-top: .35rem; }
.dish__al { display: flex; gap: .3rem; }
.dish__al svg { width: 20px; height: 20px; color: var(--sage); }
.dish__units { font-size: var(--fs-xs); color: var(--text-dim); border: 1px solid var(--line); border-radius: var(--arch); padding: .1rem .45rem; }
.dish__spicy { display: inline-flex; align-items: center; gap: .28rem; font-size: var(--fs-xs); color: var(--hanko-lt); font-weight: 700; }
.dish__spicy svg { width: 13px; height: 13px; }
.dish__unknown { font-size: var(--fs-xs); color: var(--text-dim); font-style: italic; }

.empty { padding: var(--s8) 0; text-align: center; color: var(--text-dim); }

.tables { display: grid; gap: var(--s7); margin-top: var(--s6); }
@media (min-width: 60rem) { .tables { grid-template-columns: 1fr 1fr; gap: var(--s8); } }
.dtab { width: 100%; border-collapse: collapse; font-size: var(--fs-md); }
.dtab caption { text-align: left; font-family: "Shippori Mincho", serif; font-weight: 700; font-size: 1.15rem; padding-bottom: var(--s3); }
.dtab th, .dtab td { padding: .5rem 0; border-bottom: 1px solid var(--line-soft); text-align: left; vertical-align: baseline; }
.dtab thead th { font-size: var(--fs-micro); letter-spacing: .07em; text-transform: uppercase; color: var(--text-dim); font-weight: 700; }
.dtab td.p, .dtab th.p { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dtab td.p { color: var(--copper-soft); }
.tables__wrap { overflow-x: auto; }

.sweets { margin-top: var(--s5); display: grid; gap: var(--s4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); }
.sweet { display: flex; justify-content: space-between; gap: var(--s3); border-bottom: 1px solid var(--line-soft); padding-bottom: var(--s3); }
.sweet b { font-weight: 500; }
.sweet span { color: var(--copper-soft); font-variant-numeric: tabular-nums; white-space: nowrap; }

.note {
  margin-top: var(--s5); font-size: var(--fs-sm); color: var(--text-dim);
  max-width: var(--read); border-left: 1px solid var(--line); padding-left: var(--s4);
}

.legend { margin-top: var(--s6); }
.legend__grid {
  margin-top: var(--s4); display: grid; gap: var(--s3) var(--s4);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 11rem), 1fr));
}
.legend__i { display: grid; grid-template-columns: 24px 1fr; gap: .6rem;
  align-items: center; font-size: var(--fs-sm); color: var(--text-dim); }
.legend__i svg { width: 22px; height: 22px; color: var(--sage); }

/* --------------------------------------------------------- Galerieseite */
/* 18 Innenraum- und 6 Saalfotos. Feste Spaltenzahlen gehen in beiden
   Mengen auf; auto-fit liess je nach Breite zwei Zellen leer stehen. */
.gal { display: grid; gap: var(--s3); margin-top: var(--s6); grid-template-columns: repeat(3, 1fr); }
@media (max-width: 60rem) { .gal { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 34rem) { .gal { grid-template-columns: 1fr; } }
.gal img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--r); aspect-ratio: 3 / 4; }
.gal figure { margin: 0; }
.gal figure:nth-child(6n+1) img, .gal figure:nth-child(6n+4) img { aspect-ratio: 4 / 5; }

.page-top { padding-top: calc(var(--strip-h) + var(--head-h) + clamp(2.5rem, 7vw, 5.5rem)); }

.prose { max-width: var(--read); }
.prose h2 { margin-top: var(--s7); }
.prose h2:first-child { margin-top: 0; }
.prose p { margin-top: var(--s4); color: var(--text-dim); }
.prose ul { color: var(--text-dim); padding-left: 1.1rem; }
.prose li { margin-top: .4rem; }
/* Offene Punkte: sichtbar als Leerstelle gefuehrt, aber als fertige
   Flaeche gesetzt - der gestrichelte Rahmen liess auch die Nachbarn
   unfertig aussehen. */
.pending {
  border: 1px solid var(--line); border-radius: var(--r2);
  padding: var(--s5); margin-top: var(--s5); background: var(--ink-2);
}
.pending::before {
  content: ""; display: block; width: 34px; height: 2px;
  background: var(--copper); margin-bottom: var(--s3);
}
.pending p { color: var(--text); margin-top: 0; }

.lead-shot { margin-top: var(--s6); }
.lead-shot img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover;
  border-radius: var(--arch) var(--arch) var(--r) var(--r); }

/* ---------------------------------------------------------- Fusszeile */
.foot { background: var(--ink-2); border-top: 1px solid var(--line); margin-top: var(--s8); }
.foot__in {
  width: min(var(--wide), 100%); margin-inline: auto; padding: var(--s8) var(--pad) var(--s6);
  display: grid; gap: var(--s6);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
}
.foot__brand { grid-column: 1 / -1; }
@media (min-width: 62rem) { .foot__brand { grid-column: auto; } }
.foot__brand { display: grid; gap: var(--s4); }
.foot__row { display: flex; align-items: center; gap: var(--s4); }
.foot__mark svg { width: 38px; height: 38px; color: var(--copper); }
/* Das einzige satte Rot der Seite: das Hanko der Marke, wie auf der
   Titelseite der gedruckten Karte. */
.seal {
  display: grid; place-items: center;
  width: 34px; height: 46px; flex: none;
  background: var(--hanko); color: var(--hanko-ink); border-radius: var(--r-seal);
  font: 700 .95rem/1.05 "Shippori Mincho", serif;
  writing-mode: vertical-rl; letter-spacing: .02em;
}
.foot__tag { margin-top: var(--s3); font-size: var(--fs-md); color: var(--text-dim); max-width: 24ch; }
/* Kleine Versalzeilen brauchen Kopfraum: bei 11,8 px und Zeilenhoehe 1,14
   sitzen die Punkte von "Öffnungszeiten" genau auf der Kante. */
.foot__col h2 { font-family: "Zen Kaku", sans-serif; font-size: var(--fs-micro); font-weight: 700;
  line-height: 1.45; letter-spacing: .1em; text-transform: uppercase;
  color: var(--copper); margin-bottom: var(--s3); }
.tier__flag, .msg h3, .cat__h span, .dish__n, .pick__n, .legend__i { line-height: 1.45; }
.foot__col li { margin-top: .35rem; font-size: var(--fs-md); color: var(--text-dim); }
.foot__col a { text-decoration: none; }
.foot__col a:hover { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.foot__base {
  border-top: 1px solid var(--line-soft);
  width: min(var(--wide), 100%); margin-inline: auto;
  padding: var(--s4) var(--pad) var(--s6);
  display: flex; flex-wrap: wrap; gap: var(--s3) var(--s5);
  align-items: center; justify-content: space-between;
  font-size: var(--fs-sm); color: var(--text-dim);
}
.foot__base address { font-style: normal; }
.foot__base p { margin: 0; }
.foot__pixel a { color: var(--copper-soft); }

/* ------------------------------------------------------------- Bewegung */
/* Der eine gestaltete Moment: die Wand aus 203 Fotos setzt sich zusammen.
   Ausgangszustand ist immer sichtbar - ohne JS und ohne IntersectionObserver
   steht die Seite vollständig da. */
html.js .wall__t { transform: translateY(10px) scale(.965); filter: brightness(.35) saturate(.5); }
html.js .wall__t { transition: transform .75s var(--ease), filter .75s var(--ease); transition-delay: var(--d, 0ms); }
html.js .wall.is-in .wall__t { transform: none; filter: none; }

html.js .fade { opacity: .001; transform: translateY(14px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
html.js .fade.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  html.js .wall__t, html.js .fade { transform: none !important; filter: none !important; opacity: 1 !important; transition: none !important; }
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ------------------------------------------------------------- Mobil */
@media (max-width: 60rem) {
  :root { --head-h: 3.9rem; }
  .nav, .head__end { display: none; }
  .burger {
    display: grid; place-items: center; margin-left: auto;
    width: 44px; height: 44px; background: none; border: 1px solid var(--line);
    border-radius: var(--r); cursor: pointer; color: var(--text);
  }
  .burger__bars, .burger__bars::before, .burger__bars::after {
    display: block; width: 19px; height: 1.5px; background: currentColor;
    transition: transform .28s var(--ease), opacity .2s var(--ease);
  }
  .burger__bars::before, .burger__bars::after { content: ""; position: absolute; }
  .burger__bars::before { transform: translateY(-6px); }
  .burger__bars::after { transform: translateY(6px); }
  .burger[aria-expanded="true"] .burger__bars { background: transparent; }
  .burger[aria-expanded="true"] .burger__bars::before { transform: rotate(45deg); }
  .burger[aria-expanded="true"] .burger__bars::after { transform: rotate(-45deg); }

  /* display:grid schlaegt das hidden-Attribut des Browsers. Ohne diese
     Zeile steht das Mobilmenue beim Laden offen und deckt den Hero zu. */
  .mnav[hidden] { display: none !important; }
  /* Tippziele mindestens 44 px hoch */
  .brand { min-height: 44px; padding-block: .4rem; }
  .chip { padding: .8rem .95rem; }
  .rail__scroll { gap: .45rem; }
  .mnav {
    border-top: 1px solid var(--line);
    background: var(--ink);
    padding: var(--s5) var(--pad) var(--s6);
    display: grid; gap: var(--s4);
    max-height: calc(100svh - var(--strip-h) - var(--head-h));
    overflow-y: auto;
  }
  .mnav__list { display: grid; gap: var(--s2); }
  .mnav__list a { display: block; padding: .6rem 0; font-family: "Shippori Mincho", serif; font-weight: 700; font-size: 1.3rem; text-decoration: none; border-bottom: 1px solid var(--line-soft); }
  .mnav__langs { display: flex; gap: var(--s2); }
  .mnav__langs a { display: block; padding: .4rem .7rem; border: 1px solid var(--line); font-size: var(--fs-xs); font-weight: 700; letter-spacing: .08em; text-decoration: none; color: var(--text-dim); }
  .mnav__langs a[aria-current] { background: var(--copper); color: var(--ink); border-color: var(--copper); }
  .mnav .btn { justify-content: center; }
  /* Zwei Aktionen untereinander mit ungleicher Breite lesen sich als
     Fehler, nicht als Rangfolge. */
  .hero__acts { display: grid; gap: var(--s3); }
  .hero__acts .btn { justify-content: center; }
  .wall__head .head-block h2 { max-width: none; }
  .rail__in { flex-direction: column; align-items: stretch; gap: var(--s3); }
  .search { width: 100%; }
  .hero { min-height: auto; }
}

@media (max-width: 40rem) {
  /* Die Tafel steht auf dem Telefon uebereinander, sonst bricht die
     Preiszahl um und "por adulto" laeuft aus seiner Haelfte. */
  .prices__grid { grid-template-columns: 1fr; }
  .tier + .tier {
    border-left: 0;
    border-top: 1px solid color-mix(in srgb, var(--on-paper) 24%, transparent);
  }
  /* Zwei Gerichte je Reihe halbieren den Rollweg der 203 Positionen. */
  .dishes { grid-template-columns: repeat(2, 1fr); gap: var(--s5) var(--s3); }
  .dish h3 { font-size: var(--fs-md); }
  .dish__d { font-size: var(--fs-xs); }
  .picks { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 60.01rem) { .mnav, .burger { display: none !important; } }