:root{
  --bg:#f5f6f8; --panel:#fff; --panel-2:#fafbfc; --line:#e2e4e9;
  --ink:#16181d; --muted:#666c78; --accent:#c8102e; --accent-ink:#fff;
  --pos:#15803d; --warn:#b45309; --neg:#b91c1c;
  --r:10px; --shadow:0 1px 2px rgba(0,0,0,.05);
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#0c0d10; --panel:#15171c; --panel-2:#1b1e24; --line:#2a2e36;
    --ink:#f0f1f3; --muted:#98a0ac; --accent:#ff5d73; --accent-ink:#1a0308;
    --pos:#4ade80; --warn:#fbbf24; --neg:#f87171;
    --shadow:0 1px 2px rgba(0,0,0,.4);
  }
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font:15px/1.55 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit}
.hide{display:none !important}

/* ---------------------------------------------------------------- layout */
.app{display:grid;grid-template-columns:200px 1fr;min-height:100vh}
@media (max-width:820px){ .app{grid-template-columns:1fr} }

aside{
  background:var(--panel);border-right:1px solid var(--line);
  padding:18px 12px;display:flex;flex-direction:column;gap:2px;
}
@media (max-width:820px){
  aside{
    flex-direction:row;overflow-x:auto;border-right:0;border-bottom:1px solid var(--line);
    padding:8px;position:sticky;top:0;z-index:10;
  }
}
.merk{font-weight:650;font-size:15px;padding:4px 10px 14px;letter-spacing:-.01em}
@media (max-width:820px){ .merk{display:none} }

nav button{
  display:flex;align-items:center;gap:9px;width:100%;
  font:inherit;text-align:left;padding:8px 10px;border-radius:8px;
  border:0;background:none;color:var(--muted);cursor:pointer;white-space:nowrap;
}
nav button:hover{background:var(--panel-2);color:var(--ink)}
nav button.actief{background:var(--accent);color:var(--accent-ink);font-weight:550}
nav .telletje{
  margin-left:auto;font-size:11px;font-variant-numeric:tabular-nums;
  background:var(--neg);color:#fff;border-radius:999px;padding:1px 6px;
}
nav button.actief .telletje{background:rgba(0,0,0,.25)}
.voet{margin-top:auto;padding:10px;font-size:12px;color:var(--muted)}
@media (max-width:820px){ .voet{display:none} }

main{padding:24px 26px 70px;max-width:1150px;overflow-x:hidden}
@media (max-width:820px){ main{padding:18px 14px 50px} }

h1{font-size:19px;margin:0 0 3px;letter-spacing:-.015em}
.subkop{color:var(--muted);font-size:13px;margin:0 0 20px}
h2{font-size:14px;margin:0 0 12px;font-weight:600}

/* ---------------------------------------------------------------- panels */
.kaart{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
       padding:16px 18px;box-shadow:var(--shadow)}
.rooster{display:grid;grid-template-columns:repeat(auto-fit,minmax(178px,1fr));gap:12px;margin-bottom:20px}
.stapel{display:flex;flex-direction:column;gap:16px}
.tegel h3{font-size:11px;font-weight:500;color:var(--muted);margin:0 0 5px;
          text-transform:uppercase;letter-spacing:.05em}
.getal{font-size:25px;font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.bijschrift{font-size:12px;color:var(--muted);margin-top:2px}

/* --------------------------------------------------------------- controls */
button,.knop{
  font:inherit;padding:7px 13px;border-radius:8px;border:1px solid var(--line);
  background:var(--panel);color:var(--ink);cursor:pointer;
}
button:hover:not(:disabled){border-color:var(--muted)}
button:disabled{opacity:.5;cursor:default}
button.primair{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);font-weight:550}
button.klein{padding:4px 9px;font-size:12px;border-radius:7px}
input,select,textarea{
  font:inherit;padding:8px 10px;border-radius:8px;border:1px solid var(--line);
  background:var(--panel);color:var(--ink);width:100%;
}
textarea{min-height:130px;resize:vertical;line-height:1.55}
label{display:block;font-size:12px;color:var(--muted);margin:11px 0 4px}
.rij{display:flex;gap:9px;align-items:center;flex-wrap:wrap}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media (max-width:620px){ .duo{grid-template-columns:1fr} }
.balk{display:flex;gap:9px;align-items:center;flex-wrap:wrap;margin-bottom:14px}
.zoek{flex:1;min-width:180px}

