/* style.css — Modern, mobile-first, responsive styles for Pizza-n-smash */
:root{
  --bg:#D62828; /* American tomato sauce red */
  --card:#ffffff;
  --muted:#444; /* darker muted text */
  --accent:#D62828; /* synced with bg */
  --accent-2:#B71C1C; /* darker red for gradients */
  --glass: rgba(255,255,255,0.8);
  --radius:12px;
  --max-width:1100px;
  --font-sans: 'Open Sans', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  /* Updated to include Lobster for that American Pizza vibe */
  --font-display: 'Lobster', 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
  --text-main: #1a1a1a;
}

/* Basic reset */
*{box-sizing:border-box}
html,body{height:100%;overflow-x:hidden}
body{
  margin:0;
  font-family:var(--font-sans), sans-serif;
  /* Extended red gradient significantly to ensure Hero text stays on red */
  background:linear-gradient(to bottom, #D62828 0%, #D62828 60%, #ffffff 80%);
  background-size: 100% auto;
  background-repeat: no-repeat;
  color:var(--text-main);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.5;
  padding-bottom:32px; /* reduced default space; large gap restored on small screens */
}
/* ensure container always has comfortable padding */
.container{max-width:var(--max-width);width:100%;padding-left:1rem;padding-right:1rem;margin:0 auto}

/* Ensure direct children of container don't overflow and are centered */
.container > *{max-width:var(--max-width);margin-left:auto;margin-right:auto}

/* Safety: force sections and hero-inner to obey container padding on very small screens */
@media (max-width:640px){
  /* add guaranteed safe gutter on the viewport and avoid double-padding */
  body{padding-left:1rem;padding-right:1rem}
  .container{padding-left:0;padding-right:0}

  /* ensure inner children don't overflow the reduced width */
  .container > *{max-width:100%;padding-left:0;padding-right:0}
  img, iframe, .grid, .map-wrap{max-width:100%;width:100%;box-sizing:border-box}

  /* Ensure grid figures have inner spacing and don't touch the viewport edges */
  .grid{padding-left:0; padding-right:0; gap:.5rem}
  .grid figure{padding:0;background:var(--glass)}
}

/* Strong mobile gutter enforcement */
@media (max-width:640px){
  /* Ensure container always has a visible gutter */
  .container{padding-left:1rem !important;padding-right:1rem !important}

  /* Also enforce gutters on direct sections to be safe */
  section{padding-left:0.5rem !important;padding-right:0.5rem !important;box-sizing:border-box}

  /* Prevent any element from overflowing viewport */
  img, iframe, .grid, .grid figure, .map-wrap{max-width:100% !important;box-sizing:border-box}

  /* Ensure the main content has left/right safe area (use env(safe-area-inset) for iOS) */
  body{padding-left:env(safe-area-inset-left,1rem);padding-right:env(safe-area-inset-right,1rem)}
}

/* End strong mobile gutter enforcement */

/* Strong global mobile gutter (final) - ADJUSTED: Remove body padding to allow full width header */
@media (max-width:900px){
  body{padding-left:0 !important;padding-right:0 !important}
  .container{padding-left:1rem !important;padding-right:1rem !important}
  .hero-inner{padding-left:1rem !important;padding-right:1rem !important}
  section{padding-left:0 !important;padding-right:0 !important}
  .mobile-cta-bar{bottom:1rem !important} /* positioning handled by its class */
}
@media (min-width:901px){
  body{padding-left:0 !important;padding-right:0 !important}
}

a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}

