/*
 * Die Anmeldung der Verwaltung (resources/views/anmeldung.blade.php) – nur diese Seite, auf grund.css.
 * Links (am Handy oben) eine Fläche im Blau des Zeichens mit dem Zeichen groß und leise; rechts das Formular, groß und ruhig.
 * Kein Fremdbild, kein style-Attribut. Hell und dunkel nach dem System. Bewegung nur über opacity/transform, kurz.
 */
.einlass {
    --e-grund: #F5F5F2;
    --e-flaeche: #FFFFFF;
    --e-tinte: #16171A;
    --e-neben: #62656C;
    --e-linie: #D2D2CC;
    --e-feld: #FFFFFF;
    --e-fokus: rgba(15, 74, 126, 0.18);
    --e-knopf: #0F4A7E;
    --e-knopf-ueber: #0B3A64;
    --e-schalter-aus: #C9C9C3;
    --e-fehler: #B3261E;
    --e-fehler-grund: #FBE4E2;
    --e-blau-1: #0F4A7E;
    --e-blau-2: #0B3A64;
    --e-blau-3: #072742;
    background: var(--e-flaeche);
    color: var(--e-tinte);
}
@media (prefers-color-scheme: dark) {
    .einlass {
        color-scheme: dark;
        --e-grund: #0E1116;
        --e-flaeche: #12161C;
        --e-tinte: #E9EAEC;
        --e-neben: #9AA0A9;
        --e-linie: #2E3540;
        --e-feld: #191E26;
        --e-fokus: rgba(110, 166, 222, 0.28);
        --e-knopf: #2C68A4;
        --e-knopf-ueber: #3775B3;
        --e-schalter-aus: #3A414C;
        --e-fehler: #F2A39B;
        --e-fehler-grund: rgba(179, 38, 30, 0.2);
        --e-blau-1: #0D3F6B;
        --e-blau-2: #0A3054;
        --e-blau-3: #061C31;
    }
}

.einlass-buehne { min-height: 100dvh; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(400px, 1fr); }

/* ── Die Fläche im Blau des Zeichens ── */
.einlass-bild {
    position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end;
    padding: 44px 52px;
    background:
        radial-gradient(120% 90% at 18% 12%, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0) 55%),
        radial-gradient(90% 80% at 100% 100%, rgba(0, 0, 0, 0.28), rgba(0, 0, 0, 0) 60%),
        linear-gradient(155deg, var(--e-blau-1) 0%, var(--e-blau-2) 55%, var(--e-blau-3) 100%);
    color: #FFFFFF;
}

/*
 * Das Zeichen als Prägung: drei Lagen mit derselben Maske (logo-white.svg). Die Fläche selbst ist kaum dunkler als der Grund; oben
 * links liegt eine dunkle Kante (Zeichen minus um 3 px versetztes Zeichen), unten rechts eine helle – so wirkt es ins Material gedrückt.
 */
.einlass-praegung { position: absolute; top: 46%; right: 9%; width: min(58%, 540px); aspect-ratio: 1; transform: translateY(-50%); pointer-events: none; }
.einlass-praegung > span, .einlass-praegung::before, .einlass-praegung::after {
    content: ''; position: absolute; inset: 0;
    -webkit-mask: url('../bilder/logo-white.svg') center / contain no-repeat;
    mask: url('../bilder/logo-white.svg') center / contain no-repeat;
}
.einlass-praegung > span { background: rgba(0, 0, 0, 0.16); }
.einlass-praegung::before, .einlass-praegung::after {
    -webkit-mask: url('../bilder/logo-white.svg') center / contain no-repeat, url('../bilder/logo-white.svg') calc(50% + var(--versatz)) calc(50% + var(--versatz)) / contain no-repeat;
    mask: url('../bilder/logo-white.svg') center / contain no-repeat, url('../bilder/logo-white.svg') calc(50% + var(--versatz)) calc(50% + var(--versatz)) / contain no-repeat;
    -webkit-mask-composite: source-out;
    mask-composite: subtract;
}
.einlass-praegung::before { --versatz: 3px; background: rgba(0, 0, 0, 0.42); }
.einlass-praegung::after { --versatz: -2px; background: rgba(255, 255, 255, 0.2); }

.einlass-name { position: relative; }
.einlass-wort { font-size: clamp(34px, 3.4vw, 46px); font-weight: 600; line-height: 1; letter-spacing: -0.03em; }
.einlass-domain { margin-top: 10px; font-size: 13px; font-weight: 500; letter-spacing: 0.06em; opacity: 0.72; }

/* Variante »fenster«: Papier, das Zeichen ausgestanzt – durch die Öffnung scheint das Blau, die Kante wirft einen Schatten hinein. */
.einlass--fenster .einlass-bild { background: var(--e-grund); color: var(--e-tinte); border-right: 1px solid color-mix(in srgb, var(--e-tinte) 6%, transparent); }
.einlass--fenster .einlass-praegung > span {
    background:
        radial-gradient(90% 80% at 25% 15%, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0) 60%),
        linear-gradient(155deg, var(--e-blau-1) 0%, var(--e-blau-2) 55%, var(--e-blau-3) 100%);
}
.einlass--fenster .einlass-praegung::before { --versatz: 3px; background: rgba(0, 0, 0, 0.55); }
.einlass--fenster .einlass-praegung::after { --versatz: -2px; background: rgba(255, 255, 255, 0.5); }
.einlass--fenster .einlass-domain { opacity: 1; color: var(--e-neben); }

