/* ==========================================================================
   CAYWEB STIJL v1.3
   De cw-klassen voor tekst en knoppen winnen altijd van Elementor (!important).
   Gebruik: in Elementor → widget of container → Geavanceerd → CSS-klassen.
   Alle klassen beginnen met "cw-". Overzicht: zie LEESMIJ.md.
   ========================================================================== */

/* ---------- 0. Lettertypes (lokaal gehost, geen Google) ---------- */
@font-face { font-family: 'N27'; src: url('fonts/n27-regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'N27'; src: url('fonts/n27-medium.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'N27'; src: url('fonts/n27-bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Space Grotesk'; src: url('fonts/spacegrotesk.woff2') format('woff2'); font-weight: 300 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Space Mono'; src: url('fonts/spacemono-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Space Mono'; src: url('fonts/spacemono-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Caveat'; src: url('fonts/caveat.woff2') format('woff2'); font-weight: 400 700; font-style: normal; font-display: swap; }

/* ---------- 1. Variabelen ---------- */
:root {
  --cw-zwart: #0A0A0A;
  --cw-creme: #FAF5EB;
  --cw-lime: #CAEB47;
  --cw-rood: #DD4238;
  --cw-donkerrood: #B8352C;
  --cw-zand: #F1EADC;
  --cw-wit: #FFFFFF;
  --cw-oranje: #F2B33D;
  --cw-grafiet: #141412;
  --cw-kool: #24231F;
  --cw-rand-donker: #34322D;
  --cw-steen: #4A4740;
  --cw-gedempt: #8E8A80;
  --cw-zilver: #B9B4A9;
  --cw-parel: #D9D4CA;
  --cw-lijn: #D8D0BF;

  --cw-font: 'N27', 'Space Grotesk', system-ui, sans-serif;
  --cw-mono: 'Space Mono', ui-monospace, monospace;
  --cw-stift: 'Caveat', cursive;

  --cw-max: 1280px;
  --cw-gutter: clamp(20px, 4vw, 48px);
  --cw-sectie: clamp(72px, 9vw, 120px);
  --cw-rand: 2px solid var(--cw-zwart);
  --cw-ease: cubic-bezier(.2, .8, .2, 1);
}

/* ---------- 2. Basis ---------- */
.cw-root, body.cw-site { font-family: var(--cw-font); color: var(--cw-zwart); }
html { scroll-behavior: smooth; }

/* ---------- 3. Secties en achtergronden (op een container) ---------- */
.cw-sectie { padding-top: var(--cw-sectie) !important; padding-bottom: var(--cw-sectie) !important; }
.cw-bg-zwart { background-color: var(--cw-zwart) !important; color: var(--cw-creme); }
.cw-bg-creme { background-color: var(--cw-creme) !important; color: var(--cw-zwart); }
.cw-bg-zand  { background-color: var(--cw-zand) !important; color: var(--cw-zwart); }
.cw-bg-lime  { background-color: var(--cw-lime) !important; color: var(--cw-zwart); }
.cw-bg-rood  { background-color: var(--cw-rood) !important; color: var(--cw-zwart); }
.cw-raster {
  background-color: var(--cw-zwart) !important;
  background-image: linear-gradient(#1A1916 1px, transparent 1px), linear-gradient(90deg, #1A1916 1px, transparent 1px) !important;
  background-size: 48px 48px !important;
  color: var(--cw-creme);
}
.cw-rand-boven { border-top: var(--cw-rand) !important; }
.cw-rand-onder { border-bottom: var(--cw-rand) !important; }

/* Signalisatieband: lege container of divider met deze klasse */
.cw-strepen {
  height: 16px; min-height: 16px !important; padding: 0 !important;
  background: repeating-linear-gradient(-45deg, var(--cw-lime) 0 16px, var(--cw-zwart) 16px 32px) !important;
  background-size: 45.25px 45.25px !important;
  animation: cwStripe 1.8s linear infinite;
}
.cw-strepen--rood { background: repeating-linear-gradient(-45deg, var(--cw-rood) 0 16px, var(--cw-zwart) 16px 32px) !important; background-size: 45.25px 45.25px !important; }

/* Tekst op donkere achtergrond automatisch licht */
.cw-bg-zwart .elementor-heading-title, .cw-raster .elementor-heading-title,
.cw-bg-zwart .elementor-widget-text-editor, .cw-raster .elementor-widget-text-editor,
.cw-kaart--donker .elementor-heading-title, .cw-kaart--donker .elementor-widget-text-editor { color: var(--cw-creme) !important; }
.cw-bg-creme .elementor-heading-title, .cw-bg-zand .elementor-heading-title, .cw-bg-lime .elementor-heading-title, .cw-bg-rood .elementor-heading-title,
.cw-kaart .elementor-heading-title { color: var(--cw-zwart) !important; }
.cw-kaart--donker .elementor-heading-title { color: var(--cw-creme) !important; }
.cw-bg-zwart .cw-zacht, .cw-raster .cw-zacht { color: var(--cw-parel) !important; }

/* ---------- 4. Typografie (op Heading- of Text-widget) ---------- */
.cw-h1 .elementor-heading-title, h1.cw-h1 { font-family: var(--cw-font) !important; font-weight: 700 !important; font-size: clamp(44px, 6.4vw, 96px) !important; line-height: .94 !important; letter-spacing: -0.045em !important; }
.cw-h1-home .elementor-heading-title { font-family: var(--cw-font) !important; font-weight: 700 !important; font-size: clamp(38px, 5.2vw, 84px) !important; line-height: .95 !important; letter-spacing: -0.045em !important; }
.cw-h1-xl .elementor-heading-title { font-family: var(--cw-font) !important; font-weight: 700 !important; font-size: clamp(56px, 9vw, 140px) !important; line-height: .9 !important; letter-spacing: -0.05em !important; }
.cw-h2 .elementor-heading-title, h2.cw-h2 { font-family: var(--cw-font) !important; font-weight: 700 !important; font-size: clamp(36px, 4.4vw, 60px) !important; line-height: 1 !important; letter-spacing: -0.035em !important; }
.cw-h2-groot .elementor-heading-title { font-family: var(--cw-font) !important; font-weight: 700 !important; font-size: clamp(44px, 6vw, 88px) !important; line-height: .95 !important; letter-spacing: -0.045em !important; }
.cw-h2-klein .elementor-heading-title { font-family: var(--cw-font) !important; font-weight: 700 !important; font-size: clamp(32px, 3.6vw, 48px) !important; line-height: 1 !important; letter-spacing: -0.03em !important; }
.cw-h3 .elementor-heading-title { font-family: var(--cw-font) !important; font-weight: 700 !important; font-size: 26px !important; line-height: 1.1 !important; letter-spacing: -0.02em !important; }
.cw-lead, .cw-lead p { font-size: clamp(18px, 1.6vw, 21px) !important; line-height: 1.55 !important; max-width: 660px !important; }
.cw-tekst, .cw-tekst p { font-size: 18px !important; line-height: 1.6 !important; }
.cw-klein, .cw-klein p { font-size: 15px !important; line-height: 1.5 !important; }
.cw-label .elementor-heading-title, .cw-label p, span.cw-label {
  font-family: var(--cw-mono) !important; font-weight: 700 !important; font-size: 13px !important; letter-spacing: .1em !important; text-transform: uppercase !important; line-height: 1.4 !important;
}
.cw-cijfer .elementor-heading-title, .cw-cijfer .elementor-counter-number-wrapper, .cw-cijfer p {
  font-family: var(--cw-mono) !important; font-weight: 700 !important; font-size: clamp(44px, 5vw, 72px) !important; line-height: 1 !important; letter-spacing: -0.04em !important; font-variant-numeric: tabular-nums !important;
}
.cw-cijfer-m .elementor-heading-title, .cw-cijfer-m .elementor-counter-number-wrapper { font-family: var(--cw-mono) !important; font-weight: 700 !important; font-size: 38px !important; line-height: 1.1 !important; letter-spacing: -0.03em !important; }
.cw-mono, .cw-mono p, .cw-mono .elementor-heading-title { font-family: var(--cw-mono) !important; }

/* Accenten in tekst (gebruik een <span class="..."> in de teksteditor of kop) */
.cw-lime-tekst { color: var(--cw-lime) !important; }
.cw-rood-tekst { color: var(--cw-rood) !important; }
.cw-punt::after { content: "."; color: var(--cw-rood) !important; }
.cw-vraag::after { content: "?"; color: var(--cw-rood) !important; }
.cw-markeer { background: linear-gradient(transparent 58%, var(--cw-lime) 58%, var(--cw-lime) 92%, transparent 92%) !important; padding: 0 4px !important; }
.cw-doorstreept { position: relative !important; color: #9C978C !important; }
.cw-doorstreept::after { content: ""; position: absolute !important; left: -3px !important; right: -3px !important; top: 54% !important; height: 4px !important; background: var(--cw-rood) !important; transform-origin: left center !important; animation: cwStrike .6s cubic-bezier(.6,0,.2,1) .8s both !important; }

/* De rode stift (handschrift) */
.cw-stift .elementor-heading-title, .cw-stift p, span.cw-stift {
  font-family: var(--cw-stift) !important; font-weight: 700 !important; font-size: clamp(26px, 2.6vw, 36px) !important; line-height: 1 !important; color: var(--cw-rood) !important; letter-spacing: 0 !important;
}
.cw-stift .elementor-heading-title, span.cw-stift { display: inline-block !important; transform: rotate(-4deg) !important; }
.cw-stift--donker .elementor-heading-title, .cw-stift--donker p { color: var(--cw-donkerrood) !important; }
.cw-stift--lime .elementor-heading-title, .cw-stift--lime p { color: var(--cw-lime) !important; }
.cw-handtekening .elementor-heading-title { font-family: var(--cw-stift) !important; font-weight: 700 !important; font-size: 52px !important; line-height: .8 !important; }

/* Handgetekende cirkel rond een woord: <span class="cw-cirkel">woord</span> */
.cw-cirkel { position: relative !important; display: inline-block !important; white-space: nowrap !important; }
.cw-cirkel::after {
  content: ""; position: absolute !important; left: -5% !important; top: -16% !important; width: 110% !important; height: 132% !important; pointer-events: none !important;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 120' preserveAspectRatio='none'%3E%3Cpath d='M30 70 C 20 20, 180 6, 330 14 C 400 20, 405 80, 340 102 C 240 122, 70 118, 22 88 C 4 70, 40 34, 120 22' fill='none' stroke='%23DD4238' stroke-width='4' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") center / 100% 100% no-repeat !important;
}
/* Handgetekende onderlijn: <span class="cw-onderlijn">woord</span> */
.cw-onderlijn { position: relative !important; white-space: nowrap !important; }
.cw-onderlijn::after {
  content: ""; position: absolute !important; left: 0 !important; right: 0 !important; bottom: -8px !important; height: 12px !important; pointer-events: none !important;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14' preserveAspectRatio='none'%3E%3Cpath d='M3 9 C 40 3, 90 12, 130 6 S 185 4, 197 8' fill='none' stroke='%23DD4238' stroke-width='3.5' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") center / 100% 100% no-repeat !important;
}

/* ---------- 5. Knoppen (op Button-widget) ---------- */
.cw-btn .elementor-button, a.cw-btn {
  letter-spacing: 0 !important; text-transform: none !important; font-style: normal !important;
  font-family: var(--cw-font) !important; font-weight: 700 !important; font-size: 18px !important; line-height: 1.2 !important;
  padding: 18px 26px !important; border-radius: 0 !important; border: 2px solid var(--cw-lime) !important;
  background-color: var(--cw-lime) !important; color: var(--cw-zwart) !important;
  box-shadow: 6px 6px 0 var(--cw-rood) !important; transition: transform .25s var(--cw-ease), box-shadow .25s var(--cw-ease) !important;
}
.cw-btn .elementor-button:hover, a.cw-btn:hover { transform: translate(-3px, -3px) !important; box-shadow: 9px 9px 0 var(--cw-rood) !important; }
.cw-btn .elementor-button:focus-visible { outline: 3px solid var(--cw-rood) !important; outline-offset: 4px !important; }
.cw-btn--donker .elementor-button { background-color: var(--cw-zwart) !important; color: var(--cw-lime) !important; border-color: var(--cw-zwart) !important; }
.cw-btn--outline .elementor-button { background-color: transparent !important; color: var(--cw-creme) !important; border-color: var(--cw-creme) !important; box-shadow: none !important; font-weight: 500 !important; padding: 16px 24px !important; }
.cw-btn--outline .elementor-button:hover { box-shadow: none !important; transform: translate(-2px, -2px) !important; }
.cw-btn--klein .elementor-button { font-size: 16px !important; padding: 13px 20px !important; box-shadow: 4px 4px 0 var(--cw-rood) !important; }
.cw-btn--groot .elementor-button { font-size: 20px !important; padding: 22px 30px !important; box-shadow: 7px 7px 0 var(--cw-rood) !important; }
.cw-link a, a.cw-link { font-weight: 700 !important; color: inherit !important; text-decoration: underline !important; text-underline-offset: 5px !important; }

/* ---------- 6. Kaarten (op container) ---------- */
.cw-kaart { background: var(--cw-wit) !important; border: var(--cw-rand) !important; box-shadow: 6px 6px 0 var(--cw-zwart); padding: 22px; }
.cw-kaart--donker { background: var(--cw-grafiet) !important; border: 2px solid var(--cw-rand-donker) !important; color: var(--cw-creme); box-shadow: none; }
.cw-kaart--lime { background: var(--cw-lime) !important; box-shadow: 10px 10px 0 var(--cw-rood); }
.cw-kaart--rood { background: var(--cw-rood) !important; }
.cw-kaart--stippel { background: transparent !important; border-style: dashed !important; box-shadow: none; }
.cw-kaart-link { transition: transform .25s var(--cw-ease); }
.cw-kaart-link:hover { transform: translate(-3px, -3px); }

/* Harde schaduwen los te combineren */
.cw-schaduw-4  { box-shadow: 4px 4px 0 var(--cw-zwart) !important; }
.cw-schaduw-6  { box-shadow: 6px 6px 0 var(--cw-zwart) !important; }
.cw-schaduw-8  { box-shadow: 8px 8px 0 var(--cw-zwart) !important; }
.cw-schaduw-10 { box-shadow: 10px 10px 0 var(--cw-zwart) !important; }
.cw-schaduw-lime { box-shadow: 10px 10px 0 var(--cw-lime) !important; }
.cw-schaduw-rood { box-shadow: 10px 10px 0 var(--cw-rood) !important; }

/* Gedraaid (briefjes, bonnetjes, polaroids) */
.cw-scheef-l { transform: rotate(-1.5deg); }
.cw-scheef-r { transform: rotate(1.2deg); }
.cw-scheef-l2 { transform: rotate(-3deg); }
.cw-scheef-r2 { transform: rotate(2.5deg); }

/* Tape bovenop een kaart of foto */
.cw-tape { position: relative; overflow: visible !important; }
.cw-tape::before {
  content: ""; position: absolute; top: -14px; left: 50%; width: 110px; height: 28px; margin-left: -55px; z-index: 3;
  background: var(--cw-lime); opacity: .9; transform: rotate(-4deg); pointer-events: none;
}
.cw-tape--creme::before { background: var(--cw-creme); }

/* Polaroid (op een Image-widget) */
.cw-polaroid img { background: var(--cw-wit); padding: 12px 12px 48px; border: var(--cw-rand); box-shadow: 10px 10px 0 var(--cw-lime); }

/* Browserframe rond een screenshot (op Image-widget) */
.cw-browser .elementor-widget-container { border: 2px solid var(--cw-creme); background: #1A1917; box-shadow: 12px 12px 0 var(--cw-lime); }
.cw-browser .elementor-widget-container::before { content: "● ● ●"; display: block; height: 34px; line-height: 34px; padding: 0 12px; background: var(--cw-kool); color: var(--cw-rood); font-size: 11px; letter-spacing: 3px; }
.cw-browser img { display: block; width: 100%; }

/* Bonnetje (op container, tekst in Space Mono) */
.cw-bon { background: var(--cw-wit) !important; font-family: var(--cw-mono); font-size: 14px; padding: 26px 24px 22px; position: relative; }
.cw-bon::after { content: ""; position: absolute; left: 0; right: 0; bottom: -12px; height: 12px; background: radial-gradient(circle at 8px 0, var(--cw-wit) 8px, transparent 8.5px) 0 0 / 16px 12px repeat-x; }
.cw-bon hr, .cw-bon .elementor-divider-separator { border-top: 1px dashed var(--cw-zwart) !important; }

/* Labels en badges (op Heading-widget of span) */
.cw-badge .elementor-heading-title, span.cw-badge {
  display: inline-block; font-family: var(--cw-mono); font-weight: 700; font-size: 13px; letter-spacing: .08em; text-transform: uppercase;
  padding: 8px 12px; background: var(--cw-lime); color: var(--cw-zwart);
}
.cw-badge--rood .elementor-heading-title { background: var(--cw-rood); }
.cw-badge--zwart .elementor-heading-title { background: var(--cw-zwart); color: var(--cw-lime); }

/* Teller met vakjes: Counter-widget met klasse cw-teller */
.cw-teller .elementor-counter-number-wrapper { font-family: var(--cw-mono); font-weight: 700; font-size: clamp(40px, 4vw, 56px); color: var(--cw-lime); background: var(--cw-zwart); border: 2px solid var(--cw-rand-donker); padding: 8px 12px; display: inline-flex; }

/* ---------- 7. Formulieren (op Elementor Form-widget) ---------- */
.cw-form .elementor-field-group .elementor-field-textual,
.cw-form .elementor-field-group select,
.cw-form .elementor-field-group textarea {
  border: 2px solid var(--cw-zwart) !important; border-radius: 0 !important; background: var(--cw-creme) !important;
  color: var(--cw-zwart) !important; font-size: 16px !important; min-height: 48px; padding: 0 12px !important; box-shadow: none !important;
}
.cw-form .elementor-field-group textarea { padding: 10px 12px !important; }
.cw-form .elementor-field-group .elementor-field-textual:focus { outline: 3px solid var(--cw-lime); outline-offset: 0; }
.cw-form .elementor-field-label { font-size: 14px; font-weight: 500; margin-bottom: 6px; }
.cw-form .elementor-field-type-acceptance input, .cw-form input[type=checkbox] { accent-color: var(--cw-zwart); width: 20px; height: 20px; }
.cw-form .elementor-button { background: var(--cw-lime) !important; color: var(--cw-zwart) !important; border: 2px solid var(--cw-zwart) !important; border-radius: 0 !important; font-family: var(--cw-font) !important; font-weight: 700 !important; font-size: 18px !important; letter-spacing: 0 !important; text-transform: none !important; min-height: 58px; box-shadow: 5px 5px 0 var(--cw-rood) !important; }
.cw-form .elementor-message-danger, .cw-form .elementor-error .elementor-field { color: var(--cw-donkerrood); border-color: var(--cw-donkerrood) !important; }
.cw-form .elementor-message-success { color: var(--cw-zwart); background: var(--cw-lime); padding: 12px 14px; font-weight: 700; }
input[type=range] { accent-color: var(--cw-lime); }

/* ---------- 8. FAQ / accordeon (op Accordion- of Toggle-widget) ---------- */
.cw-faq .elementor-accordion-item, .cw-faq .elementor-toggle-item, .cw-faq details { border: 0 !important; border-bottom: 2px solid var(--cw-zwart) !important; }
.cw-faq { border-top: 2px solid var(--cw-zwart); }
.cw-faq .elementor-tab-title, .cw-faq summary { padding: 18px 0 !important; font-size: 19px; font-weight: 700; }
.cw-faq .elementor-tab-content, .cw-faq .e-n-accordion-item > div { padding: 0 48px 22px 0 !important; font-size: 17px; line-height: 1.6; color: #3A3832; border: 0 !important; }
.cw-faq .elementor-accordion-icon, .cw-faq .e-n-accordion-item-title-icon { width: 36px; height: 36px; display: inline-flex !important; align-items: center; justify-content: center; background: var(--cw-zwart); color: var(--cw-creme); }

/* ---------- 9. Tijdlijn / stappen (container met kinderen) ---------- */
.cw-stappen { border-top: 3px solid currentColor !important; }
.cw-stap-nr .elementor-heading-title { width: 44px; height: 44px; margin-top: -24px; display: flex; align-items: center; justify-content: center; background: var(--cw-rood); color: var(--cw-zwart); font-family: var(--cw-mono); font-weight: 700; font-size: 16px; }
.cw-stap-nr--lime .elementor-heading-title { background: var(--cw-lime); }

/* ---------- 10. Marquee (tape met lopende tekst) ---------- */
.cw-marquee { overflow: hidden; background: var(--cw-lime) !important; border-top: 3px solid var(--cw-zwart) !important; border-bottom: 3px solid var(--cw-zwart) !important; padding: 14px 0 !important; }
.cw-marquee--scheef { transform: rotate(-2deg); width: 110%; margin-left: -5%; }
.cw-marquee .cw-marquee-track { display: flex; width: max-content; animation: cwTape 40s linear infinite; font-family: var(--cw-mono); font-weight: 700; font-size: 20px; text-transform: uppercase; white-space: nowrap; }
.cw-marquee .cw-marquee-track > * { padding-right: 28px; }

/* ---------- 11. Animaties ---------- */
@keyframes cwRise { 0% { opacity: 0; transform: translateY(26px); } 100% { opacity: 1; transform: none; } }
@keyframes cwFade { 0% { opacity: 0; } 100% { opacity: 1; } }
@keyframes cwStrike { 0% { transform: scaleX(0); } 100% { transform: scaleX(1); } }
@keyframes cwFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes cwStripe { from { background-position: 0 0; } to { background-position: 45.25px 0; } }
@keyframes cwBlink { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes cwTape { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes cwPop { 0% { opacity: 0; transform: translateY(14px) scale(.97); } 100% { opacity: 1; transform: none; } }

.cw-zweef { animation: cwFloat 6s ease-in-out infinite; }
.cw-knipper { animation: cwBlink 2.4s ease-in-out infinite; }
.cw-in { animation: cwRise .8s var(--cw-ease) both; }
.cw-in-1 { animation: cwRise .8s var(--cw-ease) .1s both; }
.cw-in-2 { animation: cwRise .8s var(--cw-ease) .25s both; }
.cw-in-3 { animation: cwRise .8s var(--cw-ease) .4s both; }
.cw-in-4 { animation: cwRise .8s var(--cw-ease) .55s both; }

/* Scroll-animatie: geef een element de klasse cw-reveal (en eventueel cw-d1 t/m cw-d4) */
html.cw-anim .cw-reveal { opacity: 0; transform: translateY(34px); transition: opacity .9s var(--cw-ease), transform .9s var(--cw-ease); }
html.cw-anim .cw-reveal.is-in { opacity: 1; transform: none; }
html.cw-anim .cw-d1 { transition-delay: .06s; }
html.cw-anim .cw-d2 { transition-delay: .16s; }
html.cw-anim .cw-d3 { transition-delay: .26s; }
html.cw-anim .cw-d4 { transition-delay: .36s; }

/* Hover-lift voor eender wat */
.cw-lift { transition: transform .25s var(--cw-ease); }
.cw-lift:hover { transform: translate(-3px, -3px); }

/* ---------- 12. Toegankelijkheid ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html.cw-anim .cw-reveal { opacity: 1; transform: none; }
  html { scroll-behavior: auto; }
}

/* ==========================================================================
   13. COOKIEBANNER (Complianz) — Cayweb-look
   Werkt met Complianz 6/7. Banner-positie in Complianz: "Linksonder".
   ========================================================================== */
.cmplz-cookiebanner {
  --cmplz_banner_width: 460px;
  --cmplz_banner_background_color: #FAF5EB;
  --cmplz_banner_border_color: #0A0A0A;
  --cmplz_banner_border_width: 2px;
  --cmplz_banner_border_radius: 0;
  --cmplz_text_color: #3A3832;
  --cmplz_hyperlink_color: #0A0A0A;
  --cmplz_category_body_font_size: 14px;
  --cmplz_button_accept_background_color: #CAEB47;
  --cmplz_button_accept_border_color: #0A0A0A;
  --cmplz_button_accept_text_color: #0A0A0A;
  --cmplz_button_deny_background_color: #0A0A0A;
  --cmplz_button_deny_border_color: #0A0A0A;
  --cmplz_button_deny_text_color: #FAF5EB;
  --cmplz_button_settings_background_color: transparent;
  --cmplz_button_settings_border_color: transparent;
  --cmplz_button_settings_text_color: #0A0A0A;
  --cmplz_button_border_radius: 0;
  --cmplz_slider_active_color: #CAEB47;
  --cmplz_slider_inactive_color: #FFFFFF;
  --cmplz_slider_bullet_color: #0A0A0A;
  --cmplz_category_header_active_background_color: #FFFFFF;
  --cmplz_category_header_always_active_color: #0A0A0A;
}
.cmplz-cookiebanner.cmplz-show {
  font-family: var(--cw-font) !important;
  background: #FAF5EB !important; color: #0A0A0A !important;
  border: 2px solid #0A0A0A !important; border-radius: 0 !important;
  box-shadow: 10px 10px 0 #CAEB47 !important;
  padding: 26px 22px 20px !important;
  overflow: visible !important;
  animation: cwPop .5s var(--cw-ease) .4s both;
}
/* stukje tape */
.cmplz-cookiebanner.cmplz-show::before {
  content: ""; position: absolute; top: -14px; left: 36px; width: 100px; height: 26px;
  background: #CAEB47; opacity: .9; transform: rotate(-4deg); pointer-events: none;
}
.cmplz-cookiebanner .cmplz-title {
  font-family: var(--cw-font) !important; font-size: 24px !important; font-weight: 700 !important;
  letter-spacing: -0.02em; color: #0A0A0A !important;
}
.cmplz-cookiebanner .cmplz-title::after { content: "."; color: #DD4238; }
.cmplz-cookiebanner .cmplz-message, .cmplz-cookiebanner .cmplz-message p { font-size: 15px !important; line-height: 1.55 !important; color: #3A3832 !important; }
.cmplz-cookiebanner .cmplz-message a, .cmplz-cookiebanner .cmplz-link { color: #0A0A0A !important; font-weight: 700; text-decoration: underline !important; text-underline-offset: 4px; }
.cmplz-cookiebanner .cmplz-close { color: #0A0A0A !important; }
.cmplz-cookiebanner .cmplz-logo { display: none !important; }

/* knoppen: accepteren en weigeren even groot (verplicht in België) */
.cmplz-cookiebanner .cmplz-buttons { display: grid !important; grid-template-columns: 1fr 1fr; gap: 10px !important; }
.cmplz-cookiebanner .cmplz-btn {
  font-family: var(--cw-font) !important; font-size: 16px !important; font-weight: 700 !important;
  min-height: 52px !important; height: auto !important; padding: 0 14px !important;
  border: 2px solid #0A0A0A !important; border-radius: 0 !important; width: 100% !important;
  transition: transform .25s var(--cw-ease), box-shadow .25s var(--cw-ease);
}
.cmplz-cookiebanner .cmplz-btn.cmplz-accept { background: #CAEB47 !important; color: #0A0A0A !important; box-shadow: 4px 4px 0 #DD4238; }
.cmplz-cookiebanner .cmplz-btn.cmplz-deny { background: #0A0A0A !important; color: #FAF5EB !important; box-shadow: 4px 4px 0 #DD4238; }
.cmplz-cookiebanner .cmplz-btn.cmplz-accept:hover, .cmplz-cookiebanner .cmplz-btn.cmplz-deny:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 #DD4238; }
.cmplz-cookiebanner .cmplz-btn.cmplz-view-preferences,
.cmplz-cookiebanner .cmplz-btn.cmplz-save-preferences {
  grid-column: 1 / -1; background: transparent !important; color: #0A0A0A !important; border: 0 !important;
  min-height: 36px !important; justify-content: flex-start !important; text-align: left !important;
  text-decoration: underline; text-underline-offset: 4px; padding: 0 !important;
}
.cmplz-cookiebanner .cmplz-btn.cmplz-save-preferences { border: 2px solid #0A0A0A !important; background: #0A0A0A !important; color: #FAF5EB !important; text-decoration: none; justify-content: center !important; min-height: 52px !important; }

/* categorieën in "Zelf kiezen" */
.cmplz-cookiebanner .cmplz-categories .cmplz-category { background: #FFFFFF !important; border: 2px solid #0A0A0A !important; border-radius: 0 !important; margin-bottom: 8px !important; }
.cmplz-cookiebanner .cmplz-category-title { font-weight: 700 !important; color: #0A0A0A !important; }
.cmplz-cookiebanner .cmplz-always-active { font-family: var(--cw-mono) !important; font-size: 11px !important; font-weight: 700 !important; background: #0A0A0A; color: #CAEB47 !important; padding: 2px 6px; text-transform: uppercase; }
.cmplz-cookiebanner .cmplz-description { font-size: 14px !important; color: #4A4740 !important; }
.cmplz-cookiebanner .cmplz-banner-checkbox .cmplz-label:before { border-radius: 0 !important; border: 2px solid #0A0A0A !important; }
.cmplz-cookiebanner .cmplz-banner-checkbox .cmplz-label:after { border-radius: 0 !important; }

/* links onderaan (cookiebeleid, privacy) */
.cmplz-cookiebanner .cmplz-documents, .cmplz-cookiebanner .cmplz-links { font-size: 13px !important; }

/* knop om later te wijzigen ("Beheer toestemming") */
#cmplz-manage-consent .cmplz-manage-consent {
  font-family: var(--cw-font) !important; font-weight: 700 !important; font-size: 14px !important;
  background: #CAEB47 !important; color: #0A0A0A !important;
  border: 2px solid #0A0A0A !important; border-radius: 0 !important;
  box-shadow: 4px 4px 0 #0A0A0A !important; left: 20px !important; bottom: 20px !important; right: auto !important;
  padding: 10px 14px !important; height: auto !important; min-height: 44px;
}
#cmplz-manage-consent .cmplz-manage-consent::before { content: "🍪 "; }

@media (max-width: 520px) {
  .cmplz-cookiebanner.cmplz-show { left: 12px !important; right: 12px !important; bottom: 12px !important; width: auto !important; }
  .cmplz-cookiebanner .cmplz-buttons { grid-template-columns: 1fr; }
}