/* ============================================================
   0. THEME + FONT VARIABLES
============================================================ */
:root {
    --bg: #ffffff;
    --bg-alt: #f5f5f5;
    --text: #000000;
    --text-muted: #444;
    --card-bg: #ffffff;
    --nav-bg: #212529;
    --font-size: 1rem;
}

html[data-theme="dark"] {
    --bg: #121212;
    --bg-alt: #1a1a1a;
    --text: #e5e5e5;
    --text-muted: #bbbbbb;
    --card-bg: #1c1c1c;
    --nav-bg: #000000;
}

html[data-font="large"] { --font-size: 1.25rem; }
html[data-font="xlarge"] { --font-size: 1.4rem; }

/* ============================================================
   1. GLOBAL APPLY
============================================================ */
body {
    background: var(--bg) !important;
    color: var(--text) !important;
    font-size: var(--font-size) !important;
    padding-bottom: 100px; /* Platz für Footer-Player */
}

/* Native Datepicker-Icons entfernen */
.custom-date::-webkit-calendar-picker-indicator {
    opacity: 0;
    cursor: pointer;
}

/* ============================================================
   2. MODULE DEFAULTS (HELL-MODUS)
============================================================ */
.card,
.sidebar-box,
.module-box,
.post-box,
.teaser-box,
.category-box,
.archive-box,
.footer-player,
#sidebar_right,
#mobile-menu,
.list-group-item {
    background-color: var(--card-bg);
    color: var(--text);
}

/* ============================================================
   3. DARK MODE – MODULE / BOXES
============================================================ */
html[data-theme="dark"] .card,
html[data-theme="dark"] .sidebar-box,
html[data-theme="dark"] .module-box,
html[data-theme="dark"] .post-box,
html[data-theme="dark"] .teaser-box,
html[data-theme="dark"] .category-box,
html[data-theme="dark"] .archive-box,
html[data-theme="dark"] .footer-player,
html[data-theme="dark"] #sidebar_right,
html[data-theme="dark"] #mobile-menu,
html[data-theme="dark"] .list-group-item {
    background-color: transparent !important;
    color: var(--text) !important;
}

html[data-theme="dark"] .card *,
html[data-theme="dark"] .sidebar-box *,
html[data-theme="dark"] .module-box *,
html[data-theme="dark"] .post-box *,
html[data-theme="dark"] .teaser-box *,
html[data-theme="dark"] .category-box *,
html[data-theme="dark"] .archive-box *,
html[data-theme="dark"] .footer-player *,
html[data-theme="dark"] #sidebar_right *,
html[data-theme="dark"] #mobile-menu *,
html[data-theme="dark"] .list-group-item * {
    color: var(--text) !important;
}

/* ============================================================
   4. NAVIGATION (HELL + DUNKEL)
============================================================ */
.navbar,
.dropdown-menu {
    background-color: var(--nav-bg) !important;
    color: var(--text) !important;
}

html[data-theme="dark"] .navbar .nav-link,
html[data-theme="dark"] .dropdown-item {
    color: var(--text) !important;
}

html[data-theme="dark"] .navbar .nav-link:hover {
    color: var(--text-muted) !important;
}

html[data-theme="light"] .navbar .nav-link,
html[data-theme="light"] .dropdown-item {
    color: #ffffff !important;
}

html[data-theme="light"] .navbar .nav-link:hover {
    color: #f1f1f1 !important;
}

/* ============================================================
   5. LINKS (HELL + DUNKEL)
============================================================ */
a { color: var(--text); }

html[data-theme="dark"] .card a,
html[data-theme="dark"] .sidebar-box a,
html[data-theme="dark"] .module-box a,
html[data-theme="dark"] .post-box a,
html[data-theme="dark"] .teaser-box a,
html[data-theme="dark"] .category-box a,
html[data-theme="dark"] .archive-box a {
    color: var(--text) !important;
}

html[data-theme="dark"] a:hover {
    color: var(--text-muted) !important;
}

/* ============================================================
   6. MUTED TEXT
============================================================ */
.text-muted,
small,
.meta,
.date {
    color: var(--text-muted) !important;
}

/* ============================================================
   7. BUTTONS
============================================================ */
.btn-outline-light {
    border-color: var(--text) !important;
    color: var(--text) !important;
}

.btn-outline-light:hover {
    background-color: #ffffff22;
    color: var(--text) !important;
}

