/* ==========================================================================
   STANDARD (DESKTOP): Mobiles Menü & Button komplett ausblenden
   ========================================================================== */
.wls-mobile-menu-toggle,
.wls-mobile-overlay,
.wls-mobile-toggle {
    display: none !important;
}


/* ==========================================================================
   MOBIL-ANSICHT (Unter 1024px)
   ========================================================================== */
@media (max-width: 1024px) {

    /* Mobilen Burger-Button anzeigen & viereckig gestalten */
    .wls-mobile-toggle,
    .wls-mobile-menu-toggle {
        display: flex !important;
        align-items: center;
        justify-content: center;
        background: transparent !important;
        border: 2px solid #ffffff !important; /* Viereckiger Rahmen */
        border-radius: 4px !important;       /* Leicht abgerundete Ecken (optional) */
        color: #ffffff !important;
        font-size: 1.6rem !important;
        width: 42px !important;
        height: 42px !important;
        cursor: pointer;
        padding: 0 !important;
        box-sizing: border-box;
        z-index: 100000;
    }

    /* Desktop-Menü standardmäßig auf Mobilgeräten als Overlay verstecken */
    .wls-main-nav {
        display: none;
    }

    /* Wenn das Menü aktiv ist (durch JS-Klasse .active) */
    .wls-main-nav.active {
        display: block !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        background: var(--primary-color, #d60000) !important;
        z-index: 99999 !important;
        padding: 60px 20px 20px 20px !important;
        box-sizing: border-box !important;
        overflow-y: auto !important;
    }

    /* Hauptmenü-Liste im aktiven Overlay */
    .wls-main-nav.active ul {
        display: flex !important;
        flex-direction: column !important;
        gap: 15px !important;
        list-style: none;
        padding: 0;
        margin: 0;
        text-align: center;
    }

    /* Hauptmenü-Listenelemente */
    .wls-main-nav.active ul li {
        width: 100%;
        text-align: center;
    }

    /* Hauptmenü-Links */
    .wls-main-nav.active ul li a {
        color: #ffffff !important;
        font-size: 1.3rem !important;
        font-weight: 700;
        text-decoration: none;
        display: block;
        padding: 8px;
    }

    /* ==========================================================================
       UNTERMENÜS: DICKES PLUS (+) UND MINUS (–)
       ========================================================================== */

    /* Standardmäßig ein dickes Plus-Zeichen anzeigen */
    .wls-main-nav.active ul li.menu-item-has-children > a::after {
        content: " +";
        font-size: 1.4rem !important;
        font-weight: 900 !important;
        margin-left: 8px;
        vertical-align: middle;
    }

    /* Wenn das Untermenü geöffnet ist (.toggled), wechselt es zu einem Minus (–) */
    .wls-main-nav.active ul li.menu-item-has-children.toggled > a::after {
        content: " –";
    }
    
    /* Standardmäßig im mobilen Overlay eingeklappt */
    .wls-main-nav.active ul .sub-menu {
        display: none !important;
        position: static !important;
        background: rgba(0, 0, 0, 0.2) !important;
        box-shadow: none !important;
        margin: 5px 0 0 0 !important;
        padding-left: 0 !important;
        border-radius: 6px;
        list-style: none;
        width: 100%;
        box-sizing: border-box !important;
    }

    /* Wenn der Menüpunkt angeklickt wurde (.toggled), Untermenü einblenden */
    .wls-main-nav.active ul li.toggled > .sub-menu {
        display: block !important;
    }

    /* Untermenü-Punkte stylen */
    .wls-main-nav.active ul .sub-menu li a {
        font-size: 1.1rem !important;
        font-weight: 400 !important;
        padding: 8px 10px !important;
        color: #ffffff !important;
        opacity: 0.9;
    }
}

@media (max-width: 1024px) {

    /* ==========================================================================
       1. VIERECKIGES HAMBURGER-ICON
       ========================================================================== */
    .wls-mobile-toggle,
    .wls-mobile-menu-toggle {
        display: flex !important;
        align-items: center;
        justify-content: center;
        background: transparent !important;
        border: 2px solid #ffffff !important; /* Rahmen für die Viereck-Optik */
        border-radius: 4px !important;       /* Leicht abgerundete Ecken (optional, für scharfe Ecken auf 0px setzen) */
        color: #ffffff !important;
        font-size: 1.6rem !important;
        width: 42px !important;
        height: 42px !important;
        cursor: pointer;
        padding: 0 !important;
        box-sizing: border-box;
        z-index: 100000;
    }


    /* ==========================================================================
       2. DICKES PLUS (+) ANSTATT PFEIL FÜR UNTERMENÜS
       ========================================================================== */
    
    /* Standardmäßig ein dickes Plus-Zeichen anzeigen */
    .wls-main-nav.active ul li.menu-item-has-children > a::after {
        content: " +";
        font-size: 1.4rem;
        font-weight: 900;
        margin-left: 8px;
        vertical-align: middle;
    }

    /* Wenn das Untermenü geöffnet ist (.toggled), wechselt das Plus zu einem Minus (-) */
    .wls-main-nav.active ul li.menu-item-has-children.toggled > a::after {
        content: " –";
    }

    /* Untermenüs im mobilen Overlay */
    .wls-main-nav.active ul .sub-menu {
        display: none !important;
        position: static !important;
        background: rgba(0, 0, 0, 0.2) !important;
        box-shadow: none !important;
        margin: 5px 0 0 0 !important;
        padding-left: 0 !important;
        border-radius: 6px;
        list-style: none;
        width: 100%;
        box-sizing: border-box !important;
    }

    /* Einblenden bei .toggled */
    .wls-main-nav.active ul li.toggled > .sub-menu {
        display: block !important;
    }
}

/* ==========================================================================
   FINAL FIX: PLAYER-BOX GEGEN AUFPLATZEN BEI LANGEN TITELN SICHERN
   ========================================================================== */

/* 1. Haupt-Player-Box im Flex-Layout absichern */
.wls-hero-player-box {
    box-sizing: border-box !important;
    overflow: hidden !important;
}

/* 2. Track-Info Bereich als Flex-Container zwingen, den Überlauf zu begrenzen */
.wls-player-track-info {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}

/* 3. Text-Container muss min-width: 0 haben, damit Flexbox Text abkürzen darf */
.wls-track-text {
    flex: 1 !important;
    min-width: 0 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

/* 4. Künstler und Songtitel rigoros einzeilig halten und mit '...' abkürzen */
#wls-artist-name,
#wls-song-title {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    width: 100% !important;
    display: block !important;
    box-sizing: border-box !important;
}

/* ==========================================================================
   MODERNES DESIGN FÜR DAS "NEUESTE KOMMENTARE"-WIDGET
   ========================================================================== */

/* Das Widget-Box-Layout in der Sidebar */
.widget_recent_comments {
    background: #ffffff !important;
    padding: 20px !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06) !important;
    margin-bottom: 30px !important;
}

