/* StyleJet Klaro Theme - Updated */
:root {
    --primary-purple: #92007B;
    --primary-magenta: #C50097;
    --primary-green: #83BC00;
    --bg-body: #3A0046;
    --text-main: #111827;
    --radius-lg: 24px;
    --radius-md: 16px;
    
    /* Klaro Variablen-Override (Global = Modal) */
    /* Aktive Schalter sollen IMMER Grün sein (im Modal und überall) */
    --green1: var(--primary-green); /* #83BC00 */
    --green2: #9acd32; /* Hover/Required */
    --green3: #9acd32; /* Focus */
}

/* Lokal für die Cookie-Notice Box wieder auf Grün zurücksetzen */
.klaro .cookie-notice .cn-body {
    --green1: var(--primary-green); /* Schalter an = Grün */
    --green2: #9acd32; /* Hover */
    --green3: #9acd32; /* Focus */
}

/* 
   1. & 2. Positionierung & Text
   Notice jetzt als Vollbild-Overlay (fixed, inset 0) 
*/
.klaro .cookie-notice {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    
    /* Hintergrund Dimmer + Blur */
    background: rgba(0, 0, 0, 0.4) !important;
    backdrop-filter: blur(4px) !important;
    
    /* Flexbox zum Zentrieren der Box */
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    
    z-index: 9999 !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 1rem !important; /* Etwas Abstand zum Rand auf Mobile */
    transform: none !important; /* Kein Transform auf dem Wrapper */
}

/* Das eigentliche Fenster (cn-body missbrauchen wir als Box-Wrapper, oder wir stylen es direkt) */
.klaro .cookie-notice .cn-body {
    /* Die Lila Box */
    background: rgba(84, 0, 81, 0.9) !important; /* #540051 mit 10% Transparenz */
    backdrop-filter: blur(10px) !important; /* Header Blur */
    border: 1px solid rgba(255, 255, 255, 0.3) !important; /* Dezente weiße Linie */
    border-radius: var(--radius-lg) !important;
    box-shadow: 
        0 25px 50px -12px rgba(0, 0, 0, 0.5),
        inset 0 1px 2px rgba(255, 255, 255, 0.1) !important; /* Abgeflachter Effekt mit innerem Schatten */
    
    /* Größe & Layout */
    width: 100% !important;
    max-width: 600px !important;
    padding: 2rem !important;
    margin: 0 !important; /* Reset Margin */
    
    /* Text */
    color: #FFFFFF !important;
    text-align: left !important;
    
    position: relative !important; /* Damit z-index funktioniert */
}

/* Aktive Schalter in .cn-body auf Grün setzen (Korrektur Selektoren) */
.klaro .cookie-notice .cn-body .cm-list-input:checked + .cm-list-label .slider {
    background-color: #83BC00 !important;
}

.klaro .cookie-notice .cn-body .cm-list-input:focus + .cm-list-label .slider {
    box-shadow: 0 0 1px #83BC00 !important;
}

/* Overlay entfernen, da Wrapper es macht */
.klaro .cookie-notice::before {
    display: none !important;
}

.klaro .cookie-notice p {
    font-size: 1.1rem !important;
    line-height: 1.6 !important;
    color: #FFFFFF !important;
    font-weight: 500 !important;
}

/* Zwecke-Liste grün und umgebrochen */
.klaro .cookie-notice .cn-purposes {
    margin-bottom: 1rem !important;
    text-align: left !important; /* Text bleibt linksbündig */
}

/* Logo im cn-purposes Bereich - mittig und weiß */
.klaro .cookie-notice .cn-purposes .cn-logo {
    display: block !important;
    margin: 0 auto 1.5rem auto !important;
    max-width: 180px !important; /* 20% größer (150px * 1.2 = 180px) */
    width: auto !important;
    height: auto !important;
    filter: brightness(0) invert(1) !important; /* Logo weiß machen */
}

.klaro .cookie-notice .cn-purposes-list {
    color: var(--primary-green) !important;
    font-weight: 600 !important;
    display: block !important;
    margin-top: 0.5rem !important;
    line-height: 1.8 !important;
    word-break: break-word !important;
    white-space: normal !important;
}

/* Kommas in der Zwecke-Liste durch Zeilenumbrüche ersetzen (visuell) */
.klaro .cookie-notice .cn-purposes-list::before {
    content: '';
}

