/* =========================================================================
   THE AYA ASIA · „Ein Blatt Papier" · Stand 16.09.2026

   Der Hero und der Fuß bleiben schwarzer Lack mit dem goldenen Logo, das sind
   die Farben des Hauses. Dazwischen liegt ein Blatt Aquarellpapier, auf dem
   die Inhalte stehen: schwarze Tinte für die Schrift, Gold für Linien und
   kleine Marken, Rot nur aus den Tuschemotiven und dem Siegel.
   Die Motive ragen von den Blattkanten herein. Bewegung gibt es genau zweimal,
   beide Male an den Scroll gebunden: der Ast wächst herein, der Baum verliert
   seine Blüten.
   ========================================================================= */

:root {
  --lack: var(--night-900);
  --papier: #F3EEE4;
  --tinte: #17130F;
  --tinte-weich: #4A423B;
  --grau: #8C847B;
  --altgold: #7F6612;               /* Gold als Schrift: dunkel genug fürs Papier */
  --messing: #BA9C2B;               /* Gold als Linie */
  --zinnober: #B4231C;
  --linie: rgba(23, 19, 15, 0.14);
  --linie-gold: rgba(186, 156, 43, 0.5);
  --rand: 16px;                     /* der schwarze Tisch rund ums Blatt */
  --blatt: calc(100vh - 2 * var(--rand));
  --blatt: calc(100svh - 2 * var(--rand));
  --fs-ueber: 0.66rem;
}
/* Handy: kein Tisch-Rand, das Blatt füllt den ganzen Bildschirm */
@media (max-width: 760px) { :root { --rand: 0px; } .tisch { display: none; } body { background: var(--papier, #F3EEE4); } }

/* ---------- Der Tisch: fester schwarzer Rand, das Blatt liegt darauf ---------- */
body { padding: var(--rand); background: var(--lack); }
.tisch {
  position: fixed; inset: 0; z-index: 105; pointer-events: none;
  border: var(--rand) solid var(--lack);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.14), inset 0 0 40px rgba(0, 0, 0, 0.08);
}
.nav { top: var(--rand); left: var(--rand); right: var(--rand); }
.hero { min-height: var(--blatt); }   /* der Hero füllt genau den Rahmen, das Blatt beginnt darunter */

/* ---------- Das Blatt ---------- */
.blatt {
  position: relative; z-index: 2;
  min-height: var(--blatt);
  background: var(--papier) url('../assets/papier.webp') center / 1024px 1024px;
  color: var(--tinte-weich);
  box-shadow: 0 -30px 80px rgba(0, 0, 0, 0.5), 0 40px 90px -30px rgba(0, 0, 0, 0.9);
}
.blatt::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0.5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.35 0 0 0 0 0.3 0 0 0 0 0.25 0 0 0 0.09 0'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
}
.blatt > * { position: relative; z-index: 1; }
.blatt h1, .blatt h2, .blatt h3 { color: var(--tinte); font-weight: 600; letter-spacing: -0.012em; line-height: 1.12; }
.blatt ::selection { background: var(--tinte); color: var(--papier); }
.blatt :focus-visible { outline-color: var(--tinte); }

.ueber {
  font-family: var(--text); font-size: var(--fs-ueber); font-weight: 500;
  letter-spacing: 0.32em; text-transform: uppercase; color: var(--altgold);
  margin: 0 0 1.5rem;
}
.link-p {
  display: inline-block; font-size: 0.68rem; font-weight: 500; letter-spacing: 0.24em; text-transform: uppercase;
  text-decoration: none; color: var(--tinte); border-bottom: 1px solid var(--tinte); padding-bottom: 0.4em;
  transition: color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.link-p:hover, .link-p:focus-visible { color: var(--altgold); border-color: var(--altgold); }
.knopf {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 1em 2em; background: var(--tinte); color: var(--papier);
  font-family: var(--text); font-size: 0.7rem; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase;
  text-decoration: none; border: 1px solid var(--tinte); border-radius: var(--radius); white-space: nowrap;
  transition: background-color 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.knopf:hover, .knopf:focus-visible { background: #2B241F; border-color: #2B241F; }
.knopf--leer { background: transparent; color: var(--tinte); }
.knopf--leer:hover, .knopf--leer:focus-visible { background: var(--tinte); color: var(--papier); border-color: var(--tinte); }
.fussnote { font-size: 0.82rem; color: var(--grau); max-width: 40rem; }
.ruhig { color: var(--grau); }

/* Fotos liegen wie Abzüge auf dem Papier: weißer Rand, kaum Schatten */
.abzug {
  position: relative; margin: 0; padding: 10px 10px 0.8rem; background: #fff;
  box-shadow: 0 1px 2px rgba(23, 19, 15, 0.08), 0 22px 44px -24px rgba(23, 19, 15, 0.4);
}
.abzug img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.abzug figcaption { margin-top: 0.8rem; font-size: 0.72rem; color: var(--grau); letter-spacing: 0.04em; display: flex; justify-content: space-between; gap: 1rem; }

/* ---------- Kopfzeile auf dem Blatt: Tinte statt Kreide ---------- */
.nav.is-papier::before, .unterseite .nav::before { opacity: 0; }
.nav.is-papier .nav-menu-btn, .nav.is-papier .nav-tel,
.unterseite .nav-menu-btn, .unterseite .nav-tel { color: var(--tinte-weich); }
.nav.is-papier .nav-menu-btn:hover, .nav.is-papier .nav-tel:hover,
.unterseite .nav-menu-btn:hover, .unterseite .nav-tel:hover { color: var(--altgold); }
.nav.is-papier .nav-cta, .unterseite .nav-cta { color: var(--tinte); border-color: var(--tinte); }
.nav.is-papier .nav-cta:hover, .nav.is-papier .nav-cta:focus-visible,
.unterseite .nav-cta:hover, .unterseite .nav-cta:focus-visible { background: var(--tinte); border-color: var(--tinte); color: var(--papier); }
.nav.is-papier.is-stuck, .unterseite .nav.is-stuck {
  background: rgba(243, 238, 228, 0.9); border-bottom-color: var(--linie);
}
@supports (backdrop-filter: blur(1px)) {
  .nav.is-papier.is-stuck, .unterseite .nav.is-stuck { background: rgba(243, 238, 228, 0.82); backdrop-filter: blur(14px); }
}
@media (max-width: 760px) {
  .nav.is-papier .nav-tel, .unterseite .nav-tel { border-color: var(--linie); }
}

/* =========================================================================
   A · Der Raum. Der Laternenast ragt oben links ins Blatt, das Foto liegt
   rechts wie ein Abzug.
   ========================================================================= */
.raum { position: relative; min-height: var(--blatt); padding: 0 var(--gutter) clamp(4rem, 10vh, 7rem); overflow: clip; }
.raum-grid { display: grid; grid-template-columns: 1fr; gap: 2.5rem; max-width: 1240px; margin-inline: auto; width: 100%; }
.raum-text { max-width: 26rem; padding-top: clamp(13rem, 46vw, 16rem); }
.raum h2 { font-size: clamp(2rem, 1.4rem + 2.6vw, 3.6rem); }
.raum-text p { margin: 1.4rem 0 0; }
.raum-text p.ruhig { font-size: 0.92rem; }
.raum-text .link-p { margin-top: 2.2rem; }
.motiv--laternen { position: absolute; left: -3vw; top: -1vh; width: clamp(240px, 62vw, 520px); height: auto; pointer-events: none; z-index: 2; }
.raum .abzug { width: min(100%, 480px); }
@media (min-width: 900px) {
  .raum-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(3rem, 6vw, 7rem); align-items: start; }
  .raum-text { padding-top: clamp(14rem, 30vw, 22rem); }
  .motiv--laternen { left: -2vw; top: -2vh; width: clamp(300px, 32vw, 520px); }
  .raum .abzug { justify-self: end; margin-top: clamp(3rem, 8vh, 6rem); }
}

/* =========================================================================
   Scroll-Sequenzen: Einzelbilder auf einem Canvas, gespult über den
   Fortschritt der Sektion. Ohne JavaScript oder mit reduzierter Bewegung
   steht das letzte Bild still.
   ========================================================================= */
.seq-canvas, .seq-still { position: absolute; pointer-events: none; height: auto; }
.no-js .seq-canvas { display: none; }
.js .seq-still { display: none; }
.js [data-seq] .seq-canvas { opacity: 0; transition: opacity 0.6s var(--ease); }
.js [data-seq].seq-bereit .seq-canvas { opacity: 1; }

/* =========================================================================
   B · Aus der Küche. Der Tuscheast wächst beim Scrollen von rechts herein,
   der Vogel landet, die Blüten gehen auf. Links die Gerichte.
   ========================================================================= */
.kueche { position: relative; }
.kueche-buehne { position: relative; min-height: var(--blatt); display: grid; align-items: center; overflow: clip; }
.js .kueche { height: 230svh; }
.js .kueche-buehne { position: sticky; top: var(--rand); height: var(--blatt); }
.kueche .seq-canvas, .kueche .seq-still { right: -3vw; top: 50%; width: min(60vw, 900px); transform: translateY(-56%) scaleX(-1); }
.kueche-inhalt { width: min(100% - 2 * var(--gutter), 34rem); margin-left: var(--gutter); }
.kueche h2 { font-size: clamp(1.8rem, 1.3rem + 2vw, 3rem); }
.gerichte { list-style: none; margin: 2.4rem 0 0; padding: 0; }
.gerichte li { display: grid; grid-template-columns: 1fr auto; gap: 0.3rem 1.4rem; align-items: baseline; padding: 1rem 0; border-top: 1px solid var(--linie); }
.gerichte li:last-child { border-bottom: 1px solid var(--linie); }
.g-name { font-family: var(--display); font-size: 1.2rem; color: var(--tinte); }
.g-preis { font-family: var(--display); color: var(--tinte); font-variant-numeric: tabular-nums; white-space: nowrap; }
.g-desc { grid-column: 1 / -1; font-size: 0.86rem; color: var(--grau); }
.kueche .fussnote { margin-top: 1.4rem; }
.kueche .link-p { margin-top: 1.8rem; }
@media (max-width: 899px) {
  /* Auf dem Handy nicht angeheftet: der Ast steht über den Gerichten und wächst,
     während die Sektion durchs Bild läuft. */
  .js .kueche { height: auto; }
  .js .kueche-buehne { position: relative; height: auto; }
  .kueche-buehne { display: block; min-height: 0; padding: 2.5rem 0 4rem; }
  .kueche .seq-canvas, .kueche .seq-still { position: relative; right: auto; top: auto; display: block; width: 110vw; margin: 0 0 0.5rem -8vw; transform: scaleX(-1); }
  .js .kueche .seq-still { display: none; }
  .kueche-inhalt { margin-inline: auto; }
  .gerichte { margin-top: 1.6rem; }
  .gerichte li { padding: 0.75rem 0; }
}

/* B · Statt der Gerichteliste freigestellte Sushi vor einem Mandala, selbst
   durchschaltbar. Desktop: eins groß links. Handy: Halbkreis, eins in der Mitte,
   die Nachbarn blass links und rechts als Vorschau. */
.kueche-sushi { display: none; }
@media (min-width: 900px) {
  .kueche-inhalt { display: none; }
  .kueche-sushi {
    display: grid; justify-items: center; gap: 1.4rem;
    width: min(46vw, 640px); margin-left: calc(var(--gutter) + 2vw); outline: none;
    position: relative; z-index: 1;
  }
  .ks-buehne { position: relative; width: 100%; aspect-ratio: 1; display: grid; place-items: center; touch-action: pan-y; cursor: grab; }
  .ks-buehne:active { cursor: grabbing; }
  .ks-mandala {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain;
    mix-blend-mode: multiply; opacity: 0.55; pointer-events: none;
    animation: ks-drehen 90s linear infinite;
    transition: transform 1.2s cubic-bezier(.2,.7,.2,1);
  }
  .ks-mandala--innen { inset: 26%; width: 48%; height: 48%; opacity: 0.28; animation-duration: 60s; animation-direction: reverse; }
  .ks-liste { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0; }
  .ks-item {
    position: absolute; inset: 15%; display: grid; place-items: center;
    opacity: 0; transform: translateX(var(--ks-von, 6%)) scale(0.9) rotate(-4deg);
    transition: opacity 0.7s ease, transform 0.9s cubic-bezier(.2,.7,.2,1);
    pointer-events: none;
  }
  .ks-item.is-aktiv { opacity: 1; transform: none; }
  .ks-item.is-weg { opacity: 0; transform: translateX(var(--ks-nach, -6%)) scale(0.92) rotate(3deg); }
  .ks-item img {
    width: 100%; height: 100%; object-fit: contain; user-select: none; -webkit-user-drag: none;
    filter: drop-shadow(0 26px 22px rgba(23, 19, 15, 0.22)) drop-shadow(0 6px 6px rgba(23, 19, 15, 0.12));
  }
  .ks-leiste { display: grid; grid-template-columns: auto minmax(15rem, auto) auto; align-items: center; gap: 1.6rem; }
  .ks-text { text-align: center; }
  .ks-text .ueber { margin: 0 0 0.35rem; }
  .ks-name { margin: 0; font-family: var(--display); font-size: clamp(1.5rem, 1.1rem + 1vw, 2.1rem); color: var(--tinte); line-height: 1.1; }
  .ks-zahl { margin: 0.45rem 0 0; font-size: 0.72rem; letter-spacing: 0.18em; color: var(--grau); font-variant-numeric: tabular-nums; }
  .ks-btn {
    width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%;
    border: 1px solid var(--linie-gold); background: rgba(243, 238, 228, 0.85); color: var(--tinte);
    cursor: pointer; transition: background 0.25s, color 0.25s, border-color 0.25s;
  }
  .ks-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.4; }
  .ks-btn:hover, .ks-btn:focus-visible { background: var(--tinte); color: var(--papier); border-color: var(--tinte); }
  .kueche-sushi:focus-visible .ks-buehne { outline: 1px solid var(--linie-gold); outline-offset: 6px; border-radius: 50%; }
}
@keyframes ks-drehen { to { rotate: 360deg; } }
@media (max-width: 899px) {
  .kueche-inhalt { display: none; }
  .kueche-sushi {
    --m: min(84vw, 420px);            /* Mandala */
    --s: min(62vw, 320px);            /* Sushi in der Mitte */
    display: grid; justify-items: center; gap: 0.9rem; position: relative; z-index: 1;
    padding: 0 0 1.5rem; outline: none;
  }
  .ks-buehne { position: relative; width: 100%; height: calc(var(--m) + 6vw); touch-action: pan-y; }
  .ks-mandala {
    position: absolute; width: var(--m); height: var(--m); left: calc(50% - var(--m) / 2); top: 0;
    object-fit: contain; mix-blend-mode: multiply; opacity: 0.55; pointer-events: none;
    animation: ks-drehen 90s linear infinite; transition: transform 1.2s cubic-bezier(.2,.7,.2,1);
  }
  .ks-mandala--innen { width: calc(var(--m) * 0.48); height: calc(var(--m) * 0.48); left: calc(50% - var(--m) * 0.24); top: calc(var(--m) * 0.26); opacity: 0.28; animation-duration: 60s; animation-direction: reverse; }
  .ks-liste { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0; }
  .ks-item {
    position: absolute; width: var(--s); height: var(--s);
    left: calc(50% - var(--s) / 2); top: calc(var(--m) / 2 - var(--s) / 2);
    opacity: 0; pointer-events: none; z-index: 1;
    transform: translate(0, 40vw) scale(0.2);
    transition: transform 0.75s cubic-bezier(.2,.7,.2,1), opacity 0.6s ease, filter 0.6s ease;
  }
  .ks-item img { width: 100%; height: 100%; object-fit: contain; user-select: none; -webkit-user-drag: none; }
  /* der Halbkreis: Mitte oben, die Nachbarn tiefer und nach außen gekippt */
  .ks-item[data-pos="0"] { opacity: 1; transform: none; z-index: 3; }
  .ks-item[data-pos="0"] img { filter: drop-shadow(0 22px 18px rgba(23, 19, 15, 0.24)) drop-shadow(0 5px 5px rgba(23, 19, 15, 0.12)); }
  .ks-item[data-pos="-1"], .ks-item[data-pos="1"] { opacity: 0.42; pointer-events: auto; cursor: pointer; z-index: 2; filter: saturate(0.6) blur(0.4px); }
  .ks-item[data-pos="-1"] { transform: translate(-37vw, 25vw) scale(0.44) rotate(-22deg); }
  .ks-item[data-pos="1"]  { transform: translate(37vw, 25vw) scale(0.44) rotate(22deg); }
  .ks-item[data-pos="-2"] { transform: translate(-60vw, 62vw) scale(0.26) rotate(-45deg); }
  .ks-item[data-pos="2"]  { transform: translate(60vw, 62vw) scale(0.26) rotate(45deg); }
  .ks-leiste { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1rem; width: min(100% - 2 * var(--gutter), 26rem); }
  .ks-text { text-align: center; }
  .ks-text .ueber { margin: 0 0 0.3rem; letter-spacing: 0.2em; font-size: 0.6rem; }
  .ks-name { margin: 0; font-family: var(--display); font-size: 1.55rem; color: var(--tinte); line-height: 1.1; }
  .ks-zahl { margin: 0.4rem 0 0; font-size: 0.7rem; letter-spacing: 0.18em; color: var(--grau); font-variant-numeric: tabular-nums; }
  .ks-btn { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--linie-gold); background: rgba(243, 238, 228, 0.85); color: var(--tinte); }
  .ks-btn svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.4; }
  .ks-btn:active { background: var(--tinte); color: var(--papier); }
}
@media (prefers-reduced-motion: reduce) {
  .ks-mandala { animation: none; }
  .ks-item, .ks-item.is-weg { transition: opacity 0.3s ease; }
}
@media (prefers-reduced-motion: reduce) and (min-width: 900px) {
  .ks-item, .ks-item.is-weg { transform: none; }
}

