/*
 Theme Name:   GeneratePress Child
 Theme URI:    https://generatepress.com
 Description:  Mein individuelles Child Theme für GeneratePress.
 Author:       Sebastian Stelling
 Author URI:   https://deine-website.de
 Template:     generatepress
 Version:      1.0.0
*/

/* Ab hier kannst du dein eigenes CSS eintragen */

html {
    scroll-behavior: smooth;
}

/* --- Mobile Footer Bar & Custom Menu (Reine SVGs) --- */

.gp-mobile-footer-bar,
.footer-search-overlay,
.footer-menu-overlay {
    display: none;
}

@media (max-width: 768px) {
    
    /* Blendet originales GeneratePress Menü aus */
    #mobile-header,
    .main-navigation button.menu-toggle,
    .mobile-bar-items {
        display: none !important;
    }

    /* Die Hauptleiste unten (Aufgeteilt für 5 Buttons) */
    .gp-mobile-footer-bar {
        display: flex !important;
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 60px;
        background-color: #ffffff;
        box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
        z-index: 9999;
        justify-content: space-around;
        align-items: center;
        border-top: 1px solid #e5e7eb;
        padding: 0;
    }

    .footer-bar-item {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        font-size: 11px;
        font-weight: 500;
        height: 100%;
        border: none !important;
        border-radius: 0 !important;
        background: transparent;
    }

    .footer-bar-icon {
        width: 20px;
        height: 20px;
        margin-bottom: 4px;
        display: block;
        object-fit: contain;
    }

    .footer-bar-text {
        color: #374151;
    }

    /* =========================================================================
       HARD-FIX OVERLAYS (SUCHE & ACCESSIBILITY): GLEITEN VON LINKS EIN
       ========================================================================= */
    .footer-search-overlay.true-spotify-search-overlay {
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        position: fixed !important;
        left: 0 !important; 
        top: 0 !important;
        width: 100% !important;
        bottom: 60px !important; 
        height: calc(100vh - 60px) !important;
        background-color: #f9fafb !important; 
        z-index: 9998 !important;
        padding: 0 !important;
        box-sizing: border-box;
        transform: translateX(-100%) !important; 
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; 
    }

    .footer-search-overlay.true-spotify-search-overlay.is-active {
        transform: translateX(0) !important;
    }

    /* =========================================================================
       HARD-FIX MENÜ: FLIEGT EBENFALLS VON LINKS EIN
       ========================================================================= */
    .footer-menu-overlay {
        display: flex !important;
        flex-direction: column !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important; 
        width: 100% !important;
        height: calc(100vh - 60px) !important;
        background: #ffffff !important;
        z-index: 9997 !important;
        box-sizing: border-box;
        transform: translateX(-100%) !important; 
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }

    .footer-menu-overlay.is-active {
        transform: translateX(0) !important;
    }

    .menu-overlay-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 20px;
        border-bottom: 1px solid #e5e7eb;
    }

    .menu-overlay-header h3 {
        margin: 0;
        font-size: 18px;
    }

    .close-menu-btn {
        background: none;
        border: none;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .footer-overlay-nav {
        padding: 10px 20px;
        overflow-y: auto;
    }

    .footer-overlay-nav ul {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .footer-overlay-nav li {
        position: relative;
        margin: 0;
    }

    .footer-overlay-nav a {
        display: block;
        font-size: 18px;
        color: #111827;
        text-decoration: none;
        padding: 12px 60px 12px 0; 
        border-bottom: 1px solid #f3f4f6;
    }

    .sub-menu-toggle {
        position: absolute;
        right: 0;
        top: 4px; 
        width: 50px; 
        height: 38px;
        background: #f3f4f6; 
        border: 1px solid #e5e7eb; 
        border-radius: 4px;
        cursor: pointer;
        transition: all 0.2s ease-in-out;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 2;
    }

    .sub-menu-toggle img {
        width: 14px !important;
        height: 14px !important;
        opacity: 0.8;
        transition: transform 0.2s ease;
    }

    .sub-menu-toggle.is-rotated img {
        transform: rotate(180deg);
    }

    .footer-overlay-nav .sub-menu {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease-out;
        background-color: #f9fafb;
        padding-left: 15px;
    }

    .footer-overlay-nav .sub-menu.is-open {
        max-height: 500px;
    }

    .footer-overlay-nav .sub-menu a {
        font-size: 16px;
        color: #4b5563;
    }

    body {
        padding-bottom: 60px !important;
    }

    a.generate-back-to-top {
        display: none !important;
    }
}

/* --- FARBLICHE HERVORHEBUNG FÜR AKTIVEN FOOTER-BUTTON --- */
@media (max-width: 768px) {
    .gp-mobile-footer-bar .footer-bar-item {
        transition: background-color 0.2s ease, color 0.2s ease !important;
    }

    .gp-mobile-footer-bar .footer-bar-item.is-active-btn {
        background-color: #f3f4f6 !important;
        color: #2563eb !important;
    }

    .gp-mobile-footer-bar .footer-bar-item.is-active-btn .footer-bar-icon {
        filter: invert(32%) sepia(90%) md(100%) saturate(1919%) hue-rotate(212deg) brightness(97%) contrast(93%) !important;
    }
    
    .gp-mobile-footer-bar .footer-bar-item.is-active-btn .footer-bar-text {
        color: #2563eb !important;
        font-weight: 600 !important;
    }
}

/* =========================================================================
   STICKY HEADER (SUCHE BILD-ERSETZUNG & ELEMENTE) - JETZT GLOBAL FREIGEGEBEN
   ========================================================================= */
.spotify-search-sticky-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 10 !important;
    flex-shrink: 0 !important; 
    padding: 20px 16px 12px 16px !important;
    background-color: #f9fafb !important;
}

.spotify-search-title {
    color: #111827 !important;
    font-size: 28px !important;
    font-weight: 700 !important;
    margin: 0 0 16px 0 !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}

.spotify-search-sticky-header .search-input-wrapper {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    height: 46px !important;
    background: #ffffff !important;
    border: 1px solid #d1d5db !important;
    border-radius: 4px !important;
    padding: 0 12px !important;
    box-sizing: border-box !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05) !important;
}

.spotify-search-sticky-header .search-input-icon {
    position: absolute !important;
    left: 12px !important;
    width: 22px !important;
    height: 22px !important;
    pointer-events: none !important;
}

.spotify-search-field, 
.spotify-search-sticky-header .search-field {
    width: 100% !important;
    height: 100% !important;
    border: none !important;
    background: transparent !important;
    padding-left: 36px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #111827 !important;
    outline: none !important;
    box-shadow: none !important;
}

/* --- SCROLL-CONTENT GRID-SYSTEM - JETZT GLOBAL FREIGEGEBEN --- */
.spotify-search-scroll-content {
    flex: 1 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 8px 16px 80px 16px !important; 
}

.spotify-discover-heading {
    color: #374151 !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    margin: 0 0 16px 0 !important;
}

.spotify-discover-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
}

.spotify-card {
    display: flex !important;
    position: relative !important;
    height: 100px !important;
    border-radius: 4px !important;
    padding: 12px !important;
    box-sizing: border-box !important;
    text-decoration: none !important;
    overflow: hidden !important;
    border: none !important;
}

.spotify-card span {
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    font-size: 14px !important;
    color: #ffffff !important;
    font-weight: 400 !important; 
    line-height: 1.2 !important;
    text-align: left !important;
    position: relative !important;
    z-index: 2 !important;
}

/* =========================================================================
   NUR NOCH EINE FLAGGE RECHTS - JETZT GLOBAL FREIGEGEBEN
   ========================================================================= */
