/* ============================================================
   Bistro Cappuccino — Stylesheet
   Palette: Schwarz / Tannengrün / Gold / Champagner / Creme / Dunkelbraun
   ============================================================ */

:root {
  --black:      #0b0b0b;
  --green:      #0f2118;
  --green-soft: #142b20;
  --gold:       #c9a24b;
  --gold-dim:   rgba(201, 162, 75, 0.35);
  --champagne:  #e3c287;
  --cream:      #f2e4c8;
  --cream-dim:  rgba(242, 228, 200, 0.62);
  --brown:      #2a1a10;

  --serif: 'Cormorant Garamond', Georgia, serif;
  --sans: 'Outfit', system-ui, -apple-system, sans-serif;
  --script: 'Caveat', cursive;

  --max-w: 1120px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

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

body {
  margin: 0;
  background: var(--black);
  color: var(--cream);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--gold); color: var(--black); }

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

.wrap {
  max-width: var(--max-w);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 600;
  color: var(--champagne);
  margin: 0;
}

p { margin: 0; }

.eyebrow {
  font-family: var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  color: var(--gold);
  font-weight: 600;
}

.lede { color: var(--cream-dim); max-width: 62ch; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.85rem 1.6rem;
  border-radius: 3px;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.95rem;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 160ms ease, background 160ms ease, border-color 160ms ease, color 160ms ease;
}
.btn:active { transform: translateY(1px); }

.btn-gold { background: var(--gold); color: var(--black); }
.btn-gold:hover { background: var(--champagne); }

.btn-outline {
  background: transparent;
  color: var(--champagne);
  border-color: var(--gold-dim);
}
.btn-outline:hover { border-color: var(--gold); background: rgba(201, 162, 75, 0.08); }

.btn svg { width: 1.05em; height: 1.05em; flex: none; }

/* ---------- Ornamental corner flourish ---------- */
.corner {
  position: absolute;
  width: clamp(34px, 5vw, 58px);
  height: clamp(34px, 5vw, 58px);
  color: var(--gold);
  opacity: 0.85;
}
.corner.tl { top: 18px; left: 18px; }
.corner.tr { top: 18px; right: 18px; transform: scaleX(-1); }
.corner.bl { bottom: 18px; left: 18px; transform: scaleY(-1); }
.corner.br { bottom: 18px; right: 18px; transform: scale(-1, -1); }

/* ============================================================
   Header / Navigation
   ============================================================ */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 0.9rem 0;
  background: transparent;
  transition: background 240ms ease, border-color 240ms ease, padding 240ms ease;
  border-bottom: 1px solid transparent;
}
.site-header.solid {
  background: rgba(11, 11, 11, 0.92);
  backdrop-filter: blur(10px);
  border-bottom-color: var(--gold-dim);
  padding: 0.55rem 0;
}

.nav-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--serif);
  color: var(--champagne);
  font-size: 1.25rem;
  font-weight: 600;
  white-space: nowrap;
}
.brand img { width: 40px; height: 40px; object-fit: contain; }

.nav-links {
  display: flex;
  align-items: center;
  gap: 2rem;
  list-style: none;
  margin: 0; padding: 0;
}
.nav-links a {
  font-size: 0.92rem;
  color: var(--cream-dim);
  transition: color 160ms ease;
  position: relative;
}
.nav-links a:hover { color: var(--champagne); }

.nav-phone {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--gold) !important;
  font-weight: 600;
}
.nav-phone svg { width: 1em; height: 1em; }

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--gold-dim);
  border-radius: 3px;
  color: var(--champagne);
  width: 42px; height: 38px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.nav-toggle svg { width: 20px; height: 20px; }

.mobile-nav {
  display: none;
  position: fixed;
  inset: 0;
  background: #06080a;
  z-index: 200;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  font-family: var(--serif);
  font-size: 1.5rem;
}
.mobile-nav.open { display: flex; }
.mobile-nav a { color: var(--cream); }
.mobile-nav .nav-phone { color: var(--gold); }
.mobile-nav-close {
  position: absolute;
  top: 22px; right: var(--gutter);
  background: none; border: none;
  color: var(--champagne);
  width: 40px; height: 40px;
  cursor: pointer;
}
.mobile-nav-close svg { width: 26px; height: 26px; }

@media (max-width: 860px) {
  .nav-links { display: none; }
  .nav-toggle { display: flex; }
}

/* ============================================================
   Hero
   ============================================================ */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  padding: 7rem var(--gutter) 4rem;
  background:
    linear-gradient(180deg, rgba(11,11,11,0.55) 0%, rgba(11,11,11,0.72) 55%, rgba(11,11,11,0.94) 100%),
    radial-gradient(ellipse 900px 620px at 50% 15%, rgba(15, 33, 24, 0.45) 0%, rgba(11,11,11,0) 60%),
    url('assets/hero-interior.jpg') center 38%/cover no-repeat,
    var(--black);
  border-bottom: 1px solid var(--gold-dim);
}
.hero::before {
  content: "";
  position: absolute;
  inset: 14px;
  border: 1px solid var(--gold-dim);
  pointer-events: none;
}
.hero-inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.35rem;
  max-width: 640px;
}
.hero-logo {
  width: clamp(150px, 24vw, 220px);
  height: auto;
  filter: drop-shadow(0 8px 30px rgba(0,0,0,0.55));
}
.hero-kicker {
  font-family: var(--script);
  font-size: clamp(1.4rem, 3vw, 1.9rem);
  color: var(--cream);
  line-height: 1.3;
  text-shadow: 0 2px 14px rgba(0,0,0,0.65);
}
.hero-hours {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem 1rem;
  font-size: 0.92rem;
  color: var(--cream-dim);
}
.hero-hours strong { color: var(--champagne); font-weight: 600; }
.dot-sep { color: var(--gold); }
.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.85rem;
  margin-top: 0.4rem;
}
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8rem;
  padding: 0.35rem 0.85rem;
  border: 1px solid var(--gold-dim);
  border-radius: 999px;
  color: var(--cream-dim);
}
.status-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #6fae70;
  box-shadow: 0 0 0 3px rgba(111,174,112,0.18);
}
.status-pill.closed .status-dot {
  background: #b56b56;
  box-shadow: 0 0 0 3px rgba(181,107,86,0.18);
}
.scroll-cue {
  position: absolute;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  width: 22px; height: 34px;
  border: 1px solid var(--gold-dim);
  border-radius: 12px;
  z-index: 2;
}
.scroll-cue::after {
  content: "";
  position: absolute;
  top: 6px; left: 50%;
  width: 4px; height: 8px;
  background: var(--gold);
  border-radius: 2px;
  transform: translateX(-50%);
  animation: cueDrop 1.8s ease-in-out infinite;
}
@keyframes cueDrop {
  0% { opacity: 1; top: 6px; }
  70% { opacity: 0; top: 18px; }
  100% { opacity: 0; top: 6px; }
}

/* ============================================================
   Section shell
   ============================================================ */
.section { padding: clamp(3.5rem, 8vw, 6rem) 0; position: relative; }
.section-alt { background: var(--green); }

