/* Startseite und Anmeldung im gemeinsamen Corporate Design. */
#loginScreen{
    position:relative;
    display:grid;
    grid-template-rows:minmax(0,1fr) auto;
    align-items:center;
    gap:20px;
    min-height:100dvh;
    padding:34px 24px 18px;
    overflow:hidden;
    background:
        radial-gradient(circle at 13% 15%,rgba(129,174,210,.22) 0,transparent 29%),
        radial-gradient(circle at 88% 84%,rgba(149,178,205,.18) 0,transparent 31%),
        linear-gradient(145deg,#f5f9fc 0,#e9f1f7 100%);
}

#loginScreen:before,
#loginScreen:after{
    content:'';
    position:absolute;
    border-radius:50%;
    pointer-events:none;
    filter:blur(2px);
}

#loginScreen:before{
    top:-210px;
    right:-160px;
    width:430px;
    height:430px;
    border:1px solid rgba(49,95,123,.10);
}

#loginScreen:after{
    bottom:-260px;
    left:-200px;
    width:500px;
    height:500px;
    border:1px solid rgba(49,95,123,.08);
}

.login-wrap{
    position:relative;
    z-index:1;
    width:min(100%,800px);
    max-width:none;
    margin:auto;
    padding:0;
}

.login-panel{
    display:grid;
    grid-template-columns:minmax(270px,.88fr) minmax(360px,1.12fr);
    width:100%;
    padding:0;
    overflow:hidden;
    border:1px solid rgba(255,255,255,.86);
    border-radius:27px;
    background:#fff;
    box-shadow:0 25px 65px rgba(25,59,85,.16);
    text-align:left;
    backdrop-filter:none;
}

.login-brand{
    position:relative;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    justify-content:flex-end;
    min-height:470px;
    padding:44px 38px;
    overflow:hidden;
    background:linear-gradient(145deg,#102b4f 0,#173e70 58%,#24577c 100%);
    color:#fff;
}

.login-brand:before{
    content:'';
    position:absolute;
    right:-90px;
    bottom:-105px;
    width:250px;
    height:250px;
    border:1px solid rgba(255,255,255,.13);
    border-radius:50%;
    box-shadow:
        0 0 0 38px rgba(255,255,255,.035),
        0 0 0 76px rgba(255,255,255,.025);
}

.login-brand:after{
    content:'';
    position:absolute;
    top:28px;
    right:30px;
    width:62px;
    height:5px;
    border-radius:999px;
    background:linear-gradient(
        90deg,
        #90bdd7 0 28%,
        rgba(255,255,255,.26) 28% 61%,
        rgba(255,255,255,.12) 61%
    );
}

.login-brand>*{
    position:relative;
    z-index:1;
}

.login-app-title{
    position:absolute;
    top:28px;
    left:30px;
    color:#fff;
    font-size:17px;
    font-weight:850;
    letter-spacing:-.02em;
}

.login-brand-content{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    max-width:330px;
}

.login-brand-logo{
    display:block;
    width:82px;
    height:82px;
    margin:0 0 18px;
    padding:0;
    border-radius:0;
    background:transparent;
    object-fit:contain;
}

.login-brand h1{
    max-width:330px;
    margin:0;
    color:#fff;
    font-size:clamp(28px,3.2vw,37px);
    font-weight:850;
    line-height:1.08;
    letter-spacing:-.035em;
    text-align:left;
}

.login-access{
    display:flex;
    flex-direction:column;
    justify-content:center;
    min-width:0;
    padding:34px 34px 30px;
    background:linear-gradient(145deg,#fff,#fbfdff);
}

.login-pin-section{
    margin:0 0 17px;
    padding:16px;
    border:1px solid #d9e5ec;
    border-radius:16px;
    background:#f3f7f9;
}

.login-pin-label{
    color:#5f7384;
    font-size:11px;
    font-weight:850;
    letter-spacing:.09em;
    text-align:center;
}

.login-panel .pin-display{
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:44px;
    margin:7px 0 0;
    color:#173a56;
    font-size:31px;
    font-weight:850;
    letter-spacing:11px;
    line-height:1;
}

.login-panel .pin-grid{
    gap:9px;
}

.login-panel .pin-grid .btn{
    min-height:50px;
    margin:0;
    padding:9px;
    border:1px solid #d5e2ea;
    border-radius:12px;
    background:#edf3f7;
    color:#173a56;
    font-size:16px;
    font-weight:850;
    box-shadow:none;
    transition:background .14s ease,border-color .14s ease,transform .1s ease;
}

.login-panel .pin-grid .btn:hover{
    border-color:#aabfcd;
    background:#e1ebf0;
    box-shadow:none;
    transform:none;
}

.login-panel .pin-grid .btn:active{
    background:#d7e4ea;
    transform:scale(.98);
}

.login-panel .pin-grid .btn:nth-child(10){
    background:#f4f6f7;
    color:#637786;
}

.login-panel .pin-grid .btn:nth-child(11){
    grid-column:2 / 4;
}

#adminLoginBtn{
    min-height:40px;
    margin:17px 0 0;
    padding:9px 12px;
    border:0;
    border-radius:10px;
    background:transparent;
    color:#536b7d;
    font-size:13px;
    font-weight:750;
}

#adminLoginBtn:hover{
    background:#eef3f6;
    color:#294f69;
}

