/* PowerNexx WOW-stijl, basis voor de klantpagina's op facturen.powernexx.nl (04-10-2026).
   Kopie van de kern uit nieuw/wow/wow.css: letter, kleuren en de opbouwende tekeningen.
   Zit achter html[data-wow], zodat de interne schermen van de facturatie er niets van merken.
   De oude namen uit app.css (--merk, --ink, --lijn ...) wijzen hier naar de WOW-kleuren, dan
   volgt alles wat al bestaat vanzelf. */

@font-face { font-family: "Jakarta"; src: url("/assets/fonts/ffdb05bf0ea8a.woff2") format("woff2"); font-weight: 200 800; font-display: swap; }

html[data-wow] {
  --inkt: #14181A;
  --tekst: #2B3134;
  --zacht: #5A6266;
  --lijn: #E4E0DA;
  --lijn-sterk: #CFC9C1;
  --wit: #FFFFFF;
  --papier: #F8F5F0;
  --or: #FF6A1A;
  --or-d: #B4430A;
  --or-dd: #8F3407;
  --or-l: #FFE7D9;
  --tq: #12B5B0;
  --tq-d: #08716C;
  --tq-dd: #065A56;
  --tq-l: #DDF4F2;
  --diep: #0A2F2E;
  --diepst: #072423;
  --gemak: cubic-bezier(.6, 0, .2, 1);
  --wow-letter: "Jakarta", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* app.css-namen naar WOW */
  --merk: var(--tq-d); --merk-donker: var(--tq-dd); --merk-zacht: var(--tq-l); --accent: var(--or);
  --merk-bright: var(--tq);
  --blauw: var(--tq-d); --blauw-d: var(--tq-dd); --blauw-l: var(--tq-l);
  --ink: var(--inkt); --ink2: var(--tekst); --dim: var(--zacht); --ink3: #7A8286; --dim2: #7A8286;
  --lijn2: #EFEBE5; --line: var(--lijn);
  --bg: var(--papier); --paper: #fff;
  --schaduw: 0 1px 2px rgba(20,24,26,.04), 0 24px 48px -36px rgba(20,24,26,.35);
  --font: var(--wow-letter);
  color-scheme: light;
}

html[data-wow] body { font-family: var(--wow-letter); color: var(--tekst); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
html[data-wow] :focus-visible { outline: 3px solid var(--or-d); outline-offset: 3px; border-radius: 4px; }

/* knoppen in WOW-vorm, los te gebruiken */
html[data-wow] .wow-knop {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 24px; border-radius: 12px; border: 2px solid transparent;
  font: 700 1rem/1.15 var(--wow-letter); text-decoration: none; cursor: pointer; text-align: center;
  transition: transform .25s var(--gemak), background-color .2s, color .2s, border-color .2s;
}
html[data-wow] .wow-knop:hover { transform: translateY(-2px); text-decoration: none; }
html[data-wow] .wow-knop-or { background: var(--or-d); color: #fff; }
html[data-wow] .wow-knop-or:hover { background: var(--or-dd); color: #fff; }
html[data-wow] .wow-knop-tq { background: var(--tq-d); color: #fff; }
html[data-wow] .wow-knop-tq:hover { background: var(--tq-dd); color: #fff; }
html[data-wow] .wow-knop-rand { border-color: var(--tq-d); color: var(--tq-d); background: #fff; }
html[data-wow] .wow-knop-rand:hover { background: var(--tq-l); color: var(--tq-dd); }

/* chevrons uit het logo */
html[data-wow] .wow-chev { display: inline-flex; gap: 3px; height: 14px; vertical-align: middle; }
html[data-wow] .wow-chev i { display: block; width: 10px; height: 14px; clip-path: polygon(0 0, 45% 0, 100% 50%, 45% 100%, 0 100%, 55% 50%); background: var(--or); }
html[data-wow] .wow-chev i + i { background: var(--tq); }

/* tekeningen (wow_tekening) */
.tk { display: block; width: 100%; height: auto; overflow: visible; }
.tk .l { fill: none; stroke: #14181A; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.tk .l.a1 { stroke: #FF6A1A; }
.tk .l.a2 { stroke: #12B5B0; }
.tk .l.dik { stroke-width: 6; }
.tk .l.vul { fill: #fff; }
.tk .vl { stroke: none; }
.tk .v1 { fill: #FFE7D9; }
.tk .v2 { fill: #DDF4F2; }
.tk .puls { fill: #FF6A1A; opacity: 0; offset-rotate: 0deg; }
.tk .puls.p2 { fill: #12B5B0; }
.wow-donker .tk .l { stroke: #F2F4F3; }
.wow-donker .tk .l.a1 { stroke: #FF6A1A; }
.wow-donker .tk .l.a2 { stroke: #12B5B0; }
.wow-donker .tk .l.vul { fill: #0A2F2E; }
.wow-donker .tk .v1 { fill: rgba(255,106,26,.18); }
.wow-donker .tk .v2 { fill: rgba(18,181,176,.18); }
.js .tk.wacht .l { stroke-dashoffset: 1; }
.js .tk.wacht .vl { opacity: 0; transform: translate(-10px, -10px); }
.tk.aan .l { transition: stroke-dashoffset 1s cubic-bezier(.6, 0, .2, 1) calc(var(--i, 0) * 55ms); }
.tk.aan .vl { transition: opacity .9s ease .1s, transform 1.1s cubic-bezier(.6, 0, .2, 1) .1s; }
.tk.klaar .puls { opacity: 1; animation: wow-puls 3.6s linear infinite; }
.tk.klaar .puls.p2 { animation-delay: 1.4s; }
@keyframes wow-puls { from { offset-distance: 0%; } to { offset-distance: 100%; } }

@media (prefers-reduced-motion: reduce) {
  .js .tk.wacht .l { stroke-dashoffset: 0; }
  .js .tk.wacht .vl { opacity: 1; transform: none; }
  .tk.klaar .puls { animation: none; opacity: 0; }
  html[data-wow] .wow-knop:hover { transform: none; }
}