.section-head {
  text-align: center;
  max-width: 640px;
  margin: 0 auto clamp(2rem, 5vw, 3rem);
}
.section-head h2 { font-size: clamp(1.9rem, 4vw, 2.6rem); margin-bottom: 0.6rem; }
.section-rule { width: 64px; height: 1px; background: var(--gold); margin: 0.9rem auto 0; }

/* ============================================================
   About
   ============================================================ */
.about-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
@media (max-width: 780px) { .about-grid { grid-template-columns: 1fr; } }

.about-copy h2 { font-size: clamp(1.8rem, 4vw, 2.4rem); margin-bottom: 1rem; }
.about-copy p + p { margin-top: 1rem; }
.about-copy p { color: var(--cream-dim); }

.about-facts { display: flex; gap: 1.5rem; margin-top: 1.75rem; flex-wrap: wrap; }
.about-fact { border-left: 1px solid var(--gold-dim); padding-left: 0.9rem; }
.about-fact strong { display: block; font-family: var(--serif); color: var(--champagne); font-size: 1.6rem; }
.about-fact span { font-size: 0.82rem; color: var(--cream-dim); }

.quote-card {
  background: var(--brown);
  border: 1px solid var(--gold-dim);
  border-radius: 4px;
  padding: clamp(1.75rem, 4vw, 2.5rem);
  text-align: center;
}
.quote-card p.script {
  font-family: var(--script);
  font-size: clamp(1.5rem, 3vw, 1.9rem);
  color: var(--champagne);
  line-height: 1.35;
}
.quote-card .quote-by { margin-top: 1rem; font-size: 0.85rem; color: var(--cream-dim); letter-spacing: 0.04em; }

/* ============================================================
   Food strip (gallery)
   ============================================================ */
.food-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 2px;
  background: var(--gold-dim);
  border-top: 1px solid var(--gold-dim);
  border-bottom: 1px solid var(--gold-dim);
}
.food-strip figure { margin: 0; aspect-ratio: 4 / 5; overflow: hidden; background: var(--black); position: relative; }
.food-strip img { width: 100%; height: 100%; object-fit: cover; transition: transform 500ms ease; }
.food-strip figure:hover img { transform: scale(1.06); }
.food-strip figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 0.6rem 0.7rem;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--champagne);
  background: linear-gradient(to top, rgba(0,0,0,0.75), transparent);
}
@media (max-width: 780px) {
  .food-strip { grid-template-columns: repeat(3, 1fr); }
}

/* ============================================================
   Menu / Speisekarte
   ============================================================ */
.menu-tabs {
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  padding-bottom: 0.9rem;
  margin-bottom: 1.75rem;
  scrollbar-width: thin;
  scrollbar-color: var(--gold-dim) transparent;
}
.menu-tabs::-webkit-scrollbar { height: 5px; }
.menu-tabs::-webkit-scrollbar-thumb { background: var(--gold-dim); border-radius: 3px; }

.menu-tab {
  flex: none;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 1.05rem;
  border-radius: 999px;
  border: 1px solid var(--gold-dim);
  background: transparent;
  color: var(--cream-dim);
  font-family: var(--sans);
  font-size: 0.86rem;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
}
.menu-tab svg { width: 1.05em; height: 1.05em; flex: none; }
.menu-tab:hover { border-color: var(--gold); color: var(--champagne); }
.menu-tab[aria-selected="true"] {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--black);
  font-weight: 600;
}

.menu-panel-head { text-align: center; margin-bottom: 1.4rem; }
.menu-panel-head h3 { font-size: 1.6rem; color: var(--champagne); }
.menu-note {
  font-family: var(--serif);
  font-style: italic;
  color: var(--cream-dim);
  font-size: 0.92rem;
  margin-top: 0.45rem;
}

.menu-list { display: flex; flex-direction: column; }
.menu-item {
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid rgba(201, 162, 75, 0.16);
}
.menu-item:last-child { border-bottom: none; }
.menu-item-main { max-width: 70%; }
.menu-item-name { font-weight: 600; color: var(--cream); font-size: 1rem; }
.menu-item-name .nr { color: var(--gold); font-weight: 500; margin-right: 0.4rem; font-size: 0.85em; }
.menu-item-name .codes { color: var(--gold); font-weight: 500; font-size: 0.78em; margin-left: 0.35rem; }
.menu-item-desc { color: var(--cream-dim); font-size: 0.86rem; margin-top: 0.15rem; }
.menu-item-price {
  flex: none;
  color: var(--gold);
  font-weight: 700;
  text-align: right;
  white-space: nowrap;
  font-size: 0.98rem;
}
.menu-item-price .variant { display: block; font-weight: 500; font-size: 0.78rem; white-space: nowrap; }
.menu-item-price .variant + .variant { margin-top: 0.15rem; }

.menu-download {
  margin-top: 2.5rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  padding: 1.35rem 1.6rem;
  border: 1px solid var(--gold-dim);
  border-radius: 4px;
  background: rgba(201, 162, 75, 0.05);
}
.menu-download p { color: var(--cream-dim); font-size: 0.9rem; }
.menu-download strong { color: var(--champagne); display: block; font-family: var(--serif); font-size: 1.2rem; margin-bottom: 0.2rem; }

.legend-toggle { margin-top: 1.5rem; text-align: center; }
.legend-details summary { cursor: pointer; color: var(--gold); font-size: 0.85rem; list-style: none; }
.legend-details summary::-webkit-details-marker { display: none; }
.legend-details summary::after { content: " ▾"; }
.legend-details[open] summary::after { content: " ▴"; }
.legend-grid {
  margin-top: 1rem;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.5rem 2rem;
  font-size: 0.8rem;
  color: var(--cream-dim);
  text-align: left;
}
.legend-grid strong { color: var(--champagne); }
@media (max-width: 560px) { .legend-grid { grid-template-columns: 1fr; } }

/* ============================================================
   Standort
   ============================================================ */
.location-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(2rem, 5vw, 3rem);
  align-items: stretch;
}
@media (max-width: 860px) { .location-grid { grid-template-columns: 1fr; } }

.info-card {
  border: 1px solid var(--gold-dim);
  border-radius: 4px;
  padding: clamp(1.75rem, 4vw, 2.25rem);
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
}
.info-row { display: flex; gap: 0.9rem; align-items: flex-start; }
.info-row svg { width: 22px; height: 22px; flex: none; color: var(--gold); margin-top: 0.15rem; }
.info-row h4 { font-size: 1rem; color: var(--champagne); margin-bottom: 0.25rem; font-family: var(--sans); font-weight: 600; }
.info-row p, .info-row a { color: var(--cream-dim); font-size: 0.92rem; }
.info-row a:hover { color: var(--champagne); }

.hours-table { width: 100%; font-size: 0.92rem; }
.hours-row { display: flex; justify-content: space-between; gap: 1rem; padding: 0.3rem 0; color: var(--cream-dim); }
.hours-row span:last-child { color: var(--cream); }

.map-frame {
  border: 1px solid var(--gold-dim);
  border-radius: 4px;
  overflow: hidden;
  min-height: 320px;
  filter: grayscale(0.25) sepia(0.15) saturate(0.9);
}
.map-frame iframe { width: 100%; height: 100%; min-height: 320px; border: 0; display: block; }

/* ============================================================
   Page banner (Unterseiten-Kopf)
   ============================================================ */
