@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              (Kopfzeile im Fluss, optional)
   │   ├── login_stage_topbar_logo     (Quantiz-Logo links)
   │   ├── login_stage_switch          (Variantenumschalter, mittig)
   │   └── login_stage_topbar_spacer   (leerer Ausgleich rechts)
   └── 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)
   ========================================================================== */

/* Kopfzeile oben, Bühne darunter: Die Bühne nimmt, was übrig bleibt, und
   zentriert die Karte darin. Vorher schwebte die Kopfzeile per position:fixed
   über allem und legte sich auf die Karte — nicht erst auf dem Telefon,
   sondern gemessen auch bei 1440x900 um 24px. Das ist kein Breitenproblem:
   Sobald die Karte hoch genug ist, wandert sie unter die Kopfzeile. Im Fluss
   kann das nicht passieren, und bei einer Karte, die höher ist als das
   Fenster, scrollt die Kopfzeile mit weg, statt den Inhalt zu verdecken.   */
.login_stage {
    position: relative;
    min-height: 100vh;

    display: flex;
    flex-direction: column;
}

/* ── 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;

    flex: 1;
    min-height: 0;
    padding: 20px 20px 40px;

    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; }
}

/* Leise Töne auf der Milchglas-Karte
   --------------------------------------------------------------------------
   Die Karte ist eine helle Fläche: 74 % Weiß über der Galaxie ergeben je nach
   Bildausschnitt etwa #BDE9E7 bis #BEC1BF. Die gedämpften Grautöne der
   Komponente (#BBBBBB) und erst recht Weiß verschwinden darauf — gemessen
   1,06 bis 1,82 zu 1, gefordert sind 4,5. Deshalb werden die sekundären Texte
   hier dunkel statt hell: #4B4B4B erreicht 6,64, das Navy 7,36.

   Die Überschreibung sitzt bewusst hier und nicht in login_panel.css: Die
   Farbe hängt am Untergrund, nicht an der Komponente. Auf einer weißen Fläche
   bleiben die Grautöne richtig.                                             */
.login_stage_card .login_panel_description,
.login_stage_card .login_panel_meta {
    color: var(--q-dark);
}

.login_stage_card .login_panel_divider span {
    color: var(--q-highlight-2);
}

/* ── Kopfzeile (Logo links, Umschalter mittig) ────────────────────────── */
.login_stage_topbar {
    position: relative;
    z-index: 6;

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

    pointer-events: none;
}

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

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

/* Auf dem Telefon zählt jede Zeile Höhe, bevor die Karte beginnt. Logo und
   Umschalter bleiben deshalb nebeneinander, das Logo wird dafür kleiner.
   Gestapelt kostete die Kopfzeile über 100px, nebeneinander gut ein Drittel
   davon.                                                                    */
@media (max-width: 640px) {
    /* Logo links, Umschalter rechts. Mittig geht hier nicht auf: Neben dem
       Logo bleibt keine symmetrische Mitte mehr übrig, der Umschalter säße
       sichtbar links davon. Der Ausgleich, der ihn breit hält, entfällt
       dafür - sonst bliebe rechts eine Spaltenlücke stehen. */
    .login_stage_topbar {
        grid-template-columns: auto minmax(0, 1fr);
        gap: 12px;
        padding: 14px 16px 0;
    }

    .login_stage_topbar_spacer {
        display: none;
    }

    .login_stage_topbar_logo {
        height: 32px;
    }

    /* Zwei Klassen, weil die Grundregel (justify-self: center) weiter unten
       steht: Gleiche Spezifität, spätere Stelle - sie würde sonst gewinnen. */
    .login_stage_topbar .login_stage_switch {
        justify-self: end;
    }
}

/* Darunter wird es auch dafür zu eng - der Umschalter rutscht unter das
   Logo, statt es zu verdrängen. */
@media (max-width: 400px) {
    .login_stage_topbar {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }
}

/* ── 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); }
}