/* PanelPrint — pp-thema.css (vervangt app/web/assets/pp-thema.css; ook te laden op de Twig-site)
   Eén tokenset voor site en app op basis van de Figma-styleguide. Alles hieronder leest uit tokens.
   De oude --pp-*-namen van de app blijven bestaan met de nieuwe waarden; Bulma-namen (--bulma-*) ook, zodat
   bestelwizard, checkout, portaal, Beheer en pp.js ongewijzigd meekunnen. Volgorde: bulma.min.css → pp-thema.css → pp.css → pagina-thema's. */
/* Mulish (reservelettertype na Branding) ZELF gehost sinds 21 september 2026.
   Tot dan stond hier een @import naar Google Fonts: elke bezoeker van
   site én app vroeg daarmee iets op bij Google (IP-adres), voor een lettertype
   dat alleen invalt als Branding een teken mist. Variabel woff2, één bestand
   per subset dekt alle gewichten; door de unicode-range haalt de browser een
   bestand pas op als hij er echt een teken uit nodig heeft. Licentie: OFL. */
@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; }

/* Branding (huisstijl-lettertype, LatinoType) - 6 september 2026, nog geen
   definitief font (Raymon), maar de familie zoals geleverd: Thin 100,
   Light 300, Semilight 350, Medium 500, Semibold 600, Bold 700, Black 900,
   elk met italic. Er is GEEN Regular (400): Medium is de tekstgewicht van
   deze familie en dekt daarom 400 én 500. Bestanden in
   app/web/assets/fonts/ (app, via PUBLIEKE_ASSETS) en
   website/twig/assets/fonts/ (site, dezelfde /assets/fonts/-URL). */
@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 {
  /* Merk (Figma) */
  --pp-navy: #001C36;
  --pp-navy-tekst: var(--pp-navy);
  --pp-navy-tint: #D5E2F2;   /* zachtblauw */
  --pp-navy-tint2: #ECF5FF;  /* lichtblauw */
  --pp-lichtblauw: #ECF5FF;
  --pp-zachtblauw: #D5E2F2;
  --pp-oranje: #C24A00;
  --pp-roze: #C81F87;        /* magenta — nooit als effen vlak */
  --pp-gradient: linear-gradient(90deg, var(--pp-oranje), var(--pp-roze));
  /* Status (set B: warm, app-goud) — vlak, nooit als gradient */
  --pp-groen: #2E7D4F;       /* klaar, afgeleverd, gecontroleerd */
  --pp-groen-hover: #266A42;
  --pp-groen-tekst: var(--pp-groen);
  --pp-goud: #C9A227;        /* aandacht: artwork toevoegen/controleren, gewijzigd */
  --pp-goud-tint: #FBF5E3;
  --pp-rood: #C23B4B;        /* destructief */
  --pp-grijs: #6B7789;       /* onbekend, neutraal */
  /* Tekst en vlakken */
  --pp-tekst: #001C36;
  --pp-tekst-zwak: #3A4658;
  --pp-tekst-muted: #6B7789;
  --pp-rand: #D5E2F2;
  --pp-vlak: #ECF5FF;
  --pp-vlak2: #F7FAFD;
  --pp-wit: #FFFFFF;
  /* Knoppen */
  --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;
  /* Knopradius = helft van de éénregelige hoogte, vast: een knop over twee regels wordt zo geen cirkel */
  --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-compatibele tokens */
  --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;
}

/* ------------------------------------------------------------ basis */
* { 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; }
/* Lettergrootte uit Voorkeuren. pp.js zet data-tekst op <html>;
   zonder die stand staat de schaal op 1 en verandert er niets.
   Alleen de TEKST schaalt - de kolombreedtes en het canvas van
   de artwork-editor blijven waar ze staan, anders zou een
   grotere letter de positioner-wiskunde raken. (Raymon,
   9 september 2026: "sommige mensen vinden de tekst te klein")
   "klein" is de grootte van altijd en zet geen stand. */
: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); }

/* ------------------------------------------------------------ logo
   Eén regel voor site en app: navy op wit en lichtblauw, wit op navy, gradient, foto en in donker thema.
   .pp-logo-beeld is een mask die currentColor volgt; zet de kleur op de ondergrond, niet op het logo. */
.pp-logo-beeld { display: inline-block; width: 152px; height: 25px; background: currentColor; color: var(--pp-navy);
  -webkit-mask: url('/assets/img/logo-panelprint.svg') no-repeat left center / contain;
  mask: url('/assets/img/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/img/logo-panelprint-mark.svg') no-repeat center / contain;
  mask: url('/assets/img/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 */
.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; }

/* --------------------------------------------------------- paginakop */
.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; }

