/*
 * RPG Oase
 * Globaler Webseiten-Banner / Header
 *
 * Zuständig ausschließlich für den oberen Seitenbanner.
 */


/* =========================================================
   BANNER / HEADER
   ========================================================= */

.login-banner {

    display: flex;

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

    width: calc(100% - 40px);

    max-width: none;

    height: 150px;

    margin: 20px auto 5px;

    background: var(--color-surface);

    border-radius: var(--radius-medium);

    box-shadow: var(--shadow);

    overflow: hidden;
}


/* =========================================================
   LAYOUT-ABSTAND NACH HEADER
   ========================================================= */

body:has(.login-banner) .site-layout {

    padding-top: 0;

}


/* =========================================================
   BANNER-BILD
   ========================================================= */

.login-banner img {

    display: block;

    width: auto;

    max-width: calc(100% - 40px);

    height: 145px;

    max-height: 145px;

    object-fit: contain;

}


/* =========================================================
   RESPONSIVE
   ========================================================= */


@media (max-width: 1100px) {

    .login-banner {

        width: calc(100% - 40px);

        height: 150px;

        margin: 20px auto 5px;

    }


    .login-banner img {

        height: 145px;

        max-height: 145px;

    }

}



@media (max-width: 800px) {

    .login-banner {

        width: calc(100% - 40px);

        height: 150px;

        margin: 20px auto 5px;

    }


    .login-banner img {

        height: 145px;

        max-height: 145px;

    }

}



@media (max-width: 500px) {

    .login-banner {

        width: calc(100% - 40px);

        height: 150px;

        margin: 10px auto 5px;

    }


    .login-banner img {

        height: 145px;

        max-height: 145px;

    }

}