/*
 * ==========================================================
 * SIHU21TV_RETRIEVER_LOGIN_V3
 * Gleiche Designsprache wie eingeloggtes Portal
 * ==========================================================
 */

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


body.login-body {
    margin: 0 !important;

    color: #222222 !important;

    background:
        radial-gradient(
            circle at 50% -10%,
            rgba(71,161,221,.13),
            transparent 34%
        ),
        #f7f7f5 !important;
}


/* ==========================================================
   SEITE
   ========================================================== */

.login-page {
    position: relative;

    min-height: 100vh !important;

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

    box-sizing: border-box;

    padding:
        125px 22px 48px !important;

    overflow: visible !important;
}


.login-page::before,
.login-page::after {
    display: none !important;
}


/* ==========================================================
   LOGIN CARD
   ========================================================== */

.login-card {
    position: relative !important;

    width: min(100%, 440px) !important;

    box-sizing: border-box;

    padding:
        82px 34px 27px !important;

    overflow: visible !important;

    color: #222222 !important;

    background:
        #ffffff !important;

    border:
        1px solid #ebebeb !important;

    border-radius:
        24px !important;

    box-shadow:
        0 22px 65px rgba(31,45,61,.12),
        0 3px 12px rgba(31,45,61,.04) !important;

    backdrop-filter: none !important;
}


/* kleiner blauer oberer Akzent */
.login-card::before {
    content: "";

    position: absolute;

    top: -1px;
    left: 44px;
    right: 44px;

    height: 3px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #47A1DD,
            transparent
        );

    border-radius:
        999px;
}


/* ==========================================================
   GOLDEN RETRIEVER
   ========================================================== */

.sihu-dog-v3 {
    position: absolute;

    z-index: 20;

    left: 50%;
    top: -118px;

    width: 210px;
    height: 174px;

    transform:
        translateX(-50%);

    pointer-events: none;

    filter:
        drop-shadow(
            0 12px 13px rgba(52,44,32,.18)
        );
}


.sihu-dog-v3 svg {
    width: 100%;
    height: 100%;

    display: block;

    overflow: visible;
}


/* Kopf */
.sihu-dog-v3-head {
    transform-box: fill-box;
    transform-origin: 50% 78%;

    transition:
        transform .28s cubic-bezier(.22,.8,.3,1);
}


/* Benutzername */
.sihu-dog-v3.is-user
.sihu-dog-v3-head {
    transform:
        rotate(-2.5deg)
        translateY(1px);
}


/* Passwort */
.sihu-dog-v3.is-password
.sihu-dog-v3-head {
    transform:
        translateY(4px);
}


/* offene Augen */
.sihu-dog-v3-eyes-open {
    opacity: 1;

    transition:
        opacity .16s ease;
}


/* geschlossene Augen */
.sihu-dog-v3-eyes-closed {
    opacity: 0;

    transition:
        opacity .16s ease;
}


.sihu-dog-v3.is-password
.sihu-dog-v3-eyes-open {
    opacity: 0;
}


.sihu-dog-v3.is-password
.sihu-dog-v3-eyes-closed {
    opacity: 1;
}


.sihu-dog-v3-pupil {
    transform-box: fill-box;
    transform-origin: center;

    transition:
        transform .12s ease;
}


/* Ohren */
.sihu-dog-v3-ear-left,
.sihu-dog-v3-ear-right {
    transform-box: fill-box;
}


.sihu-dog-v3-ear-left {
    transform-origin: 92% 15%;

    animation:
        retrieverV3LeftEar
        6.5s ease-in-out infinite;
}


.sihu-dog-v3-ear-right {
    transform-origin: 8% 15%;

    animation:
        retrieverV3RightEar
        6.5s ease-in-out infinite;

    animation-delay:
        -.7s;
}


@keyframes retrieverV3LeftEar {

    0%,
    87%,
    100% {
        transform: rotate(0);
    }

    91% {
        transform: rotate(-4deg);
    }

    95% {
        transform: rotate(1deg);
    }
}


@keyframes retrieverV3RightEar {

    0%,
    89%,
    100% {
        transform: rotate(0);
    }

    93% {
        transform: rotate(4deg);
    }

    96% {
        transform: rotate(-1deg);
    }
}


/* leichte Atembewegung */
.sihu-dog-v3-body {
    transform-box: fill-box;
    transform-origin: center bottom;

    animation:
        retrieverV3Breathing
        3.8s ease-in-out infinite;
}


@keyframes retrieverV3Breathing {

    0%,
    100% {
        transform:
            scaleY(1);
    }

    50% {
        transform:
            scaleY(1.018);
    }
}


/* Pfoten */
.sihu-dog-v3-paw {
    transform-box: fill-box;

    transform-origin:
        center;

    transition:
        transform .25s ease;
}


.sihu-dog-v3.is-password
.sihu-dog-v3-paw-left {
    transform:
        translate(17px,-35px)
        rotate(15deg);
}


.sihu-dog-v3.is-password
.sihu-dog-v3-paw-right {
    transform:
        translate(-17px,-35px)
        rotate(-15deg);
}


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

.login-header {
    display:
        flex !important;

    flex-direction:
        column;

    align-items:
        center !important;

    gap:
        0 !important;

    margin:
        0 0 24px !important;

    padding:
        0 0 23px !important;

    text-align:
        center;

    border-bottom:
        1px solid #ebebeb;
}


.login-logo {
    width:
        68px !important;

    height:
        68px !important;

    display:
        grid;

    place-items:
        center;

    margin:
        0 auto 14px !important;

    padding:
        7px !important;

    box-sizing:
        border-box;

    overflow:
        hidden;

    background:
        #ffffff !important;

    border:
        1px solid #ebebeb !important;

    border-radius:
        18px !important;

    box-shadow:
        0 9px 25px rgba(34,34,34,.08) !important;
}


.portal-branding-login-logo {
    width:
        100% !important;

    height:
        100% !important;

    display:
        block !important;

    object-fit:
        contain !important;

    border-radius:
        11px;
}


