/*==========================================================================
  Kennis-Kunde — paginaspecifieke laag, bovenop brand.css
==========================================================================*/

/* Kennis-Kunde-beeldmerk: eigen kleuren, dus niet wit maken. */
.header__area-menubar-left-logo img,
.et-footer__logo img {
  max-height: 78px;
  width: auto;
}

.et-footer__logo img {
  max-height: 84px;
  margin-bottom: 24px;
}

/* Eigen herofoto. De foto is een close-up, dus links houden zodat haar
   gezicht rechts van de tekst uitkomt, en de overlay rechts lichter maken. */
.kk-hero {
  background-image: url(../img/et/hero-handen-schudden.jpg);
  background-position: center right;
  --hero-gradient: linear-gradient(
    100deg,
    rgba(22, 26, 28, 0.96) 0%,
    rgba(22, 26, 28, 0.9) 36%,
    rgba(22, 26, 28, 0.58) 64%,
    rgba(22, 26, 28, 0.2) 100%
  );
}

.kk-hero h1 {
  font-size: 56px;
}

.kk-hero h1 span {
  font-size: 46px;
}

/*----------  Waarden  ----------*/
.kk-values {
  background: #fff;
}

/*----------  Cijfers  ----------*/
.kk-stats {
  background: var(--brand-green-deep);
  padding: 64px 0;
}

.kk-stats__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  text-align: center;
}

.kk-stats__item {
  border-right: 1px solid rgba(var(--accent-rgb), 0.22);
}

.kk-stats__item:last-child {
  border-right: 0;
}

.kk-stats__item strong {
  display: block;
  font-family: var(--heading-font);
  font-size: 46px;
  line-height: 1;
  color: var(--primary-color);
  margin-bottom: 10px;
}

.kk-stats__item span {
  font-size: 14px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
}

/*----------  Citaten  ----------*/
.kk-quotes {
  background: var(--surface-1);
}

.kk-quote {
  position: relative;
  height: 100%;
  padding: 38px 36px 32px;
  background: #fff;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
}

.kk-quote::before {
  content: "\201C";
  position: absolute;
  top: 6px;
  right: 24px;
  font-family: var(--heading-font);
  font-size: 90px;
  line-height: 1;
  color: rgba(var(--accent-rgb), 0.24);
}

.kk-quote p {
  position: relative;
  font-size: 16px;
  line-height: 29px;
  color: var(--body-color);
  margin-bottom: 22px;
}

.kk-quote__who strong {
  display: block;
  font-family: var(--heading-font);
  font-size: 17px;
  color: var(--heading-color);
}

.kk-quote__who span {
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--primary-ink);
}

/*----------  Veelgestelde vragen  ----------*/
.kk-faq {
  background: #fff;
}

.kk-acc {
  border-bottom: 1px solid var(--border-soft);
}

.kk-acc summary {
  position: relative;
  cursor: pointer;
  list-style: none;
  padding: 24px 52px 24px 0;
  font-family: var(--heading-font);
  font-size: 19px;
  font-weight: 600;
  color: var(--heading-color);
  transition: color 0.25s ease-out;
}

.kk-acc summary::-webkit-details-marker {
  display: none;
}

.kk-acc summary::after {
  content: "";
  position: absolute;
  right: 6px;
  top: 32px;
  width: 12px;
  height: 12px;
  border-right: 2px solid var(--primary-color);
  border-bottom: 2px solid var(--primary-color);
  transform: rotate(45deg);
  transition: transform 0.25s ease-out;
}

.kk-acc[open] summary::after {
  transform: rotate(-135deg);
  top: 38px;
}

.kk-acc summary:hover {
  color: var(--primary-ink);
}

.kk-acc p {
  margin: 0;
  padding: 0 40px 26px 0;
  font-size: 16px;
  line-height: 30px;
  color: var(--body-color);
}

/*----------  Responsive  ----------*/
@media (max-width: 991px) {
  .kk-hero h1 {
    font-size: 40px;
  }
  .kk-hero h1 span {
    font-size: 34px;
  }
  .kk-stats__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 36px 24px;
  }
  .kk-stats__item:nth-child(2n) {
    border-right: 0;
  }
}

@media (max-width: 767px) {
  .kk-hero h1 {
    font-size: 32px;
  }
  .kk-hero h1 span {
    font-size: 27px;
  }
  .kk-stats__grid {
    grid-template-columns: 1fr;
  }
  .kk-stats__item {
    border-right: 0;
  }
  .kk-quote {
    padding: 30px 26px 26px;
  }
  .kk-acc summary {
    font-size: 17px;
  }
}

/*----------  Actieve navigatie + resultaatteller  ----------*/
.header__area-menubar-right-menu ul li a.is-active {
  color: var(--primary-color);
}

.et-resultcount {
  text-align: center;
  margin: -34px 0 44px;
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.et-resultcount span {
  font-family: var(--heading-font);
  font-weight: 700;
  color: var(--heading-color);
}

/* Kaarttitel is nu een link */
.et-card__body h4 a:hover {
  color: var(--primary-ink);
}

/*==========================================================================
  Cursusdetail
==========================================================================*/
.kk-course { background: #fff; }

.kk-course .subtitle__one,
.kk-contact .subtitle__one {
  font-size: 13px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--primary-ink); margin-bottom: 14px;
}

.kk-course h2, .kk-contact h2 {
  font-size: 40px; line-height: 1.2; color: var(--heading-color); margin-bottom: 22px;
}

.kk-course p, .kk-contact > .container p {
  font-size: 16px; line-height: 30px; color: var(--body-color); margin-bottom: 18px;
}

.kk-facts {
  padding: 34px 36px; background: var(--surface-2);
  border-left: 3px solid var(--primary-color); border-radius: var(--radius);
}

.kk-facts h5 { font-size: 19px; color: var(--heading-color); margin-bottom: 20px; }

.kk-facts dl { margin: 0; }

.kk-facts dt {
  font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--primary-ink); font-weight: 700; margin-top: 16px;
}

.kk-facts dt:first-child { margin-top: 0; }

.kk-facts dd {
  margin: 4px 0 0; font-family: var(--heading-font); font-size: 16px;
  color: var(--heading-color);
}

/*----------  Drie varianten  ----------*/
.kk-variants { background: var(--surface-1); }

.kk-variant {
  position: relative; height: 100%; padding: 38px 32px 34px; background: #fff;
  border: 1px solid var(--border-soft); border-radius: var(--radius);
  transition: transform 0.35s ease-out, box-shadow 0.35s ease-out, border-color 0.35s ease-out;
}

.kk-variant:hover { transform: translateY(-6px); box-shadow: 0 24px 48px rgba(16,24,32,0.12); }

.kk-variant.is-best { border-color: var(--primary-color); border-width: 2px; }

.kk-variant__tag {
  position: absolute; top: -13px; left: 32px; background: var(--primary-color);
  color: var(--heading-color); font-family: var(--heading-font); font-size: 11px;
  font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  padding: 6px 14px; border-radius: 999px;
}

.kk-variant__icon {
  width: 58px; height: 58px; display: flex; align-items: center; justify-content: center;
  margin-bottom: 22px; border-radius: 50%; background: rgba(var(--brand-rgb), 0.08);
  color: var(--brand-green); font-size: 24px;
}

.kk-variant h4 { font-size: 21px; color: var(--heading-color); margin-bottom: 12px; }

.kk-variant > p { font-size: 15px; line-height: 27px; color: var(--body-color); margin-bottom: 20px; }

.kk-variant ul { margin: 0 0 24px; padding: 0; list-style: none; }

.kk-variant ul li {
  position: relative; padding-left: 26px; margin-bottom: 10px;
  font-size: 15px; color: var(--body-color);
}

.kk-variant ul li::before {
  content: ""; position: absolute; left: 2px; top: 8px; width: 10px; height: 6px;
  border-left: 2px solid var(--primary-color); border-bottom: 2px solid var(--primary-color);
  transform: rotate(-45deg);
}

