/* ==========================================================================
   PORTAAL IN DE VORMTAAL VAN DE iOS-APP (25-9-2026, Jawad: "kan het
   klantportaal in de website aansluiten bij de iOS-app hoe dat eruit ziet",
   daarna "ja": het portaal krijgt de kaarten van de app, de openbare site
   houdt de registerstijl zonder kaarten).

   De maten en kleuren komen uit App-iOS/ios/App/Valorem/Thema.swift:
   - achtergrond: verloop #0B1F3F > inkt > diep, gouden gloed rechtsboven,
     het V-monogram heel zacht als watermerk (ValoremAchtergrond, HoofdAchtergrond);
   - kop: alleen de V links en de initialen rechts, elk in een rond glazen
     knopje met een gouden haarlijn (KopKnopRond), geen woordmerk en geen balk;
   - tabbalk: een zwevende capsule van 56 hoog met een lichte pil achter het
     gekozen tabblad (ValoremTabBalk);
   - kaart: verloop #11284F > #0C1D3D, haarfijne witte rand, hoek 20, zachte
     schaduw; een taak met nadruk krijgt een gouden rand (KaartStijl);
   - sectiekop: goud, kapitalen, spatiëring 1,4, lijn die wegloopt (SectieKop);
   - knoppen: metaalgoud met donkere tekst (GoudKnop), goud omlijnd (LijnKnop).

   Alleen het portaal (html.is-portaal) en als laatste stylesheet geladen
   (build_valorem.py). Het voorvoegsel html.is-app.is-portaal.is-portaal geeft
   deze regels voorrang op de gestapelde html.is-app(.is-app)-regels in
   styles.css, zonder !important.
   ========================================================================== */
