/* Cases "Uit de praktijk" (plan 2026-11-12-cases): casepagina's, overzicht /cases/, blokken .praktijk
   op oplossings- en branchepagina's en de strook + snelkoppeling op de voorpagina.
   Bouwt op tokens, basis, componenten, beweging, blokken en paginas.css (paginakop). Mobiel eerst.
   Sjabloon voor een nieuwe case: site/partials/sjabloon-case.html. */

/* ---------- Casepagina: kop met foto en naamkaart ---------- */
.case-kop__beeld { position: relative; z-index: 1; margin: 0; }
.case-kop__foto {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-kaart);
  aspect-ratio: 4 / 3;
  background: var(--nacht-700);
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .6);
}
.case-kop__foto img { position: absolute; inset: -10% 0; width: 100%; height: 120%; max-width: none; object-fit: cover; }
.case-kop__foto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(18, 12, 43, .55) 100%); }
.naamkaart {
  position: relative;
  margin: calc(-1 * var(--s-8)) var(--s-4) 0;
  padding: var(--s-5);
}
.naamkaart::before { width: 28px; height: 28px; top: -10px; right: -10px; }
.naamkaart__naam { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); margin: 0 0 var(--s-2) !important; font-size: 1.25rem; font-weight: 800; letter-spacing: -.02em; color: var(--op-donker) !important; }
.naamkaart__wat { margin: 0 !important; font-size: var(--t-klein); }
.naamkaart__periode { margin: var(--s-4) 0 0 !important; padding-top: var(--s-3); border-top: 1px solid var(--glas-rand); font-family: var(--f-mono); font-size: var(--t-label); letter-spacing: .06em; color: var(--violet-200) !important; }
.partner {
  padding: 2px 10px;
  border-radius: var(--r-pil);
  background: var(--glas);
  box-shadow: 0 0 0 1px var(--glas-rand) inset;
  color: var(--violet-200);
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .06em;
  text-transform: uppercase;
}
@media (min-width: 640px) {
  .naamkaart { position: absolute; left: calc(-1 * var(--s-6)); bottom: calc(-1 * var(--s-5)); margin: 0; width: min(320px, 80%); }
  .case-kop__beeld { margin: 0 0 var(--s-5) var(--s-6); }
}
@media (min-width: 960px) {
  .case-kop { grid-template-columns: 7fr 5fr; }
  .case-kop__foto { aspect-ratio: 4 / 5; }
  .case-kop__beeld { margin: 0 0 var(--s-5); }
}

/* ---------- De situatie ---------- */
.case-situatie { display: grid; gap: var(--s-5); align-items: start; }
.case-situatie h2 { margin: 0; max-width: 18ch; }
.case-situatie__tekst p { color: var(--ink-zacht); font-size: var(--t-lead); }
.case-situatie__tekst p:last-child { margin-bottom: 0; }
@media (min-width: 960px) { .case-situatie { grid-template-columns: 5fr 6fr; gap: var(--s-8); } }