/* ── Das Formular ── */
.einlass-form { display: flex; align-items: center; justify-content: center; padding: 48px 40px; background: var(--e-flaeche); }
.einlass-inhalt { width: min(380px, 100%); animation: einlass-ein 360ms var(--kurve) both; }
/* Das kleine Zeichen über dem Formular steht nur für den Fall ohne Stil da – mit Stil trägt die Fläche das Zeichen (groß, geprägt). */
.einlass-zeichen { display: block; width: 56px; height: 56px; margin: 0 0 22px -1px; }
.einlass picture { display: none; }
.einlass-studio { font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--e-neben); }
.einlass h1 { margin: 6px 0 28px; font-size: 34px; line-height: 1.1; letter-spacing: -0.025em; color: var(--e-tinte); }

.einlass-felder { display: flex; flex-direction: column; gap: 16px; }
.einlass-feld { display: flex; flex-direction: column; gap: 7px; }
.einlass-feld > span:first-child { font-size: 14px; font-weight: 600; color: var(--e-tinte); }
.einlass .einlass-feld input {
    min-height: 52px; padding: 0 14px; border: 1px solid var(--e-linie); border-radius: 12px;
    background: var(--e-feld); color: var(--e-tinte); font-size: 17px;
}
.einlass .einlass-feld input:hover { border-color: color-mix(in srgb, var(--e-linie) 60%, var(--e-tinte)); }
.einlass .einlass-feld input:focus { outline: none; border-color: var(--e-knopf); box-shadow: 0 0 0 4px var(--e-fokus); }
.einlass .einlass-feld input[aria-invalid='true'] { border-color: var(--e-fehler); }
.einlass .einlass-feld input[aria-invalid='true']:focus { box-shadow: 0 0 0 4px var(--e-fehler-grund); }

.einlass-passwort { position: relative; display: block; }
.einlass .einlass-passwort input { padding-right: 84px; }
.einlass-zeigen {
    position: absolute; top: 50%; right: 8px; transform: translateY(-50%);
    min-height: 36px; padding: 0 12px; border: 0; border-radius: 8px; background: transparent;
    color: var(--e-neben); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
    transition: color 120ms, background-color 120ms;
}
.einlass-zeigen:hover { color: var(--e-tinte); background: color-mix(in srgb, var(--e-tinte) 7%, transparent); }
.einlass-zeigen[aria-pressed='true'] { color: var(--e-knopf); }

/* »Angemeldet bleiben« als Schalter – das echte Kästchen liegt unsichtbar darüber (Tastatur, Vorlesen, Formular). */
.einlass-bleiben { position: relative; display: flex; align-items: center; gap: 12px; min-height: 44px; margin-top: 2px; font-size: 15px; color: var(--e-tinte); cursor: pointer; user-select: none; }
.einlass-bleiben input { position: absolute; left: 0; top: 50%; width: 46px; height: 28px; margin: -14px 0 0; opacity: 0; cursor: pointer; }
.einlass-schalter { position: relative; flex: none; width: 46px; height: 28px; border-radius: 999px; background: var(--e-schalter-aus); transition: background-color 180ms var(--kurve); }
.einlass-schalter::after {
    content: ''; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%;
    background: #FFFFFF; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); transition: transform 180ms var(--kurve);
}
.einlass-bleiben input:checked + .einlass-schalter { background: var(--e-knopf); }
.einlass-bleiben input:checked + .einlass-schalter::after { transform: translateX(18px); }
.einlass-bleiben input:focus-visible + .einlass-schalter { box-shadow: 0 0 0 4px var(--e-fokus); }

.einlass-knopf {
    display: flex; align-items: center; justify-content: center; width: 100%; min-height: 54px; margin-top: 6px;
    border: 0; border-radius: 12px; background: var(--e-knopf); color: #FFFFFF;
    font: inherit; font-size: 17px; font-weight: 600; cursor: pointer;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 6px 18px rgba(15, 74, 126, 0.22);
    transition: background-color 140ms, transform 140ms var(--kurve), box-shadow 140ms;
}
.einlass-knopf:hover { background: var(--e-knopf-ueber); }
.einlass-knopf:active { transform: translateY(1px); }
.einlass-knopf:focus-visible { outline: none; box-shadow: 0 0 0 4px var(--e-fokus); }
.einlass-knopf[data-loading] { opacity: 0.7; cursor: progress; }

.einlass-fehler {
    display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: 12px;
    background: var(--e-fehler-grund); color: var(--e-fehler); font-size: 15px; font-weight: 600; line-height: 1.35;
    animation: einlass-fehler 260ms var(--kurve) both;
}
.einlass-fehler svg { flex: none; margin-top: 0; }
.einlass-fehler[hidden] { display: none; }
.einlass-hinweis { font-size: 14px; color: var(--e-neben); }

@keyframes einlass-ein { from { opacity: 0; transform: translateY(8px); } }
@keyframes einlass-fehler { from { opacity: 0; transform: translateY(-4px); } }

/* ── Schmal: die blaue Fläche wird ein Band oben ── */
@media (max-width: 860px) {
    .einlass-buehne { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
    .einlass-bild { min-height: 172px; padding: max(22px, env(safe-area-inset-top)) 20px 22px; }
    .einlass-praegung { top: 50%; right: -6px; width: 190px; }
    .einlass-wort { font-size: 34px; }
    .einlass-form { align-items: flex-start; padding: 28px 16px max(32px, env(safe-area-inset-bottom)); }
    .einlass h1 { margin: 4px 0 22px; font-size: 30px; }
}

@media (prefers-reduced-motion: reduce) {
    .einlass-inhalt, .einlass-fehler { animation: none; }
    .einlass-schalter, .einlass-schalter::after, .einlass-knopf { transition: none; }
}