#overlay {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: rgb(92, 79, 79);
    opacity: 0.15;
    z-index: 10;
}


#DSGVOPopup {
    display: none;
    position: absolute;
    top: 10%;
    /*left: 30%;*/ /* ich habe alle mit left weg gemacht und statt dessen mit Eltern Div und Flex in der Mitte  positzioniert */
    width: 33%;
    background-color: white;
    text-align: center;
    /*margin: 1%;*/
    /*padding: 1%;*/
    border: solid 0.5px;
    overflow: hidden;
    z-index: 99;
    box-shadow: 1px 1px 10px 1px;
}

/* Small devices (landscape phones, 1200px and up)*/
@media (max-width: 1200px) {
    #DSGVOPopup {
        width: 45%;
    }
}
/*ich mußte zwei Größe anpassen damit den Popup Fenster flüßig mit der größe ändert */
/* Small devices (landscape phones, 700px and up)*/
@media (max-width: 700px) {
    #DSGVOPopup {
        width: 60%;
    }
}

.show1 {
    animation: 2s DSGVOPopupOpen;
}

.hide1 {
    animation: 3s DSGVOPopupClose;
}

@keyframes DSGVOPopupOpen {
    0% {
        top: -600px;
        /*left: 30%;*/
    }

    100% {
        top: 10%;
        /*left: 30%;*/
    }
}

@keyframes DSGVOPopupClose {
    0% {
        top: 10%;
        /*left: 30%;*/
    }

    100% {
        top: -1000px;
        /*left: 30%;*/
    }
}

/*#DSGVOPopup div {
    text-align: center;
    margin: 4%;
}*/

#DSGVOPopup img {
    opacity: 0.7;
}

#DSGVOPopup #text {
    text-align: center;
    color: black;
}

#contactModal{
    z-index: 1070 !important;
}

/* Falls das zweite Modal ein eigenes Backdrop nutzt */
#captchaModal .modal-backdrop {
    z-index: 1065 !important;
}


/* OkButton mit dem Effect als Key */
.okButton {
    /* Design der Taste */
    background: #f5f5f5;
    color: #333333;
    font-family: sans-serif;
    font-size: 16px;
    font-weight: bold;
    padding: 12px 24px;
    border: 1px solid #cccccc;
    border-radius: 8px;
    cursor: pointer;
    outline: none;
    width: 100px;
    /* Der 3D-Effekt (Schatten nach unten) */
    box-shadow: 0 6px 0 #bbbbbb, 0 8px 10px rgba(0, 0, 0, 0.15);
    color: #998e8e;
    /* Sanfter Übergang beim Loslassen */
    position: relative;
    top: 0;
    transition: all 0.05s ease;
}

    /* Hover-Effekt (Maus fährt über die Taste) */
    .okButton:hover {
        background: #eeeeee;
    }

    /* Der Tastendruck-Effekt (Klick-Zustand) */
    .okButton:active {
        /* Verschiebt den Button nach unten */
        top: 5px;
        /* Verkleinert den Schatten passend zur Verschiebung */
        box-shadow: 0 1px 0 #bbbbbb, 0 2px 4px rgba(0, 0, 0, 0.2);
    }

/* Der äußere Kasten bestimmt die Größe */
.flip-card {
    background-color: transparent;
    width: 66%;
    height: 95%;
    perspective: 1000px; /* Erzeugt den 3D-Effekt beim Drehen */
    margin-left: 20%;
}

/* Dieser Container steuert die eigentliche Drehung */
.flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.6s; /* Geschwindigkeit der Drehung */
    transform-style: preserve-3d; /* Wichtig für den 3D-Look */
}

/* Drehung auslösen, wenn die Maus darüber fährt */
.flip-card:hover .flip-card-inner {
    transform: rotateY(-180deg); /* Drehung um die Y-Achse */
}

