/* ==========================================================================
   Components
   Reusable UI elements, animations and interactive states.
   ========================================================================== */

.hero-overlay {
  background: linear-gradient(
    to bottom,
    rgba(13, 5, 0, 0.18) 0%,
    rgba(13, 5, 0, 0.05) 28%,
    rgba(13, 5, 0, 0.55) 62%,
    rgba(13, 5, 0, 0.98) 100%
  );
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(32px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-up {
  opacity: 0;
  animation: fadeInUp 0.9s cubic-bezier(.16, 1, .3, 1) forwards;
}

.delay-1 {
  animation-delay: .15s;
}

.delay-2 {
  animation-delay: .35s;
}

.delay-3 {
  animation-delay: .55s;
}

.delay-4 {
  animation-delay: .75s;
}

.reveal {
  opacity: 0;
  transform: translateY(36px);
  transition:
    opacity .75s cubic-bezier(.16, 1, .3, 1),
    transform .75s cubic-bezier(.16, 1, .3, 1);
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

#navbar {
  transition: background-color .35s ease, box-shadow .35s ease;
}

#navbar.scrolled {
  background-color: rgba(13, 5, 0, .96);
  box-shadow: 0 1px 40px rgba(0, 0, 0, .55);
  backdrop-filter: blur(12px);
}

.gold-line {
  width: 48px;
  height: 2px;
  background: linear-gradient(to right, transparent, var(--brand-gold), transparent);
  margin: 0 auto;
}

.menu-card {
  border: 1px solid rgba(192, 94, 53, .12);
  transition: border-color .25s, transform .25s, box-shadow .25s;
}

.menu-card:hover {
  border-color: rgba(192, 94, 53, .45);
  transform: translateY(-4px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, .45);
}

.tab-btn.active {
  color: var(--brand-gold);
  border-bottom-color: var(--brand-gold);
}

.tab-content {
  transition: opacity .3s ease, transform .3s ease;
}

.tab-content.tab-fading-out {
  opacity: 0;
  transform: translateY(6px);
  pointer-events: none;
}

@keyframes tabFadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.tab-content.tab-entering {
  animation: tabFadeIn .9s cubic-bezier(.16, 1, .3, 1);
}

.gallery-item {
  overflow: hidden;
  position: relative;
}

.gallery-item img {
  transition: transform .65s ease;
}

.gallery-item:hover img {
  transform: scale(1.07);
}

.gallery-item::after {
  content: '';
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 55px 18px rgba(13, 5, 0, 0.72);
  pointer-events: none;
  z-index: 1;
}

.img-vignette {
  position: relative;
  overflow: hidden;
}

.img-vignette::after {
  content: '';
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 60px 20px rgba(13, 5, 0, 0.68);
  pointer-events: none;
}

/* Gallery 3D depth treatment — softened by roughly 20% */
#gallery .gallery-mobile-carousel {
  perspective: 1400px;
  perspective-origin: center;
}

#gallery .gallery-item {
  isolation: isolate;
  transform-style: preserve-3d;
  background: rgba(26, 10, 0, 0.44);
  border: 1px solid rgba(192, 94, 53, 0.12);
  box-shadow:
    0 21px 43px rgba(0, 0, 0, 0.36),
    0 6px 14px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 224, 186, 0.07),
    inset 0 0 0 1px rgba(192, 94, 53, 0.04);
  transform: translateZ(0);
  transition:
    transform .42s cubic-bezier(.16, 1, .3, 1),
    box-shadow .42s ease,
    border-color .42s ease,
    filter .42s ease;
  will-change: transform;
}

#gallery .gallery-item:nth-child(odd) {
  transform: translateZ(0) rotateZ(-0.2deg);
}

#gallery .gallery-item:nth-child(even) {
  transform: translateZ(0) rotateZ(0.2deg);
}

#gallery .gallery-item img {
  transform: scale(1.02) translateZ(0);
  transform-origin: center;
  filter: contrast(1.03) saturate(1.03) brightness(0.99);
  transition:
    transform .7s cubic-bezier(.16, 1, .3, 1),
    filter .7s ease;
}

