/* ==========================================================================
   Gasthof Bären Leuzigen – Theme
   Built on Bootstrap 5.3
   ========================================================================== */

:root {
  --b-cream: #f8f4ec;
  --b-paper: #fffdf8;
  --b-ink: #1f1b17;
  --b-ink-soft: #5b534a;
  --b-wood: #2a211b;
  --b-wood-2: #3a2e25;
  --b-brass: #b8863b;
  --b-brass-dark: #94692a;
  --b-chili: #a8321f;
  --b-line: #e6dccb;
  --b-radius: 14px;
  --b-shadow: 0 12px 32px rgba(42, 33, 27, .10);
  --b-font-head: "Playfair Display", Georgia, serif;
  --b-font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --b-nav-h: 84px;

  --bs-body-font-family: var(--b-font-body);
  --bs-body-color: var(--b-ink);
  --bs-body-bg: var(--b-cream);
  --bs-link-color: var(--b-brass-dark);
  --bs-link-hover-color: var(--b-chili);
}

html { scroll-behavior: smooth; }
/* Keep large Bootstrap gutters from overflowing the viewport on phones */
@media (max-width: 575.98px) { .g-5, .gx-5 { --bs-gutter-x: 1.5rem; } }
body { background: var(--b-cream); color: var(--b-ink); line-height: 1.7; }