.login-header .eyebrow {
    margin:
        0 0 5px;

    color:
        #2E82BE !important;

    font-family:
        Inter,
        sans-serif !important;

    font-size:
        .72rem;

    font-weight:
        700;

    letter-spacing:
        .11em;

    text-transform:
        uppercase;
}


.login-header h1 {
    margin:
        0 !important;

    color:
        #222222 !important;

    font-family:
        "DM Sans",
        Inter,
        system-ui,
        sans-serif !important;

    font-size:
        1.7rem !important;

    font-weight:
        700 !important;

    line-height:
        1.13;

    letter-spacing:
        -.035em;
}


.login-header p {
    max-width:
        320px;

    margin:
        7px 0 0 !important;

    color:
        #6B6B6B !important;

    font-size:
        .86rem !important;

    line-height:
        1.46;
}


/* ==========================================================
   MELDUNGEN
   ========================================================== */

.login-message {
    margin:
        0 0 17px !important;

    padding:
        11px 13px !important;

    gap:
        9px !important;

    border-radius:
        12px !important;

    font-size:
        .79rem !important;

    line-height:
        1.42;
}


.login-card
.login-error {
    color:
        #9d3139 !important;

    background:
        #fff3f4 !important;

    border:
        1px solid #f1c9cd !important;
}


.login-card
.login-success {
    color:
        #286a4a !important;

    background:
        #eef9f3 !important;

    border:
        1px solid #cce7d8 !important;
}


/* ==========================================================
   FORMULAR
   ========================================================== */

.login-card form {
    display:
        grid;

    gap:
        15px;
}


.login-field {
    display:
        grid !important;

    gap:
        6px !important;
}


.login-field >
span:first-child {
    color:
        #555555 !important;

    font-size:
        .76rem !important;

    font-weight:
        600;
}


.login-input {
    position:
        relative;

    min-height:
        51px;

    display:
        flex !important;

    align-items:
        center;

    padding:
        0 12px;

    box-sizing:
        border-box;

    background:
        #ffffff;

    border:
        1px solid #dedede;

    border-radius:
        13px;

    transition:
        border-color .18s ease,
        box-shadow .18s ease,
        background .18s ease;
}


.login-input:hover {
    border-color:
        #c9c9c9;
}


.login-input:focus-within {
    border-color:
        #47A1DD;

    background:
        #ffffff;

    box-shadow:
        0 0 0 4px
        rgba(71,161,221,.11);
}


.login-input >
.material-symbols-rounded {
    color:
        #8a8a8a;

    font-size:
        21px;
}


.login-card
.login-input input {
    width:
        100%;

    min-width:
        0;

    min-height:
        49px;

    padding:
        0 9px !important;

    color:
        #222222 !important;

    background:
        transparent !important;

    border:
        0 !important;

    outline:
        0 !important;

    box-shadow:
        none !important;

    font-family:
        Inter,
        sans-serif;

    font-size:
        .92rem;
}


/* ==========================================================
   PASSWORT-AUGE
   ========================================================== */

.sihu-password-toggle {
    width:
        37px;

    height:
        37px;

    flex:
        0 0 37px;

    display:
        grid;

    place-items:
        center;

    padding:
        0;

    color:
        #777777;

    background:
        transparent;

    border:
        0;

    border-radius:
        9px;

    cursor:
        pointer;

    transition:
        background .15s ease,
        color .15s ease;
}


.sihu-password-toggle:hover {
    color:
        #222222;

    background:
        #f2f2f0;
}


.sihu-password-toggle
.material-symbols-rounded {
    font-size:
        20px;
}


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

.login-card
.primary-button {
    width:
        100%;

    min-height:
        51px;

    margin-top:
        3px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        8px;

    color:
        #ffffff !important;

    background:
        #47A1DD !important;

    border:
        1px solid #47A1DD !important;

    border-radius:
        13px !important;

    box-shadow:
        0 10px 25px
        rgba(71,161,221,.20);

    font-size:
        .92rem;

    font-weight:
        700;

    cursor:
        pointer;

    transition:
        background .16s ease,
        border-color .16s ease,
        transform .16s ease,
        box-shadow .16s ease;
}


.login-card
.primary-button:hover {
    background:
        #2E82BE !important;

    border-color:
        #2E82BE !important;

    transform:
        translateY(-1px);

    box-shadow:
        0 13px 29px
        rgba(71,161,221,.25);
}


/* ==========================================================
   2FA
   ========================================================== */

.login-secondary-form {
    margin-top:
        8px;
}


.login-secondary-form
.secondary-button {
    width:
        100%;

    min-height:
        45px;

    color:
        #444444;

    background:
        #ffffff;

    border:
        1px solid #dedede;

    border-radius:
        12px;
}


/* ==========================================================
   FOOTER
   ========================================================== */

.login-footer {
    display:
        flex !important;

    align-items:
        center;

    justify-content:
        center;

    gap:
        6px;

    margin-top:
        20px !important;

    padding-top:
        18px;

    color:
        #8a8a8a !important;

    border-top:
        1px solid #ebebeb;

    font-size:
        .72rem;
}


.login-footer
.material-symbols-rounded {
    color:
        #47A1DD;

    font-size:
        16px;
}


/* ==========================================================
   MOBIL
   ========================================================== */

@media (max-width: 520px) {

    .login-page {
        align-items:
            flex-start !important;

        padding:
            116px 13px 24px !important;
    }


    .login-card {
        padding:
            76px 20px 21px !important;

        border-radius:
            21px !important;
    }


    .sihu-dog-v3 {
        width:
            185px;

        height:
            153px;

        top:
            -103px;
    }


    .login-logo {
        width:
            59px !important;

        height:
            59px !important;
    }


    .login-header h1 {
        font-size:
            1.48rem !important;
    }
}


/* ==========================================================
   REDUCED MOTION
   ========================================================== */

