/* =========================================================
   NDG Haupt-CMS 1.4.1e
   Automatischer Logo-Wechsel für helles und dunkles Theme
   ========================================================= */

.ndg-theme-logo {
    display: inline-grid;
    place-items: center;
    width: clamp(160px, 21vw, 270px);
    min-width: 0;
}

.ndg-theme-logo picture,
.ndg-theme-logo img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
}

.ndg-theme-logo-image {
    object-fit: contain;
    object-position: left center;
}

.ndg-theme-logo-dark {
    display: none !important;
}

html[data-theme="dark"] .ndg-theme-logo-light,
body[data-theme="dark"] .ndg-theme-logo-light,
body.dark-mode .ndg-theme-logo-light,
.dark-theme .ndg-theme-logo-light {
    display: none !important;
}

html[data-theme="dark"] .ndg-theme-logo-dark,
body[data-theme="dark"] .ndg-theme-logo-dark,
body.dark-mode .ndg-theme-logo-dark,
.dark-theme .ndg-theme-logo-dark {
    display: block !important;
}

html[data-theme="light"] .ndg-theme-logo-light,
body[data-theme="light"] .ndg-theme-logo-light,
.light-theme .ndg-theme-logo-light {
    display: block !important;
}

html[data-theme="light"] .ndg-theme-logo-dark,
body[data-theme="light"] .ndg-theme-logo-dark,
.light-theme .ndg-theme-logo-dark {
    display: none !important;
}

/* Fallback, falls noch kein manueller Theme-Wert gespeichert ist. */
@media (prefers-color-scheme: dark) {
    html:not([data-theme]) .ndg-theme-logo-light {
        display: none !important;
    }

    html:not([data-theme]) .ndg-theme-logo-dark {
        display: block !important;
    }
}

@media (max-width: 850px) {
    .ndg-theme-logo {
        width: clamp(138px, 43vw, 190px);
    }
}

@media (max-width: 390px) {
    .ndg-theme-logo {
        width: 142px;
    }
}