/* ============================================================
   MP Dark Mode — Toggle Button
   ============================================================ */

#mp-dm-toggle {
    position: fixed;
    bottom: 21px;
    right: 21px;
    z-index: 99999;
}

/* Mobile: Toggle dichter an der Adressleiste */
@media (max-width: 768px) {
    #mp-dm-toggle {
        bottom: calc(env(safe-area-inset-bottom, 0px) * 0.5 + 3px);
        right: 14px;
    }
}

.mp-dm-pill {
    position: relative;
    display: flex;
    align-items: center;
    width: 135px;
    height: 45px;
    border-radius: 23px;
    padding: 3px;
    box-sizing: border-box;
    overflow: hidden;

    /* Liquid Glass: starker Blur, fast kein Tint */
    background: rgba(255, 255, 255, 0.06);
    -webkit-backdrop-filter: blur(40px) saturate(220%) brightness(1.04);
    backdrop-filter: blur(40px) saturate(220%) brightness(1.04);

    /* Dünner Glasrand */
    border: 1px solid rgba(255, 255, 255, 0.45);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.70),
        inset 0 -1px 0 rgba(0, 0, 0, 0.04);
}

/* Specular Glare: heller Lichtreflex auf der oberen Hälfte */
.mp-dm-pill::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 52%;
    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.22) 0%,
        rgba(255, 255, 255, 0.00) 100%
    );
    border-radius: 22px 22px 50% 50%;
    pointer-events: none;
    z-index: 0;
}

.mp-dm-knob {
    position: absolute;
    top: 2px;
    left: 5px;
    width: 39px;
    height: 39px;
    border-radius: 50%;

    /* Glasscheibe: fast weiß, leicht durchsichtig */
    background: rgba(255, 255, 255, 0.88);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    backdrop-filter: blur(20px) saturate(160%);
    box-shadow:
        0 3px 12px rgba(0, 0, 0, 0.18),
        0 1px 4px rgba(0, 0, 0, 0.12),
        inset 0 1.5px 0 rgba(255, 255, 255, 1.0),
        inset 0 -1px 0 rgba(0, 0, 0, 0.06);

    transition: transform 0.30s cubic-bezier(0.34, 1.56, 0.64, 1);
    pointer-events: none;
    z-index: 1;
}

/* Knob-Position sofort via CSS – kein Sprung beim Seitenladen */
html[data-mp-mode="light"] .mp-dm-knob { transform: translateX(0px);  }
html[data-mp-mode="dark"]  .mp-dm-knob { transform: translateX(43px); }
html[data-mp-mode="auto"]  .mp-dm-knob { transform: translateX(86px); }

.mp-dm-btn {
    position: relative;
    z-index: 2;
    flex: 0 0 43px;
    width: 43px;
    height: 39px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    border-radius: 50%;
    color: #1c1c1e;
    transition: color 0.20s ease, opacity 0.20s ease;
    opacity: 0.55;
}

.mp-dm-btn:hover {
    opacity: 0.85;
}

.mp-dm-btn--active {
    opacity: 1;
    color: #1c1c1e;
}

.mp-dm-icon {
    width: 16px;
    height: 16px;
    display: block;
    flex-shrink: 0;
}

/* ============================================================
   MP Dark Mode — Dark theme: Liquid Glass dunkel
   ============================================================ */

html[data-mp-theme="dark"] .mp-dm-pill {
    background: rgba(28, 28, 30, 0.58);
    border: 1px solid rgba(255, 255, 255, 0.16);
    box-shadow:
        inset 0 1.5px 0 rgba(255, 255, 255, 0.18),
        inset 0 -1.5px 0 rgba(0, 0, 0, 0.55);
}

/* Glare im Dunkeln: dezenter */
html[data-mp-theme="dark"] .mp-dm-pill::before {
    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.13) 0%,
        rgba(255, 255, 255, 0.00) 100%
    );
}

