/* ==========================================================================
   Anmeldung (login.php)

   Die Tür zur Arbeitsfläche: links eine ruhige dunkle Seite mit der Marke,
   rechts das Formular mit viel Luft. Look B gilt weiter – Blaugrau trägt die
   Bedienelemente, Rot bleibt der Marke vorbehalten. Nur die Bedienelemente
   sind hier eine Spur größer als in der dichten Arbeitsfläche: Wer sich
   anmeldet, tut in diesem Moment nichts anderes.
   ========================================================================== */
.lg-body {
    --lg-ink: var(--stage-ink);
    --lg-ink-2: var(--stage-ink-2);
    --lg-ink-soft: var(--stage-soft);
    --lg-line-dark: var(--stage-line);
    background: var(--brand-surface);
}
.lg-main { padding: 0; }

.lg-shell {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    min-height: 100vh;
    min-height: 100dvh;
}

/* --------------------------------------------------------------------------
   Linke Hälfte
   -------------------------------------------------------------------------- */
.lg-stage {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 40px;
    padding: clamp(32px, 4vw, 56px);
    background: radial-gradient(120% 90% at 12% 0%, var(--stage-hell) 0%, var(--lg-ink) 58%, var(--stage-tief) 100%);
    color: #fff;
    overflow: hidden;
}
/* DAS BILD IST DER GRUND (15.09.2026). Bis dahin gab ein roter Lichtfleck
   der Fläche Tiefe; jetzt liegt das Orbit-Bild darunter – auf --stage-ink
   gerechnet, deshalb verschmilzt es mit dem Verlauf und braucht keinen Rand.
   Nach rechts blendet die Maske auf 35 % ab, damit der Satz auf ruhigem
   Grund steht. ES STEHT STILL (16.09.2026): Bis dahin wich es dem Zeiger um
   ein paar Pixel aus, und das verwirrte mehr, als es Tiefe gab. Dafür liegt
   es jetzt scharf da – vier Größen bis 3760px, der Browser wählt. */
.lg-bild {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Nicht ganz links: Bei 30 % liegt der Bogen der Bänder oben in der
       Fläche und der Satz unten links steht auf ruhigerem Grund. */
    object-position: 30% center;
    -webkit-mask-image: linear-gradient(to right, #000 55%, rgba(0, 0, 0, 0.35) 100%);
    mask-image: linear-gradient(to right, #000 55%, rgba(0, 0, 0, 0.35) 100%);
    pointer-events: none;
}
/* Der Schleier: Von unten her legt sich die Bühnenfarbe über das Bild, damit
   Satz und die drei Zusagen auf ruhigem Grund stehen. Weiß auf den hellsten
   Bändern läge sonst bei 2 : 1. Oben bleibt das Bild, wie es ist. */
.lg-stage::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background: linear-gradient(to top, var(--lg-ink) 0%, color-mix(in srgb, var(--lg-ink) 72%, transparent) 30%, transparent 62%);
    pointer-events: none;
}
/* Alles andere auf der Bühne steht über dem Bild. */
.lg-stage > :not(.lg-bild) { position: relative; z-index: 1; }


.lg-stage-text { position: relative; }
.lg-stage-text h1 {
    margin: 0 0 14px;
    font-size: clamp(1.9rem, 3.2vw, 2.9rem);
    line-height: 1.08;
    letter-spacing: -0.035em;
    font-weight: 700;
}
.lg-stage-text p {
    margin: 0;
    max-width: 34em;
    font-size: var(--fs-7);
    line-height: 1.65;
    color: var(--stage-soft);
}

.lg-notes {
    position: relative;
    margin: 0;
    padding: 0;
    list-style: none;
}
.lg-notes li {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 7px 0;
    font-size: var(--fs-6);
    color: var(--lg-ink-soft);
}
.lg-notes svg {
    flex: none;
    color: var(--btn-blue);
}

/* --------------------------------------------------------------------------
   Rechte Hälfte
   -------------------------------------------------------------------------- */
.lg-panel {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(32px, 4vw, 56px);
    background: var(--brand-surface);
}
.lg-form-wrap {
    width: 100%;
    max-width: 360px;
    margin: 0 auto;
}

.lg-eyebrow {
    display: block;
    margin-bottom: 10px;
    font-size: var(--fs-3);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--brand-faint);
}
.lg-title {
    margin: 0 0 6px;
    font-size: var(--fs-11);
    letter-spacing: -0.03em;
    font-weight: 700;
}
.lg-sub {
    margin: 0 0 26px;
    font-size: var(--fs-7);
    line-height: 1.55;
    color: var(--brand-quiet);
}

