/* ============================================================
   ALPOCCINO – MODERNISIERUNG (gilt für alle Seiten)
   Wird NACH dem Inline-CSS jeder Seite geladen und ergänzt/überschreibt
   es gezielt. Die Farbvariablen aus :root bleiben die zentrale Quelle.
   ============================================================ */
:root{
  /* Dunkleres Gold nur für kleine Schrift: das Marken-Gold (#C9923A) hat
     auf Warmweiß zu wenig Kontrast für Text (WCAG). Linien bleiben hell. */
  --gold-text: #8A5E1E;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --radius: 14px;
  --shadow-soft: 0 10px 30px -12px rgba(69,43,20,0.25);
  --shadow-lift: 0 22px 44px -18px rgba(69,43,20,0.35);
}

/* Lesbarkeit: kleine Gold-Texte in dunklerem Gold */
.kicker, .hero-place, .map-link,
.contact-block h4, .bar-group h4, .menu-num{ color: var(--gold-text); }
.menu-tab{ color: var(--gold-text); border-radius: 999px; }
.menu-tab.is-active{ color: #fff; border-color: var(--gold); }

/* Altes Reveal-Verhalten neutralisieren – modern.js übernimmt */
.reveal.reveal-init{ opacity: 1; transform: none; }

/* ============================================================
   SCROLL-REVEAL (nur aktiv, wenn JS läuft → .fx-ready auf <html>)
   ============================================================ */
.fx-ready .fx{
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .7s var(--ease-out), transform .7s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 70ms);
}
.fx-ready .fx.is-in{ opacity: 1; transform: none; }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn{
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  min-height: 48px;
  padding: .85rem 1.6rem;
  border-radius: 999px;
  font-family: var(--font-kicker);
  font-size: .78rem; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase;
  border: 1px solid var(--dunkelbraun);
  transition: background-color .25s ease, color .25s ease, border-color .25s ease, transform .16s var(--ease-out), box-shadow .25s ease;
  -webkit-tap-highlight-color: transparent;
}
.btn:active{ transform: scale(.97); }
.btn--primary{ background: var(--dunkelbraun); color: var(--warmweiss); }
.btn--ghost{ background: transparent; color: var(--dunkelbraun); }
.btn .btn-arrow{ transition: transform .25s var(--ease-out); }
@media (hover: hover) and (pointer: fine){
  .btn--primary:hover{ background: var(--espresso); box-shadow: var(--shadow-soft); }
  .btn--ghost:hover{ background: var(--dunkelbraun); color: var(--warmweiss); }
  .btn:hover .btn-arrow{ transform: translateX(3px); }
}

/* ============================================================
   HEADER: Fortschrittsbalken, aktiver Link, CTA
   ============================================================ */
