/* ==========================================================================
   Stadtkrug Hallein — Fam. Frank
   Design system. Deep forest green + seal gold + paprika (the Hungarian half),
   on warm cream paper. Editorial serif display, humanist sans for everything
   that has a job to do.
   ========================================================================== */

:root{
  /* Ink — pulled from the Hallein crest in the client wordmark */
  --ink:        #16241e;
  --ink-2:      #2f4038;
  --ink-3:      #5b6d63;

  /* Paper */
  --paper:      #fbf7ef;
  --paper-2:    #f4ecdd;
  --paper-3:    #ece1cd;

  /* Accents — gold from the brass seal, paprika from the Hungarian kitchen */
  --gold:       #a8842b;
  --gold-lt:    #c9a94e;
  --gold-glow:  rgba(168,132,43,.14);
  --paprika:    #9e3620;

  --line:       rgba(22,36,30,.13);
  --line-strong:rgba(22,36,30,.26);
  --line-light: rgba(251,247,239,.22);

  --shadow-sm:  0 1px 2px rgba(22,36,30,.06), 0 4px 14px rgba(22,36,30,.05);
  --shadow-md:  0 2px 6px rgba(22,36,30,.07), 0 18px 44px rgba(22,36,30,.10);
  --shadow-lg:  0 4px 12px rgba(22,36,30,.09), 0 34px 80px rgba(22,36,30,.16);

  --display: "Newsreader", "Iowan Old Style", Georgia, serif;
  --sans:    "Karla", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Header heights, shared so sticky sub-navs can sit flush under it. */
  --head-h: 5.25rem;
  --head-h-stuck: 4.35rem;

  --wrap: 1180px;
  --gut:  clamp(1.25rem, 5vw, 4rem);
  --r:    3px;                 /* restrained radius — this is a Wirtshaus, not a startup */

  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------- reset-ish ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:clamp(1rem, .96rem + .2vw, 1.075rem);
  line-height:1.68;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }
button{ font:inherit; color:inherit; }
h1,h2,h3,h4{ margin:0; font-family:var(--display); font-weight:500; line-height:1.08; letter-spacing:-.015em; }
p{ margin:0; }
ul{ margin:0; padding:0; list-style:none; }

::selection{ background:var(--gold); color:var(--paper); }

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--ink); color:var(--paper); padding:.85rem 1.4rem; border-radius:0 0 var(--r) 0;
}
.skip-link:focus{ left:0; }

:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; border-radius:2px; }

/* ---------- language switching ---------- */
.lang{ display:none; }
html[data-lang="de"] .lang-de,
html[data-lang="en"] .lang-en,
html[data-lang="hu"] .lang-hu{ display:inline; }
/* block-level variants keep their layout role */
html[data-lang="de"] p.lang-de, html[data-lang="en"] p.lang-en, html[data-lang="hu"] p.lang-hu,
html[data-lang="de"] div.lang-de,html[data-lang="en"] div.lang-en,html[data-lang="hu"] div.lang-hu,
html[data-lang="de"] li.lang-de, html[data-lang="en"] li.lang-en, html[data-lang="hu"] li.lang-hu{ display:block; }

/* ---------- layout ---------- */
.wrap{ width:min(var(--wrap), 100% - (var(--gut) * 2)); margin-inline:auto; }
.wrap-wide{ width:min(1440px, 100% - (var(--gut) * 2)); margin-inline:auto; }
.wrap-narrow{ width:min(720px, 100% - (var(--gut) * 2)); margin-inline:auto; }

section{ position:relative; }
.pad{ padding-block:clamp(4.5rem, 9vw, 9rem); }
.pad-sm{ padding-block:clamp(3rem, 6vw, 5.5rem); }

.bg-paper-2{ background:var(--paper-2); }
.bg-ink{ background:var(--ink); color:var(--paper); }
.bg-ink h1,.bg-ink h2,.bg-ink h3{ color:var(--paper); }

/* ---------- type helpers ---------- */
.eyebrow{
  display:inline-flex; align-items:center; gap:.6rem;
  font-size:.7rem; font-weight:600; letter-spacing:.22em; text-transform:uppercase;
  color:var(--gold); margin-bottom:1.15rem;
}
.eyebrow::before{ content:""; width:1.9rem; height:1px; background:currentColor; opacity:.75; }
.eyebrow.centered{ justify-content:center; }
.eyebrow.on-dark{ color:var(--gold-lt); }

h1,.h1{ font-size:clamp(2.6rem, 1.6rem + 4.4vw, 5.1rem); }
h2,.h2{ font-size:clamp(2rem, 1.35rem + 2.7vw, 3.4rem); }
h3,.h3{ font-size:clamp(1.25rem, 1.1rem + .7vw, 1.6rem); }

.lead{
  font-size:clamp(1.1rem, 1.02rem + .42vw, 1.35rem);
  line-height:1.6; color:var(--ink-2);
}
.muted{ color:var(--ink-3); }
.serif-it{ font-family:var(--display); font-style:italic; font-weight:400; }

.measure{ max-width:62ch; }
.center{ text-align:center; }
.center .measure{ margin-inline:auto; }

/* Section intro used across pages */
.sec-head{ margin-bottom:clamp(2.5rem, 5vw, 4rem); }
.sec-head p{ margin-top:1.1rem; }

