/* =========================================================
   CHUG – Entwurf 2: „Laut wie ein Seoul-Plakat“
   Typo first. Harte Farbflächen. Neon nur als Akzent.
   ========================================================= */

@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-latin-var.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}
/* Black Han Sans: nur die auf der Seite verwendeten Hangul-Zeichen (Subset) */
@font-face {
  font-family: "Black Han Sans";
  src: url("../fonts/blackhansans-subset.woff2?v=4") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --ink: #0b0710;        /* Nachtschwarz mit Violett */
  --ink-2: #160d24;      /* Tiefviolett */
  --paper: #fff3e6;      /* warmes Weiß */
  --mute: #b9adc9;
  --orange: #ff6a1a;     /* Logo-Outline */
  --amber: #ffb43d;      /* Marmortresen */
  --pink: #ff2e93;       /* Schreibschrift-Neon */
  --cyan: #2de2f0;       /* „No Sip“-Schild */
  --yellow: #ffc83d;     /* Bierkrug */

  --gutter: clamp(1rem, 3.5vw, 3rem);
  --dock-h: 0px;
  --display: "Archivo", "Arial Narrow", Impact, sans-serif;
  --ko: "Black Han Sans", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 4.5rem; }
body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--display);
  font-stretch: 100%;
  font-weight: 400;
  font-size: 1.0625rem;
  line-height: 1.5;
  overflow-x: clip;
  padding-bottom: var(--dock-h);
}
img, svg { display: block; max-width: 100%; }
picture { display: contents; }
a { color: inherit; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
[lang="ko"] { font-family: var(--ko); font-weight: 400; font-stretch: 100%; letter-spacing: 0; }

:focus-visible { outline: 3px solid var(--cyan); outline-offset: 3px; border-radius: 2px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 1rem; top: -4rem; z-index: 200; background: var(--cyan); color: var(--ink); padding: .75rem 1rem; font-weight: 800; }
.skip:focus { top: 1rem; }
.c-orange { color: var(--orange); }
.c-pink { color: var(--pink); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: .55rem 1.1rem;
  font-weight: 800; font-stretch: 85%; text-transform: uppercase; letter-spacing: .02em; font-size: .95rem;
  text-decoration: none; border: 2px solid currentColor; border-radius: 0;
  transition: transform .15s ease, opacity .15s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn--orange { background: var(--orange); color: var(--ink); border-color: var(--orange); }
.btn--line { color: var(--cyan); }
.btn--big { min-height: 56px; font-size: 1.1rem; padding: .8rem 1.4rem; }

/* ---------- Header ---------- */
.top {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  display: flex; align-items: center; gap: 1rem;
  height: 4rem; padding: 0 var(--gutter);
  background: rgba(11, 7, 16, .86);
  border-bottom: 1px solid rgba(255, 243, 230, .08);
}
@supports (backdrop-filter: blur(8px)) { .top { backdrop-filter: blur(8px); background: rgba(11, 7, 16, .7); } }
.top__logo { display: block; width: 7.5rem; min-height: 44px; display: flex; align-items: center; }
.top__logo picture { display: block; width: 100%; }
.top__logo img { display: block; width: 100%; height: auto; aspect-ratio: 480 / 175; object-fit: contain; }
.top__nav { display: flex; gap: .25rem; margin-left: auto; }
.top__nav a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 .6rem;
  text-decoration: none; text-transform: uppercase; font-weight: 700; font-stretch: 80%; letter-spacing: .04em; font-size: .9rem;
}
.top__nav a:hover { color: var(--orange); }
.top__cta { display: none; gap: .5rem; }

/* ---------- Hero ---------- */
.hero {
  padding: 4.75rem var(--gutter) 0;
  display: grid;
  grid-template-areas: "l1" "photo" "l2" "meta";
}
.hero__title { display: contents; }
.hero__title span {
  display: block; text-transform: uppercase; font-weight: 900; font-stretch: 62%;
  line-height: .8; letter-spacing: -.015em; white-space: nowrap;
}
.hero__l1 { grid-area: l1; font-size: calc((100vw - 2 * var(--gutter)) / 2.45); color: var(--paper); position: relative; z-index: 2; margin-bottom: -.13em; }
.hero__l2 { grid-area: l2; font-size: calc((100vw - 2 * var(--gutter)) / 3.8); color: var(--orange); position: relative; z-index: 2; margin-top: -.12em; }

.hero__photo { grid-area: photo; position: relative; z-index: 1; margin: 0 calc(var(--gutter) * -1); }
.hero__photo img { width: 100%; height: 56vw; max-height: 62vh; min-height: 15rem; object-fit: cover; object-position: 50% 45%; }
.hero__sticker {
  position: absolute; right: var(--gutter); bottom: 18%;
  writing-mode: vertical-rl; text-orientation: upright;
  background: var(--cyan); color: var(--ink);
  font-size: clamp(2.2rem, 9vw, 6.5rem); line-height: 1; padding: .18em .12em;
  transform: rotate(4deg);
  box-shadow: 0 0 0 3px var(--ink);
}

.hero__meta {
  grid-area: meta; display: grid; grid-template-columns: 1fr; margin-top: 1.25rem;
  border-top: 2px solid var(--paper);
}
.hero__meta li { padding: .8rem 0; border-bottom: 1px solid rgba(255, 243, 230, .2); font-size: .98rem; color: var(--mute); }
.hero__meta b { display: block; color: var(--paper); font-weight: 800; font-stretch: 80%; text-transform: uppercase; font-size: 1.15rem; letter-spacing: .01em; }
.status { display: inline-flex; align-items: center; gap: .45em; }
.status::before { content: ""; width: .6em; height: .6em; border-radius: 50%; background: var(--mute); }
.status.is-open { color: var(--cyan); }
.status.is-open::before { background: var(--cyan); box-shadow: 0 0 10px var(--cyan); }

/* ---------- Laufband ---------- */
.tape { position: relative; margin: 3rem 0 2rem; padding: 2.5rem 0; overflow: hidden; }
.tape__row {
  display: flex; white-space: nowrap; width: max-content;
  font-weight: 900; font-stretch: 70%; text-transform: uppercase; font-size: clamp(2rem, 7vw, 5rem); line-height: 1;
  padding: .18em 0; will-change: transform;
}
.tape__row > span { padding-right: .3em; }
.tape__row i { font-style: normal; display: inline-block; margin: 0 .25em; }
.tape__row [lang="ko"] { font-size: .92em; }
.tape__band { width: 120vw; margin-left: -10vw; overflow: hidden; color: var(--ink); }
.tape__band--orange { background: var(--orange); transform: rotate(-2.5deg); position: relative; z-index: 2; box-shadow: 0 0 0 4px var(--ink); }
.tape__band--pink { background: var(--pink); transform: rotate(2deg); margin-top: -.4rem; }

/* ---------- Section-Label (Plakat-Kennung) ---------- */
.label {
  display: flex; align-items: baseline; gap: .8rem; flex-wrap: wrap;
  border-top: 2px solid currentColor; padding-top: .7rem; margin-bottom: 2rem;
  text-transform: uppercase; font-weight: 800; font-stretch: 80%; letter-spacing: .05em; font-size: .9rem;
}
.label__no { font-size: 1rem; }
.label__ko { font-size: 1.4rem; letter-spacing: 0; text-transform: none; }
.label__de { margin-left: auto; }

/* ---------- Über uns ---------- */
.about { padding: 3rem var(--gutter) 5rem; }
.about .label { color: var(--pink); }
.about__title { margin-bottom: 2.5rem; }
.about__title span {
  display: block; text-transform: uppercase; font-weight: 900; font-stretch: 62%; line-height: .84;
  font-size: clamp(4.5rem, 21vw, 17rem); letter-spacing: -.01em;
}
.about__grid { display: grid; gap: 2rem; }
.dict {
  background: var(--pink); color: var(--ink); padding: 1.25rem 1.25rem 1.4rem;
  transform: rotate(-1.5deg); align-self: start;
}
.dict dt { font-size: clamp(4rem, 22vw, 9rem); line-height: .95; }
.dict dt em { font-family: var(--display); font-style: normal; font-size: 1.1rem; font-weight: 700; vertical-align: top; }
.dict dd { font-size: 1rem; font-weight: 500; line-height: 1.45; margin-top: .5rem; }
.about__text p { max-width: 38rem; color: #e9dff0; }
.about__text [lang="ko"], .dict dd [lang="ko"], .dishes p [lang="ko"], .cheers__cap [lang="ko"], .ph figcaption [lang="ko"] { font-family: "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif; font-weight: 700; }
.about__text p + p { margin-top: 1rem; }
.lead { font-size: clamp(1.4rem, 4.6vw, 2.1rem); line-height: 1.15; font-weight: 800; font-stretch: 85%; color: var(--paper) !important; }

/* ---------- Foto-Schnitt mit Scroll-Bewegung ---------- */
.cut { position: relative; height: 150vh; }
.cut__stick { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; display: grid; place-items: center; }
.cut__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%;
  transform: scale(calc(1.15 - var(--p, 0) * .15)); filter: saturate(1.1); }
.cut__stick::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11,7,16,.55), rgba(11,7,16,.15) 40%, rgba(11,7,16,.7)); }
.cut__line {
  position: absolute; left: 0; right: 0; z-index: 2; margin: 0;
  font-weight: 900; font-stretch: 62%; text-transform: uppercase; line-height: .85; white-space: nowrap;
  font-size: min(15rem, calc((100vw - 2 * var(--gutter)) / 4.9));
}
.cut__line--a { bottom: 50%; color: var(--paper); padding-left: var(--gutter); transform: translateX(calc(max(0, 1 - var(--p, 1) * 1.8) * -60%)); }
.cut__line--b { top: 50%; color: var(--pink); text-align: right; padding-right: var(--gutter); transform: translateX(calc(max(0, 1 - var(--p, 1) * 1.8) * 60%)); }
.cut__line--b strong { color: var(--orange); font-weight: 900; }

