/* ===========================================================
   RaBePro — uniform inlogscherm
   Overgenomen van jaarrekening.rabepro.cloud (leidend).
   Hergebruik: kopieer dit bestand + het markup-blok uit
   login.php; pas alleen de teksten in .ln-inhoud aan.
   =========================================================== */
:root{
  --ln-groen:#649A28;
  --ln-groen-licht:#7FBF3A;
  --ln-inkt:#111311;
  --ln-bg:#f1f1ef;
  --ln-rood:#E1192B;
}
*{box-sizing:border-box}
html,body{height:100%}
body.ln-login{
  margin:0;
  font-family:InterL,-apple-system,"Segoe UI",Carlito,Calibri,Arial,sans-serif;
  color:var(--ln-inkt);background:var(--ln-bg);
  display:flex;min-height:100vh;min-height:100dvh;
}

/* ---------- Linkerpaneel ---------- */
.ln-paneel{
  position:relative;overflow:hidden;
  flex:0 0 42.2vw;margin-left:3.75vw;
  border-right:4px solid var(--ln-groen);
  background:
    radial-gradient(70% 45% at 85% 0%, rgba(100,154,40,.28), rgba(0,0,0,0) 70%),
    linear-gradient(#121412 0%, #0b0c0b 100%);
  display:flex;align-items:center;          /* verticaal gecentreerd */
}
.ln-grafiek{position:absolute;left:0;right:0;bottom:0;top:48%;z-index:1;pointer-events:none}
.ln-grafiek svg{width:100%;height:100%;display:block}
.ln-inhoud{position:relative;z-index:2;padding:0 3.3vw;max-width:34rem;color:#fff}

.ln-merk{display:flex;align-items:center;gap:.7rem;margin-bottom:1.9rem}
.ln-merk svg{flex:none}
.ln-merk span{font-size:1.05rem;font-weight:600;color:#fff}
.ln-merk span b{color:var(--ln-groen-licht);font-weight:700}

.ln-kop{font-size:34px;line-height:1.12;font-weight:700;color:#fff;margin:0 0 .85rem;letter-spacing:-.01em}
.ln-streep{width:55px;height:3px;background:var(--ln-groen-licht);border-radius:2px;margin:0 0 1.35rem}
.ln-tekst{font-size:14.5px;line-height:1.6;color:#cfd3cb;margin:0 0 1.5rem;max-width:30rem}

.ln-punten{list-style:none;margin:0 0 2rem;padding:0;display:flex;flex-direction:column;gap:.8rem}
.ln-punten li{display:flex;align-items:flex-start;gap:12px;font-size:13.5px;line-height:1.45;color:#e4e7e1}
.ln-punten svg{flex:none;margin-top:.1rem;color:var(--ln-groen-licht)}

.ln-voet{font-size:11px;letter-spacing:.66px;text-transform:uppercase;color:#7d8279;margin:0}

/* ---------- Rechterkant ---------- */
.ln-rechts{flex:1;display:flex;align-items:center;justify-content:center;padding:2rem 1.5rem}
.ln-kaart{
  width:clamp(300px,49%,420px);background:#fff;border-radius:14px;
  box-shadow:0 18px 50px rgba(17,19,17,.1), 0 2px 6px rgba(17,19,17,.05);
  padding:36px 32px 34px;
}
.ln-kaart h1{font-size:27px;font-weight:700;color:var(--ln-inkt);margin:0 0 .3rem;letter-spacing:-.01em}
.ln-sub{font-size:14.5px;color:#4a4f47;margin:0 0 1.5rem}

.ln-veld{margin-bottom:1rem}
.ln-veld-kop{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;margin-bottom:.3rem}
.ln-kaart label{display:block;font-size:14.5px;font-weight:400;color:#33372f;margin-bottom:.3rem}
.ln-veld-kop label{margin-bottom:0}
.ln-veld-kop a{font-size:13px;color:var(--ln-groen);text-decoration:underline}
.ln-kaart input[type=text],
.ln-kaart input[type=password]{
  width:100%;background:#fff;border:1px solid #d6d9d2;border-radius:6px;
  padding:6px 13px;font:inherit;font-size:14px;color:#000;height:38px;transition:.13s;
}
.ln-kaart input[type=text]:focus,
.ln-kaart input[type=password]:focus{
  outline:none;border-color:var(--ln-groen-licht);box-shadow:0 0 0 3px rgba(127,191,58,.16);
}
.ln-code{letter-spacing:.4em;text-align:center;font-size:17px}

.ln-knop{
  width:100%;height:42px;display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  background:var(--ln-inkt);color:#fff;border:none;border-radius:21px;
  font:inherit;font-size:17px;font-weight:600;cursor:pointer;transition:.13s;margin-top:.4rem;
}
.ln-knop:hover{background:#000}
.ln-knop svg{flex:none}

.ln-onthoud{display:flex;align-items:center;gap:.5rem;font-size:13.5px;color:#4a4f47;margin:.9rem 0 0}
.ln-onthoud input{margin:0}
.ln-fout{background:#fdecea;border-left:3px solid var(--ln-rood);color:#9a1420;
  padding:.6rem .8rem;border-radius:6px;font-size:13.5px;margin:0 0 1.1rem}
.ln-uitleg{font-size:14px;color:#4a4f47;margin:0 0 1.1rem}
.ln-klein{font-size:13px;color:#7d8279;margin:1.2rem 0 0;line-height:1.6}
.ln-klein a{color:var(--ln-groen);text-decoration:underline}

/* ---------- Smal scherm ---------- */
@media (max-width:860px){
  body.ln-login{flex-direction:column}
  .ln-paneel{flex:none;margin-left:0;border-right:none;border-bottom:4px solid var(--ln-groen);padding:1.5rem 0}
  .ln-inhoud{padding:0 1.3rem;max-width:none}
  .ln-kop{font-size:24px}
  .ln-tekst,.ln-punten,.ln-voet{display:none}
  .ln-merk{margin-bottom:1.1rem}
  .ln-streep{margin-bottom:0}
  .ln-grafiek{top:0;opacity:.45}
  .ln-rechts{flex:1;padding:1.6rem 1.2rem 2.5rem}
}