@charset "utf-8";

/* ==========================================================================
   login_stage — Bühne des Anmeldebildschirms
   --------------------------------------------------------------------------
   Galaxie-Hintergrund, zentrierte Milchglas-Karte, Fußzeile, Copyright
   und optionales Erfolgs-Overlay. Der Inhalt der Karte ist die
   Fachkomponente login_panel (eigene Datei).

   Struktur:
   login_stage
   ├── login_stage_backdrop            (fixierter Galaxie-Hintergrund)
   ├── login_stage_topbar              (schwebende Kopfzeile, optional)
   │   ├── login_stage_topbar_logo     (Quantiz-Logo links)
   │   └── login_stage_switch          (Variantenumschalter, mittig)
   └── login_stage_body                (zentrierender Flex-Container)
       ├── login_stage_card            (Milchglas-Karte; Variante: _card_split)
       │   ├── … login_panel …                        (zentriert)
       │   ├── login_stage_brand + login_stage_form   (Split-Variante)
       │   ├── login_stage_footer      (Links: Impressum etc., optional)
       │   └── login_stage_overlay     (Erfolgs-Overlay, optional)
       └── login_stage_copyright       (Copyright-Zeile, optional)

   Varianten: login_stage_card_split (zweispaltiges Layout mit Markenpanel)
   ========================================================================== */

.login_stage {
    position: relative;
    min-height: 100vh;
}

/* ── Galaxie-Hintergrund ──────────────────────────────────────────────── */
.login_stage_backdrop {
    position: fixed;
    inset: 0;
    z-index: 0;

    background: #081420 url("../../images/wallpapers/quantiz_galaxy.png") center center / cover no-repeat;
}

/* Vignette + Petrol-Hauch für die Lesbarkeit der Milchglas-Karte */
.login_stage_backdrop::after {
    content: "";
    position: absolute;
    inset: 0;

    background:
        radial-gradient(120% 90% at 40% 48%, rgba(8, 20, 32, 0) 34%, rgba(6, 16, 26, 0.55) 100%),
        linear-gradient(180deg, rgba(6, 16, 26, 0.35) 0%, rgba(6, 16, 26, 0) 24%);
}

