/*
 * Klaro-Anpassungen für argusreisen.de
 *
 * WICHTIG zur Technik: Klaro fügt sein eigenes Stylesheet zur Laufzeit per
 * <style> in den <head> ein - also NACH dieser Datei. Bei gleicher
 * Spezifität gewinnt das spätere Stylesheet. Deshalb steht auf allen
 * Farb- und Abstandsregeln hier bewusst !important. Ohne das greifen
 * die Regeln nur teilweise, und es entsteht weiße Schrift auf weißem
 * Grund.
 *
 * WICHTIG zum Recht: "Alle akzeptieren" und "Alle ablehnen" haben dieselbe
 * Größe, dieselbe Schriftstärke und dieselbe Flächigkeit. Eine der beiden
 * Optionen optisch zurückzunehmen gilt als Dark Pattern und macht die
 * Einwilligung angreifbar.
 */

/* ---------- Banner unten ---------- */
.klaro .cookie-notice:not(.cookie-modal-notice) {
    background-color: #1f2b38 !important;
    color: #ffffff !important;
    box-shadow: 0 -2px 18px rgba(0, 0, 0, .28) !important;
    border-radius: 0 !important;
    padding: 22px 26px !important;
    font-family: inherit !important;
    font-size: 15px !important;
    line-height: 1.55 !important;
}

.klaro .cookie-notice:not(.cookie-modal-notice) .cn-body,
.klaro .cookie-notice:not(.cookie-modal-notice) .cn-body p,
.klaro .cookie-notice:not(.cookie-modal-notice) .cn-body strong,
.klaro .cookie-notice:not(.cookie-modal-notice) .cn-body span {
    color: #ffffff !important;
}

.klaro .cookie-notice:not(.cookie-modal-notice) .cn-body {
    margin: 0 auto !important;
    max-width: 1100px !important;
    padding: 0 !important;
}

.klaro .cookie-notice:not(.cookie-modal-notice) .cn-body p {
    margin: 0 0 14px !important;
}

.klaro .cookie-notice:not(.cookie-modal-notice) a,
.klaro .cookie-notice:not(.cookie-modal-notice) .cn-learn-more {
    color: #9ecdf7 !important;
    text-decoration: underline !important;
}

/* ---------- Knöpfe: bewusst gleichwertig ---------- */
.klaro .cookie-notice .cn-buttons,
.klaro .cookie-modal .cm-footer-buttons {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    margin: 4px 0 0 !important;
}

.klaro .cookie-notice .cn-buttons button.cm-btn,
.klaro .cookie-modal .cm-footer-buttons button.cm-btn {
    font-size: 15px !important;
    font-weight: 600 !important;
    padding: 12px 26px !important;
    min-width: 190px !important;
    margin: 0 !important;
    border: 2px solid transparent !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    line-height: 1.2 !important;
}

/* Annehmen und Ablehnen - identische Maße, identisches Gewicht.
   Nur der Farbton unterscheidet sie, keine Rangfolge. */
/* Hausfarbe #3389d7 kommt mit Weiß nur auf 3,68:1 und reißt damit den
   WCAG-AA-Mindestwert von 4,5:1. Um zwei Stufen abgedunkelt: 4,79:1. */
.klaro .cookie-notice .cn-buttons button.cm-btn-success,
.klaro .cookie-modal .cm-footer-buttons button.cm-btn-success {
    background-color: #1f6fbd !important;
    border-color: #1f6fbd !important;
    color: #ffffff !important;
}

.klaro .cookie-notice .cn-buttons button.cm-btn-danger,
.klaro .cookie-notice .cn-buttons button.cn-decline,
.klaro .cookie-modal .cm-footer-buttons button.cm-btn-danger,
.klaro .cookie-modal .cm-footer-buttons button.cn-decline {
    background-color: #55646f !important;
    border-color: #55646f !important;
    color: #ffffff !important;
}

/* "Einstellungen" darf dezenter sein - es ist nicht die Ablehnung. */
.klaro .cookie-notice .cn-buttons button.cm-btn-info,
.klaro .cookie-notice a.cn-learn-more {
    background-color: transparent !important;
    border-color: rgba(255, 255, 255, .55) !important;
    color: #ffffff !important;
    min-width: 0 !important;
    font-weight: 500 !important;
}

.klaro .cm-btn:hover {
    opacity: .88 !important;
}

.klaro .cm-btn:focus,
.klaro .cm-btn:focus-visible {
    outline: 3px solid #9ecdf7 !important;
    outline-offset: 2px !important;
}

/* ---------- Einstellungs-Dialog (heller Hintergrund!) ---------- */
.klaro .cookie-modal .cm-modal {
    background-color: #ffffff !important;
    color: #23303c !important;
    border-radius: 6px !important;
}

.klaro .cookie-modal .cm-modal .cm-header,
.klaro .cookie-modal .cm-modal .cm-body,
.klaro .cookie-modal .cm-modal p,
.klaro .cookie-modal .cm-modal li,
.klaro .cookie-modal .cm-modal span,
.klaro .cookie-modal .cm-modal .cm-list-title,
.klaro .cookie-modal .cm-modal .cm-list-description,
.klaro .cookie-modal .cm-modal .cm-purpose {
    color: #23303c !important;
}

.klaro .cookie-modal .cm-modal h1,
.klaro .cookie-modal .cm-modal .cm-header h1 {
    color: #23303c !important;
    font-size: 21px !important;
    font-weight: 700 !important;
}

.klaro .cookie-modal .cm-modal a {
    color: #1c6fb8 !important;
    text-decoration: underline !important;
}

.klaro .cookie-modal .cm-list-input:checked + .cm-list-label .slider {
    background-color: #3389d7 !important;
}

/* ---------- Mobil: Knöpfe untereinander, volle Breite ---------- */
@media (max-width: 640px) {
    .klaro .cookie-notice:not(.cookie-modal-notice) {
        padding: 18px 16px !important;
    }

    .klaro .cookie-notice .cn-buttons {
        flex-direction: column !important;
    }

    .klaro .cookie-notice .cn-buttons button.cm-btn {
        width: 100% !important;
        min-width: 0 !important;
    }
}

/* ---------- Widerrufs-Link im Seitenfuß ---------- */

/* Der fixierte Balken .footer-twitter-wrapper (61 px hoch, z-index 999)
   liegt über der Copyright-Zeile und fängt dort alle Klicks ab - der
   Widerrufs-Link war dadurch nicht bedienbar. Die Zeile bekommt deshalb
   unten Luft, damit sie über dem Balken endet. */
.copyright-wrapper {
    padding-bottom: 75px !important;
}

.consent-reopen {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    color: inherit;
    text-decoration: underline;
    cursor: pointer;
}
