/* Löwen Neureut — one-page site styles */

@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/fraunces-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122;
}

@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 400 600;
  font-display: swap;
  src: url('../fonts/fraunces-italic.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122;
}

:root {
  --cream: #ffffff;
  --cream-soft: #f1f4f8;
  --paper: #ffffff;
  --ink: #11213b;
  --ink-soft: #57647c;
  --hairline: rgba(17, 33, 59, 0.13);

  --dark: #0b1830;
  --dark-soft: #142645;
  --on-dark: #f5f7fb;
  --on-dark-soft: #a9b6cc;

  --accent: #1e3a66;
  --accent-deep: #14294a;
  --accent-muted: #57647c;
  --accent-soft: #b7c3d9;

  --font-serif: 'Fraunces', Georgia, 'Iowan Old Style', 'Palatino Linotype', serif;
  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

  --container: 1180px;
  --radius: 10px;
  --bottom-bar-h: 62px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--ink);
  background: var(--cream);
  line-height: 1.65;
  font-size: 1.0625rem;
  -webkit-font-smoothing: antialiased;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

h1, h2 {
  font-family: var(--font-serif);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.01em;
  margin: 0 0 0.4em;
  color: var(--ink);
}

h3 {
  font-family: var(--font-sans);
  font-weight: 700;
  margin: 0 0 0.5em;
}

h1 { font-size: clamp(2.6rem, 7vw, 4.4rem); }
h2 { font-size: clamp(1.9rem, 4.2vw, 2.75rem); }

p { margin: 0 0 1em; }

a { color: var(--accent-deep); }

img { max-width: 100%; display: block; }

button { font-family: inherit; }

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 1.5rem;
}

.container.narrow { max-width: 720px; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--accent);
  color: #fff;
  padding: 0.75em 1.25em;
  z-index: 200;
  border-radius: 0 0 var(--radius) 0;
}

.skip-link:focus { left: 0; }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

:focus-visible {
  outline: 3px solid var(--accent-muted);
  outline-offset: 2px;
}

.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--accent-muted);
  filter: brightness(0.82);
}

.section-title { margin-bottom: 2.5rem; }
.section-title .eyebrow { display: block; margin-bottom: 0.7em; }
.section-title h2 { margin-bottom: 0.35em; }
.section-title p:last-child { color: var(--ink-soft); max-width: 46ch; margin: 0; }
.section-title.center { text-align: center; }
.section-title.center p:last-child { margin-left: auto; margin-right: auto; }

/* Scroll reveal (progressive enhancement — see js/main.js) */

html.js .reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

html.js .reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html.js .reveal { opacity: 1; transform: none; transition: none; }
}

/* Buttons */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  padding: 0.85em 1.6em;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.95rem;
  text-decoration: none;
  border: 1.5px solid transparent;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.btn:active { transform: scale(0.98); }
.btn svg { width: 16px; height: 16px; flex: 0 0 auto; }

.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-deep); }

.btn-outline {
  background: transparent;
  border-color: var(--accent);
  color: var(--accent);
}
.btn-outline:hover { background: var(--accent); color: #fff; }

.btn-ghost {
  background: transparent;
  border-color: var(--hairline);
  color: var(--ink);
}
.btn-ghost:hover { border-color: var(--ink); }

/* Header */

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--cream);
  border-bottom: 1px solid var(--hairline);
}

.header-inner {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding-top: 0.85rem;
  padding-bottom: 0.85rem;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  color: var(--ink);
  margin-right: auto;
}

.logo-mark { display: flex; align-items: center; color: var(--accent); flex: 0 0 auto; }
.logo-mark img { height: 46px; width: auto; display: block; }

.brand-text { display: flex; flex-direction: column; line-height: 1.2; }

.brand-name {
  font-family: var(--font-sans);
  text-transform: uppercase;
  letter-spacing: 0.09em;
  font-weight: 700;
  font-size: 1.18rem;
}

.brand-sub { font-size: 0.78rem; letter-spacing: 0.03em; color: var(--accent-muted); filter: brightness(0.85); }

.site-nav { display: flex; gap: 2rem; }

.site-nav a {
  text-decoration: none;
  color: var(--ink-soft);
  font-weight: 600;
  font-size: 0.92rem;
}

.site-nav a:hover { color: var(--accent); }

.header-actions { display: flex; align-items: center; gap: 0.75rem; }

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 42px;
  height: 42px;
  border: none;
  background: none;
  cursor: pointer;
  border-radius: 8px;
}

.nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--ink);
  transition: transform 0.25s ease, opacity 0.25s ease;
}

.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav-drawer {
  display: none;
  flex-direction: column;
  padding: 0.5rem 1.5rem 1.5rem;
  border-top: 1px solid var(--hairline);
  background: var(--cream);
}

.nav-drawer a {
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--hairline);
  color: var(--ink);
  text-decoration: none;
  font-weight: 600;
  font-size: 1.05rem;
}

.nav-drawer .btn { margin-top: 1.1rem; align-self: flex-start; }

@media (max-width: 860px) {
  .site-nav, .header-actions .btn-call { display: none; }
  .nav-toggle { display: flex; }
  .site-header.is-open .nav-drawer { display: flex; }
}

/* Hero */

.hero {
  position: relative;
  background: var(--dark) center / cover no-repeat;
  color: #fff;
}

.hero-frame {
  position: relative;
  /* margin: auto (not flex centering) so an explicit width never enters
     the picture - a flex item's definite width can short-circuit the
     aspect-ratio/max-height reconciliation below and force a much
     tighter crop than intended. Plain block sizing lets max-width and
     max-height (with aspect-ratio) resolve together correctly, exactly
     as it did before this frame existed as its own element. */
  margin: 0 auto;
  /* The full, uncropped photo (matching its own 1245:1278 ratio exactly)
     used to be the priority - but on wide/short desktop monitors that
     made the hero taller than the viewport, pushing the sign's "Löwen"
     lettering (the whole point of the photo) below the fold until the
     visitor scrolled. Capping both dimensions instead keeps the hero
     within one screen; object-position below biases the resulting crop
     to lose sky/church-spire off the top rather than the lettering. */
  aspect-ratio: 1245 / 1278;
  max-width: 1700px;
  max-height: 88vh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}

@media (max-width: 640px) {
  .hero-frame { aspect-ratio: auto; min-height: 58vh; max-height: none; }
}

.hero-media {
  position: absolute;
  inset: 0;
  background: var(--dark);
}

.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 88%;
}

.hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  /* Anchored to a fixed distance from the bottom (not a % of hero height):
     the text block's height is constant (rem-based) while the hero's
     height varies by viewport, so a %-based gradient protects text on
     some screens and leaves it unreadable over the photo on others. */
  background:
    linear-gradient(180deg,
      rgba(6, 13, 26, 0) 0%,
      rgba(6, 13, 26, 0) calc(100% - 120px),
      rgba(6, 13, 26, 0.72) calc(100% - 70px),
      rgba(6, 13, 26, 0.86) calc(100% - 35px),
      rgba(6, 13, 26, 0.92) 100%);
}

