/* ============================================================
   YAKUKO RAMEN, Gießen

   Farben und Schriften folgen dem Corporate Design 2026 des
   Kunden. Die sechs Unternehmensfarben stehen dort als CMYK und
   RGB; hier sind sie in Hexadezimal umgerechnet. Jeder Zwischenton
   ist als Mischung zweier offizieller Farben angegeben, damit die
   Palette geschlossen bleibt.

   Schrift laut Handbuch: Trajan Pro fuer den Schriftzug und
   Headlines, Calibri fuer Subheadline und Grundtext.
   Ausgeliefert werden die frei lizenzierten Entsprechungen
   Cinzel (Trajan) und Carlito (metrisch gleich zu Calibri).
   ============================================================ */

:root {
  /* --- Unternehmensfarben, unveraendert aus dem Handbuch --- */
  --navy: #00112B;        /* CMYK 100 50  0 90  ·  RGB   0  17  43 */
  --schwarz: #000000;     /* CMYK  35 10 10 100 ·  RGB   0   0   0 */
  --indigo: #263272;      /* CMYK 100 90 20 10  ·  RGB  38  50 114 */
  --noren: #931725;       /* CMYK  25 100 80 30 ·  RGB 147  23  37 */
  --blass: #E9B8BA;       /* CMYK   8 35 20  0  ·  RGB 233 184 186 */
  --rose: #E8829D;        /* CMYK  10 60 20  0  ·  RGB 232 130 157 */

  /* --- Abgeleitet, jeweils zwei offizielle Farben gemischt --- */
  --navy-2: #08183B;      /* Navy + 22 % Indigo */
  --navy-3: #152352;      /* Navy + 55 % Indigo */
  --blue: #263272;        /* = Indigo, alter Name bleibt erhalten */
  --rose-deep: #CB5E74;   /* Rosé + 34 % Noren-Rot */
  --noren-hell: #A93344;  /* Noren-Rot + 26 % Rosé */
  --noren-tief: #611527;  /* Noren-Rot + 34 % Navy */
  --ink: #FDF9F9;         /* Weiß + 9 % Blassrosé */
  --ink-dim: #ABADC6;     /* Ink + 38 % Indigo */

  /* --- Schriften ---
     Nach den eigenen Schriften folgen japanische Systemschriften fuer
     macOS/iOS, Windows und Android. Die Zeichen, die nicht im kleinen
     Subset stecken, haben so ueberall eine echte Schrift statt Kaestchen. */
  --font: "Carlito", "Zen Kaku Gothic New", Calibri, "Hiragino Kaku Gothic ProN",
          "Yu Gothic UI", "Yu Gothic", Meiryo, "Noto Sans JP", "Noto Sans CJK JP", sans-serif;
  --font-jp: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Yu Gothic UI",
             Meiryo, "Noto Sans JP", sans-serif;
  --font-display: "Cinzel", "Trajan Pro", "Times New Roman", serif;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --pad: clamp(20px, 5vw, 96px);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; overflow-x: clip; }

body {
  background: var(--navy);
  color: var(--ink);
  font-family: var(--font);
  line-height: 1.65;   /* Handbuch: Grundtext 9 pt auf 15 pt Zeilenabstand */
  letter-spacing: 0.012em;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
  max-width: 100%;
}

img { max-width: 100%; display: block; }

/* ---------- Das Siegel, das sich schreibt ----------

   Vorher fuellte sich hier eine Flaeche hinter einer Maske von oben
   nach unten. Der Kunde hat den Aufbau aus Fassung B gesehen und ihn
   sich hier gewuenscht: dort werden die zwanzig Linien des Siegels
   einzeln gezogen, in der Reihenfolge, in der man sie von Hand
   schriebe — erst der Ring aussen, dann die Striche des Zeichens von
   oben nach unten. Oben auf der Seite ist nichts zu sehen, unten
   angekommen steht das ganze Siegel.

   Es liegt fest im Fenster und hinter allem. Bei reduzierter Bewegung
   steht es sofort vollstaendig da, statt sich aufzubauen. */
#logo-zeichnung {
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: min(62vh, 460px);
  aspect-ratio: 1 / 1;
  z-index: 1;
  pointer-events: none;
  /* --fortschritt kommt aus js/main.js und laeuft von 0 bis 1 */
  opacity: calc(0.10 + var(--fortschritt, 0) * 0.16);
}
#logo-zeichnung svg { width: 100%; height: 100%; display: block; }
#logo-zeichnung path {
  fill: none;
  stroke: var(--rose);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
@media (prefers-reduced-motion: reduce) {
  #logo-zeichnung path { stroke-dashoffset: 0 !important; }
}
.legal-page #logo-zeichnung { display: none; }

/* Auf schmalen Schirmen kleiner und noch leiser: dort liegt es naeher
   an der Schrift, und der Ring wuerde sonst quer ueber die Seite
   laufen. */
@media (max-width: 720px) {
  #logo-zeichnung {
    width: min(72vw, 380px);
    opacity: calc(0.08 + var(--fortschritt, 0) * 0.12);
  }
}

/* ---------- Header ---------- */

.site-head {
  /* Steht ein Hinweisband oben, rutscht die Kopfzeile um dessen Hoehe nach unten. */
  position: fixed; top: var(--band-hoehe, 0px); left: 0; width: 100%; z-index: 60;
  transition: top 0.3s var(--ease);
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px var(--pad);
  background: linear-gradient(to bottom, rgba(0,17,43,0.95), rgba(0,17,43,0));
}
.brand { display: flex; align-items: center; text-decoration: none; color: var(--ink); }
.brand-name {
  font-family: var(--font-display);
  font-weight: 600; font-size: 18px;
  letter-spacing: 0.18em; text-transform: uppercase;
}
.head-right { display: flex; align-items: center; gap: clamp(18px, 3vw, 40px); }
.head-nav { display: flex; align-items: center; gap: clamp(14px, 2vw, 28px); }
.head-nav a {
  color: var(--ink); text-decoration: none;
  font-size: 14px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  transition: color 0.18s var(--ease);
}
.head-nav a:hover { color: var(--rose); }

.lang-toggle {
  background: none; border: 1.5px solid rgba(253,249,249,0.4);
  color: var(--ink); font-family: var(--font);
  font-size: 12px; font-weight: 700; letter-spacing: 0.12em;
  padding: 4px 10px; cursor: pointer;
  transition: border-color 0.18s, color 0.18s;
}
.lang-toggle:hover { border-color: var(--rose); color: var(--rose); }

/* Ton an/aus. Reine Ikone, kein Rahmen -- die Kuenstlernennung steht
   im Impressum, nicht in der Kopfzeile. */
.sound-toggle {
  display: inline-flex; align-items: center;
  background: none; border: none;
  color: var(--ink); padding: 6px; line-height: 0; cursor: pointer;
  transition: color 0.18s;
}
.sound-toggle:hover { color: var(--rose); }
.sound-toggle svg { width: 16px; height: 16px; }
.sound-toggle .i-on { display: none; }
.sound-toggle.playing .i-off { display: none; }
.sound-toggle.playing .i-on { display: block; }
.sound-toggle.playing { color: var(--rose); }

.status { font-size: 14px; font-weight: 500; color: var(--rose); letter-spacing: 0.08em; }
.status.closed { color: var(--ink-dim); }

.burger {
  display: none; flex-direction: column; align-items: flex-end; gap: 4px;
  background: none; border: none; padding: 8px 0; cursor: pointer;
}
.burger span {
  display: block; width: 20px; height: 1.6px; background: var(--ink);
  border-radius: 2px;
  transition: transform 0.4s var(--ease), opacity 0.25s var(--ease), background 0.25s var(--ease), width 0.4s var(--ease);
}
.burger span:nth-child(2) { width: 14px; }
.burger.open span { background: var(--rose); width: 20px; }
.burger.open span:nth-child(1) { transform: translateY(5.6px) rotate(45deg); }
.burger.open span:nth-child(2) { opacity: 0; }
.burger.open span:nth-child(3) { transform: translateY(-5.6px) rotate(-45deg); }

/* Status oben: nur solange der Hero sichtbar ist */
.status {
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
}
.status.weg { opacity: 0; transform: translateY(-6px); pointer-events: none; }

.hero-adresse {
  margin-top: 16px;
  font-size: clamp(13px, 1.1vw, 16px);
  color: var(--ink-dim);
  letter-spacing: 0.16em;
}

/* ---------- Hero mit Noren-Vorhang ---------- */

.hero {
  position: relative;
  min-height: 100dvh;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  padding: 0 0 clamp(40px, 6vh, 72px);
  overflow: hidden;
}

/* Buehne: Vorhang oben, dahinter der Status */
.hero-stage {
  position: relative;
  min-height: clamp(300px, 52vh, 560px);
  display: grid; place-items: center;
}
.hero-behind {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  padding-top: clamp(60px, 10vh, 120px);
  z-index: 1;
}
/* Geschlossen haengt der Vorhang zu. Dann rueckt der Status unter die Bahnen,
   sonst steht er dahinter und ist nicht lesbar. */
.hero-stage.zu .hero-behind {
  align-items: end;
  padding-top: 0;
  padding-bottom: clamp(8px, 2vh, 24px);
  z-index: 3;
}
.hero-status {
  text-align: center;
  font-size: clamp(28px, 4.4vw, 66px);
  font-weight: 700; line-height: 1.14;
  color: var(--ink); letter-spacing: 0.04em;
  opacity: 0; transform: translateY(16px);
}
.hero-status .de { color: var(--rose); }
.hero-status.closed .de { color: var(--ink-dim); }
.noren.open ~ .hero-behind .hero-status,
.hero-behind.zeigen .hero-status {
  animation: status-auf 1.1s var(--ease) 0.85s forwards;
}
@keyframes status-auf {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}

.hero-inner {
  position: relative; z-index: 3;
  padding: clamp(20px, 3vh, 40px) var(--pad) 0;
}
.hero-inner h1 {
  font-family: var(--font-display);
  font-size: clamp(40px, 7vw, 108px);
  font-weight: 700; line-height: 0.98;
  letter-spacing: 0.05em; text-transform: uppercase;
}
.jp-block {
  display: block; font-family: var(--font-jp);
  margin-top: 14px;
  font-size: clamp(15px, 1.5vw, 22px);
  font-weight: 500; color: var(--rose);
  letter-spacing: 0.34em;
}

