/* AI Suite. De regels achter dit ontwerp staan in ONTWERP.md (één map hoger):
   twee lagen (inhoud, en daarboven glas voor navigatie), kleuren als rollen,
   de tekststijlen van iOS, licht en donker volgens het apparaat. */

:root {
  color-scheme: light dark;
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, monospace;

  --vlak: rgb(242, 242, 247);
  --groep: #fff;
  --label: #000;
  --label-2: rgba(60, 60, 67, 0.6);
  --label-3: rgba(60, 60, 67, 0.3);
  --scheiding: rgba(60, 60, 67, 0.29);
  --vulling: rgba(120, 120, 128, 0.2);
  --vulling-2: rgba(120, 120, 128, 0.16);
  --vulling-3: rgba(118, 118, 128, 0.12);
  --accent: rgb(0, 136, 255);
  --rood: rgb(255, 56, 60);
  --groen: rgb(52, 199, 89);
  --oranje: rgb(255, 141, 40);
  --gekozen: #fff;

  --glas: rgba(255, 255, 255, 0.6);
  --glas-dik: rgba(248, 248, 252, 0.74);
  --glas-dicht: rgb(250, 250, 252);
  --glas-rand: rgba(255, 255, 255, 0.75);
  --glas-lijn: rgba(0, 0, 0, 0.07);
  --schaduw: 0 10px 36px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.05);
  --waas: rgba(0, 0, 0, 0.22);

  --zij: 256px;
  --duur: 0.22s;
  --veer: cubic-bezier(0.2, 0.8, 0.2, 1);
}
/* Donker: als het apparaat donker staat, of als een tool die alleen donker bestaat open is */
@media (prefers-color-scheme: dark) {
  :root {
    --vlak: #000; --groep: rgb(28, 28, 30); --label: #fff;
    --label-2: rgba(235, 235, 245, 0.6); --label-3: rgba(235, 235, 245, 0.3);
    --scheiding: rgba(84, 84, 88, 0.6);
    --vulling: rgba(120, 120, 128, 0.36); --vulling-2: rgba(120, 120, 128, 0.32); --vulling-3: rgba(118, 118, 128, 0.24);
    --accent: rgb(0, 145, 255); --rood: rgb(255, 66, 69); --groen: rgb(48, 209, 88); --oranje: rgb(255, 146, 48);
    --gekozen: rgb(99, 99, 102);
    --glas: rgba(44, 44, 46, 0.56); --glas-dik: rgba(30, 30, 32, 0.74); --glas-dicht: rgb(28, 28, 30);
    --glas-rand: rgba(255, 255, 255, 0.12); --glas-lijn: rgba(255, 255, 255, 0.04);
    --schaduw: 0 10px 36px rgba(0, 0, 0, 0.5), 0 1px 3px rgba(0, 0, 0, 0.3); --waas: rgba(0, 0, 0, 0.5);
  }
}
:root[data-uiterlijk="donker"] {
  color-scheme: dark;
  --vlak: #000; --groep: rgb(28, 28, 30); --label: #fff;
  --label-2: rgba(235, 235, 245, 0.6); --label-3: rgba(235, 235, 245, 0.3);
  --scheiding: rgba(84, 84, 88, 0.6);
  --vulling: rgba(120, 120, 128, 0.36); --vulling-2: rgba(120, 120, 128, 0.32); --vulling-3: rgba(118, 118, 128, 0.24);
  --accent: rgb(0, 145, 255); --rood: rgb(255, 66, 69); --groen: rgb(48, 209, 88); --oranje: rgb(255, 146, 48);
  --gekozen: rgb(99, 99, 102);
  --glas: rgba(44, 44, 46, 0.56); --glas-dik: rgba(30, 30, 32, 0.74); --glas-dicht: rgb(28, 28, 30);
  --glas-rand: rgba(255, 255, 255, 0.12); --glas-lijn: rgba(255, 255, 255, 0.04);
  --schaduw: 0 10px 36px rgba(0, 0, 0, 0.5), 0 1px 3px rgba(0, 0, 0, 0.3); --waas: rgba(0, 0, 0, 0.5);
}
/* Meer contrast: de toegankelijke varianten van de systeemkleuren, en dekkende scheidingen */
@media (prefers-contrast: more) {
  :root { --accent: rgb(30, 110, 244); --rood: rgb(233, 21, 45); --groen: rgb(0, 137, 50); --label-2: rgba(60, 60, 67, 0.82); --scheiding: rgb(142, 142, 147); --glas: var(--glas-dicht); --glas-dik: var(--glas-dicht); }
}
@media (prefers-contrast: more) and (prefers-color-scheme: dark) {
  :root { --accent: rgb(92, 184, 255); --rood: rgb(255, 97, 101); --groen: rgb(74, 217, 104); --label-2: rgba(235, 235, 245, 0.82); }
}

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { -webkit-text-size-adjust: 100%; }
body {
  min-height: 100vh; min-height: 100dvh;
  font: 400 1.0625rem/1.294 var(--sans); /* tekst: 17/22 */
  background: var(--vlak); color: var(--label);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
.hidden { display: none !important; }
.hulp { position: absolute; width: 0; height: 0; }
.grijs { color: var(--label-2); }
a { color: var(--accent); text-decoration: none; }
h1, h2 { overflow-wrap: break-word; } /* met grote letters past een lang woord ("Goedemiddag,") anders niet op een telefoon */
h1 { font-size: 1.75rem; line-height: 1.214; font-weight: 700; }            /* titel 1: 28/34 */
h1.groot { font-size: 2.125rem; line-height: 1.206; }                       /* grote titel: 34/41 */
h2 { font-size: 1.375rem; line-height: 1.273; font-weight: 700; }           /* titel 2: 22/28 */
h3 { font-size: 1.0625rem; line-height: 1.294; font-weight: 600; }          /* kopregel: 17/22 */
svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
code { font-family: var(--mono); font-size: 0.875em; background: var(--vulling-3); padding: 2px 6px; border-radius: 6px; user-select: all; overflow-wrap: anywhere; }
:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 60%, transparent); outline-offset: 2px; }
:focus:not(:focus-visible) { outline: none; }

/* ---- glas: alleen voor navigatie en bediening, nooit in de inhoud ---- */
.glas {
  background: var(--glas);
  -webkit-backdrop-filter: blur(28px) saturate(180%); backdrop-filter: blur(28px) saturate(180%);
  box-shadow: inset 0 0 0 0.5px var(--glas-lijn), inset 0 1px 0 var(--glas-rand), var(--schaduw);
}
.glas.dik { background: var(--glas-dik); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .glas, .glas.dik { background: var(--glas-dicht); } }
@media (prefers-reduced-transparency: reduce) { .glas, .glas.dik { background: var(--glas-dicht); -webkit-backdrop-filter: none; backdrop-filter: none; } }

