/* --- Allgemeine Einstellungen --- */
body { 
  margin: 0; 
  font-family: sans-serif; 
  background: #111; 
  color: #fff; 
}
a { text-decoration: none; }

/* --- Header & Navigation (Desktop-Basis) --- */
header { 
  position: relative;            /* für Overlay-Menü */
  z-index: 5;
  display: flex; 
  justify-content: space-between; 
  align-items: center; 
  padding: 1rem 2rem; 
  background: #000; 
}
.logo img { height: 40px; vertical-align: middle; }
.logo span { font-size: 1.8rem; font-weight: bold; color: gold; margin-left: 10px; }

#main-nav { /* Desktop-Navigation */
  display: flex;
  gap: 12px;
}

#main-nav .btn { 
  padding: 0.5rem 1rem; 
  color: white; 
  background: #222; 
  border-radius: 12px; 
  transition: all .3s ease; 
}

/* --- Scroll im Burger-Menü nur auf mobilen Geräten --- */
@media (max-width: 900px) {
  #main-nav {
    max-height: calc(100vh - 80px); /* 80px ist Header-Höhe */
    overflow-y: auto; /* Nur Menü scrollt */
  }

  /* Optionale goldene Scrollbar */
  #main-nav::-webkit-scrollbar {
    width: 6px;
  }
  #main-nav::-webkit-scrollbar-thumb {
    background: gold;
    border-radius: 3px;
  }
}

#main-nav .btn:hover { background: gold; color: black; }
#main-nav .lieferando { background: #ff8000; }
#main-nav .shopify   { background: #95bf47; color: black; font-weight: bold; }
#main-nav .order     { background: gold; color: black; font-weight: bold; animation: pulse 2s infinite; }
#main-nav .tiktok:hover { background: linear-gradient(45deg,#69C9D0,#EE1D52); }
#main-nav .instagram:hover { background: linear-gradient(45deg,#feda75,#d62976,#962fbf); }
#main-nav .veranstaltungen:hover { background: linear-gradient(45deg,#ff4e50,#f9d423); color: black; }

/* --- Burger-Icon (wird mobil eingeblendet) --- */
.menu-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  position: relative;
  z-index: 6;
}
.menu-toggle span {
  display: block;
  width: 30px;
  height: 3px;
  background: gold;
  border-radius: 5px;
}

/* --- Hero Section --- */
.hero { 
  padding: 4rem 2rem; 
  text-align: center; 
  background: url('background.jpg') no-repeat center/cover; 
  animation: fadeIn 2s ease-in; 
}
.hero-logo { width: 100px; margin-bottom: 20px; }
.hero h1 { font-size: 2.5rem; color: gold; }
.reserve-btn, .event-btn {
  display: inline-block; 
  margin: 1rem; 
  padding: 0.75rem 1.5rem; 
  background: gold; 
  color: black; 
  font-weight: bold; 
  border-radius: 24px; 
  transition: all .3s ease; 
}
.reserve-btn:hover, .event-btn:hover {
  background: white; 
  color: gold; 
  box-shadow: 0 0 10px gold; 
}

/* --- Standortkarte --- */
.map h2 { text-align: center; margin-top: 2rem; }

/* --- Services --- */
.services { padding: 2rem; animation: slideUp 1s ease-in-out; }
.services ul {
  list-style: none; 
  padding: 0; 
  display: grid; 
  grid-template-columns: repeat(auto-fit, minmax(150px,1fr)); 
  gap: 0.5rem; 
}
.services li {
  background: #222; 
  padding: 0.5rem; 
  border-radius: 8px; 
  text-align: center; 
}

/* --- Footer --- */
footer {
  text-align: center; 
  padding: 1rem; 
  background: #000; 
  color: #aaa; 
  margin-top: 2rem; 
}

/* --- Formulare --- */
.form-page {
  text-align: center; 
  padding: 2rem; 
  animation: fadeIn 1s ease-in; 
}
form {
  display: flex; 
  flex-direction: column; 
  gap: 0.5rem; 
  max-width: 400px; 
  margin: auto; 
}
input, textarea, button {
  padding: 0.5rem; 
  border-radius: 5px; 
  border: none; 
}
input:focus, textarea:focus {
  outline: 2px solid gold; 
  box-shadow: 0 0 8px gold; 
}
button {
  background: gold; 
  color: black; 
  font-weight: bold; 
  cursor: pointer; 
  transition: all 0.3s ease; 
}
button:hover {
  background: white; 
  color: gold; 
  box-shadow: 0 0 10px gold; 
}

