/* ============================================
   Casa Bellucci — Vivid & Lively Additions
   Scroll reveals, bold sections, enhanced hovers,
   gallery variants, mobile-first
   ============================================ */

/* ============================================
   1. CSS SCROLL-DRIVEN REVEAL
   No JavaScript needed — uses native CSS
   ============================================ */
@supports (animation-timeline: view()) {
  .about .grid > *,
  .about .stat-strip,
  .about .stat-strip .stat,
  .menu .top,
  .menu .grid,
  .terrace .copy,
  .terrace .img,
  .wine .top,
  .wine .regions .region,
  .gallery .top,
  .press-cards .head,
  .press-cards .row,
  .contact .grid > * {
    animation: cssReveal linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 35%;
  }
  .menu .dish {
    animation: cssReveal linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 25%;
  }
}
@keyframes cssReveal {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* Fallback: no scroll animation support = everything visible */
@supports not (animation-timeline: view()) {
  .about .grid > *,
  .about .stat-strip,
  .menu .top, .menu .grid, .menu .dish,
  .terrace .copy, .terrace .img,
  .wine .top, .wine .regions .region,
  .gallery .top,
  .press-cards .head, .press-cards .row,
  .contact .grid > * {
    opacity: 1; transform: none;
  }
}

/* ============================================
   2. IMAGE HERO
   ============================================ */
.image-hero {
  position: relative;
  min-height: 100svh;
  height: 100svh;
  padding: 0 !important;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  background:
    url("../images/hero-summer-desktop.jpg") center center / cover no-repeat #fff8ea;
  color: #2b190d;
}
.image-hero-shade {
  position: absolute;
  inset: 0;
  background: transparent;
}
.image-hero-content {
  position: relative;
  z-index: 1;
  width: 100%;
  min-width: 0;
  padding-bottom: clamp(70px, 10vh, 118px);
}
.image-hero-copy {
  max-width: 650px;
  text-shadow: none;
}
.image-hero-eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 22px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  line-height: 1.35;
  text-transform: uppercase;
  color: rgba(65, 43, 22, 0.62);
}
.image-hero h1 {
  max-width: 16ch;
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(40px, 4.4vw, 66px);
  overflow-wrap: break-word;
  font-weight: 500;
  line-height: 0.92;
  letter-spacing: 0;
  color: #2b190d;
}
.image-hero p {
  max-width: 21em;
  margin: 26px 0 0;
  font-family: var(--font-body);
  font-size: clamp(16px, 1.45vw, 20px);
  font-weight: 300;
  line-height: 1.38;
  color: rgba(43, 25, 13, 0.72);
}
.image-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  margin-top: 36px;
}
.btn-primary.btn-on-dark {
  color: #2b190d !important;
}
.btn-primary.btn-on-dark::after {
  background: rgba(175, 126, 32, 0.72) !important;
}
.btn-primary.btn-on-dark:hover {
  color: rgba(175, 126, 32, 0.96) !important;
}
.btn-ghost.btn-on-dark {
  color: rgba(43, 25, 13, 0.56) !important;
}
.btn-ghost.btn-on-dark::after {
  background: rgba(43, 25, 13, 0.28) !important;
}
.btn-ghost.btn-on-dark:hover {
  color: #2b190d !important;
}
.image-hero-scroll {
  position: absolute;
  left: 50%;
  bottom: 20px;
  z-index: 1;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(43, 25, 13, 0.44);
}
.image-hero-scroll i {
  width: 1px;
  height: 34px;
  background: linear-gradient(to bottom, rgba(43, 25, 13, 0.32), transparent);
}

@media (min-width: 881px) {
  .site-header:not(.is-scrolled) {
    background: rgba(255, 248, 234, 0.88);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    box-shadow: 0 1px 0 rgba(65, 43, 22, 0.10);
    color: #2b190d;
  }

  .site-header:not(.is-scrolled) .brand,
  .site-header:not(.is-scrolled) .brand .bellucci,
  .site-header:not(.is-scrolled) .nav-links a,
  .site-header:not(.is-scrolled) .lang-switch button.active,
  .site-header:not(.is-scrolled) .btn.header-cta {
    color: #2b190d;
  }

  .site-header:not(.is-scrolled) .nav-links a:hover,
  .site-header:not(.is-scrolled) .btn.header-cta:hover {
    color: rgba(175, 126, 32, 0.96);
  }

  .site-header:not(.is-scrolled) .lang-switch button,
  .site-header:not(.is-scrolled) .lang-switch .sep {
    color: rgba(43, 25, 13, 0.42);
  }

  .site-header:not(.is-scrolled) .nav-links a::after,
  .site-header:not(.is-scrolled) .btn.header-cta::after {
    background: rgba(175, 126, 32, 0.72);
  }
}

@media (max-width: 880px) {
  .image-hero {
    min-height: 760px;
    height: 100svh;
  }
  .image-hero-shade {
    background:
      radial-gradient(ellipse at 24% 18%, rgba(244,208,63,0.12) 0%, transparent 52%),
      linear-gradient(180deg, rgba(20,13,6,0.28) 0%, rgba(20,13,6,0.08) 30%, rgba(20,13,6,0.24) 50%, rgba(20,13,6,0.8) 72%, rgba(20,13,6,0.96) 100%);
  }
  .image-hero-content {
    padding: 0 24px 92px;
  }
  .image-hero-eyebrow {
    font-size: 10px;
    letter-spacing: 0.18em;
  }
  .image-hero h1 {
    font-size: clamp(30px, 8.2vw, 52px);
  }
  .image-hero p {
    font-size: clamp(22px, 6.5vw, 32px);
  }
  .image-hero-actions {
    gap: 18px;
    margin-top: 34px;
  }
  .image-hero-actions .btn {
    padding-bottom: 12px;
    font-size: 14px;
    letter-spacing: 0.12em;
  }
}

/* ============================================
   4. MAJOLIKA DIVIDER
   ============================================ */
.majolika-divider {
  position: relative; overflow: hidden;
  background: var(--surface);
}
.majolika-divider svg { opacity: 0.18 !important; }
.majolika-fade-top, .majolika-fade-bottom {
  position: absolute; left: 0; right: 0; height: 16px; z-index: 1;
}
.majolika-fade-top    { top: 0; background: linear-gradient(to bottom, var(--bg), transparent); }
.majolika-fade-bottom { bottom: 0; background: linear-gradient(to top, var(--bg), transparent); }

/* ============================================
   5. ENHANCED HOVERS & MICRO-INTERACTIONS
   ============================================ */
/* btn-primary glow removed — typographic buttons don't need it */

.dish {
  transition: background 0.3s ease !important;
  margin-left: -12px; margin-right: -12px;
  padding-left: 12px !important; padding-right: 12px !important;
  border-radius: 8px;
}
.dish:hover { background: var(--accent-soft); }

