@font-face { font-family: 'Mulish'; src: url('/assets/fonts/Mulish-latin.woff2') format('woff2'); font-weight: 200 1000; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Mulish'; src: url('/assets/fonts/Mulish-latin-ext.woff2') format('woff2'); font-weight: 200 1000; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

 
@font-face { font-family: 'Branding'; src: url('/assets/fonts/Branding-Thin.woff2') format('woff2'); font-weight: 100; font-style: normal; font-display: swap; }
@font-face { font-family: 'Branding'; src: url('/assets/fonts/Branding-ThinItalic.woff2') format('woff2'); font-weight: 100; font-style: italic; font-display: swap; }
@font-face { font-family: 'Branding'; src: url('/assets/fonts/Branding-Light.woff2') format('woff2'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'Branding'; src: url('/assets/fonts/Branding-LightItalic.woff2') format('woff2'); font-weight: 300; font-style: italic; font-display: swap; }
@font-face { font-family: 'Branding'; src: url('/assets/fonts/Branding-Semilight.woff2') format('woff2'); font-weight: 350; font-style: normal; font-display: swap; }
@font-face { font-family: 'Branding'; src: url('/assets/fonts/Branding-SemilightItalic.woff2') format('woff2'); font-weight: 350; font-style: italic; font-display: swap; }
@font-face { font-family: 'Branding'; src: url('/assets/fonts/Branding-Medium.woff2') format('woff2'); font-weight: 400 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Branding'; src: url('/assets/fonts/Branding-MediumItalic.woff2') format('woff2'); font-weight: 400 500; font-style: italic; font-display: swap; }
@font-face { font-family: 'Branding'; src: url('/assets/fonts/Branding-Semibold.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Branding'; src: url('/assets/fonts/Branding-SemiboldItalic.woff2') format('woff2'); font-weight: 600; font-style: italic; font-display: swap; }
@font-face { font-family: 'Branding'; src: url('/assets/fonts/Branding-Bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Branding'; src: url('/assets/fonts/Branding-BoldItalic.woff2') format('woff2'); font-weight: 700; font-style: italic; font-display: swap; }
@font-face { font-family: 'Branding'; src: url('/assets/fonts/Branding-Black.woff2') format('woff2'); font-weight: 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Branding'; src: url('/assets/fonts/Branding-BlackItalic.woff2') format('woff2'); font-weight: 900; font-style: italic; font-display: swap; }

:root {
   
  --pp-navy: #001C36;
  --pp-navy-tekst: var(--pp-navy);
  --pp-navy-tint: #D5E2F2;    
  --pp-navy-tint2: #ECF5FF;   
  --pp-lichtblauw: #ECF5FF;
  --pp-zachtblauw: #D5E2F2;
  --pp-oranje: #C24A00;
  --pp-roze: #C81F87;         
  --pp-gradient: linear-gradient(90deg, var(--pp-oranje), var(--pp-roze));
   
  --pp-groen: #2E7D4F;        
  --pp-groen-hover: #266A42;
  --pp-groen-tekst: var(--pp-groen);
  --pp-goud: #C9A227;         
  --pp-goud-tint: #FBF5E3;
  --pp-rood: #C23B4B;         
  --pp-grijs: #6B7789;        
   
  --pp-tekst: #001C36;
  --pp-tekst-zwak: #3A4658;
  --pp-tekst-muted: #6B7789;
  --pp-rand: #D5E2F2;
  --pp-vlak: #ECF5FF;
  --pp-vlak2: #F7FAFD;
  --pp-wit: #FFFFFF;
   
  --pp-knop-l: 50px; --pp-knop-m: 40px; --pp-knop-s: 28px; --pp-knop-icoon: 32px;
  --pp-tekst-schaal: 1;
  --pp-knop-tekst-l: calc(18px * var(--pp-tekst-schaal)); --pp-knop-tekst-m: calc(14px * var(--pp-tekst-schaal)); --pp-knop-tekst-s: calc(13px * var(--pp-tekst-schaal));
  --pp-radius-sm: 8px; --pp-radius-md: 16px; --pp-radius-lg: 24px; --pp-radius-pill: 999px;
   
  --pp-radius-knop-l: 25px; --pp-radius-knop-m: 20px; --pp-radius-knop-compact: 22px; --pp-radius-knop-s: 14px;
  --pp-schaduw-card: 0 2px 8px rgba(0,28,54,.06);
  --pp-schaduw-float: 0 8px 24px rgba(0,28,54,.10);
  --pp-ease: cubic-bezier(.4,0,.2,1);
  --pp-font: 'Branding', 'Mulish', system-ui, -apple-system, sans-serif;
   
  --bulma-scheme-main: #ffffff;
  --bulma-scheme-main-bis: #F7FAFD;
  --bulma-scheme-main-ter: #ECF5FF;
  --bulma-text: #001C36;
  --bulma-text-weak: #3A4658;
  --bulma-border: #D5E2F2;
  --bulma-danger: #C23B4B;
  --bulma-danger-tint: #FBEEF0;
  --bulma-success: #2E7D4F;
  --bulma-link: #001C36;
  --bulma-primary: #001C36;
}
html[data-theme="light"] { color-scheme: light; }
html[data-theme="dark"]  { color-scheme: dark; }
html[data-theme="dark"] {
  --pp-navy-tekst: #8FB4E0;
  --pp-navy-tint: hsl(213, 25%, 20%);
  --pp-navy-tint2: hsl(213, 22%, 16%);
  --pp-groen: #3E9A64; --pp-groen-hover: #4FB07A; --pp-groen-tekst: #5CC08A;
  --pp-goud: #D9B84A; --pp-goud-tint: hsl(42, 30%, 16%);
  --pp-rood: #E06774;
  --pp-grijs: #9AA6B5;
  --pp-tekst: hsl(213, 25%, 93%);
  --pp-tekst-zwak: hsl(213, 14%, 74%);
  --pp-tekst-muted: hsl(213, 12%, 64%);
  --pp-rand: hsl(213, 12%, 26%);
  --pp-vlak: hsl(213, 18%, 10%);
  --pp-vlak2: hsl(213, 18%, 13%);
  --pp-schaduw-card: 0 2px 8px rgba(0,0,0,.35);
  --pp-schaduw-float: 0 8px 24px rgba(0,0,0,.45);
  --bulma-scheme-main: hsl(213, 17%, 14%);
  --bulma-scheme-main-bis: hsl(213, 18%, 12%);
  --bulma-scheme-main-ter: hsl(213, 16%, 19%);
  --bulma-text: hsl(213, 25%, 93%);
  --bulma-text-weak: hsl(213, 14%, 74%);
  --bulma-border: hsl(213, 12%, 26%);
  --bulma-danger: #E06774;
  --bulma-danger-tint: hsl(352, 25%, 16%);
  --bulma-success: #3E9A64;
  --bulma-link: #8FB4E0;
  --bulma-primary: #8FB4E0;
}

 
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { font-family: var(--pp-font); background: var(--pp-vlak); color: var(--pp-tekst); font-size: calc(15px * var(--pp-tekst-schaal)); line-height: 1.5; }
 
:root[data-tekst="normaal"] { --pp-tekst-schaal: 1.2; }
:root[data-tekst="groot"]   { --pp-tekst-schaal: 1.4; }
html[data-tekst="normaal"], html[data-tekst="groot"] { font-size: calc(100% * var(--pp-tekst-schaal)); }
a { color: var(--pp-navy-tekst); text-decoration: none; }
a:hover { color: var(--pp-navy-tekst); text-decoration: underline; }
code { font-family: ui-monospace, 'Cascadia Mono', Menlo, monospace; font-size: .78em; background: var(--bulma-scheme-main-ter); border-radius: 5px; padding: .1em .35em; color: var(--pp-tekst-zwak); }
:focus-visible { outline: 2px solid var(--pp-navy-tekst); outline-offset: 2px; }
.help { font-size: .8rem; color: var(--pp-tekst-zwak); margin: .25rem 0; }
.melding-ok { color: var(--pp-groen-tekst); }
.has-text-danger { color: var(--bulma-danger); }

 
.pp-logo-beeld { display: inline-block; width: 152px; height: 25px; background: currentColor; color: var(--pp-navy);
  -webkit-mask: url('/assets/logo-panelprint.svg') no-repeat left center / contain;
  mask: url('/assets/logo-panelprint.svg') no-repeat left center / contain; }
.pp-beeldmerk { display: inline-block; width: 35px; height: 25px; background: currentColor; color: var(--pp-navy);
  -webkit-mask: url('/assets/logo-panelprint-mark.svg') no-repeat center / contain;
  mask: url('/assets/logo-panelprint-mark.svg') no-repeat center / contain; }
.navbar.is-pp .pp-logo-beeld, .navbar.is-pp .pp-beeldmerk, .is-navy .pp-logo-beeld, .is-navy .pp-beeldmerk,
.pp-on-dark .pp-logo-beeld, .pp-on-dark .pp-beeldmerk, html[data-theme="dark"] .pp-logo-beeld, html[data-theme="dark"] .pp-beeldmerk { color: #fff; }
.navbar.is-pp .pp-logo img, html[data-theme="dark"] .pp-logo img { filter: brightness(0) invert(1); }

 
.navbar.is-pp { background: var(--pp-navy); color: #fff; position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 1rem; min-height: 3.6rem; padding: 0 1.25rem; box-shadow: 0 1px 0 rgba(255,255,255,.06); }
.navbar.is-pp .merk { display: flex; align-items: center; gap: .7rem; }
.navbar.is-pp .merknaam { font-weight: 700; font-size: 1.1rem; color: #fff; letter-spacing: -.01em; }
.navbar.is-pp .merknaam b { color: #fff; }
.navbar.is-pp .paginanaam { color: rgba(255,255,255,.65); font-size: .9rem; border-left: 1px solid rgba(255,255,255,.2); padding-left: .7rem; }
.navbar.is-pp .navbar-eind { margin-left: auto; display: flex; align-items: center; gap: .35rem; }
.navbar.is-pp .navbar-eind a, .navbar.is-pp .is-wie { color: rgba(255,255,255,.78); font-size: .85rem; padding: .35rem .6rem; border-radius: var(--pp-radius-sm); }
.navbar.is-pp .navbar-eind a:hover { color: #fff; background: rgba(255,255,255,.08); text-decoration: none; }
@media screen and (max-width: 1023px) {
  .navbar.is-pp { flex-wrap: wrap; gap: 0 1rem; }
  .navbar.is-pp .navbar-brand { flex: 1; display: flex; align-items: center; }
  .navbar.is-pp .navbar-menu { flex-basis: 100%; }
}
.thema-knop { border: 1px solid rgba(255,255,255,.25); background: none; color: rgba(255,255,255,.85); border-radius: var(--pp-radius-pill); cursor: pointer; font: inherit; font-size: .78rem; padding: .28rem .75rem; display: inline-flex; align-items: center; gap: .4rem; transition: background .15s var(--pp-ease), color .15s var(--pp-ease); }
.thema-knop:hover { background: rgba(255,255,255,.1); color: #fff; }
.thema-knop svg { width: 13px; height: 13px; }

 
.sectie { max-width: 1480px; margin: 0 auto; padding: 1.4rem 1.25rem 5rem; }
.paginakop { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.1rem; }
.paginakop .kicker { font-size: .7rem; text-transform: uppercase; letter-spacing: .09em; font-weight: 700; color: var(--pp-tekst-muted); }
.paginakop h1 { font-size: 1.7rem; font-weight: 600; margin: .1rem 0 .2rem; color: var(--pp-navy-tekst); letter-spacing: -.015em; }
.paginakop h1::after { content: ''; display: block; width: 56px; height: 4px; border-radius: 2px; background: var(--pp-gradient); margin-top: .45rem; }
.paginakop .sub { margin: .35rem 0 0; font-size: .85rem; color: var(--pp-tekst-zwak); max-width: 62ch; }
.paginakop .terug { font-size: .82rem; white-space: nowrap; }
#hub-melding { margin: 0 0 .9rem; font-size: .85rem; border-radius: 10px; }
#hub-melding:empty { display: none; }
#hub-melding.has-text-danger { background: var(--bulma-danger-tint); border: 1px solid var(--bulma-danger); padding: .55rem .9rem; }
#hub-melding.melding-ok { background: var(--bulma-scheme-main); border: 1px solid var(--pp-groen-tekst); padding: .55rem .9rem; }

 
.button, .btn { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; font-family: var(--pp-font); font-weight: 500; line-height: 1.15; cursor: pointer; border-radius: var(--pp-radius-knop-m); border: 1px solid var(--pp-rand); background: var(--bulma-scheme-main); color: var(--pp-navy-tekst); text-decoration: none; white-space: nowrap; transition: background .2s var(--pp-ease), border-color .2s var(--pp-ease), color .2s var(--pp-ease), filter .2s var(--pp-ease), box-shadow .2s var(--pp-ease); }
.button { min-height: var(--pp-knop-m); padding: 0 1.1rem; font-size: var(--pp-knop-tekst-m); }
.button.is-small, .button.is-klein { min-height: var(--pp-knop-s); padding: 0 .75rem; font-size: var(--pp-knop-tekst-s); gap: .35rem; border-radius: var(--pp-radius-knop-s); }
.button.is-medium { min-height: var(--pp-knop-m); font-size: var(--pp-knop-tekst-m); }
.button.is-large, .btn { min-height: var(--pp-knop-l); padding: 14px 28px; font-size: var(--pp-knop-tekst-l); gap: 8px; border-color: transparent; border-radius: var(--pp-radius-knop-l); }
.button.is-rounded { border-radius: var(--pp-radius-knop-m); }
.button.is-rounded.is-small { border-radius: var(--pp-radius-knop-s); }
.button.is-fullwidth { width: 100%; }
.button:hover, .btn:hover { text-decoration: none; }
.button:active, .btn:active { transform: translateY(1px); }
.button svg, .btn svg { width: 1em; height: 1em; flex: none; }
.button.is-small svg { width: 12px; height: 12px; }
 
.button:where(:not(.is-primary):not(.is-success):not(.is-link):not(.is-danger):not(.is-light):not(.is-warning):not(.is-info):not(.is-text):not(.is-ghost):not(.is-cta)), .btn--secondary { border-color: var(--pp-navy-tekst); color: var(--pp-navy-tekst); background: transparent; }
.button:where(:not(.is-primary):not(.is-success):not(.is-link):not(.is-danger):not(.is-light):not(.is-warning):not(.is-info):not(.is-text):not(.is-ghost):not(.is-cta)):hover, .btn--secondary:hover { background: var(--pp-vlak); color: var(--pp-navy-tekst); }
 
.button.is-primary, .button.is-cta, .btn--primary { background: var(--pp-gradient); border-color: transparent; color: #fff; font-weight: 500; position: relative; }
.button.is-primary::after { content: none; }
.button.is-primary:hover, .button.is-cta:hover, .btn--primary:hover { filter: saturate(1.15) brightness(.96); color: #fff; }
.button.is-cta, #cta-toevoegen { min-height: var(--pp-knop-l); padding: 14px 28px; font-size: var(--pp-knop-tekst-l); gap: 8px; border-radius: var(--pp-radius-knop-l); }
.button.is-cta.is-small { min-height: var(--pp-knop-l); padding: 14px 28px; font-size: var(--pp-knop-tekst-l); border-radius: var(--pp-radius-knop-l); }
 
.button.is-success { background: var(--pp-groen); border-color: var(--pp-groen); color: #fff; }
.button.is-success:hover { filter: brightness(.92); color: #fff; }
.button.is-link { border-color: var(--pp-navy-tekst); color: var(--pp-navy-tekst); background: transparent; }
.button.is-link:hover { background: var(--pp-vlak); color: var(--pp-navy-tekst); }
 
.button.is-cta::after, #cta-toevoegen::after, .btn--primary::after { content: ''; width: 14px; height: 14px; flex: none; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12L12 4M6 4h6v6'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12L12 4M6 4h6v6'/%3E%3C/svg%3E") center/contain no-repeat; }
.button.is-primary.is-fullwidth, .is-fullwidth.is-cta { min-height: var(--pp-knop-l); font-size: var(--pp-knop-tekst-l); padding: 14px 28px; border-radius: var(--pp-radius-knop-l); }  
 
.button.is-light, .button.is-text, .button.is-ghost, .btn--tertiair { background: transparent; border-color: transparent; color: var(--pp-navy-tekst); text-underline-offset: 3px; }
.button.is-light:hover, .button.is-text:hover, .button.is-ghost:hover, .btn--tertiair:hover { background: var(--pp-vlak); text-decoration: underline; color: var(--pp-navy-tekst); }
 
.button.is-danger, .button.is-danger.is-light, .button.is-danger.is-outlined { color: var(--pp-rood); border-color: var(--pp-rood); background: transparent; }
.button.is-danger:hover, .button.is-danger.is-light:hover { background: var(--pp-rood); border-color: var(--pp-rood); color: #fff; }
 
.button.is-warning, .button.is-goud { background: var(--pp-goud); border-color: var(--pp-goud); color: #fff; }
.button.is-klaar, .button.is-groen { background: var(--pp-groen); border-color: var(--pp-groen); color: #fff; }
.button.is-warning:hover, .button.is-goud:hover, .button.is-klaar:hover, .button.is-groen:hover { filter: brightness(.92); color: #fff; }
 
.button.is-onimage, .btn--onimage, .wijzigbalk .stil, .bulkbalk .button:not(.is-primary):not(.is-danger) { background: transparent; border-color: #fff; color: #fff; }
.button.is-onimage:hover, .btn--onimage:hover, .wijzigbalk .stil:hover, .bulkbalk .button:not(.is-primary):not(.is-danger):hover { background: rgba(255,255,255,.12); color: #fff; }
.btn--contrast { background: #fff; color: var(--pp-roze); border-color: transparent; }
.btn--contrast:hover { filter: brightness(.97); }
.btn--magenta { border-color: var(--pp-roze); color: var(--pp-roze); background: transparent; }
.btn--magenta:hover { background: rgba(200,31,135,.06); }
 
.button[disabled], .button.is-disabled, .btn[disabled] { opacity: .45; cursor: not-allowed; filter: none; transform: none; }
.button.is-loading { color: inherit !important; pointer-events: none; opacity: .8; }  
.button.is-loading::after { display: none !important; }
.button.is-primary.is-loading, .button.is-cta.is-loading, .button.is-success.is-loading { color: #fff !important; }  
.blok.is-gewijzigd .button.is-primary { box-shadow: 0 0 0 3px color-mix(in srgb, var(--pp-goud) 35%, transparent); }
.buttons { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.buttons .button { margin: 0; }
@media (max-width: 480px) { .button.is-small, .button.is-klein { padding: 0 .6rem; } }

 
.button.is-icoon, .wijzig-klein, .wis-klein, .nest-modal-sluit, .pp-artwork-sluit, .ontwerp-detail-kop-toggle, .oplage-knop, .modal-close, .delete { display: inline-flex; align-items: center; justify-content: center; width: var(--pp-knop-icoon); height: var(--pp-knop-icoon); min-height: 0; padding: 0; border-radius: 50%; border: 1px solid var(--pp-rand); background: transparent; color: var(--pp-navy-tekst); font: inherit; font-size: 14px; line-height: 1; cursor: pointer; flex: none; transition: background .2s var(--pp-ease), border-color .2s var(--pp-ease); }
.button.is-icoon:hover, .wijzig-klein:hover, .wis-klein:hover, .nest-modal-sluit:hover, .pp-artwork-sluit:hover, .ontwerp-detail-kop-toggle:hover, .oplage-knop:hover, .modal-close:hover, .delete:hover { background: var(--pp-vlak); border-color: var(--pp-navy-tekst); color: var(--pp-navy-tekst); }
.button.is-icoon svg, .wijzig-klein svg, .wis-klein svg { width: 16px; height: 16px; }
.delete::before, .delete::after { background: currentColor; }
.ontwerpen-kaart-verwijderen { width: 26px; height: 26px; border-radius: 50%; border: 0; background: var(--pp-rood); color: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; font-size: 14px; line-height: 1; }  
@media (pointer: coarse) { .button.is-icoon, .wijzig-klein, .wis-klein, .nest-modal-sluit, .pp-artwork-sluit, .oplage-knop, .modal-close { width: 40px; height: 40px; } }

 
.pp-segment, .tabs.is-toggle ul, .tabs.is-boxed ul, .ontwerp-2d3d-tabs, .klantmodus-knoppen, .statuspillen { display: inline-flex; align-items: center; gap: 2px; padding: 2px; border: 1px solid var(--pp-rand); border-radius: var(--pp-radius-pill); background: var(--bulma-scheme-main); flex-wrap: wrap; }
.tabs.is-toggle, .tabs.is-boxed { border-bottom: 0; }
.tabs.is-toggle ul, .tabs.is-boxed ul { border-bottom: 0; }
.tabs.is-toggle li, .tabs.is-boxed li { margin: 0; }
.pp-segment > *, .tabs.is-toggle li a, .tabs.is-boxed li a, .ontwerp-2d3d-tabs > *, .klantmodus-knoppen > .button, .statuspillen > .button, .maatwerk-knop, .schaal10-toggle, .client-fix { display: inline-flex; align-items: center; gap: .35rem; min-height: 24px; padding: 0 .75rem; border-radius: var(--pp-radius-pill) !important; border: 1px solid transparent !important; margin: 0 !important; background: transparent; color: var(--pp-navy-tekst); font-size: var(--pp-knop-tekst-s); font-weight: 500; font-family: inherit; cursor: pointer; transition: background .2s var(--pp-ease), color .2s var(--pp-ease); }
.pp-segment > *:hover, .tabs.is-toggle li a:hover, .tabs.is-boxed li a:hover, .ontwerp-2d3d-tabs > *:hover, .klantmodus-knoppen > .button:hover, .statuspillen > .button:hover, .maatwerk-knop:hover, .schaal10-toggle:hover, .client-fix:hover { background: var(--pp-vlak); color: var(--pp-navy-tekst); }
.pp-segment > .is-active, .pp-segment > .is-actief, .pp-segment > [aria-pressed="true"], .tabs.is-toggle li.is-active a, .tabs.is-boxed li.is-active a, .ontwerp-2d3d-tabs > .is-active, .klantmodus-knoppen > .button.is-primary, .klantmodus-knoppen > .button.is-light.is-primary, .statuspillen > .button.is-primary, .maatwerk-knop.is-actief, .schaal10-veld:checked + .schaal10-toggle, .client-fix.is-active { background: var(--pp-navy) !important; color: #fff !important; border-color: var(--pp-navy) !important; }
html[data-theme="dark"] .pp-segment > .is-active, html[data-theme="dark"] .tabs.is-toggle li.is-active a, html[data-theme="dark"] .tabs.is-boxed li.is-active a, html[data-theme="dark"] .maatwerk-knop.is-actief, html[data-theme="dark"] .schaal10-veld:checked + .schaal10-toggle { background: var(--pp-navy-tekst) !important; color: hsl(213, 17%, 14%) !important; border-color: var(--pp-navy-tekst) !important; }
.tabs li a .klein, .pp-segment .tel { font-size: 11px; font-weight: 600; opacity: .75; font-variant-numeric: tabular-nums; }
.tabs li a img { height: 12px; }
.schaal10-veld { position: absolute; width: 1px; height: 1px; opacity: 0; }

 
.chip, .pp-chip, .adresvoorstel, .button.is-light.is-rounded.adres { display: inline-flex; align-items: center; gap: .3rem; min-height: 24px; padding: 0 .7rem; border-radius: var(--pp-radius-pill); border: 1px solid transparent; background: var(--pp-vlak); color: var(--pp-navy-tekst); font: inherit; font-size: 12px; font-weight: 500; cursor: pointer; transition: background .2s var(--pp-ease), border-color .2s var(--pp-ease), color .2s var(--pp-ease); }
.chip:hover, .pp-chip:hover, .adresvoorstel:hover { border-color: var(--pp-navy-tekst); background: var(--pp-vlak); color: var(--pp-navy-tekst); }
.chip.is-actief, .pp-chip.is-actief, .chip[aria-pressed="true"] { background: var(--pp-navy); border-color: var(--pp-navy); color: #fff; }
.chips { display: flex; flex-wrap: wrap; gap: .3rem; margin-bottom: .7rem; }

 
.keuzekaart, label.co-keuze, .co-keuze, .pp-optiekaart, .calculatiekaart { position: relative; display: flex; flex-direction: column; gap: 6px; border: 1px solid var(--pp-rand); border-radius: var(--pp-radius-md); background: var(--bulma-scheme-main); box-shadow: var(--pp-schaduw-card); padding: 14px; cursor: pointer; transition: border-color .2s var(--pp-ease), box-shadow .2s var(--pp-ease), background .2s var(--pp-ease), transform .2s var(--pp-ease); }
.keuzekaart:hover, .co-keuze:hover, .pp-optiekaart:hover, .calculatiekaart:hover { border-color: var(--pp-navy-tekst); box-shadow: var(--pp-schaduw-float); transform: translateY(-1px); }
.keuzekaart.is-gekozen, .co-keuze.is-gekozen, .co-keuze:has(input:checked), .pp-optiekaart.is-gekozen { border: 2px solid var(--pp-navy-tekst); background: var(--pp-vlak); box-shadow: none; padding: 13px; }
.keuzekaart.is-uit, .keuzekaart[aria-disabled="true"], .co-keuze.is-uit, .co-keuze:has(input:disabled), .pp-optiekaart.is-uit { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }
.keuzekaart .radio-dot, .co-keuze .radio-dot, .pp-optiekaart .radio-dot { width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid var(--pp-rand); background: var(--bulma-scheme-main); flex: none; }
.keuzekaart.is-gekozen .radio-dot, .co-keuze.is-gekozen .radio-dot, .co-keuze:has(input:checked) .radio-dot, .pp-optiekaart.is-gekozen .radio-dot { border-color: var(--pp-navy-tekst); background: radial-gradient(circle at center, var(--pp-navy-tekst) 0 45%, var(--bulma-scheme-main) 50%); }
 
.keuzekaart-foto, .pp-optiekaart img { width: calc(100% + 28px); max-width: none; margin: -14px -14px 4px; height: 96px; object-fit: cover; border-radius: 15px 15px 0 0; display: block; }
.keuzekaart.is-gekozen .keuzekaart-foto { width: calc(100% + 26px); max-width: none; margin: -13px -13px 4px; border-radius: 14px 14px 0 0; }
.keuzekaart-naam, .co-keuze .naam, .pp-optiekaart .naam { font-size: 14px; font-weight: 600; color: var(--pp-tekst); }
.keuzekaart-sub, .co-keuze .uitleg, .pp-optiekaart .sub { font-size: 12px; color: var(--pp-tekst-muted); line-height: 1.4; }
.keuzekaart .reden, .co-keuze .reden { font-size: 11px; color: var(--pp-tekst-muted); }
.keuzekaart .premium-badge, .pp-optiekaart .premium-badge { position: absolute; top: 8px; right: 8px; font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #fff; background: var(--pp-gradient); border-radius: var(--pp-radius-pill); padding: 3px 8px; }
.co-keuze input[type="radio"] { position: absolute; width: 1px; height: 1px; opacity: 0; }
.calculatiekaart { cursor: pointer; }
.calculatiekaart.is-concept { border-left: 3px solid var(--pp-goud); }
.calculatiekaart.is-offerte { border-left: 3px solid var(--pp-navy-tekst); }

 
.pp-upload-tegel, .ontwerpen-plus-tegel, .plus-tegel { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 120px; border-radius: var(--pp-radius-md); border: 1.5px dashed var(--pp-navy-tekst); background: var(--bulma-scheme-main); color: var(--pp-navy-tekst); font-size: 12px; font-weight: 500; text-align: center; padding: 12px; cursor: pointer; transition: background .2s var(--pp-ease), border-color .2s var(--pp-ease); }
.pp-upload-tegel:hover, .ontwerpen-plus-tegel:hover, .plus-tegel:hover { background: var(--pp-vlak); }
.pp-upload-tegel .sub, .plus-tegel .sub { font-weight: 400; color: var(--pp-tekst-muted); }
.pp-upload-tegel.is-bezig, .pp-upload-tegel.is-controleren, .pp-upload-tegel.is-klaar, .plus-tegel.is-bezig, .plus-tegel.is-controleren, .plus-tegel.is-klaar { border-style: solid; cursor: default; }
.pp-upload-tegel .voortgang, .plus-tegel .voortgang { width: 100%; height: 4px; border-radius: 2px; background: var(--pp-vlak); overflow: hidden; }
.pp-upload-tegel .voortgang > span, .plus-tegel .voortgang > span { display: block; height: 100%; background: var(--pp-navy-tekst); transition: width .3s var(--pp-ease); }
.pp-upload-tegel .spinner, .plus-tegel .spinner { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--pp-goud); border-right-color: transparent; animation: pp-draai .8s linear infinite; }
.pp-upload-tegel .klaar-dot, .plus-tegel .klaar-dot { width: 22px; height: 22px; border-radius: 50%; background: var(--pp-groen); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; }
@keyframes pp-draai { to { transform: rotate(360deg); } }
.upload-knop-groot, label.button.upload-knop-groot, .button.is-upload { display: inline-flex; align-items: center; gap: 8px; min-height: var(--pp-knop-m); padding: 0 1.1rem; border-radius: var(--pp-radius-knop-m); border: 1.5px dashed var(--pp-navy-tekst) !important; background: var(--bulma-scheme-main) !important; color: var(--pp-navy-tekst) !important; font-size: var(--pp-knop-tekst-m); font-weight: 500; cursor: pointer; }
.upload-knop-groot:hover, .button.is-upload:hover { background: var(--pp-vlak) !important; }
.upload-knop-groot::after { content: none; }
.upload-knop-groot-veld { position: absolute; width: 1px; height: 1px; opacity: 0; }

 
.artwork-knop, .calc-item-ontwerpen { display: inline-flex; align-items: center; gap: .35rem; min-height: var(--pp-knop-s); border: 0; border-radius: var(--pp-radius-knop-s); padding: 0 .75rem; font-family: inherit; font-size: var(--pp-knop-tekst-s); font-weight: 600; cursor: pointer; background: var(--pp-goud); color: #fff; transition: filter .2s var(--pp-ease); }
.artwork-knop:hover, .calc-item-ontwerpen:hover { filter: brightness(.92); }
.artwork-knop.is-klaar, .calc-item-ontwerpen.is-klaar { background: var(--pp-groen); }

 
.stap-kaart { border-radius: var(--pp-radius-md); background: var(--bulma-scheme-main); border: 1px solid var(--pp-rand); box-shadow: var(--pp-schaduw-card); }
.stap-kop { display: flex; align-items: center; gap: .7rem; padding: .8rem 1rem; cursor: pointer; border-radius: var(--pp-radius-md); }
.stap-kop:not(.is-open):hover { background: var(--pp-navy-tint2); }
.vink-cirkel { width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; flex: none; font-size: 13px; font-weight: 600; background: var(--pp-navy-tint); color: var(--pp-navy-tekst); border: 1.5px solid transparent; }
.stap-kop.is-open .vink-cirkel { background: var(--pp-navy); color: #fff; }
html[data-theme="dark"] .stap-kop.is-open .vink-cirkel { background: var(--pp-navy-tekst); color: hsl(213, 17%, 14%); }
.vink-cirkel.is-klaar { background: var(--pp-groen); border-color: var(--pp-groen); color: #fff; }
.stap-titel { color: var(--pp-navy-tekst); font-weight: 600; font-size: 15px; }
.stap-samenvatting-pill { margin-left: auto; font-size: 12px; color: var(--pp-tekst-muted); background: var(--pp-vlak); border-radius: var(--pp-radius-pill); padding: 2px 10px; }

 
 
.button.is-vervoerder { border-color: var(--vv, var(--pp-rand)) !important;
  border-width: 2px; }
.button.is-vervoerder:hover { border-color: var(--vv, var(--pp-rand)) !important;
  background: color-mix(in srgb, var(--vv) 10%, transparent); }
 
.tag.is-vervoerder { background: var(--vv); color: var(--vvt, #fff);
  border: 2px solid var(--vvr, var(--vv, var(--pp-rand)));
   
  font-size: var(--pp-knop-tekst-s); font-weight: 500;
  min-height: var(--pp-knop-s); padding: 0 .75rem; box-sizing: border-box;
  border-radius: var(--pp-radius-knop-s); }

 
.zendingbalk { display: inline-flex; align-items: stretch; vertical-align: middle;
  min-height: var(--pp-knop-s); max-width: 100%; overflow: hidden;
   
  border: 2px solid var(--vv, var(--pp-rand));
  border-radius: var(--pp-radius-knop-s);
  background: var(--bulma-scheme-main); }
.zendingbalk-deel { display: inline-flex; align-items: center; gap: .35rem;
  padding: 0 .7rem; margin: 0; border: 0; background: transparent;
  font-family: inherit; font-size: var(--pp-knop-tekst-s); font-weight: 500;
  line-height: 1.15; color: var(--pp-navy-tekst); text-decoration: none;
  white-space: nowrap; cursor: default; }
a.zendingbalk-deel, button.zendingbalk-deel { cursor: pointer; }
a.zendingbalk-deel:hover, button.zendingbalk-deel:hover {
  background: color-mix(in srgb, var(--vv, var(--pp-navy)) 12%, transparent);
  color: var(--pp-navy-tekst); text-decoration: none; }
.zendingbalk-deel + .zendingbalk-deel {
  border-left: 2px solid var(--vv, var(--pp-rand)); }
.zendingbalk-deel .ic, .zendingbalk-deel img, .zendingbalk-deel svg { flex: none; }

.tag { display: inline-flex; align-items: center; gap: .3rem; font-size: calc(11px * var(--pp-tekst-schaal)); font-weight: 600; border-radius: var(--pp-radius-pill); padding: .12rem .6rem; vertical-align: middle; }
.tag.is-licht, .tag.is-light { background: var(--bulma-scheme-main-ter); color: var(--pp-tekst-zwak); }
.tag.is-groen, .tag.is-success.is-light { background: color-mix(in srgb, var(--pp-groen) 12%, transparent); color: var(--pp-groen-tekst); }
.tag.is-goud, .tag.is-warning.is-light { background: color-mix(in srgb, var(--pp-goud) 14%, transparent); color: var(--pp-goud); }
html[data-theme="light"] .tag.is-goud, .tag.is-warning.is-light { color: #8A6D0F; }
html[data-theme="dark"] .tag.is-goud, html[data-theme="dark"] .tag.is-warning.is-light { color: var(--pp-goud); }
.tag.is-navy, .tag.is-info.is-light, .tag.is-link.is-light { background: var(--pp-navy-tint); color: var(--pp-navy-tekst); }
.tag.is-rood, .tag.is-danger.is-light { background: var(--bulma-danger-tint); color: var(--pp-rood); }
.tag.is-grijs { background: color-mix(in srgb, var(--pp-grijs) 14%, transparent); color: var(--pp-grijs); }
.blokstatus { font-size: .74rem; font-weight: 600; border-radius: var(--pp-radius-pill); padding: .15rem .65rem; display: none; }
.blokstatus.ok { display: inline-block; color: var(--pp-groen-tekst); background: color-mix(in srgb, var(--pp-groen) 12%, transparent); }
.blokstatus.fout { display: inline-block; color: var(--bulma-danger); background: var(--bulma-danger-tint); }

 
.kruimel { font-size: .84rem; margin: 0 0 .7rem; color: var(--pp-tekst-zwak); }
.kruimel a { cursor: pointer; }
.blok { background: var(--bulma-scheme-main); border: 1px solid var(--pp-rand); border-radius: var(--pp-radius-md); padding: 1.1rem 1.3rem 1.25rem; margin-bottom: 1rem; box-shadow: var(--pp-schaduw-card); position: relative; transition: border-color .2s var(--pp-ease); }
.blok.is-kop { border-top: 3px solid transparent; background: linear-gradient(var(--bulma-scheme-main), var(--bulma-scheme-main)) padding-box, linear-gradient(90deg, var(--pp-oranje), var(--pp-roze), var(--pp-rand) 65%) border-box; }
.blok.is-stil { background: var(--pp-vlak2); box-shadow: none; }
.bloktitel-rij { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; margin-bottom: .35rem; }
.bloktitel-rij .ruimte { flex: 1; }
.blok h2 { font-size: 1.25rem; font-weight: 600; margin: 0; color: var(--pp-navy-tekst); letter-spacing: -.01em; }
.blok h3 { font-size: .78rem; font-weight: 700; margin: 0; text-transform: uppercase; letter-spacing: .07em; color: var(--pp-tekst-zwak); }
.blok .bloklijn { height: 1px; border: 0; margin: .55rem 0 .9rem; background: linear-gradient(90deg, var(--pp-rand), transparent); }
 
.blok.is-gewijzigd { border-color: var(--pp-goud); box-shadow: 0 0 0 3px color-mix(in srgb, var(--pp-goud) 22%, transparent); }
.blok.is-gewijzigd::after { content: ''; position: absolute; left: -1px; top: 14px; bottom: 14px; width: 3px; border-radius: 2px; background: var(--pp-goud); }
.gewijzigd-dot { display: none; width: 8px; height: 8px; border-radius: 50%; background: var(--pp-goud); flex: none; }
.blok.is-gewijzigd .gewijzigd-dot { display: inline-block; }
.veld.is-gewijzigd .input, .veld.is-gewijzigd .textarea, .veld.is-gewijzigd select, .input.is-gewijzigd { border-color: var(--pp-goud); box-shadow: 0 0 0 3px color-mix(in srgb, var(--pp-goud) 22%, transparent); }
.wijzigbalk[hidden] { display: none; }
.wijzigbalk { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 50; display: flex; align-items: center; gap: .9rem; background: var(--pp-navy); color: #fff; border-radius: var(--pp-radius-pill); padding: .5rem .6rem .5rem 1.2rem; box-shadow: var(--pp-schaduw-float); font-size: .85rem; max-width: min(92vw, 640px); }
.wijzigbalk::before { content: ''; width: 9px; height: 9px; flex: none; border-radius: 50%; background: var(--pp-goud); }
.wijzigbalk .button { margin: 0; }
 
.bulkbalk, .bulk-balk { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; background: var(--pp-navy); color: #fff; border-radius: var(--pp-radius-md); padding: .6rem .9rem; }
.bulkbalk .teller, .bulk-balk .teller { font-size: 13px; font-weight: 600; margin-right: .4rem; }

 
.veldgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: .7rem .9rem; }
.veld .label, .label { display: flex; align-items: center; gap: .3rem; font-size: .8rem; font-weight: 600; color: var(--pp-tekst-zwak); margin: 0 0 .25rem; }
.veld .label .slotje { color: var(--pp-tekst-muted); flex: none; }
.veldhint { font-size: .7rem; color: var(--pp-tekst-muted); margin-top: .18rem; font-variant-numeric: tabular-nums; }
.veldhint b { color: var(--pp-navy-tekst); font-weight: 500; }
.input, .textarea, select, .select select { width: 100%; font: inherit; font-size: 14px; line-height: 1.4; color: var(--pp-tekst); background: var(--bulma-scheme-main); border: 1px solid var(--pp-rand); border-radius: var(--pp-radius-sm); padding: .5rem .75rem; min-height: var(--pp-knop-m); box-shadow: none; transition: border-color .2s var(--pp-ease), box-shadow .2s var(--pp-ease); }
.input.is-small, .select.is-small select, .textarea.is-small { min-height: var(--pp-knop-s); font-size: var(--pp-knop-tekst-s); padding: .25rem .6rem; border-radius: var(--pp-radius-sm); }
.input:hover, .textarea:hover, select:hover { border-color: var(--pp-tekst-muted); }
.input:focus, .textarea:focus, select:focus, .input.is-focused, .select select:focus { outline: none; border-color: var(--pp-navy-tekst); box-shadow: 0 0 0 3px color-mix(in srgb, var(--pp-navy-tekst) 18%, transparent); }
.input::placeholder, .textarea::placeholder { color: var(--pp-tekst-muted); }
.input.is-danger, .textarea.is-danger, .select.is-danger select { border-color: var(--pp-rood); }
.textarea { resize: vertical; min-height: 2.4rem; }
select { appearance: none; padding-right: 1.9rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%236B7789' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .7rem center; }
.select select { background-image: none; }
.select:not(.is-multiple):not(.is-loading)::after { border-color: var(--pp-navy-tekst) !important; }
.checkbox, .radio { display: inline-flex; align-items: center; gap: .45rem; font-size: 14px; color: var(--pp-tekst); cursor: pointer; }
.checkbox input[type="checkbox"], .radio input[type="radio"], input[type="checkbox"].pp, input[type="radio"].pp { appearance: none; width: 18px; height: 18px; margin: 0; border: 1.5px solid var(--pp-rand); background: var(--bulma-scheme-main); border-radius: 5px; display: inline-grid; place-content: center; cursor: pointer; transition: border-color .2s var(--pp-ease), background .2s var(--pp-ease); }
.radio input[type="radio"], input[type="radio"].pp { border-radius: 50%; }
.checkbox input[type="checkbox"]:hover, .radio input[type="radio"]:hover { border-color: var(--pp-navy-tekst); }
.checkbox input[type="checkbox"]:checked, input[type="checkbox"].pp:checked { background: var(--pp-navy); border-color: var(--pp-navy); }
.checkbox input[type="checkbox"]:checked::before, input[type="checkbox"].pp:checked::before { content: ''; width: 10px; height: 10px; background: #fff; clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%); }
.radio input[type="radio"]:checked, input[type="radio"].pp:checked { border-color: var(--pp-navy-tekst); background: radial-gradient(circle at center, var(--pp-navy-tekst) 0 45%, var(--bulma-scheme-main) 50%); }
.checkbox input:focus-visible, .radio input:focus-visible { outline: 2px solid var(--pp-navy-tekst); outline-offset: 2px; }
.field.has-addons .button, .field.has-addons .input { border-radius: var(--pp-radius-sm); }
 
.veld.is-slot .input, .veld.is-slot .textarea, textarea.json[readonly] { background: var(--pp-vlak2); border-style: dashed; color: var(--pp-tekst-zwak); cursor: not-allowed; }
.slot-uitleg { display: inline-flex; align-items: center; gap: .35rem; font-size: .72rem; color: var(--pp-tekst-muted); }
.slot-uitleg svg { flex: none; }

 
.btn { font-weight: 500; letter-spacing: 0; line-height: 1.15; }
.btn--primary::after { width: 14px; height: 14px; }
 
.site-footer, .site-footer p, .site-footer a, .site-footer li, .site-footer div { font-size: 1rem; line-height: 1.5; }
.site-footer__title { font-size: 1rem !important; margin-bottom: 14px; }
.site-footer__brand p { line-height: 1.6; max-width: 36ch; }
.site-footer__brand img { height: 34px; }
.site-footer__col ul { gap: 4px; }
.site-footer__bottom { font-size: .875rem; padding: 16px 24px; }
.header-pill .btn--primary { min-height: 44px; padding: 10px 22px; font-size: 16px; border-radius: var(--pp-radius-knop-compact); }
.header-pill .btn--primary::after { content: none; }
.filter-pill, .subnav__inner > a:not(.btn) { font-family: var(--pp-font); }
.login { width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--pp-rand); display: inline-grid; place-items: center; color: var(--pp-navy-tekst); background: #fff; }
.login:hover { background: var(--pp-vlak); border-color: var(--pp-navy-tekst); text-decoration: none; }

 
.hub-lay { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 1.25rem; align-items: start; }
@media (max-width: 900px) { .hub-lay { grid-template-columns: 1fr; } .hub-nav { position: static; max-height: 340px; } }
.hub-nav { position: sticky; top: 4.4rem; max-height: calc(100vh - 5.4rem); overflow-y: auto; background: var(--bulma-scheme-main); border: 1px solid var(--pp-rand); border-radius: var(--pp-radius-md); padding: .8rem; }
.hub-nav .input { margin-bottom: .55rem; }
.groepkop { font-size: .68rem; text-transform: uppercase; letter-spacing: .07em; color: var(--pp-tekst-muted); margin: 1rem 0 .3rem; font-weight: 700; padding-left: .25rem; }
.groepkop:first-of-type { margin-top: .2rem; }
.hub-nav button.item, .hub-nav button.groep { display: flex; width: 100%; align-items: center; gap: .45rem; text-align: left; border: 0; background: none; color: var(--pp-tekst); padding: .3rem .55rem; border-radius: var(--pp-radius-sm); cursor: pointer; font: inherit; font-size: .86rem; transition: background .15s var(--pp-ease), color .15s var(--pp-ease); }
.hub-nav button.item:hover, .hub-nav button.groep:hover { background: var(--bulma-scheme-main-bis); }
.hub-nav button.groep { font-weight: 500; }
.hub-nav .pijl { flex: none; width: 12px; height: 12px; transition: transform .15s; color: var(--pp-tekst-muted); }
.hub-nav .is-open > .pijl { transform: rotate(90deg); }
.hub-nav .tel { margin-left: auto; flex: none; font-size: .68rem; font-weight: 700; color: var(--pp-tekst-muted); background: var(--bulma-scheme-main-ter); border-radius: var(--pp-radius-pill); padding: .05rem .5rem; font-variant-numeric: tabular-nums; }
.hub-nav .sub { padding-left: 1.5rem; font-size: .83rem; }
.hub-nav code { flex: none; }
.hub-nav button.is-actief { background: var(--pp-navy); color: #fff; position: relative; }
.hub-nav button.is-actief::before { content: ''; position: absolute; left: 0; top: 15%; bottom: 15%; width: 3px; border-radius: 2px; background: var(--pp-gradient); }
.hub-nav button.is-actief code, .hub-nav button.is-actief .tel { background: rgba(255,255,255,.15); color: rgba(255,255,255,.85); }
.hub-nav button.item.is-actief:hover, .hub-nav button.groep.is-actief:hover, .hub-nav button.is-actief:hover { background: color-mix(in srgb, var(--pp-navy) 80%, #7a8aa5); color: #fff; }
.hub-nav .leeg-melding { font-size: .8rem; color: var(--pp-tekst-muted); padding: .8rem .25rem; }

 
table.strak { width: 100%; font-size: .84rem; border-collapse: collapse; }
table.strak th { text-align: left; font-size: .66rem; text-transform: uppercase; letter-spacing: .06em; color: var(--pp-tekst-muted); font-weight: 700; padding: .3rem .7rem .3rem 0; border-bottom: 1px solid var(--pp-rand); }
table.strak td { padding: .42rem .7rem .42rem 0; vertical-align: middle; border-bottom: 1px solid color-mix(in srgb, var(--pp-rand) 55%, transparent); }
table.strak tr:last-child td { border-bottom: none; }
table.strak tr.klikbaar { cursor: pointer; }
table.strak tr.klikbaar td { transition: background .15s var(--pp-ease); }
table.strak tr.klikbaar:hover td { background: color-mix(in srgb, var(--pp-navy-tint) 45%, transparent); }
.thumb { width: 44px; height: 44px; border-radius: var(--pp-radius-sm); flex: none; border: 1px solid var(--pp-rand); display: inline-flex; align-items: center; justify-content: center; font-size: .62rem; font-weight: 700; color: #fff; vertical-align: middle; text-shadow: 0 1px 2px rgba(0,0,0,.25); overflow: hidden; }
.thumb.groot { width: 76px; height: 76px; border-radius: 10px; font-size: .8rem; }

 
.json-blok { border: 1px solid var(--pp-rand); border-radius: 12px; overflow: hidden; margin-top: .35rem; background: var(--pp-vlak2); }
.json-kop { display: flex; align-items: center; gap: .6rem; padding: .5rem .85rem; font-size: .76rem; font-weight: 700; color: var(--pp-tekst-zwak); }
.json-kop .ruimte { flex: 1; }
.json-geldig { display: inline-flex; align-items: center; gap: .35rem; font-size: .7rem; font-weight: 700; }
.json-geldig.ok { color: var(--pp-groen-tekst); }
.json-geldig.fout { color: var(--bulma-danger); }
.json-geldig .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.json-rijen { padding: 0 .85rem .5rem; }
.json-rij { display: flex; gap: .7rem; align-items: baseline; font-size: .8rem; padding: .28rem 0; border-top: 1px solid color-mix(in srgb, var(--pp-rand) 55%, transparent); font-variant-numeric: tabular-nums; }
.json-rij .nr { flex: none; width: 1.1rem; font-size: .68rem; font-weight: 700; color: var(--pp-tekst-muted); }
.json-rij .cond { flex: 1; min-width: 0; }
.json-rij .uitkomst { flex: none; font-weight: 700; color: var(--pp-navy-tekst); }
.json-rij code { background: none; padding: 0; color: var(--pp-tekst-zwak); }
details.json-bron summary { cursor: pointer; font-size: .74rem; font-weight: 700; color: var(--pp-tekst-zwak); padding: .45rem .85rem; border-top: 1px solid var(--pp-rand); user-select: none; list-style: none; display: flex; align-items: center; gap: .4rem; }
details.json-bron summary::-webkit-details-marker { display: none; }
details.json-bron summary::before { content: ''; width: 0; height: 0; border: 4px solid transparent; border-left-color: var(--pp-tekst-muted); transition: transform .12s; }
details.json-bron[open] summary::before { transform: rotate(90deg); }
details.json-bron summary:hover { color: var(--pp-navy-tekst); }
textarea.json { display: block; width: 100%; border: 0; border-top: 1px dashed var(--pp-rand); border-radius: 0; font-family: ui-monospace, 'Cascadia Mono', Menlo, monospace; font-size: .76rem; line-height: 1.55; min-height: 150px; padding: .7rem .85rem; background: var(--bulma-scheme-main); color: var(--pp-tekst); resize: vertical; }
textarea.json:focus { outline: none; box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--pp-navy-tekst) 30%, transparent); }

 
.optiekaart { border: 1px solid var(--pp-rand); border-radius: 12px; padding: .85rem 1rem 1rem; margin-bottom: .7rem; background: var(--pp-vlak2); }
.optiekaart .bloktitel-rij { margin-bottom: .6rem; }
.optiekaart b.optielabel { font-size: .95rem; color: var(--pp-tekst); }

 
.stalen { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: .55rem; margin-top: .55rem; }
.staal { border: 1px solid var(--pp-rand); border-radius: 10px; overflow: hidden; background: var(--bulma-scheme-main); font-size: .68rem; text-align: left; position: relative; }
.staal .kleurvlak { height: 52px; position: relative; }
.staal .kleurvlak img { width: 100%; height: 100%; object-fit: cover; display: block; }
.staal .staalinfo { padding: .35rem .5rem .45rem; line-height: 1.3; }
.staal .staalnaam { font-weight: 700; color: var(--pp-tekst); display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.staal .staalcode { color: var(--pp-tekst-muted); font-variant-numeric: tabular-nums; }
.staal .staalacties { position: absolute; top: 4px; right: 4px; display: flex; gap: 3px; opacity: 0; transition: opacity .12s; }
.staal:hover .staalacties, .staal:focus-within .staalacties { opacity: 1; }
.staal .staalacties button { width: 22px; height: 22px; border-radius: 6px; border: 0; cursor: pointer; background: rgba(0,28,54,.72); color: #fff; font-size: .72rem; line-height: 1; display: flex; align-items: center; justify-content: center; padding: 0; transition: background .15s var(--pp-ease); }
.staal .staalacties button:hover { background: var(--pp-navy); }
.staal .staalacties button.weg:hover { background: var(--pp-rood); }
.staal input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.staal .eigen-badge { position: absolute; left: 4px; top: 4px; font-size: .58rem; font-weight: 700; background: rgba(0,28,54,.72); color: #fff; border-radius: 5px; padding: .06rem .35rem; }

 
dialog.pp-artwork-dialog { border: 0; padding: 0; border-radius: 14px; width: min(1500px, 96vw); height: 93vh; max-width: none; max-height: none; overflow: hidden; background: var(--bulma-scheme-main); box-shadow: var(--pp-schaduw-float); }
dialog.pp-artwork-dialog::backdrop { background: rgba(0, 28, 54, .55); }
dialog.pp-artwork-dialog iframe { width: 100%; height: 100%; border: 0; display: block; }
.pp-artwork-sluit { position: absolute; top: 8px; right: 8px; z-index: 5; background: var(--bulma-scheme-main); }

 
@media (max-width: 900px) {
  .sectie { padding: 1rem .8rem 6rem; }
  .blok { padding: .9rem .95rem 1rem; }
  .wijzigbalk { bottom: 10px; flex-wrap: wrap; border-radius: 18px; padding: .6rem .9rem; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .button, .btn, .keuzekaart, .co-keuze, .pp-upload-tegel .spinner { transition: none; animation: none; } }

 
 
.button.is-primary, .button.is-cta, .btn--primary { isolation: isolate; }
.button.is-primary::before, .button.is-cta::before, .btn--primary::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; z-index: -1;
  background: linear-gradient(270deg, var(--pp-oranje, #C24A00), var(--pp-roze, #C81F87));
  opacity: 0; transition: opacity .5s var(--pp-ease, ease);
}
.button.is-primary:hover::before, .button.is-cta:hover::before,
.btn--primary:hover::before { opacity: 1; }
.button.is-primary:hover, .button.is-cta:hover, .btn--primary:hover {
  background: var(--pp-gradient); border-color: transparent; color: #fff; filter: none;
}
 
.button.is-success { isolation: isolate; position: relative; }
.button.is-success::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; z-index: -1;
  background: linear-gradient(270deg, var(--pp-groen-hover, #266A42), var(--pp-groen, #2E7D4F));
  opacity: 0; transition: opacity .5s var(--pp-ease, ease);
}
.button.is-success:hover::before { opacity: 1; }
.button.is-success:hover {
  background: var(--pp-groen); border-color: var(--pp-groen); color: #fff; filter: none;
}

 
.navbar.is-pp { flex-wrap: wrap; }
 
.navbar.is-pp .navbar-menu { flex: 1 1 auto; max-width: 100%; }
.navbar.is-pp .navbar-menu, .navbar.is-pp .navbar-start, .navbar.is-pp .navbar-end { flex-wrap: wrap; min-width: 0; }
.tabs li.is-active a .klein { background: rgba(255, 255, 255, .16); color: #fff; }

 
.refknop {
  display: inline-flex; align-items: stretch; cursor: pointer;
  border: 1px solid var(--pp-rand); border-radius: var(--pp-radius-knop-s, 6px);
  overflow: hidden; line-height: 1.2; min-height: var(--pp-knop-s, 28px);
  font-size: var(--pp-knop-tekst-s, .75rem);
  background: var(--bulma-scheme-main);
  transition: border-color .2s var(--pp-ease, ease), box-shadow .2s var(--pp-ease, ease);
}
.refknop:hover { border-color: var(--pp-navy-tekst); }
.refknop-kop {
  display: flex; align-items: center; padding: 0 .5rem; background: var(--bulma-scheme-main-bis);
  border-right: 1px solid var(--pp-rand); color: var(--bulma-text-weak);
  white-space: nowrap;
}
.refknop-waarde {
  display: flex; align-items: center; padding: 0 .55rem;
  min-width: 4.5rem; font-weight: 600;
}
.refknop.is-leeg .refknop-waarde {
  font-weight: 400; font-style: italic; color: var(--bulma-text-weak);
}
.refknop input {
  font: inherit; width: 100%; min-width: 5.5rem; border: 0; padding: 0;
  background: transparent; color: inherit; outline: none;
}

 
.calc-toggle {
  width: auto; height: auto; min-height: 0; padding: 0;
  border: 0; border-radius: 0; background: none;
  justify-content: flex-start; flex: 0 1 auto;
}

 
.select select, .select.is-small select { padding-right: 1.9rem; }