/* ---------- buttons ---------- */
.btn{
  --btn-bg:var(--ink); --btn-fg:var(--paper); --btn-bd:var(--ink);
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  padding:.95rem 1.9rem; border:1px solid var(--btn-bd); background:var(--btn-bg); color:var(--btn-fg);
  font-family:var(--sans); font-size:.83rem; font-weight:600; letter-spacing:.13em; text-transform:uppercase;
  text-decoration:none; border-radius:var(--r); cursor:pointer;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), background-color .3s var(--ease), color .3s var(--ease);
}
.btn:hover{ transform:translateY(-2px); box-shadow:var(--shadow-md); }
.btn:active{ transform:translateY(0); }
.btn-gold{ --btn-bg:var(--gold); --btn-bd:var(--gold); --btn-fg:#fff; }
.btn-ghost{ --btn-bg:transparent; --btn-fg:var(--ink); --btn-bd:var(--line-strong); }
.btn-ghost:hover{ --btn-bg:var(--ink); --btn-fg:var(--paper); --btn-bd:var(--ink); }
.btn-light{ --btn-bg:transparent; --btn-fg:var(--paper); --btn-bd:var(--line-light); }
.btn-light:hover{ --btn-bg:var(--paper); --btn-fg:var(--ink); --btn-bd:var(--paper); }
.btn-row{ display:flex; flex-wrap:wrap; gap:.85rem; }
.btn-row.centered{ justify-content:center; }

/* text link with a gold rule that draws in */
.tlink{
  display:inline-flex; align-items:center; gap:.5rem; text-decoration:none;
  font-weight:600; font-size:.83rem; letter-spacing:.13em; text-transform:uppercase;
  padding-bottom:.35rem; border-bottom:1px solid var(--line-strong);
  transition:border-color .3s var(--ease), gap .3s var(--ease), color .3s var(--ease);
}
.tlink:hover{ border-color:var(--gold); color:var(--gold); gap:.85rem; }
.tlink.on-dark{ border-color:var(--line-light); }
.tlink.on-dark:hover{ border-color:var(--gold-lt); color:var(--gold-lt); }
.tlink::after{ content:"→"; font-size:1em; }

/* ==========================================================================
   Header
   ========================================================================== */
.site-header{
  position:sticky; top:0; z-index:100;
  background:rgba(251,247,239,.82);
  backdrop-filter:saturate(150%) blur(14px);
  -webkit-backdrop-filter:saturate(150%) blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .35s var(--ease), background-color .35s var(--ease), box-shadow .35s var(--ease);
}
.site-header.is-stuck{ border-bottom-color:var(--line); box-shadow:0 1px 24px rgba(22,36,30,.06); }

.header-inner{
  width:min(1440px, 100% - (var(--gut) * 2)); margin-inline:auto;
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
  min-height:var(--head-h);
  transition:min-height .35s var(--ease);
}
.site-header.is-stuck .header-inner{ --head-h:var(--head-h-stuck); }

.wordmark{
  display:inline-flex; align-items:center; gap:.75rem;
  text-decoration:none; color:var(--ink);
  font-family:var(--display); font-size:1.32rem; font-weight:500; letter-spacing:.01em;
  white-space:nowrap;
}
.wordmark img{ width:2.5rem; height:2.5rem; object-fit:contain; transition:width .35s var(--ease), height .35s var(--ease); }
.site-header.is-stuck .wordmark img{ width:2.1rem; height:2.1rem; }
.wordmark small{
  display:block; font-family:var(--sans); font-size:.58rem; font-weight:600;
  letter-spacing:.24em; text-transform:uppercase; color:var(--gold); margin-top:.15rem;
}

.site-nav{ display:flex; align-items:center; gap:clamp(1rem,2.2vw,2.1rem); }
.site-nav a{
  position:relative; text-decoration:none; padding-block:.4rem;
  font-size:.79rem; font-weight:600; letter-spacing:.15em; text-transform:uppercase;
  color:var(--ink-2); transition:color .25s var(--ease);
}
.site-nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:var(--gold); transform:scaleX(0); transform-origin:left;
  transition:transform .35s var(--ease);
}
.site-nav a:hover{ color:var(--ink); }
.site-nav a:hover::after,
.site-nav a[aria-current="page"]::after{ transform:scaleX(1); }
.site-nav a[aria-current="page"]{ color:var(--ink); }

.header-actions{ display:flex; align-items:center; gap:.85rem; }

.lang-switch{ display:inline-flex; align-items:center; border:1px solid var(--line); border-radius:var(--r); overflow:hidden; }
.lang-switch button{
  border:0; background:transparent; cursor:pointer; padding:.45rem .6rem;
  font-size:.68rem; font-weight:700; letter-spacing:.1em; color:var(--ink-3);
  transition:background-color .25s var(--ease), color .25s var(--ease);
}
.lang-switch button + button{ border-left:1px solid var(--line); }
.lang-switch button:hover{ color:var(--ink); background:var(--paper-2); }
.lang-switch button[aria-pressed="true"]{ background:var(--ink); color:var(--paper); }

.header-actions .btn{ padding:.7rem 1.3rem; font-size:.74rem; }

