/* ============================================================
   Radio Cuxhaven – Icon-System (Lucide SVG)
   Wird in includes/header.php geladen.
   ============================================================ */

/* Basis-Icon: inline-block, skaliert mit der Font-Größe */
.icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;    /* optisches Ausrichten zur Schrift */
  fill: none;
  stroke: currentColor;
  flex-shrink: 0;
}

/* Größenvarianten */
.icon-sm  { width: 0.85em; height: 0.85em; }
.icon-lg  { width: 1.4em;  height: 1.4em;  }
.icon-xl  { width: 2em;    height: 2em;    }
.icon-2xl { width: 3em;    height: 3em;    }
.icon-3xl { width: 4em;    height: 4em;    }

/* Farbvarianten – nutzen das Marken-Farbsystem */
.icon-primary { color: var(--primary); }
.icon-muted   { color: var(--text-muted); }
.icon-danger  { color: #c53030; }
.icon-success { color: #2f855a; }
.icon-white   { color: #fff; }

/* Animierter Live-Punkt (für „On Air") */
.icon-live {
  width: .65em; height: .65em;
  background: #c53030;
  border-radius: 50%;
  display: inline-block;
  vertical-align: middle;
  margin-right: .35em;
  animation: rc-pulse 1.6s ease-in-out infinite;
}
@keyframes rc-pulse {
  0%, 100% { opacity: 1;   box-shadow: 0 0 0 0 rgba(197,48,48,.5); }
  50%      { opacity: .65; box-shadow: 0 0 0 6px rgba(197,48,48,0); }
}
@keyframes rc-spin {
  to { transform: rotate(360deg); }
}

/* Icon mit Text – konstanter Abstand */
.icon + span,
.icon + * { margin-left: .35em; }
button .icon, a .icon, .icon-btn .icon { margin-right: .35em; }

/* Service-Tile-Icons (große runde Icons in Karten) */
.service-tile__icon {
  width: 56px; height: 56px;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  color: #fff;
  border-radius: 50%;
  margin-bottom: 1rem;
}
.service-tile__icon .icon { width: 28px; height: 28px; }

/* Social-Icon (im Header / Footer) */
.social-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,.1);
  color: #fff;
  text-decoration: none;
  transition: background .15s, color .15s;
}
.social-icon:hover {
  background: var(--primary);
  color: #1a1a1a;
}
.social-icon .icon { width: 18px; height: 18px; }

/* Kompaktere Variante für Service-Bar (oben am Rand) */
.service-bar__social { display: flex; gap: .35rem; align-items: center; }
.service-bar__social .social-icon {
  width: 26px; height: 26px;
  background: transparent;
  color: rgba(255,255,255,.7);
}
.service-bar__social .social-icon:hover {
  background: var(--primary);
  color: #1a1a1a;
}
.service-bar__social .social-icon .icon { width: 14px; height: 14px; }

/* Player-Play-Button: Icon-Größe explizit setzen */
.btn-play .icon { width: 18px; height: 18px; vertical-align: 0; }

/* News-Card-Placeholder: Icon zentriert */
.news-card__img-placeholder,
.news-list-item__img-ph {
  display: flex; align-items: center; justify-content: center;
}