/* ---------------------------------------------------------------
   Tokens
--------------------------------------------------------------- */
:root{
  --bg:            #F4EBE3;
  --bg-elevated:   #FBF6EF;
  --bg-sunken:     #EAE0D3;
  --ink:           #2A3129;
  --ink-soft:      #55503F;
  --forest:        #354037;
  --olive:         #767154;
  --wine:          #6F171F;
  --wine-ink:      #ffffff;
  --gold:          #BF9B7A;
  --line:          rgba(53,64,55,.16);
  --line-strong:   rgba(53,64,55,.30);
  --shadow:        rgba(40,32,20,.20);

  /* fixed brand chrome — deliberately not theme-adaptive, like a painted market sign */
  --plank:         #2E3A2E;
  --plank-ink:     #F4EBE3;
  --plank-line:    rgba(244,235,227,.16);

  --font-display: "Fraunces", ui-serif, Georgia, serif;
  --font-body:    "Libre Franklin", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono:    "Space Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:          #1B211C;
    --bg-elevated: #242B24;
    --bg-sunken:   #171C18;
    --ink:         #F0E7DA;
    --ink-soft:    #C7BCA5;
    --forest:      #7C9080;
    --olive:       #A79C78;
    --wine:        #C4636A;
    --wine-ink:    #1B211C;
    --gold:        #D9B78C;
    --line:        rgba(240,231,218,.14);
    --line-strong: rgba(240,231,218,.26);
    --shadow:      rgba(0,0,0,.5);
  }
}
:root[data-theme="dark"]{
  --bg:          #1B211C;
  --bg-elevated: #242B24;
  --bg-sunken:   #171C18;
  --ink:         #F0E7DA;
  --ink-soft:    #C7BCA5;
  --forest:      #7C9080;
  --olive:       #A79C78;
  --wine:        #C4636A;
  --wine-ink:    #1B211C;
  --gold:        #D9B78C;
  --line:        rgba(240,231,218,.14);
  --line-strong: rgba(240,231,218,.26);
  --shadow:      rgba(0,0,0,.5);
}

/* ---------------------------------------------------------------
   Base
--------------------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3{
  font-family:var(--font-display);
  font-weight:600;
  text-wrap:balance;
  margin:0;
  color:var(--ink);
}
p{ margin:0; }
a{ color:inherit; }
img{ max-width:100%; }
::selection{ background:var(--gold); color:var(--forest); }
:focus-visible{ outline:2.5px solid var(--wine); outline-offset:3px; border-radius:2px; }

.eyebrow{
  font-family:var(--font-mono);
  font-size:.72rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--wine);
  display:inline-flex;
  align-items:center;
  gap:.5em;
}
.eyebrow::before{
  content:"";
  width:.5em; height:.5em;
  background:var(--gold);
  border-radius:50%;
  display:inline-block;
}

.wrap{
  max-width:1120px;
  margin-inline:auto;
  padding-inline:clamp(1.25rem, 4vw, 3rem);
}

section{ position:relative; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
}

/* ---------------------------------------------------------------
   Ambient snow (fixed canvas, behind everything)
--------------------------------------------------------------- */
#snow{
  position:fixed; inset:0;
  width:100%; height:100%;
  pointer-events:none;
  z-index:1;
  opacity:.85;
}

/* ---------------------------------------------------------------
   Nav — fixed dark "plank" chrome, same in both themes
--------------------------------------------------------------- */
.nav{
  position:sticky; top:0; z-index:40;
  background:var(--plank);
  border-bottom:1px solid var(--plank-line);
}
.nav-inner{
  max-width:1120px; margin-inline:auto;
  padding:.85rem clamp(1.25rem, 4vw, 3rem);
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem;
}
.brand{
  font-family:var(--font-display);
  font-style:italic;
  font-weight:600;
  font-size:1.25rem;
  color:var(--plank-ink);
  text-decoration:none;
  display:flex; align-items:baseline; gap:.4em;
  white-space:nowrap;
}
.brand small{
  font-family:var(--font-mono);
  font-style:normal;
  font-size:.6rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--gold);
}
.nav-links{
  display:flex; gap:clamp(.9rem,2vw,1.6rem);
  list-style:none; margin:0; padding:0;
  font-size:.88rem;
}
.nav-links a{
  text-decoration:none;
  color:var(--plank-ink);
  opacity:.82;
  padding:.3rem 0;
  border-bottom:1px solid transparent;
  transition:opacity .15s, border-color .15s;
}
.nav-links a:hover, .nav-links a:focus-visible{
  opacity:1;
  border-color:var(--gold);
}
@media (max-width:640px){
  .nav-links{ display:none; }
}

