survey-bundle/public/css/auth-module.css

@font-face {
    font-family: "PT Sans Narrow";
    src: url("../fonts/PTSansNarrow-Regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "PT Sans Narrow";
    src: url("../fonts/PTSansNarrow-Bold.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Blogger Sans";
    src: url("../fonts/Blogger%20Sans-Medium.woff2") format("woff2");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

:root {
    --survey-auth-blue: #0064ad;
    --survey-auth-orange: #ec7c32;
    --survey-auth-green: #00ae97;
    --survey-auth-ink: #22313f;
    --survey-auth-muted: #5f6975;
    --survey-auth-border: rgba(162, 168, 180, 0.34);
    --survey-auth-surface: rgba(255, 255, 255, 0.94);
    --survey-auth-shadow: 0 28px 70px rgba(34, 34, 34, 0.12);
}

.mod_login.block.login {
    max-width: min(100%, 36rem);
    margin: clamp(1.5rem, 4vw, 3rem) auto;
    padding: clamp(1.5rem, 2.6vw, 2.4rem);
    border: 1px solid var(--survey-auth-border);
    border-radius: 1.8rem;
    background:
        radial-gradient(circle at top left, rgba(0, 100, 173, 0.2), transparent 36%),
        radial-gradient(circle at bottom right, rgba(0, 174, 151, 0.16), transparent 38%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.97) 0%, rgba(248, 251, 255, 0.96) 100%);
    box-shadow: var(--survey-auth-shadow);
    box-sizing: border-box;
    font-family: "PT Sans Narrow", sans-serif;
    color: var(--survey-auth-ink);
}

.mod_login.block.login form,
.mod_login.block.login .formbody {
    margin: 0;
}

.mod_login.block.login .formbody {
    display: grid;
    gap: 1rem;
}

.mod_login.block.login .widget {
    margin: 0;
}

.mod_login.block.login .widget-text,
.mod_login.block.login .widget-password {
    display: grid;
    gap: 0.45rem;
}

.mod_login.block.login label,
.mod_login.block.login legend {
    font-family: "Blogger Sans", sans-serif;
    font-size: 1rem;
    font-weight: 500;
    color: var(--survey-auth-blue);
    letter-spacing: 0.01em;
}

.mod_login.block.login input.text,
.mod_login.block.login input.password {
    width: 100%;
    min-height: 3.2rem;
    padding: 0.8rem 0.95rem;
    border: 1px solid rgba(162, 168, 180, 0.48);
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: inset 0 1px 2px rgba(34, 34, 34, 0.04);
    box-sizing: border-box;
    font: inherit;
    color: var(--survey-auth-ink);
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}

.mod_login.block.login input.text:focus,
.mod_login.block.login input.password:focus {
    outline: none;
    border-color: rgba(0, 100, 173, 0.72);
    box-shadow: 0 0 0 4px rgba(0, 100, 173, 0.12);
    background: #fff;
}

.mod_login.block.login .widget-checkbox {
    margin-top: 0.15rem;
}

.mod_login.block.login .checkbox_container {
    margin: 0;
    padding: 0;
    border: 0;
}

.mod_login.block.login .checkbox_container > span {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    color: var(--survey-auth-muted);
}

.mod_login.block.login input.checkbox {
    width: 1.05rem;
    height: 1.05rem;
    accent-color: var(--survey-auth-green);
}

.mod_login.block.login .widget-submit {
    margin-top: 0.3rem;
}

.mod_login.block.login button.submit {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    min-height: 3.2rem;
    padding: 0.8rem 1.35rem;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--survey-auth-blue), #0d7acb);
    color: #fff;
    font-family: "Blogger Sans", sans-serif;
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    cursor: pointer;
    box-shadow: 0 16px 28px rgba(0, 100, 173, 0.24);
    transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
}

.mod_login.block.login button.submit:hover,
.mod_login.block.login button.submit:focus {
    transform: translateY(-1px);
    box-shadow: 0 18px 34px rgba(0, 100, 173, 0.28);
    filter: saturate(1.05);
}

.mod_login.block.login button.submit:focus {
    outline: none;
}

nav.mod_customnav.block:has(a[href*="/abmelden"]) {
    max-width: min(100%, 24rem);
    margin: clamp(1.25rem, 3vw, 2.5rem) auto;
    padding: 0.85rem;
    border: 1px solid rgba(0, 100, 173, 0.14);
    border-radius: 1.4rem;
    background: linear-gradient(135deg, rgba(0, 100, 173, 0.08), rgba(255, 255, 255, 0.96));
    box-shadow: 0 18px 40px rgba(34, 34, 34, 0.08);
    box-sizing: border-box;
}

nav.mod_customnav.block:has(a[href*="/abmelden"]) .level_1 {
    display: flex;
    justify-content: center;
    margin: 0;
    padding: 0;
    list-style: none;
}

nav.mod_customnav.block:has(a[href*="/abmelden"]) .level_1 > li {
    margin: 0;
    padding: 0;
}

nav.mod_customnav.block:has(a[href*="/abmelden"]) .level_1 > li > a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.9rem;
    padding: 0.7rem 1.15rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.98);
    color: var(--survey-auth-blue);
    font-family: "Blogger Sans", sans-serif;
    font-size: 0.98rem;
    font-weight: 500;
    text-decoration: none;
    box-shadow: 0 12px 26px rgba(0, 100, 173, 0.12);
    transition: transform 0.18s ease, box-shadow 0.18s ease, color 0.18s ease;
}

nav.mod_customnav.block:has(a[href*="/abmelden"]) .level_1 > li > a:hover,
nav.mod_customnav.block:has(a[href*="/abmelden"]) .level_1 > li > a:focus {
    transform: translateY(-1px);
    box-shadow: 0 16px 30px rgba(0, 100, 173, 0.18);
    color: #004f88;
}

@media (max-width: 767px) {
    .mod_login.block.login {
        padding: 1.2rem;
        border-radius: 1.35rem;
    }

    .mod_login.block.login button.submit,
    nav.mod_customnav.block:has(a[href*="/abmelden"]) .level_1 > li > a {
        width: 100%;
    }

    nav.mod_customnav.block:has(a[href*="/abmelden"]) {
        padding: 0.75rem;
    }

    nav.mod_customnav.block:has(a[href*="/abmelden"]) .level_1 {
        width: 100%;
    }
}