/* ---------- Per onderdeel: met de hand -> nu vanzelf -> tijd terug ---------- */
.onderdelen { display: grid; gap: var(--s-4); margin: 0; padding: 0; list-style: none; }
.onderdeel {
  display: grid;
  grid-template-areas: "kop" "terug" "wissel" "som";
  gap: var(--s-4);
  padding: clamp(20px, 3vw, 32px);
  border: 1px solid var(--lijn);
  border-radius: var(--r-kaart);
  background: var(--papier);
  box-shadow: var(--sch-kaart);
  min-width: 0;
}
.onderdeel__kop { grid-area: kop; display: flex; align-items: baseline; gap: var(--s-4); min-width: 0; }
.onderdeel__nr { flex: none; margin: 0; font-family: var(--f-mono); font-size: var(--t-label); letter-spacing: .08em; color: var(--violet); }
.onderdeel h3 { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.onderdeel__terug { grid-area: terug; display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--s-1) var(--s-3); margin: 0; max-width: none; }
.onderdeel__tijd { font-size: clamp(2rem, 4vw, 2.75rem); font-weight: 800; line-height: 1; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.onderdeel__tijd-label { font-family: var(--f-mono); font-size: var(--t-label); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-zacht); }
.onderdeel__wissel { grid-area: wissel; display: grid; gap: var(--s-3); margin: 0; }
.onderdeel__wissel > div { padding: var(--s-4); border-radius: var(--r-sm); background: var(--vlak); min-width: 0; }
.onderdeel__soort { margin: 0 0 var(--s-1); font-family: var(--f-mono); font-size: var(--t-label); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-zacht); }
.onderdeel__wat { margin: 0; font-size: var(--t-klein); line-height: 1.55; color: var(--ink-zacht); }
.onderdeel__wissel .is-nu { background: var(--violet-50); }
.onderdeel__wissel .is-nu .onderdeel__soort { color: var(--violet-700); }
.onderdeel__wissel .is-nu .onderdeel__wat { color: var(--ink); font-weight: 600; }
.onderdeel__som { grid-area: som; margin: 0; font-family: var(--f-mono); font-size: var(--t-klein); color: var(--ink-zacht); overflow-wrap: anywhere; }
.onderdeel__pijl { display: none; }
@media (min-width: 640px) {
  .onderdeel { grid-template-areas: "kop terug" "wissel wissel" "som som"; grid-template-columns: 1fr auto; align-items: start; }
  .onderdeel__terug { flex-direction: column; align-items: flex-end; text-align: right; }
  .onderdeel__wissel { grid-template-columns: 1fr auto 1fr; align-items: stretch; }
  .onderdeel__wissel > .onderdeel__pijl { display: grid; place-items: center; padding: 0; background: none; font-family: var(--f-mono); color: var(--violet); }
}
@media (min-width: 960px) {
  .onderdeel { grid-template-areas: "kop wissel terug" "som wissel terug"; grid-template-columns: minmax(200px, 3fr) 7fr minmax(150px, 2fr); gap: var(--s-4) var(--s-6); align-items: center; padding: var(--s-6); }
  .onderdeel__kop { flex-direction: column; gap: var(--s-2); align-self: start; }
  .onderdeel__som { align-self: end; }
}

/* ---------- Totaal: donker blok met foto, gloed en "Zo rekenden we" ---------- */
.case-totaal { position: relative; isolation: isolate; display: grid; gap: var(--s-7); }
.case-totaal .gloed { z-index: -1; }
.case-totaal__beeld { position: absolute; inset: 0; z-index: -2; overflow: hidden; border-radius: inherit; }
.case-totaal__beeld img { position: absolute; inset: -14% 0; width: 100%; height: 128%; max-width: none; object-fit: cover; opacity: .3; }
.case-totaal__beeld::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(18, 12, 43, .96) 0%, rgba(18, 12, 43, .82) 55%, rgba(18, 12, 43, .6) 100%); }
.case-totaal__som { margin: 0 0 var(--s-3) !important; font-family: var(--f-mono); font-size: var(--t-klein); letter-spacing: .04em; color: var(--violet-200) !important; }
.case-totaal h2 { font-size: var(--t-h1); line-height: 1.04; letter-spacing: -.035em; margin-bottom: var(--s-5); }
.case-totaal__feit { margin: var(--s-5) 0 0; padding: var(--s-4) var(--s-5); border-left: 2px solid var(--violet-300); color: var(--op-donker) !important; font-weight: 600; }
.zo-gerekend { align-self: end; }
.zo-gerekend .label { margin-bottom: var(--s-3); }
.zo-gerekend p { margin: 0; font-size: var(--t-klein); }
.zo-gerekend__datum { margin-top: var(--s-4) !important; padding-top: var(--s-3); border-top: 1px solid var(--glas-rand); font-family: var(--f-mono); font-size: var(--t-label) !important; letter-spacing: .06em; color: var(--violet-200) !important; }
@media (min-width: 960px) { .case-totaal { grid-template-columns: 7fr 4fr; align-items: end; gap: var(--s-8); } }

