/* =============================================================================
   Bijdehand werkbank, design system
   =============================================================================
   Alles wat er in de app uitziet, komt hier vandaan. Twee regels:

   1. Geen losse waarden in de schermen. Kleur, ruimte, ronding, schaduw en
      lettergrootte komen uit de variabelen hieronder.
   2. De merkkleuren van de klant staan NIET in dit bestand. Die worden per
      klant in de pagina zelf gezet (basis.html), zodat dit bestand voor alle
      klanten gelijk is en in de browser bewaard kan blijven.

   Volgorde: tokens, basis, app-shell, componenten, hulpklassen.
   ========================================================================== */

/* --- 1. Tokens ----------------------------------------------------------- */

:root {
  /* Merk. Deze twee worden per klant overschreven; de rest wordt afgeleid,
     zodat één kleur genoeg is om de app kloppend te maken. */
  --merk: #12854f;
  --merk-diep: #0c4a32;

  --merk-hover:   color-mix(in oklab, var(--merk) 88%, black);
  --merk-zacht:   color-mix(in oklab, var(--merk) 12%, white);
  --merk-zachter: color-mix(in oklab, var(--merk) 6%, white);
  --merk-rand:    color-mix(in oklab, var(--merk) 28%, white);
  --op-merk: #ffffff;                       /* tekst op een merkvlak */

  /* Neutrale schaal, 10 stappen. De basis van rust in het beeld. */
  --grijs-50:  #fafafa;
  --grijs-100: #f4f4f5;
  --grijs-200: #e8e8ea;
  --grijs-300: #d6d6d9;
  --grijs-400: #a8a8ad;
  --grijs-500: #79797f;
  --grijs-600: #55555b;
  --grijs-700: #3d3d42;
  --grijs-800: #27272b;
  --grijs-900: #18181b;
  --grijs-950: #0e0e10;

  /* Betekeniskleuren. Zacht gehouden; een melding is geen alarm. */
  --goed:    #15803d;  --goed-vlak:    #f0fdf4;  --goed-rand:    #bbf7d0;
  --let-op:  #b45309;  --let-op-vlak:  #fffbeb;  --let-op-rand:  #fde68a;
  --fout:    #b91c1c;  --fout-vlak:    #fef2f2;  --fout-rand:    #fecaca;
  --info:    #1d4ed8;  --info-vlak:    #eff6ff;  --info-rand:    #bfdbfe;

  /* Vlakken en tekst. Deze draaien om in donkere modus. */
  --vlak:      #ffffff;   /* achtergrond van de pagina */
  --vlak-op:   #ffffff;   /* kaarten en panelen */
  --vlak-rust: var(--grijs-50);
  --vlak-hoog: #ffffff;   /* zwevende dingen: menu, dialoog */
  --rand:        var(--grijs-200);
  --rand-sterk:  var(--grijs-300);
  --tekst:       var(--grijs-900);
  --tekst-zacht: var(--grijs-600);
  --tekst-zwak:  var(--grijs-500);

  /* Zijbalk is altijd donker, ook in lichte modus: dat geeft de app-vorm. */
  --zij-vlak: var(--merk-diep);
  --zij-tekst: color-mix(in oklab, white 78%, var(--merk-diep));
  --zij-tekst-actief: #ffffff;
  --zij-actief: color-mix(in oklab, white 12%, var(--merk-diep));
  --zij-rand: color-mix(in oklab, white 10%, var(--merk-diep));

  /* Ruimte, 4px-raster. */
  --r1: 4px;   --r2: 8px;   --r3: 12px;  --r4: 16px;
  --r5: 20px;  --r6: 24px;  --r8: 32px;  --r10: 40px;
  --r12: 48px; --r16: 64px;

  /* Ronding. */
  --rond-xs: 6px;
  --rond-s:  8px;
  --rond-m:  12px;
  --rond-l:  16px;
  --rond-vol: 9999px;

  /* Schaduw: gelaagd en zacht, nooit een harde zwarte rand. */
  --schaduw-1: 0 1px 2px rgba(16, 18, 20, .05);
  --schaduw-2: 0 1px 3px rgba(16, 18, 20, .07), 0 4px 12px rgba(16, 18, 20, .05);
  --schaduw-3: 0 2px 6px rgba(16, 18, 20, .08), 0 12px 32px rgba(16, 18, 20, .10);
  --schaduw-zij: 1px 0 0 var(--rand);

  /* Typografie. Eén UI-lettertype, plus de systeem-mono voor labels en cijfers. */
  --font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;

  --t-xs:  0.75rem;    /* 12 */
  --t-s:   0.8125rem;  /* 13 */
  --t-m:   0.875rem;   /* 14, standaard in de app */
  --t-l:   1rem;       /* 16 */
  --t-xl:  1.125rem;   /* 18 */
  --t-2xl: 1.375rem;   /* 22 */
  --t-3xl: 1.75rem;    /* 28 */

  --lijn-strak: 1.25;
  --lijn: 1.5;

  /* Beweging. */
  --snel: 150ms cubic-bezier(.4, 0, .2, 1);
  --rustig: 220ms cubic-bezier(.4, 0, .2, 1);

  --breedte-zijbalk: 244px;
  --breedte-inhoud: 1120px;
}

/* Donkere modus. Volgt het systeem, tenzij de gebruiker zelf kiest. */
@media (prefers-color-scheme: dark) {
  :root:not([data-thema="licht"]) { color-scheme: dark; }
}