/* =========================================================================
   C · Die Karte. Ein Inhaltsverzeichnis, wie in einem Buch.
   ========================================================================= */
/* C · Adrians Sektion „Viele Einflüsse", auf Wunsch des Users 1:1 übernommen (16.09.).
   Cormorant Garamond für die Headline, das Rot und der Link wie im Original. */
@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 400; font-display: swap; src: url('../assets/fonts/cormorant-garamond-400.woff2') format('woff2'); }
@font-face { font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 400; font-display: swap; src: url('../assets/fonts/cormorant-garamond-400i.woff2') format('woff2'); }
@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 500; font-display: swap; src: url('../assets/fonts/cormorant-garamond-500.woff2') format('woff2'); }
@font-face { font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 500; font-display: swap; src: url('../assets/fonts/cormorant-garamond-500i.woff2') format('woff2'); }
.japan { padding: 110px var(--gutter) 90px; overflow: clip; }
.japan-grid { display: grid; grid-template-columns: 1fr 0.9fr; gap: 12%; align-items: center; max-width: 1170px; margin-inline: auto; }
.japan-grid > img { width: 100%; max-height: 630px; object-fit: contain; }
.japan-grid .eyebrow { display: block; font-family: var(--text); font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; line-height: 1.8; color: #896D42; margin-bottom: 26px; }
.japan-grid h2 { font-family: 'Cormorant Garamond', var(--display), Georgia, serif; font-weight: 500; font-size: clamp(47px, 4.7vw, 72px); line-height: 1.02; letter-spacing: 0; margin-bottom: 30px; color: var(--tinte); text-wrap: initial; }
.japan-grid h2 em { font-style: italic; font-weight: 400; color: #981F30; }
.japan-grid p { max-width: 390px; }
.text-link { display: inline-flex; gap: 35px; align-items: center; padding-bottom: 8px; border-bottom: 1px solid #9B803E; font-size: 13px; margin-top: 30px; text-decoration: none; color: var(--tinte); }
.text-link span { font-size: 23px; line-height: 1; transition: transform 0.3s var(--ease); }
.text-link:hover span, .text-link:focus-visible span { transform: translateX(6px); }
@media (max-width: 760px) {
  .japan { padding: 65px var(--gutter); }
  .japan-grid { display: flex; flex-direction: column; gap: 42px; width: 84%; }
  .japan-grid > img { max-height: 480px; }
  .japan-grid h2 { font-size: 46px; }
  .japan-grid p { font-size: 14px; }
}

/* =========================================================================
   D · Zwei Abzüge: mittags und für die Runde.
   ========================================================================= */
.zwei { padding: 0 var(--gutter) clamp(5rem, 12vh, 9rem); }
.zwei-inner { max-width: 1240px; margin-inline: auto; display: grid; grid-template-columns: 1fr; gap: clamp(3rem, 6vw, 5rem); }
.zwei-teil h3 { font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2rem); margin-top: 1.8rem; }
.zwei-teil p { margin-top: 0.9rem; max-width: 30rem; }
.zwei-teil .link-p { margin-top: 1.6rem; }
@media (min-width: 760px) {
  .zwei-inner { grid-template-columns: 1fr 1fr; gap: clamp(2rem, 6vw, 7rem); align-items: start; }
  .zwei-teil:nth-child(2) { margin-top: clamp(2rem, 6vw, 6rem); }
  .zwei-teil .abzug { width: min(100%, 460px); }
}

/* =========================================================================
   E · Reservieren. Der Baum verliert beim Scrollen seine Blüten, sie liegen
   am Ende auf der Blattkante. Rechts die Zeiten und der Weg zum Tisch.
   ========================================================================= */
.abend { position: relative; }
.abend-buehne { position: relative; min-height: var(--blatt); display: grid; align-items: center; overflow: clip; }
.js .abend { height: 220svh; }
.js .abend-buehne { position: sticky; top: var(--rand); height: var(--blatt); }
.abend .seq-canvas, .abend .seq-still { left: -2vw; bottom: 0; width: min(44vw, 640px); }
.abend-inhalt { width: min(100% - 2 * var(--gutter), 34rem); margin-left: auto; margin-right: var(--gutter); }
.abend h2 { font-size: clamp(1.8rem, 1.3rem + 2vw, 3rem); }
.status { margin: 1.1rem 0 0; font-family: var(--display); color: var(--tinte); font-size: 1.05rem; }
.zeiten { margin: 1.8rem 0 0; display: grid; gap: 0.5rem; font-variant-numeric: tabular-nums; }
.zeiten > div { display: grid; grid-template-columns: 1fr auto; gap: 0.4rem 1.5rem; align-items: baseline; border-bottom: 1px solid var(--linie); padding-bottom: 0.5rem; }
.zeiten dt { color: var(--tinte); }
.zeiten dd { margin: 0; text-align: right; color: var(--tinte-weich); }
.zeiten .hours-closed { color: var(--grau); }
.zeiten .is-today { color: var(--tinte); }
.zeiten .is-today dt { font-weight: 500; }
.zeiten .is-today dt::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--zinnober); margin-right: 0.6rem; vertical-align: 0.15em; }
.abend-aktion { display: flex; flex-wrap: wrap; gap: 0.8rem 1rem; margin-top: 2rem; }
.abend .fussnote { margin-top: 1.6rem; }
.abend address { margin-top: 0.8rem; font-size: 0.86rem; color: var(--grau); }
.siegel {
  display: inline-grid; place-items: center; width: 52px; height: 52px; margin-top: 2rem;
  color: var(--zinnober); border: 1.5px solid var(--zinnober); border-radius: 4px;
  font-family: var(--display); font-size: 1.05rem; transform: rotate(-4deg);
}
@media (max-width: 899px) {
  .js .abend { height: auto; }
  .js .abend-buehne { position: relative; height: auto; }
  .abend-buehne { display: block; min-height: 0; padding: 1rem 0 3.5rem; }
  .abend .seq-canvas, .abend .seq-still { position: relative; left: auto; bottom: auto; display: block; width: 74vw; margin: 0 0 1rem -6vw; }
  .js .abend .seq-still { display: none; }
  .abend-inhalt { margin-inline: auto; }
  .zeiten { margin-top: 1.2rem; gap: 0.6rem; font-size: 0.92rem; }
  .zeiten > div { grid-template-columns: 1fr; gap: 0.1rem; }
  .zeiten dd { text-align: left; color: var(--grau); }
  .abend-aktion { margin-top: 1.4rem; }
  .abend-aktion .knopf { flex: 1 1 100%; }
  .abend .fussnote { margin-top: 1.1rem; }
  .siegel { width: 44px; height: 44px; margin-top: 1.4rem; }
}

