/*
 * ===================================================================
 * Angepasste Klaro CSS mit Ihren Theme-Farben
 * Version 5: Korrektur für Fettschrift im Banner
 * ===================================================================
 */

:root {
    /* Ihre Theme-Farben als CSS-Variablen für Klaro */
    --theme-main-bg: #2b5580;      /* .w3-theme */
    --theme-main-fg: #ffffff;      /* .w3-theme */
    --theme-action-bg: #154473;    /* .w3-theme-action & .w3-theme-d5 */
    --theme-action-fg: #ffffff;    /* .w3-theme-action & .w3-theme-d5 */
    --theme-action-hover: #557799; /* .w3-hover-theme */
    --theme-light-bg: #eaeef2;     /* .w3-theme-l5 */
    --theme-light-fg: #003366;     /* .w3-theme-l5 (wichtig für Text!) */
    --theme-border: #aabbcc;       /* .w3-theme-l2 (als Border-Alternative) */
    --theme-grey-bg: #95aabf;      /* .w3-theme-l1 (für Buttons wie "Ablehnen") */
    --theme-grey-fg: #ffffff;      /* .w3-theme-l1 */

    /* Original Klaro Variablen überschreiben */
    --font-family: inherit;
    --font-size: 14px;
    --border-radius: 4px;
    --border-width: 1px;
    --border-style: solid;
    --button-text-color: var(--theme-action-fg);
}

/* --- Globale Textfarben für Lesbarkeit --- */
.klaro {
    font-family: var(--font-family, inherit);
    font-size: var(--font-size, 14px);
}

.klaro .cookie-modal .cm-modal .cm-body,
.klaro .cookie-modal .cm-modal .cm-body p,
.klaro .cookie-modal .cm-modal .cm-body div,
.klaro .cookie-modal .cm-modal .cm-body strong,
.klaro .cookie-modal .cm-modal .cm-body li {
    color: var(--theme-light-fg) !important;
}

/* Globale Link-Farbe für helle Hintergründe */
.klaro a {
    color: var(--theme-action-bg) !important;
    text-decoration: underline;
}
.klaro a:hover {
    color: var(--theme-action-hover) !important;
}

/* --- Cookie-Banner (Notice) --- */
.klaro .cookie-notice:not(.cookie-modal-notice) {
    background-color: var(--theme-light-bg) !important;
    border-top: 2px solid var(--theme-main-bg) !important;
}
.klaro .cookie-notice .cn-body p {
    color: var(--theme-light-fg) !important;
}
/* NEU: KORREKTUR für Fettschrift im Banner */
.klaro .cookie-notice .cn-body strong {
    color: var(--theme-light-fg) !important;
}


/* --- Modal-Fenster --- */
.klaro .cookie-modal .cm-modal.cm-klaro {
    background-color: var(--theme-light-bg) !important;
}

/* --- Modal Header --- */
.klaro .cookie-modal .cm-modal .cm-header {
    background-color: var(--theme-main-bg) !important;
    border-bottom-color: var(--theme-border) !important;
}
.klaro .cookie-modal .cm-modal .cm-header h1,
.klaro .cookie-modal .cm-modal .cm-header p,
.klaro .cookie-modal .cm-modal .cm-header div {
    color: var(--theme-main-fg) !important;
}
.klaro .cookie-modal .cm-modal .hide svg {
    stroke: var(--theme-main-fg) !important;
}
.klaro .cookie-modal .cm-modal .cm-header a {
    color: #d4dde6 !important;
    text-decoration: underline !important;
}
.klaro .cookie-modal .cm-modal .cm-header a:hover {
    color: #ffffff !important;
}


/* --- Service-Liste Texte anpassen --- */
.klaro .cm-list-title {
    color: var(--theme-main-bg) !important;
    font-weight: 600;
}
.klaro .cm-list-description,
.klaro .cookie-modal .cm-modal .cm-body ul.cm-services li.cm-service p.purposes {
    color: var(--theme-light-fg) !important;
    opacity: 0.85;
}
.klaro .cm-service .cm-opt-out,
.klaro .cm-service .cm-required {
    color: var(--theme-light-fg) !important;
    opacity: 0.7;
}

/* --- Modal Footer --- */
.klaro .cookie-modal .cm-modal .cm-footer {
    background-color: #fff;
    border-top: 1px solid #d4dde6 !important;
}
.klaro .cookie-modal .cm-modal .cm-footer .cm-powered-by a {
    color: var(--theme-grey-bg) !important;
}

/* --- Buttons --- */
.klaro .cm-btn {
    color: var(--button-text-color) !important;
    background-color: var(--theme-grey-bg) !important;
    border-radius: var(--border-radius, 4px) !important;
    border-style: none !important;
    text-transform: uppercase;
    padding: 10px 15px !important;
    cursor: pointer;
}
.klaro .cm-btn:hover {
    filter: brightness(110%);
}
.klaro .cm-btn-success {
    background-color: var(--theme-action-bg) !important;
}
.klaro .cm-btn-success:hover {
    background-color: var(--theme-action-hover) !important;
}

/* --- Schalter (Toggle Switches) --- */
.klaro .cm-switch-container {
   border-bottom: 1px solid #d4dde6 !important;
}
.klaro .cm-list-label .slider {
    background-color: var(--theme-grey-bg) !important;
}
.klaro .cm-list-label .slider::before {
    background-color: var(--theme-main-fg) !important;
}
.klaro .cm-list-input:checked + .cm-list-label .slider {
    background-color: var(--theme-action-bg) !important;
}
.klaro .cm-list-input.required:checked + .cm-list-label .slider {
    background-color: var(--theme-border) !important;
    opacity: 0.8;
    cursor: not-allowed;
}