/* Nexora website — aanvullingen op style.css (template v7).
 *
 * - Inter komt van de eigen server in plaats van Google Fonts: sneller (geen
 *   extra verbinding) en geen IP-adressen van bezoekers naar Google.
 * - Stijl voor wat de template niet had: taalknoppen als links, FAQ, tekst,
 *   kerncijfers, afbeelding, formulierstatus, toegankelijkheid.
 */

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

/* Afbeeldingen dragen width/height (tegen verspringen tijdens het laden, telt
 * mee in Core Web Vitals). Zonder height:auto rekt de hoogte-eigenschap het
 * beeld uit zodra de CSS alleen de breedte zet. */
img[width][height]{height:auto}

/* Toegankelijkheid */
.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: een volle blauwe rand (#4462ee haalt 5:1 op wit; de oude halfdoorzichtige rand maar 2:1).
   Formuliervelden zetten in style.css en teaser.css outline:none met een specifiekere selector;
   daarom staan ze hier nog eens apart. */
:focus-visible{outline:2px solid #4462ee;outline-offset:3px;border-radius:10px}
.form-field input:focus-visible,.form-field textarea:focus-visible,.ts-modal input:focus-visible,.ts-modal select:focus-visible,.ts-modal textarea:focus-visible,
.calc-aantal input:focus-visible,.nora-form input:focus-visible{outline:2px solid #4462ee;outline-offset:2px;border-color:#4462ee}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .orbit,.module-pill,.nora-core,.nora-nav-orb::before,.nora-nav-orb::after{animation:none !important}
  .btn:hover,.prompt:hover{transform:none}
}

/* Voorbeeld in het CMS: het blok dat in de editor open staat, en een aanwijzer op elk blok. */
[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}

/* Testomgeving */
.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}
.brand img{height:32px;width:auto}
.lang a{display:inline-block;padding:7px 10px;border-radius:999px;color:#6f7f96;font-size:11px;font-weight:800;line-height:1}
.lang a.active{background:var(--blue2);color:#fff}
.lang a:not(.active):hover{color:var(--blue2)}

/* Hero met één afbeelding */
.hero-beeld{position:relative}
.hero-beeld img{width:100%;height:auto;border-radius:28px}

/* Prijskaarten: knop onderaan */
.price-card{display:flex;flex-direction:column}
.price-card ul{flex:1}
.price-cta{margin-top:22px;align-self:flex-start}

/* Veelgestelde vragen */
.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;font-size:clamp(34px,4vw,54px);line-height:1;letter-spacing:-.05em;font-weight:650}
.faq-kop p{margin:0;color:#71839a;font-size:16px;line-height:1.75}
.faq-lijst{display:grid;gap:10px}
.faq-item{border:1px solid var(--line);border-radius:18px;background:#fff;transition:.18s}
.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;letter-spacing:-.01em;color:#17243a}
.faq-antwoord{padding:0 20px 18px;color:#5f7089;font-size:15px;line-height:1.75}
.faq-antwoord p{margin:0 0 10px}

/* Vrije tekst */
.prose-section{padding:64px 0}
.prose{max-width:780px;color:#4b5d76;font-size:17px;line-height:1.8}
.prose h2{margin:0 0 18px;color:var(--ink);font-size:clamp(30px,3.4vw,44px);line-height:1.05;letter-spacing:-.045em;font-weight:650}
.prose h3{margin:28px 0 10px;color:var(--ink);font-size:22px;letter-spacing:-.02em}
.prose a{color:var(--blue2);text-decoration:underline;text-underline-offset:3px}
.prose ul,.prose ol{padding-left:22px}
.prose .blue{color:#4462ee}

/* Kerncijfers */
.facts{padding:70px 0;border-top:1px solid var(--line)}
.facts-kop{margin:0 0 28px;font-size:clamp(30px,3.4vw,44px);letter-spacing:-.045em;font-weight:650}
.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;font-weight:720;color:var(--ink)}
.fact small{display:block;margin-top:6px;color:#5f7088;font-size:12px;line-height:1.5}

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

/* Voet (opbouw van v9) plus een regel met copyright en bedrijfsgegevens */
.footer-meta{margin-top:12px;color:#5f7088;font-size:11px}
.footer-meta a{color:inherit;text-decoration:underline}
.footer-brand img{height:27px;width:auto}

/* Nora-paneel */
.nora-noot{margin:0;color:#5f7088;font-size:11px}
.overlay-brand img{width:48px;height:48px;object-fit:contain}

/* Demoformulier */
.hp{position:absolute !important;left:-10000px;width:1px;height:1px;overflow:hidden}
.contact-status{grid-column:1 / -1;margin:0;font-size:14px;font-weight:600;min-height:1px}
.contact-status.ok{color:#0FA878}
.contact-status.fout{color:#C2413B}
.contact-form.verstuurd .form-field,.contact-form.verstuurd .contact-actions{display:none}
.contact-form input[aria-invalid="true"],.contact-form textarea[aria-invalid="true"]{border-color:#e7a4a0}

/* 404 */
.nf{padding-bottom:110px}
.nf h1{max-width:900px}
.nf-links{display:flex;gap:10px;flex-wrap:wrap;margin-top:28px}

@media(max-width:860px){
  .faq-inner{grid-template-columns:1fr;gap:26px}
  .lang a{padding:7px 8px}
}

/* Voorbeeld in het CMS: geen vaste kop die over het venster schuift */
body[data-voorbeeld] .header{position:relative;top:0}

/* Kop: breder dan de inhoud (1420px), zodat negen menu-items met Investeerders plus de pillen
   Nora Live en Inloggen op één regel passen (de knop Plan een demo staat sinds 12-09-2026 niet
   meer in de kop). Krap: minder ruimte tussen de items; onder 1260px het uitklapmenu; onder 860px
   de portalen in dat uitklapmenu. Het logo krimpt nooit (gemeten 12-09-2026 op dertien breedtes).
   De regels hieronder zijn met .header-actions/.nav specifieker gemaakt: de basisregels van de
   pillen staan verderop in dit bestand en zouden ze anders overschrijven. */
.header .container{width:min(1420px,calc(100% - 42px))}
@media(min-width:861px){.header .brand{flex:0 0 auto}}
.header-actions{margin-left:auto}
.nav a,.header-actions .btn{white-space:nowrap}
@media(max-width:1480px){.nav a{padding-left:9px;padding-right:9px}}
@media(max-width:1420px){.nav a{padding-left:7px;padding-right:7px}}
@media(max-width:1260px){
  .nav{display:none;position:absolute;left:0;right:0;top:72px;background:#fff;border:1px solid var(--line);border-radius:16px;padding:12px;box-shadow:var(--shadow-soft);flex-direction:column;align-items:stretch}
  .nav.open{display:flex}.nav a{text-align:left}.mobile-menu{display:inline-flex}.header-inner{position:relative}
  .header-actions .nora-nav-copy,.header-actions .inlog-tekst{display:grid}.header-actions .nora-nav-live{padding:5px 9px 5px 5px}.header-actions .inlog-knop{padding:5px 10px 5px 5px}
}
@media(max-width:860px){
  .header-actions .nora-nav-copy{display:none}.header-actions .nora-nav-live{padding:5px}.header-actions .inlog-keuze{display:none}
  .nav .nav-inloggen{display:grid;gap:2px;margin-top:6px;padding-top:8px;border-top:1px solid var(--line)}
  .nav-inloggen>span{padding:6px 12px 2px;color:#5f7088;font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
  .nav .nav-inloggen a{display:flex;justify-content:space-between}
}

/* Vaste ruimte voor de schuifbalk: een venster dat opent (investeerdersformulier, demo, Nora)
   zet de schuifbalk uit, en zonder deze regel schoof de hele pagina dan 17px opzij. Samen met
   100% in plaats van 100vw in teaser.css staat het Nora-beeld zo op elke pagina op dezelfde
   plek, ook met een gewone Windows-schuifbalk (gemeten 12-09-2026). */
html{scrollbar-gutter:stable}

/* Inloggen (Rogier 12-09-2026): dezelfde witte pil als Nora Live, rond icoon en twee regels,
   met een uitklapmenu naar de portalen. Op een smal scherm staan de portalen in het menu. */
.inlog-keuze{position:relative}
.inlog-knop{display:flex;align-items:center;gap:8px;padding:5px 10px 5px 5px;border:1px solid #dfe8f8;border-radius:999px;background:rgba(255,255,255,.95);cursor:pointer;box-shadow:0 6px 18px rgba(31,76,161,.045);transition:.18s ease;color:var(--ink);font:inherit}
.inlog-knop:hover,.inlog-knop[aria-expanded="true"]{transform:translateY(-1px);border-color:#cfddf7;box-shadow:0 10px 24px rgba(31,76,161,.07)}
.inlog-icoon{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:#eef3ff;color:var(--blue2);flex:0 0 auto}
.inlog-icoon svg{width:16px;height:16px}
.inlog-tekst{display:grid;text-align:left;line-height:1}
.inlog-tekst b{font-size:10px;letter-spacing:.12em}
.inlog-tekst small{margin-top:3px;color:#5f7088;font-size:9px;white-space:nowrap}
.inlog-pijl{font-size:10px;color:#5f7088;transition:transform .18s ease}
.inlog-knop[aria-expanded="true"] .inlog-pijl{transform:rotate(180deg)}
.inlog-lijst{position:absolute;right:0;top:calc(100% + 10px);z-index:130;min-width:230px;padding:6px;background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:0 18px 44px rgba(20,54,120,.12)}
.inlog-lijst[hidden]{display:none!important}
.inlog-lijst a{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:11px 12px;border-radius:11px;color:var(--ink);font-size:13px;font-weight:600;white-space:nowrap}
.inlog-lijst a:hover,.inlog-lijst a:focus-visible{background:#f2f6ff;color:var(--blue2)}
.inlog-lijst a span,.nav-inloggen a span{color:#5f7088}
.nav-inloggen{display:none}

/* ---------------------------------------------------------------- prijscalculator (blok Prijscalculator, 12-09-2026)
   Vier stappen links, het overzicht rechts (vast bij het scrollen). Onder 960px een kolom; de staffeltabel schuift
   in zijn eigen kader. Alle rasterkolommen minmax(0,1fr): anders rekt de tabel de kolom op (zie de mockup). */
.calc{padding:24px 0 90px}
.calc-intro{margin-bottom:34px}
.calc-grid{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:22px;align-items:start}
.calc-stappen,.calc-overzicht{min-width:0}
.calc-stap{min-width:0;border:1px solid var(--line);border-radius:26px;background:#fff;padding:26px 28px;margin-bottom:16px;transition:opacity .2s}
.calc-stap.gedimd{opacity:.55}
.calc-stap-kop{display:flex;align-items:center;gap:14px;margin-bottom:6px}
.calc-nr{width:30px;height:30px;border-radius:50%;background:#eef4ff;color:#4462ee;font-weight:800;font-size:13px;display:grid;place-items:center;flex:none}
.calc-stap h3{margin:0;font-size:22px;font-weight:720;letter-spacing:-.035em}
.calc-uitleg{color:var(--muted);font-size:14px;line-height:1.65;margin:0 0 18px 44px}
.calc-pakketten{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.calc-pakket{position:relative;display:block;width:100%;text-align:left;border:1.5px solid var(--line);border-radius:20px;background:#fff;padding:20px 20px 18px;cursor:pointer;transition:.15s;font:inherit;color:var(--ink)}
.calc-pakket:hover{border-color:#cfdcff}
.calc-pakket.gekozen{border-color:var(--blue);box-shadow:0 14px 34px rgba(82,114,255,.14)}
.calc-vink{position:absolute;top:16px;right:16px;width:22px;height:22px;border-radius:50%;border:1.5px solid var(--line);display:grid;place-items:center;color:#fff;font-size:12px;font-weight:900}
.calc-pakket.gekozen .calc-vink{background:var(--blue);border-color:var(--blue)}
.calc-pakket-naam{display:block;font-size:22px;font-weight:720;letter-spacing:-.035em;margin:0 30px 4px 0}
.calc-pakket-sub{display:block;color:var(--muted);font-size:13px;line-height:1.5;min-height:38px}
.calc-pakket-prijs{display:block;margin:12px 0 10px;font-size:34px;font-weight:760;letter-spacing:-.05em;color:#4462ee}
.calc-pakket-prijs small{font-size:13px;color:#7a8ba2;font-weight:700;letter-spacing:0;margin-left:4px}
.calc-pakket ul{list-style:none;padding:0;margin:0;display:grid;gap:6px}
.calc-pakket li{display:flex;gap:9px;font-size:13px;color:#44566f}
.calc-pakket li::before{content:"\2713";color:var(--blue2);font-weight:900}
.calc-aantal{display:grid;grid-template-columns:minmax(0,1fr) 92px;gap:18px;align-items:center;margin-left:44px}
.calc-aantal[hidden]{display:none!important}
.calc-aantal label{display:block;font-weight:700;font-size:14px;margin-bottom:4px}
.calc-hint{font-size:12.5px;color:var(--muted);margin-bottom:12px;min-height:1em}
.calc-aantal input[type=range]{width:100%;accent-color:var(--blue);height:32px;margin:0}
.calc-aantal input[type=number]{width:92px;height:48px;border:1.5px solid var(--line);border-radius:14px;font:inherit;font-weight:800;font-size:20px;text-align:center;color:var(--ink);outline:none;background:#fff}
.calc-aantal input[type=number]:focus{border-color:var(--blue)}
.calc-schaal{display:flex;justify-content:space-between;font-size:11px;color:#5f7088;margin-top:-4px}
.calc-melding{margin:0 0 0 44px;background:var(--soft);border:1px solid var(--line);border-radius:14px;padding:12px 16px;font-size:13.5px;color:#44566f;line-height:1.6}
.calc-melding[hidden]{display:none!important}
.calc-melding a{color:#4462ee;font-weight:700;text-decoration:none}
.calc-melding a:hover{text-decoration:underline}
.calc-modules{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;margin-left:44px}
.calc-module{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:14px;align-items:center;width:100%;text-align:left;border:1.5px solid var(--line);border-radius:16px;padding:14px 16px;background:#fff;cursor:pointer;transition:.15s;font:inherit;color:var(--ink)}
.calc-module:hover{border-color:#cfdcff}
.calc-module.aan{border-color:#b9c9ff;background:#fbfcff}
.calc-schakel{width:44px;height:26px;border-radius:999px;background:#dfe6f2;position:relative;transition:.15s;flex:none}
.calc-schakel::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.18);transition:.15s}
.calc-module.aan .calc-schakel{background:var(--blue)}
.calc-module.aan .calc-schakel::after{left:21px}
.calc-module-naam{display:block;font-weight:700;font-size:15px}
.calc-module-oms{display:block;color:var(--muted);font-size:13px;line-height:1.5}
.calc-tarief{text-align:right;font-weight:800;font-size:15px;white-space:nowrap}
.calc-tarief small{display:block;font-weight:600;font-size:11.5px;color:var(--muted)}
.calc-inbegrepen{margin:16px 0 0 44px;display:flex;flex-wrap:wrap;gap:8px}
.calc-inbegrepen span{border-radius:999px;background:#e6f8f1;color:#0b7d5c;font-size:12px;font-weight:700;padding:7px 12px}
.calc-inbegrepen span::before{content:"\2713 ";font-weight:900}
.calc-staffel{margin:18px 0 0 44px;border:1px solid var(--line);border-radius:18px;background:var(--soft);padding:16px 18px}
.calc-staffel[hidden]{display:none!important}
.calc-staffel h4{margin:0 0 10px;font-size:14px;font-weight:800}
.calc-tabel{overflow-x:auto}
.calc-staffel table{width:100%;min-width:420px;border-collapse:collapse;font-size:13.5px}
.calc-staffel th{font-weight:600;color:var(--muted);text-align:left;font-size:11.5px;text-transform:uppercase;letter-spacing:.08em;padding:0 8px 8px}
.calc-staffel td{padding:8px;border-top:1px solid var(--line)}
.calc-staffel tr.actief td{background:#fff;font-weight:700;color:#4462ee}
.calc-staffel tr.actief td:first-child{border-radius:10px 0 0 10px}
.calc-staffel tr.actief td:last-child{border-radius:0 10px 10px 0}
.calc-staffel td.r,.calc-staffel th.r{text-align:right;white-space:nowrap}
.calc-korting{margin-top:12px;display:flex;justify-content:space-between;gap:12px;font-size:13.5px;font-weight:700;color:#0f9f74}
.calc-korting small{display:block;font-weight:500;color:var(--muted);font-size:12px}
.calc-overzicht{position:sticky;top:18px;border:1px solid #cfdcff;border-radius:26px;background:#fff;box-shadow:var(--shadow);padding:26px 26px 22px}
.calc-overzicht-kop{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.14em;color:#165be8}
.calc-totaal{margin:10px 0 2px;font-size:50px;font-weight:760;letter-spacing:-.055em;line-height:1}
.calc-totaal small{font-size:14px;color:#7a8ba2;font-weight:700;letter-spacing:0;margin-left:6px}
.calc-excl{color:var(--muted);font-size:13px;margin-bottom:18px}
.calc-regels{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.calc-regels li{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--line);font-size:14px}
.calc-regels li .l{color:#2c3d55}
.calc-regels li .l small{display:block;color:var(--muted);font-size:12px;margin-top:2px}
.calc-regels li .b{font-weight:700;white-space:nowrap}
.calc-regels li.korting .l,.calc-regels li.korting .b{color:#0f9f74}
.calc-totalen{margin:14px 0 18px;display:grid;gap:6px;font-size:14px}
.calc-totalen div{display:flex;justify-content:space-between;gap:12px}
.calc-totalen .groot{font-size:16px;font-weight:800}
.calc-totalen .zacht{color:var(--muted)}
.calc-knop{width:100%}
.calc-knop+.calc-knop{margin-top:8px}
.calc-noot{margin:14px 0 0;font-size:11.5px;color:#8190a6;line-height:1.6}
.calc-config{margin-top:16px;padding-top:14px;border-top:1px solid var(--line);font-size:12.5px;color:#44566f;line-height:1.7}
.calc-config strong{display:block;font-size:12px;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);margin-bottom:4px}
.vlak-donker .calc-stap,.vlak-donker .calc-overzicht,.vlak-donker .calc-pakket,.vlak-donker .calc-module{color:var(--ink)}
@media(max-width:960px){.calc-grid{grid-template-columns:minmax(0,1fr)}.calc-overzicht{position:static}}
@media(max-width:640px){.calc-uitleg,.calc-aantal,.calc-modules,.calc-melding,.calc-staffel,.calc-inbegrepen{margin-left:0}.calc-aantal{grid-template-columns:minmax(0,1fr)}.calc-aantal input[type=number]{width:100%}.calc-module{grid-template-columns:auto minmax(0,1fr)}.calc-tarief{grid-column:2;text-align:left;white-space:normal}.calc-totaal{font-size:42px}.calc-stap{padding:20px 18px}.calc-overzicht{padding:22px 18px}}