.page-banner {
  position: relative;
  min-height: 46vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  padding: 8rem var(--gutter) 3rem;
  background:
    linear-gradient(180deg, rgba(11,11,11,0.62) 0%, rgba(11,11,11,0.8) 60%, rgba(11,11,11,0.96) 100%),
    radial-gradient(ellipse 900px 500px at 50% 10%, rgba(15, 33, 24, 0.5) 0%, rgba(11,11,11,0) 60%),
    url('assets/hero-interior.jpg') center 38%/cover no-repeat,
    var(--black);
  border-bottom: 1px solid var(--gold-dim);
}
.page-banner-inner { position: relative; z-index: 2; max-width: 640px; }
.page-banner .eyebrow { display: block; margin-bottom: 0.6rem; }
.page-banner h1 { font-size: clamp(2.1rem, 5vw, 3rem); }
.page-banner p.lede { margin: 0.9rem auto 0; color: var(--cream-dim); }
.breadcrumb {
  position: relative; z-index: 2;
  font-size: 0.8rem; color: var(--cream-dim);
  margin-bottom: 1rem;
}
.breadcrumb a { color: var(--gold); }

/* ============================================================
   Startseite: Feature-Leiste
   ============================================================ */
.feature-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--gold-dim);
  border-top: 1px solid var(--gold-dim);
  border-bottom: 1px solid var(--gold-dim);
}
.feature-item {
  background: var(--black);
  padding: 1.6rem 1.2rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}
.feature-item svg { width: 28px; height: 28px; color: var(--gold); }
.feature-item strong { font-family: var(--serif); color: var(--champagne); font-size: 1.5rem; }
.feature-item span { font-size: 0.82rem; color: var(--cream-dim); }
@media (max-width: 700px) {
  .feature-strip { grid-template-columns: 1fr; }
}

/* ============================================================
   Startseite: Teaser-Kacheln (Speisekarte / Über uns / Standort)
   ============================================================ */
.teaser-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
@media (max-width: 860px) {
  .teaser-grid { grid-template-columns: 1fr; }
}
.teaser-card {
  border: 1px solid var(--gold-dim);
  border-radius: 4px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: var(--green);
  transition: border-color 200ms ease, transform 200ms ease;
}
.teaser-card:hover { border-color: var(--gold); transform: translateY(-3px); }
.teaser-card figure { margin: 0; aspect-ratio: 16/10; overflow: hidden; }
.teaser-card img { width: 100%; height: 100%; object-fit: cover; }
.teaser-body { padding: 1.4rem 1.5rem 1.6rem; display: flex; flex-direction: column; gap: 0.7rem; flex: 1; }
.teaser-body h3 { font-size: 1.35rem; }
.teaser-body p { color: var(--cream-dim); font-size: 0.9rem; flex: 1; }
.teaser-link {
  color: var(--gold);
  font-size: 0.88rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.teaser-link svg { width: 1em; height: 1em; transition: transform 160ms ease; }
.teaser-card:hover .teaser-link svg { transform: translateX(3px); }

/* ============================================================
   Foto-Galerie (mehrspaltig, für Über-uns / Standort)
   ============================================================ */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.9rem;
}
.gallery-grid figure {
  margin: 0;
  aspect-ratio: 4/3;
  overflow: hidden;
  border-radius: 4px;
  border: 1px solid var(--gold-dim);
  position: relative;
}
.gallery-grid img { width: 100%; height: 100%; object-fit: cover; transition: transform 400ms ease; }
.gallery-grid figure:hover img { transform: scale(1.07); }
.gallery-grid figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 0.45rem 0.6rem;
  font-size: 0.7rem;
  color: var(--champagne);
  background: linear-gradient(to top, rgba(0,0,0,0.78), transparent);
}
@media (max-width: 860px) { .gallery-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .gallery-grid { grid-template-columns: repeat(2, 1fr); } }

/* ============================================================
   3D-Tilt-Effekte
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
  .tilt-zone { perspective: 1100px; }
  .tilt {
    transform-style: preserve-3d;
    transition: transform 220ms cubic-bezier(.2,.8,.2,1), box-shadow 220ms ease;
    will-change: transform;
  }
}

.hero-mockup-wrap {
  margin: 0.4rem 0 0.2rem;
  perspective: 1100px;
  animation: mockupFloat 5s ease-in-out infinite;
}
@keyframes mockupFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
.hero-mockup {
  width: clamp(150px, 24vw, 220px);
  height: auto;
  filter: drop-shadow(0 22px 34px rgba(0,0,0,0.55));
  transform: rotateX(8deg) rotateY(-14deg) rotateZ(-1deg);
  border-radius: 10px;
}

.feature-item.tilt:hover,
.teaser-card.tilt:hover {
  box-shadow: 0 18px 36px -12px rgba(0,0,0,0.55);
}

.food-strip figure.tilt,
.gallery-grid figure.tilt {
  transition: transform 220ms cubic-bezier(.2,.8,.2,1), box-shadow 220ms ease;
}
.food-strip figure.tilt:hover,
.gallery-grid figure.tilt:hover {
  box-shadow: 0 16px 30px -10px rgba(0,0,0,0.6);
  z-index: 3;
}

/* CTA: dezente Glow-Animation */
@media (prefers-reduced-motion: no-preference) {
  .btn-gold {
    animation: ctaGlow 3.4s ease-in-out infinite;
  }
}
@keyframes ctaGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(201,162,75,0); }
  50% { box-shadow: 0 0 20px 3px rgba(201,162,75,0.38); }
}

/* Aktiver Nav-Link */
.nav-links a.active, .mobile-nav a.active { color: var(--champagne); }

.site-footer { background: var(--brown); border-top: 1px solid var(--gold-dim); padding: 2.75rem 0 1.75rem; }
.footer-grid { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2rem; }
.footer-brand { display: flex; align-items: center; gap: 0.75rem; }
.footer-brand img { width: 46px; height: 46px; }
.footer-brand div { font-family: var(--serif); color: var(--champagne); font-size: 1.15rem; }
.footer-brand span { display: block; font-family: var(--sans); font-size: 0.78rem; color: var(--cream-dim); margin-top: 0.15rem; }

.footer-cols { display: flex; gap: 3rem; flex-wrap: wrap; }
.footer-col h5 { font-family: var(--sans); font-size: 0.78rem; letter-spacing: 0.1em; color: var(--gold); margin-bottom: 0.7rem; }
.footer-col p, .footer-col a { display: block; color: var(--cream-dim); font-size: 0.88rem; margin-bottom: 0.35rem; }
.footer-col a:hover { color: var(--champagne); }

.footer-bottom {
  margin-top: 2.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(201,162,75,0.18);
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  justify-content: space-between;
  font-size: 0.78rem;
  color: var(--cream-dim);
}
.footer-bottom a:hover { color: var(--champagne); }

/* ============================================================
   Simple content page (Impressum / Datenschutz)
   ============================================================ */
.legal-page { padding: 8rem 0 5rem; min-height: 100svh; }
.legal-page h1 { font-size: 2.2rem; margin-bottom: 1.5rem; }
.legal-page h2 { font-size: 1.3rem; margin: 2rem 0 0.75rem; color: var(--champagne); }
.legal-page p, .legal-page li { color: var(--cream-dim); font-size: 0.95rem; }
.legal-page a { color: var(--gold); }
.legal-page ul { padding-left: 1.2rem; }
.back-link { display: inline-flex; align-items: center; gap: 0.4rem; margin-bottom: 2rem; color: var(--gold); font-size: 0.9rem; }