html[data-mp-theme="dark"] .mp-dm-knob {
    background: rgba(62, 62, 66, 0.92);
    -webkit-backdrop-filter: blur(20px) saturate(120%);
    backdrop-filter: blur(20px) saturate(120%);
    box-shadow:
        0 3px 14px rgba(0, 0, 0, 0.55),
        0 1px 4px rgba(0, 0, 0, 0.35),
        inset 0 1.5px 0 rgba(255, 255, 255, 0.18),
        inset 0 -1px 0 rgba(0, 0, 0, 0.50);
}

html[data-mp-theme="dark"] .mp-dm-btn {
    color: #ebebf5;
}

html[data-mp-theme="dark"] .mp-dm-btn--active {
    color: #ffffff;
}


/* ============================================================
   MP Dark Mode — Page-wide dark styles
   ============================================================ */

html[data-mp-theme="dark"],
html[data-mp-theme="dark"] body {
    background-color: #000000 !important;
    color: #ffffff !important;
}

/* Main structural containers */
html[data-mp-theme="dark"] #page-container,
html[data-mp-theme="dark"] #et-main-area,
html[data-mp-theme="dark"] #main-content,
html[data-mp-theme="dark"] #content-area,
html[data-mp-theme="dark"] #left-area,
html[data-mp-theme="dark"] #right-area,
html[data-mp-theme="dark"] .container,
html[data-mp-theme="dark"] .et_pb_section,
html[data-mp-theme="dark"] .et_pb_row,
html[data-mp-theme="dark"] .et_pb_column {
    background-color: #000000 !important;
    color: #ffffff !important;
}

/* Header */
html[data-mp-theme="dark"] #main-header,
html[data-mp-theme="dark"] .logo_container,
html[data-mp-theme="dark"] .et_menu_container {
    background-color: #000000 !important;
    border-bottom-color: #222222 !important;
}

/* Header text – tagline */
html[data-mp-theme="dark"] #main-header *:not(img):not(svg) {
    color: #ffffff !important;
}

/* Nav */
html[data-mp-theme="dark"] #top-menu li a,
html[data-mp-theme="dark"] .et_mobile_nav_menu a,
html[data-mp-theme="dark"] nav a {
    color: #ffffff !important;
}

html[data-mp-theme="dark"] #top-menu,
html[data-mp-theme="dark"] .et_nav_text_color_light #top-menu li a {
    color: #ffffff !important;
}

/* ── Homepage article tiles ── */

html[data-mp-theme="dark"] .tile_wrapper,
html[data-mp-theme="dark"] .todayview-container,
html[data-mp-theme="dark"] .todayview_tile {
    background-color: #000000 !important;
}

html[data-mp-theme="dark"] .todayview_tile {
    box-shadow: 0 0 8px 1px rgba(255, 255, 255, 0.15) !important;
    -webkit-box-shadow: 0 0 8px 1px rgba(255, 255, 255, 0.15) !important;
}

html[data-mp-theme="dark"] .todayview_tile_textbackground {
    background-color: #1c1c1e !important;
}

html[data-mp-theme="dark"] .todayview_tile_title {
    color: #ffffff !important;
}

html[data-mp-theme="dark"] .todayview_tile_date,
html[data-mp-theme="dark"] .todayview_tile_category {
    color: #ebebf5 !important;
}

/* ── Single article page ── */

html[data-mp-theme="dark"] article.et_pb_post,
html[data-mp-theme="dark"] .et_post_meta_wrapper {
    background-color: #000000 !important;
    color: #ffffff !important;
}

html[data-mp-theme="dark"] h1.entry-title,
html[data-mp-theme="dark"] h2.entry-title,
html[data-mp-theme="dark"] h1.page-title,
html[data-mp-theme="dark"] .page-title,
html[data-mp-theme="dark"] .archive-title,
html[data-mp-theme="dark"] #left-area > h1,
html[data-mp-theme="dark"] #left-area > h2,
html[data-mp-theme="dark"] .et_pb_title_container h1,
html[data-mp-theme="dark"] .et_pb_title_container h2,
html[data-mp-theme="dark"] header.blog-title h2,
html[data-mp-theme="dark"] header.blog-title h1,
html[data-mp-theme="dark"] .blog-title h1,
html[data-mp-theme="dark"] .blog-title h2 {
    color: #ffffff !important;
}