/* ============================================================
   8. DEINE BESTEHENDEN STYLES
============================================================ */
body.editorial-layout {
    background-color: var(--bg-alt) !important;
    font-family: 'Segoe UI', sans-serif;
    color: var(--text) !important;
    margin: 0;
    padding: 0;
}

.sub-link {
    position: relative;
    cursor: pointer;
    color: var(--text) !important;
    font-family: Arial, sans-serif;
    font-size: 0.9rem;
    font-weight: bold;
    text-decoration: none !important;
    margin: 0 10px;
    display: block;
}

.sub-link:hover {
    color: var(--text-muted) !important;
    text-decoration: underline;
}

.link-register {
    color: var(--text) !important;
    text-decoration: none;
}

.link-register:hover {
    text-decoration: underline;
}

/* ============================================================
   9. COOKIE – DARK MODE (KORRIGIERT)
============================================================ */
html[data-theme="dark"] #cookie-banner {
    background: #1a1a1a !important;
    color: var(--text) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.65) !important;
}

html[data-theme="dark"] #cookie-banner .cookie-text {
    color: var(--text-muted) !important;
}

html[data-theme="dark"] .cookie-modal-backdrop {
    background: rgba(0,0,0,0.65) !important;
    backdrop-filter: blur(4px);
}

html[data-theme="dark"] .cookie-modal-dialog {
    background: #1e1e1e !important;
    color: var(--text) !important;
    border: 1px solid #333 !important;
}

html[data-theme="dark"] .cookie-category {
    border-bottom: 1px solid #444 !important;
}

html[data-theme="dark"] .cookie-category p {
    color: var(--text-muted) !important;
}

/* Buttons */
html[data-theme="dark"] #cookie-banner button,
html[data-theme="dark"] #cookie-modal button,
html[data-theme="dark"] .embed-placeholder button,
html[data-theme="dark"] .cookie-revoke button {
    background: #333 !important;
    color: #fff !important;
    border-color: #555 !important;
}

html[data-theme="dark"] #cookie-banner button:hover,
html[data-theme="dark"] #cookie-modal button:hover,
html[data-theme="dark"] .embed-placeholder button:hover,
html[data-theme="dark"] .cookie-revoke button:hover {
    background: #444 !important;
    border-color: #666 !important;
}

/* ============================================================
   EMBED PLACEHOLDER
============================================================ */
html[data-theme="dark"] .embed-placeholder {
    background: #222 !important;
    border-color: #444 !important;
    color: var(--text) !important;
}

/* ============================================================
   BUTTONS: ThemeToggle + FontToggle
============================================================ */
html[data-theme="light"] #themeToggle,
html[data-theme="light"] #fontToggle {
    background-color: #0d6efd !important;
    color: #ffffff !important;
    border-color: #0d6efd !important;
}

html[data-theme="dark"] #themeToggle,
html[data-theme="dark"] #fontToggle {
    background-color: transparent !important;
    color: #ffffff !important;
    border-color: #ffffff !important;
}


/* ============================================================
   Dark Mode – Radio Events Global
============================================================ */

html[data-theme="dark"] .event-item {
    background: var(--card-bg);
    border-color: var(--border);
    box-shadow: none;
}

html[data-theme="dark"] .event-title_event,
html[data-theme="dark"] .event-teaser,
html[data-theme="dark"] .event-meta {
    color: var(--text);
}

html[data-theme="dark"] .event-link {
    color: var(--primary);
}

html[data-theme="dark"] .event-button {
    background: var(--button-bg);
    border-color: var(--button-border);
    color: var(--button-text);
}

html[data-theme="dark"] .event-button:hover {
    background: var(--button-bg-hover);
    border-color: var(--button-border-hover);
    color: var(--button-text-hover);
}


/* ============================================================
   Dark Mode – Tagcloud
============================================================ */

html[data-theme="dark"] .tagcloud-item {
    background: var(--card-bg);
    border-color: var(--border);
    color: var(--text);
}

html[data-theme="dark"] .tagcloud-item:hover {
    background: var(--primary);
    color: #fff;
}

html[data-theme="dark"] .tagcloud-count {
    background: var(--primary);
    color: #fff;
}


/* ============================================================
   Dark Mode – Archiv Pagination
============================================================ */

html[data-theme="dark"] .archive-pagination-wrapper {
    background: var(--card-bg);
    border-color: var(--border);
    box-shadow: none;
}

