:root {
    --primary-color: #efb2ae;
    --hover-color: #e08f8a;
    --mainbackground-color: black;
}


body {
    background: var(--mainbackground-color);
    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:var(--primary-color);
    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: var(--primary-color);
    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 */
}

.locked-since{
    position:absolute;
    top:150px;
    left: 50%;       
    transform: translateX(-50%); 
    text-align: center;
    font-size: 16px;
}
.time-left{
    position:absolute;
    top:180px;
    left: 50%;       
    transform: translateX(-50%); 
    text-align: center;
    font-size: 16px;
}

.protection-level-timer{
    position:absolute;
    top:240px;
    left: 50%;       
    transform: translateX(-50%); 
    text-align: center;
}
.protection-level-password{
    position:absolute;
    top:280px;
    left: 50%;       
    transform: translateX(-50%); 
    text-align: center;
}

.password-symbol{
    width:100px;
}




.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 var(--primary-color);
    transition: all 0.2s ease-in-out;
    color: var(--primary-color);
}

.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: var(--primary-color);
    border: none;
    padding: 5px;
    border-radius: 10px;
    text-align: center;
}


/* Edit text fields */
.form-control.clean-input {
    background: transparent;
    border: none;
    border-bottom: 2px solid var(--primary-color);
    border-radius: 0;
    padding: 4px;
    outline: none;
    box-shadow: none;
    width: 100%;
}

.form-control.clean-input:focus {
    border-bottom-color: #c3c3c3;
    color: var(--primary-color);
    background: transparent;
}
.form-control.clean-input:not(:placeholder-shown) {
    border-bottom-color: #c3c3c3;
    background: transparent;
}
.clean-input::placeholder {
    color: #8f7373;   /* deine Wunschfarbe */
    opacity: 1;       /* wichtig bei Firefox, sonst wird es zu blass */
}


/* buttons */

.btn-round {
    background-color: var(--primary-color);
    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: var(--hover-color); /* 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 */
}



.footer-legal {
    display: flex;
    justify-content: center;  /* Center horizontally */
    gap: 20px;               /* Space between links */
    padding: 20px 0;
    font-size: 14px;
    background-color:transparent; /* Optional: footer bg */
}

.footer-legal a {
    color: var(--primary-color);
    text-decoration: none;
    transition: color 0.2s;
}

.footer-legal a:hover {
    color: var(--hover-color);
}