:root{
  --brand:#d3ad7f; /* Gold */
  --accent:#158c63; /* Grün */
  --bg:#0b0b0c;
  --fg:#f7f7f7;
}

*{box-sizing:border-box}

body{
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial,sans-serif;
  background:var(--bg);
  color:var(--fg);
}

.ff-serif{font-family:"Playfair Display",serif}

.navbar .navbar-brand{letter-spacing:.3px}

/* Glas-Optik für Navbar – weich + Akzentlinie */
.glass-nav{
  position: relative;
  -webkit-backdrop-filter: blur(10px) saturate(160%);
  backdrop-filter: blur(10px) saturate(160%);
  background: linear-gradient(90deg, rgba(11,11,12,.45) 0%,
                                     rgba(11,11,12,.55) 40%,
                                     rgba(11,11,12,.45) 100%);
  border-bottom:1px solid #ffffff0d;
}
/* feine Gold→Grün-Akzentlinie oben */
.glass-nav::before{
  content:"";
  position:absolute; left:0; right:0; top:0; height:3px;
  background: linear-gradient(90deg, var(--brand), var(--accent));
  opacity:.9;
}

.navbar-brand span{
  background: var(--brand); /* nur Gold */
  -webkit-background-clip:text;
  background-clip:text;
  color: transparent;
  font-weight: 700;
  letter-spacing: .3px;
  transition: opacity .3s ease;
}

.navbar-brand:hover span{ opacity:.85; }

.navbar-brand img{ filter: drop-shadow(0 0 4px rgba(211,173,127,.45)); }

[data-bs-theme="light"] .navbar-brand span{
  color: var(--accent);
  background:none;
  -webkit-background-clip:initial;
  background-clip:initial;
}

/* Brand mobil mittig, ab lg links */
@media (max-width: 991.98px){
  .navbar .container{ justify-content:center; }
  .navbar-brand{ margin-left:auto; margin-right:auto; }
}

/* Hero */
.hero{
  position:relative;
  background:url('../img/foto_1_header.png') center/cover no-repeat;
  min-height:20vh;
}

/* --- Carousel Slides --- */
.hero-slide{
  height:100vh;
  background-size:cover;
  background-position:center;
  position:relative;
}
.hero-overlay{
  position:absolute; inset:0;
  background:linear-gradient(to bottom, rgba(11,11,12,.65) 0%,
                                        rgba(11,11,12,.35) 40%,
                                        rgba(11,11,12,.75) 100%);
  z-index:1;
}
.hero-slide .container{ position:relative; z-index:2; }

