/* BMK Automations / Postdesk - één huisstijl voor alle pagina's.

   Warm en natuurlijk: grijsgroen linnen, papier, mos en mos-zwarte inkt,
   met een heel lichte papierkorrel. Titels in Fraunces (een zachte serif),
   de rest in Schibsted Grotesk. Knoppen zijn altijd mos; de kleur van een
   categorie (--merk) komt alleen terug in accenten: stipjes, de gekozen
   accounts, de verzendbalk. */

:root {
  --papier: #ece8df;          /* linnen: de achtergrond */
  --vlak: #f7f5ef;            /* papier: panelen, zijbalk */
  --vlak-2: #f0ede4;
  --inkt: #1e2419;
  --inkt-2: #545b4d;
  --inkt-3: #858a7b;
  --lijn: #ddd8cb;
  --lijn-sterk: #c7c0ae;
  --mos: #4f6339;
  --mos-zacht: #e2e6d6;
  --knop: var(--mos);
  --knop-tekst: #f7f5ef;
  --merk: #4f6339;            /* wordt per categorie overschreven */
  --goed: #2f7a4b;
  --let-op: #9a6a17;
  --fout: #ad4635;
  --strook: #26301f;          /* donkere balk (verzenden, volgende post) */
  --strook-tekst: #f1eee4;
  --strook-zacht: #b3b9a6;
  --strook-knop: #f1eee4;
  --strook-knop-tekst: #1e2419;
  --serif: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --korrel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .16 0 0 0 0 .19 0 0 0 0 .12 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23k)'/%3E%3C/svg%3E");
  --schaduw: 0 1px 2px rgba(38, 48, 31, 0.05), 0 8px 24px rgba(38, 48, 31, 0.06);
  --r-groot: 18px;
  --r: 12px;
  --r-klein: 8px;
  --zijbalk: 248px;
  /* oude namen, voor pagina's die die nog gebruiken */
  --bg: var(--papier);
  --surface: var(--vlak);
  --surface-2: var(--vlak-2);
  --ink: var(--inkt);
  --ink-2: var(--inkt-2);
  --ink-3: var(--inkt-3);
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --papier: #141812;        /* bosgrond */
    --vlak: #1b2018;
    --vlak-2: #222820;
    --inkt: #e9e6da;
    --inkt-2: #b0b3a4;
    --inkt-3: #7c8173;
    --lijn: #2c3328;
    --lijn-sterk: #3c4436;
    --mos: #a6ba82;
    --mos-zacht: #2a3322;
    --knop: #a6ba82;
    --knop-tekst: #141812;
    --merk: #a6ba82;
    --goed: #78c48f;
    --let-op: #d8ad5e;
    --fout: #e58c7a;
    --strook: #262e21;
    --strook-tekst: #f1eee4;
    --strook-zacht: #a8ae9b;
    --strook-knop: #e9e6da;
    --strook-knop-tekst: #141812;
    --korrel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .92 0 0 0 0 .9 0 0 0 0 .84 0 0 0 .045 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23k)'/%3E%3C/svg%3E");
    --schaduw: 0 1px 2px rgba(0, 0, 0, 0.3), 0 10px 28px rgba(0, 0, 0, 0.25);
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--papier) var(--korrel);
  color: var(--inkt);
  font: 400 14px/1.5 'Schibsted Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }

button { font: inherit; }

:focus-visible { outline: 2px solid var(--mos); outline-offset: 2px; }

h1, h2, h3 { margin: 0; letter-spacing: -0.015em; }

/* Titels in Fraunces: zacht, warm, met optische maten. */
h1, .pagina-titel, .serif {
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-variation-settings: "SOFT" 100;
  font-weight: 500;
  letter-spacing: -0.02em;
}

::selection { background: color-mix(in srgb, var(--mos) 28%, transparent); }

code {
  font-family: ui-monospace, 'Cascadia Code', Consolas, monospace;
  font-size: 0.92em;
  background: var(--vlak-2);
  border: 1px solid var(--lijn);
  border-radius: 5px;
  padding: 0 4px;
}