.skip-link{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip-link:focus{left:0;top:0;width:auto;height:auto;padding:.5rem;background:#fff;color:#000;z-index:9999}

/* Header */
.site-header{
  position:sticky;
  top:0;
  /* Background moved to ::before to control stacking order vs drip */
  background: transparent;
  z-index:50;
  /* Removed box-shadow to avoid line between header and drip */
}

/* Background layer for header */
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #D62828;
  backdrop-filter: blur(8px);
  z-index: 45; /* Above drip (40), below content (55) */
  box-shadow: 0 4px 20px rgba(0,0,0,0.15); /* Restore shadow for header block if needed, OR remove if seamless is key. User said "no border". Let's removing shadow from header block entirely to be safe, or just relying on drip shadow. */
  /* Actually, user wants "umrandung nur unten". So the drip shadow provides that. */
  box-shadow: none;
}
@media (max-width: 900px) {
  /* Mobile Header tweaks: Floating island style */
  .site-header {
    width: auto;
    margin-left: 1rem;
    margin-right: 1rem;
    margin-top: 0.5rem; /* Little spacing from top */
    /* Border radius needs to apply to the background pseudo element too */
    left: 0;
    right: 0;
  }
  .site-header::before {
    border-radius: 16px;
  }
}

.site-header a {color:#fff; text-shadow: 0 1px 2px rgba(0,0,0,0.2);}
.site-header .tag {
  color: #ffffff !important;
  opacity: 1;
  text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0.75rem 1rem;
  position: relative;
  z-index: 55; /* Higher than drip (49) and header base (50) to ensure clickable/visible */
}
.brand .logo{
  font-family:var(--font-display), sans-serif;
  font-weight:700;margin:0;
  font-size:1.9rem; /* Slightly larger */
  letter-spacing:1px;
  color: #000000; /* Black text */
  /* White outline (simulated with shadow) + Drop shadow */
  text-shadow:
    -1.5px -1.5px 0 #ffffff,
     1.5px -1.5px 0 #ffffff,
    -1.5px  1.5px 0 #ffffff,
     1.5px  1.5px 0 #ffffff,
     0 4px 8px rgba(0,0,0,0.3);
  transform: rotate(-2deg);
  display: inline-block;
}
.brand .tag{margin:0;color:var(--muted);font-size:0.85rem}
.top-ctas{display:flex;gap:.5rem}

/* Button visual refinement */
.btn{
  display:inline-flex;align-items:center;gap:.5rem;padding:.5rem .8rem;
  border-radius:12px;background:transparent;
  border:1px solid rgba(255,255,255,0.15); /* Subtler border default */
  color:#fff;font-weight:700;font-size:.95rem;
  transition:transform .13s ease,box-shadow .13s ease,filter .13s ease;
  text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

/* Primary CTA (used in header .btn-cta and hero primary buttons) */
.btn-cta, .button.large{
  background: linear-gradient(90deg,var(--accent),var(--accent-2));
  color:#0c0c0c;
  padding: .9rem 1.3rem; /* slightly larger tap target */
  font-size: 1.02rem;
  border-radius: 16px;
  border: none;
  box-shadow: 0 12px 30px rgba(228,87,46,0.20);
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
.btn-cta:hover, .button.large:hover{transform:translateY(-4px);filter:brightness(1.02)}
.btn-cta:focus, .button.large:focus{outline:3px solid rgba(242,159,5,0.28);outline-offset:3px}

/* Secondary / ghost CTA - fix visibility on white bg */
.btn-ghost, .button.alt{
  background:transparent;border:2px solid #D62828;color:#D62828;padding:.6rem .95rem;border-radius:12px;font-weight:700
}
.btn-ghost:hover, .button.alt:hover{background:rgba(214, 40, 40, 0.1);transform:translateY(-2px)}

/* Ensure hero buttons are centered and visually consistent */
.hero-ctas{display:flex;flex-direction:column;gap:.75rem;align-items:center;margin:1rem 0;justify-content:center}

/* General button fixed for new theme */
.button{
  display:inline-flex;align-items:center;gap:.6rem;padding:.9rem 1.1rem;
  border-radius:999px;
  background: #D62828 !important; /* Force new tomato red */
  color: #ffffff !important; /* Force white text */
  border: 1px solid transparent;
  font-weight:700;
  box-shadow: 0 4px 12px rgba(214, 40, 40, 0.3);
  transition: transform .12s ease, box-shadow .12s ease, background .13s ease;
  text-decoration: none !important; /* No underline */
}
.button:hover{
  background: #B71C1C !important; /* Darker red on hover */
  color: #fff !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(214, 40, 40, 0.4);
}

/* Hero */
.hero{padding:3.5rem 0;background:transparent}
.hero-inner{text-align:center;padding:2rem 1rem}
.hero-title{font-family:var(--font-display), sans-serif;font-size:2.2rem;margin:.2rem 0;color:#fff}
.hero-sub{color:rgba(255,255,255,0.9);margin:0 0 1rem}
.hero-ctas{display:flex;flex-direction:column;gap:.75rem;align-items:center;margin:1rem 0;justify-content:center}
.button{display:inline-flex;align-items:center;gap:.6rem;padding:.9rem 1.1rem;border-radius:999px;background:var(--card);color:#fff;border:1px solid rgba(255,255,255,0.04);font-weight:700}
.button.large{font-size:1rem;padding:1rem 1.2rem}
.button.alt{background:transparent;border:2px solid rgba(255,255,255,0.06);color:var(--accent-2)}
.hero-note{
  color:#fff;
  font-size:1.05rem;
  font-weight:700;
  margin-top:1.5rem;
  text-shadow: 0 2px 4px rgba(0,0,0,0.4);
  background: rgba(0,0,0,0.15); /* Subtle dark backing for pop */
  display: inline-block;
  padding: 0.5rem 1rem;
  border-radius: 12px;
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255,255,255,0.1);
}
.hero-note .highlight {
  color: #ffeb3b; /* Signalfarbe Gelb */
  font-weight: 900;
  font-size: 1.3rem;
  text-shadow: 0 2px 4px rgba(0,0,0,0.8);
  text-transform: uppercase;
}

/* About */
.about{padding:1.5rem 0}
.about h3{font-size:1.25rem;margin-bottom:.5rem}
.features{list-style:none;padding:0;margin:.5rem 0 0;display:flex;flex-direction:column;gap:.3rem;color:var(--muted)}

/* Gallery */
.gallery{padding:1.5rem 0}
.gallery h3{margin-bottom:.75rem}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}
.grid figure{margin:0;background:var(--glass);padding:.25rem;border-radius:10px;overflow:hidden}
.grid img{width:100%;height:180px;object-fit:cover;display:block}
.grid figcaption{padding:.5rem;color:var(--muted);font-size:.9rem}

/* Location & Map */
.location{padding:1.5rem 0}
.address{font-weight:600;color:var(--text-main);margin-bottom:.5rem}
.map-wrap{background:#000;border-radius:10px;overflow:hidden;height:220px}
.map-wrap iframe{border:0;width:100%;height:100%}

/* Map Consent Placeholder */
.map-placeholder {
  width: 100%;
  height: 100%;
  background: #f3f4f6;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  text-align: center;
  color: #4b5563;
}
.map-placeholder-content {
  max-width: 400px;
}
.map-placeholder p {
  font-size: 0.9rem;
  margin-bottom: 1rem;
  line-height: 1.4;
}
.map-placeholder .button {
  font-size: 0.85rem;
  padding: 0.6rem 1.2rem;
}

.route-cta{margin-top:.6rem}

/* Opening hours styling */
.opening-hours{
  max-width:520px;
  width:100%;
  background: #ffffff;
  color: #1a1a1a;
  padding:0.9rem 1rem;
  border-radius:12px;
  margin:0.75rem auto;
  text-align:center;
  box-shadow: 0 6px 18px rgba(0,0,0,0.1);
  border: 1px solid rgba(0,0,0,0.05);
}
.opening-hours h4{margin:0 0 .5rem;font-size:1.05rem;color:#1a1a1a;}
.opening-hours dl{margin:0}
.opening-hours dt{font-weight:700;margin-top:0.4rem;color:#D62828}
.opening-hours dd{margin:0;color:#222;line-height:1.4} /* Darker text for 'Geschlossen' etc */
.opening-hours time{font-weight:600;color:#222} /* Dark readable time instead of orange */

@media (max-width:640px){
  .opening-hours{padding:.75rem .9rem;border-radius:10px}
  .opening-hours h4{font-size:1rem}
}

/* Footer */
.site-footer{
  border-top: 1px solid rgba(0,0,0,0.05); /* Dezente Trennlinie */
  background: #ffffff; /* Weißer Hintergrund passend zur unteren Seite */
  padding: 3rem 0 2rem; /* Mehr Platz für einen professionellen Look */
  margin-top: 4rem;
  color: var(--text-main);
  box-shadow: 0 -4px 20px rgba(0,0,0,0.02); /* Leichter Schatten nach oben */
}

.footer-inner{
  display:flex;
  flex-direction:column;
  gap:2rem; /* Mehr Abstand zwischen den Blöcken */
  text-align: center;
}

.footer-inner .contact p, .footer-inner .legal p {
  margin: 0.4rem 0;
  color: var(--muted);
}

.footer-inner strong {
  color: var(--bg); /* Firmenname ind rot */
  font-size: 1.1rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  display: inline-block;
  margin-bottom: 0.5rem;
}

/* Footer Links */
.site-footer a {
  color: var(--text-main);
  text-decoration: none;
  font-weight: 600;
  transition: color 0.2s ease;
}
.site-footer a:hover {
  color: #D62828;
  text-decoration: none;
}

.site-footer .attribution{
  text-align:center;
  color:var(--muted);
  font-size:0.85rem;
  margin-top:3rem;
  border-top: 1px solid rgba(0,0,0,0.05);
  padding-top: 1.5rem;
}

/* Footer social icons */
.footer-inner .social{
  display:flex;
  gap:1rem;
  align-items:center;
  justify-content:center;
  margin-top:1rem;
}
.footer-inner .social-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background: #f7f7f7;
  width: 48px;
  height: 48px;
  transition:transform .2s ease, background .2s ease, box-shadow .2s ease;
}
.footer-inner .social-link img{
  width:24px;
  height:24px;
  display:block;
  object-fit: contain; /* Prevents distortion/squashing */
  filter: none;
  opacity: 1;
  transition: transform .2s ease;
}
.footer-inner .social-link:hover{
  transform:translateY(-4px);
  background: #fff;
  box-shadow:0 6px 12px rgba(0,0,0,0.1);
}
.footer-inner .social-link:hover img{
  transform: scale(1.1);
}
.footer-inner .social-link:focus{outline:3px solid rgba(206,32,41,0.25);outline-offset:3px}

@media (min-width: 640px) {
  .footer-inner {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    text-align: left;
  }
  .footer-inner .social {
    margin-top: 0;
  }
}

/* Reduce large bottom safe area used for mobile sticky bar on wider screens */
/* removed previous min-width:960px rule; instead restore large padding only on small screens */
@media (max-width:700px){
  body{padding-bottom:80px !important}
}

/* Mobile sticky CTA bar - Floating island with more spacing */
.mobile-cta-bar{
  display:none;
  gap:0;
  border-radius:24px;
  position:fixed;
  left:1.5rem;
  right:1.5rem;
  width: auto;
  margin: 0 auto;
  bottom:1.5rem;
  max-width: 480px;
  background:rgba(255, 255, 255, 0.15);
  backdrop-filter:blur(20px) saturate(180%);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  border:1px solid rgba(255,255,255,0.2);
  padding:0.6rem;
  justify-content:space-between;
  align-items:center; /* Vertikal zentrieren */
  z-index:60;
  box-shadow:0 8px 32px rgba(0,0,0,0.2);
}

/* Ensure header uses more width on mobile */
@media (max-width: 640px) {
  .site-header .container {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
    max-width: 100% !important;
  }
}

/* Ensure mobile bar is visible on small screens */
@media (max-width: 960px) {
    .mobile-cta-bar { display: flex !important; }
}


/* Keep a neutral helper class for layout only; visual styles come from .btn-cta / .btn-ghost */
.mobile-cta{display:inline-flex;align-items:center;justify-content:center;gap:.5rem}
.mobile-cta:hover{filter:brightness(.98);transform:translateY(-2px)}

/* Ensure mobile-ghost CTA matches desktop .btn-ghost styles exactly */
.mobile-cta.btn-ghost,
.mobile-cta-bar .btn-ghost{
  background: #fff;
  color: #D62828;
  border: 1px solid #D62828;
  padding: .7rem .95rem;
  border-radius: 12px;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.mobile-cta.btn-ghost:hover,
.mobile-cta-bar .btn-ghost:hover{
  background: #fef2f2;
}

/* When both mobile-cta present, give spacing */
.mobile-cta + .mobile-cta{margin-left:.5rem}

/* SVG and IMG display rules removed to allow icons */
.btn svg, .button svg{display:block !important}
.btn img{display:block !important}

/* Responsive adjustments */
@media (min-width:640px){
  .hero-title{font-size:3rem}
  .hero-ctas{flex-direction:row}
  .grid img{height:220px}
  .header-inner{padding:1rem}
  .footer-inner{flex-direction:row;justify-content:space-between;align-items:center}
}
@media (min-width:960px){
  .grid{grid-template-columns:repeat(4,1fr);gap:1rem}
  .map-wrap{height:320px}
  .hero{padding:4.5rem 0}
  .mobile-cta-bar{display:none}
}

/* Section centering for consistent, readable layout */
/* Handle both variants: section carries .container or contains a .container child */
section.container,
section > .container,
section.container .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center; /* ensure paragraph text is centered */
}

/* Constrain gallery grid and center it */
.gallery .grid, .grid{
  max-width: 900px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

/* Ensure map and other wide elements are centered and constrained */
.map-wrap{max-width:720px;width:100%;margin-left:auto;margin-right:auto}

/* Ensure text blocks in sections don't span full width on large screens */
section.container p, .about p, .features li{
  max-width: 820px;
}

/* Keep lists and footer centered */
.features{align-items:center}
.footer-inner{align-items:center}

/* Small adjustments for very narrow screens */
@media (max-width:420px){
  section.container, section > .container{padding-left:.75rem;padding-right:.75rem}
  .features li{max-width:100%}
}

/* Accessibility focus styles */
:focus{outline:3px solid rgba(226,87,46,0.8);outline-offset:2px}

/* Small header variant for impressum */
.site-header.small .logo{font-size:1rem}
.site-footer.small{padding-top:.5rem}
@media (max-width:700px){
  /* strict safe gutter: container occupies viewport minus 2rem (1rem each side) */
  .container{width:calc(100% - 2rem) !important;max-width:none !important;padding-left:0 !important;padding-right:0 !important;margin-left:1rem !important;margin-right:1rem !important}

  /* force safe margins for main sections and inner wrappers */
  main, section, .hero-inner, .gallery, .about, .location, .menu, .footer-inner{
    margin-left:0 !important;margin-right:0 !important;padding-left:0 !important;padding-right:0 !important;box-sizing:border-box
  }

  /* ensure media and grid elements do not overflow the enforced container */
  img, iframe, .grid, .grid figure, .map-wrap{max-width:100% !important;width:100% !important;box-sizing:border-box !important}

  /* Keep gallery single column to avoid edge contact */
  .grid{grid-template-columns:1fr !important;gap:.6rem}

  /* Hide header nav CTAs on narrow screens to avoid crowded header */
  .top-ctas{display:none !important}

  /* Show mobile sticky CTA bar on narrow screens - layout handled by main class, just inner button flex here */
  .mobile-cta-bar .btn{
    flex:1;
    min-width:0;
    display:inline-flex;
    justify-content:center;
    align-items:center;
    text-align:center;
    padding-left:0 !important;
    padding-right:0 !important;
  }
  /* Ensure phone button stays round and doesn't stretch */
  .mobile-cta-bar .btn.btn-phone-icon {
    flex: 0 0 44px !important;
    width: 44px !important;
  }
  .mobile-cta-bar .btn + .btn{margin-left:1rem}
}

/* Final enforcement: ensure every section's inner container is centered and constrained */
section.container,
section > .container,
section.container .container,
.hero-inner,
.container.section-inner {
  max-width: 900px !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 1rem !important;
  padding-right: 1rem !important;
  box-sizing: border-box !important;
  text-align: center !important;
}

/* Center media and grids inside centered sections */
section .grid, section .map-wrap, section img, section iframe {
  margin-left: auto !important;
  margin-right: auto !important;
}
section .grid{justify-items:center}
section .grid figure{margin-left:auto;margin-right:auto}

/* Ensure hero-inner constrained */
.hero-inner{max-width:900px;margin-left:auto;margin-right:auto;padding-left:1rem;padding-right:1rem}

/* Safety: force gallery to one column below 520px to avoid edge bleed */
@media (max-width:520px){
  .grid{grid-template-columns:1fr !important}
  section{padding-left:1rem !important;padding-right:1rem !important}
}

/* Final center enforcement for inner wrappers to guarantee visual centering */
.hero-inner, main, .footer-inner, .container {
  max-width: var(--max-width) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 1rem !important;
  padding-right: 1rem !important;
  box-sizing: border-box !important;
}

.header-inner {
  max-width: var(--max-width) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 1rem !important;
  padding-right: 1rem !important;
  box-sizing: border-box !important;
}

@media (max-width: 640px) {
  .header-inner {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* Also ensure sections don't change the centering by negative margins */
section, header, footer {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Footer social icons - UPDATED */
.footer-inner .social{
  display:flex;
  gap:1rem;
  align-items:center;
  justify-content:center;
  margin-top:1rem;
}
.footer-inner .social-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background: #f7f7f7;
  width: 48px;
  height: 48px;
  transition:transform .2s ease, background .2s ease, box-shadow .2s ease;
}
.footer-inner .social-link img{
  width:24px;
  height:24px;
  display:block;
  object-fit: contain; /* Prevents distortion/squashing */
  filter: none;
  opacity: 1;
  transition: transform .2s ease;
}
.footer-inner .social-link:hover{
  transform:translateY(-4px);
  background: #fff;
  box-shadow:0 6px 12px rgba(0,0,0,0.1);
}
.footer-inner .social-link:hover img{
  transform: scale(1.1);
}
.footer-inner .social-link:focus{outline:3px solid rgba(206,32,41,0.25);outline-offset:3px}

@media (max-width:420px){
  .footer-inner .social img{width:24px;height:24px}
  .footer-inner .social{gap:.45rem}
}

/* Subtile, kontinuierliche Seiteffekte & Animationen */
@media (prefers-reduced-motion: no-preference){
  /* Gentle floating motion for gallery / figures */
  @keyframes floatY {
    0% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
    100% { transform: translateY(0); }
  }

  /* Slow pulsing scale for CTAs */
  @keyframes subtlePulse {
    0% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-3px) scale(1.02); }
    100% { transform: translateY(0) scale(1); }
  }

  /* Slow background gradient shift for hero overlay */
  @keyframes gradientShift {
    0% { background-position: 0 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0 50%; }
  }

  /* Subtle image parallax (float/tilt) for gallery items */
  .grid figure{
    will-change: transform;
    animation: floatY 6s ease-in-out infinite;
  }

  /* Make CTA gently pulse and shift gradient slowly */
  .btn-cta{
    animation: subtlePulse 6s ease-in-out infinite;
    background-size: 200% 200%;
    /* keep existing gradient but allow shifting */
  }

  /* Disable pulse animation for mobile sticky bar buttons and header buttons to avoid distraction */
  .mobile-cta-bar .btn-cta,
  .site-header .btn-cta {
    animation: none !important;
  }

  /* Hero overlay that animates a soft gradient shimmer */
  .hero{position:relative;overflow:hidden}
  /* Hero overlay intentionally disabled per user request */
  .hero::before{display:none !important}

  /* Ensure hero content is above the overlay */
  .hero-inner{position:relative;z-index:2}

  /* Subtle hover/active micro-interaction for images: slight scale on hover */
  .grid figure img{transition:transform .45s cubic-bezier(.2,.8,.2,1)}
  .grid figure:hover img{transform:scale(1.03)}
}

/* Respect reduced motion preferences by disabling animations */
@media (prefers-reduced-motion: reduce){
  .grid figure, .btn-cta, .hero::before, .grid figure img{animation: none !important; transition: none !important}
}

.btn-ubereats {
  background: #06C167 !important;
  color: #fff !important;
  border: none !important;
  box-shadow: 0 12px 30px rgba(6,193,103,0.25);
}
.btn-ubereats:hover, .btn-ubereats:focus {
  background: #059a52 !important; /* Slightly darker for hover state */
  color: #fff !important;
}

.btn-lieferando {
  background: #FF6E06 !important;
  color: #000000 !important; /* Schwarz für besseren Kontrast auf Orange */
  /* Border entfernt für Nav-Leiste, wird unten spezifisch für Large Buttons hinzugefügt */
  border: none !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2) !important; /* Dunklerer Schatten für mehr Tiefe */
  font-weight: 800 !important; /* Fettere Schrift */
}
.btn-lieferando:hover, .btn-lieferando:focus {
  background: #e55e00 !important; /* Slightly darker orange */
  color: #000000 !important;
}

/* Spezifischer weißer Rand NUR für die großen Hero-Buttons (Lieferando & Uber Eats) */
.button.large.btn-lieferando,
.button.large.btn-ubereats {
  border: 2px solid #ffffff !important;
}

/* Discount Badge für Telefon-Button */
.discount-badge {
  position: absolute;
  top: -8px;
  right: -10px;
  background: #e4572e; /* Auffälliges Rot/Orange */
  color: #fff;
  font-size: 0.7rem;
  font-weight: 800;
  padding: 4px 6px;
  border-radius: 99px;
  border: 2px solid #D62828; /* Match header red background */
  box-shadow: 0 4px 10px rgba(228, 87, 46, 0.4);
  z-index: 20;
  line-height: 1;
  white-space: nowrap;
  animation: badgePop 2s infinite;
}

@keyframes badgePop {
  0% { transform: scale(1); }
  50% { transform: scale(1.15); }
  100% { transform: scale(1); }
}

/* Wrap main content sections in cards for readability on gradient */
.about, .menu, .location, .gallery {
  background: var(--card);
  border-radius: var(--radius);
  padding: 2rem;
  margin-top: 2rem;
  margin-bottom: 2rem;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}
/* Ensure container width is respected inside these pseudo-cards */
section.about, section.menu, section.location, section.gallery {
  max-width: var(--max-width);
  margin-left: auto;
  margin-right: auto;
  width: calc(100% - 2rem); /* safe margin on mobile */
}

/* Header Drip Animation */
.header-drip {
  position: absolute;
  /* SVG is taller now for long drips.
     We overlap the top ~30px with the header to hide the seam.
     The rest hangs down. */
  bottom: -95px;
  left: 0;
  width: 100%;
  height: 140px;
  pointer-events: none;
  z-index: 40; /* Behind header background (45) */
  filter: drop-shadow(0 4px 5px rgba(0,0,0,0.25));
}

.header-drip svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* Cleanup old multi-layer classes if they exist */
.drip-svg, .drip-back, .drip-front {
  display: none;
}