/* ==========================================================================
   Wojmar – huisstijl
   Kleuren: Carmine #c40043 · Pacific Blue #00a3b5 · Soft Blush #ffe8e1 · Prussian Blue #081c2f
   Letters: Montserrat (koppen) · Figtree (tekst) – zelf gehost, geen Google-verbinding
   ========================================================================== */

@font-face { font-family: 'Montserrat'; font-weight: 700; font-display: swap; src: url(../fonts/montserrat-latin-700-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2122, U+2212; }
@font-face { font-family: 'Montserrat'; font-weight: 800; font-display: swap; src: url(../fonts/montserrat-latin-800-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2122, U+2212; }
@font-face { font-family: 'Montserrat'; font-weight: 700; font-display: swap; src: url(../fonts/montserrat-latin-ext-700-normal.woff2) format('woff2'); unicode-range: U+0100-02FF, U+1E00-1EFF; }
@font-face { font-family: 'Montserrat'; font-weight: 800; font-display: swap; src: url(../fonts/montserrat-latin-ext-800-normal.woff2) format('woff2'); unicode-range: U+0100-02FF, U+1E00-1EFF; }
@font-face { font-family: 'Figtree'; font-weight: 400; font-display: swap; src: url(../fonts/figtree-latin-400-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2122, U+2212; }
@font-face { font-family: 'Figtree'; font-weight: 500; font-display: swap; src: url(../fonts/figtree-latin-500-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2122, U+2212; }
@font-face { font-family: 'Figtree'; font-weight: 600; font-display: swap; src: url(../fonts/figtree-latin-600-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2122, U+2212; }
@font-face { font-family: 'Figtree'; font-weight: 400; font-display: swap; src: url(../fonts/figtree-latin-ext-400-normal.woff2) format('woff2'); unicode-range: U+0100-02FF, U+1E00-1EFF; }
@font-face { font-family: 'Figtree'; font-weight: 500; font-display: swap; src: url(../fonts/figtree-latin-ext-500-normal.woff2) format('woff2'); unicode-range: U+0100-02FF, U+1E00-1EFF; }
@font-face { font-family: 'Figtree'; font-weight: 600; font-display: swap; src: url(../fonts/figtree-latin-ext-600-normal.woff2) format('woff2'); unicode-range: U+0100-02FF, U+1E00-1EFF; }

:root {
  --carmine: #c40043;
  --carmine-dark: #8f0031;
  --pacific: #00a3b5;
  --blush: #ffe8e1;
  --blush-line: #f0d6ce;
  --navy: #081c2f;
  --navy-2: #0f2c47;
  --navy-line: #1d3a55;
  --pink: #ff4f86;
  --ink-2: #3a4a5a;
  --ink-3: #22384d;
  --muted: #9fb3c6;
  --white: #ffffff;
  --glass: #e6f6f8;

  --font-head: 'Montserrat', 'Arial Black', sans-serif;
  --font-body: 'Figtree', 'Helvetica Neue', Arial, sans-serif;

  --wrap: 1280px;
  --gutter: clamp(20px, 5.5vw, 80px);
  --section: clamp(48px, 7vw, 96px);
  --radius: 16px;
  --radius-sm: 8px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; font-family: var(--font-body); font-size: 17px; line-height: 1.55; color: var(--navy); background: var(--white); }
img, svg { display: block; max-width: 100%; }
a { color: var(--carmine); }
a:hover { color: var(--carmine-dark); }
h1, h2, h3, .h3 { font-family: var(--font-head); font-weight: 800; margin: 0; line-height: 1.08; }
h1 { font-size: clamp(36px, 5vw, 64px); line-height: 1.04; }
h2 { font-size: clamp(28px, 3.4vw, 48px); }
h3, .h3 { font-size: clamp(20px, 1.8vw, 24px); }
.h4 { font-size: 18px; line-height: 1.25; }   /* kleine kop (ontwerpblad, vensters) */
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
address { font-style: normal; }
:focus-visible { outline: 3px solid var(--pacific); outline-offset: 2px; }
[hidden] { display: none !important; }

.wrap { max-width: calc(var(--wrap) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }
.skip { position: absolute; left: -9999px; top: 8px; z-index: 100; background: var(--navy); color: var(--white); padding: 10px 16px; border-radius: var(--radius-sm); }
.skip:focus { left: 8px; }

/* ---------- Logo ---------- */
.logo { display: inline-flex; align-items: center; gap: 2px; font-family: var(--font-head); font-weight: 800; font-size: 32px; line-height: 1; color: var(--navy); letter-spacing: .01em; }
.logo .mark { width: .75em; height: .75em; }
.logo-light { color: var(--white); font-size: 30px; }

/* ---------- Knoppen ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 54px; padding: 0 28px; border-radius: var(--radius-sm); border: 2px solid transparent; font: 600 17px/1 var(--font-body); text-decoration: none; cursor: pointer; transition: background .15s, color .15s, border-color .15s; }
.btn-primary { background: var(--carmine); color: var(--white); }
.btn-primary:hover { background: var(--carmine-dark); color: var(--white); }
.btn-outline { border-color: var(--navy); color: var(--navy); background: transparent; }
.btn-outline:hover { background: var(--navy); color: var(--white); }
.btn-outline-light { border-color: var(--blush); color: var(--blush); }
.btn-outline-light:hover { background: var(--blush); color: var(--navy); }
.btn-white { background: var(--white); color: var(--carmine); }
.btn-white:hover { background: var(--blush); color: var(--carmine-dark); }
.btn-ghost { background: transparent; color: var(--navy); padding: 0 12px; }
.btn-sm { min-height: 44px; padding: 0 14px; font-size: 14px; }
.btn-block { width: 100%; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px 16px; }
.btn-row-center { justify-content: center; }
.link-arrow { font-weight: 600; font-size: 16px; }
.link-light { color: var(--blush); font-weight: 600; }
.link-light:hover { color: var(--white); }

/* ---------- Header ---------- */
.site-header { position: sticky; top: 0; z-index: 50; background: var(--white); border-bottom: 1px solid var(--blush-line); }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 96px; }
.brand { text-decoration: none; flex-shrink: 0; }
.main-nav { display: flex; align-items: center; gap: 28px; }
.main-nav ul { display: flex; gap: 26px; }
.main-nav ul a { color: var(--navy); text-decoration: none; font-weight: 500; padding: 6px 0; border-bottom: 2px solid transparent; }
.main-nav ul a:hover, .main-nav ul a[aria-current="page"] { color: var(--carmine); border-bottom-color: var(--carmine); }
.nav-cta { min-height: 48px; padding: 0 22px; }
.header-mobile { display: none; align-items: center; gap: 8px; }
.menu-toggle { width: 44px; height: 44px; display: grid; place-items: center; border: 0; background: transparent; color: var(--navy); cursor: pointer; }
.menu-toggle path { transition: transform .2s, opacity .2s; transform-origin: center; }
.menu-toggle[aria-expanded="true"] .l1 { transform: translateY(5px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .l2 { opacity: 0; }
.menu-toggle[aria-expanded="true"] .l3 { transform: translateY(-5px) rotate(-45deg); }

/* ---------- Secties ---------- */
.section { padding: var(--section) 0; }
.section-tight { padding-top: 0; }
.section-dark { background: var(--navy); color: var(--blush); }
.section-dark h1, .section-dark h2 { color: var(--white); }
.section-blush { background: var(--blush); }
.section > .wrap > h2, .section-head { margin-bottom: 36px; }
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.eyebrow { font-size: 15px; font-weight: 600; letter-spacing: 3px; text-transform: uppercase; color: var(--carmine); margin-bottom: 14px; }
.eyebrow-pink { color: var(--pink); }
.eyebrow-line { display: flex; align-items: center; gap: 12px; color: var(--blush); }
.eyebrow-line::before { content: ''; width: 32px; height: 3px; background: var(--carmine); }
.lead { font-size: clamp(17px, 1.5vw, 20px); line-height: 1.55; max-width: 760px; margin-top: 18px; }
.lead-dark { font-size: clamp(17px, 1.4vw, 19px); line-height: 1.6; color: var(--ink-3); }
.muted { color: #c9d4de; font-size: 14px; }
.muted-dark { color: var(--ink-2); font-size: 16px; margin-top: 24px; }
.h1-dark { color: var(--navy); }

.page-hero { padding: var(--section) 0; }

.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }

.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 72px); align-items: center; }
.split-text { display: flex; flex-direction: column; gap: 18px; }
.split-text .eyebrow { margin-bottom: 0; }
.split-mark { grid-template-columns: auto 1fr; }

/* ---------- Plaatshouders (foto's volgen) ---------- */
.ph { border-radius: var(--radius); display: flex; align-items: flex-end; padding: 20px; font-size: 14px; min-height: 180px; }
.ph-dark { background: var(--navy); color: var(--blush); }
.ph-navy { background: var(--navy-2); color: var(--muted); }
.ph-red { background: var(--carmine); color: var(--white); }
.ph-white { background: var(--white); color: var(--navy); }
.ph-blush { background: var(--blush); color: var(--ink-2); }
.ph-glass { background: var(--glass); color: var(--ink-2); border-radius: 0; align-items: center; justify-content: center; }
.ph-lg { min-height: clamp(260px, 36vw, 520px); }
.ph-md { min-height: clamp(240px, 28vw, 400px); }
.ph-person { min-height: clamp(280px, 26vw, 380px); }
.section-dark .ph-dark { background: var(--navy-2); color: var(--muted); }

/* ---------- Hero ---------- */
.hero { padding: clamp(48px, 6vw, 80px) 0; }
.hero-inner { display: grid; grid-template-columns: minmax(0, 560px) 1fr; gap: clamp(32px, 5vw, 64px); align-items: center; }
.hero-text { display: flex; flex-direction: column; gap: 24px; }
.hero-text .eyebrow { margin: 0; }
.hero-text h1 { font-size: clamp(38px, 5vw, 68px); line-height: 1.02; }
.hero-text .lead { margin: 0; }

.video-box { position: relative; min-height: clamp(220px, 38vw, 540px); border-radius: var(--radius); background: var(--navy-2); display: grid; place-items: center; overflow: hidden; }
.video-feature { margin-top: 32px; min-height: clamp(220px, 44vw, 620px); }
.video-label { position: absolute; left: 24px; top: 20px; display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 600; color: var(--blush); }
.video-label .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--carmine); }
.ph-note { position: absolute; right: 24px; bottom: 20px; font-size: 14px; color: var(--muted); }
.ph-note-top { top: 20px; left: 24px; right: auto; bottom: auto; }
.play { width: 96px; height: 96px; border-radius: 50%; border: 0; background: var(--white); display: grid; place-items: center; cursor: pointer; transition: transform .15s; }
.play:hover { transform: scale(1.06); }
.play-sm { width: 56px; height: 56px; }

/* ---------- Kaarten ---------- */
.card { display: flex; flex-direction: column; border: 1px solid var(--blush-line); border-radius: var(--radius); overflow: hidden; background: var(--white); color: var(--navy); }
.card-link { text-decoration: none; transition: box-shadow .2s, transform .2s; }
.card-link:hover { color: var(--navy); box-shadow: 0 12px 32px rgba(8, 28, 47, .12); transform: translateY(-2px); }
.card-media { position: relative; height: clamp(180px, 22vw, 300px); background: var(--blush); display: grid; place-items: center; color: var(--navy); }
.card-media .icon { stroke-width: 1.5; }
.card-media-sm { height: clamp(180px, 17vw, 240px); }
.badge { position: absolute; left: 16px; top: 16px; background: var(--white); padding: 6px 12px; font-size: 13px; font-weight: 600; }
.card-body { padding: 26px; display: flex; flex-direction: column; gap: 10px; flex-grow: 1; }
.card-body p { color: var(--ink-2); font-size: 16px; }
.card-body .link-arrow { margin-top: auto; padding-top: 6px; }
.card-dark { background: var(--navy); color: var(--blush); border: 0; padding: 30px; justify-content: space-between; gap: 20px; }
.card-dark h2 { color: var(--white); }

/* ---------- Home: USP's + fotogrid ---------- */
.usps { display: flex; flex-direction: column; gap: 16px; }
.usps li { display: flex; gap: 16px; align-items: flex-start; }
.usps strong { display: block; font-size: 18px; }
.usps div span { color: var(--ink-3); font-size: 16px; }
.usp-check { width: 36px; height: 36px; flex-shrink: 0; border-radius: 50%; background: var(--navy); color: var(--blush); display: grid; place-items: center; }
.photo-grid { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 20px; height: clamp(360px, 40vw, 560px); }
.photo-grid .tall { grid-row: span 2; }
.photo-grid .ph { min-height: 0; }

/* ---------- Aanvraagformulier ---------- */
.request { display: grid; grid-template-columns: minmax(0, 440px) 1fr; gap: clamp(32px, 5vw, 72px); align-items: start; }
.request-intro { display: flex; flex-direction: column; gap: 22px; }
.request-intro .eyebrow { margin: 0; }
.note-box { margin-top: 8px; padding: 28px; border-radius: var(--radius); background: var(--blush); display: flex; flex-direction: column; gap: 10px; }
.note-box p { color: var(--ink-3); font-size: 16px; }
.form-card { border: 1px solid var(--blush-line); border-radius: 20px; padding: clamp(22px, 3.4vw, 48px); background: var(--white); }
.form-title { margin-bottom: 20px; }
.request-form { display: flex; flex-direction: column; gap: 28px; }
.request-form fieldset { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.request-form legend { font-family: var(--font-head); font-weight: 800; font-size: clamp(22px, 2.2vw, 30px); line-height: 1.15; padding: 0; margin-bottom: 18px; }
.hint { color: var(--ink-2); font-size: 16px; margin-top: -8px; }
.choice-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.choice { position: relative; cursor: pointer; }
.choice input { position: absolute; opacity: 0; inset: 0; }
.choice span { display: flex; align-items: center; min-height: 76px; padding: 0 22px; border: 2px solid var(--blush-line); border-radius: 12px; font-weight: 600; font-size: 18px; transition: border-color .15s, background .15s; }
.choice input:checked + span { border-color: var(--carmine); background: var(--blush); }
.choice input:focus-visible + span { outline: 3px solid var(--pacific); outline-offset: 2px; }
.field { display: flex; flex-direction: column; gap: 8px; font-size: 15px; font-weight: 600; }
.field input, .field textarea, .field select { font: 400 17px var(--font-body); color: var(--navy); border: 1px solid #c9b3ad; border-radius: var(--radius-sm); padding: 0 16px; min-height: 52px; background: var(--white); width: 100%; }
.field textarea { padding: 14px 16px; resize: vertical; }
.field input[type="file"] { padding: 12px 16px; }
.field input:disabled { background: #f6f1ef; color: var(--ink-2); }
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--navy); outline: 2px solid var(--pacific); outline-offset: 0; }
[aria-invalid="true"] { border-color: var(--carmine) !important; }
.field-error { color: var(--carmine); font-weight: 500; font-size: 14px; }
.check { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; color: var(--ink-2); }
.check input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--carmine); flex-shrink: 0; }
.form-alert { background: var(--blush); border-left: 0; border-radius: var(--radius-sm); padding: 14px 18px; font-weight: 600; color: var(--carmine-dark); }
.form-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.form-note { color: var(--ink-2); font-size: 15px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.steps { display: none; gap: 12px; }
.js .steps { display: flex; }
.steps li { flex: 1; display: flex; flex-direction: column; gap: 10px; font-size: 15px; font-weight: 600; color: #6b7a88; }
.steps .bar { height: 6px; border-radius: 3px; background: var(--blush-line); }
.steps li.is-active, .steps li.is-done { color: var(--navy); }
.steps li.is-active .bar, .steps li.is-done .bar { background: var(--carmine); }
/* Zonder JavaScript staan alle stappen onder elkaar; met JS één tegelijk */
.js .request-form.is-steps .step { display: none; }
.js .request-form.is-steps .step.is-current { display: flex; }

/* ---------- CTA-balk ---------- */
.cta { background: var(--carmine); color: var(--white); padding: clamp(48px, 5vw, 72px) 0; }
.cta-inner { display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.cta-text { display: flex; align-items: center; gap: 28px; }
.cta h2 { font-size: clamp(26px, 2.9vw, 42px); color: var(--white); }
.cta p { color: var(--blush); font-size: clamp(16px, 1.3vw, 19px); margin-top: 8px; }
.cta .btn { flex-shrink: 0; }

/* ---------- Productpagina ---------- */
.breadcrumb { font-size: 14px; color: var(--ink-2); }
.breadcrumb a { color: var(--ink-2); }
.pro { background: var(--white); padding: 28px; border-radius: 14px; display: flex; flex-direction: column; gap: 10px; }
.pro p { color: var(--ink-2); font-size: 16px; }
.pro-icon { width: 44px; height: 44px; background: var(--navy); color: var(--blush); display: grid; place-items: center; }
.section-dark .split-text p { color: var(--blush); }

/* ---------- Werkwijze ---------- */
.process-step { border: 1px solid var(--blush-line); border-radius: var(--radius); padding: 30px; display: flex; flex-direction: column; gap: 12px; }
.process-step p { color: var(--ink-2); font-size: 16px; }
.process-step.is-highlight { background: var(--blush); }
.process-head { display: flex; align-items: center; gap: 14px; }
.num { width: 44px; height: 44px; flex-shrink: 0; background: var(--navy); color: var(--white); font: 800 20px var(--font-head); display: grid; place-items: center; }
.is-highlight .num { background: var(--carmine); }

/* ---------- Projecten ---------- */
.filters { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 28px; }
.filter { min-height: 44px; padding: 0 18px; border-radius: 22px; border: 2px solid var(--navy); background: var(--white); color: var(--navy); font: 600 15px var(--font-body); cursor: pointer; }
.filter[aria-pressed="true"] { background: var(--navy); color: var(--white); }
.project { display: flex; flex-direction: column; gap: 10px; }
.project[hidden] { display: none; }
.project p { color: var(--ink-2); font-size: 15px; }
.before-after { display: flex; height: clamp(220px, 21vw, 300px); border-radius: 14px; overflow: hidden; }
.before-after > div { flex: 1; display: flex; align-items: flex-end; padding: 10px; font-size: 12px; font-weight: 600; color: var(--white); text-transform: uppercase; }
.ba-before { background: #7d8790; border-right: 4px solid var(--carmine); }
.ba-after { background: var(--navy-2); }

/* ---------- Videoshowroom ---------- */
.video-card { display: flex; flex-direction: column; gap: 12px; text-decoration: none; color: var(--navy); }
.video-card:hover { color: var(--carmine); }
.video-thumb { position: relative; height: clamp(200px, 17vw, 240px); background: var(--navy-2); border-radius: 14px; display: grid; place-items: center; }
.duration { position: absolute; right: 12px; bottom: 12px; padding: 4px 8px; background: var(--navy); color: var(--blush); font-size: 12px; }

/* ---------- Tegels (Drutex / Over ons) ---------- */
.tile { background: var(--white); border-radius: 14px; padding: 30px; display: flex; flex-direction: column; gap: 10px; }
.tile p { color: var(--ink-2); font-size: 16px; }
.tile-bar { width: 48px; height: 8px; background: var(--carmine); }
.person { display: flex; flex-direction: column; gap: 10px; }
.person p { color: var(--ink-2); }

/* ---------- FAQ ---------- */
.faq { max-width: 920px; }
.faq details { border-bottom: 1px solid var(--blush-line); }
.faq summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 72px; padding: 16px 0; cursor: pointer; font: 700 clamp(17px, 1.5vw, 20px)/1.3 var(--font-head); }
.faq summary::-webkit-details-marker { display: none; }
.faq-sign { width: 32px; height: 32px; flex-shrink: 0; background: var(--blush); position: relative; }
.faq-sign::before, .faq-sign::after { content: ''; position: absolute; left: 50%; top: 50%; width: 14px; height: 2px; background: var(--navy); transform: translate(-50%, -50%); }
.faq-sign::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq details[open] .faq-sign { background: var(--carmine); }
.faq details[open] .faq-sign::before { background: var(--white); }
.faq details[open] .faq-sign::after { display: none; }
.faq details p { padding: 0 48px 22px 0; color: var(--ink-2); font-size: 17px; line-height: 1.6; }

/* ---------- Contact ---------- */
.contact { display: grid; grid-template-columns: 360px 1fr; gap: clamp(32px, 5vw, 64px); align-items: start; }
.contact-info { display: flex; flex-direction: column; gap: 24px; }
.info-row { display: flex; gap: 14px; font-size: 17px; line-height: 1.55; }
.info-row .icon { flex-shrink: 0; color: var(--navy); }
.map { min-height: clamp(260px, 26vw, 380px); background: #e4e9ec; border-radius: var(--radius); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; color: var(--ink-2); position: relative; }
.map::before { content: ''; width: 40px; height: 40px; background: var(--carmine); border: 5px solid var(--white); }

/* ---------- Bedankt / 404 ---------- */
.thanks-inner { max-width: 720px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 20px; padding-top: 40px; padding-bottom: 40px; }
.thanks-icon { width: 80px; height: 80px; border-radius: 50%; background: var(--navy); color: var(--blush); display: grid; place-items: center; }
.thanks .h1-dark { font-size: clamp(30px, 3.6vw, 44px); }

/* ---------- Footer ---------- */
.site-footer { background: var(--navy); color: var(--blush); padding: 64px 0 32px; font-size: 15px; }
.footer-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 48px; }
.footer-col { display: flex; flex-direction: column; gap: 12px; }
.footer-col ul { display: flex; flex-direction: column; gap: 10px; }
.footer-col a { color: var(--blush); text-decoration: none; }
.footer-col a:hover { color: var(--white); text-decoration: underline; }
.footer-col .btn { color: var(--white); text-decoration: none; margin-top: 10px; max-width: 260px; min-height: 48px; }
.footer-slogan { font: 700 15px var(--font-head); }
.footer-title { font: 600 15px var(--font-body); color: var(--white); margin-bottom: 4px; }
.hours { margin: 0; display: flex; flex-direction: column; gap: 10px; max-width: 260px; }
.hours div { display: flex; justify-content: space-between; }
.hours dd { margin: 0; }
.footer-bottom { margin-top: 36px; padding-top: 18px; border-top: 1px solid var(--navy-line); color: var(--muted); font-size: 13px; }

/* ---------- Klantenportaal ---------- */
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.portal-bar { background: var(--navy); color: var(--blush); }
.portal-bar-inner { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px 24px; padding-top: 24px; padding-bottom: 24px; }
.portal-bar-inner:has(.portal-tabs) { padding-bottom: 0; }
.portal-who { font-size: 13px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: var(--pink); }
.portal-who strong { display: block; margin-top: 4px; font: 800 clamp(20px, 2vw, 26px)/1.15 var(--font-head); letter-spacing: 0; text-transform: none; color: var(--white); }
.portal-logout { display: flex; align-items: center; gap: 14px; font-size: 15px; }
.portal-logout button { min-height: 40px; padding: 0 16px; border: 2px solid var(--navy-line); border-radius: var(--radius-sm); background: transparent; color: var(--blush); font: 600 14px var(--font-body); cursor: pointer; }
.portal-logout button:hover { border-color: var(--blush); color: var(--white); }
.portal-tabs { grid-column: 1 / -1; display: flex; gap: 4px; margin-top: 12px; overflow-x: auto; scrollbar-width: none; }
.portal-tabs a { display: block; padding: 12px clamp(10px, 1.1vw, 20px); border-radius: 10px 10px 0 0; color: var(--blush); font-weight: 600; font-size: 15px; text-decoration: none; white-space: nowrap; }
.portal-tabs a:hover { background: var(--navy-2); color: var(--white); }
.portal-tabs a[aria-current="page"] { background: var(--white); color: var(--navy); }

.portal { padding: clamp(28px, 4vw, 48px) 0 var(--section); }
.portal > .wrap > .form-ok, .portal > .wrap > .form-alert, .portal > .wrap > .copy-link { margin-bottom: 20px; }
.portal-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 28px; }
.portal-head h1 { font-size: clamp(28px, 3.2vw, 42px); }
.portal-head .eyebrow { margin-bottom: 8px; }
.portal-head .breadcrumb { margin-bottom: 8px; }
.portal-head .hint { margin-top: 8px; }
.portal-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); gap: 24px; align-items: start; }
.portal-main, .portal-side { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.panel { border: 1px solid var(--blush-line); border-radius: var(--radius); padding: clamp(20px, 2.6vw, 32px); background: var(--white); min-width: 0; }
.panel-alert { border-color: var(--carmine); background: var(--blush); margin-bottom: 24px; }
.panel-title { font: 800 20px/1.2 var(--font-head); margin-bottom: 16px; }
.stack .panel-title { margin-bottom: 0; }
.form-subtitle { font: 700 16px/1.3 var(--font-head); margin-top: 8px; }
.stack { display: flex; flex-direction: column; gap: 18px; }
.upload-form { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--blush-line); }
.message-form { margin-top: 24px; }
.form-ok { background: #e3f1e6; border-radius: var(--radius-sm); padding: 14px 18px; font-weight: 600; color: #1e5b2e; }
.copy-link input { font-size: 14px !important; }
.prose { color: var(--ink-3); font-size: 16px; margin-top: 8px; overflow-wrap: anywhere; }
.meta { display: block; font-size: 13px; color: var(--ink-2); font-weight: 400; margin-top: 2px; }
.link-plain { color: var(--navy); text-decoration: none; }
.link-plain:hover { text-decoration: underline; }
.link-button { border: 0; background: none; padding: 4px 0; color: var(--carmine); font: 600 14px var(--font-body); cursor: pointer; text-decoration: underline; }
.link-button:hover { color: var(--carmine-dark); }

.auth { display: grid; grid-template-columns: minmax(0, 520px) minmax(0, 400px); gap: 24px; justify-content: center; align-items: start; }
.auth-wide { grid-template-columns: minmax(0, 760px); }
.auth .form-alert, .auth .form-ok { margin-bottom: 18px; }
.auth .hint { margin: -8px 0 20px; }
.auth-links { margin-top: 18px; font-size: 15px; }
.note-box .btn { align-self: flex-start; margin-top: 8px; }
.numbered { list-style: decimal; padding-left: 22px; display: flex; flex-direction: column; gap: 10px; color: var(--ink-3); font-size: 16px; }

.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-bottom: 24px; }
.stat { background: var(--blush); border-radius: 14px; padding: 20px 22px; color: var(--ink-3); font-size: 15px; }
.stat strong { display: block; font: 800 34px/1.1 var(--font-head); color: var(--navy); }
.stat-alert strong { color: var(--carmine); }

a.filter { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; }
a.filter:hover { color: var(--navy); background: var(--blush); }
a.filter[aria-pressed="true"]:hover { background: var(--navy); color: var(--white); }
.filter .count { font-size: 12px; opacity: .7; }
.search { display: flex; gap: 12px; }
.search .field { flex: 1; }

.table { width: 100%; border-collapse: collapse; font-size: 15px; }
.table th { text-align: left; padding: 0 12px 10px 0; border-bottom: 2px solid var(--blush-line); font-size: 12px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--ink-2); white-space: nowrap; }
.table td { padding: 14px 12px 14px 0; border-bottom: 1px solid var(--blush-line); vertical-align: top; }
.table tr:last-child td { border-bottom: 0; }
.table a { font-weight: 600; }
.table .actions form { display: flex; flex-wrap: wrap; gap: 4px 16px; justify-content: flex-end; }
.table .is-inactive td { color: var(--ink-2); }
.table-empty { color: var(--ink-2); font-size: 16px; }

.pill { display: inline-block; padding: 5px 12px; border-radius: 999px; background: var(--glass); color: #005d68; font-size: 13px; font-weight: 600; line-height: 1.2; white-space: nowrap; }
.pill-new { background: var(--blush); color: var(--carmine-dark); }
.pill-done { background: #e3f1e6; color: #1e5b2e; }
.pill-off { background: #eceff2; color: #56626e; }
.portal-head .pill { font-size: 15px; padding: 8px 16px; }

.facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px 20px; margin: 0 0 8px; font-size: 15px; }
.facts dt { color: var(--ink-2); }
.facts dd { margin: 0; font-weight: 500; overflow-wrap: anywhere; }

.files li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--blush-line); font-size: 15px; }
.files li:first-child { padding-top: 0; }
.files li > div { min-width: 0; overflow-wrap: anywhere; }
.files a { font-weight: 600; }
.panel .files + .link-arrow { display: inline-block; margin-top: 14px; }

.timeline { display: flex; flex-direction: column; gap: 12px; }
.timeline li { font-size: 15px; }
.timeline .is-status { display: flex; gap: 12px; align-items: baseline; color: var(--ink-2); padding-left: 16px; position: relative; }
.timeline .is-status::before { content: ''; position: absolute; left: 0; top: 7px; width: 8px; height: 8px; background: var(--pacific); }
.timeline .is-status .meta { margin: 0; flex-shrink: 0; }
.timeline .is-customer, .timeline .is-wojmar { padding: 14px 18px; border-radius: 12px; background: #f7f4f3; }
.timeline .is-wojmar { background: var(--blush); border-left: 4px solid var(--carmine); }
.timeline li p { margin-top: 6px; color: var(--navy); overflow-wrap: anywhere; }

.progress { display: flex; gap: 8px; margin-bottom: 28px; overflow-x: auto; padding-bottom: 4px; }
.progress li { flex: 1 0 96px; display: flex; flex-direction: column; gap: 8px; font-size: 13px; font-weight: 600; color: #6b7a88; }
.progress .bar { height: 6px; border-radius: 3px; background: var(--blush-line); }
.progress .is-done, .progress .is-active { color: var(--navy); }
.progress .is-done .bar { background: var(--navy); }
.progress .is-active .bar { background: var(--carmine); }

.field-group { border: 0; padding: 0; margin: 0; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.field-group legend { font-size: 15px; font-weight: 600; padding: 0; margin-bottom: 8px; }
.choice-grid-sm { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.choice-grid-sm .choice span { min-height: 56px; padding: 0 16px; font-size: 15px; border-radius: 10px; }
.field-group[aria-invalid="true"] .choice span { border-color: var(--carmine); }
.approve { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.approve p { max-width: 640px; }

/* ---------- Foto's uit het beheer ---------- */
.photo { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius); background: var(--blush); }
.photo.ph-lg { min-height: clamp(260px, 36vw, 520px); max-height: 640px; }
.photo.ph-md { min-height: clamp(240px, 28vw, 400px); max-height: 480px; }
.photo.ph-person { min-height: 0; aspect-ratio: 4 / 5; height: auto; }
.photo-grid .photo { min-height: 0; }
.photo-grid .photo.tall { grid-row: span 2; }
.card-media .card-img, .card-media .photo { position: absolute; inset: 0; border-radius: 0; }
.photo.option-img { border-radius: 0; aspect-ratio: 16 / 10; height: auto; }
.before-after > div { position: relative; }
.before-after .ba-img { position: absolute; inset: 0; border-radius: 0; }
.before-after span { position: relative; text-shadow: 0 1px 3px rgba(0, 0, 0, .6); }

/* ---------- Beheer: inhoud bewerken ---------- */
.content-editor { max-width: 980px; }
.content-section { margin: 0; display: flex; flex-direction: column; gap: 18px; }
.content-section > legend { float: left; width: 100%; padding: 0; margin-bottom: 0; }
.content-info { background: var(--glass); padding: 12px 16px; border-radius: var(--radius-sm); }
.optional { font-weight: 400; color: var(--ink-2); }
.save-bar { position: sticky; bottom: 0; z-index: 5; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 14px 0; background: rgba(255, 255, 255, .94); border-top: 1px solid var(--blush-line); }
.reset-form { margin-top: 24px; }

.image-field { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 20px; align-items: start; padding: 16px; border: 1px dashed var(--blush-line); border-radius: 12px; }
.image-label { font-size: 15px; font-weight: 700; }
.image-preview { aspect-ratio: 4 / 3; border-radius: var(--radius-sm); overflow: hidden; background: var(--blush); display: grid; place-items: center; }
.image-preview img { width: 100%; height: 100%; object-fit: cover; }
.image-preview.is-empty span { padding: 12px; font-size: 13px; color: var(--ink-2); text-align: center; }

.list-field { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.list-items { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.list-item { border: 1px solid var(--blush-line); border-radius: 12px; background: #fdfaf9; }
.list-item summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px; cursor: pointer; list-style: none; font-size: 15px; }
.list-item summary::-webkit-details-marker { display: none; }
.list-item summary::before { content: '▸'; color: var(--ink-2); }
.list-item details[open] summary::before { content: '▾'; }
.list-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.list-tools { display: flex; align-items: center; gap: 12px; }
.list-tools .check { font-size: 14px; }
.list-body { padding: 4px 16px 18px; }
.list-item.is-removed { opacity: .5; }
.list-item.is-removed .list-title { text-decoration: line-through; }

.product-row { display: flex; align-items: center; gap: 12px; }
.thumb { width: 56px; height: 42px; flex-shrink: 0; border-radius: 6px; object-fit: cover; background: var(--blush); display: grid; place-items: center; }

/* ---------- Kozijnconfigurator (Wojmar-stijl: navy studio, blush, carmine, vierkante vormen) ---------- */
.cfg-hero { padding-bottom: clamp(40px, 5vw, 64px); }
.cfg-section { padding-top: clamp(28px, 4vw, 56px); }
.configurator { display: grid; grid-template-columns: minmax(320px, 400px) minmax(0, 1fr); gap: clamp(20px, 3vw, 36px); align-items: start; }
.cfg-studio { grid-column: 2; grid-row: 1; position: sticky; top: 112px; }
.cfg-controls { grid-column: 1; grid-row: 1; display: flex; flex-direction: column; gap: 14px; min-width: 0; }

/* Studio: het donkere vlak met tekening en gegevens naast elkaar */
.cfg-studio { background-color: var(--navy); background-image: linear-gradient(rgba(255, 232, 225, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 232, 225, .045) 1px, transparent 1px); background-size: 32px 32px; color: var(--blush); border-radius: var(--radius); padding: clamp(16px, 2vw, 24px); display: flex; flex-direction: column; gap: 14px; }
.cfg-studio-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cfg-studio-label { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; letter-spacing: 3px; text-transform: uppercase; color: var(--pink); }
.cfg-studio-label .dot { width: 10px; height: 10px; background: var(--carmine); box-shadow: 0 0 0 4px rgba(196, 0, 67, .25); }
.cfg-studio-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 270px); gap: clamp(14px, 2vw, 22px); align-items: stretch; }
.cfg-canvas { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.cfg-drawing { flex: 1; display: grid; place-items: center; min-height: 360px; padding: 8px; }
.cfg-drawing svg { width: 100%; height: auto; max-height: min(58vh, 560px); } /* geen filter: wordt bij elke wijziging opnieuw berekend */
.cfg-hint { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.cfg-hint .icon { flex-shrink: 0; }
.vak-hit { fill: transparent; cursor: pointer; transition: fill .15s; outline: none; }
.vak-hit:hover, .vak-hit:focus-visible { fill: rgba(196, 0, 67, .18); }
.vak-hit:focus-visible { stroke: var(--pacific); stroke-width: 14; }
.vak-hit.is-bump { animation: vak-bump .45s ease-out; }
/* 3D-weergave: slepen (of pijltjestoetsen) om te draaien */
.cfg-studio-tools { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.cfg-drawing.is-3d { cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; border-radius: var(--radius-sm); }
.cfg-drawing.is-3d:active { cursor: grabbing; }
.cfg-drawing.is-3d:focus-visible { outline: 2px solid var(--pacific); outline-offset: 2px; }
.cfg-drawing.is-3d svg { overflow: visible; }
.cfg-drawing.is-3d .vak-hit { stroke-width: 18; }
@keyframes vak-bump { 40% { fill: rgba(196, 0, 67, .35); } }

/* Specificatieblad */
.cfg-sheet { position: relative; background: var(--white); color: var(--navy); border-radius: 12px; padding: 22px 20px 18px; display: flex; flex-direction: column; min-width: 0; }
.cfg-sheet::before { content: ''; position: absolute; left: 20px; top: 0; width: 48px; height: 6px; background: var(--carmine); }
.cfg-sheet-eyebrow { font-size: 12px; font-weight: 600; letter-spacing: 3px; text-transform: uppercase; color: var(--carmine); }
.cfg-sheet-title { font: 800 24px/1.1 var(--font-head); margin: 4px 0 10px; }
.cfg-facts { margin: 0; display: flex; flex-direction: column; }
.cfg-facts > div { padding: 9px 0; border-top: 1px solid var(--blush-line); display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 10px; align-items: baseline; }
.cfg-facts dt { font-size: 11px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--ink-2); }
.cfg-facts dd { margin: 0; font-size: 15px; font-weight: 600; overflow-wrap: anywhere; }
.cfg-facts small { display: block; font-size: 12px; font-weight: 400; color: var(--ink-2); }
.fact-swatch { display: inline-block; width: 14px; height: 14px; margin-right: 8px; vertical-align: -2px; background: var(--c); border: 1px solid rgba(8, 28, 47, .3); }
.fact-swatch.is-wood { background-image: repeating-linear-gradient(170deg, rgba(0, 0, 0, .2) 0 2px, transparent 2px 5px); }
.fact-vakken { display: flex; flex-direction: column; gap: 3px; counter-reset: vak; }
.fact-vakken li { counter-increment: vak; background: var(--blush); padding: 3px 8px; font-size: 14px; }
.fact-vakken li::before { content: counter(vak) ' '; font-weight: 800; color: var(--carmine); }
.fact-vakken li small { display: block; margin-left: 14px; }
.cfg-sheet-actions { margin-top: auto; padding-top: 14px; }
/* Desktop: de studio past altijd in beeld; de gegevensrijen scrollen binnen het blad,
   zodat de knop "Inmeting aanvragen" nooit onder de rand van het scherm verdwijnt. */
@media (min-width: 1081px) {
  .cfg-studio { max-height: calc(100vh - 128px); }
  .cfg-studio-body { flex: 1; min-height: 0; }
  .cfg-canvas { min-height: 0; }
  .cfg-drawing { min-height: 0; }
  .cfg-drawing svg { max-height: calc(100vh - 260px); }
  .cfg-sheet { min-height: 0; }
  .cfg-facts { flex: 1 1 auto; min-height: 0; overflow-y: auto; scrollbar-width: thin; padding-right: 4px; }
}
.cfg-actions { display: flex; flex-direction: column; gap: 8px; }
.cfg-actions .btn { min-height: 48px; font-size: 15px; padding: 0 16px; }
.cfg-actions-row { display: flex; justify-content: space-between; gap: 12px; }
.cfg-controls-actions { display: none; }

/* Keuzes */
.cfg-group { border: 1px solid var(--blush-line); border-radius: var(--radius); padding: 16px 20px 20px; margin: 0; display: flex; flex-direction: column; gap: 12px; min-width: 0; background: var(--white); }
.cfg-group legend { display: flex; align-items: center; gap: 12px; padding: 0 8px 0 0; font: 800 18px var(--font-head); }
.cfg-num { width: 32px; height: 32px; display: grid; place-items: center; background: var(--navy); color: var(--white); font: 800 15px var(--font-head); }
.cfg-group:focus-within .cfg-num { background: var(--carmine); }
.cfg-label { font-size: 14px; font-weight: 600; margin-top: 4px; }
.cfg-field { font-size: 14px; }

/* Verborgen keuzeknoppen: de <span> ernaast is de knop */
.cfg-type input, .segmented input, .swatch input, .cfg-option input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.cfg-type input:focus-visible + span, .segmented input:focus-visible + span, .swatch input:focus-visible + .swatch-color, .cfg-option input:focus-visible + span { outline: 3px solid var(--pacific); outline-offset: 2px; }

.cfg-types { display: grid; grid-template-columns: 1fr; gap: 8px; }
.cfg-type { position: relative; cursor: pointer; }
.cfg-type span { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 12px; align-items: center; padding: 10px 14px; border: 2px solid var(--blush-line); border-radius: var(--radius-sm); transition: border-color .15s, background-color .15s; }
.cfg-type .icon { grid-row: span 2; color: var(--navy); }
.cfg-type strong { font-size: 16px; }
.cfg-type small { font-size: 13px; color: var(--ink-2); line-height: 1.35; }
.cfg-type:hover span { border-color: var(--carmine); }
.cfg-type input:checked + span { border-color: var(--carmine); background: var(--blush); }

.segmented { display: inline-flex; flex-wrap: wrap; border: 2px solid var(--navy); border-radius: var(--radius-sm); padding: 3px; gap: 3px; align-self: flex-start; }
.segmented button, .segmented span { display: block; border: 0; background: transparent; color: var(--navy); font: 600 14px var(--font-body); padding: 7px 14px; border-radius: 4px; cursor: pointer; transition: background-color .15s, color .15s; }
.segmented label { position: relative; }
.segmented button[aria-pressed="true"], .segmented input:checked + span { background: var(--navy); color: var(--white); }
.segmented input:disabled + span { opacity: .35; cursor: not-allowed; }
.segmented-sm button { padding: 4px 10px; font-size: 13px; }
.segmented-dark { border-color: var(--navy-line); }
.segmented-dark button { color: var(--blush); }
.segmented-dark button[aria-pressed="true"] { background: var(--blush); color: var(--navy); }

.cfg-size label { font-size: 15px; font-weight: 600; }
.cfg-size small { font-weight: 400; color: var(--ink-2); margin-left: 6px; }
.cfg-size-row { display: flex; align-items: center; gap: 12px; margin-top: 6px; }
.cfg-size-row input[type="range"] { flex: 1; accent-color: var(--carmine); min-width: 0; height: 28px; }
.cfg-number { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--ink-2); }
.cfg-number input, .stepper input { width: 90px; min-height: 44px; border: 1px solid #c9b3ad; border-radius: var(--radius-sm); font: 600 16px var(--font-body); color: var(--navy); text-align: right; padding: 0 10px; }

.cfg-vakken { display: flex; flex-direction: column; gap: 6px; }
.cfg-vak { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; padding: 8px 10px; background: #f7f4f3; border-left: 4px solid var(--navy); }
.cfg-vak-name { font: 800 14px var(--font-head); min-width: 44px; }
.cfg-select select, .cfg-field select { font: 500 15px var(--font-body); color: var(--navy); min-height: 40px; border: 1px solid #c9b3ad; border-radius: var(--radius-sm); padding: 0 10px; background: var(--white); }

.cfg-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.cfg-options-list { grid-template-columns: 1fr; }
.cfg-option { position: relative; cursor: pointer; }
.cfg-option span { display: flex; flex-direction: column; gap: 2px; padding: 9px 14px; border: 2px solid var(--blush-line); border-radius: var(--radius-sm); font-size: 15px; font-weight: 600; transition: border-color .15s, background-color .15s; }
.cfg-option small { font-weight: 400; font-size: 13px; color: var(--ink-2); }
.cfg-option:hover span { border-color: var(--carmine); }
.cfg-option input:checked + span { border-color: var(--carmine); background: var(--blush); }

/* Drutex-systemen: filter + lijst */
.cfg-filter { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { border: 2px solid var(--blush-line); background: var(--white); color: var(--navy); font: 600 13px var(--font-body); padding: 5px 10px; border-radius: var(--radius-sm); cursor: pointer; transition: border-color .15s, background-color .15s, color .15s; }
.chip small { font-weight: 500; opacity: .6; margin-left: 2px; }
.chip:hover { border-color: var(--navy); }
.chip[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: var(--white); }
.cfg-systems { display: flex; flex-direction: column; gap: 6px; max-height: 340px; overflow-y: auto; padding: 2px 6px 2px 2px; scrollbar-width: thin; }
.cfg-system { position: relative; cursor: pointer; }
.cfg-system input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.cfg-system span { display: flex; flex-direction: column; gap: 1px; padding: 9px 12px; border: 2px solid var(--blush-line); border-left-width: 6px; border-radius: var(--radius-sm); transition: border-color .15s, background-color .15s; }
.cfg-system strong { font: 800 15px var(--font-head); }
.cfg-system em { font-style: normal; font-size: 12px; font-weight: 600; color: var(--carmine); }
.cfg-system small { font-size: 13px; color: var(--ink-2); line-height: 1.35; }
.cfg-system:hover span { border-color: var(--navy); }
.cfg-system input:checked + span { border-color: var(--carmine); background: var(--blush); }
.cfg-system input:focus-visible + span { outline: 3px solid var(--pacific); outline-offset: 2px; }
.cfg-facts > div.is-spec { background: #f7f4f3; margin: 0 -8px; padding-left: 8px; padding-right: 8px; border-top-color: transparent; }
.cfg-facts > div.is-spec + div.is-spec { border-top: 1px solid var(--white); }
.cfg-facts > div:not(.is-spec) + div.is-spec { margin-top: 8px; }

/* Kleurstalen als vierkante "ruitjes", zoals het beeldmerk */
.swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); gap: 10px 8px; }
.swatch { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; text-align: center; }
.swatch-color { width: 42px; height: 42px; background: var(--c); border: 1px solid rgba(8, 28, 47, .25); box-shadow: inset 0 0 0 5px rgba(255, 255, 255, .0), inset 0 -8px 12px rgba(0, 0, 0, .12); transition: transform .15s; }
.swatch-color.is-wood { background-image: repeating-linear-gradient(170deg, rgba(0, 0, 0, .18) 0 2px, transparent 2px 7px); }
.swatch:hover .swatch-color { transform: scale(1.08); }
.swatch input:checked + .swatch-color { outline: 3px solid var(--carmine); outline-offset: 3px; }
.swatch-name { font-size: 12px; line-height: 1.25; color: var(--ink-2); }
.swatch input:checked ~ .swatch-name { color: var(--navy); font-weight: 700; }

.stepper { display: inline-flex; align-items: center; gap: 6px; }
.stepper button { width: 44px; height: 44px; border: 2px solid var(--navy); border-radius: var(--radius-sm); background: var(--white); color: var(--navy); font: 700 20px var(--font-body); cursor: pointer; }
.stepper button:hover { background: var(--navy); color: var(--white); }
.stepper input { width: 72px; text-align: center; }

/* Ontwerpen als kaartjes (contactformulier, portaal, beheer) – tekening op navy, gegevens ernaast */
.design-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); gap: 14px; }
.design-card { border: 1px solid var(--blush-line); border-radius: 14px; overflow: hidden; background: var(--white); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
.design-svg { padding: 14px; display: grid; place-items: center; min-height: 200px; background-color: var(--navy); background-image: linear-gradient(rgba(255, 232, 225, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 232, 225, .05) 1px, transparent 1px); background-size: 20px 20px; }
.design-svg svg { width: 100%; height: 100%; max-height: 260px; }
.design-info { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 6px; font-size: 14px; color: var(--ink-3); border-top: 6px solid var(--carmine); }
.design-info ul { display: flex; flex-direction: column; gap: 3px; }
.design-title { font: 800 16px var(--font-head); color: var(--navy); display: flex; align-items: center; gap: 8px; }
.design-actions { display: flex; gap: 16px; margin-top: auto; padding-top: 4px; }
.form-design { margin-bottom: 4px; }
.form-design .design-cards { grid-template-columns: 1fr; }
.elements { border: 1px dashed var(--blush-line); border-radius: 14px; padding: 16px; display: flex; flex-direction: column; gap: 14px; }
.elements-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }

/* Home: teaser */
.cfg-teaser .split-text p:not(.eyebrow) { color: var(--blush); }
.cfg-teaser-drawing { display: block; border-radius: var(--radius); padding: clamp(18px, 3vw, 36px); text-decoration: none; transition: transform .3s, box-shadow .3s; background-color: var(--navy-2); background-image: linear-gradient(rgba(255, 232, 225, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 232, 225, .05) 1px, transparent 1px); background-size: 28px 28px; border: 1px solid var(--navy-line); }
.cfg-teaser-drawing:hover { transform: translateY(-4px); box-shadow: 0 20px 40px rgba(0, 0, 0, .3); }
.cfg-teaser-drawing .design-svg { background: none; padding: 0; min-height: 0; aspect-ratio: 16 / 10; }
.cfg-teaser-drawing .design-svg svg { max-height: none; }

/* ---------- Drutex-catalogus ---------- */
.hero-btns { margin-top: 24px; }
.cat-lead { margin-top: 12px; max-width: 640px; }
.sys-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 16px; }
.sys-card { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 18px 20px; background: var(--white); border: 1px solid var(--blush-line); border-top: 6px solid var(--navy); border-radius: 12px; transition: box-shadow .2s, transform .2s, border-color .2s; }
.sys-card[hidden] { display: none; }
.sys-card:hover { box-shadow: 0 14px 30px rgba(8, 28, 47, .1); border-top-color: var(--carmine); }
.sys-card-head { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; font-size: 12px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; }
.sys-card-cat { color: var(--ink-2); }
.sys-card-mat { color: var(--carmine); font-size: 12px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; }
.sys-card-title { font: 800 20px/1.15 var(--font-head); }
.sys-card-title a { color: var(--navy); text-decoration: none; }
.sys-card-title a::after { content: ''; position: absolute; inset: 0; } /* hele kaart klikbaar */
.sys-card-text { font-size: 14px; color: var(--ink-3); }
.sys-card-specs { margin: 2px 0 0; display: flex; flex-wrap: wrap; gap: 6px; }
.sys-card-specs div { background: var(--blush); padding: 4px 8px; font-size: 12px; display: flex; gap: 6px; }
.sys-card-specs dt { color: var(--ink-2); }
.sys-card-specs dd { margin: 0; font-weight: 700; }
.sys-card-nospec { font-size: 12px; color: var(--ink-2); font-style: italic; }
.sys-card-foot { margin-top: auto; padding-top: 6px; display: flex; align-items: center; gap: 16px; font-size: 15px; }
.sys-card-foot a, .sys-compare { position: relative; z-index: 1; }
.sys-card-cfg { font-weight: 600; font-size: 14px; }
.sys-card-foot .link-arrow, .sys-card-cfg { white-space: nowrap; }
/* Roze bovenregel ook in donkere secties met .split-text (anders wint de blush-kleur van de alinea's) */
.section-dark .split-text .eyebrow-pink { color: var(--pink); }
.sys-compare { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--ink-2); cursor: pointer; }
.sys-compare input { width: 18px; height: 18px; accent-color: var(--carmine); }

.cat-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.cat-tile { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 20px; background: var(--white); border-radius: 12px; text-decoration: none; color: var(--navy); border: 1px solid var(--blush-line); transition: transform .2s, box-shadow .2s; overflow: hidden; }
.cat-tile::before { content: ''; position: absolute; left: 20px; top: 0; width: 40px; height: 6px; background: var(--carmine); }
.cat-tile:hover { color: var(--navy); transform: translateY(-3px); box-shadow: 0 16px 32px rgba(8, 28, 47, .12); }
.cat-tile-count { font: 800 36px/1 var(--font-head); color: var(--carmine); margin-top: 6px; }
.cat-tile strong { font: 800 18px var(--font-head); }
.cat-tile small { font-size: 13px; color: var(--ink-2); }
.cat-tile .link-arrow { margin-top: auto; padding-top: 6px; font-size: 14px; }

.catalog-bar { display: flex; flex-direction: column; gap: 12px; margin-bottom: 22px; }
.catalog-tools { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
a.chip { text-decoration: none; display: inline-flex; align-items: center; gap: 4px; }
a.chip[hidden] { display: none; }
.chip-sm { font-size: 12px; padding: 3px 9px; }
.catalog-search input { min-height: 44px; width: min(340px, 100%); border: 1px solid #c9b3ad; border-radius: var(--radius-sm); padding: 0 14px; font: 400 16px var(--font-body); }
.catalog-count { font-size: 14px; color: var(--ink-2); }
.compare-bar { position: sticky; bottom: 0; z-index: 20; background: var(--navy); color: var(--blush); margin-top: 24px; }
.compare-bar-inner { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-top: 12px; padding-bottom: 12px; font-size: 15px; }
.link-light-btn { color: var(--blush); }
.compare-dialog { width: min(1000px, calc(100vw - 32px)); max-height: calc(100vh - 48px); border: 0; border-radius: var(--radius); padding: 24px; box-shadow: 0 30px 80px rgba(8, 28, 47, .4); }
.compare-dialog::backdrop { background: rgba(8, 28, 47, .6); }
.compare-dialog-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.compare-wrap { overflow-x: auto; }
.compare-table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 520px; }
.compare-table caption { text-align: left; font: 800 18px var(--font-head); margin-bottom: 10px; }
.compare-table th, .compare-table td { text-align: left; vertical-align: top; padding: 10px 12px; border-bottom: 1px solid var(--blush-line); }
.compare-table thead th { font: 800 16px var(--font-head); border-bottom: 3px solid var(--carmine); }
.compare-table thead th a { color: var(--navy); }
.compare-table tbody th { font-size: 12px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--ink-2); width: 150px; }

/* Systeempagina */
.sys-hero .split-text h1 { font-size: clamp(36px, 4.4vw, 60px); }
.breadcrumb-light, .breadcrumb-light a { color: var(--muted); }
.sys-badges { display: flex; flex-wrap: wrap; gap: 8px; }
.sys-badges li { border: 1px solid var(--navy-line); color: var(--blush); padding: 4px 12px; font-size: 14px; font-weight: 600; }
.sys-hero-mark { display: grid; place-items: center; min-height: 260px; background: var(--navy-2); border-radius: var(--radius); }
.sys-detail { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(300px, 1fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
.sys-detail-text { display: flex; flex-direction: column; gap: 20px; }
.sys-spec-card { position: relative; background: var(--white); border: 1px solid var(--blush-line); border-radius: 12px; padding: 24px 22px 18px; box-shadow: 0 18px 40px rgba(8, 28, 47, .08); }
.sys-spec-card::before { content: ''; position: absolute; left: 22px; top: 0; width: 48px; height: 6px; background: var(--carmine); }
.spec-table { margin: 6px 0 12px; }
.spec-table div { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 12px; padding: 10px 0; border-top: 1px solid var(--blush-line); }
.spec-table dt { font-size: 12px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--ink-2); }
.spec-table dd { margin: 0; font-weight: 600; font-size: 15px; }
.sys-nospec { font-size: 15px; color: var(--ink-3); background: var(--blush); padding: 14px 16px; margin: 8px 0 12px; }
.feature-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.feature-pills li { display: inline-flex; align-items: center; gap: 6px; background: var(--navy); color: var(--white); padding: 6px 12px; font-size: 14px; font-weight: 600; }
.feature-pills .icon { color: var(--pacific); }
.product-systems { background: #fbf8f7; }

/* Keuzehulp */
.kh { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: clamp(24px, 4vw, 48px); align-items: start; }
.kh-form { position: sticky; top: 112px; display: flex; flex-direction: column; gap: 18px; background: var(--white); border: 1px solid var(--blush-line); border-radius: var(--radius); padding: clamp(18px, 2.4vw, 28px); }
.kh-progress { display: flex; gap: 6px; }
.js .kh-progress li { flex: 1; height: 6px; background: var(--blush-line); }
.kh-progress li.is-done { background: var(--navy); }
.kh-progress li.is-active { background: var(--carmine); }
.kh-step { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.kh-step legend { display: flex; align-items: center; gap: 12px; font: 800 clamp(20px, 2vw, 24px)/1.2 var(--font-head); margin-bottom: 12px; padding: 0; }
/* Met JavaScript één vraag tegelijk (de eerste al vóór het script draait) */
.js .kh-form .kh-step { display: none; }
.js .kh-form:not(.is-steps) .kh-step:first-of-type, .js .kh-form .kh-step.is-current { display: flex; animation: step-in .35s ease-out; }
.kh-step.is-error .kh-option span { border-color: var(--carmine); }
.kh-options { display: flex; flex-direction: column; gap: 8px; }
.kh-options-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.kh-option { position: relative; cursor: pointer; }
.kh-option input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.kh-option span { display: grid; grid-template-columns: auto 1fr; column-gap: 12px; align-items: center; padding: 12px 14px; border: 2px solid var(--blush-line); border-radius: var(--radius-sm); transition: border-color .15s, background-color .15s; min-height: 52px; }
.kh-option span > :not(svg) { grid-column: 2; }
.kh-option span > svg { grid-row: span 2; color: var(--navy); }
.kh-option strong { font-size: 16px; }
.kh-option small { font-size: 13px; color: var(--ink-2); }
.kh-options-big .kh-option span { min-height: 72px; }
.kh-option:hover span { border-color: var(--carmine); }
.kh-option input:checked + span { border-color: var(--carmine); background: var(--blush); }
.kh-option input:focus-visible + span { outline: 3px solid var(--pacific); outline-offset: 2px; }
.kh-option input:disabled + span { opacity: .4; cursor: not-allowed; }
.kh-check input:checked + span::after { content: '✓'; position: absolute; right: 12px; top: 10px; font-weight: 800; color: var(--carmine); }
.kh-sub { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.kh-sub[hidden] { display: none; }
.kh-nav { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.kh-result.is-loading { opacity: .4; transition: opacity .2s; }
.kh-intro { background: var(--navy); color: var(--blush); border-radius: var(--radius); padding: clamp(24px, 3vw, 40px); display: flex; flex-direction: column; gap: 14px; }
.kh-intro strong { font: 800 22px var(--font-head); color: var(--white); }
.kh-intro .numbered { color: var(--blush); }

.advice { display: flex; flex-direction: column; gap: 20px; outline: none; }
.advice-head h2 { font-size: clamp(26px, 2.8vw, 38px); }
.advice-head .lead-dark { margin-top: 8px; }
.advice-list { display: flex; flex-direction: column; gap: 14px; }
.advice-item { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 16px; padding: 20px; border: 1px solid var(--blush-line); border-radius: 14px; background: var(--white); }
.advice-item.is-best { border: 2px solid var(--carmine); box-shadow: 0 18px 40px rgba(196, 0, 67, .12); }
.advice-rank { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.advice-rank span { width: 52px; height: 52px; display: grid; place-items: center; background: var(--navy); color: var(--white); font: 800 24px var(--font-head); }
.is-best .advice-rank span { background: var(--carmine); }
.advice-rank em { font-style: normal; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--carmine); text-align: center; }
.advice-body { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.advice-body h3 { font: 800 22px var(--font-head); }
.advice-body > p { color: var(--ink-3); font-size: 15px; }
.match { display: flex; align-items: center; gap: 10px; }
.match span { flex: 1; max-width: 220px; height: 8px; background: var(--blush-line); position: relative; overflow: hidden; }
.match span::after { content: ''; position: absolute; inset: 0 auto 0 0; width: var(--m); background: var(--carmine); }
.match small { font-size: 13px; font-weight: 700; color: var(--carmine); }
.advice-why-title { font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--ink-2) !important; }
.advice-why { display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.advice-why li { display: flex; gap: 8px; align-items: flex-start; }
.advice-why .icon { flex-shrink: 0; color: var(--carmine); margin-top: 2px; }
.advice-more { font-size: 15px; color: var(--ink-3); }
.advice-note { background: var(--blush); padding: 12px 16px; }

/* ---------- Facturatie ---------- */
.amt { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.table tfoot th { padding: 12px 12px 0 0; border-top: 2px solid var(--blush-line); text-align: left; }
.table tfoot th.amt { text-align: right; }
.stats-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.stats-inline { grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 4px 0 16px; }
.stats-inline .stat strong { font-size: 24px; }
.inv-new { display: flex; gap: 10px; align-items: center; }
.inv-new .field select { min-width: 240px; }
.inv-form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
.inv-form-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.inv-editor { width: 100%; border-collapse: collapse; min-width: 760px; }
.inv-editor th { text-align: left; font-size: 12px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--ink-2); padding: 0 6px 8px; border-bottom: 2px solid var(--blush-line); }
.inv-editor td { padding: 8px 6px; border-bottom: 1px solid var(--blush-line); vertical-align: top; }
.inv-editor td:first-child { width: 42%; }
.inv-editor textarea, .inv-editor input, .inv-editor select { width: 100%; font: 400 15px var(--font-body); color: var(--navy); border: 1px solid #c9b3ad; border-radius: var(--radius-sm); padding: 8px 10px; background: var(--white); }
.inv-editor textarea { resize: vertical; min-height: 42px; }
.inv-editor input[data-qty] { width: 80px; text-align: right; }
.inv-editor input[data-price] { width: 120px; text-align: right; }
.inv-editor select:disabled { opacity: .4; }
.inv-editor td[data-line-total] { padding-top: 16px; font-weight: 600; }
.inv-editor td.is-bad { color: var(--carmine); }
.inv-live-totals { margin: 16px 0 0 auto; max-width: 380px; display: flex; flex-direction: column; gap: 6px; font-size: 15px; }
.inv-live-totals div { display: flex; justify-content: space-between; gap: 16px; }
.inv-live-totals dd, .inv-live-totals dt { margin: 0; }
.inv-live-totals .inv-grand { border-top: 2px solid var(--navy); padding-top: 8px; font: 800 18px var(--font-head); }
.fin-chart { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 8px; align-items: end; height: 200px; padding-top: 8px; }
.fin-month { display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; }
.fin-bars { flex: 1; width: 100%; display: flex; align-items: flex-end; justify-content: center; gap: 3px; }
.fin-bar { width: 42%; max-width: 22px; height: var(--h); min-height: 2px; background: var(--navy); }
.fin-bar-in { background: var(--carmine); }
.fin-month small { font-size: 12px; color: var(--ink-2); }
.fin-legend { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 13px; color: var(--ink-2); }
.fin-key { display: inline-block; width: 12px; height: 12px; background: var(--navy); margin-left: 8px; }
.fin-key-in { background: var(--carmine); }
.fin-bar-cost, .fin-key-cost { background: #9fb3c6; }
.fin-bar { width: 30%; }
.stats-result { margin-top: -8px; }
.stats-result .stat { background: #f2f5f8; }
.filter-sm { min-height: 34px; padding: 0 10px; font-size: 13px; }
.cost-preview { background: var(--glass); padding: 8px 12px; font-weight: 600; color: var(--navy); }
.cost-preview:empty { display: none; }
.fin-sum th, .fin-sum td { border-top: 2px solid var(--navy); }
.aging { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 16px; }
.aging-cell { background: #f7f4f3; padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; border-top: 4px solid var(--navy); }
.aging-cell.is-late { border-top-color: var(--carmine); background: var(--blush); }
.aging-cell small { font-size: 12px; color: var(--ink-2); font-weight: 600; }
.aging-cell strong { font: 800 18px var(--font-head); }
.aging-cell span { font-size: 12px; color: var(--ink-2); }
.meta.late { color: var(--carmine); font-weight: 600; }
.top-clients { display: flex; flex-direction: column; gap: 10px; }
.top-clients li { position: relative; display: flex; justify-content: space-between; gap: 12px; font-size: 14px; padding-bottom: 6px; }
.top-clients i { position: absolute; left: 0; bottom: 0; height: 3px; width: var(--w); background: var(--carmine); }

/* De factuur zelf (A4) */
.invoice-page { background: #e9e6e5; }
.invoice-toolbar { position: sticky; top: 0; z-index: 5; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 20px; background: var(--navy); color: var(--blush); font-weight: 600; }
.invoice-toolbar .btn-ghost { color: var(--blush); }
.invoice-preview { overflow-x: auto; }
.invoice-paper { position: relative; width: 210mm; min-height: 297mm; margin: 24px auto; padding: 18mm 18mm 16mm; background: var(--white); color: var(--navy); box-shadow: 0 10px 40px rgba(8, 28, 47, .18); font-size: 13px; line-height: 1.5; display: flex; flex-direction: column; gap: 18px; overflow: hidden; }
.invoice-preview .invoice-paper { margin: 0; box-shadow: 0 6px 24px rgba(8, 28, 47, .1); border: 1px solid var(--blush-line); }
.invoice-watermark { position: absolute; top: 40%; left: 50%; transform: translate(-50%, -50%) rotate(-24deg); font: 800 110px var(--font-head); color: rgba(196, 0, 67, .08); letter-spacing: 12px; pointer-events: none; }
.inv-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; padding-bottom: 14px; border-bottom: 4px solid var(--carmine); }
.inv-logo .logo { font-size: 30px; }
.inv-sender { text-align: right; font-size: 12px; color: var(--ink-3); }
.inv-sender strong { color: var(--navy); font-size: 13px; }
.inv-meta-row { display: flex; justify-content: space-between; gap: 24px; }
.inv-label { font-size: 11px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: var(--carmine); margin-bottom: 4px; }
.inv-meta { margin: 0; display: grid; grid-template-columns: auto auto; gap: 3px 16px; font-size: 12px; align-content: start; }
.inv-meta div { display: contents; }
.inv-meta dt { color: var(--ink-2); }
.inv-meta dd { margin: 0; font-weight: 600; text-align: right; }
.inv-title { font: 800 26px var(--font-head); margin-top: 6px; }
.inv-lines { width: 100%; border-collapse: collapse; }
.inv-lines th { font-size: 11px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--ink-2); text-align: left; padding: 6px 8px; border-bottom: 2px solid var(--navy); }
.inv-lines th.amt { text-align: right; }
.inv-lines td { padding: 8px; border-bottom: 1px solid var(--blush-line); vertical-align: top; }
.inv-empty { color: var(--ink-2); font-style: italic; }
.inv-totals { margin: 0 0 0 auto; width: 320px; display: flex; flex-direction: column; gap: 4px; }
.inv-totals div { display: flex; justify-content: space-between; gap: 12px; }
.inv-totals dt, .inv-totals dd { margin: 0; }
.inv-totals dd { font-variant-numeric: tabular-nums; }
.inv-totals .inv-grand { margin-top: 6px; padding: 8px 10px; background: var(--navy); color: var(--white); font: 800 16px var(--font-head); }
.inv-legal, .inv-note { font-size: 12px; }
.inv-legal { background: var(--blush); padding: 8px 12px; }
.inv-pay { margin-top: auto; padding: 12px 14px; border: 1px solid var(--blush-line); border-left: 4px solid var(--carmine); font-size: 12px; display: flex; flex-direction: column; gap: 4px; }
.inv-foot { font-size: 11px; color: var(--ink-2); text-align: center; padding-top: 10px; border-top: 1px solid var(--blush-line); }
.quote-accept { border: 2px solid var(--carmine); }
.quote-done { display: flex; gap: 12px; align-items: flex-start; background: #e3f1e6; border-color: #bfdcc6; }
.quote-done .icon { color: #1e5b2e; flex-shrink: 0; }
.todo .files li { gap: 16px; }
@media print {
  /* Offertepagina (met header/portaalbalk) afdrukken: alleen het document */
  .site-header, .portal-bar, .site-footer, .no-print, .portal-head, .form-ok, .form-alert, .page-veil, .to-top, .scroll-progress { display: none !important; }
  .portal { padding: 0; }
  .quote-layout { display: block; }
  .invoice-preview .invoice-paper { border: 0; box-shadow: none; }
}
@media print {
  @page { size: A4; margin: 0; }
  .invoice-page { background: none; }
  .invoice-toolbar { display: none; }
  .invoice-paper { margin: 0; box-shadow: none; width: auto; min-height: 297mm; }
  .invoice-watermark { color: rgba(196, 0, 67, .12); }
  .inv-totals .inv-grand, .inv-head, .inv-pay { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ==========================================================================
   Responsive
   ========================================================================== */
/* Menu: 7 items passen naast elkaar vanaf ± 1260 px; daaronder het uitklapmenu */
.main-nav ul a, .nav-cta { white-space: nowrap; }
/* Laptops (1280–1440 breed): het menu compacter, zodat het met zoekknop en taalkeuze binnen het scherm past,
   ook met de langere Engelse en Poolse menuwoorden. Daaronder neemt het mobiele menu het over. */
@media (min-width: 1261px) and (max-width: 1700px) {
  .main-nav { gap: 14px; }
  .main-nav ul { gap: 16px; }
  .main-nav ul a { font-size: 15px; }
  .nav-cta { padding: 0 14px; font-size: 15px; }
  .main-nav .lang-switch { margin-left: 0; }
  .main-nav .lang-switch a { padding: 6px 4px; font-size: 12px; }
}

@media (max-width: 1260px) {
  .header-inner { height: 72px; }
  .logo { font-size: 26px; }
  .header-mobile { display: flex; }
  .main-nav { position: fixed; inset: 72px 0 auto 0; flex-direction: column; align-items: stretch; gap: 0; background: var(--white); border-bottom: 1px solid var(--blush-line); padding: 8px var(--gutter) 24px; box-shadow: 0 16px 32px rgba(8, 28, 47, .12); transform: translateY(-8px); opacity: 0; visibility: hidden; transition: opacity .2s, transform .2s, visibility .2s; }
  .main-nav.is-open { transform: none; opacity: 1; visibility: visible; }
  .main-nav ul { flex-direction: column; gap: 0; }
  .main-nav ul a { display: block; padding: 14px 0; font-size: 18px; border-bottom: 1px solid var(--blush-line); }
  .main-nav ul a[aria-current="page"] { border-bottom-color: var(--blush-line); }
  .nav-cta { margin-top: 18px; }
}

@media (max-width: 1080px) {
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero-inner, .request, .contact { grid-template-columns: 1fr; }
  .portal-grid, .auth { grid-template-columns: minmax(0, 1fr); }
  /* Configurator mobiel/tablet: studio (tekening | gegevens naast elkaar) bovenaan vastgezet.
     Blok i.p.v. grid: in een grid kan sticky alleen binnen de eigen rij plakken. */
  .configurator { display: block; }
  .cfg-studio { position: sticky; top: 0; z-index: 6; margin: 0 calc(-1 * var(--gutter)); border-radius: 0; padding: 10px var(--gutter) 12px; gap: 8px; }
  .cfg-studio-label { font-size: 11px; letter-spacing: 2px; }
  .cfg-studio-body { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 10px; }
  .cfg-drawing { min-height: 0; padding: 0; }
  .cfg-drawing svg { max-height: 32vh; }
  .cfg-hint, .cfg-sheet-actions, .cfg-sheet-eyebrow { display: none; }
  .cfg-sheet { padding: 12px 12px 8px; max-height: 34vh; overflow-y: auto; }
  .cfg-sheet::before { left: 12px; width: 32px; height: 4px; }
  .cfg-sheet-title { font-size: 16px; margin: 2px 0 4px; }
  .cfg-facts > div { grid-template-columns: 1fr; gap: 0; padding: 4px 0; }
  .cfg-facts dt { font-size: 9px; }
  .cfg-facts dd { font-size: 12px; }
  .cfg-facts small { font-size: 11px; }
  .fact-vakken li { font-size: 11px; padding: 1px 5px; }
  .cfg-controls { margin-top: 16px; }
  .cfg-controls-actions { display: block; position: sticky; bottom: 0; z-index: 5; padding: 12px 0; background: rgba(255, 255, 255, .96); border-top: 1px solid var(--blush-line); }
  .design-cards { grid-template-columns: 1fr; }
  .sys-detail, .kh { grid-template-columns: minmax(0, 1fr); }
  .kh-form { position: static; }
  .stats-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .aging { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .inv-new { flex-wrap: wrap; }
}
@media (max-width: 560px) {
  .cfg-types { grid-template-columns: 1fr; }
  .cfg-type span { flex-direction: row; flex-wrap: wrap; align-items: center; column-gap: 10px; }
  .cfg-type small { flex-basis: 100%; }
  .cfg-options { grid-template-columns: 1fr; }
  .cfg-number input { width: 84px; }
  .design-card { grid-template-columns: 1fr; }
  .kh-options-grid { grid-template-columns: 1fr; }
  .advice-item { grid-template-columns: 1fr; }
  .advice-rank { flex-direction: row; }
  .spec-table div { grid-template-columns: 1fr; gap: 2px; }
}

@media (max-width: 720px) {
  .stats { grid-template-columns: 1fr; gap: 10px; }
  .stat { display: flex; align-items: baseline; gap: 12px; padding: 14px 18px; }
  .stat strong { font-size: 26px; }
  .choice-grid-sm { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Tabellen worden kaartjes: elke cel met zijn kolomnaam ervoor */
  .table-stack thead { display: none; }
  .table-stack tr { display: block; padding: 12px 0; border-bottom: 1px solid var(--blush-line); }
  .table-stack tr:first-child { padding-top: 0; }
  .table-stack tr:last-child { border-bottom: 0; }
  .table-stack td { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 12px; padding: 4px 0; border: 0; }
  .table-stack td::before { content: attr(data-label); color: var(--ink-2); font-size: 13px; }
  .table-stack td.actions { display: block; }
  .table-stack td.amt { text-align: left; white-space: normal; }
  .table-stack tfoot tr { display: flex; flex-wrap: wrap; gap: 4px 16px; }
  .table-stack tfoot th { padding: 4px 0; }
  .table-stack tfoot th:empty { display: none; }
  .table .actions form { justify-content: flex-start; }
  .portal-logout span { display: none; }
  .image-field { grid-template-columns: 1fr; }
  .image-preview { max-width: 280px; }
  .list-tools { gap: 6px; }
}

@media (max-width: 820px) {
  .grid-3, .split { grid-template-columns: 1fr; }
  .split-mark .mark { width: 90px; height: 90px; }
  .cta-inner, .cta-text { flex-direction: column; align-items: flex-start; }
  .cta .mark { width: 56px; height: 56px; }
}

@media (max-width: 560px) {
  body { font-size: 16px; }
  .grid-2, .grid-4, .choice-grid, .footer-grid { grid-template-columns: 1fr; }
  .btn-row .btn { width: 100%; }
  .steps li { font-size: 12px; }
  .choice span { min-height: 60px; font-size: 16px; }
  .form-nav { flex-direction: row; }
  .form-nav .btn-primary { width: 100%; }
  .form-nav .form-note { order: 3; }
  .photo-grid { height: 420px; }
  .play { width: 72px; height: 72px; }
  .faq details p { padding-right: 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; }
}

/* ---------- Agenda, overzicht en instellingen ---------- */
.subtabs { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin-top: 20px; }
.subtabs a { flex: none; padding: 8px 14px; border: 2px solid var(--blush-line); border-radius: 999px; color: var(--navy); font-weight: 600; font-size: 14px; text-decoration: none; }
.subtabs a:hover { border-color: var(--navy); }
.subtabs a[aria-current="page"] { background: var(--navy); border-color: var(--navy); color: var(--white); }
.panel-subtitle { margin: 20px 0 8px; font: 700 15px var(--font-head); color: var(--navy); }
.stat-link { display: block; text-decoration: none; transition: transform .2s, box-shadow .2s; }
.stat-link:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(8, 28, 47, .08); }
.pill-appt { background: var(--glass); color: #005d68; }
.pill-appt-montage { background: #fde7ee; color: var(--carmine-dark); }
.pill-appt-levering { background: #fff1d6; color: #7a4b00; }
.pill-appt-service { background: #e3f1e6; color: #1e5b2e; }
.pill-appt-overleg, .pill-appt-overig { background: #eceff2; color: #56626e; }
.appt-list, .todo-list, .warn-list, .activity { list-style: none; margin: 0 0 12px; padding: 0; }
.appt-list li { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--blush-line); font-size: 15px; }
.appt-list li:last-child { border-bottom: 0; }
.appt-list li > div { min-width: 0; }
.appt-list .pill { margin-right: 6px; }
.appt-list .is-past { opacity: .55; }
.todo-list li a { display: block; padding: 11px 12px; margin-bottom: 6px; border-radius: 10px; background: #f6f7f9; color: var(--navy); text-decoration: none; font-size: 15px; }
.todo-list li a:hover { background: var(--glass); }
.todo-list li.is-urgent a { background: var(--blush); }
.todo-list strong { display: inline-block; min-width: 26px; font: 800 17px var(--font-head); color: var(--carmine); }
.warn-list li { padding: 6px 0; }
.warn-list a { color: var(--carmine-dark); font-weight: 600; }
.activity li { padding: 8px 0; border-bottom: 1px solid var(--blush-line); font-size: 14px; overflow-wrap: anywhere; }
.activity li:last-child { border-bottom: 0; }
.activity .meta { margin: 0 0 2px; }
.activity .is-bad, .log-table tr.is-bad td { color: var(--carmine-dark); }
.mail-body { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font: 15px/1.6 var(--font-body); color: var(--ink-3); }
.pager { align-items: center; margin-top: 16px; }
.agenda-nav { margin-bottom: 16px; }
#telefoon .btn-row { margin-bottom: 16px; }
.agenda-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; margin-bottom: 24px; }
.agenda-day { min-height: 180px; padding: 10px; border: 1px solid var(--blush-line); border-radius: 12px; background: var(--white); scroll-margin-top: 90px; }
.agenda-day.is-weekend { background: #fafbfc; }
.agenda-day.is-today { border-color: var(--carmine); box-shadow: inset 0 3px 0 var(--carmine); }
.agenda-day header { display: flex; align-items: baseline; gap: 6px; margin-bottom: 8px; }
.agenda-dayname { font-size: 12px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--ink-2); }
.agenda-day header strong { font: 800 20px var(--font-head); color: var(--navy); }
.agenda-add { margin-left: auto; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; color: var(--ink-2); text-decoration: none; font-size: 18px; line-height: 1; }
.agenda-add:hover { background: var(--glass); color: var(--navy); }
.agenda-empty { margin: 0; color: var(--muted); font-size: 14px; }
.agenda-item { display: block; margin-bottom: 6px; padding: 8px 9px; border-left: 4px solid var(--pacific); border-radius: 6px; background: var(--glass); color: var(--navy); text-decoration: none; font-size: 13px; line-height: 1.35; overflow-wrap: anywhere; }
.agenda-item:hover { filter: brightness(.97); }
.agenda-montage { border-left-color: var(--carmine); background: #fde7ee; }
.agenda-levering { border-left-color: #d98e04; background: #fff1d6; }
.agenda-service { border-left-color: #2e8b47; background: #e3f1e6; }
.agenda-overleg, .agenda-overig { border-left-color: #8795a3; background: #eceff2; }
.agenda-time { display: block; font-weight: 700; }
.agenda-title { display: block; font-weight: 600; }
.agenda-meta { display: block; color: var(--ink-2); font-size: 12px; }
.appt-when [hidden] { display: none; }
@media (max-width: 1080px) {
  .agenda-week { grid-template-columns: minmax(0, 1fr); gap: 0; border: 1px solid var(--blush-line); border-radius: 12px; overflow: hidden; }
  .agenda-day { min-height: 0; padding: 10px 14px; border: 0; border-bottom: 1px solid var(--blush-line); border-radius: 0; }
  .agenda-day:last-child { border-bottom: 0; }
  .agenda-day header { margin: 0; }
  .agenda-day:has(.agenda-item) header { margin-bottom: 8px; }
  .agenda-day.is-today { box-shadow: inset 4px 0 0 var(--carmine); }
  .agenda-empty { display: none; }
}
@media (max-width: 720px) {
  .stats-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats-4 .stat strong { font-size: 22px; }
}

/* ---------- Beheer als web-app op de telefoon ---------- */
.app-nav { display: none; }
.app-hint[hidden], .app-hint [hidden] { display: none; }
.app-hint { display: flex; align-items: center; gap: 12px; max-width: calc(100% - 2 * var(--gutter)); margin: 16px auto 0; padding: 12px 14px; border: 1px solid var(--blush-line); border-radius: var(--radius); background: var(--blush); color: var(--navy); }
.app-hint .mark { flex: none; }
.app-hint p { flex: 1; margin: 0; font-size: 14px; line-height: 1.4; }
.app-hint strong { display: block; font-size: 15px; }
.app-hint-close { flex: none; width: 36px; height: 36px; border: 0; background: none; color: var(--ink-2); font-size: 24px; line-height: 1; cursor: pointer; }
.app-more { inset: auto 0 0 0; width: 100%; max-width: none; margin: 0; padding: 8px 16px calc(16px + env(safe-area-inset-bottom)); border: 0; border-radius: 18px 18px 0 0; background: var(--white); color: var(--navy); box-shadow: 0 -12px 40px rgba(8, 28, 47, .25); }
.app-more::backdrop { background: rgba(8, 28, 47, .55); }
.app-more-who { margin: 0; padding: 10px 8px 6px; font-size: 13px; color: var(--ink-2); }
.app-more a, .app-more button { display: block; width: 100%; padding: 15px 8px; border: 0; border-bottom: 1px solid var(--blush-line); background: none; color: var(--navy); font: 600 17px var(--font-body); text-align: left; text-decoration: none; cursor: pointer; }
.app-more form button { border-bottom: 0; color: var(--carmine); }
.app-more [aria-current="page"] { color: var(--carmine); }

/* In de app (vanaf het beginscherm): geen websitemenu en -footer */
.is-app .app-shell .site-header, .is-app .app-shell .site-footer, .is-app .app-shell .to-top, .is-app .app-shell .scroll-progress, .is-app .app-hint { display: none; }
.is-app .app-shell .portal-bar-inner { padding-top: 16px; }
@media (max-width: 899px) {
  .is-app .app-shell { --app-nav-h: calc(60px + env(safe-area-inset-bottom)); padding-bottom: var(--app-nav-h); }
  .is-app .app-shell .portal-tabs, .is-app .app-shell .portal-logout { display: none; }
  .is-app .app-shell .portal-bar-inner:has(.portal-tabs) { padding-bottom: 16px; }
  .is-app .app-shell .save-bar, .is-app .app-shell .compare-bar, .is-app .app-shell .cfg-controls-actions { bottom: var(--app-nav-h); }
  .is-app .app-nav { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; padding-bottom: env(safe-area-inset-bottom); background: var(--navy); border-top: 1px solid var(--navy-line); }
  .app-nav a, .app-nav button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 60px; padding: 6px 0; border: 0; background: none; color: var(--muted); font: 600 11px var(--font-body); text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .app-nav [aria-current="page"] { color: var(--white); }
  .app-nav [aria-current="page"] svg { color: var(--pink); }
}
@media print { .app-nav, .app-more, .app-hint { display: none !important; } }

/* ---------- Inlogpagina beheer (eigen pagina, zonder websitemenu) ---------- */
body.bare { background: var(--navy); }
.admin-login { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: max(24px, env(safe-area-inset-top)) 16px max(24px, env(safe-area-inset-bottom));
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-2) 100%); box-sizing: border-box; }
.admin-login-card { width: 100%; max-width: 420px; background: var(--white); border-radius: var(--radius); padding: clamp(24px, 5vw, 40px); box-shadow: 0 30px 80px rgba(0, 0, 0, .35); box-sizing: border-box; }
.admin-login-brand { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: calc(-1 * clamp(24px, 5vw, 40px)) calc(-1 * clamp(24px, 5vw, 40px)) 28px;
  padding: 22px clamp(24px, 5vw, 40px); background: var(--navy); border-radius: var(--radius) var(--radius) 0 0; }
.admin-login-brand .logo-light { color: var(--blush); font-size: 26px; }
.admin-login-tag { font-size: 13px; font-weight: 600; letter-spacing: 3px; text-transform: uppercase; color: var(--pink); }
.admin-login h1 { margin-bottom: 12px; }
.admin-login .hint { margin: 0 0 20px; font-size: 15px; }
.admin-login .form-alert, .admin-login .form-ok { margin-bottom: 18px; }

/* ---------- Beheer → Marketing ---------- */
.mk-heading { margin: 36px 0 8px; }
.mk-group { font-size: 15px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: var(--carmine); margin: 28px 0 12px; font-family: var(--font-body); }
.mk-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 20px; }
.mk-card { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.mk-card .meta { display: block; font-size: 13px; color: var(--ink-2); line-height: 1.4; }
.mk-card-link { display: flex; flex-direction: column; gap: 8px; color: inherit; text-decoration: none; }
.mk-card-link:hover .mk-card-title { color: var(--carmine); }
.mk-card-title { font-weight: 600; }
.mk-card-tools { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin-top: 4px; }
/* Ontwerp op ware grootte in een iframe, geschaald naar de breedte van het vak (--s via marketing.js) */
.mk-thumb, .mk-frame { --s: .2; position: relative; width: 100%; aspect-ratio: var(--w) / var(--h); overflow: hidden; background: #efe9e4; border-radius: var(--radius-sm); }
.mk-thumb { aspect-ratio: auto; height: 220px; }
.mk-thumb iframe, .mk-frame iframe { position: absolute; left: var(--x, 0px); top: var(--y, 0px); border: 0; transform: scale(var(--s)); transform-origin: 0 0; pointer-events: none; background: transparent; }
.mk-thumb iframe { box-shadow: 0 4px 14px rgba(8, 28, 47, .18); }
.mk-card .mk-thumb { box-shadow: inset 0 0 0 1px var(--blush-line); }
.mk-editor { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 460px); gap: 28px; align-items: start; }
.mk-preview { position: sticky; top: 16px; display: flex; flex-direction: column; gap: 18px; max-height: calc(100vh - 32px); overflow-y: auto; padding-bottom: 8px; }
.mk-sheet { margin: 0; display: flex; flex-direction: column; gap: 10px; }
.mk-sheet figcaption { font-size: 14px; font-weight: 600; color: var(--ink-2); }
.mk-sheet .mk-frame { box-shadow: 0 8px 24px rgba(8, 28, 47, .14); border-radius: 2px; background: #fff; }
.mk-holes { padding: 12px 14px; border-radius: var(--radius-sm); background: #fff4e5; font-size: 14px; line-height: 1.5; }
.mk-holes.is-done { background: var(--glass); }
.mk-export .form-note { margin: 12px 0 0; }
@media (max-width: 900px) {
  .mk-editor { grid-template-columns: minmax(0, 1fr); }
  .mk-preview { position: static; max-height: none; overflow: visible; order: -1; }
}
.mk-lib { margin-top: 36px; }
.mk-lib-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.mk-lib-grid { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.mk-lib-img { display: grid; place-items: center; height: 170px; padding: 10px; border-radius: var(--radius-sm); background: #efe9e4; overflow: hidden; }
.mk-lib-img img { max-width: 100%; max-height: 100%; object-fit: contain; box-shadow: 0 4px 14px rgba(8, 28, 47, .15); }
.mk-lib-img.is-file { font-family: var(--font-head); font-weight: 800; font-size: 22px; color: var(--ink-2); }
.meta-inline { font-weight: 400; font-size: 12px; opacity: .75; }
/* Staande ontwerpen (story, briefpapier) niet hoger dan ~70% van het scherm; op de telefoon 55% */
.mk-sheet .mk-frame { max-width: min(100%, calc(70vh * var(--w) / var(--h))); margin: 0 auto; }
@media (max-width: 900px) { .mk-sheet .mk-frame { max-width: min(100%, calc(55vh * var(--w) / var(--h))); } }

/* ---------- Online inplannen: dagdeel kiezen in het aanvraagformulier ---------- */
.slot-picker { display: flex; flex-direction: column; gap: 10px; }
.slot-title { font-weight: 600; margin: 0; }
.slots { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 2px 10px; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
.slots:focus-visible { outline: 3px solid var(--pacific); outline-offset: 2px; border-radius: 10px; }
.slot-day, .slot-any { flex: 0 0 124px; scroll-snap-align: start; display: flex; flex-direction: column; gap: 6px; }
.slot-date { display: block; padding: 2px 4px 4px; font-size: 14px; color: var(--ink-2); white-space: nowrap; }
.slot-date b { color: var(--navy); text-transform: capitalize; }
.slot { position: relative; display: block; cursor: pointer; }
.slot input { position: absolute; opacity: 0; inset: 0; }
.slot > span { display: flex; flex-direction: column; gap: 2px; padding: 9px 11px; border: 2px solid var(--blush-line); border-radius: 10px; font-size: 14px; line-height: 1.3; transition: border-color .15s, background .15s; }
.slot small { color: var(--ink-2); font-size: 12px; }
.slot input:checked + span { border-color: var(--carmine); background: var(--blush); }
.slot input:focus-visible + span { outline: 3px solid var(--pacific); outline-offset: 2px; }
.slot.is-full { cursor: default; }
.slot.is-full > span { border-style: dashed; color: var(--ink-2); background: #fafbfc; }
.slot.is-full b { text-decoration: line-through; }
.slot-any { justify-content: flex-end; }
.slot-any > span { min-height: 100%; justify-content: center; }
.thanks-slot { margin: 18px auto 0; max-width: 560px; padding: 16px 20px; border-radius: var(--radius-sm); background: var(--blush); }

/* Beheer: aanvragen via de website die nog bevestigd moeten worden */
.pill-pending { background: #fff1d6; color: #7a4b00; }
.agenda-item.is-pending { border-left-style: dashed; background: #fff8ec; }
.agenda-pending { display: block; font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: #7a4b00; }
.appt-list form.btn-row { gap: 8px; }

/* ---------- Projecten: eigen pagina per project, homepage-blok ---------- */
.project-link { color: inherit; text-decoration: none; }
.project-link:hover { color: var(--carmine); }
.project-hero .breadcrumb { margin-bottom: 18px; }
.project-facts { display: flex; flex-wrap: wrap; gap: 10px 32px; margin: 22px 0 0; }
.project-facts div { display: flex; flex-direction: column; gap: 2px; }
.project-facts dt { font-size: 13px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: var(--muted); }
.project-facts dd { margin: 0; font-weight: 600; color: var(--white); }
.project-detail .ba-lg { height: clamp(280px, 48vw, 620px); margin-top: -40px; box-shadow: 0 20px 50px rgba(8, 28, 47, .18); }
.ba-single { background: var(--navy-2); }
.ba-single .ba-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
.project-slider-note { margin: 10px 0 0; text-align: center; }
.project-body { margin-top: 48px; }
.project-extra { display: grid; gap: 16px; }
.project-photo { width: 100%; height: clamp(200px, 22vw, 300px); object-fit: cover; border-radius: var(--radius); }
.project-nav { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--blush-line); font-weight: 600; }
.project-nav a { text-decoration: none; }
.home-projects .project h3 { margin: 0; }
.mk-project-pick select { min-width: 180px; font-size: 14px; }
@media (max-width: 720px) {
  .project-detail .ba-lg { margin-top: -20px; }
}
/* De dagdeelkiezer scrolt zijwaarts binnen het formulier; het formulier (grid-kolom) mag er niet van groeien */
.form-card, .request-form, .slot-picker { min-width: 0; max-width: 100%; }
.slots { max-width: 100%; }

/* ---------- Tweestapsverificatie ---------- */
.totp-setup { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 24px; align-items: start; }
.totp-qr { padding: 10px; background: var(--white); border: 1px solid var(--blush-line); border-radius: var(--radius-sm); }
.totp-qr svg { display: block; }
.totp-key { font-size: 15px; letter-spacing: 1px; word-break: break-all; }
.totp-codes { columns: 2; margin: 10px 0 0; padding-left: 20px; }
.totp-codes code { font-size: 15px; }
@media (max-width: 600px) { .totp-setup { grid-template-columns: 1fr; } }

/* ---------- Privacy (lopende tekst) ---------- */
.prose { max-width: 760px; }
.prose h2 { font-size: clamp(20px, 2vw, 26px); margin: 32px 0 10px; }
.prose p { color: var(--ink-3); line-height: 1.65; }

/* ---------- Beheer: bezoekersstatistieken ---------- */
.stats-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.stat .meta { display: block; font-size: 13px; }
.chart { display: flex; align-items: flex-end; gap: 3px; height: 220px; padding-top: 22px; }
.chart-bar { flex: 1 1 0; min-width: 0; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; position: relative; }
.chart-bar i { display: block; width: 100%; height: max(var(--h), 2px); background: var(--carmine); border-radius: 3px 3px 0 0; opacity: .85; }
.chart-bar:hover i { opacity: 1; }
.chart-val { font-size: 11px; color: var(--ink-2); margin-bottom: 3px; }
.chart-label { position: absolute; top: 100%; font-size: 11px; color: var(--ink-2); white-space: nowrap; padding-top: 4px; }
.chart { margin-bottom: 26px; }
.top-pages { list-style: none; margin: 0; padding: 0; counter-reset: top; }
.top-pages li { display: grid; grid-template-columns: minmax(0, 1fr) 90px auto; gap: 10px; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--blush-line); font-size: 14px; }
.top-pages li span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.top-bar { display: block; height: 8px; border-radius: 4px; background: linear-gradient(90deg, var(--carmine) var(--w), var(--blush) var(--w)); }
@media (max-width: 900px) { .stats-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .chart-val { display: none; } .chart-label { font-size: 9px; } }

/* ---------- WhatsApp-knop (alleen als er een nummer is ingesteld) ---------- */
.wa-button { position: fixed; right: 18px; bottom: 18px; z-index: 40; display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 0 20px 0 15px; border-radius: 28px;
  background: var(--navy); color: var(--white); font-weight: 600; font-size: 15px; text-decoration: none; box-shadow: 0 10px 30px rgba(8, 28, 47, .3); transition: transform .2s, background .2s; }
.wa-button:hover { background: var(--carmine); color: var(--white); transform: translateY(-2px); }
.wa-button:focus-visible { outline: 3px solid var(--pacific); outline-offset: 3px; }
@media (max-width: 600px) { .wa-button { right: 14px; bottom: 14px; width: 56px; padding: 0; justify-content: center; } .wa-button span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } }
@media (prefers-reduced-motion: reduce) { .wa-button { transition: none; } }

/* ---------- Reviews ---------- */
.reviews { align-items: stretch; }
.review { margin: 0; display: flex; flex-direction: column; gap: 14px; padding: 26px; border-radius: var(--radius); background: var(--white); border: 1px solid var(--blush-line); }
.section-blush .review { border-color: transparent; }
.stars { display: inline-flex; gap: 2px; }
.stars svg { fill: #e7e2dd; }
.stars svg.is-on { fill: var(--carmine); }
.review blockquote { margin: 0; }
.review blockquote p { margin: 0; font-size: 17px; line-height: 1.55; color: var(--ink-3); }
.review blockquote p::before { content: '“'; font-family: var(--font-head); font-weight: 800; font-size: 34px; line-height: 0; color: var(--carmine); margin-right: 4px; vertical-align: -10px; }
.review figcaption { margin-top: auto; display: flex; flex-direction: column; gap: 2px; font-size: 14px; color: var(--ink-2); }
.review figcaption strong { color: var(--navy); font-size: 15px; }
.reviews-google { margin-top: 32px; }

/* ---------- Tips en nieuws ---------- */
.tip-card { border: 1px solid var(--blush-line); border-radius: var(--radius); overflow: hidden; background: var(--white); transition: box-shadow .2s, transform .2s; }
.tip-card:hover { box-shadow: 0 12px 32px rgba(8, 28, 47, .12); transform: translateY(-2px); }
.tip-link { display: flex; flex-direction: column; height: 100%; color: inherit; text-decoration: none; }
.tip-img { width: 100%; height: clamp(170px, 18vw, 240px); object-fit: cover; border-radius: 0; display: block; }
.tip-img-empty { display: grid; place-items: center; background: var(--blush); color: var(--navy); }
.tip-body { display: flex; flex-direction: column; gap: 8px; padding: 22px 24px 24px; flex-grow: 1; }
.tip-body p { color: var(--ink-2); font-size: 15px; margin: 0; }
.tip-body .link-arrow { margin-top: auto; padding-top: 8px; }
.tip-meta { font-size: 13px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--carmine); }
.tip-hero-img { width: 100%; max-height: 520px; object-fit: cover; border-radius: var(--radius); margin: -40px 0 36px; box-shadow: 0 20px 50px rgba(8, 28, 47, .18); }
.tip-prose { margin: 0 auto; }
.tip-prose .btn-row { margin-top: 36px; }
.tip-more-title { margin: 56px 0 20px; }
@media (prefers-reduced-motion: reduce) { .tip-card { transition: none; } }

/* ---------- Video's ---------- */
.video-player { position: relative; border-radius: var(--radius); overflow: hidden; background: var(--navy-2); aspect-ratio: 16 / 9; }
.video-player video, .video-player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; background: #000; }
.video-facade { display: grid; place-items: center; cursor: pointer; }
.video-facade .video-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
.video-poster-empty { position: absolute; inset: 0; background: linear-gradient(135deg, var(--navy) 0%, var(--navy-2) 100%); }
.video-facade .play { position: relative; z-index: 1; }
.video-consent { position: absolute; right: 14px; bottom: 12px; z-index: 1; font-size: 12px; color: var(--muted); }
.play-static { opacity: .5; }
.video-field video { width: 100%; height: 100%; object-fit: cover; }
.video-card-media { position: relative; }
.video-card-media .duration { z-index: 1; }
.cfg-facts .is-prijs dd { color: var(--carmine); font-weight: 700; }
.cfg-facts .is-prijs small { color: var(--ink-2); font-weight: 400; }
.video-feature-wrap { margin-top: 32px; }
.hero-video { position: relative; }
.hero-video .video-label { z-index: 2; }
.hero-video .video-player { min-height: clamp(220px, 38vw, 540px); }
.video-card-player { aspect-ratio: 16 / 9; border-radius: 14px; }

/* ---------- Taalkeuze ---------- */
.lang-switch { display: flex; gap: 2px; margin-left: 10px; }
.lang-switch a { padding: 6px 7px; border-radius: 6px; font-size: 13px; font-weight: 600; letter-spacing: .5px; color: var(--ink-2); text-decoration: none; }
.lang-switch a:hover { color: var(--carmine); }
.lang-switch a[aria-current="true"] { background: var(--navy); color: var(--white); }
.lang-switch-footer { margin: 0; }
.lang-switch-footer a { color: var(--muted); }
.lang-switch-footer a[aria-current="true"] { background: var(--carmine); color: var(--white); }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.subtabs-lang { margin-top: -8px; margin-bottom: 16px; }
@media (max-width: 1200px) { .main-nav .lang-switch { margin: 12px 0 0; } }

/* ---------- Visueel: illustraties, processtrip, plaatshouders ---------- */
.art { display: block; width: 100%; height: 100%; }
.hero-steps { list-style: none; display: flex; flex-wrap: wrap; gap: 10px 28px; margin: 32px 0 0; padding: 0; font-size: 15px; font-weight: 600; color: var(--blush); }
.hero-steps li { display: flex; align-items: center; gap: 10px; }
.hero-steps .num { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--carmine); color: var(--white); font: 800 14px var(--font-head); }
.hero-art { padding: 0; overflow: hidden; }
.hero-art .hero-house { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-art .play { position: relative; z-index: 1; }
.hero-art .ph-note, .hero-art .video-label { z-index: 1; }
.card-media-art { padding: 0; overflow: hidden; }
.card-media-art .art, .card-art { position: absolute; inset: 0; width: 100%; height: 100%; }
.card-media { position: relative; }
.product-art { position: relative; border-radius: var(--radius); overflow: hidden; background: var(--blush); min-height: 320px; display: grid; }
.product-art .art { width: 100%; height: 100%; min-height: 320px; }
.product-art .ph-note { position: absolute; left: 20px; bottom: 16px; font-size: 13px; color: var(--ink-2); }
.video-thumb-art { overflow: hidden; }
.video-thumb-art .thumb-art { position: absolute; inset: 0; width: 100%; height: 100%; }
.video-thumb-art .play, .video-thumb-art .duration { z-index: 1; }
.video-thumb { position: relative; }
/* Lege foto-plekken: raster, icoon en tekst in plaats van een leeg vlak */
.ph-art { position: relative; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: 10px; min-height: 220px;
  background-image: repeating-linear-gradient(0deg, rgba(255,255,255,.06) 0 1px, transparent 1px 36px), repeating-linear-gradient(90deg, rgba(255,255,255,.06) 0 1px, transparent 1px 36px); }
.ph-art.ph-white, .ph-art.ph-blush { background-image: repeating-linear-gradient(0deg, rgba(8,28,47,.07) 0 1px, transparent 1px 36px), repeating-linear-gradient(90deg, rgba(8,28,47,.07) 0 1px, transparent 1px 36px); }
.ph-art .ph-icon { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 16px; background: rgba(255,255,255,.12); color: inherit; }
.ph-art.ph-white .ph-icon, .ph-art.ph-blush .ph-icon { background: var(--white); color: var(--navy); border: 1px solid var(--blush-line); }
.ph-art .ph-text { font-size: 13px; opacity: .8; }
.ph-avatar { display: grid; place-items: center; gap: 8px; }
.avatar-letter { display: grid; place-items: center; width: 120px; height: 120px; border-radius: 50%; background: var(--navy); color: var(--blush); font: 800 52px var(--font-head); }
.ph-avatar .ph-text { font-size: 13px; color: var(--ink-2); }
/* Werkwijze als tijdlijn met iconen */
.process-timeline .process-step { gap: 14px; }
.process-timeline .process-head { gap: 16px; }
.process-icon { display: grid; place-items: center; width: 44px; height: 44px; flex-shrink: 0; border-radius: 12px; background: var(--blush); color: var(--navy); }
.process-step.is-highlight .process-icon { background: var(--white); }
.process-timeline .process-head h2 { font-size: clamp(19px, 1.5vw, 23px); }
.process-timeline .process-step p { margin: 0; }
.process-timeline .process-head h2 { min-width: 0; }
@media (max-width: 480px) { .process-timeline .process-head { gap: 12px; } .process-timeline .process-head h2 { font-size: 18px; } }
.tile-icon { display: flex; flex-direction: column; gap: 10px; }
.tile-ico { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 12px; background: var(--blush); color: var(--navy); margin-bottom: 4px; }
/* Contact: kaartblok met gevel */
.map-card { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); overflow: hidden; border-radius: var(--radius); border: 1px solid var(--blush-line); background: var(--white); min-height: 280px; }
.map-art { position: relative; min-height: 240px; background: var(--blush); }
.map-art .art { position: absolute; inset: 0; width: 100%; height: 100%; }
.map-text { display: flex; flex-direction: column; justify-content: center; gap: 14px; padding: clamp(24px, 3vw, 40px); }
.map-text .icon { color: var(--navy); }
.map-text p { margin: 0; line-height: 1.6; }
.map-text .btn { align-self: flex-start; }
/* Footer: dealer-badge */
.dealer-badge { display: inline-flex; align-items: center; gap: 12px; margin-top: 18px; padding: 12px 16px; border: 1px solid var(--navy-line); border-radius: 12px; color: var(--blush); font-weight: 600; font-size: 14px; line-height: 1.3; }
.dealer-badge small { display: block; font-weight: 400; color: var(--muted); font-size: 12px; }
/* Donkere secties: subtiel raster van kozijnen */
.page-hero.section-dark, .hero { background-image: radial-gradient(circle at 85% 20%, rgba(0,163,181,.14), transparent 38%), repeating-linear-gradient(0deg, rgba(255,255,255,.035) 0 1px, transparent 1px 48px), repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0 1px, transparent 1px 48px); }
.cta { background-image: repeating-linear-gradient(90deg, rgba(255,255,255,.06) 0 1px, transparent 1px 48px); }
.card-link:hover .card-art, .card-link:hover .card-img { transform: scale(1.04); }
.card-art, .card-img { transition: transform .35s ease; }
@media (max-width: 760px) { .map-card { grid-template-columns: 1fr; } .process-icon { left: 20px; } .hero-steps { gap: 8px 18px; font-size: 14px; } }
@media (prefers-reduced-motion: reduce) { .card-art, .card-img { transition: none; } }

/* ---------- Meer contrast ---------- */
:root { --ink-2: #2f4052; --muted: #b9c8d6; --blush-line: #ecd8cf; }
.card, .tip-card, .review, .process-step, .tile, .pro { border-color: var(--blush-line); box-shadow: 0 1px 2px rgba(8, 28, 47, .05); }
.card-link:hover, .tip-card:hover { border-color: var(--navy); }
.btn { transition: background .15s, color .15s, border-color .15s, transform .15s, box-shadow .15s; }
.btn-primary:hover, .btn-white:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(196, 0, 67, .28); }
.btn-outline:hover, .btn-outline-light:hover { transform: translateY(-1px); }
.link-arrow:hover { color: var(--carmine-dark); }
.site-footer a:hover { color: var(--white); }
.section-blush .card-body p, .section-blush .tile p { color: var(--ink-3); }
.hero .lead { color: var(--white); opacity: .92; }

/* ---------- Interactie: illustraties bewegen bij hover, kozijn in de hero is klikbaar ---------- */
.art-sash, .art-door, .art-slide, .art-handle { transition: transform .55s cubic-bezier(.2, .8, .2, 1); transform-box: fill-box; }
.art-sash { transform-origin: left center; }
.art-door { transform-origin: left center; }
.art-handle { transform-origin: 90% 50%; }
.card:hover .art-sash, .card-link:hover .art-sash, .product-art:hover .art-sash, .video-thumb-art:hover .art-sash { transform: perspective(500px) rotateY(-32deg); }
.card:hover .art-door, .card-link:hover .art-door, .product-art:hover .art-door, .video-thumb-art:hover .art-door { transform: perspective(500px) rotateY(-28deg); }
.card:hover .art-slide, .card-link:hover .art-slide, .product-art:hover .art-slide, .video-thumb-art:hover .art-slide { transform: translateX(34px); }
.card:hover .art-handle, .card-link:hover .art-handle, .product-art:hover .art-handle, .video-thumb-art:hover .art-handle { transform: rotate(-28deg); }
.art-frame { transition: fill .35s; }
.art-link { cursor: pointer; outline: none; }
.art-link .art-win { transition: transform .25s; transform-box: fill-box; transform-origin: center; }
.art-link:hover .art-win, .art-link:focus-visible .art-win { transform: scale(1.06); }
.art-link:hover rect[stroke="#081c2f"], .art-link:focus-visible rect[stroke="#081c2f"] { stroke: var(--carmine); stroke-width: 5; }
.art-link:hover rect[fill="#00a3b5"], .art-link:focus-visible rect[fill="#00a3b5"] { fill: #2cc5d6; }
.hero-art .hero-house { transition: transform .35s ease-out; will-change: transform; }
.hero-tip { position: absolute; left: 24px; bottom: 56px; z-index: 2; padding: 8px 14px; border-radius: 8px; background: var(--white); color: var(--navy); font-weight: 600; font-size: 14px; opacity: 0; transform: translateY(6px); transition: opacity .2s, transform .2s; pointer-events: none; }
.hero-tip.is-on { opacity: 1; transform: none; }
.hero-tip::before { content: '→ '; color: var(--carmine); }
.hero-steps a { display: flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; padding: 6px 10px 6px 6px; margin: -6px -10px -6px -6px; border-radius: 22px; transition: background .15s; }
.hero-steps a:hover { background: rgba(255, 255, 255, .08); color: var(--white); }
.hero-steps a:hover .num { transform: scale(1.1); }
.hero-steps .num { transition: transform .15s; }
.process-step { transition: border-color .2s, box-shadow .2s, transform .2s; scroll-margin-top: 110px; }
.process-step:hover, .process-step:target { border-color: var(--navy); box-shadow: 0 14px 34px rgba(8, 28, 47, .12); transform: translateY(-2px); }
.process-step:hover .process-icon, .process-step:target .process-icon { background: var(--navy); color: var(--white); }
.process-step.is-highlight:hover .process-icon { background: var(--navy); }
/* Kleurstalen op de productpagina */
.product-visual { display: flex; flex-direction: column; gap: 14px; }
.kleurstalen { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.kleurstalen-label, .kleurstaal-naam { font-size: 14px; font-weight: 600; color: var(--ink-2); }
.kleurstaal-naam { color: var(--navy); }
.kleurstaal { width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--blush-line); background: var(--c); cursor: pointer; padding: 0; transition: transform .15s, border-color .15s; }
.kleurstaal:hover { transform: scale(1.12); border-color: var(--navy); }
.kleurstaal[aria-pressed="true"] { outline: 3px solid var(--navy); outline-offset: 2px; border-color: var(--white); }
.kleurstaal:focus-visible { outline: 3px solid var(--pacific); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .art-sash, .art-door, .art-slide, .art-handle, .art-link .art-win, .hero-art .hero-house, .process-step, .btn, .kleurstaal { transition: none; }
  .card:hover .art-sash, .card-link:hover .art-sash, .product-art:hover .art-sash, .card:hover .art-door, .card-link:hover .art-door, .card:hover .art-slide, .card-link:hover .art-slide { transform: none; }
}

/* ==========================================================================
   Zoeken op de site (knop in het menu, venster met ⌘K / Ctrl+K, resultatenpagina)
   ========================================================================== */
.nav-search { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 0; border-radius: 10px; background: transparent; color: var(--navy); cursor: pointer; transition: background-color .15s, color .15s; }
.nav-search:hover, .nav-search:focus-visible { background: var(--blush); color: var(--carmine); }
.zoekvenster[hidden] { display: none; }
.zoekvenster { position: fixed; inset: 0; z-index: 60; background: rgba(8, 28, 47, .72); padding: clamp(24px, 10vh, 120px) var(--gutter) 24px; overflow-y: auto; }
.search-box { max-width: 640px; margin: 0 auto; background: var(--white); border-radius: 16px; box-shadow: 0 30px 80px rgba(0, 0, 0, .35); overflow: hidden; }
.search-form { display: flex; align-items: center; gap: 12px; padding: 10px 14px 10px 18px; border-bottom: 1px solid var(--blush-line); color: var(--ink-2); }
.search-form input { flex: 1; border: 0; outline: 0; font: 500 18px var(--font-body); color: var(--navy); min-width: 0; background: transparent; padding: 10px 0; }
.search-form input::-webkit-search-cancel-button { -webkit-appearance: none; }
.search-close { border: 1px solid var(--blush-line); background: var(--blush); color: var(--ink-2); font: 600 12px var(--font-body); padding: 6px 10px; border-radius: 6px; cursor: pointer; }
.search-results { list-style: none; margin: 0; padding: 6px; max-height: min(60vh, 520px); overflow-y: auto; }
.search-results li a, .search-list li a { display: grid; grid-template-columns: 1fr; gap: 2px; padding: 10px 12px; border-radius: 10px; text-decoration: none; color: var(--navy); }
.search-results li a:hover, .search-results li.is-active a, .search-list li a:hover { background: var(--blush); }
.search-results strong, .search-list strong { font: 700 16px var(--font-head); }
.search-results span:not(.search-kind), .search-list span:not(.search-kind) { font-size: 14px; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.search-kind { font-size: 11px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--carmine); }
.search-empty { padding: 14px 12px; color: var(--ink-2); font-size: 15px; }
.search-hint { padding: 10px 18px 14px; font-size: 13px; color: var(--ink-2); margin: 0; }
.search-hint[hidden] { display: none; }
body.has-search { overflow: hidden; }
.search-page-form { display: flex; gap: 10px; max-width: 560px; margin-top: 18px; }
.search-page-form input { flex: 1; min-width: 0; border: 2px solid transparent; border-radius: var(--radius-sm); padding: 0 16px; min-height: 52px; font: 500 17px var(--font-body); color: var(--navy); }
.search-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; max-width: 760px; }
.search-list li a { border: 1px solid var(--blush-line); }
@media (max-width: 700px) { .zoekvenster { padding: 12px var(--gutter); } .search-page-form { flex-direction: column; } }

/* ==========================================================================
   Ontwerpblad (ontwerpblad.php): afdrukbaar blad met het ontwerp uit de configurator
   ========================================================================== */
.ontwerpblad-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 20px; }
.ontwerpblad { background: var(--white); border: 1px solid var(--blush-line); border-radius: var(--radius); padding: clamp(20px, 3vw, 40px); max-width: 960px; margin: 0 auto; }
.ontwerpblad-head { display: flex; justify-content: space-between; gap: 20px; align-items: flex-start; border-bottom: 2px solid var(--navy); padding-bottom: 18px; margin-bottom: 22px; }
.ontwerpblad-head h1 { font-size: clamp(22px, 3vw, 30px); margin: 4px 0 6px; }
.ontwerpblad-views { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 24px; }
.ontwerpblad-view { margin: 0; }
.ontwerpblad-svg { background-color: var(--navy); background-image: linear-gradient(rgba(255, 232, 225, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 232, 225, .045) 1px, transparent 1px); background-size: 32px 32px; border-radius: 12px; padding: 16px; display: grid; place-items: center; min-height: 260px; }
.ontwerpblad-svg svg { width: 100%; height: auto; max-height: 340px; overflow: visible; }
.ontwerpblad-view figcaption { font-size: 13px; color: var(--ink-2); margin-top: 8px; }
.ontwerpblad-grid { display: grid; grid-template-columns: 1.1fr 1fr auto; gap: 28px; align-items: start; }
.ontwerpblad-lines { margin: 8px 0 0; padding-left: 18px; font-size: 15px; display: grid; gap: 4px; }
.ontwerpblad-specs { margin-top: 8px; }
.ontwerpblad-qr { text-align: center; max-width: 180px; }
.ontwerpblad-qr svg { width: 132px; height: 132px; }
.ontwerpblad-ar { margin-top: 10px; display: grid; gap: 8px; }
.ontwerpblad-foot { border-top: 1px solid var(--blush-line); margin-top: 26px; padding-top: 14px; font-size: 13px; color: var(--ink-2); }
@media (max-width: 760px) { .ontwerpblad-views, .ontwerpblad-grid { grid-template-columns: 1fr; } .ontwerpblad-head { flex-direction: column; } }
@media print {
  .ontwerpblad-page { padding: 0; }
  .ontwerpblad { border: 0; padding: 0; max-width: none; }
  .ontwerpblad-views { grid-template-columns: 1fr 1fr; }
  .ontwerpblad-svg { background: var(--navy) !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .ontwerpblad-grid { grid-template-columns: 1.1fr 1fr auto; }
}

/* ==========================================================================
   Configurator: 3D-hulpmiddelen, doorsnede, AR en Mijn ontwerpen
   ========================================================================== */
.cfg-3d-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.chip-dark { border-color: var(--navy-line); background: transparent; color: var(--blush); }
.chip-dark:hover, .chip-dark[aria-pressed="true"] { background: var(--blush); color: var(--navy); border-color: var(--blush); }
.cfg-sun { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--blush); }
.cfg-sun input { width: 110px; accent-color: var(--carmine); }
.cfg-backdrop select { border: 2px solid var(--navy-line); border-radius: var(--radius-sm); background: transparent; color: var(--blush); font: 600 13px var(--font-body); padding: 5px 8px; }
.cfg-backdrop select option { color: var(--navy); }
.cfg-section-view { background: var(--white); color: var(--navy); border-radius: 12px; padding: 14px 16px; }
.cfg-section-view svg { width: 100%; max-width: 460px; height: auto; display: block; margin: 0 auto; }
.cfg-section-note { font-size: 13px; color: var(--ink-2); margin: 8px 0 0; }
.cfg-actions .js-ar { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.cfg-actions .js-ar[hidden] { display: none; }
.cfg-actions-row { flex-wrap: wrap; }
.cfg-saved { margin-top: 36px; border-top: 2px solid var(--blush-line); padding-top: 28px; }
.cfg-saved-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.cfg-saved-head h2 { display: flex; align-items: center; gap: 10px; }
.cfg-saved-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.cfg-saved-item { border: 1px solid var(--blush-line); border-radius: 14px; overflow: hidden; background: var(--white); display: grid; grid-template-columns: 120px minmax(0, 1fr); }
.cfg-saved-thumb { background: var(--navy); padding: 10px; display: grid; place-items: center; }
.cfg-saved-thumb svg { width: 100%; height: auto; max-height: 120px; }
.cfg-saved-info { padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.cfg-saved-info > span { color: var(--ink-2); font-size: 13px; }
.cfg-saved-actions { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; margin-top: auto; }
.cfg-saved-actions .check { font-size: 13px; }
.cfg-compare-box { margin-top: 18px; }
.cfg-compare th { white-space: nowrap; }
.cfg-compare td { font-size: 14px; }
.cfg-compare td small { display: block; color: var(--ink-2); font-size: 12px; font-weight: 400; }
.cfg-compare .fact-vakken { margin: 0; padding-left: 18px; }
@media (max-width: 700px) { .cfg-3d-tools { display: none; } .cfg-saved-item { grid-template-columns: 1fr; } .cfg-saved-thumb svg { max-height: 90px; } }

/* ==========================================================================
   Offerte: handtekening en varianten
   ========================================================================== */
.sign { gap: 6px; }
.sign-pad { display: block; width: 100%; height: 150px; border: 2px dashed var(--blush-line); border-radius: var(--radius-sm); background: var(--white); touch-action: none; cursor: crosshair; }
.sign.has-sign .sign-pad { border-style: solid; border-color: var(--navy); }
.sign-img { display: block; max-width: 260px; max-height: 90px; margin-top: 8px; border-bottom: 1px solid var(--navy); }
.inv-sign { display: block; max-width: 220px; max-height: 70px; margin-top: 6px; }
.quote-variants .choice span { display: flex; flex-direction: column; gap: 2px; }
.quote-variants .choice small { color: var(--ink-2); font-weight: 500; }
.inv-variant { margin-top: 14px; }
.inv-variant thead th:first-child { color: var(--carmine); }
.inv-variant-total td { font-weight: 700; border-top: 2px solid var(--navy); }
.inv-variant-intro { font-size: 12px; color: var(--ink-2); margin: 10px 0 0; }
.inv-editor select[data-variant] { min-width: 96px; }

/* ==========================================================================
   Aannemersportaal: sjablonen, CSV-import, prijsafspraak; voortgang met datums
   ========================================================================== */
.elements-tools { margin-top: 14px; }
.elements-tools summary { cursor: pointer; list-style: none; }
.elements-tools summary::before { content: '+ '; }
.elements-tools[open] summary::before { content: '– '; }
.elements-tools-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; margin-top: 14px; padding: 16px; border: 1px solid var(--blush-line); border-radius: 12px; background: #fbf8f7; }
.progress li small { font-weight: 400; font-size: 12px; color: var(--ink-2); }

/* ==========================================================================
   Inmeet-app, projectfoto's, planbord en verkooptrechter
   ========================================================================== */
.inmeten-maten { display: grid; grid-template-columns: 1fr 1fr 80px; gap: 12px; }
.inmeten-maten input { font-size: 20px; font-weight: 600; }
.sketch-pad { height: 220px; }
.inmeten-offline { background: #fff1d6; color: #7a4b00; padding: 10px 14px; border-radius: var(--radius-sm); margin-bottom: 16px; font-size: 14px; }
.metingen { list-style: none; margin: 0 0 14px; padding: 0; }
.metingen-room { font: 700 13px var(--font-head); letter-spacing: 1px; text-transform: uppercase; color: var(--carmine); padding: 14px 0 6px; }
.meting { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px 14px; align-items: start; padding: 10px 0; border-bottom: 1px solid var(--blush-line); font-size: 15px; }
.meting-main { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.meting-main .meta { flex-basis: 100%; }
.meting-maat { font-weight: 600; }
.meting-schets { width: 120px; height: auto; border: 1px solid var(--blush-line); border-radius: 6px; background: var(--white); }
.thumb { width: 56px; height: 42px; object-fit: cover; border-radius: 6px; float: left; margin-right: 10px; }
.funnel { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 6px; }
.funnel li a { display: grid; grid-template-columns: 150px minmax(0, 1fr) 70px 48px; gap: 10px; align-items: center; text-decoration: none; color: var(--navy); font-size: 14px; }
.funnel-bar { height: 22px; border-radius: 4px; background: linear-gradient(90deg, var(--carmine), #e0527f); width: var(--w); min-width: 4px; }
.funnel li:first-child .funnel-bar { background: var(--navy); }
.funnel strong { text-align: right; font: 800 16px var(--font-head); }
.funnel-pct { font-size: 12px; color: var(--ink-2); text-align: right; }
.board { display: grid; grid-template-columns: 56px repeat(7, minmax(0, 1fr)); gap: 6px; margin-bottom: 14px; user-select: none; -webkit-user-select: none; }
.board-hours { display: flex; flex-direction: column; }
.board-hours-head { height: 64px; }
.board-hour { height: 0; flex: 1 1 0; font-size: 11px; color: var(--ink-2); line-height: 1; transform: translateY(-6px); }
.board-day { display: flex; flex-direction: column; border: 1px solid var(--blush-line); border-radius: 12px; background: var(--white); min-width: 0; }
.board-day.is-today { border-color: var(--carmine); box-shadow: inset 0 3px 0 var(--carmine); }
.board-day.is-weekend { background: #fafbfc; }
.board-day-head { height: 64px; padding: 8px; display: flex; flex-direction: column; gap: 2px; font-size: 13px; color: var(--ink-2); overflow: hidden; }
.board-day-head strong { font: 800 18px var(--font-head); color: var(--navy); }
.board-route { font-size: 12px; }
.board-allday { display: block; font-size: 11px; padding: 2px 6px; border-left: 3px solid var(--pacific); background: var(--glass); border-radius: 4px; color: var(--navy); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.board-col { position: relative; flex: 1; min-height: 560px; display: flex; flex-direction: column; border-top: 1px solid var(--blush-line); }
.board-line { flex: 1 1 0; border-bottom: 1px dashed #eee5e0; }
.board-item { position: absolute; left: 4px; right: 4px; top: var(--top); height: var(--height); min-height: 28px; padding: 4px 6px; border-left: 4px solid var(--pacific); border-radius: 6px; background: var(--glass); color: var(--navy); text-decoration: none; font-size: 12px; line-height: 1.25; overflow: hidden; cursor: grab; touch-action: none; box-shadow: 0 1px 2px rgba(8, 28, 47, .08); }
.board-item .agenda-time { font-size: 11px; }
.board-item .agenda-meta { font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.board-item.is-pending { border-left-style: dashed; background: #fff8ec; }
.board-item.is-dragging { opacity: .85; z-index: 5; box-shadow: 0 10px 24px rgba(8, 28, 47, .25); cursor: grabbing; }
@media (max-width: 900px) { .board { grid-template-columns: 40px repeat(7, minmax(120px, 1fr)); overflow-x: auto; } .funnel li a { grid-template-columns: 110px minmax(0, 1fr) 60px 44px; } .inmeten-maten { grid-template-columns: 1fr 1fr; } }

/* ==========================================================================
   Configurator: uw gevel (eigen foto, ontwerp in perspectief)
   ========================================================================== */
.cfg-facade { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.cfg-facade-stage { position: relative; border-radius: 12px; overflow: hidden; background: #000; align-self: center; max-width: 100%; touch-action: none; }
.cfg-facade-stage img { display: block; max-width: 100%; max-height: min(58vh, 560px); width: auto; height: auto; }
.cfg-facade-overlay { position: absolute; left: 0; top: 0; transform-origin: 0 0; pointer-events: auto; cursor: move; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .45)); }
.cfg-facade-overlay svg { display: block; width: 100%; height: 100%; }
.cfg-facade-handle { position: absolute; width: 24px; height: 24px; margin: -12px 0 0 -12px; border-radius: 50%; border: 3px solid var(--white); background: var(--carmine); cursor: grab; padding: 0; touch-action: none; box-shadow: 0 2px 8px rgba(0, 0, 0, .4); }
.cfg-facade-handle:focus-visible { outline: 3px solid var(--pacific); outline-offset: 2px; }
.cfg-facade-empty { color: var(--blush); font-size: 15px; max-width: 520px; margin: 24px auto; text-align: center; }
.cfg-facade-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; color: var(--muted); }
.cfg-facade-bar .form-note { color: var(--muted); }
.cfg-facade-pick { position: relative; overflow: hidden; cursor: pointer; }
.cfg-facade-pick input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.cfg-facade-pick:focus-within { outline: 3px solid var(--pacific); outline-offset: 2px; }
.cfg-drawing[hidden] { display: none; }

/* ==========================================================================
   Leads, oplevering, betaal-QR, medewerkers in agenda/planbord
   ========================================================================== */
.leads { list-style: none; margin: 0; padding: 0; }
/* .lead-item, niet .lead: die klasse is de introtekst in de kop van elke publieke pagina */
.lead-item { border-bottom: 1px solid var(--blush-line); }
.lead-item summary { display: flex; flex-direction: column; gap: 2px; padding: 12px 0; cursor: pointer; list-style: none; }
.lead-item summary::-webkit-details-marker { display: none; }
.lead-item.is-new summary strong { color: var(--carmine); }
.lead-who { display: flex; align-items: center; gap: 10px; font-size: 16px; }
.lead-body { padding: 4px 0 18px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 360px); gap: 20px; }
.lead-designs { margin: 0 0 12px; padding-left: 18px; font-size: 14px; color: var(--ink-2); grid-column: 1; }
.lead-form { display: flex; flex-direction: column; gap: 10px; }
@media (max-width: 760px) { .lead-body { grid-template-columns: 1fr; } }
.check-row { border: 0; padding: 0; margin: 0; display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; border-bottom: 1px solid var(--blush-line); padding-bottom: 10px; }
.check-row legend { float: left; font-size: 15px; font-weight: 500; padding: 0; }
.inv-pay.has-qr { flex-direction: row; justify-content: space-between; align-items: center; gap: 16px; }
.inv-qr { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 10px; text-align: center; max-width: 120px; color: var(--ink-2); }
.inv-qr svg { width: 96px; height: 96px; }
.paid-report summary { list-style: none; }
.paid-report form { margin-top: 8px; min-width: 220px; }
.agenda-wie { display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: 10px; font-size: 11px; font-weight: 700; background: var(--navy); color: var(--white); vertical-align: middle; }
.agenda-wie.is-wie-1 { background: #0b5f8a; } .agenda-wie.is-wie-2 { background: #8a3a0b; } .agenda-wie.is-wie-3 { background: #2e6b2e; }
.agenda-wie.is-wie-4 { background: #6b2e6b; } .agenda-wie.is-wie-5 { background: #8a6a0b; } .agenda-wie.is-wie-6 { background: #0b8a7a; }
.board-item .agenda-wie { margin: 2px 0 0; }
.board-item.is-wie-1 { border-left-color: #0b5f8a; } .board-item.is-wie-2 { border-left-color: #8a3a0b; } .board-item.is-wie-3 { border-left-color: #2e6b2e; }
.board-item.is-wie-4 { border-left-color: #6b2e6b; } .board-item.is-wie-5 { border-left-color: #8a6a0b; } .board-item.is-wie-6 { border-left-color: #0b8a7a; }
.board-who { margin-left: auto; }
.board-who .field { margin: 0; }
.board-who select { min-height: 40px; padding: 0 10px; }

/* Algemene voorwaarden */
.terms-list { padding-left: 0; list-style: none; counter-reset: artikel; display: grid; gap: 22px; max-width: 760px; }
.terms-list li { counter-increment: artikel; }
.terms-list h2 { font-size: 20px; margin-bottom: 6px; }
.terms-list h2::before { content: 'Artikel ' counter(artikel) ' · '; color: var(--carmine); }

.timeline .is-internal { padding: 14px 18px; border-radius: 12px; background: #fff8ec; border-left: 4px solid #d98e04; }

/* Prijslijst en artikelkiezer */
.price-type { border: 0; border-top: 1px solid var(--blush-line); padding: 16px 0 6px; margin: 0; }
.price-type:first-of-type { border-top: 0; padding-top: 0; }
.price-type legend { font: 800 17px var(--font-head); padding: 0; margin-bottom: 10px; }
.price-type .inv-form-grid { grid-template-columns: repeat(auto-fit, minmax(200px, 280px)); }
.price-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px 16px; margin: 10px 0 14px; }
.price-systems summary { cursor: pointer; }
.price-articles input, .price-articles select { width: 100%; }
.price-articles td:nth-child(1) { width: 22%; } .price-articles td:nth-child(2) { width: 34%; }
.inv-add { align-items: center; margin-top: 10px; }
.inv-article { margin: 0; }
.inv-article select { min-height: 40px; padding: 0 10px; font: 600 14px var(--font-body); }
.price-systems { margin: 8px 0 14px; }

/* ==========================================================================
   Beheer als webapp: schil met zijmenu, topbalk, compacte opmaak en donker thema
   (includes/admin-shell.php; het klantenportaal en de publieke site gebruiken dit niet)
   ========================================================================== */
body.admin { background: #f6f2ef; font-size: 16px; }
.adm { --side: 248px; display: grid; grid-template-columns: var(--side) minmax(0, 1fr); min-height: 100vh; min-height: 100dvh; }
.adm-side { position: sticky; top: 0; align-self: start; height: 100vh; height: 100dvh; display: flex; flex-direction: column; background: var(--navy); color: var(--blush); padding: 18px 12px 14px; overflow-y: auto; scrollbar-width: thin; z-index: 40; }
.adm-brand { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 2px 10px 16px; text-decoration: none; }
.adm-brand .logo-light { color: var(--white); font-size: 21px; }
.adm-brand-tag { font-size: 11px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: var(--pink); }
.adm-nav { display: flex; flex-direction: column; gap: 1px; margin: 0; overflow: visible; }
.adm-group { margin: 16px 0 4px; padding: 0 10px; font-size: 11px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: var(--muted); }
.adm-nav a { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; color: var(--blush); font-size: 15px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.adm-nav a svg { flex: none; opacity: .8; }
.adm-nav a span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.adm-nav a:hover { background: var(--navy-2); color: var(--white); }
.adm-nav a[aria-current="page"] { background: var(--white); color: var(--navy); }
.adm-nav a[aria-current="page"] svg { opacity: 1; color: var(--carmine); }
.adm-count { flex: none; min-width: 20px; padding: 1px 6px; border-radius: 10px; background: var(--carmine); color: #fff; font: 700 12px/18px var(--font-body); text-align: center; }
.adm-side-foot { margin-top: auto; padding: 16px 10px 0; display: flex; flex-direction: column; gap: 8px; font-size: 14px; }
.adm-side-foot a { color: var(--muted); text-decoration: none; }
.adm-side-foot a:hover { color: var(--white); }
.adm-theme { align-self: flex-start; border: 1px solid var(--navy-line); border-radius: 999px; background: transparent; color: var(--muted); font: 600 13px var(--font-body); padding: 5px 12px; cursor: pointer; }
.adm-theme:hover, .adm-theme[aria-pressed="true"] { color: var(--white); border-color: var(--muted); }
.adm-logout { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 14px; }
.adm-logout span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm-logout button { min-height: 34px; padding: 0 12px; border: 1px solid var(--navy-line); border-radius: var(--radius-sm); background: transparent; color: var(--blush); font: 600 13px var(--font-body); cursor: pointer; }
.adm-logout button:hover { border-color: var(--blush); color: var(--white); }
.adm-main { min-width: 0; display: flex; flex-direction: column; }
.adm-top { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 12px; padding: 10px clamp(16px, 2.4vw, 32px); background: rgba(246, 242, 239, .92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--blush-line); }
.adm-menu { display: none; width: 40px; height: 40px; border: 0; border-radius: 8px; background: transparent; color: var(--navy); cursor: pointer; align-items: center; justify-content: center; }
.adm-search { flex: 1; max-width: 520px; display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 12px; border: 1px solid var(--blush-line); border-radius: 10px; background: var(--white); color: var(--ink-2); font: 500 15px var(--font-body); cursor: text; text-align: left; }
.adm-search span { flex: 1; }
.adm-search kbd { font: 600 11px var(--font-body); padding: 2px 6px; border: 1px solid var(--blush-line); border-radius: 5px; background: #f6f2ef; color: var(--ink-2); }
.adm-search:hover, .adm-search:focus-visible { border-color: var(--navy); }
.adm-new { position: relative; margin-left: auto; }
.adm-new summary { list-style: none; cursor: pointer; }
.adm-new summary::-webkit-details-marker { display: none; }
.adm-new-menu { position: absolute; right: 0; top: calc(100% + 6px); min-width: 200px; padding: 6px; border: 1px solid var(--blush-line); border-radius: 12px; background: var(--white); box-shadow: 0 16px 40px rgba(8, 28, 47, .18); display: grid; z-index: 5; }
.adm-new-menu a { padding: 9px 12px; border-radius: 8px; color: var(--navy); font-weight: 600; font-size: 15px; text-decoration: none; }
.adm-new-menu a:hover, .adm-new-menu a:focus-visible { background: var(--blush); }
.adm-user { flex: none; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; background: var(--navy); color: var(--white); font: 700 15px var(--font-head); text-decoration: none; }
.adm-offline { margin: 0; padding: 8px clamp(16px, 2.4vw, 32px); background: #fff1d6; color: #7a4b00; font-size: 14px; }
.adm-scrim { position: fixed; inset: 0; z-index: 35; background: rgba(8, 28, 47, .55); }
.adm-scrim[hidden] { display: none; }
/* Inhoud: compacter dan de website */
.adm .wrap { max-width: 1400px; padding-left: clamp(16px, 2.4vw, 32px); padding-right: clamp(16px, 2.4vw, 32px); }
.adm .portal { padding: 22px 0 64px; }
.adm .portal-head { margin-bottom: 18px; gap: 12px 20px; }
.adm .portal-head h1 { font-size: clamp(24px, 2.4vw, 32px); line-height: 1.15; }
.adm .portal-head .hint { font-size: 15px; margin-top: 4px; }
.adm .panel { padding: clamp(16px, 1.8vw, 24px); border-radius: 14px; }
.adm .panel-title { font-size: 17px; margin-bottom: 12px; }
.adm .stats { gap: 12px; margin-bottom: 18px; }
.adm .stat { padding: 14px 16px; border-radius: 12px; font-size: 14px; background: var(--white); border: 1px solid var(--blush-line); }
.adm .stat strong { font-size: 26px; }
.adm .stat-alert { background: var(--blush); border-color: transparent; }
.adm .subtabs { margin-top: 16px; }
.adm .filters { margin-bottom: 16px; gap: 8px; }
.adm .table { font-size: 14.5px; }
.adm .table td { padding: 10px 12px 10px 0; }
.adm .portal-grid { gap: 18px; }
.adm-search-form { margin: 0 0 18px; }
.adm-search-form input { border: 1px solid var(--blush-line); background: var(--white); }
@media (max-width: 980px) {
  .adm { grid-template-columns: minmax(0, 1fr); }
  .adm-side { position: fixed; left: 0; top: 0; bottom: 0; width: min(84vw, 300px); transform: translateX(-102%); transition: transform .22s ease; box-shadow: 0 0 60px rgba(0, 0, 0, .4); }
  .adm.is-side-open .adm-side { transform: none; }
  .adm-menu { display: inline-flex; }
  .adm-search kbd { display: none; }
}
@media (prefers-reduced-motion: reduce) { .adm-side { transition: none; } }
/* In de geïnstalleerde app op de telefoon: tabbalk onderin */
@media (max-width: 760px) {
  .is-app .adm { padding-bottom: calc(60px + env(safe-area-inset-bottom)); }
  .app-nav a { position: relative; }
  .app-nav .adm-count { position: absolute; top: 6px; left: calc(50% + 6px); }
}
@media print { .adm { display: block; } .adm-side, .adm-top, .adm-offline, .adm-scrim { display: none !important; } }
/* Donker thema ("atelier"): de inhoud wordt omgekeerd en teruggedraaid naar het juiste kleurvlak; foto's, tekeningen en documenten blijven zoals ze zijn */
.thema-donker body.admin { background: #081c2f; }
.thema-donker .adm-main > *:not(.app-nav):not(.app-more):not(.app-hint) { filter: invert(1) hue-rotate(180deg); }
.thema-donker .adm-main { --white: #c4dcf2; background: #081c2f; }
.thema-donker .adm-top { background: rgba(214, 232, 247, .94); }
.thema-donker .adm .stat, .thema-donker .adm-search { background: var(--white); }
.thema-donker .adm-main img, .thema-donker .adm-main video, .thema-donker .adm-main canvas, .thema-donker .adm-main .invoice-paper, .thema-donker .adm-main .design-svg,
.thema-donker .adm-main .mk-preview, .thema-donker .adm-main .board-item, .thema-donker .adm-main .agenda-item, .thema-donker .adm-main .cfg-saved-thumb { filter: invert(1) hue-rotate(180deg); }
.thema-donker .adm-main .invoice-paper img, .thema-donker .adm-main .invoice-paper .design-svg { filter: none; }

/* Vandaag: inbox met acties, taken en de dag als lijn */
.vandaag-grid { grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr); }
.panel-title .pill { vertical-align: middle; margin-left: 6px; font-family: var(--font-body); }
.inbox { list-style: none; margin: 0 0 6px; padding: 0; }
.inbox li { display: grid; grid-template-columns: 112px minmax(0, 1fr) auto; gap: 10px 14px; align-items: center; padding: 11px 0; border-bottom: 1px solid var(--blush-line); }
.inbox li:last-child { border-bottom: 0; }
.inbox li > .pill { justify-self: start; }
.inbox-main { color: var(--navy); text-decoration: none; min-width: 0; }
.inbox-main strong { display: block; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inbox-main:hover strong { color: var(--carmine); }
.inbox-acts { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; justify-content: flex-end; }
.inbox-act { display: inline; }
.inbox .btn-sm { min-height: 36px; padding: 0 12px; font-size: 14px; }
.tasks { list-style: none; margin: 0 0 12px; padding: 0; }
.tasks li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 9px 0; border-bottom: 1px solid var(--blush-line); font-size: 15px; }
.tasks li.is-late .meta { color: var(--carmine-dark); font-weight: 600; }
.task-check { width: 22px; height: 22px; margin-top: 1px; border: 2px solid var(--navy); border-radius: 6px; background: var(--white); cursor: pointer; padding: 0; }
.task-check:hover, .task-check:focus-visible { background: var(--carmine); border-color: var(--carmine); }
.task-new { display: grid; grid-template-columns: 160px minmax(120px, 200px) auto 1fr; gap: 8px; align-items: center; }
.task-new .field:first-of-type { grid-column: 1 / -1; }
.task-new button { justify-self: start; }
.task-new .field { margin: 0; }
.task-new input, .task-new select { min-height: 40px; }
.warn-box summary { cursor: pointer; list-style: none; margin-bottom: 0; }
.warn-box[open] summary { margin-bottom: 10px; }
.warn-box summary::-webkit-details-marker { display: none; }
.day-line li.is-past { opacity: .5; }
@media (max-width: 1100px) { .vandaag-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 700px) { .inbox li { grid-template-columns: minmax(0, 1fr); gap: 6px; } .inbox-acts { justify-content: flex-start; } .task-new { grid-template-columns: minmax(0, 1fr) auto; } }

/* Pijplijn-bord en weergaveschakelaar */
.segmented a.seg { display: block; padding: 7px 14px; border-radius: 4px; color: var(--navy); font: 600 14px var(--font-body); text-decoration: none; }
.segmented a.seg.is-on { background: var(--navy); color: var(--white); }
.pipe-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; margin-bottom: 12px; }
.pipe { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(210px, 1fr); gap: 10px; overflow-x: auto; padding-bottom: 12px; align-items: start; }
.pipe-col { background: #efe9e5; border-radius: 12px; padding: 10px; min-height: 160px; }
.pipe-col.is-over { outline: 2px dashed var(--carmine); outline-offset: -2px; }
.pipe-col h2 { font: 700 13px var(--font-head); letter-spacing: .5px; text-transform: uppercase; color: var(--ink-2); margin: 2px 4px 10px; display: flex; justify-content: space-between; }
.pipe-cards { display: grid; gap: 8px; min-height: 60px; }
.pipe-card { background: var(--white); border: 1px solid var(--blush-line); border-radius: 10px; padding: 10px 12px; font-size: 14px; cursor: grab; display: grid; gap: 4px; box-shadow: 0 1px 2px rgba(8, 28, 47, .05); }
.pipe-card.is-dragging { opacity: .5; }
.pipe-card a { color: var(--navy); text-decoration: none; }
.pipe-card a:hover strong { color: var(--carmine); }
.pipe-next { color: var(--carmine-dark); font-weight: 600; }
.pipe-move select { width: 100%; margin-top: 4px; min-height: 30px; font: 500 12px var(--font-body); border: 1px solid var(--blush-line); border-radius: 6px; background: var(--white); color: var(--ink-2); padding: 0 6px; }

/* Dossier: stappen, volgende stap en tabbladen */
.dossier-steps { margin-bottom: 14px; }
.dossier-next { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px; padding: 12px 16px; margin-bottom: 18px; border-radius: 12px; background: var(--white); border: 1px solid var(--blush-line); border-left: 4px solid var(--carmine); }
.dossier-next p { margin: 0; font-size: 15px; }
.dossier-next strong { display: block; font: 700 12px var(--font-head); letter-spacing: 1px; text-transform: uppercase; color: var(--carmine); }
.dossier-next form { display: inline; }
.dossier-tabs { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; border-bottom: 2px solid var(--blush-line); margin-bottom: 18px; }
.dossier-tabs a { flex: none; padding: 9px 14px; margin-bottom: -2px; border-bottom: 2px solid transparent; color: var(--ink-2); font-weight: 600; font-size: 15px; text-decoration: none; white-space: nowrap; }
.dossier-tabs a:hover { color: var(--navy); }
.dossier-tabs a[aria-current] { color: var(--navy); border-bottom-color: var(--carmine); }
.dossier-pane { margin-bottom: 18px; display: grid; gap: 18px; scroll-margin-top: 70px; }
.has-tabs .dossier-pane:not(.is-active) { display: none; }
.dossier .panel { scroll-margin-top: 70px; }
.task-check.is-on { background: var(--navy); border-color: var(--navy); }
.tasks li.is-done > div { text-decoration: line-through; color: var(--ink-2); }

/* Bank: bijschrijving koppelen */
.bank-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.bank-row select { min-height: 38px; max-width: 320px; padding: 0 8px; border: 1px solid var(--blush-line); border-radius: 8px; font: 500 14px var(--font-body); background: var(--white); color: var(--navy); }
.adm-main > * { min-width: 0; max-width: 100%; }
.adm .subtabs { flex-wrap: wrap; overflow-x: visible; }

/* ---------- Uitbreidingen per systeem (okt 2026) ---------- */
/* Werkgebied en plaatspagina's */
.place-list, .place-products { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.place-list a, .place-products a { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border: 1px solid var(--blush-line); border-radius: 999px; background: var(--white); color: var(--navy); font-weight: 600; text-decoration: none; }
.place-list a:hover, .place-products a:hover, .place-list a:focus-visible, .place-products a:focus-visible { border-color: var(--carmine); color: var(--carmine); }
.place-list-big a { padding: 14px 20px; font-size: 17px; }
.place-list-big + .muted-dark { margin-top: 24px; }
/* Leads: toevoegen en terugbellen */
.lead-new > summary { cursor: pointer; list-style: none; }
.lead-new > summary::-webkit-details-marker { display: none; }
.lead-new[open] > summary { margin-bottom: 16px; }
.lead-new:not([open]) { display: none; }
.lead-new:target { display: block; }
.meta .late { color: var(--carmine); font-weight: 600; }
.lead-kind { max-width: 150px; margin: 0; }
/* Facturen: alle herinneren; prijslijst: alles verhogen */
.remind-all { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.remind-all .form-note { margin: 0; flex: 1 1 320px; }
.price-raise { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.price-raise .field { max-width: 160px; margin: 0; }
.book-pack .btn-row { margin: 12px 0 0; }
/* Service: garantie-indicatie */
.warranty { margin: 0 0 16px; font-size: 15px; color: var(--ink-2); }
/* Inmeetrapport en foto's bij de oplevering */
.measure-report .measure-extra td { border-top: 0; padding-top: 0; color: var(--ink-2); font-size: 12px; }
.measure-images { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.measure-images img { width: 150px; height: 110px; object-fit: cover; border: 1px solid var(--blush-line); border-radius: 6px; background: var(--white); }
.measure-report .measure-images img[src^="data:"] { object-fit: contain; }
.delivery-photos { margin: 18px 0; }
@media print { .measure-extra, .measure-images img { break-inside: avoid; } }
/* Portaal: andere datum vragen voor een afspraak */
.panel-appts .appt-list li { flex-wrap: wrap; }
.appt-move { flex: 1 1 100%; font-size: 14px; margin: 0; }
.appt-move summary { cursor: pointer; color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; }
.appt-move[open] summary { margin-bottom: 10px; }
/* Knoppen onder de introtekst in een donkere paginakop (plaatspagina's) */
.page-hero .lead + .btn-row { margin-top: 28px; }

/* Video naast een tekstblok (werkwijze, projecten) */
.why-player { width: 100%; }

/* Spelers met een echte video: hoogte volgt uit de 16:9-verhouding, niet uit min-height (anders te breed op mobiel en in de hero) */
.hero-video .video-player, .video-player.video-feature, .video-player.why-player { min-height: 0; }
.hero-video .video-label { left: 16px; top: 16px; padding: 6px 12px; border-radius: 999px; background: rgba(8, 28, 47, .78); }

/* ---------- Configurator: doorsneden (technische weergave), profieldetail en opengewerkt 3D-model ---------- */
.cfg-drawing.is-tech svg { max-height: min(72vh, 700px); overflow: visible; }
.cfg-drawing.is-tech .vak-hit[aria-pressed="true"] { fill: rgba(255, 79, 134, .1); }
.cfg-drawing.is-tech .vak-hit:hover, .cfg-drawing.is-tech .vak-hit:focus-visible { fill: rgba(255, 79, 134, .22); }
.cfg-section-view svg { max-width: 520px; }
.ontwerpblad-tech { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 20px; margin-bottom: 24px; align-items: start; }
.ontwerpblad-tech > :only-child { grid-column: 1 / -1; }
.ontwerpblad-sections svg { max-height: 420px; }
.ontwerpblad-profile { border: 1px solid var(--blush-line); border-radius: 12px; padding: 12px 14px; }
.ontwerpblad-profile svg { width: 100%; height: auto; max-height: 300px; display: block; }
@media (max-width: 760px) { .ontwerpblad-tech { grid-template-columns: 1fr; } }
@media (max-width: 700px) { .cfg-drawing.is-tech svg { max-height: 62vh; } }
@media print {
  .ontwerpblad-tech { grid-template-columns: 1.5fr 1fr; break-inside: avoid; }
  .ontwerpblad-sections svg { max-height: 330px; }
  .ontwerpblad-profile svg { max-height: 240px; }
}
.cfg-sheet-profile { overflow-y: auto; min-height: 0; flex: 1 1 auto; scrollbar-width: thin; }
.cfg-sheet-profile svg { width: 100%; height: auto; display: block; }
.cfg-profile-legend { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 4px; counter-reset: pd; font-size: 14px; font-weight: 600; color: var(--navy); }
.cfg-profile-legend li { counter-increment: pd; display: flex; gap: 8px; align-items: baseline; }
.cfg-profile-legend li::before { content: counter(pd); flex: none; width: 18px; height: 18px; display: grid; place-items: center; background: var(--carmine); color: var(--white); border-radius: 50%; font: 800 11px var(--font-head); }
.cfg-zoom-btn { align-self: flex-start; }
.cfg-zoom { width: min(1180px, 96vw); max-height: 94vh; border: 0; border-radius: var(--radius); padding: clamp(16px, 2.4vw, 28px); color: var(--navy); }
.cfg-zoom::backdrop { background: rgba(8, 28, 47, .72); }
.cfg-zoom-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.cfg-zoom-bar h2 { margin: 0; }
.cfg-zoom-body { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(240px, 1fr); gap: 20px; align-items: start; margin-bottom: 12px; }
.cfg-zoom-drawing { background-color: var(--navy); background-image: linear-gradient(rgba(255, 232, 225, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 232, 225, .045) 1px, transparent 1px); background-size: 32px 32px; border-radius: 12px; padding: 16px; }
.cfg-zoom-drawing svg { width: 100%; height: auto; max-height: 68vh; display: block; overflow: visible; }
.cfg-zoom-profile svg { width: 100%; height: auto; max-height: 46vh; display: block; }
@media (max-width: 820px) { .cfg-zoom-body { grid-template-columns: 1fr; } }
.cfg-sheet-profile svg { max-height: 250px; }
.cfg-zoom-bar h2 { font-size: 22px; }
/* Telefoon en tablet: de doorsneden krijgen de hele breedte; het profieldetail staat onder "Vergroten" */
@media (max-width: 1080px) {
  .configurator.is-tech-view .cfg-studio-body { grid-template-columns: 1fr; }
  .configurator.is-tech-view .cfg-sheet { display: none; }
  .configurator.is-tech-view .cfg-drawing svg { max-height: 44vh; }
}
@media print { .ontwerpblad-grid { break-inside: avoid; } }

/* ---------- Online betalen (Mollie) ---------- */
.pay-page .wrap { display: grid; place-items: center; }
.pay-card { width: min(520px, 100%); background: var(--white); border: 1px solid var(--blush-line); border-radius: var(--radius); padding: clamp(22px, 4vw, 36px); display: flex; flex-direction: column; gap: 14px; }
.pay-card h1 { margin: 0; }
.pay-facts { margin: 0; }
.inv-online { font-size: 12px; overflow-wrap: anywhere; }
.steps-list { margin: 0; padding-left: 20px; display: grid; gap: 6px; font-size: 15px; }
.plain-list { margin: 0; padding-left: 18px; display: grid; gap: 8px; font-size: 15px; }

/* ---------- Responsive-correcties (okt 2026) ---------- */
/* 3D: de gevel (baksteen, stucwerk) blijft binnen het tekenvak en loopt niet over de knoppen */
.cfg-drawing.is-3d { overflow: hidden; position: relative; isolation: isolate; }
.cfg-drawing.is-3d svg { overflow: hidden; }
/* Kleine telefoons (≤ 380 px): logo, zoeken, knop en menu passen naast elkaar */
@media (max-width: 380px) {
  .header-inner { gap: 8px; }
  .logo { font-size: 22px; }
  .header-mobile { gap: 4px; }
  .header-mobile .btn-sm { padding-left: 12px; padding-right: 12px; }
  .header-mobile .nav-search { width: 36px; }
}
/* Lange woorden (Geluidsisolatie, Bezpieczeństwo, Monumentengroen) breken af in plaats van afgekapt te worden */
.cfg-facts dt, .swatch-name, .facts dd, .facts dt { overflow-wrap: anywhere; hyphens: auto; }
.swatch-name { word-break: break-word; max-width: 100%; }
.cfg-facts > div { grid-template-columns: minmax(70px, 92px) minmax(0, 1fr); }
/* Portaal: knoppen in lijstjes lopen niet buiten de rij; formulier "Ik heb betaald" binnen de tabelcel */
.files li { flex-wrap: wrap; }
.files li > .btn, .files li > a.btn { flex-shrink: 0; white-space: nowrap; }
.paid-report form { min-width: 0; max-width: 260px; }
.table .actions { white-space: normal; }
.table .actions .paid-report[open] { display: block; }
@media (max-width: 1080px) { .paid-report form { max-width: none; } }
/* Portaal: de 8 stappen van een aanvraag op een telefoon in twee rijen in plaats van zijwaarts scrollen */
@media (max-width: 900px) {
  .progress { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 8px; overflow: visible; }
  .progress li { min-width: 0; overflow-wrap: anywhere; hyphens: auto; }
}
/* Smalle telefoons: label boven de waarde, zodat lange (vertaalde) labels de waarde niet wegdrukken */
@media (max-width: 480px) {
  .facts { grid-template-columns: minmax(0, 1fr); gap: 2px 0; }
  .facts dd { margin-bottom: 8px; }
}
/* 3D + Profieldetail: het detail blijft binnen het donkere vak (desktop: de studio heeft een vaste hoogte) */
@media (min-width: 1081px) { .cfg-studio { overflow: hidden; } }   /* niets loopt meer buiten het donkere vak */
.cfg-zoom.is-profile { width: min(620px, 96vw); }
.cfg-zoom.is-profile .cfg-zoom-body { grid-template-columns: 1fr; }
.cfg-zoom.is-profile .cfg-zoom-profile svg { max-height: 52vh; }
.cfg-zoom.is-profile > .form-note { display: none; }

/* Zakelijk: witte tegels in een donkere sectie */
.section-dark .tile h3, .section-dark .tile p { color: var(--navy); }
.section-dark .tile p { color: var(--ink-3); }

/* Handleiding in het beheer */
.handleiding .panel + .panel { margin-top: 20px; }
.handleiding .table { width: 100%; border-collapse: collapse; font-size: 15px; }
.handleiding .table th, .handleiding .table td { text-align: left; vertical-align: top; padding: 8px 10px; border-bottom: 1px solid var(--blush-line); }
.handleiding .table th { font-size: 13px; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); }
.handleiding ol, .handleiding ul { padding-left: 22px; line-height: 1.6; color: var(--ink-3); }
.handleiding .checklist { list-style: none; padding-left: 0; }
.handleiding .checklist li { padding-left: 30px; position: relative; margin: 6px 0; }
.handleiding .checklist li::before { content: ''; position: absolute; left: 0; top: 4px; width: 18px; height: 18px; border: 2px solid var(--navy); border-radius: 4px; }
.toc { padding-left: 20px; line-height: 1.8; }
@media print { .adm-header, .app-nav, .subtabs, .portal-side, .site-footer, .btn-row { display: none !important; } .handleiding .panel { border: 0; padding: 0 0 16px; break-inside: avoid; } }

/* Welkomstscherm beheer (alleen Roberto, één keer per sessie) — puur CSS, ±3,4 s */
.adm-splash { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; overflow: hidden; background: var(--navy); color: var(--white); pointer-events: none; isolation: isolate; clip-path: inset(0 0 0 0); animation: adm-splash-out .75s cubic-bezier(.7,0,.3,1) 3s forwards; }
.adm-splash-grid { position: absolute; inset: -20%; background-image: linear-gradient(var(--navy-line) 1px, transparent 1px), linear-gradient(90deg, var(--navy-line) 1px, transparent 1px); background-size: 72px 72px; opacity: 0; transform: perspective(900px) rotateX(55deg) translateY(40%); animation: adm-splash-grid 2.6s ease-out .1s both; mask-image: radial-gradient(ellipse 60% 60% at 50% 60%, #000 20%, transparent 70%); -webkit-mask-image: radial-gradient(ellipse 60% 60% at 50% 60%, #000 20%, transparent 70%); }
.adm-splash-glow { position: absolute; width: 70vmax; height: 70vmax; left: 50%; top: 50%; border-radius: 50%; background: radial-gradient(circle, rgba(196,0,67,.55) 0%, rgba(196,0,67,.18) 30%, transparent 62%); transform: translate(-50%, -50%) scale(.2); animation: adm-splash-glow 2.4s cubic-bezier(.2,.7,.2,1) .15s both; filter: blur(2px); }
.adm-splash-beam { position: absolute; top: -20%; bottom: -20%; left: -30%; width: 18%; background: linear-gradient(90deg, transparent, rgba(255,232,225,.35) 45%, rgba(255,255,255,.7) 50%, rgba(255,232,225,.35) 55%, transparent); transform: skewX(-18deg) translateX(0); animation: adm-splash-beam 1.1s cubic-bezier(.6,0,.2,1) .9s both; mix-blend-mode: screen; }
.adm-splash-inner { position: relative; display: grid; justify-items: center; gap: 14px; text-align: center; padding: 0 20px; }
.adm-splash-logo.logo-light { color: var(--white); font-size: clamp(44px, 7vw, 76px); display: inline-flex; align-items: center; gap: .06em; animation: adm-splash-logo 1s cubic-bezier(.2,.8,.2,1) .2s both; }
.adm-splash-w, .adm-splash-rest { display: inline-block; animation: adm-splash-letters .9s cubic-bezier(.2,.8,.2,1) .35s both; }
.adm-splash-rest { animation-name: adm-splash-letters-r; }
.adm-splash-mark { display: inline-flex; animation: adm-splash-mark 1.1s cubic-bezier(.3,1.6,.4,1) .25s both; filter: drop-shadow(0 0 18px rgba(196,0,67,.8)); }
.adm-splash-hi { margin: 10px 0 0; font-family: var(--font-head); font-weight: 800; font-size: clamp(26px, 4.4vw, 50px); line-height: 1.1; letter-spacing: -.01em; color: var(--blush); }
.adm-splash-welkom { display: inline-block; opacity: 0; animation: adm-splash-up .7s cubic-bezier(.2,.8,.2,1) 1.15s both; }
.adm-splash-patron { display: inline-block; font-weight: 800; background: linear-gradient(100deg, #fff 0%, #fff 35%, var(--pink) 50%, #fff 65%, #fff 100%); background-size: 260% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; animation: adm-splash-pop .8s cubic-bezier(.2,1.4,.3,1) 1.4s both, adm-splash-shine 1.4s ease-in-out 2s both; text-shadow: none; }
.adm-splash-line { display: block; height: 3px; width: 0; background: linear-gradient(90deg, transparent, var(--carmine) 20%, var(--pink) 50%, var(--carmine) 80%, transparent); animation: adm-splash-line .8s cubic-bezier(.2,.8,.2,1) 1.9s both; }
.adm-splash-sub { margin: 0; font-size: 14px; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); opacity: 0; animation: adm-splash-up .7s ease 2.15s both; }
@keyframes adm-splash-grid { 0% { opacity: 0; transform: perspective(900px) rotateX(55deg) translateY(40%); } 35% { opacity: .9; } 100% { opacity: .35; transform: perspective(900px) rotateX(55deg) translateY(0); } }
@keyframes adm-splash-glow { from { transform: translate(-50%, -50%) scale(.2); opacity: 0; } 40% { opacity: 1; } to { transform: translate(-50%, -50%) scale(1); opacity: .9; } }
@keyframes adm-splash-beam { from { transform: skewX(-18deg) translateX(0); } to { transform: skewX(-18deg) translateX(760%); } }
@keyframes adm-splash-logo { from { opacity: 0; transform: scale(.7); filter: blur(14px); } to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes adm-splash-letters { from { transform: translateX(28px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes adm-splash-letters-r { from { transform: translateX(-28px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes adm-splash-mark { from { transform: rotate(-200deg) scale(0); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes adm-splash-up { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes adm-splash-pop { from { opacity: 0; transform: scale(.4) translateY(10px); filter: blur(8px); } to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes adm-splash-shine { from { background-position: 120% 0; } to { background-position: -40% 0; } }
@keyframes adm-splash-line { from { width: 0; } to { width: min(260px, 60vw); } }
@keyframes adm-splash-out { from { clip-path: inset(0 0 0 0); } to { clip-path: inset(0 0 100% 0); visibility: hidden; } }
@media (prefers-reduced-motion: reduce) { .adm-splash { animation: adm-splash-fade .3s ease 1.6s forwards; } .adm-splash *, .adm-splash *::before { animation: none !important; opacity: 1 !important; transform: none !important; width: 200px; } .adm-splash-beam, .adm-splash-grid { display: none; } }
@keyframes adm-splash-fade { to { opacity: 0; visibility: hidden; } }

/* Knipogen voor El Patrón */
.adm-toast { position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 20px); z-index: 210; padding: 12px 18px; background: var(--navy); color: var(--blush); border: 1px solid var(--navy-line); border-radius: 999px; font-weight: 600; font-size: 15px; box-shadow: 0 10px 30px rgba(8,28,47,.35); opacity: 0; pointer-events: none; transition: opacity .3s, transform .3s; }
.adm-toast.is-on { opacity: 1; transform: translate(-50%, 0); }
.adm-confetti { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 205; pointer-events: none; }
.adm-brand.is-spin .mark { animation: adm-mark-spin .9s cubic-bezier(.3,1.4,.4,1); }
@keyframes adm-mark-spin { to { transform: rotate(360deg); } }
.patron-goud .adm-brand-tag { color: #f3c969; text-shadow: 0 0 10px rgba(243,201,105,.55); }
.patron-goud .adm-brand-tag::after { content: " · Patrón"; }
.patron-goud .adm-brand-tag { white-space: nowrap; }
@media (max-width: 760px) { .adm-toast { bottom: 84px; max-width: calc(100vw - 32px); text-align: center; } }

/* Inloggen: passkey standaard */
.auth-or { display: flex; align-items: center; gap: 12px; margin: 2px 0; color: var(--muted); font-size: 13px; }
.auth-or::before, .auth-or::after { content: ""; flex: 1; height: 1px; background: var(--blush-line); }
.btn-passkey::before { content: ""; display: inline-block; width: 18px; height: 18px; margin-right: 8px; vertical-align: -3px; background: currentColor; -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 8V6a2 2 0 0 1 2-2h2M16 4h2a2 2 0 0 1 2 2v2M20 16v2a2 2 0 0 1-2 2h-2M8 20H6a2 2 0 0 1-2-2v-2"/><path d="M9 9.5v1M15 9.5v1M9.5 15a3.5 3.5 0 0 0 5 0"/></svg>') center/contain no-repeat; mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 8V6a2 2 0 0 1 2-2h2M16 4h2a2 2 0 0 1 2 2v2M20 16v2a2 2 0 0 1-2 2h-2M8 20H6a2 2 0 0 1-2-2v-2"/><path d="M9 9.5v1M15 9.5v1M9.5 15a3.5 3.5 0 0 0 5 0"/></svg>') center/contain no-repeat; }
.panel-nudge { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; border-left: 4px solid var(--pacific); background: var(--glass); margin-bottom: 20px; }
.panel-nudge .btn-row { gap: 14px; align-items: center; }
.adm-side-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.adm-lang { text-decoration: none; }
/* Telefoon: alles netjes in de blokjes */
@media (max-width: 760px) {
  .adm .stat { display: block; }
  .adm .stat strong { display: block; white-space: nowrap; font-size: clamp(19px, 6.2vw, 26px); letter-spacing: -.01em; }
  .adm .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .adm-main .compare-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; min-width: 0; max-width: 100%; }
  .adm-main .inv-meta-row { flex-wrap: wrap; gap: 14px; }
  .adm-main .inv-meta-row > * { min-width: 0; flex: 1 1 100%; }
  .adm-main .panel, .adm-main .card { min-width: 0; overflow-wrap: anywhere; }
  .adm-main .panel-nudge .btn-row { flex-wrap: wrap; }
  .adm-main .portal-head .btn-row { flex-wrap: wrap; }
}
/* Productfoto's */
.gallery-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.gallery-item { margin: 0; }
.gallery-item .gallery-photo, .gallery-item img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); background: var(--blush); }
.gallery-item:nth-child(6n+1) { grid-column: span 2; grid-row: span 2; }
.gallery-item:nth-child(6n+1) img { aspect-ratio: auto; height: 100%; }
.gallery-item figcaption { margin-top: 8px; font-size: 14px; color: var(--ink-2); display: grid; gap: 2px; }
.gallery-item figcaption strong { color: var(--navy); font-size: 15px; }
@media (max-width: 760px) { .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .gallery-item:nth-child(6n+1) { grid-column: span 2; grid-row: auto; } .gallery-item:nth-child(6n+1) img { aspect-ratio: 16 / 10; height: auto; } }
/* Foto's bij Drutex-systemen */
.sys-card-photo { display: block; margin: -18px -20px 6px; border-radius: 6px 6px 0 0; overflow: hidden; background: var(--blush); }
.sys-card-photo img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.sys-hero-photo { border-radius: var(--radius); overflow: hidden; background: var(--navy-2); }
.sys-hero-photo img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
/* Zijmenu op de telefoon: helemaal tot onderaan te scrollen (ook in de app met tabbalk / Safari-balk) */
@media (max-width: 760px) {
  .adm-side { height: 100dvh; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
  .adm-side-foot { padding-bottom: 12px; }
}
/* Mailbox */
.wrap-wide { max-width: 1480px; }
.mailbox { display: grid; grid-template-columns: 200px minmax(280px, 380px) minmax(0, 1fr); gap: 16px; align-items: start; }
.mail-folders { display: flex; flex-direction: column; gap: 6px; position: sticky; top: 76px; }
.mail-account { margin: 6px 0 2px; font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }
.mail-folder { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 8px; text-decoration: none; color: var(--navy); font-weight: 600; font-size: 14px; }
.mail-folder:hover { background: var(--blush); }
.mail-folder[aria-current="page"] { background: var(--navy); color: var(--white); }
.mail-folder[aria-current="page"] .adm-count { background: var(--carmine); }
.mail-settings { margin-top: 10px; font-size: 13px; }
.mail-list { background: var(--white); border: 1px solid var(--blush-line); border-radius: 12px; overflow: hidden; }
.mail-search { display: flex; gap: 8px; padding: 10px; border-bottom: 1px solid var(--blush-line); }
.mail-search input { flex: 1; min-width: 0; }
.mail-tools { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-bottom: 1px solid var(--blush-line); font-size: 13px; flex-wrap: wrap; }
.mail-tools .check { margin: 0; }
.mail-count { margin-left: auto; color: var(--muted); }
.mail-items { list-style: none; margin: 0; padding: 0; max-height: calc(100vh - 230px); overflow-y: auto; }
.mail-item { display: flex; align-items: flex-start; gap: 6px; padding: 8px 8px 8px 10px; border-bottom: 1px solid var(--blush-line); }
.mail-item.is-current { background: var(--blush); }
.mail-check { margin: 0; padding-top: 3px; }
.mail-link { flex: 1; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 8px; text-decoration: none; color: var(--navy); }
.mail-from { font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mail-date { font-size: 12px; color: var(--muted); white-space: nowrap; }
.mail-subject { grid-column: 1 / -1; font-size: 14px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mail-item.is-unread .mail-from, .mail-item.is-unread .mail-subject { color: var(--navy); font-weight: 700; }
.mail-item.is-unread { box-shadow: inset 3px 0 0 var(--carmine); }
.mail-flag { color: var(--carmine); margin-right: 4px; }
.mail-answered { color: var(--pacific); font-size: 12px; }
.mail-empty { padding: 20px; }
.mail-pages { display: flex; justify-content: space-between; gap: 10px; padding: 10px 12px; font-size: 13px; }
.mail-detail { min-width: 0; }
.mail-detail-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.mail-title { margin: 0 0 8px; font-size: 22px; line-height: 1.25; overflow-wrap: anywhere; }
.mail-meta p { margin: 0 0 2px; }
.mail-actions { margin: 12px 0; align-items: center; flex-wrap: wrap; }
.mail-inline-form { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.mail-inline-form select { font-size: 13px; padding: 4px 8px; }
.mail-attachments { list-style: none; margin: 0 0 12px; padding: 10px 12px; background: var(--blush); border-radius: 8px; display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 14px; }
.mail-body { display: block; width: 100%; min-height: 60vh; border: 1px solid var(--blush-line); border-radius: 8px; background: var(--white); }
.mail-placeholder { min-height: 200px; display: grid; place-items: center; }
.mail-compose textarea { font-family: inherit; }
.mail-advanced summary { cursor: pointer; font-size: 14px; color: var(--ink-2); }
@media (max-width: 1100px) { .mailbox { grid-template-columns: 170px minmax(0, 1fr); } .mail-detail { grid-column: 1 / -1; } }
@media (max-width: 760px) {
  .mailbox { grid-template-columns: minmax(0, 1fr); }
  .mail-folders { position: static; flex-direction: row; flex-wrap: wrap; gap: 6px; }
  .mail-folders .btn { width: 100%; }
  .mail-account { width: 100%; }
  .mail-folders nav { display: flex; flex-wrap: wrap; gap: 6px; }
  .mail-folder { padding: 6px 10px; font-size: 13px; border: 1px solid var(--blush-line); }
  .mailbox.has-detail .mail-list, .mailbox.has-detail .mail-folders { display: none; }
  .mail-items { max-height: none; }
  .mail-body { min-height: 50vh; }
}