:root{
    --bg:#00101b;
    --bg2:#041d2b;
    --panel:#0a2234;
    --cyan:#52e5dc;
    --teal:#2eada8;
    --text:#f4f7f9;
    --muted:#d3c9c0;
    --line:#12344a;
    --green:#45c9aa
}

*{
    box-sizing:border-box
}

html,
body{
    margin:0;
    min-height:100%;
    font-family:
        Inter,
        Segoe UI,
        Arial,
        sans-serif;
    background:#00101b;
    color:var(--text)
}

body{
    background:
        radial-gradient(
            circle at 95% 72%,
            rgba(36,145,151,.24),
            transparent 34%
        ),
        linear-gradient(
            120deg,
            #001827 0%,
            #00101b 50%,
            #03141f 100%
        )
}


.topbar{
    height:98px;
    padding:0 52px;
    display:flex;
    align-items:center;
    border-top:1px solid #5f5a51;
    border-bottom:
        1px solid rgba(255,255,255,.03);
    background:
        rgba(0,10,17,.78)
}


.brand{
    display:flex;
    align-items:center;
    padding-right:28px;
    border-right:
        1px solid rgba(255,255,255,.06)
}


.mailadmin-logo{
    max-width:215px;
    max-height:58px;
    object-fit:contain
}


.relogo{
    font-size:39px;
    font-weight:950;
    letter-spacing:-.12em;
    color:#e8f4f5;
    text-shadow:
        4px 4px 0 rgba(55,222,218,.23)
}


.brandtext strong{
    font-size:22px;
    margin-left:10px;
    color:#dbe6e8
}


.title{
    display:flex;
    flex-direction:column;
    margin-left:26px
}


.title strong{
    font-size:26px
}


.title span{
    color:#c9b8aa;
    font-size:16px
}


.online{
    margin-left:auto;
    border:
        1px solid rgba(69,201,170,.25);
    background:
        rgba(22,110,94,.12);
    border-radius:999px;
    padding:10px 18px;
    color:#cbeee6;
    font-weight:700
}


.online i{
    display:inline-block;
    width:10px;
    height:10px;
    background:var(--green);
    border-radius:50%;
    margin-right:10px;
    box-shadow:
        0 0 14px rgba(69,201,170,.7)
}


.login-main{
    min-height:678px;
    display:grid;
    grid-template-columns:
        1fr
        670px;
    gap:75px;
    align-items:center;
    max-width:1520px;
    margin:auto;
    padding:
        50px
        50px
        48px
}


.intro{
    padding-left:48px
}


.kicker{
    color:var(--cyan);
    font-size:18px;
    letter-spacing:.18em;
    font-weight:800
}


.intro h1{
    font-size:78px;
    line-height:.95;
    letter-spacing:-.055em;
    margin:
        26px
        0
        28px
}


.intro h1 em{
    color:var(--cyan);
    font-style:normal
}


.intro p{
    max-width:735px;
    font-size:20px;
    color:#eee6df
}


.intro > strong{
    font-size:20px
}


.login-card{
    background:
        linear-gradient(
            145deg,
            rgba(9,40,60,.96),
            rgba(5,24,38,.97)
        );

    border:
        1px solid rgba(255,255,255,.03);

    border-radius:24px;

    padding:
        38px
        42px
        40px;

    box-shadow:
        0 32px 80px rgba(0,0,0,.28)
}


.dash{
    width:66px;
    height:6px;
    border-radius:8px;

    background:
        linear-gradient(
            90deg,
            #27aaab,
            #318ac1
        );

    margin-bottom:26px
}


.login-card h2{
    font-size:36px;
    margin:0 0 4px
}


.login-card > p{
    font-size:20px;
    color:#dcc9bb;
    margin:0 0 26px
}


.login-card form{
    display:grid;
    gap:16px
}


.login-card label{
    font-size:16px;
    font-weight:750
}


.login-card input{
    display:block;
    width:100%;
    height:61px;
    margin-top:8px;
    background:#00111d;
    border:1px solid #4a7996;
    border-radius:12px;
    color:white;
    padding:0 18px;
    font-size:18px;
    outline:none
}


.login-card input:focus{
    border-color:#34c8c5;
    box-shadow:
        0 0 0 3px rgba(52,200,197,.16)
}


.login-card button{
    height:60px;
    border:0;
    border-radius:11px;

    background:
        linear-gradient(
            90deg,
            #33aaa5,
            #2fb0aa
        );

    color:white;
    font-size:20px;
    font-weight:800;
    margin-top:8px;
    cursor:pointer
}


.notice{
    border-top:
        1px solid rgba(255,255,255,.04);
    padding-top:22px;
    margin-top:26px;
    color:#cfbba9;
    font-size:14px
}


.error{
    background:
        rgba(170,54,54,.15);

    border:
        1px solid rgba(255,100,100,.28);

    padding:12px 14px;
    border-radius:10px;
    margin-bottom:14px;
    color:#ffd7d7
}


footer{
    height:74px;
    background:
        rgba(0,10,17,.75);
    display:flex;
    align-items:center;
    justify-content:center;
    color:#c7d8e0;
    font-size:13px
}


footer span{
    color:var(--cyan)
}


@media(max-width:1100px){

    .login-main{
        grid-template-columns:1fr;
        max-width:760px
    }

    .intro{
        padding-left:0
    }

    .intro h1{
        font-size:64px
    }

    .topbar{
        padding:0 22px
    }

    .title{
        display:none
    }
}