/* ---------------------------------------------------------------- tables */
.scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{width:100%;border-collapse:collapse;font-size:14px;min-width:560px}
th{text-align:left;font-size:11px;font-weight:500;color:var(--muted);text-transform:uppercase;
   letter-spacing:.05em;padding:0 10px 8px;border-bottom:1px solid var(--line)}
td{padding:10px;border-bottom:1px solid var(--line);vertical-align:top}
tbody tr{cursor:pointer}
tbody tr:hover{background:var(--panel-2)}
tbody tr:last-child td{border-bottom:0}
.num{text-align:right;font-variant-numeric:tabular-nums}
.leeg{color:var(--muted);text-align:center;padding:30px 10px;font-size:14px}

/* ----------------------------------------------------------------- badges */
.pil{display:inline-block;font-size:11px;padding:2px 8px;border-radius:999px;
     border:1px solid var(--line);color:var(--muted);white-space:nowrap}
.pil.pos{color:var(--pos);border-color:currentColor}
.pil.warn{color:var(--warn);border-color:currentColor}
.pil.neg{color:var(--neg);border-color:currentColor}
.pil.vol{background:var(--neg);border-color:var(--neg);color:#fff}

/* ------------------------------------------------------------------- mail */
.mailrij{display:grid;grid-template-columns:1fr auto;gap:10px;padding:11px 2px;
         border-bottom:1px solid var(--line);cursor:pointer}
.mailrij:hover{background:var(--panel-2)}
.mailrij .van{font-weight:550;font-size:14px}
.mailrij .onderw{font-size:13px}
.mailrij .frag{font-size:12px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mailrij .rechts{text-align:right;font-size:11px;color:var(--muted);white-space:nowrap}
.bericht{border:1px solid var(--line);border-radius:var(--r);padding:13px 15px;margin-bottom:11px;
         background:var(--panel)}
.bericht.uit{background:var(--panel-2);border-left:3px solid var(--accent)}
.bericht .kop{font-size:12px;color:var(--muted);margin-bottom:7px}
.bericht .lijf{white-space:pre-wrap;word-break:break-word;font-size:14px}

/* ----------------------------------------------------------------- agenda */
.dagblok{margin-bottom:18px}
.dagkop{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;
        padding-bottom:6px;border-bottom:1px solid var(--line);margin-bottom:8px}
.afspraak{display:grid;grid-template-columns:86px 1fr auto;gap:12px;padding:9px 2px;
          border-bottom:1px solid var(--line);align-items:baseline}
.afspraak .tijd{font-variant-numeric:tabular-nums;font-size:13px;color:var(--muted)}
.afspraak.extern{opacity:.65}

/* ----------------------------------------------------------------- overig */
.melding{border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:var(--r);
         padding:13px 15px;margin-bottom:16px;font-size:14px;background:var(--panel)}
.fout{color:var(--neg);font-size:13px;min-height:18px;margin-top:8px}
.ok{color:var(--pos);font-size:13px;min-height:18px;margin-top:8px}
.login{max-width:330px;margin:14vh auto}
.terug{background:none;border:0;color:var(--muted);padding:0;margin-bottom:12px;font-size:13px;cursor:pointer}
.terug:hover{color:var(--ink)}
svg.grafiek{display:block;width:100%;height:auto}
.laden{color:var(--muted);font-size:14px;padding:20px 0}

/* ------------------------------------------------------- weekrooster agenda */
.weekbalk{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
.weektitel{font-weight:600;font-size:15px;min-width:190px}

.rooster-wrap{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
              overflow:hidden;box-shadow:var(--shadow)}
.rooster-kop{display:grid;grid-template-columns:52px repeat(7,1fr);
             border-bottom:1px solid var(--line);position:sticky;top:0;z-index:3;background:var(--panel)}
.rooster-kop div{padding:8px 4px;text-align:center;font-size:12px;color:var(--muted);
                 border-left:1px solid var(--line)}
.rooster-kop div:first-child{border-left:0}
.rooster-kop .vandaag{color:var(--accent);font-weight:650}
.rooster-kop b{display:block;font-size:16px;color:var(--ink);font-weight:600}
.rooster-kop .vandaag b{color:var(--accent)}

.rooster-body{display:grid;grid-template-columns:52px repeat(7,1fr);
              max-height:66vh;overflow-y:auto;position:relative}
.uurkolom{border-right:1px solid var(--line)}
.uurlabel{height:44px;font-size:11px;color:var(--muted);text-align:right;
          padding:0 6px;transform:translateY(-7px)}
.dagkolom{position:relative;border-left:1px solid var(--line)}
.uurvak{height:44px;border-bottom:1px solid var(--line);cursor:pointer}
.uurvak:hover{background:var(--panel-2)}
.dagkolom.weekend{background:color-mix(in srgb,var(--panel-2) 60%,transparent)}

.blok{position:absolute;left:2px;right:2px;border-radius:6px;padding:3px 6px;
      font-size:11.5px;line-height:1.25;overflow:hidden;cursor:pointer;
      background:var(--accent);color:var(--accent-ink);border:1px solid transparent}
.blok:hover{filter:brightness(1.08)}
.blok b{display:block;font-weight:600}
.blok small{opacity:.85;font-size:10.5px}
.blok.extern{background:var(--panel-2);color:var(--muted);border-color:var(--line);cursor:default}
.blok.extern:hover{filter:none}
.blok.geannuleerd{opacity:.45;text-decoration:line-through}

@media (max-width:820px){
  .rooster-kop,.rooster-body{grid-template-columns:42px repeat(7,minmax(94px,1fr))}
  .rooster-wrap{overflow-x:auto}
  .blok{font-size:10.5px}
}

/* ------------------------------------------------------------------- dialoog */
.overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);display:flex;
         align-items:center;justify-content:center;padding:18px;z-index:50}
.dialoog{background:var(--panel);border:1px solid var(--line);border-radius:12px;
         width:100%;max-width:440px;max-height:88vh;overflow-y:auto;padding:20px 22px;
         box-shadow:0 12px 40px rgba(0,0,0,.35)}
.dialoog h2{font-size:16px;margin:0 0 14px}
.dialoog .knoppen{display:flex;gap:8px;margin-top:18px;align-items:center}
.dialoog .knoppen .rechts{margin-left:auto}
button.gevaar{color:var(--neg);border-color:var(--neg)}

/* ------------------------------------------------------------------ legenda */
.legenda{display:flex;flex-wrap:wrap;gap:6px 16px;margin:0 0 14px;
         padding:11px 14px;background:var(--panel);border:1px solid var(--line);
         border-radius:var(--r);font-size:12px}
.legenda-item{display:flex;align-items:center;gap:7px;color:var(--ink);white-space:nowrap}
.legenda-item i{width:12px;height:12px;border-radius:3px;flex:none;display:inline-block}
.legenda-item i.leeg-kleur{background:var(--panel-2);border:1px solid var(--line)}
.legenda-item em{color:var(--muted);font-style:normal;font-size:11.5px}
@media (max-width:820px){ .legenda-item em{display:none} }

/* --------------------------------------------------- klant zoeken in de bon */
.treffers{position:absolute;left:0;right:0;top:100%;z-index:60;margin-top:3px;
          background:var(--panel);border:1px solid var(--line);border-radius:9px;
          max-height:230px;overflow-y:auto;box-shadow:0 8px 22px rgba(0,0,0,.25)}
.treffer{padding:8px 11px;cursor:pointer;border-bottom:1px solid var(--line);font-size:13.5px}
.treffer:last-child{border-bottom:0}
.treffer:hover{background:var(--panel-2)}
.treffer small{display:block;color:var(--muted);font-size:11.5px;margin-top:1px}
.treffer.leeg-treffer{color:var(--muted);cursor:default}
.treffer.leeg-treffer:hover{background:none}
.klantkaartje{margin-top:8px;padding:9px 11px;border-radius:9px;font-size:12.5px;
              background:var(--panel-2);border:1px solid var(--line);color:var(--muted)}
.klantkaartje strong{color:var(--ink);font-size:13.5px;margin-right:6px}
.stip{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:6px;
      vertical-align:baseline;flex:none}

/* ==========================================================================
   Telefoon en tablet
   De zijbalk wordt een tabbalk onderaan, tabellen worden kaarten, en alles
   wat je moet aanraken wordt groot genoeg voor een duim.
   ========================================================================== */
@media (max-width: 820px) {

  /* ------------------------------------------------ navigatie onderaan */
  .app{ display:block; }

  aside{
    position:fixed; left:0; right:0; bottom:0; top:auto; z-index:40;
    display:flex; flex-direction:row; gap:0; padding:0;
    background:var(--panel); border:0; border-top:1px solid var(--line);
    overflow:visible;
    padding-bottom:env(safe-area-inset-bottom);   /* iPhone-streepje */
    box-shadow:0 -1px 10px rgba(0,0,0,.14);
  }

  nav{ display:flex; width:100%; }
  nav button{
    flex:1; flex-direction:column; gap:2px; align-items:center; justify-content:center;
    padding:9px 2px 7px; border-radius:0; font-size:10.5px; line-height:1.15;
    min-height:54px; position:relative;
  }
  nav button.actief{
    background:none; color:var(--accent); font-weight:600;
  }
  nav button.actief::before{
    content:''; position:absolute; top:0; left:18%; right:18%; height:2.5px;
    background:var(--accent); border-radius:0 0 3px 3px;
  }
  nav .telletje{
    position:absolute; top:4px; right:50%; margin-right:-22px; margin-left:0;
    font-size:10px; padding:0 5px; min-width:16px; text-align:center;
  }

  /* ------------------------------------------------- kop met uitloggen */
  .voet{
    display:flex; position:fixed; top:0; left:0; right:0; z-index:30;
    margin:0; padding:9px 14px; align-items:center; gap:10px;
    background:var(--panel); border-bottom:1px solid var(--line);
    padding-top:calc(9px + env(safe-area-inset-top));
    font-size:12px;
  }
  .voet::before{
    content:'Benny CV'; font-weight:650; font-size:14px; color:var(--ink);
    letter-spacing:-.01em;
  }
  .voet > div{ margin-left:auto; color:var(--muted); }
  .voet button{ margin:0 !important; }

  main{
    padding:14px 13px 78px;                        /* ruimte voor de tabbalk */
    padding-top:calc(58px + env(safe-area-inset-top));
    max-width:100%;
  }

  h1{ font-size:20px; }
  .subkop{ font-size:13px; margin-bottom:14px; }

  /* --------------------------------------------- tabellen worden kaarten */
  .scroll{ overflow:visible; }
  table{ min-width:0; display:block; }
  thead{ display:none; }
  tbody, tr, td{ display:block; width:100%; }
  tbody tr{
    border:1px solid var(--line); border-radius:10px; padding:11px 13px;
    margin-bottom:9px; background:var(--panel);
  }
  tbody tr:hover{ background:var(--panel); }
  td{ border:0; padding:2px 0; }
  td.num{ text-align:left; }
  td:empty{ display:none; }
  .leeg{ padding:22px 10px; }
  tbody tr td:last-child:has(button){
    display:flex; gap:7px; flex-wrap:wrap; margin-top:9px;
  }

  /* --------------------------------------------------------- bedieningen */
  button, .knop{ padding:10px 15px; font-size:14px; }
  button.klein{ padding:7px 12px; font-size:12.5px; }
  input, select, textarea{ font-size:16px; padding:11px 12px; }  /* 16px = geen inzoomen op iOS */
  label{ margin-top:13px; }
  .balk, .weekbalk{ gap:7px; }
  .balk button, .weekbalk button{ flex:0 0 auto; }

  /* ------------------------------------------------------------- agenda */
  .weektitel{ min-width:0; flex:1 1 100%; order:-1; font-size:16px; margin-bottom:2px; }
  .rooster-wrap{ overflow:hidden; }
  .rooster-body{ max-height:calc(100vh - 300px); }
  .uurvak{ height:52px; }                      /* groter aanraakvlak */
  .uurlabel{ height:52px; font-size:10px; }
  .blok{ font-size:11.5px; padding:4px 6px; }
  .blok small{ font-size:10.5px; }
  .legenda{ gap:5px 11px; padding:9px 11px; font-size:11.5px; }
  .legenda-item em{ display:none; }

  /* --------------------------------------------------------------- mail */
  .mailrij{ grid-template-columns:1fr; gap:3px; padding:12px 2px; }
  .mailrij .rechts{ text-align:left; display:flex; gap:7px; align-items:center; }
  .bericht{ padding:11px 13px; }

  /* ------------------------------------------------------------ dialoog */
  .overlay{ padding:0; align-items:flex-end; }
  .dialoog{
    max-width:100%; max-height:92vh; border-radius:16px 16px 0 0;
    padding:18px 17px calc(20px + env(safe-area-inset-bottom));
  }
  .dialoog .knoppen{ flex-wrap:wrap; }
  .dialoog .knoppen button{ flex:1 1 auto; }

  /* ------------------------------------------------------------ overige */
  .rooster{ grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:9px; }
  .getal{ font-size:22px; }
  .kaart{ padding:13px 14px; }
  .login{ margin:8vh auto; }
}

/* Heel smal: tegels onder elkaar in plaats van geknepen naast elkaar */
@media (max-width: 400px) {
  .rooster{ grid-template-columns:1fr 1fr; }
  nav button{ font-size:9.5px; }
}

/* ==========================================================================
   Kopbalk en schuifmenu
   Op een breed scherm blijft de zijbalk gewoon staan. Op een telefoon schuift
   hij van links in, met een knop linksboven — zoals Google Agenda het doet.
   ========================================================================== */
#kop{ display:none; }
#schaduw{ display:none; }

@media (max-width: 820px) {

  #kop{
    display:flex; align-items:center; gap:12px;
    position:fixed; top:0; left:0; right:0; z-index:45;
    height:calc(52px + env(safe-area-inset-top));
    padding:env(safe-area-inset-top) 14px 0;
    background:var(--panel); border-bottom:1px solid var(--line);
  }
  .koptitel{ font-weight:650; font-size:16px; letter-spacing:-.01em; }
  .kopwie{ margin-left:auto; font-size:12px; color:var(--muted); }

  /* Hamburger van drie streepjes die bij openen een kruis wordt */
  #menuKnop{
    width:38px; height:38px; padding:0; border:0; background:none;
    display:flex; flex-direction:column; justify-content:center; gap:4.5px;
    border-radius:9px; flex:none;
  }
  #menuKnop span{
    display:block; height:2px; width:20px; background:var(--ink); border-radius:2px;
    transition:transform .18s ease, opacity .18s ease;
  }
  body.menu-open #menuKnop span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
  body.menu-open #menuKnop span:nth-child(2){ opacity:0; }
  body.menu-open #menuKnop span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }

  /* De zijbalk wordt een lade */
  aside{
    position:fixed; top:0; bottom:0; left:0; right:auto; z-index:50;
    width:255px; max-width:82vw;
    flex-direction:column; gap:2px; overflow-y:auto;
    padding:calc(16px + env(safe-area-inset-top)) 12px calc(16px + env(safe-area-inset-bottom));
    background:var(--panel); border:0; border-right:1px solid var(--line);
    box-shadow:none;
    transform:translateX(-102%);
    transition:transform .22s cubic-bezier(.4,0,.2,1);
  }
  body.menu-open aside{ transform:translateX(0); box-shadow:2px 0 22px rgba(0,0,0,.28); }

  .merk{ display:block; padding:2px 10px 16px; font-size:16px; }

  nav{ display:block; width:100%; }
  nav button{
    flex-direction:row; align-items:center; justify-content:flex-start;
    width:100%; padding:11px 12px; border-radius:9px; font-size:15px;
    min-height:0; gap:9px;
  }
  nav button.actief{
    background:var(--accent); color:var(--accent-ink); font-weight:550;
  }
  nav button.actief::before{ content:none; }
  nav .telletje{
    position:static; margin-left:auto; margin-right:0;
    font-size:11px; padding:1px 7px;
  }

  .voet{
    display:block; position:static; margin-top:auto; padding:14px 12px 4px;
    background:none; border:0; border-top:1px solid var(--line);
  }
  .voet::before{ content:none; }
  .voet > div{ margin:0 0 4px; }

  /* Donkere laag achter de lade */
  #schaduw{
    display:block; position:fixed; inset:0; z-index:44;
    background:rgba(0,0,0,.42); opacity:0; pointer-events:none;
    transition:opacity .22s ease;
  }
  body.menu-open #schaduw{ opacity:1; pointer-events:auto; }

  main{
    padding:16px 14px 34px;
    padding-top:calc(66px + env(safe-area-inset-top));
  }
}