/* ============================================================
   Premium upgrades: Hero slideshow / offers / gallery / WhatsApp
   ============================================================ */
.hero-slideshow { isolation: isolate; }
.hero-slides { position:absolute; inset:0; z-index:0; overflow:hidden; }
.hero-slide { position:absolute; inset:0; background-position:center 42%; background-size:cover; background-repeat:no-repeat; opacity:0; transform:scale(1.035); transition:opacity 1.4s ease, transform 7s ease; }
.hero-slide::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(11,11,11,.5),rgba(11,11,11,.72) 55%,rgba(11,11,11,.96)); }
.hero-slide.is-active { opacity:1; transform:scale(1); }
.hero-dots { position:absolute; z-index:4; left:50%; bottom:28px; transform:translateX(-50%); display:flex; gap:.5rem; padding:.45rem .65rem; border:1px solid var(--gold-dim); border-radius:999px; background:rgba(11,11,11,.42); backdrop-filter:blur(8px); }
.hero-dot { width:9px; height:9px; padding:0; border-radius:50%; border:1px solid var(--gold); background:transparent; cursor:pointer; transition:transform 180ms ease,background 180ms ease; }
.hero-dot.is-active { background:var(--gold); transform:scale(1.25); }
.hero .scroll-cue { bottom:76px; }
@media(max-width:560px){.hero-slideshow-label{bottom:64px;font-size:.58rem}.offers-empty{align-items:flex-start;flex-direction:column}}

.offers-section[hidden] { display:none; }
.offers-empty{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem;padding:1.25rem 1.5rem;border:1px dashed var(--gold-dim);border-radius:6px;background:rgba(20,43,32,.42);color:var(--cream-dim)}
.hero-slideshow-label{position:absolute;z-index:4;left:50%;bottom:62px;transform:translateX(-50%);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--champagne);white-space:nowrap;text-shadow:0 2px 12px rgba(0,0,0,.7)}
.offers-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
.offer-card { padding:1.5rem; border:1px solid var(--gold-dim); border-radius:6px; background:linear-gradient(145deg,rgba(20,43,32,.95),rgba(42,26,16,.72)); min-height:220px; display:flex; flex-direction:column; }
.offer-tag { align-self:flex-start; color:var(--black); background:var(--gold); padding:.25rem .65rem; border-radius:999px; font-size:.68rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase; }
.offer-card h3 { font-size:1.45rem; margin:.9rem 0 .25rem; }
.offer-card p { color:var(--cream-dim); font-size:.9rem; }
.offer-date { color:var(--champagne)!important; font-weight:600; margin-bottom:.5rem; }
.offer-bottom { margin-top:auto; padding-top:1.25rem; display:flex; justify-content:space-between; gap:1rem; align-items:end; }
.offer-bottom strong { color:var(--gold); font-size:1.05rem; }
@media (max-width:860px){.offers-grid{grid-template-columns:1fr 1fr}.offer-card{min-height:200px}}
@media (max-width:560px){.offers-grid{grid-template-columns:1fr}}

.gallery-large { grid-template-columns:repeat(3,1fr); gap:1rem; }
.gallery-large figure { aspect-ratio:4/3; cursor:zoom-in; }
.home-gallery { grid-template-columns:repeat(3,1fr); }
@media (max-width:700px){.gallery-large,.home-gallery{grid-template-columns:repeat(2,1fr)}}
@media (max-width:480px){.gallery-large,.home-gallery{grid-template-columns:1fr 1fr;gap:.55rem}.gallery-large figure{aspect-ratio:1/1}}

.lightbox { position:fixed; inset:0; z-index:500; display:grid; grid-template-columns:auto minmax(0,1fr) auto; grid-template-rows:minmax(0,1fr) auto; gap:1rem; align-items:center; justify-items:center; padding:4rem 1.5rem 2rem; background:rgba(4,6,5,.94); backdrop-filter:blur(12px); opacity:0; pointer-events:none; transition:opacity 180ms ease; }
.lightbox.open{opacity:1;pointer-events:auto}
.lightbox figure{grid-column:2;grid-row:1;margin:0;max-width:min(1100px,82vw);max-height:82vh;text-align:center}
.lightbox figure img{max-width:100%;max-height:76vh;width:auto;height:auto;border:1px solid var(--gold-dim);box-shadow:0 30px 80px rgba(0,0,0,.55)}
.lightbox figure figcaption{margin-top:.75rem;color:var(--cream);font-family:var(--serif);font-size:1.15rem}
.lightbox button{color:var(--champagne);background:rgba(11,11,11,.65);border:1px solid var(--gold-dim);cursor:pointer}
.lightbox-close{position:absolute;right:1.25rem;top:1rem;width:42px;height:42px;border-radius:50%;font-size:1.8rem;line-height:1}
.lightbox-prev,.lightbox-next{width:48px;height:60px;border-radius:4px;font-size:2.5rem}
.lightbox-prev{grid-column:1;grid-row:1}.lightbox-next{grid-column:3;grid-row:1}.lightbox-counter{grid-column:2;grid-row:2;color:var(--cream-dim);font-size:.78rem;letter-spacing:.1em}
.lightbox button:hover{border-color:var(--gold);background:rgba(201,162,75,.12)}
body.lightbox-open{overflow:hidden}
@media(max-width:650px){.lightbox{grid-template-columns:48px minmax(0,1fr) 48px;padding:4rem .6rem 1.5rem;gap:.35rem}.lightbox figure{max-width:92vw}.lightbox-prev,.lightbox-next{width:42px;height:50px;font-size:2rem}}

