/* ─── GuggliFox Radio – Custom Overrides ────────────────────────────────── */
/* Lädt NACH nucleus.css, helium.css, sppagebuilder.css, helium-joomla.css  */

@import url('/assets/fonts/raleway/raleway.css');
@import url('/assets/fonts/lato/lato.css');

/* ─── CSS-Variablen (Theme-fähig – wird per layout.php überschrieben) ───── */
:root {
  --primary:     #ffa500;
  --primary-rgb: 255,165,0;
  --accent:      #F2A534;
  --accent-dark: #e0942a;
  --muted:       #a08050;
  --footer-bg:   #512b0a;
  --border:      rgba(var(--primary-rgb),0.25);
}

/* ─── Body / Scroll-Fix ──────────────────────────────────────────────────── */
/* nucleus.css setzt overflow:hidden auf #g-page-surround → Seite nicht scrollbar */
html, body { overflow: auto !important; }
#g-page-surround { overflow: visible !important; }
body { font-family: 'Raleway', 'Segoe UI', sans-serif; }

/* ─── Container Max-Width (wie Original ~1320px) ─────────────────────────── */
#g-navigation .g-container,
#g-footer .g-container,
#g-testimonials .g-container {
  max-width: 1320px;
  padding: 0 1rem;
}

/* ─── g-navigation (exakt Original) ─────────────────────────────────────── */
#g-navigation {
  background: var(--footer-bg);
  border-bottom: 3px solid var(--primary);
  padding: 0;
}

/* Header: g-content Abstände entfernen damit Logo und Player dicht sitzen */
#g-navigation .g-content {
  margin: 0;
  padding: 0;
}
/* Logo – nucleus.css setzt height:auto auf alle img, daher width+!important */
#header_logo .g-logo {
  display: block;
  padding: 0.3rem 0 0.3rem 0.5rem;
}
#header_logo .g-logo-helium img {
  width: 260px !important;
  height: auto !important;
  max-width: none !important;
  max-height: none !important;
  display: block;
}
/* Footer Logo */
#g-footer .g-content { margin: 0; padding: 0.5rem 0; }
#g-footer .g-logo-helium img {
  width: 190px !important;
  height: auto !important;
  max-width: none !important;
  max-height: none !important;
  display: block;
}

/* Header-Grid vertikal zentrieren */
#g-navigation .g-grid { align-items: center; }

/* Player-iframe */
#g-navigation .g-block.size-62 { padding: 0.3rem 0; }
#g-navigation .g-block.size-62 iframe { display: block; width: 100%; min-height: 90px; border: 0; }

/* Navigation Menu */
.g-main-nav { position: relative; }
.g-nav-toggle {
  display: none;
  background: none;
  border: none;
  color: #f2e5d3;
  font-size: 1.4rem;
  cursor: pointer;
  padding: 0.4rem 0.6rem;
}
.g-toplevel {
  display: flex;
  list-style: none;
  margin: 0; padding: 0;
  flex-wrap: wrap;
}
.g-menu-item { display: block; }
.g-menu-item-container {
  display: block;
  padding: 0.45rem 0.9rem;
  color: #f2e5d3 !important;
  font-family: 'Lato', sans-serif;
  font-weight: 700;
  font-size: 0.88rem;
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
}
.g-menu-item-container:hover,
.g-menu-item.active .g-menu-item-container {
  background: var(--primary);
  color: #fff !important;
}
.g-menu-item-title { display: inline; }

