/* =========================================================
   Eventstube51 – Modern / Eventim-like CSS (FINAL, clean)
   (Komplett-CSS: keine doppelten Regeln, keine Konflikte,
   Spacing zwischen #events und #locations ist reduziert)
   ========================================================= */

/* ---------- Design Tokens ---------- */
:root{
  --brand: #0B2A6F;     /* deep blue */
  --brand-2:#0A1E4A;    /* darker */
  --accent:#FFD200;     /* yellow */
  --accent-2:#FFB800;

  --bg:#F5F7FB;
  --surface:#FFFFFF;
  --text:#0F172A;
  --muted:#64748B;
  --border: rgba(15,23,42,.10);

  --shadow-sm: 0 6px 18px rgba(2,6,23,.08);
  --shadow-md: 0 14px 40px rgba(2,6,23,.12);

  --radius: 18px;
}

/* ---------- Base ---------- */
html, body{
  background: var(--bg);
  color: var(--text);
}

a{ color: var(--brand); }
a:hover{ color: var(--brand-2); }

.container{ max-width: 1140px; }

.text-muted{ color: var(--muted) !important; }

/* ---------- Section Spacing (Bootstrap py-5 ist zu groß) ---------- */
/* Global: alle section.py-5 kompakter */
section.py-5{
  padding-top: 1.6rem !important;
  padding-bottom: 1.6rem !important;
}
@media (min-width: 992px){
  section.py-5{
    padding-top: 2.4rem !important;
    padding-bottom: 2.4rem !important;
  }
}

/* FINAL: Abstand zwischen Events -> Locations deutlich reduzieren */
section#events.py-5{
  padding-bottom: .8rem !important;
}
section#locations.py-5{
  padding-top: .8rem !important;
}
@media (min-width: 992px){
  section#events.py-5{ padding-bottom: 1.2rem !important; }
  section#locations.py-5{ padding-top: 1.2rem !important; }
}

/* ---------- Buttons (Bootstrap overrides) ---------- */
.btn{
  border-radius: 14px;
  padding: .72rem 1rem;
  font-weight: 800;
  min-height: 44px;
}

.btn-primary{
  background: var(--brand);
  border-color: var(--brand);
}
.btn-primary:hover{
  background: var(--brand-2);
  border-color: var(--brand-2);
}

.btn-warning{
  background: var(--accent);
  border-color: var(--accent);
  color: #111827;
}
.btn-warning:hover{
  background: var(--accent-2);
  border-color: var(--accent-2);
  color: #111827;
}

.btn-outline-light{
  border-color: rgba(255,255,255,.60);
  color: #fff;
}
.btn-outline-light:hover{
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.80);
  color:#fff;
}

/* CTA / Admin Buttons */
.btn-cta{
  background: var(--accent);
  border: 1px solid rgba(255,210,0,.65);
  color:#111;
  border-radius: 999px;
  padding: .62rem 1.05rem;
  font-weight: 900;
}
.btn-cta:hover{
  background: var(--accent-2);
  border-color: rgba(255,184,0,.9);
  color:#111;
}

.btn-admin{
  background: var(--brand);
  border: 1px solid rgba(11,42,111,.18);
  color:#fff;
  border-radius: 999px;
  padding: .62rem 1.05rem;
  font-weight: 900;
  box-shadow: 0 10px 24px rgba(2,6,23,.12);
}
.btn-admin:hover{
  background: var(--brand-2);
  color:#fff;
}

/* Mobile: Hero buttons full width */
@media (max-width: 575.98px){
  .hero .hero-actions{
    display: grid !important;
    gap: 10px !important;
  }
  .hero .hero-actions .btn{
    width: 100%;
  }
}

/* ---------- Badges ---------- */
.badge.text-bg-light{
  background: rgba(255,255,255,.92) !important;
  color: var(--brand-2) !important;
  border: 1px solid rgba(255,255,255,.35) !important;
}