html.is-app.is-portaal{
  --ios-inkt:#07172f;
  --ios-diep:#050f22;
  --ios-veld:#081a36;
  --ios-veldrand:rgba(77,96,127,.7);
  --ios-goud:#c19a4a;
  --ios-goud-zacht:#dbb968;
  --ios-goud-licht:#ebd49a;
  --ios-goud-inkt:#231703;
  --ios-tekst:#f4f6fa;
  --ios-zacht:#b9c6da;
  --ios-flauw:rgba(185,198,218,.6);
  --ios-kaart:linear-gradient(180deg, #11284f 0%, #0c1d3d 100%);
  --ios-held:linear-gradient(135deg, #1a3c78 0%, #0f2551 50%, #0a1a3a 100%);
  --ios-goudverloop:linear-gradient(180deg, #f0db9e 0%, #d4b062 34%, #b88f3e 68%, #a07a2e 100%);
  --ios-hoek:20px;
  background:var(--ios-inkt);
}

/* ---- achtergrond ------------------------------------------------------- */
html.is-app.is-portaal.is-portaal body,
html.is-app.is-portaal.is-portaal #portal-app,
html.is-app.is-portaal.is-portaal .section{background:transparent}
html.is-app.is-portaal.is-portaal body::before{
  content:""; position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(420px 420px at 92% -2%, rgba(193,154,74,.14), rgba(193,154,74,0) 72%),
    radial-gradient(380px 380px at 0% 55%, rgba(30,63,122,.35), rgba(30,63,122,0) 72%),
    linear-gradient(180deg, #0b1f3f 0%, #07172f 48%, #050f22 100%);
}
/* het V-monogram als watermerk rechtsboven, dat heel langzaam "ademt" */
html.is-app.is-portaal.is-portaal body::after{
  content:""; position:fixed; z-index:-1; pointer-events:none;
  top:calc(env(safe-area-inset-top, 0px) + 40px); right:-70px; width:280px; height:280px;
  background:url(mark-valorem-glyph.png) no-repeat center / contain;
  opacity:.08; filter:saturate(.8);
}
@media (prefers-reduced-motion:no-preference){
  html.is-app.is-portaal.is-portaal body::after{animation:ios-adem 9s ease-in-out infinite alternate}
}
@keyframes ios-adem{from{opacity:.07} to{opacity:.12}}
@media (min-width:900px){
  html.is-app.is-portaal.is-portaal body::after{right:max(-70px, calc(50% - 560px)); width:340px; height:340px}
}

/* ---- kop: V links, initialen rechts, geen balk ------------------------- */
html.is-app.is-portaal.is-portaal .site-header{background:transparent; border-bottom:0; box-shadow:none}
@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  html.is-app.is-portaal.is-portaal .site-header.is-gescrold{background:rgba(7,23,47,.55);
    -webkit-backdrop-filter:blur(20px) saturate(1.4); backdrop-filter:blur(20px) saturate(1.4);
    border-bottom:0}
}
html.is-app.is-portaal.is-portaal .nav{min-height:56px}
html.is-app.is-portaal.is-portaal.is-binnen .brand-name{display:none}
html.is-app.is-portaal.is-portaal .brand-mark,
html.is-app.is-portaal.is-portaal .klant-knop{
  width:38px; height:38px; border-radius:50%;
  background:rgba(7,23,47,.72);
  border:.8px solid rgba(193,154,74,.42); border-bottom-color:rgba(193,154,74,.14);
  box-shadow:0 3px 8px rgba(0,0,0,.35);
}
html.is-app.is-portaal.is-portaal .brand-mark::after{display:none}
html.is-app.is-portaal.is-portaal .brand-mark img{width:18px; height:18px}
html.is-app.is-portaal.is-portaal .klant-knop{color:var(--ios-goud-licht); font-family:var(--serif);
  font-size:14px; font-weight:600; letter-spacing:0}
html.is-app.is-portaal.is-portaal .klant-knop[aria-expanded="true"]{background:rgba(7,23,47,.9);
  border-color:var(--ios-goud-zacht); color:var(--ios-goud-licht); box-shadow:0 0 0 3px rgba(219,185,104,.14)}

/* ---- tabbalk: zwevende capsule ----------------------------------------- */
html.is-app.is-portaal.is-portaal .app-tabs{
  left:16px; right:16px; bottom:max(10px, calc(env(safe-area-inset-bottom, 0px) - 12px));
  height:56px; padding:0 4px; gap:0; justify-content:stretch;
  border-radius:28px;
  background:rgba(7,23,47,.78);
  -webkit-backdrop-filter:blur(20px) saturate(1.4); backdrop-filter:blur(20px) saturate(1.4);
  border:.8px solid rgba(193,154,74,.3); border-bottom-color:rgba(193,154,74,.1);
  box-shadow:0 10px 30px rgba(0,0,0,.45);
}
html.is-app.is-portaal.is-portaal .app-tab{
  flex:1 1 0; min-height:0; margin:5px 1px; padding:0; gap:3px; justify-content:center;
  border-radius:999px; background:none;
  color:rgba(185,198,218,.72); font-family:var(--sans); font-size:10px; font-weight:600; letter-spacing:.01em; line-height:12px;
  transition:background-color .2s ease, color .2s ease, transform .12s ease;
}
html.is-app.is-portaal.is-portaal .app-tab svg{width:22px; height:22px; stroke-width:1.8; color:inherit}
html.is-app.is-portaal.is-portaal .app-tab.aan{background:rgba(255,255,255,.11); color:var(--ios-goud-zacht); font-weight:600}
html.is-app.is-portaal.is-portaal .app-tab.aan svg{color:var(--ios-goud-zacht); stroke-width:2.1}
html.is-app.is-portaal.is-portaal .app-tab:active{transform:scale(.94)}
html.is-app.is-portaal.is-portaal .app-tel{top:4px; left:calc(50% + 7px); background:#e5706b}
@media (min-width:700px){
  html.is-app.is-portaal.is-portaal .app-tabs{left:50%; right:auto; width:min(520px, calc(100% - 32px)); transform:translateX(-50%)}
}
/* ruimte onderaan voor de zwevende balk */
html.is-app.is-portaal.is-portaal #portal-app{padding-bottom:calc(100px + max(10px, env(safe-area-inset-bottom, 0px)))}

/* ---- kaarten ------------------------------------------------------------ */
html.is-app.is-portaal.is-portaal :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,.dos-zoeken,.ov-deadline){
  background:var(--ios-kaart);
  border:.8px solid rgba(255,255,255,.075); border-top-color:rgba(255,255,255,.12);
  border-radius:var(--ios-hoek);
  box-shadow:0 4px 8px rgba(0,0,0,.14);
}
/* de belangrijkste taak: gouden rand en gloed, de "held" van het overzicht */
html.is-app.is-portaal.is-portaal :is(.ov-taak,.ov-kaart).is-hoofdtaak{
  background:var(--ios-held);
  border:1.1px solid rgba(219,185,104,.7); border-top-width:1.1px;
  box-shadow:0 4px 14px rgba(193,154,74,.09);
}
html.is-app.is-portaal.is-portaal .ov-taak.is-klaar{background:var(--ios-kaart)}
html.is-app.is-portaal.is-portaal .dossier-periode[open]{border-color:rgba(193,154,74,.42)}
html.is-app.is-portaal.is-portaal .dossier-sub{border-radius:14px; border-color:rgba(255,255,255,.07)}
html.is-app.is-portaal.is-portaal .dropzone.is-over{background:rgba(193,154,74,.14); border-color:var(--ios-goud)}

/* ---- koppen ------------------------------------------------------------- */
/* sectiekop: goud, kapitalen, lijn die wegloopt */
html.is-app.is-portaal.is-portaal .ov-kop{
  display:flex; align-items:center; gap:8px; margin:26px 0 12px;
  font-family:var(--sans); font-size:11px; font-weight:600; letter-spacing:.13em; text-transform:uppercase;
  color:var(--ios-goud-zacht);
}
html.is-app.is-portaal.is-portaal .ov-kop::after{content:""; flex:1 1 auto; height:.7px; min-width:24px;
  background:linear-gradient(90deg, rgba(193,154,74,.4), rgba(193,154,74,0))}
html.is-app.is-portaal.is-portaal .eyebrow{color:var(--ios-goud-zacht); letter-spacing:.13em}
html.is-app.is-portaal.is-portaal .ov-welkom h2{font-size:clamp(1.75rem,6.4vw,2.1rem); color:var(--ios-tekst)}

/* ---- knoppen ------------------------------------------------------------ */
html.is-app.is-portaal.is-portaal .btn-primary,
html.is-app.is-portaal.is-portaal .btn-primary:hover{
  background:var(--ios-goudverloop); color:var(--ios-goud-inkt); border:0;
  border-radius:14px; min-height:50px; font-weight:600;
  box-shadow:0 5px 12px rgba(193,154,74,.28), inset 0 1px 0 rgba(255,255,255,.5);
}
html.is-app.is-portaal.is-portaal .btn-primary:hover{filter:brightness(1.04)}
html.is-app.is-portaal.is-portaal .btn-primary:active{transform:scale(.975); opacity:.9}
html.is-app.is-portaal.is-portaal .btn-primary:disabled{opacity:.45; box-shadow:none}
html.is-app.is-portaal.is-portaal .btn-ghost{
  background:rgba(7,23,47,.35); color:var(--ios-goud-zacht);
  border:.9px solid rgba(193,154,74,.55); border-radius:14px; min-height:46px;
}
html.is-app.is-portaal.is-portaal .btn-ghost:hover{background:rgba(193,154,74,.1); color:var(--ios-goud-licht)}

/* ---- invoervelden (Invoerveld) ------------------------------------------ */
html.is-app.is-portaal.is-portaal :is(input:not([type=checkbox]):not([type=radio]):not([type=file]),select,textarea){
  background:var(--ios-veld); border:1px solid var(--ios-veldrand); border-radius:12px; color:var(--ios-tekst);
}
html.is-app.is-portaal.is-portaal :is(input,select,textarea):focus-visible{border-color:rgba(193,154,74,.6); outline:0;
  box-shadow:0 0 0 3px rgba(193,154,74,.14)}

/* ---- overzicht: de vaste kopjes (OverzichtScherm.blok in de app) -------- */
html.is-app.is-portaal{
  --ios-vragen:#e8a64e; --ios-facturen:#e5706b; --ios-sorteren:#7fa8e8; --ios-btw:#5cc593;
  --ios-groen:#5cc593; --ios-oranje:#e8a64e; --ios-rood:#e5706b;
}
html.is-app.is-portaal.is-portaal .ios-kop{display:flex; align-items:center; gap:10px; margin:24px 0 10px; min-height:20px}
html.is-app.is-portaal.is-portaal .ios-kop-streep{flex:0 0 3px; width:3px; height:13px; border-radius:2px; background:var(--ios-accent, var(--ios-goud))}
html.is-app.is-portaal.is-portaal .ios-kop.is-vragen{--ios-accent:var(--ios-vragen)}
html.is-app.is-portaal.is-portaal .ios-kop.is-facturen{--ios-accent:var(--ios-facturen)}
html.is-app.is-portaal.is-portaal .ios-kop.is-sorteren{--ios-accent:var(--ios-sorteren)}
html.is-app.is-portaal.is-portaal .ios-kop.is-btw{--ios-accent:var(--ios-btw)}
html.is-app.is-portaal.is-portaal .ios-kop-titel{margin:0; font-family:var(--sans); font-size:11px; font-weight:600; line-height:1.3;
  letter-spacing:.13em; text-transform:uppercase; color:var(--ios-goud-zacht); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0}
html.is-app.is-portaal.is-portaal .ios-kop-aantal{font-family:var(--serif); font-size:14px; font-weight:600; color:var(--ios-goud-licht);
  font-variant-numeric:tabular-nums}
html.is-app.is-portaal.is-portaal .ios-kop-lijn{flex:1 1 auto; min-width:16px; height:.7px;
  background:linear-gradient(90deg, rgba(193,154,74,.4), rgba(193,154,74,0))}
html.is-app.is-portaal.is-portaal .ios-kop-geen{display:inline-flex; align-items:center; gap:5px; flex:0 0 auto;
  font-size:13.5px; font-weight:500; color:var(--ios-groen)}
html.is-app.is-portaal.is-portaal .ios-kop-geen svg{width:13px; height:13px}
html.is-app.is-portaal.is-portaal .ios-kop [hidden]{display:none}

/* het accentvlak: rustig, streep links in de accentkleur */
html.is-app.is-portaal.is-portaal .ios-vlak{position:relative; padding:0 16px 0 18px; margin:0 0 4px;
  border-radius:18px; background:rgba(14,33,69,.32); border:.6px solid rgba(53,75,106,.75)}
html.is-app.is-portaal.is-portaal .ios-vlak::before{content:""; position:absolute; left:1px; top:14px; bottom:14px; width:3px;
  border-radius:2px; background:var(--ios-accent, var(--ios-goud)); opacity:.9}
html.is-app.is-portaal.is-portaal .ios-vlak.is-facturen{--ios-accent:var(--ios-facturen)}
html.is-app.is-portaal.is-portaal .ios-vlak.is-sorteren{--ios-accent:var(--ios-sorteren)}
html.is-app.is-portaal.is-portaal .ios-vlak.is-btw{--ios-accent:var(--ios-btw)}
html.is-app.is-portaal.is-portaal .ios-vlak[hidden]{display:none}

/* een regel: medaillon, tekst, waarde, pijltje */
html.is-app.is-portaal.is-portaal .ios-regel{display:flex; align-items:center; gap:14px; width:100%; min-height:62px;
  padding:13px 0; margin:0; border:0; background:none; color:var(--ios-tekst); text-align:left; font:inherit; cursor:default}
html.is-app.is-portaal.is-portaal button.ios-regel{cursor:pointer}
html.is-app.is-portaal.is-portaal button.ios-regel:active{opacity:.75}
html.is-app.is-portaal.is-portaal .ios-regel + .ios-regel{border-top:.6px solid rgba(53,75,106,.75)}
html.is-app.is-portaal.is-portaal .ios-regel-tekst{flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:2px}
html.is-app.is-portaal.is-portaal .ios-regel-tekst strong{font-size:15px; font-weight:500; line-height:1.3; color:var(--ios-tekst);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
html.is-app.is-portaal.is-portaal .ios-regel-tekst small{font-size:12px; line-height:1.35; color:var(--ios-zacht)}
html.is-app.is-portaal.is-portaal .ios-regel-tekst small.is-rood{color:var(--ios-rood)}
html.is-app.is-portaal.is-portaal .ios-regel-waarde{flex:0 0 auto; font-family:var(--serif); font-size:17px; font-weight:600;
  font-variant-numeric:tabular-nums; color:var(--ios-tekst)}
html.is-app.is-portaal.is-portaal .ios-regel-waarde.is-rood{color:var(--ios-rood)}
html.is-app.is-portaal.is-portaal .ios-pijl{flex:0 0 7px; width:7px; height:7px; margin-left:-4px; border-right:1.6px solid var(--ios-goud-zacht);
  border-top:1.6px solid var(--ios-goud-zacht); transform:rotate(45deg); opacity:.8}
html.is-app.is-portaal.is-portaal .ios-medaillon{flex:0 0 36px; width:36px; height:36px; border-radius:50%; display:grid; place-items:center;
  background:rgba(7,23,47,.3); border:.8px solid color-mix(in srgb, var(--ios-accent, var(--ios-goud)) 50%, transparent);
  color:var(--ios-accent, var(--ios-goud-zacht))}
html.is-app.is-portaal.is-portaal .ios-medaillon svg{width:19px; height:19px}
html.is-app.is-portaal.is-portaal .ios-medaillon.is-fout{--ios-accent:var(--ios-zacht)}
html.is-app.is-portaal.is-portaal .ios-regel.is-laden{min-height:62px}
html.is-app.is-portaal.is-portaal .ios-laadbalk{display:block; width:60%; height:11px; border-radius:4px; background:rgba(255,255,255,.07);
  animation:ios-laad 1.4s ease-in-out infinite}
@keyframes ios-laad{50%{opacity:.45}}

/* label "Ingediend" (StatusLabel .klaar) */
html.is-app.is-portaal.is-portaal .ios-label{flex:0 0 auto; padding:4px 10px; border-radius:999px; font-size:11px; font-weight:600;
  letter-spacing:.04em; text-transform:uppercase}
html.is-app.is-portaal.is-portaal .ios-label.is-klaar{color:var(--ios-groen); background:rgba(92,197,147,.12); border:.8px solid rgba(92,197,147,.35)}
/* 24-10-2026: registratie buitenlandse onderneming */
html.is-app.is-portaal.is-portaal .ios-label.is-actie{color:#e8c36a; background:rgba(193,154,74,.14); border:.8px solid rgba(193,154,74,.45)}
html.is-app.is-portaal.is-portaal .ios-label.is-bezig{color:#9fb7e0; background:rgba(120,150,210,.12); border:.8px solid rgba(120,150,210,.35)}
html.is-app.is-portaal.is-portaal .ios-registratie-actie{margin:0; padding:2px 16px 14px 66px; font-size:14px; line-height:1.5; color:rgba(238,242,248,.86)}
html.is-app.is-portaal.is-portaal .ios-registratie-actie span{display:block; font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:#c19a4a; margin-bottom:2px}

/* de aftelring */
html.is-app.is-portaal.is-portaal .ios-ring{position:relative; flex:0 0 46px; width:46px; height:46px; display:flex; flex-direction:column;
  align-items:center; justify-content:center; line-height:1}
html.is-app.is-portaal.is-portaal .ios-ring svg{position:absolute; inset:0; width:100%; height:100%; transform:rotate(-90deg)}
html.is-app.is-portaal.is-portaal .ios-ring-bak{fill:none; stroke:rgba(255,255,255,.1); stroke-width:3}
html.is-app.is-portaal.is-portaal .ios-ring-deel{fill:none; stroke:currentColor; stroke-width:3; stroke-linecap:round}
html.is-app.is-portaal.is-portaal .ios-ring.is-groen{color:var(--ios-groen)}
html.is-app.is-portaal.is-portaal .ios-ring.is-oranje{color:var(--ios-oranje)}
html.is-app.is-portaal.is-portaal .ios-ring.is-rood{color:var(--ios-rood)}
html.is-app.is-portaal.is-portaal .ios-ring b{position:relative; font-family:var(--serif); font-size:14px; font-weight:600; color:var(--ios-tekst)}
html.is-app.is-portaal.is-portaal .ios-ring small{position:relative; font-size:8px; color:var(--ios-zacht); margin-top:1px}

/* de begroeting: ruimte zoals de app, geen lijnen eromheen */
html.is-app.is-portaal.is-portaal .ov-welkom{padding:4px 2px 4px}
html.is-app.is-portaal.is-portaal .ov-voet{margin-top:34px; opacity:.8}

/* ---- dossier: stand van zaken (StandKaart) ------------------------------ */
html.is-app.is-portaal.is-portaal .ios-stand{margin:12px 0 14px; padding:16px; border-radius:16px;
  background:rgba(14,33,69,.6); border:.8px solid rgba(193,154,74,.28)}
html.is-app.is-portaal.is-portaal .ios-stand-kop,
html.is-app.is-portaal.is-portaal .ios-jc-kop{display:flex; align-items:center; gap:7px; margin:0 0 14px;
  font-size:10px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--ios-goud)}
html.is-app.is-portaal.is-portaal .ios-stand-kop svg,
html.is-app.is-portaal.is-portaal .ios-jc-kop svg{width:13px; height:13px}
html.is-app.is-portaal.is-portaal .ios-stand-lijst{list-style:none; margin:0; padding:0}
html.is-app.is-portaal.is-portaal .ios-stand-lijst li{position:relative; padding:0 0 12px 19px; margin:0;
  font-size:15px; line-height:1.55; color:rgba(244,246,250,.92)}
html.is-app.is-portaal.is-portaal .ios-stand-lijst li:last-child{padding-bottom:0}
html.is-app.is-portaal.is-portaal .ios-stand-lijst li::before{content:""; position:absolute; left:0; top:8px; width:7px; height:7px;
  border-radius:50%; background:rgba(193,154,74,.45)}
html.is-app.is-portaal.is-portaal .ios-stand-lijst li.is-nu::before{background:var(--ios-goud)}
html.is-app.is-portaal.is-portaal .ios-stand-lijst li:not(:last-child)::after{content:""; position:absolute; left:3px; top:18px; bottom:0;
  width:1px; background:rgba(193,154,74,.22)}
html.is-app.is-portaal.is-portaal .ios-stand-lijst b{font-weight:500; color:var(--ios-goud-licht)}

/* ---- dossier: uw jaar in cijfers (JaarCijfersKaart) --------------------- */
html.is-app.is-portaal.is-portaal .ios-jc{margin:4px 0 14px}
html.is-app.is-portaal.is-portaal .ios-jc[hidden]{display:none}
html.is-app.is-portaal.is-portaal .ios-jc-kaart{padding:16px; border-radius:16px; background:rgba(14,33,69,.6);
  border:.8px solid rgba(193,154,74,.28)}
html.is-app.is-portaal.is-portaal .ios-jc-kop{font-size:11px; letter-spacing:.12em}
html.is-app.is-portaal.is-portaal .ios-jc-tegels{display:grid; grid-template-columns:1fr 1fr; gap:10px}
html.is-app.is-portaal.is-portaal .ios-jc-tegel{display:flex; flex-direction:column; gap:4px; min-height:92px; padding:12px;
  border-radius:12px; background:rgba(7,23,47,.35); min-width:0}
html.is-app.is-portaal.is-portaal .ios-jc-tegel span{font-size:10px; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ios-zacht); line-height:1.3}
html.is-app.is-portaal.is-portaal .ios-jc-tegel strong{font-family:var(--serif); font-size:17px; font-weight:600; color:var(--ios-goud-licht);
  font-variant-numeric:tabular-nums; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
html.is-app.is-portaal.is-portaal .ios-jc-tegel small{font-size:12px; line-height:1.35; color:var(--ios-zacht)}
html.is-app.is-portaal.is-portaal .ios-jc-staven{display:flex; align-items:flex-end; gap:10px; height:66px; margin-top:14px}
html.is-app.is-portaal.is-portaal .ios-jc-staven span{flex:1 1 0; display:flex; flex-direction:column; align-items:center; gap:4px}
html.is-app.is-portaal.is-portaal .ios-jc-staven i{display:block; width:100%; border-radius:999px; background:rgba(193,154,74,.75)}
html.is-app.is-portaal.is-portaal .ios-jc-staven i.is-leeg{background:rgba(185,198,218,.15)}
html.is-app.is-portaal.is-portaal .ios-jc-staven small{font-size:12px; color:var(--ios-zacht)}
html.is-app.is-portaal.is-portaal .ios-jc-voet{margin:14px 0 0; font-size:12px; line-height:1.45; color:var(--ios-flauw)}

/* ---- dossier: koppen in serif, zoals de regels in de app ---------------- */
html.is-app.is-portaal.is-portaal .dossier-periode > summary .dossier-titel{font-family:var(--serif); font-size:17px; font-weight:600}
html.is-app.is-portaal.is-portaal .dossier-titel em{font-family:var(--sans); font-style:normal; font-size:12.5px; font-weight:400; color:var(--ios-zacht)}
html.is-app.is-portaal.is-portaal .dossier-groep{font-family:var(--sans); font-size:11px; font-weight:600; letter-spacing:.13em;
  text-transform:uppercase; color:var(--ios-goud-zacht)}

/* ---- dossier: kwartaalregel rustig zoals in de app ---------------------- */
html.is-app.is-portaal.is-portaal .dossier-sub > summary:has(.ov-merk){display:grid;
  grid-template-columns:minmax(0,1fr) auto 26px; grid-template-rows:auto auto; column-gap:10px; row-gap:4px; align-items:center}
html.is-app.is-portaal.is-portaal .dossier-sub > summary:has(.ov-merk) .dossier-titel{grid-column:1; grid-row:1 / 3; margin:0;
  display:flex; flex-direction:column; gap:1px; font-family:var(--serif); font-size:16px; font-weight:600; color:var(--ios-tekst)}
html.is-app.is-portaal.is-portaal .dossier-sub[open] > summary .dossier-titel{color:var(--ios-goud-licht)}
html.is-app.is-portaal.is-portaal .dossier-sub > summary .dossier-titel em{border:0; background:none; padding:0; margin:0;
  font-family:var(--sans); font-size:12.5px; font-weight:400; color:var(--ios-zacht); box-shadow:none}
html.is-app.is-portaal.is-portaal .dossier-sub > summary:has(.ov-merk) .ov-merk{grid-column:2; grid-row:1; justify-self:end;
  white-space:nowrap; max-width:none}
html.is-app.is-portaal.is-portaal .dossier-sub > summary:has(.ov-merk) .dossier-zip{grid-column:2; grid-row:2; justify-self:end}
html.is-app.is-portaal.is-portaal .dossier-sub > summary:has(.ov-merk)::after{grid-column:3; grid-row:1 / 3; align-self:center}
/* Download als gouden tekst met een haarlijn eronder (PilKnop) */
html.is-app.is-portaal.is-portaal .dossier-zip{display:inline-block; min-height:0; padding:2px 0 3px; border:0; border-radius:0;
  background:none; box-shadow:inset 0 -.7px 0 rgba(193,154,74,.55); color:var(--ios-goud-zacht);
  font-size:12px; font-weight:600; letter-spacing:.02em}
html.is-app.is-portaal.is-portaal .dossier-zip:hover{background:none; color:var(--ios-goud-licht)}
/* de stand-van-zakenkaart niet in de ingesprongen lijn van het kwartaal */
html.is-app.is-portaal.is-portaal .dossier-sub[open] > .ios-stand{margin:6px 0 14px; padding-left:16px; box-shadow:none}
html.is-app.is-portaal.is-portaal .ios-jc-staven i{border-radius:6px}

/* ---- statuslabels (StatusLabel in de app): rustig, geen fel vlak -------- */
html.is-app.is-portaal.is-portaal .ov-merk{padding:3px 10px; border-radius:999px; font-size:11px; font-weight:600;
  letter-spacing:.03em; line-height:1.5; box-shadow:none}
html.is-app.is-portaal.is-portaal .ov-merk.klaar{background:rgba(92,197,147,.12); color:var(--ios-groen); border:.8px solid rgba(92,197,147,.35)}
html.is-app.is-portaal.is-portaal .ov-merk.klaar::before{content:"\2713\00a0"; font-weight:700}
html.is-app.is-portaal.is-portaal .ov-merk.bezig{background:rgba(185,198,218,.07); color:var(--ios-zacht); border:.8px solid rgba(185,198,218,.2)}
html.is-app.is-portaal.is-portaal .ov-merk.aanslag{background:rgba(219,185,104,.12); color:var(--ios-goud-zacht); border:.8px solid rgba(219,185,104,.35)}
html.is-app.is-portaal.is-portaal .ov-merk.open{background:rgba(232,166,78,.1); color:var(--ios-oranje); border:.8px solid rgba(232,166,78,.3)}
html.is-app.is-portaal.is-portaal .dossier-sub > summary:has(.ov-merk){grid-template-columns:minmax(96px,1fr) auto 26px}
html.is-app.is-portaal.is-portaal .dossier-sub > summary:has(.ov-merk) .dossier-titel{align-items:flex-start; text-align:left}
html.is-app.is-portaal.is-portaal .dossier-sub > summary .dossier-titel em{white-space:nowrap}
html.is-app.is-portaal.is-portaal .dossier-sub > summary:has(.ov-merk) .ov-merk{white-space:normal; text-align:center; max-width:180px}

/* ---- dossier: mapregels met een gouden mapje, gewone letters (app) ------ */
html.is-app.is-portaal.is-portaal .dossier-map-kop{display:inline-flex; align-items:center; gap:12px; margin-right:auto;
  font-size:15px; font-weight:500; letter-spacing:0; text-transform:none; color:var(--ios-tekst)}
html.is-app.is-portaal.is-portaal .dossier-map-kop::before{content:""; flex:0 0 18px; width:18px; height:18px;
  background:no-repeat center / contain 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.6' stroke-linejoin='round'%3E%3Cpath d='M3 7a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3C/svg%3E")}
html.is-app.is-portaal.is-portaal .dossier-map-kop .dos-aantal{margin-left:0; padding:0; min-width:0; background:none;
  font-size:12.5px; font-weight:400; color:var(--ios-zacht)}
html.is-app.is-portaal.is-portaal .dossier-map[open] > summary .dossier-map-kop{color:var(--ios-goud-licht)}
html.is-app.is-portaal.is-portaal .dossier-map[open] > summary .dos-aantal{background:none; color:var(--ios-goud-zacht)}

/* ---- administratie: kopjes als sectiekop ------------------------------- */
html.is-app.is-portaal.is-portaal .fact-kopje{display:flex; align-items:center; gap:8px; border-top:0; padding-top:0;
  font-family:var(--sans); font-size:11px; font-weight:600; letter-spacing:.13em; text-transform:uppercase; color:var(--ios-goud-zacht)}
html.is-app.is-portaal.is-portaal .fact-kopje::after{content:""; flex:1 1 auto; min-width:24px; height:.7px;
  background:linear-gradient(90deg, rgba(193,154,74,.4), rgba(193,154,74,0))}

/* ---- ritten: de gemakken van de app (RittenGemak.swift, v36) ------------ */
/* privé-km-teller */
html.is-app.is-portaal.is-portaal .rit-teller{margin:14px 0; padding:16px; border-radius:var(--ios-hoek); background:var(--ios-kaart);
  border:.8px solid rgba(255,255,255,.075); border-top-color:rgba(255,255,255,.12); box-shadow:0 4px 8px rgba(0,0,0,.14)}
html.is-app.is-portaal.is-portaal .rit-teller-kop{display:flex; justify-content:space-between; align-items:baseline; gap:10px; margin-bottom:8px}
html.is-app.is-portaal.is-portaal .rit-teller-kop span{font-size:13.5px; color:var(--ios-zacht)}
html.is-app.is-portaal.is-portaal .rit-teller-kop strong{font-size:13.5px; font-weight:500; font-variant-numeric:tabular-nums; color:var(--ios-teller)}
html.is-app.is-portaal.is-portaal .rit-teller-balk{height:6px; border-radius:999px; background:rgba(185,198,218,.15); overflow:hidden}
html.is-app.is-portaal.is-portaal .rit-teller-balk i{display:block; height:100%; border-radius:999px; background:var(--ios-teller)}
html.is-app.is-portaal.is-portaal .rit-teller p{margin:8px 0 0; font-size:12px; line-height:1.45; color:var(--ios-zacht)}
html.is-app.is-portaal.is-portaal .rit-teller.is-groen{--ios-teller:var(--ios-groen)}
html.is-app.is-portaal.is-portaal .rit-teller.is-oranje{--ios-teller:var(--ios-oranje)}
html.is-app.is-portaal.is-portaal .rit-teller.is-rood{--ios-teller:var(--ios-rood)}
/* vaak gereden */
html.is-app.is-portaal.is-portaal .rit-vast{margin:18px 0 6px}
html.is-app.is-portaal.is-portaal .rit-vast .fact-kopje{margin:0 0 10px}
html.is-app.is-portaal.is-portaal .rit-vast-rij{display:flex; gap:10px; overflow-x:auto; padding-bottom:4px; scrollbar-width:none}
html.is-app.is-portaal.is-portaal .rit-vast-rij::-webkit-scrollbar{display:none}
html.is-app.is-portaal.is-portaal .rit-vast-knop{flex:0 0 auto; max-width:240px; display:flex; flex-direction:column; align-items:flex-start; gap:3px;
  padding:10px 14px; border-radius:12px; background:var(--ios-veld); border:.8px solid rgba(193,154,74,.35);
  color:var(--ios-tekst); text-align:left; font:inherit; cursor:pointer}
html.is-app.is-portaal.is-portaal .rit-vast-knop:active{transform:scale(.97)}
html.is-app.is-portaal.is-portaal .rit-vast-knop strong{font-size:13.5px; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%}
html.is-app.is-portaal.is-portaal .rit-vast-knop small{font-size:12px; color:var(--ios-zacht); white-space:nowrap}
/* vandaag / gisteren */
html.is-app.is-portaal.is-portaal .rit-dagen{display:flex; gap:8px; margin-top:8px}
html.is-app.is-portaal.is-portaal .rit-dagen button{min-height:32px; padding:6px 14px; border-radius:999px; font:inherit; font-size:12px; font-weight:600;
  background:var(--ios-veld); color:var(--ios-tekst); border:.8px solid rgba(193,154,74,.35); cursor:pointer}
html.is-app.is-portaal.is-portaal .rit-dagen button.is-aan{background:var(--ios-goud); color:var(--ios-goud-inkt); border-color:transparent}
/* Hier */
html.is-app.is-portaal.is-portaal .rit-van-kop{display:flex; align-items:center; justify-content:space-between; gap:8px}
html.is-app.is-portaal.is-portaal .rit-hier{display:inline-flex; align-items:center; gap:5px; min-height:44px; padding:8px 0 8px 12px;
  border:0; background:none; color:var(--ios-goud); font:inherit; font-size:12px; font-weight:600; cursor:pointer}
html.is-app.is-portaal.is-portaal .rit-hier svg{width:12px; height:12px}
html.is-app.is-portaal.is-portaal .rit-hier.is-bezig{opacity:.55}
html.is-app.is-portaal.is-portaal .rit-hier[hidden]{display:none}
html.is-app.is-portaal.is-portaal .rit-hier-melding{display:block; margin:-4px 0 6px; font-size:12px; color:var(--ios-zacht)}
html.is-app.is-portaal.is-portaal .rit-hier-melding[hidden]{display:none}
/* het ritformulier en het autoformulier: binnenruimte zoals een kaart in de app */
html.is-app.is-portaal.is-portaal .rit-form{padding:18px 16px}
html.is-app.is-portaal.is-portaal .is-registratie .ios-label{display:inline-block; margin:6px 0 4px}
html.is-app.is-portaal.is-portaal .ios-registratie-stap{display:block}

/* ---- gelijk aan de app (02-11-2026, Jawad: "Alles gelijktrekken") ---- */
html.is-app.is-portaal.is-portaal{--ios-prognose:#b79ce8; --ios-teruggaaf:#22d3a6; --ios-inkt:#07172f; --goud-verloop:linear-gradient(180deg,#f0db9e,#d4b062 45%,#b88f3e 75%,#a07a2e)}
html.is-app.is-portaal.is-portaal .ios-kop.is-prognose,
html.is-app.is-portaal.is-portaal .ios-vlak.is-prognose{--ios-accent:var(--ios-prognose)}

/* het agendablaadje */
html.is-app.is-portaal.is-portaal .ios-blad{position:relative; flex:0 0 44px; width:44px; height:46px; display:flex; flex-direction:column; border-radius:10px;
  background:rgba(92,197,147,.12); box-shadow:inset 0 0 0 .8px rgba(92,197,147,.7)}
html.is-app.is-portaal.is-portaal .ios-blad b{display:block; height:14px; line-height:14px; border-radius:10px 10px 0 0; background:var(--ios-btw); color:var(--ios-inkt);
  font-family:var(--sans); font-size:8px; font-weight:600; text-align:center; white-space:nowrap; overflow:hidden}
html.is-app.is-portaal.is-portaal .ios-blad strong{flex:1; display:flex; align-items:center; justify-content:center; font-family:var(--serif); font-size:20px; font-weight:600; color:#f4f6fa}
html.is-app.is-portaal.is-portaal .ios-blad i{position:absolute; top:-3px; left:50%; width:18px; height:7px; margin-left:-9px;
  background:linear-gradient(90deg,#f4f6fa 2.500px,transparent 2.500px,transparent 15.500px,#f4f6fa 15.500px); border-radius:2px}
html.is-app.is-portaal.is-portaal .ios-blad.is-laat{background:rgba(229,112,107,.12); box-shadow:inset 0 0 0 .8px rgba(229,112,107,.7)}
html.is-app.is-portaal.is-portaal .ios-blad.is-laat b{background:var(--ios-rood)}

/* de gouden munt, zoals het V-logo */
html.is-app.is-portaal.is-portaal .ios-munt{flex:0 0 44px; width:44px; height:44px; display:flex; align-items:center; justify-content:center; border-radius:50%;
  background:var(--ios-inkt); box-shadow:inset 0 0 0 1.100px #c19a4a, inset 0 0 0 3px var(--ios-inkt), inset 0 0 0 3.600px rgba(193,154,74,.35), 0 0 7px rgba(193,154,74,.25)}
html.is-app.is-portaal.is-portaal .ios-munt b{font-family:var(--serif); font-size:12.500px; font-weight:600; letter-spacing:.03em;
  background:var(--goud-verloop); -webkit-background-clip:text; background-clip:text; color:transparent}
html.is-app.is-portaal.is-portaal .ios-munt.is-kort b{font-size:15px}
html.is-app.is-portaal.is-portaal .ios-stempel{display:block; font-size:10.500px; letter-spacing:.07em; text-transform:uppercase; color:#a98c55}
html.is-app.is-portaal.is-portaal .ios-vlak.is-btw .ios-regel-tekst strong,
html.is-app.is-portaal.is-portaal .ios-vlak.is-prognose .ios-regel-tekst strong{white-space:normal; overflow:visible}
html.is-app.is-portaal.is-portaal .ios-prog{flex:0 0 auto; display:flex; flex-direction:column; align-items:flex-end; gap:2px; text-align:right}
html.is-app.is-portaal.is-portaal .ios-prog small{font-size:12.500px; color:currentColor}
html.is-app.is-portaal.is-portaal .ios-prog b{font-family:var(--serif); font-size:17px; font-weight:600; font-variant-numeric:tabular-nums}
html.is-app.is-portaal.is-portaal .ios-prog.is-betalen{color:var(--ios-rood)}
html.is-app.is-portaal.is-portaal .ios-prog.is-terug{color:var(--ios-teruggaaf)}
html.is-app.is-portaal.is-portaal .ios-prog.is-nul{color:var(--ios-goud-licht)}

/* het blad met de berekening */
dialog.ios-venster{width:min(520px,calc(100vw - 24px)); max-height:calc(100dvh - 40px); padding:20px; border:.8px solid rgba(77,96,127,.7); border-radius:20px;
  background:#0a1a36; color:#f4f6fa; overflow:auto}
dialog.ios-venster::backdrop{background:rgba(3,8,18,.7)}
.ios-venster-kop{display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:14px}
.ios-venster-kop h2{margin:0; font-family:var(--serif); font-size:24px; font-weight:600; color:#f4f6fa}
.ios-venster-sluit{flex:0 0 auto; padding:7px 14px; border:0; border-radius:999px; background:rgba(255,255,255,.1); color:#dbb968; font:600 14px var(--sans); cursor:pointer}
.ios-venster-kaart{padding:18px; border-radius:18px; background:linear-gradient(160deg,#10264a,#0b1a36); box-shadow:inset 0 0 0 1px rgba(193,154,74,.7)}
.ios-venster-kaart em{display:block; font-style:normal; font-size:11px; font-weight:600; letter-spacing:.13em; text-transform:uppercase; color:#dbb968}
.ios-venster-kaart strong{display:block; margin:10px 0 12px; font-family:var(--serif); font-size:34px; font-weight:600}
.ios-venster-kaart strong.is-betalen{color:#e5706b}
.ios-venster-kaart strong.is-terug{color:#22d3a6}
.ios-venster-kaart strong.is-nul{color:#ebd49a}
.ios-venster-feit{display:flex; justify-content:space-between; gap:12px; padding:8px 0 0; font-size:13.500px; color:#b9c6da}
.ios-venster-stempel{margin-top:8px; padding-top:8px; border-top:.6px solid rgba(53,75,106,.75); font-size:11px; letter-spacing:.11em; text-transform:uppercase; color:#a98c55}
.ios-venster-vlak{margin-top:14px; padding:0 14px; border-radius:18px; background:rgba(14,33,69,.32); box-shadow:inset 0 0 0 .6px rgba(53,75,106,.75)}
.ios-venster-vlak summary,.ios-venster-link{display:flex; align-items:center; justify-content:space-between; padding:13px 0; font-size:15px; font-weight:500; color:#f4f6fa; cursor:pointer; list-style:none; text-decoration:none}
.ios-venster-vlak summary::-webkit-details-marker{display:none}
.ios-venster-regel{display:flex; justify-content:space-between; gap:12px; padding:9px 0; border-top:.6px solid rgba(53,75,106,.75); font-size:13.500px; color:#b9c6da}
.ios-venster-regel small{display:block; font-size:12px; color:rgba(185,198,218,.72)}
.ios-venster-regel b{font-weight:400; color:#f4f6fa; white-space:nowrap; font-variant-numeric:tabular-nums}
.ios-venster-regel.is-nadruk{font-weight:500; color:#f4f6fa}
.ios-venster-regel.is-nadruk b{font-weight:500; color:#ebd49a}
.ios-venster-slot{margin:14px 2px 0; font-size:12.500px; line-height:1.45; color:rgba(185,198,218,.8)}

/* zaken: eerst wat nu telt */
html.is-app.is-portaal.is-portaal .proc-notitie{margin:8px 0; font-size:13.500px; line-height:1.45; color:#b9c6da}
html.is-app.is-portaal.is-portaal .proc-vouw{margin:10px 0 0}
html.is-app.is-portaal.is-portaal .proc-vouw > summary{display:flex; align-items:center; gap:8px; padding:6px 0; list-style:none; cursor:pointer;
  font-size:11px; font-weight:600; letter-spacing:.11em; text-transform:uppercase; color:#b9c6da}
html.is-app.is-portaal.is-portaal .proc-vouw > summary::-webkit-details-marker{display:none}
html.is-app.is-portaal.is-portaal .proc-vouw > summary em{font-style:normal; color:var(--ios-goud-zacht)}
html.is-app.is-portaal.is-portaal .proc-vouw > summary::after{content:""; margin-left:auto; width:7px; height:7px; border:solid var(--ios-goud); border-width:0 1.500px 1.500px 0; transform:rotate(45deg); transition:transform .2s}
html.is-app.is-portaal.is-portaal .proc-vouw[open] > summary::after{transform:rotate(225deg)}
html.is-app.is-portaal.is-portaal .proc-vouw[open] + .proc-laatste{display:none}
html.is-app.is-portaal.is-portaal .proc-tijdlijn{list-style:none; margin:6px 0 0; padding:0}
html.is-app.is-portaal.is-portaal .proc-tijdlijn li{position:relative; padding:0 0 10px 17px; font-size:12.500px; line-height:1.4; color:#f4f6fa}
html.is-app.is-portaal.is-portaal .proc-tijdlijn li:last-child{padding-bottom:0}
html.is-app.is-portaal.is-portaal .proc-tijdlijn li::before{content:""; position:absolute; left:0; top:5px; width:7px; height:7px; border-radius:50%; background:var(--ios-goud-zacht)}
html.is-app.is-portaal.is-portaal .proc-tijdlijn li:not(:last-child)::after{content:""; position:absolute; left:3px; top:12px; bottom:-5px; width:1px; background:rgba(193,154,74,.35)}
html.is-app.is-portaal.is-portaal .proc-tijdlijn li span{display:block; font-weight:600; color:var(--ios-goud-zacht)}

/* woordmerk */
.ios-woordmerk{display:inline-flex; flex-direction:column; gap:6px; text-align:left}
.ios-woordmerk b{font-family:var(--serif); font-size:25px; line-height:1; font-weight:600; letter-spacing:.18em; margin-right:-.18em;
  background:var(--goud-verloop,linear-gradient(180deg,#f0db9e,#a07a2e)); -webkit-background-clip:text; background-clip:text; color:transparent}
.ios-woordmerk s{display:block; height:.7px; background:rgba(193,154,74,.65); text-decoration:none}
.ios-woordmerk small{display:flex; justify-content:space-between; width:0; min-width:100%; font-family:var(--sans); font-size:11px; font-weight:600; line-height:1; letter-spacing:0; color:#b9c6da}
.ios-woordmerk small i{font-style:normal}
.ios-woordmerk.is-klein{gap:3px}
.ios-woordmerk.is-klein b{font-size:13px}
.ios-woordmerk.is-klein s{display:none}
.ios-woordmerk.is-klein small{font-size:7px}
html.is-app.is-portaal.is-portaal .ov-voet{text-align:center}
html.is-app.is-portaal.is-portaal .ov-voet .ios-woordmerk{display:inline-flex; margin:0 auto}
html.is-app.is-portaal.is-portaal .ov-voet .ios-woordmerk small{display:flex; margin:0; letter-spacing:0; text-transform:none}
html.is-app.is-portaal.is-portaal .ov-voet > small{margin-top:12px}

/* pakketkaart in het accountmenu */
.km-kaart{padding:12px 12px 2px}
.km-kaart[hidden],.km-kop[hidden]{display:none}
.ios-kaart{display:flex; flex-direction:column; min-height:176px; padding:16px; border-radius:18px; box-shadow:inset 0 0 0 1px rgba(193,154,74,.8), 0 6px 18px rgba(193,154,74,.14);
  background:radial-gradient(240px 170px at 95% 0,rgba(193,154,74,.26),transparent),linear-gradient(135deg,#1a2233,#0b0f19 55%,#06080e)}
.ios-kaart-kop{display:flex; align-items:center; justify-content:space-between; font-size:11px; font-weight:600; letter-spacing:.17em; text-transform:uppercase; color:#dbb968}
.ios-kaart-v{display:flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:50%; background:#07172f; box-shadow:inset 0 0 0 1px #c19a4a;
  font-family:var(--serif); font-size:17px; font-weight:600; letter-spacing:0; color:#dbb968}
.ios-kaart-soort{margin-top:auto; padding-top:12px; font-family:var(--serif); font-size:27px; line-height:1.15; font-weight:600;
  background:linear-gradient(100deg,#f0db9e,#c19a4a 70%,#a07a2e); -webkit-background-clip:text; background-clip:text; color:transparent}
.ios-kaart-naam{display:flex; align-items:center; gap:8px; margin-top:4px; font-size:14px; font-weight:500; color:rgba(244,246,250,.92)}
.ios-kaart-voet{display:flex; align-items:flex-end; justify-content:space-between; margin-top:12px}
.ios-kaart-nr{font-family:var(--serif); font-size:13px; font-weight:600; letter-spacing:.17em; color:rgba(235,212,154,.9)}
.ios-vlag{flex:0 0 18px; width:18px; height:18px; display:inline-flex; align-items:center; justify-content:center; overflow:hidden; border-radius:50%; box-shadow:0 0 0 .8px #dbb968}
.ios-vlag i{font-style:normal; font-size:24px; line-height:1}
.ios-vlag.is-code{font-size:8px; font-weight:600; color:#dbb968}

/* taalvlaggen */
.taal-vlaggen{display:inline-flex; gap:8px}
.taal-vlag{width:34px; height:34px; padding:4px; border:0; border-radius:50%; background:none; cursor:pointer}
.taal-vlag svg{display:block; width:26px; height:26px; border-radius:50%; filter:saturate(.15); opacity:.5}
.taal-vlag.aan{box-shadow:inset 0 0 0 1.500px #dbb968, 0 0 10px rgba(193,154,74,.28)}
.taal-vlag.aan svg{filter:none; opacity:1}
.app-login-taal{display:flex; justify-content:flex-end; margin:-6px -6px 4px 0}
.km-taal{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 14px; font-size:14px; color:#f4f6fa}

/* tabblad Kennis */
.kennis{display:flex; flex-direction:column; gap:10px}
.kn-delen{display:flex; gap:4px; padding:4px; border-radius:14px; background:rgba(255,255,255,.06)}
.kn-delen button{flex:1; padding:8px 4px; border:0; border-radius:11px; background:none; color:#b9c6da; font:500 13.500px var(--sans); cursor:pointer}
.kn-delen button.aan{background:rgba(255,255,255,.11); color:#dbb968; font-weight:600}
.kn-datum-kop{margin:2px 2px 0; font-size:12.500px; color:#b9c6da}
html.is-app.is-portaal.is-portaal .kn-kop{margin:8px 2px 0; font-family:var(--sans); font-size:11px; font-weight:600; letter-spacing:.13em; text-transform:uppercase; color:#dbb968}
.kn-volgende{display:flex; align-items:center; gap:14px; padding:16px; border-radius:20px; background:linear-gradient(160deg,#10264a,#0b1a36); box-shadow:inset 0 0 0 1px rgba(193,154,74,.7)}
.kn-volgende-tekst{flex:1; min-width:0; display:flex; flex-direction:column; gap:2px}
.kn-volgende-tekst em{font-style:normal; font-size:11px; font-weight:600; letter-spacing:.11em; text-transform:uppercase; color:#dbb968}
.kn-volgende-tekst strong{font-family:var(--serif); font-size:15.500px; font-weight:500; color:#f4f6fa}
.kn-volgende-tekst small{font-size:12.500px; color:#b9c6da}
.kn-vouw{--kn-kleur:#dbb968; padding:0 14px; border-radius:18px; background:rgba(14,33,69,.32); box-shadow:inset 0 0 0 .6px rgba(53,75,106,.75)}
.kn-vouw.is-btw{--kn-kleur:#5cc593}
.kn-vouw.is-sorteren{--kn-kleur:#7fa8e8}
.kn-vouw.is-vragen{--kn-kleur:#e8a64e}
.kn-vouw.is-prognose{--kn-kleur:#b79ce8}
.kn-vouw.is-facturen{--kn-kleur:#e5706b}
.kn-vouw[open]{box-shadow:inset 0 0 0 .6px color-mix(in srgb,var(--kn-kleur) 55%,transparent)}
.kn-vouw > summary{display:flex; align-items:center; gap:13px; padding:12px 0; list-style:none; cursor:pointer}
.kn-vouw > summary::-webkit-details-marker{display:none}
.kn-medaillon{flex:0 0 38px; width:38px; height:38px; display:flex; align-items:center; justify-content:center; border-radius:50%; color:var(--kn-kleur);
  background:color-mix(in srgb,var(--kn-kleur) 12%,transparent); box-shadow:inset 0 0 0 .8px color-mix(in srgb,var(--kn-kleur) 50%,transparent)}
.kn-medaillon svg{width:20px; height:20px}
.kn-vouw-tekst{flex:1; min-width:0; display:flex; flex-direction:column; gap:2px}
.kn-vouw-tekst strong{font-family:var(--serif); font-size:15.500px; font-weight:500; color:#f4f6fa}
.kn-vouw-tekst small{font-size:12.500px; line-height:1.35; color:#b9c6da}
.kn-vouw-pijl{flex:0 0 auto; width:8px; height:8px; margin-right:3px; border:solid var(--kn-kleur); border-width:1.500px 1.500px 0 0; transform:rotate(45deg); transition:transform .2s}
.kn-vouw[open] .kn-vouw-pijl{transform:rotate(135deg)}
.kn-vouw-in{border-top:.6px solid rgba(53,75,106,.75)}
.kn-rij{display:flex; align-items:center; gap:10px; padding:12px 0; color:#f4f6fa; text-decoration:none}
.kn-rij + .kn-rij{border-top:.6px solid rgba(53,75,106,.75)}
.kn-rij > span:first-child{flex:1; min-width:0; display:flex; flex-direction:column; gap:3px}
.kn-rij strong{font-family:var(--serif); font-size:15px; font-weight:500}
.kn-rij small{font-size:12.500px; line-height:1.35; color:#b9c6da; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden}
.kn-lijst{padding:0 14px; border-radius:18px; background:rgba(14,33,69,.32); box-shadow:inset 0 0 0 .6px rgba(53,75,106,.75)}
.kn-datum{display:flex; align-items:center; gap:12px; padding:11px 0}
.kn-datum + .kn-datum{border-top:.6px solid rgba(53,75,106,.75)}
.kn-datum-tekst{flex:1; min-width:0; display:flex; flex-direction:column; gap:3px}
.kn-datum-tekst strong{font-family:var(--serif); font-size:15px; font-weight:500; color:#f4f6fa}
.kn-datum-tekst small{font-size:12.500px; line-height:1.35; color:#b9c6da}
.kn-datum-rechts{flex:0 0 auto; max-width:110px; text-align:right; font-family:var(--serif); font-size:14px; font-weight:600; color:#dbb968}
.kn-agenda{flex:0 0 40px; width:40px; height:44px; display:flex; align-items:center; justify-content:center; color:#dbb968}
.kn-agenda svg{width:20px; height:20px}
.kn-punten{list-style:none; margin:0; padding:0}
.kn-punten li{position:relative; padding:9px 0 9px 26px; font-size:13.500px; line-height:1.45; color:#f4f6fa}
.kn-punten li + li{border-top:.6px solid rgba(53,75,106,.75)}
.kn-punten li::before{content:""; position:absolute; left:3px; top:13px; width:10px; height:5px; border:solid #dbb968; border-width:0 0 1.600px 1.600px; transform:rotate(-45deg)}
.kn-site{align-self:center; margin:8px 0; color:#dbb968; font-size:13.500px; font-weight:500; text-decoration:none}
.kn-zoek{width:100%; padding:11px 14px; border:.8px solid rgba(77,96,127,.7); border-radius:12px; background:rgba(255,255,255,.05); color:#f4f6fa; font:400 15px var(--sans)}
.kn-uitgelicht{display:flex; flex-direction:column; gap:8px; margin-top:6px; padding:18px; border-radius:20px; background:linear-gradient(160deg,#10264a,#0b1a36);
  box-shadow:inset 0 0 0 1px rgba(193,154,74,.7); color:#f4f6fa; text-decoration:none}
.kn-uitgelicht em{font-style:normal; font-size:11px; font-weight:600; letter-spacing:.13em; text-transform:uppercase; color:#dbb968}
.kn-uitgelicht strong{font-family:var(--serif); font-size:20px; font-weight:600}
.kn-uitgelicht small{font-size:13.500px; line-height:1.45; color:#b9c6da}
.kn-uitgelicht span{font-size:13.500px; font-weight:500; color:#dbb968}