/* ============================================================
   Divi Dark Mode – Frontend Styles
   ============================================================ */

/* ── Button Basis ── */
.ddm-toggle {
    display:          inline-flex;
    align-items:      center;
    justify-content:  center;
    position:         relative;
    width:            var(--ddm-size, 52px);
    height:           var(--ddm-size, 52px);
    border-radius:    var(--ddm-radius, 50%);
    background:       var(--ddm-bg-light, #ffffff);
    border:           var(--ddm-border, 2px solid #ccc);
    box-shadow:       var(--ddm-shadow, 0 4px 16px rgba(0,0,0,.18));
    cursor:           pointer;
    padding:          0;
    overflow:         hidden;
    transition:       background var(--ddm-speed, 400ms) ease,
                      box-shadow var(--ddm-speed, 400ms) ease,
                      transform  200ms ease;
    z-index:          99999;
    -webkit-appearance: none;
    appearance:       none;
    outline-offset:   3px;
}

.ddm-toggle:hover  { transform: scale(1.08); }
.ddm-toggle:active { transform: scale(0.95); }

.ddm-toggle--floating {
    position: fixed !important;
}

.ddm-nav-item {
    display: flex !important;
    align-items: center;
}
.ddm-toggle--nav {
    width:  calc(var(--ddm-size, 52px) * 0.75);
    height: calc(var(--ddm-size, 52px) * 0.75);
}

/* ── Icons ── */
.ddm-icon {
    width:          var(--ddm-icon-size, 22px);
    height:         var(--ddm-icon-size, 22px);
    position:       absolute;
    top:            50%;
    left:           50%;
    flex-shrink:    0;
    transition:     opacity   var(--ddm-speed, 400ms) ease,
                    transform var(--ddm-speed, 400ms) ease;
    pointer-events: none;
}

.ddm-icon--sun {
    color:     var(--ddm-sun-color, #f59e0b);
    opacity:   1;
    transform: translate(-50%, -50%) rotate(0deg) scale(1);
}

.ddm-icon--moon {
    color:     var(--ddm-moon-color, #818cf8);
    opacity:   0;
    transform: translate(-50%, -50%) rotate(-90deg) scale(0.6);
}

.ddm-dark .ddm-toggle {
    background: var(--ddm-bg-dark, #1e1e2e);
}

.ddm-dark .ddm-icon--sun {
    opacity:   0;
    transform: translate(-50%, -50%) rotate(90deg) scale(0.6);
}

.ddm-dark .ddm-icon--moon {
    opacity:   1;
    transform: translate(-50%, -50%) rotate(0deg) scale(1);
}

/* ══════════════════════════════════════════════════════════════
   DARK MODE FILTER – OHNE INVERT, OHNE FARBVERFÄLSCHUNG

   invert(1) + hue-rotate(180deg) verfälscht Farben stark
   (Lila wird hell-Lila, Bilder sehen falsch aus).

   Stattdessen: brightness + contrast absenken.
   Das verdunkelt die Seite ohne Farben zu invertieren.
   Bilder und farbige Bereiche bleiben naturgetreu.
   ══════════════════════════════════════════════════════════════ */

/* Schwarzer html-Hintergrund – verhindert Durchscheinen bei Scroll */
html.ddm-dark {
    background: #000 !important;
}

/* Body selbst transparent lassen – der Wrapper trägt den Inhalt */
html.ddm-dark body {
    background: transparent !important;
}

/* Wrapper füllt vollen Viewport */
body > #ddm-invert-wrapper {
    min-height: 100vh;
}

/* Dark Mode: schwarzer Hintergrund + abdunkeln */
html.ddm-dark body > #ddm-invert-wrapper {
    background: #000;
    filter: brightness(var(--ddm-brightness, 70%)) contrast(90%);
    transition: filter var(--ddm-speed, 400ms) ease;
}

/* Bilder etwas aufhellen damit sie nicht zu dunkel werden */
html.ddm-dark body img,
html.ddm-dark body video {
    filter: brightness(110%) contrast(105%);
}

/* Button niemals abdunkeln */
body > .ddm-toggle--floating,
body > .ddm-toggle--floating * {
    filter: none !important;
    -webkit-filter: none !important;
}

/* Transition beim Laden unterdrücken */
html.ddm-no-transition,
html.ddm-no-transition * {
    transition: none !important;
}