/* Die Widget-Überschrift (Neueste Kommentare) */
.widget_recent_comments h3 {
    font-size: 1.1rem !important;
    font-weight: 800 !important;
    color: var(--primary-color, #d60000) !important;
    border-bottom: 2px solid var(--primary-color, #d60000) !important;
    padding-bottom: 8px !important;
    margin-bottom: 15px !important;
}

/* Liste der Kommentare im Widget */
.widget_recent_comments ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Einzelne Listeneinträge / Kommentar-Zeilen */
.widget_recent_comments ul li {
    padding: 10px 0 !important;
    border-bottom: 1px solid #f0f0f0 !important;
    font-size: 0.92rem !important;
    color: #444 !important;
    line-height: 1.4 !important;
}

/* Letzten Eintrag von der unteren Linie befreien */
.widget_recent_comments ul li:last-child {
    border-bottom: none !important;
    padding-bottom: 0 !important;
}

/* Verlinkungen (Autor und Beitragstitel) anpassen */
.widget_recent_comments ul li a {
    color: #222 !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    transition: color 0.2s ease !important;
}

/* Hover-Effekt für die Links */
.widget_recent_comments ul li a:hover {
    color: var(--primary-color, #d60000) !important;
}

/* Das Wort "zu" oder "on" etwas dezenter gestalten */
.widget_recent_comments .recentcomments {
    color: #666 !important;
}

/* ==========================================================================
   MODERNES DESIGN FÜR DEN KOMMENTARBEREICH
   ========================================================================== */

/* Äußerer Container des Kommentarbereichs */
#comments {
    background: #ffffff !important;
    padding: 30px !important;
    margin-top: 40px !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important;
    box-sizing: border-box;
}

/* Überschrift "Schreibe einen Kommentar" & "Beitrags-Kommentare" */
#comments .comments-title,
.comment-reply-title {
    font-size: 1.5rem !important;
    font-weight: 800 !important;
    color: var(--primary-color, #d60000) !important;
    margin-bottom: 15px !important;
}

/* Hinweistext anpassen */
.comment-notes, 
.logged-in-as {
    font-size: 0.95rem !important;
    color: #666 !important;
    margin-bottom: 20px !important;
}

/* Eingabefelder (Textarea und Input) stylen */
.comment-form-comment textarea,
.comment-form-author input,
.comment-form-email input,
.comment-form-url input {
    width: 100% !important;
    padding: 12px 15px !important;
    border: 2px solid #e0e0e0 !important;
    border-radius: 8px !important;
    background: #f9f9f9 !important;
    font-size: 1rem !important;
    font-family: inherit !important;
    box-sizing: border-box !important;
    transition: all 0.3s ease !important;
}

/* Fokus-Effekt für Felder (leuchtet im Farbton auf) */
.comment-form-comment textarea:focus,
.comment-form-author input:focus,
.comment-form-email input:focus,
.comment-form-url input:focus {
    border-color: var(--primary-color, #d60000) !important;
    background: #ffffff !important;
    outline: none !important;
    box-shadow: 0 0 8px rgba(214, 0, 0, 0.15) !important;
}

/* Label-Beschriftungen über oder neben den Feldern */
.comment-form label {
    font-weight: 600 !important;
    color: #444 !important;
    font-size: 0.95rem !important;
}

/* Checkbox für Cookie-Speicherung */
.comment-form-cookies-consent {
    margin: 15px 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.comment-form-cookies-consent input[type="checkbox"] {
    width: 18px !important;
    height: 18px !important;
    accent-color: var(--primary-color, #d60000) !important;
}

.comment-form-cookies-consent label {
    font-weight: 400 !important;
    font-size: 0.9rem !important;
    color: #555 !important;
}

/* ABSENDEN-BUTTON (Im stylischen Farbverlauf wie der Stream-Button) */
.comment-form .submit,
#submit {
    display: inline-block !important;
    background: linear-gradient(135deg, var(--primary-color, #d60000), #ff4b2b) !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 1rem !important;
    padding: 12px 25px !important;
    border: none !important;
    border-radius: 50px !important; /* Schöne runde Pillen-Form */
    cursor: pointer !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15) !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

.comment-form .submit:hover,
#submit:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25) !important;
}

/* Liste der abgegebenen Kommentare verschönern */
.comment-list {
    list-style: none !important;
    padding: 0 !important;
    margin-top: 30px !important;
}

.comment-list .comment {
    background: #fdfdfd !important;
    border: 1px solid #eee !important;
    border-radius: 8px !important;
    padding: 20px !important;
    margin-bottom: 20px !important;
}

.comment-list .comment-author {
    font-weight: 700 !important;
    color: #333 !important;
}

.comment-list .comment-meta {
    font-size: 0.85rem !important;
    color: #888 !important;
    margin-bottom: 10px !important;
}

/* ==========================================================================
   DESIGN FÜR DIE KÜNSTLER-TAGS UNTER BEITRÄGEN
   ========================================================================== */
.wls-post-tags {
    margin-top: 30px;
    padding-top: 15px;
    border-top: 1px solid #eee;
    font-size: 0.95rem;
    color: #555;
}

.wls-tags-label {
    font-weight: 700;
    color: var(--primary-color, #d60000);
    margin-right: 5px;
}

.wls-post-tags a {
    display: inline-block;
    background: #f2f2f2;
    color: #333;
    padding: 4px 12px;
    border-radius: 20px;
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 600;
    margin: 3px 4px 3px 0;
    transition: all 0.2s ease;
}

.wls-post-tags a:hover {
    background: var(--primary-color, #d60000);
    color: #ffffff;
}

/* ==========================================================================
   MODERNES DESIGN FÜR DIE TAG- & KATEGORIE-ARCHIVSEITEN
   ========================================================================== */

/* Hauptbereich des Archivs definieren */
.archive .site-main,
.tag .site-main,
.category .site-main {
    max-width: 1200px;
    margin: 40px auto;
    padding: 0 20px;
}

/* Archiv-Übersitel (z.B. "Beiträge mit Tag: ...") */
.archive .page-title,
.tag .archive-title {
    font-size: 2rem !important;
    font-weight: 800 !important;
    color: var(--primary-color, #d60000) !important;
    margin-bottom: 30px !important;
    padding-bottom: 15px !important;
    border-bottom: 3px solid var(--primary-color, #d60000) !important;
}

/* Die Liste / das Raster der Beiträge im Archiv */
.archive .site-main article,
.tag .site-main article {
    background: #ffffff !important;
    border-radius: 12px !important;
    padding: 25px !important;
    margin-bottom: 30px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06) !important;
    border: 1px solid #eee !important;
    transition: transform 0.25s ease, box-shadow 0.25s ease !important;
}

.archive .site-main article:hover,
.tag .site-main article:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1) !important;
}

/* Titel der Beiträge im Archiv */
.archive article h2.entry-title a,
.tag article h2.entry-title a {
    color: #222 !important;
    text-decoration: none !important;
    font-weight: 800 !important;
    font-size: 1.4rem !important;
    transition: color 0.2s ease !important;
}

.archive article h2.entry-title a:hover,
.tag article h2.entry-title a:hover {
    color: var(--primary-color, #d60000) !important;
}

/* Auszug / Textvorschau im Archiv */
.archive article .entry-summary,
.tag article .entry-summary {
    color: #555 !important;
    font-size: 1rem !important;
    line-height: 1.6 !important;
    margin-top: 12px !important;
}

/* ==========================================================================
   SCHÖNER BUNTER BALKEN FÜR KATEGORIE- & TAG-TITEL
   ========================================================================== */
.archive .page-title,
.category .page-title,
.tag .page-title,
.archive h1.entry-title,
.category h1.entry-title,
.tag h1.entry-title {
    display: block !important;
    text-align: center !important;
    color: #ffffff !important;
    background: linear-gradient(135deg, var(--primary-color, #d60000), #ff4b2b) !important;
    padding: 18px 20px !important;
    margin: 30px auto !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15) !important;
    font-size: 2rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px;
    width: 100%;
    box-sizing: border-box;
}

/* ==========================================================================
   3-SPALTEN GRID FÜR DIE KARTEN IM TAG-ARCHIV
   ========================================================================== */
.tag .site-main,
.archive.tag .site-main {
    max-width: 1300px !important;
    margin: 0 auto !important;
    padding: 0 20px 40px 20px !important;
}

.tag .wls-archive-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 30px !important;
    width: 100% !important;
}

/* Jede einzelne Beitrags-Karte */
.tag .wls-archive-card {
    background: #ffffff !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06) !important;
    border: 1px solid #eee !important;
    display: flex !important;
    flex-direction: column !important;
    transition: transform 0.25s ease, box-shadow 0.25s ease !important;
    margin: 0 !important;
    padding: 0 !important;
}

.tag .wls-archive-card:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12) !important;
}

/* Vorschaubild oben in der Karte */
.tag .wls-archive-thumb img {
    width: 100% !important;
    height: 220px !important;
    object-fit: cover !important;
    display: block !important;
}

/* Textbereich */
.tag .wls-archive-content {
    padding: 20px 20px 10px 20px !important;
    flex-grow: 1 !important;
}

.tag .wls-archive-content h2.entry-title {
    margin-top: 0 !important;
    margin-bottom: 12px !important;
    border: none !important;
    background: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    text-align: left !important;
}

.tag .wls-archive-content h2.entry-title a {
    color: #222 !important;
    font-size: 1.25rem !important;
    font-weight: 800 !important;
    text-decoration: none !important;
    line-height: 1.3 !important;
}

.tag .wls-archive-content h2.entry-title a:hover {
    color: var(--primary-color, #d60000) !important;
}

.tag .wls-archive-content .entry-summary {
    color: #555 !important;
    font-size: 0.95rem !important;
    line-height: 1.5 !important;
}

/* Weiterlesen-Button */
.tag .wls-archive-footer {
    padding: 0 20px 25px 20px !important;
}

.tag .wls-read-more-btn {
    display: inline-block !important;
    background: linear-gradient(135deg, var(--primary-color, #d60000), #ff4b2b) !important;
    color: #ffffff !important;
    padding: 8px 22px !important;
    border-radius: 50px !important;
    font-weight: 700 !important;
    font-size: 0.9rem !important;
    text-decoration: none !important;
    box-shadow: 0 4px 12px rgba(214, 0, 0, 0.2) !important;
    transition: all 0.2s ease !important;
}

.tag .wls-read-more-btn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 16px rgba(214, 0, 0, 0.3) !important;
    color: #ffffff !important;
}

/* Responsive Ansichten (Tablets & Smartphones) */
@media (max-width: 1024px) {
    .tag .wls-archive-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 768px) {
    .tag .wls-archive-grid {
        grid-template-columns: 1fr !important;
    }
}

/* Logo im Header vergrößern */
.site-branding img,
.custom-logo {
    max-height: 75px !important; /* Passe den Wert nach Wunsch an (z. B. 75px oder 90px) */
    width: auto !important;
}


/* =#########################################################################
   TABLET-VERSION: PERFEKTE ZENTRIERUNG DER GANZEN SEITE (KATEGORIE & TAG)
   ========================================================================== */
@media (max-width: 1024px) and (min-width: 769px) {
    
    /* Hauptcontainer zentrieren */
    .wls-category-main,
    .content-area,
    .site-main {
        width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
        box-sizing: border-box !important;
    }

    .wls-container {
        width: 100% !important;
        max-width: 760px !important; /* Passt sich ideal an Tablet-Breiten an */
        margin: 0 auto !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    /* Das Raster (Grid / Flexbox) für Tablets auf 2 Spalten zentrieren */
    .wls-news-grid,
    .wls-tag-flex-container {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important; /* Zentriert die Karten in der Zeile */
        gap: 20px !important;
        margin: 0 auto !important;
        width: 100% !important;
    }

    /* Kartenbreite für Tablets (2 Spalten, exakt eingepasst und zentriert) */
    .wls-news-grid .wls-news-card,
    .wls-tag-flex-container .wls-tag-card {
        width: calc(50% - 15px) !important;
        min-width: 320px !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }
}

/* Social Media Icons im Footer korrekt anzeigen und einfärben */
.wls-footer-socials .wls-social-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 45px !important;
    height: 45px !important;
    background-color: #ffffff !important;
    border-radius: 50% !important;
    text-decoration: none !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15) !important;
    margin: 0 8px !important;
}

/* Farben für die jeweiligen Social-Icons */
.wls-footer-socials .wls-social-btn.facebook i,
.wls-footer-socials .wls-social-btn.facebook svg {
    color: #1877f2 !important; /* Facebook Blau */
}

.wls-footer-socials .wls-social-btn.youtube i,
.wls-footer-socials .wls-social-btn.youtube svg {
    color: #ff0000 !important; /* YouTube Rot */
}

.wls-footer-socials .wls-social-btn.instagram i,
.wls-footer-socials .wls-social-btn.instagram svg {
    color: #e4405f !important; /* Instagram Pink/Rot */
}

/* Fallback, falls die spezifischen Klassen fehlen */
.wls-footer-socials .wls-social-btn i {
    font-size: 1.2rem !important;
    line-height: 1 !important;
}

/* Einheitliche Darstellung der Social-Icons in allen Browsern (Firefox, Chrome, Edge) */
.wls-footer-socials {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 15px !important;
    margin: 15px 0 !important;
}

.wls-footer-socials .wls-social-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 45px !important;
    height: 45px !important;
    min-width: 45px !important;
    min-height: 45px !important;
    background-color: #ffffff !important;
    border-radius: 50% !important;
    text-decoration: none !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15) !important;
    box-sizing: border-box !important;
    transition: transform 0.2s ease !important;
}

/* Exakte Kontrolle über die Icon-Größe für konsistentes Rendering */
.wls-footer-socials .wls-social-btn i,
.wls-footer-socials .wls-social-btn svg {
    font-size: 1.1rem !important;
    width: 1.1rem !important;
    height: 1.1rem !important;
    line-height: 1 !important;
    display: inline-block !important;
    text-align: center !important;
}

.wls-footer-socials .wls-social-btn:hover {
    transform: translateY(-3px) !important;
}

/* Einheitlicher Hover-Effekt für alle Social-Media-Icons */
.wls-footer-socials .wls-social-btn:hover {
    background-color: #d60000 !important; /* Kreis wird beim Hover rot */
    transform: translateY(-3px) !important;
    box-shadow: 0 6px 15px rgba(214, 0, 0, 0.3) !important;
}

/* Wenn die Maus drauf ist, werden die Symbole weiß, damit man sie auf dem roten Kreis perfekt sieht */
.wls-footer-socials .wls-social-btn:hover i,
.wls-footer-socials .wls-social-btn:hover svg {
    color: #ffffff !important;
}

/* Jeder Button behält beim Hover seine eigene Markenfarbe */
.wls-footer-socials .wls-social-btn.facebook:hover {
    background-color: #1877f2 !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 6px 15px rgba(24, 119, 242, 0.4) !important;
}

.wls-footer-socials .wls-social-btn.youtube:hover {
    background-color: #ff0000 !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 6px 15px rgba(255, 0, 0, 0.4) !important;
}

.wls-footer-socials .wls-social-btn.instagram:hover {
    background-color: #e4405f !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 6px 15px rgba(228, 64, 95, 0.4) !important;
}

/* Symbol wird beim Hover weiß, damit man es auf der farbigen Fläche perfekt sieht */
.wls-footer-socials .wls-social-btn:hover i,
.wls-footer-socials .wls-social-btn:hover svg {
    color: #ffffff !important;
}

/* Hauptcontainer: Hält Platte und Cover zusammen */
.wls-vinyl-container {
    position: relative;
    width: 200px;
    height: 200px;
    margin: 20px auto;
}

/* Die Vinyl-Platte im Hintergrund (schaut rechts heraus) */
.wls-vinyl-container .wls-vinyl-disc {
    position: absolute;
    top: 5px;
    right: -35px; /* Lässt die Platte rechts herausschauen */
    width: 190px;
    height: 190px;
    background-color: #111;
    border-radius: 50%;
    z-index: 1;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
    background-image: repeating-radial-gradient(circle at center, #111, #111 4px, #222 6px, #111 8px);
}

/* Das CD-Cover im Vordergrund (garantiert quadratisch) */
.wls-vinyl-container .wls-vinyl-cover {
    position: absolute;
    top: 0;
    left: 0;
    width: 200px;
    height: 200px;
    z-index: 2;
    display: block;
    box-shadow: -3px 3px 15px rgba(0, 0, 0, 0.3);
    border-radius: 4px;
    overflow: hidden;
    /* Absolut kein Hover-Effekt (transform ist fix) */
    transform: none !important;
}

/* Zwingt jedes Bild in das exakte quadratische Format ohne Verzerrung */
.wls-vinyl-container .wls-vinyl-cover img {
    width: 200px !important;
    height: 200px !important;
    object-fit: cover !important;
    display: block;
}

/* ==========================================================================
   MOBILE MENÜ FIX (Klassennamen angepasst)
   ========================================================================== */

/* Desktop: Mobile-Button ausblenden */
.wls-mobile-toggle {
    display: none !important;
}

/* Mobile & Tablet Styles (bis 1024px) */
@media (max-width: 1024px) {

    /* Hamburger-Button anzeigen & stylen */
    .wls-mobile-toggle {
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        background-color: #d60000 !important;
        border: 2px solid #ffffff !important;
        border-radius: 6px;
        cursor: pointer;
        z-index: 100001;
        position: relative;
        padding: 0;
    }

    /* Burger Icon Striche */
    .wls-mobile-toggle span,
    .wls-mobile-toggle span::before,
    .wls-mobile-toggle span::after {
        display: block;
        width: 22px;
        height: 2px;
        background-color: #ffffff;
        position: relative;
        transition: all 0.3s ease-in-out;
    }

    .wls-mobile-toggle span::before,
    .wls-mobile-toggle span::after {
        content: '';
        position: absolute;
        left: 0;
    }

    .wls-mobile-toggle span::before { top: -7px; }
    .wls-mobile-toggle span::after { top: 7px; }

    /* "X" Animiere Icon wenn aktiv */
    .wls-mobile-toggle.active span {
        background-color: transparent;
    }
    .wls-mobile-toggle.active span::before {
        transform: rotate(45deg);
        top: 0;
    }
    .wls-mobile-toggle.active span::after {
        transform: rotate(-45deg);
        top: 0;
    }

    /* Navigation Overlay */
    .wls-main-nav {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background-color: #d60000 !important;
        z-index: 100000;
        padding: 80px 20px 40px 20px;
        overflow-y: auto;
        box-sizing: border-box;
    }

    /* Menü sichtbar machen wenn aktiv */
    .wls-main-nav.active {
        display: block !important;
    }

    /* Menüpunkte Styling */
    .wls-main-nav ul {
        display: flex;
        flex-direction: column;
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .wls-main-nav li {
        width: 100%;
        border-bottom: 1px solid rgba(255, 255, 255, 0.15);
        position: relative;
    }

    .wls-main-nav a {
        display: block;
        color: #ffffff !important;
        font-size: 1.1rem;
        font-weight: 700;
        padding: 14px 0;
        text-decoration: none;
    }

    /* Untermenüs */
    .wls-main-nav .sub-menu {
        display: none;
        background-color: rgba(0, 0, 0, 0.15);
        padding-left: 15px;
    }

    .wls-main-nav .menu-item-has-children.sub-menu-open > .sub-menu {
        display: block !important;
    }

    /* Plus / Minus Indikator */
    .wls-main-nav .menu-item-has-children > a::after {
        content: '+';
        position: absolute;
        right: 10px;
        top: 12px;
        font-size: 1.4rem;
        font-weight: bold;
        color: #ffffff;
    }

    .wls-main-nav .menu-item-has-children.sub-menu-open > a::after {
        content: '–';
    }
}