/* Aanmelden bij Valorem — eigen lichte formulierlaag, los van het donkere
   klantportaal. Geldt voor NL en EN. De marineblauwe introductie, gouden
   lijn, pulserende merkcirkel en bestaande stapovergangen blijven behouden. */
html.welkom-app{color-scheme:light}
html.welkom-app body{color:var(--text); background:var(--paper); font-size:17px}
.welkom-app .wizard{color:var(--text); color-scheme:light}
.welkom-app .wizard-stap{width:100%; min-width:0; overflow-wrap:anywhere}
.welkom-app .wizard-stap :is(h1,h2){color:var(--ink); font-family:var(--serif); font-weight:600;
  font-size:clamp(1.55rem,4.8vw,2rem); line-height:1.22; letter-spacing:-.015em; text-wrap:balance}
.welkom-app .wizard-welkom h1{margin:0 0 8px}
.welkom-app .wizard-stap h1[tabindex]:focus{outline:none}
.welkom-app .wizard-kop{color:var(--gold-ink); font-size:.78rem; letter-spacing:.12em}
.welkom-app .wizard-onder{color:var(--text-soft); font-size:1rem; line-height:1.65; margin-bottom:24px}
.welkom-app .wizard-stap :is(.field-hint,.form-note){color:var(--text-soft); font-size:.9rem; line-height:1.6}
.welkom-app .wizard-stap :is(.field label,.keuze,.kaartkeuze-tekst strong){color:var(--ink)}
.welkom-app .wizard-stap .field label{font-size:.94rem; line-height:1.5}
.welkom-app .verplicht{font-size:.74rem; color:var(--gold-ink); letter-spacing:.07em}
.welkom-app .field{gap:8px; margin-bottom:22px}
.welkom-app .field :is(input,select,textarea){background:var(--paper); color:var(--text);
  caret-color:var(--ink); -webkit-text-fill-color:var(--text); font-size:16px; line-height:1.55;
  min-height:52px; border:1px solid #8896a7; border-radius:12px; padding:13px 15px}
.welkom-app .field :is(input,textarea)::placeholder{color:var(--text-soft); opacity:1;
  -webkit-text-fill-color:var(--text-soft)}
.welkom-app .field textarea{min-height:132px; resize:vertical}
.welkom-app .field :is(input,select,textarea):focus{border-color:var(--gold-ink);
  box-shadow:0 0 0 3px rgba(134,106,46,.14)}
.welkom-app .field :is(input,select,textarea)[aria-invalid="true"]{
  background:#fffafa; color:var(--text); -webkit-text-fill-color:var(--text); border-color:#8d2b2b}
.welkom-app .veld-fout{font-size:.9rem; line-height:1.5; color:#8d2b2b}
.welkom-app .field-hint{margin:0}
.welkom-app .field .split{min-width:0}
.welkom-app .kaartkeuze{padding:18px; gap:14px; border-color:#bec7d2; align-items:flex-start;
  border-radius:16px; min-height:62px; box-shadow:none}
.welkom-app .kaartkeuze-vink{margin-top:2px; border-color:#8896a7}
.welkom-app .kaartkeuze-tekst strong{font-size:1rem; line-height:1.5}
.welkom-app .kaartkeuze-tekst small{font-size:.92rem; line-height:1.55; color:var(--text-soft)}
.welkom-app .kaartkeuzes--compact .kaartkeuze{padding:15px 14px; gap:11px}
.welkom-app .kaartkeuzes--compact .kaartkeuze-tekst strong{font-size:.94rem}
.welkom-app .kaartkeuze:has(input:checked){background:var(--gold-tint); border-color:var(--gold-ink);
  box-shadow:0 0 0 1px var(--gold-ink)}
.welkom-app .kaartkeuze:has(input:checked) :is(strong,small){color:var(--ink)}
.welkom-app .let-blok{padding:18px 20px; color:var(--text); border-color:rgba(134,106,46,.4)}
.welkom-app .let-blok strong{color:var(--ink)}
.welkom-app .let-blok p{margin:0; font-size:.94rem; line-height:1.65}
.welkom-app .uitleg-lijst summary{min-height:48px; padding:12px 2px; font-size:.94rem; line-height:1.5}
.welkom-app .uitleg-lijst details > :not(summary){font-size:.94rem; line-height:1.65; color:var(--text)}
.welkom-app .uitleg-lijst :is(strong,a){color:var(--ink)}
.welkom-app .uitleg-lijst .bron-lijst small{display:block; color:var(--text-soft); font-size:.88rem; margin-top:4px}
.welkom-app .uitleg-lijst a{text-decoration:underline; text-underline-offset:3px}
.welkom-app .controle-lijst{border-color:#c8d0da; padding:24px 24px 12px}
.welkom-app .controle-lijst dt{color:var(--text-soft); font-size:.92rem; line-height:1.5}
.welkom-app .controle-lijst dd{color:var(--ink); font-size:.94rem; line-height:1.5}
.welkom-app .keuze.akkoord{color:var(--text); font-size:.94rem; line-height:1.65; gap:13px; margin-top:22px}
.welkom-app .keuze.akkoord input{margin-top:4px; width:22px; height:22px; accent-color:var(--gold-ink)}

/* Vier hoofdstukken geven oriëntatie; de kleine teller volgt de vragen binnen
   het huidige hoofdstuk. Geen extra knoppen die verplichte vragen overslaan. */
.welkom-app .js-wizard .wizard-balkje{display:grid; grid-template-columns:minmax(0,1fr) auto auto;
  column-gap:14px; row-gap:18px; padding-bottom:16px; border-bottom-color:rgba(134,106,46,.3)}
.welkom-app .wizard-merk{gap:12px; font-size:1rem; line-height:1.35; color:var(--ink)}
.welkom-app .wizard-merk > span:last-child{min-width:0; max-width:13ch}
.welkom-app .wizard-merk-kort{display:none}
.welkom-app .wizard-teller{font-size:.82rem; color:var(--text-soft)}
.welkom-app .wizard-teller :is(b,i){color:var(--ink)}
.welkom-app .wizard-hoofdstukken{grid-column:1 / -1; display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px; list-style:none; margin:0; padding:0}
.welkom-app .wizard-hoofdstukken li{display:flex; flex-wrap:wrap; align-items:center; gap:6px;
  padding-top:10px; border-top:2px solid var(--line); color:var(--text-soft); font-size:.76rem;
  line-height:1.35; min-width:0}
.welkom-app .wizard-hoofdstuk-nr{display:inline-grid; place-items:center; flex:0 0 auto;
  width:23px; height:23px; border-radius:50%; border:1px solid #a8b3c1; font-size:.75rem}
.welkom-app .wizard-hoofdstukken .is-huidig{border-top-color:var(--gold-ink); color:var(--ink); font-weight:600}
.welkom-app .wizard-hoofdstukken .is-huidig .wizard-hoofdstuk-nr{background:var(--ink); border-color:var(--ink); color:#fff}
.welkom-app .wizard-hoofdstukken .is-klaar{border-top-color:var(--gold)}
.welkom-app .wizard-taal{display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto;
  min-height:44px; padding:8px 10px; border:1px solid var(--line); border-radius:999px;
  color:var(--ink); font-size:.82rem; font-weight:600; text-decoration:none; white-space:nowrap}
.welkom-app .wizard-taal:hover{border-color:var(--gold-ink)}
.welkom-app .wizard-intro-kop{display:flex; align-items:flex-start; justify-content:space-between; gap:20px}
.welkom-app .wizard-intro-kop .wizard-taal{border-color:rgba(219,185,104,.45); color:var(--gold-soft)}
.welkom-app .js-wizard .wizard-vak{padding-top:28px; padding-bottom:28px; scroll-padding-block:24px}
.welkom-app .js-wizard .wizard-nav{gap:12px; border-top-color:#c8d0da; margin-top:0}
.welkom-app .wizard-nav .btn{min-height:52px; font-size:1rem}
.welkom-app .wizard-nav .btn-ghost{color:var(--ink); background:#fff; border-color:#8896a7}
.welkom-app .wizard-nav .btn-ghost:hover{background:var(--paper-2); border-color:var(--gold-ink)}
.welkom-app .wizard-nav .btn-primary{color:#231703}
.welkom-app .wizard-uitgang{min-height:44px; display:inline-flex; align-items:center}
.welkom-app .js-wizard:not(.is-intro) .wizard-uitgang{display:none}
.welkom-app .js-wizard.is-intro .wizard-balkje{display:none}
.welkom-app .js-wizard.is-intro .wizard-stap :is(h1,h2){color:#fff}
.welkom-app .js-wizard.is-intro .wizard-onder{color:rgba(238,242,248,.84)}
.welkom-app .js-wizard.is-intro .form-note{color:rgba(238,242,248,.76)}
.welkom-app .js-wizard.is-intro .wizard-uitgang{color:rgba(238,242,248,.84)}
.welkom-app .js-wizard.is-intro .hervat p{color:#eef2f8}
.welkom-app .js-wizard.is-intro .hervat-opnieuw{min-height:44px; color:rgba(238,242,248,.84)}
.welkom-app .wizard-serverfout{background:#fff2f2; color:#782525; padding:16px 18px;
  border:1px solid #c06a6a; border-radius:14px; font-size:.94rem; line-height:1.55}

/* De merkpuls is bewust ook hier aanwezig. Alleen de toestelvoorkeur voor
   minder beweging zet hem stil; de portaalregels worden niet aangeraakt. */
.welkom-app .brand-mark{position:relative; width:40px; height:40px; flex:none;
  box-shadow:0 0 0 4px rgba(193,154,74,.07),0 0 22px rgba(193,154,74,.3),
    0 2px 6px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.1)}
.welkom-app .brand-mark::after{content:""; position:absolute; inset:-3px; border-radius:50%; pointer-events:none;
  box-shadow:0 0 0 1px rgba(242,219,166,.75),0 0 16px 2px rgba(193,154,74,.6); opacity:.25; transform:scale(.98)}
.welkom-app .wizard-merk .brand-mark img{width:26px; height:26px}
.welkom-app .wizard-welkom .brand-mark{width:40px; height:40px}
.welkom-app .wizard-welkom .brand-mark img{width:74px; height:26px}
@media (prefers-reduced-motion:no-preference){
  .welkom-app .brand-mark::after{animation:randpuls 2.4s ease-in-out infinite}
}
.welkom-app :is(button,a,input,select,textarea,summary):focus-visible{
  outline:2px solid var(--gold-ink); outline-offset:3px}
.welkom-app .kaartkeuze:has(input:focus-visible){outline:2px solid var(--gold-ink); outline-offset:3px}
.welkom-app .js-wizard.is-intro :is(button,a):focus-visible{outline-color:var(--gold-soft)}
@media (max-width:559px){
  .welkom-app .js-wizard .wizard-balkje{padding-inline:16px; column-gap:10px; row-gap:14px}
  .welkom-app .wizard-merk{font-size:.9rem; gap:9px}
  .welkom-app .wizard-merk > span:last-child{max-width:none}
  .welkom-app .wizard-merk-volledig{display:none}
  .welkom-app .wizard-merk-kort{display:inline}
  .welkom-app .wizard-teller{font-size:.75rem}
  .welkom-app .wizard-taal{font-size:.76rem; padding-inline:8px}
  .welkom-app .wizard-hoofdstukken{gap:8px}
  .welkom-app .wizard-hoofdstukken li{flex-direction:column; align-items:flex-start; font-size:.75rem}
  .welkom-app .wizard-hoofdstukken li > span:last-child{max-width:100%; overflow-wrap:anywhere}
  .welkom-app .js-wizard .wizard-vak{padding:24px 16px}
  .welkom-app .kaartkeuzes--compact.kaartkeuzes--twee{grid-template-columns:1fr}
  .welkom-app .kaartkeuzes--compact .kaartkeuze{min-height:56px; padding:14px 16px}
  .welkom-app .kaartkeuzes--compact .kaartkeuze-tekst strong{font-size:1rem}
  .welkom-app .controle-lijst{padding:20px 18px 8px}
  .welkom-app .controle-lijst dl{grid-template-columns:minmax(0,1fr); gap:4px}
  .welkom-app .controle-lijst dd{margin-bottom:12px}
  .welkom-app .wizard-nav .btn{padding-inline:18px}
}
@media (max-width:359px){
  .welkom-app .wizard-merk > span:last-child{font-size:.82rem}
  .welkom-app .wizard-balkje .wizard-taal{padding-inline:6px; font-size:.7rem}
}
@media (prefers-reduced-motion:reduce){
  html.welkom-app,.welkom-app .wizard-vak{scroll-behavior:auto}
  .welkom-app .brand-mark::after{animation:none}
  .welkom-app .wizard-stap,.welkom-app .wizard-stap > *{animation:none}
  .welkom-app .wizard::before,.welkom-app .wizard-balk span,.welkom-app .kaartkeuze,
  .welkom-app .kaartkeuze-vink,.welkom-app .kaartkeuze-vink::after{transition:none}
}

/* 20-9-2026 (Jawad: "Klant worden pagina geen knop" en "maak gelijk luxer
   smooth mooi"). Twee dingen.
   1. De knop Beginnen was onzichtbaar: de sitebrede knopstijl van vandaag
      (B10 in styles.css) maakte .btn-primary marineblauw, en hierboven stond
      nog de tekstkleur voor de oude gouden knop. Op het donkere openings-
      scherm is de hoofdknop nu wit, op de lichte stappen blauw met wit.
   2. Dezelfde registertaal als de site: gouden nummers in de serif in plaats
      van bolletjes, haarlijnen, een gouden streepje voor het kopje, rustiger
      velden en zachtere, langere overgangen tussen de stappen. */
.welkom-app .wizard-nav .btn-primary{color:#fff; background:var(--ink)}
.welkom-app .wizard-nav .btn-primary:hover{background:var(--ink-2)}
.welkom-app .js-wizard.is-intro .wizard-nav .btn-primary{background:#fff; color:var(--ink)}
.welkom-app .js-wizard.is-intro .wizard-nav .btn-primary:hover{background:#f2e6cd; color:var(--ink)}
.welkom-app .wizard-nav .btn{min-height:54px; border-radius:12px}
.welkom-app :is(.wizard-nav,.hervat) .btn-ghost{border-radius:12px; padding-left:20px; padding-right:20px}
.welkom-app :is(.wizard-nav,.hervat) .btn-ghost::after{display:none}
.welkom-app .js-wizard.is-intro .wizard-nav .btn-ghost{border-color:rgba(238,242,248,.36); color:#eef2f8}

/* openingsscherm */
.welkom-app .wizard-welkom h1{font-size:clamp(2rem, 6vw, 2.9rem); line-height:1.08; letter-spacing:-.02em; margin:0 0 14px}
.welkom-app .js-wizard.is-intro .wizard-onder{font-size:1.05rem; max-width:46ch}
.welkom-app .wizard-intro-kop .wizard-taal, .welkom-app .wizard-balkje .wizard-taal{
  border:0; border-bottom:1px solid rgba(193,154,74,.45); border-radius:0; padding:6px 2px; min-height:0;
  font-size:.72rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase}
.welkom-app .wizard-intro-kop .wizard-taal{color:var(--gold-soft); border-bottom-color:rgba(219,185,104,.45)}
.welkom-app .wizard-balkje .wizard-taal{color:var(--gold-ink)}
.welkom-app .wizard-taal:hover{border-bottom-color:currentColor}
.welkom-app .stappen{max-width:none; margin:26px 0 22px; border-top:1px solid rgba(219,185,104,.55)}
.welkom-app .stappen li{padding:16px 0 16px 52px; margin:0; border-bottom:1px solid rgba(238,242,248,.14); line-height:1.55}
.welkom-app .stappen li::before{content:counter(stap, decimal-leading-zero); top:17px; width:auto; height:auto;
  background:transparent; border-radius:0; display:block; font-family:var(--serif); font-weight:400;
  font-size:.9rem; letter-spacing:.16em; color:var(--gold-soft)}
.welkom-app .stappen li strong{font-family:var(--serif); font-weight:600; font-size:1.12rem; letter-spacing:-.005em; margin-bottom:3px}
.welkom-app .js-wizard.is-intro .stappen li{color:rgba(238,242,248,.78)}

/* bovenbalk en hoofdstukken */
.welkom-app .js-wizard .wizard-balkje{border-bottom-color:rgba(193,154,74,.25)}
.welkom-app .wizard-hoofdstukken li{border-top-width:1px; padding-top:11px; gap:8px}
.welkom-app .wizard-hoofdstuk-nr{width:auto; height:auto; border:0; border-radius:0; font-family:var(--serif);
  font-size:.8rem; letter-spacing:.12em; color:var(--gold-ink)}
.welkom-app .wizard-hoofdstukken .is-huidig{border-top-color:var(--gold)}
.welkom-app .wizard-hoofdstukken .is-huidig .wizard-hoofdstuk-nr{background:transparent; color:var(--ink)}
.welkom-app .wizard-hoofdstukken .is-klaar .wizard-hoofdstuk-nr{color:var(--gold-ink)}
.welkom-app .wizard-balk span{box-shadow:none; background:var(--gold); transition:width .6s cubic-bezier(.16,1,.3,1)}

/* de stappen zelf */
.welkom-app .wizard-kop{display:flex; align-items:center; gap:10px; font-weight:600}
.welkom-app .wizard-kop::before{content:""; width:22px; height:1px; background:var(--gold); opacity:.85}
.welkom-app .js-wizard.is-intro .wizard-kop::before{background:var(--gold-soft)}
.welkom-app .wizard-stap h2{font-size:clamp(1.7rem, 4.8vw, 2.2rem); letter-spacing:-.02em; margin:0 0 10px}
.welkom-app .wizard-onder{font-size:1.02rem}
.welkom-app .field label{font-weight:600}
.welkom-app .field :is(input,select,textarea){border:1px solid #c3ccd7; border-radius:10px; min-height:54px;
  padding:14px 16px; transition:border-color .25s ease, box-shadow .25s ease}
.welkom-app .field :is(input,select,textarea):hover{border-color:#9aa7b6}
.welkom-app .field :is(input,select,textarea):focus{border-color:var(--gold-ink); box-shadow:0 0 0 3px rgba(193,154,74,.16)}
.welkom-app .kaartkeuze{border-radius:10px; border-color:#d3dae3; padding:17px 18px;
  transition:border-color .25s ease, background .25s ease}
.welkom-app .kaartkeuze:hover{border-color:var(--gold-ink); background:#fffdf8}
.welkom-app .kaartkeuze:has(input:checked){box-shadow:none; border-color:var(--gold-ink); background:var(--gold-tint)}
.welkom-app .kaartkeuze-vink{transition:border-color .25s ease, background .25s ease}
.welkom-app .kaartkeuze-vink::after{transition:transform .3s cubic-bezier(.16,1,.3,1)}
.welkom-app .let-blok{border-radius:10px}
.welkom-app .controle-lijst{border-radius:10px}

/* overgangen: langer en zachter, met een lichte verschuiving in plaats van een ruk */
@keyframes welkom-stap-rechts{from{opacity:0; transform:translateX(18px)} to{opacity:1; transform:none}}
@keyframes welkom-stap-links{from{opacity:0; transform:translateX(-18px)} to{opacity:1; transform:none}}
@keyframes welkom-stap-item{from{opacity:0; transform:translateY(9px)} to{opacity:1; transform:none}}
.welkom-app .js-wizard .wizard-stap{animation:welkom-stap-rechts .6s cubic-bezier(.16,1,.3,1) both}
.welkom-app .js-wizard.is-terug .wizard-stap{animation-name:welkom-stap-links}
.welkom-app .js-wizard .wizard-stap > *{animation-name:welkom-stap-item; animation-duration:.55s;
  animation-timing-function:cubic-bezier(.16,1,.3,1)}
.welkom-app .js-wizard::before{transition:opacity .7s ease}
.welkom-app .js-wizard .wizard-balkje, .welkom-app .js-wizard .wizard-nav{transition:background-color .7s ease, border-color .7s ease}
@media (prefers-reduced-motion:reduce){
  .welkom-app .js-wizard .wizard-stap, .welkom-app .js-wizard .wizard-stap > *{animation:none}
}
@media (max-width:559px){
  .welkom-app .stappen li{padding-left:44px}
  .welkom-app .stappen li strong{font-size:1.05rem}
}

/* 20-9-2026, vervolg (Jawad: "ja" op dezelfde behandeling voor de machtigings-
   stap en het controlescherm). De uitleg bij de machtiging als register met
   serif-koppen en een gouden lijn erboven; het controlescherm als vel papier
   zonder schaduw en zonder gekleurde balk, met kleine gouden kopjes boven de
   antwoorden. */
.welkom-app .uitleg-lijst{margin-top:24px; border-top:1px solid var(--gold)}
.welkom-app .uitleg-lijst details{border-bottom:1px solid var(--line)}
.welkom-app .uitleg-lijst summary{padding:14px 2px; min-height:52px; font-family:var(--serif);
  font-weight:600; font-size:1.05rem; letter-spacing:-.005em; color:var(--ink); gap:14px}
.welkom-app .uitleg-lijst summary::after{width:8px; height:8px; border-width:1.5px; border-color:var(--gold-ink);
  transition:transform .3s cubic-bezier(.16,1,.3,1)}
.welkom-app .uitleg-lijst details > :not(summary){margin:2px 0 16px; padding-right:24px; color:var(--text-soft);
  font-size:.97rem; line-height:1.65; animation:welkom-stap-item .4s cubic-bezier(.16,1,.3,1) both}
.welkom-app .uitleg-lijst .bron-lijst{list-style:none; margin:0 0 16px; padding:0}
.welkom-app .uitleg-lijst .bron-lijst li{padding:8px 0; border-top:1px solid var(--line)}
.welkom-app .uitleg-lijst .bron-lijst li:first-child{border-top:0; padding-top:0}
.welkom-app .uitleg-lijst a{color:var(--ink); text-decoration:none; border-bottom:1px solid rgba(134,106,46,.45); padding-bottom:1px}
.welkom-app .uitleg-lijst a:hover{color:var(--gold-ink); border-bottom-color:currentColor}
.welkom-app .field-hint{font-size:.9rem; color:var(--text-soft)}

.welkom-app .controle-lijst{border:1px solid var(--line); border-top:1px solid var(--gold); border-radius:0;
  box-shadow:none; padding:22px 24px 8px; background:#fff}
.welkom-app .controle-lijst::before{display:none}
.welkom-app .controle-lijst dl{grid-template-columns:38% minmax(0,1fr); gap:6px 16px; margin:0 0 14px; padding:0 0 14px;
  border-bottom:1px solid var(--line)}
.welkom-app .controle-lijst dl:last-of-type{border-bottom:0}
.welkom-app .controle-lijst dt{font-size:.72rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  color:var(--gold-ink); line-height:1.5; padding-top:3px}
.welkom-app .controle-lijst dd{font-size:1rem; font-weight:500; color:var(--ink); line-height:1.5}
.welkom-app .keuze.akkoord{margin-top:24px; padding:18px 0 0; border-top:1px solid var(--line); font-size:.95rem}
.welkom-app .keuze.akkoord input{width:20px; height:20px; margin-top:3px; accent-color:var(--ink)}
@media (max-width:559px){
  .welkom-app .controle-lijst{padding:18px 18px 6px}
  .welkom-app .controle-lijst dl{grid-template-columns:minmax(0,1fr); gap:3px}
  .welkom-app .controle-lijst dd{margin-bottom:12px}
  .welkom-app .uitleg-lijst summary{font-size:1rem}
}

/* 24-9-2026 (Jawad: "deze pagina volledig nieuwe likje geven, mooier,
   visueler, cleaner, luxer; alleen het eerste blad"). Het openingsscherm
   opnieuw; de lichte formulierstappen erna blijven zoals ze waren, want
   alles hier hangt aan .is-intro. Wat er staat:
   - het medaillon groter met een zachte gouden gloed, rechts de taal als pil;
   - een gouden wenkbrauw in kapitalen (Aanmelden · vijf minuten) en de kop in
     twee regels: "Welkom bij" klein en cursief, de naam groot in de serif;
   - de rij Aanmelden → Klantnummer → Inloggen: drie medaillons met een
     lijnicoon, het woord eronder, gouden pijlen ertussen;
   - de V uit het logo groot en vaag in de achtergrond, ademend zoals in de
     app (stil bij "minder beweging");
   - de knop Beginnen in goud met glans, de weg terug als stille tekstlink,
     het privacyzinnetje met een schildje.
   Zonder JavaScript (geen .js-wizard) staan de nieuwe onderdelen gewoon in
   het lichte formulier, met de gouden tekstkleur van de site. */
.welkom-app .welkom-wenkbrauw{display:flex; align-items:center; flex-wrap:wrap; gap:10px; margin:0 0 12px;
  font-size:.72rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--gold-ink)}
.welkom-app .welkom-wenkbrauw::before{content:""; width:28px; height:1px; background:currentColor; opacity:.85}
.welkom-app .welkom-punt{opacity:.5}
.welkom-app .welkom-h1-boven{display:block; font-style:italic; font-weight:400; font-size:.5em; letter-spacing:-.005em;
  line-height:1.3; color:var(--text-soft); margin:0 0 .3em}
.welkom-app .welkom-h1-naam{display:block}
.welkom-app .wizard-welkom .form-note{position:relative; padding-left:32px}
.welkom-app .welkom-schild{position:absolute; left:0; top:0; width:22px; height:22px; display:grid; place-items:center;
  color:var(--gold-ink)}
.welkom-app .welkom-schild svg{width:15px; height:15px}

/* achtergrond: dieper verloop, en de V uit het logo groot en vaag rechts */
.welkom-app .js-wizard{overflow:hidden}
.welkom-app .js-wizard::before{background:
    radial-gradient(90% 60% at 16% 0%, rgba(193,154,74,.2), transparent 60%),
    radial-gradient(70% 50% at 100% 100%, rgba(23,51,92,.6), transparent 62%),
    linear-gradient(180deg, #0f2449 0%, #07172f 58%, #051227 100%)}
.welkom-app .js-wizard::after{content:""; position:absolute; z-index:-1; pointer-events:none;
  right:-6vw; top:6vh; width:min(560px, 62vmin); height:min(560px, 62vmin);
  background:url(mark-valorem-glyph.png) center / contain no-repeat;
  -webkit-mask-image:linear-gradient(180deg, #000 40%, transparent 100%); mask-image:linear-gradient(180deg, #000 40%, transparent 100%);
  opacity:0; transform:scale(.98); transition:opacity .7s ease}
.welkom-app .js-wizard.is-intro::after{opacity:.075}
@keyframes welkom-adem{from{opacity:.055; transform:scale(.98)} to{opacity:.1; transform:scale(1.025)}}
@media (prefers-reduced-motion:no-preference){
  .welkom-app .js-wizard.is-intro::after{animation:welkom-adem 7s ease-in-out infinite alternate}
}
.welkom-app .js-wizard.is-intro .wizard-vak{padding-top:calc(30px + env(safe-area-inset-top,0px)); padding-bottom:22px}

/* bovenrand: medaillon en taal */
.welkom-app .js-wizard.is-intro .wizard-intro-kop{align-items:center; margin-bottom:8px}
.welkom-app .js-wizard.is-intro .welkom-merk{width:auto; margin:0}
.welkom-app .js-wizard.is-intro .wizard-welkom .brand-mark{width:58px; height:58px;
  box-shadow:0 0 0 7px rgba(193,154,74,.05), 0 0 40px rgba(193,154,74,.32), 0 3px 10px rgba(0,0,0,.45),
    inset 0 1px 0 rgba(255,255,255,.1)}
.welkom-app .js-wizard.is-intro .wizard-welkom .brand-mark img{width:32px; height:32px}
.welkom-app .js-wizard.is-intro .wizard-intro-kop .wizard-taal{border:1px solid rgba(219,185,104,.35); border-radius:999px;
  padding:9px 14px; min-height:40px; color:var(--gold-soft); background:rgba(255,255,255,.03)}
.welkom-app .js-wizard.is-intro .wizard-intro-kop .wizard-taal:hover{border-color:var(--gold-soft); background:rgba(255,255,255,.07)}

/* wenkbrauw, kop, inleiding */
.welkom-app .js-wizard.is-intro .welkom-wenkbrauw{margin:34px 0 14px; color:var(--gold-soft)}
.welkom-app .js-wizard.is-intro .wizard-welkom h1{margin:0 0 16px; font-size:clamp(2.2rem, 7.2vw, 3.2rem); line-height:1.02;
  letter-spacing:-.025em; color:#fff}
.welkom-app .js-wizard.is-intro .welkom-h1-boven{font-size:.48em; color:rgba(238,242,248,.74)}
/* gewoon wit: een verloop via background-clip:text knipte op de iPhone de staart
   van de g in "Belastingadvies" af (Jawad, 24-9-2026) */
.welkom-app .js-wizard.is-intro .welkom-h1-naam{color:#fff; padding-bottom:.06em}
.welkom-app .js-wizard.is-intro .wizard-onder{font-size:1.06rem; line-height:1.7; max-width:44ch; color:rgba(238,242,248,.8); margin-bottom:0}

/* de rij Aanmelden → Klantnummer → Inloggen: drie medaillons met een lijnicoon,
   het woord eronder in kapitalen, en een gouden pijl ertussen. Het uitgelegde
   stappenplan (drie zinnen), daarna een glazen vlak met nummerringen en daarna
   een register met nummers wilde Jawad alle drie niet (24-9-2026: "stappenplan
   is aanmelden, klantnummer, inloggen; maak het mooi visueel met pijltjes").
   De basisregels gelden ook zonder JavaScript (licht), .is-intro kleurt donker. */
.welkom-app .stappen-loop{display:flex; align-items:flex-start; max-width:none; margin:30px 0 24px; padding:26px 0 22px;
  list-style:none; border:0; border-top:1px solid rgba(134,106,46,.35); border-bottom:1px solid var(--line);
  border-radius:0; background:none; box-shadow:none}
.welkom-app .stappen-loop li{position:relative; flex:1 1 0; min-width:0; display:flex; flex-direction:column; align-items:center;
  gap:14px; padding:0 4px; margin:0; border:0; text-align:center; line-height:1.4}
.welkom-app .stappen-loop li::before, .welkom-app .stappen-loop li::after{content:none; display:none}
.welkom-app .stappen-loop li strong{display:block; order:2; margin:0; font-family:var(--sans); font-weight:600; font-size:.7rem;
  letter-spacing:.14em; text-transform:uppercase; white-space:nowrap; color:var(--ink)}
.welkom-app .loop-icoon{order:1; width:60px; height:60px; box-sizing:border-box; border-radius:50%; display:grid; place-items:center;
  border:1px solid transparent; color:var(--gold-ink);
  background:linear-gradient(180deg, #fff, var(--gold-tint)) padding-box,
             linear-gradient(150deg, #f2dba6 0%, var(--gold) 34%, var(--gold-deep) 68%, #dbb968 100%) border-box}
.welkom-app .loop-icoon svg{width:26px; height:26px; display:block}
.welkom-app .loop-pijl{position:absolute; top:30px; right:0; width:40px; transform:translate(50%, -50%); line-height:0;
  color:var(--gold-ink)}
.welkom-app .loop-pijl svg{width:100%; height:auto; display:block}
.welkom-app .stappen-loop li:last-child .loop-pijl{display:none}
.welkom-app .js-wizard.is-intro .stappen-loop{border-top-color:rgba(219,185,104,.4); border-bottom-color:rgba(238,242,248,.1)}
.welkom-app .js-wizard.is-intro .stappen-loop li strong{color:rgba(238,242,248,.92)}
.welkom-app .js-wizard.is-intro .loop-icoon{color:var(--gold-soft);
  background:linear-gradient(180deg, #10254a 0%, var(--ink) 100%) padding-box,
             linear-gradient(150deg, #f2dba6 0%, var(--gold) 34%, var(--gold-deep) 68%, #dbb968 100%) border-box;
  box-shadow:0 0 0 6px rgba(193,154,74,.05), 0 0 26px rgba(193,154,74,.22), 0 2px 8px rgba(0,0,0,.4),
    inset 0 1px 0 rgba(255,255,255,.08)}
.welkom-app .js-wizard.is-intro .loop-pijl{color:var(--gold-soft); opacity:.85}

/* verdergaan waar u gebleven was, en het privacyzinnetje */
.welkom-app .js-wizard.is-intro .hervat{margin:0 0 22px; padding:18px 20px; border-radius:16px; border:1px solid rgba(219,185,104,.3);
  background:rgba(255,255,255,.05)}
.welkom-app .js-wizard.is-intro .form-note{margin:0; font-size:.86rem; line-height:1.6; color:rgba(238,242,248,.62)}
.welkom-app .js-wizard.is-intro .welkom-schild{color:var(--gold-soft)}
.welkom-app .js-wizard.is-intro .form-note a{color:#fff; text-decoration:none; border-bottom:1px solid rgba(219,185,104,.6); padding-bottom:1px}
.welkom-app .js-wizard.is-intro .form-note a:hover{color:var(--gold-soft); border-bottom-color:currentColor}

/* onderbalk: gouden hoofdknop, stille weg terug */
.welkom-app .js-wizard.is-intro .wizard-nav{border-top-color:rgba(219,185,104,.18); padding-top:16px}
.welkom-app .js-wizard.is-intro .wizard-uitgang{color:rgba(238,242,248,.66); font-size:.86rem; letter-spacing:.01em;
  text-decoration:underline; text-decoration-thickness:1px; text-decoration-color:rgba(238,242,248,.3); text-underline-offset:5px}
.welkom-app .js-wizard.is-intro .wizard-uitgang:hover{color:#fff; text-decoration-color:var(--gold-soft)}
.welkom-app .js-wizard.is-intro .wizard-nav .btn-primary{color:#1b1305; border-color:rgba(255,247,226,.3); min-height:56px;
  font-weight:600; letter-spacing:.01em;
  background:linear-gradient(180deg, #e8cd86 0%, #cba656 46%, #b18b3e 100%);
  box-shadow:0 16px 34px -14px rgba(193,154,74,.7), inset 0 1px 0 rgba(255,255,255,.5), inset 0 -1px 0 rgba(0,0,0,.14)}
.welkom-app .js-wizard.is-intro .wizard-nav .btn-primary:hover{color:#1b1305;
  background:linear-gradient(180deg, #efd897 0%, #d6b160 46%, #ba933f 100%)}

@media (max-width:559px){
  .welkom-app .js-wizard.is-intro .wizard-welkom h1{font-size:clamp(2.05rem, 9.4vw, 2.5rem)}
  .welkom-app .js-wizard.is-intro .welkom-wenkbrauw{margin-top:28px}
  .welkom-app .stappen-loop{padding:22px 0 20px; margin:26px 0 22px}
  .welkom-app .stappen-loop li{gap:12px; padding:0 2px}
  .welkom-app .stappen-loop li strong{font-size:.62rem; letter-spacing:.12em}
  .welkom-app .loop-icoon{width:52px; height:52px}
  .welkom-app .loop-icoon svg{width:23px; height:23px}
  .welkom-app .loop-pijl{top:26px; width:30px}
  .welkom-app .js-wizard::after{right:-80px; top:calc(10px + env(safe-area-inset-top,0px)); width:330px; height:330px}
}
@media (max-width:359px){
  .welkom-app .stappen-loop li strong{font-size:.56rem; letter-spacing:.1em}
  .welkom-app .loop-icoon{width:46px; height:46px}
  .welkom-app .loop-pijl{top:23px; width:24px}
}
@media (prefers-reduced-motion:reduce){
  .welkom-app .js-wizard::after{animation:none; transition:none}
}