/* afspraak.vdham.nl — moderne variant (ontwerp 2026-10-07, "modern").
   Huisstijl Van der Ham: #004D4C groen, #0059FF blauw, #B36300 bruin, #FF653E tomaat, #D6D6D6 grijs;
   Chap voor koppen, PP Fraktion Mono voor tekst (zelf gehost). Alleen licht thema (geen dark mode).
   Patronen: gekleurde band met stappenbalk, witte kaart die over de band valt, tegels met pictogram
   en duur, maandkalender, tijden als chips per dagdeel, vaste samenvatting (zijbalk breed,
   onderbalk telefoon), zachte schaduwen, kleine animaties (uit bij prefers-reduced-motion).
   Contrast: nooit witte tekst op tomaat of bruin (alleen de grote witte Chap-kop op bruin).
   Afronding staat in drie variabelen: zet --r-kaart/--r-veld/--r-knop op 0 voor de
   rechthoekige vdham.nl-look. */

@font-face { font-family: "PP Fraktion Mono"; src: url("PPFraktionMono-Light.otf") format("opentype");
             font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "PP Fraktion Mono"; src: url("PPFraktionMono-Regular.otf") format("opentype");
             font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "PP Fraktion Mono"; src: url("PPFraktionMono-Bold.otf") format("opentype");
             font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Chap"; src: url("Chap-Light.otf") format("opentype");
             font-weight: 300; font-style: normal; font-display: swap; }

:root {
  --groen: #004D4C;
  --groen-donker: #003736;
  --groen-zacht: #E2ECEB;          /* lichte tint van het groen, voor vlakken */
  --blauw: #0059FF;
  --bruin: #B36300;
  --tomaat: #FF653E;
  --tomaat-zacht: #FFE5DC;
  --grijs: #D6D6D6;
  --grond: #EDEDEB;                /* paginagrond: lichte tint van #D6D6D6 */
  --wit: #FFFFFF;
  --inkt: #141414;
  --inkt-zacht: #555555;           /* 7,5:1 op wit */
  --lijn: #E4E4E2;
  --mono: "PP Fraktion Mono", Arial, sans-serif;
  --chap: "Chap", "Palatino Linotype", Georgia, serif;
  --r-kaart: 22px;
  --r-veld: 12px;
  --r-knop: 999px;
  --schaduw: 0 1px 2px rgba(0, 0, 0, .05), 0 14px 40px rgba(0, 45, 44, .10);
  --schaduw-hover: 0 10px 28px rgba(0, 45, 44, .14);
  --zacht: cubic-bezier(.2, .7, .2, 1);
  /* band (bovenvlak) per thema */
  --band: var(--groen);
  --band-inkt: var(--wit);
  --band-kop: var(--wit);
}
.thema-tomaat { --band: var(--tomaat); --band-inkt: var(--inkt); --band-kop: var(--inkt); }
.thema-bruin  { --band: var(--bruin);  --band-inkt: var(--inkt); --band-kop: var(--wit); }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--grond); }
body {
  margin: 0; min-height: 100vh; display: flex; flex-direction: column;
  background: var(--grond); color: var(--inkt);
  font-family: var(--mono); font-weight: 300; font-size: 16px; line-height: 26px; letter-spacing: .3px;
  -webkit-font-smoothing: antialiased;
}
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ic { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6;
      stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

a { color: var(--blauw); }
p a, .zij a:not(.wijzig), .melding a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
p a:hover { color: var(--groen); }
:focus-visible { outline: 3px solid var(--blauw); outline-offset: 2px; border-radius: 4px; }
.kop :focus-visible, .band :focus-visible { outline-color: var(--band-inkt); }

.overslaan { position: absolute; left: -9999px; top: 0; background: var(--wit); color: var(--inkt); padding: 12px; z-index: 50; }
.overslaan:focus { left: 16px; top: 16px; }

h1, h2, h3 { font-weight: 300; margin: 0; }

/* ── Kop: in de bandkleur, loopt naadloos over in de band ── */
.kop { background: var(--band); color: var(--band-inkt); display: flex; align-items: center;
       justify-content: space-between; gap: 16px; padding: 18px max(24px, calc((100% - 1120px) / 2 + 24px)) 0; }
.kop-merk { display: inline-flex; align-items: center; gap: 12px; color: var(--band-inkt); text-decoration: none;
            font-family: var(--chap); font-size: 22px; letter-spacing: .3px; }
.kop-merk img { display: block; width: 21px; height: 26px; }
.thema-grijs .kop-merk img, .thema-groen .kop-merk img { filter: invert(1); }
.kop-nav { display: flex; align-items: center; gap: 8px 26px; flex-wrap: wrap; justify-content: flex-end; }
.kop-nav form { margin: 0; }
.kop-nav a, .kop-nav button {
  font-family: var(--mono); font-size: 13px; font-weight: 700; line-height: 20px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--band-inkt); background: none; border: 0; padding: 6px 0;
  border-bottom: 1px solid transparent; cursor: pointer; text-decoration: none; transition: border-color .2s;
}
.kop-nav a:hover, .kop-nav button:hover, .kop-nav a[aria-current] { border-bottom-color: currentColor; }
.kop-nav .kop-login { background: var(--wit); color: var(--groen); border: 0; border-radius: var(--r-knop);
                      padding: 8px 18px; transition: transform .15s var(--zacht), box-shadow .2s; }
.kop-nav .kop-login:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0, 0, 0, .18); }
.thema-tomaat .kop-nav .kop-login, .thema-bruin .kop-nav .kop-login { color: var(--inkt); }

/* ── Band met kop en stappenbalk ── */
.band { background: var(--band); color: var(--band-inkt); padding: 44px 24px 108px; }
.band-in { max-width: 1072px; margin: 0 auto; }
.smal .band-in { max-width: 760px; }
.band-boven { margin: 0 0 10px; font-size: 13px; font-weight: 700; line-height: 20px; letter-spacing: .12em;
              text-transform: uppercase; opacity: .85; }
