/* ============================================================
   TOEGANKELIJKHEID — stijlen bij toegankelijk.js
   ============================================================ */

/* "Naar de inhoud": alleen zichtbaar als je met Tab op de pagina begint */
.kp-skip {
  position: fixed; left: 12px; top: -80px; z-index: 200; padding: .7em 1.1em;
  background: var(--ink, #181818); color: var(--paper, #fff); font-weight: 700; text-decoration: none;
  border-radius: var(--r-sm, 4px); transition: top .15s ease;
}
.kp-skip:focus { top: 12px; outline: 3px solid var(--focus, #181818); outline-offset: 2px; }
main:focus, h1[tabindex="-1"]:focus { outline: none; }

/* Focus altijd goed zichtbaar, ook waar het ontwerp de rand had weggehaald */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 3px solid var(--focus, #181818) !important; outline-offset: 2px; }
/* de kop krijgt bij een nieuwe pagina de focus (voor voorleessoftware); dat is geen knop, dus geen focusrand */
h1[tabindex="-1"]:focus-visible, main:focus-visible { outline: none !important; box-shadow: none !important; }
.specsearch input:focus-visible, .bdd__s input:focus-visible, .kp-faqzoek input:focus-visible,
.kk input:focus-visible, .kk textarea:focus-visible, .kkp input:focus-visible, .kkp textarea:focus-visible { outline: 3px solid var(--focus, #181818) !important; outline-offset: 1px; }

/* Productkaart: de titel is de link; de hele kaart blijft klikbaar met de muis */
.kp-card .card__link { color: inherit; text-decoration: none; }
.kp-card .card__link::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.kp-card .card__link:focus-visible { outline: none !important; }
.kp-card:has(.card__link:focus-visible) { outline: 3px solid var(--focus, #181818); outline-offset: 3px; }
/* knoppen en labels boven de klikbare laag van de link; hun eigen plek (absoluut) blijft zoals in het ontwerp */
.kp-card .card__fav, .kp-card .lbs { z-index: 3; }
.kp-card .card__add { position: relative; z-index: 2; }
.kp-card:hover .card__link { text-decoration: underline; text-underline-offset: 3px; }
/* buiten je saldo: niet vervagen (te weinig contrast), maar in woorden zeggen */
.card--off { opacity: 1 !important; }
.kp-buiten { display: inline-block; margin: .1rem 0 .3rem; font-size: var(--s-2); font-weight: 700; color: var(--ink-2); }

/* Pauzeknop bij de doorlopende rij */
.carou { position: relative; }
.kp-pauze {
  position: absolute; right: 0; top: -2.6rem; z-index: 3; min-height: 36px; padding: .3em .8em;
  border: 2px solid var(--ink); border-radius: var(--r-pill, 999px); background: var(--paper); color: var(--ink);
  font: inherit; font-size: var(--s-2); font-weight: 700; cursor: pointer;
}

/* Chatbubbel: echte knop */
.kp-ai__bubbeltekst { all: unset; display: flex; gap: 10px; align-items: flex-start; cursor: pointer; font: inherit; color: inherit; text-align: left; }
.kp-ai__bubbeltekst:focus-visible { outline: 3px solid var(--focus, #181818); outline-offset: 2px; }

/* Gesloten vensters zijn ook voor voorleessoftware weg */
.modal:not(.is-open)[inert], .lb:not(.is-open)[inert] { visibility: hidden; }

/* doorlopende rij: de schaduw en het optillen bij hover mogen buiten het venster vallen. Alleen links en
   rechts knippen we af (net binnen de tussenruimte, zodat je de volgende kaart niet ziet), boven en onder niet.
   De hover-schaduw is hier kleiner en zonder draaien, zodat hij binnen die ruimte past. */
.carou__vp { overflow-x: clip; overflow-y: visible; overflow-clip-margin: 10px; }   /* knipt alleen opzij (geen horizontaal scrollen van de pagina), schaduw onder en boven blijft */
.carou .card:hover, .carou .card:focus-within { transform: translateY(-4px);
  box-shadow: 0 1px 0 #00000010, 0 14px 22px -12px oklch(0.30 calc(var(--brand-c) * 0.6) var(--brand-h) / 0.5); }

/* carrousel-bolletjes: klikvlak 24×24 px (WCAG 2.5.8), het zichtbare bolletje erin; inactief met genoeg contrast (1.4.11) */
.carou__dots { gap: 0; }
.carou__dots button { position: relative; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 0; background: transparent; cursor: pointer; }
.carou__dots button::before { content: ""; position: absolute; left: 50%; top: 50%; width: 9px; height: 9px; transform: translate(-50%, -50%); border-radius: 50%; background: var(--ink-3, #666); transition: width .2s; }
.carou__dots button[aria-current="true"] { width: 34px; background: transparent; }
.carou__dots button[aria-current="true"]::before { width: 22px; border-radius: 5px; background: var(--action); }
.carou__dots button:focus-visible { outline: 3px solid var(--focus, #181818); outline-offset: -2px; }

/* Tekstafstand (WCAG 1.4.12): tekst mag niet wegvallen als iemand regel-, letter- of woordafstand vergroot.
   - tegels op de startpagina: geen afkapping na 3 regels op mobiel; de tegel groeit mee
   - achterkant van het cadeaulabel: bij te weinig ruimte kun je in het vak scrollen in plaats van dat tekst wegvalt */
@media (max-width: 900px) { .bento .tile p { display: block; -webkit-line-clamp: unset; overflow: visible; } }
.flip__b { overflow-y: auto; }
/* quote op de achterkant van het cadeaulabel: lettergrootte past zich aan de ruimte aan, zodat hij altijd past */
.flip__b blockquote { font-size: clamp(.95rem, 1.5vw, 1.4rem); line-height: 1.4; }
@media (max-width: 560px) { .hero__art { aspect-ratio: 1 / 1; } .flip__b { padding: 1rem 1.1rem; gap: .4rem; } .flip__b blockquote { font-size: .9rem; line-height: 1.35; } }