/* ---------- Overzicht /cases/: uitleg onder de casekaarten ---------- */
.case-uitleg { display: grid; gap: var(--s-4); margin-top: var(--s-7); padding-top: var(--s-5); border-top: 1px solid var(--lijn); }
.case-uitleg p { margin: 0; color: var(--ink-zacht); font-size: var(--t-klein); }
.case-uitleg strong { color: var(--ink); }
@media (min-width: 960px) { .case-uitleg { grid-template-columns: 1fr 2fr; gap: var(--s-8); } }

/* ---------- Blok "Uit de praktijk" op oplossings- en branchepagina's ---------- */
.praktijk {
  position: relative;
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: var(--s-4) var(--s-5);
  align-items: center;
  padding: var(--s-4);
  border: 1px solid var(--lijn);
  border-radius: var(--r-kaart);
  background: var(--papier);
  box-shadow: var(--sch-kaart);
  transition: transform var(--d-snel) var(--ease-uit), box-shadow var(--d-snel) var(--ease-uit);
}
.praktijk:hover { transform: translateY(-2px); box-shadow: 0 1px 0 var(--lijn), 0 26px 60px -30px rgba(20, 20, 40, .32); }
.praktijk__beeld { position: relative; overflow: hidden; width: 72px; aspect-ratio: 1; border-radius: var(--r-sm); background: var(--nacht-700); align-self: start; }
.praktijk__beeld img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.praktijk__tekst { min-width: 0; }
.praktijk__tekst .label { margin-bottom: var(--s-2); color: var(--violet); }
.praktijk__zin { margin: 0; font-size: var(--t-tekst); color: var(--ink-zacht); }
.praktijk__zin strong { color: var(--ink); }
.praktijk__link { grid-column: 1 / -1; justify-self: start; display: inline-flex; gap: var(--s-2); font-weight: 700; text-decoration: none; }
.praktijk__link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.praktijk__link span[aria-hidden] { font-family: var(--f-mono); transition: transform var(--d-snel) var(--ease-uit); }
.praktijk:hover .praktijk__link span[aria-hidden] { transform: translateX(3px); }
@media (min-width: 640px) {
  .praktijk { grid-template-columns: 112px 1fr auto; padding: var(--s-4) var(--s-6) var(--s-4) var(--s-4); }
  .praktijk__beeld { width: 112px; aspect-ratio: 4 / 3; align-self: center; }
  .praktijk__link { grid-column: auto; justify-self: end; white-space: nowrap; }
}

/* ---------- Voorpagina: snelkoppeling in de hero ---------- */
.hero__bewijs {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s-2) var(--s-3);
  margin-top: var(--s-5);
  padding: 8px 16px 8px 8px;
  border: 1px solid var(--glas-rand);
  border-radius: var(--r-pil);
  background: var(--glas);
  color: var(--op-donker);
  font-size: var(--t-klein);
  font-weight: 600;
  text-decoration: none;
  transition: background-color var(--d-snel) var(--ease-uit), transform var(--d-snel) var(--ease-uit);
}
.hero__bewijs:hover { background: rgba(255, 255, 255, .12); color: var(--op-donker); transform: translateY(-1px); }
.hero__bewijs-label { padding: 3px 10px; border-radius: var(--r-pil); background: var(--violet); font-family: var(--f-mono); font-size: 11px; font-weight: 400; letter-spacing: .06em; text-transform: uppercase; }
.hero__bewijs .pijl { font-family: var(--f-mono); transition: transform var(--d-snel) var(--ease-uit); }
.hero__bewijs:hover .pijl { transform: translateX(3px); }

@media (max-width: 639.98px) { .hero__bewijs { border-radius: var(--r-kaart); padding: 10px 16px; } }

