:root{--osna-bordeaux:#7a2c2f;--osna-sand:#d3c4a6;--osna-gray:#2f2b2b;--glass-bg:rgba(20,18,20,.65)}
*,*::before,*::after{box-sizing:border-box}
body,html{min-height:100vh;margin:0;padding:0;height: 100%;font-family:'Inter','Segoe UI',sans-serif;color:#f8f9fa;background:var(--osna-gray)}
.bg-image{position:fixed;inset:0;top:0;left:0;bottom:0;width:100%;min-height:100vh;background:url('../img/osnabrueck.jpg') no-repeat center center/cover;filter:brightness(.8) saturate(1.05);z-index:0}
.overlay{position:fixed;inset:0;top:0;left:0;width:100%;min-height:100vh;background:rgba(0,0,0,.35);z-index:1}
.content-area{position:relative;z-index:2;min-height:100vh;display:flex;align-items:flex-start;justify-content:center;}
.bg-glass{background:var(--glass-bg);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.08);border-radius:1.25rem;box-shadow:0 0 30px rgba(0,0,0,.4);color:#f8f9fa}
.card .form-control{background:rgba(255,255,255,.07);color:#fff;border:1px solid rgba(255,255,255,.15)}
.card .form-control:focus{border-color:var(--osna-sand);box-shadow:0 0 0 .25rem rgba(211,196,166,.25)}
.btn-primary{background-color:var(--osna-bordeaux);border:none}
.btn-primary:hover{background-color:#8a3b3e;transform:scale(1.02)}
.text-muted{color:rgba(255,255,255,.7)!important}

@supports (height:100svh){
 body,html{min-height:100svh}
 .bg-image,.overlay,.content-area{min-height:100svh}
}

@media (max-width:576px){
 .content-area{align-items:center}
 .card.shadow-lg{box-shadow:0 0 20px rgba(0,0,0,.35)!important}
 .card-body{padding:1.5rem}
}