/* Mijn DesignCheck (10-10-2026): inloggen, account maken, tweestapsverificatie, links uit de mail en de accountpagina.
   Effen vlakken zoals Instellingen op iOS; glas alleen op de knoppen, net als op de rest van de site. */
.ac [hidden]{ display:none !important; }

/* ---- formulierpagina's: kop, een groep velden en een knop, midden op het scherm ---- */
.ac{ min-height:calc(100svh - 56px); display:grid; place-items:center; padding:clamp(24px,5vh,56px) var(--a-marge); }
.ac__in{ width:min(100%, 400px); }
.ac h1{ font:600 clamp(40px,5vw,56px)/1.04 var(--sf); letter-spacing:-.045em; color:var(--a-tekst); text-wrap:balance; }
.ac__zin{ margin:12px 0 28px; font-size:clamp(17px,1.4vw,19px); line-height:1.42; color:var(--a-tekst2); text-wrap:pretty; }
.ac__zin b{ font-weight:600; color:var(--a-tekst); overflow-wrap:anywhere; }
.ac__groep{ background:var(--a-wit); border-radius:18px; overflow:hidden; transition:box-shadow .2s; }
.ac__groep:focus-within{ box-shadow:0 0 0 2px var(--a-blauw); }
.ac__veld{ display:block; padding:10px 16px 11px; }
.ac__veld + .ac__veld{ border-top:1px solid var(--a-lijn); margin-left:16px; padding-left:0; }
.ac__veld span{ display:block; font:500 13px/1.2 var(--sf); color:var(--a-tekst2); letter-spacing:-.005em; }
.ac__veld input{ display:block; width:100%; margin-top:4px; border:0; outline:0; background:transparent; padding:0;
  font:400 17px/1.35 var(--sf); letter-spacing:-.022em; color:var(--a-tekst); }
.ac__hint{ margin:8px 16px 0; font-size:13px; line-height:1.35; color:var(--a-tekst2); }
.ac__knop.btn{ display:flex; width:100%; min-height:50px; margin-top:18px; border:0; cursor:pointer; }
.ac__knop.btn:disabled{ opacity:.55; cursor:default; }
.ac__melding{ min-height:1.4em; margin-top:14px; font-size:15px; line-height:1.4; color:var(--a-tekst2); }
.ac__melding[data-stand="fout"]{ color:var(--a-tekst); font-weight:500; }
.ac__melding:empty{ min-height:0; margin-top:0; }
.ac__klein{ margin-top:22px; font-size:15px; line-height:1.45; color:var(--a-tekst2); text-wrap:pretty; }
.ac__klein + .ac__klein{ margin-top:10px; }
.ac__klein a, .ac__melding a, .ac__tekstknop{ color:var(--a-blauw-tekst); text-decoration:none; }
.ac__tekstknop{ background:none; border:0; padding:0; font:inherit; letter-spacing:inherit; cursor:pointer; }
.ac__klein a:hover, .ac__tekstknop:hover{ text-decoration:underline; text-underline-offset:3px; }
.ac__melding .ac__tekstknop{ display:block; margin-top:6px; font-weight:500; }
.ac__stuk{ animation:ac-in .5s var(--veer) both; }
@keyframes ac-in{ from{ opacity:0; transform:translateY(8px); } }
@media (max-width:560px){ .ac{ place-items:start center; padding-top:clamp(32px,9vh,72px); } }