/* ---- merk ---- */
.merkteken { display: block; width: 28px; height: 28px; flex: none; clip-path: url(#appvorm); border-radius: 22.37%; background: conic-gradient(from 210deg, #0088ff, #6155f5, #cb30e0, #ff2d55, #ff8d28, #ffcc00, #34c759, #00c3d0, #0088ff); }
.merkteken.groot { width: 72px; height: 72px; }
.merk { display: flex; align-items: center; gap: 10px; color: var(--label); font-weight: 700; font-size: 1.0625rem; }

/* ---- knoppen ---- */
.knop {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 20px; border: 0; border-radius: 999px;
  font: 600 1.0625rem/1 var(--sans); cursor: pointer;
  background: var(--vulling-2); color: var(--label);
  transition: transform var(--duur) var(--veer), opacity var(--duur), background var(--duur);
}
.knop:hover { background: var(--vulling); }
.knop:active { transform: scale(0.97); opacity: 0.8; }
.knop.primair { background: var(--accent); color: #fff; }
/* Het logo van Facebook op de knop Koppel je Facebook (de knop zelf zet er al 8 px tussen) */
.fb-logo { width: 20px; height: 20px; flex: none; }
.knop.primair:hover { background: color-mix(in srgb, var(--accent) 90%, #000); }
.knop.gevaar { color: var(--rood); }
.knop.breed { width: 100%; }
.knop.klein { min-height: 34px; padding: 0 14px; font-size: 0.9375rem; }
.knop.tekst { background: none; color: var(--accent); font-weight: 400; } /* alleen tekst in het accent, zoals een tweede keuze in iOS */
.knop.tekst:hover { background: var(--vulling-3); }
.knop.klein::after { content: ""; position: absolute; inset: -5px 0; } /* raakvlak blijft 44 hoog */
.knop:disabled { opacity: 0.4; cursor: default; transform: none; }
.knoppen { display: flex; flex-wrap: wrap; gap: 10px; }
.rond { display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; color: var(--label); cursor: pointer; font: 600 0.9375rem/1 var(--sans); transition: transform var(--duur) var(--veer); }
.rond:active { transform: scale(0.94); }

/* ---- velden ---- */
input[type=email], input[type=password], input[type=text], input[type=url], input[type=search], input[type=date], input[type=time], textarea {
  width: 100%; min-height: 44px; padding: 0 14px; border: 0; border-radius: 12px;
  background: var(--vulling-3); color: var(--label);
  font: 400 1.0625rem/1.294 var(--sans); /* onder 16 px zoomt de iPhone in bij het typen */
}
input::placeholder { color: var(--label-3); }
label { display: block; font-size: 0.8125rem; line-height: 1.385; color: var(--label-2); } /* voetnoot: 13/18 */
label input { margin-top: 6px; }
.fout { color: var(--rood); font-size: 0.9375rem; line-height: 1.333; min-height: 20px; }
.velden { background: var(--groep); border-radius: 14px; overflow: hidden; text-align: left; }
.velden input { background: transparent; border-radius: 0; min-height: 50px; padding: 0 16px; }
.velden input + input { border-top: 0.5px solid var(--scheiding); }
.velden input:focus-visible { outline-offset: -3px; border-radius: 14px; }
.zoek { position: relative; display: block; max-width: 420px; margin-bottom: 24px; color: var(--label-2); }
.zoek svg { position: absolute; left: 12px; top: 50%; width: 18px; height: 18px; transform: translateY(-50%); pointer-events: none; }
.zoek input { margin: 0; padding-left: 38px; border-radius: 999px; background: var(--vulling-2); }

/* ---- inloggen ---- */
.login { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: 24px; }
.login-kaart { width: 100%; max-width: 340px; display: grid; gap: 16px; justify-items: center; text-align: center; }
.login-kaart > * { width: 100%; }
.login-kaart .merkteken { width: 72px; margin-bottom: 4px; }
.login-kaart h1 { margin-bottom: -8px; }
.login-kaart .knop { margin-top: 4px; }

/* ---- de schil: zijbalk, werkbalk, tabbalk ---- */
.zijbalk {
  position: fixed; inset: 8px auto 8px 8px; width: var(--zij); z-index: 30;
  display: flex; flex-direction: column; gap: 2px; padding: 14px 10px; border-radius: 24px; overflow-y: auto;
  transition: transform 0.36s var(--veer);
}
.zijbalk .merk { padding: 6px 8px 14px; }
.zij-kop { margin: 16px 10px 4px; font-size: 0.8125rem; line-height: 1.385; font-weight: 600; color: var(--label-2); }
.zij-item { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 10px; border-radius: 12px; color: var(--label); font-size: 0.9375rem; line-height: 1.333; }
.zij-item svg { width: 20px; height: 20px; color: var(--accent); }
.zij-item .appicoon svg { color: #fff; }
.zij-item:hover { background: var(--vulling-3); }
.zij-item.actief { background: var(--vulling-2); font-weight: 600; }
.hoofd { margin-left: calc(var(--zij) + 16px); min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; transition: margin-left 0.36s var(--veer); }
.suite.zij-dicht .zijbalk { transform: translateX(calc(-100% - 24px)); }
.suite.zij-dicht .hoofd { margin-left: 0; }

.werkbalk { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 12px; height: 60px; padding: 8px 16px; }
/* Geen harde streep onder de balk: de inhoud vervaagt eronder */
.werkbalk::before {
  content: ""; position: absolute; inset: 0 0 -16px; z-index: -1; pointer-events: none;
  background: linear-gradient(var(--vlak) 30%, transparent);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  -webkit-mask-image: linear-gradient(#000 55%, transparent); mask-image: linear-gradient(#000 55%, transparent);
}
.werkbalk-titel { flex: 1; min-width: 0; font-size: 1.0625rem; line-height: 1.294; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0; transition: opacity var(--duur); }
.werkbalk.klein-titel .werkbalk-titel { opacity: 1; }
.werkbalk-links { display: flex; gap: 8px; }
.werkbalk-rechts { position: relative; margin-left: auto; }
.menu { position: absolute; right: 0; top: 52px; z-index: 40; width: 260px; padding: 6px; border-radius: 22px; transform-origin: top right; animation: menu-in 0.2s var(--veer); }
.menu-kop { display: grid; gap: 2px; padding: 10px 12px 12px; font-size: 0.8125rem; line-height: 1.385; color: var(--label-2); overflow-wrap: anywhere; }
.menu-kop strong { font-size: 1.0625rem; line-height: 1.294; color: var(--label); }
.menu button { display: flex; align-items: center; width: 100%; min-height: 44px; padding: 0 12px; border: 0; border-radius: 16px; background: none; color: var(--label); font: 400 1.0625rem/1 var(--sans); cursor: pointer; text-align: left; }
.menu button.gevaar { color: var(--rood); }
.menu button:hover { background: var(--vulling-3); }
.menu-voet { margin-top: 6px; padding: 8px 12px 6px; border-top: 0.5px solid var(--scheiding); color: var(--label-2); font-size: 0.75rem; line-height: 1.333; } /* bijschrift: 12/16 */

.tabbalk { position: fixed; left: 50%; bottom: max(12px, env(safe-area-inset-bottom)); z-index: 30; display: none; gap: 2px; padding: 4px; border-radius: 999px; transform: translateX(-50%); }
/* de labels groeien niet mee met grote letters, net als in de tabbalk van iOS: anders past de balk niet meer op een telefoon */
.tab { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-width: 84px; height: 54px; padding: 0 12px; border-radius: 999px; color: var(--label); font-size: min(0.6875rem, 12px); line-height: 1.18; font-weight: 500; }
.tab svg { width: 24px; height: 24px; }
.tab.actief { background: var(--vulling-2); color: var(--accent); }

.inhoud { width: 100%; max-width: 960px; margin: 0 auto; padding: 8px 32px 64px; }
.inhoud > * { animation: komt-in 0.32s var(--veer) both; }
/* begint zichtbaar (app-bouwer les 15): in een tabblad op de achtergrond of een venster dat nog laadt staat er nooit een lege of halfdoorzichtige pagina */
@keyframes komt-in { from { transform: translateY(8px); } }
@keyframes menu-in { from { opacity: 0; transform: scale(0.92); } }

/* ---- pagina's ---- */
.kop { margin-bottom: 24px; }
.kop p { margin-top: 4px; color: var(--label-2); }
.sectie { margin-bottom: 28px; break-inside: avoid; }
.sectie-kop { margin: 0 4px 10px; font-size: 1.25rem; line-height: 1.25; font-weight: 600; } /* titel 3: 20/25 */
.secties { columns: 2 340px; column-gap: 24px; }

/* Een groep zoals in Instellingen: afgerond vlak met rijen, scheiding begint bij de tekst */
.groep { background: var(--groep); border-radius: 24px; overflow: hidden; }
.rij { position: relative; display: flex; align-items: center; gap: 14px; min-height: 52px; padding: 12px 16px; color: var(--label); }
.rij + .rij::before { content: ""; position: absolute; top: 0; left: var(--inspring, 16px); right: 0; border-top: 0.5px solid var(--scheiding); }
.rij.tool { --inspring: 86px; }
a.rij { transition: background var(--duur); }
a.rij:hover { background: var(--vulling-3); }
a.rij:active { background: var(--vulling-2); }
.rij-tekst { flex: 1; min-width: 0; display: grid; gap: 2px; }
.rij-tekst strong { font-weight: 600; }
.rij-tekst span { color: var(--label-2); font-size: 0.9375rem; line-height: 1.333; } /* onderkop: 15/20 */
.pijl { width: 9px; height: 15px; color: var(--label-3); stroke-width: 2.4; }
.pil { flex: none; padding: 4px 10px; border-radius: 999px; background: var(--vulling-3); color: var(--label-2); font-size: 0.8125rem; line-height: 1.385; font-weight: 600; }
.pil.beta { background: color-mix(in srgb, var(--oranje) 18%, transparent); color: var(--oranje); }
.stap { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--vulling-3); color: var(--label-2); font-size: 0.9375rem; font-weight: 600; }
.rij.later .rij-tekst strong { color: var(--label-2); }

/* Het icoon van een tool: de vorm van een app-icoon, verloop van licht naar donker, wit teken */
.appicoon {
  flex: none; display: grid; place-items: center; width: 56px; height: 56px; color: #fff;
  clip-path: url(#appvorm); border-radius: 22.37%;
  background: var(--kleur, var(--accent));
  background: linear-gradient(180deg, color-mix(in srgb, var(--kleur, var(--accent)) 76%, #fff), var(--kleur, var(--accent)) 55%, color-mix(in srgb, var(--kleur, var(--accent)) 84%, #000));
}
.appicoon svg { width: 52%; height: 52%; }
.appicoon.klein { width: 24px; height: 24px; }
.appicoon.klein svg { stroke-width: 2.4; }
.appicoon.groot { width: 112px; height: 112px; }
.later .appicoon { filter: saturate(0.5); opacity: 0.5; }

.leeg { padding: 56px 24px; text-align: center; color: var(--label-2); }
.leeg h2 { color: var(--label); margin-bottom: 6px; }
/* Laadstaat in de vorm van de inhoud: grijze vormen op de plek van titel, kopjes en rijen. Ze staan meteen op hun plek
   (geen binnenkomst, en nooit vanaf onzichtbaar: les 15) en ademen zacht, zodat je ziet dat er iets gebeurt; met minder
   beweging staan ze stil (de regel onderaan zet alle beweging uit). */
.inhoud > .laadstaat { animation: none; }
.laad { display: block; border-radius: 6px; background: var(--vulling-3); animation: laad-adem 1.6s ease-in-out infinite; }
.laad-titel { width: min(280px, 70%); height: 2.125rem; margin: 3px 0; border-radius: 10px; }
.kop .laad-lijn { width: min(360px, 85%); margin-top: 12px; }
.laad-kop { position: relative; top: 4px; width: 96px; height: 1rem; margin: 0 4px 19px; } /* zelfde ruimte als een kopje (25 hoog plus 10); in kolommen telt een marge bovenaan niet altijd mee */
.laad-lijn { width: 55%; height: 0.875rem; margin: 3px 0; }
.laad-lijn.kort { width: 35%; height: 0.75rem; }
.laad-blokkop { width: 40%; height: 1.0625rem; margin-bottom: 14px; }
.rij.laad-rij.met-groot { --inspring: 86px; } /* de scheiding begint bij de tekst, zoals bij een tool */
.rij.laad-rij.met-middel { --inspring: 62px; }
.laad-icoon { flex: none; width: 56px; height: 56px; border-radius: 22.37%; clip-path: url(#appvorm); }
.laad-icoon.middel { width: 32px; height: 32px; }
.laad-tekst { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@keyframes laad-adem { 50% { opacity: 0.5; } }

/* de pagina van een tool, zoals een app in de App Store */
.product { display: flex; gap: 20px; align-items: center; margin-bottom: 24px; }
.product p { margin-top: 2px; color: var(--label-2); }
.product .knoppen { margin-top: 14px; }
/* op de telefoon: de knoppen even breed onder elkaar, de hoofdknop bovenaan, in plaats van scheef om elkaar heen */
@media (max-width: 599px) { .product > div { align-self: stretch; } .product .knoppen { flex-direction: column; } }
.tool-tekst { max-width: 68ch; margin-bottom: 28px; }
/* de uitleg onder de kop van een toolpagina: ongeveer 70 tekens per regel (ONTWERP 5.5); 68ch was in San Francisco 92 tot 106 */
header.product + .tool-tekst { max-width: 32em; }
.blok { max-width: 720px; padding: 20px; margin-bottom: 20px; border-radius: 24px; background: var(--groep); }
.blok h3 { margin-bottom: 8px; }
.blok ol, .blok ul { padding-left: 22px; display: grid; gap: 6px; color: var(--label-2); }
.blok p + p, .blok form > * + * { margin-top: 12px; }
.blok .knoppen { margin-top: 16px; }
.blok .knoppen + p { margin-top: 12px; }
/* Uitleg die pas openklapt als iemand erom vraagt (bijvoorbeeld hoe je bij Meta aan een token komt) */
.uitleg { margin-top: 12px; }
.uitleg summary { display: flex; align-items: center; min-height: 44px; color: var(--accent); cursor: pointer; list-style: none; }
.uitleg summary::-webkit-details-marker { display: none; }
.uitleg summary::after { content: ""; width: 8px; height: 8px; margin-left: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform 0.2s; }
.uitleg[open] summary::after { transform: rotate(225deg) translateY(-2px); }
.uitleg ol { margin: 8px 0 12px; }
/* een lang webadres in een stap (app.kit.com/account_settings/...) breekt af in plaats van het scherm breder te maken */
.uitleg li { overflow-wrap: anywhere; }
.uitleg li strong { color: var(--label); }
.uitleg code { font-size: 0.9375rem; padding: 1px 6px; border-radius: 6px; background: var(--vulling); }
@media (prefers-reduced-motion: reduce) { .uitleg summary::after { transition: none; } }
#fbBlok { margin-bottom: 8px; }
#fbBlok form { display: grid; gap: 4px; margin-top: 12px; }

/* ---- de stijl van de video-editor: links het voorbeeld, rechts de keuzes ---- */
.stijl { display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: 28px; align-items: start; }
.stijl-voorbeeld { position: sticky; top: 76px; }
.voetnoot { margin: 8px 4px 0; color: var(--label-2); font-size: 0.8125rem; line-height: 1.385; }
.stijl-knoppen { align-items: center; margin-top: 24px; }
.groep-kop { margin: 22px 4px 8px; color: var(--label-2); font-size: 0.8125rem; line-height: 1.385; font-weight: 600; }
.groep-kop:first-child { margin-top: 0; }
.startpunten { display: flex; flex-wrap: wrap; gap: 8px; }
.startpunten .gekozen { background: var(--accent); color: #fff; }
.rij.keuze { flex-wrap: wrap; row-gap: 8px; min-height: 60px; padding-block: 8px; }
.rij.keuze .tabs { margin: 0; }
/* zoals bij de Thumbnail Maker: past de keuze niet naast zijn label, dan komt hij eronder in plaats van over de tekst */
#videoBlok .rij.keuze .rij-tekst { flex: 1 0 auto; max-width: 100%; }
/* de knop die zegt dat hij bezig is, moet je kunnen lezen (ONTWERP 7.5 en 9.2): niet vervaagd zoals een knop die uit staat,
   maar grijs gevuld zoals een gewone knop, zodat de tekst in licht en donker ruim 4,5 op 1 haalt */
#videoBlok .knop[aria-busy="true"]:disabled { opacity: 1; cursor: progress; background: var(--vulling-2); color: var(--label); }
/* het voorbeeld is getekend op de maten van een short: 1080 breed, dus 1 px in de video is 1/10,8 van 1% van de breedte */
.beeld { position: relative; width: 100%; aspect-ratio: 9 / 16; border-radius: 30px; overflow: hidden; container-type: inline-size; background: linear-gradient(165deg, #8493a1, #3d4855 46%, #12171d); box-shadow: var(--schaduw); }
.beeld::before { content: ""; position: absolute; left: 50%; top: 20%; width: 36%; aspect-ratio: 1; transform: translateX(-50%); border-radius: 50%; background: rgba(255, 255, 255, 0.16); }
.beeld::after { content: ""; position: absolute; left: 50%; top: 43%; width: 78%; height: 70%; transform: translateX(-50%); border-radius: 46% 46% 0 0; background: rgba(255, 255, 255, 0.1); }
.sv-cap, .sv-sticker { position: absolute; z-index: 1; left: 8.3%; right: 8.3%; text-align: center; font-family: var(--sv-font), var(--sans); font-weight: 400; font-synthesis: none; line-height: 1.2; } /* het bestand is zelf al vet */
.sv-cap { bottom: 41.7%; color: var(--sv-tekst); font-size: 20px; font-size: calc(var(--sv-fs) / 10.8 * 1cqw); }
.beeld[data-vorm="rand"] .sv-cap span { -webkit-text-stroke: calc(var(--sv-outline) / 10.8 * 2cqw) var(--sv-rand); paint-order: stroke fill; text-shadow: 0 calc(var(--sv-schaduw) / 10.8 * 1cqw) 0 rgba(0, 0, 0, 0.37); }
/* het blokje steekt in de echte video 16 px om de tekst uit (bij lettergrootte 84 is dat 0,19 em) */
.beeld[data-vorm="blokje"] .sv-cap { line-height: 1.42; }
.beeld[data-vorm="blokje"] .sv-cap span { padding: 0.12em 0.2em; background: var(--sv-rand); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.sv-sticker { color: var(--sv-st-tekst); font-size: 13px; font-size: 5.6cqw; }
.beeld[data-sticker="onder"] .sv-sticker { bottom: 17.7%; }
.beeld[data-sticker="boven"] .sv-sticker { top: 14%; }
.beeld[data-sticker="uit"] .sv-sticker { display: none; }
.beeld[data-stickervorm="doek"] .sv-sticker span { padding: 0.16em 0.5em; background: color-mix(in srgb, var(--sv-st-vlak) 50%, transparent); -webkit-box-decoration-break: clone; box-decoration-break: clone; line-height: 1.7; }
.beeld[data-stickervorm="rand"] .sv-sticker span { -webkit-text-stroke: 1.3cqw var(--sv-st-vlak); paint-order: stroke fill; }
.prompt { max-height: 280px; margin-top: 16px; padding: 14px 16px; overflow: auto; border-radius: 18px; background: var(--groep); color: var(--label); font: 400 0.8125rem/1.5 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; user-select: all; -webkit-user-select: all; }
/* het voorbeeld van een thumbnail: liggend, 1920 bij 1080, tekst groot onderin zoals het script hem zet */
.thumb-voorbeeld { max-width: 480px; margin-bottom: 20px; }
.thumb { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 20px; overflow: hidden; container-type: inline-size; background: linear-gradient(120deg, #8ea0ae, #55616e 50%, #2c343d); box-shadow: var(--schaduw); }
.thumb::before { content: ""; position: absolute; left: 50%; top: 12%; width: 20%; aspect-ratio: 1; transform: translateX(-50%); border-radius: 50%; background: rgba(255, 255, 255, 0.2); }
.thumb::after { content: ""; position: absolute; inset: 55% 0 0; background: linear-gradient(transparent, rgba(0, 0, 0, 0.78)); }
.thumb[data-verloop="uit"]::after { display: none; }
.tv-tekst { position: absolute; z-index: 1; left: 4.2%; right: 4.2%; bottom: 5.5%; text-align: center; color: var(--tv-tekst); font-family: var(--tv-font), var(--sans); font-weight: 400; font-synthesis: none; font-size: 22px; font-size: 10cqw; line-height: 1.1; text-shadow: 0 0.04em 0.12em rgba(0, 0, 0, 0.55); }
.tv-accent { color: var(--tv-accent); }
/* de vorm van de tekst: een rand om de letters, of een gekleurd blok achter elke regel (zoals het script hem tekent) */
/* Op een smal scherm schoof de keuze over zijn eigen label heen ("LetterAnton"): een label houdt hier zijn eigen
   breedte, en past de keuze er niet naast, dan komt hij eronder. */
#thumbBlok .rij.keuze .rij-tekst { flex: 1 0 auto; max-width: 100%; }
.thumb[data-vorm="rand"] .tv-tekst { text-shadow: none; }
.thumb[data-vorm="rand"] .tv-regels { -webkit-text-stroke: 0.14em var(--tv-rand); paint-order: stroke fill; }
.thumb[data-vorm="blok"] .tv-tekst { text-shadow: none; line-height: 1.42; bottom: 6.5%; }
.thumb[data-vorm="blok"] .tv-regels { padding: 0.07em 0.18em; border-radius: 0.07em; background: var(--tv-rand); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
/* hier maken: het doek met de eigen foto of video (public/thumbdoek.js). Groter dan het voorbeeld, want hier wordt gesleept */
.thumb-voorbeeld.met-doek { max-width: 720px; }
.thumb.doek { display: block; height: auto; background: #000; cursor: grab; touch-action: none; }
.thumb.doek.op-tekst { cursor: move; }
.thumb.doek.sleept { cursor: grabbing; }
.thumb-voorbeeld.boven .thumb { outline: 3px solid var(--accent); outline-offset: 2px; }
.dropvak.klein { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; column-gap: 6px; padding: 12px 16px; font-size: 0.9375rem; }
.dropvak.klein .voetnoot { display: none; }
.tv-video { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
#tvMoment { flex: 1 1 180px; min-width: 0; min-height: 44px; margin: 0; accent-color: var(--accent); }
#tvTijd { min-width: 3.5em; text-align: right; font-variant-numeric: tabular-nums; }
#tvTekstVeld { flex: 1 1 220px; }
.tv-melding:empty { display: none; }
.tv-melding.mis { color: var(--rood); }
.tv-uitleg { max-width: 68ch; margin: 0 4px; }
/* ---- Campagne Maker: creatives uploaden en het formulier ---- */
textarea { display: block; min-height: 88px; padding: 10px 14px; resize: vertical; }
.dropvak { position: relative; display: grid; justify-items: center; gap: 4px; padding: 28px 20px; margin-bottom: 12px; border-radius: 24px; border: 1.5px dashed var(--scheiding); background: var(--groep); color: var(--label); font-size: 1.0625rem; line-height: 1.294; text-align: center; cursor: pointer; transition: border-color var(--duur), background var(--duur); }
.dropvak strong { color: var(--accent); font-weight: 600; }
.dropvak.boven, .dropvak:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--groep)); }
.dropvak input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.dropvak:has(input:focus-visible) { outline: 3px solid color-mix(in srgb, var(--accent) 60%, transparent); outline-offset: 2px; }
.rij.creatief { flex-wrap: nowrap; }
.rij.creatief .rij-tekst strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rij.creatief.mis .rij-tekst span { color: var(--rood); }
.voortgang { display: block; height: 4px; margin-top: 6px; border-radius: 999px; background: var(--vulling-3); overflow: hidden; }
.voortgang i { display: block; height: 100%; border-radius: 999px; background: var(--accent); transition: width 0.2s; }
.cm-meer { margin-top: 12px; }
/* Je resultaten: per campagne rechts de cijfers van de laatste zeven dagen; op een smal scherm eronder */
.rij.cijfer { flex-wrap: wrap; row-gap: 6px; }
.cijfers { display: grid; justify-items: end; gap: 2px; color: var(--label-2); font-size: 0.9375rem; line-height: 1.333; font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 599px) { .cijfers { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 4px 14px; justify-items: start; } }
#campagneBlok .sectie, #fbBlok ~ .sectie { max-width: 720px; } /* even breed als het accountblok erboven, ook Wat je nodig hebt en Zo werkt het eronder */
/* ---- Mail Maker ---- */
#mailWerk .sectie { max-width: 720px; }
#mailBlok ~ .sectie { max-width: 720px; } /* Wat je nodig hebt en Zo werkt het eindigen op dezelfde lijn als de blokken erboven */
/* het blok Je mailaccount houdt onderin geen lege ruimte vast: de witregel van de introtekst en een lege melding tellen daar niet */
#mailBlok .blok > .tool-tekst { margin-bottom: 0; }
#mailBlok .fout:empty { min-height: 0; }
#mailKoppel select.kies { display: block; width: 100%; margin-top: 6px; border-radius: 12px; }
.mm-velden { display: grid; gap: 12px; }
.blok form > .mm-velden > * + * { margin-top: 0; }
#mailBlok .cm-veld .tabs, #mailWerk .sectie > .tabs { margin: 0 0 4px; }
#mailWerk .sectie > .tabs { margin-bottom: 12px; }
/* een veld voor een datum of een tijd steekt op de iPhone buiten zijn vak, tenzij het zijn eigen vorm kwijt is en het vak mag krimpen */
input[type=date], input[type=time] { -webkit-appearance: none; appearance: none; min-width: 0; max-width: 100%; }
.mm-moment { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 12px; width: 100%; }
.mm-moment .voetnoot { grid-column: 1 / -1; margin-left: 0; }
.rij.mail .rij-tekst strong { overflow-wrap: anywhere; }
/* het schrijfvak: een balk met opmaak en daaronder de mail zelf */
.mm-schrijf { width: 100%; border-radius: 12px; background: var(--vulling-3); }
.mm-schrijf:focus-within { outline: 3px solid color-mix(in srgb, var(--accent) 60%, transparent); outline-offset: 2px; }
.mm-balk { display: flex; flex-wrap: wrap; gap: 2px; padding: 4px; border-bottom: 0.5px solid var(--scheiding); }
.mm-knop { display: grid; place-items: center; min-width: 44px; min-height: 44px; padding: 0 12px; border: 0; border-radius: 9px; background: none; color: var(--label); font: 600 0.9375rem/1 var(--sans); cursor: pointer; }
.mm-knop:hover { background: var(--vulling); }
.mm-knop[aria-pressed=true] { background: var(--gekozen); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12); }
.mm-knop svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.mm-knop b, .mm-knop i { font-family: Georgia, "Times New Roman", serif; font-size: 1.125rem; }
.mm-editor { min-height: 220px; padding: 12px 14px; color: var(--label); font: 400 1.0625rem/1.47 var(--sans); overflow-wrap: anywhere; outline: none; cursor: text; }
.mm-editor:empty::before { content: attr(data-leeg); color: var(--label-3); pointer-events: none; }
.blok .mm-editor p { margin: 0 0 12px; }
.blok .mm-editor h1, .blok .mm-editor h2, .blok .mm-editor h3 { margin: 16px 0 8px; font-size: 1.375rem; line-height: 1.27; font-weight: 700; }
.blok .mm-editor ul, .blok .mm-editor ol { display: block; margin: 0 0 12px; padding-left: 24px; color: inherit; }
.blok .mm-editor li { margin-bottom: 4px; }
.mm-editor a { color: var(--accent); text-decoration: underline; }
.mm-test { display: flex; flex-wrap: wrap; gap: 10px; width: 100%; }
.mm-test input { flex: 1 1 200px; min-width: 0; }
dialog.mm-link { max-width: 380px; }
dialog.mm-link form { display: grid; gap: 12px; margin-top: 12px; }
dialog.mm-link .knoppen { flex-wrap: wrap; }
.cm-form { display: grid; gap: 16px; max-width: 720px; }
.blok.cm-form > * + * { margin-top: 0; }
.cm-veld { display: grid; gap: 8px; justify-items: start; }
.cm-veld > div { width: 100%; }
.cm-veld .tabs { width: auto; margin: 0; }
.cm-label { color: var(--label-2); font-size: 0.8125rem; line-height: 1.385; }
#cmTeksten, #cmKoppen { display: grid; gap: 8px; }
.cm-form select.kies { display: block; width: 100%; margin-top: 6px; border-radius: 12px; }
.uitslag { margin-top: 20px; box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--groen) 55%, transparent); }
.uitslag.mis { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--oranje) 70%, transparent); }
.uitslag ul { margin: 8px 0; }
/* lange namen zonder spaties (zoals NL_BE_Prospecting_Najaar2026) breken af binnen hun vak in plaats van de pagina breder te maken */
#campagneBlok .uitslag, #cmCijfers .rij-tekst, dialog.vraag p { overflow-wrap: anywhere; }
/* op een smal scherm lopen de keuzes van de Campagne Maker over twee regels: dan met lucht tussen die regels */
#campagneBlok .segment { line-height: 1.2; padding-block: 4px; }
.voor-regels { white-space: pre-line; }

/* kleurstaaltjes: rond, met een ring om de gekozen kleur */
.staaltjes { display: flex; gap: 8px; }
.staal { position: relative; display: block; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; background: var(--k); box-shadow: inset 0 0 0 1px var(--scheiding); cursor: pointer; }
.staal::after { content: ""; position: absolute; inset: -6px; }
.staal.actief { outline: 3px solid var(--accent); outline-offset: 2px; }
.staal.eigen { background: conic-gradient(#ff383c, #ffcc00, #34c759, #00c3d0, #0088ff, #cb30e0, #ff383c); }
.staal.eigen input { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
/* de focus van het toetsenbord: ook op de eigen kleur (het kiesveld zelf is onzichtbaar). Op een gekozen staaltje komt
   de focus als tweede ring om de ring van de keuze heen, met lucht ertussen; die ring van de keuze is dan een schaduw */
.staal.eigen:has(input:focus-visible) { outline: 3px solid color-mix(in srgb, var(--accent) 60%, transparent); outline-offset: 2px; }
.staal.actief:focus-visible, .staal.eigen.actief:has(input:focus-visible) {
  box-shadow: inset 0 0 0 1px var(--scheiding), 0 0 0 1px var(--groep), 0 0 0 4px var(--accent);
  outline: 2px solid var(--accent); outline-offset: 6px; }
/* schakelaar zoals op de iPhone */
.schakel { position: relative; display: inline-flex; flex: none; cursor: pointer; }
.schakel input { position: absolute; inset: -7px 0; z-index: 1; width: 100%; height: calc(100% + 14px); margin: 0; opacity: 0; cursor: pointer; } /* raakvlak 45 hoog */
.schakel-baan { position: relative; width: 51px; height: 31px; border-radius: 999px; background: var(--vulling); transition: background var(--duur); }
.schakel-baan::after { content: ""; position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.22); transition: transform var(--duur) var(--veer); }
.schakel input:checked + .schakel-baan { background: var(--groen); }
.schakel input:checked + .schakel-baan::after { transform: translateX(20px); }
.schakel input:focus-visible + .schakel-baan { outline: 3px solid color-mix(in srgb, var(--accent) 60%, transparent); outline-offset: 2px; }
.stepper { display: inline-flex; align-items: center; border-radius: 999px; background: var(--vulling-3); }
.stepper button { position: relative; width: 44px; height: 36px; border: 0; background: none; color: var(--label); font: 500 1.25rem/1 var(--sans); cursor: pointer; }
.stepper button::after { content: ""; position: absolute; inset: -4px 0; }
.stepper output { min-width: 22px; text-align: center; font-weight: 600; font-variant-numeric: tabular-nums; }
select.kies { min-height: 44px; max-width: 100%; padding: 0 36px 0 16px; border: 0; border-radius: 999px; color: var(--label); font: 500 1.0625rem/1.294 var(--sans); cursor: pointer; -webkit-appearance: none; appearance: none;
  background: var(--vulling-3) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 16' fill='none' stroke='%238e8e93' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6l3-3 3 3M3 10l3 3 3-3'/%3E%3C/svg%3E") no-repeat right 14px center / 10px 14px; }

/* een tool in de suite zelf: het venster vult alles naast de zijbalk en onder de balk */
.suite.app-open .werkbalk { height: 52px; padding: 4px 12px; }
.suite.app-open .werkbalk::before { display: none; }
.suite.app-open .werkbalk-titel { visibility: hidden; } /* de tool toont zelf zijn naam */
.inhoud.vol { flex: 1; display: flex; max-width: none; padding: 0 8px 8px 0; }
.inhoud.vol .inbed { flex: 1; display: block; width: 100%; height: calc(100vh - 60px); height: calc(100dvh - 60px); border: 0; border-radius: 18px; background: var(--groep); animation: none; }
/* het teken dat de tool opent: een dicht vlak precies over het venster tot de tool klaar is, nooit tekst door tekst */
.inhoud.vol { position: relative; }
.venster-wacht { position: absolute; inset: 0 8px 8px 0; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 16px; border-radius: 18px; background: var(--groep); color: var(--label-2); font-size: 0.9375rem; line-height: 1.25rem; text-align: center; }
.venster-wacht svg { width: 28px; height: 28px; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; animation: venster-draai 0.8s steps(8) infinite; }
.venster-wacht .lang { display: none; max-width: 30ch; }
.venster-wacht.traag .lang { display: block; }
@keyframes venster-draai { to { transform: rotate(360deg); } }

/* koppelen */
.adres { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.koppelingen { list-style: none; padding: 0 !important; gap: 0 !important; color: var(--label) !important; }
.koppelingen li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 0; border-top: 0.5px solid var(--scheiding); }
.koppelingen li:first-child { border-top: 0; padding-top: 4px; }
.toestemming { max-width: 520px; margin: 24px auto; padding: 28px 24px; text-align: center; }
.toestemming h1 { font-size: 1.375rem; line-height: 1.273; margin-bottom: 12px; }
.toestemming .knoppen { justify-content: center; margin-top: 20px; }
.vink { display: flex; align-items: center; gap: 12px; min-height: 44px; margin-top: 16px; padding: 10px 14px; border-radius: 14px; background: var(--vulling-3); color: var(--label); font-size: 0.9375rem; line-height: 1.333; text-align: left; cursor: pointer; }
.vink input { flex: none; width: 22px; height: 22px; accent-color: var(--accent); }
.toestemming.onbekend { box-shadow: inset 0 0 0 2px var(--oranje); }

/* beheer */
.tabs { display: inline-flex; padding: 2px; margin-bottom: 20px; border-radius: 999px; background: var(--vulling-3); }
.segment { position: relative; min-height: 36px; padding: 0 18px; border: 0; border-radius: 999px; background: none; color: var(--label); font: 500 0.9375rem/1 var(--sans); cursor: pointer; }
.segment::after { content: ""; position: absolute; inset: -4px 0; }
.segment.actief { background: var(--gekozen); font-weight: 600; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12); }
.rij-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; align-items: end; padding: 20px; margin-bottom: 20px; border-radius: 24px; background: var(--groep); }
.tabel-wrap { overflow-x: auto; border-radius: 24px; background: var(--groep); }
.tabel { width: 100%; border-collapse: collapse; font-size: 0.9375rem; line-height: 1.333; }
.tabel th { text-align: left; padding: 14px 16px 8px; color: var(--label-2); font-size: 0.8125rem; font-weight: 600; }
.tabel td { padding: 14px 16px; border-top: 0.5px solid var(--scheiding); vertical-align: top; }
.tabel strong { font-size: 1.0625rem; font-weight: 600; }
.tabel .knop { white-space: nowrap; } /* "Nieuw wachtwoord" op één regel, niet in twee in een capsule */
.url-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.url-form input { flex: 1 1 220px; min-width: 0; margin: 0; }
/* Een smalle tabel (telefoon, of een venster met de zijbalk open) wordt een lijst zoals in Instellingen: elke rij een blok,
   de cellen onder elkaar. Zo schuift er niets opzij en staan de knoppen in beeld (ONTWERP.md 2.4 en 9.2). */
.tabel-wrap { container-type: inline-size; }
@container (max-width: 640px) {
  .tabel thead { display: none; }
  .tabel, .tabel tbody, .tabel tr, .tabel td { display: block; width: 100%; }
  .tabel tr + tr { border-top: 0.5px solid var(--scheiding); }
  .tabel td { border-top: 0; padding: 4px 16px; }
  .tabel td:first-child { padding-top: 14px; }
  .tabel td:last-child { padding-bottom: 14px; }
  .tabel td:empty { display: none; }
  .gebruik-kort { min-width: 0; }
}
.uit { opacity: 0.5; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 14px; border-radius: 999px; background: var(--vulling-3); color: var(--label); font-size: 0.8125rem; font-weight: 500; cursor: pointer; user-select: none; transition: background var(--duur), color var(--duur); }
.chip::after { content: ""; position: absolute; inset: -4px 0; } /* raakvlak 44 hoog */
.chip input { accent-color: var(--accent); }
/* beheer: de lijst van klanten en de pagina van één klant */
.klant-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--label); }
.klant-link:hover strong { color: var(--accent); }
.gebruik-kort { min-width: 11rem; color: var(--label-2); }
/* De terug-link (naar Klanten, naar de mappen van Templates) staat op één plek: templates.css */
.sorteer { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 16px; }
.sorteer label { font-size: 0.9375rem; line-height: 1.333; }
.sectie.klant { max-width: 720px; }
.waarde { flex: 0 1 auto; max-width: 60%; color: var(--label-2); text-align: right; overflow-wrap: anywhere; }
.rij.met-icoon { --inspring: 62px; }
.appicoon.middel { width: 32px; height: 32px; }
.rij-tekst .werk { color: var(--label); }
@supports selector(:has(a)) {
  .chip input { position: absolute; opacity: 0; pointer-events: none; }
  .chip:has(input:checked) { background: var(--accent); color: #fff; }
  .chip:has(input:focus-visible) { outline: 3px solid color-mix(in srgb, var(--accent) 60%, transparent); outline-offset: 2px; }
}
.melding { padding: 14px 16px; margin-bottom: 20px; border-radius: 18px; background: color-mix(in srgb, var(--accent) 12%, var(--groep)); font-size: 0.9375rem; line-height: 1.333; }
#melding { scroll-margin-top: 76px; } /* schuift de melding in beeld, dan niet onder de werkbalk (60 hoog) */
/* een knop in een melding (bijvoorbeeld naar de klant waar een e-mailadres al bij hoort) staat op een eigen regel */
.melding .knop { display: flex; width: fit-content; margin-top: 12px; }
/* team: collega's in dezelfde omgeving (de pagina Team en het team van een klant in Beheer) */
.avatar { display: grid; place-items: center; width: 32px; height: 32px; flex: none; border-radius: 50%; background: linear-gradient(180deg, #a6abb8, #858994); color: #fff; font-size: 0.8125rem; line-height: 1; font-weight: 600; }
.rij-knoppen { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.rij.is-uit .avatar, .rij.is-uit strong { opacity: 0.5; }
/* met knoppen onder de tekst staat het rondje bij de naam, niet midden in de rij */
.rij:has(.rij-knoppen) { align-items: flex-start; }
.rij:has(.rij-knoppen) > .avatar { margin-top: 5px; }
.sectie.team { max-width: 720px; }
#teamForm .voetnoot { margin: 10px 4px 14px; }
#teamForm .fout { margin-top: 8px; }
/* het scherm van een link: het e-mailadres staat vast, het wachtwoord kies je zelf */
.velden input[readonly] { color: var(--label-2); }
/* de link na uitnodigen: kopiëren of zelf mailen, de knoppen onder elkaar zoals bij een melding van iOS met drie keuzes */
dialog.link-venster { max-width: 380px; }
dialog.link-venster .link-tekst { margin-top: 12px; }
dialog.link-venster .link-tekst code { display: block; padding: 10px 12px; border-radius: 12px; color: var(--label); font-size: 0.8125rem; line-height: 1.385; }
dialog.link-venster .knoppen.onder-elkaar { flex-direction: column; flex-wrap: nowrap; gap: 8px; }
dialog.link-venster .knop { flex: none; width: 100%; }
dialog.link-venster .voetnoot:empty { display: none; }

/* een vraag of melding, in plaats van het venstertje van de browser */
dialog.vraag { width: calc(100% - 48px); max-width: 320px; margin: auto; padding: 22px 20px 16px; border: 0; border-radius: 30px; color: var(--label); animation: menu-in 0.24s var(--veer); }
dialog.vraag::backdrop { background: var(--waas); }
dialog.vraag h2 { font-size: 1.0625rem; line-height: 1.294; font-weight: 600; }
dialog.vraag p { margin-top: 6px; color: var(--label-2); font-size: 0.9375rem; line-height: 1.333; }
dialog.vraag .knoppen { margin-top: 18px; flex-wrap: nowrap; }
dialog.vraag .knop { flex: 1; padding: 0 12px; }
dialog.vraag .velden { margin-top: 16px; }
dialog.vraag .fout { margin-top: 8px; }
dialog.vraag .fout + .knoppen { margin-top: 10px; }

/* ---- telefoon en smal venster: tabbalk in plaats van zijbalk ---- */
@media (max-width: 899px) {
  .zijbalk, #zijKnop { display: none; }
  .hoofd { margin-left: 0; }
  .tabbalk { display: flex; }
  .werkbalk { height: 52px; padding: 4px 12px; }
  .werkbalk-titel { text-align: center; }
  .werkbalk-links { min-width: 44px; }
  .inhoud { padding: 4px 16px calc(104px + env(safe-area-inset-bottom)); }
  .secties { columns: 1; }
  .product { flex-direction: column; align-items: flex-start; }
  .stijl { grid-template-columns: 1fr; gap: 12px; }
  /* op de telefoon blijft het voorbeeld klein bovenin staan terwijl je door de keuzes loopt */
  .stijl-voorbeeld { position: sticky; top: 52px; z-index: 5; margin: 0 -16px; padding: 6px 0 10px; background: var(--vlak); }
  .stijl-voorbeeld .beeld { width: 124px; margin: 0 auto; border-radius: 18px; }
  .stijl-voorbeeld .voetnoot { display: none; }
  .suite.app-open .tabbalk { display: none; }
  .inhoud.vol { padding: 0; }
  .inhoud.vol .inbed { height: calc(100vh - 52px); height: calc(100dvh - 52px); border-radius: 0; }
  .venster-wacht { inset: 0; border-radius: 0; }
}
@media (min-width: 900px) { #terugKnop { display: none; } }

/* ---- in het venster van een gastheer: alleen de inhoud. De gastheer heeft zelf een balk, een menu
   en een account; de suite toont dus geen zijbalk, tabbalk of accountknop, en op elk scherm dat
   geen begin is een terug-pijl. ---- */
.suite.gast .zijbalk, .suite.gast #zijKnop, .suite.gast .tabbalk, .suite.gast .werkbalk-rechts { display: none; }
.suite.gast .hoofd { margin-left: 0; }
.suite.gast #terugKnop { display: grid; }
.suite.gast .werkbalk-links { min-width: 44px; }
/* Op een beginscherm staat er niets in de balk: dan is hij er niet, en begint de inhoud bovenaan. */
.suite.gast .werkbalk:has(#terugKnop.hidden) { display: none; }
.suite.gast .werkbalk:has(#terugKnop.hidden) + .inhoud { padding-top: 20px; }
.suite.gast .inhoud { padding-bottom: 32px; }
.suite.gast .inhoud.vol { padding: 0; }
.suite.gast .inhoud.vol .inbed, .suite.gast .venster-wacht { border-radius: 0; }
/* zonder rand eromheen loopt het venster door tot onderaan (er bleef een streep van 8 px over op een breed scherm) */
.suite.gast .inhoud.vol .inbed { height: calc(100vh - 52px); height: calc(100dvh - 52px); }
.suite.gast .venster-wacht { inset: 0; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
/* de aanmeldlink in Beheer, en het getal bij Beheer: aanmeldingen die op akkoord wachten */
.aanmeld-link { display: block; margin-top: 8px; padding: 10px 12px; border-radius: 12px; color: var(--label); font-size: 0.8125rem; line-height: 1.385; }
.sectie.aanmeld { max-width: 720px; }
.sectie.aanmeld .rij-tekst span { overflow-wrap: anywhere; } /* een lang e-mailadres zonder streepje loopt af in plaats van weg te vallen */
.teller { flex: none; margin-left: auto; min-width: 22px; padding: 2px 7px; border-radius: 999px; background: var(--rood); color: #fff; font-size: 0.8125rem; line-height: 1.385; font-weight: 600; text-align: center; }
.tab { position: relative; }
.tab .teller { position: absolute; top: 3px; left: calc(50% + 6px); margin: 0; min-width: 18px; padding: 0 5px; font-size: 0.6875rem; line-height: 18px; }
.verborgen { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }