/* PowerNexx, nieuwe richting: bestaande pagina's (formulieren, tokenpagina's, inloggen, betalen) in het WOW-kader.
   nieuw/wow/omhul.php zet de inhoud in <div class="wow-oud">; de oude stylesheets gelden alleen daarbinnen.
   Dit bestand geeft knoppen, velden, koppen en kaarten daarbinnen de nieuwe vorm. Waar de oude opmaak sterker is
   (zeer specifieke selectors) staat hier !important; alleen voor vorm, nooit voor tonen of verbergen. */

body .wow-oud {
  background: transparent; min-height: 0; max-width: none; width: auto; margin: 0; display: block;
  padding: clamp(28px, 5vw, 56px) 0 clamp(56px, 8vw, 96px);
  color: var(--tekst); font-size: 17px; line-height: 1.6; overflow-x: clip;
}
.wow-oud, .wow-oud *:not(svg):not(svg *):not(code):not(pre):not(kbd):not(.mono):not([class*="icon"]):not([class*="mono"]) {
  font-family: "Jakarta", system-ui, -apple-system, "Segoe UI", sans-serif !important;
}
.wow-oud :is(h1, h2, h3, h4) { color: var(--inkt); font-weight: 800; text-wrap: balance; }
.wow-oud h1 { font-size: clamp(2rem, 4.6vw, 3.3rem) !important; letter-spacing: -.032em !important; line-height: 1.05 !important; margin: 0 0 .45em; }
.wow-oud h2 { font-size: clamp(1.4rem, 2.6vw, 2rem) !important; letter-spacing: -.022em; line-height: 1.12; margin: 0 0 .55em; }
.wow-oud h3 { font-size: 1.15rem !important; letter-spacing: -.012em; line-height: 1.25; margin: 0 0 .4em; }
.wow-oud p { margin: 0 0 1em; }
.wow-oud p:last-child { margin-bottom: 0; }
.wow-oud a:not([class]) { color: var(--tq-d); text-underline-offset: 3px; }
.wow-oud a:not([class]):hover { color: var(--tq-dd); }
.wow-oud :focus-visible { outline: 3px solid var(--or-d) !important; outline-offset: 3px; }

/* Breedte: inhoud zonder eigen container krijgt de maat van de site. */
:where(.wow-oud > :not(script, style, section, [class*="container"], [class*="wrap"], [data-was-main])) { max-width: var(--breed); margin-inline: auto; padding-inline: 20px; }
/* Het logo staat al in de kop van het kader. */
.wow-oud img[src*="bedrijfslogo"] { display: none !important; }
.wow-oud [class~="container"], .wow-oud [class*="__in"], .wow-oud [class*="-inner"] { max-width: var(--breed); }

/* Kopblokken (oude "hero"): licht papier in plaats van donker of oranje, tekst in inkt. */
.wow-oud :is([class*="hero"]:not([class*="hero__"]):not([class*="hero-"]):not([class*="heroes"]), .part-hero, .page-hero) {
  background: var(--papier) !important; color: var(--tekst) !important; border-radius: 0; box-shadow: none !important;
}
.wow-oud :is([class*="hero"]) :is(h1, h2, h3) { color: var(--inkt) !important; }
.wow-oud :is([class*="hero"]) :is(p, li, span:not([class*="btn"])) { color: var(--tekst); }
.wow-oud [class*="hero__gradient"], .wow-oud [class*="hero-gradient"], .wow-oud [class*="hero__bg"] { display: none !important; }

/* Knoppen: dezelfde vorm als .knop. */
.wow-oud :is(.btn, .button, .oud-knop:not(.stil), [class$="-btn"], [class*="-btn "], [class*="btn-primary"], [class*="btn-accent"], [class*="btn--primary"], [class*="__btn"]:not([class*="__btn-"]), button[type="submit"], input[type="submit"]) {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 24px !important; border-radius: 12px !important;
  border: 2px solid transparent !important; background: var(--or-d) !important; background-image: none !important; color: #fff !important;
  font: 700 1rem/1.15 "Jakarta", system-ui, sans-serif !important; letter-spacing: 0 !important; text-transform: none !important;
  text-decoration: none !important; box-shadow: none !important; cursor: pointer;
  transition: background-color .2s, color .2s, border-color .2s, transform .25s var(--gemak);
}
.wow-oud :is(.btn, .button, .oud-knop:not(.stil), [class$="-btn"], [class*="-btn "], [class*="btn-primary"], [class*="btn-accent"], [class*="btn--primary"], [class*="__btn"]:not([class*="__btn-"]), button[type="submit"], input[type="submit"]):hover { background: var(--or-dd) !important; color: #fff !important; }
.wow-oud :is(.btn, .button, button[type="submit"]):active { transform: translateY(1px); }
.wow-oud :is(.btn-outline, .btn-secondary, .btn-ghost, .btn-light, .btn-white, .btn-wit, .btn-link, [class*="btn--ghost"], [class*="btn--outline"], [class*="btn--secondary"], [class*="btn-outline"], [class*="btn-sec"], .oud-knop.stil, [class*="btn"]:is(.ghost, .line, .outline, .secondary, .wit, .light)) {
  background: transparent !important; color: var(--inkt) !important; border-color: var(--inkt) !important;
}
.wow-oud :is(.btn-outline, .btn-secondary, .btn-ghost, .btn-light, .btn-white, .btn-wit, [class*="btn--ghost"], [class*="btn--outline"], [class*="btn--secondary"], [class*="btn-outline"], [class*="btn-sec"], .oud-knop.stil, [class*="btn"]:is(.ghost, .line, .outline, .secondary, .wit, .light)):hover {
  background: var(--inkt) !important; color: #fff !important;
}
.wow-oud :is(.btn, .button, button)[disabled] { opacity: .55; cursor: not-allowed; }
.wow-oud :is(.btn-sm, .btn--sm, .btn-small) { min-height: 42px; padding: 0 16px !important; font-size: .94rem !important; }

/* Velden: dezelfde vorm als .veld input. */
.wow-oud :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]):not([type="submit"]):not([type="button"]):not([type="range"]):not([type="color"]):not([type="image"]), select, textarea) {
  font: 400 1rem/1.4 "Jakarta", system-ui, sans-serif !important; color: var(--inkt) !important;
  background-color: #fff !important; border: 1.5px solid var(--lijn-sterk) !important; border-radius: 12px !important;
  padding: 13px 16px !important; min-height: 52px; box-shadow: none !important; max-width: 100%;
  transition: border-color .2s, box-shadow .2s;
}
.wow-oud textarea { min-height: 128px; line-height: 1.55 !important; }
.wow-oud select {
  appearance: none; -webkit-appearance: none; padding-right: 44px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%2314181A' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important; background-position: right 16px center !important; background-size: 14px !important;
}
.wow-oud :is(input, select, textarea):focus { outline: none !important; border-color: var(--tq-d) !important; box-shadow: 0 0 0 4px rgba(8,113,108,.16) !important; }
.wow-oud :is(input, select, textarea)[aria-invalid="true"], .wow-oud :is(input, select, textarea).is-invalid, .wow-oud :is(input, select, textarea).fout { border-color: var(--or-d) !important; }
.wow-oud input::placeholder, .wow-oud textarea::placeholder { color: #7A8185 !important; opacity: 1; }
.wow-oud :is(input[type="checkbox"], input[type="radio"]) { accent-color: var(--tq-d); width: 20px; height: 20px; }
.wow-oud input[type="file"] { font: inherit; max-width: 100%; }
.wow-oud input[type="file"]::file-selector-button { font: 700 .95rem "Jakarta", system-ui, sans-serif; border: 2px solid var(--inkt); background: #fff; color: var(--inkt); border-radius: 10px; padding: 10px 16px; margin-right: 12px; cursor: pointer; }
.wow-oud label { color: var(--inkt); }
.wow-oud fieldset { border: 0; padding: 0; margin: 0 0 1em; min-width: 0; }
.wow-oud legend { font-weight: 700; color: var(--inkt); }

/* Kaarten en vakken: wit, dunne lijn, ronde hoek, geen zware schaduw. */
.wow-oud :is(.card, [class$="-card"], [class*="-card "], [class*="__card"]:not([class*="__card-"]), .login-split__form-panel, .st-kaart, .kl__kaart, .wrap > form, .inlog) {
  background: #fff; border: 1px solid var(--lijn) !important; border-radius: var(--rand) !important; box-shadow: 0 1px 2px rgba(20,24,26,.04) !important;
}

/* Meldingen. */
.wow-oud :is(.alert, .melding, .notice, [class*="alert-"], [class*="__melding"], [class*="__fout"], .error, .fout-melding) { border-radius: 12px !important; }

/* Tabellen. */
.wow-oud table { border-collapse: collapse; }
.wow-oud :is(th, td) { border-color: var(--lijn) !important; }

/* Verborgen kop voor zoekmachines (stond in de oude kop-css). */
.wow-oud .seo-h1 { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: 0; }

/* Het kader zelf. */
.wow-omhul .kop { z-index: 70; }
.wow-oud [data-was-main] { display: block; }

/* Storingspagina's: bellen gaat altijd sneller dan een formulier. */
.wow-spoedbalk { background: var(--inkt); color: #fff; }
.wow-spoedbalk .binnen { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 12px; }
.wow-spoedbalk p { margin: 0; font-size: 1rem; line-height: 1.4; }
.wow-spoedbalk b { color: #fff; }
.wow-spoedbalk .stip { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--or); margin-right: 10px; vertical-align: 1px; animation: wow-spoed 1.8s infinite; }
.wow-spoedbalk .knop { min-height: 46px; padding: 0 18px; flex: none; }
@keyframes wow-spoed { 0% { box-shadow: 0 0 0 0 rgba(255,106,26,.6); } 70% { box-shadow: 0 0 0 10px rgba(255,106,26,0); } 100% { box-shadow: 0 0 0 0 rgba(255,106,26,0); } }
@media (max-width: 700px) { .wow-spoed-lang { display: none; } .wow-spoedbalk p { font-size: .95rem; } }

@media (prefers-reduced-motion: reduce) {
  .wow-oud *, .wow-oud *::before, .wow-oud *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .wow-spoedbalk .stip { animation: none; }
}