@media (prefers-reduced-motion: reduce) {

    .sihu-dog-v3-ear-left,
    .sihu-dog-v3-ear-right,
    .sihu-dog-v3-body {
        animation:
            none !important;
    }


    .sihu-dog-v3-head,
    .sihu-dog-v3-pupil,
    .sihu-dog-v3-paw {
        transition:
            none !important;
    }
}

/* /SIHU21TV_RETRIEVER_LOGIN_V3 */


/* ==========================================================
   SIHU21TV_RETRIEVER_LOGIN_V32
   EIN Retriever-SVG hinter der Karte
   ========================================================== */


/*
 * Die Karte selbst wird zur Layer-Bühne.
 */
.login-card {
    isolation: isolate !important;

    background:
        transparent !important;

    border:
        0 !important;

    box-shadow:
        none !important;

    overflow:
        visible !important;

    padding-top:
        76px !important;
}


/*
 * Weiße eigentliche Login-Karte.
 *
 * Sie liegt VOR dem Hund.
 * Alles vom Hund unterhalb der oberen Kartenkante
 * verschwindet automatisch dahinter.
 */
.login-card::after {
    content: "";

    position: absolute;

    z-index: 1;

    inset: 0;

    pointer-events: none;

    background:
        #ffffff;

    border:
        1px solid #ebebeb;

    border-radius:
        24px;

    box-shadow:
        0 22px 65px rgba(31,45,61,.12),
        0 3px 12px rgba(31,45,61,.04);
}


/*
 * Blauer Akzent weiterhin auf der oberen Kartenkante.
 */
.login-card::before {
    z-index: 3 !important;

    top: -1px !important;

    left: 44px !important;
    right: 44px !important;

    height: 3px !important;

    pointer-events: none;
}


/*
 * Sämtlicher echter Login-Inhalt muss vor
 * der weißen Kartenfläche liegen.
 */
.login-card >
*:not(.sihu-dog-v3) {
    position: relative;

    z-index: 4;
}


/*
 * DER HUND:
 * ein einziges bestehendes SVG.
 *
 * Keine zusätzliche Pfote mehr.
 */
.sihu-dog-v3 {
    z-index: 0 !important;

    width: 232px !important;
    height: 190px !important;

    top: -148px !important;

    filter:
        drop-shadow(
            0 11px 14px rgba(74,51,27,.19)
        );

    animation:
        retrieverV32Body
        4.8s ease-in-out infinite;
}


/*
 * Durch diese Position liegen die vorhandenen SVG-Pfoten
 * genau an der oberen Kartenkante.
 *
 * Was in die Card hineinragt, wird von ::after verdeckt.
 */
.sihu-dog-v3-paw-left,
.sihu-dog-v3-paw-right {
    transition:
        transform .32s cubic-bezier(.2,.8,.3,1);
}


/* ==========================================================
   KÖRPER / ATMUNG
   ========================================================== */

@keyframes retrieverV32Body {

    0%,
    100% {
        transform:
            translateX(-50%)
            translateY(0);
    }

    50% {
        transform:
            translateX(-50%)
            translateY(2px);
    }
}


.sihu-dog-v3-body {
    animation:
        retrieverV32Breathing
        3.6s ease-in-out infinite !important;
}


@keyframes retrieverV32Breathing {

    0%,
    100% {
        transform:
            scaleY(1)
            translateY(0);
    }

    50% {
        transform:
            scaleY(1.025)
            translateY(-1px);
    }
}


/* ==========================================================
   KOPF
   ========================================================== */

.sihu-dog-v3-head {
    animation:
        retrieverV32HeadIdle
        7.4s ease-in-out infinite;
}


@keyframes retrieverV32HeadIdle {

    0%,
    66%,
    100% {
        transform:
            rotate(0deg)
            translateY(0);
    }

    73% {
        transform:
            rotate(-3deg)
            translate(-1px,1px);
    }

    81% {
        transform:
            rotate(2deg)
            translate(1px,0);
    }

    89% {
        transform:
            rotate(-1deg)
            translateY(1px);
    }
}


/*
 * Benutzername:
 * neugierig nach unten zum Eingabefeld schauen.
 */
.sihu-dog-v3.is-user
.sihu-dog-v3-head {
    animation:
        none !important;

    transform:
        rotate(-4deg)
        translate(-3px,4px) !important;
}


/*
 * Passwort:
 * Kopf ein Stück nach unten.
 */
.sihu-dog-v3.is-password
.sihu-dog-v3-head {
    animation:
        none !important;

    transform:
        rotate(1deg)
        translateY(7px) !important;
}


/* ==========================================================
   BLINZELN
   ========================================================== */

.sihu-dog-v3-eyes-open {
    animation:
        retrieverV32EyesOpen
        5.2s infinite;
}


.sihu-dog-v3-eyes-closed {
    animation:
        retrieverV32EyesClosed
        5.2s infinite;
}


@keyframes retrieverV32EyesOpen {

    0%,
    38%,
    42%,
    84%,
    88%,
    100% {
        opacity: 1;
    }

    39%,
    41%,
    85%,
    87% {
        opacity: 0;
    }
}


@keyframes retrieverV32EyesClosed {

    0%,
    38%,
    42%,
    84%,
    88%,
    100% {
        opacity: 0;
    }

    39%,
    41%,
    85%,
    87% {
        opacity: 1;
    }
}


/*
 * Passwort:
 * Augen dauerhaft geschlossen.
 */
.sihu-dog-v3.is-password
.sihu-dog-v3-eyes-open {
    animation:
        none !important;

    opacity:
        0 !important;
}


.sihu-dog-v3.is-password
.sihu-dog-v3-eyes-closed {
    animation:
        none !important;

    opacity:
        1 !important;
}


/* ==========================================================
   OHREN
   ========================================================== */

.sihu-dog-v3-ear-left {
    animation:
        retrieverV32EarLeft
        6.2s ease-in-out infinite !important;
}


.sihu-dog-v3-ear-right {
    animation:
        retrieverV32EarRight
        6.5s ease-in-out infinite !important;

    animation-delay:
        -.8s !important;
}


