/* ════════════════════════════════════════════════════════════
   LOGIN.CSS (3.76.0) — alles wat de inlogpagina nodig heeft, en niet meer.
   Dit bestand is klein en laadt als eerste, zodat de inlogpagina er
   meteen staat. De rest van de opmaak (main.css) laadt erachteraan,
   terwijl je inlogt. De tokens en de basis staan in beide bestanden.
   ════════════════════════════════════════════════════════════ */
/* ════════════════════════════════════════════════════════════
   InFrame — Merkrichtlijnen 2026
   Deep Royal en Vivid Cyan zijn de basis. Electric Yellow is het
   accent. Charcoal en Bone White geven rust.
   ════════════════════════════════════════════════════════════ */
:root{
  /* ── Basiskleuren ───────────────────────────────────── */
  --royal:#103590;          /* Deep Royal  · RGB 16 53 144   */
  --cyan:#00AEEF;           /* Vivid Cyan  · RGB 0 174 239   */
  --yellow:#FFE600;         /* Electric Yellow · RGB 255 230 0 */
  --charcoal:#1A1D23;       /* Charcoal    · RGB 26 29 35    */
  --bone:#F7F5F2;           /* Bone White  · RGB 247 245 242 */
  --mid:#0A63B4;            /* middenkleur van het kleurverloop */

  /* ── Tinten Deep Royal (over wit) ───────────────────── */
  --royal-80:#405CA6;--royal-60:#708CBC;--royal-40:#9FADD3;--royal-20:#CFD6E9;
  --royal-wash:#EDF1F9;     /* lichtste vlak, voor subtiele blokken */
  /* ── Tinten Vivid Cyan ──────────────────────────────── */
  --cyan-80:#33BEF1;--cyan-60:#66CEF5;--cyan-40:#99DFF8;--cyan-20:#CCEFFC;
  /* ── Tinten Electric Yellow ─────────────────────────── */
  --yellow-80:#FFEB33;--yellow-60:#FFF066;--yellow-40:#FFF599;--yellow-20:#FFFACC;
  /* ── Bone White wordt donkerder: vlak, lijn, rand ───── */
  --bone-vlak:#EFECE7;--bone-lijn:#DCD9D2;--bone-rand:#B9B3A7;

  /* ── Kleurverloop · altijd drie stops ───────────────── */
  --gradient:linear-gradient(45deg,#103590 0%,#0A63B4 50%,#00AEEF 100%);        /* Basis      */
  --gradient-h:linear-gradient(90deg,#103590 0%,#0A63B4 50%,#00AEEF 100%);      /* Horizontaal */
  --gradient-v:linear-gradient(0deg,#103590 0%,#0A63B4 60%,#00AEEF 115%);       /* Social      */

  /* ── Rollen in de interface ─────────────────────────── */
  --blue:#103590;           /* hoofdkleur voor interactie   */
  --blue-light:#EDF1F9;
  --black:#1A1D23;
  --dark:#103590;           /* dragende vlakken, zijbalk    */
  --white:#ffffff;
  --off:#F7F5F2;
  --muted:#5F6165;
  --border:#DCD9D2;

  /* ── Status ─────────────────────────────────────────── */
  --success:#13703A;--success-bg:#E8F3EC;
  --warning:#8A5A00;--warning-bg:#FFF6E0;
  --danger:#B0121C;--danger-bg:#FCEEEF;

  /* ── Vorm ───────────────────────────────────────────────
     De kadervorm komt uit het logo: afgerond rechtsboven en
     linksonder, recht op de andere twee hoeken.            */
  --r:12px;--rsm:8px;
  /* De overgang die de website gebruikt voor de hero. */
  --soepel:cubic-bezier(.23,1,.32,1);
  --kader:0 16px 0 16px;
  --kader-sm:0 10px 0 10px;
  --kader-xs:0 7px 0 7px;
}
*{box-sizing:border-box;margin:0;padding:0;}
html,body{height:100%;overflow:hidden;}
body{font-family:'Montserrat',sans-serif;background:var(--off);color:var(--black);font-size:14px;line-height:1.6;}
button,input,select,textarea{font-family:'Montserrat',sans-serif;}
.screen{display:none;width:100%;height:100%;}
.screen.active{display:flex;}
/* Tot main.css binnen is, is alleen de inlogpagina zichtbaar. */
body > :not(#s-login){visibility:hidden;}
i[class^="ico-"],i[class*=" ico-"]{
  display:inline-block;width:1.08em;height:1.08em;
  background-color:currentColor;vertical-align:-.17em;flex-shrink:0;
  -webkit-mask:var(--ico) center/contain no-repeat;
          mask:var(--ico) center/contain no-repeat;
}
i.ico-verder{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E");}

/* ════════════════════════════════════════════════════════════
   LOGIN (3.74.0) — links het merk, rechts alleen het inloggen.
   Het blauwe vlak draagt de kernzin, het Kader als dunne lijn en
   het lint in Deep Royal. Achter het vlak kan een stille showreel
   lopen (data-video op #s-login); het Royal-verloop ligt eroverheen.
   Na het inloggen schuift het vlak terug tot de breedte van de
   zijbalk, zodat de overgang naar het dashboard naadloos voelt.
   ════════════════════════════════════════════════════════════ */
#s-login{position:relative;overflow:hidden;flex-direction:row;background:var(--white);font-family:'Montserrat',sans-serif;}
.lg-merk{
  position:relative;overflow:hidden;flex:0 0 60%;min-width:0;
  display:flex;flex-direction:column;background:var(--royal);color:#fff;
  transition:flex-basis 520ms var(--soepel);
}
/* Het beeld: video of niets. Het verloop ligt er altijd overheen. */
.lg-beeld{position:absolute;inset:0;z-index:0;background:center/cover no-repeat;}
/* Zonder video: het bewegende kleurverloop van de hero op inframeagency.nl.
   De laag is groter dan het vlak en schuift langzaam langs de diagonaal,
   dus Deep Royal blijft linksonder en Vivid Cyan rechtsboven. */
#s-login:not(.met-video) .lg-beeld{inset:-30%;background:var(--gradient);animation:lgFlow 14s ease-in-out infinite alternate;will-change:transform;}
@keyframes lgFlow{from{transform:translate3d(-7%,7%,0);}to{transform:translate3d(7%,-7%,0);}}
.lg-beeld video{width:100%;height:100%;object-fit:cover;display:block;opacity:0;transition:opacity 1200ms var(--soepel);}
.lg-beeld video.speelt{opacity:1;}
.lg-merk::after{
  content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  /* Overloop naar Deep Royal aan de tekstkant, zoals op de website. */
  background:linear-gradient(90deg,rgba(16,53,144,.92) 0%,rgba(16,53,144,.7) 38%,rgba(16,53,144,.2) 70%,rgba(16,53,144,0) 100%);
}
#s-login.met-video .lg-merk::after{
  background:linear-gradient(90deg,rgba(16,53,144,.88) 0%,rgba(16,53,144,.74) 42%,rgba(16,53,144,.5) 72%,rgba(10,99,180,.36) 100%);
}
.lg-merk > *{position:relative;z-index:1;}
.lg-merk > .lg-beeld{position:absolute;inset:0;z-index:0;background:center/cover no-repeat;}
/* Zonder video: het bewegende kleurverloop van de hero op inframeagency.nl.
   De laag is groter dan het vlak en schuift langzaam langs de diagonaal,
   dus Deep Royal blijft linksonder en Vivid Cyan rechtsboven. */
#s-login:not(.met-video) .lg-beeld{inset:-30%;background:var(--gradient);animation:lgFlow 14s ease-in-out infinite alternate;will-change:transform;}
@keyframes lgFlow{from{transform:translate3d(-7%,7%,0);}to{transform:translate3d(7%,-7%,0);}}
.lg-merk-kop{padding:2.4rem 3.4rem 0;flex-shrink:0;transition:opacity 260ms ease;}
.hero-logo{height:30px;object-fit:contain;display:block;}
.lg-merk-tekst{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:center;padding:2rem 3.4rem 4rem;max-width:44rem;transition:opacity 260ms ease;}
.hero-kop{font-size:12px;font-weight:800;color:var(--yellow);letter-spacing:.16em;text-transform:uppercase;margin-bottom:18px;}
.hero-zin{font-size:clamp(40px,5vw,76px);font-weight:900;font-style:italic;line-height:1.02;letter-spacing:-.03em;color:#fff;}
/* De kernzin komt binnen zoals de hero op inframeagency.nl: het kopje,
   dan de woorden een voor een omhoog, dan tekent de gele streep zich
   onder het slotwoord en tot slot de alinea. Zonder JS of bij minder
   beweging staat alles meteen in beeld. */
.hero-zin .hw{display:inline-block;padding-right:.04em;}
.hero-zin .ul{position:relative;display:inline-block;padding-bottom:.08em;}
.hero-zin .ul::after{content:"";position:absolute;left:0;right:0;bottom:0;height:.075em;background:var(--yellow);transform:scaleX(1);transform-origin:left center;}
@media (prefers-reduced-motion:no-preference){
  #s-login.lg-anim .hero-kop,#s-login.lg-anim .hero-alinea{will-change:transform,opacity;opacity:0;transform:translateY(14px);transition:opacity 600ms var(--soepel),transform 600ms var(--soepel);}
  #s-login.lg-anim .hero-kop{transition-delay:150ms;}
  #s-login.lg-anim .hero-alinea{transition-delay:780ms;}
  #s-login.lg-anim .hw{will-change:transform,opacity;opacity:0;transform:translateY(.32em);transition:opacity 600ms var(--soepel),transform 700ms var(--soepel);transition-delay:calc(260ms + var(--i) * 70ms);}
  #s-login.lg-anim .ul::after{transform:scaleX(0);transition:transform 650ms var(--soepel) 700ms;}
  #s-login.lg-anim.is-in .hero-kop,#s-login.lg-anim.is-in .hero-alinea,#s-login.lg-anim.is-in .hw{opacity:1;transform:none;}
  #s-login.lg-anim.is-in .ul::after{transform:scaleX(1);}
}
/* Op de telefoon rustiger, net als op de website. */
@media (prefers-reduced-motion:no-preference) and (max-width:760px){
  #s-login.lg-anim .hw{transition:opacity 850ms var(--soepel),transform 950ms var(--soepel);transition-delay:calc(400ms + var(--i) * 140ms);}
  #s-login.lg-anim .hero-kop{transition:opacity 850ms var(--soepel),transform 850ms var(--soepel) 200ms;}
  #s-login.lg-anim .ul::after{transition:transform 950ms var(--soepel) 1350ms;}
}
.hero-alinea{margin-top:1.6rem;font-size:16px;line-height:1.7;color:rgba(255,255,255,.82);max-width:30rem;}

/* ── Het Kader: vlak en dunne omtrek die zichzelf tekent ── */
.lg-merk .hero-kader{
  /* Zoals de hero op inframeagency.nl: groot in de rechterhoek, met de
     onderkant op het lint en het hele icoon leesbaar, volle sterkte. */
  position:absolute;z-index:1;top:auto;bottom:0;right:-16%;height:calc((100% - 52px) * .8);width:auto;
  pointer-events:none;will-change:transform;
}
@media (min-width:901px) and (max-width:1180px){.lg-merk .hero-kader{right:-36%;height:calc((100% - 52px) * .74);}}
.hero-kader .hk-drift{transform-box:fill-box;transform-origin:center center;animation:kaderDrift 16s ease-in-out infinite alternate;}
@keyframes kaderDrift{from{transform:translate3d(0,0,0) rotate(0deg);}to{transform:translate3d(-1.2%,1%,0) rotate(-.6deg);}}
.hero-kader .hk-fill{opacity:0;transform:scale(1.04);transform-box:fill-box;transform-origin:center center;
  transition:opacity 1400ms var(--soepel) 100ms,transform 1800ms var(--soepel) 100ms;}
.hero-kader .hk-lijn{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 3200ms cubic-bezier(.45,0,.2,1) 450ms;}
#s-login.is-in .hk-fill{opacity:1;transform:scale(1);}
#s-login.is-in .hk-lijn{stroke-dashoffset:0;}
.hero-kader .hk-glans{fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;vector-effect:non-scaling-stroke;
  stroke-dasharray:.06 .94;stroke-dashoffset:1;opacity:0;animation:hkGlans 9s cubic-bezier(.45,0,.2,1) 4.2s infinite;}
@keyframes hkGlans{0%{stroke-dashoffset:1;opacity:0;}6%{opacity:.9;}32%{opacity:.9;}40%{stroke-dashoffset:.55;opacity:0;}100%{stroke-dashoffset:.55;opacity:0;}}

/* ── Het lint: egaal Deep Royal, onder in het merkvlak ── */
.lint{position:relative;z-index:2;flex-shrink:0;background:var(--royal);overflow:hidden;white-space:nowrap;padding:15px 0;}
.lint-spoor{display:inline-flex;width:max-content;will-change:transform;backface-visibility:hidden;animation:lintLoopt 56s linear infinite;}
.lint-i{display:inline-flex;align-items:center;gap:22px;padding-left:22px;font-size:13px;font-weight:700;color:#fff;}
.lint-ster{width:13px;height:13px;fill:var(--yellow);flex-shrink:0;}
@keyframes lintLoopt{from{transform:translateX(0);}to{transform:translateX(-25%);}}
/* Het portaal laat het lint in zijn eigen tempo lopen. */
#s-portal .lint-spoor,.ks-lint .lint-spoor{animation-duration:28s;}
.lg-merk .lint{border-top:1px solid rgba(255,255,255,.08);}

/* ── Het paneel: wit, alleen het formulier ── */
.lg-paneel{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;padding:2rem clamp(1.5rem,4vw,4rem);overflow-y:auto;background:var(--white);transition:opacity 260ms ease;}
.lg-hulp{align-self:flex-end;font-size:13px;color:var(--muted);text-decoration:none;padding:6px 0;}
.lg-hulp b{color:var(--royal);font-weight:700;}
.lg-hulp:hover b{text-decoration:underline;}
.login-box{width:100%;max-width:23rem;margin:auto 0;padding:2rem 0;display:flex;flex-direction:column;}
.lg-klant{display:flex;align-items:center;gap:14px;margin-bottom:20px;font-size:14px;font-weight:600;color:var(--muted);}
.lg-klant img,.lg-klant .lg-klant-ini{width:64px;height:64px;border-radius:var(--kader-sm);object-fit:contain;border:1px solid var(--border);background:#fff;padding:2px;flex-shrink:0;}
.lg-klant .lg-klant-ini{display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:900;color:var(--royal);background:var(--blue-light);border-color:transparent;padding:0;}
.lg-klant[hidden]{display:none;}
.login-title{font-size:clamp(28px,2.6vw,36px);font-weight:900;font-style:italic;line-height:1.05;letter-spacing:-.025em;color:var(--royal);margin-bottom:8px;text-wrap:balance;}
.login-sub{font-size:14.5px;color:var(--muted);margin-bottom:2rem;}
.lg-bekend{display:flex;align-items:center;gap:12px;background:var(--off);border-radius:var(--kader-sm);padding:12px 14px;margin-bottom:1.6rem;}
.lg-bekend[hidden]{display:none;}
.lg-av{width:40px;height:40px;border-radius:50%;background:var(--blue-light);color:var(--royal);font-weight:800;font-size:13px;display:flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden;}
.lg-bekend b{display:block;font-size:14.5px;color:var(--black);}
.lg-bekend small{font-size:12px;color:var(--muted);}
.lg-bekend button{margin-left:auto;background:none;border:0;color:var(--royal);font-weight:700;font-size:12.5px;cursor:pointer;padding:6px 2px;}
.lg-bekend button:hover{text-decoration:underline;}
/* Velden zonder kader: alleen een lijn die Royal wordt. */
#s-login .field{margin-bottom:1.5rem;}
#s-login .field[hidden]{display:none;}
#s-login .field label{display:block;font-size:11px;font-weight:800;color:var(--muted);margin-bottom:4px;letter-spacing:.14em;text-transform:uppercase;transition:color .15s;}
#s-login .field input{width:100%;padding:10px 0;border:0;border-bottom:1.5px solid var(--border);border-radius:0;font-size:16px;font-weight:600;background:transparent;color:var(--black);outline:none;transition:border-color .15s;}
#s-login .field:focus-within label{color:var(--royal);}
#s-login .field input:focus{border-bottom-color:var(--royal);}
#s-login .field.fout label{color:var(--danger);}
#s-login .field.fout input{border-bottom-color:var(--danger);}
.lg-pw{position:relative;}
#s-login .lg-pw input{padding-right:40px;}
.lg-oog{position:absolute;right:0;bottom:4px;width:34px;height:34px;border:0;background:none;cursor:pointer;display:flex;align-items:center;justify-content:center;border-radius:var(--kader-xs);color:var(--muted);}
.lg-oog:hover,.lg-oog[aria-pressed="true"]{color:var(--royal);}
.lg-oog svg{width:19px;height:19px;}
.lg-oog .dicht{display:none;} .lg-oog[aria-pressed="true"] .open{display:none;} .lg-oog[aria-pressed="true"] .dicht{display:block;}
.lg-caps{font-size:12px;font-weight:600;color:var(--warning);margin-top:6px;}
.lg-caps[hidden]{display:none;}
.lg-rij{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin:-.4rem 0 1.6rem;font-size:13px;color:var(--muted);}
.lg-check{display:flex;align-items:center;gap:9px;cursor:pointer;user-select:none;}
.lg-check input{appearance:none;-webkit-appearance:none;width:17px;height:17px;margin:0;border:1.5px solid var(--border);border-radius:0 5px 0 5px;background:#fff;cursor:pointer;display:grid;place-content:center;transition:all .15s;}
.lg-check input::after{content:'';width:4px;height:8px;border:solid var(--yellow);border-width:0 2px 2px 0;transform:rotate(45deg) translate(-1px,-1px);opacity:0;}
.lg-check input:checked{background:var(--royal);border-color:var(--royal);}
.lg-check input:checked::after{opacity:1;}
.lg-check input:focus-visible,.lg-link:focus-visible,.lg-oog:focus-visible,.lg-bekend button:focus-visible{outline:2px solid var(--royal);outline-offset:2px;}
.lg-link{background:none;border:0;padding:4px 0;color:var(--royal);font-weight:700;font-size:13px;cursor:pointer;}
.lg-link:hover{text-decoration:underline;}
.lg-vergeten{background:var(--off);border-radius:var(--kader-sm);padding:14px 16px;margin:-.6rem 0 1.4rem;font-size:13px;line-height:1.55;color:var(--black);display:flex;flex-direction:column;gap:10px;}
.lg-vergeten[hidden]{display:none;}
.lg-vergeten b{color:var(--royal);user-select:all;}
.lg-vergeten a{align-self:flex-start;font-weight:700;color:var(--royal);font-size:13px;}
/* De hoofdknop: Deep Royal met gele tekst. Geel staat alleen op blauw. */
.btn-main{width:100%;padding:16px;background:var(--royal);color:var(--yellow);border:none;border-radius:var(--kader-sm);font-size:15px;font-weight:800;cursor:pointer;letter-spacing:.03em;transition:background .15s,transform .1s;display:flex;align-items:center;justify-content:center;gap:8px;position:relative;overflow:hidden;}
.btn-main:hover{background:#0d2c78;}
.btn-main:active{transform:translateY(1px);}
.btn-main:focus-visible{outline:2px solid var(--royal);outline-offset:3px;}
.btn-main i{background:currentColor;}
/* Tijdens het inloggen een dunne gele lijn die heen en weer loopt. */
.btn-main.bezig{pointer-events:none;}
.btn-main.bezig::after{content:'';position:absolute;left:0;bottom:0;height:3px;width:34%;background:var(--yellow);animation:lgBezig 1s ease-in-out infinite alternate;}
@keyframes lgBezig{from{transform:translateX(-10%);}to{transform:translateX(210%);}}
.l-err{font-size:13px;line-height:1.5;color:var(--danger);background:var(--danger-bg);border-radius:var(--kader-xs);padding:10px 12px;margin-top:14px;display:none;font-weight:600;}
.login-box.schud{animation:lgSchud 380ms cubic-bezier(.36,.07,.19,.97);}
@keyframes lgSchud{10%,90%{transform:translateX(-1px);}20%,80%{transform:translateX(3px);}30%,50%,70%{transform:translateX(-6px);}40%,60%{transform:translateX(6px);}}
.lg-voet{font-size:12px;color:var(--muted);display:flex;gap:16px;}
.lg-voet a{color:var(--muted);text-decoration:none;}
.lg-voet a:hover{color:var(--royal);}

/* ── De overgang naar het dashboard ── */
#s-login.lg-uit .lg-merk{flex-basis:var(--lg-sbw,250px);}
#s-login.lg-uit .lg-merk-tekst,#s-login.lg-uit .lg-merk-kop,#s-login.lg-uit .hero-kader,#s-login.lg-uit .lint,#s-login.lg-uit .lg-paneel{opacity:0;transition:opacity 220ms ease;}
#s-login.lg-uit-klant{opacity:0;transition:opacity 380ms ease;}
@keyframes lgBinnen{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}
#s-admin.lg-binnen .apage.active,#s-admin.lg-binnen .topbar{animation:lgBinnen 520ms var(--soepel) both;}
#s-admin.lg-binnen .sidebar .sb-item{animation:lgBinnen 420ms var(--soepel) both;}
#s-portal.lg-binnen{animation:lgBinnen 520ms var(--soepel) both;}

/* ── Smallere schermen ── */
@media (max-width:1100px){
  .lg-merk{flex-basis:52%;}
  .lg-merk-kop{padding:2rem 2.4rem 0;}
  .lg-merk-tekst{padding:2rem 2.4rem 3rem;}
}
@media (max-width:900px){
  /* Gestapeld: bovenaan een blauwe band met logo en kernzin, eronder het formulier. */
  #s-login{flex-direction:column;overflow-y:auto;}
  .lg-merk{flex:0 0 auto;}
  .lg-merk-kop{padding:1.5rem 1.5rem 0;}
  .hero-logo{height:24px;}
  .lg-merk-tekst{padding:1.5rem 1.5rem 1.9rem;}
  .hero-kop{display:none;}
  .hero-zin{font-size:clamp(32px,8.6vw,46px);}
  .hero-alinea{display:none;}
  .lg-merk .hero-kader{height:min(118px,60%);max-width:none;right:1.25rem;bottom:1.25rem;}
  .lg-merk::after{background:linear-gradient(100deg,rgba(16,53,144,.9) 0%,rgba(16,53,144,.6) 55%,rgba(16,53,144,.1) 100%);}
  .lg-merk .lint{display:none;}
  .lg-paneel{flex:1 0 auto;overflow:visible;padding:1.25rem 1.5rem 1.75rem;justify-content:center;}
  .lg-hulp{order:3;align-self:center;margin-top:1.25rem;}
  .login-box{max-width:28rem;margin:0 auto;padding:.75rem 0 0;}
  .login-sub{margin-bottom:1.5rem;}
  .lg-voet{order:4;justify-content:center;margin-top:.5rem;}
}
@media (max-height:620px) and (min-width:901px){
  .hero-alinea,.hero-kop{display:none;}
  .login-box{padding:.5rem 0;}
}
/* Wie beweging liever niet heeft, krijgt een stilstaand merkvlak. */
@media (prefers-reduced-motion:reduce){
  .hero-kader .hk-drift,.lint-spoor,.lg-beeld{animation:none!important;}
  .hero-kader .hk-glans{display:none;}
  .hero-kader .hk-fill{opacity:1;transform:none;}
  .hero-kader .hk-lijn{stroke-dashoffset:0;}
  .lg-merk,.login-box.schud{transition:none;animation:none;}
  .btn-main.bezig::after{animation:none;width:100%;opacity:.6;}
}


/* 3.78.2 met een eigen logo alleen het logo, zonder vak */
.lg-klant.met-logo img{width:100%;height:auto;max-width:100%;max-height:110px;object-fit:contain;object-position:left center;border:0;padding:0;border-radius:0;background:none;}
/* 3.84.0 het onthouden logo wat kleiner: hooguit 200 bij 56 pixels */
.lg-klant.met-logo img{width:auto;max-width:min(200px,60%);max-height:56px;}
@media (max-width:600px){.lg-klant.met-logo img{max-width:min(170px,60%);max-height:48px;}}