/**
 * Rittec Cookie Consent – Banner Stylesheet
 *
 * Anpassung: Alle anpassbaren Werte stehen im Bereich ":root – CSS-Variablen".
 * Primärfarbe, Schriftarten, Abstände und Animationsgeschwindigkeiten
 * können dort zentral geändert werden.
 *
 * Plugin:  Rittec Cookie Consent
 * Version: 1.0.0
 * =========================================================
 */

/* =========================================================
   1. CSS-VARIABLEN (Hier anpassen)
   ========================================================= */

:root {
    /* --- Primärfarben --- */
    --rcc-primary:          #f39200;   /* Hauptfarbe (Buttons, Toggles, Akzente) */
    --rcc-primary-hover:    #d97d00;   /* Hover-Zustand der Primärfarbe */
    --rcc-primary-light:    #fff7ed;   /* Heller Hintergrund (Notwendig-Badge) */

    /* --- Banner-Hintergrund --- */
    --rcc-bg:               #ffffff;   /* Hintergrundfarbe des Banners */
    --rcc-bg-secondary:     #f8fafc;   /* Hintergrundfarbe der Kategorie-Panels */
    --rcc-bg-header:        #1e293b;   /* Hintergrundfarbe der Banner-Kopfzeile */

    /* --- Text --- */
    --rcc-text-primary:     #0f172a;   /* Haupttext */
    --rcc-text-secondary:   #475569;   /* Beschreibungstext / Labels */
    --rcc-text-light:       #94a3b8;   /* Dezenter Text (Laufzeit, Anbieter) */
    --rcc-text-on-dark:     #f1f5f9;   /* Text auf dunklen Hintergründen */

    /* --- Rahmen / Trennlinien --- */
    --rcc-border:           #e2e8f0;   /* Standard-Rahmenfarbe */
    --rcc-border-radius:    12px;      /* Eckenrundung des Banners */
    --rcc-border-radius-sm: 6px;       /* Kleine Eckenrundung (Badges, Inputs) */
    --rcc-border-radius-lg: 16px;      /* Große Eckenrundung (Modal-Overlay) */

    /* --- Buttons --- */
    --rcc-btn-accept-bg:    #f39200;   /* Hintergrund "Alle akzeptieren" */
    --rcc-btn-accept-text:  #ffffff;
    --rcc-btn-reject-bg:    #f1f5f9;   /* Hintergrund "Ablehnen" */
    --rcc-btn-reject-text:  #334155;
    --rcc-btn-save-bg:      #0f172a;   /* Hintergrund "Einstellungen speichern" */
    --rcc-btn-save-text:    #ffffff;
    --rcc-btn-border-radius: 8px;
    --rcc-btn-padding:      12px 24px;

    /* --- Toggle-Switch --- */
    --rcc-toggle-on:        #f39200;   /* Farbe wenn Toggle aktiviert */
    --rcc-toggle-off:       #cbd5e1;   /* Farbe wenn Toggle deaktiviert */
    --rcc-toggle-disabled:  #e2e8f0;   /* Farbe wenn Toggle gesperrt (Notwendig) */
    --rcc-toggle-knob:      #ffffff;   /* Farbe des Toggle-Knopfes */
    --rcc-toggle-width:     48px;
    --rcc-toggle-height:    26px;

    /* --- Overlay (Hintergrund-Verdunklung) --- */
    --rcc-overlay-color:    rgba(0, 0, 0, 0.55);
    --rcc-overlay-blur:     4px;       /* Hintergrund-Blur (0px = kein Blur) */

    /* --- Schatten --- */
    --rcc-shadow:           0 20px 60px rgba(0, 0, 0, 0.15), 0 4px 16px rgba(0, 0, 0, 0.08);
    --rcc-shadow-sm:        0 2px 8px rgba(0, 0, 0, 0.06);

    /* --- Schrift --- */
    --rcc-font-family:      -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
                            'Helvetica Neue', Arial, sans-serif;
    --rcc-font-size-base:   15px;
    --rcc-font-size-sm:     13px;
    --rcc-font-size-xs:     11px;
    --rcc-font-size-lg:     17px;
    --rcc-font-size-xl:     20px;
    --rcc-line-height:      1.6;

    /* --- Abstände --- */
    --rcc-spacing-xs:       6px;
    --rcc-spacing-sm:       12px;
    --rcc-spacing-md:       20px;
    --rcc-spacing-lg:       28px;
    --rcc-spacing-xl:       36px;

    /* --- Animation --- */
    --rcc-transition:       0.25s ease;
    --rcc-animation-in:     rcc-slide-up 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) both;
    --rcc-animation-fade:   rcc-fade-in 0.25s ease both;

    /* --- Z-Index (über Uncode-Elementen) --- */
    --rcc-z-overlay:        99998;
    --rcc-z-banner:         99999;

    /* --- Banner-Breite (bei Modal-Position) --- */
    --rcc-max-width:        620px;
}


