/* Windkracht Support – site.css (support.windkracht.nl). Richting: BRIEF.md.
   Alle kleuren als variabelen; donkere modus onder html.wk-dark (nieuwe kleur = altijd een variabele). */

@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 400 700;
  font-stretch: 75% 100%;
  src: url('fonts/instrument-sans-latin-standard-normal.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 400 700;
  font-stretch: 75% 100%;
  src: url('fonts/instrument-sans-latin-ext-standard-normal.woff2') format('woff2-variations');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  src: url('fonts/archivo-latin-standard-normal.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  src: url('fonts/archivo-latin-ext-standard-normal.woff2') format('woff2-variations');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* merk (logo en CMS 1.51.0, docs/stijlgids.md §1) */
  --wk-blue: #0c1f4f;
  --wk-blue-2: #1f3a80;
  --wk-sky: #90a2d1;
  --wk-sky-deep: #4d63a3;
  --wk-ice: #e2e9fa;
  --wk-orange: #fc7505;
  /* vlakken en tekst (zoals windkracht.nl: lichtblauw papier, witte kaarten) */
  --wk-bg: #f5f7fc;
  --wk-vlak: #ffffff;
  --wk-soft: #eaeffa;
  --wk-mint: #e2e9fa;
  --wk-ink: #0c1f4f;
  --wk-muted: #4a5573;
  --wk-line: #d5ddef;
  --wk-line-strong: #b3c0e0;
  --wk-link: #1f3a80;
  --wk-mark: #d3ddf5;
  --wk-accent: var(--wk-sky-deep);
  --wk-tile-bg: var(--wk-blue);
  --wk-tile-fg: #ffffff;
  --wk-btn-bg: var(--wk-blue);
  --wk-btn-fg: #ffffff;
  --wk-btn-hover: var(--wk-blue-2);
  /* actieknop (Inloggen, Stel je vraag, Vraag versturen): oranje van windkracht.nl, iets dieper voor witte tekst */
  --wk-cta: #ec6a00;
  --wk-cta-hover: #d45a00;
  --wk-focus: #4d63a3;
  --wk-error: #b42318;
  --wk-ok: #2f6b32;
  --wk-dark-band: #0c1f4f;
  --wk-bar: #0c1f4f;
  --wk-bar-line: #0c1f4f;
  --wk-foot-bg: #0c1f4f radial-gradient(ellipse 70% 130% at 50% 0%, #0c1f4f 45%, #071538 80%, #050f2c 100%);
  --wk-foot-ink: #b5c0dc;
  --wk-sub-1: #1f3a80;
  --wk-sub-2: #c25700;
  --wk-sky-veil: linear-gradient(180deg, rgba(245, 247, 252, .05) 0%, rgba(245, 247, 252, .45) 40%, #f5f7fc 96%);
  --wk-prop-c: #0c1f4f;
  --wk-prop-ring: transparent;
  --wk-shadow: 0 18px 40px -24px rgba(12, 31, 79, 0.45);
  /* toestemmingskaart (Google Analytics, bouwer) */
  --wb-consent-accent: #0c1f4f;
  --wb-consent-accent-color: #ffffff;
  --wb-consent-bg: #ffffff;
  --wb-consent-color: #0c1f4f;
  --wb-consent-border: #d5ddef;
  --wb-consent-radius: 12px;
  --wb-consent-button-radius: 10px;
  --wb-consent-font: 'Instrument Sans', system-ui, sans-serif;
  --wb-consent-shadow: 0 18px 40px -24px rgba(12, 31, 79, 0.5);

  --wk-titel: 'Archivo', 'Instrument Sans', system-ui, sans-serif;
  --wk-wrap: 1200px;
  --wk-gutter: clamp(16px, 4vw, 32px);
  color-scheme: light;
}

html.wk-dark {
  --wk-bg: #071233;
  --wk-vlak: #0d1b42;
  --wk-soft: #13234f;
  --wk-mint: #13234f;
  --wk-ink: #e2e9fa;
  --wk-muted: #b5c0dc;
  --wk-line: #1f3166;
  --wk-line-strong: #33498a;
  --wk-link: #aebde6;
  --wk-mark: #24396f;
  --wk-accent: var(--wk-sky);
  --wk-tile-bg: var(--wk-sky);
  --wk-tile-fg: #0c1f4f;
  --wk-btn-bg: #e2e9fa;
  --wk-btn-fg: #0c1f4f;
  --wk-btn-hover: #ffffff;
  --wk-focus: #90a2d1;
  --wk-error: #ff8f80;
  --wk-ok: #9fd39f;
  --wk-dark-band: #0d1b42;
  --wk-bar: #050d26;
  --wk-bar-line: #2a3f7a;
  --wk-foot-bg: #0d1b42 radial-gradient(ellipse 70% 130% at 50% 0%, #0d1b42 45%, #081332 80%, #050c24 100%);
  --wk-foot-ink: #aab8de;
  --wk-sub-1: #aab8de;
  --wk-sub-2: #ff9a45;
  --wk-sky-veil: linear-gradient(180deg, rgba(7, 18, 51, .78) 0%, rgba(7, 18, 51, .88) 40%, #071233 96%);
  --wk-prop-c: #13244f;
  --wk-prop-ring: transparent;
  --wk-shadow: 0 18px 40px -24px rgba(0, 0, 0, 0.6);
  --wb-consent-accent: #90a2d1;
  --wb-consent-accent-color: #0c1f4f;
  --wb-consent-bg: #0d1b42;
  --wb-consent-color: #e2e9fa;
  --wb-consent-border: #24366a;
  color-scheme: dark;
}

/* ---------- basis ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 96px; }
body {
  margin: 0;
  background: var(--wk-bg);
  color: var(--wk-ink);
  font: 400 1.0625rem/1.6 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-stretch: 100%;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; }
a { color: var(--wk-link); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
/* koppen in Archivo (zwaar en iets breed), zoals windkracht.nl; lopende tekst in Instrument Sans */
h1, h2, h3 { color: var(--wk-ink); font-family: var(--wk-titel); font-stretch: 108%; font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; text-wrap: balance; }
h1 { font-weight: 850; letter-spacing: -0.045em; line-height: 1; }
p { text-wrap: pretty; }
:focus-visible { outline: 3px solid var(--wk-focus); outline-offset: 2px; border-radius: 4px; }
::selection { background: var(--wk-mark); }
.wk-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wk-skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--wk-btn-bg); color: var(--wk-btn-fg); padding: 10px 16px; border-radius: 10px; }
.wk-skip:focus { top: 12px; }
.wk-wrap { max-width: var(--wk-wrap); margin: 0 auto; padding: 0 var(--wk-gutter); }
.wk-narrow { max-width: 860px; }
.wk-only-dark { display: none !important; }
html.wk-dark .wk-only-dark { display: inline-block !important; }
html.wk-dark .wk-only-light { display: none !important; }

/* ---------- knoppen en links (zoals windkracht.nl: 10 px hoeken, actieknop oranje met witte tekst) ---------- */
.wk-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 50px; padding: 0 24px; border: 1.5px solid var(--wk-btn-bg); border-radius: 10px;
  background: var(--wk-btn-bg); color: var(--wk-btn-fg);
  font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background 0.15s, border-color 0.15s;
}
.wk-btn:hover { background: var(--wk-btn-hover); border-color: var(--wk-btn-hover); color: var(--wk-btn-fg); }
.wk-btn[disabled] { opacity: 0.6; cursor: wait; }
.wk-btn--cta, .wk-form .wk-btn { background: var(--wk-cta); border-color: var(--wk-cta); color: #ffffff; font-weight: 700; }
.wk-btn--cta:hover, .wk-form .wk-btn:hover { background: var(--wk-cta-hover); border-color: var(--wk-cta-hover); color: #ffffff; }
.wk-btn--light { background: #e2e9fa; border-color: #e2e9fa; color: #0c1f4f; }
.wk-btn--light:hover { background: #ffffff; border-color: #ffffff; color: #0c1f4f; }
.wk-textlink { font-weight: 600; }
.wk-btn--outline { background: transparent; color: var(--wk-ink); border-color: var(--wk-line); }
.wk-btn--outline:hover { background: var(--wk-vlak); border-color: var(--wk-ink); color: var(--wk-ink); }
.wk-maint-note { margin: 20px 0 0; }

/* label boven een kop: klein, hoofdletters, ruim gespatieerd (zoals windkracht.nl) */
.wk-kicker { margin: 0 0 14px; font-size: 13.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--wk-accent); }
/* ondertitel in twee delen: eerste deel blauw, tweede deel oranje */
.wk-sub { margin: 0 0 18px; font-size: clamp(1.15rem, 1.9vw, 1.45rem); line-height: 1.35; font-weight: 550; }
.wk-sub > span:first-child { color: var(--wk-sub-1); }
.wk-sub > span + span { color: var(--wk-sub-2); }

/* ---------- kop: zwevende balk met dezelfde maten als windkracht.nl, maar donkerblauw (windkracht.nl is wit),
   zodat je meteen ziet dat je op Support bent. Hoog bij het laden, smal na 60 px scrollen (site.js zet .is-scrolled). ---------- */
.wk-hdr { position: sticky; top: 0; z-index: 50; padding: 18px 16px 0; pointer-events: none; transition: padding 0.3s ease; }
.wk-bar, .wk-mnav { pointer-events: auto; }
.wk-bar :focus-visible { outline-color: #ffffff; }
.wk-bar {
  max-width: var(--wk-wrap); margin: 0 auto; padding: 14px 14px 14px 30px;
  display: flex; align-items: center; gap: 20px;
  border-radius: 999px; background: var(--wk-bar); border: 1px solid var(--wk-bar-line);
  box-shadow: 0 14px 36px -22px rgba(12, 31, 79, 0.6);
  transition: padding 0.3s ease, box-shadow 0.3s ease;
}
.wk-hdr.is-scrolled { padding-top: 8px; }
.wk-hdr.is-scrolled .wk-bar { padding: 6px 6px 6px 22px; box-shadow: 0 18px 40px -20px rgba(12, 31, 79, 0.65); }
.wk-brand { display: flex; align-items: center; gap: 14px; min-height: 44px; text-decoration: none; flex: none; }
/* het woordmerk zit laag in het beeld (de wieken steken erboven uit): iets omhoog, zodat de letters op één lijn staan met Support en het menu */
.wk-brand img { display: block; width: 200px; height: auto; transform: translateY(-25%); transition: width 0.3s ease; }
.wk-hdr.is-scrolled .wk-brand img { width: 150px; }
.wk-brand-label { padding-left: 14px; border-left: 1px solid rgba(255, 255, 255, 0.25); color: var(--wk-orange); font-family: var(--wk-titel); font-stretch: 108%; font-weight: 800; font-size: 1.15rem; letter-spacing: -0.01em; line-height: 1.3; }
.wk-nav { display: flex; gap: 2px; margin: 0 auto; font-size: 17px; font-weight: 500; }
.wk-nav a { position: relative; display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; white-space: nowrap; color: #e2e9fa; text-decoration: none; }
.wk-nav a::after { content: ''; position: absolute; left: 12px; right: 12px; bottom: 8px; height: 2px; border-radius: 2px; background: #90a2d1; transform: scaleX(0); transform-origin: left; transition: transform 0.2s; }
.wk-nav a:hover { color: #ffffff; }
.wk-nav a:hover::after, .wk-nav a[aria-current='page']::after { transform: scaleX(1); }
.wk-nav a[aria-current='page'] { color: #ffffff; }
.wk-nav a[aria-current='page']::after { background: var(--wk-orange); }
.wk-right { margin-left: auto; display: flex; align-items: center; gap: 8px; flex: none; }
.wk-iconbtn {
  display: inline-grid; place-items: center; width: 52px; height: 52px; flex: none;
  border: 1.5px solid rgba(255, 255, 255, 0.24); border-radius: 50%; background: transparent; color: #ffffff; cursor: pointer;
  transition: width 0.3s ease, height 0.3s ease, border-color 0.15s;
}
.wk-iconbtn:hover { border-color: #ffffff; }
.wk-hdr.is-scrolled .wk-iconbtn { width: 42px; height: 42px; }
/* taalknop: rond, met de code van de andere taal (EN op de Nederlandse site, NL op de Engelse) */
.wk-langbtn {
  display: inline-grid; place-items: center; width: 52px; height: 52px; flex: none;
  border: 1.5px solid rgba(255, 255, 255, 0.24); border-radius: 50%; color: #ffffff; text-decoration: none;
  font-family: var(--wk-titel); font-stretch: 108%; font-weight: 800; font-size: 0.95rem; letter-spacing: 0.02em;
  transition: width 0.3s ease, height 0.3s ease, border-color 0.15s;
}
.wk-langbtn:hover { border-color: #ffffff; color: #ffffff; }
.wk-hdr.is-scrolled .wk-langbtn { width: 42px; height: 42px; }
/* Inloggen = de actieknop, net als Start vandaag op windkracht.nl */
.wk-login {
  display: inline-flex; align-items: center; gap: 8px; min-height: 54px; padding: 0 28px;
  border-radius: 999px; background: var(--wk-cta); color: #ffffff; text-decoration: none; font-weight: 700; font-size: 17px;
  transition: min-height 0.3s ease, padding 0.3s ease, background 0.15s;
}
.wk-login:hover { background: var(--wk-cta-hover); color: #ffffff; }
.wk-hdr.is-scrolled .wk-login { min-height: 44px; padding: 0 22px; font-size: 16px; }
.wk-menubtn { display: none; }
.wk-ic-close { display: none; }
.wk-menubtn[aria-expanded='true'] .wk-ic-open { display: none; }
.wk-menubtn[aria-expanded='true'] .wk-ic-close { display: inline; }
.wk-mnav { display: none; }

/* lucht boven aan elke pagina (zelfde foto als windkracht.nl): schuift heel langzaam naar rechts en loopt over in de pagina */
body { position: relative; }
.wk-lucht {
  position: absolute; top: 0; left: 0; right: 0; height: 720px; z-index: 0; pointer-events: none;
  background-image: var(--wk-sky-veil), url('img/lucht-wolken-windkracht-support-schagen-2400.webp');
  background-size: 100% 100%, 2160px 720px; background-repeat: no-repeat, repeat-x; background-position: 0 0, 0 0;
  animation: wk-lucht 360s linear infinite;
}
@keyframes wk-lucht { from { background-position: 0 0, 0 0; } to { background-position: 0 0, 2160px 0; } }
main, .wk-foot { position: relative; z-index: 1; }

/* ---------- zoeken ---------- */
.wk-search { position: relative; width: 230px; }
.wk-search input {
  width: 100%; height: 42px; padding: 0 12px 0 38px;
  border: 1px solid var(--wk-line); border-radius: 10px; background: var(--wk-soft); color: var(--wk-ink);
  font: inherit; font-size: 0.95rem;
}
.wk-search input::placeholder { color: var(--wk-muted); }
.wk-search input:focus { outline: none; border-color: var(--wk-focus); box-shadow: 0 0 0 3px color-mix(in srgb, var(--wk-focus) 25%, transparent); background: var(--wk-vlak); }
.wk-search-icon { position: absolute; left: 11px; top: 21px; transform: translateY(-50%); color: var(--wk-muted); display: flex; pointer-events: none; }
.wk-bar .wk-search input { border-radius: 999px; border-color: rgba(255, 255, 255, 0.2); background: rgba(255, 255, 255, 0.1); color: #ffffff; height: 44px; }
.wk-bar .wk-search input::placeholder { color: #b5c0dc; }
.wk-bar .wk-search-icon { color: #ffffff; top: 23px; left: 13px; z-index: 3; }
/* in de balk: rond zoekknopje dat bij klikken uitklapt (de balk blijft rustig) */
.wk-bar .wk-search { width: 46px; height: 46px; flex: none; }
.wk-bar .wk-search input { width: 46px; height: 46px; padding: 0 0 0 44px; cursor: pointer; transition: width 0.2s ease; }
.wk-bar .wk-search input::placeholder { color: transparent; }
.wk-bar .wk-search:focus-within input { position: absolute; right: 0; top: 0; z-index: 2; width: min(320px, 70vw); cursor: text; }
.wk-bar .wk-search:focus-within input::placeholder { color: #68718a; }
.wk-bar .wk-search:focus-within .wk-search-icon { color: #0c1f4f; left: auto; right: calc(min(320px, 70vw) - 32px); }
.wk-bar .wk-search input:focus { background: #ffffff; color: #0c1f4f; border-color: #ffffff; }
.wk-search.is-large { width: 100%; max-width: 680px; }
.wk-search.is-large input {
  height: 64px; padding-left: 56px; border: 1.5px solid var(--wk-line); border-radius: 14px; background: var(--wk-vlak);
  font-size: 1.1rem; box-shadow: var(--wk-shadow);
}
.wk-search.is-large .wk-search-icon { left: 20px; top: 32px; color: var(--wk-ink); }
.wk-results {
  position: absolute; left: 0; right: 0; top: calc(100% + 8px); z-index: 30; min-width: 320px;
  max-height: min(68vh, 560px); overflow: auto; overscroll-behavior: contain; padding: 6px;
  background: var(--wk-vlak); border: 1px solid var(--wk-line); border-radius: 14px; box-shadow: var(--wk-shadow);
}
.wk-hdr .wk-results { left: auto; width: 420px; }
.wk-results a { display: block; padding: 10px 12px; border-radius: 10px; color: var(--wk-ink); text-decoration: none; }
.wk-results a:hover, .wk-results a.is-active { background: var(--wk-soft); }
.wk-results strong { display: block; font-weight: 600; }
.wk-results span { display: block; color: var(--wk-muted); font-size: 0.92rem; line-height: 1.45; }
.wk-results mark { background: var(--wk-mark); color: inherit; border-radius: 3px; padding: 0 1px; }
.wk-results p { margin: 10px 12px; color: var(--wk-muted); }

/* ---------- hero (home, 404, onderhoud): op de lucht, met de grote propeller rechts uit beeld (zoals windkracht.nl) ---------- */
.wk-hero { position: relative; z-index: 2; }
/* de propeller wordt in zijn eigen laag bijgesneden, zodat de zoekresultaten onder de hero uit mogen vallen */
.wk-prop-clip { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.wk-prop { position: absolute; pointer-events: none; }
.wk-prop svg { display: block; width: 100%; height: auto; overflow: visible; }
.wk-prop-c { fill: var(--wk-prop-c); stroke: var(--wk-prop-ring); stroke-width: 1.5; }
.wk-prop-a rect { fill: var(--wk-orange); }
.wk-prop--hero { right: -140px; top: 50%; width: min(640px, 50vw); transform: translateY(-46%); }
.wk-prop--hero .wk-prop-a { transform-origin: 0 0; }
/* draait één keer bij het laden (site.js zet .is-go; niet bij minder beweging) */
.wk-prop.is-go .wk-prop-a { animation: wk-draai 2.2s cubic-bezier(.15, .75, .25, 1) both; }
@keyframes wk-draai { from { transform: rotate(-240deg); } to { transform: rotate(0); } }
.wk-notfound .wk-prop--hero { width: min(480px, 40vw); right: -120px; }
.wk-hero-inner { position: relative; padding-top: clamp(56px, 8vw, 104px); padding-bottom: clamp(64px, 8vw, 112px); max-width: var(--wk-wrap); }
.wk-hero-inner > * { max-width: 640px; }
.wk-hero h1 { margin: 0 0 14px; font-size: clamp(2.6rem, 5.4vw, 4.9rem); line-height: 0.98; letter-spacing: -0.045em; color: var(--wk-blue); }
html.wk-dark .wk-hero h1 { color: var(--wk-ink); }
.wk-lead { margin: 0 0 28px; max-width: 54ch; color: var(--wk-muted); font-size: 1.2rem; line-height: 1.55; }
.wk-code { margin: 0 0 6px; font-family: var(--wk-titel); font-size: clamp(4rem, 12vw, 8rem); font-weight: 850; font-stretch: 108%; line-height: 0.9; color: var(--wk-accent); letter-spacing: -0.05em; }
.wk-notfound h1 { max-width: 16ch; font-size: clamp(2.2rem, 4.6vw, 3.6rem); }
.wk-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin: 28px 0 0; }

/* ---------- banden op de homepage ---------- */
.wk-band { padding: clamp(56px, 7vw, 96px) 0; }
.wk-band--soft { background: var(--wk-vlak); border-top: 1px solid var(--wk-line); border-bottom: 1px solid var(--wk-line); }
.wk-band-title { margin: 0 0 28px; font-size: clamp(1.9rem, 3.6vw, 3rem); letter-spacing: -0.035em; line-height: 1.02; }
.wk-band .wk-kicker + .wk-band-title { margin-top: 0; }
.wk-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr); gap: 32px 56px; align-items: start; }
.wk-split-head p { margin: 0; color: var(--wk-muted); max-width: 34ch; }

/* klein teken voor elk artikel: de wieken van de propeller; draaien een zesde slag bij hover */
.wk-mini { display: inline-block; flex: none; width: 18px; height: 18px; margin-top: 0.2em; color: var(--wk-accent); }
.wk-mini svg { display: block; width: 100%; height: 100%; }
.wk-mini .wk-prop-a { transition: transform 0.35s cubic-bezier(.2, .8, .3, 1); }
.wk-mini .wk-prop-a rect { fill: currentColor; }
.wk-row:hover .wk-mini .wk-prop-a, .wk-row:focus-visible .wk-mini .wk-prop-a { transform: rotate(60deg); }
.wk-row:hover .wk-mini { color: var(--wk-orange); }

/* onderwerpen: witte kaarten met 12 px hoeken en een dunne lijn (zoals de kaarten op windkracht.nl) */
.wk-topics { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.wk-topic {
  display: flex; gap: 16px; height: 100%; padding: 24px 22px 24px; color: var(--wk-ink); text-decoration: none;
  background: var(--wk-vlak); border: 1px solid var(--wk-line); border-radius: 12px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.wk-topic:hover { border-color: var(--wk-ink); box-shadow: 0 18px 40px -28px rgba(12, 31, 79, 0.45); }
.wk-topic:hover .wk-topic-title { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.2em; }
.wk-tile {
  display: inline-grid; place-items: center; flex: none; width: 46px; height: 46px; border-radius: 50%;
  background: var(--wk-tile-bg); color: var(--wk-tile-fg);
}
.wk-topic-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.wk-topic-title { font-family: var(--wk-titel); font-stretch: 108%; font-weight: 800; font-size: 1.15rem; letter-spacing: -0.015em; line-height: 1.25; }
.wk-topic-text { color: var(--wk-muted); font-size: 0.97rem; line-height: 1.5; }
.wk-topic-count { margin-top: auto; padding-top: 8px; color: var(--wk-accent); font-size: 0.88rem; font-weight: 600; }

/* Collecties: de onderwerpen over collecties samen in één blok, altijd opengeklapt; de kop linkt naar de uitleg */
.wk-coll { margin: 16px 0; padding: 22px; background: var(--wk-soft); border: 1px solid var(--wk-line); border-radius: 16px; }
.wk-coll-head { display: flex; gap: 16px; align-items: flex-start; margin: 0 0 18px; padding: 4px 4px 0; color: var(--wk-ink); text-decoration: none; }
.wk-coll-head .wk-tile { background: var(--wk-orange); color: #ffffff; }
.wk-coll-title { font-family: var(--wk-titel); font-stretch: 108%; font-weight: 850; font-size: 1.55rem; letter-spacing: -0.03em; line-height: 1.1; }
.wk-coll-head .wk-topic-text { max-width: 70ch; }
.wk-coll-more { margin-top: 4px; color: var(--wk-link); font-weight: 600; }
.wk-coll-head:hover .wk-coll-more, .wk-coll-head:focus-visible .wk-coll-more { text-decoration: underline; text-underline-offset: 0.2em; }
.wk-coll-head:hover .wk-coll-more span { color: var(--wk-orange); }
.wk-topics--coll { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.wk-topics--coll .wk-topic { padding: 18px 16px; gap: 12px; }
.wk-topics--coll .wk-tile { width: 38px; height: 38px; }
.wk-topics--coll .wk-tile svg { width: 19px; height: 19px; }
.wk-topics--coll .wk-topic-title { font-size: 1.05rem; }
.wk-topics--coll .wk-topic-text { font-size: 0.92rem; }
/* pagina Collecties: per collectie de artikelen */
.wk-topics--list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-bottom: 40px; }
.wk-topic--static:hover { border-color: var(--wk-line); box-shadow: none; }
.wk-topic--static .wk-topic-title { color: var(--wk-ink); text-decoration: none; }
.wk-topic--static .wk-topic-title:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.wk-topic-links { list-style: none; margin: 8px 0 0; padding: 0; font-size: 0.95rem; }
.wk-topic-links li { margin: 0 0 4px; line-height: 1.4; }
.wk-sub-h { margin: 40px 0 16px; font-size: 1.5rem; }
/* Handleidingen: Collecties over de volle breedte met de collecties eronder */
.wk-group--coll { grid-column: 1 / -1; }
.wk-group-intro { margin: 0 0 6px; padding-left: 52px; color: var(--wk-muted); max-width: 80ch; }
.wk-index--sub { padding-left: 52px; }
.wk-index--sub .wk-group { padding: 16px 0 10px; }
.wk-index--sub .wk-group:first-child, .wk-index--sub .wk-group:nth-child(2) { border-top: 0; }
/* zijkolom: Collecties met de collecties eronder */
.wk-side > ul > li.wk-side-group > a { font-weight: 600; }
.wk-side li.wk-side-group > ul { margin: 2px 0 10px 10px; border-left: 2px solid var(--wk-line); }
.wk-side li.wk-side-group > ul > li > a { display: block; padding: 5px 10px 5px 14px; margin-left: -2px; border-left: 2px solid transparent; color: var(--wk-ink); text-decoration: none; }
.wk-side li.wk-side-group > ul > li > a:hover { background: var(--wk-vlak); }
.wk-side li.wk-side-group > ul > li.is-open > a { font-weight: 600; border-left-color: var(--wk-accent); }
.wk-side li.wk-side-group li ul { margin-left: 14px; }

/* rijen met artikelen */
.wk-rows { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--wk-line); }
.wk-rows li { border-bottom: 1px solid var(--wk-line); }
.wk-rows--grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; border-top: 0; }
.wk-rows--grid li:nth-child(-n + 2) { border-top: 1px solid var(--wk-line); }
.wk-row { display: flex; gap: 16px; padding: 18px 4px 20px; color: var(--wk-ink); text-decoration: none; }
.wk-row-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.wk-row-title { font-family: var(--wk-titel); font-stretch: 108%; font-weight: 750; font-size: 1.08rem; letter-spacing: -0.01em; line-height: 1.3; }
.wk-row-topic { color: var(--wk-accent); font-size: 0.86rem; font-weight: 600; }
.wk-row-text { color: var(--wk-muted); font-size: 0.97rem; line-height: 1.5; }
.wk-row:hover .wk-row-title { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.2em; }

/* afsluiter onderaan: oranje met donkerblauwe knop en een vage propeller, zoals op windkracht.nl */
.wk-cta { position: relative; overflow: hidden; background: linear-gradient(135deg, #f27a12 0%, #e46200 60%, #d85a00 100%); color: #0c1f4f; }
.wk-cta-inner { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 40px; padding-top: clamp(56px, 7vw, 88px); padding-bottom: clamp(56px, 7vw, 88px); }
.wk-cta h2 { margin: 0 0 8px; color: #ffffff; font-size: clamp(2rem, 4.4vw, 3.4rem); letter-spacing: -0.045em; line-height: 1; text-shadow: 0 2px 0 rgba(120, 45, 0, 0.18); }
.wk-cta p { margin: 0; color: #0c1f4f; font-weight: 600; font-size: 1.1rem; }
.wk-cta .wk-btn { min-height: 58px; padding: 0 30px; font-size: 18px; background: #0c1f4f; border-color: #0c1f4f; color: #ffffff; }
.wk-cta .wk-btn:hover { background: #050d26; border-color: #050d26; color: #ffffff; }
.wk-cta-prop { position: absolute; right: -120px; top: 50%; width: min(460px, 56vw); transform: translateY(-50%); pointer-events: none; opacity: 0.22; }
.wk-cta-prop svg { display: block; width: 100%; height: auto; }
.wk-cta-prop .wk-prop-c { fill: none; stroke: #ffffff; stroke-width: 3; }
.wk-cta-prop .wk-prop-a rect { fill: #0c1f4f; }

/* ---------- pagina's ---------- */
.wk-crumbs { max-width: var(--wk-wrap); margin: 0 auto; padding: 22px var(--wk-gutter) 0; font-size: 0.92rem; color: var(--wk-muted); display: flex; flex-wrap: wrap; gap: 8px; }
.wk-crumbs a { color: var(--wk-muted); text-decoration: none; }
.wk-crumbs a:hover { color: var(--wk-ink); text-decoration: underline; }
.wk-pagehead { padding: clamp(36px, 6vw, 64px) 0 28px; }
.wk-pagehead h1 { margin: 0 0 12px; font-size: clamp(2.2rem, 4.8vw, 3.6rem); }
.wk-pagehead .wk-lead { margin-bottom: 0; }
.wk-pagehead .wk-search { margin-top: 28px; }
.is-read .wk-pagehead { padding-top: 6px; }
.is-page main > .wk-wrap { padding-bottom: clamp(56px, 8vw, 96px); }

/* artikel en onderwerp: zijkolom + leeskolom */
.wk-read { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 56px; padding-top: 28px; padding-bottom: clamp(56px, 8vw, 96px); }
.wk-read-main { grid-column: 2; grid-row: 1; max-width: 760px; min-width: 0; }
.wk-side { grid-column: 1; grid-row: 1; position: sticky; top: 96px; align-self: start; max-height: calc(100vh - 110px); overflow: auto; padding-right: 6px; font-size: 0.95rem; }
.wk-side-title { margin: 6px 0 10px; color: var(--wk-muted); font-size: 0.86rem; font-weight: 600; }
.wk-side ul { list-style: none; margin: 0; padding: 0; }
.wk-side > ul > li > a { display: block; padding: 5px 10px; border-radius: 8px; color: var(--wk-ink); text-decoration: none; }
.wk-side > ul > li > a:hover { background: var(--wk-vlak); }
.wk-side li.is-open > a { font-weight: 600; }
.wk-side li ul { margin: 2px 0 10px 10px; border-left: 2px solid var(--wk-line); }
.wk-side li ul a { display: block; padding: 5px 10px 5px 14px; margin-left: -2px; border-left: 2px solid transparent; color: var(--wk-muted); text-decoration: none; line-height: 1.4; }
.wk-side li ul a:hover { color: var(--wk-ink); }
.wk-side a[aria-current='page'] { color: var(--wk-ink); font-weight: 600; }
.wk-side li ul a[aria-current='page'] { border-left-color: var(--wk-accent); }

.wk-article h1 { margin: 6px 0 14px; font-size: clamp(2rem, 4vw, 3rem); }
.wk-intro { margin: 0 0 32px; color: var(--wk-muted); font-size: 1.2rem; line-height: 1.55; max-width: 60ch; }
.wk-text { max-width: 68ch; }
.wk-text h2 { margin: 2em 0 0.55em; font-size: 1.5rem; letter-spacing: -0.03em; }
.wk-text h2:first-child { margin-top: 0.4em; }
.wk-text h3 { margin: 1.8em 0 0.5em; font-size: 1.15rem; }
.wk-text p { margin: 0 0 1em; }
.wk-text strong { font-weight: 640; }
.wk-text ul { margin: 0 0 1.2em; padding: 0; list-style: none; }
.wk-text ul > li { position: relative; padding-left: 24px; margin: 0 0 0.55em; }
.wk-text ul > li::before { content: ''; position: absolute; left: 2px; top: 0.78em; width: 11px; height: 3px; border-radius: 3px; background: var(--wk-accent); }
/* genummerde stappen: echte volgorde */
.wk-text ol { margin: 0 0 1.4em; padding: 0; list-style: none; counter-reset: stap; }
.wk-text ol > li { position: relative; counter-increment: stap; padding: 0 0 0 46px; margin: 0 0 0.85em; min-height: 30px; }
.wk-text ol > li::before {
  content: counter(stap); position: absolute; left: 0; top: -1px;
  width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center;
  background: var(--wk-tile-bg); color: var(--wk-tile-fg); font-family: var(--wk-titel); font-size: 0.9rem; font-weight: 800; font-stretch: 108%;
}
.wk-text ol > li > ul, .wk-text ol > li > ol { margin-top: 0.6em; }
.wk-text blockquote { margin: 1.6em 0; padding: 16px 20px; background: var(--wk-mint); border-left: 4px solid var(--wk-accent); border-radius: 0 14px 14px 0; }
.wk-text blockquote p:last-child { margin-bottom: 0; }
.wk-text code, .wk-text kbd { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.9em; padding: 1px 6px; border-radius: 6px; background: var(--wk-soft); border: 1px solid var(--wk-line); }
.wk-text table { width: 100%; border-collapse: collapse; margin: 0 0 1.4em; font-size: 0.97rem; }
.wk-text th, .wk-text td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--wk-line); vertical-align: top; }
.wk-text img { border-radius: 12px; border: 1px solid var(--wk-line); }

/* hulpblok */
.wk-help { display: flex; gap: 18px; margin-top: 48px; padding: 26px; border: 1px solid var(--wk-line); border-radius: 12px; background: var(--wk-vlak); }
.wk-help h2 { margin: 2px 0 6px; font-size: 1.4rem; letter-spacing: -0.03em; }
.wk-help p { margin: 0 0 12px; color: var(--wk-muted); }
.wk-help-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; margin: 16px 0 0 !important; }

/* handleidingen: inhoudsopgave */
.wk-index { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 8px 40px; }
.wk-group { padding: 22px 0 18px; border-top: 1px solid var(--wk-line); }
.wk-group h2 { display: flex; align-items: center; gap: 14px; margin: 0 0 12px; font-size: 1.2rem; }
.wk-group h2 .wk-tile { width: 38px; height: 38px; }
.wk-group h2 .wk-tile svg { width: 19px; height: 19px; }
.wk-group h2 a { color: var(--wk-ink); text-decoration: none; }
.wk-group h2 a:hover { text-decoration: underline; }
.wk-group ul { list-style: none; margin: 0; padding: 0 0 0 52px; }
.wk-group li { margin: 0 0 7px; line-height: 1.4; }

/* veelgestelde vragen */
.wk-faq { border-top: 1px solid var(--wk-line); }
.wk-faq details { border-bottom: 1px solid var(--wk-line); }
.wk-faq summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: flex-start; gap: 20px;
  padding: 20px 4px; font-family: var(--wk-titel); font-stretch: 108%; font-weight: 750; font-size: 1.1rem; letter-spacing: -0.01em; line-height: 1.35;
}
.wk-faq summary::-webkit-details-marker { display: none; }
.wk-faq summary::after {
  content: ''; flex: none; width: 14px; height: 14px; margin-top: 6px;
  background:
    linear-gradient(currentColor, currentColor) center / 14px 2px no-repeat,
    linear-gradient(currentColor, currentColor) center / 2px 14px no-repeat;
  transition: transform 0.2s ease;
}
.wk-faq details[open] summary::after { transform: rotate(45deg); }
.wk-faq summary:hover { color: var(--wk-link); }
.wk-answer { padding: 0 40px 18px 4px; color: var(--wk-ink); max-width: 68ch; }
.wk-answer p { margin: 0 0 0.8em; }

/* contact en formulier */
.wk-two { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 48px; align-items: start; }
.wk-aside { padding: 26px; border-radius: 12px; background: var(--wk-vlak); border: 1px solid var(--wk-line); }
.wk-aside h2 { margin: 0 0 8px; font-size: 1.2rem; }
.wk-aside h2 + p { margin-top: 0; }
.wk-aside p { color: var(--wk-ink); }
.wk-aside p + h2 { margin-top: 26px; }
.wk-maillink { font-weight: 600; font-size: 1.08rem; }
.wk-form h2 { margin: 0 0 8px; font-size: 1.45rem; }
.wk-form-intro { margin: 0 0 22px; color: var(--wk-muted); }
.wk-field { margin: 0 0 18px; }
.wk-field label { display: block; margin: 0 0 6px; font-weight: 600; }
.wk-req { color: var(--wk-accent); }
.wk-field input, .wk-field select, .wk-field textarea {
  width: 100%; min-height: 48px; padding: 11px 14px;
  border: 1px solid var(--wk-line-strong); border-radius: 10px; background: var(--wk-vlak); color: var(--wk-ink); font: inherit;
}
.wk-field textarea { resize: vertical; min-height: 150px; }
.wk-field input:focus, .wk-field select:focus, .wk-field textarea:focus { outline: none; border-color: var(--wk-focus); box-shadow: 0 0 0 3px color-mix(in srgb, var(--wk-focus) 25%, transparent); }
.wk-field [aria-invalid='true'] { border-color: var(--wk-error); }
.wk-check { display: flex; gap: 10px; align-items: flex-start; }
.wk-check input { width: 20px; min-height: 20px; height: 20px; margin-top: 3px; accent-color: var(--wk-blue); }
.wk-check label { font-weight: 400; }
.wk-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.wk-status { margin: 14px 0 0; font-weight: 600; }
.wk-status.is-ok { color: var(--wk-ok); }
.wk-status.is-error { color: var(--wk-error); }

/* ---------- footer ---------- */
.wk-foot { background: var(--wk-foot-bg); color: var(--wk-foot-ink); padding-top: 64px; font-size: 0.97rem; }
.wk-foot a { color: #ffffff; text-decoration: none; }
.wk-foot a:hover { text-decoration: underline; }
.wk-foot-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 32px 48px; padding-bottom: 40px; }
.wk-foot-brand img { width: 220px; display: block; margin-bottom: 16px; }
.wk-foot-brand p { margin: 0; max-width: 36ch; }
.wk-foot-grid nav, .wk-foot-grid > div:last-child { display: flex; flex-direction: column; gap: 8px; }
.wk-foot-title { margin: 0 0 6px; color: #90a2d1; font-weight: 600; }
.wk-foot-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding-top: 20px; padding-bottom: 28px; border-top: 1px solid rgba(255, 255, 255, 0.12); font-size: 0.9rem; }
.wk-foot-bottom a { text-decoration: underline; text-underline-offset: 0.18em; }

/* ---------- smaller ---------- */
@media (max-width: 1180px) {
  .wk-bar { gap: 12px; }
  .wk-nav a { padding: 0 9px; }
  .wk-nav a::after { left: 9px; right: 9px; }
  .wk-brand img { width: 170px; }
  /* Inloggen als rond slotje, zodat de balk niet te vol wordt */
  .wk-login { width: 46px; padding: 0; justify-content: center; }
  .wk-login span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (max-width: 980px) {
  .wk-topics--coll { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wk-index--sub, .wk-group-intro { padding-left: 0; }
  .wk-nav, .wk-hdr .wk-bar .wk-search, .wk-login, .wk-bar .wk-iconbtn[data-theme-toggle], .wk-bar .wk-langbtn { display: none; }
  .wk-menubtn { display: inline-grid; }
  .wk-mnav:not([hidden]) {
    display: flex; flex-direction: column; gap: 2px;
    position: fixed; left: 12px; right: 12px; top: var(--mnav-top, 76px); z-index: 50;
    max-height: calc(100vh - var(--mnav-top, 76px) - 12px); overflow: auto;
    padding: 14px; background: var(--wk-bg); border: 1px solid var(--wk-line); border-radius: 16px; box-shadow: var(--wk-shadow);
  }
  .wk-mnav > a, .wk-thememenu { display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: 10px; color: var(--wk-ink); text-decoration: none; font: inherit; font-weight: 500; }
  .wk-mnav > a:hover, .wk-thememenu:hover { background: var(--wk-soft); }
  .wk-mnav > a[aria-current='page'] { background: var(--wk-mint); font-weight: 600; }
  .wk-thememenu { border: 0; background: none; cursor: pointer; text-align: left; }
  .wk-mnav .wk-search { width: 100%; margin-bottom: 8px; }
  .wk-mnav .wk-results { position: static; min-width: 0; width: auto; margin-top: 6px; box-shadow: none; }
  html.wk-menu-open { overflow: hidden; }
  .wk-topics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wk-split { grid-template-columns: 1fr; }
  .wk-read { grid-template-columns: 1fr; gap: 0; }
  .wk-read-main, .wk-side { grid-column: 1; grid-row: auto; }
  .wk-side { position: static; max-height: none; margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--wk-line); }
  .wk-two { grid-template-columns: 1fr; }
  .wk-prop--hero, .wk-notfound .wk-prop--hero { top: auto; bottom: -90px; right: -90px; width: 240px; transform: none; }
  .wk-hero-inner { padding-bottom: 200px; }
  .wk-cta-prop { display: none; }
}
@media (max-width: 680px) {
  .wk-topics--coll, .wk-topics--list { grid-template-columns: 1fr; }
  .wk-coll { padding: 16px; margin: 12px -4px; }
  body { font-size: 1rem; }
  .wk-hdr { padding: 10px 10px 0; }
  .wk-bar, .wk-hdr.is-scrolled .wk-bar { gap: 10px; padding: 8px 8px 8px 18px; }
  .wk-hdr.is-scrolled .wk-brand img { width: 118px; }
  .wk-iconbtn, .wk-hdr.is-scrolled .wk-iconbtn { width: 46px; height: 46px; }
  .wk-lucht { height: 560px; background-size: 100% 100%, 1680px 560px; }
  .wk-prop--hero, .wk-notfound .wk-prop--hero { bottom: -50px; right: -70px; width: 190px; }
  .wk-hero-inner { padding-bottom: 150px; }
  .wk-brand img { width: 118px; transform: translateY(-16%); }
  .wk-brand-label { padding-left: 10px; font-size: 0.98rem; }
  .wk-topics, .wk-rows--grid { grid-template-columns: 1fr; }
  .wk-rows--grid li:nth-child(2) { border-top: 0; }
  .wk-topic { padding: 20px 18px; }
  .wk-search.is-large input { height: 56px; font-size: 1rem; padding-left: 48px; }
  .wk-search.is-large .wk-search-icon { left: 16px; top: 28px; }
  .wk-help { flex-direction: column; padding: 20px; }
  .wk-foot-grid { grid-template-columns: 1fr; }
  .wk-text ol > li { padding-left: 42px; }
  .wk-answer { padding-right: 4px; }
  .wk-group ul { padding-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  html { scroll-behavior: auto; }
}
@media print {
  .wk-hdr, .wk-foot, .wk-side, .wk-help, .wk-crumbs, .wk-cta { display: none !important; }
  .wk-read { display: block; }
}

/* Windkracht-vermelding: bescheiden pil rechtsonder (op mobiel gecentreerd); docs/designpakket.md → Windkracht-vermelding.
   Kleur van de Windkracht-wieken: wit #FFFFFF, zwart #111111, oranje #FF7A00 of blauw #0F1F4D (hier oranje op de blauwe footer) */
:root { --wk-wieken: #FF7A00; }
.wk-credit { display: inline-flex; align-items: center; gap: 9px; padding: 3px 12px; border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 999px; font-size: 0.8rem; line-height: 1.6; }
.wk-regel { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.wk-icoon { width: 0.85rem; height: 0.85rem; flex: none; color: var(--wk-wieken); transition: transform 0.3s; }
.wk-credit:hover .wk-icoon { transform: rotate(90deg); }
.wk-foot-bottom .wk-regel a { color: #ffffff; font-weight: 700; text-decoration: none; }
.wk-foot-bottom .wk-regel a:hover { text-decoration: underline; }
.wk-foot-bottom a.wk-login-mini { display: inline-flex; align-items: center; gap: 5px; padding-left: 9px; border-left: 1px solid rgba(255, 255, 255, 0.2); color: var(--wk-foot-ink); text-decoration: none; }
.wk-foot-bottom a.wk-login-mini:hover { color: #ffffff; text-decoration: underline; }
@media (prefers-reduced-motion: reduce) { .wk-icoon { transition: none; } .wk-credit:hover .wk-icoon { transform: none; } }
@media (max-width: 680px) { .wk-foot-bottom { flex-direction: column; align-items: center; text-align: center; } }