/* ---------------------------------------------------------------
   Hero
--------------------------------------------------------------- */
.hero{
  position:relative; z-index:2;
  padding:clamp(3.5rem,9vw,6.5rem) 0 clamp(2.5rem,6vw,4rem);
}
.hero-inner{ max-width:760px; }
.hero h1{
  font-size:clamp(2.9rem, 4vw + 1.6rem, 5.4rem);
  font-style:italic;
  line-height:.98;
  margin:.5rem 0 1.1rem;
}
.hero h1 em{
  font-style:italic;
  color:var(--wine);
}
.hero-lede{
  font-size:1.15rem;
  color:var(--ink-soft);
  max-width:46ch;
  margin-bottom:2rem;
}
.hero-actions{
  display:flex; flex-wrap:wrap; gap:.9rem;
}
.btn{
  font-family:var(--font-body);
  font-weight:700;
  font-size:.92rem;
  padding:.85rem 1.5rem;
  border-radius:3px;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  gap:.55em;
  border:1.5px solid transparent;
  cursor:pointer;
  transition:transform .15s ease, background .15s ease, color .15s ease, border-color .15s ease;
}
.btn:hover{ transform:translateY(-2px); }
.btn-primary{
  background:var(--wine); color:var(--wine-ink);
}
.btn-primary:hover{ background:var(--forest); }
.btn-outline{
  background:transparent;
  border-color:var(--line-strong);
  color:var(--ink);
}
.btn-outline:hover{ border-color:var(--wine); color:var(--wine); }

/* garland divider */
.garland{
  margin-top:clamp(2.5rem,6vw,4rem);
  height:34px;
}
.garland svg{ display:block; width:100%; height:100%; }

/* ---------------------------------------------------------------
   Section heads
--------------------------------------------------------------- */
.section-head{
  max-width:640px;
  margin-bottom:clamp(2rem,4vw,3rem);
}
.section-head h2{
  font-size:clamp(1.9rem, 1.5vw + 1.4rem, 2.6rem);
  margin-top:.4rem;
}
.section-head p{
  color:var(--ink-soft);
  margin-top:.8rem;
  font-size:1.02rem;
  max-width:56ch;
}

section.band{ padding:clamp(3rem,7vw,5.5rem) 0; }
section.band + section.band{ border-top:1px solid var(--line); }
.band-sunken{ background:var(--bg-sunken); }

/* ---------------------------------------------------------------
   Stände
--------------------------------------------------------------- */
.stands{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1.75rem;
}
@media (max-width:760px){ .stands{ grid-template-columns:1fr; } }

.stand-card{
  background:var(--bg-elevated);
  border:1px solid var(--line);
  border-radius:6px;
  overflow:hidden;
  box-shadow:0 18px 34px -22px var(--shadow);
  display:flex; flex-direction:column;
}
.stand-media{
  background:var(--forest);
  padding:1.6rem 1.6rem 1.2rem;
  color:var(--bg);
  position:relative;
}
.stand-media svg{ width:100%; height:auto; display:block; }
.stand-num{
  position:absolute; top:1.1rem; right:1.3rem;
  font-family:var(--font-mono);
  font-size:.72rem;
  letter-spacing:.1em;
  color:var(--gold);
  opacity:.85;
}
.stand-body{ padding:1.6rem 1.6rem 1.9rem; display:flex; flex-direction:column; gap:.95rem; flex:1; }
.stand-body h3{ font-size:1.4rem; }
.stand-addr{
  font-family:var(--font-mono);
  font-size:.86rem;
  color:var(--ink-soft);
  line-height:1.55;
}
.badge{
  display:inline-flex; align-items:center; gap:.4em;
  font-family:var(--font-mono);
  font-size:.68rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  padding:.32em .7em;
  border-radius:99px;
  width:fit-content;
}
.badge-gold{ background:color-mix(in srgb, var(--gold) 30%, transparent); color:var(--ink); border:1px solid var(--gold); }
.badge-outline{ border:1px dashed var(--line-strong); color:var(--ink-soft); }
.stand-note{ font-size:.9rem; color:var(--ink-soft); }
.stand-foot{
  margin-top:auto;
  display:flex; align-items:center; justify-content:space-between;
  gap:.75rem;
  padding-top:.5rem;
  border-top:1px solid var(--line);
}
.stand-link{
  font-size:.85rem; font-weight:700;
  text-decoration:none;
  color:var(--wine);
  display:inline-flex; align-items:center; gap:.4em;
}
.stand-link:hover{ text-decoration:underline; }
.stand-link.is-disabled{
  color:var(--ink-soft);
  pointer-events:none;
}

