/* ==============================================================
   StartGezondtest — sgt-style.css
   Design naar de screenshots van testjevalrisico.nl:
   roze testschermen, witte afgeronde antwoordkaarten met radio,
   inkt-donkere pil-knoppen, voortgangslijn onderin, paars
   resultaat-panel, witte pil-knoppen op donker.
   ============================================================== */

.sgt-root {
  /* Palet van StartGezond: groen als basis, lime als accent */
  --sgt-roze:        #DDF3E5;   /* zacht mintvlak (heette eerder roze) */
  --sgt-roze-diep:   #C3E7D2;
  --sgt-paars:       #1E8259;   /* hero en panelen */
  --sgt-paars-diep:  #176B4D;   /* primair groen */
  --sgt-paars-vlak:  #229163;   /* icooncirkel-rand */
  --sgt-ink:         #183C32;   /* donkere knoppen en koppen */
  --sgt-ink-diep:    #0D382B;   /* diepste groen, voor hover */
  --sgt-geel:        #C7E84A;   /* lime accent, spaarzaam gebruiken */
  --sgt-wit:         #FFFFFF;
  --sgt-creme:       #F1F8F3;   /* infoblokken en rustige vlakken */
  --sgt-tekst:       #183C32;
  --sgt-tekst-licht: #58736B;

  /* Betekeniskleuren voor de uitkomsten. Bewust niet lime: naast het
     groen van "gaat goed" zou dat niet te onderscheiden zijn. */
  --sgt-goed:     #3FA46E;
  --sgt-aandacht: #F0B429;
  --sgt-extra:    #E08A8A;

  /* Neemt de letters van het thema over als die er zijn */
  --sgt-font-kop:   var(--sg-font-kop, 'Poppins', 'Fira Sans', -apple-system, 'Segoe UI', sans-serif);
  --sgt-font-tekst: var(--sg-font-tekst, 'Fira Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
  font-family: var(--sgt-font-tekst);
  color: var(--sgt-tekst);
  font-size: 17px;
  line-height: 1.6;
}
.sgt-root * { box-sizing: border-box; }
.sgt-root button { font-family: inherit; font-size: inherit; cursor: pointer; }

/* ---------------- Scherm: roze vlak, volledige breedte binnen container ---------------- */
.sgt-scherm {
  /* Beeldvullend roze: breekt uit de pagina-container */
  background: var(--sgt-roze);
  /* 100vw telt de schuifbalk mee; Safari doet dat anders dan Chrome.
     --sgt-sb bevat de echte breedte van de schuifbalk (zie sgt-app.js),
     en is 0 zodra die er niet is. */
  width: calc(100vw - var(--sgt-sb, 0px));
  margin-left: calc(50% - 50vw + var(--sgt-sb, 0px) / 2);
  margin-right: calc(50% - 50vw + var(--sgt-sb, 0px) / 2);
  border-radius: 0;
  padding: clamp(36px, 5vw, 64px) clamp(22px, 6vw, 80px);
  display: flex;
  flex-direction: column;

  /* Geen vaste hoogte. Het blok is precies zo hoog als de inhoud, met
     gelijke ruimte erboven en eronder. Er is dus geen vrije ruimte
     waarin iets kan verschuiven, in welke browser dan ook. */
  min-height: auto;
  /* Geen negatieve marges meer. Die moesten het roze laten aansluiten op
     de kop en de voet van het thema, maar de ruimte werd per pagina
     gemeten en dat pakte per browser anders uit. Het thema haalt op
     app-pagina's zelf al de padding weg, dus dit is overbodig geworden.
     Wil je het toch terug: zet --sgt-boven en --sgt-onder in je CSS. */
  margin-top: 0;
  margin-bottom: 0;
}
.sgt-scherm > * { max-width: 1160px; margin-left: auto; margin-right: auto; width: 100%; }
.sgt-kop {
  flex: 0 0 auto;
  font-weight: 700;
  color: var(--sgt-ink);
  margin-bottom: 28px;
}

/* Vraag: links titel + uitleg, rechts antwoordkaarten */
.sgt-vraagblok {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(24px, 5vw, 64px);
  flex: 1 1 auto;
  align-items: start;
  align-content: start;
  padding-bottom: clamp(28px, 4vh, 48px);
}

/* De balk hoort onderaan; de rest vult de ruimte daarboven. Safari laat
   een grid met flex-basis 0 krimpen tot de inhoud, dus we rekken hier
   niet met flex maar zetten de balk vast met een automatische marge. */
.sgt-balk { margin-top: auto; }
.sgt-vraagtitel {
  font-family: var(--sgt-font-kop);
  font-size: clamp(1.6rem, 3.4vw, 2.4rem);
  font-weight: 800;
  line-height: 1.2;
  color: var(--sgt-ink);
  margin: 0 0 16px;
}
.sgt-uitleg { color: var(--sgt-tekst); margin: 0; max-width: 30em; }

/* Antwoordkaart: wit, afgerond, radio-cirkel rechts */
.sgt-rechts { display: flex; flex-direction: column; gap: 14px; }
.sgt-rechts--midden { justify-content: center; align-items: flex-start; }
/* De grote knop. Regelde eerst alleen de maat, waardoor hij zonder
   sgt-knop-donker ernaast als een grijze systeemknop verscheen. Nu
   staat de huisstijl erin, zodat hij overal klopt — ook als button. */
.sgt-knop-groot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--sgt-font-kop);
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.25;
  padding: 18px 36px;
  border: none;
  border-radius: 999px;
  background: var(--sgt-ink);
  color: #fff !important;
  text-decoration: none !important;
  cursor: pointer;
  transition: background .15s ease, transform .15s ease;
}
.sgt-knop-groot:hover { background: var(--sgt-ink-diep); transform: translateY(-2px); }
.sgt-knop-groot:disabled { opacity: .5; cursor: not-allowed; transform: none; }
/* Staat sgt-knop-donker er al naast, dan verandert er niets. */
.sgt-antwoord {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  background: var(--sgt-wit);
  border: 2px solid var(--sgt-wit);
  border-radius: 16px;
  padding: 20px 22px;
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--sgt-ink);
  text-align: left;
  transition: border-color .12s ease, transform .12s ease;
}
.sgt-antwoord:hover { border-color: var(--sgt-ink); }
.sgt-radio {
  flex: 0 0 auto;
  width: 24px; height: 24px;
  border: 2px solid var(--sgt-ink);
  border-radius: 50%;
  position: relative;
}
.sgt-antwoord--gekozen { border-color: var(--sgt-ink); }
.sgt-antwoord--gekozen .sgt-radio::after {
  content: '';
  position: absolute; inset: 4px;
  background: var(--sgt-ink);
  border-radius: 50%;
}

/* Onderbalk: voortgangslijn + Terug / Volgende */
/* De balk loopt over de volle breedte, maar de knoppen erin moeten
   precies onder de inhoud uitkomen. Daarom hier dezelfde zijmarge als
   het scherm zelf, en binnenin alleen nog verticale ruimte. */
.sgt-balk {
  max-width: none !important;
  margin: 0 calc(-1 * clamp(22px, 6vw, 80px)) !important;
  padding: 0 clamp(22px, 6vw, 80px);
}
.sgt-balk-knoppen { max-width: 1160px; margin: 0 auto; }
.sgt-voortgang {
  height: 5px;
  background: rgba(255,255,255,0.45);
}
.sgt-voortgang span {
  display: block; height: 100%;
  background: var(--sgt-ink);
  transition: width .3s ease;
}
.sgt-balk-knoppen {
  display: flex; justify-content: space-between; align-items: center;
  padding: 20px 0 26px;
}
.sgt-terug {
  background: none; border: none;
  color: var(--sgt-ink); font-weight: 600;
  text-decoration: underline; text-underline-offset: 4px;
  padding: 10px 0;
}
/* Alle drie de knopstijlen zijn flexvakken met gecentreerde inhoud.
   Staan ze naast elkaar in een rij, dan rekken ze tot de hoogte van de
   hoogste; bij inline-block blijft de tekst dan bovenin hangen. */
