/* ============================================================
   Lokale fonts. Waren drie requests naar fonts.googleapis.com +
   fonts.gstatic.com; nu meegeleverd in fonts/. Alle drie OFL,
   zelf hosten is toegestaan. De latin-ext-varianten worden alleen
   opgehaald als er een teken uit dat bereik op de pagina staat.
   ============================================================ */
@font-face{font-family:'Anton';font-style:normal;font-weight:400;font-display:swap;
  src:url(fonts/anton-latin-ext.woff2) format('woff2');
  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:'Anton';font-style:normal;font-weight:400;font-display:swap;
  src:url(fonts/anton-latin.woff2) format('woff2');
  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:'Archivo Black';font-style:normal;font-weight:400;font-display:swap;
  src:url(fonts/archivoblack-latin-ext.woff2) format('woff2');
  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:'Archivo Black';font-style:normal;font-weight:400;font-display:swap;
  src:url(fonts/archivoblack-latin.woff2) format('woff2');
  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:'Playfair Display';font-style:italic;font-weight:600;font-display:swap;
  src:url(fonts/playfair-italic-latin-ext.woff2) format('woff2');
  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:'Playfair Display';font-style:italic;font-weight:600;font-display:swap;
  src:url(fonts/playfair-italic-latin.woff2) format('woff2');
  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;}

/* Piekfijn Jobs · icoonset
   Vervangt de Tabler-webfont van jsDelivr. Die kostte een externe CSS van ruim 200 KB
   plus een woff2, voor de negen iconen die deze site werkelijk gebruikt. Zelfde
   klassenamen (.ti.ti-naam), dus geen enkele aanroep hoefde te veranderen.
   Iconen: Tabler Icons 3.0.0, MIT-licentie, https://tabler.io/icons
   Kleur volgt currentColor, grootte volgt font-size (1em), net als bij een icoonfont. */
.ti{display:inline-block;width:1em;height:1em;vertical-align:-.125em;flex:none;
    background-color:currentColor;
    -webkit-mask-position:center;mask-position:center;
    -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
    -webkit-mask-size:contain;mask-size:contain;}
.ti-arrow-up-right{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E %3Cpath d='M17 7l-10 10' /%3E %3Cpath d='M8 7l9 0l0 9' /%3E %3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E %3Cpath d='M17 7l-10 10' /%3E %3Cpath d='M8 7l9 0l0 9' /%3E %3C/svg%3E")}
.ti-player-play{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E %3Cpath d='M7 4v16l13 -8z' /%3E %3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E %3Cpath d='M7 4v16l13 -8z' /%3E %3C/svg%3E")}
.ti-menu-2{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E %3Cpath d='M4 6l16 0' /%3E %3Cpath d='M4 12l16 0' /%3E %3Cpath d='M4 18l16 0' /%3E %3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E %3Cpath d='M4 6l16 0' /%3E %3Cpath d='M4 12l16 0' /%3E %3Cpath d='M4 18l16 0' /%3E %3C/svg%3E")}
.ti-loader-2{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E %3Cpath d='M12 3a9 9 0 1 0 9 9' /%3E %3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E %3Cpath d='M12 3a9 9 0 1 0 9 9' /%3E %3C/svg%3E")}
.ti-device-mobile{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E %3Cpath d='M6 5a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v14a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2v-14z' /%3E %3Cpath d='M11 4h2' /%3E %3Cpath d='M12 17v.01' /%3E %3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E %3Cpath d='M6 5a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v14a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2v-14z' /%3E %3Cpath d='M11 4h2' /%3E %3Cpath d='M12 17v.01' /%3E %3C/svg%3E")}
.ti-camera-off{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E %3Cpath d='M8.297 4.289a.997 .997 0 0 1 .703 -.289h6a1 1 0 0 1 1 1a2 2 0 0 0 2 2h1a2 2 0 0 1 2 2v8m-1.187 2.828c-.249 .11 -.524 .172 -.813 .172h-14a2 2 0 0 1 -2 -2v-9a2 2 0 0 1 2 -2h1c.298 0 .58 -.065 .834 -.181' /%3E %3Cpath d='M10.422 10.448a3 3 0 1 0 4.15 4.098' /%3E %3Cpath d='M3 3l18 18' /%3E %3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E %3Cpath d='M8.297 4.289a.997 .997 0 0 1 .703 -.289h6a1 1 0 0 1 1 1a2 2 0 0 0 2 2h1a2 2 0 0 1 2 2v8m-1.187 2.828c-.249 .11 -.524 .172 -.813 .172h-14a2 2 0 0 1 -2 -2v-9a2 2 0 0 1 2 -2h1c.298 0 .58 -.065 .834 -.181' /%3E %3Cpath d='M10.422 10.448a3 3 0 1 0 4.15 4.098' /%3E %3Cpath d='M3 3l18 18' /%3E %3C/svg%3E")}
.ti-camera{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E %3Cpath d='M5 7h1a2 2 0 0 0 2 -2a1 1 0 0 1 1 -1h6a1 1 0 0 1 1 1a2 2 0 0 0 2 2h1a2 2 0 0 1 2 2v9a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-9a2 2 0 0 1 2 -2' /%3E %3Cpath d='M9 13a3 3 0 1 0 6 0a3 3 0 0 0 -6 0' /%3E %3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E %3Cpath d='M5 7h1a2 2 0 0 0 2 -2a1 1 0 0 1 1 -1h6a1 1 0 0 1 1 1a2 2 0 0 0 2 2h1a2 2 0 0 1 2 2v9a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-9a2 2 0 0 1 2 -2' /%3E %3Cpath d='M9 13a3 3 0 1 0 6 0a3 3 0 0 0 -6 0' /%3E %3C/svg%3E")}
.ti-alert-triangle{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E %3Cpath d='M12 9v4' /%3E %3Cpath d='M10.363 3.591l-8.106 13.534a1.914 1.914 0 0 0 1.636 2.871h16.214a1.914 1.914 0 0 0 1.636 -2.87l-8.106 -13.536a1.914 1.914 0 0 0 -3.274 0z' /%3E %3Cpath d='M12 16h.01' /%3E %3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E %3Cpath d='M12 9v4' /%3E %3Cpath d='M10.363 3.591l-8.106 13.534a1.914 1.914 0 0 0 1.636 2.871h16.214a1.914 1.914 0 0 0 1.636 -2.87l-8.106 -13.536a1.914 1.914 0 0 0 -3.274 0z' /%3E %3Cpath d='M12 16h.01' /%3E %3C/svg%3E")}
.ti-x{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E %3Cpath d='M18 6l-12 12' /%3E %3Cpath d='M6 6l12 12' /%3E %3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E %3Cpath d='M18 6l-12 12' /%3E %3Cpath d='M6 6l12 12' /%3E %3C/svg%3E")}
/* ============================================================
   Piekfijn Jobs — demo, verlof-shell (breed, zijbalk, kopjes)
   ============================================================ */
/* Lettergroottes staan in rem, niet in px (31-07). Wie in zijn systeem of browser
   grotere letters instelt, zag daar hiervoor niets van terug. 1rem = de lettergrootte
   die de gebruiker zelf heeft ingesteld, standaard 16px; alle 722 waarden zijn exact
   gedeeld door 16, dus op een standaardinstelling is er niets veranderd.
   Zet hier NOOIT een vaste font-size op html: dan negeer je de instelling alsnog.
   Afstanden, hoogtes en radii blijven bewust in px, zodat de indeling niet meeschuift. */
html{font-size:100%;}
/* Een <button> erft geen lettergrootte van de pagina: zonder eigen regel valt hij terug
   op de 13,333px van de browser zelf. Die waarde negeert zowel het ontwerp als de
   lettergrootte die de gebruiker heeft ingesteld. Hieronder de kleinste maat uit het
   schema, met opzet op elementniveau (specificiteit 0,0,1) zodat elke bestaande
   .knop-, .cbtn- of .pu-btn-regel er gewoon overheen blijft gaan. */
button,input,select,textarea{font-size:var(--t-sm,0.8125rem);}
:root {
  --zwart:#7342F4; --tekst:#1A1A1C; --tekst-zacht:#4E4E53; --tekst-licht:#6E6E73;
  --accent:#33363b; --accent-tint:#f1f2f0; --accent-rand:#dcdedb; --accent-tekst:#33363b; --accent-diep:#5c6066;
  --wit:#FFFFFF; --bg:linear-gradient(180deg,#FAFAFB 0%,#F3F4F6 100%);
  --lijn:#E8E8ED; --lijn-donker:#D2D2D7; --grijs-1:#F0F0F2;
  --schaduw:none;
  --radius:16px;
  --font:-apple-system,BlinkMacSystemFont,'SF Pro Text','Segoe UI',Roboto,'Helvetica Neue',sans-serif;

  /* ---- Ontwerpsysteem ----------------------------------------------------
     Vier hoekrondingen plus pill, in plaats van de 26 losse waardes die hier
     stonden. Diepte komt uit vlakcontrast en hairlines, niet uit schaduw:
     --schaduw is none en losse slagschaduwen zijn eruit gehaald.
     ------------------------------------------------------------------------ */
  --r-sm:8px;    /* chips, kleine vlakjes, iconen   (was 2-9px)   */
  --r-md:12px;   /* knoppen, velden, tegels          (was 10-13px) */
  --r-lg:16px;   /* kaarten                          (was 14-20px) */
  --r-xl:22px;   /* grote panelen, hero, modals      (was 22-40px) */
  --r-pill:999px;/* pills en ronde knoppen                        */

  /* Typografieschaal */
  --t-eyebrow:0.6875rem; --t-klein:0.78125rem; --t-body:0.875rem; --t-lead:1rem;
  --t-h3:1.125rem; --t-h2:1.375rem; --t-h1:1.75rem;
  --lh-strak:1.2; --lh-body:1.55;
  --ls-kop:-.03em; --ls-body:-.012em;
}
*{box-sizing:border-box;margin:0;padding:0;}
html,body{min-height:100%;}
body{font-family:var(--font);background:var(--bg);background-attachment:fixed;color:var(--tekst);font-size:0.9375rem;-webkit-font-smoothing:antialiased;line-height:1.5;}
button,input,select,textarea{font-family:inherit;} button{cursor:pointer;}
h1,h2,h3{font-weight:600;letter-spacing:-.022em;}
.icoon{width:20px;height:20px;flex-shrink:0;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}

/* ---------- App-shell ---------- */
.app{display:flex;min-height:100vh;}
.zijbalk{width:240px;background:rgba(255,255,255,.8);backdrop-filter:blur(20px);border-right:1px solid var(--lijn);
  display:flex;flex-direction:column;padding:28px 14px;position:sticky;top:0;height:100vh;flex-shrink:0;}
.zijbalk-sub{font-size:0.6875rem;color:var(--tekst-licht);padding:0 14px;text-transform:uppercase;letter-spacing:.08em;font-weight:600;margin-bottom:2px;}
.zijbalk-logo{font-weight:700;font-size:1.3125rem;letter-spacing:-.022em;padding:0 14px;margin-bottom:30px;}
.zijbalk-logo .punt{color:var(--accent);}
.zijbalk-nav{display:flex;flex-direction:column;gap:2px;}
.nav-knop{display:flex;align-items:center;gap:11px;width:100%;background:none;border:none;color:var(--tekst-zacht);
  padding:10px 14px;border-radius:var(--r-md);font-size:0.9375rem;font-weight:500;text-align:left;transition:background .12s,color .12s;}
.nav-knop:hover{background:rgba(0,0,0,.045);color:var(--tekst);}
.nav-knop.actief{background:var(--accent-tint);color:var(--accent-tekst);font-weight:600;}
.nav-tekst{display:inline;}
.zijbalk-onder{margin-top:auto;padding:0 14px;}
.zijbalk-gebruiker{font-size:0.8125rem;font-weight:600;}
.zijbalk-rol{font-size:0.75rem;color:var(--tekst-licht);margin-bottom:12px;}
.knop-uitloggen{background:none;border:1px solid var(--lijn-donker);color:var(--tekst-zacht);padding:8px 14px;border-radius:var(--r-pill);font-size:0.8125rem;width:100%;}

.inhoud{flex:1;padding:44px 56px 72px;max-width:1180px;}
.pagina-kop{display:flex;align-items:center;justify-content:space-between;margin-bottom:28px;flex-wrap:wrap;gap:14px;}
.pagina-kop h1{font-size:1.625rem;}
.screen{display:none;} .screen.actief{display:block;animation:fade .25s ease;}
@keyframes fade{from{opacity:0;transform:translateY(4px);}to{opacity:1;transform:none;}}

/* ---------- Knoppen ---------- */
.knop{display:inline-flex;align-items:center;justify-content:center;gap:7px;background:linear-gradient(180deg,#EFF4F1 0%,var(--accent-tint) 100%);
  color:var(--accent-tekst);border:1px solid var(--accent-rand);padding:11px 22px;border-radius:var(--r-pill);font-weight:500;font-size:0.875rem;
  box-shadow:none;transition:filter .15s;min-height:44px;}
.knop:hover{filter:brightness(.97);}
.knop--vol{width:100%;padding:13px;font-size:0.9375rem;}
.knop-stil{background:var(--wit);border:1px solid var(--lijn-donker);color:var(--tekst);padding:10px 20px;border-radius:var(--r-pill);font-weight:500;font-size:0.875rem;min-height:44px;display:inline-flex;align-items:center;justify-content:center;}
.knop-stil:hover{border-color:var(--zwart);}
.switch{display:inline-flex;gap:3px;background:var(--grijs-1);border-radius:var(--r-pill);padding:3px;}
.switch button{background:none;border:none;font-size:0.8125rem;font-weight:500;color:var(--tekst-zacht);padding:7px 16px;border-radius:var(--r-pill);}
.switch button.actief{background:var(--wit);color:var(--tekst);box-shadow:none;}

/* ---------- Stat-kaarten ---------- */
.saldo-rij{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;margin-bottom:28px;}
.saldo-kaart{background:var(--wit);border:1px solid var(--lijn);border-radius:var(--radius);padding:20px;box-shadow:var(--schaduw);}
.saldo-kaart.accent{background:var(--accent-tint);border-color:var(--accent-rand);}
.saldo-label{font-size:0.8125rem;font-weight:500;color:var(--tekst-zacht);margin-bottom:10px;}
.saldo-getal{font-size:1.5rem;font-weight:600;letter-spacing:-.02em;line-height:1.1;}
.saldo-detail{font-size:0.8125rem;color:var(--tekst-zacht);margin-top:8px;}

/* ---------- Panelen / lijsten ---------- */
.paneel{background:var(--wit);border:1px solid var(--lijn);border-radius:var(--radius);overflow:hidden;margin-bottom:28px;box-shadow:var(--schaduw);}
.paneel-kop{padding:16px 22px;border-bottom:1px solid var(--lijn);font-weight:600;font-size:0.9375rem;display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;}
.rij{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:16px 22px;border-bottom:1px solid var(--lijn);}
.rij:last-child{border-bottom:none;}
.rij:hover{background:#FAFAFC;}
.rij .titel{font-size:0.9375rem;font-weight:500;margin-bottom:8px;}
.metas{display:flex;gap:7px;flex-wrap:wrap;}
.meta{font-size:0.8125rem;font-weight:500;padding:4px 12px;border-radius:var(--r-pill);background:var(--grijs-1);color:var(--tekst-zacht);}
.filters{display:flex;gap:8px;margin-bottom:20px;flex-wrap:wrap;}
/* Squircle, nooit rond. Geldt voor elke Piekfijn-knop. */
.chip{font-size:0.8125rem;font-weight:500;padding:7px 15px;border-radius:var(--r-md);background:var(--wit);color:var(--tekst);border:1px solid var(--lijn-donker);}
.chip.actief{background:var(--accent-tint);color:var(--accent-tekst);border-color:var(--accent-rand);}

/* ---------- App-icoontjes (modern, 3D-vibe) ---------- */
.appicon{width:46px;height:46px;flex-shrink:0;}

/* ---------- Tegels ---------- */
.tegels{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;}
.tegel{background:var(--wit);border:1px solid var(--lijn);border-radius:var(--radius);padding:18px;box-shadow:var(--schaduw);display:flex;gap:14px;align-items:center;text-align:left;}
.tegel .lab{font-size:0.8125rem;color:var(--tekst-zacht);}
.tegel .val{font-size:1.0625rem;font-weight:600;letter-spacing:-.015em;margin-top:1px;}
.tegel .hint{font-size:0.75rem;color:var(--tekst-licht);margin-top:2px;}

/* ---------- Tracker ---------- */
.stap{display:flex;gap:14px;}
.stap .col{display:flex;flex-direction:column;align-items:center;}
.stap .bol{width:26px;height:26px;border-radius:var(--r-pill);background:var(--wit);border:1px solid var(--lijn-donker);display:flex;align-items:center;justify-content:center;font-size:0.875rem;color:#fff;}
.stap.done .bol{background:var(--accent);border-color:var(--accent);}
.stap.nu .bol{border:2px solid var(--accent);}
.stap.nu .bol::after{content:'';width:8px;height:8px;border-radius:var(--r-pill);background:var(--accent);}
.stap .lijn{width:2px;flex:1;min-height:20px;background:var(--lijn);margin:3px 0;}
.stap.done .lijn{background:var(--accent);}
.stap .inhoud{flex:1;padding-bottom:18px;}
.stap .st-titel{font-size:0.9375rem;font-weight:500;}
.stap.nu .st-titel{color:var(--accent-tekst);font-weight:600;}
.stap.toekomst .st-titel{color:var(--tekst-licht);}
.stap .st-sub{font-size:0.8125rem;color:var(--tekst-licht);margin-top:2px;}
.stap .mini{margin-top:11px;}

/* ---------- Flow-kaart (apply / training / video) ---------- */
.flow-wrap{max-width:520px;}
.kaart-flow{background:var(--wit);border:1px solid var(--lijn);border-radius:var(--r-lg);box-shadow:var(--schaduw);padding:24px;}
.voortgang{height:6px;border-radius:var(--r-pill);background:var(--grijs-1);overflow:hidden;margin-bottom:8px;}
.voortgang span{display:block;height:100%;background:var(--accent);border-radius:var(--r-pill);transition:width .3s;}
.stap-tel{font-size:0.8125rem;color:var(--tekst-licht);font-weight:500;margin-bottom:22px;}
.vraag{font-size:1.3125rem;font-weight:500;letter-spacing:-.015em;line-height:1.3;margin-bottom:20px;}
.veld input{width:100%;padding:13px 15px;border:1px solid var(--lijn-donker);border-radius:var(--r-md);font-size:0.9375rem;color:var(--tekst);margin-bottom:24px;}
.veld input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-tint);}
.apply-fout{margin:8px 0 0;font-size:0.8125rem;color:var(--k-rood);}
/* Vermoedelijke typefout in het maildomein. Bewust geen foutkleur: het is een
   vraag, geen afkeuring, en het adres kan gewoon kloppen. */
.apply-sug{margin:9px 0 0;font-size:0.8125rem;color:var(--tekst-zacht);display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;}
.apply-sug .sug-vraag{display:inline-flex;align-items:center;gap:6px;}
.apply-sug .sug-ja{font:inherit;font-weight:600;color:var(--accent-tekst);background:var(--accent-tint);
  border:1px solid var(--accent-rand);border-radius:var(--r-sm);padding:7px 11px;cursor:pointer;}
.apply-sug .sug-nee{font:inherit;color:var(--tekst-zacht);background:none;border:0;padding:7px 2px;
  text-decoration:underline;text-underline-offset:2px;cursor:pointer;}
/* Melding onderin als de verbinding wegvalt. Onder de veilige zone blijven,
   anders valt hij op een iPhone achter de home-indicator. */
.pu-offline{position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));
  z-index:9999;background:var(--zwart);color:#fff;border-radius:var(--r-md);
  padding:13px 16px;font-size:0.8125rem;line-height:1.45;box-shadow:0 8px 30px rgba(0,0,0,.22);
  max-width:520px;margin:0 auto;}
/* Zichtbare focus in de aanmeldkaart. Zonder dit tab je er blind doorheen. */
#apply-kaart button:focus-visible,#apply-kaart input:focus-visible,
#apply-kaart textarea:focus-visible,#apply-kaart select:focus-visible{
  outline:2px solid var(--zwart);outline-offset:2px;}
.opties{display:flex;flex-direction:column;gap:10px;margin-bottom:22px;}
.optie{display:flex;align-items:center;gap:12px;border:1px solid var(--lijn-donker);border-radius:var(--r-lg);padding:14px 16px;font-size:0.9375rem;background:var(--wit);text-align:left;width:100%;}
.optie .bol{width:18px;height:18px;border-radius:var(--r-pill);border:1px solid #C7C7CC;flex-shrink:0;}
.optie.gekozen{border-color:var(--accent-rand);background:var(--accent-tint);color:var(--accent-tekst);font-weight:500;}
.optie.gekozen .bol{border:5px solid var(--accent);}
.optie.fout{border-color:var(--k-rood-pastel);background:var(--k-rood-zacht);color:var(--k-rood);}
.flow-knoppen{display:flex;align-items:center;gap:10px;}
.flow-knoppen .knop{flex:1;}
.center{text-align:center;}
.klaar-ic{margin:8px auto 18px;}

/* ---------- Training-foto ---------- */
.train-foto{width:100%;height:180px;border-radius:var(--r-lg);object-fit:cover;margin-bottom:18px;display:block;background:#dfe3e0;}
.train-top{display:flex;align-items:center;gap:12px;margin-bottom:6px;}
.train-top .voortgang{flex:1;margin:0;}
.cat{font-size:0.6875rem;font-weight:500;padding:4px 11px;border-radius:var(--r-pill);background:var(--accent-tint);color:var(--accent-tekst);white-space:nowrap;}
.feedback{background:var(--accent-tint);border:1px solid var(--accent-rand);border-radius:var(--r-lg);padding:14px 16px;margin-bottom:16px;display:none;}
.feedback.toon{display:block;}
.feedback .fk{font-size:0.8125rem;font-weight:600;color:var(--accent-tekst);margin-bottom:6px;}
.feedback p{font-size:0.8125rem;color:var(--accent-tekst);}

/* ---------- Videovragen ---------- */
.video-vraagblok{display:flex;gap:12px;align-items:flex-start;background:var(--grijs-1);border-radius:var(--r-lg);padding:14px 16px;margin-bottom:16px;}
.video-vraagblok .av{width:40px;height:40px;border-radius:var(--r-md);background:var(--accent-tint);display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--accent);font-weight:600;}
.video-vraagblok .vv-label{font-size:0.75rem;color:var(--tekst-licht);}
.video-vraagblok .vv-tekst{font-size:0.9375rem;font-weight:500;margin-top:2px;}
.opname{position:relative;border-radius:var(--r-lg);overflow:hidden;background:#2A2E2C;aspect-ratio:16/10;display:flex;align-items:center;justify-content:center;margin-bottom:16px;
  background-image:linear-gradient(160deg,#3a423e,#232826);}
.opname .rec{position:absolute;top:12px;left:12px;display:flex;align-items:center;gap:6px;color:#fff;font-size:0.75rem;font-weight:500;background:rgba(0,0,0,.35);padding:4px 10px;border-radius:var(--r-pill);}
.opname .rec i{width:8px;height:8px;border-radius:var(--r-pill);background:var(--k-rood);display:inline-block;}
.opname .opnameknop{width:60px;height:60px;border-radius:var(--r-lg);background:#fff;border:4px solid rgba(255,255,255,.5);display:flex;align-items:center;justify-content:center;}
.opname .opnameknop span{width:22px;height:22px;border-radius:var(--r-sm);background:var(--k-rood);}
.video-acties{display:flex;gap:10px;}
.video-acties .knop-stil,.video-acties .knop{flex:1;}

/* ============================================================
   MOBIEL — tabbalk onderaan, brede layout valt weg
   ============================================================ */
@media (max-width:860px){
  .app{flex-direction:column;}
  .zijbalk{position:sticky;top:0;z-index:30;width:100%;height:auto;flex-direction:row;align-items:center;gap:8px 10px;flex-wrap:wrap;
    padding:calc(env(safe-area-inset-top) + 11px) 16px 11px;border-right:none;border-bottom:1px solid var(--lijn);background:rgba(255,255,255,.86);}
  .zijbalk-logo{font-size:1.0625rem;margin:0;flex:1;}
  .zijbalk-sub,.zijbalk-gebruiker,.zijbalk-rol{display:none;}
  .zijbalk-onder{margin:0;padding:0;}
  .zijbalk-onder .knop-uitloggen{width:auto;padding:8px 12px;font-size:0.8125rem;}
  .zijbalk-nav{position:fixed;left:0;right:0;bottom:0;z-index:40;flex-direction:row;gap:2px;
    padding:7px 6px calc(env(safe-area-inset-bottom) + 7px);background:rgba(255,255,255,.93);backdrop-filter:blur(22px);border-top:1px solid var(--lijn);}
  .nav-knop{flex:1 1 0;min-width:0;flex-direction:column;gap:3px;justify-content:center;align-items:center;text-align:center;padding:5px 2px;border-radius:var(--r-md);}
  .nav-knop:hover{background:none;}
  .nav-tekst{font-size:0.6875rem;line-height:1.1;}
  .inhoud{padding:22px 18px calc(env(safe-area-inset-bottom) + 96px);max-width:none;}
  /* De video-sollicitatie heeft een eigen kop, de portal-balk erboven werkt tegen. */
  body.in-video .zijbalk{display:none;}
  body.in-video .inhoud{padding-left:0;padding-right:0;padding-top:0;}
  .pagina-kop h1{font-size:1.375rem;}
  .saldo-rij{grid-template-columns:1fr 1fr;}
  .flow-wrap{max-width:none;}
}

/* ============================================================
   PUBLIEKE CAREERS-SITE (zonder login)
   ============================================================ */
.pub-top{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:16px;
  padding:15px 32px;background:rgba(255,255,255,.82);backdrop-filter:blur(20px);border-bottom:1px solid var(--lijn);}
/* Logo is een knop naar de homepage; oogt als tekst, gedraagt zich als link. */
.pub-top .logo{font-weight:700;font-size:1.1875rem;letter-spacing:-.022em;background:none;border:none;padding:0;font-family:inherit;color:var(--tekst);cursor:pointer;min-height:44px;display:inline-flex;align-items:center;}
.pub-top .logo:hover{opacity:.72;}
.pub-top .logo .punt{color:var(--accent);}
.pub-top .rechts{margin-left:auto;display:flex;align-items:center;gap:12px;}
.pub-main{max-width:1200px;margin:0 auto;padding:0 32px 90px;}

/* Hero */
.hero{position:relative;overflow:hidden;border-radius:var(--r-xl);padding:64px 48px 56px;margin:30px 0 26px;
  background:linear-gradient(165deg,#EFF3F1 0%,#E7EEEA 55%,#E4EBF0 100%);border:1px solid var(--lijn);}
.hero .blob{position:absolute;border-radius:var(--r-pill);filter:blur(46px);opacity:.55;z-index:0;}
.hero .blob.b1{width:300px;height:300px;background:#BcD3C7;top:-90px;right:-40px;}
.hero .blob.b2{width:240px;height:240px;background:#cfe0d6;bottom:-110px;left:30%;opacity:.45;}
.hero .inner{position:relative;z-index:1;max-width:640px;}
.hero .eyebrow{font-size:0.8125rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--accent-diep);margin-bottom:14px;}
.hero h1{font-size:2.625rem;line-height:1.05;letter-spacing:-.03em;margin-bottom:16px;}
.hero p.lead{font-size:1.0625rem;color:var(--tekst-zacht);max-width:520px;margin-bottom:26px;line-height:1.55;}
.hero .zoek{display:flex;gap:10px;max-width:480px;}
.hero .zoek input{flex:1;padding:14px 18px;border:1px solid var(--lijn-donker);border-radius:var(--r-pill);background:rgba(255,255,255,.9);font-size:0.9375rem;}
.hero .zoek input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-tint);}
.hero .avatars{display:flex;align-items:center;gap:10px;margin-top:26px;}
.hero .avatars .stapel{display:flex;}
.hero .avatars .stapel span{width:34px;height:34px;border-radius:var(--r-md);border:2px solid #fff;margin-left:-10px;background:linear-gradient(160deg,#9fb6aa,#6e8c7c);}
.hero .avatars .stapel span:first-child{margin-left:0;}
.hero .avatars small{font-size:0.8125rem;color:var(--tekst-zacht);}

/* Sectie-kop */
.sectie{margin:42px 0 18px;}
.sectie h2{font-size:1.3125rem;letter-spacing:-.02em;}
.sectie .sub{font-size:0.875rem;color:var(--tekst-zacht);margin-top:4px;}

/* Stats */
.stats-rij{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;}
.statkaart{background:var(--wit);border:1px solid var(--lijn);border-radius:var(--radius);padding:20px;box-shadow:var(--schaduw);}
.statkaart .g{font-size:1.75rem;font-weight:600;letter-spacing:-.02em;}
.statkaart .l{font-size:0.8125rem;color:var(--tekst-zacht);margin-top:4px;}

/* Categorieën */
.cats{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;}
.catkaart{display:flex;align-items:center;gap:14px;background:var(--wit);border:1px solid var(--lijn);border-radius:var(--radius);padding:18px;box-shadow:var(--schaduw);text-align:left;transition:transform .12s,border-color .12s;}
.catkaart:hover{transform:translateY(-2px);border-color:var(--accent-rand);}
.catkaart .t{font-size:0.9375rem;font-weight:500;}
.catkaart .c{font-size:0.8125rem;color:var(--tekst-licht);margin-top:2px;}

/* Vacaturekaarten (clean, hele kaart klikbaar) */
.home-jobs{display:flex;flex-direction:column;gap:12px;}
.jobkaart{display:flex;align-items:center;gap:16px;background:var(--wit);border:1px solid var(--lijn);border-radius:var(--radius);
  padding:18px 22px;box-shadow:var(--schaduw);text-align:left;width:100%;transition:transform .12s,border-color .12s;}
.jobkaart:hover{transform:translateY(-2px);border-color:var(--accent-rand);}
.jobkaart .body{flex:1;}
.jobkaart .titel{font-size:1rem;font-weight:500;letter-spacing:-.01em;margin-bottom:9px;}
.jobkaart .pijl{color:var(--accent);flex-shrink:0;}

/* Waarom Piekfijn */
.waarom{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;}
.voordeel{background:var(--wit);border:1px solid var(--lijn);border-radius:var(--radius);padding:20px;box-shadow:var(--schaduw);}
.voordeel .t{font-size:0.9375rem;font-weight:500;margin:12px 0 5px;}
.voordeel p{font-size:0.8125rem;color:var(--tekst-zacht);line-height:1.5;}

/* Social strip */
.social{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;}
.social .tegel-foto{aspect-ratio:1;border-radius:var(--r-lg);background:linear-gradient(160deg,#c9d3cd,#e6ebe8);position:relative;overflow:hidden;}
.social .tegel-foto::after{content:'@piekfijn';position:absolute;left:10px;bottom:8px;font-size:0.6875rem;color:#4a6555;font-weight:500;}

/* Footer */
.pub-footer{margin-top:54px;padding-top:24px;border-top:1px solid var(--lijn);display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:0.8125rem;color:var(--tekst-licht);}

@media (max-width:860px){
  .pub-top{padding:13px 18px;}
  .pub-main{padding:0 18px 70px;}
  .hero{padding:40px 24px 36px;border-radius:var(--r-lg);margin:18px 0;}
  .hero h1{font-size:1.875rem;}
  .hero p.lead{font-size:0.9375rem;}
  .hero .zoek{flex-direction:column;}
  .hero .zoek .knop{width:100%;}
}

/* ============================================================
   VISUELE UPGRADE v4 — meer diepte, kleur, vectors (overrides)
   ============================================================ */
.appicon{filter:drop-shadow(0 6px 12px rgba(74,101,85,.28));}

/* Hero: salie-gradient + 3D-vormen + witte tekst */
.hero{background:linear-gradient(150deg,#6E8C7C 0%,#4E6A58 55%,#3C5446 100%);border:none;color:#fff;padding:72px 48px 64px;}
.hero .eyebrow{color:rgba(255,255,255,.82);}
.hero h1{color:#fff;font-size:2.875rem;}
.hero p.lead{color:rgba(255,255,255,.86);}
.hero .zoek input{background:rgba(255,255,255,.95);border:1px solid transparent;}
.hero .zoek .knop{background:#fff;color:#3E5A4A;border:1px solid #fff;}
.hero .avatars small{color:rgba(255,255,255,.82);}
.hero .avatars .stapel span{border-color:#46604f;background:linear-gradient(160deg,#d6e2db,#9fb6aa);}
.hero-shapes{position:absolute;inset:0;overflow:hidden;z-index:0;}
.hsp{position:absolute;border-radius:var(--r-xl);background:linear-gradient(160deg,rgba(255,255,255,.38),rgba(255,255,255,.04));box-shadow:none;}
.hsp.s1{width:170px;height:170px;right:64px;top:36px;transform:rotate(16deg);}
.hsp.s2{width:120px;height:120px;right:200px;bottom:26px;transform:rotate(-12deg);opacity:.75;}
.hsp.s3{width:96px;height:96px;border-radius:var(--r-pill);right:34px;bottom:64px;background:radial-gradient(circle at 34% 28%,#e7efe9,#6e8c7c);box-shadow:none;}

/* Stat-kaarten: zachte gradient + icoon-badge */
.statkaart{background:linear-gradient(165deg,#FFFFFF 0%,#F1F5F3 100%);display:flex;align-items:center;gap:14px;}
.statkaart .g{font-size:1.5rem;}
.statkaart .l{margin-top:2px;}

/* Categorie-icoon iets groter */
.catkaart .appicon{width:44px;height:44px;}

/* Feature-kaarten (Elevate-stijl: kleur / donker / licht + vector + nummer) */
.features{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;}
.fcard{border-radius:var(--r-lg);padding:22px;min-height:236px;display:flex;flex-direction:column;justify-content:space-between;box-shadow:var(--schaduw);}
.fcard .num{font-size:0.75rem;font-weight:600;letter-spacing:.06em;opacity:.65;}
.fcard h3{font-size:1.125rem;margin-top:14px;}
.fcard p{font-size:0.8125rem;margin-top:6px;line-height:1.5;}
.fcard.kleur{background:linear-gradient(160deg,#6E8C7C,#46604F);color:#fff;}
.fcard.donker{background:#1D1D1F;color:#fff;}
.fcard.licht{background:#fff;border:1px solid var(--lijn);color:var(--tekst);}
.fcard.kleur p,.fcard.donker p{color:rgba(255,255,255,.82);}
.fcard.licht p{color:var(--tekst-zacht);}

/* Logo-strip */
.logos-sectie{margin-top:30px;text-align:center;}
.logos-label{font-size:0.75rem;text-transform:uppercase;letter-spacing:.08em;color:var(--tekst-licht);font-weight:600;}
.logos{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:34px;margin-top:16px;opacity:.7;}
.logos svg{height:26px;width:auto;color:var(--tekst-zacht);}

@media (max-width:860px){
  .hero h1{font-size:1.875rem;}
  .hsp.s1{width:110px;height:110px;right:-10px;top:auto;bottom:-20px;opacity:.6;}
  .hsp.s2,.hsp.s3{display:none;}
  .logos{gap:22px;}
}

/* ============================================================
   v5 — Piekfijn-merk (geel/charcoal/grijs), Apple-rustig + awsmd-diepte (PUBLIEK)
   ============================================================ */
:root{--geel:#C2FFAD;--geel-diep:#C2FFAD;--inkt:#6836E6;--inkt-2:#7E4EF6;}
/* ACCENTPALET · vastgelegd 25-08-2026. Zelfde zes kleuren als in de admin, zodat de
   careersite, de portal en de achterkant dezelfde taal spreken. Basis blijft antraciet
   en limoen; dit zijn de accenten daarbovenop.

   Drie niveaus, elk met een vaste taak:
     --k-X          tekst, icoon, stip, dunne lijn. Nooit een groot vlak.
     --k-X-zacht    het vlak zelf. Bijna wit, met een zweem kleur.
     --k-X-pastel   de rand om dat vlak, en de vulling van een staaf.
   De hoek komt van de Apple-systeemkleuren, de verzadiging niet: #FF9500 en familie
   zijn iconkleuren voor op wit en werden modderig zodra ze een vlak moesten vullen.
   Tekst op het eigen -zacht haalt overal minimaal 4,5:1.
   Roze is er niet meer, die verschilde nauwelijks van rood. Groen is ervoor in de
   plaats gekomen, want goed-en-fout had geen eigen kleur. */
:root{
  --k-blauw:#2C6CB8;    --k-blauw-zacht:#E9F1FC;  --k-blauw-pastel:#C3DBF8;
  --k-paars:#6250C4;    --k-paars-zacht:#F0EDFC;  --k-paars-pastel:#D6CDF6;
  --k-groen:#2B7449;    --k-groen-zacht:#E7F5EC;  --k-groen-pastel:#C2E3CE;
  --k-oranje:#96631C;   --k-oranje-zacht:#FCF2E2; --k-oranje-pastel:#F1DCB6;
  --k-rood:#B94238;     --k-rood-zacht:#FCEBE9;   --k-rood-pastel:#F4CBC6;
  --k-neutraal:#5F5F66; --k-neutraal-zacht:#F4F4F6; --k-neutraal-pastel:#DEDEE2;
}
.appicon{filter:drop-shadow(0 6px 12px rgba(20,24,22,.22));}
#public-shell .knop{background:var(--geel);color:#1A1A1A;border:1px solid var(--geel);}
#public-shell .knop:hover{filter:brightness(.96);}

/* Hero: charcoal + geel accent */
.hero{background:var(--inkt);color:#fff;border:none;}
.hero .eyebrow{color:var(--geel);}
.hero h1{color:#fff;font-size:3rem;}
.hero p.lead{color:rgba(255,255,255,.72);}
.hero .zoek input{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);color:#fff;}
.hero .zoek input::placeholder{color:rgba(255,255,255,.5);}
.hero .zoek .knop{background:var(--geel);color:#1A1A1A;}
.hero .avatars small{color:rgba(255,255,255,.72);}
.hero .avatars .stapel span{border-color:var(--inkt);background:linear-gradient(160deg,#5b5f63,#2a2d31);}
.hsp{background:linear-gradient(160deg,rgba(255,255,255,.14),rgba(255,255,255,.02));box-shadow:none;}
.hsp.s3{background:radial-gradient(circle at 34% 28%,var(--geel),#b88f12);opacity:.92;}

/* Donkere band (Waarom Piekfijn) — awsmd-ritme */
.dark-band{background:var(--inkt);border-radius:var(--r-xl);padding:34px 30px;margin:44px 0 0;}
.dark-band h2{color:#fff;margin-bottom:18px;}
.dark-band .features{margin:0;}
.fcard.geel{background:var(--geel);color:#1A1A1A;}
.fcard.geel .num{opacity:.55;}
.fcard.geel p{color:rgba(0,0,0,.7);}
.fcard.donker{background:var(--inkt-2);color:#fff;}
.fcard.licht{background:#fff;color:var(--tekst);}

/* Rijke vacaturepagina */
.dethero{position:relative;border-radius:var(--r-xl);overflow:hidden;min-height:280px;background:linear-gradient(155deg,#2a2d31,#161819);display:flex;align-items:flex-end;padding:30px;margin:14px 0 22px;}
.dethero .deco{position:absolute;right:-30px;top:-40px;width:260px;height:260px;border-radius:var(--r-pill);background:radial-gradient(circle at 35% 30%,rgba(255,203,45,.45),transparent 70%);}
.dethero .ov{position:relative;z-index:1;}
.dethero h1{color:#fff;font-size:2.125rem;letter-spacing:-.025em;margin-bottom:12px;}
.dethero .metas .meta{background:rgba(255,255,255,.16);color:#fff;}
.det-grid{max-width:760px;}
.benefits{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;}
.benefit{display:flex;gap:12px;align-items:center;background:var(--wit);border:1px solid var(--lijn);border-radius:var(--r-lg);padding:13px 15px;box-shadow:var(--schaduw);}
.benefit .bt{font-size:0.875rem;font-weight:500;}
.locatie{display:flex;gap:0;background:var(--wit);border:1px solid var(--lijn);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--schaduw);}
.locatie .kaartje{width:170px;flex-shrink:0;background:linear-gradient(160deg,#dfe7e2,#eef1ef);position:relative;}
.locatie .kaartje::after{content:'';position:absolute;left:50%;top:50%;width:16px;height:16px;border-radius:var(--r-pill) 50% 50% 0;transform:translate(-50%,-65%) rotate(-45deg);background:var(--geel);box-shadow:0 0 0 5px rgba(255,203,45,.3);}
.locatie .info{padding:18px 20px;}
.galerij{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px;}
.galerij .g{aspect-ratio:4/3;border-radius:var(--r-md);background:linear-gradient(160deg,#cdd6d0,#e9ecea);}
.det-cta{position:sticky;bottom:16px;margin-top:18px;}

@media (max-width:860px){
  .hero h1{font-size:2rem;}
  .dethero h1{font-size:1.625rem;}
  .locatie{flex-direction:column;}
  .locatie .kaartje{width:100%;height:120px;}
}

/* ============================================================
   v6 — beweging + echte foto's (awsmd-flex)
   ============================================================ */
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes scrollx{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.hsp{animation:floaty 6s ease-in-out infinite;}
.hsp.s2{animation-duration:7.5s;}
.hsp.s3{animation-duration:5s;}
.tekst-foto{display:inline-block;vertical-align:middle;width:108px;height:58px;border-radius:var(--r-xl);object-fit:cover;margin:0 8px;box-shadow:none;animation:floaty 5s ease-in-out infinite;}

/* Foto-marquee (Instagram-strip die beweegt) */
.social{display:block;overflow:hidden;position:relative;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);}
.marquee-track{display:flex;gap:14px;width:max-content;animation:scrollx 38s linear infinite;}
.social:hover .marquee-track{animation-play-state:paused;}
.marquee-track .foto{width:248px;height:160px;border-radius:var(--r-lg);object-fit:cover;flex-shrink:0;}

/* Logo-marquee */
.logos{display:block;overflow:hidden;opacity:.85;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);}
.logo-track{display:flex;align-items:center;gap:64px;width:max-content;animation:scrollx 42s linear infinite;}
.logo-track svg{height:26px;width:auto;flex-shrink:0;color:var(--tekst-zacht);}

/* Vacaturekaart-thumbnail + hover-zoom */
.jobkaart .thumb{width:66px;height:66px;border-radius:var(--r-md);object-fit:cover;flex-shrink:0;}
.galerij .g{overflow:hidden;padding:0;}
.galerij .g img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .45s ease;}
.galerij .g:hover img{transform:scale(1.07);}

/* Detail-hero met foto + leesbare overlay */
.dethero{background-size:cover;background-position:center;}

/* ============================================================
   v7 — hero met sfeerfoto + fallback-onderlagen (nooit lege gaten)
   ============================================================ */
.hero{position:relative;overflow:hidden;}
.hero .inner{max-width:520px;position:relative;z-index:2;}
.hero-foto{position:absolute;right:22px;top:22px;bottom:22px;width:40%;border-radius:var(--r-lg);overflow:hidden;z-index:1;
  background:linear-gradient(160deg,#3a4f44,#1f2a24);box-shadow:none;}
.hero-foto img{width:100%;height:100%;object-fit:cover;display:block;}
.hero-foto::after{content:'';position:absolute;inset:0;background:linear-gradient(110deg,rgba(30,33,37,.75),rgba(30,33,37,0) 55%);}
.hero-foto .bol{position:absolute;left:-26px;bottom:34px;width:80px;height:80px;border-radius:var(--r-pill);z-index:2;
  background:radial-gradient(circle at 34% 28%,#FFD86A,#E9B41C);box-shadow:none;animation:floaty 5s ease-in-out infinite;}

/* Fallback-onderlaag: als een foto niet laadt, zie je een nette gradient i.p.v. niets */
.thumb,.marquee-track .foto{background:linear-gradient(160deg,#cdd6d0,#e9ecea);}
.galerij .g{background:linear-gradient(160deg,#cdd6d0,#e9ecea);}
.dethero{background-color:#1f2a24;}

@media (max-width:900px){
  .hero-foto{display:none;}
  .hero .inner{max-width:none;}
}

/* ============================================================
   v8 — awsmd-stijl homepage (pill-header, groot hero, donkere klussen, blogs)
   ============================================================ */
.pub-top{position:relative;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:16px 30px;}
.pub-top .logo{justify-self:start;}
.pub-top .rechts{justify-self:end;}
.navpill{justify-self:center;display:flex;gap:4px;background:#fff;border:1px solid var(--lijn);border-radius:var(--r-pill);padding:5px;box-shadow:var(--schaduw);}
.navpill a{font-size:0.875rem;font-weight:500;color:var(--tekst);padding:8px 17px;border-radius:var(--r-pill);cursor:pointer;}
.navpill a:hover,.navpill a.act{background:#6836E6;color:#fff;}
.hamburger{display:none;background:none;border:none;padding:0;cursor:pointer;color:var(--tekst);line-height:0;width:44px;height:44px;align-items:center;justify-content:center;}
.hamburger i{font-size:1.375rem;}
.mobielmenu{display:none;flex-direction:column;position:absolute;top:100%;left:0;right:0;background:#fff;border-top:1px solid var(--lijn);border-bottom:1px solid var(--lijn);box-shadow:var(--schaduw);padding:6px 30px 10px;z-index:40;}
.mobielmenu a{font-size:0.9375rem;font-weight:500;color:var(--tekst);padding:13px 4px;border-bottom:1px solid var(--lijn);cursor:pointer;}
.mobielmenu a:last-child{border-bottom:none;}
.mobielmenu a.act{color:#1A1A1A;font-weight:600;}

/* Hero */
.ahero{position:relative;overflow:hidden;border-radius:var(--r-xl);margin:14px 0 0;padding:52px 44px 40px;min-height:500px;
  background:radial-gradient(130% 120% at 80% 6%, #EEE9F6 0%, #ECEAF3 34%, #F1F1F3 64%, #F6F6F7 100%);
  display:flex;flex-direction:column;justify-content:flex-end;}
.ahero .reel{position:absolute;right:34px;top:38px;width:44%;max-width:520px;height:300px;border-radius:var(--r-lg);overflow:hidden;
  box-shadow:none;background:linear-gradient(160deg,#cdd6d0,#e9ecea);}
.ahero .reel img{width:100%;height:100%;object-fit:cover;display:block;}
.ahero .eyebrow{font-size:0.8125rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--accent-diep);margin-bottom:14px;position:relative;z-index:2;}
.ahero h1{font-size:4.625rem;line-height:.94;letter-spacing:-.04em;font-weight:700;color:#1b1b24;max-width:13ch;margin-bottom:22px;position:relative;z-index:2;}
.ahero .lead{font-size:1.0625rem;color:#5b5b6b;max-width:460px;margin-bottom:24px;line-height:1.5;position:relative;z-index:2;}
.ahero-cta{display:flex;align-items:center;gap:16px;position:relative;z-index:2;}
.play{width:60px;height:60px;border-radius:var(--r-lg);background:var(--geel);border:none;display:flex;align-items:center;justify-content:center;box-shadow:none;cursor:pointer;}
.rating{display:flex;align-items:center;gap:10px;margin-top:24px;position:relative;z-index:2;}
.sterren{color:var(--geel);letter-spacing:2px;font-size:0.9375rem;}

/* Donkere klussen-sectie */
.acases{background:#6836E6;border-radius:var(--r-xl);margin:18px 0 0;padding:42px 36px;color:#fff;}
.acases .kop{margin-bottom:26px;}
.acases .eyebrow{color:rgba(255,255,255,.5);font-size:0.8125rem;text-transform:uppercase;letter-spacing:.06em;margin-bottom:8px;}
.acases h2{color:#fff;font-size:2.125rem;letter-spacing:-.03em;}
.acards{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;}
.acard{text-align:left;background:none;border:none;cursor:pointer;padding:0;}
.acard .img{aspect-ratio:4/3;border-radius:var(--r-lg);overflow:hidden;background:linear-gradient(160deg,#2a2d31,#1a1c1e);}
.acard .img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease;}
.acard:hover .img img{transform:scale(1.05);}
.acard h3{color:#fff;font-size:1.125rem;letter-spacing:-.01em;margin:16px 0 9px;}
.acard .metas .meta{background:rgba(255,255,255,.12);color:#fff;}
.acard p{color:rgba(255,255,255,.6);font-size:0.875rem;margin-top:10px;line-height:1.5;}
.acases-onder{display:flex;justify-content:space-between;align-items:center;margin-top:28px;gap:14px;flex-wrap:wrap;}

/* Blogs */
.ablog-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px;}
.ablog{text-align:left;background:#fff;border:1px solid var(--lijn);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--schaduw);cursor:pointer;padding:0;}
.ablog .img{aspect-ratio:16/10;overflow:hidden;background:linear-gradient(160deg,#cdd6d0,#e9ecea);}
.ablog .img img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease;}
.ablog:hover .img img{transform:scale(1.05);}
.ablog .b{padding:16px 18px 18px;}
.ablog .tag{font-size:0.75rem;color:var(--accent-tekst);font-weight:600;}
.ablog h3{font-size:1rem;letter-spacing:-.01em;margin:8px 0 6px;}
.ablog p{font-size:0.8125rem;color:var(--tekst-zacht);line-height:1.45;}

@media (max-width:860px){
  .navpill{display:none;}
  .hamburger{display:flex;}
  .mobielmenu.open{display:flex;}
  .pub-top{grid-template-columns:1fr auto;}
  .ahero{padding:36px 22px 30px;min-height:auto;}
  .ahero .reel{position:relative;right:auto;top:auto;width:100%;height:200px;margin-bottom:24px;}
  .ahero h1{font-size:2.5rem;}
  .acases h2,.ablogs h2{font-size:1.625rem;}
}

/* ============================================================
   v9 — bento-kaarten met wit label-balkje + pijl (awsmd-cards)
   ============================================================ */
.eyebrow2{font-size:0.8125rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--accent-diep);margin-bottom:8px;}
.bento-sectie{margin-top:46px;}
.bento-kop{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:22px;}
.bento-kop h2{font-size:2.125rem;letter-spacing:-.03em;}
.bento{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:190px;gap:16px;}
.bento-card{position:relative;border-radius:var(--r-xl);overflow:hidden;cursor:pointer;border:none;padding:0;background:#1a1c1e;box-shadow:var(--schaduw);transition:transform .25s ease;}
.bento-card:hover{transform:translateY(-3px);}
.bento-card img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s ease;}
.bento-card:hover img{transform:scale(1.06);}
.bento-card .label{position:absolute;left:14px;right:14px;bottom:14px;background:#fff;border-radius:var(--r-lg);padding:11px 11px 11px 18px;display:flex;align-items:center;justify-content:space-between;gap:12px;box-shadow:none;}
.bento-card .label .t{font-size:0.9375rem;font-weight:600;color:#16181a;letter-spacing:-.01em;text-align:left;line-height:1.25;}
.bento-card .arrow{width:38px;height:38px;border-radius:var(--r-md);background:#F0F0F2;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background .2s ease;}
.bento-card:hover .arrow{background:var(--geel);}
.b-lg{grid-column:span 2;grid-row:span 2;}
.b-wide{grid-column:span 2;grid-row:span 1;}
.b-sm{grid-column:span 1;grid-row:span 1;}
.ablog-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;}
.ablog-grid .bento-card{aspect-ratio:2/3;min-height:0;}
@media (max-width:860px){
  .bento{grid-template-columns:1fr;grid-auto-rows:auto;}
  .b-lg,.b-wide,.b-sm{grid-column:span 1;grid-row:span 1;}
  .bento-card{min-height:240px;}
  .bento-kop h2{font-size:1.625rem;}
}

/* ============================================================
   v10 — Apple-UX polish: groot hero, draaiend play-ring, kaart-overlays, diepte
   ============================================================ */
.ahero{min-height:600px;}
.ahero h1{font-size:clamp(2.875rem,7.4vw,5.75rem);line-height:.9;letter-spacing:-.045em;font-weight:700;max-width:none;}
.ahero .reel{height:330px;top:44px;}
.ahero-cta{align-items:center;gap:22px;}

.playring{position:relative;width:112px;height:112px;flex-shrink:0;}
.playring .ring{position:absolute;inset:0;width:100%;height:100%;animation:spin 16s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}
.playring .rt{font-size:0.6875rem;fill:#5b5b6b;letter-spacing:2.5px;font-weight:600;}
.playring .playbtn{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:52px;height:52px;border-radius:var(--r-md);background:var(--geel);display:flex;align-items:center;justify-content:center;box-shadow:none;}
.scrollcue{position:absolute;right:40px;bottom:30px;width:44px;height:44px;border-radius:var(--r-md);border:1px solid rgba(0,0,0,.14);display:flex;align-items:center;justify-content:center;color:#5b5b6b;animation:floaty 3s ease-in-out infinite;z-index:2;}

/* Kaart-overlays: frosted labels + diepte-gradient */
.bento-card .grad{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(10,12,14,.30) 0%,rgba(10,12,14,0) 28%,rgba(10,12,14,0) 52%,rgba(10,12,14,.42) 100%);}
.bento-card .chips{position:absolute;top:14px;left:14px;right:14px;display:flex;gap:6px;flex-wrap:wrap;z-index:2;}
.bento-card .chips span{background:rgba(255,255,255,.9);backdrop-filter:blur(8px);color:#16181a;font-size:0.6875rem;font-weight:600;padding:5px 11px;border-radius:var(--r-pill);}
.bento-card .label{z-index:2;}

/* ============================================================
   v11 — extra secties (statement, stats-bento, werk-op-elk-vlak, testimonials, alles-in-1-app)
   ============================================================ */
.grad{background:linear-gradient(90deg,#5E9B8A 0%,#3E8AC0 60%,#7A6AD0 100%);-webkit-background-clip:text;background-clip:text;color:transparent;}
.sectiekop{text-align:center;margin:70px 0 30px;}
.sectiekop h2{font-size:clamp(1.875rem,4.2vw,2.875rem);letter-spacing:-.035em;font-weight:700;}
.sectiekop .sub{font-size:1rem;color:var(--tekst-zacht);margin-top:8px;}

/* 2 — Statement met foto-in-kop */
.statement{padding:74px 0 14px;text-align:center;}
.statement h2{font-size:clamp(1.75rem,4.4vw,3.25rem);line-height:1.18;letter-spacing:-.03em;font-weight:600;max-width:18ch;margin:0 auto;}
.kopfoto{display:inline-block;vertical-align:middle;width:104px;height:58px;border-radius:var(--r-xl);object-fit:cover;margin:0 6px;box-shadow:none;animation:floaty 6s ease-in-out infinite;}
.statement .smut{color:#9DB0A6;}

/* 3 — Stats-bento */
.sbento{display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:152px;gap:16px;}
.scard{border-radius:var(--r-xl);padding:24px;display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden;box-shadow:var(--schaduw);}
.scard .num{font-size:clamp(2rem,4.2vw,3.125rem);font-weight:600;letter-spacing:-.03em;line-height:1;}
.scard .lab{font-size:0.9375rem;opacity:.9;}
.scard .si{position:absolute;top:22px;right:22px;width:34px;height:34px;border-radius:var(--r-md);background:rgba(255,255,255,.18);}
.s-big{grid-row:span 2;background:#6836E6;color:#fff;}
.s-big .si{width:46px;height:46px;border:3px solid rgba(255,255,255,.25);border-top-color:rgba(255,255,255,.7);background:none;animation:spin 4s linear infinite;}
.s-geel{background:#FFCB2D;color:#1A1A1A;}.s-geel .si{background:rgba(0,0,0,.08);}
.s-wit{background:#fff;border:1px solid var(--lijn);}.s-wit .si{background:var(--grijs-1);}
.s-lila{background:#ECEAF6;color:#2C2A4A;}.s-lila .si{background:rgba(90,80,150,.12);}
.s-wide{grid-column:1 / span 2;}

/* 4 — Werk op elk vlak */
.vlak{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:26px 22px;}
.vlak-item{text-align:center;}
.vlak-item .img{aspect-ratio:4/3;border-radius:var(--r-lg);overflow:hidden;background:linear-gradient(160deg,#cdd6d0,#e9ecea);}
.vlak-item .img img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease;}
.vlak-item:hover .img img{transform:scale(1.06);}
.vlak-item .cap{margin-top:14px;font-size:0.875rem;color:var(--tekst-zacht);}
.vlak-item .cap b{color:var(--tekst);font-weight:600;}

/* 6 — Testimonials */
.testi{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:24px;}
.testi-item .img{aspect-ratio:5/4;border-radius:var(--r-lg);overflow:hidden;background:linear-gradient(160deg,#cdd6d0,#e9ecea);}
.testi-item .img img{width:100%;height:100%;object-fit:cover;}
.testi-item .txt{margin-top:18px;font-size:1.0625rem;line-height:1.5;color:var(--tekst-zacht);max-width:90%;}
.testi-item .txt b{color:var(--tekst);font-weight:600;}

/* 7 — Alles in één app */
.eenapp-grid{display:grid;grid-template-columns:1.35fr 1fr;gap:20px;align-items:stretch;}
.eenapp .foto{border-radius:var(--r-xl);overflow:hidden;min-height:360px;background:linear-gradient(160deg,#cdd6d0,#e9ecea);}
.eenapp .foto img{width:100%;height:100%;object-fit:cover;display:block;}
.eenapp .glass{border-radius:var(--r-xl);background:radial-gradient(120% 100% at 80% 0%, #2c3340 0%, #6836E6 60%);color:#fff;padding:26px;position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;}
.eenapp .glass .glow{position:absolute;width:200px;height:200px;border-radius:var(--r-pill);background:radial-gradient(circle,rgba(255,203,45,.35),transparent 70%);right:-40px;top:-50px;}
.eenapp .glass h3{font-size:1.375rem;letter-spacing:-.02em;position:relative;}
.eenapp .glass .gsub{font-size:0.8125rem;color:rgba(255,255,255,.6);margin-top:6px;position:relative;}
.gchips{display:flex;flex-wrap:wrap;gap:8px;position:relative;}
.gchips span{font-size:0.8125rem;font-weight:500;padding:7px 13px;border-radius:var(--r-pill);background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.14);}
.gchips span.actief{background:var(--geel);color:#1a1a1a;border-color:var(--geel);}
.apptabs{display:flex;justify-content:center;gap:4px;background:#fff;border:1px solid var(--lijn);border-radius:var(--r-pill);padding:5px;margin:24px auto 0;width:max-content;max-width:100%;box-shadow:var(--schaduw);flex-wrap:wrap;}
.apptabs span{font-size:0.8125rem;font-weight:500;color:var(--tekst);padding:8px 17px;border-radius:var(--r-pill);}
.apptabs span.actief{background:#6836E6;color:#fff;}
.eenapp-tekst{text-align:center;font-size:0.9375rem;color:var(--tekst-zacht);max-width:560px;margin:18px auto 0;}

@media (max-width:860px){
  .statement h2{font-size:1.625rem;} .kopfoto{width:62px;height:36px;margin:0 4px;}
  .sbento{grid-template-columns:1fr;} .s-big{grid-row:span 1;} .s-wide{grid-column:1;}
  .eenapp-grid{grid-template-columns:1fr;} .eenapp .foto{min-height:240px;}
  .sectiekop h2{font-size:1.625rem;}
}

/* ============================================================
   v12 — hero fix: tekst links eigen ruimte, foto rechts (geen overlap)
   ============================================================ */
.ahero{padding:54px 0 42px 44px; padding-right:46%;}
.ahero h1{font-size:clamp(2.5rem,5.4vw,4.5rem);max-width:560px;}
.ahero .lead{max-width:460px;}
@media (max-width:900px){
  .ahero{padding:36px 22px 30px;}
  .ahero h1{font-size:2.125rem;max-width:none;}
}

/* ============================================================
   v13 — type-harmonie + kleur i.p.v. zwart + app-icoon-raster
   ============================================================ */
.scard .num{font-size:clamp(1.625rem,2.8vw,2.25rem);}
.s-big .num{font-size:clamp(2.125rem,3.6vw,2.75rem);}
.scard .lab{font-size:0.875rem;}
.statement h2{font-size:clamp(1.625rem,3.6vw,2.625rem);}
/* geen plat zwart meer: indigo-gradient i.p.v. #1E2125 */
.s-big{background:linear-gradient(150deg,#6E6AE0 0%,#4F46C9 100%);color:#fff;}
.s-big .si{border-color:rgba(255,255,255,.35);border-top-color:#fff;}
.eenapp .glass{background:radial-gradient(120% 110% at 82% 0%, #3b3f6e 0%, #26294a 48%, #1c1e38 100%);}

/* App-icoon-raster (blok 11) */
.appgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(90px,1fr));gap:16px 12px;margin-top:24px;}
.apptile{display:flex;flex-direction:column;align-items:center;gap:9px;}
.apptile .appicon{width:56px;height:56px;}
.apptile .lab{font-size:0.75rem;color:var(--tekst-zacht);text-align:center;line-height:1.25;}

/* ============================================================
   v14 — echte foto's: immersive hero (Ken-Burns), story-cards, jobs-filter
   ============================================================ */
.ahero{position:relative;overflow:hidden;color:#fff;padding:0;min-height:600px;display:flex;flex-direction:column;justify-content:flex-end;border-radius:var(--r-xl);margin-top:14px;background:#6836E6;}
.ahero .heroimg{position:absolute;inset:0;z-index:0;background-size:cover;background-position:center;animation:kenburns 20s ease-in-out infinite alternate;}
@keyframes kenburns{from{transform:scale(1.02)}to{transform:scale(1.14)}}
.ahero .heroov{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(12,13,15,.5) 0%,rgba(12,13,15,.12) 32%,rgba(12,13,15,.55) 70%,rgba(12,13,15,.88) 100%);}
.ahero .heroinner{position:relative;z-index:2;padding:0 46px 46px;max-width:720px;}
.ahero .eyebrow{color:var(--geel);}
.ahero h1{color:#fff;font-size:clamp(2.5rem,5.6vw,4.75rem);max-width:none;}
.ahero .lead{color:rgba(255,255,255,.85);max-width:480px;}
.ahero .rating{color:#fff;}
.ahero .rating span{color:rgba(255,255,255,.85)!important;}
.ahero .scrollcue{border-color:rgba(255,255,255,.4);color:#fff;}
.ahero .reel{display:none;}
.playring .rt{fill:rgba(255,255,255,.85);}

/* Jobs-filter pills (onder de klussen-kop) */
#jobfilters{margin:-6px 0 18px;}

/* Story-cards (Verhalen — social-media stijl, blok 5) */
.verhalen{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px;}
.story{position:relative;border-radius:var(--r-xl);overflow:hidden;aspect-ratio:3/4;cursor:pointer;box-shadow:var(--schaduw);background:#cdd6d0;}
.story img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s ease;}
.story:hover img{transform:scale(1.06);}
.story .sov{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.18) 0%,transparent 28%,transparent 50%,rgba(0,0,0,.8) 100%);}
.story .stop{position:absolute;top:15px;left:15px;display:flex;align-items:center;gap:9px;z-index:2;color:#fff;}
.story .sav{width:32px;height:32px;border-radius:var(--r-md);border:1.5px solid rgba(255,255,255,.6);object-fit:cover;}
.story .shandle{font-size:0.8125rem;font-weight:600;line-height:1.1;}
.story .ssub{font-size:0.6875rem;color:rgba(255,255,255,.75);}
.story .sq{position:absolute;left:17px;right:17px;bottom:17px;z-index:2;color:#fff;font-size:0.9375rem;font-weight:500;line-height:1.32;letter-spacing:-.01em;}
.story .splay{position:absolute;left:17px;bottom:17px;}

@media (max-width:860px){
  .ahero{min-height:480px;}
  .ahero .heroinner{padding:0 22px 30px;}
}

/* ============================================================
   v15 — full-screen hero, stats-2x2 (image2), merk-logo-marquee, quote, blogs-cards
   ============================================================ */
/* overflow-x:hidden maakte van #public-shell een scroll-container, waardoor de
   sticky menubalk erin niet meer bleef staan. clip houdt overloop tegen zonder
   scroll-container te worden, dus sticky werkt weer. */
#public-shell{overflow-x:hidden;}
@supports (overflow-x:clip){ #public-shell{overflow-x:clip;} }

/* Hero full-bleed / dekkend */
.ahero{margin:0;width:100vw;margin-left:calc(50% - 50vw);border-radius:0;min-height:92vh;}
.ahero .heroinner{width:100%;max-width:1180px;margin:0 auto;padding:0 6vw 70px;}
.herocard{position:absolute;right:6vw;bottom:72px;z-index:3;width:290px;background:rgba(255,255,255,.97);border-radius:var(--r-lg);box-shadow:none;padding:16px 16px 14px;animation:floaty 6s ease-in-out infinite;}
.herocard .hc-kop{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;}
.herocard .hc-kop b{font-size:0.875rem;}
.herocard .hc-kop .dot{width:22px;height:22px;border-radius:var(--r-pill);background:var(--geel);}
.herocard .hc-row{display:flex;align-items:center;gap:10px;padding:8px 0;border-top:1px solid var(--lijn);font-size:0.8125rem;color:var(--tekst-zacht);}
.herocard .hc-row i{width:9px;height:9px;border-radius:var(--r-pill);background:var(--accent);display:inline-block;}
.herocard .hc-row.done i{background:var(--k-groen);} .herocard .hc-row.todo i{background:#D2D2D7;}

/* Stats 2x2 — identiek aan referentie (licht grijs, groot getal, 3D-object) */
.sbento{grid-template-columns:1fr 1fr;grid-auto-rows:minmax(230px,auto);gap:18px;}
.scard,.s-big,.s-geel,.s-lila,.s-wit{background:#F1F1F3!important;color:#1D1D1F!important;border:none!important;grid-row:auto!important;grid-column:auto!important;align-items:flex-start;justify-content:flex-start;}
.scard .si{display:none!important;}
.scard .num{font-size:clamp(2.625rem,4.8vw,4.125rem)!important;font-weight:700;letter-spacing:-.04em;color:#1D1D1F;}
.scard .lab{color:var(--tekst-zacht);font-size:0.9375rem;max-width:60%;margin-top:12px;}
.scard .obj{position:absolute;right:18px;bottom:16px;width:118px;height:118px;border-radius:var(--r-lg);filter:drop-shadow(0 12px 24px rgba(40,30,80,.22));}

/* Merk-logo marquee (monochroom, bewegend) */
.logo-track{gap:72px;align-items:center;}
.logoword{font-size:1.625rem;font-weight:700;letter-spacing:-.02em;color:#1D1D1F;opacity:.82;white-space:nowrap;flex-shrink:0;}

/* Quote met fototje */
.quote{max-width:860px;margin:74px auto 0;text-align:center;padding:0 20px;}
.quote .q{font-size:clamp(1.5rem,3.2vw,2.375rem);font-weight:500;letter-spacing:-.02em;line-height:1.32;color:var(--tekst);}
.quote .q .grad{font-weight:500;}
.quote .who{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:26px;}
.quote .who img{width:50px;height:50px;border-radius:var(--r-md);object-fit:cover;}
.quote .who .n{text-align:left;}
.quote .who b{font-weight:600;font-size:0.9375rem;} .quote .who span{display:block;font-size:0.8125rem;color:var(--tekst-zacht);}

/* Blogs in kaart-stijl (cases) */
.bloglabel{position:absolute;left:14px;right:14px;bottom:14px;background:#fff;border-radius:var(--r-lg);padding:13px 15px;box-shadow:none;z-index:2;}
.bloglabel .tag{font-size:0.6875rem;font-weight:600;color:var(--accent-tekst);text-transform:uppercase;letter-spacing:.04em;}
.bloglabel .t{font-size:0.9375rem;font-weight:600;color:#16181a;margin-top:4px;line-height:1.25;}

@media (max-width:900px){
  .herocard{display:none;}
  .ahero{min-height:78vh;}
  .ahero .heroinner{padding:0 22px 40px;}
  .sbento{grid-template-columns:1fr;}
  .scard .lab{max-width:70%;}
}

/* ============================================================
   v16 — moderne vacaturepagina (detail)
   ============================================================ */
.dethero .det-eyebrow{font-size:0.75rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--geel);margin-bottom:10px;}
.det-hero-acties{display:flex;gap:10px;margin-top:20px;flex-wrap:wrap;}
.det-share{background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.32);color:#fff;padding:11px 20px;border-radius:var(--r-pill);font-weight:500;font-size:0.875rem;backdrop-filter:blur(6px);min-height:44px;display:inline-flex;align-items:center;justify-content:center;}
.det-share:hover{background:rgba(255,255,255,.26);}
/* Stond op 980px terwijl de donkere header de volle breedte pakt; de tekst hing daardoor
   smaller onder een breder blok. Nu even breed als de header. */
.det-layout{display:grid;grid-template-columns:1fr 340px;gap:30px;align-items:start;margin-top:30px;max-width:none;}
.det-blok{margin-bottom:32px;}
.det-blok h3{font-size:1.3125rem;letter-spacing:-.02em;margin-bottom:12px;}
.det-blok p{color:var(--tekst-zacht);font-size:0.9375rem;line-height:1.75;}
.det-blok ul{list-style:none;}
.det-blok li{display:flex;gap:12px;padding:8px 0;font-size:0.9375rem;color:var(--tekst);line-height:1.5;}
.det-blok li .ck{width:22px;height:22px;border-radius:var(--r-sm);background:var(--accent-tint);display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px;}
.det-blok li .ck svg{width:13px;height:13px;stroke:var(--accent-tekst);}
.det-side{position:sticky;top:88px;}
.det-card{background:var(--wit);border:1px solid var(--lijn);border-radius:var(--r-lg);padding:20px;box-shadow:var(--schaduw);}
.det-card-kop{font-size:0.9375rem;font-weight:600;margin-bottom:6px;}
.det-prow{display:flex;gap:12px;align-items:center;padding:11px 0;border-top:1px solid var(--lijn);}
.det-prow .di{width:36px;height:36px;border-radius:var(--r-md);background:var(--grijs-1);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.det-prow .di svg{width:18px;height:18px;stroke:var(--tekst);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
.det-prow .pl,.det-prow .pv{font-size:0.8125rem;color:var(--tekst-zacht);font-weight:400;line-height:1.4;}
.det-card .knop{margin-top:18px;}
.det-card-note{font-size:0.8125rem;color:var(--tekst-licht);margin-top:12px;line-height:1.5;text-align:center;}
@media (max-width:860px){.det-layout{grid-template-columns:1fr;} .det-side{position:static;}}

/* ============================================================
   v17 — feedbackronde: kleinere hero, ronde kopfoto, bewegende stats, video-portal, grotere logo's
   ============================================================ */
.ahero{min-height:68vh;}
/* Statement-foto's rond (rond kader) */
.kopfoto{width:66px;height:66px;border-radius:var(--r-lg);object-fit:cover;margin:0 8px;border:3px solid #fff;box-shadow:none;}
/* Stats: kleinere cijfers + bewegende objecten */
.scard .num{font-size:clamp(1.875rem,3.2vw,2.75rem)!important;}
.scard .obj{width:104px;height:104px;animation:floaty 5s ease-in-out infinite;}
.scard:nth-child(2) .obj{animation:spin 10s linear infinite;}
.scard:nth-child(3) .obj{animation:floaty 6.5s ease-in-out infinite;}
.scard:nth-child(4) .obj{animation:floaty 4.5s ease-in-out infinite .3s;}
/* Logo's groter */
.logoword{font-size:1.875rem;opacity:.78;}
.logos-label{font-size:0.75rem;letter-spacing:.08em;}
/* Alles in één app: kleiner + video-portal */
.eenapp-grid{grid-template-columns:1fr 1fr;gap:18px;align-items:stretch;max-width:940px;margin:0 auto;}
.eenapp .foto{min-height:300px;max-height:420px;border-radius:var(--r-xl);}
.portalvid{position:relative;border-radius:var(--r-xl);overflow:hidden;min-height:300px;background:#1c1e38;box-shadow:var(--schaduw);}
.portalvid video{width:100%;height:100%;object-fit:cover;display:block;}
.portalvid .pv-ov{position:absolute;left:0;right:0;bottom:0;padding:22px;background:linear-gradient(180deg,transparent,rgba(10,12,20,.82));color:#fff;}
.portalvid .pv-kop{font-size:1.3125rem;font-weight:600;letter-spacing:-.01em;}
.portalvid .pv-sub{font-size:0.8125rem;color:rgba(255,255,255,.82);margin-top:5px;}
@media (max-width:860px){.eenapp-grid{grid-template-columns:1fr;} .ahero{min-height:62vh;}}

/* ============================================================
   v18 — gestaffelde bento (schets) + nette spacing
   ============================================================ */
/* Spacing-ritme: meer lucht, consistent */
.statement{padding:96px 0 16px;}
.statement h2{line-height:1.5;}
.logos-sectie{margin-top:40px!important;}
.bento-sectie{margin-top:88px;}
.sectiekop{margin:88px 0 28px;}
.pub-main{padding:0 32px 110px;}
.eenapp{margin-top:8px;}
.quote{margin-top:88px;}

/* Gestaffelde bento (zoals de schets) */
.bento{grid-template-columns:repeat(4,1fr);grid-auto-rows:148px;grid-auto-flow:dense;gap:18px;}
.b-tall{grid-column:span 1;grid-row:span 2;}
.b-lg{grid-column:span 2;grid-row:span 2;}
.b-wide{grid-column:span 2;grid-row:span 1;}
.b-sm{grid-column:span 1;grid-row:span 1;}
@media (max-width:860px){
  .bento{grid-template-columns:1fr 1fr;grid-auto-rows:120px;}
  .b-lg,.b-wide{grid-column:span 2;}
  .b-tall{grid-column:span 1;grid-row:span 2;}
  .statement{padding:60px 0 12px;}
}

/* ============================================================
   v19 — jobs in Veloretti-stijl (3-up), logo-kaders, minder apple
   ============================================================ */
/* Jobs: 3 naast elkaar, balk onderaan met titel + subtitel + pijl rechts */
.jobgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:36px 16px;margin-bottom:22px;}
.jobcard{position:relative;border-radius:var(--r-xl);overflow:hidden;aspect-ratio:2/3;display:block;text-align:left;box-shadow:var(--schaduw);cursor:pointer;background:var(--grijs-1);border:none;padding:0;}
.jobcard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:transform .55s ease;}
.jobcard:hover img{transform:scale(1.045);}
.joblabel{position:absolute;left:14px;right:14px;bottom:14px;background:#fff;border-radius:var(--r-lg);padding:12px 12px 12px 18px;display:flex;align-items:center;justify-content:space-between;gap:12px;box-shadow:none;}
.joblabel .jt{display:flex;flex-direction:column;font-weight:600;font-size:1.125rem;line-height:1.2;color:var(--tekst);min-width:0;}
.joblabel .js{font-weight:400;font-size:0.8125rem;color:var(--tekst-licht);margin-top:5px;}
.jarrow{width:40px;height:40px;border-radius:var(--r-md);background:#F0F0F2;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background .2s ease, transform .25s ease;}
.jobcard:hover .jarrow{background:var(--geel);transform:translate(2px,-2px);}
.jarrow svg{width:17px;height:17px;}
@media (min-width:861px) and (max-width:1100px){.jobgrid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:860px){.jobgrid{grid-template-columns:1fr;}}
/* Logo's: witte kaders, tikkie groter, meer spacing */
.logos-sectie{margin-top:30px!important;}
.logos-label{display:block;margin-bottom:16px;font-size:0.75rem;letter-spacing:.08em;color:var(--tekst-licht);}
.logos .logo-track{gap:20px;}
.logoword{font-size:1.4375rem!important;opacity:1!important;color:var(--tekst);background:#fff;border:1px solid var(--lijn);border-radius:var(--r-lg);padding:18px 30px;box-shadow:var(--schaduw);display:inline-flex;align-items:center;white-space:nowrap;}
/* "Alles in één app" minder apple: video kalmer met zachte overlay */
.portalvid::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,22,40,.18),rgba(20,22,40,.05) 40%);pointer-events:none;}

/* ============================================================
   v20 — hero-tekst omhoog (centreren i.p.v. onderaan)
   ============================================================ */
.ahero{justify-content:center;}
.ahero .heroinner{max-width:1200px;}
@media (max-width:860px){.ahero{justify-content:flex-end;}}

/* ============================================================
   v21 — zelfde grijze pijl op "Lees verder"-kaarten
   ============================================================ */
.bloglabel{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 12px 12px 18px;text-align:left;}
.bloglabel .blogtxt{display:flex;flex-direction:column;min-width:0;}
.bloglabel .tag{text-align:left;}
.bloglabel .t{margin-top:4px;text-align:left;}
.bento-card:hover .jarrow{background:var(--geel);transform:translate(2px,-2px);}

/* ============================================================
   v22 — detailpagina: zachte icoon-badges, diepte, vibe
   ============================================================ */
/* Squircle icoon-badges (Ai-stijl: licht grijs, afgerond, diepte, geen bollen) */
.det-prow .di{width:46px;height:46px;border-radius:var(--r-lg);background:linear-gradient(145deg,#ffffff,#eceef1);box-shadow:inset 0 1px 0 rgba(255,255,255,.95), inset 0 -3px 6px rgba(20,22,24,.05);border:1px solid rgba(20,22,24,.05);}
.det-prow .di svg{width:21px;height:21px;stroke:#33363b;stroke-width:1.7;}
.det-prow{align-items:center;gap:14px;}

/* Genummerde blok-koppen — structuur + speels */
.det-blok h3,.det-bieden h3{display:flex;align-items:center;gap:12px;}
.det-blok h3 .nr,.det-bieden h3 .nr{display:inline-flex;align-items:center;justify-content:center;min-width:32px;height:32px;padding:0 9px;border-radius:var(--r-md);background:var(--geel);color:#16181a;font-size:0.8125rem;font-weight:700;letter-spacing:-.01em;flex-shrink:0;box-shadow:none;}

/* Scroll-/open-reveal (gestaffeld) */
#screen-detail .reveal{opacity:0;transform:translateY(20px);transition:opacity .55s ease,transform .55s cubic-bezier(.2,.7,.2,1);}
#screen-detail .reveal.in{opacity:1;transform:none;}

/* "Wat we bieden" als getinte kaart — speelt met blokken */
.det-bieden{background:linear-gradient(160deg,#f7faf0,#edf3e3);border:1px solid #e4eed4;border-radius:var(--r-lg);padding:22px 24px 24px;margin-bottom:32px;}
.det-bieden h3{font-size:1.3125rem;letter-spacing:-.02em;margin-bottom:16px;}
.det-bieden ul{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:11px 22px;}
.det-bieden li{display:flex;gap:11px;align-items:center;font-size:0.9375rem;color:var(--tekst);line-height:1.35;}
.det-bieden li .ck{width:27px;height:27px;border-radius:var(--r-sm);background:#fff;box-shadow:none;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.det-bieden li .ck svg{width:14px;height:14px;stroke:#5a7d2a;}
@media (max-width:560px){.det-bieden ul{grid-template-columns:1fr;}}

/* Sticky kaart: lime accent-rand + meer diepte */
.det-card{box-shadow:none;position:relative;overflow:hidden;}
.det-card::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:linear-gradient(90deg,var(--geel),#C2FFAD);}
.det-card .det-card-kop{padding-top:4px;}

/* WhatsApp-knop "App voor vragen" */
.knop-wa{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;margin-top:10px;padding:13px;border-radius:var(--r-pill);background:#fff;border:1px solid var(--lijn);color:var(--tekst);font-weight:600;font-size:0.9375rem;cursor:pointer;transition:background .2s,border-color .2s,transform .2s;text-decoration:none;}
.knop-wa:hover{background:#f3f9ec;border-color:#cfe6a8;transform:translateY(-1px);}
.knop-wa svg{width:19px;height:19px;flex-shrink:0;}

/* Hero detail: subtiele lime-glow voor diepte */
.dethero{position:relative;overflow:hidden;}
.dethero .ov{position:relative;z-index:2;}
.dethero::after{content:"";position:absolute;right:-70px;bottom:-90px;width:300px;height:300px;border-radius:var(--r-pill);background:radial-gradient(circle,rgba(194,255,173,.35),transparent 68%);z-index:1;pointer-events:none;}

/* ============================================================
   v23 — Portal: lime + wit/grijs/zwart, zakelijk, meer diepte
   (alles gescoped op #app-shell zodat de publieke groene accenten blijven)
   ============================================================ */
#app-shell{--accent:#1e2125;--accent-tint:#f1f2f0;--accent-rand:#e4e6e2;--accent-tekst:#1e2125;--accent-diep:#1e2125;background:#f6f7f5;}

/* Sidebar: lime logo-punt + lime indicator op actief item */
#app-shell .zijbalk-logo .punt{color:#9bd61f;}
#app-shell .nav-knop.actief{background:#eef0ec;color:#1e2125;position:relative;}
#app-shell .nav-knop.actief::before{content:"";position:absolute;left:0;top:9px;bottom:9px;width:3px;border-radius:0 3px 3px 0;background:var(--geel);}

/* Status-kaarten: meer diepte + hover-lift; actief = lime accent-rand */
#app-shell .saldo-rij{gap:16px;}
#app-shell .saldo-kaart{border-radius:var(--r-lg);box-shadow:none;transition:transform .2s ease,box-shadow .2s ease;}
#app-shell .saldo-kaart:hover{transform:translateY(-3px);box-shadow:none;}
#app-shell .saldo-kaart.accent{background:var(--wit);border-color:#e7f1c8;position:relative;overflow:hidden;}
#app-shell .saldo-kaart.accent::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--geel);}
#app-shell .saldo-label{font-size:0.8125rem;color:var(--tekst-licht);}
#app-shell .saldo-getal{letter-spacing:-.02em;}

/* Hoofdpaneel: zachtere, diepere schaduw */
#app-shell .paneel{border-radius:var(--r-lg);box-shadow:none;}

/* Voortgang-timeline: done = charcoal, huidige = lime */
#app-shell .stap .bol{width:28px;height:28px;}
#app-shell .stap.done .bol{background:#1e2125;border-color:#1e2125;}
#app-shell .stap.done .lijn{background:#cdd0cb;}
#app-shell .stap.nu .bol{border:2px solid var(--geel);box-shadow:0 0 0 5px rgba(194,255,173,.22);}
#app-shell .stap.nu .bol::after{background:#1e2125;width:9px;height:9px;}
#app-shell .voortgang span{background:var(--geel);}

/* Primaire actie-knoppen in portal = lime (rustig, één accent) */
#app-shell .knop{background:var(--geel);color:#16181a;border:1px solid var(--geel);box-shadow:none;}
#app-shell .knop:hover{background:#bdf52f;transform:translateY(-1px);}
#app-shell .knop.mini{box-shadow:none;}

/* Onder-tegels: diepte + hover-lift */
#app-shell .tegels{gap:16px;}
#app-shell .tegel{border-radius:var(--r-lg);box-shadow:none;transition:transform .2s ease,box-shadow .2s ease;cursor:pointer;}
#app-shell .tegel:hover{transform:translateY(-3px);box-shadow:none;}

/* Pagina-kop iets ruimer */
#app-shell .pagina-kop h1{letter-spacing:-.03em;}

/* ============================================================
   v24 — detail rustiger/zakelijk: witte tekstkaarten, clean/apple
   ============================================================ */
#screen-detail .det-blok{background:#fff;border:1px solid var(--lijn);border-radius:var(--r-lg);padding:26px 30px;margin-bottom:18px;box-shadow:none;}
#screen-detail .det-blok h3{font-size:1.25rem;letter-spacing:-.02em;margin-bottom:13px;display:block;}
#screen-detail .det-blok p{color:var(--tekst-zacht);font-size:0.9375rem;line-height:1.8;}

/* ============================================================
   v25 — detail-feedback: grijs i.p.v. groen/geel waar gevraagd,
   jobs donkere overlay, nieuwe duotone-iconen, hero moderner
   ============================================================ */
/* Jobs: zelfde donkere overlay als "Lees verder" */
.jobcard .grad{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(10,12,14,.34) 0%,rgba(10,12,14,0) 30%,rgba(10,12,14,0) 50%,rgba(10,12,14,.45) 100%);}
.jobcard .joblabel{z-index:2;}

/* Sticky-kaart "Solliciteer nu" (rechts) = grijs; alleen de hero-knop blijft geel */
#public-shell .det-card .knop{background:#ECEEF0;color:#1E2125;border:1px solid #e0e2df;box-shadow:none;}
#public-shell .det-card .knop:hover{background:#e3e6e8;transform:translateY(-1px);}
/* Praktische zaken: geen gele rand meer */
.det-card::before{display:none!important;}

/* Meer spacing tekst↔witte achtergrond + iets kleiner font (titels blijven) */
#screen-detail .det-blok{padding:34px 38px;}
#screen-detail .det-blok p{font-size:0.9375rem;line-height:1.85;}
@media (max-width:560px){#screen-detail .det-blok{padding:24px 22px;}}

/* Icoon-badges: nette rand + nieuwe duotone-iconen (geen saaie outlines) */
#screen-detail .det-prow .di{width:48px;height:48px;border-radius:var(--r-lg);background:#fff;border:1px solid #e2e4e0;box-shadow:none;}
#screen-detail .det-prow .di svg{width:25px;height:25px;stroke:none;fill:none;}
#screen-detail .det-prow{gap:15px;padding:13px 0;}

/* Detail-hero: moderner + meer jeux */
#screen-detail .dethero{min-height:340px;border-radius:var(--r-xl);padding:38px;box-shadow:none;}
#screen-detail .dethero .deco{background:radial-gradient(circle at 35% 30%,rgba(194,255,173,.5),transparent 70%);}
#screen-detail .dethero h1{font-size:2.625rem;letter-spacing:-.03em;line-height:1.02;}
#screen-detail .dethero .det-eyebrow{display:inline-flex;align-items:center;gap:9px;}
#screen-detail .dethero .det-eyebrow::before{content:"";width:20px;height:2px;border-radius:var(--r-sm);background:var(--geel);}

/* ============================================================
   v26 — hero-cijferkaart (i.p.v. funnel) + video in "Lees verder"
   ============================================================ */
.herocard .hc-stats{display:grid;grid-template-columns:1fr 1fr;gap:15px 12px;margin-top:6px;}
.herocard .hc-stat .n{font-size:1.4375rem;font-weight:700;letter-spacing:-.03em;color:#16181a;line-height:1;}
.herocard .hc-stat .l{font-size:0.6875rem;color:var(--tekst-licht);margin-top:4px;line-height:1.25;}
.herocard .hc-kop .dot{width:14px!important;height:14px!important;}
.bento-card video{width:100%;height:100%;object-fit:cover;display:block;}

.herocard{color:#16181a;}
.herocard .hc-kop b{color:#16181a;}

/* ============================================================
   v27 — glassy icons, tegels zonder icoon, spacing/contrast
   ============================================================ */
/* Glassy icoon-badges (magnific-stijl): badge = de glassy SVG zelf */
#screen-detail .det-prow .di{width:50px;height:50px;background:none;border:none;box-shadow:none;border-radius:0;}
#screen-detail .det-prow .di svg{width:48px;height:48px;stroke:none;fill:none;filter:drop-shadow(0 5px 11px rgba(20,22,24,.15));}
#screen-detail .det-prow{gap:16px;}

/* Tekst-tegels in portal (zonder icoon) */
#app-shell .tegel--tekst{padding:20px 22px;}

/* Detail: meer verticale lucht in de blokken, blokken dichter op elkaar */
#screen-detail .det-blok{padding:42px 38px;margin-bottom:12px;}
#screen-detail .det-layout{margin-top:36px;}
#screen-detail #vac-galerij{margin-top:8px;}
@media (max-width:560px){#screen-detail .det-blok{padding:30px 24px;}}

/* ============================================================
   v28 — gezichten-sectie (bewegend B&W), footer + socials, lichte kaders
   ============================================================ */
/* Heel lichte kader om de blokken om ze te scheiden */
.eenapp .foto,.eenapp .portalvid{border:1px solid rgba(20,22,24,.07);}
.quote{border:1px solid rgba(20,22,24,.05);background:rgba(255,255,255,.5);border-radius:var(--r-xl);padding:46px 40px;}

/* Gezichten achter Piekfijn — donker, gestaffeld, bewegend */
.faces-sectie{background:#6836E6;border-radius:var(--r-xl);margin:96px 0 0;padding:60px 40px 76px;text-align:center;overflow:hidden;}
.faces-eyebrow{font-size:0.8125rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.55);margin-bottom:10px;}
.faces-kop h2{color:#fff;font-size:2.125rem;letter-spacing:-.03em;margin-bottom:44px;}
.faces{display:flex;justify-content:center;align-items:flex-start;gap:34px;flex-wrap:wrap;}
.face{margin:0;border-radius:var(--r-lg);overflow:hidden;width:228px;background:#262626;box-shadow:none;}
.face img{width:100%;height:100%;object-fit:cover;display:block;}
.face.f1{height:300px;animation:floaty 6s ease-in-out infinite;}
.face.f2{height:262px;margin-top:64px;animation:floaty 7s ease-in-out infinite .6s;}
.face.f3{height:322px;animation:floaty 6.5s ease-in-out infinite 1.1s;}
@media (max-width:760px){.face.f2{margin-top:0;} .face{width:42%;height:auto!important;aspect-ratio:3/4;}}

/* Footer met socials + contact */
.pub-footer{display:block;margin-top:64px;padding-top:30px;border-top:1px solid var(--lijn);color:var(--tekst-licht);}
/* Merk links, socials hard rechts tegen de rand: dat trok de voet uit elkaar. Onder een
   gecentreerde FAQ hoort een gecentreerde voet. */
.pub-footer .ft-top{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:18px;flex-wrap:wrap;margin-bottom:22px;}
.pub-footer .ft-merk{font-weight:700;font-size:1.375rem;letter-spacing:-.02em;color:var(--tekst);}
.pub-footer .ft-merk .punt{color:var(--geel);}
.pub-footer .ft-soc{display:flex;gap:10px;}
.pub-footer .ft-soc a{width:44px;height:44px;border-radius:var(--r-md);border:1px solid var(--lijn-donker);display:flex;align-items:center;justify-content:center;color:var(--tekst);transition:background .2s ease,border-color .2s ease,color .2s ease;}
.pub-footer .ft-soc a:hover{background:var(--geel);border-color:var(--geel);color:#16181a;}
.pub-footer .ft-soc svg{width:18px;height:18px;}
.pub-footer .ft-onder{display:flex;gap:8px 20px;flex-wrap:wrap;font-size:0.8125rem;align-items:center;justify-content:center;text-align:center;}
.pub-footer .ft-onder a{color:var(--tekst-zacht);text-decoration:none;display:inline-flex;align-items:center;min-height:44px;}
.pub-footer .ft-onder a:hover{color:var(--tekst);}

/* ============================================================
   v29 — hero-koppen, faces-carousel, logos-titel, spacing, clean shadows
   ============================================================ */
@keyframes bobs{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}

/* Hero-kaart = 4 zwevende B&W koppen op witte achtergrond */
.herocard.herofaces{width:188px;padding:8px;display:grid;grid-template-columns:1fr 1fr;gap:6px;animation:none;box-shadow:var(--schaduw);background:#E7E8E5;transform:rotate(-2.5deg);}
.herofaces .hf{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:var(--r-sm);border:2px solid #fff;background:#dcddda;box-shadow:none;}
.herofaces .hf1{animation:bobs 5.5s ease-in-out infinite;}
.herofaces .hf2{animation:bobs 6.5s ease-in-out infinite .4s;}
.herofaces .hf3{animation:bobs 6s ease-in-out infinite .8s;}
.herofaces .hf4{animation:bobs 7s ease-in-out infinite .2s;}

/* Faces-carousel onderaan: gelijke grootte, rustige scroll */
.faces-eyebrow{color:rgba(255,255,255,.6)!important;}
.faces-carousel{overflow:hidden;margin-top:8px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);}
.faces-track{display:flex;gap:22px;width:max-content;animation:scrollx 60s linear infinite;}
.faces-track .face{margin:0;width:208px;height:272px;flex-shrink:0;border-radius:var(--r-lg);overflow:hidden;background:#262626;}
.faces-track .face img{width:100%;height:100%;object-fit:cover;display:block;}

/* "We werken o.a. voor": titel zo groot als andere koppen + veel spacing */
.logos-sectie{margin:104px 0!important;text-align:center;}
.logos-titel{font-size:2.125rem;letter-spacing:-.03em;font-weight:700;color:var(--tekst);margin-bottom:42px;}
.logos{margin-top:0!important;}

/* Quote: meer lucht eromheen */
.quote{margin:120px auto!important;}

/* Eén consistente, clean schaduw overal (geen zware/ouderwetse) */
.herocard{box-shadow:var(--schaduw);}
#screen-detail .dethero{box-shadow:var(--schaduw);}
.det-card{box-shadow:var(--schaduw)!important;}
#screen-detail .det-blok{box-shadow:var(--schaduw);}
.joblabel,.bloglabel,.det-card .knop,.jarrow{box-shadow:none;}
#screen-detail .det-prow .di svg{filter:drop-shadow(0 6px 14px rgba(20,22,24,.10));}

/* ============================================================
   v31 — Hireflix video-flow + recruiter beoordeel-scherm
   ============================================================ */
.vidwrap{max-width:920px;}
/* Welkom / klaar-kaart */
.vid-card{display:grid;grid-template-columns:1.05fr 1fr;background:var(--wit);border:1px solid var(--lijn);border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--schaduw);}
.vid-stage{position:relative;background:#6836E6;min-height:300px;}
.vid-stage video{width:100%;height:100%;object-fit:cover;display:block;position:absolute;inset:0;}
.vid-stage.sm{min-height:200px;border-radius:var(--r-lg);overflow:hidden;}
.vid-badge{position:absolute;left:14px;top:14px;z-index:2;background:rgba(255,255,255,.92);backdrop-filter:blur(6px);font-size:0.75rem;font-weight:600;padding:6px 12px;border-radius:var(--r-pill);color:#16181a;}
.vid-body{padding:34px 36px;display:flex;flex-direction:column;justify-content:center;gap:6px;}
.vid-body.center{text-align:center;align-items:center;}
.vid-eyebrow{font-size:0.75rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--tekst-licht);}
.vid-body h2{font-size:1.625rem;letter-spacing:-.02em;margin:4px 0 6px;}
.vid-body p{color:var(--tekst-zacht);font-size:0.9375rem;line-height:1.6;margin-bottom:18px;}
.vid-body .knop{align-self:flex-start;}
.vid-body.center .knop{align-self:center;}
/* Vraag + camera */
.vid-top{margin-bottom:18px;}
.vid-progress{height:6px;border-radius:var(--r-pill);background:var(--grijs-1);overflow:hidden;}
.vid-progress span{display:block;height:100%;background:var(--geel);border-radius:var(--r-pill);transition:width .4s;}
.vid-tel{font-size:0.8125rem;color:var(--tekst-licht);font-weight:500;margin-top:8px;}
.vid-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:start;}
.vid-vraagpaneel,.vid-camerapaneel{background:var(--wit);border:1px solid var(--lijn);border-radius:var(--r-lg);padding:16px;box-shadow:var(--schaduw);}
.vid-vraagtekst{font-size:1.125rem;font-weight:600;letter-spacing:-.01em;line-height:1.35;margin-top:14px;padding:0 4px 4px;}
.vid-cam{position:relative;border-radius:var(--r-lg);overflow:hidden;background:#6836E6;aspect-ratio:4/3;}
.vid-cam video{width:100%;height:100%;object-fit:cover;display:block;transform:scaleX(-1);}
.vid-cam-ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.7);font-size:0.875rem;text-align:center;padding:20px;}
.vid-cam.rec{box-shadow:0 0 0 3px var(--k-rood), var(--schaduw);}
.vid-cam-acties{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px;flex-wrap:wrap;}
.vid-hint{font-size:0.8125rem;color:var(--tekst-licht);display:inline-flex;align-items:center;gap:7px;}
.dot-rec{width:9px;height:9px;border-radius:var(--r-pill);background:var(--k-rood);animation:pulse 1.1s ease-in-out infinite;}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}
.knop-stop{display:inline-flex;align-items:center;gap:7px;background:var(--k-rood);color:#fff;border:1px solid var(--k-rood);padding:11px 22px;border-radius:var(--r-pill);font-weight:600;font-size:0.875rem;cursor:pointer;}
.knop-stop:hover{filter:brightness(.95);}
@media (max-width:860px){.vid-card{grid-template-columns:1fr;} .vid-grid{grid-template-columns:1fr;}}

/* Recruiter beoordeel-scherm */
.beo-kaart{background:var(--wit);border:1px solid var(--lijn);border-radius:var(--r-lg);box-shadow:var(--schaduw);overflow:hidden;}
.beo-kop{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:20px 24px;border-bottom:1px solid var(--lijn);flex-wrap:wrap;}
.beo-pers{display:flex;align-items:center;gap:13px;}
.beo-av{width:44px;height:44px;border-radius:var(--r-md);background:#1e2125;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:0.9375rem;}
.beo-pers b{font-size:0.9375rem;} .beo-pers span{display:block;font-size:0.8125rem;color:var(--tekst-licht);margin-top:2px;}
.beo-status{font-size:0.8125rem;font-weight:600;padding:6px 13px;border-radius:var(--r-pill);background:var(--grijs-1);color:var(--tekst-zacht);}
.beo-status.s-uitgenodigd{background:#eafbe0;color:#3c6b16;}
.beo-status.s-afgewezen{background:var(--k-rood-zacht);color:var(--k-rood);}
.beo-videos{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:18px;padding:22px 24px;}
.beo-vid{display:flex;flex-direction:column;}
.beo-vraag{font-size:0.8125rem;font-weight:600;line-height:1.35;margin-bottom:9px;display:flex;gap:8px;align-items:flex-start;}
.beo-nr{flex-shrink:0;width:21px;height:21px;border-radius:var(--r-sm);background:var(--geel);color:#16181a;font-size:0.6875rem;font-weight:700;display:flex;align-items:center;justify-content:center;}
.beo-vid video{width:100%;border-radius:var(--r-md);background:#6836E6;aspect-ratio:4/3;object-fit:cover;}
.beo-leeg{font-size:0.8125rem;color:var(--tekst-licht);background:var(--grijs-1);border-radius:var(--r-md);padding:22px 16px;text-align:center;aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;}
.beo-duur{font-size:0.6875rem;color:var(--tekst-licht);margin-top:7px;}
.beo-acties{display:flex;justify-content:flex-end;gap:12px;padding:18px 24px;border-top:1px solid var(--lijn);flex-wrap:wrap;}

/* ============================================================
   v32 — immersive Hireflix-studio (gecentreerd, gekaderd, diep)
   ============================================================ */
.vidwrap{max-width:none;}
.vid-studio{max-width:600px;margin:10px auto 0;display:flex;flex-direction:column;align-items:center;gap:18px;text-align:center;}
/* voortgang */
.vid-dots{display:flex;gap:8px;}
.vid-dots span{width:30px;height:5px;border-radius:var(--r-pill);background:var(--lijn-donker);transition:background .3s;}
.vid-dots span.nu{background:var(--geel);}
.vid-dots span.done{background:#1e2125;}
.vid-tel{font-size:0.8125rem;color:var(--tekst-licht);font-weight:600;margin-top:-6px;}
/* vraag-kop */
.vid-vraagkop{display:flex;gap:12px;align-items:center;text-align:left;background:var(--wit);border:1px solid var(--lijn);border-radius:var(--r-lg);padding:14px 18px;box-shadow:var(--schaduw);width:100%;}
.vid-mini{width:40px;height:40px;border-radius:var(--r-md);background:#1e2125;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.vid-mini-label{font-size:0.6875rem;color:var(--tekst-licht);font-weight:600;}
.vid-vraagtekst{font-size:1rem;font-weight:600;letter-spacing:-.01em;line-height:1.32;margin-top:2px;color:var(--tekst);}
/* het "scherm" = camera, gekaderd met diepte */
.vid-screen{position:relative;width:100%;aspect-ratio:4/3;border-radius:var(--r-xl);overflow:hidden;background:#0c0d0f;border:7px solid #16181a;box-shadow:none;}
.vid-screen video{width:100%;height:100%;object-fit:cover;display:block;}
.vid-screen:not(.welkom) video{transform:scaleX(-1);}
.vid-cam-ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.7);font-size:0.875rem;text-align:center;padding:24px;}
.vid-screen.rec{border-color:var(--k-rood);box-shadow:0 0 0 3px rgba(185,66,56,.35);}
.vid-timer{position:absolute;top:14px;right:14px;background:rgba(0,0,0,.62);color:#fff;font-size:0.875rem;font-weight:600;padding:6px 13px;border-radius:var(--r-pill);backdrop-filter:blur(6px);font-variant-numeric:tabular-nums;display:none;}
.vid-screen.rec .vid-timer{display:block;}
/* welkom/klaar overlay op het scherm */
.vid-screen.welkom{aspect-ratio:16/10;}
.vid-screen-ov{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;background:linear-gradient(180deg,rgba(0,0,0,.25),rgba(0,0,0,.6));color:#fff;padding:24px;}
.vid-screen-ov h2{color:#fff;font-size:1.75rem;letter-spacing:-.02em;}
.vid-screen-ov .vid-eyebrow{color:var(--geel);font-size:0.75rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;}
.vid-grootemoji{font-size:2.625rem;}
/* controls */
.vid-ctrl{display:flex;flex-direction:column;align-items:center;gap:13px;width:100%;}
.vid-intro{color:var(--tekst-zacht);font-size:0.9375rem;line-height:1.6;max-width:450px;margin:0;}
.vid-recbtn{display:inline-flex;align-items:center;gap:11px;background:var(--geel);color:#16181a;border:none;padding:16px 34px;border-radius:var(--r-pill);font-weight:700;font-size:1rem;cursor:pointer;box-shadow:none;transition:transform .15s ease;}
.vid-recbtn:hover{transform:translateY(-2px);}
.vid-recbtn.lg{padding:18px 42px;font-size:1.0625rem;}
.vid-recbtn .vrb-dot{width:13px;height:13px;border-radius:var(--r-pill);background:var(--k-rood);}
.vid-recbtn.stop{background:var(--k-rood);color:#fff;box-shadow:none;}
.vid-recbtn.stop .vrb-sq{width:12px;height:12px;border-radius:var(--r-sm);background:#fff;}
.vid-hint{font-size:0.8125rem;color:var(--tekst-licht);display:inline-flex;align-items:center;gap:7px;}

/* ============================================================
   v33 — Apple-store flat (geen schaduw) + hero met titel-kader
   ============================================================ */
.ahero .herovid{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover;}
.ahero{justify-content:center;}
.ahero .heroinner{max-width:1200px;width:100%;}
.heropanel{max-width:600px;background:rgba(16,18,22,.40);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.16);border-radius:var(--r-xl);padding:38px 40px;}
.heropanel .eyebrow{color:var(--geel);margin-bottom:14px;}
.heropanel h1{color:#fff;margin-bottom:16px;}
.heropanel .lead{color:rgba(255,255,255,.88);max-width:none;margin-bottom:22px;}
.ahero-cta{display:flex;gap:12px;align-items:center;flex-wrap:wrap;}
.knop-hero{background:var(--geel);color:#16181a;border:none;padding:15px 30px;border-radius:var(--r-pill);font-weight:700;font-size:0.9375rem;cursor:pointer;transition:transform .15s ease;}
.knop-hero:hover{transform:translateY(-1px);}
.knop-ghost{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.30);color:#fff;padding:15px 26px;border-radius:var(--r-pill);font-weight:600;font-size:0.9375rem;cursor:pointer;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:background .2s ease;}
.knop-ghost:hover{background:rgba(255,255,255,.26);}
.heropanel .rating{margin-top:22px;color:#fff;}
.heropanel .rating span{color:rgba(255,255,255,.85)!important;}
.heropanel .rating .sterren{color:var(--geel);}
/* Diepte zonder schaduw: randen + lagen (Apple-store) */
.vid-screen{box-shadow:none;}
.herocard,.herocard.herofaces{box-shadow:none;border:1px solid rgba(0,0,0,.06);}

/* ============================================================
   v34 — caption in beide app-plaatjes, doorzichtig/lijn-stijl
   ============================================================ */
.eenapp .foto{position:relative;overflow:hidden;border-radius:var(--r-xl);}
.eenapp .foto img{width:100%;height:100%;object-fit:cover;display:block;}
.app-cap{position:absolute;left:16px;right:16px;bottom:16px;padding:14px 18px;border:1px solid rgba(255,255,255,.5);border-radius:var(--r-lg);color:#fff;background:rgba(255,255,255,.07);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);text-shadow:0 1px 10px rgba(0,0,0,.35);}
.app-cap .ac-kop{font-size:1.125rem;font-weight:600;letter-spacing:-.01em;}
.app-cap .ac-sub{font-size:0.8125rem;color:rgba(255,255,255,.88);margin-top:4px;line-height:1.4;}

/* ============================================================
   v35 — Hero A: foto links + video rechts, tekst gecentreerd eronder
   ============================================================ */
.ahero-a{padding:18px 0 8px;}
.ha-media{display:flex;gap:16px;height:clamp(300px,40vw,440px);}
.ha-foto,.ha-vid{flex:1;border-radius:var(--r-lg);overflow:hidden;background:#e7e8ea;}
.ha-foto{background-size:cover;background-position:center;}
.ha-vid{background:#6836E6;}
.ha-vid video{width:100%;height:100%;object-fit:cover;display:block;}
.ha-txt{text-align:center;padding:30px 0 10px;max-width:680px;margin:0 auto;}
.ha-txt .eyebrow{font-size:0.75rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--tekst-licht);}
.ha-txt h1{font-size:clamp(2.125rem,5vw,3.5rem);letter-spacing:-.035em;line-height:1.02;color:var(--tekst);margin:12px 0 14px;}
.ha-txt .lead{font-size:1rem;line-height:1.6;color:var(--tekst-zacht);max-width:520px;margin:0 auto 22px;}
.ha-cta{display:flex;gap:11px;justify-content:center;flex-wrap:wrap;}
.knop-licht{background:var(--wit);border:1px solid var(--lijn-donker);color:var(--tekst);font-size:0.9375rem;font-weight:500;padding:13px 26px;border-radius:var(--r-pill);cursor:pointer;transition:background .2s ease,border-color .2s ease;}
.knop-licht:hover{background:var(--grijs-1);border-color:#75767B;}
.ha-rating{margin-top:18px;font-size:0.8125rem;color:var(--tekst-licht);}
.ha-rating .sterren{color:#3a3d42;letter-spacing:1px;margin-right:7px;}
@media (max-width:760px){.ha-media{flex-direction:column;height:auto;gap:12px;}.ha-foto,.ha-vid{height:230px;}.ha-txt{padding:24px 0 6px;}}

/* ============================================================
   v36 — Hero A paginabreed (full-bleed)
   ============================================================ */
.ahero-a{width:100vw;margin-left:calc(50% - 50vw);padding:18px clamp(16px,3vw,40px) 8px;}
.ha-media{height:clamp(320px,44vw,540px);gap:18px;}
@media (max-width:760px){.ahero-a{padding:14px 16px 4px;}.ha-media{height:auto;}}

/* ============================================================
   v37 — Piekfijn-pagina: flex/HQ-scheiding, zwarte funnel, cases, FAQ
   ============================================================ */
.knop-geel{background:var(--geel);color:#16181a;border:none;padding:13px 26px;border-radius:var(--r-pill);font-size:0.9375rem;font-weight:600;cursor:pointer;transition:filter .2s ease,transform .15s ease;}
.knop-geel:hover{filter:brightness(.96);transform:translateY(-1px);}

/* Twee paden: flex breed, HQ verticaal */
.paden{display:grid;grid-template-columns:1.6fr 1fr;gap:20px;margin-top:22px;align-items:start;}
.pad{background:var(--wit);border:1px solid var(--lijn);border-radius:var(--r-lg);overflow:hidden;}
.pad-foto{background-size:cover;background-position:center;position:relative;}
.pad--flex .pad-foto{aspect-ratio:16/9;}
.pad--hq .pad-foto{aspect-ratio:3/4;}
.pad-tag{position:absolute;left:14px;top:14px;background:rgba(0,0,0,.6);color:#fff;font-size:0.75rem;font-weight:500;padding:6px 13px;border-radius:var(--r-pill);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);}
.pad-body{padding:22px 24px 24px;}
.pad-body h3{font-size:1.3125rem;letter-spacing:-.02em;margin-bottom:8px;}
.pad-body p{font-size:0.9375rem;color:var(--tekst-zacht);line-height:1.55;margin-bottom:16px;}
@media(max-width:760px){.paden{grid-template-columns:1fr;} .pad--hq .pad-foto{aspect-ratio:16/9;}}

/* Zwarte funnel met gele accenten */
.funnel{background:#6836E6;border-radius:var(--r-xl);padding:48px 40px;margin-top:66px;color:#fff;}
.funnel-eye{color:var(--geel);font-size:0.75rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;margin-bottom:10px;}
.funnel-kop h2{color:#fff;font-size:1.875rem;letter-spacing:-.03em;}
.funnel-stappen{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin:34px 0 30px;}
.fstap{border-top:1px solid rgba(255,255,255,.16);padding-top:16px;}
.fstap .fnr{font-size:1.5rem;font-weight:700;color:var(--geel);letter-spacing:-.02em;}
.fstap h4{font-size:1rem;margin:9px 0 6px;color:#fff;}
.fstap p{font-size:0.8125rem;color:rgba(255,255,255,.62);line-height:1.5;}
@media(max-width:760px){.funnel{padding:34px 22px;} .funnel-stappen{grid-template-columns:1fr 1fr;}}

/* Cases */
.cases{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:22px;}
.case{background:var(--wit);border:1px solid var(--lijn);border-radius:var(--r-lg);overflow:hidden;}
.case-foto{aspect-ratio:16/10;background-size:cover;background-position:center;position:relative;}
.case-tag{position:absolute;left:14px;top:14px;background:rgba(0,0,0,.6);color:#fff;font-size:0.75rem;font-weight:500;padding:6px 12px;border-radius:var(--r-pill);}
.case-body{padding:22px 24px 24px;}
.case-body h3{font-size:1.25rem;letter-spacing:-.02em;margin-bottom:8px;}
.case-pf{font-size:0.9375rem;color:var(--tekst-zacht);line-height:1.6;margin-bottom:16px;}
.case-quote{border-left:2px solid var(--geel);padding-left:14px;font-size:0.9375rem;color:var(--tekst);line-height:1.5;border-radius:0;}
.case-wie{display:block;font-size:0.8125rem;color:var(--tekst-licht);margin-top:7px;}
@media(max-width:760px){.cases{grid-template-columns:1fr;}}

/* FAQ accordion */
.faq{max-width:820px;margin-top:8px;}
.faq-item{border-bottom:1px solid var(--lijn);}
.faq-v{width:100%;background:none;border:none;text-align:left;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:20px 4px;font-size:0.9375rem;font-weight:500;color:var(--tekst);cursor:pointer;letter-spacing:-.01em;}
.faq-ic{font-size:1.375rem;color:var(--tekst-licht);flex-shrink:0;transition:transform .2s ease;}
.faq-item.open .faq-ic{transform:rotate(45deg);}
.faq-a{max-height:0;overflow:hidden;transition:max-height .3s ease;}
.faq-item.open .faq-a{max-height:260px;}
.faq-a p{padding:0 4px 20px;font-size:0.9375rem;color:var(--tekst-zacht);line-height:1.65;max-width:700px;margin:0;}

/* ============================================================
   v39 — brede flex-kaart, verhalen-carousel, kantoorteam-balkjes,
   geel app-rondje, sterkere foto-gradient + hover
   ============================================================ */
/* Brede Flexteam-kaart (zelfde design, full width) */
.flexwide{margin-bottom:16px;}
.jobcard--wide{aspect-ratio:auto;height:clamp(280px,30vw,360px);width:100%;}
.jobcard--wide .joblabel{right:auto;width:auto;max-width:min(420px,70%);}

/* Sterkere zwarte gradient onderaan + lichter bij hover */
.jobcard .grad{background:linear-gradient(180deg,rgba(10,12,14,.30) 0%,rgba(10,12,14,0) 28%,rgba(10,12,14,0) 44%,rgba(10,12,14,.64) 100%);transition:opacity .3s ease;}
.jobcard img{transition:transform .55s ease, filter .3s ease;}
.jobcard:hover img{filter:brightness(1.09);}
.jobcard:hover .grad{opacity:.8;}

/* Verhalen-carousel (zelfde kaarten, doorscrollend) */
.verhalen-carousel{overflow:hidden;margin-top:6px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);}
.verhalen-track{display:flex;gap:18px;width:max-content;animation:scrollx 60s linear infinite;}
.verhalen-track .bento-card{width:300px;flex-shrink:0;aspect-ratio:2/3;}

/* Kantoorteam: balkje met naam + functie (2 regels) + pijl */
.faces-track .face{position:relative;}
.facelabel{position:absolute;left:10px;right:10px;bottom:10px;background:#fff;border-radius:var(--r-md);padding:9px 10px 9px 14px;display:flex;align-items:center;justify-content:space-between;gap:8px;}
.facelabel .ft{display:flex;flex-direction:column;min-width:0;}
.facelabel .fn{font-size:0.875rem;font-weight:600;color:#16181a;line-height:1.15;}
.facelabel .ff{font-size:0.6875rem;color:var(--tekst-licht);margin-top:2px;}
.facelabel .jarrow{width:32px;height:32px;}
.facelabel .jarrow svg{width:15px;height:15px;}
.faces-track .face:hover .jarrow{background:var(--geel);}

/* "Alles in één app": geel pijl-rondje op de captions */
.app-cap{display:flex;align-items:center;justify-content:space-between;gap:12px;}
.ac-txt{min-width:0;}
.ac-arrow{width:38px;height:38px;border-radius:var(--r-md);background:var(--geel);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.ac-arrow svg{width:17px;height:17px;}

/* ============================================================
   v40 — analoge film-look (middenweg) op de foto's
   ============================================================ */
.ha-foto,.jobcard img,.bento-card img,.faces-track .face img,.case-foto,.pad-foto,.eenapp .foto img,.quote .who img,.dethero{
  filter:sepia(.17) saturate(.85) contrast(.92) brightness(1.05);
}
.jobcard:hover img{filter:sepia(.10) saturate(.92) contrast(.95) brightness(1.12);}
/* fijne korrel + warme rand-vignette */
.ha-foto::after,.jobcard::after,.bento-card::after,.faces-track .face::after,.eenapp .foto::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:1;border-radius:inherit;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity:.10;mix-blend-mode:overlay;
}
.faces-track .face .facelabel,.jobcard .joblabel,.bento-card .bloglabel{z-index:3;}

/* ============================================================
   v41 — origineel beeld terug, hero-accent, glassy 2-laags team, FAQ-kader
   ============================================================ */
/* Analoge look uit — originele foto's */
.ha-foto,.jobcard img,.bento-card img,.faces-track .face img,.case-foto,.pad-foto,.eenapp .foto img,.quote .who img,.dethero{filter:none;}
.jobcard:hover img{filter:brightness(1.08);}
.ha-foto::after,.jobcard::after,.bento-card::after,.faces-track .face::after,.eenapp .foto::after{display:none;}

/* Hero-accent: lime marker onder "events" (geen rainbow, geen streepje) */
.acc-geel{background:linear-gradient(transparent 62%, rgba(194,255,173,.85) 62%);padding:0 .04em;}

/* Kantoorteam: 2 rijen, tegendraads, kleinere tussenruimte, glassy label */
.faces-carousel.two{overflow:hidden;display:flex;flex-direction:column;gap:12px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);}
.faces-carousel.two .faces-track{display:flex;gap:12px;width:max-content;animation:scrollx 70s linear infinite;}
.faces-carousel.two .faces-track.rev{animation:scrollx-rev 70s linear infinite;}
@keyframes scrollx-rev{from{transform:translateX(-50%)}to{transform:translateX(0)}}
.faces-track .face{width:188px;height:240px;}
.facelabel{position:absolute;left:10px;bottom:10px;right:auto;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.5);-webkit-backdrop-filter:blur(9px);backdrop-filter:blur(9px);border-radius:var(--r-md);padding:8px 13px;display:block;text-shadow:0 1px 5px rgba(0,0,0,.34);}
.facelabel .fn{font-size:0.8125rem;font-weight:600;color:#fff;display:block;line-height:1.15;}
.facelabel .ff{font-size:0.6875rem;color:rgba(255,255,255,.88);display:block;margin-top:1px;}

/* Verhalen: alleen projectnaam (label = naam + pijl) */
.verhalen-track .bloglabel .t{font-size:0.9375rem;font-weight:600;}

/* FAQ in wit afgerond kader met spacing */
/* De kop stond al gecentreerd, de kaart eronder niet: max-width zonder auto-marges
   blijft gewoon links hangen. Vandaar dat het blok "op dezelfde plek" bleef staan. */
.faq-card{background:#fff;border:1px solid var(--lijn);border-radius:var(--r-xl);padding:8px 30px;max-width:880px;margin-left:auto;margin-right:auto;}
.faq-card .faq{max-width:none;margin-top:0;}
.faq-card .faq-item:last-child{border-bottom:none;}

/* Event-logo's: gevarieerde merk-achtige lettertypes */
.logoword.lw0{font-family:'Anton',sans-serif;text-transform:uppercase;letter-spacing:.03em;font-weight:400;}
.logoword.lw1{font-family:'Playfair Display',serif;font-style:italic;font-weight:600;}
.logoword.lw2{font-family:'Archivo Black',sans-serif;text-transform:uppercase;letter-spacing:-.01em;font-weight:400;}
.logoword.lw3{font-weight:600;font-style:italic;letter-spacing:.02em;}

/* ============================================================
   v42 — verhalen handmatig 3-up, grotere flex-knop, hero-lucht, story
   ============================================================ */
.facelabel{text-align:left;}
.faces-track .face{flex-shrink:0;}
.faq-v{color:#3a3d42;}

/* Verhalen: handmatige scroll (pijlen), 3 zichtbaar, meer hoogte, geen fade */
.carr-nav{display:flex;gap:8px;}
.carr-btn{width:44px;height:44px;border-radius:var(--r-md);border:1px solid var(--lijn-donker);background:#fff;color:#16181a;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .2s ease;}
.carr-btn:hover{background:var(--grijs-1);}
.carr-btn svg{width:18px;height:18px;}
.verhalen-scroll{display:flex;gap:28px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:6px;margin-top:10px;scrollbar-width:none;}
.verhalen-scroll::-webkit-scrollbar{display:none;}
/* Verhaalkaarten wat compacter: de foto's domineerden de pagina. */
.verhalen-scroll .bento-card{flex:0 0 calc((100% - 84px)/4);scroll-snap-align:start;aspect-ratio:auto;height:clamp(300px,31vw,430px);}
@media(max-width:860px){.verhalen-scroll .bento-card{flex:0 0 64%;height:330px;}}

/* Brede flex-kaart: grotere knop/pijl + titel */
.jobcard--wide .joblabel{padding:16px 16px 16px 24px;}
.jobcard--wide .joblabel .jt{font-size:1.3125rem;}
.jobcard--wide .joblabel .js{font-size:0.8125rem;}
.jobcard--wide .jarrow{width:52px;height:52px;}
.jobcard--wide .jarrow svg{width:22px;height:22px;}

/* Hero-tekstblok meer lucht (spacing is key) */
.ha-txt{padding:42px 0 16px;}
.ha-txt h1{margin:16px 0 20px;}
.ha-txt .lead{margin-bottom:28px;}

/* Verhaal (blogpost-pagina) */
.vh-hero{position:relative;border-radius:var(--r-xl);min-height:330px;background-size:cover;background-position:center;display:flex;align-items:flex-end;margin:14px 0 28px;}
.vh-hero-ov{padding:40px;}
.vh-hero-ov .vh-eyebrow{font-size:0.75rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--geel);margin-bottom:10px;}
.vh-hero-ov h1{color:#fff;font-size:clamp(2.125rem,5vw,3.375rem);letter-spacing:-.03em;line-height:1.03;}
/* Stond smaller dan de foto/header erboven; nu dezelfde breedte. */
.vh-body{max-width:none;margin:0;}
.vh-body p{font-size:1.0625rem;line-height:1.8;color:var(--tekst-zacht);margin-bottom:20px;}
.vh-cta{max-width:680px;margin:18px auto 0;}

/* ============================================================
   v44 — Flex-split: event-foto links + carrousel rechts (1 geheel)
   ============================================================ */
.flexsplit{display:grid;grid-template-columns:0.9fr 1.1fr;gap:12px;height:clamp(300px,34vw,400px);margin-top:4px;}
.flexsplit > div{height:100%;min-width:0;}
.jobcard--half{aspect-ratio:auto;height:100%;width:100%;}
.flex-carr{overflow:hidden;border-radius:var(--r-xl);}
.flex-carr-track{display:flex;gap:10px;height:100%;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;}
.flex-carr-track::-webkit-scrollbar{display:none;}
.flex-ev{position:relative;flex:0 0 46%;height:100%;border-radius:var(--r-xl);overflow:hidden;border:none;padding:0;cursor:pointer;scroll-snap-align:start;background:var(--grijs-1);}
.flex-ev img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease;}
.flex-ev:hover img{transform:scale(1.04);}
.flex-ev .grad{position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,12,14,.06),rgba(10,12,14,.58));pointer-events:none;}
.flex-ev-lab{position:absolute;left:14px;bottom:14px;color:#fff;font-size:0.9375rem;font-weight:600;letter-spacing:-.01em;text-shadow:0 1px 5px rgba(0,0,0,.34);z-index:2;}
@media(max-width:760px){.flexsplit{grid-template-columns:1fr;height:auto;gap:10px;} .flexsplit #home-flex .jobcard{height:240px;} .flex-carr{height:200px;} .flex-ev{flex:0 0 72%;}}

/* Hero-titel + lead iets groter (in verhouding) */
.ha-txt h1{font-size:clamp(2.5rem,5.6vw,4rem);}
.ha-txt .lead{font-size:1.1875rem;max-width:560px;}

/* ============================================================
   v45 — Hero slideshow + rechts foto/video split, zwart kader-titel,
         paginabreedte = hero, HQ-filterchips, mini-vacaturekaarten,
         grotere sfeerimpressie, nette praktische-knop
   ============================================================ */
/* Pagina even breed als de hero */
.pub-main{max-width:1480px;}
.ahero-a{width:auto;margin-left:0;padding:6px 0 8px;}

/* Hero media: links slideshow (50%), rechts foto + verticale video (elk 25%) */
.ha-media{display:grid;grid-template-columns:1fr 1fr;gap:14px;height:clamp(340px,40vw,520px);}
.ha-right{display:grid;grid-template-columns:1fr 1fr;gap:14px;min-width:0;}
.ha-foto,.ha-foto2,.ha-vid{border-radius:var(--r-xl);overflow:hidden;background:#e7e8ea;}
.ha-foto2{background-size:cover;background-position:center;}
.ha-slideshow{background-size:cover;background-position:center;}
.ha-vid{background:#6836E6;}

/* Zwart kader-titel met witte letters + geel blok */
.ha-txt-wrap{display:flex;justify-content:center;padding:26px 0 8px;}
.ha-txt{background:#141618;border-radius:var(--r-xl);padding:clamp(36px,4.6vw,58px) clamp(30px,5vw,68px);max-width:780px;text-align:center;margin:0;}
.ha-txt .eyebrow{color:rgba(255,255,255,.58);}
.ha-txt h1{color:#fff;font-size:clamp(2.5rem,5.4vw,4rem);margin:13px 0 16px;}
.ha-txt .lead{color:rgba(255,255,255,.72);font-size:1.125rem;max-width:560px;}
.ha-txt .acc-geel{color:#fff;}

/* Witte knop met geel pijl-rondje (op zwart) + dezelfde knop op de detailkaart */
.knop-licht-d,.knop-cta{display:inline-flex;align-items:center;gap:12px;background:#fff;color:#16181a;border:1px solid rgba(0,0,0,.1);font-size:0.9375rem;font-weight:600;border-radius:var(--r-pill);cursor:pointer;transition:transform .2s ease,border-color .2s ease;}
.knop-licht-d{padding:8px 8px 8px 24px;border:none;}
.knop-licht-d:hover,.knop-cta:hover{transform:translateY(-1px);}
.knop-cta{justify-content:space-between;width:100%;padding:8px 8px 8px 22px;margin-top:6px;}
.knop-cta:hover{border-color:#75767B;}
.cta-arr{width:36px;height:36px;border-radius:var(--r-md);background:#C2FFAD;display:flex;align-items:center;justify-content:center;flex:0 0 auto;}
.cta-arr svg{width:17px;height:17px;}

/* HQ-filterchips */
.dchips{display:flex;gap:8px;flex-wrap:wrap;align-items:center;}
.dchip{background:var(--grijs-1);border:1px solid var(--lijn);color:var(--tekst-zacht);font-size:0.8125rem;font-weight:500;padding:7px 16px;border-radius:var(--r-md);cursor:pointer;transition:background .18s,color .18s,border-color .18s;min-height:44px;display:inline-flex;align-items:center;}
.dchip:hover{border-color:#75767B;}
.dchip.on{background:#6836E6;color:#fff;border-color:#16181a;}

/* Andere vacatures minder prominent (mini-kaarten) */
.jobgrid--mini{grid-template-columns:repeat(3,1fr);gap:14px;}
.jobcard--mini{aspect-ratio:4/3;}
.jobcard--mini .joblabel{padding:12px;}
.jobcard--mini .jt{font-size:0.9375rem;}
.jobcard--mini .jarrow{width:34px;height:34px;}
@media(max-width:680px){.jobgrid--mini{grid-template-columns:1fr 1fr;}}

/* Sfeerimpressie groter */
.galerij{grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px;}
.galerij .g{aspect-ratio:4/5;border-radius:var(--r-lg);}

@media(max-width:760px){
  .ha-media{grid-template-columns:1fr;height:auto;}
  .ha-right{grid-template-columns:1fr 1fr;height:220px;}
  .ha-foto.ha-slideshow{height:240px;}
  .ha-txt{border-radius:var(--r-xl);padding:30px 22px;}
}

/* ============================================================
   v46 — Hero terug naar licht (zwart kader weg), 1 foto links +
         video rechts; HQ-blok kleiner/ingekaderd; kantoorteam
         statisch 6-per-rij; meer rust/spacing tussen blokken
   ============================================================ */
/* Hero-tekst weer licht/gecentreerd */
.ha-txt{background:none;border-radius:0;padding:34px 0 12px;max-width:700px;margin:0 auto;text-align:center;}
.ha-cta{justify-content:center;}
.ha-foto,.ha-foto2{background-position:center;background-size:cover;}
.ha-txt .eyebrow{color:var(--tekst-licht);}
.ha-txt h1{color:var(--tekst);}
.ha-txt .lead{color:var(--tekst-zacht);}
.ha-txt .acc-geel{color:inherit;}

/* HQ-vacatures subtieler: smaller container + meer lucht boven */
.hq-blok{max-width:1060px;margin:112px auto 0;}

/* Kantoorteam statisch, 6 per rij */
.faces-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px;}
/* De kaart had een lichte achtergrond op een donkere sectie. Doordat de foto de kaart
   net niet tot de laatste pixel vulde, zag je onderaan een lichte streep. Kaart nu donker
   en de foto absoluut over het hele vlak, zodat er niets meer doorheen kan schijnen. */
.faces-grid .face{position:relative;min-width:0;width:100%;height:clamp(220px,17vw,264px);border-radius:var(--r-lg);overflow:hidden;background:#1F2123;margin:0;font-size:0;line-height:0;}
.faces-grid .face img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;filter:grayscale(1);}
@media(max-width:1000px){.faces-grid{grid-template-columns:repeat(4,minmax(0,1fr));}}
@media(max-width:620px){.faces-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;}}

/* Meer rust tussen de blokken */
.logos-sectie{margin-top:116px;margin-bottom:116px;}
.quote{margin-top:120px;margin-bottom:120px;}
.faces-sectie{margin-top:120px;}
.verhalen-scroll{margin-bottom:8px;}
.eenapp{margin-bottom:8px;}

/* ============================================================
   v51 — Hero-overlap fix (verticale video spilde uit de nested grid),
         blog met diepte (lead/kopjes/streepjes/quote/highlight),
         praktische-kaart rebrand (grijze bol-pijl knoppen)
   ============================================================ */
/* Hero: verticale video dwong de rechter-grid hoger dan de media → clippen + rijen vastzetten */
.ahero-a{display:block;}
.ha-media{overflow:hidden;}
.ha-right{height:100%;grid-template-rows:100%;min-height:0;}
.ha-right > *{height:100%;min-height:0;overflow:hidden;}
.ha-txt{padding-top:40px;}

/* Blog: diepte */
.vh-lead{font-size:1.25rem;line-height:1.6;color:var(--tekst);}
.vh-h2{font-size:1.5rem;letter-spacing:-.02em;color:var(--tekst);margin:4px 0 2px;font-weight:650;line-height:1.2;}
.vh-hr{border:none;border-top:1px solid var(--lijn);margin:34px 0 28px;}
.vh-quote{font-size:1.4375rem;line-height:1.42;letter-spacing:-.01em;color:var(--tekst);border-left:3px solid #C2FFAD;padding:2px 0 2px 22px;margin:30px 0;font-weight:500;}
.vh-quote cite{display:block;font-size:0.875rem;color:var(--tekst-licht);font-style:normal;font-weight:500;margin-top:12px;}

/* Praktische-kaart: beide knoppen wit + grijze bol met pijl, links uitgelijnd */
.knop-cta{text-decoration:none;color:#16181a;}
.cta-lbl{display:inline-flex;align-items:center;gap:9px;}
.cta-wa{width:18px;height:18px;flex:0 0 auto;}
.cta-arr{background:#eceef0;transition:background .18s ease;}
.knop-cta:hover .cta-arr{background:#C2FFAD;}

/* ============================================================
   v52 — Praktische rijen: grijze pijl i.p.v. gekleurde icoontjes;
         alle event/job-foto's iets donkerder + lichter bij hover
         (hero + HQ-koppen uitgezonderd); blog-openingstitel
   ============================================================ */
.det-prow{display:flex;align-items:baseline;justify-content:space-between;gap:18px;padding:13px 0;}
#screen-detail .det-prow .pl,#screen-detail .det-prow .pv{font-size:0.875rem;font-weight:400;color:var(--tekst-zacht);line-height:1.4;}
#screen-detail .det-prow .pv{text-align:right;}

/* Er lagen drie lagen verduistering over elke foto: dit filter, een verloop van 55 tot
   58 procent zwart, en dan nog een tekstschaduw onder het label. Samen leest dat als
   schaduw over het hele blok. Het verloop onderin doet het werk; dit filter mag bijna
   weg, zodat de foto's zelf weer kleur hebben. */
.jobcard img,.flex-ev img,.verhalen-scroll .bento-card img,.eenapp .foto img,.portalvid video{filter:brightness(.96);transition:filter .45s ease,transform .5s ease;}
.jobcard:hover img,.flex-ev:hover img,.verhalen-scroll .bento-card:hover img,.eenapp .foto:hover img{filter:brightness(1.03);}

/* v55 — detail-blokken met bullets (echte vacatureteksten) */
.det-blok #det-b1 p,.det-blok #det-b2 p,.det-blok #det-b3 p,.det-blok #det-b4 p{margin:0 0 12px;}
.det-blok #det-b1 p:last-child,.det-blok #det-b2 p:last-child,.det-blok #det-b3 p:last-child,.det-blok #det-b4 p:last-child{margin-bottom:0;}
.det-ul{list-style:none;margin:6px 0 2px;padding:0;display:flex;flex-direction:column;gap:9px;}
.det-ul li{position:relative;padding-left:24px;line-height:1.5;}
.det-ul li::before{content:"";position:absolute;left:3px;top:9px;width:7px;height:7px;border-radius:var(--r-pill);background:var(--geel,#C2FFAD);}

/* v57 — "Alles in één app": asymmetrische tegels + 1 gecentreerde knop */
.eenapp-grid--asym{grid-template-columns:1.4fr 0.85fr;}
.eenapp-cta{display:flex;justify-content:center;margin-top:24px;}
.eenapp-cta .knop-cta{width:auto;min-width:300px;}
@media(max-width:760px){.eenapp-grid--asym{grid-template-columns:1fr;}.eenapp-cta .knop-cta{width:100%;min-width:0;}}

/* v59 — Portal-reis: klikbare tegels, diensten, contract, gegevens, mini-toast */
.tegel--klik{cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:12px;transition:border-color .15s,transform .12s,box-shadow .15s;}
.tegel--klik:hover{transform:translateY(-1px);border-color:#75767B;}
.tegel-arr{width:34px;height:34px;border-radius:var(--r-md);background:#eceef0;display:flex;align-items:center;justify-content:center;flex:0 0 auto;transition:background .15s;}
.tegel-arr svg{width:16px;height:16px;}
.tegel--klik:hover .tegel-arr{background:var(--geel,#C2FFAD);}

.shifts-lijst{display:flex;flex-direction:column;gap:14px;}
.shift-kaart{display:flex;align-items:center;gap:16px;background:#fff;border:1px solid var(--lijn);border-radius:var(--r-lg);padding:14px;}
.shift-foto{width:104px;height:76px;border-radius:var(--r-md);background-size:cover;background-position:center;flex:0 0 104px;}
.shift-mid{flex:1;min-width:0;}
.shift-naam{font-weight:650;font-size:1rem;letter-spacing:-.01em;}
.shift-meta{color:var(--tekst-zacht);font-size:0.8125rem;margin-top:3px;}
.shift-tags{display:flex;gap:7px;margin-top:9px;}
.shift-tag{font-size:0.75rem;font-weight:600;border:1px solid var(--lijn-donker);color:var(--tekst-zacht);border-radius:var(--r-pill);padding:3px 10px;}
.shift-tag.geld{background:#f3fbe2;border-color:#dcefb0;color:#5c7416;}
.shift-btn{max-width:150px;flex:0 0 auto;}
.shift-btn.done{background:var(--k-groen-zacht);color:var(--k-groen);}
@media(max-width:600px){.shift-kaart{flex-wrap:wrap}.shift-foto{width:100%;flex-basis:100%;height:130px}.shift-btn{width:100%;max-width:none}}

.contract-kaart,.geg-kaart{max-width:820px;padding:32px 36px 34px;}
.contract-kop{font-size:1.125rem;font-weight:650;margin-bottom:14px;}
.contract-rij{display:flex;justify-content:space-between;padding:11px 0;border-bottom:1px solid var(--lijn);font-size:0.9375rem;}
.contract-rij span{color:var(--tekst-licht);}
.contract-note{color:var(--tekst-licht);font-size:0.8125rem;margin:14px 0;}
.contract-akkoord{display:flex;align-items:center;gap:9px;font-size:0.875rem;margin:6px 0 16px;cursor:pointer;}
.contract-akkoord input{width:auto;}
.geg-rij{margin-bottom:14px;}
.geg-rij label{display:block;font-size:0.8125rem;color:var(--tekst-licht);margin-bottom:5px;}
.geg-rij input{width:100%;border:1px solid var(--lijn-donker);border-radius:var(--r-md);padding:10px 12px;font-size:0.9375rem;font-family:inherit;color:var(--tekst);min-height:44px;box-sizing:border-box;}
.knop--vol.done{background:var(--k-groen-zacht);color:var(--k-groen);}

.mini-toast{position:fixed;bottom:28px;left:50%;transform:translateX(-50%) translateY(24px);background:#7342F4;color:#fff;padding:12px 22px 12px 18px;border-radius:var(--r-pill);font-size:0.8125rem;font-weight:500;letter-spacing:-.005em;box-shadow:inset 0 .5px 0 rgba(255,255,255,.06);opacity:0;transition:opacity .22s cubic-bezier(.32,.72,0,1),transform .22s cubic-bezier(.32,.72,0,1);z-index:200;pointer-events:none;max-width:calc(100vw - 32px);display:inline-flex;align-items:center;gap:10px;isolation:isolate;overflow:hidden}
.mini-toast::before{content:"";display:inline-block;width:6px;height:6px;border-radius:var(--r-pill);background:#C2FFAD;box-shadow:0 0 0 3px rgba(194,255,173,.16);flex:0 0 6px}
.mini-toast::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(135deg,rgba(255,255,255,.05),transparent 45%);border-radius:inherit}
.mini-toast.show{opacity:1;transform:translateX(-50%) translateY(0);}

/* v60 — detail centreren + knop-spacing + label/value-contrast + bullets niet geel */
#screen-detail .det-layout{margin-left:auto;margin-right:auto;}
.det-card .knop-cta:first-of-type{margin-top:18px;}
#screen-detail .det-prow .pl,#screen-detail .det-prow .pv{color:var(--tekst-zacht);}
.det-ul li::before{background:#33363b;}

/* v61 — Portal: veel minder geel (knoppen charcoal i.p.v. lime), klein accent blijft */
#app-shell .knop, #app-shell .knop--vol, #app-shell .knop.mini{background:#6836E6;color:#fff;border:none;}
#app-shell .knop:hover, #app-shell .knop--vol:hover, #app-shell .knop.mini:hover{background:#2a2d31;}
#app-shell .knop--vol.done, #app-shell .knop.mini.done{background:#eef0f2;color:#3a3d42;}
/* Info- en huisregelkaart */
.info-kaart,.hr-kaart{max-width:620px;padding:26px 28px;}
.info-kop{font-size:1.125rem;font-weight:650;margin-bottom:12px;letter-spacing:-.01em;}
.info-kaart p{color:var(--tekst-zacht);line-height:1.6;margin-bottom:12px;}
.info-sub{font-size:0.8125rem;color:var(--tekst-licht);}
.hr-lijst{list-style:none;margin:6px 0 18px;padding:0;display:flex;flex-direction:column;gap:12px;}
.hr-lijst li{position:relative;padding-left:26px;line-height:1.5;color:var(--tekst);}
.hr-lijst li::before{content:"";position:absolute;left:4px;top:8px;width:7px;height:7px;border-radius:var(--r-pill);background:#33363b;}

/* v62 — Video Hireflix-afwerking (minder geel, review/retake) + portal-diepte */
.vid-recbtn{background:#6836E6;color:#fff;box-shadow:none;}
.vid-recbtn:hover{transform:translateY(-2px);}
.vid-recbtn.dark{background:#6836E6;color:#fff;}
.vid-recbtn.ghost{background:#fff;color:#16181a;border:1px solid var(--lijn-donker);box-shadow:none;}
.vid-recbtn.ghost:hover{border-color:#75767B;}
.vid-recbtn.stop{background:var(--k-rood);color:#fff;box-shadow:none;}
.vid-dots span.nu{background:#6836E6;}
.vid-mini.check{background:var(--k-groen);}
.vid-review-knoppen{display:flex;gap:11px;flex-wrap:wrap;justify-content:center;}
.vid-screen.review{border-color:#16181a;box-shadow:none;}
.vid-screen.review video{transform:none;object-fit:contain;background:#000;}

/* Portal: meer diepte, kaders, rondingen (admin-niveau) */
#app-shell .saldo-kaart,#app-shell .paneel,#app-shell .tegel{box-shadow:none;border:1px solid #ebedee;border-radius:var(--r-lg);}
#app-shell .tegel--klik{transition:box-shadow .16s,transform .12s,border-color .16s;}
#app-shell .tegel--klik:hover{box-shadow:none;transform:translateY(-2px);border-color:#dde0e4;}
#app-shell .paneel{border-radius:var(--r-lg);}
#app-shell .info-kaart,/* ================================================================ */
/* HUISREGELS (26-08-2026)                                          */
/* Zes blokken met een genummerde kop, twee soorten inhoud: een     */
/* opsomming, of twee kolommen voor bedragen en gevolgen.           */
/* ================================================================ */
/* De regels zijn een document geworden, geen lijstje van zes. Iets meer breedte leest
   prettiger, maar niet zo breed dat de regels te lang worden. */
/* ================================================================ */
/* DASHBOARD na de onboarding (26-08-2026)                          */
/* Drie kaarten met echte waarden, in plaats van acht vinkjes bij   */
/* stappen die toch allemaal al af zijn.                            */
/* ================================================================ */
#app-shell .dash{margin:4px 0 8px}
#app-shell .dash-kop{margin-bottom:16px}
#app-shell .dash-kop h3{margin:0;font-size:1.125rem;font-weight:600;letter-spacing:-.02em;color:var(--tx)}
#app-shell .dash-kop span{display:block;margin-top:3px;font-size:0.8125rem;color:var(--tx3)}
#app-shell .dash-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));gap:14px}
#app-shell .dash-kaart{background:#fff;border:1px solid var(--bd2);border-radius:var(--r-lg);
  padding:18px 18px 16px;display:flex;flex-direction:column}
#app-shell .dash-kaart-kop{display:flex;align-items:center;gap:9px;padding-bottom:12px;
  margin-bottom:4px;border-bottom:1px solid var(--hair)}
#app-shell .dash-kaart-kop h4{margin:0;font-size:0.9375rem;font-weight:600;letter-spacing:-.015em;color:var(--tx)}
#app-shell .dash-ic{flex:none;width:26px;height:26px;display:inline-flex;align-items:center;justify-content:center;
  border-radius:8px;background:var(--s1);color:var(--tx2)}
#app-shell .dash-ic svg{width:15px;height:15px;display:block}
#app-shell .dash-rij{display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  padding:9px 0;border-bottom:1px solid var(--hair)}
#app-shell .dash-rij:last-of-type{border-bottom:0}
#app-shell .dash-lbl{font-size:0.75rem;color:var(--tx3);flex:none}
#app-shell .dash-w{font-size:0.8125rem;color:var(--tx);text-align:right;min-width:0;word-break:break-word}
#app-shell .dash-w i{color:var(--tx3);font-style:normal}
#app-shell .dash-btn{margin-top:14px;align-self:stretch;text-align:center;text-decoration:none;
  font:inherit;font-size:0.8125rem;font-weight:500;color:var(--tx);background:var(--s1);
  border:1px solid var(--bd2);border-radius:var(--r-sm);padding:10px 14px;min-height:44px;
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer;
  transition:background .16s var(--ease),border-color .16s var(--ease)}
#app-shell .dash-btn:hover{background:var(--s2);border-color:var(--tx3)}
@media(max-width:560px){
  #app-shell .dash-rij{flex-direction:column;gap:2px}
  #app-shell .dash-w{text-align:left}
}
#app-shell .hr-kaart{max-width:720px}
/* Navigatiebalk onder de contractstappen. */
#app-shell .pu-ct-nav{display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  margin-top:18px;padding:16px 18px;background:var(--s2);border:1px solid var(--bd);
  border-radius:var(--r-lg)}
#app-shell .pu-ct-nav > :first-child{flex:none}
#app-shell .pu-ct-nav #ct-stap-status{flex:1;min-width:180px;text-align:left}
#app-shell .pu-ct-nav #ct-volgende{flex:none}
#app-shell .pu-ct-nav .pu-ct-btn.uit{opacity:.45}
#app-shell .pu-ct-nav--terug{justify-content:flex-start}
/* Een stap die nog niet aan de beurt is, is ook niet aanklikbaar. */
#app-shell .pu-ct-rail-step.uit{opacity:.4}
#app-shell .pu-ct-rail-step.af{cursor:pointer}
#app-shell .pu-ct-rail-step.af .pu-ct-rail-num{background:var(--k-groen);border-color:var(--k-groen);color:#fff}
@media(max-width:640px){
  #app-shell .pu-ct-nav{flex-direction:column;align-items:stretch;gap:12px}
  #app-shell .pu-ct-nav .pu-ct-btn{width:100%}
  #app-shell .pu-ct-nav #ct-stap-status{text-align:center}
}
#app-shell .hr-hero{padding:4px 0 22px;border-bottom:1px solid var(--hair);margin-bottom:26px}
#app-shell .hr-eyebrow{display:block;font-size:0.6875rem;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--tx3);margin-bottom:9px}
#app-shell .hr-hero h2{font-size:1.5rem;font-weight:600;letter-spacing:-.026em;margin:0;color:var(--tx)}
#app-shell .hr-hero p{margin:8px 0 0;font-size:0.875rem;line-height:1.6;color:var(--tx2);max-width:56ch}
#app-shell .hr-blok{padding:0 0 26px;margin-bottom:26px;border-bottom:1px solid var(--hair)}
#app-shell .hr-blok:last-of-type{border-bottom:0;padding-bottom:8px;margin-bottom:8px}
#app-shell .hr-blok-kop{display:flex;align-items:center;gap:11px;margin-bottom:14px}
#app-shell .hr-nr{flex:none;width:26px;height:26px;display:inline-flex;align-items:center;justify-content:center;
  border-radius:8px;background:var(--tx);color:#fff;font-size:0.75rem;font-weight:600;
  font-variant-numeric:tabular-nums}
#app-shell .hr-blok-kop h3{margin:0;font-size:1.0625rem;font-weight:600;letter-spacing:-.02em;color:var(--tx)}
#app-shell .hr-blok .hr-lijst{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px}
#app-shell .hr-blok .hr-lijst li{position:relative;padding-left:20px;font-size:0.875rem;line-height:1.6;color:var(--tx2)}
#app-shell .hr-blok .hr-lijst li::before{content:"";position:absolute;left:2px;top:9px;width:6px;height:6px;
  border-radius:2px;background:var(--bd2)}
#app-shell .hr-blok .hr-lijst li b{color:var(--tx);font-weight:600}
#app-shell .hr-tab{margin:0;display:flex;flex-direction:column;gap:0;
  border:1px solid var(--bd);border-radius:var(--r-md);overflow:hidden}
#app-shell .hr-tr{display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  padding:11px 15px;border-bottom:1px solid var(--hair)}
#app-shell .hr-tr:last-child{border-bottom:0}
#app-shell .hr-tr:nth-child(odd){background:var(--s1)}
#app-shell .hr-tab dt{margin:0;font-size:0.875rem;color:var(--tx);font-weight:500;min-width:0}
#app-shell .hr-tab dd{margin:0;font-size:0.875rem;color:var(--tx2);text-align:right;white-space:nowrap;
  font-variant-numeric:tabular-nums}
#app-shell .hr-tab--boete dd{color:var(--k-rood);font-weight:500}
#app-shell .hr-noot{margin:12px 0 0;font-size:0.8125rem;line-height:1.6;color:var(--tx3);max-width:62ch}
@media(max-width:560px){
  #app-shell .hr-tr{flex-direction:column;gap:3px}
  #app-shell .hr-tab dd{text-align:left;white-space:normal}
}
#app-shell .hr-kaart,#app-shell .contract-kaart,#app-shell .geg-kaart{box-shadow:none;border:1px solid #ebedee;}

/* v65 — portal-knoppen: lime-gloed neutraliseren (charcoal, zoals career-page) */
#app-shell .knop, #app-shell .knop--vol, #app-shell .knop.mini{box-shadow:none;}

/* v67 — video 3-2-1 aftelling */
.vid-aftel{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:6.25rem;font-weight:800;color:#fff;background:rgba(0,0,0,.5);z-index:6;letter-spacing:-.03em;}

/* v68 — kandidaat-portal: onboarding-formulier + handtekening-pad */
.geg-tweekol{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.geg-tweekol .geg-rij{margin-bottom:0}
/* Op een telefoon paste de geboortedatum-rij niet in een halve kolom: de maand kromp naar 26px. */
@media(max-width:640px){
  .geg-tweekol{grid-template-columns:1fr;gap:14px}
  .gebdat-rij{grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr) minmax(0,1fr)}
}
.geg-veilig{font-size:0.6875rem;color:#8a8f96;font-weight:500;margin-left:6px;letter-spacing:.01em}
.geg-klaar{margin-top:6px;background:#f1f8e8;border:1px solid #d9ecbb;color:#46611a;border-radius:var(--r-md);padding:13px 16px;font-size:0.9375rem;font-weight:600}
.sign-wrap{position:relative;margin:6px 0 4px}
.sign-canvas{width:100%;height:160px;background:#fafbfb;border:1.5px dashed var(--lijn-d,#D2D2D7);border-radius:var(--r-lg);touch-action:none;cursor:crosshair;display:block}
.sign-hint{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);text-align:center;color:#71737A;font-size:0.875rem;pointer-events:none}
.sign-clear{position:absolute;top:10px;right:10px;background:#fff;border:1px solid var(--lijn-d,#D2D2D7);border-radius:var(--r-pill);padding:5px 13px;font-size:0.8125rem;font-weight:600;color:#5a5e64;cursor:pointer;box-shadow:none}
.sign-clear:hover{background:#f4f5f6}

/* v69 — app-download eindstap */
.app-klaar{padding:0;overflow:hidden}
.app-hero{text-align:center;padding:38px 30px 26px;background:linear-gradient(180deg,#f6f8f3,#fff);border-bottom:1px solid var(--lijn,#E8E8ED)}
.app-emoji{font-size:2.875rem;margin-bottom:8px}
.app-hero h2{font-size:1.5rem;letter-spacing:-.02em;margin-bottom:8px}
.app-hero p{color:var(--tekst-zacht,#636369);max-width:440px;margin:0 auto;line-height:1.55}
.app-foto-blok{display:flex;align-items:center;gap:18px;padding:24px 30px;border-bottom:1px solid var(--lijn,#E8E8ED)}
.app-foto{width:74px;height:74px;flex:0 0 74px;border-radius:var(--r-lg);background:#eef0f2 center/cover no-repeat;display:flex;align-items:center;justify-content:center;border:2px dashed #cfd2d6}
.app-foto span{font-size:1.875rem;color:#aeb2b8;font-weight:300}
.app-foto-t{font-weight:650;font-size:1rem}
.app-foto-s{color:var(--tekst-zacht,#636369);font-size:0.8125rem;margin:2px 0 10px;max-width:320px}
.app-foto-btn{display:inline-flex;cursor:pointer}
.app-check{padding:20px 30px;display:flex;flex-direction:column;gap:11px;border-bottom:1px solid var(--lijn,#E8E8ED)}
.app-check-rij{display:flex;align-items:center;gap:11px;font-size:0.9375rem}
/* Een open punt is nu een knop die je naar dat scherm brengt, geen dood streepje. */
.app-check-open{width:100%;text-align:left;background:none;border:0;padding:6px 8px;margin:-6px -8px;border-radius:var(--r-sm);color:inherit;font:inherit;cursor:pointer;}
.app-check-open:hover{background:#F3F3F6;}
.ac-doe{margin-left:auto;font-size:0.8125rem;font-weight:550;color:var(--tekst-zacht,#636369);}
.app-check-open:hover .ac-doe{color:var(--tekst,#1D1D1F);text-decoration:underline;text-underline-offset:3px;}
.ac-ok,.ac-no{width:22px;height:22px;flex:0 0 22px;border-radius:var(--r-sm);display:inline-flex;align-items:center;justify-content:center;font-size:0.75rem;font-weight:700}
.ac-ok{background:var(--k-groen);color:#fff}
.ac-no{background:#e6e7ea;color:#a1a1a6}
.app-stores{display:flex;gap:12px;padding:24px 30px 8px;flex-wrap:wrap}
.app-store{flex:1;min-width:170px;display:flex;align-items:center;gap:12px;background:#6836E6;color:#fff;border:none;border-radius:var(--r-lg);padding:12px 18px;cursor:pointer;transition:transform .12s,opacity .15s}
.app-store:hover{transform:translateY(-1px);opacity:.94}
.app-store .as-ic{font-size:1.5rem;line-height:1}
.app-store span span,.app-store>span{display:flex;flex-direction:column;align-items:flex-start;font-weight:650;font-size:1.0625rem;letter-spacing:-.01em}
.app-store small{font-weight:400;font-size:0.6875rem;opacity:.8;letter-spacing:0}
.app-note{text-align:center;color:var(--licht,#707076);font-size:0.8125rem;padding:8px 30px 26px}

/* v72 — inlog-modal (magic link) */
.inlog-overlay{position:fixed;inset:0;background:rgba(20,22,24,.42);z-index:200;display:none;align-items:center;justify-content:center;padding:20px;backdrop-filter:blur(2px)}
.inlog-overlay.open{display:flex}
.inlog-box{position:relative;background:#fff;border-radius:var(--r-xl);padding:34px 32px 30px;width:100%;max-width:380px;box-shadow:none;text-align:center}
.inlog-x{position:absolute;top:6px;right:8px;width:44px;height:44px;display:flex;align-items:center;justify-content:center;background:none;border:none;font-size:1.5rem;color:#71737A;cursor:pointer;line-height:1}
.inlog-ic{font-size:2.5rem;margin-bottom:8px}
.inlog-kop{font-size:1.375rem;font-weight:700;letter-spacing:-.02em;margin-bottom:8px}
.inlog-sub{color:var(--tekst-zacht,#636369);font-size:0.9375rem;line-height:1.5;margin-bottom:18px}
.inlog-box input{width:100%;border:1px solid var(--lijn-d,#D2D2D7);border-radius:var(--r-md);padding:13px 15px;font-size:0.9375rem;margin-bottom:12px;outline:none;text-align:center}
.inlog-box input:focus{border-color:#16181a}
.inlog-box .inlog-veld{text-align:left;margin-bottom:12px}
.inlog-box .inlog-veld label{display:block;font-size:0.75rem;font-weight:500;color:#636369;letter-spacing:.01em;margin:0 4px 6px;text-transform:uppercase}
.inlog-box .inlog-veld input{margin-bottom:0;text-align:left}
.inlog-fout{color:var(--k-rood);font-size:0.8125rem;text-align:left;margin:-4px 0 10px;min-height:16px}
.inlog-links{display:flex;flex-direction:column;gap:8px;margin-top:14px;font-size:0.8125rem;color:#636369}
.inlog-links a{color:#16181a;font-weight:600;text-decoration:underline;cursor:pointer;display:inline-flex;align-items:center;min-height:44px;align-self:flex-start}
.inlog-foot{margin-top:16px;font-size:0.8125rem;color:var(--tekst-zacht,#636369)}
.inlog-foot a{color:#16181a;font-weight:600;text-decoration:underline;cursor:pointer}
/* Login-tabs: 2 gelijkwaardige tabs, segmented control */
.inlog-tabs{display:grid;grid-template-columns:1fr 1fr;gap:0;background:#F2F2F5;border:1px solid #E5E5E9;border-radius:var(--r-md);padding:4px;margin:0 auto 18px;max-width:320px}
.inlog-tab{background:transparent;border:none;padding:9px 8px;font-size:0.8125rem;font-weight:500;color:#636369;cursor:pointer;border-radius:var(--r-sm);transition:all .16s;font-family:inherit;letter-spacing:-.005em;min-height:44px}
.inlog-tab:hover{color:#1D1D1F}
.inlog-tab.actief{background:#fff;color:#1D1D1F;box-shadow:0 0 0 0.5px rgba(20,22,24,.06)}
body.merk-packup .inlog-tab.actief{color:#16181a}

/* ===== v73 — achterkant rustiger: grijs/zwart, geel = fluistering, géén paars. Gescoped op #app-shell ===== */
#app-shell{--accent:#1D1D1F;--accent-tint:#F2F2F4;--accent-rand:#E6E6E9;--accent-tekst:#1D1D1F;background:#EFEFF1;}
#app-shell .zijbalk{background:rgba(255,255,255,.85);}
/* geel uit standaard beeld -> charcoal */
#app-shell .nav-knop.actief::before{background:#1D1D1F;}
#app-shell .saldo-kaart.accent::before{background:#1D1D1F;}
#app-shell .stap.nu .bol{border:2px solid #1D1D1F;box-shadow:0 0 0 4px rgba(29,29,31,.08);}
#app-shell .stap.nu .bol::after{background:#1D1D1F;}
#app-shell .voortgang span{background:#1D1D1F;}
/* primaire knoppen: charcoal (nooit geel) */
#app-shell .knop{background:#1D1D1F;color:#fff;border:1px solid #1D1D1F;box-shadow:none;}
#app-shell .knop:hover{background:#000;transform:translateY(-1px);}
#app-shell .knop.mini{box-shadow:none;}
/* kaarten/panelen vlakker & koeler (diepte via grijslagen + dunne lijn) */
#app-shell .saldo-kaart,#app-shell .tegel{box-shadow:none;}
#app-shell .saldo-kaart:hover,#app-shell .tegel:hover{transform:translateY(-1px);box-shadow:none;}
#app-shell .paneel{box-shadow:none;}
#app-shell .saldo-kaart.accent{border-color:#E6E6E9;}
/* hover-fluistering geel op de nav-iconen */
#app-shell .nav-knop:not(.actief):hover .icoon{color:#7e9e1f;}
#app-shell .zijbalk-logo .punt{color:#7e9e1f;}
/* video-achterkant: donkere knop ipv evt. lime */
#app-shell .vid-recbtn{background:#1D1D1F;color:#fff;}
#app-shell .vid-recbtn.dark{background:#1D1D1F;}
#app-shell .vid-screen-ov .vid-eyebrow{color:#cfd2cb;}

/* ===== v74 — achterkant verfijning (Jony-Ive: dun, lijntjes, grijze blokjes, pijl-knoppen die geel worden + bewegen). Gescoped op #app-shell ===== */
/* dunnere, elegantere typografie */
#app-shell .pagina-kop h1{font-weight:550;letter-spacing:-.035em;}
#app-shell .saldo-getal{font-weight:540;letter-spacing:-.03em;}
#app-shell .saldo-label{font-weight:450;letter-spacing:.01em;}
#app-shell .paneel-kop{font-weight:550;letter-spacing:-.02em;}
#app-shell .stap .st-titel{font-weight:500;letter-spacing:-.015em;}
#app-shell .stap.nu .st-titel{font-weight:560;}
#app-shell .tegel .val{font-weight:540;letter-spacing:-.02em;}
#app-shell .info-kop,#app-shell .geg-kaart,#app-shell .contract-kop{font-weight:550;}

/* status-kaarten = lichtgrijze 'blokjes' (mockup info-vlak) ipv wit, dunne lijn, subtiele diepte */
#app-shell .saldo-kaart{background:#F6F6F8;border:1px solid #E6E6E9;box-shadow:none;}
#app-shell .saldo-kaart:hover{background:#F2F2F5;transform:none;box-shadow:none;}
#app-shell .saldo-kaart.accent{background:#fff;}

/* hoofdpanelen: wit, dunne lijn, hele zachte diepte */
#app-shell .paneel{background:#fff;border:1px solid #E6E6E9;box-shadow:none;}

/* ---- KNOPPEN: echt grijs + dun, met diagonale pijl die geel wordt en beweegt bij hover ---- */
#app-shell .knop, #app-shell .knop.mini, #app-shell .knop--vol{
  background:#F2F2F4;color:#1D1D1F;border:1px solid #E2E2E5;font-weight:500;letter-spacing:-.01em;
  box-shadow:none;gap:9px;padding:11px 17px;border-radius:var(--r-md);transition:background .2s,border-color .2s;
}
#app-shell .knop::after{
  content:"";width:15px;height:15px;flex:0 0 15px;margin-left:1px;background:#1D1D1F;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7M9 7h8v8'/%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 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7M9 7h8v8'/%3E%3C/svg%3E") center/contain no-repeat;
  transition:transform .24s cubic-bezier(.34,1.3,.5,1),background .2s;
}
#app-shell .knop:hover, #app-shell .knop.mini:hover, #app-shell .knop--vol:hover{background:#ECECEF;border-color:#8A8A90;transform:none;}
#app-shell .knop:hover::after, #app-shell .knop.mini:hover::after, #app-shell .knop--vol:hover::after{background:#C2FFAD;transform:translate(3px,-3px);}
#app-shell .knop:active::after{transform:translate(1px,-1px);}
#app-shell .knop.mini{padding:8px 14px;font-size:0.8125rem;border-radius:var(--r-md);}
#app-shell .knop--vol{justify-content:space-between;padding:14px 18px;font-size:0.9375rem;}
/* secundaire/ghost knop ook met pijl */
#app-shell .knop-stil{background:#fff;border:1px solid #E2E2E5;color:#1D1D1F;font-weight:500;display:inline-flex;align-items:center;gap:8px;}
#app-shell .knop-stil::after{content:"";width:14px;height:14px;background:#9A9A9E;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7M9 7h8v8'/%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 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7M9 7h8v8'/%3E%3C/svg%3E") center/contain no-repeat;
  transition:transform .24s cubic-bezier(.34,1.3,.5,1),background .2s;}
#app-shell .knop-stil:hover{border-color:#8A8A90;background:#F7F7F8;}
#app-shell .knop-stil:hover::after{background:#1D1D1F;transform:translate(2px,-2px);}
#app-shell .geg-idbtn{display:inline-flex;align-items:center;gap:10px;padding:12px 20px;background:#fff;border:1px solid #E2E2E5;border-radius:var(--r-md);font-size:0.875rem;font-weight:500;color:#1D1D1F;cursor:pointer;transition:all .16s;font-family:inherit;letter-spacing:-.005em}
#app-shell .geg-idbtn:hover{border-color:#1D1D1F;background:#F7F7F8;transform:translateY(-1px)}
#app-shell .geg-idbtn::after{content:"";width:14px;height:14px;background:#1D1D1F;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7M9 7h8v8'/%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 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7M9 7h8v8'/%3E%3C/svg%3E") center/contain no-repeat;
  transition:transform .18s}
/* Geboortedatum: 3 losse velden (dag / maand / jaar) */
.gebdat-rij{display:grid;grid-template-columns:76px minmax(0,1fr) 96px;gap:8px}
.gebdat-rij input,.gebdat-rij select{width:100%;border:1px solid var(--lijn-d,#D2D2D7);border-radius:var(--r-md);padding:12px 13px;font-size:0.9375rem;font-family:inherit;background:#fff;color:inherit}
.gebdat-rij input:focus,.gebdat-rij select:focus{outline:none;border-color:#16181a}
.gebdat-rij .veld-select{margin:0}
#video-flow .gebdat-rij input,#video-flow .gebdat-rij select{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.16);color:#fff}
/* ID-upload hint */
#app-shell .geg-idhint{font-size:0.8125rem;color:#8A8A8F;margin:4px 0 0;line-height:1.45}
/* ID: 2 upload-slots naast elkaar */
#app-shell .geg-idslots{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:8px}
#app-shell .geg-idslots .geg-idbtn{width:100%;justify-content:center;padding:14px 16px}
#app-shell .geg-idslots .geg-idlbl{flex:1;text-align:center}
@media (max-width:520px){#app-shell .geg-idslots{grid-template-columns:1fr}}

/* ---- LIJNTJES tussen regels + lichtgrijze blokjes ---- */
/* huisregels: rij met dunne scheidingslijn ipv kale bullets */
#app-shell .hr-lijst{list-style:none;padding:0;margin:6px 0 4px;}
#app-shell .hr-lijst li{position:relative;border-top:1px solid #ECECEF;padding:13px 0 13px 22px;font-size:0.9375rem;color:#3a3a3d;}
#app-shell .hr-lijst li:first-child{border-top:none;}
#app-shell .hr-lijst li::before{content:"";position:absolute;left:2px;top:19px;width:7px;height:7px;border-radius:var(--r-sm);background:#D6D6DA;}
/* akkoord-checkbox los van de lijst met een lijn erboven, in lichtgrijs blok */
#app-shell .contract-akkoord{margin-top:6px;padding:14px;background:#F6F6F8;border:1px solid #ECECEF;border-radius:var(--r-md);font-size:0.875rem;}
/* huisregels bewaren als pdf: stille tekstknop tussen de lijst en het akkoord.
   Bewust geen .knop-stil: die wordt verderop met !important grijs overschreven. */
.hr-pdf{display:inline-flex;align-items:center;gap:8px;margin:16px 0 4px;font-size:0.8125rem;font-weight:550;color:#1F2024;text-decoration:none;}
.hr-pdf::before{content:"";width:14px;height:17px;flex:0 0 14px;border:1.4px solid currentColor;border-radius:3px;opacity:.5;}
.hr-pdf:hover{text-decoration:underline;text-underline-offset:3px;}
/* gegevens-velden met dunne scheidingslijnen */
#app-shell .geg-rij{padding:14px 0;border-top:1px solid #ECECEF;}
#app-shell .geg-rij:first-child{border-top:none;}
#app-shell .geg-rij label{font-weight:450;}
/* contract-regels al lijntjes — net iets luchtiger */
#app-shell .contract-rij{border-color:#ECECEF;}
#app-shell .geg-klaar{background:#F2F7EA;border-color:#DCEBC6;}

/* dunnere nav-iconen */
#app-shell .nav-knop .icoon{stroke-width:1.6;}

/* ===== v76 — video + training in dezelfde verfijnde achterkant-stijl (grijze pijl-knoppen, geen groot zwart) ===== */
#app-shell .vid-recbtn{background:#F2F2F4;color:#1D1D1F;border:1px solid #E2E2E5;box-shadow:none;font-weight:500;gap:10px;}
#app-shell .vid-recbtn.dark{background:#F2F2F4;color:#1D1D1F;border:1px solid #E2E2E5;}
#app-shell .vid-recbtn:hover{background:#ECECEF;border-color:#8A8A90;transform:translateY(-1px);}
#app-shell .vid-recbtn:not(.stop)::after{content:"";width:16px;height:16px;flex:0 0 16px;background:#1D1D1F;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7M9 7h8v8'/%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 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7M9 7h8v8'/%3E%3C/svg%3E") center/contain no-repeat;
  transition:transform .24s cubic-bezier(.34,1.3,.5,1),background .2s;}
#app-shell .vid-recbtn:not(.stop):hover::after{background:#C2FFAD;transform:translate(3px,-3px);}
/* record-knop met rode stip krijgt geen pijl (het is geen 'ga'-actie) */
#app-shell .vid-recbtn:has(.vrb-dot)::after{display:none;}
/* stop blijft rood (signaal) */
#app-shell .vid-recbtn.stop{background:var(--k-rood);color:#fff;border-color:var(--k-rood);}
#app-shell .vid-intro{color:var(--tekst-zacht);}
#app-shell .vid-screen-ov .vid-eyebrow{color:#d4d6cf;font-weight:600;}
/* training: rustige lichtgrijze kaart + dunne kop */
#app-shell .info-kaart{background:#fff;border:1px solid #E6E6E9;box-shadow:none;}
#app-shell .info-kaart .info-kop{font-weight:550;letter-spacing:-.02em;}
#app-shell .info-kaart p{color:#4a4a4d;}
#app-shell .info-kaart .info-sub{color:var(--tekst-licht);border-top:1px solid #F0F0F2;padding-top:13px;margin-top:6px;}

/* ===== v77 — portal polish: uitlijning, verhoudingen, echte diepte, JUISTE groen ===== */
/* juiste 'huis'-groen (clean, zoals planningsapp) — 1 plek om te wijzigen */
#app-shell{--g:var(--k-groen);--g-bg:var(--k-groen-zacht);--g-tx:var(--k-groen);--g-bd:var(--k-groen-pastel);}

/* FIX: tracker-titel stond 40px scheef door .inhoud class-botsing met hoofdcontent */
#app-shell .stap{gap:16px;}
#app-shell .stap .inhoud{padding-top:3px !important;padding-bottom:24px;}
#app-shell .stap .bol{width:28px;height:28px;font-size:0.8125rem;align-self:flex-start;}
/* afgeronde stappen = juiste groen (positieve voortgang), huidige = charcoal ring */
#app-shell .stap.done .bol{background:var(--g);border-color:var(--g);}
#app-shell .stap.done .lijn{background:var(--g);}
#app-shell .stap.nu .bol{border:2px solid #1D1D1F;box-shadow:0 0 0 4px rgba(29,29,31,.07);}
#app-shell .stap.nu .bol::after{background:#1D1D1F;width:9px;height:9px;}
#app-shell .stap .st-titel{font-size:0.9375rem;font-weight:550;letter-spacing:-.015em;}
#app-shell .stap.toekomst .st-titel{color:#AFAFB4;font-weight:500;}
#app-shell .stap .st-sub{font-size:0.8125rem;color:#8C8C90;}

/* groen-blokken: juiste groen */
#app-shell .geg-klaar{background:var(--g-bg);border-color:var(--g-bd);color:var(--g-tx);font-weight:550;}

/* STATUS-KAARTEN: compacter, consistente verhouding, witte 'focus'-kaart pakt diepte */
#app-shell .saldo-rij{gap:14px;margin-bottom:26px;}
#app-shell .saldo-kaart{background:#F4F4F6;border:1px solid #E6E6E9;border-radius:var(--r-lg);padding:15px 17px;box-shadow:none;}
#app-shell .saldo-kaart.accent{background:#fff;border-color:#E6E6E9;box-shadow:none;}
#app-shell .saldo-kaart.accent::before{display:none;}
#app-shell .saldo-label{font-size:0.6875rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:#6E6E73;margin-bottom:9px;}
#app-shell .saldo-getal{font-size:1.3125rem;font-weight:550;letter-spacing:-.025em;line-height:1.15;}
#app-shell .saldo-detail{font-size:0.8125rem;color:#8C8C90;margin-top:6px;}

/* PANELEN + tegels: echte (subtiele) diepte ipv plat wit */
#app-shell .paneel{border-radius:var(--r-lg);border:1px solid #E6E6E9;box-shadow:none;}
#app-shell .paneel-kop{padding:18px 24px;font-weight:600;font-size:0.9375rem;letter-spacing:-.01em;border-bottom:1px solid #F0F0F2;}
#app-shell .tegel{border-radius:var(--r-lg);box-shadow:none;}

/* H1 + koppen: nette verhouding */
#app-shell .pagina-kop{margin-bottom:32px;}
#app-shell .pagina-kop h1{font-size:1.5625rem;font-weight:600;letter-spacing:-.035em;}

/* tracker-paneel iets meer lucht */
#app-shell #tracker{padding:22px 24px 8px !important;}

/* ===== v78 — lime + grijs subtieler; géén losse groen; lime leeft op donker, zwart zachter ===== */
/* tijdlijn: zachte charcoal bolletjes + LIME accent (lime-op-donker = brand). geen groen. */
#app-shell .stap .bol{color:#fff;}
#app-shell .stap.done .bol{background:#7342F4;border-color:#7342F4;color:#C2FFAD;}
#app-shell .stap.nu .bol{background:#7342F4;border:none;box-shadow:0 0 0 4px rgba(194,255,173,.18);}
#app-shell .stap.nu .bol::after{content:'';width:9px;height:9px;border-radius:var(--r-pill);background:#C2FFAD;}
#app-shell .stap.done .lijn,#app-shell .stap .lijn{background:#DADADF;}
#app-shell .stap.toekomst .bol{background:#fff;border:1px solid #D2D2D7;}
/* zwart zachter in grote elementen */
#app-shell .saldo-getal{color:#26282B;font-weight:540;}
#app-shell .pagina-kop h1{color:#1F2024;}
/* 'klaar/akkoord' = licht grijs blok i.p.v. groen */
#app-shell .geg-klaar{background:#F6F6F8;border:1px solid #E6E6E9;color:#2A2D31;font-weight:550;}
/* focus-status-kaart: subtiel lime-accentstreepje bovenaan */
#app-shell .saldo-kaart.accent{position:relative;}
#app-shell .saldo-kaart.accent::before{content:"";display:block;position:absolute;left:17px;right:17px;top:0;height:2.5px;border-radius:0 0 3px 3px;background:#C2FFAD;}

/* ===== v79 — Boomer-stijl: ronde pijl-knoppen, géén losse iconen, lijntjes, kleiner/dunner, meer grijze blokjes + diepte ===== */
/* NAV: geen iconen (tekst, zoals Boomer), kleiner */
#app-shell .nav-knop .icoon{display:none !important;}
#app-shell .nav-knop{font-size:0.8125rem;padding:9px 13px;font-weight:500;min-height:44px;}
#app-shell .nav-knop.actief{font-weight:600;}
#app-shell .zijbalk-logo{font-size:1.125rem;}
#app-shell .zijbalk-sub{font-size:0.625rem;}

/* TYPOGRAFIE: dunner + kleiner */
#app-shell .pagina-kop h1{font-size:1.3125rem;font-weight:550;letter-spacing:-.03em;color:#1F2024;}
#app-shell .saldo-label{font-size:0.625rem;font-weight:600;letter-spacing:.06em;color:#A0A0A5;}
#app-shell .saldo-getal{font-size:1.125rem;font-weight:550;letter-spacing:-.02em;color:#26282B;}
#app-shell .saldo-detail{font-size:0.6875rem;color:#6E6E73;}
#app-shell .paneel-kop{font-size:0.8125rem;font-weight:600;letter-spacing:.01em;}
#app-shell .stap .st-titel{font-size:0.9375rem;font-weight:550;}
#app-shell .stap .st-sub{font-size:0.8125rem;color:#6E6E73;}

/* STATUS-KAARTEN: compacte grijze tiles, witte focus-tile met diepte */
#app-shell .saldo-rij{gap:12px;margin-bottom:22px;}
#app-shell .saldo-kaart{background:#F3F3F5;border:1px solid #EAEAEC;border-radius:var(--r-lg);padding:13px 15px;box-shadow:none;}
#app-shell .saldo-kaart.accent{background:#fff;border-color:#EAEAEC;box-shadow:none;}
#app-shell .saldo-label{margin-bottom:7px;}

/* PANELEN: meer diepte */
#app-shell .paneel{border-radius:var(--r-lg);border:1px solid #EAEAEC;box-shadow:none;}
#app-shell .paneel-kop{padding:16px 22px;border-bottom:1px solid #F0F0F2;}
#app-shell #tracker{padding:8px 22px 4px !important;}

/* TRACKER: lijntjes tussen stappen (structuur), kleinere bol */
#app-shell .stap{border-top:1px solid #F2F2F4;padding-top:18px;}
#app-shell .stap:first-child{border-top:none;}
#app-shell .stap .inhoud{padding-top:1px !important;padding-bottom:18px;}
#app-shell .stap .bol{width:24px;height:24px;font-size:0.75rem;}
#app-shell .stap.nu .bol::after{width:8px;height:8px;}
#app-shell .stap .col{padding-top:0;}

/* ===== RONDE PIJL-KNOPPEN (lime = primair, grijs = secundair). géén pill, tekst + cirkel ===== */
#app-shell .knop, #app-shell .knop.mini, #app-shell .knop--vol{
  background:transparent !important;border:none !important;box-shadow:none !important;padding:0 !important;
  display:inline-flex;align-items:center;gap:11px;font-size:0.8125rem;font-weight:550;color:#1F2024;letter-spacing:-.01em;border-radius:0;
}
#app-shell .knop--vol{width:100%;justify-content:space-between;}
#app-shell .knop::after{
  content:"";width:34px;height:34px;flex:0 0 34px;border-radius:var(--r-md);
  background:#C2FFAD url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F2024' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7M9 7h8v8'/%3E%3C/svg%3E") center/15px 15px no-repeat;
  -webkit-mask:none !important;mask:none !important;
  transition:transform .22s cubic-bezier(.34,1.3,.5,1),box-shadow .2s;
}
#app-shell .knop:hover::after{transform:translate(2px,-2px);box-shadow:none;}
#app-shell .knop.mini::after{width:30px;height:30px;flex:0 0 30px;background-size:13px 13px;}
/* secundair (Mijn gegevens e.d.) = grijze cirkel */
#app-shell .knop-stil{background:transparent;border:none;padding:0;display:inline-flex;align-items:center;gap:10px;font-size:0.8125rem;font-weight:550;color:#1F2024;}
#app-shell .knop-stil::after{
  content:"";width:32px;height:32px;flex:0 0 32px;border-radius:var(--r-md);
  background:#ECECEF url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F2024' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7M9 7h8v8'/%3E%3C/svg%3E") center/14px no-repeat;
  -webkit-mask:none !important;mask:none !important;transition:transform .22s cubic-bezier(.34,1.3,.5,1),background-color .2s;
}
#app-shell .knop-stil:hover::after{transform:translate(2px,-2px);background-color:#E3E3E6;}

/* v79b — schonere lijst: verticale timeline-lijn weg (horizontale lijntjes dragen de structuur) */
#app-shell .stap .lijn{display:none;}
#app-shell .stap{gap:14px;align-items:flex-start;}
#app-shell .stap .col{padding-top:1px;}
#app-shell .saldo-kaart.accent::before{left:15px;right:15px;height:2px;}

/* ===== v81 — portal-home in echte template-taal: plat-gelaagd (géén schaduw), grijze info-blokken, lime pill-knoppen, dunne functionele icoontjes ===== */
#app-shell{background:#EFEFF1;}
#app-shell .paneel,#app-shell .saldo-kaart,#app-shell .saldo-kaart.accent,#app-shell .tegel{box-shadow:none !important;}
/* status = compacte KPI-tiles */
#app-shell .saldo-rij{display:grid;grid-template-columns:repeat(auto-fit,minmax(155px,1fr));gap:10px;margin-bottom:18px;}
#app-shell .saldo-kaart{background:#F7F7F8;border:1px solid #E3E3E5;border-radius:var(--r-md);padding:12px 14px;}
#app-shell .saldo-kaart.accent{background:#F2FBDD;border-color:#DCEFA6;}
#app-shell .saldo-kaart.accent::before{display:none;}
#app-shell .saldo-label{font-size:0.625rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#6E6E73;margin-bottom:7px;}
#app-shell .saldo-kaart.accent .saldo-label{color:#5b7016;}
#app-shell .saldo-getal{font-size:1.1875rem;font-weight:550;letter-spacing:-.02em;color:#1D1D1F;}
#app-shell .saldo-detail{font-size:0.6875rem;color:#6E6E73;margin-top:5px;}
#app-shell .saldo-bar{height:5px;border-radius:var(--r-pill);background:#E6E6E9;margin-top:10px;overflow:hidden;}
#app-shell .saldo-bar i{display:block;height:100%;background:#1D1D1F;border-radius:var(--r-pill);}
/* paneel plat + eyebrow-kop */
#app-shell .paneel{background:#fff;border:1px solid #E3E3E5;border-radius:var(--r-lg);}
#app-shell .paneel-kop{font-size:0.6875rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#6E6E73;padding:15px 20px;border-bottom:1px solid #EFEFF1;}
#app-shell #tracker{padding:4px 20px 12px !important;}
/* voortgang-stappen */
#app-shell .vstep{display:grid;grid-template-columns:24px 1fr;gap:14px;padding:15px 0;border-top:1px solid #F1F1F3;}
#app-shell .vstep:first-child{border-top:none;}
#app-shell .vstep-dot{width:24px;height:24px;border-radius:var(--r-pill);display:flex;align-items:center;justify-content:center;font-size:0.75rem;background:#fff;border:1.5px solid #CFCFD3;color:transparent;margin-top:1px;flex:0 0 24px;}
#app-shell .vstep.done .vstep-dot{background:#7342F4;border-color:#7342F4;color:#C2FFAD;}
#app-shell .vstep.nu .vstep-dot{background:#7342F4;border:none;box-shadow:0 0 0 4px rgba(194,255,173,.22);}
#app-shell .vstep.nu .vstep-dot::after{content:"";width:8px;height:8px;border-radius:var(--r-pill);background:#C2FFAD;}
#app-shell .vstep-head{display:flex;align-items:center;gap:9px;flex-wrap:wrap;}
#app-shell .vstep-titel{font-size:0.9375rem;font-weight:550;color:#1D1D1F;letter-spacing:-.015em;}
#app-shell .vstep.toekomst .vstep-titel{color:#B6B6BA;font-weight:500;}
#app-shell .vsub{font-size:0.8125rem;color:#6E6E73;margin-top:3px;}
#app-shell .vstep.toekomst .vsub{color:#BFBFC3;}
#app-shell .vpill{font-size:0.6875rem;font-weight:600;padding:3px 9px;border-radius:var(--r-sm);border:1px solid #E3E3E5;background:#fff;color:#5F5F63;display:inline-flex;align-items:center;gap:4px;}
#app-shell .vpill.ok{background:#F2FBDD;border-color:#DCEFA6;color:#52691a;}
/* grijs info-blok (template .info) */
#app-shell .vblok{background:#F7F7F8;border:1px solid #E3E3E5;border-radius:var(--r-md);padding:10px 12px;margin-top:10px;display:flex;align-items:center;justify-content:space-between;gap:12px;}
#app-shell .vblok-l{font-size:0.8125rem;color:#5F5F63;display:flex;align-items:center;gap:8px;min-width:0;}
#app-shell .vblok-l svg{width:16px;height:16px;flex:0 0 16px;color:#6E6E73;}
/* lime pill-knop met pijl (template .btn-p) */
#app-shell .vbtn{display:inline-flex;align-items:center;gap:7px;background:#C2FFAD;color:#1D1D1F;border:none;border-radius:var(--r-md);padding:9px 14px;font-size:0.8125rem;font-weight:600;letter-spacing:-.01em;cursor:pointer;white-space:nowrap;transition:transform .15s,box-shadow .2s;flex:0 0 auto;}
#app-shell .vbtn svg{width:15px;height:15px;flex:0 0 15px;color:#1D1D1F;transition:transform .2s;}
#app-shell .vbtn:hover{transform:translateY(-1px);box-shadow:none;}
#app-shell .vbtn:hover svg{transform:translate(2px,-2px);}

/* ===================================================================
   v82 — Piekfijn Design Toolkit (achterkant). Gescoped op #app-shell.
   Lime alleen in hover van .cbtn. Geen schaduw. Geen vinkjes/koeienletters.
   =================================================================== */
#app-shell{
  --s0:#F0F0F2; --s1:#F6F6F8; --s2:#FCFCFD;
  --tx:#1A1A1C; --tx2:#48484C; --tx3:#6E6E73;
  --bd:#ECECEE; --bd2:#E0E0E3; --hair:#F1F1F3;
  --char:#7342F4; --lime:#C2FFAD;
  --ease:cubic-bezier(.22,.61,.36,1); --dur:.22s;
  background:var(--s0);
  font-feature-settings:"tnum"; letter-spacing:-.014em; color:var(--tx);
}
#app-shell .inhoud{background:var(--s0);}
/* zijbalk op-token, schoon */
#app-shell .zijbalk{background:var(--s2);border-right:.5px solid var(--bd);}
#app-shell .zijbalk-logo{color:var(--tx);font-weight:500;}
#app-shell .zijbalk-logo .punt{color:var(--tx3);}
#app-shell .zijbalk-sub{color:var(--tx3);}
#app-shell .nav-knop{color:var(--tx2);font-weight:400;font-size:0.8125rem;border-radius:var(--r-md);letter-spacing:-.014em;}
#app-shell .nav-knop:hover{background:var(--s1);color:var(--tx);}
#app-shell .nav-knop.actief{background:var(--s1);color:var(--tx);font-weight:500;}
#app-shell .nav-knop.actief::before{display:none;}
#app-shell .zijbalk-gebruiker{color:var(--tx);font-weight:500;}
#app-shell .knop-uitloggen{border:.5px solid var(--bd2);color:var(--tx2);border-radius:var(--r-pill);font-weight:400;}

/* typografie-rollen */
#app-shell .t-screen-title{font-size:1.1875rem;font-weight:500;letter-spacing:-.025em;color:var(--tx);}
#app-shell .t-hint{font-size:0.75rem;font-weight:400;color:var(--tx3);}
#app-shell .pagina-kop h1{font-size:1.1875rem;font-weight:500;letter-spacing:-.025em;}

/* THE button — ronde pijl, enige knoptype */
#app-shell .cbtn{width:44px;height:44px;border-radius:var(--r-md);background:var(--s0);border:none;cursor:pointer;flex:none;display:inline-flex;align-items:center;justify-content:center;padding:0;transition:background var(--dur) var(--ease),transform var(--dur) var(--ease);box-shadow:none;}
#app-shell .cbtn i{font-size:1.0625rem;color:var(--tx);display:block;transition:transform var(--dur) var(--ease);}
#app-shell .cbtn::after{display:none;}
#app-shell .cbtn:hover{background:var(--lime);transform:scale(1.07);}
#app-shell .cbtn:hover i{transform:translate(1.5px,-1.5px);}
#app-shell .cbtn:active{transform:scale(.96);}
#app-shell .cbtn:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(38,40,43,.14);}
#app-shell .cbtn.lg{width:54px;height:54px;} #app-shell .cbtn.lg i{font-size:1.375rem;}
#app-shell .cbtn.sm{width:44px;height:44px;} #app-shell .cbtn.sm i{font-size:0.875rem;}

/* screen-head */
#app-shell .screen-head,#app-shell .pagina-kop{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:15px;gap:14px;}

/* KPI-tiles */
#app-shell .tile-row{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:20px 0 20px;}
#app-shell .tile{background:var(--s1);border:none;border-radius:var(--r-md);padding:12px 13px;box-shadow:none;}
#app-shell .tile .lbl{font-size:0.6875rem;color:var(--tx3);font-weight:400;}
#app-shell .tile .val{font-size:1.1875rem;font-weight:500;letter-spacing:-.02em;margin:5px 0 2px;color:var(--tx);}
#app-shell .tile .val small{color:var(--tx3);font-weight:400;font-size:0.875rem;}
#app-shell .tile .sub{font-size:0.6875rem;color:var(--tx3);}
#app-shell .bar{height:4px;background:var(--bd2);border-radius:var(--r-pill);overflow:hidden;margin-top:8px;}
#app-shell .bar>span{display:block;height:100%;background:var(--char);}

/* card-list + lrow */
#app-shell .card-list{background:var(--s2);border:.5px solid var(--bd);border-radius:var(--r-lg);padding:4px 16px;box-shadow:none;}
#app-shell .lrow{display:flex;align-items:center;gap:14px;padding:16px 0;border-bottom:.5px solid var(--hair);}
#app-shell .lrow:last-child{border-bottom:none;}
#app-shell .lrow .nm{font-size:0.8125rem;font-weight:500;color:var(--tx);flex:1;min-width:0;}
#app-shell .lrow .nm .meta{color:var(--tx3);font-weight:400;font-size:0.75rem;}
#app-shell .lrow .rhint{font-size:0.75rem;color:var(--tx3);white-space:nowrap;}

/* status-stippen (geen vinkjes) */
#app-shell .dot{width:8px;height:8px;border-radius:var(--r-pill);background:var(--char);flex:none;}
#app-shell .dot.active{box-shadow:0 0 0 3px rgba(38,40,43,.10);}
#app-shell .dot.open{background:none;border:1.5px solid var(--bd2);}

/* avatar */
#app-shell .avatar{width:36px;height:36px;border-radius:var(--r-md);background:var(--char);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:500;font-size:0.75rem;flex:none;}

/* grijs info-blok + action + timeline */
#app-shell .info{display:flex;background:var(--s1);border:none;border-radius:var(--r-md);overflow:hidden;margin:14px 0;}
#app-shell .info>div{flex:1;padding:11px 13px;}
#app-shell .info>div+div{border-left:.5px solid var(--hair);}
#app-shell .info .lbl{font-size:0.6875rem;color:var(--tx3);}
#app-shell .info .val{font-weight:500;font-size:0.875rem;margin-top:3px;color:var(--tx);}
#app-shell .action{display:flex;align-items:center;justify-content:space-between;background:var(--s1);border:none;border-radius:var(--r-lg);padding:13px 15px;gap:12px;}
#app-shell .empty{border:1px dashed var(--bd2);border-radius:var(--r-lg);padding:22px 12px;text-align:center;font-size:0.75rem;color:var(--tx3);}
/* fix: .meta in portal-stappen mag geen front-pill-achtergrond pakken */
#app-shell .lrow .meta{background:none !important;padding:0 !important;border-radius:0 !important;font-weight:400;font-size:0.75rem;color:var(--tx3);}

/* ===== v83 — actie-schermen naar toolkit: action-blok + ronde knop; status-chip; donkerder ===== */
/* action-knoppen (huisregels/gegevens/contract/video) -> grijs action-blok met ronde knop ernaast */
#app-shell .knop, #app-shell .knop--vol, #app-shell .vid-recbtn:not(.stop){
  display:flex !important;align-items:center;justify-content:space-between;gap:12px;width:100%;
  background:var(--s1) !important;border:none !important;border-radius:var(--r-lg);padding:11px 11px 11px 16px !important;
  font-size:0.8125rem;font-weight:500;color:var(--tx) !important;letter-spacing:-.014em;box-shadow:none !important;
}
#app-shell .knop::after, #app-shell .knop--vol::after, #app-shell .vid-recbtn:not(.stop)::after{
  content:"";width:38px;height:38px;flex:none;border-radius:var(--r-md);
  background:var(--s0) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F2022' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7M9 7h8v8'/%3E%3C/svg%3E") center/17px no-repeat;
  -webkit-mask:none !important;mask:none !important;
  transition:background-color var(--dur) var(--ease),transform var(--dur) var(--ease);
}
#app-shell .knop:hover, #app-shell .knop--vol:hover, #app-shell .vid-recbtn:not(.stop):hover{transform:none !important;}
#app-shell .knop:hover::after, #app-shell .knop--vol:hover::after, #app-shell .vid-recbtn:not(.stop):hover::after{background-color:var(--lime);transform:scale(1.07);}
#app-shell .vid-recbtn:not(.stop) .vrb-dot{display:none;}
/* done-status in voortgang: heel licht grijs kadertje + donkerder */
#app-shell .lrow .rhint{background:var(--s1);border-radius:var(--r-sm);padding:4px 10px;color:#5F6066;font-size:0.6875rem;}
/* iets donkerdere secundaire letters */
#app-shell .t-hint, #app-shell .tile .sub, #app-shell .tile .lbl{color:#76777C;}
#app-shell .lrow .nm .meta{color:#76777C;}
/* actie-scherm kaarten -> toolkit card (s2, dunne rand, geen schaduw) */
#app-shell .paneel, #app-shell .hr-kaart, #app-shell .geg-kaart, #app-shell .contract-kaart, #app-shell .info-kaart, #app-shell .app-klaar{
  background:var(--s2) !important;border:.5px solid var(--bd) !important;border-radius:var(--r-lg) !important;box-shadow:none !important;
}
/* akkoord/klaar -> licht grijs blok, geen vinkje-kleur */
#app-shell .geg-klaar{background:var(--s1) !important;border:none !important;color:var(--tx) !important;border-radius:var(--r-md);font-weight:500;}
/* huisregels-tekst iets donkerder */
#app-shell .hr-lijst li{color:#3A3B40;}
/* pagina-kop titel op toolkit */
#app-shell .pagina-kop h1{font-size:1.1875rem;font-weight:500;letter-spacing:-.025em;color:var(--tx);}

/* ===== v84 — video-sollicitatie als echt dashboard (welkom-scherm) ===== */
#app-shell .vidwrap{padding:0;}
#app-shell .vid-page{max-width:680px;margin:0 auto;}
#app-shell .vid-hero{position:relative;border-radius:var(--r-lg);overflow:hidden;height:200px;margin-bottom:12px;border:.5px solid var(--bd);background:var(--char);}
#app-shell .vid-hero video{width:100%;height:100%;object-fit:cover;display:block;}
#app-shell .vid-hero-tag{position:absolute;left:12px;top:12px;background:rgba(252,252,253,.92);color:var(--tx);font-size:0.6875rem;font-weight:500;padding:4px 10px;border-radius:var(--r-sm);}
#app-shell .vid-tiles{grid-template-columns:repeat(4,1fr);}
#app-shell .vid-sectie-label{font-size:0.6875rem;color:#76777C;margin:18px 2px 9px;}
#app-shell .vid-page .lnum{width:24px;height:24px;border-radius:var(--r-sm);background:var(--s1);color:var(--tx2);font-weight:500;font-size:0.75rem;display:flex;align-items:center;justify-content:center;flex:none;}
#app-shell .vid-page .lrow .nm{font-weight:400;color:var(--tx);}

/* ===== v85 — video verticaal (telefoon-kader), split-layout, device-hint ===== */
#app-shell .vid-split{display:grid;grid-template-columns:225px 1fr;gap:18px;align-items:start;margin-bottom:2px;}
#app-shell .vid-phone{position:relative;aspect-ratio:9/16;border-radius:var(--r-xl);overflow:hidden;background:var(--char);border:.5px solid var(--bd);}
#app-shell .vid-phone video{width:100%;height:100%;object-fit:cover;display:block;}
#app-shell .vid-phone .vid-hero-tag{position:absolute;left:11px;top:11px;background:rgba(252,252,253,.92);color:var(--tx);font-size:0.6875rem;font-weight:500;padding:4px 10px;border-radius:var(--r-sm);}
#app-shell .vid-facts{grid-template-columns:1fr 1fr;margin-bottom:0;}
#app-shell .vid-device{margin-top:12px;display:flex;align-items:flex-start;gap:9px;font-size:0.75rem;color:#6C6D72;background:var(--s1);border-radius:var(--r-md);padding:11px 13px;line-height:1.45;}
#app-shell .vid-device i{font-size:1.0625rem;color:var(--tx3);flex:none;margin-top:1px;}
/* opname-scherm ook verticaal, gecentreerd, schone kader */
#app-shell .vid-screen{aspect-ratio:9/16 !important;width:auto !important;max-width:300px;margin:0 auto;border-radius:var(--r-xl) !important;border:.5px solid var(--bd) !important;box-shadow:none !important;background:var(--char);}
#app-shell .vid-studio{max-width:680px;margin:0 auto;}
@media(max-width:720px){#app-shell .vid-split{grid-template-columns:1fr;} #app-shell .vid-phone{max-width:220px;margin:0 auto;}}
/* v86 — video-opname vangnet + in-app hint */
#app-shell .vid-fallback{background:none;border:none;color:#6C6D72;font-size:0.75rem;text-decoration:underline;cursor:pointer;margin-top:6px;padding:4px;}
#app-shell .vid-inapp{background:var(--s1);border-radius:var(--r-md);padding:9px 12px;font-size:0.75rem;color:#6C6D72;margin-top:8px;max-width:340px;text-align:center;}

/* ===== v87 — video-intro-kaart (Hireflix-vorm, toolkit-stijl) ===== */
#app-shell .vintro{background:var(--s2);border:.5px solid var(--bd);border-radius:var(--r-lg);padding:16px 18px 20px;max-width:800px;margin:0 auto 4px;}
#app-shell .vintro-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;padding:2px 2px 0;}
#app-shell .vintro-logo{font-size:1rem;font-weight:600;letter-spacing:-.02em;color:var(--tx);}
#app-shell .vintro-logo .punt{color:var(--tx3);}
#app-shell .vintro-eyebrow{font-size:0.6875rem;color:var(--tx3);}
#app-shell .vintro-body{display:grid;grid-template-columns:1.05fr 1fr;gap:22px;align-items:center;}
#app-shell .vintro-video{position:relative;border-radius:var(--r-lg);overflow:hidden;aspect-ratio:4/3;background:var(--char);cursor:pointer;}
#app-shell .vintro-video img,#app-shell .vintro-video video{width:100%;height:100%;object-fit:cover;display:block;}
#app-shell .vintro-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:58px;height:58px;border-radius:var(--r-lg);background:rgba(252,252,253,.94);display:flex;align-items:center;justify-content:center;transition:background var(--dur) var(--ease),transform var(--dur) var(--ease);}
#app-shell .vintro-play i{font-size:1.5rem;color:var(--tx);margin-left:2px;}
#app-shell .vintro-video:hover .vintro-play{background:var(--lime);transform:translate(-50%,-50%) scale(1.07);}
#app-shell .vintro-tag{position:absolute;left:11px;bottom:11px;background:rgba(31,32,34,.62);color:#fff;font-size:0.6875rem;font-weight:500;padding:4px 9px;border-radius:var(--r-sm);backdrop-filter:blur(4px);}
#app-shell .vintro-title{font-size:1.5rem;font-weight:500;letter-spacing:-.03em;color:var(--tx);margin:0 0 9px;}
#app-shell .vintro-sub{font-size:0.8125rem;color:var(--tx2);line-height:1.55;margin:0 0 15px;}
#app-shell .vintro-facts{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:18px;}
#app-shell .vintro-facts span{font-size:0.6875rem;color:var(--tx2);background:var(--s1);border-radius:var(--r-sm);padding:5px 11px;}
@media(max-width:720px){#app-shell .vintro-body{grid-template-columns:1fr;}}

/* ============ v90 · opname-scherm (vraag) in toolkit-kaartstijl ============ */
#app-shell .vq-body{grid-template-columns:.86fr 1.14fr;align-items:stretch;}
#app-shell .vcam{position:relative;border-radius:var(--r-lg);overflow:hidden;background:var(--char);aspect-ratio:3/4;min-height:280px;}
#app-shell .vcam video{width:100%;height:100%;object-fit:cover;display:block;transform:scaleX(-1);background:var(--char);}
#app-shell .vcam-off{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:6px;padding:26px 22px;}
#app-shell .vcam-ico{width:46px;height:46px;border-radius:var(--r-md);background:rgba(255,255,255,.10);display:flex;align-items:center;justify-content:center;margin-bottom:6px;}
#app-shell .vcam-ico i{font-size:1.375rem;color:rgba(255,255,255,.82);}
#app-shell .vcam-off-t{font-size:0.9375rem;font-weight:500;color:#fff;letter-spacing:-.01em;}
#app-shell .vcam-off-s{font-size:0.8125rem;color:rgba(255,255,255,.60);line-height:1.5;max-width:230px;margin-bottom:8px;}
#app-shell .vcam-off .vid-recbtn{background:#fff !important;color:#1D1D1F !important;border:none !important;box-shadow:none;max-width:260px;}
#app-shell .vcam-off .vid-recbtn:hover{background:#f4f4f6 !important;}
#app-shell .vcam.rec{outline:2px solid var(--k-rood);outline-offset:-2px;}
#app-shell .vcam-timer{position:absolute;top:11px;right:11px;background:rgba(31,32,34,.72);color:#fff;font-size:0.8125rem;font-weight:500;padding:5px 11px;border-radius:var(--r-pill);backdrop-filter:blur(6px);font-variant-numeric:tabular-nums;display:none;align-items:center;gap:7px;}
#app-shell .vcam.rec .vcam-timer{display:inline-flex;}
#app-shell .vcam.rec .vcam-timer::before{content:"";width:8px;height:8px;border-radius:var(--r-pill);background:var(--k-rood);}
#app-shell .vcam-aftel{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:6rem;font-weight:500;color:#fff;background:rgba(31,32,34,.55);letter-spacing:-.03em;font-variant-numeric:tabular-nums;}
#app-shell .vq-from{display:inline-flex;align-items:center;gap:9px;font-size:0.6875rem;color:var(--tx3);margin-bottom:11px;}
#app-shell .vq-play{width:26px;height:26px;border-radius:var(--r-sm);background:var(--char);display:inline-flex;align-items:center;justify-content:center;}
#app-shell .vq-play i{font-size:0.8125rem;color:#fff;margin-left:1px;}
#app-shell .vq-body .vintro-side{display:flex;flex-direction:column;justify-content:center;}
#app-shell .vq-body .vid-ctrl{display:block;text-align:left;margin:0 0 10px;}
#app-shell .vq-body .vid-hint{display:block;margin-top:10px;font-size:0.75rem;color:var(--tx3);}
#app-shell .vid-recbtn[disabled]{opacity:.4;pointer-events:none;}
#app-shell .vid-fallback{display:inline-block;background:none;border:none;padding:0;margin-top:4px;font-size:0.75rem;color:var(--tx3);text-decoration:underline;text-underline-offset:2px;cursor:pointer;}
#app-shell .vid-fallback:hover{color:var(--tx2);}
#app-shell .vid-inapp{font-size:0.75rem;color:var(--tx2);background:var(--s1);border-radius:var(--r-md);padding:9px 12px;margin:4px 0;line-height:1.45;}
@media(max-width:720px){#app-shell .vq-body{grid-template-columns:1fr;}#app-shell .vcam{aspect-ratio:3/4;max-width:320px;margin:0 auto;}}

/* ============ v93 · video-foutscherm (portal) ============ */
#app-shell .vfout{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;padding:40px 24px 44px;max-width:420px;margin:0 auto;}
#app-shell .vfout-ic{width:52px;height:52px;border-radius:var(--r-md);background:var(--s1);display:flex;align-items:center;justify-content:center;margin-bottom:6px;}
#app-shell .vfout-ic i{font-size:1.5rem;color:var(--tx2);}
#app-shell .vfout .vintro-title{font-size:1.25rem;margin-bottom:4px;}
#app-shell .vfout .vintro-sub{margin-bottom:20px;}
#app-shell .vfout .vid-recbtn{max-width:260px;}
#app-shell .vfout-ic.spin i{display:inline-block;animation:vspin 1s linear infinite;}
@keyframes vspin{to{transform:rotate(360deg);}}
#app-shell .vfout-detail{margin-top:16px;font-size:0.6875rem;color:var(--tx3);font-variant-numeric:tabular-nums;}

/* ============ v95 · uitgebreid gegevensformulier + echt contractscherm ============ */
#app-shell .geg-sectie{font-size:0.6875rem;font-weight:600;color:#86878C;margin:26px 0 12px;padding-top:22px;border-top:1px solid #ECECEF;letter-spacing:.06em;text-transform:uppercase;}
#app-shell .geg-kaart .geg-sectie:first-child{border-top:none;padding-top:0;margin-top:0;}
#app-shell .geg-opt{font-weight:400;color:#A0A1A6;font-size:0.6875rem;}
#app-shell .geg-tweekol .geg-rij,#app-shell .geg-adresrij .geg-rij{border-top:none;padding:0;}
#app-shell .geg-tweekol,#app-shell .geg-adresrij{padding:4px 0;margin-bottom:0;}
.geg-adresrij{display:grid;grid-template-columns:1fr 82px 82px;gap:10px;}
.geg-adresrij .geg-sm input{text-align:center;padding-left:6px;padding-right:6px;}
#app-shell .geg-rij select{width:100%;min-height:44px;box-sizing:border-box;border:1px solid var(--lijn-donker);border-radius:var(--r-md);padding:10px 12px;font-size:0.9375rem;font-family:inherit;color:var(--tekst);background-color:#fff;-webkit-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2386878C' stroke-width='2.4'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;}
#app-shell .contract-sub{font-size:0.8125rem;color:#86878C;margin:-8px 0 16px;}
#app-shell .contract-gegevens{display:grid;grid-template-columns:1fr 1fr;gap:2px 18px;background:#F6F6F8;border:1px solid #ECECEF;border-radius:var(--r-md);padding:10px 14px;margin-bottom:6px;}
#app-shell .contract-gegevens>div{display:flex;flex-direction:column;padding:6px 0;}
#app-shell .contract-gegevens span{font-size:0.6875rem;color:#86878C;}
#app-shell .contract-gegevens b{font-size:0.8125rem;font-weight:500;color:var(--tekst);}
#app-shell .contract-waarschuw{font-size:0.8125rem;color:var(--k-oranje);background:var(--k-oranje-zacht);border:1px solid var(--k-oranje-pastel);border-radius:var(--r-md);padding:10px 12px;margin:10px 0;}
#app-shell .contract-leestitel{font-size:0.75rem;font-weight:600;color:#86878C;margin:20px 0 8px;}
#app-shell .contract-tekst{max-height:340px;overflow-y:auto;border:1px solid #ECECEF;border-radius:var(--r-md);padding:14px 16px;background:#fff;}
#app-shell .contract-tekst .ct-h{font-size:0.8125rem;font-weight:600;color:var(--tekst);margin:14px 0 5px;}
#app-shell .contract-tekst .ct-h:first-child{margin-top:0;}
#app-shell .contract-tekst .ct-b{font-size:0.8125rem;font-weight:600;color:var(--tekst);margin:10px 0 4px;}
#app-shell .contract-tekst .ct-p{font-size:0.75rem;line-height:1.5;color:#3a3d42;margin-bottom:5px;white-space:pre-wrap;}
#app-shell .contract-keuze{background:#F6F6F8;border:1px solid #ECECEF;border-radius:var(--r-md);padding:12px 14px;margin-bottom:10px;}
#app-shell .ck-vraag{font-size:0.8125rem;font-weight:550;color:var(--tekst);margin-bottom:8px;}
#app-shell .ck-opt{display:flex;align-items:flex-start;gap:9px;font-size:0.8125rem;color:#3a3d42;padding:6px 0;cursor:pointer;}
#app-shell .ck-opt input{margin-top:2px;flex:none;width:auto;}
#app-shell .contract-dl{margin-top:12px;}

/* ============ v99 · careersite-knoppen naar de nieuwe stijl (alleen knoppen, layout ongemoeid) ============ */
/* Signatuur: zwarte squircle-knop met diagonale pijl, licht op naar lime bij hover. */
.pub-top .rechts .knop,
.ha-cta .knop-licht,
.eenapp-cta .knop-cta{
  background:#7342F4 !important; color:#fff !important; border:1px solid #1A1A1A !important;
  border-radius:var(--r-md) !important; font-weight:500 !important;
  transition:background .2s cubic-bezier(.22,.61,.36,1),color .2s,border-color .2s,transform .2s !important;
}
.pub-top .rechts .knop, .ha-cta .knop-licht{display:inline-flex;align-items:center;gap:9px;}
.pub-top .rechts .knop::after, .ha-cta .knop-licht::after{
  content:"";width:15px;height:15px;flex:none;background:#fff;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7M9 7h8v8'/%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 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7M9 7h8v8'/%3E%3C/svg%3E") center/contain no-repeat;
  transition:transform .2s cubic-bezier(.22,.61,.36,1),background .2s;
}
.pub-top .rechts .knop:hover, .ha-cta .knop-licht:hover, .eenapp-cta .knop-cta:hover{
  background:#C2FFAD !important; color:#16181a !important; border-color:#C2FFAD !important; transform:none !important;
}
.pub-top .rechts .knop:hover::after, .ha-cta .knop-licht:hover::after{ background:#6836E6; transform:translate(1.5px,-1.5px); }
/* de "Meld je aan"-CTA heeft al een pijl-blokje: naar squircle + laat 'm mee-oplichten */
.eenapp-cta .knop-cta .cta-arr{ background:#C2FFAD !important; border-radius:var(--r-sm) !important; }
.eenapp-cta .knop-cta:hover .cta-arr{ background:#6836E6 !important; }
.eenapp-cta .knop-cta:hover .cta-arr svg path{ stroke:#C2FFAD !important; }

/* ============ v100 · knoppen strak naar designspec: squircle + Piekfijn zwart→lime ============ */
/* ═══════════════ KNOPPENSYSTEEM — drie rollen, verder niets ═══════════════
   primair    zwart vlak, witte tekst, lime bij hover   de ene actie die telt
              .knop · .knop-geel · .knop-hero · .knop-cta · .knop-flow · .knop--vol
   secundair  wit vlak met hairline                     nevenactie
              .knop-licht
   stil       zacht grijs, geen rand                    terug, annuleren
              .knop-stil · .knop-uitloggen
   Overal squircle (--r-md), nooit schaduw, minimaal 44px hoog.
   ══════════════════════════════════════════════════════════════════════════ */
.knop, .knop--vol, .knop-licht, .knop-geel, .knop-hero, .knop-stil, .knop-cta, .knop-flow, .knop-uitloggen{
  border-radius:var(--r-md) !important; box-shadow:none !important; min-height:44px;
}
.knop--vol{ padding:13px 16px !important; }

/* Primaire knop (careersite + aanmeld-funnel): ZWART in rust -> LIME bij hover, zwarte tekst */
#public-shell .knop, .knop-geel, .knop-hero, .hero .zoek .knop{
  background:#7342F4 !important; color:#fff !important; border:1px solid #1A1A1A !important; font-weight:500 !important;
  transition:background .2s cubic-bezier(.22,.61,.36,1),color .2s,border-color .2s,transform .2s !important;
}
#public-shell .knop:hover, .knop-geel:hover, .knop-hero:hover, .hero .zoek .knop:hover{
  background:#C2FFAD !important; color:#16181a !important; border-color:#C2FFAD !important; filter:none !important; transform:none !important;
}

/* Secundaire knop (o.a. "Vorige" in de funnel): zacht grijs squircle */
#public-shell .knop-stil, .knop-stil{ background:#EFEFF1 !important; color:#5F5F63 !important; border:1px solid transparent !important; }
#public-shell .knop-stil:hover, .knop-stil:hover{ background:#E7E7EA !important; color:#1D1D1F !important; border-color:transparent !important; }

/* funnel-knoprij netjes uitgelijnd met het veld erboven */
.flow-knoppen{ margin-top:18px; }
/* verborgen 'Vorige' echt laten inklappen zodat 'Volgende' de volle breedte pakt (uitlijning met het veld) */
.flow-knoppen .knop-stil[style*="hidden"]{ display:none !important; }

/* ═══════════════════ v101 · CAREERSITE → BRANDING-SPEC (v6.3) ═══════════════════
   Alles scoped op #public-shell. Regels: geen schaduw (diepte via hairlines) ·
   geen decoratieve bollen/gloed · squircle i.p.v. ronde pil/cirkel ·
   lime & goud ALLEEN op hover, nooit in rust · los groen neutraal. */

/* 1 · Diepte via hairlines i.p.v. schaduw — alle careersite-schaduwen uit */
#public-shell{ --schaduw:none; }
#public-shell .paneel,#public-shell .det-card,#public-shell .det-bieden,#public-shell .bento-card,
#public-shell .jobcard,#public-shell .fcard,#public-shell .herocard,#public-shell .scard,
#public-shell .statkaart,#public-shell .catkaart,#public-shell .story,#public-shell .tegel,
#public-shell .kaartje,#public-shell .kaart-flow,#public-shell .voordeel,#public-shell .benefit,
#public-shell .di,#public-shell .tekst-foto,#public-shell .kopfoto,#public-shell .zoek,
#public-shell .hero,#public-shell .portalvid,#public-shell .playring,#public-shell .playbtn,
#public-shell .play,#public-shell .veld,#public-shell .label,#public-shell .joblabel,
#public-shell .bloglabel,#public-shell .navpill,#public-shell .logoword,#public-shell .locatie,
#public-shell .nr,#public-shell .ck,#public-shell .det-prow,#public-shell .det-blok,
#public-shell .saldo-kaart,#public-shell .kaart{ box-shadow:none !important; }

/* 2 · Geen decoratieve bollen/cirkels/gloed in hero's (spec verbiedt dit expliciet) */
#public-shell .hsp,#public-shell .dethero .deco{ display:none !important; }
#public-shell .det-card::before{ display:none !important; }        /* gouden bovenrand-strip weg */

/* 3 · Detail-hero: schone donkere drager + subtiele diagonale lichtbaan */
#public-shell .dethero{ border-radius:var(--r-lg) !important; background:linear-gradient(150deg,#7342F4,#7342F4) !important; }
#public-shell .dethero::after{ content:""; position:absolute; inset:0; z-index:0;
  background:linear-gradient(122deg,rgba(255,255,255,.06),transparent 44%); pointer-events:none; }
#public-shell .dethero .ov{ position:relative; z-index:1; }
#public-shell .dethero .det-eyebrow{ color:rgba(255,255,255,.52) !important; font-weight:500 !important; }
#public-shell .dethero .metas .meta{ border-radius:var(--r-sm) !important; }

/* 4 · Detail-hero acties: primair wit → lime hover (squircle); "Deel" ghost squircle */
#public-shell .det-hero-acties .knop{ background:#fff !important; color:#16181a !important;
  border:1px solid #fff !important; border-radius:var(--r-md) !important; box-shadow:none !important; }
#public-shell .det-hero-acties .knop:hover{ background:#C2FFAD !important; border-color:#C2FFAD !important; color:#16181a !important; }
#public-shell .det-share{ border-radius:var(--r-md) !important; background:rgba(255,255,255,.10) !important;
  border:1px solid rgba(255,255,255,.26) !important; backdrop-filter:none !important; }
#public-shell .det-share:hover{ background:rgba(255,255,255,.18) !important; }

/* 5 · Zijkaart-knoppen squircle. Primair (button) = zwart → lime go-squircle;
       secundair (link "App voor vragen") = subtiel grijs; pijl-tegel squircle */
#public-shell .knop-cta{ border-radius:var(--r-md) !important; }
#public-shell .knop-cta .cta-arr{ border-radius:var(--r-sm) !important; width:34px !important; height:34px !important; }
#public-shell .det-card button.knop-cta{ background:#7342F4 !important; color:#fff !important; border:1px solid #1A1A1A !important; }
#public-shell .det-card button.knop-cta .cta-arr{ background:#C2FFAD !important; }
#public-shell .det-card button.knop-cta:hover{ background:#C2FFAD !important; color:#16181a !important; border-color:#C2FFAD !important; }
#public-shell .det-card button.knop-cta:hover .cta-arr{ background:#6836E6 !important; }
#public-shell .det-card button.knop-cta:hover .cta-arr svg path{ stroke:#C2FFAD !important; }
#public-shell .det-card a.knop-cta{ background:#EFEFF1 !important; color:#1D1D1F !important; border:1px solid transparent !important; }
#public-shell .det-card a.knop-cta .cta-arr{ background:#E3E3E5 !important; }
#public-shell .det-card a.knop-cta:hover{ background:#E7E7EA !important; }
#public-shell .det-card a.knop-cta:hover .cta-arr{ background:#D8D8DC !important; }

/* 6 · Los groen weg: WhatsApp-glyph neutraal grijs (geen uitgesproken groen) */
#public-shell .cta-wa path{ fill:#5F5F63 !important; }

/* 7 · Geen lime/goud in rust: nummerbadges zwart; vinkjes squircle + neutraal */
#public-shell .det-blok h3 .nr,#public-shell .det-bieden h3 .nr{
  background:#7342F4 !important; color:#fff !important; box-shadow:none !important; border-radius:var(--r-sm) !important; }
#public-shell .det-blok li .ck{ border-radius:var(--r-sm) !important; background:#F1F1F3 !important; }
#public-shell .det-blok li .ck svg{ stroke:#1D1D1F !important; }

/* 8 · Ronde tag-pillen → squircle (spec-taal, radius xs) */
#public-shell .meta,#public-shell .cat{ border-radius:var(--r-sm) !important; }

/* v101b · consistente squircle pijl-tegels (i.p.v. cirkels) + detail-eyebrow tick neutraal.
   Rond blijft alleen: navpill/dchip (segmented control) + avatars (conventie). */
#public-shell .jarrow{ border-radius:var(--r-md) !important; }
#public-shell .carr-btn{ border-radius:var(--r-md) !important; }
#screen-detail .dethero .det-eyebrow::before{ background:rgba(255,255,255,.42) !important; }

/* v101c · verhaal-hero eyebrow grijs i.p.v. lime-in-rust (consistent met detail-eyebrow) */
#public-shell .vh-hero-ov .vh-eyebrow{ color:rgba(255,255,255,.62) !important; }

/* v101d · laatste puntjes naar spec: resterende schaduwen (faces / kaart-pijl / switch-thumb) weg;
   footer-logo punt neutraal i.p.v. lime (consistent met grijze header-middot) */
#public-shell .face,#public-shell .jarrow,#public-shell .switch button,#public-shell .switch .actief{ box-shadow:none !important; }
#public-shell .ft-merk .punt{ color:inherit !important; }

/* ═══════════════ v103 · funnel-diepte + go-squircle knoppen + leeftijd-dropdown + flexteam prominent ═══════════════
   Diepte volgens designdoc §diepte: vlakcontrast (s1) + hairline + donkere accent-rand-links + ankertegel,
   NOOIT schaduw. Lime blijft hover-only. Alles scoped op #public-shell. */

/* ---- Funnel-kaart: minder kaal, echte diepte ---- */
#public-shell .kaart-flow{ position:relative; border:1px solid #E3E3E5 !important; border-radius:var(--r-lg); padding:26px 26px 24px; overflow:hidden; }
#public-shell .kaart-flow::before{ content:""; position:absolute; left:0; top:18px; bottom:18px; width:3px; border-radius:0 3px 3px 0; background:#7342F4; } /* donkere anker-rand links */
#public-shell .kaart-flow .voortgang{ background:#EAEAEC; }
#public-shell .kaart-flow .voortgang span{ background:#7342F4; }
#public-shell .kaart-flow .stap-tel{ text-transform:uppercase; letter-spacing:.07em; font-size:0.6875rem; font-weight:600; color:#6E6E73; }

/* Invoervelden: grijs vlak i.p.v. wit-op-wit (diepte via vlakcontrast) */
#public-shell .veld input, #public-shell .veld textarea, #public-shell .veld select{ background:#F5F5F7 !important; border:1px solid #E3E3E5 !important; border-radius:var(--r-md); transition:background .18s, border-color .18s, box-shadow .18s; }
#public-shell .veld input:focus, #public-shell .veld textarea:focus, #public-shell .veld select:focus{ background:#fff !important; border-color:#1A1A1A !important; box-shadow:0 0 0 4px rgba(26,26,26,.07) !important; }

/* Leeftijd-dropdown: eigen chevron, geen native pijl */
#public-shell .veld-select{ position:relative; }
#public-shell .veld-select select{ width:100%; appearance:none; -webkit-appearance:none; padding:14px 46px 14px 15px; font-size:0.9375rem; color:#1D1D1F; cursor:pointer; margin-bottom:0; }
#public-shell .veld-select .vs-chev{ position:absolute; right:15px; top:50%; transform:translateY(-50%); width:18px; height:18px; color:#5F5F63; pointer-events:none; }

/* Keuze-opties: grijs vlak in rust (diepte), gekozen = wit + donker (geen groen) */
#public-shell .optie{ background:#F5F5F7 !important; border:1px solid #E9E9EC !important; }
#public-shell .optie:hover{ border-color:#D3D3D7 !important; }
#public-shell .optie.gekozen{ background:#fff !important; border-color:#1A1A1A !important; color:#1D1D1F !important; }
#public-shell .optie.gekozen .bol{ border:5px solid #1A1A1A !important; }

/* ---- "Volgende"/"Verstuur" = go-squircle: grijs/zwart met pijl-tegel + rustige hover over de pijl ---- */
#public-shell .flow-knoppen .knop-flow{ flex:1; display:inline-flex; align-items:center; justify-content:space-between; gap:12px;
  background:#7342F4; color:#fff; border:1px solid #1A1A1A; border-radius:var(--r-md); padding:9px 9px 9px 22px;
  font-size:0.9375rem; font-weight:500; cursor:pointer; transition:background .2s cubic-bezier(.22,.61,.36,1); }
#public-shell .flow-knoppen .knop-flow:hover{ background:#232326; }
#public-shell .flow-knoppen .knop-flow .cta-lbl{ display:inline-flex; align-items:center; }
#public-shell .flow-knoppen .knop-flow .cta-arr{ width:36px; height:36px; border-radius:var(--r-sm); background:rgba(255,255,255,.13);
  display:flex; align-items:center; justify-content:center; transition:background .22s, transform .28s cubic-bezier(.22,.61,.36,1); }
#public-shell .flow-knoppen .knop-flow .cta-arr svg{ width:17px; height:17px; stroke:#fff; transition:stroke .22s; }
#public-shell .flow-knoppen .knop-flow:hover .cta-arr{ background:#C2FFAD; transform:translate(2px,-2px); }
#public-shell .flow-knoppen .knop-flow:hover .cta-arr svg{ stroke:#16181a; }

/* ---- Hero: flexteam-aanmelding = dominante primair (go-squircle); "Bekijk vacatures" = rustige secundair ---- */
#public-shell .ha-cta .knop-cta.ha-primair{ width:auto; background:#7342F4 !important; color:#fff !important; border:1px solid #1A1A1A !important;
  padding:9px 9px 9px 22px; border-radius:var(--r-md); transition:background .2s, color .2s, border-color .2s; }
#public-shell .ha-cta .knop-cta.ha-primair .cta-arr{ background:#C2FFAD !important; }
#public-shell .ha-cta .knop-cta.ha-primair .cta-arr svg{ stroke:#16181a; }
#public-shell .ha-cta .knop-cta.ha-primair:hover{ background:#C2FFAD !important; color:#16181a !important; border-color:#C2FFAD !important; }
#public-shell .ha-cta .knop-cta.ha-primair:hover .cta-arr{ background:#6836E6 !important; }
#public-shell .ha-cta .knop-cta.ha-primair:hover .cta-arr svg,#public-shell .ha-cta .knop-cta.ha-primair:hover .cta-arr svg path{ stroke:#C2FFAD !important; }
/* secundair: rustig licht met donkere pijl — laat de primair domineren */
#public-shell .ha-cta .knop-licht{ background:#fff !important; color:#1A1A1A !important; border:1px solid #E3E3E5 !important; }
#public-shell .ha-cta .knop-licht::after{ background:#7342F4 !important; }
#public-shell .ha-cta .knop-licht:hover{ background:#F2F2F4 !important; color:#1A1A1A !important; border-color:#D8D8DC !important; }
#public-shell .ha-cta .knop-licht:hover::after{ background:#7342F4 !important; transform:translate(1.5px,-1.5px); }

/* ═══════════════ v104 · bullet-uitlijning definitief + dropdown-tekst gelijk aan de rest ═══════════════ */

/* Bullets: dot = flex-item dat op de EERSTE tekstregel centreert (niet meer via vaste top-offset die padding negeert) */
#public-shell .det-blok .det-ul li, #public-shell .det-ul li{
  display:flex !important; align-items:flex-start; gap:12px; padding:5px 0 !important; line-height:1.6; position:static;
}
#public-shell .det-blok .det-ul li::before, #public-shell .det-ul li::before{
  content:""; position:static !important; left:auto !important; top:auto !important;
  flex:0 0 7px; width:7px; height:7px; margin-top:calc(0.8em - 3.5px);
  border-radius:var(--r-pill); background:#33363b !important;
}

/* Dropdown-tekst dezelfde kleur als de andere velden: gekozen waarde donker (--tekst), placeholder-staat grijs net als input-placeholders */
#public-shell .veld input::placeholder, #public-shell .veld textarea::placeholder{ color:#6E6E73; }
#public-shell .veld-select select{ color:var(--tekst); }
#public-shell .veld-select select:has(option[value=""]:checked){ color:#6E6E73; }

/* ═══════════════ v105 · knoppen ingetogener / Apple-like (minder "grote zwarte knop") ═══════════════
   Lichter gewicht (500), kleinere pijl-tegel, compactere proporties, subtielere ink. Signatuur (pijl + hover) blijft. */
#public-shell .knop,#public-shell .knop-cta,#public-shell .knop-flow,#public-shell .ha-cta .knop-cta.ha-primair,#public-shell .flow-knoppen .knop-flow{
  font-weight:500 !important; font-size:0.875rem !important;
}
/* go-squircle primair: compacter, kleinere tegel, radius 12, zachtere ink */
#public-shell .knop-cta,#public-shell .flow-knoppen .knop-flow,#public-shell .ha-cta .knop-cta.ha-primair{
  padding:7px 7px 7px 17px !important; border-radius:var(--r-md) !important; background:#7342F4 !important; border-color:#1A1A1A !important; gap:11px !important;
}
#public-shell .knop-cta .cta-arr,#public-shell .flow-knoppen .knop-flow .cta-arr{
  width:29px !important; height:29px !important; border-radius:var(--r-sm) !important;
}
#public-shell .knop-cta .cta-arr svg,#public-shell .flow-knoppen .knop-flow .cta-arr svg{ width:14px !important; height:14px !important; }
/* hover blijft: hele knop naar lime of pijl naar lime — maar zachter overgangsgevoel */
#public-shell .knop-cta:hover,#public-shell .ha-cta .knop-cta.ha-primair:hover{ background:#C2FFAD !important; border-color:#C2FFAD !important; }
/* gewone .knop (o.a. Inloggen, detail-hero, zoek): compacter, radius 12 */
#public-shell .knop{ padding:9px 17px !important; border-radius:var(--r-md) !important; }
/* secundair licht (Bekijk vacatures / knop-stil): rustig, radius 12 */
#public-shell .knop-licht,#public-shell .knop-stil{ font-weight:500 !important; border-radius:var(--r-md) !important; }

/* ═══════════════ v106 · on-brand aanvinkjes (checkbox + radio) i.p.v. browser-blauw ═══════════════ */
/* Checkbox (contract-akkoord + huisregels): squircle, zwart met witte vink bij aan */
.contract-akkoord input[type=checkbox]{
  appearance:none;-webkit-appearance:none;width:22px;height:22px;flex:0 0 22px;margin:0;
  border:1.5px solid #CFCFD3;border-radius:var(--r-sm);background:#fff;position:relative;cursor:pointer;
  transition:background .15s,border-color .15s;
}
.contract-akkoord input[type=checkbox]:hover{border-color:#6E6E73;}
.contract-akkoord input[type=checkbox]:checked{background:#1D1D1F;border-color:#1D1D1F;}
.contract-akkoord input[type=checkbox]:checked::after{
  content:"";position:absolute;left:7px;top:3px;width:5px;height:10px;
  border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg);
}
.contract-akkoord input[type=checkbox]:focus-visible{outline:2px solid #1D1D1F;outline-offset:2px;}
/* Radio (contract-keuzes): ronde ring, zwarte kern bij aan */
.ck-opt input[type=radio]{
  appearance:none;-webkit-appearance:none;width:20px;height:20px;flex:0 0 20px;margin:1px 0 0;
  border:1.5px solid #CFCFD3;border-radius:var(--r-pill);background:#fff;position:relative;cursor:pointer;
  transition:border-color .15s;
}
.ck-opt input[type=radio]:hover{border-color:#6E6E73;}
.ck-opt input[type=radio]:checked{border-color:#1D1D1F;}
.ck-opt input[type=radio]:checked::after{
  content:"";position:absolute;left:50%;top:50%;width:10px;height:10px;border-radius:var(--r-pill);
  background:#1D1D1F;transform:translate(-50%,-50%);
}
.ck-opt input[type=radio]:focus-visible{outline:2px solid #1D1D1F;outline-offset:2px;}
/* gekozen keuze-rij subtiel markeren */
#app-shell .ck-opt:has(input:checked){color:var(--tekst,#1D1D1F);font-weight:500;}

/* ---------- Video-vraag (Hireflix-flow) ---------- */
#app-shell .vq-vid{width:100%;aspect-ratio:16/9;background:#1D1D1F;border-radius:var(--r-lg);overflow:hidden;margin:2px 0 14px;border:1px solid var(--bd,#E3E3E5);}
#app-shell .vq-vid video{width:100%;height:100%;object-fit:cover;display:block;background:#1D1D1F;}
#app-shell .vintro.vq-hasvid .vintro-title{font-size:1.125rem;margin:0 0 8px;letter-spacing:-.02em;font-weight:600;}
#app-shell .vintro.vq-hasvid .vintro-sub{font-size:0.8125rem;color:var(--tx2,#5F5F63);margin:0 0 12px;line-height:1.5;}

/* ============================================================
   Portal-activatie/inlog — eigen scherm, buiten alle overrides
   ============================================================ */
#app-shell .pu-auth{max-width:440px;margin:32px auto;padding:38px 32px;background:#fff;border:1px solid #E6E6E9;border-radius:var(--r-lg);box-shadow:none;font-family:-apple-system,BlinkMacSystemFont,'SF Pro Text','Segoe UI',Roboto,sans-serif;-webkit-font-smoothing:antialiased;box-sizing:border-box;}
#app-shell .pu-auth .pu-eyebrow{font-size:0.6875rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#8A8E93;margin:0 0 12px;}
#app-shell .pu-auth h2{margin:0 0 8px;font-size:1.4375rem;font-weight:600;letter-spacing:-.025em;color:#1A1A1A;line-height:1.2;}
#app-shell .pu-auth .pu-lead{color:#5F5F63;margin:0 0 26px;line-height:1.55;font-size:0.875rem;}
#app-shell .pu-auth .pu-lead b{color:#1A1A1A;font-weight:600;}
#app-shell .pu-auth .pu-veld{margin:0 0 18px;}
#app-shell .pu-auth label{display:block;font-size:0.6875rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#8A8E93;margin:0 0 8px;}
#app-shell .pu-auth input{display:block;box-sizing:border-box;width:100%;padding:13px 15px;font-size:0.9375rem;font-family:inherit;color:#1A1A1A;background:#F7F7F8;border:1px solid #E3E3E5;border-radius:var(--r-md);outline:none;transition:border-color .18s,background .18s;-webkit-appearance:none;appearance:none;letter-spacing:normal;}
#app-shell .pu-auth input:focus{border-color:#B0B0B4;background:#fff;}
#app-shell .pu-auth input::placeholder{color:#6E6E73;letter-spacing:normal;}
#app-shell .pu-auth input:disabled{opacity:.7;color:#5F5F63;cursor:not-allowed;}
#app-shell .pu-auth input.pu-code{text-align:center;letter-spacing:.28em;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:1.375rem;font-weight:600;padding:16px 12px;}
#app-shell .pu-auth input.pu-code::placeholder{letter-spacing:.28em;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:1.375rem;color:#C7C7CC;}
#app-shell .pu-auth .pu-fout{color:var(--k-rood);font-size:0.8125rem;min-height:18px;margin:2px 0 14px;font-weight:500;}
#app-shell .pu-auth .pu-btn{display:block;box-sizing:border-box;width:100%;padding:14px 20px;font-size:0.9375rem;font-weight:600;font-family:inherit;color:#fff;background:#7342F4;border:1px solid #1A1A1A;border-radius:var(--r-md);cursor:pointer;transition:background .18s,color .18s,border-color .18s;letter-spacing:-.005em;}
#app-shell .pu-auth .pu-btn::after{content:none!important;display:none!important;}
#app-shell .pu-auth .pu-btn::before{content:none!important;display:none!important;}
#app-shell .pu-auth .pu-btn:hover{background:#C2FFAD;color:#1A1A1A;border-color:#C2FFAD;box-shadow:none;transform:none;}
#app-shell .pu-auth .pu-btn:disabled{opacity:.6;cursor:default;background:#7342F4;color:#fff;border-color:#1A1A1A;}
#app-shell .pu-auth .pu-foot{text-align:center;margin-top:16px;font-size:0.8125rem;color:#8A8E93;}
#app-shell .pu-auth .pu-foot a{color:#1A1A1A;text-decoration:underline;text-underline-offset:2px;}
/* Chrome autofill neutraliseren (blauw wordt hier grijs) */
#app-shell .pu-auth input:-webkit-autofill{-webkit-box-shadow:0 0 0 30px #F7F7F8 inset!important;-webkit-text-fill-color:#1A1A1A!important;caret-color:#1A1A1A;}
@media(max-width:520px){#app-shell .pu-auth{margin:16px auto;padding:28px 22px;border-radius:var(--r-lg);}}

/* Herinlog-venster bij een verlopen sessie (31-07). Bewust een <dialog> en bewust
   buiten #app-shell: het scherm eronder blijft onaangeraakt staan, dus een half
   ingevuld formulier overleeft het. De browser regelt focus-opsluiting en Escape. */
dialog.pu-herinlog{
  /* margin:auto centreert een modale dialog; de reset bovenin het bestand zet alle
     marges op 0, waardoor hij anders in de linkerbovenhoek plakt. */
  margin:auto; max-width:26.25rem; width:calc(100% - 32px); padding:32px 30px;
  border:1px solid #E6E6E9; border-radius:var(--r-lg); background:#fff; box-shadow:none; color:#1A1A1A;
  font-family:-apple-system,BlinkMacSystemFont,'SF Pro Text','Segoe UI',Roboto,sans-serif;
}
dialog.pu-herinlog::backdrop{background:rgba(20,20,22,.42);}
dialog.pu-herinlog .pu-eyebrow{font-size:0.6875rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#8A8E93;margin:0 0 12px;}
dialog.pu-herinlog h2{margin:0 0 8px;font-size:1.1875rem;font-weight:600;letter-spacing:-.025em;line-height:1.2;}
dialog.pu-herinlog .pu-lead{color:#5F5F63;margin:0 0 22px;line-height:1.55;font-size:0.8125rem;}
dialog.pu-herinlog .pu-veld{margin:0 0 16px;}
dialog.pu-herinlog label{display:block;font-size:0.6875rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#8A8E93;margin:0 0 8px;}
dialog.pu-herinlog input{display:block;box-sizing:border-box;width:100%;padding:13px 15px;font-size:0.9375rem;
  font-family:inherit;color:#1A1A1A;background:#F7F7F8;border:1px solid #E3E3E5;border-radius:var(--r-md);
  outline:none;-webkit-appearance:none;appearance:none;}
dialog.pu-herinlog input:focus{border-color:#B0B0B4;background:#fff;}
dialog.pu-herinlog input:disabled{opacity:.7;color:#5F5F63;}
dialog.pu-herinlog .pu-fout{color:var(--k-rood);font-size:0.8125rem;min-height:18px;margin:2px 0 12px;font-weight:500;}
dialog.pu-herinlog .pu-btn{display:flex;align-items:center;justify-content:center;box-sizing:border-box;
  width:100%;height:44px;padding:0 20px;line-height:1;
  font-size:0.9375rem;font-weight:600;font-family:inherit;color:#fff;background:#7342F4;border:1px solid #1A1A1A;
  border-radius:var(--r-md);cursor:pointer;}
dialog.pu-herinlog .pu-btn:hover{background:#C2FFAD;color:#1A1A1A;border-color:#C2FFAD;}
dialog.pu-herinlog .pu-btn:disabled{opacity:.6;cursor:default;background:#7342F4;color:#fff;}
dialog.pu-herinlog .pu-foot{text-align:center;margin-top:14px;}
dialog.pu-herinlog .pu-link{display:inline-flex;align-items:center;justify-content:center;
  background:none;border:0;padding:0 8px;height:44px;font-family:inherit;
  font-size:0.8125rem;color:#8A8E93;text-decoration:underline;text-underline-offset:2px;cursor:pointer;}
dialog.pu-herinlog .pu-link:hover{color:#1A1A1A;}

/* ================================================================ */
/* VIDEO-SOLLICITATIE FLOW (v2) — eigen namespace .vid2-*             */
/* Volledig los van .knop / .vid-recbtn / .vintro overrides           */
/* ================================================================ */

#video-flow .vid2{
  --v-s0:#EFEFF1; --v-s1:#F7F7F8; --v-s2:#FFFFFF;
  --v-tx:#1D1D1F; --v-tx2:#5F5F63; --v-tx3:#9A9A9E;
  --v-bd:#E3E3E5; --v-bd2:#CFCFD3;
  --v-ink:#1A1A1A; --v-lime:#C2FFAD;
  --v-ok:var(--k-groen); --v-ok-bg:var(--k-groen-zacht); --v-ok-bd:var(--k-groen-pastel);
  --v-rec:var(--k-rood);
  box-sizing:border-box; min-height:100vh; width:100%;
  background:var(--v-s1);
  color:var(--v-tx); font-family:-apple-system,BlinkMacSystemFont,'SF Pro Text','Segoe UI',Roboto,sans-serif;
  -webkit-font-smoothing:antialiased; letter-spacing:-.014em;
  display:flex; flex-direction:column;
}
#video-flow .vid2 *,#video-flow .vid2 *::before,#video-flow .vid2 *::after{box-sizing:border-box;}
#video-flow .vid2 *::before,#video-flow .vid2 *::after{content:none;}
#video-flow .vid2 button::after,#video-flow .vid2 button::before{content:none!important;display:none!important;}

/* — Top bar (Piekfijn-monogram links, kandidaat-naam rechts) — */
#video-flow .vid2-top{
  display:flex; align-items:center; justify-content:space-between;
  padding:22px 32px; border-bottom:1px solid var(--v-bd);
  background:var(--v-s2);
}
#video-flow .vid2-logo{
  display:inline-flex; align-items:center; gap:10px;
  font-size:0.9375rem; font-weight:600; letter-spacing:-.02em; color:var(--v-tx);
}
#video-flow .vid2-mono{
  width:32px; height:32px; border-radius:var(--r-sm); background:var(--v-ink);
  color:#fff; display:inline-flex; align-items:center; justify-content:center;
  font-weight:600; font-size:0.875rem; letter-spacing:-.02em;
}
#video-flow .vid2-mono-sub{font-size:0.75rem;color:var(--v-tx3);font-weight:400;}
#video-flow .vid2-crumbs{font-size:0.8125rem;color:var(--v-tx2);font-weight:400;}
#video-flow .vid2-crumbs b{color:var(--v-tx);font-weight:500;}

/* — Hoofd-canvas — */
#video-flow .vid2-canvas{
  flex:1; padding:32px; display:flex; align-items:stretch; justify-content:center;
  min-height:calc(100vh - 76px);
}
#video-flow .vid2-shell{
  width:100%; max-width:1240px; background:var(--v-s2);
  border:1px solid var(--v-bd); border-radius:var(--r-xl);
  padding:44px 48px; display:grid; grid-template-columns:1.35fr 1fr; gap:44px;
  align-items:center;
}
#video-flow .vid2-shell.single{grid-template-columns:1fr; max-width:520px; padding:48px 44px;}
#video-flow .vid2-shell.vid2-cam-shell{max-width:460px; padding:40px 40px;}
#video-flow .vid2-cam-mid{gap:16px}
#video-flow .vid2-cam-icon{width:64px; height:64px; border-radius:var(--r-lg); background:linear-gradient(180deg,#F7F7F8 0%,#EFEFF1 100%); border:1px solid #E3E3E5; color:#1D1D1F; display:inline-flex; align-items:center; justify-content:center; box-shadow:inset 0 1px 0 rgba(255,255,255,.6)}
#video-flow .vid2-cam-icon svg{width:32px; height:32px}
#video-flow .vid2-btn-donker{background:#7342F4; color:#fff; border:1px solid #1A1A1C; border-radius:var(--r-pill); padding:12px 24px; font-size:0.875rem; font-weight:600; letter-spacing:-.005em; box-shadow:none; transition:transform .16s, background .16s}
#video-flow .vid2-btn-donker:hover{background:#2A2A2E; transform:translateY(-1px)}
#video-flow .vid2-btn-donker:active{transform:translateY(0)}
#video-flow .vid2-shell.wide{grid-template-columns:1.55fr 1fr;}

/* — Video-frame links (16:9, radius, dark bg) — */
#video-flow .vid2-frame{
  position:relative; aspect-ratio:16/10; width:100%;
  background:#0E0E10; border-radius:var(--r-lg); overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  box-shadow:none;
}
#video-flow .vid2-frame video{width:100%;height:100%;object-fit:cover;display:block;}
#video-flow .vid2-frame img{width:100%;height:100%;object-fit:cover;display:block;}
#video-flow .vid2-frame.mirror video{transform:scaleX(-1);}

/* — Play-overlay op welkom-video — */
#video-flow .vid2-play{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  cursor:pointer; background:linear-gradient(180deg,rgba(0,0,0,.05) 0%,rgba(0,0,0,.35) 100%);
  transition:background .2s;
}
#video-flow .vid2-play:hover{background:linear-gradient(180deg,rgba(0,0,0,.15) 0%,rgba(0,0,0,.45) 100%);}
#video-flow .vid2-play-dot{
  width:64px; height:64px; border-radius:var(--r-lg); background:#fff;
  display:inline-flex; align-items:center; justify-content:center;
}
#video-flow .vid2-play-tri{
  width:0; height:0; border-left:16px solid var(--v-ink);
  border-top:11px solid transparent; border-bottom:11px solid transparent;
  margin-left:4px;
}

/* — Rechter-kolom tekst — */
#video-flow .vid2-side{display:flex;flex-direction:column;gap:22px;min-width:0;}
#video-flow .vid2-eyebrow{
  display:inline-flex; align-items:center; gap:10px; font-size:0.6875rem; font-weight:600;
  letter-spacing:.09em; text-transform:uppercase; color:var(--v-tx3);
}
#video-flow .vid2-eyebrow .dot{width:4px;height:4px;border-radius:var(--r-pill);background:var(--v-tx3);}
#video-flow .vid2-h1{
  font-size:2rem; font-weight:600; letter-spacing:-.028em; line-height:1.15;
  color:var(--v-tx); margin:0; text-wrap:balance;
}
#video-flow .vid2-h2{
  font-size:1.625rem; font-weight:600; letter-spacing:-.025em; line-height:1.2;
  color:var(--v-tx); margin:0; text-wrap:balance;
}
#video-flow .vid2-lead{font-size:0.9375rem; line-height:1.55; color:var(--v-tx2); margin:0;}

/* — Formulier — */
#video-flow .vid2-form{display:flex; flex-direction:column; gap:14px;}
#video-flow .vid2-row2{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
#video-flow .vid2-field{display:flex; flex-direction:column; gap:6px;}
#video-flow .vid2-label{
  font-size:0.6875rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  color:var(--v-tx3);
}
#video-flow .vid2-input,
#video-flow .vid2-select{
  width:100%; box-sizing:border-box; padding:13px 15px; font-size:0.9375rem;
  font-family:inherit; color:var(--v-tx); background:var(--v-s1);
  border:1px solid var(--v-bd); border-radius:var(--r-md); outline:none;
  transition:border-color .18s, background .18s;
  -webkit-appearance:none; appearance:none;
}
#video-flow .vid2-input:focus,
#video-flow .vid2-select:focus{border-color:var(--v-bd2); background:var(--v-s2);}
#video-flow .vid2-input::placeholder{color:var(--v-tx3);}
#video-flow .vid2-input:disabled{opacity:.7;}

/* telefoon met prefix */
#video-flow .vid2-phone{display:grid; grid-template-columns:88px 1fr; gap:8px;}
#video-flow .vid2-phone .vid2-prefix{
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--v-s1); border:1px solid var(--v-bd); border-radius:var(--r-md);
  font-size:0.9375rem; font-weight:500; color:var(--v-tx);
}

/* select met eigen chevron */
#video-flow .vid2-select{
  background-image:linear-gradient(45deg,transparent 50%,var(--v-tx2) 50%),linear-gradient(135deg,var(--v-tx2) 50%,transparent 50%);
  background-position:calc(100% - 20px) 55%, calc(100% - 15px) 55%;
  background-size:5px 5px, 5px 5px;
  background-repeat:no-repeat;
  padding-right:40px;
}

/* — Knoppen — */
#video-flow .vid2-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:14px 24px; font-size:0.9375rem; font-weight:600; font-family:inherit;
  color:#fff; background:var(--v-ink); border:1px solid var(--v-ink);
  border-radius:var(--r-pill); cursor:pointer; letter-spacing:-.005em;
  transition:background .18s, color .18s, border-color .18s;
  min-height:48px;
}
#video-flow .vid2-btn:hover{background:var(--v-lime); color:var(--v-ink); border-color:var(--v-lime);}
#video-flow .vid2-btn:disabled{opacity:.5; cursor:default; background:var(--v-ink); color:#fff; border-color:var(--v-ink);}
#video-flow .vid2-btn.wide{width:100%;}
#video-flow .vid2-btn.lg{padding:16px 28px; font-size:0.9375rem; min-height:52px;}
#video-flow .vid2-btn.vid2-pulse{animation:vid2-pulse-anim 1.4s ease-out 2}
@keyframes vid2-pulse-anim{0%{box-shadow:none}70%{box-shadow:0 0 0 14px rgba(194,255,173,0)}100%{box-shadow:none}}

/* ===== Donkere Hireflix-modus voor de video-vraag schermen ===== */
#video-flow .vid2.vid2-donker{
  background:radial-gradient(1200px 700px at 50% -100px, #16171b 0%, #0a0a0c 60%, #050506 100%);
  color:#e7e7ea;
}
#video-flow .vid2-donker .vid2-top{background:transparent;border-bottom:1px solid rgba(255,255,255,.06);padding:20px 32px}
#video-flow .vid2-donker .vid2-logo{color:#f2f2f4}
#video-flow .vid2-donker .vid2-mono{background:#f2f2f4;color:#0a0a0c}
#video-flow .vid2-donker .vid2-mono-sub{color:#8a8a90}
#video-flow .vid2-donker .vid2-crumbs{color:#6E6E73}
#video-flow .vid2-donker .vid2-crumbs b{color:#f2f2f4}

/* Op een breed scherm stond het beeld klein en laag in een enorm zwart veld, met lege
   stroken boven en onder. De hoogte van het beeld bepaalt nu de compositie: het beeld
   pakt de ruimte die er is, de tekst staat ernaast, en het geheel staat gecentreerd
   zonder dat er halve schermen zwart overblijven. */
/* Het zwarte veld was een vol scherm hoog met de inhoud klein in het midden, waardoor er
   boven en onder stroken van 140 pixels leeg zwart overbleven. Nu hugt het de inhoud. */
#video-flow .vid2-donker .vid2-canvas{padding:26px 28px 34px;min-height:0;display:flex;align-items:center;justify-content:center}
/* Dit scherm staat in de contentkolom van de portal, niet over de volle breedte. Bij
   1180 pixels vensterbreedte is hier maar 828 beschikbaar, en twee kolommen naast elkaar
   knepen het beeld tot een staand kadertje van 433 breed waar een liggend camerabeeld
   half uit weggesneden werd. Standaard staat het beeld daarom bovenaan en de tekst
   eronder, precies zoals op een telefoon. Twee kolommen pas als er echt ruimte is. */
#video-flow .vid2-donker .vid2-shell,
#video-flow .vid2-donker .vid2-shell.wide{
  background:transparent; border:0; padding:0; max-width:960px; width:100%;
  grid-template-columns:1fr; gap:26px; align-items:start; justify-items:stretch;
}
#video-flow .vid2-donker .vid2-frame{
  background:#000;
  border-radius:var(--r-lg);
  box-shadow:0 0 0 1px rgba(255,255,255,.07);
  aspect-ratio:16/9;
  width:100%; height:auto;
}
@media(min-width:1500px){
  #video-flow .vid2-donker .vid2-shell,
  #video-flow .vid2-donker .vid2-shell.wide{
    max-width:1240px; grid-template-columns:minmax(0,1.5fr) minmax(260px,1fr);
    gap:40px; align-items:center;
  }
}
#video-flow .vid2-donker .vid2-frame video{width:100%;height:100%;object-fit:contain;background:#000}
#video-flow .vid2-donker .vid2-frame.mirror video{object-fit:cover}
#video-flow .vid2-donker .vid2-side{gap:16px}
#video-flow .vid2-donker .vid2-h1{font-size:1.75rem}
#video-flow .vid2-donker .vid2-lead{font-size:0.875rem}
#video-flow .vid2-donker .vid2-top{padding:16px 32px}

#video-flow .vid2-donker .vid2-h1{color:#f2f2f4;font-weight:600;letter-spacing:-.028em}
#video-flow .vid2-donker .vid2-h2{color:#f2f2f4}
#video-flow .vid2-donker .vid2-lead{color:#6E6E73}
#video-flow .vid2-donker .vid2-eyebrow{color:#8a8a90}
#video-flow .vid2-donker .vid2-eyebrow .dot{background:#8a8a90}
#video-flow .vid2-donker .vid2-qhead{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
#video-flow .vid2-donker .vid2-qnum{
  font-size:0.6875rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  color:#6E6E73;padding:5px 10px;border-radius:var(--r-pill);
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08)
}
#video-flow .vid2-donker .vid2-pill{
  font-size:0.6875rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  padding:5px 10px;border-radius:var(--r-pill);color:#6E6E73;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08)
}
#video-flow .vid2-donker .vid2-pill.warm{background:rgba(255,255,255,.05);color:#6E6E73;border-color:rgba(255,255,255,.08)}
#video-flow .vid2-donker .vid2-pill.rec{background:var(--k-rood);color:#fff}
#video-flow .vid2-donker .vid2-rec-dot{background:#fff;box-shadow:0 0 0 4px rgba(239,68,68,.35)}

#video-flow .vid2-donker .vid2-progress{display:flex;gap:6px;margin-top:4px}
#video-flow .vid2-donker .vid2-progress span{flex:1;height:3px;border-radius:var(--r-pill);background:rgba(255,255,255,.08)}
#video-flow .vid2-donker .vid2-progress span.done{background:#C2FFAD}
#video-flow .vid2-donker .vid2-progress span.now{background:#e7e7ea}

#video-flow .vid2-donker .vid2-btn{
  background:#C2FFAD;color:#0a0a0c;border:1px solid #C2FFAD;
  box-shadow:none
}
#video-flow .vid2-donker .vid2-btn:hover{background:#d5ff5a;border-color:#d5ff5a}
#video-flow .vid2-donker .vid2-btn:disabled{background:#2a2a30;color:#8a8a90;border-color:#2a2a30;box-shadow:none}

#video-flow .vid2-donker .vid2-count{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:11.25rem;font-weight:700;letter-spacing:-.05em;color:#fff;
  text-shadow:0 6px 40px rgba(0,0,0,.6);background:rgba(0,0,0,.35);
}
#video-flow .vid2-donker .vid2-timer{
  position:absolute;bottom:14px;right:14px;background:rgba(0,0,0,.55);
  padding:6px 10px;border-radius:var(--r-sm);font-size:0.8125rem;color:#fff;font-variant-numeric:tabular-nums;
  border:1px solid rgba(255,255,255,.14);
}

@media (max-width:960px){
  #video-flow .vid2-donker .vid2-shell,
  #video-flow .vid2-donker .vid2-shell.wide{grid-template-columns:1fr;gap:24px}
}

/* — Telefoon — */
@media (max-width:720px){
  /* De kaart groeide mee met 100vh terwijl hij al in een scrollende schil zit, waardoor er
     op een telefoon een enorm leeg vlak boven en onder de inhoud stond. */
  #video-flow .vid2-canvas{align-items:center; min-height:auto; padding:20px 16px 28px;}
  #video-flow .vid2-donker .vid2-canvas{align-items:center; min-height:auto; padding:16px 16px 24px;}

  /* Het kader stond vast op 16:9 terwijl de vraag-video's 4:3 zijn. Op een telefoon bleef
     daardoor maar een smal strookje beeld over. Nu volgt het kader de vorm van de video. */
  #video-flow .vid2-donker .vid2-frame:not(.mirror){
    aspect-ratio:auto; min-height:180px; max-height:58vh;
  }
  #video-flow .vid2-donker .vid2-frame:not(.mirror) video{
    height:auto; max-height:58vh; object-fit:contain;
  }
  /* Het eigen camerabeeld blijft wel staand bijgesneden, dat vult het scherm het best. */
  /* Op een telefoon staat het beeld boven de tekst en is het staand, want zo houdt
     iemand zijn toestel vast. */
  #video-flow .vid2-donker .vid2-frame,
  #video-flow .vid2-donker .vid2-frame.mirror{aspect-ratio:3/4; height:auto; width:100%; max-height:50vh;}
  #video-flow .vid2-donker .vid2-canvas{min-height:auto}
  #video-flow .vid2-donker .vid2-actions .vid2-btn{width:100%}
}
#video-flow .vid2-link{
  background:none; border:0; padding:0; margin:0; cursor:pointer;
  font-family:inherit; font-size:0.8125rem; color:var(--v-tx2);
  text-decoration:underline; text-underline-offset:3px;
  text-decoration-color:var(--v-bd2);
  min-height:44px; display:inline-flex; align-items:center;
}
#video-flow .vid2-link:hover{color:var(--v-tx); text-decoration-color:var(--v-tx2);}
/* Losse link onder een knop: eigen regel met wat lucht erboven */
#video-flow .vid2-link-los{display:flex; align-items:center; min-height:44px; margin-top:14px; text-align:left; align-self:flex-start;}
#video-flow .vid2-cam-mid .vid2-link-los,
#video-flow .vid2-hervat-mid .vid2-link-los{margin-top:16px; text-align:center; align-self:center; justify-content:center;}
/* Voortgangsbalk op het hervat-scherm staat in een gecentreerde kolom: zonder breedte
   vallen de segmenten (flex:1) naar nul. */
#video-flow .vid2-hervat-mid .vid2-progress{width:100%; max-width:340px;}
#video-flow .vid2-donker .vid2-link{color:rgba(255,255,255,.62); text-decoration-color:rgba(255,255,255,.28);}
#video-flow .vid2-donker .vid2-link:hover{color:#fff; text-decoration-color:rgba(255,255,255,.6);}

/* Waarschuwing bij een mini-browser binnen een social app (Instagram, WhatsApp, LinkedIn) */
#video-flow .vid2-waarschuw{
  width:100%; margin:0 0 22px; padding:14px 16px;
  background:var(--v-bg2,#F4F4F5); border-radius:var(--r-md);
  box-shadow:inset 0 0 0 1px var(--v-bd2,rgba(20,22,24,.1));
  text-align:left;
}
#video-flow .vid2-waarschuw p{margin:0 0 8px; font-size:0.8125rem; line-height:1.55; color:var(--v-tx2);}
#video-flow .vid2-waarschuw .vid2-link{font-size:0.8125rem;}

/* Vlak in upload-modus, als er bij een vraag geen video staat */
#video-flow .vid2-uploadvlak{
  display:flex; align-items:center; justify-content:center;
  width:100%; height:100%; padding:24px;
  text-align:center; font-size:0.875rem; line-height:1.55; color:rgba(255,255,255,.6);
}

/* Hint onder de doorklik-knop tijdens de vraag-video */
#video-flow .vid2-hint{font-size:0.8125rem; color:var(--v-tx3); line-height:1.5; max-width:34ch;}
#video-flow .vid2-donker .vid2-hint{color:rgba(255,255,255,.5);}

/* — Footnote / AV — */
#video-flow .vid2-foot{font-size:0.75rem; color:var(--v-tx3); line-height:1.5;}
#video-flow .vid2-foot a{color:var(--v-tx2); text-decoration:underline; text-underline-offset:2px;}

/* — Scherm 2: camera-toegang illustratie — */
#video-flow .vid2-illu{
  display:flex; align-items:center; justify-content:center;
  padding:56px 0 40px;
}
#video-flow .vid2-illu svg{width:220px; height:160px;}
#video-flow .vid2-mid{display:flex; flex-direction:column; align-items:center; text-align:center; gap:22px;}
#video-flow .vid2-mid .vid2-h2{max-width:340px;}
#video-flow .vid2-mid .vid2-lead{max-width:400px;}

/* — Scherm 3: device-rijtjes — */
#video-flow .vid2-devs{display:flex; flex-direction:column; gap:14px;}
#video-flow .vid2-mic-bar{
  width:100%; height:6px; background:var(--v-s1); border-radius:var(--r-pill); overflow:hidden;
  border:1px solid var(--v-bd);
}
#video-flow .vid2-mic-fill{
  height:100%; width:0%; background:var(--k-groen);
  transition:width .12s linear;
}
#video-flow .vid2-ok{
  display:flex; align-items:center; gap:10px; padding:12px 14px;
  background:var(--v-ok-bg); border:1px solid var(--v-ok-bd); border-radius:var(--r-md);
  color:var(--k-groen); font-size:0.8125rem; font-weight:500;
}
#video-flow .vid2-ok-dot{
  width:20px; height:20px; border-radius:var(--r-sm); background:var(--v-ok);
  display:inline-flex; align-items:center; justify-content:center; flex:0 0 20px;
}
#video-flow .vid2-ok-check{
  width:10px; height:6px; border-left:2px solid #fff; border-bottom:2px solid #fff;
  transform:rotate(-45deg) translate(1px,-1px);
}

/* camera-overlay onder in beeld */
#video-flow .vid2-cam-hint{
  position:absolute; left:14px; right:14px; bottom:14px;
  padding:10px 14px; background:rgba(15,15,17,.72);
  color:#fff; font-size:0.8125rem; font-weight:500; line-height:1.4;
  border-radius:var(--r-md); backdrop-filter:blur(8px);
}

/* — Scherm 4-6: vraag / countdown / opname — */
#video-flow .vid2-qhead{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
}
#video-flow .vid2-qnum{
  font-size:0.75rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  color:var(--v-tx3);
}
#video-flow .vid2-pill{
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 11px; font-size:0.6875rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  background:var(--v-s1); border:1px solid var(--v-bd); border-radius:var(--r-pill); color:var(--v-tx2);
}
#video-flow .vid2-pill.warm{background:var(--k-oranje-zacht); border-color:var(--k-oranje-pastel); color:var(--k-oranje);}
#video-flow .vid2-pill.rec{
  background:var(--v-rec); border-color:var(--v-rec); color:#fff;
  position:absolute; top:14px; right:14px; font-size:0.6875rem; letter-spacing:.1em;
  padding:6px 12px; z-index:3;
}
#video-flow .vid2-pill.rec .vid2-rec-dot{
  width:8px; height:8px; border-radius:var(--r-pill); background:#fff;
  animation:vid2Blink 1s ease-in-out infinite;
}
@keyframes vid2Blink{0%,100%{opacity:1;}50%{opacity:.35;}}

#video-flow .vid2-timer{
  position:absolute; bottom:14px; left:14px; z-index:3;
  padding:6px 12px; font-size:0.8125rem; font-weight:600; font-variant-numeric:tabular-nums;
  background:rgba(15,15,17,.72); color:#fff; border-radius:var(--r-pill);
  backdrop-filter:blur(8px);
}

/* countdown-overlay */
#video-flow .vid2-count{
  position:absolute; inset:0; z-index:4;
  display:flex; align-items:center; justify-content:center;
  background:rgba(15,15,17,.55);
  color:#fff; font-size:11.25rem; font-weight:600; letter-spacing:-.04em;
  line-height:1; font-variant-numeric:tabular-nums;
}

/* actie-zone (Antwoord indienen + Opnieuw maken) */
#video-flow .vid2-actions{
  display:flex; flex-direction:column; align-items:flex-start; gap:14px;
}

/* — Klaar-scherm — */
#video-flow .vid2-done{
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:14px;
  padding:0;
}
#video-flow .vid2-shell.vid2-klaar-shell{max-width:440px; padding:44px 40px 40px;}
#video-flow .vid2-done .vid2-btn-donker{margin-top:8px}
#video-flow .vid2-done .vid2-check{
  width:72px; height:72px; border-radius:var(--r-lg); background:var(--v-ok-bg);
  border:1px solid var(--v-ok-bd);
  display:inline-flex; align-items:center; justify-content:center;
}
#video-flow .vid2-done .vid2-check-mark{
  width:26px; height:14px; border-left:3px solid var(--v-ok); border-bottom:3px solid var(--v-ok);
  transform:rotate(-45deg) translate(2px,-2px);
}

/* — Fout-scherm — */
#video-flow .vid2-error{
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:18px;
  padding:20px 0;
}

/* — Progress rail (kleine visualisatie voor scherm 4+) — */
#video-flow .vid2-progress{
  display:flex; align-items:center; gap:6px; margin-top:8px;
}
#video-flow .vid2-progress span{
  height:3px; flex:1; background:var(--v-bd); border-radius:var(--r-pill);
}
#video-flow .vid2-progress span.done{background:var(--v-ink);}
#video-flow .vid2-progress span.now{background:var(--v-tx2);}

/* — Responsive — */
@media(max-width:900px){
  #video-flow .vid2-canvas{padding:16px;}
  #video-flow .vid2-shell{grid-template-columns:1fr; padding:28px 24px; gap:28px;}
  #video-flow .vid2-shell.wide{grid-template-columns:1fr;}
  #video-flow .vid2-h1{font-size:1.625rem;}
  #video-flow .vid2-h2{font-size:1.375rem;}
  #video-flow .vid2-count{font-size:7.5rem;}
  #video-flow .vid2-top{padding:16px 20px;}
}
@media(max-width:520px){
  #video-flow .vid2-row2{grid-template-columns:1fr;}
  #video-flow .vid2-shell{border-radius:var(--r-lg); padding:22px 18px;}
}

/* ================================================================ */
/* CONTRACT-VIEW (v2) — eigen namespace .pu-ct-*                     */
/* On-brand: gegevens → contract lezen/downloaden → keuzes → tekenen */
/* ================================================================ */

#contract-body .pu-ct{
  --c-ink-0:#6836E6; --c-ink-1:#7342F4; --c-ink-2:#7E4EF6;
  --c-char-1:#26272A; --c-char-2:#38393D; --c-char-3:#54555A;
  --c-tx:#1D1D1F; --c-tx2:#5F5F63; --c-tx3:#8E8E93; --c-tx4:#B4B4B8;
  --c-bd:#E3E3E5; --c-bd2:#D0D0D3; --c-hair:#EEEEF0; --c-hair2:#E8E8EA;
  --c-s0:#EFEFF1; --c-s1:#F7F7F8; --c-s2:#FFFFFF; --c-s3:#FAFAFC;
  --c-ink:#1A1A1A; --c-lime:#C2FFAD; --c-lime2:#C2FFAD;
  --c-ok:var(--k-groen); --c-ok-bg:var(--k-groen-zacht); --c-ok-bd:var(--k-groen-pastel);
  --c-warn-bg:var(--k-oranje-zacht); --c-warn-bd:var(--k-oranje-pastel); --c-warn-tx:var(--k-oranje);
  --c-r-xs:8px; --c-r-sm:10px; --c-r-md:12px; --c-r-lg:16px; --c-r-xl:20px; --c-r-xxl:24px;
  --c-hairline: .5px solid var(--c-bd);
  --c-hairline-lt: .5px solid var(--c-hair);
  --c-ease:cubic-bezier(.32,.72,0,1);
  box-sizing:border-box; color:var(--c-tx);
  font-family:-apple-system,BlinkMacSystemFont,'SF Pro Text','Segoe UI',Roboto,sans-serif;
  -webkit-font-smoothing:antialiased; letter-spacing:-.012em;
  max-width:860px; margin:0 auto;
}
#contract-body .pu-ct *,#contract-body .pu-ct *::before,#contract-body .pu-ct *::after{box-sizing:border-box;}
#contract-body .pu-ct *::before,#contract-body .pu-ct *::after{content:none;}
#contract-body .pu-ct button::after,#contract-body .pu-ct button::before{content:none!important;display:none!important;}

/* — Kop-hero (dark, houtskool, met diagonal hairline pattern) — */
#contract-body .pu-ct-kop{
  position:relative; background:var(--c-ink-1); color:#fff;
  border-radius:var(--c-r-xxl); padding:30px 34px 26px; margin:0 0 22px;
  overflow:hidden; isolation:isolate;
}
#contract-body .pu-ct-kop-bg{
  position:absolute; inset:0; z-index:0; opacity:.14;
  background:
    linear-gradient(180deg,transparent 0%,rgba(255,255,255,.02) 100%),
    repeating-linear-gradient(-38deg,transparent 0 22px,rgba(255,255,255,.14) 22px 22.5px);
  pointer-events:none;
}
#contract-body .pu-ct-kop::after{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(circle at 100% 0%,rgba(194,255,173,.10) 0%,transparent 46%);
}
#contract-body .pu-ct-kop-in{position:relative; z-index:1;}
#contract-body .pu-ct-kop-top{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  margin:0 0 22px; flex-wrap:wrap;
}
#contract-body .pu-ct-mono{
  position:relative; width:42px; height:42px; border-radius:var(--r-md);
  background:linear-gradient(180deg,#f5f5f6 0%,#dcdcdf 100%);
  color:var(--c-ink-0); font-size:0.9375rem; font-weight:600;
  display:inline-flex; align-items:center; justify-content:center;
  flex:0 0 42px; letter-spacing:-.02em;
  box-shadow: inset 0 0 0 .5px rgba(0,0,0,.08);
}
#contract-body .pu-ct-mono-dot{
  position:absolute; right:-3px; bottom:-3px; width:10px; height:10px; border-radius:var(--r-pill);
  background:var(--c-lime); box-shadow:0 0 0 3px var(--c-ink-1);
}
#contract-body .pu-ct-chips{display:inline-flex; gap:6px; flex-wrap:wrap;}
#contract-body .pu-ct-chip{
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 10px 5px 8px; font-size:0.6875rem; font-weight:500; letter-spacing:.02em;
  color:rgba(255,255,255,.72); background:rgba(255,255,255,.05);
  border:.5px solid rgba(255,255,255,.14); border-radius:var(--r-pill);
  backdrop-filter:blur(6px);
}
#contract-body .pu-ct-chip-dot{
  width:5px; height:5px; border-radius:var(--r-pill); background:var(--c-lime);
  box-shadow:0 0 0 3px rgba(194,255,173,.14);
}
#contract-body .pu-ct-kop-tx{display:flex; flex-direction:column; gap:8px; min-width:0;}
#contract-body .pu-ct-eyebrow{
  font-size:0.6875rem; font-weight:500; letter-spacing:.12em; text-transform:uppercase;
  color:rgba(255,255,255,.5);
}
#contract-body .pu-ct-titel{
  font-size:2.125rem; font-weight:600; letter-spacing:-.03em; line-height:1.08;
  color:#fff; margin:0; text-wrap:balance;
}
#contract-body .pu-ct-titel-thin{font-weight:300; color:rgba(255,255,255,.62); letter-spacing:-.028em;}
#contract-body .pu-ct-sub{font-size:0.8125rem; color:rgba(255,255,255,.48); line-height:1.5; margin:6px 0 0; letter-spacing:.01em;}

/* Progress-rail (4 stappen genummerd) */
#contract-body .pu-ct-rail{
  position:relative; margin-top:26px; padding-top:22px;
  border-top:.5px solid rgba(255,255,255,.10);
  display:grid; grid-template-columns:repeat(4,1fr); gap:0;
}
#contract-body .pu-ct-rail-line{
  position:absolute; left:calc(12.5%); right:calc(12.5%); top:calc(22px + 15px);
  height:.5px; background:rgba(255,255,255,.10); z-index:0;
}
#contract-body .pu-ct-rail-step{
  position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; gap:9px;
}
#contract-body .pu-ct-rail-num{
  width:30px; height:30px; border-radius:var(--r-md);
  background:var(--c-ink-1); border:.5px solid rgba(255,255,255,.14);
  color:rgba(255,255,255,.48);
  display:inline-flex; align-items:center; justify-content:center;
  font-size:0.6875rem; font-weight:600; letter-spacing:-.01em;
  transition:background .2s var(--c-ease), color .2s var(--c-ease), border-color .2s var(--c-ease);
}
#contract-body .pu-ct-rail-step.now .pu-ct-rail-num{
  background:#fff; color:var(--c-ink-0); border-color:#fff;
  box-shadow:0 0 0 4px rgba(255,255,255,.08);
}
#contract-body .pu-ct-rail-step.done .pu-ct-rail-num{
  background:var(--c-char-2); color:rgba(255,255,255,.72); border-color:transparent;
}
#contract-body .pu-ct-rail-lbl{
  font-size:0.6875rem; letter-spacing:.06em; text-transform:uppercase;
  color:rgba(255,255,255,.42); font-weight:500;
}
#contract-body .pu-ct-rail-step.now .pu-ct-rail-lbl{color:rgba(255,255,255,.86);}

/* — Kaart (elk blok) — */
#contract-body .pu-ct-kaart{
  position:relative; background:var(--c-s2); border-radius:var(--c-r-xxl);
  padding:0; margin:0 0 18px;
  box-shadow: 0 0 0 .5px var(--c-bd);
}
#contract-body .pu-ct-kaart-kop{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:22px 28px 20px; border-bottom:.5px solid var(--c-hair); flex-wrap:wrap;
}
#contract-body .pu-ct-kaart-links{display:flex; align-items:center; gap:12px; min-width:0;}
#contract-body .pu-ct-num{
  width:26px; height:26px; border-radius:var(--r-sm);
  background:var(--c-ink-1); color:#fff;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:0.6875rem; font-weight:600; letter-spacing:-.01em; flex:0 0 26px;
  box-shadow: inset 0 0 0 .5px rgba(255,255,255,.08), 0 0 0 4px var(--c-s2), 0 0 0 4.5px var(--c-hair);
}
#contract-body .pu-ct-kaart-titel{
  font-size:0.9375rem; font-weight:600; letter-spacing:-.02em; color:var(--c-tx); margin:0;
}
#contract-body .pu-ct-kaart-hint{
  font-size:0.75rem; color:var(--c-tx3); letter-spacing:normal;
  display:inline-flex; align-items:center; gap:6px;
}
#contract-body .pu-ct-kaart-hint::before{
  content:""; width:4px; height:4px; border-radius:var(--r-pill); background:var(--c-tx4);
}
#contract-body .pu-ct-kaart > .pu-ct-form,
#contract-body .pu-ct-kaart > .pu-ct-keuzes,
#contract-body .pu-ct-kaart > .pu-ct-akkoord,
#contract-body .pu-ct-kaart > .pu-ct-sign-wrap,
#contract-body .pu-ct-kaart > .pu-ct-lees-akties,
#contract-body .pu-ct-kaart > .pu-ct-lees-body,
#contract-body .pu-ct-kaart > .pu-ct-groep{
  margin-left:28px; margin-right:28px;
}
#contract-body .pu-ct-kaart > .pu-ct-form{margin-top:22px; margin-bottom:6px;}
#contract-body .pu-ct-kaart > .pu-ct-groep:first-of-type{margin-top:22px;}
#contract-body .pu-ct-kaart > .pu-ct-keuzes{margin-top:14px;}
#contract-body .pu-ct-kaart > .pu-ct-akkoord{margin-top:22px;}
#contract-body .pu-ct-kaart > .pu-ct-sign-wrap{margin-top:14px;}
#contract-body .pu-ct-kaart > .pu-ct-lees-akties{margin-top:22px;}
#contract-body .pu-ct-kaart > .pu-ct-lees-body{margin-bottom:22px;}

/* — Formulier — */
#contract-body .pu-ct-form{display:flex; flex-direction:column; gap:14px;}
#contract-body .pu-ct-groep{
  position:relative; font-size:0.6875rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color:var(--c-tx3); margin:14px 0 -2px; padding-top:14px;
  display:flex; align-items:center; gap:10px;
}
#contract-body .pu-ct-groep::before{
  content:""; flex:0 0 4px; width:4px; height:4px; border-radius:var(--r-pill); background:var(--c-tx4);
}
#contract-body .pu-ct-groep::after{
  content:""; flex:1; height:.5px; background:var(--c-hair); margin-left:6px;
}
#contract-body .pu-ct-groep:first-child{margin-top:0; padding-top:0;}
#contract-body .pu-ct-row{display:grid; grid-template-columns:1fr; gap:12px;}
#contract-body .pu-ct-row.two{grid-template-columns:1fr 1fr;}
#contract-body .pu-ct-row.three{grid-template-columns:2.4fr .6fr .6fr;}
#contract-body .pu-ct-row.two-small{grid-template-columns:1fr .8fr;}
#contract-body .pu-ct-field{display:flex; flex-direction:column; gap:7px; min-width:0;}
#contract-body .pu-ct-label{
  font-size:0.6875rem; font-weight:600; letter-spacing:.07em; text-transform:uppercase;
  color:var(--c-tx3);
  display:flex; align-items:center; gap:8px;
}
#contract-body .pu-ct-label .opt{
  color:var(--c-tx4); font-weight:500; text-transform:none; letter-spacing:normal;
  margin-left:2px; font-size:0.6875rem;
}
#contract-body .pu-ct-input,
#contract-body .pu-ct-select{
  width:100%; box-sizing:border-box; padding:12px 14px; font-size:0.9375rem; min-height:44px;
  font-family:inherit; color:var(--c-tx); background:var(--c-s1);
  border:.5px solid var(--c-bd); border-radius:var(--c-r-md); outline:none;
  transition:border-color .2s var(--c-ease), background .2s var(--c-ease), box-shadow .2s var(--c-ease);
  -webkit-appearance:none; appearance:none; letter-spacing:normal;
  box-shadow: inset 0 .5px 0 rgba(255,255,255,.4);
}
#contract-body .pu-ct-input:hover,
#contract-body .pu-ct-select:hover{border-color:var(--c-bd2); background:var(--c-s3);}
#contract-body .pu-ct-input:focus,
#contract-body .pu-ct-select:focus{
  border-color:var(--c-char-2); background:var(--c-s2);
  box-shadow: 0 0 0 3px rgba(38,39,42,.06), inset 0 .5px 0 rgba(255,255,255,.4);
}
#contract-body .pu-ct-input::placeholder{color:var(--c-tx4);}
#contract-body .pu-ct-input:disabled{opacity:.62; background:var(--c-s0); cursor:not-allowed; color:var(--c-tx2);}
#contract-body .pu-ct-select{
  background-image:linear-gradient(45deg,transparent 50%,var(--c-tx2) 50%),linear-gradient(135deg,var(--c-tx2) 50%,transparent 50%);
  background-position:calc(100% - 18px) 55%, calc(100% - 13px) 55%;
  background-size:5px 5px, 5px 5px; background-repeat:no-repeat; padding-right:38px;
}
#contract-body .pu-ct-veilig{
  display:inline-flex; align-items:center; gap:6px;
  font-size:0.6875rem; font-weight:500; letter-spacing:normal; text-transform:none;
  color:var(--c-tx2); margin-left:8px;
}
#contract-body .pu-ct-veilig .lock{
  width:10px; height:10px; border:1.4px solid var(--c-tx2); border-radius:var(--r-sm);
  position:relative; margin-top:1px;
}
#contract-body .pu-ct-veilig .lock::after{
  content:""; position:absolute; top:-5px; left:1.6px; width:6.8px; height:6px;
  border:1.4px solid var(--c-tx2); border-bottom:0; border-radius:3.4px 3.4px 0 0;
}

/* — Knoppen — */
#contract-body .pu-ct-btn{
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:12px 22px; font-size:0.8125rem; font-weight:600; font-family:inherit; letter-spacing:-.005em;
  color:#fff; background:var(--c-ink-1); border:.5px solid var(--c-ink-0);
  border-radius:var(--r-pill); cursor:pointer; text-decoration:none;
  transition:background .2s var(--c-ease), color .2s var(--c-ease), border-color .2s var(--c-ease),
             box-shadow .2s var(--c-ease), transform .2s var(--c-ease);
  min-height:44px;
  box-shadow: inset 0 .5px 0 rgba(255,255,255,.12);
}
#contract-body .pu-ct-btn:hover{
  background:var(--c-char-1); color:#fff; border-color:var(--c-char-1);
  box-shadow: inset 0 .5px 0 rgba(255,255,255,.16);
  transform:translateY(-.5px);
}
#contract-body .pu-ct-btn:active{transform:translateY(0);}
#contract-body .pu-ct-btn:disabled{
  opacity:.42; cursor:default; background:var(--c-ink-1); color:#fff; border-color:var(--c-ink-1);
  box-shadow:none; transform:none;
}
#contract-body .pu-ct-btn.ghost{
  background:var(--c-s2); color:var(--c-tx); border:.5px solid var(--c-bd);
  box-shadow: inset 0 .5px 0 rgba(255,255,255,.6);
}
#contract-body .pu-ct-btn.ghost:hover{
  background:var(--c-s2); color:var(--c-ink-1); border-color:var(--c-tx3);
  box-shadow: inset 0 .5px 0 rgba(255,255,255,.6);
}
#contract-body .pu-ct-btn.wide{width:100%;}
#contract-body .pu-ct-btn.lg{padding:14px 26px; font-size:0.875rem; min-height:48px;}

/* — Lees-blok (accordion + download) — */
#contract-body .pu-ct-lees-akties{display:flex; gap:8px; flex-wrap:wrap;}
#contract-body .pu-ct-lees-body{
  margin:14px 28px 22px; padding:0 22px; background:var(--c-s1);
  border-radius:var(--c-r-lg);
  box-shadow: 0 0 0 .5px var(--c-bd), inset 0 1px 2px rgba(20,22,24,.02);
  max-height:0; overflow:hidden;
  transition:max-height .35s var(--c-ease), padding .35s var(--c-ease);
}
#contract-body .pu-ct-lees-body.open{max-height:640px; padding:22px; overflow-y:auto;}
#contract-body .pu-ct-lees-scroll{max-height:560px; overflow-y:auto; padding-right:8px;}
#contract-body .pu-ct-lees-scroll .ct-h{
  position:relative; font-size:0.8125rem; font-weight:600; color:var(--c-tx);
  margin:22px 0 10px; letter-spacing:.02em; text-transform:uppercase;
  padding-left:14px;
}
#contract-body .pu-ct-lees-scroll .ct-h::before{
  content:""; position:absolute; left:0; top:6px; width:6px; height:6px; border-radius:var(--r-pill);
  background:var(--c-ink-1);
}
#contract-body .pu-ct-lees-scroll .ct-h:first-child{margin-top:0;}
#contract-body .pu-ct-lees-scroll .ct-b,
#contract-body .pu-ct-lees-scroll .ct-p{font-size:0.8125rem; line-height:1.65; color:var(--c-tx2); margin:0 0 8px;}
#contract-body .pu-ct-lees-scroll .ct-b{padding-left:14px; position:relative;}
#contract-body .pu-ct-lees-scroll .ct-b::before{content:"—"; position:absolute; left:0; color:var(--c-tx4);}

/* — Keuzes (radio-tegels met eigen ring, subtle depth) — */
#contract-body .pu-ct-keuzes{display:flex; flex-direction:column; gap:12px; margin-bottom:8px;}
#contract-body .pu-ct-radio{
  position:relative; display:flex; align-items:flex-start; gap:14px; padding:16px 20px 16px 18px;
  background:var(--c-s2); border-radius:var(--c-r-md); cursor:pointer;
  box-shadow: 0 0 0 .5px var(--c-bd);
  transition:box-shadow .2s var(--c-ease), background .2s var(--c-ease), transform .15s var(--c-ease);
}
#contract-body .pu-ct-radio input::before{content:"";position:absolute;top:50%;left:50%;width:44px;height:44px;transform:translate(-50%,-50%);}
#contract-body .pu-ct-radio:hover{
  background:var(--c-s3);
  box-shadow: 0 0 0 .5px var(--c-bd2);
}
#contract-body .pu-ct-radio input{
  appearance:none; -webkit-appearance:none;
  width:18px; height:18px; border-radius:var(--r-pill); background:var(--c-s2);
  border:.5px solid var(--c-bd2); margin:1px 0 0 0; flex:0 0 18px;
  position:relative; cursor:pointer;
  transition:border-color .2s var(--c-ease), background .2s var(--c-ease);
  box-shadow: inset 0 .5px 0 rgba(255,255,255,.6);
}
#contract-body .pu-ct-radio input:hover{border-color:var(--c-tx3);}
#contract-body .pu-ct-radio input:checked{background:var(--c-ink-1); border-color:var(--c-ink-1);}
#contract-body .pu-ct-radio input:checked::after{
  content:""; position:absolute; inset:0; margin:auto;
  width:6px; height:6px; border-radius:var(--r-pill); background:#fff;
}
#contract-body .pu-ct-radio.on{
  background:var(--c-s2);
  box-shadow: 0 0 0 1px var(--c-ink-1);
}
#contract-body .pu-ct-radio-tx{display:flex; flex-direction:column; gap:2px; flex:1; min-width:0;}
#contract-body .pu-ct-radio-tx b{
  font-size:0.875rem; font-weight:600; color:var(--c-tx); letter-spacing:-.012em; margin-bottom:3px;
}
#contract-body .pu-ct-radio-tx span{font-size:0.8125rem; color:var(--c-tx2); line-height:1.5;}
#contract-body .pu-ct-kaart{padding-bottom:8px;}
#contract-body .pu-ct-kaart .pu-ct-sub{margin-bottom:4px;}

/* — Akkoord + handtekening — */
#contract-body .pu-ct-akkoord{
  display:flex; align-items:flex-start; gap:14px; padding:16px 18px;
  background:var(--c-s2); border-radius:var(--c-r-md);
  box-shadow: 0 0 0 .5px var(--c-bd);
  font-size:0.8125rem; color:var(--c-tx); line-height:1.55; cursor:pointer;
  transition:box-shadow .2s var(--c-ease), background .2s var(--c-ease);
}
#contract-body .pu-ct-akkoord:hover{background:var(--c-s3); box-shadow: 0 0 0 .5px var(--c-bd2);}
#contract-body .pu-ct-akkoord input{
  appearance:none; -webkit-appearance:none;
  width:18px; height:18px; border-radius:var(--r-sm); background:var(--c-s2);
  border:.5px solid var(--c-bd2); margin-top:1px; flex:0 0 18px;
  position:relative; cursor:pointer;
  transition:border-color .2s var(--c-ease), background .2s var(--c-ease);
  box-shadow: inset 0 .5px 0 rgba(255,255,255,.6);
}
/* Onzichtbaar 44px-tikvlak om het kleine vinkje, zonder de opmaak te veranderen. */
#contract-body .pu-ct-akkoord input::before{content:"";position:absolute;top:50%;left:50%;width:44px;height:44px;transform:translate(-50%,-50%);}
#contract-body .pu-ct-akkoord input:hover{border-color:var(--c-tx3);}
#contract-body .pu-ct-akkoord input:checked{background:var(--c-ink-1); border-color:var(--c-ink-1);}
#contract-body .pu-ct-akkoord input:checked::after{
  content:""; position:absolute; top:3px; left:5px; width:6px; height:10px;
  border-right:2px solid #fff; border-bottom:2px solid #fff; transform:rotate(45deg);
}
#contract-body .pu-ct-akkoord a{color:var(--c-tx); text-decoration:underline; text-decoration-color:var(--c-bd2); text-underline-offset:3px;}
#contract-body .pu-ct-akkoord a:hover{text-decoration-color:var(--c-tx2);}

#contract-body .pu-ct-sign-wrap{
  position:relative; height:190px; background:var(--c-s1);
  border-radius:var(--c-r-lg); overflow:hidden;
  box-shadow: 0 0 0 .5px var(--c-bd), inset 0 1px 2px rgba(20,22,24,.03);
}
#contract-body .pu-ct-sign-wrap::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.6;
  background:
    linear-gradient(to bottom,transparent 0%,transparent calc(100% - 44px),var(--c-bd) calc(100% - 44px),var(--c-bd) calc(100% - 43.5px),transparent calc(100% - 43.5px)),
    repeating-linear-gradient(45deg,transparent 0 10px,rgba(20,22,24,.012) 10px 10.4px);
}
#contract-body .pu-ct-sign-wrap::after{
  content:"× hier tekenen"; position:absolute; left:14px; bottom:14px;
  font-size:0.6875rem; letter-spacing:.06em; text-transform:uppercase;
  color:var(--c-tx4); pointer-events:none; z-index:1;
}
#contract-body .pu-ct-sign{position:absolute; inset:0; width:100%; height:100%; display:block; touch-action:none; z-index:2;}
#contract-body .pu-ct-sign-hint{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-size:0.8125rem; color:var(--c-tx3); pointer-events:none; letter-spacing:-.01em; z-index:1;
}
#contract-body .pu-ct-sign-clear{
  position:absolute; top:6px; right:6px; z-index:3;
  min-height:44px; display:inline-flex; align-items:center;
  padding:5px 14px; font-size:0.6875rem; font-weight:500; font-family:inherit;
  color:var(--c-tx2); background:var(--c-s2); border:.5px solid var(--c-bd);
  border-radius:var(--r-pill); cursor:pointer; letter-spacing:-.005em;
  transition:color .18s, border-color .18s;
  box-shadow: none;
}
#contract-body .pu-ct-sign-clear:hover{color:var(--c-ink-1); border-color:var(--c-tx3);}

/* — Statuspaneel na tekenen — */
#contract-body .pu-ct-klaar{
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:18px;
  padding:36px 30px; background:var(--c-s2); border:1px solid var(--c-bd); border-radius:var(--r-lg);
}
#contract-body .pu-ct-check{
  width:64px; height:64px; border-radius:var(--r-lg); background:var(--c-ok-bg);
  border:1px solid var(--c-ok-bd);
  display:inline-flex; align-items:center; justify-content:center;
}
#contract-body .pu-ct-check-mark{
  width:24px; height:12px; border-left:3px solid var(--c-ok); border-bottom:3px solid var(--c-ok);
  transform:rotate(-45deg) translate(2px,-2px);
}
#contract-body .pu-ct-warning{
  padding:12px 16px; background:var(--c-warn-bg); border:1px solid var(--c-warn-bd);
  border-radius:var(--r-md); color:var(--c-warn-tx); font-size:0.8125rem; line-height:1.5;
}

/* — Foot van elke kaart met save-knop — */
#contract-body .pu-ct-foot{
  display:flex; align-items:center; justify-content:flex-end; gap:12px;
  margin:22px 28px 0; padding:18px 0 20px;
  border-top:.5px solid var(--c-hair);
}
#contract-body .pu-ct-foot-status{
  font-size:0.75rem; color:var(--c-tx3); flex:1;
  display:inline-flex; align-items:center; gap:8px;
}
#contract-body .pu-ct-foot-status::before{
  content:""; width:6px; height:6px; border-radius:var(--r-pill); background:var(--c-tx4);
  transition:background .2s var(--c-ease);
}
#contract-body .pu-ct-foot-status.ok{color:var(--c-ok);}
#contract-body .pu-ct-foot-status.ok::before{background:var(--c-ok); box-shadow: 0 0 0 3px rgba(22,163,74,.14);}

@media(max-width:640px){
  #contract-body .pu-ct-kop{padding:24px 22px 22px; border-radius:var(--c-r-lg);}
  #contract-body .pu-ct-kaart{border-radius:var(--c-r-lg);}
  #contract-body .pu-ct-kaart-kop{padding:18px 20px 16px;}
  #contract-body .pu-ct-kaart > .pu-ct-form,
  #contract-body .pu-ct-kaart > .pu-ct-keuzes,
  #contract-body .pu-ct-kaart > .pu-ct-akkoord,
  #contract-body .pu-ct-kaart > .pu-ct-sign-wrap,
  #contract-body .pu-ct-kaart > .pu-ct-lees-akties,
  #contract-body .pu-ct-kaart > .pu-ct-lees-body,
  #contract-body .pu-ct-kaart > .pu-ct-groep,
  #contract-body .pu-ct-foot{margin-left:20px; margin-right:20px;}
  #contract-body .pu-ct-row.two,
  #contract-body .pu-ct-row.three,
  #contract-body .pu-ct-row.two-small{grid-template-columns:1fr;}
  #contract-body .pu-ct-titel{font-size:1.625rem;}
  /* Op een telefoon teken je met je vinger, niet met een muis: veel meer ruimte. */
  #contract-body .pu-ct-sign-wrap{height:min(46vh,300px);}
  #contract-body .pu-ct-sign-hint{font-size:0.875rem;}
  #contract-body .pu-ct-rail-lbl{display:none;}
}

/* ================================================================ */
/* PORTAL-HERO — dominante hoofd-CTA + welkom-empty-state             */
/* ================================================================ */
#app-shell .portal-hero{
  position:relative; margin:0 0 22px; padding:26px 30px;
  background:#7342F4; color:#fff; border-radius:var(--r-lg); overflow:hidden;
  display:flex; align-items:center; justify-content:space-between; gap:22px;
  isolation:isolate;
}
#app-shell .portal-hero::before{
  content:""; position:absolute; inset:0; z-index:0; opacity:.14; pointer-events:none;
  background:repeating-linear-gradient(-38deg,transparent 0 22px,rgba(255,255,255,.14) 22px 22.5px);
}
#app-shell .portal-hero::after{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(circle at 100% 0%,rgba(194,255,173,.12) 0%,transparent 46%);
}
#app-shell .portal-hero-tx{position:relative; z-index:1; display:flex; flex-direction:column; gap:6px; min-width:0; flex:1;}
#app-shell .portal-hero-eyebrow{
  font-size:0.6875rem; font-weight:500; letter-spacing:.12em; text-transform:uppercase;
  color:rgba(255,255,255,.52);
}
#app-shell .portal-hero-titel{
  font-size:1.625rem; font-weight:600; letter-spacing:-.028em; line-height:1.15;
  color:#fff; margin:0; text-wrap:balance;
}
#app-shell .portal-hero-sub{
  font-size:0.8125rem; color:rgba(255,255,255,.62); line-height:1.5; margin:4px 0 0; letter-spacing:.01em;
}
#app-shell .portal-hero-btn{
  position:relative; z-index:1; display:inline-flex; align-items:center; gap:12px;
  padding:12px 12px 12px 22px; font:inherit; font-size:0.875rem; font-weight:600; letter-spacing:-.005em;
  background:#fff; color:#1A1A1A; border:0; border-radius:var(--r-pill); cursor:pointer;
  transition:background .2s cubic-bezier(.32,.72,0,1), transform .18s cubic-bezier(.32,.72,0,1);
  box-shadow:none;
  min-height:48px; flex:none; white-space:nowrap;
}
#app-shell .portal-hero-btn:hover{background:#C2FFAD; transform:translateY(-1px);}
#app-shell .portal-hero-btn:active{transform:translateY(0);}
#app-shell .portal-hero-arr{
  display:inline-flex; align-items:center; justify-content:center;
  width:32px; height:32px; border-radius:var(--r-md); background:#7342F4; color:#fff;
  transition:transform .2s cubic-bezier(.32,.72,0,1);
}
#app-shell .portal-hero-arr svg{width:16px; height:16px; display:block;}
#app-shell .portal-hero-btn:hover .portal-hero-arr{transform:translate(2px,-2px);}

/* Welkom, in behandeling en afgerond zijn mededelingen, geen acties: er zit geen knop in.
   Ze stonden op hetzelfde zwart als de actie-hero, en daaronder stond nog een regel die
   de tekstkleur weer donker zette. Zwarte tekst op een zwart vlak: onleesbaar.
   Deze varianten zijn nu een lichte kaart. Zwart betekent voortaan: hier moet jij iets. */
#app-shell .portal-hero.portal-hero-welkom,
#app-shell .portal-hero.portal-hero-klaar{background:#fff !important; color:var(--tx); border:1px solid var(--bd2);}
#app-shell .portal-hero.portal-hero-welkom::before,
#app-shell .portal-hero.portal-hero-klaar::before{opacity:1; background:repeating-linear-gradient(-38deg,transparent 0 22px,rgba(26,26,28,.028) 22px 22.5px);}
#app-shell .portal-hero.portal-hero-welkom::after,
#app-shell .portal-hero.portal-hero-klaar::after{background:radial-gradient(circle at 100% 0%,rgba(194,255,173,.22) 0%,transparent 46%);}
#app-shell .portal-hero.portal-hero-welkom .portal-hero-eyebrow,
#app-shell .portal-hero.portal-hero-klaar .portal-hero-eyebrow{color:var(--tx3);}
#app-shell .portal-hero.portal-hero-welkom .portal-hero-titel,
#app-shell .portal-hero.portal-hero-klaar .portal-hero-titel{color:var(--tx);}
#app-shell .portal-hero.portal-hero-welkom .portal-hero-sub,
#app-shell .portal-hero.portal-hero-klaar .portal-hero-sub{color:var(--tx2);}
/* De afwijs-hero is de enige lichte hero met een knop. Wit op wit valt weg. */
#app-shell .portal-hero.portal-hero-welkom .portal-hero-btn,
#app-shell .portal-hero.portal-hero-klaar .portal-hero-btn{background:#7342F4; color:#fff;}
#app-shell .portal-hero.portal-hero-welkom .portal-hero-btn:hover,
#app-shell .portal-hero.portal-hero-klaar .portal-hero-btn:hover{background:#000;}
#app-shell .portal-hero.portal-hero-welkom .portal-hero-arr,
#app-shell .portal-hero.portal-hero-klaar .portal-hero-arr{background:#fff; color:#1A1A1C;}

@media(max-width:860px){
  #app-shell .portal-hero{flex-direction:column; align-items:flex-start; padding:22px 22px 24px; gap:16px;}
  #app-shell .portal-hero-btn{width:100%; justify-content:space-between;}
  #app-shell .portal-hero-titel{font-size:1.375rem;}
}

/* ================================================================ */
/* PORTAL MOBILE — zijbalk collapse, KPI-grid responsive              */
/* ================================================================ */
@media(max-width:860px){
  /* Zijbalk wordt bovenbalk */
  #app-shell,.app-shell{flex-direction:column;}
  #app-shell .zijbalk,.app-shell .zijbalk{
    width:100%; flex:none; height:auto; position:sticky; top:0; z-index:20;
    padding:12px 16px; border-right:0; border-bottom:.5px solid var(--bd);
    flex-direction:row; align-items:center; gap:12px;
    background:rgba(255,255,255,.94); backdrop-filter:blur(20px);
  }
  #app-shell .zijbalk-logo,.app-shell .zijbalk-logo{margin:0; padding:0; flex:1;}
  #app-shell .zijbalk-sub,.app-shell .zijbalk-sub{display:none;}
  #app-shell .zijbalk-nav,.app-shell .zijbalk-nav{
    flex-direction:row; gap:4px; overflow-x:auto; -webkit-overflow-scrolling:touch;
    padding-bottom:2px;
    /* Hier stond margin-right:-16px, bedoeld om de strook tot de rand te laten lopen.
       Er was alleen niets dat die 16px opving, dus de hele portal schuif 16px zijwaarts
       op elke telefoon, op elk scherm. Gemeten op 375px: paginabreedte 391.
       Nu opgevangen met padding aan dezelfde kant. */
    margin-right:-16px; padding-right:16px;
  }
  /* En de balk zelf klipt wat er buiten valt, zodat de pagina nooit meeschuift.
     clip in plaats van hidden: dat maakt geen schuifcontext aan en breekt sticky niet. */
  #app-shell .zijbalk,.app-shell .zijbalk{overflow-x:clip;}
  #app-shell .zijbalk-nav::-webkit-scrollbar,.app-shell .zijbalk-nav::-webkit-scrollbar{height:0;}
  #app-shell .nav-knop,.app-shell .nav-knop{white-space:nowrap; flex:none;}
  #app-shell .zijbalk-onder,.app-shell .zijbalk-onder{display:none;}
  #app-shell .inhoud,.app-shell .inhoud{padding:20px 18px 60px; max-width:100%;}
  /* KPI-grid 4 → 2 kolommen */
  #app-shell .tile-row{grid-template-columns:repeat(2,1fr); gap:8px;}
  #app-shell .tile{padding:12px 14px;}
  #app-shell .tile .val{font-size:1.0625rem;}
  #app-shell .tile .lbl{font-size:0.6875rem;}
  #app-shell .tile .sub{font-size:0.6875rem;}
  /* Portal-hero al mobile hierboven */
}
@media(max-width:520px){
  #app-shell .tile-row{grid-template-columns:1fr; gap:8px;}
  #app-shell .portal-hero{padding:20px 20px 22px;}
  #app-shell .portal-hero-titel{font-size:1.25rem;}
  #app-shell .portal-hero-sub{font-size:0.8125rem;}
}

/* Validatie-fout: rode ring op geg-rij + foutmelding */
#app-shell .geg-rij.geg-fout input,#app-shell .geg-rij.geg-fout select{border-color:var(--k-rood);box-shadow:0 0 0 3px rgba(163,43,35,.12);background:#FFF0EF}
#app-shell .geg-foutmsg{color:var(--k-rood);font-size:0.75rem;font-weight:500;margin-top:6px;letter-spacing:-.005em}

/* Kalender/select accent-color: brand-neutraal charcoal (geen browser-blauw) */
input[type="date"],input[type="time"],input[type="datetime-local"],input[type="month"],input[type="checkbox"],input[type="radio"],select{accent-color:#1A1A1C;}
/* Native date-picker indicator zwart maken in Chrome */
input[type="date"]::-webkit-calendar-picker-indicator{filter:grayscale(1) brightness(.4);cursor:pointer;opacity:.7;}
input[type="date"]::-webkit-calendar-picker-indicator:hover{opacity:1;}

/* merkcheck:begin
   ===== MULTI-BRAND: Piekfijn (default) / PackUp overrides =====
   Dit blok is de merkschakelaar. PackUp HOORT hier te staan: het zijn de
   kleuren per merk, geen tekst die een kandidaat leest. merkcheck.sh slaat
   alles binnen dit afgebakende blok over.
   Buiten dit blok is PackUp in dit bestand altijd een fout. */
body{
  /* Piekfijn defaults (zichtbaar via body.merk-piekfijn of onbekend) */
  --accent:#C2FFAD;      /* accent-vlak (Piekfijn: lime) */
  --accent-ink:#131315;  /* tekst-op-accent (Piekfijn: charcoal) */
  --accent-hi:#DFF6D0;   /* hover */
  --accent-glow:rgba(194,255,173,.35);
  --brand-tekst:#1D1D1F; /* huisstijl-tekst voor logo etc */
}
body.merk-packup{
  --accent:#7342F4;      /* PackUp: paars per masterspec */
  --accent-ink:#FFFFFF;  /* wit op paars */
  --accent-hi:#7E4EF6;
  --accent-glow:rgba(115,66,244,.30);
  --brand-tekst:#16181a; /* diep paars voor Logo-tekst */
  --brand-bg-soft:#EEEDFE;
  --brand-bd:#AFA9EC;
}
/* Markeerstreep: mint, net als de basisregel. Paars-glow las als lavendel. */
body.merk-packup .ha-primair,
body.merk-packup .cta-primair,
body.merk-packup .portal-hero-btn{background:#fff;color:var(--brand-tekst)}
/* Portal-hero achtergrond op PackUp: paarse gradient ipv charcoal */
body.merk-packup #app-shell .portal-hero{
  background:linear-gradient(135deg,#7342F4 0%,#6836E6 60%,#6836E6 100%);
  color:#fff;
}
body.merk-packup #app-shell .portal-hero-eyebrow{color:rgba(255,255,255,.72)}
body.merk-packup #app-shell .portal-hero-sub{color:rgba(255,255,255,.85)}
body.merk-packup #app-shell .portal-hero-btn{background:#fff;color:#16181a;font-weight:600}
body.merk-packup #app-shell .portal-hero-arr{background:#6836E6;color:#fff}
/* Sidebar-nav actief pill (was charcoal) */
body.merk-packup #app-shell .nav-knop.actief{background:#EEEDFE;color:#16181a}
body.merk-packup #app-shell .nav-knop.actief::before{background:#7342F4}
/* Zijbalk-logo */
body.merk-packup #app-shell .zijbalk-logo{color:#16181a}
body.merk-packup #app-shell .zijbalk-logo .punt{color:#7342F4}
/* Careersite logo */
body.merk-packup .site-logo, body.merk-packup [data-merk-logo]{color:#16181a}
body.merk-packup .site-logo .punt, body.merk-packup [data-merk-logo] .punt{color:#7342F4}
/* Segmented merk-toggle */
body.merk-packup .merk-toggle button.actief{background:#6836E6;color:#fff}
/* Voortgangs-balkjes / training-progress lime → paars */
body.merk-packup #app-shell .stap.nu .bol{border-color:#7342F4;box-shadow:0 0 0 4px rgba(115,66,244,.14)}
body.merk-packup #app-shell .stap.nu .bol::after{background:#7342F4}
body.merk-packup #app-shell .trn-prog span.done{background:#6836E6}
body.merk-packup #app-shell .trn-prog span.now{background:#7342F4;box-shadow:0 0 0 3px rgba(115,66,244,.20)}
body.merk-packup #app-shell .trn-opt.goed{border-color:#7342F4;background:#EEEDFE;color:#16181a}
body.merk-packup #app-shell .trn-opt.goed .trn-opt-let{background:#7342F4;color:#fff}
body.merk-packup #app-shell .trn-btn{background:#7342F4;border-color:#7342F4;box-shadow:none}
body.merk-packup #app-shell .trn-btn:hover{background:#7E4EF6;border-color:#7E4EF6;box-shadow:none}
body.merk-packup #app-shell .trn-check{background:#EEEDFE;color:#7342F4}
/* Contract-hero: paarse variant */
body.merk-packup #contract-body .pu-ct-kop{background:linear-gradient(135deg,#7342F4 0%,#6836E6 100%)}
body.merk-packup #contract-body .pu-ct-kop::after{background:radial-gradient(circle at 100% 0%,rgba(194,255,173,0) 0%,transparent 46%),radial-gradient(circle at 100% 0%,rgba(255,255,255,.06) 0%,transparent 60%)}
body.merk-packup #contract-body .pu-ct-chip-dot{background:#7342F4;box-shadow:0 0 0 3px rgba(115,66,244,.18)}
body.merk-packup #contract-body .pu-ct-mono-dot{background:#7342F4}
/* Video-flow donker: accent-lime → PackUp lime blijft (op donker leest paars slecht), maar knop paars */
body.merk-packup #video-flow .vid2-donker .vid2-btn{background:#7342F4;color:#fff;border-color:#7342F4;box-shadow:none}
body.merk-packup #video-flow .vid2-donker .vid2-btn:hover{background:#7E4EF6;border-color:#7E4EF6}
body.merk-packup #video-flow .vid2-donker .vid2-progress span.done{background:#7342F4}
body.merk-packup #video-flow .vid2-donker .vid2-pill{background:#7342F4;color:#fff}
/* Inlog-modal: primaire actie paars */
body.merk-packup .inlog-links a, body.merk-packup .inlog-foot a{color:#16181a}
body.merk-packup .inlog-box .knop--vol{background:#7342F4;color:#fff;border-color:#7342F4}
/* merkcheck:end */

/* ===== Training (Duolingo-loop in portal) — .trn-* namespace ===== */
#app-shell #screen-training .pagina-kop{display:none}
#app-shell .trn-wrap{max-width:760px;margin:0 auto;padding:12px 0 56px;display:flex;flex-direction:column;gap:26px}
#app-shell .trn-top{display:flex;align-items:center;justify-content:space-between}
#app-shell .trn-eyebrow{font-size:0.6875rem;font-weight:600;letter-spacing:.11em;text-transform:uppercase;color:var(--tekst-zacht,#636369)}
#app-shell .trn-prog{display:flex;gap:6px}
#app-shell .trn-prog span{flex:1;height:4px;border-radius:var(--r-pill);background:#E3E3E5}
#app-shell .trn-prog span.done{background:#1D1D1F}
#app-shell .trn-prog span.now{background:#C2FFAD;box-shadow:0 0 0 3px rgba(194,255,173,.2)}
#app-shell .trn-kaart{
  background:#fff;border:.5px solid #E3E3E5;border-radius:var(--r-lg);padding:32px 34px 28px;
  box-shadow:none;
  display:flex;flex-direction:column;gap:26px;
}
#app-shell .trn-foto{border-radius:var(--r-lg);overflow:hidden;background:#EFEFF1;margin:-4px -4px 0}
/* Trainingsfoto's zijn staande productfoto's. Niet rekken en niet bijsnijden:
   de foto krijgt zijn eigen verhouding, gecentreerd, en wordt nooit groter
   getoond dan 360px hoog. Zo blijft ook een kleine bronfoto scherp. */
#app-shell .trn-foto img{display:block;width:auto;max-width:100%;height:auto;max-height:360px;margin:0 auto;object-fit:contain}
#app-shell .trn-vraag{font-size:1.375rem;font-weight:600;letter-spacing:-.02em;line-height:1.25;color:#1D1D1F;margin:0;text-wrap:balance}
#app-shell .trn-lead{font-size:0.9375rem;color:#636369;line-height:1.55;margin:0}
#app-shell .trn-opties{display:flex;flex-direction:column;gap:10px}
#app-shell .trn-opt{
  display:flex;align-items:center;gap:12px;padding:14px 16px;
  background:#fff;border:1px solid #E3E3E5;border-radius:var(--r-lg);
  text-align:left;font-size:0.9375rem;color:#1D1D1F;cursor:pointer;
  transition:border-color .18s,background .18s,transform .12s;
  font-family:inherit;
}
#app-shell .trn-opt:hover:not(:disabled){border-color:#1D1D1F;transform:translateY(-1px)}
#app-shell .trn-opt-let{
  width:28px;height:28px;flex:0 0 28px;border-radius:var(--r-sm);background:#EFEFF1;color:#1D1D1F;
  display:inline-flex;align-items:center;justify-content:center;font-size:0.75rem;font-weight:700;letter-spacing:.02em
}
#app-shell .trn-opt-tx{flex:1;min-width:0}
/* Gekozen, nog niet bevestigd. Geen goed/fout-kleur: die verklapt het antwoord. */
#app-shell .trn-opt.kies{border-color:#1D1D1F;background:#F6F6F8}
#app-shell .trn-opt.kies .trn-opt-let{background:#1D1D1F;color:#fff}
#app-shell .trn-top-btns{display:flex;align-items:center;gap:16px;flex:none}
#app-shell .trn-klaar-terug{margin-top:2px}
#app-shell .trn-btn-bevestig.uit{opacity:.38;box-shadow:none}
#app-shell .trn-btn-bevestig.uit:hover{transform:none}
#app-shell .trn-opt.goed{border-color:var(--k-groen-pastel);background:var(--k-groen-zacht);color:var(--k-groen)}
#app-shell .trn-opt.goed .trn-opt-let{background:var(--k-groen);color:#fff}
#app-shell .trn-opt.fout{border-color:var(--k-rood-pastel);background:var(--k-rood-zacht);color:var(--k-rood)}
#app-shell .trn-opt.fout .trn-opt-let{background:var(--k-rood);color:#fff}
#app-shell .trn-opt.uit{opacity:.5}
#app-shell .trn-opt:disabled{cursor:default}
#app-shell .trn-uitleg{
  border-top:.5px solid #E3E3E5;padding-top:18px;display:flex;flex-direction:column;gap:12px;
}
#app-shell .trn-uitleg-kop{font-size:0.9375rem;font-weight:600;letter-spacing:-.015em;color:#1D1D1F}
#app-shell .trn-uitleg.goed .trn-uitleg-kop{color:var(--k-groen)}
#app-shell .trn-uitleg.fout .trn-uitleg-kop{color:var(--k-rood)}
#app-shell .trn-uitleg p{font-size:0.875rem;color:#636369;line-height:1.55;margin:0}
#app-shell .trn-btn{
  align-self:flex-start;display:inline-flex;align-items:center;gap:10px;
  padding:12px 22px;background:#1D1D1F;color:#fff;border:1px solid #1D1D1F;border-radius:var(--r-pill);
  font-size:0.875rem;font-weight:600;letter-spacing:-.01em;cursor:pointer;font-family:inherit;
  transition:transform .12s, box-shadow .18s;
  box-shadow:none
}
#app-shell .trn-btn:hover{transform:translateY(-1px);box-shadow:none}
#app-shell .trn-btn-pijl{font-size:1rem;line-height:1}
#app-shell .trn-klaar{align-items:center;text-align:center;padding:36px 28px}
#app-shell .trn-check{
  width:72px;height:72px;border-radius:var(--r-lg);background:var(--k-groen-zacht);color:var(--k-groen);
  display:inline-flex;align-items:center;justify-content:center;margin-bottom:4px;
}
#app-shell .trn-check svg{width:44px;height:44px}
/* Stond op één rij zonder ruimte ertussen, waardoor de hoofdknop en de link elkaar
   overlapten zodra ze allebei getoond werden. */
#app-shell .trn-klaar-btns{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px 18px;margin-top:8px}
#app-shell .trn-klaar .trn-btn{align-self:center}
@media(max-width:640px){
  #app-shell .trn-kaart{padding:22px 20px}
  #app-shell .trn-vraag{font-size:1.1875rem}
  #app-shell .trn-foto img{max-height:260px}
}

/* ============================================================
   v134 — Contract stap 1: overzicht i.p.v. een tweede invulformulier.
   Gegevens vul je op één plek in ("Mijn gegevens"); hier lees je ze terug.
   ============================================================ */
#contract-body .pu-ct-sam{padding:4px 28px 0;}
#contract-body .pu-ct-sam-uitleg{
  font-size:0.8125rem; line-height:1.55; color:var(--c-tx2);
  background:var(--c-s1); border:.5px solid var(--c-hair); border-radius:var(--r-md);
  padding:13px 15px; margin:6px 0 16px;
}
#contract-body .pu-ct-sam-rij{
  display:flex; align-items:baseline; gap:16px;
  padding:11px 0; border-bottom:.5px solid var(--c-hair);
}
#contract-body .pu-ct-sam-rij:last-child{border-bottom:none;}
#contract-body .pu-ct-sam-l{
  flex:0 0 132px; font-size:0.6875rem; font-weight:600; letter-spacing:.05em;
  text-transform:uppercase; color:var(--c-tx3);
}
#contract-body .pu-ct-sam-w{font-size:0.875rem; color:var(--c-tx); min-width:0; word-break:break-word;}
#contract-body .pu-ct-sam-w.leeg{color:var(--c-tx4); font-style:italic;}
@media(max-width:640px){
  #contract-body .pu-ct-sam{padding:4px 18px 0;}
  #contract-body .pu-ct-sam-rij{flex-direction:column; gap:3px;}
  #contract-body .pu-ct-sam-l{flex:none;}
}

/* ============================================================
   v136 — "Al eerder begonnen?" op de aanmeldpagina.
   Iemand die halverwege stopte pakt de draad op via z'n portal-login.
   ============================================================ */
.flow-inlog{
  margin-top:20px; padding-top:16px; border-top:1px solid var(--lijn);
  font-size:0.8125rem; color:var(--tekst-zacht); line-height:1.5; text-align:center;
}
.flow-inlog-btn{
  background:none; border:none; padding:0; font:inherit; color:var(--tekst);
  font-weight:600; text-decoration:underline; text-underline-offset:2px; cursor:pointer;
  min-height:44px; display:inline-flex; align-items:center;
}
.flow-inlog-btn:hover{opacity:.7;}

/* ============================================================
   v137 — Aanmeldpagina: introregel was te licht om prettig te lezen.
   ============================================================ */
#screen-solliciteren .sectie .sub{color:var(--tekst);opacity:.75;font-size:0.9375rem;}
#screen-solliciteren .sectie h2{color:var(--tekst);}
/* geboortedatum: drie gelijkwaardige dropdowns */
#screen-solliciteren .gebdat-rij{display:grid;grid-template-columns:1fr 1.4fr 1fr;gap:8px;}
#screen-solliciteren .gebdat-rij .veld-select{width:100%;}
#screen-solliciteren .gebdat-rij select{width:100%;}

/* ============================================================
   v138 — Gegevens + contract op één pagina, en de afsluitende tekst
   nadat iemand digitaal getekend heeft.
   ============================================================ */
#contract-body .pu-ct-formwrap{padding:4px 28px 0;}
#contract-body .geg-form{display:block;}
#contract-body .geg-form .geg-sectie{
  font-size:0.6875rem; font-weight:600; letter-spacing:.05em; text-transform:uppercase;
  color:var(--c-tx3); margin:22px 0 10px;
}
#contract-body .geg-form .geg-sectie:first-child{margin-top:6px;}
#contract-body .pu-ct-volgend{
  text-align:left; max-width:520px; margin:26px auto 0;
  background:var(--c-s1); border:.5px solid var(--c-hair); border-radius:var(--r-lg); padding:20px 22px;
}
#contract-body .pu-ct-volgend-kop{
  font-size:0.6875rem; font-weight:600; letter-spacing:.05em; text-transform:uppercase;
  color:var(--c-tx3); margin-bottom:12px;
}
#contract-body .pu-ct-lijst{margin:0; padding-left:20px; display:flex; flex-direction:column; gap:9px;}
#contract-body .pu-ct-lijst li{font-size:0.875rem; line-height:1.55; color:var(--c-tx);}
#contract-body .pu-ct-volgend-na{
  margin:16px 0 0; font-size:0.8125rem; line-height:1.55; color:var(--c-tx2);
  padding-top:14px; border-top:.5px solid var(--c-hair);
}
@media(max-width:640px){
  #contract-body .pu-ct-formwrap{padding:4px 18px 0;}
}

/* ============================================================
   v139 — Sticky menubalk op de publieke site.
   Blijft altijd in beeld en wordt compacter zodra je scrollt.
   ============================================================ */
.pub-top{
  transition:padding .22s cubic-bezier(.22,.61,.36,1),
             background .22s cubic-bezier(.22,.61,.36,1),
             border-color .22s cubic-bezier(.22,.61,.36,1);
  -webkit-backdrop-filter:blur(20px);
}
.pub-top.gescrolld{
  padding-top:10px; padding-bottom:10px;
  background:rgba(255,255,255,.92);
  border-bottom-color:var(--lijn-d, #D2D2D7);
}
.pub-top.gescrolld .logo{font-size:1.1875rem;}
@media (prefers-reduced-motion:reduce){ .pub-top{transition:none;} }

/* ============================================================
   v141 — Partners (Piekfijn Select). Eigen hoofdstuk met een breder,
   liggend kaartformaat: partnerfoto links, tekst rechts.
   ============================================================ */
.partner-blok{margin-top:80px;}
.partner-uitleg{
  font-size:0.9375rem; line-height:1.6; color:var(--tekst-zacht);
  max-width:640px; margin:-6px 0 22px;
}
.partnergrid{display:grid; grid-template-columns:1fr; gap:16px;}
.partnerkaart{
  display:grid; grid-template-columns:300px 1fr auto; align-items:center; gap:24px;
  width:100%; text-align:left; background:var(--wit); border:1px solid var(--lijn);
  border-radius:var(--r-xl); padding:16px 22px 16px 16px; cursor:pointer;
  transition:border-color .25s ease, transform .25s ease;
}
.partnerkaart:hover{border-color:var(--lijn-d,#D2D2D7); transform:translateY(-2px);}
.pk-foto{
  display:block; border-radius:var(--r-lg); overflow:hidden;
  aspect-ratio:16/9; background:var(--grijs,#F0F0F2);
}
.pk-foto img{width:100%; height:100%; object-fit:cover; display:block;}
.pk-tekst{display:flex; flex-direction:column; gap:6px; min-width:0;}
.pk-merk{
  font-size:0.6875rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  color:var(--tekst-licht);
}
.pk-titel{font-size:1.3125rem; font-weight:600; letter-spacing:-.02em; color:var(--tekst); line-height:1.2;}
.pk-intro{font-size:0.875rem; line-height:1.55; color:var(--tekst-zacht); max-width:560px;}
.pk-metas{display:flex; flex-wrap:wrap; gap:7px; margin-top:4px;}
.pk-metas span{
  font-size:0.75rem; color:var(--tekst-zacht); background:var(--grijs,#F0F0F2);
  border-radius:var(--r-pill); padding:4px 11px;
}
.pk-pijl{display:flex; align-items:center; justify-content:center; width:40px; height:40px; flex:0 0 40px;}
.pk-pijl svg{width:19px; height:19px;}
@media(max-width:860px){
  .partnerkaart{grid-template-columns:1fr; gap:14px; padding:14px;}
  .pk-pijl{display:none;}
  .pk-titel{font-size:1.1875rem;}
}

/* ============================================================
   v142 — Homepage-secties visueel scheiden.
   De drie jobs-blokken (flexteam, HQ, partners) worden witte squircle-
   kaders op de grijze pagina-achtergrond, zodat ze niet in elkaar overlopen.
   ============================================================ */
.flex-blok,
.hq-blok,
.partner-blok{
  background:var(--wit);
  border:1px solid var(--lijn);
  border-radius:var(--r-xl);
  padding:34px 34px 38px;
}
/* de kop zat op de sectie zelf; binnen een kader hoeft de bovenmarge eraf */
.flex-blok > .bento-kop,
.hq-blok > .bento-kop,
.partner-blok > .bento-kop{margin-top:0;}

/* onderlinge afstand tussen de kaders */
.hq-blok{margin:22px auto 0; max-width:none;}
.partner-blok{margin-top:22px;}
.partner-uitleg{margin:-6px 0 22px;}

/* het flexteam-blok heeft een vaste-hoogte carrousel; iets meer lucht eronder */
.flex-blok .flexsplit{margin-top:10px;}

@media (max-width:860px){
  .flex-blok,
  .hq-blok,
  .partner-blok{border-radius:var(--r-xl); padding:22px 18px 26px;}
  .hq-blok,
  .partner-blok{margin-top:16px;}
}

/* ============================================================
   v143 — Vacaturetekst: één leeskleur.
   Alinea's stonden op --tekst-zacht (#636369), opsommingen op --tekst
   (#1D1D1F). Daardoor oogden de bullets donkerder dan de tekst erboven.
   Alles nu gelijk: zelfde kleur, zelfde grootte, zelfde regelafstand.
   ============================================================ */
#screen-detail .det-blok p,
#screen-detail .det-blok li,
#screen-detail .det-blok .det-ul li,
.det-blok p,
.det-blok li,
.det-blok .det-ul li{
  color:var(--tekst-zacht);
  font-size:0.9375rem;
  line-height:1.8;
}
/* het vinkje/bolletje mag wel accent houden, de tekst ernaast niet */
.det-blok li > span:not(.ck){color:inherit;}
@media (max-width:760px){
  #screen-detail .det-blok p,
  #screen-detail .det-blok li,
  #screen-detail .det-blok .det-ul li{font-size:0.9375rem; line-height:1.85;}
}


/* ============================================================
   Voorbeeldmodus (?bekijk=…): vaste balk onderin zodat je altijd ziet dat je
   meekijkt als flexkracht, en direct naar een ander scherm kunt springen.
   ============================================================ */
.voorbeeld-balk{
  position:fixed; left:0; right:0; bottom:0; z-index:120;
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding:10px 16px calc(10px + env(safe-area-inset-bottom));
  background:#7342F4; color:#fff;
  border-top:1px solid rgba(255,255,255,.12);
  font-size:0.8125rem; letter-spacing:var(--ls-body);
}
.voorbeeld-balk .vb-tag{
  flex:0 0 auto; background:var(--geel,#C2FFAD); color:#16181a;
  border-radius:var(--r-sm); padding:4px 10px; font-size:0.6875rem; font-weight:700;
  letter-spacing:.05em; text-transform:uppercase;
}
.voorbeeld-balk .vb-tekst{flex:1 1 220px; color:rgba(255,255,255,.72);}
.voorbeeld-balk .vb-kies{
  flex:0 0 auto; min-height:44px; padding:8px 34px 8px 12px;
  background:rgba(255,255,255,.10) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.4'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center;
  color:#fff; border:1px solid rgba(255,255,255,.18); border-radius:var(--r-md);
  font-family:inherit; font-size:0.8125rem; -webkit-appearance:none; appearance:none; cursor:pointer;
}
.voorbeeld-balk .vb-kies:hover{background-color:rgba(255,255,255,.16);}
.voorbeeld-balk .vb-kies option{color:#1A1A1A;}
.voorbeeld-balk .vb-x{
  flex:0 0 auto; width:44px; height:44px; display:flex; align-items:center; justify-content:center;
  background:none; border:none; color:rgba(255,255,255,.6); font-size:1.375rem; line-height:1;
  cursor:pointer; border-radius:var(--r-md);
}
.voorbeeld-balk .vb-x:hover{background:rgba(255,255,255,.10); color:#fff;}
/* Ruimte onderin zodat de balk niets afdekt */
body.heeft-voorbeeldbalk{padding-bottom:78px;}
@media(max-width:600px){
  .voorbeeld-balk .vb-tekst{display:none;}
  body.heeft-voorbeeldbalk{padding-bottom:84px;}
}

/* Zijbalk-portal: kopjes "Nog te doen" / "Afgerond", vinkje bij wat af is,
   en stappen die nog niet aan de beurt zijn staan uit. */
#app-shell .zijbalk-nav .nav-kop{
  font-size:0.6875rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  color:var(--tekst-licht); padding:16px 13px 6px;
}
#app-shell .zijbalk-nav .nav-kop:first-child{padding-top:6px;}
#app-shell .nav-knop .nav-vink{width:15px; height:15px; margin-left:auto; flex:0 0 15px; color:var(--groen-diep,#1B7A3D);}
/* Afgeronde stappen stonden in grijs en lazen daardoor als uitgezet, terwijl je er wel
   op kunt klikken om terug te kijken. Alleen het vinkje markeert nu dat ze klaar zijn. */
#app-shell .nav-knop.af .nav-tekst{color:inherit;}
/* Nog niet aan de beurt. De knop blijft aanklikbaar: hij vertelt wat er eerst moet. */
#app-shell .nav-knop.nog-niet{opacity:.42;}
#app-shell .nav-knop.nog-niet:hover{background:none;}

/* Inlogknop: gedempt zolang e-mail of wachtwoord nog ontbreekt, vol zodra beide er staan.
   Bewust geen groen: de primaire knop is zwart, groen bestaat hier alleen als statusvlak. */
#inlog-btn.nog-leeg{opacity:.42;}
#inlog-btn{transition:opacity .18s ease, background .18s ease;}

/* CONTACT: twee wegen naast elkaar (30-7, verzoek Coco).
   "Contact" in de kop sprong naar de footer; dat las als een fout. Nu een eigen
   sectie met de splitsing die er in het echt ook is: flexkrachten mailen hello@,
   nieuwe opdrachtgevers vragen een voorbeeldofferte bij planning@piekfijn.nl. */
.contact-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:16px;
}
.contact-kaart{
  background:var(--vlak,#fff); border:1px solid var(--rand,#e6e6e9);
  border-radius:20px; padding:26px 26px 24px;
}
.contact-kaart--zakelijk{ background:var(--vlak-zacht,#f7f7f8); }
.contact-eyebrow{
  font-size:0.6875rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color:var(--tekst-zacht,#6a6e74); margin-bottom:10px;
}
.contact-kaart h3{
  font-size:1.25rem; font-weight:600; letter-spacing:-.02em; line-height:1.25; margin:0 0 8px;
}
.contact-kaart p{ color:var(--tekst-zacht,#6a6e74); margin:0 0 18px; max-width:44ch; }
.contact-acties{ display:flex; gap:9px; flex-wrap:wrap; }
.contact-acties .knop{ flex:0 0 auto; }
/* eigen contactpagina */
.ct-lead{ color:var(--tekst-zacht,#6a6e74); margin:6px 0 0; font-size:1rem; }
.ct-adres{ color:var(--tekst-licht,#707076); font-size:0.8125rem; margin:26px 0 60px; }
/* Knoppen in de kaarten zijn links, en die erfden de onderstreping plus de volle
   breedte van .knop--vol. Alle vier werden bovendien zwart, waardoor er geen
   verschil meer was tussen de hoofdactie en de bijrol. Met #public-shell ervoor,
   anders wint de algemene zwarte knopregel op id-niveau. */
.contact-acties a{ text-decoration:none !important; width:auto !important; }
#public-shell .contact-acties a.knop:not(.knop--vol){
  background:#fff !important; color:#1D1D1F !important; border:1px solid #D9D9DE !important;
}
#public-shell .contact-acties a.knop:not(.knop--vol):hover{ border-color:#16181a !important; }

/* "In behandeling" stond in wit op 52% doorzichtigheid, 10,5px, in hoofdletters met
   wijde letterafstand: dat haalde nog niet de helft van de leesbaarheidsnorm. Nu een
   dicht label met donkere tekst. Het vlak eronder is licht geworden, dus wit-op-wit
   verdween; vandaar de grijze vulling met een haarlijn. */
#app-shell .portal-hero.portal-hero-welkom .portal-hero-eyebrow,
#app-shell .portal-hero.portal-hero-klaar .portal-hero-eyebrow{
  display:inline-block; color:#1D1D1F; background:#F2F2F4; border:1px solid #E4E4E7;
  border-radius:var(--r-sm); padding:5px 12px; font-size:0.6875rem; font-weight:600;
  letter-spacing:.045em; margin-bottom:11px;
}

/* ==========================================================================
   DIEPTELAAG · het vouwtje (30-07-2026)
   Alles was vlak: één kleur per knop, één kleur per vlak, geen richting.
   Diepte komt hier NIET uit schaduwen maar uit drie dingen:
     1. een diagonale knik over gekleurde vlakken (het vouwtje),
     2. echte haarlijnen, zodat lichte knoppen niet in de pagina wegvallen,
     3. iets meer verschil tussen de pagina en de vlakken die erop liggen.
   Eén blok onderaan, zodat het in z'n geheel terug kan.
   ========================================================================== */
:root{
  /* De vouw. Twee tinten van dezelfde kleur met een harde diagonale grens.
     107 graden, knik op een derde: dat leest als licht dat over een vlak valt. */
  --vouw-zwart:       linear-gradient(118deg,#7E4EF6 0 38%,#6836E6 38.3% 100%);
  --vouw-zwart-hover: linear-gradient(118deg,#9268F9 0 38%,#7342F4 38.3% 100%);
  --vouw-lime:        linear-gradient(118deg,#DFF6D0 0 38%,#C2FFAD 38.3% 100%);
  --vouw-licht:       linear-gradient(118deg,#FFFFFF 0 38%,#F2F2F5 38.3% 100%);
  --vouw-wit:         linear-gradient(118deg,#FFFFFF 0 38%,#F9F9FB 38.3% 100%);
  /* Iets dieper grijs onder de vlakken, anders zweeft er niets. */
  --bg:linear-gradient(180deg,#F6F6F8 0%,#EDEDF1 100%);
}

/* --- 1. Donkere knoppen krijgen de vouw ---------------------------------- */
#public-shell .knop,
#public-shell .knop-cta,
#public-shell .flow-knoppen .knop-flow,
#public-shell .ha-cta .knop-cta.ha-primair,
#app-shell .pu-auth .pu-btn,
.knop--vol,
.app-store{
  background-image:var(--vouw-zwart) !important;
  border:1px solid #0E0F11 !important;
}
#public-shell .knop:hover,
#public-shell .knop-cta:hover,
#public-shell .ha-cta .knop-cta.ha-primair:hover,
.knop-geel:hover,.knop-hero:hover{
  background-image:var(--vouw-lime) !important;
  border-color:#B4EB24 !important;
}
#app-shell .pu-auth .pu-btn:hover,.app-store:hover{
  background-image:var(--vouw-zwart-hover) !important;
}
/* De pijltegel in de zwarte knop was even zwart als de knop zelf en verdween
   daardoor. Nu een tint lichter, zodat je ziet dat er iets op ligt. */
#public-shell .knop-cta .cta-arr,
#public-shell .flow-knoppen .knop-flow .cta-arr{
  background:rgba(255,255,255,.13) !important;
  border:1px solid rgba(255,255,255,.10) !important;
}
#public-shell .knop-cta:hover .cta-arr,
#public-shell .ha-cta .knop-cta.ha-primair:hover .cta-arr{
  background:rgba(0,0,0,.14) !important; border-color:rgba(0,0,0,.10) !important;
}

/* --- 2. Lichte knoppen krijgen een rand, anders vallen ze weg ------------- */
#public-shell .knop-stil, .knop-stil{
  background-image:var(--vouw-licht) !important;
  background-color:#F7F7F9 !important;
  border:1px solid #DBDBE1 !important;
  color:#33343A !important;
}
#public-shell .knop-stil:hover, .knop-stil:hover{
  background-image:var(--vouw-wit) !important;
  border-color:#AFAFB7 !important; color:#1D1D1F !important;
}
#public-shell .knop-licht,
#public-shell .ha-cta .knop-licht{
  background-image:var(--vouw-licht) !important;
  border:1px solid #DBDBE1 !important;
}
#public-shell .knop-licht:hover,
#public-shell .ha-cta .knop-licht:hover{
  background-image:var(--vouw-wit) !important; border-color:#AFAFB7 !important;
}
#public-shell .contact-acties a.knop:not(.knop--vol){
  background-image:var(--vouw-licht) !important; border-color:#DBDBE1 !important;
}

/* --- 3. Vlakken liggen op de pagina in plaats van erin -------------------- */
#public-shell .kaart-flow,
#public-shell .faq-card,
#public-shell .contact-kaart,
#app-shell .paneel{
  background-image:linear-gradient(180deg,#FFFFFF 0%,#FCFCFD 100%);
  border:1px solid #E2E2E7;
}
#public-shell .contact-kaart--zakelijk{
  background-image:linear-gradient(180deg,#F9F9FB 0%,#F4F4F7 100%);
}
/* De rauwe zwarte balk links in de aanmeldkaart hoorde nergens bij: hij liep
   niet mee met de ronding en las als een fout. Vervangen door een lime knik
   in de hoek, dezelfde taal als de rest. */
#public-shell .kaart-flow::before{
  top:auto !important; bottom:0 !important; left:auto !important; right:0 !important;
  width:78px !important; height:78px !important; border-radius:0 !important;
  background:linear-gradient(315deg,rgba(194,255,173,.45) 0 46%,transparent 46.3%) !important;
  pointer-events:none;
}

/* --- 4. De portal-hero: één vouw in plaats van een streepjespatroon ------- */
/* Alleen de actie-hero is donker. Dit zwart stond hier met !important op ALLE hero's,
   ook op de lichte mededelingen, en won van de tekstkleur die er later bij kwam:
   donkere tekst op een zwart vlak. Vandaar de :not(). */
#app-shell .portal-hero:not(.portal-hero-welkom):not(.portal-hero-klaar){ background:#1B1D21 !important; }
#app-shell .portal-hero:not(.portal-hero-welkom):not(.portal-hero-klaar)::before{
  opacity:1 !important;
  background:linear-gradient(107deg,rgba(255,255,255,.055) 0 34%,transparent 34.3% 100%) !important;
}
/* Dezelfde vouw, maar donker, zodat de lichte hero net zo goed richting heeft. */
#app-shell .portal-hero.portal-hero-welkom::before,
#app-shell .portal-hero.portal-hero-klaar::before{
  opacity:1 !important;
  background:linear-gradient(107deg,rgba(26,26,28,.035) 0 34%,transparent 34.3% 100%) !important;
}

/* --- 5. Centreren: de aanmeldkolom hing hard links ------------------------ */
.flow-wrap{ margin-left:auto !important; margin-right:auto !important; }
#screen-solliciteren .sectie{ max-width:520px; margin-left:auto; margin-right:auto; }
#screen-contact .bento-kop, #screen-contact .ct-adres{ max-width:1120px; margin-left:auto; margin-right:auto; }
#screen-contact .contact-grid{ max-width:1120px; margin-left:auto; margin-right:auto; }

/* --- 6. Portal: vlakken en knoppen die tegen de pagina wegvielen ---------- */
/* .tile en .rhint hadden exact de kleur van de pagina eronder en geen rand,
   dus je zag alleen tekst zweven. .cbtn was net zo licht. */
#app-shell .tile{
  background:#fff !important;
  background-image:linear-gradient(180deg,#FFFFFF 0%,#FBFBFC 100%) !important;
  border:1px solid #E4E4E9 !important;
}
#app-shell .card-list{
  background-image:linear-gradient(180deg,#FFFFFF 0%,#FBFBFC 100%) !important;
  border:1px solid #E4E4E9 !important;
}
#app-shell .cbtn{
  background-image:var(--vouw-licht) !important;
  background-color:#F7F7F9 !important;
  border:1px solid #DEDEE4 !important;
}
#app-shell .cbtn:hover{ border-color:#B3B3BB !important; background-image:var(--vouw-wit) !important; }
#app-shell .rhint{ background:#F1F1F4 !important; border:1px solid #E4E4E9 !important; }
#app-shell .knop-uitloggen{
  background-image:var(--vouw-licht) !important; border:1px solid #DEDEE4 !important;
}
#app-shell .knop-uitloggen:hover{ border-color:#B3B3BB !important; }
/* De witte knop in de donkere hero: vouw in wit, zodat hij niet als plat vlak leest. */
#app-shell .portal-hero-btn{ background-image:var(--vouw-wit) !important; }

/* --- 7. Homepage: vacaturekaarten kregen een rand, verhalen een vouw ------ */
/* De kaarten waren #F0F0F2 zonder rand op een pagina die onderaan #EDEDF1 is:
   praktisch dezelfde kleur, dus je zag een tekstblok zonder vorm. */
#public-shell .jobgrid > *,
#public-shell .flex-carr-track > *,
#public-shell .partnergrid > *{
  background-image:linear-gradient(180deg,#FFFFFF 0%,#F7F7F9 100%) !important;
  border:1px solid #E2E2E7 !important;
}
#public-shell .jobgrid > *:hover,
#public-shell .flex-carr-track > *:hover,
#public-shell .partnergrid > *:hover{ border-color:#C9C9D1 !important; }
/* Donkere verhaalkaarten krijgen dezelfde knik als de knoppen. */
#public-shell .verhalen-scroll > *{
  background-image:linear-gradient(118deg,rgba(255,255,255,.055) 0 38%,transparent 38.3% 100%) !important;
}

/* ==========================================================================
   REGELS (30-07-2026) · vastgelegd omdat het uit de hand liep
   Meting op vier portalschermen vond 15 lettergroottes, 6 gewichten,
   4 radii en knoppen van 44, 56, 59 en 60 pixels hoog. Vanaf hier geldt:

   LETTERGROOTTES, zes en niet meer:
     --t-xs 11px   kapitalenlabel (eyebrow)
     --t-sm 13px   meta, subregel, hulptekst
     --t-md 15px   broodtekst en knoppen (standaard)
     --t-lg 19px   kop binnen een kaart
     --t-xl 24px   schermkop
     --t-2xl 32px  hero
   GEWICHTEN, drie: 400 lopend · 500 knoppen en labels · 600 koppen.
     550, 650 en 700 zijn fout.
   RADII, vier: --r-sm 8 (tot 28px groot) · --r-md 12 (knoppen, tegels)
     --r-lg 16 (kaarten) · --r-xl 22 (grote panelen).
     999px alleen op iets dat breder is dan hoog EN geen knop is.
   KNOPHOOGTE, twee: 44px standaard, 52px voor de hoofdactie in een hero.
   KNOPVARIANTEN, vier: primair (charcoal + vouw) · accent (lime, alleen in
     de donkere videoflow) · secundair (wit + haarlijn) · stil (tekstknop).
   HOVER, één per variant. Geen kleuromslag van zwart naar lime meer: dat
     wisselde ook de tekstkleur en zag er halverwege uit als een storing.
   ========================================================================== */
:root{
  --t-xs:0.6875rem; --t-sm:0.8125rem; --t-md:0.9375rem; --t-lg:1.1875rem; --t-xl:1.5rem; --t-2xl:2rem;
  /* Vouw op knoppen is subtieler dan op panelen: op 44px hoog leest een harde
     knik als twee blokken in plaats van als licht. */
  --vouw-knop:linear-gradient(118deg,#7E4EF6 0 38%,#6836E6 38.3% 100%);
  --vouw-knop-hover:linear-gradient(118deg,#9268F9 0 38%,#7342F4 38.3% 100%);
}

/* --- alle knoppen: één grootte, één gewicht, één radius ------------------- */
#public-shell .knop, #public-shell .knop-cta, #public-shell .knop-licht,
#public-shell .knop-stil, #public-shell .knop-flow, #public-shell .knop-geel,
#app-shell .knop, #app-shell .knop-stil, #app-shell .knop-uitloggen,
#app-shell .pu-auth .pu-btn, #app-shell .portal-hero-btn,
/* De trainings- en videoknoppen stonden buiten dit systeem en hielden hun eigen
   pill-vorm, eigen zwart en eigen lettergrootte. Daardoor voelde het portaal als een
   andere site dan de careersite. Ze horen erbij (31-07, fase 3). */
#app-shell .trn-btn, #app-shell .trn-terug, dialog.pu-herinlog .pu-btn,
.knop--vol, .app-store, .cbtn, .hr-pdf{
  font-family:inherit !important;
  font-size:var(--t-md) !important;
  font-weight:500 !important;
  border-radius:var(--r-md) !important;
  min-height:44px !important;
  letter-spacing:-.005em !important;
}
/* Kleine tegelknoppen (alleen een pijl) blijven vierkant op 44. */
.cbtn, #app-shell .cbtn{ width:44px !important; height:44px !important; min-height:44px !important; }
.cbtn.sm, #app-shell .cbtn.sm{ width:36px !important; height:36px !important; min-height:36px !important; border-radius:var(--r-sm) !important; }
/* De hoofdactie in de portal-hero mag 52, verder niets. */
#app-shell .portal-hero-btn{ min-height:52px !important; font-weight:600 !important; }
/* Winkelknoppen waren 59 hoog met radius 16 en een eigen letterformaat. */
.app-store{ min-height:52px !important; }
.app-store small{ font-size:var(--t-xs) !important; font-weight:400 !important; }
.app-store span:not(.as-ic){ font-size:var(--t-md) !important; font-weight:600 !important; }

/* --- primair: één hover, geen omslag naar lime --------------------------- */
#public-shell .knop, #public-shell .knop-cta,
#public-shell .flow-knoppen .knop-flow,
#public-shell .ha-cta .knop-cta.ha-primair,
#app-shell .pu-auth .pu-btn, .knop--vol, .app-store{
  background-image:var(--vouw-knop) !important;
  background-color:#7342F4 !important;
  color:#fff !important;
  border:1px solid #0E0F11 !important;
}
#public-shell .knop:hover, #public-shell .knop-cta:hover,
#public-shell .ha-cta .knop-cta.ha-primair:hover,
#public-shell .flow-knoppen .knop-flow:hover,
#app-shell .pu-auth .pu-btn:hover, .knop--vol:hover, .app-store:hover{
  background-image:var(--vouw-knop-hover) !important;
  background-color:#7E4EF6 !important;
  color:#fff !important;
  border-color:#0E0F11 !important;
}
/* De pijltegel volgt de knop en wordt niet apart lime. */
/* Dit was de laatste regel over de pijl en zette hem bij hover op wit-doorzichtig.
   Daardoor was de limoen uit alle regels hierboven nooit te zien. */
#public-shell .knop-cta:hover .cta-arr,
#public-shell .ha-cta .knop-cta.ha-primair:hover .cta-arr{
  background:#C2FFAD !important; border-color:#C2FFAD !important; color:#1A1A1C !important;
}

/* --- accent (lime): alleen in de donkere videoflow ----------------------- */
#public-shell .knop-geel, .knop-hero{
  background-image:none !important; background-color:var(--geel) !important;
  color:#131315 !important; border:1px solid var(--geel) !important;
}
#public-shell .knop-geel:hover, .knop-hero:hover{
  background-color:#DFF6D0 !important; border-color:#DFF6D0 !important; color:#131315 !important;
}

/* --- typografie: de zes stappen op de vaste plekken ---------------------- */
#app-shell .t-screen-title, .t-screen-title{ font-size:var(--t-xl) !important; font-weight:600 !important; }
#app-shell .t-hint, .t-hint{ font-size:var(--t-sm) !important; font-weight:400 !important; }
#app-shell .tile .lbl{ font-size:var(--t-sm) !important; font-weight:400 !important; }
#app-shell .tile .val{ font-size:var(--t-lg) !important; font-weight:600 !important; }
#app-shell .tile .sub{ font-size:var(--t-sm) !important; font-weight:400 !important; }
#app-shell .portal-hero-titel{ font-size:var(--t-xl) !important; font-weight:600 !important; }
#app-shell .portal-hero-sub{ font-size:var(--t-md) !important; font-weight:400 !important; }
#app-shell .portal-hero-eyebrow{ font-size:var(--t-xs) !important; font-weight:600 !important; }
#app-shell .info-kop, .info-kop{ font-size:var(--t-xs) !important; font-weight:600 !important; letter-spacing:.06em; text-transform:uppercase; }
#app-shell .lrow .nm{ font-size:var(--t-md) !important; font-weight:500 !important; }
#app-shell .lrow .meta{ font-size:var(--t-sm) !important; font-weight:400 !important; }
#app-shell .rhint{ font-size:var(--t-sm) !important; font-weight:400 !important; border-radius:var(--r-sm) !important; }
#app-shell .hr-lijst li{ font-size:var(--t-md) !important; font-weight:400 !important; }
#app-shell .app-check-rij{ font-size:var(--t-md) !important; font-weight:400 !important; }
#app-shell .ac-doe{ font-size:var(--t-sm) !important; font-weight:500 !important; }
#app-shell .nav-kop{ font-size:var(--t-xs) !important; font-weight:600 !important; }
#app-shell .nav-knop{ font-size:var(--t-sm) !important; font-weight:400 !important; }

/* --- gewichten 550, 650 en 700 bestaan niet meer ------------------------- */
#app-shell [style*="font-weight:550"], #app-shell [style*="font-weight:650"]{ font-weight:600 !important; }

/* --- de laatste uitzonderingen teruggebracht ------------------------------
   Gevonden door de DOM af te lopen en elke maat en elk gewicht te vergelijken
   met de zes stappen en de drie gewichten hierboven. Dit waren ze alle negen. */
#app-shell .zijbalk-sub{ font-size:var(--t-xs) !important; }        /* was 10px   */
#app-shell .zijbalk-logo, #app-shell .zijbalk-logo .punt{ font-size:var(--t-lg) !important; } /* was 18px */
#app-shell .zijbalk-gebruiker{ font-size:var(--t-sm) !important; }  /* was 13,5px */
#app-shell .zijbalk-rol{ font-size:var(--t-xs) !important; }        /* was 12px   */
#app-shell .pu-ct-eyebrow{ font-size:var(--t-xs) !important; }      /* was 10,5px */
#app-shell .pu-ct-titel{ font-size:var(--t-2xl) !important; font-weight:600 !important; } /* was 34px */
#app-shell .pu-ct-sub{ font-size:var(--t-md) !important; }          /* was 12,5px */
#app-shell .pu-ct-wat li, #app-shell .pu-ct-wat p{ font-size:var(--t-md) !important; } /* was 14px */
#app-shell .pu-ct-btn{ font-size:var(--t-md) !important; font-weight:500 !important; border-radius:var(--r-md) !important; min-height:44px !important; }
/* Vet was 700 in de contract-uitleg. Zwaarder dan 600 bestaat niet. */
#app-shell strong, #app-shell b{ font-weight:600 !important; }

/* --- knophoogtes: 44 of 52, niets ertussen -------------------------------
   Gemeten stond er 44, 52, 56, 57 en 60 door elkaar. Hoogte komt uit de
   voering, dus die zetten we vast in plaats van alleen een minimum. */
#public-shell .knop, #public-shell .knop-licht, #public-shell .knop-stil,
#app-shell .knop, #app-shell .knop-uitloggen, .knop--vol, .hr-pdf{
  padding-top:10px !important; padding-bottom:10px !important;
  min-height:44px !important; height:auto !important;
}
#app-shell .portal-hero-btn{ padding:14px 22px !important; min-height:52px !important; }
.app-store{ padding:7px 16px !important; min-height:52px !important; }
#app-shell .pu-auth .pu-btn{ padding:12px 20px !important; min-height:48px !important; }

/* --- ronde drie: de laatste elf afwijkingen -------------------------------
   Weer de DOM afgelopen. Dit waren de enige elementen die nog buiten de zes
   maten en de drie gewichten vielen. */
#app-shell .pu-ct-lijst li, #app-shell .pu-ct-volgend-na{ font-size:var(--t-md) !important; }
#app-shell .pu-ct-volgend-kop{ font-size:var(--t-xs) !important; font-weight:600 !important; }
#app-shell .contract-akkoord{ font-size:var(--t-md) !important; }
#app-shell .tile .val small, #app-shell .tile small{ font-size:var(--t-sm) !important; font-weight:400 !important; }
#app-shell .ac-ok, #app-shell .ac-no{ font-size:var(--t-xs) !important; font-weight:600 !important; }
#app-shell .as-ic{ font-weight:600 !important; }

/* --- knophoogte: 44 zonder pijltegel, 52 mét -----------------------------
   De hoogte kwam niet uit de voering maar uit de pijltegel van 32px erin.
   Met 10px voering boven en onder komt dat precies op 52 uit. */
#app-shell .knop{ padding:10px 10px 10px 20px !important; min-height:52px !important; }
#app-shell .portal-hero-btn{ padding:10px 10px 10px 22px !important; min-height:52px !important; }
/* Akkoord-knop bleef op 58: .knop--vol zette de voering op 13px. */
#app-shell .knop.knop--vol, #app-shell .knop--vol{ padding:10px 10px 10px 20px !important; min-height:52px !important; }
/* De pijltegel in de knop was 38px in de huisregelkaart en 32px elders. Eén maat:
   32, zodat elke knop met tegel op precies 52 uitkomt. */
#app-shell .knop::after, #app-shell .knop.mini::after, #app-shell .knop--vol::after{
  width:32px !important; height:32px !important; flex:0 0 32px !important; background-size:14px 14px !important;
}
/* Het statuslabel in de portal-hero werd een balk over de volle breedte. Oorzaak:
   de hero-tekst is een flexkolom, en die maakt van display:inline-block gewoon
   block met stretch. Met align-self hugt hij weer om z'n eigen tekst. */
#app-shell .portal-hero-eyebrow{ align-self:flex-start !important; width:auto !important; }
/* Waarschuwing op het activatiescherm als de code-mail niet kon worden verstuurd.
   Zelfde taal als de testbanner in de mail: zacht oranje vlak, donkere tekst. */
.pu-mailfout{background:var(--k-oranje-zacht);border:1px solid var(--k-oranje-pastel);border-radius:var(--r-md);padding:13px 16px;font-size:var(--t-sm);color:#8A5200;line-height:1.55;margin:0 0 18px;text-align:left;}
.pu-mailfout a{color:var(--k-oranje);font-weight:600;}

/* ============================================================
   Printen (31-07). Zonder deze regels kwam er een scherm-indeling
   uit de printer: zijbalk, navigatie, video's, knoppen die niets
   doen op papier, en tekst in lichtgrijs dat nauwelijks leesbaar
   afdrukt. Een vacature of een overzicht van je stappen moet je
   gewoon kunnen meenemen of als pdf bewaren.
   Alleen zichtbare inhoud, zwart op wit, links met hun adres erbij.
   ============================================================ */
@media print{
  /* Alles wat op papier niets doet */
  .pub-top, .mobielmenu, .hamburger, .navpill, .zijbalk, .carr-nav, .carr-btn,
  .knop-cta, .knop-licht, .cbtn, .vid2-top, .vid2-actions, .pu-btn, .knop,
  .dchips, .flex-carr, .vintro-video, .vid-studio, .vid2-canvas video,
  video, .ha-vid, .pu-tabs, .toast, .pu-mailfout button,
  /* De sfeercollage bovenaan de homepage vulde op papier de halve eerste pagina
     met foto's en geen tekst. Op het scherm draagt hij, op papier niet. */
  .ha-media{
    display:none !important;
  }
  html, body{background:#fff !important; color:#000 !important;}
  body{-webkit-print-color-adjust:exact; print-color-adjust:exact;}
  /* De schermindeling los: geen kolommen, geen vaste hoogtes, geen scroll-vensters */
  #app-shell, .pub-main, .screen, .wrap, .pu-wrap, .vid2-canvas{
    display:block !important; max-width:none !important; width:auto !important;
    height:auto !important; overflow:visible !important; padding:0 !important; margin:0 !important;
  }
  .screen{display:none !important;}
  .screen.actief{display:block !important;}
  /* Vlakken worden randen: een grijs vlak vreet toner en leest slechter */
  .kaart, .jobkaart, .blok, .pu-kaart, .vid2-shell, .slot, .bento-sectie, .partner-blok{
    background:#fff !important; border:1px solid #999 !important; border-radius:0 !important;
    break-inside:avoid; page-break-inside:avoid;
  }
  h1, h2, h3{break-after:avoid; page-break-after:avoid; color:#000 !important;}
  p, li{orphans:3; widows:3;}
  .lead, .t-hint, .eyebrow, .eyebrow2, .stil, .pu-lead{color:#333 !important;}
  img{max-width:100% !important; break-inside:avoid;}
  /* Een link zonder adres is op papier een dood woord */
  .pub-main a[href^="http"]::after, .pub-main a[href^="mailto"]::after{
    content:" (" attr(href) ")"; font-size:.6875rem; color:#555; word-break:break-all;
  }
  a{color:#000 !important; text-decoration:underline;}
  @page{margin:16mm 14mm;}
}

/* ============================================================
   Toegankelijkheid (31-07). Kleine dingen die niets veranderen
   voor wie kijkt, maar het verschil maken voor wie luistert of
   alleen een toetsenbord heeft.
   ============================================================ */
/* Alleen voor schermlezers: uit beeld, maar wel voorgelezen. Niet display:none
   en niet visibility:hidden, want dan slaat een schermlezer het over. */
.pu-sr{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0;
}
/* Sla de navigatie over. Onzichtbaar tot hij focus krijgt, dan gewoon een knop. */
.pu-skip{
  position:fixed; left:12px; top:-100px; z-index:9999;
  display:inline-flex; align-items:center; min-height:44px; padding:0 18px;
  background:#6836E6; color:#fff; text-decoration:none; font-size:var(--t-md,0.9375rem);
  font-weight:500; border-radius:var(--r-md,12px);
}
/* Geen overgang: een skip-link moet er staan op het moment dat je hem nodig hebt,
   niet een tiende seconde later. */
.pu-skip:focus{ top:12px; }
/* Een focusring die overal zichtbaar is, ook op donkere vlakken. Alleen bij
   toetsenbordgebruik (:focus-visible), dus een muisklik geeft geen rand. */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, [tabindex]:focus-visible{
  outline:2px solid #16181a; outline-offset:2px; border-radius:2px;
}
.vid2-donker a:focus-visible, .vid2-donker button:focus-visible,
#video-flow .vid2-donker [tabindex]:focus-visible{ outline-color:#C2FFAD; }
/* De kop van een scherm krijgt focus bij een schermwissel; die mag geen rand krijgen,
   want de gebruiker heeft er niet zelf heen genavigeerd. */
h1[tabindex="-1"]:focus, h2[tabindex="-1"]:focus,
.t-screen-title[tabindex="-1"]:focus, .pu-eyebrow[tabindex="-1"]:focus{ outline:none; }
/* Wie beweging vermijdt, hoort geen smooth-scroll of animaties te krijgen. */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important;
  }
}

/* ---- Training: moduleoverzicht en de twee extra vraagtypes (31-07) ----
   De training bestaat uit acht modules met samen 68 vragen; die passen niet in
   één rij vragen achter elkaar. Vandaar een overzicht waar je een module kiest
   en waar je ziet wat je al gehad hebt. */
#app-shell .trn-modules{display:flex;flex-direction:column;gap:8px}
#app-shell .trn-mod{
  display:flex;align-items:center;gap:14px;width:100%;text-align:left;
  padding:14px 16px;background:#fff;border:1px solid var(--lijn);border-radius:var(--r-md);
  cursor:pointer;font-family:inherit;color:inherit;
}
#app-shell .trn-mod:hover{border-color:var(--lijn-donker)}
#app-shell .trn-mod-num{
  flex:0 0 30px;height:30px;display:inline-flex;align-items:center;justify-content:center;
  background:var(--grijs-1);border-radius:var(--r-sm);font-size:var(--t-sm);font-weight:600;color:var(--tekst-zacht);
}
#app-shell .trn-mod-num svg{width:16px;height:16px}
#app-shell .trn-mod.af .trn-mod-num{background:#1D1D1F;color:#fff}
#app-shell .trn-mod-tx{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
#app-shell .trn-mod-titel{font-size:var(--t-md);font-weight:500;color:#1D1D1F}
#app-shell .trn-mod-meta{font-size:var(--t-sm);color:var(--tekst-licht)}
#app-shell .trn-mod-actie{font-size:var(--t-sm);font-weight:500;color:var(--tekst-zacht);flex:none}
#app-shell .trn-terug{
  background:none;border:0;padding:0;min-height:44px;font-family:inherit;font-size:var(--t-sm);
  color:var(--tekst-zacht);text-decoration:underline;text-underline-offset:2px;cursor:pointer;
}
#app-shell .trn-terug:hover{color:#1D1D1F}
/* Meerkeuze met vinkjes: je mag er meer dan één aanzetten en bevestigt daarna zelf. */
#app-shell .trn-opt-vink.aan{border-color:#1D1D1F}
#app-shell .trn-opt-vink.aan .trn-opt-let{background:#1D1D1F;color:#fff}
#app-shell .trn-btn-stil{
  background:#fff;color:#1D1D1F;border:1px solid var(--lijn-donker);align-self:flex-start;
}
#app-shell .trn-btn-stil:hover{background:var(--grijs-1);color:#1D1D1F}

/* ---- Invoervelden op een telefoon (31-07) ----
   Safari op iOS zoomt automatisch in zodra je een veld aanraakt dat kleiner is dan
   16px. Het gegevensformulier stond op 15px, dus bij elk veld sprong het scherm
   naar voren en moest de kandidaat terugpinchen. Op smalle schermen daarom 16px.
   Dit is bewust de enige plek waar 16px staat: het is geen ontwerpmaat maar de
   drempel van de browser. De alternatieve oplossing (maximum-scale in de viewport)
   blokkeert pinch-zoom voor iedereen en valt daarmee af.
   !important is hier nodig omdat losse regels als "#app-shell .geg-rij select" een
   hogere specificiteit hebben dan deze; een media-query telt daarin niet mee. */
@media (max-width:768px){
  #app-shell input, #app-shell select, #app-shell textarea,
  #public-shell input, #public-shell select, #public-shell textarea,
  dialog.pu-herinlog input{ font-size:1rem !important; }
}
/* Video bij een trainingsvraag: zelfde kader als een foto. */
#app-shell .trn-foto.trn-video video{display:block;width:100%;max-height:360px;background:#000}


/* --- Fase 3: portaal en careersite dezelfde knoptaal --------------------- */
/* De trainingsknop was een pil met een eigen zwart; nu dezelfde vorm en hetzelfde
   vlak als de primaire knop op de careersite, inclusief dezelfde hover. */
#app-shell .trn-btn{
  border-radius:var(--r-md) !important;
  background-image:var(--vouw-knop) !important;
  background-color:#7342F4 !important;
  border:1px solid #0E0F11 !important;
  color:#fff !important;
  padding:0 22px !important;
  gap:9px !important;
}
#app-shell .trn-btn:hover{ background-color:#7E4EF6 !important; }
/* De stille variant volgt de secundaire knop: wit met een haarlijn. */
#app-shell .trn-btn-stil{
  background-image:none !important;
  background-color:#fff !important;
  color:#1D1D1F !important;
  border:1px solid var(--lijn-donker) !important;
}
#app-shell .trn-btn-stil:hover{ background-color:var(--grijs-1) !important; color:#1D1D1F !important; }
/* De pijl in de trainingsknop is hetzelfde motief als op de careersite. */
#app-shell .trn-btn .trn-btn-pijl{ font-size:var(--t-md); line-height:1; }


/* --- Piekfijn Select: eigen hoofdstuk met uitleg (31-07) ------------------- */
#public-shell .partner-uitleg{max-width:70ch;line-height:1.7;color:var(--tekst-zacht);margin:14px 0 0}
#public-shell .partner-subkop{font-size:var(--t-lg);font-weight:600;letter-spacing:-.02em;
  color:var(--tekst);margin:30px 0 14px}


/* --- Contactpagina: knoppen even hoog, telefoonnummer als link herkenbaar ---
   De twee knoppen rechts hadden een andere hoogte dan die links, doordat de een een
   e-mailadres bevat en de ander een langere zin. Vaste hoogte trekt ze gelijk. */
#public-shell .contact-acties{display:flex;flex-wrap:wrap;gap:10px;align-items:stretch}
#public-shell .contact-acties .knop{min-height:48px;display:inline-flex;align-items:center;justify-content:center}
#public-shell .contact-acties a[href^="tel:"]{text-decoration:underline;text-underline-offset:3px}


/* --- Eventfoto's over de volle breedte (31-07) ----------------------------
   De carrousel stond naast een tweede aanmeldkaart en pakte iets meer dan de helft.
   Nu de volle breedte, met bredere kaarten. */
/* De platen waren bijna vierkant tot liggend. Ze horen staand te zijn, in dezelfde
   verhouding als de vacaturekaarten (2:3). De breedte volgt nu uit de hoogte, dus er
   is maar een getal dat de vorm bepaalt. */
#public-shell .flex-carr--vol{height:clamp(340px,40vw,480px);margin-top:4px}
#public-shell .flex-carr--vol .flex-ev{flex:0 0 auto;width:auto;height:100%;aspect-ratio:2/3}
@media(max-width:900px){#public-shell .flex-carr--vol{height:clamp(300px,66vw,380px)}}
/* De foto's gingen half schuil achter een donkere waas die alleen voor het label nodig
   is. Die loopt nu pas onderin op, zodat de foto zelf helder blijft. */
/* Lichter en later beginnend: alleen de onderste strook waar het label staat hoeft
   donker te zijn, niet de halve foto. */
#public-shell .flex-ev .grad{background:linear-gradient(180deg,rgba(10,12,14,0) 56%,rgba(10,12,14,.42) 100%)}
#public-shell .jobcard .grad{background:linear-gradient(180deg,rgba(10,12,14,0) 54%,rgba(10,12,14,.45) 100%)}


/* --- Kantoorvacatures als leesbare rij in plaats van een fotogrid (31-07) --- */
#public-shell .jobgrid{display:flex;flex-direction:column;gap:10px}
/* De flex-rij hierboven is voor de kantoorvacatures op de homepage. De mini-grid
   onder een vacature (Andere vacatures) moet een grid blijven, anders rendert elke
   kaart op volle breedte met zijn 4/3-verhouding: een kaart van 900px hoog. Zat
   op beide merken; gemeten en gefixt 26-8. */
#public-shell .jobgrid.jobgrid--mini{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media(max-width:680px){#public-shell .jobgrid.jobgrid--mini{grid-template-columns:1fr 1fr;gap:10px}}
#public-shell .vacrij{display:flex;align-items:center;gap:20px;width:100%;text-align:left;
  padding:20px 22px;background:var(--wit);border:1px solid var(--lijn);border-radius:var(--r-lg);
  cursor:pointer;font-family:inherit;color:inherit;transition:border-color .18s}
#public-shell .vacrij:hover{border-color:var(--lijn-donker)}
#public-shell .vr-tekst{display:flex;flex-direction:column;gap:6px;min-width:0;flex:1}
#public-shell .vr-titel{font-size:var(--t-lg);font-weight:600;letter-spacing:-.02em;color:var(--tekst)}
#public-shell .vr-intro{font-size:var(--t-md);color:var(--tekst-zacht);line-height:1.55;max-width:70ch}
#public-shell .vr-metas{display:flex;flex-wrap:wrap;gap:6px;margin-top:2px}
#public-shell .vr-meta{font-size:var(--t-sm);color:var(--tekst-licht);background:var(--grijs-1);
  border-radius:var(--r-sm);padding:3px 9px}
#public-shell .vr-pijl{flex:none;width:44px;height:44px;border-radius:var(--r-md);background:var(--accent-tint);
  display:inline-flex;align-items:center;justify-content:center}
#public-shell .vr-pijl svg{width:17px;height:17px}
@media(max-width:640px){#public-shell .vacrij{padding:16px 16px;gap:12px}}


/* --- Portal-overzicht: rustiger, zonder statistiektegels (24-08) ----------------
   De portal is het werkscherm van een flexkracht, geen careersite. Vier tegels met
   dezelfde informatie als de kaart erboven zijn eruit. Wat overblijft: één zin met
   wat je nu moet doen, één voortgangsregel, één stappenlijst. */
#app-shell .pv-voortgang{display:flex;align-items:center;gap:14px;margin:18px 0 20px;}
#app-shell .pv-lbl{font-size:0.6875rem;color:var(--tx3);font-weight:400;flex:none;}
#app-shell .pv-spoor{flex:1;height:4px;border-radius:2px;background:var(--s1);overflow:hidden;min-width:60px;}
#app-shell .pv-vul{display:block;height:100%;background:var(--char);border-radius:2px;transition:width .35s ease;}
#app-shell .pv-tel{font-size:0.6875rem;color:var(--tx3);font-weight:400;flex:none;white-space:nowrap;}

/* Drie toestanden in de stappenlijst, zodat je in één blik ziet waar je staat. */
#app-shell .pv-mark{width:18px;height:18px;border-radius:var(--r-pill);flex:none;
  display:inline-flex;align-items:center;justify-content:center;
  border:1.5px solid var(--bd2);background:none;box-sizing:border-box;}
#app-shell .pv-mark.af{border-color:transparent;background:var(--s1);color:var(--char);}
#app-shell .pv-mark.af svg{width:11px;height:11px;}
#app-shell .pv-mark.nu{border-color:var(--char);background:var(--char);
  box-shadow:0 0 0 3px rgba(38,40,43,.10);}
#app-shell .lrow--toekomst .nm{color:var(--tx3);font-weight:400;}


/* Kika: het blok 'Wat er nu gebeurt' na het ondertekenen mocht groter (24-08). */
#contract-body .pu-ct-volgend--groot{padding:26px 28px;}
#contract-body .pu-ct-volgend--groot .pu-ct-volgend-kop{font-size:var(--t-lg);margin-bottom:12px;}
#contract-body .pu-ct-volgend--groot .pu-ct-lijst li{font-size:var(--t-md);line-height:1.6;margin-bottom:10px;}
#contract-body .pu-ct-volgend--groot .pu-ct-volgend-na{font-size:var(--t-md);margin-top:14px;}

/* Kika: het leesvenster van het contract was een klein hokje. */
#contract-body .pu-ct-lees-body.open{max-height:78vh;}
#contract-body .pu-ct-lees-scroll{max-height:72vh;}

/* Kika: de voortgang mocht groter (24-08). */
#app-shell .pv-voortgang{gap:16px;margin:20px 0 22px;}
#app-shell .pv-lbl{font-size:var(--t-sm);color:var(--tx2);font-weight:500;}
#app-shell .pv-tel{font-size:var(--t-sm);color:var(--tx2);font-weight:500;}
#app-shell .pv-spoor{height:6px;border-radius:3px;}
#app-shell .pv-vul{border-radius:3px;}


/* --- Antwoorden met een foto erboven (24-08) -------------------------------
   Een vraag als "welk overhemd mag wel" werkt alleen als je de overhemden ziet.
   Zodra één antwoord een foto heeft, gaat de hele vraag naar een rasterweergave
   met de foto boven en de tekst eronder. Zonder foto's blijft het een lijst. */
#app-shell .trn-opties--foto{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:12px;align-items:stretch}
#app-shell .trn-opties--foto .trn-opt{flex-direction:column;align-items:stretch;text-align:left;
  padding:0;overflow:hidden;gap:0}
#app-shell .trn-opt-foto{display:block;width:100%;aspect-ratio:3/4;background-size:cover;
  background-position:center top;background-color:var(--s1,#f4f4f6);border-bottom:1px solid var(--hair,#ececee)}
#app-shell .trn-opties--foto .trn-opt-let{position:absolute;left:10px;top:10px;z-index:2;
  background:rgba(255,255,255,.94);box-shadow:0 1px 4px rgba(0,0,0,.16)}
#app-shell .trn-opties--foto .trn-opt{position:relative}
#app-shell .trn-opties--foto .trn-opt-tx{padding:12px 14px 14px;line-height:1.45}
@media(max-width:520px){
  #app-shell .trn-opties--foto{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  #app-shell .trn-opt-foto{aspect-ratio:1/1}
}


/* --- Hulp en afmelden in het portaal (24-08) -------------------------------
   Een flexkracht die vastloopt zit hier, niet in zijn mailbox. Het blok staat
   onder de stappenlijst: het leidt niet af van wat je moet doen, maar het is er
   wel op het moment dat je het nodig hebt. */
#app-shell .pt-hulp{margin-top:22px;padding:20px 22px;background:var(--s0);
  border:1px solid var(--hair);border-radius:var(--r-lg);
  display:flex;flex-direction:column;gap:14px}
#app-shell .pt-hulp-tx h3{font-size:var(--t-md);font-weight:600;letter-spacing:-.01em;margin:0 0 3px;color:var(--tx)}
#app-shell .pt-hulp-tx p{font-size:var(--t-sm);color:var(--tx2);margin:0;line-height:1.5}
#app-shell .pt-hulp-akties{display:flex;gap:8px;flex-wrap:wrap}
#app-shell .pt-hulp-btn{display:inline-flex;align-items:center;gap:8px;text-decoration:none;
  background:var(--s2);border:1px solid var(--bd);border-radius:var(--r-md);
  padding:9px 15px;font-size:var(--t-sm);font-weight:500;color:var(--tx);transition:all .15s}
#app-shell .pt-hulp-btn svg{width:15px;height:15px;flex:none}
#app-shell .pt-hulp-btn:hover{border-color:var(--tx);background:var(--s2)}
#app-shell .pt-stop{font-size:var(--t-xs);color:var(--tx3);text-decoration:none;
  border-bottom:1px solid var(--bd2);align-self:flex-start;padding-bottom:1px}
#app-shell .pt-stop:hover{color:var(--tx2);border-color:var(--tx3)}
@media(max-width:520px){
  #app-shell .pt-hulp-akties{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  #app-shell .pt-hulp-btn{justify-content:center}
}

/* --- Thuisbasis in het portaal: wat van jou is (24-08) --------------------- */
#app-shell .pt-thuis{margin-top:22px;background:var(--wit,#fff);border:1px solid var(--hair);
  border-radius:var(--r-lg);overflow:hidden}
#app-shell .pt-thuis-kop{padding:16px 20px 13px;border-bottom:1px solid var(--hair)}
#app-shell .pt-thuis-kop h3{font-size:var(--t-md);font-weight:600;letter-spacing:-.01em;margin:0 0 2px;color:var(--tx)}
#app-shell .pt-thuis-kop span{font-size:var(--t-xs);color:var(--tx3)}
#app-shell .th-lijst{display:flex;flex-direction:column}
#app-shell .th-rij{display:flex;align-items:center;gap:14px;padding:13px 20px;
  border-bottom:.5px solid var(--hair)}
#app-shell .th-rij:last-child{border-bottom:none}
#app-shell .th-rij-tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
#app-shell .th-lab{font-size:var(--t-xs);color:var(--tx3)}
#app-shell .th-waarde{font-size:var(--t-sm);font-weight:500;color:var(--tx)}
#app-shell .th-btn{flex:none;background:var(--s1);border:1px solid transparent;border-radius:var(--r-md);
  padding:7px 13px;font-size:var(--t-xs);font-weight:500;color:var(--tx2);
  text-decoration:none;white-space:nowrap;transition:all .15s;cursor:pointer;font-family:inherit}
#app-shell .th-btn:hover{background:var(--s2);border-color:var(--bd2);color:var(--tx)}
#app-shell .th-voet{margin:0;padding:12px 20px 15px;font-size:var(--t-xs);color:var(--tx3);
  border-top:.5px solid var(--hair);background:var(--s1)}

/* Appen is het kanaal, dus die knop is gevuld en de rest is stil. */
#app-shell .pt-hulp-btn--vol{background:var(--ink,#7342F4);border-color:var(--ink,#26282B);color:#fff}
#app-shell .pt-hulp-btn--vol:hover{background:var(--lime,#C2FFAD);border-color:var(--lime,#C2FFAD);color:#1A1A1A}

/* Wat een kandidaat moet weten voordat hij begint met opnemen (25-08).
   Dit is een selectiemoment en het is verplicht; dat hoorde hij pas halverwege te
   ontdekken. De middelste regel is er omdat hervatten al werkte maar niemand dat wist. */
#app-shell .vid2-weten{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column;gap:7px}
#app-shell .vid2-weten li{position:relative;padding-left:22px;font-size:var(--t-sm);
  color:var(--tekst-zacht,#4E4E53);line-height:1.5}
#app-shell .vid2-weten li::before{content:"";position:absolute;left:2px;top:7px;width:5px;height:9px;
  border:solid var(--tekst,#1A1A1C);border-width:0 1.8px 1.8px 0;transform:rotate(42deg)}

/* Raakvlakken in het portaal (25-08). Nagemeten: de afmeldlink was 19px hoog en de
   huisregels-link 15px. Ze blijven er hetzelfde uitzien, er komt alleen een groter
   onzichtbaar klikvlak omheen. */
#app-shell .pt-stop{position:relative;display:inline-block;padding:6px 0}
#app-shell .pt-stop::after{content:"";position:absolute;left:0;right:0;top:50%;
  transform:translateY(-50%);height:44px}
#app-shell .pu-ct-akkoord a{position:relative;display:inline-block;padding:4px 0}
#app-shell .pu-ct-akkoord a::after{content:"";position:absolute;left:-4px;right:-4px;
  top:50%;transform:translateY(-50%);height:38px}

/* Terugknop op elk portalscherm (25-08). Nagemeten: huisregels, gegevens en contract
   hadden geen enkele weg terug in het scherm zelf; alleen de zijbalk, en die is op een
   telefoon een balk bovenin die je makkelijk mist. */
#app-shell .pt-terug{display:inline-flex;align-items:center;gap:7px;background:none;border:0;
  padding:8px 10px 8px 0;margin-bottom:2px;font:inherit;font-size:var(--t-sm);color:var(--tx3);
  cursor:pointer;transition:color .14s}
#app-shell .pt-terug svg{width:15px;height:15px}
#app-shell .pt-terug:hover{color:var(--tx)}

/* Leesweergave van je gegevens, voor wie al getekend heeft. */
#app-shell .gg-kaart{padding:0;overflow:hidden}
#app-shell .gg-kop{padding:20px 22px 14px;border-bottom:1px solid var(--hair)}
#app-shell .gg-kop h2{font-size:var(--t-lg);font-weight:600;letter-spacing:-.015em;margin:0 0 3px}
#app-shell .gg-kop p{margin:0;font-size:var(--t-sm);color:var(--tx2)}
#app-shell .gg-lijst{display:flex;flex-direction:column}
#app-shell .gg-rij{display:flex;gap:16px;padding:12px 22px;border-bottom:.5px solid var(--hair)}
#app-shell .gg-rij:last-child{border-bottom:none}
#app-shell .gg-lab{flex:0 0 180px;font-size:var(--t-sm);color:var(--tx3)}
#app-shell .gg-w{flex:1;font-size:var(--t-sm);font-weight:500;color:var(--tx)}
#app-shell .gg-w i{font-style:normal;color:var(--tx3);font-weight:400}
#app-shell .gg-akties{display:flex;gap:10px;flex-wrap:wrap;padding:16px 22px 20px;
  border-top:1px solid var(--hair);background:var(--s1)}
@media(max-width:560px){#app-shell .gg-rij{flex-direction:column;gap:2px}
  #app-shell .gg-lab{flex:none}}

/* Weg terug naar de vacatures vanuit de portal (25-08). Stil, want het is een
   uitweg en geen hoofdactie. */
#app-shell .knop-naarsite{background:none;border:0;padding:8px 12px;font:inherit;
  font-size:var(--t-sm);color:var(--tx3);cursor:pointer;border-radius:var(--r-md);
  text-align:left;transition:color .14s,background .14s}
#app-shell .knop-naarsite:hover{color:var(--tx);background:var(--s1)}
@media(max-width:860px){#app-shell .knop-naarsite{display:none}}

/* --- Kika's punten, 25-08 ------------------------------------------------- */
/* Tussenkopje binnen een vacaturetekst, zoals "Over Veloretti". */
#public-shell .det-sub{font-size:var(--t-md);font-weight:600;letter-spacing:-.015em;
  color:var(--tekst);margin:22px 0 8px}
#public-shell .det-sub:first-child{margin-top:0}

/* Telefoonnummer op de contactpagina onderstreept, zodat je ziet dat je erop kunt bellen. */
/* .contact-acties a heeft een !important op text-decoration:none, dus die moet hier
   overruled worden. Anders blijft het nummer er als gewone knop uitzien. */
#public-shell .contact-acties a.knop--tel,
#public-shell .knop--tel{text-decoration:underline !important;text-underline-offset:3px;
  text-decoration-thickness:1px;text-decoration-color:var(--lijn-donker,#CFCFD3)}
#public-shell .knop--tel:hover{text-decoration-color:currentColor}

/* Tweede ingang om je aan te melden, onderaan de vacatures. */
#public-shell .events-cta{margin-top:96px;background:var(--wit);border:1px solid var(--lijn);
  border-radius:var(--r-xl);padding:34px 38px;display:flex;align-items:center;gap:28px;flex-wrap:wrap}
#public-shell .events-cta-tx{flex:1;min-width:240px}
#public-shell .events-cta h2{font-size:var(--t-xl);letter-spacing:-.025em;margin:0 0 6px}
#public-shell .events-cta p{margin:0;color:var(--tekst-zacht);font-size:var(--t-md);
  line-height:1.55;max-width:52ch}
@media(max-width:640px){#public-shell .events-cta{padding:26px 22px;gap:20px}
  #public-shell .events-cta .knop-cta{width:100%;justify-content:center}}

/* Kop van de veelgestelde vragen gecentreerd boven de kaart. */
#public-shell .bento-kop--midden{justify-content:center;text-align:center}
#public-shell .bento-kop--midden>div{text-align:center}

/* Kantoorteam: naam en functie zaten tegen elkaar aan. */
#public-shell .facelabel{padding:11px 12px 11px 15px}
#public-shell .facelabel .fn{line-height:1.25}
#public-shell .facelabel .ff{margin-top:5px;line-height:1.3}

/* Verhaal: lucht tussen een kopje en de tekst eronder. */
#public-shell .vh-body h2,#public-shell .vh-body h3{margin:38px 0 14px;letter-spacing:-.02em}
#public-shell .vh-body h2:first-child,#public-shell .vh-body h3:first-child{margin-top:0}
#public-shell .vh-body p{margin-bottom:22px}
/* Voorkomt dat er één woord alleen op de laatste regel achterblijft. */
#public-shell .vh-body p,#public-shell .faq p{text-wrap:pretty}

/* Woorden mogen nooit middenin afbreken (25-08).
   Kika zag "PVH per / soneelsfeest" op een verhaalkaart. Dat gebeurt zodra een
   smalle kolom een lang woord tegenkomt en de browser hem opdeelt. Nederlands
   heeft veel lange samenstellingen, dus dit geldt overal waar titels staan. */
#public-shell .bloglabel .t,
#public-shell .vh-hero-ov h1,
#public-shell .bento-card .label,
#public-shell .vr-titel,
#public-shell .facelabel .fn,
#public-shell .facelabel .ff,
#public-shell .jobcard .t{
  word-break:normal; overflow-wrap:normal; hyphens:none; text-wrap:balance;
}
/* Past een lang woord echt niet, dan mag hij kleiner in plaats van gebroken. */
#public-shell .bloglabel .t{font-size:clamp(0.8125rem,1.1vw,0.9375rem)}

/* Losse woorden aan het eind van een alinea voorkomen. */
#public-shell .vh-body p,#public-shell .faq-a p,#public-shell .det-blok p{text-wrap:pretty}

/* Kika: vooruitlezen mag, akkoord gaan nog niet. */
#app-shell .hr-nognie{margin-top:18px;padding:13px 16px;border-radius:var(--r-md);
  background:var(--s1);border:1px solid var(--hair);font-size:var(--t-sm);
  color:var(--tx2);line-height:1.5}
/* Wachtwoord wijzigen en afmelden onder het hulpblok. */
#app-shell .pt-hulp-voet{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
#app-shell .pt-stil{background:none;border:0;padding:6px 0;font:inherit;
  font-size:var(--t-xs);color:var(--tx3);cursor:pointer;
  border-bottom:1px solid var(--bd2);transition:color .14s}
#app-shell .pt-stil:hover{color:var(--tx2);border-color:var(--tx3)}

/* Uitgang op het videostartscherm. Rustig, want starten is de hoofdactie.
   LET OP: deze regel stond eerder middenin de selectorlijst hierboven en knipte die
   doormidden. Daardoor kreeg elke knop op de careersite display:block en width:100%,
   en vielen het label en de pijl onder elkaar. Losse regel, en dat blijft zo. */
#video-flow .vid2-terug{display:block;width:100%;margin:14px 0 0;padding:12px 8px;min-height:44px;
  font:inherit;font-size:0.875rem;font-weight:500;color:var(--tekst-zacht,#6a6e74);
  background:none;border:0;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
#video-flow .vid2-terug:hover{color:var(--tekst,#16181a)}

/* Knop onder de eventfoto's: de rij nodigt uit, maar er stond niets om op te klikken. */
#public-shell .flex-blok .flex-cta{display:flex;justify-content:center;margin-top:22px}
#public-shell .flex-blok .flex-cta .knop-cta{width:auto;min-width:min(320px,100%);margin-top:0}