{"id":27901,"date":"2024-11-20T15:39:34","date_gmt":"2024-11-20T15:39:34","guid":{"rendered":"https:\/\/darksn.de\/?page_id=27901"},"modified":"2026-01-25T11:00:08","modified_gmt":"2026-01-25T11:00:08","slug":"news","status":"publish","type":"page","link":"https:\/\/darksn.de\/de\/news\/","title":{"rendered":"News"},"content":{"rendered":"<div data-elementor-type=\"wp-page\" data-elementor-id=\"27901\" class=\"elementor elementor-27901\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-8d61117 e-con-full e-flex wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no e-con e-parent\" data-id=\"8d61117\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-cd082e9 elementor-widget elementor-widget-html\" data-id=\"cd082e9\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<!-- Lucide Icons -->\r\n<script src=\"https:\/\/unpkg.com\/lucide@latest\"><\/script>\r\n\r\n<style>\r\n    .darksn-blog-wrapper,\r\n    .darksn-blog-wrapper * {\r\n        box-sizing: border-box;\r\n    }\r\n\r\n    .darksn-blog-wrapper {\r\n        font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\r\n        background: linear-gradient(to bottom, #fafafa, #ffffff);\r\n        color: #18181b;\r\n        -webkit-font-smoothing: antialiased;\r\n        width: 100vw !important;\r\n        max-width: 100vw !important;\r\n        min-width: 100vw !important;\r\n        margin: 0 !important;\r\n        margin-left: calc(-50vw + 50%) !important;\r\n        padding: 0 !important;\r\n        padding-bottom: 64px !important;\r\n        position: relative;\r\n        z-index: 1;\r\n        min-height: 100vh;\r\n        margin-top: 0 !important;\r\n    }\r\n\r\n    .darksn-header-placeholder {\r\n        position: fixed;\r\n        top: 0;\r\n        left: 0;\r\n        right: 0;\r\n        height: 220px;\r\n        background: #18181b;\r\n        z-index: -1;\r\n    }\r\n\r\n    @media (max-width: 768px) {\r\n        .darksn-header-placeholder {\r\n            display: none !important;\r\n            margin: 0 !important;\r\n            height: 0 !important;\r\n        }\r\n\r\n        .desktop-spacer {\r\n            display: none !important;\r\n        }\r\n\r\n        \/* 1. Wrapper breaks out of any parent to be full viewport width *\/\r\n        .darksn-blog-wrapper {\r\n            width: 100vw !important;\r\n            max-width: 100vw !important;\r\n            min-width: 100vw !important;\r\n            position: relative !important;\r\n            left: 50% !important;\r\n            right: 50% !important;\r\n            margin-left: -50vw !important;\r\n            margin-right: -50vw !important;\r\n            margin-top: -20px !important;\r\n            padding: 0 !important;\r\n            padding-bottom: 64px !important;\r\n            overflow-x: hidden !important;\r\n        }\r\n\r\n        \/* 2. Main container provides standard padding *\/\r\n        .main-container {\r\n            width: 100% !important;\r\n            max-width: 100% !important;\r\n            padding: 0 16px !important;\r\n            margin: 0 !important;\r\n            box-sizing: border-box !important;\r\n        }\r\n\r\n        \/* 3. Ticker is direct child of wrapper, so it takes 100% of 100vw *\/\r\n        .ticker-bar {\r\n            width: 100% !important;\r\n            max-width: 100% !important;\r\n            margin: 0 !important;\r\n            margin-bottom: 16px !important;\r\n            left: auto !important;\r\n            right: auto !important;\r\n        }\r\n\r\n        \/* 4. Hero breaks out of main-container's 16px padding *\/\r\n        .hero-slider {\r\n            width: calc(100% + 32px) !important;\r\n            max-width: none !important;\r\n            margin: 0 !important;\r\n            margin-left: -16px !important;\r\n            border-radius: 0 !important;\r\n            left: auto !important;\r\n            right: auto !important;\r\n            position: relative !important;\r\n        }\r\n\r\n        .hero-container {\r\n            width: 100% !important;\r\n            margin: 0 !important;\r\n            padding: 0 !important;\r\n        }\r\n\r\n        .hero-thumbnails {\r\n            padding: 0 16px !important;\r\n            margin-top: 12px !important;\r\n        }\r\n\r\n        .content-grid {\r\n            display: block !important;\r\n            width: 100% !important;\r\n        }\r\n\r\n        .category-show-more {\r\n            width: 100% !important;\r\n        }\r\n\r\n        .ticker-inner {\r\n            padding: 0 16px !important;\r\n        }\r\n\r\n        body {\r\n            overflow-x: hidden !important;\r\n        }\r\n\r\n        html {\r\n            overflow-x: hidden !important;\r\n        }\r\n    }\r\n\r\n    body {\r\n        overflow-x: hidden !important;\r\n    }\r\n\r\n    html {\r\n        overflow-x: hidden !important;\r\n    }\r\n    }\r\n\r\n    \/* Force Elementor full width override *\/\r\n    .elementor-section.elementor-section-boxed>.elementor-container,\r\n    .elementor-section.elementor-section-full_width>.elementor-container,\r\n    .elementor-widget-wrap,\r\n    .elementor-widget-container {\r\n        max-width: 100% !important;\r\n        width: 100% !important;\r\n    }\r\n\r\n    .reading-progress {\r\n        position: fixed;\r\n        top: 0;\r\n        left: 0;\r\n        height: 3px;\r\n        background: linear-gradient(90deg, #3b82f6, #8b5cf6);\r\n        z-index: 9999;\r\n        transition: width 0.1s ease;\r\n    }\r\n\r\n    .line-clamp-1 {\r\n        display: -webkit-box;\r\n        -webkit-line-clamp: 1;\r\n        -webkit-box-orient: vertical;\r\n        overflow: hidden;\r\n    }\r\n\r\n    .line-clamp-2 {\r\n        display: -webkit-box;\r\n        -webkit-line-clamp: 2;\r\n        -webkit-box-orient: vertical;\r\n        overflow: hidden;\r\n    }\r\n\r\n    .line-clamp-3 {\r\n        display: -webkit-box;\r\n        -webkit-line-clamp: 3;\r\n        -webkit-box-orient: vertical;\r\n        overflow: hidden;\r\n    }\r\n\r\n    @keyframes pulse-dot {\r\n\r\n        0%,\r\n        100% {\r\n            opacity: 1;\r\n        }\r\n\r\n        50% {\r\n            opacity: 0.5;\r\n        }\r\n    }\r\n\r\n    .pulse-dot {\r\n        animation: pulse-dot 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;\r\n    }\r\n\r\n    @keyframes shimmer {\r\n        0% {\r\n            background-position: -200% 0;\r\n        }\r\n\r\n        100% {\r\n            background-position: 200% 0;\r\n        }\r\n    }\r\n\r\n    .skeleton-shimmer {\r\n        background: linear-gradient(90deg, #e4e4e7 25%, #f4f4f5 50%, #e4e4e7 75%);\r\n        background-size: 200% 100%;\r\n        animation: shimmer 1.5s infinite;\r\n    }\r\n\r\n    @keyframes ticker {\r\n        0% {\r\n            transform: translateX(100%);\r\n        }\r\n\r\n        100% {\r\n            transform: translateX(-100%);\r\n        }\r\n    }\r\n\r\n    .ticker-animate {\r\n        animation: ticker 30s linear infinite;\r\n    }\r\n\r\n    .ticker-animate:hover {\r\n        animation-play-state: paused;\r\n    }\r\n\r\n    .ticker-bar {\r\n        background: #18181b;\r\n        color: white;\r\n        padding: 8px 0;\r\n        overflow: hidden;\r\n        margin-bottom: 32px;\r\n        width: 100%;\r\n    }\r\n\r\n    .ticker-inner {\r\n        width: 100%;\r\n        padding: 0 24px;\r\n        display: flex;\r\n        align-items: center;\r\n        gap: 16px;\r\n    }\r\n\r\n    .ticker-badge {\r\n        display: flex;\r\n        align-items: center;\r\n        gap: 8px;\r\n        flex-shrink: 0;\r\n        background: #dc2626;\r\n        padding: 4px 12px;\r\n        border-radius: 4px;\r\n    }\r\n\r\n    .ticker-badge-dot {\r\n        width: 8px;\r\n        height: 8px;\r\n        background: white;\r\n        border-radius: 50%;\r\n    }\r\n\r\n    .ticker-badge-text {\r\n        font-size: 12px;\r\n        font-weight: 700;\r\n        text-transform: uppercase;\r\n        letter-spacing: 0.05em;\r\n    }\r\n\r\n    .ticker-content {\r\n        overflow: hidden;\r\n        flex: 1;\r\n    }\r\n\r\n    .ticker-text {\r\n        white-space: nowrap;\r\n        font-size: 14px;\r\n    }\r\n\r\n    .ticker-text span {\r\n        margin: 0 32px;\r\n    }\r\n\r\n    .main-container {\r\n        width: 100% !important;\r\n        max-width: 1400px !important;\r\n        margin: 0 auto;\r\n        padding: 0 24px;\r\n    }\r\n\r\n    @media (min-width: 1024px) {\r\n        .main-container {\r\n            padding: 0 48px;\r\n        }\r\n    }\r\n\r\n    .category-nav-wrapper {\r\n        margin-bottom: 32px;\r\n        overflow-x: auto;\r\n        padding-bottom: 8px;\r\n    }\r\n\r\n    .category-nav {\r\n        display: flex;\r\n        align-items: center;\r\n        gap: 12px;\r\n        min-width: max-content;\r\n    }\r\n\r\n    .category-pill {\r\n        padding: 10px 20px;\r\n        border-radius: 9999px;\r\n        font-size: 14px;\r\n        font-weight: 500;\r\n        cursor: pointer;\r\n        transition: all 0.2s ease;\r\n        border: none;\r\n        display: inline-flex;\r\n        align-items: center;\r\n        gap: 6px;\r\n    }\r\n\r\n    .category-pill:hover {\r\n        transform: scale(1.05);\r\n    }\r\n\r\n    .category-pill.active {\r\n        background: #18181b;\r\n        color: white;\r\n        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);\r\n    }\r\n\r\n    .category-pill:not(.active) {\r\n        background: white;\r\n        color: #3f3f46;\r\n        border: 1px solid #e4e4e7;\r\n    }\r\n\r\n    .category-pill:not(.active):hover {\r\n        border-color: #3b82f6;\r\n        color: #2563eb;\r\n    }\r\n\r\n    .category-pill svg {\r\n        width: 16px;\r\n        height: 16px;\r\n    }\r\n\r\n    .category-count {\r\n        margin-left: 4px;\r\n        font-size: 12px;\r\n        color: #a1a1aa;\r\n    }\r\n\r\n    .content-grid {\r\n        width: 100%;\r\n        display: grid;\r\n        grid-template-columns: 1fr;\r\n        gap: 32px;\r\n    }\r\n\r\n    @media (min-width: 1024px) {\r\n        .content-grid {\r\n            grid-template-columns: 2fr 1fr;\r\n            gap: 48px;\r\n        }\r\n    }\r\n\r\n    .main-column {\r\n        display: flex;\r\n        flex-direction: column;\r\n        gap: 40px;\r\n    }\r\n\r\n    .hero-container {\r\n        min-height: 500px;\r\n    }\r\n\r\n    .hero-slider {\r\n        position: relative;\r\n        cursor: pointer;\r\n        overflow: hidden;\r\n        border-radius: 16px;\r\n        box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);\r\n        height: 500px;\r\n    }\r\n\r\n    .hero-slider:hover .hero-img {\r\n        transform: scale(1.05);\r\n    }\r\n\r\n    .hero-img {\r\n        width: 100%;\r\n        height: 100%;\r\n        object-fit: cover;\r\n        transition: transform 0.7s ease;\r\n    }\r\n\r\n    .hero-overlay {\r\n        position: absolute;\r\n        inset: 0;\r\n        background: linear-gradient(to top, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.4) 50%, transparent);\r\n    }\r\n\r\n    .hero-content {\r\n        position: absolute;\r\n        bottom: 0;\r\n        left: 0;\r\n        padding: 32px 32px 64px 32px;\r\n        width: 100%;\r\n        z-index: 10;\r\n    }\r\n\r\n    .hero-badges {\r\n        display: flex;\r\n        align-items: center;\r\n        gap: 12px;\r\n        margin-bottom: 16px;\r\n    }\r\n\r\n    .hero-badge-featured {\r\n        background: #2563eb;\r\n        color: white;\r\n        padding: 4px 12px;\r\n        border-radius: 9999px;\r\n        font-size: 12px;\r\n        font-weight: 700;\r\n        text-transform: uppercase;\r\n        letter-spacing: 0.05em;\r\n    }\r\n\r\n    .hero-badge-date {\r\n        background: rgba(255, 255, 255, 0.2);\r\n        backdrop-filter: blur(8px);\r\n        color: white;\r\n        padding: 4px 12px;\r\n        border-radius: 9999px;\r\n        font-size: 12px;\r\n        font-weight: 500;\r\n    }\r\n\r\n    .hero-title {\r\n        font-size: 28px;\r\n        font-weight: 700;\r\n        color: white;\r\n        letter-spacing: -0.025em;\r\n        margin-bottom: 16px;\r\n        line-height: 1.2;\r\n        text-decoration: none;\r\n        display: block;\r\n    }\r\n\r\n    .hero-title:hover {\r\n        text-decoration: underline;\r\n        text-decoration-color: rgba(59, 130, 246, 0.5);\r\n        text-underline-offset: 4px;\r\n    }\r\n\r\n    @media (min-width: 1024px) {\r\n        .hero-title {\r\n            font-size: 36px;\r\n        }\r\n    }\r\n\r\n    .hero-excerpt {\r\n        color: #d4d4d8;\r\n        font-size: 16px;\r\n        line-height: 1.6;\r\n        max-width: 672px;\r\n        margin: 0;\r\n    }\r\n\r\n    .hero-nav {\r\n        position: absolute;\r\n        bottom: 32px;\r\n        right: 32px;\r\n        display: flex;\r\n        gap: 8px;\r\n        z-index: 20;\r\n    }\r\n\r\n    .hero-nav-btn {\r\n        padding: 12px;\r\n        border-radius: 50%;\r\n        transition: all 0.2s ease;\r\n        border: none;\r\n        cursor: pointer;\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n    }\r\n\r\n    .hero-nav-btn:hover {\r\n        transform: scale(1.1);\r\n    }\r\n\r\n    .hero-nav-btn.prev {\r\n        background: rgba(255, 255, 255, 0.1);\r\n        backdrop-filter: blur(8px);\r\n        color: white;\r\n        border: 1px solid rgba(255, 255, 255, 0.2);\r\n    }\r\n\r\n    .hero-nav-btn.prev:hover {\r\n        background: rgba(255, 255, 255, 0.2);\r\n    }\r\n\r\n    .hero-nav-btn.next {\r\n        background: #2563eb;\r\n        color: white;\r\n        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);\r\n    }\r\n\r\n    .hero-nav-btn.next:hover {\r\n        background: #3b82f6;\r\n    }\r\n\r\n    .hero-nav-btn svg {\r\n        width: 20px;\r\n        height: 20px;\r\n    }\r\n\r\n    .hero-indicators {\r\n        position: absolute;\r\n        bottom: 32px;\r\n        left: 32px;\r\n        display: flex;\r\n        gap: 8px;\r\n        z-index: 20;\r\n    }\r\n\r\n    .hero-indicator {\r\n        height: 8px;\r\n        border-radius: 9999px;\r\n        transition: all 0.3s ease;\r\n        border: none;\r\n        cursor: pointer;\r\n    }\r\n\r\n    .hero-indicator.active {\r\n        background: white;\r\n        width: 32px;\r\n    }\r\n\r\n    .hero-indicator:not(.active) {\r\n        background: rgba(255, 255, 255, 0.4);\r\n        width: 8px;\r\n    }\r\n\r\n    .hero-thumbnails {\r\n        display: grid;\r\n        grid-template-columns: repeat(3, 1fr);\r\n        gap: 12px;\r\n        margin-top: 16px;\r\n    }\r\n\r\n    @media (min-width: 640px) {\r\n        .hero-thumbnails {\r\n            grid-template-columns: repeat(5, 1fr);\r\n        }\r\n    }\r\n\r\n    .hero-thumb {\r\n        aspect-ratio: 16\/9;\r\n        background: #e4e4e7;\r\n        border-radius: 12px;\r\n        overflow: hidden;\r\n        cursor: pointer;\r\n        transition: all 0.3s ease;\r\n    }\r\n\r\n    .hero-thumb.active {\r\n        box-shadow: 0 0 0 2px #2563eb, 0 0 0 4px white;\r\n    }\r\n\r\n    .hero-thumb:not(.active) {\r\n        opacity: 0.7;\r\n    }\r\n\r\n    .hero-thumb:not(.active):hover {\r\n        opacity: 1;\r\n    }\r\n\r\n    .hero-thumb img {\r\n        width: 100%;\r\n        height: 100%;\r\n        object-fit: cover;\r\n    }\r\n\r\n    .section-header {\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: space-between;\r\n        border-bottom: 1px solid #e4e4e7;\r\n        padding-bottom: 16px;\r\n    }\r\n\r\n    .section-header-left {\r\n        display: flex;\r\n        align-items: center;\r\n        gap: 12px;\r\n    }\r\n\r\n    .section-header-bar {\r\n        width: 4px;\r\n        height: 32px;\r\n        background: linear-gradient(to bottom, #2563eb, #8b5cf6);\r\n        border-radius: 9999px;\r\n    }\r\n\r\n    .section-title {\r\n        font-size: 24px;\r\n        font-weight: 700;\r\n        color: #18181b;\r\n        letter-spacing: -0.025em;\r\n        margin: 0;\r\n    }\r\n\r\n    .section-header-right {\r\n        display: flex;\r\n        align-items: center;\r\n        gap: 8px;\r\n    }\r\n\r\n    .view-btn {\r\n        padding: 8px;\r\n        border-radius: 8px;\r\n        transition: all 0.2s ease;\r\n        border: none;\r\n        cursor: pointer;\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n    }\r\n\r\n    .view-btn svg {\r\n        width: 16px;\r\n        height: 16px;\r\n    }\r\n\r\n    .view-btn.inactive {\r\n        background: #f4f4f5;\r\n        color: #52525b;\r\n    }\r\n\r\n    .view-btn.inactive:hover {\r\n        background: #e4e4e7;\r\n    }\r\n\r\n    .view-btn.active {\r\n        background: #18181b;\r\n        color: white;\r\n    }\r\n\r\n    .blog-feed {\r\n        display: flex;\r\n        flex-direction: column;\r\n        gap: 32px;\r\n    }\r\n\r\n    .article-card {\r\n        display: flex;\r\n        flex-direction: column;\r\n        gap: 24px;\r\n        cursor: pointer;\r\n        background: white;\r\n        border-radius: 16px;\r\n        padding: 16px;\r\n        border: 1px solid #f4f4f5;\r\n        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\r\n        transition: all 0.3s ease;\r\n    }\r\n\r\n    .article-card:hover {\r\n        transform: translateY(-2px);\r\n        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);\r\n    }\r\n\r\n    @media (min-width: 640px) {\r\n        .article-card {\r\n            flex-direction: row;\r\n        }\r\n    }\r\n\r\n    .article-image-wrapper {\r\n        width: 100%;\r\n        overflow: hidden;\r\n        border-radius: 12px;\r\n        position: relative;\r\n    }\r\n\r\n    @media (min-width: 640px) {\r\n        .article-image-wrapper {\r\n            width: 41.666667%;\r\n            flex-shrink: 0;\r\n            position: relative;\r\n        }\r\n\r\n        \/* List View: Image fills height *\/\r\n        .blog-feed:not(.grid-view) .article-image-wrapper {\r\n            height: auto;\r\n            min-height: 224px;\r\n        }\r\n\r\n        .blog-feed:not(.grid-view) .article-image {\r\n            position: absolute;\r\n            top: 0;\r\n            left: 0;\r\n            width: 100%;\r\n            height: 100%;\r\n        }\r\n    }\r\n\r\n    .article-image {\r\n        width: 100%;\r\n        height: 224px;\r\n        object-fit: cover;\r\n        background: #e4e4e7;\r\n        transition: transform 0.5s ease;\r\n    }\r\n\r\n    .article-card:hover .article-image {\r\n        transform: scale(1.05);\r\n    }\r\n\r\n    .article-category-badge {\r\n        position: absolute;\r\n        top: 12px;\r\n        left: 12px;\r\n        background: rgba(37, 99, 235, 0.9);\r\n        backdrop-filter: blur(4px);\r\n        color: white;\r\n        padding: 4px 10px;\r\n        border-radius: 8px;\r\n        font-size: 12px;\r\n        font-weight: 500;\r\n    }\r\n\r\n    .article-content {\r\n        width: 100%;\r\n        display: flex;\r\n        flex-direction: column;\r\n        justify-content: center;\r\n        padding: 8px 0;\r\n    }\r\n\r\n    @media (min-width: 640px) {\r\n        .article-content {\r\n            flex: 1;\r\n        }\r\n    }\r\n\r\n    .article-meta {\r\n        display: flex;\r\n        align-items: center;\r\n        gap: 12px;\r\n        color: #71717a;\r\n        font-size: 12px;\r\n        margin-bottom: 12px;\r\n    }\r\n\r\n    .article-meta-item {\r\n        display: flex;\r\n        align-items: center;\r\n        gap: 4px;\r\n    }\r\n\r\n    .article-meta-item svg {\r\n        width: 14px;\r\n        height: 14px;\r\n    }\r\n\r\n    .article-meta-dot {\r\n        width: 4px;\r\n        height: 4px;\r\n        background: #d4d4d8;\r\n        border-radius: 50%;\r\n    }\r\n\r\n    .article-title {\r\n        font-size: 20px;\r\n        font-weight: 700;\r\n        color: #18181b;\r\n        margin: 0 0 12px 0;\r\n        letter-spacing: -0.025em;\r\n        line-height: 1.4;\r\n        transition: color 0.2s ease;\r\n    }\r\n\r\n    .article-card:hover .article-title {\r\n        color: #2563eb;\r\n    }\r\n\r\n    .article-excerpt {\r\n        font-size: 14px;\r\n        color: #52525b;\r\n        line-height: 1.6;\r\n        margin: 0 0 16px 0;\r\n    }\r\n\r\n    .article-footer {\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: space-between;\r\n        margin-top: auto;\r\n    }\r\n\r\n    .article-author {\r\n        display: flex;\r\n        align-items: center;\r\n        gap: 8px;\r\n    }\r\n\r\n    .article-author-avatar {\r\n        width: 32px;\r\n        height: 32px;\r\n        background: linear-gradient(135deg, #3b82f6, #8b5cf6);\r\n        border-radius: 50%;\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        color: white;\r\n        font-size: 12px;\r\n        font-weight: 700;\r\n    }\r\n\r\n    .article-author-name {\r\n        font-size: 14px;\r\n        color: #52525b;\r\n    }\r\n\r\n    .article-read-more {\r\n        color: #2563eb;\r\n        font-size: 14px;\r\n        font-weight: 500;\r\n        display: flex;\r\n        align-items: center;\r\n        gap: 4px;\r\n        transition: gap 0.2s ease;\r\n    }\r\n\r\n    .article-card:hover .article-read-more {\r\n        gap: 8px;\r\n    }\r\n\r\n    .article-read-more svg {\r\n        width: 16px;\r\n        height: 16px;\r\n    }\r\n\r\n    .load-more-wrapper {\r\n        text-align: center;\r\n        padding-top: 32px;\r\n    }\r\n\r\n    .load-more-btn {\r\n        display: none;\r\n        padding: 16px 32px;\r\n        background: linear-gradient(135deg, #2563eb, #8b5cf6);\r\n        color: white;\r\n        font-weight: 600;\r\n        border-radius: 12px;\r\n        border: none;\r\n        cursor: pointer;\r\n        transition: all 0.2s ease;\r\n        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);\r\n    }\r\n\r\n    .load-more-btn:hover {\r\n        transform: translateY(-2px);\r\n        box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);\r\n    }\r\n\r\n    .load-more-btn.visible {\r\n        display: inline-flex;\r\n        align-items: center;\r\n        gap: 8px;\r\n    }\r\n\r\n    .load-more-btn svg {\r\n        width: 20px;\r\n        height: 20px;\r\n        transition: transform 0.2s ease;\r\n    }\r\n\r\n    .load-more-btn:hover svg {\r\n        transform: translateY(2px);\r\n    }\r\n\r\n    .sidebar {\r\n        display: flex;\r\n        flex-direction: column;\r\n        gap: 32px;\r\n    }\r\n\r\n    @media (min-width: 1024px) {\r\n        .sidebar {\r\n            position: sticky;\r\n            top: 150px;\r\n        }\r\n    }\r\n\r\n    .sidebar-card {\r\n        background: white;\r\n        border-radius: 16px;\r\n        padding: 24px;\r\n        border: 1px solid #f4f4f5;\r\n        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\r\n    }\r\n\r\n    .sidebar-header {\r\n        display: flex;\r\n        align-items: center;\r\n        gap: 12px;\r\n        margin-bottom: 20px;\r\n    }\r\n\r\n    .sidebar-icon {\r\n        width: 40px;\r\n        height: 40px;\r\n        border-radius: 12px;\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n    }\r\n\r\n    .sidebar-icon svg {\r\n        width: 20px;\r\n        height: 20px;\r\n    }\r\n\r\n    .sidebar-icon.red {\r\n        background: #fef2f2;\r\n        color: #dc2626;\r\n    }\r\n\r\n    .sidebar-icon.blue {\r\n        background: #eff6ff;\r\n        color: #2563eb;\r\n    }\r\n\r\n    .sidebar-icon.purple {\r\n        background: #faf5ff;\r\n        color: #9333ea;\r\n    }\r\n\r\n    .sidebar-icon.orange {\r\n        background: #fff7ed;\r\n        color: #ea580c;\r\n    }\r\n\r\n    .sidebar-title {\r\n        font-size: 18px;\r\n        font-weight: 700;\r\n        color: #18181b;\r\n        margin: 0;\r\n    }\r\n\r\n    .sidebar-subtitle {\r\n        font-size: 12px;\r\n        color: #71717a;\r\n        margin: 0;\r\n    }\r\n\r\n    .trending-list {\r\n        display: flex;\r\n        flex-direction: column;\r\n        gap: 16px;\r\n    }\r\n\r\n    .trending-item {\r\n        display: flex;\r\n        gap: 16px;\r\n        padding: 8px;\r\n        margin: -8px;\r\n        border-radius: 8px;\r\n        transition: background 0.2s ease;\r\n        text-decoration: none;\r\n    }\r\n\r\n    .trending-item:hover {\r\n        background: #fafafa;\r\n    }\r\n\r\n    .trending-item-image-wrapper {\r\n        position: relative;\r\n        flex-shrink: 0;\r\n    }\r\n\r\n    .trending-item-number {\r\n        position: absolute;\r\n        top: -4px;\r\n        left: -4px;\r\n        width: 20px;\r\n        height: 20px;\r\n        background: #2563eb;\r\n        color: white;\r\n        font-size: 12px;\r\n        font-weight: 700;\r\n        border-radius: 50%;\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        z-index: 10;\r\n    }\r\n\r\n    .trending-item-image {\r\n        width: 80px;\r\n        height: 64px;\r\n        object-fit: cover;\r\n        border-radius: 8px;\r\n        background: #f4f4f5;\r\n    }\r\n\r\n    .trending-item-content {\r\n        flex: 1;\r\n        min-width: 0;\r\n    }\r\n\r\n    .trending-item-title {\r\n        font-size: 14px;\r\n        font-weight: 500;\r\n        color: #18181b;\r\n        line-height: 1.4;\r\n        transition: color 0.2s ease;\r\n        margin: 0 0 4px 0;\r\n    }\r\n\r\n    .trending-item:hover .trending-item-title {\r\n        color: #2563eb;\r\n    }\r\n\r\n    .trending-item-date {\r\n        font-size: 12px;\r\n        color: #71717a;\r\n        margin: 0;\r\n    }\r\n\r\n    .categories-grid {\r\n        display: flex;\r\n        flex-wrap: wrap;\r\n        gap: 8px;\r\n    }\r\n\r\n    .category-tag {\r\n        padding: 8px 16px;\r\n        background: #eff6ff;\r\n        color: #1d4ed8;\r\n        border-radius: 8px;\r\n        font-size: 14px;\r\n        font-weight: 500;\r\n        text-decoration: none;\r\n        transition: background 0.2s ease;\r\n        display: flex;\r\n        align-items: center;\r\n        gap: 4px;\r\n    }\r\n\r\n    .category-tag:hover {\r\n        background: #dbeafe;\r\n    }\r\n\r\n    .category-tag-count {\r\n        font-size: 12px;\r\n        color: #3b82f6;\r\n    }\r\n\r\n    .tags-grid {\r\n        display: flex;\r\n        flex-wrap: wrap;\r\n        gap: 8px;\r\n    }\r\n\r\n    .tag-item {\r\n        padding: 6px 12px;\r\n        background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(139, 92, 246, 0.1));\r\n        border: 1px solid rgba(59, 130, 246, 0.2);\r\n        border-radius: 8px;\r\n        font-size: 14px;\r\n        color: #7c3aed;\r\n        text-decoration: none;\r\n        transition: background 0.2s ease;\r\n    }\r\n\r\n    .tag-item:hover {\r\n        background: rgba(139, 92, 246, 0.15);\r\n    }\r\n\r\n    .recent-posts-list {\r\n        display: flex;\r\n        flex-direction: column;\r\n    }\r\n\r\n    .recent-post-item {\r\n        padding: 12px 0;\r\n        border-bottom: 1px solid #f4f4f5;\r\n        display: flex;\r\n        align-items: center;\r\n        gap: 8px;\r\n        font-size: 14px;\r\n        color: #3f3f46;\r\n        text-decoration: none;\r\n        transition: all 0.2s ease;\r\n    }\r\n\r\n    .recent-post-item:last-child {\r\n        border-bottom: none;\r\n    }\r\n\r\n    .recent-post-item:hover {\r\n        color: #2563eb;\r\n    }\r\n\r\n    .recent-post-item svg {\r\n        width: 16px;\r\n        height: 16px;\r\n        color: #a1a1aa;\r\n        transition: all 0.2s ease;\r\n        flex-shrink: 0;\r\n    }\r\n\r\n    .recent-post-item:hover svg {\r\n        color: #2563eb;\r\n        transform: translateX(4px);\r\n    }\r\n\r\n    \/* Refined Sidebar Categories *\/\r\n    .category-tag-refined {\r\n        display: flex;\r\n        justify-content: space-between;\r\n        align-items: center;\r\n        width: 100%;\r\n        padding: 10px 16px;\r\n        background: #f8fafc;\r\n        border: 1px solid #e2e8f0;\r\n        border-radius: 12px;\r\n        color: #475569;\r\n        font-size: 14px;\r\n        font-weight: 500;\r\n        text-decoration: none;\r\n        cursor: pointer;\r\n        transition: all 0.2s ease;\r\n        margin-bottom: 8px;\r\n    }\r\n\r\n    .category-tag-refined:hover {\r\n        background: #eff6ff;\r\n        border-color: #3b82f6;\r\n        color: #2563eb;\r\n        transform: translateX(4px);\r\n    }\r\n\r\n    .category-tag-refined.active {\r\n        background: #2563eb;\r\n        color: white;\r\n        border-color: #2563eb;\r\n    }\r\n\r\n    .category-tag-refined .count {\r\n        background: rgba(0, 0, 0, 0.05);\r\n        color: inherit;\r\n        padding: 2px 8px;\r\n        border-radius: 999px;\r\n        font-size: 12px;\r\n        font-weight: 600;\r\n    }\r\n\r\n    .category-tag-refined:hover .count {\r\n        background: rgba(37, 99, 235, 0.1);\r\n        color: #2563eb;\r\n    }\r\n\r\n    .category-tag-refined.active .count {\r\n        background: rgba(255, 255, 255, 0.2);\r\n        color: white;\r\n    }\r\n\r\n    \/* Ticker Link - Force White *\/\r\n    .ticker-link {\r\n        color: #ffffff !important;\r\n        text-decoration: none;\r\n        transition: opacity 0.2s;\r\n        margin-right: 32px;\r\n        display: inline-block;\r\n        font-weight: 500;\r\n    }\r\n\r\n    .ticker-link:hover {\r\n        opacity: 0.8;\r\n        text-decoration: underline;\r\n    }\r\n\r\n    \/* Ticker Text Container *\/\r\n    .ticker-text {\r\n        white-space: nowrap;\r\n        font-size: 14px;\r\n        color: #ffffff !important;\r\n        display: flex;\r\n        align-items: center;\r\n    }\r\n\r\n    \/* Remove pause on hover to keep scrolling *\/\r\n    .ticker-animate {\r\n        animation: ticker 30s linear infinite;\r\n        \/* animation-play-state: paused; REMOVED per user request *\/\r\n    }\r\n\r\n    \/* Elite Category Design *\/\r\n    .category-list {\r\n        display: flex;\r\n        flex-direction: column;\r\n        gap: 8px;\r\n    }\r\n\r\n    .category-item {\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: space-between;\r\n        padding: 12px 16px;\r\n        background: white;\r\n        border: 1px solid #f4f4f5;\r\n        border-radius: 12px;\r\n        transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\r\n        cursor: pointer;\r\n        text-decoration: none;\r\n        color: #52525b;\r\n        font-weight: 500;\r\n        position: relative;\r\n        overflow: hidden;\r\n    }\r\n\r\n    .category-item:hover {\r\n        border-color: #e4e4e7;\r\n        background: #fafafa;\r\n        color: #18181b;\r\n        transform: translateX(4px);\r\n    }\r\n\r\n    .category-item.active {\r\n        background: #18181b;\r\n        color: white;\r\n        border-color: #18181b;\r\n        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);\r\n    }\r\n\r\n    .category-item .count {\r\n        font-size: 11px;\r\n        font-weight: 700;\r\n        padding: 4px 8px;\r\n        border-radius: 999px;\r\n        background: #f4f4f5;\r\n        color: #71717a;\r\n        transition: all 0.2s;\r\n    }\r\n\r\n    .category-item:hover .count {\r\n        background: #e4e4e7;\r\n        color: #18181b;\r\n    }\r\n\r\n    .category-item.active .count {\r\n        background: rgba(255, 255, 255, 0.2);\r\n        color: white;\r\n    }\r\n\r\n    .category-show-more {\r\n        width: 100%;\r\n        padding: 12px;\r\n        text-align: center;\r\n        background: transparent;\r\n        border: 1px dashed #d4d4d8;\r\n        border-radius: 12px;\r\n        color: #71717a;\r\n        font-size: 13px;\r\n        font-weight: 500;\r\n        cursor: pointer;\r\n        transition: all 0.2s;\r\n        margin-top: 8px;\r\n    }\r\n\r\n    .category-show-more:hover {\r\n        border-color: #a1a1aa;\r\n        color: #18181b;\r\n        background: #fafafa;\r\n    }\r\n\r\n    \/* Grid View Support *\/\r\n    .blog-feed.grid-view {\r\n        display: grid;\r\n        grid-template-columns: 1fr;\r\n        gap: 32px;\r\n    }\r\n\r\n    @media (min-width: 768px) {\r\n        .blog-feed.grid-view {\r\n            grid-template-columns: repeat(2, 1fr);\r\n        }\r\n    }\r\n\r\n    .blog-feed.grid-view .article-card {\r\n        flex-direction: column;\r\n        height: 100%;\r\n    }\r\n\r\n    .blog-feed.grid-view .article-image-wrapper {\r\n        width: 100%;\r\n        aspect-ratio: 16\/9;\r\n        height: auto;\r\n    }\r\n\r\n    .blog-feed.grid-view .article-image {\r\n        height: 100% !important;\r\n    }\r\n<\/style>\r\n\r\n<div id=\"reading-progress\" class=\"reading-progress\" style=\"width: 0%;\"><\/div>\r\n<div class=\"darksn-header-placeholder hidden-mobile\"><\/div>\r\n<div class=\"desktop-spacer\"><br><br><br><br><br><br><\/div>\r\n<div class=\"darksn-blog-wrapper\">\r\n    <div class=\"ticker-bar\">\r\n        <div class=\"ticker-inner\">\r\n            <div class=\"ticker-badge\">\r\n                <span class=\"ticker-badge-dot pulse-dot\"><\/span>\r\n                <span class=\"ticker-badge-text\">LIVE<\/span>\r\n            <\/div>\r\n            <div class=\"ticker-content\">\r\n                <div id=\"ticker-content\" class=\"ticker-text ticker-animate\">\r\n                    <!-- Loading Ticker... -->\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <div class=\"main-container\">\r\n        <!-- Category Nav Removed -->\r\n\r\n        <div class=\"content-grid\">\r\n            <div class=\"main-column\">\r\n                <div id=\"hero-container\" class=\"hero-container\">\r\n                    <div class=\"skeleton-shimmer\" style=\"width:100%;height:500px;border-radius:16px;\"><\/div>\r\n                <\/div>\r\n\r\n                <div class=\"section-header\">\r\n                    <div class=\"section-header-left\">\r\n                        <div class=\"section-header-bar\"><\/div>\r\n                        <h2 class=\"section-title\" id=\"section-title-news\">Aktuelle Nachrichten<\/h2>\r\n                    <\/div>\r\n                    <div class=\"section-header-right\">\r\n                        <button class=\"view-btn inactive\" onclick=\"setLayout('grid')\" id=\"btn-grid\"><i\r\n                                data-lucide=\"layout-grid\"><\/i><\/button>\r\n                        <button class=\"view-btn active\" onclick=\"setLayout('list')\" id=\"btn-list\"><i\r\n                                data-lucide=\"list\"><\/i><\/button>\r\n                    <\/div>\r\n                <\/div>\r\n\r\n                <div id=\"blog-feed\" class=\"blog-feed\">\r\n                    <div class=\"skeleton-shimmer\" style=\"height:200px;border-radius:16px;\"><\/div>\r\n                    <div class=\"skeleton-shimmer\" style=\"height:200px;border-radius:16px;\"><\/div>\r\n                <\/div>\r\n\r\n                <div class=\"load-more-wrapper\">\r\n                    <button id=\"load-more-btn\" class=\"load-more-btn\" onclick=\"loadMore()\">\r\n                        <span id=\"btn-load-text\">Mehr Artikel laden<\/span> <i data-lucide=\"chevron-down\"><\/i>\r\n                    <\/button>\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <aside class=\"sidebar\">\r\n                <div class=\"sidebar-card\">\r\n                    <div class=\"sidebar-header\">\r\n                        <div class=\"sidebar-icon red\"><i data-lucide=\"trending-up\"><\/i><\/div>\r\n                        <div>\r\n                            <h3 class=\"sidebar-title\" id=\"sidebar-title-trend\">Trending<\/h3>\r\n                            <p class=\"sidebar-subtitle\" id=\"sidebar-subtitle-trend\">Meistgelesen diese Woche<\/p>\r\n                        <\/div>\r\n                    <\/div>\r\n                    <div id=\"sidebar-trends\" class=\"trending-list\">\r\n                        <div class=\"skeleton-shimmer\" style=\"height:64px;border-radius:8px;\"><\/div>\r\n                        <div class=\"skeleton-shimmer\" style=\"height:64px;border-radius:8px;\"><\/div>\r\n                    <\/div>\r\n                <\/div>\r\n\r\n                <div class=\"sidebar-card\">\r\n                    <div class=\"sidebar-header\">\r\n                        <div class=\"sidebar-icon blue\"><i data-lucide=\"folder\"><\/i><\/div>\r\n                        <h3 class=\"sidebar-title\" id=\"sidebar-title-cat\">Kategorien<\/h3>\r\n                    <\/div>\r\n                    <div id=\"sidebar-categories\" class=\"categories-grid\">\r\n                        <div class=\"skeleton-shimmer\" style=\"height:32px;width:80px;border-radius:8px;\"><\/div>\r\n                        <div class=\"skeleton-shimmer\" style=\"height:32px;width:100px;border-radius:8px;\"><\/div>\r\n                    <\/div>\r\n                <\/div>\r\n\r\n                <div class=\"sidebar-card\">\r\n                    <div class=\"sidebar-header\">\r\n                        <div class=\"sidebar-icon purple\"><i data-lucide=\"hash\"><\/i><\/div>\r\n                        <h3 class=\"sidebar-title\">Tags<\/h3>\r\n                    <\/div>\r\n                    <div id=\"sidebar-tags\" class=\"tags-grid\">\r\n                        <div class=\"skeleton-shimmer\" style=\"height:28px;width:60px;border-radius:8px;\"><\/div>\r\n                        <div class=\"skeleton-shimmer\" style=\"height:28px;width:80px;border-radius:8px;\"><\/div>\r\n                    <\/div>\r\n                <\/div>\r\n\r\n                <div class=\"sidebar-card\">\r\n                    <div class=\"sidebar-header\">\r\n                        <div class=\"sidebar-icon orange\"><i data-lucide=\"rss\"><\/i><\/div>\r\n                        <div>\r\n                            <h3 class=\"sidebar-title\" id=\"sidebar-title-recent\">Neueste Beitr\u00e4ge<\/h3>\r\n                            <p class=\"sidebar-subtitle\" id=\"sidebar-subtitle-recent\">Aktuelle Updates<\/p>\r\n                        <\/div>\r\n                    <\/div>\r\n                    <div id=\"sidebar-social\" class=\"recent-posts-list\">\r\n                        <div class=\"skeleton-shimmer\" style=\"height:20px;border-radius:4px;margin:8px 0;\"><\/div>\r\n                        <div class=\"skeleton-shimmer\" style=\"height:20px;border-radius:4px;margin:8px 0;\"><\/div>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/aside>\r\n        <\/div>\r\n    <\/div>\r\n<\/div>\r\n\r\n<script>\r\n    if (typeof lucide !== 'undefined') lucide.createIcons();\r\n    else window.addEventListener('load', () => lucide.createIcons());\r\n\r\n    window.addEventListener('scroll', () => {\r\n        const winScroll = document.body.scrollTop || document.documentElement.scrollTop;\r\n        const height = document.documentElement.scrollHeight - document.documentElement.clientHeight;\r\n        document.getElementById('reading-progress').style.width = (winScroll \/ height) * 100 + '%';\r\n    });\r\n\r\n    let currentPage = 1;\r\n    const perPage = 18;\r\n    let sliderPosts = [];\r\n    let currentSlideIndex = 0;\r\n    let isFetching = false;\r\n    let sliderInterval = null;\r\n\r\n    document.addEventListener(\"DOMContentLoaded\", () => {\r\n        applyTranslations();\r\n        setTimeout(() => { fetchPosts(1); fetchCategories(); fetchTags(); fetchTickerPosts(); }, 100);\r\n    });\r\n\r\n    \/\/ Translation Data\r\n    const translations = {\r\n        de: {\r\n            newsTitle: \"Aktuelle Nachrichten\",\r\n            loadMore: \"Mehr Artikel laden\",\r\n            trending: \"Trending\",\r\n            trendingSub: \"Meistgelesen diese Woche\",\r\n            categories: \"Kategorien\",\r\n            tags: \"Tags\",\r\n            recent: \"Neueste Beitr\u00e4ge\",\r\n            recentSub: \"Aktuelle Updates\",\r\n            all: \"Alle\"\r\n        },\r\n        en: {\r\n            newsTitle: \"Latest News\",\r\n            loadMore: \"Load More Articles\",\r\n            trending: \"Trending\",\r\n            trendingSub: \"Most read this week\",\r\n            categories: \"Categories\",\r\n            tags: \"Tags\",\r\n            recent: \"Recent Posts\",\r\n            recentSub: \"Latest Updates\",\r\n            all: \"All\"\r\n        }\r\n    };\r\n\r\n    function applyTranslations() {\r\n        const isEnglish = document.documentElement.lang.startsWith('en') || window.location.href.includes('\/en\/');\r\n        const lang = isEnglish ? 'en' : 'de';\r\n        const t = translations[lang];\r\n\r\n        const elNewsTitle = document.getElementById('section-title-news');\r\n        if (elNewsTitle) elNewsTitle.innerText = t.newsTitle;\r\n\r\n        const elLoadText = document.getElementById('btn-load-text');\r\n        if (elLoadText) elLoadText.innerText = t.loadMore;\r\n\r\n        const elTrend = document.getElementById('sidebar-title-trend');\r\n        if (elTrend) elTrend.innerText = t.trending;\r\n\r\n        const elTrendSub = document.getElementById('sidebar-subtitle-trend');\r\n        if (elTrendSub) elTrendSub.innerText = t.trendingSub;\r\n\r\n        const elCat = document.getElementById('sidebar-title-cat');\r\n        if (elCat) elCat.innerText = t.categories;\r\n\r\n        const elRecent = document.getElementById('sidebar-title-recent');\r\n        if (elRecent) elRecent.innerText = t.recent;\r\n\r\n        const elRecentSub = document.getElementById('sidebar-subtitle-recent');\r\n        if (elRecentSub) elRecentSub.innerText = t.recentSub;\r\n    }\r\n\r\n    async function fetchTickerPosts() {\r\n        const container = document.getElementById('ticker-content');\r\n        if (!container) return;\r\n        try {\r\n            const isEnglish = document.documentElement.lang.startsWith('en') || window.location.href.includes('\/en\/');\r\n            const langParam = isEnglish ? '&lang=en' : '';\r\n            const res = await fetch('\/wp-json\/wp\/v2\/posts?per_page=5&_fields=id,title,link' + langParam);\r\n            if (!res.ok) throw new Error('Ticker API Error');\r\n            const posts = await res.json();\r\n            const html = posts.map(p => `<a href=\"${p.link}\" class=\"ticker-link\">${p.title.rendered}<\/a>`).join('');\r\n            container.innerHTML = html;\r\n        } catch (e) {\r\n            console.error(e);\r\n            container.innerHTML = '<span class=\"ticker-link\">Willkommen bei DARKSN Blog<\/span>';\r\n        }\r\n    }\r\n\r\n    async function fetchCategories() {\r\n        try {\r\n            const isEnglish = document.documentElement.lang.startsWith('en') || window.location.href.includes('\/en\/');\r\n            const langParam = isEnglish ? '&lang=en' : '';\r\n            const res = await fetch('\/wp-json\/wp\/v2\/categories?per_page=20&hide_empty=true' + langParam);\r\n            if (!res.ok) throw new Error('Categories API Error');\r\n            const categories = await res.json();\r\n            \/\/ renderCategoryNav(categories); \/\/ Top nav removed\r\n            renderSidebarCategories(categories);\r\n        } catch (error) {\r\n            console.error('Error fetching categories:', error);\r\n        }\r\n    }\r\n\r\n    async function fetchTags() {\r\n        try {\r\n            const isEnglish = document.documentElement.lang.startsWith('en') || window.location.href.includes('\/en\/');\r\n            const langParam = isEnglish ? '&lang=en' : '';\r\n            const res = await fetch('\/wp-json\/wp\/v2\/tags?per_page=15&hide_empty=true' + langParam);\r\n            if (!res.ok) throw new Error('Tags API Error');\r\n            const tags = await res.json();\r\n            renderSidebarTags(tags);\r\n        } catch (error) {\r\n            console.error('Error fetching tags:', error);\r\n        }\r\n    }\r\n\r\n    function renderCategoryNav(categories) {\r\n        const container = document.getElementById('category-nav');\r\n        container.innerHTML = '<button class=\"category-pill active\" data-category=\"all\" onclick=\"filterByCategory(null)\"><i data-lucide=\"layers\"><\/i> Alle<\/button>';\r\n        categories.forEach(cat => {\r\n            container.insertAdjacentHTML('beforeend', `<button class=\"category-pill\" data-category=\"${cat.id}\" onclick=\"filterByCategory(${cat.id})\">${cat.name} <span class=\"category-count\">(${cat.count})<\/span><\/button>`);\r\n        });\r\n        if (typeof lucide !== 'undefined') lucide.createIcons();\r\n    }\r\n\r\n    let allCategories = [];\r\n    const CATEGORIES_LIMIT = 6;\r\n\r\n    function renderSidebarCategories(categories) {\r\n        allCategories = categories.sort((a, b) => b.count - a.count);\r\n        renderCategoryList(false);\r\n    }\r\n\r\n    function renderCategoryList(showAll) {\r\n        const container = document.getElementById('sidebar-categories');\r\n        container.innerHTML = '';\r\n        container.classList.add('category-list');\r\n\r\n        const isEnglish = document.documentElement.lang.startsWith('en') || window.location.href.includes('\/en\/');\r\n        const allText = isEnglish ? 'All' : 'Alle';\r\n        const showAllText = isEnglish ? 'Show all categories' : 'Alle Kategorien anzeigen';\r\n\r\n        \/\/ Always show \"All\"\r\n        container.insertAdjacentHTML('beforeend',\r\n            `<button onclick=\"filterByCategory(null)\" class=\"category-item active\" data-category=\"all\">\r\n                ${allText} <span class=\"count\">\u221e<\/span>\r\n             <\/button>`\r\n        );\r\n\r\n        const visibleCats = showAll ? allCategories : allCategories.slice(0, CATEGORIES_LIMIT);\r\n\r\n        visibleCats.forEach(cat => {\r\n            container.insertAdjacentHTML('beforeend',\r\n                `<button onclick=\"filterByCategory(${cat.id})\" class=\"category-item\" data-category=\"${cat.id}\">\r\n                    ${cat.name} <span class=\"count\">${cat.count}<\/span>\r\n                 <\/button>`\r\n            );\r\n        });\r\n\r\n        if (!showAll && allCategories.length > CATEGORIES_LIMIT) {\r\n            container.insertAdjacentHTML('beforeend',\r\n                `<button onclick=\"renderCategoryList(true)\" class=\"category-show-more\">\r\n                    ${showAllText} (${allCategories.length}) <i data-lucide=\"chevron-down\" style=\"width:14px;height:14px;display:inline;vertical-align:middle;\"><\/i>\r\n                 <\/button>`\r\n            );\r\n        }\r\n        if (typeof lucide !== 'undefined') lucide.createIcons();\r\n    }\r\n\r\n    function setLayout(type) {\r\n        const feed = document.getElementById('blog-feed');\r\n        const btnGrid = document.getElementById('btn-grid');\r\n        const btnList = document.getElementById('btn-list');\r\n\r\n        if (type === 'grid') {\r\n            feed.classList.add('grid-view');\r\n            btnGrid.classList.remove('inactive'); btnGrid.classList.add('active');\r\n            btnList.classList.remove('active'); btnList.classList.add('inactive');\r\n        } else {\r\n            feed.classList.remove('grid-view');\r\n            btnList.classList.remove('inactive'); btnList.classList.add('active');\r\n            btnGrid.classList.remove('active'); btnGrid.classList.add('inactive');\r\n        }\r\n    }\r\n\r\n    function renderSidebarTags(tags) {\r\n        const container = document.getElementById('sidebar-tags');\r\n        container.innerHTML = '';\r\n        tags.forEach(tag => {\r\n            const name = tag.name.replace(\/^#\/, '');\r\n            container.insertAdjacentHTML('beforeend', `<a href=\"\/?tag=${tag.id}\" class=\"tag-item\">#${name}<\/a>`);\r\n        });\r\n    }\r\n\r\n    async function filterByCategory(categoryId) {\r\n        \/\/ Update Sidebar Active State\r\n        document.querySelectorAll('.category-item').forEach(btn => btn.classList.remove('active'));\r\n        const selector = categoryId ? `[data-category=\"${categoryId}\"]` : `[data-category=\"all\"]`;\r\n        const activeBtn = document.querySelector('#sidebar-categories ' + selector);\r\n        if (activeBtn) activeBtn.classList.add('active');\r\n\r\n        const feedContainer = document.getElementById('blog-feed');\r\n        feedContainer.innerHTML = '<div class=\"skeleton-shimmer\" style=\"height:200px;border-radius:16px;\"><\/div>';\r\n\r\n        try {\r\n            const isEnglish = document.documentElement.lang.startsWith('en') || window.location.href.includes('\/en\/');\r\n            const langParam = isEnglish ? '&lang=en' : '';\r\n            const url = categoryId ? '\/wp-json\/wp\/v2\/posts?_embed&per_page=10&categories=' + categoryId + langParam : '\/wp-json\/wp\/v2\/posts?_embed&per_page=10' + langParam;\r\n            const res = await fetch(url);\r\n            if (!res.ok) throw new Error('API Error');\r\n            const posts = await res.json();\r\n            feedContainer.innerHTML = '';\r\n            if (posts.length > 0) renderFeed(posts);\r\n            else feedContainer.innerHTML = '<p style=\"text-align:center;color:#71717a;padding:32px;\">Keine Artikel in dieser Kategorie gefunden.<\/p>';\r\n        } catch (error) {\r\n            console.error(error);\r\n            feedContainer.innerHTML = '<p style=\"text-align:center;color:#dc2626;padding:32px;\">Fehler beim Laden der Artikel.<\/p>';\r\n        }\r\n    }\r\n\r\n    async function fetchPosts(page) {\r\n        if (isFetching) return;\r\n        isFetching = true;\r\n        const loadBtn = document.getElementById('load-more-btn');\r\n        const feedContainer = document.getElementById('blog-feed');\r\n        const heroContainer = document.getElementById('hero-container');\r\n        const sidebarTrends = document.getElementById('sidebar-trends');\r\n        const sidebarSocial = document.getElementById('sidebar-social');\r\n\r\n        try {\r\n            const isEnglish = document.documentElement.lang.startsWith('en') || window.location.href.includes('\/en\/');\r\n            const langParam = isEnglish ? '&lang=en' : '';\r\n            const res = await fetch('\/wp-json\/wp\/v2\/posts?_embed&per_page=' + perPage + '&page=' + page + langParam);\r\n            if (!res.ok) { if (res.status === 400 && page > 1) { loadBtn.style.display = 'none'; return; } throw new Error('API Error'); }\r\n            let posts = await res.json();\r\n\r\n            if (page === 1) {\r\n                heroContainer.innerHTML = '';\r\n                feedContainer.innerHTML = '';\r\n                sidebarTrends.innerHTML = '';\r\n                if (sidebarSocial) sidebarSocial.innerHTML = '';\r\n\r\n                if (posts.length > 0) { sliderPosts = posts.slice(0, 5); renderHeroSlider(sliderPosts); startAutoSlide(); }\r\n                const feedPosts = posts.slice(5, 10);\r\n                if (feedPosts.length > 0) renderFeed(feedPosts);\r\n                const trendPosts = posts.slice(10, 13);\r\n                if (trendPosts.length > 0) renderSidebarTrends(trendPosts);\r\n                else if (posts.length > 0) renderSidebarTrends(posts.slice(0, 3));\r\n                const socialPosts = posts.slice(13, 18);\r\n                if (sidebarSocial) { if (socialPosts.length > 0) renderSidebarSocial(socialPosts); else if (posts.length > 0) renderSidebarSocial(posts.slice(0, 5)); }\r\n                if (posts.length === perPage) loadBtn.classList.add('visible');\r\n                else loadBtn.classList.remove('visible');\r\n            } else {\r\n                renderFeed(posts);\r\n                if (posts.length < perPage) loadBtn.style.display = 'none';\r\n            }\r\n            currentPage = page;\r\n        } catch (error) {\r\n            console.error(error);\r\n            if (page === 1) heroContainer.innerHTML = '<div style=\"padding:16px;color:#dc2626;\">Fehler beim Laden.<\/div>';\r\n        } finally {\r\n            isFetching = false;\r\n            if (typeof lucide !== 'undefined') lucide.createIcons();\r\n        }\r\n    }\r\n\r\n    function loadMore() { fetchPosts(currentPage + 1); }\r\n\r\n    function renderSidebarTrends(posts) {\r\n        const container = document.getElementById('sidebar-trends');\r\n        posts.forEach((post, index) => {\r\n            const imgUrl = getImgUrl(post, 'thumbnail');\r\n            container.insertAdjacentHTML('beforeend', '<a href=\"' + post.link + '\" class=\"trending-item\"><div class=\"trending-item-image-wrapper\"><span class=\"trending-item-number\">' + (index + 1) + '<\/span><img decoding=\"async\" src=\"' + imgUrl + '\" class=\"trending-item-image\"><\/div><div class=\"trending-item-content\"><h4 class=\"trending-item-title line-clamp-2\">' + post.title.rendered + '<\/h4><p class=\"trending-item-date\">' + formatDate(post.date) + '<\/p><\/div><\/a>');\r\n        });\r\n    }\r\n\r\n    function renderSidebarSocial(posts) {\r\n        const container = document.getElementById('sidebar-social');\r\n        posts.forEach(post => {\r\n            container.insertAdjacentHTML('beforeend', '<a href=\"' + post.link + '\" class=\"recent-post-item\"><i data-lucide=\"chevron-right\"><\/i><span class=\"line-clamp-1\">' + post.title.rendered + '<\/span><\/a>');\r\n        });\r\n    }\r\n\r\n    function renderHeroSlider(posts) {\r\n        const container = document.getElementById('hero-container');\r\n        container.innerHTML = '<div class=\"hero-slider\"><img decoding=\"async\" id=\"hero-img\" src=\"\" class=\"hero-img\"><div class=\"hero-overlay\"><\/div><div class=\"hero-content\"><div class=\"hero-badges\"><span class=\"hero-badge-featured\">Featured<\/span><span class=\"hero-badge-date\" id=\"hero-date\">...<\/span><\/div><a id=\"hero-link\" href=\"#\"><span id=\"hero-title\" class=\"hero-title\">...<\/span><\/a><p id=\"hero-excerpt\" class=\"hero-excerpt line-clamp-2\">...<\/p><\/div><div class=\"hero-nav\"><button onclick=\"prevSlide(event)\" class=\"hero-nav-btn prev\"><i data-lucide=\"chevron-left\"><\/i><\/button><button onclick=\"nextSlide(event)\" class=\"hero-nav-btn next\"><i data-lucide=\"chevron-right\"><\/i><\/button><\/div><div class=\"hero-indicators\" id=\"slide-indicators\"><\/div><\/div><div class=\"hero-thumbnails\" id=\"hero-thumbnails\"><\/div>';\r\n        updateSlideView();\r\n        renderThumbnails();\r\n        renderSlideIndicators();\r\n        if (typeof lucide !== 'undefined') lucide.createIcons();\r\n    }\r\n\r\n    function renderSlideIndicators() {\r\n        const container = document.getElementById('slide-indicators');\r\n        if (!container) return;\r\n        container.innerHTML = '';\r\n        sliderPosts.forEach((_, idx) => {\r\n            const activeClass = idx === currentSlideIndex ? 'active' : '';\r\n            container.insertAdjacentHTML('beforeend', '<button onclick=\"goToSlide(' + idx + ')\" class=\"hero-indicator ' + activeClass + '\"><\/button>');\r\n        });\r\n    }\r\n\r\n    function renderThumbnails() {\r\n        const thumbsContainer = document.getElementById('hero-thumbnails');\r\n        if (!thumbsContainer) return;\r\n        thumbsContainer.innerHTML = '';\r\n        sliderPosts.forEach((post, idx) => {\r\n            const activeClass = idx === currentSlideIndex ? 'active' : '';\r\n            const imgUrl = getImgUrl(post, 'thumbnail');\r\n            thumbsContainer.insertAdjacentHTML('beforeend', '<div onclick=\"goToSlide(' + idx + ')\" class=\"hero-thumb ' + activeClass + '\"><img decoding=\"async\" src=\"' + imgUrl + '\"><\/div>');\r\n        });\r\n    }\r\n\r\n    function updateSlideView() {\r\n        if (sliderPosts.length === 0) return;\r\n        const post = sliderPosts[currentSlideIndex];\r\n        document.getElementById('hero-img').src = getImgUrl(post, 'full');\r\n        document.getElementById('hero-title').innerHTML = post.title.rendered;\r\n        document.getElementById('hero-date').innerText = formatDate(post.date);\r\n        document.getElementById('hero-link').href = post.link;\r\n        const excerptEl = document.getElementById('hero-excerpt');\r\n        if (excerptEl) excerptEl.innerText = stripHtml(post.excerpt.rendered).substring(0, 150) + '...';\r\n        renderThumbnails();\r\n        renderSlideIndicators();\r\n    }\r\n\r\n    function nextSlide(e) { if (e) { e.preventDefault(); e.stopPropagation(); } currentSlideIndex = (currentSlideIndex + 1) % sliderPosts.length; updateSlideView(); resetAutoSlide(); }\r\n    function prevSlide(e) { if (e) { e.preventDefault(); e.stopPropagation(); } currentSlideIndex = (currentSlideIndex - 1 + sliderPosts.length) % sliderPosts.length; updateSlideView(); resetAutoSlide(); }\r\n    function goToSlide(idx) { currentSlideIndex = idx; updateSlideView(); resetAutoSlide(); }\r\n    function startAutoSlide() { if (sliderInterval) clearInterval(sliderInterval); sliderInterval = setInterval(() => nextSlide(), 5000); }\r\n    function resetAutoSlide() { clearInterval(sliderInterval); startAutoSlide(); }\r\n\r\n    function renderFeed(posts) {\r\n        const container = document.getElementById('blog-feed');\r\n        const isEnglish = document.documentElement.lang.startsWith('en') || window.location.href.includes('\/en\/');\r\n\r\n        const txtReadTime = isEnglish ? 'min read' : 'min Lesezeit';\r\n        const txtReadMore = isEnglish ? 'Read More' : 'Weiterlesen';\r\n        const txtGeneral = isEnglish ? 'General' : 'Allgemein';\r\n\r\n        posts.forEach(post => {\r\n            const imgUrl = getImgUrl(post, 'medium');\r\n            const date = formatDate(post.date);\r\n            const excerpt = stripHtml(post.excerpt.rendered).substring(0, 120) + '...';\r\n            const readTime = Math.ceil(stripHtml(post.content?.rendered || '').split(' ').length \/ 200) || 3;\r\n            \/\/ Get category name from embedded terms\r\n            let categoryName = txtGeneral;\r\n            if (post._embedded && post._embedded['wp:term'] && post._embedded['wp:term'][0] && post._embedded['wp:term'][0].length > 0) {\r\n                categoryName = post._embedded['wp:term'][0][0].name;\r\n            }\r\n            container.insertAdjacentHTML('beforeend', '<article class=\"article-card\" onclick=\"window.location.href=\\'' + post.link + '\\'\"><div class=\"article-image-wrapper\"><img decoding=\"async\" src=\"' + imgUrl + '\" class=\"article-image\"><span class=\"article-category-badge\">' + categoryName + '<\/span><\/div><div class=\"article-content\"><div class=\"article-meta\"><span class=\"article-meta-item\"><i data-lucide=\"calendar\"><\/i>' + date + '<\/span><span class=\"article-meta-dot\"><\/span><span class=\"article-meta-item\"><i data-lucide=\"clock\"><\/i>' + readTime + ' ' + txtReadTime + '<\/span><\/div><h3 class=\"article-title line-clamp-2\">' + post.title.rendered + '<\/h3><p class=\"article-excerpt line-clamp-2\">' + excerpt + '<\/p><div class=\"article-footer\"><div class=\"article-author\"><img decoding=\"async\" src=\"https:\/\/darksn.de\/wp-content\/uploads\/2024\/11\/logo-darksn-beyaz-e1725367666713.png\" class=\"article-author-avatar\" style=\"object-fit:contain;padding:4px;\"><span class=\"article-author-name\">DARKSN TEAM<\/span><\/div><span class=\"article-read-more\">' + txtReadMore + ' <i data-lucide=\"arrow-right\"><\/i><\/span><\/div><\/div><\/article>');\r\n        });\r\n        if (typeof lucide !== 'undefined') lucide.createIcons();\r\n    }\r\n\r\n    function getImgUrl(post, size) {\r\n        if (post._embedded && post._embedded['wp:featuredmedia'] && post._embedded['wp:featuredmedia'][0]) {\r\n            const media = post._embedded['wp:featuredmedia'][0];\r\n            if (size === 'thumbnail' && media.media_details?.sizes?.thumbnail) return media.media_details.sizes.thumbnail.source_url;\r\n            if (size === 'medium' && media.media_details?.sizes?.medium) return media.media_details.sizes.medium.source_url;\r\n            return media.source_url;\r\n        }\r\n        return 'https:\/\/images.unsplash.com\/photo-1518770660439-4636190af475?auto=format&fit=crop&w=1000';\r\n    }\r\n\r\n    function formatDate(str) { return new Date(str).toLocaleDateString('de-DE', { day: 'numeric', month: 'long', year: 'numeric' }); }\r\n    function stripHtml(html) { let tmp = document.createElement(\"DIV\"); tmp.innerHTML = html; return tmp.textContent || tmp.innerText || \"\"; }\r\n<\/script>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>LIVE Aktuelle Nachrichten Mehr Artikel laden Trending Meistgelesen diese Woche Kategorien Tags Neueste Beitr\u00e4ge Aktuelle Updates<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"coauthors":[35],"class_list":["post-27901","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/darksn.de\/de\/wp-json\/wp\/v2\/pages\/27901","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/darksn.de\/de\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/darksn.de\/de\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/darksn.de\/de\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/darksn.de\/de\/wp-json\/wp\/v2\/comments?post=27901"}],"version-history":[{"count":100,"href":"https:\/\/darksn.de\/de\/wp-json\/wp\/v2\/pages\/27901\/revisions"}],"predecessor-version":[{"id":33452,"href":"https:\/\/darksn.de\/de\/wp-json\/wp\/v2\/pages\/27901\/revisions\/33452"}],"wp:attachment":[{"href":"https:\/\/darksn.de\/de\/wp-json\/wp\/v2\/media?parent=27901"}],"wp:term":[{"taxonomy":"author","embeddable":true,"href":"https:\/\/darksn.de\/de\/wp-json\/wp\/v2\/coauthors?post=27901"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}