/* Scrollbar für Sperren-Ansicht - jetzt in dezentem Grau */
#sperren-view::-webkit-scrollbar {
    width: 6px;
}

#sperren-view::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.3);
}

#sperren-view::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15); /* Dein gewünschtes Grau */
    border-radius: 2px;
}

#sperren-view::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.25); /* Etwas heller beim Drüberfahren */
}

/* Container und Basis-Styling */
.sperren-card {
    position: relative;
    display: flex;
    align-items: flex-start;
    margin-bottom: 20px;
    background: #1a1a1a;
    padding: 15px;
    border-radius: 10px;
    border: 1px solid #333;
    transition: all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
    max-width: 900px;
}

.sperren-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4);
}

.sperren-label {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 0.7rem;
    font-weight: bold;
    text-transform: uppercase;
}

.sperren-card img {
    width: 90px;
    border-radius: 6px;
    margin-right: 20px;
    flex-shrink: 0;
}

.sperren-card h3 { 
    margin: 0 0 8px 0; 
    font-size: 1.1rem; 
}

.sperren-card.international:hover { box-shadow: 0 0 25px rgba(020, 184, 166, 0.4); border-color: rgba(020, 184, 166, 0.5); }
.sperren-card.ki-verbot:hover { box-shadow: 0 0 25px rgba(255, 77, 77, 0.4); border-color: rgba(255, 77, 77, 0.5); }
.sperren-card.treffen:hover { box-shadow: 0 0 25px rgba(020, 184, 166, 0.4); border-color: rgba(020, 184, 166, 0.5); }
.sperren-card.template:hover {    box-shadow: 0 0 25px rgba(181, 126, 220, 0.4);    border-color: rgba(181, 126, 220, 0.5);}
.sperren-card.duplikat:hover {    box-shadow: 0 0 25px rgba(255, 77, 77, 0.4);    border-color: rgba(255, 77, 77, 0.5);}
.sperren-card.grammatik:hover  {    box-shadow: 0 0 25px rgba(255, 77, 77, 0.4);    border-color: rgba(255, 77, 77, 0.5);}
.sperren-card.time:hover {    box-shadow: 0 0 25px rgba(181, 126, 220, 0.4);    border-color: rgba(181, 126, 220, 0.5);}

.sperren-card.international .sperren-label { color: #14b8a6; border-color: #14b8a6; }
.sperren-card.ki-verbot .sperren-label { color: #ff4d4d; border-color: #ff4d4d; }
.sperren-card.treffen .sperren-label { color: #14b8a6; border-color: #14b8a6; }
.sperren-card.template .sperren-label { color: #b57edc; border-color: #b57edc; }
.sperren-card.duplikat .sperren-label { color: #ff4d4d; border-color: #ff4d4d; }
.sperren-card.vorgaben .sperren-label { color: #b57edc; border-color: #b57edc; }
.sperren-card.grammatik .sperren-label {     color: #ff4d4d;     border-color: #ff4d4d; }
.sperren-card.time .sperren-label { color: #b57edc; border-color: #b57edc; }

.sperren-card.template h3 { color: #b57edc; }
.sperren-card.duplikat h3 { color: #ff4d4d; }
.sperren-card.vorgaben h3 { color: #b57edc; }
.sperren-card.international h3 { color: #14b8a6; }
.sperren-card.ki-verbot h3 { color: #ff4d4d; }
.sperren-card.treffen h3 { color: #14b8a6; }
.sperren-card.grammatik h3 {color: #ff4d4d; }
.sperren-card.time h3 { color: #b57edc; }


.sperren-card p { 
    margin: 0 0 8px 0; 
    font-size: 0.95rem; 
    line-height: 1.4; 
    color: #ccc; 
}

/* Lila Glow für den neuen Block */
.sperren-card.vorgaben:hover {
    box-shadow: 0 0 25px rgba(181, 126, 220, 0.4);
    border-color: rgba(181, 126, 220, 0.5);
}

.gif-hover:hover {
    transform: scale(2.5) !important;
    z-index: 100;
    position: relative;
    box-shadow: 0 0 30px rgba(020, 184, 166, 0.8);
    cursor: pointer;
}

/* Pink: Liebesgeständnisse */
.sperren-card.liebe .sperren-label { color: #b57edc; border-color: #b57edc; }
.sperren-card.liebe h3 { color: #b57edc; }
.sperren-card.liebe:hover { box-shadow: 0 0 25px rgba(181, 126, 220, 0.4); border-color: rgba(181, 126, 220, 0.5); }

/* Lila: Outing */
.sperren-card.outing .sperren-label { color: #14b8a6; border-color: #14b8a6; }
.sperren-card.outing h3 { color: #14b8a6; }
.sperren-card.outing:hover { box-shadow: 0 0 25px rgba(20, 184, 166, 0.4); border-color: rgba(20, 184, 166, 0.5); }

/* Blau: Verbotene Berufe */
.sperren-card.berufe .sperren-label { color: #14b8a6; border-color: #14b8a6; }
.sperren-card.berufe h3 { color: #14b8a6; }
.sperren-card.berufe:hover { box-shadow: 0 0 25px rgba(020, 184, 166, 0.4); border-color: rgba(20, 184, 166, 0.5); }

/* Rot: Krankheiten (wie du wolltest) */
.sperren-card.krankheit .sperren-label { color: #b57edc; border-color: #b57edc; }
.sperren-card.krankheit h3 { color: #b57edc; }
.sperren-card.krankheit:hover { box-shadow: 0 0 25px rgba(181, 126, 220, 0.4); border-color: rgba(181, 126, 220, 0.5); }

/* Gelb/Gold: Minderjährige (Signalcharakter) */
.sperren-card.minderjaehrige .sperren-label { color: #ff4d4d; border-color: #ff4d4d; }
.sperren-card.minderjaehrige h3 { color: #ff4d4d; }
.sperren-card.minderjaehrige:hover { box-shadow: 0 0 25px rgba(255, 77, 77, 0.4); border-color: rgba(255, 77, 77, 0.5); }

/* Orange: Illegale Inhalte (Warnung) */
.sperren-card.illegales .sperren-label { color: #ff4d4d; border-color: #ff4d4d; }
.sperren-card.illegales h3 { color: #ff4d4d; }
.sperren-card.illegales:hover { box-shadow: 0 0 25px rgba(255, 77, 77, 0.5); border-color: rgba(255, 77, 77, 0.5);  }

/* Türkis/Cyan für Datenschutz (Sicherheit) */
.sperren-card.datenschutz .sperren-label { color: #ff4d4d; border-color: #ff4d4d; }
.sperren-card.datenschutz h3 { color: #ff4d4d; }
.sperren-card.datenschutz:hover { 
    box-shadow: 0 0 25px rgba(255, 77, 77, 0.4); 
    border-color: rgba(255, 77, 77, 0.5); 
}