/* ---------- Speisekarte ---------- */
.menu { padding: 5rem var(--gutter); }
.menu .label { color: var(--orange); }
.menu__title {
  text-transform: uppercase; font-weight: 900; font-stretch: 62%; line-height: .84;
  font-size: clamp(4rem, 19vw, 14rem); margin-bottom: 1.5rem;
}
.note {
  display: inline-block; border: 2px dashed var(--amber); color: var(--amber);
  padding: .6rem .9rem; margin-bottom: 2.5rem; font-size: .95rem;
}
.note b { text-transform: uppercase; font-stretch: 80%; letter-spacing: .03em; }
.menu__cols { display: grid; gap: 3.5rem; }
.menu__head {
  display: flex; justify-content: space-between; align-items: baseline;
  background: var(--paper); color: var(--ink); padding: .5rem .75rem .35rem;
  text-transform: uppercase; font-weight: 900; font-stretch: 70%; font-size: clamp(2rem, 8vw, 3.4rem); line-height: 1;
}
.menu__col:nth-child(2) .menu__head { background: var(--cyan); }
.menu__head [lang="ko"] { font-size: .8em; }
.dishes { counter-reset: d; }
.dishes li {
  counter-increment: d;
  display: grid; grid-template-columns: 2.2rem 1fr auto; grid-template-areas: "n name price" "n ko ko" "n desc desc";
  column-gap: .5rem; padding: 1rem 0 1.05rem; border-bottom: 1px solid rgba(255,243,230,.18);
}
.dishes li::before {
  content: counter(d, decimal-leading-zero); grid-area: n; font-weight: 700; font-stretch: 80%; color: var(--orange); font-size: .85rem; padding-top: .35rem;
}
.dishes--drinks li::before { color: var(--cyan); }
.dishes h4 { grid-area: name; text-transform: uppercase; font-weight: 900; font-stretch: 72%; font-size: clamp(1.6rem, 6.4vw, 2.3rem); line-height: 1; letter-spacing: .005em; }
.dishes .ko { grid-area: ko; color: var(--pink); font-size: 1.2rem; margin-top: .3rem; }
.dishes--drinks .ko { color: var(--cyan); }
.dishes p { grid-area: desc; color: var(--mute); font-size: .98rem; margin-top: .2rem; }
.dishes p [lang="ko"] { font-family: inherit; }
.price { grid-area: price; font-weight: 800; color: var(--mute); font-size: 1.3rem; }
.sticker-box {
  margin-top: 2.5rem; background: var(--yellow); color: var(--ink); padding: 1.25rem; transform: rotate(1.5deg);
}
.sticker-box__big { font-weight: 900; font-stretch: 62%; text-transform: uppercase; font-size: clamp(2.6rem, 11vw, 4.6rem); line-height: .86; }
.sticker-box__small { margin-top: .6rem; font-weight: 600; font-size: .95rem; }