@media(max-width:700px){

    .brandtext{
        display:none
    }

    .login-main{
        padding:30px 18px
    }

    .intro h1{
        font-size:50px
    }

    .login-card{
        padding:26px 22px
    }

    .online{
        font-size:12px
    }

    .topbar{
        height:76px
    }

    .intro p{
        font-size:17px
    }
}


/* ==========================================================
   RADIO EMERGENCY WEBSITE EDITOR
   MAILADMIN DESKTOP LAYOUT FIX V1
   ========================================================== */

@media (min-width: 1101px) {

    html,
    body {
        width: 100%;
        height: 100%;
        min-height: 100%;
        overflow: hidden;
    }


    body {
        display: grid;

        grid-template-rows:
            96px
            minmax(0, 1fr)
            58px;
    }


    /* -------------------------------------------------------
       HEADER
       ------------------------------------------------------- */

    .topbar {
        height: 96px;

        padding:
            0
            52px;

        flex-shrink: 0;
    }


    .mailadmin-logo {
        width: auto;
        height: 52px;

        max-width: 215px;
        max-height: 52px;
    }


    .title {
        margin-left: 26px;
    }


    .title strong {
        font-size: 25px;
        line-height: 1.05;
    }


    .title span {
        margin-top: 3px;

        font-size: 15px;
    }


    .online {
        padding:
            9px
            18px;

        font-size: 16px;
    }


    /* -------------------------------------------------------
       HAUPTBEREICH
       ------------------------------------------------------- */

    .login-main {
        width: 100%;
        height: 100%;
        min-height: 0;

        max-width: 1600px;

        margin:
            0
            auto;

        padding:
            28px
            48px
            24px;

        display: grid;

        grid-template-columns:
            minmax(480px, 1fr)
            minmax(540px, 650px);

        gap: 76px;

        align-items: center;
    }


    /* -------------------------------------------------------
       LINKER BEREICH
       ------------------------------------------------------- */

    .intro {
        padding-left: 45px;

        align-self: center;

        transform:
            translateY(-3px);
    }


    .kicker {
        font-size: 17px;

        letter-spacing: .18em;
    }


    .intro h1 {
        margin:
            22px
            0
            25px;

        font-size:
            clamp(
                58px,
                4.4vw,
                76px
            );

        line-height: .97;

        letter-spacing: -.055em;
    }


    .intro p {
        max-width: 670px;

        margin:
            0
            0
            22px;

        font-size: 18px;

        line-height: 1.45;
    }


    .intro > strong {
        font-size: 18px;
    }


    /* -------------------------------------------------------
       LOGINBOX
       ------------------------------------------------------- */

    .login-card {
        width: 100%;

        max-width: 650px;

        padding:
            36px
            40px
            34px;

        border-radius: 22px;

        align-self: center;

        transform:
            translateY(-4px);
    }


    .dash {
        width: 66px;
        height: 5px;

        margin-bottom: 24px;
    }


    .login-card h2 {
        margin:
            0
            0
            4px;

        font-size: 34px;

        line-height: 1.08;
    }


    .login-card > p {
        margin:
            0
            0
            23px;

        font-size: 18px;

        line-height: 1.35;
    }


    .login-card form {
        gap: 14px;
    }


    .login-card label {
        font-size: 15px;
    }


    .login-card input {
        height: 57px;

        margin-top: 6px;

        padding:
            0
            17px;

        font-size: 17px;
    }


    .login-card button {
        height: 58px;

        margin-top: 7px;

        font-size: 18px;
    }


    .notice {
        margin-top: 22px;

        padding-top: 18px;

        font-size: 13px;

        line-height: 1.42;
    }


    /* -------------------------------------------------------
       FOOTER
       ------------------------------------------------------- */

    footer {
        height: 58px;

        min-height: 58px;

        padding: 0 20px;

        font-size: 12px;

        white-space: nowrap;
    }

}


/* ==========================================================
   KLEINERE NOTEBOOK-DISPLAYS
   ========================================================== */

@media (min-width: 1101px) and (max-height: 780px) {

    body {
        grid-template-rows:
            82px
            minmax(0, 1fr)
            48px;
    }


    .topbar {
        height: 82px;
    }


    .mailadmin-logo {
        height: 46px;
    }


    .login-main {
        padding:
            18px
            48px
            16px;
    }


    .intro h1 {
        margin:
            17px
            0
            18px;

        font-size:
            clamp(
                52px,
                4vw,
                67px
            );
    }


    .intro p {
        margin-bottom: 16px;

        font-size: 16px;
    }


    .intro > strong {
        font-size: 16px;
    }


    .login-card {
        padding:
            28px
            36px
            27px;
    }


    .dash {
        margin-bottom: 19px;
    }


    .login-card h2 {
        font-size: 30px;
    }


    .login-card > p {
        margin-bottom: 18px;

        font-size: 16px;
    }


    .login-card input {
        height: 51px;
    }


    .login-card button {
        height: 52px;
    }


    .notice {
        margin-top: 17px;

        padding-top: 15px;

        font-size: 12px;
    }


    footer {
        height: 48px;
        min-height: 48px;
    }

}


/* ==========================================================
   MOBILE / TABLET
   Weiterhin scrollbar, damit nichts abgeschnitten wird.
   ========================================================== */

@media (max-width: 1100px) {

    html,
    body {
        height: auto;
        min-height: 100%;
        overflow-x: hidden;
        overflow-y: auto;
    }


    body {
        display: block;
    }


    footer {
        min-height: 58px;

        padding:
            18px
            20px;

        height: auto;

        text-align: center;

        white-space: normal;
    }

}