@keyframes retrieverV32EarLeft {

    0%,
    78%,
    100% {
        transform:
            rotate(0deg);
    }

    84% {
        transform:
            rotate(-6deg);
    }

    89% {
        transform:
            rotate(2deg);
    }
}


@keyframes retrieverV32EarRight {

    0%,
    81%,
    100% {
        transform:
            rotate(0deg);
    }

    86% {
        transform:
            rotate(6deg);
    }

    92% {
        transform:
            rotate(-2deg);
    }
}


/* ==========================================================
   PFOTEN
   ========================================================== */

/*
 * Normalzustand:
 * eine Pfote etwas höher als die andere.
 * Dadurch wirkt es weniger symmetrisch/cartoonhaft.
 */
.sihu-dog-v3-paw-left {
    transform:
        translate(-2px,-3px)
        rotate(-3deg);
}


.sihu-dog-v3-paw-right {
    transform:
        translate(2px,5px)
        rotate(4deg);
}


/*
 * Beim Benutzername-Feld bewegt er eine Pfote leicht.
 */
.sihu-dog-v3.is-user
.sihu-dog-v3-paw-left {
    transform:
        translate(2px,-9px)
        rotate(4deg) !important;
}


/*
 * Beim Passwort gehen die echten vorhandenen SVG-Pfoten
 * Richtung Augen.
 */
.sihu-dog-v3.is-password
.sihu-dog-v3-paw-left {
    transform:
        translate(25px,-47px)
        rotate(24deg) !important;
}


.sihu-dog-v3.is-password
.sihu-dog-v3-paw-right {
    transform:
        translate(-25px,-47px)
        rotate(-24deg) !important;
}


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

/*
 * Weil der Hund jetzt hinter der Karte sitzt,
 * brauchen wir oben weniger künstlichen Leerraum.
 */
.login-header {
    margin-top:
        0 !important;
}


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

@media (max-width: 520px) {

    .login-card {
        padding-top:
            70px !important;
    }


    .login-card::after {
        border-radius:
            21px;
    }


    .sihu-dog-v3 {
        width:
            198px !important;

        height:
            164px !important;

        top:
            -126px !important;
    }
}


/* ==========================================================
   REDUCED MOTION
   ========================================================== */

@media (prefers-reduced-motion: reduce) {

    .sihu-dog-v3,
    .sihu-dog-v3-body,
    .sihu-dog-v3-head,
    .sihu-dog-v3-ear-left,
    .sihu-dog-v3-ear-right,
    .sihu-dog-v3-eyes-open,
    .sihu-dog-v3-eyes-closed {
        animation:
            none !important;
    }
}

/* /SIHU21TV_RETRIEVER_LOGIN_V32 */


/* ==========================================================
   SIHU21TV_RETRIEVER_TYPING_V33
   Reaktionen während der Texteingabe
   ========================================================== */


/* ----------------------------------------------------------
   KURZER IMPULS BEI JEDEM BUCHSTABEN
   ---------------------------------------------------------- */

.sihu-dog-v3.is-typing
.sihu-dog-v3-head {
    animation:
        retrieverV33TypeHead
        .22s cubic-bezier(.2,.8,.3,1) !important;
}


@keyframes retrieverV33TypeHead {

    0% {
        transform:
            rotate(
                calc(
                    var(--dog-type-tilt, 0)
                    * 1deg
                )
            )
            translateY(3px);
    }

    45% {
        transform:
            rotate(
                calc(
                    var(--dog-type-tilt, 0)
                    * 1deg
                )
            )
            translateY(6px);
    }

    100% {
        transform:
            rotate(
                calc(
                    var(--dog-type-tilt, 0)
                    * 1deg
                )
            )
            translateY(3px);
    }
}


/* ----------------------------------------------------------
   BACKSPACE = KURZ VERWUNDERT
   ---------------------------------------------------------- */

.sihu-dog-v3.is-backspace
.sihu-dog-v3-head {
    animation:
        retrieverV33Backspace
        .34s cubic-bezier(.2,.8,.3,1) !important;
}


@keyframes retrieverV33Backspace {

    0% {
        transform:
            rotate(0deg)
            translateY(2px);
    }

    38% {
        transform:
            rotate(7deg)
            translate(3px,-2px);
    }

    70% {
        transform:
            rotate(-3deg)
            translate(-1px,1px);
    }

    100% {
        transform:
            rotate(0deg)
            translateY(2px);
    }
}


/* ----------------------------------------------------------
   OHR-ZUCKEN
   ---------------------------------------------------------- */

.sihu-dog-v3.ear-twitch-left
.sihu-dog-v3-ear-left {
    animation:
        retrieverV33EarTwitchLeft
        .32s ease-out !important;
}


@keyframes retrieverV33EarTwitchLeft {

    0%,
    100% {
        transform:
            rotate(0deg);
    }

    40% {
        transform:
            rotate(-13deg);
    }

    70% {
        transform:
            rotate(4deg);
    }
}


.sihu-dog-v3.ear-twitch-right
.sihu-dog-v3-ear-right {
    animation:
        retrieverV33EarTwitchRight
        .32s ease-out !important;
}


@keyframes retrieverV33EarTwitchRight {

    0%,
    100% {
        transform:
            rotate(0deg);
    }

    40% {
        transform:
            rotate(13deg);
    }

    70% {
        transform:
            rotate(-4deg);
    }
}


/* ----------------------------------------------------------
   PFOTE TIPPEN
   ---------------------------------------------------------- */

.sihu-dog-v3.paw-tap-left
.sihu-dog-v3-paw-left {
    animation:
        retrieverV33PawTapLeft
        .34s ease-out !important;
}


@keyframes retrieverV33PawTapLeft {

    0%,
    100% {
        transform:
            translate(-2px,-3px)
            rotate(-3deg);
    }

    45% {
        transform:
            translate(1px,-12px)
            rotate(5deg);
    }
}


