/* Mein-Rosapineta 1.6.0 – eigenständige Login- und Registrierungsoberfläche */

body.page-login,
body.page-register {
    --auth-ink: #102e59;
    --auth-copy: #60758d;
    --auth-line: #d5e3ee;
    --auth-blue: #0875ed;
    --auth-turquoise: #18add1;
    min-height: 100dvh;
    margin: 0;
    overflow-x: hidden;
    color: var(--auth-ink);
    background: #eaf6fb;
    font-family: Arial, Helvetica, sans-serif;
}

body.page-login .skip-link,
body.page-register .skip-link,
body.page-login .site-header,
body.page-register .site-header,
body.page-login .site-footer,
body.page-register .site-footer,
body.page-login .mobile-bottom-nav,
body.page-register .mobile-bottom-nav,
body.page-login .mr-app-page-header,
body.page-register .mr-app-page-header,
body.page-login .mr-app-bottom-nav,
body.page-register .mr-app-bottom-nav,
body.page-login .mr-app-page-menu,
body.page-register .mr-app-page-menu {
    display: none !important;
}

body.page-login .site-main,
body.page-register .site-main {
    position: relative;
    isolation: isolate;
    width: 100%;
    max-width: none;
    min-height: 100dvh;
    display: grid;
    place-items: center;
    margin: 0;
    padding: clamp(20px, 4vw, 52px);
    overflow: hidden;
    background:
        radial-gradient(circle at 8% 12%, rgba(70, 190, 231, .22), transparent 26rem),
        radial-gradient(circle at 92% 8%, rgba(255, 214, 90, .2), transparent 23rem),
        linear-gradient(145deg, #eaf8ff 0%, #f8fcff 48%, #fff8e8 100%);
}

body.page-login .site-main::before,
body.page-register .site-main::before {
    content: "";
    position: fixed;
    z-index: -2;
    inset: -28px;
    background-image:
        linear-gradient(110deg, rgba(9, 40, 75, .5), rgba(10, 63, 99, .12) 48%, rgba(255, 248, 230, .42)),
        url('/app-native/welcome-rosolina-sunrise-180l.webp?v=180m');
    background-image:
        linear-gradient(110deg, rgba(9, 40, 75, .5), rgba(10, 63, 99, .12) 48%, rgba(255, 248, 230, .42)),
        image-set(
            url('/app-native/welcome-rosolina-sunrise-180l.avif?v=180m') type('image/avif'),
            url('/app-native/welcome-rosolina-sunrise-180l.webp?v=180m') type('image/webp')
        );
    background-position: center 60%;
    background-size: cover;
    filter: blur(13px) saturate(.86);
    transform: scale(1.04);
    opacity: .42;
}

body.page-login .site-main::after,
body.page-register .site-main::after {
    content: "";
    position: fixed;
    z-index: -1;
    inset: 0;
    background: linear-gradient(110deg, rgba(235, 248, 255, .82), rgba(255, 255, 255, .74) 52%, rgba(255, 249, 235, .84));
    pointer-events: none;
}

.page-login .auth-layout,
.page-register .auth-layout {
    position: relative;
    z-index: 1;
    width: min(1080px, 100%);
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(360px, .92fr);
    gap: 18px;
    align-items: stretch;
    margin: 0 auto;
}

.page-register .auth-register-layout {
    width: min(1160px, 100%);
    grid-template-columns: minmax(0, 1.22fr) minmax(340px, .78fr);
    align-items: start;
}

.page-login .auth-card,
.page-register .auth-card,
.page-login .auth-side,
.page-register .auth-side {
    border: 1px solid rgba(255, 255, 255, .86);
    border-radius: 32px;
    box-shadow: 0 28px 80px rgba(7, 42, 78, .2);
}

.page-login .auth-card,
.page-register .auth-card {
    min-width: 0;
    padding: clamp(26px, 4vw, 44px);
    color: var(--auth-ink);
    background: linear-gradient(155deg, rgba(255, 255, 255, .98), rgba(245, 251, 255, .95));
    -webkit-backdrop-filter: blur(22px) saturate(1.08);
    backdrop-filter: blur(22px) saturate(1.08);
}

.page-login .auth-brand-row,
.page-register .auth-brand-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 28px;
}

.page-login .auth-brand,
.page-register .auth-brand {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    color: #0d355e;
    text-decoration: none;
}

.page-login .auth-brand img,
.page-register .auth-brand img {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    display: block;
    object-fit: cover;
    border: 1px solid rgba(40, 113, 153, .12);
    border-radius: 15px;
    box-shadow: 0 7px 18px rgba(7, 59, 83, .15);
}