/* ----------------------------------------------------------- knoppen
   Rollen: CTA (L 50) · primair (M 40) · secundair · tertiair · status · destructief · icoon. Maten: L .btn / .is-large,
   M .button (standaard), S .is-small / .is-klein (28px, 13px). Gradient alleen op CTA en primair; de ↗-pijl alleen op de CTA. */
.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; }
/* secundair (standaard .button): navy omlijning.
   De uitsluitingsketen staat in :where() zodat de regel specificiteit (0,1,0) houdt: anders won hij (0,10,0) van
   ELKE contextregel - een knop op de navy bulkbalk werd zo navy-op-navy en de kale .is-cta bleef wit. */
.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); }
/* primair en CTA: gradient. De CTA is de eindactie van een scherm en draagt .is-cta (Bestel nu, Bestelling plaatsen,
   Artwork opslaan, Toevoegen aan calculatielijst, Naar de betaalpagina, Inloggen).
   LET OP, afwijking van de handoff: CD zette elke .is-success/.is-link op CTA, maar die twee Bulma-klassen worden in de
   staff-schermen (afletteren, logs, instellingen, bestandscontrole) ook als gewone kleine knop gebruikt - daar hoort geen
   50px gradientknop met ↗. Vandaar de expliciete .is-cta-haak; zie de README-regel "waar de echte klassen afwijken". */
.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); }
/* .is-success blijft status-groen (vlak), .is-link wordt secundair - beide dus géén CTA */
.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); }
/* ↗ alleen op de CTA (16px lijnicoon als mask; tekstpijlen in labels haalt pp-iconen.js weg) */
.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); } /* Inloggen, Verstuur link: volle breedte = CTA - ook de L-radius (25), anders staat er een 50px-knop met de M-ronding van 20 */
/* tertiair: tekstknop */
.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); }
/* destructief: rode omlijning, vulling pas bij hover */
.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; }
/* status: vlak, geen gradient — goud = aandacht, groen = klaar */
.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; }
/* op beeld / op navy (bulkbalk, wijzigbalk) */
.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); }
/* standen */
.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; } /* “Bezig…” blijft leesbaar (pp.js houdt de breedte vast); Bulma's spinner uit */
.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; } /* .is-link is omlijnd, die houdt navy tekst */
.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; } }

/* --------------------------------------------------- icoonknop (omlijning)
   32px, omlijnd, transparant; hover blue-50 + navy rand. Op mobiel 40px tikvlak. Alle ✎ ✓ × − + ▾ zoom-knopjes. */
.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; } /* × op de uploadkaart blijft rood rond */
@media (pointer: coarse) { .button.is-icoon, .wijzig-klein, .wis-klein, .nest-modal-sluit, .pp-artwork-sluit, .oplage-knop, .modal-close { width: 40px; height: 40px; } }

/* ---------------------------------------------------- segment (verbonden pil)
   Maatwerk/mm, Schaal 1:10, Voorzijde/Achterzijde/3D, Bestaand/Proforma/Nieuwe klant, Vullen/Uitsnede, statuspillen, Bulma-tabs. */
.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 (adresvoorstel, zoeksuggestie)
   Klein, lichtblauw, klikbaar; gekozen = navy. */
.pp-app .chip, .pp-app .pp-chip, .pp-app .adresvoorstel, .pp-app .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); }
.pp-app .chip:hover, .pp-app .pp-chip:hover, .pp-app .adresvoorstel:hover { border-color: var(--pp-navy-tekst); background: var(--pp-vlak); color: var(--pp-navy-tekst); }
.pp-app .chip.is-actief, .pp-app .pp-chip.is-actief, .pp-app .chip[aria-pressed="true"] { background: var(--pp-navy); border-color: var(--pp-navy); color: #fff; }
.pp-app .chips { display: flex; flex-wrap: wrap; gap: .3rem; margin-bottom: .7rem; }

/* ------------------------------------------------ optiekaart (DS-kaart)
   Keuzekaart (wizard) en betaalwijze (checkout) als één kaart: radius 16, 1px rand + card-schaduw; gekozen = navy rand 2px met lichtblauwe vulling;
   uitgeschakeld .5 met reden; premium-badge houdt de gradient. */
.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%); }
/* max-width: none is nodig: Bulma zet `img { max-width: 100% }`, en dat klemt de calc-breedte terug naar de contentbreedte - het beeld schuift dan naar linksboven en laat rechts een gat vallen. */
.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); }