.sihu-dog-v3.paw-tap-right
.sihu-dog-v3-paw-right {
    animation:
        retrieverV33PawTapRight
        .34s ease-out !important;
}


@keyframes retrieverV33PawTapRight {

    0%,
    100% {
        transform:
            translate(2px,5px)
            rotate(4deg);
    }

    45% {
        transform:
            translate(-1px,-8px)
            rotate(-5deg);
    }
}


/* ----------------------------------------------------------
   KLEINE FREUDE NACH EINIGEN ZEICHEN
   ---------------------------------------------------------- */

.sihu-dog-v3.is-happy {
    animation:
        retrieverV33Happy
        .52s cubic-bezier(.2,.85,.35,1) !important;
}


@keyframes retrieverV33Happy {

    0%,
    100% {
        transform:
            translateX(-50%)
            translateY(0);
    }

    32% {
        transform:
            translateX(-50%)
            translateY(-6px);
    }

    60% {
        transform:
            translateX(-50%)
            translateY(2px);
    }

    80% {
        transform:
            translateX(-50%)
            translateY(-2px);
    }
}


/* beide Ohren reagieren bei Freude */
.sihu-dog-v3.is-happy
.sihu-dog-v3-ear-left {
    animation:
        retrieverV33HappyEarLeft
        .5s ease !important;
}


.sihu-dog-v3.is-happy
.sihu-dog-v3-ear-right {
    animation:
        retrieverV33HappyEarRight
        .5s ease !important;
}


@keyframes retrieverV33HappyEarLeft {

    0%,
    100% {
        transform:
            rotate(0);
    }

    45% {
        transform:
            rotate(-8deg);
    }
}


@keyframes retrieverV33HappyEarRight {

    0%,
    100% {
        transform:
            rotate(0);
    }

    45% {
        transform:
            rotate(8deg);
    }
}


/* ----------------------------------------------------------
   PASSWORT TIPPEN
   Augen bleiben zu, Pfoten reagieren abwechselnd
   ---------------------------------------------------------- */

.sihu-dog-v3.is-password.password-type-left
.sihu-dog-v3-paw-left {
    transform:
        translate(27px,-51px)
        rotate(28deg) !important;
}


.sihu-dog-v3.is-password.password-type-right
.sihu-dog-v3-paw-right {
    transform:
        translate(-27px,-51px)
        rotate(-28deg) !important;
}


/* ----------------------------------------------------------
   REDUCED MOTION
   ---------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

    .sihu-dog-v3.is-typing,
    .sihu-dog-v3.is-backspace,
    .sihu-dog-v3.is-happy,
    .sihu-dog-v3.ear-twitch-left,
    .sihu-dog-v3.ear-twitch-right,
    .sihu-dog-v3.paw-tap-left,
    .sihu-dog-v3.paw-tap-right {
        animation:
            none !important;
    }
}

/* /SIHU21TV_RETRIEVER_TYPING_V33 */


/* ==========================================================
   SIHU21TV_LOGIN_NO_SCROLL_V34
   Login vollständig im sichtbaren Browserfenster
   ========================================================== */

html,
body.login-body {
    min-height: 100%;
}


body.login-body {
    overflow-y: auto;
}


.login-page {
    min-height: 100vh !important;

    padding:
        82px 18px 20px !important;

    align-items:
        center !important;

    box-sizing:
        border-box;
}


/* ==========================================================
   CARD KOMPAKTER
   ========================================================== */

.login-card {
    width:
        min(100%, 410px) !important;

    padding:
        61px 28px 19px !important;
}


.login-card::after {
    border-radius:
        22px !important;
}


/* ==========================================================
   HUND KLEINER / BESSERES VERHÄLTNIS
   ========================================================== */

.sihu-dog-v3 {
    width:
        192px !important;

    height:
        158px !important;

    top:
        -118px !important;
}


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

.login-header {
    margin-bottom:
        17px !important;

    padding-bottom:
        16px !important;
}


.login-logo {
    width:
        54px !important;

    height:
        54px !important;

    margin-bottom:
        9px !important;

    border-radius:
        15px !important;
}


.login-header .eyebrow {
    margin-bottom:
        3px !important;

    font-size:
        .66rem !important;
}


.login-header h1 {
    font-size:
        1.48rem !important;
}


.login-header p {
    margin-top:
        4px !important;

    font-size:
        .79rem !important;
}


/* ==========================================================
   MELDUNGEN
   ========================================================== */

.login-message {
    margin-bottom:
        12px !important;

    padding:
        9px 11px !important;

    font-size:
        .73rem !important;

    line-height:
        1.35 !important;
}


/* ==========================================================
   FORMULAR
   ========================================================== */

.login-card form {
    gap:
        11px !important;
}


.login-field {
    gap:
        4px !important;
}


.login-field > span:first-child {
    font-size:
        .70rem !important;
}


.login-input {
    min-height:
        44px !important;

    border-radius:
        11px !important;
}


.login-card
.login-input input {
    min-height:
        42px !important;

    font-size:
        .86rem !important;
}


.login-input >
.material-symbols-rounded {
    font-size:
        19px !important;
}


.sihu-password-toggle {
    width:
        34px !important;

    height:
        34px !important;

    flex-basis:
        34px !important;
}


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

.login-card
.primary-button {
    min-height:
        45px !important;

    margin-top:
        0 !important;

    border-radius:
        11px !important;

    font-size:
        .86rem !important;
}


/* ==========================================================
   FOOTER
   ========================================================== */

.login-footer {
    margin-top:
        14px !important;

    padding-top:
        12px !important;

    font-size:
        .67rem !important;
}


/* ==========================================================
   KLEINERE DESKTOP-HÖHEN
   ========================================================== */