.scroll-progress{
  position: absolute; left: 0; bottom: -1px; height: 2px; width: 100%;
  background: linear-gradient(90deg, var(--gold), var(--hellgold));
  transform-origin: 0 50%;
  transform: scaleX(var(--progress, 0));
  pointer-events: none;
}
.nav-links a.is-current{ color: var(--gold-text); border-bottom-color: var(--gold); }
.nav-links a.nav-cta{
  border: 1px solid var(--gold);
  border-radius: 999px;
  padding: .45rem 1rem;
  margin-top: -.5rem;
  color: var(--dunkelbraun);
}
@media (hover: hover) and (pointer: fine){
  .nav-links a.nav-cta:hover{ background: var(--gold); color: #fff; border-color: var(--gold); }
}

/* Mobile-Menü: Hintergrund abdunkeln, echte Bildschirmhöhe, gestaffelte Links */
.nav-backdrop{
  position: fixed; top: 0; left: 0; width: 100vw; height: 100dvh; z-index: -1;
  background: rgba(51,34,15,.35);
  opacity: 0; pointer-events: none;
  transition: opacity .3s ease;
}
/* verhindert seitliches Wegrutschen durch das eingeklappte Menü */
html, body{ overflow-x: clip; }
@media (max-width: 720px){
  .nav-links{
    height: 100dvh; z-index: 2;
    visibility: hidden;
    transition: transform .45s cubic-bezier(0.32, 0.72, 0, 1), visibility 0s linear .45s;
  }
  .nav-toggle-checkbox:checked ~ .nav-links{ visibility: visible; transition-delay: 0s; }
  .nav-toggle{ z-index: 3; }
  .nav-toggle-checkbox:checked ~ .nav-backdrop{ opacity: 1; pointer-events: auto; }
  .nav-links a{ font-size: .95rem; opacity: 0; transform: translateX(12px); transition: opacity .35s var(--ease-out), transform .35s var(--ease-out), color .3s ease; }
  .nav-toggle-checkbox:checked ~ .nav-links a{ opacity: 1; transform: none; }
  .nav-toggle-checkbox:checked ~ .nav-links a:nth-child(2){ transition-delay: 50ms; }
  .nav-toggle-checkbox:checked ~ .nav-links a:nth-child(3){ transition-delay: 100ms; }
  .nav-toggle-checkbox:checked ~ .nav-links a:nth-child(4){ transition-delay: 150ms; }
  .nav-toggle-checkbox:checked ~ .nav-links a:nth-child(5){ transition-delay: 200ms; }
  .nav-links a.nav-cta{ margin-top: .5rem; }
}

/* ============================================================
   HERO (Startseite)
   ============================================================ */
.hero--modern{ position: relative; overflow: hidden; }
.hero--modern::before{
  /* weicher, warmer Lichtschein hinter dem Logo */
  content: ""; position: absolute; z-index: -1;
  width: 70vmax; height: 70vmax; left: -20vmax; top: -25vmax;
  background: radial-gradient(closest-side, rgba(221,180,88,.22), rgba(221,180,88,0));
  animation: glow-drift 18s ease-in-out infinite alternate;
}
@keyframes glow-drift{ to{ transform: translate(8vmax, 6vmax); } }

.hero-actions{
  display: flex; flex-wrap: wrap; justify-content: center; gap: .8rem;
  margin-top: 2rem;
}
.open-status{
  display: inline-flex; align-items: center; gap: .6rem;
  margin-top: 1.6rem;
  padding: .45rem 1rem;
  border-radius: 999px;
  background: rgba(255,255,255,.7);
  border: 1px solid rgba(201,146,58,.35);
  font-family: var(--font-kicker); font-size: .82rem;
  color: var(--espresso);
}
.open-status[hidden]{ display: none; }
.open-dot{ width: 8px; height: 8px; border-radius: 50%; background: #B4473A; position: relative; }
.is-open .open-dot{ background: #3F8A4F; }
.is-open .open-dot::after{
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: inherit; animation: pulse 2s var(--ease-out) infinite;
}
@keyframes pulse{ from{ transform: scale(1); opacity: .7; } to{ transform: scale(3); opacity: 0; } }

/* Bildcollage */
.hero-collage{
  position: relative;
  width: min(100%, 520px);
  aspect-ratio: 1 / 1.05;
  margin: 3rem auto 0;
}
.collage-img{
  position: absolute; margin: 0; overflow: hidden;
  border-radius: var(--radius);
  box-shadow: var(--shadow-lift);
  background: var(--creme);
}
.collage-img img{ width: 100%; height: 100%; object-fit: cover; }
.collage-img--1{ width: 62%; aspect-ratio: 4/5; left: 0; top: 6%; z-index: 2; animation: float-a 9s ease-in-out infinite; }
.collage-img--2{ width: 46%; aspect-ratio: 3/4; right: 0; top: 0; animation: float-b 11s ease-in-out infinite; }
.collage-img--3{ width: 44%; aspect-ratio: 1/1; right: 6%; bottom: 0; z-index: 3; border: 6px solid var(--warmweiss); animation: float-a 10s ease-in-out -3s infinite; }
@keyframes float-a{ 50%{ transform: translateY(-10px); } }
@keyframes float-b{ 50%{ transform: translateY(8px); } }

/* Einlauf-Animation des Hero-Textes (einmalig beim Laden) */
.hero-intro > *{ animation: rise .9s var(--ease-out) both; }
.hero-intro > *:nth-child(2){ animation-delay: 80ms; }
.hero-intro > *:nth-child(3){ animation-delay: 160ms; }
.hero-intro > *:nth-child(4){ animation-delay: 240ms; }
.hero-intro > *:nth-child(5){ animation-delay: 320ms; }
.hero-intro > *:nth-child(6){ animation-delay: 400ms; }
.hero-intro > *:nth-child(7){ animation-delay: 480ms; }
.hero-collage{ animation: rise-soft 1.1s var(--ease-out) .25s both; }
@keyframes rise{ from{ opacity: 0; transform: translateY(14px); } }
@keyframes rise-soft{ from{ opacity: 0; transform: translateY(24px) scale(.97); } }

.scroll-cue{
  display: none;
  position: absolute; left: 50%; bottom: 1.5rem;
  width: 26px; height: 42px; margin-left: -13px;
  border: 1px solid rgba(69,43,20,.4); border-radius: 13px;
}
.scroll-cue::after{
  content: ""; position: absolute; left: 50%; top: 8px;
  width: 3px; height: 8px; margin-left: -1.5px; border-radius: 2px;
  background: var(--gold);
  animation: cue 1.8s var(--ease-out) infinite;
}
@keyframes cue{ from{ transform: translateY(0); opacity: 1; } to{ transform: translateY(14px); opacity: 0; } }

@media (min-width: 900px){
  .hero--modern{ min-height: 100svh; display: flex; align-items: center; padding-bottom: 5rem; }
  .hero--modern .hero-grid{ grid-template-columns: 1.05fr .95fr; gap: 4rem; text-align: left; justify-items: stretch; width: 100%; }
  .hero--modern .hero-tagline{ margin-inline: 0; }
  .hero--modern .hero-logo-img{ margin-left: -8px; }
  .hero-actions{ justify-content: flex-start; }
  .hero-collage{ margin: 0; justify-self: end; }
  .scroll-cue{ display: block; }
}

/* ============================================================
   ALPIN-TRENNER: Linie zeichnet sich beim Scrollen
   ============================================================ */
.fx-ready .alpine-divider path,
.fx-ready .alpine-divider line{
  stroke-dasharray: 260; stroke-dashoffset: 260;
  transition: stroke-dashoffset 1.6s var(--ease-in-out);
}
.fx-ready .alpine-divider.is-in path,
.fx-ready .alpine-divider.is-in line{ stroke-dashoffset: 0; }
.fx-ready .alpine-divider.is-in path{ transition-delay: .5s; }

/* ============================================================
   LAUFBAND (Marquee)
   ============================================================ */
.marquee{
  overflow: hidden;
  border-block: 1px solid rgba(201,146,58,.3);
  padding: 1.1rem 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.marquee-track{
  display: flex; width: max-content;
  animation: marquee 45s linear infinite;
}
.marquee:hover .marquee-track{ animation-play-state: paused; }
.marquee-track span{
  font-family: var(--font-display); font-style: italic;
  font-size: clamp(1.3rem, 2.6vw, 1.9rem);
  color: var(--dunkelbraun);
  padding-right: 2.2rem;
  white-space: nowrap;
}
.marquee-track span::after{ content: "✦"; font-style: normal; font-size: .6em; color: var(--gold); padding-left: 2.2rem; vertical-align: middle; }
@keyframes marquee{ to{ transform: translateX(-50%); } }

/* ============================================================
   KARTEN-KACHELN (Startseite, ersetzt die drei Tabs)
   ============================================================ */
.menu-cards{
  display: grid; gap: 1.2rem;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 2.6rem;
}
.menu-card{
  position: relative; display: flex; flex-direction: column;
  padding: 2rem 1.8rem 1.8rem;
  background: var(--warmweiss);
  border: 1px solid rgba(201,146,58,.3);
  border-radius: var(--radius);
  transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out), border-color .35s ease;
}
.menu-card-icon{ width: 44px; height: 44px; color: var(--gold); }
.menu-card h3{ font-family: var(--font-display); font-size: 1.8rem; color: var(--dunkelbraun); margin-top: 1.2rem; }
.menu-card p{ margin-top: .5rem; font-size: .95rem; opacity: .8; }
.menu-card-more{
  margin-top: auto; padding-top: 1.4rem;
  font-family: var(--font-kicker); font-size: .75rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--gold-text); display: inline-flex; gap: .5rem; align-items: center;
}
.menu-card-more span{ transition: transform .3s var(--ease-out); }
.menu-card--today{ background: var(--dunkelbraun); color: var(--warmweiss); border-color: var(--dunkelbraun); }
.menu-card--today h3{ color: var(--warmweiss); }
.menu-card--today .menu-card-icon, .menu-card--today .menu-card-more{ color: var(--hellgold); }
.today-dish{
  margin-top: 1rem; padding: .9rem 1rem; border-radius: 10px;
  background: rgba(255,255,255,.08); border: 1px solid rgba(221,180,88,.35);
  font-size: .92rem;
}
.today-dish[hidden]{ display: none; }
.today-dish strong{ display: block; font-family: var(--font-kicker); font-weight: 500; font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; color: var(--hellgold); margin-bottom: .25rem; }
@media (hover: hover) and (pointer: fine){
  .menu-card:hover{ transform: translateY(-4px); box-shadow: var(--shadow-lift); border-color: var(--gold); }
  .menu-card:hover .menu-card-more span{ transform: translateX(4px); }
}
@media (max-width: 900px){ .menu-cards{ grid-template-columns: 1fr; } }

/* ============================================================
   GALERIE: runde Ecken, Hover-Zoom, Lightbox
   ============================================================ */
.gallery-grid .img-placeholder{ border-radius: var(--radius); cursor: zoom-in; }
.gallery-grid .img-placeholder img{ transition: transform .8s var(--ease-out); }
@media (hover: hover) and (pointer: fine){
  .gallery-grid .img-placeholder:hover img{ transform: scale(1.05); }
}
.lightbox{
  border: none; padding: 0; background: transparent;
  max-width: min(92vw, 1100px); max-height: 90vh;
}
.lightbox::backdrop{ background: rgba(33,22,10,.82); }
.lightbox img{ max-height: 86vh; width: auto; border-radius: var(--radius); }
.lightbox[open]{ animation: lb-in .3s var(--ease-out); }
.lightbox[open]::backdrop{ animation: fade-in .3s ease; }
@keyframes lb-in{ from{ opacity: 0; transform: scale(.96); } }
@keyframes fade-in{ from{ opacity: 0; } }
.lightbox-close{
  position: fixed; top: 1rem; right: 1rem;
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.4); background: rgba(0,0,0,.3);
  color: #fff; font-size: 1.4rem; cursor: pointer;
}

/* ============================================================
   KONTAKT: Öffnungszeiten-Liste, Aktions-Buttons, Karte
   ============================================================ */
.hours-list li{
  display: flex; justify-content: space-between; gap: 1rem;
  padding: .45rem .7rem; margin-inline: -.7rem;
  border-radius: 8px; font-size: .98rem;
}
.hours-list li.is-today{ background: rgba(201,146,58,.16); font-weight: 500; }
.hours-list li.is-today::after{ content: none; }
.contact-actions{ display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 2rem; }
.map-visual{ border-radius: var(--radius); }

/* ============================================================
   UNTERSEITEN DER KARTE: Kategorie-Chips (sticky), Heute-Markierung
   ============================================================ */
.cat-nav{
  position: sticky; top: 72px; z-index: 50;
  margin: -1.5rem calc(var(--gutter) * -1) 2.5rem;
  padding: .7rem var(--gutter);
  background: rgba(243,230,213,.92);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(201,146,58,.25);
}
.cat-nav-track{
  display: flex; gap: .5rem; overflow-x: auto;
  scrollbar-width: none; scroll-snap-type: x proximity;
  overscroll-behavior-x: contain;
}
.cat-nav-track::-webkit-scrollbar{ display: none; }
.cat-nav a{
  flex: none; scroll-snap-align: start;
  padding: .5rem 1rem; border-radius: 999px;
  border: 1px solid rgba(201,146,58,.45);
  font-family: var(--font-kicker); font-size: .78rem; letter-spacing: .06em;
  color: var(--espresso); background: var(--warmweiss);
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
  white-space: nowrap;
}
.cat-nav a.is-current{ background: var(--dunkelbraun); border-color: var(--dunkelbraun); color: var(--warmweiss); }
.menu-category{ scroll-margin-top: 140px; }

.menu-item{ transition: background-color .25s ease; border-radius: 6px; }
.menu-category.is-today{
  background: var(--warmweiss);
  border: 1px solid var(--gold);
  border-radius: var(--radius);
  padding: 1.2rem 1.4rem .4rem;
  box-shadow: var(--shadow-soft);
}
.today-badge{
  display: inline-block; vertical-align: middle; margin-left: .7rem;
  padding: .2rem .7rem; border-radius: 999px;
  background: var(--dunkelbraun); color: var(--warmweiss);
  font-family: var(--font-kicker); font-style: normal; font-size: .68rem; letter-spacing: .16em; text-transform: uppercase;
}

/* ============================================================
   NACH-OBEN-BUTTON & MOBILE AKTIONSLEISTE
   ============================================================ */
.to-top{
  position: fixed; right: 1.2rem; bottom: 1.2rem; z-index: 90;
  width: 48px; height: 48px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--dunkelbraun); color: var(--warmweiss);
  border: none; cursor: pointer; box-shadow: var(--shadow-soft);
  opacity: 0; transform: translateY(12px) scale(.95); pointer-events: none;
  transition: opacity .25s var(--ease-out), transform .25s var(--ease-out);
}
.to-top.is-visible{ opacity: 1; transform: none; pointer-events: auto; }

