/* =========================================================
   Thema Kampen 800, naar het ontwerp van Lucas (Kampen 800-toolkit v0.7).
   Kleuren, kartelranden, subtiel scheve vlakken en knoppen komen uit zijn css.
   Letters: Prater Sans en Prater Script voor koppen en kreten (Adobe Fonts, kit in includes/adobe-fonts; de
   namen zijn ff-prater-sans-web en ff-prater-script-web), Source Sans 3 voor lopende tekst (zelf gehost, OFL).
   ========================================================= */
/* Source Sans 3 (variabel, gewicht 200-900), in twee delen: Latijn en Latijn-uitgebreid. De browser haalt het tweede deel alleen op als een tekst die tekens bevat. */
@font-face { font-family: "Source Sans 3"; src: url(/fonts/Source_Sans_3/source-sans-3-latin-wght-normal.woff2) format("woff2"); font-weight: 200 900; font-style: normal; font-display: swap; unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Source Sans 3"; src: url(/fonts/Source_Sans_3/source-sans-3-latin-ext-wght-normal.woff2) format("woff2"); font-weight: 200 900; font-style: normal; font-display: swap; unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Source Sans 3"; src: url(/fonts/Source_Sans_3/source-sans-3-latin-wght-italic.woff2) format("woff2"); font-weight: 200 900; font-style: italic; font-display: swap; unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Source Sans 3"; src: url(/fonts/Source_Sans_3/source-sans-3-latin-ext-wght-italic.woff2) format("woff2"); font-weight: 200 900; font-style: italic; font-display: swap; unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }

body.k800 {
  --rood: #cb1226;
  --rood-dk: #b00f1e;
  --blauw: #13b3ca;
  /* Toegankelijke varianten (WCAG 2.2 AA). Merkblauw #13b3ca haalt op wit maar 2,5:1 en op crème 2,1:1,
     te weinig voor tekst. Merkkleuren blijven voor vlakken, slinger en accenten; tekst gebruikt deze: */
  --blauw-kop: #0090a4;    /* grote tekst (koppen): 3,8:1 op wit, 3,1:1 op crème */
  --blauw-tekst: #007383;  /* gewone tekst en blauwe vlakken met witte tekst: 5,6:1 op wit, 4,6:1 op crème */
  --rood-tekst: #cb1226;   /* rode tekst en links: het merkrood uit de huisstijlgids haalt zelf 5,8:1 op wit en 4,7:1 op crème */
  --creme: #f4e7db;
  --antraciet: #3c3c3b;
  --ink: #3c3c3b;

  /* Vormen en draaiingen (design system, feedback Lucas 02-11-2026): half zo scheef als eerst, en twee vormen naast
     elkaar staan nooit precies even scheef (varianten a/b/c). */
  --vorm-a: polygon(0 .45%, 100% 0, 99.65% 99.7%, .25% 100%);
  --vorm-b: polygon(.3% 0, 99.75% .35%, 100% 100%, 0 99.55%);
  --vorm-c: polygon(0 0, 99.7% .5%, 100% 99.7%, .4% 100%);
  --draai-a: -.125deg; --draai-b: .1deg; --draai-c: -.075deg;
  --vorm-knop-a: polygon(0 1.5%, 100% 0, 99.6% 98.5%, .3% 100%);
  --vorm-knop-b: polygon(.4% 0, 99.7% 1.5%, 100% 100%, 0 98%);
  --draai-knop-a: -.15deg; --draai-knop-b: .1deg;
  --vorm-chip-a: polygon(0 2.5%, 100% 0, 99.25% 97.5%, .75% 100%);
  --vorm-chip-b: polygon(.6% 0, 99.4% 3%, 100% 100%, 0 97%);
  --vorm-chip-c: polygon(0 0, 99% 2%, 99.6% 100%, .4% 96.5%);
  --draai-chip-a: -.2deg; --draai-chip-b: .25deg; --draai-chip-c: -.1deg;
  --vorm-veld: polygon(0 2%, 100% 0, 99.5% 98%, .5% 100%);

  --display: "ff-prater-sans-web", "Arial Black", sans-serif;
  --script: "ff-prater-script-web", cursive;
  --body: "Source Sans 3", "Helvetica Neue", Arial, sans-serif;

  --maxw: 1180px;
  --gutter: clamp(1.25rem, 5vw, 5rem);
  --copy: 1.15rem;
  --h3: clamp(1.4rem, 2.2vw, 1.65rem);
  --sectie: clamp(4rem, 9vh, 6.5rem);
  --blok: clamp(2.5rem, 6vh, 4rem);

  margin: 0;
  background: #fff;
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
html { scroll-behavior: smooth; scroll-padding-top: 90px; }
body.k800 img { max-width: 100%; }
body.k800 a { color: var(--rood-tekst); }
body.k800 ::selection { background: var(--rood); color: #fff; }

body.k800 h1, body.k800 h2, body.k800 h3, body.k800 h4 {
  font-family: var(--display);
  font-weight: 900;
  line-height: .95;
  margin: 0 0 .8rem;
  text-transform: uppercase;
  letter-spacing: .01em;
  color: var(--blauw-kop);
  text-align: left;
}
body.k800 h1 { font-size: clamp(2.8rem, 6.5vw, 5rem); }
body.k800 h2 { font-size: clamp(2.2rem, 5vw, 3.6rem); }
body.k800 h3, body.k800 h4 { font-size: var(--h3); } /* h4 uit de inhoud: te klein voor de lichte kopkleur (grote tekst vanaf 18,66 px vet) */
body.k800 h5, body.k800 h6 { font-size: 1.15rem; color: var(--blauw-tekst); }
body.k800 p, body.k800 li { font-size: var(--copy); color: var(--ink); }
body.k800 p { margin: 0 0 1rem; }
/* Blokken met een donkere achtergrond (antraciet, blauw): witte tekst en koppen. De regels hierboven zetten tekst
   en koppen op een vaste kleur, waardoor ze op een donker vlak donker op donker of blauw op antraciet werden. */
body.k800 :is(.cms-bg--antraciet, .cms-bg--blauw) :is(p, li, h2, h3, h4) { color: var(--cms-fg); }

.k-skip { position: absolute; left: -999px; top: 0; background: var(--rood); color: #fff !important; padding: .4rem .8rem; z-index: 60; }
.k-skip:focus { left: 0; }

.k-inner { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); position: relative; z-index: 1; }
.k-lede { max-width: 60ch; margin: 0 0 var(--blok) !important; }
.k-kreet { font-family: var(--script) !important; color: var(--rood-tekst) !important; font-size: clamp(1.3rem, 2.4vw, 1.9rem) !important; rotate: -2deg; display: inline-block; margin: 0 0 1rem .2rem !important; line-height: 1.3; }
.k-rich p { margin: 0 0 1rem; }
.k-rich ul { list-style: none; padding: 0; margin: 0 0 1rem; }
.k-rich ul li { position: relative; padding-left: 1.5rem; margin-bottom: .45rem; }
.k-rich ul li::before { content: ""; position: absolute; left: 0; top: .55em; width: 11px; height: 11px; background: var(--rood); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.k-rich ol { padding-left: 1.3rem; margin: 0 0 1rem; }
.k-rich a { color: var(--rood-tekst); text-decoration: underline; text-underline-offset: .15em; }
.k-rich strong { color: var(--ink); }
.k-rich img { height: auto; }
.k-rich h2, .k-rich h3 { margin-top: 1.5rem; }

/* ---------- Subtiel scheef (Lucas) ---------- */
.k-tilt-a { clip-path: var(--vorm-a); rotate: var(--draai-a); }
.k-tilt-b { clip-path: var(--vorm-b); rotate: var(--draai-b); }
.k-tilt-c { clip-path: var(--vorm-c); rotate: var(--draai-c); }

/* ---------- Kartelranden: tandjes in de kleur van het volgende vlak ----------
   Het patroon is een halve tand opgeschoven: de punt valt op de naad tussen twee tegels, het dal midden in een tegel.
   Viel het dal op de naad, dan leek het rond (Lucas, 02-11-2026). */
.rand-onder-wit, .rand-onder-creme, .rand-onder-blauw, .rand-onder-antraciet { position: relative; }
.rand-onder-wit::after, .rand-onder-creme::after, .rand-onder-blauw::after, .rand-onder-antraciet::after {
  content: ""; position: absolute; bottom: -1px; left: 0; right: 0; height: 16px; z-index: 2; pointer-events: none; /* 1px over de volgende baan: geen naadje op hoge resolutie */
  background-repeat: repeat-x; background-size: 32px 16px;
}
.rand-onder-wit::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='16' viewBox='0 0 32 16'%3E%3Cpath d='M0 0 L16 16 L32 0 V16 H0 Z' fill='%23ffffff'/%3E%3C/svg%3E"); }
.rand-onder-creme::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='16' viewBox='0 0 32 16'%3E%3Cpath d='M0 0 L16 16 L32 0 V16 H0 Z' fill='%23f4e7db'/%3E%3C/svg%3E"); }
.rand-onder-blauw::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='16' viewBox='0 0 32 16'%3E%3Cpath d='M0 0 L16 16 L32 0 V16 H0 Z' fill='%23007383'/%3E%3C/svg%3E"); }
.rand-onder-antraciet::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='16' viewBox='0 0 32 16'%3E%3Cpath d='M0 0 L16 16 L32 0 V16 H0 Z' fill='%233c3c3b'/%3E%3C/svg%3E"); }

/* ---------- Knoppen ---------- */
.k-btn {
  display: inline-block; font-family: var(--display); font-weight: 900; text-transform: uppercase;
  letter-spacing: .04em; font-size: 1.1rem; line-height: 1; text-decoration: none !important;
  /* Ruimte rond de letters overal gelijk (Lucas). Prater: kaphoogte = ascent (.8em), descent .2em; met regelafstand 1
     is er onder de letters .2em meer ruimte, dus die gaat van de onderruimte af. */
  --ruimte: .85rem; padding: var(--ruimte) var(--ruimte) calc(var(--ruimte) - .2em); border: 0; cursor: pointer;
  clip-path: var(--vorm-knop-a); rotate: var(--draai-knop-a);
  transition: translate .25s, background .25s, color .25s;
}
.k-btn:nth-of-type(2n) { clip-path: var(--vorm-knop-b); rotate: var(--draai-knop-b); }
.k-btn:hover { translate: 0 -2px; }
.k-btn--red { background: var(--rood); color: #fff !important; }
.k-btn--red:hover { background: var(--rood-dk); }
.k-btn--white { background: #fff; color: var(--rood) !important; }
.k-btn--white:hover, .k-btn--white:focus-visible { background: var(--creme); color: var(--rood-tekst) !important; }
.k-btn--small { --ruimte: .6rem; font-size: .95rem; }
.k-knoprij { margin-top: 2rem !important; }
.k-chip {
  display: inline-block; font-family: var(--display); font-weight: 900; text-transform: uppercase; letter-spacing: .06em;
  font-size: .9rem; line-height: 1; --ruimte: .45rem; background: var(--rood); color: #fff;
  padding: var(--ruimte) calc(var(--ruimte) - .06em) calc(var(--ruimte) - .2em) var(--ruimte); /* gelijk rondom; rechts zonder de letterspatie */
  clip-path: var(--vorm-chip-a); rotate: var(--draai-chip-a); align-self: flex-start;
}
/* Source Sans staat iets hoog in het vak: iets meer ruimte boven dan onder, zodat de ruimte rondom gelijk oogt */
.k-chiplink {
  display: inline-block; background: #fff; color: var(--blauw-tekst) !important; text-decoration: none !important; font-weight: 700;
  line-height: 1.2; padding: .55rem .8rem .5rem; margin: 0 .4rem .4rem 0; clip-path: var(--vorm-chip-a); rotate: var(--draai-chip-a);
  transition: translate .25s;
}
.k-chiplink:hover { translate: 0 -2px; }
/* Geen vorm gelijk aan de buurman: chips en chiplinks wisselen per drie, ook de chips in kaarten naast elkaar */
.k-chip:nth-of-type(3n+2), .k-chiplink:nth-of-type(3n+2), .k-fotokaart:nth-child(3n+2) .k-chip { clip-path: var(--vorm-chip-b); rotate: var(--draai-chip-b); }
.k-chip:nth-of-type(3n), .k-chiplink:nth-of-type(3n), .k-fotokaart:nth-child(3n) .k-chip { clip-path: var(--vorm-chip-c); rotate: var(--draai-chip-c); }
.k-chiplink--blauw { background: var(--blauw-tekst); color: #fff !important; }

/* =========================================================
   NAV (Lucas)
   ========================================================= */
.k-nav {
  position: sticky; top: 0; z-index: 50; display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; padding: .7rem var(--gutter) .6rem; background: #fff;
}
.k-brand { display: flex; align-items: center; gap: .7rem; text-decoration: none !important; flex: none; }
.k-brand__logo { height: 50px; width: auto; }
.k-brand__stack { display: flex; flex-direction: column; line-height: 1; }
.k-brand__kampen { font-family: var(--display); font-weight: 900; text-transform: uppercase; font-size: 1.45rem; color: var(--blauw-kop); letter-spacing: .02em; }
.k-brand__text { font-family: var(--script); font-size: 1rem; color: var(--rood); line-height: 1; rotate: -3deg; transform-origin: left center; margin-top: .15rem; }
.k-nav__links { display: flex; align-items: center; gap: clamp(.8rem, 1.6vw, 1.5rem); flex-wrap: wrap; justify-content: flex-end; }
.k-nav__links a {
  text-decoration: none !important; color: var(--rood); font-family: var(--display); font-weight: 900; text-transform: uppercase;
  font-size: 1.05rem; letter-spacing: .04em; position: relative; white-space: nowrap; padding: .2rem 0;
}
.k-nav__links > a::after, .k-nav__groep > a::after {
  content: ""; position: absolute; left: 0; bottom: -2px; width: 100%; height: 3px; background: var(--blauw);
  transform: scaleX(0) skewX(-20deg); transform-origin: left; transition: transform .35s cubic-bezier(.16,1,.3,1);
}
.k-nav__links > a:hover::after, .k-nav__groep:hover > a::after { transform: scaleX(1) skewX(-20deg); }
.k-nav__alt { color: var(--antraciet) !important; font-size: .95rem !important; }
.k-nav__groep { position: relative; }
.k-nav__sub {
  position: absolute; top: 100%; left: -1rem; min-width: 240px; padding: .8rem 1rem; background: var(--creme); /* crème vlak, geen schaduw (Lucas) */
  display: none; flex-direction: column; gap: .5rem;
  clip-path: polygon(0 .5%, 100% 0, 99.75% 100%, .25% 99.5%);
}
.k-nav__groep:hover .k-nav__sub, .k-nav__groep:focus-within .k-nav__sub { display: flex; }
.k-nav__sub a { font-size: .95rem; color: var(--antraciet); white-space: normal; }
.k-nav__sub a:hover { color: var(--rood); }
.k-nav__burger { display: none; background: var(--rood); color: #fff; border: 0; font-family: var(--display); font-weight: 900; text-transform: uppercase; line-height: 1; padding: .6rem .6rem .4rem; clip-path: var(--vorm-veld); }

@media (max-width: 1000px) {
  .k-nav { flex-wrap: wrap; }
  .k-nav__burger { display: inline-block; }
  .k-nav__links { display: none; width: 100%; flex-direction: column; align-items: flex-start; gap: .6rem; padding: .5rem 0 1rem; }
  /* Open menu past altijd in beeld: zelf scrollen bij weinig hoogte (400% zoom, telefoon liggend) - WCAG 1.4.10 */
  .k-nav__links.is-open { display: flex; max-height: calc(100vh - 5rem); max-height: calc(100dvh - 5rem); overflow-y: auto; overscroll-behavior: contain; }
  .k-nav__sub { position: static; display: flex; background: none; padding: .3rem 0 0 1rem; min-width: 0; clip-path: none; }
  .k-brand__logo { height: 42px; }
}

/* =========================================================
   PAGINAKOP: crème vlak met slinger
   ========================================================= */
.k-kop { position: relative; overflow: hidden; background: var(--creme); padding: calc(var(--sectie) * .8) 0 var(--sectie); }
.k-kop__slinger { position: absolute; top: -18px; right: -2%; width: min(46%, 560px); pointer-events: none; z-index: 0; }
.k-kop__titel { max-width: 8.8em; margin-bottom: 1rem !important; } /* = 16ch in de oude Prater-bestanden; de 0 van Prater bij Adobe is breder, en ch hangt aan de 0 */
.k-kop__lede { max-width: 62ch; margin-top: 1rem; }
.k-kop__lede p:first-child { font-size: 1.3rem; }
.k-kop__lede img { display: inline-block; height: 44px; width: auto; margin: .3rem .5rem .3rem 0; }
.k-kop__beeld { width: 100%; max-height: 520px; object-fit: cover; margin-top: var(--blok); display: block; }
.k-kruimel { font-size: .95rem; margin-bottom: 1.4rem; display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.k-kruimel a { color: var(--antraciet); text-decoration: underline; display: inline-block; min-height: 24px; line-height: 24px; } /* klikvlak minimaal 24 px (WCAG 2.5.8) */
.k-kruimel span[aria-hidden] { color: var(--rood); }
@media (max-width: 760px) { .k-kop__slinger { width: 70%; top: -10px; opacity: .9; } .k-kop { padding-top: 5rem; } }

/* =========================================================
   VLAKKEN
   ========================================================= */
.k-vlak { padding: var(--sectie) 0; }
.k-vlak--wit { background: #fff; }
.k-vlak--creme { background: var(--creme); }
.k-vlak > .k-inner > * + * { margin-top: var(--blok); }
.k-vlak--paragraph > .k-inner > * + * { margin-top: 2rem; }

/* Tekst */
/* Lopende tekst op leesbare breedte (70 tekens); koppen mogen de volle breedte gebruiken en lopen evenwichtig door. */
.k-tekst > * { max-width: 70ch; }
.k-tekst > h2, .k-tekst > h3 { max-width: none; text-wrap: balance; }

/* Tekst en afbeelding */
.k-duo { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
.k-duo--omgekeerd .k-duo__beeld { order: 2; }
.k-duo__beeld img { width: 100%; height: auto; max-height: 85vh; object-fit: cover; display: block; } /* eigen verhouding: niet bijsnijden tot 4:3 (een plaquette van 16:9 verloor zijn randen) */
.k-duo__tekst .k-btn { margin-top: .6rem; }
@media (max-width: 860px) { .k-duo { grid-template-columns: 1fr; } .k-duo--omgekeerd .k-duo__beeld { order: 0; } }

/* Kaarten krijgen de andere kleur dan het vlak (Lucas) */
.k-kaarten { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: clamp(1rem, 2vw, 1.5rem); }
.k-kaart { background: var(--creme); padding: 1.6rem 1.4rem 1.4rem; }
.k-vlak--creme .k-kaart, .k-vlak--creme .k-oproep { background: #fff; }
.k-kaart__icoon { height: 40px; width: auto; margin-bottom: .8rem; }
.k-kaart .k-rich p:last-child { margin-bottom: 0; }

/* Oproep */
.k-oproep { background: var(--creme); display: grid; grid-template-columns: 1.3fr 1fr; align-items: stretch; max-width: 980px; }
.k-oproep__tekst { padding: clamp(1.6rem, 3vw, 2.4rem); }
.k-oproep__beeld { width: 100%; height: auto; align-self: center; display: block; } /* eigen verhouding: niet uitrekken en bijsnijden (een plaatje met tekst verloor zijn randen) */
@media (max-width: 760px) { .k-oproep { grid-template-columns: 1fr; } .k-oproep__beeld { order: -1; } }

/* Fotokaarten (raster, uitgelicht, tegels) */
.k-fotokaarten { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: clamp(1rem, 2vw, 1.4rem); }
.k-fotokaart { display: flex; flex-direction: column; text-decoration: none !important; color: var(--ink) !important; background: var(--creme); transition: translate .3s cubic-bezier(.16,1,.3,1); }
.k-vlak--creme .k-fotokaart { background: #fff; }
.k-fotokaart:nth-child(3n+1) { clip-path: var(--vorm-a); rotate: var(--draai-a); }
.k-fotokaart:nth-child(3n+2) { clip-path: var(--vorm-b); rotate: var(--draai-b); }
.k-fotokaart:nth-child(3n) { clip-path: var(--vorm-c); rotate: var(--draai-c); }
.k-fotokaart:hover { translate: 0 -4px; }
.k-fotokaart--los:hover { translate: none; }
.k-fotokaart img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; }
.k-fotokaart__tekst { display: flex; flex-direction: column; gap: .5rem; padding: 1rem 1.2rem 1.3rem; min-width: 0; }
.k-fotokaart__titel { font-family: var(--display); font-weight: 900; text-transform: uppercase; color: var(--blauw-kop); font-size: 1.35rem; line-height: 1; overflow-wrap: break-word; text-wrap: balance; } /* een lange titel valt nooit uit de kaart */
.k-fotokaart__extra { font-size: .95rem; }

/* Foto's */
.k-fotos { display: grid; grid-template-columns: repeat(var(--n, 2), 1fr); gap: clamp(.8rem, 1.6vw, 1.2rem); }
.k-fotos--1 { --n: 1; } .k-fotos--3 { --n: 3; }
.k-fotos img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; }
.k-fotos img:nth-child(odd) { clip-path: polygon(0 .4%, 100% 0, 99.7% 99.7%, .2% 100%); }
.k-fotos img:nth-child(even) { clip-path: polygon(.3% 0, 99.75% .4%, 100% 100%, 0 99.6%); }
@media (max-width: 600px) { .k-fotos { grid-template-columns: 1fr; } }

/* Citaat */
.k-citaat { display: grid; grid-template-columns: auto 1fr; gap: clamp(1.2rem, 3vw, 2.5rem); align-items: center; margin: 0; max-width: 960px; }
.k-citaat__beeld { width: clamp(140px, 22vw, 240px); aspect-ratio: 1; object-fit: cover; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.k-citaat blockquote { margin: 0; }
.k-citaat__tekst, .k-citaat__tekst p { font-family: var(--display) !important; font-weight: 900; text-transform: uppercase; color: var(--blauw-kop) !important; font-size: clamp(1.8rem, 4vw, 3rem) !important; line-height: 1 !important; }
@media (max-width: 640px) { .k-citaat { grid-template-columns: 1fr; } }

/* Formulier en video */
.k-formulier { background: #fff; padding: clamp(1rem, 2vw, 1.6rem); max-width: 860px; }
.k-vlak--wit .k-formulier { background: var(--creme); }
.k-video { max-width: 960px; }
.k-video__frame { position: relative; aspect-ratio: 16 / 9; }
.k-video__frame iframe, .k-video__frame video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.k-video__frame video { background: #000; object-fit: contain; }

/* Delen */
.k-delen .k-inner { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
.k-delen__kop { font-family: var(--display); font-weight: 900; text-transform: uppercase; color: var(--blauw-kop); font-size: 1.3rem; line-height: 1.2; margin: 0 .6rem 0 0; }
.k-vlak.k-delen { padding: 2.5rem 0 3.5rem; }

/* =========================================================
   FOOTER (blauw, Lucas)
   ========================================================= */
.k-footer { background: var(--blauw-tekst); color: #fff; padding: var(--sectie) var(--gutter) 2rem; }
.k-footer__inner { max-width: var(--maxw); margin: 0 auto; display: grid; grid-template-columns: 1fr 1.2fr 1.2fr; gap: clamp(1.8rem, 4vw, 3.5rem); }
.k-footer h4 { color: #fff !important; font-size: var(--h3); }
.k-footer p, .k-footer label { color: #fff !important; }
.k-footer__ruit { display: grid; place-items: center; width: 170px; aspect-ratio: 1; background: #fff; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.k-footer__ruit img { width: 46%; }
.k-footer__link { display: block; color: #fff !important; margin-top: .4rem; }
.k-footer__copy { max-width: var(--maxw); margin: 3rem auto 0 !important; font-size: .9rem !important; color: rgba(255,255,255,.8) !important; }
.k-footer__copy a { color: #fff !important; }
.k-nieuwsbrief label { display: block; margin-bottom: .6rem; }
.k-nieuwsbrief div { display: flex; gap: .5rem; flex-wrap: wrap; }
.k-nieuwsbrief input { flex: 1; min-width: 180px; border: 0; padding: .7rem .9rem; font-size: 1rem; color: var(--ink); clip-path: var(--vorm-veld); }
.k-nieuwsbrief input.is-fout { background: #fde8ea; }
.k-nieuwsbrief__melding { margin: .6rem 0 0; min-height: 1.4em; font-weight: 700; color: #fff; }
.k-nieuwsbrief__melding.is-fout::before { content: "Let op: "; }
@media (max-width: 860px) { .k-footer__inner { grid-template-columns: 1fr; } }

/* De standaard-site zet een rand onder elke link; in dit thema alleen onderstrepen waar het hoort. */
body.k800 a, body.k800 a:hover { border-bottom: 0; }

/* =========================================================
   TOEGANKELIJKHEID (WCAG 2.2 AA)
   ========================================================= */
/* Zichtbare focus. Scheve vormen (clip-path) knippen een gewone outline weg,
   daarom vallen ze bij toetsenbordfocus terug op een rechte vorm. */
body.k800 :focus-visible {
  outline: 3px solid var(--antraciet) !important;
  outline-offset: 3px;
  box-shadow: 0 0 0 6px #fff;
  clip-path: none !important;
}
body.k800 .k-footer :focus-visible { outline-color: #fff !important; box-shadow: 0 0 0 6px var(--antraciet); }
.k-skip:focus { left: var(--gutter); top: .5rem; outline: 3px solid var(--antraciet); }

/* Minder beweging voor wie dat heeft ingesteld (2.3.3, best practice) */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  body.k800 *, body.k800 *::before, body.k800 *::after { transition: none !important; animation: none !important; }
  .k-btn:hover, .k-fotokaart:hover, .k-chiplink:hover { translate: none !important; }
}

/* Alleen voor schermlezers */
.k-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Footerkoppen zijn h2 voor een logische koppenstructuur, maar zien eruit als h3 */
.k-footer h2 { font-size: var(--h3) !important; color: #fff !important; }
.k-footer__vraag { margin-top: 1rem; }
.k-footer__adres { font-style: normal; margin-top: 1rem; overflow-wrap: anywhere; }
.k-footer__tel { display: block; }

/* Lange woorden en url's mogen afbreken, zodat niets buiten beeld valt op 320 px breed (WCAG 1.4.10) */
.k-rich, .k-oproep__tekst, .k-duo__tekst, .k-kaart, .k-tekst { overflow-wrap: anywhere; min-width: 0; }
.k-oproep > *, .k-duo > * { min-width: 0; }

/* Met Escape gesloten submenu blijft dicht tot de muis of focus de groep verlaat */
.k-nav__groep.is-dicht .k-nav__sub { display: none !important; }

/* Nieuwe CMS-blokken (cms-blocks.css) in dit thema ook in de huisstijlletters */
body.k800 .cms-block, body.k800 .cms-faq summary, body.k800 .cms-download h3 { font-family: var(--body); }
body.k800 .cms-kop, body.k800 .cms-card h3, body.k800 .cms-stat__getal, body.k800 .cms-btn { font-family: var(--display); }
body.k800 .cms-kreet { font-family: var(--script); }

/* =========================================================
   Controle 19-10-2026
   ========================================================= */

/* Kartelrand bovenin een fotoband: tandjes in de kleur van het vlak erboven, naar beneden over de foto's. */
.rand-boven-wit, .rand-boven-creme, .rand-boven-blauw, .rand-boven-antraciet { position: relative; }
.rand-boven-wit::before, .rand-boven-creme::before, .rand-boven-blauw::before, .rand-boven-antraciet::before {
  content: ""; position: absolute; top: -1px; left: 0; right: 0; height: 16px; z-index: 2; pointer-events: none; /* 1px over de vorige baan: geen naadje op hoge resolutie */
  background-repeat: repeat-x; background-size: 32px 16px;
}
.rand-boven-wit::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='16' viewBox='0 0 32 16'%3E%3Cpath d='M0 16 L16 0 L32 16 V0 H0 Z' fill='%23ffffff'/%3E%3C/svg%3E"); }
.rand-boven-creme::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='16' viewBox='0 0 32 16'%3E%3Cpath d='M0 16 L16 0 L32 16 V0 H0 Z' fill='%23f4e7db'/%3E%3C/svg%3E"); }
.rand-boven-blauw::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='16' viewBox='0 0 32 16'%3E%3Cpath d='M0 16 L16 0 L32 16 V0 H0 Z' fill='%23007383'/%3E%3C/svg%3E"); }
.rand-boven-antraciet::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='16' viewBox='0 0 32 16'%3E%3Cpath d='M0 16 L16 0 L32 16 V0 H0 Z' fill='%233c3c3b'/%3E%3C/svg%3E"); }

/* Koppen niet midden in een woord afbreken ("HEL-DEN"); alleen op smalle schermen mag het, anders
   steekt een lang woord buiten beeld. */
body.k800 h1, body.k800 h2, body.k800 h3 { -webkit-hyphens: manual; hyphens: manual; }
@media (max-width: 480px) { body.k800 h1, body.k800 h2 { -webkit-hyphens: auto; hyphens: auto; } }

/* "Deel deze pagina": kleine kop naast de knoppen (de algemene h2 maakte hem groot). */
body.k800 .k-delen__kop { font-size: 1.3rem; line-height: 1.2; margin: 0 .6rem 0 0; }

/* Evenement */
.k-event__labels { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 .8rem !important; }
.k-event__raster { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(260px, 1fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; }
.k-vlak > .k-event__raster > * + * { margin-top: 0; }
.k-event__beeld { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; margin-bottom: 1.6rem; }
.k-event__intro p:first-child { font-size: 1.2rem; }
.k-event__kaart { background: var(--creme); padding: 1.6rem 1.5rem 1.4rem; }
body.k800 .k-event__kop { font-size: 1.15rem; line-height: 1.1; margin: 0 0 .3rem; color: var(--blauw-tekst); } /* 18px is geen grote tekst: blauw-kop haalde 3,1:1 op crème */
.k-event__kaart p, .k-event__datums { margin: 0 0 1.1rem; }
.k-event__kaart > :last-child { margin-bottom: 0; }
.k-event__mail { overflow-wrap: anywhere; }
.k-event__knop { margin-top: 1.4rem !important; }
.k-event__kaartvlak .maps { width: 100% !important; max-width: none; padding: 0 !important; }
@media (max-width: 860px) { .k-event__raster { grid-template-columns: 1fr; } }
/* De algemene ruimte tussen onderdelen in een vlak gold ook voor de deelknoppen: op smalle schermen kwam
   de tweede knop ver onder de eerste. */
.k-vlak.k-delen > .k-inner > * + * { margin-top: 0; }
/* Zoek- en overzichtspagina's uit Drupal (Nieuws, Zoeken): de titels van de resultaten werden zo groot als een
   paginakop. Ze krijgen weer een gewone tussenkopmaat. */
body.k800 h2.font-sourcesansprobold, body.k800 h3.font-sourcesansprobold {
  font-family: var(--body); font-weight: 700; text-transform: none; letter-spacing: 0;
  font-size: 1.4rem; line-height: 1.25;
}

/* Nieuws en zoeken in het thema */
body.k800 .cms-nieuws__titel, body.k800 .cms-zoek__titel, body.k800 .cms-zoek__kop { font-family: var(--display); font-weight: 900; }
body.k800 .cms-nieuws__titel a, body.k800 .cms-zoek__titel a { color: var(--blauw-kop) !important; }
body.k800 .cms-zoek__kop { color: var(--blauw-kop); text-transform: uppercase; font-size: clamp(1.5rem, 3vw, 2rem) !important; line-height: 1.1; margin: .5rem 0 .4rem !important; }
.k-kop__datum { font-weight: 700; margin: -.4rem 0 1rem; }
body.k800 .cms-nieuws__titel { font-size: 1.35rem !important; line-height: 1.1 !important; margin: 0 !important; }

/* =========================================================
   Huisstijl Kampen 800 voor alle sites (22-10-2026)
   ========================================================= */

/* Kop en menu: knoppen in het menu (items zonder adres, zoals "Meer in Kampen" en de taalkeuze) zien eruit als links */
.k-nav__knop {
  background: none; border: 0; padding: .2rem 0; margin: 0; cursor: pointer; color: var(--rood);
  font-family: var(--display); font-weight: 900; text-transform: uppercase; font-size: 1.05rem; letter-spacing: .04em; white-space: nowrap;
}
.k-nav__knop.k-nav__alt { color: var(--antraciet); font-size: .95rem; }
.k-nav__knop::after { content: ""; display: inline-block; margin-left: .35rem; width: 0; height: 0; border: .3rem solid transparent; border-top-color: currentColor; border-bottom: 0; vertical-align: .15em; }
.k-nav__groep.is-open .k-nav__sub { display: flex; }
.k-nav__groep--alt > a, .k-nav__groep--alt > button { color: var(--antraciet); }
.k-nav__links a.k-nav__sub-diep, .k-nav__sub .k-nav__sub-diep { padding-left: 1rem; font-size: .9rem; }
.k-nav__sub a[target="_blank"] { white-space: normal; }
/* Hulpmenu: kleiner en dichter op elkaar, zodat hoofd- en hulpmenu samen op één regel passen waar dat kan */
.k-nav__links { gap: clamp(.6rem, 1.2vw, 1.3rem); }
.k-nav__links a.k-nav__alt { font-size: .9rem; }
@media (min-width: 1001px) {
  /* Het hulpmenu staat rechts: de submenu's klappen naar links uit, zodat ze niet buiten beeld vallen */
  .k-nav__groep--alt .k-nav__sub { left: auto; right: -1rem; }
  .k-nav__links { row-gap: .2rem; }
}
/* Naam naast het logo mag afbreken; lange namen ("Evenementenplatform Kampen") vallen anders buiten beeld op 320 px */
.k-brand { flex: 0 1 auto; min-width: 0; }
.k-brand__stack { min-width: 0; }
.k-brand__kampen { overflow-wrap: anywhere; }
@media (max-width: 480px) { .k-brand__kampen { font-size: 1.15rem; } .k-brand__logo { height: 38px; } }

/* Footer voor sites met het Kampen-logo: wit vlak (handboek 2020: het logo staat op wit, niet op een gekleurde achtergrond) */
.k-footer__logo { display: inline-grid; place-items: center; width: 170px; padding: 1.2rem 1.4rem; background: #fff; }
.k-footer__logo img { width: 100%; height: auto; display: block; }

/* Hero (Visit Kampen): foto of video, de regels als kop en drie tegels */
.k-vlak--hero { padding-top: calc(var(--sectie) * .6); }
.k-hero__beeld, .k-hero__video { width: 100%; display: block; background: var(--creme); }
.k-hero__beeld { max-height: 560px; object-fit: cover; }
.k-hero__video { aspect-ratio: 16 / 9; position: relative; }
.k-hero__video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.k-hero__titel { margin: 1.8rem 0 0 !important; font-family: var(--display); font-weight: 900; text-transform: uppercase; line-height: .95; color: var(--blauw-kop); font-size: clamp(2rem, 5vw, 3.6rem) !important; }
.k-hero__regel { display: block; }
.k-hero__regel.is-accent { font-family: var(--script); font-weight: 400; text-transform: none; color: var(--rood-tekst); font-size: .8em; rotate: -2deg; transform-origin: left; margin: .15em 0; }
.k-hero__links { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: clamp(1rem, 2vw, 1.4rem); margin-top: var(--blok); }
.k-hero__link { display: flex; flex-direction: column; gap: .4rem; padding: 1.3rem 1.4rem 1.4rem; background: var(--creme); color: var(--ink) !important; text-decoration: none !important; transition: translate .3s cubic-bezier(.16,1,.3,1); }
.k-vlak--creme .k-hero__link { background: #fff; }
.k-hero__link:nth-child(3n+1) { clip-path: var(--vorm-a); rotate: var(--draai-a); }
.k-hero__link:nth-child(3n+2) { clip-path: var(--vorm-b); rotate: var(--draai-b); }
.k-hero__link:nth-child(3n) { clip-path: var(--vorm-c); rotate: var(--draai-c); }
.k-hero__link:hover { translate: 0 -4px; }
.k-hero__link-titel { font-family: var(--display); font-weight: 900; text-transform: uppercase; color: var(--blauw-kop); font-size: 1.5rem; line-height: 1; overflow-wrap: break-word; text-wrap: balance; }
/* Eigen pijl in de dikte van de Prater, geen lettertype-pijltje (Lucas). De vaste spatie houdt hem aan het laatste woord,
   zodat hij nooit alleen op de volgende regel valt ("Winkelen in Kampen"). Op kaphoogte gecentreerd. */
.k-hero__link-titel::after { content: "\00a0"; padding-right: .8em; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='18' viewBox='0 0 22 18'%3E%3Cpath d='M0 6.5H11V0L22 9L11 18V11.5H0Z' fill='%23cb1226'/%3E%3C/svg%3E") no-repeat right 0 top .075em / .8em .655em; }
.k-hero__link-tekst { font-size: 1rem; }

/* Ranglijst */
.k-ranking { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(1.6rem, 3vw, 2.4rem); }
.k-ranking__item { position: relative; display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: clamp(1rem, 3vw, 2.4rem); align-items: start; }
.k-ranking__item:not(:has(img)) { grid-template-columns: minmax(0, 1fr); }
.k-ranking__beeld { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.k-ranking__titel { display: flex; align-items: center; gap: .8rem; margin: 0 0 .5rem !important; font-size: var(--h3); }
.k-ranking__titel a { color: var(--blauw-kop); text-decoration: none; }
.k-ranking__titel a::after { content: ""; position: absolute; inset: 0; } /* hele kaart klikbaar */
.k-ranking__nr {
  flex: none; display: grid; place-items: center; width: 2.6rem; height: 2.6rem; background: var(--rood); color: #fff;
  font-family: var(--display); font-size: 1.3rem; line-height: 1; padding-top: .2em; box-sizing: border-box; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); /* .2em: Prater-descent, anders staat het cijfer te hoog */
}
.k-ranking__adres { font-weight: 700; margin-bottom: .6rem !important; }
.k-ranking__tekst .k-rich a { position: relative; z-index: 3; }
@media (max-width: 760px) { .k-ranking__item { grid-template-columns: minmax(0, 1fr); } }

/* "Voeg toe aan agenda" */
.k-agendakaart { background: var(--creme); padding: clamp(1.4rem, 3vw, 2.2rem); max-width: 640px; }
.k-vlak--creme .k-agendakaart { background: #fff; }
.k-agendakaart__titel { font-size: var(--h3) !important; }
body.k800 .calender-select {
  font-family: var(--display); font-weight: 900; text-transform: uppercase; letter-spacing: .04em; border: 0;
  clip-path: var(--vorm-knop-a);
}
body.k800 .calender-select .text { font-size: 1.05rem; }
body.k800 .calender-select:focus-within .calendar-select-options { display: block; }
body.k800 .calender-select .calendar-select-options { clip-path: none; text-transform: none; font-family: var(--body); font-weight: 400; letter-spacing: 0; }
body.k800 .calender-select .calendar-select-options a { color: var(--rood-tekst); text-decoration: underline; }
body.k800 .k-hero__titel { color: var(--blauw-kop); font-size: clamp(2rem, 5vw, 3.6rem); line-height: .95; margin: 1.8rem 0 0; }
body.k800 .k-hero__regel.is-accent { color: var(--rood-tekst); }
body.k800 .k-ranking__adres, body.k800 .k-hero__link-tekst { color: var(--ink); }
/* Korte namen op één regel naast het logo; lange namen mogen afbreken */
.k-brand__kampen { white-space: nowrap; }
.k-brand__kampen--lang { white-space: normal; max-width: 15rem; }
/* Logo en naam krimpen niet op de computer: anders schuift het menu over de naam heen (rond 1000-1100 px).
   Met hamburgermenu (tot 1000 px) juist wel, met basis 0: anders zakt de menuknop bij een lange sitenaam naar een tweede regel. */
@media (min-width: 1001px) { .k-brand { flex-shrink: 0; } }
@media (max-width: 1000px) { .k-brand { flex: 1 1 0; } }
/* Lange sitenaam ("Evenementenplatform Kampen") alleen tussen woorden afbreken, of met een afbreekstreepje */
.k-brand__kampen { -webkit-hyphens: auto; hyphens: auto; }
@media (min-width: 481px) { .k-brand__kampen { overflow-wrap: normal; } .k-brand__kampen--lang { max-width: 21rem; } }
@media (max-width: 480px) { .k-brand__kampen { white-space: normal; color: var(--blauw-tekst); } } /* 18 px vet is geen grote tekst: 4,5:1 nodig */
body.k800 .k-ranking__titel a { color: var(--blauw-kop); }
.k-ranking__tekst, .k-ranking__tekst * { overflow-wrap: anywhere; min-width: 0; }

/* Overzicht met filters, nieuws en zoeken (cms-blocks.css) in de huisstijl: crème of witte vlakken zonder schaduw, scheve randen,
   resultaattitels in tussenkopmaat (de algemene h2/h3-maat maakte ze zo groot als een paginakop). */
body.k800 .cms-overzicht__titel { font-size: clamp(1.25rem, 2.2vw, 1.5rem) !important; line-height: 1.05 !important; margin: 0 !important; }
body.k800 .cms-filter, body.k800 .cms-overzicht__kaart { box-shadow: none; background: var(--creme); }
body.k800 .cms-bg--creme .cms-filter, body.k800 .cms-bg--creme .cms-overzicht__kaart { background: #fff; }
body.k800 .cms-filter { clip-path: polygon(0 .25%, 100% 0, 99.85% 99.8%, .15% 100%); }
body.k800 .cms-overzicht__item:nth-child(3n+1) .cms-overzicht__kaart { clip-path: var(--vorm-a); }
body.k800 .cms-overzicht__item:nth-child(3n+2) .cms-overzicht__kaart { clip-path: var(--vorm-b); }
body.k800 .cms-overzicht__item:nth-child(3n) .cms-overzicht__kaart { clip-path: var(--vorm-c); }
body.k800 .cms-overzicht__kaart:focus-within, body.k800 .cms-filter:focus-within { clip-path: none; }
body.k800 .cms-overzicht__soort { color: var(--rood-tekst); }
body.k800 .cms-filter select, body.k800 .cms-filter input[type=search], body.k800 .cms-filter input[type=date] { background: #fff; }
body.k800 .cms-btn { font-family: var(--display); text-transform: uppercase; letter-spacing: .04em; }

/* =========================================================
   HERO ALS SCHERMBREED OPENINGSBEELD (Visit Kampen, zoals het Kampen 800-openingsbeeld)
   Foto of video als achtergrond, donker verloop voor leesbaarheid, regels als h1 (met `opening`).
   Onder 1100px: tekst boven op crème, beeld eronder (net als .cms-block--statement).
   ========================================================= */
.k-open { position: relative; background: var(--antraciet); }
.k-open__beeld { position: relative; width: 100%; aspect-ratio: 16 / 9; min-height: 420px; max-height: 82vh; overflow: hidden; background: var(--antraciet); container-type: size; }
.k-open__beeld::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, rgba(20, 30, 40, .72) 0%, rgba(20, 30, 40, .55) 45%, rgba(20, 30, 40, .72) 100%); }
.k-open--opening .k-open__beeld::after { background: linear-gradient(90deg, rgba(20, 30, 40, 0) 40%, rgba(20, 30, 40, .7) 62%, rgba(20, 30, 40, .82) 100%); } /* iets donkerder: de tekstschaduw is weg */
.k-open__stil { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.k-open__speler { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.k-open__speler iframe { position: absolute; top: 50%; left: 50%; translate: -50% -50%; width: 100%; height: 100%; border: 0; pointer-events: none; }
@supports (width: 1cqw) {
  .k-open__speler iframe { width: max(100cqw, 177.78cqh); height: max(100cqh, 56.25cqw); }
}
.k-open--video:not(.is-js) .k-open__stil { z-index: 0; }
@media (prefers-reduced-motion: reduce) { .k-open__speler--noscript { display: none; } }
.k-open__slinger { position: absolute; top: -9%; left: 60%; width: 50%; height: auto; z-index: 2; pointer-events: none; }
.k-open__ruit { position: absolute; left: -6%; top: 16%; width: 36%; aspect-ratio: 1; z-index: 2; background: #fff; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); display: grid; place-items: center; pointer-events: none; }
.k-open__ruit img { width: 38%; height: auto; }
.k-open__tekst { position: absolute; z-index: 3; right: var(--gutter); top: 56%; translate: 0 -50%; width: min(40%, 540px); pointer-events: none; color: #fff; }
body.k800 .k-open__titel { margin: 0; color: #fff; font-family: var(--display); font-weight: 900; text-transform: uppercase; line-height: .92; font-size: clamp(2.2rem, 4.6vw, 4.2rem); }
body.k800 p.k-open__titel { font-size: clamp(2.2rem, 4.6vw, 4.2rem); color: #fff; }
body.k800 .k-open__titel .k-hero__regel.is-accent { color: #fff; font-size: .8em; }
.k-open__knop {
  position: absolute; z-index: 4; left: var(--gutter); bottom: 1rem; display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--body); font-weight: 700; font-size: 1rem; line-height: 1.2; padding: .6rem 1.1rem;
  background: #fff; color: var(--antraciet); border: 2px solid var(--antraciet); border-radius: 0; cursor: pointer; min-height: 44px;
}
.k-open__knop[hidden] { display: none; }
.k-open__knop::before { content: ""; width: .8em; height: .8em; background: linear-gradient(90deg, currentColor 0 35%, transparent 35% 65%, currentColor 65% 100%); }
.k-open__knop[aria-pressed="true"]::before { background: currentColor; clip-path: polygon(0 0, 100% 50%, 0 100%); }
.k-open__knop:hover { background: var(--creme); }
body.k800 .k-open__knop:focus-visible { outline: 3px solid #fff; outline-offset: 3px; box-shadow: 0 0 0 6px var(--antraciet); }
.k-open__kaarten { padding: clamp(1.5rem, 4vh, 2.5rem) 0 var(--sectie); }
.k-open__kaarten .k-hero__links { margin-top: 0; }
.k-open__intro { max-width: 62ch; margin: var(--blok) auto 0; font-size: 1.15rem; }
.k-open__kaarten .k-open__intro:first-child { margin-top: 0; }
/* Hero halverwege een pagina: zelfde beeld, tekst linksonder, zonder ruit en slinger. */
.k-open:not(.k-open--opening) .k-open__tekst { left: var(--gutter); right: auto; top: auto; bottom: 4.5rem; translate: none; width: min(70%, 760px); }
@media (max-width: 1100px) {
  .k-open--opening { background: var(--creme); display: grid; grid-template-columns: 1fr; }
  .k-open--opening .k-open__beeld { display: grid; grid-template-areas: "tekst" "beeld"; aspect-ratio: auto; min-height: 0; max-height: none; overflow: visible; background: var(--creme); container-type: normal; }
  .k-open--opening .k-open__beeld::after { display: none; }
  .k-open--opening .k-open__tekst { grid-area: tekst; position: static; translate: none; width: auto; padding: clamp(2.5rem, 8vw, 4rem) var(--gutter) 2.2rem; }
  body.k800 .k-open--opening .k-open__titel, body.k800 .k-open--opening p.k-open__titel { color: var(--blauw-kop); text-shadow: none; }
  body.k800 .k-open--opening .k-open__titel .k-hero__regel.is-accent { color: var(--rood-tekst); }
  .k-open--opening .k-open__stil, .k-open--opening .k-open__speler { grid-area: beeld; position: relative; inset: auto; aspect-ratio: 16 / 9; width: 100%; height: auto; }
  .k-open--opening .k-open__speler iframe { width: 177.78%; height: 100%; }
  .k-open--opening .k-open__speler { background: var(--antraciet); }
  .k-open--opening .k-open__slinger, .k-open--opening .k-open__ruit { display: none; }
  .k-open--opening .k-open__knop { position: relative; left: auto; bottom: auto; grid-area: beeld; align-self: end; justify-self: start; margin: 0 var(--gutter) 1rem; }
}
@media (max-width: 760px) {
  .k-open:not(.k-open--opening) .k-open__beeld { min-height: 360px; }
  .k-open:not(.k-open--opening) .k-open__tekst { width: auto; right: var(--gutter); bottom: 4.5rem; }
}


/* ALLE SITES OP HET THEMA (23-10-2026) */
/* Tabellen uit de inhoud van redacteuren mogen nooit breder zijn dan het scherm (320 px zonder horizontale scroll, WCAG 1.4.10). */
.k-rich table { width: 100%; table-layout: fixed; border-collapse: collapse; margin: 0 0 1rem; }
.k-rich th, .k-rich td { vertical-align: top; text-align: left; padding: .4rem .6rem; border-bottom: 1px solid rgba(60,60,59,.2); overflow-wrap: anywhere; }
.k-rich td p, .k-rich th p { margin: 0 0 .5rem; }
/* Links in lopende tekst op een kaart: onderstreept, zodat ze niet alleen aan kleur herkenbaar zijn (WCAG 1.4.1). */
.k-event__kaart a:not(.k-btn) { text-decoration: underline; text-underline-offset: .15em; }

/* Mobiel menu (25-10-2026): één kolom. Zonder nowrap liep de lijst door de max-height naar een tweede kolom buiten beeld
   (iPhone: "Praktische info" en "Meer in Kampen" rechts afgesneden). Lange namen breken af in plaats van uit beeld te lopen.
   justify-content: flex-start, want flex-end (de desktopregel) duwt het begin van de lijst boven uit beeld. */
@media (max-width: 1000px) {
  .k-nav__links { flex-wrap: nowrap; justify-content: flex-start; gap: .15rem; }
  .k-nav__links > * { flex-shrink: 0; } /* niet krimpen: anders overlappen de items in plaats van dat het menu scrolt */
  .k-nav__links.is-open { padding-bottom: 5.5rem; } /* laatste item kan boven de WhatsApp-knop scrollen */
  .k-nav__links a, .k-nav__knop { white-space: normal; overflow-wrap: anywhere; display: block; padding: .45rem 0; text-align: left; max-width: 100%; }
  .k-nav__groep { width: 100%; margin-top: .35rem; }
  .k-nav__sub { gap: 0; padding: 0 0 .35rem 1rem; border-left: 3px solid var(--creme); margin-left: .1rem; }
  .k-nav__links .k-nav__sub a { font-size: .95rem; padding: .4rem 0; }
  .k-nav__links > a::after, .k-nav__groep > a::after { display: none; }
}

/* =========================================================
   Review 29-10 (nalopen in de stijl van Lucas' opmerkingen)
   ========================================================= */
/* Paginakop: de oude app-css zet overflow-wrap: break-word op koppen; met hyphens: manual (boven 480 px) brak
   "WEDEROPSTANDING" zonder streepje. Lange woorden (12+ letters) mogen nu met een streepje afbreken, korte niet ("HELDEN"). */
body.k800 .k-kop__titel { -webkit-hyphens: auto; hyphens: auto; hyphenate-limit-chars: 12 5 5; }
/* body.k800 a (kleur en border-bottom: 0) won van de eigen stijl van agendakaarten en bladerknoppen:
   rode tekst en geen onderrand. */
body.k800 .cms-agenda__link { color: var(--antraciet); border-bottom: 1px solid rgba(60, 60, 59, .15); }
body.k800 .cms-agenda__titel { color: var(--blauw-tekst); }
body.k800 .cms-bladeren a { border-bottom: 2px solid var(--antraciet); }
/* CMS-blokken op dezelfde linkerkant als de rest van het thema (.k-inner): zelfde gutter en breedte */
body.k800 .cms-block:not(.cms-block--statement):not(.cms-block--photo-band) { padding-left: var(--gutter); padding-right: var(--gutter); }
body.k800 .cms-inner:not(.cms-inner--smal) { max-width: calc(var(--maxw) - 2 * var(--gutter)); }
/* <h3><strong> uit Drupal: vet in een kop houdt de kleur van de kop (anders antraciet via .k-rich strong) */
.k-rich :is(h1, h2, h3, h4) :is(strong, b) { color: inherit; }
/* Scriptregel boven lopende tekst (ook lange citaten uit Drupal): zo breed als de tekstkolom, draaien vanaf de linkerkant
   zodat hij gelijk begint met de tekst, minder scheef bij meerdere regels, en ruimte tot de tekst eronder. */
.k-tekst > .k-kreet { max-width: min(100%, 38rem); rotate: -1deg; transform-origin: left center; text-wrap: balance; margin-bottom: .75rem !important; }
/* Tekstvlak: minder ruimte boven dan een gewoon vlak, anders hangt de tekst los van wat erboven staat */
.k-vlak--paragraph { padding-top: calc(var(--sectie) * .6); }
/* Verhaal (tekstblok met opmaak "Verhaal", bijvoorbeeld de doorkijkpanelen van Bas Steman): rustige, grotere leestekst
   zonder vet, schrijver bovenaan, initiaal en een uitgelichte zin halverwege. */
.k-tekst--verhaal .k-rich { font-size: 1.2rem; line-height: 1.75; max-width: 38rem; }
.k-tekst--verhaal .k-rich :is(strong, b) { font-weight: inherit; }
.k-tekst--verhaal .k-rich > p:first-child { font-size: 1.3rem; }
.k-tekst--initiaal .k-rich > p:first-child::first-letter { float: left; font-family: var(--display); font-weight: 900; color: var(--rood); font-size: 3em; line-height: .8; margin: .07em .07em 0 0; }
.k-verhaal__door { font-family: var(--display); text-transform: uppercase; letter-spacing: .06em; font-size: 1rem; color: var(--antraciet); margin: -.25rem 0 1.5rem !important; }
body.k800 .k-verhaal__door a { color: var(--blauw-tekst); }
.k-tekst--verhaal .k-verhaal__zin { margin: 2.25rem 0; padding: .25rem 0 .25rem 1.25rem; border-left: 4px solid var(--blauw); }
.k-tekst--verhaal .k-verhaal__zin p { font-family: var(--script); color: var(--rood-tekst); font-size: clamp(1.5rem, 2.6vw, 2rem); line-height: 1.3; margin: 0; rotate: -1deg; transform-origin: left center; }
/* Lang citaat (meer dan een paar regels): grote kapitalen lezen dan zwaar. Gewone letters, groter dan de lopende tekst. */
.k-citaat--lang { align-items: start; }
.k-citaat--lang .k-citaat__tekst, .k-citaat--lang .k-citaat__tekst p { font-family: var(--body) !important; font-weight: 600; text-transform: none; color: var(--blauw-tekst) !important; font-size: clamp(1.3rem, 2.2vw, 1.65rem) !important; line-height: 1.45 !important; max-width: 40rem; }
.k-citaat--lang .k-citaat__tekst::before { content: "\201C"; display: block; font-family: var(--display); font-weight: 900; color: var(--rood); font-size: 4rem; line-height: .6; margin-bottom: .25rem; }
/* Tekst met afbeelding: bij lange tekst staat de foto bovenaan (niet verticaal in het midden met een leeg vlak erboven)
   en schuift mee tijdens het lezen. Bij korte tekst verandert niets: dan is de foto het hoogste. */
@media (min-width: 861px) { .k-duo__beeld { align-self: start; position: sticky; top: 6rem; } }
/* Weetje ("Wist je dat..." in het citaatblok): script als aanloop, het feit in gewone, grotere letters, in een licht vlak */
.k-weetje { background: var(--creme); padding: clamp(1.4rem, 3vw, 2.2rem) clamp(1.4rem, 3vw, 2.4rem); max-width: 46rem; clip-path: polygon(0 1%, 100% 0, 99.75% 99%, .2% 100%); }
.k-vlak--creme .k-weetje { background: #fff; }
.k-weetje .k-kreet { margin-bottom: .5rem !important; }
body.k800 .k-weetje__tekst, body.k800 .k-weetje__tekst p { font-size: clamp(1.2rem, 2vw, 1.45rem); line-height: 1.5; font-weight: 600; color: var(--antraciet); margin: 0; }
body.k800 .k-weetje__tekst p + p { margin-top: .75rem; }
/* Submenu boven de tweede menuregel: zonder eigen laag tekenden "Zoeken" en "Favorieten" door het uitgeklapte submenu heen */
.k-nav__sub { z-index: 20; }
/* Scriptregel in de grote welkomstkop ("In De Hartelijke Hanzestad"): eigen regelhoogte en ruimte, anders vallen de
   staarten van de letters (j, z) in de regel eronder; iets minder scheef */
.k-hero__regel.is-accent, body.k800 .k-open__titel .k-hero__regel.is-accent { line-height: 1.25; margin: .08em 0 .22em; rotate: -1.5deg; transform-origin: left center; }
@media (min-width: 1001px) { .k-nav__groep--links .k-nav__sub { left: auto; right: -1rem; } }
/* Hulpmenu (Meer in Kampen, Zoeken, Favorieten, taal, Contact): blauw in plaats van zwart, Zoeken en Favorieten als pictogram */
.k-nav__links .k-nav__alt, .k-nav__knop.k-nav__alt { color: var(--blauw-tekst) !important; }
.k-nav__icoon { display: inline-flex !important; align-items: center; gap: .3rem; }
.k-nav__svg { width: 1.3rem; height: 1.3rem; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.k-nav__icoon--wereld .k-nav__svg { width: 1.1rem; height: 1.1rem; stroke-width: 2; }
@media (min-width: 1001px) {
  /* Alleen het pictogram, met een klikvlak van 32 px; de naam blijft voor schermlezers (en als tooltip) */
  .k-nav__icoon--zoek, .k-nav__icoon--hart { min-width: 32px; min-height: 32px; justify-content: center; } /* WCAG 2.5.8: minimaal 24 px */
  .k-nav__icoon-tekst { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  .k-nav__links > .k-nav__icoon--zoek::after, .k-nav__links > .k-nav__icoon--hart::after { display: none; }
}
/* Ruimte tussen WELKOM en de scriptregel: de l van "Hartelijke" kwam tegen de M aan */
.k-hero__regel.is-accent, body.k800 .k-open__titel .k-hero__regel.is-accent { margin-top: .26em; rotate: -1deg; }
/* Menu op de computer altijd in twee regels: hoofdmenu (rood) boven, hulpmenu (blauw) eronder, "Meer in Kampen" als
   laatste helemaal rechts. Zo springt het menu niet tussen één en twee regels afhankelijk van de schermbreedte. */
.k-nav__breuk { display: none; }
@media (min-width: 1001px) {
  .k-nav__breuk { display: block; flex-basis: 100%; height: 0; }
  .k-nav__groep--meer { order: 1; }
}
/* Scriptregel in de welkomstkop: even scheef als de andere scriptregels (-2deg), met genoeg ruimte tot WELKOM */
.k-hero__regel.is-accent, body.k800 .k-open__titel .k-hero__regel.is-accent { rotate: -2deg; margin-top: .34em; }
/* "Meer in Kampen" helemaal rechts: het pijltje steekt uit, zodat de laatste letter recht onder de rechterkant van de
   bovenste menuregel staat (de N van Kampen onder de O van Info) */
@media (min-width: 1001px) { .k-nav__groep--meer > .k-nav__knop { margin-right: -.95rem; } }

/* Favorieten: knop "Bewaar" in de kop van een evenement of locatie (includes.k-bewaar) */
.k-bewaar { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; margin-top: 1rem; padding: calc(.6rem + .2em) .9rem .6rem;
  font-family: var(--display); font-weight: 900; text-transform: uppercase; letter-spacing: .04em; font-size: 1rem; line-height: 1;
  color: var(--rood-tekst); background: #fff; border: 2px solid var(--rood); cursor: pointer;
  clip-path: var(--vorm-knop-a); }
.k-bewaar__hart, .k-kalender__knop .icon { translate: 0 -.1em; } /* tekst zakt .1em voor gelijke ruimte; het pictogram blijft op het midden van de letters */
.k-bewaar[hidden] { display: none; }
.k-bewaar__hart { width: 1.3rem; height: 1.3rem; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linejoin: round; transition: transform .2s; }
.k-bewaar:hover .k-bewaar__hart { transform: scale(1.12); }
.k-bewaar.is-bewaard { background: var(--rood); color: #fff; }
.k-bewaar.is-bewaard .k-bewaar__hart { fill: currentColor; }
.k-bewaar:focus-visible { outline: 3px solid var(--antraciet); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .k-bewaar__hart { transition: none; } }
/* Aantal favorieten bij het hartje in het menu */
.k-nav__icoon--hart { position: relative; }
.k-nav__teller { position: absolute; top: -.1rem; right: -.35rem; min-width: 1.15rem; height: 1.15rem; padding: 0 .25rem; border-radius: 1rem;
  background: var(--rood); color: #fff; font-family: var(--body); font-weight: 700; font-size: .72rem; line-height: 1.15rem; text-align: center; }
.k-nav__teller[hidden] { display: none; }
@media (max-width: 1000px) { .k-nav__teller { position: static; margin-left: .35rem; } }
/* Bewaar-knop op een eigen regel onder de scriptregel; titels in de favorietenlijst blauw zoals andere kaarttitels */
.k-bewaar { display: flex; width: max-content; }
body.k800 .cms-fav__titel a { color: var(--blauw-tekst); }
body.k800 .cms-fav__uitleg { margin-top: 1rem; }
/* Voeg toe aan kalender (themes/k800/components/calendar): de houder heeft geen eigen opmaak en knipt niets weg,
   de schuine rode vorm zit op de knop; de lijst opent en sluit met een klik (Alpine), Escape of klikken ernaast */
body.k800 .calender-select.k-kalender { display: inline-block; position: relative; background: none; padding: 0; border: 0; clip-path: none; color: inherit; font-family: inherit; text-transform: none; letter-spacing: 0; }
.k-kalender__knop { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; padding: calc(.6rem + .2em) .8rem .6rem; border: 0; cursor: pointer; /* gelijk rondom, zie .k-btn */
  background: var(--rood); color: #fff; font-family: var(--display); font-weight: 900; text-transform: uppercase; letter-spacing: .04em; font-size: 1.05rem; line-height: 1;
  clip-path: var(--vorm-knop-a); }
.k-kalender__knop:hover { background: var(--rood-dk); }
.k-kalender__knop:focus-visible { outline: 3px solid var(--antraciet); outline-offset: 3px; clip-path: none; }
.k-kalender__knop .icon svg path { fill: #fff; }
body.k800 .k-kalender .calendar-select-options { display: none; position: absolute; top: calc(100% + .25rem); left: 0; z-index: 30; min-width: 100%; margin: 0; padding: .35rem 0; list-style: none; background: var(--creme); }
body.k800 .k-kalender:hover .calendar-select-options { display: none; }
body.k800 .k-kalender.is-open .calendar-select-options { display: block; }
body.k800 .k-kalender .calendar-select-options li { padding: 0; }
body.k800 .k-kalender .calendar-select-options a { display: block; padding: .55rem 1.1rem; min-height: 24px; color: var(--rood-tekst); text-decoration: underline; }
body.k800 .k-kalender .calendar-select-options a:hover, body.k800 .k-kalender .calendar-select-options a:focus-visible { background: var(--creme); }
/* De lijst klapt uit in de kaart (duwt de inhoud omlaag): de schuine kaart (clip-path) knipte een zwevende lijst af */
body.k800 .k-kalender { display: block; }
body.k800 .k-kalender .calendar-select-options { position: static; min-width: 0; width: max-content; max-width: 100%; margin-top: .4rem; }

/* =========================================================
   Design system Visit Kampen (feedback Lucas 02-11-2026): nergens schaduwen, alleen vlakken.
   De vormen, schuintes, kartelrand, knoppen, chips en de pijl hierboven zijn aangepast; de CMS-blokken
   (cms-blocks.css) hebben eigen schaduwen, die gaan in dit thema uit. Een kaart krijgt de andere vlakkleur.
   ========================================================= */
body.k800 .cms-card, body.k800 .cms-download, body.k800 .cms-nieuws__kaart, body.k800 .cms-zoek__resultaat,
body.k800 .cms-vacatures__aanmelden, body.k800 .cms-vacatures__kaart, body.k800 .cms-statement__ruit,
body.k800 .cms-agenda__link:hover { box-shadow: none; }
body.k800 .cms-card, body.k800 .cms-download, body.k800 .cms-nieuws__kaart, body.k800 .cms-zoek__resultaat,
body.k800 .cms-vacatures__aanmelden, body.k800 .cms-vacatures__kaart { background: var(--creme); }
body.k800 .cms-bg--creme :is(.cms-card, .cms-download, .cms-nieuws__kaart, .cms-zoek__resultaat, .cms-vacatures__aanmelden, .cms-vacatures__kaart) { background: #fff; }
/* Tekst op een foto: geen tekstschaduw, het donkere verloop zorgt voor contrast (iets donkerder gemaakt) */
body.k800 .cms-block--statement :is(.cms-statement__title, .cms-kreet, .cms-statement__lead) { text-shadow: none; }
body.k800 .cms-block--statement .cms-statement::after { background: linear-gradient(90deg, rgba(20, 30, 40, 0) 44%, rgba(20, 30, 40, .68) 62%, rgba(20, 30, 40, .8) 100%); }