/* Platzhalter bis zur Cookiebot-Einwilligung (src/CookiebotIframe.php) */

/* Video: Wrapper so groß wie das iframe (Inline-Style), damit der Platzhalter genau das Video abdeckt */
.ct-embed-consent {
    position: relative;
    display: inline-block;
    max-width: 100%;
    vertical-align: middle;
}

/* iframes mit width/height 100% in Modal und Offcanvas beziehen sich jetzt auf den Wrapper */
.uk-modal .ct-embed-consent,
.uk-offcanvas .ct-embed-consent {
    display: block;
    height: 100%;
}

.ct-embed-consent:not(.ct-embed-consent--flow) > iframe {
    width: 100%;
    height: 100%;
    vertical-align: middle;
}

.ct-embed-consent:not(.ct-embed-consent--flow) > iframe:not([src]) {
    background: #1a1a1a;
}

/* Cookiebot setzt display am Platzhalter selbst, deshalb zentriert die innere Box */
.ct-embed-consent__placeholder {
    position: absolute;
    inset: 0;
    overflow: auto;
    background: rgba(0, 0, 0, 0.82);
    color: #fff;
    container-type: size;
}

/* Kleine Videos: nur die Buttons, der Hauptbutton nennt die Einwilligung selbst */
@container (max-height: 220px) {
    .ct-embed-consent__box p {
        display: none;
    }
}

/* Kalender (Bookings): Maße stehen im style des iframes, der Platzhalter liegt im Fluss.
   Cookiebot blendet das iframe bis zur Einwilligung aus und danach den Platzhalter.
   Cookiebot zeigt den Platzhalter mit display: inline (eigenes CSS), im Fluss gingen damit
   Hintergrund und Höhe verloren. Als Flex-Kind wird er trotzdem ein Block, display: none greift weiter. */
.ct-embed-consent--flow {
    display: flex;
    flex-direction: column;
}

/* Auch ohne Cookiebot (Werbeblocker) kein leerer Kasten in Kalenderhöhe; nach der Einwilligung setzt Cookiebot src */
.ct-embed-consent--flow > iframe:not([src]) {
    display: none;
}

.ct-embed-consent--flow .ct-embed-consent__placeholder {
    position: static;
    min-height: 16rem;
    container-type: normal;
    border-radius: 4px;
}

.ct-embed-consent__box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 100%;
    padding: 1rem;
    box-sizing: border-box;
    text-align: center;
    font-size: 0.875rem;
    line-height: 1.4;
}

.ct-embed-consent--flow .ct-embed-consent__box {
    min-height: 16rem;
    padding: 2rem 1.5rem;
    font-size: 1rem;
}

.ct-embed-consent__box p {
    max-width: 36rem;
    margin: 0;
}

/* UIkit-Buttons haben eine Zeilenhöhe in Buttonhöhe, umbrochene Texte (mobil) werden sonst sehr hoch */
[data-ct-consent] .uk-button {
    line-height: 1.3;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
    white-space: normal;
}

.ct-embed-consent__box .uk-button-link,
.ct-embed-consent__link {
    color: #fff;
    text-decoration: underline;
}

.ct-embed-consent__link:hover,
.ct-embed-consent__link:focus-visible,
.ct-embed-consent__box .uk-button-link:hover,
.ct-embed-consent__box .uk-button-link:focus-visible {
    color: #fff;
    text-decoration-thickness: 2px;
}

.ct-embed-consent__box :focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

/* Hinweis, wenn Cookiebot fehlt (js/custom.js) */
.ct-consent-hint {
    display: block;
    max-width: 36rem;
    margin-top: 0.5rem;
    font-weight: 600;
}