/* ---------------------------------------------------- upload (gestippeld)
   Plus-tegel en Kies bestand… als één vorm: dashed navy rand; tijdens uploaden solide met voortgang; stand Controleren; klaar = groen. */
.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 (status, gedeeld)
   Goud = aandacht (toevoegen, controleren), groen = klaar. Vlak, 28px, 13px. */
.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); }

/* ---------------------------------------------------- stapkaart (wizard) */
.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; }

/* ------------------------------------------------------- tags en status */
/* Knoppen van een vervoerder dragen zijn herkenningskleur in de rand
   (Raymon, 9 september 2026). Alleen de rand: de knop zelf blijft de
   gewone secundaire knop, anders vecht hij met de statuskleuren die op
   dezelfde rij staan. De kleur komt als --vv mee uit ppVervoerderKnop(). */
.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); }
/* Het zendingnummer is een GEVULDE tag in de kleur van de vervoerder,
   even hoog als de kleine knoppen ernaast (Raymon, 9 september 2026).
   --vvt is de tekstkleur, --vvr de rand; ppVervoerderStijl() in pp.js
   vult ze. Zonder die variabelen blijft het een omlijnde tag. */
.pp-app .tag.is-vervoerder { background: var(--vv); color: var(--vvt, #fff);
  border: 2px solid var(--vvr, var(--vv, var(--pp-rand)));
  /* Zelfde maat EN gewicht als de kleine knoppen ernaast (500,
     niet de 700 van een gewone tag) - anders springt het nummer
     er dikker uit dan zijn buren. */
  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); }

/* Eén samengestelde knop per zending in plaats van drie losse (Raymon,
   10 september 2026): [Packs 54612506 | Label | Volgen]. Witte vulling
   met de kleur van de vervoerder als rand - drie losse knoppen naast
   elkaar herhaalden de vervoerdernaam en lieten bij twee zendingen op
   één order niet zien welk label bij welk nummer hoorde. --vv komt uit
   ppVervoerderStijl(); zonder bekende vervoerder blijft het de gewone
   randkleur. Achtergrond via --bulma-scheme-main: wit in het
   lichte thema, en donker blijft leesbaar. */
.zendingbalk { display: inline-flex; align-items: stretch; vertical-align: middle;
  min-height: var(--pp-knop-s); max-width: 100%; overflow: hidden;
  /* De rand is de kleur van de vervoerder zelf (--vv), niet --vvr: die
     tweede is de randkleur van de GEVULDE tag (TrafficSupply rood om
     blauw) en zou hier een blauwe vervoerder rood laten ogen. */
  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; }

.pp-app .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; }
.pp-app .tag.is-licht, .pp-app .tag.is-light { background: var(--bulma-scheme-main-ter); color: var(--pp-tekst-zwak); }
.pp-app .tag.is-groen, .pp-app .tag.is-success.is-light { background: color-mix(in srgb, var(--pp-groen) 12%, transparent); color: var(--pp-groen-tekst); }
.pp-app .tag.is-goud, .pp-app .tag.is-warning.is-light { background: color-mix(in srgb, var(--pp-goud) 14%, transparent); color: var(--pp-goud); }
.pp-app html[data-theme="light"] .tag.is-goud, .pp-app .tag.is-warning.is-light { color: #8A6D0F; }
.pp-app html[data-theme="dark"] .tag.is-goud, .pp-app html[data-theme="dark"] .tag.is-warning.is-light { color: var(--pp-goud); }
.pp-app .tag.is-navy, .pp-app .tag.is-info.is-light, .pp-app .tag.is-link.is-light { background: var(--pp-navy-tint); color: var(--pp-navy-tekst); }
.pp-app .tag.is-rood, .pp-app .tag.is-danger.is-light { background: var(--bulma-danger-tint); color: var(--pp-rood); }
.pp-app .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); }

/* ------------------------------------------------------------ blokken */
.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); }
/* gewijzigd: goud-gloed (was geel) */
.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 (portaal, bij selectie): navy, knoppen op beeld */
.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; }

/* ------------------------------------------------------------ velden
   Radius 8, zachtblauwe rand, navy focus; 14px tekst. Bulma-inputs, selects, textareas, checkbox en radio. */
.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); }
/* vergrendeld (geen superadmin) */
.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; }

/* ------------------------------------------------------- website (.btn)
   Dezelfde rollen op de Twig-site; laad dit bestand na panelprint.css. */