/*----------  Inhoud  ----------*/
.kk-contents { background: #fff; }

.kk-content {
  height: 100%; padding: 32px 30px; background: var(--surface-1);
  border: 1px solid var(--border-soft); border-radius: var(--radius);
}

.kk-content h5 {
  display: flex; align-items: center; gap: 12px; font-size: 18px;
  color: var(--heading-color); margin-bottom: 20px;
}

.kk-content h5 i { color: var(--primary-ink); font-size: 20px; }

.kk-content ul { margin: 0; padding: 0; list-style: none; }

.kk-content ul li {
  padding: 10px 0; border-bottom: 1px solid var(--border-soft);
  font-size: 15px; line-height: 25px; color: var(--body-color);
}

.kk-content ul li:last-child { border-bottom: 0; }

/*==========================================================================
  Contact
==========================================================================*/
.kk-contact { background: #fff; }

.kk-contact__block { margin-top: 34px; }

.kk-contact__item { display: flex; gap: 18px; align-items: flex-start; margin-bottom: 26px; }

.kk-contact__item i {
  flex: 0 0 auto; width: 48px; height: 48px; display: flex; align-items: center;
  justify-content: center; border-radius: 50%;
  background: rgba(var(--brand-rgb), 0.08); color: var(--brand-green); font-size: 19px;
}

.kk-contact__item span {
  display: block; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--primary-ink); margin-bottom: 4px;
}

.kk-contact__item a {
  font-family: var(--heading-font); font-size: 16px; color: var(--heading-color);
}

.kk-contact__item a:hover { color: var(--primary-ink); }

.kk-form label {
  display: block; font-family: var(--heading-font); font-size: 13px; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--heading-color);
  margin: 0 0 8px;
}

.kk-form input, .kk-form select, .kk-form textarea {
  width: 100%; margin-bottom: 22px; padding: 14px 16px; background: var(--surface-1);
  border: 1px solid var(--border-soft); border-radius: var(--radius);
  font-family: var(--body-font); font-size: 15px; color: var(--heading-color);
  transition: border-color 0.25s ease-out;
}

.kk-form input:focus, .kk-form select:focus, .kk-form textarea:focus {
  outline: none; border-color: var(--primary-color);
}

.kk-form textarea { resize: vertical; }

.kk-form__note {
  display: inline-block; margin: 0 0 0 18px; font-size: 13px; color: var(--muted);
}

@media (max-width: 991px) {
  .kk-course h2, .kk-contact h2 { font-size: 32px; }
  .kk-form__note { display: block; margin: 14px 0 0; }
}

/*==========================================================================
  Inloggen, wachtwoord, aanmelden
==========================================================================*/
.kk-auth { background: var(--surface-1); }

.kk-auth__card {
  padding: 42px 40px 38px; background: #fff;
  border: 1px solid var(--border-soft); border-radius: var(--radius);
  box-shadow: 0 22px 50px rgba(16, 24, 32, 0.07);
}

.kk-auth__lead {
  margin: 0 0 28px; font-size: 16px; line-height: 27px; color: var(--body-color);
}

.kk-auth__card label {
  display: block; font-family: var(--heading-font); font-size: 13px; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--heading-color);
  margin: 0 0 8px;
}

.kk-auth__card input[type="text"],
.kk-auth__card input[type="email"],
.kk-auth__card input[type="password"] {
  width: 100%; margin-bottom: 22px; padding: 14px 16px; background: var(--surface-1);
  border: 1px solid var(--border-soft); border-radius: var(--radius);
  font-family: var(--body-font); font-size: 15px; color: var(--heading-color);
  transition: border-color 0.25s ease-out;
}

.kk-auth__card input:focus { outline: none; border-color: var(--primary-color); }

.kk-auth__check {
  display: flex !important; align-items: center; gap: 10px; margin-bottom: 26px;
  text-transform: none !important; letter-spacing: 0 !important;
  font-family: var(--body-font) !important; font-weight: 400 !important;
  font-size: 15px !important; color: var(--body-color) !important; cursor: pointer;
}

.kk-auth__check input { width: 17px; height: 17px; accent-color: var(--brand-green); }

.kk-auth__card .theme-btn { width: 100%; justify-content: center; }

.kk-auth__links {
  display: flex; flex-direction: column; gap: 10px; margin-top: 26px;
  padding-top: 24px; border-top: 1px solid var(--border-soft);
}

.kk-auth__links a {
  font-family: var(--heading-font); font-size: 14px; font-weight: 600;
  color: var(--primary-ink);
}

.kk-auth__links a:hover { color: var(--brand-green); }

.kk-auth__note {
  margin: 20px 0 0; font-size: 14px; line-height: 23px; color: var(--muted);
}

.kk-auth__demo {
  margin: 20px 0 0; text-align: center; font-size: 13px; color: var(--muted);
}

/*----------  Verlopen-melding  ----------*/
.kk-auth__card--notice { text-align: center; padding: 50px 44px 44px; }

.kk-auth__icon {
  width: 78px; height: 78px; margin: 0 auto 26px; display: flex;
  align-items: center; justify-content: center; border-radius: 50%;
  background: rgba(var(--accent-rgb), 0.16); color: var(--primary-ink); font-size: 32px;
}

.kk-auth__card--notice h3 {
  font-size: 26px; color: var(--heading-color); margin-bottom: 14px;
}

.kk-auth__card--notice p {
  font-size: 16px; line-height: 28px; color: var(--body-color); margin-bottom: 0;
}

.kk-auth__card--notice .kk-auth__links { align-items: center; }

/*==========================================================================
  Juridische pagina's
==========================================================================*/
.kk-prose { background: #fff; }

.kk-prose__body { max-width: 780px; margin: 0 auto; }

.kk-prose__body h1, .kk-prose__body h2, .kk-prose__body h3,
.kk-prose__body h4, .kk-prose__body h5 {
  color: var(--heading-color); margin: 44px 0 16px; line-height: 1.3;
}

.kk-prose__body h1 { font-size: 34px; margin-top: 0; }
.kk-prose__body h2 { font-size: 26px; }
.kk-prose__body h3 { font-size: 21px; }
.kk-prose__body h4, .kk-prose__body h5 { font-size: 18px; }

.kk-prose__body p {
  font-size: 16px; line-height: 30px; color: var(--body-color); margin: 0 0 18px;
}

.kk-prose__body ul, .kk-prose__body ol { margin: 0 0 20px; padding-left: 22px; }

.kk-prose__body li {
  font-size: 16px; line-height: 29px; color: var(--body-color); margin-bottom: 8px;
}

.kk-prose__body a { color: var(--primary-ink); text-decoration: underline; }

.kk-prose__body strong { color: var(--heading-color); }

.kk-prose__body table { width: 100%; margin: 0 0 24px; border-collapse: collapse; }

.kk-prose__body td, .kk-prose__body th {
  padding: 10px 12px; border: 1px solid var(--border-soft);
  font-size: 15px; line-height: 25px; color: var(--body-color); text-align: left;
}

@media (max-width: 767px) {
  .kk-auth__card { padding: 32px 26px 30px; }
  .kk-prose__body h1 { font-size: 27px; }
  .kk-prose__body h2 { font-size: 22px; }
}

/* Interne overzichtspagina */
.kk-content ul.ov li a { color: var(--brand-green); font-weight: 600; }
.kk-content ul.ov li a:hover { color: var(--primary-ink); }

/*==========================================================================
  Leeromgeving (ingelogd) — brede app-layout
==========================================================================*/
.kk-wide { max-width: 1680px; padding-left: 40px; padding-right: 40px; }
.kk-appbar__inner { max-width: 1680px; padding-left: 40px; padding-right: 40px; }
.kk-appbar__user { display: flex; align-items: center; gap: 14px; }

.kk-appbar__avatar {
  width: 42px; height: 42px; display: flex; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--primary-color); color: var(--heading-color);
  font-family: var(--heading-font); font-weight: 700; font-size: 14px;
}

.kk-appbar__name {
  display: flex; flex-direction: column; font-family: var(--heading-font);
  font-size: 15px; font-weight: 600; color: #fff; line-height: 1.3;
}

.kk-appbar__name small { font-size: 12px; font-weight: 400; color: rgba(255,255,255,0.55); }

.kk-appbar__out {
  margin-left: 8px; width: 38px; height: 38px; display: flex; align-items: center;
  justify-content: center; border-radius: 50%;
  border: 1px solid rgba(var(--accent-rgb), 0.3); color: var(--primary-color);
  transition: all 0.3s ease-out;
  /* Uitloggen is een knop in een formulier, geen link: zonder dit krijgt hij
     de standaardopmaak van de browser en zie je het icoontje niet meer. */
  background: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
}

.kk-appbar__out:hover { background: var(--primary-color); color: var(--heading-color); }

.kk-apphead { background: var(--brand-green-deep); padding: 190px 0 54px; }

.kk-apphead__eyebrow {
  display: block; font-family: var(--heading-font); font-size: 12px; font-weight: 700;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--primary-color);
  margin-bottom: 12px;
}