.tijd, .getal { font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ---------- Schil: zijbalk + hoofdvlak ---------- */

.schil {
  display: grid;
  grid-template-columns: var(--zijbalk) minmax(0, 1fr);
  min-height: 100vh;
  /* zijbalkkleur + randje lopen door tot onderaan, ook op lange pagina's */
  background: linear-gradient(90deg, var(--vlak) calc(var(--zijbalk) - 1px),
              var(--lijn) calc(var(--zijbalk) - 1px), var(--lijn) var(--zijbalk), transparent var(--zijbalk));
}

.zijbalk {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 20px 14px 16px;
  background: var(--vlak);
  border-right: 1px solid var(--lijn);
}

.woordmerk {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 2px 10px;
  font-family: var(--serif);
  font-variation-settings: "SOFT" 100;
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -0.02em;
  text-decoration: none;
}

.woordmerk-vak { display: flex; flex-direction: column; gap: 6px; }

.alle-tools {
  padding: 0 10px 0 42px;
  color: var(--inkt-3);
  font-size: 12.5px;
  font-weight: 600;
  text-decoration: none;
}

.alle-tools:hover { color: var(--inkt); text-decoration: underline; }

/* Een kiezelvorm in inkt, met een stip in de kleur van de categorie
   waarvoor je werkt (mos op de andere pagina's). */
.woordmerk-teken {
  position: relative;
  width: 22px;
  height: 22px;
  border-radius: 50% 50% 50% 7px;
  background: var(--inkt);
  flex: none;
}

.woordmerk-teken::after {
  content: "";
  position: absolute;
  right: -3px;
  bottom: -3px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--categorie, var(--merk));   /* kleur van de categorie waarin je werkt */
  border: 2px solid var(--vlak);
}

.hoofdnav { display: flex; flex-direction: column; gap: 2px; }

.hoofdnav a {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 10px;
  border-radius: var(--r);
  color: var(--inkt-2);
  font-weight: 600;
  text-decoration: none;
}

.hoofdnav a:hover { background: var(--vlak-2); color: var(--inkt); }

.hoofdnav a[aria-current="page"] {
  background: var(--mos-zacht);
  color: var(--inkt);
}

.hoofdnav svg { width: 18px; height: 18px; flex: none; }

.zijbalk-kop {
  padding: 0 10px;
  margin-bottom: 6px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--inkt-3);
}

.merk-lijst { display: flex; flex-direction: column; gap: 2px; }

.merk-knop {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: var(--r);
  background: none;
  color: var(--inkt-2);
  font-weight: 500;
  text-align: left;
  cursor: pointer;
}

.merk-knop:hover { background: var(--vlak-2); color: var(--inkt); }

.merk-knop[aria-selected="true"] {
  background: var(--papier);
  color: var(--inkt);
  font-weight: 650;
}

.merk-stip {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  flex: none;
}

.merk-telling {
  margin-left: auto;
  display: flex;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  color: var(--inkt-3);
  font-variant-numeric: tabular-nums;
}

.teller {
  min-width: 20px;
  padding: 0 6px;
  border-radius: 999px;
  text-align: center;
  background: var(--vlak-2);
  border: 1px solid var(--lijn);
}

.teller.ok { color: var(--goed); }
.teller.open { color: var(--let-op); }

.zijbalk-voet {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px 10px 0;
  border-top: 1px solid var(--lijn);
}

.wie { display: flex; align-items: center; gap: 10px; min-width: 0; }

.avatar {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--inkt);
  color: var(--vlak);
  font-size: 13px;
  font-weight: 700;
  flex: none;
}

.wie-tekst { min-width: 0; line-height: 1.3; }
.wie-tekst strong { display: block; overflow: hidden; text-overflow: ellipsis; }
.wie-tekst small { display: block; font-size: 12px; color: var(--inkt-3); }

.voet-links { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12.5px; }
.voet-links a { color: var(--inkt-3); text-decoration: none; }
.voet-links a:hover { color: var(--inkt); text-decoration: underline; }

.hoofd {
  min-width: 0;
  padding: 30px 36px 140px;
}

/* Losse pagina's (privacy, voorwaarden, koppelen) zonder zijbalk. */
body > .hoofd { padding: 48px 24px 80px; }

.pagina-kop {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px 24px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}

.pagina-titel {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 34px;
  line-height: 1.1;
}