/* =========================================================
   2. CSS-RESET FÜR DEN BANNER-CONTAINER
   (Verhindert Konflikte mit dem Uncode-Theme)
   ========================================================= */

#rcc-banner,
#rcc-banner *,
#rcc-banner *::before,
#rcc-banner *::after,
#rcc-overlay {
    box-sizing:         border-box;
    margin:             0;
    padding:            0;
    border:             none;
    outline:            none;
    font-family:        var(--rcc-font-family);
    font-size:          var(--rcc-font-size-base);
    line-height:        var(--rcc-line-height);
    color:              var(--rcc-text-primary);
    background:         none;
    float:              none;
    position:           static;
    text-align:         left;
    letter-spacing:     normal;
    text-transform:     none;
    font-weight:        normal;
    list-style:         none;
    text-decoration:    none;
    vertical-align:     baseline;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}


/* =========================================================
   3. KEYFRAME-ANIMATIONEN
   ========================================================= */

@keyframes rcc-slide-up {
    from {
        opacity:    0;
        transform:  translateY(40px) scale(0.97);
    }
    to {
        opacity:    1;
        transform:  translateY(0) scale(1);
    }
}

@keyframes rcc-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes rcc-slide-down {
    from {
        opacity:    0;
        transform:  translateY(-20px);
    }
    to {
        opacity:    1;
        transform:  translateY(0);
    }
}

@keyframes rcc-spin {
    to { transform: rotate(360deg); }
}


/* =========================================================
   4. OVERLAY (Hintergrund-Verdunklung)
   ========================================================= */

#rcc-overlay {
    position:           fixed !important;
    top:                0 !important;
    left:               0 !important;
    width:              100% !important;
    height:             100% !important;
    background:         var(--rcc-overlay-color) !important;
    backdrop-filter:    blur(var(--rcc-overlay-blur)) !important;
    -webkit-backdrop-filter: blur(var(--rcc-overlay-blur)) !important;
    z-index:            var(--rcc-z-overlay) !important;
    animation:          var(--rcc-animation-fade);
}

#rcc-overlay.rcc-hidden {
    display: none !important;
}


/* =========================================================
   5. BANNER – HAUPT-CONTAINER
   ========================================================= */

#rcc-banner {
    position:           fixed !important;
    z-index:            var(--rcc-z-banner) !important;
    background:         var(--rcc-bg) !important;
    border-radius:      var(--rcc-border-radius) !important;
    box-shadow:         var(--rcc-shadow) !important;
    max-width:          var(--rcc-max-width) !important;
    width:              calc(100% - 32px) !important;
    max-height:         90vh !important;
    display:            flex !important;
    flex-direction:     column !important;
    overflow:           hidden !important;
    animation:          var(--rcc-animation-in);
}

/* Position: Unten-Rechts (Standard) */
#rcc-banner.rcc-pos-bottom {
    bottom:     20px !important;
    right:      20px !important;
    left:       auto !important;
    transform:  none !important;
}

/* Position: Oben-Mitte */
#rcc-banner.rcc-pos-top {
    top:        20px !important;
    left:       50% !important;
    transform:  translateX(-50%) !important;
    animation:  rcc-slide-down 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

/* Position: Zentriertes Modal */
#rcc-banner.rcc-pos-center {
    top:        50% !important;
    left:       50% !important;
    transform:  translate(-50%, -50%) !important;
    animation:  var(--rcc-animation-in);
}

/* Ausgeblendet */
#rcc-banner.rcc-hidden {
    display: none !important;
}


/* =========================================================
   6. BANNER – KOPFZEILE
   ========================================================= */

#rcc-banner .rcc-header {
    background:     var(--rcc-bg-header) !important;
    padding:        var(--rcc-spacing-md) var(--rcc-spacing-lg) !important;
    flex-shrink:    0 !important;
    display:        flex !important;
    align-items:    center !important;
    justify-content: space-between !important;
    gap:            var(--rcc-spacing-sm) !important;
}

#rcc-banner .rcc-header-inner {
    display:        flex !important;
    align-items:    center !important;
    gap:            var(--rcc-spacing-sm) !important;
    flex:           1 !important;
    min-width:      0 !important;
}

