/* Layout concept: editorial chapters — colour floods alternating with paper, an
   asymmetric grid with sticky mono chapter marks, and two full-width German words
   set in Fraunces italic as the only ornament on the page. */
:root{
  --paper:#F5F0E8;        /* Vienna Cream — the page's ground */
  --paper-2:#ECE4D6;      /* deeper cream for quiet insets */
  --ink:#1F1E1A;          /* Deep Charcoal — the night flood + body text */
  --walnut:#4A3426;       /* Heritage Walnut — headings on paper */
  --gold:#A5741F;         /* Golden Schnitzel, deepened so it holds on cream */
  --gold-lift:#D8B978;    /* the same gold, lifted for dark grounds */
  --sage:#5D6B4F;         /* Forest Sage */
  --red:#C8102E;          /* Austrian Red — promotions only */
  --ink-soft:#574E44;     /* warm neutral, biased to walnut */
  --okt:#005B7F;          /* sampled from the Mini Oktoberfest logo — 6.6:1 on cream */

  /* Albertus Nova is a licensed Monotype family: it renders for anyone who has it
     installed, and Marcellus — the closest free glyphic roman — carries everyone else. */
  --f-display:"Albertus Nova","Albertus MT","Albertus",Marcellus,Georgia,serif;
  --f-divider:"Fraunces",Georgia,serif;   /* italic axis only, and only on the two words */
  /* Spectral reads as a printed menu rather than an interface, and its sturdier
     serifs survive at 15px on the dark flood where a delicate face would vanish. */
  --f-body:"Spectral",Georgia,'Times New Roman',serif;
  /* Jost for tracked caps: Wolpe drew Albertus alongside geometric sans like this. */
  --f-label:"Jost",'Futura','Century Gothic',sans-serif;

  --gut:clamp(20px,5vw,72px);
  --chapter:clamp(88px,13vw,180px);
  --block:clamp(36px,5vw,68px);
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--f-body);font-size:1.125rem;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{display:block;max-width:100%}
/* figure carries a browser default margin of 1em 40px — it silently inset every
   image column and broke the bleed off the right edge */
figure,blockquote{margin:0}
a{color:inherit}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* ---------- type roles ---------- */
.mark{
  font-family:var(--f-label);font-size:.6875rem;font-weight:500;
  text-transform:uppercase;letter-spacing:.15em;line-height:1.5;
}
/* Albertus is an incised, flared roman — it wants a touch of positive tracking,
   never the negative tracking a Didone takes. */
.display{
  font-family:var(--f-display);font-weight:400;line-height:.98;
  letter-spacing:.006em;text-wrap:balance;margin:0;
}
.display em{font-style:normal;color:var(--gold)}
h2.display{font-size:clamp(2.1rem,5.2vw,4.1rem)}
h3{font-family:var(--f-display);font-weight:400;margin:0}
p{margin:0}
.prose p+p{margin-top:1.05em}
.prose{max-width:34em;color:var(--ink-soft)}

/* ---------- shell ---------- */
.wrap{padding-inline:var(--gut);margin-inline:auto;max-width:1560px}
.chapter{padding-block:var(--chapter)}
.flood-ink{background:var(--ink);color:var(--paper)}
.flood-ink .prose{color:rgba(245,240,232,.72)}
.flood-ink .display em{color:var(--gold-lift)}

.rail{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--block)}
@media(min-width:900px){
  .rail{grid-template-columns:150px minmax(0,1fr);gap:clamp(32px,5vw,80px)}
  .rail__mark{position:sticky;top:calc(96px + env(safe-area-inset-top,0px));align-self:start}
}
.rail__mark{color:var(--gold)}
.rail__mark span{display:block;color:var(--ink-soft)}
.flood-ink .rail__mark{color:var(--gold-lift)}
.flood-ink .rail__mark span{color:rgba(245,240,232,.5)}