#gallery .gallery-item::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(135deg, rgba(255, 235, 200, 0.145) 0%, rgba(255, 235, 200, 0.025) 28%, rgba(13, 5, 0, 0) 58%, rgba(13, 5, 0, 0.34) 100%),
    radial-gradient(circle at 28% 18%, rgba(255, 236, 190, 0.11) 0%, rgba(255, 236, 190, 0) 34%);
  opacity: .58;
  mix-blend-mode: screen;
  transition: opacity .42s ease;
}

#gallery .gallery-item:hover {
  z-index: 5;
  border-color: rgba(192, 94, 53, 0.27);
  box-shadow:
    0 30px 69px rgba(0, 0, 0, 0.45),
    0 11px 24px rgba(0, 0, 0, 0.34),
    0 0 0 1px rgba(192, 94, 53, 0.13),
    inset 0 1px 0 rgba(255, 224, 186, 0.10);
  transform: translateY(-8px) rotateX(1.6deg) rotateY(-1.6deg) scale(1.014);
}

#gallery .gallery-item:hover img {
  transform: scale(1.076) translateZ(14px);
  filter: contrast(1.065) saturate(1.065) brightness(1.02);
}

#gallery .gallery-item:hover::before {
  opacity: .76;
}

@media (max-width: 767px) {
  #gallery .gallery-mobile-carousel {
    perspective: 1100px;
  }

  #gallery .gallery-item,
  #gallery .gallery-item:nth-child(odd),
  #gallery .gallery-item:nth-child(even) {
    transform: translateZ(0);
    box-shadow:
      0 14px 32px rgba(0, 0, 0, 0.36),
      0 5px 11px rgba(0, 0, 0, 0.28),
      inset 0 1px 0 rgba(255, 224, 186, 0.07);
  }

  #gallery .gallery-item:hover {
    transform: translateZ(0);
  }
}

/* Contact: map-led layout (replaced the former three-card grid). */
.contact-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
}

.contact-map {
  position: relative;
  margin: 0;
  border-radius: 0.55rem;
  overflow: hidden;
  border: 1px solid rgba(192, 94, 53, 0.18);
  box-shadow:
    0 24px 54px rgba(0, 0, 0, 0.42),
    inset 0 1px 0 rgba(255, 224, 186, 0.06);
  aspect-ratio: 4 / 3;
  background: var(--brand-surface);
}

/* OpenStreetMap renders light; invert and warm it so it belongs in the dark
   section. pointer-events are disabled so the map reads as a visual anchor and
   never traps page scroll; the address link carries the action. */
.contact-map iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  pointer-events: none;
  filter: invert(0.92) hue-rotate(180deg) brightness(0.96) contrast(0.92) saturate(0.72) sepia(0.16);
}

.contact-map::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow: inset 0 0 58px 16px rgba(13, 5, 0, 0.48);
  background: radial-gradient(ellipse 84% 74% at 50% 46%, rgba(13, 5, 0, 0) 58%, rgba(13, 5, 0, 0.3) 100%);
}

.contact-info-col {
  display: flex;
  flex-direction: column;
  gap: 2.75rem;
}

@media (min-width: 1024px) {
  .contact-layout {
    grid-template-columns: 1.08fr 0.92fr;
    gap: 3.25rem;
    align-items: start;
  }
}

@media (min-width: 768px) {
  #contact .mt-12 a {
    transform: translateZ(0);
    box-shadow:
      0 16px 34px rgba(0, 0, 0, 0.26),
      0 8px 18px rgba(220, 38, 38, 0.18);
  }

  #contact .mt-12 a:hover,
  #contact .mt-12 a:focus-visible {
    transform: translateY(-3px) scale(1.006);
    box-shadow:
      0 22px 44px rgba(0, 0, 0, 0.34),
      0 10px 24px rgba(220, 38, 38, 0.24);
  }
}

@media (prefers-reduced-motion: reduce) {
  #gallery .gallery-item,
  #gallery .gallery-item:hover,
  #gallery .gallery-item img,
  #gallery .gallery-item:hover img,
  #contact .grid > div.reveal,
  #contact .grid > div.reveal:hover,
  #contact .mt-12 a,
  #contact .mt-12 a:hover {
    transform: none !important;
  }
}