/* ---------- Voorpagina hero, telefoon: "Stel een vraag" als kleine tekstlink i.p.v. derde knop ---------- */
@media (max-width: 599.98px) {
  .hero .hero__vraag {
    flex-basis: 100%;
    margin-top: var(--s-1);
    padding: 6px 0;
    border: 0;
    background: none;
    color: var(--op-donker-zacht);
    font-size: var(--t-klein);
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: var(--op-donker-lijn);
    text-underline-offset: 4px;
  }
  .hero .hero__vraag:hover { background: none; color: var(--op-donker); text-decoration-color: currentColor; transform: none; }
}


/* ---------- Casekaart (partial casekaarten.html): foto over de kaart met een glazig paneel erop. In het paneel:
   label (branche · jaar), kopcijfer groot in het kleurverloop met de zin eronder, chips met echte aantallen,
   twee regels uitleg, link en het klantlogo klein op een wit tegeltje. Voorpagina (carrousel) en /cases/ (onder elkaar).
   Telefoon/tablet: foto boven, vloeit over in nachtpaars, paneel schuift over de onderrand van de foto.
   Vanaf 960px: foto over de hele kaart, paneel rechts. ---------- */
.casekaarten { display: grid; gap: var(--s-5); margin: 0; padding: 0; list-style: none; }
.casekaart {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-width: 0;
  padding: clamp(180px, 52vw, 320px) var(--s-4) var(--s-4);
  border-radius: var(--r-kader);
  background: var(--nacht);
  box-shadow: 0 0 0 1px var(--glas-rand) inset, 0 30px 60px -34px rgba(18, 12, 43, .75);
}
.casekaart__beeld { position: absolute; inset: 0 0 auto; z-index: -1; height: clamp(260px, 74vw, 440px); overflow: hidden; background: var(--nacht); }
.casekaart__beeld img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--focus, 50% 40%);
  -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
  transition: transform var(--d-traag) var(--ease-uit);
}
.casekaart__beeld::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(18, 12, 43, .15) 0%, rgba(18, 12, 43, 0) 40%, rgba(18, 12, 43, .5) 100%); }
.casekaart:hover .casekaart__beeld img { transform: scale(1.03); }

/* Het glazige paneel (zoals .glaskaart, DESIGN §4): donkerder getint glas, zodat witte tekst ook op een lichte foto leesbaar blijft.
   Contrast (WCAG): de foto achter het glas wordt gedimd (brightness) en de bovenkant krijgt een extra zachte scrim,
   want daar staan het label en het kopcijfer. Gemeten op 360-1440 px met de lichtste foto (Pijn Reset Coach). */
.casekaart__inhoud {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  padding: clamp(20px, 4.5vw, 32px);
  border: 1px solid var(--glas-rand);
  border-radius: var(--r-kaart);
  background: rgba(18, 12, 43, .88);
  color: var(--op-donker);
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .casekaart__inhoud {
    background: linear-gradient(180deg, rgba(18, 12, 43, .2) 0%, rgba(18, 12, 43, 0) 50%), rgba(18, 12, 43, .6);
    -webkit-backdrop-filter: blur(var(--glas-blur)) saturate(1.15) brightness(.7);
    backdrop-filter: blur(var(--glas-blur)) saturate(1.15) brightness(.7);
  }
}
.casekaart__inhoud::before { content: ""; position: absolute; top: -12px; right: 20px; width: 24px; height: 24px; border-radius: 50%; background: var(--verloop-donker); }
.casekaart__label {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-1) var(--s-2);
  margin: 0 0 var(--s-4) !important;
  font-family: var(--f-mono);
  font-size: var(--t-label);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--violet-100) !important;   /* lichter dan het gewone label op donker: het glas ligt op een foto */
}
.casekaart__label::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.casekaart__partner { margin-left: var(--s-1); padding: 2px 10px; border-radius: var(--r-pil); background: var(--glas); box-shadow: 0 0 0 1px var(--glas-rand) inset; color: var(--op-donker); font-size: 11px; letter-spacing: .06em; }