@media (prefers-reduced-motion: reduce) {
  .js .kueche, .js .abend { height: auto; }
  .js .kueche-buehne, .js .abend-buehne { position: relative; height: auto; min-height: var(--blatt); }
  .js .seq-canvas { display: none !important; }
  .js .seq-still { display: block !important; }
}

/* =========================================================================
   Fuß: wieder der schwarze Tisch. Gold nur im Logo und in der Haarlinie.
   ========================================================================= */
.foot { background: var(--lack); border-top: 0; padding: clamp(3.5rem, 7vw, 6rem) var(--gutter) clamp(1.5rem, 3vw, 2.2rem); font-size: var(--fs-small); color: var(--ash); }
.foot-inner { width: min(100%, var(--wrap)); margin-inline: auto; display: grid; grid-template-columns: 1fr; gap: clamp(2rem, 4vw, 4rem); }
@media (min-width: 760px) { .foot-inner { grid-template-columns: 1.4fr 1fr 1fr auto; align-items: start; } }
/* Sein Pagodenmotiv, auf Schwarz komponiert: steht still am rechten Rand des Tisches */
.foot-motiv { width: clamp(120px, 11vw, 160px); height: auto; justify-self: end; align-self: center; opacity: 0.92; pointer-events: none; }
@media (max-width: 759px) { .foot-motiv { width: 38vw; margin-top: 0.5rem; } }
.foot-marke img { width: 180px; height: auto; margin-bottom: 1.4rem; }
.foot-marke p { margin: 0 0 0.9rem; line-height: 1.7; }
.foot a { text-decoration: none; color: var(--ash); transition: color 0.3s var(--ease); }
.foot a:hover, .foot a:focus-visible { color: var(--brass-lit); }
.foot-titel { font-family: var(--text); font-size: var(--fs-label); font-weight: 500; letter-spacing: 0.24em; text-transform: uppercase; color: var(--brass); margin: 0 0 1rem; }
.foot-nav, .foot-extern { display: grid; gap: 0.55rem; align-content: start; }
.foot-nav a { font-family: var(--display); font-size: 1.15rem; color: var(--chalk); }
.foot-titel--social { margin-top: 2rem; }
.foot-social { display: flex; gap: 0.7rem; }
.foot-social a { width: 40px; height: 40px; border: 1px solid var(--line-brass); border-radius: 50%; display: grid; place-items: center; color: var(--brass); transition: color 0.3s var(--ease), border-color 0.3s var(--ease); }
.foot-social a:hover, .foot-social a:focus-visible { color: var(--brass-lit); border-color: var(--brass-lit); }
.foot-social svg { width: 18px; height: 18px; fill: currentColor; }
.foot-ehren { display: flex; align-items: center; gap: 1.1rem; margin-top: 1.6rem; }
.foot-ehren img { width: clamp(76px, 8vw, 104px); height: auto; }
.foot-ehren a { display: inline-flex; }
.foot-bottom { width: min(100%, var(--wrap)); margin: clamp(2.5rem, 5vw, 4rem) auto 0; padding-top: 1.3rem; border-top: 1px solid var(--line-brass); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.8rem 2rem; color: var(--ash-dim); }
.foot-bottom nav { display: flex; flex-wrap: wrap; gap: 0.8rem 1.6rem; }

