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

/* 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;
}

/* Rechtliche Links: standardmäßig ausgeblendet, nur mobil sichtbar (siehe Media Query unten) */
.rechtliche-links-mobile-wrap {
    display: none;
}

@media (max-width: 768px) {
    .rechtliche-links-mobile-wrap {
        display: block;
        text-align: center;
        padding: 14px 16px 76px 16px; /* Unten extra Platz wegen der fixen Mobile-Leiste (60px + Puffer) */
        background-color: inherit;
    }

    .rechtliche-links {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px;
        font-size: 12px;
    }

    .rechtliche-links a {
        color: inherit;
        text-decoration: underline;
        opacity: 0.85;
    }

    .rechtliche-links a:hover {
        opacity: 1;
    }

    .rechtliche-links span {
        opacity: 0.5;
    }
}

/* Schließen-Button (X) - GILT IMMER, unabhängig von Bildschirmbreite (Desktop & Mobile) */
.close-menu-btn {
    background: none !important;
    background-color: transparent !important;
    border: none !important;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-tap-highlight-color: transparent;
}

.close-menu-btn:hover,
.close-menu-btn:focus,
.close-menu-btn:active,
.close-menu-btn:focus-visible {
    background: none !important;
    background-color: transparent !important;
    border: none !important;
    outline: none;
    box-shadow: none !important;
}