.pagina-titel .merk-stip { width: 13px; height: 13px; border-radius: 50%; }

h1 { font-size: 30px; line-height: 1.15; margin-bottom: 6px; }

.ondertitel {
  max-width: 64ch;
  margin: 6px 0 0;
  color: var(--inkt-2);
}

body > .hoofd .ondertitel { margin-bottom: 24px; }

/* ---------- Bouwstenen ---------- */

.paneel {
  background: var(--vlak);
  border: 1px solid var(--lijn);
  border-radius: var(--r-groot);
  padding: 20px;
}

.paneel + .paneel { margin-top: 16px; }

.paneel-kop {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
  font-size: 15.5px;
  font-weight: 650;
  letter-spacing: -0.01em;
}

.paneel-kop .rechts { margin-left: auto; font-size: 13px; font-weight: 500; color: var(--inkt-3); }

/* Stapnummer: wordt gevuld zodra die stap klaar is. */
.stap-nr {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1.5px solid var(--lijn-sterk);
  color: var(--inkt-2);
  font-size: 12px;
  font-weight: 700;
  flex: none;
  font-variant-numeric: tabular-nums;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}

.klaar .stap-nr, .stap-nr.klaar {
  background: var(--knop);
  border-color: var(--knop);
  color: var(--knop-tekst);
}

/* Oude kopjes (privacy, voorwaarden) */
.sectie { margin-bottom: 28px; }
.sectie-kop { font-size: 15px; font-weight: 650; margin-bottom: 10px; }

/* ---------- Formulieren ---------- */

textarea,
input[type="text"],
input[type="password"],
input[type="email"],
input[type="url"],
input[type="number"],
input[type="search"],
input[type="date"],
input[type="time"],
input[type="datetime-local"],
select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--lijn-sterk);
  border-radius: var(--r);
  background: var(--vlak);
  color: var(--inkt);
  font: inherit;
}

textarea { resize: vertical; min-height: 104px; line-height: 1.55; }

select {
  appearance: none;
  padding-right: 34px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%23848ba2' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m1 1.5 5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  cursor: pointer;
}

textarea:focus, input:focus, select:focus {
  outline: none;
  border-color: var(--merk);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--merk) 22%, transparent);
}

input[type="checkbox"], input[type="radio"] { accent-color: var(--merk); }

label { display: block; }

.veld-label { display: block; font-weight: 600; margin-bottom: 6px; }

.veld-uitleg {
  margin-top: 6px;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--inkt-3);
}

/* ---------- Knoppen ---------- */

.knop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 18px;
  border: 1px solid transparent;
  border-radius: var(--r);
  background: var(--knop);
  color: var(--knop-tekst);
  font-weight: 650;
  line-height: 1.3;
  cursor: pointer;
  transition: filter 0.15s, border-color 0.15s, background 0.15s;
}

.knop:hover:not(:disabled) { filter: brightness(1.1) saturate(1.05); }
.knop:disabled { opacity: 0.45; cursor: not-allowed; }

.knop.stil {
  background: var(--vlak);
  color: var(--inkt);
  border-color: var(--lijn-sterk);
}

.knop.stil:hover:not(:disabled) { filter: none; border-color: var(--inkt-3); }

.knop.klein { padding: 6px 11px; font-size: 13px; border-radius: var(--r-klein); }
.knop.groot { padding: 13px 22px; font-size: 15px; }

/* ---------- Kleine labels ---------- */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 9px;
  border: 1px solid var(--lijn);
  border-radius: 999px;
  background: var(--vlak-2);
  color: var(--inkt-2);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.badge.gekoppeld { color: var(--goed); }
.badge.los { color: var(--fout); }

/* Platformlabel: tekst in de kleur van het platform (geen logo's). */
.platform {
  display: inline-flex;
  align-items: center;
  padding: 2px 9px;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 650;
  white-space: nowrap;
}