.page-login .auth-brand span,
.page-register .auth-brand span {
    min-width: 0;
    display: grid;
    gap: 3px;
}

.page-login .auth-brand strong,
.page-register .auth-brand strong {
    overflow: hidden;
    font-size: 18px;
    font-weight: 900;
    line-height: 1.05;
    letter-spacing: -.035em;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.page-login .auth-brand small,
.page-register .auth-brand small {
    color: #287083;
    font-size: 6.5px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: .14em;
}

.page-login .auth-return-link,
.page-register .auth-return-link {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 0 13px;
    border: 1px solid #d5e5ef;
    border-radius: 13px;
    color: #315b7d;
    background: rgba(244, 250, 254, .9);
    font-size: 12px;
    font-weight: 800;
    text-decoration: none;
}

.page-login .auth-icon,
.page-register .auth-icon {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    margin-bottom: 13px;
    border-radius: 16px;
    background: linear-gradient(145deg, #e8f6ff, #f3fbff);
    box-shadow: inset 0 0 0 1px rgba(45, 137, 205, .06);
    font-size: 24px;
}

.page-login .eyebrow,
.page-register .eyebrow {
    margin: 0 0 7px;
    color: #0872e6;
    font-size: 10px;
    font-weight: 900;
    line-height: 1.2;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.page-login .auth-card h1,
.page-register .auth-card h1 {
    margin: 0;
    color: #102e59;
    font-size: clamp(30px, 4vw, 42px);
    line-height: 1.03;
    letter-spacing: -.045em;
}

.page-login .auth-intro,
.page-register .auth-intro {
    max-width: 610px;
    margin: 13px 0 24px;
    color: var(--auth-copy);
    font-size: 14px;
    line-height: 1.6;
}

.page-login .auth-card form,
.page-register .auth-card form {
    display: grid;
    gap: 15px;
}

.page-login .form-row,
.page-register .form-row {
    min-width: 0;
    display: grid;
    gap: 7px;
    margin: 0;
}

.page-login .form-row label,
.page-register .form-row label {
    color: #17375e;
    font-size: 12px;
    font-weight: 900;
}

.page-login .form-row input,
.page-register .form-row input,
.page-register .form-row select {
    width: 100%;
    min-width: 0;
    min-height: 52px;
    margin: 0;
    padding: 12px 14px;
    border: 1px solid #cfdeea;
    border-radius: 15px;
    outline: 0;
    color: #15365e;
    background: rgba(255, 255, 255, .96);
    box-shadow: inset 0 1px 2px rgba(12, 53, 89, .035);
    font: inherit;
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.page-login .form-row input:focus,
.page-register .form-row input:focus,
.page-register .form-row select:focus {
    border-color: #55a8ec;
    background: #fff;
    box-shadow: 0 0 0 4px rgba(8, 117, 237, .11);
}

.page-register .grid.two {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 13px;
}

.page-login .auth-card button.full,
.page-register .auth-card button.full {
    width: 100%;
    min-height: 52px;
    margin: 2px 0 0;
    padding: 12px 18px;
    border: 0;
    border-radius: 15px;
    color: #fff;
    background: linear-gradient(112deg, var(--auth-blue), #1688e8 55%, var(--auth-turquoise));
    box-shadow: 0 12px 28px rgba(8, 113, 222, .24), inset 0 1px rgba(255, 255, 255, .22);
    font-size: 14px;
    font-weight: 900;
    cursor: pointer;
}

.page-login .auth-foot,
.page-register .auth-foot {
    margin: 19px 0 0;
    color: #647b91;
    font-size: 13px;
    line-height: 1.45;
    text-align: center;
}

.page-login .auth-foot a,
.page-register .auth-foot a {
    color: #0872df;
    font-weight: 900;
}

.page-register label.profile-check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 13px;
    border: 1px solid #dce8f1;
    border-radius: 14px;
    color: #365a78;
    background: #f7fbfe;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.45;
}

.page-register label.profile-check input {
    width: 19px;
    height: 19px;
    min-width: 19px;
    flex: 0 0 19px;
    margin: 1px 0 0;
    accent-color: #0875ed;
}

.page-register .auth-privacy {
    margin: 0;
    padding: 11px 13px;
    border-radius: 13px;
    color: #627990;
    background: #eef6fb;
    font-size: 11px;
    line-height: 1.5;
}

.page-login .notice,
.page-register .notice {
    margin: 0 0 18px;
    padding: 12px 14px;
    border: 1px solid #f3c4c8;
    border-radius: 14px;
    color: #9d2632;
    background: #fff2f3;
    font-size: 13px;
    line-height: 1.45;
}

.page-login .auth-side,
.page-register .auth-side {
    position: relative;
    isolation: isolate;
    min-height: 620px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    overflow: hidden;
    padding: 36px;
    color: #fff;
    background-image:
        linear-gradient(180deg, rgba(5, 33, 62, .06), rgba(5, 31, 57, .8) 73%, rgba(4, 25, 48, .94)),
        url('/app-native/welcome-rosolina-sunrise-180l.webp?v=180m');
    background-image:
        linear-gradient(180deg, rgba(5, 33, 62, .06), rgba(5, 31, 57, .8) 73%, rgba(4, 25, 48, .94)),
        image-set(
            url('/app-native/welcome-rosolina-sunrise-180l.avif?v=180m') type('image/avif'),
            url('/app-native/welcome-rosolina-sunrise-180l.webp?v=180m') type('image/webp')
        );
    background-position: center 62%;
    background-size: cover;
}

.page-register .auth-side {
    position: sticky;
    top: 28px;
}

.page-login .auth-side::after,
.page-register .auth-side::after {
    content: "";
    position: absolute;
    z-index: -1;
    right: -70px;
    bottom: -85px;
    width: 240px;
    height: 240px;
    border-radius: 50%;
    background: rgba(31, 185, 221, .16);
}

.page-login .auth-side-visual,
.page-register .auth-side-visual {
    width: 56px;
    height: 56px;
    display: grid;
    place-items: center;
    margin-bottom: 16px;
    border: 1px solid rgba(255, 255, 255, .34);
    border-radius: 18px;
    background: rgba(255, 255, 255, .16);
    box-shadow: 0 10px 28px rgba(0, 24, 53, .22);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    font-size: 29px;
}

.page-login .auth-side .eyebrow,
.page-register .auth-side .eyebrow {
    color: rgba(255, 255, 255, .84);
}

.page-login .auth-side h2,
.page-register .auth-side h2 {
    max-width: 360px;
    margin: 0;
    color: #fff;
    font-size: clamp(30px, 3vw, 42px);
    line-height: 1.02;
    letter-spacing: -.045em;
}

.page-login .auth-side > p:not(.eyebrow),
.page-register .auth-side > p:not(.eyebrow) {
    max-width: 380px;
    margin: 13px 0 0;
    color: rgba(244, 250, 255, .88);
    font-size: 13px;
    line-height: 1.55;
}

.page-login .auth-benefits,
.page-register .auth-benefits {
    display: grid;
    gap: 7px;
    margin-top: 18px;
}

.page-login .auth-benefits span,
.page-register .auth-benefits span {
    color: #fff;
    font-size: 12px;
    font-weight: 800;
}

.page-login .auth-side .button,
.page-register .auth-side .button {
    min-height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 21px;
    padding: 10px 15px;
    border: 1px solid rgba(255, 255, 255, .5);
    border-radius: 14px;
    color: #fff !important;
    background: rgba(255, 255, 255, .14);
    box-shadow: none;
    font-size: 12px;
    font-weight: 900;
    text-decoration: none;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}

.page-login .auth-independent,
.page-register .auth-independent {
    margin-top: 17px;
    padding-top: 13px;
    border-top: 1px solid rgba(255, 255, 255, .24);
    color: rgba(240, 248, 255, .76);
    font-size: 9px;
    line-height: 1.45;
}

@media (max-width: 760px) {
    body.page-login .site-main,
    body.page-register .site-main {
        min-height: 100dvh;
        display: block;
        padding: max(10px, env(safe-area-inset-top, 0px)) 9px max(22px, env(safe-area-inset-bottom, 0px));
        overflow: visible;
        background: linear-gradient(180deg, #dff3fb 0%, #f5fbff 44%, #fff8e9 100%);
    }

    body.page-login .site-main::before,
    body.page-register .site-main::before {
        inset: 0;
        background-position: center 55%;
        filter: none;
        transform: none;
        opacity: .12;
    }

    body.page-login .site-main::after,
    body.page-register .site-main::after {
        background: linear-gradient(180deg, rgba(232, 248, 255, .85), rgba(255, 255, 255, .82) 52%, rgba(255, 249, 234, .88));
    }

    .page-login .auth-layout,
    .page-register .auth-layout,
    .page-register .auth-register-layout {
        width: 100%;
        display: block;
    }

    .page-login .auth-card,
    .page-register .auth-card {
        width: 100%;
        padding: 18px 15px 20px;
        border-radius: 25px;
        box-shadow: 0 15px 42px rgba(11, 53, 91, .16);
    }

    .page-login .auth-brand-row,
    .page-register .auth-brand-row {
        gap: 8px;
        margin-bottom: 19px;
    }

    .page-login .auth-brand,
    .page-register .auth-brand {
        gap: 7px;
    }

    .page-login .auth-brand img,
    .page-register .auth-brand img {
        width: 42px;
        height: 42px;
        flex-basis: 42px;
        border-radius: 13px;
    }

    .page-login .auth-brand strong,
    .page-register .auth-brand strong {
        font-size: 15px;
    }

    .page-login .auth-brand small,
    .page-register .auth-brand small {
        font-size: 5.5px;
        letter-spacing: .1em;
    }

    .page-login .auth-return-link,
    .page-register .auth-return-link {
        min-height: 37px;
        padding-inline: 10px;
        font-size: 10px;
    }

    .page-login .auth-icon,
    .page-register .auth-icon {
        width: 43px;
        height: 43px;
        margin-bottom: 10px;
        border-radius: 14px;
        font-size: 21px;
    }

    .page-login .auth-card h1,
    .page-register .auth-card h1 {
        font-size: 29px;
    }

    .page-login .auth-intro,
    .page-register .auth-intro {
        margin: 10px 0 19px;
        font-size: 12.5px;
        line-height: 1.55;
    }

    .page-login .auth-card form,
    .page-register .auth-card form {
        gap: 12px;
    }

    .page-login .form-row input,
    .page-register .form-row input,
    .page-register .form-row select,
    .page-login .auth-card button.full,
    .page-register .auth-card button.full {
        min-height: 48px;
        border-radius: 13px;
    }

    .page-register .grid.two {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .page-login .auth-side,
    .page-register .auth-side {
        display: none;
    }

    .page-login .auth-foot,
    .page-register .auth-foot {
        margin-top: 16px;
        font-size: 12px;
    }

    .page-register label.profile-check {
        padding: 10px 11px;
        font-size: 11px;
    }
}

@media (max-width: 360px) {
    .page-login .auth-brand span,
    .page-register .auth-brand span {
        max-width: 142px;
    }

    .page-login .auth-return-link,
    .page-register .auth-return-link {
        padding-inline: 8px;
        font-size: 9px;
    }
}

/* 1.8.0m – Login und Registrierung auf demselben sichtbaren Strandmotiv. */
body.page-login .site-main,
body.page-register .site-main {
    background: #123d62;
}
body.page-login .site-main::before,
body.page-register .site-main::before {
    inset: 0;
    background-image:
        linear-gradient(180deg, rgba(2, 25, 50, .18), rgba(2, 25, 48, .05) 42%, rgba(2, 20, 40, .62)),
        image-set(
            url('/app-native/welcome-rosolina-sunrise-180l.avif?v=180m') type('image/avif'),
            url('/app-native/welcome-rosolina-sunrise-180l.webp?v=180m') type('image/webp')
        );
    background-position: center 53%;
    filter: none;
    transform: none;
    opacity: 1;
}
body.page-login .site-main::after,
body.page-register .site-main::after {
    background: linear-gradient(105deg, rgba(4, 30, 58, .25), rgba(239, 249, 253, .22) 55%, rgba(255, 246, 222, .34));
}
.page-login .auth-card,
.page-register .auth-card {
    background: linear-gradient(155deg, rgba(255, 255, 255, .95), rgba(242, 250, 255, .9));
    -webkit-backdrop-filter: blur(16px) saturate(1.08);
    backdrop-filter: blur(16px) saturate(1.08);
}
.page-login .auth-side,
.page-register .auth-side {
    background-image:
        linear-gradient(180deg, rgba(5, 33, 62, .06), rgba(5, 31, 57, .78) 73%, rgba(4, 25, 48, .94)),
        image-set(
            url('/app-native/welcome-rosolina-sunrise-180l.avif?v=180m') type('image/avif'),
            url('/app-native/welcome-rosolina-sunrise-180l.webp?v=180m') type('image/webp')
        );
    background-position: center 53%;
}
@media (max-width: 760px) {
    body.page-login .site-main,
    body.page-register .site-main {
        padding-top: max(30dvh, calc(env(safe-area-inset-top, 0px) + 120px));
        background: #123d62;
    }
    body.page-login .site-main::before,
    body.page-register .site-main::before {
        background-position: center 50%;
        opacity: 1;
    }
    body.page-login .site-main::after,
    body.page-register .site-main::after {
        background: linear-gradient(180deg, rgba(2, 24, 48, .08) 0, rgba(2, 24, 48, .08) 25dvh, rgba(2, 22, 42, .5) 42dvh, rgba(2, 19, 37, .7) 100%);
    }
    .page-login .auth-card,
    .page-register .auth-card {
        border-color: rgba(255, 255, 255, .82);
        background: linear-gradient(155deg, rgba(255, 255, 255, .96), rgba(241, 249, 254, .91));
        box-shadow: 0 22px 55px rgba(0, 21, 45, .3);
    }
}

/* 1.8.0p – schmale, transparente Login- und Registrierungsboxen mit sichtbarem Strand. */
.page-login .auth-layout {
    width: min(960px, 100%);
    grid-template-columns: minmax(0, 1fr) minmax(340px, .82fr);
}
.page-register .auth-register-layout {
    width: min(1040px, 100%);
    grid-template-columns: minmax(0, 1.16fr) minmax(330px, .84fr);
}
.page-login .auth-card,
.page-register .auth-card {
    padding: clamp(23px, 3.2vw, 36px);
    border-color: rgba(255, 255, 255, .7);
    background: linear-gradient(155deg, rgba(255, 255, 255, .82), rgba(237, 248, 254, .7));
    box-shadow: 0 22px 62px rgba(0, 23, 49, .25), inset 0 1px rgba(255, 255, 255, .65);
    -webkit-backdrop-filter: blur(14px) saturate(1.06);
    backdrop-filter: blur(14px) saturate(1.06);
}
.page-login .form-row input,
.page-register .form-row input,
.page-register .form-row select {
    border-color: rgba(174, 205, 226, .82);
    background: rgba(255, 255, 255, .69);
    -webkit-backdrop-filter: blur(7px);
    backdrop-filter: blur(7px);
}
.page-login .auth-return-link,
.page-register .auth-return-link,
.page-register label.profile-check,
.page-register .auth-privacy {
    background: rgba(245, 251, 255, .64);
}
@media (max-width: 760px) {
    body.page-login .site-main,
    body.page-register .site-main {
        padding: max(17dvh, calc(env(safe-area-inset-top, 0px) + 76px)) 0 max(24px, env(safe-area-inset-bottom, 0px));
    }
    body.page-login .site-main::after,
    body.page-register .site-main::after {
        background: linear-gradient(180deg, rgba(2, 24, 48, .04) 0, rgba(2, 24, 48, .08) 24dvh, rgba(2, 22, 42, .3) 52dvh, rgba(2, 19, 37, .53) 100%);
    }
    .page-login .auth-layout,
    .page-register .auth-layout,
    .page-register .auth-register-layout {
        width: calc(100% - 28px);
        max-width: 410px;
        margin-inline: auto;
    }
    .page-login .auth-card,
    .page-register .auth-card {
        width: 100%;
        padding: 15px 13px 17px;
        border-radius: 22px;
        border-color: rgba(255, 255, 255, .68);
        background: linear-gradient(155deg, rgba(255, 255, 255, .79), rgba(237, 248, 254, .66));
        box-shadow: 0 18px 48px rgba(0, 20, 44, .28), inset 0 1px rgba(255, 255, 255, .68);
        -webkit-backdrop-filter: blur(13px) saturate(1.04);
        backdrop-filter: blur(13px) saturate(1.04);
    }
    .page-login .auth-brand-row,
    .page-register .auth-brand-row { margin-bottom: 14px; }
    .page-login .auth-icon,
    .page-register .auth-icon { margin-bottom: 7px; }
    .page-login .auth-intro,
    .page-register .auth-intro { margin: 8px 0 15px; }
    .page-login .auth-card form,
    .page-register .auth-card form { gap: 10px; }
    .page-login .form-row input,
    .page-register .form-row input,
    .page-register .form-row select,
    .page-login .auth-card button.full,
    .page-register .auth-card button.full { min-height: 46px; }
    .page-register .grid.two { gap: 10px; }
    .page-login .auth-foot,
    .page-register .auth-foot { margin-top: 12px; }
}
@media (max-width: 360px) {
    .page-login .auth-layout,
    .page-register .auth-layout,
    .page-register .auth-register-layout { width: calc(100% - 20px); }
}

/* 1.8.0q – Kontohilfe nutzt dieselbe schmale Strandoberfläche wie der Login. */
.page-login.page-auth-help .auth-help-layout {
    width: min(620px, 100%);
    max-width: 620px;
    grid-template-columns: minmax(0, 1fr);
}
.page-login.page-auth-help .auth-card {
    width: 100%;
    max-width: 620px;
    margin: 0 auto;
}
@media (max-width: 760px) {
    .page-login.page-auth-help .auth-help-layout {
        width: calc(100% - 28px);
        max-width: 410px;
    }
}