.menu-fire-overlay {
  background:
    linear-gradient(to bottom, var(--brand-surface) 0%, rgba(26, 10, 0, 0.78) 8%, rgba(26, 10, 0, 0.22) 24%, rgba(26, 10, 0, 0.22) 76%, rgba(26, 10, 0, 0.82) 92%, var(--brand-surface) 100%),
    linear-gradient(to right, var(--brand-surface) 0%, rgba(26, 10, 0, 0.74) 9%, rgba(26, 10, 0, 0.16) 26%, rgba(26, 10, 0, 0.16) 74%, rgba(26, 10, 0, 0.78) 91%, var(--brand-surface) 100%),
    radial-gradient(ellipse 72% 46% at 50% 48%, rgba(192, 94, 53, 0.20) 0%, rgba(148, 52, 6, 0.12) 40%, rgba(13, 5, 0, 0) 74%),
    rgba(13, 5, 0, 0.56);
}

@keyframes fireplaceReveal {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* Responsive fireplace video sizing.
   The video is intentionally larger than the section so the soft masked edges
   can fade into the background on every viewport instead of showing hard cuts. */
#menu {
  --fireplace-size: clamp(374px, 46.8vw, 902px);
  --fireplace-x: 50%;
  --fireplace-y: 50%;
  --fireplace-opacity: 0.68;
}

#menuFireplaceVideo {
  opacity: var(--fireplace-opacity);
  mix-blend-mode: screen;
  position: absolute;
  left: var(--fireplace-x);
  top: var(--fireplace-y);
  width: var(--fireplace-size);
  height: var(--fireplace-size);
  max-width: none;
  max-height: none;
  object-fit: contain;
  object-position: center center;
  transform: translate(-50%, -50%);
  transform-origin: center;
  -webkit-mask-image: radial-gradient(ellipse 56% 54% at 50% 50%, #000 0%, #000 52%, rgba(0, 0, 0, 0.78) 68%, transparent 91%);
  mask-image: radial-gradient(ellipse 56% 54% at 50% 50%, #000 0%, #000 52%, rgba(0, 0, 0, 0.78) 68%, transparent 91%);
}

@media (min-width: 1440px) {
  #menu {
    --fireplace-size: clamp(570px, 41.75vw, 996px);
  }
}

.mobile-cta-fab {
  position: fixed;
  bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px));
  right: 1.25rem;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: var(--brand-red);
  color: #fff;
  box-shadow:
    0 12px 28px rgba(220, 38, 38, 0.45),
    0 0 0 6px rgba(13, 5, 0, 0.35);
  transition: transform .18s ease, box-shadow .18s ease;
}

.mobile-cta-fab:active {
  transform: scale(0.93);
}

.mobile-cta-fab svg {
  width: 26px;
  height: 26px;
}

/* ==========================================================================
   Video presentation
   Desktop default: videos are visible, cover their containers and stay behind
   text layers. Poster fallback is applied by JavaScript if playback fails.
   ========================================================================== */

.site-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background-color: var(--brand-dark);
}

.hero-video {
  object-position: center center;
}

.signature-video {
  object-position: center center;
}

.menu-fireplace-video {
  object-position: center center;
}

.site-video.is-video-fallback {
  opacity: 0;
}


@keyframes backToTopArrowRise {
  0%, 100% {
    transform: translateY(0);
    opacity: 0.88;
  }

  45% {
    transform: translateY(-0.34rem);
    opacity: 1;
  }
}

/* ==========================================================================
   Desktop back-to-top button
   Warm brand-toned button, centered higher in the desktop viewport.
   Hidden on mobile. JavaScript toggles .is-visible after the hero area.
   ========================================================================== */
.back-to-top-btn {
  display: none;
}