html[data-theme="dark"] .archive-pagination-wrapper a {
    color: var(--text);
}


/* ============================================================
   Radio Detail – History Filter (Dark Mode)
============================================================ */

html[data-theme="dark"] .history-filter .filter-input {
    background: var(--card-bg) !important;
    border: 1px solid var(--border) !important;
    border-radius: .5rem !important;
}

html[data-theme="dark"] .history-filter .filter-input:focus-within {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px rgba(0, 123, 255, .35) !important;
}

html[data-theme="dark"] .history-filter .input-group-text {
    background: var(--bg-alt) !important;
    border: 1px solid var(--border) !important;
    color: var(--text) !important;
}

html[data-theme="dark"] .history-filter .input-group-text i {
    color: var(--text-muted) !important;
}

html[data-theme="dark"] .history-filter .form-control,
html[data-theme="dark"] .history-filter .form-select {
    background: var(--card-bg) !important;
    border: 1px solid var(--border) !important;
    color: var(--text) !important;
}

html[data-theme="dark"] .history-filter .form-select {
    background-image: none !important;
}

html[data-theme="dark"] .history-filter .form-control::placeholder {
    color: var(--text-muted) !important;
}

html[data-theme="dark"] .history-filter .form-label {
    color: var(--text-muted) !important;
}


/* ============================================================
   Radio Detail – Logo Card (Dark Mode)
============================================================ */

html[data-theme="dark"] .card .ratio.bg-light {
    background: var(--card-bg) !important;
    border-color: var(--border) !important;
}

html[data-theme="dark"] .card .ratio.bg-light .text-muted {
    color: var(--text-muted) !important;
}

html[data-theme="dark"] .card.shadow-sm {
    background: var(--card-bg) !important;
    border-color: var(--border) !important;
}


/* ============================================================
   Radio Detail – Station Background (Dark Mode)
   Hintergrundbild bleibt erhalten – wird nur abgedunkelt
============================================================ */

html[data-theme="dark"] #station-bg-overlay {
    /* background: rgba(0, 0, 0, 0.55) !important; */
    backdrop-filter: blur(12px) brightness(0.90) saturate(1.4);
    pointer-events: none !important;
}
/* ============================================================
   Radio Detail – Overview Tab (Dark Mode)
============================================================ */

html[data-theme="dark"] .card {
    background: var(--card-bg) !important;
    border-color: var(--border) !important;
}

html[data-theme="dark"] .card .bg-light,
html[data-theme="dark"] .card .bg-white {
    background: var(--card-bg) !important;
    border-color: var(--border) !important;
    color: var(--text) !important;
}

html[data-theme="dark"] .card p,
html[data-theme="dark"] .card strong,
html[data-theme="dark"] .card a {
    color: var(--text) !important;
}

html[data-theme="dark"] .card .text-muted {
    color: var(--text-muted) !important;
}

html[data-theme="dark"] .card .text-success {
    color: #4cd964 !important;
}

html[data-theme="dark"] .card .text-danger {
    color: #ff6b6b !important;
}

html[data-theme="dark"] .card i.text-primary {
    color: var(--primary) !important;
}

html[data-theme="dark"] .card hr {
    border-color: var(--border) !important;
    opacity: 0.4 !important;
}

html[data-theme="dark"] .badge.bg-secondary {
    background: #555 !important;
    color: #fff !important;
}

html[data-theme="dark"] .badge.bg-warning {
    background: #b38b00 !important;
    color: #000 !important;
}

html[data-theme="dark"] .badge.bg-danger {
    background: #a33 !important;
    color: #fff !important;
}

html[data-theme="dark"] .badge.bg-success {
    background: #2d8a4d !important;
    color: #fff !important;
}

html[data-theme="dark"] .card .btn-outline-primary {
    border-color: var(--primary) !important;
    color: var(--primary) !important;
}

html[data-theme="dark"] .card .btn-outline-primary:hover {
    background: var(--primary) !important;
    color: #fff !important;
}

html[data-theme="dark"] .btn-detail {
    background: var(--primary) !important;
    color: #fff !important;
    border-color: var(--primary) !important;
}

html[data-theme="dark"] .btn-detail:hover {
    background: var(--primary-hover) !important;
    border-color: var(--primary-hover) !important;
}

html[data-theme="dark"] .card .border {
    border-color: var(--border) !important;
}

html[data-theme="dark"] .card p,
html[data-theme="dark"] .card span,
html[data-theme="dark"] .card div {
    background: transparent !important;
    color: var(--text) !important;
}


