/* Klaro! Custom Styling - Duotone Design (Schwarz/Grün) */
/* Angepasst an das Website-Farbschema: #c9f7a5 (grün) & #000000 (schwarz) */

/* CSS-Variablen überschreiben - für beide Banner-Typen */
.klaro .cookie-notice,
.klaro .cookie-modal-notice {
    --light1: #ffffff !important; /* Textfarbe weiß (für besseren Kontrast) */
    --dark1: #2d5016 !important;  /* Dunkleres Grün für Hintergrund */
    background: #2d5016 !important; /* Dunkles Grün statt #c9f7a5 */
    border: 2px solid #000000 !important;
    color: #ffffff !important;
}

/* Alle Text-Elemente weiß für dunklen Hintergrund - beide Banner-Typen */
.klaro .cookie-notice p,
.klaro .cookie-notice strong,
.klaro .cookie-notice h1,
.klaro .cookie-notice h2,
.klaro .cookie-notice ul,
.klaro .cookie-notice li,
.klaro .cookie-notice span,
.klaro .cookie-notice div,
.klaro .cookie-notice .cn-body,
.klaro .cookie-notice .cn-body p,
.klaro .cookie-notice .cn-body span,
.klaro .cookie-notice .cn-body div,
.klaro .cookie-modal-notice p,
.klaro .cookie-modal-notice strong,
.klaro .cookie-modal-notice h1,
.klaro .cookie-modal-notice h2,
.klaro .cookie-modal-notice ul,
.klaro .cookie-modal-notice li,
.klaro .cookie-modal-notice span,
.klaro .cookie-modal-notice div,
.klaro .cookie-modal-notice .cn-body,
.klaro .cookie-modal-notice .cn-body p,
.klaro .cookie-modal-notice .cn-body span,
.klaro .cookie-modal-notice .cn-body div {
    color: #ffffff !important;
}

.klaro .cookie-notice .cn-body a,
.klaro .cookie-notice a,
.klaro .cookie-modal-notice .cn-body a,
.klaro .cookie-modal-notice a {
    color: #c9f7a5 !important;  /* Helles Grün für Links */
    text-decoration: underline;
}

.klaro .cookie-notice .cn-body a:hover,
.klaro .cookie-notice a:hover,
.klaro .cookie-modal-notice .cn-body a:hover,
.klaro .cookie-modal-notice a:hover {
    color: #ffffff !important;
}

/* Buttons im Banner - beide Banner-Typen */
.klaro .cookie-notice .cn-buttons button,
.klaro .cookie-notice .cn-buttons .cm-btn,
.klaro .cookie-notice .cn-ok button,
.klaro .cookie-notice .cn-ok .cm-btn,
.klaro .cookie-modal-notice .cn-buttons button,
.klaro .cookie-modal-notice .cn-buttons .cm-btn,
.klaro .cookie-modal-notice .cn-ok button,
.klaro .cookie-modal-notice .cn-ok .cm-btn {
    background: #c9f7a5 !important;  /* Helles Grün für Kontrast */
    color: #000000 !important;       /* Schwarze Schrift */
    border: 2px solid #c9f7a5 !important;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    padding: 0.75rem 1.5rem;
    transition: all 0.3s ease;
}

.klaro .cookie-notice .cn-buttons button:hover,
.klaro .cookie-notice .cn-buttons .cm-btn:hover,
.klaro .cookie-notice .cn-ok button:hover,
.klaro .cookie-notice .cn-ok .cm-btn:hover,
.klaro .cookie-modal-notice .cn-buttons button:hover,
.klaro .cookie-modal-notice .cn-buttons .cm-btn:hover,
.klaro .cookie-modal-notice .cn-ok button:hover,
.klaro .cookie-modal-notice .cn-ok .cm-btn:hover {
    background: #ffffff !important;
    color: #2d5016 !important;       /* Dunkles Grün */
    border: 2px solid #ffffff !important;
}

/* Cookie-Modal (Einstellungen) - Dunkles Design */
.klaro .cookie-modal {
    background: rgba(0, 0, 0, 0.8) !important;
}

