@xiwebdesign/xicms-core 7.30.0 → 8.15.0

package/dist/styles.css

@@ -250,9 +250,7 @@
 .xicms-ve__shell {
   display: contents;
 }
-.xicms-ve__title {
-  font-size: 0.95rem;
-}
+
 .xicms-ve__path {
   font-size: 0.8rem;
   opacity: 0.7;
@@ -278,6 +276,8 @@
 }
 .xicms-ve__histbtn {
   appearance: none;
+  display: inline-grid;
+  place-items: center;
   border: 1px solid rgba(255, 255, 255, 0.25);
   border-radius: 6px;
   background: transparent;
@@ -330,15 +330,7 @@
      onvindbaar. Het paneel positioneert zichzelf nu als vaste lade (hieronder). */
   display: contents;
 }
-.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-x: hidden; /* een net-te-breed veld mag de lade niet horizontaal laten scrollen */
   /* Vaste lade rechts, van onder de editorbalk tot aan de demo-balk (of de schermrand).
@@ -354,7 +346,7 @@
   /* Boven de blokknoppen en potloodjes (10004-10005): die horen bij de pagina en moeten onder
      de lade doorlopen, niet er bovenop zweven. */
   z-index: 10007;
-  box-shadow: -12px 0 32px rgba(15, 23, 42, 0.18);
+  box-shadow: -12px 0 32px rgba(28, 25, 23, 0.18);
   overflow: auto;
   border-left: 1px solid var(--color-border, #e2e8f0);
   background: var(--color-background-card, #fff);
@@ -393,9 +385,6 @@
   font-size: 0.9rem;
   color: var(--color-text-secondary, #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. */
@@ -409,9 +398,7 @@
     order: 3;
     flex-basis: 100%;
   }
-  .xicms-ve__canvas {
-    padding: 1rem;
-  }
+
   /* Zolang de onder-lade open is heeft de publiceerknop geen plek: hij lag er qua z-index
      ónder (onklikbaar) en erboven zou hij het formulier afdekken. De lade heeft zijn eigen
      ✓ Opgeslagen/✕ Sluiten; publiceren doe je daarna — de knop komt terug zodra de lade sluit. */
@@ -425,82 +412,31 @@
     left: 0;
     right: 0;
     width: auto;
-    max-height: 60vh;
+    max-height: 70vh;
     border-left: 0;
-    border-top: 2px solid #cbd5e1;
-    box-shadow: 0 -12px 32px rgba(15, 23, 42, 0.18);
+    /* 8.11: een echte "bottom sheet": afgeronde bovenkant en een greep, zoals op een telefoon
+       gebruikelijk — geen kale grijze streep. */
+    border-top: 0;
+    border-radius: 16px 16px 0 0;
+    padding-top: 1.4rem;
+    box-shadow: 0 -12px 40px rgba(28, 25, 23, 0.22);
+  }
+  .xicms-ve__panel::before {
+    content: "";
+    position: sticky;
+    top: -0.9rem;
+    display: block;
+    width: 40px;
+    height: 4px;
+    margin: -0.9rem auto 0.5rem;
+    border-radius: 999px;
+    background: color-mix(in srgb, currentColor 22%, transparent);
   }
   .xicms-ve__inserter {
     flex-wrap: wrap;
   }
-  /* Touch-raakdoelen: de blok-toolbarknoppen (✏️ ↑ ↓ ⎘ 🗑) waren op een telefoon te klein om
-     betrouwbaar te raken (WCAG raakdoel ≥ 44px op mobiel). */
-  .xicms-ve-block__toolbar button {
-    min-width: 40px;
-    min-height: 40px;
-    font-size: 1rem;
-  }
-  .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.
    In rust bewust ONZICHTBAAR: het blok zou anders als een formulier vol stippellijnen lezen, en
    dan zie je de pagina niet meer. Het potloodje ernaast wijst het veld aan; de omlijning verschijnt
@@ -513,14 +449,14 @@
 }
 .xicms-ve-inline:hover,
 .xicms-ve-inline.is-hover {
-  outline-color: rgba(79, 70, 229, 0.45);
-  background: rgba(79, 70, 229, 0.05);
+  outline-color: rgba(var(--xicms-tool-accent-rgb, 79, 70, 229), 0.45);
+  background: rgba(var(--xicms-tool-accent-rgb, 79, 70, 229), 0.05);
 }
 .xicms-ve-inline.is-editing {
   cursor: text;
   outline: 2px solid var(--xicms-primary, #4f46e5);
   outline-offset: 3px;
-  background: rgba(79, 70, 229, 0.06);
+  background: rgba(var(--xicms-tool-accent-rgb, 79, 70, 229), 0.06);
 }
 /* Het potlood: de bewuste stap tussen "dit kán" en "ik bewerk het nu". Zo licht mogelijk — geen
    rand, geen schaduw, geen wit schijfje: een blok met tien velden moet geen kerstboom worden.
@@ -538,7 +474,7 @@
   /* Het canvas toont de site van de klant: die kan wit zijn of een donkere foto. Eén vaste kleur
      verdwijnt dus altijd ergens. Een donker, halfdoorzichtig schijfje met een wit potlood houdt
      zich op allebei staande — licht genoeg om niet op te dringen, donker genoeg om te zien. */
-  background: rgba(15, 23, 42, 0.4);
+  background: rgba(28, 25, 23, 0.4);
   color: #fff;
   cursor: pointer;
   opacity: 0.5;
@@ -550,10 +486,10 @@
   /* Donker blijven, niet de merkkleur: `--xicms-primary` is van de klant en kan licht zijn
      (goud, lime) — dan werd dit wit-op-licht en "verdween" de knop precies bij het aanwijzen.
      Gereedschap houdt zijn eigen kleuren (zie het EditBar-commentaar). */
-  background: rgba(15, 23, 42, 0.92);
+  background: rgba(28, 25, 23, 0.92);
 }
 .xicms-ve-pencil:focus-visible {
-  outline: 2px solid #a5b4fc;
+  outline: 2px solid var(--xicms-tool-focus, #a5b4fc);
   outline-offset: 1px;
 }
 /* Het potlood van het veld dat je NU bewerkt wordt een groen vinkje: "het is goed, klaar met dit
@@ -594,7 +530,7 @@
   background: rgba(255, 255, 255, 0.16);
 }
 .xicms-ve-fmtbar button:focus-visible {
-  outline: 2px solid #a5b4fc;
+  outline: 2px solid var(--xicms-tool-focus, #a5b4fc);
   outline-offset: 1px;
 }
 .xicms-ve-fmtbar__sep {
@@ -603,6 +539,45 @@
   margin: 3px 4px;
   background: rgba(255, 255, 255, 0.25);
 }
+/* 8.6: de werkbalk van de volledige editor op de site. */
+.xicms-ve-fmtbar { flex-wrap: wrap; max-width: calc(100vw - 16px); }
+.xicms-ve-fmtbar button.is-actief { background: rgba(255, 255, 255, 0.24); }
+.xicms-ve-fmtbar button.xicms-ve-fmtbar__klaar {
+  margin-left: 4px;
+  padding: 0 12px;
+  background: #16a34a;
+  font-weight: 600;
+}
+.xicms-ve-fmtbar button.xicms-ve-fmtbar__klaar:hover { background: #15803d; }
+.xicms-ve-fmtbar__tip {
+  padding: 0 6px 0 8px;
+  color: rgba(255, 255, 255, 0.6);
+  font-size: 0.75rem;
+  white-space: nowrap;
+}
+.xicms-ve-fmtbar__tip kbd {
+  padding: 0 4px;
+  border: 1px solid rgba(255, 255, 255, 0.35);
+  border-radius: 4px;
+  font: inherit;
+}
+@media (max-width: 640px) { .xicms-ve-fmtbar__tip { display: none; } }
+/* Het bewerkvlak zelf: de tekst houdt de opmaak van de site (zelfde klassen als het origineel). */
+.xicms-ve-rijk {
+  border-radius: 4px;
+  outline: 2px solid var(--xicms-primary, #4f46e5);
+  outline-offset: 3px;
+  background: rgba(var(--xicms-tool-accent-rgb, 79, 70, 229), 0.04);
+}
+.xicms-ve-rijk .ProseMirror { outline: none; min-height: 2.5em; cursor: text; }
+.xicms-ve-rijk .ProseMirror img { max-width: 100%; height: auto; }
+.xicms-ve-rijk .ProseMirror img.ProseMirror-selectednode { outline: 3px solid var(--xicms-primary, #4f46e5); }
+.xicms-ve-rijk .ProseMirror table { border-collapse: collapse; width: 100%; }
+.xicms-ve-rijk .ProseMirror th,
+.xicms-ve-rijk .ProseMirror td { border: 1px solid rgba(100, 116, 139, 0.45); padding: 0.35em 0.5em; vertical-align: top; min-width: 3em; }
+.xicms-ve-rijk .ProseMirror th p,
+.xicms-ve-rijk .ProseMirror td p { margin: 0; }
+.xicms-ve-rijk .ProseMirror .selectedCell { background: rgba(var(--xicms-tool-accent-rgb, 79, 70, 229), 0.1); }
 /* Inline afbeelding vervangen (visuele editor): icoontje over het beeld van het geselecteerde blok. */
 .xicms-ve-img { line-height: 0; }
 .xicms-ve-img__btn {
@@ -640,57 +615,7 @@
   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) {
-  /* Op mobiel is er geen hover — de toolbar toont alleen bij selectie, en de brede knoppenrij
-     (5 knoppen × 40px raakdoel) besloeg dan bijna de volledige breedte en viel absoluut-gepositioneerd
-     over de eerste regel van de bloktekst heen (moeilijk te lezen, en per ongeluk 🗑 raken lag voor
-     de hand). In-flow boven het blok i.p.v. eroverheen. Ná de losstaande regel hierboven gezet zodat
-     hij in de cascade wint (media queries geven zelf geen extra specificiteit). */
-  .xicms-ve-block__toolbar {
-    position: static;
-    flex-wrap: wrap;
-    border-radius: 8px;
-    margin-bottom: 0.35rem;
-  }
-}
+
 
 /* Foutkaart voor een block dat niet kon renderen (alleen zichtbaar in de editor-preview). */
 .xicms-block-error {
@@ -759,14 +684,6 @@
   .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 */
 /*
  * De beheerbalk ZWEEFT ONDERAAN, gecentreerd — en in beide toestanden op precies dezelfde plek.
@@ -807,7 +724,7 @@
    * doorschijnend glas (meer verzadiging in de blur, minder dekking) en de schaduw werd zachter,
    * zodat het als gereedschap ernaast zweeft in plaats van als een blok erbovenop te liggen.
    */
-  background: rgba(30, 41, 59, 0.72);
+  background: rgba(41, 37, 36, 0.72);
   -webkit-backdrop-filter: saturate(1.8) blur(16px);
   backdrop-filter: saturate(1.8) blur(16px);
   color: #fff;
@@ -915,7 +832,7 @@
   color: #fff;
 }
 .xicms-editbar__btn:focus-visible {
-  outline: 2px solid #a5b4fc;
+  outline: 2px solid var(--xicms-tool-focus, #a5b4fc);
   outline-offset: 2px;
 }
 /*
@@ -1022,7 +939,8 @@
 /* Knopvarianten (gedeeld door hero/cta) */
 .xicms-btn--primary {
   background: var(--xicms-primary, #4f46e5);
-  color: #fff;
+  /* 8.12: tekstkleur rekent mee (wit op donker, donker op licht) — wit op een gele merkkleur was onleesbaar. */
+  color: var(--xicms-on-primary, #fff);
 }
 .xicms-btn--secondary {
   background: var(--xicms-accent, #6366f1);
@@ -1162,6 +1080,12 @@
   font-size: 1.2rem;
   opacity: 0.85;
   margin: 0;
+  /* 8.12: een ondertitel leest prettig tot ±60 tekens per regel; daarboven liep hij op een breed
+     scherm in één lange streep van rand tot rand. */
+  max-width: 60ch;
+}
+.xicms-hero[data-align="center"] .xicms-hero__sub {
+  margin-inline: auto;
 }
 .xicms-hero__buttons,
 .xicms-cta__buttons {
@@ -1215,6 +1139,32 @@
 .xicms-richtext > :first-child {
   margin-top: 0;
 }
+/* 8.6: lijsten, citaten en lijnen in rich text. De reset van het thema haalt bolletjes en inspringing
+   weg, dus een opsomming uit de editor stond op de site als losse regels. `:where()` houdt de
+   specificiteit laag: een site die zelf lijsten opmaakt, wint. */
+.xicms-richtext :where(ul, ol) {
+  margin: 0 0 1em;
+  padding-left: 1.4em;
+}
+.xicms-richtext :where(ul) { list-style: disc; }
+.xicms-richtext :where(ol) { list-style: decimal; }
+.xicms-richtext :where(li) { margin: 0.2em 0; }
+/* Gecentreerd blok: bolletjes bij de tekst, niet los in de linkermarge. */
+.xicms-block--align-center .xicms-richtext :where(ul, ol) { list-style-position: inside; padding-left: 0; }
+/* TipTap zet <p> in elke <li>; als blok zou het bolletje dan op een eigen regel staan. */
+.xicms-block--align-center .xicms-richtext :where(li > p) { display: inline; }
+.xicms-richtext :where(li > p) { margin: 0; }
+.xicms-richtext :where(blockquote) {
+  margin: 1em 0;
+  padding: 0.2em 0 0.2em 1em;
+  border-left: 3px solid var(--xicms-primary, #4f46e5);
+  font-style: italic;
+}
+.xicms-richtext :where(hr) {
+  margin: 1.5em 0;
+  border: 0;
+  border-top: 1px solid rgba(100, 116, 139, 0.35);
+}
 .xicms-richtext a {
   color: var(--xicms-primary, #4f46e5);
 }
@@ -1338,14 +1288,7 @@
   .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;
@@ -1396,11 +1339,12 @@
 .xicms-form__success {
   padding: 1rem;
   border-radius: 10px;
-  background: #ecfdf5;
-  color: #065f46;
+  /* 8.12: tokens, zodat de melding in donkere modus meekleurt. */
+  background: color-mix(in srgb, var(--xicms-success-fg, #15803d) 12%, transparent);
+  color: var(--xicms-success-fg, #065f46);
 }
 .xicms-form__error {
-  color: #dc2626;
+  color: var(--xicms-danger-fg, #b91c1c);
   margin: 0;
 }
 
@@ -1541,24 +1485,10 @@
   font-size: 0.9rem;
   font-weight: 600;
 }
-/* Radiogroep in formulieren. */
+/* Radiogroep in formulieren: sinds 8.0 een Astryx RadioList, die zijn eigen opmaak meebrengt.
+   `.xicms-form__radios` blijft als stabiele haak op de container. */
 .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). */
@@ -1968,6 +1898,49 @@
   color: inherit;
 }
 
+/* "Website gemaakt door Xi Webdesign": één stille regel, erft de kleur en het
+   font van de footer eromheen zodat hij op elke klantstijl past. */
+.xicms-footer__credit {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.15rem 0.5rem;
+  margin-top: 1rem;
+  padding-top: 0.85rem;
+  border-top: 1px solid color-mix(in srgb, currentColor 12%, transparent);
+  font-size: 0.78rem;
+  line-height: 1.5;
+  opacity: 0.6;
+}
+.xicms-footer__credit:hover {
+  opacity: 0.85;
+}
+.xicms-footer__credit a {
+  color: inherit;
+  text-decoration: none;
+}
+.xicms-footer__credit-merk {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.4rem;
+  font-weight: 650;
+}
+.xicms-footer__credit-merk svg {
+  width: 0.95rem;
+  height: 0.95rem;
+  flex: none;
+}
+.xicms-footer__credit-merk:hover,
+.xicms-footer__credit-cta:hover {
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+.xicms-footer__credit-cta {
+  text-decoration: underline;
+  text-underline-offset: 2px;
+  text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
+}
+
 /* Embed-consent placeholder (video/kaart/booking zonder toestemming) */
 .xicms-embed-consent {
   display: grid;
@@ -2579,8 +2552,8 @@
   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--cta { background: var(--xicms-primary, #4f46e5); color: var(--xicms-on-primary, #fff); }
+.xicms-widget--cta .xicms-widget__title { color: var(--xicms-on-primary, #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); }
@@ -3197,7 +3170,7 @@
   gap: 2px;
   padding: 2px;
   border-radius: 999px;
-  background: rgba(15, 23, 42, 0.42);
+  background: rgba(28, 25, 23, 0.42);
   -webkit-backdrop-filter: blur(6px);
   backdrop-filter: blur(6px);
   opacity: 0.5;
@@ -3206,7 +3179,7 @@
 .xicms-ve-blokknoppen:hover,
 .xicms-ve-blokknoppen:focus-within {
   opacity: 1;
-  background: rgba(15, 23, 42, 0.9);
+  background: rgba(28, 25, 23, 0.9);
 }
 .xicms-ve-blokknop {
   appearance: none;
@@ -3226,7 +3199,7 @@
   background: rgba(255, 255, 255, 0.22);
 }
 .xicms-ve-blokknop:focus-visible {
-  outline: 2px solid #a5b4fc;
+  outline: 2px solid var(--xicms-tool-focus, #a5b4fc);
   outline-offset: 1px;
 }
 /* De rest van het gereedschap (verplaatsen, dupliceren, verwijderen) toont zich bij aanwijzen,
@@ -3285,22 +3258,26 @@
 }
 
 /*
- * Rood en onderstreept = dit staat nog NIET op de live site.
+ * Gemarkeerd (zachte tint + stippellijn, tot 8.11 rood) = dit staat nog NIET op de live site.
  *
  * Bewust een onderstreping en niet alleen kleur: kleur alleen is geen boodschap voor wie
  * kleurenblind is, en dit is te belangrijk om aan kleur alleen op te hangen. De streep loopt onder
  * de tekst door zonder de regelhoogte te veranderen, zodat de pagina niet verspringt zodra je iets
  * wijzigt — anders zou de markering zelf de layout laten dansen tijdens het typen.
  */
+/* 8.11: nog niet live = een subtiele markering, niet meer rode tekst met een golflijn. Dat las
+   als een spelfout of foutmelding, was op donkere vlakken onleesbaar en overschreef de typografie
+   van de site. Nu: een zachte achtergrondtint en een stippellijn eronder, in de gereedschapskleur —
+   de tekst zelf houdt zijn eigen kleur. */
 .xicms-ve-gewijzigd {
-  color: #b91c1c !important;
-  text-decoration: underline wavy #b91c1c 1px;
-  text-underline-offset: 3px;
+  background: color-mix(in srgb, var(--xicms-tool-accent, #4f46e5) 9%, transparent);
+  text-decoration: underline dotted color-mix(in srgb, var(--xicms-tool-accent, #4f46e5) 70%, transparent) 2px;
+  text-underline-offset: 4px;
+  border-radius: 3px;
 }
-/* Een heel nieuw of verplaatst blok: een streep in de kantlijn i.p.v. alle tekst rood. Alles rood
-   kleuren van een blok dat in zijn geheel nieuw is, is geen informatie maar een rode lap. */
+/* Een heel nieuw of verplaatst blok: een streep in de kantlijn i.p.v. alle tekst gemarkeerd. */
 .xicms-ve-nieuw {
-  box-shadow: inset 3px 0 0 0 #b91c1c;
+  box-shadow: inset 3px 0 0 0 var(--xicms-tool-accent, #4f46e5);
 }
 
 /*
@@ -3314,8 +3291,9 @@
 /* Eénmalige starthint van de bewerkmodus: vast onder de balk, midden, weg te klikken. */
 .xicms-ve-starthint {
   position: fixed;
-  /* Vlak onder het zwevende pilletje (10px top + ±34px hoogte + 6px lucht). */
-  top: 50px;
+  /* 8.11: boven de balk, die sinds 7.22 ONDERAAN staat. Met `top: 50px` (nog van de balk bovenin)
+     lag de hint over het menu van de site — precies waar je als eerste naar kijkt. */
+  bottom: calc(64px + var(--xicms-bottombar, 0px));
   left: 50%;
   transform: translateX(-50%);
   z-index: 10006;
@@ -3325,11 +3303,11 @@
   max-width: min(92vw, 560px);
   padding: 0.6rem 0.9rem;
   border-radius: 12px;
-  background: rgba(15, 23, 42, 0.94);
+  background: rgba(28, 25, 23, 0.94);
   color: #fff;
   font-size: 0.85rem;
   line-height: 1.45;
-  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.35);
+  box-shadow: 0 12px 32px rgba(28, 25, 23, 0.35);
 }
 .xicms-ve-starthint button {
   flex: none;
@@ -3345,7 +3323,9 @@
 
 /* Vervolg-actie in een toast ("Bekijk als bezoeker →"). */
 .xicms-toast__actie {
-  display: inline-block;
+  /* Eigen regel onder de titel (8.2): inline plakte "Ongedaan maken" tegen de tekst aan. */
+  display: block;
+  width: fit-content;
   margin-top: 0.45rem;
   padding: 0.3rem 0.7rem;
   border: 1px solid currentColor;
@@ -3400,16 +3380,16 @@
   transition: background 0.15s ease, transform 0.15s ease;
 }
 .xicms-ve-publiceer.is-klaar {
-  background: #2563eb;
+  background: var(--xicms-tool-accent, #4f46e5);
   color: #fff;
   cursor: pointer;
 }
 .xicms-ve-publiceer.is-klaar:hover {
-  background: #1d4ed8;
+  background: color-mix(in srgb, var(--xicms-tool-accent, #4f46e5) 85%, #000);
   transform: translateY(-1px);
 }
 .xicms-ve-publiceer:focus-visible {
-  outline: 2px solid #a5b4fc;
+  outline: 2px solid var(--xicms-tool-focus, #a5b4fc);
   outline-offset: 3px;
 }
 .xicms-ve-publiceer__label {
@@ -3431,7 +3411,7 @@
   padding: 0.45rem 0.9rem;
   border: 1px solid rgba(255, 255, 255, 0.14);
   border-radius: 999px;
-  background: rgba(15, 23, 42, 0.75);
+  background: rgba(28, 25, 23, 0.75);
   color: rgba(255, 255, 255, 0.85);
   font: inherit;
   font-size: 0.78rem;
@@ -3444,7 +3424,7 @@
   color: #fff;
 }
 .xicms-ve-verwerp:focus-visible {
-  outline: 2px solid #a5b4fc;
+  outline: 2px solid var(--xicms-tool-focus, #a5b4fc);
   outline-offset: 2px;
 }
 @media (min-width: 721px) {
@@ -3462,7 +3442,6 @@
   opacity: 0.9;
 }
 
-
 /* ── Hoofdnavigatie (SiteNav, 7.24) ───────────────────────────────────────────
  * Unstyled-by-default: alleen de structuur die een submenu nodig heeft. Kleuren/afstanden komen
  * uit de site zelf (.site-header nav a in de template) of uit een eigen `.xicms-nav`-laag. */
@@ -3571,3 +3550,965 @@
   background: #f59e0b;
   box-shadow: 0 0 0 2px #0f172a;
 }
+
+/* Raakdoelen op touch (8.2). Het potlood (18px, half doorzichtig) en de blokknoppen (26px) waren op
+   een telefoon of tablet nauwelijks te raken; de oude touch-regel gold nog voor een toolbar die niet
+   meer bestaat. Het zichtbare formaat blijft gelijk (de posities worden in JS op die maat berekend);
+   een onzichtbare ::before vergroot alleen het raakvlak tot ~44px. Op touch ook vol zichtbaar: er is
+   geen hover die ze anders tevoorschijn haalt. */
+@media (pointer: coarse) {
+  .xicms-ve-pencil,
+  .xicms-ve-blokknop {
+    position: relative;
+    opacity: 1;
+  }
+  .xicms-ve-pencil {
+    position: fixed;
+  }
+  .xicms-ve-pencil::before,
+  .xicms-ve-blokknop::before {
+    content: "";
+    position: absolute;
+    inset: -11px;
+  }
+  .xicms-ve-blokknop::before {
+    inset: -8px;
+  }
+  .xicms-ve-blokknoppen {
+    gap: 10px;
+    padding: 6px;
+    opacity: 1;
+    background: rgba(28, 25, 23, 0.85);
+  }
+}
+
+/* Laadmelding van de editor (8.2): de chunk komt pas bij "Bewerken"; tot dan zag je niets. */
+.xicms-editor-laden {
+  position: fixed;
+  left: 50%;
+  bottom: 1.25rem;
+  transform: translateX(-50%);
+  z-index: 10010;
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.6rem 1rem;
+  border-radius: 999px;
+  background: rgba(28, 25, 23, 0.92);
+  color: #fff;
+  font: 500 0.9rem/1.3 system-ui, sans-serif;
+  box-shadow: 0 8px 24px rgba(28, 25, 23, 0.25);
+}
+.xicms-editor-laden button {
+  appearance: none;
+  border: 0;
+  border-radius: 999px;
+  padding: 0.3rem 0.8rem;
+  background: rgba(255, 255, 255, 0.16);
+  color: inherit;
+  font: inherit;
+  cursor: pointer;
+}
+.xicms-editor-laden button:focus-visible {
+  outline: 2px solid #fff;
+  outline-offset: 2px;
+}
+
+/* 8.8: pagina-overgangen (siteConfig.paginaOvergang), via React <ViewTransition>. */
+::view-transition-old(.xicms-vervagen) { animation: 120ms ease-in both xicms-vt-uit; }
+::view-transition-new(.xicms-vervagen) { animation: 200ms ease-out 60ms both xicms-vt-in; }
+::view-transition-old(.xicms-schuiven) { animation: 140ms ease-in both xicms-vt-uit, 300ms ease-in-out both xicms-vt-omhoog; }
+::view-transition-new(.xicms-schuiven) { animation: 220ms ease-out 100ms both xicms-vt-in, 300ms ease-in-out both xicms-vt-erin; }
+@keyframes xicms-vt-uit { to { opacity: 0; } }
+@keyframes xicms-vt-in { from { opacity: 0; } }
+@keyframes xicms-vt-omhoog { to { translate: 0 -12px; } }
+@keyframes xicms-vt-erin { from { translate: 0 12px; } }
+@media (prefers-reduced-motion: reduce) {
+  ::view-transition-group(*),
+  ::view-transition-old(*),
+  ::view-transition-new(*) { animation: none !important; }
+}
+
+/* 8.10: een gekleurd vlak over de volle breedte houdt zijn inhoud op containerbreedte — anders raakt
+   de tekst de rand van het scherm. Links in een donker vlak volgen de tekstkleur (de merkkleur is
+   daar vaak onleesbaar). */
+.xicms-block--bg.xicms-block--full {
+  padding-left: max(var(--xicms-container-pad), calc((100vw - var(--xicms-container-max)) / 2));
+  padding-right: max(var(--xicms-container-pad), calc((100vw - var(--xicms-container-max)) / 2));
+}
+.xicms-block--bg-donker .xicms-richtext a,
+.xicms-block--bg-donker :where(p, li) > a {
+  color: inherit;
+  text-decoration: underline;
+}
+
+/* 8.10: tekst die de klant typt mag de layout niet breken.
+   - Een lang Nederlands samengesteld woord ("arbeidsongeschiktheidsverzekering") in een groot
+     koppen-font viel op een telefoon half buiten beeld (`.xicms-root` knipt horizontaal af). Breken
+     binnen het woord is lelijk, maar beter dan onzichtbaar — en gebeurt alleen bij echte overloop.
+   - Een tabel uit Excel is vaak breder dan een telefoon: hij scrolt nu zelf, de pagina niet.
+   - Een staande telefoonfoto in een afbeeldingsblok werd ruim 1000px hoog. */
+/* Niet op h3/h4: die staan meestal in smalle kaarten, waar een woord dat net iets te breed is
+   anders zijn laatste letter op een eigen regel kreeg ("Kindvriendelij-k"); een paar pixels
+   uitsteken binnen de kaart is daar beter. */
+.xicms-root :where(h1, h2, .xicms-richtext, .xicms-richtext :where(p, li)) {
+  /* Alleen breken als een woord écht niet past. Geen `hyphens: auto`: dat brak ook woorden die
+     prima op een eigen regel pasten ("Bood-schap" in een hero) — lelijker dan het probleem. */
+  overflow-wrap: break-word;
+}
+.xicms-richtext table {
+  display: block;
+  max-width: 100%;
+  overflow-x: auto;
+}
+.xicms-image:not([data-ratio]) img,
+.xicms-image[data-ratio="auto"] img {
+  display: block;
+  width: auto;
+  max-width: 100%;
+  max-height: 80vh;
+  margin-inline: auto;
+}
+
+/* 8.11: een blok dat (nog) niets toont — een galerij zonder foto's, een video zonder adres — was
+   in de editor onvindbaar: 0×0, dus geen potlood en geen tandwiel, en "weg" zodra je het paneel
+   sloot. In de werkversie staat er nu een vak met zijn naam. Bezoekers zien niets. */
+[data-xicms-block][data-xicms-block-label]:empty {
+  display: block !important;
+  margin: 1.5rem auto;
+  max-width: var(--xicms-container-max);
+  padding: 2.25rem 1.25rem;
+  border: 2px dashed color-mix(in srgb, currentColor 25%, transparent);
+  border-radius: 12px;
+  text-align: center;
+  font: 500 0.95rem/1.4 system-ui, sans-serif;
+  color: color-mix(in srgb, currentColor 65%, transparent);
+}
+[data-xicms-block][data-xicms-block-label]:empty::before {
+  content: "Leeg blok: " attr(data-xicms-block-label) " — vul het in met het tandwiel ⚙";
+}
+
+/* ── 8.11: gereedschap op de pagina (InlineGereedschap) ──────────────────────────────────────
+   Gereedschapstokens: één accent en één glas voor alles wat de editor óp de site tekent. Golf 14
+   zet het bestaande editorgereedschap op dezelfde tokens. */
+:root {
+  --xicms-tool-glas: rgba(28, 25, 23, 0.9);
+  --xicms-tool-glas-licht: rgba(28, 25, 23, 0.55);
+  --xicms-tool-fg: #fafaf9;
+  --xicms-tool-muted: rgba(250, 250, 249, 0.68);
+  --xicms-tool-accent: #4f46e5;
+  --xicms-tool-accent-rgb: 79, 70, 229;
+  --xicms-tool-focus: #a5b4fc;
+  --xicms-tool-schaduw: 0 8px 24px rgba(2, 6, 23, 0.28);
+}
+.xicms-ve-snel,
+.xicms-ve-item,
+.xicms-ve-plus,
+.xicms-ve-linkchip {
+  position: fixed;
+  z-index: 10005;
+  font: 500 12.5px/1.2 system-ui, -apple-system, "Segoe UI", sans-serif;
+  color: var(--xicms-tool-fg);
+  background: var(--xicms-tool-glas);
+  -webkit-backdrop-filter: blur(8px);
+  backdrop-filter: blur(8px);
+  box-shadow: var(--xicms-tool-schaduw);
+}
+.xicms-ve-snel {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 4px 10px;
+  max-width: min(640px, calc(100vw - 120px));
+  padding: 4px 6px 4px 10px;
+  border-radius: 12px;
+}
+.xicms-ve-snel__groep {
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+}
+.xicms-ve-snel__label {
+  margin-right: 4px;
+  color: var(--xicms-tool-muted);
+}
+.xicms-ve-snel__knop,
+.xicms-ve-snel__meer,
+.xicms-ve-item button {
+  appearance: none;
+  min-width: 28px;
+  height: 28px;
+  padding: 0 8px;
+  border: 0;
+  border-radius: 8px;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  cursor: pointer;
+}
+.xicms-ve-snel__knop:hover,
+.xicms-ve-snel__meer:hover,
+.xicms-ve-item button:hover:not(:disabled) {
+  background: rgba(255, 255, 255, 0.16);
+}
+.xicms-ve-snel__knop[aria-checked="true"] {
+  background: var(--xicms-tool-fg);
+  color: #1c1917;
+}
+.xicms-ve-snel__meer {
+  margin-left: 2px;
+  border-left: 1px solid rgba(255, 255, 255, 0.18);
+  border-radius: 0 8px 8px 0;
+}
+.xicms-ve-item {
+  display: flex;
+  gap: 1px;
+  padding: 2px;
+  border-radius: 10px;
+  transform: translateX(-100%);
+}
+.xicms-ve-item button:disabled {
+  opacity: 0.35;
+  cursor: default;
+}
+.xicms-ve-item button.is-gevaar:hover {
+  background: rgba(239, 68, 68, 0.85);
+}
+.xicms-ve-plus {
+  transform: translateX(-50%);
+  padding: 6px 14px;
+  border: 0;
+  border-radius: 999px;
+  cursor: pointer;
+}
+.xicms-ve-plus:hover {
+  background: var(--xicms-tool-accent);
+}
+.xicms-ve-linkchip {
+  max-width: 320px;
+  overflow: hidden;
+  padding: 5px 10px;
+  border: 0;
+  border-radius: 8px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  cursor: pointer;
+}
+.xicms-ve-linkchip:hover {
+  background: var(--xicms-tool-accent);
+}
+:is(.xicms-ve-snel__knop, .xicms-ve-snel__meer, .xicms-ve-item button, .xicms-ve-plus, .xicms-ve-linkchip):focus-visible {
+  outline: 2px solid var(--xicms-tool-focus);
+  outline-offset: 1px;
+}
+@media (pointer: coarse) {
+  .xicms-ve-snel__knop,
+  .xicms-ve-snel__meer,
+  .xicms-ve-item button {
+    min-width: 40px;
+    height: 40px;
+  }
+  .xicms-ve-plus,
+  .xicms-ve-linkchip {
+    padding: 10px 16px;
+  }
+}
+
+/* 8.11: "+" op de naad onder een blok — hier iets toevoegen. */
+.xicms-ve-tussenplus {
+  position: fixed;
+  z-index: 10004;
+  display: grid;
+  place-items: center;
+  width: 30px;
+  height: 30px;
+  transform: translate(-50%, -50%);
+  border: 2px solid #fff;
+  border-radius: 999px;
+  background: var(--xicms-tool-glas);
+  color: var(--xicms-tool-fg);
+  font: 600 18px/1 system-ui, sans-serif;
+  box-shadow: var(--xicms-tool-schaduw);
+  cursor: pointer;
+  transition: transform 0.12s ease, background 0.12s ease;
+}
+.xicms-ve-tussenplus:hover,
+.xicms-ve-tussenplus:focus-visible {
+  background: var(--xicms-tool-accent);
+  transform: translate(-50%, -50%) scale(1.12);
+  outline: none;
+}
+@media (pointer: coarse) {
+  .xicms-ve-tussenplus { width: 40px; height: 40px; }
+}
+
+/* 8.11: kaders rond blokken (BlokKader). */
+.xicms-ve-kader {
+  position: fixed;
+  z-index: 10003;
+  pointer-events: none;
+  border-radius: 4px;
+}
+.xicms-ve-kader.is-aangewezen {
+  outline: 1.5px dashed color-mix(in srgb, var(--xicms-tool-accent) 70%, transparent);
+  outline-offset: -1px;
+}
+.xicms-ve-kader.is-gekozen {
+  outline: 2px solid var(--xicms-tool-accent);
+  outline-offset: -2px;
+}
+.xicms-ve-kader__naam {
+  position: absolute;
+  top: 0;
+  left: 0;
+  padding: 2px 8px;
+  border-radius: 0 0 6px 0;
+  background: var(--xicms-tool-accent);
+  color: #fff;
+  font: 600 11px/1.5 system-ui, sans-serif;
+}
+
+/* 8.11: zijlade open op een breed scherm → de balk centreert in de ruimte náást de lade, anders
+   schoof de publiceerknop (die met de lade meeschuift) over de balk heen. */
+@media (min-width: 721px) {
+  :root:has(.xicms-ve__panel) .xicms-ve__bar {
+    left: calc((100vw - clamp(360px, 28vw, 480px)) / 2);
+    max-width: calc(100vw - clamp(360px, 28vw, 480px) - 340px);
+  }
+  /* De lade zegt zelf "✓ Opgeslagen"; dubbel in de balk maakte hem te breed. */
+  :root:has(.xicms-ve__panel) .xicms-ve__status {
+    display: none;
+  }
+}
+
+/* 8.11: tijdens het bewerken hoort de cookiemelding van de site niet over je werk te liggen; de
+   beheerder ziet hem als bezoeker ("Live site") gewoon weer. */
+:root:has(.xicms-ve__shell) .xicms-consent {
+  display: none;
+}
+@media (max-width: 720px) {
+  .xicms-ve-starthint {
+    left: 12px;
+    right: 12px;
+    transform: none;
+    max-width: none;
+    flex-direction: column;
+    align-items: stretch;
+    bottom: calc(110px + var(--xicms-bottombar, 0px));
+  }
+}
+@media (max-width: 720px) {
+  /* Telefoon: de snelle keuzes als één scrollbare rij over de volle breedte, niet als blok over
+     de kaarten heen. */
+  .xicms-ve-snel {
+    left: 8px !important;
+    right: 8px;
+    max-width: none;
+    flex-wrap: nowrap;
+    overflow-x: auto;
+    scrollbar-width: none;
+  }
+  .xicms-ve-snel__groep,
+  .xicms-ve-snel__label,
+  .xicms-ve-snel__knop {
+    flex: none;
+    white-space: nowrap;
+  }
+}
+
+/* ── 8.12: nieuwslijst als raster ───────────────────────────────────────────────────────── */
+.xicms-nieuwslijst {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
+  gap: 1.25rem;
+}
+.xicms-nieuwslijst > :not(.xicms-nieuwskaart) {
+  grid-column: 1 / -1;
+}
+.xicms-nieuwskaart {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  padding: 0;
+  transition: transform 0.15s ease, box-shadow 0.15s ease;
+}
+.xicms-nieuwskaart:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.08);
+}
+.xicms-nieuwskaart__beeld {
+  display: block;
+  width: 100%;
+  aspect-ratio: 16 / 10;
+  height: auto;
+  object-fit: cover;
+}
+.xicms-nieuwskaart__tekst {
+  display: grid;
+  gap: 0.35rem;
+  padding: 1rem 1.15rem 1.25rem;
+}
+.xicms-nieuwskaart__datum {
+  margin: 0;
+  font-size: 0.8rem;
+  opacity: 0.7;
+}
+.xicms-nieuwskaart__titel {
+  margin: 0;
+  font-size: 1.2rem;
+  line-height: 1.3;
+}
+.xicms-nieuwskaart__titel a {
+  color: inherit;
+  text-decoration: none;
+}
+/* De hele kaart is de link (één tabstop, geen geneste links). */
+.xicms-nieuwskaart__titel a::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+}
+.xicms-nieuwskaart:hover .xicms-nieuwskaart__titel a,
+.xicms-nieuwskaart__titel a:focus-visible {
+  text-decoration: underline;
+  text-underline-offset: 3px;
+}
+.xicms-nieuwskaart__concept {
+  margin-left: 0.5rem;
+  font-size: 0.75rem;
+  color: var(--xicms-warning-fg, #b45309);
+}
+.xicms-nieuwskaart__samenvatting {
+  margin: 0;
+  opacity: 0.85;
+}
+@media (prefers-reduced-motion: reduce) {
+  .xicms-nieuwskaart { transition: none; }
+  .xicms-nieuwskaart:hover { transform: none; }
+}
+
+/* 8.12: echte omlijnde knop (Btn variant "outline"). Op een hero-foto houdt de hero zijn eigen,
+   lichte variant (die selector is specifieker). */
+.xicms-root .astryx-button.xicms-btn-omlijnd {
+  box-shadow: inset 0 0 0 1.5px currentColor;
+  color: var(--xicms-primary, var(--color-accent));
+}
+.xicms-root .astryx-button.xicms-btn-omlijnd:hover {
+  background: color-mix(in srgb, var(--xicms-primary, #4f46e5) 8%, transparent);
+}
+
+/* 8.13: openingstijden uit het bedrijfsprofiel — toelichting en afwijkende dagen. */
+.xicms-hours__noot {
+  margin: 0.5rem 0 0;
+  font-size: 0.9rem;
+  opacity: 0.8;
+}
+.xicms-hours__afwijkend {
+  margin-top: 1rem;
+  padding: 0.75rem 1rem;
+  border-radius: var(--xicms-radius-sm, 8px);
+  background: color-mix(in srgb, var(--xicms-warning-fg, #b45309) 10%, transparent);
+  border-left: 3px solid var(--xicms-warning-fg, #b45309);
+}
+.xicms-hours__afwijkend ul {
+  display: grid;
+  gap: 0.25rem;
+  margin: 0.4rem 0 0;
+  padding: 0;
+  list-style: none;
+}
+.xicms-hours__afwijkend li {
+  display: flex;
+  justify-content: space-between;
+  gap: 1rem;
+  font-size: 0.95rem;
+}
+
+/* ── 8.13: SiteHeader ──────────────────────────────────────────────────────────────────────── */
+.xicms-header {
+  position: relative;
+  z-index: 40;
+  background: var(--xicms-bg, #fff);
+  border-bottom: 1px solid var(--xicms-border, rgba(0, 0, 0, 0.08));
+}
+.xicms-header.is-sticky {
+  position: sticky;
+  top: var(--xicms-topbar, 0px);
+  background: color-mix(in srgb, var(--xicms-bg, #fff) 90%, transparent);
+  -webkit-backdrop-filter: saturate(1.4) blur(10px);
+  backdrop-filter: saturate(1.4) blur(10px);
+}
+.xicms-header__binnen {
+  display: flex;
+  align-items: center;
+  gap: 1.5rem;
+  max-width: var(--xicms-container-max);
+  margin: 0 auto;
+  padding: 0.85rem var(--xicms-container-pad);
+}
+.xicms-header__merk {
+  display: inline-flex;
+  align-items: center;
+  flex: none;
+  color: inherit;
+  font-family: var(--xicms-font-heading, inherit);
+  font-size: 1.2rem;
+  font-weight: 700;
+  text-decoration: none;
+}
+.xicms-header__merk img {
+  display: block;
+  width: auto;
+  max-width: 220px;
+  object-fit: contain;
+}
+.xicms-header__nav {
+  display: flex;
+  flex: 1;
+  align-items: center;
+  justify-content: flex-end;
+}
+.xicms-header__menu .xicms-nav__list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.25rem 1.25rem;
+}
+.xicms-header__menu .xicms-nav__link {
+  color: inherit;
+  text-decoration: none;
+  font-weight: 500;
+}
+.xicms-header__menu .xicms-nav__link[aria-current="page"] {
+  color: var(--xicms-primary);
+}
+.xicms-header__cta,
+.xicms-mobielbalk__cta {
+  display: inline-flex;
+  align-items: center;
+  flex: none;
+  padding: 0.6rem 1.1rem;
+  border-radius: var(--xicms-radius-sm, 8px);
+  background: var(--xicms-primary);
+  color: var(--xicms-on-primary, #fff);
+  font-weight: 600;
+  text-decoration: none;
+}
+.xicms-header__cta:hover,
+.xicms-mobielbalk__cta:hover {
+  filter: brightness(0.95);
+}
+.xicms-header__cta--in-menu,
+.xicms-header__knop {
+  display: none;
+}
+.xicms-header__knop {
+  width: 44px;
+  height: 44px;
+  margin-left: auto;
+  place-items: center;
+  border: 0;
+  border-radius: 10px;
+  background: transparent;
+  color: inherit;
+  cursor: pointer;
+}
+.xicms-header__streepjes,
+.xicms-header__streepjes::before,
+.xicms-header__streepjes::after {
+  display: block;
+  width: 22px;
+  height: 2px;
+  border-radius: 2px;
+  background: currentColor;
+  transition: transform 0.2s ease, opacity 0.2s ease;
+}
+.xicms-header__streepjes { position: relative; }
+.xicms-header__streepjes::before,
+.xicms-header__streepjes::after {
+  content: "";
+  position: absolute;
+  left: 0;
+}
+.xicms-header__streepjes::before { top: -7px; }
+.xicms-header__streepjes::after { top: 7px; }
+.xicms-header.is-open .xicms-header__streepjes { background: transparent; }
+.xicms-header.is-open .xicms-header__streepjes::before { transform: translateY(7px) rotate(45deg); }
+.xicms-header.is-open .xicms-header__streepjes::after { transform: translateY(-7px) rotate(-45deg); }
+
+@media (max-width: 900px) {
+  .xicms-header__knop { display: grid; }
+  .xicms-header__binnen > .xicms-header__cta { display: none; }
+  .xicms-header__nav {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    right: 0;
+    display: none;
+    flex-direction: column;
+    align-items: stretch;
+    gap: 1rem;
+    max-height: calc(100dvh - 70px);
+    overflow-y: auto;
+    padding: 1rem var(--xicms-container-pad) 1.5rem;
+    background: var(--xicms-bg, #fff);
+    border-bottom: 1px solid var(--xicms-border, rgba(0, 0, 0, 0.08));
+    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.08);
+  }
+  .xicms-header.is-open .xicms-header__nav { display: flex; }
+  .xicms-header__menu .xicms-nav__list {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 0;
+    text-align: left;
+  }
+  .xicms-header__menu .xicms-nav__item,
+  .xicms-header__menu .xicms-nav__pair {
+    width: 100%;
+  }
+  .xicms-header__menu .xicms-nav__link {
+    display: block;
+    padding: 0.8rem 0;
+    font-size: 1.1rem;
+    border-bottom: 1px solid var(--xicms-border, rgba(0, 0, 0, 0.06));
+  }
+  .xicms-header__cta--in-menu {
+    display: inline-flex;
+    justify-content: center;
+  }
+}
+
+/* Mobiele balk onderaan (header.mobielBalk). */
+.xicms-mobielbalk { display: none; }
+@media (max-width: 720px) {
+  .xicms-mobielbalk {
+    position: fixed;
+    inset: auto 0 0 0;
+    z-index: 35;
+    display: flex;
+    gap: 0.5rem;
+    padding: 0.6rem 0.75rem calc(0.6rem + env(safe-area-inset-bottom));
+    background: var(--xicms-bg, #fff);
+    border-top: 1px solid var(--xicms-border, rgba(0, 0, 0, 0.08));
+    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.08);
+  }
+  .xicms-mobielbalk > * {
+    flex: 1;
+    justify-content: center;
+  }
+  .xicms-mobielbalk__bel {
+    display: inline-flex;
+    align-items: center;
+    padding: 0.6rem 1rem;
+    border-radius: var(--xicms-radius-sm, 8px);
+    box-shadow: inset 0 0 0 1.5px currentColor;
+    color: var(--xicms-primary);
+    font-weight: 600;
+    text-decoration: none;
+  }
+  body:has(.xicms-mobielbalk) { padding-bottom: 72px; }
+  /* Tijdens bewerken staat de editorbalk daar. */
+  :root:has(.xicms-ve__shell) .xicms-mobielbalk { display: none; }
+}
+
+/* ── 8.13: prijslijst / menukaart ─────────────────────────────────────────────────────────── */
+.xicms-prijslijst {
+  display: grid;
+  gap: 1.5rem;
+  margin: 1.5rem 0;
+}
+.xicms-prijslijst__kop {
+  display: grid;
+  gap: 0.4rem;
+}
+.xicms-prijslijst__intro {
+  margin: 0;
+  max-width: 60ch;
+  opacity: 0.8;
+}
+.xicms-prijslijst__secties {
+  display: grid;
+  gap: 2rem;
+}
+.xicms-prijslijst[data-variant="kolommen"] .xicms-prijslijst__secties {
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
+  gap: 2rem 3rem;
+}
+.xicms-prijslijst__sectietitel {
+  margin: 0 0 0.25rem;
+  font-family: var(--xicms-font-heading, inherit);
+  font-size: 1.2rem;
+}
+.xicms-prijslijst__noot {
+  margin: 0 0 0.5rem;
+  font-size: 0.9rem;
+  opacity: 0.7;
+}
+.xicms-prijslijst__regels {
+  display: grid;
+  gap: 0.15rem;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.xicms-prijslijst__regel {
+  padding: 0.6rem 0;
+  border-bottom: 1px solid var(--xicms-border, rgba(0, 0, 0, 0.07));
+}
+.xicms-prijslijst__regel:last-child {
+  border-bottom: 0;
+}
+.xicms-prijslijst__regel.is-uitgelicht .xicms-prijslijst__naam::after {
+  content: " ★";
+  color: var(--xicms-primary);
+}
+.xicms-prijslijst__lijn {
+  display: flex;
+  align-items: baseline;
+  gap: 0.5rem;
+}
+.xicms-prijslijst__naam {
+  font-weight: 600;
+}
+.xicms-prijslijst__puntjes {
+  flex: 1;
+  min-width: 1rem;
+  border-bottom: 1.5px dotted color-mix(in srgb, currentColor 30%, transparent);
+  transform: translateY(-0.25em);
+}
+.xicms-prijslijst__prijs {
+  font-weight: 600;
+  white-space: nowrap;
+  font-variant-numeric: tabular-nums;
+}
+.xicms-prijslijst__details {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.25rem 0.75rem;
+  margin-top: 0.2rem;
+  font-size: 0.9rem;
+  opacity: 0.8;
+}
+.xicms-prijslijst__duur::before {
+  content: "◷ ";
+}
+.xicms-prijslijst__tag {
+  padding: 0.05rem 0.5rem;
+  border-radius: 999px;
+  background: color-mix(in srgb, var(--xicms-primary, #4f46e5) 12%, transparent);
+  color: var(--xicms-primary);
+  font-size: 0.75rem;
+  font-weight: 600;
+}
+.xicms-prijslijst__voetnoot {
+  margin: 0;
+  font-size: 0.85rem;
+  opacity: 0.7;
+}
+/* Menu: gecentreerd, in de koppenletter, zonder puntjes. */
+.xicms-prijslijst[data-variant="menu"] {
+  max-width: 680px;
+  margin-inline: auto;
+  text-align: center;
+}
+.xicms-prijslijst[data-variant="menu"] .xicms-prijslijst__intro { margin-inline: auto; }
+.xicms-prijslijst[data-variant="menu"] .xicms-prijslijst__sectietitel {
+  font-size: 1.4rem;
+  letter-spacing: 0.02em;
+}
+.xicms-prijslijst[data-variant="menu"] .xicms-prijslijst__regel { border-bottom: 0; }
+.xicms-prijslijst[data-variant="menu"] .xicms-prijslijst__lijn,
+.xicms-prijslijst[data-variant="menu"] .xicms-prijslijst__details {
+  justify-content: center;
+}
+.xicms-prijslijst[data-variant="menu"] .xicms-prijslijst__puntjes { display: none; }
+.xicms-prijslijst[data-variant="menu"] .xicms-prijslijst__naam {
+  font-family: var(--xicms-font-heading, inherit);
+  font-size: 1.1rem;
+}
+.xicms-prijslijst[data-variant="menu"] .xicms-prijslijst__prijs::before { content: "· "; opacity: 0.5; }
+
+/* ── 8.13: hero "naast" (tekst links, foto rechts) en vertrouwenspunten ─────────────────────── */
+.xicms-hero[data-layout="naast"] {
+  display: grid;
+  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
+  align-items: center;
+  gap: clamp(1.5rem, 4vw, 4rem);
+}
+.xicms-hero[data-layout="naast"] .xicms-hero__inner {
+  max-width: none;
+}
+.xicms-hero__beeld {
+  overflow: hidden;
+  aspect-ratio: 5 / 4;
+  border-radius: var(--xicms-radius-lg, 24px);
+}
+.xicms-hero__beeld img {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+@media (max-width: 900px) {
+  .xicms-hero[data-layout="naast"] { grid-template-columns: 1fr; }
+}
+.xicms-hero__trust {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.4rem 1.25rem;
+  margin: 1.25rem 0 0;
+  padding: 0;
+  list-style: none;
+  font-size: 0.95rem;
+}
+.xicms-hero[data-align="center"] .xicms-hero__trust { justify-content: center; }
+.xicms-hero__trust li::before {
+  content: "✓ ";
+  color: var(--xicms-primary);
+  font-weight: 700;
+}
+.xicms-hero[data-media="cover"] .xicms-hero__trust li::before { color: inherit; }
+
+/* ── 8.13: sectiekop ───────────────────────────────────────────────────────────────────────── */
+.xicms-sectiekop {
+  display: grid;
+  gap: 0.5rem;
+  margin: 2.5rem 0 1rem;
+}
+.xicms-sectiekop[data-align="center"] {
+  justify-items: center;
+  text-align: center;
+}
+.xicms-sectiekop__regel {
+  margin: 0;
+  color: var(--xicms-primary);
+  font-size: 0.8rem;
+  font-weight: 700;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+}
+.xicms-sectiekop__intro {
+  margin: 0;
+  max-width: 60ch;
+  font-size: 1.1rem;
+  opacity: 0.8;
+}
+
+.xicms-footer__column--bedrijf .xicms-footer__links + .xicms-footer__heading {
+  margin-top: 1.25rem;
+}
+
+/* 8.14: formulierveld "periode" (van – tot). */
+.xicms-form__periode {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 0.5rem 0.75rem;
+  margin: 0;
+  padding: 0;
+  border: 0;
+}
+.xicms-form__periode legend {
+  grid-column: 1 / -1;
+  margin-bottom: 0.3rem;
+}
+
+/* 8.14: agenda — status en prijs. */
+.xicms-agenda__status {
+  display: inline-block;
+  margin-right: 0.5rem;
+  padding: 0.05rem 0.5rem;
+  border-radius: 999px;
+  font-size: 0.75rem;
+  font-weight: 700;
+  background: color-mix(in srgb, var(--xicms-danger-fg, #b91c1c) 14%, transparent);
+  color: var(--xicms-danger-fg, #b91c1c);
+}
+.xicms-agenda__status[data-status="verplaatst"] {
+  background: color-mix(in srgb, var(--xicms-warning-fg, #b45309) 14%, transparent);
+  color: var(--xicms-warning-fg, #b45309);
+}
+.xicms-agenda__prijs {
+  margin-left: 0.5rem;
+  font-weight: 600;
+}
+
+/* ── 8.15: beschikbaarheidskalender ──────────────────────────────────────────────────────── */
+.xicms-beschikbaar {
+  display: grid;
+  gap: 1rem;
+  margin: 1.5rem 0;
+}
+.xicms-beschikbaar__intro,
+.xicms-beschikbaar__noot { margin: 0; opacity: 0.85; }
+.xicms-beschikbaar__melding {
+  margin: 0;
+  padding: 0.6rem 0.9rem;
+  border-radius: var(--xicms-radius-sm, 8px);
+  background: color-mix(in srgb, var(--xicms-warning-fg, #b45309) 10%, transparent);
+  font-size: 0.9rem;
+}
+.xicms-beschikbaar__tabs { display: flex; flex-wrap: wrap; gap: 0.4rem; }
+.xicms-beschikbaar__tabs button {
+  padding: 0.45rem 0.9rem;
+  border: 1px solid var(--xicms-border, rgba(0, 0, 0, 0.12));
+  border-radius: 999px;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  cursor: pointer;
+}
+.xicms-beschikbaar__tabs button[aria-selected="true"] {
+  background: var(--xicms-primary);
+  border-color: var(--xicms-primary);
+  color: var(--xicms-on-primary, #fff);
+}
+.xicms-beschikbaar__maanden {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
+  gap: 1.25rem 2rem;
+}
+.xicms-beschikbaar__maandnaam {
+  margin: 0 0 0.4rem;
+  font-weight: 600;
+  text-transform: capitalize;
+}
+.xicms-beschikbaar table { width: 100%; border-collapse: collapse; table-layout: fixed; }
+.xicms-beschikbaar th { font-size: 0.7rem; font-weight: 600; opacity: 0.6; text-transform: uppercase; padding-bottom: 0.2rem; }
+.xicms-beschikbaar td { padding: 1px; text-align: center; }
+.xicms-beschikbaar td button {
+  width: 100%;
+  aspect-ratio: 1;
+  max-height: 40px;
+  border: 0;
+  border-radius: 6px;
+  background: color-mix(in srgb, var(--xicms-success-fg, #15803d) 12%, transparent);
+  color: inherit;
+  font: inherit;
+  font-size: 0.85rem;
+  cursor: pointer;
+}
+.xicms-beschikbaar td button[data-status="bezet"] {
+  background: color-mix(in srgb, currentColor 10%, transparent);
+  text-decoration: line-through;
+  opacity: 0.55;
+  cursor: not-allowed;
+}
+.xicms-beschikbaar td button[data-status="voorbij"] { background: transparent; opacity: 0.3; cursor: default; }
+.xicms-beschikbaar td button[data-gekozen="1"] {
+  background: var(--xicms-primary);
+  color: var(--xicms-on-primary, #fff);
+  opacity: 1;
+  text-decoration: none;
+}
+.xicms-beschikbaar td button:focus-visible { outline: 2px solid var(--xicms-primary); outline-offset: 1px; }
+.xicms-beschikbaar__voet {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.75rem 1.5rem;
+}
+.xicms-beschikbaar__legenda { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.85rem; opacity: 0.8; }
+.xicms-beschikbaar__legenda i { display: inline-block; width: 0.9rem; height: 0.9rem; border-radius: 3px; background: color-mix(in srgb, var(--xicms-success-fg, #15803d) 25%, transparent); }
+.xicms-beschikbaar__legenda i[data-status="bezet"] { background: color-mix(in srgb, currentColor 18%, transparent); margin-left: 0.5rem; }
+.xicms-beschikbaar__keuze { flex: 1; font-weight: 500; }