/* ============================================================
   Radio Detail – Team Modal (Dark Mode)
============================================================ */

html[data-theme="dark"] .modal-content {
    background: var(--card-bg) !important;
    border-color: var(--border) !important;
    color: var(--text) !important;
}

html[data-theme="dark"] .modal-header {
    border-bottom-color: var(--border) !important;
}

html[data-theme="dark"] .modal-header .btn-close {
    filter: invert(1) grayscale(100%) !important;
}

html[data-theme="dark"] .modal-body {
    color: var(--text) !important;
}

html[data-theme="dark"] .modal-footer {
    border-top-color: var(--border) !important;
}

html[data-theme="dark"] .modal-content a {
    color: var(--primary) !important;
}

html[data-theme="dark"] .modal-content a:hover {
    color: var(--primary-hover) !important;
}

html[data-theme="dark"] .modal-content .bg-secondary {
    background: #444 !important;
    color: #fff !important;
}

html[data-theme="dark"] .modal-backdrop.show {
    background-color: rgba(0, 0, 0, 0.75) !important;
}


/* ============================================================
   Frontend Komponenten – Globaler Dark Mode Override
============================================================ */

html[data-theme="dark"] .teaser-block,
html[data-theme="dark"] .post-item,
html[data-theme="dark"] .urgent-item,
html[data-theme="dark"] .sidebar-body,
html[data-theme="dark"] .premium-block-wrapper,
html[data-theme="dark"] .post-card,
html[data-theme="dark"] .event-card,
html[data-theme="dark"] .event-info-box,
html[data-theme="dark"] .radio-card,
html[data-theme="dark"] .radio-schedule,
html[data-theme="dark"] .author-card,
html[data-theme="dark"] .author-post-card,
html[data-theme="dark"] .legal-wrapper,
html[data-theme="dark"] .tagcloud-item {
    background: var(--card-bg) !important;
    border-color: var(--border) !important;
    color: var(--text) !important;
}
/* Teil 2 */
/* ============================================================
   10. TEXTE IN BOXEN (Dark Mode)
============================================================ */

html[data-theme="dark"] .post-item .post-text,
html[data-theme="dark"] .urgent-item h4,
html[data-theme="dark"] .urgent-item small,
html[data-theme="dark"] .post-teaser,
html[data-theme="dark"] .event-desc,
html[data-theme="dark"] .event-info-line,
html[data-theme="dark"] .event-description,
html[data-theme="dark"] .radio-song,
html[data-theme="dark"] .radio-artist,
html[data-theme="dark"] .legal-content,
html[data-theme="dark"] .tagcloud-item {
    color: var(--text) !important;
}

/* Subtile Texte */
html[data-theme="dark"] .post-item small,
html[data-theme="dark"] .urgent-item small,
html[data-theme="dark"] .radio-artist,
html[data-theme="dark"] .legal-content p,
html[data-theme="dark"] .legal-content li {
    color: var(--text-muted) !important;
}

/* Header / Titel */
html[data-theme="dark"] .sidebar-header,
html[data-theme="dark"] .premium-title,
html[data-theme="dark"] .event-title,
html[data-theme="dark"] .post-title,
html[data-theme="dark"] .radio-title-text {
    color: var(--text) !important;
}

/* ============================================================
   11. BUTTONS (Dark Mode)
============================================================ */

html[data-theme="dark"] .btn-detail {
    background: transparent !important;
    color: var(--primary) !important;
    border-color: var(--primary) !important;
}

html[data-theme="dark"] .btn-detail:hover {
    background: var(--primary) !important;
    color: #fff !important;
}

/* ============================================================
   12. TAGCLOUD (Dark Mode)
============================================================ */

html[data-theme="dark"] .tagcloud-item {
    background: transparent !important;
    border-color: var(--border) !important;
    color: var(--text) !important;
}

html[data-theme="dark"] .tagcloud-item:hover {
    background: var(--text) !important;
    color: var(--bg) !important;
}

/* ============================================================
   13. RADIO COVER WRAPPER
============================================================ */

html[data-theme="dark"] .cover-wrapper {
    background: transparent !important;
}

/* Light Mode – Sender Header */
html[data-theme="light"] .station-header-bar i,
html[data-theme="light"] .station-header-bar h1 {
    color: #000 !important;
}

/* ============================================================
   14. EVENT INFO BOX
============================================================ */

