/* 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 .wj-neko__bubble, 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; }
}