/**
 * Broadcast-Banner (04.08.2026).
 *
 * Uebernommen aus dpa/assets/css/dpa.css ab Zeile 2492, damit alle Apps
 * dieselbe Darstellung bekommen. Die Farben kommen aus variables.css -
 * keine festen Hexwerte.
 *
 * Einbinden zusammen mit /assets/js/broadcast.js.
 */

.broadcast-banner {
    position: relative;
    z-index: 9999;
    background: color-mix(in srgb, var(--color-primary) 15%, transparent);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid color-mix(in srgb, var(--color-primary) 30%, transparent);
    padding: 12px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    animation: broadcastRein .3s ease;
}

/* Eigene Namen statt slideDown/slideUp: Beide Namen sind in mehreren
   App-Stylesheets belegt. Gleichnamige @keyframes ueberschreiben einander
   still - der letzte gewinnt, unabhaengig davon, wer ihn braucht. */
@keyframes broadcastRein {
    from { transform: translateY(-100%); opacity: 0; }
    to   { transform: translateY(0);     opacity: 1; }
}

.broadcast-banner.closing {
    animation: broadcastRaus .3s ease forwards;
}

@keyframes broadcastRaus {
    from { transform: translateY(0);     opacity: 1; }
    to   { transform: translateY(-100%); opacity: 0; }
}

.broadcast-content {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
}

.broadcast-icon {
    color: var(--color-primary);
    flex-shrink: 0;
}

.broadcast-text {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 14px;
    color: var(--color-text-heading);
}

.broadcast-text strong {
    color: var(--color-primary);
    font-weight: 600;
}

.broadcast-text a {
    color: var(--color-primary);
    text-decoration: underline;
    font-weight: 500;
}

.broadcast-text a:hover {
    text-decoration: none;
}

.broadcast-close {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 8px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .2s;
    flex-shrink: 0;
    color: var(--color-text-secondary);
}

.broadcast-close:hover {
    background: color-mix(in srgb, var(--color-primary) 15%, transparent);
}

@media (max-width: 1024px) {
    .broadcast-banner { padding: 10px 16px; }
    .broadcast-text   { font-size: 13px; }
}