.platform-tiktok { color: var(--inkt); }
.platform-instagram { color: #b0247a; }
.platform-youtube { color: #cf2a1e; }

@media (prefers-color-scheme: dark) {
  .platform-instagram { color: #f07ac0; }
  .platform-youtube { color: #ff7a6e; }
}

.handle { color: var(--inkt-3); font-weight: 500; }

.waarschuwing {
  margin-bottom: 18px;
  padding: 12px 14px;
  border: 1px solid color-mix(in srgb, var(--let-op) 35%, var(--lijn));
  border-left: 3px solid var(--let-op);
  border-radius: var(--r);
  background: color-mix(in srgb, var(--let-op) 7%, var(--vlak));
  color: var(--inkt-2);
  font-size: 13.5px;
}

.waarschuwing strong { color: var(--inkt); }

/* ---------- Direct posten ---------- */

.werkvlak {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 380px);
  gap: 18px;
  align-items: start;
  max-width: 1180px;
}

.kolom { min-width: 0; }

.dropzone {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 170px;
  padding: 24px;
  border: 1.5px dashed var(--lijn-sterk);
  border-radius: var(--r-groot);
  background: var(--vlak-2);
  color: var(--inkt-2);
  text-align: center;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}

.dropzone strong { color: var(--inkt); font-size: 15px; font-weight: 650; }

.dropzone:hover, .dropzone.over, .dropzone:focus-within {
  border-color: var(--merk);
  background: color-mix(in srgb, var(--merk) 5%, var(--vlak));
  color: var(--inkt);
}

/* Het echte bestandsveld blijft bereikbaar met het toetsenbord. */
.dropzone input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.video-vak {
  display: none;
  gap: 16px;
  align-items: flex-start;
}

.video-vak.zichtbaar { display: flex; }

.video-vak video, .video-vak img {
  width: 132px;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  border-radius: var(--r);
  background: #000;
  flex: none;
}

.video-info { flex: 1; min-width: 0; padding-top: 4px; }

.video-naam { font-weight: 650; word-break: break-all; }

.account-rij {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 11px 12px;
  border: 1px solid var(--lijn);
  border-radius: var(--r);
  background: var(--vlak);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}

.account-rij + .account-rij { margin-top: 8px; }
.account-rij:hover { border-color: var(--lijn-sterk); }

.account-rij.aan {
  border-color: var(--merk);
  background: color-mix(in srgb, var(--merk) 6%, var(--vlak));
}

.account-rij.uit { cursor: not-allowed; }
.account-rij.uit .account-naam { color: var(--inkt-3); }

.account-rij input { width: 18px; height: 18px; margin: 0; }

.account-naam { display: block; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-sub { display: block; font-size: 12px; color: var(--inkt-3); }
.account-sub.los { color: var(--fout); }
.account-sub a { color: inherit; font-weight: 650; }

.instellingen { display: none; }
.instellingen.zichtbaar { display: block; }

.schakelaars { display: flex; flex-wrap: wrap; gap: 10px 18px; margin-top: 14px; }

.schakelaar {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--inkt-2);
  cursor: pointer;
}

.schakelaar input { margin: 0; width: 16px; height: 16px; }

.keuzes { display: flex; gap: 6px; flex-wrap: wrap; }

/* Keuzerondjes als knoppen (Short/Video, Post/Reel). */
.keuze { position: relative; cursor: pointer; }
.keuze input { position: absolute; opacity: 0; pointer-events: none; }

.keuze span {
  display: inline-block;
  padding: 7px 13px;
  border: 1px solid var(--lijn-sterk);
  border-radius: 999px;
  color: var(--inkt-2);
  font-size: 13px;
  font-weight: 600;
}

.keuze input:checked + span {
  border-color: var(--merk);
  background: color-mix(in srgb, var(--merk) 10%, var(--vlak));
  color: var(--inkt);
}

.keuze input:focus-visible + span { outline: 2px solid var(--merk); outline-offset: 2px; }

.scheiding { border: 0; border-top: 1px solid var(--lijn); margin: 16px 0; }

.creator-info {
  display: none;
  overflow-wrap: anywhere;
  margin-bottom: 14px;
  padding: 10px 12px;
  border-radius: var(--r);
  background: var(--vlak-2);
  color: var(--inkt-2);
  font-size: 13px;
}

.creator-info.zichtbaar { display: block; }

/* De verzendbalk: altijd in beeld, met waar je post naartoe gaat. */
.verzendbalk {
  position: sticky;
  bottom: 16px;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 18px;
  max-width: 1180px;
  margin-top: 22px;
  padding: 12px 12px 12px 20px;
  border-radius: var(--r-groot);
  background: var(--strook);
  color: var(--strook-tekst);
  box-shadow: 0 14px 36px rgba(26, 33, 21, 0.3);
}

.verzendbalk-info { display: flex; align-items: center; gap: 14px; min-width: 0; flex: 1; flex-wrap: wrap; }

.verzendbalk-label { font-size: 13px; color: var(--strook-zacht); white-space: nowrap; }
.verzendbalk.leeg .verzendbalk-label, .verzendbalk.leeg .bestemmingen { display: none; }

.bestemmingen { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }

.bestemming {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 11px 5px 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.09);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}

.bestemming i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--merk);
  flex: none;
}