/* Logo-Bereich oben rechts */
#rcc-banner .rcc-header-logo {
    flex-shrink:    0 !important;
    display:        flex !important;
    align-items:    center !important;
    padding-left:   var(--rcc-spacing-sm) !important;
}

#rcc-banner .rcc-header-inner img.rcc-logo-img,
#rcc-banner img.rcc-logo-img {
    height:          44px !important;
    min-height:      44px !important;
    width:           auto !important;
    max-width:       150px !important;
    max-height:      50px !important;
    object-fit:      contain !important;
    display:         inline-block !important;
    vertical-align:  middle !important;
    flex-shrink:     0 !important;
    filter:          none !important;
    opacity:         1 !important;
    margin:          0 !important;
    padding:         0 !important;
    border:          none !important;
    box-shadow:      none !important;
    border-radius:   0 !important;
    float:           none !important;
    position:        static !important;
}

/* Optional: Logo weiß färben (z.B. wenn dunkles Logo auf dunklem Header)
   → In Custom CSS einfügen:
   #rcc-banner img.rcc-logo-img { filter: brightness(0) invert(1) !important; }
*/

#rcc-banner .rcc-header-icon {
    width:          32px !important;
    height:         32px !important;
    flex-shrink:    0 !important;
    opacity:        0.9 !important;
}

#rcc-banner .rcc-title {
    font-size:      var(--rcc-font-size-xl) !important;
    font-weight:    700 !important;
    color:          var(--rcc-text-on-dark) !important;
    letter-spacing: -0.02em !important;
    line-height:    1.2 !important;
}


/* =========================================================
   7. BANNER – INHALT (Scrollbar)
   ========================================================= */

#rcc-banner .rcc-body {
    padding:        var(--rcc-spacing-lg) !important;
    overflow-y:     auto !important;
    flex:           1 !important;
    scrollbar-width: thin !important;
    scrollbar-color: var(--rcc-border) transparent !important;
}

#rcc-banner .rcc-body::-webkit-scrollbar {
    width: 4px !important;
}

#rcc-banner .rcc-body::-webkit-scrollbar-track {
    background: transparent !important;
}

#rcc-banner .rcc-body::-webkit-scrollbar-thumb {
    background:         var(--rcc-border) !important;
    border-radius:      4px !important;
}

/* Beschreibungstext */
#rcc-banner .rcc-description {
    font-size:      var(--rcc-font-size-base) !important;
    color:          var(--rcc-text-secondary) !important;
    line-height:    var(--rcc-line-height) !important;
    margin-bottom:  var(--rcc-spacing-md) !important;
}

#rcc-banner .rcc-description a {
    color:              var(--rcc-primary) !important;
    text-decoration:    underline !important;
    font-weight:        500 !important;
}

#rcc-banner .rcc-description a:hover {
    color:  var(--rcc-primary-hover) !important;
}


/* =========================================================
   8. COOKIE-KATEGORIEN – AKKORDEON
   ========================================================= */

#rcc-banner .rcc-categories {
    display:        flex !important;
    flex-direction: column !important;
    gap:            var(--rcc-spacing-xs) !important;
    margin-bottom:  var(--rcc-spacing-md) !important;
}

/* Einzelne Kategorie-Karte */
#rcc-banner .rcc-category {
    background:         var(--rcc-bg-secondary) !important;
    border:             1px solid var(--rcc-border) !important;
    border-radius:      var(--rcc-border-radius-sm) !important;
    overflow:           hidden !important;
    transition:         border-color var(--rcc-transition) !important;
}

#rcc-banner .rcc-category:hover {
    border-color:   var(--rcc-primary) !important;
}

/* Kategorie-Kopfzeile (klickbar für Akkordeon) */
#rcc-banner .rcc-category-header {
    display:        flex !important;
    align-items:    center !important;
    justify-content: space-between !important;
    padding:        var(--rcc-spacing-sm) var(--rcc-spacing-md) !important;
    cursor:         pointer !important;
    user-select:    none !important;
    gap:            var(--rcc-spacing-sm) !important;
}

#rcc-banner .rcc-category-info {
    flex:   1 !important;
    min-width: 0 !important;
}

#rcc-banner .rcc-category-name {
    font-size:      var(--rcc-font-size-base) !important;
    font-weight:    600 !important;
    color:          var(--rcc-text-primary) !important;
    display:        flex !important;
    align-items:    center !important;
    gap:            var(--rcc-spacing-xs) !important;
    flex-wrap:      wrap !important;
}

