/* =========================================================
   Harry Bär · Salzburg
   Identity: a late-night edition of an editorial chapter book.
   Near-black + cream (reference attitude, inverted for the night),
   bar-wall red from the menu logo and beer coasters,
   UV-violet neon from the bar light, beer amber as a whisper.
   Display: Caprasimo (soft, round, teddy-bear warm 70s pub serif)
   Text:    Courier Prime (typewritten menu card)
   Accent:  Mr Dafoe (neon-sign handwriting)
   ========================================================= */
:root {
  --ink: #0e0c0b;
  --ink-2: #161311;
  --ink-3: #221c19;
  --cream: #f7efdc;
  --cream-2: #cbbfa8;
  --cream-3: #8f8574;
  --red: #d8261c;
  --red-deep: #9e1711;
  --uv: #b48cff;
  --uv-2: #7a45ff;
  --amber: #f0a830;
  --line: rgba(247, 239, 220, .16);

  --f-display: "Caprasimo", "Cooper Black", Georgia, serif;
  --f-text: "Courier Prime", "Courier New", ui-monospace, monospace;
  --f-neon: "Mr Dafoe", "Brush Script MT", cursive;

  --pad: clamp(1.1rem, 4.2vw, 4.5rem);
  --ease: cubic-bezier(.16, 1, .3, 1);
  --glow: 0 0 .06em rgba(255, 255, 255, .55), 0 0 .28em rgba(180, 140, 255, .95), 0 0 .8em rgba(122, 69, 255, .75), 0 0 1.6em rgba(122, 69, 255, .45);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--ink);
  color: var(--cream);
  font-family: var(--f-text);
  font-size: clamp(1rem, .95rem + .2vw, 1.12rem);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
/* film grain over the night */
body::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 90; opacity: .07; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, p, figure, blockquote, ol, ul { margin: 0; }
ul, ol { padding: 0; list-style: none; }
::selection { background: var(--red); color: var(--cream); }
:focus-visible { outline: 2px dashed var(--uv); outline-offset: 4px; border-radius: 2px; }