/* Vorder- und Rückseite exakt übereinanderlegen */
.flip-card-front, .flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden; /* Für Safari */
    backface-visibility: hidden; /* Versteckt die Rückseite */
}

    /* Styling für die Bilder selbst */
    .flip-card-front img, .flip-card-back img {
        width: 100%;
        height: 100%;
        object-fit: cover; /* Verhindert das Verzerren der Bilder */
        border-radius: 10px;
    }

/* Die Rückseite muss von Anfang an um 180 Grad gedreht sein */
.flip-card-back {
    transform: rotateY(-180deg);
}


/* #region Cube */

/* Dieser Wrapper sorgt dafür, dass Text und Buttons weggeschoben werden */
.cube-wrapper {
    display: flex;
    justify-content: center; /* Richtet den Cube am PC linksbündig aus */
    width: 100%;
    height: 260px; /* Gibt dem Würfel nach oben/unten festen Platz */
    margin-top: 60px; /* Schafft Abstand zum Text darüber */
    margin-bottom: 10px; /* Schafft Abstand zu den Buttons darunter */
}

/* Aktualisiere deine bestehende .scene Klasse oder füge dies hinzu: */
.scene {
    position: relative !important;
    width: 150px;
    height: 150px;
    perspective: 800px;
    background: transparent !important;
}

.cube {
    width: 150px;
    height: 150px;
    position: absolute;
    transform-style: preserve-3d;
    /* Die Startposition (translateZ) wird JETZT HIER definiert, nicht in den Keyframes */
    transform: translateZ(-75px);
    animation: spinCube 8s infinite linear reverse; /* linear läuft flüssiger als alternate */
    background: transparent !important;
}

.cube__face {
    position: absolute;
    width: 150px;
    height: 150px;
    /* border: 1px solid rgba(11, 11, 11, 0.1); */ /*Dünnerer, dezenterer Rand statt hartem Schwarz */
    box-shadow: inset 0 0 0 3px rgba(0, 0, 0, 0.3);
    line-height: 150px;
    font-size: 26px; /* Leicht verkleinert, damit lange Wörter wie JavaScript nicht brechen */
    font-weight: bold;
    color: white;
    text-align: center;
    /* 🌟 DER TRICK: Verhindert, dass Rückseiten durchscheinen und Grafikfehler/Schwarz erzeugen */
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden; /* Für Safari Support */
}

/* Deine Farbseiten bleiben sauber bestehen */
.cube__face--front {
    background: hsla( 0, 100%, 50%, 0.7);
    transform: rotateY( 0deg) translateZ(75px);
}

.cube__face--right {
    background: hsla(192, 60%, 57%, 0.7);
    transform: rotateY( 90deg) translateZ(75px);
}

.cube__face--back {
    background: hsla(120, 100%, 50%, 0.7);
    transform: rotateY(180deg) translateZ(75px);
}

.cube__face--left {
    background: hsla(180, 100%, 50%, 0.7);
    transform: rotateY(-90deg) translateZ(75px);
}

.cube__face--top {
    background: hsla(240, 100%, 50%, 0.7);
    transform: rotateX( 90deg) translateZ(75px);
}

.cube__face--bottom {
    background: hsla(300, 100%, 50%, 0.7);
    transform: rotateX(-90deg) translateZ(75px);
}

/* 🌟 DIE REPARIERTEN KEYFRAMES: Kein translateZ mehr hier drin, das verhinderte das Clipping */
@keyframes spinCube {
    0% {
        transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) rotateX(0deg)
    }

    100% {
        transform: rotateX(360deg) rotateY(360deg) rotateZ(190deg) rotateX(360deg)
    }
}



.floating-select-wrapper {
    position: relative;
}

    .floating-select-wrapper label {
        position: absolute;
        left: 12px;
        top: 50%;
        transform: translateY(-50%);
        pointer-events: none;
        transition: all 0.2s ease;
        background: white;
        padding: 0 4px;
    }

    .floating-select-wrapper select:focus + label,
    .floating-select-wrapper select:valid + label {
        top: 0;
        font-size: 12px;
    }