:root[data-thema="donker"] {
  color-scheme: dark;
  --vlak:      var(--grijs-950);
  --vlak-op:   var(--grijs-900);
  --vlak-rust: var(--grijs-900);
  --vlak-hoog: var(--grijs-800);
  --rand:        color-mix(in oklab, white 9%, var(--grijs-900));
  --rand-sterk:  color-mix(in oklab, white 16%, var(--grijs-900));
  --tekst:       var(--grijs-50);
  --tekst-zacht: var(--grijs-400);
  --tekst-zwak:  var(--grijs-500);

  --merk-zacht:   color-mix(in oklab, var(--merk) 20%, var(--grijs-900));
  --merk-zachter: color-mix(in oklab, var(--merk) 10%, var(--grijs-900));
  --merk-rand:    color-mix(in oklab, var(--merk) 34%, var(--grijs-900));

  --goed-vlak:   color-mix(in oklab, var(--goed) 14%, var(--grijs-900));
  --goed-rand:   color-mix(in oklab, var(--goed) 34%, var(--grijs-900));
  --goed:        #4ade80;
  --let-op-vlak: color-mix(in oklab, #f59e0b 14%, var(--grijs-900));
  --let-op-rand: color-mix(in oklab, #f59e0b 34%, var(--grijs-900));
  --let-op:      #fbbf24;
  --fout-vlak:   color-mix(in oklab, #ef4444 14%, var(--grijs-900));
  --fout-rand:   color-mix(in oklab, #ef4444 34%, var(--grijs-900));
  --fout:        #f87171;
  --info-vlak:   color-mix(in oklab, #3b82f6 14%, var(--grijs-900));
  --info-rand:   color-mix(in oklab, #3b82f6 34%, var(--grijs-900));
  --info:        #93c5fd;

  --zij-vlak: var(--grijs-900);
  --zij-rand: color-mix(in oklab, white 8%, var(--grijs-900));
  --zij-actief: color-mix(in oklab, white 8%, var(--grijs-900));
  --zij-tekst: var(--grijs-400);

  --schaduw-1: 0 1px 2px rgba(0, 0, 0, .4);
  --schaduw-2: 0 1px 3px rgba(0, 0, 0, .45), 0 4px 12px rgba(0, 0, 0, .35);
  --schaduw-3: 0 2px 6px rgba(0, 0, 0, .5), 0 12px 32px rgba(0, 0, 0, .45);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-thema="licht"]) {
    --vlak: var(--grijs-950); --vlak-op: var(--grijs-900);
    --vlak-rust: var(--grijs-900); --vlak-hoog: var(--grijs-800);
    --rand: color-mix(in oklab, white 9%, var(--grijs-900));
    --rand-sterk: color-mix(in oklab, white 16%, var(--grijs-900));
    --tekst: var(--grijs-50); --tekst-zacht: var(--grijs-400); --tekst-zwak: var(--grijs-500);
    --merk-zacht: color-mix(in oklab, var(--merk) 20%, var(--grijs-900));
    --merk-zachter: color-mix(in oklab, var(--merk) 10%, var(--grijs-900));
    --merk-rand: color-mix(in oklab, var(--merk) 34%, var(--grijs-900));
    --goed-vlak: color-mix(in oklab, var(--goed) 14%, var(--grijs-900));
    --goed-rand: color-mix(in oklab, var(--goed) 34%, var(--grijs-900));
    --let-op-vlak: color-mix(in oklab, #f59e0b 14%, var(--grijs-900));
    --let-op-rand: color-mix(in oklab, #f59e0b 34%, var(--grijs-900));
    --let-op: #fbbf24;
    --fout-vlak: color-mix(in oklab, #ef4444 14%, var(--grijs-900));
    --fout-rand: color-mix(in oklab, #ef4444 34%, var(--grijs-900));
    --fout: #f87171;
    --info-vlak: color-mix(in oklab, #3b82f6 14%, var(--grijs-900));
    --info-rand: color-mix(in oklab, #3b82f6 34%, var(--grijs-900));
    --info: #93c5fd;
    --zij-vlak: var(--grijs-900);
    --zij-rand: color-mix(in oklab, white 8%, var(--grijs-900));
    --zij-actief: color-mix(in oklab, white 8%, var(--grijs-900));
    --zij-tekst: var(--grijs-400);
    --schaduw-1: 0 1px 2px rgba(0,0,0,.4);
    --schaduw-2: 0 1px 3px rgba(0,0,0,.45), 0 4px 12px rgba(0,0,0,.35);
    --schaduw-3: 0 2px 6px rgba(0,0,0,.5), 0 12px 32px rgba(0,0,0,.45);
  }
}

/* --- 2. Basis ------------------------------------------------------------ */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--t-m);
  line-height: var(--lijn);
  color: var(--tekst);
  background: var(--vlak);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { image-orientation: from-image; max-width: 100%; }
::selection { background: var(--merk); color: var(--op-merk); }

h1, h2, h3 { margin: 0; line-height: var(--lijn-strak); letter-spacing: -.011em; color: var(--tekst); }
h1 { font-size: var(--t-2xl); font-weight: 650; letter-spacing: -.018em; }
h2 { font-size: var(--t-l);  font-weight: 620; }
h3 { font-size: var(--t-m);  font-weight: 620; }
p  { margin: 0 0 var(--r3); }

a { color: var(--merk); text-decoration: none; transition: color var(--snel); }
a:hover { color: var(--merk-hover); text-decoration: underline; text-underline-offset: 2px; }

/* Eén zichtbare focusring voor de hele app. Toetsenbordgebruikers moeten
   altijd kunnen zien waar ze zijn. */
:focus-visible {
  outline: 2px solid var(--merk);
  outline-offset: 2px;
  border-radius: var(--rond-xs);
}
:focus:not(:focus-visible) { outline: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
}

/* --- 3. App-shell -------------------------------------------------------- */

.app { display: flex; min-height: 100vh; min-height: 100dvh; }

.zijbalk {
  width: var(--breedte-zijbalk);
  flex: none;
  background: var(--zij-vlak);
  border-right: 1px solid var(--zij-rand);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100dvh;
}

.zij-merk {
  display: flex; align-items: center; gap: var(--r2);
  padding: var(--r5) var(--r4) var(--r4);
  text-decoration: none; min-height: 68px;
}
.zij-merk:hover { text-decoration: none; }
.zij-merk img { height: 30px; width: auto; display: block; }
/* Schakelaar Werkbank | Werkplaats (14 okt 2026); dezelfde vorm staat in de werkplaats-app. */
.app-wissel { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; margin: 0 var(--r3) var(--r3); padding: 3px;
  border-radius: 10px; background: var(--zij-actief); }
.app-wissel > * { display: flex; align-items: center; justify-content: center; min-height: 30px; border-radius: 8px;
  font-size: var(--t-s); font-weight: 550; color: var(--zij-tekst); text-decoration: none; }
.app-wissel a:hover { color: var(--zij-tekst-actief); text-decoration: none; }
.app-wissel .actief { background: var(--merk); color: var(--op-merk); }
@media (max-width: 640px) { .app-wissel > * { min-height: 40px; } }
.zij-merk .naam {
  font-size: var(--t-s); font-weight: 600; letter-spacing: .02em;
  color: var(--zij-tekst-actief); text-transform: uppercase;
}

.zijnav { display: flex; flex-direction: column; gap: 2px; padding: var(--r2) var(--r3); overflow-y: auto; }
/* Het menu is langer dan een laag venster (7 oktober 2026, vraag Gino): schuiven blijft
   kunnen, maar de balk valt weg in de zijbalk en is alleen zichtbaar als de muis erop staat. */
.zijnav { scrollbar-width: thin; scrollbar-color: transparent transparent; }
.zijnav:hover { scrollbar-color: color-mix(in oklab, var(--zij-tekst) 35%, transparent) transparent; }
.zijnav::-webkit-scrollbar { width: 6px; }
.zijnav::-webkit-scrollbar-track { background: transparent; }
.zijnav::-webkit-scrollbar-thumb { background: transparent; border-radius: 3px; }
.zijnav:hover::-webkit-scrollbar-thumb { background: color-mix(in oklab, var(--zij-tekst) 35%, transparent); }
.zijnav .kop {
  font-size: var(--t-xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: color-mix(in oklab, var(--zij-tekst) 70%, transparent);
  padding: var(--r4) var(--r3) var(--r1);
}
.zijnav a {
  display: flex; align-items: center; gap: var(--r3);
  padding: var(--r2) var(--r3);
  border-radius: var(--rond-s);
  color: var(--zij-tekst);
  font-size: var(--t-m); font-weight: 500;
  transition: background-color var(--snel), color var(--snel);
}
.zijnav a:hover { background: var(--zij-actief); color: var(--zij-tekst-actief); text-decoration: none; }
.zijnav a.actief { background: var(--zij-actief); color: var(--zij-tekst-actief); font-weight: 560; }
.zijnav a svg { width: 18px; height: 18px; flex: none; opacity: .85; }
.zijnav a.actief svg { opacity: 1; }
.zij-onder { margin-top: auto; padding: var(--r3); border-top: 1px solid var(--zij-rand); }

.hoofd { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.topbalk {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: var(--r3);
  padding: 0 var(--r6);
  min-height: 60px;
  background: color-mix(in oklab, var(--vlak) 82%, transparent);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--rand);
}
.topbalk .paginanaam { font-size: var(--t-m); font-weight: 600; color: var(--tekst); }
.topbalk .rechts { margin-left: auto; display: flex; align-items: center; gap: var(--r2); }

.inhoud { padding: var(--r8) var(--r6) var(--r16); }
.inhoud-binnen { max-width: var(--breedte-inhoud); margin: 0 auto; }

.paginakop { margin-bottom: var(--r6); }
.paginakop h1 { margin-bottom: var(--r1); }
.paginakop .sub { margin: 0; }

.sub { color: var(--tekst-zacht); font-size: var(--t-m); margin: 0 0 var(--r5); max-width: 70ch; }
.hint { color: var(--tekst-zwak); font-size: var(--t-s); margin-top: var(--r1); }

/* Onderbalk op de telefoon. */
.tabbar { display: none; }

@media (max-width: 1023px) {
  .zijbalk {
    position: fixed; z-index: 60; left: 0; top: 0;
    transform: translateX(-100%);
    transition: transform var(--rustig);
    box-shadow: var(--schaduw-3);
  }
  .zijbalk.open { transform: translateX(0); }
  .scherm-dek {
    position: fixed; inset: 0; z-index: 50; background: rgba(0,0,0,.45);
    opacity: 0; pointer-events: none; transition: opacity var(--rustig);
    backdrop-filter: blur(2px);
  }
  .scherm-dek.zichtbaar { opacity: 1; pointer-events: auto; }
  .inhoud { padding: var(--r5) var(--r4) calc(96px + env(safe-area-inset-bottom)); }
  .topbalk { padding: 0 var(--r4); }

  /* Losse ronde balk met ruimte eromheen, zoals bij Facebook (7 oktober 2026, vraag Gino). */
  .tabbar {
    display: flex; position: fixed; left: 12px; right: 12px; bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 40;
    gap: var(--r1); padding: var(--r1) var(--r2);
    background: color-mix(in oklab, var(--vlak) 92%, transparent);
    backdrop-filter: saturate(180%) blur(12px);
    border: 1px solid var(--rand); border-radius: 22px;
    box-shadow: var(--schaduw-3);
    transition: transform var(--rustig);
  }
  /* De balk schuift weg en komt terug bij scrollen (richting in het script in basis.html). */
  /* Ver genoeg naar beneden, ook met de veiligheidsrand van de iPhone (anders bleef een randje zichtbaar). */
  .tabbar.weg { transform: translateY(calc(100% + 20px + env(safe-area-inset-bottom, 0px))); }
  .tabbar a { border-radius: 16px; }
  .tabbar a {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: var(--r1); min-height: 52px; padding: var(--r1) 0;
    border-radius: var(--rond-m);
    color: var(--tekst-zwak); font-size: 10px; font-weight: 550;
    letter-spacing: .02em; text-decoration: none;
    transition: color var(--snel), background-color var(--snel);
  }
  .tabbar a svg { width: 20px; height: 20px; }
  .tabbar a.actief { color: var(--merk); background: var(--merk-zachter); }
  .tabbar a:hover { text-decoration: none; }
  /* Ronde plusknop in het midden: Snelle post (8 oktober 2026). */
  .tabbar a.tabbar-plus { color: var(--merk-tekst, var(--merk)); }
  .tabbar a.tabbar-plus span { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 17px;
                               background: var(--merk); color: var(--op-merk); }
  .tabbar a.tabbar-plus span svg { width: 22px; height: 22px; }
}

@media (min-width: 1024px) {
  .hamburger, .scherm-dek { display: none !important; }
}

/* --- 4. Componenten ------------------------------------------------------ */

/* Knop */
.knop {
  --knop-vlak: var(--merk);
  --knop-tekst: var(--op-merk);
  --knop-rand: transparent;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--r2);
  padding: 0 var(--r4); height: 38px;
  font-family: inherit; font-size: var(--t-m); font-weight: 550; line-height: 1;
  color: var(--knop-tekst); background: var(--knop-vlak);
  border: 1px solid var(--knop-rand); border-radius: var(--rond-s);
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background-color var(--snel), border-color var(--snel),
              color var(--snel), box-shadow var(--snel), transform var(--snel);
  box-shadow: var(--schaduw-1);
}
.knop:hover { background: var(--merk-hover); color: var(--knop-tekst); text-decoration: none; }
.knop:active { transform: translateY(.5px); box-shadow: none; }
.knop svg { width: 16px; height: 16px; flex: none; }

.knop.grijs {
  --knop-vlak: var(--vlak-op); --knop-tekst: var(--tekst); --knop-rand: var(--rand-sterk);
}
.knop.grijs:hover { background: var(--vlak-rust); color: var(--tekst); }

.knop.stil {
  --knop-vlak: transparent; --knop-tekst: var(--tekst-zacht); --knop-rand: transparent;
  box-shadow: none;
}
.knop.stil:hover { background: var(--vlak-rust); color: var(--tekst); }

.knop.rood { --knop-vlak: var(--fout); --knop-tekst: #fff; }
.knop.rood:hover { background: color-mix(in oklab, var(--fout) 85%, black); }

.knop.mint { --knop-vlak: var(--merk); --knop-tekst: var(--op-merk); }

.knop.klein { height: 30px; padding: 0 var(--r3); font-size: var(--t-s); }
.knop.groot { height: 44px; padding: 0 var(--r5); font-size: var(--t-l); }
.knop.vol { width: 100%; }

.knop:disabled, .knop[aria-disabled="true"] {
  opacity: .5; cursor: not-allowed; pointer-events: none;
}

/* Knop die laadt: tekst blijft staan, er komt een draaiend rondje bij. */
.knop.laadt { pointer-events: none; opacity: .8; }
.knop.laadt::before {
  content: ""; width: 14px; height: 14px; flex: none;
  border: 2px solid currentColor; border-right-color: transparent;
  border-radius: 50%; animation: draai .7s linear infinite;
}

@keyframes draai { to { transform: rotate(360deg); } }

/* Invoer */
label { display: block; font-size: var(--t-s); font-weight: 550; color: var(--tekst); margin: var(--r4) 0 var(--r2); }
input[type=text], input[type=tel], input[type=url], input[type=date], input[type=password], input[type=email],
input[type=datetime-local], input[type=number], input[type=search], textarea, select {
  width: 100%; padding: 0 var(--r3); height: 38px;
  font-family: inherit; font-size: var(--t-m); color: var(--tekst);
  background: var(--vlak-op);
  border: 1px solid var(--rand-sterk); border-radius: var(--rond-s);
  transition: border-color var(--snel), box-shadow var(--snel);
}
textarea { min-height: 104px; padding: var(--r3); line-height: var(--lijn); resize: vertical; height: auto; }
select { appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--tekst-zwak) 50%),
                    linear-gradient(135deg, var(--tekst-zwak) 50%, transparent 50%);
  background-position: calc(100% - 17px) 16px, calc(100% - 12px) 16px;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
  padding-right: var(--r8);
}
input::placeholder, textarea::placeholder { color: var(--tekst-zwak); }
input:hover, textarea:hover, select:hover { border-color: var(--grijs-400); }
input:focus, textarea:focus, select:focus {
  outline: none; border-color: var(--merk);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--merk) 18%, transparent);
}
input[type=file] { padding: var(--r2); height: auto; }
input[type=checkbox], input[type=radio] { width: auto; height: auto; accent-color: var(--merk); }

/* Kaart */
.kaart {
  background: var(--vlak-op);
  border: 1px solid var(--rand);
  border-radius: var(--rond-l);
  overflow: hidden;
  transition: border-color var(--snel), box-shadow var(--snel), transform var(--snel);
}
.kaart:hover { border-color: var(--rand-sterk); box-shadow: var(--schaduw-2); }
.kaart a { text-decoration: none; color: inherit; display: block; }
.kaart a:hover { text-decoration: none; }
.kaart .beeld {
  aspect-ratio: 4 / 3; background: var(--vlak-rust);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.kaart .beeld img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kaart .videoteken { color: var(--tekst-zwak); }
.kaart .inhoud { padding: var(--r3) var(--r4) var(--r4); }
.kaart .knaam {
  font-weight: 580; font-size: var(--t-m); color: var(--tekst); margin: 0 0 var(--r1);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Paneel: een kaart met kop, voor blokken op een scherm. */
.paneel { background: var(--vlak-op); border: 1px solid var(--rand); border-radius: var(--rond-l); }
.paneel > .paneelkop {
  display: flex; align-items: center; gap: var(--r2);
  padding: var(--r4) var(--r5); border-bottom: 1px solid var(--rand);
}
.paneel > .paneelkop h2 { margin: 0; }
.paneel > .paneelkop .rechts { margin-left: auto; }
.paneel > .paneelbody { padding: var(--r5); }

/* Rooster van kaarten */
.rooster { display: grid; grid-template-columns: repeat(auto-fill, minmax(212px, 1fr)); gap: var(--r4); }
.tweekolom { display: grid; grid-template-columns: 1.6fr 1fr; gap: var(--r6); align-items: start; }
@media (max-width: 900px) { .tweekolom { grid-template-columns: 1fr; gap: var(--r5); } }

/* Badge */
.badge {
  display: inline-flex; align-items: center; gap: var(--r1);
  padding: 2px var(--r2); border-radius: var(--rond-vol);
  font-size: var(--t-xs); font-weight: 560; line-height: 1.6;
  background: var(--vlak-rust); color: var(--tekst-zacht);
  border: 1px solid var(--rand);
}
.badge svg { width: 12px; height: 12px; }
.badge.goed   { background: var(--goed-vlak);   color: var(--goed);   border-color: var(--goed-rand); }
.badge.let-op { background: var(--let-op-vlak); color: var(--let-op); border-color: var(--let-op-rand); }
.badge.fout   { background: var(--fout-vlak);   color: var(--fout);   border-color: var(--fout-rand); }
.badge.info   { background: var(--info-vlak);   color: var(--info);   border-color: var(--info-rand); }
.badge.merk   { background: var(--merk-zacht);  color: var(--merk);   border-color: var(--merk-rand); }

/* Label (tag) */
.labels { display: flex; flex-wrap: wrap; gap: var(--r1); }
.label {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .04em; text-transform: uppercase;
  background: var(--vlak-rust); border: 1px solid var(--rand); border-radius: var(--rond-xs);
  padding: 2px var(--r2); color: var(--tekst-zwak);
  display: block; margin: 0;
}

/* Melding (toast-achtig, boven aan de inhoud) */
.melding {
  display: flex; align-items: flex-start; gap: var(--r3);
  padding: var(--r3) var(--r4); margin-bottom: var(--r3);
  border-radius: var(--rond-m); font-size: var(--t-m);
  border: 1px solid var(--rand); background: var(--vlak-op);
  box-shadow: var(--schaduw-1);
  animation: melding-in var(--rustig) both;
}
@keyframes melding-in { from { opacity: 0; transform: translateY(-4px); } }
.melding svg { width: 17px; height: 17px; flex: none; margin-top: 1px; }
.melding.goed { background: var(--goed-vlak); border-color: var(--goed-rand); color: var(--goed); }
.melding.fout { background: var(--fout-vlak); border-color: var(--fout-rand); color: var(--fout); }
.melding.ok   { background: var(--goed-vlak); border-color: var(--goed-rand); color: var(--goed); }
.melding .tekst { color: var(--tekst); }
.melding.goed .tekst, .melding.fout .tekst { color: inherit; }

/* Tabel */
table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--t-m); }
thead th {
  text-align: left; font-size: var(--t-xs); font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--tekst-zwak);
  padding: var(--r2) var(--r3); border-bottom: 1px solid var(--rand); white-space: nowrap;
}
tbody td { padding: var(--r3); border-bottom: 1px solid var(--rand); vertical-align: middle; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr { transition: background-color var(--snel); }
tbody tr:hover { background: var(--vlak-rust); }

/* Een brede tabel wordt op een telefoon een lijst kaartjes, zodat je niet
   zijwaarts hoeft te schuiven en de laatste kolom niet wegvalt. Zet
   class="stapelbaar" op de tabel; geef cellen die het zonder kolomkop niet
   redden een data-label ("Bijgewerkt: 2026-08-11"). */
@media (max-width: 640px) {
  table.stapelbaar thead { display: none; }
  table.stapelbaar tbody tr {
    display: block; padding: var(--r3); margin-bottom: var(--r3);
    border: 1px solid var(--rand); border-radius: var(--rond-m);
    background: var(--vlak);
  }
  table.stapelbaar tbody tr:last-child { margin-bottom: 0; }
  table.stapelbaar tbody td {
    display: block; border: 0; padding: 2px 0;
    text-align: left !important; white-space: normal !important;
  }
  table.stapelbaar tbody td:empty { display: none; }
  table.stapelbaar tbody td[data-label]::before {
    content: attr(data-label) ": ";
    color: var(--tekst-zwak); font-size: var(--t-xs);
  }
  /* Knoppen in een cel blijven naast elkaar staan. */
  table.stapelbaar tbody td .rij { margin-top: var(--r2); }
}

/* Zoekbalk */
.zoekbalk {
  display: flex; flex-wrap: wrap; gap: var(--r3); align-items: flex-end;
  background: var(--vlak-op); border: 1px solid var(--rand);
  padding: var(--r4); border-radius: var(--rond-l); margin-bottom: var(--r5);
}
.zoekbalk .veld { flex: 1; min-width: 150px; }
.zoekbalk label { margin: 0 0 var(--r1); }

/* Lege staat */
.leeg {
  text-align: center; padding: var(--r16) var(--r5);
  border: 1px dashed var(--rand-sterk); border-radius: var(--rond-l);
  background: var(--vlak-rust);
}
.leeg .teken {
  width: 44px; height: 44px; margin: 0 auto var(--r4);
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--rond-m); background: var(--vlak-op);
  border: 1px solid var(--rand); color: var(--tekst-zwak);
}
.leeg .teken svg { width: 21px; height: 21px; }
.leeg h3 { margin-bottom: var(--r1); font-size: var(--t-l); }
.leeg p { color: var(--tekst-zacht); margin: 0 auto var(--r5); max-width: 46ch; }
.leeg .knop { margin: 0 auto; }

/* Skeleton, voor het laden */
.skelet {
  background: linear-gradient(90deg, var(--vlak-rust) 25%,
              color-mix(in oklab, var(--vlak-rust) 60%, var(--rand)) 37%, var(--vlak-rust) 63%);
  background-size: 400% 100%;
  animation: schuifglans 1.3s ease-in-out infinite;
  border-radius: var(--rond-xs);
}
@keyframes schuifglans { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }
.skelet.regel { height: 12px; margin-bottom: var(--r2); }
.skelet.kop { height: 20px; width: 40%; margin-bottom: var(--r4); }
.skelet.vlak { height: 148px; border-radius: var(--rond-m); }

/* Uitklapblok */
details.blok {
  border: 1px solid var(--rand); border-radius: var(--rond-l);
  margin-bottom: var(--r4); background: var(--vlak-op); overflow: hidden;
}
details.blok > summary {
  list-style: none; cursor: pointer; padding: var(--r4) var(--r5);
  display: flex; align-items: center; gap: var(--r3);
  font-weight: 600; font-size: var(--t-m); color: var(--tekst);
  transition: background-color var(--snel);
}
details.blok > summary:hover { background: var(--vlak-rust); }
details.blok > summary::-webkit-details-marker { display: none; }
details.blok > summary .chev { margin-left: auto; color: var(--tekst-zwak); transition: transform var(--rustig); }
details.blok[open] > summary .chev { transform: rotate(90deg); }
details.blok > summary .subhint { font-weight: 400; font-size: var(--t-s); color: var(--tekst-zwak); }
details.blok .blok-inhoud { padding: 0 var(--r5) var(--r5); }
/* Op een telefoon staat de titelregel anders te veel in elkaar gedrukt: de
   toelichting (plaats, periode, aantal) krijgt dan een eigen regel eronder. */
@media (max-width: 640px) {
  details.blok > summary { flex-wrap: wrap; }
  details.blok > summary .chev { order: 1; }
  details.blok > summary .subhint { order: 2; flex: 1 0 100%; margin: 2px 0 0; }
}

/* Tooltip, zonder JavaScript */
[data-tip] { position: relative; }
[data-tip]::after {
  content: attr(data-tip);
  position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%) translateY(3px);
  background: var(--grijs-900); color: var(--grijs-50);
  font-size: var(--t-xs); font-weight: 500; line-height: 1.4;
  padding: var(--r1) var(--r2); border-radius: var(--rond-xs); white-space: nowrap;
  opacity: 0; pointer-events: none; transition: opacity var(--snel), transform var(--snel);
  box-shadow: var(--schaduw-2); z-index: 70;
}
[data-tip]:hover::after, [data-tip]:focus-visible::after { opacity: 1; transform: translateX(-50%) translateY(0); }

/* Themaknop */
.thema-knop {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; flex: none;
  background: transparent; border: 1px solid transparent; border-radius: var(--rond-s);
  color: var(--tekst-zacht); cursor: pointer;
  transition: background-color var(--snel), color var(--snel), border-color var(--snel);
}
.thema-knop:hover { background: var(--vlak-rust); color: var(--tekst); border-color: var(--rand); }
.thema-knop svg { width: 17px; height: 17px; }
.thema-knop .maan { display: none; }
:root[data-thema="donker"] .thema-knop .zon { display: none; }
:root[data-thema="donker"] .thema-knop .maan { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-thema="licht"]) .thema-knop .zon { display: none; }
  :root:not([data-thema="licht"]) .thema-knop .maan { display: block; }
}

/* Hamburger */
.hamburger {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; flex: none; margin-right: var(--r1);
  background: transparent; border: 1px solid var(--rand); border-radius: var(--rond-s);
  color: var(--tekst-zacht); cursor: pointer; transition: background-color var(--snel);
}
.hamburger:hover { background: var(--vlak-rust); }
.hamburger svg { width: 17px; height: 17px; }

/* Avatar */
.avatar {
  width: 30px; height: 30px; flex: none; border-radius: var(--rond-vol);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--merk-zacht); color: var(--merk);
  font-size: var(--t-xs); font-weight: 650; letter-spacing: .02em;
  border: 1px solid var(--merk-rand);
}

/* Laadscherm */
#laadscherm {
  display: none; position: fixed; inset: 0; z-index: 90; padding: var(--r5);
  background: color-mix(in oklab, var(--grijs-950) 55%, transparent);
  backdrop-filter: blur(3px);
  align-items: center; justify-content: center;
}
#laadscherm.aan { display: flex; animation: melding-in var(--snel) both; }
#laadscherm .doos {
  background: var(--vlak-hoog); border: 1px solid var(--rand);
  border-radius: var(--rond-l); padding: var(--r8) var(--r10);
  text-align: center; max-width: 320px; box-shadow: var(--schaduw-3);
}
.spinner {
  width: 30px; height: 30px; margin: 0 auto var(--r4);
  border: 2.5px solid var(--rand-sterk); border-top-color: var(--merk);
  border-radius: 50%; animation: draai .7s linear infinite;
}