.action-bar{ display: none; }
@media (max-width: 720px){
  .action-bar{
    display: grid; grid-template-columns: repeat(3, 1fr);
    position: fixed; left: .75rem; right: .75rem; z-index: 90;
    bottom: calc(.75rem + env(safe-area-inset-bottom));
    background: rgba(69,43,20,.94);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    border-radius: 999px; box-shadow: var(--shadow-lift);
    transform: translateY(calc(100% + 2rem));
    transition: transform .4s var(--ease-out);
  }
  .action-bar.is-visible{ transform: none; }
  .nav-open .action-bar, .nav-open .to-top{ transform: translateY(calc(100% + 2rem)); opacity: 0; pointer-events: none; }
  .action-bar a{
    display: flex; flex-direction: column; align-items: center; gap: .2rem;
    padding: .65rem 0 .55rem; color: var(--warmweiss);
    font-family: var(--font-kicker); font-size: .66rem; letter-spacing: .12em; text-transform: uppercase;
    -webkit-tap-highlight-color: transparent;
  }
  .action-bar a:active{ opacity: .7; }
  .action-bar svg{ width: 20px; height: 20px; color: var(--hellgold); }
  .has-action-bar .site-footer{ padding-bottom: 6.5rem; }
  .has-action-bar .to-top{ bottom: calc(5.4rem + env(safe-area-inset-bottom)); }
}