/* "Immer aktiv" Badge */
#rcc-banner .rcc-badge-required {
    font-size:      var(--rcc-font-size-xs) !important;
    font-weight:    600 !important;
    color:          var(--rcc-primary) !important;
    background:     var(--rcc-primary-light) !important;
    padding:        2px 8px !important;
    border-radius:  20px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
}

#rcc-banner .rcc-category-desc {
    font-size:      var(--rcc-font-size-sm) !important;
    color:          var(--rcc-text-secondary) !important;
    margin-top:     2px !important;
}

/* Akkordeon-Pfeil */
#rcc-banner .rcc-category-arrow {
    flex-shrink:    0 !important;
    color:          var(--rcc-text-light) !important;
    transition:     transform var(--rcc-transition) !important;
    display:        flex !important;
    align-items:    center !important;
}

#rcc-banner .rcc-category.rcc-open .rcc-category-arrow {
    transform:  rotate(180deg) !important;
}

/* Akkordeon-Inhalt */
#rcc-banner .rcc-category-body {
    display:        none !important;
    padding:        0 var(--rcc-spacing-md) var(--rcc-spacing-md) !important;
    border-top:     1px solid var(--rcc-border) !important;
}

#rcc-banner .rcc-category.rcc-open .rcc-category-body {
    display: block !important;
}


/* =========================================================
   9. COOKIE-TABELLE (innerhalb Akkordeon)
   ========================================================= */

#rcc-banner .rcc-cookie-table {
    width:          100% !important;
    border-collapse: collapse !important;
    margin-top:     var(--rcc-spacing-sm) !important;
    font-size:      var(--rcc-font-size-sm) !important;
}

#rcc-banner .rcc-cookie-table thead th {
    text-align:     left !important;
    font-weight:    600 !important;
    color:          var(--rcc-text-secondary) !important;
    font-size:      var(--rcc-font-size-xs) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.07em !important;
    padding:        var(--rcc-spacing-xs) var(--rcc-spacing-sm) !important;
    border-bottom:  2px solid var(--rcc-border) !important;
    background:     none !important;
}

#rcc-banner .rcc-cookie-table tbody td {
    padding:        var(--rcc-spacing-xs) var(--rcc-spacing-sm) !important;
    border-bottom:  1px solid var(--rcc-border) !important;
    color:          var(--rcc-text-secondary) !important;
    vertical-align: top !important;
}

#rcc-banner .rcc-cookie-table tbody td:first-child {
    font-weight:    500 !important;
    color:          var(--rcc-text-primary) !important;
    font-family:    'Courier New', monospace !important;
    font-size:      var(--rcc-font-size-xs) !important;
    white-space:    nowrap !important;
}

#rcc-banner .rcc-cookie-table tbody tr:last-child td {
    border-bottom:  none !important;
}

#rcc-banner .rcc-cookie-table tbody tr:hover td {
    background:     rgba(0, 0, 0, 0.02) !important;
}


/* =========================================================
   10. TOGGLE-SWITCH
   ========================================================= */

#rcc-banner .rcc-toggle-wrapper {
    display:        flex !important;
    align-items:    center !important;
    flex-shrink:    0 !important;
}

#rcc-banner .rcc-toggle {
    position:   relative !important;
    width:      var(--rcc-toggle-width) !important;
    height:     var(--rcc-toggle-height) !important;
    display:    inline-block !important;
}

/* Verstecktes natives Checkbox-Element */
#rcc-banner .rcc-toggle input[type="checkbox"] {
    position:   absolute !important;
    opacity:    0 !important;
    width:      0 !important;
    height:     0 !important;
    margin:     0 !important;
    pointer-events: none !important;
}

/* Toggle-Hintergrund (Track) */
#rcc-banner .rcc-toggle-track {
    position:           absolute !important;
    inset:              0 !important;
    border-radius:      100px !important;
    background:         var(--rcc-toggle-off) !important;
    cursor:             pointer !important;
    transition:         background var(--rcc-transition) !important;
}

/* Toggle-Knopf (Thumb) */
#rcc-banner .rcc-toggle-track::after {
    content:            '' !important;
    position:           absolute !important;
    top:                3px !important;
    left:               3px !important;
    width:              calc(var(--rcc-toggle-height) - 6px) !important;
    height:             calc(var(--rcc-toggle-height) - 6px) !important;
    border-radius:      50% !important;
    background:         var(--rcc-toggle-knob) !important;
    transition:         transform var(--rcc-transition),
                        box-shadow var(--rcc-transition) !important;
    box-shadow:         0 1px 4px rgba(0, 0, 0, 0.2) !important;
}

