/*
  Marketing-schaal design-laag, ALLEEN voor de klant-facing portalpagina's
  (client_portal*.html) -- geladen NA shared.css, dat ook door de interne
  accountant-tool (dashboard_api.py) wordt gebruikt. Alles hier overschrijft
  dus bewust alleen wat op een portalpagina terechtkomt; de interne tool blijft
  onaangeraakt omdat die dit bestand niet linkt. Kleuren zelf blijven exact de
  shared.css-tokens (zie docs/context.md, "Huisstijl & Assets") -- hier wordt
  alleen de SCHAAL (typografie, ruimte, kaart-elevatie, knoppen) groter en
  zachter gemaakt, dichter naar het gevoel van web-marketing/index.html.
*/
@import url('https://fonts.googleapis.com/css2?family=Spartan:wght@600;700;800&family=Inter:wght@400;500;600;700&display=swap');

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}

h1, .merk, .portal-hero, .wizard-kaart h1, .login-kaart h1 {
  font-family: 'Spartan', -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}

/* --- Navigatiebalk: iets meer lucht + zachte schaduw i.p.v. harde lijn --- */
.portal-nav {
  padding: 18px 28px !important;
  border-bottom: none !important;
  box-shadow: 0 2px 14px rgba(12, 27, 42, .06);
}
.portal-nav .merk { font-size: 18px !important; letter-spacing: -0.01em; }

