:root{ color-scheme:dark; }
*{ box-sizing:border-box; }
html,body{ min-height:100%; margin:0; }
body{ font-family:Inter,Roboto,system-ui,-apple-system,"Segoe UI",sans-serif; color:#fff; background:#071a36; }
.preview-welcome{ position:relative; display:grid; min-height:100vh; min-height:100svh; place-items:center; overflow:hidden; padding:48px 20px 110px; background:url("../photos/edit/team-personensuche-unterwegs.png") center 48%/cover no-repeat; }
.preview-shade{ position:absolute; inset:0; background:linear-gradient(100deg,rgba(5,18,39,.97) 0%,rgba(7,30,61,.86) 48%,rgba(7,30,61,.44) 100%); }
.preview-content{ position:relative; width:min(720px,100%); text-align:center; }
.preview-logo{ width:112px; height:112px; margin-bottom:22px; object-fit:contain; filter:drop-shadow(0 10px 24px rgba(0,0,0,.3)); }
.preview-kicker{ margin:0 0 12px; color:#9ed5f7; font-size:.78rem; font-weight:850; letter-spacing:.16em; text-transform:uppercase; }
.preview-content h1{ max-width:700px; margin:0 auto 22px; font-size:clamp(2.5rem,7vw,5.4rem); line-height:1.02; letter-spacing:-.045em; text-wrap:balance; }
.preview-content>p:not(.preview-kicker){ max-width:630px; margin:0 auto 28px; color:rgba(255,255,255,.79); font-size:clamp(1rem,2vw,1.18rem); line-height:1.75; }
.preview-contact{ display:inline-flex; padding:11px 17px; border:1px solid rgba(255,255,255,.28); border-radius:999px; color:#fff; background:rgba(255,255,255,.08); text-decoration:none; backdrop-filter:blur(7px); }
.preview-login{ position:absolute; z-index:2; left:50%; bottom:22px; width:min(360px,calc(100% - 28px)); color:#dbe8f2; transform:translateX(-50%); }
.preview-login summary{ width:max-content; margin:auto; padding:8px 12px; color:rgba(255,255,255,.55); cursor:pointer; font-size:.73rem; list-style:none; }
.preview-login summary::-webkit-details-marker{ display:none; }
.preview-login form{ display:grid; gap:12px; margin-top:8px; padding:20px; border:1px solid rgba(255,255,255,.16); border-radius:18px; background:rgba(5,18,39,.94); box-shadow:0 18px 45px rgba(0,0,0,.3); backdrop-filter:blur(12px); }
.preview-login label{ display:grid; gap:5px; color:#bcd0df; font-size:.78rem; font-weight:700; }
.preview-login input{ width:100%; padding:11px 12px; border:1px solid rgba(255,255,255,.18); border-radius:9px; color:#fff; background:rgba(255,255,255,.08); font:inherit; outline:none; }
.preview-login input:focus{ border-color:#79bce7; box-shadow:0 0 0 3px rgba(121,188,231,.16); }
.preview-login .preview-remember{ display:flex; align-items:center; gap:9px; color:#dbe8f2; font-size:.78rem; cursor:pointer; }
.preview-login .preview-remember input{ width:17px; height:17px; margin:0; accent-color:#79bce7; }
.preview-login button{ padding:11px 14px; border:0; border-radius:9px; color:#0b1e3f; background:#fff; font-family:inherit; font-size:.88rem; font-weight:800; cursor:pointer; }
.preview-error{ margin:0; color:#ffd2d2; font-size:.78rem; }
@media(max-width:600px){.preview-welcome{padding-bottom:100px;background-position:62% center}.preview-logo{width:88px;height:88px}.preview-content h1{font-size:clamp(2.35rem,13vw,3.5rem)}.preview-content>p:not(.preview-kicker){line-height:1.6}.preview-login{bottom:12px}}