.login-legal{
    position:relative;
    z-index:1;
    width:min(100%,800px);
    margin:0 auto;
    color:#667b8b;
    text-align:center;
}

.login-version{
    margin-bottom:5px;
    color:#778b99;
    font-size:11px;
    font-weight:850;
    letter-spacing:.07em;
}

.login-legal .legal-links{
    gap:4px;
    margin:0;
}

.login-legal .linkbtn{
    color:#45677f;
    font-size:12px;
    font-weight:700;
    text-decoration:none;
}

.login-legal .linkbtn:hover{
    color:#173a56;
    text-decoration:underline;
}

.login-legal .legal-note{
    max-width:620px;
    margin:7px auto 0;
    color:#7a8b98;
    font-size:11px;
    line-height:1.35;
}

#adminModal{
    background:rgba(9,30,48,.58);
    backdrop-filter:blur(6px);
}

#adminModal .modal-box{
    max-width:430px;
    padding:28px;
    border:1px solid rgba(255,255,255,.8);
    border-radius:22px;
    box-shadow:0 25px 65px rgba(5,24,40,.28);
}

#adminModal .modal-box h2{
    margin:0 0 18px;
    color:#173a56;
    font-size:25px;
    letter-spacing:-.025em;
}

#adminModal .input{
    min-height:48px;
    margin-top:10px;
    border-color:#d5e2ea;
    background:#f8fbfc;
    font-size:15px;
}

#adminModal .btn-primary{
    background:linear-gradient(135deg,#315f7b,#244b68);
}

@media(max-width:760px){
    #loginScreen{
        padding:20px 16px 14px;
        overflow:auto;
    }

    .login-wrap{
        width:min(100%,480px);
    }

    .login-panel{
        grid-template-columns:1fr;
    }

    .login-brand{
        align-items:center;
        justify-content:center;
        min-height:0;
        padding:56px 26px 28px;
        text-align:center;
    }

    .login-app-title{
        top:20px;
        left:22px;
        font-size:15px;
    }

    .login-brand:after{
        top:20px;
        right:22px;
        width:62px;
    }

    .login-brand-content{
        align-items:center;
        max-width:390px;
    }

    .login-brand-logo{
        width:62px;
        height:62px;
        margin:0 0 13px;
    }

    .login-brand h1{
        max-width:390px;
        font-size:28px;
        text-align:center;
    }

    .login-brand:before{
        right:-125px;
        bottom:-165px;
    }

    .login-access{
        padding:25px 25px 22px;
    }
}

@media(max-width:440px){
    #loginScreen{
        align-items:start;
        padding:12px 10px;
    }

    .login-panel{
        border-radius:21px;
    }

    .login-brand{
        padding:23px 20px 21px;
    }

    .login-brand h1{
        font-size:24px;
    }

    .login-access{
        padding:20px 18px 18px;
    }

    .login-panel .pin-grid .btn{
        min-height:47px;
    }

    .login-legal .legal-note{
        display:none;
    }
}

/* Gemeinsame Gerätemodi der Anwendung: Desktop, Tablet und Smartphone. */
@media(min-width:1200px){
    #loginScreen{
        padding:34px 24px 18px;
    }
}

@media(min-width:768px) and (max-width:1199px){
    #loginScreen{
        gap:16px;
        padding:22px 18px 14px;
    }

    .login-wrap,
    .login-legal{
        width:min(100%,800px);
    }

    .login-panel{
        grid-template-columns:minmax(255px,.82fr) minmax(350px,1.18fr);
        border-radius:23px;
    }

    .login-brand{
        min-height:440px;
        padding:38px 32px;
    }

    .login-access{
        padding:28px;
    }
}

@media(max-width:767px){
    #loginScreen{
        display:flex;
        flex-direction:column;
        justify-content:flex-start;
        gap:12px;
        min-height:100dvh;
        padding:
            calc(12px + env(safe-area-inset-top))
            calc(10px + env(safe-area-inset-right))
            calc(12px + env(safe-area-inset-bottom))
            calc(10px + env(safe-area-inset-left));
        overflow-y:auto;
        overflow-x:hidden;
    }

    .login-wrap{
        width:min(100%,480px);
        margin:auto auto 0;
    }

    .login-panel{
        grid-template-columns:1fr;
        border-radius:21px;
    }

    .login-brand{
        align-items:center;
        justify-content:center;
        min-height:0;
        padding:54px 22px 24px;
        text-align:center;
    }

    .login-app-title{
        top:19px;
        left:21px;
        font-size:15px;
    }

    .login-brand:after{
        top:20px;
        right:21px;
    }

    .login-brand-content{
        align-items:center;
        max-width:390px;
    }

    .login-brand-logo{
        width:58px;
        height:58px;
        margin-bottom:12px;
    }

    .login-brand h1{
        max-width:390px;
        font-size:clamp(23px,7vw,29px);
        text-align:center;
    }

    .login-access{
        padding:20px 18px 18px;
    }

    .login-pin-section{
        margin-bottom:13px;
        padding:13px;
    }

    .login-panel .pin-grid .btn{
        min-height:48px;
    }

    .login-legal{
        width:min(100%,480px);
        margin:0 auto auto;
    }
}

@media(max-width:379px){
    .login-brand{
        padding:48px 17px 19px;
    }

    .login-access{
        padding:16px 14px 15px;
    }

    .login-panel .pin-grid{
        gap:7px;
    }

    .login-panel .pin-grid .btn{
        min-height:46px;
    }
}