/* Hauptoverlay */
.klaro .cookie-modal {
    background: rgba(0, 0, 0, 0.7) !important;
}

/* Das eigentliche Cookie-Banner-Element */
.klaro .cookie-modal .cm-modal {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    max-width: 500px !important;
    width: 95% !important;
    max-height: 90vh !important;
    background-color: white !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2) !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Verbesserte Textlesbarkeit für ALLE Textelemente im Modal */
.klaro .cookie-modal .cm-modal *,
.klaro .cookie-modal .cm-modal p,
.klaro .cookie-modal .cm-modal span,
.klaro .cookie-modal .cm-modal h1,
.klaro .cookie-modal .cm-modal h2,
.klaro .cookie-modal .cm-modal label,
.klaro .cookie-modal .cm-modal div {
    color: #333 !important;
    font-family: Arial, sans-serif !important;
    line-height: 1.5 !important;
}

/* Überschriften besonders hervorheben */
.klaro .cookie-modal .cm-modal h1,
.klaro .cookie-modal .cm-modal .cm-title {
    font-size: 1.5rem !important;
    font-weight: bold !important;
    color: #000 !important;
    margin-bottom: 1rem !important;
}

/* Layout-Verbesserungen */
.klaro .cookie-modal .cm-header {
    padding: 1.5rem 1.5rem 1rem 1.5rem !important;
    border-bottom: 1px solid #e9ecef !important;
    background-color: white !important;
}

.klaro .cookie-modal .cm-body {
    padding: 1.5rem !important;
    background-color: white !important;
}

.klaro .cookie-modal .cm-footer {
    padding: 1rem 1.5rem 1.5rem 1.5rem !important;
    border-top: 1px solid #e9ecef !important;
    background-color: white !important;
}

/* Service-Beschreibungen lesbar machen */
.klaro .cookie-modal .cm-service-description,
.klaro .cookie-modal .cm-service-title {
    color: #333 !important;
    font-size: 0.9rem !important;
}

/* Checkboxen und Labels */
.klaro .cookie-modal .cm-service-item label {
    color: #333 !important;
    font-weight: bold !important;
}

/* Verbesserte Button-Lesbarkeit */
.klaro .cookie-modal .cm-btn {
    color: white !important;
    border: none !important;
    padding: 0.5rem 1rem !important;
    border-radius: 4px !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    cursor: pointer !important;
    text-shadow: none !important;
}

/* Spezifische Button-Styles mit besserer Lesbarkeit */
.klaro .cookie-modal .cm-btn.cm-btn-success,
.klaro .cookie-modal button[data-id="essenzielle"] {
    background-color: #28a745 !important;
    color: white !important;
}

.klaro .cookie-modal .cm-btn.cm-btn-accept,
.klaro .cookie-modal button[data-id="alle"] {
    background-color: #007bff !important;
    color: white !important;
}

.klaro .cookie-modal .cm-btn.cm-btn-decline,
.klaro .cookie-modal button[data-id="auswahl"] {
    background-color: #6c757d !important;
    color: white !important;
}

/* Bessere Lesbarkeit des Klaro-Hinweises */
.klaro .cookie-modal .cm-powered-by,
.klaro .cookie-modal .cm-powered-by a {
    font-size: 0.8rem !important;
    color: #777 !important;
}