/* Klantportal. Alleen tokens uit tokens.css, maten deelbaar door 4. */
* { box-sizing: border-box; }
html, body { margin: 0; }
body { font-family: var(--mf-font); min-height: 100vh; display: flex; flex-direction: column; -webkit-font-smoothing: antialiased; }
h1, h2, h3, p, fieldset { margin: 0; }
button, input, select, textarea { font: inherit; }
a { color: var(--mf-text-primary); }

.kopbalk { background: var(--mf-white); border-bottom: 1px solid var(--mf-border); }
.kopbalk-binnen, .voet-binnen { max-width: var(--mf-content); margin: 0 auto; padding: 16px 32px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.merk { display: flex; align-items: baseline; gap: 12px; text-decoration: none; }
.merk-naam { font: var(--mf-h4); color: var(--mf-text-primary); }
.merk-sub { font: var(--mf-body-sm); color: var(--mf-text-secondary); }
.mf-btn { text-decoration: none; justify-content: center; }
.mf-btn[disabled] { opacity: .6; cursor: default; }
.hoofd { flex: 1; padding: 48px 16px 64px; }
.smal { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 24px; }
.smal > h1 { font: var(--mf-h2); }
.intro { color: var(--mf-text-secondary); margin-top: -16px; }
.voet { border-top: 1px solid var(--mf-border); background: var(--mf-white); font: var(--mf-body-sm); color: var(--mf-text-secondary); }
.voet-binnen { padding: 24px 32px; }

.keuzes { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
.keuze { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; text-align: left; padding: 24px; border-radius: var(--mf-radius-lg); border: 1px solid var(--mf-border); background: var(--mf-white); cursor: pointer; font: var(--mf-body-sm); color: var(--mf-text-secondary); transition: transform .15s, box-shadow .15s; }
.keuze:hover { box-shadow: var(--mf-shadow-hover); transform: translateY(-1px); }
.keuze--actief, .keuze--actief:hover { border-color: var(--mf-cta); box-shadow: inset 0 0 0 1px var(--mf-cta); transform: none; }
.keuze-titel { font: var(--mf-h4); color: var(--mf-text-primary); }

.kaart { background: var(--mf-white); border: 1px solid var(--mf-border); border-radius: var(--mf-radius-lg); padding: 32px; display: flex; flex-direction: column; gap: 16px; }
.kaart h1 { font: var(--mf-h2); }
.kaart h2 { font: var(--mf-h3); }
.kaart h2.klein { font: var(--mf-h4); margin-top: 8px; }
.kaart h3 { font: var(--mf-ui); color: var(--mf-text-primary); }
.sectie { margin-top: 8px; }
.raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.veld { display: flex; flex-direction: column; gap: 4px; }
.veld label, legend { font: var(--mf-ui); color: var(--mf-text-primary); }
.optioneel { font-weight: 400; color: var(--mf-text-secondary); }
.veld input, .veld textarea { height: 46px; padding: 0 16px; border: 1px solid var(--mf-border); border-radius: var(--mf-radius-sm); background: var(--mf-white); color: var(--mf-text-primary); font: var(--mf-body); width: 100%; }
.veld textarea { height: auto; padding: 12px 16px; resize: vertical; }
.veld input:focus, .veld textarea:focus, .mf-btn:focus-visible, .keuze:focus-visible { outline: 2px solid var(--mf-text-primary); outline-offset: 2px; }
.hulp { font: var(--mf-body-sm); color: var(--mf-text-secondary); }
.fout-tekst { font: var(--mf-body-sm); color: var(--mf-warning); }
.keuzerij { border: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.keuzerij legend { padding: 0 0 8px; }
.radio { height: 46px; padding: 0 16px; display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--mf-border); border-radius: var(--mf-radius-sm); font: var(--mf-body-sm); color: var(--mf-text-primary); cursor: pointer; }
.radio:has(input:checked) { border-color: var(--mf-text-primary); background: var(--mf-accent); }
.radio input { accent-color: var(--mf-cta); margin: 0; }
.upload { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 120px; padding: 24px; border: 1px dashed var(--mf-text-secondary); border-radius: var(--mf-radius-sm); background: var(--mf-bg); text-align: center; cursor: pointer; font: var(--mf-body-sm) !important; color: var(--mf-text-secondary) !important; }
.upload-titel { font: var(--mf-ui); color: var(--mf-text-primary); }
.verborgen-input { position: absolute; left: -10000px; }
.fotos { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 12px; }
.fotos:empty { display: none; }
.foto { position: relative; height: 112px; border-radius: var(--mf-radius-sm); overflow: hidden; border: 1px solid var(--mf-border); }
.foto img { width: 100%; height: 100%; object-fit: cover; }
.foto-weg { position: absolute; left: 4px; bottom: 4px; height: 28px; padding: 0 8px; border: 0; border-radius: var(--mf-radius-sm); background: var(--mf-white); font: var(--mf-label); color: var(--mf-text-primary); cursor: pointer; }
.honing { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.rij { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

.bedankt { align-items: flex-start; }
.mf-label--positive { gap: 8px; }
.mf-label--positive::before { content: ''; width: 8px; height: 8px; border-radius: var(--mf-radius-full); background: var(--mf-positive); }
.status { gap: 8px; }
.status::before { content: ''; width: 8px; height: 8px; border-radius: var(--mf-radius-full); background: var(--mf-wait); }
.status--goedgekeurd::before, .status--afgerond::before { background: var(--mf-positive); }
.status--afgewezen::before { background: var(--mf-warning); }
.status--nieuw::before { background: var(--mf-text-primary); }
.blok { padding: 16px; border-radius: var(--mf-radius-sm); background: var(--mf-bg); display: flex; flex-direction: column; gap: 4px; }
.witruimte { white-space: pre-wrap; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.stappen { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; font: var(--mf-body-sm); }
.stappen li { display: flex; gap: 12px; align-items: baseline; }
.stap-dot { width: 8px; height: 8px; flex-shrink: 0; border-radius: var(--mf-radius-full); background: var(--mf-text-primary); }
.resultaat { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--mf-border); }
.resultaat:last-child { border-bottom: 0; }

@media (max-width: 767px) {
  .hoofd { padding: 24px 16px 48px; }
  .kaart { padding: 20px; }
  .kopbalk-binnen, .voet-binnen { padding: 12px 16px; }
  .smal > h1 { font: var(--mf-h3); }
}
.turnstile:empty { display: none; }
[hidden] { display: none !important; }

/* Partnerportal */
.breed { max-width: var(--mf-content); margin: 0 auto; display: flex; flex-direction: column; gap: 24px; }
.breed h1 { font: var(--mf-h2); }
.smal--formulier { max-width: 480px; }
.intro-los { color: var(--mf-text-secondary); margin-top: 8px; }
.rij--tussen { justify-content: space-between; align-items: flex-end; }
.keuze--klein { padding: 16px 20px; text-decoration: none; }
.kaal { border-color: transparent; background: transparent; }
.filter { text-decoration: none; }
.filter--actief { background: var(--mf-text-primary); border-color: var(--mf-text-primary); color: var(--mf-white); }
.zoekveld input { height: 46px; padding: 0 16px; border: 1px solid var(--mf-border); border-radius: var(--mf-radius-sm); min-width: 280px; font: var(--mf-body-sm); }
.tabel { display: flex; flex-direction: column; }
.tabelregel { display: grid; grid-template-columns: 120px minmax(0, 1.2fr) minmax(0, 2fr) 120px 136px 120px; gap: 16px; align-items: center; min-height: 56px; padding: 0 12px; border-bottom: 1px solid var(--mf-border); text-decoration: none; color: var(--mf-text-secondary); font: var(--mf-body-sm); }
.tabelregel:hover { background: var(--mf-bg); }
.tabelregel > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sterk { font-weight: 600; color: var(--mf-text-primary); }
.gegevens { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
.gegeven { display: flex; flex-direction: column; font: var(--mf-body-sm); }
.gegeven-label { font: var(--mf-ui); color: var(--mf-text-primary); }
@media (max-width: 960px) { .tabelregel { grid-template-columns: 112px minmax(0, 1fr) 120px; } .tabelregel > span:nth-child(3), .tabelregel > span:nth-child(4), .tabelregel > span:nth-child(6) { display: none; } .zoekveld input { min-width: 0; width: 100%; } }
.kopbalk-nav { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.kopbalk-nav .rij { gap: 8px; }

/* Partnerportal: accentkleur van de partner en wit */
.thema-partner { background: #FFFFFF; }
.thema-partner .kopbalk, .thema-partner .voet { background: #FFFFFF; }
.thema-partner .kopbalk { border-bottom: 3px solid var(--mf-cta); }
.thema-partner .mf-btn--primary { color: var(--p-op-cta); }
.thema-partner .kaart { box-shadow: 0 1px 2px rgba(0, 0, 0, .04); }
.thema-partner .filter--actief { background: var(--mf-cta); border-color: var(--mf-cta); color: var(--p-op-cta); }
.merk-logo { height: 28px; max-width: 160px; width: auto; object-fit: contain; align-self: center; }
.merk { align-items: center; }

/* Startpagina 2.0 (ontwerp akkoord Toon 03-11). Kleur per soort verzoek, bewuste uitbreiding op de huisstijl. */
:root { --soort-service: #4C7A5B; --soort-service-tint: #E8EFEA; --soort-retour: #96392F; --soort-retour-tint: #F5E6E3; --soort-stofstalen: #3E6286; --soort-stofstalen-tint: #E6ECF2; }
.ic { flex: none; fill: none; stroke: currentColor; stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; }
.start { max-width: calc(var(--mf-content) - 64px); margin: 0 auto; display: flex; flex-direction: column; gap: 56px; }
.start h2 { font: var(--mf-h3); }
.start h3 { font: var(--mf-h4); color: var(--mf-text-primary); }
.start-kop { max-width: 720px; display: flex; flex-direction: column; gap: 16px; }
.start-kop h1 { font: var(--mf-h1); }
.verzoekkaarten { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--mf-gutter); }
.verzoekkaart { --k: var(--soort-service); --t: var(--soort-service-tint); display: grid; grid-template-rows: subgrid; grid-row: span 4; row-gap: 16px; padding: 24px; background: var(--mf-white); border: 1px solid var(--mf-border); border-radius: var(--mf-radius-lg); text-decoration: none; color: var(--mf-text-secondary); font: var(--mf-body-sm); transition: box-shadow .2s, transform .2s; }
.verzoekkaart--retour { --k: var(--soort-retour); --t: var(--soort-retour-tint); }
.verzoekkaart--stofstalen { --k: var(--soort-stofstalen); --t: var(--soort-stofstalen-tint); }
.verzoekkaart:hover { box-shadow: var(--mf-shadow-hover); transform: translateY(-1px); }
.verzoekkaart:focus-visible { outline: 2px solid var(--mf-text-primary); outline-offset: 2px; }
.verzoekkaart-kop { display: flex; align-items: center; gap: 16px; }
.verzoekkaart-kop h2 { font: var(--mf-h4); }
.verzoekkaart-icoon { width: 48px; height: 48px; border-radius: var(--mf-radius-sm); background: var(--t); color: var(--k); display: flex; align-items: center; justify-content: center; flex: none; }
.verzoekkaart-nodig { border-top: 1px solid var(--mf-border); padding-top: 16px; display: flex; flex-direction: column; }
.verzoekkaart-knop { height: 46px; padding: 0 16px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid var(--mf-border); border-radius: var(--mf-radius-sm); background: var(--mf-white); color: var(--mf-text-primary); font: var(--mf-ui); transition: background .2s, color .2s, border-color .2s; }
.verzoekkaart:hover .verzoekkaart-knop, .verzoekkaart:focus-visible .verzoekkaart-knop { background: var(--k); border-color: var(--k); color: var(--mf-white); }
.werkwijze { gap: 24px; }
.werkwijze ol { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--mf-gutter); }
.werkwijze li { display: flex; gap: 16px; align-items: flex-start; font: var(--mf-body-sm); }
.werkwijze li > div { display: flex; flex-direction: column; gap: 4px; }
.werkwijze li .sterk { font: var(--mf-h4); font-size: 16px; }
.stapnr { flex: none; width: 32px; height: 32px; border-radius: var(--mf-radius-full); background: var(--mf-text-primary); color: var(--mf-white); font: var(--mf-ui); display: inline-flex; align-items: center; justify-content: center; }
.start-onder { display: flex; flex-wrap: wrap; gap: var(--mf-gutter); align-items: flex-start; }
.start-faq { flex: 999 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.start-hulp { flex: 1 1 360px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.start-hulp-blokken { display: flex; flex-direction: column; gap: var(--mf-gutter); }
.faq { background: var(--mf-white); border: 1px solid var(--mf-border); border-radius: var(--mf-radius-lg); overflow: hidden; }
.faq-item { border-bottom: 1px solid var(--mf-border); }
.faq-item:last-child { border-bottom: 0; }
.faq-item summary { min-height: 64px; padding: 16px 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; cursor: pointer; list-style: none; font: var(--mf-ui); font-size: 16px; color: var(--mf-text-primary); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { background: var(--mf-accent); }
.faq-item summary:focus-visible { outline: 2px solid var(--mf-text-primary); outline-offset: -2px; }
.faq-item summary .ic { color: var(--mf-text-secondary); transition: transform .2s; }
.faq-item[open] summary .ic { transform: rotate(180deg); }
.faq-item p { padding: 0 24px 20px; font: var(--mf-body-sm); }
.start-hulp .kaart { padding: 24px; }
.statuskaart-velden { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 12px; }
.contact-knoppen { display: flex; flex-direction: column; gap: 8px; }
.contact-knoppen .mf-btn { justify-content: flex-start; }
.contact-knoppen .ic, .contact-regel .ic { color: var(--mf-text-secondary); }
.contact-regel { display: flex; align-items: center; gap: 12px; font: var(--mf-body-sm); padding-left: 16px; }
.contact-voet { padding-top: 12px; border-top: 1px solid var(--mf-border); font: var(--mf-body-sm); }
.opentijd { display: inline-flex; align-items: center; gap: 8px; font: var(--mf-label); color: var(--mf-text-secondary); }
.opentijd::before { content: ''; width: 8px; height: 8px; border-radius: var(--mf-radius-full); background: var(--mf-text-muted); }
.opentijd--open { color: var(--mf-positive); }
.opentijd--open::before { background: var(--mf-positive); }
.tipkaart { background: var(--mf-accent); border-radius: var(--mf-radius-lg); padding: 24px; display: flex; gap: 16px; align-items: flex-start; color: var(--mf-text-secondary); }
.tipkaart > div { display: flex; flex-direction: column; gap: 8px; font: var(--mf-body-sm); }
.tipkaart .sterk { font: var(--mf-ui); font-size: 16px; }
.pijllink { display: inline-flex; align-items: center; gap: 8px; font: var(--mf-ui); color: var(--mf-text-primary); }
.pijllink:hover { text-decoration: none; }

/* Formulier 2.0: genummerde stappen en dunne voortgangsbalk */
.formulierscherm { --k: var(--soort-service); gap: 24px; }
.formulierscherm--retour { --k: var(--soort-retour); }
.formulierscherm--stofstalen { --k: var(--soort-stofstalen); }
.formulier-kop { position: sticky; top: 0; z-index: 5; margin: -48px -16px 0; padding: 12px 16px; background: var(--mf-bg); display: flex; align-items: center; gap: 16px; }
.terug { height: 44px; padding: 0 12px 0 4px; display: inline-flex; align-items: center; gap: 4px; border-radius: var(--mf-radius-sm); font: var(--mf-ui); color: var(--mf-text-primary); text-decoration: none; }
.terug:hover { background: var(--mf-accent); }
.voortgang { flex: 1; display: flex; align-items: center; gap: 12px; }
.voortgang-baan { flex: 1; height: 4px; border-radius: 4px; background: var(--mf-border); overflow: hidden; }
.voortgang-vul { width: 0; height: 4px; border-radius: 4px; background: var(--k); transition: width .3s; }
.voortgang-tekst { font: var(--mf-label); color: var(--mf-text-secondary); white-space: nowrap; }
.formulierscherm > h1 { font: var(--mf-h2); }
.nodigblok { background: var(--mf-accent); border-radius: var(--mf-radius-lg); padding: 16px 20px; display: flex; flex-direction: column; gap: 8px; font: var(--mf-body-sm); }
.nodigblok .sterk { font: var(--mf-ui); }
.nodigblok ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; }
.nodigblok li { display: flex; align-items: center; gap: 8px; }
.nodigblok .ic { color: var(--mf-positive); stroke-width: 2; }
.formulier { display: flex; flex-direction: column; gap: 24px; }
.stap { margin: 0; border: 1px solid var(--mf-border); border-radius: var(--mf-radius-lg); background: var(--mf-white); padding: 24px; display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.stap > legend { float: left; width: 100%; padding: 0; display: flex; align-items: center; gap: 12px; font: var(--mf-h4); color: var(--mf-text-primary); }
.stap > legend .stapnr { width: 28px; height: 28px; font: var(--mf-label); }
.stap > legend + * { clear: both; }
.verzendbalk { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.formulier-hulp { text-align: center; }
@media (max-width: 767px) {
  .start { gap: 40px; }
  .start-kop h1 { font: var(--mf-h2); }
  .start h2 { font: var(--mf-h4); font-size: 20px; line-height: 28px; }
  .verzoekkaart { grid-template-rows: none; grid-row: auto; display: flex; flex-direction: column; padding: 20px; }
  .verzoekkaart-nodig { display: none; }
  .verzoekkaart-icoon { width: 44px; height: 44px; }
  .werkwijze ol { grid-template-columns: 1fr; gap: 16px; }
  .statuskaart-velden { grid-template-columns: 1fr; }
  .faq-item summary { padding: 16px 20px; min-height: 56px; }
  .faq-item p { padding: 0 20px 16px; }
  .formulier-kop { margin: -24px -16px 0; }
  .stap { padding: 20px; }
  .verzendbalk { position: sticky; bottom: 0; z-index: 4; margin: 0 -16px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); background: var(--mf-white); border-top: 1px solid var(--mf-border); flex-direction: column; align-items: stretch; text-align: center; }
  .verzendbalk .mf-btn { width: 100%; }
}
.kort { display: none; }
@media (max-width: 767px) {
  .kopbalk-binnen { flex-wrap: nowrap; }
  .merk-sub { display: none; }
  .lang { display: none; }
  .kort { display: inline; }
  .kopbalk-nav .mf-btn { height: 44px; padding: 0 12px; }
}
.formulier-kop { border-bottom: 1px solid var(--mf-border); }

/* Kopbalk: volle breedte, altijd zichtbaar; wordt bij scrollen iets lager met een zachte waas. */
.kopbalk { position: sticky; top: 0; z-index: 20; transition: background-color .25s ease, border-color .25s ease; }
.kopbalk-binnen { max-width: none; padding-inline: max(32px, env(safe-area-inset-left, 0px)); transition: padding .25s ease; }
.merk-logo { transition: height .25s ease; }
.kopbalk--klein { background: rgba(255, 255, 255, .88); -webkit-backdrop-filter: saturate(180%) blur(12px); backdrop-filter: saturate(180%) blur(12px); }
.kopbalk--klein .kopbalk-binnen { padding-block: 8px; }
.kopbalk--klein .merk-logo { height: 24px; }
.formulier-kop { top: var(--kop-h, 0px); transition: top .25s ease; }
@media (max-width: 767px) {
  .kopbalk-binnen { padding-inline: 16px; }
  .kopbalk--klein .kopbalk-binnen { padding-block: 4px; }
  .kopbalk--klein .merk-logo { height: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .kopbalk, .kopbalk-binnen, .merk-logo, .formulier-kop { transition: none; }
}

/* Ontbrekende of onjuiste invoer */
.veld input.ongeldig, .veld textarea.ongeldig { border-color: var(--mf-warning); box-shadow: 0 0 0 1px var(--mf-warning); }
.keuzerij.ongeldig > legend { color: var(--mf-warning); }
.keuzerij.ongeldig .radio { border-color: var(--mf-warning); }
.fout-tekst:not([hidden]) { padding: 12px 16px; border-radius: var(--mf-radius-sm); background: #F6E9E7; }

/* Bedankt: subtiele sluitknop rechtsboven */
.bedankt { position: relative; }
.sluit { position: absolute; top: 16px; right: 16px; height: 36px; padding: 0 12px; display: inline-flex; align-items: center; gap: 4px; border-radius: var(--mf-radius-sm); font: var(--mf-ui); color: var(--mf-text-secondary); text-decoration: none; }
.sluit:hover { background: var(--mf-accent); color: var(--mf-text-primary); }
.sluit:focus-visible { outline: 2px solid var(--mf-text-primary); outline-offset: 2px; }

/* Partnerportal: tabel met datums en track en trace (ook verzoeken uit portal 1.0), 03-11 */
.tabelregel { grid-template-columns: 112px minmax(0, 1.3fr) minmax(0, 1.6fr) 128px 96px 120px minmax(0, 1fr); gap: 12px; min-height: 60px; }
.tabelregel--kop { min-height: 40px; font: 600 12px/16px var(--mf-font); color: var(--mf-text-secondary); }
.tabelregel--kop:hover { background: none; }
.tr-klant { display: flex; flex-direction: column; }
.tr-klant > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tr-datum { font-variant-numeric: tabular-nums; }
.tr-tt { font-size: 12px; }
.meer-knop { display: block; margin: 16px auto 0; }
.meer-knop[hidden] { display: none; }
@media (max-width: 960px) {
  .tabelregel { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: 'klant status' 'ref datum' 'tt tt'; row-gap: 4px; padding: 12px; }
  .tabelregel--kop { display: none; }
  .tabelregel > span { display: block !important; }
  .tabelregel > span:nth-child(1) { grid-area: ref; }
  .tabelregel > span:nth-child(2) { grid-area: klant; display: flex !important; flex-direction: column; min-width: 0; }
  .tabelregel > span:nth-child(3), .tabelregel > span:nth-child(6) { display: none !important; }
  .tabelregel > span:nth-child(4) { grid-area: status; justify-self: end; }
  .tabelregel > span:nth-child(5) { grid-area: datum; justify-self: end; }
  .tabelregel > span:nth-child(7) { grid-area: tt; }
  .tabelregel > span:nth-child(7):empty { display: none !important; }
}

/* ===== Partnerportal 2.1 (03-11): tabs per soort, duidelijke filters, kopieerbare track en trace, klikbare regels ===== */
.p-overzicht { display: flex; flex-direction: column; gap: 20px; }
.p-kop { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.p-kop h1 { margin: 0; }
.p-tabs { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.p-tab { display: flex; align-items: center; gap: 12px; min-height: 72px; padding: 12px 16px; box-sizing: border-box; border: 1px solid var(--mf-border); border-radius: var(--mf-radius-lg); background: var(--mf-white); text-decoration: none; color: var(--mf-text-secondary); transition: border-color .15s, box-shadow .15s; }
.p-tab:hover { border-color: var(--mf-text-secondary); }
.p-tab--aan, .p-tab--aan:hover { border-color: var(--mf-cta); box-shadow: inset 0 0 0 1px var(--mf-cta); }
.p-tab-icoon { flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--mf-accent); display: flex; align-items: center; justify-content: center; color: var(--mf-text-primary); }
.p-tab-icoon .ic { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.p-tab-tekst { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.p-tab-tekst b { font: 700 16px/24px var(--mf-font); color: var(--mf-text-primary); }
.p-tab-tekst span { font: 400 12px/16px var(--mf-font); }
.p-tab-open { flex: none; height: 24px; padding: 0 10px; border-radius: 12px; background: var(--mf-cta); color: var(--p-op-cta, #fff); font: 600 12px/24px var(--mf-font); }
.p-lijst { padding: 0; overflow: hidden; }
.p-balk { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 16px 20px; border-bottom: 1px solid var(--mf-border); }
.p-filters { display: inline-flex; padding: 4px; gap: 4px; border-radius: 12px; background: var(--mf-bg); border: 1px solid var(--mf-border); flex-wrap: wrap; }
.p-filter { height: 36px; padding: 0 12px; display: inline-flex; align-items: center; gap: 8px; border-radius: 8px; text-decoration: none; font: 600 14px/20px var(--mf-font); color: var(--mf-text-secondary); }
.p-filter:hover { color: var(--mf-text-primary); background: var(--mf-white); }
.p-filter--aan, .p-filter--aan:hover { background: var(--mf-white); color: var(--mf-text-primary); box-shadow: 0 0 0 1px var(--mf-border); }
.p-filter-tel { min-width: 20px; height: 20px; padding: 0 6px; box-sizing: border-box; border-radius: 10px; background: var(--mf-border); font: 600 12px/20px var(--mf-font); text-align: center; color: var(--mf-text-secondary); }
.p-filter--aan .p-filter-tel { background: var(--mf-cta); color: var(--p-op-cta, #fff); }
.p-zoek { position: relative; flex: 0 1 380px; min-width: 220px; display: flex; align-items: center; }
.p-zoek .ic { position: absolute; left: 14px; fill: none; stroke: var(--mf-text-secondary); stroke-width: 1.5; stroke-linecap: round; pointer-events: none; }
.p-zoek input { width: 100%; height: 44px; box-sizing: border-box; padding: 0 14px 0 42px; border: 1px solid var(--mf-border); border-radius: 8px; background: var(--mf-white); font: 400 14px/20px var(--mf-font); color: var(--mf-text-primary); }
.p-resultaat { display: flex; justify-content: space-between; gap: 12px; padding: 12px 20px 4px; font: 400 12px/16px var(--mf-font); color: var(--mf-text-secondary); }
.p-resultaat a { color: var(--mf-text-primary); font-weight: 600; }
.p-tabel { display: flex; flex-direction: column; padding: 0 8px 8px; }
.p-rij { position: relative; display: grid; grid-template-columns: 112px minmax(0, 1.3fr) minmax(0, 1.4fr) 128px 104px 112px minmax(180px, 1fr) 24px; align-items: center; gap: 12px; min-height: 64px; padding: 0 12px; border-radius: 8px; color: var(--mf-text-secondary); font: 400 14px/20px var(--mf-font); }
.p-rij + .p-rij::before { content: ''; position: absolute; top: 0; left: 12px; right: 12px; height: 1px; background: var(--mf-border); }
.p-rij > span { min-width: 0; }
.p-rij--kop { min-height: 40px; font: 600 12px/16px var(--mf-font); }
.p-rij:not(.p-rij--kop) { cursor: pointer; transition: background .12s; }
.p-rij:not(.p-rij--kop):hover, .p-rij:focus-within { background: var(--mf-accent); }
.p-rij:not(.p-rij--kop):hover::before, .p-rij:not(.p-rij--kop):hover + .p-rij::before { opacity: 0; }
.p-rij-link { color: var(--mf-text-primary); text-decoration: none; }
.p-rij-link::after { content: ''; position: absolute; inset: 0; border-radius: 8px; }
.p-rij-link:focus-visible { outline: none; }
.p-rij-link:focus-visible::after { outline: 2px solid var(--mf-text-primary); outline-offset: -2px; }
.p-rij:hover .p-rij-link { text-decoration: underline; }
.p-klant { display: flex; flex-direction: column; }
.p-klant b, .p-klant span, .p-onderwerp { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.p-klant b { color: var(--mf-text-primary); font-weight: 600; }
.p-klant span { font-size: 12px; line-height: 16px; }
.p-datum { font-variant-numeric: tabular-nums; white-space: nowrap; }
.p-mobiel-label { display: none; }
.p-tt { display: flex; align-items: center; gap: 8px; min-width: 0; }
.p-tt-code { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--mf-text-primary); }
.p-geen { color: var(--mf-text-muted); font-size: 12px; }
.kopieer { position: relative; z-index: 1; flex: none; height: 32px; padding: 0 10px; display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--mf-border); border-radius: 8px; background: var(--mf-white); font: 600 12px/16px var(--mf-font); color: var(--mf-text-primary); cursor: pointer; }
.kopieer:hover { border-color: var(--mf-text-primary); }
.kopieer .ic { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.kopieer--klaar, .kopieer--klaar:hover { border-color: var(--mf-positive); color: var(--mf-positive); }
.p-pijl { display: flex; justify-content: flex-end; color: var(--mf-text-muted); transition: transform .15s, color .15s; }
.p-pijl .ic { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.p-rij:hover .p-pijl { color: var(--mf-text-primary); transform: translateX(3px); }
.p-leeg { padding: 48px 20px; text-align: center; color: var(--mf-text-secondary); }
.p-lijst .meer-knop { margin: 8px auto 20px; }
.p-terug { align-self: flex-start; height: 44px; padding: 0 16px 0 10px; display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--mf-border); border-radius: 8px; background: var(--mf-white); text-decoration: none; font: 600 14px/20px var(--mf-font); color: var(--mf-text-primary); margin-bottom: 16px; }
.p-terug:hover { background: var(--mf-accent); }
.p-terug .ic { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; transition: transform .15s; }
.p-terug:hover .ic { transform: translateX(-2px); }
@media (prefers-reduced-motion: reduce) { .p-pijl, .p-terug .ic { transition: none; } }
@media (max-width: 1100px) {
  .p-rij { grid-template-columns: 104px minmax(0, 1.3fr) 128px 104px minmax(170px, 1fr) 24px; }
  .p-rij > .p-onderwerp, .p-rij > .p-datum--af { display: none; }
}
@media (max-width: 760px) {
  .p-tabs { grid-template-columns: 1fr; gap: 8px; }
  .p-tab { min-height: 60px; }
  .p-balk { padding: 12px; }
  .p-filters { width: 100%; box-sizing: border-box; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .p-filters::-webkit-scrollbar { display: none; }
  .p-filter { flex: 1 0 auto; justify-content: center; padding: 0 10px; }
  .p-zoek { flex: 1 1 100%; }
  .p-resultaat { padding: 12px 12px 4px; }
  .p-rij--kop { display: none; }
  .p-rij { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: 'klant status' 'ref datum' 'tt tt'; gap: 6px 12px; padding: 14px 12px; }
  .p-rij > .p-ref { grid-area: ref; font-size: 12px; } .p-rij > .p-klant { grid-area: klant; } .p-rij > .p-status { grid-area: status; justify-self: end; }
  .p-rij > .p-datum:not(.p-datum--af) { grid-area: datum; justify-self: end; font-size: 12px; }
  .p-rij > .p-tt { grid-area: tt; } .p-rij > .p-tt:has(.p-geen) { display: none; }
  .p-rij > .p-pijl, .p-rij > .p-onderwerp, .p-rij > .p-datum--af { display: none; }
  .p-mobiel-label { display: inline; }
}

/* Partnerportal: kopbalk voor ingelogde partner (wie is ingelogd, uitloggen) */
.thema-partner .merk-naam { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 40vw; }
.p-wie { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 12px 0 4px; border-radius: 22px; text-decoration: none; color: var(--mf-text-primary); }
.p-wie:hover { background: var(--mf-accent); }
.p-wie-av { flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--mf-cta); color: var(--p-op-cta, #fff); display: inline-flex; align-items: center; justify-content: center; font: 700 12px/12px var(--mf-font); }
.p-wie-tekst { display: flex; flex-direction: column; min-width: 0; }
.p-wie-tekst b { font: 600 14px/20px var(--mf-font); }
.p-wie-tekst span { font: 400 12px/16px var(--mf-font); color: var(--mf-text-secondary); white-space: nowrap; }
.p-uit { gap: 8px; }
.p-uit .ic, .p-link .ic { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 760px) {
  .thema-partner .kopbalk-binnen { flex-wrap: nowrap; }
  .thema-partner .merk-sub { display: none; }
  .p-wie-tekst { display: none; }
  .p-wie { padding: 0 4px; }
  .p-uit { width: 44px; padding: 0 !important; justify-content: center; }
  .p-uit .lang { display: none; }
}

/* Partnerportal: detail van een verzoek, inhoud links en track en trace plus verloop rechts */
.p-detailscherm { display: flex; flex-direction: column; }
.p-detailscherm .p-terug { margin-bottom: 20px; }
.p-detail-raster { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 20px; align-items: start; }
.p-detail { padding: 0; overflow: hidden; }
.p-detail-kop { padding: 24px 28px 20px; border-bottom: 1px solid var(--mf-border); display: flex; flex-direction: column; gap: 8px; }
.p-detail-kop h1 { margin: 4px 0 0; font: 700 30px/38px var(--mf-font); }
.p-detail-kop .hulp { margin: 0; }
.p-blok { padding: 20px 28px; border-bottom: 1px solid var(--mf-border); display: flex; flex-direction: column; gap: 12px; }
.p-blok:last-child { border-bottom: 0; }
.p-blok h2, .p-zijkaart h2 { margin: 0; font: 700 16px/24px var(--mf-font); color: var(--mf-text-primary); }
.p-gegevens { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 24px; }
.p-gegeven { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.p-gegeven dt { font: 600 12px/16px var(--mf-font); color: var(--mf-text-secondary); }
.p-gegeven dd { margin: 0; font: 400 14px/20px var(--mf-font); color: var(--mf-text-primary); overflow-wrap: anywhere; }
.p-omschrijving, .p-bericht { margin: 0; padding: 12px 16px; border-radius: 8px; background: var(--mf-accent); font: 400 14px/24px var(--mf-font); color: var(--mf-text-primary); }
.p-bericht--af { background: #F5E6E3; }
.p-zij { display: flex; flex-direction: column; gap: 20px; position: sticky; top: calc(var(--kop-h, 72px) + 16px); }
.p-zijkaart { padding: 20px; display: flex; flex-direction: column; gap: 12px; }
.p-tt-toon { display: flex; flex-direction: column; gap: 8px; }
.p-tt-toon[hidden], .p-tt-form[hidden] { display: none; }
.p-tt-groot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 12px 12px 16px; border: 1px solid var(--mf-border); border-radius: 8px; background: var(--mf-accent); }
.p-tt-groot .mono { font-size: 15px; color: var(--mf-text-primary); overflow-wrap: anywhere; }
.p-tt-form { display: flex; flex-direction: column; gap: 12px; }
.p-tt-form .veld { margin: 0; }
.p-link { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; padding: 4px 0; font: 600 14px/20px var(--mf-font); color: var(--mf-text-primary); text-decoration: underline; cursor: pointer; }
.p-link:hover { text-decoration: none; }
.p-verloop { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.p-verloop li { position: relative; display: flex; gap: 12px; padding: 0 0 16px; }
.p-verloop li:last-child { padding-bottom: 0; }
.p-verloop li::before { content: ''; position: absolute; left: 5px; top: 14px; bottom: 0; width: 2px; background: var(--mf-border); }
.p-verloop li:last-child::before { display: none; }
.p-verloop-dot { flex: none; width: 12px; height: 12px; margin-top: 4px; border-radius: 50%; background: var(--mf-white); border: 2px solid var(--mf-text-muted); box-sizing: border-box; position: relative; }
.p-verloop--nu .p-verloop-dot { background: var(--mf-cta); border-color: var(--mf-cta); }
.p-verloop li > span:last-child { display: flex; flex-direction: column; font: 400 14px/20px var(--mf-font); }
.p-verloop b { color: var(--mf-text-primary); font-weight: 600; }
@media (max-width: 960px) {
  /* Telefoon en tablet: track en trace bovenaan (snel kopiëren), het verloop onderaan */
  .p-detail-raster { display: flex; flex-direction: column; }
  .p-zij { display: contents; }
  .p-zij > .p-zijkaart:first-child { order: -1; }
  .p-detail-raster > .kaart, .p-zij > .kaart { width: 100%; box-sizing: border-box; margin: 0; }
}
@media (max-width: 760px) {
  .p-detail-kop, .p-blok { padding: 16px; }
  .p-detail-kop h1 { font-size: 24px; line-height: 32px; }
  .p-gegevens { grid-template-columns: 1fr; }
  .p-zijkaart { padding: 16px; }
}

/* Retour: geplande ophaaldatum op de regel */
.p-ophaal-wrap { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 6px; }
.p-ophaal { height: 32px; padding: 0 10px; display: inline-flex; align-items: center; gap: 6px; border: 1px dashed var(--mf-text-muted); border-radius: 8px; background: var(--mf-white); font: 600 12px/16px var(--mf-font); color: var(--mf-text-secondary); cursor: pointer; white-space: nowrap; }
.p-ophaal:hover { border-color: var(--mf-text-primary); color: var(--mf-text-primary); }
.p-ophaal--gezet { border-style: solid; border-color: var(--mf-border); color: var(--mf-text-primary); }
.p-ophaal--klaar { border-color: var(--mf-positive) !important; color: var(--mf-positive) !important; }
.p-ophaal--fout { border-color: var(--mf-warning) !important; color: var(--mf-warning) !important; }
.p-ophaal .ic { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.p-ophaal-invoer { position: absolute; left: 0; bottom: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; border: 0; padding: 0; }
@media (max-width: 1100px) { .p-rij > .p-datum--ophaal { display: block; } .p-rij:has(.p-datum--ophaal) { grid-template-columns: 104px minmax(0, 1.3fr) 128px 104px 120px minmax(170px, 1fr) 24px; } }
@media (max-width: 760px) {
  .p-rij:has(.p-datum--ophaal) { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: 'klant status' 'ref datum' 'ophaal ophaal' 'tt tt'; }
  .p-rij > .p-datum--ophaal { display: block !important; grid-area: ophaal; }
  .p-rij > .p-datum--ophaal:has(> .p-geen) { display: none !important; }
}