/**
 * Klaro! consent manager — Tavel corporate identity.
 *
 * Recolours the default Klaro light theme to the site CI (primary #357ABD,
 * hover #2e69a5, 4px radius) and turns the "must consent" modal into a
 * fullscreen, blocking overlay the visitor has to interact with.
 *
 * Klaro injects its own <style> at runtime, so brand overrides use enough
 * specificity (and !important where needed) to win reliably.
 */

:root {
    /* Darkened from #357ABD to meet WCAG AA (4.5:1) on white. */
    --tavel-primary: #2e69a5;
    --tavel-primary-hover: #255a8f;
    --tavel-ink: #1f2b3a;
    --tavel-muted: #5b6b7d;
}

/* ---- Fullscreen blocking backdrop ----------------------------------------
 * Klaro injects its own <style> AFTER this file loads, so equal-specificity
 * rules lose the tie. We prefix with the #klaro id (+ !important on the
 * layout-critical props) so these win, and lift the overlay above the fixed
 * Avada header. The overlay is a padded, scroll-safe flex box so the card
 * floats off every edge on both desktop and mobile.
 */
#klaro .cookie-modal {
    position: fixed !important;
    inset: 0 !important;
    z-index: 2147483001 !important;   /* above the sticky site header */
    display: flex !important;
    padding: 20px 16px !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
}

#klaro .cookie-modal .cm-bg {
    position: fixed;
    inset: 0;
    z-index: 0;
    background: rgba(15, 32, 51, 0.86);
    backdrop-filter: blur(2px);
}

/* Centered card — margin:auto centres it and stays scroll-safe when tall. */
#klaro .cookie-modal .cm-modal.cm-klaro {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    margin: auto !important;
    width: 100% !important;
    max-width: 640px !important;
    height: auto !important;
    max-height: none !important;
    border-radius: 10px !important;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
    overflow: hidden;
    font-family: inherit;
    z-index: 1;
}

/* ---- Surface + typography ------------------------------------------------ */
.klaro .cookie-modal .cm-modal,
.klaro .cookie-notice:not(.cookie-modal-notice) {
    background-color: #ffffff;
    color: var(--tavel-ink);
    font-family: inherit;
}

.klaro .cookie-modal .cm-modal .cm-header,
.klaro .cookie-modal .cm-modal .cm-body,
.klaro .cookie-modal .cm-modal .cm-footer {
    background-color: #ffffff;
    color: var(--tavel-ink);
    border: 0;
}

.klaro .cookie-modal .cm-modal .cm-header h1,
.klaro .cookie-modal .cm-modal .cm-header h1.title {
    color: var(--tavel-ink);
    font-weight: 700;
}

.klaro .cookie-modal .cm-modal p,
.klaro .cookie-modal .cm-modal .cm-list-description,
.klaro .cookie-notice p {
    color: var(--tavel-muted);
}

/* Smaller, tighter body copy in the modal. */
.klaro .cookie-modal .cm-modal .cm-header p,
.klaro .cookie-modal .cm-modal .cm-header .description,
.klaro .cookie-modal .cm-modal .cm-body p {
    font-size: 12.5px;
    line-height: 1.5;
    margin: 0 0 8px;
}

.klaro .cookie-modal .cm-modal .cm-header h1,
.klaro .cookie-modal .cm-modal .cm-header h1.title {
    font-size: 19px;
    margin-bottom: 16px;
}

/* Hide the "Alle Dienste aktivieren/deaktivieren" master switch. */
.klaro .cookie-modal .cm-modal .cm-toggle-all {
    display: none !important;
}

.klaro .cookie-modal .cm-modal .cm-list-title {
    font-size: 13px;
}

.klaro .cookie-modal .cm-modal .cm-list-description {
    font-size: 12px;
}

.klaro a,
.klaro .cookie-modal .cm-modal a {
    color: var(--tavel-primary);
}

/* ---- Buttons ------------------------------------------------------------- */
.klaro .cm-btn {
    border-radius: 4px;
    font-weight: 600;
    transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

/* Accept (primary CI action) */
.klaro .cm-btn.cm-btn-success,
.klaro .cm-btn.cm-btn-accept-all,
.klaro .cm-btn.cm-btn-accept {
    background-color: var(--tavel-primary) !important;
    color: #ffffff !important;
    box-shadow: 0 6px 16px rgba(53, 122, 189, 0.30);
}

.klaro .cm-btn.cm-btn-success:hover,
.klaro .cm-btn.cm-btn-accept-all:hover,
.klaro .cm-btn.cm-btn-accept:hover {
    background-color: var(--tavel-primary-hover) !important;
}

/* Decline — visible, equal-weight secondary (DSGVO: reject must be easy) */
.klaro .cm-btn.cm-btn-decline,
.klaro .cm-btn.cm-btn-danger {
    background-color: transparent !important;
    color: var(--tavel-muted) !important;
    border: 1px solid rgba(31, 43, 58, 0.25) !important;
    box-shadow: none;
}

.klaro .cm-btn.cm-btn-decline:hover,
.klaro .cm-btn.cm-btn-danger:hover {
    background-color: rgba(31, 43, 58, 0.06) !important;
}

/* "Einstellungen"/learn-more link button */
.klaro .cm-btn.cm-btn-info {
    background-color: transparent !important;
    color: var(--tavel-primary) !important;
    box-shadow: none;
}

/* ---- Per-service toggles ------------------------------------------------- */
.klaro .cm-list-input:checked + .cm-list-label .slider {
    background-color: var(--tavel-primary) !important;
}

/* Flat switch: no heavy drop shadow on the track... */
.klaro .cm-list-label .slider,
.klaro .cm-list-label .slider.round {
    background-color: #c3ccd6;
    box-shadow: none !important;
}

/* ...and only a subtle lift on the knob. */
.klaro .cm-list-label .slider::before {
    box-shadow: 0 1px 2px rgba(31, 43, 58, 0.25) !important;
}

.klaro .cm-list-title {
    color: var(--tavel-ink);
}

.klaro .cookie-modal .cm-footer .cm-footer-buttons {
    margin: 20px 0 32px;
}

/* ---- Footer legal links (Impressum / Datenschutz) ----------------------- */
.klaro .cookie-modal .cm-footer .tavel-cm-links {
    flex: 0 0 100%;
    width: 100%;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(31, 43, 58, 0.10);
    text-align: center;
    font-size: 12px;
}

.klaro .cookie-modal .cm-footer .tavel-cm-links a {
    color: var(--tavel-muted) !important;
    margin: 0 10px;
    text-decoration: none;
}

.klaro .cookie-modal .cm-footer .tavel-cm-links a:hover {
    color: var(--tavel-primary) !important;
    text-decoration: underline;
}