/* Meldungen: flach, ohne Ausrufezeichen-Optik */
.lg-meldung {
    margin-bottom: 18px;
    padding: 10px 13px;
    border-radius: var(--r-ctl);
    font-size: var(--fs-6);
    line-height: 1.5;
}
.lg-meldung.is-fehler {
    border: 1px solid var(--btn-red-border-light);
    background: var(--btn-red-bg-light);
    color: var(--btn-red-text);
}
.lg-meldung.is-hinweis {
    border: 1px solid var(--blau-rand);
    background: var(--blau-hell);
    color: var(--btn-leucht-tief);
}

.lg-field { margin-bottom: 16px; }
.lg-field label {
    display: block;
    margin-bottom: 6px;
    font-size: var(--fs-3);
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--brand-quiet);
}
.lg-field input {
    width: 100%;
    height: var(--h-ctl-lg);
    padding: 0 14px;
    border: 1px solid var(--brand-border);
    /* Radius und Grund wie auf jeder anderen Kundenseite (23.08.2026):
       hier standen --r-ctl (8px) und --brand-row, in der Terminbuchung
       10px und Weiß, auf der Landingpage 10px und der Seitengrund. */
    border-radius: var(--oe-radius-sm);
    background: var(--brand-bg);
    font-family: inherit;
    font-size: var(--fs-7);
    color: var(--brand-text);
    transition: border-color var(--t-fast) var(--ease-out), background-color var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out);
}
.lg-field input:hover { border-color: var(--brand-line-strong); }
/* --btn-blue war der Träger der Gesellschaft – der Fokus trägt seit dem
   21.08.2026 das helle Blau des Hauses (--focus-col). Die Anmeldung war die
   letzte Fläche, auf der noch die alte Fassung stand. */
.lg-field input:focus {
    outline: none;
    background: var(--brand-surface);
    border-color: var(--focus-col);
    box-shadow: var(--focus-ring);
}

/* Passwortfeld mit Schalter zum Anzeigen */
.lg-pw { position: relative; }
.lg-pw input { padding-right: 46px; }
.lg-pw-schalter {
    position: absolute;
    top: 50%;
    right: 6px;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px; height: 32px;
    padding: 0;
    border: 0;
    border-radius: var(--r-sm);
    background: none;
    color: var(--brand-faint);
    cursor: pointer;
    transition: color var(--t-fast) var(--ease-out), background-color var(--t-fast) var(--ease-out);
}
.lg-pw-schalter:hover {
    background: var(--btn-gray-bg);
    color: var(--brand-text);
}
.lg-pw-schalter:focus-visible {
    outline: 2px solid var(--focus-col);
    outline-offset: 1px;
}

/* Der Code steht groß und gesperrt – er wird abgetippt, nicht gelesen */
.lg-code {
    font-size: var(--fs-11) !important;
    font-weight: 700;
    letter-spacing: 0.4em;
    text-align: center;
    text-indent: 0.4em; /* gleicht die Sperrung hinter der letzten Ziffer aus */
    font-variant-numeric: tabular-nums;
    height: 58px !important;
}
.lg-code::placeholder {
    color: var(--brand-border);
    font-weight: 600;
}

.lg-check {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 4px 0 20px;
    font-size: var(--fs-6);
    color: var(--brand-quiet);
    cursor: pointer;
}
.lg-check input {
    flex: none;
    width: 16px; height: 16px;
    accent-color: var(--btn-leucht-dark);
}

