/* ======================================================================
   duovista. — de supportdesk
   Huisstijl van duonova. (zelfde tokens als de productsite en de
   productscreenshots in novadesk/marketing/schermen/scherm.css).
   Gemaakt voor de computer; onderaan staat hoe het op tablet en telefoon
   in één kolom valt.
   ====================================================================== */
@import url('lettertypen.css');

:root{
  --roest:#8F3A1C; --roest-diep:#6F2C13; --roest-licht:#B05329;
  --oranje:#F59120; --oranje-diep:#D2740E;
  --inkt:#2B1D18; --inkt-zacht:#6B5A50;
  --zacht:#EFE1D3; --zacht-diep:#E2CDB8;
  --creme:#F8EFE6; --papier:#F2E7DA; --wit:#FFFFFF;
  --groen:#2E7D4F; --groen-zacht:#E3F1E7;
  --blauw:#2F5D8A; --blauw-zacht:#E4EDF6;
  --paars:#7A3A6B; --paars-zacht:#F4E4F0;
  --geel:#FFF4D6; --geel-rand:#EBCB72; --geel-tekst:#6B5310;
  --rood:#B3261E; --rood-zacht:#FBE3DA;
  --inkt-rgb:43,29,24; --roest-rgb:143,58,28; --creme-rgb:248,239,230; --oranje-rgb:245,145,32;
  --lijn:rgba(var(--inkt-rgb),.1); --lijn-sterk:rgba(var(--inkt-rgb),.18);
  --kop:'Bricolage Grotesque', ui-sans-serif, system-ui, sans-serif;
  --tekst:'Public Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --soepel:.18s ease;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font-family:var(--tekst);color:var(--inkt);background:var(--creme);-webkit-font-smoothing:antialiased;font-size:14.5px;line-height:1.45;min-width:1100px}
a{color:var(--roest)}
img,svg{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2.5px solid var(--roest);outline-offset:2px;border-radius:6px}
h1,h2,h3,h4{font-family:var(--kop);font-weight:700;letter-spacing:-.02em;line-height:1.15}
.ic{width:18px;height:18px;flex-shrink:0}

/* ---- Merk ---- */
.merk{display:inline-flex;align-items:center;gap:10px;text-decoration:none}
.beeldmerk{width:32px;height:32px;border-radius:9px;background:var(--roest);display:flex;align-items:center;justify-content:center;gap:11.75%;flex-shrink:0}
.beeldmerk i{width:22%;aspect-ratio:1;border-radius:50%;background:var(--creme)}
.beeldmerk i:last-child{background:var(--oranje)}
.woordmerk{font-family:var(--kop);font-weight:700;font-size:21px;letter-spacing:-.035em;white-space:nowrap}
.woordmerk .duo{color:var(--inkt)} .woordmerk .vista{color:var(--roest)} .woordmerk .punt{color:var(--oranje)}
.patroon .woordmerk .duo,.patroon .woordmerk .vista{color:var(--creme)}
.patroon .beeldmerk{background:var(--creme)}
.patroon .beeldmerk i{background:var(--roest)} .patroon .beeldmerk i:last-child{background:var(--oranje)}

/* Roest met de bollen van duonova. (app.js maakt de bollen). */
.patroon{background-color:var(--roest);color:var(--creme);position:relative;overflow:hidden}
.patroon > .bollen{position:absolute;inset:0;pointer-events:none;z-index:0}
.patroon > *:not(.bollen){position:relative;z-index:1}

/* ---- Knoppen ---- */
.knop{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 18px;border-radius:9px;border:1.5px solid transparent;
  font-weight:700;font-size:14.5px;text-decoration:none;cursor:pointer;background:transparent;transition:background-color var(--soepel),border-color var(--soepel),color var(--soepel)}
.knop .ic{width:16px;height:16px}
.knop.vol{background:var(--roest);color:var(--creme)}
.knop.vol:hover{background:var(--roest-diep)}
.knop.rand{border-color:var(--lijn-sterk);color:var(--inkt);background:var(--wit)}
.knop.rand:hover{border-color:var(--roest);color:var(--roest)}
.knop.klein{padding:8px 14px;font-size:13.5px}
.knop.breed{width:100%}
.knop.groot{padding:14px 24px;font-size:15.5px;border-radius:12px}
.knop.vol.groot{box-shadow:0 8px 20px rgba(var(--roest-rgb),.25)}
.knoppen{display:flex;gap:10px;align-items:center}
.ronde{width:34px;height:34px;border-radius:50%;border:0;background:rgba(var(--creme-rgb),.14);color:var(--creme);display:grid;place-items:center;cursor:pointer}
.ronde:hover{background:rgba(var(--creme-rgb),.24)}
.ronde .ic{width:16px;height:16px}

/* ---- Labels ---- */
.status{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;padding:4px 10px;border-radius:999px;white-space:nowrap}
.status::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.status.nieuw{background:#FDEBD3;color:var(--oranje-diep)}
.status.bezig{background:var(--blauw-zacht);color:var(--blauw)}
.status.wacht{background:var(--zacht);color:var(--inkt-zacht)}
.status.leverancier{background:var(--paars-zacht);color:var(--paars)}
.status.klaar{background:var(--groen-zacht);color:var(--groen)}
.badge{display:inline-flex;align-items:center;font-size:11.5px;font-weight:700;padding:3px 9px;border-radius:999px;background:var(--roest);color:var(--creme)}
.nummer{font-size:12.5px;font-weight:600;color:var(--roest);letter-spacing:.01em;font-variant-numeric:tabular-nums}
.meta{display:flex;gap:14px;align-items:center;color:var(--inkt-zacht);font-size:12.5px}
.meta span{display:inline-flex;align-items:center;gap:5px}
.meta .ic{width:14px;height:14px}
.pad{color:var(--inkt-zacht);font-size:13px}
.optie{font-weight:400;color:var(--inkt-zacht)}
.uitleg{color:var(--inkt-zacht);font-size:13.5px}

.av{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-size:11px;font-weight:700;color:var(--creme);background:var(--roest-licht);flex-shrink:0;letter-spacing:.02em}
.av.b{background:var(--blauw)} .av.g{background:var(--groen)} .av.o{background:var(--oranje-diep)} .av.i{background:var(--inkt)}
.av.klein{width:20px;height:20px;font-size:8.5px}
.av.groot{width:36px;height:36px;font-size:13px}

/* Kleuren van groepen. */
.kleur-roest{background:var(--roest)!important} .kleur-blauw{background:var(--blauw)!important} .kleur-groen{background:var(--groen)!important}
.kleur-oranje{background:var(--oranje)!important} .kleur-paars{background:var(--paars)!important} .kleur-grijs{background:var(--zacht-diep)!important}
.kleur-zand{background:var(--zacht-diep)!important}

/* Melding bovenaan na een actie. */
.flits{display:flex;gap:10px;align-items:flex-start;padding:11px 14px;border-radius:11px;font-size:14px;font-weight:500;background:var(--groen-zacht);color:var(--groen);margin:14px 26px 0}
.flits.fout{background:var(--rood-zacht);color:var(--rood)}
.flits .ic{width:17px;height:17px;margin-top:1px}

/* ---- Velden ---- */
.veld{display:flex;flex-direction:column;gap:6px;font-size:14px;font-weight:600;border:0}
.veld legend{font-size:14px;font-weight:600;margin-bottom:6px}
.veld input,.veld select,.veld textarea,.meer-vak select,.rijform input,.rijform select,.trij input,.trij select{
  font-weight:400;font-size:15px;color:var(--inkt);border:1.5px solid var(--lijn-sterk);border-radius:10px;padding:10px 12px;background:var(--wit);width:100%;
  transition:border-color var(--soepel),box-shadow var(--soepel)}
.veld textarea{resize:vertical;min-height:110px;line-height:1.5}
.veld input:focus,.veld select:focus,.veld textarea:focus,.meer-vak select:focus,.rijform input:focus,.rijform select:focus,.trij input:focus,.trij select:focus{
  outline:none;border-color:var(--roest);box-shadow:0 0 0 4px rgba(var(--roest-rgb),.12)}
.veld select,.vak select,.meer-vak select,.rijform select,.trij select{appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:38px;
  background:var(--wit) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B5A50' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center/16px}

/* ======================================================================
   Servicedesk: topbalk, menu, lijst en de geopende melding
   ====================================================================== */
body.desk{display:grid;grid-template-columns:232px 400px minmax(0,1fr);grid-template-rows:60px minmax(0,1fr);height:100vh;overflow:hidden}
body.desk.overzicht,body.desk.beheer{grid-template-columns:232px minmax(0,1fr)}

.topbalk{grid-column:1/-1;display:flex;align-items:center;gap:18px;padding:0 20px}
.topbalk .merk{width:192px}
.zoek{flex:0 1 480px;display:flex;align-items:center;gap:10px;background:rgba(var(--creme-rgb),.12);border:1px solid rgba(var(--creme-rgb),.18);border-radius:10px;padding:0 12px;color:rgba(var(--creme-rgb),.75)}
.zoek .ic{width:16px;height:16px}
.zoek input{flex:1;border:0;background:transparent;color:var(--creme);padding:9px 0;outline:none}
.zoek input::placeholder{color:rgba(var(--creme-rgb),.7)}
.zoek:focus-within{background:rgba(var(--creme-rgb),.2);border-color:rgba(var(--creme-rgb),.4)}
.topbalk .rechts{margin-left:auto;display:flex;align-items:center;gap:14px}
.ik{display:flex;align-items:center;gap:9px;font-weight:600;font-size:14px}
.ik small{display:block;font-weight:500;font-size:11.5px;color:rgba(var(--creme-rgb),.72)}

.menu{background:#F3E8DC;border-right:1px solid var(--lijn);padding:16px 12px;display:flex;flex-direction:column;gap:2px;overflow-y:auto}
.menu .nieuwknop{margin-bottom:16px;padding:12px;font-size:15px;box-shadow:0 6px 16px rgba(var(--roest-rgb),.28)}
.menu .nieuwknop .ic{width:18px;height:18px}
.menu > a:not(.knop){display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:10px;color:var(--inkt);font-weight:500;font-size:15px;text-decoration:none}
.menu > a:not(.knop):hover{background:rgba(var(--wit),.5);background:rgba(255,255,255,.55)}
.menu > a:not(.knop) .ic{color:var(--inkt-zacht)}
.menu > a b{margin-left:auto;font-size:12px;font-weight:700;background:var(--wit);border:1px solid var(--lijn);border-radius:999px;padding:1px 8px;color:var(--inkt-zacht)}
.menu > a.aan{background:var(--wit);box-shadow:0 1px 3px rgba(var(--inkt-rgb),.08);font-weight:700}
.menu > a.aan .ic{color:var(--roest)}
.menu > a.aan b{background:var(--roest);border-color:var(--roest);color:var(--creme)}
.menu > a b.oranje{background:var(--oranje);border-color:var(--oranje);color:var(--inkt)}
.menu h4{font-family:var(--tekst);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--inkt-zacht);margin:18px 12px 6px;font-weight:600}
.menu > a.groep{font-size:13.5px;color:var(--inkt-zacht);padding:7px 12px}
.menu > a.groep i{width:9px;height:9px;border-radius:3px;margin:0 2px}
.menu > a.groep.aan{color:var(--inkt)}
.menu .onderaan{margin-top:auto}

.lijst{border-right:1px solid var(--lijn);background:#FDFAF6;display:flex;flex-direction:column;min-height:0}
.lijstkop{padding:16px 18px 12px;display:flex;align-items:baseline;justify-content:space-between;gap:10px;border-bottom:1px solid var(--lijn)}
.lijstkop h1{font-size:20px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lijstkop span{font-size:12.5px;color:var(--inkt-zacht);white-space:nowrap}
.rijen{overflow-y:auto;flex:1}
.rij{display:grid;grid-template-columns:10px minmax(0,1fr) auto;gap:2px 12px;padding:12px 18px;border-bottom:1px solid var(--lijn);border-left:3px solid transparent;align-items:center;color:inherit;text-decoration:none}
.rij:hover{background:var(--wit)}
.rij .stip{width:9px;height:9px;border-radius:50%;background:var(--zacht-diep)}
.rij strong{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rij time{font-size:12px;color:var(--inkt-zacht);font-variant-numeric:tabular-nums}
.rij small{grid-column:2/4;color:var(--inkt-zacht);font-size:12.5px;display:flex;gap:8px;align-items:center;min-width:0;white-space:nowrap;overflow:hidden}
.rij .prio{font-size:10.5px;font-weight:700;padding:1px 6px;border-radius:4px;background:var(--rood-zacht);color:var(--roest)}
.rij .prio.laat{background:var(--rood);color:#fff}
.rij .wie{margin-left:auto;font-size:11.5px;background:var(--zacht);border-radius:999px;padding:1px 8px}
.rij.open{background:var(--wit);border-left-color:var(--roest)}
.rij.nieuw strong::after{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--roest);margin-left:7px;vertical-align:2px}

.leeg{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;color:var(--inkt-zacht);padding:40px 24px}
.leeg > .ic{width:28px;height:28px;color:var(--zacht-diep)}
.rijen > .leeg{padding-top:56px}
.rijen > .leeg > .ic{width:40px;height:40px;padding:9px;border-radius:50%;background:var(--groen-zacht);color:var(--groen)}
.leeg.groot{flex:1}
.leeg.groot > .ic{width:64px;height:64px;padding:16px;border-radius:20px;background:var(--wit);color:var(--roest-licht);box-shadow:0 2px 8px rgba(var(--inkt-rgb),.06);margin-bottom:6px}
.leeg.groot h2{color:var(--inkt);font-size:22px}
.leeg .knop{margin-top:10px}

.lees{display:flex;flex-direction:column;background:var(--creme);min-width:0;min-height:0}
.leeskop{background:var(--wit);padding:18px 26px 14px;border-bottom:1px solid var(--lijn)}
.leeskop .r1{display:flex;align-items:center;gap:10px;margin-bottom:4px}
.leeskop h2{font-size:24px;line-height:1.2}
.gegevens{display:flex;flex-wrap:wrap;gap:6px 22px;margin-top:10px;font-size:13px;color:var(--inkt-zacht)}
.gegevens span{display:flex;gap:6px;align-items:center}
.gegevens b{color:var(--inkt);font-weight:600}
.streef{margin-left:auto;display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--groen);font-weight:600}
.streef .ring{width:18px;height:18px;border-radius:50%;background:conic-gradient(currentColor 0 var(--deel,60%),var(--groen-zacht) 0);display:grid;place-items:center}
.streef .ring::after{content:"";width:11px;height:11px;border-radius:50%;background:var(--wit)}
.streef.bijna{color:var(--oranje-diep)} .streef.bijna .ring{background:conic-gradient(currentColor 0 var(--deel),#FDEBD3 0)}
.streef.laat{color:var(--rood)} .streef.laat .ring{background:var(--rood-zacht)}
.streef.klaar{color:var(--groen)}

.acties{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;align-items:center}
.acties form{display:contents}
.actie{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;font-weight:600;padding:9px 14px;border-radius:10px;border:1px solid var(--lijn-sterk);background:var(--wit);cursor:pointer;color:var(--inkt);list-style:none}
.actie::-webkit-details-marker{display:none}
.actie:hover{border-color:var(--roest);color:var(--roest)}
.actie .ic{width:15px;height:15px}
.actie.vol{background:var(--roest);color:var(--creme);border-color:var(--roest)}
.actie.vol:hover{background:var(--roest-diep);color:var(--creme)}
details.meer{position:relative;margin-left:auto}
details.meer[open] > .actie{border-color:var(--roest);color:var(--roest)}
.meer-vak{position:absolute;right:0;top:calc(100% + 8px);z-index:20;width:300px;background:var(--wit);border:1px solid var(--lijn-sterk);border-radius:14px;padding:16px;
  box-shadow:0 18px 44px rgba(var(--inkt-rgb),.16);display:flex!important;flex-direction:column;gap:12px}
.meer-vak label{display:flex;flex-direction:column;gap:5px;font-size:12.5px;font-weight:600;color:var(--inkt-zacht)}
.meer-vak select{padding:8px 10px;font-size:14px}

/* Het gesprek */
.berichten{flex:1;overflow-y:auto;padding:18px 26px 24px;display:flex;flex-direction:column;gap:8px}
.dag{align-self:center;font-size:12px;font-weight:600;color:var(--inkt-zacht);margin:8px 0 2px}
.afz{font-size:12px;color:var(--inkt-zacht);display:flex;gap:8px;align-items:baseline;margin-top:6px}
.afz b{color:var(--inkt);font-weight:600}
.afz.rechts{align-self:flex-end}
.bel{max-width:70%;padding:10px 14px;border-radius:18px;font-size:14.5px;line-height:1.45;overflow-wrap:anywhere}
.bel.hun{background:var(--wit);border:1px solid var(--lijn);border-bottom-left-radius:6px;align-self:flex-start}
.bel.wij{background:var(--roest);color:var(--creme);border-bottom-right-radius:6px;align-self:flex-end}
.bel.wij a{color:var(--creme)}
.notitie{align-self:center;max-width:72%;width:100%;background:var(--geel);border:1px dashed var(--geel-rand);border-radius:14px;padding:10px 14px;font-size:13.5px;color:var(--geel-tekst);margin:6px 0}
.notitie b{display:flex;gap:6px;align-items:center;font-size:11px;letter-spacing:.06em;text-transform:uppercase;margin-bottom:3px}
.notitie .ic{width:12px;height:12px}
.systeem{align-self:center;font-size:12.5px;color:var(--inkt-zacht);background:rgba(var(--inkt-rgb),.05);padding:5px 12px;border-radius:999px;margin:4px 0}
.foto{display:block;margin:8px -4px 2px;border-radius:12px;overflow:hidden;max-width:320px}
.foto img{width:100%;max-height:260px;object-fit:cover}
.bestand{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:12px;background:var(--creme);color:var(--inkt);font-size:13.5px;margin-top:8px;text-decoration:none}
.bel.hun .bestand{background:var(--papier)}
.bestand .ext{width:30px;height:36px;border-radius:6px;background:var(--roest);color:var(--creme);display:grid;place-items:center;font-size:9px;font-weight:800;flex-shrink:0}
.bestand small{display:block;color:var(--inkt-zacht);font-size:11.5px}

/* Reageren */
.opstel{margin:0 22px 18px;background:var(--wit);border:1px solid var(--lijn-sterk);border-radius:14px;overflow:hidden;box-shadow:0 4px 14px rgba(var(--inkt-rgb),.05);flex-shrink:0}
.opstel .tabs{display:flex;border-bottom:1px solid var(--lijn)}
.opstel .tabs label{position:relative;cursor:pointer}
.opstel .tabs input{position:absolute;opacity:0}
.opstel .tabs span{display:flex;align-items:center;gap:6px;padding:10px 16px;font-size:13px;font-weight:600;color:var(--inkt-zacht)}
.opstel .tabs .ic{width:13px;height:13px}
.opstel .tabs input:checked + span{color:var(--roest);box-shadow:inset 0 -2px 0 var(--roest)}
.opstel .tabs input:focus-visible + span{outline:2px solid var(--roest);outline-offset:-4px}
.opstel.intern{background:var(--geel);border-color:var(--geel-rand)}
.opstel.intern .tabs input:checked + span{color:var(--geel-tekst);box-shadow:inset 0 -2px 0 var(--geel-tekst)}
.opstel textarea{display:block;width:100%;border:0;resize:none;padding:12px 16px;font-size:14.5px;line-height:1.5;min-height:56px;max-height:240px;background:transparent;outline:none}
.opstel .voet{display:flex;align-items:center;gap:12px;padding:6px 10px 10px 12px;color:var(--inkt-zacht);font-size:12.5px}
.bijvoegen{display:flex;align-items:center;gap:6px;cursor:pointer;padding:6px 8px;border-radius:8px;max-width:260px}
.bijvoegen:hover{background:var(--creme);color:var(--roest)}
.bijvoegen input{position:absolute;width:1px;height:1px;opacity:0}
.bijvoegen span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bijvoegen:focus-within{outline:2px solid var(--roest)}
.opstel .voet .knop{margin-left:auto}

/* ======================================================================
   Melder
   ====================================================================== */
body.melder{height:100vh;overflow:hidden;display:flex;flex-direction:column}
body.melder.nieuw{height:auto;min-height:100vh;overflow:visible}
.mkop{padding:0 40px 30px;flex-shrink:0}
.mbalk{display:flex;align-items:center;gap:28px;height:64px}
.mbalk .woordmerk{font-size:22px}
.mbalk nav{display:flex;gap:6px;margin-left:16px}
.mbalk nav a{color:rgba(var(--creme-rgb),.8);font-weight:600;padding:8px 14px;border-radius:999px;text-decoration:none}
.mbalk nav a:hover{color:var(--creme);background:rgba(var(--creme-rgb),.08)}
.mbalk nav a.aan{background:rgba(var(--creme-rgb),.15);color:var(--creme)}
.mbalk nav b{font-size:11.5px;background:var(--oranje);color:var(--inkt);border-radius:999px;padding:1px 7px;margin-left:6px}
.mbalk .ik{margin-left:auto}
.mbalk .ik .av{background:var(--oranje);color:var(--inkt)}
.welkom{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;padding-top:24px;max-width:1360px}
.welkom h1{font-size:38px;color:var(--creme);letter-spacing:-.025em}
.welkom p{color:rgba(var(--creme-rgb),.8);font-size:16px;margin-top:6px}
.welkom p b{color:var(--creme)}
.terug{display:inline-flex;align-items:center;gap:6px;color:rgba(var(--creme-rgb),.85);text-decoration:none;font-weight:600;margin-bottom:12px}
.terug:hover{color:var(--creme)}
.nieuwknop{display:inline-flex;align-items:center;gap:10px;background:var(--oranje);color:var(--inkt);font-weight:700;font-size:16px;padding:15px 24px;border-radius:12px;box-shadow:0 10px 26px rgba(0,0,0,.18);text-decoration:none}
.mkop .nieuwknop:hover{background:#ffa53d}
.nieuwknop .ic{width:19px;height:19px}

.minhoud{flex:1;min-height:0;display:grid;grid-template-columns:430px minmax(0,1fr);gap:24px;padding:24px 40px 28px;max-width:1440px;width:100%}
.mlijst{display:flex;flex-direction:column;gap:12px;overflow-y:auto;min-height:0;padding:2px 4px 2px 2px;margin:-2px -4px -2px -2px}
.mlijst h2{font-size:20px;display:flex;justify-content:space-between;align-items:baseline}
.mlijst h2 small{font-family:var(--tekst);font-size:13px;font-weight:500;color:var(--inkt-zacht)}
.item{display:block;background:var(--wit);border:1px solid var(--lijn);border-radius:18px;padding:14px 16px;color:inherit;text-decoration:none;transition:border-color var(--soepel),box-shadow var(--soepel)}
.item:hover{border-color:var(--lijn-sterk);box-shadow:0 6px 18px rgba(var(--inkt-rgb),.06)}
.item.open{border:2px solid var(--roest);padding:13px 15px;box-shadow:0 8px 22px rgba(var(--roest-rgb),.12)}
.item .r1{display:flex;align-items:center;gap:8px;margin-bottom:4px}
.item .r1 .status{margin-left:auto;font-size:11.5px;padding:3px 9px}
.item h3{font-size:17px;letter-spacing:-.015em;line-height:1.25;margin-bottom:3px}
.kaart.leeg{background:var(--wit);border:1px dashed var(--lijn-sterk);border-radius:18px}

.detail{background:var(--wit);border:1px solid var(--lijn);border-radius:22px;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 2px 6px rgba(var(--inkt-rgb),.04);min-height:0}
.detail .flits{margin:14px 22px 0}
.dkop{padding:20px 26px 16px;border-bottom:1px solid var(--lijn);display:flex;gap:20px}
.dkop h2{font-size:24px;line-height:1.2;margin:4px 0 2px}
.dkop .rechts{margin-left:auto;display:flex;flex-direction:column;align-items:flex-end;gap:10px;flex-shrink:0}
.dkop .wie{display:flex;gap:8px;align-items:center;font-size:13px;color:var(--inkt-zacht)}
.tijdlijn{display:flex;padding:14px 26px;border-bottom:1px solid var(--lijn);background:#FDFAF6}
.stap{flex:1;display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;color:var(--inkt-zacht);position:relative}
.stap i{width:22px;height:22px;border-radius:50%;border:2px solid var(--zacht-diep);background:var(--wit);display:grid;place-items:center;flex-shrink:0;position:relative;z-index:1}
.stap.klaar{color:var(--inkt)} .stap.klaar i{background:var(--groen);border-color:var(--groen)}
.stap.klaar i::after{content:"";width:8px;height:4px;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg) translate(1px,-1px)}
.stap.nu{color:var(--roest)} .stap.nu i{border-color:var(--roest)} .stap.nu i::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--roest)}
.stap::before{content:"";position:absolute;left:30px;right:8px;top:50%;height:2px;background:var(--zacht)}
.stap span{background:#FDFAF6;position:relative;z-index:1;padding-right:8px}
.stap:last-child::before{display:none}
.detail .berichten{background:var(--creme)}
.detail .opstel{margin:14px 18px 18px}
.heropen{font-size:13px;color:var(--inkt-zacht);text-align:center;padding:10px 20px 0;background:var(--creme)}

/* Nieuwe melding: links het formulier, rechts wat er daarna gebeurt. */
.nieuw-blad{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:24px;align-items:start;padding:24px 40px 48px;max-width:1360px}
.nieuw-vak{background:var(--wit);border:1px solid var(--lijn);border-radius:22px;padding:30px 32px;display:flex;flex-direction:column;gap:26px;box-shadow:0 2px 6px rgba(var(--inkt-rgb),.04);min-width:0}
.nieuw-vak .flits{margin:0}
.nieuw-vak fieldset{border:0;min-width:0}
.nieuw-vak > fieldset > legend{font-family:var(--kop);font-size:21px;font-weight:600;letter-spacing:-.015em;margin-bottom:14px}

/* Eerst de groep als grote tegel met plaatje ... */
.groepkeuze{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:12px;margin-bottom:14px}
.groepkeuze label{position:relative;cursor:pointer}
.groepkeuze input{position:absolute;opacity:0}
.groepkeuze span{display:flex;flex-direction:column;align-items:center;gap:10px;padding:18px 10px 14px;border:1.5px solid var(--lijn);border-radius:18px;background:var(--wit);
  font-weight:600;font-size:15px;text-align:center;transition:border-color var(--soepel),background-color var(--soepel),box-shadow var(--soepel)}
.groepkeuze i{width:48px;height:48px;border-radius:14px;background:var(--zacht);color:var(--roest);display:grid;place-items:center;transition:background-color var(--soepel),color var(--soepel)}
.groepkeuze i .ic{width:24px;height:24px}
.groepkeuze label:hover span{border-color:var(--roest-licht)}
.groepkeuze input:checked + span{border:2px solid var(--roest);background:#FFF8F2;box-shadow:0 0 0 4px rgba(var(--roest-rgb),.08);padding:17px 9px 13px}
.groepkeuze input:checked + span i{background:var(--roest);color:var(--creme)}
.groepkeuze input:focus-visible + span{outline:2.5px solid var(--roest);outline-offset:2px}

/* ... dan de categorie als pil. Zonder JavaScript staan alle categorieën er meteen. */
.keuzes{display:flex;flex-wrap:wrap;gap:10px}
.keuze{position:relative;cursor:pointer}
.keuze[hidden]{display:none}
.keuze input{position:absolute;opacity:0}
.keuze span{display:flex;align-items:baseline;gap:8px;padding:10px 18px;border:1.5px solid var(--lijn-sterk);border-radius:999px;background:var(--wit);font-weight:500;font-size:15px;
  transition:border-color var(--soepel),background-color var(--soepel),color var(--soepel)}
.keuze small{font-size:12px;color:var(--inkt-zacht)}
.groepen-aan .keuze small{display:none}
.keuze:hover span{border-color:var(--roest-licht)}
.keuze input:checked + span{background:var(--inkt);border-color:var(--inkt);color:var(--creme)}
.keuze input:checked + span small{color:rgba(var(--creme-rgb),.7)}
.keuze input:focus-visible + span{outline:2.5px solid var(--roest);outline-offset:2px}
.kies-eerst{margin-top:10px}
.kies-eerst.fout{color:var(--rood);font-weight:600}

.velden{display:grid;grid-template-columns:1fr 1fr;gap:16px 18px}
.velden .heel{grid-column:1/-1}
/* Een veld als wit vak met het label erin, zoals in de app. */
.vak{display:flex;flex-direction:column;gap:2px;background:var(--wit);border:1.5px solid var(--lijn-sterk);border-radius:16px;padding:11px 16px 10px;cursor:text;
  transition:border-color var(--soepel),box-shadow var(--soepel)}
.vak > span{font-size:13px;font-weight:600;color:var(--inkt-zacht)}
.vak input,.vak textarea,.vak select{border:0;outline:none;background:transparent;font-size:16px;color:var(--inkt);padding:2px 0;width:100%}
.vak textarea{resize:none;min-height:96px;line-height:1.5}
.vak select{background-position:right 0 center;padding-right:26px}
.vak:hover{border-color:rgba(var(--inkt-rgb),.28)}
.vak:focus-within{border-color:var(--roest);box-shadow:0 0 0 4px rgba(var(--roest-rgb),.1)}
.vak ::placeholder{color:rgba(var(--inkt-rgb),.4)}
.nieuw-vak .veld legend{font-size:13px;color:var(--inkt-zacht);margin-bottom:6px}
.dringend{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;padding:4px;background:rgba(var(--inkt-rgb),.06);border-radius:13px}
.dringend label{position:relative;cursor:pointer}
.dringend input{position:absolute;opacity:0}
.dringend span{display:block;text-align:center;padding:12px 4px;border-radius:10px;font-size:13.5px;font-weight:600;color:var(--inkt-zacht);white-space:nowrap}
.dringend input:checked + span{background:var(--wit);color:var(--inkt);box-shadow:0 1px 3px rgba(var(--inkt-rgb),.1)}
.dringend label:last-child input:checked + span{background:var(--roest);color:var(--creme)}
.dringend input:focus-visible + span{outline:2px solid var(--roest)}

/* Foto's en bestanden: een sleepvak met stippellijn; gekozen foto's als tegels erboven. */
.sleep{position:relative;display:flex;align-items:center;gap:16px;padding:18px 20px;border:2px dashed rgba(var(--roest-rgb),.3);border-radius:18px;background:#FDFAF6;color:var(--roest);cursor:pointer;
  transition:border-color var(--soepel),background-color var(--soepel)}
.sleep:hover,.sleep.erboven{border-color:var(--roest);background:#FFF5EC}
.sleep:focus-within{outline:2.5px solid var(--roest);outline-offset:2px}
.sleep input{position:absolute;inset:0;opacity:0;cursor:pointer}
.sleep > .ic{width:44px;height:44px;padding:11px;border-radius:13px;background:var(--zacht);flex-shrink:0}
.sleep b{display:block;font-weight:700;font-size:15px}
.sleep small{display:block;color:var(--inkt-zacht);font-size:13px;margin-top:1px}
.fotos{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:12px}
.fotos:not(:empty){margin-bottom:12px}
.fotos figure{position:relative;aspect-ratio:4/3;border-radius:14px;overflow:hidden;background:linear-gradient(160deg,#4a4642,#1f1d1b);color:var(--creme)}
.fotos img,.fotos video{width:100%;height:100%;object-fit:cover}
.fotos figcaption{position:absolute;left:0;right:0;bottom:0;padding:18px 10px 8px;font-size:11.5px;font-weight:600;background:linear-gradient(transparent,rgba(0,0,0,.6));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fotos .ander{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;background:var(--papier);color:var(--inkt)}
.fotos .ander b{font-size:11px;font-weight:800;color:var(--creme);background:var(--roest);border-radius:6px;padding:6px 7px}
.fotos .ander figcaption{background:none;color:var(--inkt-zacht);text-align:center}
.nieuw-vak .knoppen{padding-top:4px}

.hierna{position:sticky;top:24px;background:var(--wit);border:1px solid var(--lijn);border-radius:22px;padding:24px 24px 20px;box-shadow:0 2px 6px rgba(var(--inkt-rgb),.04)}
.hierna h2{font-size:19px;font-weight:600;margin-bottom:16px}
.hierna ol{list-style:none;display:flex;flex-direction:column}
.hierna li{display:flex;gap:12px;position:relative;padding-bottom:18px}
.hierna li:not(:last-child)::before{content:"";position:absolute;left:10px;top:24px;bottom:2px;width:2px;background:var(--zacht)}
.hierna li i{width:22px;height:22px;border-radius:50%;border:2px solid var(--zacht-diep);background:var(--wit);flex-shrink:0;display:grid;place-items:center}
.hierna li.klaar i{border-color:var(--roest)}
.hierna li.klaar i::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--roest)}
.hierna li span{font-size:13.5px;color:var(--inkt-zacht);line-height:1.45}
.hierna li b{display:block;color:var(--inkt);font-size:14.5px;font-weight:600;margin-bottom:1px}
.hierna .tip{display:flex;gap:12px;align-items:flex-start;background:var(--geel);border:1px solid var(--geel-rand);border-radius:14px;padding:12px 14px;color:var(--geel-tekst);font-size:13.5px;margin-top:4px}
.hierna .tip .ic{width:18px;height:18px;margin-top:1px}

/* Terug naar de lijst: alleen op een klein scherm (zie onderaan). */
.naarlijst{display:none}

/* ======================================================================
   Overzicht en beheer
   ====================================================================== */
.ovz{overflow-y:auto;padding:24px 32px 40px;min-width:0}
.ovz > .flits{margin:0 0 16px}
.ovzkop{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:20px}
.ovzkop h1{font-size:30px}
.ovzkop p{color:var(--inkt-zacht);margin-top:4px}
.periode{display:flex;gap:2px;padding:4px;background:var(--wit);border:1px solid var(--lijn);border-radius:12px}
.periode a{padding:7px 14px;border-radius:9px;font-weight:600;font-size:13.5px;color:var(--inkt);text-decoration:none}
.periode a.aan{background:var(--inkt);color:var(--creme)}
.tegels{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:18px}
.tegel{background:var(--wit);border:1px solid var(--lijn);border-radius:18px;padding:16px 18px;color:inherit;text-decoration:none;display:flex;flex-direction:column;gap:2px}
a.tegel:hover{border-color:var(--lijn-sterk)}
.tegel small{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--inkt-zacht)}
.tegel small i{width:8px;height:8px;border-radius:50%}
.tegel b{font-family:var(--kop);font-size:40px;letter-spacing:-.03em;line-height:1.1}
.tegel span{font-size:13px;color:var(--inkt-zacht)}
.tegel .rood{color:var(--rood)} .tegel .groen{color:var(--groen)}
.tegel.vol{background:var(--roest);border-color:var(--roest);color:var(--creme)}
.tegel.vol small,.tegel.vol span{color:rgba(var(--creme-rgb),.8)}
.panelen{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.paneel{background:var(--wit);border:1px solid var(--lijn);border-radius:18px;padding:18px 20px;margin-bottom:14px}
.panelen .paneel{margin:0}
.paneel > header{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:14px}
.paneel > header h2{font-size:18px}
.paneel > header span{font-size:13px;color:var(--inkt-zacht)}
.staven{position:relative;display:grid;grid-template-columns:repeat(8,1fr);gap:10px;height:220px;align-items:end;padding-bottom:24px}
.staven::before{content:"";position:absolute;left:0;right:0;bottom:calc(24px + var(--doel));border-top:2px dashed var(--oranje)}
.staven .doel{position:absolute;right:0;bottom:calc(28px + var(--doel));font-size:11.5px;font-weight:700;color:var(--oranje-diep)}
.staaf{height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:stretch;position:relative}
.staaf i{display:block;background:var(--zacht-diep);border-radius:6px 6px 2px 2px;min-height:3px}
.staaf.nu i{background:var(--roest)}
.staaf span{position:absolute;bottom:-22px;left:0;right:0;text-align:center;font-size:12px;color:var(--inkt-zacht)}
.staaf.nu span{color:var(--inkt);font-weight:700}
.balken{display:flex;flex-direction:column;gap:10px}
.balk{display:grid;grid-template-columns:150px 1fr 30px;gap:12px;align-items:center;font-size:14px}
.balk > span:first-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.spoor{display:flex;height:12px;background:var(--zacht);border-radius:999px;overflow:hidden}
.spoor i{display:block;height:100%}
.spoor .b1,.legenda .b1{background:var(--roest)} .spoor .b2,.legenda .b2{background:var(--oranje)} .spoor .b3,.legenda .b3{background:var(--zacht-diep)}
.balk b{text-align:right;font-variant-numeric:tabular-nums}
.legenda{display:flex;gap:16px;margin-top:14px;font-size:12.5px;color:var(--inkt-zacht)}
.legenda span{display:flex;align-items:center;gap:6px}
.legenda i{width:10px;height:10px;border-radius:3px}
.langst{display:flex;flex-direction:column}
.langst a{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--lijn);color:inherit;text-decoration:none}
.langst a:last-child{border-bottom:0}
.langst a > span{flex:1;min-width:0;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.langst small{display:block;font-weight:400;font-size:12.5px;color:var(--inkt-zacht)}
.langst b{font-size:12.5px;padding:3px 9px;border-radius:999px}
.langst b.rood{background:var(--rood-zacht);color:var(--rood)} .langst b.oranje{background:#FDEBD3;color:var(--oranje-diep)} .langst b.groen{background:var(--groen-zacht);color:var(--groen)}

.rijform{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:6px}
.rijform input,.rijform select{width:auto;flex:1 1 160px;padding:8px 10px;font-size:14px}
.rijform .knop{flex-shrink:0}
.tabel{display:flex;flex-direction:column;margin-top:8px}
.tkop,.trij{display:grid;grid-template-columns:minmax(220px,2fr) 130px 1fr 1fr 1fr 60px 90px;gap:10px;align-items:center;padding:8px 0;border-bottom:1px solid var(--lijn)}
.tabel.smal .trij{grid-template-columns:minmax(220px,2fr) 1fr auto 90px}
.tabel.smal .trij:has(> :nth-child(5):last-child){grid-template-columns:minmax(220px,2fr) 1fr 90px}
.tkop{font-size:12px;font-weight:600;color:var(--inkt-zacht);text-transform:uppercase;letter-spacing:.06em}
.trij input,.trij select{padding:7px 9px;font-size:13.5px}
.trij .naam{display:flex;align-items:center;gap:10px;min-width:0}
.trij .naam > span{min-width:0;font-weight:600}
.trij .naam small{display:block;font-weight:400;font-size:12px;color:var(--inkt-zacht);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.trij .naam .ic{color:var(--inkt-zacht)}
.trij.uit{opacity:.55}
.vinkje{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--inkt-zacht);white-space:nowrap}
.vinkje input{width:17px;height:17px;accent-color:var(--roest)}
.blokje{width:12px;height:12px;border-radius:4px;flex-shrink:0}

/* ======================================================================
   Inloggen en installeren (zelfde opzet als de productsite)
   ====================================================================== */
body.il{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:40px 20px;min-width:0;
  background:radial-gradient(circle at 92% 8%, rgba(var(--oranje-rgb),.16) 0 140px, transparent 141px),
             radial-gradient(circle at 4% 96%, rgba(var(--roest-rgb),.07) 0 220px, transparent 221px),
             radial-gradient(circle at 78% 88%, rgba(var(--oranje-rgb),.12) 0 36px, transparent 37px), var(--papier)}
.il-blad{display:grid;grid-template-columns:1fr 420px;grid-template-rows:auto 1fr;grid-template-areas:"merk merk" "uitleg vak";column-gap:72px;row-gap:26px;align-items:start;width:100%;max-width:1000px}
.il-blad > *{min-width:0}
.il-merk{grid-area:merk;width:fit-content}
.il-uitleg{grid-area:uitleg}
.il-vak{grid-area:vak;border-top:1.5px solid var(--inkt);padding-top:26px}
.pil{display:inline-flex;align-items:center;gap:12px;color:var(--roest);font-size:14px;font-weight:600}
.pil::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--roest);box-shadow:12px 0 0 var(--oranje);margin-right:12px}
.il-uitleg .pil{margin-bottom:18px}
.il-uitleg h1{font-size:40px;line-height:1.1;letter-spacing:-.032em;margin-bottom:14px}
.il-uitleg h1 em{font-style:normal;color:var(--roest)}
.il-lead{color:var(--inkt-zacht);font-size:17px;line-height:1.65;max-width:34em;margin-bottom:30px}
.il-punten{list-style:none;display:flex;flex-direction:column;gap:18px}
.il-punten li{display:flex;align-items:flex-start;gap:14px}
.il-punten .ic{width:20px;height:20px;margin-top:3px;color:var(--roest)}
.il-punten span{font-size:14.5px;line-height:1.55;color:var(--inkt-zacht)}
.il-punten strong{display:block;font-family:var(--kop);font-size:16px;font-weight:600;letter-spacing:-.015em;color:var(--inkt);margin-bottom:1px}
.il-vak h2{font-size:23px;font-weight:600;letter-spacing:-.022em;margin-bottom:6px}
.il-vak > p{color:var(--inkt-zacht);font-size:15px}
.il-vak form{margin-top:20px;display:flex;flex-direction:column;gap:16px}
.il-vak .flits{margin:16px 0 0}
.il-vak .knop{margin-top:4px}
.il-onthoud{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--inkt-zacht);cursor:pointer}
.il-onthoud input{width:18px;height:18px;accent-color:var(--roest)}
.il-klein{font-size:13.5px;color:var(--inkt-zacht);margin-top:18px}

/* ======================================================================
   Tablet en telefoon. Alles in één kolom; op de servicedesk en bij de
   melder zie je de lijst óf de geopende melding, met een weg terug.
   ====================================================================== */
@media (max-width:1100px){
  body{min-width:0}
  .naarlijst{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;font-weight:600;text-decoration:none;margin-bottom:10px}
  .naarlijst .ic{width:16px;height:16px}

  /* Servicedesk */
  body.desk{display:flex;flex-direction:column;height:100vh;height:100dvh}
  .topbalk{flex-wrap:wrap;gap:10px 12px;padding:10px 16px;flex-shrink:0}
  .topbalk .merk{width:auto}
  .zoek{order:3;flex:1 1 100%}
  .zoek input{padding:10px 0;font-size:16px}
  .topbalk .ik > span:last-child{display:none}
  .menu{flex-direction:row;align-items:center;gap:6px;padding:10px 16px;overflow-x:auto;overflow-y:hidden;border-right:0;border-bottom:1px solid var(--lijn);flex-shrink:0;scrollbar-width:none}
  .menu::-webkit-scrollbar{display:none}
  .menu .nieuwknop{margin:0;padding:9px 14px;font-size:14px;flex-shrink:0;box-shadow:none}
  .menu > a:not(.knop){flex-shrink:0;white-space:nowrap;padding:8px 12px;font-size:14px;border-radius:999px}
  .menu > a b{margin-left:4px}
  .menu h4{display:none}
  .menu .onderaan{margin-top:0}
  .lijst{flex:1;min-height:0;border-right:0}
  .lees{flex:1;min-height:0}
  body.desk.heeft-open .lijst,body.desk:not(.heeft-open) .lees{display:none}
  body.desk.heeft-open .menu{display:none}
  .leeskop{padding:14px 16px 12px}
  .leeskop .r1{flex-wrap:wrap}
  .leeskop h2{font-size:21px}
  .gegevens{gap:4px 16px}
  .acties{overflow-x:auto;flex-wrap:nowrap;margin:12px -16px 0;padding:0 16px 2px;scrollbar-width:none}
  .acties::-webkit-scrollbar{display:none}
  .actie{white-space:nowrap;flex-shrink:0}
  details.meer{position:static}
  .meer-vak{position:fixed;left:16px;right:16px;top:auto;bottom:16px;width:auto}
  .berichten{padding:14px 16px 18px}
  .bel{max-width:86%}
  .notitie{max-width:100%}
  .opstel{margin:0 10px 10px}
  .opstel .voet .uitleg{display:none}
  .opstel textarea{font-size:16px}

  /* Overzicht en beheer */
  .ovz{padding:18px 16px 32px;flex:1;min-height:0}
  .ovzkop{flex-direction:column;align-items:flex-start}
  .tegels{grid-template-columns:1fr 1fr}
  .panelen{grid-template-columns:1fr}
  .paneel{overflow-x:auto}
  .tabel{min-width:760px}

  /* Melder */
  body.melder{height:auto;min-height:100vh;overflow:visible}
  .mkop{padding:0 16px 22px;border-radius:0 0 26px 26px}
  .mbalk{gap:12px;height:auto;padding:12px 0;flex-wrap:wrap}
  .mbalk nav{order:3;flex:1 1 100%;margin:0;overflow-x:auto;scrollbar-width:none}
  .mbalk nav::-webkit-scrollbar{display:none}
  .mbalk nav a{white-space:nowrap;padding:7px 12px;font-size:14px}
  .mbalk .ik > span{display:none}
  .welkom{flex-direction:column;align-items:stretch;gap:18px;padding-top:12px}
  .welkom h1{font-size:30px}
  .welkom p{font-size:15px}
  .welkom .nieuwknop{justify-content:center}
  .minhoud{display:block;padding:18px 16px 24px}
  body.melder.heeft-open .mlijst,body.melder:not(.heeft-open) .detail{display:none}
  body.melder.heeft-open .mkop .welkom{display:none}
  .mlijst{overflow:visible;margin:0;padding:0}
  .detail{min-height:calc(100dvh - 120px);border-radius:20px}
  .detail .naarlijst{margin:14px 18px 0}
  .dkop{flex-direction:column;gap:10px;padding:12px 18px 14px}
  .dkop h2{font-size:21px}
  .dkop .rechts{margin-left:0;flex-direction:row;align-items:center;flex-wrap:wrap}
  .tijdlijn{padding:12px 18px;overflow-x:auto}
  .stap{flex:0 0 auto;margin-right:18px}
  .stap::before{display:none}
  .detail .opstel{margin:10px}

  /* Nieuwe melding */
  .nieuw-blad{display:flex;flex-direction:column;padding:18px 16px 32px;gap:18px}
  .nieuw-vak{padding:20px 18px;border-radius:20px;gap:22px}
  .hierna{position:static}
  .groepkeuze{grid-template-columns:repeat(auto-fill,minmax(74px,1fr));gap:8px}
  .groepkeuze span{gap:8px;padding:12px 4px 10px;font-size:12.5px;line-height:1.2;border-radius:16px}
  .groepkeuze input:checked + span{padding:11px 3px 9px}
  .groepkeuze i{width:40px;height:40px;border-radius:12px}
  .groepkeuze i .ic{width:20px;height:20px}
  .velden{grid-template-columns:1fr}
  .vak input,.vak textarea,.vak select{font-size:16px}
  .dringend span{padding:11px 2px;font-size:13px;white-space:normal}
  .sleep{padding:16px}
  .nieuw-vak .knoppen{flex-direction:column-reverse;align-items:stretch}

  /* Inloggen: het formulier eerst, de uitleg eronder */
  body.il{align-items:flex-start;padding:28px 20px 40px}
  .il-blad{grid-template-columns:1fr;grid-template-areas:"merk" "vak" "uitleg";row-gap:28px}
  .il-vak{padding-top:22px}
  .il-vak input{font-size:16px}
  .il-uitleg{border-top:1px solid var(--lijn);padding-top:26px}
  .il-uitleg h1{font-size:30px}
  .il-lead{font-size:16px;margin-bottom:22px}
}