/*
 * Copyright 2026 Mario Stähli.
 *
 * Ergänzende Styles des Frontends (Navigation, Flipcard, Einwilligung, Kontaktformular).
 */

/* Bereich um die Navigation in der Hintergrundfarbe der Website */
.cms-nav-container {
    background-color: var(--cms-body-bg-color, #ffffff);
}

.cms-hp {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.cms-consent-placeholder {
    border-left: 4px solid var(--bs-secondary, #6c757d);
}

#consentBanner .offcanvas-body {
    max-height: 70vh;
    overflow-y: auto;
}

.cms-flipcard {
    perspective: 1000px;
    min-height: 250px;
}
.cms-flipcard-inner {
    position: relative;
    width: 100%;
    min-height: inherit;
    transition: transform 0.6s;
    transform-style: preserve-3d;
}
.cms-flipcard:hover .cms-flipcard-inner,
.cms-flipcard:focus .cms-flipcard-inner,
.cms-flipcard:focus-within .cms-flipcard-inner {
    transform: rotateY(180deg);
}
.cms-flipcard-front,
.cms-flipcard-back {
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    overflow: auto;
}
.cms-flipcard-front img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.cms-flipcard-back {
    transform: rotateY(180deg);
}
@media (prefers-reduced-motion: reduce) {
    .cms-flipcard-inner {
        transition: none;
    }
}