/* Noren haengt ueber die volle Breite und teilt sich in der Mitte */
.noren {
  position: absolute; top: 0; left: 0; right: 0;
  z-index: 2; pointer-events: none;
  overflow: hidden;
  height: 100%;
}
.noren-rod {
  position: absolute; top: clamp(52px, 8vh, 86px); left: -1%; right: -1%; height: 13px;
  background: linear-gradient(#D8B98C, #9B7A50 55%, #6E5334);
  border-radius: 7px;
  box-shadow: 0 5px 16px rgba(0,0,0,0.5);
  z-index: 3;
}
.noren-panels {
  position: absolute; top: calc(clamp(52px, 8vh, 86px) + 9px); left: 0; right: 0;
  height: clamp(230px, 40vh, 420px);
  display: flex; gap: 4px; padding: 0 1%;
}
/* Zwei Ebenen: aussen laeuft einmalig das Aufziehen, innen das dauerhafte
   Wehen mit festen Gradzahlen. So muss pro Bild nichts nachgerechnet werden. */
.np {
  flex: 1;
  position: relative;
  transform-origin: top center;
  will-change: transform;
}
.np-blatt {
  position: absolute; inset: 0;
  background:
    linear-gradient(100deg, rgba(0,0,0,0.22) 0%, transparent 22%, transparent 78%, rgba(0,0,0,0.18) 100%),
    linear-gradient(180deg, #A93344 0%, var(--noren) 42%, #611527 100%);
  border-radius: 0 0 3px 3px;
  display: grid; place-items: center;
  transform-origin: top center;
  will-change: transform;
}
/* Schlaufen oben */
.np-blatt::before {
  content: "";
  position: absolute; top: -10px; left: 12%; right: 12%; height: 16px;
  background: var(--noren);
  border-radius: 3px 3px 0 0;
}
.np-char {
  font-family: var(--font-jp);
  font-size: clamp(26px, 3.4vw, 56px);
  font-weight: 900; color: #fff;
}
.np-badge {
  font-family: var(--font-jp);
  writing-mode: vertical-rl;
  font-size: clamp(11px, 1vw, 15px);
  font-weight: 700; color: #fff;
  border: 2px solid #fff; border-radius: 4px;
  padding: 8px 3px; letter-spacing: 0.15em;
}

/* Die inneren Bahnen weichen am weitesten, die aeusseren kaum:
   dadurch entsteht ein echtes Raffen statt eines gleichfoermigen Wegschiebens. */
/* Weniger Weg als vorher: der Vorhang bleibt deutlich praesenter stehen. */
.np-l1 { --dir: -1; --weg: 122%; --neig: -6deg; --ver: 0s;    }
.np-l2 { --dir: -1; --weg: 76%;  --neig: -4deg; --ver: 0.08s; }
.np-l3 { --dir: -1; --weg: 32%;  --neig: -2deg; --ver: 0.16s; }
.np-r1 { --dir: 1;  --weg: 122%; --neig: 6deg;  --ver: 0.04s; }
.np-r2 { --dir: 1;  --weg: 76%;  --neig: 4deg;  --ver: 0.12s; }
.np-r3 { --dir: 1;  --weg: 32%;  --neig: 2deg;  --ver: 0.20s; }

/* Bewegung ueber die Einzeleigenschaften translate und rotate statt ueber
   transform mit calc(). Das Wehen animiert danach nur noch rotate, also
   einen einzigen billigen Wert pro Bild. Genau das hat vorher geruckelt. */
@media (prefers-reduced-motion: no-preference) {
  /* Aussen: einmaliges Aufziehen, danach steht der Wert fest. */
  .noren.open .np {
    animation: noren-auf 2.5s cubic-bezier(0.32, 0.72, 0.2, 1) var(--ver) both;
  }
  /* Innen: dauerhaftes Wehen, feste Gradzahlen, ein Wert pro Bild. */
  .noren.open .np-blatt { animation: noren-weht 9s ease-in-out calc(var(--ver) + 2.5s) infinite; }
  /* Geschlossen: der Vorhang lugt einmal auf, faellt schnell zu und die
     Bahnen schwingen dabei nach wie bei einer Pendeltuer. Danach nur Wind. */
  .noren.shut .np { animation: noren-lugt 3.4s cubic-bezier(0.4, 0, 0.25, 1) var(--ver) both; }

  /* Der Stoff bleibt beim Zufallen zurueck und pendelt sich aus.
     Die Seiten schwingen gegenlaeufig, weil sie aus verschiedenen
     Richtungen zur Mitte zurueckfallen. */
  /* Der Einsatz liegt beim Scheitelpunkt der Bewegung (62 % von 3,6 s),
     damit der Stoff genau dann zurueckbleibt, wenn der Vorhang faellt. */
  .noren.shut .np-l1 .np-blatt,
  .noren.shut .np-l2 .np-blatt,
  .noren.shut .np-l3 .np-blatt {
    animation: schwingt-links 3.2s cubic-bezier(0.2, 0.7, 0.3, 1) 2.2s both,
               noren-weht 8s ease-in-out 5.4s infinite;
  }
  .noren.shut .np-r1 .np-blatt,
  .noren.shut .np-r2 .np-blatt,
  .noren.shut .np-r3 .np-blatt {
    animation: schwingt-rechts 3.2s cubic-bezier(0.2, 0.7, 0.3, 1) 2.2s both,
               noren-weht 8s ease-in-out 5.4s infinite;
  }
  /* Die aeusseren Bahnen schwingen etwas spaeter und schwaecher nach */
  .noren.shut .np-l2 .np-blatt, .noren.shut .np-r2 .np-blatt { animation-delay: 2.28s, 5.7s; }
  .noren.shut .np-l3 .np-blatt, .noren.shut .np-r3 .np-blatt { animation-delay: 2.36s, 6s; }
}

/* Kurz anholen, weit aufziehen, dann sichtbar wieder ein Stueck zurueckfallen. */
@keyframes noren-auf {
  0%   { translate: 0 0;                                    rotate: 0deg;                          scale: 1 1; }
  14%  { translate: calc(var(--dir) * -3%) 0;               rotate: calc(var(--neig) * -0.22);     scale: 1.01 1; }
  58%  { translate: calc(var(--dir) * var(--weg) * 1.22) 0; rotate: var(--neig);                   scale: 0.84 1; }
  100% { translate: calc(var(--dir) * var(--weg)) 0;        rotate: calc(var(--neig) * 0.85);      scale: 0.88 1; }
}
/* Geschlossen: ruhig auf, dann deutlich schneller wieder zu.
   Das Aufziehen belegt drei Viertel der Zeit, das Zufallen nur ein Viertel,
   und die zweite Kurve beschleunigt zusaetzlich zum Ende hin. */
@keyframes noren-lugt {
  0%   { translate: 0 0;
         animation-timing-function: cubic-bezier(0.3, 0, 0.3, 1); }
  62%  { translate: calc(var(--dir) * var(--weg) * var(--lugweg, 0.42)) 0;
         animation-timing-function: cubic-bezier(0.5, 0, 0.75, 0.95); }
  95%  { translate: calc(var(--dir) * -2%) 0; }
  100% { translate: 0 0; }
}

/* Nachschwingen beim Zufallen: der Stoff bleibt zurueck und pendelt sich
   in immer kleineren Ausschlaegen aus. Feste Gradzahlen, kein calc. */
@keyframes schwingt-links {
  0%   { transform: rotate(0deg); }
  14%  { transform: rotate(3.4deg); }
  32%  { transform: rotate(-2.3deg); }
  49%  { transform: rotate(1.5deg); }
  64%  { transform: rotate(-0.9deg); }
  78%  { transform: rotate(0.5deg); }
  90%  { transform: rotate(-0.2deg); }
  100% { transform: rotate(0deg); }
}
@keyframes schwingt-rechts {
  0%   { transform: rotate(0deg); }
  14%  { transform: rotate(-3.4deg); }
  32%  { transform: rotate(2.3deg); }
  49%  { transform: rotate(-1.5deg); }
  64%  { transform: rotate(0.9deg); }
  78%  { transform: rotate(-0.5deg); }
  90%  { transform: rotate(0.2deg); }
  100% { transform: rotate(0deg); }
}

/* Wehen der inneren Bahn: feste Werte, kein calc, keine Variablen. */
@keyframes noren-weht {
  0%, 100% { transform: rotate(0deg); }
  34%      { transform: rotate(0.9deg); }
  68%      { transform: rotate(-0.7deg); }
}

/* ---------- Bilder ---------- */

/* Kein Kasten, kein zusaetzlicher Hintergrund: das Foto steht fuer sich
   und wird ueber die Spaltenbreite einfach kleiner. */
.ph { position: relative; overflow: hidden; }
.ph img {
  width: 100%; height: auto; display: block;
  transition: transform 0.7s var(--ease);
}
.dish:hover .ph img, .comp-item:hover .ph img { transform: scale(1.04); }

/* ---------- Sektionen ---------- */

section { position: relative; z-index: 2; padding: clamp(72px, 10vw, 140px) var(--pad); }

.sec-title {
  font-family: var(--font-display);
  font-size: clamp(34px, 4.6vw, 64px);
  font-weight: 600; line-height: 1.1;
  letter-spacing: 0.05em; text-transform: uppercase;
  margin-bottom: clamp(36px, 5vw, 72px);
}
.sec-title .jp {
  font-family: var(--font-jp);
  text-transform: none;
  font-size: 0.56em;
  font-weight: 500; color: var(--rose);
  letter-spacing: 0.22em; vertical-align: middle;
  margin-left: 0.5em;
}

/* ---------- Gerichte ---------- */

.dish-feature {
  display: grid; grid-template-columns: 1.4fr 1fr;
  gap: clamp(24px, 4vw, 64px); align-items: end;
  margin-bottom: clamp(48px, 6vw, 96px);
}
.dish-feature .ph { height: min(52vh, 480px); }

.dish-feature-copy h3, .dish h3, .sweet-col h3, .visit-info h3, .sake-list h3 {
  font-size: clamp(22px, 2.2vw, 32px);
  font-weight: 700; margin-bottom: 10px;
}
.dish-feature-copy .jp, .dish .jp, .comp-item h3 .jp {
  font-size: 0.62em; font-weight: 500; color: var(--rose);
  letter-spacing: 0.18em; margin-left: 0.4em; vertical-align: middle;
  font-family: var(--font-jp); text-transform: none;
}
.dish-feature-copy p, .dish p { color: var(--ink-dim); max-width: 46ch; }

.dish-grid, .curry-grid, .sides-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(24px, 2.6vw, 40px) clamp(18px, 2vw, 30px);
}
/* Kein festes Format: das Foto behaelt seine eigenen Proportionen. */
.dish .ph { margin-bottom: 14px; }
.dish h3 { font-size: clamp(17px, 1.4vw, 21px) !important; }
.dish p { font-size: clamp(13px, 1vw, 15px); line-height: 1.6; }

.tag-vegan {
  display: inline-block; font-size: 12px; font-weight: 700;
  letter-spacing: 0.1em; color: var(--rose);
  border: 1.5px solid var(--rose); padding: 3px 12px;
  vertical-align: middle; margin-left: 10px; text-transform: uppercase;
}
.menu-note { margin-top: clamp(36px, 5vw, 64px); color: var(--ink-dim); max-width: 60ch; }

.curry { border-top: 1px solid rgba(253,249,249,0.12); }

/* ---------- Components-Slider ---------- */

.components { border-top: 1px solid rgba(253,249,249,0.12); }
.comp-track {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: clamp(24px, 3vw, 44px);
}
/* Auf schmalen Schirmen zum Wischen, mit Einrasten */
@media (max-width: 900px) {
  .comp-track {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 6px;
    margin-right: calc(var(--pad) * -1);
    padding-right: var(--pad);
  }
  .comp-track::-webkit-scrollbar { display: none; }
  .comp-item { flex: 0 0 66%; scroll-snap-align: start; }
}
.comp-item { display: flex; flex-direction: column; gap: 18px; margin: 0; }
.comp-item .ph { aspect-ratio: 4 / 5; }
.comp-item h3 {
  /* Subheadline: laut Handbuch Calibri Bold, nicht Trajan */
  font-size: clamp(18px, 1.7vw, 24px);
  font-weight: 700; line-height: 1.3;
  letter-spacing: 0.06em; margin-bottom: 10px;
}
.comp-item p { color: var(--ink-dim); font-size: clamp(14px, 1.2vw, 17px); line-height: 1.9; }

/* ---------- Süßes & Sake ---------- */

.sweet { border-top: 1px solid rgba(253,249,249,0.12); }
.sweet-strip {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: clamp(14px, 1.6vw, 22px);
}
.sweet-strip figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 26px 14px 10px;
  background: linear-gradient(transparent, rgba(0,17,43,0.92));
  font-size: 14px; font-weight: 700; letter-spacing: 0.06em;
  z-index: 2;
}
.sake-list { margin-top: clamp(48px, 6vw, 80px); max-width: 60ch; }
.type-list { list-style: none; color: var(--ink-dim); }
.type-list li { padding: 10px 0; border-bottom: 1px solid rgba(253,249,249,0.12); }
.type-list li:last-child { border-bottom: none; }

/* ---------- Angebote ---------- */

/* Glaenzende schwarze Fliesen mit heller Fuge, wie an ihrer Wand.
   Jede Kachel bekommt einen eigenen Lichtverlauf, dadurch wirkt sie
   gewoelbt statt flach kariert. Der Ton bleibt im Navy der Seite. */
.kachelwand {
  position: relative;
  --kachel: clamp(56px, 5vw, 84px);
  background-color: #000C1F;
  background-image:
    /* Glanz auf jeder einzelnen Kachel */
    repeating-linear-gradient(150deg,
      rgba(255,255,255,0.055) 0 2px,
      rgba(255,255,255,0.012) 2px 22%,
      transparent 22% 100%),
    /* Fugen: heller Kern mit dunklem Schattenrand fuer Tiefe */
    repeating-linear-gradient(0deg,
      rgba(0,0,0,0.55) 0 1px,
      rgba(233,184,186,0.34) 1px 3px,
      rgba(0,0,0,0.35) 3px 4px,
      transparent 4px var(--kachel)),
    repeating-linear-gradient(90deg,
      rgba(0,0,0,0.55) 0 1px,
      rgba(233,184,186,0.34) 1px 3px,
      rgba(0,0,0,0.35) 3px 4px,
      transparent 4px var(--kachel)),
    linear-gradient(165deg, #08183B 0%, #000C1F 55%, #000917 100%);
  background-size: var(--kachel) var(--kachel), auto, auto, auto;
}
/* Weicher Ein- und Ausstieg, damit die Wand nicht abrupt anfaengt */
.kachelwand::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(var(--navy) 0%, transparent 18%, transparent 82%, var(--navy) 100%),
    radial-gradient(110% 80% at 72% 26%, transparent 40%, rgba(0,9,23,0.7));
}
.kachelwand > * { position: relative; z-index: 2; }

.deals { border: none; }
.deals .deal {
  background: rgba(0,12,31,0.72);
  backdrop-filter: blur(3px);
  border-color: rgba(232,130,157,0.34);
}
/* Alle drei Karten gleich breit und gleich hoch */
.deal-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 3vw, 36px);
  align-items: stretch;
}
.deal {
  border: 1px solid rgba(232,130,157,0.3);
  padding: clamp(24px, 3vw, 40px);
  display: flex; flex-direction: column; justify-content: flex-start;
  min-height: 300px; height: 100%;
  transition: border-color 0.25s var(--ease), transform 0.25s var(--ease);
}
.deal h3 { margin-top: auto; }
.deal:hover { border-color: var(--rose); transform: translateY(-3px); }
.deal h3 { font-size: clamp(20px, 2vw, 30px); font-weight: 700; margin-bottom: 10px; }
.deal p { color: var(--ink-dim); }
.deal-hero { background: rgba(232,130,157,0.07); }
.deal-icon {
  display: grid; place-items: center;
  width: 62px; height: 62px; margin-bottom: 22px;
  border: 2px solid var(--rose); border-radius: 50%;
  color: var(--rose);
  transform: rotate(-8deg);
}
.deal-icon svg { width: 30px; height: 30px; }

/* Abschluss der Karte mit Weg zum Bestellmenue */
.karte-cta {
  margin-top: clamp(48px, 6vw, 80px);
  padding-top: clamp(28px, 3vw, 44px);
  border-top: 1px solid rgba(253,249,249,0.14);
  display: flex; align-items: center; justify-content: space-between;
  gap: clamp(18px, 3vw, 40px); flex-wrap: wrap;
}
.karte-cta p { color: var(--ink-dim); max-width: 46ch; }
.karte-mehr h3 { font-size: clamp(19px, 1.8vw, 26px); font-weight: 700; margin-bottom: 12px; }
.mehr-liste { list-style: none; color: var(--ink-dim); max-width: 52ch; }
.mehr-liste li { padding: 7px 0 7px 20px; position: relative; }
.mehr-liste li::before {
  content: ""; position: absolute; left: 0; top: 17px;
  width: 7px; height: 7px; border-radius: 50%; background: var(--rose);
}

/* Ton-Regler in der Kopfzeile */
@media (prefers-reduced-motion: no-preference) {
}

.deal-stamp {
  display: grid; place-items: center;
  width: 62px; height: 62px; margin-bottom: 22px;
  border: 2px solid var(--rose); border-radius: 50%;
  color: var(--rose); font-weight: 900; font-size: 20px;
  transform: rotate(-8deg);
}

/* ---------- Geschichte ---------- */

.story {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: 1fr 1.3fr;
  gap: clamp(28px, 5vw, 96px); align-items: center;
  border-top: 1px solid rgba(253,249,249,0.12);
}

/* Kirschbaum als Kulisse hinter der Geschichte. Er waechst, sobald
   die Sektion ins Bild kommt, und bleibt bewusst zurueckhaltend. */