/* Toggle – Aktiviert-Zustand */
#rcc-banner .rcc-toggle input:checked + .rcc-toggle-track {
    background: var(--rcc-toggle-on) !important;
}

#rcc-banner .rcc-toggle input:checked + .rcc-toggle-track::after {
    transform:  translateX(calc(var(--rcc-toggle-width) - var(--rcc-toggle-height))) !important;
}

/* Toggle – Gesperrt (Notwendige Cookies) */
#rcc-banner .rcc-toggle input:disabled + .rcc-toggle-track {
    background:     var(--rcc-toggle-disabled) !important;
    cursor:         not-allowed !important;
    opacity:        0.7 !important;
}

#rcc-banner .rcc-toggle input:disabled + .rcc-toggle-track::after {
    box-shadow: none !important;
}

/* Fokus-Ring für Barrierefreiheit */
#rcc-banner .rcc-toggle input:focus-visible + .rcc-toggle-track {
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.35) !important;
}


/* =========================================================
   11. BANNER – FUSSZEILE (Buttons)
   ========================================================= */

#rcc-banner .rcc-footer {
    padding:        var(--rcc-spacing-md) var(--rcc-spacing-lg) !important;
    border-top:     1px solid var(--rcc-border) !important;
    flex-shrink:    0 !important;
    background:     var(--rcc-bg) !important;
}

/* Button-Gruppe – erste Ebene */
#rcc-banner .rcc-btn-group {
    display:    flex !important;
    gap:        var(--rcc-spacing-sm) !important;
    flex-wrap:  wrap !important;
}

/* Basis-Button-Stil */
#rcc-banner .rcc-btn {
    display:            inline-flex !important;
    align-items:        center !important;
    justify-content:    center !important;
    gap:                6px !important;
    padding:            var(--rcc-btn-padding) !important;
    border-radius:      var(--rcc-btn-border-radius) !important;
    font-size:          var(--rcc-font-size-sm) !important;
    font-weight:        600 !important;
    cursor:             pointer !important;
    transition:         background var(--rcc-transition),
                        color var(--rcc-transition),
                        transform var(--rcc-transition),
                        box-shadow var(--rcc-transition) !important;
    white-space:        nowrap !important;
    border:             2px solid transparent !important;
    text-decoration:    none !important;
    line-height:        1 !important;
}

#rcc-banner .rcc-btn:hover {
    transform:  translateY(-1px) !important;
}

#rcc-banner .rcc-btn:active {
    transform:  translateY(0) !important;
}

/* Button: Alle akzeptieren */
#rcc-banner .rcc-btn-accept {
    background:     var(--rcc-btn-accept-bg) !important;
    color:          var(--rcc-btn-accept-text) !important;
    flex:           1 !important;
    box-shadow:     0 2px 8px rgba(37, 99, 235, 0.25) !important;
}

#rcc-banner .rcc-btn-accept:hover {
    background:     var(--rcc-primary-hover) !important;
    box-shadow:     0 4px 16px rgba(37, 99, 235, 0.35) !important;
}

/* Button: Ablehnen / Nur notwendige */
#rcc-banner .rcc-btn-reject {
    background:     var(--rcc-btn-reject-bg) !important;
    color:          var(--rcc-btn-reject-text) !important;
    border-color:   var(--rcc-border) !important;
    flex:           1 !important;
}

#rcc-banner .rcc-btn-reject:hover {
    background:     #e2e8f0 !important;
    border-color:   #cbd5e1 !important;
}

/* Button: Einstellungen öffnen/schließen */
#rcc-banner .rcc-btn-settings {
    background:     transparent !important;
    color:          var(--rcc-text-secondary) !important;
    font-size:      var(--rcc-font-size-sm) !important;
    font-weight:    500 !important;
    padding:        8px var(--rcc-spacing-sm) !important;
    width:          100% !important;
    text-align:     center !important;
    margin-top:     var(--rcc-spacing-xs) !important;
}

#rcc-banner .rcc-btn-settings:hover {
    color:          var(--rcc-primary) !important;
    transform:      none !important;
}

/* Button: Einstellungen speichern */
#rcc-banner .rcc-btn-save {
    background:     var(--rcc-btn-save-bg) !important;
    color:          var(--rcc-btn-save-text) !important;
    width:          100% !important;
    padding:        14px var(--rcc-spacing-md) !important;
    font-size:      var(--rcc-font-size-base) !important;
    margin-top:     var(--rcc-spacing-sm) !important;
}