/* --- 5. Hulpklassen ------------------------------------------------------ */

.rij { display: flex; align-items: center; gap: var(--r3); flex-wrap: wrap; }
.rij.tussen { justify-content: space-between; }
/* Een rij knoppen die op een smal scherm een net raster wordt (twee per rij)
   in plaats van een rafelige afbreking. Een knop met .breed neemt de volle
   breedte; handig voor een enkele actie die er los bij hoort. */
.rij.knoppen > * { flex: 0 1 auto; }
@media (max-width: 640px) {
  .rij.knoppen {
    display: grid; grid-template-columns: 1fr 1fr; gap: var(--r2);
    align-items: stretch;
  }
  /* min-width: 0 is nodig, anders duwt een lang label de knop buiten het
     raster in plaats van dat hij meekrimpt. */
  .rij.knoppen > * { width: 100%; min-width: 0; justify-content: center; }
  .rij.knoppen > .breed, .rij.knoppen > .duw { margin-left: 0; grid-column: 1 / -1; }
  /* Liever een label over twee regels dan een knop die afkapt. */
  .rij.knoppen .knop {
    white-space: normal; height: auto; min-height: 38px;
    padding-top: var(--r2); padding-bottom: var(--r2); text-align: center;
  }
}
.duw { margin-left: auto; }
.stapel { display: flex; flex-direction: column; gap: var(--r3); }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.zacht { color: var(--tekst-zacht); }
.zwak { color: var(--tekst-zwak); }
.klein { font-size: var(--t-s); }
.cijfer { font-size: var(--t-3xl); font-weight: 650; letter-spacing: -.02em; line-height: 1.1;
          font-variant-numeric: tabular-nums; }