@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;
    }

    .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;
    }

    .footer-overlay-nav > ul > li:last-child > a {
        border-bottom: none;
    }

    .sub-menu-toggle {
        position: absolute;
        right: 0;
        top: 4px; 
        width: 50px; 
        height: 38px;
        background: #ffffff; 
        border: 1.5px solid #9ca3af; 
        border-radius: 6px;
        cursor: pointer;
        transition: all 0.2s ease-in-out;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 2;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
        -webkit-tap-highlight-color: transparent;
    }

    .sub-menu-toggle:hover,
    .sub-menu-toggle:focus-visible {
        background: #fff3e0;
        border-color: #ff9900;
    }

    .sub-menu-toggle.is-rotated {
        background: #fff3e0;
        border-color: #ff9900;
    }

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

    .sub-menu-toggle:hover img,
    .sub-menu-toggle:focus img,
    .sub-menu-toggle:focus-visible img,
    .sub-menu-toggle:active img,
    .sub-menu-toggle.is-rotated img {
        opacity: 1 !important;
    }

    .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%) md(100%) 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-header-row {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 12px !important;
    margin-bottom: 16px !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-header-row .spotify-search-title {
    margin: 0 !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 .card-crimson  { background-color: #a4133c !important; }
.spotify-light-theme .card-amber    { background-color: #d68910 !important; }
.spotify-light-theme .card-violet   { background-color: #6a3093 !important; }
.spotify-light-theme .card-cyan     { background-color: #0e7c86 !important; }
.spotify-light-theme .card-coral    { background-color: #d1495b !important; }
.spotify-light-theme .card-emerald  { background-color: #1b7a4d !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):not(.custom-grid-read-more):not(.weekly-post-link):not(.comment-reply-link):not(.ade-promo-box__btn):not(.shariff-item a):not(.ade-discover-box__link),
body.dark-contrast li a:not(.custom-grid-read-more):not(.weekly-post-link):not(.comment-reply-link):not(.ade-promo-box__btn):not(.shariff-item a):not(.ade-discover-box__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;
}

body.dark-contrast .menu-overlay-header {
    border: none !important;
    box-shadow: none !important;
}

body.dark-contrast .close-menu-btn img {
    filter: invert(1) !important;
    opacity: 1 !important;
}

body.dark-contrast .footer-overlay-nav .sub-menu {
    background-color: #1f2937 !important;
}

body.dark-contrast .footer-menu-overlay .footer-overlay-widget-zone .widget {
    background: transparent !important;
    color: #ffffff !important;
}

body.dark-contrast .sub-menu-toggle {
    background: #374151 !important;
    border-color: #6b7280 !important;
}

body.dark-contrast .sub-menu-toggle img {
    filter: invert(1) !important;
    opacity: 1 !important;
}

body.dark-contrast .sub-menu-toggle:hover,
body.dark-contrast .sub-menu-toggle:focus-visible,
body.dark-contrast .sub-menu-toggle.is-rotated {
    background: #7a4a00 !important;
    border-color: #ff9900 !important;
}

body.dark-contrast .sub-menu-toggle:hover img,
body.dark-contrast .sub-menu-toggle:focus img,
body.dark-contrast .sub-menu-toggle:focus-visible img,
body.dark-contrast .sub-menu-toggle:active img,
body.dark-contrast .sub-menu-toggle.is-rotated img {
    filter: invert(1) !important;
    opacity: 1 !important;
}

/* Absende-Button für das Kommentarformular - Einheitliches Design (identisch zu Weiterlesen & Antwort) */
body.dark-contrast #submit,
body.dark-contrast .submit {
    background-color: #ff9900 !important;
    color: #111111 !important;
    border: 1px solid #e68a00 !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: #1f2937 !important;
    border-top: 1px solid #374151 !important;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.4) !important;
}
body.dark-contrast .footer-bar-text {
    color: #f3f4f6 !important;
}

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

body.dark-contrast .gp-mobile-footer-bar .footer-bar-item.is-active-btn {
    background-color: #374151 !important;
}

body.dark-contrast .gp-mobile-footer-bar .footer-bar-item.is-active-btn .footer-bar-icon {
    filter: invert(43%) sepia(94%) saturate(1873%) hue-rotate(199deg) brightness(101%) contrast(97%) !important;
}

body.dark-contrast .gp-mobile-footer-bar .footer-bar-item.is-active-btn .footer-bar-text {
    color: #60a5fa !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 (PREMIUM MATCH)
   ========================================================================= */

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

/* Flexibles Grid-System, aufgeteilt nach Shortcode-Klassen */
.weekly-posts-grid {
    display: grid;
    gap: 20px;
}

/* 1. SONDERREGELUNG: Exakt 4 Spalten für den Shortcode [woechentliche_beitraege] */
.weekly-posts-container[aria-label*="Woche"] .weekly-posts-grid {
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}

@media (min-width: 1300px) {
    .weekly-posts-container[aria-label*="Woche"] .weekly-posts-grid {
        grid-template-columns: repeat(4, 1fr) !important; /* Strikte 4 Spalten auf Desktop */
    }
}

/* 2. STANDARDREGELUNG: Exakt 5 Spalten für [reihe_beitraege], [kategorie_beitraege] UND JETZT NEU [schlagwort_beitraege] */
.weekly-posts-container[aria-label*="Reihe"] .weekly-posts-grid,
.weekly-posts-container[aria-label*="Kategorie"] .weekly-posts-grid,
.weekly-posts-container[aria-label*="Schlagwort"] .weekly-posts-grid {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}

@media (min-width: 1300px) {
    .weekly-posts-container[aria-label*="Reihe"] .weekly-posts-grid,
    .weekly-posts-container[aria-label*="Kategorie"] .weekly-posts-grid,
    .weekly-posts-container[aria-label*="Schlagwort"] .weekly-posts-grid {
        grid-template-columns: repeat(5, 1fr) !important; /* Strikte 5 Spalten auf Desktop */
    }
}

/* Die Beitrags-Karte (AN DAS DEZENTE BOXEN-DESIGN ANGEPASST) */
.weekly-post-card {
    background-color: #f8fafc !important;             /* Identischer, hellgrauer Boxen-Hintergrund */
    border: 1px solid rgba(255, 153, 0, 0.35) !important; /* FIX: Dezenter, edler oranger Rahmen */
    border-radius: 8px !important;
    overflow: hidden; /* Schneidet das Bild an den abgerundeten Ecken sauber ab */
    display: flex;
    flex-direction: column;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03) !important;
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    width: 100%;
}

.weekly-post-card:hover {
    transform: translateY(-2px) !important; /* Harmonisiertes, dezentes Anheben */
    box-shadow: 0 5px 12px rgba(230, 138, 0, 0.12) !important; /* Edler, oranger Hover-Schatten */
}

/* 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;
    max-height: 300px; 
    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 (MIT FILIGRANER TRENNLINIE) */
.weekly-post-card-title {
    margin: 0 0 10px 0;
    font-size: 16px;
    line-height: 1.4;
    border-bottom: 1px solid rgba(255, 153, 0, 0.45) !important; /* FIX: 1px dünner oranger Trennstrich */
    padding-bottom: 8px !important;
}

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

.weekly-post-card-title a:hover {
    color: #ff9900 !important; /* Hover-Farbe wechselt elegant auf das Marken-Orange */
}

/* Textausschnitt */
.weekly-post-excerpt {
    color: #4b5563;
    font-size: 13px;
    line-height: 1.6;
    margin-top: 4px !important; /* Ausgleich für den Strich-Abstand */
    margin-bottom: 15px;
}

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

/* --- Premium CTA-Button im Amazon-Orange zur CTR-Optimierung --- */
.weekly-post-link {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 10px 22px !important; /* Optimale Touch-Fläche für Smartphones */
    font-size: 13.5px !important;
    font-weight: 700 !important; /* Extra fette Schrift für maximale Eyecatcher-Wirkung */
    text-transform: uppercase !important; /* Versalien forcieren den Interaktions-Charakter */
    letter-spacing: 0.5px !important;
    
    /* Farbpsychologisches Konzept für höchste Abschlüsse */
    color: #111111 !important; /* Tiefdunkles Anthrazit sichert perfekten Kontrast nach WCAG */
    background-color: #ff9900 !important; /* Sattes Amazon-Orange */
    border: 1px solid #e68a00 !important; 
    border-radius: 6px !important; 
    text-decoration: none !important;
    margin-top: auto !important; /* Drückt den Button fest an das untere Ende der Inhaltsbox */
    
    /* Plastische Tiefenwirkung durch haptischen Bodenschatten */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08) !important; 
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Interaktiver Hover-Zustand: Signalisiert direkte Reaktivität */
.weekly-post-link:hover {
    color: #111111 !important;
    background-color: #f59e0b !important; /* Helleres, strahlendes Bernstein-Orange */
    border-color: #d97706 !important;
    box-shadow: 0 5px 12px rgba(230, 138, 0, 0.25) !important; /* Warmer Glüh-Schatten */
    transform: translateY(-2px) !important; /* Physikalisches Anheben entgegen dem Cursor */
    text-decoration: none !important;
}

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

/* =========================================================================
   SHORTCODE GRIDS DARK MODE EXTENSION (Für body.dark-contrast)
   ========================================================================= */
body.dark-contrast .weekly-post-card {
    background-color: #1e293b !important;   /* Dunkles Anthrazit/Slate-Grau */
    border-color: rgba(255, 153, 0, 0.4) !important; /* Sanftes oranges Leuchten im Dunkeln */
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3) !important;
}

body.dark-contrast .weekly-post-card-title {
    border-bottom-color: rgba(255, 153, 0, 0.4) !important; /* Orange Linie bleibt im Dunkeln dezent aktiv */
}

body.dark-contrast .weekly-post-card-title a {
    color: #f1f5f9 !important;               /* Helles Cremeweiß für Titel */
}

body.dark-contrast .weekly-post-excerpt {
    color: #cbd5e1 !important;               /* Angenehmes Hellgrau für Auszugstext */
}


/* --- 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: stretch;
    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;
    justify-content: space-between;
    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-excerpt {
    color: #4b5563;
    font-size: 13px;
    line-height: 1.6;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 6;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
}

.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 Kategorie-, Reihe- und Archivansicht --- */

/* Wir schalten das Grid auf dem Hauptcontainer ein */
.category main,
.tax-reihe main,
.archive 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,
    .tax-reihe main,
    .archive main {
        display: flex !important;
        flex-direction: column;
    }
    
    /* Der Grid-Gap sorgt jetzt allein für den Abstand nach der Titel-Box (konsistent mit dem Rest des Grids) */
    .category main .page-header,
    .tax-reihe main .page-header,
    .archive main .page-header {
        margin-bottom: 0 !important; 
    }

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

    /* CSS Grid Trick: Wir zwingen die Beitrags-Liste in ein separates Raster */
    .category main,
    .tax-reihe main,
    .archive 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,
    .tax-reihe main .page-header,
    .tax-reihe main .paging-navigation,
    .tax-reihe main .pagination,
    .tax-reihe main nav.navigation,
    .archive main .page-header,
    .archive main .paging-navigation,
    .archive main .pagination,
    .archive 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,
    .tax-reihe main,
    .archive 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,
    .tax-reihe main .page-header,
    .tax-reihe main .paging-navigation,
    .tax-reihe main .pagination,
    .tax-reihe main nav.navigation,
    .archive main .page-header,
    .archive main .paging-navigation,
    .archive main .pagination,
    .archive main nav.navigation {
        grid-column: 1 / -1;
    }
}

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

.category article.post,
.tax-reihe article.post,
.archive 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,
.tax-reihe article.post .inside-article,
.archive 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,
.tax-reihe .post-image,
.archive .post-image {
    width: 100%;
    aspect-ratio: 16 / 9; 
    overflow: hidden;
}

.category .post-image img,
.tax-reihe .post-image img,
.archive .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,
.tax-reihe .entry-summary, 
.tax-reihe .entry-content,
.archive .entry-summary, 
.archive .entry-content {
    flex-grow: 1; 
}

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

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

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

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

/* =========================================================================
   PAGINATION IM DEZENTEN PREMIUM-BOXEN-DESIGN (UNIFORM MATCH)
   ========================================================================= */

/* 1. Den gesamten Pagination-Block aus dem Grid befreien */
.category .pagination,
.category .nav-links,
.category .loop-pagination,
.category nav.navigation,
.tax-reihe .pagination,
.tax-reihe .nav-links,
.tax-reihe .loop-pagination,
.tax-reihe nav.navigation,
.archive .pagination,
.archive .nav-links,
.archive .loop-pagination,
.archive nav.navigation {
    display: block !important;
    width: 100% !important;
    clear: both !important;
    margin: 70px 0 30px 0 !important; 
    text-align: center !important;
    grid-column: 1 / -1 !important;
}

/* 2. Container für die freistehenden Buttons */
.category nav .nav-links,
.category .loop-pagination,
.tax-reihe nav .nav-links,
.tax-reihe .loop-pagination,
.archive nav .nav-links,
.archive .loop-pagination {
    display: inline-flex !important;
    background-color: transparent !important;
    padding: 0 !important;
    border: none !important;
    box-shadow: none !important;
    gap: 10px !important; 
    justify-content: center !important;
    align-items: center !important;
}

/* 3. Die einzelnen Tasten – EXAKTES DEZENTES BOXEN-DESIGN */
.category nav .page-numbers,
.category .loop-pagination .page-numbers,
.tax-reihe nav .page-numbers,
.tax-reihe .loop-pagination .page-numbers,
.archive nav .page-numbers,
.archive .loop-pagination .page-numbers {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 46px !important;        /* Perfekte, barrierefreie Dimensionen */
    height: 46px !important;
    padding: 0 18px !important;       
    
    /* Typografischer Match */
    font-size: 14px !important;
    font-weight: 600 !important;       
    letter-spacing: 0.5px !important;
    text-decoration: none !important;
    box-sizing: border-box !important;
    -webkit-appearance: none;
    
    /* Boxen-Design Match (Hellgrau mit dünnem orangen Rand) */
    color: #1e293b !important;         
    background-color: #f8fafc !important; 
    border: 1px solid rgba(255, 153, 0, 0.35) !important; 
    border-radius: 8px !important;    
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03) !important; 
    transition: all 0.2s ease-in-out !important;
}

/* Dynamischer Hover-Effekt: Nimmt dezent die Akzentfarbe an */
.category nav a.page-numbers:hover,
.category .loop-pagination a.page-numbers:hover,
.tax-reihe nav a.page-numbers:hover,
.tax-reihe .loop-pagination a.page-numbers:hover,
.archive nav a.page-numbers:hover,
.archive .loop-pagination a.page-numbers:hover {
    color: #ff9900 !important;
    border-color: rgba(255, 153, 0, 0.7) !important;
    transform: translateY(-2px) !important; 
    box-shadow: 0 5px 12px rgba(230, 138, 0, 0.12) !important; 
}

/* Die aktive Seite: Vollflächig hervorgehoben für klare Orientierung */
.category nav .page-numbers.current,
.category .loop-pagination .page-numbers.current,
.tax-reihe nav .page-numbers.current,
.tax-reihe .loop-pagination .page-numbers.current,
.archive nav .page-numbers.current,
.archive .loop-pagination .page-numbers.current {
    color: #ffffff !important;
    background-color: #ff9900 !important; /* Marken-Orange für das aktive Element */
    border-color: #e68a00 !important;
    font-weight: 700 !important;
    transform: none !important;
    box-shadow: 0 2px 6px rgba(255, 153, 0, 0.2) !important;
    cursor: default !important;
}

/* Richtungspfeile (prev/next) */
.category nav .page-numbers.prev,
.category nav .page-numbers.next,
.category .loop-pagination .page-numbers.prev,
.category .loop-pagination .page-numbers.next,
.tax-reihe nav .page-numbers.prev,
.tax-reihe nav .page-numbers.next,
.tax-reihe .loop-pagination .page-numbers.prev,
.tax-reihe .loop-pagination .page-numbers.next,
.archive nav .page-numbers.prev,
.archive nav .page-numbers.next,
.archive .loop-pagination .page-numbers.prev,
.archive .loop-pagination .page-numbers.next {
    background-color: #f8fafc !important;
    color: #1e293b !important;
}

/* Die Auslassungspunkte (...) - Schwebend und rahmenlos isoliert */
.category nav .page-numbers.dots,
.category .loop-pagination .page-numbers.dots,
.tax-reihe nav .page-numbers.dots,
.tax-reihe .loop-pagination .page-numbers.dots,
.archive nav .page-numbers.dots,
.archive .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;
}

/* =========================================================================
   DARK MODE EXTENSION FOR PAGINATION (FÜR body.dark-contrast)
   Zielt exakt auf den weißen Balken, ohne die Beitragsboxen zu berühren
   ========================================================================= */

/* FIX: Schaltet ausschließlich den Hintergrund der Seitennummerierungs-Zeile um */
body.dark-contrast nav.pagination,
body.dark-contrast nav.navigation.pagination,
body.dark-contrast .paging-navigation {
    background-color: transparent !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Die einzelnen Zahlen-Tasten im Dark Mode */
body.dark-contrast nav.pagination .page-numbers,
body.dark-contrast .paging-navigation .page-numbers {
    background-color: #1e293b !important; /* Dunkles Anthrazit/Slate-Grau */
    border: 1px solid rgba(255, 153, 0, 0.4) !important; /* Sanftes oranges Leuchten */
    color: #cbd5e1 !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3) !important;
}

/* Hover-Zustand der Tasten im Dark Mode */
body.dark-contrast nav.pagination a.page-numbers:hover,
body.dark-contrast .paging-navigation a.page-numbers:hover {
    color: #ff9900 !important;
    border-color: rgba(255, 153, 0, 0.8) !important;
    background-color: #1e293b !important;
    box-shadow: 0 5px 12px rgba(230, 138, 0, 0.2) !important;
}

/* Die aktive Seite (Current) im Dark Mode - Bleibt leuchtend orange */
body.dark-contrast nav.pagination .page-numbers.current,
body.dark-contrast .paging-navigation .page-numbers.current {
    color: #ffffff !important;
    background-color: #ff9900 !important; 
    border-color: #e68a00 !important;
    box-shadow: 0 2px 6px rgba(255, 153, 0, 0.3) !important;
}

/* Richtungstasten (prev/next) im Dark Mode */
body.dark-contrast nav.pagination .page-numbers.prev,
body.dark-contrast nav.pagination .page-numbers.next,
body.dark-contrast .paging-navigation .page-numbers.prev,
body.dark-contrast .paging-navigation .page-numbers.next {
    background-color: #1e293b !important;
    color: #cbd5e1 !important;
}

/* Auslassungspunkte (...) im Dark Mode */
body.dark-contrast nav.pagination .page-numbers.dots,
body.dark-contrast .paging-navigation .page-numbers.dots {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: #64748b !important;
}


/* =========================================================================
   ERSTELLE STRUKTUR: BILD ➔ TITEL ➔ TEXT ➔ WEITERLESEN-LINK
   Harmonisiert mit dem dezenten, orangen Premium-Boxen-Design
   ========================================================================= */

/* Bereitet die Beitrags-Karten für eine kontrollierte Elementen-Reihenfolge vor */
.category article.post .inside-article,
.tax-reihe article.post .inside-article,
.archive article.post .inside-article,
.home article.post .inside-article {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    height: 100% !important;
    
    /* DAS NEUE BOXEN-DESIGN MATCH */
    background-color: #f8fafc !important;
    border: 1px solid rgba(255, 153, 0, 0.35) !important; /* Dezenter oranger Rahmen */
    border-radius: 8px !important;
    padding: 25px !important; /* FIX: Exakt 25px für nahtlose Bildbündigkeit */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03) !important;
    box-sizing: border-box !important;
}

/* 1. Position: BILD ganz oben platzieren und nahtlos an die Ränder ziehen */
.category .post-image,
.tax-reihe .post-image,
.archive .post-image,
.home .post-image {
    order: 1 !important;
    margin: -25px -25px 15px -25px !important; /* Zieht das Bild perfekt bündig an die Kanten */
    width: calc(100% + 50px) !important;
    max-width: none !important;
}

/* 2. Position: TITEL unter das Bild setzen mit filigranem orangenem Strich */
.category .entry-header,
.tax-reihe .entry-header,
.archive .entry-header,
.home .entry-header {
    order: 2 !important;
    margin-top: 5px !important;
    margin-bottom: 4px !important; /* Minimierter Abstand zum Text für mehr Nähe */
    border-bottom: 1px solid rgba(255, 153, 0, 0.45) !important; /* Filigraner oranger Trennstrich */
    padding-bottom: 8px !important;
}

/* 3. Position: TEXT (Zusammenfassung) mit flexiblem Wachstum */
.category .entry-summary, 
.category .entry-content,
.tax-reihe .entry-summary, 
.tax-reihe .entry-content,
.archive .entry-summary, 
.archive .entry-content,
.home .entry-summary,
.home .entry-content {
    order: 3 !important;
    flex-grow: 1 !important; /* Drückt den Weiterlesen-Link unerbittlich nach unten */
    margin-top: 12px !important; /* Schafft sauberen Platz unter dem Titel-Strich */
    margin-bottom: 20px !important;
}

/* 4. Position: DER LINK fixiert am untersten Rand der Karte */
.custom-read-more-container {
    order: 4 !important;
    margin-top: auto !important; 
    text-align: left !important;
    padding-top: 10px !important;
}

/* --- Theme-eigene Weiterlesen-Links ausblenden --- */
.category .read-more,
.tax-reihe .read-more,
.archive .read-more,
.home .read-more,
.category .entry-summary a.read-more,
.tax-reihe .entry-summary a.read-more,
.archive .entry-summary a.read-more,
.home .entry-summary a.read-more {
    display: none !important;
}


/* =========================================================================
   PREMIUM CTA-BUTTON IM AMAZON-ORANGE (CTR-OPTIMIERT)
   ========================================================================= */
.custom-grid-read-more {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 10px 22px !important; 
    font-size: 13.5px !important;
    font-weight: 700 !important; /* Maximale Eyecatcher-Wirkung */
    text-transform: uppercase !important; 
    letter-spacing: 0.5px !important;
    
    color: #111111 !important; /* Perfekter Kontrast nach WCAG */
    background-color: #ff9900 !important; /* Sattes Amazon-Orange */
    border: 1px solid #e68a00 !important; 
    border-radius: 6px !important; 
    text-decoration: none !important;
    
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08) !important; 
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Interaktiver Hover-Zustand */
.custom-grid-read-more:hover {
    color: #111111 !important;
    background-color: #f59e0b !important; /* Strahlendes Bernstein-Orange */
    border-color: #d97706 !important;
    box-shadow: 0 5px 12px rgba(230, 138, 0, 0.25) !important; /* Warmer Glüh-Schatten */
    transform: translateY(-2px) !important; 
    text-decoration: none !important;
}


/* =========================================================================
   1. DARK MODE FÜR DIE BEITRAGS-KARTEN (Ultrawuchtige Selektoren)
   ========================================================================= */

/* Zwingt den inneren Container der GeneratePress-Spalten unerbittlich auf Dunkel */
body.dark-contrast .generate-columns-container .inside-article,
body.dark-contrast .generate-columns-container article .inside-article,
body.dark-contrast article.post .inside-article,
body.dark-contrast .inside-article {
    background-color: #1e293b !important; /* Vertreibt das Weiß: Sattes Slate-Dunkelgrau */
    background: #1e293b !important;
    border: 1px solid rgba(255, 153, 0, 0.4) !important; /* Markanter oranger Rahmen */
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3) !important;
}

/* Fixiert die Titelzeile und deren feinen Trennstrich */
body.dark-contrast .generate-columns-container .entry-header,
body.dark-contrast .inside-article .entry-header,
body.dark-contrast .entry-header {
    border-bottom-color: rgba(255, 153, 0, 0.4) !important; 
}

/* Titel-Links im Dunkeln */
body.dark-contrast .generate-columns-container .entry-title a,
body.dark-contrast .inside-article .entry-title a,
body.dark-contrast .entry-title a {
    color: #f1f5f9 !important; /* Klares Cremeweiß */
    text-decoration: none !important;
}

body.dark-contrast .generate-columns-container .entry-title a:hover,
body.dark-contrast .inside-article .entry-title a:hover {
    color: #ff9900 !important; /* Orange beim Drüberrollen */
}

/* Zwingt sämtliche Textelemente innerhalb der Karte auf hohe Lesbarkeit */
body.dark-contrast .inside-article .entry-summary, 
body.dark-contrast .inside-article .entry-content,
body.dark-contrast .inside-article p,
body.dark-contrast .entry-summary,
body.dark-contrast .entry-summary p,
body.dark-contrast .entry-content p {
    color: #cbd5e1 !important; /* Perfekt lesbares Hellgrau */
}


/* =========================================================================
   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;
        background: transparent !important;
    }

    /* Social-Icons im Menü etwas höher/kompakter ansetzen */
    .footer-menu-overlay .footer-overlay-widget-zone .footer-overlay-social-widget {
        padding: 10px 20px 0 20px !important;
        margin: 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 - gezielt nur für die Herkunfts-Flagge in [hoerspiel_info] (.post-term-flag), NICHT für die Suche-Kacheln */
.post-term-flag.flag-id-de::before { content: "🇩🇪\a0" !important; } /* \a0 ist ein geschütztes Leerzeichen */
.post-term-flag.flag-id-at::before { content: "🇦🇹\a0" !important; }
.post-term-flag.flag-id-ch::before { content: "🇨🇭\a0" !important; }
.post-term-flag.flag-id-us::before { content: "🇺🇸\a0" !important; }
.post-term-flag.flag-id-gb::before { content: "🇬🇧\a0" !important; }
.post-term-flag.flag-id-fr::before { content: "🇫🇷\a0" !important; }
.post-term-flag.flag-id-be::before { content: "🇧🇪\a0" !important; }
.post-term-flag.flag-id-se::before { content: "🇸🇪\a0" !important; }
.post-term-flag.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;
}

/* Einheitliches Design: Der Weiterlesen-Button bleibt im Dark Mode identisch zum Light Mode (siehe .custom-grid-read-more) */

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;
}


/* =========================================================================
   "FOLGE UNS" ICONS (nur reine, farbige Icons, keine Button-Box)
   ========================================================================= */
.folge-uns-list {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 18px;
    list-style: none;
    margin: 5px 0;
    padding: 0;
}

.folge-uns-item a {
    display: inline-flex;
    transition: transform 0.15s ease, opacity 0.15s ease;
}

.folge-uns-item a:hover,
.folge-uns-item a:focus-visible {
    transform: translateY(-2px);
    opacity: 0.85;
}

.folge-uns-icon {
    display: inline-block;
    width: 44px;
    height: 44px;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.folge-uns-icon--facebook  { background-color: #1877f2; }
.folge-uns-icon--instagram { background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); }
.folge-uns-icon--bluesky   { background-color: #0285ff; }
.folge-uns-icon--whatsapp  { background-color: #25d366; }


/* =========================================================================
   "ENTDECKE MEHR" DISCOVER-BOX
   ========================================================================= */
.ade-discover-box {
    display: flex;
    align-items: stretch;
    border-radius: 12px;
    overflow: hidden;
    margin: 35px 0;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.15);
    min-height: 280px; /* Verhindert eine zu gedrungene Box bei sehr kurzem Text */
}

.ade-discover-box__image {
    position: relative;
    flex: 0 0 35%; /* Proportional statt fester Pixelbreite - skaliert mit der Box mit */
    max-width: 380px;
}

.ade-discover-box__image img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.ade-discover-box__content {
    flex: 1;
    padding: 35px 40px;
    background: linear-gradient(135deg, #f3d1e8 0%, #b8b3f0 100%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-sizing: border-box;
}

.ade-discover-box__title.ade-discover-box__title {
    color: #2e1f4d !important;
}

.ade-discover-box__text {
    color: #2e1f4d !important;
    font-size: 18px !important;
    line-height: 1.65 !important;
    margin: 0 !important;
}

body.dark-contrast .ade-discover-box__title.ade-discover-box__title {
    color: #2e1f4d !important;
}

body.dark-contrast .ade-discover-box__text.ade-discover-box__text {
    color: #2e1f4d !important;
}

@media (max-width: 768px) {
    .ade-discover-box {
        flex-direction: column;
        text-align: center;
    }

    .ade-discover-box__image {
        max-width: 100%;
        height: 220px;
    }

    .ade-discover-box__content {
        padding: 30px 25px;
    }
}


/* =========================================================================
   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.telegram a  { background-color: #0088cc; }
.shariff-item.telegram a:hover { background-color: #006ba3; }

.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 .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.telegram a  { background-color: #006ba3; }
body.dark-contrast .shariff-item.telegram a:hover { background-color: #00527d; }

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;
}


/* =========================================================================
   1. UNIFORM CARD DESIGN (Elegantes, dezentes Design für alle 3 Boxen)
   ========================================================================= */
.ade-card {
    background-color: #f8fafc;
    border: 1px solid rgba(255, 153, 0, 0.35); /* FIX: Sehr dezenter, edler oranger Rahmen */
    border-radius: 8px;
    padding: 24px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.03);
    box-sizing: border-box;
}

/* ANTI-FETT-IMMUNITÄT: Sichert normale Schriftstärken gegen Theme-Einflüsse */
.ade-card,
.ade-card span,
.ade-card li {
    font-weight: 400 !important; 
}

/* Einheitliche Titelzeilen */
.ade-card__title {
    margin-top: 0 !important;
    margin-bottom: 18px !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    color: #1e293b !important;
    border-bottom: 1px solid rgba(255, 153, 0, 0.45); /* FIX: Filigraner, 1px dünner oranger Trennstrich */
    padding-bottom: 8px;
}

/* Listen-Reset innerhalb der Boxen (Keine weiteren Striche vorhanden) */
.ade-card ul {
    list-style: none !important;
    padding-left: 0 !important;
    margin: 0 !important;
}

.ade-card li {
    margin-bottom: 10px !important;
    line-height: 1.5;
}

.ade-card li:last-child {
    margin-bottom: 0 !important;
}

/* =========================================================================
   2. ISOLATED 50/50 LAYOUT ENGINE (Symmetrische Abstands-Engine)
   ========================================================================= */
.ade-layout-wrapper {
    width: 100%;
    margin: 35px 0 !important; /* Äußerer Abstand zu Elementen davor/danach */
    padding: 0;
    box-sizing: border-box;
}

/* Desktop-Anordnung ab 992px */
@media (min-width: 992px) {
    .ade-layout-wrapper {
        display: grid;
        grid-template-columns: 1fr 1fr;  /* Exakt 50% / 50% Aufteilung */
        gap: 30px;                       /* Erzwingt horizontal UND vertikal exakt 30px Abstand */
        align-items: start;              /* Hält die Boxen-Köpfe bündig auf einer Linie */
    }

    /* Linke Spalte: Info + Produktion gestapelt, Höhe unabhängig von der rechten Spalte */
    .ade-layout-left-column {
        display: flex;
        flex-direction: column;
        gap: 30px;
    }
}

/* Mobile Darstellung (Symmetrische Stapelung untereinander & Video-Überlappungs-Fix) */
@media (max-width: 991px) {
    .ade-layout-wrapper {
        display: block !important;       /* Wechsel von Flex auf Block für verlässliches Clearing mobil */
        clear: both !important;          /* Schützt vor schwebenden Elementen */
        margin-bottom: 30px !important;  /* Schafft physische Barriere für nachfolgende Skripte/Videos */
    }

    /* Erzwingt den vertikalen Abstand zwischen den gestapelten Boxen im Block-Modus */
    .ade-layout-wrapper .ade-card {
        margin-bottom: 30px !important;
    }
    .ade-card--speaker {
        margin-bottom: 0 !important;     /* Die letzte Box benötigt keinen Abstand nach unten */
    }
    .ade-layout-wrapper--duo .ade-card--production {
        margin-bottom: 0 !important;     /* Ohne Sprecherliste ist "Produktion" die letzte Box */
    }
    /* Absicherung gegen Margin-Collapsing: verhindert, dass die Margin der letzten 
       Kind-Box (Produktion) nach außen "durchsickert" und dadurch der Abstand zur 
       Sprecherliste verloren geht */
    .ade-layout-left-column {
        display: block;
        overflow: hidden;
    }

    /* Injiziert einen unsichtbaren Riegel am Ende des Layouts, den absolut positionierte Blocker nicht überwinden können */
    .ade-layout-wrapper::after {
        content: "" !important;
        display: table !important;
        clear: both !important;
    }

    /* Drückt das nachfolgende Video und dessen DSGVO-Vorschau-Container gezielt nach unten */
    .lyte-wrapper,
    .wp-block-embed,
    .embed-youtube,
    iframe[src*="youtube"],
    div[class*="video"], 
    div[class*="youtube"],
    div[class*="preview"] {
        position: relative !important;
        top: 0 !important;
        clear: both !important;
        display: block !important;
        margin-top: 40px !important;    /* Garantiert den visuellen Abstand unter den Boxen */
    }
}

/* =========================================================================
   3. DARK MODE EXTENSION (Für body.dark-contrast)
   ========================================================================= */
body.dark-contrast .ade-card {
    background-color: #1e293b !important;   /* Dunkles Anthrazit/Slate-Grau */
    border-color: rgba(255, 153, 0, 0.4) !important; /* FIX: Auch im Dark Mode ein sanftes, weiches Leuchten */
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3) !important;
}

/* Titelzeile im Dark Mode */
body.dark-contrast .ade-card__title {
    color: #f1f5f9 !important;               /* Helles Cremeweiß */
    border-bottom-color: rgba(255, 153, 0, 0.4) !important; /* FIX: Dezente orange Trennlinie im Dunkeln */
}

/* Fließtext, Rollen und Sprecher im Dark Mode */
body.dark-contrast .ade-card,
body.dark-contrast .ade-card span,
body.dark-contrast .ade-card li {
    color: #cbd5e1 !important;               /* Angenehmes Hellgrau */
}

/* Trennzeichen (Doppelpunkt / Gedankenstrich) im Dark Mode */
body.dark-contrast .hoerspiel-production__separator,
body.dark-contrast .hoerspiel-cast-container span[aria-hidden="true"] {
    color: #64748b !important;               /* Abgedunkeltes Grau */
}

/* Hyperlinks (Reihen, Genres, Labels) im Dark Mode */
body.dark-contrast .ade-card a {
    color: #38bdf8 !important;               /* Leuchtendes Cyan-Blau für perfekten Kontrast */
    text-decoration: none !important;
}

body.dark-contrast .ade-card a:hover {
    color: #7dd3fc !important;               /* Sanfter Hover-Effekt (heller) */
    text-decoration: underline !important;
}


/* =========================================================================
   EXPERTEN PORTFOLIO (NEBENEINANDER - BILD UNBESCHNITTEN & TEXT OBEN)
   ========================================================================= */
.experten-portfolio {
    margin: 40px 0;
    width: 100%;
}

/* Listet die Experten untereinander auf */
.experten-portfolio__grid {
    display: flex;
    flex-direction: column;
    gap: 40px; 
}

/* Einzelne Experten-Zeile */
.experten-card {
    background-color: #f8fafc !important; /* Identisch zu allen anderen Grids */
    border-radius: 8px !important;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03) !important;
    border: 1.5px solid rgba(255, 153, 0, 0.6) !important; /* Deutlich kräftiger, damit er sicher sichtbar ist */
    display: flex;
    flex-direction: row; 
    align-items: flex-start; 
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.experten-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 12px rgba(230, 138, 0, 0.12) !important;
}

/* Bild-Bereich (Links) */
.experten-card__image-wrapper {
    flex-shrink: 0;
    width: 250px; 
    padding: 25px 0 25px 25px; 
    background-color: transparent;
}

.experten-card__image {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain; 
    border-radius: 4px; 
}

/* Content-Bereich (Rechts) */
.experten-card__content {
    padding: 25px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start; 
    flex-grow: 1;
}

.experten-card__name {
    margin: 0 0 4px 0 !important;
    font-size: 22px;
    font-weight: 700;
    color: #111111;
    line-height: 1.2;
}

.experten-card__subtitle {
    margin: 0 0 12px 0 !important;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #ff9900;
}

/* Aufgabenbereich */
.experten-card__tasks {
    font-size: 13px;
    line-height: 1.4;
    color: #444444;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255, 153, 0, 0.35) !important;
}

.experten-card__tasks strong {
    color: #111111;
    font-weight: 600;
}

/* Fließtext / Beschreibung */
.experten-card__description {
    font-size: 14px;
    line-height: 1.6;
    color: #555555;
}

.experten-card__description p:last-child {
    margin-bottom: 0;
}

.experten-card__social {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    list-style: none;
    margin: 16px 0 0 0;
    padding: 0;
}

.experten-card__social-item a {
    display: inline-flex;
    transition: transform 0.15s ease, opacity 0.15s ease;
}

.experten-card__social-item a:hover,
.experten-card__social-item a:focus-visible {
    transform: translateY(-2px);
    opacity: 0.85;
}

.experten-card__social-icon {
    display: inline-block;
    width: 26px;
    height: 26px;
    background-color: #6b7280; /* Neutrale Grundfarbe, pro Plattform unten überschrieben */
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.experten-card__social-item--website .experten-card__social-icon   { background-color: #4b5563; }
.experten-card__social-item--facebook .experten-card__social-icon  { background-color: #1877f2; }
.experten-card__social-item--instagram .experten-card__social-icon { background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); }
.experten-card__social-item--x .experten-card__social-icon         { background-color: #000000; }
.experten-card__social-item--youtube .experten-card__social-icon   { background-color: #ff0000; }
.experten-card__social-item--linkedin .experten-card__social-icon  { background-color: #0a66c2; }
.experten-card__social-item--tiktok .experten-card__social-icon    { background-color: #000000; }
.experten-card__social-item--bluesky .experten-card__social-icon   { background-color: #0285ff; }
.experten-card__social-item--mastodon .experten-card__social-icon  { background-color: #6364ff; }
.experten-card__social-item--spotify .experten-card__social-icon   { background-color: #1db954; }
.experten-card__social-item--patreon .experten-card__social-icon   { background-color: #f96854; }

.experten-card__posts {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 153, 0, 0.35) !important;
}

.experten-card__posts-title {
    font-size: 14px;
    font-weight: 700;
    color: #374151;
    margin: 0 0 8px 0;
}

.experten-card__posts-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(3, auto);
    grid-auto-flow: column;
    column-gap: 20px;
    row-gap: 10px;
}

.experten-card__posts-list a {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    text-decoration: underline;
    line-height: 1.3;
}

.experten-card__posts-thumb {
    width: 56px;
    height: 56px;
    border-radius: 6px;
    object-fit: cover;
    flex-shrink: 0;
}

body.dark-contrast .experten-card__posts {
    border-top-color: rgba(255, 153, 0, 0.4);
}

body.dark-contrast .experten-card__posts-title {
    color: #f3f4f6 !important;
}

/* =========================================================================
   RESPONSIVE DESIGN (MOBIL-ANPASSUNG)
   ========================================================================= */
@media (max-width: 768px) {
    .experten-portfolio__grid {
        gap: 25px;
    }

    .experten-card {
        flex-direction: column;
        align-items: center; 
    }
    
    .experten-card__image-wrapper {
        width: 100%;
        max-width: 200px; 
        padding: 20px 20px 0 20px; 
    }
    
    .experten-card__content {
        width: 100%;
        box-sizing: border-box;
        padding: 18px 20px;
        text-align: center;
    }

    .experten-card__name {
        font-size: 19px;
    }

    .experten-card__tasks {
        text-align: left; /* Fließtext bleibt linksbündig lesbar, nur Kopfbereich zentriert */
    }

    .experten-card__description {
        text-align: left;
    }

    .experten-card__social {
        justify-content: center;
    }

    .experten-card__posts {
        text-align: left;
    }

    .experten-card__posts-list {
        grid-template-columns: 1fr;
        grid-template-rows: none;
        grid-auto-flow: row;
        row-gap: 14px;
    }

    .experten-card__posts-thumb {
        width: 48px;
        height: 48px;
    }

    .experten-card__posts-list a {
        font-size: 14px;
    }
}

/* =========================================================================
   DARK-MODE KONTRAST-ANPASSUNG
   ========================================================================= */
body.dark-contrast .experten-card {
    background-color: #1f2937 !important;
    border-color: rgba(255, 153, 0, 0.4); /* Gleiches sanftes oranges Leuchten wie bei den Grids im Dark Mode */
}

body.dark-contrast .experten-card__name {
    color: #ffffff !important;
}

body.dark-contrast .experten-card__subtitle {
    color: #f59e0b !important;
}

body.dark-contrast .experten-card__tasks {
    color: #cbd5e1;
    border-bottom-color: rgba(255, 153, 0, 0.4);
    border-bottom-style: solid;
}

body.dark-contrast .experten-card__tasks strong {
    color: #ffffff;
}

body.dark-contrast .experten-card__description {
    color: #9ca3af !important;
}


/* =========================================================================
   EXPERTI-BOX UNTER BEITRÄGEN (UNIFORM DESIGN MATCH)
   ========================================================================= */
.experte-separator {
    margin: 40px 0 30px 0;
    border: 0;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
}

.beitrag-experte-box {
    background-color: #f8fafc;                  
    border: 1px solid rgba(255, 153, 0, 0.35); 
    border-radius: 8px;
    padding: 25px;
    margin-top: 30px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.03);
}

.beitrag-experte__header {
    margin: 0 0 20px 0 !important;
    font-size: 14px;
    font-weight: 600 !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #1e293b !important;
    border-bottom: 1px solid rgba(255, 153, 0, 0.45); 
    padding-bottom: 8px;
}

.beitrag-experte__card {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
}

.beitrag-experte__image-wrapper {
    flex-shrink: 0;
    width: 130px; 
    margin-right: 20px;
}

.beitrag-experte__image {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
    border-radius: 4px;
}

.beitrag-experte__content {
    flex-grow: 1;
}

.beitrag-experte__name {
    margin: 0 0 2px 0 !important;
    font-size: 18px;
    font-weight: 700;
    color: #1e293b !important;
}

.beitrag-experte__subtitle {
    margin: 0 0 10px 0 !important;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    color: #ff9900 !important; 
}

.beitrag-experte__tasks {
    font-size: 12px;
    color: #4b5563;
    margin-bottom: 10px;
    padding-bottom: 0;
    border-bottom: none !important; 
}

.beitrag-experte__tasks strong {
    color: #111111;
}

.beitrag-experte__description {
    font-size: 13.5px;
    line-height: 1.5;
    color: #4b5563;
}

.beitrag-experte__description p:last-child {
    margin-bottom: 0;
}

/* Mobil-Optimierung für Smartphones (JETZT SAUBER LINKSBÜNDIG) */
@media (max-width: 600px) {
    .beitrag-experte__card {
        flex-direction: column;
        align-items: flex-start !important; /* FIX: Links anordnen statt zentrieren */
        text-align: left !important;        /* FIX: Textausrichtung linksbündig forcieren */
    }
    .beitrag-experte__image-wrapper {
        margin-right: 0;
        margin-bottom: 15px;
        width: 120px;                       /* Bild bleibt links am Rand angedockt */
    }
    .beitrag-experte__tasks {
        border-bottom: none !important;
        padding-bottom: 0;
    }
}

/* =========================================================================
   DARK MODE EXTENSION (Für body.dark-contrast)
   ========================================================================= */
body.dark-contrast .beitrag-experte-box {
    background-color: #1e293b !important;   
    border-color: rgba(255, 153, 0, 0.4) !important; 
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3) !important;
}

body.dark-contrast .experte-separator {
    border-top-color: rgba(255, 255, 255, 0.05);
}

body.dark-contrast .beitrag-experte__header {
    color: #f1f5f9 !important;               
    border-bottom-color: rgba(255, 153, 0, 0.4) !important; 
}

body.dark-contrast .beitrag-experte__name,
body.dark-contrast .beitrag-experte__tasks strong {
    color: #ffffff !important;
}

body.dark-contrast .beitrag-experte__subtitle {
    color: #ff9900 !important;
}

body.dark-contrast .beitrag-experte__tasks,
body.dark-contrast .beitrag-experte__description {
    color: #cbd5e1 !important;               
}


/* =========================================================================
   23. CUSTOM LIGHTBOX COMPONENT & ANIMATION SYSTEM
   ========================================================================= */

/* Zoom-Cursor auf alle vergrößerbaren Inhaltsbilder anwenden */
.lightbox-trigger {
    cursor: zoom-in !important;
    transition: opacity 0.2s ease;
}

.lightbox-trigger:hover {
    opacity: 0.9;
}

/* Das abdunkelnde Vollbild-Overlay */
.custom-lightbox {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: rgba(17, 24, 39, 0.9); 
    z-index: 100000; 
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-sizing: border-box;
}

.custom-lightbox.is-open {
    display: flex;
    opacity: 1;
}

/* Content-Flexbox-Rahmen */
.lightbox-content {
    position: relative;
    max-width: 90%;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.custom-lightbox img {
    max-width: 100% !important;
    max-height: 80vh !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain;
    border-radius: 4px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
    border: none !important;
}

/* Bildunterschrift */
.lightbox-caption {
    color: #ffffff;
    margin-top: 12px;
    font-size: 14px;
    font-weight: 500;
    text-align: center;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
    max-width: 100%;
}

/* Freistehender Schließen-Button mit Drop-Shadow gegen weiße Hintergründe */
.lightbox-close {
    position: absolute;
    top: 25px;
    right: 30px;
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.8);
    width: 48px;
    height: 48px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0;
    filter: drop-shadow(0px 2px 4px rgba(0, 0, 0, 0.8));
    transition: color 0.2s cubic-bezier(0.4, 0, 0.2, 1), transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 100001;
    -webkit-appearance: none;
}

.lightbox-close svg {
    display: block;
    width: 28px;
    height: 28px;
    transition: stroke-width 0.2s ease;
}

/* Hover-Zustand: Signalrot und dynamische Linien-Verdickung */
.lightbox-close:hover,
.lightbox-close:focus {
    color: #ef4444; 
    transform: scale(1.08);
    outline: none;
}

.lightbox-close:hover svg,
.lightbox-close:focus svg {
    stroke-width: 2.5; 
}

/* Mobil-Layout Anpassungen */
@media (max-width: 768px) {
    .lightbox-close {
        top: 16px;
        right: 16px;
        width: 44px;
        height: 44px;
    }
    .lightbox-close svg {
        width: 24px;
        height: 24px;
    }
}

/* --- LARGE-CURSOR SYSTEM INTEGRATION --- */
body.large-cursor .lightbox-trigger {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='38' height='38' viewBox='0 0 24 24' fill='none' stroke='%23111827' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y='21' x2='16.65' y='16.65'/%3E%3Cline x1='11' y='8' x2='11' y='14'/%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3C/svg%3E") 11 11, zoom-in !important;
}

body.large-cursor .lightbox-close {
    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='%23ef4444' stroke='%23ef4444' 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;
}

/* --- DARK-MODE COHERENCE SYSTEM --- */
body.dark-contrast .custom-lightbox {
    background-color: rgba(0, 0, 0, 0.95); 
}

body.dark-contrast.large-cursor .lightbox-trigger {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='38' height='38' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y='21' x2='16.65' y='16.65'/%3E%3Cline x1='11' y='8' x2='11' y='14'/%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3C/svg%3E") 11 11, zoom-in !important;
}


/* =========================================================================
   HÖRSPIEL BREADCRUMB - SCHLANKER FLIEẞTEXT-STYLE MIT RAHMEN (NO-LIST)
   ========================================================================= */
.hoerspiel-breadcrumb {
    margin: 15px 0 25px 0 !important;
    padding: 0 0 10px 0 !important; /* Nur unten etwas Platz vor der Linie */
    font-size: 13px !important;
    line-height: 1.5 !important;
    display: block !important;
    clear: both !important;
    width: 100%;
    box-sizing: border-box;
    
    /* URSPRÜNGLICHES DESIGN BEIBEHALTEN + DEZENTER ORANGER RAHMEN UNTEN */
    border-bottom: 1px solid rgba(255, 153, 0, 0.35) !important; 
}

.hoerspiel-breadcrumb__wrapper {
    display: block !important;
    text-align: left !important;
    color: #777777 !important;
}

/* Alle inneren Elemente verhalten sich stur wie Textzeichen */
.hoerspiel-breadcrumb__link,
.hoerspiel-breadcrumb__separator,
.hoerspiel-breadcrumb__current,
.hoerspiel-breadcrumb__wrapper a,
.hoerspiel-breadcrumb__wrapper span {
    display: inline !important;
    float: none !important;
    vertical-align: baseline !important;
}

.hoerspiel-breadcrumb__link {
    color: #555555 !important;
    text-decoration: none !important;
    transition: color 0.2s ease !important;
}

.hoerspiel-breadcrumb__link:hover {
    color: #3b82f6 !important;
    text-decoration: underline !important;
}

.hoerspiel-breadcrumb__separator {
    color: #b0b0b0 !important;
    padding: 0 4px !important;
    font-weight: 400 !important;
}

.hoerspiel-breadcrumb__current {
    color: #111111 !important;
    font-weight: 600 !important;
}

/* =========================================================================
   DARK-MODE KORREKTUREN FÜR BREADCRUMBS (Positions- und Layout-treu)
   ========================================================================= */

/* FIX: Macht den Container unsichtbar, behält aber das exakte Padding für die Schriftposition bei */
body.dark-contrast .archive-header,
body.dark-contrast .page-header,
body.dark-contrast header.page-header,
body.dark-contrast .hoerspiel-breadcrumb {
    background-color: transparent !important;
    background: transparent !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    box-shadow: none !important;
    /* KEIN padding: 0 !important mehr – das Theme-Padding bleibt aktiv, damit nichts verspringt */
}

/* Die filigrane orangefarbene Rahmenlinie unten bleibt sauber aktiv */
body.dark-contrast .hoerspiel-breadcrumb {
    border-bottom: 1px solid rgba(255, 153, 0, 0.4) !important;
}

/* Textfarben-Anpassungen für perfekten Kontrast im Dunkeln */
body.dark-contrast .hoerspiel-breadcrumb__wrapper { 
    color: #94a3b8 !important; /* Angenehmes, weiches Grau */
}

body.dark-contrast .hoerspiel-breadcrumb__link { 
    color: #cbd5e1 !important; /* Helles Grau für Links */
}

body.dark-contrast .hoerspiel-breadcrumb__link:hover { 
    color: #ff9900 !important; /* Markantes Orange beim Hovern */
    text-decoration: underline !important;
}

body.dark-contrast .hoerspiel-breadcrumb__current { 
    color: #ffffff !important; /* Reines Weiß für die aktuelle Seite */
}

body.dark-contrast .hoerspiel-breadcrumb__separator { 
    color: rgba(255, 153, 0, 0.5) !important; /* Dezenter oranger Trenner */
}


/* =========================================================================
   CLEAN HÖRSPIEL 404 LAYOUT (INSPIRED BY BILD13.JPG)
   ========================================================================= */

/* Setzt die umschließenden Theme-Boxen auf einen reinweißen Canvas zurück */
.error404 .inside-article,
.error404 #content,
.error404 .site-content {
    background: #ffffff !important;
    box-shadow: none !important;
    border: none !important;
    padding: 0 !important;
}

.hoerspiel-disney-404 {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    min-height: 60vh !important;
    padding: 60px 20px !important;
    background-color: #ffffff !important;
}

.hoerspiel-disney-404__wrapper {
    max-width: 1000px !important;
    width: 100% !important;
    display: grid !important;
    grid-template-columns: 40% 60% !important; /* Asymmetrischer Split */
    gap: 60px !important;
    align-items: center !important;
}

/* Linke Seite: Das freigestellte Icon */
.hoerspiel-disney-404__visual {
    display: flex;
    justify-content: center;
    align-items: center;
}

.hoerspiel-disney-404__icon {
    width: 100%;
    max-width: 220px;
    height: auto;
    color: #38a169; /* Sattes Grün analog zum Originalbild */
    filter: drop-shadow(0 10px 20px rgba(0,0,0,0.05));
}

/* Rechte Seite: Content */
.hoerspiel-disney-404__content {
    text-align: left !important;
}

.hoerspiel-disney-404__title {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    font-size: 46px !important;
    line-height: 1.15 !important;
    font-weight: 800 !important;
    color: #111111 !important;
    margin: 0 0 25px 0 !important;
    letter-spacing: -0.5px !important;
}

.hoerspiel-disney-404__text {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    font-size: 16px !important;
    line-height: 1.6 !important;
    color: #4a5568 !important;
    max-width: 480px !important;
    margin: 0 0 35px 0 !important;
}

/* Der markante, rundgelutschte Button */
.hoerspiel-disney-404__btn {
    display: inline-block !important;
    background-color: #0071dc !important; /* Disney-Blau aus der Vorlage */
    color: #ffffff !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px !important;
    padding: 14px 32px !important;
    border-radius: 25px !important;
    text-decoration: none !important;
    transition: background-color 0.15s ease, transform 0.1s ease !important;
    box-shadow: 0 4px 12px rgba(0, 113, 220, 0.2) !important;
}

.hoerspiel-disney-404__btn:hover {
    background-color: #0056a8 !important;
    color: #ffffff !important;
    transform: translateY(-1px);
}

/* =========================================================================
   DARK-MODE INTEGRATION
   ========================================================================= */
body.dark-contrast .error404 .inside-article,
body.dark-contrast .error404 #content,
body.dark-contrast .error404 .site-content,
body.dark-contrast .hoerspiel-disney-404 {
    background: #0f172a !important;
}

body.dark-contrast .hoerspiel-disney-404__title { color: #ffffff !important; }
body.dark-contrast .hoerspiel-404__text { color: #94a3b8 !important; }
body.dark-contrast .hoerspiel-disney-404__icon { color: #4ade80; }
body.dark-contrast .hoerspiel-disney-404__btn {
    background-color: #3b82f6 !important;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3) !important;
}
body.dark-contrast .hoerspiel-disney-404__btn:hover { background-color: #2563eb !important; }

/* =========================================================================
   RESPONSIVE DESIGN (MOBILE STACKING)
   ========================================================================= */
@media (max-width: 768px) {
    .hoerspiel-disney-404__wrapper {
        grid-template-columns: 1fr !important;
        gap: 40px !important;
    }
    .hoerspiel-disney-404__content { text-align: center !important; }
    .hoerspiel-disney-404__title { font-size: 32px !important; }
    .hoerspiel-disney-404__text { margin: 0 auto 30px auto !important; }
    .hoerspiel-disney-404__icon { max-width: 150px; }
}


/* =========================================================================
   1. UNIFORM PROMO BOXES - GLOBAL LAYOUT
   ========================================================================= */
.ade-promo-box {
    display: flex;
    gap: 40px; /* Mehr Abstand, da das Bild jetzt präsenter ist */
    align-items: center;
    padding: 35px;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    margin: 35px 0;
    background-color: #ffffff;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.03);
    box-sizing: border-box;
    text-align: left;
}

/* Bild-Bereich: Auf exakt 300px erhöht */
.ade-promo-box__image {
    flex: 0 0 300px;
    max-width: 300px;
}

.ade-promo-box__image img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    display: block;
    object-fit: cover;
}

/* Text-Inhalt */
.ade-promo-box__content {
    flex: 1;
}

.ade-promo-box__title {
    font-size: 24px !important; /* Titel für die Proporz leicht vergrößert */
    font-weight: 700 !important;
    margin: 0 0 12px 0 !important;
    line-height: 1.3 !important;
}

.ade-promo-box__text {
    font-size: 15px !important;
    line-height: 1.6 !important;
    margin: 0 0 24px 0 !important;
    color: #4a5568;
}

/* Globaler Button-Stil */
.ade-promo-box__btn {
    display: inline-block;
    padding: 12px 28px;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-decoration: none !important;
    border-radius: 6px;
    transition: all 0.2s ease;
}


/* =========================================================================
   2. INDIVIDUELLE FARB-THEMEN (LICHT-MODUS)
   ========================================================================= */

/* 1. Erwachsene (Edles, düsteres Anthrazit) */
.ade-promo-box--erwachsene { background-color: #f8fafc; border-left: 5px solid #1e293b; }
.ade-promo-box--erwachsene .ade-promo-box__title { color: #0f172a; }
.ade-promo-box--erwachsene .ade-promo-box__btn { background-color: #1e293b; color: #ffffff; }
.ade-promo-box--erwachsene .ade-promo-box__btn:hover { background-color: #0f172a; }

/* 2. Monster (Deep Purple / Neon-Grün Akzent) */
.ade-promo-box--monster { background-color: #faf5ff; border-left: 5px solid #a855f7; }
.ade-promo-box--monster .ade-promo-box__title { color: #581c87; }
.ade-promo-box--monster .ade-promo-box__btn { background-color: #a855f7; color: #ffffff; }
.ade-promo-box--monster .ade-promo-box__btn:hover { background-color: #7e22ce; }

/* 3. Vampir (Gothic Red / Samtschwarz) */
.ade-promo-box--vampir { background-color: #fff5f5; border-left: 5px solid #e11d48; }
.ade-promo-box--vampir .ade-promo-box__title { color: #9f1239; }
.ade-promo-box--vampir .ade-promo-box__btn { background-color: #e11d48; color: #ffffff; }
.ade-promo-box--vampir .ade-promo-box__btn:hover { background-color: #be123c; }

/* 4. Zombie (Apokalyptisches Schlamm-Grün / Khaki) */
.ade-promo-box--zombie { background-color: #f7fee7; border-left: 5px solid #65a30d; }
.ade-promo-box--zombie .ade-promo-box__title { color: #3f6212; }
.ade-promo-box--zombie .ade-promo-box__btn { background-color: #65a30d; color: #ffffff; }
.ade-promo-box--zombie .ade-promo-box__btn:hover { background-color: #4d7c0f; }

/* 5. WhatsApp (Official WhatsApp Green) */
.ade-promo-box--whatsapp { background-color: #f0fdf4; border-left: 5px solid #22c55e; }
.ade-promo-box--whatsapp .ade-promo-box__title { color: #166534; }
.ade-promo-box--whatsapp .ade-promo-box__btn { background-color: #22c55e; color: #ffffff; }
.ade-promo-box--whatsapp .ade-promo-box__btn:hover { background-color: #16a34a; }

/* 6. Bluesky (Bluesky Schmetterlings-Blau) */
.ade-promo-box--bluesky { background-color: #f0f9ff; border-left: 5px solid #0285ff; }
.ade-promo-box--bluesky .ade-promo-box__title { color: #0369a1; }
.ade-promo-box--bluesky .ade-promo-box__btn { background-color: #0285ff; color: #ffffff; }
.ade-promo-box--bluesky .ade-promo-box__btn:hover { background-color: #006fe6; }

/* 7. PWA (Modern Cyber-Cyan / App-Stil) */
.ade-promo-box--pwa { background-color: #f5f3ff; border-left: 5px solid #6366f1; }
.ade-promo-box--pwa .ade-promo-box__title { color: #3730a3; }
.ade-promo-box--pwa .ade-promo-box__btn { background-color: #6366f1; color: #ffffff; }
.ade-promo-box--pwa .ade-promo-box__btn:hover { background-color: #4f46e5; }

/* 8. Whoniverse (Deep Space Blue / TARDIS-Blau) */
.ade-promo-box--whoniverse { background-color: #f0fdfa; border-left: 5px solid #0284c7; }
.ade-promo-box--whoniverse .ade-promo-box__title { color: #0369a1; }
.ade-promo-box--whoniverse .ade-promo-box__btn { background-color: #0284c7; color: #ffffff; }
.ade-promo-box--whoniverse .ade-promo-box__btn:hover { background-color: #0369a1; }

/* 9. Pen & Paper (Abenteuer-Amber / Würfel-Lederbraun) */
.ade-promo-box--pen-and-paper { background-color: #fffbeb; border-left: 5px solid #d97706; }
.ade-promo-box--pen-and-paper .ade-promo-box__title { color: #92400e; }
.ade-promo-box--pen-and-paper .ade-promo-box__btn { background-color: #d97706; color: #ffffff; }
.ade-promo-box--pen-and-paper .ade-promo-box__btn:hover { background-color: #b45309; }

/* 10. Die drei ??? (Starkes Detektiv-Schwarz mit Kult-Farbrahmen) */
.ade-promo-box--dreifragezeichen { 
    background-color: #fafafa; 
    border-left: 5px solid #111111;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}
.ade-promo-box--dreifragezeichen .ade-promo-box__title { 
    color: #111111; 
}
.ade-promo-box--dreifragezeichen .ade-promo-box__btn { 
    background-color: #111111; 
    color: #ffffff; 
    border: 1px solid #111111;
}
.ade-promo-box--dreifragezeichen .ade-promo-box__btn:hover { 
    background-color: #ffffff; 
    color: #111111;
}

/* 11. Mark Brandis (Deep Space / Futuristisches Dunkelblau) */
.ade-promo-box--brandis { 
    background-color: #f0f4f8; 
    border-left: 5px solid #1e3a8a; 
}
.ade-promo-box--brandis .ade-promo-box__title { 
    color: #172554; 
}
.ade-promo-box--brandis .ade-promo-box__btn { 
    background-color: #1e3a8a; 
    color: #ffffff; 
}
.ade-promo-box--brandis .ade-promo-box__btn:hover { 
    background-color: #1d4ed8; 
}

/* 12. Sherlock Holmes (Klassisches britisches Tweed-Braun) */
.ade-promo-box--sherlock { 
    background-color: #fafaf6; 
    border-left: 5px solid #854d0e; 
}
.ade-promo-box--sherlock .ade-promo-box__title { 
    color: #451a03; 
}
.ade-promo-box--sherlock .ade-promo-box__btn { 
    background-color: #854d0e; 
    color: #ffffff; 
}
.ade-promo-box--sherlock .ade-promo-box__btn:hover { 
    background-color: #a16207; 
}

/* 13. Professor Van Dusen (Akademisches, kühles Bibliotheks-Salbei) */
.ade-promo-box--vandusen { 
    background-color: #f7fee7; 
    border-left: 5px solid #4d7c0f; 
}
.ade-promo-box--vandusen .ade-promo-box__title { 
    color: #1e3a1e; 
}
.ade-promo-box--vandusen .ade-promo-box__btn { 
    background-color: #4d7c0f; 
    color: #ffffff; 
}
.ade-promo-box--vandusen .ade-promo-box__btn:hover { 
    background-color: #3f6212; 
}

/* 14. Edgar Wallace (Klassisches Kriminal-Burgunderrot) */
.ade-promo-box--edgarwallace { 
    background-color: #fff1f2; 
    border-left: 5px solid #9f1239; 
}
.ade-promo-box--edgarwallace .ade-promo-box__title { 
    color: #4c0519; 
}
.ade-promo-box--edgarwallace .ade-promo-box__btn { 
    background-color: #9f1239; 
    color: #ffffff; 
}
.ade-promo-box--edgarwallace .ade-promo-box__btn:hover { 
    background-color: #881337; 
}

/* 15. TKKG (Kräftiges Abenteuer-Orangerot, angelehnt an das klassische TKKG-Logo) */
.ade-promo-box--tkkg { 
    background-color: #fff7ed; 
    border-left: 5px solid #c2410c; 
}
.ade-promo-box--tkkg .ade-promo-box__title { 
    color: #7c2d12; 
}
.ade-promo-box--tkkg .ade-promo-box__btn { 
    background-color: #c2410c; 
    color: #ffffff; 
}
.ade-promo-box--tkkg .ade-promo-box__btn:hover { 
    background-color: #9a3412; 
}

/* 16. Fraktal (Kühles Cyber-Teal, digitale Sci-Fi-Optik) */
.ade-promo-box--fraktal { 
    background-color: #ecfeff; 
    border-left: 5px solid #0d9488; 
}
.ade-promo-box--fraktal .ade-promo-box__title { 
    color: #134e4a; 
}
.ade-promo-box--fraktal .ade-promo-box__btn { 
    background-color: #0d9488; 
    color: #ffffff; 
}
.ade-promo-box--fraktal .ade-promo-box__btn:hover { 
    background-color: #0f766e; 
}

/* 17. Giallo (Namensgebendes Pulp-Gold trifft Killer-Schwarz) */
.ade-promo-box--giallo { 
    background-color: #fefce8; 
    border-left: 5px solid #ca8a04; 
}
.ade-promo-box--giallo .ade-promo-box__title { 
    color: #1c1917; 
}
.ade-promo-box--giallo .ade-promo-box__btn { 
    background-color: #1c1917; 
    color: #eab308; 
    border: 1px solid #1c1917;
}
.ade-promo-box--giallo .ade-promo-box__btn:hover { 
    background-color: #ca8a04; 
    color: #1c1917;
    border-color: #ca8a04;
}

/* 18. Murder Tales (Dunkles Tinten-Schwarzrot, True-Crime-Ernst) */
.ade-promo-box--murdertales { 
    background-color: #fef2f2; 
    border-left: 5px solid #7f1d1d; 
    box-shadow: 0 4px 15px rgba(127, 29, 29, 0.08);
}
.ade-promo-box--murdertales .ade-promo-box__title { 
    color: #450a0a; 
}
.ade-promo-box--murdertales .ade-promo-box__btn { 
    background-color: #7f1d1d; 
    color: #ffffff; 
}
.ade-promo-box--murdertales .ade-promo-box__btn:hover { 
    background-color: #991b1b; 
}

/* 19. Gruselhörspiele (Dunkles Nachtblau-Indigo, allgemeine Grusel-Atmosphäre) */
.ade-promo-box--grusel { 
    background-color: #eef2ff; 
    border-left: 5px solid #4338ca; 
}
.ade-promo-box--grusel .ade-promo-box__title { 
    color: #312e81; 
}
.ade-promo-box--grusel .ade-promo-box__btn { 
    background-color: #4338ca; 
    color: #ffffff; 
}
.ade-promo-box--grusel .ade-promo-box__btn:hover { 
    background-color: #3730a3; 
}


/* =========================================================================
   3. DARK-MODE STRUKTUR & ANPASSUNGEN (body.dark-contrast)
   ========================================================================= */
body.dark-contrast .ade-promo-box {
    background-color: #111827 !important;
    border-color: #1f2937 !important;
}

body.dark-contrast .ade-promo-box__text {
    color: #9ca3af !important;
}

/* Titel-Farbanpassungen im Dark-Mode */
body.dark-contrast .ade-promo-box--erwachsene .ade-promo-box__title { color: #f1f5f9; }
body.dark-contrast .ade-promo-box--monster .ade-promo-box__title { color: #c084fc; }
body.dark-contrast .ade-promo-box--vampir .ade-promo-box__title { color: #f43f5e; }
body.dark-contrast .ade-promo-box--zombie .ade-promo-box__title { color: #a3e635; }
body.dark-contrast .ade-promo-box--whatsapp .ade-promo-box__title { color: #4ade80; }
body.dark-contrast .ade-promo-box--bluesky .ade-promo-box__title { color: #38bdf8; }
body.dark-contrast .ade-promo-box--pwa .ade-promo-box__title { color: #818cf8; }
body.dark-contrast .ade-promo-box--whoniverse .ade-promo-box__title { color: #38bdf8; }
body.dark-contrast .ade-promo-box--pen-and-paper .ade-promo-box__title { color: #fbbf24; }
body.dark-contrast .ade-promo-box--scifi .ade-promo-box__title { color: #38bdf8; }
body.dark-contrast .ade-promo-box--sherlock .ade-promo-box__title { color: #fde047 !important; }
body.dark-contrast .ade-promo-box--vandusen .ade-promo-box__title { color: #a3e635 !important; }
body.dark-contrast .ade-promo-box--edgarwallace .ade-promo-box__title { color: #fda4af !important; }
body.dark-contrast .ade-promo-box--tkkg .ade-promo-box__title { color: #fb923c !important; }
body.dark-contrast .ade-promo-box--fraktal .ade-promo-box__title { color: #2dd4bf !important; }
body.dark-contrast .ade-promo-box--giallo .ade-promo-box__title { color: #facc15 !important; }
body.dark-contrast .ade-promo-box--murdertales .ade-promo-box__title { color: #f87171 !important; }
body.dark-contrast .ade-promo-box--grusel .ade-promo-box__title { color: #a5b4fc !important; }

/* Button-Farbanpassungen im Dark-Mode */
body.dark-contrast .ade-promo-box--erwachsene .ade-promo-box__btn { background-color: #334155; }
body.dark-contrast .ade-promo-box--whoniverse .ade-promo-box__btn { background-color: #0284c7; }
body.dark-contrast .ade-promo-box--pen-and-paper .ade-promo-box__btn { background-color: #d97706; }
body.dark-contrast .ade-promo-box--scifi .ade-promo-box__btn { background-color: #0ea5e9; }
body.dark-contrast .ade-promo-box--sherlock .ade-promo-box__btn { background-color: #854d0e; }
body.dark-contrast .ade-promo-box--vandusen .ade-promo-box__btn { background-color: #4d7c0f; }
body.dark-contrast .ade-promo-box--edgarwallace .ade-promo-box__btn { background-color: #9f1239; }
body.dark-contrast .ade-promo-box--tkkg .ade-promo-box__btn { background-color: #c2410c; }
body.dark-contrast .ade-promo-box--fraktal .ade-promo-box__btn { background-color: #0d9488; }
body.dark-contrast .ade-promo-box--giallo .ade-promo-box__btn { background-color: #ca8a04; color: #1c1917; }
body.dark-contrast .ade-promo-box--murdertales .ade-promo-box__btn { background-color: #7f1d1d; }
body.dark-contrast .ade-promo-box--grusel .ade-promo-box__btn { background-color: #4338ca; }

/* Sonderfall: Die drei ??? Box im Dark-Mode */
body.dark-contrast .ade-promo-box--dreifragezeichen {
    background-color: #0b0f17 !important;
    border-left-color: #38bdf8; /* Detektiv-Blau als Fokus im Dark Mode */
}
body.dark-contrast .ade-promo-box--dreifragezeichen .ade-promo-box__title { 
    color: #ffffff !important; 
}
body.dark-contrast .ade-promo-box--dreifragezeichen .ade-promo-box__btn { 
    background-color: #1f2937; 
    border-color: #374151; 
}
body.dark-contrast .ade-promo-box--dreifragezeichen .ade-promo-box__btn:hover { 
    background-color: #ffffff; 
    color: #111111; 
}

/* Titel-Farbanpassung im Dark-Mode */
body.dark-contrast .ade-promo-box--brandis .ade-promo-box__title { color: #60a5fa !important; }

/* Button-Farbanpassung im Dark-Mode */
body.dark-contrast .ade-promo-box--brandis .ade-promo-box__btn { background-color: #1e3a8a; }

/* =========================================================================
   RESPONSIVE DESIGN (MOBILGERÄTE)
   ========================================================================= */
@media (max-width: 768px) { /* Schaltet jetzt bei Tablet-Breite um */
    .ade-promo-box {
        flex-direction: column; /* Stapelt Bild über Text */
        text-align: center;
        padding: 30px 25px;
        gap: 25px;
    }
    
    .ade-promo-box__image {
        flex: 0 0 auto;
        width: 100%;
        max-width: 260px; /* Zentriertes Key-Visual auf Mobilgeräten */
    }
    
    .ade-promo-box__btn {
        display: block;
        text-align: center;
    }
}

/* =========================================================================
   BOOTSTRAP ICON SYSTEM FOR PROMO BOXES (SCHLANKE VEKTOR-OPTIK)
   ========================================================================= */
.ade-promo-box__bootstrap-icon-wrapper {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.2em;
    height: 1.2em;
    vertical-align: -0.15em;
    margin-right: 10px;
}

.ade-promo-box__bootstrap-icon-wrapper svg {
    width: 100%;
    height: 100%;
    fill: currentColor !important;  /* Nutzt die Farbe des jeweiligen h3-Titels */
    stroke: none !important;         /* Verhindert künstliches Aufblähen/Fettwerden */
    display: block;
}


/* =========================================================================
   KOMMENTARE & FORMULAR IM DEZENTEN PREMIUM-BOXEN-DESIGN
   ========================================================================= */

/* 1. Bereichs-Überschrift (mit filigranem orangenem Strich) */
.comments-title,
#reply-title {
    margin: 50px 0 25px 0 !important;
    font-size: 20px !important;
    font-weight: 600 !important;
    color: #1e293b !important;
    border-bottom: 1px solid rgba(255, 153, 0, 0.45) !important;
    padding-bottom: 10px !important;
}

/* 2. Die einzelnen Kommentar-Boxen */
.comment-list .comment-body {
    background-color: #f8fafc !important; /* Identischer, hellgrauer Boxen-Hintergrund */
    border: 1px solid rgba(255, 153, 0, 0.35) !important; /* Dezenter oranger Rahmen */
    border-radius: 8px !important;
    padding: 25px !important;
    margin-bottom: 20px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03) !important;
    box-sizing: border-box !important;
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

/* Harmonisiertes Anheben bei Hover */
.comment-list .comment-body:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 5px 12px rgba(230, 138, 0, 0.12) !important;
}

/* Eckenrundung für Avatare */
.comment-list .comment-meta .avatar {
    border-radius: 50% !important;
    border: 1px solid rgba(255, 153, 0, 0.3) !important;
}

/* Autor-Name & Metadaten */
.comment-author b.fn,
.comment-author b.fn a {
    color: #1e293b !important;
    font-weight: 600 !important;
    text-decoration: none !important;
}
.comment-author b.fn a:hover {
    color: #ff9900 !important;
}
.comment-metadata a {
    color: #64748b !important;
    font-size: 12px !important;
    text-decoration: none !important;
}

/* 3. Eingabefelder des Formulars (Ebenfalls harmonisiert) */
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
    background-color: #ffffff !important;
    border: 1px solid rgba(255, 153, 0, 0.25) !important;
    border-radius: 6px !important;
    padding: 12px 15px !important;
    color: #1e293b !important;
    font-size: 14px !important;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.02) !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

/* Fokus-Zustand der Felder mit edlem orangen Glow */
.comment-form input:focus,
.comment-form textarea:focus {
    outline: none !important;
    border-color: #ff9900 !important;
    box-shadow: 0 0 0 3px rgba(255, 153, 0, 0.15) !important;
}

/* 4. Absendebutton & Antworten-Button */
.comment-form input[type="submit"],
.comment-reply-link {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 10px 22px !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    text-decoration: none !important;
    
    color: #111111 !important;
    background-color: #ff9900 !important; /* Sattes Amazon-Orange */
    border: 1px solid #e68a00 !important;
    border-radius: 6px !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08) !important;
    transition: all 0.2s ease-in-out !important;
    cursor: pointer !important;
}

.comment-form input[type="submit"]:hover,
.comment-reply-link:hover {
    color: #111111 !important;
    background-color: #f59e0b !important;
    border-color: #d97706 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 5px 12px rgba(230, 138, 0, 0.25) !important;
}


/* =========================================================================
   DARK MODE COMPANION FÜR KOMMENTARE (Für body.dark-contrast)
   ========================================================================= */
body.dark-contrast .comments-title,
body.dark-contrast #reply-title {
    color: #f1f5f9 !important;
    border-bottom-color: rgba(255, 153, 0, 0.4) !important;
}

body.dark-contrast .comment-list .comment-body {
    background-color: #1e293b !important; /* Dunkles Anthrazit/Slate-Grau */
    border-color: rgba(255, 153, 0, 0.4) !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3) !important;
    color: #cbd5e1 !important;
}

body.dark-contrast .comment-author b.fn,
body.dark-contrast .comment-author b.fn a {
    color: #f1f5f9 !important;
}

body.dark-contrast .comment-metadata a {
    color: #94a3b8 !important;
}

/* Formularfelder im Dark Mode */
body.dark-contrast .comment-form input[type="text"],
body.dark-contrast .comment-form input[type="email"],
body.dark-contrast .comment-form input[type="url"],
body.dark-contrast .comment-form textarea {
    background-color: #0f172a !important; /* Sehr dunkles Blau/Schwarz */
    border-color: rgba(255, 153, 0, 0.3) !important;
    color: #f1f5f9 !important;
}

body.dark-contrast .comment-form input:focus,
body.dark-contrast .comment-form textarea:focus {
    border-color: #ff9900 !important;
    box-shadow: 0 0 0 3px rgba(255, 153, 0, 0.3) !important;
}

/* Alle CTA-Buttons (Weiterlesen, Antwort, Kommentieren) bleiben im Dark Mode unverändert Orange, erhalten aber einen einheitlich angepassten Hover-Schatten */
body.dark-contrast .comment-form input[type="submit"]:hover,
body.dark-contrast .comment-reply-link:hover,
body.dark-contrast .reply a:hover,
body.dark-contrast .custom-grid-read-more:hover,
body.dark-contrast .weekly-post-link:hover {
    box-shadow: 0 5px 15px rgba(230, 138, 0, 0.4) !important;
}


/* =========================================================================
   HAUPTMENÜ & HEADER - REINER LIGHT-MODE STYLE AUCH IM DARK-MODE
   ========================================================================= */

/* Verhindert, dass der Dark-Mode den Header-Hintergrund oder das Menü beeinflusst */
body.dark-contrast .site-header,
body.dark-contrast .main-navigation,
body.dark-contrast #site-navigation,
body.dark-contrast .inside-header,
body.dark-contrast .inside-navigation {
    background-color: unset !important;
    background: unset !important;
    color: unset !important;
    box-shadow: unset !important;
    border: unset !important;
}

/* Zwingt alle Menü-Links und deren Hover-Zustände, die originalen Light-Mode-Farben zu nutzen */
body.dark-contrast .main-navigation a,
body.dark-contrast .main-navigation ul li a,
body.dark-contrast #site-navigation a,
body.dark-contrast .main-navigation a:hover,
body.dark-contrast .main-navigation ul li a:hover {
    color: unset !important;
    background-color: unset !important;
}

/* Header & Hauptmenü bekommen im Dark Mode das Marken-Navy als Hintergrund */
body.dark-contrast .site-header,
body.dark-contrast .main-navigation,
body.dark-contrast #site-navigation,
body.dark-contrast .inside-header,
body.dark-contrast .inside-navigation {
    background-color: #003399 !important;
}

body.dark-contrast .main-navigation a,
body.dark-contrast .main-navigation ul li a,
body.dark-contrast #site-navigation a {
    color: #ffffff !important;
}

/* Untermenüs (Dropdowns) im Hauptmenü: nie umbrechen, Breite passt sich exakt dem Inhalt an */
.main-navigation ul ul,
.main-navigation .sub-menu {
    width: max-content !important;
    min-width: 260px !important;
    white-space: nowrap !important;
}

.main-navigation ul ul li,
.main-navigation ul ul li a,
.main-navigation .sub-menu li,
.main-navigation .sub-menu li a {
    width: auto !important;
    white-space: nowrap !important;
    flex-wrap: nowrap !important;
}

/* Pfeil-Symbol für Untermenüs mit weiteren Unterpunkten: darf nie umbrechen */
.main-navigation ul ul li > a::after,
.main-navigation .sub-menu li > a::after,
.main-navigation ul ul .dropdown-menu-toggle,
.main-navigation .sub-menu .dropdown-menu-toggle {
    white-space: nowrap !important;
    flex-shrink: 0 !important;
}

/* Wird per JavaScript gesetzt, wenn ein verschachteltes Untermenü sonst über
   den rechten Bildschirmrand hinausragen würde - öffnet dann nach links */
.main-navigation .sub-menu .sub-menu.open-left {
    left: auto !important;
    right: 100% !important;
}


/* =========================================================================
   CSS FÜR DIE EINHEITLICHEN TEAM-BADGES IN DEN KOMMENTAREN
   ========================================================================= */

.ade-comment-link {
    text-decoration: none !important;
    display: inline-block;
}

.ade-comment-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: 4px;
    margin-bottom: 12px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.ade-comment-link:hover .ade-comment-badge {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
}

.ade-badge-icon {
    font-size: 12px;
    line-height: 1;
}

/* Team-Badge im klassischen Marken-Orange (Amber-Konzept) */
.ade-comment-badge--team {
    background-color: #fffbeb;
    color: #d97706;
    border: 1px solid rgba(217, 119, 6, 0.3);
}

/* Team-Badge bleibt im Dark Mode absichtlich unverändert (siehe finale Definition weiter unten) */


/* =========================================================================
   MODERNES KOMMENTAR-DESIGN MIT TEAM-BADGE RECHTS AUF DER LINIE
   ========================================================================= */

/* Container für den gesamten Kommentarbereich */
#comments {
    margin-top: 50px;
    padding-top: 30px;
    border-top: 2px solid #e2e8f0;
}

/* Titel: "X Gedanken zu..." */
.comments-title {
    font-size: 22px !important;
    font-weight: 700 !important;
    color: #1e293b;
    margin-bottom: 30px !important;
    letter-spacing: -0.5px;
}

/* Die Kommentar-Liste aufräumen */
.comment-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Einzelne Kommentar-Box */
.comment-list .comment-body {
    background-color: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    border-radius: 8px !important;
    display: flex;
    flex-direction: column;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03) !important;
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out, border-color 0.2s ease-in-out;
    width: 100%;
    position: relative;
    padding: 25px !important; /* Altes, kompaktes Padding */
}

/* =========================================================================
   EINHEITLICHE ORANGE BOX-UMRANDUNG FÜR ALLE KOMMENTARE (USER & TEAM)
   ========================================================================= */

/* Jede Kommentarbox erhält jetzt standardmäßig den orangen Rahmen */
.comment-list .comment-body {
    background-color: #ffffff;
    border: 1.5px solid #ff9900 !important; /* Sattes Marken-Orange für alle Boxen */
    border-radius: 8px !important;
    display: flex;
    flex-direction: column;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03) !important;
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out, border-color 0.2s ease-in-out;
    width: 100%;
    position: relative;
    padding: 25px !important; /* Altes, kompaktes Padding */
}

/* Setzt das Badge exakt HALB auf den oberen rechten Rahmen */
.ade-comment-link {
    text-decoration: none !important;
    position: absolute;
    top: -11px; 
    right: 20px; /* Auf die rechte Seite verschoben */
    z-index: 10;
    display: inline-block;
}

/* Das Badge als kompakter Tab direkt auf der Linie (Schriftart nicht fett) */
.ade-comment-badge--team {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background-color: #ff9900 !important; /* Gefüllt mit dem Marken-Orange */
    color: #111111 !important; /* Maximaler Kontrast */
    font-size: 10px;
    font-weight: 500 !important; /* Auf normale/mittlere Schriftstärke reduziert */
    text-transform: uppercase;
    letter-spacing: 0.8px;
    padding: 3px 10px !important;
    border-radius: 4px !important;
    box-shadow: 0 2px 4px rgba(230, 138, 0, 0.1);
}

/* Avatar-Bild (Klassischer Look) */
.comment-meta .avatar {
    border-radius: 50%;
    object-fit: cover;
    float: left;
    margin-right: 16px;
    border: 2px solid #fff;
    box-shadow: 0 2px 4px rgba(0,0,0,0.06);
}

/* Kommentar-Metadaten (Autor, Datum) */
.comment-meta {
    margin-bottom: 12px;
    overflow: hidden;
    line-height: 1.4;
}

/* Autorenname */
.comment-author vcard {
    font-weight: 700;
    font-size: 15px;
    display: inline-block;
}

.comment-author a {
    color: #1e293b !important;
    text-decoration: none !important;
    transition: color 0.2s ease;
}

.comment-author a:hover {
    color: #ff9900 !important;
}

/* Datum und Uhrzeit */
.comment-metadata {
    font-size: 12px;
    color: #64748b;
    margin-top: 2px;
}

.comment-metadata a {
    color: #64748b !important;
    text-decoration: none !important;
}

/* Textbereich aus dem alten Design */
.comment-content {
    color: #2b2b2b;
    font-size: 14.5px;
    line-height: 1.6;
    clear: both;
}

.comment-content p {
    margin: 0 0 10px 0;
}

.comment-content p:last-child {
    margin-bottom: 0;
}

/* Antwort-Button (Reply Link) - Einheitliches CTA-Design wie "Weiterlesen" & "Kommentieren" */
.reply {
    margin-top: 10px;
    text-align: right;
}

.reply a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 10px 22px !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;

    color: #111111 !important;
    background-color: #ff9900 !important; /* Sattes Amazon-Orange, identisch zu den anderen CTA-Buttons */
    border: 1px solid #e68a00 !important;
    border-radius: 6px !important;
    text-decoration: none !important;

    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08) !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.reply a:hover {
    color: #111111 !important;
    background-color: #f59e0b !important;
    border-color: #d97706 !important;
    box-shadow: 0 5px 12px rgba(230, 138, 0, 0.25) !important;
    transform: translateY(-2px) !important;
    text-decoration: none !important;
}

/* =========================================================================
   VERSCHACHTELTE ANTWORTEN (Die linke Linie bleibt komplett aus)
   ========================================================================= */
.comment-list .children {
    list-style: none;
    margin: 0 0 0 30px;
    padding: 0;
    position: relative;
}

.comment-list .children::before {
    display: none !important;
}

/* Mobile Optimierung */
@media (max-width: 767px) {
    .comment-list .children {
        margin-left: 15px !important;
    }
    .comment-list .comment-body {
        padding: 20px 16px 16px 16px !important;
    }
}

/* =========================================================================
   DARK-MODE UNTERSTÜTZUNG (body.dark-contrast)
   ========================================================================= */

body.dark-contrast #comments {
    border-top-color: #1e293b;
}

body.dark-contrast .comments-title {
    color: #f1f5f9;
}

/* Im Dark Mode behalten alle Boxen standardmäßig die markante orangefarbene Grenze */
body.dark-contrast .comment-list .comment-body {
    background-color: #1e293b;
    border-color: #ff9900 !important;
}

body.dark-contrast .comment-author a {
    color: #f1f5f9 !important;
}

body.dark-contrast .comment-author a:hover {
    color: #ff9900 !important;
}

body.dark-contrast .comment-metadata,
body.dark-contrast .comment-metadata a {
    color: #94a3b8 !important;
}

body.dark-contrast .comment-content {
    color: #cbd5e1;
}

/* Einheitliches Design: Der Antwort-Button bleibt im Dark Mode identisch zum Light Mode (siehe .reply a oben) */

/* =========================================================================
   ARCHIV-FILTER (Suche + Reihe/Jahr/Label/Land + Sortierung)
   ========================================================================= */
.archive-filter-details {
    background-color: #f8fafc;
    border: 1px solid rgba(255, 153, 0, 0.35);
    border-radius: 8px;
    margin: 0; /* Ab 481px übernimmt der Grid-Gap (30px/20px) automatisch den Abstand */
    grid-column: 1 / -1 !important; /* Spannt über alle Grid-Spalten, damit es über statt neben den Karten steht */
    width: 100%;
    box-sizing: border-box;
}

.archive-filter-summary {
    display: none; /* Nur mobil sichtbar, siehe Media Query weiter unten */
    width: 100%;
    background: none;
    border: none;
    -webkit-appearance: none;
    appearance: none;
    -webkit-tap-highlight-color: transparent;
    font-family: inherit;
    cursor: pointer;
}

.archive-filter-form {
    padding: 16px;
    box-sizing: border-box;
}

.archive-filter-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.archive-filter-row--top {
    margin-bottom: 14px;
}

.archive-filter-row--bottom {
    align-items: flex-start;
}

.archive-filter-sort-wrapper {
    flex: 0 1 200px;
    min-width: 160px;
    text-align: left;
}

.archive-filter-search-wrapper {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 3 1 380px;
    min-width: 0;
    text-align: left;
}

.archive-filter-search-input-row.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;
}

.archive-filter-search-input-row .search-input-icon {
    position: absolute !important;
    left: 12px !important;
    width: 22px !important;
    height: 22px !important;
    pointer-events: none !important;
}

.archive-filter-search.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;
}

.archive-filter-multiselect-wrapper {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1 1 150px;
    min-width: 130px;
}

.archive-filter-multiselect-label {
    font-size: 12px;
    font-weight: 700;
    color: #4b5563;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.archive-filter-count {
    color: #ff9900;
    font-weight: 700;
}

.archive-filter-select {
    padding: 8px 10px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 13px;
    background-color: #ffffff;
    max-width: 100%;
}

.archive-filter-sort-wrapper .archive-filter-select {
    padding: 14px 18px;
    font-size: 16px;
    font-weight: 500;
    border: 1px solid #d1d5db;
    border-radius: 6px;
}

.archive-filter-sort-wrapper .archive-filter-select:focus {
    outline: none;
    border-color: #9ca3af;
}

select.archive-filter-select[multiple] {
    overflow-y: auto;
}

select.archive-filter-select[multiple] option:checked {
    background-color: #ff9900 !important;
    color: #111111 !important;
}

.archive-filter-row--actions {
    margin-top: 16px;
    align-items: center;
}

.archive-filter-hint {
    font-size: 12px;
    color: #6b7280;
    margin: 10px 0 0 0;
    font-style: italic;
}

.archive-filter-hint--mobile {
    display: none; /* Nur mobil sichtbar, siehe Media Query weiter unten */
}

@media (max-width: 600px) {
    .archive-filter-hint--desktop {
        display: none;
    }
    .archive-filter-hint--mobile {
        display: block;
    }
}

.archive-filter-submit {
    background-color: #ff9900;
    color: #111111;
    font-weight: 700;
    border: 1px solid #e68a00;
    border-radius: 6px;
    padding: 10px 20px;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.archive-filter-submit:hover {
    background-color: #f59e0b;
    transform: translateY(-1px);
}

.archive-filter-reset {
    font-size: 13px;
    color: #4b5563;
    text-decoration: underline;
    white-space: nowrap;
}

.archive-filter-reset:hover {
    color: #111827;
}

.archive-filter-reset--inactive {
    color: #d1d5db;
    pointer-events: none;
    text-decoration: none;
}

/* Unter 481px wird aus dem Grid normaler Blockfluss (kein "gap" mehr aktiv) -
   hier braucht die Filterbox wieder eine eigene Margin für den Abstand zum Grid */
@media (max-width: 480px) {
    .archive-filter-details {
        margin: 0 0 20px 0;
    }

    .category article.post,
    .tax-reihe article.post,
    .archive article.post {
        margin-bottom: 20px !important;
    }
}

@media (max-width: 600px) {
    .archive-filter-summary {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 14px 16px;
        cursor: pointer;
        font-weight: 700;
        font-size: 15px;
        background-color: #ff9900;
        color: #111111;
        border-radius: 7px 7px 0 0;
    }

    .archive-filter-summary:active,
    .archive-filter-summary:focus {
        background-color: #ff9900;
        color: #111111;
        outline: none;
    }

    .archive-filter-details:not(.is-open) .archive-filter-summary {
        border-radius: 7px;
    }

    .archive-filter-count--summary {
        color: #111111;
        font-weight: 700;
    }

    .archive-filter-summary-icon {
        width: 12px;
        height: 12px;
        border-right: 2px solid #111111;
        border-bottom: 2px solid #111111;
        transform: rotate(45deg);
        transition: transform 0.2s ease;
        flex-shrink: 0;
    }

    .archive-filter-details.is-open .archive-filter-summary-icon {
        transform: rotate(-135deg);
    }

    .archive-filter-details.is-open .archive-filter-summary {
        border-bottom: 1px solid rgba(255, 153, 0, 0.35);
    }

    /* Formular-Inhalt standardmäßig zugeklappt (Grundzustand), nur bei .is-open sichtbar */
    .archive-filter-form {
        display: none;
    }

    .archive-filter-details.is-open .archive-filter-form {
        display: block;
    }

    .archive-filter-form {
        padding: 12px;
    }

    .archive-filter-row {
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
    }

    .archive-filter-search-wrapper,
    .archive-filter-multiselect-wrapper,
    .archive-filter-sort-wrapper {
        width: 100%;
        flex: 1 1 auto;
        min-width: 0;
    }

    .archive-filter-search,
    .archive-filter-select {
        width: 100%;
        box-sizing: border-box;
    }

    select.archive-filter-select[multiple] {
        font-size: 14px;
    }

    /* Filtern/Zurücksetzen bleiben als kompakte Zeile nebeneinander statt gestapelt */
    .archive-filter-row--actions {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
    }

    .archive-filter-submit {
        flex: 1 1 auto;
        text-align: center;
    }

    .archive-filter-reset,
    .archive-filter-reset--inactive {
        flex: 0 0 auto;
    }

    .archive-filter-hint {
        font-size: 11px;
    }
}

/* Desktop: Formular immer sichtbar, unabhängig vom nativen <details>-Zustand
   (die Klapp-Funktion ist ausschließlich für Mobile gedacht) */
@media (min-width: 601px) {
    .archive-filter-form {
        display: block !important;
    }
}

body.dark-contrast .archive-filter-details {
    background-color: #1e293b !important;
    border-color: rgba(255, 153, 0, 0.4) !important;
}

body.dark-contrast .archive-filter-summary {
    background-color: #ff9900 !important;
    color: #111111 !important;
}

body.dark-contrast .archive-filter-details.is-open .archive-filter-summary {
    border-bottom-color: rgba(255, 153, 0, 0.4) !important;
}

body.dark-contrast .archive-filter-select {
    background-color: #111827 !important;
    border-color: #4b5563 !important;
    color: #f3f4f6 !important;
}

body.dark-contrast .archive-filter-multiselect-label {
    color: #cbd5e1 !important;
}

body.dark-contrast select.archive-filter-select[multiple] option:checked {
    background-color: #ff9900 !important;
    color: #111111 !important;
}

body.dark-contrast .archive-filter-search-input-row.search-input-wrapper {
    background-color: #111827 !important;
    border-color: #4b5563 !important;
}

body.dark-contrast .archive-filter-search.search-field {
    color: #f3f4f6 !important;
}

body.dark-contrast .archive-filter-search-input-row.search-input-wrapper:focus-within {
    border-color: #ff9900 !important;
    box-shadow: 0 0 0 3px rgba(255, 153, 0, 0.25) !important;
}

body.dark-contrast .archive-filter-reset {
    color: #cbd5e1 !important;
}


/* =========================================================================
   "KEINE TREFFER GEFUNDEN" (Archiv-Filter ohne Ergebnis)
   ========================================================================= */
.archive-no-results {
    grid-column: 1 / -1 !important; /* Volle Breite im Archiv-Grid, wie das Filterformular */
    text-align: center;
    padding: 50px 24px;
    background-color: #f8fafc;
    border: 1px solid rgba(255, 153, 0, 0.35);
    border-radius: 8px;
}

.archive-no-results__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background-color: rgba(255, 153, 0, 0.12);
    color: #ff9900;
    margin: 0 auto 20px auto;
}

.archive-no-results__title {
    font-size: 20px;
    font-weight: 700;
    color: #1e293b;
    margin: 0 0 10px 0;
}

.archive-no-results__text {
    font-size: 14px;
    color: #4b5563;
    max-width: 480px;
    margin: 0 auto 20px auto;
    line-height: 1.6;
}

.archive-no-results__reset {
    display: inline-block;
    background-color: #ff9900;
    color: #111111;
    font-weight: 700;
    border: 1px solid #e68a00;
    border-radius: 6px;
    padding: 10px 22px;
    text-decoration: none;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.archive-no-results__reset:hover {
    background-color: #f59e0b;
    transform: translateY(-1px);
}

body.dark-contrast .archive-no-results {
    background-color: #1e293b !important;
    border-color: rgba(255, 153, 0, 0.4) !important;
}

body.dark-contrast .archive-no-results__title {
    color: #ffffff !important;
}

body.dark-contrast .archive-no-results__text {
    color: #cbd5e1 !important;
}

/* Promo-Box ohne Bild: Textinhalt bekommt eine angenehme Lesebreite statt komplett voller Breite */
.ade-promo-box--no-image .ade-promo-box__content {
    max-width: 640px;
}

/* =========================================================================
   INHALTSVERZEICHNIS [inhaltsverzeichnis]
   ========================================================================= */
.ade-toc {
    background-color: #ffffff;
    border: 1px solid #eef0f3;
    border-radius: 14px;
    padding: 22px 26px;
    margin: 32px 0;
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.06);
}

.ade-toc__title {
    font-size: 16px;
    font-weight: 700;
    color: #1e293b;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    list-style: none;
    user-select: none;
}

.ade-toc__title-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.ade-toc__icon {
    color: #ff9900;
    flex-shrink: 0;
}

.ade-toc__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    background-color: rgba(255, 153, 0, 0.12);
    color: #ff9900;
    font-size: 12px;
    font-weight: 700;
    border-radius: 999px;
}

.ade-toc[open] .ade-toc__title {
    margin-bottom: 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid #eef0f3;
}

.ade-toc__chevron {
    width: 9px;
    height: 9px;
    border-right: 2px solid #94a3b8;
    border-bottom: 2px solid #94a3b8;
    transform: rotate(45deg);
    transition: transform 0.25s ease;
    flex-shrink: 0;
    margin-left: 12px;
}

.ade-toc[open] .ade-toc__chevron {
    transform: rotate(-135deg);
}

.ade-toc__title::-webkit-details-marker {
    display: none; /* Entfernt das native Dreieck-Symbol in WebKit-Browsern */
}

.ade-toc__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr !important; /* Eine Spalte ist jetzt die Grundeinstellung (mobil-sicher) */
    column-gap: 16px;
    row-gap: 4px;
}

/* Zwei Spalten NUR für bestätigte Desktop-Breiten */
@media (min-width: 769px) {
    .ade-toc__list {
        grid-template-columns: 1fr 1fr !important;
        grid-auto-flow: column; /* Füllt von oben nach unten, dann erst die nächste Spalte */
    }
}

.ade-toc__item a {
    display: flex;
    align-items: flex-start; /* Kreis bleibt oben, statt bei mehrzeiligem Text mittig zu "schweben" */
    gap: 12px;
    padding: 9px 12px;
    border-radius: 8px;
    font-size: 14px;
    color: #334155;
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.ade-toc__item a:hover {
    background-color: rgba(255, 153, 0, 0.08);
    color: #ff9900;
    transform: translateX(2px);
}

.ade-toc__number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    background-color: #f1f5f9;
    color: #94a3b8;
    font-size: 12px;
    font-weight: 700;
    border-radius: 50%;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.ade-toc__item a:hover .ade-toc__number {
    background-color: #ff9900;
    color: #ffffff;
}

.ade-toc__number {
    margin-top: 1px; /* Feinjustierung: Kreis auf Höhe der ersten Textzeile */
}

.ade-toc__text {
    line-height: 1.4;
    overflow-wrap: break-word;
    min-width: 0; /* Erlaubt dem Flex-Kind, tatsächlich zu schrumpfen statt zu überlaufen */
}

body.dark-contrast .ade-toc {
    background-color: #1e293b !important;
    border-color: #334155 !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2) !important;
}

body.dark-contrast .ade-toc__title {
    color: #ffffff !important;
}

body.dark-contrast .ade-toc[open] .ade-toc__title {
    border-bottom-color: #334155 !important;
}

body.dark-contrast .ade-toc__chevron {
    border-color: #64748b !important;
}

body.dark-contrast .ade-toc__item a {
    color: #cbd5e1 !important;
}

body.dark-contrast .ade-toc__item a:hover {
    background-color: rgba(255, 153, 0, 0.12) !important;
    color: #ff9900 !important;
}

body.dark-contrast .ade-toc__number {
    background-color: #334155 !important;
    color: #94a3b8 !important;
}

body.dark-contrast .ade-toc__item a:hover .ade-toc__number {
    background-color: #ff9900 !important;
    color: #ffffff !important;
}

/* =========================================================================
   WHATSAPP-KANAL-BUTTON [whatsapp_kanal_button]
   ========================================================================= */
.ade-whatsapp-btn {
    display: flex;
    align-items: center;
    gap: 16px;
    max-width: 480px;
    margin: 30px auto;
    padding: 18px 24px;
    background: linear-gradient(135deg, #25d366 0%, #1da851 100%);
    border-radius: 14px;
    text-decoration: none;
    box-shadow: 0 4px 14px rgba(37, 211, 102, 0.35);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.ade-whatsapp-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(37, 211, 102, 0.45);
}

.ade-whatsapp-btn__icon {
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    background-color: #ffffff;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-position: center;
    mask-position: center;
}

.ade-whatsapp-btn__text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
}

.ade-whatsapp-btn__title {
    font-size: 16px;
    font-weight: 700;
    color: #ffffff;
    line-height: 1.3;
}

.ade-whatsapp-btn__subtitle {
    font-size: 12px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.85);
}

.ade-whatsapp-btn__arrow {
    font-size: 20px;
    font-weight: 700;
    color: #ffffff;
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

.ade-whatsapp-btn:hover .ade-whatsapp-btn__arrow {
    transform: translateX(4px);
}

@media (max-width: 480px) {
    .ade-whatsapp-btn {
        padding: 16px 18px;
        gap: 12px;
    }
    .ade-whatsapp-btn__title {
        font-size: 14px;
    }
    .ade-whatsapp-btn__subtitle {
        font-size: 11px;
    }
}

body.dark-contrast .ade-whatsapp-btn {
    box-shadow: 0 4px 14px rgba(37, 211, 102, 0.25) !important;
}

/* =========================================================================
   WHATSAPP-KANAL-SEITE [whatsapp_kanal_seite] - Listen & Bild im Design
   ========================================================================= */
.ade-whatsapp-page ul {
    list-style: none;
    margin: 20px 0;
    padding: 0;
    clear: both; /* Verhindert, dass die Liste neben/über ein schwebendes Bild rutscht */
}

.ade-whatsapp-page ul li {
    position: relative;
    padding: 12px 16px 12px 46px;
    margin-bottom: 10px;
    background-color: #f8fafc;
    border: 1px solid rgba(37, 211, 102, 0.3);
    border-radius: 8px;
    line-height: 1.5;
}

.ade-whatsapp-page ul li::before {
    content: "";
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    background-color: #25d366;
    border-radius: 50%;
}

.ade-whatsapp-page ul li::after {
    content: "";
    position: absolute;
    left: 22px;
    top: 50%;
    width: 5px;
    height: 9px;
    border-right: 2px solid #ffffff;
    border-bottom: 2px solid #ffffff;
    transform: translateY(-65%) rotate(45deg);
}

.ade-whatsapp-page img {
    border-radius: 14px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
    border: 1px solid rgba(37, 211, 102, 0.25);
}

body.dark-contrast .ade-whatsapp-page ul li {
    background-color: #1e293b !important;
    border-color: rgba(37, 211, 102, 0.4) !important;
    color: #f3f4f6 !important;
}

body.dark-contrast .ade-whatsapp-page img {
    border-color: rgba(37, 211, 102, 0.35) !important;
}

@media (max-width: 480px) {
    .ade-whatsapp-page ul li {
        padding: 10px 14px 10px 40px;
        font-size: 14px;
    }
    .ade-whatsapp-page ul li::before {
        left: 12px;
        width: 18px;
        height: 18px;
    }
    .ade-whatsapp-page ul li::after {
        left: 17px;
    }
}

/* Absicherung: falls eine Überschrift direkt nach dem Bild noch daneben rutscht */
.ade-whatsapp-page h2,
.ade-whatsapp-page h3 {
    clear: both;
}

/* =========================================================================
   HÖRSPIELE FÜR ERWACHSENE [erwachsene_seite] - Design an ade-promo-box--erwachsene angeglichen
   ========================================================================= */
.ade-erwachsene-page ul {
    list-style: none;
    margin: 20px 0;
    padding: 0;
}

.ade-erwachsene-page ul li {
    position: relative;
    padding: 10px 16px 10px 34px;
    margin-bottom: 8px;
    line-height: 1.5;
}

.ade-erwachsene-page ul li::before {
    content: "→";
    position: absolute;
    left: 0;
    top: 10px;
    color: #1e293b;
    font-weight: 700;
}

.ade-genre-box-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin: 20px 0;
    align-items: stretch;
}

.ade-genre-box {
    padding: 20px;
    background-color: #f8fafc;
    border-left: 5px solid #1e293b;
    border-radius: 4px;
    box-sizing: border-box;
}

.ade-genre-box__title {
    font-size: 16px;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 10px 0;
    padding-bottom: 8px;
    border-bottom: 1px solid #cbd5e1;
}

.ade-genre-box__text {
    font-size: 14px;
    color: #4b5563;
    line-height: 1.6;
    margin: 0;
}

@media (max-width: 768px) {
    .ade-genre-box-grid {
        grid-template-columns: 1fr;
    }
}

body.dark-contrast .ade-erwachsene-page ul li::before {
    color: #94a3b8 !important;
}

body.dark-contrast .ade-genre-box {
    background-color: #1e293b !important;
    border-left-color: #94a3b8 !important;
}

body.dark-contrast .ade-genre-box__title {
    color: #f1f5f9 !important;
    border-bottom-color: #334155 !important;
}

body.dark-contrast .ade-genre-box__text {
    color: #cbd5e1 !important;
}

/* =========================================================================
   REIHEN-LANDINGPAGES
   Das komplette CSS der Landingpages (Fraktal, VIDAN, Sieben Siegel,
   Ivar Leon Menger, Mark Brandis) liegt seit der Auslagerung in

       assets/css/reihe-landing.css

   und wird ueber ade_reihen_landing_assets() in der functions.php nur auf
   diesen Seiten geladen. Bitte dort weiterarbeiten und hier nichts
   Landing-spezifisches mehr ergaenzen.
   ========================================================================= */