/* --- Öffnungszeiten Legacy (falls irgendwo benutzt) --- */
.times h1 { text-align: center; margin: 1rem 0; }
.times ul { list-style: none; max-width: 400px; margin: auto; padding: 0; }
.times li { padding: 0.5rem; border-bottom: 1px solid #333; }

/* --- Goldene Überschrift + Kontaktbereich --- */
.gold-ueberschrift {
  border: 3px solid gold;
  padding: 20px 40px;
  border-radius: 30px;
  text-align: center;
  display: inline-block;
  margin: 40px auto 20px;
  color: gold;
  animation: fadeInRahmen 2s ease-in-out;
}
.gold-ueberschrift h1 {
  margin: 0;
  font-size: 2rem;
  color: gold;
  font-family: 'Georgia', serif;
  letter-spacing: 1px;
}
.kontakt-bereich {
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: 40px;
  padding: 40px;
  flex-wrap: wrap;
}
.formular-links,
.qr-rechts {
  background-color: #1a1a1a;
  padding: 30px;
  border-radius: 20px;
  flex: 1;
  max-width: 500px;
  animation: fadeInQR 2s ease-in-out;
}
.qr-rechts {
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.qr-rechts img {
  width: 100%;
  height: auto;
  max-width: 250px;
  margin: 0 auto;
}
.qr-rechts a {
  color: gold;
  margin-top: 20px;
  font-weight: bold;
  display: block;
  font-size: 1.2rem;
  text-decoration: none;
}

/* --- Öffnungszeiten-Kästchen --- */
.zeiten-boxen {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0 auto;
  max-width: 400px;
}
.zeiten-boxen li {
  background: #222;
  padding: 10px 20px;
  border-radius: 12px;
  font-weight: bold;
  font-size: 1rem;
  border: 2px solid transparent;
  transition: all 0.3s ease;
}
.zeiten-boxen li:hover {
  background: #333;
  transform: scale(1.02);
}
.zeiten-boxen .geschlossen {
  border: 2px solid gold;
  color: gold;
  background: #1a1a1a;
}

/* --- Gold-Button (unter QR, etc.) --- */
.gold-button {
  margin-top: 30px;
  display: inline-block;
  padding: 12px 24px;
  border: 2px solid gold;
  border-radius: 30px;
  text-decoration: none;
  font-weight: bold;
  color: gold;
  background: transparent;
  transition: all 0.3s ease;
}
.gold-button:hover {
  background: gold;
  color: black;
  box-shadow: 0 0 10px gold;
}

/* --- Bestelloptionen (bestellen.html) --- */
.bestelloption {
  background-color: #1a1a1a;
  padding: 20px;
  border-radius: 20px;
  margin-bottom: 30px;
  text-align: center;
  box-shadow: 0 0 8px rgba(255, 215, 0, 0.05);
}
.bestelloption h2 { color: gold; margin-bottom: 15px; }
.bestell-qr {
  width: 200px;
  margin: 10px auto;
  display: block;
  border-radius: 12px;
  box-shadow: 0 0 20px gold;
  filter: drop-shadow(0 0 10px gold);
}
.highlight {
  border: 3px solid gold;
  background: linear-gradient(145deg, #1a1a1a, #222);
  animation: pulseGold 2s infinite;
}
@keyframes pulseGold {
  0% { box-shadow: 0 0 10px gold; }
  50% { box-shadow: 0 0 20px gold; }
  100% { box-shadow: 0 0 10px gold; }
}
.lieferando-box { border: 2px solid #ff8000; background: #2a1a00; }
.lieferando-button {
  background: #ff8000;
  color: black;
  padding: 10px 20px;
  border-radius: 20px;
  display: inline-block;
  margin-top: 10px;
  font-weight: bold;
  text-decoration: none;
  transition: all 0.3s ease;
}
.lieferando-button:hover {
  background: white;
  color: #ff8000;
  box-shadow: 0 0 10px #ff8000;
}
.telefon-box { border: 2px solid #666; background: #111; color: #ccc; }

/* --- Animationen global --- */
@keyframes pulse {
  0% { transform: scale(1); } 
  50% { transform: scale(1.05); } 
  100% { transform: scale(1); } 
}
@keyframes fadeIn {
  from { opacity: 0; } 
  to { opacity: 1; } 
}
@keyframes slideUp {
  from { transform: translateY(50px); opacity: 0; } 
  to { transform: translateY(0); opacity: 1; } 
}
@keyframes fadeInQR {
  from { opacity: 0; transform: scale(0.95); } 
  to { opacity: 1; transform: scale(1); } 
}
@keyframes fadeInRahmen {
  from { opacity: 0; transform: scale(0.95); } 
  to { opacity: 1; transform: scale(1); } 
}

/* === Mobile Burger-Menü (Overlay, abgerundete Buttons, Stagger-Anim) === */
@media (max-width: 768px) {
  .menu-toggle { display: flex; }

  /* Overlay-Menü – verschiebt NICHT das Layout */
  #main-nav {
    position: fixed;
    top: 70px;                 /* unter dem Header/Logo */
    right: 16px;               /* Abstand vom Rand */
    width: min(78vw, 360px);
    display: none;             /* standardmäßig zu */
    flex-direction: column;
    padding: 10px;
    z-index: 9999;
    background: transparent;   /* nur Buttons haben Flächen */
  }
  #main-nav.show { display: flex; }

  /* Buttons als Karten */
  #main-nav a {
    display: block;
    background: #232323;
    color: #fff;
    padding: 14px 20px;
    border-radius: 16px;       /* abgerundet */
    margin: 6px 0;             /* Abstand */
    box-shadow: 0 2px 10px rgba(0,0,0,.25);
    transform: translateY(-6px);
    opacity: 0;
    pointer-events: none;      /* erst aktiv, wenn sichtbar */
  }
  #main-nav.show a {
    animation: navItemIn .38s ease forwards;
    pointer-events: auto;
  }

  /* Stagger-Delay (anpassen, wenn du mehr/weniger Items hast) */
  #main-nav.show a:nth-child(1) { animation-delay: .02s; }
  #main-nav.show a:nth-child(2) { animation-delay: .08s; }
  #main-nav.show a:nth-child(3) { animation-delay: .14s; }
  #main-nav.show a:nth-child(4) { animation-delay: .20s; }
  #main-nav.show a:nth-child(5) { animation-delay: .26s; }
  #main-nav.show a:nth-child(6) { animation-delay: .32s; }
  #main-nav.show a:nth-child(7) { animation-delay: .38s; }
  #main-nav.show a:nth-child(8) { animation-delay: .44s; }
  #main-nav.show a:nth-child(9) { animation-delay: .50s; }
  #main-nav.show a:nth-child(10){ animation-delay: .56s; }
  #main-nav.show a:nth-child(11){ animation-delay: .62s; }

  /* Touch/Hover-Feedback */
  #main-nav a:active,
  #main-nav a:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0,0,0,.35);
  }

  /* Spezialfarben beibehalten */
  #main-nav a.order     { background: gold;   color:#000; font-weight:700; }
  #main-nav a.lieferando{ background:#ff8000; color:#000; font-weight:700; }
  #main-nav a.shopify   { background:#95bf47; color:#000; font-weight:700; }
}

/* Einblende-Animation für die mobilen Nav-Items */
@keyframes navItemIn {
  from { opacity: 0; transform: translateY(-6px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
/* --- Einheitlicher CTA-Button wie im Navi --- */
.btn-cta {
  display: inline-block;
  padding: 0.9rem 1.2rem;
  border-radius: 999px;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-decoration: none;
  color: #111;                    /* Text dunkel für Gold */
  background: linear-gradient(135deg, #ffd700, #f6c453 30%, #ffd700 70%);
  border: 1px solid rgba(255, 215, 0, 0.7);
  box-shadow: 0 0 18px rgba(255, 215, 0, 0.45), inset 0 0 8px rgba(255, 255, 255, 0.25);
  transform: translateZ(0) scale(1);
  transition: transform 220ms ease, box-shadow 220ms ease, filter 220ms ease;
  animation: cta-breathe 2.4s ease-in-out infinite;
  will-change: transform, box-shadow, filter;
}

.btn-cta:hover,
.btn-cta:focus-visible {
  transform: scale(1.05);
  box-shadow: 0 0 26px rgba(255, 215, 0, 0.65), inset 0 0 10px rgba(255, 255, 255, 0.35);
  filter: brightness(1.04);
  outline: none;
}

@keyframes cta-breathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.03); }
}

/* Für Nutzer mit reduziertem Bewegungsempfinden */
@media (prefers-reduced-motion: reduce) {
  .btn-cta { animation: none; }
}

/* Optional: Button mittig unter QR */
.cta-order .btn-cta {
  margin-top: 0.8rem;
  text-align: center;
}
/* ==== Elegante Startseiten-Addons (kollisionsfrei, nur cm-* Klassen) ==== */
:root{
  --cm-gold:#d4af37; 
  --cm-gold-soft:#f1d27a;
  --cm-card:#121212;
}

/* 1) Intro-Streifen */
.cm-intro{padding:36px 18px 18px;border-bottom:1px solid rgba(212,175,55,.25)}
.cm-intro__inner{max-width:1100px;margin:0 auto;text-align:center}
.cm-intro__eyebrow{letter-spacing:.18em;text-transform:uppercase;font-size:.8rem;opacity:.8;display:inline-block;margin-bottom:8px}
.cm-intro__title{font-family:"Playfair Display",serif;margin:0;font-size:clamp(1.6rem,3.2vw,2.4rem)}
.cm-intro__sub{margin:.4rem auto 0;max-width:700px;opacity:.85}

/* 2) Highlights */
.cm-highlights{padding:24px 18px 6px}
.cm-highlights__grid{max-width:1100px;margin:0 auto;display:grid;gap:16px;grid-template-columns:repeat(3,1fr)}
@media(max-width:900px){.cm-highlights__grid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.cm-highlights__grid{grid-template-columns:1fr}}
.cm-card{background:var(--cm-card);border:1px solid rgba(212,175,55,.18);border-radius:16px;overflow:hidden;transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}
.cm-card:hover{transform:translateY(-3px);border-color:rgba(212,175,55,.35);box-shadow:0 12px 28px rgba(0,0,0,.45)}
.cm-card img{width:100%;height:220px;object-fit:cover;display:block}
.cm-card__body{padding:12px 14px 16px}
.cm-card__body h3{margin:.2rem 0 .2rem;font-size:1.05rem}
.cm-card__body p{margin:0;opacity:.85}

/* 3) Gold-Ribbon CTA */
.cm-ribbon{display:flex;justify-content:center;padding:24px 18px 6px}
.cm-ribbon__btn{display:inline-block;padding:.9rem 1.4rem;border-radius:999px;background:linear-gradient(135deg,var(--cm-gold),var(--cm-gold-soft));color:#000;font-weight:700;border:1px solid rgba(0,0,0,.15);box-shadow:0 6px 18px rgba(212,175,55,.35);transition:transform .16s ease,filter .16s ease}
.cm-ribbon__btn:hover{transform:translateY(-2px);filter:brightness(1.05)}

/* 4) Olivenöl-Story */
.cm-olive{padding:28px 18px 8px}
.cm-olive__inner{max-width:1100px;margin:0 auto;display:grid;gap:16px;grid-template-columns:1.2fr .8fr;align-items:center}
@media(max-width:860px){.cm-olive__inner{grid-template-columns:1fr}}
.cm-olive__text h3{margin:.2rem 0 6px;font-size:1.25rem}
.cm-olive__text p{margin:0 0 10px;opacity:.9}
.cm-olive__link{display:inline-block;border:1px solid rgba(212,175,55,.5);border-radius:999px;padding:.6rem 1rem}
.cm-olive__link:hover{background:rgba(212,175,55,.08)}
.cm-olive__img{width:100%;border-radius:14px;border:1px solid rgba(212,175,55,.18)}

/* 5) Vertrauens-Leiste */
.cm-trust{padding:20px 18px 34px;border-top:1px solid rgba(212,175,55,.25)}
.cm-trust__inner{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:1fr 180px;gap:16px;align-items:center}
@media(max-width:720px){.cm-trust__inner{grid-template-columns:1fr;text-align:center}}
.cm-trust__left strong{display:block;margin-bottom:4px}
.cm-trust__left small{opacity:.75}
.cm-trust__qr img{width:160px;max-width:100%;filter:drop-shadow(0 6px 18px rgba(0,0,0,.5))}

/* Optionaler zarter Glow für goldene Elemente */
.cm-gold-glow{box-shadow:0 0 0 1px rgba(212,175,55,.35) inset, 0 10px 30px rgba(212,175,55,.18)}

/* Bilder korrekt ins Bild zentrieren */
.cm-card img{
  width:100%;
  height:260px;                 /* gleichmäßige Höhe */
  object-fit:cover;
  object-position:center center;/* nicht nach oben verschoben */
  display:block;
}
@media(max-width:600px){
  .cm-card img{ height:220px; }
}

/* Text als abgerundetes Rechteck über dem Bild */
.cm-card{ position:relative; background:#111; border-radius:16px; overflow:hidden;
  border:1px solid rgba(212,175,55,.18); }
.cm-card__body{
  position:absolute; left:12px; bottom:12px;
  background:rgba(0,0,0,.45);
  backdrop-filter: blur(6px);
  border:1px solid rgba(212,175,55,.45);
  border-radius:14px;
  padding:10px 12px;
  max-width:85%;
  box-shadow:0 8px 24px rgba(0,0,0,.45);
}
.cm-card__body h3{
  margin:.1rem 0 .2rem;
  font-size:1.05rem;
  color:#f1d27a;                /* edles Gold */
  letter-spacing:.2px;
}
.cm-card__body p{
  margin:0;
  color:#eee;
  opacity:.95;
  font-size:.95rem;
}
/* Card-Look mit Goldrahmen */
.cm-olive{ padding:28px 18px 8px; }
.cm-olive__inner{
  max-width:1100px; margin:0 auto;
  display:grid; gap:20px; grid-template-columns:1.1fr .9fr; align-items:center;
  background:#111; border:1px solid rgba(212,175,55,.28);
  border-radius:16px; padding:20px;
}
@media(max-width:860px){ .cm-olive__inner{ grid-template-columns:1fr; } }

/* Überschrift mit goldener Unterstreichung */
.cm-olive__text h3{
  margin:.2rem 0 10px; font-size:1.28rem; color:#f1d27a; position:relative; display:inline-block;
}
.cm-olive__text h3::after{
  content:""; display:block; height:2px; margin-top:6px;
  width:100%; background:linear-gradient(90deg, rgba(212,175,55,.0), rgba(212,175,55,1), rgba(212,175,55,.0));
  border-radius:2px;
}

.cm-olive__text p{ margin:0 0 14px; opacity:.9; }

/* Shopify-grüner Button (schwarze Schrift) */
.cm-olive__link.shopify{
  display:inline-block;
  padding:.7rem 1.1rem; border-radius:999px;
  background:#95bf47;     /* Shopify-Grün */
  color:#000;              /* schwarze Schrift */
  border:1px solid #5e8e2e;
  box-shadow:0 8px 22px rgba(149,191,71,.35);
}
.cm-olive__link.shopify:hover{ filter:brightness(1.06); }

/* Bild mit Rahmen anpassen */
.cm-olive__img{
  width:100%; border-radius:14px;
  border:1px solid rgba(212,175,55,.22);
  display:block; object-fit:cover; object-position:center;
}
/* Navi-Button & Olivenöl-Link in Shopify-Grün */
#main-nav .btn.shopify,
.cm-olive__link.shopify {
  background:#95bf47;          /* Shopify-Grün */
  color:#000 !important;       /* schwarze Schrift */
  border:1px solid #5e8e2e;    /* dunkler Rand */
}

#main-nav .btn.shopify:hover,
.cm-olive__link.shopify:hover {
  filter:brightness(1.06);
}
/* Gold-Glow für Überschriften */
.cm-card__body h3,
.cm-olive__text h3 {
  text-shadow: 0 0 6px rgba(212,175,55,0.4),
               0 0 12px rgba(212,175,55,0.25);
}
/* Leichtes Schärfen für Highlight-Bilder */
.cm-card img,
.cm-olive__img {
  filter: contrast(1.08) saturate(1.05) brightness(1.03);
  image-rendering: auto;
}

/* Für sehr hochauflösende Displays noch mehr Klarheit */
@media (min-resolution: 2dppx) {
  .cm-card img,
  .cm-olive__img {
    filter: contrast(1.12) saturate(1.08) brightness(1.05);
  }
}
/* Mobile-Dropdown-Optimierung */
@media (max-width: 768px) {
  /* Gesamtes Dropdown-Panel */
  #main-nav {
    background-color: rgba(0, 0, 0, 0.85); /* dunkler Hintergrund */
    backdrop-filter: blur(8px);            /* Unschärfe */
    -webkit-backdrop-filter: blur(8px);    /* Safari-Unterstützung */
    border: 1px solid rgba(212,175,55,0.35); /* goldene Kontur */
    box-shadow: 0 0 12px rgba(212,175,55,0.4); /* goldener Glow */
    padding: 10px;
    border-radius: 16px;
  }

  /* Einzelne Menüpunkte */
  #main-nav a {
    display: block;
    background: rgba(15, 15, 15, 0.65);      /* dunkle Box pro Punkt */
    border: 1px solid rgba(212,175,55,0.3);  /* goldene Kontur */
    border-radius: 14px;
    margin: 8px 0;
    padding: 12px 14px;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0,0,0,0.9); /* Lesbarkeit */
    box-shadow: 0 6px 14px rgba(0,0,0,0.35);
    transition: all 0.15s ease;
  }

  /* Hover-/Fokus-Effekt */
  #main-nav a:hover,
  #main-nav a:focus {
    border-color: rgba(212,175,55,0.65);
    box-shadow: 0 0 12px rgba(212,175,55,0.45);
    transform: translateY(-1px);
  }
}
#main-nav .btn.instagram{ border-color: rgba(193,53,132,0.8); } /* IG-Akzent */
#main-nav .btn.tiktok{ border-color: rgba(0,242,234,0.7); }     /* TikTok-Akzent */