.nav-toggle{
  display:none; width:2.85rem; height:2.85rem; border:1px solid var(--line);
  background:transparent; border-radius:var(--r); cursor:pointer; position:relative;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after{
  content:""; position:absolute; left:50%; width:1.15rem; height:1.5px; background:var(--ink);
  transform:translateX(-50%); transition:transform .3s var(--ease), opacity .2s var(--ease);
}
.nav-toggle span{ top:50%; margin-top:-.75px; }
.nav-toggle span::before{ top:-6px; left:0; transform:none; }
.nav-toggle span::after{ top:6px; left:0; transform:none; }
.nav-toggle[aria-expanded="true"] span{ background:transparent; }
.nav-toggle[aria-expanded="true"] span::before{ transform:translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after{ transform:translateY(-6px) rotate(-45deg); }

@media (max-width: 1040px){
  .nav-toggle{ display:block; }
  .header-actions .btn{ display:none; }
  .site-nav{
    position:fixed; inset:var(--head-h) 0 auto 0;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--paper); border-bottom:1px solid var(--line);
    padding:.5rem var(--gut) 1.75rem;
    max-height:0; overflow:hidden; opacity:0; pointer-events:none;
    transition:max-height .45s var(--ease), opacity .3s var(--ease), padding .45s var(--ease);
    box-shadow:var(--shadow-md);
  }
  .site-nav.is-open{ max-height:min(80vh, 34rem); opacity:1; pointer-events:auto; overflow-y:auto; }
  .site-nav a{ padding:1rem 0; border-bottom:1px solid var(--line); font-size:.95rem; letter-spacing:.1em; }
  .site-nav a::after{ display:none; }
  .site-nav .btn{ margin-top:1.25rem; }
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero{
  position:relative; min-height:clamp(34rem, 88vh, 54rem);
  display:flex; align-items:flex-end;
  overflow:hidden; background:var(--ink);
}
.hero-media{ position:absolute; inset:0; }
.hero-media img{ width:100%; height:100%; object-fit:cover; opacity:.92; }
.hero-media::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(10,18,14,.52) 0%, rgba(10,18,14,.12) 32%, rgba(10,18,14,.58) 72%, rgba(10,18,14,.86) 100%),
    linear-gradient(95deg, rgba(10,18,14,.55) 0%, rgba(10,18,14,0) 62%);
}
.hero-inner{ position:relative; z-index:2; width:100%; padding-block:clamp(3rem,7vw,6rem); color:var(--paper); }
.hero h1{ color:var(--paper); max-width:16ch; text-wrap:balance; }
.hero h1 em{ font-style:italic; font-weight:400; color:var(--gold-lt); }
.hero-lead{
  margin-top:1.5rem; max-width:52ch; color:rgba(251,247,239,.9);
  font-size:clamp(1.05rem, .98rem + .42vw, 1.3rem); line-height:1.6;
}
.hero .btn-row{ margin-top:2.4rem; }