html[data-theme="dark"] .event-info-box {
    background: transparent !important;
    border-color: var(--border) !important;
}

/* ============================================================
   15. LEGAL PAGES
============================================================ */

html[data-theme="dark"] .legal-wrapper {
    background: transparent !important;
    border-color: var(--border) !important;
    color: var(--text) !important;
}

html[data-theme="dark"] .legal-header {
    border-bottom-color: var(--border) !important;
}

/* ============================================================
   16. CUSTOM POST CONTENT – GLOBAL RESET + DARK MODE
============================================================ */

.custom-post-wrapper {
    background: #fff;
    color: #000;
    padding: 1.5rem;
    border-radius: 10px;
    border: 1px solid #e5e5e5;
}

/* Inline-Styles neutralisieren */
.custom-post-wrapper * {
    background: transparent !important;
    color: inherit !important;
    border-color: inherit !important;
}

/* Standard-Texte */
.custom-post-wrapper p,
.custom-post-wrapper span,
.custom-post-wrapper li,
.custom-post-wrapper div {
    color: #222;
    line-height: 1.6;
}

/* Bilder */
.custom-post-wrapper img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}

/* Überschriften */
.custom-post-wrapper h1,
.custom-post-wrapper h2,
.custom-post-wrapper h3,
.custom-post-wrapper h4 {
    color: #111;
    margin-top: 1.5rem;
    margin-bottom: .75rem;
}

/* Links */
.custom-post-wrapper a {
    color: #0d6efd;
    text-decoration: none;
}

.custom-post-wrapper a:hover {
    text-decoration: underline;
}

/* Listen */
.custom-post-wrapper ul,
.custom-post-wrapper ol {
    padding-left: 1.4rem;
    margin-bottom: 1rem;
}

/* Dark Mode */
html[data-theme="dark"] .custom-post-wrapper {
    background: transparent !important;
    color: var(--text) !important;
    border-color: var(--border) !important;
}

html[data-theme="dark"] .custom-post-wrapper * {
    color: var(--text) !important;
}

html[data-theme="dark"] .custom-post-wrapper a {
    color: var(--primary) !important;
}

html[data-theme="dark"] .custom-post-wrapper a:hover {
    color: var(--primary-hover) !important;
}

html[data-theme="dark"] .custom-post-wrapper h1,
html[data-theme="dark"] .custom-post-wrapper h2,
html[data-theme="dark"] .custom-post-wrapper h3,
html[data-theme="dark"] .custom-post-wrapper h4 {
    color: var(--text) !important;
}

/* ============================================================
   17. POSTING.CSS – DARK MODE OVERRIDES
============================================================ */

html[data-theme="dark"] .posting-wrapper {
    background: transparent !important;
    border-color: var(--border) !important;
    color: var(--text) !important;
    box-shadow: none !important;
}

html[data-theme="dark"] .post-content-wrapper,
html[data-theme="dark"] .post-content-wrapper .post-body,
html[data-theme="dark"] .post-content-wrapper .post-body p,
html[data-theme="dark"] .post-content-wrapper .post-body span,
html[data-theme="dark"] .post-content-wrapper .post-body li {
    color: var(--text) !important;
}

/* Related Articles Wrapper */
html[data-theme="dark"] .related-articles-wrapper {
    background: transparent !important;
    border-color: var(--border) !important;
    box-shadow: none !important;
}

/* Related Header */
html[data-theme="dark"] .related-header {
    border-bottom-color: var(--border) !important;
}

html[data-theme="dark"] .related-header .related-title {
    color: var(--text) !important;
}

/* Related Cards */
html[data-theme="dark"] .related-card {
    background: transparent !important;
    box-shadow: none !important;
}

html[data-theme="dark"] .related-teaser {
    color: var(--text-muted) !important;
}

/* Blogger Content */
html[data-theme="dark"] .blogger-content p,
html[data-theme="dark"] .blogger-content span,
html[data-theme="dark"] .blogger-content div,
html[data-theme="dark"] .blogger-content li,
html[data-theme="dark"] .blogger-content h1,
html[data-theme="dark"] .blogger-content h2,
html[data-theme="dark"] .blogger-content h3,
html[data-theme="dark"] .blogger-content h4,
html[data-theme="dark"] .blogger-content h5,
html[data-theme="dark"] .blogger-content h6 {
    color: var(--text) !important;
}