.whatsapp-float{position:fixed;right:1.15rem;bottom:1.15rem;z-index:120;display:inline-flex;align-items:center;gap:.55rem;padding:.72rem .95rem;border-radius:999px;background:#168b5a;color:#fff;border:1px solid rgba(255,255,255,.18);box-shadow:0 10px 30px rgba(0,0,0,.38);font-weight:700;font-size:.84rem;transition:transform 180ms ease,box-shadow 180ms ease,background 180ms ease}
.whatsapp-float svg{width:1.25rem;height:1.25rem}.whatsapp-float:hover{transform:translateY(-3px);background:#1aa567;box-shadow:0 14px 35px rgba(0,0,0,.45)}
@media(max-width:560px){.whatsapp-float{right:.75rem;bottom:.75rem;width:50px;height:50px;padding:0;justify-content:center}.whatsapp-float span{display:none}}

/* ============================================================
   Admin tool
   ============================================================ */
.admin-page{padding:8rem 0 5rem;min-height:100svh;background:radial-gradient(ellipse 900px 500px at 50% 0%,rgba(15,33,24,.35),transparent 65%)}
.admin-intro{max-width:760px;margin-bottom:2rem}.admin-intro h1{font-size:clamp(2.2rem,5vw,3.2rem);margin:.4rem 0 .8rem}.admin-card{border:1px solid var(--gold-dim);border-radius:7px;background:rgba(20,43,32,.72);padding:clamp(1.25rem,3vw,2rem);margin-top:1.25rem}.admin-card-head{display:flex;justify-content:space-between;gap:1rem;align-items:end;margin-bottom:1.25rem}.admin-card h2{font-size:1.65rem;margin-top:.25rem}.admin-badge,.admin-tag{display:inline-flex;align-items:center;border:1px solid var(--gold-dim);border-radius:999px;padding:.3rem .65rem;color:var(--gold);font-size:.7rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase}.admin-form{display:grid;gap:1rem}.admin-form label{display:grid;gap:.35rem;color:var(--champagne);font-size:.82rem;font-weight:600}.admin-form input,.admin-form textarea,.admin-form select{width:100%;border:1px solid rgba(201,162,75,.35);border-radius:4px;background:#0d1712;color:var(--cream);font:inherit;padding:.75rem .8rem;outline:none}.admin-form input:focus,.admin-form textarea:focus,.admin-form select:focus{border-color:var(--gold)}.admin-form textarea{resize:vertical}.admin-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:1rem}.admin-actions{display:flex;flex-wrap:wrap;gap:.7rem}.file-btn{cursor:pointer}.admin-list{display:grid;gap:.8rem}.admin-item{display:flex;justify-content:space-between;gap:1rem;border:1px solid rgba(201,162,75,.18);background:rgba(11,11,11,.35);padding:1rem;border-radius:5px}.admin-item h3{font-size:1.25rem;margin:.35rem 0}.admin-item p{color:var(--cream-dim);font-size:.88rem}.admin-meta{color:var(--champagne)!important}.admin-price{display:block;color:var(--gold);margin-top:.6rem}.admin-item-actions{display:flex;gap:.5rem;align-items:flex-start;flex:none}.admin-empty,.admin-note{color:var(--cream-dim);font-size:.88rem}.admin-publish{display:grid;gap:1rem}.admin-publish h2{margin:.25rem 0 .5rem}
@media(max-width:680px){.admin-grid-2{grid-template-columns:1fr}.admin-item{flex-direction:column}.admin-item-actions{width:100%}.admin-item-actions .btn{flex:1;justify-content:center}.admin-card-head{align-items:flex-start;flex-direction:column}}

/* ============================================================
   2026 Bistro UX upgrades: Heute / Reservierung / Quick actions
   ============================================================ */
.today-section { padding-top: 2rem; }
.today-card {
  display:grid; grid-template-columns:1.5fr 1fr; gap:1.5rem; align-items:stretch;
  border:1px solid var(--gold-dim); border-radius:10px; overflow:hidden;
  background:linear-gradient(120deg,rgba(20,43,32,.96),rgba(52,31,17,.82));
  box-shadow:0 24px 70px rgba(0,0,0,.2);
}
.today-copy { padding:clamp(1.5rem,4vw,2.5rem); }
.today-copy h2 { font-size:clamp(1.9rem,4vw,3rem); margin:.35rem 0 .65rem; }
.today-copy .lede { max-width:650px; }
.quick-actions { display:flex; flex-wrap:wrap; gap:.7rem; margin-top:1.2rem; }
.today-hours { display:flex; align-items:center; gap:1rem; padding:1.5rem; background:rgba(0,0,0,.22); border-left:1px solid rgba(201,162,75,.15); }
.today-clock { width:48px; height:48px; display:grid; place-items:center; border:1px solid var(--gold-dim); border-radius:50%; color:var(--gold); font-size:1.65rem; flex:none; }
.today-hours div { display:grid; gap:.25rem; }
.today-hours strong { color:var(--champagne); margin-bottom:.15rem; }
.today-hours span { color:var(--cream-dim); font-size:.88rem; }
.reservation-card { display:flex; align-items:center; justify-content:space-between; gap:1.5rem; padding:1.5rem 1.75rem; border:1px solid var(--gold-dim); border-radius:8px; background:rgba(20,43,32,.72); }
.reservation-card .lede { margin:0; max-width:720px; }
.reservation-benefits { display:flex; flex-wrap:wrap; gap:.7rem 1rem; margin-top:.8rem; color:var(--champagne); font-size:.8rem; }
.reservation-card .btn { flex:none; }
@media(max-width:760px){
  .today-card,.reservation-card{grid-template-columns:1fr; display:grid;}
  .today-hours{border-left:0;border-top:1px solid rgba(201,162,75,.15);}
  .reservation-card .btn{width:100%; justify-content:center;}
}


/* ---------- Reservierung V3 ---------- */
.reservation-form-card{display:grid;grid-template-columns:1fr 1.15fr;align-items:start}
.reservation-copy{padding-right:1rem}
.reservation-form{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}
.reservation-form label{display:grid;gap:.35rem;color:var(--champagne);font-size:.8rem;font-weight:600}
.reservation-form input,.reservation-form select{width:100%;min-height:44px;border:1px solid rgba(201,162,75,.35);border-radius:5px;background:#0d1712;color:var(--cream);font:inherit;padding:.65rem .75rem;outline:none}
.reservation-form input:focus,.reservation-form select:focus{border-color:var(--gold)}
.reservation-form .reservation-name{grid-column:1/-1}
.reservation-form button{width:100%;justify-content:center;grid-column:1/-1;margin-top:.15rem}
.reservation-hint{grid-column:1/-1;margin:0;color:var(--cream-dim);font-size:.78rem;min-height:1.1em}
@media(max-width:760px){.reservation-form-card{grid-template-columns:1fr}.reservation-copy{padding-right:0}.reservation-form{grid-template-columns:1fr}.reservation-form .reservation-name{grid-column:auto}.reservation-form button,.reservation-hint{grid-column:auto}}
/* ---------- Server-side Admin ---------- */
.admin-login-page{min-height:100vh;display:grid;place-items:center;background:var(--cream,#f5efe5);padding:24px}.admin-login{width:min(520px,100%)}.admin-login-card{background:#fff;border-radius:24px;padding:36px;box-shadow:0 20px 60px rgba(0,0,0,.12)}.admin-logo{width:110px;height:110px;object-fit:contain;display:block;margin:0 auto 16px}.admin-nav{display:flex;gap:10px;align-items:center}.admin-success,.admin-error{padding:14px 16px;border-radius:12px;margin:18px 0;font-weight:600}.admin-success{background:#e9f7ec}.admin-error{background:#fff0ed;color:#9b2f22}.admin-hero-preview{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;margin:18px 0}.admin-hero-preview img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:14px}.upload-box{border:2px dashed rgba(75,45,28,.25);padding:22px;border-radius:16px;display:grid;gap:8px;cursor:pointer}.upload-box input{margin-top:8px}.admin-subhead{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:28px 0 12px}.manage-row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;padding:16px;border:1px solid rgba(75,45,28,.12);border-radius:16px;margin-bottom:12px}.manage-row textarea{grid-column:1/-1;min-height:90px}.manage-row .remove-row{justify-self:start}.admin-note code{background:#f2eee7;padding:2px 6px;border-radius:6px}.admin-actions{display:flex;flex-wrap:wrap;gap:10px}.admin-form{display:grid;gap:14px}.admin-form label{display:grid;gap:7px;font-weight:600}.admin-form input,.admin-form textarea,.admin-form select{font:inherit;padding:12px 14px;border:1px solid rgba(75,45,28,.18);border-radius:10px;background:#fff}.admin-form button{font:inherit}@media(max-width:700px){.admin-nav{gap:6px}.admin-nav .btn{padding:9px 11px;font-size:.85rem}.manage-row{grid-template-columns:1fr}.manage-row textarea{grid-column:auto}.admin-login-card{padding:26px}.admin-subhead{align-items:flex-start;flex-direction:column}}


/* Direkt bestellen / anrufen */
.btn-call-order{background:#8f5b35;color:#fff;border:1px solid rgba(255,255,255,.16);box-shadow:0 8px 22px rgba(0,0,0,.18);font-weight:700}
.btn-call-order:hover{transform:translateY(-2px);filter:brightness(1.06);color:#fff}
.reservation-call{display:inline-flex;align-items:center;justify-content:center;text-decoration:none}
.order-banner{margin:1.5rem 0 2rem;padding:1.15rem 1.25rem;display:flex;align-items:center;justify-content:space-between;gap:1rem;border:1px solid rgba(143,91,53,.25);border-radius:18px;background:linear-gradient(135deg,rgba(143,91,53,.12),rgba(255,255,255,.03))}
.order-banner strong{display:block;font-size:1.2rem;margin:.15rem 0}.order-banner p{margin:.2rem 0 0;opacity:.8}.order-banner .eyebrow{margin:0}
@media(max-width:700px){.order-banner{flex-direction:column;align-items:stretch}.order-banner .btn{width:100%}.hero-ctas .btn-call-order{grid-column:1/-1}.reservation-call{width:100%}}

/* ============================================================
   Bistro Cappuccino · New lively editorial home design
   Existing functionality/classes are intentionally preserved.
   ============================================================ */
:root{
  --ink:#171612;--paper:#f7f2e8;--paper-2:#efe6d6;--cream:#fffaf0;--muted:#766f64;
  --olive:#31463a;--olive-2:#1f3028;--accent:#b98a35;--accent-2:#d9b765;--line:rgba(31,48,40,.13);
  --shadow:0 24px 60px rgba(25,21,15,.12);
}
html{background:var(--paper)}
body{background:var(--paper);color:var(--ink);font-family:var(--sans)}
body:after{content:"";position:fixed;inset:0;pointer-events:none;opacity:.025;z-index:9999;background-image:radial-gradient(#000 .5px,transparent .5px);background-size:5px 5px}
h1,h2,h3,h4{color:var(--olive-2)}
.lede{color:#665f54}
.site-header{padding:.85rem 0;background:rgba(247,242,232,.84);backdrop-filter:blur(16px);border-bottom:1px solid rgba(31,48,40,.08)}
.site-header.solid{background:rgba(247,242,232,.95);border-bottom-color:rgba(185,138,53,.25);padding:.62rem 0}
.brand{color:var(--olive-2)}
.brand img{width:46px;height:46px}
.nav-links a{color:#5d574e}.nav-links a:hover,.nav-links a.active{color:var(--olive-2)}
.nav-phone{color:#8e6825!important}.nav-toggle{color:var(--olive-2);border-color:rgba(31,48,40,.2)}
.mobile-nav{background:var(--paper);color:var(--olive-2)}.mobile-nav a{color:var(--olive-2)}
.btn{border-radius:999px;padding:.92rem 1.45rem;box-shadow:none}.btn-gold{background:var(--accent);color:#fff}.btn-gold:hover{background:#a4772b}.btn-outline{color:var(--olive-2);border-color:rgba(31,48,40,.24)}.btn-outline:hover{background:rgba(31,48,40,.06);border-color:var(--olive)}
.btn-light{background:rgba(255,250,240,.14);border:1px solid rgba(255,250,240,.65);color:#fff}.btn-light:hover{background:#fff;color:var(--olive-2)}
.btn-dark{background:var(--olive-2);color:#fff}.btn-dark:hover{background:#15231d}.btn-dark-outline{background:transparent;border:1px solid rgba(255,255,255,.4);color:#fff}.btn-dark-outline:hover{background:rgba(255,255,255,.08)}
.btn-call-order{background:#8f6327!important;color:#fff!important;border-color:#8f6327!important}.btn-call-order:hover{background:#734e20!important}
.hero{min-height:clamp(700px,100svh,900px);padding:8rem var(--gutter) 5.5rem;background:#15221b;border:0}
.hero::before{inset:0;border:0;background:linear-gradient(180deg,rgba(0,0,0,.28),rgba(0,0,0,.34) 50%,rgba(0,0,0,.7))}
.hero-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,22,17,.16),rgba(14,22,17,.2) 42%,rgba(14,22,17,.76) 100%);z-index:1}
.hero-slides{position:absolute;inset:0}.hero-slide{filter:saturate(.84) contrast(.96);transform:scale(1.04);transition:opacity 1.5s ease,transform 8s ease}.hero-slide.is-active{transform:scale(1.0)}
.hero-inner{z-index:3;max-width:850px;gap:1rem}.hero-logo-lockup{padding:.7rem 1rem;border-radius:20px;background:rgba(255,250,240,.94);box-shadow:0 22px 60px rgba(0,0,0,.24)}.hero-logo{width:clamp(190px,27vw,300px);filter:none}
.hero-kicker{font-size:clamp(1.55rem,3vw,2.15rem);color:#fff;margin-top:.8rem}.hero-hours{color:rgba(255,255,255,.82)}.hero-hours strong{color:#fff}.status-pill{border-color:rgba(255,255,255,.35);background:rgba(0,0,0,.18);color:#fff;backdrop-filter:blur(8px)}
.hero-ctas{gap:.65rem;margin-top:.45rem}.hero-note{display:flex;flex-wrap:wrap;justify-content:center;gap:.65rem;color:rgba(255,255,255,.75);font-size:.8rem;letter-spacing:.04em;margin-top:.35rem}.hero-note-dot{color:var(--accent-2)}
.hero-slideshow-label{z-index:3;background:rgba(0,0,0,.26);border-color:rgba(255,255,255,.22);color:#fff;backdrop-filter:blur(8px)}.hero-dots{z-index:3}.hero-dot{background:rgba(255,255,255,.4);border-color:transparent}.hero-dot.is-active{background:#fff}
.scroll-cue{z-index:3;border-color:rgba(255,255,255,.35)}.scroll-cue::after{background:#fff}
.section{padding:clamp(4.5rem,9vw,7.5rem) 0}.welcome{background:var(--paper)}.welcome-grid{display:grid;grid-template-columns:1fr .92fr;gap:clamp(2.5rem,7vw,6rem);align-items:center}.welcome-copy h1{font-size:clamp(3rem,6vw,5.4rem);line-height:.92;letter-spacing:-.045em;margin:.7rem 0 1.3rem}.welcome-copy h1 em,.section-head h2 em,.today-main h2 em,.atmosphere-copy h2 em,.gallery-title-row h2 em{font-family:var(--serif);font-style:italic;color:#9b702a}.welcome-copy .lede{font-size:1.08rem;line-height:1.8}.welcome-actions{display:flex;flex-wrap:wrap;gap:1.5rem;margin-top:1.6rem}.text-link{color:var(--olive-2);font-weight:700}.text-link span{color:var(--accent);margin-left:.3rem}.welcome-photo{position:relative;aspect-ratio:4/5;border-radius:24px;overflow:hidden;box-shadow:var(--shadow)}.welcome-photo img{width:100%;height:100%;object-fit:cover}.photo-stamp{position:absolute;right:18px;bottom:18px;background:rgba(255,250,240,.94);color:var(--olive-2);padding:.8rem 1rem;border-radius:14px;text-align:center;font-family:var(--serif);font-size:1rem;line-height:1.05}.photo-stamp strong{font-size:1.45rem}
.mood-band{background:var(--olive-2);color:#fff;padding:1.05rem 0;overflow:hidden}.mood-items{display:flex;justify-content:center;align-items:center;gap:1.25rem;white-space:nowrap;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase}.mood-items i{width:4px;height:4px;background:var(--accent-2);border-radius:50%}
.discover-section{background:#fffaf2}.section-head h2{font-size:clamp(2.5rem,5vw,4rem);line-height:.95;letter-spacing:-.035em}.section-head.left-head{text-align:left;max-width:560px;margin:0 0 2.8rem}.section-head.left-head .section-rule{margin-left:0}.section-sub{color:var(--muted);margin-top:.5rem}.choice-grid{display:grid;grid-template-columns:1.45fr 1fr 1fr;grid-template-rows:240px 240px;gap:14px}.choice-card{position:relative;overflow:hidden;border-radius:18px;min-height:240px;color:#fff;box-shadow:0 14px 35px rgba(30,23,15,.1)}.choice-card.choice-large{grid-row:span 2}.choice-card img{width:100%;height:100%;object-fit:cover;transition:transform .8s ease}.choice-card:hover img{transform:scale(1.07)}.choice-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.04) 30%,rgba(0,0,0,.78))}.choice-card>div{position:absolute;left:1.35rem;right:1.35rem;bottom:1.25rem}.choice-card small{opacity:.82;text-transform:uppercase;letter-spacing:.13em;font-size:.67rem}.choice-card h3{color:#fff;font-size:clamp(1.8rem,3vw,2.6rem);margin:.1rem 0 .1rem}.choice-card b{font-size:.78rem;color:#fff}.center-action{text-align:center;margin-top:2rem}
.offers-section{background:var(--paper-2)}.offers-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}.offer-card{background:#fffaf2!important;color:var(--ink)!important;border:1px solid rgba(31,48,40,.09)!important;border-radius:20px!important;padding:1.5rem!important;box-shadow:0 12px 32px rgba(30,23,15,.07)}.offer-card h3{color:var(--olive-2)!important}.offer-tag{background:rgba(185,138,53,.13)!important;color:#8b6527!important;border-radius:999px!important}.offer-date{color:#8b6527!important;font-weight:700}.offer-card p:not(.offer-date){color:#70695e!important}.offer-bottom strong{color:var(--olive-2)!important}
.today-section{background:var(--olive-2);color:#fff;padding:clamp(3rem,7vw,5.5rem) 0}.today-card{display:grid;grid-template-columns:1.5fr .75fr;gap:2rem;align-items:stretch}.today-main{padding:clamp(1rem,4vw,2rem)}.today-label{color:var(--accent-2);font-size:.72rem;font-weight:700;letter-spacing:.2em}.today-main h2{color:#fff;font-size:clamp(2.8rem,6vw,4.6rem);line-height:.92;margin:.65rem 0 1rem}.today-main p{color:rgba(255,255,255,.78);max-width:58ch}.quick-actions{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.4rem}.today-side{border-left:1px solid rgba(255,255,255,.16);padding:1.4rem 1rem 1.4rem 2rem;display:flex;flex-direction:column;justify-content:center;gap:.35rem;color:rgba(255,255,255,.7)}.today-side strong{color:#fff;font-family:var(--serif);font-size:1.4rem}.today-icon{font-size:2.2rem;color:var(--accent-2);margin-bottom:.3rem}
.atmosphere-section{background:#fffaf2}.atmosphere-grid{display:grid;grid-template-columns:1fr .9fr .8fr;gap:1.2rem;align-items:center}.atmosphere-photo{overflow:hidden;border-radius:20px;box-shadow:var(--shadow)}.atmosphere-photo img{width:100%;height:100%;object-fit:cover}.photo-a{aspect-ratio:4/5}.photo-b{aspect-ratio:3/4;position:relative}.photo-b span{position:absolute;left:14px;bottom:14px;background:rgba(255,250,240,.94);padding:.45rem .7rem;border-radius:999px;font-size:.72rem;color:var(--olive-2);font-weight:700}.atmosphere-copy{padding:1rem 1.5rem}.atmosphere-copy h2{font-size:clamp(2.6rem,5vw,4.3rem);line-height:.92;margin:.65rem 0 1rem}.atmosphere-copy p:not(.eyebrow){color:var(--muted);line-height:1.8;margin-bottom:1.4rem}
.gallery-lively{background:var(--paper-2)}.gallery-title-row{display:flex;justify-content:space-between;align-items:end;margin-bottom:2rem}.gallery-title-row h2{font-size:clamp(2.6rem,5vw,4.2rem);line-height:.9;margin-top:.5rem}.gallery-grid.home-gallery{display:grid;grid-template-columns:1.35fr .8fr .8fr;grid-auto-rows:190px;gap:12px}.home-gallery figure{margin:0;border-radius:18px;overflow:hidden;position:relative;background:#ddd}.home-gallery .gallery-main{grid-row:span 2}.home-gallery figure img{width:100%;height:100%;object-fit:cover;transition:transform .7s ease}.home-gallery figure:hover img{transform:scale(1.05)}.home-gallery figcaption{position:absolute;left:0;right:0;bottom:0;padding:1.1rem;color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.7));font-weight:600}.mobile-center-action{display:none;text-align:center;margin-top:1.5rem}
.quote-section{background:var(--olive);padding:4.5rem 0}.quote-card{position:relative;background:transparent!important;border:0!important;padding:2rem!important;text-align:center}.quote-mark{font-family:var(--serif);font-size:6rem;line-height:.4;color:var(--accent-2);opacity:.65}.quote-card p.script{font-size:clamp(2rem,4vw,3rem);color:#fff}.quote-card .quote-by{color:rgba(255,255,255,.68)}
.reservation-section{background:#fffaf2}.reservation-head{display:flex;justify-content:space-between;gap:2rem;align-items:end;margin-bottom:2rem}.reservation-head h2{font-size:clamp(2.6rem,5vw,4rem);margin:.4rem 0 .7rem}.reservation-callout{border-left:2px solid var(--accent);padding-left:1rem;color:var(--muted);font-size:.9rem}.reservation-callout strong{color:var(--olive-2)}.reservation-card{background:var(--olive-2)!important;border:0!important;border-radius:22px!important;box-shadow:var(--shadow)}.reservation-form{display:grid;grid-template-columns:1fr 1fr .75fr 1fr;gap:.8rem;padding:1.3rem}.reservation-form label{color:rgba(255,255,255,.72);font-size:.76rem;text-transform:uppercase;letter-spacing:.08em}.reservation-form input,.reservation-form select{display:block;width:100%;margin-top:.35rem;background:#fffaf2;color:var(--ink);border:0;border-radius:10px;padding:.9rem 1rem;font:inherit}.reservation-form button,.reservation-form .reservation-call{align-self:end;min-height:48px}.reservation-form .reservation-name{grid-column:span 1}.reservation-hint{grid-column:1/-1;color:#fff;font-size:.82rem;padding:0 .25rem}
.site-footer{background:#15221b;color:#e9e1d3;border-top:0}.footer-brand{color:#fff}.footer-brand img{width:52px;height:52px;background:#fffaf2;border-radius:12px}.footer-cols{color:#c9c0b2}.footer-col h5{color:var(--accent-2)}.footer-col a:hover{color:#fff}.footer-bottom{border-top-color:rgba(255,255,255,.12);color:#9f998e}.footer-bottom a{color:#d6cec1}
.whatsapp-float{background:#1c8b57!important;box-shadow:0 10px 28px rgba(0,0,0,.2)}.mobile-action-bar{display:none}
@media(max-width:900px){.nav-links{gap:1rem}.welcome-grid,.today-card{grid-template-columns:1fr}.atmosphere-grid{grid-template-columns:1fr 1fr}.atmosphere-copy{grid-column:1/-1;grid-row:1}.photo-a,.photo-b{aspect-ratio:1/1}.offers-grid{grid-template-columns:1fr 1fr}.reservation-form{grid-template-columns:1fr 1fr}.reservation-form .reservation-name{grid-column:1/-1}.choice-grid{grid-template-columns:1fr 1fr;grid-template-rows:240px 240px}.choice-card.choice-large{grid-row:span 2}.today-side{border-left:0;border-top:1px solid rgba(255,255,255,.14);padding:1.5rem 1rem 0}.reservation-head{align-items:start}}
@media(max-width:680px){body{padding-bottom:64px}.hero{min-height:720px;padding-top:7rem}.hero-logo{width:190px}.hero-kicker{font-size:1.55rem}.hero-hours{font-size:.8rem}.hero-ctas{width:100%;flex-direction:column}.hero-ctas .btn{width:100%;justify-content:center}.hero-note{font-size:.72rem}.welcome-grid{gap:2rem}.welcome-copy h1{font-size:3.35rem}.mood-items{justify-content:flex-start;overflow:hidden;font-size:.66rem}.choice-grid{grid-template-columns:1fr 1fr;grid-template-rows:200px 200px}.choice-card.choice-large{grid-column:span 2;grid-row:span 1;min-height:230px}.choice-card h3{font-size:1.8rem}.offers-grid{grid-template-columns:1fr}.today-main{padding:.3rem 0}.quick-actions{flex-direction:column}.quick-actions .btn{width:100%;justify-content:center}.atmosphere-grid{grid-template-columns:1fr}.atmosphere-copy{grid-column:auto;grid-row:auto;padding:0}.gallery-title-row{align-items:start}.desktop-link{display:none}.gallery-grid.home-gallery{grid-template-columns:1fr 1fr;grid-auto-rows:150px}.home-gallery .gallery-main{grid-column:1/-1;grid-row:span 1}.mobile-center-action{display:block}.reservation-head{flex-direction:column}.reservation-form{grid-template-columns:1fr}.reservation-form .reservation-name{grid-column:auto}.reservation-form button,.reservation-form .reservation-call{width:100%;justify-content:center}.mobile-action-bar{display:flex;position:fixed;z-index:300;bottom:0;left:0;right:0;height:64px;background:rgba(23,34,28,.97);backdrop-filter:blur(14px);box-shadow:0 -8px 25px rgba(0,0,0,.14);justify-content:space-around}.mobile-action-bar a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;color:#eee6d9;font-size:1rem}.mobile-action-bar a span{font-size:.61rem;letter-spacing:.04em}.mobile-action-bar a.call{background:#8f6327}.whatsapp-float{right:14px!important;bottom:78px!important}.whatsapp-float span{display:none}.whatsapp-float{width:52px;height:52px!important;padding:0!important;justify-content:center}}


/* ============================================================
   Final accessibility/readability fixes — especially Speisekarte
   ============================================================ */
.speisekarte-page, body:has(#menu-panel) {
  background: #fbf7ef;
  color: #241f19;
}
body:has(#menu-panel) .site-header {
  background: rgba(251,247,239,.96);
  border-bottom-color: rgba(49,70,58,.12);
}
body:has(#menu-panel) .menu-tabs {
  padding: .35rem .1rem 1rem;
  scrollbar-color: rgba(49,70,58,.28) transparent;
}
body:has(#menu-panel) .menu-tab {
  color: #4c463d !important;
  background: #fffdf8 !important;
  border-color: rgba(49,70,58,.22) !important;
  min-height: 46px;
}
body:has(#menu-panel) .menu-tab:hover,
body:has(#menu-panel) .menu-tab:focus-visible {
  color: #1f3028 !important;
  border-color: #b98a35 !important;
  background: #f7edda !important;
}
body:has(#menu-panel) .menu-tab[aria-selected="true"] {
  color: #fff !important;
  background: #31463a !important;
  border-color: #31463a !important;
}
body:has(#menu-panel) .menu-panel-head h3 {
  color: #25382f !important;
}
body:has(#menu-panel) .menu-note {
  color: #6d665d !important;
}
body:has(#menu-panel) .menu-item {
  border-bottom-color: rgba(49,70,58,.14);
}
body:has(#menu-panel) .menu-item-name {
  color: #2a2722 !important;
}
body:has(#menu-panel) .menu-item-name .nr,
body:has(#menu-panel) .menu-item-name .codes {
  color: #9a7129 !important;
}
body:has(#menu-panel) .menu-item-desc {
  color: #6c655c !important;
}
body:has(#menu-panel) .menu-item-price {
  color: #9a7129 !important;
}
body:has(#menu-panel) .menu-item-price .variant {
  color: #9a7129 !important;
}
body:has(#menu-panel) .menu-download,
body:has(#menu-panel) .order-banner,
body:has(#menu-panel) .legend-details {
  color: #2a2722;
}
body:has(#menu-panel) .menu-download p,
body:has(#menu-panel) .order-banner p,
body:has(#menu-panel) .legend-grid {
  color: #6c655c;
}
@media (max-width: 700px) {
  body:has(#menu-panel) .menu-tabs { gap: .55rem; }
  body:has(#menu-panel) .menu-tab { font-size: .88rem; padding: .62rem .95rem; }
  body:has(#menu-panel) .menu-item { gap: 1rem; padding: 1rem 0; }
  body:has(#menu-panel) .menu-item-main { max-width: calc(100% - 88px); }
  body:has(#menu-panel) .menu-item-name { font-size: 1rem; line-height: 1.4; }
  body:has(#menu-panel) .menu-item-desc { font-size: .84rem; line-height: 1.45; }
  body:has(#menu-panel) .menu-item-price { font-size: 1rem; }
}

/* Admin login/readability */
.admin-login-page { color: #241f19; }
.admin-login-page .eyebrow { color: #9a7129; }
.admin-login-page h1 { color: #25382f; }
.admin-login-page .lede { color: #6c655c; }
.admin-login-page .admin-form label { color: #403a33; }
.admin-login-page .admin-form input { color: #241f19; background: #fff; }