/* =============================================================================
 * fiveandfriends Klaro Base-Theme
 * =============================================================================
 *
 * Kompletter Theme-Override für Klaro-Lib via CSS-Custom-Properties.
 * Brand-Variables werden vom Bootstrap-JS inline in :root injiziert (aus den
 * TYPO3 Site-Settings). Diese Datei definiert das Layout und greift auf die
 * Brand-Variables zu — Kunden überschreiben nie diese Datei, nur die Settings.
 *
 * Fallback-Werte (für den Fall dass Brand-Settings fehlen):
 * ===========================================================================*/
:root {
    --klaro-notice-bg: #1a1a1a;
    --klaro-notice-text: #ffffff;
    --klaro-accent: #0066cc;
    --klaro-accent-hover: #0080ff;
    --klaro-font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
}

/* --- Font-Override für alle Klaro-Elemente --- */
#klaro,
#klaro * {
    font-family: var(--klaro-font-family) !important;
    box-sizing: border-box;
}

/* =============================================================================
 * Floating Notice (Erstbesuch — unten links)
 * ===========================================================================*/
.klaro .cookie-notice:not(.cookie-modal-notice) {
    position: fixed !important;
    left: 24px !important;
    bottom: 24px !important;
    right: auto !important;
    top: auto !important;
    max-width: 440px !important;
    background: var(--klaro-notice-bg) !important;
    color: var(--klaro-notice-text) !important;
    border-radius: 4px !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35) !important;
    padding: 24px !important;
    z-index: 999999 !important;
    border-top: 3px solid var(--klaro-accent) !important;
}

@media (max-width: 640px) {
    .klaro .cookie-notice:not(.cookie-modal-notice) {
        left: 12px !important;
        right: 12px !important;
        bottom: 12px !important;
        max-width: none !important;
        padding: 20px !important;
    }
}

.klaro .cookie-notice .cn-body {
    padding: 0 !important;
    margin: 0 !important;
}

.klaro .cookie-notice .cn-body h1 {
    font-size: 16px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 1.2px !important;
    color: var(--klaro-accent) !important;
    margin: 0 0 10px !important;
    padding: 0 !important;
}

.klaro .cookie-notice .cn-body p,
.klaro .cookie-notice .cn-body p strong {
    font-size: 14px !important;
    line-height: 1.55 !important;
    color: var(--klaro-notice-text) !important;
    opacity: 0.92 !important;
    margin: 0 0 16px !important;
}

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

.klaro .cookie-notice .cn-buttons {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    margin-top: 4px !important;
}

/* =============================================================================
 * Buttons (Notice + Modal)
 * ===========================================================================*/
.klaro .cn-buttons button,
.klaro .cookie-modal button,
.klaro .cm-btn,
.klaro button {
    font-family: var(--klaro-font-family) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 1.5px !important;
    padding: 12px 22px !important;
    border-radius: 2px !important;
    border: 1px solid transparent !important;
    cursor: pointer !important;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease !important;
    line-height: 1.2 !important;
    min-height: 44px !important;
}

.klaro .cm-btn-success,
.klaro .cm-btn-success-var,
.klaro .cn-ok .cm-btn-success,
.klaro button.cm-btn-accept-all {
    background: var(--klaro-accent) !important;
    color: var(--klaro-notice-text) !important;
    border-color: var(--klaro-accent) !important;
}

.klaro .cm-btn-success:hover,
.klaro button.cm-btn-accept-all:hover {
    background: var(--klaro-accent-hover) !important;
    border-color: var(--klaro-accent-hover) !important;
}

.klaro .cm-btn-info,
.klaro .cm-btn-decline,
.klaro button.cm-btn-decline,
.klaro button.cm-btn-accept {
    background: transparent !important;
    color: var(--klaro-notice-text) !important;
    border-color: rgba(255, 255, 255, 0.5) !important;
}

.klaro .cm-btn-info:hover,
.klaro button.cm-btn-decline:hover,
.klaro button.cm-btn-accept:hover {
    border-color: var(--klaro-accent) !important;
    color: var(--klaro-accent-hover) !important;
}

/* =============================================================================
 * Modal (Detail-Auswahl)
 * ===========================================================================*/
.klaro .cookie-modal .cm-modal.cm-klaro {
    background: var(--klaro-notice-bg) !important;
    color: var(--klaro-notice-text) !important;
    border-radius: 4px !important;
    border-top: 3px solid var(--klaro-accent) !important;
}

.klaro .cookie-modal .cm-bg {
    background: rgba(0, 0, 0, 0.65) !important;
}

.klaro .cookie-modal .cm-header h1,
.klaro .cookie-modal h2 {
    color: var(--klaro-notice-text) !important;
    font-weight: 600 !important;
}

.klaro .cookie-modal .cm-header h1 {
    text-transform: uppercase !important;
    letter-spacing: 1.2px !important;
    font-size: 18px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important;
    padding-bottom: 16px !important;
}

.klaro .cookie-modal .cm-body p,
.klaro .cookie-modal .cm-body li {
    color: var(--klaro-notice-text) !important;
    opacity: 0.92 !important;
    font-size: 14px !important;
    line-height: 1.55 !important;
}

.klaro .cookie-modal .cm-body p a {
    color: var(--klaro-accent-hover) !important;
}

.klaro .cookie-modal .cm-services .cm-service {
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
    padding: 16px 0 !important;
}

/* --- Switch (Toggle für Services) --- */
.klaro .cm-list-input + .cm-list-label .slider {
    background-color: rgba(255, 255, 255, 0.25) !important;
}

.klaro .cm-list-input:checked + .cm-list-label .slider {
    background-color: var(--klaro-accent) !important;
}

.klaro .cm-list-input + .cm-list-label .slider::before {
    background-color: var(--klaro-notice-text) !important;
}

/* =============================================================================
 * Service-Liste (im Modal pro Vendor)
 * ===========================================================================*/
.klaro .cm-services .cm-service .cm-list-title {
    color: var(--klaro-notice-text) !important;
    font-weight: 600 !important;
    font-size: 14px !important;
}

.klaro .cm-services .cm-service .cm-list-description {
    color: var(--klaro-notice-text) !important;
    opacity: 0.7 !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
}

.klaro .cm-services .cm-service .cm-purposes,
.klaro .cm-services .cm-service .cm-purpose {
    color: var(--klaro-notice-text) !important;
    opacity: 0.55 !important;
    font-size: 12px !important;
}

/* =============================================================================
 * Powered-By blenden (auch wenn disablePoweredBy true)
 * ===========================================================================*/
.klaro .cookie-modal .cm-powered-by,
.klaro .cookie-notice .cn-powered-by {
    display: none !important;
}