/* =========================================================
   LOPOS – Anpassungen für Klaro (überschreibt klaro.css)
   ========================================================= */

/* ---- Buttons: Markenfarbe #24709e, eckig, weißer Text ---- */
.klaro .cookie-modal .cm-btn,
.klaro .context-notice .cm-btn,
.klaro .cookie-notice .cm-btn,
.klaro .cm-btn.cm-btn-success,
.klaro .cm-btn.cm-btn-success-var,
.klaro .cm-btn.cm-btn-info,
.klaro .cm-btn.cm-btn-close {
    background-color: #24709e !important;
    color: #fff !important;
    border-radius: 0 !important;
}

.klaro .cm-btn:hover {
    background-color: #1d5c82 !important;
}

/* ---- YouTube-Platzhalter: Thumbnail als Hintergrund ---- */
.media-container {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Klaro-Platzhalter füllt die 16:9-Box des Containers */
.media-container > .klaro,
.media-container .klaro {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
}

/* Halbtransparenter Schleier über dem Thumbnail für Lesbarkeit */
.media-container .context-notice {
    height: 100%;
    border: 0 !important;
    border-radius: 0 !important;
    background-color: rgba(0, 0, 0, 0.45) !important;
}

.media-container .context-notice p,
.media-container .context-notice p a {
    color: #fff !important;
}