/* ====== NAV: Schärfe & Lesbarkeit (mobil + desktop) ====== */

/* bessere Textdarstellung auf allen Geräten */
#main-nav, 
#main-nav a,
#main-nav .btn {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Schatten/Filter vermeiden, die Text weichzeichnen */
#main-nav a,
#main-nav .btn {
  text-shadow: none !important;
  filter: none !important;
  backface-visibility: hidden;
  will-change: auto;
}

/* sanfter Hover ohne Scale (Scale kann auf manchen Phones weich wirken) */
#main-nav a:hover,
#main-nav .btn:hover:not(.order) { transform: none !important;
  box-shadow: 0 0 12px rgba(212,175,55,.35);
  border-color: rgba(212,175,55,.65);
}

/* ====== Seite blockieren, wenn Menü offen ====== */
html.menu-open,
body.menu-open {
  overflow: hidden;
  touch-action: none;
}

/* ====== MOBIL: Nur im Dropdown scrollen ====== */
@media (max-width: 900px){
  #main-nav{
    max-height: calc(100vh - 80px);  /* volle Höhe minus Header */
    overflow-y: auto;                 /* eigener Scrollbereich */
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;     /* verhindert Scrollen der Seite dahinter */
    background-color: rgba(0,0,0,0.92); /* mehr Kontrast für Lesbarkeit */
  }

  /* Links im Panel: mehr Kontrast, keine Unschärfe-Effekte */
  #main-nav a, 
  #main-nav .btn {
    background: rgba(20,20,20,0.90);
    border: 1px solid rgba(212,175,55,0.35);
    color: #fff;
    text-shadow: none !important;
    transform: none !important;
  }

  /* dezente Scrollbar nur im Panel */
  #main-nav::-webkit-scrollbar{ width: 8px; }
  #main-nav::-webkit-scrollbar-thumb{
    background: rgba(212,175,55,0.5);
    border-radius: 6px;
  }
}

/* ====== DESKTOP: Klarer Text auch ohne Hover-Scale ====== */
@media (min-width: 901px) {
  #main-nav .btn:not(.order) {
    text-shadow: none !important;
    transform: none !important;
  }
}
/* ====== NAV: Schärfe & Lesbarkeit (mobil + desktop) ====== */

/* bessere Textdarstellung auf allen Geräten */
#main-nav, 
#main-nav a,
#main-nav .btn {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Schatten/Filter vermeiden, die Text weichzeichnen */
#main-nav a,
#main-nav .btn {
  text-shadow: none !important;
  filter: none !important;
  backface-visibility: hidden;
  will-change: auto;
}

/* sanfter Hover ohne Scale (Scale kann auf manchen Phones weich wirken) */
#main-nav a:hover,
#main-nav .btn:hover:not(.order) { transform: none !important;
  box-shadow: 0 0 12px rgba(212,175,55,.35);
  border-color: rgba(212,175,55,.65);
}

/* ====== Seite blockieren, wenn Menü offen ====== */
html.menu-open,
body.menu-open {
  overflow: hidden;
  touch-action: none;
}

/* ====== MOBIL: Nur im Dropdown scrollen ====== */
@media (max-width: 900px){
  #main-nav{
    max-height: calc(100vh - 80px);  /* volle Höhe minus Header */
    overflow-y: auto;                 /* eigener Scrollbereich */
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;     /* verhindert Scrollen der Seite dahinter */
    background-color: rgba(0,0,0,0.92); /* mehr Kontrast für Lesbarkeit */
  }

  /* Links im Panel: mehr Kontrast, keine Unschärfe-Effekte */
  #main-nav a, 
  #main-nav .btn {
    background: rgba(20,20,20,0.90);
    border: 1px solid rgba(212,175,55,0.35);
    color: #fff;
    text-shadow: none !important;
    transform: none !important;
  }

  /* dezente Scrollbar nur im Panel */
  #main-nav::-webkit-scrollbar{ width: 8px; }
  #main-nav::-webkit-scrollbar-thumb{
    background: rgba(212,175,55,0.5);
    border-radius: 6px;
  }
}

