/* ==========================================================================
   Klaro-Banner im Verovia-Design - Version 3 (heller, leicht transparent)
   --------------------------------------------------------------------------
   Heller Cream-Hintergrund mit leichter Transparenz und Blur.
   Schrift in dunklem Bark-Ton.

   Wichtige Klaro-Klassen:
   - .cookie-notice        = der kleine Banner unten
   - .cookie-modal         = das große Einstellungs-Fenster
   - .cm-btn-success       = "Alle akzeptieren"
   - .cm-btn-success-var   = "Speichern"
   - .cm-btn-info          = "Einstellungen"
   - .cn-decline           = "Alle ablehnen"
   ========================================================================== */

/* ----- Kleiner Banner unten am Bildschirmrand ----- */
.klaro .cookie-notice:not(.cookie-modal-notice) {
    background: rgba(246, 243, 236, 0.92) !important;  /* Cream mit 92% Deckkraft */
    backdrop-filter: blur(12px);                         /* Hintergrund leicht weichzeichnen */
    -webkit-backdrop-filter: blur(12px);
    color: var(--color-bark) !important;
    font-family: var(--font-sans) !important;
    border: 1px solid rgba(87, 76, 63, 0.12) !important;
    box-shadow: 0 -2px 30px rgba(87, 76, 63, 0.12) !important;
    border-radius: 0 !important;
}

/* Auf großen Bildschirmen: zentrierte Karte unten, nicht volle Breite */
@media (min-width: 1024px) {
    .klaro .cookie-notice:not(.cookie-modal-notice) {
        max-width: 1100px !important;
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%) !important;
        bottom: 20px !important;
        border-radius: 6px !important;
        box-shadow: 0 8px 30px rgba(87, 76, 63, 0.15) !important;
    }
}

.klaro .cookie-notice .cn-body {
    font-family: var(--font-sans) !important;
}

.klaro .cookie-notice .cn-body h1,
.klaro .cookie-notice .cn-body h2,
.klaro .cookie-notice .title {
    font-family: var(--font-serif) !important;
    font-size: 20px !important;
    font-weight: 500 !important;
    color: var(--color-bark) !important;
}

.klaro .cookie-notice .cn-body p {
    font-size: 14px !important;
    line-height: 1.55 !important;
    color: var(--color-bark-soft) !important;
}

.klaro .cookie-notice a,
.klaro .cookie-notice .cn-learn-more {
    color: var(--color-bark) !important;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: var(--color-taupe);
}

.klaro .cookie-notice a:hover {
    text-decoration-color: var(--color-bark);
}

/* ----- Buttons im Banner ----- */
.klaro .cn-buttons {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
}

.klaro .cm-btn {
    font-family: var(--font-sans) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.12em !important;
    padding: 11px 22px !important;
    border-radius: 999px !important;
    border: 1px solid transparent !important;
    cursor: pointer !important;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease !important;
}

/* "Alle akzeptieren" (cm-btn-success) - dunkler Bark-Button auf hellem Hintergrund */
.klaro .cm-btn.cm-btn-success {
    background: var(--color-bark) !important;
    color: var(--color-cream) !important;
    border-color: var(--color-bark) !important;
}

