/* Christine — alle opmaak. Stond eerst in index.html; apart is het
   makkelijker terugvinden en raakt een wijziging niet per ongeluk de code. */
:root{
    /* Precies de kleuren van het startscherm, zodat elk scherm er hetzelfde
       uitziet. --accent was fel blauw; dat botste met de rustige rubriek-
       kleuren en gaf elk scherm een andere hoofdkleur. */
    --bg:#F3F1ED; --card:#FFFDFA; --ink:#23211E; --muted:#837C72;
    --line:#E4DFD6; --accent:#146B52; --accent-ink:#0d4a38; --shadow:none;
    /* iOS-systeemkleuren. Stonden alleen op #tab-home; sinds de agenda dezelfde
       taal spreekt horen ze hier, anders vallen ze buiten dat scherm weg en
       tekent de browser zwart op zwart. */
    --ios-bg:#F2F2F7; --ios-card:#FFFFFF;
    --ios-ink:#000000; --ios-2:rgba(60,60,67,.60); --ios-3:rgba(60,60,67,.30);
    --ios-lijn:rgba(60,60,67,.29);
    --ios-blauw:#146B52; --ios-rood:#C8402F; --ios-oranje:#B8791A;
    --ios-groen:#34C759; --ios-grijs:#8E8E93;
    --zee:#4a7a94; --brussel:#9a7d4a;
    /* kleur per rubriek: herkenning in een oogopslag */
    --k-agenda:#1d9e75; --k-agenda-bg:#e1f5ee; --k-agenda-ink:#0f6e56;
    --k-pakje:#ef9f27;  --k-pakje-bg:#faeeda;  --k-pakje-ink:#854f0b;
    --k-geld:#378add;   --k-geld-bg:#e6f1fb;   --k-geld-ink:#185fa5;
    --k-taak:#7f77dd;   --k-taak-bg:#eeedfe;   --k-taak-ink:#534ab7;
    --k-shop:#d85a30;   --k-shop-bg:#faece7;   --k-shop-ink:#993c1d;
    /* Privé krijgt een eigen paars: naast --k-taak was het anders niet te zien
       of een bolletje op de tijdlijn een afspraak of een taak was. */
    --k-prive:#7f5bd6;
    /* De rest van de schermen zat tot v243 alleen in het hamburgermenu en had
       dus geen kleur nodig. Nu staan ze op het startscherm. Facturen, onkosten
       en geld delen bewust één kleurfamilie: ze horen bij elkaar. */
    --k-thuis:#4a7a94;  --k-factuur:#378add;   --k-onkost:#7fb4e8; --k-geld:#185fa5;
    --k-plan:#c2477f;   --k-notitie:#9a7d4a;   --k-wijn:#8e3b52;
    --k-bouw:#6b7280;   --k-instel:#8E8E93;
  }
  *{box-sizing:border-box}
  body{margin:0;background:var(--bg);color:var(--ink);
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    -webkit-font-smoothing:antialiased;padding-bottom:80px}
  header{position:sticky;top:0;z-index:10;background:var(--bg);
    padding:16px 16px 8px;border-bottom:1px solid var(--line)}
  h1{margin:0;font-size:22px;font-weight:600;letter-spacing:.2px}
  #ptr{position:fixed;top:0;left:0;right:0;z-index:9;display:flex;align-items:center;justify-content:center;gap:8px;
    height:0;overflow:hidden;color:var(--accent);font-size:13px;font-weight:600;background:var(--bg);
    transition:height .15s;pointer-events:none}
  #ptr.show{height:44px}
  #ptr.spin i{animation:spin .8s linear infinite}
  @keyframes spin{to{transform:rotate(360deg)}}
  .ordcat{display:flex;align-items:center;justify-content:space-between;margin:16px 0 4px;padding:0 2px}
  .ordcat:first-child{margin-top:2px}
  .ordcat-badge{font-size:13px;font-weight:700;color:var(--ink);letter-spacing:.2px}
  .ordcat-count{font-size:12px;color:var(--muted);background:var(--bg);border:1px solid var(--line);border-radius:999px;padding:1px 8px}
  .empty.small{padding:6px 4px;font-size:13px}
  .ordsug{margin-top:6px;padding:6px 8px;background:#fff8e6;border:1px solid #f0d98a;border-radius:8px;font-size:13px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
  /* dashboard-home */
  #home-greet{display:flex;align-items:baseline;justify-content:space-between;padding:4px 4px 10px;gap:8px}
  #greet-links{display:flex;align-items:center;gap:9px;flex-wrap:wrap;min-width:0}
  #plaats-knop{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border:none;border-radius:20px;
    font-size:12.5px;font-weight:600;cursor:pointer;white-space:nowrap;line-height:1.4}
  #plaats-knop .wissel{font-size:11px;opacity:.6}
  #greet-hi{font-size:20px;font-weight:600;color:var(--ink)}
  #greet-date{font-size:13px;color:var(--muted)}
  .hcount{margin-left:auto;font-size:12px;color:var(--accent);background:rgba(20,107,82,.10);
    padding:2px 9px;border-radius:20px;font-weight:600}
  #home-tiles:not(.hidden){display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:12px 0}
  /* "Te betalen" krijgt een eigen volle regel onder de pakjes */
  #tile-inv{grid-column:1 / -1}
  .tile{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px;box-shadow:var(--shadow);cursor:pointer;transition:transform .1s}
  .tile:active{transform:scale(.98)}
  .tile-top{display:flex;align-items:center;gap:6px;margin-bottom:8px;font-size:13px;color:var(--muted)}
  .tile-top i{font-size:17px}
  .tile-num{font-size:24px;font-weight:700;color:var(--ink);line-height:1}
  .tile-sub{font-size:12px;color:var(--muted);margin-top:3px;min-height:15px}
  /* Bestellingen: een kader per fase, met eigen kleur */
  .ordtegels{display:flex;gap:8px;margin-bottom:14px}
  .ordtegel{flex:1;border-radius:14px;padding:12px 8px;text-align:center}
  .ordtegel-num{font-size:22px;font-weight:700;line-height:1}
  .ordtegel-lab{font-size:11px;margin-top:3px}
  .ordkaart{background:var(--card);border:1px solid var(--line);border-left:4px solid var(--line);
    border-radius:14px;padding:12px 14px;margin-bottom:12px;box-shadow:var(--shadow)}
  .ordkop{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
  .ordtitel{font-size:15px;font-weight:600}
  .ordtel{font-size:12px;font-weight:700;border-radius:20px;padding:2px 10px}
  .ordkaart .ev{border-bottom:1px solid var(--line)}
  .ordkaart .ev:last-child{border-bottom:none}
  #sirene-alarm{background:#b3261e;color:#fff;border-radius:18px;padding:20px;margin-bottom:14px;text-align:center;
    box-shadow:0 6px 24px rgba(179,38,30,.35);animation:sirenepuls 1.4s ease-in-out infinite}
  #sirene-alarm.hidden{display:none}
  @keyframes sirenepuls{0%,100%{opacity:1}50%{opacity:.82}}
  .more-kop{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
    color:var(--muted);padding:14px 16px 4px}
  .more-kop.hidden{display:none}
  /* maandrooster in de agenda */
  .kal-kop{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
  .kal-maand{font-size:16px;font-weight:700;text-transform:capitalize}
  .kal-nav{border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:10px;
    width:34px;height:34px;font-size:15px;cursor:pointer}
  .kal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}
  .kal-dagnaam{text-align:center;font-size:10px;color:var(--muted);padding:2px 0;text-transform:uppercase;letter-spacing:.04em}
  .kal-dag{aspect-ratio:1;border-radius:10px;display:flex;flex-direction:column;align-items:center;
    justify-content:center;font-size:13px;cursor:pointer;background:var(--bg);color:var(--ink);border:1px solid transparent}
  .kal-dag.leeg{background:transparent;cursor:default}
  .kal-dag.buiten{opacity:.32}
  .kal-dag.vandaag{border-color:var(--accent);font-weight:700;color:var(--accent)}
  .kal-dag.gekozen{background:var(--accent);color:#fff;font-weight:700}
  .kal-stippen{display:flex;flex-wrap:wrap;gap:2px;margin-top:2px;min-height:5px;justify-content:center;width:100%}
  .kal-balk{height:4px;flex:1 0 100%;min-width:100%}
  .kal-stip{width:5px;height:5px;border-radius:50%}
  /* rubriekkleuren: streepje links op de kaart, getinte tegel, gekleurd bolletje */
  .card.k-agenda{border-left:4px solid var(--k-agenda)}
  /* Vandaag springt eruit: hele kaart in een lichte tint */
  .card.k-afval{border-left:4px solid #888780}
  .card.k-afval.vanavond{background:#faeeda;border:1px solid transparent;border-left:4px solid var(--k-pakje)}
  .afvalrij{display:flex;justify-content:space-between;align-items:center;padding:7px 0;border-bottom:1px solid var(--line)}
  .afvalrij:last-child{border-bottom:none}
  .card.k-vandaag{background:var(--k-agenda-bg);border:1px solid transparent;border-left:4px solid var(--k-agenda)}
  .card.k-vandaag h2{color:var(--k-agenda-ink)}
  .card.k-vandaag .hcount{background:#9fe1cb;color:var(--k-agenda-ink)}
  .card.k-pakje{border-left:4px solid var(--k-pakje)}
  .card.k-geld{border-left:4px solid var(--k-geld)}
  .card.k-taak{border-left:4px solid var(--k-taak)}
  .card.k-shop{border-left:4px solid var(--k-shop)}
  .tile.t-pakje{background:var(--k-pakje-bg);border-color:transparent}
  .tile.t-pakje .tile-top{color:var(--k-pakje-ink)}
  .tile.t-pakje .tile-num{color:var(--k-pakje-ink)}
  .tile.t-geld{background:var(--k-geld-bg);border-color:transparent}
  .tile.t-geld .tile-top{color:var(--k-geld-ink)}
  .tile.t-geld .tile-num{color:var(--k-geld-ink)}
  .hcount.h-agenda{color:var(--k-agenda-ink);background:var(--k-agenda-bg)}
  .hcount.h-pakje{color:var(--k-pakje-ink);background:var(--k-pakje-bg)}
  .sub{color:var(--muted);font-size:13px;margin-top:2px}
  /* Onderaan genoeg ruimte vrijhouden: de vaste onderbalk (±80px) plus de
     typbalk erboven (±60px), anders verdwijnt de laatste inhoud eronder. */
  main{max-width:640px;margin:0 auto;
    padding:calc(12px + env(safe-area-inset-top,0px)) 12px calc(175px + env(safe-area-inset-bottom,0px))}
  .card{background:var(--card);border:1px solid var(--line);border-radius:14px;
    box-shadow:none;padding:13px 14px;margin:14px 0}
  /* De kop van een kaart leest als een rubriek, met een haarlijntje dat de rest
     van de breedte opvult — hetzelfde als op het startscherm. */
  .card h2{margin:0 0 10px;font-size:12.5px;font-weight:600;letter-spacing:.07em;
    text-transform:uppercase;color:var(--muted);display:flex;align-items:center;gap:8px}
  .card h2::after{content:"";flex:1;height:1px;background:var(--line)}
  .card h2 .refresh{order:3;margin-left:4px}
  .row{display:flex;align-items:center;gap:10px;padding:9px 4px;border-top:1px solid var(--line)}
  .row:first-of-type{border-top:none}
  .row label{flex:1;cursor:pointer;font-size:15px}
  .row.done label{color:var(--muted);text-decoration:line-through}
  .qty{color:var(--muted);font-size:13px;margin-left:6px}
  input[type=checkbox]{appearance:none;-webkit-appearance:none;width:22px;height:22px;
    border:1.5px solid #C9C1B4;border-radius:7px;cursor:pointer;position:relative;flex:none;background:#fff}
  input[type=checkbox]:checked{background:var(--accent);border-color:var(--accent)}
  input[type=checkbox]:checked::after{content:"";position:absolute;left:7px;top:3px;
    width:6px;height:11px;border:solid #fff;border-width:0 2.5px 2.5px 0;transform:rotate(45deg)}
  .subhead{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.07em;
    color:var(--muted);margin:14px 0 4px;padding-left:4px;display:flex;align-items:center;gap:8px}
  .subhead::after{content:"";flex:1;height:1px;background:var(--line)}
  .subhead.zee{color:var(--zee)} .subhead.brussel{color:var(--brussel)}
  .empty{color:var(--muted);font-size:14px;padding:8px 4px;font-style:italic}
  .add{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
  .add input[type=text],.add input[type=number],.add input[type=datetime-local]{
    flex:1;min-width:0;border:1px solid var(--line);border-radius:10px;padding:10px 12px;font-size:15px;background:#fff}
  .add button,.btn{background:var(--accent);color:#fff;border:none;border-radius:11px;
    padding:10px 14px;font-size:14px;font-weight:600;cursor:pointer;flex:none;min-height:40px}
  .add button:active,.btn:active{opacity:.85}
  /* Een knop met een omranding in plaats van een gevuld vlak: rustiger, en de
     kleur blijft over voor wat er echt toe doet. */
  .add .fotobtn{background:var(--card);color:var(--ink);border:1px solid var(--line);
    font-weight:500}
  .add .fotobtn i{color:var(--accent)}
  .add .fotobtn:active{background:#EFEBE3}
  .int-row{padding:12px 0;border-top:1px solid var(--line)}
  .int-row:first-child{border-top:none}
  .int-head{display:flex;justify-content:space-between;align-items:center;font-size:14px}
  .int-bar{height:6px;background:var(--line);border-radius:4px;overflow:hidden;margin-top:8px}
  .int-fill{height:100%;border-radius:4px;transition:width .3s}
  .add .fotobtn i{font-size:18px;vertical-align:-3px}
  .add .full{flex-basis:100%}
  .tag{font-size:11px;color:var(--muted);border:1px solid var(--line);border-radius:20px;padding:2px 8px;margin-left:6px}
  .lock{font-size:13px;margin-left:6px}
  .occ-date{color:var(--muted);font-size:13px;min-width:64px}
  .note{padding:10px 4px;border-top:1px solid var(--line);font-size:14px;white-space:pre-wrap;display:flex;gap:8px}
  .note:first-of-type{border-top:none}
  .note .body{flex:1}
  .note .nt{font-weight:600;display:block;margin-bottom:2px}
  .ev{padding:9px 4px;border-top:1px solid var(--line);font-size:14px;display:flex;gap:8px}
  .ev:first-of-type{border-top:none}
  .ev .body{flex:1}
  .ev .when{color:var(--muted);font-size:13px}
  .visrow{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--muted);flex-basis:100%;margin-top:2px}
  .visrow label{display:flex;align-items:center;gap:5px;cursor:pointer}
  #login{max-width:360px;margin:60px auto;padding:0 16px}
  #login .card{padding:20px}
  #mfa-poort{max-width:360px;margin:60px auto;padding:0 16px}
  #mfa-poort .card{padding:20px}
  #mfa-poort.hidden{display:none}
  #login input{width:100%;border:1px solid var(--line);border-radius:10px;
    padding:12px;font-size:16px;margin:8px 0;background:#fff}
  #login button{width:100%;margin-top:8px;padding:12px}
  .err{color:#a33;font-size:13px;margin-top:8px;min-height:16px}
  .tabs{display:flex;gap:6px;overflow-x:auto;padding:8px 12px 0;max-width:640px;margin:0 auto}
  .tab{white-space:nowrap;border:1px solid var(--line);background:var(--card);
    border-radius:20px;padding:9px 17px;font-size:15px;font-weight:600;color:var(--muted);cursor:pointer}
  .tab.active{background:var(--accent);color:#fff;border-color:var(--accent)}
  .hidden{display:none}
  .topbar{display:flex;justify-content:space-between;align-items:center}
  .logout{font-size:12px;color:var(--muted);background:none;border:none;cursor:pointer;text-decoration:underline}
  #appfooter{max-width:640px;margin:24px auto 175px;padding:14px 16px 20px;border-top:1px solid var(--line);
    display:flex;justify-content:space-between;align-items:center;gap:12px}
  .refresh{font-size:12px;color:var(--accent);background:none;border:none;cursor:pointer}
  .delx{font-size:12px;color:var(--muted);background:none;border:none;cursor:pointer}
  .delx.ooit{color:var(--accent);border:1px solid var(--accent);border-radius:8px;padding:2px 8px;font-weight:600;white-space:nowrap}

  /* bottom navigation */
  #bottomnav{position:fixed;left:0;right:0;bottom:0;z-index:40;background:var(--card);
    border-top:1px solid var(--line);display:flex;justify-content:space-around;align-items:stretch;
    padding:12px 4px calc(14px + env(safe-area-inset-bottom,0px));box-shadow:0 -2px 10px rgba(0,0,0,.05);
    transition:transform .25s ease}
  #bottomnav.hiddennav{transform:translateY(120%)}
  .navbtn{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;
    color:var(--muted);cursor:pointer;padding:4px 2px;border-radius:12px;min-width:0}
  .navbtn i{font-size:32px;line-height:1}
  .navbtn span{font-size:12px;font-weight:600;line-height:1.1;text-align:center;white-space:nowrap}
  .navbtn.active{color:var(--accent)}
  /* meer-menu */
  #moreoverlay{position:fixed;inset:0;z-index:41;background:rgba(0,0,0,.18)}
  #moreoverlay.hidden{display:none}
  /* herbruikbaar keuzevenster */
  /* Actiebalk onderaan: verschijnt alleen in selectiestand, boven de navigatie */
  #bulkbalk{position:fixed;left:0;right:0;bottom:calc(72px + env(safe-area-inset-bottom,0px));z-index:55;padding:0 10px}
  #bulkbalk.hidden{display:none}
  #bulkbalk-binnen{max-width:620px;margin:0 auto;background:var(--card);border:1px solid var(--line);
    border-radius:16px;box-shadow:0 6px 24px rgba(0,0,0,.18);padding:10px 12px}
  #bulk-tel{font-size:13px;font-weight:700;margin-bottom:8px}
  #bulk-knoppen{display:flex;gap:8px;flex-wrap:wrap}
  #bulk-knoppen button{flex:1 1 auto;min-width:96px;padding:11px 8px;border:1px solid var(--line);border-radius:12px;
    background:var(--bg);color:var(--ink);font-size:13px;font-weight:600;cursor:pointer}
  #bulk-knoppen button.gevaar{border-color:#e5b4b0;color:#b3261e}
  #dagvenster{position:fixed;inset:0;z-index:79;background:rgba(0,0,0,.35);display:flex;align-items:flex-end;justify-content:center}
  #dagvenster.hidden{display:none}
  #dagvensterbox{background:var(--card);border-radius:20px 20px 0 0;padding:20px 18px calc(24px + env(safe-area-inset-bottom,0px));
    width:100%;max-width:560px;max-height:76vh;overflow-y:auto;box-shadow:0 -6px 30px rgba(0,0,0,.2)}
  #koppel{position:fixed;inset:0;z-index:79;background:rgba(0,0,0,.35);display:flex;align-items:center;justify-content:center;padding:20px}
  #koppel.hidden{display:none}
  #koppelbox{background:var(--card);border-radius:18px;padding:22px 20px;width:100%;max-width:420px;max-height:88vh;overflow-y:auto;box-shadow:0 10px 40px rgba(0,0,0,.25)}
  #huispopup{position:fixed;inset:0;z-index:80;background:rgba(0,0,0,.45);backdrop-filter:blur(6px);
    display:flex;align-items:flex-end;justify-content:center}
  #huispopup.hidden{display:none}
  #huispopupbox{background:var(--card);border-radius:20px 20px 0 0;padding:20px 18px calc(24px + env(safe-area-inset-bottom,0px));
    width:100%;max-width:560px;max-height:80vh;overflow-y:auto;box-shadow:0 -6px 30px rgba(0,0,0,.25)}
  #wijnedit{position:fixed;inset:0;z-index:78;background:rgba(0,0,0,.35);display:flex;align-items:center;justify-content:center;padding:20px}
  #wijnedit.hidden{display:none}
  #wijneditbox{background:var(--card);border-radius:18px;padding:22px 20px;width:100%;max-width:400px;max-height:88vh;overflow-y:auto;box-shadow:0 10px 40px rgba(0,0,0,.25)}
  #occedit{position:fixed;inset:0;z-index:78;background:rgba(0,0,0,.35);display:flex;align-items:center;justify-content:center;padding:20px}
  #occedit.hidden{display:none}
  #occeditbox{background:var(--card);border-radius:18px;padding:22px 20px;width:100%;max-width:380px;box-shadow:0 10px 40px rgba(0,0,0,.25)}
  #ordedit{position:fixed;inset:0;z-index:78;background:rgba(0,0,0,.35);display:flex;align-items:center;justify-content:center;padding:20px}
  #ordedit.hidden{display:none}
  #ordeditbox{background:var(--card);border-radius:18px;padding:22px 20px;width:100%;max-width:400px;max-height:88vh;overflow-y:auto;box-shadow:0 10px 40px rgba(0,0,0,.25)}
  #boodedit{position:fixed;inset:0;z-index:78;background:rgba(0,0,0,.35);display:flex;align-items:center;justify-content:center;padding:20px}
  #boodedit.hidden{display:none}
  #boodeditbox{background:var(--card);border-radius:18px;padding:22px 20px;width:100%;max-width:380px;box-shadow:0 10px 40px rgba(0,0,0,.25)}
  #taakedit{position:fixed;inset:0;z-index:78;background:rgba(0,0,0,.35);display:flex;align-items:center;justify-content:center;padding:20px}
  #taakedit.hidden{display:none}
  #taakeditbox{background:var(--card);border-radius:18px;padding:22px 20px;width:100%;max-width:380px;box-shadow:0 10px 40px rgba(0,0,0,.25)}
  #aboedit{position:fixed;inset:0;z-index:78;background:rgba(0,0,0,.35);display:flex;align-items:center;justify-content:center;padding:20px}
  #aboedit.hidden{display:none}
  #aboeditbox{background:var(--card);border-radius:18px;padding:22px 20px;width:100%;max-width:400px;max-height:88vh;overflow-y:auto;box-shadow:0 10px 40px rgba(0,0,0,.25)}
  #alarmoverlay{position:fixed;inset:0;z-index:80;background:rgba(0,0,0,.45);display:flex;align-items:center;justify-content:center;padding:24px}
  #alarmoverlay.hidden{display:none}
  #alarmbox{background:var(--card);border-radius:18px;padding:22px 20px;width:100%;max-width:360px;border-top:5px solid #b3261e;box-shadow:0 10px 40px rgba(0,0,0,.3)}
  #evedit{position:fixed;inset:0;z-index:75;background:rgba(0,0,0,.35);display:flex;align-items:center;justify-content:center;padding:24px}
  #evedit.hidden{display:none}
  .evschakel{display:flex;align-items:center;gap:10px;margin:14px 0 2px;font-size:15px;cursor:pointer}
  .evschakel input{width:22px;height:22px}
  .ev-tijdveld.verborgen{display:none}
  #eveditbox{background:var(--card);border-radius:18px;padding:22px 20px;width:100%;max-width:380px;box-shadow:0 10px 40px rgba(0,0,0,.25)}
  .evlabel{display:block;font-size:13px;color:var(--muted);margin:10px 0 4px}
  .evinput{width:100%;padding:11px 12px;border:1px solid var(--line);border-radius:12px;background:var(--bg);
    color:var(--ink);font-size:16px;font-family:inherit;box-sizing:border-box;height:44px;
    -webkit-appearance:none;appearance:none;display:block}
  select.evinput{background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
    background-position:calc(100% - 18px) 19px,calc(100% - 13px) 19px;background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:34px}
  .evlabel{display:block;font-size:13px;color:var(--muted);margin:10px 0 4px}
  #evedit .rij, #taakedit .rij{display:flex;gap:10px;align-items:flex-end}
  #evedit .rij > div, #taakedit .rij > div{min-width:0}
  #kiesoverlay{position:fixed;inset:0;z-index:70;background:rgba(0,0,0,.35);display:flex;align-items:center;justify-content:center;padding:24px}
  #kiesoverlay.hidden{display:none}
  #kiesbox{background:var(--card);border-radius:18px;padding:22px 20px;width:100%;max-width:360px;box-shadow:0 10px 40px rgba(0,0,0,.25)}
  #kiesvraag{font-size:17px;font-weight:600;color:var(--ink);text-align:center;margin-bottom:18px}
  #kiesknoppen{display:flex;flex-direction:column;gap:10px}
  #kiesknoppen button{width:100%;padding:15px;font-size:16px;font-weight:600;border:none;border-radius:14px;
    background:var(--accent);color:#fff;cursor:pointer}
  #kiesknoppen button:active{transform:scale(.98)}
  #kiesknoppen button.annuleer{background:transparent;color:var(--muted);font-weight:500;padding:10px}
  /* Zijlade links: schuift naar binnen bij vegen naar rechts */
  #moresheet{position:fixed;left:0;top:0;bottom:0;width:78%;max-width:320px;z-index:44;background:var(--card);
    border-right:1px solid var(--line);box-shadow:4px 0 24px rgba(0,0,0,.18);
    padding:calc(18px + env(safe-area-inset-top,0px)) 12px calc(18px + env(safe-area-inset-bottom,0px));
    overflow-y:auto;-webkit-overflow-scrolling:touch;
    transform:translateX(0);transition:transform .22s ease}
  #moresheet.hidden{display:block;transform:translateX(-102%);pointer-events:none}
  .more-inner{margin:0 auto}
  /* klein menuknopje als achterdeur, voor als vegen niet lukt */
  #menuknop{position:fixed;left:10px;top:calc(8px + env(safe-area-inset-top,0px));z-index:41;
    width:38px;height:38px;border:none;border-radius:12px;background:rgba(0,0,0,.06);color:var(--ink);
    font-size:19px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center}
  .more-item{padding:14px 12px;font-size:16px;font-weight:600;border-bottom:1px solid var(--line);cursor:pointer;display:flex;align-items:center;gap:10px}
  .more-item i{font-size:22px;color:var(--muted)}
  .more-item:last-child{border-bottom:none}

  /* zwevende ronde spraakknop, rechtsonder */
  body.thuis-open #micfab{display:none}
  #micfab{position:fixed;right:16px;bottom:calc(84px + env(safe-area-inset-bottom,0px));z-index:42;
    width:64px;height:64px;border-radius:50%;border:none;background:var(--accent);color:#fff;cursor:pointer;
    display:flex;align-items:center;justify-content:center;
    box-shadow:0 4px 14px rgba(0,0,0,.22);transition:transform .12s,background .2s,bottom .25s ease}
  #micfab i{font-size:28px}
  #micfab:active{transform:scale(.94)}
  #micfab.rec{background:#c0504d;animation:pulse 1.4s infinite}
  #micfab.hiddennav{transform:translateY(160%)}
  @keyframes pulse{0%{box-shadow:0 0 0 0 rgba(192,80,77,.5)}70%{box-shadow:0 0 0 16px rgba(192,80,77,0)}100%{box-shadow:0 0 0 0 rgba(192,80,77,0)}}
  /* vaste chatbalk onderaan het startscherm */
  #chatbar{position:fixed;left:12px;right:92px;bottom:calc(90px + env(safe-area-inset-bottom,0px));z-index:41;
    display:flex;gap:8px;align-items:center;transition:transform .25s ease}
  #chatbar.hiddennav{transform:translateY(220%)}
  #chatbar.hidden{display:none}
  #chatinput{flex:1;height:44px;border:1px solid var(--line);background:var(--card);border-radius:22px;
    padding:0 16px;font-size:15px;color:var(--ink);box-shadow:0 2px 10px rgba(0,0,0,.10);outline:none}
  #chatinput:focus{border-color:var(--accent)}
  #chatsend{width:44px;height:44px;border-radius:50%;border:none;background:var(--accent);color:#fff;cursor:pointer;
    display:flex;align-items:center;justify-content:center;box-shadow:0 2px 10px rgba(0,0,0,.14);flex-shrink:0}
  #chatsend i{font-size:20px}
  #chatsend:active{transform:scale(.94)}
  /* volledig-scherm chatvenster */
  #chatfull{position:fixed;inset:0;z-index:60;background:var(--bg);display:flex;flex-direction:column}
  #chatfull.hidden{display:none}
  #chatfull-head{display:flex;align-items:center;justify-content:space-between;padding:calc(10px + env(safe-area-inset-top,0px)) 16px 10px;
    border-bottom:1px solid var(--line);background:var(--card)}
  #chatfull-title{font-size:17px;font-weight:600;color:var(--ink);display:flex;align-items:center;gap:8px}
  #chatfull-title i{color:var(--accent);font-size:20px}
  #chatfull-close{width:38px;height:38px;border-radius:50%;border:none;background:transparent;color:var(--ink);cursor:pointer;
    display:flex;align-items:center;justify-content:center}
  #chatfull-close i{font-size:22px}
  #chatfull-msgs{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:10px}
  .cmsg{max-width:82%;padding:10px 14px;font-size:15px;line-height:1.4;border-radius:16px;white-space:pre-wrap;word-wrap:break-word}
  .cmsg.me{align-self:flex-end;background:var(--accent);color:#fff;border-bottom-right-radius:5px}
  .cmsg.her{align-self:flex-start;background:var(--card);color:var(--ink);border:1px solid var(--line);border-bottom-left-radius:5px}
  .cmsg.typing{align-self:flex-start;color:var(--muted);font-style:italic}
  #chatfull-choices{display:flex;flex-wrap:wrap;gap:8px;padding:0 16px 6px}
  #chatfull-choices:empty{display:none}
  #chatfull-choices button{background:var(--accent);color:#fff;border:none;border-radius:16px;padding:9px 16px;
    font-size:15px;font-weight:600;cursor:pointer}
  #chatfull-bar{display:flex;gap:8px;align-items:center;padding:10px 12px calc(10px + env(safe-area-inset-bottom,0px));
    border-top:1px solid var(--line);background:var(--card)}
  #chatfull-input{flex:1;height:44px;border:1px solid var(--line);background:var(--bg);border-radius:22px;
    padding:0 16px;font-size:16px;color:var(--ink);outline:none}
  #chatfull-input:focus{border-color:var(--accent)}
  #chatfull-send{width:44px;height:44px;border-radius:50%;border:none;background:var(--accent);color:#fff;cursor:pointer;
    display:flex;align-items:center;justify-content:center;flex-shrink:0}
  #chatfull-send i{font-size:20px}
  #chatfull-send:active{transform:scale(.94)}
  /* De gesprekstekst boven de microfoon is weg: bij spraak wil je luisteren,
     niet meelezen. Keuzeknoppen en getypte gesprekken staan in het chatvenster. */
  /* Berichten stapelen van onderaf, tegen het invoerveld aan. Bij weinig tekst
     staat de begroeting dus meteen in beeld; bij veel tekst scrollt het gewoon.
     Naar onderen scrollen alleen was niet genoeg: het vak is hoger dan een
     bericht, dus sprong het voorbij de begroeting. */
  #chatfull-msgs{display:flex;flex-direction:column}
  #chatfull-msgs > *:first-child{margin-top:auto}
  #vstatus{display:none !important}
  #vstatus-oud{position:fixed;right:16px;bottom:calc(154px + env(safe-area-inset-bottom,0px));z-index:42;
    max-width:230px;font-size:12px;color:var(--ink);background:var(--card);border:1px solid var(--line);
    border-radius:12px;padding:8px 11px;box-shadow:var(--shadow);text-align:right;transition:bottom .25s ease}
  #vstatus-oud:empty{display:none}
  /* Ook de keuzeknoppen horen niet boven de microfoon. Bij spraak antwoord je
     met je stem; de knoppen staan al in het chatvenster. */
  #vchoices{display:none !important}
  #vchoices-oud{position:fixed;right:16px;bottom:calc(200px + env(safe-area-inset-bottom,0px));z-index:43;
    display:flex;flex-direction:column;gap:6px;align-items:flex-end;max-width:260px}
  #vchoices-oud:empty{display:none}
  #vchoices-oud button{background:var(--accent);color:#fff;border:none;border-radius:12px;
    padding:10px 16px;font-size:15px;font-weight:600;cursor:pointer;box-shadow:var(--shadow)}
  #vchoices button:active{opacity:.85}
  /* De taal waarin Christine meeschrijft terwijl je praat. Alleen zichtbaar
     terwijl ze luistert: dicteren in de browser kent de taal niet vanzelf, dus
     moet je hem kunnen omzetten zonder een scherm in te duiken. */
  /* Boven het waas van het gezicht (z-index 65), anders zie je ze niet terwijl
     ze luistert \u2014 en dat is nu net het moment waarop je van taal wisselt. */
  #vtaal{position:fixed;left:50%;transform:translateX(-50%);
    bottom:calc(30px + env(safe-area-inset-bottom,0px));z-index:70;
    display:flex;gap:8px;align-items:center}
  #vtaal:empty{display:none}
  #vtaal button{background:rgba(255,255,255,.9);color:#4a4a4a;border:none;
    border-radius:13px;padding:8px 13px;font-size:13px;font-weight:700;cursor:pointer;
    box-shadow:0 3px 10px rgba(0,0,0,.25)}
  #vtaal button.aan{background:var(--accent);color:#fff}

  /* Opkuis-rij met actieknoppen */
  .opk-row{display:flex;align-items:center;gap:8px;padding:8px 2px;border-bottom:1px solid var(--line);flex-wrap:wrap}
  .opk-row:last-child{border-bottom:none}
  .opk-label{flex:1;min-width:140px;font-size:14px;line-height:1.35}
  .opk-why{color:var(--muted);font-size:12px}
  .opk-btn{border:1px solid var(--line);background:var(--bg);color:var(--ink);border-radius:8px;
    padding:6px 10px;font-size:13px;cursor:pointer;font-weight:500;white-space:nowrap}
  .opk-btn.danger{color:#c0504d}
  .opk-btn.ooit{color:var(--accent);border-color:var(--accent)}
  .gift-note{font-size:13px;color:var(--muted);padding:2px 8px 6px 8px;font-style:italic}
  .occ-row{border-bottom:1px solid var(--line)}
  .occ-row:last-child{border-bottom:none}
  /* Reizen: kleinere blokjes, elk soort zijn eigen kleur. Je herkent in één
     oogopslag of een regel een vlucht, een hotel of een restaurant is. */
  /* ---------- REIZEN ----------
     Eén blok per reis: een kop die je open- en dichtklapt, en daaronder een
     tijdlijn met wat er echt gereserveerd is. Losse taxiritjes staan samengevat
     onderaan; vijf Uber-bonnetjes duwden anders de vlucht van het scherm. */
  .reisblok{margin-bottom:14px}
  .reiskop-groep{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;cursor:pointer;
    background:var(--card);border:1px solid var(--line);border-left:4px solid var(--line);
    border-radius:12px;padding:11px 13px}
  .reiskop-groep.dicht{background:transparent}
  .reisnaam{font-size:16px;font-weight:600;letter-spacing:-.2px}
  .reisperiode{font-size:13px;color:var(--muted)}
  .reisaftel{font-size:11.5px;color:var(--muted);border:1px solid var(--line);
    border-radius:20px;padding:1px 8px}
  .reistotaal{margin-left:auto;font-size:14px;font-weight:600;font-variant-numeric:tabular-nums}
  .reispijl{color:var(--line);font-size:16px;line-height:1}

  .reistijdlijn{position:relative;padding:10px 0 2px 62px;margin-left:4px}
  .reistijdlijn::before{content:"";position:absolute;left:52px;top:16px;bottom:14px;width:1px;
    background:var(--line)}
  .reisdag{font-size:11.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
    color:var(--muted);margin:8px 0 6px -62px;padding-left:2px}
  .reisstap{position:relative;display:block;padding:0 0 13px}
  .reisstap .uur{position:absolute;left:-62px;top:0;width:42px;text-align:right;
    font-size:12.5px;font-weight:600;font-variant-numeric:tabular-nums;color:var(--ink)}
  .reisstap .bol{position:absolute;left:-14px;top:4px;width:10px;height:10px;border-radius:50%;
    background:var(--bg);border:2.5px solid var(--line)}
  .reisstap .mid{display:flex;flex-direction:column;gap:2px;min-width:0}
  .reisstap .wat{font-size:14.5px;font-weight:500;line-height:1.3;display:flex;
    align-items:baseline;gap:8px}
  .reisstap .prijs{margin-left:auto;font-size:13px;font-weight:600;color:var(--muted);
    white-space:nowrap;font-variant-numeric:tabular-nums}
  .reisstap .onder{font-size:12.5px;color:var(--muted);line-height:1.35}
  /* Deel je de kosten, dan staat jouw deel vooraan en het volle bedrag erachter. */
  .reisstap .volprijs{font-weight:400;color:var(--muted);font-size:11.5px;margin-left:5px}
  .reisdeel{display:block;font-size:10.5px;font-weight:400;color:var(--muted);
    text-align:right;letter-spacing:.02em}
  .reisstap.ritten{cursor:pointer}
  .reisstap.klein{padding-bottom:8px;opacity:.85}
  .reisstap.klein .wat{font-size:13px;font-weight:400}
  /* Bij de uitgeklapte ritjes staat er een datum bij; die past niet in de smalle
     urenkolom, dus zet hij zich gewoon voor de tekst. */
  .reisstap.klein .uur{position:static;display:inline-block;width:auto;text-align:left;
    font-size:11.5px;font-weight:400;color:var(--muted);margin-right:8px}
  .reislinks{display:flex;gap:12px;margin-top:4px}
  .reislinks a{font-size:12px;color:var(--accent);text-decoration:none}

  .reisvoorstel{display:flex;align-items:center;gap:9px;background:#FBF0DE;
    border:1px solid #EBD9B4;border-radius:11px;padding:9px 11px;margin-bottom:7px}
  .reisvoorstel .mid{flex:1;min-width:0;display:flex;flex-direction:column}
  .reisvoorstel .t{font-size:14px;font-weight:500}
  .reisvoorstel .o{font-size:12px;color:var(--muted)}
  .reisicoon{font-size:15px;line-height:1}
  /* Thuis: je eigen dakterras als achtergrond, met glazen tegels erop */
  #tab-huis{position:relative}
  .huisdek{position:relative;border-radius:22px;overflow:hidden;padding:14px 12px 16px;
    background-image:url('terras.jpg');background-size:cover;background-position:center 38%;
    background-attachment:scroll;isolation:isolate}
  .huisdek:before{content:"";position:absolute;inset:0;z-index:0;
    background:linear-gradient(180deg,rgba(12,18,26,.42) 0%,rgba(12,18,26,.30) 35%,rgba(12,18,26,.52) 100%)}
  .huisdek > *{position:relative;z-index:1}
  .glas{background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.26);
    border-radius:20px;backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%);
    color:#fff;padding:14px 16px;text-shadow:0 1px 2px rgba(0,0,0,.28)}
  .glas.rood{background:rgba(255,42,32,.30);border-color:rgba(255,110,100,.5)}
  .glas.geel{background:rgba(255,199,0,.46);border-color:rgba(255,226,120,.75)}
  .glas.blauw{background:rgba(60,170,255,.34);border-color:rgba(150,210,255,.6)}
  .glas.blauwraam{background:rgba(40,140,255,.36);border-color:rgba(150,205,255,.65)}
  .glas.geel-blauwraam{border-color:rgba(190,200,150,.6);
    background:linear-gradient(135deg,rgba(255,199,0,.46) 0%,rgba(255,199,0,.46) 48%,
      rgba(40,140,255,.36) 52%,rgba(40,140,255,.36) 100%)}
  .glas.blauwraam-rood{border-color:rgba(200,130,150,.6);
    background:linear-gradient(135deg,rgba(40,140,255,.36) 0%,rgba(40,140,255,.36) 48%,
      rgba(255,42,32,.34) 52%,rgba(255,42,32,.34) 100%)}
  .glas.geel-rood{border-color:rgba(255,160,80,.55);
    background:linear-gradient(135deg,rgba(255,199,0,.46) 0%,rgba(255,199,0,.46) 48%,
      rgba(255,42,32,.34) 52%,rgba(255,42,32,.34) 100%)}
  .glas.geel-blauwraam-rood{border-color:rgba(210,170,120,.6);
    background:linear-gradient(120deg,rgba(255,199,0,.46) 0%,rgba(255,199,0,.46) 32%,
      rgba(40,140,255,.36) 34%,rgba(40,140,255,.36) 66%,
      rgba(255,42,32,.34) 68%,rgba(255,42,32,.34) 100%)}

  .glasbalk{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}
  .glaskop{font-size:11.5px;opacity:.88;letter-spacing:.04em;text-transform:uppercase}
  .glaswaarde{font-size:19px;font-weight:700;line-height:1.2;margin-top:3px}
  .glasknop{border:none;border-radius:14px;padding:11px 17px;font-size:14px;font-weight:700;
    background:rgba(255,255,255,.94);color:#16202c;cursor:pointer;white-space:nowrap;
    box-shadow:0 2px 10px rgba(0,0,0,.18)}
  .glasknop.uit{background:rgba(255,255,255,.16);color:#fff;border:1px solid rgba(255,255,255,.34);
    box-shadow:none}
  .glasrij{display:grid;gap:10px;margin-bottom:10px}
  .glasrij.twee{grid-template-columns:1fr 1fr}
  .glasrij.drie{grid-template-columns:repeat(3,1fr)}
    .statusrand{display:flex;align-items:center;gap:10px;padding:11px 15px;margin:0 0 12px;
    border-radius:14px;background:rgba(255,255,255,.72);backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);font-size:15px;font-weight:600;color:#1a1a1a;
    box-shadow:0 1px 6px rgba(0,0,0,.06)}
  .statusicoon{font-size:17px;font-weight:700}
  .ordcard2{display:flex;align-items:flex-start;gap:10px;padding:10px 2px;border-bottom:1px solid var(--line)}
  .ordcard2:last-child{border-bottom:none}
  /* leverdatum in een kadertje: groen bevestigd, geel geschat, grijs onbekend */
  .levbadge{display:inline-block;font-size:11px;font-weight:600;padding:3px 8px;
    border-radius:8px;margin:4px 6px 0 0;line-height:1.35}
  .levbadge.groen{background:#e1f5ee;color:#0f6e56}
  .levbadge.geel{background:#faeeda;color:#854f0b}
  .levbadge.grijs{background:#f2f1ee;color:#6b665e}
  .levbadge.adres{background:#f2f1ee;color:#6b665e;font-weight:500}
  /* eerstvolgende pakjes op het startscherm */
  /* De wikkel telt niet mee in het raster: de twee pakjes worden zelf tegels,
     zodat ze naast "Onderweg" staan in plaats van eronder. */
  /* "Vandaag": vegen in plaats van tikken. Links rood om weg te halen, rechts
     groen om de laatste weggetikte terug te zetten. Eén tik was te snel gebeurd. */
  .vandaagveeg{position:relative;overflow:hidden;border-radius:10px;margin-bottom:2px}
  .vandaagveeg .veegvlak{position:absolute;top:0;bottom:0;left:0;right:0;display:flex;
    align-items:center;padding:0 14px;font-size:12px;font-weight:700;color:#fff;opacity:0}
  .vandaagveeg .veegrood{background:#b3261e;justify-content:flex-end}
  .vandaagveeg .veeggroen{background:#1d9e75;justify-content:flex-start}
  .vandaagrij{position:relative;background:var(--bg);transition:transform .16s ease}
  .vandaagterug{font-size:12px;color:var(--muted);padding:6px 2px 0}

  /* ---------- HET GEZICHT ----------
     Een getekend gezicht, geen video: het draait volledig op je toestel, kost
     niets en werkt zonder verbinding. De mond beweegt op de spraak mee. */
  /* Klein onderaan bij een terloops antwoord, groot en centraal wanneer je
     haar aanspreekt via de microfoon — dan kijk je haar ook echt aan. */
  #gezicht{position:fixed;left:50%;transform:translateX(-50%);
    bottom:calc(150px + env(safe-area-inset-bottom,0px));z-index:60;
    width:132px;height:132px;pointer-events:none;opacity:0;
    transition:opacity .25s, width .3s, height .3s, bottom .3s}
  #gezicht.aan{opacity:1;pointer-events:auto}
  /* Het woord staat onder de bol, in de kleur van de stand. Bij het praten
     blijft het leeg: dan hoor je haar al. */
  /* De datum blijft rechts op dezelfde regel staan, hoe lang de taaknaam ook is. */
  .taakrij label{display:flex;align-items:center;gap:8px;min-width:0;width:100%}
  .taakrij .taaknaam{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
  .taakrij .tag{flex:none;white-space:nowrap;margin-left:auto}
  /* Het labeltje "voor Robin" staat BINNEN de taaknaam; daar doet margin-left:auto
     niets en plakte het tegen de titel. */
  .taakrij .taaknaam .tag{margin-left:6px}
  /* Mag over meerdere regels: hier staat nu ook wat ze verstaan heeft, en dat
     is soms een hele zin. */
  #bol-label{position:absolute;left:50%;transform:translateX(-50%);
    top:calc(100% + 14px);max-width:min(78vw,320px);text-align:center;
    white-space:normal;font-size:14px;font-weight:600;
    letter-spacing:.04em;opacity:0;transition:opacity .25s,color .25s;
    pointer-events:none}
  #bol-label.aan{opacity:.92}
  #gezicht.groot #bol-label{font-size:16px;top:calc(100% + 20px)}
  #gezicht.groot{width:min(72vw,300px);height:min(72vw,300px);
    top:50%;bottom:auto;transform:translate(-50%,-50%);z-index:70}
  #gezicht-waas{position:fixed;inset:0;z-index:65;background:rgba(20,18,30,.55);
    backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
    opacity:0;pointer-events:none;transition:opacity .25s}
  #gezicht-waas.aan{opacity:1;pointer-events:auto}
  #gezicht svg{width:100%;height:100%;filter:drop-shadow(0 6px 18px rgba(0,0,0,.22))}
  .g-mond{transition:d .08s linear}
  .g-oog{transform-origin:center;transition:transform .12s}
  #gezicht.knipper .g-oog{transform:scaleY(.1)}
  .schakel{position:relative;display:inline-block;width:50px;height:30px;flex:none}
  .schakel input{opacity:0;width:0;height:0}
  .schakel span{position:absolute;inset:0;background:#d9d6cf;border-radius:30px;
    transition:background .2s;cursor:pointer}
  .schakel span::before{content:"";position:absolute;height:24px;width:24px;left:3px;top:3px;
    background:#fff;border-radius:50%;transition:transform .2s;box-shadow:0 1px 3px rgba(0,0,0,.2)}
  .schakel input:checked + span{background:#34C759}
  .schakel input:checked + span::before{transform:translateX(20px)}

  /* ---------- INSTELLINGEN: UITSCHUIFBAAR ----------
     Zeven kaarten onder elkaar is een lange rol waarin je moet zoeken. Alles
     dicht, één regel per onderwerp, en je opent wat je nodig hebt. */
  #tab-settings .card{padding:0;overflow:hidden}
  #tab-settings .card > h2{margin:0;padding:15px 16px;cursor:pointer;
    display:flex;align-items:center;justify-content:flex-start;gap:10px;
    font-size:16px;font-weight:600;border-bottom:1px solid transparent}
  #tab-settings .card > h2 > span:first-child{flex:none}
  #tab-settings .card > h2 .refresh{flex:none;margin:0}
  #tab-settings .card.open > h2{border-bottom-color:var(--line)}
  #tab-settings .card > h2::after{content:"\203a";margin-left:auto;color:var(--muted);
    font-size:20px;line-height:1;transition:transform .18s}
  #tab-settings .card.open > h2::after{transform:rotate(90deg)}
  #tab-settings .kaartinhoud{display:none;padding:14px 16px 16px}
  #tab-settings .card.open .kaartinhoud{display:block}
  /* Het statusje in de kop: één blik zegt of er iets aan de hand is, zonder
     dat je elke kaart moet openklappen. */
  /* Titel, statusje en verversknop staan links bij elkaar; alleen het pijltje
     blijft rechts staan, want dat hoort bij de rand waar je op tikt. */
  .kaartstatus{font-size:12px;font-weight:600;padding:3px 9px;
    border-radius:20px;white-space:nowrap;flex:none}
  .kaartstatus:empty{display:none}
  .kaartstatus.goed{background:#e1f5ee;color:#0f6e56}
  .kaartstatus.let{background:#faeeda;color:#854f0b}
  .kaartstatus.fout{background:#fae7e3;color:#8f2c17}
  .kaartstatus.stil{background:#f2f1ee;color:var(--muted)}
  /* het pijltje komt na het statusje, niet ervoor */
  #tab-settings .card > h2::after{margin-left:8px}
  #tab-settings .kaartsub{font-size:13px;color:var(--muted);font-weight:400;margin-left:6px}

  /* Bij het vegen schoof de hele pagina mee opzij. Dat is de browser die
     horizontaal meegeeft; hier zetten we dat vast. touch-action:pan-y op de
     veegbare rijen zegt bovendien: verticaal scrollen mag, horizontaal
     afhandelen wij zelf. */
  html,body{overflow-x:hidden;overscroll-behavior-x:none;touch-action:pan-y}
  .veegbaar,.veegbaar-cal,.vandaagrij,.meldveeg,.veeghouder,.cal-rij{touch-action:pan-y}
  .wrap{overflow-x:hidden}

  /* ---------- AGENDA ----------
     In de stijl van de iOS-agenda: een grijze ondergrond, dagen als kop met
     het datumcijfer groot, en de afspraken eronder in witte groepen met een
     kleurstreepje links. Eén tik op een rij opent het detailvenster; er wordt
     niet meer geveegd, want op een Mac kon dat niet en op de telefoon vond
     Robin de handelingen niet terug. */
  #tab-cal > .card{background:var(--ios-bg);border:0;box-shadow:none;
    margin:-14px -14px 0;padding:12px 14px 24px;border-radius:0;min-height:100vh}
  #tab-cal h2{font-size:28px;font-weight:700;letter-spacing:-.4px;margin:2px 0 12px}
  #tab-cal h2 .refresh{color:var(--ios-blauw)}
  #tab-cal .add{margin:0 0 10px}
  #tab-cal #cal-search{background:rgba(118,118,128,.12);border:0;border-radius:10px;
    padding:9px 12px;font-size:16px;color:var(--ios-ink)}
  #tab-cal .empty{color:var(--ios-2);font-size:15px;padding:16px;text-align:center;
    background:var(--ios-card);border-radius:12px}

  /* maandrooster */
  #cal-maand{background:var(--ios-card);border-radius:14px;padding:12px 10px 8px;margin-bottom:14px}
  .kal-kop{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;padding:0 4px}
  .kal-maand{font-size:17px;font-weight:700;text-transform:capitalize;letter-spacing:-.2px}
  .kal-nav{border:0;background:none;color:var(--ios-blauw);border-radius:10px;
    width:34px;height:34px;font-size:22px;line-height:1;cursor:pointer}
  .kal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
  .kal-dagnaam{text-align:center;font-size:11px;font-weight:600;color:var(--ios-2);
    padding:2px 0 6px;text-transform:uppercase;letter-spacing:.02em}
  .kal-dag{aspect-ratio:1;border-radius:50%;display:flex;flex-direction:column;
    align-items:center;justify-content:center;font-size:16px;cursor:pointer;
    color:var(--ios-ink);border:0;background:none}
  .kal-dag.leeg{cursor:default}
  .kal-dag.buiten{color:var(--ios-3)}
  .kal-dag.vandaag{color:var(--ios-rood);font-weight:700}
  .kal-dag.gekozen{background:var(--ios-rood);color:#fff;font-weight:700}
  .kal-dag.gekozen .kal-stip,.kal-dag.gekozen .kal-balk{background:#fff !important}
  .kal-stippen{display:flex;flex-wrap:wrap;gap:2px;margin-top:1px;min-height:5px;
    justify-content:center;width:100%}
  .kal-balk{height:3px;flex:1 0 70%;min-width:70%;border-radius:2px}
  .kal-stip{width:5px;height:5px;border-radius:50%}
  /* drie actieknoppen naast elkaar op het startscherm */
  #home-acties:not(.hidden){display:flex;gap:8px;margin-bottom:12px}
  #home-acties .actieknop{flex:1;padding:12px 6px;border:none;border-radius:14px;font-size:13px;font-weight:600;
    cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;line-height:1.2}
  #home-acties .actieknop i{font-size:19px}
  #home-acties .actieknop.hidden{display:none}
  .kal-inklap{width:100%;background:none;border:0;color:var(--ios-blauw);font-size:15px;
    padding:8px;cursor:pointer;text-align:center;margin:-8px 0 6px}

  .ev-maandkop{font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
    color:var(--ios-2);padding:18px 6px 0}
  /* dagkop: datumcijfer groot, dag ernaast, vandaag in het rood */
  .ev-dagkop{display:flex;align-items:baseline;gap:9px;padding:16px 6px 7px}
  .ev-dagnr{font-size:22px;font-weight:700;letter-spacing:-.5px;color:var(--ios-ink)}
  .ev-dagnaam{font-size:15px;color:var(--ios-2);text-transform:capitalize}
  .ev-dagnaam small{font-size:15px;color:var(--ios-3);margin-left:5px;text-transform:lowercase}
  .ev-dagkop.vandaag .ev-dagnr,.ev-dagkop.vandaag .ev-dagnaam{color:var(--ios-rood)}

  /* de afspraken van één dag, als één witte groep */
  .ev-groep{background:var(--ios-card);border-radius:12px;overflow:hidden}
  .ev-rij{display:flex;align-items:center;gap:11px;padding:11px 13px;cursor:pointer;
    min-height:52px;position:relative}
  .ev-rij + .ev-rij::before{content:"";position:absolute;left:37px;right:0;top:0;
    height:.5px;background:var(--ios-lijn)}
  .ev-rij:active{background:#F2F2F7}
  .ev-streep{flex:none;width:4px;align-self:stretch;border-radius:2px;min-height:30px}
  .ev-mid{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
  .ev-titel{font-size:16px;font-weight:500;line-height:1.25;color:var(--ios-ink)}
  .ev-sub{font-size:13px;color:var(--ios-2);line-height:1.3;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .ev-wacht{color:var(--ios-oranje);font-weight:600}
  .ev-tijd{flex:none;text-align:right;font-size:15px;color:var(--ios-ink);
    line-height:1.25;font-variant-numeric:tabular-nums}
  .ev-tijd small{display:block;font-size:15px;color:var(--ios-2)}
  .ev-heledag,.ev-doorlopend{font-size:13px;color:var(--ios-2)}
  /* "= 15:30 bij jou": het uur op je eigen klok, kleiner en grijzer dan het
     Brusselse uur erboven \u2014 dat laatste is de afspraak, dit is de vertaling. */
  .ev-tijd small.ev-hier{font-size:12px;color:var(--ios-2);font-weight:500;white-space:nowrap}
  .stap .uur small.ev-hier{display:block;font-size:11px;font-weight:500;color:var(--ios-2);
    white-space:nowrap;margin-top:1px}

  /* De strook die zegt waar je bent en in welke tijd de uren eronder staan. */
  .zonestrook{background:var(--ios-card);border-radius:12px;padding:10px 13px;
    margin:0 0 10px;border-left:3px solid var(--k-agenda)}
  .zonestrook-kop{font-size:14px;font-weight:600;color:var(--ios-ink)}
  .zonestrook-sub{font-size:13px;color:var(--ios-2);line-height:1.35;margin-top:2px}
  .zone-noot{font-size:13px;color:var(--ios-2)}

  .cal-filterkop{display:flex;align-items:center;justify-content:space-between;
    background:var(--ios-card);border-radius:12px;padding:10px 13px;margin-bottom:10px;
    font-size:15px;font-weight:600}
  .cal-filterkop button{background:none;border:0;color:var(--ios-blauw);font-size:15px;
    font-weight:400;cursor:pointer;padding:4px}
  .cal-verder{width:100%;background:var(--ios-card);border:0;border-radius:12px;
    padding:13px;font-size:15px;font-weight:500;color:var(--ios-blauw);cursor:pointer;margin-top:8px}
  .calplus{margin-left:auto;width:34px;height:34px;border-radius:50%;border:0;
    background:none;color:var(--ios-blauw);font-size:27px;line-height:1;cursor:pointer;
    display:flex;align-items:center;justify-content:center;flex:none}
  .calplus:active{opacity:.5}

  /* detailvenster van een afspraak */
  #evsheet{position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:70;
    display:flex;align-items:flex-end;justify-content:center;padding:0}
  #evsheet.hidden{display:none}
  #evsheetbox{background:var(--ios-bg);width:100%;max-width:520px;border-radius:16px 16px 0 0;
    padding:18px 14px calc(18px + env(safe-area-inset-bottom));max-height:88vh;overflow:auto}
  #evsheet-kop{padding:0 4px 14px}
  .evsheet-titel{display:flex;align-items:center;gap:9px;font-size:21px;font-weight:700;
    letter-spacing:-.3px;margin-bottom:8px;line-height:1.2}
  .evsheet-titel .ev-streep{align-self:stretch;min-height:24px}
  .evsheet-regel{font-size:15px;color:var(--ios-2);margin-top:3px}
  #evsheet-acties{background:var(--ios-card);border-radius:12px;overflow:hidden}
  .evsheet-actie{display:block;width:100%;text-align:left;background:none;border:0;
    padding:14px 15px;font-size:16px;color:var(--ios-blauw);cursor:pointer;position:relative}
  .evsheet-actie + .evsheet-actie::before{content:"";position:absolute;left:15px;right:0;top:0;
    height:.5px;background:var(--ios-lijn)}
  .evsheet-actie:active{background:#F2F2F7}
  .evsheet-actie.gevaar{color:var(--ios-rood)}
  .evsheet-actie.goed{color:var(--ios-groen);font-weight:600}
  .evsheet-sluit{display:block;width:100%;margin-top:10px;background:var(--ios-card);
    border:0;border-radius:12px;padding:14px;font-size:17px;font-weight:600;
    color:var(--ios-blauw);cursor:pointer}

  /* uitnodigen */
  #evnodig{position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:71;
    display:flex;align-items:center;justify-content:center;padding:16px}
  #evnodig.hidden{display:none}
  #evnodigbox{background:var(--card);width:100%;max-width:420px;border-radius:16px;padding:18px}

  /* ---------- STARTSCHERM: DE TIJDLIJN ----------
     Alles met een uur hangt aan één lijn, op volgorde van de klok, met een dun
     rood streepje waar je nu staat. Voorheen stonden afspraken, taken en
     leveringen in drie aparte gekleurde kaarten en moest je oog bij elk blok
     opnieuw beginnen. */
  .lijn{position:relative;padding-left:62px;margin:0 0 4px}
  .lijn::before{content:"";position:absolute;left:52px;top:6px;bottom:12px;width:1px;
    background:var(--p-spoor)}
  .stap{position:relative;padding:0 0 16px;cursor:pointer}
  /* de laatste stap hoeft geen ruimte meer onder zich: de kop van de volgende
     rubriek brengt die zelf mee */
  .stap:last-child{padding-bottom:4px}
  .stap .uur{position:absolute;left:-62px;top:-1px;width:42px;text-align:right;
    font-size:13px;font-weight:600;font-variant-numeric:tabular-nums;color:var(--ios-ink);
    line-height:1.3}
  .stap .bol{position:absolute;left:-14px;top:3px;width:11px;height:11px;border-radius:50%;
    background:var(--ios-bg);border:2.5px solid var(--k-agenda)}
  /* display:block is hier geen opsmuk: zonder dat lopen titel en onderschrift
     op één regel aan elkaar vast. */
  .stap .wat{display:block;font-size:15.5px;font-weight:500;line-height:1.3;color:var(--ios-ink)}
  .stap .waar{display:block;font-size:13px;color:var(--ios-2);margin-top:2px;line-height:1.35}
  .stap .merk{display:inline-block;font-size:11px;color:var(--ios-2);
    border:1px solid var(--ios-lijn);border-radius:6px;padding:0 5px;margin-left:6px;
    vertical-align:1px;white-space:nowrap}
  .stap .stapknop{margin-top:6px;background:var(--ios-card);border:1px solid var(--ios-lijn);
    border-radius:9px;padding:5px 11px;font-size:12px;font-weight:600;color:var(--ios-blauw);
    cursor:pointer;min-height:32px}
  /* Een eigen regel met echte hoogte, en het woordje "nu" netjes in dezelfde
     kolom als de uren. Het stond eerst absoluut gepositioneerd in de ruimte van
     het uur eronder, en liep daar overheen. */
  .nulijn{display:flex;align-items:center;gap:8px;margin:2px 0 14px -62px}
  .nulijn::before{content:"nu";flex:none;width:42px;text-align:right;
    font-size:11px;font-weight:700;color:var(--ios-rood);line-height:1}
  .nulijn::after{content:"";flex:1;height:1px;background:var(--ios-rood);opacity:.45}

  /* De rubriekkoppen krijgen een lijntje dat de rest van de breedte opvult. */
  #tab-home h2::after{content:"";flex:1;height:1px;background:var(--ios-lijn)}

  /* ---------- STARTSCHERM: DAGKAART EN PAKJESKAART ---------- */
  /* De menuknop staat vast linksboven; zonder deze ruimte loopt de groet eronder. */
  .hp-kop{padding:6px 4px 14px 46px}
  .hp-groet{margin:0;font-size:22px;font-weight:600;letter-spacing:-.3px}
  .hp-datum{margin:3px 0 0;font-size:13px;color:var(--ios-2);display:flex;align-items:center;gap:8px}

  .dagkaart{background:#534AB7;border-radius:16px;padding:13px 14px 12px;margin:0 0 12px}
  .dagkaart-kop{display:flex;align-items:baseline;margin-bottom:10px;font-size:13px;color:#CECBF6}
  .dagrij{display:flex;gap:12px;padding:10px 0;border-top:1px solid rgba(255,255,255,.18)}
  .dagrij:first-of-type{border-top:0;padding-top:0}
  .daguur{flex:none;width:44px;font-size:14px;font-weight:600;color:#fff}
  .dagtitel{margin:0;font-size:15px;color:#fff;line-height:1.3}
  .dagonder{margin:2px 0 0;font-size:12px;color:#CECBF6}
  .dagknop{align-self:center;background:rgba(255,255,255,.18);color:#fff;border:0;
    border-radius:12px;padding:5px 10px;font-size:11px;font-weight:700;cursor:pointer;flex:none}
  .dagmeer{font-size:12px;color:#CECBF6;padding:8px 0 0;border-top:1px solid rgba(255,255,255,.18)}

  /* Papier in plaats van een gevuld groen vlak; de kleur zit nu in het icoontje
     en in de chips. */
  .pakkaart{background:transparent;border-radius:0;padding:0;margin:0 0 16px}
  .pakkop{display:flex;align-items:center;gap:8px;margin-bottom:8px;padding:0 4px}
  .pakkop .titel{font-size:12px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
    color:var(--muted)}
  .pakkop .aantal{font-size:12px;font-weight:700;color:var(--muted)}
  .pakkop .rest{margin-left:auto;font-size:12px;color:var(--muted)}
  .pakrij{background:var(--card);border:1px solid var(--line);border-radius:12px;
    padding:10px 11px;display:flex;gap:11px;margin-bottom:7px}
  .pakfoto{width:42px;height:42px;border-radius:9px;object-fit:contain;background:#fff;flex:none}
  .pakleeg{width:42px;height:42px;border-radius:9px;background:#f2f1ee;flex:none;
    display:flex;align-items:center;justify-content:center;font-size:19px}
  .paknaam{margin:0;font-size:14px;font-weight:600;line-height:1.3}
  .pakwie{margin:2px 0 0;font-size:12px;color:var(--muted)}
  .pakchips{display:flex;gap:6px;margin-top:6px;flex-wrap:wrap}
  .pakchip{font-size:11px;padding:3px 8px;border-radius:12px;white-space:nowrap}
  .chip-vast{background:#E1F5EE;color:#0F6E56}
  .chip-schat{background:#FAEEDA;color:#854F0B}
  .chip-plek{background:#f2f1ee;color:var(--muted)}
  .pakok{align-self:center;flex:none;border:1px solid #0F6E56;background:#fff;color:#0F6E56;
    font-size:12px;font-weight:600;padding:7px 10px;border-radius:10px;cursor:pointer;
    min-height:34px;white-space:nowrap}
  .pakok:active{background:#E1F5EE}
  .pakmeer{font-size:12.5px;color:var(--muted);padding:3px 4px 4px}
  /* de tijdlijn en de pakjes hebben elk hun eigen witruimte nodig */
  #tab-home #dag-kaart:not(.hidden){display:block;margin:0 0 18px}
  #tab-home #onderweg-kaart:not(.hidden){display:block;margin:0 0 4px}

  /* De tegels waren gevulde gekleurde vlakken; nu draagt alleen het streepje
     bovenaan de kleur, net als op de tijdlijn. */

  /* ---------- STARTSCHERM: WARM PAPIER ----------
     Dezelfde variabelen als voorheen, andere waarden. Het startscherm droeg als
     enige scherm het koele iOS-grijs; nu draagt het dezelfde warme kleuren als
     de rest van de app. Kleur zit voortaan in streepjes en bolletjes, niet in
     gevulde vlakken. */
  #tab-home{
    --ios-bg:#F3F1ED; --ios-card:#FFFDFA;
    --ios-ink:#23211E; --ios-2:#837C72; --ios-3:#B3ABA0;
    --ios-lijn:#E4DFD6;
    --ios-blauw:#146B52; --ios-rood:#C8402F; --ios-oranje:#B8791A;
    --ios-groen:#1D9E75; --ios-grijs:#8B8378;
    --p-spoor:#DCD6CB;
    /* De achtergrond loopt van rand tot rand, de inhoud niet: 14px vulling
       geeft elke kaart lucht eromheen. Zonder dit plakten ze aan de schermrand. */
    background:var(--ios-bg); margin:-14px -14px 0; padding:12px 14px 24px;
  }
  #tab-home .card{background:transparent;border:0;box-shadow:none;padding:0;margin:0 0 18px}
  #tab-home h2{font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
    color:var(--ios-2);margin:0 0 8px;padding:0 4px;display:flex;align-items:center;gap:8px}
  #tab-home h2 .refresh{color:var(--ios-blauw)}

  /* de grote titel bovenaan, zoals in Mail en Berichten */
  .ios-kop{padding:6px 20px 14px}
  .ios-titel{font-size:34px;font-weight:700;letter-spacing:-.022em;line-height:1.1;margin:0}
  .ios-onder{font-size:15px;color:var(--ios-2);margin-top:3px}

  /* gegroepeerde, ingesprongen lijst */
  .ios-groep{background:var(--ios-card);border-radius:14px;margin:0;overflow:hidden}
  .ios-groep > *{position:relative}
  .ios-groep > * + *::before{content:"";position:absolute;top:0;left:16px;right:0;
    height:.5px;background:var(--ios-lijn)}
  #tab-home .ev,#tab-home .row{background:transparent;border:0;border-radius:0;
    box-shadow:none;margin:0;padding:11px 16px;min-height:44px}
  #tab-home .when{color:var(--ios-2);font-size:15px}
  #tab-home .empty{color:var(--ios-2);font-size:15px;padding:14px 16px;text-align:left}

  /* De band bovenaan: dezelfde vier ingangen, als papieren knopjes. Het icoon
     draagt de kleur van zijn rubriek, het woordje eronder blijft rustig. */
  #home-acties{display:flex;gap:7px;margin:0 0 16px}
  #tab-home .actieknop{flex:1;background:var(--ios-card);border:1px solid var(--ios-lijn);
    border-radius:12px;padding:9px 4px 8px;display:flex;flex-direction:column;
    align-items:center;gap:4px;font-size:11px;font-weight:500;color:var(--ios-2);
    min-height:58px;line-height:1.2;cursor:pointer}
  #tab-home .actieknop i{font-size:19px;color:var(--ios-ink)}
  #tab-home .actieknop:nth-child(1) i{color:var(--k-geld)}
  #tab-home .actieknop:nth-child(2) i{color:var(--k-agenda)}
  #tab-home .actieknop:nth-child(3) i{color:var(--k-taak)}
  #tab-home .actieknop:nth-child(4) i{color:var(--k-shop)}
  #tab-home .actieknop:active{background:#EFEBE3}

  /* tegels: even breed, plat, zonder schaduw */
  #tab-home #home-tiles:not(.hidden){display:flex;margin:0 0 14px;gap:7px}
  #tab-home #home-tiles .tile{flex:1;min-width:0}
  /* De pakjesfoto's staan al in "Onderweg" hierboven; in de cijferrij zouden ze
     de drie vakjes uit elkaar duwen. */
  #tab-home #home-tiles #pkg-tegels{display:none}
  #tab-home .tile::before{content:"";display:block;width:17px;height:3px;border-radius:2px;
    margin-bottom:7px;background:var(--ios-3)}
  #tab-home .tile.t-pakje::before{background:var(--k-pakje)}
  #tab-home .tile.t-geld::before{background:var(--k-geld)}
  #tab-home .tile.t-retour::before{background:var(--k-pakje)}
  /* De drie cijfers staan sinds v249 naast elkaar onder één kop; de retour
     hoort daar even goed bij als wat er onderweg is. */
  #tab-home .tile,#tab-home .pkgtegel{background:var(--ios-card);border:1px solid var(--ios-lijn);
    border-radius:14px;box-shadow:none;padding:10px 11px}
  #tab-home .tile-top{color:var(--ios-2);font-size:11.5px;margin-bottom:0;order:3;line-height:1.2;
    display:flex;align-items:center;gap:5px}
  #tab-home .tile-num{font-size:24px;font-weight:600;letter-spacing:-.5px;line-height:1;
    font-variant-numeric:tabular-nums;order:1}
  #tab-home .tile-sub{color:var(--ios-2);font-size:11.5px;order:4;line-height:1.2;margin-top:2px}
  #tab-home .tile{display:flex;flex-direction:column}
  #tab-home .tile-top{margin-top:4px}
  /* De kleurstreep hoort bovenaan, boven het getal. */
  #tab-home .tile::before{order:0}

  /* uitklapbare strook onderaan voor alles wat geen actie is */
  .ios-strook{margin:22px 0 0}
  .ios-strookknop{width:100%;background:var(--ios-card);border:0;border-radius:14px;
    padding:13px 16px;display:flex;align-items:center;justify-content:space-between;
    font-size:17px;color:var(--ios-ink);min-height:44px}
  .ios-strookknop .chev{color:var(--ios-3);font-size:17px}
  .ios-strookinhoud{margin-top:12px}
  .ios-strookinhoud.dicht{display:none}

  /* urgentie is de enige kleur die telt */
  #tab-home .tag{border-radius:6px;font-size:13px;padding:2px 7px}
  .u-telaat{color:var(--ios-rood)!important}
  .u-vandaag{color:var(--ios-oranje)!important}

  #tab-home .veeghouder,#tab-home .meldveeg{border-radius:0}
  /* De meldingenknop staat bovenaan en mag opvallen: er wacht iets op je.
     LET OP de :not(.hidden): een id-selector wint het van de hidden-klasse,
     dus zonder dit blijft de knop staan ook als de code hem verbergt. */
  #nieuw-knop{display:none}
  #nieuw-knop:not(.hidden){display:flex;align-items:center;gap:10px;width:100%;
    margin:0 0 14px;background:#FBF0DE;color:#6B5220;border:1px solid #EBD9B4;
    border-radius:12px;padding:11px 13px;font-size:14px;font-weight:600;text-align:left;
    min-height:44px;cursor:pointer}
  #nieuw-knop:not(.hidden)::before{content:"";flex:none;width:8px;height:8px;
    border-radius:50%;background:#EF9F27}
  #nieuw-knop:active{background:#F6E6C9}
  /* Het andere huis meldt iets: fel oranje, zodat het naast de rode
     meldingenbalk staat en je er niet overheen kijkt. */
  #tab-home #thuis-card,#tab-home #zee-card{background:#FBF0DE;color:#6B5220;
    border:1px solid #EBD9B4;border-radius:12px;padding:11px 13px;margin:0 0 14px}
  #tab-home #thuis-card h2,#tab-home #zee-card h2{color:#6B5220;font-size:14px;
    font-weight:600;text-transform:none;letter-spacing:0;padding:0;margin:0 0 5px}
  #tab-home #thuis-card h2::after,#tab-home #zee-card h2::after{display:none}
  #tab-home #thuis-card .when,#tab-home #zee-card .when{color:#8A6A2A}
  #tab-home #thuis-card .tag,#tab-home #zee-card .tag{background:rgba(255,255,255,.6);color:#6B5220}
  #tab-home #thuis-card .delx,#tab-home #zee-card .delx{background:rgba(255,255,255,.6);
    color:#6B5220;border:1px solid #E0C88F}
  /* Meldingen: links rood weghalen, rechts groen bevestigen. Bevestigen is het
     sein dat je het gezien hebt — pas dan mag de bijhorende mail in Gmail op
     gelezen. Weghalen ruimt alleen je scherm op en laat de mail met rust. */
  .meldveeg{position:relative;overflow:hidden;border-radius:12px}
  .meldveeg .mvlak{position:absolute;top:0;bottom:0;left:0;right:0;display:flex;
    align-items:center;padding:0 16px;font-size:12px;font-weight:700;color:#fff;opacity:0}
  .meldveeg .mrood{background:#b3261e;justify-content:flex-end}
  .meldveeg .mgroen{background:#1d9e75;justify-content:flex-start}
  /* Rustig balkje onderaan in plaats van een blokkerende systeemdialoog.
     "Daggrens bewaard" hoefde nooit een tik om weg te klikken. */
  #balkje{position:fixed;left:12px;right:12px;bottom:86px;z-index:80;
    background:#2b2b2b;color:#fff;border-radius:14px;padding:12px 14px;
    font-size:14px;line-height:1.4;box-shadow:0 6px 20px rgba(0,0,0,.22);
    display:flex;align-items:center;gap:12px;opacity:0;transform:translateY(12px);
    transition:opacity .18s,transform .18s;pointer-events:none}
  #balkje.zichtbaar{opacity:1;transform:translateY(0);pointer-events:auto}
  #balkje.fout{background:#8f2c17}
  /* Zonder verbinding toont de service worker gewoon de cache. Je zag dan oude
     gegevens zonder dat iets dat verklapte. */
  #offline-balk{position:fixed;top:0;left:0;right:0;z-index:90;background:#854f0b;color:#fff;
    font-size:12px;font-weight:600;text-align:center;padding:6px 10px}
  #balkje .balktekst{flex:1;min-width:0}
  #balkje .balkknop{flex:none;background:transparent;border:1px solid rgba(255,255,255,.5);
    color:#fff;border-radius:10px;padding:7px 12px;font-size:13px;font-weight:700;cursor:pointer}
  .pkgrij:not(.hidden){display:contents}
  .pkgtegel{display:flex;flex-direction:column;gap:6px;background:var(--card);
    border:1px solid var(--line);border-radius:12px;padding:10px;min-width:0;
    box-shadow:var(--shadow);cursor:pointer}
  .pkgtegel:active{transform:scale(.98)}
  .pkgfoto{width:34px;height:34px;object-fit:contain;border-radius:8px;background:#fff}
  .pkgleeg{width:34px;height:34px;border-radius:8px;background:#f2f1ee;
    display:flex;align-items:center;justify-content:center;font-size:17px}
  .pkgtxt{min-width:0}
  .pkgnaam{font-size:11px;font-weight:600;line-height:1.3;max-height:2.6em;overflow:hidden}
  .pkgwanneer{font-size:11px;font-weight:600;margin-top:3px}
  .ordfoto{width:52px;height:52px;object-fit:contain;border-radius:10px;background:#fff;
    border:1px solid var(--line);flex:none;margin-top:2px}
  .ordinfo{flex:1;min-width:0}
  .ordacties{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
  .ordknop{border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:10px;
    padding:7px 12px;font-size:13px;font-weight:600;cursor:pointer}
  .ordknop.accent{background:var(--accent);border-color:var(--accent);color:#fff}
  .ordknop.groen{background:#2e7d32;border-color:#2e7d32;color:#fff}
  .glastegel{cursor:pointer;min-height:100px;display:flex;flex-direction:column;justify-content:space-between;
    transition:transform .12s ease}
  .glastegel:active{transform:scale(.97)}
  .glasicoon{line-height:0;opacity:.95}
  .glasnaam{font-size:13px;font-weight:600;margin-top:9px;line-height:1.25}
  .glasstand{font-size:11.5px;opacity:.86;margin-top:2px}
  .glaskamers{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
  .glasonder{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
  .glasonder button{flex:1;min-width:120px;border:1px solid rgba(255,255,255,.3);border-radius:16px;
    background:rgba(255,255,255,.13);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
    color:#fff;padding:12px 8px;font-size:13px;font-weight:600;cursor:pointer}
  .huisgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:9px;margin-top:8px}
  .huistegel{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:13px 14px;
    cursor:pointer;transition:background .15s,border-color .15s;min-height:92px;
    display:flex;flex-direction:column;justify-content:space-between}
  .huistegel.aan{background:#fdf3d6;border-color:#f0d98a}
  .huistegel.alarmrood{background:#fdecea;border-color:#f2b8b2}
  .huistegel.alarmrood .huisstand{color:#b3261e;font-weight:600}
  .huistegel.breed{grid-column:1 / -1}
  .huisicoon{font-size:22px;line-height:1}
  .huisnaam{font-size:14px;font-weight:600;margin-top:8px;line-height:1.2}
  .huisstand{font-size:11.5px;color:var(--muted);margin-top:1px}
  .huistegel.aan .huisstand{color:#8a6a0f}
  .routelijn{position:relative;padding-left:32px}
  .routelijn:before{content:"";position:absolute;left:14px;top:14px;bottom:14px;width:2px;background:var(--line)}
  .routestop{position:relative;display:flex;align-items:flex-start;gap:6px;margin-bottom:8px}
  .routestip{position:absolute;left:-32px;top:12px;width:29px;height:29px;border-radius:50%;
    background:var(--card);border:2px solid var(--line);display:flex;align-items:center;
    justify-content:center;font-size:14px;z-index:1}
  .veeghouder{position:relative;overflow:hidden;border-radius:10px;margin-bottom:2px}
  .veegachtergrond{position:absolute;inset:0;background:#b3261e;color:#fff;display:flex;
    align-items:center;justify-content:flex-end;padding-right:18px;font-size:13px;font-weight:600}
  /* Groter gemaakt: bij 19 pixels was een halve ster ongeveer vijf pixels breed,
     en dat is te smal om te raken met een vinger. */
  .wijnsterren .ster{font-size:30px;color:var(--line);cursor:pointer;padding:0 3px;line-height:1.1}
  .wijnsterren .ster.vol{color:#e0a800}
  /* Halve sterren: twee onzichtbare helften over één teken. Links geeft een
     halve punt, rechts een hele. */
  .wijnsterren .ster{position:relative;display:inline-block}
  /* De tikvlakken lopen boven en onder de ster door, zodat het doel hoger is
     dan het teken zelf. Ze zijn onzichtbaar maar wel aanraakbaar. */
  .wijnsterren .sterhelft{position:absolute;top:-8px;bottom:-8px;width:50%;z-index:2}
  .wijnsterren .sterhelft.links{left:0}
  .wijnsterren .sterhelft.rechts{right:0}
  .wijnsterren .ster.half{background:linear-gradient(90deg,#e0a800 50%,var(--line) 50%);
    -webkit-background-clip:text;background-clip:text;color:transparent}
  .wijnprijs{font-size:13px;font-weight:600;color:var(--ink);background:#f2f1ee;
    border-radius:8px;padding:2px 8px}
  .wijnprijs.leeg{color:var(--muted);font-weight:400;cursor:pointer;border:1px dashed var(--line);background:none}
  .note-card.vastgepind{border-left:4px solid var(--accent);background:#f7f9ff}
  .note-card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin-bottom:10px}
  .note-title{font-weight:600;font-size:15px;margin-bottom:4px}
  .note-body{font-size:14px;line-height:1.45;color:var(--ink);white-space:pre-wrap;word-break:break-word}
  .note-actions{display:flex;gap:8px;margin-top:10px}
  .note-btn{border:1px solid var(--line);background:var(--bg);color:var(--ink);border-radius:8px;
    padding:6px 12px;font-size:13px;cursor:pointer;font-weight:500}
  .note-btn.primary{background:var(--accent);color:#fff;border-color:var(--accent)}
  .note-btn.danger{color:#c0504d}
  .note-edit-title{width:100%;padding:8px 10px;border:1px solid var(--line);border-radius:8px;font-size:15px;margin-bottom:8px;box-sizing:border-box}
  .note-edit-body{width:100%;padding:8px 10px;border:1px solid var(--line);border-radius:8px;font-size:14px;
    line-height:1.45;box-sizing:border-box;resize:vertical;font-family:inherit}
  #linkoverlay{position:fixed;inset:0;z-index:44;background:rgba(0,0,0,.35)}
  #linkoverlay.hidden{display:none}
  #linksheet{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);z-index:45;
    width:calc(100% - 48px);max-width:420px;max-height:70vh;overflow-y:auto;
    background:var(--card);border-radius:16px;box-shadow:0 8px 40px rgba(0,0,0,.25);padding:18px}
  #linksheet.hidden{display:none}
  .link-title{font-weight:600;font-size:16px;margin-bottom:4px}
  .link-sub{font-size:13px;color:var(--muted);margin-bottom:14px}
  .link-choice{display:block;width:100%;text-align:left;background:var(--bg);border:1px solid var(--line);
    border-radius:10px;padding:12px 14px;margin-bottom:8px;font-size:14px;cursor:pointer;color:var(--ink)}
  .link-choice:active{background:var(--line)}
  .link-cancel{display:block;width:100%;text-align:center;background:none;border:none;color:var(--muted);
    padding:10px;font-size:14px;cursor:pointer;margin-top:4px}

/* De kaart "Openstaand" springt eruit zodra er iets te doen is. Fel paars,
   omdat rood al voor fouten staat en oranje voor waarschuwingen. */
.card.werk-te-doen{
  background:#6b46c1;
  border-color:#5a37a8;
}
.card.werk-te-doen h2 span,
.card.werk-te-doen .subhead,
.card.werk-te-doen .when,
.card.werk-te-doen .empty,
.card.werk-te-doen strong{ color:#fff; }
.card.werk-te-doen .when{ opacity:.85; }
.card.werk-te-doen .ev{ background:rgba(255,255,255,.12); }
.card.werk-te-doen .refresh{ color:#fff; }
/* Het paarse kader kleurde alleen h2, subhead, when, empty en strong wit. Alles
   wat daarna is bijgekomen — de kopjes van de blokken, de bedragen naast de
   naam, de knoppen — bleef donkergrijs op paars en was dus onleesbaar. */
.card.werk-te-doen .glaskop,
.card.werk-te-doen .ordcard2,
.card.werk-te-doen .ordinfo,
.card.werk-te-doen .body,
.card.werk-te-doen label,
.card.werk-te-doen a{ color:#fff; }
.card.werk-te-doen .glaskop{ opacity:1; font-weight:700; }
.card.werk-te-doen .ordcard2{ border-bottom-color:rgba(255,255,255,.22); }
.card.werk-te-doen .ev{ border-color:rgba(255,255,255,.22); }
/* Een tag zonder eigen kleur (bv. "archief") verdween tegen het paars. Tags
   met een eigen kleur houden die: die zijn juist bedoeld om op te vallen. */
.card.werk-te-doen .tag{ border-color:rgba(255,255,255,.35); }
.card.werk-te-doen .ordknop{
  background:rgba(255,255,255,.14); color:#fff; border-color:rgba(255,255,255,.4);
}

/* ---------- OP EEN GROOT SCHERM ----------
   De app is voor een telefoon gemaakt: één kolom van 640 pixels, gecentreerd.
   Op een Mac blijft er dan links en rechts veel leeg. Vanaf 1000 pixels breed
   krijgt de kolom er 260 bij en komt er een vierde tegel op een rij. Niet
   breder: een regel tekst van meer dan negenhonderd pixels leest slecht, en
   alle kaarten en lijsten zijn op een smalle kolom ontworpen. */
@media (min-width: 1000px){
  main, .tabs, #appfooter{ max-width:900px; }
  #home-tiles:not(.hidden){ grid-template-columns:repeat(4,minmax(0,1fr)); }
  /* De balk onderaan staat vast tegen de onderrand en liep over de volle
     breedte, terwijl de inhoud gecentreerd staat. Nu loopt hij mee. */
  #bottomnav{ max-width:900px; margin:0 auto; border-radius:14px 14px 0 0; }
  #bulkbalk-binnen{ max-width:880px; }
}

/* ---------- NOG TE BOUWEN: twee velden ----------
   Links wat Robin vraagt, rechts wat ervan gemaakt is. De kleur van het
   rechtervak zegt hoe ver het staat; de vier standen die hier eerst stonden
   vroegen meer uitleg dan ze gaven. */
.featkop{
  display:none;font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);padding:0 0 6px
}
.featrij{
  display:grid;grid-template-columns:1fr;gap:8px;padding:12px 0 12px 12px;
  border-bottom:1px solid var(--line)
}
.featvraag{font-size:15px;font-weight:600;line-height:1.35;cursor:pointer}
.featgedaan{border-radius:10px;padding:9px 11px;font-size:13.5px;line-height:1.5}
.featstand{
  font-size:10.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  opacity:.85;margin-bottom:3px
}
.featknoppen{display:flex;gap:6px;flex-wrap:wrap}
@media (min-width: 700px){
  .featkop{display:grid;grid-template-columns:1fr 1fr;gap:14px;padding-left:12px}
  .featrij{grid-template-columns:1fr 1fr;gap:14px;align-items:start}
  .featknoppen{grid-column:1 / -1}
}

  /* ---------- SUBTABJES ---------- */
  /* Schermen die bij elkaar horen staan onder één ingang in het menu. Bovenaan
     verschijnt dan dit rijtje om binnen de groep te wisselen. Het schuift
     horizontaal: op een telefoon passen zeven tabjes niet naast elkaar, en
     afkappen zou het laatste scherm onbereikbaar maken. */
  #subtabs{display:flex;gap:6px;overflow-x:auto;padding:2px 0 10px;
    -webkit-overflow-scrolling:touch;scrollbar-width:none}
  #subtabs::-webkit-scrollbar{display:none}
  .subtab{flex:0 0 auto;border:1px solid var(--line);background:var(--card);color:var(--muted);
    border-radius:999px;padding:7px 14px;font-size:13px;font-weight:600;cursor:pointer;
    white-space:nowrap;font-family:inherit}
  .subtab.actief{background:var(--accent);border-color:var(--accent);color:#fff}

  /* Teken in het menu dat er meer schermen achter een ingang zitten. */
  .more-meer{margin-left:auto;display:flex;align-items:center;gap:6px}
  .more-aantal{font-size:12px;font-weight:600;color:var(--muted);background:var(--bg);
    border:1px solid var(--line);border-radius:999px;padding:1px 8px}
  .more-item i.more-pijl{font-size:16px;color:var(--muted)}

  /* ---------- ONDERWEG ---------- */
  /* De knoppen van een routestop staan onder de tekst. Stonden ze ernaast, dan
     bleef er op een telefoon nauwelijks breedte over voor de uitleg bij een
     stop, en werd elke stop een sliert van tien regels. */
  .routevak{flex:1;min-width:0;display:block}
  .routeknoppen{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
  .routeknoppen a,.routeknoppen button{flex:0 0 auto}
  /* Eén regel die bovenaan blijft staan zodra je voorbij de kaart scrolt.
     De ruimte links houdt het menuknopje vrij. */
  #route-strook{position:fixed;left:0;right:0;top:0;z-index:40;
    background:var(--card);border-bottom:1px solid var(--line);
    box-shadow:0 2px 8px rgba(0,0,0,.06);
    padding:calc(9px + env(safe-area-inset-top,0px)) 14px 9px 56px;
    font-size:14px;font-weight:600;color:var(--ink);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  #route-strook.hidden{display:none}

  /* Het ideeenveld: een textarea, want de meeste ideeen zijn langer dan één regel. */
  #feat-titel{width:100%;box-sizing:border-box;border:1px solid var(--line);border-radius:10px;
    padding:10px 12px;font-size:15px;font-family:inherit;line-height:1.4;background:#fff;
    color:var(--ink);resize:vertical;min-height:56px}
  #feat-mic.luistert{background:#b3261e;color:#fff;border-color:#b3261e}
  .featfoto{margin-top:8px;border-radius:10px;max-width:100%;display:block;border:1px solid var(--line)}

  .featfotovak{grid-column:1 / -1}

  /* "in Geld" achter een recent scherm: zegt waar het normaal te vinden is. */
  .more-uit{font-size:12px;color:var(--muted);font-weight:600}

  /* ---------- HET CERTIFICAAT ---------- */
  .certificaat{border:2px solid #c9a227;border-radius:14px;padding:24px 18px;text-align:center;
    background:linear-gradient(180deg,#fffdf7,#faf6ea)}
  .certificaat-eer{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#8a6a2f}
  .certificaat-titel{font-family:"Playfair Display",Georgia,serif;font-style:italic;font-weight:700;
    font-size:32px;color:#7a1f2b;margin:4px 0 14px;line-height:1.15;text-wrap:balance}
  .certificaat-foto{width:100%;max-width:260px;border-radius:12px;margin:0 auto 14px;display:block;
    box-shadow:0 4px 16px rgba(0,0,0,.15)}
  .certificaat-reis{font-weight:700;font-size:16px;margin-top:2px}
  .certificaat-datum{font-size:12.5px;color:var(--muted);margin-bottom:16px;text-transform:capitalize}
  .certificaat-cijfers{display:grid;grid-template-columns:repeat(2,1fr);gap:14px 10px;margin-bottom:16px}
  .certificaat-getal{font-size:22px;font-weight:800;font-variant-numeric:tabular-nums;color:#7a1f2b}
  .certificaat-label{font-size:10.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;margin-top:1px}
  .certificaat-handtekening{font-family:"Playfair Display",Georgia,serif;font-style:italic;font-size:14px;
    color:#8a6a2f;margin-top:6px;padding-top:12px;border-top:1px solid #e6dcc4}

  /* ---------- NOTITIE-EDITOR ---------- */
  .opmaakbalk{display:flex;gap:6px;margin:0 0 6px;flex-wrap:wrap}
  .opmaakknop{border:1px solid var(--line);background:var(--card);color:var(--ink);
    border-radius:8px;min-width:34px;height:32px;padding:0 9px;font-size:14px;
    font-family:inherit;cursor:pointer;line-height:1}
  .opmaakknop:active{background:var(--bg)}
  .notitieveld{width:100%;box-sizing:border-box;border:1px solid var(--line);border-radius:10px;
    padding:10px 12px;font-size:15px;font-family:inherit;line-height:1.5;background:#fff;
    color:var(--ink);resize:vertical;min-height:96px}
  /* Opgemaakte notitie in de lijst. white-space staat op normaal: de opmaak
     komt nu uit echte elementen, niet meer uit letterlijke regeleindes. */
  .note-body{white-space:normal}
  .note-body .notitiekop{font-size:15px;font-weight:700;margin:8px 0 3px}
  .note-body .notitielijst{margin:4px 0;padding-left:20px}
  .note-body .notitielijst li{margin:2px 0}
  .note-body .notitiestreep{border:none;border-top:1px solid var(--line);margin:9px 0}
  .note-edit .opmaakbalk{margin-top:2px}

  /* Knop onder een antwoord waar een adres in staat. */
  .wazeknop{display:block;margin-top:8px;padding:7px 12px;border-radius:9px;
    background:#33ccff;color:#04303d;font-size:13px;font-weight:700;
    text-decoration:none;text-align:center}

/* ---------- MUIS IN PLAATS VAN VINGER ---------- */
/* Op een Mac kun je niet vegen. Daar verschijnen knoppen voor alles wat op de
   telefoon met een veeg gaat, en verdwijnt de uitleg over vegen. */
.muisactie, .muisactie-inline{ display:none; }
body.muis .muisactie{ display:flex; }
body.muis .muisactie-inline{ display:inline-flex; }
.raakuitleg{ display:block; }
body.muis .raakuitleg{ display:none; }
body.muis .muisrij{
  display:flex; gap:6px; padding:0 12px 12px; flex-wrap:wrap;
}
.vandaagwegknop, .calmeerknop{
  align-items:center; justify-content:center;
  width:26px; height:26px; margin-left:auto; flex:0 0 auto;
  border:1px solid var(--line); border-radius:8px;
  background:var(--card); color:var(--muted);
  font-size:13px; line-height:1; cursor:pointer; padding:0;
}
.vandaagwegknop:hover, .calmeerknop:hover{ background:var(--bg); color:var(--ink); }

/* Het aanbod om de positie te gebruiken: klein, naast de plaatsknop, en weg
   zodra het aanstaat. Het lang indrukken dat hier eerst voor diende, komt op
   een iPhone nooit aan op een knop — daar heeft Robin een jaar lang met de hand
   staan wisselen. */
#plaats-aanzetten{border:1px dashed var(--ios-3, #b3aba0);background:transparent;
  color:var(--ios-2, #837c72);border-radius:999px;padding:3px 10px;font-size:11.5px;
  font-weight:600;margin-left:6px;cursor:pointer;font-family:inherit;white-space:nowrap}
#plaats-aanzetten.hidden{display:none}