#rcc-banner .rcc-btn-save:hover {
    background:     #334155 !important;
}

/* Lade-Spinner im Button */
#rcc-banner .rcc-btn-spinner {
    width:              16px !important;
    height:             16px !important;
    border:             2px solid rgba(255, 255, 255, 0.3) !important;
    border-top-color:   #ffffff !important;
    border-radius:      50% !important;
    animation:          rcc-spin 0.6s linear infinite !important;
    display:            none !important;
}

#rcc-banner .rcc-btn.rcc-loading .rcc-btn-spinner {
    display: block !important;
}

/* Einstellungs-Bereich (initial versteckt) */
#rcc-banner .rcc-settings-panel {
    display:    none !important;
}

#rcc-banner.rcc-show-settings .rcc-settings-panel {
    display: block !important;
}

#rcc-banner.rcc-show-settings .rcc-btn-settings {
    color: var(--rcc-primary) !important;
}


/* =========================================================
   12. FOOTER-LINK (Dauerhafter "Cookie-Einstellungen"-Link)
   ========================================================= */

#rcc-footer-link {
    display:            inline-flex !important;
    align-items:        center !important;
    gap:                5px !important;
    font-size:          var(--rcc-font-size-sm) !important;
    color:              var(--rcc-text-secondary) !important;
    text-decoration:    none !important;
    cursor:             pointer !important;
    transition:         color var(--rcc-transition) !important;
    background:         none !important;
    border:             none !important;
    padding:            0 !important;
    font-family:        var(--rcc-font-family) !important;
    line-height:        var(--rcc-line-height) !important;
}

#rcc-footer-link:hover {
    color: var(--rcc-primary) !important;
}

#rcc-footer-link svg {
    flex-shrink: 0 !important;
}

/* Floating Button (Alternative zum Footer-Link) */
/* ── Floating Tab: kleiner weißer Rand rechts unten ─────────────────────── */

#rcc-floating-btn {
    position:           fixed !important;
    bottom:             0 !important;
    right:              40px !important;
    left:               auto !important;
    z-index:            var(--rcc-z-banner) !important;

    /* Kompakter Tab – nur als Streifen sichtbar */
    height:             32px !important;
    width:              205px !important;
    border-radius:      8px 8px 0 0 !important;
    background:         #ffffff !important;
    color:              #64748b !important;
    border:             none !important;
    border-top:         1px solid #e2e8f0 !important;
    border-left:        1px solid #e2e8f0 !important;
    border-right:       1px solid #e2e8f0 !important;

    /* Schatten nach oben */
    box-shadow:         0 -4px 16px rgba(0, 0, 0, 0.10),
                        0 -1px 4px rgba(0, 0, 0, 0.06) !important;

    display:            flex !important;
    align-items:        center !important;
    justify-content:    center !important;
    gap:                8px !important;
    cursor:             pointer !important;
    padding:            0 18px !important;
    overflow:           hidden !important;
    white-space:        nowrap !important;

    transition:         height 0.25s cubic-bezier(0.4, 0, 0.2, 1),
                        box-shadow 0.25s ease,
                        color 0.25s ease !important;
}

#rcc-floating-btn svg {
    flex-shrink:    0 !important;
    width:          14px !important;
    height:         14px !important;
    color:          inherit !important;
    opacity:        0.55 !important;
    transition:     opacity 0.2s ease !important;
}

#rcc-floating-btn .rcc-floating-text {
    font-size:      12px !important;
    font-weight:    600 !important;
    letter-spacing: 0.02em !important;
    color:          inherit !important;
    opacity:        0.8 !important;
    transition:     opacity 0.2s ease !important;
}

/* Hover: etwas höher, stärkerer Schatten, Primärfarbe als Akzent */
#rcc-floating-btn:hover {
    height:         42px !important;
    color:          var(--rcc-primary) !important;
    box-shadow:     0 -6px 24px rgba(0, 0, 0, 0.14),
                    0 -2px 8px rgba(0, 0, 0, 0.08) !important;
}

#rcc-floating-btn:hover svg {
    opacity:        1 !important;
}

#rcc-floating-btn:hover .rcc-floating-text {
    opacity:        1 !important;
}

/* Versteckt-Klasse: wegschieben statt display:none (Tab bleibt immer sichtbar) */
#rcc-floating-btn.rcc-hidden {
    transform:      translateY(100%) !important;
    pointer-events: none !important;
    opacity:        0 !important;
}