/* ---------------------------------------------------------------
   Speisekarte
--------------------------------------------------------------- */
.menu-tabs{
  display:flex; flex-wrap:wrap; gap:.6rem;
  margin-bottom:2rem;
}
.tab{
  font-family:var(--font-mono);
  font-size:.78rem;
  letter-spacing:.03em;
  padding:.55rem 1.05rem;
  border-radius:99px;
  border:1px solid var(--line-strong);
  background:transparent;
  color:var(--ink-soft);
  cursor:pointer;
  transition:all .15s ease;
}
.tab:hover{ border-color:var(--wine); color:var(--wine); }
.tab[aria-pressed="true"]{
  background:var(--wine); border-color:var(--wine); color:var(--wine-ink);
}

.menu-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(260px,1fr));
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
  border-radius:6px;
  overflow:hidden;
}
.menu-item{
  background:var(--bg-elevated);
  padding:1.3rem 1.4rem;
  display:flex; flex-direction:column; gap:.6rem;
}
.menu-item-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:.75rem; }
.menu-item h4{
  font-family:var(--font-display);
  font-weight:600;
  font-size:1.08rem;
  margin:0;
}
.menu-price{
  font-family:var(--font-mono);
  font-variant-numeric:tabular-nums;
  font-size:.95rem;
  color:var(--wine);
  white-space:nowrap;
}
.menu-price.is-pending{
  color:var(--ink-soft);
  font-style:italic;
  font-size:.78rem;
  font-weight:400;
  border:1px dashed var(--line-strong);
  padding:.15em .55em;
  border-radius:99px;
}
.menu-item p{
  font-size:.88rem;
  color:var(--ink-soft);
}
.menu-item .menu-note{
  font-family:var(--font-mono);
  font-size:.72rem;
  color:var(--ink-soft);
  opacity:.75;
}

/* ---------------------------------------------------------------
   Countdown
--------------------------------------------------------------- */
.countdown-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1px;
  background:var(--line-strong);
  border:1px solid var(--line-strong);
  border-radius:6px;
  overflow:hidden;
  max-width:560px;
}
.countdown-cell{
  background:var(--forest);
  color:var(--bg);
  text-align:center;
  padding:1.4rem .5rem 1.1rem;
}
.countdown-num{
  font-family:var(--font-mono);
  font-variant-numeric:tabular-nums;
  font-size:clamp(1.8rem,4vw,2.6rem);
  font-weight:700;
  color:var(--gold);
  line-height:1;
}
.countdown-label{
  font-family:var(--font-mono);
  font-size:.66rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  opacity:.8;
  margin-top:.5rem;
  display:block;
}
.countdown-note{
  margin-top:1rem;
  font-size:.85rem;
  color:var(--ink-soft);
  max-width:46ch;
}
.eyebrow.is-live::before{
  background:var(--wine);
  animation:pulse 1.6s ease-in-out infinite;
}
@keyframes pulse{
  0%,100%{ opacity:1; transform:scale(1); }
  50%{ opacity:.4; transform:scale(1.5); }
}
.countdown-closed{
  background:var(--bg-elevated);
  border:1px dashed var(--line-strong);
  border-radius:6px;
  padding:1.5rem 1.8rem;
  max-width:560px;
  color:var(--ink-soft);
  font-size:.95rem;
}

