/*
 * Zweck: Gezielte Design-Overrides fuer aktuelle UI-Anpassungen.
 * Ladereihenfolge: Muss NACH allen anderen CSS-Dateien geladen werden.
 */
:root{
  --button-radius:999px;
  --badge-available-color:#7cffc4;
  --badge-available-border:#7cffc444;
  --badge-free-color:#7cffc4;
  --badge-free-border:#7cffc444;
  --badge-sold-out-color:#ff00a8;
  --badge-sold-out-border:#ff00a866;
  --badge-coming-soon-color:#aaa9ba;
  --badge-coming-soon-border:#ffffff18;
  --media-tab-active-color:var(--gradient-primary);
  --media-tab-bg:rgba(255,255,255,0.05);
  --media-card-radius:var(--border-radius,8px);
}

/* Keep event card rhythm stable: date at top, ticket status at bottom. */
.event-card{
  justify-content:flex-start;
}
.event-card .event-status{
  margin-top:auto;
}

/* Ticket status colors are controlled by rf_design → Ticketstatus. */
.event-status.available{
  background:var(--badge-available-color);
  border-color:var(--badge-available-border);
  color:#050509;
}
.event-status.free{
  background:var(--badge-free-color);
  border-color:var(--badge-free-border);
  color:#050509;
}
.event-status.sold-out{
  background:var(--badge-sold-out-color);
  border-color:var(--badge-sold-out-border);
  color:#fff;
}
.event-status.coming-soon{
  background:rgba(255,255,255,.08);
  border:1px solid var(--badge-coming-soon-border);
  color:var(--badge-coming-soon-color);
}

/* Button border-radius: controlled via rf_design → Layout → buttonRadius */
.event-status,
.cta-button,
.btn,
button[type=submit]{
  border-radius:var(--button-radius)!important;
}

/* Media tab navigation buttons: Fotos / Videos / Musik */
.media-tabs{
  background:var(--media-tab-bg)!important;
  border-radius:var(--button-radius)!important;
}
.media-tab{
  border-radius:var(--button-radius)!important;
}
.media-tab.active{
  background:var(--media-tab-active-color)!important;
}

/* Video thumbnails: same height as gallery previews (aspect-ratio 16/10 instead of fixed height) */
.video-thumbnail{
  aspect-ratio:16/10!important;
  block-size:auto!important;
  height:auto!important;
}

/* Music embeds should keep their provider-defined/embed height, not the video aspect-ratio. */
.music-player{
  aspect-ratio:auto!important;
  block-size:auto!important;
  height:auto!important;
}
.music-player iframe{
  inline-size:100%!important;
  width:100%!important;
  block-size:auto;
  max-inline-size:100%;
  display:block;
}

/* Ensure embedded video iframes fill the same card media area as gallery images. */
.video-thumbnail iframe{
  inline-size:100%!important;
  width:100%!important;
  block-size:100%!important;
  height:100%!important;
  display:block;
  border:0;
}
.video-card,
.gallery-card,
.music-card{
  border-radius:var(--media-card-radius)!important;
  height:100%;
}

/* RF v2 navbar gradient: top black -> transparent, no blur haze. */
.nav,
nav.nav,
nav#navbar,
.navbar,
nav.navbar{
  background: linear-gradient(to bottom, #000000 0%, rgba(0,0,0,0.85) 60%, rgba(0,0,0,0.4) 80%, rgba(0,0,0,0.1) 92%, transparent 100%) !important;
  background-color: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom-color: transparent !important;
  box-shadow: none !important;
}

/* Events without an active detail page are static cards, not links. */
.event-card.event-card--static {
  cursor: default;
}
.event-card.event-card--static:hover {
  transform: none;
  box-shadow: none;
  border-color: var(--border-color);
}
.event-card.event-card--static:hover::before {
  transform: scaleX(0);
}
.event-card.event-card--link {
  cursor: pointer;
}

/* About feature cards: card grid like team/events. */
#about .about-grid {
  grid-template-columns: 1fr;
  gap: 3rem;
}
#about .about-features {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2rem;
}
#about .about-features .feature {
  min-height: 260px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  padding: 3rem 2rem;
  border-width: 2px;
  background: #000;
}
#about .about-features .feature h3 {
  font-size: clamp(1.35rem, 2vw, 2rem);
  line-height: 1.2;
  margin-bottom: 1rem;
}
#about .about-features .feature p {
  font-size: 1rem;
  line-height: 1.6;
}
@media (max-width: 1024px) {
  #about .about-features { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
  #about .about-features { grid-template-columns: 1fr; }
  #about .about-features .feature { min-height: 220px; }
}

/* About feature cards: static until their detail page is enabled in CMS. */
.about-features .feature.feature--static {
  cursor: default;
}
.about-features .feature.feature--static:hover {
  transform: none !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  border-color: var(--border-color);
}
.about-features .feature.feature--static:hover::before {
  transform: scaleX(0);
}
.about-features .feature.feature--link {
  cursor: pointer;
}