/* kg-pagina-ons-verhaal
   Gegenereerd door tools/genereer_css.py — niet met de hand bewerken.
   Gescopet onder .kg */

.kg .vh-hero .foto {
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center 30%;
}
.kg .vh-hero .foto::after {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(105deg,rgba(13,31,18,.94) 0 34%,rgba(13,31,18,.82) 60%,rgba(13,31,18,.6));
}
.kg .mensen {
  background:var(--kg-licht);
}
.kg .m-kaart {
  background:#fff;
  border:1px solid var(--kg-lijn);
  border-radius:var(--kg-radius);
  overflow:hidden;
  transition:.25s;
}
.kg .m-kaart:hover {
  transform:translateY(-4px);
  box-shadow:0 18px 44px rgba(21,23,15,.12);
}
.kg .m-kaart .pf {
  position:relative;
  aspect-ratio:3/3.4;
  overflow:hidden;
  background:var(--kg-groen-donker);
}
.kg .m-kaart .pf img {
  width:100%;
  height:100%;
  object-fit:cover;
  filter:saturate(.92);
}
.kg .m-kaart .mb {
  padding:18px 20px 20px;
}
.kg .m-kaart .naam {
  font-family:var(--kg-kop);
  font-weight:800;
  font-size:17.5px;
  letter-spacing:-.01em;
}
.kg .m-kaart .rol {
  margin-top:4px;
  font-size:13.5px;
  color:var(--kg-grijs);
}
.kg .m-kaart .mb .lint {
  display:inline-block;
  margin-top:10px;
  font-family:var(--kg-kop);
  font-size:11px;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--kg-goud);
  border-top:1px solid var(--kg-lijn);
  padding-top:10px;
  width:100%;
}
.kg .groep {
  margin-top:26px;
  position:relative;
}
.kg .groep .frame {
  position:relative;
  border-radius:var(--kg-radius);
  overflow:hidden;
  border:1px solid rgba(201,169,98,.5);
}
.kg .groep img {
  width:100%;
  height:clamp(260px,38vw,460px);
  object-fit:cover;
  display:block;
}
.kg .groep .balk {
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  background:linear-gradient(0deg,rgba(13,31,18,.88),transparent);
  color:#fff;
  padding:70px 28px 22px;
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:18px;
  flex-wrap:wrap;
}
.kg .groep .balk .t {
  font-family:var(--kg-kop);
  font-weight:800;
  font-size:clamp(18px,2vw,24px);
  max-width:32ch;
}
.kg .vh-hero {
  position:relative;
  background:var(--kg-groen-donker);
  color:#fff;
  overflow:hidden;
  padding:190px 0 110px;
}
.kg .vh-hero .lijnen {
  position:absolute;
  inset:0;
  opacity:.14;
  background:repeating-linear-gradient(115deg,transparent 0 90px,rgba(201,169,98,.55) 90px 91px);
}
.kg .vh-hero .wrap {
  position:relative;
  z-index:1;
}
.kg .vh-jaren {
  display:flex;
  align-items:baseline;
  gap:22px;
  font-family:var(--kg-kop);
  font-weight:800;
  letter-spacing:-.02em;
  line-height:1;
}
.kg .vh-jaren .van {
  font-size:clamp(44px,6vw,84px);
  color:rgba(255,255,255,.34);
}
.kg .vh-jaren .pijl {
  font-size:clamp(24px,3vw,40px);
  color:var(--kg-goud-licht);
}
.kg .vh-jaren .tot {
  font-size:clamp(84px,13vw,196px);
  color:var(--kg-goud-licht);
  font-variant-numeric:tabular-nums;
}
.kg .vh-hero h1 {
  font-size:clamp(30px,4vw,52px) !important;
  font-weight:800 !important;
  letter-spacing:-.015em;
  margin:26px 0 18px;
  max-width:16ch;
  color:#fff;
}
.kg .vh-hero .lead {
  max-width:56ch;
  color:rgba(255,255,255,.84);
  font-size:clamp(16.5px,1.5vw,19px);
  line-height:1.75;
}
.kg .inscriptie {
  background:var(--kg-licht);
}
.kg .inscriptie .plaat {
  position:relative;
  background:linear-gradient(150deg,#20261c,#151a12);
  border:1px solid rgba(201,169,98,.5);
  border-radius:var(--kg-radius);
  padding:clamp(38px,6vw,74px);
  color:#fff;
  overflow:hidden;
}
.kg .inscriptie .plaat::before {
  content:"";
  position:absolute;
  inset:12px;
  border:1px solid rgba(201,169,98,.28);
  border-radius:calc(var(--kg-radius) - 8px);
  pointer-events:none;
}
.kg .inscriptie .anno {
  font-family:var(--kg-kop);
  font-weight:700;
  font-size:12.5px;
  letter-spacing:.34em;
  text-transform:uppercase;
  color:var(--kg-goud-licht);
  margin-bottom:22px;
}
.kg .inscriptie .tekst {
  font-family:var(--kg-kop);
  font-weight:800;
  font-size:clamp(22px,3.2vw,40px);
  letter-spacing:.01em;
  line-height:1.35;
  max-width:24ch;
  text-wrap:balance;
}
.kg .inscriptie .tekst em {
  font-style:normal;
  color:var(--kg-goud-licht);
}
.kg .inscriptie .duiding {
  margin-top:26px;
  color:rgba(255,255,255,.75);
  max-width:58ch;
  line-height:1.75;
}
.kg .tijdlijn {
  position:relative;
  background:var(--kg-wit);
}
.kg .tl-as {
  position:absolute;
  left:50%;
  top:0;
  bottom:0;
  width:2px;
  background:var(--kg-lijn);
  transform:translateX(-50%);
}
.kg .tl-vullijn {
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:0;
  background:linear-gradient(180deg,var(--kg-goud),var(--kg-goud-licht));
}
.kg .tl-item {
  position:relative;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(30px,6vw,90px);
  padding:46px 0;
}
.kg .tl-item .jaar {
  font-family:var(--kg-kop);
  font-weight:800;
  font-size:clamp(54px,7vw,110px);
  line-height:1;
  letter-spacing:-.02em;
  color:transparent;
  -webkit-text-stroke:1.5px rgba(13,31,18,.28);
  transition:color .6s,-webkit-text-stroke-color .6s;
}
.kg .tl-item.actief .jaar {
  color:var(--kg-goud);
  -webkit-text-stroke-color:var(--kg-goud);
}
.kg .tl-item .kant-l {
  text-align:right;
  justify-self:end;
  max-width:520px;
}
.kg .tl-item .kant-r {
  justify-self:start;
  max-width:520px;
}
.kg .tl-item .stip {
  position:absolute;
  left:50%;
  top:64px;
  width:16px;
  height:16px;
  border-radius:50%;
  background:var(--kg-wit);
  border:2.5px solid rgba(13,31,18,.3);
  transform:translateX(-50%);
  transition:border-color .5s,background .5s;
  z-index:1;
}
.kg .tl-item.actief .stip {
  border-color:var(--kg-goud);
  background:var(--kg-goud-licht);
}
.kg .tl-item .gen {
  display:inline-block;
  font-family:var(--kg-kop);
  font-size:11.5px;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--kg-groen);
  border:1px solid var(--kg-groen);
  border-radius:999px;
  padding:5px 13px;
  margin-bottom:12px;
}
.kg .tl-item h3 {
  font-size:clamp(19px,2vw,23px) !important;
  font-weight:800 !important;
  letter-spacing:-.01em;
  margin-bottom:10px;
}
.kg .tl-item p {
  color:var(--kg-grijs);
  line-height:1.75;
}
.kg .tl-item .anekdote {
  margin-top:12px;
  font-size:14.5px;
  color:var(--kg-donker);
  background:var(--kg-licht);
  border-left:2px solid var(--kg-goud);
  padding:12px 16px;
  border-radius:0 10px 10px 0;
}
.kg .vh-hero .btn.outline,
.kg .groep .balk .btn.outline {
  background:transparent;
  border-color:rgba(255,255,255,.65);
  color:#fff;
}
.kg .vh-hero .btn.outline:hover,
.kg .groep .balk .btn.outline:hover {
  background:rgba(255,255,255,.14);
}
.kg .waarden-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:22px;
  margin-top:44px;
}
.kg .wk {
  position:relative;
  background:#fff;
  border:1px solid var(--kg-lijn);
  border-radius:var(--kg-radius);
  padding:28px 24px 30px;
  overflow:hidden;
  transition:transform .3s,box-shadow .3s;
}
.kg .wk .wk-lijn {
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:3px;
  background:linear-gradient(90deg,var(--kg-goud),var(--kg-goud-licht));
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .45s ease;
}
.kg .wk:hover {
  transform:translateY(-5px);
  box-shadow:0 20px 46px rgba(21,23,15,.12);
}
.kg .wk:hover .wk-lijn {
  transform:scaleX(1);
}
.kg .wk .wk-nr {
  font-family:var(--kg-kop);
  font-weight:800;
  font-size:52px;
  line-height:1;
  letter-spacing:-.02em;
  color:transparent;
  -webkit-text-stroke:1.3px rgba(13,31,18,.25);
  transition:color .4s,-webkit-text-stroke-color .4s;
  margin-bottom:16px;
}
.kg .wk:hover .wk-nr {
  color:var(--kg-goud);
  -webkit-text-stroke-color:var(--kg-goud);
}
.kg .wk:first-child .wk-nr {
  color:var(--kg-goud);
  -webkit-text-stroke-color:var(--kg-goud);
}
.kg .wk:first-child .wk-lijn {
  transform:scaleX(1);
}
.kg .waarden-grid:hover .wk:first-child:not(:hover) .wk-nr {
  color:transparent;
  -webkit-text-stroke-color:rgba(13,31,18,.25);
}
.kg .waarden-grid:hover .wk:first-child:not(:hover) .wk-lijn {
  transform:scaleX(0);
}
.kg .wk h3 {
  font-size:17.5px !important;
  font-weight:800 !important;
  letter-spacing:-.01em;
  margin-bottom:10px;
}
.kg .wk p {
  color:var(--kg-grijs);
  font-size:14.5px;
  line-height:1.7;
}
.kg .tl-item h3.met-kroon {
  display:flex;
  align-items:center;
  gap:10px;
}
.kg .tl-kroon {
  width:24px;
  height:24px;
  flex:none;
  color:var(--kg-goud);
}
.kg .tl-item .kant-l h3.met-kroon {
  justify-content:flex-end;
}
.kg .hof-v {
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.kg .hof-mini {
  width:20px;
  height:20px;
  flex:none;
  color:var(--kg-goud);
}
.kg .mc {
  position:relative;
  margin-top:44px;
}
.kg .mc-track {
  display:flex;
  gap:26px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
  -ms-overflow-style:none;
  padding:6px 2px 14px;
}
.kg .mc-track::-webkit-scrollbar {
  display:none;
}
.kg .mc .m-kaart {
  flex:0 0 322px;
  scroll-snap-align:start;
  display:flex;
  flex-direction:column;
}
.kg .m-kaart .mb {
  display:flex;
  flex-direction:column;
  flex:1;
}
.kg .m-kaart .naamrij {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
}
.kg .m-kaart .mln {
  flex:none;
  width:34px;
  height:34px;
  border-radius:50%;
  border:1px solid #0A66C2;
  display:grid;
  place-items:center;
  color:#0A66C2;
  transition:.22s;
}
.kg .m-kaart .mln svg {
  width:15px;
  height:15px;
}
.kg .m-kaart .mln:hover {
  background:#0A66C2;
  border-color:#0A66C2;
  color:#fff;
}
.kg .m-kaart .rol {
  min-height:44px;
}
.kg .m-kaart .lint {
  margin-top:auto;
}
.kg .mc .mcknop {
  position:absolute;
  top:38%;
  transform:translateY(-50%);
  z-index:3;
  width:48px;
  height:48px;
  border-radius:50%;
  border:1px solid var(--kg-lijn);
  background:#fff;
  color:var(--kg-groen-donker);
  display:grid;
  place-items:center;
  cursor:pointer;
  box-shadow:0 10px 26px rgba(21,23,15,.16);
  transition:.2s;
}
.kg .mc .mcknop svg {
  width:19px;
  height:19px;
}
.kg .mc .mcknop:hover {
  background:var(--kg-groen-donker);
  border-color:var(--kg-groen-donker);
  color:#fff;
}
.kg .mc .mcknop:disabled {
  opacity:.3;
  cursor:default;
}
.kg .mc .mcknop:disabled:hover {
  background:#fff;
  color:var(--kg-groen-donker);
  border-color:var(--kg-lijn);
}
.kg .mc .mcknop.prev {
  left:-12px;
}
.kg .mc .mcknop.next {
  right:-12px;
}
.kg .vestigingen {
  background:var(--kg-licht);
}
.kg .vh-cijfers {
  background:var(--kg-wit);
}
.kg .vh-cijfers .strip {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:26px;
  border-top:1px solid var(--kg-lijn);
  border-bottom:1px solid var(--kg-lijn);
  padding:44px 0;
}
.kg .vh-cijfers .cel {
  text-align:center;
  position:relative;
}
.kg .vh-cijfers .cel+.cel::before {
  content:"";
  position:absolute;
  left:-13px;
  top:8px;
  bottom:8px;
  width:1px;
  background:var(--kg-lijn);
}
.kg .vh-cijfers .getal {
  font-family:var(--kg-kop);
  font-weight:800;
  font-size:clamp(30px,3.6vw,44px);
  color:var(--kg-groen-donker);
  letter-spacing:-.01em;
}
.kg .vh-cijfers .label {
  margin-top:6px;
  font-size:14.5px;
  color:var(--kg-grijs);
}
.kg .inscriptie .plaat {
  display:grid;
  grid-template-columns:1.5fr .9fr;
  gap:38px;
  align-items:center;
}
.kg .plaat-foto {
  position:relative;
}
.kg .plaat-foto img {
  width:100%;
  height:auto;
  border-radius:var(--kg-radius-s);
  border:1px solid rgba(201,169,98,.4);
  display:block;
}
.kg .plaat-onderschrift {
  display:block;
  margin-top:10px;
  font-family:var(--kg-kop);
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--kg-goud-licht);
}