/* ---------- header ---------- */
.hdr{
  position:sticky;top:env(safe-area-inset-top,0px);z-index:50;
  background:var(--paper);border-bottom:1px solid rgba(74,52,38,.12);
}
.hdr__in{display:flex;align-items:center;gap:clamp(16px,3vw,40px);padding-block:14px}
.hdr__logo img{height:38px;width:auto}
.nav{display:none;margin-left:auto;gap:clamp(16px,2.2vw,30px)}
@media(min-width:880px){.nav{display:flex}}
.nav a{
  text-decoration:none;color:var(--walnut);padding-block:4px;
  border-bottom:1px solid transparent;transition:border-color .2s,color .2s;
}
.nav a:hover{border-bottom-color:var(--gold);color:var(--gold)}
.hdr__cta{
  margin-left:auto;text-decoration:none;background:var(--sage);color:#fff;
  padding:11px 18px;white-space:nowrap;transition:background .2s;
}
@media(min-width:880px){.hdr__cta{margin-left:0}}
.hdr__cta:hover{background:#4c583f}

/* ---------- buttons ---------- */
.btn{
  font-family:var(--f-label);font-size:.6875rem;font-weight:500;text-transform:uppercase;
  letter-spacing:.15em;text-decoration:none;display:inline-block;
}
.btn--solid{background:var(--walnut);color:var(--paper);padding:15px 24px;transition:background .2s}
.btn--solid:hover{background:var(--ink)}
.btn--text{color:var(--walnut);border-bottom:1px solid var(--gold);padding-bottom:5px;transition:color .2s}
.btn--text:hover{color:var(--gold)}
.flood-ink .btn--solid{background:var(--paper);color:var(--ink)}
.flood-ink .btn--solid:hover{background:#fff}
.flood-ink .btn--text{color:var(--paper);border-bottom-color:rgba(245,240,232,.45)}
.flood-ink .btn--text:hover{color:#fff;border-bottom-color:#fff}

/* ---------- 00 opening ---------- */
.open{position:relative;padding-block:clamp(48px,7vw,96px) 0}
.open__grid{display:grid;gap:clamp(32px,5vw,56px);align-items:end}
@media(min-width:1000px){
  .open__grid{grid-template-columns:minmax(0,1.32fr) minmax(0,1fr);gap:clamp(40px,5vw,80px)}
}
.open__kicker{color:var(--ink-soft);margin-bottom:clamp(20px,3vw,34px)}
/* One face for the whole headline. Fraunces and Albertus are too far apart in
   contrast to share a line at this scale, so colour alone carries the emphasis
   and Fraunces stays reserved for the two divider words. Albertus is drawn wide,
   so the tracking is pulled in tighter than the rest of the display type. */
.open__title{
  font-size:clamp(2.9rem,10.4vw,8.6rem);color:var(--walnut);
  line-height:1.0;letter-spacing:-.022em;
}
.open__title .l1{display:block}
.open__title .l2{display:block;color:var(--gold);margin-top:.02em}
.open__lede{margin-top:clamp(22px,3vw,34px);max-width:31em;color:var(--ink-soft)}
.open__acts{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(16px,2.5vw,30px);margin-top:clamp(26px,3.5vw,40px)}
.open__portrait{position:relative;margin-right:calc(var(--gut) * -1)}
.open__portrait img{width:100%;aspect-ratio:820/1097;object-fit:cover;object-position:50% 20%}
.open__cap{
  position:absolute;left:0;bottom:0;z-index:2;background:var(--paper);
  padding:14px 18px 0 0;color:var(--ink-soft);max-width:14em;
}
.status{
  display:flex;align-items:center;gap:10px;margin-top:clamp(28px,4vw,44px);
  padding-top:18px;border-top:1px solid rgba(74,52,38,.16);color:var(--ink-soft);
}
.status__dot{width:7px;height:7px;flex:0 0 auto;border-radius:50%;background:var(--sage)}
.status[data-state="shut"] .status__dot{background:var(--red)}

/* ---------- the word dividers — the only ornament on the page ---------- */
.wdiv{text-align:center;padding-block:clamp(40px,5vw,74px) clamp(56px,7vw,106px);padding-inline:16px;background:var(--paper);overflow:hidden}
.wdiv--tint{background:var(--paper-2)}
.wdiv--dark{background:var(--ink)}
.wdiv__label{
  display:inline-flex;gap:.7em;align-items:center;justify-content:center;
  color:var(--sage);
}
.wdiv__label::before,.wdiv__label::after{content:"";width:26px;height:1px;background:currentColor;opacity:.6}
.wdiv--dark .wdiv__label{color:var(--gold-lift)}
/* Sized so each word runs nearly the full width of the viewport. Neither
   Willkommen nor Gemütlichkeit has a descender, so the line box is tightened
   from below to kill the gap the font’s descent would otherwise leave. */
.wdiv__word{
  font-family:var(--f-divider);font-style:italic;font-weight:500;
  line-height:.9;letter-spacing:-.035em;color:var(--walnut);
  margin:.02em 0 0;font-size:clamp(3rem,19.5vw,26rem);
}
.wdiv--dark .wdiv__word{color:var(--paper)}
.wdiv__word--long{font-size:clamp(2.6rem,18vw,24rem)}
.wdiv__trans{
  margin:1.9em auto 0;max-width:32em;padding-inline:var(--gut);
  font-size:.95rem;color:var(--ink-soft);
}
.wdiv--dark .wdiv__trans{color:rgba(245,240,232,.72)}

/* ---------- das haus ---------- */
.haus__lead{color:var(--walnut);font-size:clamp(2.3rem,5.6vw,4.6rem);max-width:15ch}
.haus__body{display:grid;gap:clamp(30px,4vw,56px);margin-top:clamp(34px,4.5vw,64px)}
@media(min-width:900px){.haus__body{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,5vw,88px)}}
.haus__body .prose{max-width:38em}
/* This list is a grid sibling of the prose, not a block stacked under it, so it
   starts flush: no top margin, and no rule above the first row, which would push
   its first line below the first line of the paragraph beside it. */
.facts{display:grid;gap:0;margin-top:0;padding:0;list-style:none}
.facts li{display:flex;flex-wrap:wrap;gap:4px 16px;align-items:baseline;padding-block:15px;border-top:1px solid rgba(74,52,38,.14)}
.facts li:first-child{border-top:0;padding-top:0}
.facts li:last-child{border-bottom:1px solid rgba(74,52,38,.14)}
.facts b{font-family:var(--f-label);font-size:.6875rem;font-weight:500;text-transform:uppercase;letter-spacing:.15em;color:var(--gold);flex:0 0 auto;width:10.5em}
.facts span{color:var(--ink-soft);font-size:1rem;min-width:0;flex:1}

/* ---------- set lunch ---------- */
.lunch{background:var(--red);color:var(--paper);padding-block:clamp(56px,8vw,104px)}
.lunch__grid{display:grid;gap:clamp(28px,4vw,52px);align-items:center}
@media(min-width:900px){.lunch__grid{grid-template-columns:auto minmax(0,1fr);gap:clamp(44px,6vw,96px)}}
.lunch__price{font-family:var(--f-display);font-size:clamp(4rem,11vw,9rem);line-height:.9;letter-spacing:.006em}
.lunch__mark{color:rgba(245,240,232,.8);margin-bottom:14px}
.lunch__body{color:rgba(245,240,232,.9);max-width:62ch}
/* the three mains run across the band rather than stacking in a narrow column,
   so the band is filled instead of leaving a third of it empty */
.lunch__mains{display:grid;gap:14px;margin-top:clamp(24px,3vw,36px);padding:0;list-style:none}
@media(min-width:820px){.lunch__mains{grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,48px)}}
.lunch__mains li{min-width:0}
.lunch__mains b{
  display:block;font-family:var(--f-label);font-weight:500;
  font-size:1rem;letter-spacing:.02em;color:var(--paper);
}
.lunch__mains span{display:block;margin-top:3px;font-size:.9375rem;line-height:1.45;color:rgba(245,240,232,.78)}
.lunch__fine{margin-top:clamp(24px,3vw,34px);color:rgba(245,240,232,.85)}

/* ---------- die speisekarte ---------- */
.menu__intro{max-width:38em;margin-bottom:var(--block)}
.menu__cols{columns:1;column-gap:clamp(32px,5vw,72px)}
@media(min-width:760px){.menu__cols{columns:2}}
@media(min-width:1260px){.menu__cols{columns:3}}
.mgroup{break-inside:avoid;page-break-inside:avoid;margin-bottom:clamp(34px,4vw,54px)}
.mgroup__head{
  display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 12px;
  padding-bottom:10px;border-bottom:1px solid rgba(216,185,120,.38);
}
.mgroup__name{font-size:1.35rem;color:var(--gold-lift);letter-spacing:.01em;min-width:0}
.mgroup__note{font-family:var(--f-label);font-size:.625rem;line-height:1.5;text-transform:uppercase;letter-spacing:.13em;color:rgba(245,240,232,.5);text-align:right}
.mrow{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 16px;align-items:baseline;padding-block:13px;border-bottom:1px solid rgba(245,240,232,.10)}
.mrow__name{font-family:var(--f-display);font-size:1.0625rem;line-height:1.35;min-width:0}
.mrow__tag{font-family:var(--f-label);font-size:.625rem;text-transform:uppercase;letter-spacing:.12em;color:var(--gold-lift);margin-left:.6em;white-space:nowrap}
.mrow__price{font-family:var(--f-label);font-weight:500;font-size:.9375rem;font-variant-numeric:tabular-nums;color:var(--paper);white-space:nowrap}
.mrow__desc{grid-column:1/-1;font-size:.9375rem;line-height:1.5;color:rgba(245,240,232,.6);max-width:44ch}
.mgroup__add{margin-top:12px;font-family:var(--f-label);font-size:.8125rem;letter-spacing:.02em;color:rgba(245,240,232,.55)}
.menu__foot{margin-top:var(--block);padding-top:22px;border-top:1px solid rgba(245,240,232,.16);display:flex;flex-wrap:wrap;gap:20px 40px;align-items:baseline;justify-content:space-between}
.menu__legal{font-size:.875rem;color:rgba(245,240,232,.55);max-width:46ch}

/* ---------- oktoberfest — the live campaign, in its own colour ----------
   A poster beside a board, not a centred header above a list. The logo keeps
   its paper ground (its script is the same blue, with a white shade baked in,
   so it cannot go on the flood) and the dishes get the colour instead — one
   panel of Oktoberfest blue on a page of cream. */
.okt{
  position:relative;background:var(--paper-2);color:var(--ink);
  padding-block:var(--chapter);
  border-block:1px solid rgba(0,91,127,.22);
}
.okt__in{display:grid;gap:clamp(36px,5vw,64px);align-items:start}
@media(min-width:1000px){
  .okt__in{grid-template-columns:minmax(0,.84fr) minmax(0,1fr);gap:clamp(46px,6vw,104px)}
  /* the poster holds while the dishes scroll past it */
  .okt__poster{position:sticky;top:calc(104px + env(safe-area-inset-top,0px))}
}
.okt__poster{display:grid;gap:clamp(13px,1.7vw,20px)}
.okt__now{color:var(--sage)}
/* the class lands on the img in the prototype and on the Elementor image
   widget on the live site, whose own rule out-ranks a single class — so the
   picture itself is capped, not only its wrapper. */
.okt__poster .okt__logo,.okt__poster .okt__logo img{display:block;width:100%;max-width:470px;height:auto}
/* the run of the season, set as a headline rather than a caption */
.okt__dates{
  font-family:var(--f-display);font-weight:400;letter-spacing:.012em;
  font-size:clamp(1.7rem,3.4vw,2.9rem);line-height:1.04;color:var(--okt);
}
.okt__dates span{opacity:.42;margin-inline:.1em}
.okt__body{max-width:34ch;color:var(--ink-soft)}
.okt__acts{display:flex;flex-wrap:wrap;gap:16px 26px;align-items:center;margin-top:clamp(4px,.8vw,10px)}

.okt__board{background:var(--okt);color:var(--paper);padding:clamp(24px,3.2vw,44px)}
.okt__board-head{
  display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px 20px;
  padding-bottom:14px;border-bottom:1px solid rgba(245,240,232,.3);
}
.okt__board-head h3{font-size:clamp(1.2rem,1.9vw,1.55rem);color:var(--paper)}
.okt__board-head .mark{color:rgba(245,240,232,.58)}
.okt__board .mrow{padding-block:15px;border-bottom:1px solid rgba(245,240,232,.15)}
.okt__board .mrow:last-child{border-bottom:0;padding-bottom:4px}
.okt__board .mrow__name{color:var(--paper)}
.okt__board .mrow__price{color:var(--gold-lift)}
.okt__board .mrow__tag{color:var(--gold-lift)}
.okt__board .mrow__desc{color:rgba(245,240,232,.62)}
.okt__fine{
  margin-top:clamp(14px,1.8vw,22px);padding-top:15px;
  border-top:1px solid rgba(245,240,232,.18);
  font-size:.875rem;color:rgba(245,240,232,.6);
}
.okt .btn--solid{background:var(--okt);color:var(--paper)}
.okt .btn--solid:hover{background:#004a68}
.okt .btn--text{color:var(--okt);border-bottom-color:var(--okt)}
.okt .btn--text:hover{color:var(--walnut)}

/* ---------- the quote ---------- */
.quote{padding-block:var(--chapter)}
.quote blockquote{margin:0}
.quote p{
  font-family:var(--f-display);font-size:clamp(1.5rem,3.9vw,3rem);
  line-height:1.22;letter-spacing:.006em;color:var(--walnut);max-width:22ch;text-wrap:balance;
}
.quote footer{margin-top:clamp(24px,3vw,38px);color:var(--ink-soft)}

/* ---------- visit ---------- */
.visit__grid{display:grid;gap:clamp(36px,5vw,60px);align-items:stretch}
@media(min-width:900px){.visit__grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,5vw,84px)}}
.visit__addr{font-family:var(--f-display);font-size:clamp(1.5rem,2.8vw,2.2rem);line-height:1.32}
.visit__sub{color:rgba(245,240,232,.7);margin-top:16px;max-width:34em}
.hours{width:100%;border-collapse:collapse;margin-top:clamp(28px,3.5vw,44px);font-family:var(--f-label);font-size:.875rem;font-variant-numeric:tabular-nums}
.hours caption{text-align:left;padding-bottom:14px;color:rgba(245,240,232,.55)}
.hours td{padding-block:12px;border-top:1px solid rgba(245,240,232,.14);color:rgba(245,240,232,.78);vertical-align:top}
.hours td:last-child{text-align:right;white-space:nowrap}
.hours tr[data-today] td{color:var(--paper)}
.hours tr[data-today] td:first-child::before{content:"";display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--gold-lift);margin-right:9px;vertical-align:middle}
.visit__acts{display:flex;flex-wrap:wrap;gap:18px 26px;margin-top:clamp(30px,4vw,48px)}
.visit__map{display:flex;flex-direction:column;min-height:0}
.visit__map a{
  position:relative;display:block;flex:1 1 auto;overflow:hidden;
  min-height:clamp(300px,42vw,540px);border:1px solid rgba(245,240,232,.18);
}
.visit__map img{width:100%;height:100%;object-fit:cover;object-position:50% 50%;transition:transform .5s cubic-bezier(.22,.7,.24,1)}
.visit__map a:hover img{transform:scale(1.03)}
.visit__mapcap{margin-top:12px;color:rgba(245,240,232,.5)}