@media (min-width: 768px) {
  .back-to-top-btn {
    position: fixed;
    left: 50%;
    bottom: max(2rem, calc(20vh - 7.1rem));
    z-index: 70;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 5.45rem;
    height: 5.45rem;
    padding: 0;
    border: 1px solid rgba(192, 94, 53, 0.62);
    border-radius: 999px;
    background:
      radial-gradient(circle at 34% 24%, rgba(245, 230, 208, 0.22) 0%, rgba(217, 137, 90, 0.18) 36%, rgba(45, 18, 0, 0.72) 64%, rgba(13, 5, 0, 0.94) 100%),
      linear-gradient(145deg, rgba(192, 94, 53, 0.30), rgba(13, 5, 0, 0.96));
    color: rgba(254, 242, 242, 0.96);
    box-shadow:
      inset 0 0 0 1px rgba(254, 242, 242, 0.10),
      inset 0 -18px 30px rgba(13, 5, 0, 0.45),
      0 -2px 18px rgba(192, 94, 53, 0.18),
      0 20px 46px rgba(0, 0, 0, 0.56);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, 1.1rem) scale(0.96);
    will-change: opacity, transform;
    transition:
      opacity 0.95s ease,
      transform 1.05s cubic-bezier(.22, 1, .36, 1),
      border-color 0.42s ease,
      background-color 0.42s ease,
      box-shadow 0.42s ease;
  }

  .back-to-top-btn__icon {
    width: 2.25rem;
    height: 2.25rem;
    display: block;
    transform: none;
    will-change: transform, opacity;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.42));
    transition: transform 0.42s ease;
  }

  .back-to-top-btn.is-visible .back-to-top-btn__icon {
    animation: backToTopArrowRise 2.2s cubic-bezier(.45, 0, .25, 1) infinite;
  }

  .back-to-top-btn.is-visible {
    opacity: 1;
    pointer-events: auto;
    transform: translate(-50%, 0) scale(1);
  }

  .back-to-top-btn:hover,
  .back-to-top-btn:focus-visible {
    border-color: rgba(217, 137, 90, 0.92);
    box-shadow:
      inset 0 0 0 1px rgba(254, 242, 242, 0.14),
      inset 0 -18px 30px rgba(13, 5, 0, 0.36),
      0 -3px 24px rgba(192, 94, 53, 0.30),
      0 24px 52px rgba(0, 0, 0, 0.66);
    outline: none;
    transform: translate(-50%, -0.35rem) scale(1.02);
  }

  .back-to-top-btn:hover .back-to-top-btn__icon,
  .back-to-top-btn:focus-visible .back-to-top-btn__icon {
    animation-duration: 1.65s;
  }

  .back-to-top-btn.is-scrolling-top {
    opacity: 0.72;
    transform: translate(-50%, -0.55rem) scale(0.985);
    pointer-events: none;
  }

  .back-to-top-btn.is-scrolling-top .back-to-top-btn__icon {
    animation-duration: 1.25s;
  }

  .back-to-top-btn:active {
    transform: translate(-50%, -0.12rem) scale(0.985);
  }
}

@media (max-width: 767px) {
  .back-to-top-btn {
    display: none !important;
  }
}


/* Contact order CTA: match the other “Bestellen” buttons */
#contact .contact-order-cta {
  position: relative;
  overflow: hidden;
  border: 0;
  background: var(--brand-red) !important;
  color: #fff !important;
  text-shadow: none;
  box-shadow:
    0 14px 26px rgba(0, 0, 0, 0.28),
    0 8px 18px rgba(220, 38, 38, 0.22);
  transform: translateY(0) scale(1);
  transition:
    background-color .20s ease,
    transform .20s ease,
    box-shadow .20s ease;
}

#contact .contact-order-cta::before,
#contact .contact-order-cta::after {
  content: none;
}

#contact .contact-order-cta svg {
  transition: transform .20s ease;
  filter: none;
}

#contact .contact-order-cta:hover,
#contact .contact-order-cta:focus-visible {
  background: #B91C1C !important;
  box-shadow:
    0 18px 34px rgba(0, 0, 0, 0.32),
    0 10px 22px rgba(185, 28, 28, 0.24);
  transform: translateY(-2px) scale(1.005);
  outline: none;
}

#contact .contact-order-cta:hover svg,
#contact .contact-order-cta:focus-visible svg {
  transform: translateY(-1px);
}

#contact .contact-order-cta:active {
  background: #991B1B !important;
  box-shadow:
    0 10px 20px rgba(0, 0, 0, 0.28),
    0 5px 12px rgba(153, 27, 27, 0.20);
  transform: translateY(0) scale(0.992);
}