.alleen-lezers {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.mint-bar { height: 3px; background: var(--merk); border: 0; border-radius: 2px; }


/* Kleine ronde doorklik-knop, voor de takenlijst en in meldingen:
   lezen en meteen kunnen doen. */
.taak-knop { display: inline-block; margin-left: var(--r2); padding: 2px 10px;
             border: 1px solid var(--rand); border-radius: 999px;
             color: var(--merk-tekst); font-size: var(--t-s); font-weight: 550;
             text-decoration: none; white-space: nowrap; }
.taak-knop:hover { border-color: var(--merk-tekst); }

/* Uitleg op de plek zelf: het i-rondje naast een schermkop, met een kader dat
   openklapt bij een tik. Werkt zonder JavaScript, dus ook op de telefoon.
   Het kader hangt aan het rondje zelf (position: relative hieronder), anders
   zweeft hij weg op schermen zonder gewone paginakop. */
.uitleg { display: inline-block; vertical-align: middle; margin-left: var(--r2); position: relative; }
.uitleg summary {
  list-style: none; cursor: pointer; user-select: none; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 999px;
  border: 1px solid var(--rand); color: var(--tekst-zwak);
  font-size: 12px; font-style: italic; font-weight: 700; font-family: Georgia, serif;
}
.uitleg summary::-webkit-details-marker { display: none; }
.uitleg summary:hover, .uitleg[open] summary {
  border-color: var(--merk-tekst); color: var(--merk-tekst);
}
.uitleg .uitleg-kader {
  position: absolute; left: -4px; top: 100%; z-index: 5;
  width: min(62ch, 78vw);
  margin-top: var(--r2); padding: var(--r3) var(--r4);
  background: var(--vlak-op); border: 1px solid var(--rand);
  border-left: 3px solid var(--merk); border-radius: var(--rond-m);
  color: var(--tekst); font-size: var(--t-s); font-weight: 400;
  font-family: inherit; text-align: left; letter-spacing: normal;
  line-height: 1.5; box-shadow: var(--schaduw-2);
}

/* Weekvoorstellen (blogideeën bij "Nieuwe blog", postideeën bij "Nieuwe post") */
.voorstellijst { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.voorstellijst li {
  display: flex; align-items: flex-start; gap: var(--r4); flex-wrap: wrap;
  padding: var(--r4) 0; border-bottom: 1px solid var(--rand);
}
.voorstellijst li:first-child { padding-top: 0; }
.voorstellijst li:last-child { border-bottom: 0; padding-bottom: 0; }
.voorstellijst .tekst { min-width: 0; flex: 1; }
.voorstellijst .naam { display: block; font-weight: 600; color: var(--tekst); }
.voorstellijst .invalshoek { color: var(--tekst-zacht); margin: var(--r1) 0; }
@media (max-width: 640px) {
  .voorstellijst .tekst { flex-basis: 100%; }
}

/* =========================================================================
   Werkschermen: dezelfde opbouw op elk scherm (september 2026).
   1. paginakop  2. cijferkaarten  3. werkbalk (één primaire knop, rest onder
   "Meer")  4. filterchips  5. werklijst met per rij één status en één knop.
   ========================================================================= */
.cijferrij { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--r3); margin-bottom: var(--r5); }
.cijferkaart { display: flex; flex-direction: column; gap: 2px; padding: var(--r3) var(--r4); background: var(--vlak-op);
               border: 1px solid var(--rand); border-radius: 16px; text-decoration: none; color: inherit; min-height: 92px; }
a.cijferkaart:hover { background: var(--vlak-rust); text-decoration: none; border-color: var(--rand-sterk); }
.cijferkaart.actief { border-color: var(--merk); box-shadow: inset 0 0 0 1px var(--merk); }
.cijferkaart.alarm .getal { color: var(--fout); }
.cijferkaart .ck-label { font-size: var(--t-s); color: var(--tekst-zwak); }
.cijferkaart .getal { font-size: var(--t-xl); font-weight: 600; line-height: 1.15; }
.cijferkaart .klein { font-size: var(--t-s); font-weight: 500; color: var(--tekst-zwak); }
.cijferkaart .hint { margin: 0; font-size: var(--t-s); }

.werkbalk { display: flex; gap: var(--r2); align-items: center; flex-wrap: wrap; margin-bottom: var(--r4); }
.werkbalk .hint { margin: 0; }
details.meer { position: relative; }
details.meer > summary { list-style: none; cursor: pointer; }
details.meer > summary::-webkit-details-marker { display: none; }
details.meer > .meer-lijst { position: absolute; z-index: 20; top: calc(100% + 6px); left: 0; min-width: 240px; padding: var(--r2);
                             background: var(--vlak-op); border: 1px solid var(--rand); border-radius: 12px; box-shadow: var(--schaduw-2);
                             display: flex; flex-direction: column; gap: 2px; }
details.meer > .meer-lijst a { display: flex; gap: 8px; align-items: center; padding: 8px 10px; border-radius: 8px; text-decoration: none; color: var(--tekst); font-size: var(--t-m); }
details.meer > .meer-lijst a:hover { background: var(--vlak-rust); }
details.meer > .meer-lijst a svg { width: 16px; height: 16px; color: var(--tekst-zwak); }

.chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: var(--r4); }
.chip { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--rand);
        background: var(--vlak-op); color: var(--tekst); font-size: var(--t-s); text-decoration: none; cursor: pointer; font-family: inherit; }