.wine .region {
  transition: transform 0.4s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.4s ease !important;
}
.wine .region:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 40px -16px rgba(60,40,18,0.3);
}

.about-spread .img-col .ph img {
  transition: transform 0.8s cubic-bezier(0.25,0.46,0.45,0.94) !important;
}
.about-spread .img-col .ph:hover img { transform: scale(1.05); }
.stat { transition: color 0.3s ease; cursor: default; }
.stat:hover .n { color: var(--accent); transition: color 0.3s ease; }

/* ============================================
   6. GALLERY FILMSTRIP
   ============================================ */
.filmstrip-wrap {
  overflow-x: auto;
  overflow-y: hidden;
  margin: 36px 0 0;
  padding: 12px 0;
  max-width: 100%;
}
.filmstrip-track {
  display: flex; gap: 20px; padding: 0;
  overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.filmstrip-track::-webkit-scrollbar { display: none; }
.filmstrip-frame {
  flex: 0 0 300px; scroll-snap-align: start;
  aspect-ratio: 3/4; border-radius: var(--radius);
  overflow: hidden; position: relative; cursor: pointer;
}
.filmstrip-frame img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.6s ease;
}
.filmstrip-frame:hover img { transform: scale(1.08); }
.filmstrip-frame::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(26,18,8,0.65) 100%);
  pointer-events: none;
}
.filmstrip-label {
  position: absolute; bottom: 16px; left: 16px;
  font-family: var(--font-script); font-size: 22px;
  color: #FFF9F0; z-index: 1;
  text-shadow: 0 2px 8px rgba(0,0,0,0.4);
}
.filmstrip-number {
  position: absolute; top: 14px; right: 14px;
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.15em; color: rgba(255,249,240,0.6); z-index: 1;
}

/* ============================================
   8. TRICOLORE ACCENT LINE
   ============================================ */
