/* =============================================================================
   Login im CSA-Schnitt (16.10.2026): links die Anmeldung auf dem Low-Poly-
   Hintergrund, rechts durchwechselnde Werbe-Spots. Felder, Buttons, Checkbox und
   Flaggen bleiben die bestehenden Partner-Klassen (.login-container, .input-basic,
   .btn_main, .checkbox-wrapper-23) — hier steht nur die Anordnung und die Spots.
   Spot-Wechsel: js/login-spots.js
   ============================================================================= */

/* Plattformfarben — die einzige Stelle, die sich zwischen jd-partner, jd-mail und
   jd-leads unterscheidet. Rest der Datei ist in allen drei Repos gleich. */
:root {
    --login-akzent: var(--main_blue);
    --login-akzent-hover: #2f61b5;
    --login-akzent-hell: #68aaff;
    --login-akzent-rgb: 54, 111, 204;
}

/* ---------- Desktop ---------- */
/* Absolut ueber die ganze Desktop-Flaeche: .div_light_desktop hat seitlich 2rem
   Innenabstand, der sonst als Rand um die Spots stehen bliebe. Selektor mit
   .div_light_desktop, weil styles.css alle direkten Kinder auf relative setzt. */
.div_light_desktop > .login-split,
.login-split {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    /* bottom statt Hoehe: so endet die Flaeche innerhalb des Rahmens von
       .div_light_desktop, der selbst fensterhoch ist (--vh-voll). */
    bottom: 0;
    z-index: 1;
    display: flex;
    overflow: hidden;
}

/* Linke Haelfte bleibt durchsichtig: der Low-Poly-Hintergrund aus
   _background_poly.tpl liegt dahinter. */
.login-split-form {
    position: relative;
    flex: 0 0 42%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2rem 2rem 1.5rem;
}

/* Formular senkrecht mittig, Rechtslinks unten — beide auf derselben
   Mittelachse der Spalte */
.login-split-form > .login-csa {
    margin: auto 0;
}

/* Formular wie CSA: Logo oben, Beschriftung ueber den Feldern, ein grosser
   Button, darunter der Link. Felder bleiben .input-basic (Partner-Stil). */
.login-csa {
    width: 100%;
    max-width: 30rem;
    color: var(--white);
}

.login-csa-logo {
    display: block;
    /* Hoehe statt Breite: die Logos von Mail und Leads sind schmaler als das von
       Partner (236 zu 347 bei gleicher Hoehe), bei gleicher Breite waere das JD
       dort deutlich groesser. 5.75rem = Partner bei 16rem Breite. */
    width: auto;
    height: 5.75rem;
    margin: 0 auto 3.5rem;
}

.login-csa-form {
    display: flex;
    flex-direction: column;
    /* Einheitlich 1rem zwischen allen Elementen (User 16.10.2026) */
    gap: 1rem;
}

.login-csa-label {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: var(--white);
}

/* input.-Selektor: .login-form input[type=...] aus styles.css setzt sonst
   margin-bottom 0.5rem und der Abstand waere 1.5rem statt 1rem */
.login-csa-form input.login-csa-input {
    height: 3.5rem;
    margin: 0;
    padding: 0 1rem !important;
    font-size: 1.05rem;
    outline: none;
}

.login-csa-form .login-csa-input:focus {
    box-shadow: 0 0 0 2px var(--login-akzent), rgba(0, 0, 0, 0.4) 0px 2px 4px !important;
}

.login-csa-form .field-error {
    margin: 0;
}

.login-csa-remember {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0;
}

.login-csa-remember span {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.95rem;
    cursor: pointer;
}

/* Gleicher Button wie mobil (.m-btn-primary), nur in Desktop-Groesse */
.login-csa-btn {
    height: 3.75rem;
    border: none;
    border-radius: var(--border);
    background: var(--login-akzent);
    color: var(--white);
    font-size: 1.15rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s ease;
}

.login-csa-btn:hover {
    background: var(--login-akzent-hover);
}

.login-csa-link {
    margin: 0;
    text-align: center;
    color: var(--white);
    font-size: 1.05rem;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.login-csa-link:hover {
    color: var(--login-akzent-hell);
}

.login-csa-btn:focus-visible,
.login-csa-link:focus-visible {
    outline: 2px solid var(--login-akzent-hell);
    outline-offset: 3px;
}

/* Unten in der Formularspalte, gleiche Breite wie das Formular, damit die
   Links genau mittig zu Feldern und Button stehen */
.login-split-legal {
    width: 100%;
    max-width: 30rem;
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    font-size: 0.85rem;
}

.login-split-legal a {
    color: rgba(255, 255, 255, 0.55);
    text-decoration: none;
}

.login-split-legal a:hover,
.login-split-legal a:focus-visible {
    color: var(--white);
}

/* ---------- Spots (Desktop und Mobil) ---------- */
.login-spots {
    position: relative;
    overflow: hidden;
    background: var(--darkblue);
    font-family: "Nunito Sans", "Segoe UI", sans-serif;
    color: var(--white);
}

.login-split .login-spots {
    flex: 1 1 58%;
}

.login-spot {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.7s ease, visibility 0s linear 0.7s;
}

.login-spot.is-active {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.7s ease, visibility 0s linear 0s;
}

.login-spot img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.04);
    transition: transform 5.5s ease-out;
    /* Eigene GPU-Ebene: Zoom und Ueberblendung ruckeln sonst auf grossen Flaechen */
    will-change: transform, opacity;
    backface-visibility: hidden;
}