.lg-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: var(--h-ctl-lg);
    /* Derselbe Körper wie .btn-primary (01-basis.css, 15.09.2026): kein Rand,
       Verlauf bei 170°, Lichtkante innen oben. Bis zum 16.09.2026 stand hier
       noch der Rand und die 150°-Schräge von vor dem Umbau. */
    border: 1px solid transparent;
    border-radius: var(--r-ctl);
    background-color: var(--btn-leucht-dark);
    background-image: linear-gradient(170deg, var(--btn-leucht), var(--btn-leucht-dark));
    box-shadow: inset 0 1px 0 var(--btn-kante), 0 1px 2px rgba(24, 44, 66, .16);
    color: #fff;
    font-family: inherit;
    font-size: var(--fs-7);
    font-weight: 600;
    cursor: pointer;
    transition: background-color var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out);
}
.lg-btn:hover {
    background-color: var(--btn-leucht-dark);
    background-image: linear-gradient(170deg, var(--btn-leucht-dark), var(--btn-leucht-tief));
    border-color: transparent;
    transform: translateY(-1px);
    box-shadow: inset 0 1px 0 var(--btn-kante), 0 4px 12px var(--btn-schein);
}
.lg-btn:active { transform: scale(0.97); box-shadow: inset 0 1px 0 var(--btn-kante); }
/* DER LICHTLAUF (15.09.2026): einmal nach dem Laden zieht ein schmales Licht
   über den Knopf, 1,4 s, dann nie wieder. Er sagt „hier geht es weiter",
   ohne zu blinken. Die Lichtkante innen oben ist dieselbe wie an jedem
   gefüllten Knopf der Arbeitsfläche (01-basis.css). */
.lg-btn {
    position: relative;
    overflow: hidden;
    box-shadow: inset 0 1px 0 var(--btn-kante, rgba(255, 255, 255, 0.28));
}
.lg-btn::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: -60%;
    width: 40%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.35), transparent);
    transform: skewX(-20deg);
    animation: lg-licht 1.4s var(--ease-out) 0.8s 1 both;
    pointer-events: none;
}
@keyframes lg-licht { to { left: 130%; } }
.lg-btn:focus-visible {
    outline: 2px solid var(--btn-leucht-dark);
    outline-offset: 2px;
}

.lg-zurueck {
    display: block;
    margin-top: 14px;
    text-align: center;
    font-size: var(--fs-5);
    color: var(--brand-quiet);
    text-decoration: none;
}
.lg-zurueck:hover { color: var(--brand-text); text-decoration: underline; }

/* FACE ID (17.09.2026). Der Knopf steht über dem Passwort, weil er in der App
   der eigentliche Weg ist – derselbe gefüllte Knopf wie „Anmelden", mit dem
   Zeichen davor. Darunter ein leiser Trenner: Das Passwort bleibt da, es ist
   nur nicht mehr das Erste. */
.lg-faceid { margin-bottom: 18px; }
.lg-faceid form { margin: 0; }
.lg-faceid-knopf { gap: 10px; }
.lg-faceid-knopf svg { width: 22px; height: 22px; flex: none; }
.lg-trenner {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 18px;
    font-size: var(--fs-5);
    color: var(--brand-quiet);
}
.lg-trenner::before,
.lg-trenner::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--brand-border);
}

/* Derselbe Auftritt als Knopf – für den Ausweichweg „Code per E-Mail schicken“,
   der ein Formular abschickt und deshalb kein Link sein darf. */
.lg-form-inline { margin: 0; }
.lg-zurueck-knopf {
    width: 100%;
    border: 0;
    background: none;
    padding: 0;
    cursor: pointer;
    font: inherit;
}

.lg-foot {
    margin: 30px 0 0;
    padding-top: 18px;
    border-top: 1px solid var(--brand-border);
    font-size: var(--fs-5);
    line-height: 1.55;
    color: var(--brand-faint);
}

/* --------------------------------------------------------------------------
   Schmalere Schirme: die dunkle Seite wird zum Kopfband
   -------------------------------------------------------------------------- */
@media (max-width: 899.98px) {
    .lg-shell {
        grid-template-columns: minmax(0, 1fr);
        min-height: 0;
    }
    .lg-stage {
        gap: 20px;
        padding: 26px 22px 30px;
    }
    /* Als Kopfband ist die Bühne breit und flach – das Bild bleibt, nur die
       Maske fällt weg, sonst stünde rechts ein leerer Fleck. */
    .lg-bild { -webkit-mask-image: none; mask-image: none; object-position: left 40%; }
    .lg-stage-text h1 { font-size: var(--fs-11); }
    .lg-stage-text p { display: none; }
    .lg-notes { display: none; }
    .lg-panel { padding: 34px 22px 44px; }
}

@media (prefers-reduced-motion: reduce) {
    .lg-btn:hover, .lg-btn:active { transform: none; }
    .lg-field input,
    .lg-btn,
    .lg-pw-schalter { transition: none; }
    .lg-btn::after { animation: none; }
}