/* the little open/closed pill */
.status{
  display:inline-flex; align-items:center; gap:.55rem;
  padding:.42rem .95rem; border:1px solid var(--line-light); border-radius:100px;
  font-size:.72rem; font-weight:600; letter-spacing:.11em; text-transform:uppercase;
  background:rgba(10,18,14,.32); backdrop-filter:blur(6px); color:var(--paper);
  margin-bottom:1.6rem;
}
.status .dot{ width:.5rem; height:.5rem; border-radius:50%; background:var(--ink-3); flex:none; }
.status.is-open .dot{ background:#6fbf73; box-shadow:0 0 0 3px rgba(111,191,115,.24); }
.status.is-closed .dot{ background:#c9773f; box-shadow:0 0 0 3px rgba(201,119,63,.22); }

/* scrolling marquee of credentials */
.ticker{
  overflow:hidden; border-block:1px solid var(--line);
  background:var(--paper-2); padding-block:.95rem;
}
.ticker-track{ display:flex; gap:0; width:max-content; animation:ticker 42s linear infinite; }
.ticker:hover .ticker-track{ animation-play-state:paused; }
.ticker span{
  display:inline-flex; align-items:center; gap:1.6rem; padding-inline:1.6rem;
  font-family:var(--display); font-style:italic; font-size:1.02rem; color:var(--ink-2); white-space:nowrap;
}
.ticker span::after{ content:"✦"; font-style:normal; font-size:.62rem; color:var(--gold); }
@keyframes ticker{ to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion: reduce){ .ticker-track{ animation:none; } }

/* ==========================================================================
   Welcome / greeting
   ========================================================================== */
.welcome{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:clamp(2.5rem,6vw,6rem); align-items:center; }
@media (max-width: 900px){ .welcome{ grid-template-columns:1fr; } }
.welcome .seal{ width:clamp(4.5rem,8vw,6.5rem); margin-bottom:1.75rem; }
.signature{
  margin-top:2rem; font-family:var(--display); font-style:italic;
  font-size:1.3rem; color:var(--ink-2);
}
.signature small{ display:block; font-family:var(--sans); font-style:normal; font-size:.72rem;
  letter-spacing:.18em; text-transform:uppercase; color:var(--ink-3); margin-top:.5rem; }

.frame{ position:relative; }
.frame img{ width:100%; border-radius:var(--r); box-shadow:var(--shadow-lg); }
.frame::before{
  content:""; position:absolute; inset:auto -1.1rem -1.1rem auto;
  width:62%; height:62%; border:1px solid var(--gold); border-radius:var(--r); z-index:-1;
}

/* ==========================================================================
   Two kitchens — the signature idea
   ========================================================================== */
.duo{ display:grid; grid-template-columns:1fr auto 1fr; gap:clamp(1.5rem,4vw,3.5rem); align-items:start; }
@media (max-width: 860px){ .duo{ grid-template-columns:1fr; } }
.duo-col h3{ font-size:clamp(1.5rem,1.2rem + 1.3vw, 2.2rem); margin-bottom:.9rem; }
/* Three stripes stacked top-to-bottom, so it reads as an actual flag
   (Austria red-white-red, Hungary red-white-green) rather than three dashes. */
.duo-col .flagline{
  display:flex; flex-direction:column; gap:0;
  width:2.6rem; margin-bottom:1.5rem;
  border-radius:3px; overflow:hidden;
  box-shadow:0 0 0 1px var(--line-strong), var(--shadow-sm);
}
.duo-col .flagline i{ display:block; width:100%; height:.58rem; }
.duo-at i:nth-child(1),.duo-at i:nth-child(3){ background:var(--paprika); }
.duo-at i:nth-child(2){ background:var(--paper-3); }
.duo-hu i:nth-child(1){ background:var(--paprika); }
.duo-hu i:nth-child(2){ background:var(--paper-3); }
.duo-hu i:nth-child(3){ background:#3d6b4a; }
.duo-list{ margin-top:1.4rem; }
.duo-list li{ padding:.55rem 0; border-bottom:1px solid var(--line); font-size:.97rem; }
.duo-list li:last-child{ border-bottom:0; }
.duo-rule{ width:1px; background:linear-gradient(180deg, transparent, var(--line-strong) 18%, var(--line-strong) 82%, transparent); align-self:stretch; }
@media (max-width: 860px){ .duo-rule{ width:100%; height:1px; background:var(--line-strong); } }
.duo-amp{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  background:var(--paper); padding:.5rem; font-family:var(--display); font-style:italic;
  font-size:1.6rem; color:var(--gold);
}
.duo-rule{ position:relative; }
@media (max-width: 860px){ .duo-amp{ background:var(--paper); } }

/* ==========================================================================
   Cards / rooms
   ========================================================================== */
.grid{ display:grid; gap:clamp(1.25rem,2.6vw,2rem); }
.grid-2{ grid-template-columns:repeat(auto-fit,minmax(min(100%,20rem),1fr)); }
.grid-3{ grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr)); }

.card{
  position:relative; overflow:hidden; border-radius:var(--r);
  background:var(--paper); border:1px solid var(--line);
  transition:transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s var(--ease);
  display:flex; flex-direction:column;
}
.card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:transparent; }
.card-media{ overflow:hidden; aspect-ratio:4/3; background:var(--paper-3); }
.card-media img{ width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease); }
.card:hover .card-media img{ transform:scale(1.045); }
.card-body{ padding:clamp(1.35rem,2.4vw,1.9rem); display:flex; flex-direction:column; gap:.7rem; flex:1; }
.card-body h3{ font-size:1.32rem; }
.card-meta{
  font-size:.72rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--gold);
}
.card-body .tlink{ margin-top:auto; align-self:flex-start; }

/* tall editorial room card */
.room{
  position:relative; overflow:hidden; border-radius:var(--r);
  min-height:clamp(22rem,44vw,32rem); display:flex; align-items:flex-end;
  color:var(--paper); text-decoration:none; background:var(--ink);
}
.room img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .9s var(--ease); }
.room::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(10,18,14,0) 30%, rgba(10,18,14,.72) 78%, rgba(10,18,14,.92) 100%);
}
.room:hover img{ transform:scale(1.05); }
.room-body{ position:relative; z-index:2; padding:clamp(1.5rem,3vw,2.5rem); width:100%; }
.room-body h3{ color:var(--paper); font-size:clamp(1.4rem,1.2rem + .9vw,2rem); }
.room-body p{ margin-top:.6rem; color:rgba(251,247,239,.82); font-size:.97rem; max-width:38ch; }
.room-cap{ font-size:.72rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--gold-lt); }

/* ==========================================================================
   Menu — the centrepiece
   ========================================================================== */
.menu-filters{
  display:flex; flex-wrap:wrap; gap:.5rem; justify-content:center;
  margin-bottom:clamp(2rem,4vw,3.25rem);
}
.chip{
  border:1px solid var(--line-strong); background:transparent; border-radius:100px;
  padding:.55rem 1.15rem; cursor:pointer;
  font-size:.75rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-2);
  transition:background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.chip:hover{ border-color:var(--ink); }
.chip[aria-pressed="true"]{ background:var(--ink); border-color:var(--ink); color:var(--paper); }

.menu-nav{
  /* sits flush under the condensed header — by the time this sticks, the
     header has already shrunk */
  position:sticky; top:var(--head-h-stuck); z-index:40;
  background:rgba(251,247,239,.9); backdrop-filter:blur(12px);
  border-block:1px solid var(--line); margin-bottom:clamp(2.5rem,5vw,4rem);
}
.menu-nav ul{ display:flex; gap:.35rem; overflow-x:auto; padding:.7rem 0; scrollbar-width:none; }
.menu-nav ul::-webkit-scrollbar{ display:none; }
.menu-nav a{
  white-space:nowrap; text-decoration:none; padding:.45rem .9rem; border-radius:100px;
  font-size:.74rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3);
  transition:background-color .25s var(--ease), color .25s var(--ease);
}
.menu-nav a:hover{ background:var(--paper-2); color:var(--ink); }
/* Scrollspy: the course you are currently reading gets a filled pill.
   Set by main.js on scroll. */
