body {
    background: black;
    font-family: "Inter", Arial, sans-serif;
}

.site-header{
    display: flex;           /* Flex-Container aktivieren */
    justify-content: center; /* horizontal zentrieren */
    align-items: center;     /* vertikal zentrieren */
    padding: 10px 0;         /* optional: Abstand oben/unten */
}

.card {
    background-color: transparent !important;
    max-width: 300px; /* etwas breiter als das Background Bild */
    margin: 0px auto;
    border:none;
}

.card-header,
.card-footer{
    color:#efb2ae;
    border: none;
    text-align: center;
}

.card-body{
    flex: none;
    padding: 0px;
}

.overlay-card {
    position: relative; 
    display: flex;
    justify-content: center; /* horizontal zentrieren */
}

/* Bild als Hintergrund (zentriert) */
.overlay-card .bg-image{
    width: 300px;
}

/* Inhalt über dem Bild */
.overlay-card .card-content {
    color: #efb2ae;
    position: absolute;
    width: 100%;
    z-index: 2;
}

.status-message{ 
    position:absolute;
    top:66px;                       /* absoluter abstand zum überliegenden element (overlay) */
    left: 50%;                      /* linke Kante in der Mitte des Containers */
    transform: translateX(-50%);    /* um die eigene Breite nach links verschieben */
    text-align: center;             /* text horizontal zentrieren */
}

.open-time{
    position:absolute;
    top:150px;
    left: 50%;       
    transform: translateX(-50%); 
    text-align: center;
    font-size: 16px;
}
.protection-level-password{
    position:absolute;
    top:280px;
    left: 50%;       
    transform: translateX(-50%); 
    text-align: center;
}

.password-symbol{
    width:150px;
}




.login-card {
    margin: 150px auto;
    width: 50%;
}

.passwordreset-card {
    margin: 110px auto;
    width: 50%;
}

.register-card {
    margin: 80px auto;
    width: 50%;
}



/* Inputs */
.form-control {
    width: 100%;
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid #efb2ae;
    transition: all 0.2s ease-in-out;
    color: #efb2ae;
}

.form-control:focus {
    border-color: #b59a98;
    box-shadow: 0 0 4px rgba(106, 90, 249, 0.3);
    outline: none;
}

/* Fehlermeldung */
.alert-danger,
.alert-success{
    background: transparent;
    color: #efb2ae;
    border: none;
    padding: 5px;
    border-radius: 10px;
    text-align: center;
}

/* Edit text fields */
.clean-input {
    background: transparent;
    border: none;
    border-bottom: 2px solid #efb2ae;
    border-radius: 0;
    padding: 4px;
    outline: none;
    box-shadow: none;
    width: 100%;
}

.clean-input:focus {
    border-bottom-color: #c3c3c3;
    color: #efb2ae;
    background: transparent;
}
.clean-input:not(:placeholder-shown) {
           border-bottom-color: #c3c3c3;
    background: transparent;
}

/* buttons */

.btn-round {
    background-color: #efb2ae;
    color: black;
    border:none;
    border-radius: 25px;
    min-width: 80px;  /* gleiche Breite optional */
}

.btn-round:hover, 
.btn-round:active,
.btn-round:focus,
.btn-round:checked {
    background-color: #e08f8a; /* etwas dunklerer Ton */
    color: black;              /* Textfarbe beibehalten */
    border: none;
    transform: scale(0.98);     /* Butten wird kleiner bei hover */
}

.boxcontrol-elements ::before {
    content: "";
    position: absolute;  /* verhindert Verschieben */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;         /* hinter dem Inhalt */
}

.boxcontrol-elements {
    margin-top:400px;
    margin-left:20px;
    display: grid;
    grid-template-columns: 140px 100px; /* zwei Spalten, je 150px */
    grid-template-rows: auto auto;      /* zwei Zeilen */
    gap: 10px;                           /* optionaler Abstand */
}

.box {
    width: 100%;       /* feste Breite */
}