/* Nexora website, thema v7.5 — aanvullingen op v75.css (template NEXORA_Website_Refined_v7_5).
 *
 * v75.css blijft ongewijzigd. Hier staat wat de template niet had of anders doet:
 * - toegankelijkheid en het voorbeeld in het CMS. Geen eigen lettertype: de template noemt Inter
 *   maar laadt het niet, en de site volgt de template zoals hij op het scherm stond (systeemletter);
 * - de taalkeuze, het menu op de telefoon (met de portalen, de demoknop en de taal), de
 *   uitklaplijsten onder Platform/Oplossingen/Diensten op de telefoon;
 * - de formulieren zoals ze nu werken (rood sterretje, status, offerte-overzicht, investeerders);
 * - de prijscalculator op het prijsboek van Nexora (stap 1 met de pakketkaarten van de template,
 *   de toestanden die calculator.js zet) en de oude blokken Tekst, FAQ, Kerncijfers en Afbeelding.
 */


:root{--ink:#071329;--muted:#5f7088;--blue:#5272ff;--blue2:#155cff;--line:#e8eef8;--soft:#f7faff;--rood:#C2413B;--shadow-soft:0 14px 38px rgba(38,73,140,.06)}

/* Afbeeldingen dragen width/height (tegen verspringen tijdens het laden); zonder height:auto rekt het beeld uit. */
img[width][height]{height:auto}
textarea,select{font:inherit}
html{scrollbar-gutter:stable}

/* Oude blokken (calculator, tekst, FAQ) gebruiken .container; in v7.5 heet dat .shell. */
.container{width:min(1440px,calc(100% - 64px));margin:auto}
@media(max-width:880px){.container{width:min(100% - 32px,720px)}}

/* Toegankelijkheid. #4462ee haalt 5:1 op wit. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:12px;top:-60px;z-index:300;padding:10px 14px;border-radius:12px;background:var(--blue2);color:#fff;font-weight:700;font-size:14px;transition:top .15s}
.skip-link:focus{top:12px}
:focus-visible{outline:2px solid #4462ee;outline-offset:3px;border-radius:10px}
.form-grid input:focus-visible,.form-grid textarea:focus-visible,.form-grid select:focus-visible,.nora-drawer input:focus-visible,.calc-aantal input:focus-visible{outline:2px solid #4462ee;outline-offset:2px;border-color:#4462ee}

/* Voorbeeld in het CMS: geen vaste kop, het open blok gemarkeerd. */
body[data-voorbeeld] .site-header{position:relative;top:0}
[data-voorbeeld] [data-nx-blok]{cursor:pointer;scroll-margin-top:12px}
[data-voorbeeld] [data-nx-blok]:hover{outline:2px dashed rgba(68,98,238,.45);outline-offset:-2px}
[data-voorbeeld] [data-nx-blok].nx-actief{outline:3px solid #4462ee;outline-offset:-3px}
[data-voorbeeld] .nx-leeg-blok{margin:12px auto;max-width:1100px;padding:18px;border:2px dashed #aab4c5;border-radius:12px;color:#5f7088;font-size:14px;text-align:center}
.omgeving-balk{position:relative;z-index:101;padding:6px 14px;background:#0B1C33;color:#dbe7ff;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;text-align:center}

/* ---------------------------------------------------------------- kop */
.brand-tekst{font-weight:800;letter-spacing:.32em;font-size:18px}
/* De kop schikt zijn knoppen in een raster met vaste kolommen; met de taalkeuze erbij volgt het
   raster de knoppen zelf (elke knop heeft al een vaste breedte in v75.css). */
.site-header .header-actions{grid-template-columns:none!important;grid-auto-flow:column;grid-auto-columns:max-content}
.taal-keuze{display:flex;align-items:center;gap:2px;height:48px;padding:4px;border:1px solid #dbe5f3;border-radius:15px;background:#fff}
.taal-keuze a,.taal-mobiel a{display:grid;place-items:center;min-width:30px;height:30px;padding:0 7px;border-radius:10px;color:#5f7088;font-size:11px;font-weight:800;letter-spacing:.06em}
.taal-keuze a.active,.taal-mobiel a.active{background:#edf5ff;color:#0b5cff}
.taal-keuze a:not(.active):hover{color:#0b5cff}
/* De lijst van Inloggen opent met het hidden-attribuut (site.js). */
.login-menu:not([hidden]){display:block}
.login-menu a{display:flex;justify-content:space-between;gap:12px}
.login-menu a span{color:#7a89a0}
.nav-sub,.nav-mobiel{display:none}
.nav-link[aria-expanded="true"]>span{display:inline-block;transform:rotate(180deg)}
@media(max-width:1320px) and (min-width:881px){.taal-keuze a{min-width:26px;padding:0 5px}}
@media(max-width:880px){
  .taal-keuze{display:none}
  .main-nav{max-height:calc(100vh - 72px);overflow:auto}
  .nav-sub:not([hidden]){display:grid;gap:2px;padding:2px 0 8px 14px}
  .nav-sub a{padding:9px 12px;border-radius:10px;color:#33445e;font-size:14px}
  .nav-sub a:hover{background:#f1f6ff}
  .main-nav .nav-link{width:100%;justify-content:space-between}
  .nav-mobiel{display:grid;gap:4px;margin-top:8px;padding-top:10px;border-top:1px solid #e9eef7}
  .nav-mobiel>span{padding:4px 12px;color:#5f7088;font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
  .nav-mobiel>a{display:flex;justify-content:space-between;padding:10px 12px;border-radius:10px;font-weight:620}
  .nav-mobiel>a span{color:#7a89a0}
  .nav-mobiel .btn{margin-top:6px}
  .taal-mobiel{display:flex;gap:6px;padding:8px 6px 2px}
  .mobile-toggle{width:44px;height:44px}
}

/* ---------------------------------------------------------------- blokken */
/* Startpagina: de modulezin in twee regels (de template knipte de tekst zelf af). */
.home-module small{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* De knopjes in de cockpit zijn voorbeeld (geen echte knop): zelfde vorm als .cockpit-row button. */
.cockpit-row .cockpit-knop{font-size:8px;border:0;background:var(--soft);color:var(--accent,#1764ff);border-radius:8px;padding:7px;white-space:nowrap;font-weight:700}
.deep-card a{cursor:pointer}
.nora-answer.laden{opacity:.55}
.demo-conversation .nora-a p.laden{opacity:.55}
.drawer-link{display:inline-flex;gap:6px;margin-top:16px;color:#0b5cff;font-size:12px;font-weight:800}

/* ---------------------------------------------------------------- formulieren */
.hp{position:absolute!important;left:-10000px;width:1px;height:1px;overflow:hidden}
.form-grid label>span{display:inline}
/* Verplichte velden: rood sterretje achter het label (29-09-2026). #C2413B haalt 5,6:1 op wit. */
.form-grid label:has(>input[required],>textarea[required],>select[required])>span::after{content:"*";color:var(--rood);margin-left:3px;font-weight:800}
.form-grid input[aria-invalid="true"],.form-grid textarea[aria-invalid="true"],.form-grid select[aria-invalid="true"]{border-color:#e7a4a0}
.contact-actions{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:16px}
.contact-noten{display:grid;gap:4px;max-width:360px}
.contact-noten p{margin:0;color:#5f7088;font-size:11px;line-height:1.6}
.contact-verplicht span{color:var(--rood);font-weight:800}
.form-status{min-height:1px}
.form-status.ok{color:#0b9862;font-size:13px;font-weight:700}
.form-status.fout{color:var(--rood);font-size:13px;font-weight:700}
.contact-form.verstuurd .form-grid,.contact-form.verstuurd .contact-actions{display:none}
/* Het overzicht van de configuratie in het offertevenster (prijspagina v8). */
.contact-overzicht{border:1px solid #dfe7f3;border-radius:16px;background:var(--soft);padding:14px 16px}
.contact-overzicht[hidden]{display:none!important}
.contact-overzicht-kop{font-size:11px;font-weight:800;color:#53647d;letter-spacing:.08em;text-transform:uppercase;margin-bottom:6px}
.contact-overzicht ul{list-style:none;margin:0;padding:0;max-height:200px;overflow:auto}
.contact-overzicht li{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-bottom:1px solid #e6edf6;font-size:13px;color:#2c3d55}
.contact-overzicht li small{display:block;color:var(--muted);font-size:12px}
.contact-overzicht li span:last-child{font-weight:700;white-space:nowrap;color:#0b1733}
.contact-overzicht-totaal{border-top:1px solid #d5deea;margin-top:2px;display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding-top:10px;font-size:13px;color:#53647d}
.contact-overzicht-totaal strong{font-size:20px;color:#0b1733;white-space:nowrap}
/* Investeerdersvenster: opent met het hidden-attribuut (site.js); toestemming, disclaimer, bedankt. */
.investor-overlay:not([hidden]){display:block}
.form-grid .inv-toestemming{display:flex;gap:10px;align-items:flex-start;font-size:12px;font-weight:500;line-height:1.5;color:#4e607a}
.form-grid .inv-toestemming input{display:inline-block;width:auto;margin:2px 0 0;flex:none}
.modal-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.inv-disclaimer{display:block;margin-top:10px;color:#8190a6;font-size:11px;line-height:1.5}
.inv-succes{text-align:center;padding:18px 8px}
.inv-succes[hidden],[data-inv-formulier][hidden]{display:none}
.inv-vink{width:58px;height:58px;margin:0 auto 14px;border-radius:50%;display:grid;place-items:center;background:#e9f8f1;color:#08795a;font-size:26px;font-weight:900}
@media(max-width:600px){.investor-modal-top{grid-template-columns:1fr}.investor-modal-top img{width:56px}}

/* ---------------------------------------------------------------- oude blokken in v7.5 */
.prose-section{padding:64px 0}
.prose{max-width:820px;color:#4b5d76;font-size:16px;line-height:1.8}
.prose h2{margin:0 0 18px;color:var(--ink);font-size:clamp(28px,3.2vw,42px);line-height:1.05;letter-spacing:-.045em}
.prose h3{margin:28px 0 10px;color:var(--ink);font-size:21px;letter-spacing:-.02em}
.prose a{color:#0b5cff;text-decoration:underline;text-underline-offset:3px}
.prose ul,.prose ol{padding-left:22px}
.faq{padding:80px 0;border-top:1px solid var(--line)}
.faq-inner{display:grid;grid-template-columns:.8fr 1.2fr;gap:56px;align-items:start}
.faq-kop h2{margin:0 0 14px}
.faq-kop p{margin:0;color:#61718a;font-size:15px;line-height:1.75}
.faq-lijst{display:grid;gap:10px}
.faq-item{border:1px solid var(--line);border-radius:18px;background:#fff}
.faq-item[open]{border-color:#d6e3fa;box-shadow:var(--shadow-soft)}
.faq-item summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 20px}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";color:var(--blue2);font-weight:800;font-size:20px;line-height:1}
.faq-item[open] summary::after{content:"–"}
.faq-item h3{margin:0;font-size:16px;font-weight:650}
.faq-antwoord{padding:0 20px 18px;color:#5f7089;font-size:15px;line-height:1.75}
.facts{padding:70px 0;border-top:1px solid var(--line)}
.facts-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px;margin:0}
.fact{padding:22px;border:1px solid var(--line);border-radius:22px;background:#fff}
.fact dt{color:#5f7088;font-size:13px;font-weight:700;margin-bottom:10px}
.fact dd{margin:0}
.fact strong{display:block;font-size:40px;letter-spacing:-.05em;color:var(--ink)}
.fact small{display:block;margin-top:6px;color:#5f7088;font-size:12px;line-height:1.5}
.image-section{padding:40px 0 70px}
.image-figure{margin:0}
.image-figure img{width:100%;height:auto;border-radius:28px;border:1px solid #dfe8f6}
.image-figure figcaption{margin-top:12px;color:#71839a;font-size:13px}
.nf{padding-bottom:110px}
.nf-links{display:flex;gap:10px;flex-wrap:wrap;margin-top:28px}
.nf-links a{padding:10px 14px;border:1px solid #dbe5f3;border-radius:12px;font-weight:700;font-size:14px}
@media(max-width:880px){.faq-inner{grid-template-columns:1fr;gap:26px}}

/* ---------------------------------------------------------------- prijscalculator
   v75.css stijlt de calculator van de template (#calculator, #marktvergelijking). Onze calculator
   (lib/calc_nexora.php + calculator.js) heeft dezelfde opbouw; hieronder wat anders is. */
/* Stap 1: de pakketkaarten (uit de template, style id="v74-pricing-fixes" in prijzen.html). */
.calc-base-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:18px 0 10px}
.calc-base-card{appearance:none;border:1px solid #d9e4f5;background:#fff;border-radius:22px;padding:20px;text-align:left;display:grid;gap:7px;cursor:pointer;transition:.22s ease;color:#0e1c3b;min-height:190px;font:inherit}
.calc-base-card:hover{transform:translateY(-2px);border-color:#9db8ff;box-shadow:0 14px 36px rgba(33,83,180,.08)}
.calc-base-card.gekozen{border-color:#2563eb;background:linear-gradient(145deg,#f8fbff,#eef4ff);box-shadow:0 0 0 2px rgba(37,99,235,.08),0 18px 44px rgba(37,99,235,.10)}
.calc-base-card .base-kicker{font-size:11px;font-weight:800;letter-spacing:.14em;color:#61718e}
.calc-base-card .calc-module-naam{font-size:24px;font-weight:800}
.calc-base-card strong{font-size:28px}
.calc-base-card strong small{font-size:13px;font-weight:700;color:#70809c}
.calc-base-card .calc-module-oms{line-height:1.55;color:#61718e}
.base-select{margin-top:auto;font-size:13px;font-weight:800;color:#175cff}
.base-select .wel,.calc-base-card.gekozen .base-select .niet{display:none}
.calc-base-card.gekozen .base-select .wel{display:inline}
.calc-stap-kop{display:flex;align-items:center;gap:12px}
.calc-stap{border-radius:24px!important}
.calc-uitleg{max-width:760px}
.calc-stappen,.calc-aantal{min-width:0}
.calc-grid{align-items:start}
/* De toestanden die calculator.js zet (in de template heette "aan" nog "gekozen"). */
#calculator .calc-module.aan{border-color:#618cff;background:linear-gradient(180deg,#f8faff,#f2f6ff);box-shadow:inset 0 0 0 1px rgba(64,116,255,.14)}
#calculator .calc-module.aan .calc-schakel{background:#2876f2}
#calculator .calc-module.aan .calc-schakel:after{transform:translateX(16px)}
#calculator .calc-module.uit{opacity:.5;cursor:not-allowed}
.calc-stap.gedimd{opacity:.55}
.calc-module-niet{display:block;font-size:12px;font-weight:700;color:#b97900;margin-top:4px}
.calc-aantal[hidden],.calc-melding[hidden],.calc-staffel[hidden],.calc-module-niet[hidden],.calc-basis-oms[hidden]{display:none!important}
.calc-basis-oms{margin:4px 0 14px;padding:12px 14px;border-radius:14px;background:#f6f9fe;color:#667791;font-size:13px;line-height:1.5}
.calc-admin-aantal{margin-top:14px}
.calc-tarief-inline{text-align:right;font-weight:800;color:#0b1733}
.calc-tarief-inline small{display:block;font-size:11px;font-weight:500;color:#8290a6;margin-top:2px}
.calc-melding a{color:#0b5cff;font-weight:700}
.nexora-col{background:linear-gradient(180deg,#f5f9ff,#eef5ff)!important;color:#1d5fd0!important}
.nexora-cell{background:#f7fbff}
@media(max-width:900px){.calc-base-grid{grid-template-columns:1fr}}
@media(max-width:720px){.calc-admin-aantal .calc-tarief-inline{grid-column:1/-1;text-align:left}}

/* De investorbalk (startpagina) had in de template geen regel voor smalle schermen: de knoppen liepen eruit. */
@media(max-width:880px){.investor-teaser-card{flex-direction:column;align-items:flex-start;padding:26px 22px}.investor-teaser-card>div:last-child{flex-wrap:wrap}}
/* Het overzicht van de calculator: de onderregel onder de regel, en ruimte voor p/m. */
#calculator .calc-regels li .l small{display:block;margin-top:2px;font-size:11px;opacity:.75}
#calculator .calc-totaal small{margin-left:6px}

/* Het menu op de telefoon. In v75.css zet een latere basisregel (.main-nav{display:flex}) het menu
   onder 880px weer zichtbaar, ook zonder tik op ☰; hier is het weer dicht tot .mobile-open. */
@media(max-width:880px){
  .site-header .main-nav{display:none;position:absolute;top:72px;left:0;right:0;width:auto;margin:0;padding:12px 16px 18px;background:#fff;
    box-shadow:0 20px 40px rgba(20,45,90,.12);flex-direction:column;align-items:stretch;white-space:normal;justify-self:auto;max-height:calc(100vh - 72px);overflow:auto;z-index:80}
  .site-header .main-nav.mobile-open{display:flex}
  .site-header .main-nav .nav-link{justify-content:space-between;padding:12px}
  .site-header .main-nav .nora-link{justify-content:flex-start}
}
/* De vraag in het voorbeeldscherm van de startpagina: opgemaakt als de H3 van de template, maar geen kop (koppenvolgorde voor zoekmachines). */
.system-greeting .sys-vraag{display:block;font-size:20px;font-weight:700;line-height:1.2;margin:4px 0}