:root {
            --bg-page: #1a1b26;
            --bg-header: #16161e;
            --bg-card: #24283b;
            --text: #c0caf5;
            --text-bright: #ffffff;
            --accent: #EB358C;
            --max-width: 1200px;
        }

	html, body {
	    max-width: 100%;
	    overflow-x: hidden;
	    margin: 0;
	    padding: 0;
	    /* Ein tiefer Verlauf von Dunkelblau zu fast Schwarz */
	    background: linear-gradient(180deg, #1a1b26 0%, #0f1016 100%);
	    background-attachment: fixed;
	    height: 100%;
	    display: flex;
	    flex-direction: column;
	}

        body {
            color: var(--text);
            font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
        }

        header {
            background-color: var(--bg-header);
            border-bottom: 2px solid var(--accent);
            box-shadow: 0 4px 20px rgba(0,0,0,0.4);
            position: relative;
            height: 85px;
            z-index: 100;
            display: flex;
            justify-content: center;
            width: 100%;
            flex-shrink: 0;
        }

        .header-content {
            width: 100%;
            max-width: var(--max-width);
            height: 100%;
            padding: 0 40px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            position: relative;
            box-sizing: border-box;
        }

        .logo-box { z-index: 101; cursor: pointer; display: flex; align-items: center; }
        .logo-desktop { display: block; max-height: 50px; width: auto; }
        .logo-mobile { display: none; }

        .player-center {
            position: absolute; left: 50%; top: 50%;
            transform: translate(-50%, -50%);
            display: flex; align-items: center; gap: 15px; z-index: 101;
        }

        .live-indicator { 
            display: flex; 
            align-items: center; 
            gap: 9px; 
            font-weight: bold; 
            text-transform: uppercase; 
            font-size: 0.85rem; 
            letter-spacing: 1.2px;
            color: var(--text-bright);
            line-height: 1;
	    text-shadow: 0 0 10px rgba(235, 53, 140, 0.5);
	    animation: neon-text-pulse 2s infinite alternate;
        }

	@keyframes neon-text-pulse {
	    from { text-shadow: 0 0 5px rgba(235, 53, 140, 0.3); }
	    to { text-shadow: 0 0 15px rgba(235, 53, 140, 0.9); }
	}
        
        .pulse-dot { 
            width: 8px; 
            height: 8px; 
            background: var(--accent); 
            border-radius: 50%; 
            animation: pulsing 2s infinite;
            flex-shrink: 0;
            margin-top: -2px; 
        }

        @keyframes pulsing {
		0% { 
			transform: scale(0.9); 
			box-shadow: 0 0 0 0 rgba(235, 53, 140, 0.7); 
		    }
		50% { 
			transform: scale(1.2); 
			box-shadow: 0 0 0 12px rgba(235, 53, 140, 0); 
		    }
		100% { 
			transform: scale(0.9); 
			box-shadow: 0 0 0 0 rgba(235, 53, 140, 0); 
		    }
        }

        .main-play-btn {
            background-color: transparent; border: 2px solid var(--accent);
            width: 55px; height: 55px; border-radius: 50%;
            cursor: pointer; display: flex; justify-content: center; align-items: center;
            transition: all 0.3s ease-in-out; padding: 0;
        }
        .main-play-btn:hover { box-shadow: 0 0 20px rgba(235, 53, 140, 0.4); }
        .main-play-btn svg { width: 32px; height: 32px; fill: #ffffff; }
        #play-svg { transform: translateX(1px); }

        .menu-toggle { cursor: pointer; z-index: 102; display: flex; flex-direction: column; gap: 5px; }
        .menu-toggle span { width: 22px; height: 2px; background-color: var(--text-bright); border-radius: 2px; }

        .nav-overlay {
            position: fixed; top: 0; right: -100%; width: 100%; height: 100%;
            background-color: var(--bg-header); display: flex; flex-direction: column;
            align-items: center; justify-content: center; transition: 0.4s; z-index: 99;
        }
        .nav-overlay.active { right: 0; }
        .nav-overlay a { 
            color: var(--text-bright); 
            text-decoration: none; 
            font-size: 1.8rem; 
            margin: 15px 0; 
            font-weight: bold;
            transition: color 0.3s ease;
        }
        .nav-overlay a:hover { color: var(--accent); }

        main { 
            padding: 40px 20px; 
            max-width: var(--max-width); 
            margin: 0 auto; 
            width: 100%; 
            box-sizing: border-box;
            flex: 1 0 auto;
        }

	article { 
	    /* Hintergrund mit 75% Deckkraft */
	    background: rgba(36, 40, 59, 0.75) !important; 
	    /* Der Unschärfe-Effekt für den Hintergrund */
	    backdrop-filter: blur(12px); 
	    -webkit-backdrop-filter: blur(12px);
	    
	    padding: 30px; 
	    border-radius: 12px; 
	    border-left: 4px solid var(--accent); 
	    /* Eine ganz feine Lichtkante oben für mehr Tiefe */
	    border-top: 1px solid rgba(255, 255, 255, 0.05); 
	    box-shadow: 0 15px 35px rgba(0,0,0,0.3);
	    margin-bottom: 25px;
	    transition: transform 0.3s ease;
	}

        h2 { color: var(--text-bright); margin-top: 0; font-size: 1.5rem; }
        p { line-height: 1.6; font-size: 1.05rem; }

	.mixcloud-container {
		margin-top: 20px;
		border-radius: 8px;
		overflow: hidden;
		/* Nutzt ein transparentes Weiß statt hartem Schwarz gegen die Ränder */
		background: rgba(255, 255, 255, 0.03); 
		box-shadow: 0 4px 10px rgba(0,0,0,0.3);
		border-left: 4px solid rgba(255, 255, 255, 0.1);
		transition: all 0.3s ease;
		line-height: 0; /* Wichtig gegen Lücken unter dem Player */
		position: relative; /* NEU: Hilft Firefox beim korrekten Schichten der Inhalte */
	    }

	    /* Gilt für das erste Element im Archiv UND für alles mit der Klasse highlight-box */
	    .mixcloud-container:first-of-type,
	    .highlight-box {
		border-left-color: var(--accent) !important;
		background: rgba(235, 53, 140, 0.05) !important;
		box-shadow: 0 4px 20px rgba(235, 53, 140, 0.4) !important;
	    }

	    /* Verhindert Ränder direkt am iframe */
	    .mixcloud-container iframe {
		display: block;
		border: none;
		vertical-align: middle;
		width: 100%;             /* Sicherstellen, dass er die volle Breite nutzt */
		min-height: 60px !important; /* NEU: Erzwingt Platz für das Play-Icon in Firefox Mobile */
		opacity: 0.99; 
		will-change: transform;
	    }

        footer { 
            text-align: center; 
            padding: 20px; 
            color: #565f89; 
            font-size: 0.85rem; 
            width: 100%;
            background-color: var(--bg-page);
            flex-shrink: 0;
        }

        @media (max-width: 600px) {
            header { height: 75px; }
            .header-content { padding: 0 15px; }
            .logo-mobile { display: block; height: 45px; width: 45px; object-fit: contain; }
            .logo-desktop { display: none; }
            main { padding: 20px 15px; }
            article { padding: 20px; }
            .nav-overlay a { font-size: 1.5rem; }
        }

        .week-range {
            color: var(--accent);
            font-weight: bold;
            text-transform: uppercase;
            letter-spacing: 1.5px;
            margin-bottom: 20px;
            font-size: 0.85rem;
            display: block;
        }

        .schedule-vertical {
            display: flex;
            flex-direction: column;
            gap: 12px;
            margin-top: 15px;
        }

        .schedule-entry {
            background: rgba(255, 255, 255, 0.03);
            padding: 18px 22px;
            border-radius: 8px;
            border-left: 4px solid rgba(255, 255, 255, 0.08);
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }

        .schedule-entry.is-live {
            border-left-color: var(--accent);
            background: rgba(235, 53, 140, 0.06);
            box-shadow: inset 8px 0 20px -10px rgba(235, 53, 140, 0.3);
        }

        .entry-header {
            color: var(--text);
            font-size: 0.75rem;
            text-transform: uppercase;
            letter-spacing: 1.2px;
            margin-bottom: 6px;
            opacity: 0.9;
        }

        .entry-title {
            color: var(--text-bright);
            font-size: 1.15rem;
            font-weight: 700;
            margin-bottom: 4px;
            line-height: 1.3;
        }

        .entry-host {
            color: var(--text);
            font-size: 0.85rem;
            opacity: 0.7;
            font-style: italic;
        }

        /* --- 2. HOVER EFFEKT (Nur für Computer mit Maus) --- */
        @media (min-width: 601px) {
            .schedule-entry:hover {
                background: rgba(255, 255, 255, 0.07);
                transform: translateX(6px);
            }
        }

        /* --- 3. MOBILE ANPASSUNG (Für Handys) --- */
        @media (max-width: 600px) {
            .schedule-entry { padding: 15px; }
            .entry-title { font-size: 1.05rem; }
        }	

	footer a {
	    color: var(--text-bright); /* Ein sauberes Weiß */
	    text-decoration: none;      /* Unterstreichung standardmäßig weg */
	    border-bottom: 1px solid rgba(255, 255, 255, 0.2); /* Dezente Linie statt fetter Unterstreichung */
	    transition: all 0.3s ease;
	    margin-left: 5px;
	}

	/* Hover-Effekt: Wenn man mit der Maus drübergeht */
	footer a:hover {
	    color: var(--accent);       /* Wechselt zu deinem Magenta-Pink */
	    border-bottom-color: var(--accent);
	    text-decoration: none;
	}

	footer {
	    width: 100%;
	    text-align: center; /* Zentriert den Text und die Links */
	    padding: 20px 0;    /* Gibt oben und unten etwas Luft */
	    margin-top: auto;   /* Hilft, den Footer unten zu halten */
	}

	footer a {
	    display: inline-block; /* Macht den Link im Footer besser klickbar */
	    margin: 5px 10px;      /* Abstand zwischen den Links, falls du mehrere hast */
	}

	/* --- DISCORD WIDGET & MOBILE WEICHE --- */

	    /* 1. Grundeinstellungen für Desktop (Standard) */
	    .discord-widget-container {
		display: block !important; 
		width: 100%;
		max-width: 1200px;
		margin: 25px auto;
		border: 1.5px solid rgba(235, 53, 140, 0.4);
		border-radius: 15px;
		overflow: hidden;
		box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
		background: #1b1b29;
		min-height: 600px; /* Gibt dem Container Platz */
	    }

	    .mobile-app-promo {
		display: none;
	    }

	    /* 2. Mobile Anpassungen (Nur für Handys) */
@media (max-width: 768px) {
        .discord-widget-container {
            display: none !important; /* Widget am Handy weg */
        }

        .mobile-app-promo {
            display: flex !important; /* App-Hinweis am Handy da */
            flex-direction: column;
            align-items: center;
            text-align: center;
            padding: 30px 20px;
            /* Der Kasten bleibt magenta gerahmt, aber dezent transparent */
            background: rgba(235, 53, 140, 0.03); 
            border-radius: 16px;
            border: 1.5px solid rgba(235, 53, 140, 0.3);
            margin: 25px 0;
            box-shadow: 0 10px 30px rgba(0,0,0,0.25);
        }

        .mobile-app-promo p {
            font-size: 1.1rem;
            color: var(--text-bright);
            margin-bottom: 20px;
            font-weight: 600;
        }

        /* --- DER NEUE EDLE BUTTON --- */
        .app-button {
            display: inline-block;
            /* Edles Dunkelgrau-Blau statt grellem Pink */
            background: linear-gradient(135deg, #24283b 0%, #1a1b26 100%);
            color: var(--text-bright) !important;
            padding: 14px 30px;
            border-radius: 50px;
            text-decoration: none;
            font-weight: bold;
            text-transform: uppercase;
            letter-spacing: 1.5px;
            font-size: 0.9rem;
            
            /* Subtilemagenta Lichtkante oben für Tiefe */
            border: 1px solid rgba(235, 53, 140, 0.2);
            border-top: 1px solid rgba(255, 255, 255, 0.1);
            
            /* Sanfter Glanz-Schatten */
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3),
                        0 0 10px rgba(235, 53, 140, 0.1);
            
            transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
            position: relative;
            overflow: hidden;
        }

        /* Ein kleiner Glanz-Effekt beim Antippen */
        .app-button:active,
        .app-button:hover {
            transform: translateY(-2px);
            background: linear-gradient(135deg, #2c314a 0%, #1a1b26 100%);
            border-color: rgba(235, 53, 140, 0.5);
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4),
                        0 0 15px rgba(235, 53, 140, 0.3);
            color: var(--accent) !important; /* Text wird beim Hover magenta */
        }
    }