.story-baum {
  position: absolute; right: -4%; bottom: -8%;
  width: min(52vw, 460px); height: 108%;
  z-index: 0; pointer-events: none;
  opacity: 0; transform: none;
  transition: opacity 1.2s var(--ease);
}
.story-baum.in { opacity: 0.5; }
.story > *:not(.story-baum) { position: relative; z-index: 2; }

.story-baum .sakura-holz path { stroke-dasharray: 620; stroke-dashoffset: 620; }
.story-baum .bluetenfeld {
  opacity: 0; transform-box: fill-box; transform-origin: center; transform: scale(0.6);
}
.story-baum .sakura-fall circle { fill: var(--rose); opacity: 0; }

@media (prefers-reduced-motion: no-preference) {
  .story-baum.in .sakura-holz .stamm { animation: holz-wachsen 1.3s var(--ease) 0.1s forwards; }
  .story-baum.in .sakura-holz .ast   { animation: holz-wachsen 1s var(--ease) forwards; }
  .story-baum.in .sakura-holz .ast:nth-of-type(2) { animation-delay: 0.75s; }
  .story-baum.in .sakura-holz .ast:nth-of-type(3) { animation-delay: 0.87s; }
  .story-baum.in .sakura-holz .ast:nth-of-type(4) { animation-delay: 0.99s; }
  .story-baum.in .sakura-holz .ast:nth-of-type(5) { animation-delay: 1.09s; }
  .story-baum.in .sakura-holz .ast:nth-of-type(6) { animation-delay: 1.17s; }
  .story-baum.in .sakura-holz .ast:nth-of-type(7) { animation-delay: 1.25s; }
  .story-baum.in .sakura-holz .ast:nth-of-type(8) { animation-delay: 1.33s; }
  .story-baum.in .bluetenfeld { animation: krone-bluehen 1.4s cubic-bezier(0.34, 1.28, 0.5, 1) forwards; }
  .story-baum.in .bluetenfeld:nth-child(1) { animation-delay: 1.3s; }
  .story-baum.in .bluetenfeld:nth-child(2) { animation-delay: 1.48s; }
  .story-baum.in .bluetenfeld:nth-child(3) { animation-delay: 1.66s; }
  .story-baum.in .sakura-fall circle {
    animation: bluete-segelt 9s ease-in-out calc(2.8s + var(--fv)) infinite;
  }
}
.story-img { aspect-ratio: 4 / 5; max-height: 640px; }
.story-img::after { display: none; }
.story-img img { object-fit: contain; background: var(--navy-2); }
.story-copy p { color: var(--ink-dim); max-width: 58ch; }
.story-copy p + p { margin-top: 18px; }

/* ---------- Social ---------- */

.social {
  display: grid; grid-template-columns: 1.1fr 1fr;
  gap: clamp(28px, 5vw, 80px); align-items: center;
  border-top: 1px solid rgba(253,249,249,0.12);
}
.social-inner p { color: var(--ink-dim); max-width: 44ch; margin-bottom: 28px; }
.social-img { aspect-ratio: 4 / 5; max-height: 560px; }
.social-img::after { display: none; }
.social-img img { object-fit: contain; background: var(--navy-2); }

/* ---------- Knoepfe ---------- */

.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 15px 30px;
  font-family: var(--font); font-size: 15px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  text-decoration: none; border-radius: 0;
  transition: transform 0.18s var(--ease), background 0.18s var(--ease), color 0.18s var(--ease);
  white-space: nowrap;
}
.btn:active { transform: scale(0.98); }
.btn-primary { background: var(--rose); color: var(--navy); }
.btn-primary:hover { background: var(--rose-deep); }
.btn-ghost { color: var(--rose); box-shadow: inset 0 0 0 1.5px var(--rose); }
.btn-ghost:hover { background: var(--rose); color: var(--navy); }
.btn-arrow { display: inline-block; transition: transform 0.25s var(--ease); }
.btn:hover .btn-arrow { transform: translateX(6px); }

/* ---------- Besuch ---------- */

.visit { border-top: 1px solid rgba(253,249,249,0.12); }
.visit-grid {
  display: grid; grid-template-columns: 1.05fr 1fr;
  gap: clamp(28px, 4vw, 64px); align-items: stretch;
}
.addr { font-size: clamp(18px, 1.6vw, 22px); line-height: 1.7; }
.visit-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: clamp(20px, 2.5vw, 30px); }
/* Bestellen und Liefern stehen nebeneinander; der Lieferknopf ist
   ausgeblendet, solange im Dashboard kein Dienst hinterlegt ist. */
.sweet-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.hours-head { margin-top: clamp(28px, 3vw, 44px); }
.hours { border-collapse: collapse; width: 100%; color: var(--ink-dim); }
.hours td { padding: 10px 0; border-bottom: 1px solid rgba(253,249,249,0.12); vertical-align: top; }
.hours td:first-child { color: var(--ink); font-weight: 700; padding-right: 28px; white-space: nowrap; }
.hours tr:last-child td { border-bottom: none; }

/* Neonschriftzug in Marken-Rosa. Kein Kasten mehr: die Roehre schwebt
   frei auf der Seite, nur ihr eigener Schein liegt dahinter. */
.neon-sign {
  position: relative;
  background: radial-gradient(62% 54% at 50% 48%, rgba(232,130,157,0.13) 0%, transparent 70%);
  display: flex; align-items: center; justify-content: center;
  padding: clamp(30px, 4vw, 60px);
  height: 100%; min-height: 380px;
}
.neon-sign::before {
  content: ""; position: absolute; inset: clamp(6px, 1vw, 14px);
  border: 2.5px solid var(--rose); border-radius: 30px;
  box-shadow: 0 0 8px rgba(232,130,157,0.85), 0 0 30px rgba(232,130,157,0.45),
              0 0 80px rgba(232,130,157,0.18),
              inset 0 0 8px rgba(232,130,157,0.7), inset 0 0 34px rgba(232,130,157,0.2);
  pointer-events: none;
}
.neon-sign ul {
  list-style: none; font-weight: 700; text-transform: uppercase;
  font-size: clamp(34px, 3.6vw, 58px);
  line-height: 1.36; letter-spacing: 0.08em;
  color: #F6DCE1;
  text-shadow: 0 0 5px rgba(255,214,232,0.95), 0 0 16px rgba(232,130,157,0.8),
               0 0 42px rgba(232,130,157,0.5), 0 0 90px rgba(232,130,157,0.28);
}
@media (prefers-reduced-motion: no-preference) {
  .neon-sign::before { animation: tube-hum 5s ease-in-out infinite 1.4s; }
  .neon-sign li:nth-child(1) { animation: neon-flicker-soft 13s infinite 4s; }
  .neon-sign li:nth-child(3) { animation: neon-flicker-hard 7s infinite 2s; }
  .neon-sign li:nth-child(5) { animation: neon-flicker-double 11s infinite 6s; }

  /* Zuendung: die Roehre springt zeilenweise an, sobald sie ins Bild kommt */
  .neon-sign.an li { animation: neon-zuenden 0.9s steps(1, end) both; }
  .neon-sign.an li:nth-child(1) { animation-delay: 0.05s; }
  .neon-sign.an li:nth-child(2) { animation-delay: 0.22s; }
  .neon-sign.an li:nth-child(3) { animation-delay: 0.40s; }
  .neon-sign.an li:nth-child(4) { animation-delay: 0.58s; }
  .neon-sign.an li:nth-child(5) { animation-delay: 0.74s; }
  .neon-sign.an::before { animation: neon-rahmen-zuenden 1.5s steps(1, end) both; }
}
@keyframes neon-zuenden {
  0%, 24% { opacity: 0.06; }
  30%     { opacity: 1; }
  38%     { opacity: 0.1; }
  46%     { opacity: 1; }
  54%     { opacity: 0.3; }
  62%     { opacity: 1; }
  100%    { opacity: 1; }
}
@keyframes neon-rahmen-zuenden {
  0%, 40% { opacity: 0.08; }
  46%     { opacity: 1; }
  52%     { opacity: 0.2; }
  60%     { opacity: 1; }
  100%    { opacity: 1; }
}
@keyframes neon-flicker-hard {
  0%, 100% { opacity: 1; } 86% { opacity: 1; } 86.5% { opacity: 0.25; }
  87% { opacity: 1; } 88% { opacity: 1; } 88.5% { opacity: 0.4; }
  89% { opacity: 1; } 91% { opacity: 1; } 91.5% { opacity: 0.6; } 92% { opacity: 1; }
}
@keyframes neon-flicker-double {
  0%, 100% { opacity: 1; } 42% { opacity: 1; } 42.5% { opacity: 0.3; }
  43% { opacity: 1; } 44% { opacity: 1; } 44.5% { opacity: 0.3; } 45% { opacity: 1; }
}
@keyframes neon-flicker-soft {
  0%, 100% { opacity: 1; } 60% { opacity: 1; } 63% { opacity: 0.82; } 66% { opacity: 1; }
}
@keyframes tube-hum { 0%, 100% { opacity: 1; } 50% { opacity: 0.93; } }

/* ---------- Footer mit Logo und Samurai-Grafik ---------- */

.site-foot {
  position: relative; z-index: 2;
  /* Die 62vh Mindesthoehe gaben dem Samurai-Motiv Platz. Ohne das Bild
     richtet sich der Fuss nach seinem Inhalt, sonst stuenden zweihundert
     Pixel Leere unter der letzten Zeile. */
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 40px var(--pad) 48px;
  border-top: 1px solid rgba(253,249,249,0.12);
  color: var(--ink-dim); font-size: 15px;
  overflow: hidden;
}
.foot-rows { position: relative; z-index: 2; }
.foot-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
}
.foot-meta {
  margin-top: 22px; padding-top: 18px;
  border-top: 1px solid rgba(253,249,249,0.1); font-size: 13px;
}
.foot-legal { display: flex; gap: 22px; }
.foot-legal a { color: var(--ink-dim); text-decoration: none; letter-spacing: 0.06em; }
.foot-legal a:hover { color: var(--ink); }
.foot-admin {
  display: inline-flex; align-items: center; gap: 6px;
  opacity: 0.55; transition: opacity 0.2s var(--ease), color 0.2s var(--ease);
}
.foot-admin svg { width: 13px; height: 13px; }
.foot-admin:hover { opacity: 1; color: var(--rose) !important; }
.ig-link {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--rose); font-weight: 700; text-decoration: none; letter-spacing: 0.04em;
}
.ig-link:hover { color: var(--rose-deep); }
/* Das Instagram-Zeichen liegt als SVG im Dokument, damit beim Aufruf
   der Seite kein Fremdserver die Adresse der Gaeste zu sehen bekommt. */
.ig-icon { width: 20px; height: 20px; flex-shrink: 0; }
.btn .ig-icon { width: 18px; height: 18px; }

/* ------------------------------------------------------------
   Hinweisband ganz oben, z. B. fuer Betriebsferien.
   Es erscheint nur, wenn in der Verwaltung ein Text steht.
   ------------------------------------------------------------ */
.hinweis-band {
  position: fixed; top: 0; left: 0; right: 0; z-index: 70;
  background: var(--rose); color: var(--navy);
  padding: 11px clamp(20px, 5vw, 96px);
  text-align: center;
  font-size: 15px; font-weight: 700; letter-spacing: 0.01em;
  animation: hinweis-auf 0.5s var(--ease) both;
}
@keyframes hinweis-auf { from { opacity: 0; transform: translateY(-100%); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .hinweis-band { animation: none; } }
/* Die Signatur des Erbauers. Sie darf hier auffallen: der Fuss ist der
   einzige Ort auf der Seite, an dem nicht das Restaurant spricht. Eine
   Schuessel, ueber der beim Darueberfahren Dampf aufsteigt — dieselbe
   Geste wie ueber einem heissen Ramen, nur klein. */
.credit {
  display: flex; align-items: center; gap: 8.5px;
  font-size: 14.4px; letter-spacing: 0.05em;
}
.credit-vor { color: var(--ink-dim); }

.credit-schuessel {
  display: inline-flex; color: var(--rose);
  transition: transform 0.4s var(--ease), color 0.3s var(--ease);
}
.credit-schuessel svg { width: 32.6px; height: 25px; overflow: visible; }
/* Der Dampf steigt dauerhaft auf, solange der Fuss zu sehen ist —
   js/main.js nimmt die Bremse, sobald man unten ankommt, und setzt sie
   wieder, wenn man weg ist. Drei Faeden, versetzt, damit es nicht wie
   ein Takt aussieht, sondern wie Dampf.

   Heller als die Schuessel und mit einem Schein dahinter: in Rose auf
   dunklem Grund war der Faden bei zwei Pixel Breite kaum zu sehen.
   Blassrose ist die hellste Farbe des Handbuchs, der Schein hebt ihn
   zusaetzlich von der Flaeche ab. */
.cs-dampf {
  transform-origin: 50% 100%;
  color: var(--blass);
  filter: drop-shadow(0 0 4px rgba(233,184,186,0.7));
}
.cs-dampf path {
  /* Das Muster entspricht der Pfadlaenge (nachgemessen 13 bis 14
     Einheiten). Stand es hoeher, erschien der ganze Faden auf einmal,
     statt von unten nach oben zu wachsen. */
  stroke-dasharray: 14; stroke-dashoffset: 14;
  animation: cs-steigen 2.6s var(--ease) infinite;
}
.cs-dampf path:nth-child(2) { animation-delay: 0.87s; }
.cs-dampf path:nth-child(3) { animation-delay: 1.74s; }

.credit-name {
  position: relative;
  font-family: var(--font-display);
  font-size: 16.3px; font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--ink); text-decoration: none;
  transition: color 0.3s var(--ease);
}
/* Der Strich waechst von links, statt einfach da zu sein */
.credit-name::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -4px;
  height: 1.5px; background: var(--rose);
  transform: scaleX(0); transform-origin: left center;
  transition: transform 0.45s var(--ease);
}
.credit:hover .credit-name, .credit-name:focus-visible { color: var(--rose); }
.credit:hover .credit-name::after, .credit-name:focus-visible::after { transform: scaleX(1); }
.credit:hover .credit-schuessel { transform: translateY(-2px) rotate(-6deg); }
/* Angefasst kocht es staerker */
.credit:hover .cs-dampf path { animation-duration: 1.4s; }
@keyframes cs-steigen {
  0%   { stroke-dashoffset: 14; opacity: 0; }
  18%  { opacity: 1; }
  70%  { opacity: 1; }
  100% { stroke-dashoffset: -14; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .credit-schuessel, .credit-name::after { transition: none; }
  .credit:hover .credit-schuessel { transform: none; }
  /* Ohne Bewegung steht der Dampf einfach da, statt zu ziehen */
  .cs-dampf path { animation: none; stroke-dashoffset: 0; opacity: 0.75; }
}


/* ---------- Mobiles Menü ---------- */

.mobile-menu {
  position: fixed; inset: 0; z-index: 70;
  background: var(--navy);
  display: flex; align-items: center; justify-content: center;
  visibility: hidden; opacity: 0;
  overflow: hidden;
  padding: 0 24px;
  transition: opacity 0.3s var(--ease), visibility 0s linear 0.3s;
}
.mobile-menu.open { visibility: visible; opacity: 1; transition: opacity 0.25s var(--ease); }
.mobile-menu::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(70% 55% at 50% 46%, rgba(232,130,157,0.16), transparent 70%);
}