.kk-apphead h1 { color: #fff; font-size: 40px; line-height: 1.15; margin: 0; }

.kk-apphead p {
  margin: 14px 0 0; max-width: 720px; font-size: 16px; line-height: 27px;
  color: rgba(255,255,255,0.72);
}

.kk-apphead p strong { color: #fff; }
.kk-app { background: var(--surface-1); padding: 54px 0 80px; }

.kk-stat {
  height: 100%; padding: 26px 26px 22px; background: #fff;
  border: 1px solid var(--border-soft); border-radius: var(--radius);
}

.kk-stat > span {
  display: block; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--primary-ink); margin-bottom: 10px;
}

.kk-stat strong {
  display: block; font-family: var(--heading-font); font-size: 30px; line-height: 1;
  color: var(--heading-color);
}

.kk-stat small { display: block; margin-top: 10px; font-size: 13px; color: var(--muted); }
.kk-stat--warn { border-left: 3px solid var(--primary-color); }

.kk-bar {
  height: 6px; margin-top: 14px; border-radius: 99px;
  background: rgba(var(--brand-rgb), 0.12); overflow: hidden;
}

.kk-bar span { display: block; height: 100%; background: var(--brand-green); }

.kk-panel {
  background: #fff; border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  margin-bottom: 24px;
}

/* Staat een paneel als enige in zijn kolom, dan vult het die kolom, zodat
   kolommen naast elkaar even hoog eindigen. Staan er meer onder elkaar, dan
   neemt elk zijn eigen hoogte -- met height:100% werd elk paneel anders zo
   hoog als de hele kolom en bleef er een enorm wit vlak over. */
[class*="col-"] > .kk-panel:only-child { height: 100%; margin-bottom: 0; }

/* Inhoud die niet in een kop of een tabel zit, heeft zijn eigen ruimte nodig:
   het paneel zelf heeft geen binnenmarge. */
.kk-vak { padding: 24px 26px; }
.kk-vak > :last-child { margin-bottom: 0; }

.kk-panel__head {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 22px 26px; border-bottom: 1px solid var(--border-soft);
}

.kk-panel__head h3 { font-size: 19px; color: var(--heading-color); margin: 0; }

.kk-panel__head a, .kk-panel__meta {
  font-family: var(--heading-font); font-size: 13px; font-weight: 600;
  color: var(--primary-ink);
}

.kk-table { width: 100%; border-collapse: collapse; }

.kk-table th {
  padding: 14px 26px; font-family: var(--heading-font); font-size: 12px;
  font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--muted); text-align: left; border-bottom: 1px solid var(--border-soft);
}

.kk-table td {
  padding: 16px 26px; font-size: 15px; color: var(--body-color);
  border-bottom: 1px solid var(--border-soft);
}

.kk-table tr:last-child td { border-bottom: 0; }

.kk-table td a {
  font-family: var(--heading-font); font-size: 13px; font-weight: 600;
  color: var(--primary-ink); margin-left: 12px;
}

.kk-table td a:first-child { margin-left: 0; }
.kk-table .ta-r { text-align: right; }

.kk-pill {
  display: inline-block; padding: 4px 12px; border-radius: 99px;
  background: var(--surface-2); font-family: var(--heading-font); font-size: 13px;
  font-weight: 700; color: var(--muted);
}

.kk-pill--ok { background: rgba(var(--brand-rgb), 0.1); color: var(--brand-green); }
.kk-pill--low { background: rgba(var(--accent-rgb), 0.18); color: var(--primary-ink); }

.kk-next { padding: 24px 26px; border-bottom: 1px solid var(--border-soft); }
.kk-next--alt { border-bottom: 0; background: var(--surface-1); }

.kk-next__label {
  display: block; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--primary-ink); margin-bottom: 8px;
}

.kk-next h4 { font-size: 18px; color: var(--heading-color); margin-bottom: 6px; }
.kk-next p { font-size: 14px; color: var(--muted); margin-bottom: 16px; }

.kk-mat {
  display: flex; gap: 20px; height: 100%; padding: 26px; background: #fff;
  border: 1px solid var(--border-soft); border-radius: var(--radius);
  transition: transform 0.3s ease-out, box-shadow 0.3s ease-out, border-color 0.3s ease-out;
}

.kk-mat:hover {
  transform: translateY(-4px); border-color: var(--primary-color);
  box-shadow: 0 20px 40px rgba(16,24,32,0.1);
}

.kk-mat__icon {
  flex: 0 0 auto; width: 56px; height: 56px; display: flex; align-items: center;
  justify-content: center; border-radius: var(--radius);
  background: rgba(var(--brand-rgb), 0.08); color: var(--brand-green); font-size: 22px;
}

.kk-mat__body span {
  display: block; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--primary-ink); margin-bottom: 6px;
}

.kk-mat__body h4 { font-size: 18px; color: var(--heading-color); margin-bottom: 4px; }
.kk-mat__body p { margin: 0; font-size: 14px; color: var(--muted); }

.kk-cert {
  height: 100%; padding: 32px 30px; background: #fff;
  border: 1px solid var(--border-soft); border-top: 3px solid var(--primary-color);
  border-radius: var(--radius);
}

.kk-cert--todo { border-top-color: var(--border-soft); background: var(--surface-2); }

.kk-cert__seal {
  width: 58px; height: 58px; display: flex; align-items: center; justify-content: center;
  margin-bottom: 20px; border-radius: 50%; background: rgba(var(--accent-rgb), 0.18);
  color: var(--primary-ink); font-size: 24px;
}

.kk-cert h4 { font-size: 20px; color: var(--heading-color); margin-bottom: 18px; }
.kk-cert p { font-size: 15px; line-height: 26px; color: var(--body-color); }
.kk-cert dl { margin: 0 0 20px; }

.kk-cert dt {
  font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--primary-ink); font-weight: 700; margin-top: 12px;
}

.kk-cert dt:first-child { margin-top: 0; }

.kk-cert dd {
  margin: 3px 0 0; font-family: var(--heading-font); font-size: 15px;
  color: var(--heading-color);
}

@media (max-width: 991px) {
  .kk-wide, .kk-appbar__inner { padding-left: 20px; padding-right: 20px; }
  .kk-apphead { padding: 150px 0 40px; }
  .kk-apphead h1 { font-size: 30px; }
  .kk-appbar__name { display: none; }
  .kk-table th:nth-child(3), .kk-table td:nth-child(3) { display: none; }
}

/*----------  Toets maken  ----------*/
.kk-quiz { padding: 28px 30px 30px; }

.kk-quiz__top {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px;
}

.kk-quiz__num {
  font-family: var(--heading-font); font-size: 13px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--primary-ink);
}

.kk-quiz__timer {
  display: flex; align-items: center; gap: 9px; padding: 8px 16px; border-radius: 99px;
  background: rgba(var(--accent-rgb), 0.16); font-family: var(--heading-font);
  font-size: 15px; font-weight: 700; color: var(--primary-ink);
}

.kk-quiz h3 {
  margin: 24px 0 24px; font-size: 24px; line-height: 1.35; color: var(--heading-color);
}

.kk-option {
  display: flex; align-items: center; gap: 16px; margin-bottom: 12px; padding: 16px 20px;
  background: var(--surface-1); border: 1px solid var(--border-soft);
  border-radius: var(--radius); cursor: pointer; transition: all 0.25s ease-out;
}

.kk-option:hover { border-color: var(--primary-color); background: #fff; }
.kk-option input { accent-color: var(--brand-green); width: 18px; height: 18px; }

.kk-option__letter {
  width: 30px; height: 30px; display: flex; align-items: center; justify-content: center;
  border-radius: 50%; background: rgba(var(--brand-rgb), 0.08);
  font-family: var(--heading-font); font-size: 13px; font-weight: 700;
  color: var(--brand-green);
}

.kk-option__text { font-size: 15px; color: var(--heading-color); }

.kk-quiz__nav {
  display: flex; gap: 12px; justify-content: space-between; margin-top: 26px;
  padding-top: 24px; border-top: 1px solid var(--border-soft);
}

.kk-ghost--dark { border-color: var(--border-soft); color: var(--body-color); }
.kk-ghost--dark:hover { background: var(--heading-color); border-color: var(--heading-color); color: #fff; }

.kk-dots { display: flex; flex-wrap: wrap; gap: 8px; padding: 22px 26px; }

.kk-dot {
  width: 34px; height: 34px; display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius); background: var(--surface-1);
  border: 1px solid var(--border-soft); font-family: var(--heading-font);
  font-size: 13px; font-weight: 600; color: var(--muted);
}

.kk-dot.is-done { background: rgba(var(--brand-rgb), 0.1); border-color: transparent; color: var(--brand-green); }
.kk-dot.is-now { background: var(--primary-color); border-color: var(--primary-color); color: var(--heading-color); }

.kk-quiz__aside { padding: 0 26px 24px; }
.kk-quiz__aside p { font-size: 14px; line-height: 23px; color: var(--muted); margin-bottom: 14px; }

/*----------  Resultaat  ----------*/
.kk-score {
  padding: 34px 30px 30px; background: #fff; border: 1px solid var(--border-soft);
  border-top: 3px solid var(--brand-green); border-radius: var(--radius); text-align: center;
}

.kk-score__label {
  display: block; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--primary-ink); margin-bottom: 10px;
}

