/* Login als Produktseite (Demo-Instanz, Partials/Page/LoginShowcase.html) */
body.lr-login-page:has(.lr-showcase) { background: #0f1416 !important; }
.lr-showcase { --sc-bg: #0f1416; --sc-bg-2: #151c1f; --sc-card: #1a2326; --sc-line: #26343a; --sc-text: #e8eeee; --sc-muted: #93a4a8; --sc-teal: #5fc4b6; --sc-teal-2: #2f8f84; --sc-gold: #e3c27a;
    position: relative; min-height: 100vh; background: var(--sc-bg); color: var(--sc-text); overflow: hidden;
    font-family: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }
.lr-showcase-glow { position: absolute; top: -20%; right: -10%; width: 900px; height: 900px; background: radial-gradient(closest-side, rgba(95, 196, 182, .18), transparent 70%); pointer-events: none; }
.lr-showcase-wrap { position: relative; max-width: 1240px; margin: 0 auto; padding: 36px 48px 40px; }
.lr-showcase-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.lr-showcase-logo { display: flex; align-items: center; gap: 12px; }
.lr-showcase-logo span { font-weight: 600; letter-spacing: 4px; font-size: 15px; text-transform: uppercase; }
.lr-showcase-logo small { color: var(--sc-muted); font-size: 12px; letter-spacing: .5px; }
.lr-showcase-badge { font-size: 12px; color: var(--sc-muted); border: 1px solid var(--sc-line); padding: 6px 12px; border-radius: 999px; }
.lr-showcase-main { display: grid; grid-template-columns: 1.1fr .9fr; gap: 64px; margin-top: 56px; align-items: start; }
.lr-showcase-intro { padding-top: 48px; }
.lr-showcase-intro h1 { font-size: 56px; line-height: 1.04; font-weight: 300; letter-spacing: -1px; color: var(--sc-text); margin: 0; }
.lr-showcase-intro h1 strong { font-weight: 600; background: linear-gradient(90deg, var(--sc-teal), var(--sc-gold)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lr-showcase-lead { color: var(--sc-muted); font-size: 17px; line-height: 1.7; margin-top: 24px; max-width: 540px; }
.lr-showcase-tiles { margin-top: 40px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; max-width: 560px; }
.lr-showcase-tiles div { background: linear-gradient(180deg, var(--sc-card), var(--sc-bg-2)); border: 1px solid var(--sc-line); border-radius: 14px; padding: 18px; }
.lr-showcase-tiles small { color: var(--sc-muted); font-size: 12px; }
.lr-showcase-tiles b { display: block; font-size: 19px; font-weight: 500; margin: 6px 0 10px; }
.lr-showcase-tiles i { display: block; height: 6px; border-radius: 6px; background: linear-gradient(90deg, var(--sc-teal-2), var(--sc-teal)) 0 0 / var(--w) 100% no-repeat, var(--sc-line); }
.lr-showcase-login { background: rgba(26, 35, 38, .8); backdrop-filter: blur(12px); border: 1px solid var(--sc-line); border-radius: 20px; padding: 36px 40px; }
.lr-showcase-login h2 { font-size: 24px; font-weight: 500; color: var(--sc-text); margin: 0; }
.lr-showcase-login > p { color: var(--sc-muted); font-size: 14px; margin: 8px 0 22px; }
/* felogin im Produktauftritt */
.lr-showcase-login .frame, .lr-showcase-login .frame-container, .lr-showcase-login .frame-inner { margin: 0 !important; padding: 0 !important; max-width: none !important; width: auto !important; }
.lr-showcase-login .frame-header, .lr-showcase-login header { display: none; }
.lr-showcase-login #layoutAuthentication, .lr-showcase-login #layoutAuthentication_content { all: unset; display: block; }
.lr-showcase-login label, .lr-showcase-login .form-label { color: var(--sc-muted); font-size: 12px; float: none !important; display: block; margin-bottom: 6px; }
/* stärker als die Regeln des Themes (html body .frame-type-felogin_login input …) */
html body .lr-showcase .lr-showcase-login .form-control,
html body .lr-showcase .lr-showcase-login input[type="text"],
html body .lr-showcase .lr-showcase-login input[type="password"] { background: #10181a; border: 1px solid var(--sc-line); color: var(--sc-text); border-radius: 10px; padding: 12px 14px; box-shadow: none; }
html body .lr-showcase .lr-showcase-login .form-control:focus,
html body .lr-showcase .lr-showcase-login input[type="text"]:focus,
html body .lr-showcase .lr-showcase-login input[type="password"]:focus { border-color: var(--sc-teal); box-shadow: 0 0 0 3px rgba(95, 196, 182, .15); background: #10181a; color: var(--sc-text); }
html body .lr-showcase .lr-showcase-login .input-group > input { border-top-right-radius: 0; border-bottom-right-radius: 0; }
html body .lr-showcase .lr-showcase-login .input-group-text { background: #10181a; border-color: var(--sc-line); border-radius: 0 10px 10px 0; }
.lr-showcase-login .input-group-text svg { fill: var(--sc-muted); }
.lr-showcase-login a { color: var(--sc-teal); }
.lr-showcase-login .text-muted { color: var(--sc-muted) !important; }
html body .lr-showcase .lr-showcase-login [type=submit], html body .lr-showcase .lr-showcase-login .btn-primary { width: 100%; border: 0; border-radius: 10px; padding: 13px; font-weight: 600; color: #06221e; background: linear-gradient(90deg, var(--sc-teal), #8fe0d4); }
.lr-showcase-login .btn-outline-secondary, .lr-showcase-login .btn-secondary { width: 100%; border-radius: 10px; border: 1px solid var(--sc-line); color: var(--sc-text); background: transparent; }
.lr-showcase-roles-title { font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--sc-muted); margin: 0 0 10px; }
.lr-showcase-roles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.lr-showcase-or { display: flex; align-items: center; gap: 12px; color: var(--sc-muted); font-size: 12px; margin: 22px 0 16px; }
.lr-showcase-or::before, .lr-showcase-or::after { content: ""; flex: 1; height: 1px; background: var(--sc-line); }
/* Begrüßungstext von felogin, Einmal-Passwort und Passkey braucht die Demo nicht; Fehlermeldungen bleiben */
.lr-showcase-login .lr-login-message-welcome, .lr-showcase-login .mb-3:has(#tx-felogin-input-otp), .lr-showcase-login .passkey-login,
.lr-showcase-login .passkey-recovery { display: none !important; }
.lr-showcase-login .lr-login-message h4 { color: var(--sc-text) !important; font-size: 16px; }
.lr-showcase-login .lr-login-message p { color: #f0b4a4 !important; font-size: 14px; }
.lr-showcase-login [id*="passkey"] ~ *:has(> hr), .lr-showcase-login .login-divider { display: none; }
.lr-showcase-roles button { text-align: left; border: 1px solid var(--sc-line); border-radius: 10px; padding: 10px 12px; color: var(--sc-text); background: transparent; font-size: 13px; cursor: pointer; }
.lr-showcase-roles button small { display: block; color: var(--sc-muted); font-size: 11px; margin-top: 2px; }
.lr-showcase-roles button:hover, .lr-showcase-roles button.is-active { border-color: var(--sc-teal); background: rgba(95, 196, 182, .08); }
.lr-showcase-foot { margin-top: 56px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; color: var(--sc-muted); font-size: 12px; border-top: 1px solid var(--sc-line); padding-top: 18px; }
.lr-showcase-foot a, .lr-showcase-foot button { color: var(--sc-muted); background: none; border: 0; padding: 0; font-size: 12px; text-decoration: none; }
.lr-showcase-foot a:hover, .lr-showcase-foot button:hover { color: var(--sc-text); }
@media (max-width: 980px) {
    .lr-showcase-wrap { padding: 24px; }
    .lr-showcase-main { grid-template-columns: 1fr; margin-top: 28px; gap: 32px; }
    .lr-showcase-login { order: -1; padding: 28px 24px; }
    .lr-showcase-intro h1 { font-size: 38px; }
    .lr-showcase-badge { display: none; }
}