/* ---------- footer ---------- */
.ft{background:var(--paper-2);padding-block:clamp(44px,6vw,72px)}
.ft__in{display:grid;gap:30px}
@media(min-width:680px){.ft__in{grid-template-columns:repeat(2,minmax(0,1fr));gap:38px 40px}}
@media(min-width:1000px){.ft__in{grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));gap:40px}}
.ft a{text-decoration:none;color:var(--ink-soft);border-bottom:1px solid transparent}
.ft a:hover{color:var(--walnut);border-bottom-color:var(--gold)}
.ft__col{display:grid;gap:10px;align-content:start;font-size:1rem;color:var(--ink-soft)}
.ft__col .mark{color:var(--gold);margin-bottom:6px}
.ft__logo img{height:34px;width:auto;margin-bottom:16px}

/* ==================================================================
   MOTION — restrained on purpose.
   Native scrolling (nothing takes over the wheel), no parallax, nothing
   tied to the scrollbar. Three things only:
   1. the hero settles in once, on load;
   2. content below the first screen rises a few pixels and fades in,
      once, as it arrives — the script adds .sh-motion only when it can
      watch for that, so without JavaScript everything is simply there;
   3. moving between pages crossfades instead of flashing white, with the
      header holding still.
   ================================================================== */
:root{--ease:cubic-bezier(.22,.61,.36,1);--t-quick:.2s;--t-settle:.7s}

