/* Auth (Login/Signup) – kombiniertes Dual-Panel mit Neon-Buttons.
   Bewusst als statische CSS-Datei: enthält @property mit '<angle>',
   was im Thymeleaf-Inline-Style als HTML-Tag fehlinterpretiert würde. */

/* Rotierender Winkel für den Conic-Gradient-Glow (Bild 1) */
@property --mf-ang { syntax: '<angle>'; initial-value: 0deg; inherits: false; }

.auth-stage { width:100%; display:flex; flex-direction:column; align-items:center; gap:1.4rem; }
.auth-intro { width:100%; max-width:840px; padding:1.25rem 1.4rem; border:1px solid var(--border); border-radius:16px; background:var(--surface); box-shadow:var(--g-soft); }
.auth-intro h1 { color:var(--heading); font-size:clamp(1.35rem,3vw,1.85rem); line-height:1.18; margin:.35rem 0 .6rem; }
.auth-intro p { color:var(--muted); line-height:1.6; max-width:72ch; }
.auth-intro ul { display:grid; grid-template-columns:repeat(3,1fr); gap:.7rem 1rem; list-style:none; margin-top:.9rem; padding:0; }
.auth-intro li { color:var(--muted); font-size:.82rem; line-height:1.45; }
.auth-intro li b { color:var(--accent); }

/* ---- Dual-Panel-Container (Bild 2) ---- */
.auth-container {
    position:relative; width:100%; max-width:840px; min-height:560px;
    background:var(--surface); border:1px solid var(--border-accent);
    border-radius:22px; box-shadow:0 0 44px var(--glow-w); overflow:hidden;
}
.form-box {
    position:absolute; top:0; height:100%; width:50%;
    display:flex; align-items:center; justify-content:center;
    padding:2.4rem 2.6rem; transition:transform .65s ease-in-out, opacity .65s ease-in-out;
}
.form-box .inner { width:100%; max-width:320px; }
.form-box.login  { left:0; z-index:2; }
.form-box.signup { left:0; opacity:0; z-index:1; }
.form-box.signup { overflow-y:auto; overscroll-behavior:contain; scrollbar-gutter:stable; }
.form-box.signup .inner { margin:auto; }

.auth-container.active .form-box.login  { transform:translateX(100%); opacity:0; z-index:1; }
.auth-container.active .form-box.signup { transform:translateX(100%); opacity:1; z-index:5; }

/* ---- Überschiebendes Gradient-Overlay ---- */
.overlay-container {
    position:absolute; top:0; left:50%; width:50%; height:100%;
    overflow:hidden; z-index:100; transition:transform .65s ease-in-out;
    box-shadow: -1px 0 0 var(--border-accent), -26px 0 55px -30px var(--glow-s);
}
.auth-container.active .overlay-container { transform:translateX(-100%); }
.overlay {
    position:relative; left:-100%; width:200%; height:100%; transform:translateX(0);
    transition:transform .65s ease-in-out;
    background:
        radial-gradient(540px 380px at 70% 22%, var(--glow-s), transparent 60%),
        radial-gradient(420px 300px at 20% 90%, var(--glow-w), transparent 65%),
        linear-gradient(150deg, var(--surface-2), var(--surface));
}
.auth-container.active .overlay { transform:translateX(50%); }
.overlay-panel {
    position:absolute; top:0; height:100%; width:50%;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    text-align:center; padding:0 2.4rem; color:var(--text);
    transition:transform .65s ease-in-out;
}
.overlay-left  { transform:translateX(-18%); }
.auth-container.active .overlay-left  { transform:translateX(0); }
.overlay-right { right:0; transform:translateX(0); }
.auth-container.active .overlay-right { transform:translateX(18%); }

.overlay-panel .o-emblem {
    width:56px; height:56px; background:var(--accent); margin-bottom:1rem;
    -webkit-mask:url("/img/mindflux-emblem.png") center/contain no-repeat;
            mask:url("/img/mindflux-emblem.png") center/contain no-repeat;
    filter:drop-shadow(0 0 12px var(--glow-s));
}
.overlay-panel h3 { color:var(--heading); font-size:1.5rem; font-weight:800; margin-bottom:.6rem; letter-spacing:.01em; text-shadow:0 0 18px var(--glow-w); }
.overlay-panel p  { color:var(--text); font-size:.9rem; line-height:1.65; margin-bottom:1.6rem; max-width:280px; }

/* ---- Formularkopf ---- */
.auth-head { text-align:center; margin-bottom:1.4rem; }
.auth-head .mark {
    width:52px; height:52px; margin:0 auto .55rem; background:var(--accent);
    -webkit-mask:url("/img/mindflux-emblem.png") center/contain no-repeat;
            mask:url("/img/mindflux-emblem.png") center/contain no-repeat;
    filter:drop-shadow(0 0 12px var(--glow-s));
}
.auth-head b { display:block; color:var(--accent); font-weight:800; letter-spacing:.16em; font-size:1.05rem; text-shadow:0 0 14px var(--glow-s); }
.auth-head h2 { color:var(--heading); font-size:1.35rem; font-weight:800; margin-top:.5rem; }
.auth-head .sub { color:var(--muted); font-size:.82rem; margin-top:.2rem; }

.mf-alert { padding:.6rem .8rem; border-radius:10px; font-size:.82rem; margin-bottom:.9rem; text-align:center; }
.mf-alert.err { color:var(--danger); border:1px solid var(--danger); background:rgba(255,95,107,.08); }
.mf-alert.ok  { color:var(--accent); border:1px solid var(--border-accent); background:var(--surface-2); }

