/* ==========================================
   RESET & BASIS VARIABLES
========================================== */
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
body {
    font-family: 'Montserrat', sans-serif; margin: 0; padding: 0;
    color: #fff; min-height: 100vh; background-color: #000;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}
/* ==========================================
   BACKGROUNDS
========================================== */
.fixed-bg-video {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    object-fit: cover; object-position: center center; 
    z-index: -5; opacity: 0.38; pointer-events: none;
}

body::before {
    content: ""; position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: -2;
    background: linear-gradient(to bottom, #38bdf8, #f97316, #38bdf8);
    background-size: 100% 200%; 
    animation: cosmicBreathe 30s ease-in-out infinite; 
    opacity: 0.65; pointer-events: none;
}
@keyframes cosmicBreathe { 
    0% { background-position: 50% 0%; } 
    50% { background-position: 50% 100%; } 
    100% { background-position: 50% 0%; } 
}

/* ==========================================
   NAVIGATION & BANNER
========================================== */
.top-nav {
    position: fixed; top: 0; left: 0; width: 100%; height: 55px;
    background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(25px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.3); box-shadow: 0 4px 30px rgba(0, 0, 0, 0.4);
    z-index: 2000; display: flex; justify-content: space-between; align-items: center; padding: 0 190px;
    transition: all 0.3s ease;
}

.nav-logo { height: 50px; filter: drop-shadow(0 0 10px rgba(236,72,153,0.5)); transition: transform 0.3s ease; cursor: pointer; margin: 0; }
.nav-logo:hover { transform: scale(1.2); }

.back-btn {
    position: relative; text-decoration: none; font-weight: 800; font-size: 0.8rem; text-transform: uppercase;
    letter-spacing: 1px; padding: 8px 20px; border-radius: 20px;
    transition: 0.3s; display: flex; align-items: center; justify-content: center;
    background: rgba(20, 20, 25, 0.4); border: none; z-index: 1; cursor: pointer;
}

.lang-nav-container {
    display: flex;
    align-items: center;
    gap: 10px;
}
.back-btn {
    background: rgba(10, 15, 30, 0.4); border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: inset 0px -4px 10px rgba(0,0,0,0.4), inset 0px 4px 10px rgba(255,255,255,0.4);
}
.back-btn:hover { transform: scale(1.15); border-color: #fff; }
.back-txt {
    display: flex; align-items: center; gap: 8px;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0,0,0,0.8); transition: 0.3s;
}
.back-btn:hover .back-txt { text-shadow: 0 0 8px rgba(255, 255, 255, 0.8); }

#page-scaler {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.top-banner {
    display: none;
    width: 96%; max-width: 1680px;
    border-radius: clamp(16px, 3vw, 40px);
    align-self: center; overflow: hidden;
    aspect-ratio: 4 / 1;
    background-image: url('background.png'); background-size: cover;
    background-position: center top; background-repeat: no-repeat;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3); z-index: 5; pointer-events: none;
    margin: 68px auto 8px auto;
    box-sizing: border-box;
}

/* ==========================================
   MAIN PORTAL & VIDEO
========================================== */
.portal-container {
    position: relative; background: rgba(10, 15, 30, 0.1);
    backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
    border-radius: clamp(14px, 2vw, 30px); padding: clamp(10px, 1.5%, 20px);
    width: 96%; max-width: 1680px; margin: 70px auto 8px auto;
    border: 1px solid rgba(255, 255, 255, 0.4); box-shadow: 0 15px 45px rgba(0, 0, 0, 0.4); z-index: 10;
}

/* Mobile: mini-video-screen in middle-container bekommt volle Breite */
.middle-master-container #mini-video-screen { max-width: 100% !important; width: 100% !important; aspect-ratio: 16 / 9 !important; border-radius: 12px !important; }

.video-cinema-screen {
    background: rgba(0, 0, 0, 0.3); padding: 20px; border-radius: 30px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.4); position: relative; z-index: 10;
    width: 96%; max-width: 1680px;
    margin: 0 auto 0 auto;
}
.custom-bg-layer { 
    position: absolute; top: 0; left: 0; width: 100%; height: 100%; 
    background-size: cover; background-position: center 33px; 
    z-index: 0; pointer-events: none; border-radius: 30px; 
}
.bg1 { background-image: url('background1.jpg'); animation: cf 150s infinite; }
.bg2 { background-image: url('background2.jpg'); animation: cf2 150s infinite; }