.menu-nav a.is-active{
  background:var(--ink); color:var(--paper);
  box-shadow:0 2px 10px rgba(22,36,30,.18);
}
.menu-nav a.is-active:hover{ background:var(--ink); color:var(--paper); }

.course{ margin-bottom:clamp(3rem,6vw,5rem); scroll-margin-top:9rem; }
.course-head{
  display:flex; align-items:baseline; gap:1.25rem; margin-bottom:1.75rem;
  padding-bottom:.9rem; border-bottom:1px solid var(--line-strong);
}
.course-head h2{ font-size:clamp(1.6rem,1.3rem + 1.2vw,2.35rem); }
.course-head .course-note{ margin-left:auto; font-size:.78rem; color:var(--ink-3); font-style:italic; text-align:right; }

.dish{
  display:grid; grid-template-columns:1fr auto; gap:.35rem 1.5rem;
  padding:1rem 0; border-bottom:1px dotted var(--line-strong);
  transition:opacity .3s var(--ease);
}
.dish:last-child{ border-bottom:0; }
.dish-name{ font-family:var(--display); font-size:1.16rem; font-weight:500; letter-spacing:-.005em; }
.dish-price{ font-family:var(--display); font-size:1.1rem; color:var(--gold); white-space:nowrap; font-variant-numeric:tabular-nums; }
.dish-desc{ grid-column:1 / -1; font-size:.92rem; color:var(--ink-3); line-height:1.55; }
.dish-desc .sep{ color:var(--gold); padding-inline:.35rem; }
.allerg{ font-size:.72rem; color:var(--ink-3); opacity:.7; letter-spacing:.04em; }
.dish-price small{ display:block; font-family:var(--sans); font-size:.66rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-3); text-align:right; margin-top:.15rem; }

.tag{
  display:inline-block; margin-left:.55rem; padding:.12rem .5rem; border-radius:100px;
  font-family:var(--sans); font-size:.6rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  vertical-align:middle; border:1px solid currentColor;
}
.tag-veg{ color:#3d6b4a; }
.tag-hu{ color:var(--paprika); }
.tag-star{ color:var(--gold); }

/* filtered-out state */
.dish[hidden]{ display:none; }
.course.is-empty{ display:none; }

.allergen-key{
  margin-top:1rem; display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,11rem),1fr));
  gap:.35rem 1.5rem; font-size:.83rem; color:var(--ink-3);
}
.allergen-key b{ color:var(--ink-2); font-weight:600; }

.menu-note{
  border:1px solid var(--line); border-left:3px solid var(--gold);
  background:var(--paper); padding:clamp(1.25rem,2.5vw,1.75rem); border-radius:var(--r);
}

/* ==========================================================================
   Hours & contact
   ========================================================================== */
.hours-row{
  display:flex; justify-content:space-between; gap:1.5rem; align-items:baseline;
  padding:.85rem 0; border-bottom:1px solid var(--line);
}
.hours-row:last-child{ border-bottom:0; }
.hours-row.is-today{ color:var(--gold); font-weight:600; }
.hours-row dt{ font-weight:500; }
.hours-row dd{ margin:0; font-variant-numeric:tabular-nums; }

.info-list li{ display:flex; gap:1rem; padding:1.1rem 0; border-bottom:1px solid var(--line); align-items:flex-start; }
.info-list li:last-child{ border-bottom:0; }
.info-list .ico{ flex:none; width:1.35rem; color:var(--gold); margin-top:.15rem; }
.info-list a{ text-decoration:none; border-bottom:1px solid var(--line-strong); }
.info-list a:hover{ border-color:var(--gold); color:var(--gold); }
.info-list dt{ font-size:.72rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3); margin-bottom:.2rem; }

.map-embed{
  border:1px solid var(--line); border-radius:var(--r); overflow:hidden;
  aspect-ratio:16/10; background:var(--paper-3);
}
.map-embed iframe{ width:100%; height:100%; border:0; display:block; filter:saturate(.82); }

/* stat / capacity blocks */
.stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,12rem),1fr)); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; }
.stat{ background:var(--paper); padding:clamp(1.5rem,3vw,2.25rem); text-align:center; }
.bg-ink .stats{ background:var(--line-light); border-color:var(--line-light); }
.bg-ink .stat{ background:var(--ink); }
.stat b{ display:block; font-family:var(--display); font-weight:500; font-size:clamp(2rem,1.6rem + 1.6vw,2.9rem); color:var(--gold); line-height:1; }
.stat span{ display:block; margin-top:.6rem; font-size:.74rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3); }
.bg-ink .stat span{ color:rgba(251,247,239,.6); }

/* pull quote */
.quote{ text-align:center; }
.quote blockquote{
  margin:0; font-family:var(--display); font-style:italic; font-weight:400;
  font-size:clamp(1.5rem,1.15rem + 1.8vw,2.6rem); line-height:1.32; text-wrap:balance;
  max-width:22ch; margin-inline:auto;
}
.quote cite{
  display:block; margin-top:1.75rem; font-style:normal; font-family:var(--sans);
  font-size:.74rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--gold);
}

