/* Schlager-Fox-Radio — Navigationsleiste und Startseiten-Kacheln
   Version 1.0, 27.10.2026. Wird NACH style.css geladen.
   Aendert keine gespeicherten Bilder, Sendungen oder Verwaltungsfunktionen. */
:root {
  --fox-cyan: #68e5ff;
  --fox-ice: #e9faff;
  --fox-pink: #ff79d9;
  --fox-violet: #a795ff;
  --fox-line: rgba(111, 211, 255, .39);
  --fox-card: linear-gradient(144deg, rgba(5, 18, 48, .85), rgba(14, 9, 38, .82) 60%, rgba(5, 15, 40, .84));
  --fox-muted: #cfdef3;
}

/* Kopfzeile: weder schwarze Leiste noch undurchsichtiger Hintergrund. */
html body header.masthead,
html body.page-home header.masthead,
html body.page-inner header.masthead,
html body header.masthead .topbar,
html body.page-home header.masthead .topbar,
html body.page-inner header.masthead .topbar {
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-block: 0 !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
html body header.masthead .masthead-glow {display:none !important;}
html body header.masthead .topbar {
  padding: 12px clamp(10px, 1.6vw, 22px);
  gap: clamp(10px, 1.5vw, 25px);
  min-height: 76px;
}
html body header.masthead .brand,
html body header.masthead .brand-copy,
html body header.masthead .brand-icon {
  background: transparent !important;
  box-shadow: none !important;
}
html body header.masthead .brand-icon {
  border: 1px solid rgba(104,229,255,.45) !important;
  border-radius: 16px;
  color: var(--fox-cyan);
}
html body header.masthead .brand-icon .logo-symbol {
  color: #94f3ff;
  text-shadow: 0 0 18px rgba(65, 206, 255, .65);
}
html body header.masthead .brand-copy b {
  color: #ffffff !important;
  font-family: "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif;
  font-size: clamp(17px,1.48vw,25px);
  font-weight: 900;
  letter-spacing: -.035em;
  text-shadow: 0 2px 12px rgba(1,5,25,.95), 0 0 19px rgba(39,162,239,.42);
}
html body header.masthead .brand-copy small {
  color: #a9edff !important;
  font-size: clamp(9px,.75vw,11px);
  font-weight: 800;
  letter-spacing: .09em;
  text-shadow: 0 2px 8px #000;
}
html body header.masthead .nav-links {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  gap: clamp(2px,.55vw,8px);
}
html body header.masthead .nav-links a {
  position: relative;
  background: transparent !important;
  border: 0 !important;
  border-radius: 10px;
  box-shadow: none !important;
  color: #f3faff !important;
  font-family: "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
  font-size: clamp(12px,.87vw,14px);
  font-weight: 750;
  line-height: 1.3;
  letter-spacing: .015em;
  padding: 11px 12px;
  text-decoration: none !important;
  text-shadow: 0 2px 8px #020717,0 0 13px rgba(1,7,29,.8);
  transition: color .18s ease, text-shadow .18s ease;
}
html body header.masthead .nav-links a::after {
  position: absolute;
  content: '';
  inset: auto 12px 4px;
  height: 2px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--fox-cyan), var(--fox-pink));
  box-shadow: 0 0 12px rgba(93,210,255,.7);
  opacity: 0;
  transform: scaleX(.55);
  transition: opacity .18s ease, transform .18s ease;
}
html body header.masthead .nav-links a.current,
html body header.masthead .nav-links a:hover,
html body header.masthead .nav-links a:focus-visible {
  background: transparent !important;
  color: #a7f4ff !important;
  text-shadow: 0 1px 8px #061025, 0 0 14px rgba(70,212,255,.68);
  transform: none;
}
html body header.masthead .nav-links a.current::after,
html body header.masthead .nav-links a:hover::after,
html body header.masthead .nav-links a:focus-visible::after {opacity:1;transform:scaleX(1);}
html body header.masthead .nav-links a:focus-visible,
html body header.masthead .brand:focus-visible,
html body header.masthead .menu-toggle:focus-visible {
  outline: 2px solid var(--fox-cyan) !important;
  outline-offset: 3px;
}
html body header.masthead .menu-toggle {
  color: #fff !important;
  background: rgba(7,19,46,.35) !important;
  border: 1px solid rgba(110,219,255,.65) !important;
  border-radius: 11px;
  box-shadow: none !important;
  font-weight: 800;
}