.bestemming small { color: var(--strook-zacht); font-weight: 500; font-size: 12.5px; }

.verzendbalk-mist { color: var(--strook-zacht); font-size: 13.5px; }

.verzendbalk .knop { flex: none; background: var(--strook-knop); color: var(--strook-knop-tekst); }
.verzendbalk .knop:disabled { opacity: 0.55; background: rgba(255, 255, 255, 0.16); color: var(--strook-tekst); }

.resultaat-rij {
  display: flex;
  gap: 12px;
  align-items: baseline;
  flex-wrap: wrap;
  padding: 10px 0;
  border-bottom: 1px solid var(--lijn);
  font-size: 13.5px;
}

.resultaat-rij:last-child { border-bottom: 0; }
.resultaat-rij .uitleg { margin-left: auto; color: var(--inkt-3); word-break: break-word; }

.ok { color: var(--goed); font-weight: 650; }
.nok { color: var(--fout); font-weight: 650; }

/* ---------- Venster: controleren voor het posten ---------- */

.overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 20;
  overflow-y: auto;
  padding: 24px;
  background: rgba(20, 24, 18, 0.5);
  backdrop-filter: blur(3px);
}

.overlay.zichtbaar { display: block; }

.dialoog {
  max-width: 560px;
  margin: 32px auto;
  padding: 24px;
  border-radius: 20px;
  background: var(--vlak);
  box-shadow: 0 24px 60px rgba(20, 24, 18, 0.35);
}

.dialoog-breed { max-width: 860px; }

.dialoog h2 { font-family: var(--serif); font-variation-settings: "SOFT" 100; font-size: 24px; font-weight: 500; }

.dialoog-knoppen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 22px;
}

.preview-tabs {
  display: flex;
  gap: 6px;
  margin: 16px 0;
  padding-bottom: 2px;
  overflow-x: auto;
}

.preview-tab {
  display: flex;
  align-items: center;
  gap: 7px;
  flex: none;
  padding: 7px 13px;
  border: 1px solid var(--lijn-sterk);
  border-radius: 999px;
  background: var(--vlak);
  color: var(--inkt-2);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.preview-tab[aria-selected="true"] {
  border-color: var(--merk);
  background: color-mix(in srgb, var(--merk) 9%, var(--vlak));
  color: var(--inkt);
}

.preview-vak {
  display: grid;
  grid-template-columns: 270px minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}

.preview-kop {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
  font-weight: 650;
}

.preview-bewerk label { font-weight: 600; }
.preview-bewerk textarea { margin-top: 6px; }

.preview-acties { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }

.voorbeeld {
  margin-bottom: 10px;
  padding: 13px;
  border-radius: var(--r);
  background: var(--vlak-2);
}

.voorbeeld-tekst { white-space: pre-wrap; font-size: 13px; color: var(--inkt-2); }

/* De telefoon: altijd donker, zoals de apps zelf. */
.telefoon {
  width: 270px;
  overflow: hidden;
  border: 7px solid #0a0b10;
  border-radius: 28px;
  background: #000;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.32);
}

.tel {
  position: relative;
  aspect-ratio: 9 / 16;
  color: #fff;
  font-size: 12.5px;
  line-height: 1.4;
}

.tel-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #111;
}

.tel-onder {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 40px 54px 14px 12px;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.75));
}

.tel-naam { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; font-weight: 700; }

.tel-abonneer {
  padding: 0 6px;
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
}