/* value / icon trio */
.value{ text-align:center; }
.value img{ width:3.4rem; height:3.4rem; margin-inline:auto; margin-bottom:1.1rem; mix-blend-mode:multiply; }
.value h3{ font-size:1.2rem; margin-bottom:.6rem; }
.value p{ font-size:.95rem; color:var(--ink-3); }

/* CTA band */
.cta-band{ text-align:center; }
.cta-band h2{ max-width:18ch; margin-inline:auto; text-wrap:balance; }
.cta-band p{ margin-top:1.2rem; max-width:46ch; margin-inline:auto; color:rgba(251,247,239,.78); }
.cta-band .btn-row{ margin-top:2.2rem; }

/* ==========================================================================
   Social band — one tap straight to the platform
   ========================================================================== */
.social-band{ position:relative; overflow:hidden; }
/* oversized seal, bled off the right edge as a watermark */
.social-band .seal-bg{
  position:absolute; right:-6%; top:50%; transform:translateY(-50%);
  width:min(38rem,60%); opacity:.05; pointer-events:none; filter:grayscale(1) brightness(3);
}
.social-band > .wrap{ position:relative; z-index:2; }

.social-handle{
  display:inline-block; font-family:var(--display); font-weight:500;
  font-size:clamp(2.1rem, 1.3rem + 3.4vw, 4.2rem); line-height:1;
  color:var(--gold-lt); text-decoration:none; letter-spacing:-.02em;
  margin:.4rem 0 1rem;
  background-image:linear-gradient(var(--gold-lt),var(--gold-lt));
  background-size:0% 1px; background-position:0 100%; background-repeat:no-repeat;
  transition:background-size .5s var(--ease);
}
.social-handle:hover{ background-size:100% 1px; }

/* flex rather than grid: whatever lands on the last row stretches to fill it,
   so five tiles never leave a stranded orphan */
.social-grid{
  display:flex; flex-wrap:wrap; gap:.75rem; margin-top:clamp(2rem,4vw,3rem);
}
.social-tile{
  flex:1 1 13.5rem;
  position:relative; display:flex; flex-direction:column; gap:.55rem;
  padding:clamp(1.25rem,2.4vw,1.6rem);
  border:1px solid var(--line-light); border-radius:var(--r);
  text-decoration:none; color:var(--paper); overflow:hidden;
  transition:transform .4s var(--ease), border-color .4s var(--ease), background-color .4s var(--ease);
}
.social-tile::after{                       /* gold wash that rises on hover */
  content:""; position:absolute; inset:0; background:var(--gold);
  transform:translateY(101%); transition:transform .45s var(--ease); z-index:-1;
}
.social-tile > *{ position:relative; z-index:1; }
.social-tile:hover{ transform:translateY(-4px); border-color:var(--gold); background-color:var(--gold); }
.social-tile svg{ width:1.65rem; height:1.65rem; flex:none; }
.social-tile b{
  font-family:var(--sans); font-size:.78rem; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase;
}
.social-tile span{ font-size:.92rem; color:rgba(251,247,239,.72); line-height:1.4; }
.social-tile:hover span{ color:rgba(255,255,255,.92); }
.social-tile .go{
  margin-top:.35rem; font-size:1.05rem; opacity:.5;
  transition:transform .4s var(--ease), opacity .4s var(--ease);
}
.social-tile:hover .go{ transform:translateX(5px); opacity:1; }

/* compact row reused in the footer */
.social-mini{ display:flex; gap:.5rem; flex-wrap:wrap; margin-top:1.1rem; }
.social-mini a{
  display:grid; place-items:center; width:2.75rem; height:2.75rem; /* 44px tap target */
  border:1px solid var(--line-light); border-radius:var(--r); color:rgba(251,247,239,.72);
  transition:color .3s var(--ease), border-color .3s var(--ease), background-color .3s var(--ease), transform .3s var(--ease);
}
.social-mini a:hover{ color:var(--ink); background:var(--gold-lt); border-color:var(--gold-lt); transform:translateY(-2px); }
.social-mini svg{ width:1.05rem; height:1.05rem; }

/* ==========================================================================
   Google reviews — real ratings, verbatim guest voices
   ========================================================================== */
.rating-hero{
  display:flex; flex-wrap:wrap; align-items:center; gap:clamp(1.25rem,3vw,2.5rem);
  padding-bottom:clamp(2rem,4vw,3rem); margin-bottom:clamp(2rem,4vw,3rem);
  border-bottom:1px solid var(--line);
}
.rating-score{ display:flex; align-items:baseline; gap:.5rem; }
.rating-score b{
  font-family:var(--display); font-weight:500; line-height:.9;
  font-size:clamp(3.2rem,2.2rem + 4vw,5.4rem); color:var(--ink);
}
.rating-score span{ font-family:var(--display); font-size:1.4rem; color:var(--ink-3); }
.rating-meta{ display:flex; flex-direction:column; gap:.45rem; }
.stars{ display:inline-flex; gap:.15rem; color:var(--gold); }
.stars svg{ width:1.35rem; height:1.35rem; }
.rating-count{ font-size:.95rem; color:var(--ink-3); }
.rating-source{
  display:inline-flex; align-items:center; gap:.5rem; margin-left:auto;
  font-size:.8rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3);
}
.rating-source svg{ width:1.15rem; height:1.15rem; }
@media (max-width:640px){ .rating-source{ margin-left:0; } }