@media (max-height: 820px) and (min-width: 521px) {

    .login-page {
        padding:
            68px 16px 14px !important;
    }


    .login-card {
        width:
            min(100%, 390px) !important;

        padding:
            54px 25px 16px !important;
    }


    .sihu-dog-v3 {
        width:
            174px !important;

        height:
            144px !important;

        top:
            -105px !important;
    }


    .login-header {
        margin-bottom:
            13px !important;

        padding-bottom:
            13px !important;
    }


    .login-logo {
        width:
            47px !important;

        height:
            47px !important;

        margin-bottom:
            7px !important;
    }


    .login-header h1 {
        font-size:
            1.34rem !important;
    }


    .login-header p {
        font-size:
            .74rem !important;
    }


    .login-message {
        margin-bottom:
            9px !important;

        padding:
            8px 10px !important;
    }


    .login-card form {
        gap:
            9px !important;
    }


    .login-input {
        min-height:
            41px !important;
    }


    .login-card
    .login-input input {
        min-height:
            39px !important;
    }


    .login-card
    .primary-button {
        min-height:
            42px !important;
    }


    .login-footer {
        margin-top:
            10px !important;

        padding-top:
            9px !important;
    }
}


/* ==========================================================
   SEHR NIEDRIGE FENSTER
   ========================================================== */

@media (max-height: 690px) and (min-width: 521px) {

    .login-page {
        align-items:
            flex-start !important;

        padding-top:
            62px !important;
    }


    .sihu-dog-v3 {
        width:
            156px !important;

        height:
            129px !important;

        top:
            -94px !important;
    }


    .login-card {
        padding-top:
            48px !important;
    }


    .login-header p {
        display:
            none;
    }


    .login-footer {
        display:
            none !important;
    }
}


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

@media (max-width: 520px) {

    .login-page {
        padding:
            92px 12px 16px !important;

        align-items:
            flex-start !important;
    }


    .login-card {
        width:
            100% !important;

        padding:
            58px 18px 18px !important;
    }


    .sihu-dog-v3 {
        width:
            166px !important;

        height:
            137px !important;

        top:
            -101px !important;
    }


    .login-header h1 {
        font-size:
            1.36rem !important;
    }
}

/* /SIHU21TV_LOGIN_NO_SCROLL_V34 */


/* ==========================================================
   SIHU21TV_LOGIN_POSITION_V35
   Gesamte Login-Komposition etwas weiter nach unten
   ========================================================== */


/*
 * Desktop:
 * Karte + Retriever gemeinsam 32px nach unten.
 *
 * Weil der Retriever absolut innerhalb der Karte sitzt,
 * bleibt sein Verhältnis zur Kartenkante unverändert.
 */
.login-card {
    transform:
        translateY(32px) !important;
}


/*
 * Genug Raum am unteren Rand lassen.
 */
.login-page {
    padding-bottom:
        34px !important;
}


/* ==========================================================
   MITTLERE / NIEDRIGERE DESKTOPFENSTER
   ========================================================== */

@media
    (max-height: 820px)
    and (min-width: 521px)
{

    .login-card {
        transform:
            translateY(20px) !important;
    }

    .login-page {
        padding-bottom:
            24px !important;
    }
}


/*
 * Bei sehr niedrigen Browserfenstern weniger verschieben,
 * damit weiterhin kein Scrollen notwendig wird.
 */
@media
    (max-height: 690px)
    and (min-width: 521px)
{

    .login-card {
        transform:
            translateY(10px) !important;
    }
}


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

@media (max-width: 520px) {

    .login-card {
        transform:
            translateY(18px) !important;
    }

    .login-page {
        padding-bottom:
            24px !important;
    }
}


/* ==========================================================
   SEHR KLEINE SMARTPHONES
   ========================================================== */

@media
    (max-width: 520px)
    and (max-height: 700px)
{

    .login-card {
        transform:
            translateY(8px) !important;
    }
}


/* /SIHU21TV_LOGIN_POSITION_V35 */


/* ==========================================================
   SIHU21TV_LOGIN_DOG_CUTOFF_V36
   Hund oben nicht mehr abgeschnitten
   ========================================================== */

/*
 * Die gesamte Loginfläche bekommt oben mehr Luft.
 * Gleichzeitig darf der Hund sichtbar über die Karte ragen.
 */
body.login-page,
.login-page,
.login-shell,
.login-stage,
.login-wrapper {
    overflow-x: hidden !important;
    overflow-y: auto !important;
}

/*
 * Mehr Abstand oben, damit der Hund vollständig sichtbar bleibt.
 */
.login-page,
.login-shell,
.login-stage,
.login-wrapper {
    padding-top: 120px !important;
    min-height: 100svh !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: center !important;
}

/*
 * Login-Karte selbst darf nichts abschneiden.
 */
.login-card,
.login-panel,
.login-box,
.login-card-wrap {
    position: relative !important;
    overflow: visible !important;
}

/*
 * Die bisherige Verschiebung leicht zurücknehmen,
 * damit oben genug Luft bleibt.
 */
.login-card {
    transform: translateY(0) !important;
    margin-top: 0 !important;
}

/*
 * Hund tiefer setzen, damit er nicht zu weit nach oben ragt.
 * Mehrere mögliche Klassennamen abgesichert.
 */
.login-retriever,
.retriever-login,
.retriever-mascot,
.login-dog,
[data-login-retriever] {
    position: absolute !important;
    left: 50% !important;
    top: -96px !important;
    transform: translateX(-50%) !important;
    z-index: 6 !important;
    pointer-events: none !important;
}

/*
 * Falls der Hund in einem extra Wrap steckt.
 */
.login-retriever-wrap,
.retriever-wrap,
.login-dog-wrap,
[data-login-retriever-wrap] {
    position: absolute !important;
    left: 50% !important;
    top: -96px !important;
    transform: translateX(-50%) !important;
    z-index: 6 !important;
    pointer-events: none !important;
    overflow: visible !important;
}

/*
 * Kleine Sicherheit: Pfoten / einzelne Teile auch sichtbar halten.
 */
.login-retriever *,
.retriever-login *,
.retriever-mascot *,
.login-dog *,
[data-login-retriever] * {
    overflow: visible !important;
}