/* =========================================================
   13. ERFOLGSMELDUNG (nach Speichern)
   ========================================================= */

#rcc-banner .rcc-success-msg {
    display:        none !important;
    align-items:    center !important;
    gap:            var(--rcc-spacing-xs) !important;
    padding:        var(--rcc-spacing-xs) var(--rcc-spacing-md) !important;
    background:     #dcfce7 !important;
    color:          #166534 !important;
    border-radius:  var(--rcc-border-radius-sm) !important;
    font-size:      var(--rcc-font-size-sm) !important;
    font-weight:    500 !important;
    margin-top:     var(--rcc-spacing-xs) !important;
    animation:      var(--rcc-animation-fade);
}

#rcc-banner .rcc-success-msg.rcc-visible {
    display: flex !important;
}


/* =========================================================
   14. BARRIEREFREIHEIT (Accessibility)
   ========================================================= */

/* Fokus-Ringe für Tastaturnavigation */
#rcc-banner .rcc-btn:focus-visible {
    outline:        3px solid var(--rcc-primary) !important;
    outline-offset: 2px !important;
}

#rcc-banner .rcc-category-header:focus-visible {
    outline:        2px solid var(--rcc-primary) !important;
    outline-offset: -2px !important;
    border-radius:  var(--rcc-border-radius-sm) !important;
}

/* Reduzierte Bewegung (prefers-reduced-motion) */
@media (prefers-reduced-motion: reduce) {
    #rcc-banner,
    #rcc-overlay,
    #rcc-banner * {
        animation:  none !important;
        transition: none !important;
    }
}


/* =========================================================
   15. RESPONSIVE – MOBILE
   ========================================================= */

@media screen and (max-width: 600px) {
    #rcc-banner {
        width:          100% !important;
        max-width:      100% !important;
        border-radius:  var(--rcc-border-radius) var(--rcc-border-radius) 0 0 !important;
    }

    #rcc-banner.rcc-pos-bottom {
        bottom:     0 !important;
        right:      0 !important;
        left:       0 !important;
        transform:  none !important;
    }

    #rcc-banner.rcc-pos-top {
        top:        0 !important;
        left:       0 !important;
        transform:  none !important;
        border-radius:  0 0 var(--rcc-border-radius) var(--rcc-border-radius) !important;
    }

    #rcc-banner.rcc-pos-center {
        top:        auto !important;
        bottom:     0 !important;
        left:       0 !important;
        transform:  none !important;
        border-radius:  var(--rcc-border-radius) var(--rcc-border-radius) 0 0 !important;
    }

    #rcc-banner .rcc-header {
        padding: var(--rcc-spacing-md) !important;
    }

    #rcc-banner .rcc-body {
        padding: var(--rcc-spacing-md) !important;
    }

    #rcc-banner .rcc-footer {
        padding: var(--rcc-spacing-md) !important;
    }

    #rcc-banner .rcc-btn-group {
        flex-direction: column !important;
    }

    #rcc-banner .rcc-btn-accept,
    #rcc-banner .rcc-btn-reject {
        flex: none !important;
        width: 100% !important;
    }

    #rcc-banner .rcc-cookie-table {
        font-size: var(--rcc-font-size-xs) !important;
    }

    #rcc-banner .rcc-cookie-table thead th,
    #rcc-banner .rcc-cookie-table tbody td {
        padding: 4px 6px !important;
    }

    /* Cookie-Tabelle auf Mobile: letzte Spalten ausblenden */
    #rcc-banner .rcc-cookie-table .rcc-col-provider,
    #rcc-banner .rcc-cookie-table .rcc-col-expiry {
        display: none !important;
    }
}


/* =========================================================
   16. WORDPRESS ADMIN – EINSTELLUNGSSEITE
   (Nur im wp-admin sichtbar)
   ========================================================= */

/* Haupt-Wrapper der Admin-Seite */
.rcc-admin-wrap {
    max-width:  900px;
    margin-top: 24px;
}

/* Plugin-Header im Admin */
.rcc-admin-header {
    display:        flex;
    align-items:    center;
    gap:            16px;
    margin-bottom:  24px;
    padding:        20px 24px;
    background:     #1e293b;
    border-radius:  10px;
    color:          #f1f5f9;
}

.rcc-admin-header h1 {
    font-size:      22px;
    font-weight:    700;
    color:          #f1f5f9;
    margin:         0;
}