/* =========================================================================
   Unterseiten: derselbe Rahmen, dieselben Farben. Die Seiten selbst sind
   ein Blatt ohne Hero.
   ========================================================================= */
.blatt--seite { padding-top: 0; }
.blatt--seite .pagehead, .blatt--seite .section--night, .blatt--seite .section--night-soft,
.blatt--seite .reserve, .blatt--seite .origin, .blatt--seite .stage { background: transparent; }
.blatt--seite .lattice { display: none; }
.blatt--seite .pagehead { padding-top: clamp(8rem, 6.5rem + 8vw, 12rem); position: relative; overflow: clip; }
.blatt--seite .pagehead .wrap { position: relative; z-index: 1; }
/* Ein Motiv je Unterseite, oben rechts, halb aus der Blattkante */
.kopf-motiv { position: absolute; right: -1vw; top: clamp(3.5rem, 2.5rem + 3vw, 6rem); width: clamp(200px, 20vw, 300px); height: auto; pointer-events: none; }
@media (max-width: 760px) {
  .kopf-motiv { position: static; display: block; width: 46vw; margin: 1.6rem var(--gutter) 0 auto; }
}
.blatt--seite .lead, .blatt--seite .origin .lead { color: var(--tinte-weich); }
.blatt--seite .chapter, .blatt--seite .origin .chapter { color: var(--altgold); }
.blatt--seite .origin { color: var(--tinte-weich); }
.blatt--seite .origin h2, .blatt--seite .origin-points b { color: var(--tinte); }
.blatt--seite .origin-points li { border-top-color: var(--linie-gold); }
.blatt--seite .origin-points span { color: var(--tinte-weich); }
.blatt--seite .arrival-meta { border-color: var(--linie-gold); }
.blatt--seite .arrival-meta dt { color: var(--altgold); }
.blatt--seite .arrival-meta dd { color: var(--tinte); }
.blatt--seite .arrival-meta dd span { color: var(--grau); }
.blatt--seite .frame { background: #fff; padding: 8px; border-radius: 0; box-shadow: 0 1px 2px rgba(23, 19, 15, 0.08), 0 22px 44px -24px rgba(23, 19, 15, 0.4); }
.blatt--seite .frame::after { display: none; }
.blatt--seite .frame img { transition: none; }
.blatt--seite figure.frame figcaption { position: static; padding: 0.7rem 0 0; margin: 0; background: none; color: var(--grau); font-size: 0.72rem; letter-spacing: 0.04em; }
.blatt--seite .pagehead-media { border-radius: 0; background: #fff; padding: 8px; }
.blatt--seite .pagehead-media::after { display: none; }
.blatt--seite .steps li { border-top-color: var(--linie-gold); }
.blatt--seite .steps li::before { color: var(--altgold); }
.blatt--seite .steps b { color: var(--tinte); }
.blatt--seite .dish { border-color: var(--linie); }
.blatt--seite .dish:last-child { border-bottom-color: var(--linie); }
.blatt--seite .dish-name { color: var(--tinte); }
.blatt--seite .dish-desc, .blatt--seite .menu-intro, .blatt--seite .menu-note { color: var(--grau); }
.blatt--seite .dish-price { color: var(--tinte); }
.blatt--seite .menu-note { border-top-color: var(--linie); }
@media (hover: hover) {
  .blatt--seite .dish:hover { background: rgba(186, 156, 43, 0.07); }
  .blatt--seite .dish:hover .dish-name { color: var(--altgold); }
}
.blatt--seite .menu-index a { color: var(--grau); }
.blatt--seite .menu-index a:hover, .blatt--seite .menu-index a:focus-visible, .blatt--seite .menu-index a.is-current { color: var(--tinte); }
@media (max-width: 979px) {
  .blatt--seite .menu-index { background: rgba(243, 238, 228, 0.94); border-bottom-color: var(--linie); top: calc(var(--rand) + 58px); }
}
.blatt--seite .hours-list > div { border-bottom-color: var(--linie); }
.blatt--seite .hours-list dt, .blatt--seite .hours-list .day-name { color: var(--tinte); }
.blatt--seite .hours-list dd, .blatt--seite .hours-list .day-time { color: var(--tinte-weich); }
.blatt--seite .hours-closed { color: var(--grau); }
.blatt--seite .is-today { color: var(--tinte); }
.blatt--seite .is-today .day-name { font-weight: 500; }
.blatt--seite .contact-lines a:hover { color: var(--altgold); }
.blatt--seite .legal a { color: var(--altgold); }
.blatt--seite .legal-note { border-top-color: var(--linie); color: var(--grau); }
.blatt--seite .link { color: var(--tinte); }
.blatt--seite .link:hover { color: var(--altgold); }
.blatt--seite .btn--primary { background: var(--tinte); border-color: var(--tinte); color: var(--papier); box-shadow: none; }
.blatt--seite .btn--primary::before { background: #2B241F; }
.blatt--seite .btn--primary:hover, .blatt--seite .btn--primary:focus-visible { box-shadow: none; }
.blatt--seite .btn--ghost { border-color: var(--tinte); color: var(--tinte); }
.blatt--seite .btn--ghost::before { background: var(--tinte); }
.blatt--seite .btn--ghost:hover, .blatt--seite .btn--ghost:focus-visible { color: var(--papier); border-color: var(--tinte); }
.blatt--seite .menu-block-head h2 { color: var(--tinte); }


/* =========================================================================
   Galerie: die Fotoschleife. Acht Abzüge auf einem Kreisbogen, zu ziehen mit
   Maus oder Finger, endlos in beide Richtungen (Mechanik in main.js, Modul 7).
   ========================================================================= */
.galerie { padding: clamp(4rem, 10vh, 7rem) 0 clamp(5rem, 12vh, 9rem); overflow: clip; }
.galerie-kopf { width: min(100% - 2 * var(--gutter), 1240px); margin-inline: auto; display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1rem 2rem; }
.galerie h2 { font-size: clamp(1.8rem, 1.3rem + 2vw, 3rem); }
.galerie-hinweis { font-size: 0.8rem; color: var(--grau); margin: 0; }
.galerie .stage-viewport { margin-top: clamp(2rem, 4vw, 3.2rem); }
.js .galerie .stage-viewport { height: clamp(360px, 44vw, 620px); }
.js .galerie .stage-item { width: clamp(220px, 27vw, 400px); }
.galerie .stage-item img { aspect-ratio: 4 / 5; border-radius: 0; border: 8px solid #fff; box-shadow: 0 1px 2px rgba(23, 19, 15, 0.1), 0 30px 60px -30px rgba(23, 19, 15, 0.55); }
.galerie .stage-track { padding-inline: var(--gutter); }
.galerie .stage-caption { font-size: 0.82rem; color: var(--grau); }
.galerie .stage-info::before { background: var(--messing); }
.galerie .stage-name { color: var(--tinte); }
.galerie .stage-desc { color: var(--grau); }
.galerie .stage-zaehler { color: var(--grau); }
.galerie .stage-btn { color: var(--tinte); background: rgba(243, 238, 228, 0.92); border-color: var(--linie); }
.galerie .stage-btn:hover, .galerie .stage-btn:focus-visible { color: var(--papier); background: var(--tinte); border-color: var(--tinte); }
@media (max-width: 760px) { .js .galerie .stage-viewport { height: clamp(320px, 96vw, 420px); } .js .galerie .stage-item { width: min(62vw, 250px); } }

/* =========================================================================
   Gästestimmen: drei schmale Zettel, ein rotes Siegel, sonst nur Schrift.
   ========================================================================= */
.stimmen { padding: 0 var(--gutter) clamp(5rem, 12vh, 9rem); }
.stimmen-inner { max-width: 1240px; margin-inline: auto; }
.stimmen h2 { font-size: clamp(1.8rem, 1.3rem + 2vw, 3rem); }
.zettel-reihe { list-style: none; margin: clamp(2rem, 4vw, 3rem) 0 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 1.2rem; }
.zettel { position: relative; background: #fff; padding: 1.5rem 1.5rem 1.3rem; box-shadow: 0 1px 2px rgba(23, 19, 15, 0.08), 0 22px 44px -24px rgba(23, 19, 15, 0.35); }
.zettel::before { content: ''; position: absolute; inset: 8px; border: 1px solid var(--linie-gold); pointer-events: none; }
.zettel-siegel { position: absolute; top: 1.1rem; right: 1.2rem; width: 30px; height: 30px; display: grid; place-items: center; color: var(--zinnober); border: 1.5px solid var(--zinnober); border-radius: 3px; font-family: var(--display); font-size: 0.72rem; transform: rotate(-4deg); }
.zettel-wert { font-size: 0.66rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--altgold); margin: 0 0 1rem; }
.zettel blockquote { margin: 0; font-family: var(--display); font-size: clamp(1.05rem, 0.95rem + 0.4vw, 1.3rem); line-height: 1.4; color: var(--tinte); }
.zettel-wer { margin: 1.2rem 0 0; font-size: 0.8rem; color: var(--grau); }
.zettel-wer b { font-weight: 500; color: var(--tinte-weich); }
.stimmen-mehr { margin: 1.8rem 0 0; font-size: 0.82rem; color: var(--grau); display: flex; flex-wrap: wrap; gap: 0.6rem 1.4rem; }
.stimmen-mehr a { color: var(--tinte); text-decoration: none; border-bottom: 1px solid var(--linie-gold); padding-bottom: 0.15em; }
.stimmen-mehr a:hover { color: var(--altgold); }
@media (min-width: 760px) {
  .zettel-reihe { grid-template-columns: repeat(3, 1fr); gap: clamp(1.2rem, 3vw, 2.5rem); align-items: start; }
  .zettel:nth-child(2) { margin-top: 2.2rem; }
}

/* ---------- Menü-Overlay: rechts sein Bonsai mit Kranich, nur auf großen Bildschirmen ---------- */
.menu-bild { display: none; }
@media (min-width: 900px) {
  .menu-bild { display: block; position: absolute; right: clamp(3rem, 9vw, 11rem); top: 50%; width: min(26vw, 380px); height: auto; transform: translateY(-46%); opacity: 0; pointer-events: none; transition: opacity 0.7s var(--ease) 0.15s, transform 0.9s var(--ease) 0.15s; }
  .menu.is-open .menu-bild { opacity: 1; transform: translateY(-50%); }
  .no-js .menu:target .menu-bild { opacity: 1; }
}

/* =========================================================================
   Der Teich: drei Koi ziehen ihre Bahnen über das Papier (Canvas in blatt.js).
   Ohne JavaScript oder mit reduzierter Bewegung liegt ein Koi still da.
   ========================================================================= */
.teich { position: relative; min-height: min(72svh, 640px); padding: clamp(4rem, 9vh, 6rem) var(--gutter); overflow: clip; }
.teich-kopf { position: relative; z-index: 2; text-align: center; max-width: 30rem; margin-inline: auto; pointer-events: none; }
.teich h2 { font-size: clamp(1.8rem, 1.3rem + 2vw, 3rem); }
.teich-kopf .ueber { margin-bottom: 1.2rem; }
.teich-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.teich-still { display: none; position: absolute; left: 10%; bottom: 10%; width: clamp(160px, 22vw, 300px); height: auto; opacity: 0.92; transform: rotate(-14deg); pointer-events: none; }
.no-js .teich-canvas { display: none; }
.no-js .teich-still { display: block; }
@media (prefers-reduced-motion: reduce) { .js .teich-canvas { display: none; } .js .teich-still { display: block; } }

/* =========================================================================
   Sushi-Seite: die Kollektion. Ein Freisteller auf dem Mandala, rechts der
   Text, darunter die Auswahl. Bilder sind stilisierte Darstellungen.
   ========================================================================= */
.sushi-buehne { padding: clamp(7.5rem, 6rem + 6vw, 11rem) var(--gutter) clamp(4rem, 8vh, 6rem); }
.sushi-grid { display: grid; grid-template-columns: 1fr; gap: 2.5rem; align-items: center; max-width: 1240px; margin-inline: auto; }
.sushi-bild { position: relative; aspect-ratio: 1; width: min(100%, 560px); margin-inline: auto; }
.sushi-mandala { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.5; pointer-events: none; }
.sushi-stapel { position: absolute; inset: 13%; }
.sushi-stapel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transform: scale(0.96); transition: opacity 0.6s var(--ease), transform 0.9s var(--ease); filter: drop-shadow(0 26px 28px rgba(23, 19, 15, 0.26)); pointer-events: none; }
.sushi-stapel img.ist-aktiv { opacity: 1; transform: none; }
.sushi-note { position: absolute; left: 0; bottom: -1.6rem; margin: 0; font-size: 0.62rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--grau); }
.sushi-titel { font-size: clamp(2rem, 1.4rem + 2.6vw, 3.6rem); }
.sushi-desc { margin-top: 1.2rem; }
.sushi-meta { margin: 1.3rem 0 0; font-size: 0.66rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--altgold); }
.sushi-steuer { display: flex; align-items: center; gap: 1rem; margin-top: 1.8rem; }
.sushi-steuer button { width: 46px; height: 46px; border: 1px solid var(--linie); border-radius: 50%; display: grid; place-items: center; color: var(--tinte); background: transparent; transition: background-color 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease); }
.sushi-steuer button:hover, .sushi-steuer button:focus-visible { background: var(--tinte); color: var(--papier); border-color: var(--tinte); }
.sushi-steuer button svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.sushi-zaehler { font-variant-numeric: tabular-nums; letter-spacing: 0.2em; font-size: 0.72rem; color: var(--grau); }
.sushi-thumbs { list-style: none; margin: 1.4rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.6rem; }
.sushi-thumbs button { width: 64px; height: 64px; padding: 6px; background: #fff; border: 1px solid var(--linie); cursor: pointer; transition: border-color 0.3s var(--ease), transform 0.3s var(--ease); }
.sushi-thumbs button:hover { transform: translateY(-2px); }
.sushi-thumbs button.ist-aktiv { border-color: var(--messing); }
.sushi-thumbs img { width: 100%; height: 100%; object-fit: contain; display: block; }
.sushi-text .link { margin-top: 1.8rem; }
@media (min-width: 900px) {
  .sushi-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 6vw, 6rem); }
  .sushi-desc { min-height: 3.4em; }
}
.sushi-auswahl-grid { display: grid; grid-template-columns: 1fr; gap: 2.5rem; }
.sushi-auswahl .dishes { margin-top: 0; }
.sushi-auswahl .frame { margin: 2rem 0 0; max-width: 380px; }
@media (min-width: 900px) { .sushi-auswahl-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; } }


/* ---------- Adrians Sektionen in unserem Blatt ---------- */
.adr--seite { padding-top: clamp(5.5rem, 4.5rem + 4vw, 7.5rem); }
.adr .koi-pond, .adr .sushi-cinema, .adr .location-section { border-left: 0; border-right: 0; }