/* ---------------------------------------------------------------
   Helfer CTA band
--------------------------------------------------------------- */
.helfer-band{
  background:var(--wine);
  color:var(--wine-ink);
}
.helfer-inner{
  display:grid;
  grid-template-columns:1.3fr 1fr;
  gap:2.5rem;
  align-items:center;
}
@media (max-width:760px){ .helfer-inner{ grid-template-columns:1fr; } }
.helfer-band .eyebrow{ color:var(--gold); }
.helfer-band .eyebrow::before{ background:var(--wine-ink); }
.helfer-band h2{ color:var(--wine-ink); }
.helfer-band p{ color:color-mix(in srgb, var(--wine-ink) 82%, transparent); }
.helfer-list{
  list-style:none; margin:1.2rem 0 0; padding:0;
  display:flex; flex-direction:column; gap:.6rem;
  font-size:.92rem;
}
.helfer-list li{ display:flex; gap:.6em; }
.helfer-list svg{ flex:none; margin-top:.2em; }
.helfer-card{
  background:color-mix(in srgb, var(--wine-ink) 10%, transparent);
  border:1px solid color-mix(in srgb, var(--wine-ink) 28%, transparent);
  border-radius:6px;
  padding:1.8rem;
  text-align:center;
}
.helfer-card p{ font-size:.9rem; margin-bottom:1.2rem; }
.helfer-card .btn-primary{
  background:var(--wine-ink); color:var(--wine);
  width:100%; justify-content:center;
}
.helfer-card .btn-primary:hover{ background:var(--gold); color:var(--forest); }

/* ---------------------------------------------------------------
   Footer
--------------------------------------------------------------- */
footer{
  background:var(--plank);
  color:var(--plank-ink);
  padding:clamp(2.5rem,5vw,3.5rem) 0 2rem;
}
.foot-inner{
  display:flex; flex-wrap:wrap;
  gap:2rem;
  justify-content:space-between;
  padding-bottom:1.6rem;
  border-bottom:1px solid var(--plank-line);
}
.foot-brand{ max-width:320px; }
.foot-brand .brand{ margin-bottom:.6rem; }
.foot-brand p{ font-size:.85rem; opacity:.72; }
.foot-links{ display:flex; gap:3rem; flex-wrap:wrap; }
.foot-col h5{
  font-family:var(--font-mono);
  font-size:.68rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--gold);
  margin:0 0 .8rem;
}
.foot-col ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.55rem; }
.foot-col a{ text-decoration:none; font-size:.87rem; opacity:.82; }
.foot-col a:hover{ opacity:1; text-decoration:underline; }
.foot-bottom{
  padding-top:1.4rem;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:.8rem;
  font-size:.78rem; opacity:.6;
  font-family:var(--font-mono);
}

/* ---------------------------------------------------------------
   Floating helper ornament
--------------------------------------------------------------- */
.ornament{
  position:fixed;
  right:clamp(1rem,3vw,2.2rem);
  bottom:clamp(1rem,3vw,2.2rem);
  z-index:50;
  display:flex; flex-direction:column; align-items:center;
  text-decoration:none;
  transform-origin:50% -10px;
  animation:sway 4.5s ease-in-out infinite;
}
@keyframes sway{
  0%,100%{ transform:rotate(-4deg); }
  50%{ transform:rotate(4deg); }
}
.ornament-string{
  width:2px; height:16px;
  background:var(--line-strong);
}
.ornament-ball{
  width:64px; height:64px;
  border-radius:50%;
  background:radial-gradient(circle at 32% 28%, color-mix(in srgb, var(--gold) 60%, var(--wine)), var(--wine) 70%);
  border:2px solid var(--gold);
  box-shadow:0 10px 24px -8px var(--shadow);
  display:flex; align-items:center; justify-content:center;
  color:var(--wine-ink);
  transition:transform .2s ease, box-shadow .2s ease;
}
.ornament-cap{
  width:16px; height:9px;
  background:var(--gold);
  border-radius:3px 3px 0 0;
  margin-bottom:-3px;
}
.ornament:hover .ornament-ball, .ornament:focus-visible .ornament-ball{
  transform:scale(1.08);
  box-shadow:0 14px 30px -8px var(--shadow);
}
.ornament-tip{
  position:absolute;
  right:78px; bottom:14px;
  background:var(--plank);
  color:var(--plank-ink);
  font-family:var(--font-mono);
  font-size:.72rem;
  letter-spacing:.03em;
  padding:.55rem .85rem;
  border-radius:4px;
  white-space:nowrap;
  opacity:0;
  transform:translateX(6px);
  transition:opacity .15s ease, transform .15s ease;
  pointer-events:none;
}
.ornament-tip::after{
  content:"";
  position:absolute; right:-5px; top:50%; translate:0 -50%;
  border:5px solid transparent;
  border-left-color:var(--plank);
}
.ornament:hover .ornament-tip, .ornament:focus-visible .ornament-tip{
  opacity:1; transform:translateX(0);
}
@media (max-width:560px){
  .ornament-tip{ display:none; }
  .ornament-ball{ width:54px; height:54px; }
}