.kk-score strong {
  display: block; font-family: var(--heading-font); font-size: 60px; line-height: 1;
  color: var(--heading-color);
}

.kk-score__verdict {
  display: inline-block; margin-top: 14px; padding: 6px 18px; border-radius: 99px;
  background: rgba(var(--brand-rgb), 0.1); font-family: var(--heading-font);
  font-size: 14px; font-weight: 700; color: var(--brand-green);
}

.kk-score p { margin: 18px 0 22px; font-size: 15px; line-height: 25px; color: var(--body-color); }
.kk-score .theme-btn { width: 100%; justify-content: center; margin-bottom: 16px; }

.kk-answers { padding: 8px 26px 26px; }

.kk-answer {
  display: flex; gap: 16px; padding: 20px 0; border-bottom: 1px solid var(--border-soft);
}

.kk-answer:last-child { border-bottom: 0; }

.kk-answer__mark {
  flex: 0 0 auto; width: 32px; height: 32px; display: flex; align-items: center;
  justify-content: center; border-radius: 50%; font-size: 14px;
}

.kk-answer.is-ok .kk-answer__mark { background: rgba(var(--brand-rgb), 0.1); color: var(--brand-green); }
.kk-answer.is-wrong .kk-answer__mark { background: rgba(var(--accent-rgb), 0.2); color: var(--primary-ink); }

.kk-answer h4 { font-size: 17px; line-height: 1.4; color: var(--heading-color); margin-bottom: 10px; }

.kk-answer p { margin: 0 0 6px; font-size: 15px; color: var(--body-color); }

.kk-answer p span {
  display: block; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 2px;
}

.kk-answer__right { color: var(--brand-green) !important; font-weight: 600; }

/*----------  Lezer  ----------*/
.kk-reader { background: #fff; border: 1px solid var(--border-soft); border-radius: var(--radius); }

.kk-reader__page {
  min-height: 460px; display: flex; flex-direction: column; align-items: center;
  justify-content: center; text-align: center; padding: 50px 30px;
  background: var(--surface-2); color: var(--muted);
}

.kk-reader__page i { font-size: 54px; color: var(--primary-color); margin-bottom: 20px; }
.kk-reader__page h3 { font-size: 22px; color: var(--heading-color); margin-bottom: 10px; }
.kk-reader__page p { font-size: 15px; margin: 0; }

.kk-reader__bar {
  display: flex; align-items: center; justify-content: space-between; padding: 16px 26px;
  font-family: var(--heading-font); font-size: 14px; color: var(--body-color);
}

.kk-reader__bar a {
  width: 38px; height: 38px; display: flex; align-items: center; justify-content: center;
  border-radius: 50%; border: 1px solid var(--border-soft); color: var(--primary-ink);
}

.kk-reader__bar a:hover { background: var(--primary-color); border-color: var(--primary-color); color: var(--heading-color); }

.kk-chapters { margin: 0; padding: 12px 0 18px; list-style: none; }

.kk-chapter {
  display: flex; gap: 14px; padding: 12px 26px; font-size: 15px; color: var(--body-color);
}

.kk-chapter span { font-family: var(--heading-font); font-weight: 700; color: var(--muted); }
.kk-chapter.is-done span { color: var(--brand-green); }
.kk-chapter.is-now { background: var(--surface-1); color: var(--heading-color); font-weight: 600; }
.kk-chapter.is-now span { color: var(--primary-ink); }

/*----------  Account  ----------*/
.kk-form--panel { padding: 26px; }
.kk-form--panel .theme-btn { margin-top: 4px; }
.kk-licence { padding: 26px; }
.kk-licence dl { margin: 0 0 18px; }

.kk-licence dt {
  font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--primary-ink); font-weight: 700; margin-top: 14px;
}

.kk-licence dt:first-child { margin-top: 0; }

.kk-licence dd {
  margin: 3px 0 0; font-family: var(--heading-font); font-size: 15px; color: var(--heading-color);
}

.kk-licence__note {
  margin: 0; padding-top: 16px; border-top: 1px solid var(--border-soft);
  font-size: 14px; line-height: 23px; color: var(--muted);
}

@media (max-width: 767px) {
  .kk-quiz { padding: 22px 20px 24px; }
  .kk-quiz h3 { font-size: 20px; }
  .kk-quiz__nav { flex-direction: column; }
  .kk-quiz__nav a { justify-content: center; text-align: center; }
  .kk-score strong { font-size: 46px; }
}

/*==========================================================================
  Filtertabs — op smalle schermen een nette scrollstrook in plaats van
  ongelijk afbrekende rijen.
==========================================================================*/
@media (max-width: 767px) {
  .et-filter {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    padding: 0 0 4px;
  }

  .et-filter::-webkit-scrollbar { display: none; }

  .et-filter li {
    flex: 0 0 auto;
    scroll-snap-align: start;
    padding: 10px 20px;
    font-size: 13px;
    white-space: nowrap;
  }
}

/* Hetzelfde voor de vragenstrip in de toets */
@media (max-width: 575px) {
  .kk-dots { gap: 6px; padding: 18px 20px; }
  .kk-dot { width: 30px; height: 30px; font-size: 12px; }
}

/*==========================================================================
  Voorleesknop — verschijnt bij een tekstselectie
==========================================================================*/
.kk-listen {
  position: absolute;
  z-index: 9998;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 18px;
  border: 0;
  border-radius: 999px;
  background: var(--heading-color);
  color: #fff;
  font-family: var(--heading-font);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.05em;
  cursor: pointer;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.26);
  animation: kkListenIn 0.16s ease-out;
}

.kk-listen i { color: var(--primary-color); font-size: 14px; }

.kk-listen:hover { background: var(--brand-green); }

@keyframes kkListenIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}

/*----------  Balkje tijdens het voorlezen  ----------*/
.kk-listenbar {
  position: fixed;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%);
  /* Zonder dit krijgt de balk door "left: 50%" maar de helft van het scherm
     als ruimte, en breekt de inhoud onnodig af naar een tweede regel. */
  box-sizing: border-box;
  width: max-content;
  max-width: min(calc(100vw - 32px), 760px);
  z-index: 9999;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  padding: 12px 16px 12px 20px;
  /* Geen volledige pil: zodra de balk twee regels wordt (instellingen of
     een melding erbij) snijden ronde hoeken van 999px de tekst af. */
  border-radius: 26px;
  background: var(--heading-color);
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.3);
}

.kk-listenbar__text {
  font-family: var(--heading-font);
  font-size: 14px;
  font-weight: 600;
  color: #fff;
}

.kk-listenbar__stop {
  padding: 8px 16px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  background: none;
  color: #fff;
  font-family: var(--heading-font);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.25s ease-out;
}

.kk-listenbar__stop:hover {
  background: var(--primary-color);
  border-color: var(--primary-color);
  color: var(--heading-color);
}

/* vier staafjes die meebewegen zolang er gesproken wordt */
.kk-listenbar__wave { display: flex; align-items: flex-end; gap: 3px; height: 18px; }

.kk-listenbar__wave i {
  display: block;
  width: 3px;
  border-radius: 2px;
  background: var(--primary-color);
  animation: kkWave 0.9s ease-in-out infinite;
}

.kk-listenbar__wave i:nth-child(1) { height: 7px;  animation-delay: 0s; }
.kk-listenbar__wave i:nth-child(2) { height: 14px; animation-delay: 0.15s; }
.kk-listenbar__wave i:nth-child(3) { height: 10px; animation-delay: 0.3s; }
.kk-listenbar__wave i:nth-child(4) { height: 16px; animation-delay: 0.45s; }

@keyframes kkWave {
  0%, 100% { transform: scaleY(0.45); }
  50% { transform: scaleY(1); }
}

@media (prefers-reduced-motion: reduce) {
  .kk-listen, .kk-listenbar__wave i { animation: none; }
}

@media (max-width: 575px) {
  .kk-listenbar {
    left: 12px; right: 12px; bottom: 12px;
    transform: none;
    width: auto;
    max-width: none;
    justify-content: space-between;
  }
}

/* Te korte selectie: de knop wordt een uitleg, niet klikbaar */
.kk-listen.is-hint {
  background: var(--surface-2);
  color: var(--body-color);
  font-weight: 600;
  cursor: default;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.16);
}