/* ============================================================
   REDUZIERTE BEWEGUNG: weniger & sanfter, nicht null
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  .fx-ready .fx{ transform: none; }
  .hero--modern::before, .collage-img, .open-dot::after, .scroll-cue::after{ animation: none !important; }
  .marquee-track{ animation: none; flex-wrap: wrap; justify-content: center; width: auto; }
  .marquee-track span[aria-hidden]{ display: none; }
  .fx-ready .alpine-divider path, .fx-ready .alpine-divider line{ stroke-dashoffset: 0; }
}

/* ============================================================
   ARTIKEL & PREISE: Produktname im Vordergrund (kräftig, dunkelbraun),
   Preis klar lesbar, aber zurückhaltender (normale Stärke).
   ============================================================ */
.menu-name, .bar-row-name{
  font-weight: 500;
  color: var(--dunkelbraun);
}
.menu-name{ font-size: 1.05rem; }
.menu-price, .bar-price{
  font-family: var(--font-body);
  font-style: normal;
  font-weight: 400;
  font-size: .95rem;
  color: var(--espresso);
  font-variant-numeric: tabular-nums;
  letter-spacing: .01em;
}
.bar-price--sub{ font-size: .85rem; opacity: .75; }

/* Tagesgerichte in der Mittagsmenü-Kachel (Menü 1 + Menü 2 vegetarisch) */
.today-dish{ padding: 1rem 1.1rem; }
.today-dish ul{ margin: .2rem 0 0; padding: 0; list-style: none; }
.td-item{
  display: grid; grid-template-columns: 1fr auto; column-gap: 1rem; row-gap: .4rem;
  grid-template-areas: "tags tags" "name price" "note note";
  align-items: baseline;
  padding: .85rem 0;
}
.td-item + .td-item{ border-top: 1px solid rgba(221,180,88,.22); }
.td-item:last-child{ padding-bottom: .1rem; }
.td-tags{ grid-area: tags; display: flex; flex-wrap: wrap; gap: .35rem; }
.td-tag{
  display: inline-block; padding: .12rem .55rem; border-radius: 999px;
  font-family: var(--font-kicker); font-size: .64rem; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; line-height: 1.6;
  color: var(--hellgold); border: 1px solid rgba(221,180,88,.45);
}
.td-tag--veg{ color: #B9D6A4; border-color: rgba(185,214,164,.5); }
.td-name{ grid-area: name; min-width: 0; font-size: 1rem; font-weight: 500; line-height: 1.35; color: var(--warmweiss); }
.td-note{ grid-area: note; margin-top: -.1rem; font-size: .8rem; font-style: italic; opacity: .7; }
.td-price{
  grid-area: price; white-space: nowrap;
  font-size: .95rem; font-variant-numeric: tabular-nums; color: var(--warmweiss); opacity: .9;
}
.td-item.is-other-day .td-name, .td-item.is-other-day .td-price{ opacity: .7; }

/* Hinweise aus der Google Tabelle (Mittagsmenü / Öffnungszeiten) */
.lunch-note{ text-align: center; font-family: var(--font-kicker); font-size: .95rem; color: var(--dunkelbraun, #452B14); max-width: 34rem; margin: 0 auto 1.5rem; font-weight: 500; }
.lunch-note[hidden], .hours-note[hidden]{ display: none; }
.hours-note{ margin: .8rem 0 0; font-size: .85rem; font-style: italic; opacity: .85; }
.menu-section [data-lunch-days]{ transition: opacity .25s ease; }

/* Speise- und Getränkekarte aus der Google Tabelle: kurz ausblenden, bis geladen */
.menu-section .container > .menu-category{ transition: opacity .25s ease; }
.is-loading-karte > .menu-category{ opacity: 0; }