.rcc-admin-header .rcc-admin-version {
    font-size:      12px;
    background:     rgba(255, 255, 255, 0.15);
    padding:        3px 10px;
    border-radius:  20px;
    color:          #cbd5e1;
}

/* Tab-Navigation */
.rcc-admin-tabs {
    display:        flex;
    gap:            4px;
    border-bottom:  2px solid #e2e8f0;
    margin-bottom:  24px;
}

.rcc-admin-tab {
    padding:            10px 20px;
    font-size:          14px;
    font-weight:        600;
    color:              #64748b;
    background:         none;
    border:             none;
    border-bottom:      2px solid transparent;
    margin-bottom:      -2px;
    cursor:             pointer;
    transition:         color 0.2s, border-color 0.2s;
    text-decoration:    none;
}

.rcc-admin-tab:hover {
    color: #2563eb;
}

.rcc-admin-tab.active {
    color:          #2563eb;
    border-color:   #2563eb;
}

/* Tab-Inhalt */
.rcc-tab-panel {
    display:    none;
}

.rcc-tab-panel.active {
    display: block;
}

/* Settings-Karte */
.rcc-admin-card {
    background:     #ffffff;
    border:         1px solid #e2e8f0;
    border-radius:  10px;
    padding:        24px;
    margin-bottom:  20px;
    box-shadow:     0 1px 4px rgba(0, 0, 0, 0.04);
}

.rcc-admin-card h2 {
    font-size:      16px;
    font-weight:    700;
    color:          #0f172a;
    margin:         0 0 20px 0;
    padding-bottom: 16px;
    border-bottom:  1px solid #e2e8f0;
}

/* Cookie-Eintrag in Admin-Liste */
.rcc-cookie-entry {
    display:        flex;
    gap:            12px;
    align-items:    flex-start;
    padding:        12px;
    background:     #f8fafc;
    border:         1px solid #e2e8f0;
    border-radius:  6px;
    margin-bottom:  8px;
}

.rcc-cookie-entry input,
.rcc-cookie-entry textarea,
.rcc-cookie-entry select {
    font-size:      13px;
    padding:        6px 10px;
    border:         1px solid #e2e8f0;
    border-radius:  4px;
    flex:           1;
    min-width:      0;
}

.rcc-cookie-entry .rcc-remove-cookie {
    background:     none;
    border:         none;
    color:          #ef4444;
    cursor:         pointer;
    padding:        6px;
    border-radius:  4px;
    transition:     background 0.2s;
    flex-shrink:    0;
}

.rcc-cookie-entry .rcc-remove-cookie:hover {
    background: #fee2e2;
}

/* Consent-Log-Tabelle */
.rcc-log-table {
    width:          100%;
    border-collapse: collapse;
    font-size:      13px;
}

.rcc-log-table th {
    text-align:     left;
    padding:        10px 12px;
    background:     #f8fafc;
    border-bottom:  2px solid #e2e8f0;
    font-weight:    600;
    color:          #475569;
    font-size:      12px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.rcc-log-table td {
    padding:        10px 12px;
    border-bottom:  1px solid #e2e8f0;
    color:          #334155;
}

.rcc-log-table tr:hover td {
    background: #f8fafc;
}

/* Consent-Status-Badges in Log-Tabelle */
.rcc-status-yes {
    display:        inline-block;
    padding:        2px 8px;
    background:     #dcfce7;
    color:          #166534;
    border-radius:  20px;
    font-size:      11px;
    font-weight:    600;
}

.rcc-status-no {
    display:        inline-block;
    padding:        2px 8px;
    background:     #fee2e2;
    color:          #991b1b;
    border-radius:  20px;
    font-size:      11px;
    font-weight:    600;
}


/* =========================================================
   17. INDIVIDUELLE ANPASSUNGEN
   (Hier können eigene CSS-Regeln ergänzt werden)
   ========================================================= */

/*
 * Hier können Sie Ihr eigenes CSS einfügen, um das
 * Standard-Design zu überschreiben oder zu erweitern.
 *
 * Beispiel – Primärfarbe ändern:
 *   :root {
 *       --rcc-primary: #e63946;
 *   }
 *
 * Beispiel – Banner-Hintergrund abdunkeln:
 *   :root {
 *       --rcc-bg:       #1a1a2e;
 *       --rcc-bg-secondary: #16213e;
 *       --rcc-text-primary: #e2e8f0;
 *   }
 *
 * Beispiel – Buttons abgerundeter:
 *   :root {
 *       --rcc-btn-border-radius: 100px;
 *   }
 */