html[data-mp-theme="dark"] .post-meta,
html[data-mp-theme="dark"] .post-meta * {
    color: #ababab !important;
}

html[data-mp-theme="dark"] .entry-content {
    color: #ffffff !important;
}

html[data-mp-theme="dark"] .entry-content p,
html[data-mp-theme="dark"] .entry-content li,
html[data-mp-theme="dark"] .entry-content h1,
html[data-mp-theme="dark"] .entry-content h2,
html[data-mp-theme="dark"] .entry-content h3,
html[data-mp-theme="dark"] .entry-content h4,
html[data-mp-theme="dark"] .entry-content h5,
html[data-mp-theme="dark"] .entry-content h6,
html[data-mp-theme="dark"] .entry-content span,
html[data-mp-theme="dark"] .entry-content blockquote,
html[data-mp-theme="dark"] .entry-content cite,
html[data-mp-theme="dark"] .entry-content figcaption,
html[data-mp-theme="dark"] .entry-content td,
html[data-mp-theme="dark"] .entry-content th {
    color: #ffffff !important;
}

/* Links inside articles: always Apple-Blue */
html[data-mp-theme="dark"] .entry-content a,
html[data-mp-theme="dark"] .entry-content a:visited,
html[data-mp-theme="dark"] .entry-content a:hover,
html[data-mp-theme="dark"] .entry-content a:active {
    color: #0a84ff !important;
    text-decoration-color: #0a84ff !important;
}

/* blockquote border */
html[data-mp-theme="dark"] .entry-content blockquote {
    border-left-color: #333333 !important;
}

/* ── Sidebar ── */

html[data-mp-theme="dark"] #sidebar,
html[data-mp-theme="dark"] .sidebar,
html[data-mp-theme="dark"] #right-sidebar,
html[data-mp-theme="dark"] .widget-area,
html[data-mp-theme="dark"] .widget {
    background-color: #000000 !important;
    color: #ffffff !important;
}

html[data-mp-theme="dark"] .widget-title,
html[data-mp-theme="dark"] .widgettitle,
html[data-mp-theme="dark"] .widget h3,
html[data-mp-theme="dark"] .widget h4 {
    color: #ffffff !important;
    border-bottom-color: #333333 !important;
}

html[data-mp-theme="dark"] .widget a,
html[data-mp-theme="dark"] .widget li a {
    color: #ebebf5 !important;
    background-color: transparent !important;
}

html[data-mp-theme="dark"] .widget li a:hover,
html[data-mp-theme="dark"] .widget li a:focus,
html[data-mp-theme="dark"] .et_pb_widget li a:hover,
html[data-mp-theme="dark"] .et_pb_widget li a:focus,
html[data-mp-theme="dark"] #sidebar li a:hover,
html[data-mp-theme="dark"] #sidebar li a:focus {
    color: #ffffff !important;
    background-color: transparent !important;
}

/* Divi setzt beim Hover teils Hintergrund auf das li selbst */
html[data-mp-theme="dark"] .widget li:hover,
html[data-mp-theme="dark"] .widget li:hover > a,
html[data-mp-theme="dark"] .et_pb_widget li:hover,
html[data-mp-theme="dark"] .et_pb_widget li:hover > a,
html[data-mp-theme="dark"] #sidebar li:hover,
html[data-mp-theme="dark"] #sidebar li:hover > a {
    background-color: transparent !important;
    color: #ffffff !important;
}

