:root{--cream:#f3eadc;--paper:#fbf7f0;--ink:#18120d;--brown:#6f2e2a;--rust:#a95236;--gold:#c49a62;--muted:#6f675f;--line:rgba(24,18,13,.14)}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:'DM Sans',sans-serif;overflow-x:hidden}a{text-decoration:none;color:inherit}img{width:100%;height:100%;object-fit:cover;display:block}.topbar{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;justify-content:space-between;padding:20px 4vw;color:#fff;transition:.3s;background:linear-gradient(to bottom,rgba(18,10,7,.78),transparent)}.topbar.scrolled{background:rgba(24,18,13,.94);backdrop-filter:blur(16px);padding-top:12px;padding-bottom:12px;border-bottom:1px solid rgba(255,255,255,.12)}.brand{display:flex;flex-direction:column;line-height:.9}.brand-main{font-weight:700;font-size:25px;letter-spacing:.02em}.brand-sub{font-size:9px;letter-spacing:.22em;margin-top:7px}.nav{display:flex;gap:24px;align-items:center;font-size:12px;text-transform:uppercase;letter-spacing:.12em}.nav-cta{border:1px solid rgba(255,255,255,.5);padding:12px 18px}.menu-btn{display:none;background:none;border:1px solid rgba(255,255,255,.4);color:white;padding:10px 14px}.hero{min-height:100vh;position:relative;display:flex;align-items:flex-end;color:#fff;overflow:hidden}.hero-image{position:absolute;inset:0;background:url('https://img2.oastatic.com/img2/72523148/600x300r/variant.jpg') center/cover no-repeat;transform:scale(1.05)}.hero-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(20,12,8,.88) 0%,rgba(20,12,8,.45) 47%,rgba(20,12,8,.18) 100%),linear-gradient(to top,rgba(18,10,7,.95),transparent 55%)}.hero-content{position:relative;z-index:2;padding:180px 6vw 130px;max-width:850px}.eyebrow{font-size:11px;letter-spacing:.24em;font-weight:700;text-transform:uppercase;color:#e7c39b}.eyebrow.dark{color:var(--rust)}h1,h2,h3{font-family:'Playfair Display',serif}h1{font-size:clamp(62px,9vw,126px);line-height:.88;margin:18px 0 24px;font-weight:500;letter-spacing:-.045em}h1 em{font-weight:500;color:#f1c89e}.hero-copy{max-width:650px;font-size:19px;line-height:1.7;color:#f3ede7}.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 22px;border:1px solid transparent;font-size:12px;text-transform:uppercase;letter-spacing:.12em;font-weight:700}.btn-primary{background:#fff;color:var(--ink)}.btn-ghost{border-color:rgba(255,255,255,.55);color:#fff}.hero-info{position:absolute;right:4vw;bottom:30px;z-index:3;display:flex;background:rgba(24,18,13,.82);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.14)}.hero-info div{padding:18px 22px;border-right:1px solid rgba(255,255,255,.12)}.hero-info div:last-child{border-right:0}.hero-info span{display:block;font-size:9px;text-transform:uppercase;letter-spacing:.16em;color:#d6c5b4}.hero-info strong{font-size:13px}.section{padding:100px 6vw}.intro{display:grid;grid-template-columns:1fr 1.1fr;gap:80px}.intro h2,.split h2,.gallery h2,.hours h2,.contact h2{font-size:clamp(46px,6.4vw,88px);line-height:.95;margin:14px 0 0;font-weight:500;letter-spacing:-.04em}.lead{font-family:'Playfair Display',serif;font-size:30px;line-height:1.4;margin-top:0}.intro-right p:not(.lead),.split-copy p,.contact-main p{color:var(--muted);font-size:17px;line-height:1.75}.feature-grid{padding-top:10px;display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.feature-card{background:var(--cream);padding:34px;border-top:3px solid var(--rust);min-height:250px}.feature-number{font-size:11px;letter-spacing:.18em;color:var(--rust)}.feature-card h3{font-size:38px;margin:45px 0 12px}.feature-card p{color:var(--muted);line-height:1.7}.split{display:grid;grid-template-columns:1.05fr .95fr;gap:0;padding-top:120px;padding-bottom:120px}.split-image{min-height:760px;background:center/cover no-repeat}.image-interior{background-image:url('https://bier-guide.net/sites/beer/files/styles/gallery_carousel/public/2025-01/web%20resize%20-%20B%20-Stegersbach%20-%20Eberherz%20-%202025%20-%20IMG_6323.jpg?itok=rXF1Pmq0')}.split-copy{background:var(--cream);padding:70px 58px;display:flex;flex-direction:column;justify-content:center}.dish-list{margin:28px 0}.dish-list div{display:flex;gap:18px;padding:15px 0;border-bottom:1px solid var(--line)}.dish-list span{color:var(--rust);font-size:11px}.text-link{margin-top:14px;color:var(--brown);font-weight:700}.quote{background:var(--brown);color:#fff;text-align:center}.quote p{font-family:'Playfair Display',serif;font-size:clamp(42px,7vw,90px);margin:0 0 15px;font-style:italic}.quote span{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:#e9cfc4}.gallery-head{display:flex;justify-content:space-between;align-items:end;margin-bottom:32px}.gallery-grid{display:grid;grid-template-columns:1.2fr .8fr;grid-template-rows:320px 320px;gap:14px}.gallery-grid figure{margin:0;overflow:hidden}.gallery-a{grid-row:1/3}.gallery-c{grid-column:2}.gallery-grid img{transition:transform .6s}.gallery-grid figure:hover img{transform:scale(1.04)}.hours{background:var(--ink);color:#fff}.hours-card{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:start}.hours-list div{display:flex;justify-content:space-between;padding:16px 0;border-bottom:1px solid rgba(255,255,255,.14)}.hours-list span{color:#d2c6bd}.contact{display:grid;grid-template-columns:1.2fr .8fr;gap:24px}.contact-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}.btn-dark{background:var(--ink);color:#fff}.btn-light{border-color:var(--line);color:var(--ink)}.contact-card{background:var(--cream);padding:38px;display:flex;flex-direction:column;gap:22px}.contact-card span{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--rust)}.contact-card strong{font-family:'Playfair Display',serif;font-size:28px;line-height:1.45}.contact-card a{font-weight:700;color:var(--brown)}footer{background:#0e0b08;color:#fff;padding:38px 6vw 100px;display:flex;justify-content:space-between;align-items:end;gap:30px}.footer-brand{display:flex;flex-direction:column}.footer-brand span{font-size:22px;font-weight:700}.footer-brand small{font-size:9px;letter-spacing:.18em;margin-top:6px}.mobile-bar{display:none}.reveal{opacity:0;transform:translateY(26px);transition:.7s ease}.reveal.show{opacity:1;transform:none}@media(max-width:900px){.menu-btn{display:block}.nav{position:fixed;top:0;right:-100%;height:100vh;width:min(82vw,360px);background:var(--ink);flex-direction:column;align-items:flex-start;padding:100px 34px;transition:.35s}.nav.open{right:0}.hero-content{padding:150px 20px 150px}.hero-info{left:12px;right:12px;bottom:18px;overflow:auto}.hero-info div{min-width:145px}.intro,.split,.hours-card,.contact{grid-template-columns:1fr}.feature-grid{grid-template-columns:1fr}.split-image{min-height:520px}.gallery-grid{grid-template-columns:1fr 1fr;grid-template-rows:360px 240px}.gallery-a{grid-column:1/3;grid-row:auto}.gallery-c{grid-column:auto}.section{padding:78px 20px}footer{display:block}.footer-brand{margin-bottom:20px}.mobile-bar{position:fixed;left:0;right:0;bottom:0;z-index:60;display:grid;grid-template-columns:repeat(3,1fr);background:#0e0b08;color:white;border-top:1px solid rgba(255,255,255,.14);padding:8px 4px}.mobile-bar a{text-align:center;font-size:10px;text-transform:uppercase;letter-spacing:.08em}.mobile-bar span{display:block;font-size:19px;margin-bottom:3px;color:#e2b382}body{padding-bottom:64px}}@media(max-width:560px){h1{font-size:58px}.hero-copy{font-size:16px}.hero-actions .btn{width:100%}.lead{font-size:24px}.split-copy{padding:42px 24px}.gallery-grid{grid-template-columns:1fr;grid-template-rows:300px 260px 260px}.gallery-a,.gallery-c{grid-column:auto}.contact-actions .btn{width:100%}}

/* =========================================================
   MOBILE OVERFLOW FIX — keeps the approved visual style
   ========================================================= */
html,
body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

* {
  box-sizing: border-box;
  min-width: 0;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

main,
header,
footer,
nav,
section,
.section,
.container,
.wrapper,
.grid,
.cards,
.content,
.hero,
.intro,
.feature-grid,
.split,
.gallery,
.gallery-grid,
.hours,
.contact {
  width: 100%;
  max-width: 100%;
}

.container {
  width: 100%;
  max-width: 1180px;
  margin-inline: auto;
  padding-inline: 12px;
}

/* Grid and flex children are allowed to shrink instead of widening the page. */
.intro > *,
.feature-grid > *,
.split > *,
.gallery-grid > *,
.hours-card > *,
.contact > *,
.hero-info > *,
.topbar > *,
footer > * {
  min-width: 0;
  max-width: 100%;
}

h1,
h2,
h3,
p,
a,
strong,
span {
  max-width: 100%;
  overflow-wrap: break-word;
}

.feature-grid {
  width: 100%;
  max-width: 100%;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.feature-card {
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}

.mobile-bar {
  left: 0;
  right: 0;
  width: 100%;
  max-width: 100%;
}

@media (max-width: 900px) {
  body {
    padding-bottom: 80px;
  }

  .topbar {
    width: 100%;
    max-width: 100%;
    padding-left: 12px;
    padding-right: 12px;
  }

  .brand {
    flex: 1 1 auto;
    max-width: calc(100% - 84px);
  }

  .brand-main,
  .brand-sub {
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .menu-btn {
    flex: 0 0 auto;
  }

  .nav {
    width: min(82%, 360px);
    max-width: 100%;
    overflow-x: hidden;
  }

  .hero,
  .hero-content,
  .hero-actions,
  .hero-info {
    max-width: 100%;
  }

  .hero-content {
    width: 100%;
    padding-left: 20px;
    padding-right: 20px;
  }

  .hero-info {
    width: auto;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    overflow: hidden;
  }

  .hero-info div {
    min-width: 0;
    padding: 14px 8px;
    overflow: hidden;
  }

  .hero-info strong,
  .hero-info span {
    display: block;
    overflow-wrap: anywhere;
  }

  .section {
    width: 100%;
    max-width: 100%;
    padding-left: 20px;
    padding-right: 20px;
  }

  .feature-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
  }

  .feature-card {
    width: 100%;
    max-width: 100%;
    padding: 24px 18px;
  }

  .split,
  .intro,
  .hours-card,
  .contact {
    width: 100%;
    grid-template-columns: minmax(0, 1fr);
  }

  .split-copy,
  .contact-card,
  .hours-card,
  .gallery-grid,
  .gallery-grid figure {
    width: 100%;
    max-width: 100%;
  }

  .gallery-head {
    width: 100%;
    max-width: 100%;
  }

  footer {
    width: 100%;
    max-width: 100%;
    padding-left: 20px;
    padding-right: 20px;
  }

  .mobile-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-width: 100%;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    overflow: hidden;
  }

  .mobile-bar a {
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

@media (max-width: 600px) {
  h1 {
    font-size: clamp(48px, 15vw, 58px);
    line-height: .92;
  }

  h2,
  .intro h2,
  .split h2,
  .gallery h2,
  .hours h2,
  .contact h2 {
    font-size: clamp(34px, 9vw, 58px);
    line-height: .95;
  }

  p {
    font-size: 16px;
    line-height: 1.5;
  }

  .eyebrow {
    overflow-wrap: anywhere;
  }

  .gallery-head {
    display: block;
  }

  .hero-actions,
  .contact-actions {
    width: 100%;
  }

  .hero-actions .btn,
  .contact-actions .btn {
    width: 100%;
    max-width: 100%;
  }

  .hours-list div,
  .dish-list div {
    width: 100%;
    max-width: 100%;
    gap: 12px;
  }

  .hours-list strong {
    text-align: right;
  }
}