.tel-tekst, .tel-ig-tekst { white-space: pre-wrap; word-break: break-word; cursor: pointer; }
.tel-tekst .lang, .tel-ig-tekst .lang { display: none; }
.tel-tekst.open .lang, .tel-ig-tekst.open .lang { display: inline; }
.tel-tekst.open .kort, .tel-ig-tekst.open .kort { display: none; }
.tel-tekst .kort, .tel-ig-tekst .kort { white-space: normal; }
.tel-tekst.open { max-height: 260px; overflow-y: auto; }
.tel-meer { opacity: 0.65; }

.tel-zijknoppen {
  position: absolute;
  right: 8px;
  bottom: 80px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  font-size: 20px;
  text-align: center;
}

.tel-avatar {
  display: inline-block;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--merk);
  flex: none;
}

.tel-insta {
  aspect-ratio: auto;
  min-height: 420px;
  background: #000;
  color: #f5f5f5;
  font-size: 12.5px;
  line-height: 1.4;
}

.tel-ig-kop { display: flex; align-items: center; gap: 8px; padding: 10px; }

.tel-ig-media {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  background: #111;
}

.tel-ig-acties { padding: 8px 10px 4px; font-size: 17px; }
.tel-ig-tekst { padding: 0 10px 14px; }

.tel-yt-media {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  margin-top: 30px;
  object-fit: cover;
  background: #111;
}