.klaro .cookie-modal .cm-modal {
    --light1: #ffffff !important;    /* Textfarbe weiß */
    --dark1: #2d5016 !important;     /* Hintergrund dunkles Grün */
    background: #2d5016 !important;  /* Dunkles Grün */
    border: 3px solid #000000 !important;
    color: #ffffff !important;       /* Weißer Text */
}

.klaro .cookie-modal .cm-header {
    background: #2d5016 !important;  /* Dunkles Grün */
    border-bottom: 2px solid #000000 !important;
}

.klaro .cookie-modal .cm-header h1 {
    color: #ffffff !important;       /* Weißer Text */
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
}

.klaro .cookie-modal .cm-body {
    background: #2d5016 !important;  /* Dunkles Grün */
    color: #ffffff !important;       /* Weißer Text */
}

.klaro .cookie-modal .cm-body p,
.klaro .cookie-modal .cm-body li,
.klaro .cookie-modal .cm-body strong,
.klaro .cookie-modal .cm-body span {
    color: #ffffff !important;       /* Weißer Text */
}

/* Service-Items */
.klaro .cookie-modal .cm-list-input:checked ~ .cm-list-label .slider {
    background: #c9f7a5 !important;  /* Helles Grün wenn aktiv */
}

.klaro .cookie-modal .cm-list-label .slider {
    background: rgba(255, 255, 255, 0.3) !important;  /* Heller wenn inaktiv */
}

.klaro .cookie-modal .cm-list-label .slider:before {
    background: #ffffff !important;  /* Weißer Slider */
}

.klaro .cookie-modal .cm-list-title {
    color: #ffffff !important;       /* Weißer Text */
    font-weight: 600;
}

.klaro .cookie-modal .cm-list-description {
    color: #ffffff !important;       /* Weißer Text */
}

/* Buttons im Modal */
.klaro .cookie-modal .cm-footer button,
.klaro .cookie-modal .cm-footer .cm-btn {
    background: #c9f7a5 !important;  /* Helles Grün */
    color: #000000 !important;       /* Schwarzer Text */
    border: 2px solid #c9f7a5 !important;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    padding: 0.75rem 1.5rem;
    transition: all 0.3s ease;
}

.klaro .cookie-modal .cm-footer button:hover,
.klaro .cookie-modal .cm-footer .cm-btn:hover {
    background: #ffffff !important;
    color: #2d5016 !important;       /* Dunkles Grün */
    border: 2px solid #ffffff !important;
}

/* Close-Button */
.klaro .cookie-modal .cm-header .cm-close {
    color: #ffffff !important;       /* Weißes X */
}

.klaro .cookie-modal .cm-header .cm-close:hover {
    opacity: 0.7;
}

/* Links - unterschiedlich für Banner und Modal */
.klaro .cookie-modal a {
    color: #c9f7a5 !important;       /* Helles Grün im dunklen Modal */
    text-decoration: underline;
}

.klaro .cookie-modal a:hover {
    color: #ffffff !important;
}

/* Footer im Modal */
.klaro .cookie-modal .cm-footer {
    background: #2d5016 !important;  /* Dunkles Grün */
    border-top-color: #000000 !important;
}

.klaro .cookie-modal .cm-footer .cm-powered-by {
    color: #ffffff !important;       /* Weißer Text */
}

/* Powered by Klaro Link */
.klaro .cookie-notice .cn-body .cm-link,
.klaro .cookie-modal-notice .cn-body .cm-link {
    color: #c9f7a5 !important;       /* Helles Grün im dunklen Banner */
    opacity: 0.8;
    font-size: 0.75rem;
}

.klaro .cookie-modal .cm-footer .cm-link {
    color: #ffffff !important;       /* Weiß im dunklen Modal */
    opacity: 0.6;
    font-size: 0.75rem;
}

/* Toggle Switch Animation */
.klaro .cookie-modal .cm-list-label .slider {
    transition: all 0.3s ease;
}

/* Responsiveness */
@media (max-width: 640px) {
    .klaro .cookie-notice {
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        border-radius: 0 !important;
        border-left: none !important;
        border-right: none !important;
        border-bottom: none !important;
    }

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

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

/* Accessibility: Focus Styles */
.klaro button:focus,
.klaro .cm-btn:focus,
.klaro a:focus {
    outline: 2px solid #000000 !important;
    outline-offset: 2px !important;
}