/* ==========================================================
   NIEDRIGERE NOTEBOOKS
   ========================================================== */

@media (max-height: 860px) {

    .login-page,
    .login-shell,
    .login-stage,
    .login-wrapper {
        padding-top: 98px !important;
    }

    .login-retriever,
    .retriever-login,
    .retriever-mascot,
    .login-dog,
    [data-login-retriever],
    .login-retriever-wrap,
    .retriever-wrap,
    .login-dog-wrap,
    [data-login-retriever-wrap] {
        top: -82px !important;
    }
}

/* ==========================================================
   SEHR NIEDRIGE DESKTOPFENSTER
   ========================================================== */

@media (max-height: 760px) {

    .login-page,
    .login-shell,
    .login-stage,
    .login-wrapper {
        padding-top: 82px !important;
    }

    .login-retriever,
    .retriever-login,
    .retriever-mascot,
    .login-dog,
    [data-login-retriever],
    .login-retriever-wrap,
    .retriever-wrap,
    .login-dog-wrap,
    [data-login-retriever-wrap] {
        top: -68px !important;
    }
}

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

@media (max-width: 720px) {

    .login-page,
    .login-shell,
    .login-stage,
    .login-wrapper {
        padding-top: 90px !important;
    }

    .login-retriever,
    .retriever-login,
    .retriever-mascot,
    .login-dog,
    [data-login-retriever],
    .login-retriever-wrap,
    .retriever-wrap,
    .login-dog-wrap,
    [data-login-retriever-wrap] {
        top: -74px !important;
    }
}

/* /SIHU21TV_LOGIN_DOG_CUTOFF_V36 */


/* ==========================================================
   SIHU21TV_PUBLIC_LEGAL_FOOTER_V1
   ========================================================== */

.login-public-legal {
    position: fixed;

    z-index: 30;

    left: 50%;
    bottom: 10px;

    width: min(
        calc(100% - 28px),
        900px
    );

    transform: translateX(-50%);

    text-align: center;

    pointer-events: auto;
}


.login-public-legal-nav {
    display: flex;

    flex-wrap: wrap;

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

    gap:
        3px 14px;
}


.login-public-legal-nav a {
    color:
        #777777;

    font-size:
        .68rem;

    font-weight:
        500;

    text-decoration:
        none;

    transition:
        color .15s ease;
}


.login-public-legal-nav a:hover {
    color:
        #2E82BE;
}


.login-public-legal-copy {
    display: block;

    margin-top:
        5px;

    color:
        #aaaaaa;

    font-size:
        .61rem;
}


@media (max-width: 620px) {

    .login-public-legal {
        bottom:
            7px;
    }


    .login-public-legal-nav {
        gap:
            2px 9px;
    }


    .login-public-legal-nav a {
        font-size:
            .64rem;
    }
}


/*
 * Auf extrem niedrigen Fenstern bleibt die Navigation
 * erreichbar, ohne die Login-Karte stark zu überdecken.
 */
@media (max-height: 650px) {

    .login-public-legal {
        position:
            static;

        width:
            calc(100% - 24px);

        margin:
            20px auto 10px;

        transform:
            none;
    }
}

/* /SIHU21TV_PUBLIC_LEGAL_FOOTER_V1 */


/* ==========================================================
   SIHU21TV_LOGIN_LAYOUT_FOOTER_V38
   Login wieder zentriert + Footer unten
   ========================================================== */


/* ----------------------------------------------------------
   BODY
   ---------------------------------------------------------- */

body.login-body {
    position: relative !important;

    min-height: 100dvh !important;

    margin: 0 !important;

    overflow-x: hidden !important;

    background:
        radial-gradient(
            circle at 50% 7%,
            rgba(71,161,221,.10),
            transparent 32%
        ),
        #F7F7F5 !important;
}


/* ----------------------------------------------------------
   LOGIN-BEREICH
   ---------------------------------------------------------- */

.login-page {
    width: 100% !important;

    min-height: 100dvh !important;

    display: flex !important;

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

    box-sizing: border-box !important;

    /*
     * Oben genug Luft für den Retriever,
     * unten Platz für den Legal-Footer.
     */
    padding:
        118px
        18px
        72px !important;

    overflow: visible !important;
}


/* ----------------------------------------------------------
   LOGIN-KARTE
   ---------------------------------------------------------- */

.login-card {
    width: min(100%, 410px) !important;

    margin: 0 auto !important;

    transform: none !important;

    flex:
        0 0 auto !important;

    position: relative !important;

    overflow: visible !important;

    padding:
        58px
        28px
        20px !important;
}


/* Weiße Kartenfläche */
.login-card::after {
    border-radius:
        22px !important;
}


/* ----------------------------------------------------------
   RETRIEVER
   ---------------------------------------------------------- */

.sihu-dog-v3 {
    /*
     * Nicht mehr an die obere Browserkante drücken.
     */
    width:
        180px !important;

    height:
        149px !important;

    top:
        -108px !important;

    left:
        50% !important;

    z-index:
        0 !important;
}


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

.login-header {
    margin:
        0 0 14px !important;

    padding:
        0 0 14px !important;
}


.login-logo {
    width:
        49px !important;

    height:
        49px !important;

    margin:
        0 auto 7px !important;
}


.login-header h1 {
    font-size:
        1.38rem !important;
}


.login-header p {
    margin-top:
        4px !important;

    font-size:
        .76rem !important;
}


/* ----------------------------------------------------------
   WARTUNGSHINWEIS
   ---------------------------------------------------------- */

.login-message {
    margin-bottom:
        11px !important;

    padding:
        9px 11px !important;

    font-size:
        .71rem !important;

    line-height:
        1.35 !important;
}


/* ----------------------------------------------------------
   FORM
   ---------------------------------------------------------- */

.login-card form {
    gap:
        10px !important;
}


.login-field {
    gap:
        4px !important;
}


.login-field > span:first-child {
    font-size:
        .70rem !important;
}