/* Kopcijfer is de held: "Bijna" klein, het getal groot in het verloop, de zin eronder */
.casekaart__kop { margin: 0 0 var(--s-5); font-weight: 800; color: var(--op-donker); }
.casekaart__voor { margin-right: .15em; font-size: clamp(1.125rem, 2.2vw, 1.5rem); font-weight: 700; letter-spacing: -.02em; color: var(--op-donker-zacht); }
.casekaart__getal {
  display: inline-block;
  padding-right: .06em;   /* laatste letter niet afknippen door background-clip */
  font-size: clamp(3.25rem, 9vw, 5.25rem);
  line-height: .95;
  letter-spacing: -.045em;
  font-variant-numeric: tabular-nums;
}
/* Verloop start lichter dan --verloop-donker (#9b84ff haalt op glas over een lichte foto geen 3:1) */
.donker .casekaart__getal { background-image: linear-gradient(95deg, var(--violet-200) 0%, var(--ijs) 100%); }
.casekaart__getal .optel__getal { background: inherit; -webkit-background-clip: text; background-clip: text; }
.casekaart__rest { display: block; margin-top: var(--s-2); font-size: clamp(1.25rem, 2.4vw, 1.75rem); line-height: 1.15; letter-spacing: -.025em; text-wrap: balance; }

/* Chips met echte aantallen (uit de casepagina) */
.casekaart__chips { display: flex; flex-wrap: wrap; gap: var(--s-2); margin: 0 0 var(--s-5); padding: 0; list-style: none; }
.casekaart__chips li {
  padding: 6px 12px;
  border-radius: var(--r-pil);
  background: rgba(255, 255, 255, .08);
  box-shadow: 0 0 0 1px var(--glas-rand) inset;
  color: var(--op-donker-zacht);
  font-size: var(--t-klein);
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
}
.casekaart__chips strong { color: var(--op-donker); font-weight: 800; font-variant-numeric: tabular-nums; }

/* Niet afkappen (anders stopt de zin halverwege); de tekst is kort gehouden, max. twee zinnen */
.casekaart__tekst {
  margin: 0 0 var(--s-5) !important;
  max-width: 54ch;
  font-size: var(--t-klein);
  line-height: 1.6;
  color: var(--op-donker-zacht) !important;
}
.casekaart__voet { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3) var(--s-4); width: 100%; margin-top: auto; padding-top: var(--s-4); border-top: 1px solid var(--glas-rand); }
.casekaart__link { display: inline-flex; align-items: center; gap: var(--s-2); padding-block: var(--s-2); color: var(--op-donker); font-weight: 700; font-size: var(--t-klein); text-decoration: none; }
.casekaart__link:hover { color: var(--violet-200); }
.casekaart__link::after { content: ""; position: absolute; inset: -100vh -100vw; z-index: 1; }   /* hele kaart klikbaar; .casekaart knipt af */
.casekaart__link .pijl { font-family: var(--f-mono); transition: transform var(--d-snel) var(--ease-uit); }
.casekaart:hover .casekaart__link { color: var(--violet-200); }
.casekaart:hover .casekaart__link .pijl { transform: translateX(3px); }
.casekaart__logo { display: inline-flex; align-items: center; flex: none; height: 30px; padding: 0 10px; border-radius: var(--r-xs); background: var(--papier); }
.casekaart__logo img { display: block; width: auto; height: 14px; }
@media (min-width: 640px) {
  .casekaart { padding: clamp(240px, 46vw, 340px) var(--s-5) var(--s-5); }
  .casekaart__logo img { height: 16px; }
}
@media (min-width: 960px) {
  .casekaart { align-items: flex-end; min-height: clamp(520px, 42vw, 580px); padding: var(--s-6); }
  .casekaart__beeld { inset: 0; height: auto; }
  .casekaart__beeld img { -webkit-mask-image: none; mask-image: none; }
  .casekaart__beeld::after { background: linear-gradient(270deg, rgba(18, 12, 43, .5) 0%, rgba(18, 12, 43, .18) 40%, rgba(18, 12, 43, .05) 70%), linear-gradient(0deg, rgba(18, 12, 43, .35) 0%, rgba(18, 12, 43, 0) 35%); }
  .casekaart__inhoud { width: min(480px, 44%); }
}