.hero.img-missing .hero-media {
  background: linear-gradient(150deg, #1b3355 0%, #0b1830 100%);
}

.hero.img-missing .hero-media img { display: none; }

.hero-content {
  position: relative;
  padding: 1.75rem 0 2.25rem;
  width: 100%;
}

.hero .eyebrow { color: var(--accent-soft); filter: none; margin-bottom: 0; }

/* Generic section rhythm */

.section { padding: clamp(4rem, 9vw, 7rem) 0; scroll-margin-top: 90px; }
.section-soft { background: var(--cream-soft); }
.section-dark { background: var(--dark); color: var(--on-dark); }
.section-dark h2, .section-dark h1 { color: #fff; }

/* Food break */

.food-break {
  position: relative;
  min-height: 62vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  color: #fff;
}

.food-break-media {
  position: absolute;
  inset: 0;
  background: linear-gradient(150deg, #1b3355 0%, #0b1830 100%);
}

.food-break-media img { width: 100%; height: 100%; object-fit: cover; }

.food-break-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(6, 13, 26, 0.45);
}

.food-break.img-missing .food-break-media img { display: none; }

.food-break blockquote {
  position: relative;
  margin: 0;
  padding: 2rem 1.5rem;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.7rem, 4.4vw, 3rem);
  line-height: 1.3;
  max-width: 20ch;
}

/* Impressionen carousel */

.carousel {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.carousel-track {
  display: flex;
  gap: 0.9rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  margin: 0;
  padding: 0.2rem 0 0.6rem;
}

.carousel-item {
  flex: 0 0 auto;
  width: min(78vw, 340px);
  aspect-ratio: 4 / 5;
  margin: 0;
  scroll-snap-align: start;
  position: relative;
  overflow: hidden;
  background: linear-gradient(150deg, #1b3355 0%, #0b1830 100%);
}

.carousel-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.carousel-item.img-missing img { display: none; }

.carousel-btn {
  flex: 0 0 auto;
  appearance: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1.5px solid var(--hairline);
  background: var(--paper);
  color: var(--ink);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease;
}

.carousel-btn:hover { border-color: var(--accent); color: var(--accent); }

@media (max-width: 640px) {
  .carousel-btn { display: none; }
}

/* Atmosphere strip: Stube + Biergarten */

.atmosphere-strip {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.6rem;
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
}

@media (min-width: 700px) {
  .atmosphere-strip { grid-template-columns: 1fr 1fr; }
}

.atmosphere-strip-media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: linear-gradient(150deg, #1b3355 0%, #0b1830 100%);
}

.atmosphere-strip-media img { width: 100%; height: 100%; object-fit: cover; }

.atmosphere-strip-media.img-missing img { display: none; }

/* Speisekarte */

.menu-head { text-align: center; }
.menu-head p { color: var(--ink-soft); }

.menu-mode {
  display: flex;
  justify-content: center;
  gap: 0.7rem;
  margin-bottom: 2.4rem;
}

.mode-btn {
  appearance: none;
  cursor: pointer;
  font: inherit;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 0.92rem;
  padding: 0.75em 1.7em;
  border-radius: 999px;
  border: 1.5px solid var(--hairline);
  background: var(--paper);
  color: var(--ink-soft);
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.mode-btn:hover { border-color: var(--accent); color: var(--ink); }

.mode-btn[aria-selected="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.menu-tabs {
  display: flex;
  gap: 0.4rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  justify-content: flex-start;
  padding-bottom: 0.9rem;
  margin-bottom: 0.4rem;
  border-bottom: 1px solid var(--hairline);
  scrollbar-width: thin;
}

/* Deliberately always flex-start, never centered: centering an
   overflowing flex row makes it overflow on both sides, which clips
   the first tab's label even while scrollLeft reports 0. */

.menu-tab {
  flex: 0 0 auto;
  appearance: none;
  background: none;
  border: none;
  cursor: pointer;
  font: inherit;
  font-family: var(--font-sans);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--ink-soft);
  padding: 0.7rem 0.2rem;
  margin: 0 1rem;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.menu-tab:hover { color: var(--ink); }

.menu-tab[aria-selected="true"] {
  color: var(--ink);
  border-bottom-color: var(--accent);
}

.menu-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.1rem;
  padding: 0.9rem 0 0.4rem;
  font-family: var(--font-sans);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--ink-soft);
}

.pager-btn {
  appearance: none;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--ink);
  font-size: 1.2rem;
  line-height: 1;
  padding: 0.3rem;
}

.pager-btn:hover:not(:disabled) { color: var(--accent); }
.pager-btn:disabled { opacity: 0.28; cursor: default; }

.menu-panels { padding-top: 1.6rem; }

.menu-panel[hidden] { display: none; }

.menu-panel h3 {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent-deep);
  margin-bottom: 1.3rem;
}

.panel-note {
  background: var(--paper);
  border: 1px solid var(--hairline);
  color: var(--ink-soft);
  padding: 0.7rem 1rem;
  border-radius: 6px;
  font-size: 0.85rem;
  margin: 0 0 1.3rem;
}

.panel-note.center {
  max-width: 34ch;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.dish-list {
  list-style: none;
  margin: 0;
  padding: 0;
  columns: 1;
  column-gap: 3.5rem;
}

@media (min-width: 700px) {
  .dish-list.is-long { columns: 2; }
}

.dish {
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--hairline);
  break-inside: avoid-column;
}

.dish:last-child { border-bottom: none; }

.dish-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
}

.dish-name {
  font-family: var(--font-sans);
  font-weight: 700;
  color: var(--ink);
  font-size: 1rem;
}

.dish-price {
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  font-size: 0.95rem;
}

.dish-price-multi {
  white-space: normal;
  text-align: right;
  max-width: 11rem;
}

.menu-panel h4 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 0.8rem;
  color: var(--ink-soft);
  margin: 1.6rem 0 0.6rem;
}

.menu-panel h4:first-of-type { margin-top: 0; }

.dish-desc {
  margin: 0.2rem 0 0;
  font-size: 0.85rem;
  color: var(--ink-soft);
}

.menu-note {
  text-align: center;
  font-size: 0.82rem;
  color: var(--ink-soft);
  margin: 2.2rem auto 0;
  max-width: 50ch;
}

/* Contact */

.contact-card {
  max-width: 700px;
  margin: 0 auto;
  text-align: center;
}