/* ---------- Cards / Tiles ---------- */
.tile{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.tile:hover{
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: rgba(11,42,111,.22);
}

/* ---------- Header / Navbar (Eventim-like) ---------- */
.site-header{
  position: sticky;
  top: 0;
  z-index: 1030;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(15,23,42,.08);
}

.site-header .brand-line{
  height: 4px;
  background: linear-gradient(90deg, var(--brand-2), var(--brand), rgba(255,210,0,.75));
}

/* Make header compact */
.site-header .navbar{
  padding: 6px 0 !important;
}
.site-header .container.py-2{
  padding-top: 6px !important;
  padding-bottom: 6px !important;
}

/* Logo size */
.site-header .site-logo{
  height: 78px !important;
  max-height: 78px !important;
  width: auto !important;
  max-width: 340px !important;
  object-fit: contain !important;
  display: block !important;
}

/* Nav links */
.site-header .navbar-nav{
  align-items: center;
}

.site-header .navbar-nav .nav-link{
  color: rgba(10,30,74,.90);
  font-weight: 800;
  padding: .55rem .75rem;
  border-radius: 10px;
  transition: background .15s ease, color .15s ease;
}
.site-header .navbar-nav .nav-link:hover{
  background: rgba(11,42,111,.06);
  color: var(--brand-2);
}

/* keep actions aligned */
.site-header .nav-actions{
  display:flex;
  align-items:center;
  gap: 10px;
}

/* ---------- Hero ---------- */
.hero{
  padding-top: 1.25rem !important;
  padding-bottom: 2.25rem !important;
  background:
    radial-gradient(1000px 520px at 20% -10%, rgba(255,210,0,.35), transparent 55%),
    radial-gradient(900px 520px at 90% 0%, rgba(11,42,111,.35), transparent 55%),
    linear-gradient(180deg, var(--brand-2), var(--brand));
  color: #fff;
}
@media (min-width: 992px){
  .hero{
    padding-top: 3.25rem !important;
    padding-bottom: 3.25rem !important;
  }
}

.hero h1, .hero h2, .hero h4{
  letter-spacing: -0.02em;
}

.hero .hero-title{
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin: 0.75rem 0 0.25rem;
  font-size: clamp(2.0rem, 5.4vw, 3.2rem);
}
.hero .hero-sub{
  font-weight: 300;
  letter-spacing: -0.01em;
  margin: 0;
  font-size: clamp(1.15rem, 3.4vw, 1.75rem);
  opacity: .95;
}
.hero .hero-kicker{
  margin-top: .75rem;
  font-size: clamp(1.0rem, 2.6vw, 1.2rem);
  opacity: .95;
}
.hero .lead{
  margin-top: 1rem !important;
  margin-bottom: 1.25rem !important;
  color: rgba(255,255,255,.88);
}

/* CTA Card on hero */
.cta{
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: var(--shadow-md);
  backdrop-filter: blur(10px);
  border-radius: var(--radius);
}
@media (max-width: 575.98px){
  .hero .cta{
    padding: 16px !important;
  }
}

/* ---------- Events Section (hellblau) ---------- */
#events{
  background:
    radial-gradient(900px 450px at 20% 0%, rgba(11,42,111,.10), transparent 55%),
    radial-gradient(700px 420px at 85% 10%, rgba(255,210,0,.14), transparent 60%),
    linear-gradient(180deg, #F6FAFF 0%, #EEF5FF 100%);
}

#events h2{
  color: #0A1E4A !important;
  font-weight: 900 !important;
  font-size: clamp(1.6rem, 3.8vw, 2.3rem);
  text-transform: none;
}

/* Untertitel lesbar (nicht doppelt!) */
#events p{
  color: rgba(10,30,74,.80) !important;
  font-weight: 500;
}
#events .text-muted{
  color: rgba(10,30,74,.70) !important;
}

/* tighten title block */
#events .d-flex.mb-3{
  margin-bottom: 15px !important;
}

/* ---------- Swiper / Highlights ---------- */
/*.rsvp-swiper{
  padding: 6px 0 8px; /* unten reduziert => weniger Abstand wie roter Strich */
/* } */
.rsvp-swiper .swiper-slide {
  width: auto !important;
  max-width: 360px;
  flex-shrink: 0;
}

/* Slide width responsive statt fix */
.rsvp-swiper .swiper-slide{
  width: clamp(260px, 78vw, 360px);
}

.swiper-wrapper{
  min-height: 0 !important;
}
.rsvp-swiper{
  min-height: 0 !important;
  height: auto !important;
}

.swiper-button-prev,
.swiper-button-next{
  width: 42px;
  height: 42px;
  border-radius: 999px;
  background: rgba(255,255,255,.85);
  border: 1px solid rgba(15,23,42,.10);
  box-shadow: 0 10px 26px rgba(2,6,23,.08);
  color: var(--brand);
}
.swiper-button-prev:after,
.swiper-button-next:after{
  font-size: 16px;
  font-weight: 900;
}
@media (max-width: 575.98px){
  .swiper-button-prev,
  .swiper-button-next{
    display: none;
  }
}

.rsvp-swiper .swiper-pagination{
  position: relative;
  margin-top: 10px;
}

/* ---------- RSVP container ---------- */
#rsvp{
  border-radius: var(--radius);
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  background: var(--surface);
  margin-top: 10px !important; /* reduziert Abstand */
}

/* iFrame Height defaults (falls postMessage noch nicht feuert) */
#rsvpWidgetFrame{
  width: 100% !important;
  border: 0 !important;
  display: block !important;
  border-radius: 14px !important;
  height: 640px;
}
@media (max-width: 575.98px){
  #rsvpWidgetFrame{ height: 760px; }
}
@media (min-width: 992px){
  #rsvpWidgetFrame{ height: 620px; }
}