@keyframes cf {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

@keyframes cf2 {
    0%, 100% { opacity: 0; }
    50% { opacity: 1; }
}

/* ==========================================
   HEADER (DESKTOP)
========================================== */

#main-header { position: relative; z-index: 10; width: 100%; margin-top: 0; margin-bottom: 20px; padding-bottom: 15px; border-bottom: 1px solid rgba(255,255,255,0.2); text-align: center; }
.header-text-block { display: flex; align-items: center; justify-content: center; gap: -10px; flex-wrap: nowrap; margin-top: 24px; }
.main-headline { margin: 0; font-weight: 900; line-height: 1; font-size: clamp(1.8rem, 3vw, 3.5rem); background: linear-gradient(to right, #00d2ff, #3a7bd5, #9b59b6, #ff7eb3, #ff758c); -webkit-background-clip: text; -webkit-text-fill-color: transparent; -webkit-text-stroke: 2px rgba(0,0,0,0.5); letter-spacing: 1px; filter: drop-shadow(2px 4px 4px rgba(0,0,0,0.3)); white-space: nowrap; }
.main-subline, .side-text { font-size: clamp(0.7rem, 1.5vw, 1.1rem); font-weight: 800; color: #ea580c !important; letter-spacing: 2px; text-transform: uppercase; text-shadow: 0 0 10px rgba(234, 88, 12, 0.4), 1px 1px 2px rgba(0,0,0,0.9); white-space: nowrap; margin-top: 5px; }
.header-icon { color: #00d2ff; text-shadow: 0 0 10px rgba(0,210,255,0.8); margin:0 -5 px; }
.desktop-only { display: revert; }
.desktop-hidden { display: none; }

.section-inner-header {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    border-bottom: 2px solid rgba(240, 240, 240, 0.25);
    padding-bottom: 8px;
    margin-bottom: 22px;
}
h2 { font-size: clamp(1.2rem, 2.2vw, 2.6rem); font-weight: 900; margin: 0; text-align: center; text-transform: uppercase; letter-spacing: clamp(1px, 0.3vw, 3px); white-space: nowrap; -webkit-text-stroke: 1px rgba(255,255,255,0.7); paint-order: stroke fill; }
.music-section h2 { background: linear-gradient(to right, #2ecc71 0%, #f1c40f 50%, #f97316 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.video-section h2 { background: linear-gradient(to right, #f97316 0%, #f1c40f 50%, #2ecc71 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }

/* ==========================================
   LAYOUT: 3-SPALTEN
========================================== */
.section-layout { display: flex; gap: clamp(8px, 2vw, 28px) !important; margin-top: 8px !important; align-items: stretch; justify-content: center; position: relative; z-index: 10; width: 100%; min-height: 0; }
.music-section { transform: translateX(5px); }
.video-section { transform: translateX(-5px); }

.player-section {
    position: relative; flex: 1 1 0; min-width: 0;
    /* kein min-height auf Desktop — flex:stretch macht das */
    border-radius: 25px; padding: 12px 25px 20px 25px; display: flex; flex-direction: column; align-items: center;
    background: linear-gradient(135deg, rgba(20, 30, 50, 0.15) 0%, rgba(7, 12, 35, 0.10) 100%);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid rgba(255, 255, 255, 0.4); border-left: 1px solid rgba(255, 255, 255, 0.15); border-right: 1px solid rgba(255, 255, 255, 0.15); border-bottom: 1px solid rgba(0, 0, 0, 0.9);
    box-shadow: inset 0 0 25px rgba(255,255,255,0.15), inset 0 2px 8px rgba(255,255,255,0.4), inset 0 -5px 20px rgba(0,0,0,0.6), 0 15px 35px rgba(0,0,0,0.7);
}

@keyframes spinLotusRight {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
@keyframes spinLotusLeft {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(-360deg); }
}

.player-section::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url('lotus.png');
    background-size: 80%;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.30;
    pointer-events: none;
    border-radius: inherit;
    z-index: 0;
    transform-origin: center center;
}

/* Lotus in der Music-Box dreht rechtsrum */
.music-section::after {
    animation: spinLotusRight 180s linear infinite;
}

/* Lotus in der Film-Box dreht linksrum */
.video-section::after {
    animation: spinLotusLeft 180s linear infinite;
}

.player-section > * {
    position: relative;
    z-index: 1; 
}

.middle-master-container {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    position: relative; z-index: 100; padding: 0 clamp(4px, 1.5vw, 20px);
    margin-top: 70px;
    margin-bottom: 0;
    align-self: center;
    padding-top: 0;
    gap: clamp(8px, 1.2vw, 16px);
    flex-shrink: 0;
    width: clamp(140px, 17vw, 215px);
    opacity: 0.75;
}
.section-stat-box { position: absolute; font-weight: 800; color: #fff; background: rgba(0,0,0,0.3); border-radius: 15px; border: 1px solid rgba(255,255,255,0.3); box-shadow: inset 0 1px 3px rgba(255,255,255,0.1), 0 2px 5px rgba(0,0,0,0.3); display: flex; align-items: center; gap: 6px; pointer-events: none; bottom: 12px; font-size: 0.65rem; padding: 4px 10px; letter-spacing: -0.5px; width: max-content; }

.music-section .track-stat { right: 20px; }

/* Play+Lens Row: nur auf Mobile sichtbar */
.music-play-lens-row {
    display: none;
}

/* Original Fullscreen-Button auf Mobile ausblenden */
#mini-video-screen .cosmic-fs-btn:not(.mobile-fs-inline-btn) {
    display: none !important;
}



.music-section .fav-stat-box { left: 20px; right: auto; }
.video-section .section-stat-box { right: 14px; }

.music-section .section-stat-box i { color: #ec4899; text-shadow: 0 0 5px rgba(236,72,153,0.8); }
.video-section .section-stat-box i { color: #00d2ff; text-shadow: 0 0 5px rgba(0,210,255,0.8); }

/* ==========================================
   BUTTONS & CATEGORIES
========================================== */
.info-btn { 
    position: absolute !important; 
    right: 15px !important;  
    top: 50% !important; 
    transform: translateY(-50%) !important; 
    font-size: 2.2rem !important; 
    color: rgba(100, 140, 140, 0.9) !important; 
    background: transparent; 
    border: none; 
    cursor: pointer; 
    transition: all 0.3s ease; 
    z-index: 50; 
    filter: drop-shadow(0 0 8px rgba(195, 255, 155, 0.8));
}
.info-btn:hover { color: #ea580c; transform: translateY(-50%) scale(1.1); filter: drop-shadow(0 0 8px rgba(234,88,12,0.8)); }
/* ==========================================
   BUTTONS & CATEGORIES
========================================== */

.category-btns {
    display: flex; justify-content: space-evenly; align-items: flex-end;
    width: 100%; margin-bottom: 10px; margin-top: 4px;
    gap: clamp(2px, 1.5vw, 12px);
    flex-wrap: nowrap;
    overflow: visible;
    min-height: calc(clamp(52px, 5.8vw, 84px) + clamp(6px, 0.8vw, 12px) + 26px + 12px);
}
.cat-wrapper { display: flex; flex-direction: column; align-items: center; gap: clamp(6px, 0.8vw, 12px); position: relative; justify-content: flex-end; flex-shrink: 1; min-width: 0; }

/* Tooltip für Kategorie-Buttons (Desktop Hover) */
.cat-wrapper::after {
    content: attr(data-tooltip);
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    color: white;
    font-size: 1rem;
    font-weight: 700;
    opacity: 0;
    transition: opacity 0.2s ease, top 0.2s ease;
    pointer-events: none;
    white-space: nowrap;
    z-index: 50;
    text-shadow: 0 2px 8px rgba(0,0,0,0.9), 0 0 10px rgba(0,0,0,0.5);
}
.cat-wrapper:hover::after {
    opacity: 1;
    top: -28px;
}

/* ==========================================
   KATEGORIE BUTTONS MIT LINSENEFFEKT
========================================== */
/* ==========================================
   KATEGORIE BUTTONS: GROSSE ICONS + LINSENEFFEKT
========================================== */
.cat-btn {
    width: clamp(80px, 5.8vw, 124px);
    height: clamp(80px, 5.8vw, 124px);
    border-radius: 50%; 
    border: 2px solid rgba(255,255,255,0.5); 
    /* ICONS WIEDER GROSS: Angepasst für mehr Sichtbarkeit */
    font-size: clamp(2.8rem, 4vw, 4.5rem) !important;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    position: relative; 
    /* Der 3D-Linseneffekt */
    box-shadow: inset 0px -8px 15px rgba(0,0,0,0.4), 
                inset 0px 8px 15px rgba(255,255,255,0.6), 
                0 5px 15px rgba(0,0,0,0.3); 
    background: rgba(255,255,255,0.05); 
    z-index: 5;
}

/* Das obere Glanzlicht (Spiegelung) */
.cat-btn::before { 
    content: ""; 
    position: absolute; 
    top: 2%; 
    left: 10%; 
    width: 80%; 
    height: 40%; 
    background: linear-gradient(rgba(255,255,255,0.9), rgba(255,255,255,0)); 
    border-radius: 50%; 
    pointer-events: none; 
    z-index: 6; 
}
/* Hover-Effekt für mehr Tiefe */
.cat-btn:hover { 
    transform: scale(1.15) !important; 
    box-shadow: inset 0px -8px 15px rgba(0,0,0,0.4), 
                inset 0px 8px 15px rgba(255,255,255,0.8), 
                0 0 20px rgba(255,255,255,0.8) !important; 
    border-color: #fff !important; 
}

.music-section .cat-wrapper:nth-child(1) .cat-btn { background: rgba(46, 204, 113, 0.3); } 
.music-section .cat-wrapper:nth-child(2) .cat-btn { background: rgba(173, 212, 92, 0.3); } 
.music-section .cat-wrapper:nth-child(3) .cat-btn { background: rgba(241, 196, 15, 0.3); } 
.music-section .cat-wrapper:nth-child(4) .cat-btn { background: rgba(255, 154, 68, 0.3); } 
.video-section .cat-wrapper:nth-child(1) .cat-btn { background: rgba(58, 123, 213, 0.3); }
.video-section .cat-wrapper:nth-child(2) .cat-btn { background: rgba(0, 210, 255, 0.3); }
.video-section .cat-wrapper:nth-child(3) .cat-btn { background: rgba(255, 126, 95, 0.3); }
@media (min-width: 781px) {
    .video-section .cat-btn { width: clamp(96px, 7.84vw, 150px); height: clamp(96px, 7.84vw, 150px); font-size: clamp(3.36rem, 4.84vw, 5.45rem) !important; }
    .music-section .cat-btn { width: clamp(80px, 7vw, 149px); height: clamp(80px, 7vw, 149px); font-size: clamp(3.36rem, 4.8vw, 5.4rem) !important; }
    .music-cat-display, .video-cat-display { font-size: 1rem; }
    .middle-master-container { margin-top: 80px; }
    #generate-mix { position: relative; top: 36px; }
    .mobile-side-left { position: relative; top: 43px; }
    .mobile-side-right { position: relative; top: 23px; }
    #mode-visual { width: clamp(50px, 5.52vw, 71px) !important; height: clamp(50px, 5.52vw, 71px) !important; }
    .music-section { transform: translateX(-3px); }
    .video-section { transform: translateX(3px); }
    .music-section h2, .video-section h2 { transform: scale(1.2); transform-origin: center bottom; }
    .music-section .mix-toggle, .video-section .mix-toggle { width: 23px; height: 23px; }
    .music-section .mix-toggle:hover, .video-section .mix-toggle:hover { transform: scale(1.3); border-color: #fff !important; box-shadow: inset 0 -2px 5px rgba(0,0,0,0.4), 0 0 18px rgba(255,255,255,0.9), 0 0 8px rgba(255,255,255,1) !important; }
    #generate-mix:hover::before { background: linear-gradient(135deg, #fff, #fff, #f97316) !important; opacity: 1 !important; filter: blur(6px) brightness(1.6) !important; }
    #generate-mix:hover { box-shadow: 0 0 40px rgba(255,255,255,0.6), 0 0 20px rgba(249,115,22,0.8), 0 18px 45px rgba(0,0,0,0.75) !important; }
    .section-inner-header { padding-bottom: 4px; margin-bottom: 12px; }
    .top-banner { display: block; margin-top: 80px; margin-bottom: 16px; }
    .portal-container { margin-top: 0; }
    .info-btn { right: -20px !important; }


    /* ── Mini Videoscreen im Cosmic Film Panel ── */
    .mini-screen-row {
        display: flex;
        align-items: stretch;
        gap: 6px;
        margin: 2px auto -14px auto;
        width: 100%;
        max-width: calc(389px + 6px + 38px);
        justify-content: center;
    }
    .mini-videoscreen {
        position: relative;
        width: 100%;
        max-width: 389px;
        margin: 0;
        border-radius: 8px;
        overflow: hidden;
        background: #000;
        border: 2px solid rgba(255,255,255,0.2);
        box-shadow: 0 0 20px rgba(0,210,255,0.2);
        cursor: pointer;
        flex-shrink: 0;
    }
    .mini-side-fs-btn {
        flex-shrink: 0;
        width: 38px;
        background: rgba(0,0,0,0.45);
        border: 1px solid rgba(255,255,255,0.25);
        border-radius: 8px;
        color: #e2e8f0;
        cursor: pointer;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 6px;
        padding: 8px 4px;
        font-size: 0.62rem;
        font-weight: 700;
        transition: background 0.2s, border-color 0.2s;
        backdrop-filter: blur(6px);
    }
    .mini-side-fs-btn:hover { background: rgba(249,115,22,0.2); border-color: #f97316; }
    .mini-side-fs-btn i { color: #00d2ff; font-size: 0.75rem; }
    .mini-side-label {
        writing-mode: vertical-lr;
        text-orientation: mixed;
        letter-spacing: 1.5px;
        text-transform: uppercase;
        font-size: 0.58rem;
        color: rgba(255,255,255,0.7);
    }
    .mini-video-stat {
        position: absolute;
        bottom: 8px;
        right: 10px;
        z-index: 5;
        font-weight: 800;
        color: #fff;
        background: rgba(0,0,0,0.45);
        border-radius: 12px;
        border: 1px solid rgba(255,255,255,0.25);
        display: flex;
        align-items: center;
        gap: 5px;
        font-size: 0.65rem;
        padding: 4px 10px;
        letter-spacing: -0.5px;
        pointer-events: none;
        backdrop-filter: blur(6px);
    }
    .mini-video-stat i { color: #00d2ff; }
    #mini-vid-canvas {
        width: 100%;
        height: auto;
        display: block;
        border-radius: 6px;
    }
    .mini-cat-overlay {
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.95rem;
        font-weight: 900;
        letter-spacing: 3px;
        text-transform: uppercase;
        background: linear-gradient(to right, #9b59b6, #00d2ff, #ff7eb3);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        filter: drop-shadow(0 0 10px rgba(0,210,255,0.8));
        opacity: 0;
        transition: opacity 0.5s ease;
        z-index: 5;
        pointer-events: none;
    }
    .mini-cat-overlay.visible { opacity: 1; }
    .mini-video-hover-controls {
        position: absolute;
        inset: 0;
        display: flex;
        align-items: flex-end;
        justify-content: flex-end;
        padding: 5px;
        opacity: 0;
        transition: opacity 0.3s;
        z-index: 10;
    }
    .mini-videoscreen:hover .mini-video-hover-controls { opacity: 1; }
    .mini-fs-btn {
        background: rgba(0,0,0,0.65);
        border: 1px solid rgba(255,255,255,0.4);
        color: #fff;
        width: 26px; height: 26px;
        border-radius: 5px;
        cursor: pointer;
        display: flex; align-items: center; justify-content: center;
        font-size: 0.75rem;
        transition: 0.2s;
        flex-shrink: 0;
    }
    .mini-fs-btn:hover { border-color: #06b6d4; color: #06b6d4; }

    /* ── Read-only Speed Anzeige ── */
    .speed-readonly-bar {
        text-align: center;
        font-size: 0.78rem;
        font-weight: 700;
        color: #ea580c;
        letter-spacing: 1px;
        margin: 4px auto 6px auto;
        opacity: 0.8;
    }

    /* ── Stat-Bar mit Fullscreen-Button ── */
    .stat-bar-film {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        width: 100% !important;
        padding: 0 4px !important;
    }
    .stat-fs-btn {
        background: none;
        border: 1px solid rgba(255,255,255,0.3);
        color: rgba(255,255,255,0.6);
        width: 22px; height: 22px;
        border-radius: 5px;
        cursor: pointer;
        font-size: 0.7rem;
        display: flex; align-items: center; justify-content: center;
        transition: 0.2s;
        flex-shrink: 0;
    }
    .stat-fs-btn:hover { border-color: #06b6d4; color: #06b6d4; }
}

/* LINSEN ANIMATION */
.cat-lens-wrapper { 
    margin: 17px auto 20px auto; padding: 6px 20px; border-radius: 25px; background: rgba(255, 255, 255, 0.15); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 2px solid rgba(255, 255, 255, 0.4); 
    width: max-content; display: flex; align-items: center; justify-content: center; position: relative; 
    opacity: 1; transform: scale(1); pointer-events: none;
}
.cat-lens-wrapper.animate-lens {
    animation: lensGlowFade 3.5s cubic-bezier(0.1, 0.8, 0.3, 1) forwards;
}

@keyframes lensGlowFade {
    0% { opacity: 0; transform: scale(0.3) translateY(15px); filter: blur(10px); }
    40% { opacity: 1; transform: scale(1.4) translateY(0); filter: blur(0px); box-shadow: 0 0 40px rgba(0, 210, 255, 0.8); }
    100% { opacity: 1; transform: scale(1.2) translateY(0); filter: blur(0px); box-shadow: inset 0px -6px 12px rgba(0,0,0,0.3), inset 0px 6px 12px rgba(255,255,255,0.7), 0 5px 15px rgba(0,0,0,0.2); }
}

.cat-lens-wrapper::before { content: ""; position: absolute; top: 0%; left: 10%; width: 80%; height: 45%; background: linear-gradient(rgba(255,255,255,0.8), rgba(255,255,255,0)); border-radius: 50%; pointer-events: none; z-index: 2; }
.cat-lens-wrapper span { position: relative; z-index: 5; font-size: 0.8rem; font-weight: 900; text-transform: uppercase; letter-spacing: 2px; background: linear-gradient(to right, #9b59b6, #00d2ff, #ff7eb3); -webkit-background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 0 6px rgba(0, 210, 255, 0.6)); white-space: nowrap !important; }
.music-cat-display,
.video-cat-display {
    position: relative; z-index: 5;
    font-size: 0.8rem; font-weight: 900;
    text-transform: uppercase; letter-spacing: 2px;
    background: linear-gradient(to right, #9b59b6, #00d2ff, #ff7eb3);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 6px rgba(0, 210, 255, 0.6));
}
.desktop-only-stat { display: flex; }
.desktop-only-stat { display: flex; }
.mix-toggle-wrapper { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.music-section .mix-toggle-wrapper { transform: translateY(4px); }
.video-section .mix-toggle-wrapper { transform: translateY(3px); }
.mix-toggle { width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0; background: radial-gradient(circle at 30% 30%, rgba(231,76,60,0.8), rgba(200,0,0,0.4)); border: 1px solid rgba(255,255,255,0.8); box-shadow: inset 0 -2px 5px rgba(0,0,0,0.5), 0 0 8px rgba(231,76,60,0.6); cursor: pointer; transition: 0.3s; }
.mix-toggle.active { background: radial-gradient(circle at 30% 30%, rgba(46,204,113,1), rgba(0,150,0,0.5)); border-color: #fff; box-shadow: inset 0 -2px 5px rgba(0,0,0,0.5), 0 0 15px rgba(46,204,113,0.8); }
.mix-label { font-size: 0.75rem; font-weight: 900; letter-spacing: 1px; transition: 0.3s; text-shadow: 0 1px 3px rgba(0,0,0,0.8); }

#music-player { margin-top: auto; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 15px; transform: translateY(4px); }
#video-controls-container { margin-top: auto; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 15px; transform: translateY(8px); }
.silver-3d-glass { display: flex; align-items: center; justify-content: space-between; border-radius: 30px; box-sizing: border-box; background: linear-gradient(to bottom, rgba(255, 255, 255, 0.20) 0%, rgba(255, 255, 255, 0.05) 50%, rgba(200, 200, 210, 0.1) 100%); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); border-top: 1px solid rgba(255, 255, 255, 0.5); border-left: 1px solid rgba(255, 255, 255, 0.3); border-right: 1px solid rgba(255, 255, 255, 0.3); border-bottom: 1px solid rgba(0, 0, 0, 0.4); box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.5), 0 8px 20px rgba(0, 0, 0, 0.3); }

.glass-control-bar { padding: 0 20px; height: 50px; } 
.music-main-bar { width: 255px; max-width: 100%; margin: 0 auto; }
.volume-control-bar { padding: 0 15px; width: 180px; max-width: 100%; margin: 0 auto; height: 30px; justify-content: space-between; gap: 0; }
.video-main-bar { width: 225px; max-width: 100%; margin: 0 auto; padding: 0 25px; }
.turbo-control-bar { padding: 0 10px; width: auto; max-width: 100%; margin: 0 auto; height: 30px; justify-content: center; gap: 8px; white-space: nowrap; }
.control-btn { background: rgba(0,0,0,0.2); border: 1px solid rgba(255,255,255,0.4); color: white; width: 36px; height: 36px; border-radius: 50%; cursor: pointer; transition: 0.3s; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; box-shadow: inset 0 2px 4px rgba(255,255,255,0.2), 0 2px 5px rgba(0,0,0,0.4); }
.control-btn:hover { background: rgba(255,255,255,0.2); color: #ea580c; transform: scale(1.1); box-shadow: 0 0 15px rgba(234, 88, 12, 0.8); border-color: #fff; }

.volume-control-bar i { flex-shrink: 0; }
input[type="range"] { flex: 1; min-width: 0; margin: 0 15px; accent-color: #ea580c; cursor: pointer; height: 4px; border-radius: 5px; background: rgba(0,0,0,0.4); outline: none; box-shadow: inset 0 1px 3px rgba(0,0,0,0.5); }

.time-display { color: #fff; font-weight: bold; font-size: 0.85rem; width: 45px; text-align: right; text-shadow: 0 1px 3px rgba(0,0,0,0.8); }
.speed-display { font-weight: bold; font-size: 1rem; width: 100px; text-align: center; text-shadow: 0 1px 3px rgba(0,0,0,0.8); }
.speed-display-normal { color: #ea580c; }
.speed-display-turbo { color: #e74c3c; }

.speed-reset { background: none; border: none; color: rgba(255,255,255,0.7); font-size: 0.75rem; font-weight: bold; text-transform: uppercase; cursor: pointer; transition: 0.2s; padding: 0; text-shadow: 0 1px 2px rgba(0,0,0,0.8); }
.speed-reset:hover { color: #fff; }

/* MEGA BUTTON (FIBONACCI) */
@keyframes masterPulse { 0% { transform: scale(1); } 50% { transform: scale(1.09); } 100% { transform: scale(1); } }
.mega-btn { order: 1; width: clamp(100px, 10.5vw, 148px); height: clamp(100px, 10.5vw, 148px); border-radius: 50%; position: relative; margin: 3px 0 0 0; cursor: pointer; animation: masterPulse 4s infinite ease-in-out; transition: transform 0.3s; border: none; z-index: 100; background: url('logo.png') center/cover no-repeat; background-color: rgba(20,10,40,0.75); box-shadow: 0 18px 45px rgba(0,0,0,0.75), 0 8px 20px rgba(0,0,0,0.6), 0 0 0 3px rgba(255,255,255,0.08), inset 0 -6px 18px rgba(0,0,0,0.5); }
.mega-btn::before { content: ''; position: absolute; top: -8px; left: -8px; right: -8px; bottom: -8px; border-radius: 50%; z-index: -1; transition: 0.4s; background: linear-gradient(135deg, #f97316, #ec4899, #00d2ff); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; padding: 8px; filter: blur(4px); opacity: 0.95; box-shadow: 0 12px 35px rgba(0,0,0,0.6), 0 0 25px rgba(249,115,22,0.3); }
@media (hover: hover) {
    .mega-btn:hover { animation: none; transform: scale(1.05) ; }
    .mega-btn:hover::before { background: linear-gradient(135deg, #fff, #f97316, #00d2ff); opacity: 1; filter: blur(5px); }
    .mega-btn:hover::after { opacity: 1; bottom: -30px; }
}
#push-cta {
    position: absolute;
    top: -94px;
    left: 50%;
    transform: translateX(-50%) rotate(-2deg);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    pointer-events: none;
    z-index: 200;
    opacity: 1;
    transition: opacity 0.6s ease;
    animation: ctaBounce 2.2s ease-in-out infinite;
    transform-origin: center bottom;
}
#push-cta span {
    display: block;
    font-family: 'Montserrat', sans-serif;
    font-weight: 900;
    text-transform: uppercase;
    color: #fff;
    background: rgba(0,0,0,0.38);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 2.5px solid rgba(255,255,255,0.2);
    border-radius: 999px;
    padding: 4px 14px;
    white-space: nowrap;
    box-shadow:
        0 4px 0 rgba(0,0,0,0.9),
        0 8px 25px rgba(0,0,0,0.95),
        0 16px 40px rgba(0,0,0,0.8),
        0 0 18px rgba(249,115,22,0.5),
        0 0 35px rgba(236,72,153,0.3),
        inset 0 1px 0 rgba(255,255,255,0.15);
    text-shadow:
        0 0 10px rgba(249,115,22,1),
        0 0 22px rgba(236,72,153,0.9),
        0 3px 6px rgba(0,0,0,1),
        0 1px 2px rgba(0,0,0,1);
}
#push-cta span:first-child {
    font-size: clamp(0.6rem, 0.95vw, 0.78rem);
    letter-spacing: 2px;
    transform: rotate(1deg);
}
#push-cta span:last-child {
    font-size: clamp(0.72rem, 1.1vw, 0.92rem);
    letter-spacing: 3px;
    transform: rotate(-1deg);
    border-color: rgba(249,115,22,0.6);
    box-shadow:
        0 6px 20px rgba(0,0,0,0.7),
        0 0 18px rgba(249,115,22,0.7),
        0 0 35px rgba(236,72,153,0.4),
        inset 0 1px 0 rgba(255,255,255,0.2);
}
/* Kleiner Pfeil nach unten */
#push-cta::after {
    content: '▼';
    display: block;
    font-size: 0.6rem;
    color: rgba(255,255,255,0.5);
    text-shadow: 0 0 8px rgba(249,115,22,0.8);
    margin-top: 2px;
    animation: ctaArrow 1.1s ease-in-out infinite;
}
#push-cta.hidden {
    opacity: 0;
    pointer-events: none;
}
@keyframes ctaBounce {
    0%, 100% { transform: translateX(-50%) translateY(0px) rotate(-2deg); }
    30%       { transform: translateX(-50%) translateY(-6px) rotate(1.5deg); }
    60%       { transform: translateX(-50%) translateY(-3px) rotate(-1deg); }
}
@keyframes ctaArrow {
    0%, 100% { opacity: 0.5; transform: translateY(0); }
    50%       { opacity: 1;   transform: translateY(3px); }
}
@media (max-width: 780px) {
    #push-cta { top: -72px; }
    #push-cta span:first-child { font-size: 0.6rem; }
    #push-cta span:last-child  { font-size: 0.7rem; }
}
.mega-btn::after { content: "Master Fibonacci Mix"; position: absolute; bottom: 15px; left: 50%; transform: translateX(-50%); color: white; font-size: 1.2rem; font-weight: 800; opacity: 0.2; transition: opacity 1.5s ease, bottom 1.5s ease; pointer-events: none; white-space: nowrap; z-index: 50; text-shadow: 0 2px 8px rgba(0,0,0,0.9), 0 0 10px rgba(0,0,0,0.5); }
.mega-btn.label-out::after { opacity: 1; bottom: -30px; }

/* Fibonacci Button Click-Feedback */
@keyframes megaClickPulse {
    0% { transform: scale(1); box-shadow: 0 10px 30px rgba(0,0,0,0.5); }
    25% { transform: scale(0.88); box-shadow: 0 5px 15px rgba(0,0,0,0.3); }
    50% { transform: scale(1.12); box-shadow: 0 0 40px rgba(249,115,22,0.8), 0 0 60px rgba(236,72,153,0.5); }
    75% { transform: scale(1.02); box-shadow: 0 0 20px rgba(0,210,255,0.6); }
    100% { transform: scale(1); box-shadow: 0 10px 30px rgba(0,0,0,0.5); }
}
.mega-btn.mega-clicked,
#fs-fib-btn.mega-clicked {
    animation: megaClickPulse 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}
.mobile-side-left { order: 2; margin-top: 16px; margin-bottom: 0; }
.mobile-side-right { order: 3; margin-top: 15px; }

/* DESKTOP LINSEN-STERN (Favorit) */
.fav-wrapper { display: flex; flex-direction: column; align-items: center; gap: 8px; position: relative; }
.fav-wrapper::after { content: attr(data-tooltip); position: absolute; top: -15px; left: 50%; transform: translateX(-50%); color: white; font-size: 1.3rem; font-weight: 700; opacity: 0; transition: 0.2s; pointer-events: none; white-space: nowrap; z-index: 50; text-shadow: 0 2px 8px rgba(0,0,0,0.9), 0 0 10px rgba(0,0,0,0.5); }
.fav-wrapper:hover::after { opacity: 1; top: -25px; }

.fav-lens-btn {
    width: clamp(62px, 6.8vw, 88px); height: clamp(62px, 6.8vw, 88px); padding: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    background: rgba(255, 255, 255, 0.40); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border: 4px solid #1e3a8a !important; 
    box-shadow: inset 0px -6px 12px rgba(0,0,0,0.3), inset 0px 6px 12px rgba(255,255,255,0.5), 0 5px 15px rgba(0,0,0,0.2); 
    cursor: pointer; position: relative; transition: 0.3s; z-index: 100;
}
.fav-lens-btn::before {
    content: ""; position: absolute; top: 0%; left: 10%; width: 80%; height: 45%; 
    background: linear-gradient(rgba(255,255,255,0.8), rgba(255,255,255,0)); border-radius: 50%; pointer-events: none; z-index: 2;
}
.fav-lens-btn i {
    position: relative; 
    z-index: 5; 
    /* Größere Werte für Desktop: von 1.9rem-3.2rem auf 2.8rem-4.5rem */
    font-size: clamp(2.8rem, 4vw, 4.5rem); 
    color: #00d2ff; 
    -webkit-text-stroke: 1.5px #f97316; 
    filter: drop-shadow(0 0 8px rgba(0, 210, 255, 0.8)); 
    transition: 0.3s;
}
.fav-lens-btn:hover { transform: scale(1.05); }

/* DESKTOP MODE BUTTON */
.mode-switch-wrapper { display: flex; flex-direction: column; align-items: center; position: relative; z-index: 100; }
.mode-switch-wrapper::after { content: attr(data-tooltip); position: absolute; top: -15px; left: 50%; transform: translateX(-50%); color: white; font-size: 1.2rem; font-weight: 800; opacity: 0; transition: 0.2s; pointer-events: none; white-space: nowrap; z-index: 50; text-shadow: 0 2px 8px rgba(0,0,0,0.9), 0 0 10px rgba(0,0,0,0.5); }
.mode-switch-wrapper:hover::after { opacity: 1; top: -25px; }

.mode-switch-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; background: transparent; border: none; box-shadow: none; padding: 0; gap: 8px; cursor: pointer; z-index: 100; margin: 0; }

#mode-visual { 
    width: clamp(44px, 4.8vw, 62px); height: clamp(44px, 4.8vw, 62px); border-radius: 40%; display: flex; align-items: center; justify-content: center; transition: 0.3s; margin: 0 auto;
    position: relative;
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
#mode-visual::before {
    content: ""; position: absolute; top: 0%; left: 10%; width: 80%; height: 45%;
    background: linear-gradient(rgba(255,255,255,0.8), rgba(255,255,255,0)); border-radius: 50%; pointer-events: none; z-index: 2;
}
.mode-switch-btn:hover #mode-visual { transform: scale(1.05); }
#mode-label { font-weight:900; text-transform:uppercase; font-size:0.99rem; text-shadow: 0 1px 2px rgba(0,0,0,0.8); letter-spacing: 0.5px; text-align: center; width: auto; }

/* GLOBAL TOAST */
#toast-container {
    position: fixed;
    top: 50% !important; 
    left: 50% !important;
    bottom: auto !important; 
    transform: translate(-50%, -30%) scale(0.5);
    opacity: 0;
    background: rgba(10, 15, 30, 0.6);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 2px solid rgba(0, 210, 255, 0.6);
    box-shadow: 0 0 40px rgba(0, 210, 255, 0.4), 0 20px 60px rgba(0, 0, 0, 0.7);
    color: #fff;
    padding: 12px 24px;
    border-radius: 40px;
    font-weight: 900;
    font-size: 1.1rem; 
    text-transform: uppercase;
    letter-spacing: 3px;
    z-index: 100000;
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    pointer-events: none;
    white-space: nowrap;
}

#toast-container.show {
    transform: translate(-50%, -50%) scale(1.1);
    opacity: 1;
}

.star-particle {
    position: absolute; width: 8px; height: 8px; background: #fff; border-radius: 50%;
    pointer-events: none; box-shadow: 0 0 10px #fff, 0 0 20px #00d2ff, 0 0 30px #00d2ff;
    z-index: 100000; animation: explode 1.2s cubic-bezier(0.1, 0.8, 0.3, 1) forwards;
}
@keyframes explode {
    0% { transform: translate(0, 0) scale(1.5); opacity: 1; }
    100% { transform: translate(var(--tx), var(--ty)) scale(0); opacity: 0; }
}

/* ==========================================
   VIDEO SCREEN DETAILS
========================================== */
.video-wrapper { width: 100%; aspect-ratio: 16 / 9; border-radius: 20px; overflow: hidden; background-color: #000; position: relative; box-shadow: inset 0 0 20px rgba(0,0,0,1); }
.video-wrapper video { width: 100%; height: 100%; display: block; border-radius: 20px; margin: 0; object-fit: contain; position: absolute; top: 0; left: 0; overflow: hidden; }

.video-wrapper::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    border-radius: 20px;
    padding: 2px; 
    background: linear-gradient(90deg, #ff6b6b, #feca57, #fcfc54, #1dd1a1, #48dbfb, #a29bfe, #ff6b6b);
    background-size: 200% 100%;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    opacity: 0.6; 
    z-index: 10;
    animation: flowRainbow 6s linear infinite;
}

@keyframes flowRainbow {
    0% { background-position: 0% 50%; }
    100% { background-position: 200% 50%; }
}

/* ==========================================
   FULLSCREEN BUTTON
========================================== */
.cosmic-fs-btn { position: relative; margin-top: 25px; width: max-content; margin-inline: auto; padding: 10px 30px; font-size: 1.1rem; color: #fff; font-weight: 800; cursor: pointer; background: rgba(10, 15, 30, 0.4); backdrop-filter: blur(12px); border-radius: 30px; border: 1px solid rgba(255, 255, 255, 0.3); box-shadow: inset 0px -4px 10px rgba(0,0,0,0.4), inset 0px 4px 10px rgba(255,255,255,0.4), 0 4px 15px rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center; gap: 10px; transition: all 0.3s ease; }
.cosmic-fs-btn:hover { transform: scale(1.05); border-color: #fff; box-shadow: inset 0px -4px 10px rgba(0,0,0,0.4), inset 0px 4px 10px rgba(255,255,255,0.8), 0 0 20px rgba(255,255,255,0.5); text-shadow: 0 0 8px rgba(255,255,255,0.8); }

/* ==========================================
   MODALS & FULLSCREEN
========================================== */
.info-modal-overlay { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0,0,0,0.6); z-index: 100005 !important; display: none; justify-content: center; align-items: center; opacity: 0; transition: opacity 0.3s ease; backdrop-filter: blur(15px); }
.info-modal-show { display: flex !important; }
.info-modal-fade-in { opacity: 1 !important; }

.info-modal-box { background: rgba(40, 45, 60, 0.9); border: 1px solid rgba(255,255,255,0.4); border-radius: 30px; padding: clamp(20px, 5vw, 40px); max-width: 600px; width: 90%; max-height: 85vh; overflow-y: auto; box-shadow: 0 20px 50px rgba(0,0,0,0.6); transform: translateY(20px); transition: transform 0.3s ease; text-align: center; }
.info-modal-box h3 { margin-top: 0; font-size: clamp(1.4rem, 4vw, 2rem); color: #00d2ff; margin-bottom: clamp(10px, 2vw, 20px); font-weight: 900; text-shadow: 0 0 10px rgba(0,210,255,0.5); }
.info-modal-box p { font-size: clamp(0.85rem, 2vw, 1rem); line-height: 1.4; margin-bottom: clamp(8px, 2vw, 20px); color: #fff; text-align: left; }
.close-info-btn { background: linear-gradient(135deg, #f97316 0%, #ec4899 100%); border: none; color: #fff; padding: clamp(10px, 2vw, 12px) clamp(20px, 4vw, 30px); border-radius: 30px; font-weight: 800; cursor: pointer; transition: 0.3s; font-size: clamp(0.9rem, 2vw, 1.1rem); margin-top: clamp(5px, 2vw, 15px); box-shadow: 0 4px 15px rgba(236, 72, 153, 0.6); }
.close-info-btn:hover { transform: scale(1.05); }

/* Zeile 415 — #cinema-wrapper */
#cinema-wrapper {
    position: relative;
    width: 96%;
    max-width: 1680px;
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    gap: 0;
    align-self: center;
}

#cinema-wrapper.is-fullscreen { background-color: #000; display: flex; flex-direction: column; justify-content: center; align-items: center; }
#cinema-wrapper.is-fullscreen #radio-ui { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.95); z-index: 9999; width: 95%; max-width: 1300px; opacity: 0; pointer-events: none; margin: 0 !important; transition: opacity 0.5s ease, transform 0.5s ease; box-shadow: 0 40px 100px rgba(0,0,0,0.9); }
#cinema-wrapper.is-fullscreen .video-wrapper { border-radius: 0 !important; border: none !important; margin: 0 !important; height: 100% !important; width: 100vw !important; max-width: 100vw !important; aspect-ratio: auto !important; background-color: #000 !important; }
#cinema-wrapper.is-fullscreen .video-wrapper::after { display: none !important; }
#cinema-wrapper.is-fullscreen #video-ui::before { display: none !important; }
#cinema-wrapper.is-fullscreen #page-scaler { display: none !important; }
/* #video-ui existiert nicht mehr — mini-video-screen übernimmt */
#cinema-wrapper.is-fullscreen #mini-video-screen { position: fixed !important; inset: 0 !important; width: 100vw !important; height: 100vh !important; max-width: none !important; border-radius: 0 !important; border: none !important; box-shadow: none !important; margin: 0 !important; z-index: 1 !important; aspect-ratio: unset !important; }
#cinema-wrapper.is-fullscreen #mini-video-screen .video-wrapper { height: 100% !important; width: 100% !important; aspect-ratio: unset !important; border-radius: 0 !important; box-shadow: none !important; }
#cinema-wrapper.is-fullscreen #mini-video-screen video { width: 100% !important; height: 100% !important; object-fit: contain !important; border-radius: 0 !important; position: absolute !important; top: 0 !important; left: 0 !important; }
#cinema-wrapper.is-fullscreen.show-controls #mini-video-screen .mini-video-hover-controls { opacity: 1; }
#cinema-wrapper.is-fullscreen video { border-radius: 0 !important; width: 100vw !important; height: 100vh !important; object-fit: contain !important; background-color: #000 !important; }
#cinema-wrapper.is-fullscreen #fullscreen-btn { display: none; }

.exit-fs-btn { position: absolute; top: 30px; right: 40px; z-index: 10000; padding: 12px 25px; border-radius: 30px; border: 1px solid rgba(255,255,255,0.5); background: rgba(0,0,0,0.6); color: #fff; font-weight: 800; cursor: pointer; font-size: 1rem; display: none; transition: 0.3s; backdrop-filter: blur(10px); }
.exit-fs-btn:hover { background: rgba(255,255,255,0.3); border-color: #fff; }
#cinema-wrapper.is-fullscreen .exit-fs-btn { display: flex; align-items: center; gap: 8px; opacity: 0; pointer-events: none; transition: opacity 0.5s ease; }
#cinema-wrapper.is-fullscreen.show-controls #radio-ui { opacity: 0 !important; pointer-events: none !important; }
#cinema-wrapper.is-fullscreen.show-controls .exit-fs-btn { opacity: 0.95; pointer-events: auto; transform: none; }

/* fs-fib-btn — großer Fibonacci Button über dem Overlay */
#fs-fib-btn { position: fixed; bottom: 440px; left: 50%; transform: translateX(-50%); z-index: 99999; width: 100px; height: 100px; border-radius: 50%; background: url('logo.png') center/cover no-repeat; background-color: rgba(20,10,40,0.75); border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 30px rgba(0,0,0,0.8), 0 0 0 2px rgba(255,255,255,0.1); opacity: 0; pointer-events: none; transition: opacity 0.4s ease, transform 0.3s; }
#fs-fib-btn::before { content: ''; position: absolute; top: -4px; left: -4px; right: -4px; bottom: -4px; border-radius: 50%; z-index: -1; transition: 0.4s; background: linear-gradient(135deg, #f97316, #ec4899, #00d2ff); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; padding: 4px; filter: blur(2px); opacity: 0.9; }
#cinema-wrapper.is-fullscreen.show-controls #fs-fib-btn { opacity: 0.9; pointer-events: auto; }
#fs-fib-btn:hover { transform: translateX(-50%) scale(1.05); box-shadow: 0 0 30px rgba(249,115,22,0.6); }

/* fs-mini-overlay — Fullscreen Control Bar */
#fs-mini-overlay { position: fixed; bottom: 332px; left: 50%; transform: translateX(-50%); z-index: 99999; display: flex; align-items: center; gap: 16px; padding: 18px 32px; background: rgba(5,5,16,0.82); border: 1px solid rgba(249,115,22,0.35); border-radius: 60px; backdrop-filter: blur(16px); opacity: 0; pointer-events: none; transition: opacity 0.4s ease; }
#cinema-wrapper.is-fullscreen.show-controls #fs-mini-overlay { opacity: 0.7; pointer-events: auto; }
.fs-ov-btn { background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.15); border-radius: 36px; color: #e2e8f0; font-size: 2rem; padding: 12px 22px; cursor: pointer; transition: background 0.2s, border-color 0.2s; display: flex; align-items: center; gap: 8px; }
.fs-ov-btn:hover { background: rgba(249,115,22,0.25); border-color: #f97316; }
.fs-ov-btn.active { background: rgba(249,115,22,0.3); border-color: #f97316; color: #f97316; }
.fs-ov-sep { width: 2px; height: 44px; background: rgba(255,255,255,0.2); margin: 0 6px; }
#fs-overlay-mode-label { font-size: 1.3rem; font-weight: 700; letter-spacing: 1px; }

@media (max-width: 780px) {
    #cinema-wrapper.is-fullscreen.show-controls #radio-ui { opacity: 0 !important; pointer-events: none !important; display: none !important; }

    /* Fix: Sticky Header und Navigation im Fullscreen komplett ausblenden, damit oben nichts hängen bleibt */
    body:has(#cinema-wrapper.is-fullscreen) #mobile-sticky-header,
    body:has(#cinema-wrapper.is-fullscreen) .top-nav { display: none !important; }

    /* Fullscreen Overlay & Button auf Mobile verkleinern und tiefer setzen */
    #fs-mini-overlay {
        bottom: 12vh !important;
        padding: 10px 12px !important;
        gap: 6px !important;
        border-radius: 40px !important;
        width: auto !important;
        max-width: 96% !important;
        justify-content: center !important;
        flex-wrap: nowrap !important;
        transform: translateX(-50%) !important; /* Scale entfernt, um 30% zu vergrößern */
        z-index: 100001 !important;
    }
    .fs-ov-btn {
        font-size: 1.1rem !important;
        width: 36px !important;
        height: 36px !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-shrink: 0 !important;
    }
    .fs-ov-sep {
        height: 22px !important;
        margin: 0 2px !important;
    }
    #fs-fib-btn {
        bottom: calc(12vh + 70px) !important; /* Etwas höher, wegen des größeren Menüs */
        width: 72px !important;
        height: 72px !important;
        z-index: 100002 !important;
        transform: translateX(-50%) scale(0.9) !important;
        /* WICHTIG: opacity und pointer-events hier entfernt, damit er nicht auf der Hauptebene klebt! */
    }
    #cinema-wrapper.is-fullscreen.show-controls #fs-fib-btn {
        opacity: 0.95 !important;
        pointer-events: auto !important;
    }
}

/* FIX: Handy im Querformat (Landscape Fullscreen).
   Breite ist > 780px, aber Höhe < 500px. Schützt davor, dass Desktop-Regeln greifen! */
@media (max-width: 950px) and (max-height: 500px) {
    #cinema-wrapper.is-fullscreen.show-controls #radio-ui { opacity: 0 !important; pointer-events: none !important; display: none !important; }
    body:has(#cinema-wrapper.is-fullscreen) #mobile-sticky-header,
    body:has(#cinema-wrapper.is-fullscreen) .top-nav { display: none !important; }

    #fs-mini-overlay {
        bottom: 12vh !important;
        padding: 10px 12px !important;
        gap: 6px !important;
        border-radius: 40px !important;
        width: auto !important;
        max-width: 96% !important;
        justify-content: center !important;
        flex-wrap: nowrap !important;
        transform: translateX(-50%) !important;
        z-index: 100001 !important;
    }
    .fs-ov-btn {
        font-size: 1.1rem !important;
        width: 36px !important;
        height: 36px !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-shrink: 0 !important;
    }
    .fs-ov-sep { height: 22px !important; margin: 0 2px !important; }

    #fs-fib-btn {
        bottom: calc(12vh + 70px) !important;
        width: 72px !important;
        height: 72px !important;
        z-index: 100002 !important;
        transform: translateX(-50%) scale(0.9) !important;
    }
    #cinema-wrapper.is-fullscreen.show-controls #fs-fib-btn {
        opacity: 0.95 !important;
        pointer-events: auto !important;
    }
}
#turbo-toggle { background: radial-gradient(circle at 30% 30%, rgba(46,204,113,1), rgba(0,150,0,0.5)); border-color: #fff; box-shadow: inset 0 -2px 5px rgba(0,0,0,0.5), 0 0 15px rgba(46,204,113,0.8); }
#turbo-toggle.active { background: radial-gradient(circle at 30% 30%, rgba(231,76,60,1), rgba(180,0,0,0.5)); border-color: #fff; box-shadow: inset 0 -2px 5px rgba(0,0,0,0.5), 0 0 15px rgba(231,76,60,0.8); }

/* ==========================================
   EXTRAHIERTE INLINE STYLES
========================================== */

/* Language Toggle */
.lang-container { display: flex; align-items: center; gap: 10px; }
.lang-text { font-weight: bold; font-size: 0.9rem; transition: 0.3s; cursor: pointer; }
.lang-en-active { color: #ea580c; }
.lang-de-inactive { color: rgba(255, 255, 255, 0.8); }
.lang-switch-btn { width: 40px; height: 20px; background: rgba(255, 255, 255, 0.5); border-radius: 15px; border: none; cursor: pointer; position: relative; }
.lang-switch-circle { width: 16px; height: 16px; background: #fff; border-radius: 50%; position: absolute; top: 2px; left: 2px; transition: 0.3s; }

/* Layout Adjustments */
.mt-10 { margin-top: 10px; }
.mt-5 { margin-top: 5px; }
.header-adjusted { margin-top: -10px; }
.flex-center { justify-content: center; }
.text-center { text-align: center; }

/* Section Content & Category Layouts */
.section-content-wrapper { width: 100%; display: flex; flex-direction: column; align-items: center; flex: 1; }
.video-category-layout { width: 85%; max-width: 380px; margin: -11px auto 10px auto; }

/* Labels & Icons */
.mix-label-on { color: #2ecc71; text-shadow: 0 0 5px rgba(46, 204, 113, 0.5); }
.mix-label-off { color: #e74c3c; text-shadow: none; }
.vol-icon { color: #ea580c; }
.fav-star-icon { color: #00d2ff; text-shadow: 0 0 5px rgba(0, 210, 255, 0.8); }

/* Video Controls & Turbo */
.square-ctrl-btn { width: 30px; height: 30px; }
.speed-flex-display { flex: 1; }
.control-divider { width: 1px; height: 16px; background: rgba(255, 255, 255, 0.2); margin-left: 5px; margin-right: 5px; }
.turbo-bar-adjusted { justify-content: center; gap: 15px; }
.turbo-text { font-weight: 800; color: #fff; font-size: 0.8rem; letter-spacing: 1px; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8); }

/* Fullscreen Speed Display */
.fs-speed-display-text { color: #fff; font-weight: 900; font-size: 1.1rem; width: 50px; text-align: center; }
.fs-speed-display-normal { color: #fff; }
.fs-speed-display-turbo { color: #2ecc71; }

/* Stat Box Adjustments */
.stat-box-right-adjusted { right: 38px; }

/* Video Elements Transition */
.video-layer { transition: opacity 1.5s ease-in-out; }
.active-video { opacity: 1; z-index: 2; }
.inactive-video { opacity: 0; z-index: 1; }

/* JS MODE SWITCH CLASSES */
.mode-dj { background: rgba(234, 88, 12, 0.15); box-shadow: inset 0px -6px 12px rgba(0,0,0,0.3), inset 0px 6px 12px rgba(255,255,255,0.7), 0 4px 15px rgba(234,88,12,0.3); border: 2px solid rgba(234,88,12,0.4); }
.mode-dj i { color: #ea580c; filter: drop-shadow(0 0 8px rgba(234,88,12,0.8)); font-size: 1.8rem; }

.mode-album { background: rgba(46, 204, 113, 0.15); box-shadow: inset 0px -6px 12px rgba(0,0,0,0.3), inset 0px 6px 12px rgba(255,255,255,0.7), 0 4px 15px rgba(46,204,113,0.3); border: 2px solid rgba(46,204,113,0.4); }
.mode-album i { color: #111; filter: drop-shadow(0 0 5px rgba(255,255,255,0.4)); font-size: 2.2rem; }

.mode-fav { background: rgba(0, 210, 255, 0.15); box-shadow: inset 0px -6px 12px rgba(0,0,0,0.3), inset 0px 6px 12px rgba(255,255,255,0.7), 0 4px 15px rgba(0, 210, 255, 0.3); border: 4px solid #1e3a8a; }
.mode-fav i { color: #00d2ff; filter: drop-shadow(0 0 8px rgba(0, 210, 255, 0.8)); font-size: 1.8rem; }

/* ==========================================
   DONATION BOX
========================================== */
.donation-box {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
    background: rgba(10, 15, 30, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 15px; padding: 12px 10px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    text-align: center; backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px);
    z-index: 20;
}
.don-txt { font-size: 0.65rem; font-weight: 700; color: rgba(255,255,255,0.85); line-height: 1.3; font-style: italic; text-shadow: 0 1px 3px rgba(0,0,0,0.8); }
.don-btn {
    background: linear-gradient(rgba(249, 115, 22, 0.22), rgba(249, 115, 22, 0.22)) padding-box,
                linear-gradient(90deg, #ff6b6b, #feca57, #fcfc54, #1dd1a1, #48dbfb, #a29bfe, #ff6b6b) border-box;
    background-size: 200% 100%;
    animation: flowRainbow 6s linear infinite;
    border: 2px solid transparent;
    color: #fff; font-size: 0.72rem; font-weight: 800; text-transform: uppercase; text-decoration: none;
    padding: 5px 13px; border-radius: 20px; box-shadow: 0 4px 15px rgba(249, 115, 22, 0.2);
    transition: transform 0.3s, box-shadow 0.3s; white-space: nowrap;
}
.don-btn:hover { transform: scale(1.05); box-shadow: 0 6px 20px rgba(249, 115, 22, 0.6); color: #fff; }

.desktop-donation { position: absolute; left: 16px; bottom: 104px; width: max-content; max-width: 160px; padding: 10px 8px; }
.mobile-donation { display: none; }

/* ==========================================
   RESPONSIVE MEDIA QUERIES
========================================== */

/* ─── Info-btn in Panel ab 1150px ─── */
@media (max-width: 1150px) {
    .info-btn {
        right: 6px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        font-size: 1.7rem !important;
    }
    .section-inner-header { padding-right: 12px; }
}
/* ─── Zwischen Tablet/Desktop (780px–980px) ─── */
@media (min-width: 781px) and (max-width: 980px) {
    .portal-container {
        width: 96%;
        padding: clamp(8px, 1.5vw, 16px);
    }
    .cat-btn {
        width: clamp(44px, 5vw, 64px);
        height: clamp(44px, 5vw, 64px);
        font-size: clamp(1.6rem, 2.5vw, 2.8rem);
    }
    .mega-btn {
        width: clamp(90px, 10vw, 130px);
        height: clamp(90px, 10vw, 130px);
    }
    .fav-lens-btn {
        width: clamp(52px, 5.5vw, 72px);
        height: clamp(52px, 5.5vw, 72px);
    }
    .fav-lens-btn i {
        font-size: clamp(1.4rem, 2vw, 2.2rem);
    }
    #mode-visual {
        width: clamp(38px, 4.2vw, 54px);
        height: clamp(38px, 4.2vw, 54px);
    }
    .middle-master-container {
        width: clamp(130px, 15vw, 190px);
    }
    .music-main-bar { width: 200px; }
    .video-main-bar { width: 180px; }
}

/* ─── Tablet Landscape (max 980px) ─── */
@media (max-width: 980px) {
    .top-nav { padding: 0 16px; }
    .top-banner { margin: 56px auto 8px auto; }
    .portal-container { margin-bottom: 12px; }
}

/* ─── Tablet Portrait: 3 Spalten stapeln (max 780px) ─── */
@media (max-width: 780px) {
    #cinema-wrapper { width: 100% !important; }
    .fixed-bg-video { display: none !important; }
	#toast-container { font-size: 0.85rem !important; padding: 10px 18px !important; border-radius: 25px !important; }
	#toast-container { font-size: 0.85rem !important; padding: 10px 18px !important; border-radius: 25px !important; white-space: normal !important; text-align: center !important; max-width: 80vw !important; } 
  .top-nav { padding: 0 12px; height: 50px; z-index: 10002; }
    .nav-logo { height: 66px; }
    .back-btn { padding: 5px 10px; font-size: 0.67rem; }

    /* Banner komplett weg auf Mobile */
    .top-banner { display: none !important; }

    /* Mobile Sticky Header - Absolut fest */
    #mobile-sticky-header {
        display: flex !important;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        position: absolute !important;
        top: 55px !important;
        left: 0 !important;
        width: 100% !important;
        height: auto !important;
        padding: 10px 0 !important;
        z-index: 10 !important;
        background: rgba(0, 0, 0, 0.4) !important;
        backdrop-filter: blur(15px) !important;
        -webkit-backdrop-filter: blur(15px) !important;
        border-bottom: 1px solid rgba(255,255,255,0.2) !important;
    }

    #mobile-sticky-header .mob-title {
        font-size: 2.5rem;
        font-weight: 900;
        letter-spacing: 3px;
        text-transform: uppercase;
        background: linear-gradient(to right, #00d2ff, #3a7bd5, #9b59b6, #ff7eb3);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        -webkit-text-stroke: 1.5px #f1c40f;
        filter: drop-shadow(1px 2px 3px rgba(0,0,0,0.7));
        line-height: 1;
        white-space: nowrap;
    }

    #mobile-sticky-header .mob-subtitle {
        font-size: 0.68rem;
        font-weight: 800;
        color: #ea580c;
        letter-spacing: 2px;
        text-transform: uppercase;
        text-shadow: 0 0 8px rgba(234,88,12,0.5), 1px 1px 2px rgba(0,0,0,0.9);
        white-space: nowrap;
    }

    #mobile-sticky-header .mob-stats {
        display: flex;
        gap: 0;
        font-size: 0.75rem;
        font-weight: 800;
        color: #fff;
    }

    #mobile-sticky-header .mob-stats span {
        display: flex; align-items: center; gap: 4px;
        padding: 0 12px;
    }
    #mobile-sticky-header .mob-stats span + span {
        border-left: 1px solid rgba(255,255,255,0.35);
    }
    #mobile-sticky-header .mob-stats .s-music i { color: #ec4899; }
    #mobile-sticky-header .mob-stats .s-film i  { color: #00d2ff; }
    #mobile-sticky-header .mob-stats .s-fav i   { color: #f1c40f; }

    .portal-container {
        width: 100% !important;
        padding: 0px 8px !important;
        margin-top: 128px !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
    }
    /* Animierte bg-layer ausblenden */
    .portal-container .custom-bg-layer { display: none !important; }


/* Video-Screen auf Mobile zentrieren & animieren */
    #mini-video-screen {
        display: block !important;
        background: transparent !important;
        border-radius: 18px !important;
        overflow: hidden !important;
        width: 100% !important; /* volle Breite */
        margin: 0 !important;
        padding: 0 !important;
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) scale(0.8) !important;
        z-index: -1 !important; /* Hinter der Fibonacci-Reihe */
        opacity: 0;
        pointer-events: none;
        transition: opacity 1.4s ease, transform 1.4s cubic-bezier(0.22, 1, 0.36, 1) !important;
        will-change: transform, opacity;
    }

    body.mobile-playing #mini-video-screen {
        opacity: 1;
        pointer-events: auto;
        transform: translate(-50%, -50%) scale(1) !important;
        z-index: 5 !important;
        padding-top: 12px !important;
        padding-bottom: 12px !important;
    }

   /* Boxen machen butterweich Platz */
    .music-section, .video-section {
        transition: transform 1.4s cubic-bezier(0.22, 1, 0.36, 1) !important;
        will-change: transform;
    }
    body.mobile-playing .player-section {
        margin-top: 17px !important;
        margin-bottom: 17px !important;
    }
    body.mobile-playing .music-section {
        transform: translateY(-30px) !important; /* +12px Abstand nach oben */
    }
    body.mobile-playing .video-section {
        transform: translateY(30px) !important; /* +12px Abstand nach unten */
    }

    /* UI Fade-Out nach 6 Sekunden */
    .mega-btn, .mobile-side-left, .mobile-side-right, #push-cta {
        transition: opacity 0.6s ease, transform 0.6s ease !important;
    }
    body.hide-mobile-ui .mega-btn,
    body.hide-mobile-ui .mobile-side-left,
    body.hide-mobile-ui .mobile-side-right,
    body.hide-mobile-ui #push-cta {
        opacity: 0 !important;
        pointer-events: none !important;
    }
    /* Fixierter Mobile Hintergrund */
    .mobile-bg-fix {
        display: block !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        background-image: url('background3.jpg') !important;
        background-size: cover !important;
        background-position: center top !important;
        z-index: 0 !important;
        pointer-events: none !important;
    }    /* 3 Spalten → stapeln */
.section-layout {
        flex-direction: column !important;
        gap: 7px !important;
        align-items: stretch !important;
    }
    .section-layout .music-section { transform: none !important; }
    .section-layout .video-section { transform: none !important; }
    .player-section {
        width: calc(100% - 16px) !important; /* 8px Space rechts/links weniger */
        margin: 0 auto !important;
        flex: none !important;
        min-height: 0 !important;
        padding: 0px 14px 8px 14px !important;
        margin-top: 2px !important;
        margin-bottom: 2px !important;
        border-radius: 18px !important;
        background: rgba(10, 15, 30, 0.3) !important;
    }
    .player-section #music-player { transform: translateY(15px) !important; }
    .player-section #video-controls-container { transform: none !important; }
    .video-section { padding-bottom: 10px !important; margin-bottom: 0 !important; }
    .player-section .video-main-bar { display: none !important; }
    .player-section .volume-control-bar { display: none !important; }
    footer { margin-top: 0 !important; padding: 15px 10px 25px 10px !important; border-top: none !important; opacity: 0.6; }
    footer p, footer nav { margin: 4px 0 !important; }
    .player-section .turbo-control-bar { height: auto !important; width: auto !important; max-width: none !important; }
    .player-section .music-main-bar { height: 40px !important; padding: 0 15px !important; }/* Kategorie-Buttons Mobile */
    .music-section .cat-btn { width: 92px !important; height: 92px !important; font-size: 4.4rem !important; }
    .video-section .cat-btn { width: 110px !important; height: 110px !important; font-size: 4.8rem !important; }
    .category-btns {
        min-height: auto !important;
        gap: 30px !important;
        flex-wrap: nowrap;
        justify-content: center !important;
        align-items: flex-end !important;
        margin-top: 4px !important;
    }
    .video-section .category-btns { gap: 35px !important; }
    .cat-wrapper { gap: 10px !important; }

    #music-lens-desktop { display: none !important; }

    .cat-lens-wrapper {
        display: flex !important;
        margin: 0 !important;
        padding: 6px 14px !important;
        transform: scale(1.05) !important;
        border-radius: 25px !important;
        flex-shrink: 0 !important;
        min-width: max-content !important;
        white-space: nowrap !important;
    }

    .cat-lens-wrapper::before {
        border-radius: 12px 12px 0 0 !important;
        width: 90% !important;
        left: 5% !important;
        height: 40% !important;
    }

    .video-section .cat-btn {
        width: clamp(75px, 22vw, 95px) !important;
        height: clamp(75px, 22vw, 95px) !important;
        font-size: clamp(3.6rem, 12vw, 4.6rem) !important;
        margin-bottom: 0 !important;
    }

    /* Play-Button + Lens-Badge + Fullscreen nebeneinander */
    .music-play-lens-row {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 12px !important;
        margin: 8px auto 0 auto !important;
        width: 100% !important;
        padding: 0 10px !important;
    }
    .music-play-lens-row #mobile-play-btn {
        order: 2 !important;
        flex-shrink: 0 !important;
    }
    .music-play-lens-row .cat-lens-wrapper {
        order: 1 !important;
        flex-shrink: 0 !important;
        margin: 0 !important;
    }
    .music-play-lens-row #fullscreen-btn {
        order: 3 !important;
        flex-shrink: 0 !important;
        margin: 0 0 8px 0 !important;
    }

    /* Play/Pause-Button auf Mobile — größer, mittig */
    #mobile-play-btn.music-play-big-btn {
        width: 38px !important;
        height: 38px !important;
        font-size: 1.5rem !important;
        flex-shrink: 0 !important;
        border-radius: 50% !important;
        border: 1.5px solid #00d2ff !important;
        box-shadow: 0 0 8px rgba(0,210,255,0.5) !important;
    }

    /* Inline Fullscreen + Back + Turbo — rainbow border */
    .back-btn,
    .mobile-fs-inline-btn,
    .turbo-control-bar {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: linear-gradient(rgba(10,15,30,0.2), rgba(10,15,30,0.2)) padding-box, linear-gradient(90deg, #ff6b6b, #feca57, #1dd1a1, #48dbfb, #a29bfe, #ff6b6b) border-box !important;
        border: 2px solid transparent !important;
        box-shadow: 0 4px 15px rgba(0,0,0,0.5) !important;
        border-radius: 30px !important;
        font-size: 0.8rem !important;
        padding: 6px 16px !important;
        color: #fff !important;
        text-transform: uppercase !important;
        font-weight: 800 !important;
        height: auto !important;
        position: relative !important;
    }
    #turbo-toggle {
        position: absolute !important;
        top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important;
        opacity: 0 !important;
        z-index: 5 !important;
        cursor: pointer !important;
    }
    .turbo-control-bar span { font-size: 0 !important; }
    .turbo-control-bar span::after {
        content: "TURBO";
        font-size: 0.8rem;
        letter-spacing: 1px;
        transition: color 0.3s, text-shadow 0.3s;
    }
    .mobile-fs-inline-btn {
        padding: 5px 11px !important;
        font-size: 0.72rem !important;
        position: relative !important;
        top: 5px !important;
        transform: scale(1.1) !important;
    }
    .mobile-fs-inline-btn i { display: none !important; }

    /* Touch Feedback (Active States) */
    .music-play-big-btn:active, .mobile-fs-inline-btn:active, .turbo-control-bar:active, .back-btn:active, .cat-btn:active, .fav-lens-btn:active {
        transform: scale(0.92) !important;
        opacity: 0.8 !important;
        transition: transform 0.1s, opacity 0.1s !important;
    }

    /* Turbo Active State (RED) */
    .turbo-control-bar:has(#turbo-toggle.active) {
        background: linear-gradient(rgba(40,10,10,0.8), rgba(40,10,10,0.8)) padding-box, linear-gradient(90deg, #ff4d4d, #c0392b, #ff4d4d) border-box !important;
        box-shadow: 0 4px 15px rgba(255,0,0,0.5) !important;
    }
    .turbo-control-bar:has(#turbo-toggle.active) span::after {
        color: #ff4d4d !important;
        text-shadow: 0 0 8px rgba(255,0,0,0.8) !important;
    }

    .video-section .section-content-wrapper {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        justify-content: center !important;
        padding-bottom: 0 !important;
        position: relative !important;
    }

    .video-section .category-btns {
        width: 100% !important;
    }

    #video-lens {
        position: static !important;
        transform: scale(1.05) !important;
        flex-shrink: 0 !important;
        margin: 8px 0 0 0 !important;
    }

    .video-section #video-controls-container,
    #video-controls-container {
        position: static !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        margin: 8px 0 0 25px !important;
        width: auto !important;
        transform: none !important;
        flex-shrink: 0 !important;
    }
    .video-main-bar { display: none !important; }
    .volume-control-bar { display: none !important; }

    #music-player { padding: 0 25px !important; }
    /* Middle: FAV links | MEGA mitte | MODE rechts */
 	   .middle-master-container {
        width: 100% !important;
        flex-direction: row !important;
        justify-content: space-around !important;
        align-items: center !important;
        align-self: auto !important;
        gap: 4px !important;
        padding: 6px 8px !important;
        margin-top: 0 !important;
    }

	.mobile-side-left  { order: 1 !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; margin-top: 28px !important; }
    .mega-btn          { order: 2 !important; width: 140px !important; height: 140px !important; margin: -29px !important; }
    .mobile-side-right { order: 3 !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; margin-top: 28px !important; }
    .fav-lens-btn { width: 64px !important; height: 64px !important; }
    .fav-lens-btn i { position: relative; z-index: 5; font-size: 2.2rem !important; color: #00d2ff; -webkit-text-stroke: 1.5px #f97316; filter: drop-shadow(0 0 8px rgba(0, 210, 255, 0.8)); transition: 0.3s; }
  .mobile-side-left .fav-label { display: block !important; font-size: 0.65rem !important; font-weight: 900 !important; letter-spacing: 1px; text-align: center; margin-top: 5px; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,0.8); }
    .mobile-side-right .fav-label { display: none !important; }

    #mode-visual { width: 64px !important; height: 64px !important; }
    #mode-label  { display: block !important; font-size: 0.78rem !important; margin-top: 5px !important; text-align: center !important; }
    h2 { font-size: clamp(1.5rem, 5.5vw, 2.2rem) !important; white-space: normal !important; transform: scale(1.22); transform-origin: center bottom; position: relative !important; top: 7px !important; z-index: 10 !important; }

    .info-btn { position: absolute !important; right: 10px !important; top: 50% !important; transform: translateY(-50%) !important; font-size: 2rem !important; color: #f97316 !important; filter: drop-shadow(0 0 6px rgba(249,115,22,0.8)) !important; }
    .section-inner-header {
        padding-left: 8px !important;
        padding-right: 8px !important;
        padding-top: 3px !important;
        padding-bottom: 10px !important;
        margin-bottom: 13px !important;
        justify-content: center !important;
    }
    .desktop-only { display: none !important; }
    .desktop-only-stat { display: none !important; }

    .section-stat-box { display: none !important; }
    .music-section .track-stat { right: 10px; }
    .music-section .fav-stat-box { left: 10px; }
    .video-section .section-stat-box { right: 10px; }
   .cosmic-fs-btn { font-size: 0.85rem; padding: 7px 16px; margin-top: 10px; margin-bottom: 20px; }

    /* Mobile Donation Box Schaltung */
    .desktop-donation { display: none !important; }
    .mobile-donation {
        display: flex !important;
        margin: -4px auto 10px auto !important;
        padding: 0 !important;
        gap: 6px !important;
        width: 100% !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
    .mobile-donation .don-txt { font-size: 0.65rem !important; line-height: 1.2 !important; margin-bottom: 2px !important; }
    .mobile-donation .don-btn { font-size: 0.65rem !important; padding: 5px 12px !important; margin-bottom: 2px !important; }

    /* Lotus auf Mobile wieder vergrößert (ca. 35% größer als vorher) */
    .player-section::after { background-size: 68% !important; }

@media (max-width: 600px) {
    .music-section .cat-btn { width: clamp(68px, 19vw, 85px) !important; height: clamp(68px, 19vw, 85px) !important; font-size: clamp(3.2rem, 11vw, 4.2rem) !important; }
    .video-section .cat-btn { width: clamp(75px, 22vw, 95px) !important; height: clamp(75px, 22vw, 95px) !important; font-size: clamp(3.6rem, 12vw, 4.6rem) !important; }
    .category-btns { gap: clamp(8px, 3vw, 15px) !important; }
    .mega-btn { width: 115px !important; height: 115px !important; margin: -10px !important; }
    .fav-lens-btn { width: 75px !important; height: 75px !important; }
    #mode-visual { width: 58px !important; height: 58px !important; }
    #mobile-sticky-header .mob-title { font-size: 1.85rem !important; letter-spacing: 3px !important; }
}