.kk-listen.is-hint i { color: var(--primary-ink); }
.kk-listen.is-hint:hover { background: var(--surface-2); }

/*==========================================================================
  Werkgever — voortgang medewerkers
==========================================================================*/
.kk-panel__tools { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; }

.kk-panel__tools label {
  display: flex; flex-direction: column; gap: 5px;
  font-family: var(--heading-font); font-size: 11px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted);
}

.kk-panel__tools input {
  padding: 9px 12px; background: var(--surface-1);
  border: 1px solid var(--border-soft); border-radius: var(--radius);
  font-family: var(--body-font); font-size: 14px; color: var(--heading-color);
}

.kk-panel__tools .theme-btn { padding: 11px 20px; font-size: 13px; }

.kk-tablewrap { overflow-x: auto; }
.kk-tablewrap .kk-table { min-width: 860px; }

.kk-cell-progress { min-width: 150px; }
.kk-cell-progress .kk-bar { margin-top: 8px; }

.kk-panel__foot {
  padding: 16px 26px; border-top: 1px solid var(--border-soft);
  font-size: 13px; color: var(--muted);
}

/*==========================================================================
  Aanmelden per bedrijf
==========================================================================*/
.kk-signup { background: var(--surface-1); }

.kk-signup__badge {
  display: inline-block; margin-bottom: 16px; padding: 7px 16px; border-radius: 999px;
  background: var(--primary-color); color: var(--heading-color);
  font-family: var(--heading-font); font-size: 12px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
}

.kk-signup__intro h2 {
  font-size: 34px; line-height: 1.2; color: var(--heading-color); margin-bottom: 18px;
}

.kk-signup__intro p { font-size: 16px; line-height: 28px; color: var(--body-color); }

.kk-signup__list { margin: 22px 0; padding: 0; list-style: none; }

.kk-signup__list li {
  position: relative; padding-left: 28px; margin-bottom: 11px;
  font-size: 15px; color: var(--heading-color);
}

.kk-signup__list li::before {
  content: ""; position: absolute; left: 3px; top: 8px; width: 11px; height: 6px;
  border-left: 2px solid var(--brand-green); border-bottom: 2px solid var(--brand-green);
  transform: rotate(-45deg);
}

.kk-signup__note {
  padding-top: 18px; border-top: 1px solid var(--border-soft);
  font-size: 14px !important; line-height: 23px !important; color: var(--muted) !important;
}

/*==========================================================================
  Nieuws
==========================================================================*/
.kk-news { background: var(--surface-1); }

.kk-post {
  display: flex; flex-direction: column; height: 100%; padding: 30px 28px;
  background: #fff; border: 1px solid var(--border-soft); border-radius: var(--radius);
  transition: transform 0.3s ease-out, box-shadow 0.3s ease-out, border-color 0.3s ease-out;
}

.kk-post:hover {
  transform: translateY(-5px); border-color: var(--primary-color);
  box-shadow: 0 22px 44px rgba(16, 24, 32, 0.1);
}

.kk-post__cat {
  align-self: flex-start; margin-bottom: 16px; padding: 5px 13px; border-radius: 999px;
  background: rgba(var(--accent-rgb), 0.18); font-family: var(--heading-font);
  font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--primary-ink);
}

.kk-post h3 {
  font-size: 20px; line-height: 1.35; color: var(--heading-color); margin-bottom: 12px;
}

.kk-post p { flex: 1; font-size: 15px; line-height: 26px; color: var(--body-color); margin-bottom: 18px; }

.kk-post__date { font-size: 13px; color: var(--muted); }

.kk-post__meta {
  font-family: var(--heading-font); font-size: 13px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--primary-ink);
  margin-bottom: 26px;
}

.kk-lead {
  font-size: 19px !important; line-height: 32px !important;
  color: var(--heading-color) !important;
}

/*==========================================================================
  Zoeken
==========================================================================*/
.kk-search { background: #fff; }

.kk-searchbar {
  position: relative; display: flex; align-items: center; gap: 12px; padding: 10px;
  background: var(--surface-1); border: 1px solid var(--border-soft);
  border-radius: 999px;
}

.kk-searchbar > i { margin-left: 14px; color: var(--primary-ink); font-size: 18px; }

.kk-searchbar input {
  flex: 1; border: 0; background: none; font-family: var(--body-font);
  font-size: 16px; color: var(--heading-color);
}

.kk-searchbar input:focus { outline: none; }
.kk-searchbar .theme-btn { border-radius: 999px; padding: 13px 28px; }

.kk-search__count { margin: 24px 0 26px; font-size: 15px; color: var(--muted); }
.kk-search__count strong { color: var(--heading-color); }

.kk-result {
  display: block; padding: 22px 0; border-bottom: 1px solid var(--border-soft);
}

.kk-result:last-child { border-bottom: 0; }

.kk-result__type {
  display: inline-block; margin-bottom: 8px; font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--primary-ink); font-weight: 700;
}

.kk-result h3 {
  font-size: 20px; color: var(--heading-color); margin-bottom: 8px;
  transition: color 0.25s ease-out;
}

.kk-result:hover h3 { color: var(--primary-ink); }
.kk-result p { margin: 0; font-size: 15px; line-height: 26px; color: var(--body-color); }

/*==========================================================================
  404
==========================================================================*/
.kk-404 {
  background: var(--brand-green-deep); padding: 210px 0 120px; text-align: center;
}

.kk-404__code {
  display: block; font-family: var(--heading-font); font-size: 92px; line-height: 1;
  font-weight: 700; color: var(--primary-color); margin-bottom: 18px;
}

.kk-404 h1 { color: #fff; font-size: 36px; margin-bottom: 16px; }

.kk-404 p {
  max-width: 520px; margin: 0 auto 30px; font-size: 16px; line-height: 28px;
  color: rgba(255, 255, 255, 0.72);
}

.kk-404__actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

@media (max-width: 767px) {
  .kk-signup__intro h2 { font-size: 27px; }
  .kk-searchbar { border-radius: var(--radius); flex-wrap: wrap; }
  .kk-searchbar input { min-width: 60%; }
  .kk-404 { padding: 160px 0 80px; }
  .kk-404__code { font-size: 66px; }
  .kk-404 h1 { font-size: 27px; }
  .kk-panel__tools { width: 100%; }
}

/* Een knop in een panelkop moet zijn eigen kleur houden; de algemene
   link-regel hierboven maakte het label anders donkeroranje op oranje. */
.kk-panel__head a.theme-btn,
.kk-panel__head a.et-btn-ghost {
  color: #fff;
}

.kk-panel__head a.theme-btn:hover {
  color: var(--heading-color);
}

/*==========================================================================
  Over ons -- de mensen achter Coelingh Opleidingen
==========================================================================*/
.kk-persoon__foto {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  overflow: hidden;
  margin-bottom: 16px;
  border: 3px solid #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
}

.kk-persoon__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.kk-persoon__rol + .kk-persoon__foto { margin-top: 4px; }

.kk-fotoplek__vak {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 10px;
  min-height: 420px;
  padding: 40px 30px;
  border: 2px dashed var(--border-soft);
  border-radius: var(--radius);
  background: var(--surface-1);
}

.kk-fotoplek__vak i { font-size: 44px; color: var(--primary-ink); }
.kk-fotoplek__vak strong { font-size: 19px; color: var(--heading-color); }
.kk-fotoplek__vak span { font-size: 16px; color: var(--body-color); max-width: 34ch; }

.kk-persoon {
  height: 100%;
  padding: 36px 34px;
  background: var(--surface-1);
  border: 1px solid var(--border-soft);
  border-top: 3px solid var(--primary-color);
  border-radius: var(--radius);
}

.kk-persoon__rol {
  display: block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--primary-ink);
  margin-bottom: 8px;
}

.kk-persoon h3 { font-size: 30px; margin: 0 0 16px; }
.kk-persoon p { font-size: 17px; line-height: 1.75; margin-bottom: 16px; }
.kk-persoon p:last-child { margin-bottom: 0; }

.kk-citaat {
  margin: 22px 0;
  padding: 18px 22px;
  border-left: 4px solid var(--primary-color);
  background: #fff;
  font-size: 19px;
  line-height: 1.6;
  font-style: italic;
  color: var(--heading-color);
}

.kk-koffie { padding: 0 0 110px; }

.kk-koffie__kaart {
  display: flex;
  align-items: center;
  gap: 32px;
  flex-wrap: wrap;
  padding: 46px 48px;
  background: var(--brand-green);
  border-radius: var(--radius);
  color: #fff;
}

.kk-koffie__kaart > i {
  font-size: 54px;
  color: var(--primary-color);
  flex: 0 0 auto;
}