@media(max-width:980px) {
  .kg .tl-as {
    left:22px;
  }
  .kg .tl-item {
    grid-template-columns:1fr;
    gap:8px;
    padding:34px 0 34px 58px;
  }
  .kg .tl-item .kant-l {
    text-align:left;
    justify-self:start;
  }
  .kg .tl-item .stip {
    left:22px;
    top:20px;
  }
  .kg .tl-item .jaar {
    font-size:clamp(44px,10vw,72px);
  }
  .kg .waarden-grid {
    grid-template-columns:1fr 1fr;
    gap:16px;
  }
  .kg .tl-item h3.met-kroon {
    justify-content:flex-start;
  }
  .kg .tl-item .kant-l h3.met-kroon {
    justify-content:flex-start;
  }
  .kg .vh-cijfers .strip {
    grid-template-columns:1fr 1fr;
    gap:34px 26px;
  }
  .kg .vh-cijfers .cel:nth-child(3)::before {
    display:none;
  }
}

@media(max-width:760px) {
  .kg .inscriptie .plaat {
    grid-template-columns:1fr;
  }
}

@media(max-width:640px) {
  .kg .waarden-grid {
    grid-template-columns:1fr;
  }
  .kg .mc .m-kaart {
    flex-basis:76vw;
  }
  .kg .mc .mcknop.prev {
    left:4px;
  }
  .kg .mc .mcknop.next {
    right:4px;
  }
}