/* Inline Backgrounds entfernen */
html[data-theme="dark"] .blogger-content [style*="background"],
html[data-theme="dark"] .blogger-content [style*="background-color"] {
    background: transparent !important;
}

/* ============================================================
   18. CATEGORY PAGE – DARK MODE
============================================================ */

html[data-theme="dark"] .category-bar-wrapper {
    background: #000000cf !important;
    border-bottom-color: var(--border) !important;
}

html[data-theme="dark"] .category-bar-wrapper::before {
    background: linear-gradient(to right, rgba(0,0,0,0.6), rgba(0,0,0,0)) !important;
}

html[data-theme="dark"] .category-bar-wrapper::after {
    background: linear-gradient(to left, rgba(0,0,0,0.6), rgba(0,0,0,0)) !important;
}

/* Kategorie-Chips */
html[data-theme="dark"] .category-chip {
    background: var(--bg-alt) !important;
    color: var(--text) !important;
    border-color: var(--border) !important;
}

html[data-theme="dark"] .category-chip:hover {
    background: var(--border) !important;
    color: var(--text) !important;
}

html[data-theme="dark"] .category-chip.active {
    background: var(--primary) !important;
    border-color: var(--primary) !important;
    color: #fff !important;
    box-shadow: 0 0 8px rgba(13,110,253,0.4) !important;
}

/* ============================================================
   19. CATEGORY HERO BLOCK – DARK MODE
============================================================ */

html[data-theme="dark"] .category-hero {
    background: linear-gradient(135deg, #1c1f26 0%, #16181d 100%) !important;
    border-color: var(--border) !important;
    box-shadow: none !important;
}

html[data-theme="dark"] .category-hero-title {
    color: var(--text) !important;
    border-left-color: var(--primary) !important;
}

html[data-theme="dark"] .category-hero-text {
    color: var(--text-muted) !important;
}

/* Teil 3 */
/* ============================================================
   13. LEGAL / CUSTOM POST – FINAL DARK MODE
============================================================ */

/* Light Mode */
.legal-wrapper {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 40px 45px;
    color: #212529;
}

/* Dark Mode */
html[data-theme="dark"] .legal-wrapper {
    background: transparent !important;
    border-color: var(--border) !important;
    color: var(--text) !important;
}

html[data-theme="dark"] .legal-wrapper p,
html[data-theme="dark"] .legal-wrapper li,
html[data-theme="dark"] .legal-wrapper span,
html[data-theme="dark"] .legal-wrapper div {
    color: var(--text) !important;
}

html[data-theme="dark"] .legal-wrapper h1,
html[data-theme="dark"] .legal-wrapper h2,
html[data-theme="dark"] .legal-wrapper h3,
html[data-theme="dark"] .legal-wrapper h4 {
    color: var(--text) !important;
}

html[data-theme="dark"] .legal-wrapper a {
    color: var(--primary) !important;
}

html[data-theme="dark"] .legal-wrapper a:hover {
    color: var(--primary-hover) !important;
}

/* Inline Reset */
html[data-theme="dark"] .legal-wrapper [style*="background"],
html[data-theme="dark"] .legal-wrapper [style*="background-color"] {
    background: transparent !important;
}

html[data-theme="dark"] .legal-wrapper [style*="color"] {
    color: var(--text) !important;
}

/* ============================================================
   14. GLOBAL DARK MODE FIX – MAIN CONTENT AREA
============================================================ */

html[data-theme="dark"] body {
    background: var(--bg) !important;
}

html[data-theme="dark"] #main-content,
html[data-theme="dark"] .container-fluid,
html[data-theme="dark"] .row {
    background: transparent !important;
}

/* ============================================================
   15. Custom Post Content – Dark Mode Fix
============================================================ */

html[data-theme="dark"] .legal-wrapper .post-body,
html[data-theme="dark"] .legal-wrapper .post-body * {
    color: var(--text) !important;
    background: transparent !important;
    border-color: var(--border) !important;
}

/* ============================================================
   16. HARD INLINE RESET FOR CUSTOM POSTS (Edge + Chrome)
============================================================ */

html[data-theme="dark"] .legal-wrapper * {
    background: transparent !important;
    background-color: transparent !important;
    color: var(--text) !important;
    border-color: var(--border) !important;
}

/* ============================================================
   17. Bewerbungs-Overlay – Systemkonform & Dark-Mode-fähig
============================================================ */

.apply-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.70);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 99999;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