/* Opening hours card: smoother and more consistent formatting */
.opening-hours-list {
  display: grid;
  gap: 0.65rem;
  margin-top: 0.15rem;
}

.opening-hours-row {
  display: grid;
  grid-template-columns: minmax(74px, 0.72fr) 1fr;
  align-items: center;
  gap: 0.85rem;
  padding: 0.72rem 0.82rem;
  border: 1px solid rgba(192, 94, 53, 0.13);
  border-radius: 0.55rem;
  background:
    linear-gradient(145deg, rgba(45, 18, 0, 0.72), rgba(13, 5, 0, 0.34));
  box-shadow:
    inset 0 1px 0 rgba(254, 242, 242, 0.035),
    0 9px 18px rgba(0, 0, 0, 0.16);
}

.opening-day {
  color: rgba(254, 242, 242, 0.86);
  font-weight: 500;
  letter-spacing: 0.03em;
  text-align: left;
  white-space: nowrap;
}

.opening-time {
  color: var(--brand-muted);
  line-height: 1.45;
  text-align: right;
}


/* ==========================================================================
   Öffnungszeiten (Kontakt)
   The outer contact column is the only visible box; the inner opening-hours
   rows are intentionally plain. Mobile sizing lives in responsive.css.
   ========================================================================== */
#contact .opening-hours-list {
  display: grid;
  gap: 0.38rem;
  margin-top: 0.15rem;
}

#contact .opening-hours-row {
  display: grid !important;
  grid-template-columns: minmax(4.6rem, 0.9fr) minmax(0, 1.2fr) !important;
  align-items: start;
  gap: 0.75rem;
  padding: 0.22rem 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

#contact .opening-day,
#contact .opening-time {
  display: block;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  text-align: left !important;
  line-height: 1.55;
}

#contact .opening-day {
  color: var(--brand-gold-light);
  font-weight: 500;
  letter-spacing: 0.02em;
}

#contact .opening-time {
  color: var(--brand-muted);
}


@media (prefers-reduced-motion: reduce) {
  .back-to-top-btn.is-visible .back-to-top-btn__icon {
    animation: none !important;
  }
}

/* ==========================================================================
   Motion pass (impeccable animate)
   Additions only. New selectors that intentionally avoid the duplicated
   component block in responsive.css (its first ~693 lines mirror this file).
   Every addition is compositor-only and guarded for reduced motion below.
   ========================================================================== */

/* Cinematic hero: an ultra-slow Ken Burns drift, the page's single signature
   beat. Desktop only; mobile keeps its own static scale and tighter budget.
   Pure transform over the already-playing video, so cost is negligible. */
@keyframes heroKenBurns {
  0% {
    transform: scale(1.02) translate3d(0, 0, 0);
  }

  100% {
    transform: scale(1.085) translate3d(0, -1.4%, 0);
  }
}

@media (min-width: 768px) {
  #heroVideo {
    transform: scale(1.02);
    transform-origin: 50% 42%;
    will-change: transform;
    animation: heroKenBurns 42s cubic-bezier(.37, 0, .63, 1) infinite alternate;
  }
}

/* Gold dividers draw themselves in with their reveal block. scaleX, never
   width, so it stays off the layout thread. */
.draw-line {
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .85s cubic-bezier(.16, 1, .3, 1) .2s;
  will-change: transform;
}

.gold-line.draw-line {
  transform-origin: center;
}

.reveal.visible .draw-line {
  transform: scaleX(1);
}

/* Highlights bar: each pillar settles in sequence as the strip enters view. */
.highlights-bar-grid > .reveal:nth-child(2) {
  transition-delay: .12s;
}

.highlights-bar-grid > .reveal:nth-child(3) {
  transition-delay: .24s;
}

/* Inline text links: the arrow leads on hover and keyboard focus. */
.link-arrow svg {
  transition: transform .3s cubic-bezier(.16, 1, .3, 1);
}

.link-arrow:hover svg,
.link-arrow:focus-visible svg {
  transform: translateX(4px);
}

@media (prefers-reduced-motion: reduce) {
  #heroVideo {
    animation: none;
  }

  .draw-line {
    transition: none;
    transform: none;
  }

  .link-arrow:hover svg,
  .link-arrow:focus-visible svg {
    transform: none;
  }
}