/* Zwecke mit Kommas umbrechen */
.klaro .cookie-notice .cn-purposes-list {
    display: inline-block !important;
    max-width: 100% !important;
}

/* Legal Text kleiner und weiß */
.klaro .cookie-notice .cn-legal-text {
    font-size: 0.85rem !important;
    line-height: 1.5 !important;
    color: #FFFFFF !important; /* Weißer Text */
    margin-top: 1rem !important;
    text-align: left !important;
}

.klaro .cookie-notice .cn-legal-text a {
    color: #83BC00 !important; /* Grüner Link */
    text-decoration: underline !important;
}

/* 
   3. Buttons
   "Einstellungen anpassen" als echter Button
*/
.klaro .cm-btn {
    border-radius: 999px !important;
    font-weight: 600 !important;
    padding: 0.8rem 1.5rem !important;
    font-size: 1rem !important;
    margin: 0.5rem !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    text-decoration: none !important;
    display: inline-block !important;
}

/* Footer-Buttons: Margin überschreiben für korrekte Ausrichtung */
.klaro .cookie-modal .cm-modal .cm-footer-buttons .cm-btn {
    margin: 0 !important; /* Kein Margin auf Footer-Buttons */
}

/* Buttons Container */
.klaro .cookie-notice .cn-buttons {
    display: flex !important;
    flex-direction: row !important;
    gap: 0.75rem !important;
    align-items: center !important;
}

/* Primary (Ok) - rechts ausgerichtet */
.klaro .cookie-notice .cm-btn.cm-btn-success,
.klaro .cookie-notice .cm-btn.cm-btn-accept-all {
    background-color: var(--primary-green) !important;
    border: 2px solid var(--primary-green) !important;
    color: white !important;
    box-shadow: 0 4px 15px rgba(131, 188, 0, 0.3) !important;
    margin: 0 !important;
}

.klaro .cookie-notice .cm-btn.cm-btn-success:hover, 
.klaro .cookie-notice .cm-btn.cm-btn-accept-all:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(131, 188, 0, 0.4) !important;
}

/* Buttons im Modal behalten ihren Stil */
.klaro .cookie-modal .cm-btn.cm-btn-success,
.klaro .cookie-modal .cm-btn.cm-btn-accept-all {
    background-color: var(--primary-green) !important;
    border: 2px solid var(--primary-green) !important;
    color: white !important;
    box-shadow: 0 4px 15px rgba(131, 188, 0, 0.3) !important;
}

/* Hover-Animation nur für grüne Buttons in Modal (wie in cn-body) */
.klaro .cookie-modal .cm-btn.cm-btn-success:hover,
.klaro .cookie-modal .cm-btn.cm-btn-accept-all:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 20px rgba(131, 188, 0, 0.4) !important;
}

/* Container für Einstellungen-Link und Buttons - horizontal ausgerichtet */
.klaro .cookie-notice .cn-ok {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    margin-top: 1rem !important;
    gap: 1rem !important;
}

/* Secondary (Einstellungen) - auf gleicher Höhe wie Buttons, fett, grün */
.klaro .cookie-notice .cm-btn.cm-btn-learn-more,
.klaro .cookie-notice .cm-btn.cm-btn-info,
.klaro .cookie-notice .cm-link.cn-learn-more {
    background-color: transparent !important;
    border: none !important;
    color: var(--primary-green) !important; /* #83BC00 */
    font-weight: 700 !important;
    text-align: left !important;
    padding: 0 !important;
    margin: 0 !important;
    align-self: center !important; /* Vertikal zentriert mit Buttons */
    text-decoration: underline !important;
    display: inline-block !important;
}

.klaro .cookie-notice .cm-btn.cm-btn-learn-more:hover,
.klaro .cookie-notice .cm-btn.cm-btn-info:hover,
.klaro .cookie-notice .cm-link.cn-learn-more:hover {
    color: #72a300 !important;
    text-decoration: underline !important;
}

/* Buttons im Modal behalten ihren Stil */
.klaro .cookie-modal .cm-btn.cm-btn-learn-more,
.klaro .cookie-modal .cm-btn.cm-btn-info {
    background-color: transparent !important;
    border: 2px solid rgba(255, 255, 255, 0.3) !important;
    color: white !important;
    text-align: center !important;
}

