@font-face{font-family:"Rubik";font-weight:400;font-display:swap;src:url(/fonts/rubik-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Rubik";font-weight:500;font-display:swap;src:url(/fonts/rubik-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Rubik";font-weight:600;font-display:swap;src:url(/fonts/rubik-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Open Sans";font-weight:400;font-display:swap;src:url(/fonts/open-sans-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Open Sans";font-weight:600;font-display:swap;src:url(/fonts/open-sans-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Open Sans";font-weight:700;font-display:swap;src:url(/fonts/open-sans-latin-700-normal.woff2) format("woff2")}
/* Kleuren en letters van nieuw-initiatief.nl */
:root{--blauw:#1A647D;--groen:#359079;--geel:#F8BD4F;--tekst:#3A3A3A;--zacht:#606060;--lijn:#E4E1D8;--vlak:#FDFBF7;--paneel:#F0EFEA;--wit:#fff;--fout:#a3352b}
*{box-sizing:border-box}
body{margin:0;font-family:"Open Sans",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;color:var(--tekst);background:var(--vlak);font-size:15px;line-height:1.5}
a{color:var(--blauw)}
h1,h2,h3{font-family:"Rubik","Open Sans",sans-serif;font-weight:600;color:var(--blauw);line-height:1.3;margin:0 0 .4em}
h2,h3{font-weight:500}
h1+.sub,h2+.sub{color:var(--groen);font-weight:600;margin:-.2em 0 1em}
.balk{background:var(--wit);border-bottom:1px solid var(--lijn)}
.balk .binnen{max-width:1200px;margin:0 auto;padding:12px 16px;display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.merk{display:flex;align-items:center;gap:10px;font-family:"Rubik",sans-serif;font-weight:600;color:var(--blauw);text-decoration:none;font-size:19px}
.merk img{width:34px;height:34px}
.merk span{color:var(--groen)}
nav a{font-family:"Rubik",sans-serif;text-decoration:none;color:var(--blauw);font-weight:500;margin-right:16px;padding:6px 0;border-bottom:3px solid transparent}
nav a.actief{color:var(--blauw);border-color:var(--groen)}
.wie{margin-left:auto;display:flex;align-items:center;gap:12px;color:var(--zacht);font-size:14px}
main{max-width:1200px;margin:0 auto;padding:24px 16px}
.kaart{background:var(--wit);border:1px solid var(--lijn);border-radius:10px;padding:20px;margin-bottom:20px}
.tegels{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:16px;margin-bottom:24px}
.tegel{background:var(--wit);border:1px solid var(--lijn);border-radius:10px;padding:16px}
.tegel b{display:block;font-size:28px;color:var(--blauw)}
.tegel span{color:var(--zacht);font-size:14px}
.modules{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px}
.module{display:block;text-decoration:none;color:inherit;background:var(--wit);border:1px solid var(--lijn);border-left:5px solid var(--blauw);border-radius:10px;padding:20px}
.module.connect{border-left-color:var(--groen)}
.module:hover{box-shadow:0 2px 12px rgba(26,100,125,.14)}
.knop{display:inline-block;font-family:"Rubik",sans-serif;background:var(--blauw);color:var(--wit);border:0;border-radius:4px;padding:10px 18px;font-weight:600;font-size:15px;text-decoration:none;cursor:pointer}
.knop.licht{background:transparent;color:var(--blauw);border:1px solid var(--lijn);padding:6px 12px;font-size:14px}
form.filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
input,select{font:inherit;padding:8px 10px;border:1px solid var(--lijn);border-radius:8px;background:var(--wit)}
input[type=search]{flex:1;min-width:200px}
.tabel{width:100%;border-collapse:collapse;background:var(--wit)}
.tabel th,.tabel td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--lijn);vertical-align:top}
.tabel th{font-size:13px;color:var(--zacht);font-weight:600;background:var(--paneel)}
.tabel th a{color:inherit;text-decoration:none}
.tabel tr.klik:hover{background:var(--vlak);cursor:pointer}
.scroll{overflow-x:auto}
.label{display:inline-block;font-size:12px;padding:1px 8px;border-radius:20px;background:var(--wit);border:1px solid var(--lijn)}
.label.nee{color:var(--fout);border-color:#e7c3bf}
.label.ja{color:var(--groen);border-color:#bfe0d6}
.melding{background:#fdf1ef;border:1px solid #e7c3bf;color:var(--fout);padding:12px 14px;border-radius:8px;margin-bottom:16px}
.paginering{display:flex;gap:6px;flex-wrap:wrap;margin-top:16px}
.paginering a,.paginering span{padding:4px 10px;border:1px solid var(--lijn);border-radius:6px;background:var(--wit);text-decoration:none}
.twee{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media(max-width:800px){.twee{grid-template-columns:1fr}}
dl{display:grid;grid-template-columns:140px 1fr;gap:4px 12px;margin:0}
dt{color:var(--zacht)}dd{margin:0}
.inlog{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:16px}
.inlog .kaart{max-width:420px;width:100%;text-align:center;padding:36px 28px}
.ms{display:inline-flex;align-items:center;gap:10px}
.ms svg{width:18px;height:18px}
.klein{font-size:13px;color:var(--zacht)}
.afgeleid{color:var(--zacht);font-style:italic}
.tegel b{font-family:"Rubik",sans-serif;font-weight:500}
.balk{border-bottom:3px solid var(--geel)}
.merk .logo{height:46px;width:auto;display:block}
.logo-groot{width:100%;max-width:340px;height:auto;display:block;margin:0 auto 8px}
.submenu{display:flex;gap:4px;margin:0 0 20px;border-bottom:1px solid var(--lijn)}
.submenu a{font-family:"Rubik",sans-serif;padding:8px 14px;text-decoration:none;color:var(--zacht);border-bottom:3px solid transparent;margin-bottom:-1px}
.submenu a.actief{color:var(--blauw);border-color:var(--groen)}
.formulier label{display:block;margin-bottom:10px;font-size:14px;color:var(--zacht)}
.formulier input:not([type=file]),.formulier textarea{display:block;width:100%;margin-top:4px;color:var(--tekst)}
.formulier textarea{font:inherit;padding:8px 10px;border:1px solid var(--lijn);border-radius:8px;font-family:Consolas,monospace;font-size:13px}
.rij3{display:grid;grid-template-columns:2fr 1fr 2fr;gap:8px}
.samenvatting{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.acties{display:flex;gap:8px;align-items:center;margin-top:16px}
.kaart.voorbeeld{border-left:5px solid var(--geel)}
.kaart.gelukt{border-left:5px solid var(--groen)}
.label.status-klant{background:var(--blauw);color:#fff;border-color:var(--blauw)}
.label.status-prospect{background:#FDF1D8;border-color:var(--geel);color:#7a5a12}
.label.status-oud-klant{color:var(--blauw);border-color:var(--blauw)}
.label.status-geen{color:var(--zacht)}
.merk .logo{height:85px}
.rij2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.rij4{display:grid;grid-template-columns:1fr 1fr 1.4fr 1.4fr;gap:12px;align-items:end}
@media(max-width:800px){.rij2,.rij4,.rij3{grid-template-columns:1fr}}
.formulier select{display:block;width:100%;margin-top:4px}
.formulier label.vinkje{display:flex;gap:8px;align-items:center;color:var(--tekst)}
.formulier label.vinkje input{width:auto;margin:0}
.melding.goed{background:#EAF5F1;border-color:#bfe0d6;color:var(--groen)}
.tabel.compact td{padding:5px 8px}
.klein-knop{padding:3px 10px;font-size:13px}
.balk-voortgang{height:10px;background:var(--paneel);border-radius:5px;overflow:hidden;margin:8px 0}
.balk-voortgang span{display:block;height:100%;background:var(--groen)}
.mailtekst{white-space:pre-wrap;background:var(--vlak);border:1px solid var(--lijn);border-radius:8px;padding:14px;font-size:14px;max-height:520px;overflow:auto;margin-bottom:16px}
.tabel{font-size:.83em}
a.tegel{text-decoration:none;color:inherit;display:block}a.tegel:hover{box-shadow:0 2px 12px rgba(26,100,125,.14)}
.label.status-contact{color:var(--groen);border-color:#bfe0d6}
.tabel td.nw,.tabel th.nw{white-space:nowrap}
#voortgang{position:fixed;inset:0;background:rgba(253,251,247,.85);display:none;align-items:center;justify-content:center;z-index:50}
#voortgang.zichtbaar{display:flex}
.voortgang-kaart{background:var(--wit);border:1px solid var(--lijn);border-radius:10px;padding:24px 28px;width:min(440px,90vw);box-shadow:0 4px 24px rgba(26,100,125,.15)}
.voortgang-kaart p:first-child{font-family:"Rubik",sans-serif;color:var(--blauw);margin:0 0 12px}
.voortgang-balk{height:8px;background:var(--paneel);border-radius:4px;overflow:hidden;position:relative}
.voortgang-balk span{position:absolute;top:0;bottom:0;width:35%;background:var(--groen);border-radius:4px;animation:voortgang 1.4s ease-in-out infinite}
@keyframes voortgang{0%{left:-35%}100%{left:100%}}
@media (prefers-reduced-motion:reduce){.voortgang-balk span{animation:none;width:100%;opacity:.6}}
#paneel .paneel-achter{position:fixed;inset:0;background:rgba(58,58,58,.25);opacity:0;pointer-events:none;transition:opacity .2s;z-index:40}
#paneel .paneel-inhoud{position:fixed;top:0;right:0;bottom:0;width:min(760px,94vw);background:#fff;box-shadow:-6px 0 28px rgba(26,100,125,.18);transform:translateX(100%);transition:transform .25s ease;z-index:41;display:flex;flex-direction:column;outline:none}
#paneel.open .paneel-achter{opacity:1;pointer-events:auto}
#paneel.open .paneel-inhoud{transform:none}
.paneel-kop{display:flex;gap:8px;align-items:center;padding:12px 20px;border-bottom:1px solid var(--lijn)}
.paneel-ruimte{flex:1}
.paneel-knop{font:inherit;font-size:14px;background:none;border:1px solid var(--lijn);border-radius:6px;padding:4px 12px;color:var(--blauw);cursor:pointer;text-decoration:none;line-height:1.5}
.paneel-knop:hover{background:var(--vlak)}
.paneel-terug::before{content:"\2190";margin-right:6px}
.paneel-melding:empty{display:none}
.paneel-melding{padding:12px 24px 0}
.paneel-tekst{overflow:auto;padding:20px 24px;flex:1}
.paneel-tekst .kaart{border:none;padding:0;margin-bottom:24px}
.paneel-tekst .twee{grid-template-columns:1fr}
body.paneel-actief{overflow:hidden}
@media (prefers-reduced-motion:reduce){#paneel .paneel-inhoud,#paneel .paneel-achter{transition:none}}

/* Aanklikbare rijen: de hele rij opent het paneel */
.tabel tr.klik{cursor:pointer}
.tabel tr.klik:focus{outline:2px solid var(--blauw);outline-offset:-2px}
.tabel tr.klik:focus:not(:focus-visible){outline:none}
.tabel tr.geopend,.tabel tr.geopend:hover{background:#E6F0F3;box-shadow:inset 4px 0 0 var(--blauw)}
.verborgen{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* Pipeline */
main:has(.bord){max-width:none}
.bord-balk{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:8px}
.bord-zoek input{min-width:260px}
.bord-uitleg{max-width:900px;margin:0 0 14px}
.bord{display:grid;grid-template-columns:repeat(5,minmax(220px,1fr));gap:12px;overflow-x:auto;padding-bottom:90px;align-items:start}
.kolom{background:var(--paneel);border-radius:10px;padding:10px;min-height:220px;border:2px dashed transparent;transition:border-color .15s,background .15s}
.kolom.doel{border-color:var(--groen);background:#E9F3EF}
.kolom-kop{padding:2px 4px 8px;border-bottom:3px solid var(--blauw);margin-bottom:8px}
.kolom-kop h2{font-size:16px;margin:0}
.kolom-kaarten{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;min-height:40px}
.kolom-leeg{text-align:center;margin:12px 0}
.pkaart{background:var(--wit);border:1px solid var(--lijn);border-left:4px solid var(--lijn);border-radius:8px;padding:9px 10px;display:flex;flex-direction:column;gap:2px;cursor:grab;font-size:14px}
.pkaart:hover{box-shadow:0 2px 10px rgba(26,100,125,.14)}
.pkaart:focus{outline:2px solid var(--blauw);outline-offset:1px}
.pkaart:focus:not(:focus-visible){outline:none}
.pkaart.geopend{border-color:var(--blauw);box-shadow:0 0 0 2px #CFE2E8}
.pkaart.rot{border-left-color:var(--fout);background:#FDF5F4}
.pkaart.sleept{opacity:.5}
.pkaart.bezig{opacity:.6}
.pkaart-naam{font-weight:600;text-decoration:none;color:var(--blauw)}
.pkaart-org{color:var(--zacht);font-size:13px}
.pkaart-voet{display:flex;gap:8px;align-items:center;font-size:12px;color:var(--zacht);margin-top:4px}
.pkaart-rot{color:var(--fout);font-weight:600}
.teken{display:inline-block;width:11px;height:11px;border-radius:50%;flex:none;vertical-align:middle}
.teken-rood{background:#C8442F}
.teken-groen{background:var(--groen)}
.teken-geel{background:var(--geel)}
.teken-grijs{background:#A9A9A4}
.bord-sluiten{position:fixed;left:0;right:0;bottom:0;display:none;gap:12px;padding:12px 16px;background:rgba(253,251,247,.95);border-top:1px solid var(--lijn);z-index:30}
body.slepen .bord-sluiten{display:flex}
.sluitvlak{flex:1;text-align:center;padding:18px;border:2px dashed var(--lijn);border-radius:10px;font-family:"Rubik",sans-serif;font-weight:500;font-size:16px}
.sluitvlak.gewonnen{color:var(--groen);border-color:#bfe0d6}
.sluitvlak.verloren{color:var(--fout);border-color:#e7c3bf}
.sluitvlak.gewonnen.doel{background:#E9F3EF;border-color:var(--groen)}
.sluitvlak.verloren.doel{background:#FDF1EF;border-color:var(--fout)}
.dialoog{border:1px solid var(--lijn);border-radius:10px;padding:22px 24px;width:min(460px,92vw);box-shadow:0 6px 30px rgba(26,100,125,.2)}
.dialoog::backdrop{background:rgba(58,58,58,.3)}
.dialoog label{display:block;margin-bottom:10px;font-size:14px;color:var(--zacht)}
.dialoog select,.dialoog textarea{display:block;width:100%;margin-top:4px;font:inherit;padding:8px 10px;border:1px solid var(--lijn);border-radius:8px}
.rij-stap{display:flex;gap:10px;align-items:end;flex-wrap:wrap}
.rij-stap label{flex:1;min-width:180px}
.regels-tabel input{width:110px}
@media(max-width:800px){.bord{grid-template-columns:repeat(5,82vw)}.bord-zoek input{min-width:0;width:100%}}
.submenu{overflow-x:auto;scrollbar-width:thin}
.submenu a{white-space:nowrap;flex:none}
main{min-width:0}
.pkaart,.teken{position:relative}