.skip { position: fixed; left: 1rem; top: -4rem; z-index: 200; background: var(--cream); color: var(--ink); padding: .6rem 1rem; text-decoration: none; }
.skip:focus { top: 1rem; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.neon {
  font-family: var(--f-neon);
  font-weight: 400;
  color: #efe4ff;
  text-shadow: var(--glow);
  letter-spacing: .01em;
  line-height: 1.1;
}

/* ---------- intro ---------- */
.intro { display: none; }
.js .intro {
  position: fixed; inset: 0; z-index: 150; background: var(--ink);
  display: grid; place-items: center; align-content: center; gap: 1.4rem;
  clip-path: inset(0 0 0 0);
}
.intro__neon {
  font-family: var(--f-neon); font-size: clamp(4.5rem, 14vw, 11rem); line-height: 1;
  color: #efe4ff; text-shadow: var(--glow); opacity: 0;
}
.intro__meta { display: flex; gap: 2.5rem; font-size: .8rem; letter-spacing: .14em; text-transform: lowercase; color: var(--cream-3); opacity: 0; }

/* ---------- cursor ---------- */
.cursor { display: none; }
@media (hover: hover) and (pointer: fine) {
  .js .cursor { display: block; position: fixed; left: 0; top: 0; z-index: 140; pointer-events: none; }
  .cursor__dot {
    position: absolute; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%;
    background: var(--uv); box-shadow: 0 0 14px 4px rgba(122, 69, 255, .7); transition: transform .4s var(--ease), opacity .3s;
  }
  .cursor__lbl {
    position: absolute; transform: translate(-50%, -50%) scale(.4); opacity: 0; white-space: nowrap;
    font-family: var(--f-neon); font-size: 2.2rem; color: #efe4ff; text-shadow: var(--glow); transition: transform .45s var(--ease), opacity .3s;
  }
  .cursor.is-img .cursor__dot { transform: scale(5.5); opacity: .22; }
  .cursor.is-img .cursor__lbl { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  .cursor.is-link .cursor__dot { transform: scale(2.4); opacity: .55; }
}

/* ---------- header ---------- */
.head {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem;
  padding: 1rem var(--pad);
  font-size: .82rem; letter-spacing: .08em; text-transform: lowercase;
  background: linear-gradient(var(--ink) 0%, rgba(14, 12, 11, .82) 60%, rgba(14, 12, 11, 0));
}
.head__logo { display: inline-flex; align-items: center; gap: .65rem; text-decoration: none; font-weight: 700; letter-spacing: .12em; justify-self: start; }
.head__bear { width: 34px; height: 34px; fill: var(--red); }
.head__bear text { text-transform: none; fill: var(--cream); font-family: var(--f-display); font-size: 15px; }
.head__nav { display: flex; gap: clamp(1rem, 2.4vw, 2.6rem); }
.head__nav a, .head__call { text-decoration: none; position: relative; padding: .2rem 0; }
.head__nav i { font-style: normal; color: var(--cream-3); margin-right: .2rem; }
.head__nav a::after, .head__call::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: var(--red);
  transform: scaleX(0); transform-origin: right; transition: transform .5s var(--ease);
}
.head__nav a:hover::after, .head__call:hover::after { transform: scaleX(1); transform-origin: left; }
.head__right { display: flex; gap: 1.6rem; align-items: center; justify-self: end; }
.head__menu {
  display: inline-flex; align-items: center; gap: .6rem; cursor: pointer;
  background: none; border: 1px solid var(--line); color: var(--cream); border-radius: 99px;
  padding: .45rem .95rem; font: inherit; letter-spacing: inherit; text-transform: inherit;
  transition: border-color .3s, background .3s;
}
.head__menu:hover { border-color: var(--cream); }
.menu-open .head { background: transparent; }
.head__burger { width: 16px; height: 8px; position: relative; }
.head__burger::before, .head__burger::after { content: ""; position: absolute; left: 0; right: 0; height: 1.5px; background: currentColor; transition: transform .5s var(--ease), top .5s var(--ease); }
.head__burger::before { top: 0; }
.head__burger::after { top: 6.5px; }
.menu-open .head__burger::before { top: 3.25px; transform: rotate(45deg); }
.menu-open .head__burger::after { top: 3.25px; transform: rotate(-45deg); }

/* ---------- overlay menu ---------- */
.overlay {
  position: fixed; inset: 0; z-index: 95; background: var(--red);
  display: grid; grid-template-columns: 1.4fr 1fr; align-items: end; gap: 2rem;
  padding: 7rem var(--pad) 3rem;
  visibility: hidden; clip-path: inset(0 0 100% 0);
}
.overlay__nav { display: grid; gap: .1rem; }
.overlay__nav a {
  display: flex; align-items: baseline; gap: 1.2rem; text-decoration: none; color: var(--cream);
  font-family: var(--f-display); font-size: clamp(2.6rem, 7.2vw, 6.4rem); line-height: 1.02;
}
.overlay__nav i { font-style: normal; font-family: var(--f-text); font-size: .9rem; width: 2.4rem; opacity: .7; }
.overlay__nav a span { transition: transform .5s var(--ease), color .3s; display: inline-block; }
.overlay__nav a:hover span { transform: translateX(.4em) skewX(-6deg); color: var(--ink); }
.overlay__info { display: grid; gap: 1rem; font-size: .95rem; color: var(--cream); }
.overlay__info .neon { font-size: 3rem; }
.overlay__info a { text-decoration: none; border-bottom: 1px solid currentColor; }

/* ---------- hero ---------- */
.hero {
  position: relative; min-height: 100svh;
  padding: 6.4rem var(--pad) 0;
  display: flex; flex-direction: column; align-items: center;
  background:
    radial-gradient(60% 45% at 50% 82%, rgba(122, 69, 255, .22), transparent 70%),
    radial-gradient(40% 30% at 12% 20%, rgba(216, 38, 28, .12), transparent 70%),
    var(--ink);
  overflow: hidden;
}
.hero__kicker { font-size: .78rem; letter-spacing: .2em; text-transform: uppercase; color: var(--cream-2); text-align: center; }
.hero__kicker b { color: var(--red); font-weight: 400; margin: 0 .4em; }
.hero__row { width: 100%; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem; margin-top: clamp(.8rem, 2.4vh, 2rem); }
.hero__side { font-size: .82rem; letter-spacing: .12em; text-transform: lowercase; color: var(--cream-2); }
.hero__side--r { text-align: right; }
.hero__side sup, .hero__foot sup { color: var(--red); }
.hero__title {
  font-family: var(--f-display); font-weight: 400;
  font-size: clamp(4rem, 12.6vw, 14.5rem); line-height: .86; letter-spacing: -.012em;
  text-transform: uppercase; text-align: center; white-space: nowrap;
  color: var(--cream);
}
.hero__line { display: inline-block; }
.hero__title .mask { display: inline-block; overflow: hidden; padding: .04em .02em .1em; margin: -.04em -.02em -.1em; vertical-align: top; }
.hero__title .ch { display: inline-block; will-change: transform; }
.hero__note { font-size: clamp(1.9rem, 3.4vw, 3.2rem); margin-top: .2rem; transform: rotate(-4deg); }
.hero__foot { position: absolute; left: var(--pad); bottom: 1.4rem; font-size: .74rem; color: var(--cream-3); letter-spacing: .06em; z-index: 3; }

.hero__stack { position: relative; width: min(100%, 1180px); flex: 1; min-height: 44vh; margin-top: 1rem; }
.card { position: absolute; overflow: hidden; border-radius: 3px; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .8), 0 0 0 1px rgba(247, 239, 220, .06); }
.card img { width: 100%; height: 100%; object-fit: cover; }
.card--a { width: clamp(150px, 19vw, 280px); aspect-ratio: 3 / 4; left: 8%; top: 12%; transform: rotate(-9deg); z-index: 1; }
.card--b { width: clamp(190px, 25vw, 360px); aspect-ratio: 3 / 4; left: 50%; top: 2%; margin-left: calc(clamp(190px, 25vw, 360px) / -2); transform: rotate(2.5deg); z-index: 2; }
.card--b img { object-position: 50% 80%; }
.card--c { width: clamp(150px, 19vw, 280px); aspect-ratio: 3 / 4; right: 8%; top: 16%; transform: rotate(8deg); z-index: 1; }
.coaster {
  position: absolute; z-index: 4; right: 22%; top: -6%; width: clamp(108px, 11vw, 168px); aspect-ratio: 1;
  display: grid; place-items: center; text-decoration: none; color: var(--cream); transform: rotate(-12deg);
}
.coaster svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.coaster__bg { fill: var(--red); filter: drop-shadow(0 14px 22px rgba(0, 0, 0, .55)); }
.coaster__rim { fill: none; stroke: rgba(247, 239, 220, .55); stroke-width: 1.4; stroke-dasharray: 2 4; }
.coaster text { fill: var(--cream); font-family: var(--f-text); font-size: 12.5px; letter-spacing: 1.6px; text-transform: uppercase; font-weight: 700; }
.coaster__spin { transform-origin: 100px 100px; animation: spin 22s linear infinite; }
.coaster__big { position: relative; font-family: var(--f-display); font-size: clamp(1.7rem, 2.4vw, 2.5rem); line-height: 1; }
.coaster__big small { font-size: .5em; vertical-align: super; margin-left: .05em; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- marquee ---------- */
.marquee-wrap { position: relative; z-index: 2; overflow: hidden; margin-top: -2.6rem; padding: 1.4rem 0; }
.marquee { position: relative; background: var(--red); color: var(--cream); overflow: hidden; transform: rotate(-1.6deg); margin: 0 -2vw; padding: 1.1rem 0 1rem; border-block: 1px solid rgba(0, 0, 0, .25); }
.marquee__track { display: flex; align-items: center; width: max-content; gap: 2.2rem; }
.marquee span { font-family: var(--f-display); font-size: clamp(2rem, 4.6vw, 4.4rem); line-height: 1; white-space: nowrap; text-transform: uppercase; }
.marquee i { width: .9em; height: .9em; font-size: clamp(1.4rem, 2.6vw, 2.4rem); flex: none; border-radius: 50%; background: var(--ink); position: relative; }
.marquee i::before, .marquee i::after { content: ""; position: absolute; top: -.18em; width: .42em; height: .42em; border-radius: 50%; background: var(--ink); }
.marquee i::before { left: -.08em; }
.marquee i::after { right: -.08em; }

/* ---------- chapters ---------- */
.chapter { position: relative; overflow-x: clip; padding: clamp(6rem, 16vh, 11rem) var(--pad) clamp(4rem, 10vh, 7rem); }
.chapter__head { display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; border-bottom: 1px solid var(--line); padding-bottom: 1rem; margin-bottom: clamp(2rem, 5vh, 3.5rem); }
.chapter__label { font-size: .8rem; letter-spacing: .2em; text-transform: uppercase; color: var(--cream-2); }
.chapter__no { justify-self: end; font-size: .8rem; letter-spacing: .14em; color: var(--cream-3); }
.chapter__num {
  font-family: var(--f-display); font-size: clamp(5rem, 12vw, 11rem); line-height: .8;
  color: transparent; -webkit-text-stroke: 1.5px var(--cream); paint-order: stroke;
}
.chapter__title {
  font-family: var(--f-display); font-weight: 400; text-transform: uppercase;
  font-size: clamp(3.1rem, 10.6vw, 12rem); line-height: .9; letter-spacing: -.012em;
}
.chapter__title .line-mask { padding-bottom: .08em; margin-bottom: -.08em; }
.chapter__note { font-size: clamp(1.7rem, 3vw, 2.8rem); margin: 1rem 0 0 clamp(0rem, 8vw, 9rem); transform: rotate(-3deg); transform-origin: left center; display: inline-block; }

/* I — wirt */
.wirt { display: grid; grid-template-columns: repeat(12, 1fr); gap: 2rem clamp(1rem, 2vw, 2rem); margin-top: clamp(3rem, 8vh, 6rem); align-items: start; }
.wirt__text { grid-column: 1 / span 5; display: grid; gap: 1.4rem; padding-top: 2rem; }
.wirt__text p:first-child { font-size: 1.12em; color: var(--cream); }
.wirt__text p + p { color: var(--cream-2); }
.w { display: inline-block; overflow: hidden; padding: .06em .03em .12em; margin: -.06em -.03em -.12em; vertical-align: top; }
.ch { display: inline-block; }
.tilt { position: relative; }
.tilt__frame { overflow: hidden; border-radius: 3px; box-shadow: 0 40px 70px -30px rgba(0, 0, 0, .9); }
.tilt__frame img { width: 100%; height: 118%; object-fit: cover; }
.tilt figcaption { position: absolute; font-size: clamp(1.7rem, 2.6vw, 2.5rem); white-space: nowrap; }
.tilt--wirt { grid-column: 7 / span 5; transform: rotate(3deg); }
.tilt--wirt .tilt__frame { aspect-ratio: 4 / 5; }
.tilt--wirt figcaption { left: -12%; bottom: 8%; transform: rotate(-8deg); }
.pull { grid-column: 2 / span 6; margin-top: -2rem; position: relative; z-index: 2; }
.pull p { font-family: var(--f-display); font-size: clamp(1.7rem, 3.1vw, 3rem); line-height: 1.12; color: var(--cream); }
.pull cite { display: block; margin-top: 1rem; font-style: normal; font-size: .78rem; letter-spacing: .18em; text-transform: uppercase; color: var(--red); }

/* II — abende */
.chapter--abende { background: linear-gradient(180deg, var(--ink) 0%, var(--ink-2) 100%); }
.abende { display: grid; grid-template-columns: repeat(12, 1fr); gap: 2rem; margin-top: clamp(3rem, 8vh, 5rem); align-items: start; }
.abende__intro { grid-column: 1 / span 5; color: var(--cream-2); }
.rows { grid-column: 1 / span 7; counter-reset: r; border-top: 1px solid var(--line); }
.row { display: grid; grid-template-columns: 3.2rem minmax(0, 15rem) 1fr; gap: 1rem; align-items: baseline; padding: 1.4rem 0; border-bottom: 1px solid var(--line); transition: background .4s; }
.row__n { font-size: .78rem; color: var(--red); letter-spacing: .1em; }
.row h3 { font-family: var(--f-display); font-weight: 400; font-size: clamp(1.6rem, 2.6vw, 2.5rem); line-height: 1.05; transition: transform .5s var(--ease), color .3s; }
.row p { color: var(--cream-2); font-size: .95rem; }
.row:hover h3 { transform: translateX(.3em); color: var(--uv); }
.tilt--bear { grid-column: 9 / span 4; grid-row: 1 / span 2; transform: rotate(-4deg); margin-top: -2rem; position: sticky; top: 18vh; }
.tilt--bear .tilt__frame { aspect-ratio: 3 / 4; }
.tilt--bear figcaption { right: -4%; bottom: -1.6rem; transform: rotate(-6deg); }

/* III — drinks */
.drinks { display: grid; grid-template-columns: 1fr minmax(0, 40rem) 1fr; gap: clamp(1rem, 3vw, 3rem); align-items: center; margin-top: clamp(3rem, 8vh, 5rem); }
.tilt--gin { transform: rotate(-7deg) translateY(-3rem); }
.tilt--beer { transform: rotate(6deg) translateY(4rem); }
.tilt--gin .tilt__frame, .tilt--beer .tilt__frame { aspect-ratio: 3 / 4; }
.menu-card {
  background: var(--cream); color: var(--ink); padding: clamp(1.6rem, 3.4vw, 3rem); border-radius: 3px; transform: rotate(-1.2deg);
  box-shadow: 0 50px 90px -30px rgba(0, 0, 0, .9), inset 0 0 0 10px var(--cream), inset 0 0 0 11px rgba(14, 12, 11, .35);
  position: relative;
}
.menu-card::before { content: ""; position: absolute; top: -14px; left: 50%; width: 90px; height: 28px; margin-left: -45px; background: rgba(247, 239, 220, .55); transform: rotate(-3deg); backdrop-filter: blur(2px); }
.menu-card__head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; border-bottom: 2px solid var(--ink); padding-bottom: .8rem; margin-bottom: 1rem; }
.menu-card__head span:first-child { font-family: var(--f-display); font-size: clamp(1.6rem, 2.6vw, 2.3rem); color: var(--red); }
.menu-card__head span:last-child { font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; }
.menu-card__list li { display: flex; align-items: baseline; gap: .6rem; padding: .42rem 0; font-size: clamp(.92rem, 1.1vw, 1.04rem); }
.menu-card__list b { font-weight: 700; }
.menu-card__list i { flex: 1; min-width: 1.5rem; border-bottom: 2px dotted rgba(14, 12, 11, .4); transform: translateY(-.25em); }
.menu-card__list span { font-style: italic; color: #5d5246; text-align: right; }
.menu-card__foot { margin-top: 1rem; padding-top: .8rem; border-top: 1px solid rgba(14, 12, 11, .25); font-size: .8rem; letter-spacing: .06em; color: #5d5246; }

/* gallery */
.gallery { position: relative; background: var(--ink-2); }
.gallery__pin { display: flex; align-items: center; gap: clamp(2rem, 5vw, 5rem); min-height: 100vh; padding: 6rem var(--pad); overflow: hidden; }
.gallery__intro { flex: none; width: clamp(15rem, 24vw, 22rem); }
.gallery__big { font-family: var(--f-display); font-size: clamp(2.6rem, 4.8vw, 4.6rem); line-height: .95; text-transform: uppercase; margin: 1rem 0; }
.gallery__intro .neon { font-size: 2.4rem; }
.gallery__track { display: flex; gap: clamp(1.6rem, 3vw, 3.4rem); align-items: center; flex: none; padding-right: var(--pad); }
.gcard { flex: none; width: clamp(220px, 23vw, 340px); position: relative; }
.gcard:nth-child(odd) { transform: rotate(-3.5deg) translateY(-1.5rem); }
.gcard:nth-child(even) { transform: rotate(3deg) translateY(2rem); }
.gcard__frame { overflow: hidden; aspect-ratio: 3 / 4; border-radius: 3px; box-shadow: 0 30px 60px -24px rgba(0, 0, 0, .9); }
.gcard__frame img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.gcard:hover .gcard__frame img { transform: scale(1.06); }
.gcard figcaption { margin-top: .9rem; font-size: 2rem; text-align: center; }

/* IV — du */
.du { display: grid; grid-template-columns: repeat(12, 1fr); gap: 2rem; margin-top: clamp(3rem, 8vh, 5rem); }
.du__score { grid-column: 1 / span 4; align-self: start; position: sticky; top: 18vh; }
.du__num { font-family: var(--f-display); font-size: clamp(6rem, 15vw, 14rem); line-height: .8; color: var(--red); }
.du__stars { font-size: 1.5rem; letter-spacing: .3em; color: var(--amber); margin-top: 1rem; }
.du__count { color: var(--cream-2); font-size: .9rem; letter-spacing: .08em; }
.quotes { grid-column: 6 / span 7; display: grid; gap: clamp(1.4rem, 3vw, 2.6rem); }
.quote { border-top: 1px solid var(--line); padding-top: 1.4rem; }
.quote:nth-child(2) { margin-left: clamp(0rem, 6vw, 6rem); }
.quote:nth-child(4) { margin-left: clamp(0rem, 3vw, 3rem); }
.quote p { font-family: var(--f-display); font-size: clamp(1.4rem, 2.3vw, 2.2rem); line-height: 1.18; }
.quote cite { display: block; margin-top: .8rem; font-style: normal; font-size: .76rem; letter-spacing: .18em; text-transform: uppercase; color: var(--cream-3); }

/* ---------- visit ---------- */
.visit { overflow-x: clip; padding: clamp(6rem, 16vh, 10rem) var(--pad); background: var(--cream); color: var(--ink); position: relative; }
.visit .chapter__label { color: var(--red); }
.visit__title { font-family: var(--f-display); font-weight: 400; text-transform: uppercase; font-size: clamp(3.2rem, 11vw, 12rem); line-height: .9; margin-top: .6rem; }
.visit__status { margin-top: 1rem; font-weight: 700; display: inline-flex; align-items: center; gap: .6rem; }
.visit__status::before { content: ""; width: .7rem; height: .7rem; border-radius: 50%; background: var(--cream-3); }
.visit__status.is-open::before { background: #2bb35a; box-shadow: 0 0 0 4px rgba(43, 179, 90, .2); }
.visit__grid { display: grid; grid-template-columns: 1.05fr 1fr 1fr; gap: clamp(2rem, 4vw, 4rem); margin-top: clamp(3rem, 7vh, 5rem); align-items: start; }
.visit__h { font-family: var(--f-display); font-weight: 400; font-size: 1.6rem; margin-bottom: 1rem; line-height: 1.1; }
.visit table { width: 100%; border-collapse: collapse; }
.visit th, .visit td { text-align: left; padding: .55rem 0; border-bottom: 1px solid rgba(14, 12, 11, .14); font-weight: 400; }
.visit td { text-align: right; }
.visit tr.is-today th, .visit tr.is-today td { font-weight: 700; color: var(--red); }
.visit tr.is-today th::after { content: " · heute"; font-weight: 400; }
.visit__coaster { display: grid; justify-items: center; gap: 1rem; text-align: center; }
.visit__coaster svg { width: min(100%, 300px); height: auto; overflow: visible; }
.vc__bg { fill: var(--red); }
.vc__rim { fill: none; stroke: rgba(247, 239, 220, .6); stroke-width: 1.5; stroke-dasharray: 3 5; }
.vc__rim--in { stroke-dasharray: none; stroke: rgba(247, 239, 220, .35); }
.visit__coaster text { fill: var(--cream); font-family: var(--f-text); font-weight: 700; font-size: 15.5px; letter-spacing: 2.4px; }
.vc__spin { transform-origin: 150px 150px; animation: spin 30s linear infinite; }
.visit__coaster .vc__num { font-family: var(--f-display); font-weight: 400; font-size: 64px; letter-spacing: 0; }
.visit address { font-style: normal; font-size: 1.05rem; }
.visit__cta { display: grid; gap: .8rem; justify-items: start; }
.visit__cta > p { margin-bottom: .4rem; }
.visit__small { font-size: .8rem; color: #5d5246; margin-top: .6rem; }

.btn {
  --bg: var(--ink); --fg: var(--cream);
  display: inline-flex; align-items: center; justify-content: center; min-height: 3.2rem; padding: .8rem 1.5rem;
  background: var(--bg); color: var(--fg); text-decoration: none; border-radius: 99px; font-weight: 700; letter-spacing: .04em;
  border: 1.5px solid var(--ink); position: relative; overflow: hidden; isolation: isolate; will-change: transform;
}
.btn::before { content: ""; position: absolute; inset: 0; background: var(--red); border-radius: inherit; transform: translateY(101%); transition: transform .55s var(--ease); z-index: -1; }
.btn:hover::before { transform: translateY(0); }
.btn:hover { border-color: var(--red); color: var(--cream); }
.btn span { display: inline-block; }
.btn--uv { --bg: var(--uv-2); border-color: var(--uv-2); }
.btn--ghost { --bg: transparent; --fg: var(--ink); }

/* ---------- footer ---------- */
.foot { background: var(--ink); padding: clamp(3rem, 8vh, 6rem) var(--pad) 2rem; overflow: hidden; }
.foot__word { font-family: var(--f-display); text-transform: uppercase; font-size: clamp(3.4rem, 13vw, 15rem); line-height: .82; white-space: nowrap; color: var(--red); text-align: center; letter-spacing: -.015em; }
.foot__row { display: flex; justify-content: space-between; gap: 2rem; margin-top: 2.4rem; padding-top: 1.4rem; border-top: 1px solid var(--line); font-size: .8rem; color: var(--cream-2); }
.foot__row a { color: var(--cream); }
.foot__credit { max-width: 40rem; text-align: right; }

/* ---------- reveal pre-states (only when JS runs) ---------- */
.js .hero__title, .js .hero__kicker, .js .hero__side, .js .hero__note, .js .hero__foot, .js .card, .js .coaster { visibility: hidden; }
.js .head { opacity: 0; }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .head__nav { display: none; }
  .head { grid-template-columns: 1fr auto; }
}
@media (max-width: 900px) {
  .wirt__text { grid-column: 1 / -1; }
  .tilt--wirt { grid-column: 2 / span 10; }
  .pull { grid-column: 1 / -1; margin-top: 1rem; }
  .abende__intro, .rows { grid-column: 1 / -1; }
  .tilt--bear { grid-column: 3 / span 8; grid-row: auto; position: relative; top: 0; margin-top: 1rem; }
  .drinks { grid-template-columns: 1fr 1fr; }
  .menu-card { grid-column: 1 / -1; order: -1; }
  .tilt--gin { transform: rotate(-6deg); }
  .tilt--beer { transform: rotate(5deg) translateY(2rem); }
  .du__score { grid-column: 1 / -1; position: relative; top: 0; }
  .quotes { grid-column: 1 / -1; }
  .visit__grid { grid-template-columns: 1fr; }
  .visit__coaster { order: -1; }
  .overlay { grid-template-columns: 1fr; align-content: end; }
  .foot__row { flex-direction: column; }
  .foot__credit { text-align: left; }
  .gallery__pin { flex-direction: column; align-items: flex-start; min-height: 0; padding: 5rem 0; }
  .gallery__intro { width: auto; padding: 0 var(--pad); }
  .gallery__track { width: 100%; overflow-x: auto; scroll-snap-type: x mandatory; padding: 2.4rem var(--pad) 1rem; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .gallery__track::-webkit-scrollbar { display: none; }
  .gcard { scroll-snap-align: center; width: 64vw; }
}
@media (max-width: 700px) {
  .head__call { display: none; }
  .hero { padding-top: 5.4rem; padding-bottom: 3.4rem; min-height: 0; }
  .hero__kicker { font-size: .66rem; letter-spacing: .14em; }
  .hero__row { grid-template-columns: 1fr 1fr; }
  .hero__title { grid-column: 1 / -1; grid-row: 1; font-size: 22.5vw; line-height: .84; }
  .hero__title .hero__line { display: block; }
  .hero__side { grid-row: 2; font-size: .72rem; }
  .hero__note { font-size: 1.9rem; }
  .hero__stack { flex: none; min-height: 80vw; margin-top: 1.2rem; }
  .card--a { left: 0; top: 18%; width: 34vw; }
  .card--b { width: 44vw; margin-left: -22vw; top: 6%; }
  .card--c { right: 0; top: 22%; width: 34vw; }
  .coaster { right: 1%; top: auto; bottom: -8%; width: 96px; }
  .hero__foot { display: none; }
  .chapter__head { grid-template-columns: 1fr auto; }
  .chapter__no { display: none; }
  .chapter__num { font-size: 4.6rem; }
  .chapter__title { font-size: 13.4vw; }
  .chapter__note { font-size: 1.7rem; margin-left: 0; }
  .row { grid-template-columns: 2.2rem 1fr; }
  .row p { grid-column: 2; }
  .tilt--wirt figcaption { left: 0; bottom: -2.2rem; }
  .drinks { gap: 1rem; }
  .menu-card__list li { flex-wrap: wrap; }
  .menu-card__list span { flex-basis: 100%; text-align: left; font-size: .86rem; margin-top: -.1rem; }
  .menu-card__list i { display: none; }
  .quote:nth-child(n) { margin-left: 0; }
  .visit__title { font-size: 15vw; }
  .btn { width: 100%; }
  .visit__cta { justify-items: stretch; }
  .overlay__nav a { font-size: 11vw; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .intro, .cursor { display: none !important; }
}