/* ---- tweestapsverificatie ---- */
.ac__code input{ font:600 28px/1.2 var(--sf); letter-spacing:.32em; font-variant-numeric:tabular-nums; text-indent:.32em; }
.ac__code input::placeholder{ color:#C7C7CC; }
.ac__stappen{ list-style:none; margin:0; padding:0; counter-reset:stap; }
.ac__stappen > li{ position:relative; padding-left:40px; }
.ac__stappen > li + li{ margin-top:28px; }
.ac__stappen > li::before{ counter-increment:stap; content:counter(stap); position:absolute; left:0; top:0; width:26px; height:26px; border-radius:50%;
  display:grid; place-items:center; background:var(--a-tekst); color:#fff; font:600 14px/1 var(--sf); }
.ac__stappen p{ font-size:17px; line-height:1.45; color:var(--a-tekst); margin:2px 0 14px; }
.ac__qr{ display:inline-grid; place-items:center; padding:14px; background:var(--a-wit); border-radius:18px; }
.ac__qr img{ display:block; width:168px; height:168px; }
.ac__app.btn{ display:none; width:100%; min-height:50px; }
.ac__sleutel{ margin-top:14px; font-size:14px; line-height:1.5; color:var(--a-tekst2); }
.ac__sleutel code{ display:block; margin:4px 0 2px; font:500 15px/1.5 ui-monospace,"SF Mono",Menlo,monospace; letter-spacing:.04em; color:var(--a-tekst); overflow-wrap:anywhere; }
@media (hover:none) and (pointer:coarse){
  .ac__qr{ display:none; }
  .ac__app.btn{ display:flex; }
}

/* ---- de accountpagina ---- */
.ac--account{ place-items:start center; padding-top:clamp(32px,7vh,80px); padding-bottom:clamp(56px,9vh,104px); }
.ac--account .ac__in{ width:min(100%, 680px); }
.ak{ transition:opacity .35s ease, transform .55s var(--veer); }
.ak[data-stand="laden"]{ opacity:0; transform:translateY(8px); }
.ak h1{ font-size:clamp(36px,4.6vw,52px); }
.ak__mail{ margin-top:8px; font-size:17px; line-height:1.4; color:var(--a-tekst2); overflow-wrap:anywhere; }
.ak__som{ display:flex; align-items:center; justify-content:space-between; gap:20px; margin-top:28px; padding:22px 22px 22px 24px;
  background:var(--a-wit); border-radius:22px; }
.ak__bedrag{ font:600 clamp(38px,4.6vw,46px)/1 var(--sf); letter-spacing:-.04em; color:var(--a-tekst); font-variant-numeric:tabular-nums; }
.ak__per{ margin-top:8px; font-size:15px; line-height:1.3; color:var(--a-tekst2); }
.ak__som .btn{ flex:none; min-height:48px; padding:0 22px; border:0; }
.ak h2{ margin:40px 0 10px 4px; font:600 21px/1.2 var(--sf); letter-spacing:-.028em; color:var(--a-tekst); }
.ak__lijst{ list-style:none; margin:0; padding:0; background:var(--a-wit); border-radius:18px; overflow:hidden; }
.ak__lijst + .ak__lijst{ margin-top:16px; }
.ak__rij{ position:relative; display:flex; align-items:center; gap:14px; width:100%; min-height:58px; padding:11px 16px;
  font:inherit; text-align:left; color:var(--a-tekst); text-decoration:none; background:none; border:0; transition:background-color .15s; }
.ak__lijst > li + li > .ak__rij::before, .ak__lijst > li + li > .ak__open-rij::before{ content:""; position:absolute; top:0; left:60px; right:0; height:1px; background:var(--a-lijn); }
.ak__lijst--kaal > li + li > .ak__rij::before{ left:16px; }
a.ak__rij, button.ak__rij{ cursor:pointer; -webkit-tap-highlight-color:transparent; }
a.ak__rij:active, button.ak__rij:active{ background:#E9E9EE; }
@media (hover:hover){ a.ak__rij:hover, button.ak__rij:hover{ background:#F7F7F9; } }
a.ak__rij:focus-visible, button.ak__rij:focus-visible{ outline:2px solid var(--a-blauw-tekst); outline-offset:-2px; border-radius:inherit; }
.ak__ico{ flex:none; display:grid; place-items:center; width:30px; height:30px; border-radius:8px; corner-shape:squircle;
  background:var(--a-grond); color:var(--a-tekst); }
@supports (corner-shape:squircle){ .ak__ico{ border-radius:10px; } }
.ak__ico svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round; }
.ak__tekst{ flex:1; min-width:0; }
.ak__naam{ display:block; font:500 17px/1.3 var(--sf); letter-spacing:-.02em; color:var(--a-tekst); }
.ak__detail{ display:block; margin-top:2px; font-size:14px; line-height:1.35; color:var(--a-tekst2); overflow-wrap:anywhere; }
.ak__label{ display:inline-block; margin-top:5px; padding:2px 8px; border-radius:999px; background:var(--a-blauw-tint); color:var(--a-blauw-tekst);
  font:500 12px/1.45 var(--sf); letter-spacing:0; }
.ak__label--grijs{ background:var(--a-grond); color:var(--a-tekst2); }
.ak__label + .ak__label{ margin-left:6px; }
.ak__terug{ margin:0 0 14px; }
.ak__terug a{ display:inline-flex; align-items:center; gap:6px; font-size:17px; color:var(--a-blauw-tekst); text-decoration:none; }
.ak__terug a::before{ content:""; width:9px; height:9px; border-left:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(45deg); margin-left:3px; }
.ak__terug a:hover{ text-decoration:underline; text-underline-offset:3px; }
.ak__prijs{ flex:none; text-align:right; font:400 17px/1.3 var(--sf); letter-spacing:-.02em; color:var(--a-tekst); font-variant-numeric:tabular-nums; white-space:nowrap; }
.ak__prijs small{ display:block; margin-top:2px; font-size:13px; color:var(--a-tekst2); letter-spacing:0; }
.ak__waarde{ flex:0 1 auto; min-width:0; max-width:65%; text-align:right; font-size:17px; color:var(--a-tekst2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
a.ak__rij::after, button.ak__rij[data-pijl]::after{ content:""; flex:none; width:8px; height:8px; margin:0 2px 0 4px;
  border-top:2px solid #C4C4C9; border-right:2px solid #C4C4C9; transform:rotate(45deg); transition:transform .4s var(--veer); }
button.ak__rij[aria-expanded="true"]::after{ transform:rotate(135deg); }
.ak__uit{ justify-content:center; font-weight:500; color:var(--a-blauw-tekst); }
.ak__open{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .5s var(--veer); }
.ak__open[data-open]{ grid-template-rows:1fr; }
.ak__open > div{ overflow:hidden; }
.ak__open form{ padding:2px 16px 16px; }
.ak__open .ac__groep{ background:var(--a-grond); }
.ak__open .ac__knop.btn{ margin-top:14px; }
.ak__fout{ margin-top:28px; font-size:17px; color:var(--a-tekst); }
@media (max-width:560px){
  .ak__som{ flex-direction:column; align-items:stretch; padding:20px; }
  .ak__som .btn{ width:100%; }
}

/* ---- ingelogd als klant (beheerders) ---- */
.ak__als{ position:sticky; top:64px; z-index:5; display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin:0 0 28px; padding:10px 10px 10px 18px; border-radius:18px; background:var(--a-tekst); color:#fff; font-size:15px; line-height:1.35; }
.ak__als b{ font-weight:600; color:#fff; }
.ak__als-knop{ flex:none; min-height:36px; padding:0 14px; border:0; border-radius:999px; background:rgba(255,255,255,.16); color:#fff;
  font:600 14px/1 var(--sf); letter-spacing:-.01em; cursor:pointer; transition:background-color .2s; }
.ak__als-knop:hover{ background:rgba(255,255,255,.26); }
.ak__noot{ margin:12px 4px 0; font-size:14px; line-height:1.45; color:var(--a-tekst2); text-wrap:pretty; }
.ak__noot a{ color:var(--a-blauw-tekst); text-decoration:none; }
.ak__noot a:hover{ text-decoration:underline; text-underline-offset:3px; }
/* factuur bij een betaling, en in het beheer een knop als factuur of mail nog niet lukte (12-10) */
.ak__factuur{ display:block; margin-top:6px; font-size:14px; line-height:1.35; color:var(--a-blauw-tekst); text-decoration:none; }
a.ak__factuur:hover{ text-decoration:underline; text-underline-offset:3px; }
.ak__factuur--mis{ color:var(--a-tekst2); overflow-wrap:anywhere; }
.ak__opnieuw{ margin-top:6px; padding:5px 12px; border:0; border-radius:999px; background:var(--a-blauw-tint); color:var(--a-blauw-tekst);
  font-family:inherit; font-size:13px; font-weight:600; cursor:pointer; }
.ak__opnieuw:disabled{ opacity:.5; cursor:default; }
/* producten: uitleg, knopjes en het formulier in het beheer (12-10) */
.ak__uitleg{ display:block; margin-top:6px; font-size:14px; line-height:1.35; color:var(--a-tekst2); overflow-wrap:anywhere; }
.ak__uitleg:empty{ display:none; }
.ak__knopjes{ display:flex; flex-wrap:wrap; gap:0 8px; }
.ak__vorm{ padding:4px 16px 18px 60px; }
.ak__vorm .ac__groep{ box-shadow:0 0 0 1px var(--a-lijn); }
.ak__vorm .af__akkoord{ margin:14px 2px 0; font-size:14px; }
.ak__vorm > .ak__opnieuw{ margin-top:4px; }
@media (max-width:560px){ .ak__vorm{ padding-left:16px; } }

/* ---- afrekenen ---- */
.af__samen{ margin-top:24px; padding:22px 24px; background:var(--a-wit); border-radius:22px; }
.af__kop{ display:flex; align-items:center; gap:14px; }
.af__naam{ font:600 21px/1.2 var(--sf); letter-spacing:-.028em; color:var(--a-tekst); }
.af__punten{ list-style:none; margin:16px 0 0; padding:0; }
.af__punten li{ position:relative; padding-left:24px; font-size:15px; line-height:1.45; color:var(--a-tekst); }
.af__punten li + li{ margin-top:6px; }
.af__punten li::before{ content:""; position:absolute; left:3px; top:.42em; width:10px; height:5px;
  border-left:2px solid var(--a-blauw-tekst); border-bottom:2px solid var(--a-blauw-tekst); transform:rotate(-45deg); }
.af__regels{ margin:18px 0 0; padding-top:12px; border-top:1px solid var(--a-lijn); }
.af__regels div{ display:flex; justify-content:space-between; gap:16px; padding:4px 0; font-size:15px; color:var(--a-tekst2); }
.af__regels dd{ margin:0; font-variant-numeric:tabular-nums; }
.af__regels .af__totaal{ padding-top:8px; font-size:17px; font-weight:600; color:var(--a-tekst); }
.af__samen .ak__per{ margin-top:12px; font-size:14px; line-height:1.45; }
.ac__keuze{ position:relative; }
.ac__keuze select{ display:block; width:100%; margin-top:4px; padding:0 24px 0 0; border:0; outline:0; background:transparent;
  font:400 17px/1.35 var(--sf); letter-spacing:-.022em; color:var(--a-tekst); -webkit-appearance:none; appearance:none; cursor:pointer; }
.ac__keuze::after{ content:""; position:absolute; right:18px; bottom:19px; width:7px; height:7px; pointer-events:none;
  border-right:2px solid #A1A1A6; border-bottom:2px solid #A1A1A6; transform:rotate(45deg); }
.af__akkoord{ display:flex; align-items:flex-start; gap:10px; margin:22px 4px 0; font-size:15px; line-height:1.45; color:var(--a-tekst); cursor:pointer; }
.af__akkoord input{ flex:none; width:20px; height:20px; margin:1px 0 0; accent-color:var(--a-blauw-tekst); }
.af__akkoord a{ color:var(--a-blauw-tekst); text-decoration:none; }
#afVorm .ac__hint{ margin-top:10px; }
/* ---- bestellen in stappen: gegevens, betaalplan, overeenkomst (20-10) ---- */
.af__stap{ margin:10px 0 0; font-size:15px; line-height:1.4; color:var(--a-tekst2); }
.af__stap:empty{ display:none; }
#afVorm{ margin-top:4px; }
.ac__rij3{ display:grid; grid-template-columns:1.25fr 1fr .85fr; }
.ac__rij3 > .ac__veld + .ac__veld{ border-top:0; margin-left:0; padding-left:14px; box-shadow:inset 1px 0 0 var(--a-lijn); }
.ac__rij3 + .ac__veld{ border-top:1px solid var(--a-lijn); margin-left:16px; padding-left:0; }
.ac__veld input[aria-invalid="true"], .ac__keuze select[aria-invalid="true"]{ text-decoration:underline wavy var(--a-tekst2) 1px; text-underline-offset:4px; }
.ac__veld:has([aria-invalid="true"]) span{ color:var(--a-tekst); font-weight:600; }
.ac__veld input::placeholder{ color:#C7C7CC; }
.ac__hint[data-stand="ok"]{ color:var(--a-tekst); }
.ac__hint[data-stand="ok"]::before{ content:""; display:inline-block; width:9px; height:5px; margin:0 8px 3px 2px;
  border-left:2px solid var(--a-blauw-tekst); border-bottom:2px solid var(--a-blauw-tekst); transform:rotate(-45deg); }
.af__plannen .ak__rij{ cursor:pointer; }
.af__plannen input{ position:absolute; opacity:0; pointer-events:none; }
.af__vink{ flex:none; display:grid; place-items:center; width:24px; height:24px; border-radius:50%; box-shadow:inset 0 0 0 2px #C4C4C9; transition:background-color .2s, box-shadow .2s; }
.af__plannen input:checked + .af__vink{ background:var(--a-blauw-tekst); box-shadow:none; }
.af__plannen input:checked + .af__vink::after{ content:""; width:9px; height:5px; margin-bottom:2px; border-left:2px solid #fff; border-bottom:2px solid #fff; transform:rotate(-45deg); }
.af__plannen input:focus-visible + .af__vink{ outline:2px solid var(--a-blauw-tekst); outline-offset:2px; }
.af__contract{ max-height:min(54vh,480px); overflow:auto; padding:20px 22px; background:var(--a-wit); border-radius:18px;
  font-size:14px; line-height:1.6; color:var(--a-tekst); white-space:pre-wrap; overflow-wrap:anywhere; overscroll-behavior:contain; }
.af__contract:focus-visible{ outline:2px solid var(--a-blauw-tekst); outline-offset:2px; }
.af__doek-wrap{ position:relative; background:var(--a-wit); border-radius:18px; }
.af__doek-wrap::after{ content:""; position:absolute; left:22px; right:22px; bottom:46px; border-bottom:1px dashed #D1D1D6; pointer-events:none; }
.af__doek{ display:block; width:100%; height:190px; border-radius:18px; touch-action:none; cursor:crosshair; }
.af__doek-hint{ position:absolute; inset:0; display:grid; place-items:center; padding-bottom:28px; pointer-events:none; font-size:15px; color:var(--a-tekst2); }
.af__wis{ position:absolute; top:12px; right:16px; font-size:15px; }
@media (max-width:560px){ .ak__als{ top:60px; font-size:14px; } .af__samen{ padding:20px; } .ac__rij3{ grid-template-columns:1.2fr 1fr .8fr; } }

/* ---- de oplevering in het account: stappen, de nieuwe site, het domein (20-10) ---- */
.ak__verborgen{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.ak__stap{ flex:none; display:grid; place-items:center; width:30px; height:30px; border-radius:50%; background:var(--a-grond);
  color:var(--a-tekst2); font:600 14px/1 var(--sf); font-variant-numeric:tabular-nums; }
.ak__stap[data-af]{ background:var(--a-blauw-tekst); color:#fff; }
.ak__stap[data-af]::after{ content:""; width:10px; height:5px; margin-bottom:3px; border-left:2px solid #fff; border-bottom:2px solid #fff; transform:rotate(-45deg); }
.ak__stap[data-nu]{ box-shadow:inset 0 0 0 2px var(--a-blauw-tekst); color:var(--a-blauw-tekst); }
.ak__lijst--kaal .ak__stap + .ak__tekst{ margin-left:0; }
.ak__blok{ margin-top:16px; padding:20px 22px; background:var(--a-wit); border-radius:22px; }
.ak__blok h3{ font:600 17px/1.3 var(--sf); letter-spacing:-.02em; color:var(--a-tekst); }
.ak__blok > p{ margin-top:6px; font-size:15px; line-height:1.45; color:var(--a-tekst2); text-wrap:pretty; }
.ak__blok .ac__groep{ margin-top:14px; background:var(--a-grond); }
.ak__blok .ac__knop.btn{ margin-top:14px; }
.ak__seg{ display:inline-flex; margin-top:14px; padding:3px; border-radius:999px; background:var(--a-grond); }
.ak__seg button{ min-height:32px; padding:0 14px; border:0; border-radius:999px; background:none; font:500 14px/1 var(--sf); color:var(--a-tekst2); cursor:pointer; }
.ak__seg button[aria-pressed="true"]{ background:var(--a-wit); color:var(--a-tekst); box-shadow:0 1px 3px rgba(0,0,0,.08); }
.ak__beeld{ position:relative; margin:14px 0 0; border-radius:14px; overflow:hidden; background:var(--a-grond); aspect-ratio:16/10; }
.ak__beeld[data-soort="mobiel"]{ width:min(100%,260px); aspect-ratio:9/19; margin-inline:auto; border-radius:22px; }
.ak__beeld img{ display:block; width:100%; height:100%; object-fit:cover; object-position:top; }
.ak__beeld figcaption{ position:absolute; inset:0; display:grid; place-items:center; padding:16px; text-align:center; font-size:14px; color:var(--a-tekst2); }
.ak__beeld img:not([src]), .ak__beeld img[data-stand="mis"]{ visibility:hidden; }
.ac__veld textarea{ display:block; width:100%; min-height:88px; margin-top:4px; border:0; outline:0; background:transparent; padding:0; resize:vertical;
  font:400 17px/1.4 var(--sf); letter-spacing:-.022em; color:var(--a-tekst); }
.ak__knoppen{ display:flex; gap:10px; margin-top:14px; }
.ak__knoppen .btn{ flex:1; min-height:48px; border:0; cursor:pointer; }
.ak__knoppen .btn:disabled{ opacity:.55; cursor:default; }
.ak__knop2.btn{ background:var(--a-grond); color:var(--a-tekst); }
.ak__stappen-uitleg{ list-style:none; margin:14px 0 0; padding:0; counter-reset:u; }
.ak__stappen-uitleg li{ position:relative; padding-left:34px; font-size:15px; line-height:1.45; color:var(--a-tekst); }
.ak__stappen-uitleg li + li{ margin-top:10px; }
.ak__stappen-uitleg li::before{ counter-increment:u; content:counter(u); position:absolute; left:0; top:0; width:22px; height:22px; border-radius:50%;
  display:grid; place-items:center; background:var(--a-grond); font:600 12px/1 var(--sf); color:var(--a-tekst2); }
.ak__records{ width:100%; margin-top:14px; border-collapse:collapse; font-size:14px; }
.ak__records th{ padding:0 8px 6px 0; text-align:left; font-weight:500; color:var(--a-tekst2); }
.ak__records td{ padding:8px 8px 8px 0; border-top:1px solid var(--a-lijn); vertical-align:middle; }
.ak__records code{ font:500 14px/1.4 ui-monospace,"SF Mono",Menlo,monospace; overflow-wrap:anywhere; color:var(--a-tekst); }
.ak__records td:last-child{ text-align:right; padding-right:0; }
.ak__blok details{ margin-top:14px; font-size:14px; color:var(--a-tekst2); }
.ak__blok summary{ cursor:pointer; color:var(--a-blauw-tekst); }
.ak__blok pre{ margin:10px 0 6px; padding:12px 14px; border-radius:12px; background:var(--a-grond); white-space:pre-wrap; font:13px/1.5 ui-monospace,"SF Mono",Menlo,monospace; color:var(--a-tekst); }
.ak__links{ display:flex; flex-wrap:wrap; gap:4px 18px; margin-top:12px; }
.ak__links .ac__tekstknop, .ak__links a{ font-size:15px; color:var(--a-blauw-tekst); text-decoration:none; }
.ak__tijdlijn{ list-style:none; margin:10px 0 0; padding:0; font-size:13px; line-height:1.45; color:var(--a-tekst2); }
.ak__tijdlijn li + li{ margin-top:4px; }
@media (max-width:560px){ .ak__blok{ padding:18px; } .ak__knoppen{ flex-direction:column; } }
@media (prefers-reduced-motion:reduce){
  .ac__stuk, .ak, .ak__open, a.ak__rij::after, button.ak__rij::after, .af__vink{ animation:none; transition:none; }
}