/* Rosa Vorhang ueber dem Menue: liegt geschlossen davor und teilt sich mittig */
.menu-vorhang {
  position: absolute; inset: 0;
  z-index: 5; pointer-events: none;
  display: flex;
}
.mv {
  flex: 1;
  position: relative;
  /* Gleiches Rot wie der Noren im Hero, damit alle Vorhaenge zusammenpassen */
  background:
    repeating-linear-gradient(90deg,
      rgba(255,255,255,0.08) 0 3px,
      transparent 3px 26px,
      rgba(0,0,0,0.09) 26px 30px,
      transparent 30px 56px),
    linear-gradient(180deg, #A93344 0%, var(--noren) 44%, #611527 100%);
  display: grid; place-items: center;
  will-change: transform;
}
.mv-links  { box-shadow: inset -18px 0 34px rgba(0,0,0,0.26); }
.mv-rechts { box-shadow: inset 18px 0 34px rgba(0,0,0,0.26); }
.mv-zeichen {
  font-family: var(--font);
  font-size: clamp(48px, 15vw, 96px);
  font-weight: 900;
  color: rgba(255,255,255,0.9);
}

@media (prefers-reduced-motion: no-preference) {
  .mobile-menu.open .mv-links  { animation: vorhang-links  1.3s cubic-bezier(0.42, 0.02, 0.18, 1) 0.12s both; }
  .mobile-menu.open .mv-rechts { animation: vorhang-rechts 1.3s cubic-bezier(0.42, 0.02, 0.18, 1) 0.12s both; }
}
@keyframes vorhang-links {
  0%   { transform: translateX(0) scaleX(1); }
  20%  { transform: translateX(1.8%) scaleX(1.03); }
  100% { transform: translateX(-101%) scaleX(0.8); }
}
@keyframes vorhang-rechts {
  0%   { transform: translateX(0) scaleX(1); }
  20%  { transform: translateX(-1.8%) scaleX(1.03); }
  100% { transform: translateX(101%) scaleX(0.8); }
}

/* Logo ruhig hinter den Kategorien, ohne Bewegung */
.menu-logo {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: min(74vw, 380px);
  aspect-ratio: 1 / 1;
  z-index: 1; pointer-events: none;
  opacity: 0.14;
  background: var(--rose);
  -webkit-mask-image: url(../assets/img/logo-maske.png);
  mask-image: url(../assets/img/logo-maske.png);
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
}

/* Kirschbaum, derzeit nicht im Einsatz */
.menu-sakura {
  position: absolute; left: 50%; bottom: 0;
  transform: translateX(-50%);
  width: min(120vw, 560px); height: 96%;
  z-index: 1; pointer-events: none;
}
.sakura-holz path { stroke-dasharray: 620; stroke-dashoffset: 620; }
/* Jedes Bluetenfeld waechst als Ganzes aus seiner Mitte auf.
   Kein Weichzeichner: der zwingt den Browser zu teurem Nachzeichnen,
   wodurch die obere Krone erst bei einer Beruehrung erschien. */
.sakura-krone .bluetenfeld {
  opacity: 0;
  transform-box: fill-box; transform-origin: center;
  transform: scale(0.6);
  will-change: transform, opacity;
}
.sakura-fall circle { fill: var(--rose); opacity: 0; }

@media (prefers-reduced-motion: no-preference) {
  .mobile-menu.open .sakura-holz .stamm { animation: holz-wachsen 1.1s var(--ease) 0.15s forwards; }
  .mobile-menu.open .sakura-holz .ast   { animation: holz-wachsen 0.9s var(--ease) forwards; }
  .mobile-menu.open .sakura-holz .ast:nth-of-type(2) { animation-delay: 0.7s; }
  .mobile-menu.open .sakura-holz .ast:nth-of-type(3) { animation-delay: 0.82s; }
  .mobile-menu.open .sakura-holz .ast:nth-of-type(4) { animation-delay: 0.94s; }
  .mobile-menu.open .sakura-holz .ast:nth-of-type(5) { animation-delay: 1.04s; }
  .mobile-menu.open .sakura-holz .ast:nth-of-type(6) { animation-delay: 1.12s; }
  .mobile-menu.open .sakura-holz .ast:nth-of-type(7) { animation-delay: 1.2s; }
  .mobile-menu.open .sakura-holz .ast:nth-of-type(8) { animation-delay: 1.28s; }
  .mobile-menu.open .sakura-krone .bluetenfeld {
    animation: krone-bluehen 1.3s cubic-bezier(0.34, 1.3, 0.5, 1) forwards;
  }
  .mobile-menu.open .sakura-krone .bluetenfeld:nth-child(1) { animation-delay: 0.95s; }
  .mobile-menu.open .sakura-krone .bluetenfeld:nth-child(2) { animation-delay: 1.08s; }
  .mobile-menu.open .sakura-krone .bluetenfeld:nth-child(3) { animation-delay: 1.2s; }
  .mobile-menu.open .sakura-fall circle {
    animation: bluete-segelt 7s ease-in-out calc(2.6s + var(--fv)) infinite;
  }
}
@keyframes holz-wachsen { to { stroke-dashoffset: 0; } }
@keyframes krone-bluehen {
  0%   { opacity: 0; transform: scale(0.6); }
  100% { opacity: 0.85; transform: scale(1); }
}
@keyframes bluete-segelt {
  0%   { opacity: 0; translate: 0 0; }
  12%  { opacity: 0.9; }
  100% { opacity: 0; translate: -34px 260px; rotate: 220deg; }
}

/* Der Menuekasten rueckt unter den Noren */

.menu-back {
  position: absolute; bottom: calc(100% + 12px); left: 0; z-index: 3;
  display: inline-flex; align-items: center; gap: 7px;
  background: none; border: none; cursor: pointer;
  color: var(--ink-dim); font-family: var(--font);
  font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  padding: 6px 2px;
}
.menu-back svg { width: 16px; height: 16px; }
.menu-back:hover { color: var(--rose); }

.menu-board {
  position: relative; z-index: 2;
  width: 100%; max-width: 420px;
  box-sizing: border-box;
}
.mobile-menu.open .menu-board { animation: menu-drop 1s cubic-bezier(0.34, 1.28, 0.4, 1) both; }
@keyframes menu-drop {
  0%   { transform: translateY(-70vh); opacity: 0; }
  70%  { opacity: 1; }
  100% { transform: translateY(0); opacity: 1; }
}
.menu-board-inner {
  border: 2px solid var(--rose);
  background: rgba(0,17,43,0.58);
  backdrop-filter: blur(3px);
  padding: clamp(22px, 5vw, 32px) clamp(18px, 4.5vw, 28px);
  display: flex; flex-direction: column;
}
.menu-board-inner a {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  text-decoration: none; color: var(--ink);
  /* Navigation zaehlt als Subheadline: Calibri Bold in Versalien */
  font-size: clamp(15px, 4.2vw, 21px);
  font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 11px 0; border-bottom: 1px solid rgba(253,249,249,0.14);
  opacity: 0; min-width: 0;
}
.menu-board-inner a:last-child { border-bottom: none; }
.menu-board-inner a .jp {
  font-family: var(--font); font-size: 11px;
  color: var(--rose); letter-spacing: 0.12em;
  white-space: nowrap; flex-shrink: 0;
}
.mobile-menu.open .menu-board-inner a { animation: menu-item 0.5s var(--ease) forwards; }
.mobile-menu.open .menu-board-inner a:nth-child(1) { animation-delay: 0.42s; }
.mobile-menu.open .menu-board-inner a:nth-child(2) { animation-delay: 0.50s; }
.mobile-menu.open .menu-board-inner a:nth-child(3) { animation-delay: 0.58s; }
.mobile-menu.open .menu-board-inner a:nth-child(4) { animation-delay: 0.66s; }
.mobile-menu.open .menu-board-inner a:nth-child(5) { animation-delay: 0.74s; }
.mobile-menu.open .menu-board-inner a:nth-child(6) { animation-delay: 0.82s; }
.mobile-menu.open .menu-board-inner a:nth-child(7) { animation-delay: 0.90s; }
@keyframes menu-item {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
.menu-lang { display: flex; gap: 10px; justify-content: center; margin-top: 22px; opacity: 0; }
.mobile-menu.open .menu-lang { animation: menu-item 0.5s var(--ease) 1s forwards; }
.menu-lang button {
  background: none; border: 1.5px solid rgba(253,249,249,0.35);
  color: var(--ink-dim); font-family: var(--font);
  font-size: 13px; font-weight: 700; letter-spacing: 0.1em;
  padding: 8px 14px; cursor: pointer;
}
.menu-lang button.active { border-color: var(--rose); color: var(--rose); }
body.menu-open {
  position: fixed;
  left: 0; right: 0; width: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}
.mobile-menu { overscroll-behavior: contain; }

/* ---------- Rechtsseiten ---------- */

.legal { max-width: 760px; margin: 0 auto; padding: 140px var(--pad) 96px; }
.legal h1 {
  font-family: var(--font-display); font-size: clamp(34px, 5vw, 56px);
  font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; margin-bottom: 28px;
}
.legal h2 { font-size: clamp(19px, 2vw, 24px); font-weight: 700; margin: 40px 0 12px; }
.legal p, .legal li { color: var(--ink-dim); line-height: 1.75; }
.legal ul { padding-left: 22px; margin: 10px 0; }
.legal strong { color: var(--ink); }
.legal-note {
  border: 1.5px solid var(--rose); color: var(--ink) !important;
  padding: 14px 18px; font-size: 15px; margin-bottom: 8px;
}
.ph-mark { color: var(--rose); }
.legal-stand { margin-top: 48px; font-size: 14px; }

/* ---------- Scroll-Reveals ---------- */

.reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.reveal.in { opacity: 1; transform: none; }

/* ---------- Responsive ---------- */

@media (max-width: 1000px) {
  .dish-grid, .curry-grid, .sides-grid { grid-template-columns: repeat(2, 1fr); }
  /* Der Streifen bleibt hier bewusst vierspaltig. Acht Bilder in drei
     Spalten ergeben 3+3+2 — die vier hausgemachten Getraenke stehen dann
     auseinandergerissen. Bei vier Spalten liegen sie als geschlossene
     untere Reihe, und genau darum hatte der Kunde gebeten. Erst wenn
     eine Kachel wirklich zu schmal wuerde, geht es auf zwei Spalten. */
  .deal-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
  /* Der Status steht schon gross im Hero. Oben bleibt nur Wortmarke und Burger,
     sonst quetscht sich die Kopfzeile und der Burger rutscht aus dem Bild. */
  .head-nav { display: none; }
  .site-head .status { display: none; }
  .burger {
    display: inline-flex;
    padding: 10px 0 10px 14px;
    position: relative; z-index: 70;
  }
  .burger span { width: 30px; height: 3px; }
  .burger span:nth-child(2) { width: 21px; }
  .head-right { align-items: center; gap: 0; }
  .site-head { align-items: center; padding: 12px var(--pad); }
  .brand-name { font-size: 15px; letter-spacing: 0.14em; }
  /* Mobil: vier Bahnen, aber deutlich groesserer Weg als vorher,
     damit sich der Vorhang sichtbar oeffnet und nicht nur zuckt. */
  .noren-panels { height: clamp(170px, 30vh, 260px); gap: 3px; }
  .np-l3, .np-r3 { display: none; }
  /* Der Vorhang bleibt breit stehen, laesst dem Status aber etwas
     mehr Luft nach links und rechts. */
  .np-l1 { --weg: 102%; } .np-l2 { --weg: 48%; }
  .np-r1 { --weg: 102%; } .np-r2 { --weg: 48%; }
  .np-badge { display: none; }
  /* Geschlossen: oeffnet nicht ganz so weit, dafuer faellt der Vorhang
     ruhiger zu und die Bahnen haben Zeit zum Nachschwingen. */
  .noren.shut .np { --lugweg: 0.72; animation-duration: 3.6s; }
  .hero-stage { min-height: clamp(280px, 46vh, 400px); }
  .hero-behind { padding-top: clamp(40px, 7vh, 80px); }
  /* Geschlossen: Text sitzt dichter unter dem Vorhang und ruhiger */
  .hero-stage.zu .hero-behind { padding-bottom: 4px; }
  .hero-stage.zu .hero-status { font-size: clamp(24px, 7vw, 34px); line-height: 1.2; }
  /* Schriftzug und Adresse rutschen nach unten, damit unter dem Status Luft bleibt */
  .hero-inner { padding-top: clamp(34px, 7vh, 64px); }
  .menu-sakura { width: 70vw; opacity: 0.42; }
  .dish-feature { grid-template-columns: 1fr; align-items: start; }
  .dish-feature .ph { height: 44vh; }
  .dish-grid, .curry-grid, .sides-grid { grid-template-columns: 1fr; }
  .sweet-strip { grid-template-columns: repeat(2, 1fr); }
  /* Schmalere Karten, damit die Fliesenwand rundherum sichtbar bleibt */
  .deal-grid { grid-template-columns: 1fr; gap: 18px; }
  .deals .deal {
    width: min(78%, 340px);
    margin: 0 auto;
    min-height: 0;
    padding: 22px 24px;
  }
  .deals .deal:nth-child(even) { margin-left: auto; margin-right: 6%; }
  .deals .deal:nth-child(odd)  { margin-left: 6%; margin-right: auto; }
  /* Kleinere Kacheln und kraeftigere Fugen: die Wand traegt auch auf dem Handy */
  .kachelwand {
    --kachel: 44px;
    background-image:
      repeating-linear-gradient(150deg,
        rgba(255,255,255,0.07) 0 2px,
        rgba(255,255,255,0.015) 2px 22%,
        transparent 22% 100%),
      repeating-linear-gradient(0deg,
        rgba(0,0,0,0.6) 0 1px,
        rgba(200,192,178,0.46) 1px 3px,
        rgba(0,0,0,0.4) 3px 4px,
        transparent 4px var(--kachel)),
      repeating-linear-gradient(90deg,
        rgba(0,0,0,0.6) 0 1px,
        rgba(200,192,178,0.46) 1px 3px,
        rgba(0,0,0,0.4) 3px 4px,
        transparent 4px var(--kachel)),
      linear-gradient(165deg, #0A1B42 0%, #000C1F 55%, #000917 100%);
  }
  .story, .social { grid-template-columns: 1fr; }
  .story-img, .social-img { max-height: 420px; }
  .visit-grid { grid-template-columns: 1fr; }
  .neon-sign { min-height: 320px; }
  .comp-item { flex-direction: column; gap: 14px; }
  .comp-item .ph { height: min(48vh, 420px); }
  .comp-item figcaption { align-self: flex-start; padding-bottom: 0; }
  .comp-track { gap: clamp(48px, 12vw, 96px); }
  .noren-panels { height: min(46vh, 380px); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .btn { transition: none; }
  .noren { display: none; }
  .comp-track { animation: none; transform: none !important; }
  .components { height: auto; }
  .comp-sticky { position: static; height: auto; overflow: visible; padding: clamp(72px,10vw,140px) 0 clamp(72px,10vw,140px) 20px; }
  .comp-track { width: auto; overflow-x: auto; scroll-snap-type: x mandatory; padding-right: 20px; }
  .comp-item { scroll-snap-align: start; flex-direction: column; }
  .comp-item .ph { height: auto; width: min(62vw, 320px); }
  .mobile-menu.open .menu-board,
  .mobile-menu.open .menu-board-inner a,
  .mobile-menu.open .menu-lang { animation: none; opacity: 1; }
}

/* ------------------------------------------------------------
   Gleich grosse Bildkacheln

   Die Fotos liegen in zwei Formaten vor: die Speisen hochkant
   778 x 1100, die Suessigkeiten und Getraenke quer 1100 x 880.
   Mit "height: auto" ergaeben sich dadurch unterschiedlich hohe
   Kacheln. Beschneiden kommt nicht infrage, also sitzt jedes Bild
   vollstaendig in einer gleich grossen Kachel. Deren Grund ist
   Blassrosé #E9B8BA — gemessen ist der Studiohintergrund der Fotos
   #EAB9BC bis #E6B7BD, der Uebergang ist also nicht zu sehen.
   ------------------------------------------------------------ */
.dish .ph,
.comp-item .ph,
.sweet-strip .ph {
  aspect-ratio: 778 / 1100;
  background: var(--blass);
  overflow: hidden;
}
.dish .ph img,
.comp-item .ph img,
.sweet-strip .ph img {
  width: 100%; height: 100%;
  object-fit: contain;
}

/* Lieferknopf mit Rollersymbol, siehe Hinweis in css/schlicht.css */
.btn-liefern { gap: 12px; }
.btn-roller { width: 20px; height: 20px; flex-shrink: 0; }

/* ============================================================
   Sakekunde

   Zwei Teile, zwei ganz verschiedene Bilder.

   OBEN die Sorten. Was Daiginjo von Junmai trennt, ist im Kern
   eine einzige Zahl: wie viel vom Reiskorn weggeschliffen wird.
   Also wird genau das gezeichnet — ein Korn, dessen aeussere
   Schale abgetragen ist. Die vier Sorten, die nicht ueber den
   Schliff bestimmt sind, bekommen ein eigenes kleines Zeichen.
   Nichts klappt hier auf, alles steht sofort da.

   UNTEN das Regal. Die Flaschen stehen wie hinter dem Tresen.
   Tippt man eine an, dreht sie sich um die eigene Achse — man
   sieht ihre Rueckseite — und das Etikett loest sich ab und legt
   sich flach nach vorn, gross genug zum Lesen. Das war die Idee
   des Kunden: der Text steht hinten auf der Flasche. Nur dass ein
   echtes Rueckenetikett zu klein waere, um es zu entziffern.
   ============================================================ */
.sakekunde {
  position: relative; z-index: 2;
  padding: clamp(72px, 9vw, 132px) var(--pad);
  border-top: 1px solid rgba(253,249,249,0.12);
}
.sk-inner { max-width: 1240px; margin: 0 auto; }
.sk-lead { max-width: 62ch; color: var(--ink-dim); margin-top: 18px; }
.sk-sub {
  margin: clamp(46px, 5vw, 74px) 0 24px;
  font-family: var(--font-display);
  font-size: clamp(19px, 1.7vw, 25px); font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
}
.sk-dreh-hinweis {
  margin-top: 26px; font-size: 12.5px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-dim); opacity: 0.75;
}

/* ---------- Das Wandregal ----------

   ERSETZT in css/style.css den kompletten Block von
   "/* ---------- Das Wandregal ----------" (Z. 1356) bis
   einschliesslich der reduced-motion-Regel davor (Z. 1474) — also alles
   bis vor "/* ---------- Die Flasche vorn ----------".
   Der alte @media (max-width: 860px)-Block MUSS mit verschwinden: er
   setzt --reihe auf 74-96px, und bei dieser Zeilenhoehe schneidet der
   Fachboden mitten durch den Flaschenbauch. Ueberschreiben genuegt
   nicht, loeschen ist Pflicht.

   WARUM AUS DER SCHIENE EIN KASTEN WIRD
   Ein 6-px-Balken mit einem Halter je Reihe ist physikalisch richtig und
   trotzdem unlesbar: man sieht sechs Flaschen, die im Nichts schweben.
   Ein Regal erkennt das Auge nicht an einer Linie, sondern an der
   FAECHERUNG — ein Brett, das zwischen zwei Seitenteilen liegt, sechsmal
   im gleichen Takt. Deshalb steht hier jetzt ein flacher Setzkasten:
   zwei Wangen, eine Deckplatte mit Ueberstand, ein Sockel, dazwischen
   sechs Faecher mit je einem Zwischenboden.

   Damit daraus keine Tabelle und kein gerenderter Schrank wird, gelten
   drei Regeln, die jede Zeile hier befolgt:
   1. Getrennt wird mit Licht und Schatten, nie mit Rahmenlinien. Jeder
      Boden hat eine belichtete Oberseite, eine helle Vorderkante und
      darunter seinen Schlagschatten ins naechste Fach.
   2. Nur ZWEI Kanten bekommen Blassrose als Lichtfarbe (Kranz und
      Fachboden). Alles andere wird mit --ink belichtet, also warm-
      neutral. Rose glimmt sonst auf jeder Kante und das kippt in
      Neon-Optik — Rose ist auf dieser Seite Signalfarbe fuer
      Bedienbares (Fokus, Hover) und bleibt es.
   3. Kein Beschlag, kein Nietenkopf, keine Holzmaserung. Das Moebel
      besteht aus Flaechen, Kanten und Schatten — sonst stoesst es sich
      an der flachen, typografischen Sprache der uebrigen Seite.

   Gezeichnet wird ausschliesslich mit den vier vorhandenen
   Pseudoelementen — kein zusaetzliches Kindelement, denn js/main.js
   baut .sk-regal per innerHTML neu auf (Zeile 1001) und wuerde alles
   darin wegwerfen:
     .sk-regal::before    Korpus: beide Wangen und die Rueckwand
     .sk-regal::after     Kranz und Sockel, beide mit Ueberstand
     .sk-flasche::before  ein Fach: Zwischenboden, Kehle, Tiefe
     .sk-flasche::after   der Kontaktschatten unter der Flasche
   Alle vier liegen hinter den Flaschen und sind pointer-events: none.

   FARBEN: Alle Zwischentoene werden per color-mix aus den Tokens des
   Handbuchs gerechnet. Aendert der Kunde eine Unternehmensfarbe, geht
   das Regal mit — es steht kein einziger roher Hexwert im Block. */

.sk-regal {
  /* --- Die eine gemessene Zahl ---
     Die sechs Fotos sind 1024x1536. Der breiteste Flaschenbauch
     (Beni Nanko) belegt darin 446 px, der schmalste (Sasanigori)
     364 px. Das Bild steht auf height: var(--laenge), 446/1536 sind
     also 0.29 der Flaschenlaenge. Nach diesem GROESSTEN Wert wird das
     Fach bemessen, sonst schneidet der Boden durch die dickste
     Flasche. (Der frueher benutzte Wert 0.248 war an nur einem Foto
     genommen und haette zwei der sechs angeschnitten.)
     Kommen neue Fotos ins Haus, wird genau diese Zahl einmal
     nachgemessen — alles andere rechnet sich daraus. */
  --dick: calc(var(--laenge) * 0.29);

  /* Auf welcher Dicke die Flasche AUFLIEGT. Bewusst kleiner als --dick:
     die sechs Flaschen sind unterschiedlich stark (0.237 bis 0.290),
     0.268 ist ihre Mitte. Die dicksten setzen damit ein paar Pixel in
     die Vorderkante des Bodens ein und verdecken dort seine Lichtlinie
     — genau diese Verdeckung liest das Auge als Kontakt. Die duennsten
     stehen einen Hauch darueber, was der Kontaktschatten auffaengt.
     Legte man den Wert auf --dick, schwebten fuenf von sechs Flaschen
     sichtbar ueber ihrem Brett. */
  --lager: calc(var(--laenge) * 0.268);

  /* Laenge bewusst kleiner als frueher (war 430 px). Das Fach MUSS
     hoeher sein als die Flasche dick ist, sechs Faecher mal
     0.29 x --laenge summieren sich sonst zu einem Abschnitt von ueber
     1000 px — dann erschlaegt die Flaschenliste den Rest der
     Sakekunde. 360 px halten den Kasten unter 850 px Gesamthoehe. */
  --laenge: clamp(232px, 30vw, 360px);

  --wange:  clamp(10px, 1.15vw, 14px);  /* Dicke der Seitenwange       */
  --platte: clamp(9px, 1vw, 13px);      /* Deckplatte und Sockel       */
  --boden:  clamp(6px, 0.7vw, 9px);     /* Zwischenboden je Fach       */
  --luft:   clamp(12px, 1.3vw, 18px);   /* Luft links vor dem Boden    */
  --rand:   clamp(11px, 1.2vw, 16px);   /* Luft rechts hinter dem Hals */
  /* Ueberstand von Kranz und Sockel. Zehn bis zwoelf Pixel, nicht
     sechs: darunter liegt der Ueberstand unter der Wahrnehmungs-
     schwelle und man kann sich die Platte gleich sparen. Er ist nach
     der Faecherung das zweite Moebelsignal — ein Raster steht nirgends
     ueber, ein Moebel schon. */
  --ueber:  clamp(8px, 0.95vw, 12px);
  /* Luft ueber der Flasche. Grosszuegig, sonst sieht das Fach aus wie
     eine Geschenkkassette, in der die Flasche einliegt. */
  --spiel:  clamp(15px, 1.7vw, 22px);

  --reihe:  calc(var(--dick) + var(--boden) + var(--spiel));

  /* Die Halslinie. Frueher 68 % der Abschnittsbreite — damit stand der
     Kasten je nach Fenster woanders. Jetzt liegt seine linke Aussen-
     kante fest auf 0 und die Halslinie ergibt sich daraus. .sk-glas
     rechnet unveraendert --schiene - --laenge/2 + 10px, die Flasche
     liegt damit mittig zwischen den beiden Wangen. */
  --schiene: calc(var(--ueber) + var(--wange) + var(--luft) + var(--laenge) - 10px);
  --korpus:  calc(var(--wange) * 2 + var(--luft) + var(--laenge) + var(--rand));
  --kasten:  calc(var(--korpus) + var(--ueber) * 2);
  --abstand: clamp(20px, 2.4vw, 38px);  /* Kasten zur Namensspalte */

  /* --- Die Toene, alle aus Handbuchfarben gemischt --- */
  --brett-oben:  color-mix(in srgb, var(--navy-3) 62%, var(--indigo));
  --brett-front: var(--navy-3);
  --brett-tief:  color-mix(in srgb, var(--navy-2) 70%, var(--navy));
  --wand-hoch:   color-mix(in srgb, var(--navy-2) 84%, var(--indigo));
  --wand-tief:   color-mix(in srgb, var(--navy) 76%, var(--schwarz));
  /* Die einzige Kante mit Blassrose: Oberkante Kranz und Fachboden.
     Deckend gemischt statt halbtransparent, damit die Linie ueber
     jedem Untergrund denselben Wert hat. */
  --kante-hell:  color-mix(in srgb, var(--blass) 20%, var(--navy-3));
  /* Warm-neutrales Licht fuer alle uebrigen Kanten (Wangen, Sockel) */
  --kante-matt:  color-mix(in srgb, var(--ink) 9%, var(--navy-3));
  --linie:       color-mix(in srgb, var(--ink) 12%, transparent);

  position: relative;
  display: block;
  padding: var(--platte) 0;
}

/* Solange keine Flaschen geladen sind, steht kein leeres Moebel herum —
   der Platz bleibt aber reserviert, sonst springt der Abschnitt beim
   Nachladen. Zwei getrennte Regeln: faellt :has in einem alten Browser
   aus, greift die data-leer-Fassung weiter (index.html Zeile 300). */
.sk-regal[data-leer] { min-height: calc(var(--reihe) * 6 + var(--platte) * 2); }
.sk-regal[data-leer]::before,
.sk-regal[data-leer]::after { display: none; }
/* Deckt zusaetzlich den Fall ab, dass das Skript data-leer entfernt,
   die Flaschenliste aber leer war — sonst stuende ein Kasten ohne Fach. */
.sk-regal:not(:has(.sk-flasche)) { min-height: calc(var(--reihe) * 6 + var(--platte) * 2); }
.sk-regal:not(:has(.sk-flasche))::before,
.sk-regal:not(:has(.sk-flasche))::after { display: none; }

/* ---- Korpus: die beiden Wangen und die Rueckwand ----
   Eine Wange ist keine Linie, sondern eine Flaeche: vorn eine 1,5 px
   belichtete Kante, dahinter ein Verlauf ins Dunkle. Erst dieser
   Verlauf macht aus einem Balken ein Brett mit Dicke.
   Der aeussere Schatten setzt den Kasten von der Wand ab — ohne ihn
   steht dunkles Moebel auf dunklem Grund und bleibt flach. */
.sk-regal::before {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  left: var(--ueber); width: var(--korpus);
  top: var(--platte); bottom: var(--platte);
  background:
    /* Beide Wangen sind an ihrer AUSSENkante belichtet und werden nach
       innen dunkler — so herum sitzt das Licht vorn an der Kante. Nach
       innen laeuft der Verlauf bewusst nur bis Navy 2 und nicht ins
       Schwarze: sonst verschwindet die Wange dort, wo der Fachboden auf
       sie trifft, und das Brett sieht aus, als endete es im Nichts
       statt an der Seitenwand. Den Schatten in der Ecke uebernimmt das
       Fach selbst. */
    linear-gradient(90deg,
      var(--kante-matt) 0 1.5px, var(--brett-oben) 1.5px,
      var(--navy-3) 46%, var(--navy-2) 100%)
      left top / var(--wange) 100% no-repeat,
    linear-gradient(270deg,
      var(--kante-matt) 0 1.5px, var(--navy-3) 1.5px,
      var(--navy-3) 46%, var(--navy-2) 100%)
      right top / var(--wange) 100% no-repeat,
    linear-gradient(180deg,
      var(--wand-hoch) 0%, var(--navy) 44%, var(--wand-tief) 100%);
  box-shadow:
    0 40px 64px -34px rgb(0 0 0 / 0.95),
    0 9px 24px rgb(0 0 0 / 0.38);
}

/* ---- Kranz und Sockel ----
   Beide stehen seitlich um --ueber ueber den Korpus hinaus. Nur der
   Kranz bekommt die Blassrose-Lichtkante (das Licht faellt von oben),
   der Sockel steht im Schatten und wird warm-neutral belichtet. */
.sk-regal::after {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  left: 0; width: var(--kasten); top: 0; bottom: 0;
  background:
    linear-gradient(180deg,
      var(--kante-hell) 0 1.5px, var(--brett-oben) 1.5px 38%,
      var(--navy-3) 38% 72%, var(--wand-tief) 100%)
      left top / 100% var(--platte) no-repeat,
    linear-gradient(180deg,
      var(--kante-matt) 0 1.2px, var(--navy-3) 1.2px 42%,
      var(--navy-2) 42% 76%, var(--wand-tief) 100%)
      left bottom / 100% var(--platte) no-repeat;
}

.sk-flasche {
  /* z-index: 1 ist kein Beiwerk. Ohne ihn haengt die Stapelordnung
     daran, dass main.js die Knoepfe mit "reveal in" erzeugt (also
     opacity: 1). Blendete jemand sie wie die uebrigen .reveal-Elemente
     erst beim Scrollen ein, wuerde jeder Knopf waehrend der Blende zum
     Stapelkontext — und .sk-regal::after (letztes Kind) legte sich ueber
     die Flaschen. Mit z-index: 1 liegt jede Reihe grundsaetzlich vor
     dem Korpus, egal was mit der Deckkraft passiert. */
  position: relative; z-index: 1;
  display: block; width: 100%; height: var(--reihe);
  padding: 0;
  background: none; border: none; cursor: pointer;
  font-family: inherit; color: inherit; text-align: left;
  -webkit-tap-highlight-color: transparent;
}

/* ---- Ein Fach ----
   Von unten nach oben: der Zwischenboden (belichtete Oberseite, helle
   Vorderkante, flache Front, dunkle Unterkante), darueber die Kehle,
   wo Boden und Rueckwand zusammenstossen, links und rechts der Schatten
   der Wangen, und ganz oben der Schlagschatten des Bodens aus dem Fach
   darueber. Diese vier Schatten sind der Unterschied zwischen einem
   Kaestchen und einem Hohlraum.

   Der Boden hat bewusst eine sichtbare OBERSEITE (2,5 px heller) und
   erst darunter die Kante. Nur eine Lichtlinie waere wieder ein Strich;
   die Oberseite gibt dem Brett Dicke. Die Front darunter ist absichtlich
   flach — dieselbe Zeichnung traegt dadurch bei 6 px wie bei 38 px,
   wenn der Boden auf dem Telefon zur Namensblende waechst. */
.sk-flasche::before {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  left: calc(var(--ueber) + var(--wange));
  width: calc(var(--luft) + var(--laenge) + var(--rand));
  top: 0; bottom: 0;
  background:
    linear-gradient(180deg,
      var(--brett-oben) 0 2.5px,
      var(--kante-hell) 2.5px 4px,
      var(--brett-front) 4px calc(100% - 2px),
      var(--brett-tief) calc(100% - 2px) 100%)
      left bottom / 100% var(--boden) no-repeat,
    linear-gradient(180deg,
      rgb(0 0 0 / 0.58) 0, rgb(0 0 0 / 0.13) 12%, rgb(0 0 0 / 0) 30%),
    linear-gradient(0deg,
      rgb(0 0 0 / 0.52) 0, rgb(0 0 0 / 0) 28%),
    linear-gradient(90deg,
      rgb(0 0 0 / 0.48) 0, rgb(0 0 0 / 0) 7%,
      rgb(0 0 0 / 0) 93%, rgb(0 0 0 / 0.42) 100%);
  box-shadow: inset 0 0 30px -8px rgb(0 0 0 / 0.8);
  transition: box-shadow 0.35s var(--ease);
}

/* Der Kontaktschatten. Er liegt flach und breit direkt ueber der
   Bodenkante und reicht links ueber den Flaschenboden hinaus — ein
   Schatten, der genau unter dem Glas endet, ist von der Flasche selbst
   verdeckt und damit tote Regel. Diese eine Zeichnung traegt den
   Eindruck "liegt auf", nicht "haengt darueber". */
.sk-flasche::after {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  left: calc(var(--schiene) - var(--laenge) * 1.02 + 10px);
  width: calc(var(--laenge) * 0.68);
  bottom: calc(var(--boden) - 2px);
  height: clamp(11px, 1.3vw, 17px);
  background: radial-gradient(58% 100% at 50% 100%,
    rgb(0 0 0 / 0.68), rgb(0 0 0 / 0.18) 52%, rgb(0 0 0 / 0) 78%);
  transition: opacity 0.35s var(--ease);
}

/* Der feste Punkt: hier liegt die Mitte der Flasche.
   Gerechnet wird vom BODEN der Zeile nach oben, nicht aus der Mitte —
   eine Flasche im Regal liegt auf ihrem Brett, sie schwebt nicht
   mittig im Fach. Die Luft (--spiel) steht dadurch komplett ueber der
   Flasche, so wie im echten Regal. */
.sk-glas {
  position: absolute; z-index: 1;
  left: calc(var(--schiene) - var(--laenge) / 2 + 10px);
  top: calc(100% - var(--boden) - var(--lager) / 2);
  width: 0; height: 0;
  transition: transform 0.5s var(--ease), opacity 0.3s var(--ease);
}
/* Doppelter Selektor mit Absicht: weiter unten in style.css steht
   @media (max-width: 420px) { .sk-glas { height: 240px } } — gemeint ist
   dort die Flasche vorn, die Regel trifft aber auch den Ankerpunkt hier.
   Der hoehere Selektorwert haelt ihn auf null, egal in welcher
   Reihenfolge die Regeln stehen. (Sauberer waere, jene Regel auf
   .sk-vorn-glas einzuschraenken — das steht im Hinweis zum Markup.) */
.sk-regal .sk-glas { height: 0; }

/* Der wichtigste Zweizeiler des ganzen Blocks: das gedrehte Bild ist
   --laenge breit und 0.67 x --laenge hoch und ragt damit weit in die
   Nachbarzeilen. Durchsichtige PNG-Flaeche faengt trotzdem Klicks, und
   bei Ueberlappung gewinnt die SPAETERE Zeile den Treffertest — gemessen
   oeffneten 58 % jedes Fachs die Flasche darunter, und der Hover liess
   das falsche Fach aufleuchten. Ohne Treffer am Bild nimmt der Knopf
   selbst (volle Breite x --reihe) den Klick entgegen; die sichtbare
   Flasche liegt vollstaendig in ihrer eigenen Zeile, gemessen 0 %
   Fehltreffer von 1280 bis 300 px. */
.sk-glas, .sk-glas img { pointer-events: none; }

/* Das Bild haengt an diesem Punkt und dreht sich um ihn. Erst
   zurueckschieben, damit seine Mitte auf dem Punkt liegt, dann drehen —
   in dieser Reihenfolge, sonst wandert es beim Drehen weg. */
.sk-glas img {
  position: absolute; left: 0; top: 0;
  height: var(--laenge); width: auto; display: block;
  /* Ohne das bleibt die Flasche unsichtbar: die Grundregel oben setzt
     img { max-width: 100% }, und 100 % von einem Punkt ist null. */
  max-width: none;
  transform-origin: 50% 50%;
  transform: translate(-50%, -50%) rotate(90deg);
  /* Der Filter rechnet VOR der Drehung, sein Versatz dreht also mit:
     aus "7 px nach rechts" wird nach rotate(90deg) "7 px nach unten".
     Deshalb steht hier 7px 0 und nicht 0 7px. */
  filter: drop-shadow(7px 0 15px rgb(0 0 0 / 0.55));
}

/* Fehlt ein Foto, haengt das Zeichen an demselben Punkt. Ohne diese
   Regel liefe der Ersatz aus dem Fach heraus, weil .sk-ohne-bild weiter
   unten auf height: 100 % steht — und 100 % von einem Punkt ist null. */
.sk-glas .sk-ohne-bild {
  position: absolute; left: 0; top: 0;
  height: auto; padding: 0;
  transform: translate(-50%, -50%);
}

/* Angefasst kommt die Flasche naeher, statt seitlich wegzurutschen:
   aus einem geschlossenen Fach zieht man nicht zur Seite. 3 % bleiben
   innerhalb der Luft, die Flasche stoesst also nirgends an. */
.sk-flasche:hover .sk-glas,
.sk-flasche:focus-visible .sk-glas { transform: scale(1.03); }
.sk-flasche:hover::before {
  box-shadow: inset 0 0 30px -8px rgb(0 0 0 / 0.5),
              inset 0 0 0 1px color-mix(in srgb, var(--rose) 20%, transparent);
}
.sk-flasche.entnommen .sk-glas { opacity: 0; }
.sk-flasche.entnommen::after { opacity: 0; }

/* Der Fokusrahmen liegt auf dem FACH, nicht um die ganze Zeile — man
   sieht sofort, welches Fach gemeint ist, statt eines Kastens quer
   durch die Seite. Ohne Uebergang, weil eine Tastaturmarkierung sofort
   dastehen muss und nicht ueber eine drittel Sekunde einblenden darf.
   Das transparente outline bleibt stehen, damit im Kontrastmodus von
   Windows trotzdem ein Rahmen erzwungen wird. */
.sk-flasche:focus-visible { outline: 2px solid transparent; outline-offset: -2px; }
.sk-flasche:focus-visible::before {
  box-shadow: inset 0 0 0 2px var(--rose),
              inset 0 0 30px -8px rgb(0 0 0 / 0.5);
  transition: none;
}
.sk-flasche:focus-visible .sk-name { color: var(--rose); }

/* ---- Der Name ----
   Er steht rechts vom Kasten, sitzt aber auf derselben Hoehe wie der
   Zwischenboden seiner Reihe — und die Haarlinie unter ihm setzt die
   Bodenkante nach rechts fort. Dadurch spannt jede Reihe ueber die
   volle Breite, statt dass der Kasten links klebt und rechts zwei
   Textzeilen im Leeren schweben. Die Haarlinie ist dieselbe, mit der
   die Seite auch .type-list trennt — das Regal wird damit Teil des
   Rasters und nicht ein Fremdkoerper darin. */
.sk-name {
  position: absolute; z-index: 2;
  left: calc(var(--kasten) + var(--abstand));
  right: 0;
  /* 12 px, nicht 4: die japanischen Zeichen im Untertitel machen die
     Zeilenbox rund 7 px hoeher als die lateinische Schrift. Mit
     weniger Abstand setzte "紅南鄉" auf der Haarlinie auf. */
  bottom: calc(var(--boden) + 12px);
  display: block;
  font-size: 13px; font-weight: 700; letter-spacing: 0.07em;
  line-height: 1.35;
  transition: color 0.25s var(--ease);
}
.sk-name::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: -12px;
  height: 1px; background: var(--linie);
}
.sk-name small {
  display: block; margin-top: 1px;
  font-weight: 400; font-size: 11px; color: var(--ink-dim);
  letter-spacing: 0.04em;
}

/* Schmale Schirme: der Kasten nimmt die ganze Breite, daneben ist kein
   Platz mehr fuer eine Namensspalte. Also waechst der Zwischenboden zur
   Blende und der Name steht darauf — wie die Preisleiste an einem
   Ladenregal. Der Name bleibt damit auf dunklem Grund und liegt nie auf
   einem hellen Etikett. */
@media (max-width: 560px) {
  .sk-regal {
    /* 54 px sind Ueberstand, Wangen und Luft: so bleibt der Kasten bis
       hinunter zu 300 px Fensterbreite innerhalb des Textrandes. */
    --laenge: clamp(176px, calc(100vw - var(--pad) * 2 - 54px), 300px);
    --wange: 9px;
    --ueber: 7px;
    --luft: 9px;
    --rand: 9px;
    --platte: 9px;
    /* Die Blende traegt zwei Zeilen und soll nicht gestopft wirken:
       Hoehe grosszuegig, damit ueber und unter der Schrift Luft
       bleibt und der Name nicht an der Flasche darueber klebt. */
    --boden: clamp(56px, 15vw, 68px);
    --spiel: clamp(16px, 4.2vw, 24px);
  }
  .sk-name {
    left: calc(var(--ueber) + var(--wange) + 12px);
    right: calc(100% - var(--kasten) + var(--ueber) + var(--wange) + 12px);
    bottom: 0; height: var(--boden);
    display: flex; flex-direction: column; justify-content: center;
    /* Etwas mehr Fuss als Kopf: optisch sitzt Schrift damit mittig,
       weil die Oberlaengen den Block nach oben zu ziehen scheinen. */
    padding: 14px 0 10px;
    overflow: hidden;
    font-size: 12px; letter-spacing: 0.05em;
    /* Die geerbte Zeilenhoehe 1.65 stopfte die Blende; 1.25 laesst der
       Schrift Luft, ohne dass der Untertitel angeschnitten wird. */
    line-height: 1.25;
    /* Weiss war zu hart auf dem dunklen Lack. Blassrose ist die warme
       Lichtfarbe des Handbuchs und hebt den Namen ab, ohne mit dem
       Rose der Bedienelemente verwechselt zu werden. */
    color: var(--blass);
  }
  /* Auf der Blende laeuft die Bodenkante direkt weiter, eine zweite
     Linie darunter waere doppelt gemoppelt. */
  .sk-name::before { display: none; }
  /* Beide Zeilen bleiben einzeilig. Ein ungewoehnlich langer Name wird
     an der Blendenkante beschnitten statt umzubrechen — umgebrochen
     fiele die zweite Zeile aus der Blende heraus und waere halb
     abgeschnitten zu lesen, was schlimmer aussieht. */
  .sk-name { white-space: nowrap; }
  .sk-name small {
    margin-top: 5px; font-size: 10.5px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
}

/* Ohne Bewegung bleibt die Flasche, wo sie ist. Das Fach hellt trotzdem
   auf und der Fokusrahmen kommt — sonst ginge die Rueckmeldung fuer
   Tastatur und Zeiger komplett verloren. */
@media (prefers-reduced-motion: reduce) {
  .sk-glas { transition: opacity 0.2s linear; }
  .sk-flasche::before,
  .sk-flasche::after,
  .sk-name { transition: none; }
  .sk-flasche:hover .sk-glas,
  .sk-flasche:focus-visible .sk-glas { transform: none; }
}

/* Hoher Kontrast: das System verwirft Verlaeufe, Schatten und
   color-mix — das ganze Moebel waere weg. Rahmen bleiben stehen, also
   werden Korpus und Fachboden hier kurz zu echten Linien. */
@media (forced-colors: active) {
  .sk-regal::before {
    background: none;
    border: 1px solid CanvasText;
  }
  .sk-regal::after { display: none; }
  .sk-flasche::before {
    background: none; box-shadow: none;
    border-bottom: 1px solid CanvasText;
  }
  .sk-flasche::after { display: none; }
  .sk-flasche:focus-visible { outline: 2px solid Highlight; outline-offset: -3px; }
}

/* ---------- Die Flasche vorn ----------

   Sie startet genau dort, wo sie im Regal stand, und faehrt von da
   in die Mitte. Deshalb wird die Ausgangslage vorher gemessen und als
   Startwert gesetzt: so entsteht der Eindruck, dass dieselbe Flasche
   herausgenommen wird, nicht dass eine zweite eingeblendet wird. */
.sk-vorn-schicht {
  position: fixed; inset: 0; z-index: 90;
  display: grid; place-items: center;
  padding: clamp(20px, 4vw, 60px);
  background: rgba(0, 8, 22, 0);
  -webkit-backdrop-filter: blur(0px); backdrop-filter: blur(0px);
  transition: background 0.5s var(--ease), backdrop-filter 0.5s var(--ease);
}
.sk-vorn-schicht.an {
  background: rgba(0, 8, 22, 0.82);
  -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px);
}

/* Kein Gitter mehr.
   Die Flasche liegt fest im Fenster, damit sie von ihrem Regalplatz aus
   dorthin fahren kann — und ist damit aus dem Fluss heraus. In einem
   Gitter blieb ihre Spalte deshalb leer, das Gitter zog sie auf null
   zusammen und der Text landete GENAU UNTER der Flasche. Beides liegt
   jetzt im selben festen Bezugssystem, und js/main.js setzt die
   Textspalte rechts neben die berechnete Lage der Flasche. */
.sk-vorn-buehne {
  position: fixed; inset: 0;
  pointer-events: none;
}
.sk-vorn-buehne > * { pointer-events: auto; }

/* Die Flasche selbst: liegt fest im Fenster und faehrt an ihren Platz */
.sk-vorn-glas {
  position: fixed; margin: 0;
  transform-origin: center center;
  transform-style: preserve-3d;
  will-change: transform;
  transition: transform 0.78s var(--ease), filter 0.78s var(--ease);
  pointer-events: none;
}
.sk-vorn-glas img { width: 100%; height: 100%; object-fit: contain; display: block; }
/* Umgedreht steht sie im eigenen Schatten */
.sk-vorn-schicht.an .sk-vorn-glas { filter: brightness(0.78) saturate(0.9) drop-shadow(0 30px 50px rgba(0,0,0,0.7)); }

/* Das Rueckenetikett. Lage und Breite kommen aus js/main.js, dort sind
   die Masse der Flasche bekannt — hier stuende sonst eine Zahl, die
   raten muesste, wie breit die Flasche gerade ist. */
.sk-vorn-text {
  position: fixed;
  opacity: 0; transform: translateY(18px);
  transition: opacity 0.45s var(--ease) 0.34s, transform 0.55s var(--ease) 0.34s;
}
.sk-vorn-schicht.an .sk-vorn-text { opacity: 1; transform: none; }

.sk-vorn-text .sorte {
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--rose);
}
.sk-vorn-text h3 {
  margin-top: 8px;
  font-family: var(--font-display);
  font-size: clamp(24px, 3vw, 40px); font-weight: 600;
  letter-spacing: 0.06em;
}
.sk-vorn-text .haus {
  display: block; margin-top: 4px;
  font-size: 13px; color: var(--ink-dim); letter-spacing: 0.06em;
}
.sk-vorn-text .jp {
  display: block; margin-top: 2px;
  font-family: var(--font-jp); font-size: 15px; color: var(--blass);
}
.sk-vorn-text p {
  margin-top: 18px; padding-left: 16px;
  border-left: 2px solid var(--noren);
  font-size: 15px; line-height: 1.62;
}
.sk-vorn-text .sk-marken { margin-top: 20px; }

/* Der Schliessknopf gehoert der ganzen Ansicht, nicht der Textspalte.
   Vorher hing er in der Spalte und ragte oben und rechts darueber
   hinaus — das ergab zwei Fehler auf einmal: der Knopf wurde vom
   Rand der scrollbaren Spalte angeschnitten, und sein Ueberstand nach
   rechts erzeugte einen waagerechten Rollbalken. Jetzt sitzt er fest
   in der Ecke des Fensters, wo man ihn erwartet. */
.sk-zu {
  position: fixed; z-index: 2;
  top: clamp(16px, 2.6vw, 30px);
  right: clamp(16px, 2.6vw, 30px);
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(8,24,59,0.72);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border: 1px solid rgba(253,249,249,0.34);
  color: var(--ink); cursor: pointer;
  transition: border-color 0.2s var(--ease), color 0.2s var(--ease),
              background 0.2s var(--ease);
}
.sk-zu:hover { border-color: var(--rose); color: var(--rose); background: rgba(21,35,82,0.9); }
.sk-zu:focus-visible { outline: 2px solid var(--rose); outline-offset: 3px; }
.sk-zu svg { width: 18px; height: 18px; }

/* Fehlt ein Foto, steht dort das Zeichen der Sorte */
.sk-ohne-bild {
  display: flex; align-items: flex-end; justify-content: center;
  height: 100%; padding-bottom: 10px;
  font-family: var(--font-jp); font-size: clamp(32px, 3.6vw, 52px);
  color: rgba(232,130,157,0.42);
}

@media (max-width: 860px) {
  .sk-vorn-text { text-align: center; }
  .sk-vorn-text p { border-left: none; padding-left: 0; border-top: 2px solid var(--noren); padding-top: 14px; }
  .sk-vorn-text .sk-marken { justify-content: center; }
}

/* Ohne Bewegung: kein Fahren, kein Drehen — die Flasche steht sofort da */
@media (prefers-reduced-motion: reduce) {
  .sk-glas, .sk-vorn-glas, .sk-vorn-text, .sk-vorn-schicht { transition: opacity 0.2s linear; }
  .sk-flasche:hover .sk-glas { transform: none; }
  .sk-vorn-text { transform: none; }
}

/* ============================================================
   Auszeichnungen
   Ein schmales Band, bewusst leise: eine Nennung ist kein Pokal.
   ============================================================ */
.ehren {
  position: relative; z-index: 2;
  padding: clamp(40px, 5vw, 68px) var(--pad);
  border-top: 1px solid rgba(253,249,249,0.12);
}
.ehren-inner { max-width: 1240px; margin: 0 auto; }
.ehren-kopf {
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--ink-dim);
}
.ehren-liste {
  list-style: none; margin-top: 18px;
  display: flex; flex-wrap: wrap; gap: clamp(20px, 4vw, 60px);
}
.ehren-liste li {
  max-width: 42ch;
  padding-left: 16px; border-left: 2px solid var(--rose);
}
/* Traegt der Eintrag ein Siegel, steht es links neben dem Text und
   der Strich entfaellt — zwei senkrechte Markierungen nebeneinander
   waeren eine zu viel. */