/* 1. the hero, once */
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.rise{animation:rise var(--t-settle) var(--ease) both}
.rise--2{animation-delay:.08s}
.rise--3{animation-delay:.16s}
.rise--4{animation-delay:.24s}

/* 2. content settling in as it arrives */
/* The transition lives on the revealed state only: hiding is instant (and off
   screen), so nothing ever visibly fades OUT before it fades in. transition:none
   is explicit because the theme gives some elements transition:all. */
.sh-motion .sh-reveal{opacity:0;transform:translateY(14px);transition:none}
.sh-motion .sh-reveal.sh-in{
  opacity:1;transform:none;
  transition:opacity var(--t-settle) var(--ease),transform var(--t-settle) var(--ease);
}

/* 3. page to page: a short crossfade, the header holding still */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.32s;animation-timing-function:cubic-bezier(.22,.61,.36,1)}
.hdr{view-transition-name:sh-header}

/* controls answer the pointer quickly */
.btn,.hdr__cta,.nav a,.ft a{transition:color var(--t-quick) ease,background-color var(--t-quick) ease,border-color var(--t-quick) ease}

@media(prefers-reduced-motion:reduce){
  .rise{animation:none}
  .sh-motion .sh-reveal{opacity:1;transform:none;transition:none}
  ::view-transition-old(root),::view-transition-new(root){animation:none}
  *{transition-duration:.01ms !important}
}

/* ==================================================================
   SUB-PAGES — private events, die Kultur
   ================================================================== */

/* the opening of an inner page: quieter than the homepage hero */
.phero{padding-block:clamp(40px,5.5vw,80px) 0}
.phero__grid{display:grid;gap:clamp(30px,4vw,52px);align-items:end}
@media(min-width:1000px){
  .phero__grid{grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);gap:clamp(40px,5vw,78px)}
}
.phero__title{
  font-family:var(--f-display);font-weight:400;margin:0;
  font-size:clamp(2.5rem,7vw,5.4rem);line-height:1.02;
  letter-spacing:-.022em;color:var(--walnut);text-wrap:balance;
}
.phero__lede{margin-top:clamp(18px,2.4vw,28px);max-width:36em;color:var(--ink-soft)}
.phero__acts{display:flex;flex-wrap:wrap;gap:clamp(16px,2.4vw,28px);align-items:center;margin-top:clamp(24px,3vw,36px)}
.phero__figure{position:relative;margin-right:calc(var(--gut) * -1)}
.phero__figure img{width:100%;aspect-ratio:820/1040;object-fit:cover;object-position:50% 58%}
.phero__cap{margin-top:12px;color:var(--ink-soft)}

