/* fixes.css – Accessibility- und Optik-Fixes aus dem Audit vom 2026-11-06.
   Wird als letztes Stylesheet geladen (site/snippets/head.php). Jeder Schritt ist ein eigener Block. */

/* 01 Kontrast (WCAG 1.4.3) */
/* Breadcrumbs auf Violett: 85 % Weiß (4,6:1), aktuelles Item weiß */
.lv-crumbs a, nav[aria-label="Kruimelpad"] a { color: rgba(255,255,255,.85) !important; opacity: 1 !important; text-decoration: underline; text-underline-offset: 3px; }
.lv-crumbs [aria-current], nav[aria-label="Kruimelpad"] [aria-current] { color: #fff !important; opacity: 1 !important; }
/* Dunkle Akzent-Schrift auf Violett: etwas dunkler, große fette Schrift braucht 3:1 -> #170730 (3,26:1) */
.bg-primary .text-dark, .wj-block--page-header .text-dark, .lv-mini .text-dark,
.wj-block--page-header .sk-hero-sub, .lv-mini .lv-mini-sub, .lv-opdracht > span,
.bg-primary .font-heading.text-dark { color: #170730 !important; }
/* Gleiche Regel für dunkle Akzentwörter in Überschriften anderer Blocks */
:is(h1,h2,h3,.text-h1,.text-h2,.text-h3,.font-heading) .text-dark, .font-heading.text-dark { color: #170730 !important; }
/* Violette Überschrift auf Dunkelviolett (Home, Typing-Effekt): 40px fett -> 3:1 nötig, #9550e6 = 3,6:1 */
.bg-dark .text-primary.font-heading, .lv-cases .text-primary.font-heading, p.font-heading.text-primary[data-typed] { color: #9550e6 !important; }
/* Aktiver Menüpunkt: weiß + grüne Unterstreichung statt Dunkelgrau */
.lh-nav a[aria-current="page"], .lh-nav button[aria-current], .lh-nav .is-active > button { color: #fff !important; text-decoration: underline; text-decoration-color: #c7fdbb; text-decoration-thickness: 3px; text-underline-offset: 8px; }
/* Footer „Cookievoorkeuren“ */
.lv-footer-cookie { color: rgba(255,255,255,.85) !important; opacity: 1 !important; }
.lv-footer-cookie svg { fill: currentColor; }
/* Weiß auf Pink -> dunkleres Marken-Pink #d80c76 (5,0:1) */
/* Flächen ohne Hover */
html body .bg-secondary:not([data-accordion-toggle] *):not(.sk-story *), html body .lh-badge, html body .lv-bmeta-card, html body .sk-cta-card { background-color: #d80c76 !important; }
/* Buttons: nur im Ruhezustand, Hover-Farben bleiben wie sie sind */
html body .wj-btn-pink:not(:hover):not(:focus-visible), html body .btn-primary:not(:hover):not(:focus-visible), html body .lv-btn--pink:not(:hover):not(:focus-visible), html body .wf_form_submit:not(:hover):not(:focus-visible) { background-color: #d80c76 !important; border-color: #d80c76 !important; }
/* Pink auf Dunkelviolett (Telefon/E-Mail): ab 18,67 px fett gilt 3:1 -> 20 px */
.bg-dark a[href^="tel:"], .bg-dark a[href^="mailto:"] { font-size: 1.25rem !important; }
/* Cases-Überschrift/Kicker auf Dunkelviolett */
.lv-cases-inner > h3, .lv-cases-kicker { color: rgba(255,255,255,.72) !important; }

/* 02 Fokusrahmen (WCAG 2.4.7 / 2.4.11): gut sichtbar auf Violett UND auf Weiß.
   Grüner Ring (Akzentfarbe) mit dunklem Innenring. Nur bei Tastatur (:focus-visible), nicht bei Mausklick. */
html body :focus-visible {
  outline: 3px solid #c7fdbb !important;
  outline-offset: 3px !important;
  box-shadow: 0 0 0 3px #170730 !important; 
}
html body input:focus-visible, html body textarea:focus-visible, html body select:focus-visible { outline-offset: 0 !important; }

/* 03 Adressblock Kontakt: Zeilen nie umbrechen; passt die IBAN-Spalte nicht daneben, rutscht sie darunter */
.grid:has(> address) { display: flex !important; flex-wrap: wrap; column-gap: 3rem; row-gap: 1.25rem; }
.grid:has(> address) > address, .grid:has(> address) > p { white-space: nowrap; }

/* 04 FAQ-Accordion: geöffnete Frage zeigt × statt + (wie Werkwijze-Schritte); Fragen nutzen die volle Breite */
.wj-block--faq [data-accordion-toggle] svg { transition: transform .35s ease; }
.wj-block--faq [data-accordion-toggle][aria-expanded="true"] svg { transform: rotate(45deg); }
.wj-block--faq h3, .wj-block--faq [data-accordion-toggle] { text-wrap: pretty !important; hyphens: manual !important; -webkit-hyphens: manual !important; }

/* 05 Silbentrennung mobil: nur noch lange Wörter (≥12 Zeichen, je ≥5 Zeichen pro Teil) trennen.
   Schutz gegen überlaufende Komposita bleibt, „sa-men“, „Webjon-gens“, „Joom-la“ verschwinden. */
@media (max-width: 479px) {
  main :is(h1, h2, h3, h4, p, li, blockquote, dd, dt) {
    hyphenate-limit-chars: 12 5 5;
    -webkit-hyphenate-limit-before: 5; -webkit-hyphenate-limit-after: 5;
  }
  main :is(h1, h2, h3, h4) { text-wrap: balance; }
}

/* 06 Card-Slider mobil: Pfeile unter die Karten wie ab 640px (nie mehr über dem Text) */
@media (max-width: 639px) {
  .lv-cslider-wrap { padding-bottom: 60px; }
  .lv-cslider-nav { top: auto; bottom: 0; }
  .lv-cslider-prev { left: 0; right: auto; transform: rotate(180deg); }
  .lv-cslider-next { left: 52px; right: auto; transform: none; }
}

/* 08 Breadcrumb in Artikel-, Service- und Rechtsseiten bündig mit Überschrift und Text (gleicher Container + Textspalte) */
.lv-kb-head-inner { max-width: 1280px; margin-inline: auto; padding-inline: 40px; }
.lv-kb-head:has(+ * .lv-narrow) .lv-kb-head-inner > nav { max-width: 750px; margin-inline: auto; }
@media (max-width: 639px) { .lv-kb-head-inner { padding-inline: 20px; } }

/* 09 Footer-Überschriften „Adres“/„Snel naar“ sind jetzt h2 (Überschriften-Reihenfolge, WCAG 1.3.1) — gleiche Optik wie zuvor als h3 */
.lv-footer-sub h2 { margin: 0 0 20px; font-family: var(--font-body); font-weight: 500; font-size: clamp(20px, 2.5vw, 24px); line-height: 1.4; color: #fff; }
@media (max-width: 959px) { .lv-footer-sub h2 { margin-bottom: 12px; font-size: 20px; } }

/* 10 Kleinigkeiten */
/* Hero-Untertitel (Blog, Support, Ons werk): Zeilenhöhe 0,83 -> 1,05, Unterlängen berühren die nächste Zeile nicht mehr */
.lv-mini-sub { line-height: 1.05 !important; }
/* Support-Suche: Feld war 140px breit, Platzhalter „Zoeke…“ abgeschnitten.
   Desktop: 220px, beim Fokus ruhig nach links auf 300px (Lupe bleibt im Feld, kein Springen); klarer Fokusring mit Abstand. */
.lv-kblist-search { width: auto !important; }
@media (min-width: 960px) {
  .lv-kblist-search input { width: 220px; transition: width .25s ease-out; }
  .lv-kblist-search input:focus { width: 300px; }
}
@media (prefers-reduced-motion: reduce) { .lv-kblist-search input { transition: none; } }
html body .lv-kblist-search input:focus-visible { outline: 3px solid #c7fdbb !important; outline-offset: 3px !important; box-shadow: none !important; }
/* Footer-Links nicht mitten im Link umbrechen („Afspraak / maken“) */
.lv-footer-sub nav a { white-space: nowrap; }

/* 11 Handy ≤479px: Testimonial-, Blog- und Preiskarten wirklich randlos wie die übrigen Karten.
   Der negative Rand rechnete mit 15px, der Container hat hier aber 20px -> 5px Streifen links/rechts. */
@media (max-width: 479px) {
  .lv-meet-grid, .lv-blogcard, .lv-pricing-card { margin-left: -20px; margin-right: -20px; }
}

/* 12 Support-Artikel: eine lesbare Spalte statt Zeitungsspalten (die Spalten waren höher als der Bildschirm).
   Bleibt links bündig mit Breadcrumb und Titel. */
@media (min-width: 960px) {
  .lv-kb:not(.lv-kb--page) .lv-kb-text { column-count: 1; column-rule: none; max-width: 750px; }
}

/* 13 Sprechblase „Wij zoeken jou!“: dunkleres Pink nur im Ruhezustand (inkl. Pfeil), Hover bleibt grün wie im Original */
html body .wj-neko:not(:hover):not(:focus-visible) .wj-neko__bubble { background-color: #d80c76; }
html body .wj-neko:not(:hover):not(:focus-visible) .wj-neko__bubble::after { border-left-color: #d80c76; }

/* 14 „Meer werk“-Raster (Ons werk): Projektbilder im Hochformat, gleiches Verhältnis wie die Highlights oben (565:678) */
.lv-werkfilter-grid img { aspect-ratio: 565 / 678; }

/* 15 Lite-YouTube (wj-site-Plugin + assets/js/wj-yt.js) */
/* Lite-YouTube: Vorschaubild + eigener Abspielknopf; der YouTube-Player lädt erst nach Klick */
.wj-yt__btn { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; border-radius: inherit; background: #2e1352; cursor: pointer; overflow: hidden; }
.wj-yt__btn img { width: 100%; height: 100%; object-fit: cover; opacity: .85; transition: opacity .2s; }
.wj-yt__btn:hover img { opacity: 1; }
.wj-yt__play { position: absolute; left: 50%; top: 50%; width: 76px; height: 76px; margin: -38px 0 0 -38px; border-radius: 50%; background: #d80c76; box-shadow: 0 4px 18px rgb(0 0 0 / .35); transition: background-color .2s, transform .2s; }
.wj-yt__play::before { content: ""; position: absolute; left: 31px; top: 24px; border-style: solid; border-width: 14px 0 14px 22px; border-color: transparent transparent transparent #fff; }
.wj-yt__btn:hover .wj-yt__play { background: #c7fdbb; transform: scale(1.06); }
.wj-yt__btn:hover .wj-yt__play::before { border-left-color: #2e1352; }
.wj-yt__label { position: absolute; left: 16px; right: 16px; bottom: 14px; color: #fff; font-family: var(--font-heading); font-weight: 700; font-size: 18px; line-height: 1.25; text-align: left; text-shadow: 0 1px 6px rgb(0 0 0 / .6); }

/* 16 Details 2 */
/* Kaarten-slider (Branches, Websites/Branding): „Meer info“-knoppen op gelijke hoogte onderaan de kaart */
.lv-cslider-track li { display: flex; }
.lv-ccard { display: flex; flex-direction: column; flex: 1; }
.lv-ccard-text { margin-bottom: 22px; }
.lv-ccard > .lv-ccard-btn { margin-top: auto; align-self: flex-start; }
/* Kennisbank-overzicht: titels vullen de regel i.p.v. vroeg af te breken (balance -> pretty) */
.lv-kblist h2, .lv-kblist h3, main [data-portfolio-item] h2 { text-wrap: pretty; }
/* Werkwijze-stappen op mobiel: tekst over de volle breedte i.p.v. 64px ingesprongen */
@media (max-width: 639px) { .sk-steps-text { padding-left: 0 !important; } }

/* 17 Design-Entscheidungen 06.11.: Klant-Case-Schatten, Hosting €/Button, Team-Raster, Blog-Tablet */
.lv-ander--dark h2 { text-shadow: 0 2px 14px rgb(23 7 48 / .65), 0 1px 3px rgb(23 7 48 / .5); }
.lv-pricing-cur { color: inherit; }
.lv-btn--outline-white { font-weight: 700; }
.team-card h3, .team-card h3 + * { margin-left: 0 !important; }
@media (min-width: 960px) { .sk-team-grid { row-gap: 96px !important; } }
@media (min-width: 640px) and (max-width: 959px) {
  ul:has(> li > .lv-blogcard) { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 24px; }
  ul:has(> li > .lv-blogcard) > li { margin: 0 !important; }
}

/* 18 Mobiel: roze intro-zin op donkerpaars 18px -> 19px (vanaf 18,67px vet geldt 3:1), review-stipjes klikvlak 24x24 (WCAG 2.5.8) zonder zichtbare verandering */
@media (max-width: 1023px) { .sk-story-lead, .on-dark .sk-ti-sub { font-size: 19px !important; } }
.sk-dots { gap: 0 !important; }
.sk-dots [data-sk-dot] { box-sizing: border-box; width: 24px !important; height: 24px !important; padding: 5px !important; background-clip: content-box !important; }

/* 19 „Slim uitbreiden“ (Pakketten-Block): Chips bündig mit Überschrift/Linie, zwei gleich breite Spalten innerhalb des Kartenrands */
article.bg-dark ul.grid.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; column-gap: 16px !important; }
article.bg-dark ul.grid.grid-cols-2 .sk-chip { padding-left: 0 !important; padding-right: 0 !important; overflow-wrap: anywhere; }

/* 20 Footer „Snel naar“: Raster nach Wortbreite statt gleich breiter CSS-Spalten (lange Links überlappten); unter 460px Platz 2 Spalten */
.lv-footer-sub nav { container-type: inline-size; }
.lv-footer-sub nav ul { columns: auto !important; display: grid; grid-auto-flow: column; grid-template-rows: repeat(2, auto); grid-auto-columns: max-content; column-gap: 32px; justify-content: start; }
@container (max-width: 459px) { .lv-footer-sub nav ul { grid-template-rows: repeat(4, auto); column-gap: 40px; } }

/* 21 Achtergrondvideo (marquee-blok): pauze/afspeel-knop rechtsonder */
.wj-bgvid-toggle { position: absolute; right: 20px; bottom: 20px; z-index: 3; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 2px solid rgb(255 255 255 / .75); border-radius: 50%; background: rgb(46 19 82 / .7); cursor: pointer; transition: background-color .2s; }
.wj-bgvid-toggle:hover { background: #d80c76; }
.wj-bgvid-icon { display: block; width: 12px; height: 14px; border-left: 4px solid #fff; border-right: 4px solid #fff; }
.wj-bgvid-toggle.is-paused .wj-bgvid-icon { width: 0; height: 0; margin-left: 4px; border-style: solid; border-width: 8px 0 8px 13px; border-color: transparent transparent transparent #fff; }
@media (min-width: 960px) { .wj-bgvid-toggle { right: 40px; bottom: 32px; } }

/* 22 „Wij werken nu aan“ onder de kaarten: alleen de achtergrondlaag (video/foto + paarse tint) 200px omhoog laten doorlopen
   onder de kaarten, zodat er geen paarse strook meer tussen het witte vlak en de video zit. Blok en tekst blijven op hun plek;
   horizontaal blijft afgesneden (lopende klantnamen). */
.wj-block--link-cards-collage + .wj-block--marquee[class*="-mt-40"] { overflow-x: clip !important; overflow-y: visible !important; }
.wj-block--link-cards-collage + .wj-block--marquee[class*="-mt-40"] > .absolute.inset-0 { top: -200px; }

/* 23 Reviews (footer): lange reviews na 7 regels afkappen + „Lees verder“ → volledige review in een dialoog */
.sk-review p { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 7; line-clamp: 7; overflow: hidden; }
.sk-review-more { display: inline-block; margin-top: 12px; padding: 6px 16px; border: 2px solid #8438df; border-radius: 999px; background: transparent; color: #2e1352; font-family: var(--font-heading); font-weight: 700; font-size: 14px; line-height: 1.2; cursor: pointer; transition: background-color .2s, color .2s; }
.sk-review-more:hover { background: #8438df; color: #fff; }
.wj-review-dialog { width: min(600px, calc(100vw - 32px)); max-height: calc(100vh - 64px); padding: 0; border: 0; border-radius: 15px; background: #fff; color: #2e1352; box-shadow: 0 20px 60px rgb(0 0 0 / .35); }
.wj-review-dialog::backdrop { background: rgb(46 19 82 / .75); }
.wj-review-dialog__inner { position: relative; padding: 48px 40px 36px; }
.wj-review-dialog h2 { margin: 0 0 20px; font-family: var(--font-heading); font-weight: 700; font-size: 28px; line-height: 1.2; color: #2e1352; }
.wj-review-dialog blockquote { margin: 0; }
.wj-review-dialog blockquote p { margin: 0; font-family: var(--font-heading); font-style: italic; font-size: 18px; line-height: 1.6; letter-spacing: .3px; }
.wj-review-dialog__by { margin: 20px 0 0; font-weight: 700; font-size: 16px; }
.wj-review-dialog__by span { display: block; font-weight: 500; color: #7056af; }
.wj-review-dialog__close { position: absolute; top: 12px; right: 12px; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: #f1eef8; color: #2e1352; font-size: 26px; line-height: 1; cursor: pointer; }
.wj-review-dialog__close:hover { background: #d80c76; color: #fff; }
@media (max-width: 479px) { .wj-review-dialog__inner { padding: 44px 24px 28px; } .wj-review-dialog h2 { font-size: 24px; } }
.sk-reviews-view { height: var(--wj-rev-h, auto) !important; }
.sk-reviews-track { height: 100%; align-items: center !important; }
.wj-review-dialog { position: fixed; inset: 0; margin: auto !important; height: fit-content; }
/* Naam + bedrijf zichtbaar onder elke review (was alleen voor schermlezers) */
.sk-review footer.sr-only { position: static !important; width: auto !important; height: auto !important; margin: 12px 0 0 !important; padding: 0 !important; overflow: visible !important; clip: auto !important; clip-path: none !important; white-space: normal !important; font-family: var(--font-heading); font-weight: 700; font-size: 14px; line-height: 1.3; color: #7056af; }
.sk-review footer.sr-only::before { content: "\2014\00a0" / ""; }

/* 24 Header-dropdowns: ruimte voor het pijltje altijd reserveren (rechts), bij hover naar links verschuiven — breedte blijft gelijk */
.lh-nav .lh-dd a { padding-right: 30px; transition: padding .15s, color .1s; }
.lh-nav .lh-dd a:hover, .lh-nav .lh-dd a[aria-current] { padding-right: 0; }

/* 25 Header-knop Contact op de contactpagina: actieve-menu-stijl (wit + streep) niet op de groene knop, tekst blijft donker */
.lh-nav a.lh-koffie[aria-current="page"] { color: var(--lh-dark, #2e1352) !important; text-decoration: none; }

/* 26 Footer mail/telefoon hover: roze (1,4:1) en donkerpaars (2,6:1) op paars waren onleesbaar -> wit blijven + onderstreept, zoals de andere footerlinks */
html:not(.wj-1999) .lv-footer-contact a[href^="mailto:"]:hover, html:not(.wj-1999) .lv-footer-contact a[href^="tel:"]:hover,
html:not(.wj-1999) .lv-footer-contact a[href^="mailto:"]:focus-visible, html:not(.wj-1999) .lv-footer-contact a[href^="tel:"]:focus-visible { color: #fff; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; }

/* 27 Knop "Plan een afspraak" hover: donkerpaars op roze 3,2:1 -> wit op roze 4,96:1 */
html:not(.wj-1999) .sk-cta-btn:hover, html:not(.wj-1999) .sk-cta-btn:focus-visible { color: #fff; }

/* 28 Branches/kaart-slider: "Meer info" hover was donkerpaars op donkerpaars (tekst geforceerd #2e1352) -> wit op effen donkerpaars (15:1) */
html:not(.wj-1999) .lv-ccard-btn:hover, html:not(.wj-1999) .lv-ccard-btn:focus-visible { background-color: #2e1352 !important; border-color: #2e1352 !important; color: #fff !important; }