.btn { font-weight: 500; letter-spacing: 0; line-height: 1.15; }
.btn--primary::after { width: 14px; height: 14px; }
/* Site: footer in de 16px-schaal (lopende tekst 20/32 komt uit de DS-tokens) */
.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; }

/* ------------------------------------------------------------ layout en hub-nav */
.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; }

/* ------------------------------------------------------------ tabellen */
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 */
.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 (Beheer) */
.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); }

/* --------------------------------------------------------- kleurstalen */
.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; }

/* ------------------------------------------------------- artwork-dialog */
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); }

/* --------------------------------------------------------- responsive */
@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; } }

/* ---------------------------------------------------------- PanelPrint
   Eigen aanvullingen op het CD-pakket (6 september 2026) - bij een volgend
   pakket opnieuw aanbrengen: */
/* De CTA draait op hover zijn gradient om (Raymon, 7 september 2026:
   "graag op de hover de gradient switchen in 180% en dan graag middels een
   transition van 0.5 sec, sidewide"). Een background-image is niet te
   animeren, dus de omgekeerde gradient ligt als laag klaar en vervaagt
   erin; de inhoud (tekst + pijl) blijft er bovenop.
   De hover MOET de vulling zelf expliciet herhalen: pp.css draagt nog de
   oude look "primair = groen" en zette op hover `background:
   var(--pp-groen-hover)`. Die shorthand veegde de gradient weg, wat als
   een witte flikker oogde voordat het groen erin kwam (Raymon: "de hover
   flikkert eerst wit en heeft daarna ook een groene gradient"). */
.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;
}
/* Een groene statusknop blijft groen - ook als hij de eindactie van een
   scherm is (.is-success.is-cta, bv. "Artwork opslaan"): zijn hoverlaag
   is een GROENE gradient, ook in de omgekeerde richting. Dit blok staat
   bewust ná het blok hierboven, zodat het bij zo'n knop wint. */
.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 mag omvouwen i.p.v. horizontaal uit beeld lopen: met Mulish
   passen de dertien menu-items op 1280 px niet meer op één regel
   (scrollWidth 1416 op orders.html). */
.navbar.is-pp { flex-wrap: wrap; }
/* Bulma zet flex-shrink: 0 op .navbar-menu, waardoor het menu breder wordt
   dan de balk in plaats van te vouwen; met Branding (breder dan Mulish)
   liep orders.html op 1280 px alsnog uit beeld (scrollWidth 1295). */
.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; }

/* Ordernummer van de producent op een orderregel (8 september 2026,
   Raymon: "maak hier een buttonveld van (tekst + kader)"). Het was een
   gestippelde onderstreping die je moest zien staan; nu een echt kader
   met een vast kopje ervoor, zodat duidelijk is dat er iets ingevuld
   kan worden. Klikken maakt er een invoerveld van - zie koppelInline()
   in orders.html. Let op: de lege stand heet is-leeg en niet leeg -
   pp.css heeft een algemene .leeg voor lege-lijst-teksten, met 2rem
   padding erin; die maakte deze knop vier keer zo groot. */
.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;
}

/* Eigen afwijking op het CD-pakket (Raymon, 10 september 2026: "Details
   kopjes staat niet netjes uitgelijnd in de lijst"). `.calc-toggle` stond
   in de icoonknop-lijst hierboven en werd daarmee een ronde knop van 32px
   (40 op touch) met justify-content:center - maar hij draagt ALTIJD een
   label ("Details", "Bewerking", de blokkop). Het label paste er niet in
   en stak aan weerskanten uit, dus stond "Details" links van de titel
   erboven. Hij is uit die drie selectorlijsten gehaald; bij een nieuw
   DesignSystem-pakket opnieuw doen. */
.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;
}

/* Eigen afwijking op het CD-pakket (Raymon, 10 september 2026:
   "Maatvoering rampamoer is niet leesbaar"). Een KALE <select> krijgt
   hierboven een eigen pijltje met 1.9rem ruimte rechts; een select in
   Bulma's `.select`-wrapper zet dat pijltje juist uit en laat de wrapper
   er een tekenen met ::after. Maar de padding-SHORTHANDS voor .input/
   .select select (en .is-small) overschrijven die 1.9rem, dus bleef er
   niets gereserveerd: op "Maat: M6" was de contentbreedte 19px, de tekst
   17px en het pijltje van 7,5px lag er bovenop. Rechts dus weer ruimte
   maken - de wrapper is inline-block en groeit gewoon mee. Bij een nieuw
   DesignSystem-pakket opnieuw aanbrengen. */
.select select, .select.is-small select { padding-right: 1.9rem; }