.band h1 { font-family: var(--chap); font-size: 54px; line-height: 1.04; letter-spacing: .3px; color: var(--band-kop);
           animation: omhoog .5s var(--zacht) both; }

.stappen { list-style: none; display: flex; margin: 36px 0 0; padding: 0; max-width: 760px; counter-reset: s; }
.stap { flex: 1; position: relative; text-align: center; min-width: 0; }
.stap + .stap::before { content: ""; position: absolute; top: 16px; right: 50%; width: 100%; height: 2px;
                        background: rgba(255, 255, 255, .28); transform: translateX(-0px); z-index: 0; }
.thema-tomaat .stap + .stap::before, .thema-bruin .stap + .stap::before { background: rgba(0, 0, 0, .25); }
.stap-klaar + .stap::before { background: var(--tomaat); }
.stap a, .stap-in { position: relative; z-index: 1; display: inline-flex; flex-direction: column; align-items: center;
                    gap: 8px; color: inherit; text-decoration: none; }
.stap-bol { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
            font-size: 14px; font-weight: 700; line-height: 1; letter-spacing: 0;
            border: 2px solid rgba(255, 255, 255, .45); background: var(--band); color: var(--band-inkt);
            transition: transform .2s var(--zacht), background .2s; }
.stap-bol .ic { width: 18px; height: 18px; stroke-width: 2.4; }
.stap-label { font-size: 12px; font-weight: 700; line-height: 16px; letter-spacing: .08em; text-transform: uppercase;
              opacity: .7; white-space: nowrap; }
.stap-nu .stap-bol { background: var(--wit); color: var(--groen); border-color: var(--wit);
                     box-shadow: 0 0 0 6px rgba(255, 255, 255, .18); }
.stap-nu .stap-label, .stap-klaar .stap-label { opacity: 1; }
.stap-klaar .stap-bol { background: var(--tomaat); border-color: var(--tomaat); color: var(--inkt); }
.stap a:hover .stap-bol { transform: scale(1.08); }
.stap a:hover .stap-label { text-decoration: underline; text-underline-offset: 3px; }
.thema-tomaat .stap-bol, .thema-bruin .stap-bol { border-color: rgba(0, 0, 0, .35); }
.stap-tekst { display: none; margin: 14px 0 0; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }

/* ── Raam: kaart (+ zijbalk), valt over de band ── */
.raam { position: relative; width: 100%; max-width: 808px; margin: -72px auto 0; padding: 0 24px 80px;
        display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: start; flex: 1; }
.raam.met-zij { max-width: 1120px; grid-template-columns: minmax(0, 1fr) 320px; }
.kaart { background: var(--wit); border-radius: var(--r-kaart); box-shadow: var(--schaduw); padding: 40px;
         container-type: inline-size; animation: omhoog .45s var(--zacht) both; min-width: 0; }
.zij { background: var(--wit); border-radius: var(--r-kaart); box-shadow: var(--schaduw); padding: 28px;
       position: sticky; top: 24px; animation: omhoog .45s .08s var(--zacht) both; }

