/* Lettertypes zelf gehost (11-9-2026, B7): Inter en Source Serif 4 als variabel woff2,
   latin + latin-ext, zelfde tekenbereiken als Google Fonts. */
@font-face{font-family:'Inter'; font-style:normal; font-weight:400 700; 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}
@font-face{font-family:'Inter'; font-style:normal; font-weight:400 700; 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:'Source Serif 4'; font-style:normal; font-weight:400 700; font-display:swap; font-optical-sizing:auto;
  src:url(fonts/source-serif-4-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}
@font-face{font-family:'Source Serif 4'; font-style:normal; font-weight:400 700; font-display:swap; font-optical-sizing:auto;
  src:url(fonts/source-serif-4-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}

/* ==========================================================================
   Valorem Belastingadvies — vormgeving
   Kleuren, typografie en opmaak voor de hele site.
   ========================================================================== */

:root{
  --ink:#07172f;            /* marineblauw uit het logo */
  --ink-2:#0e2145;
  --ink-3:#17335c;
  --gold:#c19a4a;           /* goud uit het logo */
  --gold-soft:#dbb968;
  --gold-ink:#866a2e;       /* goud voor TEKST en ICONEN op een lichte ondergrond.
                               #c19a4a haalt op wit maar 2,63:1 en zakt daarmee door de
                               leesbaarheidsgrens (4,5:1 voor tekst, 3:1 voor iconen).
                               Deze tint heeft dezelfde kleurtoon en verzadiging, alleen
                               donkerder, en haalt 4,5:1 op alle vier de lichte vlakken
                               (wit, paper-2, paper-3, gold-tint). Op marineblauw blijft
                               #c19a4a staan: daar is het met 6,81:1 juist prima en hoort
                               het bij het logo. Gemeten 9-9-2026. */
  --gold-tint:#f7f1e2; --gold-deep:#8a6318; --fs-2xs:.7rem; --fs-xs:.8rem; --fs-sm:.875rem; --fs-body:1rem; --fs-lead:1.125rem; --fs-h3:1.25rem;
  --paper:#ffffff;
  --paper-2:#f7f8fa;
  --paper-3:#eef1f5;
  --text:#1d2b39;
  --text-soft:#54657a;
  --line:#e2e7ee;
  --line-dark:rgba(255,255,255,.14);
  --radius:16px;
  --radius-lg:24px;
  --shadow-sm:0 1px 2px rgba(7,23,47,.06), 0 6px 18px -8px rgba(7,23,47,.12);
  --shadow-md:0 2px 6px rgba(7,23,47,.05), 0 18px 40px -16px rgba(7,23,47,.18);
  --shadow-lg:0 4px 12px rgba(7,23,47,.06), 0 34px 80px -28px rgba(7,23,47,.28);
  --serif:"Source Serif 4", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --sans:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --maxw:1180px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--text);
  font-family:var(--sans); font-size:17px; line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img,svg,video{max-width:100%; height:auto; display:block}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--serif); font-weight:600; line-height:1.18; color:var(--ink); margin:0 0 .5em}
h1{font-size:clamp(2.1rem,4.6vw,3.5rem); letter-spacing:-.015em}
h2{font-size:clamp(1.65rem,3vw,2.5rem); letter-spacing:-.01em}
h3{font-size:var(--fs-h3)}
p{margin:0 0 1em}
.container{width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:22px}

.grad{color:var(--gold)}
.serif{font-family:var(--serif)}

/* --- skip link ---------------------------------------------------------- */
.skip{position:absolute; left:-9999px; top:0; background:var(--ink); color:#fff; padding:10px 16px; z-index:200; border-radius:0 0 8px 0}
.skip:focus{left:0}

/* --- header ------------------------------------------------------------- */
.site-header{
  position:sticky; top:0; z-index:80; background:rgba(255,255,255,.88);
  backdrop-filter:saturate(180%) blur(12px); border-bottom:1px solid var(--line);
}
.nav{display:flex; align-items:center; gap:18px; min-height:74px}
.brand{display:inline-flex; align-items:center; gap:13px; text-decoration:none; font-family:var(--serif)}
/* Beeldmerk als medaillon: schijf in het marineblauw van het logo, met een
   gouden haarlijn en de V erin. Rond in plaats van een afgeronde vierkant -
   een vierkant met ronde hoeken leest als een app-icoon, een schijf als een
   zegel. Dezelfde vorm op een lichte en een donkere kop. */
.brand-mark{
  width:42px; height:42px; flex:0 0 auto; border-radius:50%;
  display:inline-grid; place-items:center; border:1px solid transparent;
  /* Twee verlopen over elkaar: de schijf binnen de rand, en de rand zelf als
     goudverloop. Een vlakke gouden lijn van 50% dekking oogde dof; goud is een
     metaal en dat zie je pas als de rand licht vangt (Jawad 10-9-2026: "ziet er
     droog uit"). Het lichte bovenrandje en de schaduw geven de schijf diepte. */
  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 1px 3px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.08);
}
.brand-mark img{width:28px; height:28px; display:block}
/* Het woordmerk in de kop spreekt dezelfde taal als het staande logo
   (`logo-valorem.png`): KAPITALEN in de serif, ruime letterafstand, en een
   gouden haarlijn tussen de naam en de ondertitel.
   Het staande logo zelf kan hier niet staan: de regel BELASTINGADVIES is
   daarin 5,6% van de hoogte, dus die zou bij een kop van 74 px vier pixels
   hoog worden. Leesbaar (9 px) vraagt een logo van 159 px en dus een kop van
   bijna 180 px - dat kost op elke pagina een kwart scherm. Vandaar dezelfde
   typografie in een liggende opbouw.
   Beide regels staan op .12em letterafstand; daardoor komen VALOREM en
   BELASTINGADVIES even breed uit en loopt de haarlijn precies over de volle
   breedte, net als in het logo. Verander je de een, meet dan de ander. */
.brand-name{font-family:var(--serif); font-size:1.06rem; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase; color:var(--ink);
  white-space:nowrap; line-height:1.15}
.brand-sub{display:block; font-family:var(--sans); font-size:.56rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--gold-ink); font-weight:600;
  margin-top:5px; padding-top:5px; border-top:1px solid rgba(193,154,74,.45)}
.nav-links{margin-left:auto; display:flex; align-items:center; gap:8px}
.nav-links a{
  text-decoration:none; color:var(--text-soft); font-weight:500; font-size:.95rem;
  padding:9px 13px; border-radius:9px; transition:color .18s, background .18s;
  white-space:nowrap;
}
.nav-links a:hover{color:var(--ink); background:var(--paper-3)}
.nav-links a.active{color:var(--ink); font-weight:600}
.nav-cta{background:var(--ink)!important; color:#fff!important; padding:11px 20px!important}
.nav-cta:hover{background:var(--ink-2)!important}
.lang-toggle{display:inline-flex; align-items:center; gap:7px; font-size:.85rem!important; font-weight:600!important}
.flag{width:20px; height:14px; border-radius:2px; box-shadow:0 0 0 1px rgba(0,0,0,.08)}
.nav-toggle{
  margin-left:auto; display:none; width:44px; height:40px; border:1px solid var(--line);
  border-radius:12px; background:#fff; cursor:pointer; padding:10px 11px; gap:4px;
  flex-direction:column; justify-content:center;
}
.nav-toggle span{display:block; height:2px; background:var(--ink); border-radius:2px}

/* Het volle menu past op één regel vanaf 1103 px (gemeten 10-9-2026, met
   Word klant en Klantportaal erbij). Daaronder de hamburger; verander je het
   menu, meet dan opnieuw en pas ook de 1140 px bij .over-dark hieronder aan. */
@media (max-width:1220px){
  .nav-toggle{display:flex}
  .nav-links{
    position:absolute; left:0; right:0; top:100%; background:#fff; border-bottom:1px solid var(--line);
    flex-direction:column; align-items:stretch; gap:2px; padding:12px 22px 20px; display:none;
    box-shadow:var(--shadow-md);
  }
  .nav-links.open{display:flex}
  .nav-links a{padding:13px 12px}
  .nav-cta{text-align:center; margin-top:6px}
  /* Klantportaal is geen marketinglink maar de inlog voor bestaande klanten -
     een streep erboven zet hem zichtbaar apart van Word klant/Contact
     (12-9-2026, Jawad: "waar moet alles staan"). */
  .nav-links a[href="portaal.html"]{border-top:1px solid var(--line); margin-top:10px; padding-top:16px}
  .lang-toggle{justify-content:flex-start}
}

/* --- knoppen ------------------------------------------------------------ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:13px 24px; border-radius:12px; border:1px solid transparent; cursor:pointer;
  font:inherit; font-weight:600; font-size:var(--fs-body); text-decoration:none; white-space:nowrap;
  transition:transform .16s, background .18s, border-color .18s, color .18s, box-shadow .18s;
}
.btn svg{width:17px; height:17px}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:var(--gold); color:#231703; box-shadow:0 8px 22px rgba(193,154,74,.28)}
.btn-primary:hover{background:var(--gold-soft)}
.btn-ink{background:var(--ink); color:#fff}
.btn-ink:hover{background:var(--ink-2)}
.btn-ghost{background:transparent; color:var(--ink); border-color:var(--line)}
.btn-ghost:hover{border-color:var(--ink); background:var(--paper-2)}
.btn-ghost-light{background:transparent; color:#fff; border-color:var(--line-dark)}
.btn-ghost-light:hover{border-color:#fff; background:rgba(255,255,255,.08)}
.btn-lg{padding:15px 28px; font-size:var(--fs-body)}
.btn-row{display:flex; flex-wrap:wrap; gap:12px; margin-top:26px}

/* --- hero (home) -------------------------------------------------------- */
.hero{position:relative; background:var(--ink); color:#fff; overflow:hidden; padding:92px 0 96px}
.hero::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(900px 420px at 78% 8%, rgba(193,154,74,.24), transparent 62%),
    radial-gradient(700px 380px at 8% 92%, rgba(59,110,158,.28), transparent 60%);
}
.hero::after{
  content:""; position:absolute; inset:0; opacity:.35; pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
                   linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(70% 60% at 50% 40%, #000 30%, transparent 100%);
}
.hero .container{position:relative; z-index:2}
.hero h1{color:#fff; max-width:16ch}
.hero .lead{font-size:var(--fs-lead); color:rgba(255,255,255,.82); max-width:56ch; margin-bottom:0}
.eyebrow{
  display:inline-flex; align-items:center; gap:9px; font-size:var(--fs-xs); font-weight:700;
  letter-spacing:.17em; text-transform:uppercase; color:var(--gold-ink); margin-bottom:18px;
}
.eyebrow::before{content:""; width:26px; height:1px; background:var(--gold); opacity:.7}
.hero-points{list-style:none; margin:34px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:12px 28px}
.hero-points li{display:flex; align-items:center; gap:9px; font-size:var(--fs-body); color:rgba(255,255,255,.85)}
.hero-points svg{width:16px; height:16px; color:var(--gold-soft); flex:0 0 auto}

/* --- paginakop (subpagina's) -------------------------------------------- */
.page-hero{background:var(--ink); color:#fff; padding:74px 0 66px; position:relative; overflow:hidden}
.page-hero::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(720px 340px at 82% 0%, rgba(193,154,74,.22), transparent 62%);
}
.page-hero .container{position:relative; z-index:2}
.page-hero h1{color:#fff; max-width:20ch}
.page-hero p{color:rgba(255,255,255,.8); max-width:62ch; font-size:var(--fs-lead); margin-bottom:0}
.crumbs{font-size:var(--fs-sm); color:rgba(255,255,255,.55); margin-bottom:14px}
.crumbs a{text-decoration:none; color:rgba(255,255,255,.7)}
.crumbs a:hover{color:#fff}
/* eyebrow op de donkere paginakop: goud mag daar wel, --gold-ink is voor licht
   (12-9-2026, toen /welkom een page-hero kreeg) */
.page-hero .eyebrow{color:var(--gold)}
.page-hero .eyebrow::before{background:var(--gold); opacity:.85}

/* --- secties ------------------------------------------------------------ */
.section{padding:96px 0 88px}
.section--tight{padding:60px 0 52px}
.section--alt{background:var(--paper-2)}
.section--line{border-top:1px solid var(--line)}
.section-head{max-width:64ch; margin-bottom:46px}
.section-head p{color:var(--text-soft); font-size:var(--fs-lead); margin-bottom:0}
.section-head--center{margin-inline:auto; text-align:center}
.section-head--center .eyebrow{justify-content:center}

/* --- strip met werkgebieden -------------------------------------------- */
.strip{background:var(--ink-2); color:rgba(255,255,255,.72); padding:20px 0}
.strip p{margin:0 0 10px; font-size:var(--fs-xs); letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.45)}
.strip-row{display:flex; flex-wrap:wrap; gap:10px 26px; font-size:var(--fs-body); font-family:var(--serif)}

/* --- kaarten ------------------------------------------------------------ */
.grid{display:grid; gap:20px}
.grid-3{grid-template-columns:repeat(auto-fit,minmax(288px,1fr))}
.grid-2{grid-template-columns:repeat(auto-fit,minmax(340px,1fr))}
.card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:30px 28px; box-shadow:var(--shadow-sm); position:relative;
  transition:transform .2s, box-shadow .2s, border-color .2s;
}
.card:hover{transform:translateY(-3px); box-shadow:var(--shadow-md); border-color:#d6dce6}
.card h3{margin-bottom:.4em}
.card p{color:var(--text-soft); font-size:var(--fs-body); margin-bottom:0}
.card-icon{
  width:46px; height:46px; border-radius:12px; display:grid; place-items:center; margin-bottom:18px;
  background:var(--gold-tint); color:var(--gold-ink); border:1px solid rgba(193,154,74,.2);
}
.card-icon svg{width:23px; height:23px}
.card-link{
  display:inline-flex; align-items:center; gap:7px; margin-top:18px; text-decoration:none;
  font-weight:600; font-size:var(--fs-body); color:var(--ink); border-bottom:1px solid rgba(7,23,47,.18); padding-bottom:2px;
}
.card-link svg{width:15px; height:15px; transition:transform .18s}
.card-link:hover{color:var(--gold-ink)}
.card-link:hover svg{transform:translateX(3px)}

/* --- lijsten met vinkjes ------------------------------------------------ */
.ticks{list-style:none; margin:0; padding:0; display:grid; gap:13px}
.ticks li{display:flex; gap:12px; align-items:flex-start; color:var(--text-soft)}
.ticks li strong{color:var(--text); font-weight:600}
.ticks svg{width:19px; height:19px; flex:0 0 auto; color:var(--gold-ink); margin-top:3px}
.ticks--2{grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); gap:14px 30px}
/* --- stappen ------------------------------------------------------------ */
.steps{counter-reset:step; display:grid; gap:20px; grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.step{position:relative; padding:28px 26px; background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg)}
.step::before{
  counter-increment:step; content:counter(step,decimal-leading-zero);
  font-family:var(--serif); font-size:1.5rem; color:var(--gold-ink); display:block; margin-bottom:12px;
}
.step h3{font-size:var(--fs-lead)}
.step p{color:var(--text-soft); font-size:var(--fs-body); margin-bottom:0}

/* --- twee kolommen ------------------------------------------------------ */
.split{display:grid; gap:46px; grid-template-columns:1fr 1fr; align-items:start}
@media (max-width:900px){.split{grid-template-columns:1fr; gap:34px}}
.panel{background:var(--ink); color:#fff; border-radius:var(--radius-lg); padding:36px 34px}
.panel h3{color:#fff}
.panel p{color:rgba(255,255,255,.78)}
.panel .ticks li{color:rgba(255,255,255,.78)}
.panel .ticks li strong{color:#fff}
.panel .ticks svg{color:var(--gold-soft)}

/* --- quote / kernzin ---------------------------------------------------- */
.pull{
  font-family:var(--serif); font-size:clamp(1.3rem,2.4vw,1.85rem); line-height:1.45; color:var(--ink);
  border-left:3px solid var(--gold); padding-left:24px; margin:0;
}

/* --- FAQ ---------------------------------------------------------------- */
.faq{display:grid; gap:12px; max-width:860px}
.faq details{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:2px 22px}
.faq summary{
  cursor:pointer; list-style:none; padding:18px 30px 18px 0; font-weight:600; color:var(--ink);
  position:relative; font-size:var(--fs-body);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:""; position:absolute; right:2px; top:50%; width:10px; height:10px; margin-top:-6px;
  border-right:2px solid var(--gold); border-bottom:2px solid var(--gold);
  transform:rotate(45deg); transition:transform .2s;
}
.faq details[open] summary::after{transform:rotate(-135deg); margin-top:-2px}
.faq p{color:var(--text-soft); margin:0 0 18px; font-size:var(--fs-body)}

/* --- CTA-band ----------------------------------------------------------- */
.cta{background:var(--ink); color:#fff; border-radius:var(--radius-lg); padding:52px 44px; position:relative; overflow:hidden}
.cta::before{content:""; position:absolute; inset:0; background:radial-gradient(620px 300px at 88% 10%, rgba(193,154,74,.26), transparent 62%)}
.cta > *{position:relative; z-index:2}
.cta h2{color:#fff; max-width:22ch}
.cta p{color:rgba(255,255,255,.8); max-width:60ch}
@media (max-width:640px){.cta{padding:38px 26px}}

/* --- contact ------------------------------------------------------------ */
.contact-grid{display:grid; gap:40px; grid-template-columns:1.15fr .85fr; align-items:start}
@media (max-width:900px){.contact-grid{grid-template-columns:1fr}}
.field{display:grid; gap:7px; margin-bottom:16px}
.field label{font-size:var(--fs-sm); font-weight:600; color:var(--ink)}
.field input,.field select,.field textarea{
  font:inherit; font-size:var(--fs-body); color:var(--text); background:#fff;
  border:1px solid var(--line); border-radius:12px; padding:13px 15px; width:100%;
  transition:border-color .16s, box-shadow .16s;
}
.field textarea{min-height:140px; resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none; border-color:var(--gold); box-shadow:0 0 0 3px rgba(193,154,74,.16);
}
.field-hint{font-size:var(--fs-sm); color:var(--text-soft)}
.verplicht{margin-left:7px; font-size:.66rem; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--gold-ink); vertical-align:1px}
.form-note{font-size:var(--fs-sm); color:var(--text-soft); margin-top:14px}

/* ---------------------------------------------------------------------------
   DOORKLIK-AANMELDING /welkom (12-9-2026, Jawad: "geen scroll-element in de
   iPhone-browser invullen, mooie overgang naar de volgende pagina, de hele tijd
   op 1 pagina").

   Met JavaScript wordt het formulier een SCHERMVULLENDE LAAG over de pagina:
   smalle balk boven, een stap in het midden, knoppen onderaan vast. De pagina
   eronder scrollt niet mee (html.wizard-open). Elke stap is kort genoeg om op
   een telefoon te passen; alleen bij een grote letterinstelling schuift de
   inhoud binnen .wizard-vak, niet de hele pagina.

   Zonder JavaScript gebeurt hier niets: dan staan alle stappen onder elkaar en
   is het een gewoon lang formulier met een verzendknop. Alles wat de laag eigen
   is hangt daarom aan .js-wizard.
--------------------------------------------------------------------------- */
/* /welkom IS de app: head() en footer() krijgen app=True (geen Google-tag, geen
   cookiebalk) en header() wordt helemaal niet aangeroepen. De voet komt nog wel
   uit footer() - die zetten we hier uit. De klasse staat bovenaan in de pagina,
   voor de eerste verf, zodat er niets opflikkert. */
html.welkom-app .site-footer{display:none}
/* De zweefknoppen (bellen, WhatsApp) horen bij de website. Hier zouden ze
   over de knoppenbalk van de wizard vallen; de klant is hier al binnen. */
html.welkom-app .zweef{display:none}
html.welkom-app, html.welkom-app body{background:var(--paper)}

.wizard-welkom .welkom-merk{display:block; width:62px; margin:0 0 20px}
.wizard-welkom .welkom-merk img, .wizard-welkom .welkom-merk svg{display:block; width:62px; height:auto}
.wizard-welkom h2{font-size:1.75rem}

/* De laag zelf. Drie rijen: de balk boven, de stap in het midden (de enige rij
   die mag schuiven) en de knoppen onderaan vast, boven de duim. De pagina
   eronder staat stil zolang de laag open is. */
html.wizard-open, html.wizard-open body{height:100%; overflow:hidden}
.js-wizard{
  position:fixed; inset:0; z-index:60; max-width:none; margin:0;
  display:grid; grid-template-rows:auto minmax(0,1fr) auto;
  background:var(--paper);
}
/* ⛔ De rijen EXPLICIET toewijzen. Op het openingsscherm staat de bovenbalk uit;
   zonder deze regels schoof het middenvak naar rij 1 (auto, dus zo hoog als de
   inhoud) en de knoppenbalk naar rij 2 - op een iPhone SE viel die daardoor
   onder de onderkant van het scherm. Gevonden doordat een test de knop
   "Beginnen" niet kon aanklikken (12-9-2026). */
.js-wizard .wizard-balkje{grid-row:1}
.js-wizard .wizard-vak{grid-row:2}
.js-wizard .wizard-nav{grid-row:3}

/* De bovenbalk: het medaillon links, de stapteller rechts, en een dunne gouden
   draad over de volle breedte op de onderrand. Die draad IS de voortgang; een
   dikke balk in beeld laat een formulier langer lijken dan het is. */
.js-wizard .wizard-balkje{
  position:relative; display:flex; align-items:center; gap:14px;
  justify-content:space-between; background:#fff;
  border-bottom:1px solid var(--line);
  padding:calc(13px + env(safe-area-inset-top,0px)) max(20px, calc((100% - 560px) / 2)) 13px;
}
.wizard-voortgang{display:none}
.js-wizard .wizard-voortgang{display:block; flex:0 0 auto}
.js-wizard.is-intro .wizard-voortgang{display:none}
.js-wizard .wizard-teller{margin:0; white-space:nowrap}
.js-wizard .wizard-balk{position:absolute; left:0; right:0; bottom:-1px;
  height:2px; border-radius:0; background:transparent; overflow:visible}
.wizard-balk{height:5px; border-radius:999px; background:var(--paper-3); overflow:hidden}
.wizard-balk span{display:block; height:100%; width:10%; border-radius:999px;
  background:linear-gradient(90deg, var(--gold), var(--gold-soft));
  transition:width .34s cubic-bezier(.4,0,.2,1)}
.wizard-teller{margin:7px 0 0; font-size:var(--fs-sm); color:var(--text-soft)}
.wizard-teller b, .wizard-teller i{font-style:normal; font-weight:700; color:var(--ink)}

.js-wizard .wizard-vak{
  overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain;
  padding:26px 20px 10px;
}
.js-wizard .wizard-stap{max-width:560px; margin:0 auto}

/* De overgang: vooruit schuift van rechts in, terug van links. */
.js-wizard .wizard-stap{animation:stap-rechts .3s cubic-bezier(.22,.9,.3,1) both}
.js-wizard.is-terug .wizard-stap{animation-name:stap-links}
@keyframes stap-rechts{from{opacity:0; transform:translateX(26px)} to{opacity:1; transform:none}}
@keyframes stap-links{from{opacity:0; transform:translateX(-26px)} to{opacity:1; transform:none}}

.wizard-stap{margin-bottom:30px}
.js-wizard .wizard-stap{margin-bottom:0}
.wizard-kop{font-size:var(--fs-xs); font-weight:700; letter-spacing:.17em;
  text-transform:uppercase; color:var(--gold-ink); margin:0 0 8px}
.wizard-stap h2{font-size:1.5rem; margin:0 0 8px; line-height:1.2}
.wizard-onder{color:var(--text-soft); margin:0 0 22px; max-width:50ch}

.js-wizard .wizard-nav{
  display:flex; gap:12px; align-items:center; background:#fff;
  border-top:1px solid var(--line);
  padding:14px max(20px, calc((100% - 560px) / 2)) calc(14px + env(safe-area-inset-bottom,0px));
}
/* Een weg terug naar de site, alleen op het openingsscherm. Sinds het menu-item
   "Word klant" rechtstreeks hierheen gaat (12-9-2026) kan iemand hier per
   ongeluk belanden; zonder uitgang zit hij dan vast in een formulier. Op de
   volgende schermen staat op die plek "Vorige", en daar hoort deze link niet:
   dan zou terug twee dingen betekenen. Zonder JavaScript staat hij er ook niet,
   want dan is het gewoon een lange pagina met een menu erboven. */
.wizard-uitgang{display:none}
.js-wizard.is-intro .wizard-uitgang{
  display:inline-block; font-size:var(--fs-sm); color:rgba(238,242,248,.66);
  text-decoration:underline; text-underline-offset:3px; padding:6px 2px}
.js-wizard.is-intro .wizard-uitgang:hover{color:#fff}
.js-wizard .wizard-nav .btn{margin:0}
.js-wizard .wizard-nav .btn-primary{flex:1 1 auto; justify-content:center}
.wizard-nav{display:flex; flex-wrap:wrap; gap:12px; margin-top:14px}

/* De keuzekaarten: het hele vlak is klikbaar, ook met de duim. */
.kaartkeuzes{display:grid; gap:10px; margin-bottom:18px}
@media (min-width:560px){ .kaartkeuzes--twee{grid-template-columns:repeat(2, minmax(0,1fr))} }
/* Compacte kaarten blijven OOK op een telefoon twee kolommen: de labels zijn
   kort ("Btw-aangifte", "Vof") en in een kolom zouden negen kaarten de stap te
   hoog maken - precies wat we met de doorklikopzet wilden voorkomen. */
.kaartkeuzes--compact.kaartkeuzes--twee{grid-template-columns:repeat(2, minmax(0,1fr))}
.kaartkeuzes--compact{gap:8px}
.kaartkeuze{position:relative; display:flex; align-items:center; gap:13px; min-width:0;
  padding:15px 17px; border:1px solid var(--line); border-radius:14px; background:#fff;
  cursor:pointer; transition:border-color .16s, background .16s, box-shadow .16s}
.kaartkeuzes--compact .kaartkeuze{padding:12px 10px; gap:9px}
.kaartkeuzes--compact .kaartkeuze-tekst strong{font-size:.93rem}
.kaartkeuzes--compact .kaartkeuze-vink{width:20px; height:20px}
.kaartkeuze:hover{border-color:var(--gold); background:#fffdf8}
.kaartkeuze input{position:absolute; opacity:0; width:1px; height:1px; margin:0}
.kaartkeuze-vink{flex:0 0 auto; width:22px; height:22px; border-radius:50%;
  border:1.5px solid var(--line); background:#fff; display:grid; place-items:center;
  transition:border-color .16s, background .16s}
.kaartkeuze input[type="checkbox"] ~ .kaartkeuze-vink{border-radius:7px}
.kaartkeuze-vink::after{content:""; width:10px; height:10px; border-radius:50%;
  background:var(--gold-ink); transform:scale(0); transition:transform .16s}
.kaartkeuze input[type="checkbox"] ~ .kaartkeuze-vink::after{border-radius:2px}
.kaartkeuze-tekst{display:block; line-height:1.4; min-width:0; overflow-wrap:break-word; hyphens:manual}
.kaartkeuze-tekst strong{display:block; font-weight:600; color:var(--ink)}
.kaartkeuze-tekst small{display:block; margin-top:3px; font-size:var(--fs-sm); color:var(--text-soft)}
.kaartkeuze:has(input:checked){border-color:var(--gold); background:var(--gold-tint);
  box-shadow:0 0 0 1px var(--gold)}
.kaartkeuze:has(input:checked) .kaartkeuze-vink{border-color:var(--gold-ink); background:#fff}
.kaartkeuze:has(input:checked) .kaartkeuze-vink::after{transform:scale(1)}
.kaartkeuze:has(input:focus-visible){outline:2px solid var(--gold); outline-offset:3px}
/* De pakketstap verbergt kaarten met het hidden-attribuut. Dat werkt al via
   [hidden]{display:none !important} bovenin; hier staat het er nog eens bij
   omdat .kaartkeuze zelf display:flex zet en dat anders verwarrend leest. */
.kaartkeuze[hidden]{display:none}

/* Uitklapbare uitleg, zodat de DigiD-tekst de stap niet te hoog maakt. */
.uitleg-lijst{margin-top:13px; border-top:1px solid var(--line)}
.uitleg-lijst details{border-bottom:1px solid var(--line)}
.uitleg-lijst summary{cursor:pointer; padding:9px 2px; font-weight:600; color:var(--ink);
  font-size:var(--fs-sm); list-style:none; display:flex; align-items:center; gap:10px}
.uitleg-lijst summary::-webkit-details-marker{display:none}
.uitleg-lijst summary::after{content:""; margin-left:auto; width:7px; height:7px;
  border-right:2px solid var(--gold-ink); border-bottom:2px solid var(--gold-ink);
  transform:rotate(45deg); transition:transform .2s}
.uitleg-lijst details[open] summary::after{transform:rotate(-135deg)}
.uitleg-lijst details > *:not(summary){margin:0 0 13px; color:var(--text); font-size:var(--fs-sm)}

.let-blok{background:var(--gold-tint); border:1px solid rgba(193,154,74,.28);
  border-radius:var(--radius); padding:15px 17px; margin:0 0 18px; line-height:1.55;
  font-size:var(--fs-sm)}

/* Het controlescherm. */
.controle-lijst dl{display:grid; grid-template-columns:42% minmax(0,1fr); gap:5px 14px;
  margin:0 0 11px; padding:0 0 11px; border-bottom:1px solid var(--line)}
.controle-lijst dl:last-of-type{border-bottom:0}
.controle-lijst dt{color:var(--text-soft); font-size:var(--fs-sm)}
.controle-lijst dd{margin:0; min-width:0; color:var(--ink); overflow-wrap:anywhere;
  font-weight:600; font-size:var(--fs-sm)}
.controle-lijst dt{line-height:1.35}
.keuze.akkoord{margin-top:8px}

.stappen{counter-reset:stap; list-style:none; margin:0 0 8px; padding:0; max-width:60ch}
.stappen li{position:relative; counter-increment:stap; padding:0 0 0 44px; margin:0 0 14px; line-height:1.6}
.stappen li::before{content:counter(stap); position:absolute; left:0; top:-1px;
  width:30px; height:30px; border-radius:50%; display:grid; place-items:center;
  background:var(--gold-tint); color:var(--gold-ink); font-weight:700; font-size:.85rem}
/* De vette kop op zijn eigen regel, de toelichting eronder - niet als een
   doorlopende zin (Jawad, 12-9-2026: "de volgende zin hoort eronder te
   beginnen"). Zelfde patroon als .kaartkeuze-tekst hierboven. */
.stappen li strong{display:block; margin-bottom:2px}
.veldkop{font-size:var(--fs-sm); font-weight:600; color:var(--ink); margin:20px 0 9px}
.keuzes{display:grid; gap:8px; margin-top:2px}
.keuze{display:flex; gap:10px; align-items:flex-start; font-size:var(--fs-body);
  font-weight:400; color:var(--text); line-height:1.5; cursor:pointer}
.keuze input{width:18px; height:18px; flex:0 0 auto; margin-top:2px; accent-color:#c19a4a}
.field .keuze{font-weight:400}
/* ⛔ ALLEEN voor de fallback zonder JavaScript, dan staan alle stappen onder
   elkaar als een gewoon lang formulier en is 660px een prettige leesbreedte.
   Draait het script wel (.js-wizard), dan is dit dezelfde klasse-specificiteit
   als .js-wizard{max-width:none} en wint deze regel puur op volgorde in het
   bestand - waardoor de schermvullende laag werd teruggeknepen tot 660px en
   op een laptop als een op de rand geplakte telefoon oogde ("waarom is de
   aanmelding op de laptop iphone achtig", Jawad, 12-9-2026). Vandaar :not(). */
.aanmeld-form:not(.js-wizard){max-width:660px}
.page-hero--kort p{max-width:54ch}

@media (max-width:559px){
  .js-wizard .wizard-vak{padding:22px 16px 8px}
  .js-wizard .wizard-balkje{padding-left:16px; padding-right:16px}
  .js-wizard .wizard-nav{padding-left:16px; padding-right:16px}
  .wizard-stap h2{font-size:1.35rem}
}

@media (prefers-reduced-motion:reduce){
  .js-wizard, .js-wizard .wizard-stap{animation:none}
  .wizard-balk span{transition:none}
}

.form-success{display:none; background:var(--gold-tint); border:1px solid rgba(193,154,74,.32); border-radius:var(--radius); padding:26px}
.form-success.show{display:block}
.form-success h3{margin-bottom:.3em}
.form-success p{margin-bottom:0; color:var(--text-soft)}
.hp{position:absolute; left:-9999px}
.contact-card{background:var(--paper-2); border:1px solid var(--line); border-radius:var(--radius-lg); padding:30px 28px}
.contact-card h3{font-size:var(--fs-lead)}
.contact-list{list-style:none; margin:0; padding:0; display:grid; gap:16px}
.contact-list li{display:flex; gap:13px; align-items:flex-start}
.contact-list svg{width:19px; height:19px; color:var(--gold-ink); flex:0 0 auto; margin-top:3px}
.contact-list a{color:var(--ink); text-decoration:none; border-bottom:1px solid rgba(7,23,47,.2)}
.contact-list a:hover{color:var(--gold-ink)}
.contact-list span{display:block; font-size:var(--fs-sm); color:var(--text-soft)}

/* --- footer ------------------------------------------------------------- */
.site-footer{background:var(--ink); color:rgba(255,255,255,.7); padding:62px 0 30px; margin-top:0}
.site-footer .brand-name{color:#fff}
.site-footer .brand-sub{color:rgba(255,255,255,.5)}
.footer-grid{display:grid; gap:34px 30px; grid-template-columns:1.7fr 1fr 1.25fr 1.25fr; align-items:start}
.footer-mail{display:inline-block; margin-top:14px; color:var(--gold-soft); text-decoration:none; font-size:var(--fs-body)}
.footer-mail:hover{text-decoration:underline}
@media (max-width:1100px){.footer-grid{grid-template-columns:1fr 1fr 1fr}
  .footer-grid > :first-child{grid-column:1 / -1}}
@media (max-width:900px){.footer-grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.footer-grid{grid-template-columns:1fr}}
.footer-about{margin-top:16px; font-size:var(--fs-body); color:rgba(255,255,255,.62); max-width:38ch}
.footer-col h4{color:#fff; font-family:var(--sans); font-size:var(--fs-xs); letter-spacing:.15em; text-transform:uppercase; margin-bottom:16px}
.footer-col a{display:block; text-decoration:none; color:rgba(255,255,255,.68); font-size:var(--fs-body); padding:5px 0}
.footer-col a:hover{color:var(--gold-soft)}
.footer-bottom{
  margin-top:44px; padding-top:22px; border-top:1px solid var(--line-dark);
  display:flex; flex-wrap:wrap; gap:10px 26px; justify-content:space-between;
  font-size:var(--fs-sm); color:rgba(255,255,255,.5);
}
.footer-disclaimer{margin-top:16px; font-size:var(--fs-xs); color:rgba(255,255,255,.38); max-width:80ch}

/* --- reveal-animatie ---------------------------------------------------- */
/* 11-9-2026 (luxe-ronde): een animatie op opacity + translate in plaats van een
   transition op transform. De oude regel zette transform:none op elk
   onthuld element en won daarmee van de hover-lift van .card en het
   meekantelen; translate is een eigen eigenschap en botst er niet mee.
   Langer en zachter dan eerst (0,55 s ease). De vervaging alleen op brede
   schermen (op een telefoon kost filter op grote blokken beeldjes), en dat
   verschil zit in een variabele, niet in een andere animatienaam: een
   wisselende naam laat alles opnieuw inkomen zodra het venster over 961 px
   springt. Geen to-stap: het eind is gewoon de stand van .reveal.in. */
.reveal{opacity:0; --onthul-blur:0px}
.reveal.in{opacity:1; animation:onthul .95s cubic-bezier(.16,1,.3,1) backwards}
@keyframes onthul{from{opacity:0; translate:0 26px; filter:blur(var(--onthul-blur))}}
@media (min-width:961px){ .reveal{--onthul-blur:5px} }
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1}
  .reveal.in{animation:none}
  .btn:hover,.card:hover{transform:none}
  html{scroll-behavior:auto}
}

/* --- kleine hulpjes ----------------------------------------------------- */
.mt-0{margin-top:0}
.mb-0{margin-bottom:0}
.muted{color:var(--text-soft)}
.small{font-size:var(--fs-sm)}
.center{text-align:center}

/* ==========================================================================
   Beweging & verfijning
   ========================================================================== */

/* --- scroll-voortgangsbalk in de header --------------------------------- */
.scroll-progress{
  position:absolute; left:0; bottom:-1px; height:2px; width:100%;
  transform:scaleX(var(--sp,0)); transform-origin:0 50%;
  background:linear-gradient(90deg,#8a6318,var(--gold) 55%,var(--gold-soft));
  pointer-events:none; z-index:90;
}
.scroll-progress-head{
  position:absolute; bottom:-2px; left:calc(var(--sp,0) * 100%); width:26px; height:4px;
  margin-left:-13px; border-radius:4px; background:var(--gold-soft);
  filter:blur(4px); opacity:0; pointer-events:none; z-index:91;
}

/* --- transparante header boven donkere secties -------------------------- */
.site-header--transparent{
  background:transparent; border-bottom-color:transparent; backdrop-filter:none;
  transition:background .3s ease, border-color .3s ease, backdrop-filter .3s ease;
}
.site-header--transparent.is-solid{
  background:rgba(255,255,255,.9); border-bottom-color:var(--line);
  backdrop-filter:saturate(180%) blur(12px);
}
.site-header--transparent.over-dark .brand-name{color:#fff}
.site-header--transparent.over-dark .brand-sub{color:var(--gold)}
.site-header--transparent.over-dark .nav-links > a{color:rgba(255,255,255,.78)}
.site-header--transparent.over-dark .nav-links > a:hover{color:#fff; background:rgba(255,255,255,.1)}
.site-header--transparent.over-dark .nav-links > a.active{color:#fff}
.site-header--transparent.over-dark .nav-cta{background:var(--gold)!important; color:#231703!important}
.site-header--transparent.over-dark .nav-cta:hover{background:var(--gold-soft)!important}
.site-header--transparent.over-dark .nav-toggle{background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.22)}
.site-header--transparent.over-dark .nav-toggle span{background:#fff}
@media (max-width:1220px){
  .site-header--transparent.over-dark .nav-links.open > a{color:var(--text-soft)}
  .site-header--transparent.over-dark .nav-links.open > a.active{color:var(--ink)}
}

/* --- levende hero-achtergrond ------------------------------------------- */
.hero{padding:132px 0 108px}
/* 11-9-2026 (luxe-ronde): filter:blur(46px) op dit hele vlak is eruit. Drie
   bewegende lagen door een vervaging van 46 px halen kost op een telefoon elk
   beeldje opnieuw rekenwerk; de zachtheid zit nu in de verlopen zelf (een
   extra tussenstap), en will-change laat de beweging bij de grafische chip. */
.hero-aurora{position:absolute; inset:-25% -10%; pointer-events:none; z-index:0; opacity:.85}
.hero-aurora i{position:absolute; display:block; border-radius:50%; mix-blend-mode:screen; will-change:transform}
/* closest-side: het verloop is op nul precies aan de rand van het vlak. Met
   de oude maat (farthest-corner) liep het verder dan de ronde rand en sneed
   border-radius er een harde cirkel uit; de blur verborg dat. */
.hero-aurora i:nth-child(1){
  width:46vw; height:46vw; left:52%; top:-8%;
  background:radial-gradient(closest-side, rgba(193,154,74,.5), rgba(193,154,74,.26) 38%, rgba(193,154,74,.08) 68%, rgba(193,154,74,0) 100%);
  animation:drift-a 26s ease-in-out infinite alternate;
}
.hero-aurora i:nth-child(2){
  width:40vw; height:40vw; left:-6%; top:36%;
  background:radial-gradient(closest-side, rgba(52,110,168,.48), rgba(52,110,168,.24) 38%, rgba(52,110,168,.07) 68%, rgba(52,110,168,0) 100%);
  animation:drift-b 32s ease-in-out infinite alternate;
}
.hero-aurora i:nth-child(3){
  width:30vw; height:30vw; left:28%; top:56%;
  background:radial-gradient(closest-side, rgba(219,185,104,.3), rgba(219,185,104,.14) 40%, rgba(219,185,104,.04) 70%, rgba(219,185,104,0) 100%);
  animation:drift-c 38s ease-in-out infinite alternate;
}
@keyframes drift-a{from{transform:translate3d(0,0,0) scale(1)}   to{transform:translate3d(-7%,9%,0) scale(1.14)}}
@keyframes drift-b{from{transform:translate3d(0,0,0) scale(1.06)} to{transform:translate3d(9%,-7%,0) scale(.94)}}
@keyframes drift-c{from{transform:translate3d(0,0,0) scale(.96)}  to{transform:translate3d(-5%,-10%,0) scale(1.1)}}

/* zachte gloed die de cursor volgt */
.hero-glow{
  position:absolute; inset:0; z-index:1; pointer-events:none; opacity:0;
  transition:opacity .45s ease;
  background:radial-gradient(420px 420px at var(--mx,50%) var(--my,40%), rgba(219,185,104,.16), transparent 70%);
}
.hero:hover .hero-glow{opacity:1}

/* de tekst komt rustig binnen */
.hero-text > *{animation:rise .85s cubic-bezier(.22,.68,.28,1) both}
.hero-text > *:nth-child(1){animation-delay:.05s}
.hero-text > *:nth-child(2){animation-delay:.16s}
.hero-text > *:nth-child(3){animation-delay:.27s}
.hero-text > *:nth-child(4){animation-delay:.38s}
.hero-text > *:nth-child(5){animation-delay:.49s}
@keyframes rise{from{opacity:0; transform:translateY(18px)} to{opacity:1; transform:none}}

/* zachte overgang van hero naar de strip eronder */
.hero-fade{position:absolute; left:0; right:0; bottom:0; height:120px; z-index:1; pointer-events:none;
  background:linear-gradient(to bottom, rgba(7,23,47,0), rgba(18,41,63,.9))}

/* --- kaarten die met de cursor meekantelen ------------------------------ */
.card.tilt{
  transform-style:preserve-3d;
  transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateZ(0);
  transition:transform .35s cubic-bezier(.22,.68,.28,1), box-shadow .3s, border-color .3s;
}
.card.tilt:hover{box-shadow:var(--shadow-lg); border-color:#cfd7e2}
.card.tilt::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; opacity:0;
  background:radial-gradient(300px 300px at var(--mx,50%) var(--my,50%), rgba(193,154,74,.14), transparent 68%);
  transition:opacity .3s;
}
.card.tilt:hover::after{opacity:1}
.card-icon{transition:transform .35s cubic-bezier(.22,.68,.28,1), background .3s}
.card:hover .card-icon{transform:translateY(-2px) scale(1.05); background:#f2e6cd}

/* --- stappen ------------------------------------------------------------ */
.step{transition:transform .3s, box-shadow .3s, border-color .3s}
.step:hover{transform:translateY(-3px); box-shadow:var(--shadow-md); border-color:#d6dce6}

/* --- tarieven ----------------------------------------------------------- */
.price-grid{display:grid; gap:22px; grid-template-columns:repeat(auto-fit,minmax(310px,1fr)); align-items:stretch}
.price-card{
  position:relative; display:flex; flex-direction:column; background:#fff;
  border:1px solid var(--line); border-radius:var(--radius-lg); padding:34px 30px 30px;
  box-shadow:var(--shadow-sm); transition:transform .28s, box-shadow .28s, border-color .28s;
}
.price-card:hover{transform:translateY(-4px); box-shadow:var(--shadow-md)}
.price-card--featured{background:var(--ink); border-color:var(--ink); color:rgba(255,255,255,.8)}
.price-card--featured h3, .price-card--featured .price-amount{color:#fff}
.price-card--featured .price-note, .price-card--featured .price-period{color:rgba(255,255,255,.6)}
.price-card--featured .price-list li{color:rgba(255,255,255,.82)}
.price-card--featured .price-list svg{color:var(--gold-soft)}
.price-card--featured::before{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:radial-gradient(520px 260px at 85% 0%, rgba(193,154,74,.24), transparent 62%);
}
.price-card > *{position:relative; z-index:2}
.price-badge{
  position:absolute; top:-12px; right:26px; z-index:3; background:var(--gold); color:#231703;
  font-size:var(--fs-2xs); font-weight:700; letter-spacing:.11em; text-transform:uppercase;
  padding:6px 13px; border-radius:99px; box-shadow:0 6px 18px rgba(193,154,74,.34);
}
.price-card h3{margin-bottom:.25em}
.price-tagline{font-size:var(--fs-body); color:var(--text-soft); margin-bottom:22px}
.price-card--featured .price-tagline{color:rgba(255,255,255,.66)}
.price-amount{font-family:var(--serif); font-size:3rem; line-height:1; color:var(--ink); letter-spacing:-.02em}
.price-period{font-family:var(--sans); font-size:var(--fs-body); color:var(--text-soft); font-weight:500}
.price-note{font-size:var(--fs-sm); color:var(--text-soft); margin:8px 0 24px}
.price-list{list-style:none; margin:0 0 28px; padding:0; display:grid; gap:12px}
.price-list li{display:flex; gap:11px; align-items:flex-start; font-size:var(--fs-body); color:var(--text-soft)}
.price-list svg{width:18px; height:18px; flex:0 0 auto; color:var(--gold-ink); margin-top:3px}
.price-card .btn{margin-top:auto; width:100%}
.price-foot{margin-top:30px; padding:24px 26px; border:1px dashed var(--line); border-radius:var(--radius); background:#fff}
.price-foot p{margin:0; color:var(--text-soft); font-size:var(--fs-body)}
.price-foot a{color:var(--ink); font-weight:600}

/* --- vloeiender scrollen tussen secties --------------------------------- */
.section{scroll-margin-top:90px}
.section--alt{position:relative}
.section--alt::before,.section--alt::after{
  content:""; position:absolute; left:0; right:0; height:40px; pointer-events:none;
}
.section--alt::before{top:0; background:linear-gradient(to bottom, var(--paper), transparent)}
.section--alt::after{bottom:0; background:linear-gradient(to top, var(--paper), transparent)}

@media (prefers-reduced-motion:reduce){
  .hero-aurora i{animation:none}
  .hero-text > *, .hero-panel{animation:none}
  .card.tilt{transform:none; transition:none}
  .scroll-progress,.scroll-progress-head{display:none}
}

/* --- header zweeft over de donkere kop en wordt wit zodra je scrolt ------ */
.site-header{position:fixed; left:0; right:0; top:0}
.site-header--transparent{
  background:rgba(255,255,255,.88); border-bottom-color:var(--line);
  backdrop-filter:saturate(180%) blur(12px);
}
.site-header--transparent.over-dark{
  background:transparent; border-bottom-color:transparent; backdrop-filter:none;
}
/* Massief, geen blur: blur gaf op een echt toestel een grijze waas over het logo. */
.site-header--transparent.over-dark.is-gescrold{
  background:var(--ink); border-bottom-color:rgba(255,255,255,.08);
}
.hero{padding:150px 0 108px}
.page-hero{padding:148px 0 70px}

/* --- prijskaarten in de donkere hero: alle drie licht ------------------- */
.hero .price-grid{margin-top:34px}
.hero .price-card--featured{background:#fff; border-color:var(--gold); box-shadow:0 18px 44px rgba(0,0,0,.28)}
.hero .price-card--featured::before{display:none}
.hero .price-card--featured h3,
.hero .price-card--featured .price-amount{color:var(--ink)}
.hero .price-card--featured .price-note,
.hero .price-card--featured .price-period{color:var(--text-soft)}
.hero .price-card--featured .price-list li{color:var(--text-soft)}
.hero .price-card--featured .price-list svg{color:var(--gold-ink)}
.hero .card-link{color:rgba(255,255,255,.85); border-bottom-color:rgba(255,255,255,.35)}
.hero .card-link:hover{color:var(--gold-soft)}
.hero{padding:100px 0 62px}
.hero h1{max-width:20ch}
.hero .lead{margin-bottom:0}
.hero .price-grid .price-card--featured{border-color:var(--gold)}

/* --- logo ---------------------------------------------------------------- */
.footer-logo{display:inline-block; margin-bottom:10px}
.footer-logo img{width:260px; max-width:100%; height:auto; border-radius:4px}

/* --- juridische pagina's ------------------------------------------------ */
.legal{max-width:820px}
.legal h2{font-size:1.3rem; margin-top:44px; margin-bottom:.5em}
.legal h2:first-child{margin-top:0}
.legal p{color:var(--text-soft)}
.legal ul{margin:0 0 1.2em; padding-left:22px; color:var(--text-soft)}
.legal li{margin-bottom:9px}
.legal strong{color:var(--text)}
.footer-legal{display:flex; gap:20px}
.footer-legal a{text-decoration:none; color:rgba(255,255,255,.5)}
.footer-legal a:hover{color:var(--gold-soft)}

/* --- minimumduur onder de prijskaarten ---------------------------------- */
.price-terms{text-align:center; font-size:var(--fs-sm); color:var(--text-soft); margin:22px 0 0}
.hero .price-terms{color:rgba(255,255,255,.6)}

/* --- pakketten gegroepeerd per rechtsvorm ------------------------------- */
.price-group{max-width:760px; margin:0 0 20px}
.price-group + .price-grid{margin-bottom:40px}
.price-group-title{
  font-family:var(--sans); font-size:var(--fs-xs); font-weight:700; letter-spacing:.15em;
  text-transform:uppercase; color:var(--gold-ink); margin:0 0 6px;
}
.price-group-note{font-size:var(--fs-body); color:var(--text-soft); margin:0}
.price-grid--pair{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.hero .price-group-note{color:rgba(255,255,255,.6)}
.hero .price-group{margin-top:34px}
.section .price-group:not(:first-child),
.hero .price-group:not(:first-child){margin-top:14px}

/* --- compacte prijskaarten (home) --------------------------------------- */
.price-card--compact{padding:26px 26px 24px}
.price-card--compact .price-note{margin-bottom:22px}
.hero .price-grid{margin-top:20px}
.hero .price-group + .price-grid{margin-bottom:26px}
.grid-4{grid-template-columns:repeat(auto-fit,minmax(255px,1fr))}

/* --- pillen naar de vragenpagina's -------------------------------------- */
.pill-row{display:flex; flex-wrap:wrap; gap:12px; justify-content:center}
.pill{
  display:inline-flex; align-items:center; text-decoration:none; background:#fff;
  border:1px solid var(--line); border-radius:99px; padding:11px 22px;
  font-weight:600; font-size:var(--fs-body); color:var(--ink); box-shadow:var(--shadow-sm);
  transition:border-color .18s, color .18s, transform .18s;
}
.pill:hover{border-color:var(--gold); color:var(--gold-ink); transform:translateY(-2px)}
.section--tight .section-head{margin-bottom:30px}

/* --- vertrouwenspunten onder de kop ------------------------------------- */
.hero-points{margin:26px 0 0}
.hero-points li{font-size:var(--fs-body)}


/* --- prijslijst losse diensten ------------------------------------------ */
.prijslijst{columns:2 340px; column-gap:60px}
.prijsgroep{break-inside:avoid; -webkit-column-break-inside:avoid; margin:0 0 38px}
.prijsgroep-kop{
  font-family:var(--sans); font-size:var(--fs-xs); font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:var(--gold-ink); margin:0 0 4px; padding-bottom:12px;
  border-bottom:1px solid var(--line);
}
.prijsregel{
  display:flex; align-items:baseline; justify-content:space-between; gap:20px;
  padding:15px 0; border-bottom:1px solid var(--line);
}
.prijsgroep .prijsregel:last-child{border-bottom:none}
.prijsregel-naam{margin:0; font-weight:600; font-size:var(--fs-body); color:var(--ink); line-height:1.35}
.prijsregel-note{margin:3px 0 0; font-size:var(--fs-sm); color:var(--text-soft); line-height:1.45}
.prijsregel-bedrag{font-family:var(--serif); font-size:var(--fs-h3); color:var(--ink); white-space:nowrap}
/* "prijs vooraf": tekst in plaats van een bedrag, dus kleiner en in de sans */
.prijsregel-bedrag.is-tekst{font-family:var(--sans); font-size:var(--fs-sm); font-weight:600; color:var(--text-soft)}
.losse-voet{margin-top:6px; display:flex; flex-wrap:wrap; gap:16px 26px; align-items:center; justify-content:space-between}
.losse-voet p{margin:0; font-size:var(--fs-sm); color:var(--text-soft)}

@media (max-width:640px){
  .prijsregel{padding:13px 0}
  .prijsregel-naam{font-size:var(--fs-body)}
  .prijsregel-bedrag{font-size:var(--fs-lead)}
  .losse-voet .btn{width:100%}
}

/* ---------- zwevende knoppen: bellen en WhatsApp ---------- */
/* 11-9-2026: bellen erbij, boven de WhatsApp-knop (Jawad). Het blok staat
   rechtsonder vast; --cookiebar-h zet main.js zolang de cookiebalk in beeld is,
   zodat de knoppen er dan boven zweven in plaats van te verdwijnen. (Eerder die
   dag verborg een regel de WhatsApp-knop achter de cookiebalk; wie nog geen
   keuze had gemaakt zag hem dus nooit.) */
.zweef{
  position:fixed; right:20px; z-index:80;
  bottom:calc(20px + env(safe-area-inset-bottom,0px) + var(--cookiebar-h,0px));
  display:flex; flex-direction:column; align-items:flex-end; gap:12px;
  transition:bottom .25s ease;
}
.zweef-knop{
  position:relative; display:flex; align-items:center; gap:0;
  height:58px; padding:0 17px; border-radius:29px;
  /* het medaillon van het beeldmerk: marine met een gouden rand, allebei
     pulserend. 11-9-2026 (Jawad): "alleen randje moest goud", dus geen gouden
     vlak; de rand is wel 2 px geworden. Geen WhatsApp-groen (buiten de huisstijl). */
  color:#fff; text-decoration:none; border:2px solid transparent;
  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 14px 30px -10px rgba(7,23,47,.45), 0 2px 6px rgba(7,23,47,.18), inset 0 1px 0 rgba(255,255,255,.08);
  transition:gap .25s ease, padding .25s ease, transform .2s ease, box-shadow .2s ease;
}
.zweef-knop svg{width:26px; height:26px; flex:none}
.zweef-bel svg{width:24px; height:24px}
.zweef-label{
  max-width:0; overflow:hidden; white-space:nowrap;
  font-family:var(--sans,inherit); font-size:.95rem; font-weight:600; letter-spacing:.01em;
  opacity:0; transition:max-width .28s ease, opacity .2s ease;
}
.zweef-knop:hover, .zweef-knop:focus-visible{
  gap:10px; transform:translateY(-2px);
  box-shadow:0 18px 36px -10px rgba(7,23,47,.5), 0 2px 6px rgba(7,23,47,.2);
}
.zweef-knop:hover .zweef-label, .zweef-knop:focus-visible .zweef-label{max-width:180px; opacity:1}
/* gouden puls achter beide knoppen; de belknop een halve slag later, zodat ze
   om en om kloppen in plaats van tegelijk */
.zweef-knop::after{
  content:""; position:absolute; inset:0; border-radius:29px; z-index:-1; pointer-events:none;
  border:2px solid rgba(169,129,47,.75);
  background:radial-gradient(circle, rgba(193,154,74,.42), rgba(193,154,74,.2));
  animation:zweefPuls 2.6s cubic-bezier(.4,0,.2,1) infinite;
}
.zweef-bel::after{animation-delay:1.3s}
@keyframes zweefPuls{
  0%{transform:scale(1); opacity:.95}
  70%{transform:scale(1.6); opacity:0}
  100%{transform:scale(1.6); opacity:0}
}
@media (max-width:640px){
  .zweef{right:16px; gap:10px}
  .zweef-knop{height:56px; padding:0 15px}
  .zweef-knop svg{width:25px; height:25px}
  .zweef-bel svg{width:23px; height:23px}
  /* twee knoppen boven elkaar: de onderste regels van de footer moeten er
     nog onder vandaan komen */
  .site-footer{padding-bottom:150px}
}
/* iPhone en iPad (alleen iOS kent -webkit-touch-callout). Safari 26 legt zijn
   zwevende adresbalk over de onderkant van de pagina; op Jawads schermafbeelding
   (11-9-2026) beslaat die ongeveer 36-82 px boven de onderrand, met rechts de
   tabbladknop. Op 20 px zou de WhatsApp-knop daar half achter vallen; zo staat
   hij er net boven (onderkant ± 90 px boven de rand). */
@supports (-webkit-touch-callout: none){
  .zweef{bottom:calc(56px + env(safe-area-inset-bottom,0px))}
  body:has(#cookiebar:not([hidden])) .zweef{
    bottom:calc(20px + env(safe-area-inset-bottom,0px) + var(--cookiebar-h,0px))}
}
@media (prefers-reduced-motion:reduce){
  .zweef-knop::after{animation:none; display:none}
  .zweef, .zweef-knop{transition:none}
}

/* --- hero: knoppen en kwalificatie boven de vouw (voor advertentieverkeer) --- */
.hero-btns{margin:30px 0 0; display:flex; flex-wrap:wrap; gap:12px}
.hero-credentials{margin:20px 0 0; max-width:56ch; font-size:var(--fs-sm); line-height:1.55;
  color:rgba(255,255,255,.62)}
@media (max-width:720px){
  .hero-btns{margin:24px 0 0}
  .hero-btns .btn{width:100%; justify-content:center}
  .hero-credentials{font-size:var(--fs-sm); margin:18px 0 0}
}
/* de kwalificatie als label direct onder de kop van de home (11-9-2026);
   als lange zin onderaan de hero las niemand hem */
.hero-badge{margin:18px 0 22px; font-size:var(--fs-xs); font-weight:700; letter-spacing:.17em;
  text-transform:uppercase; color:var(--gold); line-height:1.7}
@media (max-width:720px){.hero-badge{font-size:var(--fs-2xs); letter-spacing:.14em; margin:14px 0 18px}}

/* --- hero: tekst links, kaart "Wat u van ons krijgt" rechts (11-9-2026) ---
   Geen backdrop-filter: blur gaf op een echt toestel een grijze waas. */
.hero-grid{display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:56px; align-items:center}
.hero-panel{border-radius:var(--radius-lg); padding:30px 32px 28px; color:#fff; border:1px solid transparent;
  background:linear-gradient(160deg, rgba(16,37,74,.9), rgba(7,23,47,.78)) padding-box,
             linear-gradient(150deg, #f2dba6 0%, var(--gold) 34%, var(--gold-deep) 68%, #dbb968 100%) border-box;
  box-shadow:0 28px 70px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.08);
  animation:rise .85s cubic-bezier(.22,.68,.28,1) .35s both}
.hero-panel-kop{margin:0 0 18px; font-size:var(--fs-xs); font-weight:700; letter-spacing:.17em;
  text-transform:uppercase; color:var(--gold)}
.hero-panel-lijst{list-style:none; margin:0; padding:0; display:grid; gap:14px}
.hero-panel-lijst li{display:flex; gap:12px; align-items:flex-start; padding-top:14px;
  border-top:1px solid rgba(255,255,255,.1)}
.hero-panel-lijst li:first-child{padding-top:0; border-top:0}
.hero-panel-lijst svg{width:18px; height:18px; flex:0 0 auto; color:var(--gold-soft); margin-top:3px}
.hero-panel-lijst strong{display:block; color:#fff; font-weight:600; font-size:var(--fs-body)}
.hero-panel-lijst span{display:block; color:rgba(255,255,255,.72); font-size:var(--fs-sm); line-height:1.5}
@media (max-width:960px){.hero-grid{grid-template-columns:1fr} .hero-panel{display:none}}

/* --- cookiebanner (alleen zichtbaar als er een Google-tag geladen wordt) - */
[hidden]{display:none !important}
.cookiebar{position:fixed; left:0; right:0; bottom:0; z-index:60;
  background:rgba(7,23,47,.97); color:#e8edf5; backdrop-filter:blur(8px);
  border-top:1px solid rgba(193,154,74,.35); box-shadow:0 -8px 30px rgba(0,0,0,.28)}
.cookiebar-in{max-width:1120px; margin:0 auto; padding:16px 22px;
  display:flex; align-items:center; gap:20px; flex-wrap:wrap}
.cookiebar p{margin:0; flex:1 1 360px; font-size:.86rem; line-height:1.55;
  color:rgba(232,237,245,.86)}
.cookiebar p a{color:#dbb968; text-decoration:underline}
.cookiebar-btns{display:flex; gap:10px; flex-wrap:wrap}
.cookiebar .btn{padding:10px 20px; font-size:.86rem}
.cookiebar .btn-ghost{color:#e8edf5; border:1px solid rgba(232,237,245,.35);
  background:transparent}
.cookiebar .btn-ghost:hover{border-color:rgba(232,237,245,.6);
  background:rgba(232,237,245,.07)}
@media (max-width:720px){
  .cookiebar-in{padding:14px 18px; gap:14px}
  .cookiebar-btns{width:100%}
  .cookiebar-btns .btn{flex:1 1 auto; justify-content:center}
}

/* --- klantportaal -------------------------------------------------------- */
.portal-grid{display:grid; grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);
  gap:56px; align-items:start}
.portal-step{margin:38px 0 18px; font-size:1.05rem; letter-spacing:.01em;
  padding-bottom:10px; border-bottom:1px solid rgba(7,23,47,.10)}
.portal-step:first-of-type{margin-top:6px}

.dropzone{margin:6px 0 14px; padding:30px 26px; text-align:center;
  border:2px dashed rgba(7,23,47,.20); border-radius:16px;
  background:rgba(7,23,47,.02); transition:border-color .18s, background .18s}
.dropzone.is-over{border-color:#c19a4a; background:rgba(193,154,74,.09)}
.dropzone-btns{display:flex; gap:12px; justify-content:center; flex-wrap:wrap}
.dropzone-hint{margin:16px 0 0; font-size:.86rem; color:rgba(7,23,47,.55)}

.filelist{list-style:none; margin:0 0 10px; padding:0}
.filelist li{display:flex; align-items:center; gap:12px; padding:9px 4px;
  border-bottom:1px solid rgba(7,23,47,.08)}
.filelist-naam{flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap; font-size:.9rem}
.filelist-maat{flex:0 0 auto; font-size:.8rem; color:rgba(7,23,47,.5);
  font-variant-numeric:tabular-nums}
.filelist-weg{flex:0 0 auto; width:26px; height:26px; border:0; cursor:pointer;
  border-radius:50%; line-height:1; font-size:1.05rem;
  background:rgba(7,23,47,.06); color:rgba(7,23,47,.62)}
.filelist-weg:hover{background:rgba(180,40,40,.12); color:#9c2b2b}

.filemeter{margin:0 0 26px; font-size:.85rem; color:rgba(7,23,47,.6)}
.filemeter.is-fout{color:#9c2b2b; font-weight:600}

.filefields{margin:0 0 26px}
.filefield{display:flex; align-items:center; gap:14px; padding:7px 0;
  font-size:var(--fs-sm)}
.filefield span{flex:0 0 96px; color:rgba(7,23,47,.6)}

.portal-aside{padding:30px 28px; border-radius:18px;
  background:rgba(7,23,47,.035); border:1px solid rgba(7,23,47,.07);
  position:sticky; top:96px}
.portal-aside h3{margin:0 0 12px; font-size:1rem}
.portal-aside h3 + p{margin-top:0}
.portal-aside p{margin:0 0 14px; font-size:.88rem; line-height:1.62;
  color:rgba(7,23,47,.72)}
.portal-aside p:last-child{margin-bottom:0}
.portal-aside > h3:not(:first-child){margin-top:26px; padding-top:22px;
  border-top:1px solid rgba(7,23,47,.09)}

@media (max-width:960px){
  .portal-grid{grid-template-columns:1fr; gap:38px}
  .portal-aside{position:static}
}
@media (max-width:720px){
  .dropzone{padding:24px 18px}
  .dropzone-btns .btn{width:100%; justify-content:center}
  .filefield{flex-wrap:wrap; gap:6px}
  .filefield span{flex:1 1 100%}
}

/* --- app-drempel op het klantportaal ------------------------------------ */
/* De klasse wordt door een inline script bovenaan de portaalpagina gezet en
   door main.js weer weggehaald zodra de bezoeker in de app zit. Staat er geen
   JavaScript aan, dan staat de klasse er nooit: het formulier is dan gewoon
   zichtbaar en de uitleg verdwijnt. */
html:not(.js-app-gate) #app-gate{display:none}
html.js-app-gate #portal-app{display:none}

.app-card{max-width:760px; margin:0 auto; padding:44px 44px 38px;
  border-radius:22px; color:#eef2f8;
  background:linear-gradient(160deg,#0b2144 0%,#07172f 62%);
  border:1px solid rgba(193,154,74,.28);
  box-shadow:0 26px 60px rgba(7,23,47,.22)}
.app-badge{display:inline-block; margin:0 0 18px; padding:6px 14px;
  border-radius:999px; font-size:var(--fs-2xs); font-weight:700; letter-spacing:.09em;
  text-transform:uppercase; color:#07172f;
  background:linear-gradient(135deg,#dbb968,#c19a4a)}
.app-card h2{margin:0 0 14px; color:#fff; font-size:1.55rem; line-height:1.25}
.app-lead{margin:0 0 26px; font-size:1rem; line-height:1.65;
  color:rgba(238,242,248,.78)}

.app-voordelen{list-style:none; margin:0 0 30px; padding:0;
  display:grid; gap:11px}
.app-voordelen li{display:flex; align-items:flex-start; gap:11px;
  font-size:var(--fs-sm); line-height:1.5; color:rgba(238,242,248,.9)}
.app-voordelen li svg{flex:0 0 auto; width:18px; height:18px; margin-top:2px;
  color:#dbb968}

#app-install{margin:0 0 32px}

.app-uitleg{padding-top:28px; border-top:1px solid rgba(238,242,248,.14)}
.app-uitleg h3{margin:0 0 20px; color:#fff; font-size:1.05rem}
.app-uitleg h4{margin:0 0 16px; font-size:.82rem; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; color:#dbb968}

.app-steps{list-style:none; margin:0; padding:0; display:grid; gap:14px;
  counter-reset:none}
.app-steps li{display:flex; align-items:flex-start; gap:14px}
.app-step-nr{flex:0 0 auto; width:28px; height:28px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:var(--fs-xs); font-weight:700; color:#07172f;
  background:linear-gradient(135deg,#dbb968,#c19a4a)}
.app-step-tx{flex:1 1 auto; padding-top:3px; font-size:var(--fs-body); line-height:1.5;
  color:rgba(238,242,248,.92)}
.app-step-tx strong{color:#fff; font-weight:600}
.app-step-ic{display:inline-flex; align-items:center; justify-content:center;
  width:26px; height:26px; margin-left:4px; vertical-align:-7px;
  border-radius:7px; color:#eef2f8;
  background:rgba(238,242,248,.12); border:1px solid rgba(238,242,248,.18)}
.app-step-ic svg{width:15px; height:15px}
.app-note{margin:18px 0 0; font-size:var(--fs-sm); line-height:1.55;
  color:rgba(238,242,248,.6)}
/* vangnet: een los icoon in deze regel werd op ware grootte getekend */
.app-note svg{width:15px; height:15px}

.app-skip{margin:30px 0 0; padding-top:22px;
  border-top:1px solid rgba(238,242,248,.12); font-size:.84rem}
.app-skip + .app-skip{margin-top:10px; padding-top:0; border-top:0}
.app-skip a, .app-skip button{color:rgba(238,242,248,.62); text-decoration:underline;
  background:none; border:0; padding:0; margin:0; font:inherit; cursor:pointer}
.app-skip a:hover, .app-skip button:hover{color:#dbb968}

@media (max-width:720px){
  .app-card{padding:32px 22px 28px; border-radius:18px}
  .app-card h2{font-size:1.3rem}
  #app-install{width:100%; justify-content:center}
}

/* klantnummer: het enige veld dat de klant invult */
.field-nr{margin-bottom:26px}
.field-nr input{max-width:190px; font-size:var(--fs-h3); letter-spacing:.34em;
  text-align:center; font-variant-numeric:tabular-nums; padding-left:14px}
@media (max-width:720px){ .field-nr input{max-width:100%} }

/* --- aanvraagblok op de landingspagina's (9-9-2026) ---------------------
   Het formulier staat op de pagina zelf in plaats van achter een klik naar
   contact.html; op een telefoon komt er een vaste belbalk onderaan bij. */
.lead-blok{display:grid; grid-template-columns:1fr 1fr; gap:34px; align-items:start;
  background:var(--paper-2); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:34px 32px}
.lead-tekst h2{margin:0 0 10px; font-size:clamp(1.4rem,2.4vw,1.9rem)}
.lead-tekst p{color:var(--text-soft); margin:0 0 12px; max-width:46ch}
/* Wat de gratis vergelijking inhoudt - drie punten onder de intro (9-9-2026). */
.lead-punten{list-style:none; margin:0 0 14px; padding:0; max-width:46ch}
.lead-punten li{position:relative; padding-left:22px; margin:0 0 6px;
  color:var(--text-soft); font-size:var(--fs-body); line-height:1.45}
.lead-punten li::before{content:""; position:absolute; left:0; top:.55em;
  width:8px; height:8px; border-radius:50%; background:var(--gold)}
.lead-gratis{font-weight:600; color:var(--ink)!important;
  background:var(--gold-tint); border-radius:10px; padding:10px 14px; display:inline-block}
.lead-bel{font-size:var(--fs-body); margin:16px 0 0!important}
.lead-bel a{font-weight:700; color:var(--ink); text-decoration:underline;
  text-underline-offset:3px}
.lead-form{background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:24px 22px; box-shadow:var(--shadow-sm)}
.lead-form .field{margin-bottom:12px}
.lead-form .btn{width:100%; justify-content:center; margin-top:6px}
.lead-form .form-note{margin-top:10px; font-size:var(--fs-xs); line-height:1.5}
/* Zonder deze twee regels duwt de knop de pagina zijwaarts: .btn staat op
   white-space:nowrap, en een grid-item mag standaard niet smaller worden dan
   zijn inhoud. Op een telefoon van 375 px werd de pagina 394 px breed en viel
   de rechterkant van elke zin weg. (9-9-2026) */
.lead-blok > *{min-width:0}
.lead-form .btn{white-space:normal}
@media (max-width:900px){
  .lead-blok{grid-template-columns:1fr; padding:26px 20px; gap:22px}
}

/* de balk staat vast onderaan en alleen op een smal scherm; de pagina krijgt
   ruimte eronder zodat de laatste regel er niet achter wegvalt */
.belbalk{display:none}
@media (max-width:760px){
  .belbalk{display:grid; grid-template-columns:1fr 1fr; gap:8px; position:fixed;
    left:0; right:0; bottom:0; z-index:75; padding:10px 12px calc(10px + env(safe-area-inset-bottom,0px));
    background:rgba(255,255,255,.94); backdrop-filter:saturate(160%) blur(12px);
    -webkit-backdrop-filter:saturate(160%) blur(12px); border-top:1px solid var(--line)}
  .belbalk .btn{width:100%; justify-content:center; padding:12px 10px; font-size:var(--fs-sm);
    white-space:normal; line-height:1.25}
  html:has(.belbalk) body{padding-bottom:78px}
  /* De cookiebalk staat óók vast onderaan. Zolang die er is blijft de belbalk
     weg: twee balken over elkaar op het eerste scherm dat een bezoeker uit een
     advertentie ziet, is erger dan even geen belknop. */
  body:has(#cookiebar:not([hidden])) .belbalk{display:none}
  /* 11-9-2026: de belbalk staat op geen enkele pagina meer (zie belbalk() in
     build_valorem_pages.py). De regels die de zwevende knoppen voor de balk
     lieten uitwijken zijn weg: op een iPhone verscheen de balk niet, en hing
     de WhatsApp-knop daardoor halverwege het scherm. */
}

/* --- in de app: alleen het portaal, verder niets aanklikbaar ------------ */
/* `is-app` wordt door main.js op <html> gezet zodra de pagina vanaf het
   beginscherm is geopend (standalone). Alles wat de bezoeker de app uit zou
   kunnen leiden gaat dan uit: menu, footer, WhatsApp-knop, kruimelpad. */
html.is-app .nav-links,
html.is-app .nav-toggle,
html.is-app .site-footer,
html.is-app .zweef,
html.is-app .crumbs,
html.is-app .skip{display:none !important}

html.is-app .site-header{position:static; background:#07172f;
  border-bottom:1px solid rgba(193,154,74,.22)}
html.is-app .nav{justify-content:center}
html.is-app .page-hero{padding-top:34px}
html.is-app .brand{pointer-events:none}
/* de merknaam stond donkerblauw op de donkerblauwe balk - onleesbaar */
html.is-app .site-header{backdrop-filter:none}
html.is-app .brand-name{color:#fff}
html.is-app .brand-sub{color:var(--gold)}

  /* Goud-op-licht is #866a2e (--gold-ink), want #c19a4a haalt op wit maar
     2,63:1. In de app is de ondergrond juist donker: daar draait het om en
     zakt gold-ink naar 3,18:1 terwijl het volle goud 6,18:1 haalt. Deze drie
     staan in de basis (de portaalpagina in een gewone browser is licht) en
     worden hier teruggezet voor de app. */
  html.is-app .dossier-periode h4,
  html.is-app .leeg svg,
  html.is-app .ber-wie{color:var(--gold)}

/* --- herkend klantnummer ------------------------------------------------ */
.klant-naam{margin:10px 0 0; font-size:.95rem; font-weight:600; line-height:1.45}
.klant-naam.is-zoekt{font-weight:400; color:rgba(7,23,47,.45)}
.klant-naam.is-ok{color:#1d6b45}
.klant-naam.is-ok::before{content:"\2713\00a0"; font-weight:700}
.klant-naam.is-nok{font-weight:400; color:#9c2b2b}

/* --- op de website zelf staat alleen de uitleg, geen formulier ---------- */
.app-skip{margin:30px 0 0; padding-top:22px;
  border-top:1px solid rgba(238,242,248,.12); font-size:.86rem; line-height:1.6;
  color:rgba(238,242,248,.62)}
.app-skip a{color:#dbb968; text-decoration:underline}

/* het echte bestandsveld: zichtbaar zonder JavaScript, verborgen zodra het
   sleepvak het overneemt */
.portal-bestanden{display:block; margin:0 0 14px; font-size:.9rem}
.portal-bestanden.is-verborgen{position:absolute; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0);
  white-space:nowrap; border:0}

/* --- in de app: alleen het hoogstnodige -------------------------------- */
/* Wie de app opent wil uploaden, niet lezen. Alle uitleg gaat daarom uit;
   die staat er voor de bezoeker zonder JavaScript, die het formulier kaal
   op de pagina krijgt. */
html.is-app.is-portaal .page-hero,
html.is-app .portal-aside,
html.is-app .form-hint,
html.is-app .field-hint,
html.is-app .dropzone-hint{display:none !important}

html.is-app #portal-app{padding-top:28px}
html.is-app .portal-grid{display:block}
html.is-app .field-nr{margin-bottom:22px}
html.is-app .field-nr label{font-size:.78rem; letter-spacing:.08em;
  text-transform:uppercase; color:rgba(7,23,47,.5)}
html.is-app .dropzone{padding:22px 18px}
html.is-app .dropzone-btns{display:grid; gap:10px}
html.is-app .dropzone-btns .btn{width:100%; justify-content:center}
html.is-app #portal-send{width:100%; justify-content:center; margin-top:6px}
html.is-app body{overscroll-behavior-y:contain}

/* --- trek omlaag om te verversen (alleen in de app) --------------------- */
/* 11-9-2026 tweede versie ("voelt heel lelijk"): geen wit rondje meer maar het
   medaillon, dat onder de kop (z-index 80) vandaan komt; de gouden boog vult
   zich met de trek mee (portaal.js zet stroke-dashoffset), bij genoeg gloeit
   hij op, tijdens het laden draait een gouden boogje rond. */
.ptr{position:fixed; top:0; left:50%; z-index:70; width:42px; height:42px; border-radius:50%;
  display:grid; place-items:center; pointer-events:none; opacity:0; transform:translate(-50%,-50px) scale(.55);
  background:radial-gradient(circle at 35% 30%, #1d3d6b, #0a1b38 72%);
  box-shadow:0 12px 28px -10px rgba(0,0,0,.75), 0 0 0 1px rgba(219,185,104,.16);
  will-change:transform, opacity; transition:box-shadow .3s ease}
.ptr svg{position:absolute; inset:0; width:100%; height:100%; transform:rotate(-90deg); overflow:visible}
.ptr-spoor{fill:none; stroke:rgba(219,185,104,.16); stroke-width:2}
.ptr-boog{fill:none; stroke:#dcb96b; stroke-width:2.3; stroke-linecap:round}
.ptr img{position:relative; width:21px; height:21px; margin-top:1px; opacity:.92; transition:transform .35s var(--zacht)}
.ptr.is-klaar{box-shadow:0 12px 28px -10px rgba(0,0,0,.75), 0 0 0 1px rgba(219,185,104,.5), 0 0 24px rgba(219,185,104,.4)}
.ptr.is-klaar img{transform:scale(1.14)}
.ptr.is-bezig svg{animation:ptr-rond .85s linear infinite}
.ptr.is-bezig .ptr-boog{stroke-dasharray:28 120 !important; stroke-dashoffset:0 !important}
.ptr.is-gedaan .ptr-boog{stroke-dashoffset:0 !important}
@keyframes ptr-rond{from{transform:rotate(-90deg)} to{transform:rotate(270deg)}}
@media (prefers-reduced-motion:reduce){ .ptr.is-bezig svg{animation-duration:2s} }

/* --- app-drempel: korter, en met beweging die de weg wijst -------------- */
.app-card{position:relative}

.app-visual{display:flex; justify-content:center; margin:0 0 26px}
.app-phone{position:relative; width:106px; height:176px; border-radius:22px;
  background:linear-gradient(160deg,#12294d,#0a1c38);
  border:1px solid rgba(238,242,248,.16);
  box-shadow:0 18px 40px rgba(0,0,0,.35);
  animation:app-zweef 4.5s ease-in-out infinite}
.app-phone::before{content:""; position:absolute; top:9px; left:50%;
  width:36px; height:5px; margin-left:-18px; border-radius:99px;
  background:rgba(238,242,248,.22)}
.app-phone::after{content:""; position:absolute; bottom:14px; left:50%;
  width:34px; height:5px; margin-left:-17px; border-radius:99px;
  background:rgba(238,242,248,.14)}
.app-phone-ic{position:absolute; top:54px; left:50%; margin-left:-26px;
  width:52px; height:52px; border-radius:15px;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(150deg,#16305a,#07172f);
  box-shadow:0 0 0 1px rgba(219,185,104,.55), 0 10px 22px rgba(0,0,0,.42);
  animation:app-plof 4.5s ease-out infinite}
.app-phone-ic img{width:30px; height:30px}

@keyframes app-zweef{0%,100%{transform:translateY(0)}
  50%{transform:translateY(-7px)}}
@keyframes app-plof{0%{transform:translateY(-38px) scale(.45); opacity:0}
  16%{transform:translateY(2px) scale(1.06); opacity:1}
  24%{transform:translateY(0) scale(1); opacity:1}
  100%{transform:translateY(0) scale(1); opacity:1}}

.app-chips{list-style:none; display:flex; flex-wrap:wrap; gap:8px;
  margin:0 0 28px; padding:0}
.app-chips li{padding:6px 13px; border-radius:999px; font-size:.8rem;
  font-weight:600; color:rgba(238,242,248,.86);
  background:rgba(238,242,248,.08); border:1px solid rgba(238,242,248,.15)}

.app-steps li{opacity:0; transform:translateY(10px);
  animation:app-instap .5s ease forwards;
  animation-delay:calc(var(--stap,1) * .16s + .1s)}
@keyframes app-instap{to{opacity:1; transform:none}}

#app-install{animation:app-klop 2.4s ease-in-out infinite}
@keyframes app-klop{0%,100%{box-shadow:0 0 0 0 rgba(219,185,104,.45)}
  55%{box-shadow:0 0 0 13px rgba(219,185,104,0)}}


@media (prefers-reduced-motion:reduce){
  .app-phone, .app-phone-ic, .app-steps li, #app-install{
    animation:none !important}
  .app-steps li{opacity:1; transform:none}
  .app-phone-ic{opacity:1}
}

/* --- de drempelpagina past op een scherm ------------------------------- */
/* Zonder dit kost de kop het hele eerste scherm en ziet de bezoeker pas na
   scrollen wat hij moet doen. */
html.js-app-gate .crumbs{display:none}
html.js-app-gate .page-hero{padding:92px 0 18px}
html.js-app-gate .page-hero h1{font-size:1.75rem; line-height:1.2;
  margin-bottom:0}
html.js-app-gate .page-hero p{display:none}
html.js-app-gate #app-gate{padding-top:20px; padding-bottom:56px}
html.js-app-gate .app-card{padding:26px 26px 30px}
html.js-app-gate .app-phone{width:92px; height:150px}
html.js-app-gate .app-phone-ic{top:44px; margin-left:-23px;
  width:46px; height:46px; border-radius:13px}
html.js-app-gate .app-phone-ic img{width:26px; height:26px}
html.js-app-gate .app-visual{margin-bottom:20px}
html.js-app-gate .app-card h2{font-size:1.32rem; margin-bottom:8px}
html.js-app-gate .app-lead{margin-bottom:18px; font-size:.94rem}
html.js-app-gate .app-chips{margin-bottom:22px}
html.js-app-gate .app-uitleg{padding-top:20px}
html.js-app-gate .app-skip{margin-top:22px; padding-top:16px}

/* --- onthouden klantnummer --------------------------------------------- */
.klant-bar{display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  margin:0 0 22px; padding:11px 14px; border-radius:12px;
  background:rgba(40,140,90,.09); border:1px solid rgba(40,140,90,.24)}
.klant-bar-nr{font-weight:700; font-variant-numeric:tabular-nums;
  letter-spacing:.14em; color:#1d6b45}
.klant-bar-nr::before{content:"\2713\00a0\00a0"; letter-spacing:0}
.klant-bar-naam{flex:1 1 auto; font-weight:600; color:var(--ink)}
.klant-bar-uit{flex:0 0 auto; border:0; background:none; cursor:pointer;
  padding:4px 2px; font:inherit; font-size:.84rem; font-weight:600;
  color:rgba(7,23,47,.55); text-decoration:underline}
.klant-bar-uit:hover{color:#9c2b2b}

/* staat het nummer al vast, dan hoeft het veld niet meer in beeld */
form.is-bekend .field-nr{display:none}

/* --- twee schermen in de app: aanleveren en inzien --------------------- */
.app-tabs{display:none; gap:6px; margin:0 0 22px}
html.is-app .app-tabs{display:flex}
.app-tab{flex:1 1 0; padding:10px 12px; border:0; border-radius:10px; cursor:pointer;
  font:inherit; font-size:.92rem; font-weight:600; color:rgba(7,23,47,.62);
  background:rgba(7,23,47,.05)}
.app-tab.aan{background:#07172f; color:#fff}

.dossier{font-size:.94rem}
.dossier-leeg{color:rgba(7,23,47,.55)}
.dossier-periode{border:1px solid rgba(7,23,47,.09); border-radius:12px;
  padding:12px 16px; margin:0 0 10px; background:#fff}
.dossier-periode > summary{cursor:pointer; font-weight:700; list-style:none;
  display:flex; justify-content:space-between; align-items:center}
.dossier-periode > summary::-webkit-details-marker{display:none}
.dossier-periode > summary span{font-weight:600; font-size:.78rem;
  color:rgba(7,23,47,.5)}
.dossier-periode h4{margin:16px 0 6px; font-size:.74rem; letter-spacing:.08em;
  text-transform:uppercase; color:var(--gold-ink)}
.dossier-lijst{list-style:none; margin:0; padding:0}
/* kopje binnen een dossierjaar: Btw / Inkomstenbelasting */
/* BTW en INKOMSTENBELASTING zijn de scheiding binnen een dossierjaar en
   moeten dat ook zijn: goud, groter en met een haarlijn die naar rechts
   uitdooft. Diezelfde haarlijn zit in het woordmerk in de kop, dus het hoort
   bij de huisstijl in plaats van dat het een los kopje is (Jawad, 10-9-2026). */
/* ⚠ `h4.dossier-groep` en niet alleen `.dossier-groep`: even verderop staat
   `.dossier-periode h4{...}` voor de mapkopjes, en die is specifieker. Zonder
   de h4 erbij bleef dit kopje grijs en klein (10-9-2026). */
.dossier-periode h4.dossier-groep{display:flex; align-items:center; gap:11px; margin:20px 0 8px;
  font-family:var(--sans); font-size:.78rem; letter-spacing:.15em;
  text-transform:uppercase; color:var(--gold-ink); font-weight:700}
.dossier-periode h4.dossier-groep::after{content:""; flex:1 1 auto; height:1px; border-radius:1px;
  background:linear-gradient(90deg, rgba(134,106,46,.5), rgba(134,106,46,0))}
.dossier-periode > h4.dossier-groep:first-of-type{margin-top:12px}
.dossier-sub > summary{display:flex; align-items:center; gap:10px; justify-content:space-between; flex-wrap:wrap}
.dossier-lijst li{display:flex; justify-content:space-between; gap:12px;
  padding:8px 0; border-bottom:1px solid rgba(7,23,47,.06)}
.dossier-lijst li:last-child{border-bottom:0}
.dossier-lijst a{color:#0b4fa8; text-decoration:none; word-break:break-word}
.dossier-lijst span{flex:0 0 auto; font-size:.8rem; color:rgba(7,23,47,.45)}

.dossier-wacht{margin:26px 0 0; padding:16px 18px; border-radius:12px;
  background:rgba(193,154,74,.09); border:1px solid rgba(193,154,74,.28)}
.dossier-wacht h3{margin:0 0 6px; font-size:.95rem;
  display:flex; justify-content:space-between; align-items:center}
.dossier-wacht h3 span{font-size:.78rem; color:rgba(7,23,47,.5)}
.dossier-wacht > p{margin:0 0 12px; font-size:.86rem; line-height:1.55;
  color:rgba(7,23,47,.68)}

/* --- facturen in de app ------------------------------------------------ */
.facturen{font-size:var(--fs-body)}
.fact-stil{color:rgba(7,23,47,.55)}
.fact-let{padding:14px 16px; border-radius:12px; margin:0 0 18px;
  background:rgba(193,154,74,.1); border:1px solid rgba(193,154,74,.3);
  font-size:.9rem; line-height:1.55}
.fact-kop{margin:30px 0 14px; padding-top:20px; font-size:1rem;
  border-top:1px solid rgba(7,23,47,.09)}
.fact-rij{display:flex; gap:10px; flex-wrap:wrap; margin:0 0 4px}
.fact-rij > div{flex:1 1 140px}
.facturen label{display:block; font-size:var(--fs-xs); font-weight:600;
  color:rgba(7,23,47,.55); margin:10px 0 3px}
.facturen input, .facturen select{width:100%; box-sizing:border-box;
  padding:9px 11px; border:1px solid #cfd6e0; border-radius:8px;
  font:inherit; background:#fff}
.fact-regel{margin-bottom:0}

.fact-lijst{list-style:none; margin:0; padding:0}
.fact-lijst li{display:flex; justify-content:space-between; gap:12px;
  padding:12px 0; border-bottom:1px solid rgba(7,23,47,.07)}
.fact-lijst a{color:#0b4fa8; text-decoration:none}
.fact-bedrag{text-align:right; font-weight:700; white-space:nowrap}
.fact-acties{margin-top:6px; display:flex; gap:6px; justify-content:flex-end}
.fact-acties button{border:0; background:rgba(7,23,47,.06); border-radius:6px;
  padding:4px 9px; font:inherit; font-size:.76rem; font-weight:600; cursor:pointer;
  color:rgba(7,23,47,.7)}
.fact-acties button:hover{background:rgba(7,23,47,.12)}
.fact-merk{display:inline-block; padding:2px 8px; border-radius:999px;
  font-size:.68rem; font-weight:700; letter-spacing:.04em}
.fact-merk.open{background:#fff2d8; color:#7a5310}
.fact-merk.verstuurd{background:#e4edfb; color:#1a4b8f}
.fact-merk.betaald{background:#e3f3ea; color:#1d6b45}
.fact-merk.vervallen{background:#f0f2f6; color:#6b7684}
.fact-som{margin:16px 0 14px; font-weight:600; color:#07172f}

/* factuurscherm: balk met "Mijn gegevens" en de knop "Meer velden" */
.fact-balk{display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  margin:0 0 16px}
.fact-balk .fact-stil{font-size:.84rem; flex:1 1 160px}
.fact-terug{border:1px solid rgba(7,23,47,.16); background:#fff; border-radius:8px;
  padding:7px 14px; font:inherit; font-size:.84rem; font-weight:600;
  color:#07172f; cursor:pointer}
.fact-terug:hover{background:rgba(7,23,47,.05)}
.fact-meer{display:block; margin:14px 0 4px; border:0; background:none; padding:0;
  font:inherit; font-size:.84rem; font-weight:600; color:#0b4fa8; cursor:pointer}
.fact-meer::after{content:" \25be"}
#fact-extra{padding:14px 0 2px; border-top:1px solid rgba(7,23,47,.08); margin-top:8px}
.fact-meer.open::after{content:" \25b4"}
/* "+ Nieuwe opdrachtgever" en "+ Nieuw product" zijn geen uitklapper: geen pijltje */
.fact-meer.fact-nieuw::after{content:none}
.fact-extraregel{margin:0 0 10px}
.fact-extraregel .fact-rij{margin:4px 0 0}
.fact-extraregel .fact-rij input{flex:1 1 40%; width:auto; min-width:0}
.fact-mist{color:#a4691c}
.fact-balk .fact-terug + .fact-terug{margin-left:0}

/* ===================== portaal 2: inlog, tabbalk, overzicht ============ */
.app-login-kaart{max-width:420px; margin:0 auto; padding:26px 22px 24px; border-radius:16px;
  background:#fff; border:1px solid rgba(7,23,47,.08); box-shadow:0 10px 30px rgba(7,23,47,.06)}
.app-login-kaart h2{margin:0 0 6px; font-size:1.3rem}
.app-login-p{color:rgba(7,23,47,.62); font-size:.92rem; margin:0 0 16px; line-height:1.5}
.app-login-kaart label{display:block; font-size:.72rem; font-weight:600; letter-spacing:.08em;
  text-transform:uppercase; color:rgba(7,23,47,.55); margin:0 0 6px}
.app-login-kaart input{width:100%; box-sizing:border-box; font-size:1.7rem; letter-spacing:.32em;
  text-align:center; padding:12px; border:1px solid #cfd6e0; border-radius:12px;
  font-variant-numeric:tabular-nums; margin:0 0 14px; font-family:inherit}
.app-login-kaart .btn{width:100%; justify-content:center}
.app-login-link{display:block; margin:14px auto 0; border:0; background:none; color:#0b4fa8;
  font:inherit; font-size:.88rem; font-weight:600; cursor:pointer}
.app-login-fout{margin:14px 0 0; padding:10px 14px; border-radius:10px; background:#fdf3f3;
  color:#8d2b2b; font-size:.88rem; line-height:1.45}
.app-login-fout.is-zacht{background:#fff2d8; color:#7a5310}
/* Staat altijd binnen is-app (zie toon() in portaal.js), dus dezelfde donkere
   kleuren als .app-uitleg in de installatiegate hierboven. */
.app-login-installeer{margin-top:22px; padding-top:20px; border-top:1px solid rgba(238,242,248,.14)}
.app-login-installeer summary{cursor:pointer; font-size:.88rem; font-weight:600; color:inherit}
.app-login-installeer[open] summary{margin-bottom:4px}
.app-login-installeer .app-uitleg{border-top:0; padding-top:16px}

/* de vijf tabbladen: in de app onderin, binnen duimbereik */
.app-tab span{display:block}
.app-tab svg{display:none}
/* Onderaan zit op een iPhone de streep van het beginscherm. `env()` meldt
   die hoogte, maar in een op het beginscherm gezette app is dat niet overal
   te vertrouwen - vandaar `max()`: er blijft altijd ruimte over, ook als het
   toestel 0 teruggeeft. Zonder dat sneed de onderkant van "Overzicht" en
   "Berichten" weg. */
html.is-app .app-tabs{position:fixed; left:0; right:0; bottom:0; z-index:70; margin:0; gap:0;
  padding:8px 4px calc(8px + max(14px, env(safe-area-inset-bottom, 0px))); background:#fff;
  border-top:1px solid rgba(7,23,47,.1)}
html.is-app .app-tab{display:flex; flex-direction:column; align-items:center; gap:4px;
  padding:4px 2px 0; border-radius:10px; background:none; font-size:.64rem; font-weight:600;
  color:rgba(7,23,47,.55); position:relative; line-height:1.35}
html.is-app .app-tab span{padding-bottom:1px}
html.is-app .app-tab svg{display:block; width:22px; height:22px}
html.is-app .app-tab.aan{background:none; color:#07172f}
html.is-app .app-tab.aan svg{color:#c19a4a}
/* In de app staan deze twee op een donkere kaart; daar is #c19a4a met 6,8:1
   juist goed leesbaar en hoort het bij het logo. Alleen de lichte webversie
   van het portaal gebruikt --gold-ink. */
html.is-app .leeg svg, html.is-app .ber-wie{color:#c19a4a}
.app-tel{position:absolute; top:0; left:calc(50% + 6px); min-width:16px; height:16px; padding:0 4px;
  border-radius:999px; background:#c0392b; color:#fff; font-size:var(--fs-2xs); font-weight:700;
  font-style:normal; line-height:16px; text-align:center}
/* De tabbalk is vast en 61px hoog, plus de veilige zone onderaan een iPhone
   (de streep van het beginscherm, ~34px). Stond hier een vast getal, dan
   plakte de laatste regel tegen de balk en viel hij weg. */
html.is-app #portal-app{padding-bottom:calc(116px + max(14px, env(safe-area-inset-bottom, 0px)))}

/* het berichtenveld plakte aan de onderkant van het scherm, dus achter de
   tabbalk; in de app laten we het gewoon meelopen met de draad */
html.is-app .ber-form{position:static}
html.is-app .ber-draad{max-height:none}
html.is-app .klant-bar{margin-bottom:16px}

/* overzicht */
.ov-kaart{padding:20px; border-radius:16px; background:#07172f; color:#fff; margin:0 0 6px}
.ov-klein{display:block; font-size:.7rem; letter-spacing:.09em; text-transform:uppercase;
  opacity:.65; margin-bottom:4px}
.ov-groot{font-size:1.35rem; font-weight:700}
.ov-datum{font-size:1.05rem; margin:4px 0 12px}
.ov-datum span{opacity:.7; font-size:.9rem; margin-left:6px}
.ov-merk{display:inline-block; padding:3px 10px; border-radius:999px; font-size:.72rem;
  font-weight:700; white-space:nowrap}
.ov-merk.open{background:#fff2d8; color:#7a5310}
.ov-merk.bezig{background:#e4edfb; color:#1a4b8f}
.ov-merk.klaar{background:#e3f3ea; color:#1d6b45}
.ov-merk.aanslag{background:#f6ecd6; color:#6b4a12}
.ov-notitie{margin:12px 0 0; font-size:.88rem; opacity:.85; line-height:1.5}
.ov-kop{margin:26px 0 10px; font-size:.74rem; letter-spacing:.09em; text-transform:uppercase;
  color:rgba(7,23,47,.55)}
.ov-taak{padding:14px 16px; border-radius:12px; border:1px solid rgba(193,154,74,.35);
  background:rgba(193,154,74,.08); margin:0 0 10px}
.ov-taak.is-info{border-color:rgba(7,23,47,.1); background:#f6f8fb}
.ov-taak.is-klaar{border-color:rgba(40,140,90,.25); background:rgba(40,140,90,.07)}
.ov-taak-tekst{font-weight:600; line-height:1.4}
/* De toelichting bij een taak mag meerdere regels hebben: een opsomming van
   stukken leest als een brij zonder regelovergangen (12-9-2026).

   13-9-2026, Jawad: "lijkt op een lap tekst, miss opmaak?" - met alleen
   pre-wrap blijft het een grijze muur: kopjes, opsommingen en lopende tekst
   hebben allemaal hetzelfde gewicht. uitlegOpmaak() in portaal.js maakt er nu
   echte alinea's, kopjes en bolletjes van, dus pre-wrap kan weg. */
.ov-taak-uitleg{font-size:.86rem; color:rgba(7,23,47,.62); margin-top:6px; line-height:1.5}
.ov-taak-uitleg p{margin:0 0 9px}
.ov-taak-uitleg p:last-child, .ov-taak-uitleg ul:last-child{margin-bottom:0}
.ov-taak-uitleg strong.ov-uitleg-kop{display:block; color:rgba(7,23,47,.86); font-weight:650;
  margin-bottom:1px}
.ov-taak-uitleg ul{margin:0 0 9px; padding-left:17px}
.ov-taak-uitleg li{margin:0 0 2px}
/* het stuk waar de vraag over gaat: miniatuur bij een foto, anders een knop */
.ov-taak-stuk{display:flex; align-items:center; gap:10px; margin-top:10px; padding:8px 12px;
  border:1px solid rgba(7,23,47,.14); border-radius:10px; background:#fff; color:inherit;
  text-decoration:none; font-size:.88rem; font-weight:600}
.ov-taak-stuk.is-foto{padding-left:8px}
.ov-taak-stuk:hover{background:rgba(7,23,47,.04)}
.ov-taak-stuk img{width:52px; height:52px; object-fit:cover; border-radius:8px; flex:0 0 auto;
  background:rgba(7,23,47,.06)}
.ov-taak-stuk span{display:block; min-width:0; overflow:hidden}
.ov-taak-stuk small{display:block; font-weight:400; color:rgba(7,23,47,.6);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
/* snelantwoorden bij een vraag: knoppen in plaats van typen */
.ov-snel{display:flex; flex-wrap:wrap; gap:8px; margin-top:10px}
.ov-snel-knop{padding:9px 15px; border-radius:11px; cursor:pointer;
  border:1px solid rgba(7,23,47,.18); background:#fff; color:var(--ink);
  font:inherit; font-size:.9rem; font-weight:600;
  transition:transform .12s ease, background .15s, border-color .15s}
.ov-snel-knop:hover{border-color:var(--ink); background:var(--paper-2)}
.ov-snel-knop:active{transform:scale(.97)}
.ov-snel-knop.is-gekozen{background:var(--gold); border-color:var(--gold); color:#231703}
.ov-snel-knop[disabled]{opacity:.5; cursor:default}
.ov-antwoord{margin-top:10px}
.ov-antwoord input{width:100%; box-sizing:border-box; padding:10px 12px; border:1px solid #cfd6e0;
  border-radius:10px; font:inherit; margin:0 0 8px}
.ov-taak-knoppen{display:flex; gap:8px; flex-wrap:wrap}
.ov-taak-knoppen .btn{padding:8px 14px; font-size:.88rem}
.ov-tegels{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:22px 0 0}
/* een tegel over beide kolommen: gebruikt voor wat de klant nog aan ons moet
   betalen, zodat dat bovenaan staat en niet als tegeltje meetelt */
.ov-tegel-breed{grid-column:1 / -1}
/* niets openstaand = goed nieuws, dus groen in plaats van een bedrag van nul.
   De tekst is langer dan een bedrag, vandaar de kleinere maat.
   Groen op wit: 5,3:1. */
.ov-tegel.is-goed strong{color:#1f7a4d; font-size:1.02rem; line-height:1.3}
.ov-tegel.is-goed small{color:rgba(31,122,77,.8)}
/* de kaart staat nu bovenaan het overzicht; daar hoort geen marge van 22 px boven */
.ov-tegels:first-child{margin-top:0}
.ov-tegel{text-align:left; padding:14px 16px; border-radius:14px; border:1px solid rgba(7,23,47,.09);
  background:#fff; font:inherit; cursor:pointer; color:#07172f}
.ov-tegel .ov-klein{opacity:1; color:rgba(7,23,47,.5)}
.ov-tegel strong{display:block; font-size:1.15rem; margin:2px 0}
.ov-tegel small{color:rgba(7,23,47,.55)}
.ov-lijst{list-style:none; margin:0; padding:0}
.ov-lijst li{display:flex; justify-content:space-between; gap:12px; padding:10px 0;
  border-bottom:1px solid rgba(7,23,47,.06); font-size:.92rem}
.fact-kwartalen{margin:0 0 18px}
.fact-kwartalen .ov-tegel:only-child{grid-column:1 / -1}

/* laadskelet in plaats van "even kijken" */
.skelet{height:18px; border-radius:8px; margin:0 0 12px;
  background:linear-gradient(90deg,#eef1f5 25%,#f7f9fb 50%,#eef1f5 75%); background-size:200% 100%;
  animation:skelet 1.2s infinite}
.skelet.kort{width:60%}
@keyframes skelet{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* aanleveren */
.filemeter.is-goed{color:#1d6b45; font-weight:600}
.lever-vraag{padding:10px 14px; border-radius:10px; background:rgba(193,154,74,.14);
  font-size:.9rem; font-weight:600; margin:0 0 14px}
.zend-lijst{list-style:none; margin:0; padding:0}
.zend-lijst li{display:flex; justify-content:space-between; align-items:center; gap:12px;
  padding:10px 0; border-bottom:1px solid rgba(7,23,47,.06); font-size:.92rem}
.zend-lijst small{color:rgba(7,23,47,.55)}

/* administratie */
.dossier-titel{display:flex; flex-direction:column}
.dossier-titel em{font-style:normal; font-weight:500; font-size:.78rem; color:rgba(7,23,47,.5)}
.dossier-periode.is-overig{background:#f6f8fb}
.dossier-sub{margin:10px 0 0; padding:8px 0 0; border-top:1px solid rgba(7,23,47,.06)}
.dossier-sub > summary{cursor:pointer; font-weight:600; font-size:.9rem}
.dossier-zip{display:inline-block; padding:3px 10px; border-radius:999px; font-size:.72rem;
  font-weight:700; white-space:nowrap; border:1px solid rgba(127,127,127,.35); color:inherit;
  text-decoration:none}
.dossier-zip:hover{background:rgba(127,127,127,.12)}

/* berichten */
.ber-draad{display:flex; flex-direction:column; gap:8px; max-height:60vh; overflow-y:auto;
  padding:4px 0 12px}
.ber{max-width:82%; padding:10px 14px; border-radius:16px; font-size:.94rem; line-height:1.45}
.ber.is-ik{align-self:flex-end; background:#07172f; color:#fff; border-bottom-right-radius:4px}
.ber.is-zij{align-self:flex-start; background:#f0f2f6; border-bottom-left-radius:4px}
.ber time{display:block; font-size:.7rem; opacity:.6; margin-top:4px}
.ber-form{display:flex; gap:8px; align-items:flex-end; position:sticky; bottom:0;
  background:#fff; padding:8px 0}
.ber-form textarea{flex:1; padding:10px 12px; border:1px solid #cfd6e0; border-radius:12px;
  font:inherit; resize:none; min-width:0}

/* facturen 2: concept, te laat, huisstijl, producten */
.fact-merk.concept{background:#f0f2f6; color:#6b7684}
.fact-merk.telaat{background:#fdecec; color:#9c2b2b}
.fact-acties button.is-rood{background:#fdecec; color:#9c2b2b}
.fact-logo{min-height:56px; display:flex; align-items:center; margin:0 0 10px}
.fact-logo img{max-width:220px; max-height:80px; border:1px solid rgba(7,23,47,.08); border-radius:6px; padding:4px; background:#fff}
.fact-taak-knoppen{display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-top:8px}
.facturen input[type=color]{height:42px; padding:4px}
label.fact-terug{display:inline-block}

/* factuurregel: titel + bedrag bovenaan, knoppen op een eigen regel eronder */
.fact-lijst li{flex-wrap:wrap; gap:4px 12px}
.fact-lijst li > div:first-child{flex:1 1 55%; min-width:0}
.fact-lijst .fact-bedrag{flex:0 0 auto}
.fact-lijst .fact-acties{flex:1 1 100%; justify-content:flex-start; margin-top:2px}
  /* Vijf knoppen passen niet naast elkaar op een telefoon van 375 px: de rij
     duwde de hele pagina zijwaarts (434 px inhoud, 375 px scherm). Laten
     afbreken in plaats van uitsteken. Tikvlak ook groter: 28 px hoog is te
     klein voor een duim. */
.fact-lijst .fact-acties{flex-wrap:wrap; gap:6px 6px}
.fact-lijst .fact-acties button{padding:8px 12px; font-size:.8rem; min-height:36px}


/* een factuur bekijken binnen de app, met een terugknop erboven */
.fact-blad{width:100%; height:64vh; border:1px solid rgba(7,23,47,.12); border-radius:12px;
  background:#fff; margin:12px 0 0}
.fact-acties-groot{justify-content:flex-start; flex-wrap:wrap; gap:8px; margin:14px 0 0}
.fact-acties-groot .btn{padding:10px 18px}
.fact-acties-groot a.fact-terug{text-decoration:none; display:inline-block}

/* de terugknop op het factuurscherm mag niet over het hoofd te zien zijn */
.fact-terug.is-terug{background:#07172f; color:#fff; border-color:#07172f}
.fact-terug.is-terug:hover{background:#0e2145}

/* ---- facturen: zoeken, filteren, meldingen (7-9-2026) ------------------ */
.fact-nieuwknop{display:block; width:100%; margin:14px 0 4px}
#fact-nieuwvak[hidden]{display:none}
.fact-kopje{margin:18px 0 2px; font-size:.78rem; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase; color:rgba(7,23,47,.5)}
.fact-zoekbalk{margin:16px 0 4px}
.fact-zoekbalk input{width:100%; padding:10px 12px; font:inherit;
  border:1px solid rgba(7,23,47,.18); border-radius:8px; background:#fff}
.fact-chips{display:flex; flex-wrap:wrap; gap:6px; margin-top:8px}
.fact-chip{border:1px solid rgba(7,23,47,.16); background:#fff; border-radius:999px;
  padding:6px 14px; font:inherit; font-size:.8rem; font-weight:600; cursor:pointer;
  color:rgba(7,23,47,.66); min-height:34px}
.fact-chip.is-aan{background:#07172f; border-color:#07172f; color:#fff}
.fact-meerknop{font-weight:700}
.fact-lijst .fact-acties-uit{flex:1 1 100%; margin-top:0}
.fact-merk.telaat{background:#fdecec; color:#9c2b2b}
.fact-laat{color:#9c2b2b; font-weight:700}
.ov-tegel.is-laat strong{color:#9c2b2b}
.fact-toast{position:fixed; left:12px; right:12px; z-index:60;
  bottom:calc(104px + max(14px, env(safe-area-inset-bottom, 0px)));
  background:#07172f; color:#fff; padding:12px 14px; border-radius:10px;
  font-size:.9rem; line-height:1.35; box-shadow:0 8px 24px rgba(7,23,47,.28); cursor:pointer}
.fact-toast.is-fout{background:#9c2b2b}
html:not(.is-app) .fact-toast{bottom:16px; left:auto; right:16px; max-width:380px}

/* ==================================================================== */
/* ---- portaal 3 (7-9-2026): naamchip, aangifte, chat, ritten, donker  */
/* ==================================================================== */

/* naamchip in de kop (alleen in de app; in de browser blijft de kaart) */
.klant-popover{display:contents}
html.is-app .nav{position:relative}
html.is-app .klant-bar{position:absolute; right:14px; top:50%; transform:translateY(-50%);
  margin:0; padding:0; background:none; border:0; gap:0; flex-wrap:nowrap}
html.is-app:not(.is-binnen) .klant-bar{display:none}
.klant-knop{display:none}
html.is-app .klant-knop{display:flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:50%; cursor:pointer;
  border:1px solid rgba(238,242,248,.3); background:rgba(238,242,248,.1);
  color:#fff; font:inherit; font-size:.8rem; font-weight:700; letter-spacing:.04em}
html.is-app .klant-knop[aria-expanded="true"]{background:#c19a4a; border-color:#c19a4a; color:#07172f}
html.is-app .klant-popover{display:none; position:absolute; right:0; top:48px; min-width:220px;
  padding:14px 16px; border-radius:12px; background:#fff; color:var(--ink);
  box-shadow:0 12px 32px rgba(7,23,47,.3); z-index:95; text-align:left}
html.is-app .klant-bar.is-open .klant-popover{display:block}
html.is-app .klant-popover .klant-bar-naam{display:block; font-weight:700; line-height:1.3}
html.is-app .klant-popover .klant-bar-nr{display:block; margin:3px 0 10px; font-size:.8rem}
html.is-app .klant-popover .klant-bar-uit{display:inline-block; padding:6px 0}
html.is-app #portal-app{padding-top:18px}

/* lege schermen */
.leeg{text-align:center; padding:26px 18px; margin:14px 0;
  border:1px dashed rgba(7,23,47,.2); border-radius:14px; color:rgba(7,23,47,.7)}
.leeg svg{width:36px; height:36px; color:var(--gold-ink); margin:0 auto 8px; display:block}
.leeg h4{margin:0 0 4px; font-size:var(--fs-body); color:var(--ink)}
.leeg p{margin:0 0 12px; font-size:var(--fs-sm); line-height:1.45}

/* aanleveren: wat is het */
.lever-soort{display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin:14px 0 12px}
.lever-soort-kop{flex:1 1 100%; font-size:.78rem; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:rgba(7,23,47,.55); margin-bottom:2px}


/* Geen verbinding (18-9-2026). Staat boven de tabbladen, neemt geen plek in
   zodra er weer bereik is, en zegt wat er aan de hand is in plaats van de
   klant naar het inlogscherm te gooien. */
.app-offline{display:flex; flex-wrap:wrap; align-items:center; gap:10px;
  margin:0 0 14px; padding:11px 14px; border-radius:12px;
  background:rgba(193,154,74,.14); border:1px solid rgba(193,154,74,.4);
  color:var(--ink); font-size:var(--fs-sm); line-height:1.4}
.app-offline span{flex:1 1 200px}
.app-offline .btn{flex:none; padding:6px 14px; font-size:.82rem}
/* In de donkere schil kwam rgba-goud op .14 nauwelijks door; dan leest de balk
   als een leeg vlak in plaats van als een melding. */
html.is-app .app-offline{color:#eef3fa; background:rgba(193,154,74,.16);
  border-color:rgba(193,154,74,.55); border-left:3px solid #c19a4a}

/* aangifte: akkoord en betalen */
.ov-akkoord{background:linear-gradient(135deg,#1d6b45,#0f4a2f); color:#fff}
.ov-akkoord .ov-klein{color:rgba(255,255,255,.7)}
.ov-betaal{background:#fff; color:var(--ink); border:2px solid #c19a4a}
.ov-betaal .ov-klein{color:rgba(7,23,47,.55)}
.ov-betaal .ov-groot{color:var(--ink)}
.ov-akkoord-p{margin:8px 0 12px; font-size:.95rem; line-height:1.5}
.ov-akkoord .ov-taak-knoppen{margin-top:4px}
.ov-akkoord .fact-terug{background:rgba(255,255,255,.14); color:#fff; border-color:transparent}
.ov-betaal-lijst{display:grid; grid-template-columns:auto 1fr; gap:6px 14px; margin:12px 0; font-size:.95rem}
.ov-betaal-lijst dt{color:rgba(7,23,47,.55); font-weight:600}
.ov-betaal-lijst dd{margin:0; font-weight:600; font-variant-numeric:tabular-nums; word-break:break-word}
.ov-kopieer{border:0; background:rgba(7,23,47,.08); border-radius:6px; padding:3px 9px;
  font:inherit; font-size:.76rem; font-weight:600; cursor:pointer; margin-left:6px; color:var(--ink)}
.ov-tegel.is-laat strong{color:#9c2b2b}

/* meldingen aanzetten */
.push-vak{display:flex; flex-wrap:wrap; gap:10px; align-items:center; justify-content:space-between;
  padding:12px 14px; margin:0 0 16px; border-radius:12px; background:#fff7e6; border:1px solid #efd9a6;
  font-size:var(--fs-sm); line-height:1.4}
.push-vak .ov-taak-knoppen{margin:0}
.push-vak.is-aan{background:#e3f3ea; border-color:#a9d6bd; color:#1d6b45; font-weight:600}

/* ritten */
.rit-form{margin:10px 0 20px}
.rit-opties{display:flex; flex-wrap:wrap; gap:8px 18px; margin:10px 0 14px; font-size:.9rem}
.rit-opties label{display:flex; align-items:center; gap:7px}
.rit-opties input{width:18px; height:18px}
.fact-fout{color:#9c2b2b; font-size:.88rem; margin:0 0 10px}

/* chat */
.ber-wie{display:block; font-size:.68rem; font-weight:700; letter-spacing:.07em;
  text-transform:uppercase; color:var(--gold-ink); margin-bottom:3px}
.ber-tekst{display:block}
.ber-foto img{display:block; max-width:100%; max-height:260px; border-radius:10px; margin:2px 0 6px}
.ber-bestand{display:inline-block; margin:2px 0 6px; padding:6px 10px; border-radius:8px;
  background:rgba(7,23,47,.08); color:inherit; text-decoration:underline; font-size:.88rem}
.ber.is-ik .ber-bestand{background:rgba(255,255,255,.14)}
.ber-vink{font-style:normal; margin-left:6px; opacity:.55; letter-spacing:-.15em}
.ber-vink.is-gelezen{opacity:1; color:#7fd0ff}
.ber-form{flex-wrap:wrap}
.ber-clip{display:flex; align-items:center; justify-content:center; flex:0 0 auto;
  width:42px; height:42px; border-radius:50%; cursor:pointer;
  background:rgba(7,23,47,.06); color:rgba(7,23,47,.7)}
.ber-clip svg{width:20px; height:20px}
.ber-clip.is-vol{background:#fff2d8; color:#7a5310}
.ber-stuur{width:42px; height:42px; padding:0 !important; display:flex; align-items:center;
  justify-content:center; border-radius:50% !important; flex:0 0 auto}
.ber-stuur svg{width:18px; height:18px}
.ber-form textarea{min-height:42px; max-height:140px; resize:none; line-height:1.35}
.ber-bijlage-naam, .ber-fout{flex:1 1 100%; font-size:.78rem; color:rgba(7,23,47,.6)}
.ber-fout{color:#9c2b2b}
html.is-app .ber-draad{max-height:none; overflow:visible; padding-bottom:8px}
html.is-app .ber-form{position:fixed; left:0; right:0; z-index:70; padding:8px 12px;
  background:#fff; border-top:1px solid rgba(7,23,47,.1);
  bottom:calc(81px + max(14px, env(safe-area-inset-bottom, 0px)))}
html.is-app .app-paneel[data-paneel="berichten"]{padding-bottom:70px}

/* donkere stand: volgt het toestel, alleen in de app */

.rit-form label{display:block; margin:10px 0 4px; font-size:.84rem; font-weight:600}
.rit-form input:not([type=checkbox]){width:100%; padding:10px 12px; font:inherit;
  border:1px solid rgba(7,23,47,.18); border-radius:8px; background:#fff}
.rit-form .fact-rij > div{flex:1 1 140px}
.rit-form .rit-opties label{display:flex; margin:0; font-weight:400}
.rit-form .btn{margin-top:4px}

/* donkere stand, nalezing op de telefoon 7-9-2026: alles wat nog navy-op-navy stond */

/* de scroll-voortgangsbalk hoort bij de site, niet bij de app: daar hing hij
   als losse gouden streep midden in beeld (telefoon van Jawad, 7-9-2026) */
html.is-app .scroll-progress, html.is-app .scroll-progress-head{display:none !important}

/* adressuggesties bij ritten (7-9-2026) */
.adres-veld{position:relative}
.adres-lijst{position:absolute; left:0; right:0; top:100%; z-index:40; margin:2px 0 0;
  background:#fff; border:1px solid rgba(7,23,47,.16); border-radius:10px;
  box-shadow:0 10px 26px rgba(7,23,47,.16); overflow:hidden; max-height:240px; overflow-y:auto}
.adres-lijst button{display:block; width:100%; text-align:left; border:0; background:none;
  padding:10px 12px; font:inherit; font-size:.9rem; color:var(--ink); cursor:pointer;
  border-top:1px solid rgba(7,23,47,.06)}
.adres-lijst button:first-child{border-top:0}
.adres-lijst button:hover, .adres-lijst button.is-actief{background:rgba(193,154,74,.14)}
.adres-lijst button small{display:block; font-size:.74rem; color:rgba(7,23,47,.5)}
.rit-hint{font-size:.8rem; color:rgba(7,23,47,.6); margin:-6px 0 10px}
.rit-hint.is-goed{color:#1d6b45}

/* aanleveren: geen keuzes, één zin uitleg (Jawad, 7-9-2026) */
.lever-uitleg{margin:0 0 14px; font-size:.95rem; line-height:1.5; color:rgba(7,23,47,.75)}

/* ======================================================================
   APP-SCHIL (9-9-2026) - "maak het professioneler, laat het als een app
   voelen". Alles hieronder geldt alleen met html.is-app:
   - een slanke, vaste kop die onder de statusbalk van de telefoon doorloopt
     (viewport-fit=cover + safe-area; zonder dat stond er een witte strook
     boven de app);
   - sans-serif voor de bediening, de serif blijft alleen voor de merknaam;
   - kleinere lettermaat (een app is geen leespagina), velden op 16 px
     zodat iOS niet inzoomt;
   - platte knoppen van 44 px, drukfeedback, geen blauwe tikflits;
   - één hoekradius voor alle kaarten, glazen tabbalk, zachte schermwissel.
   Lichte stand; de donkere aanvullingen staan in het donkere blok eronder.
   ====================================================================== */
html.is-app{background:#07172f}
html.is-app body{-webkit-tap-highlight-color:transparent; -webkit-touch-callout:none}
html.is-app button, html.is-app .btn, html.is-app .app-tab, html.is-app .ov-tegel,
html.is-app .fact-chip, html.is-app summary, html.is-app .fact-terug, html.is-app .ov-taak-stuk{
  user-select:none; -webkit-user-select:none; touch-action:manipulation}
html.is-app input, html.is-app select, html.is-app textarea{font-size:16px}

/* kop */
html.is-app .site-header{position:sticky; top:0; z-index:80;
  padding-top:env(safe-area-inset-top, 0px);
  background:rgba(7,23,47,.94); border-bottom:1px solid rgba(255,255,255,.08)}
/* GEEN backdrop-filter hier: op een echt toestel gaf blur() op deze vaste kop
   een vage grijze waas over het logo, vooral bovenaan waar er niets achter
   de kop staat om te vervagen (gemeld 10-9-2026, hier nagebouwd en bevestigd
   door het weg te halen). De kop is toch al 94% dekkend, dus het effect was
   nauwelijks zichtbaar wanneer het wél goed rendert - de vaste ondergrondkleur
   hieronder doet al het werk. */
/* 58 i.p.v. 52: bij 52 raakte de bovenkant van de gouden rand de statusbalk
   en leek het medaillon afgesneden (gemeld 10-9-2026). */
html.is-app .nav{min-height:58px; justify-content:flex-start}
/* dezelfde kapitalen en letterafstand als op de site; de ondertitel en de
   haarlijn passen niet in een kop van 53 px en blijven verborgen */
html.is-app .brand-name{font-size:.98rem; font-weight:600; letter-spacing:.12em}
html.is-app .klant-knop{font-size:.74rem}
/* typografie */
html.is-app h1, html.is-app h2, html.is-app h3, html.is-app h4,
html.is-app .leeg h4, html.is-app .ov-kop{font-family:var(--sans); letter-spacing:0}
html.is-app .ov-kop{font-weight:700}
html.is-app .ov-taak-tekst{font-weight:600}
html.is-app .leeg h4{font-size:1rem; font-weight:700}
/* kaarten */
html.is-app .ov-taak, html.is-app .ov-tegel, html.is-app .dossier-periode, html.is-app .leeg,
html.is-app .app-login-kaart, html.is-app .ov-kaart, html.is-app .dossier-wacht,
html.is-app .push-vak, html.is-app .fact-let, html.is-app .dropzone{border-radius:16px}
html.is-app .ov-taak-stuk{border-radius:var(--r-kaart)}
html.is-app .leeg{border-style:solid}

/* knoppen en velden */
html.is-app .btn{box-shadow:none; min-height:44px; padding:10px 18px; border-radius:var(--r-kaart);
  transition:transform .12s ease, opacity .12s ease, background .15s}
html.is-app .btn:hover{transform:none}
html.is-app .btn:active, html.is-app .fact-terug:active, html.is-app .fact-chip:active,
html.is-app .ov-tegel:active, html.is-app .ov-taak-stuk:active{transform:scale(.97); opacity:.85}
html.is-app .btn-lg{min-height:50px; font-size:1rem}
html.is-app .ov-taak-knoppen .btn{min-height:40px; padding:8px 16px; font-size:.9rem}
html.is-app .ov-taak-knoppen .fact-terug{min-height:40px; border-radius:var(--r-kaart); padding:8px 14px}
html.is-app .fact-terug{border-radius:10px; transition:transform .12s ease, opacity .12s ease}
html.is-app .fact-chip{transition:transform .12s ease, opacity .12s ease}
html.is-app .ov-antwoord input, html.is-app .ber-form textarea{border-radius:var(--r-kaart); min-height:44px}

/* schermwissel: het nieuwe paneel schuift zachtjes in */
@keyframes paneel-in{from{opacity:0; transform:translateY(6px)}to{opacity:1; transform:none}}
html.is-app .app-paneel:not([hidden]){animation:paneel-in .18s ease-out}
@media (prefers-reduced-motion: reduce){ html.is-app .app-paneel:not([hidden]){animation:none} }

/* een scherm dat korter is dan de telefoon (9-9-2026)
   Aanleveren en Facturen vullen het scherm niet: de inhoud plakte bovenaan en
   onder de laatste kaart bleef een gat staan tot aan de tabbalk - bij Facturen
   ruim 500 px, meer dan de helft van het scherm. Oorzaak is geen fout maar
   gewoon weinig inhoud; #portal-app was net zo hoog als wat erin stond.
   De schil is nu een flexkolom van #portal-app tot het paneel, zodat het
   zichtbare paneel altijd de ruimte tussen kop en tabbalk vult. Is de inhoud
   langer (Overzicht, Administratie, Berichten), dan groeit alles gewoon door
   en scrollt het scherm als vanouds - `flex:1 0 auto` kan niet krimpen, dus
   er valt nooit iets weg.
   De 54 px is de hoogte van de vaste kop (nav 52 + rand). Zonder `dvh`
   (iOS < 16.4) vervalt de hele calc en staat alles zoals het stond.

   ⚠ Er wordt met opzet NIET ook `env(safe-area-inset-top)` afgetrokken, hoe
   logisch dat ook lijkt. Op de schermen die niet scrollen stond de vaste
   tabbalk 62 pt boven de onderrand van het toestel, met daaronder een strook
   paginakleur - precies de hoogte van de Dynamic Island-inzet van dat toestel
   (gemeten aan vijf schermafdrukken van een iPhone 16 Pro, 9-9-2026: op
   Administratie, dat wél scrolt, liep de balk gewoon tot onderaan). De balk
   zakt op zijn plek zodra de pagina langer is dan het scherm; door die ene
   term weg te laten is de pagina precies die inzet langer. Op een toestel
   zonder inzet is de term 0 en verandert er dus niets. */
/* de 60 volgt de kop hierboven (58 + rand); zie de uitleg bij de flexketen */
html.is-app #portal-app{min-height:calc(100dvh - 60px); display:flex; flex-direction:column}
/* ⚠ `min-width:0` en `width:100%` zijn geen opsmuk. Een flexkolom ontleent
   zijn breedte aan de max-content van wat erin zit; zonder deze twee groeide
   de hele app mee met de langste tekst erin - één bestandsnaam van 90 tekens
   in een vraag blies de kolom op van 331 naar 626 px en de telefoon zoomde de
   pagina uit (gemeld 10-9-2026). Voor mijn flexketen waren dit blok-elementen
   en namen ze vanzelf de breedte van de ouder. */
html.is-app #portal-app > .container,
html.is-app #app-binnen,
html.is-app .portal-grid{flex:1 0 auto; display:flex; flex-direction:column;
  width:100%; min-width:0}
/* ook het paneel zelf: .portal-grid staat op align-items:start, dus zonder
   width:100% werd het paneel zo breed als de langste bestandsnaam in een
   stuk-knopje (nowrap) - 358 px op een scherm van 375 (10-9-2026) */
html.is-app .app-paneel:not([hidden]){flex:1 0 auto; min-width:0; width:100%}

/* Aanleveren: stond tot 11-9-2026 verticaal in het midden (justify-content:
   center + margin-bottom:-51px). Met de lijst 'Eerder verstuurd' eronder gaf
   dat bovenin een leeg vlak en begon de tekst te laag (Jawad, schermafdruk
   16:52). Nu gewoon bovenaan, net als de andere tabbladen. */
html.is-app .app-paneel[data-paneel="lever"]{display:flex; flex-direction:column;
  justify-content:flex-start}

/* Facturen: zolang er nog geen facturen zijn rekt de lege-staat-kaart door tot
   de tabbalk, met zijn tekst en knop in het hart. Zodra er wel facturen zijn
   is .leeg weg en vult de lijst de ruimte vanzelf. */
html.is-app .app-paneel[data-paneel="facturen"],
html.is-app .app-paneel[data-paneel="facturen"] > .facturen,
html.is-app .app-paneel[data-paneel="facturen"] > .facturen > #fact-lijstvak{
  display:flex; flex-direction:column}
html.is-app .app-paneel[data-paneel="facturen"] > .facturen,
html.is-app .app-paneel[data-paneel="facturen"] > .facturen > #fact-lijstvak{flex:1 0 auto}
html.is-app #fact-lijstvak > .leeg{flex:1 0 auto; display:flex; flex-direction:column;
  align-items:center; justify-content:center}

/* Het factuurblad in de app (10-9-2026)
   `factuurBlok` in _worker.js zet zijn opmaak in inline-stijlen, want datzelfde
   blok gaat ook als mail de deur uit en daar werken geen stijlbladen. Die
   opmaak gaat uit van een A4-breedte: de kop is een tabel met afzender links
   en factuurnummer rechts. Op een telefoon van 375 px botsen die twee kolommen
   en breekt "Factuur 2026-003" middenin. Onder de 560 px zetten we alleen die
   koptabel onder elkaar; de regeltabel eronder blijft een tabel, want die
   heeft zijn kolommen juist nodig. */
/* tabbalk */
html.is-app .app-tabs{background:rgba(255,255,255,.88); border-top-color:rgba(7,23,47,.08);
  backdrop-filter:saturate(160%) blur(16px); -webkit-backdrop-filter:saturate(160%) blur(16px)}
html.is-app .app-tab{gap:3px; padding-top:6px; transition:transform .12s ease, color .15s}
html.is-app .app-tab:active{transform:scale(.92)}
html.is-app .app-tab svg{width:24px; height:24px; stroke-width:1.7}
html.is-app .app-tab.aan{font-weight:700}
html.is-app .app-tab.aan svg{stroke-width:2.2}

/* ======================================================================
   DONKERE STAND - ALTIJD AAN in de app (Jawad, 9-9-2026: "alleen de donkere
   modus, geen lichte, permanent"). Tot die dag volgde dit blok het toestel
   via @media (prefers-color-scheme: dark); nu geldt het onvoorwaardelijk.
   Staat met opzet ACHTERAAN zodat hij altijd wint van de lichte regels
   erboven - die blijven staan voor de website zelf (html zonder .is-app).
   Nieuwe app-regels dus altijd HIER in het blok, niet erboven.
   ====================================================================== */
@media all{
  html.is-app{color-scheme:dark}
  html.is-app body, html.is-app #portal-app, html.is-app .section{background:var(--app-diep); color:#e3e9f2}
  html.is-app h1, html.is-app h2, html.is-app h3, html.is-app h4, html.is-app strong{color:#f3f6fa}
  html.is-app .ov-kop, html.is-app .fact-kopje, html.is-app .fact-kop{color:#f3f6fa}
  html.is-app .ov-klein, html.is-app small, html.is-app .fact-stil, html.is-app .dossier-leeg,
  html.is-app .lever-soort-kop, html.is-app .ov-taak-uitleg{color:rgba(227,233,242,.62)}
  html.is-app .ov-taak-uitleg strong.ov-uitleg-kop{color:rgba(238,243,250,.92)}
  html.is-app .ov-tegel, html.is-app .ov-taak, html.is-app .dossier-periode, html.is-app .dossier-wacht,
  html.is-app .zend-lijst li, html.is-app .fact-lijst li, html.is-app .ov-lijst li, html.is-app .dossier-sub,
  html.is-app .leeg, html.is-app .rit-form, html.is-app .push-vak, html.is-app .fact-let{
    background:var(--app-vlak); border-color:rgba(255,255,255,.1); color:#e3e9f2}
  html.is-app .ov-snel-knop{background:rgba(255,255,255,.07); color:#e3e9f2;
    border-color:rgba(255,255,255,.18)}
  html.is-app .ov-snel-knop:hover{background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.4)}
  html.is-app .ov-snel-knop.is-gekozen{background:var(--gold); border-color:var(--gold); color:#231703}
  html.is-app .ov-taak-stuk{background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.14);
    color:#e3e9f2}
  html.is-app .ov-taak-stuk:hover{background:rgba(255,255,255,.1)}
  html.is-app .ov-tegel strong, html.is-app .fact-bedrag{color:#f3f6fa}
  html.is-app .ov-tegel.is-laat strong, html.is-app .fact-laat{color:#ff8a8a}
  /* lichter groen op de donkere kaart: 7,9:1 op var(--app-vlak) */
  html.is-app .dossier-periode h4.dossier-groep{color:var(--gold)}
  html.is-app .dossier-periode h4.dossier-groep::after{
    background:linear-gradient(90deg, rgba(193,154,74,.55), rgba(193,154,74,0))}
  html.is-app .ov-tegel.is-goed strong{color:#5ec98d}
  html.is-app .ov-akkoord{background:linear-gradient(135deg,#1d6b45,#0f4a2f)}
  html.is-app .ov-betaal{background:var(--app-vlak); color:#e3e9f2; border-color:#c19a4a}
  html.is-app .ov-betaal .ov-groot, html.is-app .ov-betaal .ov-klein{color:#f3f6fa}
  html.is-app .ov-betaal-lijst dt{color:rgba(227,233,242,.62)}
  html.is-app .ov-kopieer{background:rgba(255,255,255,.12); color:#f3f6fa}
  html.is-app .push-vak{border-color:#6b5a2a}
  /* het pakket bovenaan het overzicht (10-9-2026): goud op marineblauw, met
     het medaillon van het beeldmerk; --gold haalt 6,2:1 op var(--app-vlak) en ook op
     het lichtste stuk van het verloop nog 4,8:1 */
  html.is-app .ov-pakket{display:flex; align-items:center; gap:14px; padding:14px 16px;
    border-radius:var(--r-vak); border:1px solid rgba(193,154,74,.5);
    background:linear-gradient(135deg, rgba(193,154,74,.16), rgba(193,154,74,.03) 65%), var(--app-vlak)}
  html.is-app .ov-pakket .ov-klein{color:var(--gold); opacity:1; letter-spacing:.14em}
  html.is-app .ov-pakket strong{display:block; font-family:var(--serif); font-weight:600; color:var(--gold)}
  html.is-app .ov-pakket small{display:block; margin-top:2px}
  html.is-app .ov-pakket + .ov-tegels{margin-top:10px}
  html.is-app .ov-pakket-ic{flex:0 0 auto; width:44px; height:44px; border-radius:50%;
    display:grid; place-items:center; color:var(--gold); border:1px solid transparent;
    background:linear-gradient(180deg, var(--app-vlak-op) 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 6px 14px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.08)}
  html.is-app .ov-pakket-ic svg{width:22px; height:22px; display:block}
  html.is-app .push-vak.is-aan{background:#123122; border-color:#1d6b45; color:#9fe0bb}
  /* 12-9-2026: dezelfde vormtaal als de kaarten - gouden haarlijn in plaats van
     een witte rand. Hier gewijzigd en niet verderop overschreven: dit blok is
     volgens de huisstijl de plek voor app-kleuren. */
  html.is-app input, html.is-app select, html.is-app textarea{
    background:rgba(7,19,38,.72); color:#eef2f8; border-color:rgba(219,185,104,.20);
    border-radius:13px}
  html.is-app input:focus, html.is-app select:focus, html.is-app textarea:focus{
    border-color:var(--gold); box-shadow:0 0 0 3px rgba(193,154,74,.18); outline:none}
  html.is-app input::placeholder, html.is-app textarea::placeholder{color:rgba(227,233,242,.4)}
  html.is-app .app-tabs{border-top-color:rgba(255,255,255,.1)}
  html.is-app .fact-acties button, html.is-app .fact-chip, html.is-app .fact-terug, html.is-app .fact-meerknop{
    background:rgba(255,255,255,.09); color:#e3e9f2; border-color:rgba(255,255,255,.12)}
  html.is-app .fact-toast{background:#e3e9f2; color:var(--app-diep)}
  html.is-app .fact-toast.is-fout{background:#ff8a8a; color:#2a0a0a}
  html.is-app .ber.is-zij{color:#e3e9f2}
  html.is-app .ber.is-ik{background:#e3e9f2; color:var(--app-diep)}
  html.is-app .ber-bestand{background:rgba(255,255,255,.1)}
  html.is-app .ber-form{background:#0f1a2e; border-top-color:rgba(255,255,255,.1)}
  html.is-app .ber-clip{background:rgba(255,255,255,.1); color:#e3e9f2}
  html.is-app .klant-popover{color:#e3e9f2}
  /* Uitloggen stond op rgba(7,23,47,.55) - bijna zwart op een donkere
     popover, dus onzichtbaar (gemeld 10-9-2026). In rust gewoon leesbaar
     (13,3:1), rood pas bij aanraken, net als in de lichte stand.
     Het klantnummer stond op donkergroen #1d6b45 en had hetzelfde
     probleem; dat is nu dezelfde groentint als elders in de app. */
  html.is-app .klant-popover .klant-bar-uit{color:#e3e9f2;
    text-decoration-color:rgba(227,233,242,.45)}
  html.is-app .klant-popover .klant-bar-uit:hover,
  html.is-app .klant-popover .klant-bar-uit:active{color:#ff8a8a}
  html.is-app .dropzone, html.is-app .filelist li, html.is-app .filemeter, html.is-app .lever-vraag{
    background:var(--app-vlak); border-color:rgba(255,255,255,.14); color:#e3e9f2}
  /* bestandsnamen in het dossier: geen webblauw op marineblauw, maar gewoon
     de tekstkleur; de rij is het tikvlak, goud onderstreept bij aanraken
     (nalezing 11-9-2026) */
  html.is-app .dossier-lijst a{color:#e3e9f2; font-weight:500}
  html.is-app .dossier-lijst a:hover, html.is-app .dossier-lijst a:active{
    text-decoration:underline; text-decoration-color:var(--gold); text-underline-offset:3px}
  html.is-app .dossier-lijst li{border-color:rgba(255,255,255,.08)}
  /* nalezing 11-9-2026 (bij het maken van de app-schermen voor de site):
     het kruisje naast een gekozen bestand stond donker op donker, en de
     akkoordkaart plakte tegen de tegel "Openstaand bij Valorem" erboven */
  html.is-app .filelist-weg{background:rgba(255,255,255,.1); color:#e3e9f2}
  html.is-app .filelist-weg:hover, html.is-app .filelist-weg:active{background:rgba(255,138,138,.18); color:#ff8a8a}
  html.is-app .filelist li{border-bottom-color:rgba(255,255,255,.08)}
  html.is-app .ov-tegels + #push-vak + .ov-kaart, html.is-app .ov-tegels + .ov-kaart{margin-top:12px}
  html.is-app .fact-blad{background:#fff; border-radius:8px}
  html.is-app .app-login-kaart{color:#e3e9f2}
  html.is-app .skelet{background:rgba(255,255,255,.08)}
  html.is-app .btn-ghost{color:#e3e9f2; border-color:rgba(255,255,255,.4)}
  html.is-app .btn-ghost:hover{background:rgba(255,255,255,.08); border-color:#fff}
  html.is-app .dossier-periode > summary, html.is-app .dossier-titel,
  html.is-app .dossier-sub > summary, html.is-app .dossier-periode h4,
  html.is-app .dossier-wacht h3, html.is-app .dossier-wacht p{color:#e3e9f2}
  html.is-app .dossier-titel em, html.is-app .dropzone-hint, html.is-app .filemeter,
  html.is-app .app-login-p, html.is-app .filelist-maat{color:rgba(227,233,242,.62)}
  html.is-app .filelist-naam, html.is-app .lever-vraag, html.is-app .ov-lijst li,
  html.is-app .zend-lijst li strong, html.is-app .fact-lijst li strong,
  html.is-app .ov-taak-tekst, html.is-app label{color:#e3e9f2}

  /* ritformulier en alle overige invoervelden: donker, ook al staat hun
     lichte regel later in dit bestand */
  html.is-app .rit-form input:not([type=checkbox]), html.is-app .fact-zoekbalk input,
  html.is-app .ber-form textarea, html.is-app #fact-nieuw input, html.is-app #fact-nieuw select,
  html.is-app .ov-antwoord input{background:#0f1a2e; color:#e3e9f2; border-color:rgba(255,255,255,.18)}
  html.is-app .rit-opties input{accent-color:#c19a4a}
  html.is-app .fact-kop, html.is-app .rit-form label{color:#e3e9f2}
  /* nalezing 7-9-2026, contrastaudit over alle schermen */
  html.is-app .dossier-lijst span, html.is-app .dossier-wacht h3 span{color:rgba(227,233,242,.62)}
  html.is-app .fact-meer, html.is-app .app-login-link{color:#8fc1ff}
  html.is-app .ber.is-ik .ber-vink.is-gelezen{color:#0b4fa8}
  html.is-app .ber.is-ik .ber-vink{opacity:.7}
  html.is-app .adres-lijst{background:var(--app-vlak); border-color:rgba(255,255,255,.14)}
  html.is-app .adres-lijst button{color:#e3e9f2; border-top-color:rgba(255,255,255,.06)}
  html.is-app .adres-lijst button small{color:rgba(227,233,242,.55)}
  html.is-app .rit-hint{color:rgba(227,233,242,.62)}
  html.is-app .rit-hint.is-goed{color:#9fe0bb}
  html.is-app .lever-uitleg{color:rgba(227,233,242,.8)}

  /* app-schil 9-9-2026: kop, tabbalk en de strook onder de statusbalk */
  html.is-app{background:var(--app-diep)}
  html.is-app .site-header{background:rgba(11,22,38,.92); border-bottom-color:rgba(255,255,255,.08)}
  html.is-app .app-tabs{background:rgba(15,26,46,.9)}
  /* Op een breed scherm blijft de app een kolom van hooguit 820 px in het
     midden, en staan de vijf tabbladen onderaan bij elkaar in plaats van
     uitgesmeerd over 1280 px (nalezing 11-9-2026: de inhoud liep over de
     volle 1136 px uit). */
  @media (min-width:900px){
    html.is-app #portal-app .container{max-width:820px}
    html.is-app .app-tabs{justify-content:center}
    html.is-app .app-tab{flex:0 1 150px}
  }
}

/* --- app-voordelen: compacte rijen met een icoon (9-9-2026) ----------------
   Op de telefoon een enkele kolom van lage rijen in plaats van zes hoge
   kaarten. Het icoon is sinds 10-9-2026 het medaillon van het beeldmerk
   (.brand-mark): marineblauwe schijf, gouden verlooprand, lijnicoon in --gold
   (6,8:1 op marineblauw). De gekleurde tegels ervoor "zagen er nep en
   ai-achtig uit" (Jawad). */
.app-feat{display:grid; gap:14px; grid-template-columns:repeat(3,1fr)}
.app-feat-item{
  display:flex; gap:14px; align-items:flex-start; background:#fff;
  border:1px solid var(--line); border-radius:var(--radius); padding:16px 18px;
  box-shadow:var(--shadow-sm);
}
.app-feat-item h3{font-size:var(--fs-body); margin:0 0 .18em; line-height:1.3}
.app-feat-item p{font-size:var(--fs-sm); color:var(--text-soft); margin:0; line-height:1.45}
.app-feat--lang .app-feat-item p{font-size:var(--fs-body)}
.app-feat-ic{
  flex:0 0 auto; width:48px; height:48px; border-radius:50%; display:grid; place-items:center;
  color:var(--gold); border:1px solid transparent;
  background:linear-gradient(180deg, var(--app-vlak-op) 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 6px 14px rgba(7,23,47,.16), inset 0 1px 0 rgba(255,255,255,.08);
}
.app-feat-ic svg{width:24px; height:24px; display:block}
.app-feat-head{margin-bottom:26px}
/* alleen icoon + titel, als tegels (home en tarieven); de uitleg staat op app.html */
.app-feat--titels .app-feat-item{flex-direction:column; align-items:center; text-align:center;
  gap:12px; padding:20px 14px}
.app-feat--titels .app-feat-item h3{margin:0}
@media (max-width:960px){.app-feat{grid-template-columns:1fr 1fr}}
@media (max-width:640px){
  .app-feat{grid-template-columns:1fr; gap:10px}
  .app-feat-item{padding:12px 14px; gap:12px; align-items:center}
  .app-feat-item h3{font-size:var(--fs-body)}
  .app-feat-item p{font-size:var(--fs-sm); line-height:1.4}
  .app-feat-ic{width:44px; height:44px}
  .app-feat-ic svg{width:22px; height:22px}
  .app-feat-head{margin-bottom:18px}
  .app-feat.app-feat--titels{grid-template-columns:1fr 1fr}
  .app-feat--titels .app-feat-item{padding:16px 10px; gap:10px; align-items:center}
}

/* --- app-slider: de schermen uit de app als slider (11-9-2026) ------------
   Op de home, de tarievenpagina en app.html (app_schermen() in
   _bron/app_pagina.py). De beelden komen uit _bron/maak_appschermen.py
   (echte app, voorbeeldgegevens). Het frame is CSS: een zwarte rand met de
   gouden verlooprand van het beeldmerk, afgeronde hoeken als een iPhone en het
   eilandje bovenin.
   Jawad: "Maak er een mooie visuele slide van als je links naar rechts gaat".
   Het scherm in het midden is groot en scherp, de buren kleiner en gedimd;
   main.js (blok "app-slider") zet .is-slider en .is-actief en regelt de
   pijlen, stipjes, slepen en toetsen. Zonder JavaScript blijft het een gewone
   veegbare rij. */
.app-slider{position:relative; margin:30px 0 0}
.app-schermen{--breed:260px; position:relative; display:flex; align-items:flex-start; gap:22px;
  padding:16px calc(50% - var(--breed) / 2) 6px; overflow-x:auto; overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory; scrollbar-width:none; outline:0;
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%);
          mask-image:linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%)}
.app-schermen::-webkit-scrollbar{display:none}
.app-schermen:focus-visible{outline:2px solid var(--gold); outline-offset:6px; border-radius:var(--r-groot)}
/* tijdens slepen met de muis: geen vastklikken, anders springt hij terug */
.app-schermen.is-slepen{scroll-snap-type:none; cursor:grabbing}
.app-scherm{flex:0 0 var(--breed); width:var(--breed); margin:0; scroll-snap-align:center;
  text-align:center; user-select:none; -webkit-user-select:none}
/* de buren: kleiner en donkerder (niet doorzichtiger: een donkere telefoon
   wordt op de lichte achtergrond dan grijs); hun onderschrift vervaagt */
.app-slider.is-slider .app-scherm{transform:scale(.84); cursor:pointer;
  transition:transform .5s cubic-bezier(.2,.75,.2,1)}
.app-slider.is-slider .app-scherm .telefoon{filter:brightness(.6) saturate(.75); transition:filter .5s ease}
.app-slider.is-slider .app-scherm figcaption{opacity:.4; transition:opacity .5s ease}
.app-slider.is-slider .app-scherm.is-actief{transform:none; cursor:grab}
.app-slider.is-slider .app-scherm.is-actief .telefoon{filter:none}
.app-slider.is-slider .app-scherm.is-actief figcaption{opacity:1}
.telefoon{position:relative; padding:3.4%; border-radius:15% / 7%; border:1.5px solid transparent;
  background:linear-gradient(160deg,#1c2029 0%,#07090d 100%) padding-box,
             linear-gradient(150deg,#f2dba6 0%,var(--gold) 30%,#6e5423 62%,#dbb968 100%) border-box;
  box-shadow:0 44px 70px -34px rgba(7,23,47,.6), 0 16px 30px -18px rgba(7,23,47,.45)}
.telefoon-scherm{position:relative; overflow:hidden; border-radius:12% / 5.6%;
  background:var(--app-diep); container-type:inline-size}
.telefoon-scherm img{display:block; width:100%; height:auto; pointer-events:none}
/* het eilandje, in verhouding tot de schermbreedte */
.telefoon-scherm::after{content:""; position:absolute; top:2.8cqw; left:50%; width:31cqw; height:9cqw;
  transform:translateX(-50%); border-radius:5cqw; background:#000}
.app-scherm figcaption{margin:18px auto 0; max-width:240px; line-height:1.45; color:var(--text-soft)}
.app-scherm figcaption span{display:block; margin-bottom:5px; font-size:.72rem; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; color:var(--gold-ink)}

/* pijlen en stipjes onder de slider; alleen als main.js hem aanzet */
.slider-knoppen{display:none}
.app-slider.is-slider .slider-knoppen{display:flex; align-items:center; justify-content:center;
  gap:18px; margin-top:20px}
.slider-pijl{width:46px; height:46px; padding:0; display:grid; place-items:center; cursor:pointer;
  border-radius:50%; color:#fff; border:1px solid transparent;
  background:linear-gradient(180deg, var(--app-vlak-op) 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 10px 22px -10px rgba(7,23,47,.5); transition:transform .2s ease, opacity .2s ease}
.slider-pijl svg{width:20px; height:20px}
.slider-pijl:hover{transform:translateY(-2px)}
.slider-pijl:disabled{opacity:.3; cursor:default; transform:none}
.slider-stippen{display:flex; align-items:center; gap:2px}
.slider-stippen button{width:22px; height:28px; padding:0; border:0; background:none; cursor:pointer;
  display:grid; place-items:center}
.slider-stippen button::before{content:""; width:8px; height:8px; border-radius:4px;
  background:rgba(7,23,47,.22); transition:width .3s ease, background .3s ease}
.slider-stippen button.is-actief{width:34px}
.slider-stippen button.is-actief::before{width:26px; background:var(--gold)}
.slider-stippen button:focus-visible{outline:2px solid var(--gold); outline-offset:2px; border-radius:var(--r-klein)}

/* telefoon: tot aan de schermrand, zonder vervaagde randen */
@media (max-width:760px){
  .app-schermen{--breed:min(62vw,250px); gap:14px; margin-inline:-22px;
    padding-inline:calc(50% + 22px - var(--breed) / 2);
    -webkit-mask-image:none; mask-image:none}
  .app-scherm figcaption{font-size:.88rem}
  .app-slider.is-slider .app-scherm{transform:scale(.88)}
}
@media (prefers-reduced-motion:reduce){
  .app-slider.is-slider .app-scherm, .app-slider.is-slider .telefoon, .app-slider.is-slider figcaption,
  .slider-stippen button::before, .slider-pijl{transition:none}
}

/* --- kennis-deck: de kennis op de home als kaartenrij (11-9-2026) ----------
   Jawad: "Maak van die ook een mooie visuele slide deck van links naar rechts
   zodat we ruimte besparen op de home page". Eén kaart per groep van de
   kennispagina met een medaillon-icoon (.app-feat-ic) en de artikelen als
   links. Past alles naast elkaar (breed scherm), dan zijn er geen knoppen;
   anders veegt u, of gebruikt u de pijlen en stipjes (main.js "kennis-deck"). */
.kennis-deck{position:relative; margin:30px 0 0}
.kennis-baan{display:flex; gap:18px; overflow-x:auto; overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory; padding:4px 2px 12px; scrollbar-width:none; outline:0}
.kennis-baan::-webkit-scrollbar{display:none}
.kennis-baan:focus-visible{outline:2px solid var(--gold); outline-offset:4px; border-radius:var(--r-groot)}
.kennis-baan.is-slepen{scroll-snap-type:none; cursor:grabbing}
.kennis-dia{flex:0 0 calc((100% - 54px) / 4); min-width:250px; scroll-snap-align:start;
  display:flex; flex-direction:column; background:#fff; border:1px solid var(--line);
  border-radius:var(--radius-lg); padding:24px 22px 16px; box-shadow:var(--shadow-sm);
  user-select:none; -webkit-user-select:none}
.kennis-dia h3{margin:16px 0 6px; font-size:var(--fs-lead); line-height:1.3}
.kennis-dia-intro{margin:0 0 14px; font-size:var(--fs-sm); line-height:1.5; color:var(--text-soft)}
.kennis-dia-links{list-style:none; margin:auto 0 0; padding:0}
.kennis-dia-links li{border-top:1px solid var(--line)}
.kennis-dia-links a{display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:10px 0; font-size:var(--fs-body); font-weight:600; line-height:1.35; color:var(--ink); text-decoration:none}
.kennis-dia-links a svg{flex:none; width:16px; height:16px; color:var(--gold-ink); transition:transform .2s ease}
.kennis-dia-links a:hover span{text-decoration:underline; text-decoration-color:var(--gold); text-underline-offset:3px}
.kennis-dia-links a:hover svg{transform:translateX(3px)}
.kennis-dia-data{margin:0 0 14px}
/* termijnen: label boven de datum, zodat vier kaarten ook op 1136 px naast
   elkaar passen */
.kennis-dia-data div{padding:9px 0; border-top:1px dashed var(--line)}
.kennis-dia-data dt{font-size:var(--fs-sm); font-weight:600; color:var(--ink)}
.kennis-dia-data dt small{display:block; margin-top:1px; font-size:var(--fs-xs); font-weight:400; color:var(--text-soft)}
.kennis-dia-data dd{margin:2px 0 0; font-size:var(--fs-sm); font-weight:700; color:var(--gold-ink)}
.kennis-deck.is-deck:not(.past) .slider-knoppen{display:flex; align-items:center; justify-content:center;
  gap:18px; margin-top:14px}
@media (max-width:760px){
  .kennis-baan{gap:14px; margin-inline:-22px; padding-inline:22px; scroll-padding-inline:22px}
  .kennis-dia{flex-basis:82vw; min-width:0}
  /* op de telefoon staat er één kaart in beeld: links direct onder de intro */
  .kennis-dia-links{margin-top:0}
}

/* ==========================================================================
   DIENSTEN-DECK (15-9-2026) - Jawad: "schrap deze style, iets verfrissend
   nieuws, visueel, bewegend, mooi, slides-achtig". diensten.html is één donker
   toneel: de kop (.page-hero.dd-kop) en daaronder één dia per dienst
   (.dd-sectie). main.js ("diensten-deck") zet .is-deck, .is-actief en de
   voortgang --p per tabje. Zonder script: een veegbare rij, alles zichtbaar.
   Goud blijft accent (ringen, lijnen, iconen), nooit een vlak.
   ========================================================================== */
@property --dd-x{syntax:"<percentage>"; inherits:true; initial-value:72%}
@property --dd-y{syntax:"<percentage>"; inherits:true; initial-value:30%}

.dd-kop{padding-bottom:34px}
.dd-kop .dd-intro{max-width:58ch}
.dd-beloftes{list-style:none; margin:30px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:10px 12px}
.dd-beloftes li{display:flex; align-items:flex-start; gap:10px; flex:1 1 250px; max-width:360px;
  padding:13px 16px; border:1px solid var(--line-dark); border-radius:var(--radius);
  background:rgba(255,255,255,.04); font-size:var(--fs-sm); line-height:1.5; color:rgba(255,255,255,.86)}
.dd-beloftes svg{flex:none; width:15px; height:15px; margin-top:3px; color:var(--gold)}

.dd-sectie{position:relative; overflow:hidden; background:var(--ink) var(--korrel); color:#fff;
  padding:26px 0 92px; --dd-x:72%; --dd-y:30%;
  transition:--dd-x 1.6s var(--zacht), --dd-y 1.6s var(--zacht)}
/* bovenrand vervaagt, zodat kop en dia's als één vlak lezen (geen naad) */
.dd-gloed{position:absolute; inset:0; pointer-events:none;
  -webkit-mask-image:linear-gradient(180deg, transparent, #000 220px); mask-image:linear-gradient(180deg, transparent, #000 220px);
  background:
    radial-gradient(560px 440px at var(--dd-x) var(--dd-y), rgba(193,154,74,.2), transparent 64%),
    radial-gradient(720px 560px at calc(100% - var(--dd-x)) 100%, rgba(23,51,92,.95), transparent 70%)}
.dd-sectie .container{position:relative; z-index:1}
.dd{position:relative}

/* de baan met dia's */
.dd-baan{position:relative; display:flex; gap:24px; overflow-x:auto; overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory; scrollbar-width:none; outline:0; border-radius:30px}
.dd-baan::-webkit-scrollbar{display:none}
.dd-baan:focus-visible{outline:2px solid var(--gold); outline-offset:6px}
.dd-baan.is-slepen{scroll-snap-type:none; cursor:grabbing}
.dd-baan.is-slepen .dd-dia{user-select:none; -webkit-user-select:none}
.dd-dia{flex:0 0 100%; scroll-snap-align:center; scroll-snap-stop:always; box-sizing:border-box;
  display:grid; grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr); gap:56px; align-items:center;
  min-height:540px; padding:56px 60px; border-radius:30px;
  background:linear-gradient(140deg, rgba(255,255,255,.085), rgba(255,255,255,.015) 55%, rgba(193,154,74,.05));
  border:1px solid rgba(255,255,255,.1); box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}

.dd-teller{margin:0 0 20px; font-family:var(--serif); font-size:var(--fs-sm); letter-spacing:.06em; color:rgba(255,255,255,.45)}
.dd-teller span{display:inline-block; margin-right:6px; font-size:3.4rem; line-height:1; vertical-align:-.3em;
  color:transparent; -webkit-text-stroke:1px var(--gold); text-stroke:1px var(--gold)}
.dd-dia .eyebrow{color:var(--gold); margin-bottom:12px}
.dd-dia .eyebrow::before{background:var(--gold); opacity:.85}
.dd-dia h2{color:#fff; font-size:clamp(2rem,3.7vw,3.1rem); margin:0 0 16px; max-width:18ch}
.dd-lead{margin:0 0 22px; max-width:50ch; font-size:var(--fs-lead); line-height:1.6; color:rgba(255,255,255,.8)}
.dd-punten{list-style:none; margin:0 0 30px; padding:0; display:grid; gap:10px}
.dd-punten li{display:flex; align-items:center; gap:11px; font-weight:600; color:#fff}
.dd-punten svg{flex:none; width:16px; height:16px; color:var(--gold)}
.dd-dia .btn svg{width:16px; height:16px}

/* het beeld: een bol met draaiende gouden ringen, en de voorbeelden */
.dd-beeld{display:flex; flex-direction:column; align-items:center; gap:34px; min-width:0}
.dd-bol{position:relative; width:min(220px,46vw); aspect-ratio:1; border-radius:50%; display:grid; place-items:center;
  background:radial-gradient(circle at 34% 28%, #1d3e6c, #0b1f3d 58%, #07172f);
  box-shadow:0 34px 80px -24px rgba(0,0,0,.65), inset 0 0 0 1px rgba(193,154,74,.35)}
.dd-ring{position:absolute; inset:-16px; border-radius:50%;
  background:conic-gradient(from 0deg, transparent 0 52%, rgba(193,154,74,.95) 74%, transparent 88%);
  -webkit-mask:radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1.5px));
  mask:radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1.5px))}
.dd-ring--2{inset:-38px; opacity:.4}
.dd-icoon{display:grid; place-items:center}
.dd-icoon svg{width:86px; height:86px; color:var(--gold)}
.dd-voorbeelden{display:grid; gap:10px; width:100%; max-width:390px}
.dd-voorbeeld-kop{margin:0 0 2px; font-size:var(--fs-xs); font-weight:700; letter-spacing:.17em; text-transform:uppercase;
  color:rgba(255,255,255,.5)}
.dd-chip{margin:0; padding:11px 16px; border-radius:var(--r-vak); font-size:var(--fs-sm); line-height:1.45; color:rgba(255,255,255,.9);
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12)}
.dd-chip:nth-of-type(2){margin-left:26px}
.dd-chip:nth-of-type(3){margin-left:10px; margin-right:16px}

/* de balk: groepen met tabjes, pijlen en pauze. Alleen met script. */
.dd-balk{display:none}
.dd.is-deck .dd-balk{display:flex; align-items:flex-end; gap:12px; margin-top:22px}
.dd-tabs{flex:1; min-width:0; display:flex}
.dd-groep{flex:1 1 auto}
.dd-groep-kop{margin:0 0 6px 10px; font-size:var(--fs-2xs); font-weight:700; letter-spacing:.17em; text-transform:uppercase;
  color:rgba(255,255,255,.42); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.dd-groep-tabs{gap:2px}
.dd-tab{position:relative; border:0; border-radius:10px; background:transparent; text-align:left; font:600 var(--fs-xs)/1.3 var(--sans); color:rgba(255,255,255,.55); cursor:pointer; transition:color .3s ease, background-color .3s ease}
.dd-tab:hover{color:#fff; background:rgba(255,255,255,.05)}
.dd-tab:focus-visible{outline:2px solid var(--gold); outline-offset:2px}
.dd-tab.is-actief{color:#fff}
.dd-voortgang{position:absolute; left:10px; right:10px; bottom:7px; height:2px; border-radius:2px; overflow:hidden;
  background:rgba(255,255,255,.14)}
.dd-voortgang::after{content:""; position:absolute; inset:0; background:var(--gold); transform-origin:left center;
  transform:scaleX(var(--p,0))}
.dd-pijl, .dd-pauze{flex:none; display:grid; place-items:center; width:46px; height:46px; border-radius:50%; cursor:pointer;
  border:1px solid var(--line-dark); background:transparent; color:#fff; transition:border-color .25s ease, color .25s ease}
.dd-pijl:hover, .dd-pauze:hover{border-color:var(--gold); color:var(--gold)}
.dd-pijl:focus-visible, .dd-pauze:focus-visible{outline:2px solid var(--gold); outline-offset:2px}
.dd-pijl svg{width:18px; height:18px}
.dd-pijl[data-dd-stap="-1"] svg{transform:rotate(180deg)}
.dd-pauze-ic{box-sizing:border-box; width:12px; height:14px; border-left:4px solid currentColor; border-right:4px solid currentColor}
.dd:not(.speelt) .dd-pauze-ic{width:0; height:0; margin-left:4px; border-right:0;
  border-left:12px solid currentColor; border-top:7px solid transparent; border-bottom:7px solid transparent}

/* beweging: de actieve dia bouwt zich op, de rest wacht */
@media (prefers-reduced-motion:no-preference){
  .dd.is-deck .dd-tekst > *, .dd.is-deck .dd-voorbeelden > *{opacity:0; transform:translateY(22px); filter:blur(6px);
    transition:opacity .7s var(--zacht), transform 1s var(--zacht), filter .8s var(--zacht)}
  .dd.is-deck .dd-bol{opacity:0; transform:scale(.82) rotate(-12deg);
    transition:opacity .8s var(--zacht) .1s, transform 1.3s var(--zacht) .1s}
  .dd.is-deck .is-actief .dd-tekst > *, .dd.is-deck .is-actief .dd-voorbeelden > *{opacity:1; transform:none; filter:none}
  .dd.is-deck .is-actief .dd-bol{opacity:1; transform:none}
  .dd.is-deck .is-actief .dd-tekst > :nth-child(2){transition-delay:.06s}
  .dd.is-deck .is-actief .dd-tekst > :nth-child(3){transition-delay:.12s}
  .dd.is-deck .is-actief .dd-tekst > :nth-child(4){transition-delay:.18s}
  .dd.is-deck .is-actief .dd-tekst > :nth-child(5){transition-delay:.24s}
  .dd.is-deck .is-actief .dd-tekst > :nth-child(6){transition-delay:.3s}
  .dd.is-deck .is-actief .dd-voorbeelden > *{transition-delay:.35s}
  .dd.is-deck .is-actief .dd-chip{transition-delay:calc(.45s + var(--j) * .13s)}
  .dd.is-deck .dd-voorbeelden > *{transform:translateX(34px)}
  .dd.is-deck .is-actief .dd-voorbeelden > *{transform:none}
  .dd-ring{animation:dd-draai 9s linear infinite}
  .dd-ring--2{animation-duration:17s; animation-direction:reverse}
  .dd.is-deck .is-actief .dd-chip{animation:dd-zweef 6s ease-in-out infinite; animation-delay:calc(var(--j) * -2s)}
  .dd.is-deck .is-actief .dd-icoon{animation:dd-adem 5s ease-in-out infinite}
  .dd-baan.is-flits{animation:dd-flits .6s var(--zacht)}
}
@keyframes dd-draai{to{transform:rotate(1turn)}}
@keyframes dd-zweef{0%,100%{translate:0 0} 50%{translate:0 -6px}}
@keyframes dd-adem{0%,100%{scale:1} 50%{scale:1.06}}
@keyframes dd-flits{from{opacity:.25} to{opacity:1}}

/* werkwijze als tijdlijn met een gouden lijn die zich uittekent */
.dd-lijn{position:relative; list-style:none; margin:10px 0 0; padding:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:28px}
.dd-lijn::before{content:""; position:absolute; top:24px; left:12.5%; right:12.5%; height:2px;
  background:linear-gradient(90deg, var(--gold), rgba(193,154,74,.2)); transform-origin:left center}
.dd-lijn li{position:relative; text-align:center; padding:0 6px}
.dd-lijn-nr{position:relative; z-index:1; display:grid; place-items:center; width:48px; height:48px; margin:0 auto 18px;
  border-radius:50%; background:#fff; border:1px solid var(--gold); box-shadow:0 0 0 8px #fff;
  font-family:var(--serif); font-size:1.25rem; font-weight:600; color:var(--gold-ink)}
.dd-lijn h3{margin:0 0 8px; font-size:var(--fs-h3)}
.dd-lijn p{margin:0; font-size:var(--fs-sm); line-height:1.6; color:var(--text-soft)}
@media (prefers-reduced-motion:no-preference){
  .dd-lijn.reveal::before{transform:scaleX(0); transition:transform 1.8s var(--zacht) .25s}
  .dd-lijn.reveal.in::before{transform:none}
  .dd-lijn.reveal li{opacity:0; transform:translateY(18px); transition:opacity .8s var(--zacht), transform 1s var(--zacht);
    transition-delay:calc(.35s + var(--k) * .2s)}
  .dd-lijn.reveal.in li{opacity:1; transform:none}
  .dd-lijn.reveal .dd-lijn-nr{transform:scale(.6); transition:transform .9s cubic-bezier(.34,1.56,.64,1) calc(.4s + var(--k) * .2s)}
  .dd-lijn.reveal.in .dd-lijn-nr{transform:none}
}

@media (max-width:980px){
  .dd-dia{grid-template-columns:1fr; gap:34px; min-height:0; padding:40px 36px}
  .dd-beeld{flex-direction:row; align-items:center; gap:30px}
  .dd-bol{width:150px; flex:none}
  .dd-ring{inset:-10px} .dd-ring--2{inset:-24px}
  .dd-icoon svg{width:60px; height:60px}
}
/* smaller dan 1080 px passen de negen tabjes niet naast elkaar: dan één veegbare rij */
@media (max-width:1080px){
  .dd-groep-kop{display:none}
  .dd-tabs{overflow-x:auto; scrollbar-width:none; gap:4px}
  .dd-tabs::-webkit-scrollbar{display:none}
  .dd-groep, .dd-groep-tabs{display:contents}
  .dd-tab{flex:none; white-space:nowrap; padding:10px 12px 16px}
  .dd-tabs{-webkit-mask-image:linear-gradient(90deg, #000 82%, transparent); mask-image:linear-gradient(90deg, #000 82%, transparent)}
}
/* de zwevende bel- en WhatsApp-knop staan rechtsonder: houd de pauzeknop ervan vrij */
@media (max-width:1400px){
  .dd.is-deck .dd-balk{padding-right:68px}
}
@media (max-width:760px){
  .dd-kop{padding-bottom:22px}
  .dd-beloftes li{max-width:none}
  .dd-sectie{padding:14px 0 64px}
  .dd-baan{gap:14px; border-radius:24px}
  .dd-dia{padding:30px 22px 28px; border-radius:24px; gap:28px}
  .dd-teller span{font-size:2.6rem}
  .dd-dia h2{font-size:1.85rem}
  .dd-lead{font-size:var(--fs-body)}
  .dd-dia .btn{width:100%; justify-content:center}
  .dd-beeld{flex-direction:column; align-items:stretch}
  .dd-bol{display:none}
  .dd-chip:nth-of-type(n){margin-left:0; margin-right:0}
  .dd.is-deck .dd-balk{margin-top:16px; align-items:center}
  .dd-pijl{display:none}
  .dd-tabs{margin-left:-22px; padding-left:22px}
  .dd-pauze{width:40px; height:40px}
  .dd-lijn{grid-template-columns:1fr; gap:26px}
  .dd-lijn::before{top:24px; bottom:24px; left:23px; right:auto; width:2px; height:auto;
    background:linear-gradient(180deg, var(--gold), rgba(193,154,74,.2)); transform-origin:center top}
  .dd-lijn li{text-align:left; padding:0 0 0 68px}
  .dd-lijn-nr{position:absolute; left:0; top:0; margin:0}
}
@media (max-width:760px) and (prefers-reduced-motion:no-preference){
  .dd-lijn.reveal::before{transform:scaleY(0)}
  .dd-lijn.reveal.in::before{transform:none}
}

/* ==========================================================================
   LUXE-RONDE 11-9-2026 (Jawad: "ultra luxe en vloeiend met animaties", "alles")
   Eén zachte curve voor alle nieuwe beweging (--zacht). Alles hieronder valt
   weg of staat stil bij "minder beweging" op het toestel. In de app speelt
   het niet: daar is geen .hero, .section-head of .cta.
   ========================================================================== */
:root{
  --zacht:cubic-bezier(.16,1,.3,1);
  /* fijne korrel voor de donkere vlakken: witte ruis, heel laag gedekt */
  --korrel:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23k)' opacity='.07'/%3E%3C/svg%3E");
}

/* 1. vloeiende paginawissels (View Transitions, alleen CSS). Een browser die
   het niet kent wisselt zoals altijd. De kop heeft een eigen naam: die blijft
   staan terwijl de pagina eronder overvloeit. */
@media (prefers-reduced-motion:no-preference){
  @view-transition{navigation:auto}
}
.site-header{view-transition-name:kop}
::view-transition-old(root){animation:vt-uit .26s cubic-bezier(.4,0,1,1) both}
::view-transition-new(root){animation:vt-in .55s var(--zacht) both}
::view-transition-group(kop){animation-duration:.35s}
@keyframes vt-uit{to{opacity:0}}
@keyframes vt-in{from{opacity:0; translate:0 12px}}

/* 2. koppen komen regel voor regel binnen (main.js zet .kop-lijnen, .w, --r).
   Het masker krijgt boven en onder wat lucht (padding met een even grote
   negatieve marge), anders snijdt het de accenten van "Eén" en de staarten
   van g/j/p af; de regelhoogte blijft zo precies gelijk. */
.kop-lijnen .w{display:inline-block; overflow:hidden; vertical-align:top;
  padding:.1em .05em .16em; margin:-.1em -.05em -.16em}
.kop-lijnen .w > span{display:inline-block; transform:translateY(112%);
  transition:transform 1.05s var(--zacht); transition-delay:calc(var(--r,0) * 110ms + 60ms)}
.kop-lijnen.in .w > span{transform:none}
.hero-text > h1.kop-lijnen{animation:none}

/* 3a. het gouden streepje voor een kopje tekent zichzelf */
.eyebrow::before{transform-origin:left center}
@media (prefers-reduced-motion:no-preference){
  .reveal .eyebrow::before{transform:scaleX(0)}
  .reveal.in .eyebrow::before{transform:none; transition:transform 1.2s var(--zacht) .25s}
}

/* 3b. een trage glans loopt rond de rand van Compleet */
@property --glans{syntax:'<angle>'; inherits:false; initial-value:0deg}
.price-card--featured::after{
  content:""; position:absolute; inset:-1px; z-index:1; pointer-events:none;
  border-radius:calc(var(--radius-lg) + 1px); padding:1px;
  background:conic-gradient(from var(--glans), transparent 0deg 225deg, rgba(242,219,166,.18) 268deg,
             #f2dba6 318deg, var(--gold) 336deg, transparent 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask:linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation:glans 7s linear infinite;
}
@keyframes glans{to{--glans:360deg}}

/* 3c. glans over de gouden knop, en de pijl in een knop schuift mee */
.btn-primary{position:relative; overflow:hidden; isolation:isolate}
.btn-primary::after{content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(105deg, transparent 32%, rgba(255,247,226,.7) 49%, transparent 66%);
  transform:translateX(-135%)}
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .btn-primary:hover::after{transform:translateX(135%); transition:transform .95s var(--zacht)}
  .btn svg:has(polyline[points="12 5 19 12 12 19"]){transition:transform .35s var(--zacht)}
  .btn:hover svg:has(polyline[points="12 5 19 12 12 19"]){transform:translateX(4px)}
}

/* 4. diepte bij het scrollen: de telefoons en de kaart in de hero lopen iets
   achter bij de pagina. CSS-scrollanimaties (Chrome/Edge, Safari 26); een
   browser zonder staat gewoon stil. De kaart gebruikt translate, zodat hij
   zijn eigen inkomen (rise, op transform) houdt. */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion:no-preference){
    .app-slider{animation:diepte linear both; animation-timeline:view(); animation-range:cover 0% cover 100%}
  }
  @media (min-width:961px) and (prefers-reduced-motion:no-preference){
    .hero-panel{animation:rise .85s cubic-bezier(.22,.68,.28,1) .35s both, kaart-diepte linear both;
      animation-timeline:auto, scroll(root); animation-range:normal, 0px 900px}
  }
}
@keyframes diepte{from{translate:0 -36px} to{translate:0 36px}}
@keyframes kaart-diepte{from{translate:0 0} to{translate:0 120px}}

/* 5. fijne korrel op de donkere vlakken; oogt als drukwerk. Stilstaand, dus
   kost niets bij het scrollen. De witte Compleet-kaart in de hero houdt zijn
   eigen achtergrond (.hero .price-card--featured weegt zwaarder). */
.hero, .page-hero, .site-footer, .strip, .cta, .price-card--featured{background-image:var(--korrel)}

/* 6. de paginakop van subpagina's komt rustig binnen, net als de home */
.page-hero .container > *{animation:rise .8s var(--zacht) both}
.page-hero .container > *:nth-child(2){animation-delay:.08s}
.page-hero .container > *:nth-child(3){animation-delay:.16s}
.page-hero .container > *:nth-child(4){animation-delay:.24s}
.page-hero .container > *:nth-child(n+5){animation-delay:.3s}

/* 7. telefoon: rust in de hero. Het middenstuk van de intro valt weg (bv en
   OSS/ICP/douane staan nog in de vinkjes eronder), en de zwevende knoppen
   komen pas als de kop grotendeels uit beeld is (main.js: zweef-wacht). */
@media (max-width:640px){ .lead-meer{display:none} }
@media (max-width:760px){
  html.zweef-wacht .zweef{opacity:0; visibility:hidden; pointer-events:none}
}
@media (max-width:760px) and (prefers-reduced-motion:no-preference){
  .zweef{transition:bottom .25s ease, opacity .4s ease, transform .55s var(--zacht), visibility 0s}
  html.zweef-wacht .zweef{transform:translateY(18px) scale(.96);
    transition:bottom .25s ease, opacity .25s ease, transform .3s ease, visibility 0s .3s}
}

@media (prefers-reduced-motion:reduce){
  .price-card--featured::after{animation:none}
  .page-hero .container > *{animation:none}
}

/* ==========================================================================
   KIJKER (11-9-2026): pdf en foto's openen als blad over de app, met Terug,
   de naam en een deelknop. Gedrag onderaan portaal.js. Zelfde taal als de
   appkop: marine, gouden haarlijn, medaillonknop, korrel.
   ========================================================================== */
.kijker{position:fixed; inset:0; z-index:1000; display:flex; flex-direction:column; color:#fff;
  font-family:var(--sans);
  background:var(--korrel), radial-gradient(900px 480px at 85% -10%, rgba(193,154,74,.16), transparent 60%),
             linear-gradient(180deg, #081a33 0%, #050f20 100%);
  opacity:0; transform:translateY(18px);
  transition:opacity .3s ease, transform .5s var(--zacht, cubic-bezier(.16,1,.3,1))}
.kijker[hidden]{display:none}
.kijker.is-open{opacity:1; transform:none}
html.kijker-open, html.kijker-open body{overflow:hidden}

.kijker-balk{flex:none; display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:10px;
  /* 11-9-2026: iOS 26 legt in de beginscherm-app een glasachtige vervaging over
     de bovenkant; Terug en de naam vielen daarin en leken wazig (Jawad, schermafdruk
     16:26). Extra lucht boven de knoppen, alleen op toestellen met een statusbalk
     over de pagina (min() met de safe-area: op een computer is die 0 en blijft
     alles zoals het was). Massief, zodat er in die strook niets doorschemert. */
  padding:calc(env(safe-area-inset-top,0px) + 8px + min(env(safe-area-inset-top,0px), 24px)) 12px 10px;
  background:#07172f; border-bottom:1px solid rgba(193,154,74,.3);
  box-shadow:0 12px 30px -20px rgba(0,0,0,.7)}
.kijker-terug{display:inline-flex; align-items:center; gap:3px; height:44px; padding:0 15px 0 8px;
  border-radius:22px; border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.06);
  color:#fff; font:inherit; font-size:.98rem; font-weight:600; cursor:pointer;
  -webkit-tap-highlight-color:transparent; transition:background .2s ease, transform .12s ease}
.kijker-terug svg{width:22px; height:22px; color:var(--gold-soft)}
.kijker-terug:hover{background:rgba(255,255,255,.1)}
.kijker-terug:active{transform:scale(.97)}
.kijker-titel{min-width:0; text-align:center; line-height:1.25}
.kijker-titel strong{display:block; font-family:var(--serif); font-weight:600; font-size:1.02rem;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.kijker-titel small{display:block; min-height:1em; margin-top:3px; font-size:.7rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--gold)}
.kijker-deel{width:44px; height:44px; padding:0; border-radius:50%; display:grid; place-items:center; cursor:pointer;
  color:#fff; border:1px solid transparent; -webkit-tap-highlight-color:transparent;
  background:linear-gradient(180deg, var(--app-vlak-op) 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 10px 22px -12px rgba(0,0,0,.7); transition:transform .12s ease}
.kijker-deel svg{width:21px; height:21px}
.kijker-deel:active{transform:scale(.95)}

.kijker-vak{flex:1; min-height:0; overflow:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain;
  outline:0; display:flex; flex-direction:column; align-items:flex-start;
  padding:18px 16px calc(64px + env(safe-area-inset-bottom,0px))}
.kijker-paginas{width:100%; max-width:880px; display:grid; gap:16px; margin-inline:auto; flex:none}
.kijker-pagina{position:relative; width:100%; border-radius:var(--r-klein); overflow:hidden; background:#fff;
  box-shadow:0 26px 54px -26px rgba(0,0,0,.8), 0 2px 8px rgba(0,0,0,.25)}
.kijker-pagina:not(.is-getekend){background:linear-gradient(90deg, #e9edf2 0%, #f7f8fa 50%, #e9edf2 100%);
  background-size:200% 100%; animation:kijker-glim 1.4s ease-in-out infinite}
.kijker-pagina canvas{display:block; width:100%; height:auto; animation:kijker-in .45s ease both}
.kijker-foto{display:block; max-width:100%; max-height:calc(100dvh - 150px); width:auto; height:auto; margin:auto;
  border-radius:var(--r-kaart); box-shadow:0 30px 60px -28px rgba(0,0,0,.85);
  opacity:0; transform:scale(.98); transition:opacity .4s ease, transform .6s var(--zacht, cubic-bezier(.16,1,.3,1))}
.kijker-foto.is-in{opacity:1; transform:none}
.kijker-laden{margin:auto; display:flex; flex-direction:column; align-items:center; gap:14px;
  color:rgba(255,255,255,.72); font-size:.95rem}
.kijker-draai{width:34px; height:34px; border-radius:50%; border:2px solid rgba(255,255,255,.14);
  border-top-color:var(--gold); animation:kijker-draai .9s linear infinite}
.kijker-fout{margin:auto; max-width:32ch; text-align:center; color:rgba(255,255,255,.82)}
.kijker-fout p{margin:0}
.kijker-knop{margin-top:16px; height:44px; padding:0 20px; border-radius:var(--r-kaart); border:0; cursor:pointer;
  background:var(--gold); color:#231703; font:inherit; font-weight:600}
.kijker-teller{position:absolute; left:50%; bottom:calc(16px + env(safe-area-inset-bottom,0px));
  transform:translateX(-50%); padding:7px 14px; border-radius:99px; pointer-events:none;
  background:rgba(7,23,47,.88); border:1px solid rgba(255,255,255,.12); color:#fff;
  font-size:.82rem; font-weight:600; box-shadow:0 10px 24px -12px rgba(0,0,0,.6)}
.kijker-teller[hidden]{display:none}
@keyframes kijker-draai{to{transform:rotate(360deg)}}
@keyframes kijker-in{from{opacity:0}}
@keyframes kijker-glim{from{background-position:100% 0} to{background-position:-100% 0}}
@media (min-width:900px){
  .kijker-balk{padding-left:24px; padding-right:24px}
  .kijker-vak{padding:28px 24px calc(64px + env(safe-area-inset-bottom,0px))}
}
@media (prefers-reduced-motion:reduce){
  .kijker, .kijker-foto{transition:none; transform:none}
  .kijker-draai, .kijker-pagina, .kijker-pagina canvas{animation:none}
}

/* ==========================================================================
   APPKOP (11-9-2026, Jawad: "bovenkant klein beetje naar beneden en mooiere
   logo goud met belastingadvies, dit ziet er droog uit, meer gouden visueel").
   1. Lager, net als de kijker: iOS 26 legt in de beginscherm-app een
      glasachtige vervaging over de bovenste strook. Extra lucht alleen waar
      een statusbalk over de pagina ligt (min() met de safe-area; op een
      computer 0). Massief, zodat er niets doorschemert.
   2. Het woordmerk in goud: VALOREM met een gouden verloop dat traag glanst,
      de haarlijn en BELASTINGADVIES eronder (in effen goud, anders is die
      kleine regel onleesbaar). Het medaillon iets groter, met een zachte gloed.
      text-fill-color i.p.v. color, zodat de over-dark-regels van de site
      (die op color zitten) er niet overheen komen.
   ========================================================================== */
html.is-app .site-header{
  /* 48px was te laag (Jawad 16:40, schermafdruk: scherp, maar te ver naar beneden) */
  padding-top:calc(env(safe-area-inset-top, 0px) + min(env(safe-area-inset-top, 0px), 16px));
  background:#07172f; border-bottom-color:rgba(193,154,74,.26)}
html.is-app .nav{min-height:66px}
html.is-app .brand{gap:12px}
html.is-app .brand-mark{width:40px; height:40px;
  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)}
html.is-app .brand-mark img{width:26px; height:26px}
html.is-app .brand-name{font-size:1.1rem; font-weight:600; letter-spacing:.24em; line-height:1.1;
  background:linear-gradient(100deg, #f7e4b5 0%, #dbb968 22%, #b8862b 45%, #f2dba6 62%, #c19a4a 80%, #f7e4b5 100%);
  background-size:220% 100%; background-position:0% 50%;
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:#dbb968}
html.is-app .brand-sub{display:block; font-size:.58rem; font-weight:700; letter-spacing:.185em;
  margin-top:5px; padding-top:5px; border-top:1px solid rgba(193,154,74,.5);
  -webkit-text-fill-color:#cfae66; color:#cfae66}
@media (prefers-reduced-motion:no-preference){
  html.is-app .brand-name{animation:goudglans 9s ease-in-out infinite alternate}
}
@keyframes goudglans{to{background-position:100% 50%}}

/* medaillon in de appkop: de gouden rand pulseert constant (Jawad 11-9-2026).
   Een eigen laag (::after) die alleen opacity en transform animeert, zodat de
   telefoon er niet voor hoeft te hertekenen. Bij "minder beweging": stil. */
html.is-app .brand-mark{position:relative}
html.is-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)}
@media (prefers-reduced-motion:no-preference){
  html.is-app .brand-mark::after{animation:randpuls 2.4s ease-in-out infinite}
}
@keyframes randpuls{50%{opacity:1; transform:scale(1.07)}}

/* kijker zoomt zelf (11-9-2026): de pagina mag niet meer knijpzoomen, anders
   schuift de vaste balk met Terug uit beeld. align-items:flex-start + auto-marges
   hierboven: gecentreerde flexinhoud die breder wordt dan het vak loopt aan de
   linkerkant onbereikbaar weg; met auto-marges centreert hij alleen zolang hij past. */
.kijker{touch-action:pan-x pan-y}
.kijker-vak{touch-action:pan-x pan-y}
.kijker.is-gezoomd .kijker-foto{border-radius:0}

/* ==========================================================================
   DOSSIERLIJST (11-9-2026, Jawad: "in een oogopslag teveel witte tekst, niet
   te onderscheiden wat wat is"). Per bestand: medaillon met een icoon voor het
   soort, de partij als titel, daaronder het soort als gouden label en de
   details in grijs. Gebouwd door rij() in portaal.js.
   ========================================================================== */
.dossier-lijst li.dos-rij{display:block; padding:0}
.dossier-lijst .dos-rij a{display:grid; grid-template-columns:38px minmax(0,1fr) 16px; align-items:center; gap:12px;
  padding:11px 2px; color:inherit; text-decoration:none; word-break:normal; -webkit-tap-highlight-color:transparent}
.dossier-lijst .dos-rij a:hover, .dossier-lijst .dos-rij a:active{text-decoration:none}
.dos-ic{width:38px; height:38px; border-radius:50%; display:grid; place-items:center; color:var(--gold);
  border:1px solid transparent;
  background:linear-gradient(180deg, var(--app-vlak-op) 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 6px 14px -8px rgba(0,0,0,.6)}
.dos-ic svg{width:18px; height:18px}
.dossier-lijst .dos-tekst{display:block; min-width:0; font-size:inherit; color:inherit}
.dossier-lijst .dos-titel{display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  font-size:.98rem; font-weight:600; line-height:1.3; color:var(--ink)}
.dossier-lijst .dos-meta{display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 9px; margin-top:4px;
  font-size:.78rem; line-height:1.35; color:var(--text-soft)}
.dossier-lijst .dos-soort{font-size:.64rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-ink)}
.dossier-lijst .dos-info{font-size:.78rem; color:var(--text-soft); word-break:break-word}
/* Nagekomen stuk (12-9-2026): hoort bij een eerder kwartaal, gaat mee in de
   aangifte van het kwartaal waar het nu in staat. Een eigen merkje, niet goud:
   goud is hier de soort-aanduiding en een tweede goud ernaast leest als ruis.
   Op licht --gold-ink-donkerte in bruinrood (4,8:1 op wit), in de app dezelfde
   kleur opgelicht tot boven 4,5:1 op de donkere kaart. */
.dossier-lijst .dos-na.is-telaat{background:#8d2b2b; color:#fff; border-color:#8d2b2b}
.dossier-lijst .dos-na{flex:0 0 auto; font-size:.64rem; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:#8d2b2b; background:#fdf3f3; border:1px solid rgba(141,43,43,.22);
  border-radius:var(--r-pil); padding:2px 8px; line-height:1.5}
html.is-app .dossier-lijst .dos-na{color:#f3b0b0; background:rgba(141,43,43,.28);
  border-color:rgba(243,176,176,.35)}
.dos-pijl{width:16px; height:16px; color:rgba(7,23,47,.3); transition:transform .2s ease}
.dos-rij a:hover .dos-pijl{transform:translateX(3px)}
.dos-aantal{margin-left:8px; font-weight:600; letter-spacing:0}
html.is-app .dossier-lijst .dos-titel{color:#fff}
html.is-app .dossier-lijst .dos-meta, html.is-app .dossier-lijst .dos-info{color:rgba(227,233,242,.58)}
html.is-app .dossier-lijst .dos-soort{color:var(--gold)}
html.is-app .dos-pijl{color:rgba(255,255,255,.28)}
html.is-app .dossier-lijst .dos-rij a:hover, html.is-app .dossier-lijst .dos-rij a:active{text-decoration:none}
html.is-app .dossier-lijst .dos-rij a:active{background:rgba(255,255,255,.04)}

/* de details mogen krimpen en afbreken: .dossier-lijst span{flex:0 0 auto} liet een lange regel rechts uit beeld lopen */
.dossier-lijst .dos-info{flex:1 1 auto; min-width:0}

/* ==========================================================================
   LUXE-RONDE B (11-9-2026). Audit door 5 agents; Jawad koos groep B.
   B1 staat bovenin: --gold-deep, --shadow-* (marine, twee lagen), --radius 16/24,
   knoppen/velden 12 px, en de losse tinten rgba(184,134,43) / rgba(216,176,98) /
   #7c5f27 / rgba(12,28,44) zijn vervangen door de echte tokens.
   ========================================================================== */

/* B2 mobiel menu: altijd gerenderd, zacht in- en uitschuiven, links na elkaar
   (main.js zet --i), hamburger wordt een kruisje. visibility met vertraging houdt
   de links onbereikbaar voor tab zolang het menu dicht is. */
@media (max-width:1220px){
  .nav-links{display:flex; visibility:hidden; opacity:0; transform:translateY(-10px); pointer-events:none;
    transition:opacity .3s var(--zacht), transform .45s var(--zacht), visibility 0s linear .45s}
  .nav-links.open{visibility:visible; opacity:1; transform:none; pointer-events:auto;
    transition:opacity .35s var(--zacht), transform .45s var(--zacht), visibility 0s}
  .nav-links a{opacity:0; transform:translateY(-6px);
    transition:opacity .3s var(--zacht), transform .45s var(--zacht), color .2s ease, background .2s ease}
  .nav-links.open a{opacity:1; transform:none;
    transition-delay:calc(var(--i, 0) * 35ms + 60ms), calc(var(--i, 0) * 35ms + 60ms), 0s, 0s}
  .nav-toggle span{transition:transform .4s var(--zacht), opacity .2s ease}
  .nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
  .nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
  .nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
}
@media (max-width:1220px) and (prefers-reduced-motion:reduce){
  .nav-links, .nav-links.open, .nav-links a, .nav-links.open a, .nav-toggle span{transition:none}
}

/* B3 de hero in een vaste volgorde: gloed, kop (regel voor regel), label, tekst,
   punten, knoppen, kaart. */
@media (prefers-reduced-motion:no-preference){
  .hero-aurora{animation:aurora-in 1.6s ease-out both}
  .hero-text > .hero-badge{animation-delay:.55s}
  .hero-text > .lead{animation-delay:.68s}
  .hero-text > .hero-points{animation-delay:.8s}
  .hero-text > .hero-btns{animation-delay:.92s}
  .hero-panel{animation-delay:1.05s, 0s}
}
@keyframes aurora-in{from{opacity:0}}

/* B4 formulieren: foutstaat na invullen, gouden rand als het klopt, label kleurt mee */
.field input,.field select,.field textarea{transition:border-color .3s var(--zacht), box-shadow .3s var(--zacht)}
.field label{transition:color .3s var(--zacht)}
.field:focus-within label{color:var(--gold-ink)}
.field input:user-invalid,.field select:user-invalid,.field textarea:user-invalid{
  border-color:#b4543a; box-shadow:0 0 0 3px rgba(180,84,58,.12)}
.field input:user-valid:not(:placeholder-shown),.field textarea:user-valid:not(:placeholder-shown){
  border-color:rgba(193,154,74,.6)}
/* B4 tikvlakken van minstens 44 px; op aanraakschermen een groter tikvlak zonder
   dat de opmaak verandert */
.nav-toggle{height:44px}
.slider-stippen button{min-width:44px; min-height:44px}
@media (pointer:coarse){
  .card-link{position:relative}
  .card-link::before{content:""; position:absolute; inset:-12px -6px}
  .kennis-dia-links a{padding:12px 0}
  .crumbs a{display:inline-block; padding:12px 0; margin:-12px 0}
  .footer-col a{padding:9px 0}
  .footer-mail{display:inline-block; padding:10px 0}
}

/* B5 ritme: meer lucht op brede schermen, iets compacter op de telefoon (het
   klantportaal is ook een .section en blijft zoals het is) */
.section:not(#portal-app){padding:clamp(72px,8.5vw,124px) 0 clamp(64px,7.5vw,108px)}
.section--tight:not(#portal-app){padding:clamp(52px,5vw,72px) 0 clamp(44px,4.5vw,64px)}
/* B5 de kennisrij en de cta "landen" bij het scrollen. De cta draagt .reveal: daar
   moeten beide animaties in één regel, anders wint de ene van de andere. */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion:no-preference){
    .kennis-deck{animation:landen linear both; animation-timeline:view(); animation-range:entry 0% cover 35%}
    .cta.reveal.in{animation:onthul .95s cubic-bezier(.16,1,.3,1) backwards, landen linear both;
      animation-timeline:auto, view(); animation-range:normal, entry 0% cover 35%}
  }
}
@keyframes landen{from{translate:0 28px; scale:.985}}

/* B8 cookiebalk: compacter op de telefoon, rustig inschuiven, geen vervaging
   achter een vlak dat toch 97% dekt (kost alleen rekenwerk) */
.cookiebar{backdrop-filter:none; -webkit-backdrop-filter:none}
@media (max-width:720px){
  .cookiebar-in{padding:12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); gap:10px}
  .cookiebar p{font-size:.8rem; line-height:1.45}
  .cookiebar .btn{padding:9px 14px; font-size:.84rem}
}
@media (prefers-reduced-motion:no-preference){
  .cookiebar:not([hidden]){animation:cookie-in .6s var(--zacht) .6s both}
}
@keyframes cookie-in{from{transform:translateY(105%)}}

/* B9 cookiebalk compact (20-9-2026, Jawad: "5 pas aan"). Op de telefoon nam de
   balk een kwart van het scherm in, op elke pagina, tot iemand koos. Nu: korte
   tekst links, de twee knoppen klein onder elkaar rechts; ongeveer half zo hoog.
   Beide keuzes blijven even groot en even zichtbaar. */
@media (max-width:720px){
  .cookiebar-in{display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center;
    gap:6px 12px; padding:8px 12px calc(8px + env(safe-area-inset-bottom, 0px))}
  .cookiebar p{flex:none; font-size:.72rem; line-height:1.35}
  .cookiebar-btns{width:auto; flex-direction:column; flex-wrap:nowrap; gap:6px}
  .cookiebar-btns .btn{flex:none; padding:7px 12px; font-size:.76rem; min-height:0; white-space:nowrap}
}

/* B10 (20-9-2026, Jawad: "2, 3, 4, 6, 9 verwerk" na "minder AI-achtig, luxer").
   Vier regels die de hele site raken:
   1. Knoppen: één stijl. De hoofdknop is marineblauw zonder schaduw; op een
      donkere ondergrond (hero, contactband, cookiebalk, de donkere pakketkaart)
      is hij wit. Goud is alleen nog voor haarlijnen, nummers en het streepje.
   2. Tweede acties (.btn-ghost, .btn-ghost-light) zijn tekstlinks met een
      haarlijn eronder, geen omlijnde knoppen meer. In de cookiebalk blijven
      beide keuzes een even grote knop (dat moet ook).
   3. Koppen links, niet gecentreerd: asymmetrie leest als ontworpen.
   4. Hero in één kolom, zonder kaart, prijsregel of vinkjes. */
.btn:hover{transform:none}
.btn-primary{background:var(--ink); color:#fff; box-shadow:none}
.btn-primary:hover{background:var(--ink-2)}
.hero .btn-primary, .cta .btn-primary, .cookiebar .btn-primary,
.pakket-kaart.is-compleet .btn-primary{background:#fff; color:var(--ink)}
.hero .btn-primary:hover, .cta .btn-primary:hover, .cookiebar .btn-primary:hover,
.pakket-kaart.is-compleet .btn-primary:hover{background:#f2e6cd; color:var(--ink)}
.btn-ghost, .btn-ghost-light{position:relative; background:transparent; border-color:transparent;
  border-radius:0; padding-left:2px; padding-right:2px}
.btn-ghost.btn-lg, .btn-ghost-light.btn-lg{padding-left:2px; padding-right:2px}
.btn-ghost::after, .btn-ghost-light::after{content:""; position:absolute; left:2px; right:2px; bottom:9px;
  height:1px; background:currentColor; opacity:.45; transition:opacity .2s}
.btn-ghost:hover, .btn-ghost-light:hover{background:transparent; border-color:transparent}
.btn-ghost{color:var(--ink)} .btn-ghost:hover{color:var(--gold-ink)}
.btn-ghost-light{color:#fff} .btn-ghost-light:hover{color:var(--gold-soft)}
.btn-ghost:hover::after, .btn-ghost-light:hover::after{opacity:1}
.cookiebar .btn-ghost{border:1px solid rgba(232,237,245,.35); border-radius:12px; padding-left:20px; padding-right:20px}
.cookiebar .btn-ghost::after{display:none}
.cookiebar .btn-ghost:hover{border-color:rgba(232,237,245,.6); background:rgba(232,237,245,.07); color:#e8edf5}
@media (max-width:720px){
  .cookiebar .btn-ghost{padding-left:12px; padding-right:12px}
  .hero-btns .btn-ghost-light{width:auto; justify-content:flex-start}
}

.section-head--center{margin-inline:0; text-align:left}
.section-head--center .eyebrow{justify-content:flex-start}

.hero--stil{padding:104px 0 100px}
.hero--stil .hero-text{max-width:66ch}
.hero--stil h1{font-size:clamp(2.5rem, 5.4vw, 4.5rem); line-height:1.04; max-width:15ch; letter-spacing:-.015em}
.hero--stil .lead{max-width:52ch; margin-top:26px}
.hero--stil .hero-btns{margin-top:34px; gap:10px 26px; align-items:center}
.hero--stil .hero-badge{margin:34px 0 0; font-weight:600; letter-spacing:.16em; color:rgba(219,185,104,.82)}
@media (max-width:720px){
  .hero--stil{padding:64px 0 66px}
  .hero--stil .hero-btns{margin-top:26px}
  .hero--stil .hero-badge{margin-top:26px}
}

/* Kennis op de home als register (Jawad: "3 verwerk"): vier kolommen met een
   gouden nummer, een gouden lijn erboven en haarlijnen tussen de kolommen en
   tussen de regels. Zelfde taal als het blok over de Belastingdienst. */
.kennis-register{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); border-top:1px solid var(--gold); padding-top:30px}
.kennis-kolom{padding:0 30px 6px; min-width:0}
.kennis-kolom:first-child{padding-left:0}
.kennis-kolom:last-child{padding-right:0}
.kennis-kolom + .kennis-kolom{border-left:1px solid var(--line)}
.kennis-kolom .inv-nr{margin:0 0 16px; padding:0}
.kennis-kolom h3{font-size:var(--fs-h3); margin:0 0 .3em; max-width:16ch; line-height:1.25}
.kennis-kolom-intro{color:var(--text-soft); font-size:var(--fs-sm); line-height:1.55; margin:0 0 18px; max-width:30ch}
.kennis-kolom-links{list-style:none; margin:0; padding:0}
.kennis-kolom-links li{border-top:1px solid var(--line)}
.kennis-kolom-links li:last-child{border-bottom:1px solid var(--line)}
.kennis-kolom-links a{display:flex; justify-content:space-between; align-items:center; gap:12px; padding:11px 0;
  color:var(--ink); text-decoration:none; font-weight:600; font-size:var(--fs-sm); line-height:1.35}
.kennis-kolom-links a svg{width:14px; height:14px; flex:0 0 auto; color:var(--gold-ink); transition:transform .2s}
.kennis-kolom-links a:hover{color:var(--gold-ink)}
.kennis-kolom-links a:hover svg{transform:translateX(3px)}
.kennis-kolom-data{margin:0 0 16px; padding:0; display:grid; gap:10px}
.kennis-kolom-data div{border-top:1px solid var(--line); padding-top:9px}
.kennis-kolom-data dt{font-weight:600; font-size:var(--fs-sm); color:var(--ink)}
.kennis-kolom-data dt small{display:block; font-weight:400; font-size:var(--fs-xs); color:var(--text-soft)}
.kennis-kolom-data dd{margin:2px 0 0; color:var(--gold-ink); font-weight:600; font-size:var(--fs-sm)}
@media (max-width:960px){
  .kennis-register{grid-template-columns:repeat(2,minmax(0,1fr)); row-gap:28px}
  .kennis-kolom{padding:0 24px 0}
  .kennis-kolom:nth-child(odd){padding-left:0; border-left:0}
  .kennis-kolom:nth-child(even){padding-right:0}
  .kennis-kolom:nth-child(n+3){border-top:1px solid var(--line); padding-top:24px}
}
@media (max-width:640px){
  .kennis-register{grid-template-columns:1fr; row-gap:0; padding-top:22px}
  .kennis-kolom{padding:0 0 22px; border-left:0 !important}
  .kennis-kolom + .kennis-kolom{border-top:1px solid var(--line); padding-top:22px}
  .kennis-kolom:nth-child(n+3){padding-top:22px}
}

/* Genummerde stappen (.stappen: openingsscherm en bedanktpagina van de
   aanmelding) in dezelfde registertaal (20-9-2026, Jawad: "ja" op dezelfde
   behandeling voor het scherm na het versturen): gouden nummer in de serif,
   haarlijnen, geen bolletjes. welkom.css zet hierop de kleuren voor het
   donkere openingsscherm. */
.stappen{max-width:none; margin:22px 0 18px; border-top:1px solid var(--gold)}
.stappen li{padding:16px 0 16px 52px; margin:0; border-bottom:1px solid var(--line); line-height:1.55}
.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-ink)}
.stappen li strong{font-family:var(--serif); font-weight:600; font-size:1.12rem; letter-spacing:-.005em;
  color:var(--ink); margin-bottom:3px}
@media (max-width:559px){
  .stappen li{padding-left:44px}
  .stappen li strong{font-size:1.05rem}
}

/* Blok "Problemen met de Belastingdienst" op de home (20-9-2026). Eerst drie
   kaarten met iconen; Jawad: "heel AI-achtig, blokjes onder elkaar, maak het
   luxe en premium". Nu een register zoals op de site van een advocatenkantoor:
   links de kop, rechts drie regels met een gouden nummer in de serif, een
   haarlijn ertussen en een ronde pijl. Geen kaarten, geen schaduwen, geen
   iconen. Op de telefoon staan kop, regels en knop onder elkaar. */
.inv-grid{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  grid-template-areas:"kop lijst" "actie lijst"; grid-template-rows:auto 1fr;
  gap:34px 80px; align-items:start}
.inv-kop{grid-area:kop}
.inv-kop h2{margin-top:.35em; max-width:14ch}
.inv-kop p:not(.eyebrow){color:var(--text-soft); font-size:var(--fs-lead); max-width:34ch}
.inv-actie{grid-area:actie; align-self:start}
.inv-lijst{grid-area:lijst; list-style:none; margin:0; padding:0; border-top:1px solid var(--gold)}
.inv-lijst li{border-bottom:1px solid var(--line)}
.inv-lijst a{display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:0 24px; align-items:start;
  padding:28px 4px 28px 2px; color:inherit; text-decoration:none}
.inv-nr{font-family:var(--serif); font-size:var(--fs-sm); letter-spacing:.16em; color:var(--gold-ink);
  padding-top:.5em; font-variant-numeric:tabular-nums}
.inv-tekst strong{display:block; font-family:var(--serif); font-weight:600; font-size:var(--fs-h3);
  line-height:1.25; color:var(--ink); transition:color .2s}
.inv-tekst > span{display:block; color:var(--text-soft); font-size:var(--fs-body); line-height:1.55;
  margin-top:7px; max-width:52ch}
.inv-tekst em{display:inline-block; font-style:normal; font-weight:600; font-size:var(--fs-sm);
  color:var(--gold-ink); margin-top:13px; border-bottom:1px solid rgba(134,106,46,.35); padding-bottom:1px}
.inv-pijl{width:40px; height:40px; border-radius:50%; border:1px solid var(--line); display:grid;
  place-items:center; color:var(--ink); margin-top:.1em;
  transition:border-color .25s var(--zacht), background .25s var(--zacht), color .25s var(--zacht)}
.inv-pijl svg{width:16px; height:16px; transition:transform .25s var(--zacht)}
.inv-lijst a:hover .inv-tekst strong{color:var(--gold-ink)}
.inv-lijst a:hover .inv-pijl{background:var(--ink); border-color:var(--ink); color:#fff}
.inv-lijst a:hover .inv-pijl svg{transform:translateX(2px)}
.inv-lijst a:focus-visible{outline:2px solid var(--gold); outline-offset:4px; border-radius:6px}
@media (max-width:900px){
  .inv-grid{grid-template-columns:1fr; grid-template-areas:"kop" "lijst" "actie"; grid-template-rows:auto; gap:22px}
  .inv-kop h2{max-width:none}
  .inv-lijst a{padding:20px 0; gap:0 14px}
  .inv-pijl{width:34px; height:34px}
  .inv-tekst em{margin-top:9px}
  .inv-actie{margin-top:6px}
}

/* C1 typeschaal (11-9-2026): de website gebruikt 6 vaste tekstgroottes (--fs-2xs t/m --fs-h3,
   tokens bovenin :root). App, portaal, woordmerk, menu en prijzen houden hun eigen maat. */
h3{font-size:var(--fs-h3)}

/* C2 (11-9-2026): footer-kolommen als uitklapblokken. Desktop: ziet eruit als voorheen,
   het kopje is niet klikbaar. Telefoon (<= 640 px): dicht, een tikregel van 52 px met een
   gouden pijltje dat draait bij openen. main.js zet open/dicht per schermbreedte. */
.footer-col > summary{list-style:none; display:block; cursor:default}
.footer-col > summary::-webkit-details-marker{display:none}
@media (min-width:641px){ .footer-col > summary{pointer-events:none} }
@media (max-width:640px){
  .footer-grid{row-gap:0}
  .footer-grid > div:first-child{margin-bottom:22px}
  .footer-col{border-top:1px solid var(--line-dark)}
  .footer-col:last-child{border-bottom:1px solid var(--line-dark)}
  .footer-col > summary{cursor:pointer; display:flex; align-items:center; justify-content:space-between;
    min-height:52px; -webkit-tap-highlight-color:transparent}
  .footer-col > summary h4{margin:0}
  .footer-col > summary::after{content:""; width:9px; height:9px; margin-right:4px;
    border-right:1.5px solid var(--gold-soft); border-bottom:1.5px solid var(--gold-soft);
    transform:translateY(-3px) rotate(45deg); transition:transform .35s var(--zacht)}
  .footer-col[open] > summary::after{transform:translateY(2px) rotate(-135deg)}
  .footer-col[open]{padding-bottom:12px}
}
@media (prefers-reduced-motion:reduce){ .footer-col > summary::after{transition:none} }

/* iOS-installatie (11-9-2026): Safari 26/27 heeft het menu links in de zwevende adresbalk
   (Jawads screenshots). Een gouden pijl onderin wijst ernaar, alleen op iPhone: in de
   installatiegate, en op het inlogscherm in Safari zolang "Toch liever als app?" openstaat
   (is-browser zet portaal.js; is-app staat daar óók aan). De stappen staan in portaal.py.
   Tweede ronde (Jawad, 11-9 laat: "vloeiende animatie met pijl ... mooier maken"): twee
   chevrons die na elkaar oplichten, een gouden golf, een gloed op de balk, en stap 1 klopt
   mee. Hoogte gemeten op Jawads iPhone (iOS 26 Safari, 11-9-2026 23:26): met 58px +
   safe-area stond de onderkant ± 152 pt boven de rand, de adresbalk loopt tot ± 82 pt,
   dus ± 60 pt te hoog ("Te hoog"). Met alleen safe-area hangt hij ± 94 pt boven de rand
   en wipt hij tot vlak boven de balk; links (28%) staat hij recht boven het menu-icoon. */
.ios-wijzer{display:none}
html.is-ios.js-app-gate:not(.is-app) .ios-wijzer--gate,
html.is-ios.is-browser .app-login:has(.app-login-installeer[open]) .ios-wijzer--login{
  display:block; position:fixed; z-index:60; left:28%;
  /* 24-9-2026 (Jawad: "pijltje verdwijnt half"): Safari legt boven de zwevende
     adresbalk een wazige rand; bij het wippen (9px) zakte de onderkant van de
     pijl daarin weg. 30px hoger houdt hem heel in beeld. */
  bottom:calc(env(safe-area-inset-bottom,0px) + 30px);
  transform:translateX(-50%); pointer-events:none; animation:ios-wijzer-in .8s var(--zacht) 1.4s both}
html.is-ios.is-browser .app-login:has(.app-login-installeer[open]) .ios-wijzer--login{animation-delay:.35s}
.ios-wijzer-pijl{display:block; position:relative; width:50px; height:50px; border-radius:50%;
  background:radial-gradient(circle at 34% 28%, #f6e3ad 0%, #dcb96b 42%, #b38b3c 100%);
  border:1px solid rgba(138,99,24,.6);
  box-shadow:0 14px 30px -8px rgba(7,23,47,.6), inset 0 1px 0 rgba(255,255,255,.6), inset 0 -3px 8px rgba(138,99,24,.3);
  animation:ios-wijzer-dip 2s cubic-bezier(.45,0,.25,1) infinite}
.ios-wijzer-pijl i{position:absolute; left:50%; width:12px; height:12px; margin-left:-6px; border-radius:1px;
  border-right:2.6px solid #07172f; border-bottom:2.6px solid #07172f;
  transform:rotate(45deg); opacity:.3; animation:ios-wijzer-chevron 2s ease-in-out infinite}
.ios-wijzer-pijl i:first-child{top:11px}
.ios-wijzer-pijl i:last-child{top:21px; animation-delay:.28s}
.ios-wijzer-pijl::before{content:""; position:absolute; inset:-1px; border-radius:50%;
  border:2px solid rgba(219,185,104,.85); animation:ios-wijzer-golf 2s cubic-bezier(.4,0,.2,1) .45s infinite}
.ios-wijzer::after{content:""; position:absolute; left:50%; top:calc(100% + 12px); width:52px; height:14px;
  margin-left:-26px; border-radius:50%; background:radial-gradient(closest-side, rgba(219,185,104,.8), rgba(219,185,104,0));
  opacity:0; animation:ios-wijzer-tik 2s ease-in-out infinite}
/* stap 1 ("Tik onderaan links in de adresbalk") klopt in hetzelfde ritme */
html.is-ios.js-app-gate:not(.is-app) .app-os[data-os="ios"] li:first-child .app-step-nr,
html.is-ios.is-browser .app-login-installeer[open] .app-os[data-os="ios"] li:first-child .app-step-nr{
  animation:ios-stap-klop 2s cubic-bezier(.4,0,.2,1) .45s infinite}
@keyframes ios-wijzer-in{from{opacity:0; transform:translate(-50%,22px) scale(.88)} to{opacity:1; transform:translate(-50%,0) scale(1)}}
@keyframes ios-wijzer-dip{0%,100%{transform:translateY(0)} 50%{transform:translateY(9px)}}
@keyframes ios-wijzer-chevron{0%,100%{opacity:.3} 45%{opacity:1}}
@keyframes ios-wijzer-golf{0%{transform:scale(1); opacity:.9} 70%,100%{transform:scale(1.75); opacity:0}}
@keyframes ios-wijzer-tik{0%,30%{opacity:0; transform:scaleX(.55)} 50%{opacity:1; transform:scaleX(1)} 85%,100%{opacity:0; transform:scaleX(1.35)}}
@keyframes ios-stap-klop{0%{box-shadow:0 0 0 0 rgba(219,185,104,.6)} 70%,100%{box-shadow:0 0 0 11px rgba(219,185,104,0)}}
@media (prefers-reduced-motion:reduce){
  .ios-wijzer, .ios-wijzer-pijl, .ios-wijzer-pijl i, .ios-wijzer-pijl::before, .ios-wijzer::after,
  .app-os[data-os="ios"] li:first-child .app-step-nr{animation:none}
  .ios-wijzer-pijl i{opacity:1}
}

/* LOGIN-LUXE (11-9-2026, Jawad: "meer levend, luxe, mooier, smooth"). Alleen het inlogscherm
   in de app: zachte gouden gloed achter de kaart, haarlijn-rand in goud, medaillon boven de
   kop, kaart en regels komen na elkaar binnen, veld met gouden focusgloed, knop met een
   glans die af en toe overloopt, pijltje bij "Toch liever als app?". */
html.is-app #app-login{position:relative; padding-top:18px}
/* min(…, 92vw): 520 px (en met het ademen 108 %) stak op een telefoon buiten beeld en maakte
   de pagina breder dan het scherm; 92vw × 1,08 blijft er net binnen */
html.is-app #app-login::before{content:""; position:absolute; left:50%; top:-40px; width:min(520px, 92vw); height:420px;
  transform:translateX(-50%); pointer-events:none; z-index:0;
  background:radial-gradient(closest-side, rgba(193,154,74,.16), rgba(193,154,74,0));
  animation:login-adem 7s ease-in-out infinite}
html.is-app .app-login-kaart{position:relative; z-index:1; overflow:hidden;
  background:linear-gradient(165deg,#172746 0%,#111d35 60%,#0f1a30 100%);
  border:1px solid rgba(219,185,104,.22);
  box-shadow:0 30px 60px -30px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.06);
  padding:30px 24px 24px; animation:login-kaart-in .8s var(--zacht) both}
html.is-app .app-login-kaart::before{content:""; position:absolute; left:10%; right:10%; top:0; height:1px;
  background:linear-gradient(90deg,transparent,rgba(219,185,104,.8),transparent)}
html.is-app .app-login-kaart h2::before{content:""; display:block; width:52px; height:52px; margin:0 0 16px;
  border-radius:50%; border:1.5px solid rgba(219,185,104,.75);
  background:#0b1a33 url("mark-valorem.png") center/30px no-repeat;
  box-shadow:0 0 0 4px rgba(219,185,104,.08), 0 8px 22px rgba(193,154,74,.25);
  animation:login-medaillon 3.2s ease-in-out infinite}
html.is-app .app-login-kaart h2{font-family:var(--serif); font-weight:600; font-size:1.55rem; letter-spacing:.01em}
html.is-app .app-login-kaart > *{animation:login-regel-in .7s var(--zacht) both}
html.is-app .app-login-kaart > :nth-child(1){animation-delay:.12s}
html.is-app .app-login-kaart > :nth-child(2){animation-delay:.2s}
html.is-app .app-login-kaart > :nth-child(3){animation-delay:.28s}
html.is-app .app-login-kaart > :nth-child(n+4){animation-delay:.36s}
html.is-app .app-login-kaart label{color:#dbb968; letter-spacing:.14em}
html.is-app .app-login-kaart input{background:rgba(7,15,30,.55); border:1px solid rgba(219,185,104,.25);
  border-radius:var(--r-vak); transition:border-color .3s var(--zacht), box-shadow .3s var(--zacht), background .3s}
html.is-app .app-login-kaart input:focus{outline:none; border-color:#dbb968; background:rgba(7,15,30,.8);
  box-shadow:0 0 0 4px rgba(219,185,104,.16), 0 10px 30px -12px rgba(219,185,104,.4)}
html.is-app .app-login-kaart .btn-primary{position:relative; overflow:hidden; border-radius:var(--r-vak); min-height:54px;
  background:linear-gradient(135deg,#e2c178 0%,#c19a4a 55%,#a9812f 100%); color:#0b1a33; font-weight:700;
  box-shadow:0 12px 28px -12px rgba(193,154,74,.7); transition:transform .25s var(--zacht), box-shadow .25s}
html.is-app .app-login-kaart .btn-primary::after{content:""; position:absolute; top:0; bottom:0; left:-60%; width:45%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent); transform:skewX(-18deg);
  animation:login-glans 5s ease-in-out 1.6s infinite}
html.is-app .app-login-kaart .btn-primary:active{transform:scale(.98); box-shadow:0 6px 16px -8px rgba(193,154,74,.7)}
/* is-app staat ook aan na "Ga verder in de browser"; alleen is-browser zegt of
   er nog een browser omheen zit (zie alsApp() in portaal.js). Wie de app al op
   zijn beginscherm heeft, hoeft niet te lezen hoe hij hem daar zet - net als de
   gouden pijl hierboven verdwijnt dit blok dan (Jawad, 12-9-2026: "waarom krijg
   ik in de app deze tekst ook"). */
html.is-app:not(.is-browser) .app-login-installeer{display:none}
html.is-app .app-login-installeer{border-top-color:rgba(219,185,104,.16)}
html.is-app .app-login-installeer summary{list-style:none; display:flex; align-items:center; gap:12px;
  color:#e3e9f2; font-weight:500; line-height:1.4}
html.is-app .app-login-installeer summary::-webkit-details-marker{display:none}
html.is-app .app-login-installeer summary::before{content:""; flex:0 0 auto; width:34px; height:34px; border-radius:10px;
  border:1px solid rgba(219,185,104,.4);
  background:rgba(219,185,104,.08) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23dbb968' stroke-width='1.8' stroke-linecap='round'%3E%3Crect x='3.5' y='3.5' width='17' height='17' rx='4'/%3E%3Cpath d='M12 8.5v7M8.5 12h7'/%3E%3C/svg%3E") center/18px no-repeat}
html.is-app .app-login-installeer summary::after{content:""; flex:0 0 auto; margin-left:auto; width:8px; height:8px;
  border-right:1.5px solid #dbb968; border-bottom:1.5px solid #dbb968; transform:rotate(45deg) translateY(-2px);
  transition:transform .35s var(--zacht)}
html.is-app .app-login-installeer[open] summary::after{transform:rotate(-135deg)}
@keyframes login-kaart-in{from{opacity:0; transform:translateY(22px) scale(.985)} to{opacity:1; transform:none}}
@keyframes login-regel-in{from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none}}
@keyframes login-adem{0%,100%{opacity:.7; transform:translateX(-50%) scale(1)} 50%{opacity:1; transform:translateX(-50%) scale(1.08)}}
@keyframes login-medaillon{0%,100%{box-shadow:0 0 0 4px rgba(219,185,104,.08), 0 8px 22px rgba(193,154,74,.25)}
  50%{box-shadow:0 0 0 9px rgba(219,185,104,0), 0 8px 28px rgba(193,154,74,.4)}}
@keyframes login-glans{0%,70%{left:-60%} 100%{left:130%}}
@media (prefers-reduced-motion:reduce){
  html.is-app #app-login::before, html.is-app .app-login-kaart, html.is-app .app-login-kaart > *,
  html.is-app .app-login-kaart h2::before, html.is-app .app-login-kaart .btn-primary::after{animation:none}
}

/* ==========================================================================
   APPKOP GLAS (11-9-2026, Jawad: "Kan bovenste stukje doorzichtig worden bij
   scrollen?"). Bovenaan blijft de kop massief (zie APPKOP): daar staat niets
   achter om te vervagen, en juist daar gaf blur op 10-9-2026 een grijze waas
   over het logo. Zodra er inhoud onder de kop door schuift (is-gescrold, zet
   main.js) wordt hij donker glas: halfdoorzichtig met een sterke vervaging,
   zodat tekst eronder een zachte vlek wordt en nooit scherp door het logo
   loopt (het bezwaar tegen de doorzichtige websitekop, 10-9-2026).
   ========================================================================== */
html.is-app .site-header{transition:background-color .3s ease, border-color .3s ease}
@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  html.is-app .site-header.is-gescrold{background:rgba(7,23,47,.6);
    -webkit-backdrop-filter:blur(22px) saturate(1.5); backdrop-filter:blur(22px) saturate(1.5);
    border-bottom-color:rgba(193,154,74,.18)}
}

/* ==========================================================================
   ACCOUNTMENU (11-9-2026, Jawad: "Hoe maken we dit stukje mooier en luxer en
   evt nog meer opties daar?", akkoord zonder bellen en appen). Het rondje in
   de kop als klein medaillon, het menu als donkere kaart met gouden haarlijn:
   bovenaan wie u bent (naam, klantnummer, pakket), dan Mijn gegevens,
   Rekeningen van Valorem en Meldingen, onderaan Uitloggen. Markup in
   _bron/portaal.py (_accountmenu), gedrag onderaan portaal.js.
   ========================================================================== */
html.is-app .klant-knop{width:38px; height:38px; background:#07172f; color:#f2dba6;
  border:1px solid rgba(219,185,104,.7); font-family:var(--serif); font-size:.86rem; font-weight:600; letter-spacing:.02em;
  box-shadow:0 0 0 3px rgba(193,154,74,.08), 0 0 16px rgba(193,154,74,.22);
  transition:background-color .2s ease, color .2s ease, box-shadow .2s ease}
html.is-app .klant-knop[aria-expanded="true"]{background:#dbb968; border-color:#dbb968; color:#07172f;
  box-shadow:0 0 0 4px rgba(219,185,104,.18), 0 0 22px rgba(219,185,104,.35)}
html.is-app .klant-popover{width:min(322px, calc(100vw - 24px)); min-width:0; top:50px; padding:0;
  border-radius:20px; overflow:hidden; color:#e3e9f2; text-align:left;
  background:linear-gradient(180deg, #172849 0%, #0e1b34 100%);
  border:1px solid rgba(193,154,74,.3);
  box-shadow:0 28px 64px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.06);
  transform-origin:calc(100% - 19px) -8px}
@media (prefers-reduced-motion:no-preference){
  html.is-app .klant-bar.is-open .klant-popover{animation:km-in .32s cubic-bezier(.2,.8,.2,1)}
}
@keyframes km-in{from{opacity:0; transform:translateY(-6px) scale(.95)} to{opacity:1; transform:none}}
.km-kop{display:flex; align-items:center; gap:14px; padding:18px 18px 16px;
  background:radial-gradient(130% 150% at 0% 0%, rgba(193,154,74,.16), transparent 62%);
  border-bottom:1px solid rgba(193,154,74,.2)}
.km-avatar{flex:0 0 auto; width:52px; height:52px; border-radius:50%; display:grid; place-items:center;
  background:#07172f; border:1px solid rgba(219,185,104,.75); color:#f2dba6;
  font-family:var(--serif); font-size:1.2rem; font-weight:600;
  box-shadow:0 0 0 4px rgba(193,154,74,.08), 0 0 24px rgba(193,154,74,.28)}
.km-wie{min-width:0; display:flex; flex-direction:column}
html.is-app .klant-popover .klant-bar-naam{display:block; font-family:var(--serif); font-size:1.14rem; font-weight:600;
  line-height:1.25; color:#fff; overflow-wrap:anywhere}
.km-meta{display:flex; align-items:center; flex-wrap:wrap; gap:6px 8px; margin-top:7px}
.km-label{font-size:.6rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:#cfae66}
html.is-app .klant-popover .klant-bar-nr{display:inline; margin:0; font-size:.82rem; font-weight:600;
  letter-spacing:.16em; color:#e3e9f2}
html.is-app .klant-popover .klant-bar-nr::before{content:none}
.km-pakket:empty{display:none}
.km-pakket{font-size:.6rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:#07172f;
  background:linear-gradient(100deg, #f2dba6, #c19a4a); padding:3px 8px; border-radius:var(--r-pil)}
.km-lijst{padding:6px 0}
.km-rij{display:flex; align-items:center; gap:13px; width:100%; min-height:56px; padding:9px 18px; margin:0;
  border:0; background:none; color:inherit; font:inherit; text-align:left; text-decoration:none; cursor:pointer;
  transition:background-color .15s ease}
.km-rij:hover, .km-rij:active{background:rgba(193,154,74,.08)}
.km-rij[hidden]{display:none}
.km-ic{flex:0 0 auto; width:34px; height:34px; border-radius:50%; display:grid; place-items:center;
  color:#dbb968; background:rgba(7,23,47,.7); border:1px solid rgba(193,154,74,.45)}
.km-ic svg{width:17px; height:17px}
.km-tekst{flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:2px}
.km-tekst strong{font-size:.93rem; font-weight:600; color:#f3f6fa}
.km-tekst small{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.km-pijl{flex:0 0 auto; width:16px; height:16px; color:rgba(227,233,242,.32)}
.km-stand{flex:0 0 auto; font-style:normal; font-size:.62rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  padding:4px 9px; border-radius:var(--r-pil); border:1px solid rgba(193,154,74,.45); color:#dbb968}
.km-stand.is-aan{background:rgba(94,201,141,.14); border-color:rgba(94,201,141,.45); color:#8fe0b1}
html.is-app .klant-popover .km-uit{display:flex; align-items:center; gap:13px; width:100%; margin:0; padding:14px 18px;
  border:0; border-top:1px solid rgba(255,255,255,.07); background:none; font:inherit; font-size:.9rem; font-weight:600;
  color:rgba(227,233,242,.8); text-decoration:none; cursor:pointer}
html.is-app .klant-popover .km-uit .km-ic{color:rgba(227,233,242,.7); border-color:rgba(255,255,255,.14)}
html.is-app .klant-popover .km-uit:hover, html.is-app .klant-popover .km-uit:active{color:#ff9d9d}
.km-voet{margin:0; padding:0 18px 14px; font-size:.7rem}
.km-voet a{color:inherit; text-decoration:none}

/* ==========================================================================
   DOSSIER UITKLAPPEN (11-9-2026, Jawad: "niet duidelijk wat nu is uitgeklapt en
   wat niet; laat bonnen bijvoorbeeld ook uitklappen en inklappen").
   Elke uitklapregel (jaar, kwartaal, IB/JR/Vpb, vaste stukken, en nu ook de mappen
   Aangiften/Bonnen/… uit mappen() in portaal.js) krijgt rechts een knopje met een
   pijl: dicht = gouden rand met een pijl omlaag, open = gevuld goud met de pijl
   omhoog. Een open jaar krijgt een gouden rand, de inhoud van een open kwartaal
   hangt aan een gouden lijn links, en wat openklapt komt zacht binnen.
   ========================================================================== */
html.is-app .dossier-periode > summary, html.is-app .dossier-sub > summary, html.is-app .dossier-map > summary{
  list-style:none; cursor:pointer; -webkit-tap-highlight-color:transparent; -webkit-user-select:none; user-select:none}
html.is-app .dossier-sub > summary::-webkit-details-marker,
html.is-app .dossier-map > summary::-webkit-details-marker{display:none}

/* het knopje */
html.is-app .dossier-periode > summary::after, html.is-app .dossier-sub > summary::after,
html.is-app .dossier-map > summary::after{
  content:""; flex:0 0 auto; width:30px; height:30px; border-radius:50%;
  border:1px solid rgba(219,185,104,.5);
  background:rgba(219,185,104,.07) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23dbb968' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9.5l6 6 6-6'/%3E%3C/svg%3E") center/15px no-repeat;
  transition:transform .4s var(--zacht), background-color .3s ease, border-color .3s ease, box-shadow .3s ease}
html.is-app .dossier-sub > summary::after{width:26px; height:26px; background-size:13px}
html.is-app .dossier-map > summary::after{width:24px; height:24px; background-size:12px}
html.is-app .dossier-periode[open] > summary::after, html.is-app .dossier-sub[open] > summary::after,
html.is-app .dossier-map[open] > summary::after{
  transform:rotate(180deg); border-color:#dbb968;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2307172f' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9.5l6 6 6-6'/%3E%3C/svg%3E") center/15px no-repeat,
             linear-gradient(325deg, #e2c178 0%, #c19a4a 55%, #a9812f 100%);
  box-shadow:0 6px 16px -6px rgba(193,154,74,.7)}
html.is-app .dossier-sub[open] > summary::after{background-size:13px, auto}
html.is-app .dossier-map[open] > summary::after{background-size:12px, auto}

/* jaar: open = gouden rand om de kaart */
html.is-app .dossier-periode{transition:border-color .35s ease}
html.is-app .dossier-periode > summary{gap:12px}

/* kwartaal en de andere tussenregels: titel links, knopje rechts. Met een status
   erbij (kwartaal, IB, JR, Vpb) komen status en Download op een tweede regel onder
   de titel; naast elkaar pasten "Ingediend 28 juli 2026" + Download + knopje niet
   op een telefoon en sloeg de regel rommelig om. Zo staan alle knopjes in één rij. */
html.is-app .dossier-sub > summary{gap:8px; justify-content:flex-start; padding:4px 0}
html.is-app .dossier-sub > summary .dossier-titel{margin-right:auto}
html.is-app .dossier-sub > summary:has(.ov-merk){display:grid; column-gap:8px; row-gap:9px; align-items:center}
html.is-app .dossier-sub > summary:has(.ov-merk) .dossier-titel{grid-row:1; margin:0}
html.is-app .dossier-sub > summary:has(.ov-merk) .ov-merk{grid-column:1; grid-row:2; justify-self:start; margin:0}
html.is-app .dossier-sub > summary:has(.ov-merk) .dossier-zip{justify-self:start}
html.is-app .dossier-sub[open] > summary .dossier-titel{color:#f3dc9c}

/* de inhoud van een open kwartaal hangt aan een gouden lijn */
html.is-app .dossier-sub[open] > :not(summary){margin-left:6px; padding-left:13px;
  box-shadow:inset 1.5px 0 0 rgba(219,185,104,.28)}
html.is-app .dossier-sub[open] > summary{margin-bottom:6px}

/* mappen (Aangiften, Bonnen, …): een regel met het aantal en het knopje */
html.is-app .dossier-map{margin:0; padding:0; border-top:1px solid rgba(255,255,255,.07)}
html.is-app .dossier-map:first-of-type{border-top:0}
html.is-app .dossier-map > summary{display:flex; align-items:center; gap:10px; padding:13px 0}
html.is-app .dossier-map-kop{margin-right:auto; font-size:.76rem; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:#e3e9f2}
html.is-app .dossier-map-kop .dos-aantal{display:inline-block; min-width:24px; margin-left:10px; padding:2px 8px;
  border-radius:var(--r-pil); background:rgba(255,255,255,.08); color:rgba(227,233,242,.8); opacity:1;
  font-size:.72rem; letter-spacing:0; text-align:center}
html.is-app .dossier-map[open] > summary .dossier-map-kop{color:#dbb968}
html.is-app .dossier-map[open] > summary .dos-aantal{background:rgba(219,185,104,.16); color:#f3dc9c}
html.is-app .dossier-map > .dossier-lijst{padding-bottom:8px}

/* wat openklapt komt zacht binnen */
@media (prefers-reduced-motion:no-preference){
  html.is-app .dossier-periode[open] > :not(summary), html.is-app .dossier-sub[open] > :not(summary),
  html.is-app .dossier-map[open] > :not(summary){animation:dos-open .42s var(--zacht) both}
}
@keyframes dos-open{from{opacity:0; transform:translateY(-6px)} to{opacity:1; transform:none}}
@media (prefers-reduced-motion:reduce){
  html.is-app .dossier-periode > summary::after, html.is-app .dossier-sub > summary::after,
  html.is-app .dossier-map > summary::after{transition:none}
}
/* ==========================================================================
   WELKOM (11-9-2026, Jawad: "Inloggen voelt nu heel kaal, kan er een mooie visuele
   luxe premium overgang dynamisch zijn?"). welkom() in portaal.js zet na een geslaagde
   inlog een vlak over het scherm: het groeit als cirkel uit de inlogknop (--wx/--wy),
   het medaillon komt binnen en een gouden ring tekent zich eromheen, dan "Welkom" en de
   bedrijfsnaam met een gouden lijn. Eronder gaat de app al open; na ± 2,2 s (of bij een
   tik) lost het vlak op en komt het overzicht zacht binnen. Alleen opacity/transform/
   clip-path, dus soepel op een telefoon. Bij "minder beweging" slaat portaal.js alles over.
   ========================================================================== */
.welkom{position:fixed; inset:0; z-index:300; display:grid; place-items:center; overflow:hidden; cursor:pointer;
  background:radial-gradient(ellipse 85% 60% at 50% 42%, #17335c 0%, #0b1a33 58%, #06112a 100%);
  -webkit-clip-path:circle(0px at var(--wx,50%) var(--wy,50%)); clip-path:circle(0px at var(--wx,50%) var(--wy,50%));
  animation:welkom-open .78s cubic-bezier(.7,0,.2,1) forwards; -webkit-tap-highlight-color:transparent}
.welkom::before{content:""; position:absolute; inset:0; background-image:var(--korrel); opacity:.9; pointer-events:none}
.welkom::after{content:""; position:absolute; left:10%; right:10%; top:calc(env(safe-area-inset-top,0px) + 18px); height:1px;
  background:linear-gradient(90deg, transparent, rgba(219,185,104,.35), transparent); pointer-events:none}
.welkom-gloed{position:absolute; left:50%; top:42%; width:620px; height:620px; margin:-310px 0 0 -310px; border-radius:50%;
  background:radial-gradient(closest-side, rgba(219,185,104,.30), rgba(219,185,104,.08) 55%, rgba(219,185,104,0));
  opacity:0; transform:scale(.55); animation:welkom-gloed 1.7s var(--zacht) .2s forwards}
.welkom-inhoud{position:relative; display:flex; flex-direction:column; align-items:center; text-align:center;
  padding:0 28px; margin-top:-6vh}
.welkom-medaillon{position:relative; width:108px; height:108px; border-radius:50%; display:grid; place-items:center;
  background:radial-gradient(circle at 35% 30%, #1d3d6b, #0a1b38 72%);
  box-shadow:0 0 0 9px rgba(219,185,104,.05), 0 22px 54px -14px rgba(0,0,0,.75), 0 0 70px rgba(219,185,104,.22);
  opacity:0; transform:scale(.62); animation:welkom-medaillon 1s var(--zacht) .28s forwards}
.welkom-medaillon img{width:60px; height:60px; margin-top:3px; opacity:0; transform:translateY(6px);
  animation:welkom-regel .8s var(--zacht) .5s forwards}
.welkom-medaillon svg{position:absolute; inset:-4px; width:calc(100% + 8px); height:calc(100% + 8px); transform:rotate(-90deg); overflow:visible}
.welkom-medaillon circle{fill:none; stroke:#dcb96b; stroke-width:2.2; stroke-linecap:round;
  stroke-dasharray:296; stroke-dashoffset:296; filter:drop-shadow(0 0 4px rgba(219,185,104,.55));
  animation:welkom-ring 1.15s cubic-bezier(.65,0,.35,1) .42s forwards}
.welkom-label{margin:34px 0 0; font-family:var(--sans); font-size:.74rem; font-weight:700; line-height:1;
  letter-spacing:.36em; text-indent:.36em; text-transform:uppercase; color:#dbb968;
  opacity:0; transform:translateY(10px)}
.welkom-naam{margin:14px 0 0; max-width:17ch; font-family:var(--serif); font-weight:600; font-size:clamp(1.75rem, 7.4vw, 2.4rem);
  line-height:1.15; letter-spacing:.005em; color:#f5f1e6;
  opacity:0; transform:translateY(14px)}
.welkom-medaillon + .welkom-naam{margin-top:34px}
.welkom-lijn{display:block; width:128px; height:1px; margin-top:24px; transform:scaleX(0);
  background:linear-gradient(90deg, rgba(219,185,104,0), #dbb968, rgba(219,185,104,0))}
/* de tekst speelt pas af als de naam bekend is (vulWelkom zet is-gevuld) */
.welkom.is-gevuld .welkom-label{animation:welkom-regel .75s var(--zacht) .78s forwards}
.welkom.is-gevuld .welkom-naam{animation:welkom-regel .85s var(--zacht) .92s forwards}
.welkom.is-gevuld .welkom-lijn{animation:welkom-lijn 1s var(--zacht) 1.12s forwards}
/* bij de opstart en bij terugkomen staat het vlak er meteen: geen cirkel uit een knop */
.welkom.welkom--direct{-webkit-clip-path:none; clip-path:none; animation:none}
/* stil neergelegd bij het wegschakelen: alles in de eindstand, niets beweegt */
.welkom.welkom--rust *{animation:none !important}
.welkom.welkom--rust:not(.is-weg){animation:none}
.welkom.welkom--rust .welkom-gloed{opacity:1; transform:none}
.welkom.welkom--rust .welkom-medaillon, .welkom.welkom--rust .welkom-medaillon img,
.welkom.welkom--rust .welkom-label, .welkom.welkom--rust .welkom-naam{opacity:1; transform:none}
.welkom.welkom--rust .welkom-medaillon circle{stroke-dashoffset:0}
.welkom.welkom--rust .welkom-lijn{transform:scaleX(1)}
/* weg: het vlak lost op en schuift iets naar voren, de inhoud gaat omhoog */
.welkom.is-weg{-webkit-clip-path:none; clip-path:none; pointer-events:none;
  animation:welkom-dicht .85s cubic-bezier(.5,0,.25,1) forwards}
.welkom.is-weg .welkom-inhoud{transition:transform .85s var(--zacht), opacity .45s ease; transform:translateY(-18px) scale(1.04); opacity:0}
/* kort weggeweest: alleen het vlak vervaagt, de inhoud blijft staan */
.welkom.is-weg.is-snel{animation:welkom-dicht .4s ease forwards}
.welkom.is-weg.is-snel .welkom-inhoud{transition:none; transform:none; opacity:1}
/* de app eronder: alleen opacity op #app-binnen (een transform zou de vaste tabbalk
   meenemen), de beweging zit op het zichtbare paneel */
html.welkom-binnen #app-binnen{animation:welkom-app-in .7s ease both}
html.welkom-binnen #app-binnen .app-paneel:not([hidden]){animation:welkom-paneel .95s var(--zacht) .05s both}
@keyframes welkom-open{to{-webkit-clip-path:circle(150vmax at var(--wx,50%) var(--wy,50%)); clip-path:circle(150vmax at var(--wx,50%) var(--wy,50%))}}
@keyframes welkom-gloed{to{opacity:1; transform:scale(1)}}
@keyframes welkom-medaillon{to{opacity:1; transform:none}}
@keyframes welkom-ring{to{stroke-dashoffset:0}}
@keyframes welkom-regel{to{opacity:1; transform:none}}
@keyframes welkom-lijn{to{transform:scaleX(1)}}
@keyframes welkom-dicht{from{opacity:1; transform:none} to{opacity:0; transform:scale(1.05)}}
@keyframes welkom-app-in{from{opacity:0} to{opacity:1}}
@keyframes welkom-paneel{from{opacity:0; transform:translateY(22px)} to{opacity:1; transform:none}}

/* de inlogknop terwijl we wachten: de glans loopt sneller en blijft lopen */
html.is-app .app-login-kaart .btn-primary.is-bezig{pointer-events:none}
html.is-app .app-login-kaart .btn-primary.is-bezig::after{animation:login-glans-bezig .95s ease-in-out infinite}
@keyframes login-glans-bezig{from{left:-60%} to{left:130%}}
@media (prefers-reduced-motion:reduce){
  .welkom, .welkom *, html.welkom-binnen #app-binnen, html.welkom-binnen #app-binnen .app-paneel{animation:none !important}
  html.is-app .app-login-kaart .btn-primary.is-bezig::after{animation:none}
}

/* ---------------------------------------------------------------------------
   PREMIUM-LAAG IN DE APP (12-9-2026, Jawad: "wat kan hier visueel premium en
   luxe"). Vier dingen maakten het scherm goedkoop, en dit lost ze op:

   1. Twee gouden knoppen op Aanleveren. Goud is het accent van EEN handeling;
      staan er twee, dan zegt het niets meer. "Bestanden kiezen" is nu .btn-ghost
      (in _bron/portaal.py), zodat alleen "Stukken versturen" goud is.
   2. Het groen (#5ec98d) kwam uit geen enkel deel van de huisstijl. Statussen
      zijn nu goud en ivoor.
   3. Vier verschillende kaartbehandelingen op een scherm. Hieronder staat een
      kaarttaal: radius 18, gouden haarlijn, zacht verloop, zachte schaduw.
   4. Luxe komt uit typografisch contrast: de dragende woorden groot in de
      serif, de labels klein en gespatieerd in caps. De ingredienten stonden er
      al, ze werden alleen niet uitgespeeld.

   Dit blok staat bewust onderaan: het moet winnen van de lichte regels erboven.
--------------------------------------------------------------------------- */

/* --- een kaarttaal ------------------------------------------------------- */
html.is-app .ov-pakket,
html.is-app .ov-tegel,
html.is-app .ov-kaart,
html.is-app .ov-taak,
html.is-app .ov-lijst li,
html.is-app .zend-lijst li,
html.is-app .dropzone{
  border-radius:var(--r-groot);
  border:1px solid rgba(219,185,104,.15);
  background:linear-gradient(180deg, rgba(23,51,92,.50) 0%, rgba(9,27,54,.72) 100%);
  box-shadow:0 14px 30px -20px rgba(0,0,0,.85), inset 0 1px 0 rgba(255,255,255,.045);
}
html.is-app .ov-pakket,
html.is-app .ov-kaart,
html.is-app .ov-taak{padding:18px 20px}
html.is-app .ov-lijst{display:grid; gap:10px; margin:0}
html.is-app .ov-lijst li{padding:16px 18px; display:flex; align-items:center;
  justify-content:space-between; gap:14px}
html.is-app .zend-lijst{display:grid; gap:10px}
html.is-app .zend-lijst li{padding:15px 17px; border-bottom:0}

/* de pakketkaart draagt het scherm: iets warmer, met een gouden gloed */
html.is-app .ov-pakket{
  background:
    radial-gradient(120% 140% at 88% 0%, rgba(193,154,74,.16), transparent 58%),
    linear-gradient(180deg, rgba(23,51,92,.62) 0%, rgba(9,27,54,.78) 100%);
  border-color:rgba(219,185,104,.30);
  gap:16px;
}

/* Dossier en Administratie deelden nog het oude platte vlak (var(--app-vlak) met een
   witte rand op 10%). Zelfde kaarttaal, zodat de app een geheel is. Een kaart
   IN een kaart (de mappen binnen een kwartaal) krijgt bewust geen verloop en
   geen schaduw - anders stapelt het en wordt het zwaar. */
html.is-app .dossier-periode,
html.is-app .dossier-wacht,
html.is-app .fact-lijst li,
html.is-app .fact-let,
html.is-app .leeg,
html.is-app .push-vak,
html.is-app .rit-form{
  border-radius:var(--r-groot);
  border:1px solid rgba(219,185,104,.15);
  background:linear-gradient(180deg, rgba(23,51,92,.50) 0%, rgba(9,27,54,.72) 100%);
  box-shadow:0 14px 30px -20px rgba(0,0,0,.85), inset 0 1px 0 rgba(255,255,255,.045);
}
html.is-app .dossier-sub{border-radius:var(--r-vak); border:1px solid rgba(219,185,104,.11); box-shadow:none}
html.is-app .fact-lijst{display:grid; gap:10px}
html.is-app .fact-lijst li{padding:15px 17px; border-bottom:0}
/* bedragen dragen het scherm op Administratie: in de serif, net als op Overzicht */
html.is-app .fact-bedrag{font-family:var(--serif); font-weight:600; font-size:1.14rem;
  letter-spacing:-.005em}

/* --- typografisch contrast ----------------------------------------------- */
html.is-app .ov-klein{font-size:.67rem; letter-spacing:.15em; opacity:.62}
html.is-app .ov-pakket strong,
html.is-app .ov-tegel strong,
html.is-app .ov-groot{font-family:var(--serif); font-weight:600; letter-spacing:-.005em}
html.is-app .ov-pakket strong{font-size:1.72rem; line-height:1.1; color:var(--gold)}
html.is-app .ov-pakket small{font-size:.88rem; color:rgba(238,242,248,.62)}
html.is-app .ov-tegel strong{font-size:1.3rem}
html.is-app .ov-groot{font-size:1.5rem}
html.is-app .ov-kop{margin:30px 0 12px}

/* --- statussen in goud en ivoor, niet in groen --------------------------- */
html.is-app .ov-tegel.is-goed strong{color:#e8dcc0}
html.is-app .ov-tegel.is-goed small{color:rgba(232,220,192,.6)}
html.is-app .ov-merk{padding:4px 11px; font-size:.68rem; letter-spacing:.04em; border:1px solid transparent}
html.is-app .ov-merk.klaar{background:rgba(219,185,104,.13); color:var(--gold-soft);
  border-color:rgba(219,185,104,.32)}
html.is-app .ov-merk.bezig{background:rgba(238,242,248,.07); color:rgba(238,242,248,.7);
  border-color:rgba(238,242,248,.16)}
html.is-app .ov-taak.is-klaar .ov-taak-tekst{color:rgba(238,242,248,.92)}
html.is-app .filemeter.is-goed{color:var(--gold-soft)}

/* --- de "alles is bij"-kaart met een gouden medaillon -------------------- */
html.is-app .ov-taak.is-klaar.is-rustig{display:flex; align-items:center; gap:15px; padding:20px}
.ov-rust-ic{flex:0 0 auto; width:42px; height:42px; border-radius:50%;
  display:grid; place-items:center;
  background:radial-gradient(circle at 34% 28%, rgba(246,227,173,.30), rgba(193,154,74,.14));
  border:1px solid rgba(219,185,104,.42); color:var(--gold-soft)}
.ov-rust-ic svg{width:21px; height:21px}
html.is-app .ov-taak.is-klaar.is-rustig .ov-taak-tekst{font-family:var(--serif);
  font-size:1.12rem; font-weight:600}

/* --- komende datum als volwaardige kaart met dagenteller ----------------- */
html.is-app .ov-deadline{display:flex; align-items:center; justify-content:space-between; gap:16px}
html.is-app .ov-deadline .ov-dl-links{min-width:0}
html.is-app .ov-deadline strong{display:block; font-family:var(--serif); font-weight:600;
  font-size:1.28rem; color:#eef2f8; line-height:1.2; margin-top:3px}
.ov-dagen{flex:0 0 auto; text-align:center; min-width:74px; padding:10px 12px; border-radius:var(--r-vak);
  background:rgba(193,154,74,.12); border:1px solid rgba(219,185,104,.3)}
.ov-dagen b{display:block; font-family:var(--serif); font-size:1.42rem; font-weight:600;
  line-height:1; color:var(--gold-soft)}
.ov-dagen span{display:block; margin-top:3px; font-size:.64rem; letter-spacing:.12em;
  text-transform:uppercase; color:rgba(219,185,104,.75)}
.ov-dagen.is-dichtbij{background:rgba(141,43,43,.22); border-color:rgba(243,176,176,.35)}
.ov-dagen.is-dichtbij b{color:#f3b0b0}
.ov-dagen.is-dichtbij span{color:rgba(243,176,176,.8)}

/* --- de uploadzone: geen streepjeslijn ----------------------------------- */
html.is-app .dropzone{
  padding:26px 22px;
  background:
    radial-gradient(110% 130% at 50% 0%, rgba(193,154,74,.10), transparent 62%),
    linear-gradient(180deg, rgba(23,51,92,.45) 0%, rgba(9,27,54,.7) 100%);
}
html.is-app .dropzone.is-over{border-color:var(--gold); background:rgba(193,154,74,.14)}
html.is-app .dropzone-hint{color:rgba(238,242,248,.5); font-size:.82rem}

/* --- zending uitklappen: wat zat erin en waar staat het nu? -------------- */
/* 12-9-2026, Jawad: "kan er een dropdown verschijnen met kort wat er was
   geuploaded en waar gesorteerd". De plek komt uit de tabel `gesorteerd`; van
   voor 10-9-2026 is die er niet, dan blijft de plek leeg in plaats van gegokt. */
html.is-app .zend-lijst li:has(.zend-uit){padding:0}
.zend-uit summary{display:flex; align-items:center; gap:14px; padding:15px 17px;
  cursor:pointer; list-style:none}
.zend-uit summary::-webkit-details-marker{display:none}
.zend-uit summary > div{flex:1 1 auto; min-width:0}
.zend-pijl{flex:0 0 auto; width:17px; height:17px; opacity:.45; transition:transform .2s ease}
.zend-uit[open] .zend-pijl{transform:rotate(180deg)}
.zend-stukken{list-style:none; margin:0; padding:2px 17px 15px; display:grid; gap:9px}
html.is-app .zend-stukken li{display:flex; align-items:baseline; justify-content:space-between;
  gap:14px; padding:9px 0 0; background:none; border:0; border-top:1px solid rgba(219,185,104,.12);
  box-shadow:none; border-radius:0}
.zs-naam{flex:1 1 auto; min-width:0; font-size:.86rem; line-height:1.35; word-break:break-word}
.zs-naam small{font-size:.78rem; margin-left:6px}
.zs-plek{flex:0 0 auto; font-size:.72rem; letter-spacing:.04em; color:var(--gold-soft);
  white-space:nowrap}
@media (max-width:420px){
  html.is-app .zend-stukken li{display:block}
  .zs-plek{display:block; margin-top:3px; white-space:normal}
}

/* --- de melderregel onder de uploadzone ---------------------------------- */
/* "Nog geen bestanden gekozen" is geen invoerveld. Zonder kader is het gewoon
   een rustige regel; pas als er echt iets te melden valt krijgt hij een vlak. */
html.is-app .filemeter{background:transparent; border:0; padding:4px 2px 0;
  color:rgba(238,242,248,.48); font-size:.84rem}
html.is-app .filemeter.is-goed,
html.is-app .filemeter.is-fout{padding:13px 17px; border-radius:16px;
  border:1px solid rgba(219,185,104,.22);
  background:linear-gradient(180deg, rgba(23,51,92,.5) 0%, rgba(9,27,54,.72) 100%)}
html.is-app .filemeter.is-fout{border-color:rgba(243,176,176,.34); color:#f3b0b0}

/* In de uploadzone staan twee keuzes naast elkaar. Geen van beide mag goud zijn
   (die is voor Versturen), maar de eerste is wel de hoofdweg: gouden rand en
   gouden letters, de tweede blijft neutraal. */
html.is-app .dropzone-btns .btn:first-child{border-color:rgba(219,185,104,.5); color:var(--gold-soft)}
html.is-app .dropzone-btns .btn:first-child:hover{border-color:var(--gold); background:rgba(193,154,74,.1)}

/* --- invoervelden en chips: de laatste plek met de oude vormtaal --------- */
/* Radius 8 met een witte rand op 18%, naast kaarten van radius 18 met een
   gouden haarlijn - dat is wat Administratie oud liet ogen (12-9-2026, Jawad:
   "administratie tab is nog oud"). Alleen vorm en kleur; de binnenmarges laat
   ik staan, want daar hangt de indeling van de zoekbalk en de bestandskiezer
   aan. */
html.is-app.is-app input::placeholder,
html.is-app.is-app textarea::placeholder{color:rgba(238,242,248,.34)}
html.is-app .fact-zoekbalk input{background:rgba(7,19,38,.72)}

/* De chips boven Administratie en de knoppen ernaast: pilvorm met een gouden
   randje in plaats van grijze blokjes. De gekozen chip was een fel wit vlak;
   goud past bij de rest en schreeuwt minder. */
html.is-app.is-app .fact-chip,
html.is-app.is-app .fact-terug,
html.is-app.is-app .fact-meerknop,
html.is-app.is-app .fact-acties button{
  background:rgba(255,255,255,.045);
  border:1px solid rgba(219,185,104,.22);
  border-radius:var(--r-pil);
  color:rgba(238,242,248,.88);
}
/* 25-9-2026: een onomkeerbare knop (auto verwijderen) blijft rood, ook in de app */
html.is-app.is-app .fact-acties button.is-rood{background:rgba(224,72,63,.16); color:#ff9b93;
  border-color:rgba(255,155,147,.32)}
html.is-app .fact-chip:hover,
html.is-app .fact-terug:hover,
html.is-app .fact-meerknop:hover{border-color:rgba(219,185,104,.5); background:rgba(193,154,74,.08)}
html.is-app .fact-chip.is-aan{background:rgba(193,154,74,.17); border-color:var(--gold);
  color:var(--gold-soft); font-weight:600}
html.is-app .fact-terug.is-terug{background:rgba(193,154,74,.17); border-color:var(--gold);
  color:var(--gold-soft)}

/* --- een rustige merkafsluiting onder het overzicht ---------------------- */
.ov-voet{margin:34px 0 6px; padding-top:22px; text-align:center;
  border-top:1px solid rgba(219,185,104,.14)}
.ov-voet span{display:block; font-family:var(--serif); font-size:.95rem; color:rgba(219,185,104,.72);
  letter-spacing:.02em}
.ov-voet small{display:block; margin-top:4px; font-size:.72rem; letter-spacing:.13em;
  text-transform:uppercase; color:rgba(238,242,248,.32)}

/* ---------------------------------------------------------------------------
   /WELKOM, DERDE RONDE (12-9-2026, Jawad: "nog premiumer, toegankelijker,
   extreem toegankelijk en super vloeiend en mooi").

   Toegankelijkheid eerst (de fouten, de meldingen, de groepen), daarna de
   uitstraling (het donkere openingsscherm, de gouden draad, het controlevel).
   Dit blok staat achteraan en wint daarmee van de basisregels hierboven.
--------------------------------------------------------------------------- */

/* Voor een schermlezer wel, voor het oog niet. */
.vh{position:absolute !important; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0}

/* Een fieldset brengt eigen randen en marges mee die we hier niet willen; hij
   staat er puur voor de betekenis (de legend hoort bij de groep keuzes). */
.keuzegroep{border:0; padding:0; margin:0; min-width:0}

/* Foutmeldingen ONDER het veld in plaats van in een ballon die vanzelf
   verdwijnt. Gekoppeld met aria-describedby, dus ze worden ook voorgelezen. */
.veld-fout{margin:7px 0 0; font-size:var(--fs-sm); font-weight:600; color:#8d2b2b; line-height:1.4}
.veld-fout::before{content:"! "; font-weight:700}
.field input[aria-invalid="true"],
.field select[aria-invalid="true"],
.field textarea[aria-invalid="true"]{border-color:#c06a6a; background:#fffafa}
.field input[aria-invalid="true"]:focus,
.field textarea[aria-invalid="true"]:focus{border-color:#8d2b2b; box-shadow:0 0 0 3px rgba(141,43,43,.14)}

/* Verdergaan waar u gebleven was. */
.hervat{margin:22px 0 2px; padding:16px 18px; border-radius:var(--radius);
  border:1px solid rgba(193,154,74,.32); background:var(--gold-tint); line-height:1.5}
.hervat p{margin:0 0 12px; font-size:var(--fs-sm)}
.hervat-knoppen{display:flex; flex-wrap:wrap; gap:10px; align-items:center}
.hervat-opnieuw{background:none; border:0; padding:6px 2px; font:inherit; font-size:var(--fs-sm);
  color:var(--text-soft); text-decoration:underline; cursor:pointer}
.hervat-opnieuw:hover{color:var(--ink)}

/* --- de bovenbalk --------------------------------------------------------- */
.js-wizard .wizard-stap h2[tabindex]:focus{outline:none}
.js-wizard .wizard-stap h2[tabindex]:focus-visible{outline:none}
.wizard-merk{display:inline-flex; align-items:center; gap:11px; min-width:0;
  font-family:var(--serif); font-weight:600; font-size:1rem; color:var(--ink)}
.wizard-merk img, .wizard-merk svg{width:27px; height:27px; display:block; flex:0 0 auto}
.js-wizard .wizard-balkje{border-bottom-color:rgba(193,154,74,.26)}
.wizard-balk span{box-shadow:0 0 10px rgba(219,185,104,.6)}

/* --- de stap: gecentreerd en gelaagd binnenkomen -------------------------- */
/* Korte stappen staan midden in beeld in plaats van tegen de bovenbalk; lange
   stappen beginnen gewoon bovenaan en scrollen (safe). De stap schuift als
   geheel in (richting), de onderdelen daarbinnen komen kort na elkaar op:
   alleen opacity en een paar pixels - genoeg om verzorgd te voelen, te weinig
   om traag te worden. */
.js-wizard .wizard-vak{display:grid; align-content:safe center}
.js-wizard .wizard-stap > *{animation:stap-item .42s cubic-bezier(.22,.9,.3,1) both}
.js-wizard .wizard-stap > *:nth-child(1){animation-delay:.03s}
.js-wizard .wizard-stap > *:nth-child(2){animation-delay:.07s}
.js-wizard .wizard-stap > *:nth-child(3){animation-delay:.11s}
.js-wizard .wizard-stap > *:nth-child(4){animation-delay:.15s}
.js-wizard .wizard-stap > *:nth-child(5){animation-delay:.18s}
.js-wizard .wizard-stap > *:nth-child(n+6){animation-delay:.21s}
@keyframes stap-item{from{opacity:0; transform:translateY(7px)} to{opacity:1; transform:none}}

/* --- het openingsscherm in marineblauw ------------------------------------ */
/* Het eerste scherm bepaalt of dit op een kantoor lijkt of op een formulier.
   Donker met het medaillon; daarna vervaagt het naar het lichte formulier.
   Het verloop hangt aan ::before zodat het kan overvloeien - een achtergrond
   met een gradient kan zelf niet overgaan. */
.js-wizard::before{content:""; position:absolute; inset:0; z-index:-1;
  opacity:0; pointer-events:none; transition:opacity .5s ease;
  background:
    radial-gradient(118% 82% at 50% 0%, rgba(193,154,74,.17), transparent 62%),
    linear-gradient(180deg, #0e2145 0%, #07172f 100%)}
.js-wizard.is-intro::before{opacity:1}
.js-wizard .wizard-balkje, .js-wizard .wizard-nav{
  transition:background-color .5s ease, border-color .5s ease}
.js-wizard .wizard-merk{transition:color .5s ease}

/* ⛔ Op het openingsscherm GEEN bovenbalk. Die draagt hetzelfde medaillon als
   het grote merk in het scherm zelf, en twee keer hetzelfde logo onder elkaar
   leest als een fout (Jawad, 12-9-2026: "t logo staat er nu ook twee keer").
   Vanaf stap 1 komt de balk vanzelf, met de teller en de gouden draad. */
.js-wizard.is-intro .wizard-balkje{display:none}
.js-wizard.is-intro .wizard-merk{color:#eef2f8}
.js-wizard.is-intro .wizard-nav{background:transparent; border-top-color:rgba(219,185,104,.16)}
.js-wizard.is-intro .wizard-stap h2{color:#fff}
.js-wizard.is-intro .wizard-kop{color:var(--gold-soft)}
.js-wizard.is-intro .wizard-onder{color:rgba(238,242,248,.76)}
.js-wizard.is-intro .stappen li{color:rgba(238,242,248,.84)}
.js-wizard.is-intro .stappen li strong{color:#fff}
.js-wizard.is-intro .stappen li::before{background:rgba(193,154,74,.2); color:var(--gold-soft)}
.js-wizard.is-intro .form-note{color:rgba(238,242,248,.6)}
.js-wizard.is-intro .wizard-stap a{color:var(--gold-soft)}
.js-wizard.is-intro .hervat{background:rgba(193,154,74,.14); border-color:rgba(219,185,104,.34);
  color:#eef2f8}
.js-wizard.is-intro .hervat-opnieuw{color:rgba(238,242,248,.66)}
.js-wizard.is-intro .hervat-opnieuw:hover{color:#fff}
.js-wizard.is-intro .btn-ghost{border-color:rgba(238,242,248,.36); color:#eef2f8}
.js-wizard.is-intro .btn-ghost:hover{border-color:var(--gold); color:#fff; background:transparent}
.js-wizard.is-intro .welkom-merk{width:74px}
.js-wizard.is-intro .welkom-merk img, .js-wizard.is-intro .welkom-merk svg{width:74px}

/* --- het controlescherm als document -------------------------------------- */
/* De laatste stap is het moment van tekenen. Daarom geen kale lijst maar een
   vel papier met een gouden regel erboven. */
.controle-lijst{position:relative; overflow:hidden; background:#fff;
  border:1px solid var(--line); border-radius:16px; padding:22px 22px 10px;
  margin:0 0 4px; box-shadow:0 16px 34px -26px rgba(12,28,44,.6)}
.controle-lijst::before{content:""; position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg, var(--gold), var(--gold-soft))}
.controle-lijst dl{margin:0 0 11px; padding:0 0 11px}
.controle-lijst dl:last-of-type{margin-bottom:0; padding-bottom:2px}

@media (prefers-reduced-motion:reduce){
  .js-wizard .wizard-stap > *{animation:none}
  .js-wizard::before, .js-wizard .wizard-balkje,
  .js-wizard .wizard-nav, .js-wizard .wizard-merk{transition:none}
}


/* ---------------------------------------------------------------------------
   MEEKIJKEN ALS KLANT (12-9-2026). Het keuzeblad uit het accountmenu. Alleen
   zichtbaar voor een beheerder; zie portaal.js, blok "meekijken als klant".
   Er stond hier ook een gouden balk bovenin het scherm; die is er op verzoek
   uit (hij liep op een iPhone achter de Dynamic Island langs). De weg terug
   staat nu als regel in het accountmenu.
--------------------------------------------------------------------------- */
.wissel-laag{
  position:fixed; inset:0; z-index:140; display:flex; align-items:flex-end;
  justify-content:center; background:rgba(7,23,47,.55); backdrop-filter:blur(2px)}
.wissel-blad{
  width:100%; max-width:460px; background:var(--paper); color:var(--text);
  border-radius:var(--r-groot) 18px 0 0; padding:20px 18px calc(18px + env(safe-area-inset-bottom,0px));
  max-height:80vh; overflow-y:auto; animation:wissel-op .26s cubic-bezier(.22,.9,.3,1) both}
@keyframes wissel-op{from{transform:translateY(14px); opacity:0} to{transform:none; opacity:1}}
.wissel-blad h3{margin:0 0 14px; font-size:1.1rem}
.wissel-lijst{display:grid; gap:8px; margin-bottom:14px}
.wissel-rij{
  display:block; width:100%; text-align:left; cursor:pointer;
  padding:13px 15px; border:1px solid var(--line); border-radius:13px;
  background:#fff; font:inherit; color:var(--ink)}
.wissel-rij:hover{border-color:var(--gold); background:#fffdf8}
.wissel-rij strong{display:block; font-weight:600}
.wissel-rij small{display:block; margin-top:2px; color:var(--text-soft); font-size:var(--fs-sm)}
.wissel-af{
  width:100%; padding:12px; border:0; border-radius:var(--r-kaart); cursor:pointer;
  background:var(--paper-3); color:var(--text); font:inherit; font-weight:600}
@media (min-width:560px){
  .wissel-laag{align-items:center}
  .wissel-blad{border-radius:var(--r-groot)}
}
/* In de app is alles donker; het blad moet meedoen. */
html.is-app .wissel-blad{background:#0e2145; color:#eef2f8}
html.is-app .wissel-rij{background:rgba(7,19,38,.72); color:#eef2f8; border-color:rgba(219,185,104,.20)}
html.is-app .wissel-rij:hover{border-color:var(--gold); background:rgba(193,154,74,.14)}
html.is-app .wissel-rij small{color:rgba(238,242,248,.62)}
html.is-app .wissel-af{background:rgba(255,255,255,.08); color:#eef2f8}

/* ==========================================================================
   ONDERTEKENEN v2 (14-9-2026) - het stuk zelf in beeld, met gele vakken op de
   plek waar getekend moet worden. Jawad: "ik wil dat het document in de app
   komt en dat je op het gebied waar een handtekening hoort gewoon kan tekenen,
   vrij vlak, automatisch zwart". Gedrag: valoremOnderteken onderaan
   portaal.js. Donker als de kijker, op de site en in de app; het papier en
   het vergrote stuk blijven wit, de inkt is zwart. z-index 900: de kijker
   (1000) opent erboven voor "Bekijk het ondertekende stuk".
   ========================================================================== */
.otk{position:fixed; inset:0; z-index:900; display:flex; flex-direction:column; color:#fff;
  font-family:var(--sans); touch-action:pan-x pan-y;
  background:var(--korrel), radial-gradient(900px 480px at 85% -10%, rgba(193,154,74,.16), transparent 60%),
             linear-gradient(180deg, #081a33 0%, #050f20 100%);
  opacity:0; transform:translateY(18px);
  transition:opacity .3s ease, transform .5s var(--zacht, cubic-bezier(.16,1,.3,1))}
.otk.is-open{opacity:1; transform:none}
html.otk-open, html.otk-open body{overflow:hidden}
.otk [hidden]{display:none !important}
.otk button{-webkit-tap-highlight-color:transparent}

/* balk: zelfde taal als de kijker (marine, gouden haarlijn, medaillonknop) */
.otk-balk{flex:none; display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:10px;
  padding:calc(env(safe-area-inset-top,0px) + 8px + min(env(safe-area-inset-top,0px), 24px)) 12px 10px;
  background:#07172f; border-bottom:1px solid rgba(193,154,74,.3);
  box-shadow:0 12px 30px -20px rgba(0,0,0,.7); position:relative; z-index:2}
.otk-terug{display:inline-flex; align-items:center; gap:3px; height:44px; padding:0 15px 0 8px;
  border-radius:22px; border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.06);
  color:#fff; font:inherit; font-size:.98rem; font-weight:600; cursor:pointer;
  transition:background .2s ease, transform .12s ease, opacity .2s ease}
.otk-terug svg{width:22px; height:22px; color:var(--gold-soft)}
.otk-terug:hover{background:rgba(255,255,255,.1)}
.otk-terug:active{transform:scale(.97)}
.otk-terug[disabled], .otk-vergroot[disabled]{opacity:.4; cursor:default; transform:none}
.otk-titel{min-width:0; text-align:center; line-height:1.25}
.otk-titel strong{display:block; font-family:var(--serif); font-weight:600; font-size:1.02rem;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
/* één regel: "Klaar om te ondertekenen" brak op een iPhone in twee en maakte de balk hoger */
.otk-titel small{display:block; min-height:1em; margin-top:3px; font-size:.7rem; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; color:var(--gold);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.otk-vergroot{width:44px; height:44px; padding:0; border-radius:50%; display:grid; place-items:center; cursor:pointer;
  color:#fff; border:1px solid transparent;
  background:linear-gradient(180deg, var(--app-vlak-op) 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 10px 22px -12px rgba(0,0,0,.7); transition:transform .12s ease, opacity .2s ease}
.otk-vergroot svg{width:21px; height:21px}
.otk-vergroot:active{transform:scale(.95)}
.otk:not(.is-geladen) .otk-vergroot{visibility:hidden}

/* het stuk */
.otk-vak{flex:1; min-height:0; overflow:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain;
  outline:0; display:flex; flex-direction:column; align-items:stretch; padding:14px 10px 28px}
.otk-paginas{width:100%; max-width:880px; display:grid; gap:16px; margin-inline:auto; flex:none}
.otk-pagina{position:relative; width:100%; border-radius:4px; background:#fff;
  box-shadow:0 26px 54px -26px rgba(0,0,0,.8), 0 2px 8px rgba(0,0,0,.25)}
.otk-pagina:not(.is-getekend){background:linear-gradient(90deg, #e9edf2 0%, #f7f8fa 50%, #e9edf2 100%);
  background-size:200% 100%; animation:kijker-glim 1.4s ease-in-out infinite}
.otk-pagina canvas{position:absolute; inset:0; display:block; width:100%; height:100%; border-radius:inherit;
  animation:kijker-in .45s ease both}

/* de vakken op het stuk */
.otk-veld{position:absolute; z-index:1; margin:0; padding:0; border:0; border-radius:2px; background:transparent;
  display:flex; align-items:center; justify-content:flex-start; overflow:visible; cursor:pointer;
  font:inherit; color:#000; text-align:left; --vh:24px}
.otk-veld::before{content:""; position:absolute; inset:-8px -4px}          /* ruimere tikzone */
.otk-veld::after{content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  border:1px dashed rgba(0,0,0,.18)}
.otk-veld.is-leeg{background:rgba(255,214,102,.30)}
.otk-veld.is-leeg::after{border:2px dashed #c19a4a}
.otk-veld:focus-visible{outline:2px solid rgba(193,154,74,.6); outline-offset:2px}
.otk-veld .otk-plek{position:relative; display:flex; align-items:center; gap:.3em; min-width:0; max-width:100%;
  padding:0 5px; overflow:hidden; white-space:nowrap; color:#5c4712; font-weight:600; line-height:1;
  font-size:clamp(9px, calc(var(--vh) * .5), 14px)}
.otk-veld.is-handtekening{justify-content:center}
.otk-veld.is-handtekening .otk-plek{justify-content:center; font-size:clamp(9px, calc(var(--vh) * .32), 15px)}
.otk-veld .otk-plek svg{flex:none; width:1.3em; height:1.3em}
.otk-veld.is-stil .otk-plek{color:rgba(0,0,0,.38); font-weight:500}
.otk-veld .otk-waarde{position:relative; flex:none; display:block; padding-left:var(--pad, 2px); white-space:nowrap;
  font-family:Helvetica, Arial, sans-serif; font-weight:400; line-height:1; color:#000}
.otk-veld img{position:relative; display:block; width:100%; height:100%; max-width:none; object-fit:contain;
  padding:min(2px, calc(var(--vh) * .06)); pointer-events:none; -webkit-user-drag:none}
.otk-veld.is-flits{animation:otk-flits 1.5s ease}
@media (prefers-reduced-motion:no-preference){
  .otk-veld.is-leeg{animation:otk-puls 2.6s ease-in-out infinite}
  .otk-veld.is-leeg.is-flits{animation:otk-flits 1.5s ease}
}
@keyframes otk-puls{0%,100%{box-shadow:0 0 0 0 rgba(193,154,74,0)} 50%{box-shadow:0 0 0 4px rgba(193,154,74,.28)}}
@keyframes otk-flits{0%,100%{box-shadow:0 0 0 0 rgba(193,154,74,0)}
  20%,60%{box-shadow:0 0 0 7px rgba(193,154,74,.55), 0 0 26px 6px rgba(193,154,74,.45)}}

/* voet: uitleg, de ene knop en de status */
.otk-voet{flex:none; position:relative; z-index:2;
  padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px));
  background:#07172f; border-top:1px solid rgba(193,154,74,.3); box-shadow:0 -12px 30px -20px rgba(0,0,0,.7)}
.otk-voet-in{max-width:560px; margin-inline:auto; display:grid; gap:10px}
.otk-uitleg{margin:0; font-size:.88rem; line-height:1.45; text-align:center; color:rgba(238,242,248,.78)}
.otk .otk-voet .btn{width:100%; min-height:52px}
.otk-status{margin:0; font-size:.86rem; line-height:1.4; text-align:center; color:rgba(238,242,248,.72)}
.otk-status:empty{display:none}
.otk-status.is-fout{color:#f0a08f}
.otk-knop-draai{display:none; width:18px; height:18px; border-radius:50%;
  border:2px solid rgba(35,23,3,.25); border-top-color:#231703; animation:kijker-draai .8s linear infinite}
.otk.is-bezig .otk-knop-draai{display:inline-block}
.otk.is-bezig .otk-knop svg{display:none}
.otk.is-bezig .otk-veld{pointer-events:none}

/* knoppen op marine: goud blijft goud, de spookknop krijgt lichte tekst en rand.
   Met .otk ervoor: html.is-app .btn (min-height 44px) woog anders zwaarder. */
.otk .btn.btn-ghost{color:#eef2f8; border-color:rgba(255,255,255,.34); background:rgba(255,255,255,.04)}
.otk .btn.btn-ghost:hover{border-color:rgba(255,255,255,.7); background:rgba(255,255,255,.08)}
.otk .btn.btn-primary{color:#231703}
.otk .btn:active{transform:scale(.98)}
.otk .btn[disabled]{opacity:.45; cursor:default; transform:none; box-shadow:none}
/* uitgeschakeld goud werd modderbruin op marine: dan liever een stille gouden tint */
.otk .btn.btn-primary[disabled]{opacity:1; background:rgba(193,154,74,.18); color:rgba(238,242,248,.42)}
.otk.is-bezig .otk-knop[disabled]{opacity:1}
.otk .btn svg{width:19px; height:19px; flex:none}

/* laden, fout, klaar */
.otk-laden{margin:auto; display:flex; flex-direction:column; align-items:center; gap:14px;
  color:rgba(255,255,255,.72); font-size:.95rem}
.otk-draai{width:34px; height:34px; border-radius:50%; border:2px solid rgba(255,255,255,.14);
  border-top-color:var(--gold); animation:kijker-draai .9s linear infinite}
.otk-fout{margin:auto; max-width:34ch; padding:24px 8px; text-align:center; color:rgba(255,255,255,.84);
  display:flex; flex-direction:column; align-items:center; gap:14px}
.otk-fout p{margin:0; line-height:1.55}
.otk-fout-ic{color:var(--gold-soft)}
.otk-fout-ic svg{width:40px; height:40px}
.otk .otk-fout .btn{min-height:48px; padding-inline:22px}
.otk-klaar{margin:auto; width:100%; max-width:26rem; padding:28px 10px; text-align:center; outline:0;
  display:flex; flex-direction:column; align-items:center}
.otk-klaar-ic{width:68px; height:68px; border-radius:50%; display:grid; place-items:center; margin-bottom:18px;
  color:var(--gold-soft); border:1px solid transparent;
  background:linear-gradient(180deg, var(--app-vlak-op) 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,.08), 0 0 34px rgba(193,154,74,.28)}
.otk-klaar-ic svg{width:32px; height:32px}
.otk-klaar h3{margin:0 0 8px; color:#fff; font-size:1.55rem}
.otk-klaar p{margin:0 0 22px; color:rgba(238,242,248,.76); line-height:1.55}
.otk-klaar .ov-taak-stuk{width:100%; min-height:52px; margin:0 0 12px; padding:10px 16px; justify-content:center;
  border-radius:var(--r-kaart); background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.16); color:#eef2f8;
  font-size:.95rem}
.otk-klaar .ov-taak-stuk:hover{background:rgba(255,255,255,.1)}
.otk-klaar .ov-taak-stuk svg{width:20px; height:20px; flex:none; color:var(--gold-soft)}
.otk .otk-klaar .btn{width:100%; min-height:52px}

/* bladen: onderaan op een telefoon, midden in beeld vanaf 560px */
.otk-scherm{position:absolute; inset:0; z-index:5; display:flex; align-items:flex-end; justify-content:center;
  background:rgba(3,10,22,.62); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
  opacity:0; transition:opacity .22s ease}
.otk-scherm.is-open{opacity:1}
.otk-blad{position:relative; width:100%; max-width:560px; max-height:calc(100% - 16px); overflow:auto;
  overscroll-behavior:contain; touch-action:pan-y;
  background:#0e2145; color:#eef2f8; border-radius:22px 22px 0 0; border-top:1px solid rgba(193,154,74,.35);
  padding:10px 16px calc(16px + env(safe-area-inset-bottom,0px));
  box-shadow:0 -24px 60px -20px rgba(0,0,0,.75);
  transform:translateY(28px); transition:transform .4s var(--zacht, cubic-bezier(.16,1,.3,1))}
.otk-scherm.is-open .otk-blad{transform:none}
.otk-blad::before{content:""; display:block; width:38px; height:4px; margin:0 auto 12px; border-radius:2px;
  background:rgba(255,255,255,.2)}
.otk-blad-kop{display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:14px}
.otk-blad-kop h3{margin:0; color:#fff; font-size:1.3rem}
.otk-blad-kop p{margin:4px 0 0; font-size:.9rem; line-height:1.4; color:rgba(238,242,248,.68)}
.otk-annuleer{flex:none; min-height:44px; margin:-8px -6px 0 0; padding:0 8px 0 12px; border:0; background:none;
  color:var(--gold-soft); font:inherit; font-size:.95rem; font-weight:600; cursor:pointer}
.otk-annuleer:active{opacity:.7}
.otk-blad-knoppen{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:16px}
.otk .otk-blad-knoppen .btn{width:100%; min-height:52px; padding-inline:12px}

/* het vergrote stuk met de inktlaag */
.otk-zoom{position:relative; overflow:hidden; border-radius:var(--r-kaart); background:#fff;
  box-shadow:inset 0 0 0 1px rgba(7,23,47,.08), 0 18px 40px -22px rgba(0,0,0,.85)}
.otk-zoom-in{position:relative; margin-inline:auto}
.otk-zoom-stuk{position:absolute; left:0; top:0; display:block}
.otk-zoom-stuk.is-in{animation:kijker-in .3s ease both}
.otk-kader{position:absolute; border:2px dashed #c19a4a; border-radius:2px; background:rgba(255,214,102,.16);
  pointer-events:none}
.otk-zoom-hint{position:absolute; display:flex; align-items:center; justify-content:center; gap:7px; pointer-events:none;
  color:rgba(92,71,18,.62); font-size:.95rem; font-weight:600; transition:opacity .2s ease}
.otk-zoom-hint svg{width:20px; height:20px}
.otk-zoom.heeft-inkt .otk-zoom-hint{opacity:0}
.otk-inkt{position:absolute; display:block; touch-action:none; cursor:crosshair;
  -webkit-user-select:none; user-select:none; -webkit-touch-callout:none}

/* datum, naam, tekst */
.otk .otk-invoer{display:block; width:100%; height:54px; margin:0; padding:0 14px; border-radius:var(--r-kaart);
  border:1px solid rgba(219,185,104,.35); background:rgba(7,19,38,.72); color:#fff; box-shadow:none;
  font:inherit; font-size:16px; -webkit-appearance:none; appearance:none}
.otk .otk-invoer:focus{outline:none; border-color:var(--gold); box-shadow:0 0 0 3px rgba(193,154,74,.25)}

@media (min-width:560px){
  .otk-scherm{align-items:center; padding:24px}
  .otk-blad{border-radius:20px; border:1px solid rgba(193,154,74,.3); padding:20px; max-height:100%;
    transform:translateY(12px) scale(.98)}
  .otk-blad::before{display:none}
}
@media (min-width:900px){
  .otk-balk{padding-left:24px; padding-right:24px}
  .otk-vak{padding:28px 24px 40px}
}
@media (prefers-reduced-motion:reduce){
  .otk, .otk-blad, .otk-scherm{transition:none; transform:none}
  .otk-draai, .otk-knop-draai, .otk-pagina, .otk-pagina canvas, .otk-zoom-stuk.is-in{animation:none}
  .otk-veld.is-flits{animation:none; box-shadow:0 0 0 4px rgba(193,154,74,.6)}
}

/* ==========================================================================
   SCANNER (14-9-2026, uitgebreid 15-9-2026) - "Scannen met camera" bij
   Aanleveren: live camerabeeld -> hoeken van het papier -> rechtgetrokken
   scan -> meer pagina's -> één pdf. Gedrag: SCANNER-BEGIN in portaal.js.
   Leunt op de .otk-laag (balk, voet, knoppen, laden); hier alleen wat de
   scanner extra heeft.
   ========================================================================== */
.otk.sca{touch-action:none}
.sca .sca-balk-plek{display:block; width:44px; height:44px}
.sca .sca-vak{overflow:hidden; align-items:center; justify-content:center; padding:14px}

.sca-start{margin:auto; width:100%; max-width:26rem; padding:18px 8px; text-align:center;
  display:flex; flex-direction:column; align-items:center}
.sca-start .otk-klaar-ic{margin-bottom:16px}
.sca-start h3{margin:0 0 8px; color:#fff; font-size:1.45rem}
.sca-start p{margin:0 0 16px; color:rgba(238,242,248,.76); line-height:1.55}
/* dubbel gescand: de twee pagina's naast elkaar */
.sca-paren{display:grid; gap:12px; width:100%; margin:2px 0 4px}
.sca-paar{display:flex; align-items:center; justify-content:center; gap:14px}
.sca-paar figure{margin:0; display:grid; gap:6px; justify-items:center}
.sca-paar img{display:block; width:86px; height:116px; object-fit:cover; border-radius:var(--r-klein); background:#fff;
  box-shadow:0 12px 26px -14px rgba(0,0,0,.85)}
.sca-paar figcaption{font-size:.82rem; color:rgba(238,242,248,.76)}
.sca-paar > span{color:var(--gold-soft); font-weight:700; font-size:1.25rem}
.sca-tips{list-style:none; margin:0; padding:0; display:grid; gap:8px; width:100%; text-align:left}
.sca-tips li{position:relative; padding:10px 12px 10px 38px; border-radius:var(--r-kaart); font-size:.9rem; line-height:1.4;
  color:rgba(238,242,248,.84); background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08)}
.sca-tips li::before{content:""; position:absolute; left:14px; top:50%; width:10px; height:10px; margin-top:-5px;
  border-radius:50%; background:var(--gold); box-shadow:0 0 0 3px rgba(193,154,74,.2)}

/* brief of bon */
.sca-soort-vraag{display:flex; align-items:center; justify-content:center; gap:12px; flex-wrap:wrap; margin:0 0 16px;
  font-size:.9rem; color:rgba(238,242,248,.76)}
.sca-soort{display:inline-flex; padding:3px; border-radius:22px; background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.14)}
.sca-soort button{min-width:76px; min-height:36px; padding:0 16px; border:0; border-radius:var(--r-groot); background:transparent;
  color:rgba(238,242,248,.8); font:inherit; font-size:.9rem; font-weight:600; cursor:pointer;
  -webkit-tap-highlight-color:transparent; transition:background .15s ease, color .15s ease}
.sca-soort button[aria-pressed="true"]{background:var(--gold); color:#231703}

/* de live camera */
.sca-cam{position:relative; flex:none; margin:auto; overflow:hidden; border-radius:10px; background:#000;
  box-shadow:0 22px 50px -24px rgba(0,0,0,.9)}
.sca-cam video{display:block; width:100%; height:100%; object-fit:contain; background:#000}
.sca-cam .sca-lijn{pointer-events:none}
.sca-cam-kader{fill:rgba(255,255,255,.06); stroke:rgba(255,255,255,.75); stroke-width:2; stroke-linejoin:round;
  transition:stroke .2s ease, fill .2s ease}
.sca-cam-kader.is-zeker{stroke:#dbb968; fill:rgba(193,154,74,.12)}
.sca-cam-kader.is-bijna{stroke:#f2dba6; stroke-width:3.5; fill:rgba(193,154,74,.22)}
/* het blad in beeld is al gescand (16-9-2026) */
.sca-cam-kader.is-gehad{stroke:rgba(255,255,255,.62); stroke-dasharray:7 6; fill:rgba(255,255,255,.05)}
.sca-cam-boven{position:absolute; left:0; right:0; top:0; display:flex; flex-direction:column; align-items:center; gap:8px;
  padding:10px; pointer-events:none}
.sca-cam-boven .sca-soort{pointer-events:auto; background:rgba(7,23,47,.62); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px)}
.sca-cam-hint{padding:7px 14px; border-radius:16px; background:rgba(7,23,47,.62); color:#fff; font-size:.88rem; font-weight:600;
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px)}
.sca-flits{position:absolute; inset:0; background:#fff; opacity:0; pointer-events:none}
.sca-flits.is-aan{animation:sca-flits .45s ease-out}
@keyframes sca-flits{0%{opacity:.85} 100%{opacity:0}}
.otk.sca .sca-knoppen .btn.sca-sluiter svg{width:24px; height:24px}

/* de foto met het kader en de punten */
.sca-beeld{position:relative; flex:none; margin:auto; touch-action:none; -webkit-user-select:none; user-select:none;
  -webkit-touch-callout:none}
.sca-foto{display:block; width:100%; height:100%; border-radius:var(--r-klein); box-shadow:0 22px 50px -24px rgba(0,0,0,.9)}
.sca-lijn{position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none}
.sca-schaduw{fill:rgba(3,10,22,.55)}
.sca-kader{fill:rgba(193,154,74,.08); stroke:#dbb968; stroke-width:2.5; stroke-linejoin:round}
.sca-punt{position:absolute; left:0; top:0; width:48px; height:48px; margin:-24px 0 0 -24px; padding:0; border:0;
  background:transparent; border-radius:50%; cursor:grab; touch-action:none; -webkit-tap-highlight-color:transparent}
.sca-punt::after{content:""; position:absolute; inset:13px; border-radius:50%; background:var(--gold);
  border:3px solid #fff; box-shadow:0 0 0 2px rgba(7,23,47,.6), 0 4px 14px rgba(0,0,0,.55);
  transition:inset .15s ease, background .15s ease}
.sca-punt.is-actief{cursor:grabbing}
.sca-punt.is-actief::after{inset:9px; background:var(--gold-soft)}
.sca-punt:focus-visible{outline:2px solid #fff; outline-offset:-6px}
.sca-loep{position:absolute; z-index:3; width:120px; height:120px; border-radius:50%; overflow:hidden;
  border:3px solid var(--gold); background:#050f20; pointer-events:none;
  box-shadow:0 14px 34px -10px rgba(0,0,0,.85)}
.sca-loep canvas{display:block; width:100%; height:100%}
.sca-loep::after{content:""; position:absolute; left:50%; top:50%; width:16px; height:16px; margin:-8px 0 0 -8px;
  border-radius:50%; border:2px solid #fff; box-shadow:0 0 0 1px rgba(0,0,0,.5)}

/* de gescande pagina */
.sca-blad{position:relative; flex:none; margin:auto; background:#fff; border-radius:3px;
  box-shadow:0 26px 54px -26px rgba(0,0,0,.85), 0 2px 8px rgba(0,0,0,.25); animation:kijker-in .35s ease both}
.sca-blad canvas{display:block; width:100%; height:100%; border-radius:inherit}

/* voet: duimpjes (vasthouden = slepen), filters, kleine acties, knoppen */
.sca-strook{display:flex; gap:8px; overflow-x:auto; padding:2px 2px 4px; margin:0 -2px; scrollbar-width:none;
  -webkit-overflow-scrolling:touch}
.sca-strook::-webkit-scrollbar{display:none}
.sca-duim{position:relative; flex:none; width:44px; height:60px; padding:0; border-radius:5px; overflow:hidden;
  background:#fff; border:2px solid rgba(255,255,255,.18); cursor:pointer; touch-action:pan-x;
  -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; -webkit-tap-highlight-color:transparent;
  transition:transform .12s ease, box-shadow .12s ease}
.sca-duim img{display:block; width:100%; height:100%; object-fit:cover; pointer-events:none; -webkit-user-drag:none}
.sca-duim span{position:absolute; right:2px; bottom:2px; min-width:16px; padding:0 4px; border-radius:8px;
  background:#07172f; color:#fff; font-size:.66rem; font-weight:700; line-height:16px; text-align:center}
.sca-duim.is-huidig{border-color:var(--gold); box-shadow:0 0 0 2px rgba(193,154,74,.3)}
.sca-duim.is-sleep{z-index:4; border-color:var(--gold-soft); box-shadow:0 10px 24px -8px rgba(0,0,0,.8); transition:none; cursor:grabbing}
.sca-filters{display:flex; justify-content:center; gap:8px; flex-wrap:wrap}
.sca-filter{padding:0 16px; border-radius:20px; border:1px solid rgba(255,255,255,.2); background:rgba(255,255,255,.05); color:#eef2f8; font:inherit; font-size:.9rem; font-weight:600; cursor:pointer}
.sca-filter[aria-pressed="true"]{border-color:var(--gold); background:rgba(193,154,74,.2); color:#fff}
.sca-acties{display:flex; justify-content:center; flex-wrap:wrap; gap:2px 14px}
.sca-link{display:inline-flex; align-items:center; gap:6px; min-height:40px; padding:0 4px; border:0; background:none;
  color:var(--gold-soft); font:inherit; font-size:.92rem; font-weight:600; cursor:pointer}
.sca-link svg{width:18px; height:18px; flex:none}
.sca-link:active{opacity:.7}
.sca-knoppen{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.sca-knoppen.is-een{grid-template-columns:1fr}
.otk.sca .sca-knoppen .btn{width:100%; min-height:52px; padding-inline:10px}
.sca-invoer{position:absolute; left:0; top:0; width:1px; height:1px; opacity:0; pointer-events:none}
/* scannen vanuit een taak of een bericht: dezelfde knopvorm als de paperclip */
button.ber-clip{border:0; font:inherit}
@media (max-width:360px){
  .otk.sca .sca-knoppen .btn svg{display:none}
}
@media (prefers-reduced-motion:reduce){
  .sca-blad{animation:none}
  .sca-punt::after, .sca-duim, .sca-cam-kader{transition:none}
  .sca-flits.is-aan{animation:none}
}

/* ========================================================================
   KLANTPORTAAL: RUST, AANDACHT EN COMFORT (15-9-2026)
   Aanvulling op DONKERE STAND. De begroeting en de eerstvolgende handeling
   dragen het overzicht; pakket en rekeningen vormen een compacte afsluiting.
   Alleen de app: de openbare website en de maatvoering van documentvelden,
   scanner, vaste balken en veilige schermranden houden hun eigen regels.
   ======================================================================== */
html.is-app{
  --portaal-vlak:var(--ink-2);
  --portaal-rand:rgba(227,233,242,.15);
  /* Op de lichtste kaart (#17335c): 6,93:1; op de basis: 9,23:1. */
  --portaal-bijschrift:rgba(227,233,242,.78);
  --portaal-overgang:180ms ease;

  /* ---- 18-9-2026: één plek voor wat er in de app los verspreid stond ----
     De app-opmaak is in zes rondes gegroeid en had 35 losse marineblauwtinten,
     19 hoekradiussen en 45 lettermaten - waarvan er een flink aantal maar een
     derde pixel verschilden. Deze tokens houden EXACT de waarden die er al
     stonden; er verandert dus niets op het scherm. Wat er wel verandert: een
     tint of een radius bijstellen is nu één regel in plaats van zoeken door
     2.500 regels. Gebruik deze, zet er geen nieuwe hexwaarde meer los neer. */

  /* vlakken, van diep naar licht */
  --app-diep:#0b1626;        /* achtergrond achter een kaart */
  --app-vlak:#132039;        /* de gewone kaart */
  --app-vlak-op:#10254a;     /* kaart die opvalt, en randen daarop */

  /* hoeken - hoe groter het vlak, hoe ronder */
  --r-klein:6px;             /* merkjes, kleine knopjes */
  --r-kaart:12px;            /* de standaardkaart */
  --r-vak:14px;              /* invoervelden en blokken */
  --r-groot:18px;            /* de grote kaarten */
  --r-pil:999px;             /* chips en ronde knoppen */

  /* bedragen staan altijd in dezelfde maat en onder elkaar */
  --fs-bedrag:1.25rem;
  scroll-padding-top:calc(100px + env(safe-area-inset-top,0px));
  scroll-padding-bottom:calc(132px + env(safe-area-inset-bottom,0px));
}
html.is-app body, html.is-app #portal-app, html.is-app .section{background:var(--ink)}
html.is-app body{font-size:16px; line-height:1.6}
html.is-app #portal-app{padding-top:24px}
html.is-app :is(h1,h2,h3,h4){font-family:var(--serif); font-weight:600; line-height:1.22}
html.is-app :is(.ov-kop,.fact-kop,.fact-kopje){font-family:var(--sans); line-height:1.5}
html.is-app .ov-kop{font-size:.76rem; letter-spacing:.11em; margin:30px 0 12px;
  color:var(--portaal-bijschrift)}
html.is-app .ov-taak-tekst{font-size:1rem; line-height:1.5}
html.is-app .ov-taak-uitleg{font-size:.92rem; line-height:1.65; margin-top:8px; max-width:68ch}

/* Heldere bijschriften zonder de eerdere combinatie van opacity en alpha. */
html.is-app :is(.ov-klein,.ov-tegel .ov-klein,.ov-pakket small,.ov-tegel small,
  .ov-tegel.is-goed small,.ov-taak-uitleg,.ov-taak-stuk small,.ov-betaal-lijst dt,
  .fact-stil,.dossier-leeg,.dossier-titel em,.dos-meta,.dos-info,.dos-aantal,.dropzone-hint,
  .filemeter,.filelist-maat,.app-login-p,.zend-lijst small,.zs-naam small,
  .zs-plek.is-stil,.km-tekst small,.km-voet,.ber-bijlage-naam,.rit-hint){
  color:var(--portaal-bijschrift); opacity:1;
}
html.is-app .ov-klein, html.is-app .ov-tegel .ov-klein{font-size:.75rem; letter-spacing:.1em}
html.is-app :is(.dossier-titel em,.filelist-maat,.km-tekst small,.zs-naam small){font-size:.82rem}
html.is-app :is(.ov-merk,.fact-merk){font-size:.75rem; line-height:1.45}
html.is-app .ov-dagen span{font-size:.72rem; color:var(--gold-soft)}
html.is-app .ov-voet small{font-size:.75rem; color:var(--portaal-bijschrift)}
html.is-app .ber-fout{color:#ff8a8a}
html.is-app.is-app .filemeter.is-fout{color:#f3b0b0}
html.is-app.is-app .filemeter.is-goed{color:var(--gold-soft)}
html.is-app.is-app .rit-hint.is-goed{color:#9fe0bb}
html.is-app.is-app :is(input,textarea)::placeholder{color:rgba(227,233,242,.68)}

/* Vlakken maken de hiërarchie leesbaar; goud markeert de belangrijkste taak. */
html.is-app :is(.ov-pakket,.ov-tegel,.ov-kaart,.ov-taak,.ov-lijst li,.zend-lijst > li,
  .dossier-periode,.dossier-wacht,.fact-lijst li,.fact-let,.leeg,.push-vak,.rit-form,.dropzone){
  background:var(--portaal-vlak); border:1px solid var(--portaal-rand);
  border-radius:var(--radius-lg); box-shadow:none;
}
html.is-app :is(.ov-pakket,.ov-kaart,.ov-taak){padding:22px; margin-bottom:14px}
html.is-app .ov-tegel{padding:20px}
html.is-app .ov-tegels{gap:14px}
html.is-app :is(.ov-taak,.ov-kaart).is-hoofdtaak{
  border-color:rgba(193,154,74,.6); border-top:2px solid var(--gold);
  background:var(--ink-2); padding-top:24px;
}
html.is-app .ov-taak-knoppen{gap:10px; margin-top:16px}
html.is-app .ov-taak.is-klaar{background:var(--ink-2); border-color:var(--portaal-rand)}
html.is-app .ov-taak.is-klaar.is-rustig{padding:22px; gap:16px}
html.is-app .ov-rust-ic{background:rgba(193,154,74,.09); box-shadow:none}
html.is-app .dossier-sub{background:transparent; border-color:var(--portaal-rand); box-shadow:none}
html.is-app .dossier-periode[open]{border-color:rgba(193,154,74,.48)}
html.is-app .dropzone{padding:30px 24px}
html.is-app .dropzone.is-over{background:rgba(193,154,74,.14); border-color:var(--gold)}

/* Persoonlijke opening, ook bij lange bedrijfsnamen en vergrote tekst. */
html.is-app .ov-welkom{padding:6px 2px 24px; max-width:64ch; overflow-wrap:anywhere}
html.is-app .ov-welkom-naam{display:block; margin:0 0 10px; font-size:.82rem;
  color:var(--portaal-bijschrift); line-height:1.5}
html.is-app .ov-welkom h2{font-size:clamp(1.8rem,5.8vw,2.35rem); line-height:1.17;
  letter-spacing:-.018em; margin:0 0 12px; text-wrap:balance}
html.is-app .ov-welkom p{margin:0; font-size:.98rem; line-height:1.65;
  color:var(--portaal-bijschrift); max-width:52ch}
html.is-app .ov-recent{margin-top:28px}
html.is-app .ov-recent .ov-taak.is-info{padding:16px 2px; margin:0; border:0;
  border-top:1px solid var(--portaal-rand); border-radius:0; background:transparent}
html.is-app .ov-recent .ov-taak-tekst{font-size:.94rem; font-weight:500}
html.is-app .ov-recent .ov-taak-uitleg{margin-top:4px; font-size:.86rem}

html.is-app .ov-account{display:grid; gap:0; margin-top:30px; padding-top:10px;
  border-top:1px solid var(--portaal-rand)}
/* sinds 18-9-2026 direct onder de begroeting: lijn erboven en eronder,
   ruimte naar de acties die volgen */
html.is-app .ov-account{margin:0 0 28px; padding:6px 0 8px; border-bottom:1px solid var(--portaal-rand)}
html.is-app .ov-account .ov-pakket{padding:16px 0; margin:0; gap:12px;
  background:transparent; border:0; border-radius:0; box-shadow:none}
html.is-app .ov-account .ov-pakket strong{font-size:1.25rem; line-height:1.3; color:#f3f6fa}
html.is-app .ov-account .ov-pakket .ov-klein{color:var(--portaal-bijschrift); letter-spacing:.1em}
html.is-app .ov-account .ov-pakket-ic{width:36px; height:36px; background:transparent; box-shadow:none}
html.is-app .ov-account .ov-pakket small{font-size:.82rem}
html.is-app .ov-account .ov-tegels{display:flex; flex-direction:column; gap:8px; margin:0}
html.is-app .ov-account .ov-tegel{width:100%; padding:14px 16px; border-radius:var(--radius);
  background:rgba(227,233,242,.035); border-color:transparent; box-shadow:none}
html.is-app .ov-account .ov-tegel strong{font-size:1.15rem}
html.is-app .ov-account .ov-tegel small{font-size:.82rem}
html.is-app .ov-ververs-fout{display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px;
  margin:0 0 18px; padding:14px 16px; border:1px solid rgba(193,154,74,.45);
  border-radius:var(--radius); background:var(--portaal-vlak); color:#e3e9f2; font-size:.9rem}
html.is-app .ov-ververs-fout p{flex:1 1 240px; margin:0}
html.is-app .ov-ververs-fout button{flex:0 0 auto; min-height:44px}
@media (min-width:620px){
  html.is-app .ov-account{grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:24px; align-items:center}
}

/* Berichten blijven op hun vertrouwde plek; meer regelruimte maakt ze rustiger. */
html.is-app .ber-draad{gap:14px; padding-top:12px}
html.is-app .ber{padding:14px 16px; line-height:1.6; overflow-wrap:anywhere;
  transition:background-color var(--portaal-overgang)}
html.is-app .ber.is-zij{background:var(--ink-2); border:1px solid var(--portaal-rand)}
html.is-app .ber time{font-size:.76rem; opacity:1; color:var(--portaal-bijschrift); margin-top:8px}
html.is-app .ber.is-ik time{color:#54657a}
html.is-app .ber-wie{font-size:.75rem; margin-bottom:6px}
html.is-app .ber.is-ik .ber-wie{color:var(--gold-ink)}

/* Aanraakvlakken vergroten zonder documentvelden of scannerpunten te verplaatsen. */
html.is-app :is(.btn,.fact-terug,.fact-chip,.fact-acties button,.ov-snel-knop,
  .ov-taak-knoppen .btn,.ov-taak-knoppen .fact-terug,.ov-taak-stuk,.dossier-zip,
  .app-login-link,.app-login-installeer summary,.dossier-periode > summary,
  .dossier-sub > summary,.dossier-map > summary,.sca-filter,.sca-link){min-height:44px}
html.is-app .dossier-zip{display:inline-flex; align-items:center; justify-content:center; padding:8px 12px}
html.is-app .dossier-lijst a{min-height:44px}
html.is-app .app-login-link{padding:8px 12px}
html.is-app :is(.ber-clip,.ber-stuur,.filelist-weg){min-width:44px; width:44px; min-height:44px; height:44px}
html.is-app .klant-knop{width:44px; height:44px}
html.is-app .app-tab{min-height:48px; font-size:.72rem; color:var(--portaal-bijschrift)}
html.is-app .app-tab.aan{color:var(--gold-soft)}
html.is-app .ov-kopieer{min-height:44px; padding:8px 12px}
html.is-app :is(button,a,input,select,textarea,summary,[tabindex]):not(.otk-veld):not(.sca-punt):focus-visible{
  outline:2px solid var(--gold-soft); outline-offset:3px;
}
html.is-app :is(.km-rij,.km-uit):focus-visible{outline-offset:-4px}

/* Dezelfde korte reactie bij openen en indrukken; geen zwevende kaarten. */
html.is-app :is(.btn,.fact-terug,.fact-chip,.ov-tegel,.ov-taak-stuk,.ov-snel-knop){
  transition:background-color var(--portaal-overgang), border-color var(--portaal-overgang),
    color var(--portaal-overgang), opacity 120ms ease, transform 120ms ease;
}
html.is-app :is(.btn,.fact-terug,.fact-chip,.ov-tegel,.ov-taak-stuk,.ov-snel-knop,.app-tab):active{
  transform:scale(.99); opacity:.94;
}
html.is-app .kijker{transition:opacity 180ms ease, transform 240ms cubic-bezier(.16,1,.3,1)}
html.is-app .kijker-foto{transition:opacity 180ms ease, transform 240ms ease}
/* Logopuls, goudglans en LOGIN-LUXE zijn bewuste merkkeuzes van Jawad
   (11/15-9-2026). Deze rustiger indeling verandert hun animaties, glans en
   gloed niet. De bestaande regels en de toestelvoorkeur blijven leidend. */
@keyframes portaal-zacht-in{from{opacity:0} to{opacity:1}}
@media (prefers-reduced-motion:no-preference){
  html.is-app .app-paneel:not([hidden]){animation:portaal-zacht-in 180ms ease-out}
  html.is-app .dossier-periode[open] > :not(summary), html.is-app .dossier-sub[open] > :not(summary),
  html.is-app .dossier-map[open] > :not(summary){animation:portaal-zacht-in 180ms ease-out}
}
@media (hover:hover){
  html.is-app :is(.ov-tegel,.ov-taak-stuk):hover{border-color:rgba(193,154,74,.5)}
}

/* Installatie is een rustige extra, bereikbaar vanuit de accountbediening. */
html.is-app .app-install-dialog{width:min(480px,calc(100vw - 32px)); max-width:none;
  max-height:calc(100dvh - 48px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));
  padding:26px; margin:auto; overflow:auto; overscroll-behavior:contain;
  border:1px solid rgba(193,154,74,.4); border-radius:var(--radius-lg);
  background:var(--ink-2); color:#e3e9f2; box-shadow:0 24px 64px rgba(7,23,47,.45)}
html.is-app .app-install-dialog::backdrop{background:rgba(7,23,47,.78)}
html.is-app .app-install-kop{margin:0 48px 14px 0; font-family:var(--serif); font-size:1.7rem; line-height:1.2}
html.is-app .app-install-sluit{position:absolute; top:16px; right:16px; display:grid; place-items:center;
  width:44px; height:44px; padding:0; border:1px solid var(--portaal-rand); border-radius:50%;
  background:transparent; color:#e3e9f2; font:inherit; font-size:1.4rem; cursor:pointer}
html.is-app .app-install-dialog p{color:var(--portaal-bijschrift); font-size:.95rem; line-height:1.65}
html.is-app .app-install-dialog .app-uitleg{margin-top:18px}
html.is-app .app-install-dialog :is(small,.app-step-tx){color:var(--portaal-bijschrift)}
html.is-app .app-install-dialog .app-steps li{opacity:1; transform:none; animation:none}
@media (max-width:380px){
  html.is-app :is(.ov-kaart,.ov-taak){padding:18px}
  html.is-app .app-install-dialog{padding:22px 18px}
  html.is-app .app-tab{font-size:.68rem}
}
/* Op smalle schermen passen een lange indiendatum en Download niet naast
   elkaar binnen een kwartaal. Een eigen regel houdt beide volledig leesbaar. */
@media (max-width:480px){
  html.is-app :is(.dossier-periode,.dossier-sub,.dossier-map,.dossier-titel){min-width:0}
  html.is-app .dossier-titel{overflow-wrap:anywhere}
  html.is-app .dossier-sub > summary:has(.ov-merk){
    min-width:0; grid-template-columns:minmax(0,1fr) auto; grid-template-rows:auto auto auto;
  }
  html.is-app .dossier-sub > summary:has(.ov-merk) .dossier-titel{grid-column:1; grid-row:1}
  html.is-app .dossier-sub > summary:has(.ov-merk) .ov-merk{
    grid-column:1; grid-row:2; min-width:0; max-width:100%; white-space:normal; overflow-wrap:anywhere;
  }
  html.is-app .dossier-sub > summary:has(.ov-merk) .dossier-zip{
    grid-column:1; grid-row:3; min-width:0; max-width:100%; white-space:normal;
  }
  html.is-app .dossier-sub > summary:has(.ov-merk)::after{
    grid-column:2; grid-row:1 / 4; align-self:start;
  }
}

/* Procedures in het dossier (17-9-2026, alleen 0002): stand, te doen en verloop
   per zaak. Label links in uitgespatieerde kapitalen (huisstijl), waarde rechts. */
.proc-regel{display:grid; grid-template-columns:78px minmax(0,1fr); gap:10px; margin:6px 0; font-size:.86rem; line-height:1.45}
.proc-regel > span{font-size:.64rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--text-soft); padding-top:3px}
.proc-regel.is-actie{font-weight:600}
.proc-verloop{list-style:none; margin:10px 0 8px; padding:0 0 0 12px; border-left:2px solid var(--line)}
.proc-verloop li{position:relative; margin:0 0 7px; font-size:.84rem; line-height:1.4}
.proc-verloop li::before{content:""; position:absolute; left:-17px; top:6px; width:8px; height:8px; border-radius:50%; background:var(--gold-ink)}
.proc-verloop li > span{display:block; font-size:.72rem; color:var(--text-soft)}
html.is-app .proc-regel > span, html.is-app .proc-verloop li > span{color:rgba(238,242,248,.55)}
html.is-app .proc-regel{color:rgba(238,242,248,.9)}
html.is-app .proc-regel.is-actie{color:var(--gold-soft)}
html.is-app .proc-verloop{border-left-color:rgba(219,185,104,.28)}
html.is-app .proc-verloop li{color:rgba(238,242,248,.85)}
html.is-app .proc-verloop li::before{background:var(--gold)}

/* Korte eindduur laat eventuele eindgebeurtenissen werken, zonder beweging.
   Ook expliciet scrollende onderdelen volgen de toestelvoorkeur. */
@media (prefers-reduced-motion:reduce){
  html.is-app, html.is-app *, html.is-app *::before, html.is-app *::after{
    scroll-behavior:auto !important;
    animation-duration:.01ms !important; animation-delay:0ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important; transition-delay:0ms !important;
  }
}


/* ---------------------------------------------------------------------------
   REKENINGEN IN DE APP - 18-9-2026
   Jawad: "gestructureerder overzichtelijker luxer / open moet rood".
   Drie lagen per kaart: een kop met het nummer en de stand, daaronder de
   gegevens als label-waardeparen, en onderin een balk met het bedrag en de
   betaalwijzen. De betaalmerken van iDEAL en Apple Pay staan op wit, zoals die
   merken het voorschrijven, en zeggen de klant meteen welke weg hij krijgt.
   --------------------------------------------------------------------------- */
html.is-app .rek-lijst{display:flex; flex-direction:column; gap:14px; list-style:none; margin:0; padding:0}

html.is-app .rek-kaart{position:relative; overflow:hidden; background:linear-gradient(180deg,#0f2449 0%,#0c1d3e 100%);
  border:1px solid #1e3866; border-radius:var(--r-groot); padding:16px 18px 14px}
/* een smalle streep links geeft de stand weer zonder een tweede kleurvlak */
html.is-app .rek-kaart::before{content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:#22406f}
html.is-app .rek-kaart.is-open::before{background:#d2564f}
html.is-app .rek-kaart.is-laat::before{background:#e0483f}
html.is-app .rek-kaart.is-laat{border-color:#5d2b36}

html.is-app .rek-kop{display:flex; align-items:center; justify-content:space-between; gap:10px;
  margin-bottom:12px}
html.is-app .rek-nr{font:600 1.06rem/1.2 var(--serif); color:#f4f7fb;
  letter-spacing:.015em}

/* gegevens onder elkaar als label en waarde: dat leest rustiger dan een zin
   met middenpunten, en de waarden staan netjes onder elkaar */
html.is-app .rek-feiten{margin:0 0 14px; padding:0}
html.is-app .rek-feiten > div{display:flex; justify-content:space-between; gap:14px;
  padding:5px 0; border-bottom:1px solid rgba(255,255,255,.055)}
html.is-app .rek-feiten > div:last-child{border-bottom:0}
html.is-app .rek-feiten dt{margin:0; font-size:.8rem; color:#7f93b0; letter-spacing:.02em}
html.is-app .rek-feiten dd{margin:0; font-size:.86rem; color:#cfdcec; text-align:right}

html.is-app .rek-voet{display:flex; align-items:center; justify-content:space-between; gap:12px;
  flex-wrap:wrap; padding-top:12px; border-top:1px solid rgba(255,255,255,.08)}
html.is-app .rek-bedrag{font:600 1.32rem/1 var(--serif); color:#f4f7fb}
html.is-app .rek-knoppen{display:flex; align-items:center; gap:8px; flex-wrap:wrap}

html.is-app .rek-kijk{display:inline-flex; align-items:center; height:42px; padding:0 16px;
  border:1px solid #2e4d7d; border-radius:var(--r-kaart); color:#cddaea; text-decoration:none;
  font-size:.9rem; background:rgba(255,255,255,.03)}
html.is-app .rek-kijk:active{background:rgba(255,255,255,.09)}

html.is-app .rek-betaal{display:inline-flex; align-items:center; justify-content:center;
  height:42px; padding:0 13px; background:#fff; border:0; border-radius:var(--r-kaart); cursor:pointer;
  box-shadow:0 1px 0 rgba(0,0,0,.25)}
html.is-app .rek-betaal img{display:block; height:26px; width:auto}
html.is-app .rek-betaal:active{transform:translateY(1px)}
html.is-app .rek-betaal.is-bezig,
html.is-app .rek-betaal[disabled]{opacity:.45; pointer-events:none}

/* de standmerken: open en te laat rood, betaald groen, vervallen grijs */
html.is-app .ov-merk.is-rood{background:rgba(224,72,63,.16); color:#ff9b93;
  border:1px solid rgba(255,155,147,.32)}
html.is-app .ov-merk.is-groen{background:rgba(45,180,120,.16); color:#5fd6a0;
  border:1px solid rgba(95,214,160,.32)}
html.is-app .ov-merk.is-grijs{background:rgba(255,255,255,.06); color:#93a4bb;
  border:1px solid rgba(255,255,255,.12)}

/* de tegel bovenaan hetzelfde signaal geven als de kaarten */
html.is-app .ov-tegel.is-laat{border-color:#5d2b36}

/* =======================================================================
   OPENSTAAND-TEGEL OP OVERZICHT - 18-9-2026
   Jawad: "het moet gelijk duidelijk zijn dat er iets openstaat". Rood als er
   iets openstaat (zoals het bolletje op het tabblad), rustig groen als niet.
   ======================================================================= */
html.is-app .ov-account .ov-tegel.ov-rek{display:flex; align-items:center; gap:14px;
  position:relative; overflow:hidden; padding:16px 16px 16px 18px}
html.is-app .ov-rek .ov-rek-body{flex:1; min-width:0; display:block}
html.is-app .ov-rek .ov-rek-body strong{display:block; margin:3px 0 2px}
html.is-app .ov-rek .ov-rek-body small{display:block}
html.is-app .ov-rek .ov-rek-ic{flex:none; width:44px; height:44px; border-radius:50%;
  display:grid; place-items:center; background:rgba(255,255,255,.06); color:var(--gold)}
html.is-app .ov-rek .ov-rek-ic svg{width:22px; height:22px}
html.is-app .ov-rek .ov-rek-actie{flex:none; padding:9px 16px; border-radius:var(--r-pil); font-weight:700;
  font-size:.9rem; letter-spacing:.01em; background:#e5484d; color:#fff;
  box-shadow:0 6px 16px rgba(229,72,77,.35)}
html.is-app .ov-rek .ov-rek-actie[hidden]{display:none}
/* bij een openstaande rekening de knop onder de tekst, over de volle breedte:
   dan past het kopje op één regel en is de knop niet te missen */
html.is-app .ov-account .ov-tegel.ov-rek.is-open{flex-wrap:wrap; row-gap:14px}
html.is-app .ov-rek.is-open .ov-rek-actie{flex:1 0 100%; text-align:center; padding:12px 16px; font-size:1rem}

/* er staat iets open */
html.is-app .ov-account .ov-tegel.ov-rek.is-open{
  background:linear-gradient(135deg, rgba(229,72,77,.24), rgba(229,72,77,.08) 70%);
  border:1px solid rgba(255,107,107,.55); box-shadow:0 10px 28px rgba(229,72,77,.16)}
html.is-app .ov-account .ov-tegel.ov-rek.is-open::before{content:""; position:absolute; left:0; top:0;
  bottom:0; width:4px; background:#e5484d}
html.is-app .ov-rek.is-open .ov-rek-ic{background:rgba(229,72,77,.22); color:#ff8a8a}
html.is-app .ov-rek.is-open .ov-klein{color:#ff9a9a}
html.is-app .ov-account .ov-rek.is-open strong{font-size:1.7rem; line-height:1.15; color:#fff}
html.is-app .ov-rek.is-open small{color:rgba(255,214,214,.85)}
/* te laat: nog een tik feller */
html.is-app .ov-account .ov-tegel.ov-rek.is-open.is-laat{border-color:#ff6b6b;
  background:linear-gradient(135deg, rgba(229,72,77,.34), rgba(229,72,77,.12) 70%)}

/* niets open: rustig, het bonnetje in groen */
html.is-app .ov-rek.is-goed .ov-rek-ic{background:rgba(94,201,141,.14); color:#5ec98d}


/* =======================================================================
   INGEDIEND FEL GROEN - 18-9-2026
   Jawad: "Ingediend fel groen". Gaat voor de eerdere keuze "statussen in
   goud en ivoor, niet in groen": een ingediende aangifte moet in één
   oogopslag als klaar herkenbaar zijn. In behandeling blijft neutraal.
   ======================================================================= */
html.is-app .ov-merk.klaar{background:#22c55e; color:#052e16; border-color:#4ade80;
  font-weight:700; box-shadow:0 0 0 3px rgba(34,197,94,.18), 0 6px 16px rgba(34,197,94,.28)}
html.is-app .ov-merk.klaar::before{content:"\2713\00a0"; font-weight:800}

/* Aanslag (21-9-2026): een aanslag waar wij niets voor hebben ingediend.
   Goud omlijnd: anders dan het groene Ingediend en het neutrale In behandeling. */
html.is-app .ov-merk.aanslag{background:rgba(219,185,104,.14); color:var(--gold-soft);
  border-color:rgba(219,185,104,.45); font-weight:700}

/* Links in een pdf in de kijker (18-9-2026): onzichtbare vlakken over de getekende
   pagina, precies op de plek van de link in de pdf. Bij aantikken een lichte gloed. */
.kijker-link{position:absolute; z-index:2; display:block; border-radius:var(--r-klein); -webkit-tap-highlight-color:transparent}
.kijker-link:active, .kijker-link:focus-visible{background:rgba(193,154,74,.18); outline:2px solid rgba(193,154,74,.6)}

/* Overzicht: de weg naar Aanleveren als er verder niets te doen is (18-9-2026).
   Eén gouden knop, de tweede keuze is een randknop - zoals overal in de app. */
.ov-ga{display:flex; flex-wrap:wrap; gap:10px; margin:14px 0 4px}
.ov-ga .btn{flex:0 1 auto}
@media (max-width:420px){ .ov-ga .btn{flex:1 1 100%} }

/* Ritten: jaarkeuze en download (18-9-2026). De kilometeradministratie moet de
   ondernemer zelf kunnen tonen, en niet alleen over het lopende jaar. */
.rit-jaarbalk{display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin:0 0 14px}
.rit-jaarbalk label{font-size:.78rem; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:rgba(7,23,47,.55)}
.rit-jaarbalk select{width:auto; padding:8px 10px; font:inherit; font-size:var(--fs-sm)}
.rit-jaarbalk .btn{margin-left:auto; padding:8px 16px; font-size:.85rem}
html.is-app .rit-jaarbalk label{color:rgba(227,233,242,.62)}

/* Overzicht: "dit was alles" is gemeld (18-9-2026). Rustige regel, geen kaart -
   er valt niets te doen, het is alleen een bevestiging van wat er al staat. */
.ov-klaar{display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px;
  margin:14px 0 4px; padding:11px 14px; border-radius:var(--r-kaart);
  background:rgba(29,107,69,.10); border:1px solid rgba(29,107,69,.28);
  font-size:var(--fs-sm); line-height:1.45}
.ov-klaar span{flex:1 1 220px}
html.is-app .ov-klaar{background:rgba(70,180,120,.12); border-color:rgba(70,180,120,.32); color:#e6f2ea}

/* ========================================================================
   BEDRAGEN (18-9-2026)
   Een bedrag stond in de app in zes maten: .fact-bedrag 1,14rem,
   .ov-tegel strong 1,3rem, binnen .ov-account 1,15rem, .ov-groot 1,5rem,
   .rek-bedrag 1,32rem en .ov-rek.is-open strong 1,7rem. Dat leest als zes
   soorten getallen terwijl het één soort is: geld.

   En nergens stond tabular-nums, dus in de rekeningenlijst stonden de euro's
   niet onder elkaar - bij een kolom bedragen is dat precies wat je wilt zien.
   Dit blok staat onderaan zodat het van de zes eerdere rondes wint.
   ===================================================================== */
html.is-app .fact-bedrag,
html.is-app .ov-tegel strong,
html.is-app .ov-account strong,
html.is-app .rek-bedrag,
html.is-app .ov-dagen b,
html.is-app .ov-rek strong,
html.is-app .ov-betaal-lijst dd{
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
}
/* Eén maat voor een bedrag dat op zichzelf staat. .ov-groot en de openstaande
   tegel blijven bewust groter: dat zijn de twee plekken waar het bedrag de
   boodschap ís. */
html.is-app .fact-bedrag,
html.is-app .ov-tegel strong,
html.is-app .ov-account strong,
html.is-app .rek-bedrag{font-size:var(--fs-bedrag)}

/* ========================================================================
   LEGE SCHERMEN (18-9-2026)
   Een leeg scherm was in de loop van zes opmaakrondes een gewone kaart
   geworden: zelfde vlak, zelfde rand, zelfde radius als een kaart waar wél
   iets in staat. Daardoor leest "Nog niets verstuurd" als een voorwerp in
   plaats van als afwezigheid, en rekt het blok mee met de lijst eromheen.

   Een lege staat hoort juist LUCHT te hebben: geen vlak, geen rand, een
   medaillon met het icoon (dezelfde vorm als .ov-rust-ic, die stond er al en
   werkt goed), de kop in de schreefletter, en eronder een randknop - er is
   niets dringends aan een leeg scherm.
   ===================================================================== */
html.is-app .leeg{
  background:transparent; border:0; box-shadow:none;
  padding:52px 24px 40px; margin:0; flex:none;
}
html.is-app .leeg svg{
  width:22px; height:22px; margin:0 auto 14px; color:var(--gold);
  box-sizing:content-box; padding:13px; border-radius:var(--r-pil);
  background:rgba(193,154,74,.12); border:1px solid rgba(193,154,74,.3);
}
html.is-app .leeg h4{
  font-family:var(--serif); font-size:1.15rem; font-weight:600;
  letter-spacing:-.005em; color:#f3f6fa; margin:0 0 6px;
}
html.is-app .leeg p{
  font-size:.94rem; line-height:1.5; max-width:32ch; margin:0 auto 18px;
  color:var(--portaal-bijschrift);
}
/* de knop in een lege staat is nooit de hoofdhandeling van het scherm */
html.is-app .leeg .btn-primary{
  background:transparent; color:var(--gold); border:1px solid rgba(193,154,74,.55);
}

/* ========================================================================
   ADMINISTRATIE: eerst het werk, dan de instellingen (18-9-2026)
   Bovenaan twee gelijkwaardige keuzes in plaats van vier grijze knoppen
   waarvan er drie een instelscherm waren.
   ===================================================================== */
.fact-segment{display:flex; gap:4px; margin:0 0 16px; padding:4px;
  background:rgba(227,233,242,.05); border:1px solid var(--portaal-rand);
  border-radius:var(--r-pil)}
.fact-seg{flex:1 1 0; min-height:40px; border:0; border-radius:var(--r-pil);
  background:transparent; color:var(--portaal-bijschrift);
  font:inherit; font-size:.88rem; font-weight:600; cursor:pointer;
  transition:background var(--portaal-overgang), color var(--portaal-overgang)}
.fact-seg.is-aan{background:var(--app-vlak-op); color:#f3f6fa}
.fact-seg:focus-visible{outline:2px solid var(--gold); outline-offset:2px}

/* de instelschermen, onderaan en rustig */
.fact-instellingen{margin:34px 0 0; padding:18px 0 0; border-top:1px solid var(--portaal-rand)}
.fact-instellingen .fact-kopje{display:block; margin:0 0 10px}
.fact-instellingen .fact-balk{margin:0}

/* ========================================================================
   GOUD SPAARZAAM OP HET OVERZICHT (18-9-2026)
   Op één scherm stonden zeven gouden dingen tegelijk: de hoofdtaak, de knop,
   de dagenteller, het rustvinkje, de haarlijn om invoervelden, het tabblad en
   de voetregel. Als alles opvalt, valt niets op.

   Goud houden we voor twee dingen: de handeling die de klant nu moet doen, en
   het merk. Het tellertje en het rustvinkje worden neutraal - een dagenteller
   die nog ver weg is, en een kaart die zegt dat er níéts te doen is, horen
   niet te schreeuwen. Dichtbij de deadline houdt .ov-dagen.is-dichtbij zijn
   eigen kleur; die regel stond er al en blijft staan.
   ===================================================================== */
html.is-app .ov-dagen{
  background:rgba(227,233,242,.05);
  border-color:var(--portaal-rand);
}
html.is-app .ov-dagen b{color:#e3e9f2}
html.is-app .ov-rust-ic{
  background:rgba(227,233,242,.06);
  border:1px solid var(--portaal-rand);
  color:var(--portaal-bijschrift);
}

/* ========================================================================
   BERICHTEN: het gewicht omgedraaid (18-9-2026)
   Het bericht van de klant zelf was het opvallendst (vol wit vlak) en het
   antwoord van zijn fiscalist het rustigst. Dat is precies omgekeerd: de
   klant weet wat hij zelf schreef; hij komt voor het antwoord.

   Links/rechts en de afgeplatte hoek dragen het onderscheid al, dus alleen
   het gewicht wisselt - niet de kant.
   ===================================================================== */
html.is-app .ber.is-zij{
  background:linear-gradient(180deg, rgba(193,154,74,.10), rgba(14,33,69,.92));
  border:1px solid rgba(193,154,74,.28);
  color:#eef3fa;
}
html.is-app .ber.is-ik{
  background:rgba(227,233,242,.07);
  border:1px solid var(--portaal-rand);
  color:#e3e9f2;
}
/* het vinkje en de afzenderregel moeten op die nieuwe vlakken leesbaar blijven */
html.is-app .ber.is-ik .ber-bestand{background:rgba(227,233,242,.12)}
html.is-app .ber-vink.is-gelezen{color:#7fd0ff}

/* ========================================================================
   RITTEN: sluit de teller aan? (18-9-2026)
   Drie standen: sluitend, nog niet sluitend, of een gat in de teller. Dat
   laatste is geen sfeerkleur maar een waarschuwing: er zijn kilometers
   gereden die nergens staan.
   ===================================================================== */
.rit-stand{margin:0 0 16px; padding:13px 16px; border-radius:var(--r-vak);
  background:rgba(227,233,242,.05); border:1px solid var(--portaal-rand);
  font-size:var(--fs-sm); line-height:1.5}
.rit-stand strong{display:block; margin-bottom:3px}
.rit-stand p{margin:4px 0 0; color:var(--portaal-bijschrift)}
.rit-stand ul{margin:6px 0 0; padding-left:18px}
.rit-stand li{margin-bottom:2px}
.rit-stand.is-goed{background:rgba(70,180,120,.10); border-color:rgba(70,180,120,.30)}
.rit-stand.is-gat{background:rgba(193,154,74,.14); border-color:rgba(193,154,74,.45);
  border-left:3px solid var(--gold)}

/* btw per factuurregel (18-9-2026): een smal keuzelijstje naast prijs en
   aantal, zodat 21% arbeid en 9% materiaal op één factuur kunnen */
.fact-regelbtw{flex:1 1 150px; min-width:0; font-size:.85rem}
.fact-extraregel .fact-rij{gap:8px}

/* ========================================================================
   AANLEVEREN (18-9-2026, visuele ronde)
   Een kop en één regel in plaats van een alinea; de verwijderknop bij een
   gekozen bestand is een kaal kruisje in de bijschriftkleur - het tikvlak
   blijft 44 px, alleen de zware donkere cirkel is weg.
   ===================================================================== */
html.is-app .lever-kop{
  font-family:var(--serif); font-size:1.35rem; font-weight:600; line-height:1.2;
  letter-spacing:-.005em; color:#f3f6fa; margin:0 0 4px;
}
html.is-app .lever-uitleg{
  font-size:var(--fs-sm); color:var(--portaal-bijschrift); margin:0 0 16px;
}
html.is-app .filelist-weg{
  background:transparent; color:var(--portaal-bijschrift); font-size:1.25rem;
}
html.is-app .filelist-weg:hover, html.is-app .filelist-weg:active{
  background:rgba(255,138,138,.12); color:#ff8a8a;
}

/* ========================================================================
   DOSSIER: zoeken ingeklapt, pijltjes kaal (18-9-2026, visuele ronde)
   ===================================================================== */
/* de ene regel die het zoekpaneel vervangt tot je erop tikt */
html.is-app .dos-zoek-klap{margin:0 0 18px}
html.is-app .dos-zoek-klap > summary{
  list-style:none; cursor:pointer; display:flex; align-items:center; gap:12px;
  min-height:48px; padding:0 14px; border-radius:var(--r-vak);
  background:rgba(227,233,242,.05); border:1px solid var(--portaal-rand);
  color:var(--portaal-bijschrift); font-size:var(--fs-sm);
}
html.is-app .dos-zoek-klap > summary::-webkit-details-marker{display:none}
html.is-app .dos-zoek-klap > summary:focus-visible{outline:2px solid var(--gold); outline-offset:2px}
html.is-app .dos-zoek-ic{flex:none; width:20px; height:20px; display:block}
html.is-app .dos-zoek-ic svg{width:100%; height:100%; display:block}
html.is-app .dos-zoek-tekst{flex:1 1 auto; color:#e3e9f2}
html.is-app .dos-zoek-tel{flex:none; font-variant-numeric:tabular-nums}
html.is-app .dos-zoek-klap[open] > summary{
  border-bottom-left-radius:0; border-bottom-right-radius:0; border-bottom-color:transparent;
}
/* het paneel zelf: nu een vervolg op de regel erboven, geen losse kaart met eigen kop */
html.is-app .dos-zoek-klap[open] .dos-zoeken{
  border-top-left-radius:0; border-top-right-radius:0; margin-top:0;
  border-color:var(--portaal-rand); background:rgba(227,233,242,.04);
}
html.is-app .dos-zoek-klap .dos-zoeken-kop{display:none}

/* Het pijltje bij elke map was een gouden ring van 30 px, en opengeklapt een
   gouden verloop met schaduw - zeven keer goud op één scherm. Nu een kaal
   pijltje in de bijschriftkleur, goud alleen als de map openstaat. Het
   tikvlak blijft even groot. */
html.is-app .dossier-periode > summary::after,
html.is-app .dossier-sub > summary::after,
html.is-app .dossier-map > summary::after{
  border:0; background-color:transparent; box-shadow:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2396a6bd' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9.5l6 6 6-6'/%3E%3C/svg%3E");
  background-size:16px;
}
html.is-app .dossier-periode[open] > summary::after,
html.is-app .dossier-sub[open] > summary::after,
html.is-app .dossier-map[open] > summary::after{
  transform:rotate(180deg); border:0; box-shadow:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c19a4a' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9.5l6 6 6-6'/%3E%3C/svg%3E") center/16px no-repeat;
}

/* ========================================================================
   KLEINE DINGEN (18-9-2026, visuele ronde)
   ===================================================================== */
/* de tabbalk liet de inhoud eronder doorschemeren: op .9 zie je tekst door
   de balk heen. Bijna dekkend, de blur blijft voor de rand. */
html.is-app .app-tabs{background:rgba(11,22,38,.96)}

/* Bijschriften stonden in tien doorzichtigheden en drie grijzen door elkaar.
   Eén token, overal; de uitzondering is de gedimde tekst in een uitgeschakelde
   staat, die mag zwakker. */
html.is-app small,
html.is-app .ov-klein,
html.is-app .fact-stil,
html.is-app .filelist-maat,
html.is-app .rit-hint,
html.is-app .dossier-titel em,
html.is-app .zend-lijst small,
html.is-app .ber time{color:var(--portaal-bijschrift)}

/* De regel op 3459 gaf de EERSTE dropzone-knop een goudzachte tekstkleur, uit
   de tijd dat dat de randknop "Bestanden kiezen" was. Nu staat daar de gouden
   hoofdknop en werd zijn tekst daardoor onleesbaar op goud. (18-9-2026) */
html.is-app .dropzone-btns .btn-primary,
html.is-app .dropzone-btns .btn-primary:first-child{color:var(--ink); border-color:transparent}
html.is-app .dropzone-btns .btn-primary:hover{background:var(--gold-soft); color:var(--ink)}

/* B11 (20-9-2026, avond). B10 maakte de hoofdknop SITEBREED marineblauw. In de
   app is de ondergrond zelf marineblauw (#07172f), dus daar verdween de knop:
   "Scannen met camera" werd een donker vlak zonder leesbare tekst (de regel
   hierboven zet de letters daar bewust op var(--ink), wat alleen klopt op goud)
   en "Stukken versturen" werd een kale tekstregel. De app houdt dus zijn gouden
   hoofdknop; B10 geldt alleen voor de website. Aanmelden, bevestigen en de
   inlogkaart in de app hangen aan dezelfde .btn-primary. */
html.is-app .btn-primary{background:var(--gold); color:#231703; box-shadow:none}
html.is-app .btn-primary:hover{background:var(--gold-soft); color:#231703}
/* En de haarlijn van B10 hoort niet in de app: daar is .btn-ghost nog een echte
   randknop ("Bestanden kiezen"), dus het streepje eronder leest als een fout. */
html.is-app .btn-ghost::after, html.is-app .btn-ghost-light::after{display:none}

/* B12 (20-9-2026, Jawad: "onoverzichtelijk, teveel witte tekst, allemaal
   hetzelfde"). De mapregels in het dossier (Vaste stukken, Overig en de mappen
   onder een kwartaal) stonden als zeven identieke kaarten onder elkaar, met de
   naam vet wit op regel 1 en het aantal wit-grijs op regel 2. Nu staan naam en
   aantal op EEN regel en is het aantal een gouden cijfer in een pil: de kaart
   wordt half zo hoog en het oog leest eerst de naam, dan pas het getal. */
html.is-app .dossier-sub{padding:0 13px; border-color:rgba(219,185,104,.16)}
/* nowrap: bij een lange mapnaam ("Brieven Belastingdienst") sprong het
   pijltje anders naar een tweede regel; de naam mag zelf afbreken. */
html.is-app .dossier-sub > summary{padding:11px 0; gap:10px; flex-wrap:nowrap}
html.is-app .dossier-sub > summary .dossier-titel{overflow-wrap:anywhere}
html.is-app .dossier-sub > summary .dossier-titel{flex:1 1 auto; min-width:0;
  flex-direction:row; align-items:center; gap:12px; font-weight:600; font-size:.92rem}
html.is-app .dossier-sub > summary .dossier-titel em{margin-left:auto; flex:0 0 auto;
  padding:3px 10px; border:1px solid rgba(219,185,104,.32); border-radius:999px;
  font-size:.72rem; font-weight:700; color:rgba(219,185,104,.85);
  font-variant-numeric:tabular-nums}
html.is-app .dossier-sub > summary::after{width:22px; height:22px; background-size:11px}

/* B13 (20-9-2026): de kennisartikelen dragen op de home een zichtbare datum.
   Een kantoor dat schrijft en bijhoudt leest als een adviseur, niet als een
   administratiekantoor. Klein, gespatieerd, in de kleur van de haarlijnen. */
.kennis-bij{margin:14px 0 0; font-size:.74rem; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:var(--gold-ink)}

/* B14 (21-9-2026, Jawad: "nu een te lange scroll, kan het niet links en rechts
   scrollen?"). Op de telefoon was de home 13,8 schermen lang geworden nadat het
   advieswerk erbij kwam. De drie registers (advies, Belastingdienst, kennis)
   liggen daar nu naast elkaar op een veegbaan in plaats van onder elkaar: elk
   item 84% breed, zodat het volgende item er half naast staat en zichtbaar is
   dat er meer is. De vormtaal blijft het register - gouden lijn erboven, gouden
   nummer, haarlijnen - alleen staat de haarlijn nu rechts van elk item in
   plaats van eronder. Geen kaarten, geen schaduwen, geen bolletjes.
   ⛔ Alleen op de telefoon: vanaf 721px blijven het gewone registers. */
@media (max-width:720px){
  .inv-lijst, .kennis-register{
    display:flex; flex-wrap:nowrap; gap:0;
    overflow-x:auto; overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory; scroll-padding-left:22px;
    margin-inline:-22px; padding-inline:22px;
    scrollbar-width:none; -ms-overflow-style:none;
  }
  .inv-lijst::-webkit-scrollbar, .kennis-register::-webkit-scrollbar{display:none}
  .inv-lijst > li, .kennis-kolom{
    flex:0 0 84%; scroll-snap-align:start; min-width:0;
    border-bottom:0; border-left:0; padding:0 18px 0 0; margin-right:18px;
    border-right:1px solid var(--line);
  }
  .inv-lijst > li:last-child, .kennis-kolom:last-child{border-right:0; margin-right:0; padding-right:0}
  .kennis-register{padding-top:24px}
  .kennis-kolom:nth-child(odd), .kennis-kolom:nth-child(even){padding-left:0; padding-right:18px}
  .kennis-kolom:last-child{padding-right:0}
  .inv-lijst a{padding:22px 0}
  /* de veegbaan mag niet zelf de pagina zijwaarts laten schuiven */
  .inv-grid, .section > .container{overflow-x:clip}
}

/* Mijn gegevens: wat verplicht op een factuur staat (art. 35a Wet OB, art. 27
   Handelsregisterwet) krijgt een rood sterretje; leeg = rode rand (21-9-2026) */
.fact-verplicht{color:#d93636; font-weight:700}
.fact-legenda{margin:0 0 10px}
.fact-leeg-label{color:#d93636}
#fact-mij input.fact-leeg{border-color:#d93636 !important; box-shadow:0 0 0 1px #d93636}
html.is-app .fact-verplicht, html.is-app .fact-leeg-label{color:#ff6b6b}
html.is-app #fact-mij input.fact-leeg{border-color:#ff6b6b !important; box-shadow:0 0 0 1px #ff6b6b}
/* IBAN: niet wettelijk verplicht (dus niet rood), wel nodig voor de betaalregel: goud */
.fact-nodig-label{color:#866a2e}
#fact-mij input.fact-nodig{border-color:#c19a4a !important; box-shadow:0 0 0 1px #c19a4a}
.fact-nodig-hint{display:block; margin-top:6px; font-size:.8rem; line-height:1.4; color:#866a2e}
html.is-app .fact-nodig-label, html.is-app .fact-nodig-hint{color:#d4b06a}

/* iOS-app (22-9-2026): privacy en voorwaarden onder het inlogvak, alleen in
   de app uit de App Store (richtlijn 5.1.1(i) van Apple). */
.app-login-juridisch{margin:18px 0 0; text-align:center; font-size:13px; color:#8a93a0}
.app-login-juridisch a{color:inherit; text-decoration:underline; text-underline-offset:3px}