/* ── Zentrierende Bühne ───────────────────────────────────────────────── */
.login_stage_body {
    position: relative;
    z-index: 1;

    min-height: 100vh;
    padding: 40px 20px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* ── Milchglas-Karte ──────────────────────────────────────────────────── */
.login_stage_card {
    position: relative;
    width: 100%;
    max-width: 440px;
    padding: 44px 44px 32px;

    border: 1px solid rgba(255, 255, 255, 0.65);
    border-radius: var(--radius-xl);

    background: rgba(255, 255, 255, 0.74);
    backdrop-filter: blur(20px) saturate(1.35);
    -webkit-backdrop-filter: blur(20px) saturate(1.35);
    box-shadow: 0 30px 90px rgba(4, 12, 20, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.7);

    animation: login_stage_card_in 480ms var(--ease-out) both;
}

@keyframes login_stage_card_in {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
}

/* Auf der Milchglas-Karte über der Galaxie wird die Panel-Beschreibung hell */
.login_stage_card .login_panel_description {
    color: var(--q-white);
}

/* ── Schwebende Topbar (Logo links, Umschalter mittig) ────────────────── */
.login_stage_topbar {
    position: fixed;
    top: 20px;
    left: 0;
    right: 0;
    z-index: 6;

    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    padding: 0 22px;

    pointer-events: none;
}

.login_stage_topbar > * {
    pointer-events: auto;
}

.login_stage_topbar_logo {
    height: 44px;
    width: auto;
    display: block;
    justify-self: start;
}

@media (max-width: 640px) {
    .login_stage_topbar {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .login_stage_topbar_logo {
        justify-self: center;
    }
}

/* ── Variantenumschalter (Zentriert / Split) ──────────────────────────── */
.login_stage_switch {
    justify-self: center;

    display: inline-flex;
    gap: 4px;
    padding: 5px;

    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: var(--radius-pill);

    background: rgba(255, 255, 255, 0.14);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.login_stage_switch_control {
    padding: 8px 18px;
    border: 0;
    border-radius: var(--radius-pill);

    background: none;
    cursor: pointer;
    text-decoration: none;

    font-family: var(--font-sans);
    font-size: 12.5px;
    font-weight: var(--w-bold);
    letter-spacing: 0.02em;
    color: var(--q-white);
    opacity: 0.68;

    transition: background var(--dur-fast) var(--ease-std),
                color var(--dur-fast) var(--ease-std),
                opacity var(--dur-fast) var(--ease-std);
}

.login_stage_switch_control:hover {
    opacity: 1;
    color: var(--q-white);
}

.login_stage_switch_control_active {
    background: var(--q-white);
    color: var(--q-highlight-2);
    opacity: 1;
}

.login_stage_switch_control_active:hover {
    color: var(--q-highlight-2);
}

/* ── Split-Variante: Markenpanel links, Formular rechts ───────────────── */
.login_stage_card_split {
    max-width: 1040px;
    min-height: 620px;
    padding: 0;
    overflow: hidden;

    display: grid;
    grid-template-columns: 1.05fr 1fr;
}

.login_stage_brand {
    position: relative;
    overflow: hidden;
    padding: 42px 44px;

    display: flex;
    flex-direction: column;

    background: linear-gradient(155deg, rgba(16, 49, 78, 0.86), rgba(11, 33, 53, 0.72));
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    color: var(--q-white);
}

.login_stage_brand_logo {
    height: 30px;
    width: auto;
    align-self: flex-start;
}

/* ── Orbit: schematisches Sonnensystem hinter dem Markentext ──────────── */
.login_stage_brand_art {
    position: absolute;
    inset: 0;
    z-index: 1;

    overflow: hidden;
    pointer-events: none;
}

/* Lesbarkeits-Verlauf: nach unten hin deckend, damit Chip, Titel und Text
   ruhig stehen, während die Planeten oben frei sichtbar bleiben. */
.login_stage_brand_art::after {
    content: "";
    position: absolute;
    inset: 0;

    background: linear-gradient(to top,
                                rgba(16, 49, 78, 0.72) 0%,
                                rgba(16, 49, 78, 0.28) 42%,
                                rgba(16, 49, 78, 0) 78%);
}

.login_stage_brand_orbit {
    position: absolute;
    right: -22%;
    top: 8%;

    width: 118%;
    aspect-ratio: 1;
}

/* Sonne */
.login_stage_brand_sun {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);

    width: 9%;
    aspect-ratio: 1;
    border-radius: var(--radius-circle);

    background: radial-gradient(circle at 38% 34%, #F4F7C9, var(--q-highlight-1) 58%, #9AA514 100%);
    box-shadow: 0 0 0 10px rgba(198, 211, 28, 0.12), 0 0 46px 12px rgba(198, 211, 28, 0.34);

    animation: login_stage_brand_sun_pulse 9s ease-in-out infinite;
}

@keyframes login_stage_brand_sun_pulse {
    0%, 100% { box-shadow: 0 0 0 10px rgba(198, 211, 28, 0.12), 0 0 46px 12px rgba(198, 211, 28, 0.30); }
    50%      { box-shadow: 0 0 0 16px rgba(198, 211, 28, 0.08), 0 0 62px 18px rgba(198, 211, 28, 0.42); }
}

/* Bahnlinien */
.login_stage_brand_ring {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);

    aspect-ratio: 1;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: var(--radius-circle);
}

.login_stage_brand_ring_1 { width: 22%; }
.login_stage_brand_ring_2 { width: 38%; }
.login_stage_brand_ring_3 { width: 56%; border-color: rgba(255, 255, 255, 0.22); }
.login_stage_brand_ring_4 { width: 76%; }
.login_stage_brand_ring_5 { width: 98%; border-style: dashed; border-color: rgba(255, 255, 255, 0.11); }

/* Träger je Bahn: rotiert um die Sonne, der Planet sitzt am oberen Scheitel.
   Die negativen Verzögerungen verteilen die Planeten beim Seitenaufruf. */
.login_stage_brand_track {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);

    aspect-ratio: 1;
    border-radius: var(--radius-circle);

    animation-name: login_stage_brand_track_spin;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

.login_stage_brand_track_1 { width: 22%; animation-duration: 14s; }
.login_stage_brand_track_2 { width: 38%; animation-duration: 24s; animation-delay: -6s; }
.login_stage_brand_track_3 { width: 56%; animation-duration: 38s; animation-delay: -14s; }
.login_stage_brand_track_4 { width: 76%; animation-duration: 56s; animation-delay: -30s; }
.login_stage_brand_track_5 { width: 98%; animation-duration: 78s; animation-delay: -52s; }

@keyframes login_stage_brand_track_spin {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to   { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Planeten drehen die Bahnbewegung wieder heraus, damit ihr Glanzpunkt nicht
   mitwandert. `animation-duration: inherit` übernimmt dafür die Dauer des
   Trägers — die Gegenbewegung bleibt so ohne Zutun synchron. */
.login_stage_brand_planet {
    position: absolute;
    left: 50%;
    top: 0;
    transform: translate(-50%, -50%);

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

    animation-name: login_stage_brand_planet_counter;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-duration: inherit;
}

@keyframes login_stage_brand_planet_counter {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to   { transform: translate(-50%, -50%) rotate(-360deg); }
}

.login_stage_brand_planet_1 {
    width: 46px;
    height: 46px;

    background: radial-gradient(circle at 34% 30%, #7FE3EF, var(--q-highlight-3) 62%, #0D6F7A 100%);
    box-shadow: 0 0 22px rgba(21, 165, 181, 0.55);
}

.login_stage_brand_planet_2 {
    width: 30px;
    height: 30px;

    background: radial-gradient(circle at 34% 30%, #FFFFFF, #D8DBE0 60%, #9AA0A8 100%);
    box-shadow: 0 0 16px rgba(241, 242, 242, 0.4);
}

.login_stage_brand_planet_3 {
    width: 68px;
    height: 68px;

    background: radial-gradient(circle at 32% 28%, #E78CFF, var(--q-highlight-5) 58%, #4D0D68 100%);
    box-shadow: 0 0 30px rgba(138, 28, 177, 0.55);
}

.login_stage_brand_planet_4 {
    width: 38px;
    height: 38px;

    background: radial-gradient(circle at 34% 30%, #EAF39A, var(--q-highlight-1) 60%, #8D9812 100%);
    box-shadow: 0 0 20px rgba(198, 211, 28, 0.5);
}

.login_stage_brand_planet_5 {
    width: 54px;
    height: 54px;

    background: radial-gradient(circle at 32% 30%, #6FD0F5, #2F7FB8 55%, #16405F 100%);
    box-shadow: 0 0 24px rgba(47, 127, 184, 0.5);
}

/* Mond auf der violetten Bahn: eigener Träger um den dritten Planeten */
.login_stage_brand_moon {
    position: absolute;
    left: 50%;
    top: 0;
    transform: translate(-50%, -50%);

    width: 74px;
    height: 74px;
    border-radius: var(--radius-circle);

    animation: login_stage_brand_track_spin 6s linear infinite;
}

.login_stage_brand_moon::after {
    content: "";
    position: absolute;
    left: 50%;
    top: -4px;
    transform: translate(-50%, -50%);

    width: 14px;
    height: 14px;
    border-radius: var(--radius-circle);

    background: radial-gradient(circle at 34% 30%, #FFFFFF, #CFD3D6 60%, #8D9296 100%);
}

/* Ohne Bewegung bleibt das Sonnensystem als ruhiges Standbild stehen. */
@media (prefers-reduced-motion: reduce) {
    .login_stage_brand_sun,
    .login_stage_brand_track,
    .login_stage_brand_planet,
    .login_stage_brand_moon {
        animation: none;
    }
}

/* Schmaleres Markenpanel: Bahnen weiter aus dem Bild, Planeten kleiner */
@media (max-width: 980px) {
    .login_stage_brand_orbit {
        right: -34%;
        top: 2%;
        width: 130%;
    }

    .login_stage_brand_planet_1 { width: 32px; height: 32px; }
    .login_stage_brand_planet_3 { width: 48px; height: 48px; }
    .login_stage_brand_planet_5 { width: 38px; height: 38px; }
}

.login_stage_brand_body {
    position: relative;
    z-index: 2;
    margin-top: auto;
}

.login_stage_brand_chip {
    display: inline-block;
    margin-bottom: 22px;
    padding: 6px 14px;

    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: var(--radius-pill);

    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);

    font-size: var(--fs-12);
    font-weight: var(--w-bold);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--q-white);
}

.login_stage_brand_title {
    margin: 0 0 16px;

    font-family: var(--font-display);
    font-weight: var(--w-bold);
    font-size: var(--fs-40);
    line-height: 1.12;
    letter-spacing: var(--tracking-tight);
    color: var(--q-white);
    text-wrap: balance;
}

.login_stage_brand_text {
    margin: 0;
    max-width: 40ch;

    font-size: var(--fs-16);
    line-height: var(--lh-normal);
    color: rgba(255, 255, 255, 0.82);
    text-wrap: pretty;
}

/* Schlusstakt unter dem Beschreibungstext — bleibt als Einheit auf einer
   Zeile (siehe Freigabe in der Schmalansicht weiter unten). */
.login_stage_brand_claim {
    margin: 14px 0 0;
    white-space: nowrap;

    font-size: var(--fs-16);
    font-weight: var(--w-bold);
    line-height: var(--lh-normal);
    color: var(--q-white);
}

.login_stage_form {
    position: relative;
    padding: 52px 52px 30px;

    display: flex;
    flex-direction: column;
}

.login_stage_form_body {
    width: 100%;
    max-width: 360px;
    margin: auto;
}

.login_stage_form_footer {
    margin-top: 28px;
    padding-top: 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.35);

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.login_stage_form_footer_links {
    display: flex;
    gap: 16px;
}

.login_stage_form_footer a {
    font-size: var(--fs-12);
    color: rgba(255, 255, 255, 0.9);
    text-decoration: none;
}

.login_stage_form_footer a:hover {
    color: var(--q-white);
}

.login_stage_form_footer_copyright {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.72);
}

@media (max-width: 860px) {
    .login_stage_card_split {
        grid-template-columns: 1fr;
        max-width: 460px;
        min-height: 0;
    }

    .login_stage_brand {
        min-height: 240px;
        padding: 32px;
    }

    /* Einspaltig ist das Markenpanel nur noch ein flaches Band. Das
       Sonnensystem rückt in die obere rechte Ecke, damit die Sonne sichtbar
       bleibt und trotzdem aus Logo, Chip und Headline heraus. Der Versatz ist
       hier bewusst absolut: die Panelhöhe hängt an der Textlänge, ein
       Prozentwert würde die Sonne mitwandern lassen. */
    .login_stage_brand_orbit {
        right: -30%;
        top: -120px;
        width: 92%;
    }

    /* Schmale Ansicht: lieber umbrechen als über den Panelrand laufen. */
    .login_stage_brand_claim {
        white-space: normal;
    }

    .login_stage_form {
        padding: 40px 34px 26px;
    }
}

/* ── Fußzeile innerhalb der Karte ─────────────────────────────────────── */
.login_stage_footer {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px 14px;

    margin-top: 28px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.35);
}

.login_stage_footer a {
    font-size: var(--fs-12);
    font-weight: var(--w-regular);
    color: rgba(255, 255, 255, 0.9);
    text-decoration: none;
}

.login_stage_footer a:hover {
    color: var(--q-white);
}

/* ── Copyright unter der Karte ────────────────────────────────────────── */
.login_stage_copyright {
    margin-top: 22px;

    text-align: center;
    font-size: var(--fs-12);
    color: rgba(255, 255, 255, 0.9);
    text-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
}

/* ── Erfolgs-Overlay (optional) ───────────────────────────────────────── */
.login_stage_overlay {
    position: absolute;
    inset: 0;
    z-index: 5;

    padding: 44px;
    border-radius: var(--radius-xl);

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;

    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    animation: login_stage_overlay_in var(--dur-base) var(--ease-out) both;
}

@keyframes login_stage_overlay_in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.login_stage_overlay_icon {
    width: 92px;
    height: 92px;
    margin-bottom: 8px;
    border-radius: var(--radius-circle);

    display: grid;
    place-items: center;

    background: var(--q-highlight-1);

    animation: login_stage_overlay_pop 420ms var(--ease-out) both;
}

@keyframes login_stage_overlay_pop {
    0%   { transform: scale(0.4); opacity: 0; }
    60%  { transform: scale(1.08); }
    100% { transform: scale(1); opacity: 1; }
}

.login_stage_overlay_icon svg {
    width: 46px;
    height: 46px;
    color: var(--q-white);
}

.login_stage_overlay_icon path {
    stroke-dasharray: 40;
    stroke-dashoffset: 40;
    animation: login_stage_overlay_draw 460ms 180ms var(--ease-out) forwards;
}

@keyframes login_stage_overlay_draw {
    to { stroke-dashoffset: 0; }
}

.login_stage_overlay_title {
    margin: 20px 0 8px;

    font-family: var(--font-display);
    font-weight: var(--w-bold);
    font-size: var(--fs-24);
    color: var(--q-highlight-3);
}

.login_stage_overlay_text {
    max-width: 300px;
    margin: 0 0 22px;

    font-size: var(--fs-14);
    color: var(--q-dark);
    text-wrap: pretty;
}

.login_stage_overlay_progress {
    width: 34px;
    height: 34px;
    border-radius: var(--radius-circle);
    border: 3px solid var(--q-bright);
    border-top-color: var(--q-highlight-3);

    animation: login_stage_overlay_spin 0.8s linear infinite;
}

@keyframes login_stage_overlay_spin {
    to { transform: rotate(360deg); }
}