.klaro .cm-btn.cm-btn-success:hover {
    background: var(--color-bark-soft, #6E6354) !important;
    border-color: var(--color-bark-soft, #6E6354) !important;
    color: var(--color-cream) !important;
}

/* "Speichern" / "Auswahl bestätigen" (cm-btn-success-var) - gleicher Stil wie Akzeptieren */
.klaro .cm-btn.cm-btn-success-var {
    background: var(--color-bark) !important;
    color: var(--color-cream) !important;
    border-color: var(--color-bark) !important;
}

.klaro .cm-btn.cm-btn-success-var:hover {
    background: var(--color-bark-soft, #6E6354) !important;
    border-color: var(--color-bark-soft, #6E6354) !important;
    color: var(--color-cream) !important;
}

/* "Alle ablehnen" / Decline - Outline-Stil (transparent, Bark-Rand) */
.klaro .cm-btn.cn-decline,
.klaro .cm-btn.cm-btn-decline {
    background: transparent !important;
    color: var(--color-bark) !important;
    border-color: rgba(87, 76, 63, 0.3) !important;
}

.klaro .cm-btn.cn-decline:hover,
.klaro .cm-btn.cm-btn-decline:hover {
    background: rgba(87, 76, 63, 0.06) !important;
    border-color: var(--color-bark) !important;
}

/* "Einstellungen" (cm-btn-info) - sehr dezent */
.klaro .cm-btn.cm-btn-info {
    background: transparent !important;
    color: var(--color-bark-soft, #6E6354) !important;
    border-color: rgba(87, 76, 63, 0.2) !important;
}

.klaro .cm-btn.cm-btn-info:hover {
    background: rgba(87, 76, 63, 0.05) !important;
    color: var(--color-bark) !important;
    border-color: rgba(87, 76, 63, 0.4) !important;
}

/* ----- Großes Einstellungs-Modal ----- */
.klaro .cookie-modal {
    font-family: var(--font-sans) !important;
}

.klaro .cookie-modal .cm-bg {
    background: rgba(87, 76, 63, 0.5) !important;
}

.klaro .cookie-modal .cm-modal {
    background: var(--color-cream) !important;
    color: var(--color-bark) !important;
    border-radius: 6px !important;
    font-family: var(--font-sans) !important;
}

.klaro .cookie-modal .cm-header h1,
.klaro .cookie-modal h1.title {
    font-family: var(--font-serif) !important;
    font-size: 26px !important;
    font-weight: 500 !important;
    color: var(--color-bark) !important;
}

.klaro .cookie-modal .cm-header p,
.klaro .cookie-modal .cm-body p {
    font-family: var(--font-sans) !important;
    color: var(--color-bark-soft) !important;
}

.klaro .cookie-modal .cm-link {
    color: var(--color-bark) !important;
}

.klaro .cookie-modal .cm-list-title {
    color: var(--color-bark) !important;
    font-weight: 500 !important;
}

.klaro .cookie-modal .cm-list-description {
    color: var(--color-bark-soft) !important;
}

.klaro .cookie-modal .cm-purpose,
.klaro .cookie-modal .cm-service {
    border-top: 1px solid rgba(87, 76, 63, 0.12) !important;
}

/* Toggle-Schalter */
.klaro .cookie-modal .cm-list-input:checked + .cm-list-label .slider {
    background: var(--color-bark) !important;
}

.klaro .cookie-modal .cm-list-input:not(:checked) + .cm-list-label .slider {
    background: rgba(87, 76, 63, 0.3) !important;
}

/* "Powered by Klaro" verstecken */
.klaro .cm-powered-by {
    display: none !important;
}

/* ----- Mobile-Anpassungen ----- */
@media (max-width: 880px) {
    .klaro .cookie-notice:not(.cookie-modal-notice) {
        padding: 16px 18px !important;
    }

    .klaro .cookie-notice .cn-body h2 {
        font-size: 17px !important;
        margin-bottom: 8px !important;
    }

    .klaro .cookie-notice .cn-body p {
        font-size: 13px !important;
        line-height: 1.45 !important;
    }

    /* Buttons nebeneinander, mit kleinen Abständen */
    .klaro .cn-buttons {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
        margin-top: 12px !important;
    }

    /* Buttons: kompakt, in einer Zeile, automatische Breite */
    .klaro .cm-btn {
        width: auto !important;
        flex: 1 1 auto !important;
        padding: 10px 16px !important;
        font-size: 13px !important;
        white-space: nowrap !important;
        text-align: center !important;
    }
}

/* ----- "Cookie-Einstellungen" Footer-Link ----- */
.cookie-settings-link {
    background: none !important;
    border: none !important;
    color: var(--color-cream) !important;
    opacity: 0.7;
    font-family: var(--font-sans) !important;
    font-size: 13px !important;
    cursor: pointer;
    padding: 0;
    text-decoration: none;
    transition: opacity 0.2s ease;
}

.cookie-settings-link:hover {
    opacity: 1;
    text-decoration: underline;
}