/* radio-seite.css — aus apex/radio.html ausgelagert (#1014): <style>-Bloecke und style-Attribute, damit style-src ohne unsafe-inline gilt. */
        *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

        :root {
            --schwarz:    #0e0600;
            --dunkel:     #1a0a00;
            --braun:      #3a1800;
            --gold-dunkel:#8a6820;
            --gold:       #c9a84c;
            --gold-hell:  #f0d080;
            --gold-weiss: #fdf0c0;
            --text:       #e8d090;
        }

        body {
            background: var(--dunkel);
            color: var(--text);
            font-family: 'Special Elite', monospace;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 40px 20px;
            overflow-x: hidden;
        }

        /* ── Art Déco Hintergrund ─────────────────────────────── */
        body::before {
            content: '';
            position: fixed;
            inset: 0;
            background:
                repeating-linear-gradient(
                    90deg,
                    transparent,
                    transparent 59px,
                    rgba(201,168,76,0.04) 59px,
                    rgba(201,168,76,0.04) 60px
                ),
                repeating-linear-gradient(
                    0deg,
                    transparent,
                    transparent 59px,
                    rgba(201,168,76,0.04) 59px,
                    rgba(201,168,76,0.04) 60px
                );
            pointer-events: none;
            z-index: 0;
        }

        /* ── Strahlen hinter dem Player ───────────────────────── */
        .strahlen {
            position: absolute;
            width: 600px;
            height: 600px;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            pointer-events: none;
            z-index: 0;
            opacity: 0.06;
        }
        .strahlen::before,
        .strahlen::after {
            content: '';
            position: absolute;
            inset: 0;
            background: repeating-conic-gradient(
                rgba(201,168,76,1) 0deg,
                rgba(201,168,76,1) 6deg,
                transparent 6deg,
                transparent 12deg
            );
            border-radius: 50%;
        }
        .strahlen::after {
            transform: rotate(6deg);
            opacity: 0.5;
        }

        /* ── Wrapper ──────────────────────────────────────────── */
        .radio-wrap {
            position: relative;
            z-index: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 0;
            width: 100%;
            max-width: 520px;
        }

        /* ── Kopfzeile ────────────────────────────────────────── */
        .radio-header {
            text-align: center;
            margin-bottom: 8px;
        }

        .radio-header-ornament {
            color: var(--gold);
            font-size: 0.65rem;
            letter-spacing: 6px;
            display: block;
            margin-bottom: 6px;
        }

        .radio-site-link {
            display: inline-block;
            color: var(--gold);
            text-decoration: none;
            font-size: 0.6rem;
            letter-spacing: 4px;
            text-transform: uppercase;
            border-bottom: 1px solid rgba(201,168,76,0.3);
            padding-bottom: 2px;
            margin-bottom: 20px;
            transition: color 0.2s;
        }
        .radio-site-link:hover { color: var(--gold-hell); }

        /* ── Art Déco Rahmen ─────────────────────────────────── */
        .deco-rahmen {
            width: 100%;
            border: 1px solid var(--gold-dunkel);
            position: relative;
            padding: 36px 40px 32px;
            background: linear-gradient(180deg, #1e0c02 0%, #120800 100%);
        }

        /* Eckornamente */
        .deco-rahmen::before,
        .deco-rahmen::after {
            content: '';
            position: absolute;
            width: 20px;
            height: 20px;
            border-color: var(--gold);
            border-style: solid;
        }
        .deco-rahmen::before {
            top: -1px; left: -1px;
            border-width: 2px 0 0 2px;
        }
        .deco-rahmen::after {
            top: -1px; right: -1px;
            border-width: 2px 2px 0 0;
        }
        .deco-rahmen-inner {
            position: absolute;
            bottom: -1px; left: -1px; right: -1px;
            height: 20px;
            border-bottom: 2px solid var(--gold);
        }
        .deco-rahmen-inner::before,
        .deco-rahmen-inner::after {
            content: '';
            position: absolute;
            bottom: -1px;
            width: 20px;
            height: 20px;
            border-color: var(--gold);
            border-style: solid;
        }
        .deco-rahmen-inner::before {
            left: -1px;
            border-width: 0 0 2px 2px;
        }
        .deco-rahmen-inner::after {
            right: -1px;
            border-width: 0 2px 2px 0;
        }

        /* Obere Zierleiste */
        .deco-top-bar {
            position: absolute;
            top: 10px; left: 10px; right: 10px;
            height: 1px;
            background: linear-gradient(90deg, transparent, var(--gold-dunkel) 20%, var(--gold) 50%, var(--gold-dunkel) 80%, transparent);
        }
        .deco-bottom-bar {
            position: absolute;
            bottom: 20px; left: 10px; right: 10px;
            height: 1px;
            background: linear-gradient(90deg, transparent, var(--gold-dunkel) 20%, var(--gold) 50%, var(--gold-dunkel) 80%, transparent);
        }

        /* ── Senderlogo / Titel ───────────────────────────────── */
        .radio-logo-zeile {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 12px;
            margin-bottom: 4px;
        }

        .radio-logo-linie {
            flex: 1;
            height: 1px;
            background: linear-gradient(90deg, transparent, var(--gold-dunkel));
        }
        .radio-logo-linie.rechts {
            background: linear-gradient(90deg, var(--gold-dunkel), transparent);
        }

        .radio-logo-text {
            font-size: 0.55rem;
            letter-spacing: 5px;
            text-transform: uppercase;
            color: var(--gold);
        }

        .radio-titel {
            text-align: center;
            font-size: 2.2rem;
            letter-spacing: 4px;
            text-transform: uppercase;
            color: var(--gold-hell);
            line-height: 1;
            margin-bottom: 2px;
            text-shadow: 0 0 40px rgba(201,168,76,0.3);
        }

        .radio-subtitle {
            text-align: center;
            font-size: 0.6rem;
            letter-spacing: 5px;
            text-transform: uppercase;
            color: var(--gold-dunkel);
            margin-bottom: 28px;
        }

        /* ── Frequenzanzeige (dekorativ) ─────────────────────── */
        .freq-display {
            background: #0a0400;
            border: 1px solid var(--gold-dunkel);
            padding: 8px 20px;
            text-align: center;
            margin-bottom: 28px;
            position: relative;
        }
        .freq-display::before {
            content: '';
            position: absolute;
            inset: 2px;
            border: 1px solid rgba(201,168,76,0.15);
        }
        .freq-zahl {
            font-size: 1.8rem;
            letter-spacing: 3px;
            color: var(--gold-hell);
            display: block;
            line-height: 1;
        }
        .freq-unit {
            font-size: 0.55rem;
            letter-spacing: 4px;
            color: var(--gold-dunkel);
            text-transform: uppercase;
        }

        /* ── Status ───────────────────────────────────────────── */
        .radio-status {
            text-align: center;
            font-size: 0.6rem;
            letter-spacing: 3px;
            text-transform: uppercase;
            margin-bottom: 28px;
            height: 1.4em;
            color: var(--gold-dunkel);
            transition: color 0.4s;
        }
        .radio-status.aktiv { color: var(--gold); }

        /* ── Haupt-Play-Button ────────────────────────────────── */
        .play-btn-wrap {
            display: flex;
            justify-content: center;
            margin-bottom: 24px;
        }

        .play-btn {
            width: 90px;
            height: 90px;
            border-radius: 50%;
            border: 2px solid var(--gold);
            background: radial-gradient(circle at 40% 35%, #3a1a00, #1a0800);
            color: var(--gold-hell);
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            transition: all 0.2s;
            box-shadow: 0 0 0 4px rgba(201,168,76,0.08), 0 0 30px rgba(201,168,76,0.1);
        }

        .play-btn::before {
            content: '';
            position: absolute;
            inset: 5px;
            border-radius: 50%;
            border: 1px solid rgba(201,168,76,0.3);
        }

        .play-btn:hover {
            border-color: var(--gold-hell);
            box-shadow: 0 0 0 4px rgba(201,168,76,0.15), 0 0 50px rgba(201,168,76,0.2);
            transform: scale(1.04);
        }

        .play-btn:active { transform: scale(0.97); }

        .play-btn svg {
            width: 32px;
            height: 32px;
            filter: drop-shadow(0 0 6px rgba(201,168,76,0.4));
        }

        /* Pulsring wenn aktiv */
        .play-btn.playing {
            border-color: var(--gold-hell);
            box-shadow: 0 0 0 4px rgba(201,168,76,0.2), 0 0 50px rgba(201,168,76,0.25);
            animation: tt-radio-puls 2s ease-in-out infinite;
        }

        @keyframes tt-radio-puls {
            0%, 100% { box-shadow: 0 0 0 4px rgba(201,168,76,0.2), 0 0 40px rgba(201,168,76,0.2); }
            50%       { box-shadow: 0 0 0 8px rgba(201,168,76,0.08), 0 0 60px rgba(201,168,76,0.35); }
        }

        /* ── Lautstärke ───────────────────────────────────────── */
        .volume-wrap {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-bottom: 28px;
        }

        .volume-label {
            font-size: 0.55rem;
            letter-spacing: 3px;
            text-transform: uppercase;
            color: var(--gold-dunkel);
            width: 60px;
            text-align: right;
        }

        input[type=range] {
            -webkit-appearance: none;
            flex: 1;
            height: 2px;
            background: linear-gradient(90deg, var(--gold) var(--vol, 50%), var(--braun) var(--vol, 50%));
            outline: none;
            cursor: pointer;
        }
        input[type=range]::-webkit-slider-thumb {
            -webkit-appearance: none;
            width: 14px;
            height: 14px;
            border-radius: 50%;
            background: var(--gold);
            border: 2px solid var(--gold-hell);
            box-shadow: 0 0 8px rgba(201,168,76,0.4);
        }
        input[type=range]::-moz-range-thumb {
            width: 14px;
            height: 14px;
            border-radius: 50%;
            background: var(--gold);
            border: 2px solid var(--gold-hell);
            box-shadow: 0 0 8px rgba(201,168,76,0.4);
        }

        .volume-zahl {
            font-size: 0.6rem;
            letter-spacing: 1px;
            color: var(--gold-dunkel);
            width: 36px;
        }

        /* ── Trennlinie ───────────────────────────────────────── */
        .deco-divider {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 20px;
        }
        .deco-divider-linie {
            flex: 1;
            height: 1px;
            background: linear-gradient(90deg, transparent, var(--gold-dunkel));
        }
        .deco-divider-linie.rechts {
            background: linear-gradient(90deg, var(--gold-dunkel), transparent);
        }
        .deco-divider-sym {
            color: var(--gold-dunkel);
            font-size: 0.7rem;
        }

        /* ── Stream URL ───────────────────────────────────────── */
        .stream-url-label {
            font-size: 0.52rem;
            letter-spacing: 3px;
            text-transform: uppercase;
            color: var(--gold-dunkel);
            text-align: center;
            margin-bottom: 8px;
        }

        .stream-url-box {
            display: flex;
            gap: 0;
            border: 1px solid var(--gold-dunkel);
        }

        .stream-url-text {
            flex: 1;
            background: #0a0400;
            border: none;
            color: var(--gold);
            font-family: 'Special Elite', monospace;
            font-size: 0.7rem;
            letter-spacing: 1px;
            padding: 8px 12px;
            outline: none;
            cursor: text;
        }

        .stream-url-copy {
            background: var(--braun);
            border: none;
            border-left: 1px solid var(--gold-dunkel);
            color: var(--gold);
            font-family: 'Special Elite', monospace;
            font-size: 0.55rem;
            letter-spacing: 2px;
            text-transform: uppercase;
            padding: 8px 14px;
            cursor: pointer;
            transition: background 0.15s, color 0.15s;
            white-space: nowrap;
        }
        .stream-url-copy:hover { background: var(--gold-dunkel); color: var(--gold-hell); }
        .stream-url-copy.copied { background: var(--gold-dunkel); color: var(--dunkel); }

        /* ── Fußzeile ─────────────────────────────────────────── */
        .radio-footer {
            margin-top: 28px;
            text-align: center;
            font-size: 0.55rem;
            letter-spacing: 3px;
            color: rgba(201,168,76,0.25);
            text-transform: uppercase;
        }
        /* #1066: jede Seite der Terminal Tribune verlinkt das eine Impressum auf der Apex. */
        .radio-footer a { color: rgba(201,168,76,0.55); text-decoration: none; }
        .radio-footer a:hover { color: rgba(201,168,76,0.9); }

        /* ── Responsive ───────────────────────────────────────── */
        @media (max-width: 480px) {
            .deco-rahmen { padding: 28px 20px 24px; }
            .radio-titel { font-size: 1.6rem; }
            .freq-zahl { font-size: 1.4rem; }
            .play-btn { width: 76px; height: 76px; }
        }