/* ========================================================= LOGIN ONLY (scoped) Aktiv nur wenn ========================================================= */ :root{ --bg:#f4f6fb; --bg2:#eef2fb; --card:#ffffff; --text:#0f172a; --muted:#64748b; --line:rgba(15,23,42,.12); --acc:#1f4b7a; --acc2:#2563eb; --good:#16a34a; --warn:#f97316; --bad:#ef4444; --radius:16px; --shadow:0 12px 38px rgba(2,6,23,.10); } body.login-page a{color:inherit;text-decoration:none} body.login-page a:hover{opacity:.92} body.login-page .btn{ /* falls du Buttons brauchst */ display:inline-flex;align-items:center;justify-content:center; padding:9px 12px;border-radius:12px; border:1px solid rgba(31,75,122,.25); background:#fff;cursor:pointer;font-weight:700; } body.login-page .btn.primary{ background:linear-gradient(180deg,#2b5a8f,#1f4b7a); color:#fff;border-color:rgba(31,75,122,.25); } body.login-page .input{ padding:9px 10px;border-radius:12px; border:1px solid var(--line); background:#fff;width:100%; } body.login-page{ margin:0; font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; background: linear-gradient(180deg, var(--bg2), var(--bg)); color: var(--text); } /* Kleine globale Polishes nur fürs Login */ body.login-page *{ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body.login-page .login-wrap{ min-height:100vh; display:grid; grid-template-columns: 1.06fr .94fr; background: linear-gradient(180deg, var(--bg2), var(--bg)); } @media (max-width: 980px){ body.login-page .login-wrap{grid-template-columns:1fr} body.login-page .login-right{min-height:520px} } /* LEFT */ body.login-page .login-left{ background: rgba(255,255,255,.92); backdrop-filter: saturate(120%) blur(8px); display:flex;align-items:center;justify-content:center; padding:34px; position:relative; } body.login-page .login-left::before{ content:""; position:absolute; inset:0; background: radial-gradient(900px 500px at 20% 15%, rgba(37,99,235,.10), transparent 60%), radial-gradient(700px 420px at 70% 35%, rgba(14,165,233,.08), transparent 55%), radial-gradient(700px 420px at 40% 85%, rgba(31,75,122,.08), transparent 55%); pointer-events:none; } /* CARD */ body.login-page .login-card{ width:min(560px, 92vw); padding:30px 30px 26px; border-radius:24px; border:1px solid rgba(15,23,42,.10); background: rgba(255,255,255,.96); box-shadow: 0 24px 70px rgba(2,6,23,.14), 0 2px 0 rgba(255,255,255,.70) inset; position:relative; } body.login-page .login-card::after{ content:""; position:absolute; inset:0; border-radius:24px; pointer-events:none; background: linear-gradient(180deg, rgba(255,255,255,.65), rgba(255,255,255,0)); opacity:.45; } body.login-page .login-card h1{ margin: 6px 0 6px; font-size: 28px; letter-spacing: -.02em; } body.login-page .login-card p{ margin:0 0 18px; color:var(--muted); line-height:1.55; } body.login-page .login-card label{ display:block; font-size:12px; color:var(--muted); margin:10px 0 6px; } body.login-page .login-card .input{ padding:12px 12px; border-radius:14px; border:1px solid rgba(15,23,42,.14); background: rgba(255,255,255,.95); transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; } body.login-page .login-card .input:hover{ border-color: rgba(15,23,42,.20); } body.login-page .login-card .input:focus{ border-color: rgba(37,99,235,.55); box-shadow: 0 0 0 4px rgba(37,99,235,.14); transform: translateY(-1px); } body.login-page .login-card a.muted{ font-weight:600; text-decoration:none; } body.login-page .login-card a.muted:hover{ text-decoration:underline; } /* BUTTONS */ body.login-page .login-card .btn{ width:100%; padding:12px 14px; border-radius:14px; font-weight:800; letter-spacing:.01em; transition: transform .12s ease, box-shadow .12s ease, opacity .12s ease; } body.login-page .login-card .btn.primary{ background: linear-gradient(180deg, #2f66a6, #1f4b7a); box-shadow: 0 14px 30px rgba(31,75,122,.22); } body.login-page .login-card .btn.primary:hover{ transform: translateY(-1px); } body.login-page .login-card .btn.primary:active{ transform: translateY(0px); opacity:.95; } /* RIGHT */ /* RIGHT: Foto-Hintergrund (beide Scheinwerfer sichtbar) + sanftes Overlay */ body.login-page .login-right{ position:relative; overflow:hidden; background:#071429; /* fallback */ } /* Bild: komplett sichtbar (contain) */ body.login-page .login-right::before{ content:""; position:absolute; inset:0; background-image:url("login.png"); background-repeat:no-repeat; background-position:center; background-size:contain; /* beide Scheinwerfer */ opacity:1; filter:saturate(1.08) contrast(1.06) brightness(1.08); transform:none; pointer-events:none; z-index:0; } /* Overlay: lesbar aber heller */ body.login-page .login-right::after{ content:""; position:absolute; inset:0; background: linear-gradient( 180deg, rgba(2,6,23,.70), rgba(2,6,23,.45), rgba(2,6,23,.35) ); pointer-events:none; z-index:1; } body.login-page .login-right-inner{ position:relative; z-index:2; padding:44px 44px; color:#fff; height:100%; display:flex; flex-direction:column; justify-content:center; gap:14px; } @media (max-width: 980px){ body.login-page .login-right-inner{padding:34px 22px} } body.login-page .login-right h2{ margin:0; font-size:22px; letter-spacing:-.01em; } body.login-page .login-feat{ display:flex; gap:12px; align-items:flex-start; padding:10px 10px; border-radius:16px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); } body.login-page .login-ico{ width:36px;height:36px;border-radius:14px; background: rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.22); display:flex;align-items:center;justify-content:center; font-weight:900; flex: 0 0 auto; } body.login-page .login-cta{ margin-top:16px; border:1px solid rgba(255,255,255,.22); background: rgba(255,255,255,.08); padding:16px 16px; border-radius:18px; } /* FIX: Overlay-Pseudo-Element blockiert Klicks */ .login-left::before, .login-left::after { pointer-events: none !important; } /* ROBUST: Keine Backdrops dürfen Klicks fressen */ .login-wrap::before, .login-wrap::after, .login-left::before, .login-left::after, .login-right::before, .login-right::after, body::before, body::after { pointer-events: none !important; } /* Inhalt garantiert oben */ .login-card, .login-right-inner { position: relative; z-index: 2; } /* ========================================================= NO-DIM MODE (Login): KEIN Dimming / keine Abdunkelung ========================================================= */ /* 3) Linke Seite: Glas-Effekt raus (backdrop-filter kann "grau" wirken) */ body.login-page .login-left{ backdrop-filter: none !important; -webkit-backdrop-filter: none !important; background: #ffffff !important; /* statt rgba(...,.92) */ } /* 4) Linke Dekor-Gradients behalten, aber deutlich heller */ body.login-page .login-left::before{ background: radial-gradient(900px 500px at 20% 15%, rgba(37,99,235,.06), transparent 60%), radial-gradient(700px 420px at 70% 35%, rgba(14,165,233,.05), transparent 55%), radial-gradient(700px 420px at 40% 85%, rgba(31,75,122,.05), transparent 55%) !important; } /* 5) Falls irgendwer global filter/opacity setzt -> hart neutralisieren */ html, body, body.login-page, body.login-page .login-wrap, body.login-page .login-left, body.login-page .login-right, body.login-page .login-card, body.login-page .login-right-inner{ filter: none !important; opacity: 1 !important; } /* Global: niemals Klicks deaktivieren */ html, body { pointer-events: auto !important; } /* Falls irgendwer opacity/filter auf body/html setzt */ html, body { opacity: 1 !important; filter: none !important; } /* ========================================================= HARD FIX: Login immer klickbar (Stacking/HitTest stabil) ========================================================= */ /* Eigener Stacking-Context -> Deko-Pseudos können nicht "ausbrechen" */ body.login-page .login-wrap{ position: relative !important; z-index: 0 !important; isolation: isolate !important; } /* Spalten sauber im Stack */ body.login-page .login-left, body.login-page .login-right{ position: relative !important; z-index: 1 !important; } /* Inhalt MUSS oben liegen */ body.login-page .login-card, body.login-page .login-right-inner{ position: relative !important; z-index: 10 !important; } /* Alle Deko-Pseudos garantiert hinter Inhalt + nie klickbar */ body.login-page .login-left::before, body.login-page .login-left::after, body.login-page .login-right::before, body.login-page .login-right::after, body.login-page .login-wrap::before, body.login-page .login-wrap::after{ pointer-events: none !important; z-index: 0 !important; } /* Chrome/Windows: backdrop-filter kann HitTesting killen -> aus */ body.login-page .login-left{ backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } /* Falls Filter/Transform Stacking kaputt macht */ body.login-page .login-left, body.login-page .login-right, body.login-page .login-card, body.login-page .login-right-inner{ transform: none !important; filter: none !important; } /* Login muss immer klickbar sein */ body.login-page, body.login-page .login-wrap, body.login-page .login-wrap *{ pointer-events: auto !important; }