.ehren-liste li.mit-siegel {
  display: flex; align-items: center; gap: clamp(14px, 1.6vw, 22px);
  max-width: 52ch;
  padding-left: 0; border-left: none;
}
.ehren-siegel {
  width: clamp(66px, 7vw, 96px); height: auto; flex: none;
  /* Das Siegel ist rund und laedt verzoegert. Ohne reservierten Platz
     springt die Zeile, sobald es ankommt. */
  aspect-ratio: 1;
  /* Das Siegel ist grell magenta. Auf dem dunklen Grund wuerde es
     alles andere erschlagen, deshalb minimal zurueckgenommen — und
     beim Darueberfahren zeigt es sich in voller Farbe. */
  opacity: 0.88;
  filter: drop-shadow(0 6px 16px rgba(0,0,0,0.5));
  transition: opacity 0.25s var(--ease), transform 0.35s var(--ease);
}
.ehren-liste li.mit-siegel:hover .ehren-siegel { opacity: 1; transform: rotate(-4deg) scale(1.04); }
.ehren-wort { display: block; }
@media (prefers-reduced-motion: reduce) {
  .ehren-liste li.mit-siegel:hover .ehren-siegel { transform: none; }
}
.ehren-quelle {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(16px, 1.5vw, 21px); font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
}
.ehren-titel { display: block; margin-top: 4px; font-size: 14.5px; }
.ehren-text { display: block; margin-top: 4px; font-size: 13.5px; color: var(--ink-dim); }
/* Ist nichts einzutragen, verschwindet das ganze Band */
.ehren:not(:has(li)) { display: none; }