.kk-koffie__tekst { flex: 1 1 420px; }
.kk-koffie__tekst h2 { color: #fff; font-size: 32px; margin: 0 0 14px; }

.kk-koffie__tekst p {
  color: rgba(255, 255, 255, 0.88);
  font-size: 17px;
  line-height: 1.75;
  margin-bottom: 14px;
}

.kk-koffie__naam {
  margin-top: 22px !important;
  margin-bottom: 0 !important;
  font-weight: 700;
  color: #fff !important;
}

.kk-koffie__naam span {
  display: block;
  font-weight: 400;
  font-size: 15.5px;
  color: rgba(255, 255, 255, 0.7);
  margin-top: 3px;
}

.kk-koffie__kaart .theme-btn { flex: 0 0 auto; }

@media (max-width: 767px) {
  .kk-koffie__kaart { padding: 32px 24px; gap: 22px; }
  .kk-koffie__tekst h2 { font-size: 26px; }
  .kk-persoon { padding: 28px 24px; }
  .kk-persoon h3 { font-size: 25px; }
  .kk-persoon__foto {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  overflow: hidden;
  margin-bottom: 16px;
  border: 3px solid #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
}

.kk-persoon__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.kk-persoon__rol + .kk-persoon__foto { margin-top: 4px; }

.kk-fotoplek__vak { min-height: 300px; }
}

/*==========================================================================
  Voorlezen op de telefoon

  De knop staat bij het einde van de selectie, net eronder. Onderaan het
  scherm kan niet: Chrome op Android schuift daar zijn eigen zoekbalk
  overheen en dan zit de knop erachter. Boven de selectie kan ook niet,
  want daar hangt het kopieer-menu van het toestel zelf.

  Hij blijft wel groter dan op de computer, zodat hij met een duim te
  raken is.
==========================================================================*/
.kk-listen--touch {
  min-height: 46px;
  padding: 12px 20px;
  font-size: 15px;
}

.kk-listen--touch i { font-size: 16px; }

.kk-listen--touch.is-hint {
  min-height: 42px;
  font-size: 13px;
  padding: 10px 16px;
}

/* ------------------------------------------------- stem en snelheid kiezen */
.kk-listenbar__set {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-left: 14px;
  margin-left: 4px;
  border-left: 1px solid rgba(255, 255, 255, 0.22);
}

.kk-listenbar__set[hidden] { display: none; }

.kk-listenbar__set label {
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.72);
  margin: 0;
  white-space: nowrap;
}

.kk-listenbar__set select {
  max-width: 170px;
  height: 34px;
  padding: 0 8px;
  font-size: 14px;
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: var(--radius);
}

.kk-listenbar__set select option { color: #111; }

.kk-listenbar__set input[type="range"] {
  width: 92px;
  accent-color: var(--primary-color);
}

@media (max-width: 767px) {
  .kk-listenbar {
    flex-wrap: wrap;
    gap: 10px;
    padding: 12px 14px;
  }
  /* Vier dingen naast elkaar (Stem, keuzelijst, Snelheid, schuif) passen
     niet op een telefoon. Als raster komt elk label netjes voor zijn eigen
     bediening te staan, onder elkaar. */
  .kk-listenbar__set {
    order: 3;
    flex: 1 1 100%;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 10px 12px;
    align-items: center;
    padding-left: 0;
    margin-left: 0;
    border-left: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.22);
    padding-top: 12px;
  }
  .kk-listenbar__set select {
    width: 100%;
    max-width: none;
    height: 40px;
  }
  .kk-listenbar__set input[type="range"] { width: 100%; }
}

/*----------  Tip als het apparaat alleen oude stemmen heeft  ----------*/
.kk-listenbar__tip {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  flex: 1 1 100%;
  order: 9;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.22);
  font-size: 13.5px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.82);
}