/* ---------- 건배 – Wort wächst beim Scrollen ---------- */
.cheers { position: relative; height: 160vh; background: var(--ink); }
.cheers__stick { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; display: grid; place-items: center; }
.cheers__word {
  font-size: min(42vw, 70vh); line-height: 1; color: var(--cyan); white-space: nowrap;
  transform: scale(calc(.25 + var(--p, .7) * 1.1)) rotate(calc((1 - var(--p, .7)) * -8deg));
  text-shadow: 0 0 .08em rgba(45, 226, 240, .45);
  will-change: transform;
}
.cheers__cap {
  position: absolute; left: var(--gutter); right: var(--gutter); bottom: calc(2rem + var(--dock-h));
  max-width: 26rem; font-size: 1.05rem; line-height: 1.4;
  opacity: calc((var(--p, 1) - .45) * 3);
}
.cheers__cap b { color: var(--cyan); }
.cheers__cap em { font-style: normal; color: var(--mute); }

/* ---------- Fotos ---------- */
.photos { padding: 5rem var(--gutter); }
.photos .label { color: var(--cyan); }
.photos__title { text-transform: uppercase; font-weight: 900; font-stretch: 62%; line-height: .84; font-size: clamp(4rem, 17vw, 13rem); margin-bottom: 2.5rem; }
.photos__grid { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.ph { position: relative; margin: 0; }
.ph img { width: 100%; height: auto; object-fit: cover; }
.ph figcaption { margin-top: .5rem; font-size: .9rem; color: var(--mute); }
.ph figcaption span {
  display: inline-grid; place-items: center; width: 1.6rem; height: 1.6rem; margin-right: .35rem;
  background: var(--paper); color: var(--ink); font-weight: 900; font-size: .85rem;
}
.ph figcaption b { color: var(--pink); font-weight: 400; }
.ph--a { grid-column: 1 / -1; }
.ph--a img { aspect-ratio: 4 / 5; object-position: 12% 50%; }   /* links zugeschnitten: altes Schild „magari“ bleibt außen vor */
.ph--b { grid-column: 1 / -1; }
.ph--b img { aspect-ratio: 16 / 10; object-position: 85% 40%; }
.ph--c img { aspect-ratio: 3 / 4; object-position: 62% 50%; }
.ph--d img { aspect-ratio: 3 / 4; object-position: 55% 50%; }

/* ---------- Reservieren / Bestellen ---------- */
.go { background: var(--orange); color: var(--ink); padding: 4rem var(--gutter) 4.5rem; }
.go__title { text-transform: uppercase; font-weight: 900; font-stretch: 62%; line-height: .82; font-size: clamp(4.5rem, 24vw, 19rem); letter-spacing: -.01em; margin-bottom: 2rem; }
.go__links { display: grid; gap: .75rem; }
.go__btn {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1rem;
  min-height: 5.5rem; padding: 1rem 1.25rem; text-decoration: none;
  background: var(--ink); color: var(--paper); border: 3px solid var(--ink);
  transition: transform .18s ease;
}
.go__btn:hover { transform: translate(-3px, -3px); box-shadow: 6px 6px 0 var(--ink); }
.go__btn--dark { background: transparent; color: var(--ink); }
.go__ko { font-size: 2.2rem; color: var(--orange); line-height: 1; }
.go__btn--dark .go__ko { color: var(--ink); }
.go__de { text-transform: uppercase; font-weight: 900; font-stretch: 72%; font-size: clamp(1.6rem, 6vw, 2.6rem); line-height: 1; }
.go__arrow { font-size: 2rem; display: flex; }
.go__small { margin-top: 1.5rem; font-weight: 600; max-width: 34rem; }

/* ---------- Besuch ---------- */
.visit { padding: 5rem var(--gutter); }
.visit .label { color: var(--amber); }
.visit__grid { display: grid; gap: 3rem; }
.visit__street { text-transform: uppercase; font-weight: 900; font-stretch: 62%; line-height: .84; font-size: clamp(4rem, 18vw, 10rem); }
.visit__city { margin-top: .8rem; font-weight: 700; font-stretch: 85%; text-transform: uppercase; letter-spacing: .03em; color: var(--mute); }
.visit__ubahn { margin: 1.5rem 0 1.75rem; display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; }
.u { display: inline-grid; place-items: center; min-width: 2.6rem; height: 2.2rem; padding: 0 .4rem; font-weight: 900; color: #fff; }
.u3 { background: #ec6726; color: var(--ink); }   /* U3 Linienfarbe Orange */
.u6 { background: #0472b3; }                      /* U6 Linienfarbe Blau */
.visit__hours { border-top: 2px solid var(--amber); padding-top: 1rem; }
.visit__kicker { text-transform: uppercase; font-weight: 800; font-stretch: 80%; letter-spacing: .06em; color: var(--amber); }
.visit__time { display: grid; font-weight: 900; font-stretch: 62%; line-height: .86; font-size: clamp(5rem, 34vw, 12rem); font-variant-numeric: tabular-nums; }
.visit__time span { display: block; }
.visit__time .dash { display: none; }
.visit__time span:last-child { color: var(--amber); padding-left: .5em; position: relative; }
.visit__time span:last-child::before { content: ""; position: absolute; left: .08em; top: 50%; width: .32em; height: .1em; background: var(--amber); }
.live { display: flex; align-items: center; flex-wrap: wrap; gap: .6rem; margin-top: 1.25rem; font-size: 1.05rem; }
.live__dot { width: .8rem; height: .8rem; border-radius: 50%; background: var(--mute); }
.live__ko { font-size: 1.3rem; }
.live.is-open .live__dot { background: var(--cyan); box-shadow: 0 0 12px var(--cyan); animation: blink 1.6s ease-in-out infinite; }
.live.is-open .live__ko { color: var(--cyan); }
.live.is-closed .live__ko { color: var(--pink); }
@keyframes blink { 50% { opacity: .35; } }
.visit__contact { border-top: 2px solid var(--paper); }
.visit__contact a {
  display: flex; justify-content: space-between; align-items: center; min-height: 3.5rem;
  border-bottom: 1px solid rgba(255,243,230,.2); text-decoration: none;
  text-transform: uppercase; font-weight: 900; font-stretch: 72%; font-size: 1.6rem;
}
.visit__contact a span { text-transform: none; font-weight: 500; font-stretch: 100%; font-size: .9rem; color: var(--mute); }
.visit__contact a:hover { color: var(--orange); }

/* ---------- Footer ---------- */
.foot { padding: 4rem var(--gutter) 2rem; border-top: 2px solid var(--paper); }
.foot__logo { display: block; width: 100%; height: auto; max-width: 70rem; margin: 0 auto; }
.foot__claim { text-align: center; margin: 1rem 0 3rem; font-weight: 800; font-stretch: 80%; text-transform: uppercase; letter-spacing: .05em; color: var(--pink); }
.foot__row { display: grid; gap: 1rem; color: var(--mute); font-size: .9rem; }
.foot__row nav { display: flex; flex-wrap: wrap; gap: .25rem 1rem; }
.foot__row nav a { display: inline-flex; align-items: center; min-height: 44px; }

/* ---------- Dock (Handy) ---------- */
.dock {
  position: fixed; inset: auto 0 0 0; z-index: 60;
  display: grid; grid-template-columns: 1fr 1fr; gap: 0;
  padding-bottom: env(safe-area-inset-bottom);
  background: var(--ink); border-top: 2px solid var(--ink);
}
.dock__btn {
  display: flex; align-items: center; justify-content: center; min-height: 3.5rem;
  text-decoration: none; text-transform: uppercase; font-weight: 900; font-stretch: 75%; font-size: 1.2rem; letter-spacing: .02em;
  background: var(--ink); color: var(--cyan); border-top: 2px solid var(--cyan);
}
.dock__btn--orange { background: var(--orange); color: var(--ink); border-top-color: var(--orange); }
:root { --dock-h: 3.6rem; }

/* ---------- Intro ---------- */
.intro {
  position: fixed; inset: 0; z-index: 300; background: var(--ink);
  display: grid; place-items: center; cursor: pointer;
  animation: intro-out .3s ease 1.55s forwards;
}
.intro[hidden] { display: none; }
.intro__w {
  grid-area: 1 / 1; display: grid; place-items: center; width: 100%; height: 100%;
  text-transform: uppercase; font-weight: 900; font-stretch: 62%; line-height: .8; font-size: min(48vw, 70vh);
  opacity: 0;
}
.intro__w--1 { color: var(--paper); animation: flash .36s steps(1) 0s; }
.intro__w--2 { background: var(--pink); color: var(--ink); animation: flash .36s steps(1) .36s; }
.intro__w--3 { background: var(--cyan); color: var(--ink); animation: flash .36s steps(1) .72s; }
.intro__w--4 { background: var(--orange); color: var(--ink); font-size: min(34vw, 60vh); animation: flash-last .5s cubic-bezier(.2, .9, .3, 1.3) 1.08s forwards; }
.intro__skip { position: absolute; bottom: 1.25rem; left: 0; right: 0; text-align: center; font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--mute); }
@keyframes flash { 0% { opacity: 1; } 100% { opacity: 1; } }
@keyframes flash-last { 0% { opacity: 1; transform: scale(1.25); } 100% { opacity: 1; transform: scale(1); } }
@keyframes intro-out { to { opacity: 0; visibility: hidden; } }
.intro.is-done { display: none; }

/* =========================================================
   Breakpoints
   ========================================================= */
@media (min-width: 720px) {
  .hero__meta { grid-template-columns: repeat(3, 1fr); }
  .hero__meta li { padding: 1rem 1rem 1rem 0; border-bottom: 0; }
  .hero__meta li + li { padding-left: 1rem; border-left: 1px solid rgba(255,243,230,.2); }
  .about__grid { grid-template-columns: 5fr 7fr; align-items: start; gap: 4rem; }
  .photos__grid { grid-template-columns: repeat(12, 1fr); gap: 1rem; }
  .ph--a { grid-column: 1 / 6; grid-row: 1 / 3; }
  .ph--a picture { display: block; height: 100%; }
  .ph--a img { aspect-ratio: auto; height: 100%; min-height: 34rem; }
  .ph--b { grid-column: 6 / 13; }
  .ph--c { grid-column: 6 / 9; }
  .ph--d { grid-column: 9 / 13; }
  .ph--c img, .ph--d img { aspect-ratio: 4 / 5; }
  .go__links { grid-template-columns: 1fr 1fr; }
  .foot__row { grid-template-columns: 1fr auto; align-items: center; }
}

@media (min-width: 1024px) {
  :root { --dock-h: 0px; }
  .dock { display: none; }
  .top { height: 4.5rem; }
  .top__logo { width: 9rem; }
  .top__nav { margin-left: 2rem; margin-right: auto; }
  .top__cta { display: flex; }
  .hero { padding-top: 5.5rem;
    grid-template-columns: 1fr; }
  .hero__photo img { height: 58vh; max-height: none; }
  .menu__cols { grid-template-columns: 1fr 1fr; gap: 4rem; }
  .visit__grid { grid-template-columns: 7fr 5fr; column-gap: 4rem; row-gap: 4rem; }
  .visit__contact { align-self: start; }
  .go__ko { font-size: 3rem; }
}

/* ---------- Reduced Motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .intro { display: none !important; }
  .cut, .cheers { height: auto; }
  .cut__stick, .cheers__stick { position: relative; height: auto; min-height: 80vh; padding: 4rem 0; }
  .cut__img { transform: none; }
  .cut__line--a, .cut__line--b { transform: none; white-space: normal; position: relative; top: auto; bottom: auto; }
  .cheers__word { transform: none; font-size: min(36vw, 50vh); }
  .cheers__cap { opacity: 1; position: static; margin: 0 var(--gutter); }
  .tape__row { transform: none !important; }
}

/* Icons (inline SVG statt Unicode-Zeichen, die iOS als Emoji darstellt) */
.ico { width: 1.15em; height: 1.15em; flex: none; display: block; }
.btn .ico { margin-right: .5em; }

/* =========================================================
   Menü (Handy): Burger + Vollbild, nach dem Vorbild von The Xofa,
   im Plakat-Stil: harte Kanten, Farbflächen, große Schrift
   ========================================================= */
.burger {
  display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px;
  width: 44px; height: 44px; margin-left: auto; padding: 0;
  border: 0; background: transparent; cursor: pointer;
}
.burger i { display: block; width: 26px; height: 3px; background: var(--paper); }
.burger i:nth-child(2) { background: var(--orange); }
@media (max-width: 1023px) { .top__nav { display: none; } }
@media (min-width: 1024px) { .burger { display: none; } }
.top__nav a.on { color: var(--orange); }

.menu-ov {
  position: fixed; inset: 0; z-index: 80;
  display: flex; flex-direction: column;
  padding: 0 var(--gutter) max(1rem, env(safe-area-inset-bottom));
  background: var(--ink); color: var(--paper); overflow: hidden;
  opacity: 0; visibility: hidden; transition: opacity .2s steps(2, end), visibility 0s .2s;
}
.menu-ov[hidden] { display: none; }
html.menu-open .menu-ov { opacity: 1; visibility: visible; transition: opacity .2s steps(2, end); }
html.menu-open, html.menu-open body { overflow: hidden; }
/* Riesiger Claim als Hintergrund-Plakat, nur als Kontur */
.menu-ov__deco {
  position: absolute; right: -.08em; bottom: 16%; pointer-events: none;
  text-align: right; text-transform: uppercase; font-weight: 900; font-stretch: 62%;
  font-size: 34vw; line-height: .8;
  color: transparent; -webkit-text-stroke: 1.5px rgba(255,106,26,.28);
}
.menu-ov__top {
  position: relative; display: flex; align-items: center; justify-content: space-between;
  height: 4rem; flex: none; border-bottom: 1px solid rgba(255,243,230,.12);
}
.menu-ov__logo { display: block; width: 7.5rem; }
.menu-ov__logo img { display: block; width: 100%; height: auto; }
/* Schließen: orange Fläche mit schwarzem X */
.menu-ov__close {
  position: relative; width: 44px; height: 44px; padding: 0; border: 0; cursor: pointer;
  background: var(--orange); transition: transform .15s ease;
}
.menu-ov__close::before, .menu-ov__close::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 24px; height: 3px; background: var(--ink);
  transform: translate(-50%, -50%) rotate(45deg);
}
.menu-ov__close::after { transform: translate(-50%, -50%) rotate(-45deg); }
.menu-ov__close:hover, .menu-ov__close:active { transform: rotate(90deg); }

.menu-ov__list { position: relative; list-style: none; margin: auto 0; padding: 0; counter-reset: m; }
.menu-ov__list li { counter-increment: m; border-bottom: 2px solid rgba(255,243,230,.14); }
.menu-ov__list li:first-child { border-top: 2px solid rgba(255,243,230,.14); }
.menu-ov__list a {
  display: grid; grid-template-columns: auto 1fr; grid-template-areas: "no ko" "no de"; column-gap: 1rem;
  padding: .85rem 0; text-decoration: none; color: var(--paper);
}
.menu-ov__list a::before {
  content: "0" counter(m); grid-area: no; align-self: end;
  font-weight: 800; font-size: .85rem; color: var(--mute); padding-bottom: .4rem;
}
.menu-ov__list a span { grid-area: ko; font-family: var(--ko); font-size: 1rem; line-height: 1; margin-bottom: .55rem; }
.menu-ov__list li:nth-child(1) a span { color: var(--pink); }
.menu-ov__list li:nth-child(2) a span { color: var(--orange); }
.menu-ov__list li:nth-child(3) a span { color: var(--cyan); }
.menu-ov__list li:nth-child(4) a span { color: var(--yellow); }
.menu-ov__list a {
  font-weight: 900; font-stretch: 62%; text-transform: uppercase;
  font-size: clamp(3rem, 15.5vw, 5rem); line-height: .86; letter-spacing: -.005em;
}
.menu-ov__list a:active, .menu-ov__list a.on { color: var(--orange); }
.menu-ov__list li { opacity: 0; transform: translateX(-24px); }
html.menu-open .menu-ov__list li { animation: menu-slam .4s cubic-bezier(.2,.9,.3,1.2) forwards; }
html.menu-open .menu-ov__list li:nth-child(2) { animation-delay: .05s; }
html.menu-open .menu-ov__list li:nth-child(3) { animation-delay: .1s; }
html.menu-open .menu-ov__list li:nth-child(4) { animation-delay: .15s; }
@keyframes menu-slam { to { opacity: 1; transform: none; } }

.menu-ov__foot { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; flex: none; }
.menu-ov__btn {
  display: flex; align-items: center; justify-content: center; min-height: 3.5rem; padding: .5rem;
  text-decoration: none; text-transform: uppercase; font-weight: 900; font-stretch: 72%; font-size: 1.15rem; line-height: 1; text-align: center;
  color: var(--cyan); border: 2px solid var(--cyan);
}
.menu-ov__btn--orange { background: var(--orange); border-color: var(--orange); color: var(--ink); }
.menu-ov__meta {
  grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 1rem; margin-top: .4rem;
  font-size: .85rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--mute);
}
.menu-ov__meta a { color: var(--paper); }
@media (prefers-reduced-motion: reduce) {
  .menu-ov__list li { opacity: 1; transform: none; }
  html.menu-open .menu-ov__list li { animation: none; }
}

/* Online-Bestellung noch nicht verfügbar: Button gedimmt, nicht klickbar, mit „Bald“ */
.is-off { opacity: .45; cursor: default; pointer-events: none; box-shadow: none !important; transform: none !important; }
.soon { display: inline-block; margin-left: .45em; padding: .2em .5em; border: 2px solid currentColor; font-size: .62em; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; line-height: 1.1; vertical-align: middle; }
.go__arrow.soon { font-size: .9rem; margin: 0; }

/* ---------- Speisekarte (echte Karte, Nov. 2026) ----------
   Reiter für die Kategorien, am Handy beim Scrollen oben angeheftet.
   Ohne JS (kein .has-tabs) stehen alle Kategorien untereinander. */
.mtabs {
  position: sticky; top: 4rem; z-index: 20;
  display: flex; gap: .5rem; overflow-x: auto; scrollbar-width: none;
  margin: 0 calc(-1 * var(--gutter)) 2rem; padding: .75rem var(--gutter);
  background: var(--ink); border-bottom: 2px solid rgba(255,243,230,.12);
  scroll-snap-type: x proximity;
}
.mtabs::-webkit-scrollbar { display: none; }
.mtabs[hidden] { display: none; }
.mtab {
  flex: none; scroll-snap-align: start;
  display: grid; justify-items: start; gap: .2rem; min-height: 44px;
  padding: .45rem .7rem .4rem; border: 2px solid rgba(255,243,230,.35); background: transparent; color: var(--paper);
  font: inherit; text-transform: uppercase; font-weight: 900; font-stretch: 72%; font-size: 1rem; line-height: 1; cursor: pointer;
}
.mtab span { font-family: var(--ko); font-weight: 400; font-size: .8rem; color: var(--orange); text-transform: none; }
.mtab[aria-selected="true"] { background: var(--orange); border-color: var(--orange); color: var(--ink); }
.mtab[aria-selected="true"] span { color: var(--ink); }
.mtab:focus-visible { outline: 3px solid var(--cyan); outline-offset: 2px; }

.mcat { margin-bottom: 3rem; scroll-margin-top: 8.5rem; }
.has-tabs .mcat[hidden] { display: none; }
.mcat__head {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  background: var(--paper); color: var(--ink); padding: .5rem .75rem .35rem; margin-bottom: 1.25rem;
  text-transform: uppercase; font-weight: 900; font-stretch: 70%; font-size: clamp(2rem, 8vw, 3.4rem); line-height: 1;
}
.mcat__head [lang="ko"] { font-family: var(--ko); font-weight: 400; font-size: .7em; }
.has-tabs .mcat__head { display: none; }
.mcat__lede { color: var(--amber); font-weight: 800; text-transform: uppercase; font-stretch: 80%; letter-spacing: .03em; margin: -.25rem 0 1.25rem; }
.mcat__cols { display: grid; gap: 2.25rem; }

.mgroup__title {
  display: inline-block; margin-bottom: .4rem; padding: .2rem .5rem .1rem;
  background: var(--cyan); color: var(--ink);
  text-transform: uppercase; font-weight: 900; font-stretch: 72%; font-size: 1.3rem; line-height: 1.1;
}
.mgroup:nth-child(2n) .mgroup__title { background: var(--pink); }
.mgroup:nth-child(3n) .mgroup__title { background: var(--yellow); }
.mgroup__sub { margin: 1rem 0 .5rem; color: var(--mute); text-transform: uppercase; font-weight: 800; font-stretch: 80%; letter-spacing: .04em; font-size: .9rem; }
.mgroup__note { margin-top: .6rem; color: var(--mute); font-size: .92rem; }
.mgroup__note--top { margin: .2rem 0 .4rem; }
.mgroup__note [lang="ko"] { font-family: var(--ko); color: var(--pink); }

.mlist { list-style: none; margin: 0; padding: 0; }
.mi { padding: .8rem 0 .85rem; border-bottom: 1px solid rgba(255,243,230,.16); }
.mlist--tight .mi { padding: .55rem 0 .6rem; }
.mlist--short .mi { padding: .45rem 0; }
.mi__row { display: flex; align-items: baseline; gap: .5rem; }
.mi__name { text-transform: uppercase; font-weight: 900; font-stretch: 72%; font-size: clamp(1.3rem, 5.2vw, 1.7rem); line-height: 1.05; }
.mlist--tight .mi__name, .mlist--short .mi__name { font-size: clamp(1.15rem, 4.6vw, 1.4rem); }
.mi__row::after { content: ""; order: 1; flex: 1; min-width: 1rem; border-bottom: 2px dotted rgba(255,243,230,.25); transform: translateY(-.25em); }
.mi__price { order: 2; font-weight: 800; color: var(--amber); font-variant-numeric: tabular-nums; font-size: 1.1rem; white-space: nowrap; }
.mi__desc { color: var(--mute); font-size: .95rem; line-height: 1.4; margin-top: .2rem; max-width: 46ch; }
.mlist--tight .mi__desc { font-size: .9rem; margin-top: .1rem; }

.mi__opts { list-style: none; margin: .55rem 0 0; padding: 0; display: grid; gap: .3rem; }
.mi__opts li { display: flex; align-items: baseline; gap: .5rem; padding-left: .9rem; border-left: 3px solid var(--orange); font-weight: 700; text-transform: uppercase; font-stretch: 80%; letter-spacing: .02em; }
.mi__opts li::after { content: ""; order: 1; flex: 1; border-bottom: 2px dotted rgba(255,243,230,.2); transform: translateY(-.25em); }
.mi__opts li span:last-child { order: 2; color: var(--amber); font-weight: 800; font-variant-numeric: tabular-nums; }
.mi__opts--big li { font-size: 1.35rem; font-weight: 900; font-stretch: 72%; padding: .35rem 0 .35rem .9rem; }

.mtags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .45rem; }
.mtags li { border: 2px solid var(--pink); color: var(--paper); padding: .35rem .6rem .25rem; text-transform: uppercase; font-weight: 800; font-stretch: 80%; font-size: .95rem; }