.review-grid{ display:flex; flex-wrap:wrap; gap:clamp(1rem,2vw,1.5rem); }
.review-card{
  flex:1 1 17rem; display:flex; flex-direction:column; gap:.9rem;
  padding:clamp(1.4rem,2.6vw,1.9rem);
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r);
  transition:transform .4s var(--ease), box-shadow .4s var(--ease);
}
.review-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-md); }
.review-card blockquote{
  margin:0; font-family:var(--display); font-size:1.06rem; line-height:1.55; color:var(--ink-2);
}
.review-card .who{
  margin-top:auto; padding-top:.4rem;
  font-size:.78rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3);
}
.review-card .stars svg{ width:1rem; height:1rem; }

/* ==========================================================================
   Partner / sponsor marquee
   Endless horizontal drift. The track holds the logo set TWICE and slides by
   exactly 50%, so the loop is seamless with no visible jump.
   ========================================================================== */
.partners{ border-top:1px solid var(--line); background:var(--paper); }
.partners .eyebrow{ margin-bottom:0; }

.marquee{
  position:relative; overflow:hidden;
  margin-top:clamp(1.75rem,3.5vw,2.75rem);
  /* fade both edges so logos drift in and out instead of being cut off */
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
          mask-image:linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.marquee-track{
  display:flex; align-items:center; width:max-content;
  gap:clamp(2.5rem,6vw,5.5rem);
  animation:marquee-right 44s linear infinite;
}
/* left → right drift.
   The track holds the logo set FOUR times and shifts by exactly one set (25%).
   Four rather than two because a single set is narrower than a desktop screen —
   with only two copies the loop runs out of logos and shows an empty gap. */
@keyframes marquee-right{
  from{ transform:translateX(-25%); }
  to  { transform:translateX(0); }
}
.marquee:hover .marquee-track,
.marquee:focus-within .marquee-track{ animation-play-state:paused; }

@media (prefers-reduced-motion: reduce){
  .marquee{ -webkit-mask-image:none; mask-image:none; }
  .marquee-track{
    animation:none; width:auto; flex-wrap:wrap; justify-content:center;
    gap:clamp(1.5rem,4vw,3rem);
  }
  /* the duplicate set is only there to make motion seamless */
  .marquee-track [data-dupe]{ display:none; }
}

.plogo{
  display:inline-flex; align-items:center; white-space:nowrap;
  font-family:var(--sans); font-weight:700;
  font-size:clamp(1rem, .9rem + .5vw, 1.3rem);
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink-3); opacity:.62;
  transition:opacity .35s var(--ease), color .35s var(--ease);
}
.plogo:hover{ opacity:1; color:var(--ink); }
/* a couple of alternate treatments so the row reads as distinct wordmarks
   rather than one repeated font */
.plogo.is-serif{
  font-family:var(--display); font-weight:500;
  letter-spacing:.04em; text-transform:none;
  font-size:clamp(1.15rem, 1rem + .65vw, 1.6rem);
}
.plogo.is-light{ font-weight:500; letter-spacing:.26em; }

/* Drop-in for real image logos. Greyscaled and muted so a row of mismatched
   brand colours still reads as one calm strip; full colour on hover. */
/* Brand marks carry their own colours. Greyscaled and dimmed so a row of
   clashing brand palettes still reads as one calm strip; true colour on hover.
   brightness(.35) keeps pale marks (Spotify green) from washing out to nothing. */
.plogo-img{
  height:clamp(2.2rem, 1.7rem + 1.8vw, 3.2rem);
  width:auto; flex:none; object-fit:contain;
  /* mid-grey rather than near-black: crushing the brightness lost the detail
     inside finer marks like the Porsche crest */
  filter:grayscale(1) brightness(.55); opacity:.7;
  transition:opacity .35s var(--ease), filter .35s var(--ease), transform .35s var(--ease);
}
.plogo-img:hover{ opacity:1; filter:none; transform:translateY(-2px); }

/* ==========================================================================
   Reservation dialog
   Online booking is not live yet — the button explains that and hands the
   guest the phone number and email instead. Built by main.js.
   ========================================================================== */
.modal-backdrop{
  position:fixed; inset:0; z-index:300;
  display:grid; place-items:center; padding:clamp(1rem,4vw,2rem);
  background:rgba(10,18,14,.55);
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
  opacity:0; visibility:hidden;
  transition:opacity .35s var(--ease), visibility .35s var(--ease);
}
.modal-backdrop.is-open{ opacity:1; visibility:visible; }

.modal{
  /* pinned to the viewport, not to a percentage of the grid area — the
     percentage resolved against the padded box and spilled off-screen */
  position:relative; width:min(34rem, calc(100vw - 2.5rem));
  background:var(--paper); color:var(--ink);
  border:1px solid var(--line); border-radius:var(--r);
  box-shadow:var(--shadow-lg);
  padding:clamp(1.75rem,4vw,2.75rem);
  text-align:center;
  transform:translateY(14px) scale(.98);
  transition:transform .4s var(--ease);
}
.modal-backdrop.is-open .modal{ transform:none; }

.modal .seal{ width:3.4rem; margin:0 auto 1.25rem; }
.modal h2{ font-size:clamp(1.5rem,1.2rem + 1.2vw,2rem); margin-bottom:.85rem; text-wrap:balance; }
.modal p{ color:var(--ink-2); font-size:.98rem; line-height:1.6; max-width:38ch; margin-inline:auto; }