.kk-listenbar__tip[hidden] { display: none; }
.kk-listenbar__tip i { color: var(--primary-color); margin-top: 2px; flex: 0 0 auto; }
.kk-listenbar__tiptekst { flex: 1 1 auto; min-width: 0; }
.kk-listenbar__tip strong { color: #fff; white-space: nowrap; }

.kk-listenbar__tipweg {
  flex: 0 0 auto;
  margin-left: 4px;
  background: none;
  border: 0;
  color: rgba(255, 255, 255, 0.6);
  font-size: 20px;
  line-height: 1;
  padding: 0 2px;
  cursor: pointer;
}

.kk-listenbar__tipweg:hover { color: #fff; }


/*==========================================================================
  Leeromgeving: toetsen maken en de uitslag
==========================================================================*/

/* ----------------------------------------------------- meldingen */
.kk-melding {
  padding: 14px 18px;
  border-radius: var(--radius);
  font-size: 16px;
  margin: 0 0 24px;
  border-left: 4px solid;
  background: #fff;
}

.kk-melding--ok { background: #e6f4ea; border-color: #2f855a; color: #1e6b3f; }
.kk-melding--fout { background: #fbe9e9; border-color: #c53030; color: #9b2c2c; }

/* ----------------------------------------------- lijst met toetsen */
.kk-toetsen { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }

.kk-toetsrij {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  padding: 16px 18px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  background: var(--surface-1);
}

.kk-toetsrij__naam { flex: 1 1 240px; min-width: 0; }
.kk-toetsrij__naam strong { display: block; font-size: 17px; color: var(--heading-color); }
.kk-toetsrij__naam span { font-size: 15px; color: var(--body-color); }
.kk-toetsrij__uitslag { flex: 0 0 auto; }
.kk-toetsrij__knop { flex: 0 0 auto; margin-left: auto; }

/* ------------------------------------------------------- vlaggetjes */
.kk-vlag {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 14.5px;
  font-weight: 600;
  background: var(--surface-2);
  color: var(--body-color);
  white-space: nowrap;
}

.kk-vlag--ok { background: #e6f4ea; color: #1e6b3f; }
.kk-vlag--fout { background: #fbe9e9; color: #9b2c2c; }
.kk-vlag--bezig { background: #fdf3e2; color: #8a5a10; }

/* --------------------------------------------------------- uitleg */
.kk-uitleg { margin: 0 0 24px; padding-left: 22px; }
.kk-uitleg li { margin-bottom: 9px; line-height: 1.6; }

.kk-let {
  padding: 14px 18px;
  border-left: 4px solid var(--primary-color);
  background: var(--surface-1);
  border-radius: var(--radius);
  margin: 0 0 22px;
}

.kk-terug { margin: 20px 0 0; font-size: 15.5px; }
.kk-terug a { color: var(--primary-ink); font-weight: 600; }
.kk-terug a:hover { text-decoration: underline; }

/* -------------------------------------------------- knoppen bij een vraag */
.kk-quiz__knoppen {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--border-soft);
}

.theme-btn--licht {
  background: var(--surface-2);
  color: var(--heading-color);
}

.theme-btn:disabled,
.theme-btn[disabled] { opacity: 0.45; cursor: not-allowed; }

/* De bolletjes zijn knoppen, geen tekst: ermee klikken brengt je naar die
   vraag en bewaart onderweg wat je nu hebt aangeklikt. */
.kk-dots button.kk-dot {
  border: 1px solid var(--border-soft);
  cursor: pointer;
  font: inherit;
}

.kk-dots button.kk-dot:hover { border-color: var(--brand-green); }

/* De klok springt in het oog zodra de tijd bijna om is. */
.kk-quiz__timer.is-bijna {
  background: #fbe9e9;
  color: #9b2c2c;
  font-weight: 700;
}

/* ------------------------------------------------------------ uitslag */
.kk-score {
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.kk-score strong { font-size: 46px; line-height: 1; color: var(--heading-color); }

.kk-nakijk { display: flex; flex-direction: column; gap: 14px; margin-top: 18px; }

.kk-nakijk__vraag {
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: 16px 18px;
  background: #fff;
}

.kk-nakijk__vraag > strong {
  display: block;
  margin-bottom: 14px;
  font-size: 17px;
  line-height: 1.45;
  color: var(--heading-color);
}
.kk-nakijk__uitleg { margin: 12px 0 0; font-size: 15px; color: var(--body-color); }

/* Een open vraag: wat de cursist schreef, en daaronder het modelantwoord. */
.kk-open {
  margin-top: 14px;
  padding: 14px 16px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  background: #fff;
}
.kk-open p { margin: 6px 0 10px; font-size: 15px; color: var(--heading-color); }
.kk-open--model { background: var(--surface-1); border-left: 3px solid var(--primary-color); }
.kk-open__kop {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--primary-ink);
}

@media (max-width: 575px) {
  .kk-toetsrij__knop { margin-left: 0; width: 100%; }
  .kk-toetsrij__knop .theme-btn { width: 100%; justify-content: center; }
  .kk-score strong { font-size: 38px; }
}

/* Bij het nakijken is een optie geen keuze meer, maar een aanwijzing. */
.kk-option.is-goed { border-color: #9ad1ae; background: #f3faf5; }
.kk-option.is-goed .kk-option__letter { background: #2f855a; color: #fff; }
.kk-option.is-fout { border-color: #e4a5a5; background: #fdf4f4; }
.kk-option.is-fout .kk-option__letter { background: #c53030; color: #fff; }
.kk-nakijk .kk-option { cursor: default; }
.kk-nakijk .kk-option__text { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/*=========================  Voettekst  =========================

   Het ontwerp had geen footer. Daardoor was de verwerkersovereenkomst vanaf
   geen enkele pagina te bereiken en stonden het privacybeleid en de algemene
   voorwaarden er los bij. Deze footer gebruikt dezelfde tokens als de rest van
   het thema, zodat hij er niet bijgeplakt uitziet: hetzelfde diepe groen als
   de cta erboven, goud voor de koppen.
                                                                            */
.kk-foot {
  background: var(--brand-green-deep);
  color: rgba(255, 255, 255, 0.72);
  padding: 72px 0 0;
}

.kk-foot__top {
  padding-bottom: 48px;
}

.kk-foot h4 {
  color: #fff;
  font-size: 17px;
  margin: 0 0 18px;
}

.kk-foot p {
  color: rgba(255, 255, 255, 0.72);
  margin: 0;
  max-width: 34ch;
}

.kk-foot__logo {
  display: inline-block;
  margin-bottom: 20px;
}

/* Groter dan in de kop: onderaan staat het logo alleen en mag het opvallen
   (Abdul, 17-10-2026: "het logo in de footer is te klein"). */
.kk-foot__logo img {
  height: 80px;
  width: auto;
}

@media (max-width: 575px) {
  .kk-foot__logo img { height: 64px; }
}

.kk-foot ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.kk-foot ul li + li {
  margin-top: 10px;
}

.kk-foot a {
  color: rgba(255, 255, 255, 0.72);
  text-decoration: none;
  transition: color 0.2s ease;
}

.kk-foot a:hover,
.kk-foot a:focus-visible {
  color: var(--primary-color);
}

.kk-foot__onder {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding: 22px 0;
}

.kk-foot__onder p {
  color: rgba(255, 255, 255, 0.55);
  font-size: 14px;
  margin: 0;
  max-width: none;
}

@media (max-width: 767px) {
  .kk-foot {
    padding-top: 52px;
  }

  .kk-foot__top > [class*='col-'] + [class*='col-'] {
    margin-top: 34px;
  }
}

/* ---------------------------------------------------------------- formulier
   Het ontwerp had een formulier dat niets deed, dus ook geen foutmeldingen
   en geen bevestiging. Die stijlen staan hier; de rest komt uit kk-form. */
.kk-form__fout {
	display: block;
	margin: 6px 0 0;
	font-size: 14px;
	color: #b3261e;
}

.kk-form input.is-fout,
.kk-form textarea.is-fout {
	border-color: #b3261e;
}

.kk-form__gelukt {
	display: flex;
	gap: 14px;
	align-items: flex-start;
	margin-bottom: 26px;
	padding: 18px 22px;
	border-left: 3px solid var(--primary-color);
	background: var(--surface-1);
}

.kk-form__gelukt i {
	font-size: 22px;
	color: var(--primary-ink);
}

.kk-form__gelukt p {
	margin: 0;
}

/* Het lokvakje voor robots: uit beeld, maar niet display:none -- dat vullen
   ze juist wel in. */
.kk-form__vangst {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/*==========================================================================
  De lezer (assets/js/lezer.js): boek, video en geluid in de leeromgeving
==========================================================================*/
html.kk-lezer-open { overflow: hidden; }

.kk-lezer {
  position: fixed;
  inset: 0;
  /* Boven alles van het thema: de kop staat op 99999. */
  z-index: 2147483000;
  display: flex;
  flex-direction: column;
  background: var(--hero-deep);
  color: #fff;
}
.kk-lezer[hidden] { display: none; }

.kk-lezer__balk {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 8px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.18);
}
.kk-lezer__titel {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1 1 auto;
  font-weight: 700;
  font-size: 16px;
}
.kk-lezer__titel i { color: var(--primary-color); }
.kk-lezer__titel span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kk-lezer__teller { font-size: 14px; color: rgba(255, 255, 255, 0.75); white-space: nowrap; }
.kk-lezer__knoppen { display: flex; gap: 8px; flex: 0 0 auto; }

.kk-lezer__knop {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--radius);
  background: transparent;
  color: #fff;
  font-size: 14px;
  cursor: pointer;
  text-decoration: none;
}
.kk-lezer__knop:hover,
.kk-lezer__knop:focus-visible { border-color: var(--primary-color); color: var(--primary-color); }
.kk-lezer__knop[hidden] { display: none; }
.kk-lezer__dicht { background: var(--brand-green); border-color: var(--brand-green); }
.kk-lezer__dicht:hover, .kk-lezer__dicht:focus-visible { color: #fff; background: var(--brand-green-2); }

.kk-lezer__podium {
  position: relative;
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  min-height: 0;
  padding: 4px 4px;
}
/* Midden zetten met margin:auto en niet met justify-content: een vergroot
   boek valt dan niet links of boven buiten beeld, maar is te verschuiven. */
.kk-lezer__plek {
  flex: 1 1 auto;
  height: 100%;
  min-width: 0;
  display: flex;
  /* Bij het omslaan en bij de hoek die opkrult als de muis erboven hangt,
     steekt de pagina even buiten het boek uit. Op 100% geen schuifbalken
     daarvoor; alleen vergroot moet het boek te verschuiven zijn. */
  overflow: hidden;
}
.kk-lezer--vergroot .kk-lezer__plek { overflow: auto; }
.kk-lezer__plek > * { margin: auto; }
.kk-lezer--vergroot .kk-lezer__blader {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  background: rgba(0, 0, 0, 0.55);
}
.kk-lezer--vergroot .kk-lezer__terug { left: 8px; }
.kk-lezer--vergroot .kk-lezer__verder { right: 8px; }

.kk-lezer__zoom { display: inline-flex; align-items: center; gap: 6px; }
.kk-lezer__zoom[hidden] { display: none; }
.kk-lezer__zoom .kk-lezer__knop { padding: 0 12px; }
.kk-lezer__knop:disabled { opacity: 0.35; cursor: default; }
.kk-lezer__procent { min-width: 46px; text-align: center; font-size: 14px; color: rgba(255, 255, 255, 0.8); }

/* Voorlezen (Dennis, 17-10-2026). */
.kk-lezer__lees { display: inline-flex; align-items: center; gap: 6px; }
.kk-lezer__lees[hidden] { display: none; }
.kk-lezer__voorlezen.is-aan { background: var(--primary-color); border-color: var(--primary-color); color: #1a1a1a; }
.kk-lezer__voorlezen.is-aan:hover, .kk-lezer__voorlezen.is-aan:focus-visible { color: #1a1a1a; filter: brightness(1.08); }
.kk-lezer__tempo { min-width: 54px; justify-content: center; padding: 0 10px; font-variant-numeric: tabular-nums; }
.kk-lezer__tip { margin: 0 24px 4px; padding: 8px 14px; border-radius: var(--radius); background: rgba(255, 255, 255, 0.1); color: #fff; font-size: 14px; text-align: center; }
.kk-lezer__tip[hidden] { display: none; }

.kk-lezer__blader {
  flex: 0 0 auto;
  width: 48px;
  min-width: 48px;
  height: 48px;
  margin: 0 6px;
  padding: 0;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  font-size: 18px;
  cursor: pointer;
}
.kk-lezer__blader:hover:not(:disabled),
.kk-lezer__blader:focus-visible { background: var(--primary-color); color: var(--heading-color); }
.kk-lezer__blader:disabled { opacity: 0.25; cursor: default; }

.kk-lezer__boek { margin: auto; }
.kk-lezer__pagina { background: #fff; }
.kk-lezer__pagina-in {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
}
.kk-lezer__pagina-in img { width: 100%; height: 100%; object-fit: contain; display: block; user-select: none; }

.kk-lezer__onder { padding: 2px 24px 8px; }
.kk-lezer__schuif { width: 100%; accent-color: var(--primary-color); }

.kk-lezer__melding { max-width: 460px; text-align: center; font-size: 16px; color: rgba(255, 255, 255, 0.85); }
.kk-lezer__melding a { color: var(--primary-color); text-decoration: underline; }

.kk-lezer__laden {
  display: inline-block;
  width: 26px;
  height: 26px;
  margin: 0 10px -7px 0;
  border: 3px solid rgba(0, 0, 0, 0.12);
  border-top-color: var(--primary-color);
  border-radius: 50%;
  animation: kk-lezer-draai 0.9s linear infinite;
}
.kk-lezer__melding .kk-lezer__laden { border-color: rgba(255, 255, 255, 0.18); border-top-color: var(--primary-color); }
@keyframes kk-lezer-draai { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .kk-lezer__laden { animation-duration: 3s; } }

/* Video en geluid: geen bladerknoppen en geen schuif. */
.kk-lezer--video .kk-lezer__blader,
.kk-lezer--geluid .kk-lezer__blader,
.kk-lezer--video .kk-lezer__onder,
.kk-lezer--geluid .kk-lezer__onder,
.kk-lezer--video .kk-lezer__groot,
.kk-lezer--geluid .kk-lezer__groot { display: none; }

.kk-lezer__speler {
  width: min(100%, calc((100vh - 140px) * 16 / 9), 1280px);
  aspect-ratio: 16 / 9;
  background: #000;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
}
.kk-lezer--geluid .kk-lezer__speler { width: min(100%, 720px); }
.kk-lezer__speler iframe { width: 100%; height: 100%; border: 0; display: block; }

@media (max-width: 767px) {
  .kk-lezer__balk { flex-wrap: wrap; padding: 10px 12px; gap: 8px; }
  .kk-lezer__titel { flex-basis: 100%; font-size: 15px; }
  .kk-lezer__teller { flex: 1 1 auto; }
  .kk-lezer__knop span { display: none; }
  .kk-lezer__knop { padding: 0 12px; }
  /* Op een telefoon liggen de pijlen over het boek heen, zodat de pagina de
     hele breedte krijgt. Bladeren kan ook door te vegen. */
  .kk-lezer__blader {
    position: absolute;
    top: 50%;
    z-index: 5;
    width: 40px;
    min-width: 40px;
    height: 40px;
    margin: 0;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.45);
  }
  .kk-lezer__terug { left: 6px; }
  .kk-lezer__verder { right: 6px; }
  .kk-lezer__podium { padding: 8px 2px; }
  .kk-lezer__onder { padding: 6px 14px 12px; }
}

/* ==========================================================================
   Meelopen bij het scrollen (assets/js/plakken.js, Dennis 15-10-2026)
========================================================================== */
/* Twee kolommen: de kortere loopt mee. De hoogte zet het script. */
@media (min-width: 992px) {
  .kk-plakkend > [class*="col-"] { position: sticky; top: 24px; align-self: flex-start; }
  .kk-plakkend > [class*="col-"] > .kk-panel:only-child { height: auto; }
}

/* De kop van een tabel blijft staan. Een rand onder een vaste kop schuift
   niet mee, een schaduw wel. */
.kk-table thead th {
  position: sticky; top: 0; z-index: 2; background: #fff;
  border-bottom: 0; box-shadow: inset 0 -1px 0 var(--border-soft);
}
.kk-tablewrap.is-vrij { overflow: visible; }

/* Inloggen in het telefoonmenu (layouts/openbaar). meanmenu kopieert de lijst
   naar het telefoonmenu; in het gewone menu staat de knop al rechtsboven. */
.header__area-menubar-right-menu .kk-menu-inloggen { display: none; }
.mean-container .mean-nav ul li.kk-menu-inloggen a { font-weight: 700; color: var(--primary-color); }

/* ==========================================================================
   Vinkjes en rondjes (Abdul, 18-10-2026: "checkbox ki css kharab")
   .kk-form zet elk input op 100% breed met padding; een vinkje werd daardoor
   een balk. En .kk-aanvink stond alleen in de kale layout.
========================================================================== */
.kk-form input[type="checkbox"],
.kk-form input[type="radio"] {
  width: 20px; height: 20px; min-width: 20px; padding: 0; margin: 0;
  border: 0; background: none; accent-color: var(--primary-color);
}
.kk-aanvink {
  display: flex; align-items: flex-start; gap: 11px; margin: 4px 0 22px;
  font-family: var(--body-font); font-size: 15.5px; font-weight: 400;
  letter-spacing: 0; text-transform: none; color: var(--body-color); cursor: pointer;
}
.kk-aanvink input { flex: 0 0 20px; width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--primary-color); }
.kk-aanvink span { line-height: 1.45; }
/* .kk-form label is uppercase en een blok; het label van een vinkje niet. */
.kk-form label.kk-aanvink {
  display: flex; font-family: var(--body-font); font-size: 15.5px; font-weight: 400;
  letter-spacing: 0; text-transform: none; color: var(--body-color); margin: 4px 0 22px;
}

/* ==========================================================================
   Leeromgeving op een telefoon: het menu als één rij tabbladen onder het logo.
   Deze layout laadt geen jQuery, dus het hamburgermenu (meanmenu) van de
   openbare site werkt hier niet; zonder dit vielen de knoppen over de kop
   heen (18-10-2026).
========================================================================== */
@media (max-width: 991px) {
  .kk-appbar .header__area-menubar { flex-wrap: wrap; row-gap: 6px; }
  .kk-appbar .header__area-menubar-right { order: 3; flex: 0 0 100%; width: 100%; }
  .kk-appbar .header__area-menubar-right-menu { display: block !important; }
  .kk-appbar #mobilemenu {
    display: flex !important; gap: 6px; margin: 0; padding: 2px 0 12px;
    overflow-x: auto; white-space: nowrap; scrollbar-width: none;
  }
  .kk-appbar #mobilemenu::-webkit-scrollbar { display: none; }
  .kk-appbar #mobilemenu li { margin: 0 !important; padding: 0 !important; list-style: none; }
  .kk-appbar #mobilemenu li a {
    display: block; padding: 8px 13px !important; font-size: 14px; line-height: 1.2;
    border-radius: var(--radius); background: rgba(255, 255, 255, 0.07);
  }
  .kk-appbar #mobilemenu li a.is-active { background: rgba(255, 255, 255, 0.14); }
}

/* Het thema verbergt onder 1100px het blok met naam en uitlogknop; in de
   leeromgeving kon een cursist op een tablet of telefoon dus niet uitloggen. */
@media (max-width: 1100px) {
  .kk-appbar .header__area-menubar-right-box { display: block !important; }
}
@media (max-width: 991px) {
  .kk-appbar .header__area-menubar {
    display: flex !important; flex-wrap: wrap; align-items: center; justify-content: space-between;
  }
  .kk-appbar .header__area-menubar-left-logo { padding: 16px 0; }
  .kk-appbar .header__area-menubar-right-box { order: 2; }
}
@media (max-width: 991px) {
  .kk-apphead { padding-top: 172px; }
}

/* Logo in de kop van de openbare site groter (Abdul, 18-10-2026). Alleen de
   kop: de voettekst en de leeromgeving hebben hun eigen maat. */
.header__sticky .header__area-menubar-left-logo .kk-logo img { height: 76px; }
@media (max-width: 991px) {
  .header__sticky .header__area-menubar-left-logo .kk-logo img { height: 62px; }
}
@media (max-width: 575px) {
  .header__sticky .header__area-menubar-left-logo .kk-logo img { height: 54px; }
}

/* Bedrijf: medewerkers aangemeld in een periode (Dennis, 18-10-2026). */
.kk-periode { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.kk-periode__wis { display: inline-block; margin-left: 16px; font-size: 14px; }
@media (max-width: 575px) {
  .kk-periode { grid-template-columns: 1fr; }
  .kk-periode__wis { display: block; margin: 12px 0 0; }
}
.kk-melding--let { background: #fff4e0; border-color: #c27c0e; color: #7a4a05; margin-bottom: 22px; }

/* "Inloggen" staat al als knop rechts; in het menu alleen op de telefoon
   (meanmenu). De regel hierboven verloor van ".header__area-menubar-right-menu
   ul li" uit het thema (Dennis, 18-10-2026). */
.header__area-menubar-right-menu ul li.kk-menu-inloggen { display: none; }

/* Knop "Deze pagina bewerken", alleen voor een beheerder. */
.kk-bewerk {
  position: fixed; left: 20px; bottom: 20px; z-index: 9990;
  display: inline-flex; align-items: center; gap: 8px; padding: 11px 16px;
  border-radius: var(--radius); background: var(--heading-color); color: #fff;
  font-family: var(--heading-font); font-size: 14px; font-weight: 600;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}
.kk-bewerk:hover { background: var(--primary-color); color: #fff; }