/* Buttons im Hero */
.hero-slide .btn{
  backdrop-filter: blur(6px);
  padding:.75rem 2rem;
  font-weight:600;
  border:2px solid transparent;
  transition:all .3s ease;
}
.hero-slide .btn-primary{
  background-color:rgba(211,173,127,.85);
  border-color:var(--brand);
  color:#111;
}
.hero-slide .btn-primary:hover{ background-color:var(--brand); color:#000; transform:translateY(-2px); }
.hero-slide .btn-outline-light{ background:rgba(255,255,255,.15); color:#fff; border-color:#fff; }
.hero-slide .btn-outline-light:hover{ background:rgba(255,255,255,.3); color:#fff; transform:translateY(-2px); }

/* Überschriften-Schmuck */
.text-gradient{
  background:linear-gradient(90deg,var(--brand),#ffffff);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

/* Carousel Punkte */
.carousel-indicators{ bottom:2rem; gap:.8rem; }
.carousel-indicators [data-bs-target]{
  width:12px; height:12px; border-radius:50%;
  background-color:rgba(21,140,99,.4) !important;
  transition:background-color .3s ease, transform .3s ease;
}
.carousel-indicators .active{ background-color:var(--accent) !important; transform:scale(1.3); }

/* Carousel-Dots höher */
.carousel-indicators{ bottom:4.5rem; z-index:3; }
@media (max-width: 576px){ .carousel-indicators{ bottom:5.75rem; } }
@media (min-width:1200px){ .carousel-indicators{ bottom:5rem; } }

/* Carousel-Buttons mobil etwas kleiner */
@media (max-width: 576px){
  .hero-slide .btn { padding:.8rem 1.5rem; font-size:1rem; }
}

/* Karten/Abschnitte */
.py-6{padding-block:4.5rem}
.card-neo{ background:#121214; border:1px solid rgba(255,255,255,.06); box-shadow:0 10px 30px rgba(0,0,0,.35); }
.card-neo .card-img-top{ height:220px; object-fit:cover; }
.bg-gradient-dark{ background:linear-gradient(180deg,#121214,#0b0b0c); }
.map iframe{ width:100%; height:100%; border:0; }
footer a{text-decoration:none}

/* Light Theme Support */
[data-bs-theme="light"]{ --bg:#fff; --fg:#111; }
[data-bs-theme="light"] body{ background:#fff; color:#111; }

@media (max-width:992px){ .hero{min-height:20vh} }

/* ====== MODAL + OPENTABLE WIDGET ====== */

body.modal-open{ padding-right:0 !important; }
.modal{ padding-right:0 !important; }

.modal-dialog{
  margin: 1.5rem auto;
  max-width: min(1280px, 96vw);
}
.modal-dialog.modal-dialog-centered{ min-height:calc(100% - 3.5rem); }
.modal-content{ display:flex; max-height:92vh; }
.modal-body{ display:flex; flex-direction:column; flex:1 1 auto; }

.ot-wrapper{
  position: relative;
  display:flex;
  justify-content:center;
  align-items:stretch;
  width:100%;
  height:min(88vh, 560px);
  min-height:520px;
  background:rgba(0,0,0,.25);
  border-radius:.75rem;
  overflow:hidden;
}

.ot-wrapper iframe{
  display:block !important;
  width: clamp(360px, 72vw, 980px) !important;
  height:100% !important;
  margin-inline:auto;
  border:0 !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  backface-visibility: hidden;
  transform: translateZ(0);
  will-change: transform;
}

@media (max-width:768px){
  .modal-fullscreen-md-down .modal-dialog{ margin:0; max-width:none; }
  .modal-fullscreen-md-down .modal-content{ height:80vh; border-radius:0; }
  .modal-fullscreen-md-down .modal-body{ height:100%; }
  .ot-wrapper{ height:auto;}

  .ot-wrapper iframe{
    width:100% !important;
    margin-inline:auto;
  }
}

.modal-glass{
  background:rgba(20,20,22,.92);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.08);
  border-radius:1rem;
}
.modal-accent{
  position:absolute; left:0; right:0; top:0; height:4px;
  background:linear-gradient(90deg,var(--brand) 0%, var(--accent) 100%);
  border-top-left-radius:1rem; border-top-right-radius:1rem;
}

#about img {
  max-width: 80%;
  height: auto;
}

@media (max-width: 767.98px) {
  #about img {
    max-width: 80%;
    margin: 0 auto;
    display: block;
  }
}

.gold-accent {
  background: linear-gradient(90deg, var(--brand) 0%, #f5deb3 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.btn-goldgreen {
  background: var(--accent);
  color: #fff;
  border: none;
  font-weight: 600;
  transition: 0.3s ease;
}

.btn-goldgreen:hover {
  background: #0f6e4d;
  color: #fff;
  transform: translateY(-2px);
}

.made-by {
  font-style: italic;
  opacity: 0.8;
}

.made-by a {
  background: linear-gradient(90deg, #4facfe 0%, #8e2de2 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-decoration: none;
  font-weight: 700;
}

.btn-gold {
  background: var(--brand);
  color: #000;
  border: none;
  font-weight: 600;
  transition: 0.3s ease;
}

.btn-gold:hover {
  background: #c49b6a;
  color: #000;
}

section i {
  color: var(--brand);
}

/* events.php */
#faq .accordion.capizzi-acc{
  --bs-accordion-bg: transparent;
  --bs-accordion-border-color: rgba(255,255,255,.12);
  --bs-accordion-color: #f7f7f7;
  --capizzi-gold: #d3ad7f;
  --capizzi-gold-weak: rgba(211,173,127,.18);
  --capizzi-green: #158c63;
}

#faq .capizzi-acc .accordion-button{
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.02));
  color: var(--bs-accordion-color);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: .75rem;
  box-shadow: none;
}
#faq .capizzi-acc .accordion-button::after{ filter: none; }

#faq .capizzi-acc .accordion-button:hover{
  border-color: rgba(211,173,127,.35);
  background: linear-gradient(180deg, rgba(211,173,127,.08), rgba(211,173,127,.03));
}

#faq .capizzi-acc .accordion-button:not(.collapsed){
  color: #fff;
  background: linear-gradient(90deg, rgba(211,173,127,.18), rgba(21,140,99,.22));
  border-color: rgba(211,173,127,.45);
  box-shadow: 0 6px 22px rgba(21,140,99,.12);
}

#faq .capizzi-acc .accordion-button:focus{
  box-shadow: 0 0 0 .2rem rgba(211,173,127,.25);
  border-color: rgba(211,173,127,.55);
}

#faq .capizzi-acc .accordion-item{
  background: transparent;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: .75rem;
}
#faq .capizzi-acc .accordion-body{
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015));
  border-top: 1px dashed rgba(211,173,127,.28);
  border-bottom-left-radius: .75rem;
  border-bottom-right-radius: .75rem;
}

#faq .capizzi-acc .accordion-button::after{
  background-image: var(--bs-accordion-btn-icon);
  filter: hue-rotate(330deg) saturate(140%) brightness(1.2);
}

.hero .row{ min-height: clamp(420px, 58vh, 640px); }

.hero-media{ height:100%; }
.hero-media .media-frame{
  position:relative; height:100%;
  border-radius:1rem; overflow:hidden;
  border:1px solid rgba(211,173,127,.35);
  box-shadow:0 8px 28px rgba(0,0,0,.35);
}
.hero-media .media-frame img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
}