.login-spot.is-active img {
    transform: scale(1);
}

/* Verlauf nach unten, damit der Text auf jedem Bild lesbar bleibt */
.login-spot::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(10, 15, 36, 0.1) 0%, rgba(10, 15, 36, 0.35) 45%, rgba(10, 15, 36, 0.95) 100%);
}

.login-spot-text {
    position: relative;
    z-index: 2;
    max-width: 40rem;
    padding: 0 4rem 7rem;
}

.login-spot-kicker {
    margin: 0 0 1rem;
    font-size: 1rem;
    font-weight: 700;
    color: var(--login-akzent-hell);
}

/* !important: styles.css setzt h2 global mit !important auf 1.25rem */
.login-spot h2 {
    margin: 0 0 1.25rem;
    /* --vw-voll: zoom-korrigierte Fensterbreite (styles.css) */
    font-size: clamp(2rem, calc(2.6 * var(--vw-voll, 1vw)), 3.4rem) !important;
    line-height: 1.08;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--white);
}

.login-spot h2 span {
    display: block;
}

.login-spot-text p:last-child {
    margin: 0;
    max-width: 34rem;
    font-size: 1.3rem;
    line-height: 1.55;
    color: #c9ccdb;
}

.login-spots-dots {
    position: absolute;
    z-index: 3;
    left: 4rem;
    bottom: 3.5rem;
    display: flex;
    gap: 0.6rem;
}

.login-spots-dots button {
    position: relative;
    width: 2.75rem;
    height: 4px;
    padding: 0;
    border: 0;
    border-radius: 2px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.22);
    cursor: pointer;
}

/* Fortschritt des laufenden Spots */
.login-spots-dots button i {
    position: absolute;
    inset: 0;
    width: 0;
    background: var(--login-akzent-hell);
}

.login-spots-dots button.is-done i {
    width: 100%;
}

.login-spots-dots button.is-active i {
    animation: login-spot-fill var(--spot-dauer, 4875ms) linear forwards;
}

.login-spots.is-paused .login-spots-dots button.is-active i {
    animation-play-state: paused;
}

@keyframes login-spot-fill {
    to { width: 100%; }
}

.login-spots-dots button:focus-visible,
.login-split-legal a:focus-visible {
    outline: 2px solid var(--login-akzent-hell);
    outline-offset: 3px;
}

