/* Modernes Dark-Design – komplett lokal, ohne externe Schriften/Bilder */
:root {
  color-scheme: dark;
  --bg: #0c1014;
  --panel: #11171d;
  --text: #f4f1eb;
  --muted: #98a0a7;
  --copper: #d4a575;
  --copper-light: #f0c79c;
  --line: rgba(255,255,255,.09);
}
* { box-sizing: border-box; }
html { min-height: 100%; }
body { margin: 0; min-height: 100vh; background: var(--bg); color: var(--text); font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased; }
.login-shell { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(440px, .88fr); min-height: 100vh; }
.story-panel { position: relative; overflow: hidden; min-height: 740px; display: flex; flex-direction: column; justify-content: space-between; padding: 43px clamp(35px,5vw,85px) 62px; isolation: isolate; background: radial-gradient(ellipse at 68% 39%,rgba(143,100,68,.19),transparent 44%), radial-gradient(ellipse at 18% 92%,rgba(48,77,81,.25),transparent 45%), linear-gradient(145deg,#171e24,#0b1014 73%); border-right: 1px solid var(--line); }
.story-panel:after { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .13; pointer-events: none; background: repeating-linear-gradient(0deg,transparent 0 3px,rgba(255,255,255,.035) 4px 5px); }
.story-top { display: flex; align-items: center; gap: 13px; z-index: 2; }
.brand-mark { width: 49px; height: 49px; border: 1px solid rgba(212,165,117,.5); display: grid; place-items: center; border-radius: 14px; color: #fff; font-weight: 800; letter-spacing: -2px; font-size: 17px; }
.brand-mark span,.brand-name span,.visual-monogram span { color: var(--copper); }
.brand-name { font-size: 12px; font-weight: 800; letter-spacing: 2.3px; }
.story-visual { position: absolute; top: 13%; left: 24%; width: 72%; aspect-ratio: 1; display: grid; place-items: center; pointer-events: none; }
.visual-ring { position: absolute; border: 1px solid rgba(212,165,117,.12); border-radius: 50%; }
.ring-one { inset: 7%; }.ring-two { inset: 19%; border-color: rgba(212,165,117,.24); }
.visual-glow { position: absolute; inset: 24%; border-radius: 50%; background: radial-gradient(circle,rgba(212,165,117,.14),transparent 70%); filter: blur(12px); }
.visual-monogram { font-family: Georgia,serif; font-size: clamp(95px,15vw,260px); font-weight: bold; color: rgba(241,233,220,.11); letter-spacing: -.1em; transform: translateX(-.07em); }
.story-bottom { position: relative; z-index: 2; max-width: 640px; }
.eyebrow { display: flex; align-items: center; gap: 12px; color: var(--copper); font-size: 11px; font-weight: 750; letter-spacing: 2.6px; }
.eyebrow-line { width: 31px; height: 1px; background: var(--copper); }
h1 { font-size: clamp(54px,6vw,98px); letter-spacing: -.07em; line-height: 1.04; margin: 22px 0 24px; font-weight: 750; }
h1 em { font-family: Georgia,serif; font-weight: 400; color: var(--copper-light); letter-spacing: -.065em; }
.story-bottom p { color: #aeb6b9; line-height: 1.8; font-size: 16px; margin: 0 0 35px; }
.story-tags { display: flex; flex-wrap: wrap; gap: 10px; }
.story-tags span { padding: 10px 15px; border: 1px solid rgba(255,255,255,.14); border-radius: 100px; font-size: 10px; letter-spacing: 1.6px; color: #d5d8d8; font-weight: 700; }
.form-panel { min-height: 100vh; display: flex; flex-direction: column; justify-content: space-between; padding: 47px clamp(32px,5.5vw,94px) 35px; background: radial-gradient(ellipse at 50% 43%,rgba(47,57,62,.15),transparent 63%), #0e1318; }
.form-top { display: flex; align-items: center; gap: 10px; color: #a8afb3; font-size: 10px; font-weight: 750; letter-spacing: 2px; }
.status-dot { width: 7px; height: 7px; background: var(--copper); border-radius: 50%; box-shadow: 0 0 0 5px rgba(212,165,117,.09); }
.form-wrap { width: 100%; max-width: 440px; margin: 80px auto; }
.form-icon { width: 54px; height: 54px; display: grid; place-items: center; background: rgba(212,165,117,.1); border: 1px solid rgba(212,165,117,.23); color: var(--copper-light); border-radius: 16px; margin-bottom: 34px; }
.form-icon svg { width: 24px; height: 24px; }
.form-kicker { font-size: 11px; color: var(--copper); letter-spacing: 2.1px; font-weight: 800; margin-bottom: 13px; }
h2 { font-size: clamp(45px,4vw,66px); letter-spacing: -.065em; line-height: 1.07; margin: 0 0 19px; }
h2 span { color: var(--copper-light); }
.form-intro { color: var(--muted); font-size: 14px; line-height: 1.85; margin: 0 0 39px; max-width: 390px; }
.field { margin-bottom: 21px; }
.field label { display: block; font-size: 12px; font-weight: 700; color: #e4e6e7; margin-bottom: 10px; }
.field input { width: 100%; height: 57px; padding: 0 18px; border: 1px solid #303b43; border-radius: 11px; background: #171e24; color: #fff; font: inherit; font-size: 14px; outline: none; transition: border-color .2s,box-shadow .2s; }
.field input::placeholder { color: #76838b; }
.field input:focus { border-color: var(--copper); box-shadow: 0 0 0 4px rgba(212,165,117,.11); }
.login-button { width: 100%; height: 58px; display: flex; align-items: center; justify-content: space-between; padding: 0 21px; margin-top: 29px; border: 0; border-radius: 11px; background: linear-gradient(110deg,#e2b585,#c99562); color: #201711; font: inherit; font-weight: 800; font-size: 14px; cursor: pointer; transition: transform .2s,filter .2s; }
.login-button:hover { transform: translateY(-2px); filter: brightness(1.08); }
.login-button:focus-visible { outline: 3px solid white; outline-offset: 3px; }
.login-button span { font-size: 22px; font-weight: 400; }
.invite-note { display: flex; align-items: flex-start; gap: 12px; border-top: 1px solid var(--line); margin-top: 38px; padding-top: 24px; }
.invite-icon { color: var(--copper); font-size: 17px; }
.invite-note p { margin: 0; color: #8f9aa1; font-size: 12px; line-height: 1.7; }
.form-bottom { display: flex; justify-content: space-between; gap: 15px; flex-wrap: wrap; color: #66747d; font-size: 11px; }
.login-error { margin: 0 0 22px; padding: 14px 16px; border: 1px solid #9b5151; background: rgba(150,49,49,.13); border-radius: 10px; color: #ffb6b6; font-size: 13px; }
@media (max-width: 1000px) { .login-shell { grid-template-columns: 1fr; } .story-panel { min-height: 350px; padding: 30px 35px; } .story-visual { width: 45%; left: 53%; top: -20%; } h1 { font-size: 48px; margin: 15px 0; } .story-bottom p { margin-bottom: 20px; } .form-panel { min-height: 680px; padding: 35px; } .form-wrap { margin: 60px auto; } }
@media (max-width: 600px) { .story-panel { min-height: 245px; padding: 23px 23px 28px; } .brand-mark { width: 39px; height: 39px; font-size: 14px; border-radius: 11px; } .brand-name { font-size: 9px; letter-spacing: 1.3px; } .story-visual { width: 68%; top: -18%; left: 48%; } .eyebrow { font-size: 9px; } h1 { font-size: 37px; margin: 10px 0; } .story-bottom p { display: none; } .story-tags { display: none; } .form-panel { padding: 28px 23px 24px; min-height: calc(100vh - 245px); } .form-wrap { margin: 44px auto 60px; } .form-icon { margin-bottom: 23px; } h2 { font-size: 47px; } .form-bottom span { display: none; } }
@media (prefers-reduced-motion: reduce) { *,*:before,*:after { transition: none !important; } }

/* Neutrale, vollständig private Loginseite */
.login-shell { grid-template-columns: 1fr; }
.form-panel { width: 100%; min-height: 100vh; padding: 42px 32px 30px; }
.form-wrap { max-width: 440px; margin: auto; }
.form-top { max-width: 1100px; width: 100%; margin: 0 auto; }
.form-bottom { max-width: 1100px; width: 100%; margin: 0 auto; }
h2 { margin-bottom: 36px; }
@media (max-width: 600px) {
 .form-panel { min-height: 100vh; padding: 26px 22px; }
 .form-wrap { margin: auto; }
}