/* ============================================================
   Ruhende Abschnitte

   Vier Stellen der Seite bewegen sich dauerhaft: die Bahnen des
   Noren im Kopf, die fallenden Blueten in der Geschichte, das
   Flackern des Neonschilds beim Besuch und der Dampf ueber der
   Schuessel in der Fusszeile. Alle vier liefen bisher
   auch dann weiter, wenn sie zwanzig Bildschirme entfernt waren —
   der Browser rechnet das mit, ohne dass es jemand sieht. Auf dem
   Handy kostet das Rechenzeit und Akku.

   js/main.js haengt deshalb "ruht" an einen Abschnitt, sobald er
   aus dem Blickfeld ist. Angehalten wird nur, was in Schleife
   laeuft — die einmaligen Auftritte (Vorhang oeffnet, Schild
   zuendet) bleiben unberuehrt, sonst begaenne der Auftritt beim
   Zurueckscrollen von vorn.

   animation-play-state statt display:none oder Klasse entfernen:
   die Bewegung friert ein und laeuft beim Wiederkommen dort
   weiter, wo sie war. Nichts springt.
   ============================================================ */
.ruht .np-blatt,
.ruht .sakura-fall circle,
.ruht .neon-sign::before,
.ruht .neon-sign li,
.ruht .cs-dampf path {
  /* !important ist hier kein Notnagel, sondern noetig. Die Regeln, die
     diese Bewegungen setzen, benutzen die Kurzform animation: — und die
     schreibt den Laufzustand als "running" gleich mit. Dazu sind sie
     spezifischer (.noren.open .np-blatt gegen .ruht .np-blatt). Ohne
     !important gewinnt also in jedem Fall das Laufen. */
  animation-play-state: paused !important;
}