.tricolore-line {
  display: flex; height: 3px; width: 100%; border-radius: 2px; overflow: hidden;
}
.tricolore-line > span:nth-child(1) { flex: 1; background: #008C45; }
.tricolore-line > span:nth-child(2) { flex: 1; background: #F4F5F0; }
.tricolore-line > span:nth-child(3) { flex: 1; background: #CD212A; }

/* ============================================
   9. MOBILE OVERRIDES
   ============================================ */
@media (max-width: 880px) {
  .filmstrip-frame { flex: 0 0 260px; }
  .filmstrip-wrap { margin: 28px 0 0; }
  .filmstrip-track { padding: 0; gap: 14px; }
}
@media (max-width: 480px) {
  .filmstrip-frame { flex: 0 0 220px; }
}

/* ============================================
   CODEX 4 — TERRACE CARD SYSTEM PAGE PASS
   Bright summer magazine atmosphere based on
   the mobile Sommerterrasse card.
   ============================================ */
:root {
  --summer-page: #fffaf1;
  --summer-cream: rgba(255, 250, 241, 0.82);
  --summer-cream-solid: #fff8ea;
  --summer-border: rgba(255, 249, 240, 0.76);
  --summer-hairline: rgba(88, 62, 34, 0.13);
  --summer-gold: rgba(230, 187, 73, 0.42);
  --summer-gold-soft: rgba(246, 215, 120, 0.24);
  --summer-olive: rgba(116, 137, 73, 0.18);
  --summer-rose: rgba(224, 140, 134, 0.18);
  --summer-shadow: 0 32px 80px -42px rgba(73, 47, 22, 0.42);
  --summer-photo-shadow: 0 28px 74px -34px rgba(55, 35, 17, 0.5);
}

body {
  background: var(--summer-page);
}

.all-day,
.signature-menu,
.gallery,
.reservation,
.contact {
  overflow: hidden;
  background:
    radial-gradient(ellipse at 82% 4%, var(--summer-gold-soft), transparent 40%),
    radial-gradient(ellipse at 10% 34%, rgba(255, 249, 240, 0.9), transparent 38%),
    linear-gradient(180deg, #fffaf1 0%, #fbefd0 54%, #fff7e6 100%);
  color: var(--ink);
}

.all-day::after,
.signature-menu::before,
.gallery::before,
.reservation::before,
.contact::before {
  content: "";
  position: absolute;
  inset: auto -12% -18% auto;
  width: min(520px, 62vw);
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle at 44% 42%, rgba(246, 212, 104, 0.28), transparent 58%),
    radial-gradient(circle at 66% 56%, var(--summer-olive), transparent 58%);
  filter: blur(14px);
  pointer-events: none;
}

.all-day .wrap,
.signature-menu .wrap,
.gallery .wrap,
.reservation .wrap,
.contact .wrap {
  position: relative;
  z-index: 1;
}

.section-eyebrow .eyebrow,
.image-hero-eyebrow,
.moment-time,
.signature-label,
.signature-open,
.terrace-photo figcaption span,
.terrace-moment span,
.reservation-line span,
.contact .info .block .k,
.contact .map .corner,
.filmstrip-number,
.site-footer h5,
.site-footer .bottom {
  letter-spacing: 0.24em;
}

.btn,
.terrace-actions .btn,
.signature-actions .btn,
.reservation-actions .btn,
.contact-actions .btn,
.footer-cta .btn {
  color: var(--ink);
  background: transparent;
  border: 0;
  box-shadow: none;
  justify-content: flex-start;
  padding-left: 0;
  padding-right: 0;
}

.btn-ghost {
  color: rgba(43, 31, 18, 0.54);
}

.btn-primary::after,
.btn-ghost::after {
  background: var(--ink);
}

.btn-primary:hover,
.btn-ghost:hover {
  color: var(--ink);
}

.all-day-copy,
.signature-list,
.gallery .top,
.reservation-inner > div:first-child,
.reservation-card,
.contact .grid > div:first-child {
  position: relative;
  border: 1px solid var(--summer-border);
  border-radius: 8px;
  background:
    radial-gradient(circle at 86% 20%, var(--summer-gold-soft), transparent 34%),
    radial-gradient(circle at 93% 70%, var(--summer-rose), transparent 36%),
    rgba(255, 249, 240, 0.66);
  box-shadow: var(--summer-shadow);
  /* backdrop-filter entfernt: kein Bild dahinter -> Blur war wirkungslos */
}

.all-day-copy {
  padding: 30px;
}

.all-day h2,
.signature-menu h2,
.gallery h2,
.reservation h2,
.contact h2 {
  letter-spacing: 0;
  color: var(--ink);
}

.all-day-copy > p,
.signature-menu-head > p,
.gallery .lede,
.reservation .lede,
.contact .lede {
  color: rgba(43, 31, 18, 0.72);
}

.dayline {
  border-color: var(--summer-hairline);
}

.day-moment {
  border-color: var(--summer-hairline);
}

.day-moment::before {
  background: rgba(43, 31, 18, 0.58);
}

/* Desktop: Tageszeit-Label hochkant, schmale Spalte gibt dem Text mehr Breite */
@media (min-width: 881px) {
  .day-moment {
    grid-template-columns: 30px minmax(0, 1fr);
    column-gap: 24px;
  }
  .day-moment::before {
    left: 30px;
    transform: translateX(24px);
  }
  .moment-time {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    align-self: start;
    justify-self: center;
    padding-top: 0;
    letter-spacing: 0.26em;
  }
}

/* Gestapelter Tablet-Bereich: Karte und Inhalte volle Breite nutzen */
@media (min-width: 881px) and (max-width: 980px) {
  .all-day-copy {
    max-width: none;
  }
  .all-day h2 {
    max-width: none;
  }
  .all-day-copy > p {
    max-width: none;
  }
  .day-moment p {
    max-width: none;
  }
}

.all-day-photo,
.signature-menu-hero,
.filmstrip-frame,
.contact .map {
  border: 1px solid var(--summer-border);
  border-radius: 8px;
  box-shadow: var(--summer-photo-shadow);
}

.all-day-photo::before,
.signature-menu-hero::before,
.filmstrip-frame::before,
.contact .map::before {
  content: "";
  position: absolute;
  inset: 12px;
  z-index: 2;
  border: 1px solid rgba(255, 249, 240, 0.72);
  border-radius: 6px;
  pointer-events: none;
}

/* Unterseiten: den dekorativen inneren Rahmen der Bild-Karten entfernen,
   damit das Bild randlos ohne scheinbares Padding sitzt. Homepage behaelt
   den Rahmen. Gilt ueber alle Breakpoints (Regel nur einmal definiert). */
.subpage .all-day-photo::before {
  content: none;
}

/* Hinweis: .all-day-media wird auf Mobile (<=880px) seitenuebergreifend als
   full-bleed Image-Slider behandelt (siehe Bleed-Regeln in den Mobile-
   Bloecken weiter unten). Daher KEINE .subpage-Sonderbehandlung mehr fuer den
   Container, damit auch die Unterseiten-Slider bei 0px vom Screenrand starten
   und die Bilder von drausen hereinscrollen. */

.all-day-photo img,
.signature-menu-hero img,
.filmstrip-frame img,
.contact .map {
  filter: saturate(1.08) contrast(1.01) brightness(1.03);
}

.all-day-photo figcaption,
.filmstrip-label,
.contact .map .corner,
.contact .map .pin .label {
  color: var(--ink);
  /* Glas-Material (bg, Rand, Radius, Blur, Schatten) kommt zentral aus den
     --glass-* Tokens — siehe Single-Source-Regel am Ende dieser Datei. */
}

.all-day-photo figcaption {
  left: 16px;
  right: auto;
  bottom: 16px;
  z-index: 3;
  padding: 10px 12px;
  color: var(--ink);
  text-shadow: none;
}

.all-day-photo.evening figcaption {
  left: 22px;
  right: 22px;
  bottom: 22px;
  padding: 15px 17px;
}

.signature-menu-head > p {
  margin-bottom: 0;
}

.signature-menu-hero {
  min-height: 460px;
}

.signature-hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0;
  transform: scale(1.04);
  transition: opacity .7s cubic-bezier(.16, 1, .3, 1), transform 1.2s cubic-bezier(.16, 1, .3, 1);
}

.signature-hero-img.is-active {
  opacity: 1;
  transform: scale(1);
}

.signature-menu-hero:hover .signature-hero-img.is-active {
  transform: scale(1.04);
}

.signature-menu-hero figcaption {
  animation: signatureCaptionIn .5s cubic-bezier(.16, 1, .3, 1) both;
}

@keyframes signatureCaptionIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.signature-menu-hero::after {
  z-index: 1;
  background:
    linear-gradient(180deg, transparent 30%, rgba(255, 249, 240, 0.08) 58%, rgba(43, 31, 18, 0.26) 100%);
}

.signature-menu-hero figcaption {
  left: 24px;
  right: 24px;
  bottom: 24px;
  width: auto;
  max-width: none;
  z-index: 3;
  padding: clamp(16px, 2vw, 22px);
  color: var(--ink);
  /* Glas-Material zentral aus den --glass-* Tokens (Regel am Dateiende). */
}

.signature-menu-hero figcaption span {
  color: rgba(43, 31, 18, 0.58);
}

.signature-list {
  justify-content: center;
  padding: clamp(12px, 2vw, 22px);
  border-top: 1px solid var(--summer-border);
}

.signature-item {
  border-bottom-color: var(--summer-hairline);
  /* Auf allen Views gestapelt wie auf Mobile: Label, Titel, Text und Karte-Link
     untereinander statt nebeneinander, damit der Beschreibungstext die volle
     Breite der Karte nutzt. */
  grid-template-columns: 1fr;
  gap: 8px;
  align-items: start;
}

.signature-item p {
  max-width: none;
}

.signature-item:hover {
  background: rgba(255, 244, 201, 0.42);
}

.signature-open {
  color: rgba(43, 31, 18, 0.44);
  justify-self: start;
  padding-top: 0;
}

/* Dezente Aufmerksamkeits-Animation: "Karte oeffnen" leuchtet reihum gelb auf und
   schiebt sich 4px nach rechts, genau wie der Hover. Reihenfolge Fruehstueck, Lunch,
   Dinner, Bar, dann von vorne. Hover auf irgendeine Karte pausiert den Zyklus. */
@keyframes signatureOpenCue {
  0%   { color: rgba(43, 31, 18, 0.44); transform: translateX(0); }
  5%   { color: var(--accent);          transform: translateX(4px); }
  18%  { color: var(--accent);          transform: translateX(4px); }
  25%  { color: rgba(43, 31, 18, 0.44); transform: translateX(0); }
  100% { color: rgba(43, 31, 18, 0.44); transform: translateX(0); }
}

.signature-open {
  animation: signatureOpenCue 8s ease-in-out infinite;
}
.signature-item:nth-child(1) .signature-open { animation-delay: 0s; }
.signature-item:nth-child(2) .signature-open { animation-delay: 2s; }
.signature-item:nth-child(3) .signature-open { animation-delay: 4s; }
.signature-item:nth-child(4) .signature-open { animation-delay: 6s; }

.signature-list:hover .signature-open {
  animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
  .signature-open {
    animation: none;
  }
}

.signature-actions,
.reservation-actions,
.contact-actions,
.footer-cta {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}

/* Hero-CTAs in der Copy-Card immer nebeneinander (wie auf der Homepage), auch
   wenn die Spalte im mittleren Breitenbereich schmal wird. Kompaktes Gap statt
   Umbruch. */
.all-day-copy .contact-actions {
  flex-wrap: nowrap;
  gap: clamp(14px, 1.6vw, 24px);
}

/* .terrace-photo figcaption: Glas-Material zentral aus --glass-* Tokens. */

.terrace-panel {
  border-color: rgba(255, 249, 240, 0.7);
  background:
    radial-gradient(circle at 90% 12%, var(--summer-gold-soft), transparent 36%),
    rgba(255, 249, 240, 0.82);
  box-shadow: 0 28px 80px -42px rgba(46, 74, 39, 0.38);
}

/* Editorial Split: Bild ueber volle Hoehe links, Panel plus Aktionen
   vertikal zentriert rechts. Laedt nach styles.css und gewinnt damit
   gegen den breiteren 980px-Block fuer den Bereich ab 881px. */
@media (min-width: 881px) {
  .terrace-stage {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    grid-template-rows: 1fr auto auto 1fr;
    grid-template-areas:
      "photo ."
      "photo panel"
      "photo actions"
      "photo .";
    column-gap: clamp(40px, 4vw, 72px);
    row-gap: clamp(18px, 2vw, 30px);
    align-items: stretch;
  }
  /* Bild fuellt die volle Spaltenhoehe, object-fit cover regelt den Rest. */
  .terrace-photo {
    justify-self: stretch;
    width: 100%;
    height: 100%;
  }
  .terrace-panel {
    justify-self: stretch;
    width: 100%;
  }
  .terrace-actions {
    justify-self: start;
    margin-top: 0;
  }
  /* Kompakte Glasflaeche: Label oben, kleinere Headline darunter. */
  .terrace-photo figcaption h2 {
    font-size: clamp(28px, 2.6vw, 40px);
  }
}

.gallery .top {
  padding: clamp(24px, 4vw, 40px);
  margin-bottom: clamp(24px, 4vw, 42px);
}

.filmstrip-wrap {
  margin-top: 0;
  padding: 14px 0 26px;
}

.filmstrip-track {
  gap: clamp(18px, 2.4vw, 28px);
}

.filmstrip-frame {
  flex-basis: 340px;
  border-radius: 8px;
}

.filmstrip-frame::after {
  z-index: 1;
  opacity: 1;
  background:
    linear-gradient(180deg, rgba(255, 249, 240, 0.03) 0%, rgba(255, 249, 240, 0.02) 48%, rgba(43, 31, 18, 0.18) 100%);
}

.filmstrip-label {
  left: 18px;
  right: 18px;
  bottom: 18px;
  z-index: 3;
  width: auto;
  padding: 13px 15px;
  font-family: var(--font-display);
  font-size: 22px;
  font-style: italic;
  line-height: 1.08;
  text-shadow: none;
}

.filmstrip-number {
  top: 24px;
  right: 24px;
  z-index: 3;
  padding: 7px 8px;
  color: var(--ink);
  /* Glas-Material + runde Form zentral (.filmstrip-number-Regel am Dateiende). */
}

.reservation {
  background:
    radial-gradient(ellipse at 22% 14%, rgba(255, 249, 240, 0.86), transparent 36%),
    radial-gradient(ellipse at 90% 20%, var(--summer-gold), transparent 38%),
    linear-gradient(145deg, #fffaf1 0%, #f4e1a4 58%, #ead08b 100%);
}

.reservation-inner > div:first-child,
.reservation-card,
.contact .grid > div:first-child {
  padding: clamp(26px, 4vw, 42px);
}

.reservation-card {
  overflow: hidden;
}

.reservation-line {
  border-color: var(--summer-hairline);
}

.contact .grid > div:first-child {
  align-self: stretch;
}

.contact .map {
  min-height: 560px;
  overflow: hidden;
}

.contact .map::after {
  background:
    linear-gradient(180deg, rgba(255, 249, 240, 0) 34%, rgba(43, 31, 18, 0.22) 100%);
}

.contact .map .corner {
  bottom: 22px;
  left: 22px;
  z-index: 3;
  padding: 12px 14px;
}

.contact .map .pin .dot {
  background: #d8ad36;
  border-color: #fff8ea;
}

.site-footer {
  border-top: 1px solid var(--summer-hairline);
  background:
    radial-gradient(circle at 84% 8%, var(--summer-gold-soft), transparent 34%),
    radial-gradient(circle at 12% 74%, var(--summer-olive), transparent 36%),
    linear-gradient(180deg, #fffaf1 0%, #f6ecda 100%);
}

.footer-grid {
  border-bottom-color: rgba(43, 31, 18, 0.14);
}

.footer-socials a {
  border-color: rgba(43, 31, 18, 0.14);
}

@media (max-width: 880px) {
  .all-day,
  .signature-menu,
  .gallery,
  .reservation,
  .contact {
    padding: 72px 0;
  }

  .all-day {
    padding-top: 78px;
  }

  .signature-menu {
    padding-top: 76px;
  }

  .all-day-grid,
  .signature-menu-grid,
  .reservation-inner,
  .contact .grid {
    gap: 28px;
  }

  .all-day-copy,
  .signature-list,
  .gallery .top,
  .reservation-inner > div:first-child,
  .reservation-card,
  .contact .grid > div:first-child {
    padding: 22px;
  }

  .all-day-copy {
    max-width: none;
  }

  .all-day h2,
  .signature-menu h2,
  .gallery h2,
  .reservation h2,
  .contact h2 {
    font-size: clamp(36px, 4.4vw, 60px);
    line-height: 0.94;
  }

  /* Titel nutzt auf Mobile die volle Breite statt schmal umzubrechen */
  .all-day h2 {
    max-width: none;
  }

  .all-day-copy > p,
  .signature-menu-head > p,
  .gallery .lede,
  .reservation .lede,
  .contact .lede {
    font-size: 16px;
    line-height: 1.62;
  }

  .day-moment {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 22px 0 20px;
  }

  .day-moment::before {
    left: 0;
    transform: none;
  }

  .day-moment p {
    grid-column: auto;
  }

  .all-day-media {
    display: flex;
    min-height: 0;
    gap: 40px;
    margin: 0 -20px;
    padding: 6px 20px 22px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .all-day-media::-webkit-scrollbar {
    display: none;
  }

  .all-day-photo,
  .all-day-photo.morning,
  .all-day-photo.midday,
  .all-day-photo.evening {
    flex: 0 0 calc(100vw - 40px);
    min-height: 430px;
    aspect-ratio: 4 / 5;
    grid-column: auto;
    grid-row: auto;
    scroll-snap-align: center;
  }

  /* Galerie-Filmstrip-Spur: 20px Innenabstand (= Rand zum Screen) + 40px
     Luecke, sodass wie bei .all-day-media genau ein zentriertes Bild pro
     Ansicht erscheint. Steht nach der Basis-Regel und gewinnt daher. */
  .filmstrip-track {
    padding-left: 20px;
    padding-right: 20px;
    gap: 40px;
  }

  .all-day-photo figcaption,
  .all-day-photo.evening figcaption {
    left: 18px;
    right: 18px;
    bottom: 18px;
    padding: 14px 15px;
  }

  .signature-menu-head {
    display: block;
    margin-bottom: 26px;
  }

  .signature-menu-head > p {
    margin: 18px 0 0;
  }

  .signature-menu-hero {
    min-height: 470px;
  }

  .signature-menu-hero::before {
    inset: 10px;
  }

  .signature-menu-hero figcaption {
    left: 20px;
    right: 20px;
    bottom: 20px;
    padding: 16px;
    font-size: clamp(28px, 7vw, 40px);
  }

  .signature-list {
    border-top: 1px solid var(--summer-border);
  }

  .signature-item {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 22px 0;
  }

  .signature-item:hover {
    padding-left: 0;
    padding-right: 0;
    background: transparent;
  }

  .signature-open {
    justify-self: start;
    padding-top: 0;
  }

  .signature-actions,
  .terrace-actions,
  .reservation-actions,
  .contact-actions,
  .footer-cta {
    justify-content: flex-start;
    gap: 22px;
  }

  .terrace-stage {
    padding-top: 76px;
  }

  .terrace-actions {
    justify-self: start;
    padding-left: 2px;
  }

  .gallery .top {
    display: block;
  }

  .gallery .top .btn {
    margin-top: 18px;
  }

  /* Galerie-Filmstrip-Spur full-bleed (481-880px): margin -20px kompensiert die
     .wrap-Padding (20px), max-width:none hebt die Basis-Begrenzung auf, sodass
     die Spur exakt 100vw breit wird. Der 20px-Rand + die zentrierte Slide
     kommen aus der .filmstrip-track / .filmstrip-frame-Geometrie oben.
     Seitenuebergreifend (Home + Unterseiten), analog zu .all-day-media. */
  .filmstrip-wrap {
    margin-left: -20px;
    margin-right: -20px;
    padding-left: 0;
    max-width: none;
  }

  .filmstrip-frame {
    flex: 0 0 calc(100vw - 40px);
    aspect-ratio: 4 / 5;
    scroll-snap-align: center;
  }

  .filmstrip-label {
    font-size: 24px;
  }

  .reservation-actions,
  .contact-actions,
  .footer-cta {
    display: flex;
  }

  .reservation-actions .btn,
  .contact-actions .btn,
  .footer-cta .btn {
    width: auto;
    min-width: 0;
    text-align: left;
  }

  .contact .info {
    gap: 18px;
  }

  .contact .map {
    min-height: 430px;
  }

  .site-footer {
    padding-top: 44px;
  }
}

@media (max-width: 600px) {
  .all-day,
  .signature-menu,
  .gallery,
  .reservation,
  .contact {
    background:
      radial-gradient(ellipse at 80% 2%, rgba(246, 215, 120, 0.32), transparent 42%),
      linear-gradient(180deg, #fffaf1 0%, #faeabf 54%, #fff7e6 100%);
  }

  .all-day-photo,
  .all-day-photo.morning,
  .all-day-photo.midday,
  .all-day-photo.evening {
    min-height: 410px;
  }

  .signature-menu-hero {
    min-height: 430px;
  }

  .terrace-photo {
    min-height: 430px;
  }

  /* .terrace-photo figcaption: Glas-Material zentral via --glass-* Tokens. */
}

@media (max-width: 480px) {
  .btn,
  .terrace-actions .btn,
  .signature-actions .btn,
  .reservation-actions .btn,
  .contact-actions .btn,
  .footer-cta .btn {
    padding-left: 0;
    padding-right: 0;
  }

  .all-day-copy,
  .signature-list,
  .gallery .top,
  .reservation-inner > div:first-child,
  .reservation-card,
  .contact .grid > div:first-child {
    padding: 20px;
  }

  /* Image-Slider <=480px: .wrap-Padding ist hier 18px -> margin -18px haelt
     die Slider-Spur full-bleed (100vw). Der 20px-Rand und die Slide-Breite
     (calc(100vw - 40px)) kommen aus dem <=880px-Block. */
  .all-day-media,
  .filmstrip-wrap {
    margin-left: -18px;
    margin-right: -18px;
  }

  .contact .map {
    min-height: 360px;
  }
}

/* CODEX 4B — Mobile hero adopts the terrace-card summer system */
@media (max-width: 880px) {
  .image-hero {
    background: #f7df9b;
  }

  .image-hero-shade {
    background:
      linear-gradient(180deg, rgba(255, 250, 241, 0.08) 0%, rgba(255, 250, 241, 0.02) 38%, rgba(246, 215, 120, 0.28) 62%, rgba(255, 250, 241, 0.72) 100%);
  }

  .image-hero-content {
    padding: 0 16px 28px;
  }

  .image-hero-copy {
    max-width: none;
    padding: 22px 18px 20px;
    text-shadow: none;
    /* Glas-Material zentral via --glass-* (Hero-Mobile-Regel weiter unten). */
  }

  .image-hero-eyebrow {
    margin-bottom: 14px;
    color: rgba(65, 43, 22, 0.62);
  }

  .image-hero h1 {
    color: #2b190d;
    text-shadow: none;
  }

  .image-hero p {
    max-width: 13.5em;
    color: rgba(43, 25, 13, 0.76);
    text-shadow: none;
  }

  .image-hero-actions {
    margin-top: 26px;
  }

  .image-hero-actions .btn-on-dark {
    color: #2b190d !important;
    text-shadow: none;
  }

  .image-hero-actions .btn-primary.btn-on-dark::after {
    background: rgba(175, 126, 32, 0.72) !important;
  }

  .image-hero-actions .btn-ghost.btn-on-dark {
    color: rgba(43, 25, 13, 0.58) !important;
  }

  .image-hero-scroll {
    display: none;
  }
}


/* MOBILE HERO FINAL — variant 01 terrace image + compact sticky nav */
@media (max-width: 880px) {
  .site-header {
    position: fixed;
    padding: 7px 0;
    background: rgba(255, 250, 241, 0.30);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    box-shadow: 0 1px 0 rgba(65, 43, 22, 0.08);
    color: #2b190d;
  }

  .site-header.is-scrolled {
    padding: 7px 0;
    background: rgba(255, 250, 241, 0.38);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
  }

  .site-header .brand,
  .site-header.is-scrolled .brand,
  .site-header .burger,
  .site-header.is-scrolled .burger {
    color: #2b190d;
  }

  .site-header .brand {
    font-size: 22px;
  }

  .site-header .row {
    min-height: 42px;
  }

  .site-header .burger {
    width: 38px;
    height: 38px;
  }

  .image-hero {
    min-height: 100svh;
    height: 100svh;
    background:
      linear-gradient(180deg, rgba(255, 250, 241, 0.00) 0%, rgba(255, 250, 241, 0.00) 45%, rgba(255, 250, 241, 0.04) 100%),
      url("../images/hero-mobile.jpg") center center / cover no-repeat;
  }

  .image-hero-shade {
    background: transparent;
  }

  .image-hero-content {
    padding: 0 16px 30px;
  }

  .image-hero-copy {
    max-width: none;
    padding: 20px 18px 18px;
    border: var(--glass-border);
    border-radius: var(--glass-radius);
    background: var(--glass-bg);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    box-shadow: var(--glass-shadow);
    text-shadow: none;
  }

  .image-hero-eyebrow {
    gap: 12px;
    margin-bottom: 14px;
    font-size: 9px;
    letter-spacing: 0.24em;
    line-height: 1.6;
    color: rgba(65, 43, 22, 0.62);
  }

  .image-hero h1 {
    max-width: 100%;
    font-size: clamp(30px, 8.2vw, 52px);
    line-height: 0.92;
    letter-spacing: -0.052em;
    color: #2b190d;
    text-shadow: none;
  }

  .image-hero p {
    max-width: 21em;
    margin-top: 18px;
    font-size: clamp(14px, 4vw, 17px);
    line-height: 1.45;
    color: rgba(43, 25, 13, 0.66);
    text-shadow: none;
  }

  .image-hero-actions {
    gap: 26px;
    margin-top: 24px;
  }

  .image-hero-actions .btn {
    padding-bottom: 10px;
    font-size: 14px;
    letter-spacing: 0.16em;
  }

  .image-hero-actions .btn-on-dark {
    color: #2b190d !important;
    text-shadow: none;
  }

  .image-hero-actions .btn-primary.btn-on-dark::after {
    background: rgba(175, 126, 32, 0.72) !important;
  }

  .image-hero-actions .btn-ghost.btn-on-dark {
    color: rgba(43, 25, 13, 0.56) !important;
  }

  .image-hero-scroll {
    display: none;
  }
}


/* MOBILE HERO NAV REFINEMENT — no blur, full viewport */
@media (max-width: 880px) {
  .image-hero {
    min-height: 100dvh;
    height: 100dvh;
  }

  .site-header {
    padding: 10px 0;
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: none;
    color: #2b190d;
  }

  .site-header.is-scrolled {
    padding: 9px 0;
    background: #fff8ea;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: 0 1px 0 rgba(65, 43, 22, 0.12), 0 12px 30px -26px rgba(65, 43, 22, 0.34);
  }

  .site-header .row {
    min-height: 40px;
  }

  .site-header .brand {
    font-size: 21px;
    text-shadow: 0 1px 12px rgba(255, 250, 241, 0.72);
  }

  .site-header .burger {
    width: 36px;
    height: 36px;
    color: #2b190d;
    background: rgba(255, 250, 241, 0.82);
    border: 1px solid rgba(43, 25, 13, 0.10);
    border-radius: 999px;
    box-shadow: 0 12px 30px -20px rgba(43, 25, 13, 0.5);
  }

  .site-header.is-scrolled .burger {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
  }

  .image-hero-content {
    padding-bottom: max(24px, env(safe-area-inset-bottom));
  }
}


/* MOBILE NAV FINAL — cream bar, no hamburger pill/blur */
@media (max-width: 880px) {
  .site-header,
  .site-header.is-scrolled {
    padding: 8px 0;
    background: #fff8ea;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: 0 1px 0 rgba(65, 43, 22, 0.10);
    color: #2b190d;
  }

  .site-header .row {
    min-height: 42px;
  }

  .site-header .brand,
  .site-header.is-scrolled .brand,
  .site-header .burger,
  .site-header.is-scrolled .burger {
    color: #2b190d;
  }

  .site-header .brand {
    font-size: 21px;
    text-shadow: none;
  }

  .site-header .burger,
  .site-header.is-scrolled .burger {
    width: 38px;
    height: 38px;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .image-hero {
    padding-top: 58px !important;
  }
}




/* MOBILE SIGNATURE IMAGE — real fixed height, not only min-height */
@media (max-width: 600px) {
  .signature-menu-hero {
    height: 300px;
    min-height: 0;
    max-height: 300px;
  }

  .signature-menu-hero img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .signature-menu-hero figcaption {
    left: 20px;
    right: 20px;
    bottom: 20px;
    padding: 14px 16px;
    font-size: clamp(24px, 6.6vw, 34px);
    /* Glas-Material (inkl. Radius/Blur) zentral via --glass-* Tokens. */
  }

  .signature-menu-hero figcaption span {
    margin-bottom: 8px;
    font-size: 9px;
    letter-spacing: 0.22em;
  }
}


/* ============================================================
   GLAS-DIVS — MASTER-REGEL (eine Stelle fuer alle).
   Alle Foto-Overlay-Glasflaechen teilen Fuellung und Blur aus den
   --glass-* Tokens (:root in styles.css). Optik aendern: dort die
   Variablen anpassen, nicht hier. Steht am Dateiende, damit sie die
   verstreuten Alt-Deklarationen sicher gewinnt.
   Scope: ab Mobile (<=880px), wo diese Panels als Glasflaeche erscheinen.
   ============================================================ */
@media (max-width: 880px) {
  /* Foto-Overlay-Glas-Divs werden zentral ueber die --glass-* Single-Source-Regel
     am Dateiende formatiert (gilt fuer alle Breakpoints). Hier stehen nur noch die
     Text-Panels (kein Bild dahinter): transluzente --glass-bg Optik OHNE
     backdrop-filter, da der Blur ohne Bild wirkungslos waere. */
  .all-day-copy,
  .signature-list,
  .gallery .top,
  .reservation-inner > div:first-child,
  .reservation-card,
  .contact .grid > div:first-child {
    background: var(--glass-bg);
  }
}


/* ============================================================
   RESERVIERUNGS-WIDGET (Quandoo).
   Das iframe hat eine feste native Groesse von 380x550px. Die Karte
   wird daher auf diese Breite begrenzt und zentriert, mit kompaktem
   Padding auf allen Views (sonst: leerer Raum auf Tablet/Desktop und
   ein gestauchtes, intern scrollendes iframe auf Mobile).
   ============================================================ */
.reservation-card.reservation-widget-card {
  width: 100%;
  max-width: 412px;
  margin-inline: auto;
  padding: 16px;
}
.reservation-widget-card .quandoo-widget-shell {
  min-height: 0;
  background: transparent;
  overflow: hidden;
  margin-inline: auto;
}
/* Quandoo rendert sein Widget in fester nativer Breite (380px). Zwingt man das
   iframe schmaler (Quandoo setzt selbst max-width:100%), bricht der Inhalt NICHT
   um, sondern scrollt intern. Daher: iframe auf native 380px-Breite halten und
   den Container per transform:scale verkleinern, bis er in den verfuegbaren
   Platz passt.
   WICHTIG transform statt zoom: zoom verkleinert auf Safari/iOS das iframe-
   Viewport, sodass Quandoos Inhalt ueberlaeuft und ein zweiter (interner)
   Scrollbalken im Widget entsteht. transform skaliert nur die Darstellung und
   laesst das iframe-Viewport voll, der Inhalt passt also ohne internen Scroll.
   transform skaliert die Layout-Box NICHT mit, daher setzt QuandooWidget.tsx die
   Hoehe/Breite der Shell live auf die skalierte Groesse (sonst Leerraum). */
.reservation-widget-card #quandoo-booking-widget {
  width: 380px;
  transform: scale(var(--quandoo-scale, 1));
  transform-origin: top left;
  /* Ohne line-height/font-size: 0 entsteht unter dem inline-block-Wrapper von
     Quandoo ein Baseline-Descender-Gap (~8px). */
  line-height: 0;
  font-size: 0;
}
.reservation-widget-card #quandoo-booking-widget > div {
  vertical-align: bottom;
  width: 100%;
}
.reservation-widget-card #quandoo-booking-widget iframe {
  display: block;
  width: 380px;
  max-width: none;
}

@media (max-width: 440px) {
  /* Auf schmalen Phones die Karte fast randlos, damit moeglichst viel Breite
     fuer das Widget bleibt und der zoom-Faktor (siehe oben) so nah wie
     moeglich an 1 liegt. */
  .reservation-card.reservation-widget-card {
    max-width: 100%;
    padding: 10px;
  }
}

/* ============================================
   ITALIENISCH-LANDINGPAGE — PROOF-SCOPE
   Holt Homepage-Treatments (Hintergrund-Rhythmus,
   Bild-Karten mit Caption-Overlay, Galerie-Filmstrip,
   Script-Wasserzeichen) in die Italienisch-Seite.
   ALLES unter .subpage-italienisch gescoped, damit
   Homepage und andere Unterseiten unberuehrt bleiben.
   ============================================ */

/* --- 1. Hintergrund-Rhythmus: abwechselnde Sektionsflaechen --- */
/* Heller, ruhiger Papier-Block (wie Homepage About). */
.subpage-italienisch .ital-section--paper {
  position: relative;
  background: var(--surface);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
/* Hellere Creme-Flaeche fuer Kontrast (wie Homepage signature-menu/weiss). */
.subpage-italienisch .ital-section--surface {
  position: relative;
  background:
    radial-gradient(ellipse at 14% 8%, rgba(255, 252, 246, 0.9), transparent 42%),
    linear-gradient(180deg, #fffdf8 0%, #fff9f0 100%);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
/* Goldener Verlauf wie die Homepage-Terrasse/Galerie. */
.subpage-italienisch .ital-section--gold {
  position: relative;
  overflow: hidden;
  border-top: 0;
  border-bottom: 0;
  background:
    radial-gradient(ellipse at 82% 4%, var(--summer-gold-soft), transparent 40%),
    radial-gradient(ellipse at 10% 34%, rgba(255, 249, 240, 0.9), transparent 38%),
    linear-gradient(180deg, #fffaf1 0%, #fbefd0 54%, #fff7e6 100%);
  color: var(--ink);
}
/* Dezentes Script-Wasserzeichen "Bellucci" auf dem Gold-Block,
   exakt wie .terrace-bg::after auf der Homepage. */
.subpage-italienisch .ital-section--gold::after {
  content: "Bellucci";
  position: absolute;
  right: -0.06em;
  bottom: -0.26em;
  font-family: var(--font-script);
  font-size: clamp(120px, 18vw, 300px);
  line-height: 1;
  color: rgba(255, 249, 240, 0.42);
  pointer-events: none;
  z-index: 0;
}
.subpage-italienisch .ital-section--gold .wrap {
  position: relative;
  z-index: 1;
}

/* --- 2. Bild-Karten mit Caption-Overlay (wie .terrace-photo figcaption) --- */
/* Form/Clip direkt auf der Karte setzen: .about .img-col greift nur als
   Nachfahren-Selektor, in der .menu-Sektion (Cucina-Karte) sitzt die Figure
   aber nicht unter einem .about-Vorfahren, daher hier explizit. */
.subpage-italienisch .ital-photo-card {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: 8px; /* identisch zur Homepage-Bildkarte (.terrace-photo) */
  overflow: hidden;
  box-shadow: var(--shadow-warm);
}
.subpage-italienisch .ital-photo-card img {
  transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.subpage-italienisch .ital-photo-card:hover img {
  transform: scale(1.05);
}
/* Innenrahmen wie auf der Terrassen-Karte der Homepage. */
.subpage-italienisch .ital-photo-card::before {
  content: "";
  position: absolute;
  inset: 14px;
  border: 1px solid rgba(255, 249, 240, 0.72);
  border-radius: 6px;
  z-index: 2;
  pointer-events: none;
}
.subpage-italienisch .ital-photo-card figcaption {
  position: absolute;
  left: 22px;
  bottom: 22px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
  max-width: min(80%, 320px);
  padding: 16px 20px;
  color: var(--ink);
  /* Glas-Material (bg, Rand, Radius, Blur, Schatten) zentral via --glass-* Tokens. */
}
/* Desktop-Sonderregel entfernt: ital-photo-card figcaption nutzt jetzt auf
   allen Breakpoints dieselbe zentrale --glass-* Optik wie alle Glas-Divs. */
.subpage-italienisch .ital-photo-card figcaption span {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.subpage-italienisch .ital-photo-card figcaption strong {
  font-family: var(--font-display);
  font-size: clamp(24px, 2.6vw, 34px);
  font-weight: 500;
  line-height: 0.98;
}

/* --- 3. Galerie-Sektion: identischer Rahmen wie Homepage --- */
/* .gallery erbt bereits Gold-Verlauf + Filmstrip global. Nur Vertikalrhythmus
   an die uebrigen Sektionen angleichen. */
.subpage-italienisch .ital-gallery {
  border-top: 1px solid var(--border);
}

/* --- 4. Feinschliff Spacing fuer den Kuechen-Block (.menu) --- */
.subpage-italienisch .ital-section .grid {
  align-items: center;
}

/* Gerichte untereinander statt zweispaltig: Titel oben, Beschreibung darunter.
   Nur auf der Italienisch-Seite, die Homepage-Karte (Name | Preis) bleibt. */
.subpage-italienisch .menu .dish {
  grid-template-columns: 1fr;
  gap: 6px;
  align-items: start;
}
.subpage-italienisch .menu .dish .desc {
  max-width: none;
  margin-top: 0;
}

/* --- 5. Mobile: Caption-Karten kompakter, Wasserzeichen kleiner --- */
@media (max-width: 980px) {
  .subpage-italienisch .ital-photo-card {
    aspect-ratio: 4/5;
    /* Einspaltig (ab <=980px) wuerde die Karte sonst die volle Spaltenbreite
       einnehmen und ~1045px hoch werden (siehe Messung). Auf eine ruhige
       Kartengroesse deckeln und zentrieren, damit Bild und Text im Verhaeltnis
       bleiben statt dass das Bild den ganzen Viewport fuellt. */
    width: 100%;
    max-width: 500px;
    margin-inline: auto;
  }
  .subpage-italienisch .ital-photo-card figcaption {
    /* Abstand zum inneren Strich (::before inset 14px) an die Homepage-Karten
       angleichen, statt fast auf dem Strich zu kleben. */
    left: 20px;
    bottom: 20px;
    padding: 13px 16px;
  }
  /* In der Atmosphaere-Sektion steht das Bild im DOM vor dem Text (fuer das
     Bild-links-Layout auf Desktop). Einspaltig landet es dadurch direkt unter
     dem Cucina-Bild der vorigen Sektion, also zwei Bilder ohne Text dazwischen.
     Reihenfolge drehen: Text zuerst, Bild darunter, wie bei den anderen
     Sektionen. */
  .subpage-italienisch .ital-section--gold .grid > figure {
    order: 2;
  }
  .subpage-italienisch .ital-section--gold::after {
    font-size: clamp(96px, 26vw, 180px);
    opacity: 0.85;
  }
}

/* ============================================================
   FAQ-Accordion (Unterseiten) - editorial im Vibe der Seite:
   Magazin-Nummerierung (Mono-Eyebrow-Sprache), Playfair-Fragen,
   Hairline-Trenner wie die Speisenliste, hauchduenner +/- Indikator
   ohne Disc, Gold nur als feiner Akzent beim offenen Eintrag.
   Antworten bleiben im DOM (Collapse via grid-template-rows),
   damit der sichtbare Text dem faqJsonLd-Schema entspricht.
   ============================================================ */
.faq-accordion {
  --faq-indent: clamp(2.1rem, 3.4vw, 3.1rem);
  --faq-gap: clamp(14px, 2vw, 26px);
  margin-top: clamp(20px, 3vw, 32px);
  border-top: 1px solid var(--hair);
}

.faq-item {
  border-bottom: 1px solid var(--hair);
}

.faq-q {
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
}

.faq-trigger {
  width: 100%;
  display: grid;
  grid-template-columns: var(--faq-indent) 1fr auto;
  align-items: baseline;
  gap: var(--faq-gap);
  padding: clamp(22px, 2.6vw, 32px) 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  text-align: left;
  color: var(--ink);
}

/* Magazin-Nummer in der Mono-/Eyebrow-Sprache der Seite */
.faq-num {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  color: var(--ink-muted);
  transition: color 0.4s ease;
}

.faq-q-text {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(18px, 1.9vw, 24px);
  line-height: 1.3;
  letter-spacing: 0;
  color: var(--ink);
  transition: color 0.4s ease;
}

/* Hauchduenner +/- Indikator, kein Hintergrund */
.faq-icon {
  position: relative;
  align-self: center;
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
}

.faq-icon::before,
.faq-icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background: var(--ink-muted);
  transition: transform 0.42s cubic-bezier(0.4, 0, 0.2, 1), background 0.4s ease;
}

.faq-icon::before {
  width: 15px;
  height: 1px;
  transform: translate(-50%, -50%);
}

.faq-icon::after {
  width: 1px;
  height: 15px;
  transform: translate(-50%, -50%);
}

/* Hover: dezent dunkler */
.faq-trigger:hover .faq-num {
  color: var(--ink-2);
}

.faq-trigger:hover .faq-icon::before,
.faq-trigger:hover .faq-icon::after {
  background: var(--ink);
}

/* Offen: vertikaler Strich kollabiert -> Minus, Gold-Akzent */
.faq-item[data-open="true"] .faq-icon::after {
  transform: translate(-50%, -50%) scaleY(0);
}

.faq-item[data-open="true"] .faq-icon::before {
  background: var(--accent);
}

.faq-item[data-open="true"] .faq-num {
  color: var(--accent);
}

/* Panel: weiche Hoehen-Animation, Inhalt bleibt im DOM */
.faq-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

.faq-item[data-open="true"] .faq-panel {
  grid-template-rows: 1fr;
}

.faq-panel-inner {
  overflow: hidden;
}

/* Antwort buendig unter der Frage (Nummer-Spalte + Gap eingerueckt) */
.faq-panel-inner p {
  margin: 0;
  padding: 0 var(--faq-gap) clamp(24px, 2.8vw, 34px)
    calc(var(--faq-indent) + var(--faq-gap));
  max-width: 68ch;
  color: var(--ink-2);
  font-size: 16px;
  line-height: 1.8;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.4s ease 0.06s, transform 0.4s ease 0.06s;
}

.faq-item[data-open="true"] .faq-panel-inner p {
  opacity: 1;
  transform: none;
}

@media (max-width: 600px) {
  .faq-accordion {
    --faq-indent: 1.9rem;
    --faq-gap: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .faq-panel,
  .faq-icon::before,
  .faq-icon::after,
  .faq-panel-inner p {
    transition: none;
  }
}

/* Interne Weiterleitungs-Links unter der FAQ: bewusst dezent (klein, gedaempft),
   aber lesbar. Farbe haelt WCAG AA (#7A6852 = 5.14:1 auf #fffaf1), also kein
   Hidden Text - nur eine ruhige Fussnote. Links bleiben per Unterstreichung
   als Links erkennbar (nicht nur ueber Farbe). */
.subpage-info .subpage-related {
  margin-top: clamp(28px, 4vw, 44px);
  max-width: 72ch;
  font-size: 13px;
  line-height: 1.7;
  letter-spacing: 0.01em;
  color: var(--ink-muted);
}

.subpage-info .subpage-related a {
  color: var(--ink-muted);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  text-decoration-color: var(--hair);
  transition: color 0.3s ease, text-decoration-color 0.3s ease;
}

.subpage-info .subpage-related a:hover {
  color: var(--ink);
  text-decoration-color: var(--accent);
}


/* ============================================================
   GLAS-DIVS — SINGLE SOURCE OF TRUTH (Foto-Overlays auf Bildern).
   JEDE Glas-Flaeche, die auf einem Bild liegt, teilt sich hier EINE
   Optik ueber die --glass-* Tokens (Definition: styles.css :root).
   Material (Hintergrund, Blur, Rand, Radius, Schatten) kommt NUR von
   dieser Regel. Groesse/Position/Padding bleibt in den Layout-Regeln
   der jeweiligen Sektion. Optik aendern? -> nur die --glass-* Tokens.
   Steht bewusst am Dateiende, damit sie alle frueheren Werte gewinnt.
   ============================================================ */
.terrace-photo figcaption,
.signature-menu-hero figcaption,
.all-day-photo figcaption,
.filmstrip-label,
.subpage-italienisch .ital-photo-card figcaption,
.contact .map .corner,
.contact .map .pin .label {
  background: var(--glass-bg);
  border: var(--glass-border);
  border-radius: var(--glass-radius);
  box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  text-shadow: none;
}

/* Rundes Zaehler-Badge (Galerie): gleiches Glas-Material, runde Form bleibt. */
.filmstrip-number {
  background: var(--glass-bg);
  border: var(--glass-border);
  border-radius: 999px;
  box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}