/* Admin Dropdown */
.g-menu-item-dropdown { position: relative; }
.g-dropdown-caret { font-size: 0.6rem; margin-left: 4px; vertical-align: middle; display: inline-block; transition: transform 0.2s; }
.g-menu-item-dropdown.open .g-dropdown-caret { transform: rotate(180deg); }
.g-dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 200px;
  background: #4a4a4a;
  border: none;
  list-style: none;
  margin: 0; padding: 0.3rem 0;
  z-index: 1000;
  box-shadow: 0 4px 16px rgba(0,0,0,0.6);
}
.g-menu-item-dropdown.open .g-dropdown-menu { display: block; }
.g-dropdown-menu li a {
  display: block;
  padding: 0.5rem 1.1rem;
  color: #fff;
  font-family: 'Lato', sans-serif;
  font-weight: 400;
  font-size: 0.88rem;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.12s;
}
.g-dropdown-menu li a:hover { background: var(--primary); color: #fff; }
.g-dropdown-sep { height: 1px; background: rgba(255,255,255,0.15); margin: 0.3rem 0; }
@media (max-width: 768px) {
  .g-dropdown-menu { position: static; box-shadow: none; background: rgba(0,0,0,0.35); }
}

/* Social Block */
.g-social-header { display: flex; align-items: center; justify-content: flex-end; }
.g-social { display: flex; gap: 0.5rem; align-items: center; padding: 0.3rem 0; }
.g-social a {
  color: #f2e5d3;
  font-family: 'Lato', sans-serif;
  font-size: 0.82rem;
  font-weight: 700;
  text-decoration: none;
  padding: 0.2rem 0.4rem;
  transition: color 0.15s;
}
.g-social a:hover { color: var(--primary); }

/* ─── g-testimonials (Hintergrund exakt wie Original) ───────────────────── */
#g-testimonials {
  background: url('/assets/img/studio-bg.jpg') no-repeat center top;
  background-size: cover;
  position: relative;
  z-index: 10;
}
#g-testimonials::before {
  background: linear-gradient(40deg, #e19e48, #cd7b34);
  opacity: 0.4;
  position: absolute;
  content: "";
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: -1;
}

/* ─── Slider (exakt wie Original) ────────────────────────────────────────── */
.sp-slider {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 820px !important;
}
@media (max-width: 1199px) { .sp-slider { height: 650px !important; } }
@media (max-width: 991px)  { .sp-slider { height: 510px !important; } }
@media (max-width: 767px)  { .sp-slider { height: 290px !important; } }
@media (max-width: 575px)  { .sp-slider { height: 110px !important; } }