@media (max-width: 991.98px){
  .hero .row{ min-height: unset; }
  .hero-media{ height: 340px; }
}

:root{
  --capizzi-accent: #6fca8a;
  --capizzi-accent-2: #d9b27a;
  --nav-h: 56px;
}

.navbar{ min-height: var(--nav-h); }

.navbar .navbar-toggler-icon{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='%236fca8a' stroke-width='2' stroke-linecap='round' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}
.navbar .navbar-toggler{
  background: transparent;
  border: 0;
  box-shadow: none !important;
}

@media (max-width: 991.98px){
  .navbar .navbar-brand.d-lg-none{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 8px;
    z-index: 1061;
    pointer-events: auto;
  }

  .glass-menu{ 
    position: absolute;
    top: var(--nav-h);
    left: 0; right: 0;
    background: rgba(10,10,12,0.92);
    backdrop-filter: blur(18px);
    border-bottom: 1px solid rgba(255,255,255,0.08);
    box-shadow: 0 12px 30px rgba(0,0,0,.35);
    z-index: 1060;
  }

  .navbar-collapse.collapse{
    max-height: 0; overflow: hidden;
    opacity: 0;
    transition: max-height .45s ease, opacity .3s ease;
  }
  .navbar-collapse.show{
    max-height: 100vh; opacity: 1;
  }

  .glass-menu .nav-link{ padding: .6rem 0; }
  .glass-menu .btn{ margin-top: .4rem; }
}

.nav-link{ color: rgba(255,255,255,.88); }
.nav-link:hover{ color: #fff; }

.btn-goldgreen:hover{
  filter: brightness(1.06);
}

/* Scroll fixes */
:root { --safe-vw: calc(100vw - (100vw - 100%)); }
html, body { width:100%; max-width:100%; overflow-x: hidden; }

img, video, svg { max-width:100%; height:auto; display:block; }

.carousel, .carousel-inner { overflow:hidden; }
.carousel-item img { width:100%; }

.full-bleed { 
  width: var(--safe-vw);
  margin-left: 50%;
  transform: translateX(-50%);
}

*[style*="width:"] { max-width:100%; }



/* ==== Besuchs-Box (Kontakt / Öffnungszeiten) ==== */
.visit-box{
  border:1px solid rgba(211,173,127,.65); /* Goldrahmen */
  border-radius:1rem;
  padding:1.75rem 1.75rem 1.5rem;
  background:linear-gradient(180deg, rgba(0,0,0,.92), rgba(0,0,0,.98));
  box-shadow:0 14px 36px rgba(0,0,0,.55);
}

.visit-box h3{
  margin-bottom:1rem;
}

.visit-box .visit-meta{
  font-size:.95rem;
  color:rgba(255,255,255,.86);
}

.visit-box .visit-meta a{
  color:inherit;
  text-decoration:none;
}
.visit-box .visit-meta a:hover{
  text-decoration:underline;
}

.visit-box .visit-hours{
  list-style:none;
  padding:0;
  margin:1rem 0 0;
  font-size:.95rem;
  color:rgba(255,255,255,.78);
}
.visit-box .visit-hours li{
  display:flex;
  justify-content:space-between;
  gap:1.5rem;
}

/* Button-Bereich unten */
.visit-actions{
  margin-top:1.75rem;
}

/* Default (mobil): gestapelt, full-width */
.visit-actions .btn{
  display:flex;                     /* identische Höhe */
  align-items:center;
  justify-content:center;
  white-space:nowrap;
  box-sizing:border-box;
  width:100%;
  padding:.65rem 1.4rem;
  border-radius:999px;              /* komplett rund */
  font-weight:600;
  font-size:.95rem;
  line-height:1.3;
  min-height:3rem;
  text-align:center;
  transition:all .25s ease;
}

/* zweiter Button – Abstand nur vertikal, KEIN margin-left von Bootstrap */
.visit-actions .btn + .btn{
  margin-top:.65rem;
  margin-left:0 !important;
}

/* Ab sm: nebeneinander, exakt gleiche Breite */
@media (min-width:576px){
  .visit-actions{
    display:flex;
    gap:.75rem;
  }
  .visit-actions .btn{
    flex:1 1 0;
    width:auto;
    margin-top:0;
  }
  .visit-actions .btn + .btn{
    margin-top:0;
    margin-left:0 !important;  /* Bootstrap wieder ausknipsen */
  }
}

/* Kontakt aufnehmen – komplett Gold, schwarze Schrift */
.btn-visit-gold{
  background:var(--brand);       /* Gold */
  color:#000;
  border:1px solid var(--brand);
}
.btn-visit-gold:hover{
  background:#caa474;
  border-color:#caa474;
  color:#000;
  transform:translateY(-1px);
}

/* Reservieren – komplett Grün, weiße Schrift */
.btn-visit-green{
  background:var(--accent);      /* Grün */
  color:#fff;
  border:1px solid var(--accent);
}
.btn-visit-green:hover{
  background:#0f6e4d;
  border-color:#0f6e4d;
  transform:translateY(-1px);
}