/* Klaro Custom Styling */

/* Banner unten positionieren, kompakter und kleiner */
.klaro .cookie-notice:not(.cookie-modal-notice) {
    bottom: 0 !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%);
    max-width: 450px !important;
    max-height: 300px !important;
    overflow-y: auto !important;
    font-size: 0.875rem !important; /* 14px */
    padding: 1rem !important;
}

/* Kleinere Schriftgröße für alle Texte im Banner */
.klaro .cookie-notice .cn-body {
    font-size: 0.875rem !important;
}

/* Buttons kompakter */
.klaro .cm-btn {
    padding: 0.5rem 1rem !important;
    font-size: 0.875rem !important;
}

/* Alle Buttons gleiches Grau */
.klaro .cm-btn.cm-btn-info,
.klaro .cm-btn.cm-btn-decline {
    background-color: #6b7280 !important; /* Tailwind gray-500 */
}

.klaro .cm-btn.cm-btn-info:hover,
.klaro .cm-btn.cm-btn-decline:hover {
    background-color: #4b5563 !important; /* Tailwind gray-600 */
}

/* Mobile: Banner volle Breite unten */
@media (max-width: 1023px) {
    .klaro .cookie-notice:not(.cookie-modal-notice) {
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        transform: none;
        max-width: 100% !important;
        border-radius: 0 !important;
    }
}