/* Marcato · klantenportaal (bovenop ../style.css) */
.portaal{background:linear-gradient(180deg,#fff 0,var(--mist) 420px,#f7f8fc 100%);min-height:100vh;display:flex;flex-direction:column}
.portaal main{flex:1;width:100%;padding-block:clamp(24px,5vw,48px)}
.portaal .foot{margin-top:24px;background:#fff}
[hidden]{display:none !important}

/* kop */
.nav .wie{display:flex;align-items:center;gap:12px;margin-left:auto}
.wie-naam{font-size:.88rem;color:var(--mute);max-width:26ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.btn.klein{padding:7px 12px;font-size:.86rem}
button.btn{cursor:pointer}
.btn[disabled]{opacity:.55;cursor:progress}
.btn.breed{width:100%;justify-content:center}
.btn.gevaar{color:#9b2c2c;border-color:#e6c3c3}
.link{background:none;border:0;padding:0;color:var(--navy);font:600 .88rem var(--sans);cursor:pointer;text-decoration:underline;text-underline-offset:3px;justify-self:start}
.h3{font-family:var(--sans);font-size:1.05rem;font-weight:700;color:var(--navy);margin:0}
.h3.tussen{margin-top:28px;margin-bottom:6px}
.label{font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}

/* kaarten */
.kaart{background:#fff;border:1px solid var(--line);border-radius:14px;padding:clamp(18px,3vw,26px);display:grid;gap:14px;align-content:start;box-shadow:0 1px 2px rgba(23,34,96,.04)}
.kaart.smal{max-width:460px;margin-inline:auto}
.kaart-kop{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap}
.kop{display:grid;gap:10px;margin-bottom:22px}
.portaal-kop{display:flex;justify-content:space-between;align-items:end;gap:16px;flex-wrap:wrap}
.kop-rechts{display:flex;align-items:end;gap:10px;flex-wrap:wrap}
.kiezer{display:grid;gap:3px}
.kiezer select{min-width:200px}

/* laden */
.laden{display:flex;align-items:center;gap:10px;color:var(--mute);padding:40px 0;justify-content:center}
.spin{width:18px;height:18px;border-radius:50%;border:2px solid var(--line);border-top-color:var(--navy);animation:draai .8s linear infinite}
@keyframes draai{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.spin{animation:none}}

/* welkom */
.welkom{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(24px,5vw,64px);align-items:start}
.welkom-tekst{display:grid;gap:16px;padding-top:12px}
.welkom-tekst .h1{margin:0}
.checks-mini{list-style:none;padding:0;display:grid;gap:8px;margin:4px 0}
.checks-mini li{display:flex;gap:10px;align-items:center}
.checks-mini li::before{content:"";width:18px;height:18px;flex:none;border-radius:50%;background:var(--navy) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2 7 10.6l4.6-5' stroke='%23C08A2E' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat}
.tabs{display:grid;grid-template-columns:1fr 1fr;background:var(--mist);border-radius:10px;padding:4px}
.tabs button{border:0;background:transparent;padding:9px 0;border-radius:8px;font:600 .92rem var(--sans);color:var(--sky2);cursor:pointer}
.tabs button[aria-selected="true"]{background:#fff;color:var(--navy);box-shadow:0 1px 2px rgba(23,34,96,.12)}

/* formulieren */
.formulier{display:grid;gap:14px}
.formulier label{display:grid;gap:5px;font-size:.88rem;font-weight:600;color:var(--ink)}
.formulier label small,.formulier legend small{font-weight:400;color:var(--mute)}
input,select,textarea{font:inherit;font-size:16px;font-weight:400;color:var(--ink);background:#fff;border:1px solid #cfd6e8;border-radius:9px;padding:10px 12px;width:100%;min-width:0}
textarea{resize:vertical}
input:focus,select:focus,textarea:focus{outline:2px solid var(--brass);outline-offset:1px;border-color:var(--navy)}
input:disabled{background:var(--mist);color:var(--mute)}
input[aria-invalid="true"]{border-color:#b83a3a}
.ww{position:relative;display:block}
.ww input{padding-right:64px}
.ww .toon{position:absolute;right:6px;top:50%;transform:translateY(-50%);border:0;background:var(--mist);color:var(--navy);font:600 .78rem var(--sans);padding:5px 9px;border-radius:6px;cursor:pointer}
.hp{position:absolute !important;left:-9999px;width:1px;height:1px;overflow:hidden}
.rij2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.rij3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.rij-adres{display:grid;grid-template-columns:2fr .6fr .8fr 1.3fr 1fr;gap:14px}
.acties{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.melding{font-size:.9rem;border-radius:9px;padding:10px 12px;background:#fdf1f1;color:#8c2626;border:1px solid #f0cccc}
.melding.ok{background:#eef7f0;color:#1f5b33;border-color:#cfe6d6}
.melding.info{background:var(--mist);color:var(--navy);border-color:var(--line)}
fieldset{border:0;padding:0;margin:0;min-width:0}
legend{font-size:.88rem;font-weight:600;padding:0;margin-bottom:10px}
.gegevens{gap:18px}
.vast{display:flex;gap:28px;flex-wrap:wrap;margin:0}
.vast dt{font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}
.vast dd{margin:2px 0 0;font-weight:600;color:var(--navy)}

/* webadres */
.slug{display:flex;align-items:stretch;border:1px solid #cfd6e8;border-radius:9px;overflow:hidden;background:#fff}
.slug:focus-within{outline:2px solid var(--brass);outline-offset:1px;border-color:var(--navy)}
.slug-pre{display:flex;align-items:center;padding:0 4px 0 12px;background:var(--mist);color:var(--mute);font-family:var(--mono);font-size:.9rem;font-weight:400;border-right:1px solid var(--line)}
.slug input{border:0;border-radius:0;font-family:var(--mono)}
.slug input:focus{outline:none}
.slug-status{font-weight:400;color:var(--mute)}
.slug-status.ok{color:#1f6b3a}
.slug-status.nee{color:#a12e2e}

/* pakketkeuze */
.pakket-keuze .price{grid-template-columns:repeat(3,minmax(0,1fr))}
.plan.kies{cursor:pointer;position:relative;transition:border-color .15s,box-shadow .15s}
.plan.kies input{position:absolute;opacity:0;pointer-events:none}
.plan.kies.gekozen,.plan.kies:has(input:checked){border:2px solid var(--navy);box-shadow:0 20px 44px -28px rgba(23,34,96,.55)}
.plan.kies:has(input:focus-visible){outline:2px solid var(--brass);outline-offset:2px}
.plan.kies .vink{position:absolute;top:16px;right:16px;width:22px;height:22px;border-radius:50%;border:2px solid #cfd6e8}
.plan.kies.gekozen .vink,.plan.kies:has(input:checked) .vink{border-color:var(--navy);background:var(--navy) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2 7 10.6l4.6-5' stroke='%23fff' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat}
.plan.uit{background:#fafbfd;cursor:default}
.limieten{font-family:var(--mono);font-size:.74rem;color:var(--mute);display:flex;flex-wrap:wrap;gap:4px 12px}
.plan .pr{font-size:2.4rem}
.plan .badge{justify-self:start}

/* tabs portaal */
.ptabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:22px;overflow-x:auto;scrollbar-width:none}
.ptabs::-webkit-scrollbar{display:none}
.ptabs button{border:0;background:none;padding:10px 12px 12px;font:600 .92rem var(--sans);color:var(--mute);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap}
.ptabs button:hover{color:var(--navy)}
.ptabs button[aria-selected="true"]{color:var(--navy);border-bottom-color:var(--brass)}
.paneel{display:grid;gap:18px}

/* overzicht */
.grid-overzicht{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.breed-2{grid-column:1/-1}
.groot-getal{font-family:var(--serif);font-size:2.1rem;line-height:1.05;color:var(--navy)}
.app-link{font-family:var(--mono);font-size:.9rem;word-break:break-all}
.badge{display:inline-flex;align-items:center;gap:6px;font-size:.76rem;font-weight:700;letter-spacing:.02em;border-radius:99px;padding:3px 10px;background:var(--mist);color:var(--navy);white-space:nowrap}
.badge::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.badge.actief{background:#e8f4ec;color:#1f6b3a}
.badge.pilot{background:#fbf2e2;color:var(--brass-ink)}
.badge.proef{background:#e9effa;color:#2d4f8f}
.badge.opgezegd,.badge.vervallen{background:#f7e9e9;color:#9b2c2c}
.badge.open{background:#fbf2e2;color:var(--brass-ink)}
.badge.behandeld{background:#e8f4ec;color:#1f6b3a}
.badge.geweigerd{background:#f7e9e9;color:#9b2c2c}
.badge.gepland{background:#e9effa;color:#2d4f8f}
.badge.uitgevoerd{background:#e8f4ec;color:#1f6b3a}
.badge.geannuleerd{background:var(--mist);color:#5b6384}
.linkknop{background:none;border:0;padding:4px 0 0;color:var(--navy);text-decoration:underline;cursor:pointer;font:inherit}
.badge.betaald{background:#e8f4ec;color:#1f6b3a}
.regel{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center}
.geen-beheer{border-left:4px solid var(--brass)}

/* meters */
.meters{display:grid;gap:16px}
.meters.groot{gap:22px}
.meter{display:grid;gap:6px}
.meter-kop{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-size:.92rem}
.meter-kop b{font-weight:600}
.meter-kop span{font-family:var(--mono);font-size:.84rem;color:var(--mute);white-space:nowrap}
.balk{height:10px;border-radius:99px;background:var(--mist);overflow:hidden}
.balk i{display:block;height:100%;border-radius:99px;background:var(--navy);min-width:4px;transition:width .5s ease}
.meter.bijna .balk i{background:var(--brass)}
.meter.over .balk i{background:#b83a3a}
.meter.onbeperkt .balk i{background:repeating-linear-gradient(-45deg,var(--sky) 0 6px,#a9c0e0 6px 12px)}
.meter .hint{font-size:.8rem;color:var(--mute)}
.meter.bijna .hint{color:var(--brass-ink)}
.meter.over .hint{color:#9b2c2c}
@media (prefers-reduced-motion:reduce){.balk i{transition:none}}

/* tegels */
.tegels{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.tegel{background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px 16px;display:grid;gap:2px}
.tegel b{font-family:var(--serif);font-weight:400;font-size:2rem;line-height:1.1;color:var(--navy)}
.tegel span{font-size:.82rem;color:var(--mute)}

/* pakket */
.huidig-pakket{grid-template-columns:1fr auto;align-items:center}
.huidig-pakket .pr{font-family:var(--serif);font-size:2.4rem;line-height:1;color:var(--navy)}
.huidig-pakket .pr small{font-family:var(--sans);font-size:.9rem;color:var(--mute)}
.rij-kaarten{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.tabel{width:100%;border-collapse:collapse;font-size:.9rem}
.tabel th{text-align:left;font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--mute);font-weight:500;padding:0 8px 8px 0;border-bottom:1px solid var(--line)}
.tabel td{padding:10px 8px 10px 0;border-bottom:1px solid var(--line);vertical-align:top}
.tabel td.num{font-family:var(--mono);text-align:right;white-space:nowrap}
.tabel th.num{text-align:right}
.tabel-wrap{overflow-x:auto}
.leeg{color:var(--mute);font-size:.9rem}
.opzeggen summary{cursor:pointer;font-weight:600;color:var(--navy);list-style:none;display:flex;justify-content:space-between}
.opzeggen summary::-webkit-details-marker{display:none}
.opzeggen summary::after{content:"+";font-family:var(--mono);color:var(--brass-ink)}
.opzeggen[open] summary::after{content:"–"}
.lijst{list-style:none;padding:0;margin:0;display:grid}
.lijst li{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;align-items:center;padding:10px 0;border-bottom:1px solid var(--line)}
.lijst li:last-child{border-bottom:0}
.orkesten li{align-items:flex-start}
.orkesten .ok-info{display:grid;gap:2px;min-width:0}
.orkesten .ok-info b{color:var(--navy);font-size:1rem}
.orkesten .ok-info span{font-size:.84rem;color:var(--mute)}
.orkesten .ok-knoppen{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.orkesten .ok-pijl{min-width:36px;justify-content:center;padding-inline:8px}
.orkesten .ok-edit{display:grid;grid-template-columns:2fr 1fr auto;gap:8px;width:100%;align-items:end}
.orkesten .ok-edit label{display:grid;gap:4px;font-size:.8rem;font-weight:600;color:var(--ink)}
.orkesten .ok-weg{width:100%;display:grid;gap:10px;background:#fdf6f6;border:1px solid #f0d6d6;border-radius:10px;padding:12px 14px}
.orkesten .ok-weg p{margin:0;font-size:.9rem;color:#6f2020}
@media (max-width:560px){.orkesten .ok-edit{grid-template-columns:1fr}}

/* toast */
.toast{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);background:var(--navy);color:#fff;padding:10px 16px;border-radius:10px;font-size:.9rem;box-shadow:0 10px 30px -10px rgba(15,19,48,.5);z-index:30;max-width:calc(100% - 32px)}

@media (max-width:860px){
  .welkom,.grid-overzicht,.rij-kaarten{grid-template-columns:1fr}
  .pakket-keuze .price,.price{grid-template-columns:1fr}
  .tegels{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rij-adres{grid-template-columns:1fr 1fr}
  .rij-adres .straat{grid-column:1/-1}
}
@media (max-width:560px){
  .rij2,.rij3{grid-template-columns:1fr}
  .nav #naar-site{display:none}
  .wie-naam{display:none}
  .huidig-pakket{grid-template-columns:1fr}
  .kiezer select{min-width:0}
  .kop-rechts{width:100%}
  .kop-rechts .kiezer{flex:1}
}

/* App inrichten */
/* "App inrichten" gebruikt de gedeelde opmaak uit ../orkest/orkest-instellingen.css */