.contact-facts {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem 2.4rem;
  text-align: left;
  padding: 2.2rem 0;
  margin: 0 0 2.4rem;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}

@media (max-width: 560px) {
  .contact-facts { grid-template-columns: 1fr; }
}

.contact-facts .label {
  display: block;
  color: var(--ink-soft);
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 0.4em;
}

.contact-facts .value { font-weight: 600; font-size: 1.15rem; }

.contact-facts .value a {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  color: var(--accent);
  text-decoration: none;
}

.contact-facts .value a:hover { text-decoration: underline; }
.contact-facts .value a svg { width: 16px; height: 16px; flex: 0 0 auto; }

.contact-actions { display: flex; gap: 1rem; flex-wrap: wrap; justify-content: center; }

/* Footer */

.site-footer { background: var(--dark); color: var(--on-dark-soft); }

.footer-inner {
  padding: 3rem 0 2rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

@media (min-width: 700px) {
  .footer-inner { grid-template-columns: 1.1fr 1fr; }
}

.footer-brand { font-family: var(--font-serif); font-size: 1.35rem; color: #fff; margin-bottom: 0.3em; }

.footer-details p { margin: 0 0 0.3em; font-size: 0.92rem; }
.footer-details a { color: var(--on-dark); text-decoration: none; }
.footer-details a:hover { color: var(--accent-soft); }

.footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.6rem;
  align-content: start;
  justify-content: flex-start;
}

@media (min-width: 700px) {
  .footer-nav { justify-content: flex-end; }
}

.footer-nav a {
  color: var(--on-dark-soft);
  text-decoration: none;
  font-size: 0.9rem;
}

.footer-nav a:hover { color: #fff; }

.footer-nav-toggle {
  appearance: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  font: inherit;
  color: var(--on-dark-soft);
  font-size: 0.9rem;
}

.footer-nav-toggle:hover,
.footer-nav-toggle[aria-expanded="true"] { color: #fff; }

.footer-bottom {
  border-top: 1px solid rgba(245, 247, 251, 0.12);
  padding: 1.25rem 0;
  font-size: 0.8rem;
  color: #7c88a0;
}

/* Legal sections (Impressum / Datenschutz, inside the footer) */

.legal {
  scroll-margin-top: 90px;
  padding: 2.75rem 0;
  border-top: 1px solid rgba(245, 247, 251, 0.1);
  font-size: 0.92rem;
}

.legal h2 { color: #fff; font-size: 1.25rem; }
.legal h3 { color: var(--on-dark); font-size: 1rem; margin-top: 1.5em; }
.legal a { color: var(--accent-soft); }

/* Mobile sticky action bar */

.mobile-bar {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  background: var(--paper);
  border-top: 1px solid var(--hairline);
  padding-bottom: env(safe-area-inset-bottom, 0);
  box-shadow: 0 -8px 24px rgba(17, 33, 59, 0.08);
}

.mobile-bar-inner {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  height: var(--bottom-bar-h);
}

.mobile-bar a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.15rem;
  text-decoration: none;
  color: var(--ink);
  font-size: 0.72rem;
  font-weight: 700;
}

.mobile-bar a:not(:last-child) { border-right: 1px solid var(--hairline); }
.mobile-bar svg { width: 20px; height: 20px; }
.mobile-bar .call { color: var(--accent-deep); }

/* Matches the header's own breakpoint (860px), not 640px: the header's
   call button disappears at 860px, and this bar is the only remaining
   persistent way to call/find/order below that - a narrower cutoff here
   left a gap (roughly 640-860px, including iPad portrait) with no
   visible click-to-call anywhere without scrolling. */
@media (max-width: 860px) {
  .mobile-bar { display: block; }
  body { padding-bottom: var(--bottom-bar-h); }
}

/* Call confirmation toast: a tel: link silently does nothing on a
   desktop with no calling app registered, so clicking a call button
   there looks broken even though it's correct. This gives every click
   a visible result regardless of device. */
.call-toast {
  position: fixed;
  left: 50%;
  bottom: 1.25rem;
  transform: translate(-50%, 12px);
  background: var(--dark);
  color: var(--on-dark);
  padding: 0.7em 1.2em;
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: 0.9rem;
  font-weight: 600;
  box-shadow: 0 8px 24px rgba(11, 24, 48, 0.35);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 300;
  white-space: nowrap;
}

.call-toast.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

@media (max-width: 860px) {
  .call-toast { bottom: calc(var(--bottom-bar-h) + 1rem); }
}