/* Aktiver / aktueller Menüpunkt – weiß statt schwarz */
html[data-mp-theme="dark"] .widget li.current-menu-item > a,
html[data-mp-theme="dark"] .widget li.current_page_item > a,
html[data-mp-theme="dark"] .widget li.current-cat > a,
html[data-mp-theme="dark"] .widget li.current-menu-ancestor > a,
html[data-mp-theme="dark"] .widget li.current-menu-parent > a,
html[data-mp-theme="dark"] .widget li.current_page_ancestor > a,
html[data-mp-theme="dark"] .widget .current-menu-item > a,
html[data-mp-theme="dark"] .widget .current_page_item > a,
html[data-mp-theme="dark"] .widget .current-cat > a {
    color: #ffffff !important;
    background-color: transparent !important;
    font-weight: 700 !important;
    text-decoration: none !important;
}

/* Divi setzt manchmal Hintergrundfarben auf li-Elemente */
html[data-mp-theme="dark"] .widget li.current-menu-item,
html[data-mp-theme="dark"] .widget li.current_page_item,
html[data-mp-theme="dark"] .widget li.current-cat {
    background-color: transparent !important;
}

/* ── Mehr-Empfehlungen / Sidebar promo tiles ── */

html[data-mp-theme="dark"] .tile_simple_info_table_gray,
html[data-mp-theme="dark"] [class*="tile_simple"],
html[data-mp-theme="dark"] [class*="todayview_sidebar"] {
    background-color: #1c1c1e !important;
    color: #ffffff !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    border-collapse: separate !important;
}

html[data-mp-theme="dark"] .tile_simple_info_table_gray td,
html[data-mp-theme="dark"] .tile_simple_info_table_title,
html[data-mp-theme="dark"] .tile_simple_info_table_td_title {
    color: #ffffff !important;
    background-color: #1c1c1e !important;
}

html[data-mp-theme="dark"] .tile_simple_info_table_arrow {
    border-color: #444444 !important;
    color: #ffffff !important;
}

/* Kaffeekassen-Icon: schwarz → weiß */
html[data-mp-theme="dark"] img[src*="kaffeekasse"] {
    filter: invert(1) !important;
}

/* ── Forms & inputs ── */