.apply-popup {
    background: #fff;
    padding: 35px;
    border-radius: 12px;
    width: 100%;
    max-width: 650px;
    position: relative;
    animation: fadeIn 0.25s ease-out;
    box-shadow: 0 6px 20px rgba(0,0,0,0.15);
}

.apply-close {
    position: absolute;
    top: 12px;
    right: 12px;
    background: transparent;
    border: none;
    font-size: 32px;
    cursor: pointer;
    line-height: 1;
    color: #333;
}

/* Dark Mode */
html[data-theme="dark"] .apply-popup {
    background: rgba(22,22,22,0.92) !important;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(255,255,255,0.08) !important;
    box-shadow: 0 0 25px rgba(0,0,0,0.6);
    color: var(--text) !important;
}

html[data-theme="dark"] .apply-popup label,
html[data-theme="dark"] .apply-close {
    color: var(--text) !important;
}

/* Animation */
@keyframes fadeIn {
    from { opacity: 0; transform: scale(0.95); }
    to   { opacity: 1; transform: scale(1); }
}

/* ============================================================
   18. Wunschbox-Overlay – Hell/Dunkel Modus
============================================================ */

.wishbox-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.70);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 99999;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

.wishbox-popup {
    background: #fff;
    padding: 0;
    border-radius: 12px;
    width: 100%;
    max-width: 750px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.15);
    animation: fadeIn 0.25s ease-out;
    overflow: hidden;
}

.wishbox-header {
    background: #f5f5f5;
    padding: 20px 25px;
    border-bottom: 1px solid #ddd;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.wishbox-header h2 {
    margin: 0;
    font-size: 1.4rem;
    font-weight: 600;
}

.wishbox-close {
    background: transparent;
    border: none;
    font-size: 32px;
    cursor: pointer;
    line-height: 1;
    color: #333;
}

.wishbox-body {
    padding: 25px;
    max-height: calc(90vh - 160px);
    overflow-y: auto;
}

.wishbox-body::-webkit-scrollbar {
    width: 8px;
}

.wishbox-body::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.2);
    border-radius: 4px;
}

html[data-theme="dark"] .wishbox-body::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.15);
}

.wishbox-footer {
    padding: 15px 25px;
    background: #f5f5f5;
    border-top: 1px solid #ddd;
    text-align: right;
}

/* Dark Mode */
html[data-theme="dark"] .wishbox-popup {
    background: rgba(22,22,22,0.92) !important;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(255,255,255,0.08);
    box-shadow: 0 0 25px rgba(0,0,0,0.6);
}

html[data-theme="dark"] .wishbox-header,
html[data-theme="dark"] .wishbox-footer {
    background: rgba(30,30,30,0.85) !important;
    border-color: rgba(255,255,255,0.08) !important;
}

html[data-theme="dark"] .wishbox-header h2,
html[data-theme="dark"] .wishbox-body label,
html[data-theme="dark"] .wishbox-footer small,
html[data-theme="dark"] .wishbox-close {
    color: var(--text) !important;
}

html[data-theme="dark"] .wishbox-body input,
html[data-theme="dark"] .wishbox-body textarea {
    background: var(--bg-alt) !important;
    color: var(--text) !important;
    border: 1px solid var(--border) !important;
}

/* ============================================================
   19. RSS MODAL – DARK MODE
============================================================ */

html[data-theme="dark"] .rss-modal {
    background: rgba(0,0,0,0.75) !important;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

html[data-theme="dark"] .rss-modal-content {
    background: rgba(25,25,25,0.92) !important;
    border: 1px solid rgba(255,255,255,0.08);
    color: var(--text) !important;
    box-shadow: 0 0 25px rgba(0,0,0,0.6);
}

html[data-theme="dark"] .rss-modal-content h2,
html[data-theme="dark"] .rss-modal-content p {
    color: var(--text) !important;
}

html[data-theme="dark"] .rss-close {
    color: var(--text) !important;
}

html[data-theme="dark"] .rss-copy-box input {
    background: rgba(40,40,40,0.9) !important;
    border: 1px solid rgba(255,255,255,0.15) !important;
    color: var(--text) !important;
}

html[data-theme="dark"] .rss-copy-box button {
    background: #007bff !important;
    color: #fff !important;
}

/* Light Mode */
html[data-theme="light"] .rss-modal {
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

html[data-theme="light"] .rss-modal-content {
    background: rgba(255,255,255,0.95);
}