/* a plain two-up list of things offered — rules, no cards */
.offer{display:grid;gap:0;padding:0;margin:0;list-style:none}
@media(min-width:820px){.offer{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(40px,5vw,84px)}}
.offer li{min-width:0;padding-block:clamp(20px,2.6vw,28px);border-top:1px solid rgba(74,52,38,.14)}
.offer h3{font-size:clamp(1.2rem,2vw,1.55rem);color:var(--walnut);line-height:1.2}
.offer p{margin-top:8px;color:var(--ink-soft);font-size:1rem;max-width:36ch}
.flood-ink .offer li{border-top-color:rgba(245,240,232,.16)}
.flood-ink .offer h3{color:var(--paper)}
.flood-ink .offer p{color:rgba(245,240,232,.7)}

/* a block that is deliberately not written yet — visible as unfinished */
.todo{
  border:1px dashed rgba(200,16,46,.45);padding:clamp(18px,2.6vw,28px);
  max-width:54ch;margin-top:clamp(24px,3vw,34px);
}
.todo .mark{color:var(--red);margin-bottom:10px}
.todo p{color:var(--ink-soft);font-size:1rem}
.todo p + p{margin-top:.7em}

/* closing call to action on an inner page */
.close{text-align:center}
.close__title{
  font-family:var(--f-display);font-weight:400;margin:0;
  font-size:clamp(1.9rem,4.4vw,3.4rem);letter-spacing:-.018em;
  color:var(--walnut);text-wrap:balance;
}
.flood-ink .close__title{color:var(--paper)}
.close__acts{display:flex;flex-wrap:wrap;gap:clamp(16px,2.4vw,28px);justify-content:center;align-items:center;margin-top:clamp(26px,3.2vw,38px)}

/* reviews, set as quiet columns rather than cards */
.voices{display:grid;gap:clamp(30px,4vw,56px)}
@media(min-width:900px){.voices{grid-template-columns:repeat(3,minmax(0,1fr))}}
.voices blockquote{margin:0;min-width:0;border-top:1px solid rgba(74,52,38,.16);padding-top:clamp(18px,2.4vw,26px)}
.voices p{font-size:1.0625rem;line-height:1.6;color:var(--ink-soft)}
.voices footer{margin-top:14px;color:var(--gold)}

/* ==================================================================
   3x3 WOLFGANG SG — the team keeps its own black-and-white identity,
   deliberately apart from the restaurant's cream and walnut.
   ================================================================== */