.sgt-knop-donker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .15s ease, transform .15s ease, box-shadow .15s ease;
  font-family: var(--sgt-font-kop);
  background: var(--sgt-ink);
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 16px 30px;
  font-weight: 700;
  font-size: 1rem;
}
.sgt-knop-donker:hover { background: #0D382B; }
.sgt-knop-donker:disabled { opacity: .45; cursor: not-allowed; }

/* ---------------- Resultaat ---------------- */
.sgt-scherm--resultaat { display: block; padding-bottom: 40px; min-height: 0; }
.sgt-resultaat-acties {
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 12px; margin-bottom: 24px;
}
/* Knoppengroep: zelfde breedte, nette uitlijning */
.sgt-resultaat-knoppen {
  display: flex; gap: 10px; flex-wrap: wrap;
}
.sgt-resultaat-knoppen .sgt-knop-donker {
  flex: 1 1 auto;
  white-space: nowrap;
  text-align: center;
}
.sgt-resultaat-hero { text-align: center; max-width: 42em !important; margin: 0 auto 20px !important; }
.sgt-resultaat-icoon {
  /* Witte cirkel: icoontjes duidelijk zichtbaar */
  width: 84px; height: 84px;
  margin: 0 auto 16px;
  background: #fff;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 40px;
  box-shadow: 0 2px 8px rgba(24,60,50,0.15);
}
.sgt-resultaat-hero h2 {
  font-family: var(--sgt-font-kop);
  font-size: clamp(1.7rem, 4vw, 2.5rem);
  font-weight: 800; color: var(--sgt-ink);
  margin: 0 0 14px;
}

/* "Uw eerste stap" — gele accentkaart */
.sgt-eerstestap {
  background: #fff;
  border-left: 6px solid var(--sgt-geel);
  border-radius: 14px;
  padding: 16px 22px;
  margin-bottom: 18px !important;
}
.sgt-eerstestap-label {
  display: inline-block;
  background: var(--sgt-geel); color: var(--sgt-ink);
  font-size: .8rem; font-weight: 700;
  border-radius: 999px; padding: 4px 12px;
  margin-bottom: 6px;
}
.sgt-eerstestap p { margin: 4px 0 0; font-weight: 500; }

/* Paars panel met dashboard-tegels */
.sgt-panel {
  background: var(--sgt-paars-diep);
  border-radius: 20px;
  padding: 24px clamp(16px, 3vw, 32px);
  color: #fff;
  text-align: center;
  margin-bottom: 18px !important;
}
.sgt-panel-label {
  display: inline-block;
  background: #fff; color: var(--sgt-ink);
  font-size: .85rem; font-weight: 700;
  border-radius: 999px;
  padding: 6px 16px;
  margin-bottom: 16px;
}
/* Dashboard-tegels: wit met witte icooncirkel, compact */
.sgt-tegels {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 10px;
  text-align: left;
}
.sgt-tegel {
  background: #fff;
  border: 2px solid #fff;
  border-radius: 14px;
  padding: 12px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
  cursor: pointer;
  transition: transform .12s ease, border-color .12s ease;
}
.sgt-tegel:hover { transform: translateY(-2px); }
.sgt-tegel--actief { border-color: var(--sgt-geel); }
.sgt-tegel-icoon {
  width: 40px; height: 40px;
  background: var(--sgt-paars-diep);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.sgt-icoon { display: block; }
.sgt-tegel-naam { font-weight: 700; color: var(--sgt-ink); font-size: .92rem; line-height: 1.25; }
.sgt-badge {
  font-size: .78rem; font-weight: 700;
  border-radius: 999px; padding: 4px 12px;
  white-space: nowrap;
}
.sgt-badge--goed     { background: #fff; color: var(--sgt-paars-diep); }
.sgt-badge--aandacht { background: var(--sgt-aandacht); color: var(--sgt-ink); }
.sgt-badge--extra    { background: var(--sgt-ink); color: #fff; }

/* Detail-sectie: één tegelijk zichtbaar (dashboard) */
.sgt-details { margin-bottom: 8px; }
.sgt-detail {
  background: #fff;
  border-radius: 20px;
  padding: 24px clamp(18px, 3vw, 32px);
  margin-bottom: 14px !important;
}
.sgt-detail h3 {
  font-family: var(--sgt-font-kop);
  display: flex; align-items: center; gap: 10px;
  margin: 0 0 8px; font-size: 1.25rem; font-weight: 800; color: var(--sgt-ink);
}
.sgt-detail-icoon {
  width: 44px; height: 44px; flex: 0 0 auto;
  background: var(--sgt-paars-diep);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.sgt-detail-advies { margin: 4px 0 16px; max-width: 46em; }
.sgt-detail h4 { margin: 0 0 10px; font-size: .98rem; color: var(--sgt-ink); }
.sgt-actie-huisarts {
  background: var(--sgt-paars);
  color: #fff;
  border-radius: 14px;
  padding: 16px 18px;
  margin-top: 14px;
  max-width: 100%;
  overflow: hidden;      /* niets steekt buiten de kaart uit */
}
.sgt-actie-huisarts * { max-width: 100%; }
.sgt-actie-huisarts details { margin-top: 10px; }
.sgt-actie-huisarts summary {
  cursor: pointer; background: #fff; color: var(--sgt-ink);
  font-weight: 700; border-radius: 999px; padding: 8px 18px; display: inline-block;
}
.sgt-actie-huisarts ul {
  list-style: none; margin: 12px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px;
}
.sgt-actie-huisarts li { background: rgba(255,255,255,0.12); border-radius: 10px; padding: 10px 12px; font-size: .9rem; }
.sgt-actie-wor {
  background: var(--sgt-creme);
  border-radius: 12px;
  padding: 12px 16px;
  margin: 12px 0 0;
  font-size: .95rem;
}

/* (oude kans-stijlen hieronder blijven voor compatibiliteit) */
.sgt-kans {
  background: #fff;
  border-radius: 20px;
  padding: 28px clamp(18px, 3vw, 36px);
  margin-bottom: 20px;
}
.sgt-kans-kop { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.sgt-kans-kop h3 { margin: 0; font-size: 1.3rem; font-weight: 800; color: var(--sgt-ink); flex: 1; }
.sgt-kans-icoon {
  width: 48px; height: 48px; flex: 0 0 auto;
  background: var(--sgt-ink); border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: 22px;
}
.sgt-kans-advies { margin: 6px 0 18px; max-width: 46em; }
.sgt-kans h4 { margin: 0 0 12px; font-size: 1rem; color: var(--sgt-ink); }

.sgt-aanbod { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.sgt-aanbod-kaart {
  display: block; position: relative;
  background: var(--sgt-creme);
  border-radius: 14px;
  padding: 16px 40px 16px 16px;
  color: var(--sgt-tekst);
  text-decoration: none;
  font-size: .95rem;
  line-height: 1.5;
  transition: transform .12s ease;
}
a.sgt-aanbod-kaart:hover { transform: translateY(-2px); }
.sgt-aanbod-kaart strong { color: var(--sgt-ink); }
.sgt-aanbod-kaart p { margin: 4px 0 0; }
.sgt-aanbod-pijl {
  position: absolute; right: 14px; top: 50%;
  transform: translateY(-50%);
  font-size: 1.4rem; font-weight: 700; color: var(--sgt-ink);
}
.sgt-aanbod-leeg {
  background: var(--sgt-creme);
  border-radius: 14px; padding: 16px;
  margin: 0; font-size: .95rem;
}

/* Huisarts-blok */
.sgt-huisarts {
  background: var(--sgt-paars);
  color: #fff;
  border-radius: 20px;
  padding: 28px clamp(18px, 3vw, 36px);
  margin-bottom: 20px;
}
.sgt-huisarts h3 { margin: 0 0 10px; font-size: 1.3rem; font-weight: 800; }
.sgt-huisarts-lijst { margin-top: 14px; }
.sgt-huisarts-lijst summary {
  cursor: pointer;
  background: #fff; color: var(--sgt-ink);
  font-weight: 700;
  border-radius: 999px;
  padding: 12px 24px;
  display: inline-block;
}
.sgt-huisarts-lijst ul {
  list-style: none;
  margin: 16px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px;
}
.sgt-huisarts-lijst li {
  background: rgba(255,255,255,0.1);
  border-radius: 12px;
  padding: 12px 14px;
  font-size: .92rem;
}

.sgt-disclaimer {
  text-align: center;
  font-size: .9rem;
  color: var(--sgt-ink);
  max-width: 44em;
  margin: 8px auto 0;
  padding-bottom: 8px;
}

/* ---------------- Mobiel ---------------- */
@media (max-width: 760px) {
  .sgt-vraagblok { grid-template-columns: 1fr; }
  .sgt-scherm { min-height: 0; }

  /* Acties onder elkaar gecentreerd, knoppen even breed */
  .sgt-resultaat-acties {
    flex-direction: column; align-items: stretch; text-align: center;
  }
  .sgt-resultaat-knoppen { width: 100%; }
  .sgt-resultaat-knoppen .sgt-knop-donker {
    flex: 1 1 0; min-width: 0;
    padding-left: 14px; padding-right: 14px;
    font-size: .95rem;
  }
  /* Dropdown en knop vullen de volle breedte */
  .sgt-huisarts-select, .sgt-actie-huisarts .sgt-knop-wit { flex: 1 1 100%; width: 100%; }
  .sgt-mail-rij input, .sgt-mail-rij .sgt-knop-donker { flex: 1 1 100%; width: 100%; }
}

/* Heel smalle schermen: knoppen onder elkaar */
@media (max-width: 380px) {
  .sgt-resultaat-knoppen { flex-direction: column; }
}

/* ---------------- Print = "Bewaar als PDF" ---------------- */
@media print {
  body * { visibility: hidden; }
  .sgt-root, .sgt-root * { visibility: visible; }
  .sgt-root { position: absolute; left: 0; top: 0; width: 100%; }
  .sgt-niet-printen { display: none !important; }
  .sgt-detail[hidden] { display: block !important; }
  .sgt-scherm { border-radius: 0; background: #fff; }
  .sgt-panel, .sgt-huisarts { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ==============================================================
   v2.2 — mailpaneel, huisarts-dropdown, professionalformulier
   ============================================================== */

/* --- Mailvenster: verschijnt midden in beeld --- */
.sgt-overlay {
  position: fixed;
  inset: 0;
  background: rgba(24,60,50,0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 9999;

  max-width: none !important;
  margin: 0 !important;
}
.sgt-mailpaneel {
  background: #fff;
  border-radius: 18px;
  padding: 22px 24px;
  width: 100%;
  max-width: 460px;
  box-shadow: 0 12px 40px rgba(24,60,50,0.35);
}
.sgt-mailpaneel-kop {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 4px;
}
.sgt-mailpaneel-kop strong { font-size: 1.15rem; color: var(--sgt-ink); font-weight: 800; }
.sgt-mail-sluit {
  background: none; border: none; font-size: 1.1rem;
  color: var(--sgt-tekst); cursor: pointer; padding: 4px 8px; line-height: 1;
}
.sgt-mail-uitleg { font-size: .95rem; color: #58736B; margin: 0 0 12px; }
.sgt-mail-rij { display: flex; gap: 10px; flex-wrap: wrap; }
.sgt-mailpaneel .sgt-mail-rij input { flex: 1 1 100%; }
.sgt-mailpaneel .sgt-mail-rij .sgt-knop-donker { flex: 1 1 100%; }
.sgt-mail-rij input {
  flex: 1 1 240px;
  padding: 14px 16px;
  border: 2px solid #CFE6D8;
  border-radius: 12px;
  font-size: 1rem;
  font-family: inherit;
  color: var(--sgt-ink);
}
.sgt-mail-rij input:focus { outline: none; border-color: var(--sgt-ink); }
.sgt-mail-ok {
  margin: 0 0 14px;
  color: #176B4D;
}
.sgt-mail-ok strong {
  display: block;
  font-size: 1.05rem;
  font-weight: 800;
  margin-bottom: 3px;
}
.sgt-mail-ok span {
  display: block;
  font-size: .92rem;
  font-weight: 400;
  color: #58736B;
  line-height: 1.5;
}
.sgt-mail-fout {
  color: #B02020;
  font-size: .92rem;
  line-height: 1.5;
  font-weight: 500;
  background: #FDECEC;
  border-radius: 10px;
  padding: 10px 13px;
  margin: 0 0 12px;
}

/* --- Huisartsroute --- */
.sgt-huisarts-label {
  display: block; font-weight: 600; font-size: .92rem;
  margin: 12px 0 6px;
}
.sgt-huisarts-rij {
  display: flex; gap: 10px; flex-wrap: wrap;
  max-width: 100%;
}
.sgt-huisarts-select {
  flex: 1 1 240px;
  min-width: 0;            /* voorkomt uitbreken van de flexbox */
  max-width: 100%;
  padding: 13px 40px 13px 15px;
  border: 2px solid #fff;
  border-radius: 12px;
  font-size: 1rem;
  font-family: inherit;
  background: #fff;
  color: var(--sgt-ink);
  /* Eigen pijl, zodat de select op alle browsers gelijk oogt */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%23183C32' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 15px center;
  text-overflow: ellipsis;
}
.sgt-huisarts-select:focus { outline: 3px solid var(--sgt-geel); }
.sgt-knop-wit {
  background: #fff; color: var(--sgt-ink);
  border: none; border-radius: 999px;
  padding: 13px 24px; font-weight: 700; font-size: .98rem;
  cursor: pointer; font-family: inherit;
}
.sgt-knop-wit:hover { background: var(--sgt-geel); }
.sgt-huisarts-klein {
  font-size: .85rem; opacity: .85; margin: 10px 0 0;
}

/* --- Professional-aanmeldformulier --- */
.sgt-scherm--prof { min-height: 0; padding-bottom: 48px; }
.sgt-prof-kaart {
  background: #fff;
  border-radius: 20px;
  padding: 32px clamp(20px, 4vw, 44px);
  max-width: 860px;
  margin: 0 auto;
}
.sgt-prof-kaart h2 {
  font-family: var(--sgt-font-kop);
  font-size: clamp(1.5rem, 3.2vw, 2rem);
  font-weight: 800; color: var(--sgt-ink); margin: 0 0 10px;
}
.sgt-prof-intro { color: #58736B; margin: 0 0 22px; max-width: 46em; }
.sgt-prof-velden {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px;
}
.sgt-veld--breed { grid-column: 1 / -1; }
.sgt-veld label {
  display: block; font-weight: 600; font-size: .9rem;
  color: var(--sgt-ink); margin-bottom: 5px;
}
.sgt-veld input, .sgt-veld select, .sgt-veld textarea {
  width: 100%;
  padding: 13px 15px;
  border: 2px solid #CFE6D8;
  border-radius: 12px;
  font-size: 1rem;
  font-family: inherit;
  color: var(--sgt-ink);
  background: #fff;
}
.sgt-veld input:focus, .sgt-veld select:focus, .sgt-veld textarea:focus {
  outline: none; border-color: var(--sgt-ink);
}
.sgt-checks {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 4px 18px;
  align-items: center;
}
/* Het vakje staat midden op de regel. Eerder stond het bovenaan met een
   marge erbovenop, waardoor het net iets te hoog hing ten opzichte van
   de tekst. Bij een label van twee regels blijft het gecentreerd, en dat
   leest in een raster van keuzes prettiger dan uitlijnen op de eerste
   regel. */
.sgt-check {
  display: flex; align-items: center; gap: 10px;
  font-size: .95rem; cursor: pointer; line-height: 1.35;
  min-height: 34px;
}
.sgt-check input { width: 20px; height: 20px; flex: 0 0 auto; margin: 0; accent-color: var(--sgt-ink); }
.sgt-check--blok {
  background: var(--sgt-creme);
  border-radius: 12px;
  padding: 14px 16px;
  margin-top: 16px;
}
.sgt-prof-kaart .sgt-knop-groot { margin-top: 20px; }
.sgt-prof-klein { font-size: .85rem; color: #58736B; margin: 12px 0 0; }
.sgt-prof-melding { margin: 0; }
.sgt-prof-melding--fout {
  background: #FDECEC; border-left: 5px solid #B02020;
  color: #8C1A1A; font-weight: 600;
  padding: 12px 16px; border-radius: 0 10px 10px 0; margin-bottom: 18px;
}

@media (max-width: 620px) {
  .sgt-prof-velden { grid-template-columns: 1fr; }
}

/* Print: mailpaneel en formulier weglaten */
@media print {
  .sgt-mailpaneel, .sgt-actie-huisarts .sgt-huisarts-rij { display: none !important; }
}

/* Kopie naar praktijk (verschijnt na keuze) */
.sgt-ha-extra { margin-top: 10px; }
.sgt-ha-kopie {
  display: flex; align-items: flex-start; gap: 10px;
  background: rgba(255,255,255,0.14);
  border-radius: 12px;
  padding: 12px 14px;
  font-size: .93rem; line-height: 1.45; cursor: pointer;
}
.sgt-ha-kopie input {
  width: 20px; height: 20px; flex: 0 0 auto; margin-top: 1px;
  accent-color: #fff;
}

/* ==============================================================
   Score-meter (vervangt het icoon boven het resultaat)
   ============================================================== */
.sgt-meterblok {
  background: var(--sgt-paars-diep);
  border-radius: 20px;
  padding: 26px 20px 22px;
  text-align: center;
  margin: 0 auto 18px !important;
  max-width: 340px;
  color: #fff;
}
.sgt-meter {
  width: 200px; max-width: 100%; height: auto;
  display: block; margin: 0 auto 6px;
}
.sgt-meter-cijfer {
  font-family: var(--sgt-font-kop);
  display: block;
  font-size: 2.4rem; font-weight: 800; line-height: 1;
  color: var(--sgt-geel);
}
.sgt-meter-cijfer span {
  font-size: 1.2rem; font-weight: 700; color: rgba(255,255,255,0.7);
}
.sgt-meter-label {
  display: block; font-size: .95rem; color: rgba(255,255,255,0.85); margin-top: 6px;
}


/* Icoon in de kop van een vraagscherm */
.sgt-kop { display: flex; align-items: center; gap: 10px; }
.sgt-kop-icoon {
  width: 34px; height: 34px; flex: 0 0 auto;
  background: var(--sgt-paars-diep);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}

/* Soortkeuze in het aanmeldformulier */
.sgt-prof-soort {
  background: var(--sgt-creme);
  border-radius: 12px;
  padding: 16px 18px;
  margin-bottom: 20px;
}
.sgt-veld-kop {
  display: block; font-weight: 700; color: var(--sgt-ink);
  margin-bottom: 10px; font-size: .95rem;
}
.sgt-prof-soort .sgt-check { margin-bottom: 8px; }
.sgt-prof-soort .sgt-check:last-child { margin-bottom: 0; }


/* Veel antwoordopties: twee kolommen zodat alles in beeld past */
.sgt-rechts--twee {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  align-content: start;
}
.sgt-rechts--twee .sgt-antwoord {
  padding: 15px 16px;
  font-size: 1rem;
}
.sgt-rechts--twee .sgt-radio { width: 21px; height: 21px; }
@media (max-width: 620px) {
  .sgt-rechts--twee { grid-template-columns: 1fr; gap: 8px; }
  .sgt-rechts--twee .sgt-antwoord { padding: 13px 15px; }
}

/* Vraagscherm compacter houden zodat scrollen niet nodig is */
@media (min-height: 600px) {
  .sgt-vraagblok { align-items: center; }
}

/* ==============================================================
   Resultaattegels: uitklappen met markering
   ============================================================== */
.sgt-tegel { position: relative; padding-bottom: 26px; }
.sgt-tegel-pijl {
  position: absolute;
  right: 12px; bottom: 8px;
  font-size: 15px;
  line-height: 1;
  color: var(--sgt-ink);
  opacity: .5;
}
.sgt-tegel--actief .sgt-tegel-pijl { opacity: 1; }

/* Korte markering wanneer een onderwerp opengaat */
.sgt-detail--nieuw {
  animation: sgtMarkeer 1.2s ease;
}
@keyframes sgtMarkeer {
  0%   { box-shadow: 0 0 0 0 var(--sgt-geel); }
  25%  { box-shadow: 0 0 0 5px var(--sgt-geel); }
  100% { box-shadow: 0 0 0 0 rgba(199,232,74,0); }
}

.sgt-detail-sluit {
  display: block;
  margin: 18px auto 0;
  background: none;
  border: 1.5px solid #CFE6D8;
  border-radius: 999px;
  padding: 9px 22px;
  font-family: inherit;
  font-size: .92rem;
  font-weight: 600;
  color: #58736B;
  cursor: pointer;
}
.sgt-detail-sluit:hover { background: var(--sgt-creme); color: var(--sgt-ink); }

/* Bij printen alles open en zonder knoppen */
@media print {
  .sgt-tegel-pijl { display: none !important; }
}

/* ==============================================================
   Invoerveld (postcode) en de vraag om anoniem mee te tellen
   ============================================================== */
.sgt-invoer { display: flex; }
.sgt-invoerveld {
  width: 100%;
  max-width: 220px;
  padding: 18px 20px;
  border: 2px solid #fff;
  border-radius: 16px;
  background: #fff;
  font-family: inherit;
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--sgt-ink);
  text-align: center;
}
.sgt-invoerveld:focus { outline: 3px solid var(--sgt-geel); }

.sgt-meetvraag {
  background: #fff;
  border-radius: 16px;
  padding: 20px 24px;
  margin: 0 auto 18px !important;
  max-width: 640px;
  font-size: .96rem;
  line-height: 1.6;
  color: var(--sgt-tekst);
}
.sgt-meetvraag strong { color: var(--sgt-ink); font-size: 1.05rem; }
.sgt-meetvraag p { margin: 8px 0 14px; color: #58736B; font-size: .93rem; }
.sgt-meetknoppen {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
.sgt-meetvraag--dank {
  background: #DDF3E5;
  color: #176B4D;
}
.sgt-meetvraag--dank strong { color: #176B4D; }


/* ==============================================================
   Landingspagina voor professionals
   ============================================================== */
.sgt-pro {
  /* Volle breedte, net als de check: blokken lopen van rand tot rand */
  /* 100vw telt de schuifbalk mee; Safari doet dat anders dan Chrome.
     --sgt-sb bevat de echte breedte van de schuifbalk (zie sgt-app.js),
     en is 0 zodra die er niet is. */
  width: calc(100vw - var(--sgt-sb, 0px));
  margin-left: calc(50% - 50vw + var(--sgt-sb, 0px) / 2);
  margin-right: calc(50% - 50vw + var(--sgt-sb, 0px) / 2);
  padding: 0;
}
.sgt-pro > section {
  padding: clamp(44px, 6vw, 88px) clamp(20px, 5vw, 60px);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.sgt-pro > section > * { width: 100%; max-width: 1060px; }

/* Afwisselende achtergronden geven ritme aan de pagina */
.sgt-pro-voordelen-wrap { background: var(--sgt-creme); }
.sgt-pro-blok--wit   { background: #fff; }
.sgt-pro-blok--roze  { background: var(--sgt-roze); }
.sgt-pro-blok--paars { background: var(--sgt-paars-diep); color: #fff; }
.sgt-pro-blok--paars h3 { color: #fff; }
.sgt-pro-blok--paars p  { color: rgba(255,255,255,.85); }

/* --- 1. Bovenaan --- */
.sgt-pro-hero {
  background: var(--sgt-paars-diep);
  color: #fff;
  border-radius: 0;
  padding: clamp(44px, 6vw, 96px) clamp(20px, 5vw, 60px) !important;
}
.sgt-pro-hero--beeld > .sgt-pro-hero-binnen {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
}
.sgt-pro-label {
  display: inline-block;
  background: var(--sgt-geel);
  color: var(--sgt-ink);
  font-size: .78rem; font-weight: 700;
  border-radius: 999px; padding: 5px 14px;
  margin-bottom: 16px;
}
.sgt-pro-hero h2 {
  font-family: var(--sgt-font-kop);
  font-size: clamp(2.1rem, 5.2vw, 3.4rem);
  font-weight: 800; color: #fff; margin: 0 0 16px; line-height: 1.05;
  max-width: 14em;
}
.sgt-pro-hero p { color: rgba(255,255,255,.9); font-size: clamp(1rem, 1.6vw, 1.15rem); margin: 0 0 28px; max-width: 34em; }
.sgt-pro-hero-klein {
  font-size: .85rem !important;
  color: rgba(255,255,255,.62) !important;
  margin: 16px 0 0 !important;
}
.sgt-pro-hero-beeld img {
  width: 100%; height: auto; display: block;
  border-radius: 20px;
  box-shadow: 0 20px 50px rgba(0,0,0,.3);
}

/* Knoppen */
.sgt-pro-knoppen { display: flex; gap: 12px; flex-wrap: wrap; }
.sgt-pro-knoppen--midden { justify-content: center; margin-top: 6px; }
.sgt-knop-geel {
  transition: background .15s ease, transform .15s ease, box-shadow .15s ease;
  display: inline-block;
  background: var(--sgt-geel); color: var(--sgt-ink) !important;
  border-radius: 999px; padding: 16px 32px;
  font-weight: 700; font-size: 1rem;
  text-decoration: none !important;
  font-family: var(--sgt-font-kop);
}
.sgt-knop-geel:hover { background: #D7F072; }
.sgt-knop-lijn {
  transition: background .15s ease, transform .15s ease, border-color .15s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent; color: #fff !important;
  border: 2px solid rgba(255,255,255,.55);
  border-radius: 999px; padding: 14px 28px;
  font-weight: 600; text-decoration: none !important;
  font-family: var(--sgt-font-kop);
}
.sgt-knop-lijn:hover {
  border-color: #fff; background: rgba(255,255,255,.16);
  transform: translateY(-2px);
}
.sgt-knop-lijn--donker {
  color: var(--sgt-ink) !important;
  border-color: var(--sgt-ink);
}
.sgt-knop-lijn--donker:hover {
  background: rgba(24,60,50,.1);
  border-color: var(--sgt-ink);
  transform: translateY(-2px);
}

/* --- 2. Wat het oplevert --- */
.sgt-pro-voordelen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px;
}
.sgt-pro-voordeel {
  background: #fff;
  border-radius: 20px;
  padding: 32px 28px;
  transition: transform .18s ease, box-shadow .18s ease;
}
.sgt-pro-voordeel:hover { transform: translateY(-4px); box-shadow: 0 14px 34px rgba(24,60,50,.12); }
.sgt-pro-vink {
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  background: var(--sgt-geel); color: var(--sgt-ink);
  border-radius: 50%;
  font-size: 1.2rem; font-weight: 800;
  margin-bottom: 14px;
}
.sgt-pro-voordeel strong {
  display: block;
  font-family: var(--sgt-font-kop);
  font-size: 1.15rem; color: var(--sgt-ink); margin-bottom: 6px;
}
.sgt-pro-voordeel p { margin: 0; font-size: .96rem; color: #3C5A50; line-height: 1.6; }

/* --- Algemene blokken --- */
.sgt-pro-blok { background: #fff; }
.sgt-pro-blok h3,
.sgt-pro-voordelen-wrap h3 {
  font-family: var(--sgt-font-kop);
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  font-weight: 800; color: var(--sgt-ink);
  margin: 0 auto 18px; line-height: 1.15;
}
.sgt-pro-sectie-intro {
  font-size: 1.05rem; color: #3C5A50;
  margin: -8px auto 26px;
}
/* Alles binnen een sectie deelt dezelfde kolombreedte */
.sgt-pro > section > * { width: 100%; }

/* --- Dashboardvoorbeeld --- */
.sgt-pro-waarschuwing {
  background: #FDF3DC;
  border-left: 5px solid var(--sgt-geel);
  border-radius: 0 10px 10px 0;
  padding: 12px 16px; font-size: .93rem; margin: 0 0 18px;
}
.sgt-pro-dash { background: var(--sgt-paars-diep); border-radius: 16px; padding: 22px; color: #fff; }
.sgt-pro-dashkop {
  display: flex; gap: 22px; flex-wrap: wrap;
  font-size: .88rem; color: rgba(255,255,255,.8);
  padding-bottom: 14px; margin-bottom: 16px;
  border-bottom: 1px solid rgba(255,255,255,.18);
}
.sgt-pro-dashkop strong { color: #fff; }
.sgt-pro-kpi { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.sgt-pro-kpikaart { background: rgba(255,255,255,.1); border-radius: 12px; padding: 16px; }
.sgt-pro-kpinaam { display: block; font-size: .82rem; color: rgba(255,255,255,.75); }
.sgt-pro-kpicijfer {
  display: block; font-family: var(--sgt-font-kop);
  font-size: 2.1rem; font-weight: 800; color: var(--sgt-geel); line-height: 1.15;
}
.sgt-pro-kpiuitleg { display: block; font-size: .8rem; color: rgba(255,255,255,.8); line-height: 1.45; }
.sgt-pro-opvallen { background: #fff; color: var(--sgt-tekst); border-radius: 12px; padding: 18px 20px; margin-top: 16px; }
.sgt-pro-opvallen strong { color: var(--sgt-ink); }
.sgt-pro-opvallen ul { margin: 10px 0; padding-left: 20px; font-size: .95rem; }
.sgt-pro-opvallen li { margin-bottom: 5px; }
.sgt-pro-klein { font-size: .85rem; color: #58736B; margin: 10px 0 0; }

/* --- Tabel --- */
.sgt-pro-tabel { width: 100%; border-collapse: collapse; font-size: .96rem; }
.sgt-pro-tabel th {
  text-align: left; background: var(--sgt-creme); color: var(--sgt-ink);
  padding: 12px 16px; font-size: .88rem;
}
.sgt-pro-tabel th:first-child { border-radius: 8px 0 0 8px; }
.sgt-pro-tabel th:last-child { border-radius: 0 8px 8px 0; }
.sgt-pro-tabel td { padding: 13px 16px; border-bottom: 1px solid #E4F2EA; vertical-align: top; }

/* --- Quote --- */
.sgt-pro-quote {
  background: var(--sgt-roze);
  border-radius: 0;
  padding-top: clamp(40px, 4.5vw, 64px) !important;
  padding-bottom: clamp(40px, 4.5vw, 64px) !important;
}
.sgt-pro-quote > * { width: auto !important; }
.sgt-pro-quotefoto { margin-bottom: 14px; }
.sgt-pro-quotefoto img {
  width: 104px; height: 104px;
  border-radius: 50%; object-fit: cover; display: block;
  border: 4px solid #fff;
  box-shadow: 0 6px 18px rgba(24,60,50,.18);
}
.sgt-pro-quote blockquote { margin: 0; flex: 1 1 320px; position: relative; }
.sgt-pro-aanhaling {
  font-family: Georgia, serif;
  font-size: 3rem; line-height: 1; color: rgba(24,60,50,.28);
  display: block; height: 26px;
}
.sgt-pro-quote p {
  font-family: var(--sgt-font-kop);
  font-size: clamp(1.15rem, 2vw, 1.5rem); line-height: 1.5; color: var(--sgt-ink);
  font-weight: 600; margin: 0 0 16px;
}
.sgt-pro-quote blockquote { max-width: 26em; }
.sgt-pro-quote footer { font-size: .92rem; color: #4a3f5e; }
.sgt-pro-quote footer strong { display: block; color: var(--sgt-ink); }

/* --- Stappen --- */
.sgt-pro-stappen { list-style: none; margin: 0; padding: 0; }
.sgt-pro-stappen li {
  display: flex; gap: 16px; align-items: flex-start;
  padding: 15px 0; border-bottom: 1px solid #E4F2EA;
}
.sgt-pro-stappen li:last-child { border-bottom: none; }
.sgt-pro-nummer {
  flex: 0 0 auto; width: 42px; height: 42px;
  background: var(--sgt-paars-diep); color: var(--sgt-geel);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: .92rem;
}
.sgt-pro-stappen strong { display: block; color: var(--sgt-ink); margin-bottom: 3px; }
.sgt-pro-stappen p { margin: 0; font-size: .95rem; color: #3C5A50; }
.sgt-pro-cyclus {
  background: var(--sgt-roze); color: var(--sgt-ink);
  border-radius: 999px; padding: 13px 22px;
  text-align: center; font-weight: 700; margin: 18px 0 0; font-size: .95rem;
}

/* --- Trend --- */
.sgt-pro-trend { display: grid; gap: 10px; margin-top: 14px; }
.sgt-pro-trend > div {
  display: flex; justify-content: space-between; align-items: center;
  background: var(--sgt-creme); border-radius: 12px; padding: 14px 20px;
}
.sgt-pro-trendnaam { font-weight: 600; color: var(--sgt-ink); }
.sgt-pro-trendcijfer { font-weight: 800; color: var(--sgt-paars); }
.sgt-pro-trendcijfer em { color: #8AA79B; font-style: normal; margin: 0 6px; }

/* --- Privacy --- */
.sgt-pro-privacy ul { margin: 0; padding-left: 22px; font-size: .96rem; line-height: 1.7; }
.sgt-pro-privacy li { margin-bottom: 7px; }

/* --- Afsluiting --- */
.sgt-pro-slot {
  background: var(--sgt-roze);
  background-size: cover;
  background-position: center;
  border-radius: 0;
  text-align: center;
}
.sgt-pro-slot h3 {
  font-family: var(--sgt-font-kop);
  font-size: clamp(1.8rem, 4.2vw, 2.7rem);
  font-weight: 800; color: var(--sgt-ink); margin: 0 0 10px;
}
.sgt-pro-slot > p { max-width: 40em; margin: 0 auto 20px; font-size: 1.02rem; }
.sgt-pro-slotcontact { font-size: .93rem; margin-top: 18px !important; }

@media (max-width: 820px) {
  .sgt-pro-hero--beeld > .sgt-pro-hero-binnen { grid-template-columns: 1fr; }
  .sgt-pro-hero-beeld { order: -1; }
}
@media (max-width: 620px) {
  .sgt-pro-quote { flex-direction: column; text-align: center; }
  .sgt-pro-trend > div { flex-direction: column; align-items: flex-start; gap: 4px; }
  .sgt-pro-knoppen .sgt-knop-geel,
  .sgt-pro-knoppen .sgt-knop-lijn { width: 100%; text-align: center; justify-content: center; }
}

/* ==============================================================
   Agenda
   ============================================================== */
.sgt-agenda { max-width: 860px; margin: 0 auto; padding: clamp(28px, 4vw, 48px) 20px 48px; }
.sgt-agenda-kop { text-align: center; margin-bottom: 28px; }
.sgt-agenda-kop h2 {
  font-family: var(--sgt-font-kop);
  font-size: clamp(1.6rem, 3.6vw, 2.3rem);
  font-weight: 800; color: var(--sgt-ink); margin: 0 0 8px;
}
.sgt-agenda-kop p { margin: 0; color: #3C5A50; }

.sgt-agenda-filter {
  background: #fff;
  border-radius: 16px;
  padding: 16px 20px;
  display: flex; gap: 16px; flex-wrap: wrap; align-items: flex-end;
  margin-bottom: 20px;
}
.sgt-agenda-filter label {
  display: flex; flex-direction: column; gap: 5px;
  font-size: .85rem; font-weight: 600; color: var(--sgt-ink);
  flex: 1 1 180px;
}
.sgt-agenda-filter select {
  padding: 11px 14px;
  border: 2px solid #CFE6D8; border-radius: 10px;
  font-family: inherit; font-size: .98rem; font-weight: 400;
  background: #fff; color: var(--sgt-ink);
}
.sgt-agenda-reset { align-self: center; font-size: .9rem; color: var(--sgt-paars); }

.sgt-agenda-maand {
  font-family: var(--sgt-font-kop);
  font-size: 1.1rem; font-weight: 800; color: var(--sgt-ink);
  margin: 22px 0 10px;
}
.sgt-agenda-item {
  background: #fff;
  border-radius: 16px;
  padding: 18px 20px;
  margin-bottom: 12px;
  display: flex; gap: 18px; align-items: flex-start;
}
.sgt-agenda-datum {
  flex: 0 0 auto;
  width: 58px; padding: 10px 0;
  background: var(--sgt-paars-diep); color: #fff;
  border-radius: 12px; text-align: center;
}
.sgt-agenda-dag {
  display: block; font-family: var(--sgt-font-kop);
  font-size: 1.6rem; font-weight: 800; line-height: 1; color: var(--sgt-geel);
}
.sgt-agenda-maandkort {
  display: block; font-size: .72rem; text-transform: uppercase;
  letter-spacing: .06em; margin-top: 3px; color: rgba(255,255,255,.85);
}
.sgt-agenda-inhoud { flex: 1; min-width: 0; }
.sgt-agenda-inhoud h4 {
  font-family: var(--sgt-font-kop);
  font-size: 1.15rem; font-weight: 700; color: var(--sgt-ink); margin: 0 0 6px;
}
.sgt-agenda-meta {
  display: flex; gap: 14px; flex-wrap: wrap;
  font-size: .88rem; color: #58736B; margin-bottom: 8px;
}
.sgt-agenda-inhoud p { margin: 0 0 10px; font-size: .96rem; line-height: 1.55; }
.sgt-agenda-onder { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.sgt-agenda-thema {
  background: var(--sgt-roze); color: var(--sgt-ink);
  font-size: .78rem; font-weight: 700;
  border-radius: 999px; padding: 4px 12px;
}
.sgt-agenda-org { font-size: .85rem; color: #58736B; align-self: center; }
.sgt-agenda-acties { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.sgt-agenda-acties .sgt-knop-donker,
.sgt-agenda-acties .sgt-knop-lijn { padding: 10px 20px; font-size: .92rem; }
.sgt-agenda-klein { font-size: .82rem; color: #58736B; }

.sgt-agenda-leeg,
.sgt-agenda-oproep {
  background: #fff; border-radius: 16px;
  padding: 24px; text-align: center;
}
.sgt-agenda-oproep { background: var(--sgt-roze); margin-top: 24px; }
.sgt-agenda-leeg strong,
.sgt-agenda-oproep strong {
  display: block; font-family: var(--sgt-font-kop);
  font-size: 1.15rem; color: var(--sgt-ink); margin-bottom: 6px;
}
.sgt-agenda-leeg p,
.sgt-agenda-oproep p { margin: 0 0 14px; color: #3C5A50; }

@media (max-width: 560px) {
  .sgt-agenda-item { flex-direction: column; gap: 12px; }
  .sgt-agenda-datum { width: auto; display: flex; gap: 8px; align-items: baseline; padding: 8px 14px; }
  .sgt-agenda-dag { font-size: 1.3rem; }
  .sgt-agenda-acties .sgt-knop-donker,
  .sgt-agenda-acties .sgt-knop-lijn { width: 100%; text-align: center; }
}


/* ==============================================================
   Knoppen: kleur vastzetten, ook bij hover.
   Het thema stuurt a:hover aan en dat is specifieker dan een enkele
   klasse; daarom hier expliciet overschrijven.
   ============================================================== */
.sgt-root a.sgt-knop-donker,
.sgt-root a.sgt-knop-donker:hover,
.sgt-root a.sgt-knop-donker:focus {
  color: #fff !important;
  text-decoration: none !important;
}
.sgt-root a.sgt-knop-donker:hover,
.sgt-root button.sgt-knop-donker:hover {
  background: #0D382B;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(24,60,50,.35);
}

.sgt-root a.sgt-knop-geel,
.sgt-root a.sgt-knop-geel:hover,
.sgt-root a.sgt-knop-geel:focus {
  color: var(--sgt-ink) !important;
  text-decoration: none !important;
}
.sgt-root a.sgt-knop-geel:hover {
  background: #D7F072;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(24,60,50,.25);
}

.sgt-root a.sgt-knop-lijn,
.sgt-root a.sgt-knop-lijn:hover,
.sgt-root a.sgt-knop-lijn:focus {
  color: #fff !important;
  text-decoration: none !important;
}
.sgt-root a.sgt-knop-lijn--donker,
.sgt-root a.sgt-knop-lijn--donker:hover,
.sgt-root a.sgt-knop-lijn--donker:focus {
  color: var(--sgt-ink) !important;
}
.sgt-root a.sgt-aanbod-kaart,
.sgt-root a.sgt-aanbod-kaart:hover { color: var(--sgt-tekst) !important; text-decoration: none !important; }


/* ==============================================================
   Signaal → richting
   ============================================================== */
.sgt-pro-paren { display: grid; gap: 10px; }
.sgt-pro-paar-kop,
.sgt-pro-paar {
  display: grid;
  grid-template-columns: 1fr 56px 1fr;
  align-items: center;
  gap: 10px;
}
.sgt-pro-paar-kop {
  font-size: .82rem; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: #58736B;
  padding: 0 18px 4px;
}
.sgt-pro-paar {
  background: #fff;
  border-radius: 16px;
  padding: 6px;
  transition: transform .15s ease, box-shadow .15s ease;
}
.sgt-pro-paar:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(24,60,50,.1); }
.sgt-pro-signaal,
.sgt-pro-richting { padding: 16px 18px; font-size: 1rem; line-height: 1.45; }
.sgt-pro-signaal { color: var(--sgt-ink); font-weight: 600; }
.sgt-pro-richting {
  background: var(--sgt-roze);
  border-radius: 12px;
  color: var(--sgt-ink);
}
.sgt-pro-pijl {
  display: flex; align-items: center; justify-content: center;
  color: var(--sgt-paars);
}

/* ==============================================================
   Verandering: ringen
   ============================================================== */
.sgt-pro-ringen {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.sgt-pro-ring {
  background: #fff;
  border-radius: 20px;
  padding: 26px 20px;
  margin: 0;
  text-align: center;
}
.sgt-pro-ringsvg {
  width: 140px !important;
  height: 140px !important;
  max-width: 100%;
  display: block;
  margin: 0 auto;
}
.sgt-pro-ringcijfer {
  font-family: var(--sgt-font-kop);
  font-size: 27px; font-weight: 800; fill: var(--sgt-ink);
}
.sgt-pro-ringwas { font-size: 12px; fill: #58736B; }
.sgt-pro-ring figcaption { margin-top: 10px; }
.sgt-pro-ring figcaption strong {
  display: block; font-family: var(--sgt-font-kop);
  font-size: 1.05rem; color: var(--sgt-ink); margin-bottom: 6px;
}
.sgt-pro-ringdelta {
  display: inline-block;
  font-size: .84rem; font-weight: 700;
  border-radius: 999px; padding: 3px 12px;
}
.sgt-pro-ringdelta.is-goed   { background: #DDF3E5; color: #176B4D; }
.sgt-pro-ringdelta.is-slecht { background: #FDECEC; color: #B32525; }
.sgt-pro-ringuitleg {
  display: block; font-size: .86rem; color: #58736B;
  margin-top: 8px; line-height: 1.45;
}

/* ==============================================================
   Privacy met vinkjes
   ============================================================== */
.sgt-pro-vinklijst { list-style: none; margin: 0 auto; padding: 0; display: grid; gap: 12px; }
.sgt-pro-vinklijst li {
  display: flex; gap: 14px; align-items: flex-start;
  background: #F1F8F3;
  border-radius: 14px;
  padding: 16px 18px;
  font-size: .98rem; line-height: 1.6;
}
.sgt-pro-vinklijst li > span {
  flex: 0 0 auto;
  width: 28px; height: 28px;
  background: #176B4D; color: #fff;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: .95rem;
}
.sgt-pro-vinklijst strong { color: var(--sgt-ink); }

/* Quote gecentreerd */
.sgt-pro-quote { text-align: center; }
.sgt-pro-quote blockquote { max-width: 40em; margin: 0 auto; }
.sgt-pro-aanhaling { margin: 0 auto; }

@media (max-width: 760px) {
  .sgt-pro-ringen { grid-template-columns: 1fr; }
  .sgt-pro-ring { display: flex; align-items: center; gap: 18px; text-align: left; }
  .sgt-pro-ringsvg { width: 110px !important; height: 110px !important; flex: 0 0 auto; margin: 0; }
  .sgt-pro-ring figcaption { margin-top: 0; }
}
@media (max-width: 700px) {
  .sgt-pro-paar-kop { display: none; }
  .sgt-pro-paar { grid-template-columns: 1fr; gap: 0; }
  .sgt-pro-pijl { transform: rotate(90deg); padding: 4px 0; }
}

/* ---------------------------------------------------------------
   Pakketkeuze — kaarten naast elkaar (v5.4)
--------------------------------------------------------------- */
.sgt-prof-pakketten { margin: 30px 0 10px; }
.sgt-prof-pakketten .sgt-veld-kop { display: block; margin-bottom: 16px; }

.sgt-pk-rij {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 26px 20px;
  align-items: stretch;
  margin-top: 16px;
}

.sgt-pk {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 2px solid #D7EBDF;
  border-radius: 18px;
  padding: 26px 20px 22px;
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.sgt-pk:hover { border-color: #8FC0A6; transform: translateY(-2px); }
.sgt-pk input {
  position: absolute;
  opacity: 0;
  width: 1px; height: 1px;
  pointer-events: none;
}
.sgt-pk:has(input:checked) {
  border-color: #176B4D;
  box-shadow: 0 8px 24px rgba(24, 60, 50, .12);
}
.sgt-pk:has(input:focus-visible) { outline: 3px solid #C7E84A; outline-offset: 3px; }

/* De uitgelichte kolom */
.sgt-pk--populair {
  border-color: #176B4D;
  background: #F5FBF7;
}

/* Labels bovenaan de kaart, netjes naast elkaar gecentreerd */
.sgt-pk-tags {
  position: absolute;
  bottom: calc(100% - 12px);   /* groeit omhoog, nooit over de titel heen */
  left: 12px;
  right: 12px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 5px;
}
.sgt-pk-tag {
  background: #176B4D;
  color: #fff;
  border-radius: 999px;
  padding: 3px 11px;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  white-space: nowrap;
  line-height: 1.5;
}
.sgt-pk-tag--intro { background: #C7E84A; color: #183C32; }

.sgt-pk-naam {
  display: block;
  font-size: 1.05rem;
  font-weight: 700;
  color: #183C32;
  margin-bottom: 10px;
}

.sgt-pk-prijs { display: block; line-height: 1.05; }
.sgt-pk-bedrag {
  font-size: 2.3rem;
  font-weight: 800;
  color: #183C32;
  letter-spacing: -.02em;
}
.sgt-pk-bedrag--klein { font-size: 1.45rem; }

.sgt-pk-periode {
  display: block;
  font-size: .8rem;
  color: #58736B;
  margin: 6px 0 18px;
  min-height: 2.4em;
}

/* Ziet eruit als een knop, maar de hele kaart is de keuze */
.sgt-pk-knop {
  display: block;
  text-align: center;
  background: #fff;
  color: #176B4D;
  border: 2px solid #176B4D;
  border-radius: 999px;
  padding: 10px 14px;
  font-weight: 700;
  font-size: .92rem;
  margin-bottom: 16px;
  transition: background .15s ease, color .15s ease;
}
.sgt-pk:hover .sgt-pk-knop { background: #EAF6EF; }
.sgt-pk:has(input:checked) .sgt-pk-knop {
  background: #183C32;
  border-color: #183C32;
  color: #fff;
}
.sgt-pk:has(input:checked) .sgt-pk-knop::before { content: '\2713\00a0'; }

.sgt-pk-doel {
  display: block;
  font-size: .88rem;
  color: #58736B;
  line-height: 1.5;
  padding-bottom: 16px;
  margin-bottom: 16px;
  border-bottom: 1px solid #DDF3E5;
}

.sgt-pk-lijst { display: grid; gap: 9px; }
.sgt-pk-lijst span {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 7px;
  align-items: start;
  font-size: .9rem;
  color: #3D3450;
  line-height: 1.45;
}
.sgt-pk-lijst svg { color: #176B4D; margin-top: 3px; }

@media (max-width: 640px) {
  .sgt-pk-rij { grid-template-columns: 1fr; gap: 26px; }
  .sgt-pk-periode { min-height: 0; }
  .sgt-pk { padding: 24px 18px 20px; }
}

/* Terugval voor browsers zonder :has() */
@supports not (selector(:has(*))) {
  .sgt-pk input { position: static; opacity: 1; width: auto; height: auto; pointer-events: auto; margin-bottom: 10px; }
}

/* Werkgebied bij de grotere pakketten */
.sgt-werkgebied {
  margin-top: 22px;
  padding: 18px 20px;
  background: #fff;
  border: 2px solid #CFE6D8;
  border-radius: 16px;
}
.sgt-werkgebied .sgt-veld-kop { display: block; margin-bottom: 4px; }
.sgt-werkgebied .sgt-prof-klein { margin: 0 0 12px; }

/* Uitleg over het pakket op de toegangspagina */
.sgt-toegang-pakket {
  background: #F1F8F3;
  border-left: 5px solid #C7E84A;
  border-radius: 0 12px 12px 0;
  padding: 16px 20px;
  margin: 4px 0 22px;
}
.sgt-toegang-pakket strong { color: #183C32; display: block; margin-bottom: 6px; }
.sgt-toegang-pakket p { margin: 0; color: #58736B; line-height: 1.55; font-size: .95rem; }


/* ---------------------------------------------------------------
   Correcties na test op mobiel (v5.5)
--------------------------------------------------------------- */

/* Velden bleven buiten hun kader vallen: padding en rand telden bij de
   breedte op. Vooral zichtbaar bij datumvelden op iOS. */
.sgt-veld input,
.sgt-veld select,
.sgt-veld textarea,
.sgt-prof-velden input,
.sgt-prof-velden select,
.sgt-prof-velden textarea {
  box-sizing: border-box;
  max-width: 100%;
}
/* iOS geeft datum- en tijdvelden een eigen minimumbreedte */
.sgt-veld input[type="date"],
.sgt-veld input[type="time"],
.sgt-veld input[type="datetime-local"] {
  min-width: 0;
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  min-height: 52px;      /* zelfde hoogte als de andere velden */
}
.sgt-veld textarea { display: block; }

/* Signaal → richting: op mobiel als één rustige kaart */
@media (max-width: 720px) {
  .sgt-pro-paren { gap: 12px; }
  .sgt-pro-paar {
    grid-template-columns: 1fr;
    gap: 0;
    padding: 16px 16px 14px;
  }
  .sgt-pro-signaal {
    padding: 0;
    font-size: 1rem;
    line-height: 1.4;
  }
  .sgt-pro-pijl {
    transform: none;
    height: 26px;
    padding: 8px 0 6px;
  }
  .sgt-pro-pijl svg {
    width: 20px;
    height: 26px;
    transform: rotate(90deg);   /* alleen het pijltje draait, niet het vak */
  }
  .sgt-pro-richting {
    padding: 13px 15px;
    font-size: .96rem;
  }
}

/* Quote: gecentreerd blok, zonder gapend gat eronder */
.sgt-pro-quote {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 4px;
}
.sgt-pro-quote blockquote {
  flex: 0 1 auto;
  max-width: 30em;
  margin: 0 auto;
}
.sgt-pro-quote p { text-wrap: balance; }

@media (max-width: 720px) {
  .sgt-pro-quote {
    padding-top: 34px !important;
    padding-bottom: 34px !important;
  }
  .sgt-pro-quote blockquote { max-width: 22em; }
  .sgt-pro-quote p { font-size: 1.1rem; line-height: 1.45; }
  .sgt-pro-quotefoto img { width: 88px; height: 88px; }
}

/* Postcodevraag en toestemming (hersteld in v5.5) */
.sgt-veld--pc { max-width: 320px; margin: 0 auto; text-align: left; }
.sgt-veld--pc label {
  display: block;
  font-weight: 600;
  color: var(--sgt-ink);
  margin-bottom: 8px;
}
.sgt-veld--pc input {
  box-sizing: border-box;
  width: 100%;
  padding: 15px 18px;
  border: 2px solid #CFE6D8;
  border-radius: 14px;
  font-size: 1.4rem;
  font-family: inherit;
  letter-spacing: .14em;
  text-align: center;
  color: var(--sgt-ink);
  background: #fff;
}
.sgt-veld--pc input:focus { outline: none; border-color: var(--sgt-ink); }
.sgt-veld-hulp {
  font-size: .88rem;
  color: #58736B;
  margin: 10px 0 0;
  line-height: 1.5;
}

.sgt-meetvraag {
  background: var(--sgt-creme);
  border-radius: 16px;
  padding: 20px 22px;
  margin: 26px 0 8px;
}
.sgt-meetvraag strong { display: block; color: var(--sgt-ink); font-size: 1.05rem; margin-bottom: 6px; }
.sgt-meetvraag p { margin: 0 0 14px; color: #58736B; line-height: 1.55; font-size: .95rem; }
.sgt-meetvraag-knoppen { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.sgt-meetvraag--dank { background: #DDF3E5; }
.sgt-meetvraag--dank p { margin: 0; }

/* ---------------------------------------------------------------
   Wijkdashboard aan de voorkant (v5.8)
   Zelfde opbouw als de professionalpagina: blokken van rand tot rand,
   inhoud gecentreerd binnen dezelfde maximale breedte.
--------------------------------------------------------------- */
.sgt-dash {
  /* Volle breedte, maar gemeten aan de pagina en niet aan het scherm.
     Met 100vw telt de schuifbalk mee en schuift alles een paar pixels
     naar rechts; dat zag je terug in de uitlijning van de vlakken. */
  /* 100vw telt de schuifbalk mee; Safari doet dat anders dan Chrome.
     --sgt-sb bevat de echte breedte van de schuifbalk (zie sgt-app.js),
     en is 0 zodra die er niet is. */
  width: calc(100vw - var(--sgt-sb, 0px));
  margin-left: calc(50% - 50vw + var(--sgt-sb, 0px) / 2);
  margin-right: calc(50% - 50vw + var(--sgt-sb, 0px) / 2);
  padding: 0;
  overflow-x: clip;   /* nooit een schuifbalk door het volle-breedtevlak */
}
.sgt-dash { --sgt-dash-zij: clamp(20px, 5vw, 60px); --sgt-dash-max: 1060px; }
.sgt-dash > section {
  padding: clamp(26px, 3.4vw, 44px) var(--sgt-dash-zij);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: transparent;
}
.sgt-dash-binnen { width: 100%; max-width: var(--sgt-dash-max); box-sizing: border-box; }

/* Roze pagina met witte kaarten, net als de rest van de site */
.sgt-dash { background: var(--sgt-roze); }
.sgt-dash-sectie--creme { background: transparent; }
.sgt-dash-sectie--voet  { padding-top: 0 !important; padding-bottom: 20px !important; }
.sgt-dash-sectie--links { padding-top: 0 !important; }

/* De paarse balk krijgt wat meer lucht dan de andere secties */
.sgt-dash-hero {
  padding-top: clamp(32px, 4.2vw, 58px) !important;
  padding-bottom: clamp(28px, 3.6vw, 48px) !important;
}

/* Elk blok is een eigen witte kaart op het roze vlak */
.sgt-dash-blok {
  width: 100%;
  background: #fff;
  border-radius: 20px;
  padding: clamp(22px, 3vw, 32px);
}



.sgt-dash h3 {
  font-family: var(--sgt-font-kop);
  font-size: clamp(1.4rem, 2.6vw, 1.85rem);
  font-weight: 800;
  color: var(--sgt-ink);
  margin: 0 0 8px;
}
.sgt-dash-sub {
  margin: 0 0 26px;
  color: #58736B;
  font-size: 1.02rem;
  line-height: 1.6;
  max-width: 56em;
}

/* --- Kop met filters --- */
.sgt-dash-hero {
  background: var(--sgt-paars-diep) !important;
  color: #fff;
}
.sgt-dash-hero-binnen {
  display: flex;
  flex-wrap: wrap;
  gap: 24px 28px;
  align-items: flex-end;
  justify-content: space-between;
}
.sgt-dash-hero-tekst { flex: 1 1 320px; }
.sgt-dash-label {
  display: inline-block;
  background: var(--sgt-geel);
  color: var(--sgt-ink);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .02em;
  border-radius: 999px;
  padding: 5px 14px;
  margin-bottom: 16px;
}
.sgt-dash-hero h2 {
  font-family: var(--sgt-font-kop);
  font-size: clamp(2rem, 4.2vw, 3rem);
  font-weight: 800;
  color: #fff;
  line-height: 1.1;
  margin: 0 0 10px;
}
.sgt-dash-hero p { margin: 0; color: rgba(255,255,255,.85); font-size: 1.02rem; }

.sgt-dash-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  flex: 0 1 auto;
}
.sgt-dash-filters label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: .8rem;
  font-weight: 600;
  color: rgba(255,255,255,.8);
}
.sgt-dash-filters select {
  box-sizing: border-box;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.34);
  border-radius: 12px;
  color: #fff;
  padding: 11px 14px;
  font-size: .96rem;
  font-family: inherit;
  min-width: 160px;
}
.sgt-dash-filters select option { color: var(--sgt-ink); background: #fff; }
.sgt-dash-filters select:disabled { opacity: .45; cursor: not-allowed; }
.sgt-dash-wis {
  align-self: flex-end;
  color: rgba(255,255,255,.85);
  font-size: .85rem;
  font-weight: 600;
  padding-bottom: 11px;
  white-space: nowrap;
}

/* Meenemen: pdf of mail */
.sgt-dash-acties {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  width: 100%;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,.2);
}
.sgt-dash-actie {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-height: 44px;
  background: var(--sgt-geel);
  color: var(--sgt-ink);
  border: 2px solid var(--sgt-geel);   /* zelfde hoogte als de open variant */
  border-radius: 999px;
  padding: 8px 22px;
  font-weight: 700;
  font-size: .93rem;
  line-height: 1.4;
  text-decoration: none;
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
}
.sgt-dash-actie:hover { transform: translateY(-2px); }
.sgt-dash-actie--stil {
  background: transparent;
  color: #fff;
  border-color: rgba(255,255,255,.5);
}
.sgt-dash-melding--goed { background: #DDF3E5; border-left-color: #176B4D; }

/* --- Paars paneel met de opvallendste cijfers --- */
.sgt-dash-paneel {
  background: var(--sgt-paars-diep);
  border-radius: 20px;
  padding: clamp(20px, 3vw, 30px);
  color: #fff;
}
.sgt-dash-paneelkop {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  font-size: .9rem;
  color: rgba(255,255,255,.8);
  padding-bottom: 16px;
  margin-bottom: 18px;
  border-bottom: 1px solid rgba(255,255,255,.18);
}
.sgt-dash-paneelkop strong { color: #fff; }

.sgt-dash-kpi {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 14px;
}
.sgt-dash-kpikaart {
  background: rgba(255,255,255,.1);
  border-radius: 14px;
  padding: 18px;
}
.sgt-dash-kpinaam {
  display: block;
  font-size: .85rem;
  color: rgba(255,255,255,.78);
  margin-bottom: 2px;
}
.sgt-dash-kpicijfer {
  display: block;
  font-family: var(--sgt-font-kop);
  font-size: 2.3rem;
  font-weight: 800;
  color: var(--sgt-geel);
  line-height: 1.15;
}
.sgt-dash-kpiuitleg {
  display: block;
  font-size: .82rem;
  color: rgba(255,255,255,.8);
  line-height: 1.45;
}
.sgt-dash-opvallen {
  background: #fff;
  color: var(--sgt-tekst);
  border-radius: 14px;
  padding: 20px 22px;
  margin-top: 18px;
}
.sgt-dash-opvallen strong { color: var(--sgt-ink); }
.sgt-dash-opvallen ul { margin: 12px 0; padding-left: 20px; font-size: .97rem; line-height: 1.6; }
.sgt-dash-opvallen li { margin-bottom: 6px; }
.sgt-dash-opvallen .sgt-dash-klein { margin: 0; }

/* --- Gevulde balk bij een percentage --- */
.sgt-dash-meter {
  display: block;
  height: 12px;
  border-radius: 999px;
  background: #F1F8F3;
  overflow: hidden;
  margin: 4px 0 14px;
}
.sgt-dash-meter > span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--sgt-roze), var(--sgt-paars));
}
.sgt-dash-meter--klein { height: 8px; margin: 0; flex: 1 1 auto; }
.sgt-dash-meter--grijs > span { background: #A9C2B6; }

/* --- Wijken vergeleken --- */
.sgt-dash-tabel-wrap { overflow-x: auto; }
.sgt-dash-tabel {
  width: 100%;
  border-collapse: collapse;
  font-size: .92rem;
}
.sgt-dash-tabel th {
  text-align: left;
  font-size: .8rem;
  font-weight: 700;
  color: var(--sgt-paars);
  text-transform: uppercase;
  letter-spacing: .03em;
  padding: 0 12px 10px 0;
  vertical-align: bottom;
  white-space: nowrap;
}
.sgt-dash-tabel td {
  padding: 10px 12px 10px 0;
  border-top: 1px solid #F1F8F3;
  vertical-align: middle;
}
.sgt-dash-tabel-wijk { font-weight: 700; color: var(--sgt-ink); white-space: nowrap; }
.sgt-dash-tabel-wijk a { color: var(--sgt-ink); text-decoration: none; }
.sgt-dash-tabel-wijk a:hover { color: var(--sgt-paars); text-decoration: underline; }
.sgt-dash-tabel-n { text-align: right; color: #58736B; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sgt-dash-tabel-leeg { color: #A9C2B6; }
.sgt-dash-cel { display: flex; align-items: center; gap: 8px; min-width: 110px; }
.sgt-dash-cel-cijfer {
  font-size: .87rem;
  font-weight: 700;
  color: var(--sgt-ink);
  font-variant-numeric: tabular-nums;
  min-width: 34px;
  text-align: right;
}
.sgt-dash-rij-actief td { background: #F5FBF7; }
.sgt-dash-rij-totaal td {
  border-top: 2px solid var(--sgt-ink);
  color: #58736B;
  font-style: italic;
}
.sgt-dash-rij-totaal .sgt-dash-tabel-wijk { font-style: normal; }

/* --- Verdeelbalken --- */
.sgt-dash-balken { display: grid; gap: 14px; }
.sgt-dash-balk-rij {
  display: grid;
  grid-template-columns: 210px 1fr 52px;
  gap: 18px;
  align-items: center;
}
.sgt-dash-balk-naam {
  font-size: .96rem;
  color: var(--sgt-ink);
  font-weight: 600;
  line-height: 1.35;
}
.sgt-dash-balk {
  display: flex;
  height: 24px;
  border-radius: 8px;
  overflow: hidden;
  background: #F1F8F3;
  border: 1px solid rgba(24,60,50,.06);   /* ook zichtbaar als alles nul is */
}
.sgt-dash-goed     { background: var(--sgt-goed); }
.sgt-dash-aandacht { background: var(--sgt-aandacht); }
.sgt-dash-extra    { background: var(--sgt-extra); }
.sgt-dash-balk-cijfer {
  font-size: .95rem;
  font-weight: 700;
  color: var(--sgt-ink);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* --- Advies --- */
.sgt-dash-advies {
  background: var(--sgt-creme);
  border-left: 5px solid var(--sgt-paars);
  border-radius: 0 16px 16px 0;
  padding: 20px 24px;
  margin-bottom: 16px;
}
.sgt-dash-advies:last-of-type { margin-bottom: 0; }
/* Om en om iets lichter, zodat de blokken los van elkaar lezen */
.sgt-dash-advies:nth-of-type(even) {
  background: #EAF6EF;
  border-left-color: var(--sgt-roze);
}
.sgt-dash-advies-kop {
  display: flex;
  gap: 14px;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 10px;
}
.sgt-dash-advies-kop strong {
  color: var(--sgt-ink);
  font-size: 1.08rem;
  line-height: 1.35;
}
.sgt-dash-advies-pct {
  background: var(--sgt-geel);
  color: var(--sgt-ink);
  border-radius: 999px;
  padding: 3px 12px;
  font-size: .84rem;
  font-weight: 700;
  white-space: nowrap;
  flex: 0 0 auto;
}
.sgt-dash-advies p { margin: 0; color: #58736B; line-height: 1.65; font-size: .98rem; }
.sgt-dash-klein { margin: 18px 0 0; font-size: .9rem; color: #58736B; }

/* --- Aanbod --- */
.sgt-dash-aanbod {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}
.sgt-dash-aanbod-kaart {
  border: 2px solid #F1F8F3;
  border-radius: 16px;
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
}
.sgt-dash-aanbod-thema {
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--sgt-paars);
  margin-bottom: 8px;
}
.sgt-dash-aanbod-kaart strong { color: var(--sgt-ink); margin-bottom: 8px; line-height: 1.35; }
.sgt-dash-aanbod-kaart p { margin: 0 0 12px; font-size: .92rem; color: #58736B; line-height: 1.55; }
.sgt-dash-aanbod-kaart a { color: var(--sgt-paars); font-weight: 600; font-size: .92rem; margin-top: auto; }

/* --- Melding als er nog te weinig cijfers zijn --- */
.sgt-dash-sectie--melding { padding-bottom: 0 !important; }
.sgt-dash-melding {
  background: #FDF3DC;
  border-left: 5px solid var(--sgt-geel);
  border-radius: 0 14px 14px 0;
  padding: 18px 22px;
}
.sgt-dash-melding strong { display: block; color: var(--sgt-ink); margin-bottom: 6px; font-size: 1.05rem; }
.sgt-dash-melding p { margin: 0; color: #58736B; line-height: 1.6; font-size: .95rem; }

/* Balk in het adviesblok: zelfde vorm als bij Alle onderwerpen */
.sgt-dash-balk--advies { margin: 4px 0 14px; }

/* --- Poort: niet ingelogd of geen toegang --- */
.sgt-dash-poort {
  background: #fff;
  border-radius: 22px;
  padding: clamp(32px, 5vw, 56px) clamp(24px, 4vw, 48px);
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
}
.sgt-dash-poort h2 {
  font-family: var(--sgt-font-kop);
  font-size: clamp(1.6rem, 3.2vw, 2.1rem);
  font-weight: 800;
  color: var(--sgt-ink);
  margin: 0 0 12px;
}
.sgt-dash-poort .sgt-prof-intro {
  max-width: 34em;
  margin: 0 auto 26px;
  color: #58736B;
  line-height: 1.65;
}
.sgt-dash-poort p:last-child { margin-bottom: 0; }
.sgt-dash-link {
  display: inline-block;
  margin-left: 16px;
  color: var(--sgt-paars);
  font-weight: 600;
}

/* --- Voet --- */
.sgt-dash-voet {
  font-size: .9rem;
  color: #58736B;
  line-height: 1.65;
  margin: 0;
}
.sgt-dash-voetbalk {
  display: flex;
  gap: 24px;
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid rgba(24,60,50,.12);
}
.sgt-dash-voetbalk a { color: var(--sgt-paars); font-weight: 600; font-size: .94rem; }

@media (max-width: 780px) {
  .sgt-dash-hero-binnen { flex-direction: column; align-items: stretch; }
  .sgt-dash-filters { width: 100%; }
  .sgt-dash-filters label { flex: 1 1 140px; }
  .sgt-dash-filters select { min-width: 0; width: 100%; }
  .sgt-dash-balk-rij {
    grid-template-columns: 1fr 48px;
    grid-template-areas: "naam cijfer" "balk balk";
    gap: 6px 12px;
  }
  .sgt-dash-balk-naam   { grid-area: naam; }
  .sgt-dash-balk-cijfer { grid-area: cijfer; }
  .sgt-dash-balk        { grid-area: balk; }
  .sgt-dash-link { display: block; margin: 14px 0 0; }
}

/* Mailpaneel op het dashboard: hetzelfde venster als bij de testuitslag.
   .sgt-overlay staat op display:flex, dus 'hidden' moet dat overrulen. */
.sgt-overlay[hidden] { display: none !important; }
button.sgt-dash-actie {
  cursor: pointer;
  font-family: inherit;
  font-size: .93rem;
  line-height: 1.4;
  border: none;
  appearance: none;
  -webkit-appearance: none;
}
/* De open variant houdt zijn rand; anders wint de regel hierboven. */
button.sgt-dash-actie--stil,
a.sgt-dash-actie--stil {
  border: 2px solid rgba(255,255,255,.5);
  background: transparent;
  color: #fff;
}
button.sgt-dash-actie--stil:hover,
a.sgt-dash-actie--stil:hover { border-color: #fff; background: rgba(255,255,255,.1); }
button.sgt-dash-actie:disabled { opacity: .6; cursor: wait; }
.sgt-dash .sgt-mailpaneel .sgt-mail-uitleg { color: #58736B; line-height: 1.55; margin: 0 0 16px; }

/* ---------------------------------------------------------------
   Vangnet voor de paginabreedte (v5.12.2)
   Het thema zet gewone pagina's in een leeskolom van 46em die links
   in de container staat. Een blok dat over de volle breedte moet
   lopen, rekent dan tegen die smalle kolom en schuift naar links.
   Deze regel haalt die beperking weg zodra er een dashboard in staat.
--------------------------------------------------------------- */
.sg-inhoud:has(.sgt-dash),
.sg-pagina .sg-inhoud:has(.sgt-dash),
.sg-inhoud:has(.sgt-omgeving-tegels),
.sg-pagina .sg-inhoud:has(.sgt-omgeving-tegels),
.sg-inhoud:has(.sgt-uitgelicht),
.sg-pagina .sg-inhoud:has(.sgt-uitgelicht) {
  max-width: none;
  margin-left: auto;
  margin-right: auto;
}

/* ---------------------------------------------------------------
   Verwijzing naar de agenda bij het resultaat (v5.15)
--------------------------------------------------------------- */
/* Gecentreerd, net als het paneel erboven en de disclaimer eronder.
   Als rij met de knop rechts las hij als een los element op de pagina. */
.sgt-agenda-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 18px;
  background: var(--sgt-paars-diep);
  border-radius: 18px;
  padding: 28px 26px;
  margin: 26px 0 8px;
}
.sgt-agenda-cta-tekst { max-width: 44em; }
.sgt-agenda-cta strong {
  display: block;
  font-family: var(--sgt-font-kop);
  color: #fff;
  font-size: 1.2rem;
  font-weight: 800;
  margin-bottom: 8px;
}
.sgt-agenda-cta p {
  margin: 0;
  color: rgba(255,255,255,.85);
  line-height: 1.6;
  font-size: .96rem;
}
.sgt-agenda-cta-knop {
  flex: 0 0 auto;
  align-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  background: var(--sgt-geel);
  color: var(--sgt-ink);
  border-radius: 999px;
  padding: 12px 28px;
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  transition: transform .15s ease, background .15s ease;
}
.sgt-agenda-cta-knop:hover { transform: translateY(-2px); background: #D7F072; }
@media (max-width: 600px) {
  .sgt-agenda-cta { padding: 22px 18px; }
  .sgt-agenda-cta-knop { width: 100%; max-width: 22em; }
}

/* Rustiger variant van de agenda-oproep, voor wie nog niet is aangesloten */
.sgt-agenda-oproep--stil {
  background: var(--sgt-paars-diep);
  color: #fff;
}
.sgt-agenda-oproep--stil strong { color: #fff; }
.sgt-agenda-oproep--stil p { color: rgba(255,255,255,.85); }

/* ---------------------------------------------------------------
   Mijn omgeving (v5.16)
--------------------------------------------------------------- */
.sgt-omgeving-tegels {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 16px;
}
.sgt-omgeving-tegel {
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 18px;
  padding: 24px;
  text-decoration: none;
  border: 2px solid transparent;
  transition: transform .15s ease, border-color .15s ease;
}
.sgt-omgeving-tegel:hover {
  transform: translateY(-3px);
  border-color: var(--sgt-paars);
}
.sgt-omgeving-kop {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--sgt-ink);
  margin-bottom: 8px;
}
.sgt-omgeving-cijfer {
  font-size: 2.2rem;
  font-weight: 800;
  color: var(--sgt-paars);
  line-height: 1.05;
}
.sgt-omgeving-tekst {
  font-size: .93rem;
  color: #58736B;
  line-height: 1.55;
  flex: 1 1 auto;
}
.sgt-omgeving-link {
  display: block;
  margin-top: 14px;
  font-size: .9rem;
  font-weight: 700;
  color: var(--sgt-paars);
}

/* Inlogformulier op de pagina zelf */
.sgt-dash-poort #loginform { text-align: left; margin-top: 8px; }
.sgt-dash-poort #loginform p { margin: 0 0 14px; }
.sgt-dash-poort #loginform label {
  display: block;
  font-size: .9rem;
  font-weight: 600;
  color: var(--sgt-ink);
  margin-bottom: 6px;
}
.sgt-dash-poort #loginform input[type="text"],
.sgt-dash-poort #loginform input[type="password"] {
  box-sizing: border-box;
  width: 100%;
  padding: 13px 15px;
  border: 2px solid #CFE6D8;
  border-radius: 12px;
  font-size: 1rem;
  font-family: inherit;
  color: var(--sgt-ink);
  background: #fff;
}
.sgt-dash-poort #loginform input:focus { outline: none; border-color: var(--sgt-ink); }
.sgt-dash-poort #loginform .login-remember label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
}
.sgt-dash-poort #loginform input[type="checkbox"] { width: auto; }
.sgt-dash-poort #loginform .submit input,
.sgt-dash-poort #wp-submit {
  width: 100%;
  background: var(--sgt-ink);
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 14px 28px;
  font-size: 1rem;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  min-height: 48px;
}
.sgt-dash-poort #wp-submit:hover { background: #0D382B; }
.sgt-omgeving-hulp {
  margin-top: 18px;
  font-size: .92rem;
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}
.sgt-omgeving-hulp a { color: var(--sgt-paars); font-weight: 600; }
.sgt-omgeving-hulp span { color: #A9C2B6; }

/* ---------------------------------------------------------------
   Uitgelichte activiteiten op de homepage (v5.17)
--------------------------------------------------------------- */
.sgt-uitgelicht { width: 100%; }
.sgt-uitgelicht-kop { margin-bottom: 22px; }
.sgt-uitgelicht-kop h2 {
  font-family: var(--sgt-font-kop);
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  font-weight: 800;
  color: var(--sgt-ink);
  margin: 0 0 8px;
}
.sgt-uitgelicht-kop p {
  margin: 0;
  color: #58736B;
  line-height: 1.6;
  max-width: 46em;
}

.sgt-uitgelicht-rij {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
}
.sgt-uitgelicht-kaart {
  display: flex;
  gap: 16px;
  background: #fff;
  border-radius: 18px;
  padding: 20px;
  border: 2px solid #F1F8F3;
}
.sgt-uitgelicht-datum {
  flex: 0 0 58px;
  height: 62px;
  background: var(--sgt-paars);
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #fff;
}
.sgt-uitgelicht-dag {
  font-size: 1.55rem;
  font-weight: 800;
  line-height: 1;
}
.sgt-uitgelicht-maand {
  font-size: .74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--sgt-geel);
}
.sgt-uitgelicht-inhoud { display: flex; flex-direction: column; min-width: 0; }
.sgt-uitgelicht-thema {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--sgt-paars);
  margin-bottom: 4px;
}
.sgt-uitgelicht-inhoud strong {
  color: var(--sgt-ink);
  font-size: 1.02rem;
  line-height: 1.35;
  margin-bottom: 4px;
}
.sgt-uitgelicht-waar { font-size: .88rem; color: #58736B; margin-bottom: 6px; }
.sgt-uitgelicht-tekst { font-size: .9rem; color: #58736B; line-height: 1.5; }
.sgt-uitgelicht-meer { margin: 22px 0 0; }

@media (max-width: 600px) {
  .sgt-uitgelicht-meer .sgt-knop-groot { display: block; text-align: center; }
}


/* ---------------------------------------------------------------
   Keuzelijsten (v5.17.1)
   Safari en oudere browsers tekenen een select in hun eigen stijl:
   grijs verloop, vierkante hoeken, systeemletter. Daarom tekenen we
   hem zelf, met een eigen pijltje als achtergrondafbeelding.
--------------------------------------------------------------- */
.sgt-root select,
.sgt-veld select,
.sgt-dash-filters select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23183C32' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 13px 8px;
  padding-right: 44px;
  border-radius: 12px;
  font-family: inherit;
  font-size: 1rem;
  color: var(--sgt-ink);
  line-height: 1.4;
  cursor: pointer;
}
/* Op het paarse filterblok een wit pijltje */
.sgt-dash-filters select {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-position: right 13px center;
  padding-right: 38px;
}
.sgt-root select::-ms-expand { display: none; }
/* Safari zet een eigen binnenrand op een select met een lange lijst */
.sgt-root select:focus-visible { outline: 3px solid var(--sgt-geel); outline-offset: 2px; }

/* Ook de invoervelden gelijktrekken: Safari geeft ze anders afgeronde
   hoeken en een eigen binnenschaduw. */
.sgt-root input[type="text"],
.sgt-root input[type="email"],
.sgt-root input[type="tel"],
.sgt-root input[type="url"],
.sgt-root input[type="number"],
.sgt-root input[type="date"],
.sgt-root input[type="password"],
.sgt-root textarea {
  appearance: none;
  -webkit-appearance: none;
  box-shadow: none;
}
/* Het postcodeveld houdt zijn eigen, grotere opmaak */
.sgt-veld--pc input { padding: 15px 18px; font-size: 1.4rem; text-align: center; }

/* iOS zoomt in op een veld met een letter kleiner dan 16px */
@media (max-width: 640px) {
  .sgt-root input,
  .sgt-root select,
  .sgt-root textarea { font-size: 16px; }
}

/* Uitgelichte agenda zonder activiteiten */
.sgt-uitgelicht-leeg {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
  background: var(--sgt-creme);
  border-radius: 18px;
  padding: 24px;
}
.sgt-uitgelicht-link { color: var(--sgt-paars); font-weight: 700; }
/* Zonder activiteiten: kop, tekst en knoppen in het midden (6.31.5) */
.sgt-uitgelicht--leeg .sgt-uitgelicht-kop { text-align: center; }
.sgt-uitgelicht--leeg .sgt-uitgelicht-kop p { max-width: 640px; margin-left: auto; margin-right: auto; }
.sgt-uitgelicht--leeg .sgt-uitgelicht-leeg { justify-content: center; text-align: center; }
.sgt-uitgelicht-beheer {
  margin-top: 14px;
  background: #FDF3DC;
  border-left: 5px solid var(--sgt-geel);
  border-radius: 0 12px 12px 0;
  padding: 14px 18px;
}
.sgt-uitgelicht-beheer strong {
  display: block;
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #8A6A12;
  margin-bottom: 4px;
}
.sgt-uitgelicht-beheer p { margin: 0; font-size: .92rem; color: #58736B; line-height: 1.6; }

/* ---------------------------------------------------------------
   Onderdelen van Mijn omgeving (v5.19)
--------------------------------------------------------------- */
.sgt-dash-sectie--balk { padding-top: 20px !important; padding-bottom: 0 !important; }
.sgt-omgeving-balk {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.sgt-omgeving-balk a {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  padding: 9px 20px;
  border-radius: 999px;
  background: #fff;
  color: var(--sgt-ink);
  font-weight: 600;
  font-size: .95rem;
  text-decoration: none;
  border: 2px solid transparent;
  transition: border-color .15s ease, background .15s ease;
}
.sgt-omgeving-balk a:hover { border-color: var(--sgt-paars); }
.sgt-omgeving-balk a.is-actief {
  background: var(--sgt-ink);
  color: #fff;
  border-color: var(--sgt-ink);
}

.sgt-omgeving-blok {
  background: #fff;
  border-radius: 20px;
  padding: clamp(22px, 3vw, 34px);
}
.sgt-omgeving-blokkop {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}
.sgt-omgeving-blokkop h3 {
  font-family: var(--sgt-font-kop);
  font-size: clamp(1.3rem, 2.6vw, 1.7rem);
  font-weight: 800;
  color: var(--sgt-ink);
  margin: 0 0 4px;
}
.sgt-omgeving-blokkop p { margin: 0; color: #58736B; font-size: .96rem; }
.sgt-omgeving-blok h4 {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--sgt-ink);
  margin: 26px 0 12px;
}

/* Balkje met de compleetheid van het profiel */
.sgt-omgeving-meter {
  flex: 0 0 120px;
  height: 10px;
  border-radius: 999px;
  background: #F1F8F3;
  overflow: hidden;
}
.sgt-omgeving-meter > span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--sgt-roze), var(--sgt-paars));
}

/* Formulier */
.sgt-omgeving-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.sgt-omgeving-form .sgt-veld--breed { grid-column: 1 / -1; }
.sgt-omgeving-form label {
  display: block;
  font-weight: 600;
  color: var(--sgt-ink);
  margin-bottom: 6px;
  font-size: .93rem;
}
.sgt-omgeving-form input:disabled {
  background: #F1F8F3;
  color: #58736B;
  cursor: not-allowed;
}
.sgt-omgeving-form .sgt-veld-hulp { margin-top: 6px; display: block; }
.sgt-omgeving-goed {
  background: #DDF3E5;
  border-left: 5px solid #176B4D;
  border-radius: 0 12px 12px 0;
  padding: 14px 18px;
  margin: 0 0 22px;
  color: #176B4D;
  font-weight: 600;
}

/* Lijsten met activiteiten of facturen */
.sgt-omgeving-lijst { display: grid; gap: 10px; }
.sgt-omgeving-regel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  background: var(--sgt-creme);
  border-radius: 14px;
  padding: 14px 18px;
}
.sgt-omgeving-datum {
  flex: 0 0 48px;
  height: 52px;
  background: var(--sgt-paars);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #fff;
}
.sgt-omgeving-dag { font-size: 1.25rem; font-weight: 800; line-height: 1; }
.sgt-omgeving-maand {
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--sgt-geel);
}
.sgt-omgeving-regel-tekst { flex: 1 1 200px; display: flex; flex-direction: column; min-width: 0; }
.sgt-omgeving-regel-tekst strong { color: var(--sgt-ink); }
.sgt-omgeving-regel-tekst span { font-size: .9rem; color: #58736B; }
.sgt-omgeving-bedrag { font-weight: 700; color: var(--sgt-ink); }
.sgt-omgeving-status {
  border-radius: 999px;
  padding: 4px 14px;
  font-size: .84rem;
  font-weight: 700;
  white-space: nowrap;
}
.sgt-omgeving-status.is-goed  { background: #DDF3E5; color: #176B4D; }
.sgt-omgeving-status.is-wacht { background: #FDF3DC; color: #8A6A12; }
.sgt-omgeving-status.is-nee   { background: #FDECEC; color: #B32525; }
.sgt-omgeving-pdf {
  color: var(--sgt-paars);
  font-weight: 700;
  text-transform: uppercase;
  font-size: .8rem;
  letter-spacing: .04em;
}
.sgt-omgeving-leeg {
  background: var(--sgt-creme);
  border-radius: 14px;
  padding: 20px;
  margin: 0;
  color: #58736B;
  line-height: 1.6;
}
.sgt-omgeving-klein { margin: 18px 0 0; font-size: .89rem; color: #58736B; line-height: 1.6; }

/* Pakketkaart */
.sgt-omgeving-pakket {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  background: var(--sgt-creme);
  border-radius: 16px;
  padding: 20px 22px;
}
.sgt-omgeving-pakketnaam {
  display: block;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--sgt-ink);
}
.sgt-omgeving-pakketprijs {
  display: block;
  font-size: 1.7rem;
  font-weight: 800;
  color: var(--sgt-paars);
  line-height: 1.2;
}
.sgt-omgeving-bevat { margin: 16px 0 0; padding-left: 20px; color: #58736B; line-height: 1.7; }

@media (max-width: 640px) {
  .sgt-omgeving-form { grid-template-columns: 1fr; }
  .sgt-omgeving-balk a { flex: 1 1 auto; justify-content: center; }
}

/* Locaties, team en regiorapportage in de eigen omgeving (v5.20) */
.sgt-omgeving-fout {
  background: #FDECEC;
  border-left: 5px solid #B32525;
  border-radius: 0 12px 12px 0;
  padding: 14px 18px;
  margin: 0 0 22px;
  color: #B02020;
  font-weight: 600;
}
.sgt-omgeving-knoppen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin-top: 4px;
}
.sgt-omgeving-stil { color: var(--sgt-paars); font-weight: 600; }
.sgt-omgeving-wis {
  background: none;
  border: none;
  color: #B02020;
  font-family: inherit;
  font-size: .92rem;
  font-weight: 600;
  cursor: pointer;
  padding: 6px 0;
  text-decoration: underline;
}
.sgt-omgeving-wis:hover { color: #8A1818; }
.sgt-omgeving-inline { display: inline; }
.sgt-omgeving-periode {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: .85rem;
  color: #58736B;
}
.sgt-omgeving-periode select { min-width: 150px; }
.sgt-omgeving-blok .sgt-dash-tabel-wrap { margin-top: 4px; }

/* ---------------------------------------------------------------
   Keuzelijsten op mobiel (v5.21)
   Op het paarse filterblok stond een doorschijnende vulling met witte
   letters. Op een telefoon geeft dat te weinig contrast, en iOS tekent
   de gekozen waarde soms in zijn eigen kleur. Daarom daar een witte
   lijst met donkere letters.
--------------------------------------------------------------- */
@media (max-width: 780px) {
  .sgt-dash-filters { gap: 10px; }
  .sgt-dash-filters label {
    flex: 1 1 100%;
    color: #fff;
    font-size: .85rem;
  }
  .sgt-dash-filters select {
    background-color: #fff;
    border-color: #fff;
    color: var(--sgt-ink);
    min-height: 48px;
    padding: 12px 16px;
    padding-right: 40px;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23183C32' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  }
  .sgt-dash-filters select:disabled { background-color: rgba(255,255,255,.55); }
  .sgt-dash-wis {
    align-self: flex-start;
    padding-bottom: 0;
    padding-top: 4px;
  }
  .sgt-dash-acties { margin-top: 18px; padding-top: 16px; }
  .sgt-dash-actie { flex: 1 1 100%; }
}

/* ---------------------------------------------------------------
   Agenda: rijen beter uit elkaar houden (v5.22)
   Alle kaarten waren wit met dezelfde tussenruimte, waardoor een lange
   lijst als één blok leest. Nu om en om een lichte vulling, met een
   duidelijkere scheiding tussen de maanden.
--------------------------------------------------------------- */
.sgt-agenda-lijst { display: block; }
.sgt-agenda-item {
  margin-bottom: 8px;
  border: 1px solid transparent;
  transition: border-color .15s ease, transform .15s ease;
}
.sgt-agenda-item:nth-of-type(even) {
  background: var(--sgt-creme);
  border-color: rgba(24, 60, 50, .06);
}
.sgt-agenda-item:hover {
  border-color: var(--sgt-paars);
  transform: translateY(-2px);
}
.sgt-agenda-maand {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 30px 0 12px;
  color: var(--sgt-ink);
}
.sgt-agenda-maand::after {
  content: '';
  flex: 1 1 auto;
  height: 2px;
  background: rgba(24, 60, 50, .12);
  border-radius: 2px;
}
.sgt-agenda-maand:first-of-type { margin-top: 6px; }


/* ---------------------------------------------------------------
   Vraagscherm op grote schermen (v6.0.4)
--------------------------------------------------------------- */
@media (min-width: 900px) {
  /* Geen minimumhoogte meer, ook niet op brede schermen. Het blok is
     overal precies zo hoog als de inhoud, met gelijke ruimte boven en
     onder. Daardoor staat de tekst vanzelf in het midden van het vlak
     en kan er in geen enkele browser iets zakken. */
  .sgt-vraagblok { align-items: center; }
}

/* ---------------------------------------------------------------
   Meegroeien met de pagina (v6.1.0)
   Het thema maakt van de pagina een kolom die het scherm vult. Het
   gekleurde vlak rekt daarin mee, zodat er onderaan geen witte strook
   overblijft. De inhoud zelf blijft gewoon bovenaan staan; alleen de
   voortgangsbalk zakt naar de onderkant.
--------------------------------------------------------------- */
.sg-app-pagina .sgt-root {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
}
.sg-app-pagina .sgt-root > .sgt-scherm { flex: 1 0 auto; }

/* ---------------------------------------------------------------
   Van check naar actie (v6.2.0)
--------------------------------------------------------------- */
.sgt-route {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
  gap: 10px;
  align-items: stretch;
}
.sgt-route-stap {
  display: flex;
  flex-direction: column;
  background: var(--sgt-creme);
  border-radius: 16px;
  padding: 20px 18px;
}
.sgt-route-cijfer {
  font-family: var(--sgt-font-kop);
  font-size: 2.2rem;
  font-weight: 800;
  color: var(--sgt-paars-diep);
  line-height: 1.05;
}
.sgt-route-pct {
  font-size: .78rem;
  font-weight: 700;
  color: var(--sgt-tekst-licht);
  margin-bottom: 6px;
}
.sgt-route-naam {
  font-size: 1rem;
  font-weight: 700;
  color: var(--sgt-ink);
  margin: 4px 0 4px;
}
.sgt-route-uitleg {
  font-size: .86rem;
  color: var(--sgt-tekst-licht);
  line-height: 1.5;
}
.sgt-route-pijl {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--sgt-paars);
  opacity: .6;
}

/* De eerste stap is het vertrekpunt en krijgt daarom accent */
.sgt-route-stap:first-child {
  background: var(--sgt-paars-diep);
}
.sgt-route-stap:first-child .sgt-route-cijfer { color: var(--sgt-geel); }
.sgt-route-stap:first-child .sgt-route-naam   { color: #fff; }
.sgt-route-stap:first-child .sgt-route-uitleg { color: rgba(255,255,255,.85); }

.sgt-route-zin {
  background: #fff;
  border-left: 5px solid var(--sgt-geel);
  border-radius: 0 14px 14px 0;
  padding: 16px 20px;
  margin: 22px 0 0;
  font-size: 1.02rem;
  line-height: 1.65;
  color: var(--sgt-ink);
}
.sgt-route-zin strong { color: var(--sgt-paars-diep); }
.sgt-route-zin--leeg { color: var(--sgt-tekst-licht); font-size: .96rem; }

@media (max-width: 900px) {
  .sgt-route { grid-template-columns: 1fr 1fr; gap: 12px; }
  .sgt-route-pijl { display: none; }
}
@media (max-width: 520px) {
  .sgt-route { grid-template-columns: 1fr; }
}

/* Aanbieder controleert zijn vermeldingen (v6.4) */
.sgt-aanbieder-regel {
  background: var(--sgt-creme);
  border-radius: 14px;
  padding: 16px 18px;
  margin-bottom: 12px;
}
.sgt-aanbieder-kop {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 10px;
}
.sgt-aanbieder-kop strong { color: var(--sgt-ink); }
.sgt-aanbieder-kop span {
  font-size: .82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--sgt-paars);
}
.sgt-aanbieder-label {
  display: block;
  font-size: .85rem;
  font-weight: 600;
  color: var(--sgt-tekst-licht);
  margin: 10px 0 4px;
}
.sgt-aanbieder-regel textarea,
.sgt-aanbieder-regel input[type="url"] {
  width: 100%;
  box-sizing: border-box;
  border: 2px solid #CFE6D8;
  border-radius: 10px;
  padding: 10px 12px;
  font-family: inherit;
  font-size: .95rem;
  background: #fff;
}
.sgt-check--blok {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  font-size: .9rem;
  color: var(--sgt-tekst-licht);
}

/* Blok dat laat zien wat een groter pakket toevoegt (v6.9) */
.sgt-dash-slot {
  background: var(--sgt-creme);
  border: 2px dashed #CFE6D8;
  border-radius: 18px;
  padding: clamp(22px, 3vw, 32px);
  text-align: left;
}
.sgt-dash-slot h3 {
  font-family: var(--sgt-font-kop);
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--sgt-ink);
  margin: 0 0 8px;
}
.sgt-dash-slot p {
  margin: 0 0 18px;
  color: var(--sgt-tekst-licht);
  line-height: 1.65;
  max-width: 46em;
}

/* ---------------------------------------------------------------
   Filters in het dashboard (v6.10)
   Deze keuzelijsten stonden met witte tekst op een doorschijnend vlak.
   De latere algemene regel voor keuzelijsten zette de tekstkleur op
   inkt, en daarmee werd het donker op donker. In plaats van weer met
   wit op doorschijnend te werken, geven we ze een vaste witte vulling:
   dat leest overal goed en de uitklaplijst ziet er meteen hetzelfde
   uit als in de rest van het scherm.
--------------------------------------------------------------- */
.sgt-dash-filters select,
.sgt-omgeving-periode select {
  background-color: #fff;
  border: 2px solid #fff;
  color: var(--sgt-ink);
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23183C32' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 13px 8px;
  padding-right: 40px;
}
.sgt-dash-filters select:disabled {
  background-color: rgba(255,255,255,.6);
  border-color: rgba(255,255,255,.6);
  color: #4A6259;
}
.sgt-dash-filters select:focus-visible {
  outline: 3px solid var(--sgt-geel);
  outline-offset: 2px;
}
/* De labels erboven staan op het donkere paneel; die mogen helder wit. */
.sgt-dash-filters label { color: rgba(255,255,255,.95); }
/* Lime op het paneelgroen haalt maar 3,4 en is dus te licht voor een
   tekstlink. Wit haalt 4,8. */
.sgt-dash-wis { color: #fff; text-decoration: underline; }

/* Onderdeel waar nog te weinig gegevens voor zijn (v6.13.2) */
.sgt-dash-leeg {
  background: var(--sgt-creme);
  border-radius: 14px;
  padding: 18px 20px;
  margin: 14px 0 0;
  color: var(--sgt-tekst-licht);
  line-height: 1.65;
}

/* ---------------------------------------------------------------
   Knop naar de uitlegfilm, naast "Bekijk het dashboard" (v6.18)
   Ziet eruit als de lijnknop ernaast, maar met een afspeeldriehoekje.
   Het is een button en geen link, want er wordt geen pagina geopend.
--------------------------------------------------------------- */
.sgt-knop-film {
  display: inline-flex;
  align-items: center;
  /* Ook horizontaal centreren: op mobiel worden de knoppen op volle
     breedte gezet, en text-align doet niets bij een flexvak. */
  justify-content: center;
  gap: 10px;
  cursor: pointer;
  /* Een button erft de letter niet van de pagina; daarom expliciet. */
  font-family: var(--sgt-font-kop);
  font-size: 1rem;
  line-height: 1.2;
  min-height: 52px;
}
.sgt-knop-play {
  font-size: .72em;
  line-height: 1;
  opacity: .9;
}

/* De film zelf, over de pagina heen */
.sgt-film-laag {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(13,56,43,.92);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.sgt-film-laag[hidden] { display: none; }
.sgt-film-doos {
  position: relative;
  width: min(1100px, 100%);
}
.sgt-film-doos video {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 16px;
  background: #000;
  box-shadow: 0 24px 60px rgba(0,0,0,.4);
}
.sgt-film-sluit {
  position: absolute;
  top: -48px;
  right: 0;
  background: none;
  border: none;
  color: #fff;
  font-size: 2.2rem;
  line-height: 1;
  cursor: pointer;
  padding: 4px 10px;
}
.sgt-film-sluit:hover { color: var(--sgt-geel); }

@media (max-width: 700px) {
  .sgt-pro-film-knop { width: 100%; justify-content: center; }
  .sgt-film-sluit { top: -42px; }
}

/* De presentatie in het filmvenster: altijd 16:9 */
.sgt-film-kader {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  border-radius: 16px;
  overflow: hidden;
  background: #0A2A20;
  box-shadow: 0 24px 60px rgba(0,0,0,.4);
}
.sgt-film-kader iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ---------------------------------------------------------------
   "Waarom dit past" — het blok onder de hero (v6.19)
--------------------------------------------------------------- */
.sgt-pro-waarom {
  background: var(--sgt-creme);
  border-radius: 22px;
  padding: clamp(26px, 3.6vw, 44px);
  margin: 0 0 40px;
}
.sgt-pro-waarom h3 {
  font-family: var(--sgt-font-kop);
  font-size: clamp(1.4rem, 2.6vw, 1.95rem);
  font-weight: 800;
  color: var(--sgt-ink);
  margin: 0 0 12px;
  line-height: 1.2;
}
.sgt-pro-waarom p {
  margin: 0;
  color: #3C5A50;
  font-size: 1.06rem;
  line-height: 1.7;
  max-width: 62ch;
}
.sgt-pro-waarom-punten {
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 16px;
}
.sgt-pro-waarom-punten li {
  background: #fff;
  border-radius: 14px;
  padding: 18px 20px;
  border-left: 5px solid var(--sgt-geel);
}
.sgt-pro-waarom-punten strong {
  display: block;
  color: var(--sgt-ink);
  font-size: 1.02rem;
  margin-bottom: 5px;
}
.sgt-pro-waarom-punten span {
  font-size: .94rem;
  color: var(--sgt-tekst-licht);
  line-height: 1.55;
}

/* ---------------------------------------------------------------
   Terug naar de eigen omgeving (v6.20.1)
   Eén rustige tekstlink linksboven. Twee knoppen was te veel gewicht
   voor iets wat je zelden nodig hebt; uitloggen staat in de voet.
--------------------------------------------------------------- */
.sgt-dash-kruimel {
  padding-top: 20px !important;
  padding-bottom: 0 !important;
}
.sgt-terug {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .95rem;
  font-weight: 600;
  color: var(--sgt-paars-diep);
  text-decoration: none;
  padding: 6px 2px;
}
.sgt-terug:hover { color: var(--sgt-ink-diep); text-decoration: underline; }
.sgt-terug span { font-size: 1.15em; line-height: 1; }

/* ---------------------------------------------------------------
   Demoaanvraag (v6.21)
--------------------------------------------------------------- */
.sgt-demo-laag {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(13,56,43,.9);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  overflow-y: auto;
}
.sgt-demo-laag[hidden] { display: none; }
.sgt-demo-doos {
  position: relative;
  background: #fff;
  border-radius: 20px;
  padding: clamp(24px, 3.4vw, 40px);
  width: min(620px, 100%);
  max-height: 92vh;
  overflow-y: auto;
}
.sgt-demo-doos h3 {
  font-family: var(--sgt-font-kop);
  font-size: clamp(1.4rem, 2.6vw, 1.8rem);
  font-weight: 800;
  color: var(--sgt-ink);
  margin: 0 0 10px;
}
.sgt-demo-doos > .sgt-demo-inhoud > p {
  margin: 0 0 20px;
  color: var(--sgt-tekst-licht);
  line-height: 1.65;
}
.sgt-demo-sluit {
  position: absolute;
  top: 12px;
  right: 16px;
  background: none;
  border: none;
  font-size: 1.9rem;
  line-height: 1;
  color: var(--sgt-tekst-licht);
  cursor: pointer;
  padding: 4px 8px;
}
.sgt-demo-sluit:hover { color: var(--sgt-ink); }

.sgt-demo-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.sgt-demo-form .sgt-veld--breed { grid-column: 1 / -1; }
.sgt-demo-form label {
  display: block;
  font-weight: 600;
  color: var(--sgt-ink);
  margin-bottom: 6px;
  font-size: .93rem;
}
.sgt-demo-form input,
.sgt-demo-form textarea {
  width: 100%;
  box-sizing: border-box;
  border: 2px solid #CFE6D8;
  border-radius: 12px;
  padding: 12px 14px;
  font-family: inherit;
  font-size: 1rem;
  color: var(--sgt-ink);
  background: #fff;
}
.sgt-demo-form input:focus,
.sgt-demo-form textarea:focus { outline: none; border-color: var(--sgt-paars-diep); }

/* Het lokveld voor robots: onzichtbaar, maar niet met display:none —
   dan vullen sommige ze niet in. */
.sgt-demo-val {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.sgt-demo-fout {
  grid-column: 1 / -1;
  margin: 0;
  background: #FDECEC;
  border-left: 5px solid #B32525;
  border-radius: 0 10px 10px 0;
  padding: 12px 16px;
  color: #B02020;
  font-weight: 600;
}
.sgt-demo-klaar { text-align: center; padding: 20px 0 8px; }
.sgt-demo-vink {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--sgt-geel);
  color: var(--sgt-ink);
  font-size: 1.8rem;
  margin-bottom: 16px;
}
.sgt-demo-klaar p { color: var(--sgt-tekst-licht); line-height: 1.65; margin: 0; }

@media (max-width: 560px) {
  .sgt-demo-form { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------
   Vraag naast aanbod (v6.22)
--------------------------------------------------------------- */
.sgt-va {
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid #DDE7E1;
  margin-top: 6px;
}
.sgt-va-rij {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 18px;
  border-bottom: 1px solid #EDF4F0;
}
.sgt-va-rij:last-child { border-bottom: none; }
.sgt-va-rij:nth-child(even) { background: #FBFDFC; }
.sgt-va-kop {
  background: var(--sgt-creme) !important;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--sgt-tekst-licht);
}
.sgt-va-naam { flex: 0 0 30%; font-size: .98rem; color: var(--sgt-ink); }
.sgt-va-kolom { flex: 1; display: flex; align-items: center; gap: 10px; }
.sgt-va-meter {
  flex: 1;
  height: 9px;
  border-radius: 5px;
  background: #EDF4F0;
  overflow: hidden;
}
.sgt-va-meter i { display: block; height: 100%; border-radius: 5px; }
.sgt-va-meter--vraag i  { background: var(--sgt-paars-diep); }
.sgt-va-meter--aanbod i { background: #A9C2B6; }
.sgt-va-cijfer {
  flex: 0 0 34px;
  text-align: right;
  font-size: .88rem;
  font-weight: 700;
  color: var(--sgt-ink);
}
.sgt-va-oordeel {
  flex: 0 0 22%;
  text-align: right;
  font-size: .86rem;
  font-weight: 700;
}
.sgt-va-oordeel.is-gat  { color: #A85B00; }
.sgt-va-oordeel.is-ruim { color: var(--sgt-tekst-licht); }
.sgt-va-oordeel.is-ok   { color: var(--sgt-goed); }

@media (max-width: 700px) {
  .sgt-va-rij { flex-wrap: wrap; gap: 8px; }
  .sgt-va-naam { flex: 0 0 100%; font-weight: 600; }
  .sgt-va-kolom { flex: 1 1 40%; }
  .sgt-va-oordeel { flex: 0 0 100%; text-align: left; }
  .sgt-va-kop { display: none; }
}

/* De vraag-aanbodtabel als voorbeeld op de professionalpagina */
.sgt-va--voorbeeld { margin-top: 10px; background: #fff; }
.sgt-pro-tussenkop {
  font-family: var(--sgt-font-kop);
  font-size: clamp(1.15rem, 2.2vw, 1.5rem);
  font-weight: 800;
  color: var(--sgt-ink);
  margin: 34px 0 8px;
}
.sgt-pro-inleiding {
  margin: 0 0 6px;
  color: var(--sgt-tekst-licht);
  line-height: 1.65;
  max-width: 60ch;
}

/* ---------------------------------------------------------------
   Demo-omgeving (v6.29)
   Moet opvallen zonder alarmerend te zijn: iemand die meekijkt in een
   presentatie mag nooit denken dat deze cijfers echt zijn.
--------------------------------------------------------------- */
.sgt-demobalk {
  background: var(--sgt-geel);
  color: var(--sgt-ink);
  border-radius: 14px;
  padding: 14px 20px;
  margin: 0 0 18px;
  font-size: .95rem;
  line-height: 1.55;
}
.sgt-demobalk strong {
  display: inline-block;
  font-weight: 800;
  margin-right: 8px;
  text-transform: uppercase;
  font-size: .78rem;
  letter-spacing: .08em;
  vertical-align: 1px;
}