/* ------------------------------------------------- agenda in Google-stijl */
.rooster-kop div{ padding:9px 4px 10px; }
.rooster-kop b{
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; margin:3px auto 0; border-radius:50%;
  font-size:17px; font-weight:500;
}
.rooster-kop .vandaag b{
  background:var(--accent); color:var(--accent-ink); font-weight:600;
}
.rooster-kop .vandaag{ color:var(--accent); }

/* Halfuurlijn: lichter dan de hele uren, net als in Google Agenda */
.uurvak{
  background-image:linear-gradient(to bottom, transparent 50%,
                   color-mix(in srgb, var(--line) 55%, transparent) 50%,
                   color-mix(in srgb, var(--line) 55%, transparent) calc(50% + 1px),
                   transparent calc(50% + 1px));
}

/* Lijn op het huidige tijdstip */
.nu-lijn{ position:absolute; left:0; right:0; height:0; z-index:4; pointer-events:none; }
.nu-lijn::before{
  content:''; position:absolute; left:0; right:0; top:-1px; height:2px; background:var(--accent);
}
.nu-lijn::after{
  content:''; position:absolute; left:-5px; top:-6px; width:11px; height:11px;
  border-radius:50%; background:var(--accent);
}

.blok{ border-radius:5px; box-shadow:0 1px 2px rgba(0,0,0,.14); }
.blok b{ font-weight:500; }