/* ---------- Voorpagina: kop boven de casekaarten ---------- */
.strook-kop { display: grid; gap: var(--s-4); margin-bottom: var(--s-6); }
.strook-kop h2 { margin: 0; }
.strook-kop__rechts { display: grid; gap: var(--s-4); justify-items: start; }
.strook-kop__rechts p { margin: 0; color: var(--ink-zacht); }
@media (min-width: 960px) {
  .strook-kop { grid-template-columns: 7fr 5fr; align-items: end; gap: var(--s-8); }
  .strook-kop__rechts { grid-template-columns: 1fr auto; align-items: center; gap: var(--s-5); }
}

/* ---------- Voorpagina: carrousel (casewissel.js zet .is-wissel; zonder JS of bij minder beweging: onder elkaar).
   Pijlen + teller "01 / 02" als glazige pil rechtsonder in de kaart; de kaart houdt daar ruimte voor vrij. ---------- */
.casewissel { position: relative; }
.casewissel.is-wissel .casekaarten {
  display: flex;
  gap: var(--s-4);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
}
.casewissel.is-wissel .casekaarten::-webkit-scrollbar { display: none; }
.casewissel.is-wissel .casekaart { flex: 0 0 100%; scroll-snap-align: start; scroll-snap-stop: always; padding-bottom: calc(var(--s-4) + 52px + var(--s-4)); box-shadow: 0 0 0 1px var(--glas-rand) inset; }   /* schaduw zou door de scrollrand worden afgeknipt */
.casewissel__knoppen {
  position: absolute;
  right: var(--s-4);
  bottom: var(--s-4);
  z-index: 2;
  display: flex;
  align-items: center;
  gap: var(--s-1);
  padding: 4px;
  border-radius: var(--r-pil);
  background: rgba(18, 12, 43, .88);
  box-shadow: 0 0 0 1px var(--glas-rand) inset;
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .casewissel__knoppen { background: rgba(18, 12, 43, .58); -webkit-backdrop-filter: blur(var(--glas-blur)); backdrop-filter: blur(var(--glas-blur)); }
}
.casewissel__knoppen[hidden] { display: none; }
.casewissel__teller { margin: 0; padding: 0 var(--s-2); font-family: var(--f-mono); font-size: var(--t-label); letter-spacing: .08em; color: var(--op-donker); font-variant-numeric: tabular-nums; white-space: nowrap; }
.casewissel__teller span + span { color: var(--op-donker-zacht); }
.casewissel__knop {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--op-donker);
  cursor: pointer;
  transition: background-color var(--d-snel) var(--ease-uit), transform var(--d-snel) var(--ease-uit);
}
.casewissel__knop:hover { background: var(--violet); }
.casewissel__knop:active { transform: scale(.94); }
.casewissel__knop:focus-visible { outline: 3px solid var(--violet-200); outline-offset: 2px; }
@media (min-width: 640px) {
  .casewissel.is-wissel .casekaart { padding-bottom: calc(var(--s-5) + 52px + var(--s-4)); }
  .casewissel__knoppen { right: var(--s-5); bottom: var(--s-5); }
}
@media (min-width: 960px) {
  .casewissel.is-wissel .casekaart { padding-bottom: calc(var(--s-6) + 52px + var(--s-4)); }
  .casewissel__knoppen { right: var(--s-6); bottom: var(--s-6); }
}