.sp-item { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 0.8s ease; }
.sp-item.active { opacity: 1; position: relative; }
.sp-background { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: cover !important; background-position: center center !important; }
.sp-slide-text { position: absolute; bottom: 80px; left: 0; right: 0; text-align: center; z-index: 5; padding: 0 2rem; }
.sp-slide-title { font-size: 2rem; font-weight: 800; color: #fff; text-shadow: 0 2px 8px rgba(0,0,0,.6); margin-bottom: .4rem; }
.sp-slide-subtitle { font-size: 1.2rem; color: #fff; text-shadow: 0 1px 6px rgba(0,0,0,.6); }
.sp-slide-link { color: #fff; text-decoration: underline; text-underline-offset: 3px; transition: color .2s; }
.sp-slide-link:hover { color: var(--primary); }

/* Slider Dots – Kreise */
.sp-slider .sp-dots {
  position: absolute !important;
  bottom: 20px !important;
  left: 0 !important; right: 0 !important;
  width: 100% !important;
  transform: none !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  height: auto !important;
  margin: 0 !important;
}
.sp-slider .sp-dots ul {
  list-style: none !important;
  display: flex !important;
  justify-content: center !important;
  gap: 8px !important;
  margin: 0 !important;
  padding: 0 !important;
}
.sp-slider .sp-dots ul li {
  width: 12px !important;
  height: 12px !important;
  border-radius: 50% !important;
  border: 2px solid rgba(255,255,255,0.85) !important;
  background: transparent !important;
  cursor: pointer !important;
  position: relative !important;
  overflow: visible !important;
  transition: background 0.3s, border-color 0.3s !important;
  box-sizing: border-box !important;
}
.sp-slider .sp-dots ul li.active {
  background: #fff !important;
  border-color: #fff !important;
  width: 12px !important;
}
/* ::after und span ausblenden */
.sp-slider .sp-dots ul li::after { display: none !important; }
.sp-slider .sp-dots ul li .dot-indicator { display: none !important; }

/* Slider Nav Arrows */
.sp-nav-control {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  z-index: 10;
  pointer-events: none;
}
.nav-control {
  position: absolute;
  pointer-events: all;
  background: var(--accent);
  border: none;
  color: #fff;
  width: 60px; height: 60px;
  border-radius: 0;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 2rem;
  line-height: 1;
  transition: background 0.2s;
}
.nav-control:hover { background: var(--accent-dark); }
.prev-slide { left: 0; }
.next-slide { right: 0; }

/* ─── Team Carousel (layout2 = Text-Overlay) ─────────────────────────────── */
.sppb-carousel-extended { position: relative; overflow: hidden; display: flex; user-select: none; }
.sppb-carousel-extended-item {
  display: inline-block;
  flex-shrink: 0;
  vertical-align: top;
  position: relative;
  overflow: hidden;
  width: 20%;          /* 5 sichtbar auf XL */
  transition: transform 0.35s ease;
}
.sppb-carousel-extended.dragging { pointer-events: none; }
/* Während Drag: transition deaktivieren für flüssiges Ziehen */
.sppb-carousel-extended.dragging .sppb-carousel-extended-item {
  transition: none;
}
.sppb-carousel-extended-item img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  object-position: top center;
  display: block;
}
.sppb-team-no-photo {
  width: 100%;
  height: 200px;
  background: #8a4500;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
  color: var(--primary);
  font-weight: 800;
}

/* layout2: Text-Overlay */
.sppb-carousel-extended-team-content.sppb-carousel-layout2 {
  position: absolute;
  bottom: 0; left: 0; right: 0;
}
.sppb-carousel-extended-item-overlay {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 60px;
  background: linear-gradient(transparent, rgba(0,0,0,0.7));
}
.sppb-carousel-extended-team-content-wrap {
  position: relative;
  z-index: 2;
  padding: 0.4rem 0.5rem 0.5rem;
}
.sppb-carousel-extended-team-name {
  font-weight: 700;
  font-size: 0.82rem;
  color: #fff;
  font-family: 'Lato', sans-serif;
  display: block;
}
.sppb-carousel-extended-team-designation {
  font-size: 0.7rem;
  color: rgba(255,220,120,0.9);
  display: block;
  margin-top: 1px;
}
.sppb-carousel-extended-team-social-icon { display: none; }

/* Team Carousel Pfeile – links/rechts am Rand, vertikal zentriert */
.addon-root-team-carousel {
  position: relative;
}
.sppb-carousel-extended-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 20;
  width: 40px; height: 60px;
  background: var(--accent);
  border: none;
  color: #fff;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}
.sppb-carousel-extended-nav:hover { background: var(--accent-dark); }
.sppb-carousel-extended-prev { left: 0; }
.sppb-carousel-extended-next { right: 0; }

/* ─── g-footer (exakt Original) ─────────────────────────────────────────── */
#g-footer {
  background: var(--footer-bg);
  color: #fff;
  padding: 3rem 0;
  border-top: 3px solid var(--primary);
}
.g-copyright {
  color: #d4b07a;
  font-family: 'Lato', sans-serif;
  font-size: 0.82rem;
  line-height: 1.55;
}
.g-horizontalmenu {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  gap: 2rem;
  flex-wrap: wrap;
}
.g-horizontalmenu li a {
  color: #d4b07a;
  font-family: 'Lato', sans-serif;
  font-weight: 700;
  font-size: 0.85rem;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.15s;
}
.g-horizontalmenu li a:hover { color: var(--primary); }

/* ─── Inhaltsseiten (Sendeplan, Wunschbox etc.) ──────────────────────────── */
.g-page-content {
  position: relative;
  z-index: 10;
  background: url('/assets/img/studio-bg.jpg') no-repeat center top;
  background-size: cover;
  background-attachment: fixed;
  min-height: 60vh;
  padding: 2rem 0;
}
.g-page-content::before {
  background: linear-gradient(40deg, #e19e48, #cd7b34);
  opacity: 0.35;
  position: absolute;
  content: "";
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: -1;
}
.g-page-inner {
  background: rgba(81,43,10,0.78);
  border: 1px solid rgba(var(--primary-rgb),0.25);
  border-radius: 4px;
  padding: 1.5rem;
}

/* ─── Player-Seite ───────────────────────────────────────────────────────── */
.live-badge {
  display: inline-block;
  background: #a02818;
  color: #fff;
  font-family: 'Lato', sans-serif;
  font-weight: 700;
  font-size: 0.8rem;
  padding: 3px 10px;
  border-radius: 50px;
  letter-spacing: 0.05em;
}
.play-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.2s;
}
.play-btn:hover { background: #ed9d35; }

/* ─── Generische UI-Elemente ─────────────────────────────────────────────── */
.card {
  background: rgba(81,43,10,0.65);
  border: 1px solid rgba(var(--primary-rgb),0.2);
  border-radius: 4px;
  padding: 1.2rem;
  margin-bottom: 0.75rem;
  color: #f2e5d3;
}
.section-title {
  font-family: 'Raleway', sans-serif;
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--primary);
  margin-bottom: 1rem;
  padding-bottom: 0.4rem;
  border-bottom: 2px solid rgba(var(--primary-rgb),0.25);
}
.form-group { margin-bottom: 1rem; }
.form-label { display: block; margin-bottom: 0.3rem; font-weight: 600; font-size: 0.85rem; color: #c09050; }
.form-control {
  width: 100%;
  background: rgba(10,5,0,0.8);
  border: 1px solid rgba(var(--primary-rgb),0.3);
  border-radius: 3px;
  color: #f2e5d3;
  padding: 0.55rem 0.85rem;
  font-size: 0.9rem;
  font-family: 'Lato', sans-serif;
  transition: border-color 0.2s;
}
.form-control:focus { outline: none; border-color: var(--primary); }
textarea.form-control { min-height: 100px; resize: vertical; }
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.55rem 1.2rem;
  border-radius: 50px;
  font-weight: 700;
  font-size: 0.85rem;
  cursor: pointer;
  border: none;
  font-family: 'Lato', sans-serif;
  transition: background 0.2s;
}
.btn-primary   { background: var(--primary); color: #fff; }
.btn-primary:hover { background: #ed9d35; color: #fff; }
.btn-secondary { background: var(--footer-bg); color: #f2e5d3; border: 1px solid rgba(var(--primary-rgb),0.4); }
.btn-danger    { background: #a02818; color: #fff; }
.btn-sm { padding: 0.28rem 0.75rem; font-size: 0.78rem; }
.alert { padding: 0.7rem 1rem; border-radius: 3px; margin-bottom: 0.75rem; font-size: 0.87rem; }
.alert-danger  { background: rgba(160,40,24,0.2); border: 1px solid rgba(160,40,24,0.5); color: #e06050; }
.alert-success { background: rgba(60,160,80,0.15); border: 1px solid rgba(60,160,80,0.4); color: #80d080; }
.alert-info    { background: rgba(var(--primary-rgb),0.12); border: 1px solid rgba(var(--primary-rgb),0.35); color: #f0b040; }
.auth-box {
  max-width: 380px; margin: 2rem auto;
  background: rgba(81,43,10,0.82);
  border: 1px solid rgba(var(--primary-rgb),0.4);
  border-radius: 4px; padding: 2rem;
}
.auth-box h2 { color: var(--primary); font-family: 'Raleway', sans-serif; margin-bottom: 1.3rem; font-size: 1.3rem; }
.schedule-day { margin-bottom: 1.5rem; }
.schedule-day h3 { color: var(--primary); margin-bottom: 0.5rem; font-size: 0.95rem; font-family: 'Raleway', sans-serif; font-weight: 700; }
.schedule-entry {
  display: flex; align-items: center; gap: 0.8rem;
  background: rgba(81,43,10,0.5);
  border: 1px solid rgba(var(--primary-rgb),0.2);
  border-radius: 3px; padding: 0.55rem 0.8rem; margin-bottom: 0.3rem;
}
.schedule-time { font-size: 0.78rem; color: var(--muted); min-width: 95px; }
.schedule-color { width: 3px; height: 34px; border-radius: 2px; flex-shrink: 0; }
.schedule-show { font-weight: 700; font-size: 0.88rem; color: #f2e5d3; }
.schedule-mod  { color: var(--muted); font-size: 0.78rem; }
.wish-list { list-style: none; padding: 0; }
.wish-item {
  background: rgba(81,43,10,0.5); border: 1px solid rgba(var(--primary-rgb),0.2);
  border-radius: 3px; padding: 0.65rem 0.85rem; margin-bottom: 0.3rem;
  display: flex; gap: 0.7rem;
}
.wish-meta { color: var(--muted); font-size: 0.76rem; }

/* ─── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 1199px) { .sppb-carousel-extended-item { width: 25%; } }   /* 4 sichtbar */
@media (max-width: 991px)  { .sppb-carousel-extended-item { width: 33.333%; } } /* 3 sichtbar */
@media (max-width: 768px) {
  .g-toplevel { display: none; flex-direction: column; }
  .g-toplevel.open { display: flex; }
  .g-nav-toggle { display: block; }
  #g-testimonials, .g-page-content { background-attachment: scroll; }
  .sppb-carousel-extended-item { width: 50%; }
  .g-social-header { justify-content: center; padding: 0.3rem 0; }
}
@media (max-width: 480px) {
  .sppb-carousel-extended-item { width: 50%; }
  .g-container { padding: 0 0.5rem; }
}

/* ─── System-Seiten Intro-Text ───────────────────────────────────────────── */
.sp-page-intro {
  margin-bottom: 1.5rem;
  max-width: 860px;
}
.sp-page-intro p { color: var(--muted); line-height: 1.7; margin-bottom: .75rem; }
.sp-page-intro h2, .sp-page-intro h3 { color: var(--primary); margin-bottom: .5rem; }