/* ------------------------------------------------------------- afmelding */
.afmkop{ font-size:12px; text-transform:uppercase; letter-spacing:.05em;
         color:var(--muted); margin:20px 0 2px; font-weight:600;
         padding-top:12px; border-top:1px solid var(--line); }
.blok{ cursor:grab; }
.blok.sleept{ cursor:grabbing; opacity:.92; z-index:60;
              box-shadow:0 8px 20px rgba(0,0,0,.3); }

/* Inklapbaar blok in een dialoog: de kop blijft leesbaar als afmkop. */
details.vouw > summary{ cursor:pointer; list-style:none; user-select:none; }
details.vouw > summary::-webkit-details-marker{ display:none; }
details.vouw > summary::before{ content:'\25B8'; display:inline-block; width:14px;
  transition:transform .12s ease; color:var(--muted); }
details.vouw[open] > summary::before{ transform:rotate(90deg); }
details.vouw > summary span{ text-transform:none; letter-spacing:0; font-weight:400;
  color:var(--muted); }

.lastkop{ display:flex; align-items:baseline; gap:7px; flex-wrap:wrap; font-size:13px;
           font-weight:600; margin:14px 0 6px; }
.lastkop span{ font-weight:400; font-size:11px; color:var(--muted); }
.drie{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:9px; }
@media (max-width:620px){ .drie{ grid-template-columns:1fr 1fr; } }
input.opm{ margin-top:5px; font-size:13px; }
.afmeldbalk{ display:flex; align-items:center; gap:10px; flex-wrap:wrap;
             margin-top:18px; padding-top:14px; border-top:1px solid var(--line); }
.afmeldbalk .bijschrift{ margin:0; }

/* Koppelstatus van de agenda: één regeltje, geen kader. */
.koppelregel{
  display:flex; align-items:center; gap:7px; flex-wrap:wrap;
  font-size:11.5px; color:var(--muted); margin:-4px 0 10px;
}
.koppelregel .stip{ width:7px; height:7px; margin:0; }
.koppelregel a{ color:var(--muted); text-decoration:underline; text-underline-offset:2px; }
.koppelregel a:hover{ color:var(--ink); }