@xiwebdesign/xicms-core 4.17.1

package/dist/styles.css

@@ -0,0 +1,2495 @@
+/**
+ * Basis-stijlen voor de XiCMS-UI (editbar, demo-lock, formulieren, kaarten).
+ * Importeer dit één keer in je site, bv. in `app/layout.tsx`:  import "@xiwebdesign/xicms-core/styles.css";
+ * De klantsite mag deze waarden overschrijven; het zijn bewust neutrale defaults.
+ */
+
+.xicms-root {
+  font-family: var(--xicms-font, inherit);
+  /* Vangt de scrollbar-brede overflow van full-bleed blokken (width:100vw) zonder een scroll-
+     container te maken; overlays portalen naar document.body en blijven dus buiten deze clip. */
+  overflow-x: clip;
+  --xicms-radius: 10px;
+  --xicms-radius-sm: 6px;
+  --xicms-radius-lg: 14px;
+  /* Ruimteschaal (block-padding) */
+  --xicms-spacing-xs: 0.5rem;
+  --xicms-spacing-sm: 1rem;
+  --xicms-spacing-md: 2rem;
+  --xicms-spacing-lg: 3.5rem;
+  --xicms-spacing-xl: 5rem;
+  /* Container */
+  --xicms-container-max: 1200px;
+  --xicms-container-pad: 1.25rem;
+  /* Oppervlak- en randtokens: blokken gebruiken deze i.p.v. hardcoded wit/zwart-alpha,
+     zodat de donkere modus (en eigen thema's) overal doorwerken. */
+  --xicms-surface: #fff;
+  --xicms-border: rgba(0, 0, 0, 0.1);
+  --xicms-border-strong: rgba(0, 0, 0, 0.18);
+  --xicms-muted: rgba(0, 0, 0, 0.04);
+  /* Eén sterrenkleur voor reviews/ratings (blok én widget). */
+  --xicms-star: #f59e0b;
+  /* Statuskleuren (banner-tinten, open/gesloten-badge) — per site overschrijfbaar. */
+  --xicms-success: #059669;
+  --xicms-success-fg: #15803d;
+  --xicms-warning: #b45309;
+  --xicms-danger: #dc2626;
+  --xicms-danger-fg: #b91c1c;
+}
+/* Alleen voor screenreaders (bv. fieldset-legends die visueel dubbel zouden zijn). */
+.xicms-sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+
+/* Zichtbare focus voor de eigen (niet-Astryx) knoppen/links — toetsenbordnavigatie moet overal
+   een ring krijgen, ook in overlays die buiten .xicms-root portalen (lightbox, consent). */
+:is(
+  .xicms-slider__dot, .xicms-slider__arrow, .xicms-gallery__filterbtn, .xicms-banner__close,
+  .xicms-consent__btn, .xicms-consent__reopen, .xicms-consent__reopen-link, .xicms-whatsapp,
+  .xicms-lightbox__close, .xicms-lightbox__nav, .xicms-btn
+):focus-visible {
+  outline: 2px solid var(--xicms-primary, #4f46e5);
+  outline-offset: 2px;
+}
+/* In de lightbox (donkere overlay) is wit de enige gegarandeerd contrasterende ringkleur. */
+:is(.xicms-lightbox__close, .xicms-lightbox__nav):focus-visible {
+  outline-color: #fff;
+}
+
+/* Koppen volgen een optioneel apart display/serif-font (theme.headingFont). */
+.xicms-root :is(h1, h2, h3),
+.xicms-root .xicms-hero__title {
+  font-family: var(--xicms-font-heading, var(--xicms-font, inherit));
+}
+
+/* Optionele donkere modus (volgt het systeem) — alleen actief bij theme.dark.auto.
+   `color-scheme` activeert light-dark() in de inline tokenwaarden (XiCMSProvider) én laat
+   native UI (scrollbars, formuliercontrols) meeschakelen. */
+.xicms-root[data-dark="auto"] {
+  color-scheme: light dark;
+}
+@media (prefers-color-scheme: dark) {
+  .xicms-root[data-dark="auto"] {
+    --xicms-bg: var(--xicms-bg-dark, #0f172a);
+    --xicms-fg: var(--xicms-fg-dark, #e2e8f0);
+    --xicms-primary: var(--xicms-primary-dark, var(--xicms-primary));
+    /* Kaarten/inputs/randen schakelen mee — geen witte kaarten meer op een donkere pagina. */
+    --xicms-surface: var(--xicms-surface-dark, #1e293b);
+    --xicms-border: var(--xicms-border-dark, rgba(255, 255, 255, 0.14));
+    --xicms-border-strong: rgba(255, 255, 255, 0.26);
+    --xicms-muted: rgba(255, 255, 255, 0.06);
+    /* Statustekst licht genoeg voor donkere vlakken. */
+    --xicms-success-fg: #4ade80;
+    --xicms-danger-fg: #f87171;
+    background: var(--xicms-bg);
+    color: var(--xicms-fg);
+  }
+}
+
+/* Gedeelde blokstijl-wrapper (via block `_style`) */
+.xicms-block--pad-none {
+  padding-top: 0;
+  padding-bottom: 0;
+}
+.xicms-block--pad-sm {
+  padding-top: var(--xicms-spacing-sm);
+  padding-bottom: var(--xicms-spacing-sm);
+}
+.xicms-block--pad-md {
+  padding-top: var(--xicms-spacing-md);
+  padding-bottom: var(--xicms-spacing-md);
+}
+.xicms-block--pad-lg {
+  padding-top: var(--xicms-spacing-lg);
+  padding-bottom: var(--xicms-spacing-lg);
+}
+.xicms-block--pad-xl {
+  padding-top: var(--xicms-spacing-xl);
+  padding-bottom: var(--xicms-spacing-xl);
+}
+.xicms-block--container {
+  max-width: var(--xicms-container-max);
+  margin-left: auto;
+  margin-right: auto;
+  padding-left: var(--xicms-container-pad);
+  padding-right: var(--xicms-container-pad);
+}
+.xicms-block--narrow {
+  max-width: 720px;
+  margin-left: auto;
+  margin-right: auto;
+  padding-left: var(--xicms-container-pad);
+  padding-right: var(--xicms-container-pad);
+}
+.xicms-block--full {
+  width: 100vw;
+  margin-left: calc(50% - 50vw);
+  margin-right: calc(50% - 50vw);
+}
+.xicms-block--align-left {
+  text-align: left;
+}
+.xicms-block--align-center {
+  text-align: center;
+}
+.xicms-block--align-right {
+  text-align: right;
+}
+
+/* Subtiele binnenkomst-animatie bij scrollen — progressive enhancement: browsers zonder
+   scroll-driven animations tonen het blok gewoon (geen verborgen content), en bij
+   prefers-reduced-motion gebeurt er niets. */
+@media (prefers-reduced-motion: no-preference) {
+  @supports (animation-timeline: view()) {
+    [data-xicms-animate="fade"],
+    [data-xicms-animate="up"] {
+      animation: xicms-reveal linear both;
+      animation-timeline: view();
+      animation-range: entry 0% entry 45%;
+    }
+    [data-xicms-animate="up"] {
+      animation-name: xicms-reveal-up;
+    }
+  }
+}
+@keyframes xicms-reveal {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+/* Transform-vrij (clip-path i.p.v. translateY): een `transform` zou een containing block maken,
+   waardoor `position:fixed`-kinderen (lightbox/modal) t.o.v. het blok positioneren i.p.v. de viewport. */
+@keyframes xicms-reveal-up {
+  from {
+    opacity: 0;
+    clip-path: inset(0 0 1.25rem 0);
+  }
+  to {
+    opacity: 1;
+    clip-path: inset(0 0 0 0);
+  }
+}
+
+/* Toegankelijkheid: zichtbare focus op knoppen/links in de runtime-UI. */
+.xicms-btn:focus-visible,
+.xicms-root a:focus-visible {
+  outline: 2px solid var(--xicms-primary, #4f46e5);
+  outline-offset: 2px;
+}
+
+/* ── Visuele/inline pagina-editor (overlay) ───────────────────────────────── */
+.xicms-ve {
+  position: fixed;
+  inset: 0;
+  z-index: 10000;
+}
+.xicms-ve__shell {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  flex-direction: column;
+  background: #f1f5f9;
+}
+.xicms-ve__bar {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.6rem 1rem;
+  background: #0f172a;
+  color: #fff;
+  flex: 0 0 auto;
+}
+.xicms-ve__title {
+  font-size: 0.95rem;
+}
+.xicms-ve__path {
+  font-size: 0.8rem;
+  opacity: 0.7;
+}
+.xicms-ve__status {
+  font-size: 0.8rem;
+  opacity: 0.85;
+  margin-left: auto;
+}
+.xicms-ve__bar-actions {
+  display: flex;
+  gap: 0.5rem;
+}
+.xicms-ve__histbtn {
+  appearance: none;
+  border: 1px solid rgba(255, 255, 255, 0.25);
+  border-radius: 6px;
+  background: transparent;
+  color: #fff;
+  font-size: 0.95rem;
+  line-height: 1;
+  padding: 0.3rem 0.5rem;
+  cursor: pointer;
+}
+.xicms-ve__histbtn:hover:not(:disabled) {
+  background: rgba(255, 255, 255, 0.12);
+}
+.xicms-ve__histbtn:disabled {
+  opacity: 0.35;
+  cursor: default;
+}
+/* Conflictbalk: iemand anders wijzigde deze pagina intussen (andere tab/collega). */
+.xicms-ve__conflict {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.6rem;
+  padding: 0.55rem 1rem;
+  background: #fef3c7;
+  color: #78350f;
+  border-bottom: 1px solid #fcd34d;
+  font-size: 0.85rem;
+  flex: 0 0 auto;
+}
+/* Inklapbare secties in het zijpaneel (pagina-instellingen, versiegeschiedenis). */
+.xicms-ve__section {
+  border: 1px solid #e2e8f0;
+  border-radius: 10px;
+  padding: 0.6rem 0.8rem;
+  background: #f8fafc;
+}
+.xicms-ve__section > summary {
+  cursor: pointer;
+  user-select: none;
+}
+.xicms-ve__body {
+  flex: 1 1 auto;
+  display: grid;
+  grid-template-columns: 1fr 360px;
+  min-height: 0;
+}
+.xicms-ve__canvas {
+  overflow: auto;
+  padding: 1.5rem;
+  background: #fff;
+  background-image:
+    linear-gradient(rgba(0, 0, 0, 0.03) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(0, 0, 0, 0.03) 1px, transparent 1px);
+  background-size: 24px 24px;
+}
+.xicms-ve__panel {
+  overflow: auto;
+  border-left: 1px solid #e2e8f0;
+  background: #fff;
+  padding: 1rem;
+}
+.xicms-ve__hint {
+  color: #64748b;
+  font-size: 0.9rem;
+  padding: 1rem;
+}
+.xicms-ve__inserter {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  margin-top: 1rem;
+  padding: 0.75rem;
+  border: 1px dashed #cbd5e1;
+  border-radius: 10px;
+  font-size: 0.9rem;
+  color: #475569;
+}
+.xicms-ve__inserter-select {
+  width: 16rem;
+}
+
+/* Responsief: op telefoon/smal tablet stackt de editor (canvas boven, instellingen als onderpaneel)
+   en wrappen de balk en de toevoeg-rij, zodat inline bewerken ook op kleine schermen werkt. */
+@media (max-width: 720px) {
+  .xicms-ve__bar {
+    flex-wrap: wrap;
+    gap: 0.4rem 0.6rem;
+  }
+  .xicms-ve__status {
+    margin-left: 0;
+    order: 3;
+    flex-basis: 100%;
+  }
+  .xicms-ve__body {
+    grid-template-columns: 1fr;
+    grid-template-rows: 1fr auto;
+  }
+  .xicms-ve__canvas {
+    padding: 1rem;
+  }
+  .xicms-ve__panel {
+    border-left: 0;
+    border-top: 2px solid #cbd5e1;
+    max-height: 48vh;
+  }
+  .xicms-ve__inserter {
+    flex-wrap: wrap;
+  }
+  .xicms-ve__inserter-select {
+    width: 100%;
+  }
+}
+/* Blok-frame in het canvas */
+.xicms-ve-block {
+  position: relative;
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+  border-radius: 4px;
+  transition: outline-color 0.12s;
+}
+.xicms-ve-block:hover {
+  outline-color: rgba(79, 70, 229, 0.35);
+}
+.xicms-ve-block.is-selected {
+  outline-color: var(--xicms-primary, #4f46e5);
+}
+.xicms-ve-block__select {
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  background: transparent;
+  border: 0;
+  cursor: pointer;
+}
+.xicms-ve-block.is-selected .xicms-ve-block__select {
+  /* Geselecteerd: laat interactie met de inhoud toe (de editor staat in het zijpaneel). */
+  pointer-events: none;
+}
+.xicms-ve-block__content {
+  position: relative;
+}
+/* Drag-and-drop herordenen: greep + invoeg-indicator. */
+.xicms-ve-block__drag {
+  cursor: grab;
+  letter-spacing: -2px;
+}
+.xicms-ve-block__drag:active {
+  cursor: grabbing;
+}
+.xicms-ve-block.is-dragging {
+  opacity: 0.45;
+}
+.xicms-ve-block.is-drop-before::before,
+.xicms-ve-block.is-drop-after::after {
+  content: "";
+  position: absolute;
+  left: 0;
+  right: 0;
+  height: 3px;
+  border-radius: 2px;
+  background: var(--xicms-primary, #4f46e5);
+  z-index: 4;
+}
+.xicms-ve-block.is-drop-before::before {
+  top: -6px;
+}
+.xicms-ve-block.is-drop-after::after {
+  bottom: -6px;
+}
+/* Inline (in-canvas) bewerkbaar tekstveld in de visuele editor. */
+.xicms-ve-inline {
+  cursor: text;
+  border-radius: 4px;
+  outline: 1px dashed rgba(79, 70, 229, 0.5);
+  outline-offset: 3px;
+  transition: outline-color 0.12s, background 0.12s;
+}
+.xicms-ve-inline:hover {
+  background: rgba(79, 70, 229, 0.06);
+}
+.xicms-ve-inline:focus {
+  outline: 2px solid var(--xicms-primary, #4f46e5);
+  outline-offset: 3px;
+  background: rgba(79, 70, 229, 0.06);
+}
+/* Inline afbeelding vervangen (visuele editor): icoontje over het beeld van het geselecteerde blok. */
+.xicms-ve-img { line-height: 0; }
+.xicms-ve-img__btn {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  z-index: 3;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.4rem;
+  padding: 0.5rem 0.85rem;
+  border: 1px solid rgba(255, 255, 255, 0.25);
+  border-radius: 999px;
+  background: rgba(17, 24, 39, 0.92);
+  color: #fff;
+  font: 600 0.82rem/1 system-ui, sans-serif;
+  cursor: pointer;
+  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
+  transition: background 0.12s, transform 0.12s;
+}
+.xicms-ve-img__btn:hover { background: var(--color-accent, #4f46e5); transform: translateY(-1px); }
+/* Vullende variant (hero-achtergrond): knop absoluut t.o.v. het blok-element. */
+.xicms-ve-img__btn--fill {
+  position: absolute;
+  top: 3.2rem;
+  right: 1rem;
+  z-index: 4;
+}
+/* Duidelijke klik-affordance op het hele beeld van het geselecteerde blok. */
+.xicms-ve-img {
+  cursor: pointer;
+  outline: 2px dashed color-mix(in srgb, var(--color-accent, #4f46e5) 60%, transparent);
+  outline-offset: -2px;
+  border-radius: 6px;
+}
+.xicms-ve-img:hover { outline-style: solid; }
+.xicms-ve-block__toolbar {
+  position: absolute;
+  top: 0;
+  right: 0;
+  z-index: 2;
+  display: none;
+  align-items: center;
+  gap: 0.15rem;
+  padding: 0.2rem 0.35rem;
+  background: #0f172a;
+  color: #fff;
+  border-radius: 0 0 0 8px;
+  font-size: 0.8rem;
+}
+.xicms-ve-block:hover .xicms-ve-block__toolbar,
+.xicms-ve-block.is-selected .xicms-ve-block__toolbar {
+  display: flex;
+}
+.xicms-ve-block__label {
+  opacity: 0.8;
+  margin-right: 0.4rem;
+}
+.xicms-ve-block__toolbar button {
+  background: none;
+  border: 0;
+  color: #fff;
+  cursor: pointer;
+  padding: 0.1rem 0.3rem;
+  border-radius: 4px;
+  font-size: 0.85rem;
+}
+.xicms-ve-block__toolbar button:hover:not(:disabled) {
+  background: rgba(255, 255, 255, 0.15);
+}
+.xicms-ve-block__toolbar button:disabled {
+  opacity: 0.35;
+  cursor: default;
+}
+@media (max-width: 720px) {
+  .xicms-ve__body {
+    grid-template-columns: 1fr;
+  }
+  .xicms-ve__panel {
+    display: none;
+  }
+}
+
+/* Foutkaart voor een block dat niet kon renderen (alleen zichtbaar in de editor-preview). */
+.xicms-block-error {
+  display: grid;
+  gap: 0.25rem;
+  padding: 0.75rem 1rem;
+  margin: 0.5rem 0;
+  border: 1px dashed #f59e0b;
+  border-radius: var(--xicms-radius, 10px);
+  background: #fffbeb;
+  color: #92400e;
+  font-size: 0.9rem;
+}
+
+/* Knoppen */
+.xicms-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.4rem;
+  padding: 0.5rem 0.9rem;
+  border: none;
+  border-radius: var(--xicms-radius, 10px);
+  background: var(--xicms-primary, #4f46e5);
+  color: #fff;
+  font: inherit;
+  font-weight: 600;
+  cursor: pointer;
+  text-decoration: none;
+  line-height: 1.1;
+}
+.xicms-btn:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+.xicms-btn--ghost {
+  background: transparent;
+  color: var(--xicms-fg, #0f172a);
+  border: 1px solid var(--xicms-border-strong, rgba(0, 0, 0, 0.18));
+}
+
+/* Invoervelden */
+.xicms-input {
+  width: 100%;
+  padding: 0.55rem 0.7rem;
+  border: 1px solid var(--xicms-border-strong, rgba(0, 0, 0, 0.18));
+  border-radius: var(--xicms-radius, 10px);
+  font: inherit;
+  background: var(--xicms-surface, #fff);
+  color: var(--xicms-fg, #0f172a);
+}
+
+/* Kaarten — zachte gelaagde schaduw; kaarten met een link krijgen de hover-lift van cards-grid. */
+.xicms-card {
+  background: var(--xicms-surface, #fff);
+  border: 1px solid var(--xicms-border, rgba(0, 0, 0, 0.1));
+  border-radius: var(--xicms-radius, 10px);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05), 0 6px 18px rgba(0, 0, 0, 0.04);
+  transition: transform 0.15s ease, box-shadow 0.15s ease;
+}
+.xicms-card:has(a):hover {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.07), 0 14px 30px rgba(0, 0, 0, 0.08);
+}
+@media (prefers-reduced-motion: reduce) {
+  .xicms-card:has(a):hover { transform: none; }
+}
+
+/* Bewerkbare elementen in edit-modus */
+.xicms-editable {
+  outline: 2px dashed var(--xicms-accent, #4f46e5);
+  outline-offset: 3px;
+  border-radius: 4px;
+  cursor: text;
+}
+
+/* Zwevende werkbalk voor editors */
+.xicms-editbar {
+  position: fixed;
+  bottom: 16px;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 9999;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem 0.75rem;
+  background: #0f172a;
+  color: #fff;
+  border-radius: 999px;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
+}
+.xicms-editbar .xicms-btn--ghost {
+  color: #fff;
+  border-color: rgba(255, 255, 255, 0.3);
+}
+
+/* Demo-bewerkmodus: bovenbalk met pseudo-login + duidelijke "niet opgeslagen"-melding */
+.xicms-demostudio {
+  position: sticky;
+  top: 0;
+  z-index: 9000;
+  display: flex;
+  align-items: center;
+  gap: 0.75rem 1rem;
+  flex-wrap: wrap;
+  padding: 0.6rem 1.1rem;
+  background: #0f172a;
+  color: #fff;
+  border-bottom: 3px solid var(--xicms-accent, #f59e0b);
+  font-size: 0.9rem;
+  line-height: 1.4;
+}
+.xicms-demostudio__msg {
+  flex: 1 1 16rem;
+  min-width: 0;
+}
+.xicms-demostudio .xicms-btn {
+  flex: 0 0 auto;
+}
+.xicms-demostudio .xicms-btn--ghost {
+  color: #fff;
+  border-color: rgba(255, 255, 255, 0.35);
+}
+
+/* Demo-lock */
+.xicms-demo-ribbon {
+  position: fixed;
+  top: 14px;
+  right: -38px;
+  z-index: 9998;
+  transform: rotate(45deg);
+  background: #dc2626;
+  color: #fff;
+  font-weight: 700;
+  letter-spacing: 0.15em;
+  font-size: 12px;
+  padding: 4px 48px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
+  pointer-events: none;
+}
+.xicms-demo-banner {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 9998;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-wrap: wrap;
+  gap: 0.75rem;
+  padding: 0.75rem 1rem;
+  background: #111827;
+  color: #fff;
+  font-size: 14px;
+}
+
+/* Knopvarianten (gedeeld door hero/cta) */
+.xicms-btn--primary {
+  background: var(--xicms-primary, #4f46e5);
+  color: #fff;
+}
+.xicms-btn--secondary {
+  background: var(--xicms-accent, #6366f1);
+  color: #fff;
+}
+.xicms-btn--outline {
+  background: transparent;
+  color: var(--xicms-fg, #0f172a);
+  border: 1px solid currentColor;
+}
+
+/* ── Block-rendering (runtime, lichtgewicht — geen Tailwind) ───────────────── */
+.xicms-hero {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  padding: 3rem 0;
+  overflow: hidden;
+  isolation: isolate;
+}
+.xicms-hero[data-align="center"] {
+  text-align: center;
+  align-items: center;
+}
+.xicms-hero[data-valign="center"] {
+  justify-content: center;
+}
+.xicms-hero[data-valign="bottom"] {
+  justify-content: flex-end;
+}
+/* dvh volgt de échte viewport op mobiel (adresbalk in/uit); vh blijft als fallback staan. */
+.xicms-hero[data-height="sm"] {
+  min-height: 40vh;
+  min-height: 40dvh;
+}
+.xicms-hero[data-height="md"] {
+  min-height: 60vh;
+  min-height: 60dvh;
+}
+.xicms-hero[data-height="lg"] {
+  min-height: 80vh;
+  min-height: 80dvh;
+}
+.xicms-hero[data-height="full"] {
+  min-height: 100vh;
+  min-height: 100dvh;
+}
+.xicms-hero__media {
+  position: absolute;
+  inset: 0;
+  z-index: -2;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+/* Geen achtergrond-media → toon de afbeelding als gewone bovenstaande banner. */
+.xicms-hero[data-height="auto"] .xicms-hero__media {
+  position: static;
+  max-height: 420px;
+  border-radius: 12px;
+  margin-bottom: 1.25rem;
+}
+.xicms-hero__overlay {
+  position: absolute;
+  inset: 0;
+  z-index: -1;
+}
+.xicms-hero__gradient {
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(to top, rgba(0, 0, 0, 0.62) 0%, rgba(0, 0, 0, 0.18) 45%, transparent 75%);
+  pointer-events: none;
+}
+.xicms-hero__eyebrow {
+  display: inline-block;
+  text-transform: uppercase;
+  letter-spacing: 0.12em;
+  font-size: 0.8rem;
+  font-weight: 700;
+  opacity: 0.85;
+  margin-bottom: 0.4rem;
+  color: var(--xicms-primary, inherit);
+}
+.xicms-hero[data-media="cover"] .xicms-hero__eyebrow {
+  color: inherit;
+}
+.xicms-hero__inner {
+  display: grid;
+  gap: 0.75rem;
+}
+.xicms-hero__title {
+  font-size: clamp(2rem, 5vw, 3rem);
+  line-height: 1.05;
+  margin: 0 0 0.5rem;
+}
+.xicms-hero__sub {
+  font-size: 1.2rem;
+  opacity: 0.85;
+  margin: 0;
+}
+.xicms-hero__buttons,
+.xicms-cta__buttons {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.6rem;
+  margin-top: 0.5rem;
+}
+.xicms-hero[data-align="center"] .xicms-hero__buttons {
+  justify-content: center;
+}
+/* Dekkend hero-beeld/-video: lichte tekst + subtiele schaduw voor leesbaar contrast op elk beeld. */
+.xicms-hero[data-media="cover"] .xicms-hero__title {
+  color: #fff;
+  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.45);
+}
+.xicms-hero[data-media="cover"] .xicms-hero__sub {
+  color: rgba(255, 255, 255, 0.94);
+  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.4);
+}
+/* Outline-knoppen op een beeld-hero: licht, zodat ze leesbaar contrasteren met het beeld. */
+.xicms-hero[data-media="cover"] .xicms-btn--outline {
+  color: #fff;
+  border-color: rgba(255, 255, 255, 0.7);
+}
+/* Afbeelding-uitlijning + beeldverhouding */
+.xicms-image[data-align="left"] {
+  margin-right: auto;
+  max-width: max-content;
+}
+.xicms-image[data-align="right"] {
+  margin-left: auto;
+  max-width: max-content;
+}
+.xicms-image[data-ratio="16/9"] img {
+  aspect-ratio: 16 / 9;
+  object-fit: cover;
+}
+.xicms-image[data-ratio="4/3"] img {
+  aspect-ratio: 4 / 3;
+  object-fit: cover;
+}
+.xicms-image[data-ratio="1/1"] img {
+  aspect-ratio: 1 / 1;
+  object-fit: cover;
+}
+.xicms-image[data-ratio="3/2"] img {
+  aspect-ratio: 3 / 2;
+  object-fit: cover;
+}
+.xicms-richtext > :first-child {
+  margin-top: 0;
+}
+.xicms-richtext a {
+  color: var(--xicms-primary, #4f46e5);
+}
+/* Ingevoegde afbeeldingen (WYSIWYG) blijven binnen de kolom en schalen responsief mee. */
+.xicms-richtext img {
+  max-width: 100%;
+  height: auto;
+  border-radius: 8px;
+  margin: 1rem 0;
+}
+.xicms-image {
+  margin: 1.5rem 0;
+}
+.xicms-image img {
+  width: 100%;
+  border-radius: 12px;
+}
+.xicms-image figcaption {
+  font-size: 0.85rem;
+  opacity: 0.7;
+  margin-top: 0.4rem;
+}
+/* Galerij draait nu op Astryx Grid + per-blok aspect-ratio; `.xicms-gallery` is enkel nog een
+   stabiele styling-haak (geen eigen grid meer — dat zou de Astryx-layout overschrijven). */
+.xicms-gallery__item {
+  margin: 0;
+}
+.xicms-gallery__caption {
+  font-size: 0.85rem;
+  opacity: 0.7;
+  margin-top: 0.3rem;
+}
+/* Lightbox-overlay */
+.xicms-lightbox {
+  position: fixed;
+  inset: 0;
+  z-index: 9990;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 2rem;
+  background: rgba(0, 0, 0, 0.85);
+  cursor: zoom-out;
+}
+.xicms-lightbox__figure {
+  margin: 0;
+  max-width: 90vw;
+  max-height: 90vh;
+}
+.xicms-lightbox__figure img {
+  max-width: 90vw;
+  max-height: 80vh;
+  object-fit: contain;
+  border-radius: 8px;
+}
+.xicms-lightbox__figure figcaption {
+  color: #fff;
+  text-align: center;
+  margin-top: 0.6rem;
+}
+.xicms-lightbox__close {
+  position: absolute;
+  top: 1rem;
+  right: 1rem;
+  width: 2.75rem; /* ≥44px raakdoel (WCAG 2.5.8) */
+  height: 2.75rem;
+  border: 0;
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.15);
+  color: #fff;
+  font-size: 1.25rem;
+  cursor: pointer;
+}
+.xicms-lightbox__nav {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 3rem;
+  height: 3rem;
+  border: 0;
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.15);
+  color: #fff;
+  font-size: 1.75rem;
+  line-height: 1;
+  cursor: pointer;
+}
+.xicms-lightbox__nav:hover { background: rgba(255, 255, 255, 0.28); }
+.xicms-lightbox__nav--prev { left: 1rem; }
+.xicms-lightbox__nav--next { right: 1rem; }
+.xicms-lightbox__counter {
+  position: absolute;
+  top: 1.2rem;
+  left: 50%;
+  transform: translateX(-50%);
+  color: #fff;
+  font-size: 0.9rem;
+  opacity: 0.85;
+}
+@media (max-width: 640px) {
+  .xicms-lightbox__nav { width: 2.5rem; height: 2.5rem; font-size: 1.4rem; }
+  .xicms-lightbox__nav--prev { left: 0.4rem; }
+  .xicms-lightbox__nav--next { right: 0.4rem; }
+}
+.xicms-cta {
+  text-align: center;
+  padding: 2.5rem 1.25rem;
+  background: var(--xicms-bg, #f8fafc);
+  border: 1px solid var(--xicms-border, rgba(0, 0, 0, 0.1));
+  border-radius: var(--xicms-radius, 12px);
+  margin: 1.5rem 0;
+}
+.xicms-columns {
+  display: grid;
+  gap: 1.25rem;
+  margin: 1.5rem 0;
+}
+@media (max-width: 640px) {
+  .xicms-columns {
+    grid-template-columns: 1fr !important;
+  }
+}
+.xicms-newslist {
+  margin: 1.5rem 0;
+}
+
+/* Publiek formulier (block) */
+.xicms-form {
+  display: grid;
+  gap: 0.85rem;
+  max-width: 520px;
+}
+.xicms-field {
+  display: grid;
+  gap: 0.3rem;
+}
+.xicms-field > span {
+  font-weight: 600;
+  font-size: 0.95rem;
+}
+.xicms-form input,
+.xicms-form textarea,
+.xicms-form select {
+  width: 100%;
+  padding: 0.6rem 0.7rem;
+  border: 1px solid var(--xicms-border-strong, rgba(0, 0, 0, 0.18));
+  border-radius: var(--xicms-radius, 10px);
+  font: inherit;
+}
+.xicms-form__success {
+  padding: 1rem;
+  border-radius: 10px;
+  background: #ecfdf5;
+  color: #065f46;
+}
+.xicms-form__error {
+  color: #dc2626;
+  margin: 0;
+}
+
+/* FAQ-block */
+.xicms-faq {
+  margin: 1.5rem 0;
+}
+.xicms-faq-list {
+  display: grid;
+  gap: 0.5rem;
+}
+.xicms-faq-item {
+  border: 1px solid var(--xicms-border, rgba(0, 0, 0, 0.1));
+  border-radius: var(--xicms-radius, 10px);
+  padding: 0.75rem 1rem;
+}
+.xicms-faq-item > summary {
+  cursor: pointer;
+  font-weight: 600;
+}
+.xicms-faq-item > p {
+  margin: 0.6rem 0 0;
+}
+
+/* Openingstijden-block */
+.xicms-hours {
+  margin: 1.5rem 0;
+}
+/* Logo-marquee: doorlopende band; pauzeert bij hover, statisch bij reduced-motion. */
+.xicms-logos__marquee {
+  width: 100%;
+  overflow: hidden;
+  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
+  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
+}
+.xicms-logos__track {
+  display: flex;
+  gap: 3rem;
+  width: max-content;
+  animation: xicms-marquee 28s linear infinite;
+}
+.xicms-logos__track > * {
+  flex: 0 0 auto;
+}
+.xicms-logos__row {
+  flex-wrap: nowrap !important;
+}
+.xicms-logos__marquee:hover .xicms-logos__track {
+  animation-play-state: paused;
+}
+@keyframes xicms-marquee {
+  to { transform: translateX(calc(-50% - 1.5rem)); }
+}
+@media (prefers-reduced-motion: reduce) {
+  .xicms-logos__track { animation: none; }
+}
+
+/* Tijdlijn met iconen; optioneel alternerend op bredere schermen. */
+.xicms-timeline__list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: grid;
+  gap: 1.1rem;
+  border-inline-start: 2px solid var(--color-border, var(--xicms-border, rgba(0, 0, 0, 0.1)));
+}
+.xicms-timeline__item {
+  position: relative;
+  padding-inline-start: 1.6rem;
+}
+.xicms-timeline__marker {
+  position: absolute;
+  left: -0.65rem;
+  top: 0.1rem;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.3rem;
+  height: 1.3rem;
+  border-radius: 999px;
+  background: var(--xicms-surface, #fff);
+  border: 2px solid var(--xicms-primary, #4f46e5);
+  font-size: 0.6rem;
+  line-height: 1;
+  color: var(--xicms-primary, #4f46e5);
+}
+@media (min-width: 780px) {
+  .xicms-timeline--alternate .xicms-timeline__list {
+    border-inline-start: 0;
+    position: relative;
+  }
+  .xicms-timeline--alternate .xicms-timeline__list::before {
+    content: "";
+    position: absolute;
+    left: 50%;
+    top: 0;
+    bottom: 0;
+    width: 2px;
+    background: var(--color-border, var(--xicms-border, rgba(0, 0, 0, 0.1)));
+  }
+  .xicms-timeline--alternate .xicms-timeline__item {
+    width: 50%;
+    padding-inline: 2rem;
+  }
+  .xicms-timeline--alternate .xicms-timeline__item:nth-child(odd) {
+    text-align: right;
+  }
+  .xicms-timeline--alternate .xicms-timeline__item:nth-child(odd) .xicms-timeline__marker {
+    left: auto;
+    right: -0.65rem;
+  }
+  .xicms-timeline--alternate .xicms-timeline__item:nth-child(even) {
+    margin-left: 50%;
+  }
+  .xicms-timeline--alternate .xicms-timeline__item:nth-child(even) .xicms-timeline__marker {
+    left: -0.65rem;
+  }
+}
+
+.xicms-search__snippet {
+  margin: 0.15rem 0 0;
+  font-size: 0.82rem;
+  color: var(--color-text-secondary, inherit);
+  opacity: 0.85;
+}
+.xicms-search__snippet mark,
+.xicms-search__results mark {
+  background: color-mix(in srgb, var(--xicms-primary, #4f46e5) 18%, transparent);
+  color: inherit;
+  border-radius: 3px;
+  padding: 0 1px;
+}
+.xicms-form__native {
+  display: grid;
+  gap: 0.3rem;
+}
+.xicms-form__native-label {
+  font-size: 0.9rem;
+  font-weight: 600;
+}
+/* Radiogroep in formulieren. */
+.xicms-form__radios {
+  border: 0;
+  margin: 0;
+  padding: 0;
+  display: grid;
+  gap: 0.35rem;
+}
+.xicms-form__radios legend {
+  font-size: 0.9rem;
+  font-weight: 600;
+  margin-bottom: 0.25rem;
+}
+.xicms-form__radio {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-size: 0.95rem;
+}
+
+/* Uitgelichte kaart (cards-blok). */
+.xicms-cards__card--featured {
+  outline: 2px solid var(--xicms-primary, #4f46e5);
+  outline-offset: -2px;
+  box-shadow: 0 8px 26px color-mix(in srgb, var(--xicms-primary, #4f46e5) 18%, transparent);
+}
+
+/* Galerij-filterbalk (tags). */
+.xicms-gallery__filter {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.4rem;
+  margin-bottom: 0.9rem;
+}
+.xicms-gallery__filterbtn {
+  appearance: none;
+  border: 1px solid var(--xicms-border, rgba(0, 0, 0, 0.1));
+  background: var(--xicms-surface, #fff);
+  border-radius: 999px;
+  padding: 0.3rem 0.85rem;
+  font: inherit;
+  font-size: 0.85rem;
+  cursor: pointer;
+}
+.xicms-gallery__filterbtn[data-active="1"] {
+  background: var(--xicms-primary, #4f46e5);
+  border-color: var(--xicms-primary, #4f46e5);
+  color: #fff;
+}
+.xicms-agenda__ics {
+  display: inline-block;
+  margin-top: 0.35rem;
+  font-size: 0.82rem;
+  color: var(--xicms-primary, #4f46e5);
+  text-decoration: none;
+}
+.xicms-agenda__ics:hover {
+  text-decoration: underline;
+}
+.xicms-hours__badge {
+  display: inline-block;
+  margin: 0.15rem 0 0.6rem;
+  padding: 0.2rem 0.65rem;
+  border-radius: 999px;
+  font-size: 0.8rem;
+  font-weight: 600;
+  background: color-mix(in srgb, var(--xicms-success, #16a34a) 12%, transparent);
+  color: var(--xicms-success-fg, #15803d);
+}
+.xicms-hours__badge[data-open="0"] {
+  background: color-mix(in srgb, var(--xicms-danger, #dc2626) 10%, transparent);
+  color: var(--xicms-danger-fg, #b91c1c);
+}
+.xicms-hours-table {
+  width: 100%;
+  border-collapse: collapse;
+}
+.xicms-hours-table th,
+.xicms-hours-table td {
+  text-align: left;
+  padding: 0.5rem 0.25rem;
+  border-bottom: 1px solid var(--xicms-border, rgba(0, 0, 0, 0.1));
+}
+.xicms-hours-table th {
+  font-weight: 600;
+}
+.xicms-hours-table td {
+  text-align: right;
+}
+
+/* Prijzen-block (kaarten) */
+.xicms-pricing {
+  margin: 1.5rem 0;
+}
+.xicms-pricing__grid {
+  display: grid;
+  gap: 1rem;
+  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+}
+.xicms-pricing__card {
+  display: grid;
+  gap: 0.5rem;
+  align-content: start;
+  padding: 1.25rem;
+  border: 1px solid var(--xicms-border, rgba(0, 0, 0, 0.1));
+  border-radius: var(--xicms-radius, 12px);
+  background: var(--xicms-surface, #fff);
+}
+.xicms-pricing__card[data-highlighted="true"] {
+  border-color: var(--xicms-primary, #4f46e5);
+  box-shadow: 0 8px 24px rgba(79, 70, 229, 0.15);
+}
+.xicms-pricing__label {
+  font-weight: 600;
+}
+.xicms-pricing__price {
+  display: flex;
+  align-items: baseline;
+  gap: 0.25rem;
+}
+.xicms-pricing-price {
+  font-size: 1.6rem;
+  font-weight: 700;
+  color: var(--xicms-primary, #4f46e5);
+}
+.xicms-pricing__period {
+  font-size: 0.85rem;
+  opacity: 0.7;
+}
+.xicms-pricing__features {
+  list-style: none;
+  margin: 0.25rem 0;
+  padding: 0;
+  display: grid;
+  gap: 0.3rem;
+  font-size: 0.9rem;
+}
+.xicms-pricing__features li::before {
+  content: "✓ ";
+  color: var(--xicms-primary, #4f46e5);
+  font-weight: 700;
+}
+.xicms-pricing-detail {
+  font-size: 0.85em;
+  opacity: 0.7;
+}
+.xicms-pricing-note {
+  margin: 0.75rem 0 0;
+  font-size: 0.85em;
+  opacity: 0.7;
+}
+
+/* Team social/telefoon */
+.xicms-team__phone {
+  display: block;
+  font-size: 0.9rem;
+  opacity: 0.8;
+}
+.xicms-team__social {
+  list-style: none;
+  margin: 0.3rem 0 0;
+  padding: 0;
+  display: flex;
+  gap: 0.5rem;
+  font-size: 0.85rem;
+}
+.xicms-team__social a {
+  color: var(--xicms-primary, #4f46e5);
+}
+
+/* Testimonials layout=list → één kolom */
+.xicms-testimonials[data-layout="list"] .xicms-testimonials__list {
+  grid-template-columns: 1fr;
+}
+
+/* CTA als vaste balk onderaan */
+.xicms-cta--sticky {
+  position: fixed;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 40;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  flex-wrap: wrap;
+  padding: 0.75rem 1.25rem;
+  background: var(--xicms-bg, #ffffff);
+  border-top: 1px solid var(--xicms-border, rgba(0, 0, 0, 0.1));
+  box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.08);
+}
+.xicms-cta--sticky .xicms-cta-text {
+  font-weight: 600;
+}
+
+/* FAQ+ zoekveld */
+.xicms-faq__search {
+  width: 100%;
+  padding: 0.55rem 0.7rem;
+  margin-bottom: 0.75rem;
+  border: 1px solid var(--xicms-border-strong, rgba(0, 0, 0, 0.18));
+  border-radius: var(--xicms-radius, 10px);
+  font: inherit;
+}
+.xicms-faq__empty {
+  opacity: 0.6;
+}
+
+/* Reviews/testimonials-block */
+.xicms-testimonials {
+  margin: 1.5rem 0;
+}
+.xicms-testimonials__list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: grid;
+  gap: 1rem;
+  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
+}
+.xicms-testimonials__item {
+  position: relative;
+  border: 1px solid var(--xicms-border, rgba(0, 0, 0, 0.1));
+  border-radius: var(--xicms-radius, 12px);
+  padding: 1.35rem 1.25rem 1.15rem;
+  background: var(--xicms-surface, #fff);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
+}
+/* Decoratief aanhalingsteken in het accent — geeft de kaart karakter zonder extra markup. */
+.xicms-testimonials__item::before {
+  content: "\201C";
+  position: absolute;
+  top: 0.35rem;
+  right: 0.9rem;
+  font-family: Georgia, "Times New Roman", serif;
+  font-size: 3.2rem;
+  line-height: 1;
+  color: var(--xicms-primary, #4f46e5);
+  opacity: 0.15;
+  pointer-events: none;
+}
+.xicms-testimonials__rating {
+  color: var(--xicms-star, #f59e0b);
+  letter-spacing: 0.1em;
+}
+.xicms-testimonials__rating-empty {
+  opacity: 0.25;
+}
+.xicms-testimonials__quote {
+  margin: 0.5rem 0 0.75rem;
+  font-style: italic;
+}
+.xicms-testimonials__author {
+  display: flex;
+  align-items: center;
+  gap: 0.6rem;
+  font-size: 0.9rem;
+}
+.xicms-testimonials__avatar {
+  width: 2.25rem;
+  height: 2.25rem;
+  border-radius: 999px;
+  object-fit: cover;
+}
+.xicms-testimonials__role {
+  opacity: 0.7;
+}
+
+/* Team-block */
+.xicms-team {
+  margin: 1.5rem 0;
+}
+.xicms-team__list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: grid;
+  gap: 1.25rem;
+  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+}
+.xicms-team__photo {
+  width: 100%;
+  aspect-ratio: 1 / 1;
+  object-fit: cover;
+  border-radius: 12px;
+  margin-bottom: 0.6rem;
+}
+.xicms-team__name {
+  display: block;
+}
+.xicms-team__role {
+  display: block;
+  color: var(--xicms-primary, #4f46e5);
+  font-size: 0.9rem;
+}
+.xicms-team__bio {
+  font-size: 0.9rem;
+  opacity: 0.8;
+  margin: 0.4rem 0;
+}
+
+/* Agenda-block */
+.xicms-agenda {
+  margin: 1.5rem 0;
+}
+.xicms-agenda__list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: grid;
+  gap: 0.75rem;
+}
+.xicms-agenda__item {
+  display: grid;
+  grid-template-columns: minmax(140px, max-content) 1fr;
+  gap: 0.25rem 1rem;
+  padding: 0.6rem 0;
+  border-bottom: 1px solid var(--xicms-border, rgba(0, 0, 0, 0.1));
+}
+.xicms-agenda__date {
+  font-weight: 600;
+  color: var(--xicms-primary, #4f46e5);
+}
+.xicms-agenda__location {
+  display: block;
+  font-size: 0.9rem;
+  opacity: 0.7;
+}
+
+/* Zoek-block */
+.xicms-search {
+  position: relative;
+  margin: 1rem 0;
+  max-width: 480px;
+}
+.xicms-search__input {
+  width: 100%;
+  padding: 0.6rem 0.8rem;
+  border: 1px solid var(--xicms-border-strong, rgba(0, 0, 0, 0.18));
+  border-radius: var(--xicms-radius, 10px);
+  font: inherit;
+}
+.xicms-search__results {
+  list-style: none;
+  margin: 0.4rem 0 0;
+  padding: 0.3rem;
+  border: 1px solid var(--xicms-border, rgba(0, 0, 0, 0.1));
+  border-radius: var(--xicms-radius, 10px);
+  background: var(--xicms-surface, #fff);
+}
+.xicms-search__result a,
+.xicms-search__empty {
+  display: block;
+  padding: 0.4rem 0.5rem;
+  border-radius: 6px;
+  text-decoration: none;
+  color: inherit;
+}
+.xicms-search__result a:hover {
+  background: var(--xicms-muted, rgba(0, 0, 0, 0.05));
+}
+.xicms-search__empty {
+  opacity: 0.6;
+}
+
+/* Bewerkbare footer (SiteFooter) — neutrale defaults, volledig herstijlbaar door de site. */
+.xicms-footer {
+  display: grid;
+  gap: 1.25rem;
+  padding: 2.75rem 1.25rem 2rem;
+  margin-top: 3.5rem;
+  border-top: 1px solid var(--xicms-border, rgba(0, 0, 0, 0.1));
+  background: var(--xicms-muted, rgba(0, 0, 0, 0.03));
+  font-size: 0.9rem;
+}
+.xicms-footer__columns {
+  display: grid;
+  gap: 1.5rem;
+  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
+}
+.xicms-footer__heading {
+  font-size: 0.78rem;
+  text-transform: uppercase;
+  letter-spacing: 0.07em;
+  opacity: 0.65;
+  margin: 0 0 0.6rem;
+}
+.xicms-footer__links {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: grid;
+  gap: 0.3rem;
+}
+.xicms-footer__links a,
+.xicms-footer__social a {
+  color: inherit;
+  text-decoration: none;
+}
+.xicms-footer__links a:hover,
+.xicms-footer__social a:hover {
+  text-decoration: underline;
+}
+.xicms-footer__social {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.75rem;
+}
+.xicms-footer__bottom {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+  opacity: 0.75;
+}
+.xicms-footer__bottom a {
+  color: inherit;
+}
+
+/* Embed-consent placeholder (video/kaart/booking zonder toestemming) */
+.xicms-embed-consent {
+  display: grid;
+  place-items: center;
+  min-height: 160px;
+  padding: 1rem;
+  border: 1px dashed var(--xicms-border-strong, rgba(0, 0, 0, 0.2));
+  border-radius: var(--xicms-radius, 10px);
+  background: var(--xicms-muted, rgba(0, 0, 0, 0.03));
+  text-align: center;
+  font-size: 0.9rem;
+}
+/* Lichte preview-placeholder in de editor (geen echte iframe/script — mode="preview"-contract). */
+.xicms-embed-preview {
+  min-height: 96px;
+  height: 100%;
+  color: var(--color-text-secondary, #555);
+  border-color: var(--color-border, rgba(0, 0, 0, 0.2));
+  background:
+    repeating-linear-gradient(45deg, rgba(0, 0, 0, 0.02) 0 10px, transparent 10px 20px);
+}
+
+/* Feature (beeld + tekst) */
+/* Feature draait nu op Astryx Grid; `.xicms-feature` is enkel nog een stabiele styling-haak
+   (geen eigen grid meer). */
+
+/* Counters (tellers) */
+.xicms-counters {
+  margin: 1.5rem 0;
+  text-align: center;
+}
+.xicms-counters__grid {
+  display: grid;
+  gap: 1rem;
+  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
+}
+/* Class-gebaseerd (niet inline) zodat een site de counter-waarden kan herstijlen zonder !important. */
+.xicms-counters__value {
+  display: block;
+  font-size: clamp(2rem, 5vw, 2.75rem);
+  font-weight: 700;
+  line-height: 1.05;
+  color: var(--color-accent, var(--xicms-primary, #4f46e5));
+}
+.xicms-counters__label {
+  opacity: 0.75;
+}
+
+/* Logo's */
+.xicms-logos {
+  margin: 1.5rem 0;
+}
+.xicms-logos__grid {
+  display: grid;
+  gap: 1.5rem;
+  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
+  align-items: center;
+}
+.xicms-logos__item img {
+  max-width: 100%;
+  max-height: 48px;
+  margin: 0 auto;
+  display: block;
+}
+.xicms-logos[data-grayscale="true"] img {
+  filter: grayscale(1);
+  opacity: 0.7;
+  transition: filter 0.2s, opacity 0.2s;
+}
+.xicms-logos[data-grayscale="true"] img:hover {
+  filter: none;
+  opacity: 1;
+}
+
+/* Timeline */
+.xicms-timeline {
+  margin: 1.5rem 0;
+}
+.xicms-timeline__list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: grid;
+  gap: 1rem;
+  border-left: 2px solid var(--xicms-primary, #4f46e5);
+  padding-left: 1.25rem;
+}
+.xicms-timeline__item {
+  position: relative;
+}
+.xicms-timeline__item::before {
+  content: "";
+  position: absolute;
+  left: -1.6rem;
+  top: 0.3rem;
+  width: 0.65rem;
+  height: 0.65rem;
+  border-radius: 999px;
+  background: var(--xicms-primary, #4f46e5);
+}
+.xicms-timeline__date {
+  display: block;
+  font-size: 0.8rem;
+  opacity: 0.7;
+}
+.xicms-timeline__title {
+  display: block;
+}
+
+/* Video */
+.xicms-video {
+  margin: 1.5rem 0;
+}
+.xicms-video__frame {
+  position: relative;
+  aspect-ratio: 16 / 9;
+}
+.xicms-video__frame iframe,
+.xicms-video__player {
+  width: 100%;
+  height: 100%;
+  border: 0;
+  border-radius: 12px;
+}
+/* Click-to-play-facade: thumbnail + play-knop; de speler laadt pas na een klik. */
+.xicms-video__facade {
+  position: relative;
+  display: block;
+  width: 100%;
+  aspect-ratio: 16 / 9;
+  padding: 0;
+  border: 0;
+  border-radius: 12px;
+  overflow: hidden;
+  cursor: pointer;
+  background: #0f172a;
+}
+.xicms-video__facade img,
+.xicms-video__facade-bg {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+.xicms-video__facade-bg {
+  background: linear-gradient(135deg, #1e293b, #0f172a);
+}
+.xicms-video__play {
+  position: absolute;
+  inset: 0;
+  display: grid;
+  place-items: center;
+  font-size: 1.4rem;
+  color: #fff;
+}
+.xicms-video__play::before {
+  content: "";
+  position: absolute;
+  width: 4.2rem;
+  height: 4.2rem;
+  border-radius: 999px;
+  background: rgba(15, 23, 42, 0.7);
+  transition: transform 0.15s ease, background 0.15s ease;
+}
+.xicms-video__facade:hover .xicms-video__play::before {
+  transform: scale(1.08);
+  background: var(--xicms-primary, #4f46e5);
+}
+.xicms-video__play {
+  z-index: 1;
+}
+
+/* Banner */
+.xicms-banner {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 1rem;
+  padding: 0.6rem 1rem;
+  font-size: 0.95rem;
+  background: var(--xicms-primary, #4f46e5);
+  color: #fff;
+}
+.xicms-banner[data-tone="success"] {
+  background: var(--xicms-success, #059669);
+}
+/* #b45309 i.p.v. #d97706: witte tekst op amber haalde geen 4.5:1 contrast. */
+.xicms-banner[data-tone="warning"] {
+  background: var(--xicms-warning, #b45309);
+}
+.xicms-banner__link {
+  color: #fff;
+  text-decoration: underline;
+  margin-left: 0.4rem;
+}
+.xicms-banner__close {
+  background: none;
+  border: 0;
+  color: inherit;
+  cursor: pointer;
+  font-size: 1rem;
+  /* Raakdoel ≥44px zonder de balk hoger te maken (negatieve marge compenseert de padding). */
+  padding: 0.7rem;
+  margin: -0.7rem;
+  min-width: 2.75rem;
+  min-height: 2.75rem;
+}
+
+/* Contact */
+.xicms-contact {
+  margin: 1.5rem 0;
+}
+.xicms-contact__list {
+  display: grid;
+  gap: 0.5rem;
+  margin: 0;
+}
+.xicms-contact__row {
+  display: grid;
+  grid-template-columns: 8rem 1fr;
+  gap: 0.5rem;
+}
+.xicms-contact__row dt {
+  font-weight: 600;
+}
+.xicms-contact__row dd {
+  margin: 0;
+}
+
+/* Social */
+.xicms-social__list {
+  list-style: none;
+  margin: 0.5rem 0;
+  padding: 0;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.75rem;
+}
+.xicms-social__list a {
+  color: var(--xicms-primary, #4f46e5);
+}
+/* Icoon-variant: ronde knop met merk-glyph. */
+.xicms-social__iconlink {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 2.4rem;
+  height: 2.4rem;
+  border-radius: 999px;
+  border: 1px solid var(--xicms-border, rgba(0, 0, 0, 0.1));
+  background: var(--xicms-surface, #fff);
+  transition: transform 0.12s ease, border-color 0.12s ease;
+}
+.xicms-social__iconlink:hover {
+  transform: translateY(-1px);
+  border-color: var(--xicms-primary, #4f46e5);
+}
+
+/* Kaart */
+.xicms-map {
+  margin: 1.5rem 0;
+  border-radius: 12px;
+  overflow: hidden;
+}
+
+/* Nieuwsbrief */
+.xicms-newsletter {
+  margin: 1.5rem 0;
+}
+.xicms-newsletter__form {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  max-width: 480px;
+}
+.xicms-newsletter__form input {
+  flex: 1;
+  min-width: 200px;
+  padding: 0.6rem 0.7rem;
+  border: 1px solid var(--xicms-border-strong, rgba(0, 0, 0, 0.18));
+  border-radius: var(--xicms-radius, 10px);
+  font: inherit;
+}
+
+/* Booking */
+.xicms-booking {
+  margin: 1.5rem 0;
+}
+.xicms-booking__frame iframe {
+  border-radius: 12px;
+}
+
+/* Knopgroep */
+.xicms-buttons {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.6rem;
+  margin: 1rem 0;
+}
+.xicms-buttons[data-align="center"] {
+  justify-content: center;
+}
+.xicms-buttons[data-align="right"] {
+  justify-content: flex-end;
+}
+
+/* Uitspraak */
+.xicms-quote {
+  margin: 1.5rem 0;
+  padding-left: 1.25rem;
+  border-left: 3px solid var(--xicms-primary, #4f46e5);
+}
+.xicms-quote blockquote {
+  margin: 0;
+  font-size: 1.25rem;
+  font-style: italic;
+}
+.xicms-quote figcaption {
+  margin-top: 0.5rem;
+  font-size: 0.9rem;
+  opacity: 0.8;
+}
+.xicms-quote__role {
+  opacity: 0.7;
+}
+
+/* Scheiding */
+.xicms-divider[data-spacing="sm"] {
+  margin: var(--xicms-spacing-sm, 1rem) 0;
+}
+.xicms-divider[data-spacing="md"] {
+  margin: var(--xicms-spacing-md, 2rem) 0;
+}
+.xicms-divider[data-spacing="lg"] {
+  margin: var(--xicms-spacing-lg, 3.5rem) 0;
+}
+.xicms-divider[data-variant="line"] {
+  border-top: 1px solid var(--xicms-border, rgba(0, 0, 0, 0.12));
+}
+.xicms-divider[data-variant="dots"] {
+  border-top: 2px dotted var(--xicms-border-strong, rgba(0, 0, 0, 0.2));
+}
+
+/* Accordeon (generiek) */
+.xicms-accordion {
+  margin: 1.5rem 0;
+}
+.xicms-accordion__list {
+  display: grid;
+  gap: 0.5rem;
+}
+.xicms-accordion__item {
+  border: 1px solid var(--xicms-border, rgba(0, 0, 0, 0.1));
+  border-radius: var(--xicms-radius, 10px);
+  padding: 0.75rem 1rem;
+}
+.xicms-accordion__item > summary {
+  cursor: pointer;
+  font-weight: 600;
+}
+.xicms-accordion__item > p {
+  margin: 0.6rem 0 0;
+}
+
+/* Embed (generieke iframe) */
+.xicms-embed {
+  margin: 1.5rem 0;
+  border-radius: 12px;
+  overflow: hidden;
+}
+
+/* Cookie-consent (AVG) */
+/* Cookie-banner: compacte kaart linksonder (desktop) / volle breedte (mobiel), op de thema-tokens. */
+.xicms-consent {
+  position: fixed;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 9995;
+  padding: clamp(0.75rem, 2vw, 1.25rem);
+  display: flex;
+  justify-content: flex-start;
+  pointer-events: none;
+}
+@media (prefers-reduced-motion: reduce) {
+  .xicms-consent__inner {
+    animation: none !important;
+  }
+}
+.xicms-consent__inner {
+  pointer-events: auto;
+  width: 100%;
+  max-width: 30rem;
+  display: grid;
+  gap: 0.85rem;
+  padding: 1.15rem 1.25rem 1.1rem;
+  background: var(--color-background-card, var(--xicms-bg, #fff));
+  color: var(--color-text-primary, inherit);
+  border: 1px solid var(--color-border, rgba(0, 0, 0, 0.1));
+  border-radius: var(--radius-container, 14px);
+  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
+  animation: xicms-consent-in 0.25s ease both;
+}
+@keyframes xicms-consent-in {
+  from { opacity: 0; transform: translateY(12px); }
+  to { opacity: 1; transform: none; }
+}
+/* Zwevend knopje om cookievoorkeuren te heropenen (AVG: keuze altijd wijzigbaar). */
+.xicms-consent__reopen {
+  position: fixed;
+  left: 0.9rem;
+  bottom: 0.9rem;
+  z-index: 9994;
+  width: 2.75rem; /* ≥44px raakdoel */
+  height: 2.75rem;
+  border-radius: 999px;
+  border: 1px solid var(--color-border, rgba(0, 0, 0, 0.12));
+  background: var(--color-background-card, var(--xicms-bg, #fff));
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.14);
+  font-size: 1.1rem;
+  line-height: 1;
+  cursor: pointer;
+  opacity: 0.85;
+}
+.xicms-consent__reopen:hover { opacity: 1; transform: translateY(-1px); }
+/* Tekstvariant voor in een footer. */
+.xicms-consent__reopen-link {
+  appearance: none;
+  border: 0;
+  background: none;
+  padding: 0;
+  font: inherit;
+  color: inherit;
+  text-decoration: underline;
+  cursor: pointer;
+}
+.xicms-consent__head { display: grid; gap: 0.3rem; }
+.xicms-consent__title { margin: 0; font-weight: 700; font-size: 1.02rem; }
+.xicms-consent__message { margin: 0; font-size: 0.9rem; line-height: 1.5; color: var(--color-text-secondary, inherit); }
+.xicms-consent__link { color: var(--color-accent, var(--xicms-primary, #4f46e5)); font-weight: 600; }
+
+.xicms-consent__categories {
+  display: grid;
+  gap: 0.4rem;
+  border: 0;
+  margin: 0;
+  padding: 0.25rem 0;
+  max-height: 13rem;
+  overflow-y: auto;
+}
+.xicms-consent__category {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  padding: 0.65rem 0.75rem;
+  border: 1px solid var(--color-border, rgba(0, 0, 0, 0.1));
+  border-radius: var(--radius-element, 10px);
+  cursor: pointer;
+}
+.xicms-consent__category[data-on="1"] { border-color: var(--color-accent, var(--xicms-primary, #4f46e5)); }
+.xicms-consent__cat-text { display: grid; gap: 0.1rem; }
+.xicms-consent__cat-label { font-weight: 600; font-size: 0.9rem; }
+.xicms-consent__cat-desc { font-size: 0.8rem; color: var(--color-text-secondary, inherit); opacity: 0.85; }
+.xicms-consent__required { font-weight: 500; opacity: 0.6; }
+
+/* Toggle-switch (gebouwd op de checkbox; zichtbaar via de track). */
+.xicms-consent__switch { position: relative; flex: 0 0 auto; width: 2.6rem; height: 1.5rem; }
+.xicms-consent__switch input {
+  position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer;
+}
+.xicms-consent__switch input:disabled { cursor: not-allowed; }
+.xicms-consent__track {
+  position: absolute; inset: 0; border-radius: 999px;
+  background: var(--color-border, #cbd5e1); transition: background 0.18s;
+}
+.xicms-consent__track::after {
+  content: ""; position: absolute; top: 3px; left: 3px;
+  width: calc(1.5rem - 6px); height: calc(1.5rem - 6px);
+  border-radius: 999px; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
+  transition: transform 0.18s;
+}
+.xicms-consent__switch input:checked + .xicms-consent__track { background: var(--color-accent, var(--xicms-primary, #4f46e5)); }
+.xicms-consent__switch input:checked + .xicms-consent__track::after { transform: translateX(1.1rem); }
+.xicms-consent__switch input:focus-visible + .xicms-consent__track { outline: 2px solid var(--color-accent, #4f46e5); outline-offset: 2px; }
+
+.xicms-consent__actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+}
+.xicms-consent__btn {
+  flex: 1 1 auto;
+  padding: 0.6rem 0.9rem;
+  border-radius: var(--radius-element, 10px);
+  font: inherit;
+  font-size: 0.9rem;
+  font-weight: 600;
+  cursor: pointer;
+  border: 1px solid var(--color-border, rgba(0, 0, 0, 0.15));
+  background: transparent;
+  color: inherit;
+  transition: background 0.15s, border-color 0.15s;
+}
+.xicms-consent__btn--ghost:hover { background: var(--color-background-muted, rgba(0, 0, 0, 0.04)); }
+.xicms-consent__btn--primary {
+  background: var(--color-accent, var(--xicms-primary, #4f46e5));
+  color: var(--color-on-accent, #fff);
+  border-color: transparent;
+  flex-basis: 100%;
+}
+@media (min-width: 480px) {
+  .xicms-consent__btn--primary { flex-basis: auto; }
+}
+
+/* ════════════════════ Indeling: Met zijbalk ════════════════════ */
+.xicms-sidebar {
+  display: grid;
+  gap: var(--xicms-spacing-md, 1.5rem);
+}
+.xicms-sidebar__aside {
+  display: grid;
+  gap: var(--xicms-spacing-md, 1.5rem);
+  align-content: start;
+}
+@media (min-width: 768px) {
+  .xicms-sidebar[data-side="right"] { grid-template-columns: 1fr var(--xicms-aside-w, 18rem); }
+  .xicms-sidebar[data-side="left"] { grid-template-columns: var(--xicms-aside-w, 18rem) 1fr; }
+  .xicms-sidebar[data-width="sm"] { --xicms-aside-w: 14rem; }
+  .xicms-sidebar[data-width="md"] { --xicms-aside-w: 18rem; }
+  .xicms-sidebar[data-width="lg"] { --xicms-aside-w: 24rem; }
+  .xicms-sidebar__aside--sticky { position: sticky; top: 1rem; }
+}
+
+/* ════════════════════ Widgets (zijbalk-varianten) ════════════════════ */
+.xicms-widget {
+  display: block;
+  padding: 1rem 1.1rem;
+  border: 1px solid var(--xicms-border, rgba(0, 0, 0, 0.08));
+  border-radius: var(--xicms-radius, 12px);
+  background: var(--xicms-surface, #fff);
+}
+.xicms-widget + .xicms-widget { margin-top: var(--xicms-spacing-sm, 1rem); }
+.xicms-widget__title {
+  margin: 0 0 0.6rem;
+  font-size: 0.95rem;
+  font-weight: 700;
+}
+.xicms-widget__list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: grid;
+  gap: 0.6rem;
+}
+.xicms-widget__item {
+  display: flex;
+  gap: 0.6rem;
+  align-items: flex-start;
+  font-size: 0.9rem;
+}
+.xicms-widget__item--event,
+.xicms-widget__item--card { flex-direction: column; gap: 0.15rem; }
+.xicms-widget__link {
+  display: block;
+  font-weight: 600;
+  color: inherit;
+  text-decoration: none;
+}
+.xicms-widget__link:hover { text-decoration: underline; }
+.xicms-widget__meta {
+  display: block;
+  font-size: 0.78rem;
+  opacity: 0.6;
+}
+.xicms-widget__sub {
+  display: block;
+  font-size: 0.82rem;
+  opacity: 0.8;
+}
+.xicms-widget__empty { font-size: 0.85rem; opacity: 0.6; margin: 0; }
+.xicms-widget__thumb {
+  width: 48px;
+  height: 48px;
+  object-fit: cover;
+  border-radius: 8px;
+  flex: none;
+}
+.xicms-widget__hours { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
+.xicms-widget__hours th { text-align: left; font-weight: 500; padding: 0.15rem 0; }
+.xicms-widget__hours td { text-align: right; padding: 0.15rem 0; }
+.xicms-widget__hours-today { font-weight: 700; color: var(--xicms-primary, #4f46e5); }
+.xicms-widget__social { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
+.xicms-widget__social a {
+  display: inline-block;
+  padding: 0.25rem 0.6rem;
+  border-radius: 999px;
+  background: var(--xicms-muted, rgba(0, 0, 0, 0.05));
+  font-size: 0.82rem;
+  color: inherit;
+  text-decoration: none;
+}
+.xicms-widget__form { display: grid; gap: 0.5rem; }
+.xicms-widget__form input {
+  width: 100%;
+  padding: 0.5rem 0.6rem;
+  border: 1px solid var(--xicms-border-strong, rgba(0, 0, 0, 0.15));
+  border-radius: var(--xicms-radius, 10px);
+  font: inherit;
+}
+.xicms-widget--cta { background: var(--xicms-primary, #4f46e5); color: #fff; }
+.xicms-widget--cta .xicms-widget__title { color: #fff; }
+.xicms-widget__grid { display: grid; gap: 0.4rem; }
+.xicms-widget__grid[data-cols="2"] { grid-template-columns: repeat(2, 1fr); }
+.xicms-widget__grid[data-cols="3"] { grid-template-columns: repeat(3, 1fr); }
+.xicms-widget__grid[data-cols="4"] { grid-template-columns: repeat(4, 1fr); }
+.xicms-widget__photo { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 8px; }
+.xicms-widget__quote { font-size: 0.9rem; }
+.xicms-widget__quote p { margin: 0.2rem 0; font-style: italic; }
+.xicms-widget__stars { color: var(--xicms-star, #f59e0b); letter-spacing: 1px; }
+.xicms-widget__cardicon { font-size: 1.2rem; }
+.xicms-widget__cardlink { display: flex; gap: 0.5rem; color: inherit; text-decoration: none; }
+
+/* ════════════════════ Tabbladen ════════════════════ */
+.xicms-tabs__list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.25rem;
+  border-bottom: 2px solid var(--xicms-border, rgba(0, 0, 0, 0.08));
+  margin-bottom: 1rem;
+}
+.xicms-tabs__tab {
+  appearance: none;
+  border: 0;
+  background: transparent;
+  padding: 0.55rem 0.9rem;
+  font: inherit;
+  font-weight: 600;
+  cursor: pointer;
+  color: inherit;
+  opacity: 0.6;
+  border-bottom: 2px solid transparent;
+  margin-bottom: -2px;
+}
+.xicms-tabs__tab--active {
+  opacity: 1;
+  border-bottom-color: var(--xicms-primary, #4f46e5);
+  color: var(--xicms-primary, #4f46e5);
+}
+
+/* ════════════════════ Diensten / kaarten ════════════════════ */
+.xicms-cards__heading { margin: 0 0 0.25rem; }
+.xicms-cards__intro { margin: 0 0 1.25rem; opacity: 0.8; }
+.xicms-cards__grid { display: grid; gap: 1rem; }
+@media (min-width: 640px) {
+  .xicms-cards__grid[data-cols="2"] { grid-template-columns: repeat(2, 1fr); }
+  .xicms-cards__grid[data-cols="3"] { grid-template-columns: repeat(3, 1fr); }
+  .xicms-cards__grid[data-cols="4"] { grid-template-columns: repeat(2, 1fr); }
+}
+@media (min-width: 960px) {
+  .xicms-cards__grid[data-cols="4"] { grid-template-columns: repeat(4, 1fr); }
+}
+.xicms-cards__card {
+  display: block;
+  padding: 1.25rem;
+  border: 1px solid var(--xicms-border, rgba(0, 0, 0, 0.08));
+  border-radius: var(--xicms-radius, 12px);
+  background: var(--xicms-surface, #fff);
+  color: inherit;
+  text-decoration: none;
+}
+.xicms-cards__card--link { transition: transform 0.15s ease, box-shadow 0.15s ease; }
+.xicms-cards__card--link:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08); }
+.xicms-cards__icon { font-size: 2rem; display: block; margin-bottom: 0.5rem; }
+.xicms-cards__image { width: 100%; height: 160px; object-fit: cover; border-radius: 10px; margin-bottom: 0.75rem; }
+.xicms-cards__title { margin: 0 0 0.35rem; font-size: 1.05rem; }
+.xicms-cards__text { margin: 0; opacity: 0.8; }
+.xicms-cards__link { display: inline-block; margin-top: 0.6rem; font-weight: 600; color: var(--xicms-primary, #4f46e5); }
+
+/* ════════════════════ Downloads ════════════════════ */
+.xicms-downloads__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
+.xicms-downloads__link {
+  display: flex;
+  align-items: center;
+  gap: 0.6rem;
+  padding: 0.7rem 0.9rem;
+  border: 1px solid var(--xicms-border, rgba(0, 0, 0, 0.1));
+  border-radius: var(--xicms-radius, 10px);
+  color: inherit;
+  text-decoration: none;
+  background: var(--xicms-surface, #fff);
+}
+.xicms-downloads__link:hover { border-color: var(--xicms-primary, #4f46e5); }
+.xicms-downloads__icon { font-size: 1.2rem; }
+.xicms-downloads__label { font-weight: 600; flex: 1; }
+.xicms-downloads__meta { font-size: 0.8rem; opacity: 0.6; }
+
+/* ════════════════════ Aftelteller ════════════════════ */
+.xicms-countdown { text-align: center; }
+.xicms-countdown__heading { margin: 0 0 0.75rem; }
+.xicms-countdown__digits { display: inline-flex; gap: 0.75rem; }
+.xicms-countdown__unit {
+  min-width: 3.5rem;
+  padding: 0.6rem 0.4rem;
+  border-radius: var(--xicms-radius, 12px);
+  background: var(--xicms-muted, rgba(0, 0, 0, 0.05));
+}
+.xicms-countdown__value { display: block; font-size: 1.8rem; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
+.xicms-countdown__label { display: block; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; opacity: 0.6; margin-top: 0.25rem; }
+.xicms-countdown__expired { font-size: 1.4rem; font-weight: 700; }
+.xicms-widget--countdown .xicms-countdown__digits { gap: 0.4rem; }
+.xicms-widget--countdown .xicms-countdown__value { font-size: 1.3rem; }
+.xicms-widget--countdown .xicms-countdown__unit { min-width: 2.6rem; }
+
+/* ════════════════════ Carrousel / slider ════════════════════ */
+.xicms-slider { position: relative; }
+.xicms-slider__viewport { position: relative; overflow: hidden; border-radius: var(--xicms-radius, 12px); }
+.xicms-slider__track { display: flex; transition: transform 0.4s ease; }
+@media (prefers-reduced-motion: reduce) {
+  .xicms-slider__track { transition: none; }
+}
+.xicms-slider__slide { position: relative; flex: 0 0 100%; }
+.xicms-slider__image { width: 100%; aspect-ratio: var(--xicms-slider-ratio, 16 / 9); object-fit: cover; display: block; }
+.xicms-slider__caption {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  padding: 0.75rem 1rem;
+  background: linear-gradient(transparent, rgba(0, 0, 0, 0.6));
+  color: #fff;
+  font-weight: 600;
+}
+.xicms-slider__arrow {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 2.75rem; /* ≥44px raakdoel */
+  height: 2.75rem;
+  border-radius: 999px;
+  border: 0;
+  background: rgba(255, 255, 255, 0.85);
+  color: #111;
+  font-size: 1.4rem;
+  line-height: 1;
+  cursor: pointer;
+  display: grid;
+  place-items: center;
+}
+.xicms-slider__arrow--prev { left: 0.6rem; }
+.xicms-slider__arrow--next { right: 0.6rem; }
+.xicms-slider__dots { display: flex; justify-content: center; gap: 0.15rem; margin-top: 0.35rem; }
+/* Visueel een klein bolletje (content-box), maar een raakdoel van 24px+ (padding telt mee). */
+.xicms-slider__dot {
+  width: 1.5rem;
+  height: 1.5rem;
+  border-radius: 999px;
+  border: 0;
+  background: var(--xicms-border-strong, rgba(0, 0, 0, 0.25));
+  background-clip: content-box;
+  cursor: pointer;
+  padding: 0.45rem;
+}
+/* background-color (niet de shorthand): die zou background-clip: content-box resetten. */
+.xicms-slider__dot--active { background-color: var(--xicms-primary, #4f46e5); }
+
+/* ── 4.16: nieuwe modules ─────────────────────────────────────────────────── */
+
+/* Zwevende WhatsApp-knop. */
+.xicms-whatsapp {
+  position: fixed;
+  bottom: 1.1rem;
+  z-index: 9990;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.7rem 0.9rem;
+  border-radius: 999px;
+  background: #25d366;
+  color: #fff;
+  text-decoration: none;
+  font-weight: 600;
+  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.22);
+  transition: transform 0.12s ease;
+}
+.xicms-whatsapp[data-position="br"] { right: 1.1rem; }
+.xicms-whatsapp[data-position="bl"] { left: 1.1rem; }
+.xicms-whatsapp:hover { transform: translateY(-2px); }
+/* In de editor-preview inline tonen (niet zwevend over het canvas). */
+.xicms-whatsapp[data-preview="1"] {
+  position: static;
+  margin: 0.5rem 0;
+}
+
+/* Voor/na-vergelijker. */
+.xicms-beforeafter {
+  margin: 0;
+  position: relative;
+}
+.xicms-beforeafter__heading {
+  font-weight: 700;
+  margin-bottom: 0.6rem;
+}
+.xicms-beforeafter__stage {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  border-radius: var(--xicms-radius, 12px);
+}
+.xicms-beforeafter__img {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+.xicms-beforeafter__clip {
+  position: absolute;
+  inset: 0;
+}
+.xicms-beforeafter__divider {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 3px;
+  background: #fff;
+  box-shadow: 0 0 8px rgba(0, 0, 0, 0.4);
+  transform: translateX(-50%);
+  display: grid;
+  place-items: center;
+  pointer-events: none;
+}
+.xicms-beforeafter__handle {
+  background: #fff;
+  color: #334155;
+  border-radius: 999px;
+  width: 2.2rem;
+  height: 2.2rem;
+  display: grid;
+  place-items: center;
+  font-size: 0.8rem;
+  font-weight: 700;
+  letter-spacing: -1px;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
+}
+.xicms-beforeafter__badge {
+  position: absolute;
+  top: 0.7rem;
+  padding: 0.2rem 0.6rem;
+  border-radius: 999px;
+  background: rgba(15, 23, 42, 0.65);
+  color: #fff;
+  font-size: 0.75rem;
+  font-weight: 600;
+  pointer-events: none;
+}
+.xicms-beforeafter__badge--before { left: 0.7rem; }
+.xicms-beforeafter__badge--after { right: 0.7rem; }
+/* De range-input ligt onzichtbaar over het hele beeld: slepen/klikken/pijltjes werken native. */
+.xicms-beforeafter__range {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  opacity: 0;
+  cursor: ew-resize;
+  touch-action: none;
+}
+/* :has i.p.v. ~: de divider staat in de DOM vóór de range-input. */
+.xicms-beforeafter__stage:has(.xicms-beforeafter__range:focus-visible) .xicms-beforeafter__handle {
+  outline: 2px solid var(--xicms-primary, #4f46e5);
+}
+
+/* Portfolio/projecten. */
+.xicms-portfolio__item {
+  display: block;
+  width: 100%;
+  padding: 0;
+  border: 1px solid var(--xicms-border, rgba(0, 0, 0, 0.1));
+  border-radius: var(--xicms-radius, 12px);
+  overflow: hidden;
+  background: var(--xicms-surface, #fff);
+  color: inherit;
+  text-decoration: none;
+  text-align: left;
+  cursor: pointer;
+  font: inherit;
+  transition: transform 0.15s ease, box-shadow 0.15s ease;
+}
+.xicms-portfolio__item:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.1);
+}
+@media (prefers-reduced-motion: reduce) {
+  .xicms-portfolio__item:hover { transform: none; }
+}
+.xicms-portfolio__body {
+  display: grid;
+  gap: 0.15rem;
+  padding: 0.8rem 0.95rem 0.95rem;
+}
+.xicms-portfolio__cat {
+  font-size: 0.72rem;
+  text-transform: uppercase;
+  letter-spacing: 0.07em;
+  color: var(--xicms-primary, #4f46e5);
+  font-weight: 700;
+}
+.xicms-portfolio__title {
+  font-size: 1rem;
+}
+.xicms-portfolio__desc {
+  font-size: 0.85rem;
+  opacity: 0.7;
+}
+
+/* Vacatures. */
+.xicms-jobs__head {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 0.5rem;
+}
+.xicms-jobs__meta {
+  font-size: 0.85rem;
+  opacity: 0.65;
+}
+
+/* Kruimelpad. */
+.xicms-breadcrumbs {
+  font-size: 0.85rem;
+  margin: 0.6rem 0;
+}
+.xicms-breadcrumbs__list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.35rem;
+}
+.xicms-breadcrumbs__item + .xicms-breadcrumbs__item::before {
+  content: "/";
+  margin-right: 0.35rem;
+  opacity: 0.4;
+}
+.xicms-breadcrumbs a {
+  color: inherit;
+  opacity: 0.7;
+  text-decoration: none;
+}
+.xicms-breadcrumbs a:hover {
+  opacity: 1;
+  text-decoration: underline;
+}
+.xicms-breadcrumbs [aria-current="page"] {
+  font-weight: 600;
+}