@keyframes omhoog { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes in { from { opacity: 0; transform: translateY(6px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes draai { to { transform: rotate(360deg); } }

.intro { margin: 0 0 28px; color: var(--inkt-zacht); }
.groet { color: var(--inkt); }
.midden { text-align: center; }
p { margin: 0 0 16px; }
.onder { margin: 32px 0 0; padding-top: 18px; border-top: 1px solid var(--lijn); color: var(--inkt-zacht); font-size: 15px; }
.onder-tekst { margin: 22px 0 0; font-size: 14px; line-height: 22px; color: var(--inkt-zacht); }
.hulp { margin: 14px 0 0; font-size: 14px; line-height: 22px; color: var(--inkt-zacht); }

.melding { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 24px; padding: 12px 16px;
           background: var(--tomaat-zacht); border-left: 4px solid var(--tomaat); border-radius: var(--r-veld);
           color: var(--inkt); font-weight: 400; animation: in .3s var(--zacht) both; }
.melding .ic { margin-top: 3px; color: var(--inkt); }

/* ── Knoppen ── */
.knop { display: inline-flex; align-items: center; justify-content: center; gap: 10px; position: relative;
        min-height: 54px; padding: 0 28px; border: 0; border-radius: var(--r-knop);
        background: var(--groen); color: var(--wit); box-shadow: 0 8px 18px rgba(0, 77, 76, .22);
        font-family: var(--mono); font-size: 15px; font-weight: 700; line-height: 18px; letter-spacing: .08em;
        text-transform: uppercase; text-decoration: none; cursor: pointer;
        transition: background .2s, transform .12s var(--zacht), box-shadow .2s; }
.knop:hover { background: var(--groen-donker); box-shadow: 0 10px 24px rgba(0, 77, 76, .3); }
.knop:active { transform: scale(.98); }
.knop .ic { width: 18px; height: 18px; stroke-width: 2; transition: transform .2s var(--zacht); }
.knop:hover .ic { transform: translateX(3px); }
.knop-groot { min-height: 60px; padding: 0 34px; }
.knop-licht { background: var(--groen-zacht); color: var(--groen); box-shadow: none; }
.knop-licht:hover { background: #D2E2E1; box-shadow: none; }
.knop-rand { background: var(--wit); color: var(--inkt); border: 1.5px solid var(--grijs); box-shadow: none;
             min-height: 44px; padding: 0 18px; font-size: 13px; }
.knop-rand:hover { background: var(--wit); border-color: var(--inkt); box-shadow: none; }
.knop-rood { background: var(--tomaat); color: var(--inkt); box-shadow: 0 8px 18px rgba(255, 101, 62, .3); }
.knop-rood:hover { background: #F4532A; }

/* laadindicator (site.js zet .bezig bij versturen) */
.bezig { color: transparent !important; pointer-events: none; }
.bezig .ic { visibility: hidden; }
.bezig::after { content: ""; position: absolute; inset: 0; margin: auto; width: 20px; height: 20px; border-radius: 50%;
                border: 2px solid rgba(255, 255, 255, .35); border-top-color: var(--wit); animation: draai .7s linear infinite; }
.knop-rood.bezig::after, .knop-rand.bezig::after, .knop-licht.bezig::after,
.chip.bezig::after, .tegel.bezig::after { border-color: rgba(0, 77, 76, .2); border-top-color: var(--groen); }
.tegel.bezig::after { left: auto; right: 22px; }
.tegel.bezig .tegel-pijl { visibility: hidden; }

.terug, .actie { display: inline-flex; align-items: center; gap: 8px; padding: 12px 0; color: var(--blauw);
                 font-size: 14px; font-weight: 700; line-height: 18px; letter-spacing: .08em; text-transform: uppercase;
                 text-decoration: none; transition: gap .2s var(--zacht), color .2s; }
.terug:hover, .actie:hover { gap: 12px; color: var(--groen); }
.terug .ic, .actie .ic { width: 18px; height: 18px; stroke-width: 2; }
.acties { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; margin-top: 28px; }
.acties form { margin: 0; }
.acties.midden { justify-content: center; }

/* ── Tegels (types, medewerkers) ── */
.tegels { display: grid; gap: 12px; }
.tegels form { margin: 0; }
.tegels form:nth-child(1) { animation: in .35s .05s var(--zacht) both; }
.tegels form:nth-child(2) { animation: in .35s .09s var(--zacht) both; }
.tegels form:nth-child(3) { animation: in .35s .13s var(--zacht) both; }
.tegels form:nth-child(4) { animation: in .35s .17s var(--zacht) both; }
.tegels form:nth-child(5) { animation: in .35s .21s var(--zacht) both; }
.tegels form:nth-child(n+6) { animation: in .35s .25s var(--zacht) both; }
.tegel { width: 100%; height: 100%; display: flex; align-items: center; gap: 16px; position: relative;
         padding: 18px 20px; text-align: left; cursor: pointer; color: var(--inkt);
         background: var(--wit); border: 1.5px solid var(--grijs); border-radius: 16px;
         font-family: var(--mono); font-size: 15px; letter-spacing: .3px;
         transition: border-color .2s, box-shadow .25s, transform .2s var(--zacht), background .2s; }
.tegel:hover { border-color: var(--groen); box-shadow: var(--schaduw-hover); transform: translateY(-2px); }
.tegel:active { transform: translateY(0) scale(.99); }
.tegel.gekozen { border-color: var(--groen); background: var(--groen-zacht); }
.tegel-ic, .avatar { width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center; flex: none; }
.tegel-ic { background: var(--groen-zacht); color: var(--groen); transition: background .2s, color .2s; }
.tegel-ic .ic { width: 26px; height: 26px; stroke-width: 1.5; }
.tegel:hover .tegel-ic { background: var(--groen); color: var(--wit); }
.tegel.gekozen .tegel-ic { background: var(--wit); }
.tegel-tekst { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.tegel-naam { font-family: var(--chap); font-size: 23px; line-height: 1.15; letter-spacing: .2px; }
.chip-duur { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; line-height: 16px;
             letter-spacing: .08em; text-transform: uppercase; color: var(--inkt-zacht); }
.chip-duur .ic { width: 15px; height: 15px; }
.chip-tip { display: inline-block; padding: 2px 10px; border-radius: 999px; background: var(--tomaat); color: var(--inkt);
            font-size: 11px; font-weight: 700; line-height: 18px; letter-spacing: .08em; text-transform: uppercase; }
.tegel-pijl { color: var(--grijs); transition: transform .2s var(--zacht), color .2s; }
.tegel:hover .tegel-pijl { color: var(--groen); transform: translateX(4px); }
.avatar { font-family: var(--chap); font-size: 25px; line-height: 1; }
.av-0 { background: var(--groen); color: var(--wit); }
.av-1 { background: var(--blauw); color: var(--wit); }
.av-2 { background: var(--tomaat); color: var(--inkt); }
.av-3 { background: var(--bruin); color: var(--inkt); }
@container (min-width: 560px) {
  .tegels { grid-template-columns: 1fr 1fr; }
}

/* ── Planner: maandkalender + tijden ── */
.planner { display: grid; gap: 28px; }
@container (min-width: 600px) {
  .planner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 36px; }
  .tijdkeuze { border-left: 1px solid var(--lijn); padding-left: 36px; }
}
.kal-kop { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.kal-kop h2 { font-family: var(--chap); font-size: 26px; line-height: 1.1; text-transform: capitalize; }
.kal-nav { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; flex: none;
           border: 1.5px solid var(--grijs); color: var(--inkt); text-decoration: none; transition: background .2s, border-color .2s; }
.kal-nav:hover { background: var(--groen-zacht); border-color: var(--groen); }
.kal-nav.uit { opacity: .3; }
.kal-raster { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.kal-wd { text-align: center; font-size: 11px; font-weight: 700; line-height: 16px; letter-spacing: .08em;
          text-transform: uppercase; color: var(--inkt-zacht); padding-bottom: 6px; }
.kal-dag { justify-self: center; width: 100%; max-width: 44px; aspect-ratio: 1; border-radius: 50%; display: grid;
           place-items: center; position: relative; font-size: 15px; font-weight: 400; color: #A3A3A3;
           text-decoration: none; letter-spacing: 0; }
.kal-dag.vrij { background: var(--groen-zacht); color: var(--inkt); font-weight: 700; cursor: pointer;
                transition: background .2s, color .2s, transform .15s var(--zacht); }
.kal-dag.vrij::after { content: ""; position: absolute; bottom: 5px; left: 50%; width: 4px; height: 4px; margin-left: -2px;
                       border-radius: 50%; background: var(--tomaat); }
.kal-dag.vrij:hover { background: var(--groen); color: var(--wit); transform: scale(1.06); }
.kal-dag.gekozen, .kal-dag.gekozen:hover { background: var(--groen); color: var(--wit); transform: none;
                                           box-shadow: 0 0 0 3px var(--wit), 0 0 0 5px var(--groen); }
.kal-dag.gekozen::after { background: var(--wit); }
.kal-dag.vandaag:not(.vrij) { box-shadow: inset 0 0 0 1.5px var(--grijs); }
.kal-uitleg { display: flex; align-items: center; gap: 8px; margin: 14px 0 0; font-size: 12px; line-height: 16px; color: var(--inkt-zacht); }
.kal-bolletje { width: 14px; height: 14px; border-radius: 50%; background: var(--groen-zacht); position: relative; }
.kal-bolletje::after { content: ""; position: absolute; bottom: 2px; left: 5px; width: 4px; height: 4px; border-radius: 50%; background: var(--tomaat); }

.tijdkeuze { min-width: 0; scroll-margin-top: 16px; }
.tijd-kop { font-family: var(--chap); font-size: 26px; line-height: 1.1; margin-bottom: 4px; outline: none; }
.tijd-kop::first-letter { text-transform: uppercase; }
.dagdeel { display: flex; align-items: center; gap: 8px; margin: 20px 0 10px; font-family: var(--mono);
           font-size: 12px; font-weight: 700; line-height: 16px; letter-spacing: .08em; text-transform: uppercase; color: var(--inkt-zacht); }
.dagdeel .ic { width: 17px; height: 17px; color: var(--groen); }
.aantal { margin-left: 2px; padding: 0 7px; border-radius: 999px; background: var(--grond); color: var(--inkt-zacht); letter-spacing: 0; }
.chips { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; }
.chips form { margin: 0; animation: in .3s var(--zacht) both; }
.chips form:nth-child(2) { animation-delay: .03s; } .chips form:nth-child(3) { animation-delay: .06s; }
.chips form:nth-child(4) { animation-delay: .09s; } .chips form:nth-child(5) { animation-delay: .12s; }
.chips form:nth-child(6) { animation-delay: .15s; } .chips form:nth-child(n+7) { animation-delay: .18s; }
.chip { width: 100%; position: relative; padding: 11px 0; border: 1.5px solid var(--grijs); border-radius: var(--r-knop);
        background: var(--wit); color: var(--inkt); cursor: pointer; font-family: var(--mono); font-size: 16px;
        font-weight: 400; line-height: 20px; letter-spacing: .5px;
        transition: border-color .15s, background .15s, color .15s, transform .12s var(--zacht); }
.chip:hover { border-color: var(--groen); background: var(--groen-zacht); }
.chip:active { transform: scale(.96); }
.chip.gekozen { background: var(--groen); border-color: var(--groen); color: var(--wit); }

/* lege toestand */
.leeg { text-align: center; padding: 20px 8px; }
.leeg-ic { width: 68px; height: 68px; margin: 0 auto 16px; border-radius: 50%; display: grid; place-items: center;
           background: var(--groen-zacht); color: var(--groen); }
.leeg-ic .ic { width: 30px; height: 30px; stroke-width: 1.4; }
.thema-tomaat .leeg-ic { background: var(--tomaat-zacht); color: var(--inkt); }
.thema-bruin .leeg-ic { background: #F3E6D6; color: var(--inkt); }
.leeg h2 { font-family: var(--chap); font-size: 26px; line-height: 1.15; margin-bottom: 10px; }
.leeg p { color: var(--inkt-zacht); }
.leeg .knop { margin-top: 8px; }

/* ── Formulieren ── */
.formulier { max-width: 440px; }
.veld { margin: 0 0 20px; }
fieldset.veld { border: 0; padding: 0; min-width: 0; }
label, legend { display: block; margin: 0 0 8px; padding: 0; font-size: 12px; font-weight: 700; line-height: 16px;
                letter-spacing: .08em; text-transform: uppercase; color: var(--inkt-zacht); }
input { width: 100%; padding: 14px 16px; margin: 0; font-family: var(--mono); font-size: 18px; font-weight: 400;
        line-height: 24px; letter-spacing: .5px; color: var(--inkt); background: #FAFAF9;
        border: 1.5px solid var(--grijs); border-radius: var(--r-veld);
        transition: border-color .15s, box-shadow .15s, background .15s; }
input::placeholder { color: #8A8A8A; }
input:hover { border-color: #BDBDBD; }
input:focus { outline: none; border-color: var(--groen); background: var(--wit); box-shadow: 0 0 0 4px rgba(0, 77, 76, .14); }
textarea { width: 100%; min-height: 96px; padding: 14px 16px; margin: 0; font-family: var(--mono); font-size: 16px;
           font-weight: 400; line-height: 24px; letter-spacing: .3px; color: var(--inkt); background: #FAFAF9;
           border: 1.5px solid var(--grijs); border-radius: var(--r-veld); resize: vertical;
           transition: border-color .15s, box-shadow .15s, background .15s; }
textarea:hover { border-color: #BDBDBD; }
textarea:focus { outline: none; border-color: var(--groen); background: var(--wit); box-shadow: 0 0 0 4px rgba(0, 77, 76, .14); }
.optioneel { font-weight: 400; text-transform: none; letter-spacing: .02em; }
.teller { margin: 6px 0 0; font-size: 12px; line-height: 16px; color: var(--inkt-zacht); text-align: right; }
.teller.vol { color: var(--inkt); font-weight: 700; }
.bevestig-formulier { margin-top: 26px; }
.bevestig-formulier .acties { margin-top: 8px; }
/* nieuwe klant: gegevensformulier en bevestigen */
.veld-rij { display: grid; grid-template-columns: 9.5em minmax(0, 1fr); gap: 0 12px; }
.veld-fout { margin: 6px 0 0; font-size: 13px; line-height: 18px; font-weight: 700; color: #A3250A; }
input[aria-invalid="true"] { border-color: #C2410C; background: #FFF7F4; }
.gegevens-overzicht { margin-bottom: 20px; }
.gegevens-overzicht .ov-tekst { line-height: 23px; overflow-wrap: anywhere; }
.opmerking-tekst { white-space: pre-line; }
.wijzig-knop { align-self: flex-start; background: none; border: 0; padding: 0; cursor: pointer; font-family: var(--mono); }
.knop-link { background: none; border: 0; cursor: pointer; font-family: var(--mono); }
.code-blok { margin-top: 4px; }
.klein { font-size: 13px; color: var(--inkt-zacht); }
/* inloggen: tweede, ondergeschikte route voor wie nog geen klantnummer heeft */
.tweede-route { max-width: 440px; margin: 22px 0 0; }
.tweede-of { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; font-size: 12px; font-weight: 700;
             line-height: 16px; letter-spacing: .08em; text-transform: uppercase; color: var(--inkt-zacht); }
.tweede-of::before, .tweede-of::after { content: ""; flex: 1; height: 1px; background: var(--lijn); }
.knop-twee { min-height: 60px; padding: 10px 22px; gap: 14px; text-align: left; }
.knop-twee-tekst { display: flex; flex-direction: column; gap: 2px; }
.knop-twee-boven { font-size: 14px; line-height: 18px; }
.knop-twee-onder { font-size: 12px; font-weight: 400; line-height: 16px; letter-spacing: .02em; text-transform: none;
                   color: var(--inkt-zacht); }
.datum { display: grid; grid-template-columns: 1fr 1fr 1.6fr; gap: 12px; }
.datum label { font-size: 11px; font-weight: 400; margin-bottom: 6px; }
.formulier .knop { margin-top: 6px; }
.code-veld { font-size: 30px; line-height: 36px; letter-spacing: .45em; text-align: center; padding: 14px 0 14px .45em; max-width: 300px; }
.geruststelling { display: flex; gap: 10px; align-items: flex-start; margin: 26px 0 0; padding: 12px 14px;
                  border-radius: var(--r-veld); background: var(--grond); font-size: 13px; line-height: 20px; color: var(--inkt-zacht); }
.geruststelling .ic { width: 18px; height: 18px; margin-top: 1px; color: var(--groen); }
.sms-melding { display: flex; gap: 14px; align-items: center; margin: 0 0 26px; padding: 16px 18px;
               border-radius: 16px; background: var(--groen-zacht); }
.sms-melding p { margin: 0; color: var(--inkt); font-weight: 400; font-size: 15px; line-height: 23px; }
.sms-ic { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; flex: none;
          background: var(--groen); color: var(--wit); }

/* ── Overzicht (bevestigen, bevestigd, annuleren) ── */
.overzicht { list-style: none; margin: 0 0 8px; padding: 0; border: 1.5px solid var(--grijs); border-radius: 16px; }
.overzicht li { display: flex; align-items: center; gap: 14px; padding: 15px 18px; }
.overzicht li + li { border-top: 1px solid var(--lijn); }
.ov-ic { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; flex: none;
         background: var(--groen-zacht); color: var(--groen); }
.ov-tekst { flex: 1; min-width: 0; font-weight: 400; }
.ov-tekst small, .zij-lijst small { display: block; font-size: 11px; font-weight: 700; line-height: 16px; letter-spacing: .08em;
                                    text-transform: uppercase; color: var(--inkt-zacht); }
.wijzig { flex: none; margin-left: auto; font-size: 13px; font-weight: 700; letter-spacing: .04em; color: var(--blauw);
          text-decoration: underline; text-underline-offset: 3px; }
.wijzig:hover { color: var(--groen); }

/* ── Zijbalk en onderbalk ── */
.zij-kop { font-family: var(--chap); font-size: 24px; line-height: 1.1; margin: 0 0 10px; }
.zij-lijst { list-style: none; margin: 0; padding: 0; }
.zij-lijst li { display: flex; align-items: flex-start; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--lijn);
                font-size: 15px; line-height: 22px; font-weight: 400; }
.zij-lijst .ic { color: var(--groen); margin-top: 8px; }
.zij-lijst li.open > span { color: #8A8A8A; font-weight: 300; }
.zij-lijst li.open .ic { color: var(--grijs); }
.zij-hulp { display: flex; gap: 10px; align-items: flex-start; margin: 16px 0 0; font-size: 14px; line-height: 22px; color: var(--inkt-zacht); }
.zij-hulp .ic { color: var(--groen); margin-top: 1px; }
.onderbalk { display: none; }

/* ── Mijn afspraken ── */
.afspraken { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.afspraak { display: flex; align-items: center; gap: 16px; padding: 14px; border: 1.5px solid var(--grijs); border-radius: 16px;
            animation: in .35s var(--zacht) both; }
.afspraak:nth-child(2) { animation-delay: .06s; } .afspraak:nth-child(n+3) { animation-delay: .12s; }
.datumtegel { width: 66px; flex: none; display: flex; flex-direction: column; align-items: center; padding: 8px 0;
              border-radius: 14px; background: var(--groen); color: var(--wit); }
.datumtegel strong { font-family: var(--chap); font-weight: 300; font-size: 30px; line-height: 32px; }
.datumtegel small { font-size: 11px; font-weight: 700; line-height: 14px; letter-spacing: .08em; text-transform: uppercase; }
.afspraak-tekst { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.afspraak-tekst strong { font-family: var(--chap); font-weight: 300; font-size: 22px; line-height: 1.2; }
.afspraak-tekst span { display: flex; align-items: center; gap: 6px; font-size: 14px; line-height: 21px; color: var(--inkt-zacht); }
.afspraak-tekst .ic { width: 16px; height: 16px; color: var(--groen); }
.afspraak-actie { flex: none; max-width: 230px; }
.afspraak-actie form { margin: 0; }
.afspraak-actie small { display: block; font-size: 13px; line-height: 19px; color: var(--inkt-zacht); }

/* ── Bevestigd: vinkje dat zichzelf tekent ── */
.vinkje { width: 92px; height: 92px; margin: 0 auto 14px; }
.vinkje svg { width: 100%; height: 100%; }
.vinkje circle { fill: var(--groen); transform-origin: center; animation: plop .45s var(--zacht) both; }
.vinkje path { fill: none; stroke: var(--wit); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round;
               stroke-dasharray: 40; stroke-dashoffset: 40; animation: teken .45s .35s ease-out forwards; }
@keyframes plop { from { transform: scale(.4); opacity: 0; } 70% { transform: scale(1.06); opacity: 1; } to { transform: scale(1); } }
@keyframes teken { to { stroke-dashoffset: 0; } }

/* ── Voet: wit, zoals www.vdham.nl ── */
.voet { background: var(--wit); color: var(--inkt); padding: 80px 100px 0; }
.voet a { color: var(--inkt); text-decoration: none; }
.voet a:hover { color: var(--blauw); }
.voet-boven { display: grid; grid-template-columns: 136px auto 1fr auto; gap: 0 68px; align-items: start;
              max-width: 1240px; margin: 0 auto 60px; }
.voet-merk img { display: block; width: 110px; height: auto; }
.voet-menu { list-style: none; margin: -6px 0 0; padding: 0; }
.voet-menu a { display: inline-block; font-size: 16px; font-weight: 400; line-height: 26px; text-transform: uppercase; margin: 5px 0; }
.voet-contact { justify-self: end; font-size: 15px; line-height: 25px; }
.voet-contact p { margin: 0 0 25px; }
.voet-contact a { display: block; }
.voet-woordmerk { display: block; width: 80px; height: auto; }
.voet-onder { display: flex; justify-content: space-between; align-items: center; gap: 12px 54px; flex-wrap: wrap;
              max-width: 1240px; margin: 0 auto; border-top: 1px solid var(--inkt); min-height: 80px; font-size: 15px; }
.voet-onder p { margin: 0; }
.voet-onder nav { display: flex; gap: 0 54px; flex-wrap: wrap; }

/* ── Ingebedde modus (?inbed=1): geen kop en voet ── */
html:has(> body.inbed) { background: transparent; }
.inbed { min-height: 0; }
.inbed .band { padding: 32px 24px 96px; }
.inbed .raam { padding-bottom: 24px; }
.inbed .zij { position: static; }
.inbed-voet { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 24px 28px; font-size: 14px; line-height: 23px;
              color: var(--inkt-zacht); text-align: center; }
.inbed-voet a { color: var(--inkt); text-decoration: underline; text-underline-offset: 3px; }
.inbed-voet .tussen { padding: 0 8px; }

/* ── Smal (tablet en telefoon) ── */
@media (max-width: 959px) {
  .raam.met-zij { grid-template-columns: minmax(0, 1fr); max-width: 808px; }
  .zij { display: none; }
  .onderbalk { display: flex; align-items: center; gap: 12px; position: sticky; bottom: 0; z-index: 5;
               padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
               background: rgba(255, 255, 255, .96); border-top: 1px solid var(--lijn);
               box-shadow: 0 -8px 24px rgba(0, 0, 0, .08); animation: omhoog .4s .15s var(--zacht) both; }
  .inbed .onderbalk { position: static; margin: 0 16px 16px; border: 1.5px solid var(--grijs); border-radius: 16px; box-shadow: none; }
  .onderbalk-ic { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; flex: none;
                  background: var(--groen); color: var(--wit); }
  .onderbalk-tekst { min-width: 0; display: flex; flex-direction: column; }
  .onderbalk-tekst strong { font-size: 14px; font-weight: 700; line-height: 20px; }
  .onderbalk-tekst span { font-size: 13px; line-height: 19px; color: var(--inkt-zacht); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .raam:has(+ .onderbalk) { padding-bottom: 28px; }
  html:has(.onderbalk) { scroll-padding-bottom: 96px; }   /* focus/scrollen niet achter de vaste onderbalk */
  html:has(.inbed .onderbalk) { scroll-padding-bottom: 0; }
  .inbed .raam:has(+ .onderbalk) { padding-bottom: 16px; }
  .voet { padding: 50px; }
}
@media (max-width: 767px) {
  .voet-boven { grid-template-columns: 1fr 1fr; gap: 0 16px; margin-bottom: 30px; grid-template-areas: "menu contact" "merk woord"; }
  .voet-menu { grid-area: menu; margin: 0 0 40px; }
  .voet-menu a { font-size: 15px; line-height: 24px; }
  .voet-contact { grid-area: contact; justify-self: start; font-size: 14px; line-height: 23px; }
  .voet-merk { grid-area: merk; }
  .voet-merk img { width: 60px; }
  .voet-woordmerk { grid-area: woord; justify-self: end; width: 42px; }
  .voet-onder { padding: 24px 0; min-height: 0; font-size: 14px; line-height: 23px; align-items: flex-start; }
  .voet-onder nav { gap: 0 20px; }
}
@media (max-width: 599px) {
  .kop { padding: 14px 16px 0; }
  .kop-merk span { display: none; }
  .kop-nav { gap: 6px 18px; }
  .kop-nav .kop-site { display: none; }
  .band, .inbed .band { padding: 26px 16px 92px; }
  .band-boven { font-size: 12px; margin-bottom: 6px; }
  .band h1 { font-size: 36px; }
  .stappen { margin-top: 22px; }
  .stap-bol { width: 28px; height: 28px; font-size: 12px; }
  .stap + .stap::before { top: 13px; }
  .stap-bol .ic { width: 15px; height: 15px; }
  .stap-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .stap-nu .stap-bol { box-shadow: 0 0 0 4px rgba(255, 255, 255, .18); }
  .stap-tekst { display: block; }
  .raam, .raam.met-zij { margin-top: -66px; padding: 0 12px 40px; }
  .kaart { padding: 24px 18px; border-radius: 18px; }
  .intro { margin-bottom: 22px; }
  .tegel { padding: 14px 14px; gap: 14px; }
  .tegel-ic, .avatar { width: 44px; height: 44px; }
  .tegel-naam { font-size: 21px; }
  .knop, .formulier .knop { width: 100%; }
  .acties { flex-direction: column; align-items: stretch; gap: 4px; }
  .acties .terug { justify-content: center; }
  .kal-dag { font-size: 14px; }
  .chips { grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); }
  .overzicht li { padding: 13px 14px; gap: 12px; }
  .ov-ic { width: 36px; height: 36px; }
  .afspraak { flex-wrap: wrap; }
  .afspraak-actie { flex-basis: 100%; max-width: none; }
  .afspraak-actie .knop { width: 100%; }
  .datum { gap: 10px; }
  .veld-rij { grid-template-columns: 1fr; }
  .knop-twee { width: 100%; justify-content: space-between; }
  .voet { padding: 40px 20px; }
  .voet-boven { grid-template-columns: auto 1fr; grid-template-areas: "menu menu" "contact contact" "merk woord"; }
  .voet-menu, .voet-contact { margin-bottom: 30px; }
  .inbed-voet { padding: 0 16px 24px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .vinkje path { stroke-dashoffset: 0; }
}

/* Botbescherming: lokveld buiten beeld (niet display:none, dat slaan sommige bots over). */
.lokveld { position: absolute !important; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* ── Beginpagina: afspraak maken of order status (2026-10-08) ── */
a.tegel { text-decoration: none; }
.keuze { padding: 26px 24px; min-height: 132px; }
.keuze .tegel-ic { width: 58px; height: 58px; }
.keuze .tegel-ic .ic { width: 30px; height: 30px; }
.keuze .tegel-naam { font-size: 25px; white-space: nowrap; }
.keuze-uitleg { font-size: 14px; line-height: 21px; color: var(--inkt-zacht); }
.keuzes a:nth-child(1) { animation: in .35s .05s var(--zacht) both; }
.keuzes a:nth-child(2) { animation: in .35s .1s var(--zacht) both; }

/* ── Tabbladen Mijn afspraken / Mijn orders ── */
.tabs { display: flex; gap: 6px; padding: 5px; margin: 0 0 26px; border-radius: var(--r-knop); background: var(--grond); }
.tabs a { flex: 1; min-width: 0; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
          padding: 10px 14px; border-radius: var(--r-knop); color: var(--inkt); text-decoration: none;
          font-size: 13px; font-weight: 700; line-height: 20px; letter-spacing: .06em; text-transform: uppercase;
          white-space: nowrap; transition: background .2s, color .2s; }
.tabs a .ic { width: 18px; height: 18px; flex: none; }
.tabs a:hover { background: var(--wit); }
.tabs a[aria-current] { background: var(--groen); color: var(--wit); box-shadow: 0 4px 12px rgba(0, 77, 76, .22); }

/* ── Order status ──
   Kleur per order (API-veld kleur, instelbaar per OPTIFILE-status): groen = klaar (groene kaart
   en stip), blauw = blauwe stip, grijs = de neutrale weergave van "In behandeling" (grijs
   label, grijze stip in --inkt-zacht, 7,5:1 op wit; tot 2026-10-08 was die stip bruin). */
.orders { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.order { display: flex; align-items: flex-start; gap: 16px; padding: 16px; border: 1.5px solid var(--grijs); border-radius: 16px;
         animation: in .35s var(--zacht) both; }
.order:nth-child(2) { animation-delay: .06s; } .order:nth-child(n+3) { animation-delay: .12s; }
.order-groen { border-color: var(--groen); background: var(--groen-zacht); }
.order-ic { width: 46px; height: 46px; flex: none; border-radius: 50%; display: grid; place-items: center;
            background: var(--groen-zacht); color: var(--groen); }
.order-groen .order-ic { background: var(--groen); color: var(--wit); }
.order-ic .ic { width: 24px; height: 24px; stroke-width: 1.5; }
.order-tekst { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.order-kop { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 14px; }
.order-kop strong { font-family: var(--chap); font-weight: 300; font-size: 22px; line-height: 1.2; overflow-wrap: anywhere; }
.order-nr { font-size: 14px; font-weight: 700; letter-spacing: .04em; color: var(--inkt-zacht); }
.order-regel { font-size: 14px; line-height: 21px; color: var(--inkt-zacht); }
.order-status { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; margin-top: 6px;
                padding: 4px 12px 4px 10px; border-radius: var(--r-knop); background: var(--wit);
                font-size: 13px; font-weight: 700; line-height: 20px; color: var(--inkt); }
.order-bol { width: 10px; height: 10px; border-radius: 50%; background: var(--bruin); flex: none; }
.order-groen .order-bol { background: var(--groen); }
.order-blauw .order-bol { background: var(--blauw); }
.order-grijs .order-bol { background: var(--inkt-zacht); }
.order-grijs .order-status, .order-blauw .order-status { background: var(--grond); }

@media (max-width: 599px) {
  .keuze { padding: 18px 16px; min-height: 0; }
  .keuze .tegel-ic { width: 48px; height: 48px; }
  .keuze .tegel-naam { font-size: 23px; }
  .tabs { margin-bottom: 20px; }
  .tabs a { padding: 10px 8px; font-size: 12px; letter-spacing: .03em; gap: 6px; }
  .tabs a .ic { width: 16px; height: 16px; }
  .order { padding: 14px; gap: 12px; }
  .order-ic { width: 40px; height: 40px; }
  .order-kop strong { font-size: 20px; }
}

/* ── Order status: extra huisstijlkleuren (2026-10-08) ──
   oranje #B36300, rood #FF653E, donkergroen #004D4C. Stip in de huisstijlkleur; het label krijgt
   een lichte tint met zwarte tekst (alle combinaties ≥ 4,5:1). Tomaat als stip haalt op wit
   2,9:1; daarom een donkerder rand (#C2410C) om de stip. Een onbekende kleur toont orders.html
   als grijs. Alleen groen = klaar (groene kaart, bovenaan). */
.order-oranje .order-bol { background: var(--bruin); }
.order-rood .order-bol { background: var(--tomaat); box-shadow: 0 0 0 1.5px #C2410C; }
.order-donkergroen .order-bol { background: var(--groen); }
.order-oranje .order-status { background: #F5E6D6; }
.order-rood .order-status { background: var(--tomaat-zacht); }
.order-donkergroen .order-status { background: var(--groen-zacht); }

/* ── Klantportaal mijn.vdham.nl (2026-10-08) ── */
.keuzes a:nth-child(3) { animation: in .35s .15s var(--zacht) both; }
.keuzes a:nth-child(n+4) { animation: in .35s .2s var(--zacht) both; }
.dashboard-links { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 28px; }
.dashboard-links form { margin: 0; }
.dashboard-links .knop-link { font-size: inherit; padding: 12px 0; }

/* Contactlenzen herbestellen */
.lens-vorige { margin: 0 0 28px; padding: 18px 20px; border: 1.5px solid var(--grijs); border-radius: 16px; }
.lens-vorige h2 { font-family: var(--chap); font-weight: 300; font-size: 24px; line-height: 1.2; margin: 0 0 12px; }
.lens-vorige h2 small { font-family: var(--mono); font-size: 14px; color: var(--inkt-zacht); letter-spacing: .02em; }
.lens-lijst { margin: 0; display: grid; gap: 8px; }
.lens-lijst div { display: grid; grid-template-columns: 7.5em minmax(0, 1fr); gap: 12px; }
.lens-lijst dt { font-size: 12px; font-weight: 700; line-height: 24px; letter-spacing: .08em; text-transform: uppercase;
                 color: var(--inkt-zacht); }
.lens-lijst dd { margin: 0; line-height: 24px; overflow-wrap: anywhere; }
.lens-formulier { max-width: 520px; }
.rondjes { display: grid; gap: 10px; }
.rondje, .vinkveld { display: flex; align-items: flex-start; gap: 12px; margin: 0; padding: 14px 16px; cursor: pointer;
          border: 1.5px solid var(--grijs); border-radius: var(--r-veld); background: var(--wit);
          font-size: 15px; font-weight: 400; line-height: 22px; letter-spacing: .3px; text-transform: none; color: var(--inkt);
          transition: border-color .15s, background .15s; }
.rondje:hover, .vinkveld:hover { border-color: var(--groen); }
.rondje:has(input:checked), .vinkveld:has(input:checked) { border-color: var(--groen); background: var(--groen-zacht); }
.rondje input, .vinkveld input { width: 20px; height: 20px; flex: none; margin: 1px 0 0; padding: 0;
                                 accent-color: var(--groen); box-shadow: none; }
.rondje small, .vinkveld small { display: block; font-size: 13px; color: var(--inkt-zacht); }
.rondje.uit { cursor: not-allowed; background: var(--grond); color: var(--inkt-zacht); border-style: dashed; }
.rondje.uit:hover { border-color: var(--grijs); }
.rondje-uitleg { margin: -2px 0 0; font-size: 13px; line-height: 20px; color: var(--inkt-zacht); }
@media (max-width: 599px) {
  .lens-vorige { padding: 14px 16px; }
  .lens-lijst div { grid-template-columns: 6.5em minmax(0, 1fr); }
}
/* Dashboard: lange tegelnamen ("Contactlenzen bestellen") mogen afbreken op telefoonbreedte. */
.keuze .tegel-naam { white-space: normal; }

/* ── Contact: bellen + WhatsApp (2026-10-08, templates/_contact.html) ── */
.contact { display: flex; flex-wrap: wrap; gap: 10px; margin: 12px 0 0; }
.contact-midden { justify-content: center; }
.knop-contact { flex: 0 1 auto; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
                min-height: 44px; padding: 0 18px; border: 1.5px solid var(--grijs); border-radius: var(--r-knop);
                background: var(--wit); color: var(--inkt); font-family: var(--mono); font-size: 14px; font-weight: 700;
                line-height: 18px; letter-spacing: .02em; text-decoration: none; white-space: nowrap;
                transition: border-color .2s, background .2s; }
.knop-contact:hover { border-color: var(--groen); background: var(--groen-zacht); }
.knop-contact .ic { width: 18px; height: 18px; color: var(--groen); stroke-width: 1.8; }
.contact-klein { margin-top: 8px; gap: 8px; }
.contact-klein .knop-contact { min-height: 40px; padding: 0 14px; font-size: 13px; }
.afspraak-actie .contact { justify-content: flex-end; }
@media (max-width: 420px) {
  .contact .knop-contact { flex: 1 1 140px; }
}

/* ── Openstaande rekeningen (2026-10-08) ── */
.rekeningen { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.rekening { display: flex; align-items: flex-start; gap: 16px; padding: 16px; border: 1.5px solid var(--grijs);
            border-radius: 16px; background: var(--wit); animation: in .35s var(--zacht) both; }
.rekening-betaald { border-color: var(--groen); background: var(--groen-zacht); }
.rekening-ic { width: 46px; height: 46px; flex: none; border-radius: 50%; display: grid; place-items: center;
               background: var(--groen-zacht); color: var(--groen); }
.rekening-betaald .rekening-ic { background: var(--groen); color: var(--wit); }
.rekening-ic .ic { width: 24px; height: 24px; stroke-width: 1.5; }
.rekening-tekst { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.rekening-kop { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 14px; }
.rekening-kop strong { font-family: var(--chap); font-weight: 300; font-size: 22px; line-height: 1.2; }
.rekening-bedrag { font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rekening-regel { font-size: 14px; line-height: 21px; color: var(--inkt-zacht); overflow-wrap: anywhere; }
.rekening-actie { margin-top: 10px; }
.rekening-actie form { margin: 0; }
.rekening-actie .knop { min-height: 46px; padding: 0 22px; font-size: 14px; }
.rekening-status { display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px; border-radius: 999px;
                   background: var(--wit); font-size: 14px; font-weight: 700; color: var(--groen); }
.rekening-status .ic { width: 16px; height: 16px; stroke-width: 2.2; }
.rekening-bezig .rekening-status { color: var(--inkt); background: var(--grond); }
@media (max-width: 560px) {
  .rekening { padding: 14px; gap: 12px; }
  .rekening-ic { width: 40px; height: 40px; }
  .rekening-kop strong { font-size: 20px; }
  .rekening-actie .knop { width: 100%; }
}
/* Vier tabbladen (afspraken, orders, lenzen, rekeningen) op een smal scherm: zonder pictogram. */
@media (max-width: 480px) {
  .tabs:has(a:nth-child(4)) { gap: 4px; padding: 4px; }
  .tabs:has(a:nth-child(4)) a { padding: 10px 4px; letter-spacing: 0; }
  .tabs:has(a:nth-child(4)) a .ic { display: none; }
}