/* 
   4. & 5. Modal Styling
   Hintergrund transparent/blur, Text weiß
*/

/* Hintergrund dimmen - exakt wie beim Cookie-Notice */
.klaro .cookie-modal .cm-bg {
    background: rgba(0, 0, 0, 0.4) !important; /* Gleiche Transparenz wie Cookie-Notice */
    backdrop-filter: blur(4px) !important; /* Gleicher Blur-Effekt */
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
}

/* Modal Container - volle Breite/Höhe für Overlay */
.klaro .cookie-modal {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 1000 !important;
}

/* Modal Fenster selbst - gleicher Hintergrund wie Cookie-Notice */
.klaro .cookie-modal .cm-modal.cm-klaro {
    background: rgba(84, 0, 81, 0.9) !important; /* #540051 mit 10% Transparenz */
    backdrop-filter: blur(10px) !important; /* Header Blur */
    border: 1px solid rgba(255, 255, 255, 0.3) !important; /* Dezente weiße Linie */
    border-radius: var(--radius-lg) !important; /* Gleiche abgerundete Kanten */
    color: white !important;
    box-shadow: 
        0 25px 50px -12px rgba(0, 0, 0, 0.5),
        inset 0 1px 2px rgba(255, 255, 255, 0.1) !important; /* Abgeflachter Effekt mit innerem Schatten */
    /* Exakt gleiche Positionierung wie Cookie-Notice */
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    position: fixed !important;
    width: 90% !important;
    max-width: 600px !important;
    margin: 0 !important;
    z-index: 1001 !important;
}

/* Media Query für größere Bildschirme überschreiben */
@media (min-width: 660px) {
    .klaro .cookie-modal .cm-modal.cm-klaro {
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        position: fixed !important;
        margin: 0 !important;
        max-width: 600px !important;
        width: 90% !important;
    }
}

/* Modal Header & Text */
.klaro .cm-modal .cm-header {
    color: white !important; /* Alle Texte im Header weiß */
}

