/* ===== LOGIN FULLSCREEN ===== */

html, body {
    margin:0;
    padding:0;
    height:100%;
}


body.login-page {

    height:100dvh;
    width:100%;

    overflow:hidden;

    font-family:Arial;

    background-image:
        linear-gradient(
            rgba(0,0,0,0.55),
            rgba(0,0,0,0.55)
        ),
        url("../background.png");

    background-size:cover;
    background-position:center;

    display:flex;
    justify-content:center;
    align-items:center;
}


/* Login Box */

.login-box {

    width:320px;
    max-width:90vw;

    padding:30px;

    background:rgba(255,255,255,0.12);

    border-radius:16px;

    backdrop-filter:blur(15px);

    box-shadow:0 10px 40px rgba(0,0,0,0.5);

    text-align:center;

    color:white;

    box-sizing:border-box;
}


.login-box input {

    width:100%;
    padding:10px;
    margin-top:10px;

    border:none;
    border-radius:8px;
}


.login-box input,
.login-box button {

    width:100%;
    padding:10px;
    margin-top:10px;

    border:none;
    border-radius:8px;

    box-sizing:border-box;
}


.login-box button {

    background:#2aa1dd;
    color:white;

    font-size:16px;
    cursor:pointer;
}

.login-box button:hover {

    background:#0088cc;
}
.error {

    border:1px solid #b90707 !important;
    background:rgba(255,0,0,0.1);
}


.error-text {

    color:#b90707;
    margin-top:10px;
    font-size:14px;
}

.pw-box {
    position: relative;
    width: 100%;
}

.pw-box input {
    width: 100%;
    padding: 10px;
    padding-right: 45px;
    box-sizing: border-box;
}

.showpw {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;

    color: #44444496;

    display: flex;
    align-items: center;
    justify-content: center;
	padding-top: 10px;
}


.showpw:hover {

    opacity:1;
}

body.page {

    margin:0;

    min-height:100vh;

    background-image:
        linear-gradient(
            rgba(0,0,0,0.5),
            rgba(0,0,0,0.5)
        ),
        url("../background.png");

    background-size:cover;
    background-position:center;

    font-family:Arial;
}



/* Wrapper */

.wrapper {

    min-height:100vh;

    display:flex;
    flex-direction:column;
}



/* Inhalt */

.content {

    flex:1;

    display:flex;
    justify-content:center;
    align-items:center;
}


/* Bildbereich */

.center-box {

    display:flex;
    gap:40px;

    justify-content:center;
    align-items:center;
}


.imgbox img {

    width:300px;
    height:300px;

    object-fit:cover;

    border-radius:15px;

    border:2px solid white;

    transition:0.2s;
}

.imgbox img:hover {

    transform:scale(1.05);
}


.footer {

    width:100%;
    min-height:60px;

    display:flex;
    justify-content:center;
    align-items:center;

    gap:15px;

    color:white;
}


.footer a {

    color:white;
    text-decoration:none;
}


/* ===== MOBILE FIX ===== */

@media (max-width:700px){

    body {

        height:100dvh;
        overflow:hidden;
    }

    .login-box {

        width:100%;
        max-width:420px;

        padding:25px;
    }

    input, button {

        font-size:16px;
    }

}

/* ===== TURNIER ===== */

.turnier-box {

    width:1000px;
    max-width:95vw;

    padding:25px;

    background:rgba(255,255,255,0.12);

    border-radius:16px;

    backdrop-filter:blur(15px);

    box-shadow:0 10px 40px rgba(0,0,0,0.5);

    color:white;
}


.turnier-box table {

    width:100%;
    border-collapse:collapse;

    margin-top:10px;

    background:rgba(255,255,255,0.15);
}

.turnier-box th {

    text-align:left;
    color:white;

    background:rgba(0,0,0,0.5);

}

.turnier-box td {

    padding:6px;
    border-bottom:1px solid rgba(255,255,255,0.2);
}


.turnier-box input {

    width:40px;
    border-radius:6px;
    border:none;
    padding:3px;
}


.turnier-box button {

    border:none;
    border-radius:6px;
    padding:4px 6px;

    background:#2aa1dd;
    color:white;

    cursor:pointer;
}

.turnier-box button:hover {

    background:#0088cc;
}


.group-box {

    margin-top:20px;
    padding:10px;

    border-radius:10px;

    background:rgba(0,0,0,0.25);
}
.topbar {

    display:flex;
    gap:10px;

    align-items:center;
    margin-bottom:15px;

}

.topbar select {

    padding:6px 10px;
    border-radius:8px;
    border:none;
}

.topbar button {

    padding:6px 12px;
    border-radius:8px;
    border:none;

    background:#2aa1dd;
    color:white;

    cursor:pointer;
}

.topbar button:hover {

    background:#0088cc;
}