/* =========================================================
   AUTHENTICATION PAGE
========================================================= */

.authentication-page {

    width: 100%;

    min-height: 100vh;

    display: flex;

    justify-content: center;

    align-items: center;

    padding: 120px 20px 100px;

}



/* =========================================================
   AUTHENTICATION CARD

   Positionierung bewusst zentral wie bisher.
========================================================= */

.authentication-card {

    width: 100%;

    max-width: 560px;

    padding: 48px 45px;

    display: flex;

    flex-direction: column;

    align-items: center;

    text-align: center;

    gap: 26px;

}



/* =========================================================
   IDENTITY ICON

   Kein Rahmen – bewusst nur das Symbol.
========================================================= */

.authentication-icon {

    display: flex;

    justify-content: center;

    align-items: center;

    margin-bottom: 2px;

}



.entra-id-icon {

    display: flex;

    justify-content: center;

    align-items: center;

    width: 64px;

    height: 64px;

    border: none;

    background: transparent;

}



/* =========================================================
   ENTRA SYMBOL
========================================================= */

.entra-symbol {

    display: flex;

    justify-content: center;

    align-items: center;

    width: 52px;

    height: 52px;

    font-family:
        "Segoe UI",
        Arial,
        sans-serif;

    font-size: 21px;

    font-weight: 300;

    letter-spacing: 0.08em;

    color: rgba(56, 189, 248, 0.90);

    text-shadow:
        0 0 8px rgba(56, 189, 248, 0.22);

}



/* =========================================================
   AUTHENTICATION TEXT
========================================================= */

.authentication-text {

    max-width: 460px;

}



.authentication-text h1 {

    margin: 0 0 18px;

    font-size: 32px;

    font-weight: 300;

    letter-spacing: 0.12em;

    text-transform: uppercase;

    color: #ffffff;

    text-shadow:
        0 0 10px rgba(255, 255, 255, 0.08);

}



.authentication-text p {

    margin: 0 0 14px;

    color: rgba(255, 255, 255, 0.65);

    font-size: 14px;

    line-height: 1.8;

}



.authentication-text p:last-child {

    margin-bottom: 0;

}



/* =========================================================
   TECHNICAL TERMS
========================================================= */

.authentication-text .tech {

    color: rgba(56, 189, 248, 0.85);

    font-family:
        Consolas,
        "Courier New",
        monospace;

    font-size: 1em;

}



/* =========================================================
   LOGIN BUTTON
========================================================= */

.authentication-button {

    margin-top: 4px;

}



/* =========================================================
   INFORMATION
========================================================= */

.authentication-info {

    display: flex;

    flex-direction: column;

    gap: 7px;

    max-width: 390px;

    padding-top: 4px;

}



.info-label {

    color: rgba(255, 255, 255, 0.55);

    font-size: 11px;

    letter-spacing: 0.14em;

    text-transform: uppercase;

}



.info-text {

    color: rgba(255, 255, 255, 0.52);

    font-size: 12px;

    line-height: 1.7;

}



/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

    .authentication-page {

        padding:
            110px 20px 90px;

    }


    .authentication-card {

        padding:
            42px 35px;

    }

}



/* =========================================================
   SMARTPHONE
========================================================= */

@media (max-width: 480px) {

    .authentication-page {

        padding:
            105px 10px 80px;

    }


    .authentication-card {

        max-width: 100%;

        padding:
            34px 22px;

        gap: 22px;

        border-radius: 16px;

    }


    .entra-id-icon {

        width: 56px;

        height: 56px;

    }


    .entra-symbol {

        width: 46px;

        height: 46px;

        font-size: 18px;

    }


    .authentication-text h1 {

        font-size: 25px;

        letter-spacing: 0.09em;

    }


    .authentication-text p {

        font-size: 13px;

        line-height: 1.7;

    }


    .authentication-button {

        width: 100%;

        max-width: 300px;

        text-align: center;

    }


    .authentication-info {

        max-width: 300px;

    }

}