html[data-mp-theme="dark"] input:not(#mp-dm-toggle input),
html[data-mp-theme="dark"] textarea,
html[data-mp-theme="dark"] select {
    background-color: #1c1c1e !important;
    color: #ffffff !important;
    border-color: #444444 !important;
}

html[data-mp-theme="dark"] input::placeholder,
html[data-mp-theme="dark"] textarea::placeholder {
    color: #888888 !important;
}

html[data-mp-theme="dark"] button:not(#mp-dm-toggle button),
html[data-mp-theme="dark"] .et_pb_button,
html[data-mp-theme="dark"] input[type="submit"],
html[data-mp-theme="dark"] input[type="button"] {
    background-color: #1c1c1e !important;
    color: #ffffff !important;
    border-color: #444444 !important;
}

/* ── Footer ── */

html[data-mp-theme="dark"] #footer-bottom,
html[data-mp-theme="dark"] #main-footer,
html[data-mp-theme="dark"] .footer-widget,
html[data-mp-theme="dark"] .et_pb_footer_columns4 > *,
html[data-mp-theme="dark"] footer {
    background-color: #000000 !important;
    color: #ffffff !important;
    border-top-color: #222222 !important;
}

html[data-mp-theme="dark"] footer a,
html[data-mp-theme="dark"] #main-footer a,
html[data-mp-theme="dark"] #footer-bottom a {
    color: #ebebf5 !important;
}

/* ── Tables ── */

html[data-mp-theme="dark"] table,
html[data-mp-theme="dark"] th,
html[data-mp-theme="dark"] td {
    border-color: #333333 !important;
}

html[data-mp-theme="dark"] th {
    background-color: #111111 !important;
    color: #ffffff !important;
}

/* ── Divi-specific overrides ── */

html[data-mp-theme="dark"] .et_pb_text_inner,
html[data-mp-theme="dark"] .et_pb_module,
html[data-mp-theme="dark"] .et_pb_blurb_content {
    color: #ffffff !important;
    background-color: transparent !important;
}

/* ── AAWP (Amazon) Produkt-Boxen ── */

html[data-mp-theme="dark"] .aawp-product,
html[data-mp-theme="dark"] .aawp-product--horizontal {
    background-color: #c0c0c0 !important;
    border-color: #aaaaaa !important;
    border-radius: 8px !important;
    overflow: hidden !important;
}

html[data-mp-theme="dark"] .aawp {
    background-color: transparent !important;
}

html[data-mp-theme="dark"] .aawp-product__thumb,
html[data-mp-theme="dark"] .aawp-product__content,
html[data-mp-theme="dark"] .aawp__grid {
    background-color: #c0c0c0 !important;
    border-color: #aaaaaa !important;
}

html[data-mp-theme="dark"] .aawp-product__title,
html[data-mp-theme="dark"] .aawp-product__title a,
html[data-mp-theme="dark"] .aawp-product__description,
html[data-mp-theme="dark"] .aawp-product__price,
html[data-mp-theme="dark"] .aawp-product__price--current,
html[data-mp-theme="dark"] .aawp-product__price--old,
html[data-mp-theme="dark"] .aawp p,
html[data-mp-theme="dark"] .aawp span:not(.aawp-product__ribbon span) {
    color: #000000 !important;
}

html[data-mp-theme="dark"] .aawp a {
    color: #000000 !important;
}

/* ── WP Appbox (App Store & Amazon) Boxen ── */

html[data-mp-theme="dark"] div.wpappbox {
    background-color: #c0c0c0 !important;
    border-color: #aaaaaa !important;
    border-radius: 10px !important;
    overflow: hidden !important;
}

/* Innere Elemente: kein eigener Hintergrund, damit der Radius des Wrappers sichtbar bleibt */
html[data-mp-theme="dark"] div.wpappbox .appicon,
html[data-mp-theme="dark"] div.wpappbox .appdetails,
html[data-mp-theme="dark"] div.wpappbox a {
    background-color: transparent !important;
}

html[data-mp-theme="dark"] div.wpappbox .apptitle,
html[data-mp-theme="dark"] div.wpappbox .apptitle a,
html[data-mp-theme="dark"] div.wpappbox .appdetails,
html[data-mp-theme="dark"] div.wpappbox .appdetails > div,
html[data-mp-theme="dark"] div.wpappbox .price,
html[data-mp-theme="dark"] div.wpappbox .price .label,
html[data-mp-theme="dark"] div.wpappbox .price .value,
html[data-mp-theme="dark"] div.wpappbox .rating,
html[data-mp-theme="dark"] div.wpappbox span,
html[data-mp-theme="dark"] div.wpappbox p {
    color: #000000 !important;
}

/* ── Borlabs Cookie Box – komplett vom Darkmode ausnehmen ── */

html[data-mp-theme="dark"] #BorlabsCookieBox,
html[data-mp-theme="dark"] #BorlabsCookieBox *,
html[data-mp-theme="dark"] .borlabs-cookie,
html[data-mp-theme="dark"] .borlabs-cookie *,
html[data-mp-theme="dark"] [id^="borlabs"],
html[data-mp-theme="dark"] [id^="borlabs"] *,
html[data-mp-theme="dark"] [class^="borlabs"],
html[data-mp-theme="dark"] [class^="borlabs"] * {
    color: revert !important;
    border-color: revert !important;
    box-shadow: revert !important;
    filter: revert !important;
}

/* "Alle akzeptieren"-Button: immer grün halten */
html[data-mp-theme="dark"] #BorlabsCookieBox [class*="brlbs-btn-accept-all"],
html[data-mp-theme="dark"] #BorlabsCookieBox [class*="accept-all"] {
    background-color: var(--dialog-button-accept-all-color, #00b21a) !important;
    background: var(--dialog-button-accept-all-color, #00b21a) !important;
    color: var(--dialog-button-accept-all-text-color, #ffffff) !important;
}