/* Stil für den "Zurück nach oben"-Button */
.cookie-consent-banner-btn {
    display: none; /* Standardmäßig unsichtbar */
    position: fixed; /* Fixierte Position */
    background-color: #007bff; /* Primäre Hintergrundfarbe */
    color: white; /* Textfarbe für das Icon */
    width: 60px; /* Breite */
    height: 60px; /* Höhe */
    border-radius: 50%; /* Runde Form */
    border: none; /* Keine Umrandung */
    cursor: pointer; /* Hand-Cursor */
    text-align: center;
    line-height: 60px; /* Vertikale Zentrierung */
    z-index: 1000; /* Über anderen Elementen */
    box-shadow: 
        4px 4px 8px rgba(0, 0, 0, 0.4), /* Dunklerer äußerer Schatten */
        -4px -4px 8px rgba(255, 255, 255, 0.6); /* Heller innerer Schatten */
    transition: all 0.3s ease; /* Sanfter Übergang */
}

/* Positionierung dynamisch */
.cookie-consent-banner-btn.bottom-right {
    bottom: 20px;
    right: 20px;
}

.cookie-consent-banner-btn.bottom-left {
    bottom: 20px;
    left: 20px;
}

.cookie-consent-banner-btn.top-right {
    top: 30px;
    right: 20px;
}

.cookie-consent-banner-btn.top-left {
    top: 30px;
    left: 20px;
}

/* Hover-Effekt */
.cookie-consent-banner-btn:hover {
    background-color: #0056b3; /* Dunkleres Blau beim Hover */
    transform: translateY(-5px) scale(1.1); /* Button hebt sich leicht an */
    box-shadow: 
        6px 6px 12px rgba(0, 0, 0, 0.5), /* Intensiverer dunkler Schatten */
        -6px -6px 12px rgba(255, 255, 255, 0.7); /* Intensiverer heller Schatten */
}

/* Stil für das FontAwesome-Icon */
.cookie-consent-banner-btn i {
    font-size: 32px; /* Größe des FontAwesome-Icons */
    line-height: 60px; /* Zentriert das Icon vertikal */
}

/* Sichtbarkeit aktivieren */
.cookie-consent-banner-btn.visible {
    display: block; /* Sichtbar, wenn aktiv */
}

/* Schieberegler-Design */
.switch {
    position: relative;
    display: inline-block;
    width: 34px;
    height: 20px;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: .4s;
    border-radius: 50px;
}

.slider:before {
    position: absolute;
    content: "";
    height: 12px;
    width: 12px;
    border-radius: 50px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    transition: .4s;
}

input:checked + .slider {
    background-color: #66bb6a;
}

input:checked + .slider:before {
    transform: translateX(14px);
}

/* Stil für runde Ecken */
.cookie-consent-banner.rounded {
    border-radius: 50%;
}

/* Stil für eckige Ecken */
.cookie-consent-banner.square {
    border-radius: 0;
}

/* Schatten */
.cookie-consent-banner-btn.with-shadow {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}

/* Position des Buttons */
.cookie-consent-banner-btn {
    position: fixed;
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

/* Rund (50% wird für runde Buttons verwendet) */
.cookie-consent-banner-btn.rounded {
    border-radius: 50%;
}

/* Eckig (keine Rundung) */
.cookie-consent-banner-btn.square {
    border-radius: 0;
}

/* Benutzerdefiniert - mit benutzerdefiniertem Wert für border-radius */
.cookie-consent-banner-btn.custom {
    border-radius: var(--custom-border-radius, 0);
}

/* Hover-Effekt */
.cookie-consent-banner-btn:hover {
    background-color: #0056b3; /* Beispiel für Hover-Hintergrundfarbe */
}

/* Sichtbarkeit und Interaktionen */
.cookie-consent-banner-btn {
    opacity: 0;
    pointer-events: none; /* Verhindert Interaktionen, wenn der Button ausgeblendet ist */
    transition: opacity 0.3s ease-in-out;
}

.cookie-consent-banner-btn.visible {
    opacity: 1;
    pointer-events: auto;
}