.tel-yt-info { padding: 10px; }
.tel-yt-titel { margin-bottom: 6px; font-size: 14px; font-weight: 700; }
.tel-yt-kanaal { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; color: #aaa; }

/* ---------- Gepland (resultaten bij een post) ---------- */

.gepland-detail {
  margin-top: 4px;
  font-size: 12.5px;
  color: var(--inkt-2);
  word-break: break-word;
}

/* ---------- Kleinere schermen ---------- */

@media (max-width: 1100px) {
  .werkvlak { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 860px) {
  .schil { grid-template-columns: minmax(0, 1fr); }

  .zijbalk {
    position: static;
    height: auto;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-right: 0;
    border-bottom: 1px solid var(--lijn);
    overflow: visible;
  }

  .woordmerk { padding: 2px 0; font-size: 17px; }
  .woordmerk-vak { flex-direction: row; align-items: center; gap: 12px; }
  .alle-tools { padding: 0; }

  .zijbalk-voet {
    order: 2;
    margin: 0 0 0 auto;
    padding: 0;
    border: 0;
    flex-direction: row;
    align-items: center;
    gap: 10px;
  }

  .wie-tekst small, .voet-links a:not(.uitloggen) { display: none; }

  /* Het menu heeft tot vijf items (Direct, Inplannen, Accounts, Instellingen,
     Dashboard). Icoon boven de naam, elk item zo breed als zijn tekst en de
     rest van de ruimte eerlijk verdeeld. Past het op een heel smal scherm toch
     niet, dan schuift de balk zijwaarts in plaats van letters af te knippen. */
  .hoofdnav {
    order: 3;
    width: 100%;
    flex-direction: row;
    justify-content: space-between;
    gap: 2px;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .hoofdnav::-webkit-scrollbar { display: none; }

  .hoofdnav a {
    flex: 1 0 auto;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
    padding: 7px 7px 6px;
    font-size: 11.5px;
    line-height: 1.15;
    letter-spacing: -0.01em;
    white-space: nowrap;
  }

  .hoofdnav svg { width: 20px; height: 20px; }
  .nt-meer { display: none; }
  .hoofdnav a[aria-current="page"] { box-shadow: none; }

  .zijbalk-groep { order: 4; width: 100%; }
  .zijbalk-kop { display: none; }

  .merk-lijst { flex-direction: row; gap: 6px; overflow-x: auto; padding-bottom: 2px; }
  .merk-knop { width: auto; flex: none; border: 1px solid var(--lijn); white-space: nowrap; }

  .hoofd { padding: 20px 16px 150px; }
  .pagina-titel { font-size: 23px; }
  .paneel { padding: 16px; }

  .schil { background: none; }

  .verzendbalk { bottom: 10px; flex-wrap: wrap; gap: 8px; padding: 10px 12px; }
  .verzendbalk-info { gap: 6px 10px; }
  .bestemmingen { flex-wrap: nowrap; overflow-x: auto; max-width: 100%; }
  .verzendbalk-mist { font-size: 12.5px; }
  .verzendbalk .knop { width: 100%; padding: 11px 16px; }

  .preview-vak { grid-template-columns: minmax(0, 1fr); }
  .telefoon { margin: 0 auto; }
  .overlay { padding: 10px; }
  .dialoog { margin: 10px auto; padding: 18px; }
}

@media (max-width: 480px) {
  .hoofdnav a { padding: 7px 4px 6px; font-size: 11px; }
}

/* Heel smalle telefoons: de balk bovenaan moet op één regel blijven, dus het
   rondje met je beginletter vervalt (je naam en Uitloggen blijven staan). */
@media (max-width: 380px) {
  .zijbalk-voet .avatar { display: none; }
  .hoofdnav a { font-size: 10.5px; letter-spacing: -0.02em; }
}

/* Echte codes (bijv. de koppelcode na het inloggen bij TikTok/Google). */
.mono { font-family: ui-monospace, 'Cascadia Code', Consolas, monospace; }

/* TikTok: reclame melden en de verplichte verklaring (eisen van TikTok). */
.tt-reclame {
  margin: 10px 0 0;
  padding: 12px 14px;
  border: 1px solid var(--lijn);
  border-radius: var(--r);
  background: var(--vlak-2);
}

.tt-reclame[hidden], .tt-privacy-melding[hidden], .tt-verklaring[hidden] { display: none; }
.tt-reclame .schakelaar + .veld-uitleg { margin: 2px 0 10px 24px; }
.tt-reclame small { color: var(--inkt-3); font-weight: 400; }
.tt-label-melding:not(:empty) { margin-top: 4px; font-size: 13px; font-weight: 600; color: var(--inkt); }
.tt-privacy-melding { color: var(--let-op); }

.tt-verklaring {
  margin: 18px 0 0;
  font-size: 13px;
  color: var(--inkt-2);
}

.tt-verklaring a { color: inherit; font-weight: 600; }

/* ---------- Telefoon: invoer en tikdoelen ---------- */

@media (max-width: 860px) {
  /* 16px of groter: anders zoomt een iPhone in zodra je in een veld tikt. */
  input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]),
  select, textarea { font-size: 16px !important; }
}

/* Aanraakschermen: alles wat je aantikt is minstens zo groot als een vingertop. */
@media (pointer: coarse), (max-width: 860px) {
  .knop { min-height: 44px; min-width: 44px; }
  .knop.klein { min-height: 40px; min-width: 40px; padding: 8px 13px; }
  input[type="checkbox"], input[type="radio"] { width: 20px; height: 20px; flex: none; }
  .hoofdnav a { min-height: 40px; }
  .woordmerk, .alle-tools, .uitloggen, .voet-links a { display: inline-flex; align-items: center; min-height: 40px; }
  .keuze span { min-height: 38px; display: inline-flex; align-items: center; justify-content: center; }
  .link-knop { display: inline-flex; align-items: center; min-height: 40px; }
  details > summary { padding: 8px 0; }
}

/* Rondkijk-modus: goedgekeurde klant die nog niet heeft betaald. */
.rondkijk-balk { margin: 0 0 18px; padding: 12px 16px; border: 1px solid color-mix(in srgb, var(--let-op) 45%, var(--lijn)); border-radius: var(--r); background: color-mix(in srgb, var(--let-op) 12%, var(--vlak)); color: var(--inkt); font-size: 14px; line-height: 1.5; }
.rondkijk-balk strong { color: var(--let-op); }

/* Taalknop onderaan het menu */
.taal-keuze { display: inline-flex; gap: 2px; padding: 2px; border: 1px solid var(--lijn); border-radius: 999px; margin: 0 0 8px; }
.taal-keuze button { padding: 3px 9px; border: 0; border-radius: 999px; background: none; color: var(--inkt-3); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; }
.taal-keuze button[aria-pressed="true"] { background: var(--inkt); color: var(--papier); }
@media (max-width: 860px) { .taal-keuze { margin: 0; } }