/* ============================================================
   Der Vorhang von Sides4you

   Klickt jemand auf die Signatur im Fuss, faehrt ein Pinselstrich
   quer durch den Schirm, waechst ins Riesenhafte und die Tinte
   verschluckt alles. Darauf steht die Ansage.

   Warum ueberhaupt ein Zwischenschritt und kein einfacher Link:
   Wer hier klickt, hat sich fuer den Erbauer der Seite interessiert
   und nicht fuer Ramen. Der Moment gehoert dieser Neugier — aber er
   gehoert auch wieder zurueckgegeben. Deshalb ist alles abbrechbar,
   und wer nichts tut, sitzt nicht fest.

   Der Strich ist ein SVG, das js/main.js beim ersten Klick baut.
   Vorher liegt nichts davon im Dokument: kein Besucher soll etwas
   mitladen, das er nie zu sehen bekommt.
   ============================================================ */
.s4y {
  position: fixed; inset: 0; z-index: 200;
  display: grid; place-items: center;
  overflow: hidden;
  background: var(--navy);
  opacity: 0;
  transition: opacity 0.3s var(--ease);
}
.s4y.an { opacity: 1; }

/* ---- Der Pinselstrich ----

   Erster Versuch waren sechsundvierzig duenne Wellenlinien, die als
   Nudeln gemeint waren. Bei zwei Pixel Breite liest das kein Auge als
   Nudel, sondern als Gekritzel — viele feine Striche auf dunklem
   Grund ergeben Unruhe, kein Bild.

   Jetzt ist es EIN Strich. Ein Pinselzug, an den Enden auslaufend wie
   bei Sumi-e, faehrt in einem Zug quer durch den Schirm. Dann waechst
   er ins Riesenhafte und die Tinte verschluckt alles — daraus wird
   die Flaeche, auf der die Ansage steht. Ein grosses Zeichen statt
   fuenfzig kleiner: das traegt, und es ist in einer halben Sekunde
   erzaehlt statt in anderthalb.

   Drei Takte, jeder mit einer Aufgabe:
     1. der Zug   — der Strich wischt von links herein   (0,52 s)
     2. die Flut  — er waechst, die Tinte nimmt den Raum (0,50 s)
     3. das Wort  — die Ansage steigt auf               (0,60 s)  */