/* ---------- Mobil: Spots kompakt UNTER dem Formular ---------- */
@media (max-width: 991px) {
    .m-login-spots {
        width: 100%;
        max-width: 22rem;
        height: 15rem;
        margin-top: 2rem;
        border-radius: 3px;
        box-shadow: rgba(var(--login-akzent-rgb), 0.4) 0px 2px 4px, rgba(var(--login-akzent-rgb), 0.3) 0px 7px 13px -3px;
    }

    .m-login-spots .login-spot-text {
        padding: 0 1.25rem 2.5rem;
    }

    .m-login-spots .login-spot-kicker {
        margin-bottom: 0.4rem;
        font-size: 0.75rem;
    }

    .m-login-spots .login-spot h2 {
        margin: 0;
        font-size: 1.45rem !important;
    }

    /* Mobil nur Ueberschrift: der Fliesstext wuerde die Karte sprengen */
    .m-login-spots .login-spot-text p:last-child {
        display: none;
    }

    .m-login-spots .login-spots-dots {
        left: 1.25rem;
        bottom: 1.1rem;
    }

    .m-login-spots .login-spots-dots button {
        width: 1.75rem;
    }

    .m-login-legal {
        display: flex;
        justify-content: center;
        gap: 1.5rem;
        margin-top: 1.5rem;
        font-size: 0.85rem;
    }

    .m-login-legal a {
        color: rgba(255, 255, 255, 0.55);
        text-decoration: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .login-spot,
    .login-spot.is-active,
    .login-spot img {
        transition: none;
    }
}

/* =============================================================================
   Demo-Termin: Knopf in der Formularspalte + Fenster (js/login-demo.js)
   ============================================================================= */
.login-csa-demo {
    margin: 1rem 0 0;
}

.m-login-demo {
    margin: 1.25rem 0 0;
}

.login-csa-demo,
.m-login-demo {
    color: rgba(255, 255, 255, 0.7);
    text-align: center;
    font-size: 1rem;
}

.login-csa-demo button,
.m-login-demo button {
    padding: 0;
    border: 0;
    background: none;
    color: var(--login-akzent-hell);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.login-csa-demo button:hover,
.m-login-demo button:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* margin auto mit !important: eine globale Regel setzt margin 0 und hebt die
   Zentrierung des <dialog> auf. --vh-voll/--vw-voll: Desktop ist gezoomt. */
.login-demo {
    margin: auto !important;
    width: min(40rem, calc(100 * var(--vw-voll, 1vw) - 2rem));
    max-height: calc(var(--vh-voll, 100vh) - 2rem);
    padding: 0;
    border: 0;
    border-radius: var(--border);
    background: var(--darkblue);
    color: var(--white);
    box-shadow: rgba(var(--login-akzent-rgb), 0.4) 0px 2px 4px, rgba(var(--login-akzent-rgb), 0.3) 0px 7px 13px -3px, rgba(var(--login-akzent-rgb), 0.2) 0px -3px 0px inset;
    font-family: "Nirmala UI", "Nunito Sans", "Segoe UI", sans-serif;
    overflow: auto;
}

.login-demo::backdrop {
    background: rgba(5, 7, 15, 0.8);
}

.login-demo-inhalt {
    padding: 2.25rem 2.25rem 2rem;
}

.login-demo-schliessen {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    width: 2.25rem;
    height: 2.25rem;
    border: 0;
    border-radius: var(--border);
    background: transparent;
    color: rgba(255, 255, 255, 0.7);
    font-size: 1.2rem;
    cursor: pointer;
}

.login-demo-schliessen:hover {
    color: var(--white);
}

.login-demo-titel {
    margin: 0 0 0.5rem;
    font-size: 1.6rem !important;
    font-weight: 800;
    color: var(--white);
}

.login-demo-intro {
    margin: 0 0 1.5rem;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.5;
}

.login-demo-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.login-demo-reihe {
    display: flex;
    gap: 1rem;
}

.login-demo-reihe[hidden] {
    display: none;
}

.login-demo-zwei > * {
    flex: 1 1 0;
    min-width: 0;
}

.login-demo .login-demo-feld {
    width: 100%;
    min-height: 3rem;
    margin: 0;
    padding: 0.6rem 0.9rem !important;
    font-size: 1rem;
    outline: none;
}

.login-demo textarea.login-demo-feld {
    resize: vertical;
}

.login-demo select.login-demo-feld option {
    background: var(--darkblue);
    color: var(--white);
}

.login-demo .login-demo-feld:focus {
    box-shadow: 0 0 0 2px var(--login-akzent), rgba(0, 0, 0, 0.4) 0px 2px 4px !important;
}

.login-demo .is-fehler,
.login-demo .login-demo-feld.is-fehler {
    box-shadow: 0 0 0 2px var(--lightred) !important;
}

.login-demo-rolle {
    margin: 0;
    padding: 0.25rem 0.5rem 0.5rem;
    border: 0;
    border-radius: var(--border);
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.75rem;
}

.login-demo-rolle legend {
    width: 100%;
    margin-bottom: 0.25rem;
    font-size: 1rem;
    font-weight: 700;
    color: var(--white);
}

.login-demo-rolle label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    color: rgba(255, 255, 255, 0.85);
}

.login-demo-rolle input {
    accent-color: var(--login-akzent);
    width: 1.1rem;
    height: 1.1rem;
}

.login-demo-meldung {
    margin: 0;
    color: var(--lightred);
    font-size: 0.95rem;
}

.login-demo-pflicht {
    margin: -0.25rem 0 0;
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.85rem;
    text-align: center;
}

.login-demo-danke {
    padding: 2rem 0 0.5rem;
    text-align: center;
}

.login-demo-danke h3 {
    margin: 1rem 0 0.5rem;
    font-size: 1.35rem !important;
    color: var(--white);
}

.login-demo-danke p {
    margin: 0 0 1.75rem;
    color: rgba(255, 255, 255, 0.7);
}

.login-demo-danke .login-csa-btn {
    width: 100%;
}

.login-demo-haken {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    background: var(--login-akzent);
    font-size: 1.5rem;
}

/* Mobil: Fenster scrollt weiter, aber ohne sichtbaren Scrollbalken (User 16.10.2026) */
@media (max-width: 991px) {
    .login-demo {
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .login-demo::-webkit-scrollbar {
        display: none;
    }
}

@media (max-width: 600px) {
    .login-demo-inhalt {
        padding: 2rem 1.25rem 1.5rem;
    }

    .login-demo-zwei {
        flex-direction: column;
    }
}