h1, h2, h3, h4, .font-head { font-family: var(--b-font-head); font-weight: 600; letter-spacing: -.01em; }
.text-brass { color: var(--b-brass) !important; }
.text-soft { color: var(--b-ink-soft) !important; }
.bg-paper { background: var(--b-paper); }
.bg-wood { background: var(--b-wood); color: #f1e9dc; }

.eyebrow {
  display: inline-flex; align-items: center; gap: .6rem;
  font-size: .78rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
  color: var(--b-brass);
}
.eyebrow::before { content: ""; width: 28px; height: 1px; background: currentColor; }
.section { padding: 6rem 0; }
.section-sm { padding: 4rem 0; }
.section-title { font-size: clamp(1.9rem, 3.5vw, 2.8rem); margin: .6rem 0 1rem; }
.lead-soft { font-size: 1.1rem; color: var(--b-ink-soft); }

/* Buttons ---------------------------------------------------------------- */
.btn { border-radius: 999px; padding: .75rem 1.6rem; font-weight: 600; letter-spacing: .02em; }
.btn-brass { background: var(--b-brass); border-color: var(--b-brass); color: #fff; }
.btn-brass:hover, .btn-brass:focus { background: var(--b-brass-dark); border-color: var(--b-brass-dark); color: #fff; }
.btn-outline-light:hover { color: var(--b-ink); }
.btn-outline-ink { border: 1px solid var(--b-ink); color: var(--b-ink); }
.btn-outline-ink:hover { background: var(--b-ink); color: #fff; }

/* Top bar & Navbar --------------------------------------------------------- */
.topbar { background: var(--b-wood); color: #d8cdbd; font-size: .85rem; }
.topbar a { color: #d8cdbd; text-decoration: none; }
.topbar a:hover { color: #fff; }

.site-nav {
  background: rgba(255, 253, 248, .96);
  backdrop-filter: blur(8px);
  box-shadow: 0 1px 0 var(--b-line);
  transition: box-shadow .3s ease, padding .3s ease;
  padding: .6rem 0;
}
.site-nav.scrolled { box-shadow: 0 6px 24px rgba(42, 33, 27, .08); padding: .3rem 0; }
.site-nav .navbar-brand img { height: 58px; width: auto; transition: height .3s ease; }
.site-nav.scrolled .navbar-brand img { height: 46px; }
.site-nav .nav-link {
  font-weight: 500; color: var(--b-ink); padding: .5rem .9rem !important; position: relative;
}
.site-nav .nav-link::after {
  content: ""; position: absolute; left: .9rem; right: .9rem; bottom: .25rem; height: 2px;
  background: var(--b-brass); transform: scaleX(0); transform-origin: left; transition: transform .25s ease;
}
.site-nav .nav-link:hover::after, .site-nav .nav-link.active::after { transform: scaleX(1); }
.site-nav .nav-link.active, .site-nav .nav-link:hover { color: var(--b-ink); }
.site-nav .dropdown-menu {
  border: 0; border-radius: var(--b-radius); box-shadow: var(--b-shadow); padding: .6rem; min-width: 250px;
}
.site-nav .dropdown-item { border-radius: 8px; padding: .5rem .8rem; font-weight: 500; }
.site-nav .dropdown-item.active, .site-nav .dropdown-item:active { background: var(--b-brass); }
.site-nav .dropdown-item:hover { background: var(--b-cream); }
.site-nav .dropdown-item.active:hover { background: var(--b-brass-dark); color: #fff; }
.navbar-toggler { border: 0; box-shadow: none !important; }

@media (min-width: 1200px) {
  .site-nav .dropdown:hover > .dropdown-menu { display: block; margin-top: 0; }
}
@media (max-width: 1199.98px) {
  .site-nav .navbar-collapse { padding: 1rem 0; }
  .site-nav .nav-link::after { display: none; }
  .site-nav .dropdown-menu { box-shadow: none; background: var(--b-cream); }
}

/* Hero --------------------------------------------------------------------- */
.hero {
  position: relative; min-height: calc(100vh - var(--b-nav-h)); display: flex; align-items: center;
  color: #fff; background: var(--b-wood) center/cover no-repeat;
}
.hero::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(31, 27, 23, .82) 0%, rgba(31, 27, 23, .55) 55%, rgba(31, 27, 23, .2) 100%);
}
.hero > .container { position: relative; z-index: 1; }
.hero h1 { font-size: clamp(2.6rem, 6vw, 4.6rem); line-height: 1.08; margin: 1rem 0 1.25rem; }
.hero h1 em { font-style: italic; color: #e6c48a; }
.hero p { font-size: 1.15rem; max-width: 560px; color: #eee5d7; }
.hero .eyebrow { color: #e6c48a; }
.hero-badges { display: flex; flex-wrap: wrap; gap: 1.5rem; margin-top: 2.5rem; color: #eee5d7; font-size: .95rem; }
.hero-badges i { color: #e6c48a; margin-right: .4rem; }

.page-hero {
  position: relative; padding: 7rem 0 5rem; color: #fff; text-align: center;
  background: var(--b-wood) center/cover no-repeat;
}
.page-hero::before { content: ""; position: absolute; inset: 0; background: rgba(31, 27, 23, .62); }
.page-hero > .container { position: relative; }
.page-hero h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); margin: .5rem 0 .75rem; }
.page-hero p { color: #eee5d7; max-width: 640px; margin: 0 auto; font-size: 1.1rem; }
.page-hero .eyebrow { color: #e6c48a; }
.page-hero .breadcrumb { justify-content: center; margin: 1.25rem 0 0; font-size: .9rem; }
.page-hero .breadcrumb a { color: #e6c48a; text-decoration: none; }
.page-hero .breadcrumb-item.active, .page-hero .breadcrumb-item + .breadcrumb-item::before { color: #d8cdbd; }

/* Images & cards ----------------------------------------------------------- */
.img-frame { position: relative; border-radius: var(--b-radius); overflow: hidden; box-shadow: var(--b-shadow); }
.img-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.img-stack { position: relative; padding: 0 0 3rem 3rem; }
.img-stack .img-frame.small {
  position: absolute; left: 0; bottom: 0; width: 46%; border: 6px solid var(--b-cream);
}
.feature { display: flex; gap: 1rem; align-items: flex-start; }
.feature-icon {
  flex: 0 0 52px; height: 52px; border-radius: 50%; display: grid; place-items: center;
  background: #f0e4cf; color: var(--b-brass-dark); font-size: 1.35rem;
}
.feature h3 { font-size: 1.15rem; margin-bottom: .2rem; }
.feature p { margin: 0; color: var(--b-ink-soft); font-size: .95rem; }

.menu-card {
  display: block; height: 100%; background: var(--b-paper); border-radius: var(--b-radius);
  overflow: hidden; box-shadow: var(--b-shadow); color: inherit; text-decoration: none;
  transition: transform .3s ease, box-shadow .3s ease;
}
.menu-card:hover { transform: translateY(-6px); box-shadow: 0 20px 40px rgba(42, 33, 27, .16); color: inherit; }
.menu-card .thumb { aspect-ratio: 4 / 3; overflow: hidden; }
.menu-card .thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.menu-card:hover .thumb img { transform: scale(1.06); }
.menu-card .body { padding: 1.5rem 1.6rem 1.7rem; }
.menu-card h3 { font-size: 1.35rem; margin-bottom: .4rem; }
.menu-card p { color: var(--b-ink-soft); font-size: .95rem; margin-bottom: 1rem; }
.menu-card .more { font-weight: 600; color: var(--b-brass-dark); font-size: .9rem; }
.menu-card .more i { transition: transform .25s ease; display: inline-block; }
.menu-card:hover .more i { transform: translateX(4px); }

/* Parallax banner ---------------------------------------------------------- */
.banner {
  position: relative; padding: 7rem 0; color: #fff; text-align: center;
  background: var(--b-wood) center/cover no-repeat fixed;
}
.banner::before { content: ""; position: absolute; inset: 0; background: rgba(31, 27, 23, .66); }
.banner > .container { position: relative; }
.banner h2 { font-size: clamp(1.8rem, 4vw, 2.8rem); max-width: 820px; margin: 0 auto 1.5rem; }
@media (max-width: 991.98px) { .banner { background-attachment: scroll; } }

/* Menu lists --------------------------------------------------------------- */
.menu-sheet {
  background: var(--b-paper); border-radius: var(--b-radius); box-shadow: var(--b-shadow);
  padding: clamp(1.5rem, 4vw, 3.5rem);
}
.menu-group + .menu-group { margin-top: 2.75rem; }
.menu-group-title {
  font-family: var(--b-font-head); font-size: 1.5rem; color: var(--b-brass-dark);
  display: flex; align-items: center; gap: 1rem; margin-bottom: 1.25rem;
}
.menu-group-title::after { content: ""; flex: 1; height: 1px; background: var(--b-line); }
.menu-item { padding: .9rem 0; border-bottom: 1px dashed var(--b-line); }
.menu-item:last-child { border-bottom: 0; }
.menu-item-head { display: flex; align-items: baseline; gap: .75rem; }
.menu-item-name { font-weight: 600; font-size: 1.05rem; }
.menu-item-dots { flex: 1; border-bottom: 2px dotted #cdbfa8; transform: translateY(-4px); min-width: 20px; }
.menu-item-price { font-weight: 700; color: var(--b-ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
.menu-item-desc { color: var(--b-ink-soft); font-size: .95rem; margin-top: .15rem; padding-right: 5rem; }
.menu-note {
  margin-top: 2rem; padding: 1.1rem 1.4rem; border-radius: 10px; background: #f3ead9;
  color: var(--b-ink-soft); font-size: .95rem;
}
.menu-note i { color: var(--b-brass-dark); margin-right: .4rem; }
@media (max-width: 575.98px) { .menu-item-desc { padding-right: 0; } }

.menu-side { position: sticky; top: calc(var(--b-nav-h) + 1.5rem); }
.menu-side .list-group-item {
  border: 0; border-radius: 10px !important; margin-bottom: .25rem; background: transparent;
  font-weight: 500; color: var(--b-ink); padding: .7rem 1rem;
}
.menu-side .list-group-item:hover { background: var(--b-paper); }
.menu-side .list-group-item.active { background: var(--b-wood); color: #fff; }
.menu-side .list-group-item i { color: var(--b-brass); margin-right: .55rem; }
.menu-side .list-group-item.active i { color: #e6c48a; }

/* Daily menu ----------------------------------------------------------------- */
.day-card {
  height: 100%; background: var(--b-paper); border-radius: var(--b-radius); padding: 1.6rem;
  box-shadow: var(--b-shadow); border-top: 4px solid var(--b-line); position: relative;
  transition: transform .3s ease;
}
.day-card .day { font-family: var(--b-font-head); font-size: 1.35rem; margin: 0; }
.day-card .date { color: var(--b-ink-soft); font-size: .9rem; }
.day-card .starter { font-size: .85rem; letter-spacing: .08em; text-transform: uppercase; color: var(--b-brass-dark); margin: 1rem 0 .35rem; }
.day-card .main { font-weight: 600; font-size: 1.1rem; margin: 0; }
.day-card .side { color: var(--b-ink-soft); margin: 0; }
.day-card.today { border-top-color: var(--b-brass); transform: translateY(-4px); }
.day-card .today-badge { display: none; position: absolute; top: 1.2rem; right: 1.2rem; }
.day-card.today .today-badge { display: inline-block; }
.price-pill {
  display: inline-block; background: var(--b-wood); color: #fff; border-radius: 999px;
  padding: .45rem 1.1rem; font-weight: 600;
}
.week-hit {
  background: var(--b-wood); color: #f1e9dc; border-radius: var(--b-radius); padding: clamp(1.6rem, 4vw, 3rem);
  position: relative; overflow: hidden;
}
.week-hit::after {
  content: "\F586"; font-family: "bootstrap-icons"; position: absolute; right: -10px; bottom: -40px;
  font-size: 11rem; color: rgba(255, 255, 255, .05);
}
.week-hit h3 { color: #fff; font-size: 2rem; }
.week-hit .price-pill { background: var(--b-brass); }

/* Info / contact ----------------------------------------------------------- */
.info-card {
  height: 100%; background: var(--b-paper); border-radius: var(--b-radius); padding: 2rem; box-shadow: var(--b-shadow);
}
.info-card h3 { font-size: 1.3rem; margin-bottom: 1rem; }
.info-list { list-style: none; padding: 0; margin: 0; }
.info-list li { display: flex; gap: .85rem; padding: .45rem 0; }
.info-list i { color: var(--b-brass); font-size: 1.1rem; margin-top: .15rem; }
.info-list a { color: var(--b-ink); text-decoration: none; }
.info-list a:hover { color: var(--b-brass-dark); }
.hours { width: 100%; }
.hours td { padding: .55rem 0; border-bottom: 1px dashed var(--b-line); }
.hours tr:last-child td { border-bottom: 0; }
.hours td:last-child { text-align: right; font-weight: 600; }
.hours tr.closed-early td:last-child { color: var(--b-chili); }
.map-frame { border: 0; width: 100%; height: 100%; min-height: 360px; border-radius: var(--b-radius); box-shadow: var(--b-shadow); }

.form-control, .form-select {
  border-radius: 10px; border-color: var(--b-line); padding: .8rem 1rem; background-color: #fff;
}
.form-control:focus, .form-select:focus { border-color: var(--b-brass); box-shadow: 0 0 0 .2rem rgba(184, 134, 59, .18); }
.form-label { font-weight: 500; font-size: .92rem; }

/* People ------------------------------------------------------------------- */
.person { text-align: center; }
.person .img-frame { aspect-ratio: 2 / 3; margin-bottom: 1.25rem; }
.person h3 { font-size: 1.4rem; margin-bottom: .1rem; }
.person p { color: var(--b-ink-soft); margin: 0; }

/* Events ------------------------------------------------------------------- */
.event-card {
  background: var(--b-paper); border-radius: var(--b-radius); box-shadow: var(--b-shadow); overflow: hidden; height: 100%;
}
.event-card .poster { display: block; background: #eee3d0; cursor: zoom-in; }
.event-card .poster img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: top; display: block; }
.event-card .body { padding: 2rem; }
.event-date {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  width: 74px; height: 74px; border-radius: 12px; background: var(--b-chili); color: #fff; line-height: 1.05;
}
.event-date strong { font-size: 1.6rem; font-family: var(--b-font-head); }
.event-date span { font-size: .75rem; text-transform: uppercase; letter-spacing: .1em; }
.event-meta { list-style: none; padding: 0; margin: 1rem 0 1.5rem; color: var(--b-ink-soft); }
.event-meta li { padding: .2rem 0; }
.event-meta i { color: var(--b-brass); margin-right: .5rem; }

/* CTA strip ---------------------------------------------------------------- */
.cta-strip { background: var(--b-brass); color: #fff; padding: 3rem 0; }
.cta-strip h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); margin: 0; }
.cta-strip .btn-light { color: var(--b-ink); }

/* Footer ------------------------------------------------------------------- */
.site-footer { background: var(--b-wood); color: #cbbfae; padding: 5rem 0 0; font-size: .95rem; }
.site-footer h4 { color: #fff; font-size: 1.15rem; margin-bottom: 1.25rem; }
.site-footer a { color: #cbbfae; text-decoration: none; }
.site-footer a:hover { color: #e6c48a; }
.site-footer .logo { height: 84px; width: auto; background: var(--b-cream); padding: .5rem .9rem; border-radius: 12px; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer ul li { padding: .3rem 0; }
.site-footer .info-list i { color: #e6c48a; }
.site-footer .info-list a { color: #cbbfae; }
.footer-bottom { border-top: 1px solid rgba(255, 255, 255, .08); margin-top: 4rem; padding: 1.5rem 0; font-size: .85rem; }

.back-to-top {
  position: fixed; right: 1.25rem; bottom: 1.25rem; width: 46px; height: 46px; border-radius: 50%;
  background: var(--b-brass); color: #fff; display: grid; place-items: center; border: 0;
  box-shadow: var(--b-shadow); opacity: 0; visibility: hidden; transition: all .3s ease; z-index: 1030;
}
.back-to-top.show { opacity: 1; visibility: visible; }
.back-to-top:hover { background: var(--b-brass-dark); }

/* Reveal on scroll --------------------------------------------------------- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .8s ease, transform .8s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}