/* ---- Neon-Button mit Hover-Expand + rotierendem Conic-Glow (Bild 1) ---- */
.neon-btn {
    position:relative; z-index:0; width:100%; margin-top:.4rem;
    display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
    padding:.85rem 1.3rem; border:0; border-radius:999px; cursor:pointer;
    font-weight:800; font-size:.82rem; letter-spacing:.08em; text-transform:uppercase;
    color:var(--accent-ink); background:var(--accent); box-shadow:0 0 18px var(--glow-s);
    transition:transform .3s ease, letter-spacing .3s ease, box-shadow .3s ease;
}
.neon-btn::before {
    content:""; position:absolute; inset:-3px; border-radius:inherit; z-index:-1;
    background:conic-gradient(from var(--mf-ang),
        var(--accent), var(--accent-2), var(--accent), var(--accent-2), var(--accent));
    filter:blur(9px); opacity:0; transition:opacity .35s ease;
    animation:mf-spin 4s linear infinite;
}
.neon-btn:hover { transform:translateY(-2px); letter-spacing:.16em; box-shadow:0 0 28px var(--glow-s); }
.neon-btn:hover::before { opacity:.9; }
.neon-btn:focus-visible { outline:2px solid var(--accent-2); outline-offset:3px; }
.neon-btn .lock { font-size:.95em; }
@keyframes mf-spin { to { --mf-ang:360deg; } }

/* Outline-Variante für die Overlay-Buttons (auf Gradient) */
.ghost-btn {
    display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
    padding:.75rem 1.8rem; border-radius:999px; cursor:pointer; font-weight:800;
    font-size:.8rem; letter-spacing:.1em; text-transform:uppercase;
    background:transparent; color:var(--accent); border:2px solid var(--border-accent);
    box-shadow:0 0 16px var(--glow-w);
    transition:transform .25s ease, background .25s ease, box-shadow .25s ease;
}
.ghost-btn:hover { transform:translateY(-2px); background:var(--surface-2); box-shadow:0 0 22px var(--glow-s); }

/* ---- Light-Mode: Overlay als kräftiges Orange-Panel mit weißem Text ----
   (im Dark-Mode ist das Overlay ein dunkles Panel mit Glow; im Light-Mode
   wären die Surface-Töne weiß -> Panel verschwände. Daher hier farbig.) */
[data-theme="light"] .overlay {
  background:
    radial-gradient(600px 340px at 28% 6%, rgba(255,255,255,.18), transparent 60%),
    linear-gradient(150deg, var(--accent-2), var(--accent) 48%);
}
[data-theme="light"] .overlay-panel { color:#fff; }
[data-theme="light"] .overlay-panel h3 { color:#fff; text-shadow:0 1px 12px rgba(0,0,0,.22); }
[data-theme="light"] .overlay-panel p  { color:#fff; opacity:.96; }
[data-theme="light"] .overlay-panel .o-emblem { background:#fff; filter:drop-shadow(0 0 10px rgba(0,0,0,.25)); }
[data-theme="light"] .ghost-btn { color:#fff; border-color:rgba(255,255,255,.9); box-shadow:none; }
[data-theme="light"] .ghost-btn:hover { background:rgba(255,255,255,.18); box-shadow:none; }

.mobile-switch { display:none; text-align:center; margin-top:1.2rem; color:var(--muted); font-size:.84rem; }
.mobile-switch a { color:var(--accent); font-weight:700; text-decoration:none; cursor:pointer; }
.login-help { margin:.42rem 0 0; text-align:left; font-size:.78rem; }
.login-help a { color:var(--accent); font-weight:700; text-decoration:none; }
.login-help a:hover { color:var(--heading); text-decoration:underline; text-underline-offset:.2rem; }
.login-help a:focus-visible { outline:2px solid var(--accent-2); outline-offset:3px; border-radius:3px; }

/* Bestätigungs-E-Mail: Das Eingabefeld bleibt platzsparend eingeklappt. */
.auth-resend { margin-top:1rem; }
.auth-resend-toggle {
    appearance:none; border:0; padding:0; background:none; color:var(--accent);
    font:700 .82rem/1.4 inherit; cursor:pointer; text-decoration:underline;
    text-underline-offset:.22rem;
}
.auth-resend-toggle:hover { color:var(--heading); }
.auth-resend-toggle:focus-visible { outline:2px solid var(--accent-2); outline-offset:4px; border-radius:3px; }
.auth-resend form { margin-top:.7rem; }
.auth-resend-fields { display:flex; gap:.5rem; align-items:center; margin-top:.35rem; }
.auth-resend-fields .mf-btn { flex:0 0 auto; }

/* ---- Responsiv: gestapelt, ohne Overlay ---- */
@media (max-width:760px) {
    .auth-intro { padding:1rem; }
    .auth-intro ul { grid-template-columns:1fr; gap:.45rem; }
    .auth-container { max-width:420px; min-height:auto; }
    .overlay-container { display:none; }
    .form-box {
        position:relative; width:100%; padding:2rem 1.6rem;
        transform:none !important; opacity:1 !important; transition:none;
    }
    .form-box.signup { display:none; }
    .auth-container.active .form-box.login  { display:none; }
    .auth-container.active .form-box.signup { display:flex; }
    .mobile-switch { display:block; }
    .form-box.signup { overflow:visible; }
    .auth-resend-fields { align-items:stretch; flex-direction:column; }
}