.spotify-discover-grid a[class*="flag-id-"] span {
    max-width: 65% !important;
    position: relative !important;
    display: inline-block !important;
    text-indent: 0 !important; 
    padding-left: 0 !important;
    overflow: hidden !important;
    white-space: nowrap !important;
}

.spotify-discover-grid a[class*="flag-id-"] {
    overflow: hidden !important;
}

.spotify-discover-grid a[class*="flag-id-"]::after {
    position: absolute !important;
    z-index: 1 !important;
    bottom: 8px !important; 
    right: 12px !important;
    font-size: 40px !important; 
    line-height: 1 !important;
    display: block !important;
    pointer-events: none !important;
}

.spotify-discover-grid .flag-id-de::after { content: "🇩🇪" !important; }
.spotify-discover-grid .flag-id-at::after { content: "🇦🇹" !important; }
.spotify-discover-grid .flag-id-ch::after { content: "🇨🇭" !important; }
.spotify-discover-grid .flag-id-us::after { content: "🇺🇸" !important; }
.spotify-discover-grid .flag-id-gb::after { content: "🇬🇧" !important; }
.spotify-discover-grid .flag-id-fr::after { content: "🇫🇷" !important; }
.spotify-discover-grid .flag-id-it::after { content: "🇮🇹" !important; }
.spotify-discover-grid .flag-id-es::after { content: "🇪🇸" !important; }
.spotify-discover-grid .flag-id-jp::after { content: "🇯🇵" !important; }

.spotify-discover-grid .flag-id-be::after { content: "🇧🇪" !important; } 
.spotify-discover-grid .flag-id-se::after { content: "🇸🇪" !important; } 

/* =========================================================================
   SPOTIFY IMAGE POSITIONING FÜR POSTS IN GRID - JETZT GLOBAL FREIGEGEBEN
   ========================================================================= */
.spotify-card img.spotify-card-img {
    position: absolute !important;
    z-index: 1 !important;
    width: 65px !important;
    height: 65px !important;
    bottom: -10px !important;  
    right: -15px !important;  
    transform: rotate(25deg) !important;
    object-fit: cover !important;
    border-radius: 4px !important; 
    box-shadow: -2px 4px 10px rgba(0, 0, 0, 0.3) !important; 
    margin: 0 !important;
    padding: 0 !important;
}

