/**
 * Mehrlenstein brand overrides — keep separate from app.css (Springs bundle).
 */
.header__logo img,
.header__logo img.wr-logo,
.header__logo img[src*="logowhite.png"] {
    display: block;
    width: auto;
    height: 100%;
    max-width: 100%;
    object-fit: contain;
}

.header__logo--mobile img,
.header__logo--mobile img.wr-logo,
.header__logo--mobile img[src*="logowhite.png"] {
    display: block;
    width: clamp(120px, 28vw, 180px);
    height: auto;
    max-height: 30px;
    object-fit: contain;
}

.wr-preloader__logo-img {
    display: block;
    width: clamp(180px, 32vw, 340px);
    height: auto;
    opacity: 0;
    transform: translateY(16px);
    animation: wrPreloaderLogoIn 1s cubic-bezier(.2, .7, .2, 1) .15s forwards;
    filter: drop-shadow(0 1px 26px rgba(0, 0, 0, .55));
}

@keyframes wrPreloaderLogoIn {
    to {
        opacity: 1;
        transform: none;
    }
}

.wr-intro__logo-img {
    display: block;
    width: clamp(220px, 38vw, 420px);
    height: auto;
}

.footer__logo img[src*="logowhite.png"] {
    width: clamp(140px, 22vw, 220px);
    height: auto;
}

/* Globale .dim-Abdunkelung (Springs app.css) aus — nur Basis-Klasse ohne Modifikator. */
.dim:not([class*="dim--"]) {
    background: none;
    opacity: 0;
}

/* Mobile Top-Nav: themed plugin setzt ui-light auf split targets → schwarze Icons.
   Haupt-Header (.js-header) soll auf Mobil immer helle Schrift/Icons behalten. */
@media (max-aspect-ratio:10/11) and (max-width:1439px),
(max-aspect-ratio:13/9) and (max-width:667px),
(max-width:979px) {
    .js-header [data-custom-scroll-theme-target] {
        --t-text: var(--c-beige);
        --t-text-rgb: var(--c-beige-rgb);
        --t-heading: var(--c-beige);
        --t-heading-rgb: var(--c-beige-rgb);
        --t-button-link-text: var(--c-beige);
        --t-button-link-text-rgb: var(--c-beige-rgb);
        --t-button-link-hover-text: var(--c-beige);
        --t-button-link-hover-text-rgb: var(--c-beige-rgb);
        --t-button-link-hover-border: var(--c-beige);
        --t-button-link-hover-border-rgb: var(--c-beige-rgb);
        --t-line: rgba(var(--c-beige-rgb), 0.2);
        color: var(--c-beige);
    }

    .js-header [data-custom-scroll-theme-target] .btn,
    .js-header [data-custom-scroll-theme-target] .lang-toggle {
        color: var(--c-beige);
    }

    .js-header [data-custom-scroll-theme-target] .icon {
        color: var(--c-beige);
    }
}