.klaro .cm-modal .cm-header h1 {
    color: white !important; /* Headline weiß */
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* Description-Text im Header explizit weiß */
.klaro .cm-modal .cm-header p,
.klaro .cm-modal .cm-header div,
.klaro .cm-modal .cm-header span {
    color: white !important;
}

/* Links im Header grün */
.klaro .cm-modal .cm-header a {
    color: #83BC00 !important; /* Grüner Link */
    text-decoration: underline !important;
}

.klaro .cm-modal .cm-footer {
    background: transparent !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* Footer Padding: Gleiches Padding wie cm-body für korrekte Ausrichtung */
.klaro .cookie-modal .cm-modal .cm-footer {
    padding: 1em !important; /* Gleiches Padding wie cm-body (1em) */
    box-sizing: border-box !important; /* Padding in Breite einrechnen */
}

/* Listen-Elemente im Modal */
.klaro .cm-list-label {
    color: white !important;
}

.klaro .cm-list-description {
    color: rgba(255, 255, 255, 0.7) !important;
}

/* Links im Modal */
.klaro .cookie-modal a {
    color: var(--primary-green) !important;
}

/* Toggles/Switches - Korrekte Selektoren für Klaro Struktur */
.klaro .cm-list-input:checked + .cm-list-label .slider {
    background-color: var(--primary-green) !important; /* GRÜN für alle aktiven Schalter */
}

.klaro .cm-list-input:focus + .cm-list-label .slider {
    box-shadow: 0 0 1px var(--primary-green) !important;
}

/* Weißer Kreis in Switches auf Lila ändern (Hintergrundfarbe von cn-body/cm-modal) */
.klaro .cookie-notice .cm-list-label .slider::before,
.klaro .cookie-modal .cm-list-label .slider::before {
    background-color: #540051 !important; /* Lila wie Hintergrund */
}

/* Active State für Services - Titel weiß wenn aktiv */
.klaro .cm-list-input:checked + .cm-list-label .cm-list-title {
    color: white !important;
}

/* Purposes-Text (p.purposes) grün */
.klaro .cookie-modal .cm-modal .cm-body p.purposes {
    color: #83BC00 !important;
}

/* Required-Service Badge grün */
.klaro .cookie-modal .cm-modal .cm-body ul.cm-services li.cm-service span.cm-required,
.klaro .cookie-modal .cm-modal .cm-body ul.cm-services li.cm-purpose span.cm-required,
.klaro .cookie-modal .cm-modal .cm-body ul.cm-purposes li.cm-service span.cm-required,
.klaro .cookie-modal .cm-modal .cm-body ul.cm-purposes li.cm-purpose span.cm-required {
    color: #83BC00 !important; /* Grün für Required-Badge */
}

/* Schließen-Button (X-Symbol) weiß */
.klaro .cookie-modal .cm-modal .hide svg {
    stroke: white !important;
}

/* Button-Texte im Modal weiß */
.klaro .cookie-modal .cm-btn {
    color: white !important;
}

/* "Realisiert mit Klaro!" Text ausblenden */
.klaro .cookie-modal .cm-modal .cm-footer .cm-powered-by {
    display: none !important;
}

/* Footer-Buttons: Ausgerichtet mit cm-body (Switches), gleicher Abstand links/rechts */
.klaro .cookie-modal .cm-modal .cm-footer-buttons {
    display: flex !important;
    flex-flow: row wrap !important; /* Umbrechen wenn nötig */
    justify-content: space-between !important; /* Linksbündig bis rechtsbündig */
    gap: 0.75rem !important; /* Gleicher Gap wie cn-buttons */
    align-items: center !important;
    margin: 0 !important; /* Kein zusätzlicher Margin */
    padding: 0 !important; /* Padding wird vom Parent (cm-footer) gehandhabt */
    width: 100% !important; /* Volle Breite nutzen */
}

.klaro .cookie-modal .cm-modal .cm-footer-buttons .cm-btn {
    padding: 0.8rem 1.5rem !important; /* Gleiche Höhe wie cn-buttons */
    flex: 1 1 0 !important; /* Alle gleich groß */
    min-width: 0 !important;
    text-align: center !important;
    margin: 0 !important; /* Kein Margin - wird bereits oben überschrieben, aber zur Sicherheit */
    box-sizing: border-box !important;
    display: flex !important; /* Flexbox für vertikale Zentrierung */
    align-items: center !important; /* Text vertikal zentrieren */
    justify-content: center !important; /* Text horizontal zentrieren */
    line-height: 1.3 !important; /* Kompaktere Zeilenhöhe für mehrzeiligen Text */
    white-space: normal !important; /* Erlaubt Zeilenumbruch */
    word-wrap: break-word !important; /* Erlaubt Wortumbruch */
}

/* Spezifische Regel für beide Buttons, um sicherzustellen, dass sie gleich hoch sind */
.klaro .cookie-modal .cm-modal .cm-footer-buttons .cm-btn-accept,
.klaro .cookie-modal .cm-modal .cm-footer-buttons .cm-btn-accept-all {
    min-height: 3.6rem !important; /* Feste Mindesthöhe - hoch genug für zweizeiligen Text */
    height: 3.6rem !important; /* Feste Höhe, damit beide immer gleich hoch sind */
    align-items: center !important; /* Text vertikal zentrieren */
}

/* Mobile: Alle 3 Buttons zentriert */
@media (max-width: 768px) {
    .klaro .cookie-modal .cm-modal .cm-footer-buttons {
        flex-direction: column !important;
        align-items: center !important; /* Zentriert */
        justify-content: center !important;
    }
    
    .klaro .cookie-modal .cm-modal .cm-footer-buttons .cm-btn {
        width: 100% !important; /* Volle Breite auf Mobile */
        flex: none !important;
    }
    
    /* "Alle akzeptieren" Button nach unten verschieben */
    .klaro .cookie-modal .cm-modal .cm-footer-buttons .cm-btn-accept-all {
        order: 3 !important; /* Als letztes */
    }
    
    .klaro .cookie-modal .cm-modal .cm-footer-buttons .cm-btn-decline {
        order: 1 !important;
    }
    
    .klaro .cookie-modal .cm-modal .cm-footer-buttons .cm-btn-accept {
        order: 2 !important;
    }
}

/* Pfeile (cm-caret) bleiben grün */
.klaro .cookie-modal .cm-modal .cm-body .cm-caret {
    color: #83BC00 !important;
}