/* --- SEKTIONS-FARBENBLÖCKE - JETZT GLOBAL FREIGEGEBEN --- */
.card-pink   { background-color: #e2128c !important; }
.card-green  { background-color: #006450 !important; }
.card-blue   { background-color: #1e3264 !important; }
.card-purple { background-color: #8c1e8c !important; }
.card-olive  { background-color: #4c6414 !important; }
.card-grey   { background-color: #686868 !important; }

.spotify-light-theme .card-orange { background-color: #e85c04 !important; }
.spotify-light-theme .card-teal   { background-color: #008080 !important; }
.spotify-light-theme .card-red    { background-color: #b8001f !important; }
.spotify-light-theme .card-indigo { background-color: #3f51b5 !important; }
.spotify-light-theme .card-yellow { background-color: #f1c40f !important; }
.spotify-light-theme .card-brown  { background-color: #795548 !important; }

.spotify-light-theme .card-neonpurple   { background-color: #a01c54 !important; }
.spotify-light-theme .card-electricteal { background-color: #048c7c !important; }
.spotify-light-theme .card-lime         { background-color: #689c14 !important; }
.spotify-light-theme .card-neonblue     { background-color: #1464c4 !important; }
.spotify-light-theme .card-berry        { background-color: #7c144c !important; }
.spotify-light-theme .card-slate        { background-color: #44545c !important; }

.spotify-light-theme .card-terracotta { background-color: #c05c44 !important; }
.spotify-light-theme .card-forest     { background-color: #1e5434 !important; }
.spotify-light-theme .card-plum       { background-color: #5c245c !important; }
.spotify-light-theme .card-denim      { background-color: #2c547c !important; }
.spotify-light-theme .card-mustard    { background-color: #d0941c !important; }
.spotify-light-theme .card-sage       { background-color: #748c74 !important; }

.spotify-light-theme .cat-fallback-img {
    width: 50px !important; height: 50px !important; bottom: -5px !important; right: -10px !important;
    filter: invert(100%) opacity(15%) !important; transform: rotate(-15deg) !important;
}

/* =========================================================================
   HARDWARE ISOLATION & MOBILE TARGET SECURE CLICK
   ========================================================================= */
@media (max-width: 768px) {
    .gp-mobile-footer-bar .footer-bar-item * {
        pointer-events: none !important;
    }

    button.footer-bar-item {
        border: none !important; background: transparent !important; outline: none !important;
        box-shadow: none !important; padding: 0 !important; width: 100% !important;
        cursor: pointer !important; -webkit-appearance: none !important;
    }
}

/* =========================================================================
   SCHRIFTBARRIEREFREIHEIT (GENERATEPRESS COMPATIBLE)
   ========================================================================= */
body {
    --global-font-scale: 1;
}

body p, 
body span:not(.footer-bar-text), 
body a:not(.footer-bar-item), 
body li, 
body div:not(.gp-mobile-footer-bar) {
    font-size: calc(1em * var(--global-font-scale)) !important;
}

body h1 { font-size: calc(2.2em * var(--global-font-scale)) !important; }
body h2:not(.spotify-search-title) { font-size: calc(1.8em * var(--global-font-scale)) !important; }
body h3:not(.spotify-discover-heading) { font-size: calc(1.4em * var(--global-font-scale)) !important; }
body h4 { font-size: calc(1.2em * var(--global-font-scale)) !important; }

.gp-mobile-footer-bar .footer-bar-text {
    font-size: 11px !important;
}

/* =========================================================================
   STYLING FÜR DEN DUNKELMODUS-SCHIEBEREGLER (SWITCH)
   ========================================================================= */
.theme-switch .switch-slider::before {
    content: "";
    position: absolute;
    height: 22px;
    width: 22px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: .3s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.theme-switch input:checked + .switch-slider {
    background-color: #2563eb !important; 
}

.theme-switch input:checked + .switch-slider::before {
    transform: translateX(22px);
}

.theme-switch input:focus-visible + .switch-slider {
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.4);
}

body.dark-contrast .theme-switch .switch-slider {
    background-color: #4b5563; 
}

/* =========================================================================
   RADIKALER DUNKELMODUS-FIX FÜR GENERATEPRESS CONTAINER, KOMMENTARE & FOOTER
   ========================================================================= */
body.dark-contrast,
body.dark-contrast #page,
body.dark-contrast #main,
body.dark-contrast .site-content,
body.dark-contrast .inside-article,
body.dark-contrast article,
body.dark-contrast .sidebar,
body.dark-contrast .widget,                        /* Sidebar-Widgets */
body.dark-contrast .footer-widgets,                 /* Äußerer Footer-Widget-Bereich */
body.dark-contrast #footer-widgets,                 /* ID für Footer-Widgets */
body.dark-contrast .site-footer,                    /* Unterster Footer-Balken Container */
body.dark-contrast .site-info,                      /* Der eigentliche Copyright-Balken */
body.dark-contrast #comments,                      
body.dark-contrast .comments-area,                  
body.dark-contrast .comment-respond,                
body.dark-contrast .comment-list .comment-content,
body.dark-contrast .comment-list li.comment {
    background-color: #121212 !important; 
    color: #f3f4f6 !important; 
}

/* Entfernt weiße Rahmen, Trennlinien und Schatten im Inhalts-, Sidebar- und Fußbereich */
body.dark-contrast .separate-containers .comments-area,
body.dark-contrast .separate-containers .widget,
body.dark-contrast .inside-footer-widgets .widget,
body.dark-contrast .site-footer,                    
body.dark-contrast .site-info {                     
    border-color: #4b5563 !important;
    box-shadow: none !important;
}

body.dark-contrast a:not(.footer-bar-item),
body.dark-contrast li a,
body.dark-contrast .comment-reply-link {            
    color: #60a5fa !important; 
}

/* Überschriften in der Sidebar und im Footer */
body.dark-contrast h1, 
body.dark-contrast h2, 
body.dark-contrast h3, 
body.dark-contrast h4,
body.dark-contrast p,
body.dark-contrast li,
body.dark-contrast span:not(.footer-bar-text),
body.dark-contrast .widget-title,                  
body.dark-contrast .footer-widgets .widget-title,   
body.dark-contrast .comment-meta a,                 
body.dark-contrast .fn {                            
    color: #ffffff !important;
}

/* REPARIERT UND AUF DEINEN AUSGANGSCODE ZURÜCKGESETZT: 
   Hier stehen wieder exakt die Klassen deiner Overlays, um im Dark Mode zu greifen */
body.dark-contrast input, 
body.dark-contrast select,
body.dark-contrast .accessibility-setting-card,
body.dark-contrast .spotify-search-sticky-header,
body.dark-contrast .spotify-search-scroll-content,
body.dark-contrast .menu-overlay-header,
body.dark-contrast .footer-overlay-scroll-container {
    background-color: #1f2937 !important;
    color: #ffffff !important;
    border-color: #4b5563 !important;
}

/* Absende-Button für das Kommentarformular */
body.dark-contrast #submit,
body.dark-contrast .submit {
    background-color: #2563eb !important;
    color: #ffffff !important;
    border: 1px solid #1d4ed8 !important;
}

body.dark-contrast .inside-navigation,
body.dark-contrast .separate-containers .inside-article,
body.dark-contrast .inside-footer {                 
    background-color: #121212 !important;
}

body.dark-contrast .gp-mobile-footer-bar {
    background-color: #ffffff !important;
    border-top: 1px solid #d1d5db !important;
}
body.dark-contrast .footer-bar-text {
    color: #111827 !important;
}

/* =========================================================================
   DESKTOP EXTENSION: SCROLLBAR IN DER SUCHE SPEZIELL AM PC AUSBLENDEN
   ========================================================================= */
@media (min-width: 769px) {
    
    /* Blendet die Scrollbar im Such-Inhalt aus, die Funktion bleibt voll aktiv */
    #footerSearchOverlay .spotify-search-scroll-content,
    #footerAccessibilityOverlay .spotify-search-scroll-content,
    .spotify-search-scroll-content {
        -ms-overflow-style: none !important;  /* Für Internet Explorer / alten Edge */
        scrollbar-width: none !important;     /* Für Firefox */
    }

    /* Speziell für Webkit-Browser (Chrome, Safari, neuen Opera & Edge) */
    #footerSearchOverlay .spotify-search-scroll-content::-webkit-scrollbar,
    #footerAccessibilityOverlay .spotify-search-scroll-content::-webkit-scrollbar,
    .spotify-search-scroll-content::-webkit-scrollbar {
        display: none !important;             /* Blendet die Scrollbar komplett aus */
        width: 0 !important;
        height: 0 !important;
    }
}

/* =========================================================================
   REPARIERT UND ISOLIERT: FIXED DESKTOP FLOATING EXTENSION (AB 769px)
   ========================================================================= */
@media (min-width: 769px) {
    
    nav.gp-mobile-footer-bar {
        display: block !important;
        position: static !important;
        background: transparent !important;
        box-shadow: none !important;
        border: none !important;
        width: auto !important;
        height: auto !important;
    }

    nav.gp-mobile-footer-bar #footerHomeTrigger,
    nav.gp-mobile-footer-bar #footerMenuTrigger {
        display: none !important;
    }

    /* JETZT NEU: ALLE DREI BUTTONS WERDEN AM PC ALS DESKTOP-FABs GERENDERT */
    nav.gp-mobile-footer-bar #footerScrollToTop,
    nav.gp-mobile-footer-bar #footerAccessibilityTrigger,
    nav.gp-mobile-footer-bar #footerSearchTrigger {
        display: flex !important;
        position: fixed !important;
        right: 24px !important;
        width: 48px !important;
        height: 48px !important;
        background-color: #ffffff !important;
        border: 1px solid #d1d5db !important;
        border-radius: 50% !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12) !important;
        z-index: 9999 !important;
        justify-content: center !important;
        align-items: center !important;
        cursor: pointer !important;
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.2s ease, box-shadow 0.2s ease !important;
        padding: 0 !important;
    }

    /* Saubere vertikale Staffelung von unten nach oben */
    nav.gp-mobile-footer-bar #footerScrollToTop { bottom: 24px !important; }
    nav.gp-mobile-footer-bar #footerAccessibilityTrigger { bottom: 88px !important; }
    nav.gp-mobile-footer-bar #footerSearchTrigger { bottom: 152px !important; } /* Über dem Barrierefrei-Button */

    nav.gp-mobile-footer-bar #footerScrollToTop .footer-bar-text,
    nav.gp-mobile-footer-bar #footerAccessibilityTrigger .footer-bar-text,
    nav.gp-mobile-footer-bar #footerSearchTrigger .footer-bar-text {
        display: none !important;
    }

    nav.gp-mobile-footer-bar #footerScrollToTop .footer-bar-icon,
    nav.gp-mobile-footer-bar #footerAccessibilityTrigger .footer-bar-icon,
    nav.gp-mobile-footer-bar #footerSearchTrigger .footer-bar-icon {
        width: 22px !important;
        height: 22px !important;
        margin: 0 !important;
        color: #374151 !important;
    }

    /* SYNCHRONISATION: ALLE 3 BUTTONS FLIEHEN SOWOHL VOR DER SUCHE ALS AUCH VOR DEM BARRIEREFREI-FLYOUT */
    body:has(#footerAccessibilityOverlay.is-active) nav.gp-mobile-footer-bar #footerScrollToTop,
    body:has(#footerAccessibilityOverlay.is-active) nav.gp-mobile-footer-bar #footerAccessibilityTrigger,
    body:has(#footerAccessibilityOverlay.is-active) nav.gp-mobile-footer-bar #footerSearchTrigger,
    body:has(#footerSearchOverlay.is-active) nav.gp-mobile-footer-bar #footerScrollToTop,
    body:has(#footerSearchOverlay.is-active) nav.gp-mobile-footer-bar #footerAccessibilityTrigger,
    body:has(#footerSearchOverlay.is-active) nav.gp-mobile-footer-bar #footerSearchTrigger {
        transform: translateX(-380px) !important; 
    }

    nav.gp-mobile-footer-bar #footerScrollToTop:hover,
    nav.gp-mobile-footer-bar #footerAccessibilityTrigger:hover,
    nav.gp-mobile-footer-bar #footerSearchTrigger:hover {
        background-color: #f3f4f6 !important;
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.16) !important;
    }

    body:has(#footerAccessibilityOverlay.is-active) nav.gp-mobile-footer-bar #footerScrollToTop:hover,
    body:has(#footerAccessibilityOverlay.is-active) nav.gp-mobile-footer-bar #footerAccessibilityTrigger:hover,
    body:has(#footerAccessibilityOverlay.is-active) nav.gp-mobile-footer-bar #footerSearchTrigger:hover,
    body:has(#footerSearchOverlay.is-active) nav.gp-mobile-footer-bar #footerScrollToTop:hover,
    body:has(#footerSearchOverlay.is-active) nav.gp-mobile-footer-bar #footerAccessibilityTrigger:hover,
    body:has(#footerSearchOverlay.is-active) nav.gp-mobile-footer-bar #footerSearchTrigger:hover {
        transform: translateX(-380px) scale(1.05) !important;
    }

    /* DESKTOP-REGELN FÜR DIE SUCHE UND BARRIEREFREIHEIT AS SIDEBARS */
    #footerAccessibilityOverlay.footer-search-overlay,
    #footerSearchOverlay.footer-search-overlay {
        display: flex !important;
        flex-direction: column !important;
        position: fixed !important;
        right: 0 !important;
        left: auto !important;
        top: 0 !important;
        width: 380px !important;
        height: 100vh !important;
        background-color: #ffffff !important;
        box-shadow: -4px 0 24px rgba(0, 0, 0, 0.15) !important;
        z-index: 9998 !important;
        padding: 24px !important;
        box-sizing: border-box !important;
        transform: translateX(100%) !important; 
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }

    #footerAccessibilityOverlay.footer-search-overlay.is-active,
    #footerSearchOverlay.footer-search-overlay.is-active {
        transform: translateX(0) !important;
    }

    #footerAccessibilityOverlay .spotify-search-sticky-header,
    #footerSearchOverlay .spotify-search-sticky-header {
        background: transparent !important;
        padding: 0 0 16px 0 !important;
    }
    #footerAccessibilityOverlay .spotify-search-title,
    #footerSearchOverlay .spotify-search-title {
        margin: 0 0 8px 0 !important;
    }

    /* DESKTOP DUNKELMODUS-PROTECTION */
    body.dark-contrast nav.gp-mobile-footer-bar #footerScrollToTop,
    body.dark-contrast nav.gp-mobile-footer-bar #footerAccessibilityTrigger,
    body.dark-contrast nav.gp-mobile-footer-bar #footerSearchTrigger {
        background-color: #1f2937 !important;
        border-color: #4b5563 !important;
    }

    body.dark-contrast nav.gp-mobile-footer-bar #footerScrollToTop .footer-bar-icon,
    body.dark-contrast nav.gp-mobile-footer-bar #footerAccessibilityTrigger .footer-bar-icon,
    body.dark-contrast nav.gp-mobile-footer-bar #footerSearchTrigger .footer-bar-icon {
        filter: invert(1) !important;
    }

    body.dark-contrast nav.gp-mobile-footer-bar #footerScrollToTop:hover,
    body.dark-contrast nav.gp-mobile-footer-bar #footerAccessibilityTrigger:hover,
    body.dark-contrast nav.gp-mobile-footer-bar #footerSearchTrigger:hover {
        background-color: #374151 !important;
    }

    body.dark-contrast #footerAccessibilityOverlay.footer-search-overlay,
    body.dark-contrast #footerSearchOverlay.footer-search-overlay {
        background-color: #121212 !important;
        box-shadow: -4px 0 24px rgba(0, 0, 0, 0.5) !important;
    }
    
    body.dark-contrast .spotify-search-sticky-header {
        background-color: #121212 !important;
    }
}

/* =========================================================================
   BARRIEREFREIHEIT: MAUSZEIGER (REIN ÜBER CSS, ABSOLUT GERADE GEOMETRIE)
   ========================================================================= */

/* --- 1. LIGHT-MODE: SCHNURGERADER PFEIL & HAND (TIEFSDUNKEL, OHNE RAND) --- */
body.large-cursor {
    /* Absolut gerader, klassischer XL-Pfeil (Größe: 38px). 
       Hotspot '0 0' sitzt exakt auf der oberen linken Pixclspitze. */
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='38' height='38' viewBox='0 0 32 32'%3E%3Cpath fill='%23111827' stroke='%23111827' stroke-width='1' stroke-linejoin='miter' d='M2 2v24l6.5-6.5 5 9.5 3.5-1.8-5-9.5 7.5-.2z'/%3E%3C/svg%3E") 0 0, auto !important;
}

/* Symmetrische Auswahl-Hand für klickbare Elemente im Light-Mode */
body.large-cursor a,
body.large-cursor button,
body.large-cursor input[type="submit"],
body.large-cursor input[type="button"],
body.large-cursor .pointer,
body.large-cursor [role="button"],
body.large-cursor .spotify-card,
body.large-cursor .footer-bar-item {
    /* Der Zeigefinger steht schnurgerade nach oben. Hotspot '6 0' trifft die Fingerspitze. */
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='38' height='38' viewBox='0 0 32 32'%3E%3Cpath fill='%23111827' stroke='%23111827' stroke-width='1' stroke-linejoin='miter' d='M6 30h12a5 5 0 0 0 5-5V14h-1V8a1.5 1.5 0 0 0-3 0v6h-1V5a1.5 1.5 0 0 0-3 0v9h-1V2a1.5 1.5 0 0 0-3 0v12H9V7a1.5 1.5 0 0 0-3 0v17a6 6 0 0 0 6 6z'/%3E%3C/svg%3E") 6 0, pointer !important;
}

/* --- 2. DARK-MODE: EXAKT GLEICHE GEOMETRIE (WEISS MIT SCHWARZEM KONTRASTRAND) --- */
body.large-cursor.dark-contrast {
    /* Exakt derselbe Pfeil, invertiert zu Weiß mit feiner, schwarzer Konturlinie gegen Verschmelzen */
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='38' height='38' viewBox='0 0 32 32'%3E%3Cpath fill='%23ffffff' stroke='%23000000' stroke-width='1.2' stroke-linejoin='miter' d='M2 2v24l6.5-6.5 5 9.5 3.5-1.8-5-9.5 7.5-.2z'/%3E%3C/svg%3E") 0 0, auto !important;
}

/* Symmetrische Auswahl-Hand für klickbare Elemente im Dark-Mode */
body.dark-contrast.large-cursor a,
body.dark-contrast.large-cursor button,
body.dark-contrast.large-cursor .spotify-card,
body.dark-contrast.large-cursor .footer-bar-item {
    /* Exakt dieselbe gerade Hand, invertiert zu Weiß mit feiner, schwarzer Konturlinie */
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='38' height='38' viewBox='0 0 32 32'%3E%3Cpath fill='%23ffffff' stroke='%23000000' stroke-width='1.2' stroke-linejoin='miter' d='M6 30h12a5 5 0 0 0 5-5V14h-1V8a1.5 1.5 0 0 0-3 0v6h-1V5a1.5 1.5 0 0 0-3 0v9h-1V2a1.5 1.5 0 0 0-3 0v12H9V7a1.5 1.5 0 0 0-3 0v17a6 6 0 0 0 6 6z'/%3E%3C/svg%3E") 6 0, pointer !important;
}


/* --- Styling für den wöchentlichen Beitrags-Shortcode mit Bildern --- */

.weekly-posts-container {
    margin: 30px 0;
    width: 100%;
}

/* Flexibles Grid für exakt 4 Spalten auf großen Bildschirmen */
.weekly-posts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 20px;
}

/* Die Beitrags-Karte */
.weekly-post-card {
    background-color: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    overflow: hidden; /* Schneidet das Bild an den abgerundeten Ecken sauber ab */
    display: flex;
    flex-direction: column;
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.weekly-post-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05);
}

/* Bild-Container: Nimmt jetzt die volle Breite ein und lässt dem Bild Platz */
.weekly-post-image-wrapper {
    position: relative;
    width: 100%;
    background-color: #f3f4f6;
    display: block;
    overflow: hidden;
}

/* Das Bild selbst: Deutlich größer und füllt die Breite komplett aus */
.weekly-post-img {
    width: 100%;
    height: auto;
    /* Auf 300px erhöht, damit die Bilder spürbar mehr Platz einnehmen */
    max-height: 300px; 
    /* 'width: 100%' und 'height: auto' sorgen dafür, dass nichts abgeschnitten wird, 
       während das Bild die Karte maximal ausfüllt */
    display: block;
    object-fit: scale-down; /* Fallback, falls ein Bild extrem winzig sein sollte */
    transition: opacity 0.2s ease;
}

/* Platzhalter-Grafik wird der neuen Größe angepasst */
.weekly-post-img-fallback {
    width: 100%;
    height: 220px;
    background: linear-gradient(135deg, #e5e7eb 0%, #d1d5db 100%);
}

/* Inhalt unterhalb des Bildes */
.weekly-post-content-wrapper {
    padding: 20px;
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* Schiebt den Footer automatisch nach ganz unten */
    justify-content: space-between;
}

/* Titel-Link */
.weekly-post-card-title {
    margin: 0 0 10px 0;
    font-size: 16px;
    line-height: 1.4;
}

.weekly-post-card-title a {
    color: #111827;
    text-decoration: none !important;
    font-weight: 600;
}

.weekly-post-card-title a:hover {
    color: #4b5563;
}

/* Textausschnitt */
.weekly-post-excerpt {
    color: #4b5563;
    font-size: 13px;
    line-height: 1.6;
    margin-bottom: 15px;
}

.weekly-post-excerpt p {
    margin: 0;
}

/* Weiterlesen-Link */
.weekly-post-link {
    font-size: 13px;
    font-weight: 500;
    color: #111827;
    text-decoration: none;
    display: inline-block;
}

.weekly-post-link:hover {
    text-decoration: underline;
}

/* Sonderregelung für Tablets: Bei mittleren Auflösungen 2x2 statt 4 nebeneinander */
@media (min-width: 600px) and (max-width: 900px) {
    .weekly-posts-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}


/* --- Ausfallsicheres Widget-Styling: Strikt 300x300px --- */

.footer-widget-posts {
    width: 100%;
    margin-top: 15px;
}

.widget-posts-list.side-by-side-layout {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.widget-post-item {
    display: flex;
    flex-direction: row; 
    align-items: flex-start;
    gap: 20px; 
    padding-bottom: 25px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.widget-post-item:last-child {
    padding-bottom: 0;
    border-bottom: none;
}

/* Der Bild-Rahmen: Extrem strikte Maßerzwingung */
.widget-post-img-wrapper.exact-square {
    flex-shrink: 0 !important; /* Verhindert das Stauchen durch Flexbox */
    width: 300px !important;
    height: 300px !important;
    min-width: 300px !important; /* Erzwingt die Mindestbreite */
    min-height: 300px !important; /* Erzwingt die Mindesthöhe */
    border-radius: 6px;
    overflow: hidden;
    background-color: #f3f4f6;
}

.widget-post-thumb {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* Schneidet das Bild im 1:1 Format ohne Verzerren zu */
    display: block;
}

.widget-post-content {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0; /* Verhindert, dass langer Text Flexbox-Layouts sprengt */
}

.widget-post-title {
    margin: 0 !important;
    font-size: 18px !important; 
    line-height: 1.4 !important;
    font-weight: 700;
}

.widget-post-title a {
    color: inherit;
    text-decoration: none !important;
    transition: opacity 0.2s ease;
}

.widget-post-title a:hover {
    opacity: 0.75;
}

.widget-post-excerpt {
    color: #4b5563;
    font-size: 13px;
    line-height: 1.6;
}

.widget-post-excerpt p {
    margin: 0 !important;
    padding: 0 !important;
}

/* Automatische Anpassung auf Smartphones */
@media (max-width: 600px) {
    .widget-post-item {
        flex-direction: column;
        align-items: stretch;
    }
    
    .widget-post-img-wrapper.exact-square {
        width: 100% !important;
        max-width: 300px !important; /* Zentriert im mobilen Viewport */
        height: 300px !important;
        margin: 0 auto;
    }
}


/* --- Modernes Grid-Layout für die Kategorieansicht --- */

/* Wir schalten das Grid auf dem Hauptcontainer ein */
.category main {
    display: block !important; /* Löst das Grid für das gesamte Main-Element auf */
}

/* Erzeugt eine isolierte Grid-Box exklusiv für die Beitrags-Artikel */
@media (min-width: 769px) {
    .category main {
        display: flex !important;
        flex-direction: column;
    }
    
    /* Schiebt den Überschriften-Header sauber nach oben */
    .category main .page-header {
        margin-bottom: 45px !important; 
    }

    /* Das eigentliche Grid matcht nun über ein CSS-Selektor-Konstrukt nur die Posts */
    .category article.post {
        display: flex;
    }

    /* CSS Grid Trick: Wir zwingen die Beitrags-Liste in ein separates Raster */
    .category main {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr);
        gap: 30px;
    }

    .category main .page-header,
    .category main .paging-navigation,
    .category main .pagination,
    .category main nav.navigation {
        grid-column: 1 / -1; /* Zwingt alles Nicht-Beitragshafte über die volle Breite */
    }
}

/* 2 Spalten auf dem Tablet */
@media (min-width: 481px) and (max-width: 768px) {
    .category main {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    .category main .page-header,
    .category main .paging-navigation,
    .category main .pagination,
    .category main nav.navigation {
        grid-column: 1 / -1;
    }
}

/* --- Bild- und Ebenen-Ausrichtung --- */

.category article.post {
    background-color: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    margin-bottom: 0 !important;
}

/* Zwingt das Innenleben der Karten, die volle Höhe einzunehmen */
.category article.post .inside-article {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    padding: 25px !important;
}

/* 1. Bilder auf exakt dieselbe Größe (16:9 Format) zwingen */
.category .post-image {
    width: 100%;
    aspect-ratio: 16 / 9; 
    overflow: hidden;
}

.category .post-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; 
    display: block;
}

/* 2. Textbereich dehnbar machen, damit alle Karten auf einer Ebene enden */
.category .entry-summary, 
.category .entry-content {
    flex-grow: 1; 
}

/* --- Feineinstellung der Abstände innerhalb der Karten --- */

/* Wenn das Bild über dem Text/Titel liegt */
.category .post-image {
    margin-bottom: 8px !important; 
}
.category .entry-header {
    margin-top: 8px !important; 
}

/* Wenn der Titel über dem Bild liegt */
.category .entry-title {
    margin-bottom: 25px !important; 
}
.category .post-image + .entry-summary,
.category .post-image + .entry-content {
    margin-top: 8px !important; 
}

/* Kleiner Hover-Effekt für die Karten */
.category article.post:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05);
}

/* --- Neues, größeres Premium-Design für die Pagination --- */

/* 1. Den gesamten Pagination-Block auf der Kategorieseite aus dem Grid befreien */
.category .pagination,
.category .nav-links,
.category .loop-pagination,
.category nav.navigation {
    display: block !important;
    width: 100% !important;
    clear: both !important;
    margin: 70px 0 30px 0 !important; /* Etwas mehr Abstand nach oben zu den größeren Karten */
    text-align: center !important;
    grid-column: 1 / -1 !important;
}

/* 2. Container für die freistehenden Buttons */
.category nav .nav-links,
.category .loop-pagination {
    display: inline-flex !important;
    background-color: transparent !important;
    padding: 0 !important;
    border: none !important;
    box-shadow: none !important;
    gap: 10px !important; /* Erhöhter Abstand zwischen den größeren Buttons */
    justify-content: center !important;
    align-items: center !important;
}

/* 3. Die einzelnen Zahlen-Buttons – DEUTLICH GRÖSSER & IM NEUEN DESIGN */
.category nav .page-numbers,
.category .loop-pagination .page-numbers {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 46px !important; /* Von 40px auf 46px vergrößert */
    height: 46px !important;    /* Von 40px auf 46px vergrößert */
    padding: 0 18px !important;  /* Mehr innerer Abstand für die Pfeile/breitere Zahlen */
    font-size: 15px !important;  /* Schriftgröße leicht angehoben für bessere Lesbarkeit */
    font-weight: 600 !important;  /* Etwas kräftigerer Schriftschnitt */
    color: #1f2937 !important;   /* Ein sattes, modernes Graphit-Dunkelgrau */
    text-decoration: none !important;
    border: 2px solid #e5e7eb !important; /* Etwas dickere, markantere Rahmenlinie */
    background-color: #ffffff !important;
    border-radius: 10px !important; /* Modernere, weichere Abrundung der Ecken */
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.04) !important; /* Minimaler, feiner Bodenschatten */
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important; /* Extrem geschmeidiger Hover-Übergang */
    box-sizing: border-box !important;
}

/* Neuer, dynamischer Hover-Effekt */
.category nav a.page-numbers:hover,
.category .loop-pagination a.page-numbers:hover {
    color: #111827 !important;
    background-color: #ffffff !important;
    border-color: #111827 !important; /* Der Rahmen wird beim Hovern elegant schwarz/dunkel */
    transform: translateY(-2px) !important; /* Der Button hebt sich beim Hovern leicht an */
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.08) !important; /* Schatten verstärkt sich beim Hovern */
}

/* Die aktive Seite (Macht den Button komplett vollflächig dunkel) */
.category nav .page-numbers.current,
.category .loop-pagination .page-numbers.current {
    color: #ffffff !important;
    background-color: #111827 !important; /* Voller Kontrast für die aktive Seite */
    border-color: #111827 !important;
    font-weight: 700 !important;
    transform: none !important;
    box-shadow: 0 4px 12px rgba(17, 24, 39, 0.2) !important; /* Markanter Schatten für die aktive Zahl */
    cursor: default !important;
}

/* Die Richtungspfeile (Weiter / Zurück) – Heben sich durch ein cleanes, rahmenloses Design ab */
.category nav .page-numbers.prev,
.category nav .page-numbers.next,
.category .loop-pagination .page-numbers.prev,
.category .loop-pagination .page-numbers.next {
    font-weight: 700 !important;
    background-color: #f9fafb !important; /* Leicht gräulicher Hintergrund für die Pfeile */
    color: #111827 !important;
}

/* Die Auslassungspunkte (...) */
.category nav .page-numbers.dots,
.category .loop-pagination .page-numbers.dots {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: #9ca3af !important;
    min-width: 30px !important;
    padding: 0 !important;
}


/* =========================================================================
   ERSTELLE STRUKTUR: BILD ➔ TITEL ➔ TEXT ➔ WEITERLESEN-LINK
   ========================================================================= */

/* Bereitet die Beitrags-Karten für eine kontrollierte Elementen-Reihenfolge vor */
.category article.post .inside-article,
.home article.post .inside-article {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    height: 100% !important;
}

/* 1. Position: BILD ganz oben platzieren und Abstände normalisieren */
.category .post-image,
.home .post-image {
    order: 1 !important;
    margin: -25px -25px 15px -25px !important; /* Zieht das Bild nahtlos an die Ränder der Karte */
    width: calc(100% + 50px) !important;
    max-width: none !important;
}

/* 2. Position: TITEL unter das Bild setzen */
.category .entry-header,
.home .entry-header {
    order: 2 !important;
    margin-top: 5px !important;
    margin-bottom: 12px !important;
}

/* 3. Position: TEXT (Zusammenfassung) mit flexiblem Wachstum */
.category .entry-summary, 
.category .entry-content,
.home .entry-summary,
.home .entry-content {
    order: 3 !important;
    flex-grow: 1 !important; /* Drückt nachfolgende Elemente nach ganz unten */
    margin-bottom: 20px !important;
}

/* 4. Position: DER LINK fixiert am unteren Rand der Karte */
.custom-read-more-container {
    order: 4 !important;
    margin-top: auto !important; /* Schiebt den Link unerbittlich ans Ende der Box */
    text-align: left !important;
    padding-top: 10px !important;
}

/* Edles Design für den Weiterführenden Link */
.custom-grid-read-more {
    display: inline-block !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #111827 !important; /* Kerniges Anthrazit passend zur aktiven Pagination */
    text-decoration: none !important;
    transition: all 0.2s ease-in-out !important;
}

/* Hover-Effekt für den Link */
.custom-grid-read-more:hover {
    color: #4b5563 !important; /* Sanfter Grauton beim Hovern */
    text-decoration: underline !important;
    transform: translateX(3px) !important; /* Minimaler, dynamischer Bewegungseffekt des Pfeils */
}

/* --- Theme-eigene Weiterlesen-Links ausblenden & Abstände optimieren --- */

/* Blendet den standardmäßigen GeneratePress "Read more" / "Weiterlesen" Link aus */
.category .read-more,
.home .read-more,
.category .entry-summary a.read-more,
.home .entry-summary a.read-more {
    display: none !important;
}

/* Verringert den Abstand zwischen dem Titel und dem darauffolgenden Text */
.category .entry-header,
.home .entry-header {
    margin-bottom: 4px !important; /* Standardwert deutlich verringert für mehr Nähe */
}

.category .entry-summary, 
.category .entry-content,
.home .entry-summary,
.home .entry-content {
    margin-top: 0 !important; /* Verhindert zusätzlichen oberen Abstand beim Text */
}

/* --- Neues, modernes Design für den eigenen Weiterlesen-Button --- */

/* Überschreibt das alte Link-Design und macht daraus einen echten Button */
.custom-grid-read-more {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 8px 16px !important; /* Gibt dem Button eine schöne Form */
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #374151 !important; /* Angenehmes, dunkles Graphitgrau */
    background-color: #ffffff !important; /* Weißer Button-Hintergrund */
    border: 1px solid #d1d5db !important; /* Dezenter, dünner Rahmen */
    border-radius: 6px !important; /* Weiche, moderne Ecken-Abrundung */
    text-decoration: none !important;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important; /* Minimaler Tiefeneffekt */
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Eleganter Hover-Zustand für den Button */
.custom-grid-read-more:hover {
    color: #ffffff !important; /* Schrift wird weiß */
    background-color: #111827 !important; /* Hintergrund wird vollflächig dunkel (Anthrazit) */
    border-color: #111827 !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.08) !important;
    transform: translateY(-1px) !important; /* Minimaler, edler "Anhebe-Effekt" */
    text-decoration: none !important; /* Verhindert den Standard-Unterstrich */
}

/* Verhindert das seitliche Verspringen (translateX) aus dem vorherigen Entwurf */
.custom-grid-read-more:hover {
    transform: translateY(-1px) !important;
}


/* =========================================================================
   RADIKALER NEUSTART: ULTRA-LESBARES & EINHEITLICHES BREADCRUMB-DESIGN
   (Gilt identisch für Beiträge, Seiten, 404 und Kategorien)
   ========================================================================= */

/* 1. Der Container - Schafft perfekte Struktur und visuellen Abstand */
.inside-content-breadcrumbs,
.category main .archive-direct-inside {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    width: 100% !important;
    background: transparent !important; /* Keine störenden Hintergrundboxen mehr */
    border: none !important; /* Entfernt alle Rahmen */
    padding: 0 0 12px 0 !important; /* Knackiger Innenabstand */
    margin-top: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-bottom: 28px !important; /* Deutlicher Abstand nach unten, damit der Titel atmen kann */
    
    /* Schrift-Optimierung für maximale Lesbarkeit */
    font-size: 14px !important; /* Leicht vergrößert für entspanntes Lesen */
    line-height: 1.5 !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
    letter-spacing: 0.02em !important; /* Minimaler Buchstabenvorschub für messerscharfe Darstellung */
}

/* 2. Die klickbaren Links - Hoher Kontrast & Sofort-Erkennung */
.inside-content-breadcrumbs .breadcrumb-link,
.category main .archive-direct-inside .breadcrumb-link {
    color: #2563eb !important; /* Ein klares, modernes Link-Blau für sofortige intuitive Klickbarkeit */
    text-decoration: none !important;
    font-weight: 500 !important;
    border-bottom: 1px solid transparent !important;
    transition: all 0.1s ease-in-out !important;
}

/* Hover-Zustand: Signalisiert die Interaktion elegant und scharf */
.inside-content-breadcrumbs .breadcrumb-link:hover,
.category main .archive-direct-inside .breadcrumb-link:hover {
    color: #1d4ed8 !important; /* Wird beim Drüberfahren ein Nuance dunkler */
    border-bottom: 1px solid #1d4ed8 !important; /* Edle Unterlinie direkt am Text statt klobigem Standard-Unterstrich */
}

/* 3. Das Trennzeichen - Neutral und strukturierend */
.inside-content-breadcrumbs .breadcrumb-separator,
.category main .archive-direct-inside .breadcrumb-separator {
    margin: 0 12px !important; /* Großzügiger Freiraum links und rechts für das Auge */
    color: #9ca3af !important; /* Angenehmes Neutralgrau */
    font-size: 12px !important;
    font-weight: 400 !important;
    user-select: none !important;
}

/* 4. Der aktuelle Standort (Ganz hinten) - Maximale Schärfe */
.inside-content-breadcrumbs .breadcrumb-current,
.category main .archive-direct-inside .breadcrumb-current {
    color: #111827 !important; /* Tiefes, sattes Anthrazit/Fast-Schwarz für maximalen Lesekontrast */
    font-weight: 600 !important; /* Kräftigerer Schnitt, damit der Leser sofort weiß, wo er steht */
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 350px !important; /* Genug Platz für den Titel */
}

/* 5. Perfekte mobile Anpassung (Smartphones) */
@media (max-width: 768px) {
    .inside-content-breadcrumbs,
    .category main .archive-direct-inside {
        margin-bottom: 20px !important;
        font-size: 13px !important; /* Auf Handys minimal dezenter, bleibt aber hochgradig lesbar */
    }
    
    .inside-content-breadcrumbs .breadcrumb-separator,
    .category main .archive-direct-inside .breadcrumb-separator {
        margin: 0 8px !important;
    }

    .inside-content-breadcrumbs .breadcrumb-current,
    .category main .archive-direct-inside .breadcrumb-current {
        max-width: 180px !important; /* Verhindert Zeilenbrüche auf kleinen Displays */
    }
}


/* =========================================================================
   ALLE FOOTER-WIDGETS MOBIL AUSMISTEN – ABER SHORTCODE IM MENÜ RETTEN
   ========================================================================= */

@media (max-width: 768px) {
    /* 1. Schaltet die echten, standardmäßigen Footer-Spalten der Webseite ab */
    .site-footer .footer-widgets,
    .site-footer .footer-widgets-container,
    .site-footer .inside-footer-widgets,
    .site-footer [class*="footer-widget-"] {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* 2. DIE RETTUNG: Zwingt den Shortcode im mobilen Menü-Overlay, aktiv zu bleiben */
    .footer-menu-overlay .footer-overlay-widget-zone,
    .footer-menu-overlay .footer-overlay-widget-zone .widget {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        height: auto !important;
        padding: 20px !important; /* Gibt dem neuesten Beitrag im Menü wieder schön Luft */
        margin: 15px 0 0 0 !important;
    }
}


/* =========================================================================
   AUTOMATISCHE LÄNDERFLAGGEN FÜR DEN [laender] SHORTCODE
   ========================================================================= */

/* Schafft Platz und sorgt dafür, dass die Flagge sauber vor dem Ländernamen steht */
.post-term--land {
    display: inline-flex !important;
    align-items: center !important;
}

/* Definition der Flaggen basierend auf dem eingetragenen Term-Slug */
.flag-id-de::before { content: "🇩🇪\a0" !important; } /* \a0 ist ein geschütztes Leerzeichen */
.flag-id-at::before { content: "🇦🇹\a0" !important; }
.flag-id-ch::before { content: "🇨🇭\a0" !important; }
.flag-id-us::before { content: "🇺🇸\a0" !important; }
.flag-id-gb::before { content: "🇬🇧\a0" !important; }
.flag-id-fr::before { content: "🇫🇷\a0" !important; }
.flag-id-be::before { content: "🇧🇪\a0" !important; }
.flag-id-se::before { content: "🇸🇪\a0" !important; }
.flag-id-jp::before { content: "🇯🇵\a0" !important; }


/* =========================================================================
   KOMPAKTE KACHELN FÜR DEN INHALTSBEREICH (ALLE KATEGORIEN)
   ========================================================================= */
.inside-article .spotify-grid-compact {
    display: grid !important;
    /* Verwendet 2 Spalten auf dem Handy, skaliert automatisch hoch auf Desktops */
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)) !important;
    gap: 12px !important; /* Etwas engerer Abstand für kleinere Boxen */
    margin: 24px 0 !important;
}

.inside-article .spotify-grid-compact .spotify-card {
    height: 64px !important; /* Deutlich flacher (von 100px auf 64px verkleinert) */
    padding: 10px 8px !important; /* Kompakteres Innenmaß */
}

.inside-article .spotify-grid-compact .spotify-card span {
    font-size: 13px !important; /* Schrift minimal verkleinert für besseren Textfluss */
    font-weight: 500 !important;
    line-height: 1.15 !important;
    max-width: 80% !important;
}

/* Position und Skalierung der Hintergrund-Icons an die kleinere Box anpassen */
.inside-article .spotify-grid-compact .cat-fallback-img {
    width: 38px !important; /* Icon verkleinert (von 50px auf 38px) */
    height: 38px !important;
    bottom: -4px !important;
    right: -6px !important;
    opacity: 0.12 !important;
}


/* Dark Mode Absicherung für die Beitrags-Karten (Wöchentlich & Reihe) */
body.dark-contrast .weekly-post-card {
    background-color: #1f2937 !important; /* Anthrazitfarbene Karten auf schwarzem Grund */
    border-color: #4b5563 !important;
}

body.dark-contrast .weekly-post-card-title a {
    color: #ffffff !important;
}

body.dark-contrast .weekly-post-card-title a:hover {
    color: #60a5fa !important;
}

body.dark-contrast .weekly-post-excerpt {
    color: #d1d5db !important;
}

body.dark-contrast .weekly-post-link {
    color: #60a5fa !important;
}

body.dark-contrast .weekly-post-image-wrapper {
    background-color: #121212 !important;
}

body.dark-contrast .reihe-sektion-titel {
    color: #ffffff !important;
}

body.dark-contrast .kategorie-sektion-titel {
    color: #ffffff !important;
}


/* =========================================================================
   ERWEITERTE SHARIFF SOCIAL SHARE BUTTONS (8 NETZWERKE)
   ========================================================================= */
.shariff-share-container {
    margin: 25px 0;
    width: 100%;
}

.shariff-share-list {
    display: grid;
    /* Grid mit flexiblen Spalten, das sich dynamisch anordnet */
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: 8px;
    padding: 0;
    margin: 0;
    list-style: none;
}

.shariff-item {
    margin: 0;
    padding: 0;
}

.shariff-item a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 10px;
    color: #ffffff !important;
    text-decoration: none !important;
    font-size: 12px;
    font-weight: 600;
    border-radius: 4px;
    transition: background-color 0.2s ease, transform 0.1s ease;
    box-sizing: border-box;
}

.shariff-item a:hover {
    transform: translateY(-1px);
}

.shariff-item .shariff-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* BRAND COLORS (LIGHT-MODE) */
.shariff-item.facebook a  { background-color: #1877f2; }
.shariff-item.facebook a:hover { background-color: #145dbf; }

.shariff-item.x-twitter a { background-color: #000000; }
.shariff-item.x-twitter a:hover { background-color: #1a1a1a; }

.shariff-item.bluesky a   { background-color: #0285ff; }
.shariff-item.bluesky a:hover { background-color: #0066cc; }

.shariff-item.mastodon a  { background-color: #6364ff; }
.shariff-item.mastodon a:hover { background-color: #5051db; }

.shariff-item.reddit a    { background-color: #ff4500; }
.shariff-item.reddit a:hover { background-color: #d93a00; }

.shariff-item.pinterest a { background-color: #e60023; }
.shariff-item.pinterest a:hover { background-color: #b8001c; }

.shariff-item.whatsapp a  { background-color: #25d366; }
.shariff-item.whatsapp a:hover { background-color: #1ebd58; }

.shariff-item.email a     { background-color: #4b5563; }
.shariff-item.email a:hover { background-color: #374151; }

/* Mobile Displays unter 480px: Text ausblenden für ein kompaktes Icon-Grid */
@media (max-width: 480px) {
    .shariff-share-list {
        grid-template-columns: repeat(4, 1fr); /* Genau 4 Buttons pro Zeile mobil */
    }
    .shariff-label {
        display: none;
    }
    .shariff-item a {
        padding: 10px;
    }
}

/* --- BARRIEREFREIHEIT / DARK-MODE KONTRAST-ANPASSUNGEN --- */
body.dark-contrast .shariff-item a {
    border: 1px solid #4b5563;
}
body.dark-contrast .shariff-item.facebook a  { background-color: #0c5dc7; }
body.dark-contrast .shariff-item.facebook a:hover { background-color: #094799; }

body.dark-contrast .shariff-item.x-twitter a { background-color: #1f2937; }
body.dark-contrast .shariff-item.x-twitter a:hover { background-color: #111827; }

body.dark-contrast .shariff-item.bluesky a   { background-color: #0066cc; }
body.dark-contrast .shariff-item.bluesky a:hover { background-color: #004c99; }

body.dark-contrast .shariff-item.mastodon a  { background-color: #4849cc; }
body.dark-contrast .shariff-item.mastodon a:hover { background-color: #3738a0; }

body.dark-contrast .shariff-item.reddit a    { background-color: #cc3700; }
body.dark-contrast .shariff-item.reddit a:hover { background-color: #992900; }

body.dark-contrast .shariff-item.pinterest a { background-color: #b8001c; }
body.dark-contrast .shariff-item.pinterest a:hover { background-color: #8f0015; }

body.dark-contrast .shariff-item.whatsapp a  { background-color: #1ebd58; }
body.dark-contrast .shariff-item.whatsapp a:hover { background-color: #169443; }

body.dark-contrast .shariff-item.email a     { background-color: #374151; }
body.dark-contrast .shariff-item.email a:hover { background-color: #1f2937; }

body.dark-contrast .social-share-titel {
    color: #ffffff !important;
}


/* =========================================================================
   PRODUKT-BOX CTA BUTTON
   ========================================================================= */
.product-box__cta-wrapper {
    margin: 15px 0;
}

/* Der Button nutzt standardmäßig die 'button'-Klasse deines Themes, wird hier aber spezifisch angepasst */
.product-box__cta-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background-color: #ff9900 !important; /* Amazon Orange */
    color: #111111 !important; /* Dunkler Text für idealen Kontrast auf Orange */
    padding: 10px 22px;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: 4px;
    text-decoration: none !important;
    transition: background-color 0.2s ease, transform 0.1s ease, box-shadow 0.2s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}

.product-box__cta-button:hover {
    background-color: #e68a00 !important; /* Etwas dunkleres Orange im Hover */
    transform: translateY(-1px);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.12);
}

.product-box__cta-button svg {
    flex-shrink: 0;
}

/* --- DARK-MODE KONTRAST-ANPASSUNG --- */
body.dark-contrast .product-box__cta-button {
    background-color: #f59e0b !important; /* Etwas satteres, kontraststarkes Bernstein-Orange für Barrierefreiheit */
    color: #000000 !important;
    border: 1px solid #b45309;
}

body.dark-contrast .product-box__cta-button:hover {
    background-color: #d97706 !important;
}


/* Sprecherliste Styling */
.hoerspiel-cast-container {
    margin: 30px 0;
    padding: 20px;
    background-color: rgba(0, 0, 0, 0.02);
    border-radius: 6px;
    border-left: 4px solid #ff9900;
}

.hoerspiel-cast__title {
    margin-top: 0;
    margin-bottom: 15px;
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.hoerspiel-cast__list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.hoerspiel-cast__item {
    display: block;
    width: 100%;
    padding: 6px 0;
    border-bottom: 1px dotted rgba(0, 0, 0, 0.1); /* Tippfehler korrigiert */
    font-size: 14px;
}

.hoerspiel-cast__item:last-child {
    border-bottom: none;
}

.hoerspiel-cast__character {
    font-weight: 600;
    color: #333333;
}

.hoerspiel-cast__separator {
    color: #999999;
    margin: 0 4px;
}

.hoerspiel-cast__actor {
    color: #666666;
}

/* --- DARK-MODE KONTRAST-ANPASSUNG --- */
body.dark-contrast .hoerspiel-cast-container {
    background-color: #1f2937 !important;
    border-left-color: #f59e0b;
}

body.dark-contrast .hoerspiel-cast__character {
    color: #ffffff !important;
}

body.dark-contrast .hoerspiel-cast__separator {
    color: #9ca3af !important;
}

body.dark-contrast .hoerspiel-cast__actor {
    color: #9ca3af !important;
}

body.dark-contrast .hoerspiel-cast__item {
    border-bottom-color: rgba(255, 255, 255, 0.1);
}


/* Produktionsliste Styling */
.hoerspiel-production-container {
    margin: 30px 0;
    padding: 20px;
    background-color: rgba(0, 0, 0, 0.02);
    border-radius: 6px;
    border-left: 4px solid #111111; /* Dunklerer Akzent zur Unterscheidung vom Cast */
}

.hoerspiel-production__title {
    margin-top: 0;
    margin-bottom: 15px;
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.hoerspiel-production__list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.hoerspiel-production__item {
    display: block;
    width: 100%;
    padding: 6px 0;
    border-bottom: 1px dotted rgba(0, 0, 0, 0.1);
    font-size: 14px;
}

.hoerspiel-production__item:last-child {
    border-bottom: none;
}

.hoerspiel-production__role {
    font-weight: 600;
    color: #333333;
}

.hoerspiel-production__separator {
    color: #333333;
    margin-right: 4px;
}

.hoerspiel-production__names {
    color: #666666;
}

/* --- DARK-MODE KONTRAST-ANPASSUNG --- */
body.dark-contrast .hoerspiel-production-container {
    background-color: #1f2937 !important;
    border-left-color: #ffffff;
}

body.dark-contrast .hoerspiel-production__role {
    color: #ffffff !important;
}

body.dark-contrast .hoerspiel-production__separator {
    color: #ffffff !important;
}

body.dark-contrast .hoerspiel-production__names {
    color: #9ca3af !important;
}

body.dark-contrast .hoerspiel-production__item {
    border-bottom-color: rgba(255, 255, 255, 0.1);
}