/* --- Hero-band: bovenaan de hoofdpagina's, marketing-gradient in klein --- */
.portal-hero {
  background: linear-gradient(135deg, var(--donkerblauw-zwart) 0%, var(--donkergroen) 60%, var(--midden-groen) 100%);
  color: #fff;
  padding: 32px 28px;
  border-radius: 0 0 20px 20px;
  margin-bottom: 28px;
}
.portal-hero .hero-groet { font-size: 22px; font-weight: 800; margin: 0 0 6px; }
.portal-hero .hero-sub { font-size: 14px; color: #dfe8e3; margin: 0; max-width: 520px; }

.onboarding-herinnering {
  margin: -12px 20px 20px;
  padding: 12px 16px;
  background: var(--groen-bg);
  color: var(--midden-groen);
  border-radius: 10px;
  font-size: 13.5px;
}
.onboarding-herinnering a { color: inherit; font-weight: 600; }

/* --- Kaarten: groter, ronder, zachter -- vervangt harde 1px-randen door schaduw --- */
.zachte-kaart,
.kpi-kaart, .inzicht-kaart, .scenario-kaart, .jaarprognose-kaart,
.jp-scenario-kaart, .cashflow-kaart, .scenario-kaart-cfo, .powerbi-kaart,
.upload-kaart, .regel-kaart, .wizard-kaart, .login-kaart,
.instuur-email-kaart, .fetcher-optie {
  border-radius: 14px !important;
  border-color: transparent !important;
  box-shadow: 0 4px 22px rgba(12, 27, 42, .07);
}
a.zachte-kaart:hover, .zachte-kaart.klikbaar:hover {
  box-shadow: 0 8px 28px rgba(12, 27, 42, .13);
}

/* --- Sectiekoppen: iets prominenter dan de kleine dashboard-caps --- */
h2.portal-kop {
  font-size: 13px;
  margin: 40px 0 14px;
}

/* --- Primaire call-to-action-knoppen: goud accent, marketing-schaal padding.
   De border-radius-flip bij hover is hetzelfde motief als marketing's
   .theme-btn (asymmetrisch, hoeken wisselen), alleen zachter (marketing gaat
   naar volledig vierkante hoeken; hier blijft het rond) en sneller (0,15s
   i.p.v. marketing's 0,5s) -- past bij de rest van het portal, dat al overal
   op de snelle timing zit. --- */
button.wizard-volgende, .welkom-kaart a.naar-portaal, button.inloggen {
  background: var(--goud-brons) !important;
  color: var(--donkerblauw-zwart) !important;
  font-weight: 700 !important;
  padding: 14px 26px !important;
  border-radius: 10px 3px 10px 3px !important;
  transition: background .15s ease, transform .15s ease, border-radius .15s ease, box-shadow .15s ease;
}
button.wizard-volgende:hover, .welkom-kaart a.naar-portaal:hover, button.inloggen:hover {
  background: #b1854f !important;
  transform: translateY(-1px);
  border-radius: 3px 10px 3px 10px !important;
  box-shadow: 0 6px 16px rgba(12, 27, 42, .18);
}
button.wizard-volgende:disabled {
  /* GEEN opacity op de hele knop: die blendt achtergrond ÉN tekst gelijk
     richting de paginakleur, wat het contrast tussen de twee juist verkleint
     i.p.v. alleen "gedimd" te ogen (was hier ~2:1, ver onder AA). Vaste,
     minder verzadigde kleuren i.p.v. een opacity-blend houden het contrast
     intact (nu ~5,1:1, boven AA's 4,5:1 voor normale tekst). */
  background: #d9c7a8 !important;
  color: #5c4a2e !important;
  cursor: default;
}

/* --- Sector-scenario-presetknoppen: gedeeld tussen client_portal.html
   (jaarprognose) en client_portal_cfo_light.html (Wat als...?) -- allebei
   roepen dezelfde /api/jaarprognose/scenario-engine aan, dus 1 knop-stijl. */
.jp-sector-presets-kop { font-size: 13px; margin: 0 0 10px; }
.jp-sector-presets { display: flex; flex-wrap: wrap; gap: 10px; }
.jp-preset-knop { border: 2px solid var(--donkergroen); background: #fff; color: var(--donkergroen); border-radius: 8px; padding: 10px 14px; font-weight: 600; font-size: 13px; cursor: pointer; text-align: left; transition: all .2s ease; }
.jp-preset-knop:hover { border-color: var(--goud-brons); transform: translateY(-1px); box-shadow: 0 4px 14px rgba(12, 27, 42, .08); }
.jp-preset-knop small { display: block; font-weight: 400; color: var(--grijs); margin-top: 2px; font-size: 11px; }
/* .actief hier op .jp-preset-knop zelf (niet gescoped op .jp-badge-rij) --
   dezelfde geselecteerd-stijl geldt nu ook voor de sector-presetknoppen
   (#jp-sector-presets), die geen badge-rij zijn maar wel hetzelfde
   klik-en-bereken-gedrag hebben gekregen. */
.jp-preset-knop.actief { background: var(--donkergroen); border-color: var(--donkergroen); color: #fff; }
.jp-preset-knop.actief small { color: #dfe8e3; }

/* --- Secundaire knoppen: hadden nog geen enkele hover-status (alleen de
   handpointer-cursor) -- portal-breed dezelfde snelle, duidelijke
   terugkoppeling als de primaire knop hierboven, alleen zonder de
   hoek-flip die specifiek voor de hoofd-CTA is. --- */
button.uitloggen:hover {
  border-color: var(--midden-groen) !important;
  color: var(--midden-groen) !important;
}
.vraagpost-form button.versturen:hover:not(:disabled) {
  background: var(--midden-groen) !important;
  transform: translateY(-1px);
}
.fetcher-optie-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(12, 27, 42, .08);
}
.later-invullen button:hover {
  color: var(--midden-groen);
}

/* --- Icoon-systeem: kleurbare SVG-iconen i.p.v. emoji (vaste kleur, dus
   nooit consistent met de rest van een kaart/knop). Elk icoon staat als
   data-URI achter mask-image -- de kleur komt dan gewoon mee via `color`,
   net als tekst, zonder een los lettertype-bestand of nieuwe /assets-route
   (die staat expres alleen bestanden zonder sub-pad toe, zie
   klantportaal_api.py's /assets/{bestandsnaam}). --- */
.icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  background-color: currentColor;
  -webkit-mask-image: var(--icon-svg);
  mask-image: var(--icon-svg);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  vertical-align: middle;
  flex-shrink: 0;
}
.icon-banknote { --icon-svg: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjEuNzUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHJlY3QgeD0iMiIgeT0iNiIgd2lkdGg9IjIwIiBoZWlnaHQ9IjEyIiByeD0iMiIvPjxjaXJjbGUgY3g9IjEyIiBjeT0iMTIiIHI9IjMiLz48L3N2Zz4="); }
.icon-trending-up { --icon-svg: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjEuNzUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHBvbHlsaW5lIHBvaW50cz0iMyAxNyA5IDExIDEzIDE1IDIxIDUiLz48cG9seWxpbmUgcG9pbnRzPSIxNCA1IDIxIDUgMjEgMTIiLz48L3N2Zz4="); }
.icon-bank { --icon-svg: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjEuNzUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PGxpbmUgeDE9IjMiIHkxPSIyMSIgeDI9IjIxIiB5Mj0iMjEiLz48bGluZSB4MT0iNSIgeTE9IjIxIiB4Mj0iNSIgeTI9IjEwIi8+PGxpbmUgeDE9IjE5IiB5MT0iMjEiIHgyPSIxOSIgeTI9IjEwIi8+PHBvbHlnb24gcG9pbnRzPSIxMiAzIDIxIDkgMyA5Ii8+PGxpbmUgeDE9IjkiIHkxPSIyMSIgeDI9IjkiIHkyPSIxMCIvPjxsaW5lIHgxPSIxNSIgeTE9IjIxIiB4Mj0iMTUiIHkyPSIxMCIvPjwvc3ZnPg=="); }
.icon-clock { --icon-svg: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjEuNzUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PGNpcmNsZSBjeD0iMTIiIGN5PSIxMiIgcj0iOSIvPjxwb2x5bGluZSBwb2ludHM9IjEyIDcgMTIgMTIgMTUgMTUiLz48L3N2Zz4="); }
.icon-bar-chart { --icon-svg: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjEuNzUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHJlY3QgeD0iMyIgeT0iMTIiIHdpZHRoPSI0IiBoZWlnaHQ9IjkiIHJ4PSIxIi8+PHJlY3QgeD0iMTAiIHk9IjciIHdpZHRoPSI0IiBoZWlnaHQ9IjE0IiByeD0iMSIvPjxyZWN0IHg9IjE3IiB5PSIzIiB3aWR0aD0iNCIgaGVpZ2h0PSIxOCIgcng9IjEiLz48L3N2Zz4="); }
.icon-document { --icon-svg: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjEuNzUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHBhdGggZD0iTTE0IDJINmEyIDIgMCAwIDAtMiAydjE2YTIgMiAwIDAgMCAyIDJoMTJhMiAyIDAgMCAwIDItMlY4eiIvPjxwb2x5bGluZSBwb2ludHM9IjE0IDIgMTQgOCAyMCA4Ii8+PGxpbmUgeDE9IjgiIHkxPSIxMyIgeDI9IjE2IiB5Mj0iMTMiLz48bGluZSB4MT0iOCIgeTE9IjE3IiB4Mj0iMTYiIHkyPSIxNyIvPjwvc3ZnPg=="); }
.icon-wifi { --icon-svg: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjEuNzUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHBhdGggZD0iTTUgMTIuNTVhMTEgMTEgMCAwIDEgMTQuMDggMCIvPjxwYXRoIGQ9Ik0xLjQyIDlhMTYgMTYgMCAwIDEgMjEuMTYgMCIvPjxwYXRoIGQ9Ik04LjUzIDE2LjExYTYgNiAwIDAgMSA2Ljk1IDAiLz48bGluZSB4MT0iMTIiIHkxPSIyMCIgeDI9IjEyLjAxIiB5Mj0iMjAiLz48L3N2Zz4="); }
.icon-tv { --icon-svg: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjEuNzUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHJlY3QgeD0iMiIgeT0iNyIgd2lkdGg9IjIwIiBoZWlnaHQ9IjE1IiByeD0iMiIvPjxwb2x5bGluZSBwb2ludHM9IjE3IDIgMTIgNyA3IDIiLz48L3N2Zz4="); }
.icon-smartphone { --icon-svg: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjEuNzUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHJlY3QgeD0iNyIgeT0iMiIgd2lkdGg9IjEwIiBoZWlnaHQ9IjIwIiByeD0iMiIvPjxsaW5lIHgxPSIxMSIgeTE9IjE4IiB4Mj0iMTMiIHkyPSIxOCIvPjwvc3ZnPg=="); }
.icon-cloud { --icon-svg: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjEuNzUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHBhdGggZD0iTTE3LjUgMTlhNC41IDQuNSAwIDAgMCAwLTkgNiA2IDAgMCAwLTExLjYgMS43QTQgNCAwIDAgMCA2LjUgMTloMTF6Ii8+PC9zdmc+"); }
.icon-laptop { --icon-svg: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjEuNzUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHJlY3QgeD0iMyIgeT0iNCIgd2lkdGg9IjE4IiBoZWlnaHQ9IjEyIiByeD0iMSIvPjxsaW5lIHgxPSIxIiB5MT0iMjAiIHgyPSIyMyIgeTI9IjIwIi8+PC9zdmc+"); }
.icon-tool { --icon-svg: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjEuNzUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHBhdGggZD0iTTE0LjcgNi4zYTEgMSAwIDAgMCAwIDEuNGwxLjYgMS42YTEgMSAwIDAgMCAxLjQgMGwzLjc3LTMuNzdhNiA2IDAgMCAxLTcuOTQgNy45NGwtNi45MSA2LjkxYTIuMTIgMi4xMiAwIDAgMS0zLTNsNi45MS02LjkxYTYgNiAwIDAgMSA3Ljk0LTcuOTR6Ii8+PC9zdmc+"); }
.icon-palette { --icon-svg: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjEuNzUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHBhdGggZD0iTTEyIDIyYTkgOSAwIDEgMSAwLTE4IDggOCAwIDAgMSA4IDhjMCAxLjUtMSAzLTMgM2gtMmEyIDIgMCAwIDAtMSAzLjc1QTIgMiAwIDAgMSAxMiAyMnoiLz48Y2lyY2xlIGN4PSI3LjUiIGN5PSIxMC41IiByPSIxIi8+PGNpcmNsZSBjeD0iMTAuNSIgY3k9IjcuNSIgcj0iMSIvPjxjaXJjbGUgY3g9IjE1IiBjeT0iOCIgcj0iMSIvPjwvc3ZnPg=="); }
.icon-link { --icon-svg: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjEuNzUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHBhdGggZD0iTTEwIDEzYTUgNSAwIDAgMCA3LjA3IDBsMi44My0yLjgzYTUgNSAwIDAgMC03LjA3LTcuMDdMMTEuNSA0LjUiLz48cGF0aCBkPSJNMTQgMTFhNSA1IDAgMCAwLTcuMDcgMEw0LjEgMTMuODNhNSA1IDAgMCAwIDcuMDcgNy4wN0wxMi41IDE5LjUiLz48L3N2Zz4="); }
.icon-paperclip { --icon-svg: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjEuNzUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHBhdGggZD0iTTIxLjQ0IDExLjA1bC05LjE5IDkuMTlhNiA2IDAgMCAxLTguNDktOC40OWw5LjE5LTkuMTlhNCA0IDAgMCAxIDUuNjYgNS42NmwtOS4yIDkuMTlhMiAyIDAgMCAxLTIuODMtMi44M2w4LjQ5LTguNDgiLz48L3N2Zz4="); }
.icon-clipboard-check { --icon-svg: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjEuNzUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHBhdGggZD0iTTkgNUg3YTIgMiAwIDAgMC0yIDJ2MTJhMiAyIDAgMCAwIDIgMmgxMGEyIDIgMCAwIDAgMi0yVjdhMiAyIDAgMCAwLTItMmgtMiIvPjxyZWN0IHg9IjkiIHk9IjMiIHdpZHRoPSI2IiBoZWlnaHQ9IjQiIHJ4PSIxIi8+PHBvbHlsaW5lIHBvaW50cz0iOSAxNCAxMSAxNiAxNSAxMiIvPjwvc3ZnPg=="); }
.icon-alert-triangle { --icon-svg: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjEuNzUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHBhdGggZD0iTTEwLjI5IDMuODZMMS44MiAxOGEyIDIgMCAwIDAgMS43MSAzaDE2Ljk0YTIgMiAwIDAgMCAxLjcxLTNMMTMuNzEgMy44NmEyIDIgMCAwIDAtMy40MiAweiIvPjxsaW5lIHgxPSIxMiIgeTE9IjkiIHgyPSIxMiIgeTI9IjEzIi8+PGxpbmUgeDE9IjEyIiB5MT0iMTciIHgyPSIxMi4wMSIgeTI9IjE3Ii8+PC9zdmc+"); }
.icon-plus { --icon-svg: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjEuNzUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PGxpbmUgeDE9IjEyIiB5MT0iNSIgeDI9IjEyIiB5Mj0iMTkiLz48bGluZSB4MT0iNSIgeTE9IjEyIiB4Mj0iMTkiIHkyPSIxMiIvPjwvc3ZnPg=="); }
.icon-sparkles { --icon-svg: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0iIzAwMCIgc3Ryb2tlPSJub25lIj48cGF0aCBkPSJNMTIgM2wxLjUgNC41TDE4IDlsLTQuNSAxLjVMMTIgMTVsLTEuNS00LjVMNiA5bDQuNS0xLjV6Ii8+PHBhdGggZD0iTTE5IDNsLjUgMS41TDIxIDVsLTEuNS41TDE5IDdsLS41LTEuNUwxNyA1bDEuNS0uNXoiLz48cGF0aCBkPSJNNSAxNWwuNSAxLjVMNyAxN2wtMS41LjVMNSAxOWwtLjUtMS41TDMgMTdsMS41LS41eiIvPjwvc3ZnPg=="); }

/* --- Toetsenbord-navigatie + hover-overgangen, portal-breed -----------------
   De marketing-site heeft dit sitebreed (elke link/knop/veld); het portal had
   het alleen op losse plekken (bijv. de upload-dropzone) -- op de rest van het
   portal was er dus GEEN zichtbare focus-indicator bij toetsenbordnavigatie,
   niet alleen minder "gepolijst" maar een echt toegankelijkheidsgat. */
a, button, input, select, textarea {
  transition: color .15s ease, background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--midden-groen);
  outline-offset: 2px;
}

/* --- Login: volle-pagina gradient-achtergrond, kaart zweeft erboven --- */
body.portal-login-achtergrond {
  background: linear-gradient(135deg, var(--donkerblauw-zwart) 0%, var(--donkergroen) 60%, var(--midden-groen) 100%);
}
body.portal-login-achtergrond .login-kaart {
  box-shadow: 0 20px 60px rgba(12, 27, 42, .35);
}

@media (max-width: 640px) {
  .portal-hero { padding: 24px 20px; border-radius: 0 0 14px 14px; }
  .portal-hero .hero-groet { font-size: 19px; }
}