.team{background:#000;color:#fff}
.team .rail__mark{color:#fff}
.team .rail__mark span{color:rgba(255,255,255,.45)}
.team .mark{color:rgba(255,255,255,.5)}
.team__badge{width:min(290px,62%);height:auto;margin-bottom:clamp(24px,3.2vw,40px)}
.team__lead{
  font-family:var(--f-display);font-weight:400;margin:0;color:#fff;
  font-size:clamp(2rem,4.8vw,3.7rem);line-height:1.04;
  letter-spacing:-.02em;max-width:17ch;text-wrap:balance;
}
.team .prose{color:rgba(255,255,255,.66);margin-top:clamp(22px,2.8vw,34px)}
.team .facts li{border-top-color:rgba(255,255,255,.18)}
.team .facts li:last-child{border-bottom-color:rgba(255,255,255,.18)}
.team .facts b{color:#fff}
.team .facts span{color:rgba(255,255,255,.66)}
.team .btn--solid{background:#fff;color:#000}
.team .btn--solid:hover{background:rgba(255,255,255,.82)}
.team .btn--text{color:#fff;border-bottom-color:rgba(255,255,255,.5)}
.team .btn--text:hover{color:#fff;border-bottom-color:#fff}

/* the photographs: monochrome at rest, colour when you look closer */
.shots{display:grid;gap:10px;margin-top:clamp(32px,4vw,52px)}
@media(min-width:640px){.shots{grid-template-columns:repeat(2,minmax(0,1fr))}}
.shots figure{margin:0;min-width:0;background:#111;overflow:hidden}
.shots img{
  width:100%;aspect-ratio:4/5;object-fit:cover;display:block;
  filter:grayscale(1) contrast(1.08);
  transition:filter .55s ease,transform .7s cubic-bezier(.22,.7,.24,1);
}
.shots figure:hover img{filter:grayscale(0) contrast(1);transform:scale(1.035)}
.shots figcaption{margin-top:10px;color:rgba(255,255,255,.4)}
.shots__wide{grid-column:1/-1}
.shots__wide img{aspect-ratio:2/1}

/* the record, set as results rather than a row of posters */
.record{
  width:100%;border-collapse:collapse;margin-top:clamp(34px,4.5vw,56px);
  font-family:var(--f-label);font-variant-numeric:tabular-nums;
}
.record caption{text-align:left;padding-bottom:14px;color:rgba(255,255,255,.5)}
.record td{
  padding-block:15px;border-top:1px solid rgba(255,255,255,.18);
  color:rgba(255,255,255,.62);font-size:.875rem;vertical-align:top;
}
.record tr:last-child td{border-bottom:1px solid rgba(255,255,255,.18)}
.record td:first-child{color:#fff}
.record td:last-child{text-align:right;white-space:nowrap;color:#fff}
.record__note{margin-top:16px;color:rgba(255,255,255,.45);font-size:.875rem;max-width:64ch}

/* ---------- Der Shop: a cursive "coming soon" watermarked behind the text ---------- */
.shop{position:relative;overflow:hidden;background:var(--paper)}
.shop__ghost{
  position:absolute;z-index:0;margin:0;
  right:calc(var(--gut) * -.35);bottom:-.16em;
  font-family:var(--f-divider);font-style:italic;font-weight:500;
  font-size:clamp(4.5rem,16vw,15rem);line-height:.82;letter-spacing:-.03em;
  color:rgba(74,52,38,.075);white-space:nowrap;
  pointer-events:none;user-select:none;
}
.shop > .wrap{position:relative;z-index:1}

/* ---------- facts lists on the dark flood ----------
   .facts was drawn for cream sections; on charcoal its text sat at
   ink-soft, dark grey on near-black, and was close to unreadable. */
.flood-ink .facts li{border-top-color:rgba(245,240,232,.14)}
.flood-ink .facts li:last-child{border-bottom-color:rgba(245,240,232,.14)}
.flood-ink .facts span{color:rgba(245,240,232,.8)}
.flood-ink .facts b{color:var(--gold-lift)}

/* ---------- private events: how an event comes together ----------
   The process really is a sequence, so it is numbered. */
.plan-steps{
  display:grid;gap:clamp(30px,4vw,52px);margin:clamp(40px,5vw,68px) 0 0;
  padding:0;list-style:none;
}
@media(min-width:820px){.plan-steps{grid-template-columns:repeat(3,minmax(0,1fr))}}
.plan-steps li{min-width:0;border-top:1px solid rgba(216,185,120,.5);padding-top:clamp(18px,2.4vw,26px)}
.plan-steps__n{
  display:block;font-family:var(--f-display);font-weight:400;
  font-size:clamp(3.2rem,6vw,5rem);line-height:.9;letter-spacing:.01em;color:var(--gold-lift);
}
.plan-steps h3{margin-top:clamp(16px,2vw,24px);font-size:clamp(1.3rem,2.1vw,1.7rem);line-height:1.2;color:var(--paper)}
.plan-steps p{margin-top:10px;max-width:30ch;font-size:1rem;color:rgba(245,240,232,.74)}

.plan-notes{margin:clamp(48px,6vw,80px) 0 0;padding:0;list-style:none;display:grid}
@media(min-width:820px){.plan-notes{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(40px,5vw,84px)}}
.plan-notes__head{grid-column:1/-1;margin-bottom:10px;color:var(--gold-lift)}
.plan-notes li{
  display:flex;gap:14px;align-items:baseline;min-width:0;
  padding-block:14px;border-top:1px solid rgba(245,240,232,.14);
  font-size:1rem;color:rgba(245,240,232,.84);
}
.plan-notes li::before{
  content:"";flex:0 0 auto;width:5px;height:5px;border-radius:50%;
  background:var(--gold-lift);transform:translateY(-3px);
}

.plan-book{
  margin-top:clamp(40px,5vw,64px);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:20px clamp(24px,3vw,40px);
  padding:clamp(22px,3vw,34px) clamp(22px,3vw,38px);
  border:1px solid rgba(216,185,120,.45);
}
.plan-book__num{
  font-family:var(--f-display);font-size:clamp(1.8rem,3.4vw,2.6rem);
  line-height:1.1;letter-spacing:.02em;color:var(--paper);margin-top:6px;
}


/* ---------- one vertical rhythm ----------
   The WordPress port ended up with five: chapters at 180px, Oktoberfest at
   120, the lunch band at 104 and the dividers at 74/106. Everything
   structural now shares one value; the dividers stay deliberately tighter
   because they are a breath between chapters, not a chapter. */
:root{--chapter:clamp(80px,10vw,150px)}
.okt,.lunch,.quote{padding-block:var(--chapter)}
.wdiv{padding-block:calc(var(--chapter) * .62) calc(var(--chapter) * .74)}

/* ---------- the Speisekarte, split into food and drinks ----------
   Fifteen categories of wildly different length flowed through three CSS
   columns left them 350px out of step with each other. Food (long, every
   dish described) and drinks (short, mostly name and price) are different
   kinds of content, so each gets a grid of its own: two columns for food,
   three for drinks. Grid rows align where a column flow could not. */
.menu__part + .menu__part{margin-top:clamp(54px,6.5vw,92px)}
.menu__part-head{
  display:flex;align-items:baseline;gap:clamp(12px,2vw,22px);
  padding-bottom:13px;margin-bottom:clamp(26px,3.2vw,42px);
  border-bottom:1px solid rgba(216,185,120,.5);
}
.menu__part-head h3{
  font-family:var(--f-display);font-weight:400;letter-spacing:.01em;
  font-size:clamp(1.45rem,2.5vw,2rem);color:var(--gold-lift);
}
.menu__part-head .mark{margin-left:auto;color:rgba(245,240,232,.45);white-space:nowrap}
.menu__grid{display:grid;align-items:start;gap:clamp(30px,3.6vw,50px) clamp(34px,4.4vw,70px)}
@media(min-width:780px){.menu__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1140px){.menu__grid--tight{grid-template-columns:repeat(3,minmax(0,1fr))}}
.menu__grid .mgroup{margin-bottom:0}

/* the + on the set lunch price is the service charge, so it is set as one */
.lunch__plus{font-size:.46em;vertical-align:.62em;margin-left:.03em;opacity:.75}

/* Drinks are short lists, mostly a name and a price, so they are flowed through
   columns, which balances their heights on their own. Food keeps the grid,
   because long descriptions have to line up row by row. */
.menu__grid--tight{display:block;columns:2;column-gap:clamp(34px,4.4vw,70px)}
@media(min-width:1140px){.menu__grid--tight{columns:3}}
.menu__grid--tight .mgroup{break-inside:avoid;margin-bottom:clamp(30px,3.6vw,50px)}


/* ==================================================================
   FOOTER — a sign-off, not a sitemap.
   Three tiers: a farewell set in the divider italic with the kitchen's
   live state beside it, then four balanced columns, then a base rule.
   ================================================================== */
.ft{background:var(--paper-2);padding-block:clamp(52px,6.5vw,86px) clamp(26px,3vw,38px)}
.ft__say{
  display:grid;gap:clamp(22px,3vw,40px);align-items:end;
  padding-bottom:clamp(30px,4vw,48px);margin-bottom:clamp(34px,4.4vw,56px);
  border-bottom:1px solid rgba(165,116,31,.32);
}
@media(min-width:860px){.ft__say{grid-template-columns:minmax(0,1fr) auto;gap:clamp(30px,5vw,80px)}}
.ft__say-label{color:var(--sage)}
/* Fraunces italic, the same voice as Willkommen — at a fraction of the size, so
   it signs the page off without competing with the dividers above it. */
.ft__word{
  font-family:var(--f-divider);font-style:italic;font-weight:500;
  font-size:clamp(3.1rem,8.5vw,6.6rem);line-height:.88;letter-spacing:-.03em;
  color:var(--walnut);margin:.14em 0 0;
}
.ft__now{display:grid;gap:9px;justify-items:start;min-width:0}
@media(min-width:860px){.ft__now{justify-items:end;text-align:right}}
/* the shared .status rule carries a rule of its own; here the band provides it */
.ft__status{margin-top:0;padding-top:0;border-top:0;color:var(--walnut)}
.ft__today{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 12px;color:var(--ink-soft)}
.ft__today .mark{color:var(--gold)}
.ft__today b{font-family:var(--f-label);font-weight:400;font-variant-numeric:tabular-nums;color:var(--walnut)}
.ft__shut{color:rgba(87,78,68,.6)}

.ft__in{display:grid;gap:34px 30px}
@media(min-width:620px){.ft__in{grid-template-columns:repeat(2,minmax(0,1fr));gap:40px}}
@media(min-width:1040px){.ft__in{grid-template-columns:minmax(0,1.35fr) repeat(3,minmax(0,1fr));gap:clamp(30px,4vw,64px)}}
.ft__col{display:grid;gap:9px;align-content:start;font-size:1rem;color:var(--ink-soft)}
.ft__col .mark{color:var(--gold);margin-bottom:7px}
.ft__brand{gap:16px;max-width:30em}
.ft__brand img{height:34px;width:auto;justify-self:start}
.ft__addr{line-height:1.62}
.ft__tel{font-family:var(--f-label);font-size:1.0625rem;letter-spacing:.01em}

/* a gold rule that wipes in under the word, instead of a border switching on */
.ft a{
  text-decoration:none;color:var(--ink-soft);border-bottom:0;padding-bottom:2px;
  background-image:linear-gradient(var(--gold),var(--gold));
  background-repeat:no-repeat;background-position:0 100%;background-size:0 1px;
  transition:background-size .36s var(--ease),color var(--t-quick) ease;
}
.ft a:hover{color:var(--walnut);background-size:100% 1px}

.ft__base{
  display:flex;flex-wrap:wrap;align-items:center;gap:14px clamp(20px,3vw,40px);
  margin-top:clamp(38px,5vw,64px);padding-top:clamp(18px,2.2vw,26px);
  border-top:1px solid rgba(74,52,38,.14);
}
.ft__cr{color:rgba(87,78,68,.66)}
.ft__social{display:flex;flex-wrap:wrap;gap:8px clamp(14px,2vw,26px);list-style:none;margin:0;padding:0;font-size:.95rem}
.ft__social li+li{position:relative}
.ft__social li+li::before{
  content:"";position:absolute;left:calc(clamp(14px,2vw,26px) / -2);top:50%;
  width:3px;height:3px;margin-top:-1.5px;border-radius:50%;background:rgba(165,116,31,.55);
}
.ft__up{margin-left:auto;color:var(--walnut)}
.ft__up span{display:inline-block;transition:transform .3s var(--ease)}
.ft__up:hover span{transform:translateY(-3px)}

/* ---------- zusammenarbeit — an open invitation, indexed ----------
   Six ways in, numbered like the chapters, and a dark band to end on so the
   page does not simply run out of cream. Nothing here is about the basketball
   except the line that is. */
.collab__head{display:grid;gap:clamp(18px,2.4vw,30px);align-items:end}
@media(min-width:900px){.collab__head{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(30px,4vw,70px)}}
.collab__title{color:var(--walnut)}
.collab__head .prose{max-width:38ch}

.collab{
  display:grid;gap:0;list-style:none;margin:clamp(34px,4.4vw,58px) 0 0;padding:0;
  counter-reset:none;
}
@media(min-width:720px){.collab{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(30px,4vw,64px)}}
@media(min-width:1180px){.collab{grid-template-columns:repeat(3,minmax(0,1fr))}}
.collab li{
  min-width:0;padding-block:clamp(20px,2.4vw,28px);
  border-top:1px solid rgba(74,52,38,.16);
}
/* the index number carries the gold, the way the chapter marks do */
.collab__n{color:var(--gold);margin-bottom:10px}
.collab h3{font-size:clamp(1.15rem,1.9vw,1.45rem);color:var(--walnut);line-height:1.22}
.collab p:last-child{margin-top:8px;color:var(--ink-soft);font-size:1rem;max-width:32ch}

.collab__call{
  margin-top:clamp(40px,5vw,66px);background:var(--ink);color:var(--paper);
  padding:clamp(28px,3.6vw,52px);display:grid;gap:clamp(24px,3vw,40px);align-items:center;
}
@media(min-width:900px){.collab__call{grid-template-columns:minmax(0,1fr) auto;gap:clamp(34px,5vw,72px)}}
.collab__call-title{font-size:clamp(1.6rem,3vw,2.5rem);color:var(--paper);max-width:18ch}
.collab__call-sub{margin-top:12px;color:rgba(245,240,232,.66);max-width:46ch;font-size:1rem}
.collab__acts{display:flex;flex-wrap:wrap;gap:16px 26px;align-items:center}
.collab__call .btn--solid{background:var(--paper);color:var(--ink)}
.collab__call .btn--solid:hover{background:#fff}
.collab__call .btn--text{color:var(--paper);border-bottom-color:rgba(245,240,232,.45)}
.collab__call .btn--text:hover{color:#fff;border-bottom-color:#fff}

/* the photographs — in colour, because the kit is the whole point */
.shots img{filter:none}
.shots figure:hover img{filter:none;transform:scale(1.035)}
.shots a{display:block;overflow:hidden;background:#111}
.shots--solo{grid-template-columns:minmax(0,1fr)}
.shots figcaption{margin-top:11px;color:rgba(255,255,255,.42)}
@media(min-width:900px){.shots__wide img{aspect-ratio:2/1}}

/* ---------- das haus: the photographs ----------
   The only dining-room photography that exists is the restaurant's own, so the
   two it can carry are used deliberately: the signature dish beside the story,
   and the table itself under it. */
.haus__dish{margin:0;min-width:0}
.haus__dish img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;background:var(--paper-2)}
.haus__table{margin:clamp(38px,4.6vw,68px) 0 0}
.haus__table img{display:block;width:100%;aspect-ratio:3/2;object-fit:cover;background:var(--paper-2)}
.haus__dish figcaption,.haus__table figcaption{margin-top:11px;color:var(--ink-soft)}
@media(min-width:900px){.haus__body{grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr)}}
/* the facts now sit under the prose in the left column, so they need the top
   margin and the first rule back that the side-by-side version dropped */
.haus__body .facts{margin-top:clamp(28px,3.5vw,44px)}
.haus__body .facts li:first-child{border-top:1px solid rgba(74,52,38,.14);padding-top:15px}

/* ==================================================================
   THE MOBILE MENU
   Below 880px the link bar has nowhere to go, so it moves into a panel:
   the same five destinations set large, with the kitchen's live state and
   the address under them.
   ================================================================== */
.hdr__burger{
  display:inline-flex;align-items:center;gap:9px;margin-left:12px;flex:0 0 auto;
  padding:9px 12px;background:none;border:1px solid rgba(74,52,38,.22);
  color:var(--walnut);cursor:pointer;font:inherit;
}
.hdr__burger-label{
  font-family:var(--f-label);font-size:.6875rem;font-weight:500;
  text-transform:uppercase;letter-spacing:.15em;
}
.hdr__burger-box{display:grid;gap:5px;width:18px}
.hdr__burger-box span{display:block;height:1px;background:currentColor;transition:transform .34s var(--ease),opacity .18s ease}
.hdr__burger[aria-expanded="true"] .hdr__burger-box span:first-child{transform:translateY(3px) rotate(45deg)}
.hdr__burger[aria-expanded="true"] .hdr__burger-box span:last-child{transform:translateY(-3px) rotate(-45deg)}
@media(min-width:880px){.hdr__burger{display:none}}

/* the bar stays above the panel it opens, or there is no way to close it */
.hdr__in{position:relative;z-index:2}
.menu{
  position:fixed;inset:0;z-index:1;background:var(--paper);
  display:grid;align-content:space-between;gap:clamp(24px,5vh,54px);
  padding-block:calc(84px + env(safe-area-inset-top,0px)) calc(30px + env(safe-area-inset-bottom,0px));
  overflow-y:auto;overscroll-behavior:contain;
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .28s var(--ease),transform .36s var(--ease),visibility .28s;
}
.menu[data-open="true"]{opacity:1;visibility:visible;transform:none}
@media(min-width:880px){.menu{display:none}}
.menu__in{display:grid;align-content:space-between;gap:clamp(26px,5vh,56px);min-height:100%}
.menu__nav{display:grid}
.menu__nav a{
  display:flex;align-items:baseline;gap:clamp(12px,4vw,20px);text-decoration:none;
  font-family:var(--f-display);font-weight:400;letter-spacing:.006em;
  font-size:clamp(1.75rem,7.6vw,2.6rem);line-height:1.04;color:var(--walnut);
  padding-block:clamp(13px,2.6vh,19px);border-top:1px solid rgba(74,52,38,.14);
  transition:color var(--t-quick) ease;
}
.menu__nav a:last-child{border-bottom:1px solid rgba(74,52,38,.14)}
.menu__nav a:hover,.menu__nav a[aria-current="page"]{color:var(--gold)}
.menu__n{flex:0 0 auto;color:var(--gold)}
.menu__base{display:grid;gap:15px;align-content:end}
.menu__base .status{margin-top:0;padding-top:0;border-top:0}
.menu__addr{color:var(--ink-soft);font-size:1rem;line-height:1.6}
.menu__acts{display:flex;flex-wrap:wrap;gap:14px 22px;align-items:center;margin-top:4px}
body[data-menu="open"]{overflow:hidden}

/* the bar itself has to fit a phone: logo, one action and the toggle */
@media(max-width:560px){
  .hdr__logo img{height:30px}
  .hdr__cta{padding:9px 13px}
  .hdr__burger{padding:8px 10px;gap:7px}
  .hdr__burger-label{font-size:.625rem;letter-spacing:.12em}
}
@media(max-width:420px){
  .hdr__burger-label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .hdr__burger{padding:10px}
}
@media(prefers-reduced-motion:reduce){
  .menu{transition:none}
  .hdr__burger-box span{transition:none}
}

/* ---------- 404: the site's own voice, not the theme's ---------- */
.e404{padding-block:clamp(72px,11vw,150px)}
.e404__mark{color:var(--gold)}
.e404__lead{color:var(--walnut);font-size:clamp(2.1rem,6vw,4.2rem);max-width:15ch;margin-top:clamp(14px,1.8vw,20px)}
.e404 .prose{margin-top:clamp(18px,2.4vw,26px)}
.e404__links{display:grid;gap:0;list-style:none;margin:clamp(34px,4.4vw,58px) 0 0;padding:0}
@media(min-width:720px){.e404__links{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(30px,4vw,64px)}}
.e404__links li{min-width:0;padding-block:clamp(16px,2vw,22px);border-top:1px solid rgba(74,52,38,.16)}
.e404__links a{
  display:block;text-decoration:none;line-height:1.22;color:var(--walnut);
  font-family:var(--f-display);font-weight:400;letter-spacing:.006em;
  font-size:clamp(1.15rem,2vw,1.45rem);transition:color var(--t-quick) ease;
}
.e404__links a:hover{color:var(--gold)}
.e404__links span{display:block;margin-top:6px;color:var(--ink-soft);font-size:1rem;max-width:34ch}
.e404__acts{display:flex;flex-wrap:wrap;gap:16px 26px;align-items:center;margin-top:clamp(30px,4vw,48px)}