.mi__al { order: 0; align-self: flex-start; font-size: .68rem; font-weight: 700; letter-spacing: .04em; color: var(--mute); text-transform: none; font-stretch: 100%; white-space: nowrap; }
.mi__opts .mi__al, .mtags .mi__al, .mgroup__title .mi__al { margin-left: .35rem; vertical-align: .35em; }
.mgroup__title .mi__al { color: inherit; opacity: .7; }
.mi__opts li span.mi__al { color: var(--mute); font-weight: 700; }

.menu__drinks { margin: .5rem 0 1.5rem; display: flex; flex-wrap: wrap; gap: .75rem; }
.menu__drinks .btn { gap: .55rem; }
.menu__drinks [lang="ko"] { font-family: var(--ko); font-weight: 400; }
.menu__drinks small { font-size: .75em; opacity: .75; }
.menu__legend { border-top: 1px solid rgba(255,243,230,.2); border-bottom: 1px solid rgba(255,243,230,.2); padding: .8rem 0; margin-bottom: 1rem; color: var(--mute); font-size: .88rem; }
.menu__legend summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; color: var(--paper); text-transform: uppercase; font-weight: 800; font-stretch: 80%; letter-spacing: .04em; }
.menu__legend summary:focus-visible { outline: 3px solid var(--cyan); outline-offset: 2px; }
.legend { display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: .3rem 1.5rem; margin: .6rem 0 .9rem; }
.legend div { display: flex; gap: .5rem; }
.legend dt { min-width: 1.6rem; color: var(--amber); font-weight: 800; }
.legend dd { margin: 0; }

.menu__foot { color: var(--mute); font-size: .85rem; margin-top: 1rem; }
.menu .sticker-box { max-width: 26rem; }

@media (min-width: 760px) {
  .mcat__cols { grid-template-columns: 1fr 1fr; column-gap: 3.5rem; row-gap: 2.75rem; }
  .mlist--two { display: grid; grid-template-columns: 1fr 1fr; column-gap: 3.5rem; }
  .mtabs { position: static; margin: 0 0 2.5rem; padding: 0; border: 0; flex-wrap: wrap; overflow: visible; }
  .mtab { font-size: 1.3rem; padding: .7rem 1rem .6rem; }
}