.chip:hover { background: var(--vlak-rust); text-decoration: none; }
.chip.actief { background: var(--merk); color: var(--op-merk); border-color: var(--merk); }
.chip .aantal { font-weight: 600; opacity: .8; }

.werklijst { display: flex; flex-direction: column; gap: var(--r2); }
.werkrij { display: grid; grid-template-columns: 132px 1fr auto; gap: var(--r3); align-items: center; padding: var(--r3) var(--r4);
           background: var(--vlak-op); border: 1px solid var(--rand); border-radius: 12px; }
.werkrij:hover { border-color: var(--rand-sterk); }
.werkrij .titel { font-weight: 600; margin: 0; }
.werkrij .titel a { color: inherit; text-decoration: none; }
.werkrij .titel a:hover { text-decoration: underline; }
.werkrij .meta { margin: 2px 0 0; font-size: var(--t-s); color: var(--tekst-zwak); display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.werkrij .meta svg { width: 14px; height: 14px; }
.werkrij .actie { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; }
.werkrij[hidden] { display: none; }

.taken { display: grid; gap: var(--r2); }
.taak { display: grid; grid-template-columns: 110px 1fr 362px; gap: var(--r3); align-items: center; padding: var(--r3) var(--r4);
        border: 1px solid var(--rand); border-radius: 12px; border-left-width: 4px; background: var(--vlak-op); }
/* Punten wegklikken (7 oktober 2026): kruisje rechtsboven in de taak, met Vandaag niet / Deze week niet. */
.taak { position: relative; padding-right: calc(var(--r4) + 26px); }
.taak-weg-menu { position: absolute; top: 8px; right: 8px; }
.taak-weg-menu > summary { list-style: none; }
.taak-weg-menu > summary::-webkit-details-marker { display: none; }
.taak-weg-keuze { position: absolute; right: 0; top: 28px; z-index: 5; display: flex; flex-direction: column; gap: 4px;
  padding: 6px; background: var(--vlak); border: 1px solid var(--rand); border-radius: var(--rond-m); box-shadow: var(--schaduw-2); white-space: nowrap; }
.taken-weg { padding: 0 var(--r5) var(--r2); }
.taken-weg > summary { cursor: pointer; padding: var(--r2) 0; }
.taak-nu { border-left-color: var(--fout); }
.taak-week { border-left-color: var(--merk); }
.taak-later { border-left-color: var(--rand); opacity: .85; }
.taak .prio { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--tekst-zwak); }
.taak-nu .prio { color: var(--fout); }
.taak .taaktekst { margin: 0; font-size: var(--t-m); }
.taakknoppen { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
/* "Al gedaan?" onder de tekst van een taak (9 okt 2026): één rij in de tekstkolom, knoppen zo breed als hun woord. */
.taak .taak-acties { grid-column: 2 / -1; justify-content: flex-start; align-items: center; }
.taak .taak-acties .knop { width: auto; min-width: 0; padding-inline: 14px; }
/* Knoppen die bij elkaar staan (werkbalk, paneelkop, knoppenrij, volgende stap,
   werkregels, takenlijsten) krijgen dezelfde minimumbreedte en gecentreerde tekst,
   zodat ze overal in de app even groot ogen. Een lange tekst mag breder. */
.rij.knoppen .knop, .werkbalk .knop, .paneelkop .knop, .stapknoppen .knop, .werkrij .actie .knop,
.taakknoppen .knop, .knoppen .knop {
  min-width: 178px; box-sizing: border-box; justify-content: center; text-align: center; white-space: nowrap; }
/* In een takenlijst exact even breed en rechts op één lijn. */
.taakknoppen .knop { width: 178px; overflow: hidden; text-overflow: ellipsis; }

/* "Volgende stap" op een detailscherm: wat is de status en wat doe je nu. */
.volgende-stap { display: grid; grid-template-columns: 1fr auto; gap: var(--r3); align-items: center; padding: var(--r3) var(--r4);
                 margin-bottom: var(--r5); border: 1px solid var(--merk-rand, var(--rand)); border-left: 4px solid var(--merk);
                 border-radius: 12px; background: var(--vlak-op); }
.volgende-stap .stapkop { margin: 0; font-weight: 600; }
.volgende-stap .staptekst { margin: 2px 0 0; font-size: var(--t-s); color: var(--tekst-zwak); }
.volgende-stap .stapknoppen { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
/* Zoekterm vastleggen en meteen publiceren (12 oktober 2026): het veld plus twee knoppen krijgen de
   hele breedte onder de uitleg, anders zit het veld in een smalle kolom rechts. */
.volgende-stap:has(.zoekterm-stap) { grid-template-columns: 1fr; }
.volgende-stap:has(.zoekterm-stap) .stapknoppen { justify-content: flex-start; }
.zoekterm-stap input[type=text] { flex: 1 1 240px; min-width: 0; margin: 0; }

@media (max-width: 820px) {
  .werkrij { grid-template-columns: 1fr; gap: var(--r1); }
  .werkrij .actie { justify-content: flex-start; }
  .taak { grid-template-columns: 1fr; gap: var(--r1); }
  .taak .taak-acties { grid-column: 1 / -1; }
  .taakknoppen { justify-content: flex-start; }
  .rij.knoppen .knop, .werkbalk .knop, .paneelkop .knop, .stapknoppen .knop, .werkrij .actie .knop,
  .taakknoppen .knop, .knoppen .knop { min-width: 140px; width: auto; }
  .volgende-stap { grid-template-columns: 1fr; }
  .volgende-stap .stapknoppen { justify-content: flex-start; }
}


/* Weekstand op de telefoon (21 september 2026, opmerking Gino): kop op aparte regels, uitleg
   ingeklapt, grafiek zijwaarts te schuiven zodat de weken leesbaar blijven, kleinere chips. */
@media (max-width: 640px) {
  .paneel > .paneelkop.weekstand-kop { flex-wrap: wrap; gap: var(--r2); }
  .paneel > .paneelkop.weekstand-kop h2 { flex: 1 1 auto; font-size: var(--t-l); }
  .paneel > .paneelkop.weekstand-kop .weekstand-stand { flex-basis: 100%; margin: 0 !important; order: 3; }
  .paneel > .paneelkop.weekstand-kop .duw { margin-left: auto; }
  .paneel > .paneelkop.weekstand-kop .knop { min-width: 0; width: auto; }
  .weekstand-grafiek svg { min-width: 620px; max-width: none !important; }
  .weekstand-chips { gap: 5px; }
  .weekstand-chips .chip { height: 26px; padding: 0 9px; font-size: var(--t-s); }
}

/* Voorbeeld per kanaal (21 september 2026): telefoonkader naast het bewerkscherm. */
.bewerk-en-voorbeeld { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: var(--r6); align-items: start; }
.bewerk-en-voorbeeld .tweekolom { grid-template-columns: 1fr; }
.bewerk-en-voorbeeld .voorbeeld-kolom { position: sticky; top: var(--r4); }
@media (max-width: 1100px) {
  .bewerk-en-voorbeeld { grid-template-columns: 1fr; }
  .bewerk-en-voorbeeld .voorbeeld-kolom { position: static; }
}
.voorbeeld-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: var(--r3); }
.telefoon { width: 100%; max-width: 360px; margin: 0 auto; border: 10px solid #111; border-radius: 34px; background: #111; box-shadow: 0 8px 30px rgba(0,0,0,.25); }
.telefoon-scherm { background: #fff; color: #111; border-radius: 24px; overflow: hidden; min-height: 420px; font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; line-height: 1.35; }
.mock { padding: 10px 0 12px; }
.mock-kop { display: flex; align-items: center; gap: 8px; padding: 0 12px 8px; }
.mock-avatar { width: 32px; height: 32px; object-fit: cover; background: #f0f0f0; border-radius: 6px; }
.mock-avatar.rond { border-radius: 50%; }
.mock-naam { font-weight: 600; }
.mock-sub { color: #666; font-size: 11px; }
.mock-punten { margin-left: auto; color: #333; letter-spacing: 1px; }
.mock-beeld { position: relative; background: #eee; width: 100%; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.mock-beeld img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mock-play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 34px; color: #fff; text-shadow: 0 2px 8px rgba(0,0,0,.6); }
.mock-teller { position: absolute; top: 8px; right: 8px; background: rgba(0,0,0,.6); color: #fff; font-size: 11px; padding: 2px 7px; border-radius: 999px; }
.mock-geenbeeld { color: #888; font-size: 12px; padding: 24px; text-align: center; }
.mock-dots { display: flex; justify-content: center; gap: 4px; padding: 6px 0 0; }
.mock-dots i { width: 6px; height: 6px; border-radius: 50%; background: #c8c8c8; }
.mock-dots i.aan { background: #3897f0; }
.mock-acties { display: flex; gap: 14px; padding: 8px 12px 4px; font-size: 18px; }
.mock-acties.mock-li, .mock-acties.mock-fb { font-size: 12px; color: #555; border-top: 1px solid #eee; margin-top: 8px; padding-top: 8px; justify-content: space-around; }
.mock-tekst { margin: 0; padding: 4px 12px; white-space: pre-wrap; word-break: break-word; }
.mock-linkedin .mock-tekst { padding-bottom: 8px; }
.mock-tekst .meer { color: #777; }
.mock-tekst .tag { color: #00376b; }
.mock-linkedin .mock-tekst .tag, .mock-facebook .mock-tekst .tag { color: #0a66c2; }
.mock-hint { margin: 8px 12px 0; color: #777; font-size: 11px; border-top: 1px dashed #ddd; padding-top: 6px; }
.voorbeeld-uitleg { margin: var(--r2) 0 0; text-align: center; }
.mock-letter { display: inline-flex; align-items: center; justify-content: center; background: #dfe7ee; color: #234; font-weight: 700; font-size: 14px; }

/* Paneelkoppen op de telefoon (21 september 2026): titel op de eerste regel, de toelichting
   eronder over de volle breedte, de knoppen daaronder naast elkaar. Voorkomt dat knoppen
   buiten het scherm vallen en de pagina zijwaarts gaat schuiven. */
@media (max-width: 640px) {
  body { overflow-x: hidden; }
  .paneel > .paneelkop { flex-wrap: wrap; row-gap: var(--r2); }
  .paneel > .paneelkop > svg { order: 1; }
  .paneel > .paneelkop h2 { order: 1; flex: 1 1 calc(100% - 34px); font-size: var(--t-l); }
  .paneel > .paneelkop .hint { order: 2; flex-basis: 100%; margin-left: 0 !important; }
  .paneel > .paneelkop .knop, .paneel > .paneelkop form, .paneel > .paneelkop .duw, .paneel > .paneelkop .rechts { order: 3; margin-left: 0 !important; }
  .paneel > .paneelkop .knop { flex: 1 1 auto; min-width: 0; width: auto; }
}
@media (max-width: 640px) {
  /* Uitlegkader (het i-knopje) valt op een telefoon buiten beeld als zwevend kader; laat het
     gewoon onder de titel staan. Knoppen in een rij mogen over twee regels lopen in plaats
     van buiten het scherm. */
  .uitleg .uitleg-kader { position: static; width: auto; max-width: none; margin: var(--r2) 0 0; }
  .rij .knop, .knoppen .knop, .werkbalk .knop, .rij.knoppen .knop, .stapknoppen .knop { white-space: normal; max-width: 100%; }
}
@media (max-width: 640px) {
  /* Gestapelde tabellen: ook de tabel zelf en een totaalregel (tfoot) binnen de breedte. */
  table.stapelbaar { display: block; width: 100%; }
  table.stapelbaar tfoot, table.stapelbaar tfoot tr, table.stapelbaar tfoot td { display: block; text-align: left !important; }
  table.stapelbaar tfoot tr { padding: var(--r3); border: 1px solid var(--rand); border-radius: var(--rond-m); }
}

/* Schuiven in de weekrij (21 september 2026): slepen, menu met drie puntjes, dialoog */
.weekitem-wrap, .kaart-wrap { position: relative; min-width: 0; }
[data-schuif] { cursor: grab; }
[data-schuif].sleept { opacity: .45; }
.dropdoel { outline: 2px dashed var(--merk); outline-offset: -2px; }
/* Sitebeheer: foto's op een plek slepen (7 oktober 2026). */
.site-drop.dropdoel { background: color-mix(in oklab, var(--merk) 10%, var(--vlak)); }
.kaart .beeld.site-leeg { flex-direction: column; gap: var(--r1); border: 2px dashed var(--rand); }
.kaart .beeld.site-leeg .hint { font-size: var(--t-xs); margin: 0; text-align: center; padding: 0 var(--r3); white-space: normal; }
.itemmenu { position: absolute; top: 3px; right: 4px; font-size: 12px; z-index: 2; }
.itemmenu > summary, .dagplus > summary { list-style: none; cursor: pointer; }
.itemmenu > summary::-webkit-details-marker, .dagplus > summary::-webkit-details-marker { display: none; }
.itemmenu > summary { padding: 0 6px; border-radius: 6px; color: var(--tekst-zwak); font-weight: 700; letter-spacing: 1px;
  line-height: 18px; background: var(--vlak-op); border: 1px solid var(--rand); }
.itemmenu > summary:hover, .itemmenu[open] > summary { color: var(--tekst); border-color: var(--merk-tekst); }
.itemmenu-lijst { position: absolute; right: 0; top: 24px; z-index: 6; min-width: 190px; background: var(--vlak-op);
  border: 1px solid var(--rand); border-radius: 10px; box-shadow: 0 8px 24px rgba(0, 0, 0, .18); padding: 4px; display: grid; }
.itemmenu-knop { display: block; width: 100%; text-align: left; background: none; border: 0; padding: 7px 10px; font: inherit;
  font-size: 13px; color: var(--tekst); border-radius: 6px; cursor: pointer; text-decoration: none; white-space: normal; }
.itemmenu-knop:hover { background: var(--vlak-rust); text-decoration: none; }
.itemmenu-hint { padding: 6px 10px; font-size: 12px; margin: 0; }
.dagplus { position: relative; margin-top: auto; font-size: 12px; }
.dagplus > summary { color: var(--tekst-zwak); border: 1px dashed var(--rand); border-radius: 8px; padding: 4px 6px; text-align: center; }
.dagplus > summary:hover, .dagplus[open] > summary { color: var(--merk-tekst); border-color: var(--merk-tekst); }
.dagplus .itemmenu-lijst { left: 0; right: auto; top: 30px; min-width: 220px; max-width: min(300px, 80vw); }
.schuifdialoog { border: 1px solid var(--rand); border-radius: 14px; padding: var(--r4); background: var(--vlak-op); color: var(--tekst);
  width: min(92vw, 420px); box-shadow: 0 16px 48px rgba(0, 0, 0, .3); }
.schuifdialoog::backdrop { background: rgba(0, 0, 0, .45); }
.schuif-velden { display: flex; gap: var(--r3); flex-wrap: wrap; }
.schuif-velden label { display: grid; gap: 4px; font-size: var(--t-s); }
.schuif-velden input { font: inherit; padding: 6px 8px; border: 1px solid var(--rand); border-radius: 8px; background: var(--vlak-rust); color: var(--tekst); }

/* Kruisje om een voorstel uit een lijstje te verwijderen (22 september 2026) */
.kruisje { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; margin-left: 4px;
  border: 1px solid var(--rand); border-radius: 50%; background: var(--vlak-op); color: var(--tekst-zwak); font: inherit;
  font-size: 15px; line-height: 1; cursor: pointer; vertical-align: middle; padding: 0; }
.kruisje:hover { color: var(--fout); border-color: var(--fout); }

/* Uitsnede voor Instagram (25 september 2026): alle foto's van de serie in het kader */
.mock-uitsnede { padding: 0 10px 10px; }
.mock-uitsnede-strook { display: flex; gap: 6px; overflow-x: auto; }
.mock-uitsnede-strook span { flex: 0 0 64px; display: block; overflow: hidden; border-radius: 4px; background: var(--vlak-rust); }
.mock-uitsnede-strook img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Opties in een offerte (25 september 2026): prijs zichtbaar, niet in het totaal */
.optie-badge { background: var(--vlak-rust); border: 1px dashed var(--merk-tekst); color: var(--merk-tekst); }
tr.is-optie td input[name="r_bedrag"] { border-style: dashed; color: var(--tekst-zwak); }

/* Eigen zoeklijst onder een invoerveld (25 september 2026): filtert terwijl je typt */
.zoekveld { position: relative; }
.zoeklijst { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 8; background: var(--vlak-op); border: 1px solid var(--rand);
  border-radius: 10px; box-shadow: 0 8px 24px rgba(0, 0, 0, .18); padding: 4px; display: grid; max-height: 280px; overflow-y: auto; }
/* Zonder deze regel won display: grid van het hidden-attribuut en bleef de lijst staan (12 okt 2026). */
.zoeklijst[hidden] { display: none; }
.zoektreffer { display: block; width: 100%; text-align: left; background: none; border: 0; padding: 8px 10px; font: inherit; font-size: var(--t-s);
  color: var(--tekst); border-radius: 6px; cursor: pointer; }
.zoektreffer:hover, .zoektreffer:focus { background: var(--vlak-rust); }

/* Mail (28 september 2026): lijst per stapel, afzender vet bij ongelezen, op de telefoon
   onder elkaar. De volledige tekst als platte tekst met regelafbreking. */
.mail-lijst { list-style: none; margin: 0; padding: 0; }
.mail-rij { display: flex; gap: var(--r3); align-items: flex-start; padding: var(--r3) var(--r4); border-top: 1px solid var(--rand); }
.mail-rij:first-child { border-top: 0; }
.mail-rij.afgehandeld { opacity: .6; }
.mail-hoofd { flex: 1 1 auto; min-width: 0; display: grid; gap: 2px; text-decoration: none; color: inherit; }
.mail-hoofd:hover { text-decoration: none; }
.mail-hoofd:hover .mail-onderwerp { color: var(--merk-tekst); }
.mail-van { font-size: var(--t-s); color: var(--tekst-zwak); }
.mail-rij.ongelezen .mail-van, .mail-rij.ongelezen .mail-onderwerp { font-weight: 600; color: var(--tekst); }
.mail-onderwerp { font-size: var(--t-m); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail-voorbeeld { font-size: var(--t-s); color: var(--tekst-zwak); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail-meta { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.mail-eerder { margin-top: var(--r3); border-top: 1px solid var(--rand); padding-top: var(--r2); }
.mail-eerder summary { cursor: pointer; font-size: var(--t-s); color: var(--tekst-zacht); }
.mail-eerder .mail-tekst { margin-top: var(--r2); opacity: .85; }
.mail-tekst { white-space: pre-wrap; word-break: break-word; font: inherit; font-size: var(--t-s); margin: 0; max-height: 60vh; overflow: auto; }
@media (max-width: 640px) {
  .mail-rij { flex-direction: column; gap: var(--r2); }
  .mail-meta { flex-direction: row; align-items: center; justify-content: space-between; width: 100%; }
}
.mail-verplaats { height: 30px; font-size: var(--t-s); border-radius: 8px; border: 1px solid var(--rand); background: var(--vlak); color: var(--tekst); padding: 0 8px; max-width: 150px; }

/* Staven per dag op Deze week (28 september 2026): op de telefoon blijft de grafiek op volle
   breedte zonder schuiven; de weekkeuze en de chips lopen door op een nieuwe regel. */
.staafgrafiek svg { min-width: 0; }
.weekstand-chips a.chip { text-decoration: none; }
@media (max-width: 640px) {
  .staaf-kop strong { flex-basis: 100%; order: -1; }
  .staafgrafiek svg { min-height: 170px; }
}
details.herinner > summary::-webkit-details-marker { display: none; }
details.herinner > summary { display: inline-flex; }
/* Herinner me op: het menu op de telefoon in de stroom van de pagina, niet zwevend (anders te breed). */
@media (max-width: 640px) {
  details.herinner { width: 100%; }
  details.herinner form { position: static !important; min-width: 0; width: 100%; }
}

/* Mail lezen (8 oktober 2026, keuring mail): eerst de mail, dan één actiebalk die onderaan blijft
   staan (op de telefoon boven de onderbalk), en de rest in lades die je met de balk openklapt. */
.mail-lezen .mail-tekst { max-height: none; font-size: var(--t-m); line-height: 1.55; }
.mail-tekst a.mail-link { color: var(--merk); text-decoration: underline; text-underline-offset: 2px; word-break: break-all; }
.mail-tekst a.mail-link.knopje { display: inline-block; text-decoration: none; font-size: var(--t-s); line-height: 1.3; padding: 1px 8px;
  border: 1px solid var(--merk-rand); background: var(--merk-zachter); border-radius: 999px; margin: 1px 0; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; vertical-align: baseline; }
.mail-balk {
  position: sticky; bottom: 12px; z-index: 30;
  display: flex; flex-wrap: wrap; gap: var(--r2); align-items: center;
  margin: 0 0 var(--r4); padding: var(--r2);
  background: color-mix(in oklab, var(--vlak) 94%, transparent);
  backdrop-filter: saturate(180%) blur(12px);
  border: 1px solid var(--rand); border-radius: 16px; box-shadow: var(--schaduw-2, var(--schaduw-3));
  transition: bottom var(--rustig);
}
.mail-balk > form { margin: 0; }
.mail-menu { position: relative; }
.mail-menu > summary { list-style: none; cursor: pointer; }
.mail-menu > summary::-webkit-details-marker { display: none; }
.mail-menu-vak {
  position: absolute; bottom: calc(100% + 8px); left: 0; z-index: 35;
  display: grid; gap: 6px; padding: var(--r3); width: max-content; min-width: 240px; max-width: min(320px, 90vw);
  box-shadow: var(--schaduw-3);
}
.mail-menu-vak .knop { justify-content: flex-start; }
details.lade > summary { list-style: none; cursor: pointer; }
details.lade > summary::-webkit-details-marker { display: none; }
details.lade > summary .chev { margin-left: auto; font-size: 11px; color: var(--tekst-zwak); transition: transform var(--rustig); }
details.lade > summary .duw + .chev { margin-left: var(--r2); }
details.lade[open] > summary .chev { transform: rotate(90deg); }
details.lade:not([open]) > summary { border-bottom: 0; }
@media (max-width: 1023px) {
  /* Boven de zwevende onderbalk; zakt mee als die wegschuift. */
  .mail-balk { bottom: calc(90px + env(safe-area-inset-bottom)); }
  body:has(.tabbar.weg) .mail-balk { bottom: calc(10px + env(safe-area-inset-bottom)); }
}
@media (max-width: 640px) {
  .mail-balk { gap: 6px; padding: 6px; }
  .mail-balk > form, .mail-balk > a, .mail-balk > details { flex: 1 1 auto; }
  .mail-balk .knop { width: 100%; justify-content: center; padding: 0 10px; }
  .mail-balk .mail-menu:last-child .mail-menu-vak { left: auto; right: 0; }
}
.mail-stapelrij { display: none; }
@media (max-width: 640px) {
  .mail-cijfers { display: none; }
  .mail-stapelrij { display: flex; gap: 6px; overflow-x: auto; margin: 0 0 var(--r3); padding-bottom: 2px; scrollbar-width: none; }
  .mail-stapelrij .chip { flex: 0 0 auto; white-space: nowrap; }
}
@media (max-width: 640px) {
  /* Eén rij van vier op de telefoon: korte woorden, alleen de hoofdknop met pictogram. */
  .mail-balk { flex-wrap: nowrap; }
  .mail-balk > form, .mail-balk > a, .mail-balk > details { flex: 1 1 0; min-width: 0; }
  .mail-balk > :first-child { flex-grow: 1.6; }
  .mail-balk .knop { padding: 0 6px; font-size: var(--t-s); white-space: nowrap; }
  .mail-balk > :not(:first-child) .knop svg, .mail-balk > :not(:first-child) > summary svg { display: none; }
  .mail-balk .alleen-breed { display: none; }
}
.mail-menu-vak.omlaag { bottom: auto; top: calc(100% + 8px); }
details.lade, .mail-lezen { scroll-margin-top: 72px; }
/* Lades: de kop is één regel (pictogram, titel, korte hint, pijltje), ook op de telefoon. */
details.lade > summary.paneelkop { flex-wrap: nowrap; }
details.lade > summary.paneelkop > svg { order: 0; flex: 0 0 auto; }
details.lade > summary.paneelkop h2 { order: 0; flex: 0 1 auto; font-size: var(--t-m); white-space: nowrap; }
details.lade > summary.paneelkop .hint { order: 0; flex: 1 1 auto; flex-basis: auto; min-width: 0; margin-left: var(--r2) !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
details.lade > summary.paneelkop .chev { order: 9; margin-left: auto !important; }

/* Bestand bekijken binnen de app (8 oktober 2026): Terug en Download boven, het bestand eronder. */
.bekijk-balk { display: flex; align-items: center; gap: var(--r2); margin-bottom: var(--r3); flex-wrap: wrap; }
.bekijk-naam { flex: 1 1 160px; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bekijk-vak { display: block; width: 100%; height: calc(100vh - 170px); min-height: 420px; border: 1px solid var(--rand); border-radius: 12px; background: #fff; }

/* Vandaag (keuring schil, voorstel 1, 8 oktober 2026): hooguit drie punten, de rest ingeklapt. */
.vandaag-bij { grid-template-columns: 110px 1fr; border-left-color: var(--goed, var(--merk)); }
.vandaag-bij .prio { color: var(--goed, var(--merk-tekst)); }
.ook-deze-week { border-top: 1px solid var(--rand); }
.ook-deze-week > summary { cursor: pointer; padding: var(--r3) var(--r5); font-weight: 600; font-size: var(--t-s); color: var(--tekst-zacht); list-style: none; }
.ook-deze-week > summary::-webkit-details-marker { display: none; }
.ook-deze-week > summary::before { content: "\25B8"; display: inline-block; margin-right: 8px; transition: transform var(--rustig); }
.ook-deze-week[open] > summary::before { transform: rotate(90deg); }
.ook-deze-week > .paneelbody { padding-top: 0; }
.ter-info { border-top: 1px solid var(--rand); padding: var(--r3) var(--r5) var(--r4); display: grid; gap: var(--r2); }
.ter-info .label { margin: 0; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--tekst-zwak); }
.ter-info .taak { padding-top: var(--r2); padding-bottom: var(--r2); opacity: .9; }
.ter-info .taak .taaktekst { font-size: var(--t-s); }

/* Gesprekken uit Wispr Flow (8 oktober 2026). */
.gesprek-lijst { display: grid; gap: var(--r2); }
.gesprek-kaart { display: grid; gap: 4px; padding: var(--r3) var(--r4); border: 1px solid var(--rand); border-radius: 12px; color: inherit; text-decoration: none; min-width: 0; }
.gesprek-kaart:hover { border-color: var(--merk); text-decoration: none; }
.gesprek-kaart strong { overflow-wrap: anywhere; }
.actiepunt { display: grid; gap: var(--r2); padding: var(--r3) var(--r4); border: 1px solid var(--rand); border-left: 4px solid var(--merk); border-radius: 12px; }
.actiepunt-gedaan, .actiepunt-genegeerd { opacity: .7; border-left-color: var(--rand); }
.actiepunt-taak { border-left-color: var(--let-op, var(--merk)); }

/* Kengetallen voor offertes op Leads (keuring offertes, voorstel 3, 8 okt 2026): vier vakjes, op de telefoon twee naast elkaar. */
.kengetallen { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--r3); }
.kengetal { display: grid; gap: 2px; align-content: start; min-width: 0; padding: var(--r3); border: 1px solid var(--rand); border-radius: 10px; }
.kengetal strong { font-size: var(--t-l); font-variant-numeric: tabular-nums; line-height: 1.2; }
.kengetal .hint { margin: 0; }
@media (max-width: 480px) { .kengetallen { grid-template-columns: 1fr 1fr; } }

/* Telefoon: makkelijk tikken en minder scrollen (keuring telefoon, 9 okt 2026; Gino: "veel wat niet makkelijk werkt").
   Knoppen en vinkjes waren 30 en 13 pixels, kleiner dan een duim (Apple raadt 44 aan); de cijfertegels stonden onder
   elkaar en duwden de inhoud twee schermen omlaag. Alleen onder 640 px; op de computer verandert niets. */
@media (max-width: 640px) {
  .knop { height: 44px; }
  .knop.klein { height: 40px; padding: 0 var(--r4); }
  .hamburger, .thema-knop { width: 44px; height: 44px; }
  .chip { height: 38px; }
  .kruisje { width: 36px; height: 36px; }
  .uitleg summary { width: 32px; height: 32px; font-size: 15px; }
  input[type="checkbox"], input[type="radio"] { width: 22px !important; height: 22px; min-width: 22px; accent-color: var(--merk); }
  .cijferrij { grid-template-columns: 1fr 1fr; gap: var(--r2); margin-bottom: var(--r4); }
  .cijferkaart { padding: 10px 12px; }
  .cijferkaart .getal { font-size: var(--t-l); }
  .cijferkaart .hint { font-size: 12.5px; line-height: 1.3; }
}

/* Offerte-editor op de telefoon (keuring telefoon, 9 okt 2026): elke regel was een kaart met acht velden onder
   elkaar, een offerte van 13 regels was elf schermen lang. Nu drie regels per offerteregel: omschrijving, dan aantal,
   stukprijs, staffel en bedrag naast elkaar, dan sectie, optie en weghalen. */
@media (max-width: 640px) {
  #regels, #regels tbody { display: block; width: 100%; }
  #regels tbody tr.regel {
    display: grid; gap: 6px 8px; padding: 10px; margin-bottom: var(--r2);
    grid-template-columns: 1fr 1fr 1fr 1.3fr;
    grid-template-areas: "oms oms oms oms" "aantal stuk staffel bedrag" "sectie sectie optie weg";
  }
  #regels tbody tr.regel td { padding: 0 !important; min-width: 0; }
  #regels tbody tr.regel td[data-label]::before { display: block; content: attr(data-label); font-size: 11px; color: var(--tekst-zwak); margin-bottom: 2px; }
  #regels tbody tr.regel td[data-label="Omschrijving"]::before, #regels tbody tr.regel td[data-label="Sectie"]::before { display: none; }
  #regels tbody tr.regel td:nth-child(1) { grid-area: sectie; }
  #regels tbody tr.regel td:nth-child(2) { grid-area: oms; }
  #regels tbody tr.regel td:nth-child(3) { grid-area: aantal; }
  #regels tbody tr.regel td:nth-child(4) { grid-area: stuk; }
  #regels tbody tr.regel td:nth-child(5) { grid-area: staffel; }
  #regels tbody tr.regel td:nth-child(6) { grid-area: bedrag; }
  #regels tbody tr.regel td:nth-child(7) { grid-area: optie; display: flex; align-items: center; gap: 6px; text-align: left !important; }
  #regels tbody tr.regel td:nth-child(7)::before { display: inline !important; margin: 0 !important; }
  #regels tbody tr.regel td:nth-child(8) { grid-area: weg; display: flex; justify-content: flex-end; align-items: center; }
  #regels tbody tr.regel td:nth-child(8) button { width: 40px; height: 40px; }
  #regels tbody tr.regel input, #regels tbody tr.regel select { width: 100%; min-width: 0; height: 40px; padding: 6px 8px !important; }
  #regels tbody tr.regel input[type="checkbox"] { width: 22px !important; height: 22px; }
  #regels tbody tr.regel .label { display: inline-block; margin-top: 4px; }
}

/* Mailoverzicht op de telefoon (keuring telefoon, 9 okt 2026): knoppen, zoeken en postvakken namen het halve scherm
   voordat je een mail zag. Nu één rij knoppen (ophalen als pictogram), postvakken als één schuifrij met korte namen. */
@media (max-width: 640px) {
  .mail-werkbalk { display: grid; grid-template-columns: 44px auto minmax(0, 1fr); gap: var(--r2); align-items: center; }
  .mail-werkbalk > * { min-width: 0; }
  .mail-werkbalk > .hint { grid-column: 1 / -1; }
  .mail-werkbalk .lang, .mail-postvakken .lang { display: none; }
  .mail-werkbalk > form:first-child .knop { width: 44px !important; padding: 0 !important; }
  .mail-werkbalk .knop { width: auto !important; min-width: 0 !important; }
  .mail-werkbalk .mail-zoek { flex: 1 1 0 !important; min-width: 0; }
  .mail-werkbalk .mail-zoek .knop { width: 44px !important; padding: 0 !important; flex: none; }
  .mail-werkbalk > .hint { font-size: 12px; margin: 0; }
  .mail-postvakken { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding-bottom: 2px; }
  .mail-postvakken::-webkit-scrollbar { display: none; }
  .mail-postvakken .chip { flex: none; }
  .mail-postvakken .chip[style*="margin-left:auto"] { margin-left: 0 !important; }
}

/* Menu's Later en Meer bij een mail op de telefoon (keuring telefoon, 9 okt 2026): het vak hing vanaf de knop naar
   rechts en viel buiten beeld. Nu een paneel over de volle breedte, net boven de knoppenbalk. */
@media (max-width: 640px) {
  .mail-menu-vak, .mail-menu-vak.omlaag {
    position: fixed; left: 12px; right: 12px; top: auto; width: auto; min-width: 0; max-width: none;
    bottom: calc(160px + env(safe-area-inset-bottom)); max-height: 60vh; overflow-y: auto;
  }
  body:has(.tabbar.weg) .mail-menu-vak { bottom: calc(80px + env(safe-area-inset-bottom)); }
  .mail-menu-vak .knop { width: 100%; }
  .mail-onderwerp .badge { vertical-align: middle; }
}

/* Chataanvraag op de aanvraagkaart (13 oktober 2026, Gino: "het gesprek moet overzichtelijk zijn, nu kwam het
   binnen als lang stuk tekst"): samenvatting, richtprijs en het gesprek als losse regels, ingeklapt. */
.chatkaart { margin-top: 10px; font-size: 13.5px; background: var(--vlak-rust); border-radius: 8px; padding: 10px 12px; }
.chatkaart-kop { margin: 0; }
.chatkaart-prijs { margin: 6px 0 0; font-weight: 600; }
.chatkaart-gesprek { margin-top: 8px; }
.chatkaart-gesprek > summary { cursor: pointer; color: var(--tekst-zwak); font-size: var(--t-s); }
.chatkaart-regels { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.chatregel { padding: 6px 10px; border-radius: 10px; max-width: 92%; white-space: pre-line; line-height: 1.4; }
.chatregel .wie { display: block; font-size: 11px; font-weight: 600; color: var(--tekst-zwak); margin-bottom: 2px; }
.chatregel.bezoeker { align-self: flex-end; background: var(--mint-licht, #dff5ee); border-bottom-right-radius: 3px; }
.chatregel.chat { align-self: flex-start; background: var(--vlak, #fff); border: 1px solid var(--lijn, #e5e5e5); border-bottom-left-radius: 3px; }
.chatregel.bezoeker, .chatregel.bezoeker .wie { color: #10231d; }
.chatregel.bezoeker .wie { color: #2f5a4e; }