/* ══ LOGIN SCHERM ══════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300;400;500;600&family=Poppins:wght@200;300;400;500;600&display=swap');

#loginScherm{
  position:fixed;inset:0;
  background: #1a1612;
  display:flex;align-items:center;justify-content:center;
  z-index:999;padding:20px;
  overflow:hidden;
}
#loginScherm::before{
  content:'';
  position:absolute;inset:0;
  background:
    radial-gradient(ellipse 80% 60% at 20% 110%, rgba(245,196,196,0.18) 0%, transparent 60%),
    radial-gradient(ellipse 70% 50% at 80% -10%, rgba(180,210,240,0.15) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 50% 50%, rgba(255,255,255,0.03) 0%, transparent 70%);
  pointer-events:none;
}
#loginScherm.verborgen{display:none;}

.login-box{
  position:relative;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-radius:32px;
  padding:48px 40px 40px;
  width:100%;max-width:420px;
  box-shadow: 0 40px 80px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.12);
  animation: loginFadeIn .6s ease both;
}
@keyframes loginFadeIn{
  from{opacity:0;transform:translateY(20px);}
  to{opacity:1;transform:translateY(0);}
}

.login-logo{
  text-align:center;
  font-family:'Cormorant Garamond',serif;
  font-size:11px;
  letter-spacing:.35em;
  text-transform:uppercase;
  color:rgba(255,255,255,0.3);
  margin-bottom:32px;
}
.login-logo::before{
  content:'';display:block;
  width:32px;height:1px;
  background:rgba(255,255,255,0.15);
  margin:0 auto 16px;
}

.login-titel{
  font-family:'Cormorant Garamond',serif;
  font-size:32px;font-weight:400;
  color:rgba(255,255,255,0.92);
  margin-bottom:6px;
  text-align:center;
  letter-spacing:-.02em;
  line-height:1.1;
}
.login-sub{
  font-size:12px;color:rgba(255,255,255,0.35);
  margin-bottom:36px;
  text-align:center;
  letter-spacing:.08em;
  font-weight:300;
}

.gezin-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:28px;}
.persoon-btn{
  display:flex;flex-direction:column;align-items:center;gap:12px;
  padding:24px 16px 20px;
  border-radius:22px;
  border:1px solid rgba(255,255,255,0.08);
  background:rgba(255,255,255,0.04);
  cursor:pointer;
  transition:all .3s cubic-bezier(.2,.8,.2,1);
  font-family:Poppins,sans-serif;
  position:relative;
  overflow:hidden;
}
.persoon-btn::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(255,255,255,0.06) 0%,transparent 60%);
  pointer-events:none;
}
.persoon-btn:hover{
  transform:translateY(-4px);
  border-color:rgba(255,255,255,0.18);
  background:rgba(255,255,255,0.08);
  box-shadow:0 16px 40px rgba(0,0,0,0.4);
}
.persoon-btn.geselecteerd{
  border-color:rgba(255,255,255,0.4) !important;
  background:rgba(255,255,255,0.18) !important;
  box-shadow:0 0 0 2px rgba(255,255,255,0.5), 0 20px 50px rgba(0,0,0,0.5) !important;
  transform:translateY(-2px);
}
.persoon-btn#btn-lore.geselecteerd{
  border-color:rgba(245,180,190,0.9) !important;
  background:rgba(245,180,190,0.18) !important;
  box-shadow:0 0 0 2px rgba(245,180,190,0.8), 0 20px 50px rgba(200,80,100,0.2) !important;
}
.persoon-btn#btn-lancelot.geselecteerd{
  border-color:rgba(160,200,240,0.9) !important;
  background:rgba(160,200,240,0.18) !important;
  box-shadow:0 0 0 2px rgba(160,200,240,0.8), 0 20px 50px rgba(60,120,200,0.2) !important;
}

.persoon-avatar{
  width:80px;height:80px;border-radius:50%;
  object-fit:cover;
  box-shadow:0 8px 24px rgba(0,0,0,0.4);
  transition:transform .3s;
}
.persoon-btn:hover .persoon-avatar{transform:scale(1.05);}
.persoon-naam{
  font-size:14px;font-weight:500;
  color:rgba(255,255,255,0.88);
  letter-spacing:.03em;
}
.persoon-rol{
  font-size:10px;
  color:rgba(255,255,255,0.35);
  letter-spacing:.12em;
  text-transform:uppercase;
  font-weight:300;
}

.pw-rij{position:relative;margin-bottom:14px;}
.pw-rij input{
  width:100%;
  padding:15px 20px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,0.10);
  background:rgba(255,255,255,0.06);
  font-family:Poppins,sans-serif;
  font-size:14px;color:rgba(255,255,255,0.85);
  outline:none;
  transition:all .2s;
  letter-spacing:.05em;
}
.pw-rij input::placeholder{color:rgba(255,255,255,0.25);}
.pw-rij input:focus{
  border-color:rgba(255,255,255,0.3);
  background:rgba(255,255,255,0.10);
  box-shadow:0 0 0 3px rgba(255,255,255,0.05);
}

.login-btn{
  width:100%;padding:15px;
  border-radius:16px;border:none;
  background:rgba(255,255,255,0.92);
  color:#1a1612;
  font-family:Poppins,sans-serif;
  font-size:13px;font-weight:600;
  cursor:pointer;
  transition:all .25s;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.login-btn:hover{background:#fff;transform:translateY(-1px);box-shadow:0 8px 24px rgba(0,0,0,0.3);}
.login-btn:disabled{background:rgba(255,255,255,0.15);color:rgba(255,255,255,0.3);cursor:not-allowed;transform:none;box-shadow:none;}
.login-fout{font-size:12px;color:#f4a0a0;margin-top:10px;text-align:center;display:none;letter-spacing:.03em;}
.login-laden{font-size:12px;color:rgba(255,255,255,0.35);margin-top:10px;text-align:center;display:none;}