*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:'Segoe UI',sans-serif;background:#0e0e16;color:var(--ink)}

/* Split-Screen Layout */
.split{display:flex;flex-direction:row-reverse;min-height:100vh}   /* Login-Fenster immer rechts, Bild links */

/* Rechte Seite: Login */
.pane-form{flex:0 0 460px;max-width:100%;display:flex;align-items:center;justify-content:center;padding:48px 40px;background:#fff}
.box{width:100%;max-width:360px}
.brand{display:flex;align-items:center;gap:10px;margin-bottom:36px}
.brand-mark{width:38px;height:38px;border-radius:10px;background:linear-gradient(135deg,var(--accent),var(--accent-dark));display:flex;align-items:center;justify-content:center;font-size:19px;box-shadow:0 6px 18px rgba(240,165,0,.35)}
.brand-name{font-size:16px;font-weight:700;letter-spacing:.3px;color:var(--ink)}
h1{font-size:26px;color:var(--ink);margin-bottom:8px;letter-spacing:-.3px}
p.sub{color:#8a8a96;font-size:14.5px;margin-bottom:32px}
label{display:block;font-size:13px;font-weight:600;color:#444;margin-bottom:7px}
.field{margin-bottom:18px}
input{width:100%;padding:13px 15px;border:1.5px solid #e3e3e8;border-radius:10px;font-size:15px;outline:none;font-family:inherit;transition:border .2s,box-shadow .2s;background:#fafafb}
input:focus{border-color:var(--accent);box-shadow:0 0 0 4px rgba(240,165,0,.12);background:#fff}
button{width:100%;padding:14px;background:var(--accent);color:#fff;border:none;border-radius:10px;font-size:15px;font-weight:600;cursor:pointer;margin-top:6px;transition:background .2s,transform .05s}
button:hover{background:var(--accent-dark)}
button:active{transform:translateY(1px)}
.error{background:#fee2e2;color:#b91c1c;padding:11px 14px;border-radius:10px;margin-bottom:20px;font-size:14px}
.note{background:#eafaf1;color:#1c7a44;padding:11px 14px;border-radius:10px;margin-bottom:20px;font-size:14px;line-height:1.5}
.linkrow{margin-top:16px;text-align:center;font-size:13px}
.linkrow a{color:var(--accent);text-decoration:none;font-weight:600}
.linkrow a:hover{text-decoration:underline}
.foot{margin-top:34px;font-size:12.5px;color:#b0b0ba;text-align:center}

/* Rechte Seite: Bild */
.pane-image{flex:1;position:relative;background:#16161f center/cover no-repeat}
.pane-image::after{content:'';position:absolute;inset:0;background:linear-gradient(120deg,rgba(14,14,22,.55) 0%,rgba(14,14,22,.15) 45%,rgba(14,14,22,.45) 100%)}
.pane-quote{position:absolute;left:48px;bottom:48px;right:48px;z-index:1;color:#fff;text-shadow:0 2px 18px rgba(0,0,0,.5)}
.pane-quote h2{font-size:30px;font-weight:700;line-height:1.25;letter-spacing:-.4px;margin-bottom:10px;max-width:80%}
.pane-quote p{font-size:15px;opacity:.85;max-width:60%}
.bg-credit{position:absolute;right:26px;bottom:24px;z-index:1;font-size:13px;color:rgba(255,255,255,.7);letter-spacing:.2px}
.bg-credit a{color:#fff;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.3)}
.bg-credit a:hover{border-color:#fff}

/* Responsive */
@media(max-width:860px){
  .pane-image{display:none}
  .pane-form{flex:1}
  body{background:#fff}
}

/* Zwei-Faktor-Schritt */
.twofa-code{letter-spacing:.25em;font-size:20px;text-align:center}
.twofa-trust{display:flex;align-items:center;gap:10px;margin:4px 0 22px;font-size:14px;color:#555;cursor:pointer}
.twofa-trust input{width:auto;margin:0}