/* ====== DESKTOP: Klarer Text auch ohne Hover-Scale ====== */
@media (min-width: 901px) {
  #main-nav .btn:not(.order) {
    text-shadow: none !important;
    transform: none !important;
  }
}
/* Goldene Hauptüberschrift mit Glanz, Unterstrich & Glow */
.gold-title {
  color: #ffd76b; /* Goldfarbe */
  font-weight: bold;
  position: relative;
  display: inline-block;
  text-shadow: 0 0 8px rgba(255, 215, 107, 0.8); /* goldener Glow */
  background: linear-gradient(to bottom, #ffe8a0 0%, #ffd76b 50%, #cc9f2a 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Unterstreichung */
.gold-title::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -5px;
  height: 1.5px;
  background: linear-gradient(90deg, rgba(255, 215, 107, 0.1), #ffd76b, rgba(255, 215, 107, 0.1));
  border-radius: 2px;
}
/* --- Fix für CTA-Button in speisekarte.html --- */
.btn-cta{
  transform: none !important;            /* kein Skalieren -> kein Blur */
  filter: none !important;               /* keine Helligkeitsfilter */
  animation: none !important;            /* „Breathe“-Animation aus */
  text-shadow: none !important;          /* Text bleibt scharf */
  -webkit-font-smoothing: antialiased;   /* Schriftschärfe */
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  box-shadow: 0 0 18px rgba(255,215,0,.45), inset 0 0 8px rgba(255,255,255,.25);
}

.btn-cta:hover,
.btn-cta:focus-visible{
  transform: none !important;            /* kein Scale beim Hover */
  filter: none !important;
  box-shadow: 0 0 22px rgba(255,215,0,.55), inset 0 0 10px rgba(255,255,255,.30);
  outline: none;
}

/* Sicherheitsabstand, damit nichts optisch „klebt“ */
div[style*="text-align:center"][style*="margin-bottom"] .btn-cta{
  margin-top: .8rem !important;
}

/* Falls Glow des QR-Codes zu „hell“ wirkt (von .bestell-qr), etwas zähmen */
.bestell-qr{
  filter: drop-shadow(0 0 6px gold) !important; /* kleinerer Glow */
}

/* Neuer Überschriften-Stil wie auf der Speisekarte */

/* === Softer yellow headline like SPEISEKARTE === */
.gold-title {
  font-weight: 900;
  text-transform: uppercase;
  font-size: 2.5rem;
  color: #FFC700; /* etwas dunkleres Gelb */
  text-shadow:
    0 0 2px rgba(255, 199, 0, 0.8),
    0 0 4px rgba(255, 199, 0, 0.6),
    0 0 8px rgba(255, 199, 0, 0.4);
  position: relative;
  display: inline-block;
}

.gold-title::after {
  content: "";
  display: block;
  height: 1.5px;
  margin-top: 5px;
  background: linear-gradient(90deg, transparent, rgba(255,199,0,0.8), transparent);
  box-shadow: 0 0 2px rgba(255,199,0,0.8);
  border-radius: 2px;
}

/* Logo leicht tiefer für bessere Ausrichtung */
header .logo img {
  position: relative;
  top: 2px; /* ggf. 0–3 px anpassen */
  vertical-align: middle;
}

/* === Link-Karten (Startkacheln) === */
.link-card{ display:block; color:inherit; text-decoration:none; }
.link-card:hover{ transform: translateY(-2px); box-shadow: 0 12px 28px rgba(0,0,0,.45); }
@media (prefers-reduced-motion: reduce){
  .link-card:hover{ transform:none; }
}

/* === Goldene Produktboxen (Olivenöl-Stil) mit Hover-Scale === */
.cm-olive__inner.link-card,
.cm-olive__inner.link-card:hover{
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.cm-olive__inner.link-card:hover{
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 12px 28px rgba(0,0,0,.45);
  border-color: rgba(212,175,55,.45);
}
.cm-olive__link.btn-shop{
  display:inline-block; margin-top:8px;
  border:1px solid rgba(212,175,55,.5);
  border-radius:999px; padding:.7rem 1.1rem;
  font-weight:700; color:#000; background:#95bf47; text-decoration:none;
  box-shadow:0 8px 22px rgba(149,191,71,.35);
}
.cm-olive__link.btn-shop:hover{ filter:brightness(1.06); }

/* ===== Jubiläums-Badge (25 Jahre) ===== */
.anniversary-badge{
  --gold1:#ffd873; --gold2:#e9bf52; --gold3:#c79f2d;
  position: relative;
  display: inline-flex; align-items:center; justify-content:center;
  margin-left:14px; width:56px; height:56px; border-radius:999px;
  background: radial-gradient(circle at 30% 30%, var(--gold1), var(--gold2) 60%, var(--gold3));
  border:1px solid rgba(0,0,0,.35);
  box-shadow: inset 0 1px 2px rgba(255,255,255,.35), 0 0 18px rgba(212,175,55,.25);
  color:#111; user-select:none;
}
.anniversary-badge::before{ content:""; position:absolute; inset:3px; border-radius:999px; border:1px solid rgba(0,0,0,.25); box-shadow: inset 0 0 10px rgba(0,0,0,.18); }
.anniversary-badge::after{ content:""; position:absolute; top:8px; left:14px; width:18px; height:8px; border-radius:999px; background:rgba(255,255,255,.35); filter:blur(1px); }
.anniversary-badge .anniv-num{ font-weight:900; font-size:1.25rem; line-height:1; letter-spacing:.5px; }
.anniversary-badge .anniv-text{ position:absolute; bottom:6px; font-size:.60rem; text-transform:uppercase; letter-spacing:.08em; color:rgba(0,0,0,.75); }
@media (max-width: 900px){
  .anniversary-badge{ width:46px; height:46px; margin-left:10px; }
  .anniversary-badge .anniv-num{ font-size:1.05rem; }
  .anniversary-badge .anniv-text{ bottom:5px; font-size:.55rem; }
}
@media (max-width: 600px){
  header{ position:relative; }
  .anniversary-badge{ position:absolute; left:88px; top:50%; transform:translateY(-50%); margin-left:0; }
}

/* === Refinement: Produktbilder (Olivenöl, Pistazien, Tomaten) – Größe & goldener Rahmen === */
.cm-olive__img{
  width: 100%;
  max-width: 360px;           /* Desktop-Zielgröße */
  height: auto;
  display: block;
  margin: 12px auto 18px;     /* zentriert in der rechten Spalte */
  padding: 12px;              /* Passepartout im Rahmen */
  background: #0a0a0a;        /* dunkler Hintergrund im Rahmen */
  border-radius: 18px;
  border: 1px solid rgba(212,175,55,.55);   /* goldener Rahmen */
  box-shadow:
    inset 0 0 0 1px rgba(212,175,55,.18),   /* feiner Innenring */
    0 0 26px rgba(212,175,55,.12);          /* zarter Gold-Glow außen */
  object-fit: contain;        /* nichts abschneiden */
  object-position: center;
}

/* fein gestaffelte Größen für schmalere Screens */
@media (max-width: 1100px){ .cm-olive__img{ max-width: 320px; } }
@media (max-width: 860px) { .cm-olive__img{ max-width: 280px; } }
@media (max-width: 600px) { .cm-olive__img{ max-width: 220px; } }

/* Box selbst: edler Gold-Look, nicht zu fett */
.cm-olive__inner{
  border-color: rgba(212,175,55,.28) !important;
  box-shadow:
    inset 0 0 0 1px rgba(212,175,55,.08),
    0 0 14px rgba(212,175,55,.10);
}

/* === PRODUKTSEKTION FIX: 2-Spalten-Layout (Text links, Bild rechts) + sichtbarer Gold-Kasten === */
.cm-olive__inner{
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  align-items: center;
  gap: 20px;
  background: #111;
  border: 1px solid rgba(212,175,55,.28);
  border-radius: 16px;
  padding: 20px;
}
/* Reihenfolge stabilisieren */
.cm-olive__text{ order: 1; }
.cm-olive__img { order: 2; }

/* Bildgröße & Rahmen wie im Referenz-Screenshot */
.cm-olive__img{
  width: 100%;
  max-width: 360px;
  height: auto;
  justify-self: center;
  border-radius: 18px;
  padding: 12px;
  background: #0a0a0a;
  border: 1px solid rgba(212,175,55,.55);
  box-shadow:
    inset 0 0 0 1px rgba(212,175,55,.18),
    0 0 26px rgba(212,175,55,.12);
  object-fit: contain;
  object-position: center;
}

/* Responsiv staffeln */
@media (max-width: 1100px){ .cm-olive__img{ max-width: 320px; } }
@media (max-width: 860px) { 
  .cm-olive__inner{ grid-template-columns: 1fr; }
  .cm-olive__img{ max-width: 280px; justify-self: center; }
}
@media (max-width: 600px) { .cm-olive__img{ max-width: 220px; } }

/* Hover wie gehabt */
.cm-olive__inner.link-card,
.cm-olive__inner.link-card:hover{
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.cm-olive__inner.link-card:hover{
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 12px 28px rgba(0,0,0,.45);
  border-color: rgba(212,175,55,.45);
}
/* === Sticky-Header + Badge-Overlap-Fix (am Dateiende einfügen) === */

/* Header immer sichtbar */
header{
  position: sticky;  /* übersteuert das frühere 'position: relative' */
  top: 0;
  z-index: 1000;
  background: #000;  /* verhindert Durchscheinen beim Scrollen */
}

/* Logozeile sauber ausrichten (Bild + Text nebeneinander) */
.logo a{
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

/* Medaille nicht mehr absolut über den Titel legen */
@media (max-width: 600px){
  .anniversary-badge{
    position: static !important;   /* überschreibt das frühere position:absolute */
    margin-left: 8px;
    transform: scale(0.85);        /* etwas kleiner auf sehr kleinen Geräten */
  }
}

/* optional: auf sehr schmalen Geräten Badge unter den Titel setzen */
@media (max-width: 420px){
  header{ flex-wrap: wrap; }
  .anniversary-badge{ order: 2; width: 42px; height: 42px; margin: 6px 0 0 0; }
}
/* --- Verbesserungen für Weine-Seiten --- */

/* Sticky Header */
header {
  position: sticky;
  top: 0;
  z-index: 1000;
}

/* Info-Boxen Hover-Vergrößerung */
.info-box {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.info-box:hover {
  transform: scale(1.03);
  box-shadow: 0 8px 24px rgba(212,175,55,0.35);
}

/* Wein-Karten Hover-Vergrößerung */
.flip-card {
  transition: transform 0.3s ease;
}
.flip-card:hover {
  transform: scale(1.03);
}

/* Lesbarkeit Info-Box Texte */
.info-box p {
  font-size: 1.05rem;
  line-height: 1.6;
}
/* ===== Octagon Signature – goldener Glow & Shine ===== */
.octagon-special .frame{
  border-width:2px;
  box-shadow: 0 0 0 3px rgba(255,215,0,.22), 0 16px 40px rgba(0,0,0,.75), inset 0 0 12px rgba(255,215,0,.25);
  position: relative;
  animation: octaPulse 2.8s ease-in-out infinite;
}
@keyframes octaPulse {
  0%,100%{ box-shadow: 0 0 0 3px rgba(255,215,0,.18), 0 16px 40px rgba(0,0,0,.75), inset 0 0 12px rgba(255,215,0,.25); }
  50%     { box-shadow: 0 0 0 6px rgba(255,215,0,.32), 0 20px 48px rgba(0,0,0,.85), inset 0 0 16px rgba(255,215,0,.35); }
}
.octagon-special .frame::after{
  content:""; position:absolute; inset:-2px;
  background: linear-gradient(120deg, transparent 35%, rgba(255,255,255,.25) 45%, transparent 55%);
  transform: translateX(-120%); transition: transform .9s ease; pointer-events:none;
}
.octagon-special:hover .frame::after{ transform: translateX(120%); }
/* --- Mobile Optimierung für Weine-Seiten --- */
@media (max-width: 480px) {
  /* Flipcards kleiner machen */
  .wine-card {
    width: 100%;
    margin: 10px 0;
    transform: scale(0.95);
  }

  /* Texte etwas kleiner */
  .wine-card .front, 
  .wine-card .back {
    font-size: 0.9rem;
    line-height: 1.4;
  }

  /* Info-Boxen besser lesbar */
  .info-box {
    font-size: 0.95rem;
    line-height: 1.5;
    padding: 14px;
  }

  /* Mehr Abstand unter Überschrift */
  .title-wrap {
    margin-bottom: 30px;
  }
}




/* === Flip-Card: Mobile Fix (keine Änderungen am bestehenden Design) === */
.wine-card .frame{
  perspective: 1000px;
}
.wine-card .flip{
  transform-style: preserve-3d;
  transition: transform 0.8s;
  will-change: transform;
}
/* Wenn die Karte "flipped" ist, drehe den inneren Wrapper */
.wine-card.flipped .flip{
  transform: rotateY(180deg);
}
/* Vorder- & Rückseite sauber trennen */
.wine-card .face{
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden; /* iOS Safari */
  transform: translateZ(0);             /* vermeidet Text-Flimmern */
}
.wine-card .face.back{
  transform: rotateY(180deg) translateZ(0);
}
/* Sicherstellen, dass die Karte selbst als Positionierungs-Container dient */
.wine-card .frame, .wine-card{
  position: relative;
}

/* === (ADDON) Wine pages tweaks & effects ================================= */

/* Mehr Abstand unter Seitenüberschriften (Rot/Weiß/Rosé) */
.main-wrap .intro-wrap{ margin-bottom: 28px; }
.main-wrap .intro-wrap .gold-title{ margin-bottom: 6px; }
.wine-grid{ margin-top: 22px; }

/* Öffnen-Buttons (hochwertiger Gold-Stil, wie Speisekarte) */
.choice-card .go .btn,
.wine-card .open-btn {
  display:inline-block;
  padding:.65rem 1.05rem;
  border-radius:999px;
  font-weight:800;
  letter-spacing:.2px;
  color:#111;
  background: linear-gradient(135deg, #ffd700, #f6c453 30%, #ffd700 70%);
  border: 1px solid rgba(255,215,0,.75);
  box-shadow: 0 6px 18px rgba(212,175,55,.35), inset 0 0 8px rgba(255,255,255,.25);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.choice-card .go .btn:hover,
.wine-card .open-btn:hover{ transform: translateY(-2px) scale(1.03); filter:brightness(1.04); }
.choice-card .go .btn:focus,
.wine-card .open-btn:focus{ outline:2px solid rgba(255,215,0,.65); outline-offset:2px; }

/* Mehr Luft zwischen Infokarten und Rastern */
.info-card{ margin-top: 16px; margin-bottom: 22px; }
.info-card + .choice-grid{ margin-top: 22px; }

/* Hover-Scale für goldene Rahmen / Karten (wie Olivenöl auf Index) */
.info-card, .note-gold, .choice-card, .wine-card .frame {
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.info-card:hover, .note-gold:hover, .choice-card:hover, .wine-card:hover .frame{
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 12px 28px rgba(0,0,0,.45);
  border-color: rgba(212,175,55,.45);
}

/* Octagon-Link als Gold-Button */
.info-card a[href*="weine-rot.html#octagon"],
.info-card a[href*="/weine-rot.html#octagon"]{
  display:inline-block; margin-top:.6rem; padding:.75rem 1.25rem; border-radius:999px;
  font-weight:800; text-decoration:none; color:#111;
  background: linear-gradient(135deg, #ffd700, #f6c453 30%, #ffd700 70%);
  border: 1px solid rgba(255,215,0,.75);
  box-shadow: 0 6px 18px rgba(212,175,55,.35), inset 0 0 8px rgba(255,255,255,.25);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.info-card a[href*="weine-rot.html#octagon"]:hover{
  transform: translateY(-2px) scale(1.03);
  filter: brightness(1.04);
}

/* Scroll-Reveal Effekt (sanftes Einblenden) */
.reveal{ opacity:0; transform: translateY(18px); }
.reveal.in-view{ opacity:1; transform:none; transition: opacity .6s ease, transform .6s ease; }

/* Flip-Card Mobile Fix (Schriften nicht spiegeln) */
.wine-card .frame{ perspective: 1000px; }
.wine-card .flip{ transform-style: preserve-3d; transition: transform .8s; will-change: transform; }
.wine-card.flipped .flip{ transform: rotateY(180deg); }
.wine-card .face{ position:absolute; inset:0; backface-visibility:hidden; -webkit-backface-visibility:hidden; transform: translateZ(0); }
.wine-card .face.back{ transform: rotateY(180deg) translateZ(0); }
.wine-card .frame, .wine-card{ position: relative; }

/* ===== Pop-up Grundlayout & Animation ===== */
.event-popup{position:fixed;inset:0;display:grid;place-items:center;background:rgba(0,0,0,.55);backdrop-filter:blur(0px);z-index:2000;opacity:0;transition:opacity .6s ease, backdrop-filter .8s ease}
.event-popup__card{position:relative;background:#111;border:1px solid rgba(212,175,55,.5);border-radius:22px;max-width:560px;width:92%;padding:16px;box-shadow:0 12px 50px rgba(0,0,0,.6);transform:scale(.96);filter:blur(6px);opacity:0;transition:transform .7s ease, filter .7s ease, opacity .7s ease}
.event-popup__img{width:100%;height:auto;border-radius:16px;display:block}
.event-popup__close{position:absolute;right:12px;top:10px;background:transparent;border:none;font-size:1.7rem;line-height:1;color:#fff;cursor:pointer}

/* Goldene Box unter dem Flyer */
.event-cta{margin-top:12px;border:1px solid var(--gold,#d4af37);border-radius:16px;padding:12px;display:flex;gap:12px;align-items:center;justify-content:space-between;background:linear-gradient(180deg,#141414,#0b0b0b)}
.event-cta__title{color:var(--gold,#d4af37);margin:0 0 2px 0}
.event-cta__subtitle{margin:0;color:#ddd}
.btn--gold{background:var(--gold,#d4af37);color:#000 !important;font-weight:700;border-radius:14px;padding:.6rem 1rem;border:1px solid rgba(0,0,0,.3)}

/* Öffnen-Zustand */
.event-popup.is-open{opacity:1;backdrop-filter:blur(6px)}
.event-popup.is-open .event-popup__card{transform:scale(1);filter:blur(0);opacity:1}

/* Einmaliger Gold-Schimmer über dem Rand */
.event-popup__card{position:relative;overflow:hidden}
.event-popup__card::after{
  content:""; position:absolute; inset:0; border-radius:22px; pointer-events:none;
  background:linear-gradient(120deg, rgba(212,175,55,0) 0%, rgba(212,175,55,.35) 50%, rgba(212,175,55,0) 100%);
  mix-blend-mode:screen; opacity:0; transform:translateX(-30%);
}
.event-popup.is-open .event-popup__card::after{animation:gold-sheen 1.6s ease-out .25s forwards}
@keyframes gold-sheen{
  0%{opacity:0; transform:translateX(-30%)}
  40%{opacity:.35}
  100%{opacity:0; transform:translateX(30%)}
}

/* CTA leicht einblenden */
.event-popup.is-open .event-cta{animation:cta-fade .7s ease .25s both}
@keyframes cta-fade{from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:translateY(0)}}

/* Barrierefreiheit: weniger Bewegung */
@media (prefers-reduced-motion: reduce){
  .event-popup, .event-popup__card{transition:none}
  .event-popup__card, .event-popup__card::after, .event-cta{animation:none}
}

/* ===== Veranstaltungssektion ===== */
.event-next{margin-top:24px}
.event-card{background:#0f0f0f;border:1px solid rgba(212,175,55,.35);border-radius:18px;padding:16px}
.event-card__header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px}
.event-card__body p{margin:0 0 12px}
.event-actions{display:flex;gap:10px;flex-wrap:wrap}

/* Badge öffentlich */
.capacity-badge{display:inline-block;padding:.35rem .6rem;border-radius:12px;background:#1b1b1b;border:1px solid rgba(212,175,55,.35);color:#eee;font-size:.9rem}
.capacity-badge.is-full{background:#2a0000;border-color:#6b0000;color:#ffb3b3;font-weight:700}

/* ===== Gänse-Essen – Styles ===== */
.event-title--gaense { color: #b11e2f; } /* Überschrift-Farbe anpassbar */

.event-card--gold{
  background:#0f0f0f;
  border:1px solid rgba(212,175,55,.45);
  border-radius:18px;
  padding:16px;
  box-shadow:0 8px 26px rgba(0,0,0,.35);
}

.hover-grow{ transition: transform .18s ease, box-shadow .18s ease; }
.hover-grow:hover{ transform:translateY(-2px) scale(1.015); box-shadow:0 12px 34px rgba(0,0,0,.45); }

.btn--pill{ border-radius:999px; padding:.65rem 1.05rem; font-weight:700; }
.btn--gold{ background:var(--gold,#d4af37); color:#000 !important; border:1px solid rgba(0,0,0,.25); }
.btn--gold:hover{ filter:brightness(1.03); }
.btn--gold-outline{ background:transparent; color:var(--gold,#d4af37) !important; border:1px solid var(--gold,#d4af37); }
.btn--gold-outline:hover{ background:rgba(212,175,55,.08); }

.event-notes{
  margin-top:12px;
  border:1px solid var(--gold,#d4af37);
  border-radius:14px;
  padding:10px 12px;
  background:linear-gradient(180deg,#141414,#0b0b0b);
}
.event-notes ul{ margin:0; padding-left:18px; }

.wa-helper-box{
  margin-top:10px;
  border:1px solid var(--gold,#d4af37);
  border-radius:14px;
  padding:.6rem .9rem;
  display:inline-block;
  background:linear-gradient(180deg,#141414,#0b0b0b);
  font-weight:600;
}

/* --- Zusatz für Gänse-Essen Hinweis unter Button --- */
.gaense-hint{
  margin:10px auto 0;
  max-width:780px;
  text-align:center;
  opacity:.9;
}

/* --- Basis-Button (für Event-Buttons) --- */
.btn{
  display:inline-block;
  padding:.6rem 1rem;
  border-radius:12px;
  background:#222;
  color:#fff;
  transition:filter .2s ease, box-shadow .2s ease, transform .2s ease;
}
.btn:hover{ filter:brightness(1.05); }



/* --- Hover-Effekt für Karten --- */
.event-card, .formular-links, .qr-rechts {
  transition: transform .25s ease, box-shadow .25s ease;
}
.event-card:hover, .formular-links:hover, .qr-rechts:hover {
  transform: scale(1.03);
  box-shadow: 0 0 24px rgba(212,175,55,0.35);
}

/* --- WhatsApp Button im QR-Bereich --- */
.btn-wa{
  display:inline-block;
  background:#ffd700;
  color:#000;
  font-weight:700;
  padding:10px 22px;
  border-radius:25px;
  text-decoration:none;
  transition:transform .2s ease, box-shadow .2s ease;
}

/* --- WhatsApp Button im QR-Bereich --- */
.btn-wa {
  display:inline-block;
  background:#ffd700;
  color:#000 !important;  /* Erzwingt schwarze Schrift */
  font-weight:700;
  padding:10px 22px;
  border-radius:25px;
  text-decoration:none;
  transition:transform .2s ease, box-shadow .2s ease;
}
.btn-wa:hover {
  transform:scale(1.05);
  box-shadow:0 0 15px rgba(255,215,0,0.6);
}




/* --- Roter Hinweis-Kasten für Events --- */
.event-notes--red{
  border: 1px solid #6b0000;
  border-radius: 14px;
  padding: 10px 12px;
  background: linear-gradient(180deg,#2a0000,#180000);
  color: #ffd5d5;
}
.event-notes--red ul{ margin: 6px 0 0 18px; }
.event-notes--red li{ margin: 4px 0; }
.event-notes__title{
  display:inline-block;
  margin-bottom: 4px;
  color:#ffb3b3;
}


/* ===== VERGANGENE EVENTS – exakt wie Gänse-Essen-Karte ===== */
section#vergangen .event-card{
  background:#0f0f0f;
  border:1px solid rgba(212,175,55,.45);
  border-radius:18px;
  padding:16px;
  box-shadow:0 8px 26px rgba(0,0,0,.35);
}
section#vergangen .event-card__header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:8px;
}
section#vergangen .event-card__header h3{ margin:0; }
section#vergangen .capacity-badge{
  display:inline-block;
  padding:.35rem .6rem;
  border-radius:12px;
  background:#1b1b1b;
  border:1px solid rgba(212,175,55,.35);
  color:#eee;
  font-size:.9rem;
}
/* Buttons wie oben */
section#vergangen .event-actions .btn{
  border-radius:999px;
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease;
}
section#vergangen .event-actions .btn:hover{
  transform: translateY(-1px) scale(1.03);
}
section#vergangen .event-actions .btn--gold{
  background: linear-gradient(180deg,#f1d271,#d4af37);
  color:#111 !important;
  border:1px solid rgba(212,175,55,.55);
  box-shadow: 0 8px 24px rgba(212,175,55,.22), inset 0 0 10px rgba(255,255,255,.08);
}
section#vergangen .event-actions .btn--gold:hover{
  box-shadow: 0 0 24px rgba(212,175,55,.50);
}
section#vergangen .event-actions .btn--ghost{
  background:transparent;
  border:1px solid rgba(212,175,55,.45);
  color:#eee !important;
}

/* Roter Hinweis-Kasten (gleich wie Gänse-Essen) */
section#vergangen .event-notes{
  margin-top:12px;
  border:1px solid var(--gold,#d4af37);
  border-radius:14px;
  padding:10px 12px;
  background:linear-gradient(180deg,#141414,#0b0b0b);
}
/* explizite rote Variante (falls eingesetzt) */
section#vergangen .event-notes--red{
  border: 1px solid #6b0000;
  border-radius: 14px;
  padding: 10px 12px;
  background: linear-gradient(180deg,#2a0000,#180000);
  color: #ffd5d5;
}
section#vergangen .event-notes__title{
  display:inline-block;
  margin-bottom:4px;
  color:#ffb3b3;
}

/* Galerie im Karten-Look */
section#vergangen .gallery{
  margin-top:16px;
  display:grid;
  grid-template-columns: repeat(5, 1fr);
  gap:10px;
}
section#vergangen .gallery img{
  width:100%;
  height:160px;
  object-fit:cover;
  border-radius:12px;
  border:1px solid rgba(212,175,55,0.25);
  box-shadow: 0 4px 18px rgba(0,0,0,.35);
  transition: transform .3s ease, box-shadow .3s ease;
}
section#vergangen .gallery img:hover{
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 8px 26px rgba(0,0,0,.45), 0 0 18px rgba(212,175,55,.2);
}

/* Responsive Galerie */
@media (max-width: 1100px){
  section#vergangen .gallery{ grid-template-columns: repeat(4, 1fr); }
  section#vergangen .gallery img{ height:150px; }
}
@media (max-width: 800px){
  section#vergangen .gallery{ grid-template-columns: repeat(3, 1fr); }
  section#vergangen .gallery img{ height:130px; }
}
@media (max-width: 560px){
  section#vergangen .gallery{ grid-template-columns: repeat(2, 1fr); }
  section#vergangen .gallery img{ height:120px; }
}
/* ===== Mobile-Fixes: Zentrierung für Überschriften & Buttons ===== */
@media (max-width: 640px){

  /* Große gelbe Titel mittig + Unterstreichung mittig */
  .title-wrap,
  .title-wrap h1,
  h1.gold-title,
  h2.gold-title {
    text-align: center !important;
  }
  .title-wrap h1::after,
  h1.gold-title::after,
  h2.gold-title::after {
    left: 50% !important;
    transform: translateX(-50%) !important;
    margin-left: 0 !important;
  }

  /* Headerzeile in Event-Karten (Titel + Badge) mittig untereinander */
  section#naechste .event-card__header,
  section#vergangen .event-card__header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
  }

  /* Button-Bereiche mittig, mit vertikalem Abstand */
  section#naechste .event-actions,
  section#vergangen .event-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    text-align: center;
  }

  /* Einzelne Buttons zentrieren und gleich breit darstellen */
  section#naechste .event-actions .btn,
  section#vergangen .event-actions .btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    min-width: 260px;          /* angenehme Breite auf Handy */
    max-width: 90vw;           /* nie breiter als Bildschirm */
    margin: 0 auto;            /* zentriert */
  }

  /* Sicherheitshalber: auch der einzelne WhatsApp-Button unter dem Text */
  .btn-wa {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
  }
}
/* === First-Visit Modal (Castello Maurizio) === */
.cm-modal{position:fixed;inset:0;z-index:9999;display:none;}
.cm-modal.is-open{display:block;}
.cm-modal__backdrop{position:absolute;inset:0;background:rgba(0,0,0,.6);backdrop-filter:blur(2px);opacity:0;transition:opacity .35s ease;}
.cm-modal.is-open .cm-modal__backdrop{opacity:1;}
.cm-modal__dialog{position:relative;max-width:min(92vw,820px);margin:8vh auto;background:#0a0a0a;border:2px solid var(--gold,#d4af37);border-radius:24px;box-shadow:0 10px 24px rgba(0,0,0,.6);padding:20px 20px 28px;transform:translateY(10px) scale(.96);opacity:0;transition:transform .35s cubic-bezier(.2,.8,.2,1),opacity .35s ease;}
.cm-modal.is-open .cm-modal__dialog{transform:translateY(0) scale(1);opacity:1;}
.cm-modal__close{position:absolute;top:10px;right:12px;font-size:28px;line-height:1;background:transparent;border:0;color:#fff;cursor:pointer;opacity:.8}
.cm-modal__close:hover{opacity:1;transform:scale(1.08)}
.cm-modal__flyer{display:block;width:100%;height:auto;border-radius:16px;border:1px solid rgba(212,175,55,.3);margin:0 0 16px 0;object-fit:contain;background:#000}
.cm-modal__title{color:var(--gold,#d4af37);margin:0 0 8px 0;text-align:center}
.cm-modal__desc{color:var(--text,#eee);margin:0 0 16px 0;text-align:center}
.cm-btn{display:inline-block;padding:12px 18px;border-radius:14px;text-decoration:none;font-weight:600;border:1px solid transparent;transition:transform .25s ease, box-shadow .25s ease}
.cm-btn--gold{background:linear-gradient(180deg, #f1d78a, #d4af37);color:#000;border-color:#b9931f;box-shadow:0 4px 10px rgba(212,175,55,.25)}
.cm-btn--gold:hover{transform:scale(1.03);box-shadow:0 6px 16px rgba(212,175,55,.35)}
@media (max-width:600px){
  .cm-modal__dialog{margin:5vh auto;padding:16px;border-radius:18px}
  .cm-modal__close{top:6px;right:8px}
}
html.cm-modal-open, body.cm-modal-open { overflow: hidden !important; }

/* === Modal: kleinere, scrollbare Version === */
.cm-modal__dialog{
  max-width: min(92vw, 640px);         /* schmaler */
  margin: 7vh auto;                     /* etwas kompakter */
  max-height: min(85vh, 720px);         /* Höhenlimit */
  display: flex;
  flex-direction: column;
  overflow: hidden;                     /* Scrollen nur innen */
}

.cm-modal__scroll{
  overflow: auto;                       /* hier wird gescrollt */
  -webkit-overflow-scrolling: touch;    /* sanftes Scrollen iOS */
  padding-right: 6px;                   /* Platz für Scrollbar */
}

/* Bild passt sich Breite an, Höhe flexibel */
.cm-modal__flyer{
  display:block;
  width:100%;
  height:auto;
  border-radius:16px;
  border:1px solid rgba(212,175,55,.3);
  margin:0 0 16px 0;
  object-fit:contain;
  background:#000;
}

/* auf sehr kleinen Screens noch kompakter */
@media (max-width: 600px){
  .cm-modal__dialog{
    max-width: 94vw;
    margin: 6vh auto;
    border-radius: 18px;
  }
  .cm-modal__scroll{
    padding-right: 4px;
  }
}
/* === Modal: größer & Scroll nur bei Bedarf === */
.cm-modal__dialog {
  max-width: min(92vw, 720px);      /* etwas breiter als vorher */
  margin: 6vh auto;
  max-height: 90vh;                 /* etwas höher erlaubt */
  display: flex;
  flex-direction: column;
  overflow: hidden;                 /* kein Scroll hier, nur innen */
}

.cm-modal__scroll {
  flex: 1;
  overflow-y: auto;                 /* scroll nur wenn nötig */
  -webkit-overflow-scrolling: touch;
  padding-right: 6px;
}

/* Bild passt sich Breite an */
.cm-modal__flyer {
  display:block;
  width:100%;
  height:auto;
  border-radius:16px;
  border:1px solid rgba(212,175,55,.3);
  margin:0 0 16px 0;
  object-fit:contain;
  background:#000;
}

/* Button immer sichtbar ohne Scrollleiste */
.cm-btn--gold {
  margin-bottom: 4px;
}

@media (max-width: 600px){
  .cm-modal__dialog {
    max-width: 94vw;
    margin: 5vh auto;
    border-radius: 18px;
  }
  .cm-modal__scroll {
    padding-right: 4px;
  }
}

/* === First-Visit Modal – FINAL overrides (scrollbar & size & no white bars) === */
.cm-modal__dialog{
  max-width: min(92vw, 720px) !important;   /* etwas größer, damit der Button sichtbar ist */
  max-height: 90vh !important;              /* höher, aber nie über den Bildschirm */
  margin: 6vh auto !important;
  background:#0a0a0a !important;
  overflow: hidden !important;              /* eigener Scroll aus */
  display: flex !important;
  flex-direction: column !important;
}

.cm-modal__scroll{
  background:#0a0a0a !important;            /* dunkler Hintergrund */
  color-scheme: dark !important;            /* dunkle UI-Hints */
  overflow-y: auto !important;              /* Scroll nur bei Bedarf */
  overflow-x: hidden !important;            /* horizontalen Balken verhindern */
  -webkit-overflow-scrolling: touch !important;
  padding-right: 6px !important;
}

/* Firefox Scrollbar */
.cm-modal__scroll{
  scrollbar-width: thin;
  scrollbar-color: #d4af37 #0a0a0a;
}

/* WebKit Scrollbar (Chrome/Edge/Safari) */
.cm-modal__scroll::-webkit-scrollbar{
  width: 8px;
  height: 8px;
  background: transparent;
}
.cm-modal__scroll::-webkit-scrollbar-track{
  background:#0a0a0a;
  border-radius: 8px;
}
.cm-modal__scroll::-webkit-scrollbar-thumb{
  background-color:#d4af37;
  border-radius: 8px;
}
.cm-modal__scroll::-webkit-scrollbar-corner{
  background:#0a0a0a;                         /* weiße Ecke beseitigen */
}

/* Sicherheit: Bilder nie breiter als der Container */
.cm-modal__flyer{
  max-width:100% !important;
  height:auto !important;
  display:block !important;
}

/* Mobile noch kompakter */
@media (max-width: 600px){
  .cm-modal__dialog{
    max-width: 94vw !important;
    margin: 5vh auto !important;
    border-radius: 18px !important;
  }
  .cm-modal__scroll{ padding-right: 4px !important; }
}
/* ===== POPUP – Handy-kompakt + CTA immer sichtbar ===== */
.cm-modal{position:fixed;inset:0;z-index:9999;display:none;}
.cm-modal.is-open{display:block;}
.cm-modal__backdrop{position:absolute;inset:0;background:rgba(0,0,0,.55);backdrop-filter:blur(2px);}
html.cm-modal-open, body.cm-modal-open{overflow:hidden;}

.cm-modal__dialog{
  position:relative;
  margin:env(safe-area-inset-top) auto 10px auto;
  width:min(92vw,640px);
  max-height:85vh;              /* kleiner als Bildschirm */
  display:grid;
  grid-template-rows:auto 1fr auto; /* header | content | footer */
  background:#111;
  border:1px solid rgba(212,175,55,.45);
  border-radius:18px;
  box-shadow:0 18px 60px rgba(0,0,0,.6);
  overflow:hidden;
}

.cm-modal__header{padding:12px 14px;border-bottom:1px solid rgba(255,255,255,.06);}
.cm-modal__content{padding:12px 14px;overflow:auto;-webkit-overflow-scrolling:touch;}
.cm-modal__footer{
  padding:10px 14px;
  border-top:1px solid rgba(255,255,255,.06);
  background:linear-gradient(180deg,rgba(17,17,17,.96),#111);
}

.cm-modal__cta{
  display:block;width:100%;text-align:center;font-weight:700;
  padding:14px 16px;border-radius:14px;border:1px solid #d4af37;
  background:linear-gradient(180deg,#2a2200,#1c1700);color:#ffd76b;text-decoration:none;
}

@media (max-width:520px){
  .cm-modal__dialog{ width:94vw; max-height:82vh; border-radius:16px; }
  .cm-modal__cta{ padding:16px 16px; }
}
/* ===== MOBILE NAV – Overlay (schiebt Layout nicht) ===== */
@media (max-width: 768px){
  .menu-toggle{position:relative;z-index:10001;}  /* drei Balken immer klickbar */

  /* Panel */
  #main-nav{
    position:fixed;
    top:64px;                   /* knapp unter dem Header */
    right:12px;
    width:86vw;
    max-width:520px;
    max-height:calc(100vh - 80px);
    overflow:auto;
    background:#0e0e0e;
    border:1px solid rgba(212,175,55,.35);
    border-radius:18px;
    box-shadow:0 18px 60px rgba(0,0,0,.6);
    transform:translateY(-12px) scale(.98);
    opacity:0; pointer-events:none;
    transition:opacity .25s ease, transform .25s ease;
    z-index:10000;
  }
  /* sanft einblenden */
  #main-nav.show{
    opacity:1; pointer-events:auto;
    transform:translateY(0) scale(1);
  }

  /* dunkler Rand/Glow, damit Überschriften dahinter nicht „stören“ */
  #main-nav::before{
    content:"";position:absolute;inset:-12px;
    border-radius:22px; box-shadow:0 0 50px rgba(255,215,107,.2) inset;
    pointer-events:none;
  }

  /* Seite dahinter nicht scrollen, wenn Menü offen */
  html.nav-open, body.nav-open{overflow:hidden;}
}


/* === FINAL FIX 2025‑08‑20 === */

/* --- 1. Popup auf Handy kleiner + Button immer sichtbar --- */
.cm-modal{position:fixed;inset:0;z-index:9999;display:none;}
.cm-modal.is-open{display:block;}
.cm-modal__backdrop{position:absolute;inset:0;background:rgba(0,0,0,.55);backdrop-filter:blur(2px);}
html.cm-modal-open, body.cm-modal-open{overflow:hidden;}
.cm-modal__dialog{
  position:relative;
  margin:env(safe-area-inset-top) auto 10px auto;
  width:min(92vw,640px);
  max-height:85vh;
  display:grid;
  grid-template-rows:auto 1fr auto;
  background:#111;
  border:1px solid rgba(212,175,55,.45);
  border-radius:18px;
  box-shadow:0 18px 60px rgba(0,0,0,.6);
  overflow:hidden;
}
.cm-modal__header{padding:12px 14px;border-bottom:1px solid rgba(255,255,255,.06);}
.cm-modal__content{padding:12px 14px;overflow:auto;-webkit-overflow-scrolling:touch;}
.cm-modal__footer{
  padding:10px 14px;
  border-top:1px solid rgba(255,255,255,.06);
  background:linear-gradient(180deg,rgba(17,17,17,.96),#111);
}
.cm-modal__cta{
  display:block;width:100%;text-align:center;font-weight:700;
  padding:14px 16px;border-radius:14px;border:1px solid #d4af37;
  background:linear-gradient(180deg,#2a2200,#1c1700);color:#ffd76b;text-decoration:none;
}
@media (max-width:520px){
  .cm-modal__dialog{ width:94vw; max-height:82vh; border-radius:16px; }
  .cm-modal__cta{ padding:16px 16px; }
}

/* --- 2. Mobile Dropdown Menü als Overlay --- */
@media (max-width: 768px){
  .menu-toggle{position:relative;z-index:10001;}
  #main-nav{
    position:fixed;
    top:64px; right:12px;
    width:86vw; max-width:520px;
    max-height:calc(100vh - 80px);
    overflow:auto;
    background:#0e0e0e;
    border:1px solid rgba(212,175,55,.35);
    border-radius:18px;
    box-shadow:0 18px 60px rgba(0,0,0,.6);
    transform:translateY(-12px) scale(.98);
    opacity:0; pointer-events:none;
    transition:opacity .25s ease, transform .25s ease;
    z-index:10000;
  }
  #main-nav.show{
    opacity:1; pointer-events:auto;
    transform:translateY(0) scale(1);
  }
  #main-nav::before{
    content:"";position:absolute;inset:-12px;
    border-radius:22px; box-shadow:0 0 50px rgba(255,215,107,.2) inset;
    pointer-events:none;
  }
  html.nav-open, body.nav-open{overflow:hidden;}
}

/* --- 3. Überschriften nicht mehr überlappen --- */
h1.gold-title,
.title-wrap h1,
.event-card h3{
  word-break: break-word;
  hyphens: auto;
  line-height: 1.15;
}
@media (max-width: 640px){
  h1.gold-title,
  .title-wrap h1 { font-size: clamp(1.6rem, 6.2vw, 2.4rem); }
  .event-card h3 { font-size: clamp(1.1rem, 4.6vw, 1.35rem); }
}
.capacity-badge,
.status-badge,
.event-badge { margin-top: .35rem; }

/* === HERO: alles mittig (Desktop) === */
@media screen and (min-width: 1024px) {
  .hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
  }

  .hero-logo img {
    max-width: 180px;
    height: auto;
  }

  h1.gold-title {
    display: inline-block;  /* Linie nur so breit wie Text */
    margin: 10px auto 18px;
    border-bottom: none;
    position: relative;
  }

  h1.gold-title::after {
    content: "";
    display: block;
    height: 3px;
    width: 100%;
    margin: 10px auto 0;
    background: #d4af37;
    box-shadow: 0 0 12px rgba(212,175,55,.5);
    border-radius: 2px;
  }

  .hero-subline {
    max-width: 900px;
    margin: 6px auto 14px;
  }

  .hero-cta {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
    margin: 10px auto 20px;
  }
}
@media screen and (min-width: 1024px) {
  .hero-logo {
    display: flex;
    justify-content: center;  /* horizontal mittig */
    align-items: center;      /* vertikal (falls nötig) */
    margin: 0 auto 15px auto; /* zentriert + Abstand nach unten */
    width: 100%;              /* nimmt gesamte Breite */
    text-align: center;       /* fallback */
  }

  .hero-logo img {
    display: block;
    margin: 0 auto;
    max-width: 180px;
    height: auto;
  }
}
/* === Castello Hero: finale, kollisionsfreie Fixes (nur anhängen) === */

/* Bilder dürfen nie aus dem Layout ragen (sicher & global) */
img { max-width: 100%; height: auto; }

/* Desktop: Logo, Titel, Subline, Buttons exakt mittig */
@media (min-width: 1024px) {
  .hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;       /* behält dein Look bei */
    gap: 12px;
  }

  .hero .hero-logo {
    width: auto;              /* keine fixe Breite vom Container */
    margin: 0 auto 16px;
    text-align: center;
    float: none;
    position: static;
  }

  .hero .hero-logo img {
    display: block;
    margin: 0 auto;
    max-width: 180px;         /* harmonische Desktop-Größe */
    height: auto;
  }

  /* Linie nur unter dem Text – nicht volle Bildschirmbreite */
  .hero h1.gold-title {
    display: inline-block;
    margin: 10px auto 18px;
    position: relative;
  }
  .hero h1.gold-title::after {
    content: "";
    display: block;
    height: 3px;
    width: 100%;
    margin: 10px auto 0;
    background: #d4af37;
    box-shadow: 0 0 12px rgba(212,175,55,.5);
    border-radius: 2px;
  }

  .hero .hero-cta {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
    margin: 10px auto 20px;
  }
}

/* Mobile: Logo kleiner, zentriert, kein Überlauf; alles sauber mittig */
@media (max-width: 640px) {
  .hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 16px 14px;
    overflow: hidden;                 /* falls innen etwas breiter wäre */
  }

  .hero .hero-logo {
    width: 100%;
    text-align: center !important;
    margin: 0 auto 10px;
    float: none !important;
    position: static !important;
  }
  .hero .hero-logo img {
    display: inline-block;
    max-width: clamp(96px, 28vw, 140px); /* mobile-sicher, nie zu groß */
    width: auto;
    height: auto;
    margin: 0 auto;
    transform: none !important;
    left: auto !important;
    right: auto !important;
  }

  .hero h1.gold-title {
    display: inline-block;
    margin: 8px auto 12px;
    line-height: 1.15;
    font-size: clamp(22px, 7vw, 34px);
    text-align: center !important;
  }
  .hero h1.gold-title::after {
    width: 90%;                       /* Linie optisch schöner auf Handy */
    margin: 8px auto 0;
  }

  .hero .hero-cta {
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
    margin: 8px auto 14px;
    width: 100%;
  }
  /* Falls Buttons nicht in .hero-cta liegen */
  .reserve-btn, .event-btn { display: inline-block; }
}
/* === MOBILE MODAL SCROLL FIX (iOS/Android) === */

/* Body darf NICHT scrollen, wenn Modal offen ist */
html.cm-modal-open,
body.cm-modal-open { 
  overflow: hidden;
  height: 100%;
  overscroll-behavior: none;
}

/* Gesamtes Modal */
.cm-modal{
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
}
.cm-modal.is-open{ display:block; }

/* dunkler Hintergrund */
.cm-modal__backdrop{
  position:absolute; inset:0;
  background: rgba(0,0,0,.55);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}

/* Dialog: begrenzt in der Höhe – NICHT der Scroll-Container */
.cm-modal__dialog{
  position: relative;
  margin: env(safe-area-inset-top) auto 12px;
  width: min(92vw, 640px);
  max-height: 85vh;
  display: grid;
  grid-template-rows: auto 1fr auto; /* Header | Body | Footer/CTA */
  background: #111;
  border: 1px solid rgba(212,175,55,.45);
  border-radius: 18px;
  box-shadow: 0 20px 60px rgba(0,0,0,.6);
  overflow: hidden; /* wichtig: Body scrollt, nicht der Dialog rand */
}

/* MODAL-HEADER bleibt fix im Dialog */
.cm-modal__header{
  position: sticky; top:0; z-index:1;
  padding: 14px 16px;
  background: linear-gradient(180deg,#151515,#0e0e0e);
  border-bottom: 1px solid rgba(212,175,55,.25);
}

/* HIER wird gescrollt */
.cm-modal__body{
  overflow: auto;
  -webkit-overflow-scrolling: touch; /* iOS smooth scroll */
  padding: 16px;
}

/* Footer/CTA unten sichtbar */
.cm-modal__footer{
  position: sticky; bottom:0; z-index:1;
  padding: 12px 16px 16px;
  background: linear-gradient(0deg,#151515,#0e0e0e);
  border-top: 1px solid rgba(212,175,55,.25);
}

.cm-modal__cta{
  display:block;
  width:100%;
  text-align:center;
  font-weight:700;
  padding:14px 16px;
  border-radius:14px;
  border:1px solid #d4af37;
  background: linear-gradient(180deg,#2a2200,#1c1700);
  color:#ffd76b;
  text-decoration:none;
}

@media (max-width:520px){
  .cm-modal__dialog{ width:94vw; max-height:82vh; border-radius:16px; }
  .cm-modal__cta{ padding:16px 16px; }
}
/* === TITLE / HERO OVERLAP FIX === */

/* Standard: Hero (z.B. Veranstaltungen) steht über Content, ohne vom großen Titel überlagert zu werden */
.event-hero, 
.event-hero * { position: relative; z-index: 1; }

/* Große goldene Start-Typo NUR auf der Startseite „leuchten“ lassen */
body.home .title-wrap .gold-title{
  text-shadow: 0 0 8px rgba(255,215,107,.8);
  -webkit-text-stroke: 0 transparent;
}

/* Auf Unterseiten Leuchteffekte zurücknehmen, damit nichts überlappt */
body:not(.home) .title-wrap .gold-title{
  text-shadow: none !important;
  filter: none !important;
}

/* Sicherheit: Kein absoluter/negativer Versatz von Titeln in Event-Hero */
.event-hero .gold-title,
.event-hero .title-wrap{
  position: static !important;
  margin: 0 auto;
  display: block;
  text-align: center;
}

/* Galerie/Fotogitter sauber unter dem Hero, keine Überschneidung mit Header/Menu */
.gallery, .photo-grid, .event-gallery{
  position: relative;
  z-index: 1;
  margin-top: 10px;
}

/* Falls der Mobile-Nav-Overlay sichtbar ist: Menü über ALLEM */
#main-nav{ z-index: 10000; }
.menu-toggle{ z-index: 10001; }

/* === MOBILE POPUP-FIX (passt immer auf den Bildschirm) === */
@media (max-width: 640px){

  /* 1) Standard-Event-Popup */
  .event-popup__card{
    max-width: 92vw;              /* nie breiter als Bildschirm */
    max-height: 88svh;            /* sichere Höhe (dynamische Viewport-Höhe) */
    overflow: auto;               /* Inhalt scrollt innen */
    padding: 12px;                /* etwas kompakter */
    border-radius: 16px;
  }
  .event-popup__img{
    max-height: 40svh;            /* Bild begrenzen, damit Buttons sichtbar bleiben */
    object-fit: contain;
  }

  /* 2) Dein eigenes Modal (Castello) */
  .cm-modal__dialog{
    max-width: 92vw;              /* schmaler auf Handy */
    max-height: 88svh;            /* Höhe begrenzen */
    overflow: hidden;             /* Scrollcontainer separat */
    padding: 14px;                /* kompakter */
    border-radius: 18px;
  }
  /* Wenn vorhanden: innerer Scroll-Container */
  .cm-modal__scroll{
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    max-height: calc(88svh - 80px); /* Platz für Titel/Buttons oben/unten */
  }

  /* 3) Typografie/Buttons minimal kleiner, damit nichts umbrechen muss */
  .cm-btn, .btn--gold, .btn--gold-outline, .btn-wa{
    padding: 10px 14px;
    font-size: 0.95rem;
  }
}
/* --- Info-Kasten für Hinweise --- */
.info-box.glutenfrei {
  background-color: #2ecc71; /* schönes Grün */
  color: #fff;
  padding: 12px 16px;
  border-radius: 8px;
  font-weight: 600;
  margin: 20px 0;
  text-align: center;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}
/* Header-Startzustand */
header {
  transition: box-shadow 220ms ease, background 220ms ease, transform 180ms ease;
}
/* Sobald Body die Klasse .has-scrolled hat (siehe #3), bekommt der Header Tiefe */
body.has-scrolled header {
  box-shadow: 0 8px 24px rgba(0,0,0,0.25);
  background: rgba(0,0,0,0.72); /* leicht auffüllen, wirkt edler */
  backdrop-filter: saturate(1.2) blur(2px);
}
#main-nav a {
  position: relative;
  text-decoration: none;
}
#main-nav a::after {
  content: "";
  position: absolute;
  left: 0; bottom: -6px;
  width: 0; height: 2px;
  background: linear-gradient(90deg, #d6b25e, #f1d07a);
  transition: width 220ms ease;
}
#main-nav a:hover::after,
#main-nav a:focus-visible::after {
  width: 100%;
}
a.btn.cta, .btn.cta {
  transition: box-shadow 200ms ease, transform 160ms ease;
  box-shadow: 0 0 0 rgba(214,178,94,0);
}
a.btn.cta:hover, .btn.cta:hover,
a.btn.cta:focus-visible, .btn.cta:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 0 18px rgba(214,178,94,0.35), 0 0 48px rgba(241,208,122,0.18) inset;
}
header .logo, header .logo img {
  position: relative;
  display: inline-block;
  overflow: hidden;
}
header .logo::after {
  content:"";
  position:absolute; top:0; left:-120%;
  width:120%; height:100%;
  background: linear-gradient(75deg, rgba(255,255,255,0) 30%, rgba(255,255,255,0.25) 50%, rgba(255,255,255,0) 70%);
  transform: skewX(-12deg);
  transition: left 700ms ease;
  pointer-events: none;
}
header .logo:hover::after,
header .logo:focus-visible::after {
  left: 120%;
}
.menu-toggle {
  transition: transform 160ms ease;
}
.menu-toggle:hover,
.menu-toggle:focus-visible {
  transform: scale(1.04);
}
.menu-toggle::after {
  /* dezentes Atem-Glühen */
  content:"";
  position:absolute; inset:-6px;
  border-radius: 12px;
  box-shadow: 0 0 0 rgba(241,208,122,0);
  transition: box-shadow 300ms ease;
}
.menu-toggle:hover::after,
.menu-toggle:focus-visible::after {
  box-shadow: 0 0 18px rgba(241,208,122,0.25);
}
#main-nav a {
  border-radius: 10px;
  transition: background 180ms ease, transform 120ms ease;
}
#main-nav a:hover, 
#main-nav a:focus-visible {
  background: rgba(255,255,255,0.06);
  transform: translateY(-1px);
}
/* ========================= */
/* Animations für Unterseiten */
/* ========================= */

/* Überschriften – sanftes Einblenden von unten */
.page-title,
h1.gold-title {
  opacity: 0;
  transform: translateY(15px);
  animation: fadeSlideUp 0.8s ease-out forwards;
}

/* Karten / Boxen – Zoom-Effekt */
.event-card,
.flip-card,
.menu-box {
  opacity: 0;
  transform: scale(0.96);
  animation: zoomIn 0.6s ease forwards;
}

/* Stagger-Effekt für die ersten 3 Boxen */
.menu-box:nth-child(1) { animation-delay: 0.1s; }
.menu-box:nth-child(2) { animation-delay: 0.2s; }
.menu-box:nth-child(3) { animation-delay: 0.3s; }

/* QR-Code – Glow-Effekt */
.qr-rechts img {
  opacity: 0;
  filter: drop-shadow(0 0 0 rgba(241,208,122,0));
  animation: glowIn 0.9s ease forwards;
}

/* Performance & Endzustand sichern */
.page-title, h1.gold-title,
.event-card, .flip-card, .menu-box,
.qr-rechts img {
  will-change: transform, opacity;
  animation-fill-mode: both;
}

/* Bewegungen ausschalten, falls Nutzer reduziert möchte */
@media (prefers-reduced-motion: reduce) {
  .page-title, h1.gold-title,
  .event-card, .flip-card, .menu-box,
  .qr-rechts img {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
}

/* Keyframes */
@keyframes fadeSlideUp {
  0% { opacity: 0; transform: translateY(15px); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes zoomIn {
  0% { opacity: 0; transform: scale(0.965); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes glowIn {
  0% { opacity: 0; filter: drop-shadow(0 0 0 rgba(241,208,122,0)); }
  100% { opacity: 1; filter: drop-shadow(0 0 20px rgba(241,208,122,0.35)); }
}
/* ===== Legal Footer ===== */
.legal-footer {
  background: #0b0b0b;
  border-top: 1px solid rgba(212,175,55,0.35);
  padding: 22px 16px;
}
.legal-footer__inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex; gap: 12px; justify-content: center; flex-wrap: wrap;
}
.cm-legal-btn {
  background: transparent;
  border: 1px solid rgba(212,175,55,0.7);
  color: #d4af37;
  padding: 10px 16px;
  border-radius: 999px;
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.cm-legal-btn:hover, .cm-legal-btn:focus {
  outline: none;
  background: rgba(212,175,55,0.08);
  box-shadow: 0 0 18px rgba(212,175,55,0.25);
  transform: translateY(-1px);
}

/* ===== Legal Modals ===== */
.cm-legal-modal { 
  position: fixed; inset: 0; z-index: 6000; /* über Nav/Burger (typ. 5000) */
  display: none;
}
.cm-legal-modal.is-open { display: block; }
.cm-legal-backdrop {
  position: absolute; inset: 0; background: rgba(0,0,0,0.6); backdrop-filter: blur(2px);
}
.cm-legal-dialog {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  width: min(900px, 92vw); max-height: 82vh;
  background: #0f0f10; color: #eaeaea;
  border: 1px solid rgba(212,175,55,0.4);
  border-radius: 18px;
  box-shadow: 0 18px 60px rgba(0,0,0,0.6);
  display: flex; flex-direction: column;
}
.cm-legal-header, .cm-legal-footerbar {
  padding: 14px 18px; border-bottom: 1px solid rgba(212,175,55,0.25);
}
.cm-legal-footerbar { border-top: 1px solid rgba(212,175,55,0.25); border-bottom: none; }
.cm-legal-title { margin: 0; font-size: 1.25rem; color: #d4af37; letter-spacing: .3px; }
.cm-legal-close {
  margin-left: auto; font-size: 24px; line-height: 1;
  background: transparent; border: none; color: #eaeaea; cursor: pointer;
}
.cm-legal-close:hover, .cm-legal-close:focus { color: #fff; }
.cm-legal-content {
  padding: 18px; overflow: auto; scroll-behavior: smooth;
}
.cm-legal-content h3 { color: #d4af37; margin: 1rem 0 .5rem; font-size: 1.05rem; }
.cm-legal-content a { color: #d4af37; text-decoration: underline; }
.cm-legal-action {
  background: #d4af37; color: #0b0b0b; border: none; border-radius: 999px; padding: 10px 16px;
  cursor: pointer; font-weight: 600;
}
.cm-legal-action:hover { filter: brightness(1.05); }

@media (max-width: 640px){
  .cm-legal-dialog { width: 94vw; max-height: 86vh; }
}

/* Körper scrollen sperren, wenn Modal offen */
body.cm-legal-open { overflow: hidden; }




/* === [2025-08-22] Mobile Nav Scroll Fix (safe overrides) === */

/* Lock the page when the mobile menu is open */
html.nav-open, body.nav-open{
  overflow: hidden !important;
}
body.nav-open{
  position: fixed !important;
  width: 100% !important;
}

/* Avoid scroll-jumps when menu is open */
html.nav-open{ scroll-behavior: auto !important; }

/* Make the mobile panel itself scrollable smoothly */
@media (max-width: 900px){
  #main-nav{
    max-height: calc(100dvh - 80px) !important; /* use dynamic viewport on iOS */
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important; /* don't pass scroll to the page */
    touch-action: pan-y !important;
  }
}

/* Disable any snap that could snap back to the top while dragging */
#main-nav, #main-nav *{
  scroll-snap-type: none !important;
  scroll-snap-align: none !important;
}
/* Einheitliche Hinweisbox (goldener Rahmen) */
.note{
  margin: 1rem 0;
  padding: .9rem 1rem;
  border-radius: 12px;
  border: 1px solid rgba(255,215,0,.35);
  background: linear-gradient(180deg, rgba(255,215,0,.07), rgba(255,215,0,.03));
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}