/* ---------- Locations section (dark + glass) ---------- */
#locations{
  background: linear-gradient(180deg, var(--brand-2), var(--brand));
  color: #fff;
  padding-bottom: 3.0rem !important; /* behalten */
  /* padding-top wird oben über section#locations.py-5 kontrolliert */
}

#locations h2{ color:#fff; }
#locations p{ color: rgba(255,255,255,.85); }
#locations .text-muted{ color: rgba(255,255,255,.75) !important; }

/* Glass tiles inside locations */
#locations .tile{
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.15);
  color:#fff;
  backdrop-filter: blur(6px);
}
#locations .tile .text-muted{
  color: rgba(255,255,255,.80) !important;
}

/* ---------- Footer ---------- */
.footer{
  border-top: 1px solid rgba(15,23,42,.10);
  background: #fff;
}

/* Footer links */
.footer a{
  color: rgba(10,30,74,.85);
  text-decoration: none;
}
.footer a:hover{
  color: var(--brand-2);
  text-decoration: underline;
}

/* Footer CTA on mobile */
@media (max-width: 575.98px){
  .footer-cta .btn{ width: 100%; }
}

/* ---------- Cookie Banner ---------- */
.cookie-banner{
  display:none;
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 2000;
  background: rgba(255,255,255,.96);
  border: 1px solid rgba(15,23,42,.12);
  border-radius: 16px;
  box-shadow: 0 14px 40px rgba(2,6,23,.14);
}
.cookie-banner .container{ max-width: 1140px; }

/* ---------- Responsive polish ---------- */
@media (max-width: 991.98px){
  .site-header .nav-actions{
    width: 100%;
    justify-content: flex-start;
    margin-top: 10px;
  }
  .site-header .site-logo{
    height: 66px !important;
    max-height: 66px !important;
    max-width: 300px !important;
  }
}

/* =========================================================
   CONTACT PAGE – Eventim-like
   ========================================================= */
.page-contact .page-title{
  font-weight: 900;
  letter-spacing: -0.02em;
  color: #0A1E4A;
}

.page-contact .contact-card{
  background: #fff;
  border: 1px solid rgba(15,23,42,.10);
  border-radius: 18px;
  box-shadow: 0 10px 26px rgba(2,6,23,.08);
}

.page-contact .contact-side{
  background: rgba(255,255,255,.65);
  border: 1px solid rgba(15,23,42,.10);
  border-radius: 18px;
  box-shadow: 0 10px 26px rgba(2,6,23,.08);
  overflow: hidden;
}

.page-contact .contact-side .side-head{
  padding: 18px 18px 0;
}
.page-contact .contact-side .side-body{
  padding: 0 18px 18px;
}

.page-contact .info-banner{
  border-radius: 16px;
  border: 1px solid rgba(255,210,0,.45);
  background: rgba(255,210,0,.18);
  color: #0A1E4A;
}

.page-contact .form-label{
  font-weight: 800;
  color: rgba(10,30,74,.90);
}

.page-contact .form-control,
.page-contact select.form-control,
.page-contact textarea.form-control{
  border-radius: 14px;
  border: 1px solid rgba(15,23,42,.14);
  padding: .78rem .9rem;
  box-shadow: none;
}

.page-contact .form-control:focus{
  border-color: rgba(11,42,111,.45);
  box-shadow: 0 0 0 .2rem rgba(11,42,111,.12);
}

.page-contact .form-text{
  color: rgba(10,30,74,.65);
}

.page-contact .btn-submit{
  border-radius: 14px;
  font-weight: 900;
  padding: .78rem 1.05rem;
  background: var(--brand);
  border: 1px solid rgba(11,42,111,.25);
  color: #fff;
}
.page-contact .btn-submit:hover{
  background: var(--brand-2);
  color:#fff;
}

.page-contact .upload-box{
  margin-top: 14px;
  padding: 16px;
  background: rgba(11,42,111,.06);
  border: 1px dashed rgba(11,42,111,.22);
  border-radius: 16px;
}

.page-contact .upload-box .btn{
  border-radius: 14px;
  font-weight: 900;
}

.page-contact .alert{
  border-radius: 16px;
  border: 1px solid rgba(15,23,42,.10);
}

.page-contact .alert-success{ background: rgba(34,197,94,.12); }
.page-contact .alert-danger{ background: rgba(239,68,68,.12); }

.page-contact .contact-list{
  margin: 10px 0 0;
  padding-left: 1.1rem;
}
.page-contact .contact-list li{
  margin: 6px 0;
  color: rgba(10,30,74,.78);
}

.page-contact .preview-img{
  border-radius: 16px;
  border: 1px solid rgba(15,23,42,.10);
  box-shadow: 0 10px 26px rgba(2,6,23,.08);
  margin-top: 14px;
}

/* Contact page main spacing on mobile */
@media (max-width: 991.98px){
  .page-contact main.py-5{
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
  }
}