.modal-contact{
  display:flex; flex-direction:column; gap:.6rem;
  margin-top:1.75rem;
}
.modal-contact .btn{ width:100%; }

.modal-close{
  position:absolute; top:.6rem; right:.6rem;
  width:2.5rem; height:2.5rem; display:grid; place-items:center;
  border:0; background:transparent; border-radius:50%; cursor:pointer;
  color:var(--ink-3); font-size:1.5rem; line-height:1;
  transition:background-color .25s var(--ease), color .25s var(--ease);
}
.modal-close:hover{ background:var(--paper-2); color:var(--ink); }

/* ==========================================================================
   Cookie / analytics consent
   Injected by main.js. Nothing is measured until the guest agrees.
   ========================================================================== */
.consent{
  position:fixed; z-index:200; left:50%; bottom:clamp(.75rem,2vw,1.5rem);
  transform:translate(-50%, 140%);
  width:min(46rem, calc(100% - 1.5rem));
  display:flex; flex-wrap:wrap; align-items:center; gap:clamp(.85rem,2vw,1.5rem);
  padding:clamp(1.1rem,2.4vw,1.5rem) clamp(1.25rem,2.6vw,1.75rem);
  background:var(--paper); color:var(--ink);
  border:1px solid var(--line); border-radius:var(--r);
  box-shadow:var(--shadow-lg);
  transition:transform .55s var(--ease), opacity .45s var(--ease);
  opacity:0;
}
.consent.is-in{ transform:translate(-50%, 0); opacity:1; }
.consent p{ flex:1 1 18rem; font-size:.92rem; line-height:1.55; color:var(--ink-2); margin:0; }
.consent a{ color:var(--gold); text-decoration:underline; text-underline-offset:2px; }
.consent-actions{ display:flex; gap:.6rem; flex:0 0 auto; }
.consent .btn{ padding:.7rem 1.35rem; font-size:.74rem; }
@media (max-width:560px){
  .consent-actions{ width:100%; }
  .consent .btn{ flex:1; justify-content:center; }
}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer{ background:var(--ink); color:rgba(251,247,239,.72); padding-block:clamp(3.5rem,6vw,5.5rem) 2rem; }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:clamp(2rem,4vw,3.5rem); }
@media (max-width: 900px){ .footer-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width: 560px){ .footer-grid{ grid-template-columns:1fr; } }
.site-footer h4{
  font-family:var(--sans); font-size:.72rem; font-weight:700; letter-spacing:.2em;
  text-transform:uppercase; color:var(--gold-lt); margin-bottom:1.2rem;
}
.site-footer a{ text-decoration:none; }
.site-footer li{ padding:.3rem 0; }
.site-footer li a:hover{ color:var(--paper); }
.footer-brand img{ width:3.6rem; margin-bottom:1.1rem; }
.footer-brand p{ font-size:.94rem; max-width:32ch; }
.footer-bottom{
  margin-top:clamp(2.5rem,5vw,4rem); padding-top:1.75rem; border-top:1px solid var(--line-light);
  display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between; align-items:center;
  font-size:.82rem; color:rgba(251,247,239,.55);
}
.footer-bottom nav{ display:flex; gap:1.5rem; flex-wrap:wrap; }

/* ==========================================================================
   Reveal on scroll
   ========================================================================== */
/* Scoped to html.js — without scripting these stay visible instead of blank. */
html.js .reveal{ opacity:0; transform:translateY(22px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
html.js .reveal.is-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ html.js .reveal{ opacity:1; transform:none; } }

/* ==========================================================================
   Page header (interior pages)
   ========================================================================== */
.page-head{
  position:relative; background:var(--ink); color:var(--paper);
  padding-block:clamp(4rem,9vw,7.5rem); overflow:hidden;
}
.page-head::before{
  content:""; position:absolute; inset:0; opacity:.24;
  background-size:cover; background-position:center;
}
.page-head::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(22,36,30,.55), rgba(22,36,30,.9));
}
.page-head > *{ position:relative; z-index:2; }
.page-head h1{ color:var(--paper); max-width:18ch; text-wrap:balance; }
.page-head .lead{ color:rgba(251,247,239,.82); margin-top:1.3rem; max-width:56ch; }
.ph-menu::before{ background-image:url("../img/menu-1.jpg"); }
.ph-events::before{ background-image:url("../img/freysitz-real.jpg"); }
.ph-about::before{ background-image:url("../img/about-1.jpg"); }
.ph-contact::before{ background-image:url("../img/home-4.jpg"); }

/* ==========================================================================
   Misc
   ========================================================================== */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,5rem); align-items:center; }
@media (max-width: 880px){ .split{ grid-template-columns:1fr; } }
.split.reverse > :first-child{ order:2; }
@media (max-width: 880px){ .split.reverse > :first-child{ order:0; } }

.prose p + p{ margin-top:1.1rem; }
.prose h3{ margin-top:2.2rem; margin-bottom:.7rem; }

.gallery{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr)); gap:.75rem; }
.gallery img{ width:100%; aspect-ratio:3/4; object-fit:cover; border-radius:var(--r); }
.gallery img:first-child{ grid-column:span 2; aspect-ratio:3/2; }
@media (max-width:640px){ .gallery img:first-child{ grid-column:span 1; aspect-ratio:3/4; } }