/* Einheitliche, gut lesbare Schrift auf der Startseite. */
html body.page-home {
  font-family: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size: 15px;
  font-weight: 550;
  line-height: 1.58;
  color: var(--fox-ice);
  -webkit-font-smoothing: antialiased;
}
html body.page-home :is(h1,h2,h3,h4) {
  font-family: "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif;
  line-height: 1.22;
  letter-spacing: -.025em;
  overflow-wrap: anywhere;
}
html body.page-home .main-frame {padding-top:clamp(14px,2vw,32px);}
html body.page-home .home-layout {gap:clamp(14px,1.4vw,24px);}
html body.page-home .column-left,
html body.page-home .column-center,
html body.page-home .column-right {gap:clamp(14px,1.4vw,24px);}

/* Kacheln wie dunkles Glas: Bild dahinter sichtbar, Texte kontrastreich. */
html body.page-home .panel,
html body.page-home .center-feature,
html body.page-home .rmm-home-image-block {
  background: var(--fox-card) !important;
  border: 1px solid var(--fox-line) !important;
  border-radius: 17px;
  box-shadow: 0 14px 34px rgba(0, 2, 18, .54), inset 0 1px 0 rgba(203,240,255,.10) !important;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  color: var(--fox-ice);
}
html body.page-home .panel:not(.current-panel):hover,
html body.page-home .center-feature:hover {
  border-color: rgba(156, 136, 255, .70) !important;
  box-shadow: 0 16px 39px rgba(0, 3, 20, .63), 0 0 22px rgba(82,112,255,.10) !important;
}
html body.page-home .panel-heading {
  background: linear-gradient(105deg,rgba(8,53,91,.65),rgba(43,18,69,.58)) !important;
  border-bottom: 1px solid rgba(112,221,255,.32) !important;
  padding: 17px 19px;
}
html body.page-home .panel-heading h2,
html body.page-home .center-feature h2,
html body.page-home .panel h2,
html body.page-home .panel h3,
html body.page-home .home-media-head h2 {
  color: #f6fbff !important;
  font-weight: 800;
  letter-spacing: -.018em;
  text-shadow: 0 2px 12px rgba(0,5,28,.85);
}
html body.page-home .panel-heading h2 {font-size: clamp(16px,1.05vw,19px);}
html body.page-home .panel-body {padding:clamp(16px,1.3vw,22px);background:transparent !important;}
html body.page-home .panel p,
html body.page-home .center-feature p,
html body.page-home .tile-subtitle {color: var(--fox-muted) !important;line-height:1.6;}
html body.page-home .eyebrow {
  color: #98ecff !important;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .15em;
}
html body.page-home .detail-label,
html body.page-home .muted,
html body.page-home .person-line small,
html body.page-home .shout-meta small {color: #c7d5eb !important;}
html body.page-home .dj-facts strong,
html body.page-home .person-line strong,
html body.page-home .partner-item b {color:#ffffff !important;}

/* Den vorhandenen bildlosen Moderator-Fotorahmen bewusst NICHT wieder einbauen. */
html body.page-home .current-panel {border-color:rgba(96,224,255,.66) !important;}
html body.page-home .current-panel::before {
  background: linear-gradient(90deg,#40d5ff,#6a72ff,#ff65ce) !important;
  height: 3px;
}
html body.page-home .current-panel .dj-card-layout .portrait {
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}
html body.page-home .live-indicator {
  background:linear-gradient(100deg,#145aa5,#8a2da8) !important;
  color:#fff;
  box-shadow:0 4px 16px rgba(41,151,255,.31);
}
html body.page-home .track-row {border-color:rgba(124,215,255,.19);font-weight:600;}
html body.page-home .track-row span {color:#e3efff;}

/* Stream-Buttons und Links passen zum neuen Neon-Design. */
html body.page-home .btn {
  border-radius: 11px;
  font-weight: 800;
  letter-spacing: .005em;
}
html body.page-home .btn-primary {
  color: #fff !important;
  background: linear-gradient(112deg,#0676bd 0%,#315cc6 53%,#8b2ca5 100%) !important;
  border: 1px solid rgba(139,224,255,.75) !important;
  box-shadow: 0 5px 17px rgba(4,112,255,.25) !important;
  text-shadow:0 1px 2px rgba(0,0,0,.35);
}
html body.page-home .btn-secondary,
html body.page-home .btn-outline,
html body.page-home .btn-glass {
  color:#eaf8ff !important;
  background:rgba(15,35,75,.70) !important;
  border:1px solid rgba(121,217,255,.42) !important;
}
html body.page-home .btn:hover,
html body.page-home .text-link:hover {filter:brightness(1.13);}
html body.page-home a.text-link,
html body.page-home .feature-links a {
  color: #9fefff !important;
  font-weight: 800;
  text-decoration-color:rgba(122,225,255,.45);
}
html body.page-home .tile-link {
  border:1px solid rgba(107,219,255,.33) !important;
  border-radius: 12px;
  background: rgba(5,11,30,.35);
}
html body.page-home .tile-art {
  color:#e6faff;
  background:linear-gradient(135deg,rgba(13,79,134,.8),rgba(65,17,117,.8)) !important;
}
html body.page-home .partner-item,
html body.page-home .person-line,
html body.page-home .shout,
html body.page-home .status-summary > span {
  border-color:rgba(116,203,255,.19) !important;
}
html body.page-home .center-feature {
  padding:clamp(22px,2.4vw,34px);
}
html body.page-home .center-feature .feature-icon {color:var(--fox-pink);text-shadow:0 0 15px rgba(255,121,217,.4);}

/* Der grosse mittlere Bereich bleibt transparent genug fuer die Bildwelt. */
html body.page-home .hero-visual {
  border:1px solid rgba(105,212,255,.45) !important;
  border-radius:18px;
  box-shadow:0 15px 37px rgba(0,1,19,.58) !important;
}
html body.page-home .hero-core h1 {
  background:none !important;
  background-clip:border-box !important;
  -webkit-text-fill-color:#fff !important;
  color:#fff !important;
  font-weight:900;
  text-shadow:0 3px 15px rgba(0,0,0,.85),0 0 16px rgba(74,208,255,.4);
}
html body.page-home .hero-core p {color:#e0eeff !important;text-shadow:0 2px 7px #020817;}
html body.page-home .hero-tag,
html body.page-home .hero-topline,
html body.page-home .hero-bottomline {color:#a5edff !important;}

/* Formular-Kacheln: passende dunkle Eingabefelder, lesbare Platzhalter. */
html body.page-home .panel :is(input:not([type="checkbox"]):not([type="radio"]),textarea,select) {
  color:#fff;
  background-color:rgba(3,12,34,.78);
  border:1px solid rgba(119,205,255,.48);
  border-radius:10px;
}
html body.page-home .panel :is(input,textarea,select):focus-visible {outline:2px solid var(--fox-cyan);outline-offset:2px;}
html body.page-home .panel :is(input,textarea)::placeholder {color:#b1c6e2;opacity:1;}

@media (max-width:1080px) {
  html body header.masthead .topbar {gap:9px;justify-content:center;}
  html body header.masthead .brand {flex:0 0 auto;}
  html body header.masthead .nav-links {flex:1 1 100%;justify-content:center;}
}
@media (max-width:720px) {
  html body header.masthead .topbar {justify-content:space-between;min-height:65px;padding:8px 12px 12px;}
  html body header.masthead .brand {min-width:0;flex:1 1 auto;}
  html body header.masthead .brand-icon {width:46px;height:46px;flex:0 0 46px;}
  html body header.masthead .brand-copy b {font-size:clamp(15px,4vw,19px);}
  html body header.masthead .brand-copy small {font-size:9px;letter-spacing:.01em;}
  html body header.masthead .menu-toggle {display:block;flex:0 0 auto;padding:9px 11px;}
  html body header.masthead .nav-links {display:none;}
  html body header.masthead .nav-links.open {
    display:flex;
    z-index:99;
    left:0;right:0;top:100%;
    flex-direction:column;
    align-items:stretch;
    padding:10px !important;
    background:rgba(4,13,36,.86) !important;
    border:1px solid rgba(110,214,255,.35) !important;
    border-radius:0 0 14px 14px;
    -webkit-backdrop-filter:blur(14px) !important;
    backdrop-filter:blur(14px) !important;
    box-shadow:0 18px 34px rgba(0,0,0,.38) !important;
  }
  html body header.masthead .nav-links a {display:block;width:100%;padding:12px 14px;text-align:left;font-size:14px;border-bottom:1px solid rgba(110,214,255,.13) !important;}
  html body.page-home .main-frame {padding-top:18px;}
  html body.page-home .home-layout {gap:14px;}
  html body.page-home .panel-heading {padding:15px 16px;}
  html body.page-home .panel-body {padding:16px;}
}
@media (prefers-reduced-motion:reduce) {
  html body header.masthead .nav-links a,
  html body header.masthead .nav-links a::after {transition:none !important;}
}