.login-input {
    min-height:
        43px !important;
}


.login-card
.login-input input {
    min-height:
        41px !important;
}


.login-card
.primary-button {
    min-height:
        43px !important;

    margin-top:
        1px !important;
}


/* ----------------------------------------------------------
   ALTER INNERER FOOTER
   ---------------------------------------------------------- */

.login-footer {
    margin-top:
        10px !important;

    padding-top:
        9px !important;
}


/* ----------------------------------------------------------
   ÖFFENTLICHER LEGAL-FOOTER
   ---------------------------------------------------------- */

.login-public-legal {
    position: fixed !important;

    z-index: 50 !important;

    left: 50% !important;
    right: auto !important;

    bottom: 10px !important;

    width:
        min(900px, calc(100% - 28px)) !important;

    margin:
        0 !important;

    transform:
        translateX(-50%) !important;

    text-align:
        center !important;

    pointer-events:
        auto !important;
}


.login-public-legal-nav {
    display:
        flex !important;

    flex-wrap:
        wrap !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    gap:
        4px 14px !important;
}


.login-public-legal-nav a {
    color:
        #717171 !important;

    font-size:
        .67rem !important;

    font-weight:
        500 !important;

    text-decoration:
        none !important;
}


.login-public-legal-nav a:hover {
    color:
        #2E82BE !important;
}


.login-public-legal-copy {
    display:
        block !important;

    margin-top:
        4px !important;

    color:
        #A0A0A0 !important;

    font-size:
        .60rem !important;
}


/* ==========================================================
   NOTEBOOK / KLEINERE HÖHE
   ========================================================== */

@media
    (max-height: 820px)
    and (min-width: 521px)
{

    .login-page {
        padding:
            98px
            16px
            61px !important;
    }


    .login-card {
        width:
            min(100%, 390px) !important;

        padding:
            51px
            24px
            16px !important;
    }


    .sihu-dog-v3 {
        width:
            164px !important;

        height:
            136px !important;

        top:
            -97px !important;
    }


    .login-header {
        margin-bottom:
            11px !important;

        padding-bottom:
            11px !important;
    }


    .login-logo {
        width:
            44px !important;

        height:
            44px !important;
    }


    .login-header h1 {
        font-size:
            1.27rem !important;
    }


    .login-message {
        padding:
            7px 9px !important;

        margin-bottom:
            8px !important;

        font-size:
            .67rem !important;
    }


    .login-card form {
        gap:
            8px !important;
    }


    .login-input {
        min-height:
            39px !important;
    }


    .login-card
    .login-input input {
        min-height:
            37px !important;
    }


    .login-card
    .primary-button {
        min-height:
            40px !important;
    }
}


/* ==========================================================
   SEHR NIEDRIG
   ========================================================== */

@media
    (max-height: 690px)
    and (min-width: 521px)
{

    .login-page {
        align-items:
            flex-start !important;

        padding-top:
            84px !important;
    }


    .sihu-dog-v3 {
        width:
            148px !important;

        height:
            123px !important;

        top:
            -86px !important;
    }


    .login-card {
        padding-top:
            44px !important;
    }


    .login-header p {
        display:
            none !important;
    }


    .login-footer {
        display:
            none !important;
    }


    /*
     * Falls der Footer sonst überlappt,
     * wird er Bestandteil des normalen Flows.
     */
    .login-public-legal {
        position:
            static !important;

        width:
            calc(100% - 24px) !important;

        margin:
            14px auto 8px !important;

        transform:
            none !important;
    }
}


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

@media (max-width: 520px) {

    .login-page {
        align-items:
            flex-start !important;

        padding:
            100px
            12px
            78px !important;
    }


    .login-card {
        width:
            100% !important;

        padding:
            52px
            18px
            17px !important;
    }


    .sihu-dog-v3 {
        width:
            158px !important;

        height:
            131px !important;

        top:
            -93px !important;
    }


    .login-public-legal-nav {
        gap:
            3px 9px !important;
    }
}

/* /SIHU21TV_LOGIN_LAYOUT_FOOTER_V38 */


/* ==========================================================
   SIHU21TV_LOGIN_LEGAL_FOOTER_V39
   Legal-Navigation direkt unter der Login-Karte
   ========================================================== */


/*
 * Body wird zum vertikalen Layout.
 */
body.login-body {
    display: flex !important;
    flex-direction: column !important;

    min-height: 100dvh !important;
}


/*
 * Login-Bereich braucht nicht mehr künstlich
 * Platz für einen fixierten Footer.
 */
.login-page {
    flex: 0 0 auto !important;

    min-height: auto !important;

    padding-bottom: 20px !important;
}


/*
 * Öffentlicher Footer direkt nach dem Login.
 */
.login-public-legal {
    position: static !important;

    z-index: auto !important;

    left: auto !important;
    right: auto !important;
    bottom: auto !important;

    width: min(
        900px,
        calc(100% - 28px)
    ) !important;

    margin:
        10px auto 22px !important;

    transform: none !important;

    text-align: center !important;
}


/*
 * Links schön kompakt.
 */
.login-public-legal-nav {
    display: flex !important;

    flex-wrap: wrap !important;

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

    gap:
        4px 14px !important;
}


.login-public-legal-nav a {
    color:
        #717171 !important;

    font-size:
        .68rem !important;

    font-weight:
        500 !important;

    text-decoration:
        none !important;
}


.login-public-legal-nav a:hover {
    color:
        #2E82BE !important;
}


.login-public-legal-copy {
    display: block !important;

    margin-top:
        5px !important;

    color:
        #A0A0A0 !important;

    font-size:
        .61rem !important;
}


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

@media (max-width: 520px) {

    .login-page {
        padding-bottom:
            12px !important;
    }


    .login-public-legal {
        margin:
            8px auto 18px !important;
    }


    .login-public-legal-nav {
        gap:
            3px 9px !important;
    }
}


/* /SIHU21TV_LOGIN_LEGAL_FOOTER_V39 */