.s4y-pinsel {
  position: absolute; top: 50%; left: 50%;
  width: 132vmax; height: 66vmax;
  translate: -50% -50%;
  transform-origin: 42% 50%;
  /* Der Zug wischt herein, danach waechst der Strich ueber den Rand
     hinaus. Beides an einem Element, damit nichts auseinanderlaeuft. */
  animation: s4y-zug 0.52s cubic-bezier(0.22, 0.9, 0.24, 1) both,
             s4y-flut 0.5s cubic-bezier(0.7, 0, 0.85, 0.3) 0.5s both;
}
.s4y-pinsel path { fill: var(--noren); }

@keyframes s4y-zug {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0 0 0); }
}
@keyframes s4y-flut {
  from { scale: 1; }
  to   { scale: 26; }
}

/* Die Tropfen, die der Pinsel abwirft. Sie kommen mit dem Zug und
   verschwinden, wenn die Flut sie einholt — sie sollen den Strich
   begleiten, nicht ihm Konkurrenz machen. */
.s4y-spritzer {
  position: absolute; inset: 0;
  animation: s4y-weg 0.3s linear 0.52s both;
}
.s4y-spritzer circle { fill: var(--noren); }
@keyframes s4y-weg { to { opacity: 0; } }

/* ---- Die Farbe ----
   Sie liegt hinter der Ansage und faengt den Moment auf, in dem der
   Strich ueber den Rand hinausgewachsen ist. Ohne sie blitzte fuer ein
   Bild der dunkle Grund durch. Noren-Rot, dieselbe Farbe wie der
   Vorhang im Kopf der Seite — das Bild bleibt geschlossen. */
.s4y-farbe {
  position: absolute; inset: 0;
  background: radial-gradient(120% 90% at 40% 42%, var(--noren) 0%, #7A1420 55%, #440C16 100%);
  opacity: 0;
  animation: s4y-auftauchen 0.24s linear 0.86s both;
}
@keyframes s4y-auftauchen { to { opacity: 1; } }

/* ---- Die Ansage ---- */
.s4y-wort {
  position: relative; z-index: 2;
  max-width: min(660px, 88vw);
  padding: 0 4vw;
  text-align: center;
  opacity: 0; transform: translateY(22px);
  animation: s4y-auf 0.6s var(--ease) 0.98s both;
}
@keyframes s4y-auf {
  to { opacity: 1; transform: none; }
}
.s4y-wort p {
  font-size: clamp(15px, 1.7vw, 19px);
  line-height: 1.6;
  color: rgba(253,249,249,0.9);
}
.s4y-marke {
  display: block;
  margin: 6px 0 clamp(20px, 3vw, 32px);
  font-family: var(--font-display);
  font-size: clamp(34px, 7vw, 74px); font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink);
  text-shadow: 0 6px 30px rgba(0,0,0,0.4);
}
.s4y-ruf {
  margin-top: clamp(18px, 2.6vw, 28px);
  font-size: clamp(15px, 1.7vw, 19px);
}

.s4y-knoepfe {
  margin-top: clamp(22px, 3vw, 34px);
  display: flex; flex-wrap: wrap; gap: 12px; justify-content: center;
}
.s4y-knopf {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 14px 26px; border-radius: 999px;
  font-size: 14px; font-weight: 700;
  letter-spacing: 0.09em; text-transform: uppercase;
  text-decoration: none;
  transition: transform 0.25s var(--ease), background 0.25s var(--ease),
              border-color 0.25s var(--ease), color 0.25s var(--ease);
}
.s4y-knopf.voll {
  background: var(--ink); color: var(--noren);
  border: 1px solid var(--ink);
}
.s4y-knopf.voll:hover { transform: translateY(-2px); background: var(--blass); border-color: var(--blass); }
.s4y-knopf.leer {
  background: none; color: var(--ink);
  border: 1px solid rgba(253,249,249,0.5);
}
.s4y-knopf.leer:hover { transform: translateY(-2px); border-color: var(--ink); background: rgba(253,249,249,0.1); }
.s4y-knopf svg { width: 17px; height: 17px; }

/* Zurueck zur Seite */
.s4y-zu {
  position: absolute; z-index: 3;
  top: clamp(16px, 2.6vw, 30px); right: clamp(16px, 2.6vw, 30px);
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(0,0,0,0.28);
  border: 1px solid rgba(253,249,249,0.4);
  color: var(--ink); cursor: pointer;
  opacity: 0;
  animation: s4y-auf 0.4s var(--ease) 1.05s both;
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease);
}
.s4y-zu:hover { border-color: var(--ink); background: rgba(0,0,0,0.45); }
.s4y-zu:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.s4y-zu svg { width: 18px; height: 18px; }

/* Ohne Bewegung faellt der Vorhang nicht, er ist einfach da. Die
   Nudeln entfallen ganz — eine stehende Nudelwand haette keinen
   Sinn, sie lebt nur von der Bewegung. */
@media (prefers-reduced-motion: reduce) {
  .s4y-pinsel, .s4y-spritzer { display: none; }
  .s4y-farbe { animation: none; opacity: 1; }
  .s4y-wort, .s4y-zu { animation: none; opacity: 1; transform: none; }
  .s4y-knopf:hover { transform: none; }
}

/* ---------- Die Lieferdienste ----------

   Drei Wege, dasselbe zu bekommen: Lieferando, Wolt, Uber Eats. Sie
   stehen als eigene Zeile unter den beiden Kartenknoepfen und nicht
   dazwischen — sonst konkurrieren fuenf gleich aussehende Knoepfe um
   dieselbe Aufmerksamkeit. Bestellen und Karte gehoeren dem Haus, die
   Lieferdienste sind ein Nachsatz.

   Jeder Knopf verschwindet, wenn im Dashboard keine Adresse dafuer
   steht; faellt der letzte weg, geht die Ueberschrift mit (js/main.js). */
.liefer-zeile {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 10px 16px;
  margin-top: clamp(18px, 2.2vw, 26px);
  padding-top: clamp(16px, 2vw, 22px);
  border-top: 1px solid rgba(253,249,249,0.12);
}
.liefer-titel {
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--ink-dim);
}
.liefer-knoepfe { display: flex; flex-wrap: wrap; gap: 10px; }
/* Kleiner als die beiden Hauptknoepfe darueber: gleiche Groesse hiesse
   gleiche Wichtigkeit, und das stimmt hier nicht. */
.liefer-zeile .btn {
  padding: 9px 18px;
  font-size: 12.5px; letter-spacing: 0.08em;
}
@media (max-width: 560px) {
  .liefer-zeile { flex-direction: column; align-items: flex-start; gap: 12px; }
}

/* ---------- Stellenanzeige im Startbild ----------

   Bewusst kein gefuellter Knopf: das Startbild lebt vom Vorhang und
   der Wortmarke, ein zweiter Signalblock daneben wuerde beides
   schwaechen. Stattdessen eine feine Linie in Rose, die sich beim
   Darueberfahren fuellt — sichtbar, aber der Hierarchie untergeordnet.
   求人 ist das japanische Wort fuer Stellenausschreibung und traegt
   die zweisprachige Setzung der uebrigen Seite weiter. */

.hero-jobs {
  display: inline-flex; align-items: center; gap: 10px;
  margin-top: 26px; padding: 10px 20px;
  border: 1px solid var(--rose); border-radius: 999px;
  color: var(--rose); text-decoration: none;
  font-size: clamp(12px, 1vw, 14px);
  letter-spacing: 0.14em; text-transform: uppercase;
  background: transparent;
  transition: background 0.4s var(--ease), color 0.4s var(--ease),
              border-color 0.4s var(--ease);
}

.hero-jobs-jp {
  font-family: var(--font-jp);
  font-size: 1.15em; letter-spacing: 0.08em;
  text-transform: none;
  opacity: 0.85;
}

.hero-jobs-pfeil { transition: transform 0.4s var(--ease); }

.hero-jobs:hover,
.hero-jobs:focus-visible {
  background: var(--rose); color: var(--navy); border-color: var(--rose);
}
.hero-jobs:hover .hero-jobs-pfeil,
.hero-jobs:focus-visible .hero-jobs-pfeil { transform: translateX(4px); }

@media (max-width: 520px) {
  .hero-jobs { margin-top: 20px; padding: 9px 16px; gap: 8px; }
}

/* ---------- Aufkleber fuer Neuigkeiten ----------

   Ein Stempel, kein Banner. Die Seite kennt den Stempel schon vom
   Studierendenrabatt (学割), deshalb liest sich die Form hier von
   selbst. Leicht gedreht, damit er wie aufgeklebt wirkt und nicht
   wie ein weiteres Bedienelement.

   Die Drehung wechselt zwischen den beiden Plaetzen das Vorzeichen:
   zweimal derselbe Winkel saehe nach Vorlage aus, nicht nach Hand. */

.sticker {
  /* Rose, nicht Noren-Rot: der Aufkleber im Startbild liegt auf dem
     Vorhang, und der ist selbst Noren-Rot — rot auf rot verschwindet.
     Rose ist auf dieser Seite ohnehin die Signalfarbe und traegt
     gegen beide Gruende, den roten Vorhang wie das dunkle Marineblau
     dahinter, wenn der Vorhang oben ist. */
  --sticker-grund: var(--rose);
  position: relative; z-index: 3;
  display: inline-block; max-width: min(260px, 62vw);
  padding: 12px 18px;
  background: var(--sticker-grund);
  color: var(--navy); text-decoration: none;
  font-weight: 700; font-size: clamp(12px, 1.05vw, 14px);
  line-height: 1.35; letter-spacing: 0.04em;
  text-align: center; text-wrap: balance;
  /* Zeilenumbrueche aus dem Dashboard bleiben erhalten: wer im Feld
     Enter drueckt, meint auch einen Umbruch. */
  white-space: pre-line;
  border-radius: 4px;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.45);
  transition: transform 0.45s var(--ease), box-shadow 0.45s var(--ease);
}

/* Die gestrichelte Kante eines aufgeklebten Etiketts, nur angedeutet */
.sticker::before {
  content: ""; position: absolute; inset: 4px;
  border: 1px dashed rgba(0, 17, 43, 0.38);
  border-radius: 2px; pointer-events: none;
}

.sticker-hero {
  position: absolute; right: clamp(16px, 4vw, 54px); bottom: clamp(18px, 5vh, 54px);
  transform: rotate(-3.5deg);
}

.sticker-visit {
  margin-top: 26px;
  transform: rotate(2.5deg);
}

a.sticker:hover, a.sticker:focus-visible {
  transform: rotate(0deg) translateY(-3px);
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.5);
}

/* In der Weihnachtsfassung steht der Baum unten rechts — der Aufkleber
   rueckt dort nach links, sonst stehen beide uebereinander. */
html[data-edition="weihnachten"] .sticker-hero { right: auto; left: clamp(16px, 4vw, 54px); }

@media (max-width: 720px) {
  .sticker-hero {
    right: auto; left: 50%; bottom: clamp(12px, 3vh, 28px);
    transform: translateX(-50%) rotate(-3.5deg);
    max-width: min(300px, 82vw);
  }
  a.sticker-hero:hover, a.sticker-hero:focus-visible {
    transform: translateX(-50%) rotate(0deg) translateY(-3px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .sticker, .hero-jobs, .hero-jobs-pfeil { transition: none; }
}

/* ---------- Telefon unter den Oeffnungszeiten ----------

   Die Nummer traegt Rose, weil sie anklickbar ist -- auf dieser Seite
   ist Rose durchgehend die Farbe fuer Bedienbares. Der Hinweis
   darunter steht im gedaempften Ton der Zeitentabelle, damit er die
   Nummer nicht ueberlagert. */

.visit-tel {
  margin-top: 18px;
  display: flex; flex-direction: column; gap: 3px;
}

.visit-tel-nr {
  color: var(--rose); text-decoration: none;
  font-size: clamp(16px, 1.5vw, 19px);
  letter-spacing: 0.04em; font-weight: 700;
  width: fit-content;
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s var(--ease);
}
.visit-tel-nr:hover,
.visit-tel-nr:focus-visible { border-bottom-color: var(--rose); }

.visit-tel-hinweis {
  color: var(--ink-dim);
  font-size: clamp(12px, 1vw, 13.5px);
  letter-spacing: 0.02em;
}

@media (prefers-reduced-motion: reduce) { .visit-tel-nr { transition: none; } }