/* Speelse bouwstenen voor Doortje (vorm). Animaties: animaties.css */
:root { --d-navy: #1E2B45; --d-sun: #FFC94D; --t-orange: #FDE3CF; --t-blue: #DCE6F6; --t-green: #E0EBCF; --t-yellow: #FFF0C2; }
.d-tint-orange { --tint: var(--t-orange); --ink: #C8661F; background: var(--t-orange); }
.d-tint-blue { --tint: var(--t-blue); --ink: #496390; background: var(--t-blue); }
.d-tint-green { --tint: var(--t-green); --ink: #496B3D; background: var(--t-green); }
.d-tint-yellow { --tint: var(--t-yellow); --ink: #9A6A00; background: var(--t-yellow); }
/* Iconen: kleur volgt de tint (--ink) */
.d-icon { display: block; width: 30px; height: 30px; background: var(--ink, var(--wp--preset--color--blauw-donker)) !important; -webkit-mask: center / contain no-repeat; mask: center / contain no-repeat; margin: 0 !important; }
.d-ic-house, .d-kic-house::after { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 11 12 4l8 7v9H4z M10 20v-5h4v5'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 11 12 4l8 7v9H4z M10 20v-5h4v5'/%3E%3C/svg%3E"); }
.d-ic-heart, .d-kic-heart::after { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20s-7-4.6-7-10a4 4 0 0 1 7-2.4A4 4 0 0 1 19 10c0 5.4-7 10-7 10z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20s-7-4.6-7-10a4 4 0 0 1 7-2.4A4 4 0 0 1 19 10c0 5.4-7 10-7 10z'/%3E%3C/svg%3E"); }
.d-ic-book, .d-kic-book::after { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6c3-1.5 6-1.5 9 1 3-2.5 6-2.5 9-1v13c-3-1.5-6-1.5-9 1-3-2.5-6-2.5-9-1z M12 7v13'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6c3-1.5 6-1.5 9 1 3-2.5 6-2.5 9-1v13c-3-1.5-6-1.5-9 1-3-2.5-6-2.5-9-1z M12 7v13'/%3E%3C/svg%3E"); }
.d-ic-shield, .d-kic-shield::after { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 5 6v6c0 4.5 3 7.5 7 9 4-1.5 7-4.5 7-9V6z M9 12l2 2 4-4'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 5 6v6c0 4.5 3 7.5 7 9 4-1.5 7-4.5 7-9V6z M9 12l2 2 4-4'/%3E%3C/svg%3E"); }
.d-ic-hands, .d-kic-hands::after { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 12V6a1.5 1.5 0 0 1 3 0v5 M10 11V4.5a1.5 1.5 0 0 1 3 0V11 M13 11V5.5a1.5 1.5 0 0 1 3 0V12 M16 12V8a1.5 1.5 0 0 1 3 0v6a7 7 0 0 1-7 7h-1a6 6 0 0 1-5-3l-2.5-4a1.5 1.5 0 0 1 2.6-1.5L7 14'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 12V6a1.5 1.5 0 0 1 3 0v5 M10 11V4.5a1.5 1.5 0 0 1 3 0V11 M13 11V5.5a1.5 1.5 0 0 1 3 0V12 M16 12V8a1.5 1.5 0 0 1 3 0v6a7 7 0 0 1-7 7h-1a6 6 0 0 1-5-3l-2.5-4a1.5 1.5 0 0 1 2.6-1.5L7 14'/%3E%3C/svg%3E"); }
.d-ic-thermo, .d-kic-thermo::after { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 14V5a2 2 0 0 1 4 0v9a4 4 0 1 1-4 0z M12 9v8'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 14V5a2 2 0 0 1 4 0v9a4 4 0 1 1-4 0z M12 9v8'/%3E%3C/svg%3E"); }
.d-ic-syringe, .d-kic-syringe::after { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 2l4 4 M20 4l-9 9 M14 6l4 4 M11 9l-6 6-2 6 6-2 6-6'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 2l4 4 M20 4l-9 9 M14 6l4 4 M11 9l-6 6-2 6 6-2 6-6'/%3E%3C/svg%3E"); }
.d-ic-eye, .d-kic-eye::after { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s4-7 10-7 10 7 10 7-4 7-10 7S2 12 2 12z M12 9a3 3 0 1 1 0 6 3 3 0 0 1 0-6z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s4-7 10-7 10 7 10 7-4 7-10 7S2 12 2 12z M12 9a3 3 0 1 1 0 6 3 3 0 0 1 0-6z'/%3E%3C/svg%3E"); }
.d-ic-door, .d-kic-door::after { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 21V4a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v17 M4 21h16 M14 12h.5'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 21V4a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v17 M4 21h16 M14 12h.5'/%3E%3C/svg%3E"); }
.d-ic-people, .d-kic-people::after { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 11a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7z M2 20c.5-4 3.5-6 7-6s6.5 2 7 6 M16 4.5a3 3 0 0 1 0 6 M18 14c2 .7 3.5 2.6 4 6'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 11a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7z M2 20c.5-4 3.5-6 7-6s6.5 2 7 6 M16 4.5a3 3 0 0 1 0 6 M18 14c2 .7 3.5 2.6 4 6'/%3E%3C/svg%3E"); }
.d-ic-chat, .d-kic-chat::after { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5h16v11H9l-5 4z M8 10h.5 M12 10h.5 M16 10h.5'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5h16v11H9l-5 4z M8 10h.5 M12 10h.5 M16 10h.5'/%3E%3C/svg%3E"); }
.d-ic-clock, .d-kic-clock::after { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3a9 9 0 1 1 0 18 9 9 0 0 1 0-18z M12 7v5l3 2'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3a9 9 0 1 1 0 18 9 9 0 0 1 0-18z M12 7v5l3 2'/%3E%3C/svg%3E"); }
.d-ic-calendar, .d-kic-calendar::after { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6h16v14H4z M4 10h16 M8 3v4 M16 3v4 M8 14h2 M14 14h2'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6h16v14H4z M4 10h16 M8 3v4 M16 3v4 M8 14h2 M14 14h2'/%3E%3C/svg%3E"); }
.d-ic-euro, .d-kic-euro::after { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 6a7 7 0 1 0 0 12 M4 10h10 M4 14h10'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 6a7 7 0 1 0 0 12 M4 10h10 M4 14h10'/%3E%3C/svg%3E"); }
.d-ic-calc, .d-kic-calc::after { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h12v18H6z M8 6h8v3H8z M9 13h.5 M12 13h.5 M15 13h.5 M9 17h.5 M12 17h.5 M15 17h.5'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h12v18H6z M8 6h8v3H8z M9 13h.5 M12 13h.5 M15 13h.5 M9 17h.5 M12 17h.5 M15 17h.5'/%3E%3C/svg%3E"); }
.d-ic-school, .d-kic-school::after { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9l9-5 9 5-9 5z M7 11v5c3 2 7 2 10 0v-5 M21 9v6'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9l9-5 9 5-9 5z M7 11v5c3 2 7 2 10 0v-5 M21 9v6'/%3E%3C/svg%3E"); }
.d-ic-bottle, .d-kic-bottle::after { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 2h4 M9 5h6l1 3v12a2 2 0 0 1-2 2h-4a2 2 0 0 1-2-2V8z M8 12h8'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 2h4 M9 5h6l1 3v12a2 2 0 0 1-2 2h-4a2 2 0 0 1-2-2V8z M8 12h8'/%3E%3C/svg%3E"); }
.d-ic-blocks, .d-kic-blocks::after { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 13h8v8H3z M13 13h8v8h-8z M8 3h8v8H8z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 13h8v8H3z M13 13h8v8h-8z M8 3h8v8H8z'/%3E%3C/svg%3E"); }
.d-ic-sun, .d-kic-sun::after { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 8a4 4 0 1 1 0 8 4 4 0 0 1 0-8z M12 2v2 M12 20v2 M2 12h2 M20 12h2 M5 5l1.5 1.5 M17.5 17.5 19 19 M5 19l1.5-1.5 M17.5 6.5 19 5'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 8a4 4 0 1 1 0 8 4 4 0 0 1 0-8z M12 2v2 M12 20v2 M2 12h2 M20 12h2 M5 5l1.5 1.5 M17.5 17.5 19 19 M5 19l1.5-1.5 M17.5 6.5 19 5'/%3E%3C/svg%3E"); }
.d-ic-leaf, .d-kic-leaf::after { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 19C5 10 11 4 20 4c0 9-6 15-15 15z M5 19l8-8'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 19C5 10 11 4 20 4c0 9-6 15-15 15z M5 19l8-8'/%3E%3C/svg%3E"); }
.d-ic-star, .d-kic-star::after { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l2.7 5.6 6.1.9-4.4 4.3 1 6.1L12 17l-5.4 2.9 1-6.1L3.2 9.5l6.1-.9z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l2.7 5.6 6.1.9-4.4 4.3 1 6.1L12 17l-5.4 2.9 1-6.1L3.2 9.5l6.1-.9z'/%3E%3C/svg%3E"); }
.d-ic-flower, .d-kic-flower::after { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 9a3 3 0 1 1 0 6 3 3 0 0 1 0-6z M12 9V4a3 3 0 0 1 0 5z M15 12h5a3 3 0 0 1-5 0z M12 15v5a3 3 0 0 1 0-5z M9 12H4a3 3 0 0 1 5 0z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 9a3 3 0 1 1 0 6 3 3 0 0 1 0-6z M12 9V4a3 3 0 0 1 0 5z M15 12h5a3 3 0 0 1-5 0z M12 15v5a3 3 0 0 1 0-5z M9 12H4a3 3 0 0 1 5 0z'/%3E%3C/svg%3E"); }
.d-ic-clover, .d-kic-clover::after { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 12C9 12 7 10 7 8a2.5 2.5 0 0 1 5-1 2.5 2.5 0 0 1 5 1c0 2-2 4-5 4z M12 12c0 3-2 5-4 5a2.5 2.5 0 0 1-1-5 M12 12c0 3 2 5 4 5a2.5 2.5 0 0 0 1-5 M12 12v9'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 12C9 12 7 10 7 8a2.5 2.5 0 0 1 5-1 2.5 2.5 0 0 1 5 1c0 2-2 4-5 4z M12 12c0 3-2 5-4 5a2.5 2.5 0 0 1-1-5 M12 12c0 3 2 5 4 5a2.5 2.5 0 0 0 1-5 M12 12v9'/%3E%3C/svg%3E"); }
.d-ic-bird, .d-kic-bird::after { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 14c3 0 5-2 6-5a5 5 0 0 1 10 1l2 1-2 1c0 5-4 8-9 8H4z M16 9h.5'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 14c3 0 5-2 6-5a5 5 0 0 1 10 1l2 1-2 1c0 5-4 8-9 8H4z M16 9h.5'/%3E%3C/svg%3E"); }
.d-ic-brush, .d-kic-brush::after { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 3l3 3-9 9-3-3z M9 12c-3 0-5 2-5 5 0 1.5-1 2.5-2 3 4 1 9 0 9-5z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 3l3 3-9 9-3-3z M9 12c-3 0-5 2-5 5 0 1.5-1 2.5-2 3 4 1 9 0 9-5z'/%3E%3C/svg%3E"); }
.d-ic-music, .d-kic-music::after { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18V5l11-2v13 M9 18a3 3 0 1 1-6 0 3 3 0 0 1 6 0z M20 16a3 3 0 1 1-6 0 3 3 0 0 1 6 0z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18V5l11-2v13 M9 18a3 3 0 1 1-6 0 3 3 0 0 1 6 0z M20 16a3 3 0 1 1-6 0 3 3 0 0 1 6 0z'/%3E%3C/svg%3E"); }
.d-ic-apple, .d-kic-apple::after { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 7c-2-2-7-1.5-7 4 0 5 3 10 5 10 1 0 1.5-.5 2-.5s1 .5 2 .5c2 0 5-5 5-10 0-5.5-5-6-7-4z M12 7c0-2 1-4 3-4'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 7c-2-2-7-1.5-7 4 0 5 3 10 5 10 1 0 1.5-.5 2-.5s1 .5 2 .5c2 0 5-5 5-10 0-5.5-5-6-7-4z M12 7c0-2 1-4 3-4'/%3E%3C/svg%3E"); }
.d-ic-moon, .d-kic-moon::after { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 14A8 8 0 1 1 10 4a6 6 0 0 0 10 10z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 14A8 8 0 1 1 10 4a6 6 0 0 0 10 10z'/%3E%3C/svg%3E"); }
.d-ic-bag, .d-kic-bag::after { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 8h12l1 13H5z M9 8V6a3 3 0 0 1 6 0v2 M9 13h6'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 8h12l1 13H5z M9 8V6a3 3 0 0 1 6 0v2 M9 13h6'/%3E%3C/svg%3E"); }
.d-ic-phone, .d-kic-phone::after { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 3h4l2 5-2.5 1.5a11 11 0 0 0 6 6L16 13l5 2v4a2 2 0 0 1-2 2A16 16 0 0 1 3 5a2 2 0 0 1 2-2z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 3h4l2 5-2.5 1.5a11 11 0 0 0 6 6L16 13l5 2v4a2 2 0 0 1-2 2A16 16 0 0 1 3 5a2 2 0 0 1 2-2z'/%3E%3C/svg%3E"); }
.d-ic-mail, .d-kic-mail::after { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 5h18v14H3z M3 6l9 7 9-7'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 5h18v14H3z M3 6l9 7 9-7'/%3E%3C/svg%3E"); }
.d-ic-pin, .d-kic-pin::after { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-7-6-7-12a7 7 0 0 1 14 0c0 6-7 12-7 12z M12 6.5a2.5 2.5 0 1 1 0 5 2.5 2.5 0 0 1 0-5z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-7-6-7-12a7 7 0 0 1 14 0c0 6-7 12-7 12z M12 6.5a2.5 2.5 0 1 1 0 5 2.5 2.5 0 0 1 0-5z'/%3E%3C/svg%3E"); }
.d-ic-doc, .d-kic-doc::after { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 2h9l5 5v15H6z M15 2v5h5 M9 13h8 M9 17h6'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 2h9l5 5v15H6z M15 2v5h5 M9 13h8 M9 17h6'/%3E%3C/svg%3E"); }
.d-ic-check, .d-kic-check::after { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E"); }
.d-ic-train, .d-kic-train::after { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h12a2 2 0 0 1 2 2v10a3 3 0 0 1-3 3H7a3 3 0 0 1-3-3V5a2 2 0 0 1 2-2z M4 11h16 M8 15h.5 M16 15h.5 M8 18l-2 3 M16 18l2 3'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h12a2 2 0 0 1 2 2v10a3 3 0 0 1-3 3H7a3 3 0 0 1-3-3V5a2 2 0 0 1 2-2z M4 11h16 M8 15h.5 M16 15h.5 M8 18l-2 3 M16 18l2 3'/%3E%3C/svg%3E"); }
.d-ic-cart, .d-kic-cart::after { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8h14v8H3z M17 10l4-3 M7 19a2 2 0 1 0 0-4 2 2 0 0 0 0 4z M14 19a2 2 0 1 0 0-4 2 2 0 0 0 0 4z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8h14v8H3z M17 10l4-3 M7 19a2 2 0 1 0 0-4 2 2 0 0 0 0 4z M14 19a2 2 0 1 0 0-4 2 2 0 0 0 0 4z'/%3E%3C/svg%3E"); }
.d-ic-butterfly, .d-kic-butterfly::after { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 7v12 M12 10C9 4 3 4 3 8c0 3 3 5 9 4 M12 10c3-6 9-6 9-2 0 3-3 5-9 4 M12 13c-4 0-7 2-6 5 1 2 4 1 6-3 M12 13c4 0 7 2 6 5-1 2-4 1-6-3'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 7v12 M12 10C9 4 3 4 3 8c0 3 3 5 9 4 M12 10c3-6 9-6 9-2 0 3-3 5-9 4 M12 13c-4 0-7 2-6 5 1 2 4 1 6-3 M12 13c4 0 7 2 6 5-1 2-4 1-6-3'/%3E%3C/svg%3E"); }
.d-ic-paw, .d-kic-paw::after { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 13c-3 0-6 3-6 5.5 0 1.5 1.5 2.5 3 2l3-1 3 1c1.5.5 3-.5 3-2C18 16 15 13 12 13z M6 9a1.8 1.8 0 1 0 0 3.6A1.8 1.8 0 0 0 6 9z M18 9a1.8 1.8 0 1 0 0 3.6A1.8 1.8 0 0 0 18 9z M9.5 5a1.8 1.8 0 1 0 0 3.6 1.8 1.8 0 0 0 0-3.6z M14.5 5a1.8 1.8 0 1 0 0 3.6 1.8 1.8 0 0 0 0-3.6z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 13c-3 0-6 3-6 5.5 0 1.5 1.5 2.5 3 2l3-1 3 1c1.5.5 3-.5 3-2C18 16 15 13 12 13z M6 9a1.8 1.8 0 1 0 0 3.6A1.8 1.8 0 0 0 6 9z M18 9a1.8 1.8 0 1 0 0 3.6A1.8 1.8 0 0 0 18 9z M9.5 5a1.8 1.8 0 1 0 0 3.6 1.8 1.8 0 0 0 0-3.6z M14.5 5a1.8 1.8 0 1 0 0 3.6 1.8 1.8 0 0 0 0-3.6z'/%3E%3C/svg%3E"); }
.d-sticker-icon.d-icon { width: 64px; height: 64px; -webkit-mask-size: 34px; mask-size: 34px; border-radius: 0; }
.d-sticker .d-sticker-icon { position: relative; }
.d-sticker .d-sticker-icon::before { content: ""; position: absolute; inset: -0px; }
/* Hero-varianten */
.d-hero-blue { background: var(--wp--preset--color--vlak-blauw); }
.d-hero-green { background: var(--wp--preset--color--vlak-groen); }
.d-hero-orange { background: var(--wp--preset--color--vlak-oranje); }
.d-hero-yellow { background: #FFF7DE; }
.d-hero-noparade { padding-bottom: var(--wp--preset--spacing--50) !important; }
.d-hero-img { margin: 0 !important; overflow: hidden; border: 6px solid #fff; box-shadow: 0 30px 60px -30px rgba(30,43,69,.5); position: relative; z-index: 1; }
.d-hero-img img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.d-shape-blob { border-radius: 58% 42% 46% 54% / 48% 56% 44% 52%; }
.d-shape-arch { border-radius: 999px 999px 24px 24px; }
.d-shape-arch img { aspect-ratio: 4 / 5; }
.d-shape-circle { border-radius: 50%; }
.d-shape-leaf { border-radius: 0 50% 0 50%; }
.d-parade { display: flex !important; gap: 14px; align-items: flex-end; margin-top: 2.4rem !important; width: max-content; max-width: none !important; position: relative; z-index: 2; }
.d-parade > * { margin: 0 !important; }
.d-parade-item { width: 118px; padding: 16px 10px 12px !important; border-radius: 24px 24px 14px 14px; text-align: center; position: relative; box-shadow: inset 0 -8px 0 rgba(0,0,0,.06); }
.d-parade-item .d-icon { width: 40px; height: 40px; margin: 0 auto 6px !important; }
.d-parade-label { font-size: 11.5px !important; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink); margin: 0 !important; }
.d-parade-item::after { content: ""; position: absolute; left: 50%; bottom: -12px; width: 26px; height: 12px; margin-left: -13px; border-radius: 0 0 13px 13px; background: var(--ink); opacity: .25; }
.d-ground { height: 22px; margin: 14px 0 0 !important; max-width: none !important; background: radial-gradient(circle at 12px 0, var(--wp--preset--color--groen) 11px, transparent 12px) 0 0 / 24px 22px repeat-x; opacity: .9; }
@media (max-width: 781px) { .d-parade { transform: scale(.7); transform-origin: left bottom; } }
/* Borden */
.d-board-chalk { background: #2F4A3A; border-color: #8B5E3C; border-width: 10px; border-radius: 10px; }
.d-board-chalk .d-board-head { color: #fff; font-family: var(--wp--preset--font-family--hand); font-size: 1.5rem !important; letter-spacing: 0; text-transform: none; }
.d-board-chalk .d-board-head::before { background: var(--d-sun); box-shadow: none; }
.d-board-chalk .d-board-row { color: #F3F1E7; font-family: var(--wp--preset--font-family--hand); font-size: 1.45rem !important; }
.d-board-chalk .d-board-row strong { color: #B9D3A9; }
.d-board-chalk .d-ch { background: transparent !important; }
/* Stickers: 4 op een rij */
.d-stickers.d-n4 { grid-template-columns: repeat(4, 1fr); }
.d-stickers.d-n2 { grid-template-columns: repeat(2, 1fr); }
.d-sticker:nth-child(4) { transform: rotate(2deg) translateY(8px); }
.d-sticker .d-sticker-icon { background-color: var(--ink) !important; }
.d-sticker { background: var(--tint); }
.d-sticker::before { content: ""; position: absolute; left: 20px; top: 20px; width: 64px; height: 64px; border-radius: 20px; background: #fff; box-shadow: 0 6px 0 rgba(0,0,0,.06); z-index: 0; }
.d-sticker > * { position: relative; z-index: 1; }
@media (max-width: 1000px) { .d-stickers.d-n4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .d-stickers.d-n4, .d-stickers.d-n2 { grid-template-columns: 1fr; } }
/* Route: aantal haltes */
.d-stops.d-n3 { grid-template-columns: repeat(3, 1fr); }
.d-stops.d-n4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1000px) { .d-stops.d-n3, .d-stops.d-n4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .d-stops.d-n3, .d-stops.d-n4 { grid-template-columns: 1fr; } }
.d-veh-cart.d-cart, .d-track.d-veh-cart::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 74 50'%3E%3Cpath d='M6 10h46v22H6z' fill='%23EC8B48' stroke='%231E2B45' stroke-width='3' stroke-linejoin='round'/%3E%3Cpath d='M52 16l16-10' stroke='%231E2B45' stroke-width='3' stroke-linecap='round'/%3E%3Ccircle cx='16' cy='38' r='7' fill='%23fff' stroke='%231E2B45' stroke-width='3'/%3E%3Ccircle cx='42' cy='38' r='7' fill='%23fff' stroke='%231E2B45' stroke-width='3'/%3E%3Ccircle cx='20' cy='6' r='5' fill='%23FFC94D'/%3E%3Ccircle cx='34' cy='5' r='5' fill='%238EAAD5'/%3E%3C/svg%3E"); }
.d-veh-train.d-cart, .d-track.d-veh-train::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 40'%3E%3Crect x='2' y='8' width='44' height='22' rx='6' fill='%23EC8B48'/%3E%3Crect x='8' y='0' width='9' height='10' rx='2' fill='%231E2B45'/%3E%3Crect x='28' y='12' width='12' height='9' rx='2' fill='%23DDE8F7'/%3E%3Cpath d='M46 14h10l6 8v8H46z' fill='%23EC8B48'/%3E%3Ccircle cx='14' cy='32' r='6' fill='%231E2B45'/%3E%3Ccircle cx='38' cy='32' r='6' fill='%231E2B45'/%3E%3C/svg%3E"); }
.d-veh-butterfly.d-cart, .d-track.d-veh-butterfly::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 50'%3E%3Cpath d='M30 25C22 6 4 6 6 18c1 8 12 10 24 7z' fill='%238EAAD5' stroke='%231E2B45' stroke-width='2.5'/%3E%3Cpath d='M30 25C38 6 56 6 54 18c-1 8-12 10-24 7z' fill='%23729A47' stroke='%231E2B45' stroke-width='2.5'/%3E%3Cpath d='M30 26c-10 0-18 5-15 12 2 5 10 2 15-8zM30 26c10 0 18 5 15 12-2 5-10 2-15-8z' fill='%23EC8B48' stroke='%231E2B45' stroke-width='2.5'/%3E%3Cpath d='M30 14v26' stroke='%231E2B45' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E"); }
.d-veh-bird.d-cart, .d-track.d-veh-bird::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 46'%3E%3Cpath d='M8 30c10 0 16-6 18-15a14 14 0 0 1 28 3l7 3-7 3c0 13-11 20-24 20H8z' fill='%23EC8B48' stroke='%231E2B45' stroke-width='2.5' stroke-linejoin='round'/%3E%3Cpath d='M22 30c6-2 12-8 12-14' fill='none' stroke='%231E2B45' stroke-width='2.5' stroke-linecap='round'/%3E%3Ccircle cx='44' cy='17' r='2.5' fill='%231E2B45'/%3E%3C/svg%3E"); }
.d-veh-snail.d-cart, .d-track.d-veh-snail::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 66 44'%3E%3Cpath d='M4 40h50c6 0 8-4 8-8V18' fill='none' stroke='%231E2B45' stroke-width='3' stroke-linecap='round'/%3E%3Cpath d='M58 18l-3-8M62 18l3-8' stroke='%231E2B45' stroke-width='2.5' stroke-linecap='round'/%3E%3Ccircle cx='28' cy='24' r='16' fill='%23729A47' stroke='%231E2B45' stroke-width='3'/%3E%3Cpath d='M28 24a5 5 0 1 1 6-5 9 9 0 1 1-12 9' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E"); }
.d-track.d-veh-snail::after, .d-track.d-veh-cart::after { width: 70px; height: 46px; top: -24px; }
/* Klok */
.d-clock { width: min(380px, 80vw); aspect-ratio: 1; border-radius: 50%; margin-inline: auto !important; position: relative; background:
radial-gradient(circle, #fff 0 60%, transparent 61%),
repeating-conic-gradient(from -3deg, var(--d-navy) 0 6deg, transparent 6deg 30deg),
var(--d-sun); border: 14px solid var(--wp--preset--color--oranje); box-shadow: 0 30px 60px -30px rgba(30,43,69,.55), inset 0 0 0 10px #fff; }
.d-clock::before { content: "12"; position: absolute; top: 14%; left: 50%; transform: translateX(-50%); font-family: var(--wp--preset--font-family--schreef); font-size: 1.6rem; color: var(--d-navy); }
.d-clock::after { content: "6"; position: absolute; bottom: 12%; left: 50%; transform: translateX(-50%); font-family: var(--wp--preset--font-family--schreef); font-size: 1.6rem; color: var(--d-navy); }
.d-clock > * { margin: 0 !important; }
.d-clock-hand { position: absolute; left: 50%; bottom: 50%; transform-origin: 50% 100%; border-radius: 6px; }
.d-clock-h { width: 12px; height: 24%; margin-left: -6px !important; background: var(--d-navy); transform: rotate(210deg); }
.d-clock-m { width: 8px; height: 34%; margin-left: -4px !important; background: var(--wp--preset--color--oranje); transform: rotate(0deg); }
.d-clock-dot { position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px !important; border-radius: 50%; background: var(--d-navy); border: 4px solid #fff; }
.d-clocklist { list-style: none; padding: 0 !important; margin-top: 1.2rem !important; display: grid; gap: 4px; }
.d-clocklist li { display: grid; grid-template-columns: 74px 1fr; gap: 14px; align-items: baseline; padding: 10px 14px; border-radius: 14px; transition: background .3s, transform .3s; font-size: 15px; }
.d-clocklist li:hover { background: var(--t-yellow); transform: translateX(6px); }
.d-clocklist li strong { font-family: var(--wp--preset--font-family--schreef); font-weight: 400; font-size: 1.25rem; color: var(--wp--preset--color--blauw-donker); font-variant-numeric: tabular-nums; }
/* Stapstenen */
.d-stones { display: grid !important; grid-template-columns: repeat(var(--n, 4), 1fr); gap: 22px; margin-top: 2.4rem !important; position: relative; padding-top: 20px !important; }
.d-stones.d-n3 { --n: 3; } .d-stones.d-n4 { --n: 4; } .d-stones.d-n5 { --n: 5; }
.d-stones::before { content: ""; position: absolute; left: 4%; right: 4%; top: 44px; height: 24px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 24'%3E%3Cellipse cx='14' cy='8' rx='5' ry='7' fill='%23D9DEE8'/%3E%3Cellipse cx='40' cy='16' rx='5' ry='7' fill='%23D9DEE8'/%3E%3C/svg%3E") left center / 60px 24px repeat-x; }
.d-stones > * { margin: 0 !important; }
.d-stone { position: relative; border-radius: 46% 54% 40% 60% / 55% 45% 55% 45%; padding: 70px 24px 30px !important; text-align: center; background: var(--tint); transition: transform .4s cubic-bezier(.3,1.6,.5,1), border-radius .6s; }
.d-stone:nth-child(even) { margin-top: 40px !important; border-radius: 55% 45% 60% 40% / 45% 55% 45% 55%; }
.d-stone:hover { transform: translateY(-8px) rotate(-2deg); border-radius: 50%; }
.d-stone > * { margin: 0 0 .5rem !important; }
.d-stone h3 { font-size: 1.3rem !important; }
.d-stone p { font-size: 14px; }
.d-stone-num { position: absolute; left: 50%; top: -22px; width: 64px; height: 64px; margin-left: -32px !important; border-radius: 50%; background: var(--ink); color: #fff; display: grid; place-items: center; font-family: var(--wp--preset--font-family--schreef); font-size: 1.8rem !important; border: 5px solid #fff; box-shadow: 0 8px 20px -8px rgba(0,0,0,.3); }
@media (max-width: 900px) { .d-stones { grid-template-columns: 1fr 1fr; } .d-stone:nth-child(even) { margin-top: 0 !important; } .d-stones::before { display: none; } }
@media (max-width: 540px) { .d-stones { grid-template-columns: 1fr; row-gap: 46px; } }
/* Flipkaarten */
.d-flips { display: grid !important; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 2rem !important; }
.d-flips.d-n4 { grid-template-columns: repeat(4, 1fr); } .d-flips.d-n2 { grid-template-columns: repeat(2, 1fr); }
.d-flips > * { margin: 0 !important; }
.d-flip { background: transparent !important; perspective: 1000px; min-height: 250px; cursor: pointer; }
.d-flip-inner { position: relative; height: 100%; min-height: 250px; transition: transform .7s cubic-bezier(.3,1.3,.5,1); transform-style: preserve-3d; margin: 0 !important; }
.d-flip:hover .d-flip-inner, .d-flip.is-flipped .d-flip-inner, .d-flip:focus-within .d-flip-inner { transform: rotateY(180deg); }
.d-flip-front, .d-flip-back { position: absolute !important; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 24px; padding: 26px !important; margin: 0 !important; display: flex !important; flex-direction: column; }
.d-flip-front { background: var(--tint); }
.d-flip-front .d-icon { width: 44px; height: 44px; margin-bottom: 1rem !important; }
.d-flip-front h3 { font-size: 1.35rem !important; margin: 0 !important; }
.d-flip-hint { margin-top: auto !important; font-family: var(--wp--preset--font-family--hand); font-size: 1.3rem !important; color: var(--ink); }
.d-flip-hint::after { content: " ↻"; }
.d-flip-back { background: var(--ink); color: #fff; transform: rotateY(180deg); justify-content: center; }
.d-flip-back p { color: #fff; font-size: 15px; margin: 0 !important; }
@media (max-width: 900px) { .d-flips, .d-flips.d-n4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .d-flips, .d-flips.d-n4, .d-flips.d-n2 { grid-template-columns: 1fr; } }
/* Tekstballon */
.d-speech-section { text-align: center; }
.d-speech { position: relative; max-width: 820px; margin: 0 auto !important; border-radius: 44px; padding: clamp(28px, 5vw, 56px) !important; background: var(--tint); }
.d-speech::after { content: ""; position: absolute; left: 50%; bottom: -28px; margin-left: -10px; border: 28px solid transparent; border-top-color: var(--tint); border-bottom: 0; border-left-width: 0; }
.d-speech-text { font-family: var(--wp--preset--font-family--schreef); font-size: clamp(1.5rem, 3vw, 2.3rem) !important; line-height: 1.25; margin: 0 !important; text-wrap: balance; }
.d-speech-meta { display: flex !important; justify-content: center; align-items: center; gap: 14px; margin-top: 2.4rem !important; }
.d-speech-meta > * { margin: 0 !important; }
.d-speech-avatar { width: 64px; height: 64px; border-radius: 50%; overflow: hidden; border: 4px solid #fff; box-shadow: 0 8px 18px -8px rgba(0,0,0,.4); }
.d-speech-avatar img { width: 100%; height: 100% !important; object-fit: cover; }
.d-speech-initial { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: var(--wp--preset--color--oranje); color: #fff; font-family: var(--wp--preset--font-family--schreef); font-size: 1.8rem !important; }
.d-speech-who { text-align: left; font-size: 14px; color: var(--wp--preset--color--grijs); }
.d-speech-who strong { display: block; color: var(--wp--preset--color--tekst); font-size: 15px; }
/* Verhaal met vormfoto */
.d-story { gap: clamp(28px, 5vw, 72px) !important; }
.d-story-img { margin: 0 !important; overflow: hidden; border: 6px solid #fff; box-shadow: 0 30px 60px -32px rgba(30,43,69,.55); }
.d-story-img img { width: 100%; aspect-ratio: 1 / 1.05; object-fit: cover; }
.d-story-img.d-shape-arch img { aspect-ratio: 4 / 5; }
.d-story .d-hand-note { margin-bottom: .6rem !important; }
/* Rugzak */
.d-pack { position: relative; max-width: 420px; margin: 30px auto 0 !important; background: var(--wp--preset--color--oranje); border-radius: 60px 60px 34px 34px; padding: 70px 28px 34px !important; box-shadow: inset 0 -14px 0 rgba(0,0,0,.08), 0 30px 50px -30px rgba(30,43,69,.6); }
.d-pack::before { content: ""; position: absolute; left: 50%; top: -38px; width: 120px; height: 70px; margin-left: -60px; border: 12px solid #C8661F; border-bottom: 0; border-radius: 60px 60px 0 0; }
.d-pack::after { content: ""; position: absolute; left: 24px; right: 24px; top: 26px; height: 14px; border-radius: 7px; background: rgba(255,255,255,.35); }
.d-pack-list { list-style: none; padding: 18px 20px !important; margin: 0 !important; background: #fff; border-radius: 24px; display: grid; gap: 6px; }
.d-pack-list li { padding: 8px 8px 8px 36px; position: relative; font-weight: 500; font-size: 15px; }
.d-pack-list li::before { content: ""; position: absolute; left: 4px; top: 9px; width: 22px; height: 22px; border-radius: 6px; border: 2.5px solid var(--wp--preset--color--groen); }
.d-pack-list li::after { content: ""; position: absolute; left: 10px; top: 11px; width: 8px; height: 13px; border: solid var(--wp--preset--color--groen); border-width: 0 3px 3px 0; transform: rotate(45deg); }
/* Banner */
.d-banner { display: flex !important; align-items: center; gap: 18px; border-radius: 24px; padding: 20px 26px !important; border: 2px dashed var(--ink); max-width: 900px; margin: 0 auto !important; }
.d-banner > * { margin: 0 !important; }
.d-banner .d-icon { width: 40px; height: 40px; flex: none; }
.d-banner p { font-size: 15.5px; }
.d-banner a { color: var(--ink); font-weight: 600; }
/* Getallen */
.d-stats { display: grid !important; grid-template-columns: repeat(var(--n, 4), 1fr); gap: 16px; }
.d-stats.d-n2 { --n: 2; } .d-stats.d-n3 { --n: 3; } .d-stats.d-n4 { --n: 4; }
.d-stats > * { margin: 0 !important; }
.d-stat { border-radius: 26px; padding: 26px 22px !important; text-align: center; }
.d-stat > * { margin: 0 !important; }
.d-stat-num { font-family: var(--wp--preset--font-family--schreef); font-size: clamp(2.4rem, 5vw, 3.6rem) !important; line-height: 1; color: var(--ink); }
.d-stat-label { font-size: 14px; font-weight: 500; margin-top: 6px !important; }
@media (max-width: 781px) { .d-stats { grid-template-columns: 1fr 1fr; } }
/* Bagagelabels */
.d-tags { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 30px 20px; margin-top: 2.4rem !important; }
.d-tags > * { margin: 0 !important; }
.d-tag { position: relative; background: #F6E7C8; border-radius: 10px 10px 10px 10px; padding: 26px 20px 18px 74px !important; clip-path: polygon(14% 0, 100% 0, 100% 100%, 14% 100%, 0 50%); transform-origin: 0 50%; transition: transform .5s cubic-bezier(.3,1.6,.5,1); }
.d-tag:nth-child(odd) { transform: rotate(-2deg); } .d-tag:nth-child(even) { transform: rotate(1.5deg); }
.d-tag:hover { transform: rotate(-6deg); }
.d-tag::before { content: ""; position: absolute; left: 14px; top: 50%; width: 14px; height: 14px; margin-top: -7px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 3px #C9A86B; }
.d-tag > * { margin: 0 0 .3rem !important; }
.d-tag-ext { position: absolute; left: 36px; top: 16px; font-size: 10px !important; font-weight: 700; letter-spacing: .1em; color: #9A6A00; writing-mode: vertical-rl; }
.d-tag-title { font-weight: 600; font-size: 14.5px; line-height: 1.35; }
/* Envelop-afsluiter */
.d-ticket-letter { background: #fff !important; border: 3px solid var(--wp--preset--color--logoblauw); transform: rotate(1deg); }
.d-ticket-letter::before { content: ""; position: absolute; inset: 10px; border-radius: 18px; pointer-events: none; background: repeating-linear-gradient(135deg, var(--wp--preset--color--oranje) 0 14px, transparent 14px 22px, var(--wp--preset--color--logoblauw) 22px 36px, transparent 36px 44px); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; padding: 6px; opacity: .55; }
.d-ticket-letter .d-ticket-stub { background: var(--wp--preset--color--vlak-blauw); border-left-style: dotted; }
.d-ticket-letter .d-stamp { border-radius: 6px; border-style: dashed; transform: rotate(8deg); }
/* Vraag-box */
.d-faqbox > *:not(.d-eyebrow):not(h2) { max-width: 820px; }
.d-faqbox .d-faq { background: #fff; border-radius: 16px; border: 1px solid var(--d-line); margin-bottom: 10px !important; padding: 0 16px; }
/* Galerij-lijsten */
.d-frame-leaf { border-radius: 0 120px 0 120px; outline-color: var(--wp--preset--color--groen); }
.d-frame-round { border-radius: 50%; flex-basis: min(320px, 70vw); outline-color: var(--wp--preset--color--oranje); }
.d-frame-round img { aspect-ratio: 1; }
/* ===== Click & play (homepage) ===== */
.d-flip-sub { font-size: 14px !important; color: var(--ink); opacity: .8; margin: .3rem 0 0 !important; }
.d-flip-back h3, .d-flip-back .d-eyebrow { color: #fff !important; margin: 0 0 .5rem !important; }
.d-flip-back h3 { font-size: 1.2rem !important; }
.d-flip-back .d-link a, .d-flip-back a { color: var(--wp--preset--color--zon, #FFC94D) !important; font-weight: 600; }
.d-flip-back > * + * { margin-top: .6rem !important; }
.d-flip { transition: transform .3s var(--d-ease); }
.d-flip:active { transform: scale(.97); }
.d-tik-hint { font-family: var(--wp--preset--font-family--hand); font-size: 1.35rem !important; color: var(--wp--preset--color--oranje); margin: .8rem 0 !important; }
.d-tik-hint::before { content: "☞ "; }
/* afvinklijst */
.d-checks.d-klikbaar li { cursor: pointer; user-select: none; }
.d-checks.d-klikbaar li::before { background-color: #fff; box-shadow: inset 0 0 0 2px var(--wp--preset--color--groen); background-size: 0; transition: background .25s, background-size .25s; }
.d-checks.d-klikbaar li.is-af::before { background-color: var(--wp--preset--color--groen); background-size: 22px; animation: d-tik .45s cubic-bezier(.3,1.6,.5,1); }
.d-checks.d-klikbaar li.is-af { color: var(--d-navy); }
.d-checks-klaar { font-family: var(--wp--preset--font-family--hand); font-size: 1.5rem !important; color: var(--wp--preset--color--groen); margin: .6rem 0 0 !important; opacity: 0; transform: translateY(6px); transition: opacity .4s, transform .4s; }
.d-checks-klaar.is-zichtbaar { opacity: 1; transform: none; }
@keyframes d-tik { 0% { transform: scale(.4); } 100% { transform: scale(1); } }
/* klok die meedraait */
.d-clock .d-clock-hand { transition: transform .9s cubic-bezier(.4,1.4,.5,1); }
.d-dag li { cursor: pointer; }
.d-dag li.is-nu { background: var(--t-yellow, #FFF3CF); transform: translateX(6px); }
.d-dag li.is-nu strong { color: var(--wp--preset--color--oranje); }
.d-pillar { cursor: pointer; }
/* locatiekiezer */
.d-loc-knoppen { display: flex; flex-wrap: wrap; gap: 10px; margin: 1.6rem 0 1.2rem; }
.d-loc-knop { display: inline-flex; align-items: center; gap: 10px; font: 600 15px/1 var(--wp--preset--font-family--poppins, Poppins, sans-serif); padding: 10px 18px 10px 10px; border-radius: 999px; border: 2px solid transparent; background: #fff; color: var(--d-navy); cursor: pointer; transition: transform .25s var(--d-ease), background .25s, border-color .25s; }
.d-loc-knop .d-icon { width: 34px; height: 34px; border-radius: 50%; background: var(--wp--preset--color--groen) !important; -webkit-mask-size: 20px; mask-size: 20px; }
.d-loc-knop:hover { transform: translateY(-2px); }
.d-loc-knop[aria-selected="true"] { background: var(--d-navy); color: #fff; }
.d-loc-knop[aria-selected="true"] .d-icon { background: var(--wp--preset--color--zon, #FFC94D) !important; }
.d-loc-knop:focus-visible { outline: 3px solid var(--wp--preset--color--oranje); outline-offset: 2px; }
.d-loc-kiezer.is-kiezer { display: block !important; }
.d-loc-kiezer.is-kiezer > .d-loc { display: none !important; }
.d-loc-kiezer.is-kiezer > .d-loc.is-actief { display: grid !important; grid-template-columns: 1.1fr 1fr; animation: d-loc-in .5s var(--d-ease); }
.d-loc-kiezer.is-kiezer > .d-loc.is-actief .d-loc-img { border-radius: 0; }
.d-loc-kiezer.is-kiezer > .d-loc.is-actief .d-loc-img img { height: 100%; aspect-ratio: auto; min-height: 300px; }
.d-loc-kiezer.is-kiezer > .d-loc.is-actief .d-loc-body { padding: 32px !important; justify-content: center; }
.d-loc-kiezer.is-kiezer > .d-loc.is-actief h3 { font-size: 2rem !important; }
@keyframes d-loc-in { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }
@media (max-width: 700px) {
.d-loc-knoppen { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: -16px; padding-inline: 16px; }
.d-loc-knop { flex: none; }
.d-loc-kiezer.is-kiezer > .d-loc.is-actief { grid-template-columns: 1fr; }
.d-loc-kiezer.is-kiezer > .d-loc.is-actief .d-loc-img img { min-height: 0; aspect-ratio: 4 / 3; }
}
@media (prefers-reduced-motion: reduce) {
.d-clock .d-clock-hand { transition: none; }
.d-loc-kiezer.is-kiezer > .d-loc.is-actief, .d-checks.d-klikbaar li.is-af::before { animation: none; }
}
/* Lesblok: document */
.d-doc { background: var(--tint) !important; border-radius: 24px; padding: 26px !important; }
.d-doc > * { margin-block: 0 .7rem !important; }
.d-doc .d-icon { width: 40px; height: 40px; }
.d-doc .wp-block-file { background: #fff; border-radius: 16px; padding: 12px; }
.d-doc .wp-block-file__embed { border-radius: 10px; }
.d-doc .wp-block-file__button { border-radius: 999px !important; background: var(--wp--preset--color--blauw-donker, #1E2B45) !important; padding: .6em 1.2em !important; }
/* Feitenstrook als vrolijke stickers */
.d-facts.d-facts-stickers { border: 0 !important; background: transparent !important; padding: 8px var(--wp--style--root--padding-right, 20px) 24px !important; }
.d-facts-stickers .d-stickers-feiten { gap: 22px !important; max-width: 1320px; margin: 0 auto !important; }
.d-sticker-fact { position: relative; border: 0 !important; border-radius: 26px !important; padding: 22px 22px 20px !important; background: var(--tint) !important; box-shadow: 0 14px 28px -20px rgba(30, 43, 69, .45); transform: rotate(var(--r, -1.5deg)); transition: transform .35s cubic-bezier(.3, 1.5, .5, 1), box-shadow .35s; cursor: pointer; }
.d-sticker-fact:nth-child(2) { --r: 1.2deg; } .d-sticker-fact:nth-child(3) { --r: -.8deg; } .d-sticker-fact:nth-child(4) { --r: 1.6deg; }
.d-sticker-fact::before { content: ""; position: absolute; top: -9px; left: 50%; width: 64px; height: 18px; margin-left: -32px; background: rgba(255, 255, 255, .65); border-radius: 3px; transform: rotate(-3deg); box-shadow: 0 1px 2px rgba(0, 0, 0, .06); }
.d-sticker-fact:hover { transform: rotate(0) translateY(-6px); box-shadow: 0 22px 34px -22px rgba(30, 43, 69, .55); }
.d-sticker-fact.is-wiebel { animation: d-wiebel .6s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes d-wiebel { 0% { transform: rotate(var(--r)) scale(1); } 30% { transform: rotate(-6deg) scale(1.06); } 60% { transform: rotate(5deg) scale(1.03); } 100% { transform: rotate(var(--r)) scale(1); } }
.d-sticker-fact > * { margin: 0 !important; }
.d-sticker-fact .d-icon { width: 34px; height: 34px; background: var(--ink) !important; margin-bottom: 12px !important; }
.d-sticker-fact .d-fact-big { font-family: var(--wp--preset--font-family--schreef); font-size: clamp(1.45rem, 2.2vw, 1.9rem) !important; line-height: 1.1 !important; color: var(--d-navy) !important; white-space: nowrap; }
.d-sticker-fact .d-fact-small { font-size: 13.5px !important; line-height: 1.45; color: #4a4d55; margin-top: 6px !important; }
@media (max-width: 860px) { .d-facts-stickers .d-stickers-feiten { grid-template-columns: repeat(2, 1fr) !important; } }
@media (min-width: 861px) and (max-width: 1100px) { .d-facts-stickers .d-stickers-feiten { grid-template-columns: repeat(4, 1fr) !important; gap: 14px !important; } .d-sticker-fact { padding: 18px 16px !important; } }
@media (max-width: 560px) {
.d-facts-stickers .d-stickers-feiten { grid-template-columns: 1fr !important; gap: 16px !important; }
.d-sticker-fact { display: grid !important; grid-template-columns: 44px 1fr; column-gap: 14px; align-items: center; padding: 16px 18px !important; }
.d-sticker-fact .d-icon { grid-row: span 2; margin: 0 !important; width: 36px; height: 36px; }
.d-sticker-fact .d-fact-big { font-size: 1.3rem !important; white-space: normal; }
.d-sticker-fact .d-fact-small { margin-top: 2px !important; overflow-wrap: break-word; hyphens: auto; -webkit-hyphens: auto; }
.d-sticker-fact { --r: -.6deg; } .d-sticker-fact:nth-child(2) { --r: .5deg; } .d-sticker-fact:nth-child(3) { --r: -.4deg; } .d-sticker-fact:nth-child(4) { --r: .6deg; }
}
@media (prefers-reduced-motion: reduce) { .d-sticker-fact { transform: none; } .d-sticker-fact.is-wiebel { animation: none; } }
/* Opvangkaarten: alles direct leesbaar */
.d-opvang-kaarten { display: grid !important; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 1.6rem !important; }
.d-opvang-kaarten > * { margin: 0 !important; }
.d-opvang-kaart { background: var(--tint) !important; border-radius: 24px; padding: 26px 26px 22px !important; display: flex !important; flex-direction: column; transition: transform .35s var(--d-ease), box-shadow .35s; }
.d-opvang-kaart:hover { transform: translateY(-6px); box-shadow: 0 22px 36px -24px rgba(30, 43, 69, .5); }
.d-opvang-kaart > * { margin: 0 !important; }
.d-opvang-kaart .d-icon { width: 40px; height: 40px; margin-bottom: 14px !important; }
.d-opvang-kaart h3 { font-size: 1.45rem !important; line-height: 1.15; }
.d-opvang-leeftijd { display: inline-block; align-self: flex-start; margin: 8px 0 12px !important; padding: 3px 12px; border-radius: 999px; background: rgba(255, 255, 255, .7); color: var(--ink); font-weight: 600; font-size: 13.5px !important; }
.d-opvang-kaart p:is(:not([class]), :where(.d-nb) [class="wp-block-paragraph"]) { font-size: 15px; line-height: 1.6; color: #3d4048; }
.d-opvang-kaart .d-link { margin-top: auto !important; padding-top: 14px; }
.d-opvang-kaart .d-link a { color: var(--ink); font-weight: 600; text-decoration: none; }
.d-opvang-kaart .d-link a::after { content: " →"; transition: margin .2s; }
.d-opvang-kaart:hover .d-link a::after { margin-left: 4px; }
@media (max-width: 760px) { .d-opvang-kaarten { grid-template-columns: 1fr; gap: 14px; } .d-opvang-kaart { padding: 20px !important; } }
/* Tabs (Waarom? Hoe? Wat?): zonder JavaScript staan de panelen onder elkaar */
.d-tabs { display: grid !important; gap: 14px; }
.d-tabs > * { margin: 0 !important; }
.d-tab-paneel { background: var(--tint) !important; border-radius: 26px; padding: 30px 32px !important; }
.d-tab-paneel > * { margin: 0 !important; }
.d-tab-paneel .d-icon { width: 40px; height: 40px; margin-bottom: 12px !important; }
.d-tab-paneel .d-tab-label { color: var(--ink) !important; margin-bottom: 6px !important; }
.d-tab-paneel h3 { font-size: clamp(1.5rem, 3vw, 2.1rem) !important; line-height: 1.15; max-width: 22ch; margin-bottom: 12px !important; }
.d-tab-paneel p:is(:not([class]), :where(.d-nb) [class="wp-block-paragraph"]) { font-size: 16.5px; line-height: 1.7; max-width: 60ch; color: #3d4048; }
.d-tabs.is-tabs { grid-template-columns: 240px 1fr; align-items: start; gap: 22px; }
.d-tab-knoppen { display: grid; gap: 10px; }
.d-tab-knop { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 16px 18px; border-radius: 18px; border: 2px solid transparent; background: #F5F3EE; font: 400 1.35rem/1.1 var(--wp--preset--font-family--schreef); color: var(--d-navy); cursor: pointer; transition: background .25s, transform .25s var(--d-ease), border-color .25s; }
.d-tab-knop .d-icon { width: 26px; height: 26px; background: var(--d-navy) !important; }
.d-tab-knop:hover { transform: translateX(4px); }
.d-tab-knop[aria-selected="true"] { background: var(--tint, #fff); border-color: var(--ink, var(--d-navy)); }
.d-tab-knop[aria-selected="true"] .d-icon { background: var(--ink) !important; }
.d-tab-knop:focus-visible { outline: 3px solid var(--wp--preset--color--oranje); outline-offset: 2px; }
.d-tabs.is-tabs .d-tab-paneel { display: none !important; min-height: 100%; }
.d-tabs.is-tabs .d-tab-paneel.is-actief { display: block !important; animation: d-loc-in .45s var(--d-ease); }
.d-tabs.is-tabs .d-tab-paneel .d-icon, .d-tabs.is-tabs .d-tab-paneel .d-tab-label { display: none !important; }
@media (max-width: 760px) {
.d-tabs.is-tabs { grid-template-columns: 1fr; gap: 12px; }
.d-tab-knoppen { grid-template-columns: repeat(3, 1fr); gap: 8px; }
.d-tab-knop { justify-content: center; flex-direction: column; gap: 6px; padding: 12px 8px; font-size: 1.1rem; text-align: center; }
.d-tab-knop:hover { transform: none; }
.d-tab-paneel { padding: 22px 20px !important; }
}
@media (prefers-reduced-motion: reduce) { .d-tabs.is-tabs .d-tab-paneel.is-actief { animation: none; } }
/* ===== Homepage: warme achtergrond en kleurbanden met een golvende rand ===== */
body.home { background: #F6EFE3; }
body.home .d-section:not(.d-band) { background-color: transparent !important; }
.d-band { position: relative; --band: #fff; background-color: var(--band) !important; }
.d-band-wit { --band: #FFFFFF; } .d-band-groen { --band: #E3EBD3; } .d-band-perzik { --band: #F9D2B6; } .d-band-blauw { --band: #DFE8F6; }
.d-band:not(.d-band-vervolg)::before { content: ""; position: absolute; left: 0; right: 0; top: -27px; height: 28px; background: var(--band);
-webkit-mask: var(--golf) var(--golf-pos, center) / var(--golf-size, 100% 100%) var(--golf-rep, no-repeat);
mask: var(--golf) var(--golf-pos, center) / var(--golf-size, 100% 100%) var(--golf-rep, no-repeat); pointer-events: none; }
.d-band { --golf: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 28' preserveAspectRatio='none'%3E%3Cpath d='M0 28 L0 16 C150 0 300 0 450 12 C600 24 750 26 900 14 C1020 4 1110 4 1200 12 L1200 28 Z'/%3E%3C/svg%3E"); }
.d-golf-dubbel { --golf: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 32' preserveAspectRatio='none'%3E%3Cpath d='M0 32 L0 20 C100 2 220 2 320 16 C420 30 520 30 620 14 C720 0 860 0 960 14 C1060 28 1140 26 1200 18 L1200 32 Z'/%3E%3C/svg%3E"); }
.d-golf-wolk { --golf: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 30'%3E%3Cpath d='M0 30 L0 22 A18 18 0 0 1 34 16 A24 24 0 0 1 80 12 A20 20 0 0 1 118 18 A14 14 0 0 1 140 22 L140 30 Z'/%3E%3C/svg%3E"); --golf-size: 140px 30px; --golf-rep: repeat-x; --golf-pos: left bottom; }
.d-golf-schulp { --golf: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 20' preserveAspectRatio='none'%3E%3Cpath d='M0 20 L0 10 A10 10 0 0 1 20 10 A10 10 0 0 1 40 10 L40 20 Z'/%3E%3C/svg%3E"); --golf-size: 72px 32px; --golf-rep: repeat-x; --golf-pos: left bottom; }
.d-golf-schulp::before { top: -31px !important; height: 32px !important; }
/* onderkant: dezelfde vorm, gespiegeld (niet als er direct weer een gekleurd blok volgt) */
.d-band { z-index: 1; }
.d-band::after { content: ""; position: absolute; left: 0; right: 0; bottom: -27px; height: 28px; background: var(--band); transform: scaleY(-1); pointer-events: none;
-webkit-mask: var(--golf) var(--golf-pos, center) / var(--golf-size, 100% 100%) var(--golf-rep, no-repeat);
mask: var(--golf) var(--golf-pos, center) / var(--golf-size, 100% 100%) var(--golf-rep, no-repeat); }
.d-golf-schulp::after { bottom: -31px; height: 32px; }
.d-band:has(+ .d-band)::after { display: none; }
body.home .d-band + .d-section:not(.d-band) { padding-top: calc(clamp(2.6rem, 6vw, 4.5rem) + 20px) !important; }
body.home .d-section { padding-top: clamp(2.6rem, 6vw, 4.5rem) !important; padding-bottom: clamp(2.6rem, 6vw, 4.5rem) !important; }
body.home .d-section.d-tight-top { padding-top: 0 !important; }
body.home .d-band { margin-top: 28px !important; }
body.home .d-band.d-band-vervolg { margin-top: 0 !important; }
body.home .d-band + .d-band:not(.d-band-vervolg) { margin-top: 0 !important; }
/* ===== Dagtijdlijn: van de zon op tot ophalen ===== */
.d-tijdlijn-kop { max-width: 640px; margin: 0 auto 1.2rem !important; text-align: center; }
.d-tijdlijn-kop > * { margin-left: auto !important; margin-right: auto !important; }
.d-tijdlijn { display: grid !important; grid-template-columns: repeat(2, 1fr); gap: 12px; max-width: 1100px; margin: 0 auto !important; }
.d-tijdlijn > * { margin: 0 !important; }
.d-moment { background: #fff; border-radius: 20px; padding: 18px 20px !important; display: grid !important; grid-template-columns: 44px 1fr; column-gap: 14px; align-items: start; }
.d-moment > * { margin: 0 !important; }
.d-moment .d-icon { grid-row: span 3; width: 36px; height: 36px; background: #C8661F !important; }
.d-moment-tijd { font-family: var(--wp--preset--font-family--schreef); font-size: 1.05rem !important; color: #C8661F; }
.d-moment h3 { font-size: 1.2rem !important; line-height: 1.2; margin: 2px 0 4px !important; }
.d-moment p:is(:not([class]), :where(.d-nb) [class="wp-block-paragraph"]) { font-size: 15px; line-height: 1.55; color: #4a4d55; }
/* met JavaScript: lijn met acht knoppen en één groot kaartje */
.d-tijdlijn.is-tijdlijn { display: block !important; }
.d-tl-spoor { position: relative; display: grid; grid-template-columns: repeat(var(--n, 8), 1fr); gap: 4px; padding: 14px 10px 10px; margin-bottom: 18px; }
.d-tl-spoor::before { content: ""; position: absolute; left: 6%; right: 6%; top: 42px; height: 6px; border-radius: 6px; background: linear-gradient(90deg, #FFC94D, #EC8B48 45%, #F49AB4 70%, #8EAAD5); }
.d-tl-knop { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 0; border: 0; background: none; cursor: pointer; font: 600 13px/1 var(--wp--preset--font-family--zonder-schreef, Poppins), sans-serif; color: #6B6F78; }
.d-tl-knop .d-tl-bol { width: 56px; height: 56px; border-radius: 50%; background: #fff; display: grid; place-items: center; box-shadow: 0 8px 18px -10px rgba(30, 43, 69, .45); border: 3px solid #fff; transition: transform .35s cubic-bezier(.3, 1.6, .5, 1), background .3s, border-color .3s; }
.d-tl-knop .d-icon { width: 26px; height: 26px; background: #C8661F !important; }
.d-tl-knop:hover .d-tl-bol { transform: translateY(-3px); }
.d-tl-knop[aria-selected="true"] { color: var(--d-navy); }
.d-tl-knop[aria-selected="true"] .d-tl-bol { transform: scale(1.18); background: #FFC94D; border-color: #fff; }
.d-tl-knop[aria-selected="true"] .d-icon { background: var(--d-navy) !important; }
.d-tl-knop:focus-visible .d-tl-bol { outline: 3px solid var(--d-navy); outline-offset: 3px; }
.d-tijdlijn.is-tijdlijn .d-moment { display: none !important; }
.d-tijdlijn.is-tijdlijn .d-moment.is-actief { display: grid !important; max-width: 620px; margin: 0 auto !important; padding: 26px 28px !important; grid-template-columns: 64px 1fr; box-shadow: 0 20px 40px -28px rgba(30, 43, 69, .45); animation: d-loc-in .45s var(--d-ease); }
.d-tijdlijn.is-tijdlijn .d-moment.is-actief .d-icon { width: 52px; height: 52px; }
.d-tijdlijn.is-tijdlijn .d-moment.is-actief .d-moment-tijd { font-size: 1.4rem !important; }
.d-tijdlijn.is-tijdlijn .d-moment.is-actief h3 { font-size: 1.6rem !important; }
.d-tl-nav { display: flex; justify-content: center; gap: 10px; margin-top: 14px; }
.d-tl-nav button { border: 2px solid var(--d-navy); background: #fff; color: var(--d-navy); border-radius: 999px; padding: 8px 18px; font: 600 14px var(--wp--preset--font-family--zonder-schreef, Poppins), sans-serif; cursor: pointer; }
.d-tl-nav button:disabled { opacity: .35; cursor: default; }
@media (max-width: 760px) {
.d-tijdlijn { grid-template-columns: 1fr; }
.d-tl-spoor { gap: 2px; padding: 10px 0 8px; margin-bottom: 14px; }
.d-tl-spoor::before { top: 32px; left: 5%; right: 5%; height: 4px; }
.d-tl-knop { font-size: 11px; gap: 5px; }
.d-tl-knop .d-tl-bol { width: 44px; height: 44px; border-width: 2px; }
.d-tl-knop .d-icon { width: 21px; height: 21px; }
.d-tl-knop[aria-selected="true"] .d-tl-bol { transform: scale(1.12); }
.d-tijdlijn.is-tijdlijn .d-moment.is-actief { padding: 20px !important; grid-template-columns: 48px 1fr; }
.d-tijdlijn.is-tijdlijn .d-moment.is-actief .d-icon { width: 40px; height: 40px; }
}
@media (max-width: 430px) {
.d-tl-spoor::before { top: 27px; }
.d-tl-knop { font-size: 10px; letter-spacing: -.01em; }
.d-tl-knop .d-tl-bol { width: 34px; height: 34px; box-shadow: 0 5px 12px -8px rgba(30, 43, 69, .5); }
.d-tl-knop .d-icon { width: 17px; height: 17px; }
}
@media (prefers-reduced-motion: reduce) { .d-tl-knop .d-tl-bol, .d-tijdlijn.is-tijdlijn .d-moment.is-actief { transition: none; animation: none; } }
@media (max-width: 380px) {
.d-tl-spoor { margin-left: -12px; margin-right: -12px; gap: 0; }
.d-tl-spoor::before { top: 25px; }
.d-tl-knop { font-size: 9.5px; min-width: 0; }
.d-tl-knop .d-tl-bol { width: 30px; height: 30px; }
.d-tl-knop .d-icon { width: 15px; height: 15px; }
}
/* Afsluiter: zonnig uitnodigingskaartje */
.d-closer.d-closer-zon { position: relative; background: #FFD66B !important; border-radius: 32px; padding: clamp(28px, 5vw, 52px) clamp(22px, 5vw, 56px) !important; overflow: visible; box-shadow: 0 26px 50px -34px rgba(46, 59, 94, .55); }
.d-closer.d-closer-zon::before { content: ""; position: absolute; inset: 14px; border: 2px dashed rgba(46, 59, 94, .28); border-radius: 22px; pointer-events: none; }
.d-closer.d-closer-zon::after { content: none !important; }
.d-closer-zon .d-eyebrow { color: #8A4B12 !important; }
.d-closer-zon h2 { color: #2E3B5E; font-size: clamp(2rem, 4vw, 3rem) !important; margin: .2rem 0 .6rem !important; }
.d-closer-zon p:is(:not([class]), :where(.d-nb) [class="wp-block-paragraph"]) { color: #4a3a1c; font-size: 16.5px; line-height: 1.6; max-width: 48ch; }
.d-closer-sticker { position: absolute; top: -18px; right: clamp(20px, 6vw, 70px); margin: 0 !important; background: #fff; color: #EC8B48; font-family: var(--wp--preset--font-family--hand); font-size: 1.6rem !important; line-height: 1; padding: 10px 18px 8px; border-radius: 14px; transform: rotate(6deg); box-shadow: 0 10px 20px -12px rgba(46, 59, 94, .5); z-index: 2; }
.d-closer-zon .wp-block-buttons { gap: 10px; }
.d-closer-zon .wp-block-button { width: 100%; }
.d-closer-zon .wp-block-button__link { width: 100%; justify-content: center; text-align: center; border-radius: 999px !important; padding: 14px 22px !important; font-weight: 600; }
.d-closer-zon .wp-block-button:not(.is-style-outline) .wp-block-button__link { background: #2E3B5E !important; color: #fff !important; }
.d-closer-zon .wp-block-button.is-style-outline .wp-block-button__link { background: #fff !important; color: #2E3B5E !important; border: 2px solid #2E3B5E !important; }
.d-closer-app { margin: 12px 0 0 !important; text-align: center; font-size: 14.5px !important; color: #4a3a1c; }
.d-closer-app a { color: #2E3B5E; font-weight: 600; }
.d-closer-zon .wp-block-column:last-child { align-items: stretch !important; max-width: 340px; margin-left: auto; }
@media (max-width: 781px) { .d-closer-zon .wp-block-column:last-child { max-width: none; margin-left: 0; } }
/* tijdlijn: lucht tussen tijden, kaartje en knoppen */
.d-tijdlijn.is-tijdlijn .d-moment.is-actief { margin-top: 18px !important; }
.d-tijdlijn > .d-tl-nav { margin-top: 26px !important; }
.d-closer.d-closer-zon::before { width: auto !important; height: auto !important; background: none !important; filter: none !important; opacity: 1 !important; transform: none !important; animation: none !important; top: 14px !important; right: 14px !important; bottom: 14px !important; left: 14px !important; }
/* Mini-kompas naast de openingsfoto; de naald draait mee met scrollen */
.d-mini-kompas { position: absolute; width: 86px; height: 86px; left: -8px; bottom: 26px; z-index: 3; filter: drop-shadow(0 10px 18px rgba(30,43,69,.25)); }
.d-mini-kompas svg { width: 100%; height: 100%; display: block; }
.d-mk-naald { transform-box: view-box; transform-origin: 50px 50px; transition: transform .3s ease-out; }
.d-hero-home .wp-block-column:last-child { position: relative; }
@media (max-width: 781px) { .d-mini-kompas { width: 64px; height: 64px; left: 0; bottom: 10px; } }
/* Pop-up prentenboek: papieren taferelen die op de rand van een blok omhoog klappen (gebouwd in animaties.js) */
.d-popup { position: relative; }
.d-pp-scene { position: absolute; bottom: 100%; width: min(500px, 44%); aspect-ratio: 500 / 130; z-index: 2; perspective: 700px; perspective-origin: 50% 0; pointer-events: none; }
.d-pp-scene.is-rechts { right: max(20px, calc((100% - 1320px) / 2)); }
.d-pp-scene.is-links { left: max(20px, calc((100% - 1320px) / 2)); }
.d-band:not(.d-band-vervolg) > .d-pp-scene { bottom: calc(100% - 2px); }
.d-pp { position: absolute; transform-origin: 50% 100%; transform: rotateX(86deg); opacity: 0; pointer-events: auto; cursor: pointer;
transition: transform .8s cubic-bezier(.25,1.6,.45,1) var(--d, 0s), opacity .2s linear var(--d, 0s);
translate: 0 calc(var(--p, 0) * var(--diep, 0) * 1px); }
.d-pp { z-index: 1; }
.d-pp-heuvel, .d-pp.is-achter { z-index: 0; }
.d-pp-heuvel { cursor: default; }
.d-pp-scene.is-open .d-pp { transform: none; opacity: 1; }
.d-pp-in, .d-pp svg { display: block; width: 100%; }
.d-pp svg { height: auto; overflow: visible; filter: drop-shadow(2px 3px 0 rgba(46,49,56,.13)); }
.d-pp-scene.is-open .d-pp.is-zwevend .d-pp-in { animation: d-pp-zweef 5s ease-in-out infinite alternate; }
.d-pp-wolk.is-zwevend .d-pp-in { animation-name: d-pp-drijf !important; animation-duration: 9s !important; }
.d-pp-draai { transform-box: view-box; transform-origin: 50px 50px; animation: d-pp-draai 24s linear infinite; }
.d-pp.is-hup svg { animation: d-pp-hup .7s cubic-bezier(.3,1.6,.5,1); }
.d-pp:hover svg { transform: translateY(-3px) rotate(-2deg); transition: transform .3s; }
@keyframes d-pp-zweef { from { transform: translateY(0) rotate(-2deg); } to { transform: translateY(-8px) rotate(2deg); } }
@keyframes d-pp-drijf { from { transform: translateX(-10px); } to { transform: translateX(12px); } }
@keyframes d-pp-draai { to { transform: rotate(360deg); } }
@keyframes d-pp-hup { 0% { transform: none; } 30% { transform: translateY(-18px) scale(1.12, .92) rotate(-6deg); } 60% { transform: translateY(0) scale(.94, 1.06) rotate(4deg); } 100% { transform: none; } }
/* ruimte onderaan het blok erboven, zodat het tafereel niet over kaarten of tekst valt */
body.home :is(.d-section, .d-facts):has(+ .d-popup) { padding-bottom: calc(2.2rem + .26 * min(500px, 44vw)) !important; }
@media (max-width: 781px) {
.d-pp-scene { width: 78%; }
body.home :is(.d-section, .d-facts):has(+ .d-popup) { padding-bottom: calc(1.8rem + .26 * 78vw) !important; }
.d-pp-scene.is-rechts { right: 12px; } .d-pp-scene.is-links { left: 12px; }
}
@media (prefers-reduced-motion: reduce) {
.d-pp { transform: none; opacity: 1; transition: none; translate: none; }
.d-pp-in, .d-pp-draai, .d-pp svg { animation: none !important; }
}
/* Papieren poppetjes: gluren boven hun kaart uit, zwaaien en zeggen iets bij tikken (animaties.js) */
.d-papierfig { pointer-events: none; }
.d-pf-raam { display: block; position: relative; }
.d-pf-raam svg { display: block; width: 100%; height: auto; overflow: visible; filter: drop-shadow(2px 3px 0 rgba(46,49,56,.13)); }
.d-pf-arm { transform-box: view-box; transform-origin: 74px 88px; }
.d-pf-zeg { position: absolute; z-index: 3; left: 88%; bottom: 62%; white-space: nowrap; background: #fff; color: var(--wp--preset--color--tekst); font-family: Caveat, cursive; font-size: 1.35rem; font-weight: 700; line-height: 1; padding: 8px 14px 9px; border-radius: 16px 16px 16px 4px; box-shadow: 0 8px 20px -10px rgba(30,43,69,.4); transform: scale(0); transform-origin: 0 100%; opacity: 0; transition: transform .35s cubic-bezier(.3,1.6,.5,1), opacity .2s; }
.is-zegt .d-pf-zeg { transform: scale(1); opacity: 1; }
.is-zegt .d-pf-arm, .d-rol.is-in .d-pf-arm { animation: d-pf-zwaai 1.1s ease-in-out .5s 1; }
.is-zegt .d-pf-arm { animation-delay: 0s; }
.d-rol:hover .d-pf-arm { animation: d-pf-zwaai 1.1s ease-in-out infinite; }
@keyframes d-pf-zwaai { 0%, 100% { transform: rotate(0); } 25%, 75% { transform: rotate(-28deg); } 50% { transform: rotate(8deg); } }
/* Drie kaarten met een poppetje erboven */
.d-rollen { margin-top: 96px !important; gap: 22px !important; }
.d-rol { position: relative; overflow: visible !important; border-radius: 24px !important; padding-top: 30px !important; cursor: pointer; transform: rotate(var(--r, 0deg)); transition: transform .4s cubic-bezier(.3,1.5,.5,1), box-shadow .4s; box-shadow: 0 14px 30px -24px rgba(30,43,69,.45); }
.d-rol-blauw { background: #DFE8F6 !important; --r: -1.2deg; } .d-rol-groen { background: #E3EBD3 !important; --r: .9deg; } .d-rol-oranje { background: #FBE0CC !important; --r: -.7deg; }
.d-rol:hover { transform: rotate(0) translateY(-4px); box-shadow: 0 20px 34px -22px rgba(30,43,69,.5); }
.d-rol > .d-papierfig { position: absolute; left: 22px; bottom: calc(100% - 2px); width: 108px; margin: 0 !important; }
.d-rol .d-pf-raam { height: 86px; overflow: hidden; }
.d-rol .d-pf-raam svg { transform: translateY(100%); transition: transform .7s cubic-bezier(.3,1.5,.5,1); }
.d-rol.is-in .d-pf-raam svg { transform: translateY(0); }
.d-rol:hover .d-pf-raam svg { transform: translateY(-5px); }
/* Kring van specialisten rond je kind */
.d-kring { position: relative; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; grid-template-areas: "a . b" ". k ." "c o d"; gap: 14px 12px !important; align-items: center; }
.d-kring > .d-kring-lijnen { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.d-kring-lijnen svg { width: 100%; height: 100%; overflow: visible; }
.d-kring-lijnen line { stroke: #E2D6BF; stroke-width: 2.5; stroke-linecap: round; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .9s ease-out .2s; }
.d-kring.is-in .d-kring-lijnen line { stroke-dashoffset: 0; }
.d-kring-kind { grid-area: k; position: relative; z-index: 1; justify-self: center; width: 132px; aspect-ratio: 1; border-radius: 50%; background: #FFF3C4; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding-bottom: 12px; box-shadow: 0 0 0 8px #FBF8F2; cursor: pointer; transform: scale(.3); opacity: 0; transition: transform .6s cubic-bezier(.3,1.6,.5,1), opacity .3s; }
.d-kring.is-in .d-kring-kind { transform: none; opacity: 1; }
.d-kring-kind .d-papierfig { width: 76px; }
.d-kring-kind > span { font-family: Caveat, cursive; font-size: 1.25rem; font-weight: 700; color: #B5652E; line-height: 1; margin-top: 2px; }
.d-kring-kind .d-pf-zeg { left: 70%; bottom: 70%; }
.d-kring > .d-expert-item { position: relative; z-index: 1; flex-direction: column; text-align: center; gap: 4px !important; padding: 14px 10px 14px !important; transform: scale(.4) rotate(-8deg); opacity: 0; cursor: pointer;
transition: transform .55s cubic-bezier(.3,1.6,.5,1) calc(.35s + var(--i, 0) * .12s), opacity .3s calc(.35s + var(--i, 0) * .12s); }
.d-kring.is-in > .d-expert-item { transform: none; opacity: 1; }
.d-kring > .d-expert-item::before { left: 50%; top: 14px; margin: 0 0 0 -24px; width: 48px; height: 48px; border-radius: 50%; }
.d-kring > .d-expert-item .d-icon { margin: 12px auto 14px !important; }
.d-kring > .d-expert-item.is-wip { animation: d-pp-hup .6s cubic-bezier(.3,1.6,.5,1); }
.d-kring > .d-expert-item:nth-child(3) { grid-area: a; } .d-kring > .d-expert-item:nth-child(4) { grid-area: b; }
.d-kring > .d-expert-item:nth-child(5) { grid-area: c; } .d-kring > .d-expert-item:nth-child(6) { grid-area: d; }
.d-kring > .d-expert-ouder { grid-area: o; background: #FBF8F2 !important; }
@media (max-width: 781px) {
.d-rollen { margin-top: 90px !important; row-gap: 100px !important; }
.d-kring { grid-template-columns: 1fr 1fr !important; grid-template-areas: "k k" "a b" "c d" "o o"; }
.d-kring > .d-kring-lijnen { display: none; }
.d-kring-kind { width: 116px; margin-bottom: 6px; }
.d-kring { align-items: stretch; }
.d-kring > .d-expert-item { padding: 12px 6px !important; }
.d-kring .d-expert-tekst { font-size: 12.5px !important; }
.d-kring .d-expert-tekst strong { font-size: 13px; hyphens: manual; -webkit-hyphens: manual; letter-spacing: -.01em; }
}
@media (prefers-reduced-motion: reduce) {
.d-rol .d-pf-raam svg, .d-kring-kind, .d-kring > .d-expert-item { transform: none !important; opacity: 1 !important; transition: none !important; }
.d-pf-arm { animation: none !important; } .d-kring-lijnen line { stroke-dashoffset: 0; transition: none; }
}
/* Kompas als papieren kompasroos (animaties.js) */
.d-kompas { max-width: 470px; }
.d-kompas svg { filter: drop-shadow(0 18px 30px rgba(30,43,69,.12)); }
.d-kompas svg circle[r="192"] { filter: drop-shadow(3px 5px 0 rgba(46,49,56,.06)); }
.d-roos { transform-box: view-box; transform-origin: 200px 200px; transform: rotate(-60deg) scale(.4); opacity: 0; transition: transform 1.1s cubic-bezier(.3,1.4,.5,1), opacity .4s; }
.d-kompas.in .d-roos { transform: none; opacity: 1; }
.d-kompas-richting .binnen { transform: scale(0); transition: transform .6s cubic-bezier(.3,1.6,.5,1) calc(.5s + var(--i, 0) * .15s); }
.d-kompas.in .d-kompas-richting .binnen { transform: scale(.92); }
.d-kompas.in .d-kompas-richting:hover .binnen, .d-kompas.in .d-kompas-richting:focus-visible .binnen { transform: scale(1); transition-delay: 0s; }
.d-kompas.in .d-kompas-richting.is-actief .binnen { transform: scale(1.04); transition-delay: 0s; }
.d-kompas-richting { filter: drop-shadow(2px 4px 0 rgba(46,49,56,.12)); }
.d-kt-hart, .d-kt-bal, .d-kt-plant { transform-box: fill-box; transform-origin: 50% 100%; }
.d-kt-hart { transform-origin: 50% 50%; }
.is-actief .d-kt-hart { animation: d-kt-klop 1s ease-in-out infinite; }
.is-actief .d-kt-bal { animation: d-kt-stuiter .7s cubic-bezier(.4,0,.6,1) infinite alternate; }
.is-actief .d-kt-plant { animation: d-kt-groei 1.6s ease-in-out infinite alternate; }
@keyframes d-kt-klop { 0%, 60%, 100% { transform: scale(1); } 20% { transform: scale(1.3); } 40% { transform: scale(.95); } }
@keyframes d-kt-stuiter { from { transform: translateY(0); } to { transform: translateY(-12px); } }
@keyframes d-kt-groei { from { transform: rotate(-6deg) scale(.95); } to { transform: rotate(6deg) scale(1.06); } }
.d-kompas-kind { cursor: pointer; transform-box: view-box; transform-origin: 200px 200px; transform: scale(0); transition: transform .6s cubic-bezier(.3,1.6,.5,1) .3s; }
.d-kompas.in .d-kompas-kind { transform: none; }
.d-kk-armen { transform-box: view-box; transform-origin: 50px 80px; }
.d-kompas.is-juich .d-kk-armen { animation: d-kk-juich .8s ease-in-out 2; }
.d-kompas.is-juich .d-kompas-kind { animation: d-kk-hup .8s cubic-bezier(.3,1.6,.5,1); }
@keyframes d-kk-juich { 50% { transform: translateY(-6px) scaleY(1.08); } }
@keyframes d-kk-hup { 30% { transform: translateY(-10px) scale(1.06); } }
.d-kompas-naald-svg { transition: transform 1s cubic-bezier(.35,1.5,.5,1); }
/* onderwerpen als papieren labeltjes */
.d-kompas-chips { gap: 10px; margin-top: 18px; }
.d-kompas-chips span { border: 0; background: var(--kc); color: #fff; border-radius: 10px; padding: 8px 16px; box-shadow: 2px 3px 0 rgba(46,49,56,.12); }
.d-kompas-chips span:nth-child(1) { --r: -3deg; } .d-kompas-chips span:nth-child(2) { --r: 2deg; } .d-kompas-chips span:nth-child(3) { --r: -1.5deg; }
@keyframes d-chip-in { from { opacity: 0; transform: translateY(10px) rotate(0) scale(.8); } to { opacity: 1; transform: rotate(var(--r, 0deg)); } }
.d-pillar { transition: background .35s, transform .35s cubic-bezier(.3,1.5,.5,1); }
.d-pillar.hl { background: var(--kv, #F5F3EE); transform: translateX(6px) rotate(-.6deg); box-shadow: inset 4px 0 0 var(--kc, transparent); }
@media (prefers-reduced-motion: reduce) {
.d-roos, .d-kompas-kind, .d-kompas-richting .binnen { transform: none !important; opacity: 1 !important; transition: none !important; }
.d-kt-hart, .d-kt-bal, .d-kt-plant, .d-kk-armen, .d-kompas-kind { animation: none !important; }
}
/* Doortjes tas: spulletjes vliegen erin (animaties.js) */
.d-tas-lijst li { cursor: pointer; user-select: none; padding: 12px 14px 12px 62px !important; min-height: 60px; display: flex; align-items: center; border-radius: 16px !important; box-shadow: 2px 3px 0 rgba(46,49,56,.07); }
.d-tas-lijst li::before { display: none !important; }
.d-tas-ic { position: absolute; left: 10px; top: 50%; width: 42px; height: 42px; margin-top: -21px; }
.d-tas-ic svg { width: 100%; height: 100%; display: block; transition: transform .3s cubic-bezier(.3,1.6,.5,1), opacity .3s; filter: drop-shadow(1px 2px 0 rgba(46,49,56,.12)); }
.d-tas-lijst li:hover .d-tas-ic svg { transform: rotate(-8deg) scale(1.1); }
.d-tas-lijst li.is-af { background: rgba(255,255,255,.55) !important; color: var(--wp--preset--color--grijs); }
.d-tas-lijst li.is-af .d-tas-ic svg { opacity: .25; transform: scale(.8); }
.d-tas-lijst li.is-af::after { content: "in de tas ✓"; position: absolute; right: 10px; top: -9px; background: var(--wp--preset--color--groen); color: #fff; font-family: Caveat, cursive; font-weight: 700; font-size: 1rem; line-height: 1; padding: 4px 9px 5px; border-radius: 8px; transform: rotate(4deg); animation: d-stempel .4s cubic-bezier(.3,1.6,.5,1); }
@keyframes d-stempel { from { transform: rotate(-20deg) scale(2); opacity: 0; } to { transform: rotate(4deg) scale(1); opacity: 1; } }
.d-tas-vlieg { position: fixed; z-index: 9999; pointer-events: none; }
.d-tas { display: flex; align-items: center; justify-content: center; gap: 18px; margin: 26px 0 0 !important; }
.d-tas-figuur { position: relative; width: 150px; cursor: pointer; filter: drop-shadow(3px 5px 0 rgba(46,49,56,.12)); transform-origin: 50% 100%; }
.d-tas-figuur svg { display: block; width: 100%; height: auto; overflow: visible; }
.d-tas-figuur.is-hap { animation: d-tas-hap .55s cubic-bezier(.3,1.6,.5,1); }
@keyframes d-tas-hap { 30% { transform: scale(1.08, .9); } 60% { transform: scale(.96, 1.06) translateY(-6px); } }
.d-tas-blij { opacity: 0; } .is-vol .d-tas-blij { opacity: 1; } .is-vol .d-tas-ogen { opacity: 0; }
.d-tas-ogen { animation: d-knipper 4s infinite; transform-box: fill-box; transform-origin: center; }
@keyframes d-knipper { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.1); } }
.is-vol .d-tas-mond { d: path("M68 86Q80 102 92 86Z"); fill: #2E3138; }
.is-vol .d-tas-figuur { animation: d-tas-juich 1s ease-in-out 2; }
@keyframes d-tas-juich { 25% { transform: rotate(-6deg) translateY(-8px); } 75% { transform: rotate(6deg) translateY(-8px); } }
.d-tas-teller { margin: 0 !important; font-family: Caveat, cursive; font-size: 1.5rem !important; font-weight: 700; color: var(--wp--preset--color--groen-donker); max-width: 140px; line-height: 1.1; }
.d-snipper { position: absolute; left: 50%; top: 30%; width: 9px; height: 13px; background: var(--k); border-radius: 2px; pointer-events: none; animation: d-snipper 1.2s cubic-bezier(.2,.7,.4,1) forwards; }
@keyframes d-snipper { from { transform: rotate(var(--h)) translateY(0) rotate(0); opacity: 1; } to { transform: rotate(var(--h)) translateY(calc(-1 * var(--a) - 40px)) rotate(540deg); opacity: 0; } }
.d-tas ~ .d-checks-klaar { text-align: center; }
/* foto als opgeplakte polaroid */
.d-plakfoto { background: #fff; padding: 12px 12px 40px !important; border-radius: 6px; box-shadow: 0 18px 34px -22px rgba(30,43,69,.45); transform: rotate(-2deg); position: relative; transition: transform .4s cubic-bezier(.3,1.5,.5,1); }
.d-plakfoto:hover { transform: rotate(0) scale(1.01); }
.d-plakfoto img { border-radius: 3px !important; }
.d-plakfoto::before { content: ""; position: absolute; top: -12px; left: 50%; width: 110px; height: 26px; margin-left: -55px; background: rgba(246,196,69,.55); transform: rotate(3deg); z-index: 1; }
@media (max-width: 781px) {
.d-tas-lijst { grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
.d-tas-lijst li { flex-direction: column; justify-content: flex-start; text-align: center; gap: 6px; padding: 12px 8px !important; font-size: 12.5px; line-height: 1.3; }
.d-tas-ic { position: static; margin: 0; width: 38px; height: 38px; flex: none; }
.d-tas-lijst li.is-af::after { right: 4px; top: -8px; font-size: .9rem; }
.d-tas-figuur { width: 120px; }
}
@media (prefers-reduced-motion: reduce) { .d-tas-figuur, .d-tas-ogen, .d-snipper, .d-tas-lijst li.is-af::after { animation: none !important; } }
/* Dag-landschap boven de tijdlijn (animaties.js) */
.d-daglandschap { --lucht: #FFE3C9; position: relative; width: calc(100% - 16px); margin: 8px auto 10px !important; aspect-ratio: 10 / 3; border-radius: 28px; overflow: hidden; background: var(--lucht); transition: background-color 1s ease; box-shadow: 0 0 0 8px #fff, 0 22px 40px -26px rgba(30,43,69,.5); }
.d-daglandschap svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.d-dl-zon, .d-dl-maan { transition: transform 1.2s cubic-bezier(.45,0,.3,1); }
.d-dl-stralen { animation: d-pp-draai 20s linear infinite; }
.d-dl-sterren { opacity: 0; transition: opacity 1s; }
.is-nacht .d-dl-sterren { opacity: 1; animation: d-twinkel 2.4s ease-in-out infinite alternate; }
@keyframes d-twinkel { to { opacity: .55; } }
.d-dl-raam { transition: fill .8s; } .is-nacht .d-dl-raam { fill: #FFD66B; }
.d-dl-wolk { animation: d-dl-drijf 14s ease-in-out infinite alternate; } .d-dl-wolk.is-traag { animation-duration: 20s; }
@keyframes d-dl-drijf { from { translate: -30px 0; } to { translate: 40px 0; } }
.is-nacht .d-dl-wolk { opacity: .25; }
.d-dl-rook { opacity: 0; transition: opacity .6s; } .is-ochtend .d-dl-rook { opacity: .85; }
.d-dl-rook circle { animation: d-dl-rook 3s ease-in infinite; transform-box: fill-box; transform-origin: center; }
.d-dl-rook circle:nth-child(2) { animation-delay: .6s; } .d-dl-rook circle:nth-child(3) { animation-delay: 1.2s; }
@keyframes d-dl-rook { 0% { transform: translateY(10px) scale(.6); opacity: 0; } 40% { opacity: 1; } 100% { transform: translateY(-14px) scale(1.2); opacity: 0; } }
.d-dl-prop { opacity: 0; transform: translateY(14px); transition: opacity .4s, transform .5s cubic-bezier(.3,1.6,.5,1); }
.d-dl-prop.is-zichtbaar { opacity: 1; transform: none; transition-delay: .5s; }
.is-zichtbaar .d-dl-loop-in { animation: d-dl-loop-in 1.6s ease-out .4s both; }
@keyframes d-dl-loop-in { from { transform: translateX(-200px); } to { transform: none; } }
.is-zichtbaar .d-dl-loop-uit { animation: d-dl-loop-uit 2.4s ease-in .8s both; }
@keyframes d-dl-loop-uit { from { transform: none; } to { transform: translateX(180px); } }
.d-dl-zwaai { transform-box: fill-box; transform-origin: 0 100%; animation: d-dl-zwaai .6s ease-in-out infinite alternate; }
@keyframes d-dl-zwaai { from { transform: rotate(-20deg); } to { transform: rotate(20deg); } }
.is-zichtbaar .d-dl-noten > * { animation: d-dl-zweef 2s ease-in-out infinite alternate; }
.is-zichtbaar .d-dl-noten > :nth-child(odd) { animation-delay: .5s; }
@keyframes d-dl-zweef { from { transform: translateY(6px); } to { transform: translateY(-10px); } }
.d-dl-bal { transform-box: fill-box; transform-origin: 50% 100%; }
.is-zichtbaar .d-dl-bal { animation: d-kt-stuiter .45s cubic-bezier(.4,0,.6,1) infinite alternate; }
.is-zichtbaar .d-dl-zzz text { animation: d-dl-zweef 1.6s ease-in-out infinite alternate; }
.is-zichtbaar .d-dl-zzz text:nth-child(2) { animation-delay: .3s; } .is-zichtbaar .d-dl-zzz text:nth-child(3) { animation-delay: .6s; }
.is-zichtbaar .d-dl-ballon { animation: d-dl-zweef 2.2s ease-in-out infinite alternate; }
.is-zichtbaar .d-dl-wolkje { animation: d-dl-plop .6s cubic-bezier(.3,1.6,.5,1) .5s both; transform-box: fill-box; transform-origin: 20% 100%; }
@keyframes d-dl-plop { from { transform: scale(0); } to { transform: scale(1); } }
/* het kaartje als briefje met plakband */
.d-tijdlijn.is-tijdlijn .d-moment.is-actief { position: relative; transform: rotate(-.6deg); animation: d-dl-plop .45s cubic-bezier(.3,1.5,.5,1); }
.d-tijdlijn.is-tijdlijn .d-moment.is-actief::before { content: ""; position: absolute; top: -11px; left: 50%; width: 96px; height: 24px; margin-left: -48px; background: rgba(246,196,69,.6); transform: rotate(-3deg); }
.d-tl-nav .d-tl-speel { background: var(--wp--preset--color--oranje); border-color: var(--wp--preset--color--oranje); color: #fff; }
.d-tl-nav .d-tl-speel.is-aan { background: #fff; color: var(--wp--preset--color--oranje); }
@media (max-width: 781px) {
.d-daglandschap { aspect-ratio: 16 / 11; border-radius: 22px; box-shadow: 0 0 0 6px #fff, 0 16px 30px -22px rgba(30,43,69,.5); }
.d-tl-nav { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
.d-daglandschap *, .d-tijdlijn.is-tijdlijn .d-moment.is-actief { animation: none !important; }
.d-dl-zon, .d-dl-maan, .d-dl-prop { transition: none !important; }
}
/* Locaties: getekend kaartje met huisjes + de gekozen locatie als polaroid (animaties.js) */
.d-loc-wereld { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: start; margin-top: 1.4rem; }
.d-loc-links { position: relative; }
.d-loc-hint { margin: 0 0 10px !important; }
.d-loc-kaart { position: relative; aspect-ratio: 4 / 3; border-radius: 26px; overflow: hidden; background: #EEF1E6; box-shadow: 0 0 0 8px #fff, 0 24px 44px -28px rgba(30,43,69,.55); transform: rotate(-1deg); }
.d-loc-kaart > svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.d-loc-pins { position: absolute; inset: 0; }
.d-loc-pin { position: absolute; transform: translate(-50%, -88%); border: 0; background: none; padding: 0; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 2px; font: 600 12.5px/1.1 var(--wp--preset--font-family--poppins, Poppins, sans-serif); color: var(--d-navy); }
.d-loc-huis { display: block; width: clamp(40px, 5vw, 58px); filter: drop-shadow(2px 4px 0 rgba(46,49,56,.18)); transform-origin: 50% 100%; transition: transform .45s cubic-bezier(.3,1.6,.5,1); }
.d-loc-huis svg { display: block; width: 100%; height: auto; }
.d-loc-kaart:not(.is-in) .d-loc-huis { transform: translateY(-40px) scale(0); }
.d-loc-kaart.is-in .d-loc-huis { transition-delay: calc(var(--i) * .12s); }
.d-loc-naam { background: #fff; padding: 4px 9px; border-radius: 9px; white-space: nowrap; box-shadow: 1px 2px 0 rgba(46,49,56,.12); transition: background .3s, color .3s; }
.d-loc-pin:hover .d-loc-huis { transform: translateY(-4px) rotate(-4deg); }
.d-loc-pin[aria-selected="true"] { z-index: 2; }
.d-loc-pin[aria-selected="true"] .d-loc-huis { transform: scale(1.3); animation: d-loc-hup .7s cubic-bezier(.3,1.6,.5,1); transition-delay: 0s; }
.d-loc-pin[aria-selected="true"] .d-loc-naam { background: var(--pk); color: #fff; }
.d-loc-pin[aria-selected="true"]::after { content: ""; position: absolute; left: 50%; bottom: 22px; width: 54px; height: 16px; margin-left: -27px; border-radius: 50%; border: 3px solid var(--pk); opacity: .6; z-index: -1; animation: d-loc-ring 1.6s ease-out infinite; }
@keyframes d-loc-hup { 0% { transform: scale(1); } 40% { transform: translateY(-14px) scale(1.25, 1.35); } 70% { transform: scale(1.4, 1.2); } 100% { transform: scale(1.3); } }
@keyframes d-loc-ring { from { transform: scale(.6); opacity: .8; } to { transform: scale(1.6); opacity: 0; } }
.d-loc-pin:focus-visible { outline: none; } .d-loc-pin:focus-visible .d-loc-naam { outline: 3px solid var(--wp--preset--color--oranje); }
/* gekozen locatie: polaroidfoto met naamkaartjes van de groepen */
.d-loc-wereld .d-loc-kiezer.is-kiezer > .d-loc.is-actief { grid-template-columns: 1fr; background: #fff; border-radius: 22px; overflow: visible; padding: 14px; box-shadow: 0 24px 44px -28px rgba(30,43,69,.55); transform: rotate(1deg); animation: d-loc-kaart-in .55s cubic-bezier(.3,1.4,.5,1); }
@keyframes d-loc-kaart-in { from { opacity: 0; transform: rotate(8deg) translateY(30px) scale(.9); } to { opacity: 1; transform: rotate(1deg); } }
.d-loc-wereld .d-loc.is-actief .d-loc-img { border-radius: 12px !important; position: relative; }
.d-loc-wereld .d-loc.is-actief .d-loc-img img { min-height: 0 !important; height: auto !important; aspect-ratio: 16 / 10 !important; border-radius: 12px; }
.d-loc-wereld .d-loc.is-actief::before { content: ""; position: absolute; top: -12px; left: 50%; width: 110px; height: 26px; margin-left: -55px; background: rgba(246,196,69,.6); transform: rotate(-3deg); z-index: 2; }
.d-loc-wereld .d-loc.is-actief .d-loc-body { padding: 18px 10px 6px !important; }
.d-loc-wereld .d-loc.is-actief h3 { font-size: 1.8rem !important; color: var(--d-navy); }
.d-loc-wereld .d-loc.is-actief .d-addr { margin-bottom: 12px !important; }
.d-loc-wereld .d-loc-groups { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 18px !important; }
.d-loc-wereld .d-loc-groups li { flex-direction: column; gap: 0; border: 0 !important; background: color-mix(in srgb, var(--pk) 14%, #fff); border-radius: 12px; padding: 8px 14px !important; transform: rotate(var(--r, -1deg)); box-shadow: 1px 2px 0 rgba(46,49,56,.08); }
.d-loc-wereld .d-loc-groups li:nth-child(2) { --r: 1.2deg; } .d-loc-wereld .d-loc-groups li:nth-child(3) { --r: -.6deg; }
.d-loc-wereld .d-loc-groups li strong { font-family: Caveat, cursive; font-size: 1.35rem; font-weight: 700; color: var(--pk); line-height: 1.1; }
.d-loc-wereld .d-link a { display: inline-flex; background: var(--d-navy); color: #fff !important; padding: 10px 18px; border-radius: 999px; text-decoration: none; }
@media (max-width: 781px) {
.d-loc-wereld { grid-template-columns: 1fr; }
.d-loc-pin { font-size: 10.5px; }
.d-loc-naam { padding: 3px 6px; }
.d-loc-wereld .d-loc.is-actief h3 { font-size: 1.5rem !important; }
}
@media (prefers-reduced-motion: reduce) { .d-loc-huis, .d-loc-pin::after, .d-loc-wereld .d-loc.is-actief { animation: none !important; transition: none !important; } .d-loc-kaart:not(.is-in) .d-loc-huis { transform: none; } }
/* Afsluiter als uitnodiging in een envelop (animaties.js) */
.d-envelop { position: relative; padding: 40px 4% 0; overflow: hidden; perspective: 1200px; max-width: 1240px; margin: 0 auto; }
.d-env-achter { position: absolute; left: 0; right: 0; top: 34%; bottom: 0; background: #E98A4E; border-radius: 22px 22px 26px 26px; }
.d-env-klep { position: absolute; left: 0; right: 0; top: 34%; height: 170px; background: #DE7B3D; clip-path: polygon(0 0, 100% 0, 50% 100%); transform-origin: 50% 0; z-index: 3; transition: transform .7s cubic-bezier(.4,0,.3,1), z-index 0s .35s; }
.d-envelop.is-open .d-env-klep { transform: rotateX(180deg); z-index: 0; }
.d-envelop > .d-closer-zon { position: relative; z-index: 1; padding-bottom: calc(clamp(28px, 5vw, 52px) + 120px) !important; transform: translateY(58%); transition: transform 1s cubic-bezier(.3,1.25,.5,1) .55s; margin: 0 !important; }
.d-envelop.is-open > .d-closer-zon { transform: none; }
.d-envelop .d-closer, .d-envelop .wp-block-column { animation: none !important; }
.d-env-voor { position: absolute; left: 0; right: 0; bottom: 0; height: 150px; z-index: 2; cursor: pointer; filter: drop-shadow(0 -4px 8px rgba(120,60,20,.15)); }
.d-env-voor > svg { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 0 0 26px 26px; }
.d-env-zegel { position: absolute; left: 50%; top: 58%; width: 54px; height: 54px; margin: -27px 0 0 -27px; transition: transform .4s cubic-bezier(.3,1.6,.5,1); }
.d-env-zegel svg { width: 100%; height: 100%; display: block; filter: drop-shadow(1px 2px 0 rgba(0,0,0,.18)); }
.d-env-voor:hover .d-env-zegel { transform: scale(1.12) rotate(-8deg); }
.d-envelop .d-closer-sticker { transform: scale(0) rotate(-30deg); transition: transform .5s cubic-bezier(.3,1.8,.5,1) 1.6s; }
.d-envelop.is-open .d-closer-sticker { transform: rotate(6deg); }
.d-env-hart { position: absolute; bottom: 120px; width: 16px; height: 16px; scale: 1.6; z-index: 4; pointer-events: none; background: var(--k); clip-path: path("M8 15C2 10 0 6 2 3C4 1 7 2 8 4C9 2 12 1 14 3C16 6 14 10 8 15Z"); animation: d-env-hart 2.4s ease-out var(--d) forwards; opacity: 0; }
@keyframes d-env-hart { 0% { opacity: 0; transform: translateY(0) scale(.6); } 15% { opacity: 1; } 100% { opacity: 0; transform: translateY(-340px) translateX(20px) rotate(25deg) scale(1.3); } }
@media (max-width: 781px) {
.d-envelop { padding: 34px 3% 0; }
.d-env-achter, .d-env-klep { top: 40%; }
.d-env-klep { height: 110px; }
.d-env-voor { height: 110px; }
.d-envelop > .d-closer-zon { padding-bottom: 130px !important; }
.d-env-zegel { width: 44px; height: 44px; margin: -22px 0 0 -22px; }
}
@media (prefers-reduced-motion: reduce) { .d-envelop > .d-closer-zon, .d-env-klep, .d-envelop .d-closer-sticker { transition: none !important; } }
/* Afsluiter als uitnodiging (envelop om .d-closer-zon, gemaakt door animaties.js). Eigen namen: .d-envelop/.d-env-* zijn ook
van de briefenvelop (comp.envelop) en diens latere regels maakten deze envelop smal met de klep over de kaart. */
.d-uitnodiging { position: relative; padding: 40px 4% 0; overflow: hidden; perspective: 1200px; max-width: 1240px; margin: 0 auto; }
.d-uitn-achter { position: absolute; left: 0; right: 0; top: 34%; bottom: 0; background: #E98A4E; border-radius: 22px 22px 26px 26px; }
.d-uitn-klep { position: absolute; left: 0; right: 0; top: 34%; height: 170px; background: #DE7B3D; clip-path: polygon(0 0, 100% 0, 50% 100%); transform-origin: 50% 0; z-index: 3; transition: transform .7s cubic-bezier(.4,0,.3,1), z-index 0s .35s; }
.d-uitnodiging.is-open .d-uitn-klep { transform: rotateX(180deg); z-index: 0; }
.d-uitnodiging > .d-closer-zon { position: relative; z-index: 1; padding-bottom: calc(clamp(28px, 5vw, 52px) + 120px) !important; transform: translateY(58%); transition: transform 1s cubic-bezier(.3,1.25,.5,1) .55s; margin: 0 !important; }
.d-uitnodiging.is-open > .d-closer-zon { transform: none; }
.d-uitnodiging .d-closer, .d-uitnodiging .wp-block-column { animation: none !important; }
.d-uitn-voor { position: absolute; left: 0; right: 0; bottom: 0; height: 150px; z-index: 2; cursor: pointer; filter: drop-shadow(0 -4px 8px rgba(120,60,20,.15)); }
.d-uitn-voor > svg { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 0 0 26px 26px; }
.d-uitn-zegel { position: absolute; left: 50%; top: 58%; width: 54px; height: 54px; margin: -27px 0 0 -27px; transition: transform .4s cubic-bezier(.3,1.6,.5,1); }
.d-uitn-zegel svg { width: 100%; height: 100%; display: block; filter: drop-shadow(1px 2px 0 rgba(0,0,0,.18)); }
.d-uitn-voor:hover .d-uitn-zegel { transform: scale(1.12) rotate(-8deg); }
.d-uitnodiging .d-closer-sticker { transform: scale(0) rotate(-30deg); transition: transform .5s cubic-bezier(.3,1.8,.5,1) 1.6s; }
.d-uitnodiging.is-open .d-closer-sticker { transform: rotate(6deg); }
.d-uitn-hart { position: absolute; bottom: 120px; width: 16px; height: 16px; scale: 1.6; z-index: 4; pointer-events: none; background: var(--k); clip-path: path("M8 15C2 10 0 6 2 3C4 1 7 2 8 4C9 2 12 1 14 3C16 6 14 10 8 15Z"); animation: d-uitn-hart 2.4s ease-out var(--d) forwards; opacity: 0; }
@keyframes d-uitn-hart { 0% { opacity: 0; transform: translateY(0) scale(.6); } 15% { opacity: 1; } 100% { opacity: 0; transform: translateY(-340px) translateX(20px) rotate(25deg) scale(1.3); } }
@media (max-width: 781px) {
.d-uitnodiging { padding: 34px 3% 0; }
.d-uitn-achter, .d-uitn-klep { top: 40%; }
.d-uitn-klep { height: 110px; }
.d-uitn-voor { height: 110px; }
.d-uitnodiging > .d-closer-zon { padding-bottom: 130px !important; }
.d-uitn-zegel { width: 44px; height: 44px; margin: -22px 0 0 -22px; }
}
@media (prefers-reduced-motion: reduce) { .d-uitnodiging > .d-closer-zon, .d-uitn-klep, .d-uitnodiging .d-closer-sticker { transition: none !important; } }
@media (min-width: 960px) and (max-height: 820px) {
.d-uitnodiging { padding-top: 26px; }
.d-uitnodiging > .d-closer-zon { padding-bottom: calc(clamp(24px, 4vw, 40px) + 96px) !important; padding-top: clamp(24px, 4vw, 40px) !important; }
.d-uitn-voor { height: 124px; }
}
/* Controle-ronde: tablet en telefoon */
/* opening: confetti-stipjes naar de randen, zodat ze niet tussen de letters vallen */
@media (max-width: 1100px) {
.d-play-hero::before { background:
radial-gradient(circle at 3% 4%, var(--wp--preset--color--oranje) 0 5px, transparent 6px),
radial-gradient(circle at 97% 3%, var(--wp--preset--color--groen) 0 6px, transparent 7px),
radial-gradient(circle at 98% 52%, var(--d-sun) 0 6px, transparent 7px),
radial-gradient(circle at 2% 96%, var(--wp--preset--color--logoblauw) 0 4px, transparent 5px) !important; }
}
/* menu: tot 1100px het uitklapmenu (anders loopt het op een iPad over twee regels) */
@media (min-width: 600px) and (max-width: 1100px) {
.d-header .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex !important; }
.d-header .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display: none !important; }
}
/* kring van specialisten: op tablet het telefoon-ontwerp, anders te smal */
.d-kring .d-expert-tekst strong { hyphens: manual; -webkit-hyphens: manual; }
@media (min-width: 782px) and (max-width: 1180px) {
.d-kring { grid-template-columns: 1fr 1fr !important; grid-template-areas: "k k" "a b" "c d" "o o"; align-items: stretch; }
.d-kring > .d-kring-lijnen { display: none; }
.d-kring-kind { width: 116px; margin-bottom: 6px; }
}
/* kompas op de telefoon: eerst de uitleg, dan het kompas */
@media (max-width: 781px) {
.d-popup-ballon > .wp-block-columns > .wp-block-column:first-child { order: 2; }
.d-popup-ballon .d-kompas { margin-top: 10px; }
}
/* Kopbalk: het wazige glas op een aparte laag. Een backdrop-filter op de kop zelf sluit het uitklapmenu op in een balk van 40px. */
.d-header { backdrop-filter: none !important; background: transparent !important; }
.d-header::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(255, 255, 255, .92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); pointer-events: none; }
/* uitklapmenu (telefoon en tablet): rustig en goed leesbaar */
.d-header .wp-block-navigation__responsive-container.is-menu-open { padding: 22px 24px 40px !important; background: #FBF8F2 !important; }
.d-header .is-menu-open .wp-block-navigation__responsive-container-content { align-items: flex-start !important; padding-top: 36px !important; }
.d-header .is-menu-open .wp-block-navigation__container { align-items: flex-start !important; gap: 18px !important; }
.d-header .is-menu-open .wp-block-navigation-item { align-items: flex-start !important; }
.d-header .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content { font-family: var(--wp--preset--font-family--schreef); font-size: 1.6rem; color: var(--d-navy); }
.d-header .is-menu-open .wp-block-navigation__submenu-container { border: 0 !important; background: transparent !important; padding: 4px 0 0 14px !important; box-shadow: none !important; }
.d-header .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content { font-size: 15px; padding: 6px 0 !important; color: #4a4d55; }
.d-header .is-menu-open .wp-block-navigation-item__content::after { display: none; }
/* label boven de titel staat ín de H1 (zoekwoord), maar ziet eruit als het ticketje */
.d-h1-label .d-ticket-label { display: table; margin: 0 0 18px; font-family: var(--wp--preset--font-family--zonder-schreef, Poppins, sans-serif); font-size: 12.5px !important; font-weight: 600; line-height: 1.4; letter-spacing: .06em; color: var(--wp--preset--color--blauw-donker); }
/* zonder script (of als het script faalt) blijft de kring gewoon zichtbaar */
.d-kring:not(.d-kring-anim) > .d-expert-item, .d-kring:not(.d-kring-anim) .d-kring-kind { opacity: 1 !important; transform: none !important; }
/* Past op één laptopscherm: hoogtes meten mee met de schermhoogte */
.d-daglandschap .d-tl-speel { position: absolute; right: 14px; top: 14px; z-index: 2; border: 0; border-radius: 999px; padding: 9px 16px; font: 600 14px/1 var(--wp--preset--font-family--zonder-schreef, Poppins, sans-serif); background: var(--wp--preset--color--oranje); color: #fff; cursor: pointer; box-shadow: 0 6px 16px -8px rgba(30,43,69,.5); }
.d-daglandschap .d-tl-speel.is-aan { background: #fff; color: var(--wp--preset--color--oranje); }
.d-daglandschap .d-tl-speel:focus-visible { outline: 3px solid var(--d-navy); outline-offset: 2px; }
@media (min-width: 960px) {
/* tas */
.d-plakfoto img { height: clamp(200px, 30vh, 340px) !important; aspect-ratio: auto !important; object-fit: cover; }
.d-tas-lijst li { min-height: 50px; padding-top: 8px !important; padding-bottom: 8px !important; }
.d-tas { margin-top: 14px !important; }
.d-tas-figuur { width: 118px; }
/* dag: lager landschap, Eerder/Later naast het kaartje */
.d-daglandschap { aspect-ratio: auto !important; height: clamp(180px, 27vh, 320px); }
.d-tijdlijn.is-tijdlijn { position: relative; }
.d-tijdlijn.is-tijdlijn > .d-tl-nav { position: absolute; left: 0; right: 0; bottom: 46px; margin: 0 auto !important; max-width: 900px; justify-content: space-between; pointer-events: none; }
.d-tijdlijn.is-tijdlijn > .d-tl-nav button { pointer-events: auto; }
.d-tl-spoor { padding-top: 8px !important; margin-bottom: 10px !important; }
/* locaties: kaartje en polaroid binnen de schermhoogte */
.d-loc-kaart { width: min(100%, calc(52vh * 4 / 3)); }
.d-loc-wereld .d-loc.is-actief .d-loc-img img { aspect-ratio: auto !important; height: clamp(170px, 25vh, 300px) !important; object-fit: cover; }
.d-loc-wereld .d-loc.is-actief .d-loc-body { padding: 12px 8px 2px !important; }
.d-loc-wereld .d-loc.is-actief h3 { font-size: 1.55rem !important; }
.d-loc-wereld .d-loc.is-actief .d-addr { margin-bottom: 8px !important; }
.d-loc-wereld .d-loc-groups { margin: 2px 0 12px !important; }
.d-loc-wereld .d-loc-groups li { padding: 6px 12px !important; }
.d-loc-wereld { margin-top: .8rem; }
}
@media (max-width: 781px) { .d-daglandschap .d-tl-speel { top: 10px; right: 10px; padding: 7px 12px; font-size: 12.5px; } }
@media (min-width: 960px) {
.d-loc-kaart { width: min(100%, calc(48vh * 4 / 3)); }
.d-loc-wereld .d-loc.is-actief .d-loc-img img { height: clamp(160px, 22vh, 280px) !important; }
}
/* lage laptopschermen (tot ca. 820px hoog): nog iets compacter */
@media (min-width: 960px) and (max-height: 820px) {
.d-plakfoto img { height: clamp(180px, 26vh, 300px) !important; }
.d-daglandschap { height: clamp(170px, 24vh, 280px); }
.d-faq { margin-bottom: 7px !important; }
.d-faq summary { padding-top: 11px !important; padding-bottom: 11px !important; }
.d-envelop { padding-top: 26px; }
.d-envelop > .d-closer-zon { padding-bottom: calc(clamp(24px, 4vw, 40px) + 96px) !important; padding-top: clamp(24px, 4vw, 40px) !important; }
.d-env-voor { height: 124px; }
.d-play-hero .wp-block-column:last-child img { max-height: 62vh; }
}
@media (min-width: 960px) and (max-height: 740px) {
.d-tas-lijst li { min-height: 46px; }
.d-loc-kaart { width: min(100%, calc(44vh * 4 / 3)); }
.d-loc-wereld .d-loc.is-actief .d-loc-img img { height: clamp(140px, 18vh, 240px) !important; }
.d-loc-wereld .d-loc.is-actief h3 { font-size: 1.4rem !important; }
}
@media (min-width: 960px) and (max-height: 740px) {
.d-loc-wereld .d-loc-kiezer.is-kiezer > .d-loc.is-actief { padding: 10px; }
.d-loc-wereld .d-loc-groups { margin-bottom: 8px !important; }
.d-loc-wereld { margin-top: .4rem; }
}
@media (min-width: 960px) and (max-height: 820px) {
.d-loc-kaart { width: min(100%, calc(44vh * 4 / 3)); }
.d-loc-wereld .d-loc.is-actief .d-loc-img img { height: clamp(140px, 19vh, 240px) !important; }
.d-loc-wereld .d-loc-kiezer.is-kiezer > .d-loc.is-actief { padding: 10px; }
.d-loc-wereld .d-loc-groups { margin-bottom: 8px !important; }
.d-loc-wereld { margin-top: .4rem; }
}
/* Dag op laptop en groter: twee kolommen (kop + kaartje links, landschap + tijden rechts), zodat het blok ruim in één scherm past */
@media (min-width: 960px) {
.d-popup-zon:has(.d-tijdlijn.is-tijdlijn) { display: grid !important; grid-template-columns: minmax(0, .9fr) minmax(0, 1.45fr); grid-template-areas: "kop land" "kaart land" "kaart spoor" "nav spoor"; grid-template-rows: auto auto 1fr auto; column-gap: clamp(32px, 4vw, 64px); row-gap: 14px; align-items: start; padding-inline: max(20px, calc((100% - 1240px) / 2)) !important; }
.d-popup-zon:has(.d-tijdlijn.is-tijdlijn) > * { max-width: none !important; margin: 0 !important; }
.d-popup-zon .d-tijdlijn.is-tijdlijn { display: contents !important; }
.d-popup-zon .d-tijdlijn-kop { grid-area: kop; text-align: left; max-width: none; margin: 0 !important; }
.d-popup-zon .d-tijdlijn-kop > * { margin-left: 0 !important; margin-right: 0 !important; }
.d-popup-zon .d-daglandschap { grid-area: land; width: 100%; margin: 8px 0 0 !important; height: clamp(220px, 34vh, 340px); }
.d-popup-zon .d-tl-spoor { grid-area: spoor; margin: 0 !important; }
.d-popup-zon .d-tijdlijn.is-tijdlijn .d-moment { grid-area: kaart; }
.d-popup-zon .d-tijdlijn.is-tijdlijn .d-moment.is-actief { max-width: none; margin: 6px 0 0 !important; padding: 20px 22px !important; }
.d-popup-zon .d-tijdlijn.is-tijdlijn > .d-tl-nav { grid-area: nav; position: static; max-width: none; margin: 0 !important; justify-content: flex-start; gap: 10px; pointer-events: auto; }
}
/* het zinnetje 'Alles geregeld' neemt pas ruimte in als het verschijnt */
.d-tas ~ .d-checks-klaar:not(.is-zichtbaar) { height: 0; margin: 0 !important; overflow: hidden; }
/* Locaties op laptop en groter: links kop + tekst + liggend locatiekaartje, rechts het grote kaartje met huisjes */
@media (min-width: 960px) {
.d-popup-huisjes:has(.d-loc-wereld) { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); grid-template-areas: "kop kaart" "loc kaart"; grid-template-rows: auto 1fr; column-gap: clamp(32px, 4vw, 64px); row-gap: 18px; align-items: start; padding-inline: max(20px, calc((100% - 1240px) / 2)) !important; }
.d-popup-huisjes:has(.d-loc-wereld) > * { max-width: none !important; margin: 0 !important; }
.d-popup-huisjes .d-loc-wereld { display: contents !important; }
.d-popup-huisjes .d-split { grid-area: kop; display: block !important; margin: 0 !important; }
.d-popup-huisjes .d-split > .wp-block-column { width: 100% !important; flex-basis: 100% !important; margin: 0 !important; }
.d-popup-huisjes .d-split > .wp-block-column + .wp-block-column { margin-top: 10px !important; }
.d-popup-huisjes .d-split h2 { font-size: clamp(1.8rem, 2.5vw, 2.4rem) !important; line-height: 1.15; }
.d-popup-huisjes .d-loc-links { grid-area: kaart; align-self: center; }
.d-popup-huisjes .d-loc-kaart { width: min(100%, calc(62vh * 4 / 3)) !important; margin-left: auto; }
.d-popup-huisjes .d-loc-hint { text-align: right; }
.d-popup-huisjes .d-loc-kiezer { grid-area: loc; }
/* liggend polaroidkaartje: foto links, gegevens rechts */
.d-popup-huisjes .d-loc-kiezer.is-kiezer > .d-loc.is-actief { grid-template-columns: 44% 1fr !important; align-items: center; column-gap: 18px; padding: 12px !important; transform: rotate(-.8deg); }
.d-popup-huisjes .d-loc.is-actief .d-loc-img img { height: clamp(190px, 27vh, 260px) !important; }
.d-popup-huisjes .d-loc.is-actief .d-loc-body { padding: 6px 6px 6px 0 !important; }
.d-popup-huisjes .d-loc.is-actief h3 { font-size: 1.5rem !important; }
.d-popup-huisjes .d-loc-groups { margin: 4px 0 12px !important; }
.d-popup-huisjes .d-loc-groups li { padding: 5px 10px !important; }
.d-popup-huisjes .d-loc-groups li strong { font-size: 1.15rem; }
}
@media (min-width: 960px) {
.d-popup-huisjes .d-loc-kiezer.is-kiezer > .d-loc.is-actief { grid-template-columns: 40% 1fr !important; grid-auto-rows: auto; row-gap: 2px; align-items: start; }
.d-popup-huisjes .d-loc.is-actief .d-loc-body { display: contents !important; }
.d-popup-huisjes .d-loc.is-actief .d-loc-img { grid-column: 1; grid-row: 1 / span 4; align-self: stretch; }
.d-popup-huisjes .d-loc.is-actief .d-loc-img img { height: 100% !important; min-height: 150px; max-height: 210px; }
.d-popup-huisjes .d-loc.is-actief .d-loc-body > * { grid-column: 2; margin: 0 !important; }
.d-popup-huisjes .d-loc.is-actief .d-loc-body > .d-eyebrow { grid-row: 1; margin-top: 6px !important; }
.d-popup-huisjes .d-loc.is-actief .d-loc-body > h3 { grid-row: 2; }
.d-popup-huisjes .d-loc.is-actief .d-loc-body > .d-addr { grid-row: 3; }
.d-popup-huisjes .d-loc.is-actief .d-loc-body > .d-link { grid-row: 4; align-self: end; margin-bottom: 4px !important; }
.d-popup-huisjes .d-loc.is-actief .d-loc-body > .d-loc-groups { grid-column: 1 / -1; grid-row: 5; margin: 12px 0 2px !important; }
.d-popup-huisjes .d-loc-groups li { flex-direction: row !important; align-items: baseline; gap: 6px !important; }
}
@media (min-width: 960px) {
.d-kompas { max-width: min(470px, 56vh); }
}
@media (min-width: 960px) and (max-height: 760px) {
body.home .d-section { padding-top: 3rem !important; }
.d-faq summary { padding-top: 9px !important; padding-bottom: 9px !important; }
.d-faq { margin-bottom: 6px !important; }
.d-tas { margin-top: 8px !important; }
.d-tas-figuur { width: 104px; }
}
@media (min-width: 960px) {
.d-popup-ballon .d-pillars { margin-block: 1rem 1.1rem !important; }
.d-popup-ballon .d-pillar { padding: 8px 10px !important; }
.d-popup-ballon .d-tik-hint { margin-top: .6rem !important; }
}
@media (min-width: 960px) and (max-height: 760px) {
.d-popup-ballon h2 { font-size: clamp(1.9rem, 3vw, 2.5rem) !important; }
.d-popup-ballon .d-pillars { margin-block: .7rem .8rem !important; }
}
/* Polaroidstapel (subpagina's): elk onderschrift blijft zichtbaar; de onderste foto ligt achter de bovenste twee */
.d-polaroids { height: auto; aspect-ratio: 1 / 1.08; max-width: 560px; margin-inline: auto !important; }
.d-polaroid { width: 50%; }
.d-polaroids .d-tilt-l { left: 1%; top: 9%; transform: rotate(-6deg); z-index: 2; }
.d-polaroids .d-tilt-r { right: 1%; left: auto; top: 0; transform: rotate(5deg); z-index: 3; }
.d-polaroids .d-tilt-l2 { left: 26%; top: auto; bottom: 0; transform: rotate(-2deg); z-index: 1; }
.d-polaroids .d-polaroid:hover { transform: rotate(0) scale(1.05); z-index: 5; }
@media (max-width: 781px) { .d-polaroids { height: auto; aspect-ratio: 1 / 1.22; } .d-polaroid { width: 52%; } .d-polaroid-cap { font-size: 1.25rem !important; } }
@supports (animation-timeline: view()) { @media (prefers-reduced-motion: no-preference) {
.d-polaroid { animation-range: entry 0% entry 90% !important; }
} }
/* Visie: het ballonnetje boven een blok helemaal laten zien (met mandje), niet half achter de rand; rechts uit de buurt van de 'Op koers'-stempel */
body .d-peek-kompas::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 150'%3E %3Cpath d='M50 6 C 80 6 94 30 94 52 C 94 78 70 96 58 104 L 42 104 C 30 96 6 78 6 52 C 6 30 20 6 50 6 Z' fill='%23F07A2B' stroke='%231E2B45' stroke-width='3'/%3E %3Cpath d='M50 6 C 32 22 28 70 42 104 L 58 104 C 72 70 68 22 50 6 Z' fill='%23FFC94D' stroke='%231E2B45' stroke-width='2.5' stroke-linejoin='round'/%3E %3Cpath d='M42 104 L 39 121 M58 104 L 61 121' stroke='%231E2B45' stroke-width='2.5' stroke-linecap='round'/%3E %3Crect x='34' y='120' width='32' height='24' rx='5' fill='%23B07A50' stroke='%231E2B45' stroke-width='2.5'/%3E %3Cpath d='M34 130 H 66 M45 120 V 144 M55 120 V 144' stroke='%231E2B45' stroke-width='1.5' opacity='.5'/%3E %3Ccircle cx='41' cy='52' r='4' fill='%231E2B45'/%3E%3Ccircle cx='59' cy='52' r='4' fill='%231E2B45'/%3E %3Ccircle cx='42.3' cy='50.7' r='1.4' fill='%23fff'/%3E%3Ccircle cx='60.3' cy='50.7' r='1.4' fill='%23fff'/%3E %3Cpath d='M44 62 Q 50 68 56 62' stroke='%231E2B45' stroke-width='2.5' fill='none' stroke-linecap='round'/%3E %3Ccircle cx='33' cy='62' r='5' fill='%23F49AB4' opacity='.7'/%3E%3Ccircle cx='67' cy='62' r='5' fill='%23F49AB4' opacity='.7'/%3E %3C/svg%3E"); width: 44px; height: 66px; top: -10px; }
body .d-peek-right.d-peek-kompas::before { left: auto; right: 44%; }
/* Telefoon: omdraaikaartjes niet hoger dan nodig, banner links uitgelijnd, handgeschreven notitie los van de route */
@media (max-width: 540px) {
.d-flip, .d-flip-inner { min-height: 184px; }
.d-flip-front, .d-flip-back { padding: 22px !important; }
.d-flip-front { flex-direction: row; flex-wrap: wrap; align-items: center; column-gap: 14px; }
.d-flip-front .d-icon { margin: 0 !important; }
.d-flip-front h3 { flex: 1 1 60%; }
.d-flip-hint { flex-basis: 100%; }
.d-banner { align-items: flex-start; gap: 14px; padding: 18px !important; }
.d-banner p { text-align: left !important; }
.d-banner .d-icon { width: 32px; height: 32px; }
.d-hand-note { font-size: 1.5rem !important; margin: .4rem 0 1.4rem !important; }
body .d-peek-kompas::before { top: -30px; }
}
/* Verhaalfoto (tekst + foto in vorm) past samen met de kop op één laptopscherm; klokjeslijst: labels breken niet af */
@media (min-width: 782px) {
.d-story-img img { max-height: max(340px, calc(100vh - 250px)); }
.admin-bar .d-story-img img { max-height: max(340px, calc(100vh - 282px)); }
}
.d-clocklist li { grid-template-columns: 96px 1fr; }
@media (max-width: 540px) { .d-clocklist li { grid-template-columns: 84px 1fr; gap: 10px; padding: 9px 10px; } }
/* Tijdlijn (d-track): zoveel kolommen als er momenten zijn (geen leeg spoor rechts); op de telefoon van boven naar beneden */
.d-track { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(130px, 1fr); min-width: 0; }
.d-track:has(> li:nth-child(6)) { min-width: 860px; }
@media (max-width: 640px) {
.d-track-wrap { overflow: visible; padding: 8px 0 0 !important; }
.d-track, .d-track:has(> li:nth-child(6)) { grid-auto-flow: row; grid-auto-columns: auto; min-width: 0; gap: 4px; }
.d-track::before { left: 7px; right: auto; top: 6px; bottom: 6px; width: 6px; height: auto; background: repeating-linear-gradient(180deg, var(--d-navy) 0 14px, transparent 14px 22px); }
.d-track::after { display: none; }
.d-track li { padding: 0 0 16px 40px; }
.d-track li::before { top: 4px; }
}
/* Een kijkdiertje (d-peek) steekt boven het volgende blok uit: het blok ervoor krijgt onderin ruimte, zodat het niets afdekt */
.d-section:has(+ .d-peek) { padding-bottom: calc(var(--wp--preset--spacing--60) + 48px) !important; }
/* Vacature-/krijtbord: woorden blijven heel; op de telefoon label boven de waarde en mag de regel afbreken */
.d-board-row .d-woord { display: inline-block; white-space: nowrap; }
@media (max-width: 600px) {
.d-board-row { white-space: normal !important; }
.d-board-row strong { display: block; width: auto; margin-bottom: 2px; }
.d-board-chalk .d-board-row { font-size: 1.25rem !important; }
}
/* Rugzak met eisen: op laptop/iPad liggend breder met twee kolommen, zodat het blok op één scherm past */
@media (min-width: 960px) {
.d-pack { max-width: 600px; }
.d-pack-list { grid-template-columns: 1fr 1fr; column-gap: 16px; row-gap: 2px; }
.d-pack-list li { font-size: 14px; }
}
.d-board-chalk .d-ch { min-width: 0; padding: 0; margin: 0; }
.d-board-row { word-spacing: .35em; }
/* Stempel: tekst van twee of drie woorden blijft binnen de cirkel */
.d-stamp { font-size: 1.55rem !important; line-height: .92; text-align: center; padding: 8px !important; overflow-wrap: normal; }
@media (max-width: 600px) { .d-stamp { font-size: 1.2rem !important; padding: 6px !important; } }
/* Klokjeslijst: tijden op één regel, tekstkolom voor alle regels gelijk (subgrid) */
.d-clocklist { grid-template-columns: max-content 1fr; column-gap: 14px; }
.d-clocklist li { grid-column: 1 / -1; grid-template-columns: subgrid; }
.d-clocklist li strong { white-space: nowrap; }
@media (min-width: 960px) { .d-clocklist li { padding-block: 7px; } }
@media (max-width: 540px) { .d-clocklist li strong { font-size: 1.05rem; } }
/* Kruimelpad boven de bewegende scène in de kop */
.d-crumbs { position: relative; z-index: 6; }
/* Dagritme: grote wolk niet over het kruimelpad, maar linksonder in de kop */
body .d-zonnedag-wolk-1 { top: auto; bottom: 6%; left: 30%; }
/* Telefoon: kleinere klok, tijd boven de uitleg */
@media (max-width: 540px) {
.d-clock { width: min(240px, 64vw); }
.d-clocklist { grid-template-columns: 1fr; }
.d-clocklist li { display: block; }
.d-clocklist li strong { display: block; margin-bottom: 2px; }
}
/* Saalamander: liaan links hangt aan de rand, niet over kruimelpad en kop; op de telefoon geen lianen over de tekst */
body .d-scene-salamander .d-vine-1 { left: -54px !important; }
@media (max-width: 600px) { body .d-scene-salamander .d-vine { display: none; } }
/* Kopdecoraties links niet over kruimelpad en titel (Veelgestelde vragen, Beleidsdocumenten) */
@media (min-width: 782px) {
body .d-vraag-b1 { left: 39%; }
body .d-koffer-l2 { left: 40%; }
}
@media (max-width: 781px) { body .d-vraag-b1 { display: none; } }
/* Juridische tekst (privacy, disclaimer, voorwaarden): rustige leeskolom met ruimte tussen alinea's en echte opsommingen */
.d-prose p { margin-block: 0 .9rem !important; line-height: 1.7; font-size: 16px; }
.d-prose p strong:first-child:only-child, .d-prose p > strong:first-child { color: var(--wp--preset--color--tekst); }
.d-prose .d-prose-list { margin-block: -.3rem 1.1rem !important; padding-left: 1.3rem !important; box-sizing: border-box; line-height: 1.6; font-size: 16px; }
.d-prose .d-prose-list li { margin: .25rem 0; padding-left: .2rem; }
.d-prose .d-prose-list li::marker { color: var(--wp--preset--color--oranje); }
/* Subpagina's: kopfoto niet groter dan nodig (de tekst is de hoofdzaak); nooit hoger dan het scherm */
@media (min-width: 782px) {
body:not(.home) .d-play-hero .d-hero-img { max-width: 380px; margin-inline: auto !important; }
body:not(.home) .d-play-hero .d-hero-img img { max-height: min(370px, calc(100vh - 300px)); object-fit: cover; }
}
@media (min-width: 782px) {
/* versieringen in de kop krimpen mee met de kleinere foto (rond het midden van de foto) */
body:not(.home) .d-play-hero .d-scene { transform: scale(.78); transform-origin: 74% 56%; }
}
@media (min-width: 782px) {
body:not(.home) .d-play-hero .d-scene-salamander .d-vine-1,
body:not(.home) .d-play-hero .d-vacature-vlieg { display: none; }
}
/* Stippelroute: lijn door de bolletjes (getekend door animaties.js), minder lege ruimte boven de kaartjes */
.d-route-map.is-getekend { height: 64px; margin: .6rem 0 10px !important; overflow: visible; }
.d-route-map.is-getekend::before { content: none; }
.d-route-lijn { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.d-route-lijn path { fill: none; stroke: var(--wp--preset--color--groen-donker, #3F6B2E); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 1 13; }
.d-route-map.is-getekend .d-cart { z-index: 2; }
@supports (animation-timeline: view()) { @media (prefers-reduced-motion: no-preference) {
.d-route-lijn { animation: d-routeDraw linear both; animation-timeline: --route; animation-range: entry 10% cover 50%; }
} }
.d-route-section { overflow: clip; } /* "hidden" maakte er een scrollvak van: dan reed het karretje niet mee */
@media (min-width: 1000px) { .d-track-wrap { overflow: visible; } } /* geen scrollvak nodig: dan lopen de scroll-animaties van de tijdlijn wel mee */
/* Tempo van lijn en karretje gekoppeld aan het hele blok: klaar zodra het blok helemaal in beeld is */
@supports (animation-timeline: view()) { @media (prefers-reduced-motion: no-preference) {
.d-route-section { view-timeline: --routeblok block; }
.d-route-map.is-getekend .d-cart { animation-timeline: --routeblok !important; animation-range: entry 15% entry 100% !important; }
.d-route-map.is-getekend .d-route-lijn { animation-timeline: --routeblok; animation-range: entry 0% entry 75%; }
} }
/* Tempo gekoppeld aan de kaartjes zelf (werkt bij elke schermhoogte): vertrek als de kaartjes onderin verschijnen, aankomst als ze in het midden staan */
@supports (animation-timeline: view()) { @media (prefers-reduced-motion: no-preference) {
.d-route-section { timeline-scope: --haltes; }
.d-route-section .d-stops { view-timeline: --haltes block; }
.d-route-map.is-getekend .d-cart { animation-timeline: --haltes !important; animation-range: entry 60% cover 50% !important; }
.d-route-map.is-getekend .d-route-lijn { animation-timeline: --haltes; animation-range: entry 0% cover 40%; }
} }
.d-route-map.is-getekend .d-cart { offset-anchor: 50% 96%; width: 80px; height: 55px; } /* wielen op de lijn: rijdt boven de kaartjes, niet over de tekst */
.d-route-map.is-getekend .d-cart { offset-rotate: 0deg; } /* rechtop blijven: schuin bij de bolletjes kwam hij alsnog over de titels */
.d-sticker::before { left: 26px; top: 30px; } /* wit vakje precies achter het icoon (zelfde plek als de binnenruimte van de sticker) */
.d-sticker > .d-sticker-icon { margin-bottom: 20px !important; } /* lucht tussen wit vakje (met schaduw) en titel */
/* Fotorij (d-windows): begint gelijk met de titel, vervaagt rechts, onderschrift als label in het raam, pijltjes, minder lege ruimte */
.d-windows { padding-inline: max(4px, calc((100% - 1320px) / 2)) 60px !important; scroll-padding-inline: max(4px, calc((100% - 1320px) / 2)); -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 70px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 70px), transparent); }
.d-windows.is-eind { -webkit-mask-image: none; mask-image: none; }
.d-window { position: relative; }
.d-window figcaption { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%) rotate(-2deg); margin: 0 !important; background: #fff; color: var(--wp--preset--color--blauw-donker, #3B5383); font-family: var(--wp--preset--font-family--hand); font-size: 1.15rem; line-height: 1.2; padding: 4px 14px; border-radius: 999px; white-space: nowrap; box-shadow: 0 6px 14px -8px rgba(30,43,69,.45); }
.d-frame-round figcaption { bottom: 9%; }
.d-windows-section { padding-bottom: calc(var(--wp--preset--spacing--60) * .55) !important; }
.d-windows-voet { display: flex; align-items: center; justify-content: space-between; gap: 16px; max-width: 1320px; margin: 4px auto 0 !important; }
.d-windows-voet .d-hand-hint { margin: 0 !important; }
.d-windows-knoppen { display: flex; gap: 10px; }
.d-windows-knoppen button { width: 46px; height: 46px; border-radius: 50%; border: 2px solid var(--wp--preset--color--blauw-donker, #3B5383); background: #fff; color: var(--wp--preset--color--blauw-donker, #3B5383); font-size: 22px; line-height: 1; cursor: pointer; display: grid; place-items: center; transition: transform .2s, background .2s, opacity .2s; }
.d-windows-knoppen button:hover:not(:disabled) { transform: translateY(-2px); background: var(--wp--preset--color--vlak-blauw, #EEF2FA); }
.d-windows-knoppen button:disabled { opacity: .35; cursor: default; }
@media (max-width: 781px) { .d-windows-knoppen { display: none; } .d-windows { -webkit-mask-image: none; mask-image: none; } }
@media (max-width: 781px) { .d-window { flex-basis: 68vw; } .d-frame-round { flex-basis: 62vw; } .d-window figcaption { font-size: 1rem; } } /* volgende foto piept al in beeld: je ziet dat je kunt vegen */
/* ------------------------------------------------------------------ Voordeur-afsluiter (Locaties) */
.d-deur-section { background: #fff; }
.d-deur-wrap { gap: clamp(28px, 5vw, 80px) !important; align-items: center !important; max-width: 1100px; margin-inline: auto !important; }
.d-deur { position: relative; width: min(330px, 86%); aspect-ratio: 3 / 4; margin: 0 auto !important; cursor: pointer; }
.d-deur::after { content: ""; position: absolute; left: -6%; right: -6%; bottom: 6.5%; height: 4px; border-radius: 4px; background: var(--d-navy, #1E2B45); opacity: .85; }
.d-deur-kozijn { position: absolute; left: 16%; right: 16%; top: 6%; bottom: 9%; border: 10px solid #fff; outline: 3px solid var(--d-navy, #1E2B45); border-radius: 130px 130px 8px 8px; overflow: hidden; perspective: 900px; background: #FFE3A3; box-shadow: 0 22px 40px -26px rgba(30,43,69,.55); }
.d-deur-binnen { position: absolute; inset: 0; background: center / cover no-repeat; }
.d-deur-binnen::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 30% 40%, rgba(255,225,150,.55), rgba(255,200,110,.25) 60%, rgba(255,190,90,.1)); }
.d-deur-blad { position: absolute; inset: 0; border-radius: 120px 120px 0 0; background:
linear-gradient(transparent 62%, rgba(30,43,69,.08) 62% 63%, transparent 63%),
var(--wp--preset--color--logoblauw, #8EAAD5);
transform-origin: 0 50%; transform: rotateY(0deg); transition: transform 1.3s cubic-bezier(.3,1.15,.4,1); box-shadow: inset -4px 0 0 rgba(30,43,69,.18); }
.d-deur.is-open .d-deur-blad { transform: rotateY(-64deg); }
.d-deur-raam { position: absolute; left: 20%; right: 20%; top: 8%; height: 22%; border-radius: 999px 999px 8px 8px; border: 3px solid var(--d-navy, #1E2B45); background:
linear-gradient(90deg, transparent calc(50% - 1.5px), var(--d-navy, #1E2B45) calc(50% - 1.5px) calc(50% + 1.5px), transparent calc(50% + 1.5px)),
linear-gradient(transparent calc(55% - 1.5px), var(--d-navy, #1E2B45) calc(55% - 1.5px) calc(55% + 1.5px), transparent calc(55% + 1.5px)),
#FFF2CC; }
.d-deur-bordje { position: absolute; left: 50%; top: 37%; transform: translateX(-50%) rotate(-3deg); background: #fff; border: 3px solid var(--d-navy, #1E2B45); border-radius: 10px; padding: 2px 12px; font-family: var(--wp--preset--font-family--hand); font-size: 1.25rem; line-height: 1.3; color: var(--wp--preset--color--blauw-donker, #3B5383); white-space: nowrap; }
.d-deur-klopper { position: absolute; left: 50%; top: 52%; width: 26px; height: 26px; margin-left: -13px; border-radius: 50%; border: 5px solid #F0A030; box-shadow: 0 0 0 2px var(--d-navy, #1E2B45); }
.d-deur-klink { position: absolute; right: 9%; top: 58%; width: 16px; height: 16px; border-radius: 50%; background: #F0A030; box-shadow: 0 0 0 2px var(--d-navy, #1E2B45); }
.d-deur-brievenbus { position: absolute; left: 30%; right: 30%; top: 72%; height: 12px; border-radius: 6px; background: #F0A030; box-shadow: 0 0 0 2px var(--d-navy, #1E2B45); }
.d-deur-lamp { position: absolute; left: 3%; top: 26%; width: 22px; height: 30px; border-radius: 6px 6px 10px 10px; background: #FFC94D; box-shadow: 0 0 0 3px var(--d-navy, #1E2B45), 0 0 26px 10px rgba(255,201,77,.45); }
.d-deur-plant { position: absolute; right: 0; bottom: 7%; width: 18%; aspect-ratio: 3 / 4; background: center bottom / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 80'%3E%3Cpath d='M30 46 C 14 40 6 26 10 10 C 22 18 28 30 30 46 Z' fill='%23729A47' stroke='%231E2B45' stroke-width='2.5'/%3E%3Cpath d='M30 46 C 46 40 54 24 50 8 C 38 16 32 30 30 46 Z' fill='%2390B85E' stroke='%231E2B45' stroke-width='2.5'/%3E%3Cpath d='M30 48 C 28 34 30 20 34 4' stroke='%231E2B45' stroke-width='2.5' fill='none'/%3E%3Cpath d='M14 50 H 46 L 42 78 H 18 Z' fill='%23EC8B48' stroke='%231E2B45' stroke-width='2.5' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.d-deur-mat { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: 62%; padding: 6px 0; text-align: center; border-radius: 8px; background: #EC8B48; border: 3px solid var(--d-navy, #1E2B45); color: #fff; font-family: var(--wp--preset--font-family--hand); font-size: 1.35rem; line-height: 1; letter-spacing: .03em; }
/* deurbel als knop */
.d-deur-bel { display: inline-flex; align-items: center; gap: 14px; margin-top: .4rem; padding: 10px 22px 10px 10px; border-radius: 999px; background: var(--wp--preset--color--logoblauw, #8EAAD5); color: var(--d-navy, #1E2B45) !important; font-weight: 600; text-decoration: none !important; position: relative; transition: transform .2s; }
.d-deur-bel-knop { width: 40px; height: 40px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 3px var(--d-navy, #1E2B45); display: grid; place-items: center; transition: transform .15s; }
.d-deur-bel-knop::after { content: ""; width: 16px; height: 16px; border-radius: 50%; background: #F0A030; box-shadow: 0 0 0 2px var(--d-navy, #1E2B45); }
.d-deur-bel:hover, .d-deur-bel:focus-visible { transform: translateY(-2px); }
.d-deur-bel:hover .d-deur-bel-knop, .d-deur-bel:active .d-deur-bel-knop { transform: scale(.88); }
.d-deur-tring { position: absolute; left: 4px; top: -30px; font-family: var(--wp--preset--font-family--hand); font-size: 1.3rem; color: #EC8B48; opacity: 0; transform: translateY(6px) rotate(-8deg); transition: opacity .2s, transform .3s cubic-bezier(.3,1.8,.5,1); pointer-events: none; }
.d-deur-bel:hover .d-deur-tring, .d-deur-bel:focus-visible .d-deur-tring { opacity: 1; transform: translateY(0) rotate(-8deg); }
.d-deur-links { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; align-items: baseline; margin-top: 1.4rem !important; font-size: 15px; }
.d-deur-klein { font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--wp--preset--color--groen-donker, #3F6B2E); }
.d-deur-links a { font-weight: 600; color: var(--d-navy, #1E2B45); }
.d-deur-links a::after { content: " ↗"; }
@media (max-width: 781px) { .d-deur { width: min(260px, 72%); } }
@media (prefers-reduced-motion: reduce) { .d-deur-blad { transition: none; } }
/* Voordeur, verbeterd: muur met lamp eraan, deur die echt openzwaait (diepte, zijkant, schaduw), mat vóór de deur op de grond, geen streep */
.d-deur::before { content: ""; position: absolute; left: 3%; right: 3%; top: 0; bottom: 12.5%; background: #FFF3E3; border: 3px solid var(--d-navy, #1E2B45); border-bottom: 0; border-radius: 22px 22px 0 0; }
.d-deur::after { bottom: 12.5%; left: -4%; right: -4%; }
.d-deur-kozijn { top: 7%; bottom: 12.5%; perspective: 520px; }
.d-deur-blad { background: linear-gradient(90deg, #9AB4DB, #7D9BCB) !important; box-shadow: inset -6px 0 0 #6582B5; }
.d-deur.is-open .d-deur-blad { transform: rotateY(-58deg); box-shadow: inset -6px 0 0 #6582B5, 18px 0 30px -10px rgba(30,43,69,.35); }
.d-deur-binnen::before { content: ""; position: absolute; z-index: 1; left: 0; top: 0; bottom: 0; width: 0; background: linear-gradient(90deg, rgba(30,43,69,.35), transparent); transition: width 1.3s cubic-bezier(.3,1.15,.4,1); }
.d-deur.is-open .d-deur-binnen::before { width: 55%; }
.d-deur-lamp { left: 8%; top: 24%; }
.d-deur-lamp::before { content: ""; position: absolute; right: -11px; top: 9px; width: 11px; height: 5px; background: var(--d-navy, #1E2B45); border-radius: 2px; }
.d-deur-plant { right: 5%; bottom: 12.5%; }
.d-deur-mat { bottom: 3%; width: 58%; transform: translateX(-50%) perspective(200px) rotateX(28deg); transform-origin: 50% 0; padding: 8px 0 6px; }
.d-deur-tring { left: auto; right: -34px; top: -18px; transform: translateY(6px) rotate(10deg); } .d-deur-bel:hover .d-deur-tring, .d-deur-bel:focus-visible .d-deur-tring { transform: translateY(0) rotate(10deg); } /* rechtsboven de knop, niet over de tekst */
.d-deur-tring { right: -78px; top: 50%; margin-top: -14px; } /* naast de knop, op dezelfde hoogte */
/* Voordeur: binnenkant getekend in dezelfde stijl (geen foto) */
.d-deur-binnen { background: center bottom / cover no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 300' preserveAspectRatio='xMidYMax slice'%3E%0A%3Cdefs%3E%3CradialGradient id='l' cx='0.62' cy='0.38' r='0.75'%3E%3Cstop offset='0' stop-color='%23FFF4D2'/%3E%3Cstop offset='1' stop-color='%23FFD98E'/%3E%3C/radialGradient%3E%3C/defs%3E%0A%3Crect width='200' height='300' fill='url%28%23l%29'/%3E%0A%3Cg stroke='%231E2B45' stroke-width='3' stroke-linejoin='round' stroke-linecap='round'%3E%0A%3Crect x='118' y='58' width='56' height='44' rx='4' fill='%23fff'/%3E%0A%3Ccircle cx='136' cy='76' r='9' fill='%23FFC94D'/%3E%3Cpath d='M122 98 L140 84 L152 92 L170 78 L170 98 Z' fill='%2390B85E' stroke-width='2.5'/%3E%0A%3Cpath d='M0 205 H200' fill='none'/%3E%0A%3Crect x='0' y='205' width='200' height='95' fill='%23F2C384' stroke='none'/%3E%0A%3Cpath d='M0 205 H200'/%3E%0A%3Cellipse cx='112' cy='262' rx='78' ry='20' fill='%238EAAD5'/%3E%0A%3Cellipse cx='112' cy='262' rx='56' ry='12' fill='none' stroke='%23fff' stroke-width='2.5' stroke-dasharray='6 7'/%3E%0A%3Crect x='88' y='196' width='66' height='10' rx='4' fill='%23EC8B48'/%3E%0A%3Cpath d='M96 206 V244 M146 206 V244'/%3E%0A%3Cpath d='M70 212 H86 V246 M70 212 V246 M70 228 H86' fill='none'/%3E%0A%3Crect x='68' y='208' width='20' height='6' rx='3' fill='%23729A47'/%3E%0A%3Cpath d='M156 212 H172 V246 M172 212 V246 M156 228 H172' fill='none'/%3E%0A%3Crect x='154' y='208' width='20' height='6' rx='3' fill='%23FFC94D'/%3E%0A%3Crect x='112' y='178' width='16' height='16' rx='2' fill='%23FFC94D'/%3E%3Crect x='122' y='182' width='12' height='12' rx='2' fill='%23E9573F'/%3E%0A%3Crect x='24' y='250' width='22' height='22' rx='3' fill='%23EC8B48'/%3E%3Crect x='46' y='256' width='16' height='16' rx='3' fill='%23729A47'/%3E%3Crect x='32' y='234' width='16' height='16' rx='3' fill='%238EAAD5'/%3E%0A%3Ccircle cx='176' cy='276' r='12' fill='%23E9573F'/%3E%3Cpath d='M165 272 Q176 280 187 272' fill='none' stroke='%23fff' stroke-width='2.5'/%3E%0A%3C/g%3E%3C/svg%3E") !important; }
.d-deur-binnen::after { background: radial-gradient(circle at 60% 35%, rgba(255,240,200,.35), transparent 70%); }
/* Voordeur, open zoals in een prentenboek: de deur zwaait naar buiten en staat schuin náást het kozijn; de opening is helemaal zichtbaar */
.d-deur-kozijn { overflow: visible; }
.d-deur-binnen { border-radius: 120px 120px 0 0; overflow: hidden; }
.d-deur-blad { z-index: 2; transition: transform 1.3s cubic-bezier(.3,1.1,.4,1), box-shadow 1.3s; }
.d-deur.is-open .d-deur-blad { transform: rotateY(-118deg); background: linear-gradient(90deg, #7D9BCB, #9AB4DB) !important; box-shadow: inset 6px 0 0 #6582B5, 0 0 0 3px var(--d-navy, #1E2B45); }
.d-deur-blad > span { transition: opacity .35s .25s; }
.d-deur.is-open .d-deur-blad > span { opacity: 0; transition-delay: 0s; }
.d-deur-blad { box-shadow: 0 0 0 3px var(--d-navy, #1E2B45), inset -6px 0 0 #6582B5; }
.d-deur.is-open .d-deur-binnen::before { width: 0; }
/* lampje naar rechts, zodat de open deur er niet overheen valt */
.d-deur-lamp { left: auto; right: 7%; }
.d-deur-lamp::before { right: auto; left: -11px; }
.d-deur-kozijn { perspective: 1800px; perspective-origin: 30% 60%; } .d-deur.is-open .d-deur-blad { transform: rotateY(-112deg); }
.d-deur-blad::after { content: ""; position: absolute; left: 10%; top: 58%; width: 16px; height: 16px; border-radius: 50%; background: #F0A030; box-shadow: 0 0 0 2px var(--d-navy, #1E2B45); opacity: 0; transition: opacity .3s; } .d-deur.is-open .d-deur-blad::after { opacity: 1; transition-delay: .5s; } /* klink aan de binnenkant als de deur open staat */
/* Mascotte Doortje: vrijstaand figuurtje dat rechtsonder bij de kopfoto staat (bron: comp.mascotte / C.hero(mascot=...)) */
.d-hero-foto { position: relative; margin: 0 !important; }
.d-play-hero .wp-block-column:has(> .d-mascot) { position: relative; }
/* kolommen geen eigen laag: zo staat Doortje (z 4) vóór de decoratie (z 3), terwijl foto (z 1) en tekst erachter blijven zoals voorheen */
.d-play-hero > .wp-block-columns:has(.d-mascot) { z-index: auto; }
.d-mascot { position: absolute; z-index: 4; right: -6%; bottom: -8%; width: clamp(96px, 30%, 170px); margin: 0 !important; pointer-events: none; filter: drop-shadow(0 12px 14px rgba(30,43,69,.22)); animation: d-mascot-in .8s cubic-bezier(.3,1.5,.5,1) .9s both; }
.d-mascot img { display: block; width: 100%; height: auto !important; max-height: none !important; aspect-ratio: auto !important; object-fit: contain !important; border: 0 !important; box-shadow: none !important; }
.d-mascot-slapen, .d-mascot-lezen { width: clamp(110px, 36%, 200px); bottom: -6%; }
.d-hero-home .d-mascot { right: 2%; bottom: 0; width: clamp(110px, 24%, 190px); }
@keyframes d-mascot-in { from { opacity: 0; transform: translateY(24px) scale(.85) rotate(-6deg); } to { opacity: 1; transform: none; } }
@media (min-width: 782px) {
body:not(.home) .d-play-hero .d-hero-foto { max-width: 380px; margin-inline: auto !important; }
body:not(.home) .d-play-hero .d-hero-foto .d-hero-img { max-width: none; }
}
@media (max-width: 781px) {
.d-mascot { width: 96px; right: 0; bottom: -4%; }
.d-mascot-slapen, .d-mascot-lezen { width: 116px; }
.d-hero-home .d-mascot { width: 104px; right: 4px; }
}
@media (prefers-reduced-motion: reduce) { .d-mascot { animation: none; } }
.d-404 { padding-block: clamp(40px, 8vh, 90px) !important; text-align: center; }
.d-404-mascot { margin-bottom: .4rem !important; }
.d-404-mascot img { width: auto; height: clamp(150px, 30vh, 260px); }
.d-mascot video { display: block; width: 100%; height: auto; background: transparent; }
/* Kop met decoratie: tekst en knoppen liggen boven de decoratie (die loopt wel over de foto), zodat bv. de picknickrand nooit over een knop valt */
.d-world-hero > .wp-block-columns { z-index: auto; }
.d-world-hero > .wp-block-columns > .wp-block-column:first-child { position: relative; z-index: 4; }
/* Rekentool op de tarievenpagina (inc/rekentool.php) */
.d-reken-wrap > * { max-width: 760px; margin-inline: auto !important; }
.d-reken-wrap > h2 { margin-bottom: 1.2rem !important; }
.d-reken { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 28px; padding: 28px !important; border-radius: 24px; border: 2px dashed var(--ink); }
.d-reken fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: 10px; }
.d-reken legend, .d-reken-velden label { font-weight: 600; color: var(--wp--preset--color--blauw-donker); margin-bottom: 6px; padding: 0; }
.d-reken-keuze label { display: flex; align-items: center; gap: 10px; background: #fff; border-radius: 14px; padding: 12px 14px; cursor: pointer; border: 2px solid transparent; }
.d-reken-keuze label:has(input:checked) { border-color: var(--ink); }
.d-reken-keuze label span { margin-left: auto; font-size: .9rem; color: var(--wp--preset--color--grijs); }
.d-reken-keuze input { accent-color: var(--wp--preset--color--oranje); width: 18px; height: 18px; }
.d-reken-velden { display: grid; align-content: start; }
.d-reken-velden select { font: inherit; padding: 12px 14px; border-radius: 14px; border: 2px solid var(--ink); background: #fff; color: var(--wp--preset--color--tekst); }
.d-reken-dag { font-size: .9rem; color: var(--wp--preset--color--grijs); margin: 10px 0 0 !important; }
.d-reken-uitkomst { grid-column: 1 / -1; background: var(--d-navy); color: #fff; border-radius: 18px; padding: 18px 22px !important; text-align: center; }
.d-reken-uitkomst p { margin: 0 !important; }
.d-reken-label { font-size: .85rem; letter-spacing: .12em; text-transform: uppercase; color: var(--d-sun); }
.d-reken-bedrag { font-family: var(--wp--preset--font-family--schreef); font-size: clamp(2.2rem, 5vw, 3rem) !important; line-height: 1.15; }
.d-reken-uitleg { font-size: .95rem; opacity: .85; }
.d-reken-noot { font-size: .92rem; color: var(--wp--preset--color--grijs); margin-top: 14px !important; }
@media (max-width: 640px) { .d-reken { grid-template-columns: 1fr; padding: 20px !important; } }
/* Ronde verhaalfoto niet groter dan 420px: anders staat de tekst ernaast ver omlaag en ontstaat er een wit vlak onder de hero */
.d-story-img.d-shape-circle { width: min(100%, 420px); margin-inline: auto !important; }
.d-story-img.d-shape-circle img { aspect-ratio: 1 / 1; max-height: none; }
.d-story .d-hand-note:has(+ .d-shape-circle) { text-align: center; }
/* Speels verhaalblok (story met kaartjes): gekleurde band, kleine scheve fotosticker, kaartjes zoals op de homepage */
body:not(.home) .d-band { margin-top: 28px !important; }
body:not(.home) :is(.d-section, .d-world-hero, .d-play-hero):has(+ .d-popup) { padding-bottom: calc(1.6rem + .26 * min(500px, 44vw)) !important; }
.d-story-speels { padding-block: clamp(2.2rem, 5vw, 3.6rem) !important; }
.d-story-speels .d-story { max-width: 1080px; margin-inline: auto; gap: clamp(24px, 4vw, 56px) !important; }
.d-story-speels h2 { font-size: clamp(1.8rem, 2.8vw, 2.4rem) !important; line-height: 1.15; margin-bottom: .5rem !important; }
.d-story-speels .d-story > .wp-block-column > p:is(:not([class]), :where(.d-nb) [class="wp-block-paragraph"]) { font-size: 1.05rem; max-width: 46ch; }
.d-story-speels .d-story-img.d-shape-circle { width: min(100%, 290px); rotate: 4deg; border-width: 8px; animation: d-vk-wieg 6s ease-in-out infinite; }
.d-story-speels .d-hand-note { font-size: 1.6rem !important; rotate: -4deg; }
@keyframes d-vk-wieg { 0%, 100% { rotate: 4deg; translate: 0 0; } 50% { rotate: -2deg; translate: 0 -8px; } }
.d-vk-rij { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 1.2rem !important; }
.d-vk { background: #fff; border-radius: 20px; padding: 16px 18px !important; box-shadow: 0 14px 28px -22px rgba(30,43,69,.55); border-top: 5px solid var(--tint, #EC8B48); transition: transform .25s cubic-bezier(.25,1.6,.45,1); }
.d-vk:nth-child(odd) { rotate: -1.2deg; } .d-vk:nth-child(even) { rotate: 1.2deg; }
.d-vk:hover { transform: translateY(-4px) rotate(0deg); }
.d-vk.d-tint-yellow { --tint: #F6C445; } .d-vk.d-tint-orange { --tint: #EC8B48; } .d-vk.d-tint-blue { --tint: #8EAAD5; } .d-vk.d-tint-green { --tint: #729A47; }
.d-vk-kop { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.d-vk-kop .d-icon { width: 26px; height: 26px; flex: none; margin: 0 !important; background: var(--tint) !important; }
.d-vk h3 { font-size: 1.12rem !important; margin: 0 !important; }
.d-vk p { font-size: .95rem; line-height: 1.55; margin: 0 !important; }
@media (max-width: 781px) { .d-vk-rij { grid-template-columns: 1fr; } .d-story-speels .d-story-img.d-shape-circle { width: 220px; } }
@media (prefers-reduced-motion: reduce) { .d-story-speels .d-story-img { animation: none; } }
body:not(.home) .d-band + .d-band:not(.d-band-vervolg) { margin-top: 0 !important; }
/* Kop in twee delen: het tweede deel blijft bij elkaar en staat op brede schermen op een eigen regel */
.d-kop-regel { white-space: nowrap; }
@media (min-width: 782px) { .d-kop-regel { display: block; } }
/* Windrichtingkaarten: kompasstempel, compacter, licht scheef; melding direct onder de kaarten */
.d-flips-wind { gap: 22px; }
.d-flips-wind .d-flip, .d-flips-wind .d-flip-inner { min-height: 200px; }
.d-flips-wind .d-flip { rotate: -1.5deg; transition: rotate .35s cubic-bezier(.25,1.6,.45,1), translate .35s cubic-bezier(.25,1.6,.45,1); }
.d-flips-wind .d-flip:nth-child(even) { rotate: 1.5deg; }
.d-flips-wind .d-flip:hover { rotate: 0deg; translate: 0 -6px; }
.d-flips-wind .d-flip-front { box-shadow: 0 16px 30px -24px rgba(30,43,69,.6); }
.d-flip-wind { position: absolute; top: 14px; right: 14px; width: 42px; height: 42px; margin: 0 !important; border-radius: 50%; background: #fff; border: 2px dashed currentColor; color: var(--ink);
display: grid; place-items: center; font-family: var(--wp--preset--font-family--schreef); font-weight: 700; font-size: 1.15rem !important; line-height: 1; box-shadow: 0 6px 12px -8px rgba(30,43,69,.5); }
.d-flips-wind .d-flip-front h3 { padding-right: 40px; }
.d-flips-wind .d-flip-inner { animation: d-wind-wiebel 1s ease-in-out .2s 1 both; animation-timeline: view(); animation-range: entry 60% cover 45%; }
.d-flips-wind .d-flip:nth-child(2) .d-flip-inner { animation-range: entry 70% cover 50%; }
.d-flips-wind .d-flip:nth-child(3) .d-flip-inner { animation-range: entry 80% cover 55%; }
.d-flips-wind .d-flip:nth-child(4) .d-flip-inner { animation-range: entry 90% cover 60%; }
@keyframes d-wind-wiebel { 0%, 100% { rotate: 0deg; } 20% { rotate: -4deg; } 45% { rotate: 3deg; } 70% { rotate: -1.5deg; } }
.d-banner.d-banner-onder { margin-top: clamp(1.6rem, 3vw, 2.4rem) !important; }
@media (max-width: 540px) { .d-flips-wind .d-flip, .d-flips-wind .d-flip-inner { min-height: 150px; } }
@media (prefers-reduced-motion: reduce) { .d-flips-wind .d-flip-inner { animation: none; } }
/* Route met stempels: rond icoonstempel op de lijn (zelfde plek als het bolletje), kaartjes in de kleur van hun fase */
.d-route-section.d-band { overflow-x: clip; overflow-y: visible; }
.d-route-stempels .d-stops { gap: 18px; }
.d-route-stempels .d-stops li { --tint: #F6C445; padding: 30px 18px 18px; font-size: 15px; border-top: 5px solid var(--tint); box-shadow: 0 16px 30px -24px rgba(30,43,69,.6); rotate: -1.2deg; }
.d-route-stempels .d-stops li:nth-child(2) { --tint: #8EAAD5; rotate: 1.2deg; }
.d-route-stempels .d-stops li:nth-child(3) { --tint: #729A47; }
.d-route-stempels .d-stops li:nth-child(4) { --tint: #EC8B48; rotate: 1.2deg; }
.d-route-stempels .d-stops li:nth-child(5) { --tint: #F6C445; }
.d-route-stempels .d-stops li::before { content: none; }
.d-route-stempels .d-stops li strong { font-size: 1.12rem; font-family: var(--wp--preset--font-family--schreef); margin: 4px 0 6px; }
.d-stop-stempel { position: absolute; top: -26px; left: 6px; width: 44px; height: 44px; border-radius: 50%; background: #fff; border: 3px solid var(--tint); box-shadow: 0 8px 14px -8px rgba(30,43,69,.55); display: grid; place-items: center; z-index: 2; }
.d-stop-stempel .d-icon { width: 24px; height: 24px; margin: 0 !important; background: var(--tint) !important; }
.d-route-stempels .d-stops li:nth-child(3) .d-stop-stempel .d-icon, .d-route-stempels .d-stops li:nth-child(3) .d-stop-stempel { --tint: #5E8A3A; }
@supports (animation-timeline: view()) {
@media (prefers-reduced-motion: no-preference) {
.d-stop-stempel { animation: d-stempel-ploep linear both; animation-timeline: view(); animation-range: entry 60% cover 40%; }
.d-stops li:nth-child(2) .d-stop-stempel { animation-range: entry 75% cover 45%; }
.d-stops li:nth-child(3) .d-stop-stempel { animation-range: entry 90% cover 50%; }
.d-stops li:nth-child(4) .d-stop-stempel { animation-range: entry 100% cover 55%; }
@keyframes d-stempel-ploep { 0% { scale: 0; rotate: -40deg; } 70% { scale: 1.25; rotate: 8deg; } 100% { scale: 1; rotate: 0deg; } }
}
}
@media (max-width: 1000px) { .d-route-stempels .d-stops { row-gap: 36px; } }
/* Waslijn: speelchips naast de tekst, drie polaroids aan een touw met knijpers die zachtjes wiegen */
.d-was-section h2 { font-size: clamp(1.8rem, 2.8vw, 2.4rem) !important; line-height: 1.15; }
.d-speel-intro { font-family: var(--wp--preset--font-family--hand); font-size: 1.45rem !important; color: var(--wp--preset--color--blauw-donker, #2E3B5E); margin: 0 0 .6rem !important; }
.d-speelchips { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.d-speelchips > * { margin: 0 !important; }
.d-speelchip { --tint: #EC8B48; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px 8px 10px !important; border-radius: 999px; background: #fff; border: 2px solid var(--tint);
font-size: 15px !important; font-weight: 600; color: #2E3138; box-shadow: 0 8px 14px -10px rgba(30,43,69,.5); transition: translate .3s cubic-bezier(.25,1.6,.45,1), rotate .3s; }
.d-speelchip:nth-child(3n+1) { rotate: -2deg; } .d-speelchip:nth-child(3n+2) { rotate: 1.5deg; }
.d-speelchip:hover { translate: 0 -4px; rotate: 0deg; }
.d-speelchip.d-tint-blue { --tint: #8EAAD5; } .d-speelchip.d-tint-yellow { --tint: #F6C445; } .d-speelchip.d-tint-green { --tint: #729A47; }
.d-speelchip .d-icon { width: 20px; height: 20px; flex: none; margin: 0 !important; background: var(--tint) !important; }
.d-speel-sticker { font-family: var(--wp--preset--font-family--hand); font-size: 1.5rem !important; color: #fff; background: #EC8B48; padding: 6px 16px 4px !important; border-radius: 12px; rotate: -5deg; box-shadow: 0 10px 18px -10px rgba(30,43,69,.6); }
.d-waslijn { position: relative; display: flex; justify-content: center; gap: clamp(18px, 5vw, 70px); padding: 46px 0 10px !important; margin-top: clamp(1.6rem, 3vw, 2.4rem) !important; }
.d-waslijn::before { content: ""; position: absolute; left: -2%; right: -2%; top: 0; height: 60px; pointer-events: none;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 60' preserveAspectRatio='none'%3E%3Cpath d='M0 6 Q500 64 1000 6' fill='none' stroke='%239B6B43' stroke-width='3' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }
.d-waslijn > * { margin: 0 !important; }
.d-was-foto { position: relative; width: clamp(160px, 17vw, 210px); background: #fff; padding: 10px 10px 4px !important; box-shadow: 0 20px 34px -22px rgba(30,43,69,.6);
transform-origin: 50% -14px; animation: d-was-wieg 5s ease-in-out infinite; cursor: pointer; }
.d-was-foto:nth-child(1) { margin-top: 2px !important; animation-delay: -1.2s; --r: -3deg; }
.d-was-foto:nth-child(2) { margin-top: 12px !important; animation-delay: -2.6s; --r: 2deg; }
.d-was-foto:nth-child(3) { margin-top: 2px !important; animation-delay: -.4s; --r: -1.5deg; }
.d-was-foto::before { content: ""; position: absolute; top: -22px; left: 50%; width: 14px; height: 34px; margin-left: -7px; border-radius: 4px; background: linear-gradient(90deg, #C9935E 0 48%, #9B6B43 48% 52%, #C9935E 52%); box-shadow: 0 3px 4px rgba(0,0,0,.18); z-index: 2; }
.d-was-foto .wp-block-image { margin: 0 !important; }
.d-was-foto img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
.d-was-cap { font-family: var(--wp--preset--font-family--hand); text-align: center; font-size: 1.4rem !important; margin: 4px 0 0 !important; color: var(--wp--preset--color--blauw-donker, #2E3B5E); }
@keyframes d-was-wieg { 0%, 100% { rotate: var(--r, 0deg); } 50% { rotate: calc(var(--r, 0deg) * -1); } }
.d-was-foto.is-schommel { animation: d-was-schommel 1.4s ease-out 1; }
@keyframes d-was-schommel { 0% { rotate: 0deg; } 15% { rotate: 12deg; } 35% { rotate: -9deg; } 55% { rotate: 6deg; } 75% { rotate: -3deg; } 100% { rotate: var(--r, 0deg); } }
@supports (animation-timeline: view()) { @media (prefers-reduced-motion: no-preference) {
.d-speelchip, .d-speel-sticker { animation: d-chip-ploep linear both; animation-timeline: view(); animation-range: entry 30% cover 35%; }
@keyframes d-chip-ploep { from { opacity: 0; scale: .6; } }
} }
@media (max-width: 781px) {
.d-waslijn { gap: 10px; padding-top: 36px !important; }
.d-was-foto { width: 31%; padding: 6px 6px 2px !important; }
.d-was-cap { font-size: 1rem !important; }
}
@media (prefers-reduced-motion: reduce) { .d-was-foto, .d-was-foto.is-schommel { animation: none; rotate: var(--r, 0deg); } }
/* Groeiende plantjes op de stickers (Groeien op drie manieren): zaadje in een bergje aarde, plantje groeit omhoog, laatste krijgt een bloem */
.d-stickers-plant .d-sticker .d-plantje { position: absolute !important; top: 12px; right: 16px; width: 50px; height: 70px; margin: 0 !important; pointer-events: none; }
.d-plantje::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 12px; background: url("data:image/svg+xml,") center / contain no-repeat; z-index: 1; }
.d-plantje::after { content: ""; position: absolute; inset: 0 0 4px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 80'%3E%3Cpath d='M30 78V34' stroke='%235E8A3A' stroke-width='4' stroke-linecap='round'/%3E%3Cpath d='M30 56C18 56 10 48 9 38C21 38 30 45 30 56Z' fill='%23729A47'/%3E%3Cpath d='M30 46C42 46 50 38 51 28C39 28 30 35 30 46Z' fill='%238DB35F'/%3E%3Cpath d='M30 36C26 28 27 20 31 14C35 20 35 28 30 36Z' fill='%23A9C27F'/%3E%3C/svg%3E") center bottom / contain no-repeat; transform-origin: 50% 100%; }
.d-sticker:last-child .d-plantje::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 80'%3E%3Cpath d='M30 78V26' stroke='%235E8A3A' stroke-width='4' stroke-linecap='round'/%3E%3Cpath d='M30 60C18 60 10 52 9 42C21 42 30 49 30 60Z' fill='%23729A47'/%3E%3Cpath d='M30 50C42 50 50 42 51 32C39 32 30 39 30 50Z' fill='%238DB35F'/%3E%3Cg fill='%23EC8B48'%3E%3Ccircle cx='30' cy='9' r='7'/%3E%3Ccircle cx='39' cy='16' r='7'/%3E%3Ccircle cx='36' cy='26' r='7'/%3E%3Ccircle cx='24' cy='26' r='7'/%3E%3Ccircle cx='21' cy='16' r='7'/%3E%3C/g%3E%3Ccircle cx='30' cy='18' r='6' fill='%23F6C445'/%3E%3C/svg%3E"); }
.d-stickers-plant .d-sticker h3 { padding-right: 46px; }
@supports (animation-timeline: view()) { @media (prefers-reduced-motion: no-preference) {
.d-plantje::after { animation: d-plant-groei linear both; animation-timeline: view(); animation-range: entry 70% cover 50%; }
.d-sticker:nth-child(2) .d-plantje::after { animation-range: entry 85% cover 55%; }
.d-sticker:nth-child(3) .d-plantje::after { animation-range: entry 100% cover 60%; }
@keyframes d-plant-groei { 0% { scale: 0 0; } 30% { scale: .35 .25; } 70% { scale: .9 1.08; } 100% { scale: 1 1; } }
} }
/* Reiskaartje (ticket met kompas): mini-kompas draait en wijst naar de knop, stempel landt midden op het strookje, één groot leesvakje */
.d-ticket-reis .d-ticket-main { position: relative; }
.d-ticket-kompas { position: absolute; top: clamp(20px, 3vw, 34px); right: clamp(20px, 3vw, 34px); width: 74px; height: 74px; border-radius: 50%; background: #fff; border: 4px solid #EC8B48;
box-shadow: 0 10px 18px -10px rgba(30,43,69,.6), inset 0 0 0 5px #FFF3C4; }
.d-ticket-kompas::before { content: "N"; position: absolute; top: 6px; left: 50%; translate: -50% 0; font: 700 11px/1 var(--wp--preset--font-family--zonder-schreef, sans-serif); color: #2E3B5E; }
.d-tk-naald { position: absolute; left: 50%; top: 50%; width: 12px; height: 54px; margin: -27px 0 0 -6px; rotate: 225deg;
background: linear-gradient(#EC8B48 0 50%, #8EAAD5 50%); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.d-tk-naald::after { content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; margin: -5px; border-radius: 50%; background: #2E3B5E; }
.d-ticket-reis .d-ticket-main h2 { padding-right: 90px; }
.d-ticket-reis .d-ticket-stub { display: flex !important; flex-direction: column; justify-content: center; padding-top: clamp(110px, 12vw, 140px) !important; }
.d-ticket-reis .d-stamp { top: clamp(22px, 2.5vw, 30px); right: auto; left: 50%; margin-left: -52px !important; }
.d-ticket-reis .d-stamp::after { content: ""; position: absolute; inset: -10px; border-radius: 50%; border: 3px solid currentColor; opacity: 0; }
.d-ticket-reis .d-ticket-stub .d-link { background: #fff; border-radius: 16px; padding: 14px 16px !important; box-shadow: 0 10px 18px -14px rgba(30,43,69,.6); margin-top: 4px !important; }
.d-ticket-reis .d-ticket-stub .d-link a { font-size: 1.15rem; font-weight: 700; color: #2E3B5E; text-decoration: none; display: flex; justify-content: space-between; gap: 10px; }
.d-ticket-reis .d-ticket-stub .d-link a::after { content: "→"; color: #EC8B48; transition: translate .25s; }
.d-ticket-reis .d-ticket-stub .d-link a:hover::after { translate: 4px 0; }
@supports (animation-timeline: view()) { @media (prefers-reduced-motion: no-preference) {
.d-tk-naald { animation: d-tk-draai linear both; animation-timeline: view(); animation-range: entry 20% cover 50%; }
@keyframes d-tk-draai { 0% { rotate: 0deg; } 60% { rotate: 650deg; } 80% { rotate: 575deg; } 100% { rotate: 585deg; } }
.d-ticket-reis .d-stamp::after { animation: d-stamp-plof linear both; animation-timeline: view(); animation-range: entry 75% cover 55%; }
@keyframes d-stamp-plof { 0%, 60% { opacity: 0; scale: .8; } 75% { opacity: .55; scale: 1; } 100% { opacity: 0; scale: 1.35; } }
} }
@media (max-width: 781px) {
.d-ticket-kompas { width: 58px; height: 58px; } .d-tk-naald { height: 42px; margin-top: -21px; }
.d-ticket-reis .d-ticket-main h2 { padding-right: 70px; }
.d-ticket-reis .d-ticket-stub { padding-top: 104px !important; }
.d-ticket-reis .d-stamp { margin-left: -40px !important; top: 18px; }
}
/* Speels verhaalblok met boogfoto: ook een kleine, scheve sticker */
.d-story-speels .d-story-img.d-shape-arch { width: min(100%, 260px); margin-inline: auto !important; rotate: -3deg; border-width: 8px; animation: d-vk-wieg 6s ease-in-out infinite; }
.d-story-speels .d-story-img.d-shape-arch img { max-height: none; }
.d-story-speels .d-hand-note:has(+ .d-shape-arch) { text-align: center; }
@media (max-width: 781px) { .d-story-speels .d-story-img.d-shape-arch { width: 200px; } }
.d-story-speels .d-hand-note { text-wrap: balance; max-width: 320px; margin-inline: auto !important; }
/* Klok met icoontjes: vijf icoontjes rond de wijzerplaat, kaartjes ernaast; tik/wijs een kaartje aan en de wijzer draait ernaartoe */
.d-klok-iconen .d-clock { width: min(300px, 70vw); }
.d-klok-iconen .d-clock::before, .d-klok-iconen .d-clock::after { content: none; }
.d-klok-iconen .d-clock-hand { animation: none !important; }
.d-klok-iconen .d-clock-m { height: 30%; }
.d-klok-iconen .d-clock-h { height: 20%; }
.d-clock-ic { --a: 0deg; position: absolute !important; left: 50%; top: 50%; width: 40px; height: 40px; margin: -20px 0 0 -20px !important; border-radius: 50%; background: #fff; display: grid; place-items: center;
transform: rotate(var(--a)) translateY(-118%) rotate(calc(var(--a) * -1)); box-shadow: 0 4px 10px -6px rgba(30,43,69,.5); transition: scale .3s cubic-bezier(.25,1.6,.45,1), background .3s; }
.d-klok-iconen .d-clock { --r: 1; }
.d-clock-ic .d-icon { width: 22px; height: 22px; margin: 0 !important; background: var(--tint, #2E3B5E) !important; }
.d-clock-ic:nth-of-type(4) { --a: 0deg; --tint: #EC8B48; } .d-clock-ic:nth-of-type(5) { --a: 72deg; --tint: #496390; } .d-clock-ic:nth-of-type(6) { --a: 144deg; --tint: #E0A82E; }
.d-clock-ic:nth-of-type(7) { --a: 216deg; --tint: #5E8A3A; } .d-clock-ic:nth-of-type(8) { --a: 288deg; --tint: #D9667A; }
.d-clock-ic.is-nu { scale: 1.3; background: #FFF3C4; }
.d-klok-iconen .d-clock-ic { transform: rotate(var(--a)) translateY(-104px) rotate(calc(var(--a) * -1)); }
.d-klok-iconen .d-clocklist { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.d-klok-iconen .d-clocklist li { --tint: #EC8B48; display: block; grid-column: auto; background: #fff; border-radius: 18px; padding: 14px 16px 14px 52px; position: relative; cursor: pointer;
border-left: 5px solid var(--tint); box-shadow: 0 12px 24px -20px rgba(30,43,69,.6); rotate: -1deg; transition: translate .3s cubic-bezier(.25,1.6,.45,1), rotate .3s, background .3s; }
.d-klok-iconen .d-clocklist li:nth-child(even) { rotate: 1deg; }
.d-klok-iconen .d-clocklist li:nth-child(2) { --tint: #496390; } .d-klok-iconen .d-clocklist li:nth-child(3) { --tint: #E0A82E; }
.d-klok-iconen .d-clocklist li:nth-child(4) { --tint: #5E8A3A; } .d-klok-iconen .d-clocklist li:nth-child(5) { --tint: #D9667A; grid-column: 1 / -1; }
.d-klok-iconen .d-clocklist li > .d-icon { position: absolute; left: 16px; top: 16px; width: 24px; height: 24px; margin: 0 !important; background: var(--tint) !important; }
.d-klok-iconen .d-clocklist li strong { display: block; margin-bottom: 2px; color: var(--tint); }
.d-klok-iconen .d-clocklist li:hover, .d-klok-iconen .d-clocklist li.is-nu { translate: 0 -3px; rotate: 0deg; background: #FFF9E6; transform: none; }
@media (max-width: 781px) { .d-klok-iconen .d-clock-ic { transform: rotate(var(--a)) translateY(-84px) rotate(calc(var(--a) * -1)); width: 34px; height: 34px; margin: -17px 0 0 -17px !important; }
.d-klok-iconen .d-clock { width: 240px; } }
@media (max-width: 540px) { .d-klok-iconen .d-clocklist { grid-template-columns: 1fr; } .d-klok-iconen .d-clocklist li:nth-child(5) { grid-column: auto; } }
/* Koelkastdeur met huisregels: zacht wit paneel met greep, briefjes met magneten die erop ploppen en wiebelen */
.d-koelkast { position: relative; margin-top: 1.6rem !important; padding: clamp(30px, 4vw, 46px) clamp(22px, 4vw, 56px) clamp(26px, 3vw, 36px) !important; border-radius: 34px;
background: linear-gradient(160deg, #FFFFFF 0%, #F1F4F8 100%); border: 3px solid #E1E6EE; box-shadow: 0 30px 60px -40px rgba(30,43,69,.55), inset 0 -8px 0 rgba(30,43,69,.04); }
.d-koelkast > * { margin: 0 !important; }
.d-kk-greep { position: absolute !important; right: 16px; top: 18%; width: 12px; height: 34%; border-radius: 8px; background: linear-gradient(90deg, #D5DBE5, #F6F8FB 60%, #C9D0DC); box-shadow: 0 4px 8px -4px rgba(30,43,69,.4); }
.d-kk-rij { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2.4vw, 28px); padding-right: 22px; }
.d-kk-rij.d-kk-onder { grid-template-columns: 1.35fr 1fr; margin-top: clamp(22px, 3vw, 34px) !important; }
.d-kk-briefje { --tint: #EC8B48; --kleur: #FCE3D1; position: relative; background: var(--kleur); border-radius: 6px 6px 18px 6px; padding: 30px 20px 20px !important; margin: 0 !important;
box-shadow: 0 16px 26px -22px rgba(30,43,69,.7); rotate: -1.6deg; transform-origin: 50% 0; transition: rotate .4s cubic-bezier(.25,1.6,.45,1); }
.d-kk-briefje:nth-child(2) { rotate: 1.4deg; } .d-kk-briefje:nth-child(3) { rotate: -.8deg; }
.d-kk-briefje:hover { animation: d-kk-wiebel .9s ease-in-out 1; }
@keyframes d-kk-wiebel { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(3deg); } 55% { transform: rotate(-2.5deg); } 80% { transform: rotate(1deg); } }
.d-kk-briefje.d-tint-blue { --tint: #496390; --kleur: #DFE8F6; } .d-kk-briefje.d-tint-green { --tint: #5E8A3A; --kleur: #E3EBD3; }
.d-kk-feest { --tint: #5E8A3A; --kleur: #FFFFFF; border: 2px dashed #CBD3C0; }
.d-kk-grens { --tint: #8A4B12; --kleur: #FFF0BF; }
.d-kk-briefje > * { margin: 0 !important; }
.d-kk-briefje > * + * { margin-top: .5rem !important; }
.d-kk-magneet { --m: #EC8B48; position: absolute !important; top: -14px; left: 50%; width: 30px; height: 30px; margin: 0 0 0 -15px !important; border-radius: 50%;
background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.75) 0 18%, transparent 20%), var(--m); box-shadow: 0 6px 8px -3px rgba(0,0,0,.35); z-index: 2; }
.d-kk-magneet.d-tint-blue { --m: #8EAAD5; } .d-kk-magneet.d-tint-green { --m: #729A47; } .d-kk-magneet.d-tint-yellow { --m: #F6C445; }
.d-kk-kop { display: flex; align-items: center; gap: 10px; }
.d-kk-kop .d-icon { width: 28px; height: 28px; flex: none; margin: 0 !important; background: var(--tint) !important; }
.d-kk-briefje h3 { font-size: 1.2rem !important; margin: 0 !important; }
.d-kk-briefje p:is(:not([class]), :where(.d-nb) [class="wp-block-paragraph"]) { font-size: 15px; line-height: 1.55; }
.d-kk-labels { display: flex; flex-wrap: wrap; gap: 8px; }
.d-kk-label { --tint: #EC8B48; margin: 0 !important; padding: 5px 12px !important; border-radius: 999px; background: #fff; border: 2px solid var(--tint); font-size: 14px !important; font-weight: 600; }
.d-kk-label.d-tint-blue { --tint: #8EAAD5; } .d-kk-label.d-tint-green { --tint: #729A47; }
.d-kk-grens-in { display: flex; gap: 12px; align-items: flex-start; }
.d-kk-grens-in .d-icon { width: 28px; height: 28px; flex: none; margin: 2px 0 0 !important; background: var(--tint) !important; }
.d-kk-grens-in p { margin: 0 !important; font-size: 15px; line-height: 1.55; }
@supports (animation-timeline: view()) { @media (prefers-reduced-motion: no-preference) {
.d-kk-magneet { animation: d-kk-plop linear both; animation-timeline: view(); animation-range: entry 60% cover 40%; }
@keyframes d-kk-plop { 0% { scale: 0; translate: 0 -30px; } 70% { scale: 1.3; translate: 0 2px; } 100% { scale: 1; translate: 0 0; } }
} }
@media (max-width: 900px) { .d-kk-rij { grid-template-columns: 1fr 1fr; } .d-kk-rij.d-kk-onder { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .d-kk-rij { grid-template-columns: 1fr; padding-right: 0; row-gap: 26px; } .d-kk-greep { display: none; } .d-koelkast { padding: 28px 16px 22px !important; border-radius: 24px; } }
@media (prefers-reduced-motion: reduce) { .d-kk-briefje:hover { animation: none; } }
/* Omdraaikaarten als tekstballonnen: vraag van een ouder met staartje, antwoord 'Doortje zegt:' */
.d-flips-ballon { overflow: visible; padding-bottom: 18px !important; }
.d-flips-ballon .d-flip-front, .d-flips-ballon .d-flip-back { border-radius: 28px 28px 28px 8px; overflow: visible; }
.d-flips-ballon .d-flip-front::after, .d-flips-ballon .d-flip-back::after { content: ""; position: absolute; left: 26px; bottom: -16px; width: 30px; height: 18px; background: inherit; clip-path: polygon(0 0, 100% 0, 10% 100%); }
.d-flips-ballon .d-flip-back .d-eyebrow { font-size: 12px !important; letter-spacing: .12em; color: #FFD66B !important; margin-bottom: .4rem !important; }
.d-flips-ballon .d-flip-wind { font-size: 1.35rem !important; }
/* Fotomuur: ingelijste foto's aan spijkertjes met touwtjes, scheef, wiebelen bij aanwijzen; op de telefoon opzij vegen */
.d-muur-section h2 { font-size: clamp(1.8rem, 2.8vw, 2.4rem) !important; }
.d-fotomuur { display: flex; justify-content: center; align-items: flex-start; gap: clamp(16px, 2.6vw, 36px); padding: 58px 4px 18px !important; margin-top: .6rem !important; }
.d-fotomuur > * { margin: 0 !important; }
.d-lijstje { --lijst: #B07A4A; position: relative; flex: 0 0 auto; width: clamp(150px, 15vw, 200px); padding: 10px !important; background: var(--lijst); box-shadow: 0 18px 28px -18px rgba(30,43,69,.65), inset 0 0 0 3px rgba(255,255,255,.25);
transform-origin: 50% -46px; rotate: -3deg; transition: rotate .4s cubic-bezier(.25,1.6,.45,1); }
.d-lijstje:nth-child(2) { rotate: 2.5deg; margin-top: 18px !important; } .d-lijstje:nth-child(3) { rotate: -1.5deg; } .d-lijstje:nth-child(4) { rotate: 3deg; margin-top: 24px !important; } .d-lijstje:nth-child(5) { rotate: -2deg; margin-top: 6px !important; }
.d-lijstje:hover { animation: d-lijst-wiebel 1s ease-in-out 1; }
@keyframes d-lijst-wiebel { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(5deg); } 55% { transform: rotate(-4deg); } 80% { transform: rotate(1.5deg); } }
.d-lijst-wit { --lijst: #FFFFFF; } .d-lijst-goud { --lijst: linear-gradient(135deg, #E9C46A, #C8973A 50%, #F2D48A); }
.d-lijstje .wp-block-image { margin: 0 !important; overflow: hidden; }
.d-lijstje img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.d-lijst-rond, .d-lijst-rond .wp-block-image { border-radius: 50%; } .d-lijst-rond img { aspect-ratio: 1; }
.d-lijst-ovaal, .d-lijst-ovaal .wp-block-image { border-radius: 50% / 42%; }
.d-lijst-recht, .d-lijst-recht .wp-block-image { border-radius: 4px; }
.d-lijstje::before { content: ""; position: absolute; left: 50%; top: -46px; width: 64px; height: 50px; margin-left: -32px; pointer-events: none;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 50'%3E%3Cpath d='M6 50L32 6L58 50' fill='none' stroke='%239B6B43' stroke-width='2'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }
.d-lijstje::after { content: ""; position: absolute; left: 50%; top: -52px; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff 0 15%, #8A8F99 20% 100%); box-shadow: 0 2px 3px rgba(0,0,0,.3); }
.d-lijst-rond::before, .d-lijst-ovaal::before { top: -40px; }
.d-muur-hint { display: none; font-family: var(--wp--preset--font-family--hand); font-size: 1.25rem !important; text-align: center; color: var(--wp--preset--color--blauw-donker, #2E3B5E); }
@media (max-width: 900px) {
.d-fotomuur { justify-content: flex-start; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding-inline: 16px !important; margin-inline: -16px !important; scrollbar-width: none; }
.d-fotomuur::-webkit-scrollbar { display: none; }
.d-lijstje { width: 58vw; max-width: 240px; scroll-snap-align: center; }
.d-muur-hint { display: block; }
}
@media (prefers-reduced-motion: reduce) { .d-lijstje:hover { animation: none; } }
/* Koffiekopje bij de afsluiter: kopje op schoteltje met kringelende damp; tik = wiebelen */
.d-ticket-koffie { position: absolute; top: clamp(18px, 3vw, 30px); right: clamp(20px, 3vw, 34px); width: 86px; height: 86px; cursor: pointer;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 86 86'%3E%3Cellipse cx='40' cy='76' rx='34' ry='7' fill='%23DFE8F6' stroke='%23496390' stroke-width='2'/%3E%3Cpath d='M64 46c10 0 14 6 12 12s-8 8-14 6' fill='none' stroke='%23EC8B48' stroke-width='5' stroke-linecap='round'/%3E%3Cpath d='M14 38h52v14c0 12-10 22-22 22h-8C24 74 14 64 14 52Z' fill='%23EC8B48'/%3E%3Cellipse cx='40' cy='38' rx='26' ry='6' fill='%23A86A3D'/%3E%3Cpath d='M20 50c4 2 8 2 12 0' stroke='%23fff' stroke-width='3' stroke-linecap='round' opacity='.6'/%3E%3C/svg%3E") center bottom / contain no-repeat;
transform-origin: 50% 100%; }
.d-ticket-koffie.is-wiebel { animation: d-kop-wiebel .8s ease-in-out 1; }
@keyframes d-kop-wiebel { 0%, 100% { rotate: 0deg; } 25% { rotate: -8deg; } 55% { rotate: 6deg; } 80% { rotate: -2deg; } }
.d-damp { position: absolute; bottom: 52px; width: 10px; height: 26px; border-radius: 10px; border: 3px solid rgba(73,99,144,.45); border-left-color: transparent; border-bottom-color: transparent; opacity: 0; }
.d-damp-1 { left: 26px; } .d-damp-2 { left: 38px; } .d-damp-3 { left: 50px; }
@media (prefers-reduced-motion: no-preference) {
.d-damp { animation: d-damp 2.8s ease-in-out infinite; }
.d-damp-2 { animation-delay: .9s; } .d-damp-3 { animation-delay: 1.8s; }
@keyframes d-damp { 0% { opacity: 0; translate: 0 6px; scale: .7; } 30% { opacity: 1; } 100% { opacity: 0; translate: 4px -26px; scale: 1.15; } }
}
@media (prefers-reduced-motion: reduce) { .d-damp { opacity: .7; } }
.d-ticket-reis.d-ticket-letter .d-stamp { width: 104px; }
.d-ticket-reis .d-ticket-stub .d-link + .d-eyebrow { margin-top: 14px !important; }
@media (max-width: 781px) { .d-ticket-koffie { width: 64px; height: 64px; } .d-damp { bottom: 38px; } .d-damp-1 { left: 18px; } .d-damp-2 { left: 28px; } .d-damp-3 { left: 38px; } }
@media (max-width: 781px) { .d-ticket-reis.d-ticket-letter .d-ticket-stub { padding-top: 162px !important; } .d-ticket-reis.d-ticket-letter .d-stamp { width: 96px; height: 96px; margin-left: -48px !important; } }
/* Speels verhaalblok met blad- of blobfoto: ook een kleine, scheve sticker */
.d-story-speels .d-story-img:is(.d-shape-leaf, .d-shape-blob) { width: min(100%, 270px); margin-inline: auto !important; rotate: 3deg; border-width: 8px; animation: d-vk-wieg 6s ease-in-out infinite; }
.d-story-speels .d-story-img:is(.d-shape-leaf, .d-shape-blob) img { max-height: none; aspect-ratio: 1; }
.d-story-speels .d-hand-note:has(+ :is(.d-shape-leaf, .d-shape-blob)) { text-align: center; }
@media (max-width: 781px) { .d-story-speels .d-story-img:is(.d-shape-leaf, .d-shape-blob) { width: 210px; } }
/* Krijtbord dat aan de muur hangt: houten lijst, touwtjes aan een spijker, richel met krijtje en sponsje, krijttekeningetjes, mailknop */
.d-board-wrap:has(.d-board-hangt) { padding-top: calc(var(--wp--preset--spacing--40) + 70px) !important; padding-bottom: 40px !important; }
.d-board.d-board-hangt { position: relative; max-width: 880px; margin-inline: auto !important; grid-template-columns: repeat(3, 1fr); gap: 18px 28px; padding: 30px 36px 40px !important; rotate: -1deg; overflow: visible;
border: 14px solid #9B6B43; border-radius: 12px; box-shadow: 0 30px 50px -30px rgba(30,43,69,.8), inset 0 0 40px rgba(0,0,0,.25);
background: radial-gradient(ellipse at 30% 20%, rgba(255,255,255,.06), transparent 60%), #2F4A3A; }
.d-board-hangt::before { content: ""; position: absolute; left: 50%; top: -84px; width: 260px; height: 74px; margin-left: -130px; pointer-events: none;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 260 74'%3E%3Cpath d='M10 74L130 8L250 74' fill='none' stroke='%239B6B43' stroke-width='3'/%3E%3Ccircle cx='130' cy='8' r='7' fill='%238A8F99'/%3E%3Ccircle cx='128' cy='6' r='2' fill='%23fff'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }
.d-board-hangt .d-board-row { font-size: 1.5rem !important; }
.d-board-knoprij { grid-column: 2 / -1; align-self: end; text-align: right; }
.d-board-knop { display: inline-block; font-family: var(--wp--preset--font-family--hand); font-size: 1.5rem; color: #fff !important; text-decoration: none; padding: 8px 22px 6px;
border: 2.5px dashed rgba(255,255,255,.85); border-radius: 14px; rotate: -2deg; transition: background .25s, rotate .25s; }
.d-board-knop::after { content: " →"; }
.d-board-knop:hover { background: rgba(255,255,255,.12); rotate: 0deg; }
.d-krijt { position: absolute !important; width: 44px; height: 44px; margin: 0 !important; opacity: .8; pointer-events: none; }
.d-krijt-ster { right: 22px; top: 18px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 44'%3E%3Cpath d='M22 4l5 12 13 1-10 8 3 13-11-7-11 7 3-13L4 17l13-1z' fill='none' stroke='%23F6E7A8' stroke-width='2.5' stroke-linejoin='round' stroke-dasharray='3 2'/%3E%3C/svg%3E") center / contain no-repeat; rotate: 12deg; }
.d-krijt-hart { left: 24px; bottom: 14px; width: 34px; height: 34px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 34'%3E%3Cpath d='M17 30S4 21 4 12a6.5 6.5 0 0 1 13-3 6.5 6.5 0 0 1 13 3c0 9-13 18-13 18z' fill='none' stroke='%23F2B7C4' stroke-width='2.5' stroke-dasharray='3 2'/%3E%3C/svg%3E") center / contain no-repeat; rotate: -10deg; }
.d-board-richel { position: absolute !important; left: -14px; right: -14px; bottom: -30px; height: 16px; margin: 0 !important; border-radius: 0 0 8px 8px; background: #8A5A3B; box-shadow: 0 8px 12px -6px rgba(0,0,0,.4); }
.d-board-richel::before { content: ""; position: absolute; left: 22%; top: -7px; width: 40px; height: 8px; border-radius: 4px; background: #F3F1E7; rotate: -4deg; }
.d-board-richel::after { content: ""; position: absolute; right: 18%; top: -12px; width: 46px; height: 14px; border-radius: 4px; background: linear-gradient(#F6C445 0 55%, #4A4F5A 55%); }
@media (max-width: 900px) { .d-board.d-board-hangt { grid-template-columns: 1fr 1fr; } .d-board-knoprij { grid-column: 1 / -1; text-align: left; } }
@media (max-width: 600px) { .d-board.d-board-hangt { grid-template-columns: 1fr; padding: 24px 20px 34px !important; border-width: 10px; rotate: -.6deg; } .d-board-hangt::before { width: 200px; margin-left: -100px; } .d-krijt-hart { display: none; } }
/* Rugzak inpakken: zelf aantikken, rugzak wiebelt, sticker bij alles; breder en lager; labeltjes onder de intro */
.d-pack-section h2 { font-size: clamp(1.8rem, 2.8vw, 2.4rem) !important; }
.d-pack-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 1rem !important; }
.d-pack-chip { margin: 0 !important; padding: 6px 14px !important; border-radius: 999px; background: #fff; border: 2px solid #EC8B48; font-weight: 600; font-size: 14px !important; rotate: -1.5deg; }
.d-pack-chip:nth-child(2) { border-color: #8EAAD5; rotate: 1.5deg; } .d-pack-chip:nth-child(3) { border-color: #729A47; }
.d-pack-hint { font-family: var(--wp--preset--font-family--hand); font-size: 1.4rem !important; text-align: center; color: #2E3B5E; margin: 0 0 44px !important; rotate: -2deg; }
.d-pack.d-pack-inpak { max-width: 600px; padding-top: 56px !important; transform-origin: 50% 100%; }
.d-pack.d-pack-inpak.is-wiebel { animation: d-pack-wiebel .6s ease-in-out 1 !important; }
@keyframes d-pack-wiebel { 0%, 100% { rotate: 0deg; } 30% { rotate: -3deg; } 65% { rotate: 2deg; } }
.d-pack-inpak .d-pack-list { grid-template-columns: 1fr 1fr; column-gap: 14px; }
.d-pack-inpak .d-pack-list li { cursor: pointer; border-radius: 10px; transition: background .2s; font-size: 14.5px; }
.d-pack-inpak .d-pack-list li:hover { background: #FFF6E6; }
.d-pack-inpak .d-pack-list li::after { animation: none !important; opacity: 0; scale: .3; transition: opacity .2s, scale .3s cubic-bezier(.25,1.6,.45,1); }
.d-pack-inpak .d-pack-list li.is-in::after { opacity: 1; scale: 1; }
.d-pack-inpak .d-pack-list li.is-in { color: #2E3B5E; }
.d-pack-klaar { position: absolute !important; right: -18px; top: -14px; margin: 0 !important; padding: 8px 16px 6px !important; background: #F6C445; color: #2E3B5E; border-radius: 14px;
font-family: var(--wp--preset--font-family--hand); font-size: 1.5rem !important; rotate: 8deg; box-shadow: 0 10px 18px -10px rgba(30,43,69,.6); opacity: 0; scale: .4; pointer-events: none; transition: opacity .3s, scale .45s cubic-bezier(.25,1.6,.45,1); z-index: 3; }
.d-pack-inpak.is-klaar .d-pack-klaar { opacity: 1; scale: 1; }
@media (max-width: 600px) { .d-pack-inpak .d-pack-list { grid-template-columns: 1fr; } .d-pack-klaar { right: 6px; } }
@media (prefers-reduced-motion: reduce) { .d-pack.d-pack-inpak.is-wiebel { animation: none !important; } }
/* Prikbord: kurk met houten rand, briefjes met punaises */
.d-koelkast.d-prikbord { border: 14px solid #9B6B43; border-radius: 16px; padding: clamp(30px, 4vw, 44px) clamp(20px, 3vw, 40px) !important;
background: radial-gradient(circle at 20% 30%, rgba(0,0,0,.05) 0 2px, transparent 3px) 0 0 / 22px 22px, radial-gradient(circle at 70% 60%, rgba(255,255,255,.12) 0 2px, transparent 3px) 0 0 / 30px 30px, #C99A62;
box-shadow: 0 30px 50px -32px rgba(30,43,69,.8), inset 0 0 30px rgba(0,0,0,.18); }
.d-prikbord .d-kk-rij { padding-right: 0; }
.d-prikbord .d-kk-rij.d-n4 { grid-template-columns: repeat(4, 1fr); }
.d-prikbord .d-kk-briefje { border-radius: 3px; padding-top: 32px !important; }
.d-prikbord .d-kk-briefje.d-tint-orange { --kleur: #FCE3D1; } .d-prikbord .d-kk-briefje.d-tint-yellow { --tint: #8A6A12; --kleur: #FFF0BF; }
.d-prikbord .d-kk-briefje:nth-child(4) { rotate: 1.8deg; }
.d-prikbord .d-kk-magneet { width: 22px; height: 22px; top: -8px; margin-left: -11px !important; box-shadow: 2px 6px 6px -2px rgba(0,0,0,.45); }
.d-prikbord .d-kk-magneet::after { content: ""; position: absolute; left: 50%; top: 18px; width: 3px; height: 8px; margin-left: -1.5px; background: #9AA0A8; border-radius: 0 0 2px 2px; z-index: -1; }
.d-kk-magneet.d-tint-yellow { --m: #F6C445; }
@media (max-width: 1000px) { .d-prikbord .d-kk-rij.d-n4 { grid-template-columns: 1fr 1fr; row-gap: 28px; } }
@media (max-width: 600px) { .d-prikbord .d-kk-rij.d-n4 { grid-template-columns: 1fr; } .d-koelkast.d-prikbord { border-width: 10px; padding: 28px 16px !important; } }
/* Handtekening onder de afsluiter: verschijnt van links naar rechts, alsof hij geschreven wordt */
.d-handtekening { font-family: var(--wp--preset--font-family--hand); font-size: clamp(2.2rem, 4vw, 2.8rem) !important; line-height: 1; color: #2F4F9E; margin: .2rem 0 1rem !important; rotate: -4deg; display: inline-block; position: relative; padding-right: 10px; }
.d-handtekening::after { content: ""; position: absolute; left: 4px; right: 0; bottom: -6px; height: 6px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 8' preserveAspectRatio='none'%3E%3Cpath d='M2 6C30 1 70 1 118 4' fill='none' stroke='%232F4F9E' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }
@supports (animation-timeline: view()) { @media (prefers-reduced-motion: no-preference) {
.d-handtekening { animation: d-schrijf linear both; animation-timeline: view(); animation-range: entry 70% cover 45%; }
@keyframes d-schrijf { from { clip-path: inset(-20% 100% -40% 0); } to { clip-path: inset(-20% 0 -40% 0); } }
} }
.d-ticket-reis.d-ticket-letter .d-ticket-stub { padding-top: 170px !important; }
.d-ticket-reis.d-ticket-letter .d-ticket-stub { justify-content: flex-end; }
.d-ticket-reis.d-ticket-letter .d-stamp { width: 104px; height: 104px; top: 22px; padding: 0 !important; display: grid; place-items: center; }
.d-ticket-reis .d-ticket-main:not(:has(.d-ticket-kompas, .d-ticket-koffie, .d-ticket-camera, .d-ticket-meetlint, .d-ticket-mobiel, .d-ticket-huisje, .d-ticket-bel, .d-ticket-wekker)) h2 { padding-right: 0 !important; }
/* Cijfers als fotostickers: icoontje erboven, scheef, wiebelen bij aanwijzen */
.d-stats-album .d-stat { rotate: -2deg; box-shadow: 0 16px 28px -22px rgba(30,43,69,.6); padding-top: 20px !important; }
.d-stats-album .d-stat:nth-child(even) { rotate: 2deg; }
.d-stats-album .d-stat:hover { animation: d-stat-wiebel .8s ease-in-out 1 !important; }
@keyframes d-stat-wiebel { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(4deg); } 60% { transform: rotate(-3deg); } }
.d-stats-album .d-stat > .d-icon { width: 30px; height: 30px; margin: 0 auto 6px !important; background: var(--ink) !important; display: block; }
@media (prefers-reduced-motion: reduce) { .d-stats-album .d-stat:hover { animation: none !important; } }
.d-was-kop { align-items: flex-end !important; gap: clamp(20px, 4vw, 56px) !important; } .d-was-kop p:is(:not([class]), :where(.d-nb) [class="wp-block-paragraph"]) { max-width: 60ch; }
/* Albumbladzijden: crème blad met foto in fotohoekjes, handgeschreven onderschrift, hele blad klikbaar, hoekje krult om */
.d-album-section h2 { font-size: clamp(1.8rem, 2.8vw, 2.4rem) !important; }
.d-bladen { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 3vw, 36px); margin-top: 1.6rem !important; }
.d-bladen > * { margin: 0 !important; }
.d-blad { position: relative; background: #FFFBF2; padding: 18px 18px 22px !important; border-radius: 4px 4px 4px 4px; box-shadow: 0 18px 30px -22px rgba(30,43,69,.7), inset 0 0 0 1px rgba(155,107,67,.15);
rotate: -1.5deg; transition: rotate .35s cubic-bezier(.25,1.6,.45,1), translate .35s cubic-bezier(.25,1.6,.45,1); }
.d-blad:nth-child(2) { rotate: 1.5deg; } .d-blad:nth-child(3) { rotate: -.6deg; }
.d-blad:hover, .d-blad:focus-within { rotate: 0deg; translate: 0 -6px; }
.d-blad > * { margin: 0 !important; }
.d-blad-foto { position: relative; margin: 0 !important; }
.d-blad-foto img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border: 6px solid #fff; box-shadow: 0 4px 10px -6px rgba(0,0,0,.4); }
.d-blad-foto::before, .d-blad-foto::after { content: ""; position: absolute; width: 26px; height: 26px; background: #2E3138; z-index: 1; }
.d-blad-foto::before { left: -4px; top: -4px; clip-path: polygon(0 0, 100% 0, 0 100%); }
.d-blad-foto::after { right: -4px; bottom: -4px; clip-path: polygon(100% 0, 100% 100%, 0 100%); }
.d-blad-cap { font-family: var(--wp--preset--font-family--hand); font-size: 1.35rem !important; color: #2F4F9E; text-align: center; margin-top: 6px !important; rotate: -2deg; }
.d-blad h3 { font-size: 1.25rem !important; margin-top: 8px !important; }
.d-blad-link { color: inherit !important; text-decoration: none; }
.d-blad-link::after { content: ""; position: absolute; inset: 0; z-index: 2; }
.d-blad-link:focus-visible { outline: none; } .d-blad:has(.d-blad-link:focus-visible) { outline: 3px solid #2F4F9E; outline-offset: 4px; }
.d-blad h3::after { content: " →"; color: #EC8B48; }
.d-blad p:is(:not([class]), :where(.d-nb) [class="wp-block-paragraph"]) { font-size: 15px; line-height: 1.55; margin-top: 4px !important; }
.d-blad::after { content: ""; position: absolute; right: 0; bottom: 0; width: 0; height: 0; background: linear-gradient(135deg, #EADFC9 0 50%, transparent 50%); box-shadow: -3px -3px 6px -3px rgba(0,0,0,.25);
transition: width .3s ease, height .3s ease; border-radius: 0 0 4px 0; }
.d-blad:hover::after, .d-blad:focus-within::after { width: 38px; height: 38px; }
@media (max-width: 900px) { .d-bladen { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .d-bladen { grid-template-columns: 1fr; } }
/* Borduurwerkje: houten borduurring aan een lintje, linnen met kruissteekrand, geborduurde letters, kloppend hartje */
.d-borduur-section { padding-top: calc(var(--wp--preset--spacing--50, 3rem) + 50px) !important; }
.d-borduur-wrap { display: flex; flex-direction: column; align-items: center; text-align: center; }
.d-borduur-wrap > * { margin: 0 !important; }
.d-borduur { position: relative; width: min(340px, 82vw); aspect-ratio: 1; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 48px !important;
background: repeating-linear-gradient(0deg, rgba(155,120,80,.07) 0 1px, transparent 1px 4px), repeating-linear-gradient(90deg, rgba(155,120,80,.07) 0 1px, transparent 1px 4px), #FBF5E9;
border: 12px solid #C9935E; box-shadow: 0 0 0 4px #A8743F, 0 26px 40px -24px rgba(30,43,69,.7), inset 0 0 0 10px #FBF5E9, inset 0 0 0 12px transparent; rotate: -3deg; transform-origin: 50% -40px; }
.d-borduur::before { content: ""; position: absolute; inset: 18px; border-radius: 50%; border: 3px dashed #D9667A; pointer-events: none; }
.d-borduur::after { content: ""; position: absolute; left: 50%; top: -58px; width: 60px; height: 52px; margin-left: -30px; pointer-events: none;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 52'%3E%3Cpath d='M30 52V14' stroke='%23D9667A' stroke-width='5'/%3E%3Cpath d='M30 14c-8-12-24-10-20 0s20 0 20 0c0 0 16 10 20 0S38 2 30 14z' fill='%23D9667A'/%3E%3Crect x='24' y='44' width='12' height='10' rx='2' fill='%23A8743F'/%3E%3C/svg%3E") center / contain no-repeat; }
.d-borduur > * { margin: 0 !important; }
.d-borduur-tekst { font-family: var(--wp--preset--font-family--hand); font-size: clamp(1.9rem, 3.4vw, 2.4rem) !important; line-height: 1.15; color: #2F4F9E; text-wrap: balance;
text-shadow: 1px 1px 0 rgba(255,255,255,.8), -1px -1px 0 rgba(0,0,0,.06); letter-spacing: .02em; }
.d-borduur-hart { width: 34px; height: 30px; margin-top: 12px !important; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 30'%3E%3Cpath d='M17 28S2 19 2 9.5A7.5 7.5 0 0 1 17 6a7.5 7.5 0 0 1 15 3.5C32 19 17 28 17 28z' fill='%23D9667A' stroke='%23B84E62' stroke-width='1.5' stroke-dasharray='2 2'/%3E%3C/svg%3E") center / contain no-repeat; }
@media (prefers-reduced-motion: no-preference) {
.d-borduur-hart { animation: d-hartje 1.6s ease-in-out infinite; }
@keyframes d-hartje { 0%, 100% { scale: 1; } 15% { scale: 1.18; } 30% { scale: 1; } 45% { scale: 1.12; } }
.d-borduur { animation: d-borduur-wieg 7s ease-in-out infinite; }
@keyframes d-borduur-wieg { 0%, 100% { rotate: -3deg; } 50% { rotate: 2deg; } }
}
.d-borduur-wrap .d-handtekening { margin-top: 26px !important; }
.d-borduur-rol { font-size: 14px !important; color: var(--wp--preset--color--grijs); margin-top: 8px !important; }
/* Camera bij de afsluiter: tik = flits, polaroidje springt eruit */
.d-ticket-camera { position: absolute; top: clamp(18px, 3vw, 30px); right: clamp(20px, 3vw, 34px); width: 88px; height: 70px; cursor: pointer;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 88 70'%3E%3Crect x='14' y='4' width='18' height='10' rx='3' fill='%23F6C445'/%3E%3Crect x='62' y='6' width='14' height='8' rx='2' fill='%23EC8B48'/%3E%3Crect x='4' y='12' width='80' height='54' rx='12' fill='%238EAAD5' stroke='%232E3B5E' stroke-width='3'/%3E%3Crect x='4' y='22' width='80' height='8' fill='%23496390' opacity='.5'/%3E%3Ccircle cx='44' cy='40' r='17' fill='%23FFF3C4' stroke='%232E3B5E' stroke-width='3'/%3E%3Ccircle cx='44' cy='40' r='10' fill='%23496390'/%3E%3Ccircle cx='40' cy='36' r='3' fill='%23fff'/%3E%3Ccircle cx='16' cy='46' r='3' fill='%23F2B7C4'/%3E%3Ccircle cx='72' cy='46' r='3' fill='%23F2B7C4'/%3E%3C/svg%3E") center / contain no-repeat; }
.d-cam-pola { position: absolute; left: 50%; top: 10px; width: 34px; height: 40px; margin-left: -17px; background: #fff; border: 2px solid #E3E7DC; border-bottom-width: 9px; box-shadow: 0 6px 10px -6px rgba(0,0,0,.4); z-index: -1; opacity: 0; transition: translate .5s cubic-bezier(.25,1.6,.45,1), opacity .2s; }
.d-cam-pola::before { content: ""; position: absolute; inset: 3px; background: linear-gradient(160deg, #A9C27F, #8EAAD5); }
.d-cam-flits { position: absolute; inset: -30px; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.95), rgba(255,243,196,0) 65%); opacity: 0; pointer-events: none; }
.d-ticket-camera.is-flits .d-cam-flits { animation: d-cam-flits .5s ease-out 1; }
@keyframes d-cam-flits { 0% { opacity: 0; } 15% { opacity: 1; } 100% { opacity: 0; } }
.d-ticket-camera.is-flits .d-cam-pola { opacity: 1; translate: 0 -40px; rotate: -8deg; }
@media (max-width: 781px) { .d-ticket-camera { width: 66px; height: 54px; } }
/* Groeimeter: drie kaarten steeds hoger tegen een meetlat, label bovenop als streepje, groeien omhoog bij scrollen; hele kaart klikbaar */
.d-gm-section h2 { font-size: clamp(1.8rem, 2.8vw, 2.4rem) !important; }
.d-gm { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); align-items: end; gap: clamp(16px, 2.6vw, 30px); padding: 40px 70px 0 0 !important; margin-top: 1rem !important; }
.d-gm > * { margin: 0 !important; }
.d-gm-kaart { --gmk: #496390; position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; padding: 22px 20px 22px !important; border-radius: 22px 22px 10px 10px; box-shadow: 0 18px 28px -22px rgba(30,43,69,.7); transform-origin: 50% 100%; transition: translate .35s cubic-bezier(.25,1.6,.45,1); }
.d-gm-kaart > * { margin: 0 !important; }
.d-gm-kaart:nth-child(1) { min-height: 230px; } .d-gm-kaart:nth-child(2) { min-height: 290px; } .d-gm-kaart:nth-child(3) { min-height: 350px; }
.d-gm-kaart.d-tint-orange { --gmk: #C8661F; } .d-gm-kaart.d-tint-yellow { --gmk: #8A6A12; } .d-gm-kaart.d-tint-green { --gmk: #5E8A3A; }
.d-gm-kaart:hover, .d-gm-kaart:focus-within { translate: 0 -6px; }
.d-gm-kaart .d-icon { width: 30px; height: 30px; background: var(--gmk) !important; margin-bottom: 4px !important; }
.d-gm-kaart h3 { font-size: 1.3rem !important; }
.d-gm-kaart h3::after { content: " →"; color: #EC8B48; }
.d-gm-kaart p:is(:not([class]), :where(.d-nb) [class="wp-block-paragraph"]) { font-size: 15px; line-height: 1.55; }
.d-gm-label { position: absolute !important; left: 50%; top: -16px; translate: -50% 0; padding: 4px 14px !important; border-radius: 999px; background: #fff; border: 2px solid var(--gmk);
font-family: var(--wp--preset--font-family--hand); font-size: 1.25rem !important; color: var(--gmk); white-space: nowrap; box-shadow: 0 6px 10px -6px rgba(30,43,69,.5); }
.d-gm-label::before { content: ""; position: absolute; top: 50%; left: 100%; width: 400px; border-top: 2px dashed rgba(46,59,94,.25); pointer-events: none; }
.d-gm-kaart:nth-child(3) .d-gm-label::before { width: 60px; }
.d-meetlat { position: absolute !important; right: 0; bottom: 0; width: 46px; height: calc(100% + 10px); border-radius: 10px 10px 4px 4px; background: #F6C445; box-shadow: 0 10px 18px -12px rgba(30,43,69,.6);
background-image: repeating-linear-gradient(0deg, transparent 0 18px, #8A6A12 18px 20px), repeating-linear-gradient(0deg, transparent 0 9px, rgba(138,106,18,.6) 9px 10px);
background-size: 22px 100%, 12px 100%; background-repeat: no-repeat; background-position: left bottom, left bottom; }
@supports (animation-timeline: view()) { @media (prefers-reduced-motion: no-preference) {
.d-gm-kaart { animation: d-gm-groei linear both; animation-timeline: view(); animation-range: entry 40% cover 35%; }
.d-gm-kaart:nth-child(2) { animation-range: entry 55% cover 42%; } .d-gm-kaart:nth-child(3) { animation-range: entry 70% cover 50%; }
@keyframes d-gm-groei { from { clip-path: inset(62% -20px -40px -20px); } to { clip-path: inset(-40px -20px -40px -20px); } }
} }
@media (max-width: 781px) {
.d-gm { grid-template-columns: 1fr; padding-right: 0 !important; row-gap: 30px; }
.d-gm-kaart:nth-child(n) { min-height: 0; } .d-gm-label::before { display: none; } .d-meetlat { display: none; }
}
/* Meetlint bij de afsluiter: rolmetertje waar een lintje met centimeterstreepjes uitrolt */
.d-ticket-meetlint { position: absolute; top: clamp(22px, 3vw, 34px); right: clamp(20px, 3vw, 34px); width: 64px; height: 64px; }
.d-ml-doos { position: absolute; right: 0; top: 0; width: 64px; height: 64px; border-radius: 50%; background: radial-gradient(circle, #2E3B5E 0 7px, #F6C445 8px 22px, #E0A82E 23px 100%); box-shadow: 0 8px 14px -8px rgba(30,43,69,.6), inset 0 0 0 3px #C8961E; z-index: 1; }
.d-ml-lint { position: absolute; right: 40px; top: 40px; height: 20px; width: 170px; border-radius: 3px 0 0 3px; transform-origin: 100% 50%;
background: repeating-linear-gradient(90deg, #2E3B5E 0 2px, transparent 2px 17px) left top / 100% 9px no-repeat, repeating-linear-gradient(90deg, rgba(46,59,94,.55) 0 1px, transparent 1px 8.5px) left top / 100% 5px no-repeat, #FFE08A;
box-shadow: 0 4px 8px -4px rgba(30,43,69,.45); }
.d-ml-lint::before { content: ""; position: absolute; left: -6px; top: -3px; width: 8px; height: 26px; border-radius: 2px; background: #9AA0A8; }
@supports (animation-timeline: view()) { @media (prefers-reduced-motion: no-preference) {
.d-ml-lint { animation: d-ml-uit linear both; animation-timeline: view(); animation-range: entry 60% cover 45%; }
@keyframes d-ml-uit { from { scale: 0 1; } to { scale: 1 1; } }
.d-ml-doos { animation: d-ml-draai linear both; animation-timeline: view(); animation-range: entry 60% cover 45%; }
@keyframes d-ml-draai { from { rotate: 0deg; } to { rotate: -540deg; } }
} }
@media (max-width: 781px) { .d-ticket-meetlint { width: 48px; height: 48px; } .d-ml-doos { width: 48px; height: 48px; } .d-ml-lint { width: 110px; right: 30px; top: 30px; height: 16px; } }
.d-ticket-reis .d-ticket-stub { justify-content: flex-end; padding-top: max(150px, 12vw) !important; }
.d-ticket-reis.d-ticket-ticket .d-ticket-stub { padding-top: 198px !important; }
/* Sterrenhemel: donkerblauwe band met twinkelende sterren en een maantje; stickers worden zachte wolkjes */
.d-band-nacht { --band: #2E3B5E; }
.d-nacht { position: relative; overflow-x: clip; overflow-y: visible; }
.d-nacht h2, .d-nacht .d-eyebrow { color: #FFF6D8 !important; position: relative; z-index: 1; }
.d-nacht .d-squiggle { text-decoration-color: #F6C445; }
.d-nacht .d-stickers, .d-nacht .d-banner { position: relative; z-index: 1; }
.d-nacht .d-stickers::before { content: ""; position: absolute; inset: -140px -6vw -40px; pointer-events: none; z-index: -1;
background: radial-gradient(circle, #FFF6D8 0 1.5px, transparent 2.5px) 0 0 / 90px 70px, radial-gradient(circle, #F6C445 0 2px, transparent 3px) 40px 30px / 150px 110px, radial-gradient(circle, #fff 0 1px, transparent 2px) 20px 50px / 60px 90px; opacity: .8; }
@media (prefers-reduced-motion: no-preference) { .d-nacht .d-stickers::before { animation: d-twinkel 3.5s ease-in-out infinite; } @keyframes d-twinkel { 0%, 100% { opacity: .85; } 50% { opacity: .35; } } }
.d-maantje { position: absolute !important; right: max(30px, calc((100% - 1200px) / 2 + 20px)); top: 34px; width: 78px; height: 78px; margin: 0 !important; border-radius: 50%; z-index: 1;
box-shadow: inset -16px 6px 0 0 #F6C445, 0 0 40px rgba(246,196,69,.35); rotate: -20deg; }
@media (prefers-reduced-motion: no-preference) { .d-maantje { animation: d-maan 6s ease-in-out infinite; } @keyframes d-maan { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } } }
.d-nacht .d-sticker { --kleur: #FFFFFF; background: #FFFFFF !important; border-radius: 40px 40px 40px 40px; padding-top: 34px !important; overflow: visible; box-shadow: 0 20px 34px -24px rgba(0,0,0,.6); }
.d-nacht .d-sticker::after { content: ""; position: absolute; left: 18%; top: -26px; width: 64%; height: 52px; border-radius: 50px 50px 0 0; background: radial-gradient(circle at 25% 100%, #fff 0 26px, transparent 27px), radial-gradient(circle at 60% 90%, #fff 0 34px, transparent 35px), radial-gradient(circle at 88% 100%, #fff 0 22px, transparent 23px); z-index: 0; }
.d-nacht .d-sticker::before { background: #EEF2FA; }
.d-nacht .d-sticker .d-sticker-icon { background-color: #496390 !important; }
.d-nacht .d-banner-onder { margin-top: 2.2rem !important; }
@media (max-width: 781px) { .d-maantje { width: 54px; height: 54px; top: 22px; right: 18px; } }
/* Babymobiel bij de afsluiter: stokje met maantje en sterretjes dat zachtjes draait; tik = schommelen */
.d-ticket-mobiel { position: absolute; top: 0; right: clamp(24px, 3vw, 40px); width: 110px; height: 110px; cursor: pointer; transform-origin: 50% 0; }
.d-mob-stok { position: absolute; left: 50%; top: 0; width: 2px; height: 22px; background: #9B6B43; }
.d-mob-stok::after { content: ""; position: absolute; left: -49px; top: 22px; width: 100px; height: 4px; border-radius: 2px; background: #9B6B43; }
.d-mob { position: absolute; top: 26px; width: 26px; height: 26px; transform-origin: 50% -20px; }
.d-mob::before { content: ""; position: absolute; left: 50%; top: -20px; width: 1.5px; height: 20px; background: rgba(46,59,94,.5); }
.d-mob-1 { left: 4px; top: 46px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26'%3E%3Cpath d='M13 1l3 8 9 1-7 6 2 9-7-5-7 5 2-9-7-6 9-1z' fill='%23F6C445'/%3E%3C/svg%3E") center / contain no-repeat; }
.d-mob-2 { left: 42px; top: 56px; width: 28px; height: 28px; border-radius: 50%; box-shadow: inset -7px 3px 0 0 #8EAAD5; rotate: -25deg; }
.d-mob-3 { right: 4px; top: 42px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26'%3E%3Cpath d='M13 24S2 17 2 9.5A5.5 5.5 0 0 1 13 7a5.5 5.5 0 0 1 11 2.5C24 17 13 24 13 24z' fill='%23F2B7C4'/%3E%3C/svg%3E") center / contain no-repeat; }
.d-mob-1::before, .d-mob-3::before { height: 20px; } .d-mob-2::before { top: -30px; height: 30px; }
@media (prefers-reduced-motion: no-preference) {
.d-ticket-mobiel { animation: d-mob-draai 6s ease-in-out infinite; }
@keyframes d-mob-draai { 0%, 100% { rotate: -4deg; } 50% { rotate: 4deg; } }
.d-mob { animation: d-mob-hang 3s ease-in-out infinite; } .d-mob-2 { animation-delay: -1s; } .d-mob-3 { animation-delay: -2s; }
@keyframes d-mob-hang { 0%, 100% { translate: 0 0; } 50% { translate: 0 4px; } }
}
.d-ticket-mobiel.is-wiebel { animation: d-mob-schommel 1.2s ease-out 1 !important; }
@keyframes d-mob-schommel { 0% { rotate: 0; } 20% { rotate: 14deg; } 45% { rotate: -10deg; } 70% { rotate: 5deg; } 100% { rotate: 0; } }
.d-ticket-reis .d-ticket-main:has(.d-ticket-mobiel) h2 { padding-right: 110px; }
@media (max-width: 781px) { .d-ticket-mobiel { scale: .8; transform-origin: 100% 0; } }
/* Huisje met rokende schoorsteen bij de afsluiter */
.d-ticket-huisje { position: absolute; top: clamp(24px, 3vw, 36px); right: clamp(22px, 3vw, 36px); width: 76px; height: 72px;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 76 72'%3E%3Crect x='50' y='6' width='10' height='20' fill='%239B6B43'/%3E%3Cpath d='M4 34L38 6l34 28z' fill='%23EC8B48'/%3E%3Crect x='12' y='32' width='52' height='40' rx='3' fill='%23FFF3C4' stroke='%232E3B5E' stroke-width='2.5'/%3E%3Crect x='32' y='48' width='13' height='24' rx='6' fill='%23496390'/%3E%3Crect x='17' y='40' width='11' height='11' rx='2' fill='%238EAAD5'/%3E%3Crect x='49' y='40' width='11' height='11' rx='2' fill='%238EAAD5'/%3E%3C/svg%3E") center bottom / contain no-repeat; }
.d-rook { position: absolute; left: 52px; top: -2px; width: 12px; height: 12px; border-radius: 50%; background: rgba(255,255,255,.95); box-shadow: 0 0 0 2px rgba(46,59,94,.12); opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
.d-rook { animation: d-rook 3.6s ease-out infinite; } .d-rook-2 { animation-delay: 1.2s; } .d-rook-3 { animation-delay: 2.4s; }
@keyframes d-rook { 0% { opacity: 0; translate: 0 0; scale: .5; } 20% { opacity: 1; } 100% { opacity: 0; translate: 14px -40px; scale: 1.6; } }
}
@media (prefers-reduced-motion: reduce) { .d-rook-1 { opacity: .9; } }
@media (max-width: 781px) { .d-ticket-huisje { width: 58px; height: 56px; } .d-rook { left: 40px; } }
/* Prikbord met één losse melding onderaan: over de volle breedte */
.d-prikbord .d-kk-onder:has(> :only-child) { grid-template-columns: 1fr; }
.d-prikbord .d-kk-grens { --kleur: #FCE3D1; --tint: #C8661F; }
/* Fotomuur met zes lijstjes: iets kleiner zodat ze op een laptop naast elkaar passen */
.d-fotomuur:has(> :nth-child(6)) .d-lijstje { width: clamp(130px, 12.5vw, 172px); }
/* Schoolbel bij de afsluiter: tik = rinkelen + 'Tring!' */
.d-ticket-bel { position: absolute; top: clamp(20px, 3vw, 32px); right: clamp(22px, 3vw, 36px); width: 64px; height: 70px; cursor: pointer; transform-origin: 50% 8px;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 70'%3E%3Crect x='28' y='0' width='8' height='12' rx='3' fill='%239B6B43'/%3E%3Cpath d='M32 10c-14 0-20 12-20 26v12L6 56h52l-6-8V36c0-14-6-26-20-26z' fill='%23F6C445' stroke='%23C8961E' stroke-width='2.5'/%3E%3Cpath d='M18 30c2-8 6-12 12-13' stroke='%23fff' stroke-width='3' stroke-linecap='round' fill='none' opacity='.7'/%3E%3Ccircle cx='32' cy='62' r='6' fill='%239B6B43'/%3E%3C/svg%3E") center / contain no-repeat; }
.d-bel-tring { position: absolute; right: 64px; top: -6px; font-family: var(--wp--preset--font-family--hand); font-size: 1.4rem; color: #C8661F; opacity: 0; rotate: -12deg; pointer-events: none; white-space: nowrap; }
.d-ticket-bel.is-tring { animation: d-bel 0.8s ease-in-out 1; }
.d-ticket-bel.is-tring .d-bel-tring { animation: d-tring 1.1s ease-out 1; }
@keyframes d-bel { 0%, 100% { rotate: 0; } 15% { rotate: 18deg; } 30% { rotate: -16deg; } 45% { rotate: 12deg; } 60% { rotate: -8deg; } 75% { rotate: 4deg; } }
@keyframes d-tring { 0% { opacity: 0; translate: 10px 6px; } 25% { opacity: 1; } 100% { opacity: 0; translate: -8px -16px; } }
@media (prefers-reduced-motion: no-preference) { .d-ticket-bel:not(.is-tring) { animation: d-bel-wacht 5s ease-in-out infinite; } @keyframes d-bel-wacht { 0%, 88%, 100% { rotate: 0; } 91% { rotate: 8deg; } 94% { rotate: -6deg; } 97% { rotate: 3deg; } } }
@media (max-width: 781px) { .d-ticket-bel { width: 50px; height: 56px; } }
.d-board-hangt:not(:has(.d-board-knoprij)) .d-krijt-hart { left: auto; right: 26px; }
/* Klok met tijden: tik een tijd aan en de wijzers draaien mee (geen scroll-animatie) */
.d-klok-tijden .d-clock-hand { animation: none !important; }
.d-klok-tijden .d-clock { width: min(320px, 74vw); }
.d-klok-tijden .d-clocklist li { border-radius: 14px; }
.d-klok-tijden .d-clocklist li.is-nu { background: #fff !important; box-shadow: 0 10px 18px -14px rgba(30,43,69,.6); }
.d-klok-tijden h2 { font-size: clamp(1.8rem, 2.8vw, 2.4rem) !important; }
/* Stickers als knutselwerkjes met plakbandjes */
.d-stickers-tape .d-sticker { overflow: visible; }
.d-stickers-tape .d-sticker::after { content: ""; position: absolute; left: 50%; top: -12px; width: 86px; height: 24px; margin-left: -43px; background: rgba(246,196,69,.75); rotate: -4deg; z-index: 2;
-webkit-mask: linear-gradient(90deg, transparent 0 3px, #000 3px calc(100% - 3px), transparent calc(100% - 3px)); }
.d-stickers-tape .d-sticker:nth-child(2)::after { background: rgba(142,170,213,.8); rotate: 5deg; }
.d-stickers-tape .d-sticker:nth-child(3)::after { background: rgba(242,183,196,.85); rotate: -2deg; }
.d-stickers-tape .d-sticker:nth-child(4)::after { background: rgba(169,194,127,.85); rotate: 3deg; }
.d-route-section .d-banner-onder { margin-top: 2rem !important; position: relative; z-index: 1; }
/* Wekker: zelfde gedrag als de schoolbel, ander plaatje */
.d-ticket-bel.d-ticket-wekker { width: 70px; height: 74px; transform-origin: 50% 60%;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 70 74'%3E%3Ccircle cx='14' cy='12' r='10' fill='%23EC8B48'/%3E%3Ccircle cx='56' cy='12' r='10' fill='%23EC8B48'/%3E%3Cpath d='M16 66l-6 6M54 66l6 6' stroke='%232E3B5E' stroke-width='4' stroke-linecap='round'/%3E%3Ccircle cx='35' cy='40' r='28' fill='%23fff' stroke='%23EC8B48' stroke-width='6'/%3E%3Cpath d='M35 40V24M35 40l10 6' stroke='%232E3B5E' stroke-width='4' stroke-linecap='round'/%3E%3Ccircle cx='35' cy='40' r='3' fill='%232E3B5E'/%3E%3C/svg%3E"); }
/* ===== Voeding en verzorging: eigen bouwstenen ===== */
/* Picknickkleed met bordjes */
.d-kleed-section { position: relative; background: repeating-linear-gradient(0deg, rgba(216,84,84,.18) 0 22px, transparent 22px 44px), repeating-linear-gradient(90deg, rgba(216,84,84,.18) 0 22px, transparent 22px 44px), #FFF8F0 !important; padding-block: clamp(2.6rem, 6vw, 4rem) !important; }
.d-kleed-section h2, .d-kleed-section .d-eyebrow { position: relative; display: inline-block; background: #FFF8F0; padding: 2px 12px !important; border-radius: 10px; }
.d-kleed-section h2 { display: table; margin-top: 6px !important; font-size: clamp(1.8rem, 2.8vw, 2.4rem) !important; }
.d-borden { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 3vw, 40px); margin-top: 2rem !important; }
.d-borden > * { margin: 0 !important; }
.d-bord { aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, #fff 0 60%, #F3F1EA 61% 64%, #fff 65%); box-shadow: 0 18px 30px -18px rgba(30,43,69,.6), inset 0 0 0 2px #E8E3D6;
display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 14% !important; transition: rotate .4s cubic-bezier(.25,1.6,.45,1); }
.d-bord > * { margin: 0 !important; }
.d-bord:nth-child(1) { rotate: -4deg; } .d-bord:nth-child(3) { rotate: 3deg; }
.d-bord:hover { animation: d-bord-wiebel .8s ease-in-out 1; }
@keyframes d-bord-wiebel { 0%, 100% { transform: rotate(0); } 30% { transform: rotate(8deg); } 65% { transform: rotate(-5deg); } }
.d-bord .d-icon { width: 34px; height: 34px; background: #D85454 !important; margin-bottom: 6px !important; }
.d-bord h3 { font-size: 1.15rem !important; margin-bottom: 6px !important; }
.d-bord p { font-size: 14px; line-height: 1.5; max-width: 26ch; }
@media (max-width: 900px) { .d-borden { grid-template-columns: 1fr; max-width: 360px; margin-inline: auto !important; } }
/* Dienblad met tabjes en getekend eten */
.d-dienblad-section h2 { font-size: clamp(1.8rem, 2.8vw, 2.4rem) !important; }
.d-dienblad.is-tabs { grid-template-columns: 1fr; max-width: 900px; margin: 1.4rem auto 0 !important; gap: 0; }
.d-dienblad .d-tab-knoppen { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: -6px !important; position: relative; z-index: 2; }
.d-dienblad .d-tab-knop { width: auto; padding: 10px 16px; border-radius: 14px 14px 6px 6px; background: #fff; border: 2px solid #C9D3E6; font-weight: 600; font-size: 15px; }
.d-dienblad .d-tab-knop[aria-selected="true"] { background: #F6C445; border-color: #E0A82E; translate: 0 -4px; }
.d-blad-paneel { display: none !important; background: #B98A5E !important; border-radius: 28px; padding: 28px !important; box-shadow: inset 0 0 0 10px #A8774A, 0 24px 40px -26px rgba(30,43,69,.8); grid-template-columns: 220px 1fr; gap: 26px; align-items: center; }
.d-dienblad:not(.is-tabs) .d-blad-paneel, .d-blad-paneel.is-actief { display: grid !important; }
.d-blad-paneel > .d-icon, .d-blad-paneel > .d-tab-label { display: none; }
.d-blad-paneel p:is(:not([class]), :where(.d-nb) [class="wp-block-paragraph"]) { background: #FFFDF7; border-radius: 18px; padding: 18px 20px !important; font-size: 16px; color: #2E3138; margin: 0 !important; box-shadow: 0 10px 18px -14px rgba(0,0,0,.5); }
.d-eten { width: 200px; aspect-ratio: 1; margin: 0 auto !important; border-radius: 50%; background-color: #fff; background-repeat: no-repeat; background-position: center; background-size: 62%; box-shadow: inset 0 0 0 10px #F1EEE6, 0 10px 18px -10px rgba(0,0,0,.45); }
.d-blad-paneel.is-actief .d-eten { animation: d-eten-op .5s cubic-bezier(.25,1.6,.45,1) 1; }
@keyframes d-eten-op { from { scale: .6; rotate: -20deg; } }
.d-eten-appel { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 30c-6-10-30-8-30 20 0 22 14 38 22 38 4 0 6-2 8-2s4 2 8 2c8 0 22-16 22-38 0-28-24-30-30-20z' fill='%23D85454'/%3E%3Cpath d='M50 30c0-8 2-14 8-18' stroke='%239B6B43' stroke-width='4' fill='none' stroke-linecap='round'/%3E%3Cpath d='M54 20c8-6 18-4 20 0-6 6-14 6-20 0z' fill='%23729A47'/%3E%3Cpath d='M34 44c2-6 6-8 10-8' stroke='%23fff' stroke-width='4' stroke-linecap='round' opacity='.6' fill='none'/%3E%3C/svg%3E"); }
.d-eten-boterham { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M18 40c0-16 14-24 32-24s32 8 32 24c0 6-4 8-6 8v34H24V48c-2 0-6-2-6-8z' fill='%23C98A4B'/%3E%3Cpath d='M24 44c0-12 10-18 26-18s26 6 26 18v34H24z' fill='%23F3D9A4'/%3E%3Ccircle cx='40' cy='54' r='8' fill='%23729A47'/%3E%3Ccircle cx='40' cy='54' r='4' fill='%23A9C27F'/%3E%3Ccircle cx='60' cy='62' r='8' fill='%23729A47'/%3E%3Ccircle cx='60' cy='62' r='4' fill='%23A9C27F'/%3E%3C/svg%3E"); }
.d-eten-groente { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M30 74L62 30c4-4 10 0 8 6L40 80c-4 4-12 0-10-6z' fill='%23EC8B48'/%3E%3Cpath d='M64 30c2-10 10-12 14-10-2 4-8 8-14 10zM64 30c8-4 14 0 14 4-6 2-10 0-14-4z' fill='%23729A47'/%3E%3Ccircle cx='68' cy='66' r='12' fill='%23D85454'/%3E%3Cpath d='M64 55c2-3 6-3 8 0' stroke='%23729A47' stroke-width='3' fill='none'/%3E%3Ccircle cx='30' cy='38' r='10' fill='%23D85454'/%3E%3Cpath d='M26 28c2-3 6-3 8 0' stroke='%23729A47' stroke-width='3' fill='none'/%3E%3C/svg%3E"); }
.d-eten-ijsje { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Crect x='46' y='62' width='8' height='26' rx='3' fill='%23D9B48A'/%3E%3Cpath d='M32 30c0-12 8-18 18-18s18 6 18 18v32c0 4-2 6-6 6H38c-4 0-6-2-6-6z' fill='%23F2B7C4'/%3E%3Cpath d='M32 44h36v10H32z' fill='%23F6C445'/%3E%3Cpath d='M40 22c2-4 6-6 10-6' stroke='%23fff' stroke-width='4' stroke-linecap='round' opacity='.7' fill='none'/%3E%3C/svg%3E"); }
.d-eten-taart { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Crect x='20' y='50' width='60' height='30' rx='6' fill='%23F9D2B6'/%3E%3Cpath d='M20 56c10 6 20 6 30 0s20-6 30 0V50H20z' fill='%23fff'/%3E%3Crect x='47' y='28' width='6' height='22' rx='2' fill='%238EAAD5'/%3E%3Cpath d='M50 16c4 6 4 10 0 12-4-2-4-6 0-12z' fill='%23F6C445'/%3E%3Ccircle cx='32' cy='66' r='3' fill='%23D85454'/%3E%3Ccircle cx='50' cy='70' r='3' fill='%23729A47'/%3E%3Ccircle cx='68' cy='66' r='3' fill='%238EAAD5'/%3E%3C/svg%3E"); }
@media (max-width: 700px) { .d-blad-paneel { grid-template-columns: 1fr; } .d-eten { width: 150px; } .d-dienblad .d-tab-knop { padding: 8px 12px; font-size: 14px; } }
/* Boterham smeren: kies je beleg */
.d-boterham-section h2 { font-size: clamp(1.8rem, 2.8vw, 2.4rem) !important; }
.d-boterham { --beleg: #F2D27A; display: flex; flex-direction: column; align-items: center; gap: 18px; }
.d-bh-brood { position: relative; width: min(260px, 70vw); aspect-ratio: 1 / .95; border-radius: 42% 42% 12% 12% / 34% 34% 10% 10%; background: #C98A4B; box-shadow: 0 20px 30px -20px rgba(30,43,69,.7); rotate: -4deg; }
.d-bh-brood::before { content: ""; position: absolute; inset: 14px; border-radius: inherit; background: radial-gradient(circle at 30% 40%, rgba(201,138,75,.35) 0 2px, transparent 3px) 0 0 / 22px 18px, #F3D9A4; }
.d-bh-beleg { position: absolute; inset: 30px 26px 26px; border-radius: 40% 40% 14% 14% / 32% 32% 12% 12%; background: var(--beleg); opacity: .92; transition: background .5s ease, clip-path .6s ease; clip-path: inset(0 0 0 0); }
.d-boterham.is-smeren .d-bh-beleg { animation: d-smeer .7s ease-out 1; }
@keyframes d-smeer { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.d-bh-mes { position: absolute; right: -40px; top: 34%; width: 110px; height: 18px; border-radius: 4px 40px 40px 4px; background: linear-gradient(90deg, #8A8F99 0 44%, #D5DBE5 44%); rotate: -24deg; box-shadow: 0 6px 8px -4px rgba(0,0,0,.35); transform-origin: 20% 50%; }
.d-boterham.is-smeren .d-bh-mes { animation: d-mes .7s ease-in-out 1; }
@keyframes d-mes { 0% { translate: 0 0; } 35% { translate: -90px 20px; } 70% { translate: -30px 40px; } 100% { translate: 0 0; } }
.d-beleg-knoppen { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.d-beleg-knop { cursor: pointer; padding: 8px 14px; border-radius: 999px; background: #fff; border: 2px solid var(--beleg); font: 600 14.5px var(--wp--preset--font-family--zonder-schreef, sans-serif); color: #2E3138; transition: translate .25s; }
.d-beleg-knop:hover { translate: 0 -3px; }
.d-beleg-knop[aria-pressed="true"] { background: var(--beleg); color: #fff; }
.d-beleg-knop[data-beleg="0"][aria-pressed="true"] { color: #2E3138; }
.d-boterham-section .d-hand-note { text-align: center; }
@media (prefers-reduced-motion: reduce) { .d-boterham.is-smeren .d-bh-beleg, .d-boterham.is-smeren .d-bh-mes { animation: none; } }
/* Verzorgingskastje met laatjes */
.d-laatjes-section h2 { font-size: clamp(1.8rem, 2.8vw, 2.4rem) !important; }
.d-kastje { position: relative; max-width: 560px; margin-inline: auto; padding-top: 30px; }
.d-kastje-bord { position: absolute; left: 50%; top: 0; translate: -50% 0; z-index: 2; background: #fff; border: 2px solid #9B6B43; border-radius: 10px; padding: 4px 16px; font-family: var(--wp--preset--font-family--hand); font-size: 1.4rem; color: #9B6B43; rotate: -3deg; }
.d-kastje-romp { background: #F3E4CC; border: 10px solid #D9B48A; border-radius: 18px; padding: 14px; display: grid; gap: 12px; box-shadow: 0 26px 40px -26px rgba(30,43,69,.8); }
.d-kastje-poten { height: 18px; margin: 0 34px; background: linear-gradient(90deg, #B98A5E 0 22px, transparent 22px calc(100% - 22px), #B98A5E calc(100% - 22px)); border-radius: 0 0 6px 6px; }
.d-laatje { background: #FFFDF7; border-radius: 10px; box-shadow: inset 0 -4px 0 rgba(155,107,67,.15), 0 4px 8px -6px rgba(0,0,0,.4); overflow: hidden; }
.d-laatje summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 12px; padding: 16px 18px; font-weight: 600; font-size: 16px; }
.d-laatje summary::-webkit-details-marker { display: none; }
.d-laatje summary .d-icon { width: 24px; height: 24px; flex: none; margin: 0 !important; background: #5E8A3A !important; }
.d-laatje-vraag { flex: 1; }
.d-laatje-knop { width: 36px; height: 14px; border-radius: 8px; background: #B98A5E; box-shadow: inset 0 -3px 0 rgba(0,0,0,.2); flex: none; transition: rotate .3s; }
.d-laatje[open] { box-shadow: inset 0 -4px 0 rgba(155,107,67,.15), 0 12px 20px -12px rgba(0,0,0,.5); }
.d-laatje[open] summary { background: #FFF3C4; }
.d-laatje[open] .d-laatje-knop { rotate: 0deg; background: #EC8B48; }
.d-laatje-in { padding: 4px 20px 18px 54px; }
.d-laatje-in p { margin: 0 !important; font-size: 15.5px; line-height: 1.6; }
@media (prefers-reduced-motion: no-preference) { .d-laatje[open] .d-laatje-in { animation: d-la-uit .35s ease-out 1; } @keyframes d-la-uit { from { opacity: 0; translate: 0 -8px; } } }
.d-laatje summary:focus-visible { outline: 3px solid #2F4F9E; outline-offset: -3px; }
/* Receptkaart */
.d-recept-section { text-align: center; }
.d-recept-section h2 { font-size: clamp(1.8rem, 2.8vw, 2.4rem) !important; }
.d-recept { position: relative; max-width: 760px; margin: 1.6rem auto 0 !important; text-align: left; background: #FFFDF7; border-radius: 6px; padding: 34px 40px 30px !important; rotate: -1deg;
background-image: repeating-linear-gradient(180deg, transparent 0 31px, rgba(142,170,213,.35) 31px 32px); box-shadow: 0 24px 40px -28px rgba(30,43,69,.8); border-top: 26px solid #D85454; }
.d-recept::before { content: ""; position: absolute; left: 0; right: 0; top: -26px; height: 26px; background: repeating-linear-gradient(90deg, #fff 0 13px, transparent 13px 26px); opacity: .5; }
.d-recept > * { margin: 0 !important; }
.d-recept-kop { font-family: var(--wp--preset--font-family--hand); font-size: 1.6rem !important; color: #D85454; margin-top: 6px !important; }
.d-recept-lijst { list-style: none; padding: 0 !important; display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 6px 0 14px !important; }
.d-recept-lijst li { position: relative; padding-left: 26px; font-weight: 600; }
.d-recept-lijst li::before { content: ""; position: absolute; left: 0; top: 4px; width: 16px; height: 16px; border: 2px solid #5E8A3A; border-radius: 4px; }
.d-recept-lijst li::after { content: ""; position: absolute; left: 5px; top: 5px; width: 5px; height: 10px; border: solid #5E8A3A; border-width: 0 3px 3px 0; rotate: 40deg; }
.d-recept > p:is(:not([class]), :where(.d-nb) [class="wp-block-paragraph"]) { font-size: 16px; line-height: 2; margin-top: 4px !important; }
.d-recept-briefje { margin: 22px 0 0 auto !important; max-width: 420px; background: #FFF3C4; padding: 16px 20px !important; rotate: 2.5deg; box-shadow: 0 12px 18px -12px rgba(0,0,0,.5); position: relative; }
.d-recept-briefje::before { content: ""; position: absolute; left: 50%; top: -10px; width: 70px; height: 20px; margin-left: -35px; background: rgba(142,170,213,.75); rotate: -3deg; }
.d-recept-briefje > * { margin: 0 !important; }
.d-recept-quote { font-family: var(--wp--preset--font-family--hand); font-size: 1.35rem !important; line-height: 1.3; color: #2E3B5E; }
.d-recept-wie { text-align: right; font-size: 14px !important; color: #6B6F78; margin-top: 6px !important; }
@media (max-width: 600px) { .d-recept { padding: 26px 20px 22px !important; } }
/* Placemat-afsluiter */
.d-placemat { position: relative; max-width: 1040px; margin-inline: auto; display: grid; grid-template-columns: 1fr minmax(0, 1.6fr) 1fr; align-items: center; gap: clamp(14px, 3vw, 36px); padding: clamp(26px, 4vw, 48px) !important; border-radius: 30px;
background: repeating-linear-gradient(0deg, rgba(142,170,213,.25) 0 18px, transparent 18px 36px), repeating-linear-gradient(90deg, rgba(142,170,213,.25) 0 18px, transparent 18px 36px), #F7FAFF; box-shadow: 0 30px 50px -36px rgba(30,43,69,.8); }
.d-pm-bord { aspect-ratio: 1; max-width: 420px; margin-inline: auto; border-radius: 50%; background: radial-gradient(circle, #fff 0 64%, #F1EEE6 65% 68%, #fff 69%); box-shadow: 0 20px 30px -18px rgba(30,43,69,.6);
display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 12% !important; }
.d-pm-bord > * { margin: 0 0 .5rem !important; }
.d-pm-bord h2 { font-size: clamp(1.6rem, 2.6vw, 2.2rem) !important; line-height: 1.15; }
.d-pm-bord p:is(:not([class]), :where(.d-nb) [class="wp-block-paragraph"]) { font-size: 15px; line-height: 1.5; max-width: 30ch; }
.d-pm-knop { display: inline-block; margin-top: 6px; padding: 12px 22px; border-radius: 999px; background: #2E3B5E; color: #fff !important; font-weight: 600; text-decoration: none; }
.d-pm-knop:hover { background: #496390; }
.d-pm-bestek { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; text-decoration: none; color: #2E3B5E !important; padding-top: 150px; transition: translate .3s cubic-bezier(.25,1.6,.45,1); }
.d-pm-bestek:hover { translate: 0 -6px; }
.d-pm-bestek::before { content: ""; position: absolute; top: 0; left: 50%; width: 34px; height: 140px; margin-left: -17px; background-repeat: no-repeat; background-position: center; background-size: contain; }
.d-pm-vork::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 140'%3E%3Cpath d='M6 4v30c0 8 5 12 11 12s11-4 11-12V4' fill='none' stroke='%238A8F99' stroke-width='4' stroke-linecap='round'/%3E%3Cpath d='M17 4v34M11 4v26M23 4v26' stroke='%238A8F99' stroke-width='3' stroke-linecap='round'/%3E%3Crect x='13' y='44' width='8' height='92' rx='4' fill='%23B0B6C0'/%3E%3C/svg%3E"); }
.d-pm-mes::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 140'%3E%3Cpath d='M14 4c10 6 12 30 10 52H14z' fill='%23D5DBE5' stroke='%238A8F99' stroke-width='2'/%3E%3Crect x='13' y='54' width='9' height='82' rx='4' fill='%23B0B6C0'/%3E%3C/svg%3E"); }
.d-pm-klein { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: #5E8A3A; }
.d-pm-link { font-weight: 700; font-size: 1.05rem; }
.d-pm-link::after { content: " →"; color: #EC8B48; }
.d-pm-servet { position: absolute; right: -10px; top: -18px; background: #D85454; color: #fff; font-family: var(--wp--preset--font-family--hand); font-size: 1.5rem; padding: 10px 18px 8px; border-radius: 8px 8px 30px 8px; rotate: 8deg; box-shadow: 0 10px 18px -10px rgba(0,0,0,.5); }
@media (max-width: 781px) {
.d-placemat { grid-template-columns: 1fr 1fr; padding: 22px 16px 26px !important; }
.d-pm-bord { grid-column: 1 / -1; grid-row: 1; max-width: 340px; width: 100%; padding: 14% !important; }
.d-pm-bestek { padding-top: 104px; } .d-pm-bestek::before { height: 96px; }
.d-pm-servet { right: 6px; top: -16px; font-size: 1.25rem; }
}
.d-tabs.is-tabs.d-dienblad .d-blad-paneel.is-actief { display: grid !important; }
.d-kleed-section { text-align: center; }
.d-kleed-section h2 { margin-inline: auto !important; }
/* Bordjes rustiger: geen tweede volle ruit onder de hero, maar een lichte achtergrond met een smalle tafelloper onder de bordjes */
.d-kleed-section { background: #FFFBF4 !important; text-align: center; }
.d-kleed-section h2, .d-kleed-section .d-eyebrow { background: none !important; padding: 0 !important; display: block; border-radius: 0; }
.d-kleed-section h2 { margin: .4rem auto 0 !important; }
.d-kleed-section .d-borden { position: relative; padding: 10px 0 !important; }
.d-kleed-section .d-borden::before { content: ""; position: absolute; left: -100vw; right: -100vw; top: 30%; bottom: 30%; z-index: -1; pointer-events: none;
background: repeating-linear-gradient(0deg, rgba(236,139,72,.16) 0 16px, transparent 16px 32px), repeating-linear-gradient(90deg, rgba(236,139,72,.16) 0 16px, transparent 16px 32px), #FFF3E6;
border-block: 6px solid rgba(236,139,72,.25); }
.d-kleed-section { overflow-x: clip; position: relative; z-index: 0; }
.d-kleed-section .d-bord .d-icon { background: #EC8B48 !important; }
.d-bord { box-shadow: 0 14px 24px -16px rgba(30,43,69,.55), inset 0 0 0 2px #EFE9DC; }
@media (max-width: 900px) { .d-kleed-section .d-borden::before { top: 10%; bottom: 10%; } }
/* Placemat op de telefoon: bord als ronde-hoek-bord zodat niets buiten beeld valt */
@media (max-width: 781px) {
.d-pm-bord { aspect-ratio: auto; border-radius: 40px; padding: 28px 20px !important; max-width: none; background: #fff; box-shadow: 0 16px 26px -18px rgba(30,43,69,.6), inset 0 0 0 8px #F1EEE6; }
.d-placemat { overflow: visible; }
}
.d-kleed-section .d-borden { max-width: 980px; margin-inline: auto !important; } .d-bord { max-width: 300px; width: 100%; margin-inline: auto !important; }
@media (max-width: 781px) { .d-placemat { grid-template-columns: minmax(0,1fr) minmax(0,1fr); } .d-pm-bord { width: auto !important; min-width: 0; justify-self: stretch; margin: 0 !important; } }
/* ===== Wennen: eigen bouwstenen ===== */
/* Ontdekwolkjes rond een ronde foto */
.d-ontdek-section h2, .d-voetpad-section h2, .d-envelop-section h2, .d-app-section h2, .d-kijkgat-section h2 { font-size: clamp(1.8rem, 2.8vw, 2.4rem) !important; }
.d-ontdek { position: relative; width: min(340px, 78vw); aspect-ratio: 1; margin: 30px auto; }
.d-ontdek-foto { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; border: 8px solid #fff; box-shadow: 0 22px 36px -24px rgba(30,43,69,.7); }
.d-ob { position: absolute; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 12px 14px 8px; border-radius: 50%; min-width: 92px; aspect-ratio: 1; justify-content: center;
background: #fff; box-shadow: 0 12px 20px -14px rgba(30,43,69,.6); font-family: var(--wp--preset--font-family--hand); font-size: 1.2rem; color: #2E3B5E; transition: scale .3s cubic-bezier(.25,1.6,.45,1); }
.d-ob .d-icon { width: 26px; height: 26px; background: var(--c, #EC8B48) !important; }
.d-ob-1 { --c: #8EAAD5; left: -34px; top: -10px; } .d-ob-2 { --c: #D9667A; right: -34px; top: 6%; } .d-ob-3 { --c: #EC8B48; left: -40px; bottom: 6%; } .d-ob-4 { --c: #5E8A3A; right: -26px; bottom: -16px; }
.d-ob:hover { scale: 1.12; }
@media (prefers-reduced-motion: no-preference) {
.d-ob { animation: d-dobber 5s ease-in-out infinite; } .d-ob-2 { animation-delay: -1.2s; } .d-ob-3 { animation-delay: -2.5s; } .d-ob-4 { animation-delay: -3.7s; }
@keyframes d-dobber { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }
}
.d-ontdek-section .d-hand-note { text-align: center; }
@media (max-width: 600px) { .d-ob { min-width: 74px; font-size: 1rem; padding: 8px; } .d-ob-1, .d-ob-3 { left: -14px; } .d-ob-2, .d-ob-4 { right: -14px; } }
/* Voetstappenpad: grote en kleine voetjes, vanaf halte 2 alleen de kleine */
.d-voetpad-section { background: #F4F8EE !important; }
.d-voetpad { position: relative; height: 130px; margin: 1rem 0 .4rem !important; }
.d-voet { position: absolute; width: 16px; height: 24px; opacity: 0; rotate: 78deg; transition: opacity .35s ease calc(var(--i) * 110ms), scale .35s cubic-bezier(.25,1.6,.45,1) calc(var(--i) * 110ms); scale: .4;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 24'%3E%3Cellipse cx='8' cy='15' rx='6' ry='8' fill='%23EC8B48'/%3E%3Ccircle cx='3' cy='4' r='2' fill='%23EC8B48'/%3E%3Ccircle cx='7' cy='2.5' r='2' fill='%23EC8B48'/%3E%3Ccircle cx='11' cy='3' r='1.8' fill='%23EC8B48'/%3E%3Ccircle cx='14' cy='5.5' r='1.6' fill='%23EC8B48'/%3E%3C/svg%3E") center / contain no-repeat; }
.d-voet.is-l { transform: scaleX(-1); }
.d-voet-groot { width: 24px; height: 36px; filter: hue-rotate(180deg) saturate(.7) brightness(.8); }
.d-voetpad.is-lopen .d-voet { opacity: 1; scale: 1; }
.d-voet-los { position: absolute; top: 4px; font-family: var(--wp--preset--font-family--hand); font-size: 1.25rem; color: #496390; rotate: -6deg; opacity: 0; transition: opacity .4s ease 1.6s; white-space: nowrap; }
.d-voetpad.is-lopen .d-voet-los { opacity: 1; }
.d-vp-borden { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2.6vw, 30px); }
.d-vp-borden > * { margin: 0 !important; }
.d-vp-bord { position: relative; background: #fff; border-radius: 14px; padding: 22px 20px 20px !important; box-shadow: 0 16px 28px -22px rgba(30,43,69,.7); border-bottom: 6px solid #D9B48A; }
.d-vp-bord::before { content: ""; position: absolute; left: 50%; bottom: -34px; width: 10px; height: 30px; margin-left: -5px; background: #B98A5E; border-radius: 0 0 4px 4px; z-index: -1; }
.d-vp-bord > * { margin: 0 !important; } .d-vp-bord > * + * { margin-top: .4rem !important; }
.d-vp-nr { position: absolute !important; top: -18px; left: 18px; width: 38px; height: 38px; border-radius: 50%; background: #EC8B48; color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 1.1rem !important; box-shadow: 0 6px 10px -6px rgba(0,0,0,.4); }
.d-vp-bord:nth-child(2) .d-vp-nr { background: #496390; } .d-vp-bord:nth-child(3) .d-vp-nr { background: #5E8A3A; }
.d-vp-bord h3 { font-size: 1.2rem !important; margin-top: 8px !important; }
.d-vp-bord p:is(:not([class]), :where(.d-nb) [class="wp-block-paragraph"]) { font-size: 15px; line-height: 1.55; }
.d-voetpad-section .d-vp-borden { padding-bottom: 30px !important; }
@media (max-width: 781px) { .d-voetpad { height: 110px; } .d-vp-borden { grid-template-columns: 1fr; row-gap: 46px; } .d-voet { width: 11px; height: 17px; } .d-voet-groot { width: 16px; height: 24px; } }
@media (prefers-reduced-motion: reduce) { .d-voet, .d-voet-los { opacity: 1; scale: 1; transition: none; } }
/* Envelop die openklapt */
.d-envelop { position: relative; width: min(460px, 88vw); aspect-ratio: 1.45; margin: 90px auto 20px; perspective: 900px; }
.d-env-achter { position: absolute; inset: 0; background: #E9D2B0; border-radius: 10px; }
.d-env-brief { position: absolute; left: 6%; right: 6%; top: 8%; bottom: 6%; background: #FFFDF7; border-radius: 6px; padding: 18px 20px !important; box-shadow: 0 8px 14px -10px rgba(0,0,0,.35); z-index: 1;
transition: translate .8s cubic-bezier(.25,1.3,.45,1) .45s; background-image: repeating-linear-gradient(180deg, transparent 0 25px, rgba(142,170,213,.3) 25px 26px); }
.d-env-brief > * { margin: 0 !important; }
.d-env-aanhef { font-family: var(--wp--preset--font-family--hand); font-size: 1.3rem !important; color: #2E3B5E; }
.d-env-brief ul { list-style: none; padding: 0 !important; margin: 6px 0 !important; display: grid; gap: 6px; font-size: 14.5px; line-height: 1.45; }
.d-env-brief li { display: flex; gap: 8px; align-items: flex-start; }
.d-env-brief li .d-icon { width: 20px; height: 20px; flex: none; margin: 1px 0 0 !important; background: #EC8B48 !important; }
.d-env-groet { font-family: var(--wp--preset--font-family--hand); font-size: 1.15rem !important; color: #D9667A; text-align: right; }
.d-env-voor { position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: 10px;
background: linear-gradient(to top right, #F3E1C4 50%, transparent 50.5%) left bottom / 51% 100% no-repeat, linear-gradient(to top left, #EFD9B8 50%, transparent 50.5%) right bottom / 51% 100% no-repeat; }
.d-env-flap { position: absolute; left: 0; right: 0; top: 0; height: 58%; z-index: 3; transform-origin: 50% 0; background: linear-gradient(to bottom, #E2C49A, #D9B48A); clip-path: polygon(0 0, 100% 0, 50% 100%); transition: rotate .6s ease, z-index 0s .3s; rotate: x 0deg; }
.d-env-zegel { position: absolute; left: 50%; top: 46%; width: 44px; height: 44px; margin-left: -22px; border-radius: 50%; background: radial-gradient(circle, #E86A6A 0 55%, #C84B4B 56%); z-index: 4; box-shadow: 0 4px 8px -4px rgba(0,0,0,.4); transition: opacity .25s ease; }
.d-envelop.is-open .d-env-flap { rotate: x 180deg; z-index: 0; }
.d-envelop.is-open .d-env-zegel { opacity: 0; }
.d-envelop.is-open .d-env-brief { translate: 0 -46%; }
@media (prefers-reduced-motion: reduce) { .d-envelop .d-env-brief { translate: 0 -46%; transition: none; } .d-env-flap { rotate: x 180deg; z-index: 0; transition: none; } .d-env-zegel { opacity: 0; } }
@media (max-width: 600px) { .d-envelop { aspect-ratio: 1.1; } }
/* Appgesprek op een telefoon */
.d-telefoon { width: min(330px, 88vw); margin-inline: auto; border-radius: 40px; background: #2E3B5E; padding: 14px !important; box-shadow: 0 30px 50px -30px rgba(30,43,69,.9); }
.d-tel-kop { display: flex; align-items: center; gap: 10px; color: #fff; padding: 6px 10px 12px; }
.d-tel-kop small { display: block; font-size: 12px; opacity: .7; }
.d-tel-avatar { width: 36px; height: 36px; border-radius: 50%; background: #F6C445; color: #2E3B5E; display: grid; place-items: center; font-weight: 700; }
.d-tel-scherm { background: #EAF1E1; border-radius: 26px; padding: 14px !important; min-height: 330px; max-height: 420px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; scroll-behavior: smooth; }
.d-app-paar { display: flex; flex-direction: column; gap: 8px; }
.d-app-msg { max-width: 82%; padding: 9px 13px !important; margin: 0 !important; border-radius: 16px; font-size: 14.5px; line-height: 1.45; box-shadow: 0 2px 4px rgba(0,0,0,.08); }
.d-app-ouder { align-self: flex-end; background: #DCF3C6; border-bottom-right-radius: 4px; }
.d-app-doortje { align-self: flex-start; background: #fff; border-bottom-left-radius: 4px; }
.d-telefoon.is-js .d-app-paar { display: none; }
.d-telefoon.is-js .d-app-paar.is-zichtbaar { display: flex; animation: d-app-in .35s ease-out 1; }
.d-telefoon.is-js .d-app-paar.is-zichtbaar .d-app-doortje { animation: d-app-in .35s ease-out .9s 1 both; }
@keyframes d-app-in { from { opacity: 0; translate: 0 10px; } }
.d-app-typen { display: none; align-self: flex-start; gap: 4px; background: #fff; border-radius: 14px; padding: 10px 12px; }
.d-app-typen i { width: 7px; height: 7px; border-radius: 50%; background: #9AA0A8; animation: d-typ 1s ease-in-out infinite; }
.d-app-typen i:nth-child(2) { animation-delay: .15s; } .d-app-typen i:nth-child(3) { animation-delay: .3s; }
@keyframes d-typ { 0%, 100% { translate: 0 0; } 50% { translate: 0 -4px; } }
.d-telefoon.is-typen .d-app-typen { display: flex; }
.d-app-volgende { display: none; width: 100%; margin-top: 12px; padding: 12px; border: 0; border-radius: 999px; background: #F6C445; color: #2E3B5E; font-weight: 700; cursor: pointer; }
.d-telefoon.is-js .d-app-volgende { display: block; }
.d-app-volgende[disabled] { opacity: .5; cursor: default; }
/* Kijkgaatje */
.d-kijkgat-section { text-align: center; background: #FFF8EC !important; }
.d-kijkgat { position: relative; width: min(420px, 82vw); margin: 1.4rem auto 0; }
.d-kg-rond { position: relative; aspect-ratio: 1; border-radius: 50%; overflow: hidden; border: 16px solid #2E3B5E; box-shadow: 0 0 0 8px #496390, 0 26px 40px -24px rgba(30,43,69,.8), inset 0 0 40px rgba(0,0,0,.4); }
.d-kg-rond img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; scale: 1.15; transition: opacity .5s ease, scale 1.2s ease; }
.d-kg-rond img.is-actief { opacity: 1; scale: 1; }
.d-kg-rond::after { content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: inset 0 0 60px 20px rgba(0,0,0,.35); pointer-events: none; }
.d-kg-pijl { position: absolute; top: 50%; translate: 0 -50%; width: 48px; height: 48px; border-radius: 50%; border: 0; background: #F6C445; color: #2E3B5E; font-size: 1.8rem; line-height: 1; cursor: pointer; box-shadow: 0 8px 14px -8px rgba(0,0,0,.5); }
.d-kg-terug { left: -24px; } .d-kg-verder { right: -24px; }
.d-kg-hint { font-family: var(--wp--preset--font-family--hand); font-size: 1.25rem !important; color: #496390; margin-top: 14px !important; }
@media (max-width: 600px) { .d-kg-terug { left: -8px; } .d-kg-verder { right: -8px; } }
/* Handafdrukken in verf */
.d-handjes { display: flex; align-items: center; justify-content: center; gap: clamp(16px, 4vw, 50px); max-width: 900px; margin-inline: auto; }
.d-hand { flex: none; background-repeat: no-repeat; background-size: contain; }
.d-hand-groot { width: clamp(90px, 14vw, 150px); aspect-ratio: .82; rotate: -14deg; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 82 100'%3E%3Cpath d='M20 92c-10-10-14-26-12-40l2-18c1-5 8-5 9 0l3 20 1-38c0-6 9-6 9 0l2 34 3-40c0-6 9-6 9 0l1 40 4-34c1-6 9-5 9 1l-2 40 8-14c3-5 11-2 9 4l-10 26c-4 10-10 20-20 24z' fill='%238EAAD5'/%3E%3C/svg%3E"); }
.d-hand-klein { width: clamp(56px, 8vw, 86px); aspect-ratio: .82; rotate: 12deg; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 82 100'%3E%3Cpath d='M20 92c-10-10-14-26-12-40l2-18c1-5 8-5 9 0l3 20 1-38c0-6 9-6 9 0l2 34 3-40c0-6 9-6 9 0l1 40 4-34c1-6 9-5 9 1l-2 40 8-14c3-5 11-2 9 4l-10 26c-4 10-10 20-20 24z' fill='%23EC8B48'/%3E%3C/svg%3E"); }
.d-handjes-tekst { text-align: center; } .d-handjes-tekst > * { margin: 0 !important; }
.d-handjes-quote { font-family: var(--wp--preset--font-family--hand); font-size: clamp(2rem, 4vw, 3rem) !important; line-height: 1.1; color: #2E3B5E; }
.d-handjes-wie { margin-top: 10px !important; color: #6B6F78; font-size: 15px; }
@supports (animation-timeline: view()) { @media (prefers-reduced-motion: no-preference) {
.d-hand { animation: d-stempel-hand linear both; animation-timeline: view(); animation-range: entry 50% cover 40%; } .d-hand-klein { animation-range: entry 70% cover 50%; }
@keyframes d-stempel-hand { 0% { scale: 1.6; opacity: 0; } 70% { scale: .92; opacity: 1; } 100% { scale: 1; } }
} }
@media (max-width: 600px) { .d-handjes { flex-wrap: wrap; } .d-handjes-tekst { order: -1; flex-basis: 100%; } }
/* Oorkonde-afsluiter */
.d-oorkonde { position: relative; max-width: 820px; margin-inline: auto; text-align: center; padding: clamp(36px, 5vw, 56px) clamp(22px, 5vw, 60px) clamp(28px, 4vw, 44px) !important; background: #FFFCF2; border-radius: 10px;
box-shadow: 0 30px 50px -36px rgba(30,43,69,.8), inset 0 0 0 10px #FFFCF2, inset 0 0 0 13px #F6C445, inset 0 0 0 20px #FFFCF2, inset 0 0 0 22px #EC8B48; rotate: -.6deg; }
.d-oorkonde > * { margin: 0 0 .6rem !important; }
.d-oorkonde h2 { font-size: clamp(2rem, 4vw, 2.8rem) !important; }
.d-ok-tekst { max-width: 52ch; margin-inline: auto !important; }
.d-ok-ster { position: absolute; right: clamp(16px, 4vw, 40px); top: -34px; width: 116px; height: 116px; display: grid; place-items: center; text-align: center; padding: 22px; font-family: var(--wp--preset--font-family--hand); font-size: 1.1rem; line-height: 1; color: #7A5A1E;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 4l13 28 30 4-22 21 6 30-27-15-27 15 6-30L7 36l30-4z' fill='%23F6C445' stroke='%23E0A82E' stroke-width='3' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; rotate: 12deg; filter: drop-shadow(0 8px 8px rgba(0,0,0,.2)); }
@supports (animation-timeline: view()) { @media (prefers-reduced-motion: no-preference) {
.d-ok-ster { animation: d-sticker-plak linear both; animation-timeline: view(); animation-range: entry 60% cover 40%; }
@keyframes d-sticker-plak { 0% { scale: 2; rotate: 60deg; opacity: 0; } 70% { scale: .9; rotate: 8deg; opacity: 1; } 100% { scale: 1; rotate: 12deg; } }
} }
.d-ok-teken { display: flex; flex-direction: column; align-items: center; gap: 6px; margin: 1.2rem 0 1rem !important; }
.d-ok-knop { display: inline-block; padding: 13px 26px; border-radius: 999px; background: #2E3B5E; color: #fff !important; font-weight: 700; text-decoration: none; }
.d-ok-knop:hover { background: #496390; }
.d-ok-lijn { display: block; width: min(320px, 70vw); border-top: 2px dashed #B9B2A0; padding-top: 4px; font-family: var(--wp--preset--font-family--hand); font-size: 1.05rem; color: #9A927F; }
.d-ok-links { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; }
.d-ok-link { display: flex; flex-direction: column; padding: 12px 18px; border-radius: 14px; background: #fff; box-shadow: 0 10px 18px -14px rgba(30,43,69,.6); text-decoration: none; color: #2E3B5E !important; font-weight: 700; min-width: 210px; text-align: left; }
.d-ok-link span { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: #5E8A3A; font-weight: 700; }
.d-ok-link::after { content: "→"; color: #EC8B48; align-self: flex-end; margin-top: -20px; }
@media (max-width: 600px) { .d-ok-ster { width: 90px; height: 90px; font-size: .9rem; top: -28px; right: 6px; } }
.d-env-brief li { display: block; padding-left: 28px; position: relative; }
.d-env-brief li .d-icon { position: absolute; left: 0; top: 2px; }
.d-envelop { margin-top: 150px; }
.d-envelop.is-open .d-env-brief { translate: 0 -42%; }
.d-envelop-section { padding-bottom: clamp(2.4rem, 5vw, 3.6rem) !important; }
.d-env-flap { transition: rotate .6s ease, opacity .3s ease .45s; }
.d-envelop.is-open .d-env-flap { opacity: 0; }
.d-envelop { margin-top: 130px; }
.d-envelop.is-open .d-env-brief { translate: 0 -36%; z-index: 1; }
.d-env-voor { z-index: 2; }
.d-env-voor { background: #F0DDBF; clip-path: polygon(0 34%, 50% 66%, 100% 34%, 100% 100%, 0 100%); box-shadow: none; }
.d-env-brief { opacity: 0; transition: translate .8s cubic-bezier(.25,1.3,.45,1) .45s, opacity .3s ease .4s; }
.d-envelop.is-open .d-env-brief { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .d-env-brief { opacity: 1; } }
.d-envelop { overflow: visible !important; margin: 140px auto 10px !important; }
.d-envelop.is-open .d-env-brief { translate: 0 -62%; } .d-envelop { margin-top: 200px !important; } @media (max-width: 600px) { .d-envelop { margin-top: 230px !important; } .d-envelop.is-open .d-env-brief { translate: 0 -66%; } }
.d-envelop.is-open .d-env-brief { translate: 0 -38%; z-index: 5; box-shadow: 0 18px 30px -16px rgba(30,43,69,.55); } .d-env-brief { transition: translate .8s cubic-bezier(.25,1.3,.45,1) .45s, opacity .3s ease .4s, z-index 0s 1s; } .d-envelop { margin-top: 160px !important; } @media (max-width: 600px) { .d-envelop { margin-top: 170px !important; aspect-ratio: .95; } .d-envelop.is-open .d-env-brief { translate: 0 -30%; } }
.d-telefoon { box-sizing: border-box; }
@media (max-width: 600px) { .d-oorkonde { padding-top: 70px !important; } .d-ok-ster { top: -36px; right: 50%; margin-right: -45px; } }
.d-ok-ster { box-sizing: border-box; }
/* ===== Naar de basisschool: eigen bouwstenen ===== */
.d-sk-section h2, .d-blokken-section h2 { font-size: clamp(1.8rem, 2.8vw, 2.4rem) !important; }
/* Schoolschrift */
.d-schrift { position: relative; display: grid; grid-template-columns: 1fr 34px 1fr; max-width: 1060px; margin-inline: auto; filter: drop-shadow(0 26px 30px rgba(30,43,69,.22)); rotate: -.6deg; }
.d-schrift-blad { position: relative; background: #fff; padding: 34px 34px 30px 52px !important; min-height: 380px;
background-image: linear-gradient(90deg, transparent 38px, rgba(216,84,84,.45) 38px 40px, transparent 40px), repeating-linear-gradient(180deg, transparent 0 31px, rgba(142,170,213,.45) 31px 32px); background-position: 0 0, 0 20px; }
.d-schrift-links { border-radius: 14px 0 0 14px; } .d-schrift-rechts { border-radius: 0 14px 14px 0; }
.d-schrift-blad > * { margin: 0 0 .8rem !important; position: relative; }
.d-schrift-blad h2 { font-size: clamp(1.8rem, 2.8vw, 2.4rem) !important; }
.d-schrift-blad p:is(:not([class]), :where(.d-nb) [class="wp-block-paragraph"]) { line-height: 32px; font-size: 16px; }
.d-schrift-ring { background: repeating-linear-gradient(180deg, transparent 0 14px, #9AA0A8 14px 26px) center / 12px 100% no-repeat, linear-gradient(90deg, #EEF1F5, #fff 50%, #EEF1F5); }
.d-schrift-foto { margin: 6px auto 10px !important; width: min(86%, 340px); rotate: 3deg; background: #fff; padding: 8px !important; box-shadow: 0 10px 18px -12px rgba(0,0,0,.5); }
.d-schrift-foto::before, .d-schrift-foto::after { content: ""; position: absolute; width: 70px; height: 22px; background: rgba(246,196,69,.7); z-index: 1; }
.d-schrift-foto::before { left: -18px; top: 6px; rotate: -38deg; } .d-schrift-foto::after { right: -18px; bottom: 10px; rotate: -38deg; }
.d-schrift-foto img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.d-schrift-noot { font-family: var(--wp--preset--font-family--hand); font-size: 1.5rem !important; color: #2F4F9E; text-align: center; rotate: -3deg; }
.d-doodle { position: absolute !important; width: 46px; height: 46px; background-repeat: no-repeat; background-size: contain; opacity: .85; margin: 0 !important; }
.d-doodle-zon { right: 18px; top: 14px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 46 46' fill='none' stroke='%23E0A82E' stroke-width='2.5' stroke-linecap='round'%3E%3Ccircle cx='23' cy='23' r='9'/%3E%3Cpath d='M23 4v6M23 36v6M4 23h6M36 23h6M9 9l4 4M33 33l4 4M37 9l-4 4M13 33l-4 4'/%3E%3C/svg%3E"); }
.d-doodle-ster { left: 50px; bottom: 16px; width: 34px; height: 34px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 34'%3E%3Cpath d='M17 3l4 9 10 1-7 7 2 10-9-5-9 5 2-10-7-7 10-1z' fill='none' stroke='%23D9667A' stroke-width='2.2' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.d-doodle-huis { right: 26px; bottom: 18px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 46 46' fill='none' stroke='%235E8A3A' stroke-width='2.5' stroke-linejoin='round'%3E%3Cpath d='M6 22L23 7l17 15M11 19v20h24V19'/%3E%3Crect x='19' y='28' width='8' height='11'/%3E%3C/svg%3E"); }
@media (max-width: 781px) { .d-schrift { grid-template-columns: 1fr; } .d-schrift-ring { height: 30px; background: repeating-linear-gradient(90deg, transparent 0 14px, #9AA0A8 14px 26px) center / 100% 12px no-repeat, #EEF1F5; }
.d-schrift-links { border-radius: 14px 14px 0 0; } .d-schrift-rechts { border-radius: 0 0 14px 14px; } .d-schrift-blad { min-height: 0; padding: 26px 18px 24px 48px !important; } }
/* Scheurkalender */
.d-scheurkal { width: min(380px, 86vw); margin-inline: auto; }
.d-sk-kop { height: 46px; background: #D85454; border-radius: 12px 12px 0 0; display: flex; justify-content: space-around; align-items: center; box-shadow: inset 0 -6px 0 rgba(0,0,0,.12); }
.d-sk-kop span { width: 14px; height: 30px; border-radius: 7px; background: #9AA0A8; margin-top: -26px; box-shadow: inset 0 0 0 3px #CFD4DB; }
.d-sk-stapel { position: relative; height: 270px; background: #FFFDF7; border-radius: 0 0 10px 10px; box-shadow: 0 26px 40px -26px rgba(30,43,69,.8); }
.d-sk-blad, .d-sk-eind { position: absolute; inset: 0; padding: 26px 26px 20px !important; background: #FFFDF7; border-radius: 0 0 10px 10px; border-top: 2px dashed rgba(0,0,0,.12); text-align: center; z-index: calc(10 - var(--n, 9)); transform-origin: 50% 0; }
.d-sk-blad { cursor: pointer; box-shadow: 0 2px 0 rgba(0,0,0,.05); }
.d-sk-blad > *, .d-sk-eind > * { margin: 0 0 .5rem !important; }
.d-sk-nr { display: block; font-family: var(--wp--preset--font-family--schreef); font-size: 4.2rem; line-height: 1; color: #D85454; }
.d-sk-blad h3 { font-size: 1.25rem !important; }
.d-sk-blad p { font-size: 15px; line-height: 1.55; }
.d-sk-blad.is-weg { animation: d-scheur .7s ease-in forwards; pointer-events: none; }
@keyframes d-scheur { 0% { rotate: 0deg; translate: 0 0; opacity: 1; } 30% { rotate: -8deg; } 100% { rotate: -26deg; translate: -40px 260px; opacity: 0; } }
.d-sk-eind { z-index: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; font-family: var(--wp--preset--font-family--hand); font-size: 1.4rem; color: #2E3B5E; }
.d-sk-opnieuw { border: 0; border-radius: 999px; background: #F6C445; padding: 10px 18px; font: 700 15px var(--wp--preset--font-family--zonder-schreef, sans-serif); color: #2E3B5E; cursor: pointer; }
.d-sk-hint { font-family: var(--wp--preset--font-family--hand); font-size: 1.2rem !important; color: #496390; text-align: center; margin-top: 14px !important; }
@media (prefers-reduced-motion: reduce) { .d-sk-blad.is-weg { animation: none; display: none; } }
/* Speelblokken */
.d-blokken-section { text-align: center; }
.d-blokken { display: flex; flex-direction: column; align-items: center; gap: 22px; margin-top: 1.2rem; }
.d-blokken-toren { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; padding-top: 24px; }
.d-blok { --k: #EC8B48; position: relative; width: 104px; height: 104px; border: 0; border-radius: 12px; cursor: pointer; background: var(--k); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
box-shadow: inset 0 -8px 0 rgba(0,0,0,.18), inset 0 0 0 6px rgba(255,255,255,.22), 0 12px 18px -12px rgba(30,43,69,.7); rotate: calc((var(--n) - 2) * 3deg); transition: translate .35s cubic-bezier(.25,1.6,.45,1), rotate .35s; }
.d-blok:hover { translate: 0 -6px; }
.d-blok[aria-pressed="true"] { translate: 0 -22px; rotate: 0deg; }
.d-blok-letter { font-family: var(--wp--preset--font-family--schreef); font-size: 2.2rem; line-height: 1; font-weight: 700; text-shadow: 0 2px 0 rgba(0,0,0,.15); }
.d-blok-woord { font-size: 13px; font-weight: 700; letter-spacing: .05em; }
.d-blokken-uitleg { min-height: 64px; max-width: 560px; }
.d-blok-uitleg { display: none; margin: 0 !important; background: #fff; padding: 16px 22px !important; border-radius: 16px; box-shadow: 0 12px 20px -16px rgba(30,43,69,.6); font-size: 16.5px; }
.d-blok-uitleg.is-actief { display: block; animation: d-app-in .35s ease-out 1; }
.d-blokken:not(.is-js) .d-blok-uitleg { display: block; margin-bottom: 8px !important; }
@media (max-width: 600px) { .d-blok { width: 84px; height: 84px; } .d-blok-letter { font-size: 1.7rem; } }
/* Plakboek */
.d-plakboek { display: grid; grid-template-columns: 1fr 1fr; max-width: 1060px; margin-inline: auto; background: #3E5A7E; padding: 14px !important; border-radius: 18px; box-shadow: 0 30px 50px -30px rgba(30,43,69,.9); }
.d-pb-links, .d-pb-rechts { background: #F6EEDC; padding: 32px !important; min-height: 380px; position: relative; }
.d-pb-links { border-radius: 8px 0 0 8px; box-shadow: inset -18px 0 22px -18px rgba(0,0,0,.35); } .d-pb-rechts { border-radius: 0 8px 8px 0; box-shadow: inset 18px 0 22px -18px rgba(0,0,0,.35); perspective: 1200px; }
.d-pb-links > * { margin: 0 0 .8rem !important; } .d-pb-links h2 { font-size: clamp(1.8rem, 2.8vw, 2.4rem) !important; }
.d-pb-pag { position: absolute; inset: 32px 32px 70px; margin: 0 !important; display: none; flex-direction: column; align-items: center; justify-content: center; transform-origin: 0 50%; }
.d-pb-pag.is-actief { display: flex; animation: d-blad-om .6s ease-out 1; }
@keyframes d-blad-om { from { rotate: y -80deg; opacity: .3; } }
.d-pb-pag img { width: min(100%, 360px); aspect-ratio: 4 / 3; object-fit: cover; border: 8px solid #fff; rotate: -2deg; box-shadow: 0 12px 20px -12px rgba(0,0,0,.5); }
.d-pb-pag figcaption { font-family: var(--wp--preset--font-family--hand); font-size: 1.45rem; color: #D9667A; margin-top: 12px; rotate: 2deg; }
.d-pb-pag::before { content: ""; position: absolute; top: 8%; left: 18%; width: 64px; height: 22px; background: rgba(142,170,213,.75); rotate: -30deg; z-index: 1; }
.d-pb-blader { position: absolute; right: 26px; bottom: 22px; border: 0; border-radius: 999px; background: #2E3B5E; color: #fff; padding: 10px 18px; font-weight: 700; cursor: pointer; }
.d-plakboek:not(.is-js) .d-pb-pag:first-child { display: flex; } .d-plakboek:not(.is-js) .d-pb-blader { display: none; }
@media (max-width: 781px) { .d-plakboek { grid-template-columns: 1fr; } .d-pb-links { border-radius: 8px 8px 0 0; } .d-pb-rechts { border-radius: 0 0 8px 8px; min-height: 360px; } .d-pb-links, .d-pb-rechts { padding: 22px !important; } .d-pb-pag { inset: 22px 22px 64px; } }
/* Kleurpotloden */
.d-potloden { max-width: 900px; margin-inline: auto; text-align: center; }
.d-pl-rij { display: flex; flex-direction: column; align-items: center; gap: 14px; margin-bottom: 1.4rem; }
.d-potlood { --k: #EC8B48; position: relative; display: flex; align-items: center; width: min(560px, 88%); height: 58px; padding-left: 70px; margin-right: 60px; border-radius: 6px 0 0 6px;
background: linear-gradient(180deg, rgba(255,255,255,.25) 0 30%, transparent 30% 70%, rgba(0,0,0,.08) 70%), var(--k); box-shadow: 0 10px 16px -10px rgba(30,43,69,.6); rotate: calc((var(--n) - 1) * -1.5deg); }
.d-potlood::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 46px; background: #F2B7C4; border-radius: 6px 0 0 6px; box-shadow: inset -6px 0 0 #C9CFDB; }
.d-potlood::after { content: ""; position: absolute; right: -60px; top: 0; width: 60px; height: 58px; background: linear-gradient(90deg, #F3D9A4 0 70%, var(--k) 70%); clip-path: polygon(0 0, 100% 50%, 0 100%); }
.d-pl-woord { font-family: var(--wp--preset--font-family--hand); font-size: 1.8rem; color: #fff; text-shadow: 0 2px 0 rgba(0,0,0,.15); }
@supports (animation-timeline: view()) { @media (prefers-reduced-motion: no-preference) {
.d-potlood { animation: d-pl-in linear both; animation-timeline: view(); animation-range: entry 40% cover 35%; }
.d-potlood:nth-child(2) { animation-range: entry 55% cover 42%; } .d-potlood:nth-child(3) { animation-range: entry 70% cover 50%; }
@keyframes d-pl-in { from { translate: -60% 0; opacity: 0; } }
} }
.d-pl-tekst { max-width: 60ch; margin: 0 auto 1rem !important; font-size: 17px; }
.d-pl-memo { display: inline-block; margin: 0 !important; background: #FFF3C4; padding: 16px 22px !important; rotate: 2deg; box-shadow: 0 12px 18px -12px rgba(0,0,0,.5); font-size: 15.5px; position: relative; }
.d-pl-memo::before { content: ""; position: absolute; left: 50%; top: -10px; width: 70px; height: 20px; margin-left: -35px; background: rgba(169,194,127,.8); rotate: -3deg; }
@media (max-width: 600px) { .d-potlood { height: 46px; padding-left: 54px; margin-right: 46px; } .d-potlood::after { right: -46px; width: 46px; height: 46px; } .d-potlood::before { width: 36px; } .d-pl-woord { font-size: 1.45rem; } }
/* Schooltas-afsluiter */
.d-schooltas { position: relative; max-width: 760px; margin: 70px auto 0; }
.d-st-hengsel { position: absolute; left: 50%; top: -58px; width: 180px; height: 80px; margin-left: -90px; border: 14px solid #8A4B12; border-bottom: 0; border-radius: 90px 90px 0 0; }
.d-st-romp { position: relative; background: #C8661F; border-radius: 26px; padding: 150px clamp(22px, 5vw, 56px) 36px !important; text-align: center; color: #fff; box-shadow: 0 30px 50px -30px rgba(30,43,69,.9), inset 0 -10px 0 rgba(0,0,0,.12); }
.d-st-romp > * { margin: 0 0 .6rem !important; }
.d-st-romp .d-eyebrow { color: #FFE08A !important; } .d-st-romp h2 { color: #fff; font-size: clamp(1.9rem, 3.6vw, 2.6rem) !important; }
.d-st-knop { display: inline-block; margin-top: 8px !important; padding: 13px 26px; border-radius: 999px; background: #fff; color: #8A4B12 !important; font-weight: 700; text-decoration: none; }
.d-st-links { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin-top: 14px !important; }
.d-st-link { display: flex; flex-direction: column; padding: 10px 16px; border-radius: 14px; background: rgba(255,255,255,.16); color: #fff !important; text-decoration: none; font-weight: 700; text-align: left; min-width: 190px; }
.d-st-link span { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: #FFE08A; }
.d-st-klep { position: absolute; left: 0; right: 0; top: 0; height: 200px; border: 0; cursor: pointer; background: #A9531A; border-radius: 26px 26px 50% 50% / 26px 26px 60px 60px; transform-origin: 50% 0; transition: rotate .7s cubic-bezier(.25,1.2,.45,1), translate .7s; z-index: 2;
box-shadow: 0 14px 20px -12px rgba(0,0,0,.45), inset 0 -8px 0 rgba(0,0,0,.12); rotate: x 0deg; }
.d-st-label { position: absolute; left: 50%; top: 56px; translate: -50% 0; background: #FFFDF7; color: #2E3B5E; padding: 8px 18px; border-radius: 8px; font-family: var(--wp--preset--font-family--hand); font-size: 1.6rem; border: 2px dashed #C9CFDB; rotate: -3deg; }
.d-st-slot { position: absolute; left: 50%; bottom: 14px; width: 50px; height: 30px; margin-left: -25px; background: #F6C445; border-radius: 8px; box-shadow: inset 0 -4px 0 rgba(0,0,0,.2); }
.d-schooltas:hover .d-st-klep, .d-schooltas.is-open .d-st-klep, .d-schooltas:focus-within .d-st-klep { rotate: x 160deg; translate: 0 -6px; }
.d-schooltas { perspective: 1000px; }
@media (max-width: 600px) { .d-st-klep { height: 150px; } .d-st-romp { padding-top: 120px !important; } .d-st-label { top: 40px; font-size: 1.3rem; } }
.d-st-klep { height: 140px; } .d-st-label { top: 34px; } .d-st-romp { padding-top: 170px !important; } @media (max-width: 600px) { .d-st-klep { height: 120px; } .d-st-label { top: 28px; } .d-st-romp { padding-top: 145px !important; } }
/* ===== Babyopvang: eigen bouwstenen ===== */
.d-nestje-section h2, .d-commode-section h2, .d-raam-section h2 { font-size: clamp(1.8rem, 2.8vw, 2.4rem) !important; }
/* Warm nestje met eitjes */
.d-nestje { position: relative; width: min(440px, 90vw); margin: 20px auto 0; text-align: center; }
.d-nest-eieren { position: relative; z-index: 1; display: flex; justify-content: center; gap: 26px; margin-bottom: -46px; }
.d-ei { position: relative; width: 110px; height: 140px; border: 0; padding: 0; background: none; cursor: pointer; transition: translate .3s cubic-bezier(.25,1.6,.45,1); }
.d-ei:hover { translate: 0 -6px; }
.d-ei:nth-child(1) { rotate: -8deg; } .d-ei:nth-child(2) { rotate: 7deg; }
.d-ei-boven, .d-ei-onder { position: absolute; left: 0; right: 0; background: #FFF6E6; box-shadow: inset -10px -8px 0 rgba(217,180,138,.35); }
.d-ei-boven { top: 0; height: 62%; border-radius: 50% 50% 10% 10% / 70% 70% 10% 10%; clip-path: polygon(0 0, 100% 0, 100% 86%, 85% 100%, 70% 86%, 55% 100%, 40% 86%, 25% 100%, 10% 86%, 0 100%); transform-origin: 20% 90%; transition: rotate .5s cubic-bezier(.25,1.6,.45,1), translate .5s; z-index: 2; }
.d-ei-onder { bottom: 0; height: 52%; border-radius: 10% 10% 50% 50% / 10% 10% 60% 60%; clip-path: polygon(0 14%, 10% 0, 25% 14%, 40% 0, 55% 14%, 70% 0, 85% 14%, 100% 0, 100% 100%, 0 100%); z-index: 3; }
.d-ei-boven::after { content: ""; position: absolute; left: 30%; top: 18%; width: 10px; height: 10px; border-radius: 50%; background: #F2B7C4; box-shadow: 28px 14px 0 -2px #A9C27F, 10px 34px 0 -3px #8EAAD5; }
.d-ei-kuiken { position: absolute; left: 50%; bottom: 34%; width: 66px; height: 60px; margin-left: -33px; border-radius: 50% 50% 46% 46%; background: #F6C445; z-index: 1; translate: 0 30px; transition: translate .5s cubic-bezier(.25,1.6,.45,1) .15s; }
.d-ei-kuiken::before { content: ""; position: absolute; left: 18px; top: 18px; width: 7px; height: 7px; border-radius: 50%; background: #2E3B5E; box-shadow: 22px 0 0 #2E3B5E; }
.d-ei-kuiken::after { content: ""; position: absolute; left: 50%; top: 30px; width: 12px; height: 8px; margin-left: -6px; background: #EC8B48; clip-path: polygon(0 0, 100% 0, 50% 100%); }
.d-ei[aria-expanded="true"] .d-ei-boven { rotate: -70deg; translate: -14px -26px; }
.d-ei[aria-expanded="true"] .d-ei-kuiken { translate: 0 -6px; }
.d-ei-label { position: absolute; left: 50%; bottom: -30px; translate: -50% 0; white-space: nowrap; font-family: var(--wp--preset--font-family--hand); font-size: 1.2rem; color: #8A4B12; z-index: 4; }
.d-nest-mand { position: relative; height: 96px; border-radius: 0 0 50% 50% / 0 0 100% 100%;
background: repeating-linear-gradient(115deg, #B98A5E 0 8px, #A8774A 8px 16px), #B98A5E; box-shadow: inset 0 10px 0 #C9A274, 0 18px 26px -18px rgba(0,0,0,.6); }
.d-nest-mand::before { content: ""; position: absolute; left: -10px; right: -10px; top: -10px; height: 26px; border-radius: 30px; background: repeating-linear-gradient(65deg, #C9A274 0 7px, #9B6B43 7px 12px); }
.d-nest-hint { font-family: var(--wp--preset--font-family--hand); font-size: 1.2rem !important; color: #8A4B12; margin: 12px 0 8px !important; }
.d-nest-uitleg { min-height: 70px; }
.d-ei-uitleg { display: none; align-items: flex-start; gap: 10px; text-align: left; background: #fff; border-radius: 16px; padding: 14px 18px; box-shadow: 0 12px 20px -16px rgba(30,43,69,.6); margin-bottom: 8px; }
.d-ei-uitleg .d-icon { width: 24px; height: 24px; flex: none; background: #EC8B48 !important; margin: 2px 0 0 !important; }
.d-ei-uitleg p { margin: 0 !important; font-size: 15.5px; }
.d-ei-uitleg.is-actief { display: flex; animation: d-app-in .35s ease-out 1; }
.d-nestje:not(.is-js) .d-ei-uitleg { display: flex; } .d-nestje:not(.is-js) .d-nest-hint { display: none; }
/* Commode met vakjes */
.d-commode { width: min(440px, 90vw); margin-inline: auto; }
.d-cm-mat { position: relative; height: 34px; margin: 0 10px; border-radius: 18px 18px 6px 6px; background: repeating-linear-gradient(90deg, #DFE8F6 0 18px, #fff 18px 36px); box-shadow: inset 0 -5px 0 rgba(0,0,0,.06); }
.d-cm-eend { position: absolute; right: 30px; top: -26px; width: 40px; height: 32px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 32'%3E%3Cellipse cx='22' cy='22' rx='16' ry='9' fill='%23F6C445'/%3E%3Ccircle cx='12' cy='11' r='8' fill='%23F6C445'/%3E%3Cpath d='M3 12l-3 2 4 1z' fill='%23EC8B48'/%3E%3Ccircle cx='10' cy='9' r='1.6' fill='%232E3B5E'/%3E%3C/svg%3E") center / contain no-repeat; }
.d-cm-kast { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; background: #fff; border: 10px solid #fff; border-radius: 14px; box-shadow: 0 26px 40px -26px rgba(30,43,69,.8), inset 0 0 0 2px #E8ECF3; padding: 4px; }
.d-vak { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; height: 104px; border: 0; border-radius: 10px; background: #F3F6FB; cursor: pointer; box-shadow: inset 0 10px 14px -10px rgba(0,0,0,.25); transition: background .25s; }
.d-vak .d-icon { width: 34px; height: 34px; margin: 0 !important; background: #496390 !important; transition: translate .35s cubic-bezier(.25,1.6,.45,1); }
.d-vak-kort { font-weight: 700; font-size: 14px; color: #2E3B5E; }
.d-vak:nth-child(4), .d-vak:nth-child(5) { grid-column: span 1; }
.d-cm-kast .d-vak:nth-child(4) { grid-column: 1 / span 1; }
.d-vak[aria-pressed="true"] { background: #FFF3C4; }
.d-vak[aria-pressed="true"] .d-icon { translate: 0 -14px; background: #EC8B48 !important; }
.d-vak:hover .d-icon { translate: 0 -6px; }
.d-cm-kast::after { content: ""; display: flex; }
.d-cm-poten { height: 16px; margin: 0 30px; background: linear-gradient(90deg, #C9CFDB 0 16px, transparent 16px calc(100% - 16px), #C9CFDB calc(100% - 16px)); border-radius: 0 0 6px 6px; }
.d-cm-uitleg { margin-top: 18px; min-height: 56px; }
.d-vak-uitleg { display: none; margin: 0 !important; background: #fff; border-radius: 16px; padding: 14px 18px !important; box-shadow: 0 12px 20px -16px rgba(30,43,69,.6); font-size: 16px; text-align: center; }
.d-vak-uitleg.is-actief { display: block; animation: d-app-in .35s ease-out 1; }
.d-commode:not(.is-js) .d-vak-uitleg { display: block; margin-bottom: 8px !important; }
/* Slaapkamerraampje met gordijntjes */
.d-raam-section { background: #F1F4FA !important; }
.d-raam { width: min(520px, 86vw); padding-top: 26px; overflow: visible; }
.d-raam .d-kg-rond { aspect-ratio: 4 / 3; border-radius: 10px; border: 14px solid #fff; box-shadow: 0 0 0 4px #C9D3E6, 0 26px 40px -26px rgba(30,43,69,.8); }
.d-raam .d-kg-rond::after { border-radius: 4px; box-shadow: inset 0 0 40px rgba(46,59,94,.25); }
.d-raam-kruis { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, transparent calc(50% - 5px), #fff calc(50% - 5px) calc(50% + 5px), transparent calc(50% + 5px)), linear-gradient(180deg, transparent calc(50% - 5px), #fff calc(50% - 5px) calc(50% + 5px), transparent calc(50% + 5px)); }
.d-raam-roede { position: absolute; left: -30px; right: -30px; top: 10px; height: 10px; border-radius: 6px; background: #9B6B43; z-index: 3; }
.d-raam-roede::before, .d-raam-roede::after { content: ""; position: absolute; top: -5px; width: 20px; height: 20px; border-radius: 50%; background: #9B6B43; }
.d-raam-roede::before { left: -8px; } .d-raam-roede::after { right: -8px; }
.d-gordijn { position: absolute; top: 14px; bottom: 40px; width: 54%; z-index: 2; pointer-events: none; transition: width 1.1s cubic-bezier(.3,.9,.3,1);
background: repeating-linear-gradient(90deg, #F2B7C4 0 18px, #F7CCD6 18px 36px); box-shadow: 0 10px 20px -12px rgba(0,0,0,.4); }
.d-gordijn-l { left: -22px; border-radius: 0 0 40% 0 / 0 0 20% 0; } .d-gordijn-r { right: -22px; border-radius: 0 0 0 40% / 0 0 0 20%; }
.d-raam.is-open .d-gordijn { width: 16%; }
.d-raam-bank { height: 18px; margin: -4px -26px 0; border-radius: 6px; background: #D9B48A; box-shadow: 0 8px 12px -8px rgba(0,0,0,.4); position: relative; z-index: 3; }
.d-raam .d-kg-pijl { z-index: 4; top: 54%; }
.d-raam .d-kg-terug { left: -34px; } .d-raam .d-kg-verder { right: -34px; }
@media (max-width: 600px) { .d-raam .d-kg-terug { left: -10px; } .d-raam .d-kg-verder { right: -10px; } .d-raam-roede { left: -14px; right: -14px; } .d-gordijn-l { left: -8px; } .d-gordijn-r { right: -8px; } .d-raam-bank { margin-inline: -12px; } }
@media (prefers-reduced-motion: reduce) { .d-gordijn { width: 16%; transition: none; } }
.d-cm-kast { display: flex; flex-wrap: wrap; justify-content: center; } .d-cm-kast .d-vak { flex: 0 0 calc(33.333% - 7px); } .d-cm-kast .d-vak:nth-child(4) { grid-column: auto; }
.d-ei[aria-expanded="true"] .d-ei-kuiken { translate: 0 -34px; z-index: 2; }
.d-ei-label { bottom: -40px; background: #fff; color: #8A4B12; padding: 3px 12px; border-radius: 999px; font-size: 1.05rem; box-shadow: 0 6px 10px -6px rgba(0,0,0,.4); }
.d-nestje { padding-bottom: 6px; } .d-nest-hint { margin-top: 26px !important; }
/* ===== Dagopvang: eigen bouwstenen ===== */
.d-eettafel-section h2, .d-poppenhuis-section h2, .d-fotostrip-section h2, .d-brievenbus-section h2 { font-size: clamp(1.8rem, 2.8vw, 2.4rem) !important; }
/* Lange eettafel met stoeltjes */
.d-eettafel { position: relative; width: min(560px, 92vw); margin: 30px auto 10px; padding-top: 10px; }
.d-et-blad { position: relative; height: 92px; border-radius: 14px; background: #C9935E; box-shadow: inset 0 -10px 0 #A8774A, 0 16px 24px -18px rgba(0,0,0,.6); display: flex; align-items: center; justify-content: space-around; padding: 0 18px; z-index: 2; }
.d-et-blad::before { content: ""; position: absolute; left: 8%; right: 8%; top: 10px; height: 46px; border-radius: 8px; background: repeating-linear-gradient(0deg, rgba(216,84,84,.18) 0 10px, transparent 10px 20px), repeating-linear-gradient(90deg, rgba(216,84,84,.18) 0 10px, transparent 10px 20px), #FFF8F0; }
.d-et-naam { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; background: #fff; border-radius: 6px; padding: 6px 12px 7px; box-shadow: 0 6px 10px -6px rgba(0,0,0,.4); rotate: calc(-4deg + var(--n) * 7deg); max-width: 150px; text-align: center; font-size: 12px; line-height: 1.2; color: #2E3B5E; translate: 0 -14px; }
.d-et-naam b { font-family: var(--wp--preset--font-family--schreef); font-size: 1.6rem; color: #C8661F; line-height: 1; }
.d-et-bord { position: relative; z-index: 1; width: 40px; height: 40px; border-radius: 50%; background: radial-gradient(circle, #fff 0 55%, #EFE9DC 56% 62%, #fff 63%); box-shadow: 0 4px 6px -4px rgba(0,0,0,.4); translate: 0 -14px; }
.d-et-beker { position: relative; z-index: 1; width: 22px; height: 30px; border-radius: 4px 4px 8px 8px; background: #8EAAD5; translate: 0 -18px; }
.d-et-poten { height: 70px; margin: 0 40px; background: linear-gradient(90deg, #A8774A 0 16px, transparent 16px calc(100% - 16px), #A8774A calc(100% - 16px)); }
.d-et-stoelen { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-around; align-items: flex-end; z-index: 3; pointer-events: none; }
.d-et-stoel { display: block; background: #496390; border-radius: 6px 6px 3px 3px; box-shadow: inset 0 -5px 0 rgba(0,0,0,.18); }
.d-et-stoel-kinderstoel { width: 46px; height: 120px; background: #EC8B48; border-radius: 10px 10px 4px 4px; }
.d-et-stoel-peuter { width: 40px; height: 66px; background: #5E8A3A; }
.d-et-stoel-kruk { width: 34px; height: 40px; background: #F6C445; border-radius: 50% 50% 4px 4px / 30% 30% 4px 4px; }
.d-et-stoel-groot { width: 50px; height: 96px; background: #496390; }
@supports (animation-timeline: view()) { @media (prefers-reduced-motion: no-preference) {
.d-et-stoel { animation: d-stoel-schuif linear both; animation-timeline: view(); animation-range: entry 50% cover 40%; }
.d-et-stoel:nth-child(2) { animation-range: entry 60% cover 45%; } .d-et-stoel:nth-child(3) { animation-range: entry 70% cover 50%; } .d-et-stoel:nth-child(4) { animation-range: entry 80% cover 55%; }
@keyframes d-stoel-schuif { from { translate: 0 30px; opacity: 0; } }
} }
.d-et-mats { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; max-width: 1000px; margin: 1.6rem auto 0 !important; }
.d-et-mats > * { margin: 0 !important; }
.d-et-mat { background: #fff; border-radius: 22px; padding: 18px 22px !important; box-shadow: 0 14px 24px -20px rgba(30,43,69,.6); border: 3px dashed #D9E4C8; }
.d-et-mat .d-vk-kop .d-icon { background: #5E8A3A !important; }
.d-et-mat h3 { font-size: 1.15rem !important; margin: 0 !important; } .d-et-mat p { font-size: 15px; line-height: 1.55; margin: 6px 0 0 !important; }
.d-eettafel-section .d-hand-note { margin-top: .6rem !important; }
@media (max-width: 781px) { .d-et-mats { grid-template-columns: 1fr; } .d-et-blad { height: 80px; padding: 0 8px; } .d-et-naam { max-width: 110px; font-size: 11px; padding: 5px 8px; } .d-et-beker, .d-et-bord:nth-of-type(2) { display: none; } }
/* Poppenhuis */
.d-poppenhuis-section { text-align: center; background: #FFFBF4 !important; }
.d-poppenhuis { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(20px, 4vw, 50px); align-items: center; max-width: 1000px; margin: 1.6rem auto 0; text-align: left; }
.d-ph-huis { position: relative; width: min(420px, 90vw); margin-inline: auto; }
.d-ph-dak { position: relative; height: 120px; background: #D85454; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.d-ph-schoorsteen { position: absolute; right: 22%; top: 10px; width: 26px; height: 50px; background: #9B6B43; }
.d-ph-dak::after { content: ""; position: absolute; left: 50%; top: 50px; width: 44px; height: 44px; margin-left: -22px; border-radius: 50%; background: #FFF3C4; box-shadow: inset 0 0 0 5px #fff; }
.d-ph-kamers { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 130px 130px; gap: 8px; background: #F3E4CC; border: 10px solid #F3E4CC; border-top: 0; box-shadow: 0 26px 40px -26px rgba(30,43,69,.8); }
.d-ph-kamer { position: relative; border: 0; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; background: #E8E0D2; color: #6B6F78; font-weight: 700; transition: background .4s, color .4s;
box-shadow: inset 0 -16px 0 rgba(155,107,67,.25); }
.d-ph-0 { grid-column: 1; grid-row: 1; } .d-ph-1 { grid-column: 1 / -1; grid-row: 2; } .d-ph-2 { grid-column: 2; grid-row: 1; }
.d-ph-kamer .d-icon { width: 34px; height: 34px; margin: 0 !important; background: #9AA0A8 !important; transition: background .4s, translate .35s cubic-bezier(.25,1.6,.45,1); }
.d-ph-kamer::before { content: ""; position: absolute; top: 10px; left: 50%; width: 30px; height: 14px; margin-left: -15px; border-radius: 0 0 16px 16px; background: #C9CFDB; transition: background .4s, box-shadow .4s; }
.d-ph-kamer[aria-pressed="true"] { background: #FFF6D8; color: #2E3B5E; }
.d-ph-kamer[aria-pressed="true"]::before { background: #F6C445; box-shadow: 0 10px 40px 14px rgba(246,196,69,.55); }
.d-ph-kamer[aria-pressed="true"] .d-icon { background: #EC8B48 !important; translate: 0 -4px; }
.d-ph-kamer:hover .d-icon { translate: 0 -4px; }
.d-ph-uitleg { display: none; background: #fff; border-radius: 20px; padding: 24px 26px !important; box-shadow: 0 16px 28px -22px rgba(30,43,69,.7); }
.d-ph-uitleg.is-actief { display: block; animation: d-app-in .35s ease-out 1; }
.d-ph-uitleg > * { margin: 0 0 .4rem !important; } .d-ph-uitleg h3 { font-size: 1.4rem !important; }
.d-poppenhuis:not(.is-js) .d-ph-uitleg { display: block; margin-bottom: 10px !important; }
@media (max-width: 781px) { .d-poppenhuis { grid-template-columns: 1fr; } .d-ph-kamers { grid-template-rows: 104px 104px; } }
/* Fotohokje-strip */
.d-fotostrip { position: relative; width: 210px; margin: 30px auto; background: #2E3138; padding: 14px 14px 6px !important; rotate: 4deg; box-shadow: 0 26px 40px -24px rgba(0,0,0,.7); transform-origin: 50% 0; }
.d-fotostrip figure { margin: 0 0 10px !important; background: #fff; padding: 6px 6px 4px !important; }
.d-fotostrip img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; filter: saturate(1.05); }
.d-fotostrip figcaption { font-family: var(--wp--preset--font-family--hand); font-size: 1.05rem; color: #2E3B5E; text-align: center; margin-top: 2px; }
.d-fs-punaise { position: absolute; left: 50%; top: -12px; width: 22px; height: 22px; margin-left: -11px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff 0 18%, #D85454 20%); box-shadow: 0 4px 6px rgba(0,0,0,.35); z-index: 2; }
@media (prefers-reduced-motion: no-preference) { .d-fotostrip { animation: d-strip 6s ease-in-out infinite; } @keyframes d-strip { 0%, 100% { rotate: 4deg; } 50% { rotate: -2deg; } } }
/* Voordeur met brievenbus */
.d-brievenbus { display: grid; grid-template-columns: 220px 1fr; gap: clamp(18px, 3vw, 34px); align-items: center; max-width: 720px; margin-inline: auto; }
.d-bb-deur { position: relative; height: 330px; border-radius: 110px 110px 8px 8px; background: #496390; box-shadow: inset 0 0 0 10px #3E5A7E, 0 26px 40px -26px rgba(30,43,69,.8); }
.d-bb-raampje { position: absolute; left: 50%; top: 34px; width: 90px; height: 90px; margin-left: -45px; border-radius: 50%; background: #DFE8F6; box-shadow: inset 0 0 0 6px #F6C445; }
.d-bb-klep { position: absolute; left: 50%; top: 172px; width: 120px; height: 34px; margin-left: -60px; border: 0; border-radius: 8px; background: #F6C445; cursor: pointer; box-shadow: inset 0 -6px 0 rgba(0,0,0,.18), 0 6px 10px -6px rgba(0,0,0,.5);
font: 700 12px var(--wp--preset--font-family--zonder-schreef, sans-serif); letter-spacing: .2em; color: #7A5A1E; transition: rotate .2s; transform-origin: 50% 0; }
.d-bb-klep:hover, .d-bb-klep.is-wip { rotate: x 40deg; }
.d-bb-klink { position: absolute; right: 22px; top: 210px; width: 12px; height: 34px; border-radius: 6px; background: #F6C445; }
.d-bb-brieven { position: relative; min-height: 200px; }
.d-bb-brief { display: none; background: #FFFDF7; border-radius: 6px; padding: 18px 20px !important; box-shadow: 0 16px 26px -18px rgba(30,43,69,.7); border-top: 6px solid #EC8B48; rotate: -1.5deg;
background-image: repeating-linear-gradient(180deg, transparent 0 27px, rgba(142,170,213,.3) 27px 28px); }
.d-bb-brief.is-uit { display: block; animation: d-brief-uit .55s cubic-bezier(.25,1.3,.45,1) 1; }
@keyframes d-brief-uit { from { translate: -120px 40px; rotate: -20deg; opacity: 0; scale: .5; } }
.d-bb-brief > * { margin: 0 !important; }
.d-bb-vraag { font-family: var(--wp--preset--font-family--hand); font-size: 1.5rem !important; color: #2E3B5E; line-height: 1.2; }
.d-bb-antwoord { margin-top: 8px !important; font-size: 15.5px; line-height: 1.6; }
.d-bb-hint { grid-column: 1 / -1; text-align: center; font-family: var(--wp--preset--font-family--hand); font-size: 1.2rem !important; color: #496390; margin: 0 !important; }
.d-brievenbus:not(.is-js) .d-bb-brief { display: block; margin-bottom: 12px !important; } .d-brievenbus:not(.is-js) .d-bb-hint { display: none; }
@media (max-width: 600px) { .d-brievenbus { grid-template-columns: 1fr; } .d-bb-deur { width: 200px; height: 290px; margin-inline: auto; } .d-bb-klep { top: 150px; } .d-bb-klink { top: 190px; } }
.d-et-stoelen { z-index: 1; padding: 0 30px; } .d-et-blad { z-index: 2; } .d-et-poten { position: relative; z-index: 2; }
.d-et-stoel { position: relative; } .d-et-stoel::after { content: ""; position: absolute; left: -6px; right: -6px; bottom: 34%; height: 8px; border-radius: 4px; background: inherit; filter: brightness(.85); }
.d-fotostrip { width: 172px; }
/* ===== Peuteropvang: eigen bouwstenen ===== */
.d-loep-section h2, .d-hinkel-section h2, .d-kapstok-section h2, .d-puzzel-section h2, .d-vm-section h2 { font-size: clamp(1.8rem, 2.8vw, 2.4rem) !important; }
/* Vergrootglas over de foto */
.d-loep { position: relative; width: min(360px, 82vw); aspect-ratio: 1; margin: 20px auto; }
.d-loep-foto { width: 100%; height: 100%; object-fit: cover; border-radius: 28px; border: 8px solid #fff; box-shadow: 0 22px 36px -24px rgba(30,43,69,.7); rotate: -2deg; }
.d-loep-glas { position: absolute; left: 30%; top: 30%; width: 130px; height: 130px; border-radius: 50%; border: 10px solid #2E3B5E; background-size: 260%; background-position: 40% 40%; box-shadow: 0 14px 24px -12px rgba(0,0,0,.6), inset 0 0 0 4px rgba(255,255,255,.6); }
.d-loep-steel { position: absolute; right: -46px; bottom: -40px; width: 22px; height: 70px; border-radius: 10px; background: #9B6B43; rotate: -45deg; box-shadow: inset -4px 0 0 rgba(0,0,0,.2); }
@media (prefers-reduced-motion: no-preference) {
.d-loep-glas { animation: d-loep-zoek 12s ease-in-out infinite; }
@keyframes d-loep-zoek { 0%, 100% { left: 30%; top: 28%; background-position: 40% 35%; } 25% { left: 6%; top: 50%; background-position: 5% 70%; } 50% { left: 52%; top: 52%; background-position: 80% 80%; } 75% { left: 50%; top: 4%; background-position: 78% 5%; } }
}
.d-loep-briefjes { display: grid; gap: 12px; margin-top: 1rem !important; }
.d-loep-briefje { display: flex; gap: 10px; align-items: flex-start; background: #FFFDF7; padding: 14px 16px; border-radius: 4px; box-shadow: 0 12px 18px -14px rgba(0,0,0,.5); rotate: -1deg; border-left: 6px solid #EC8B48; }
.d-loep-briefje:nth-child(2) { rotate: 1deg; border-left-color: #496390; }
.d-loep-briefje .d-icon { width: 22px; height: 22px; flex: none; margin: 2px 0 0 !important; background: #2E3B5E !important; }
.d-loep-briefje p { margin: 0 !important; font-size: 15.5px; }
.d-loep-section .d-hand-note { text-align: center; }
@media (max-width: 600px) { .d-loep-glas { width: 96px; height: 96px; border-width: 8px; } .d-loep-steel { right: -34px; bottom: -30px; height: 52px; width: 16px; } }
/* Hinkelbaan */
.d-hinkel { position: relative; max-width: 760px; margin: 1.6rem auto 0; display: flex; flex-direction: column-reverse; gap: 10px; padding: 10px 0; }
.d-hk-vak { display: grid; grid-template-columns: 120px 1fr; align-items: center; gap: 20px; cursor: pointer; }
.d-hk-nr { width: 120px; height: 100px; display: grid; place-items: center; border: 5px dashed rgba(255,255,255,.95); border-radius: 6px; font-family: var(--wp--preset--font-family--hand); font-size: 3rem; color: #fff; background: rgba(94,138,58,.55); }
.d-hk-vak:nth-child(even) .d-hk-nr { rotate: 2deg; } .d-hk-vak:nth-child(odd) .d-hk-nr { rotate: -2deg; }
.d-hk-tekst { background: #fff; border-radius: 16px; padding: 14px 18px !important; box-shadow: 0 12px 20px -16px rgba(30,43,69,.6); }
.d-hk-tekst > * { margin: 0 !important; } .d-hk-tekst h3 { font-size: 1.15rem !important; margin-bottom: 4px !important; } .d-hk-tekst p { font-size: 15px; line-height: 1.55; }
.d-hk-hemel { width: 120px; height: 80px; display: grid; place-items: center; border: 5px dashed rgba(255,255,255,.95); border-radius: 60px 60px 6px 6px; font-family: var(--wp--preset--font-family--hand); font-size: 1.25rem; color: #fff; background: rgba(236,139,72,.75); }
.d-hk-bal { position: absolute; left: 44px; width: 32px; height: 32px; border-radius: 50%; z-index: 2; pointer-events: none; transition: top .55s cubic-bezier(.3,1.6,.5,1);
background: radial-gradient(circle at 35% 30%, #fff 0 14%, transparent 16%), conic-gradient(#D85454 0 25%, #F6C445 0 50%, #496390 0 75%, #5E8A3A 0); box-shadow: 0 8px 10px -4px rgba(0,0,0,.4); top: calc(100% - 66px); }
.d-hk-vak.is-hier .d-hk-nr { background: rgba(236,139,72,.85); }
.d-hk-vak.is-hier .d-hk-tekst { box-shadow: 0 0 0 3px #F6C445, 0 12px 20px -16px rgba(30,43,69,.6); }
@media (max-width: 600px) { .d-hk-vak { grid-template-columns: 80px 1fr; gap: 12px; } .d-hk-nr { width: 80px; height: 74px; font-size: 2.2rem; } .d-hk-hemel { width: 80px; height: 60px; font-size: 1rem; } .d-hk-bal { left: 24px; } }
/* Kapstok met tasjes */
.d-kapstok-section { text-align: center; }
.d-kapstok { max-width: 1000px; margin: 1.4rem auto 0; }
.d-kh-plank { height: 22px; border-radius: 8px; background: #B98A5E; box-shadow: inset 0 -6px 0 #9B6B43, 0 10px 14px -10px rgba(0,0,0,.5); }
.d-kh-rij { display: flex; justify-content: space-around; gap: 10px; flex-wrap: wrap; }
.d-kh { --k: #EC8B48; position: relative; display: flex; flex-direction: column; align-items: center; width: 170px; padding: 0; border: 0; background: none; cursor: pointer; }
.d-kh-haak { width: 12px; height: 30px; border: 5px solid #8A8F99; border-top: 0; border-radius: 0 0 12px 12px; }
.d-kh-tas { position: relative; width: 96px; height: 104px; margin-top: -4px; border-radius: 18px 18px 26px 26px; background: var(--k); box-shadow: inset 0 -10px 0 rgba(0,0,0,.15), 0 14px 18px -12px rgba(0,0,0,.5); transform-origin: 50% -20px; rotate: calc((var(--n) - 2) * 2deg); transition: rotate .3s; }
.d-kh-tas::before { content: ""; position: absolute; left: 50%; top: -14px; width: 40px; height: 26px; margin-left: -20px; border: 5px solid var(--k); border-bottom: 0; border-radius: 20px 20px 0 0; filter: brightness(.85); }
.d-kh-tas::after { content: ""; position: absolute; left: 14px; right: 14px; top: 34px; height: 30px; border-radius: 8px; background: rgba(255,255,255,.3); }
.d-kh-naam { margin-top: 12px; background: #fff; border-radius: 10px; padding: 8px 12px; font-size: 14.5px; font-weight: 600; color: #2E3B5E; box-shadow: 0 8px 14px -10px rgba(30,43,69,.5); max-width: 160px; }
.d-kh:hover .d-kh-tas, .d-kh.is-wiebel .d-kh-tas { animation: d-tas-wiebel .8s ease-in-out 1; }
@keyframes d-tas-wiebel { 0%, 100% { rotate: 0deg; } 25% { rotate: 10deg; } 55% { rotate: -8deg; } 80% { rotate: 3deg; } }
@media (max-width: 600px) { .d-kh { width: 46%; } .d-kh-tas { width: 74px; height: 80px; } }
/* Puzzelstukjes */
.d-puzzel-section { text-align: center; background: #FFFBF4 !important; }
.d-puzzel { max-width: 960px; margin: 1.6rem auto 0; }
.d-pz-bord { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; }
.d-pz-stuk { position: relative; padding: 30px 24px 26px !important; text-align: center; color: #fff; transition: translate .9s cubic-bezier(.3,1.4,.5,1), rotate .9s cubic-bezier(.3,1.4,.5,1); z-index: 1; }
.d-pz-stuk > * { margin: 0 0 .4rem !important; position: relative; z-index: 1; }
.d-pz-stuk h3 { color: #fff; font-size: 1.3rem !important; } .d-pz-stuk p { font-size: 15px; line-height: 1.5; }
.d-pz-stuk .d-icon { width: 32px; height: 32px; background: #fff !important; margin: 0 auto 6px !important; display: block; }
.d-pz-0 { background: #EC8B48; border-radius: 22px 0 0 22px; } .d-pz-1 { background: #496390; } .d-pz-2 { background: #5E8A3A; border-radius: 0 22px 22px 0; }
.d-pz-0::after, .d-pz-1::after { content: ""; position: absolute; right: -22px; top: 50%; width: 44px; height: 44px; margin-top: -22px; border-radius: 50%; background: inherit; z-index: 2; }
.d-puzzel:not(.is-klaar) .d-pz-0 { translate: -30px 20px; rotate: -6deg; } .d-puzzel:not(.is-klaar) .d-pz-1 { translate: 0 -24px; rotate: 4deg; } .d-puzzel:not(.is-klaar) .d-pz-2 { translate: 30px 16px; rotate: 7deg; }
.d-pz-onder { display: inline-block; margin: 1.6rem 0 0 !important; background: #FCE3D1; border-radius: 16px; padding: 14px 20px !important; font-size: 15.5px; box-shadow: 0 10px 18px -14px rgba(0,0,0,.5); }
@media (max-width: 781px) { .d-pz-bord { grid-template-columns: 1fr; } .d-pz-0 { border-radius: 22px 22px 0 0; } .d-pz-2 { border-radius: 0 0 22px 22px; }
.d-pz-0::after, .d-pz-1::after { right: 50%; top: auto; bottom: -22px; margin: 0 -22px 0 0; } }
@media (prefers-reduced-motion: reduce) { .d-puzzel .d-pz-stuk { translate: none !important; rotate: none !important; } }
/* Kijkdoos (View-Master) */
.d-vm-section { text-align: center; }
.d-viewmaster { display: inline-flex; flex-direction: column; align-items: center; margin-top: 1.4rem; }
.d-vm-kop { position: relative; display: flex; gap: 46px; padding: 34px 46px 44px; background: #D85454; border-radius: 60px 60px 90px 90px; box-shadow: inset 0 -14px 0 rgba(0,0,0,.16), 0 26px 40px -26px rgba(30,43,69,.9); }
.d-vm-lens { position: relative; width: clamp(130px, 18vw, 190px); aspect-ratio: 1; border-radius: 50%; overflow: hidden; background: #2E3138; box-shadow: 0 0 0 10px #B23E3E, inset 0 0 30px rgba(0,0,0,.6); }
.d-vm-lens img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .35s ease; }
.d-vm-lens img.is-actief { opacity: 1; }
.d-vm-lens::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 30% 25%, rgba(255,255,255,.35) 0 12%, transparent 30%); box-shadow: inset 0 0 26px rgba(0,0,0,.5); pointer-events: none; }
.d-vm-neus { position: absolute; left: 50%; bottom: 0; width: 70px; height: 40px; margin-left: -35px; border-radius: 40px 40px 0 0; background: #FFFBF4; }
.d-vm-hendel { position: relative; width: 60px; height: 70px; margin-top: -56px; margin-left: 380px; border: 0; background: none; cursor: pointer; }
.d-vm-hendel span { position: absolute; left: 22px; top: 0; width: 16px; height: 60px; border-radius: 8px; background: #F6C445; box-shadow: inset -4px 0 0 rgba(0,0,0,.2); transform-origin: 50% 0; transition: rotate .2s; }
.d-vm-hendel.is-klik span { rotate: 30deg; }
.d-vm-hint { font-family: var(--wp--preset--font-family--hand); font-size: 1.25rem !important; color: #8A4B12; margin-top: 10px !important; }
@media (max-width: 600px) { .d-vm-kop { gap: 18px; padding: 24px 22px 36px; } .d-vm-lens { width: 116px; } .d-vm-hendel { margin-left: 0; margin-top: 12px; height: 40px; } .d-vm-hendel span { rotate: 90deg; height: 50px; top: -6px; } }
.d-pz-0 { z-index: 3; } .d-pz-1 { z-index: 2; } .d-pz-2 { z-index: 1; }
/* Locaties: plaatsnaamborden */
.d-plaatsborden-section { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }
.d-plaatsborden { display: flex; justify-content: center; align-items: flex-end; gap: clamp(1rem, 4vw, 3.5rem); flex-wrap: wrap; perspective: 700px; }
.d-pb-bordje { display: flex; flex-direction: column; align-items: center; position: relative; }
.d-pb-plaat { order: 1; position: relative; z-index: 1; min-width: 210px; padding: .8rem 1.4rem .7rem; text-align: center; background: #fff; border: 7px solid #C8382E; border-radius: 10px; box-shadow: 0 0 0 2px #fff, 0 0 0 4px #C8382E, 0 10px 18px rgba(30,43,69,.14); transform-origin: 50% 100%; transition: transform .7s cubic-bezier(.34,1.56,.64,1) calc(var(--n) * .2s); }
.d-pb-plaat strong { display: block; font-family: var(--wp--preset--font-family--schreef); font-weight: 400; font-size: 1.7rem; line-height: 1.1; color: var(--d-navy); }
.d-pb-plaat span { display: block; margin-top: .15rem; font-size: .95rem; color: #5B6478; }
.d-pb-bord .d-pb-plaat { background: #2F5DA8; border: 3px solid #fff; border-radius: 12px; box-shadow: 0 0 0 3px #2F5DA8, 0 10px 18px rgba(30,43,69,.14); }
.d-pb-bord .d-pb-plaat strong, .d-pb-bord .d-pb-plaat span { color: #fff; }
.d-pb-paal { order: 2; width: 10px; height: 46px; background: linear-gradient(90deg, #9AA3B2, #C9CFD8 45%, #8C95A5); border-radius: 0 0 3px 3px; }
.d-plaatsborden.is-js .d-pb-plaat { transform: rotateX(88deg); }
.d-plaatsborden.is-js.is-op .d-pb-plaat { transform: none; }
@media (max-width: 600px) { .d-plaatsborden { gap: .9rem; } .d-pb-plaat { min-width: 150px; padding: .6rem .9rem .55rem; border-width: 5px; } .d-pb-plaat strong { font-size: 1.3rem; } .d-pb-plaat span { font-size: .85rem; } .d-pb-paal { height: 26px; } }
/* Locaties: straatje met vier gevels */
.d-straat-section { overflow-x: clip; }
.d-straat { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(.6rem, 2vw, 1.6rem); align-items: end; max-width: 1080px; margin: 2rem auto 0 !important; position: relative; z-index: 1; }
.d-straat-stoep { max-width: 1140px; height: 18px; margin: -2px auto 0 !important; background: repeating-linear-gradient(90deg, #C9C2B4 0 46px, #B8B0A0 46px 48px); border-radius: 4px; box-shadow: 0 6px 0 #9DA47F; }
.d-straat-hint { text-align: center; font-family: var(--wp--preset--font-family--hand); font-size: 1.35rem !important; color: #496B3D; margin-top: 1.1rem !important; }
.d-huis { --muur: #D7764F; --dak: #6C4A3C; --kozijn: #fff; position: relative; display: flex; flex-direction: column; align-items: center; cursor: pointer; outline: none; }
.d-huis-otto { --muur: #C8613F; --dak: #5A3E36; }
.d-huis-saal { --muur: #8DB173; --dak: #496B3D; }
.d-huis-station { --muur: #F3D58A; --dak: #3E4C68; }
.d-huis-nest { --muur: #F1A983; --dak: #7A4B3A; }
.d-huis-dak { display: block; width: 112%; height: 92px; background: var(--dak); clip-path: polygon(50% 0, 100% 100%, 0 100%); margin-bottom: -1px; }
.d-huis-saal .d-huis-dak { height: 26px; width: 106%; clip-path: none; border-radius: 6px 6px 0 0; margin-top: 66px; }
.d-huis-station .d-huis-dak { clip-path: polygon(22% 0, 78% 0, 100% 100%, 0 100%); }
.d-huis-gevel { position: relative; width: 100%; height: 250px; background: var(--muur); display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 82px 1fr; gap: 14px 18px; padding: 18px 16% 0; box-sizing: border-box; }
.d-huis-otto .d-huis-gevel { background-image: repeating-linear-gradient(0deg, transparent 0 15px, rgba(0,0,0,.08) 15px 17px); }
.d-huis-raam { display: block; background: linear-gradient(135deg, #DCEBF8, #B9D2EC); border: 6px solid var(--kozijn); border-radius: 4px; box-shadow: inset 0 0 0 2px rgba(30,43,69,.08); background-image: linear-gradient(var(--kozijn), var(--kozijn)), linear-gradient(var(--kozijn), var(--kozijn)), linear-gradient(135deg, #DCEBF8, #B9D2EC); background-size: 4px 100%, 100% 4px, 100% 100%; background-position: center; background-repeat: no-repeat; transition: filter .4s; }
.d-huis-deur { grid-column: 1 / -1; justify-self: center; align-self: end; position: relative; width: 74px; height: 122px; background: #FFE7A3; border-radius: 38px 38px 0 0; overflow: hidden; perspective: 400px; box-shadow: 0 0 0 5px var(--kozijn); }
.d-huis-licht { position: absolute; inset: 0; background: radial-gradient(circle at 50% 80%, #FFF6D6, #FFD166 70%); }
.d-huis-deurblad { position: absolute; inset: 0; background: var(--dak); border-radius: 38px 38px 0 0; transform-origin: 0 50%; transition: transform .6s cubic-bezier(.4,1.4,.6,1); }
.d-huis-deurblad::after { content: ""; position: absolute; right: 12px; top: 58%; width: 9px; height: 9px; border-radius: 50%; background: #FFC94D; }
.d-huis-extra { position: absolute; pointer-events: none; z-index: 2; }
.d-huis-station .d-huis-extra { top: 34px; left: 50%; width: 46px; height: 46px; margin-left: -23px; border-radius: 50%; background: #fff; border: 4px solid #1E2B45; box-sizing: border-box; }
.d-huis-station .d-huis-extra::before, .d-huis-station .d-huis-extra::after { content: ""; position: absolute; left: 50%; bottom: 50%; width: 3px; background: #1E2B45; transform-origin: 50% 100%; border-radius: 2px; }
.d-huis-station .d-huis-extra::before { height: 14px; margin-left: -1.5px; transform: rotate(-30deg); }
.d-huis-station .d-huis-extra::after { height: 10px; margin-left: -1.5px; transform: rotate(90deg); animation: d-wijzer 8s linear infinite; }
@keyframes d-wijzer { to { transform: rotate(450deg); } }
.d-huis-nest .d-huis-extra { top: 74px; right: -6%; width: 58px; height: 26px; border-radius: 0 0 30px 30px; background: repeating-linear-gradient(-25deg, #8A5A3B 0 4px, #A8754E 4px 8px); }
.d-huis-nest .d-huis-extra::before { content: ""; position: absolute; left: 14px; top: -16px; width: 26px; height: 24px; border-radius: 50% 50% 45% 45%; background: #FFC94D; }
.d-huis-nest .d-huis-extra::after { content: ""; position: absolute; left: 34px; top: -8px; border: 5px solid transparent; border-left: 9px solid #EC8B48; }
.d-huis-otto .d-huis-extra { top: 22px; right: 22%; width: 22px; height: 40px; background: #5A3E36; border-radius: 2px 2px 0 0; }
.d-huis-saal .d-huis-extra { top: 22px; left: 10%; width: 3px; height: 46px; background: #5B6478; }
.d-huis-saal .d-huis-extra::after { content: ""; position: absolute; left: 3px; top: 0; width: 30px; height: 18px; background: #EC8B48; clip-path: polygon(0 0, 100% 50%, 0 100%); animation: d-vlag 2.4s ease-in-out infinite; transform-origin: 0 50%; }
@keyframes d-vlag { 50% { transform: scaleX(.75) skewY(4deg); } }
.d-huis-naam { margin: .7rem 0 0 !important; font-family: var(--wp--preset--font-family--schreef); font-size: 1.2rem !important; color: var(--d-navy); text-align: center; line-height: 1.2; }
.d-huis-binnen { position: absolute; left: -4%; right: -4%; bottom: 3.4rem; z-index: 3; background: #FFFBF0; border-radius: 16px; padding: 1rem 1rem .9rem; box-shadow: 0 14px 30px rgba(30,43,69,.2); transform: translateY(20px) scale(.3); transform-origin: 50% 100%; opacity: 0; visibility: hidden; transition: transform .45s cubic-bezier(.34,1.56,.64,1), opacity .25s, visibility 0s .45s; }
.d-huis-binnen p { font-size: .95rem !important; line-height: 1.45; margin: 0 0 .6rem !important; color: var(--d-navy); }
.d-huis-binnen a { font-weight: 700; color: #C8661F; text-decoration: none; font-size: .95rem; }
.d-huis-binnen a:hover { text-decoration: underline; }
.d-huis.is-open .d-huis-deurblad { transform: rotateY(-78deg); }
.d-huis.is-open .d-huis-binnen { transform: none; opacity: 1; visibility: visible; transition: transform .45s cubic-bezier(.34,1.56,.64,1) .25s, opacity .25s .25s, visibility 0s; }
.d-huis.is-open .d-huis-raam { filter: brightness(1.08) saturate(1.2); }
@media (hover: hover) { .d-huis:hover .d-huis-deurblad, .d-huis:focus-within .d-huis-deurblad { transform: rotateY(-78deg); } .d-huis:hover .d-huis-binnen, .d-huis:focus-within .d-huis-binnen { transform: none; opacity: 1; visibility: visible; transition: transform .45s cubic-bezier(.34,1.56,.64,1) .25s, opacity .25s .25s, visibility 0s; } }
.d-huis:focus-visible .d-huis-naam { text-decoration: underline; }
@media (max-width: 781px) {
.d-straat { grid-template-columns: 1fr 1fr; row-gap: 2.4rem; }
.d-huis-gevel { height: 210px; grid-template-rows: 64px 1fr; gap: 12px 14px; padding: 14px 14% 0; }
.d-huis-dak { height: 70px; } .d-huis-saal .d-huis-dak { height: 22px; margin-top: 48px; }
.d-huis-deur { width: 60px; height: 100px; }
.d-huis-binnen { left: -2%; right: -2%; bottom: 2.9rem; padding: .75rem .75rem .7rem; }
.d-huis-binnen p, .d-huis-binnen a { font-size: .85rem !important; }
.d-huis-naam { font-size: 1.05rem !important; }
.d-huis-station .d-huis-extra { top: 22px; width: 38px; height: 38px; margin-left: -19px; }
.d-huis-nest .d-huis-extra { top: 52px; }
}
/* Locaties: sleutelbos */
.d-sleutelbos { max-width: 780px; margin: 1.5rem auto 0 !important; position: relative; }
.d-sl-ring { width: 78%; height: 58px; margin: 0 auto; border: 7px solid #C9A14A; border-radius: 50%; box-shadow: inset 0 -3px 0 rgba(0,0,0,.12), 0 3px 0 #A88536; }
.d-sl-rij { display: flex; justify-content: space-around; margin-top: -30px !important; position: relative; z-index: 1; }
.d-sleutel { --k: #EC8B48; position: relative; display: flex; flex-direction: column; align-items: center; background: none; border: 0; padding: 0; cursor: pointer; font: inherit; color: inherit; transform-origin: 50% 0; animation: d-sl-zwaai 4s ease-in-out infinite; animation-delay: calc(var(--n) * -1.1s); }
@keyframes d-sl-zwaai { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }
.d-sleutel::before { content: ""; width: 14px; height: 26px; border: 4px solid #C9A14A; border-radius: 10px; box-sizing: border-box; margin-bottom: -6px; }
.d-sl-label { order: 1; display: flex; flex-direction: column; align-items: center; gap: .35rem; width: 116px; padding: 1rem .4rem .8rem; background: var(--k); color: #fff; border-radius: 50% 50% 46% 46% / 56% 56% 44% 44%; font-weight: 700; font-size: .92rem; line-height: 1.2; text-align: center; box-shadow: inset 0 -5px 0 rgba(0,0,0,.14), 0 6px 12px rgba(30,43,69,.15); transition: transform .5s; }
.d-sl-label .d-icon { --ink: #fff; width: 28px; height: 28px; }
.d-sl-baard { order: 2; position: relative; width: 18px; height: 78px; background: linear-gradient(90deg, #B8BEC9, #E6E9EE 50%, #A9B0BC); border-radius: 0 0 4px 4px; }
.d-sl-baard::after { content: ""; position: absolute; left: 100%; bottom: 6px; width: 20px; height: 30px; background: linear-gradient(#B8BEC9, #D7DBE2); clip-path: polygon(0 0, 100% 0, 100% 28%, 45% 28%, 45% 52%, 80% 52%, 80% 78%, 0 78%, 0 100%, 0 100%); }
.d-sleutel.is-actief { animation-play-state: paused; }
.d-sleutel.is-actief .d-sl-label { transform: translateY(-6px) scale(1.06); box-shadow: inset 0 -5px 0 rgba(0,0,0,.14), 0 0 0 4px #fff, 0 0 0 7px var(--k), 0 10px 18px rgba(30,43,69,.2); }
.d-sleutel.is-draai .d-sl-baard, .d-sleutel.is-draai .d-sl-label { animation: d-sl-draai .6s ease-in-out; }
@keyframes d-sl-draai { 50% { transform: rotateY(180deg); } }
.d-sl-teksten { position: relative; max-width: 620px; margin: 1.8rem auto 0 !important; background: #FFFBF0; border: 2px dashed #C9A14A; border-radius: 14px; padding: 1.1rem 1.4rem; min-height: 4.5rem; }
.d-sl-teksten::before { content: ""; position: absolute; left: 50%; top: -11px; width: 18px; height: 18px; margin-left: -9px; border-radius: 50%; background: #fff; border: 2px solid #C9A14A; }
.d-sl-uitleg { margin: 0 !important; font-size: 1.05rem !important; }
.d-sleutelbos.is-js .d-sl-uitleg:not(.is-actief) { display: none; }
.d-sleutelbos:not(.is-js) .d-sl-uitleg + .d-sl-uitleg { margin-top: .6rem !important; }
.d-sl-hint { text-align: center; font-family: var(--wp--preset--font-family--hand); font-size: 1.3rem !important; color: #9A6A00; margin-top: .8rem !important; }
@media (max-width: 600px) {
.d-sl-ring { width: 88%; height: 44px; border-width: 6px; }
.d-sl-rij { margin-top: -24px !important; }
.d-sl-label { width: 78px; padding: .75rem .25rem .6rem; font-size: .74rem; }
.d-sl-label .d-icon { width: 22px; height: 22px; }
.d-sl-baard { width: 14px; height: 56px; } .d-sl-baard::after { width: 15px; height: 22px; }
.d-sl-teksten { padding: .9rem 1rem; } .d-sl-uitleg { font-size: .98rem !important; }
}
/* Locaties: huizenblok met verlichte ramen */
.d-huizenblok { max-width: 760px; margin: 1.6rem auto 0 !important; display: flex; flex-direction: column; align-items: center; }
.d-hb-dak { width: 100%; height: 70px; background: #5A3E36; clip-path: polygon(8% 100%, 8% 40%, 20% 40%, 20% 0, 80% 0, 80% 40%, 92% 40%, 92% 100%); }
.d-hb-gevel { width: 84%; box-sizing: border-box; display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px 26px; padding: 26px 30px 0; background: #B65A3C; background-image: repeating-linear-gradient(0deg, transparent 0 17px, rgba(0,0,0,.08) 17px 19px); border-radius: 0 0 4px 4px; }
.d-hb-raam { position: relative; aspect-ratio: 4 / 3; padding: 0; border: 7px solid #fff; border-radius: 6px 6px 2px 2px; background: #1E2B45; overflow: hidden; cursor: zoom-in; box-shadow: 0 6px 0 #F3EBDD; transition: box-shadow .6s, transform .25s; }
.d-hb-raam img { display: block; width: 100%; height: 100%; object-fit: cover; transition: filter .8s; }
.d-hb-raam:hover { transform: scale(1.04); }
.d-hb-gordijn { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, #F2C6D0 0 13%, transparent 13% 87%, #F2C6D0 87%); opacity: .85; }
.d-hb-voordeur { display: block; align-self: end; justify-self: center; width: 56%; height: 100%; min-height: 96px; background: #2F5DA8; border-radius: 40px 40px 0 0; box-shadow: 0 0 0 6px #fff; position: relative; }
.d-hb-voordeur::after { content: ""; position: absolute; right: 18%; top: 55%; width: 9px; height: 9px; border-radius: 50%; background: #FFC94D; }
.d-huizenblok.is-js .d-hb-raam img { filter: brightness(.28) saturate(.4); }
.d-huizenblok.is-js .d-hb-raam.is-aan img { filter: none; }
.d-hb-raam.is-aan { box-shadow: 0 6px 0 #F3EBDD, 0 0 26px 6px rgba(255,201,77,.55); }
.d-hb-hint { text-align: center; font-family: var(--wp--preset--font-family--hand); font-size: 1.35rem !important; color: #496390; margin-top: 1.4rem !important; }
.d-hb-groot { position: fixed; inset: 0; z-index: 9999; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .8rem; padding: 1.2rem; background: rgba(30,43,69,.86); }
.d-hb-groot[hidden] { display: none; }
.d-hb-groot img { max-width: min(900px, 100%); max-height: 76vh; border: 10px solid #fff; border-radius: 8px; box-shadow: 0 20px 50px rgba(0,0,0,.35); animation: d-hb-pop .35s cubic-bezier(.34,1.56,.64,1); }
@keyframes d-hb-pop { from { transform: scale(.6); opacity: 0; } }
.d-hb-groot p { color: #fff; font-family: var(--wp--preset--font-family--hand); font-size: 1.5rem !important; margin: 0 !important; text-align: center; }
.d-hb-dicht { position: absolute; top: 14px; right: 16px; width: 46px; height: 46px; border-radius: 50%; border: 0; background: #fff; color: var(--d-navy); font-size: 1.8rem; line-height: 1; cursor: pointer; }
@media (max-width: 600px) {
.d-hb-dak { height: 50px; }
.d-hb-gevel { width: 90%; gap: 14px 12px; padding: 16px 14px 0; }
.d-hb-raam { border-width: 5px; }
.d-hb-voordeur { min-height: 70px; width: 64%; }
}
@media (prefers-reduced-motion: reduce) { .d-sleutel, .d-huis-station .d-huis-extra::after, .d-huis-saal .d-huis-extra::after { animation: none; } }
.d-straat-stoep { display: none; }
.d-huis-gevel::after { content: ""; position: absolute; top: 100%; left: -14%; right: -14%; height: 16px; background: repeating-linear-gradient(90deg, #C9C2B4 0 40px, #B8B0A0 40px 42px); box-shadow: 0 5px 0 #9DA47F; z-index: -1; }
.d-huis-naam { margin-top: calc(16px + .8rem) !important; }
.d-huis-binnen { bottom: calc(16px + 3.2rem + 130px); }
@media (max-width: 781px) { .d-huis-binnen { bottom: calc(16px + 2.9rem + 104px); } .d-huis-gevel::after { left: -10%; right: -10%; } }
@media (max-width: 600px) { .d-plaatsborden { gap: .5rem .7rem; } .d-pb-plaat { min-width: 0; padding: .5rem .65rem .45rem; border-width: 4px; box-shadow: 0 0 0 2px #fff, 0 0 0 3px #C8382E, 0 8px 14px rgba(30,43,69,.14); } .d-pb-plaat strong { font-size: 1.1rem; } .d-pb-plaat span { font-size: .78rem; } .d-pb-paal { height: 18px; width: 8px; } }
@media (max-width: 781px) { .d-huis-binnen { bottom: calc(16px + 3.4rem); } .d-huis.is-open .d-huis-naam { color: #C8661F; } }
/* Otto van Reesweg: bloementuin */
:root { --d-madelief: radial-gradient(circle, #FFC94D 0 21%, transparent 22%), repeating-conic-gradient(#fff 0 13deg, transparent 13deg 24deg); --d-klaver: radial-gradient(circle at 32% 32%, #6E9E45 0 23%, transparent 24%), radial-gradient(circle at 68% 32%, #6E9E45 0 23%, transparent 24%), radial-gradient(circle at 32% 68%, #6E9E45 0 23%, transparent 24%), radial-gradient(circle at 68% 68%, #6E9E45 0 23%, transparent 24%); --d-zon: radial-gradient(circle, #B8642A 0 24%, #EC8B48 25% 30%, transparent 31%), repeating-conic-gradient(#FFC94D 0 9deg, #F6B73C 9deg 18deg); }
/* zaadzakje */
.d-zaad-section { padding-top: 2rem !important; padding-bottom: 2rem !important; }
.d-zaad { display: flex; justify-content: center; align-items: center; gap: 0; max-width: 760px; margin: 0 auto !important; }
.d-zaad-voor { position: relative; z-index: 2; flex: 0 0 240px; height: 300px; box-sizing: border-box; padding: 1.1rem 1rem; background: #FFF8E6; border-radius: 6px; transform: rotate(-4deg); box-shadow: 0 12px 24px rgba(30,43,69,.16); overflow: hidden; display: flex; flex-direction: column; align-items: center; text-align: center; background-image: linear-gradient(#6E9E45 0 46px, transparent 46px); }
.d-zaad-voor::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 10px; background: repeating-linear-gradient(90deg, #FFF8E6 0 8px, transparent 8px 16px); opacity: .5; }
.d-zaad-merk { color: #fff; font-family: var(--wp--preset--font-family--hand); font-size: 1.3rem; line-height: 1; margin-top: -.2rem; }
.d-zaad-voor strong { margin-top: 1.4rem; font-family: var(--wp--preset--font-family--schreef); font-weight: 400; font-size: 1.6rem; line-height: 1.1; color: var(--d-navy); }
.d-zaad-plaats { font-size: .9rem; color: #496B3D; margin-top: .3rem; }
.d-zaad-bloem { position: absolute; bottom: 22px; width: 64px; height: 64px; border-radius: 50%; -webkit-mask: radial-gradient(circle, #000 0 69%, transparent 70%); mask: radial-gradient(circle, #000 0 69%, transparent 70%); }
.d-zb-1 { left: 18px; background: var(--d-klaver); bottom: 40px; }
.d-zb-2 { left: 50%; margin-left: -36px; width: 72px; height: 72px; background: var(--d-madelief); background-color: #F1A983; }
.d-zb-3 { right: 18px; background: var(--d-zon); bottom: 46px; width: 58px; height: 58px; }
.d-zaad-zaadjes { position: absolute; top: 46px; left: 0; right: 0; height: 0; }
.d-zaad-zaadjes i { position: absolute; top: 0; width: 6px; height: 9px; border-radius: 50%; background: #8A5A3B; opacity: 0; }
.d-zaad-zaadjes i:nth-child(1) { left: 30%; } .d-zaad-zaadjes i:nth-child(2) { left: 42%; } .d-zaad-zaadjes i:nth-child(3) { left: 55%; } .d-zaad-zaadjes i:nth-child(4) { left: 64%; } .d-zaad-zaadjes i:nth-child(5) { left: 74%; }
.d-zaad.is-op .d-zaad-zaadjes i { animation: d-zaadje 1.6s ease-in forwards; }
.d-zaad.is-op .d-zaad-zaadjes i:nth-child(2n) { animation-delay: .25s; } .d-zaad.is-op .d-zaad-zaadjes i:nth-child(3n) { animation-delay: .5s; }
@keyframes d-zaadje { 0% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(140px) rotate(160deg); } }
.d-zaad-achter { position: relative; z-index: 1; flex: 1 1 auto; max-width: 460px; margin-left: -18px; padding: 1.4rem 1.6rem 1.2rem 2.4rem; background: #fff; border-radius: 6px; transform: rotate(1.5deg); box-shadow: 0 10px 22px rgba(30,43,69,.12); background-image: repeating-linear-gradient(transparent 0 33px, #E7EEDD 33px 34px); }
.d-zaad-kop { font-family: var(--wp--preset--font-family--hand); font-size: 1.5rem !important; color: #496B3D; margin: 0 0 .5rem !important; }
.d-zaad-achter dl { margin: 0; }
.d-zaad-achter dl div { display: grid; grid-template-columns: 6.5rem 1fr; gap: .6rem; padding: .3rem 0; }
.d-zaad-achter dt { font-weight: 700; color: #496B3D; font-size: .95rem; }
.d-zaad-achter dd { margin: 0; font-size: .98rem; }
@media (max-width: 600px) {
.d-zaad { flex-direction: column; }
.d-zaad-voor { flex-basis: auto; width: 210px; height: 250px; }
.d-zaad-voor strong { font-size: 1.35rem; margin-top: 1.1rem; }
.d-zaad-achter { margin: -24px 0 0; padding: 2rem 1.1rem 1rem; width: 100%; box-sizing: border-box; }
.d-zaad-achter dl div { grid-template-columns: 5.2rem 1fr; }
}
/* bloemperk */
.d-bloemperk { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 3vw, 2.5rem); max-width: 1000px; margin: 1.6rem auto 0 !important; }
.d-bloemperk-aarde { display: none; }
.d-bloem { display: flex; flex-direction: column; align-items: center; }
.d-bloem-plant { position: relative; width: 150px; height: 230px; padding: 0; background: none; border: 0; cursor: pointer; transform-origin: 50% 100%; }
.d-bloem-plant::after { content: ""; position: absolute; left: -30px; right: -30px; bottom: 0; height: 26px; background: #8A5A3B; border-radius: 50% 50% 8px 8px / 100% 100% 8px 8px; box-shadow: inset 0 6px 0 rgba(255,255,255,.12); }
.d-bloem-steel { position: absolute; left: 50%; bottom: 18px; width: 8px; height: 120px; margin-left: -4px; background: #5E8A3A; border-radius: 4px; transform-origin: 50% 100%; transition: transform .9s cubic-bezier(.3,1.3,.6,1) calc(var(--n) * .3s); }
.d-bloem-steel i { position: absolute; width: 34px; height: 18px; background: #6E9E45; border-radius: 0 100% 0 100%; top: 52%; }
.d-bloem-steel i:first-child { right: 6px; transform: rotate(-20deg); border-radius: 100% 0 100% 0; }
.d-bloem-steel i:last-child { left: 6px; top: 30%; transform: rotate(20deg); }
.d-bloem-kop { position: absolute; left: 50%; top: 0; width: 110px; height: 110px; margin-left: -55px; border-radius: 50%; -webkit-mask: radial-gradient(circle, #000 0 69%, transparent 70%); mask: radial-gradient(circle, #000 0 69%, transparent 70%); transition: transform .6s cubic-bezier(.34,1.56,.64,1) calc(var(--n) * .3s + .6s); }
.d-bloem-clover .d-bloem-kop { background: var(--d-klaver); -webkit-mask: none; mask: none; }
.d-bloem-daisy .d-bloem-kop { background: var(--d-madelief); }
.d-bloem-sun .d-bloem-kop { background: var(--d-zon); }
.d-bloem-vlinder { position: absolute; left: 50%; top: 30px; width: 30px; height: 22px; opacity: 0; pointer-events: none; background: radial-gradient(ellipse at 25% 50%, #EC8B48 0 45%, transparent 47%), radial-gradient(ellipse at 75% 50%, #F1A983 0 45%, transparent 47%), linear-gradient(#1E2B45, #1E2B45) center / 3px 18px no-repeat; }
.d-bloem-plant.is-wiebel { animation: d-bloem-wiebel .8s ease-in-out; }
.d-bloem-plant.is-wiebel .d-bloem-vlinder { animation: d-vlinder-op 1.8s ease-out; }
@keyframes d-bloem-wiebel { 25% { transform: rotate(-7deg); } 55% { transform: rotate(5deg); } 80% { transform: rotate(-2deg); } }
@keyframes d-vlinder-op { 0% { opacity: 0; transform: translate(-50%, 0) scale(.5); } 15% { opacity: 1; } 100% { opacity: 0; transform: translate(40px, -120px) scale(1) rotate(15deg); } }
.d-bloemperk.is-js .d-bloem-steel { transform: scaleY(0); }
.d-bloemperk.is-js .d-bloem-kop { transform: scale(0); }
.d-bloemperk.is-js.is-op .d-bloem-steel, .d-bloemperk.is-js.is-op .d-bloem-kop { transform: none; }
.d-bloem-bordje { position: relative; margin-top: 1rem; padding: .9rem 1.1rem; background: #E2B887; background-image: repeating-linear-gradient(0deg, transparent 0 9px, rgba(122,75,58,.12) 9px 10px); border-radius: 10px; box-shadow: 0 5px 0 #B88A5A; text-align: center; color: #4A2F22; }
.d-bloem-bordje::before, .d-bloem-bordje::after { content: ""; position: absolute; top: 8px; width: 7px; height: 7px; border-radius: 50%; background: #7A4B3A; }
.d-bloem-bordje::before { left: 9px; } .d-bloem-bordje::after { right: 9px; }
.d-bloem-bordje h3 { font-size: 1.25rem !important; margin: 0 0 .3rem !important; color: #4A2F22; }
.d-bloem-bordje p { margin: 0 !important; font-size: .96rem !important; line-height: 1.45; }
@media (max-width: 781px) {
.d-bloemperk { grid-template-columns: 1fr; gap: 1.6rem; max-width: 420px; }
.d-bloem { display: grid; grid-template-columns: 96px 1fr; align-items: end; gap: .9rem; }
.d-bloem-plant { width: 96px; height: 150px; }
.d-bloem-plant::after { left: -6px; right: -6px; height: 18px; }
.d-bloem-steel { height: 80px; bottom: 12px; } .d-bloem-steel i { width: 24px; height: 13px; }
.d-bloem-kop { width: 76px; height: 76px; margin-left: -38px; }
.d-bloem-bordje { margin: 0; text-align: left; padding: .8rem .9rem; }
}
/* kas */
.d-kas-cols { gap: 3rem !important; }
.d-kas { position: relative; max-width: 440px; margin: 0 auto; }
.d-kas-dak { display: block; height: 90px; margin: 0 -14px; background: linear-gradient(rgba(220,235,248,.75), rgba(185,210,236,.85)); clip-path: polygon(50% 0, 100% 100%, 0 100%); position: relative; }
.d-kas-dak::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent calc(50% - 3px), #fff calc(50% - 3px) calc(50% + 3px), transparent calc(50% + 3px)), linear-gradient(transparent calc(100% - 6px), #fff calc(100% - 6px)); }
.d-kas-binnen { position: relative; aspect-ratio: 4 / 3.4; border: 8px solid #fff; border-top-width: 0; box-shadow: 0 14px 26px rgba(30,43,69,.15); overflow: hidden; perspective: 900px; background: #DCEBF8; }
.d-kas-binnen img { display: block; width: 100%; height: 100%; object-fit: cover; }
.d-kas-deur { position: absolute; top: 0; bottom: 0; width: 50%; background: linear-gradient(160deg, rgba(232,242,250,.82), rgba(200,222,240,.72)); box-shadow: inset 0 0 0 6px #fff; transition: transform 1.2s cubic-bezier(.5,0,.3,1) .2s; }
.d-kas-deur::before { content: ""; position: absolute; left: 6px; right: 6px; top: 50%; height: 6px; background: #fff; }
.d-kas-deur::after { content: ""; position: absolute; top: 50%; width: 6px; height: 26px; margin-top: 8px; background: #C9A14A; border-radius: 3px; }
.d-kas-l { left: 0; transform-origin: 0 50%; } .d-kas-l::after { right: 14px; }
.d-kas-r { right: 0; transform-origin: 100% 50%; } .d-kas-r::after { left: 14px; }
.d-kas.is-op .d-kas-l { transform: rotateY(-82deg); } .d-kas.is-op .d-kas-r { transform: rotateY(82deg); }
.d-kas-steker { position: absolute; left: -22px; bottom: -26px; z-index: 2; padding: .55rem 1rem; background: #fff; border-radius: 8px; font-family: var(--wp--preset--font-family--hand); font-size: 1.35rem; color: #496B3D; transform: rotate(-5deg); box-shadow: 0 6px 14px rgba(30,43,69,.15); }
.d-kas-steker::after { content: ""; position: absolute; left: 50%; top: 100%; width: 8px; height: 34px; margin-left: -4px; background: #C89A6A; border-radius: 0 0 4px 4px; z-index: -1; }
@media (max-width: 781px) { .d-kas { margin-top: 1rem; } .d-kas-steker { left: 6px; font-size: 1.2rem; } }
/* tuinkaart */
.d-tuinkaart { max-width: 980px; margin: 1.4rem auto 0 !important; }
.d-tk-veld { position: relative; aspect-ratio: 2.3 / 1; border-radius: 28px; background: #CFE3B4; background-image: repeating-linear-gradient(90deg, rgba(255,255,255,.18) 0 60px, transparent 60px 120px); box-shadow: inset 0 0 0 8px #B8D39A, 0 10px 22px rgba(30,43,69,.1); }
.d-tk-pad { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.d-tk-pad polyline { fill: none; stroke: #F3EBDD; stroke-width: 14; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.d-tk-boom { position: absolute; width: 70px; height: 70px; border-radius: 50%; background: #6E9E45; box-shadow: 18px 8px 0 -6px #5E8A3A; }
.d-tk-b1 { left: 3%; top: 8%; } .d-tk-b2 { right: 4%; top: 6%; width: 58px; height: 58px; }
.d-tk-plek { position: absolute; z-index: 2; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: .3rem; padding: 0; background: none; border: 0; cursor: pointer; font: inherit; }
.d-tk-plek::before { content: ""; position: absolute; top: 0; left: 50%; width: 62px; height: 62px; margin-left: -31px; border-radius: 50%; background: #496B3D; box-shadow: 0 0 0 5px #fff, 0 6px 12px rgba(30,43,69,.18); transition: background .3s, transform .3s; }
.d-tk-plek { padding-top: 0; }
.d-tk-plek .d-icon { --ink: #fff; position: relative; width: 30px; height: 30px; margin: 16px 0 12px !important; }
.d-tk-plek.is-actief::before { background: #EC8B48; transform: scale(1.12); }
.d-tk-naam { padding: .2rem .6rem; background: #fff; border-radius: 99px; font-size: .85rem; font-weight: 700; color: var(--d-navy); white-space: nowrap; box-shadow: 0 3px 8px rgba(30,43,69,.12); }
.d-tk-plek.is-actief .d-tk-naam { background: #EC8B48; color: #fff; }
.d-tk-beestje { position: absolute; z-index: 3; width: 34px; height: 30px; margin: -58px 0 0 18px; border-radius: 50% 50% 45% 45%; background: radial-gradient(circle at 30% 45%, #1E2B45 0 4px, transparent 5px), radial-gradient(circle at 70% 60%, #1E2B45 0 4px, transparent 5px), radial-gradient(circle at 45% 78%, #1E2B45 0 3px, transparent 4px), linear-gradient(90deg, transparent 48%, #1E2B45 48% 52%, transparent 52%), #D9402F; transition: left 1.1s ease-in-out, top 1.1s ease-in-out; pointer-events: none; }
.d-tk-beestje::before { content: ""; position: absolute; left: 50%; top: -9px; width: 16px; height: 12px; margin-left: -8px; border-radius: 50% 50% 30% 30%; background: #1E2B45; }
.d-tk-beestje.is-loop { animation: d-beestje 1.1s steps(6) ; }
@keyframes d-beestje { 50% { transform: rotate(10deg); } }
.d-tk-teksten { max-width: 640px; margin: 1.4rem auto 0 !important; padding: 1rem 1.3rem; background: #fff; border-radius: 14px; border-left: 8px solid #6E9E45; box-shadow: 0 8px 18px rgba(30,43,69,.08); min-height: 3.2rem; }
.d-tk-uitleg { margin: 0 !important; }
.d-tuinkaart.is-js .d-tk-uitleg:not(.is-actief) { display: none; }
.d-tk-note { text-align: center; }
@media (max-width: 781px) {
.d-tk-veld { aspect-ratio: 1 / 1.05; border-radius: 20px; }
.d-tk-plek::before { width: 46px; height: 46px; margin-left: -23px; box-shadow: 0 0 0 4px #fff, 0 4px 8px rgba(30,43,69,.18); } .d-tk-plek .d-icon { width: 22px; height: 22px; margin: 12px 0 9px !important; }
.d-tk-naam { font-size: .72rem; white-space: normal; text-align: center; max-width: 84px; line-height: 1.2; padding: .15rem .45rem; }
.d-tk-boom { width: 46px; height: 46px; } .d-tk-b2 { width: 40px; height: 40px; }
.d-tk-beestje { width: 26px; height: 23px; margin: -44px 0 0 12px; }
}
/* bolderkar */
.d-bolder { max-width: 900px; margin: 0 auto !important; }
.d-bolder-weg { position: relative; height: 150px; }
.d-bolder-weg::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 22px; background: #8D93A0; border-radius: 11px; background-image: linear-gradient(90deg, #fff 0 30px, transparent 30px 60px); background-size: 60px 3px; background-repeat: repeat-x; background-position: 0 50%; }
.d-bolder-wijzer { position: absolute; bottom: 22px; z-index: 1; display: block; padding: .45rem .9rem; background: #fff; color: #496B3D; font-weight: 700; font-size: .92rem; border-radius: 6px; box-shadow: 0 4px 0 rgba(0,0,0,.08); margin-bottom: 52px; }
.d-bolder-wijzer::after { content: ""; position: absolute; left: 50%; top: 100%; width: 7px; height: 52px; margin-left: -3.5px; background: #9AA3B2; }
.d-bw-van { left: 0; clip-path: none; } .d-bw-naar { right: 0; }
.d-bw-van::before, .d-bw-naar::before { content: ""; position: absolute; top: 50%; margin-top: -10px; border: 10px solid transparent; }
.d-bw-van::before { right: 100%; border-right-color: #fff; } .d-bw-naar::before { left: 100%; border-left-color: #fff; }
.d-bolder-kar { position: absolute; bottom: 14px; left: 20%; z-index: 2; width: 112px; height: 66px; }
.d-bolder-section.is-rij .d-bolder-kar { animation: d-bolder-rij 12s ease-in-out infinite; }
@keyframes d-bolder-rij { 0% { left: 20%; transform: scaleX(1); } 44% { left: calc(80% - 112px); transform: scaleX(1); } 50% { left: calc(80% - 112px); transform: scaleX(-1); } 94% { left: 20%; transform: scaleX(-1); } 100% { left: 20%; transform: scaleX(1); } }
.d-bolder-kar::before { content: ""; position: absolute; left: 6px; right: 14px; bottom: 14px; height: 32px; background: #C8382E; border-radius: 6px 6px 10px 10px; box-shadow: inset 0 -6px 0 rgba(0,0,0,.15); z-index: 2; }
.d-bk-kind { position: absolute; bottom: 38px; width: 22px; height: 22px; border-radius: 50%; background: #F2C9A5; z-index: 1; box-shadow: inset 0 7px 0 #7A4B3A; }
.d-bk-kind:nth-child(1) { left: 12px; } .d-bk-kind:nth-child(2) { left: 38px; bottom: 42px; background: #D9A27B; box-shadow: inset 0 7px 0 #1E2B45; } .d-bk-kind:nth-child(3) { left: 64px; box-shadow: inset 0 7px 0 #E0A82E; }
.d-bk-wiel { position: absolute; bottom: 0; width: 24px; height: 24px; border-radius: 50%; background: #1E2B45; box-shadow: inset 0 0 0 7px #1E2B45, inset 0 0 0 12px #C9CFD8; z-index: 3; }
.d-bk-wiel:nth-of-type(1) { left: 12px; } .d-bk-wiel:nth-of-type(2) { left: 70px; }
.d-bk-stang { position: absolute; right: -14px; bottom: 30px; width: 34px; height: 4px; background: #1E2B45; transform: rotate(-30deg); transform-origin: 0 50%; z-index: 1; }
.d-bolder-tekst { max-width: 640px; margin: 1.4rem auto 0 !important; text-align: center; font-size: 1.05rem !important; }
.d-bolder-tekst a { font-weight: 700; color: #C8661F; }
@media (max-width: 600px) { .d-bolder-weg { height: 160px; } .d-bolder-wijzer { font-size: .78rem; padding: .35rem .55rem; margin-bottom: 70px; } .d-bolder-wijzer::after { height: 70px; } .d-bolder-kar { transform: scale(.8); } @keyframes d-bolder-rij { 0% { left: 4%; transform: scale(.8); } 44% { left: calc(96% - 112px); transform: scale(.8); } 50% { left: calc(96% - 112px); transform: scale(-.8, .8); } 94% { left: 4%; transform: scale(-.8, .8); } 100% { left: 4%; transform: scale(.8); } } }
/* zeepbellen */
.d-bellen-cols { gap: 2.5rem !important; }
.d-bellen { position: relative; height: 470px; }
.d-bel { position: absolute; padding: 0; background: none; border: 0; cursor: pointer; display: flex; flex-direction: column; align-items: center; animation: d-bel-zweef 6s ease-in-out infinite; animation-delay: calc(var(--n) * -2s); }
.d-bel:nth-child(1) { left: 2%; top: 4%; --s: 220px; } .d-bel:nth-child(2) { right: 2%; top: 0; --s: 180px; } .d-bel:nth-child(3) { left: 36%; top: 50%; --s: 195px; }
@keyframes d-bel-zweef { 0%, 100% { transform: translate(0, 0); } 33% { transform: translate(6px, -12px); } 66% { transform: translate(-5px, -4px); } }
.d-bel-rand { position: relative; display: block; width: var(--s); height: var(--s); padding: 7px; box-sizing: border-box; border-radius: 50%; background: conic-gradient(#F7B5C8, #B9D2EC, #BFE3C9, #FFE59A, #F7B5C8); box-shadow: 0 10px 24px rgba(73,99,144,.22); transition: transform .3s, opacity .3s; }
.d-bel-rand img { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.d-bel-rand::after { content: ""; position: absolute; left: 18%; top: 12%; width: 26%; height: 16%; border-radius: 50%; background: rgba(255,255,255,.75); transform: rotate(-30deg); }
.d-bel-cap { margin-top: .5rem; font-family: var(--wp--preset--font-family--hand); font-size: 1.35rem; color: #496390; }
.d-bel-plop { position: absolute; top: 40%; left: 50%; transform: translate(-50%, -50%) scale(.3); font-family: var(--wp--preset--font-family--hand); font-size: 2rem; color: #C8661F; opacity: 0; pointer-events: none; }
.d-bel.is-plop .d-bel-rand { transform: scale(1.3); opacity: 0; }
.d-bel.is-plop .d-bel-plop { animation: d-plop .9s ease-out; }
.d-bel.is-terug .d-bel-rand { animation: d-bel-terug .5s cubic-bezier(.34,1.56,.64,1); }
@keyframes d-plop { 20% { opacity: 1; transform: translate(-50%, -50%) scale(1.1); } 100% { opacity: 0; transform: translate(-50%, -90%) scale(1); } }
@keyframes d-bel-terug { from { transform: scale(0); } }
.d-bellen-mini { position: absolute; inset: 0; pointer-events: none; }
.d-bellen-mini i { position: absolute; bottom: 0; width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgba(255,255,255,.9); background: rgba(255,255,255,.25); animation: d-mini-bel 7s linear infinite; opacity: 0; }
.d-bellen-mini i:nth-child(1) { left: 10%; } .d-bellen-mini i:nth-child(2) { left: 28%; animation-delay: 1.2s; width: 12px; height: 12px; } .d-bellen-mini i:nth-child(3) { left: 52%; animation-delay: 2.5s; } .d-bellen-mini i:nth-child(4) { left: 70%; animation-delay: 3.6s; width: 26px; height: 26px; } .d-bellen-mini i:nth-child(5) { left: 86%; animation-delay: 4.8s; width: 14px; height: 14px; } .d-bellen-mini i:nth-child(6) { left: 40%; animation-delay: 5.9s; }
@keyframes d-mini-bel { 0% { opacity: 0; transform: translateY(0); } 10% { opacity: 1; } 100% { opacity: 0; transform: translateY(-460px) translateX(20px); } }
@media (max-width: 781px) { .d-bellen { height: 500px; } .d-bel:nth-child(1) { left: 0; top: 0; --s: 170px; } .d-bel:nth-child(2) { right: 0; left: auto; top: 150px; --s: 150px; } .d-bel:nth-child(3) { left: 6%; top: 300px; --s: 155px; } }
/* plantensteker */
.d-steker-section { padding-top: 2rem !important; padding-bottom: 1rem !important; }
.d-steker { display: flex; flex-direction: column; align-items: center; }
.d-steker-bord { position: relative; z-index: 1; max-width: 460px; padding: 1rem 1.6rem 1.1rem; text-align: center; background: #E2B887; background-image: repeating-linear-gradient(0deg, transparent 0 11px, rgba(122,75,58,.12) 11px 12px); border-radius: 12px; box-shadow: 0 6px 0 #B88A5A; transform: rotate(-2deg); color: #4A2F22; }
.d-steker-oog { display: block; font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #7A4B3A; }
.d-steker-bord strong { display: block; font-family: var(--wp--preset--font-family--schreef); font-weight: 400; font-size: 1.5rem; margin: .15rem 0 .45rem; }
.d-steker-bord a { display: inline-block; font-weight: 700; color: #4A2F22; text-decoration: underline; text-underline-offset: 3px; }
.d-steker-stok { display: block; width: 16px; height: 54px; background: #C89A6A; box-shadow: inset -4px 0 0 rgba(0,0,0,.1); }
.d-steker-aarde { display: block; width: 160px; height: 22px; margin-top: -8px; background: #8A5A3B; border-radius: 50% 50% 6px 6px / 100% 100% 6px 6px; }
/* boeket-afsluiter */
.d-boeket { display: flex; justify-content: center; align-items: center; gap: clamp(1.5rem, 5vw, 4rem); max-width: 900px; margin: 0 auto !important; }
.d-boeket-bos { position: relative; flex: 0 0 230px; height: 320px; }
.d-bb { position: absolute; width: 74px; height: 74px; border-radius: 50%; -webkit-mask: radial-gradient(circle, #000 0 69%, transparent 70%); mask: radial-gradient(circle, #000 0 69%, transparent 70%); animation: d-bb-knik 5s ease-in-out infinite; }
.d-bb::after { content: none; }
.d-bb-1 { left: 20px; top: 40px; background: var(--d-madelief); background-color: #F1A983; } .d-bb-2 { left: 82px; top: 6px; width: 84px; height: 84px; background: var(--d-zon); animation-delay: -1s; } .d-bb-3 { left: 140px; top: 52px; background: var(--d-madelief); background-color: #B9D2EC; animation-delay: -2s; } .d-bb-4 { left: 56px; top: 92px; width: 64px; height: 64px; background: var(--d-klaver); -webkit-mask: none; mask: none; animation-delay: -3s; } .d-bb-5 { left: 118px; top: 110px; width: 60px; height: 60px; background: var(--d-madelief); background-color: #FFE59A; animation-delay: -4s; }
@keyframes d-bb-knik { 50% { transform: rotate(8deg) translateY(-3px); } }
.d-boeket-papier { position: absolute; left: 30px; right: 30px; top: 130px; bottom: 0; background: #E9C9A0; background-image: repeating-linear-gradient(115deg, transparent 0 18px, rgba(122,75,58,.1) 18px 20px); clip-path: polygon(0 0, 100% 0, 62% 100%, 38% 100%); }
.d-boeket-papier::before { content: ""; position: absolute; left: 34%; right: 34%; top: -20px; height: 60px; background: repeating-linear-gradient(90deg, #5E8A3A 0 6px, transparent 6px 14px); }
.d-boeket-strik { position: absolute; left: 50%; top: 200px; width: 70px; height: 30px; margin-left: -35px; background: radial-gradient(circle, #C8382E 0 7px, transparent 8px), radial-gradient(ellipse at 20% 50%, #EC6B5E 0 40%, transparent 42%), radial-gradient(ellipse at 80% 50%, #EC6B5E 0 40%, transparent 42%); }
.d-boeket-kaart { position: relative; flex: 0 1 440px; padding: 1.8rem 1.8rem 1.5rem; background: #FFFBF0; border-radius: 14px 14px 14px 14px; box-shadow: 0 14px 30px rgba(30,43,69,.15); transform: rotate(2deg); transform-origin: 0 30%; animation: d-kaart-zwaai 6s ease-in-out infinite; }
@keyframes d-kaart-zwaai { 50% { transform: rotate(-.5deg); } }
.d-boeket-kaart::before { content: ""; position: absolute; left: 18px; top: 50%; width: 14px; height: 14px; margin-top: -7px; border-radius: 50%; background: #E3EBD3; box-shadow: inset 0 0 0 2px #C9A14A; }
.d-boeket-touw { position: absolute; right: 100%; top: 50%; width: clamp(1.5rem, 5vw, 4rem); height: 2px; margin-right: -18px; background: #C9A14A; transform: rotate(-12deg); transform-origin: 100% 50%; }
.d-boeket-kaart .d-eyebrow, .d-boeket-kaart h2, .d-boeket-kaart > p { padding-left: 1.4rem; }
.d-boeket-kaart h2 { margin: .2rem 0 .6rem !important; }
.d-boeket-knop { display: inline-block; margin: .6rem 0 1rem 1.4rem; padding: .8rem 1.4rem; background: #EC8B48; color: #fff !important; border-radius: 99px; font-weight: 700; text-decoration: none; box-shadow: 0 4px 0 #C8661F; }
.d-boeket-knop:hover { transform: translateY(-2px); }
.d-boeket-kaart ul { list-style: none; margin: 0 0 0 1.4rem; padding: 0; border-top: 2px dashed #E2D6BF; }
.d-boeket-kaart li { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: .55rem 0; border-bottom: 2px dashed #E2D6BF; font-size: .95rem; }
.d-boeket-kaart li span { color: #5B6478; } .d-boeket-kaart li a { font-weight: 700; color: #496B3D; }
.d-boeket-sticker { position: absolute; right: -18px; top: -22px; width: 92px; height: 92px; display: flex; align-items: center; justify-content: center; text-align: center; border-radius: 50%; background: #6E9E45; color: #fff; font-family: var(--wp--preset--font-family--hand); font-size: 1.25rem; line-height: 1.05; transform: rotate(12deg); box-shadow: 0 0 0 4px #fff, 0 6px 12px rgba(30,43,69,.18); }
@media (max-width: 781px) { .d-boeket { flex-direction: column; } .d-boeket-bos { flex-basis: auto; width: 230px; height: 260px; transform: scale(.85); margin-bottom: -2rem; } .d-boeket-touw { display: none; } .d-boeket-kaart { padding: 1.5rem 1.2rem 1.2rem; transform: none; animation: none; } .d-boeket-sticker { right: -6px; top: -30px; width: 80px; height: 80px; font-size: 1.1rem; } }
@media (prefers-reduced-motion: reduce) { .d-bel, .d-bellen-mini i, .d-bb, .d-boeket-kaart, .d-bolder-kar { animation: none !important; } }
.d-zaad-achter { text-align: left; background-image: none; border-top: 10px solid #E3EBD3; }
.d-zaad-achter dl div + div { border-top: 1px dashed #DCE5CC; }
@media (min-width: 782px) { .d-bloem-bordje { flex: 1 1 auto; width: 100%; box-sizing: border-box; } }
.d-tk-steen { position: absolute; width: 18px; height: 12px; margin: -6px 0 0 -9px; border-radius: 50%; background: #F3EBDD; box-shadow: 0 2px 0 #B8D39A; } @media (max-width: 781px) { .d-tk-steen { width: 12px; height: 8px; margin: -4px 0 0 -6px; } }
.d-tk-plek { width: max-content; } @media (max-width: 781px) { .d-tk-veld { aspect-ratio: 1 / .82; } .d-tk-naam { max-width: 80px; } }
@media (max-width: 781px) { .d-kas { max-width: 290px; } .d-kas-dak { height: 64px; } }
@media (max-width: 781px) { .d-boeket-kaart::before { top: 16px; left: 50%; margin: 0 0 0 -7px; } .d-boeket-kaart .d-eyebrow, .d-boeket-kaart h2, .d-boeket-kaart > p { padding-left: 0; } .d-boeket-knop { margin-left: 0; } .d-boeket-kaart ul { margin-left: 0; } }
:root { --d-sala-top: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 60'%3E%3Cg stroke='%23D9601A' stroke-width='6' stroke-linecap='round'%3E%3Cpath d='M50 24 L42 10 M50 36 L42 50 M76 24 L82 10 M76 36 L82 50'/%3E%3C/g%3E%3Cpath d='M36 25 Q16 22 3 10 Q14 30 36 35 Z' fill='%23F07A2B'/%3E%3Cellipse cx='60' cy='30' rx='27' ry='11' fill='%23F07A2B'/%3E%3Cellipse cx='92' cy='30' rx='14' ry='12' fill='%23F07A2B'/%3E%3Ccircle cx='52' cy='27' r='3' fill='%23FFC94D'/%3E%3Ccircle cx='66' cy='33' r='3' fill='%23FFC94D'/%3E%3Ccircle cx='61' cy='24' r='2' fill='%23FFC94D'/%3E%3Ccircle cx='98' cy='23' r='3.5' fill='%231E2B45'/%3E%3Ccircle cx='98' cy='37' r='3.5' fill='%231E2B45'/%3E%3C/svg%3E"); --d-sala-kop: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 70'%3E%3Cellipse cx='70' cy='70' rx='42' ry='36' fill='%23F07A2B'/%3E%3Ccircle cx='54' cy='50' r='10' fill='%23fff'/%3E%3Ccircle cx='86' cy='50' r='10' fill='%23fff'/%3E%3Ccircle cx='56' cy='52' r='5' fill='%231E2B45'/%3E%3Ccircle cx='88' cy='52' r='5' fill='%231E2B45'/%3E%3Cpath d='M60 66 Q 70 74 80 66' stroke='%233B2A1E' stroke-width='3' fill='none' stroke-linecap='round'/%3E%3Ccircle cx='44' cy='64' r='4' fill='%23FF8FA3' opacity='.7'/%3E%3Ccircle cx='96' cy='64' r='4' fill='%23FF8FA3' opacity='.7'/%3E%3Ccircle cx='20' cy='66' r='9' fill='%23F07A2B'/%3E%3Ccircle cx='12' cy='60' r='4' fill='%23F07A2B'/%3E%3Ccircle cx='20' cy='56' r='4' fill='%23F07A2B'/%3E%3Ccircle cx='28' cy='59' r='4' fill='%23F07A2B'/%3E%3Ccircle cx='120' cy='66' r='9' fill='%23F07A2B'/%3E%3Ccircle cx='112' cy='59' r='4' fill='%23F07A2B'/%3E%3Ccircle cx='120' cy='56' r='4' fill='%23F07A2B'/%3E%3Ccircle cx='128' cy='60' r='4' fill='%23F07A2B'/%3E%3C/svg%3E"); }
/* De Saalamander: jungle */
.d-jblad { background: linear-gradient(90deg, transparent 48%, rgba(255,255,255,.35) 48% 52%, transparent 52%), linear-gradient(135deg, #6E9E45, #3F6B2C); }
/* lianen */
.d-lianen-section { padding-top: 1.5rem !important; }
.d-lianen { max-width: 1000px; margin: 0 auto !important; position: relative; text-align: center; }
.d-lianen-tak { position: relative; height: 22px; margin: 0 2%; background: #7A4B3A; border-radius: 11px; box-shadow: inset 0 -5px 0 rgba(0,0,0,.15); }
.d-lianen-tak i { position: absolute; top: -14px; width: 40px; height: 22px; border-radius: 0 100% 0 100%; background: #6E9E45; }
.d-lianen-tak i:nth-child(1) { left: 6%; transform: rotate(-20deg); } .d-lianen-tak i:nth-child(2) { left: 28%; top: 10px; transform: rotate(160deg); background: #5E8A3A; } .d-lianen-tak i:nth-child(3) { left: 52%; transform: rotate(-10deg); } .d-lianen-tak i:nth-child(4) { left: 74%; top: 10px; transform: rotate(170deg); } .d-lianen-tak i:nth-child(5) { left: 92%; transform: rotate(-30deg); background: #5E8A3A; }
.d-lianen-kop { display: inline-block; margin: 20px 0 0 !important; padding: .45rem 1.3rem; background: #5E8A3A; color: #fff; border-radius: 99px; font-family: var(--wp--preset--font-family--hand); font-size: 1.5rem !important; position: relative; }
.d-lianen-kop::before, .d-lianen-kop::after { content: ""; position: absolute; bottom: 100%; width: 4px; height: 20px; background: #5E8A3A; }
.d-lianen-kop::before { left: 20%; } .d-lianen-kop::after { right: 20%; }
.d-lianen-rij { display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px 22px; margin-top: 30px !important; }
.d-plank { position: relative; padding: .8rem 1rem; background: #D9A86C; background-image: repeating-linear-gradient(0deg, transparent 0 10px, rgba(122,75,58,.13) 10px 11px); border-radius: 8px; box-shadow: 0 5px 0 #A9784A; color: #3E2A1E; transform-origin: 50% -30px; animation: d-plank-zwaai 5s ease-in-out infinite; animation-delay: calc(var(--n) * -.8s); }
.d-plank::before, .d-plank::after { content: ""; position: absolute; bottom: 100%; width: 4px; height: 34px; background: #5E8A3A; border-radius: 2px; }
.d-plank::before { left: 18%; } .d-plank::after { right: 18%; }
@keyframes d-plank-zwaai { 0%, 100% { transform: rotate(-1.6deg); } 50% { transform: rotate(1.6deg); } }
.d-plank strong { display: block; font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: #6B3F2A; }
.d-plank span { display: block; font-size: 1rem; margin-top: .15rem; }
.d-plank a { color: inherit; }
@media (max-width: 600px) { .d-lianen-rij { grid-template-columns: 1fr 1fr; gap: 30px 12px; } .d-plank { padding: .65rem .6rem; } .d-plank span { font-size: .9rem; } .d-lianen-kop { font-size: 1.3rem !important; } }
/* regenboog */
.d-regenboog { position: relative; max-width: 980px; margin: 1.6rem auto 0 !important; }
.d-rb-boog { display: block; width: 72%; aspect-ratio: 2 / 1; margin: 0 auto -16%; background: radial-gradient(circle at 50% 100%, transparent 0 54%, #8EC3EE 54% 60%, #8DB173 60% 66%, #FFC94D 66% 72%, #F6A05A 72% 78%, #E86A5E 78% 84%, transparent 84%); clip-path: inset(0 0 0 0); transition: clip-path 1.6s ease-in-out; }
.d-regenboog.is-js .d-rb-boog { clip-path: inset(0 100% 0 0); }
.d-regenboog.is-js.is-op .d-rb-boog { clip-path: inset(0 0 0 0); }
.d-rb-kaarten { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem 30%; }
.d-rb-kaart { position: relative; padding: 2.4rem 1.4rem 1.3rem; background: #fff; border-radius: 22px; box-shadow: 0 12px 26px rgba(30,43,69,.12); }
.d-rb-kaart h3 { margin: 0 0 .4rem !important; font-size: 1.45rem !important; }
.d-rb-kaart p { margin: 0 !important; font-size: .98rem !important; }
.d-rb-figuur { position: absolute; top: -34px; left: 1.4rem; width: 70px; height: 56px; }
.d-rb-bfly .d-rb-figuur i { position: absolute; top: 4px; width: 32px; height: 44px; border-radius: 60% 60% 50% 50%; background: radial-gradient(circle at 50% 70%, #FFC94D 0 18%, transparent 19%), #EC8B48; animation: d-vleugel .9s ease-in-out infinite; }
.d-rb-bfly .d-rb-figuur i:first-child { left: 3px; transform-origin: 100% 50%; border-radius: 70% 20% 40% 60%; }
.d-rb-bfly .d-rb-figuur i:last-child { right: 3px; transform-origin: 0 50%; border-radius: 20% 70% 60% 40%; animation-name: d-vleugel-r; }
.d-rb-bfly .d-rb-figuur::after { content: ""; position: absolute; left: 50%; top: 6px; width: 6px; height: 42px; margin-left: -3px; border-radius: 3px; background: #1E2B45; }
@keyframes d-vleugel { 50% { transform: scaleX(.35); } } @keyframes d-vleugel-r { 50% { transform: scaleX(.35); } }
.d-rb-rainbow .d-rb-figuur { width: 84px; height: 42px; top: -24px; background: radial-gradient(circle at 50% 100%, transparent 0 34%, #8EC3EE 34% 46%, #8DB173 46% 58%, #FFC94D 58% 70%, #E86A5E 70% 82%, transparent 82%); }
.d-rb-rainbow .d-rb-figuur i { position: absolute; bottom: -8px; width: 30px; height: 18px; border-radius: 99px; background: #fff; box-shadow: 0 2px 6px rgba(30,43,69,.15); }
.d-rb-rainbow .d-rb-figuur i:first-child { left: -8px; } .d-rb-rainbow .d-rb-figuur i:last-child { right: -8px; }
@media (max-width: 781px) { .d-rb-boog { width: 92%; margin-bottom: -6%; } .d-rb-kaarten { grid-template-columns: 1fr; gap: 3rem; } }
/* bladerdak */
.d-bladerdak { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; max-width: 1060px; margin: 1.5rem auto 0 !important; }
.d-bd-tegel { position: relative; flex: 0 0 calc(25% - 12px); aspect-ratio: 1; padding: 0; border: 0; border-radius: 22px 6px 22px 6px; overflow: hidden; cursor: pointer; background: #3F6B2C; box-shadow: 0 8px 18px rgba(30,43,69,.15); }
.d-bd-tegel:nth-child(n+5) { flex-basis: calc(25% - 12px); }
.d-bd-tegel img { display: block; width: 100%; height: 100%; object-fit: cover; }
.d-bd-blad { position: absolute; bottom: -10%; width: 80%; height: 120%; border-radius: 0 100% 0 100%; background: linear-gradient(135deg, #7DB052, #3F6B2C); box-shadow: inset 0 0 0 2px rgba(255,255,255,.08); transition: transform .9s cubic-bezier(.5,0,.3,1) calc(var(--n) * .18s); }
.d-bd-blad::after { content: ""; position: absolute; left: 8%; top: 50%; width: 92%; height: 3px; background: rgba(255,255,255,.35); transform: rotate(-42deg); transform-origin: 0 50%; }
.d-bd-l { left: -20%; transform-origin: 0 100%; }
.d-bd-r { right: -20%; transform-origin: 100% 100%; border-radius: 100% 0 100% 0; background: linear-gradient(225deg, #8DB173, #4A7A33); }
.d-bd-r::after { left: auto; right: 8%; transform: rotate(42deg); transform-origin: 100% 50%; }
.d-bladerdak.is-open .d-bd-l { transform: rotate(-78deg); }
.d-bladerdak.is-open .d-bd-r { transform: rotate(78deg); }
.d-bd-tegel.is-ritsel .d-bd-l { animation: d-ritsel-l 1.1s ease-in-out; } .d-bd-tegel.is-ritsel .d-bd-r { animation: d-ritsel-r 1.1s ease-in-out; }
@keyframes d-ritsel-l { 40% { transform: rotate(-12deg); } 100% { transform: rotate(-78deg); } }
@keyframes d-ritsel-r { 40% { transform: rotate(12deg); } 100% { transform: rotate(78deg); } }
.d-bd-hint { text-align: center; }
@media (max-width: 781px) { .d-bladerdak { gap: 10px; } .d-bd-tegel, .d-bd-tegel:nth-child(n+5) { flex-basis: calc(50% - 5px); } .d-bd-tegel:last-child { flex-basis: calc(50% - 5px); } }
/* salamanderpad */
.d-salpad { position: relative; max-width: 820px; margin: 1.6rem auto 0 !important; }
.d-sp-lijn { position: absolute; left: 50%; top: 0; bottom: 0; width: 14px; margin-left: -7px; border-radius: 7px; background: repeating-linear-gradient(#E9DCC4 0 18px, transparent 18px 30px); }
.d-sp-sala { position: absolute; left: 50%; top: 0; z-index: 2; width: 92px; height: 46px; margin: -10px 0 0 -46px; background: var(--d-sala-top) center / contain no-repeat; transform: rotate(90deg); transition: top .25s linear; }
.d-salpad ol { list-style: none; margin: 0; padding: 30px 0 10px; display: grid; gap: 22px; }
.d-sp-halte { position: relative; width: calc(50% - 56px); box-sizing: border-box; padding: 1rem 1.2rem; background: #fff; border-radius: 18px; box-shadow: 0 8px 18px rgba(30,43,69,.1); border: 3px solid transparent; transition: border-color .4s, transform .4s; }
.d-sp-halte:nth-child(odd) { justify-self: start; } .d-sp-halte:nth-child(even) { justify-self: end; }
.d-sp-halte strong { display: block; font-size: 1.1rem; color: var(--d-navy); }
.d-sp-halte span:last-child { display: block; font-size: .96rem; color: #5B6478; }
.d-sp-noot { position: absolute; top: 50%; width: 36px; height: 36px; margin-top: -18px; border-radius: 50%; background: #E3EBD3; color: #496B3D; font-size: 1.2rem; line-height: 36px; text-align: center; transition: background .3s, color .3s, transform .3s; }
.d-sp-halte:nth-child(odd) .d-sp-noot { right: -64px; } .d-sp-halte:nth-child(even) .d-sp-noot { left: -64px; }
.d-sp-halte.is-bereikt { border-color: #8DB173; }
.d-sp-halte.is-bereikt .d-sp-noot { background: #EC8B48; color: #fff; transform: scale(1.15) rotate(-10deg); }
.d-sp-note { text-align: center; margin-top: 1.2rem !important; }
@media (max-width: 781px) {
.d-sp-lijn { left: 22px; } .d-sp-sala { left: 22px; width: 70px; height: 35px; margin-left: -35px; }
.d-sp-halte, .d-sp-halte:nth-child(even) { width: auto; justify-self: stretch; margin-left: 58px; }
.d-sp-halte:nth-child(odd) .d-sp-noot, .d-sp-halte:nth-child(even) .d-sp-noot { left: -54px; right: auto; width: 30px; height: 30px; margin-top: -15px; line-height: 30px; font-size: 1rem; z-index: 3; }
}
/* parkeerplein */
.d-plein { position: relative; max-width: 960px; margin: 1.5rem auto 0 !important; padding: 26px 26px 0; background: #6C7382; border-radius: 26px; background-image: radial-gradient(rgba(255,255,255,.06) 1px, transparent 1.5px); background-size: 9px 9px; }
.d-pp-vakken { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
.d-pp-vak { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: .6rem; min-height: 170px; padding: 1rem .8rem 4.4rem; background: none; border: 0; border-left: 4px dashed rgba(255,255,255,.85); color: #fff; font: inherit; font-weight: 700; font-size: 1rem; cursor: pointer; text-align: center; font-family: var(--wp--preset--font-family--hand); font-size: 1.35rem; line-height: 1.15; }
.d-pp-vak:last-child { border-right: 4px dashed rgba(255,255,255,.85); }
.d-pp-vak .d-icon { --ink: var(--k); width: 40px; height: 40px; }
.d-pp-vak.is-actief { background: rgba(255,255,255,.08); }
.d-pp-vak.is-actief span:last-child { color: var(--k); }
.d-pp-weg { position: relative; height: 70px; margin: 0 -26px; border-top: 4px solid rgba(255,255,255,.85); }
.d-pp-zebra { position: absolute; right: 8%; top: 8px; bottom: 8px; width: 70px; background: repeating-linear-gradient(90deg, #fff 0 10px, transparent 10px 20px); opacity: .85; }
.d-pp-auto { position: absolute; z-index: 2; left: 40px; top: 0; width: 78px; height: 44px; transition: left .9s cubic-bezier(.5,0,.3,1), top .9s cubic-bezier(.5,0,.3,1); background: radial-gradient(circle at 22% 100%, #1E2B45 0 9px, transparent 10px), radial-gradient(circle at 78% 100%, #1E2B45 0 9px, transparent 10px), linear-gradient(#BFE3F6, #BFE3F6) 30% 18% / 40% 30% no-repeat, linear-gradient(#E86A5E, #E86A5E) 50% 0 / 60% 55% no-repeat, linear-gradient(#E86A5E, #E86A5E) 0 100% / 100% 60% no-repeat; border-radius: 10px; }
.d-pp-teksten { margin: 0 -26px !important; padding: 1.1rem 1.4rem; background: #fff; border-radius: 0 0 26px 26px; border: 3px solid #6C7382; border-top: 0; min-height: 3.2rem; }
.d-pp-antwoord { margin: 0 !important; }
.d-plein.is-js .d-pp-antwoord:not(.is-actief) { display: none; }
@media (max-width: 781px) {
.d-plein { padding: 16px 16px 0; border-radius: 20px; }
.d-pp-vakken { grid-template-columns: 1fr 1fr; }
.d-pp-vak { min-height: 130px; padding: .8rem .5rem 3.4rem; font-size: 1.15rem; border-top: 4px dashed rgba(255,255,255,.85); }
.d-pp-vak:nth-child(2n) { border-right: 4px dashed rgba(255,255,255,.85); }
.d-pp-weg { margin: 0 -16px; height: 56px; } .d-pp-teksten { margin: 0 -16px !important; border-radius: 0 0 20px 20px; }
.d-pp-auto { width: 62px; height: 36px; }
}
/* speurtocht */
.d-zoek-cols { gap: 2.5rem !important; }
.d-zoekplaat { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; align-items: start; }
.d-zoek-foto { position: relative; margin: 0; }
.d-zoek-foto:nth-child(2) { margin-top: 44px; }
.d-zoek-foto img { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 16px; box-shadow: 0 10px 20px rgba(30,43,69,.15); }
.d-zoek-foto figcaption { margin-top: .5rem; text-align: center; font-family: var(--wp--preset--font-family--hand); font-size: 1.3rem; color: #C8661F; opacity: 0; transform: translateY(-6px); transition: opacity .4s, transform .4s; }
.d-zoek-foto.is-gevonden figcaption { opacity: 1; transform: none; }
.d-zoek-beest { position: absolute; width: 46px; height: 34px; padding: 0; border: 0; cursor: pointer; background: center / contain no-repeat; filter: drop-shadow(0 2px 3px rgba(0,0,0,.3)); animation: d-gluur 3.5s ease-in-out infinite; animation-delay: calc(var(--n) * -1.2s); }
.d-zb-sala { left: -14px; bottom: 30%; width: 64px; height: 32px; background-image: var(--d-sala-top); transform: rotate(-70deg); }
.d-zb-vlinder { right: -10px; top: 14px; background: radial-gradient(ellipse at 28% 45%, #EC8B48 0 40%, transparent 42%), radial-gradient(ellipse at 72% 45%, #F6A05A 0 40%, transparent 42%), linear-gradient(#1E2B45, #1E2B45) center / 4px 70% no-repeat; }
.d-zb-lhb { right: 12px; bottom: 34%; width: 30px; height: 26px; border-radius: 50%; background: radial-gradient(circle at 30% 45%, #1E2B45 0 3px, transparent 4px), radial-gradient(circle at 70% 60%, #1E2B45 0 3px, transparent 4px), linear-gradient(90deg, transparent 47%, #1E2B45 47% 53%, transparent 53%), #D9402F; }
@keyframes d-gluur { 0%, 70%, 100% { translate: 0 0; } 80% { translate: 0 -4px; } 90% { translate: 0 2px; } }
.d-zoek-beest.is-gevonden { animation: d-hupje .6s ease-out; }
@keyframes d-hupje { 40% { translate: 0 -18px; } }
.d-zoek-beest::after { content: ""; position: absolute; inset: -10px; border-radius: 50%; border: 3px solid #fff; opacity: 0; }
.d-zoek-foto.is-gevonden .d-zoek-beest::after { opacity: 1; border-color: #8DB173; }
.d-zoek-teller { font-weight: 700; color: #C8661F; background: #fff; display: inline-block; padding: .5rem 1rem; border-radius: 99px; box-shadow: 0 4px 10px rgba(30,43,69,.08); }
@media (max-width: 781px) { .d-zoekplaat { gap: 10px; } .d-zoek-foto:nth-child(2) { margin-top: 26px; } .d-zoek-foto figcaption { font-size: 1rem; } .d-zoek-beest { transform: scale(.8); } .d-zb-sala { transform: rotate(-70deg) scale(.8); } }
/* bladbriefje */
.d-bladbrief-section { padding-top: 2rem !important; padding-bottom: 1.5rem !important; }
.d-bladbrief { display: flex; justify-content: center; }
.d-bladbrief-blad { position: relative; max-width: 440px; padding: 1.6rem 3rem 1.7rem; text-align: center; color: #fff; background: linear-gradient(135deg, #7DB052, #3F6B2C); border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; box-shadow: 0 10px 20px rgba(63,107,44,.25); transform: rotate(-3deg); }
.d-bladbrief-blad::after { content: ""; position: absolute; left: 50%; bottom: -26px; width: 8px; height: 34px; margin-left: -4px; background: #3F6B2C; border-radius: 4px; transform: rotate(-12deg); }
.d-bladbrief-blad .d-eyebrow { color: #E3EBD3 !important; display: block; }
.d-bladbrief-blad strong { display: block; font-family: var(--wp--preset--font-family--schreef); font-weight: 400; font-size: 1.5rem; margin: .2rem 0 .5rem; }
.d-bladbrief-blad a { color: #fff; font-weight: 700; text-underline-offset: 3px; }
/* junglegordijn-afsluiter */
.d-junglegordijn { position: relative; max-width: 620px; margin: 0 auto !important; padding: 2rem 0 1rem; }
.d-jg-blad { position: absolute; top: -10px; bottom: -10px; z-index: 3; width: 56%; pointer-events: none; transition: transform 1.3s cubic-bezier(.5,0,.3,1); }
.d-jg-l { left: -4%; border-radius: 0 100% 0 100%; background: linear-gradient(135deg, #7DB052, #3F6B2C); transform-origin: 0 100%; }
.d-jg-r { right: -4%; border-radius: 100% 0 100% 0; background: linear-gradient(225deg, #8DB173, #4A7A33); transform-origin: 100% 100%; }
.d-junglegordijn.is-js .d-jg-blad { transform: none; }
.d-junglegordijn:not(.is-js) .d-jg-l, .d-junglegordijn.is-op .d-jg-l { transform: translateX(-62%) rotate(-24deg); }
.d-junglegordijn:not(.is-js) .d-jg-r, .d-junglegordijn.is-op .d-jg-r { transform: translateX(62%) rotate(24deg); }
.d-jg-kaart { position: relative; z-index: 2; padding: 2.2rem 2rem 1.6rem; background: #FFFBF0; border-radius: 22px; box-shadow: 0 14px 30px rgba(30,43,69,.15); text-align: center; }
.d-jg-sala { position: absolute; left: 50%; top: -40px; width: 104px; height: 52px; margin-left: -52px; background: var(--d-sala-kop) center bottom / contain no-repeat; }
.d-jg-ballon { position: absolute; left: calc(50% + 50px); top: -64px; padding: .35rem .8rem; background: #fff; border-radius: 14px; font-family: var(--wp--preset--font-family--hand); font-size: 1.35rem; color: #C8661F; box-shadow: 0 4px 10px rgba(30,43,69,.15); }
.d-jg-ballon::after { content: ""; position: absolute; left: 10px; top: 100%; border: 7px solid transparent; border-top-color: #fff; border-left-color: #fff; }
.d-jg-kaart h2 { margin: .2rem 0 .6rem !important; }
.d-jg-knop { display: inline-block; margin: .5rem 0 1rem; padding: .8rem 1.4rem; background: #EC8B48; color: #fff !important; border-radius: 99px; font-weight: 700; text-decoration: none; box-shadow: 0 4px 0 #C8661F; }
.d-jg-kaart ul { list-style: none; margin: 0; padding: 0; text-align: left; border-top: 2px dashed #E2D6BF; }
.d-jg-kaart li { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: .55rem 0; border-bottom: 2px dashed #E2D6BF; font-size: .95rem; }
.d-jg-kaart li span { color: #5B6478; } .d-jg-kaart li a { font-weight: 700; color: #496B3D; }
.d-jg-section { overflow-x: clip; }
@media (max-width: 600px) { .d-jg-kaart { padding: 2rem 1.1rem 1.2rem; } .d-jg-ballon { left: calc(50% + 44px); font-size: 1.15rem; } }
@media (prefers-reduced-motion: reduce) { .d-plank, .d-rb-bfly .d-rb-figuur i, .d-zoek-beest { animation: none !important; } }
.d-plein.is-js .d-pp-teksten:not(:has(.is-actief))::before { content: "Kies een parkeervak hierboven."; color: #5B6478; font-style: italic; }
.d-rb-boog { width: 46%; margin-bottom: -7%; } .d-rb-kaarten { gap: 1.4rem 22%; } @media (max-width: 781px) { .d-rb-boog { width: 70%; margin-bottom: 0; } }
@media (min-width: 782px) { .d-rb-boog { width: 64%; margin-bottom: -12%; } .d-rb-kaarten { gap: 1.4rem 30%; } .d-rb-kaart { padding-top: 2rem; } }
.d-bladerdak { max-width: 900px; }
.d-bladerdak.is-open .d-bd-l { transform: rotate(-58deg); } .d-bladerdak.is-open .d-bd-r { transform: rotate(58deg); }
@keyframes d-ritsel-l { 40% { transform: rotate(-12deg); } 100% { transform: rotate(-58deg); } }
@keyframes d-ritsel-r { 40% { transform: rotate(12deg); } 100% { transform: rotate(58deg); } }
.d-bladerdak.is-open .d-bd-l { transform: translate(-64%, 44%) rotate(-28deg); } .d-bladerdak.is-open .d-bd-r { transform: translate(64%, 44%) rotate(28deg); }
@keyframes d-ritsel-l { 0% { transform: translate(-64%, 44%) rotate(-28deg); } 45% { transform: translate(-10%, 5%) rotate(-4deg); } 100% { transform: translate(-64%, 44%) rotate(-28deg); } }
@keyframes d-ritsel-r { 0% { transform: translate(64%, 44%) rotate(28deg); } 45% { transform: translate(10%, 5%) rotate(4deg); } 100% { transform: translate(64%, 44%) rotate(28deg); } }
.d-sp-sala { width: 120px; height: 60px; margin: -14px 0 0 -60px; } @media (max-width: 781px) { .d-sp-sala { width: 80px; height: 40px; margin-left: -40px; } }
.d-zoek-beest { filter: drop-shadow(0 0 2px #fff) drop-shadow(0 0 2px #fff) drop-shadow(0 3px 4px rgba(0,0,0,.3)); }
.d-zb-vlinder { width: 58px; height: 44px; right: -14px; top: 10px; }
.d-zb-lhb { width: 38px; height: 34px; }
.d-zb-sala { width: 84px; height: 42px; left: -22px; }
.d-zb-vlinder { background: radial-gradient(ellipse 26% 40% at 27% 42%, #EC8B48 96%, transparent 100%), radial-gradient(ellipse 26% 40% at 73% 42%, #F6A05A 96%, transparent 100%), radial-gradient(ellipse 18% 24% at 32% 78%, #FFC94D 96%, transparent 100%), radial-gradient(ellipse 18% 24% at 68% 78%, #FFC94D 96%, transparent 100%), linear-gradient(#1E2B45, #1E2B45) center / 4px 70% no-repeat; }
.d-junglegordijn:not(.is-js) .d-jg-l, .d-junglegordijn.is-op .d-jg-l { transform: translateX(-88%) rotate(-18deg); }
.d-junglegordijn:not(.is-js) .d-jg-r, .d-junglegordijn.is-op .d-jg-r { transform: translateX(88%) rotate(18deg); }
.d-jg-kaart { z-index: 4; }
.d-jg-sala { width: 140px; height: 70px; top: -58px; margin-left: -70px; }
.d-jg-ballon { left: calc(50% + 66px); top: -78px; }
.d-jg-kaart { margin-top: 2.5rem; }
.d-rb-boog { background: radial-gradient(ellipse 50% 100% at 50% 100%, transparent 0 62%, #8EC3EE 62% 69.5%, #8DB173 69.5% 77%, #FFC94D 77% 84.5%, #F6A05A 84.5% 92%, #E86A5E 92% 99.5%, transparent 100%); }
@media (max-width: 781px) { .d-bladerdak { gap: 8px; } .d-bd-tegel, .d-bd-tegel:nth-child(n+5), .d-bd-tegel:last-child { flex-basis: calc(33.33% - 6px); border-radius: 14px 4px 14px 4px; } }
@media (max-width: 600px) { .d-bladbrief-blad { padding: 1.2rem 1.8rem 1.3rem; } .d-bladbrief-blad strong { font-size: 1.25rem; } .d-bladbrief-blad a { font-size: .9rem; } }
/* Het Stationnetje: trein en station */
/* vertrekbord */
.d-vertrekbord-section { padding-top: 2rem !important; padding-bottom: 2.5rem !important; }
.d-vertrekbord { position: relative; max-width: 620px; margin: 0 auto !important; padding: 0 0 .6rem; background: #1B2233; border-radius: 14px; box-shadow: 0 0 0 6px #3E4C68, 0 16px 30px rgba(30,43,69,.25); perspective: 600px; }
.d-vb-kop { display: flex; justify-content: space-between; align-items: center; padding: .7rem 1.2rem; background: #FFC94D; border-radius: 14px 14px 0 0; color: var(--d-navy); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; font-size: .9rem; }
.d-vb-klok { position: relative; width: 34px; height: 34px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 3px var(--d-navy); }
.d-vb-klok::before, .d-vb-klok::after { content: ""; position: absolute; left: 50%; bottom: 50%; width: 2px; margin-left: -1px; background: var(--d-navy); transform-origin: 50% 100%; }
.d-vb-klok::before { height: 9px; transform: rotate(-60deg); } .d-vb-klok::after { height: 12px; animation: d-wijzer 10s linear infinite; }
.d-vb-rij { display: grid; grid-template-columns: 6rem 1fr; align-items: center; gap: .8rem; padding: .55rem 1.2rem; border-bottom: 1px solid rgba(255,255,255,.08); }
.d-vb-label { color: #FFC94D; font-size: .8rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.d-vb-waarde { display: block; }
.d-vb-klep { position: relative; display: inline-block; padding: .3rem .65rem; background: #2B3448; border-radius: 4px; color: #fff; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 1rem; letter-spacing: .02em; transform-origin: 50% 50%; box-shadow: inset 0 -1px 0 rgba(0,0,0,.4); background-image: linear-gradient(transparent calc(50% - 1px), rgba(0,0,0,.45) calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px)); transition: transform .5s cubic-bezier(.34,1.56,.64,1) calc(var(--n) * .25s + .2s); }
.d-vb-klep a { color: #fff; }
.d-vertrekbord.is-js .d-vb-klep { transform: rotateX(90deg); }
.d-vertrekbord.is-js.is-op .d-vb-klep { transform: none; }
.d-vb-poot { position: absolute; top: 100%; width: 12px; height: 34px; background: #8D93A0; }
.d-vb-p1 { left: 18%; } .d-vb-p2 { right: 18%; }
@media (max-width: 600px) { .d-vb-rij { grid-template-columns: 4.6rem 1fr; padding: .5rem .8rem; gap: .5rem; } .d-vb-klep { font-size: .85rem; padding: .25rem .45rem; } .d-vb-kop { padding: .6rem .8rem; } }
/* koffer */
.d-koffer { max-width: 960px; margin: 2.2rem auto 0 !important; perspective: 1200px; }
.d-kf-deksel { position: relative; height: 84px; margin: 0 2%; background: #A8643A; border-radius: 24px 24px 6px 6px; box-shadow: inset 0 -8px 0 rgba(0,0,0,.15); transform-origin: 50% 100%; transition: transform 1s cubic-bezier(.4,1.3,.6,1); background-image: linear-gradient(90deg, transparent 14%, #7A4528 14% 17%, transparent 17% 83%, #7A4528 83% 86%, transparent 86%); }
.d-kf-handvat { position: absolute; left: 50%; top: -26px; width: 110px; height: 34px; margin-left: -55px; border: 9px solid #5C3320; border-bottom: 0; border-radius: 20px 20px 0 0; box-sizing: border-box; }
.d-kf-sticker { position: absolute; top: 18px; padding: .35rem .8rem; border-radius: 99px; font-family: var(--wp--preset--font-family--hand); font-size: 1.15rem; color: #fff; transform: rotate(-6deg); }
.d-kfs-1 { left: 22%; background: #496390; } .d-kfs-2 { right: 22%; background: #EC8B48; transform: rotate(5deg); }
.d-kf-bak { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; padding: 1.6rem; background: #E9C9A0; background-image: repeating-linear-gradient(45deg, rgba(255,255,255,.12) 0 10px, transparent 10px 20px); border: 10px solid #A8643A; border-top-width: 6px; border-radius: 6px 6px 22px 22px; box-shadow: 0 16px 28px rgba(30,43,69,.18); }
.d-kf-ding { padding: 1.3rem 1.2rem; border-radius: 16px; box-shadow: 0 6px 12px rgba(30,43,69,.12); transition: transform .6s cubic-bezier(.34,1.56,.64,1) calc(var(--n) * .15s + .5s), opacity .4s calc(var(--n) * .15s + .5s); }
.d-kf-ding:nth-child(1) { transform: rotate(-1.5deg); } .d-kf-ding:nth-child(3) { transform: rotate(1.5deg); }
.d-kf-ding h3 { font-size: 1.2rem !important; margin: .6rem 0 .3rem !important; }
.d-kf-ding p { margin: 0 !important; font-size: .96rem !important; }
.d-koffer.is-js .d-kf-deksel { transform: rotateX(0); }
.d-koffer.is-js.is-op .d-kf-deksel { transform: rotateX(38deg); }
.d-koffer.is-js .d-kf-ding { opacity: 0; transform: translateY(40px) scale(.9); }
.d-koffer.is-js.is-op .d-kf-ding { opacity: 1; transform: none; }
@media (max-width: 781px) { .d-kf-bak { grid-template-columns: 1fr; padding: 1rem; } .d-kf-deksel { height: 64px; } .d-kf-sticker { font-size: .95rem; top: 14px; } .d-kfs-1 { left: 8%; } .d-kfs-2 { right: 8%; } }
/* lijnkaart */
.d-lijnkaart { max-width: 1000px; margin: 1.4rem auto 0 !important; }
.d-lk-lijn { position: relative; display: flex; justify-content: space-between; padding: 92px 30px 20px; }
.d-lk-lijn::before { content: ""; position: absolute; left: 30px; right: 30px; top: 104px; height: 12px; border-radius: 6px; background: #EC8B48; }
.d-lk-station { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; width: 36px; padding: 0; background: none; border: 0; cursor: pointer; font: inherit; }
.d-lk-stip { width: 36px; height: 36px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 7px var(--d-navy); transition: transform .3s, box-shadow .3s; }
.d-lk-naam { position: absolute; left: 50%; bottom: 46px; transform-origin: 0 100%; transform: rotate(-32deg); white-space: nowrap; font-weight: 700; font-size: .95rem; color: var(--d-navy); }
.d-lk-station.is-actief .d-lk-stip { transform: scale(1.2); box-shadow: inset 0 0 0 7px #EC8B48, 0 0 0 5px #fff; }
.d-lk-station.is-actief .d-lk-naam { color: #C8661F; }
.d-lk-bakfiets { position: absolute; z-index: 2; top: 122px; left: 30px; width: 64px; height: 40px; margin-left: -32px; transition: left .9s cubic-bezier(.5,0,.3,1), top .9s cubic-bezier(.5,0,.3,1); background: radial-gradient(circle at 18% 82%, #1E2B45 0 7px, #C9CFD8 7px 9px, transparent 10px), radial-gradient(circle at 84% 82%, #1E2B45 0 7px, #C9CFD8 7px 9px, transparent 10px), linear-gradient(#496390, #496390) 2% 30% / 46% 46% no-repeat, linear-gradient(#1E2B45, #1E2B45) 60% 70% / 40% 4px no-repeat, linear-gradient(#1E2B45, #1E2B45) 82% 22% / 4px 50% no-repeat; }
.d-lk-perron { max-width: 620px; margin: 1.2rem auto 0 !important; padding: 1rem 1.3rem; background: #2F5DA8; color: #fff; border-radius: 12px; box-shadow: 0 0 0 4px #fff, 0 10px 20px rgba(30,43,69,.15); }
.d-lk-perron-kop { display: block; font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #FFC94D; }
.d-lk-uitleg { margin: .2rem 0 0 !important; }
.d-lk-uitleg strong { display: block; font-size: 1.3rem; font-family: var(--wp--preset--font-family--schreef); font-weight: 400; }
.d-lijnkaart.is-js .d-lk-uitleg:not(.is-actief) { display: none; }
@media (max-width: 781px) {
.d-lk-lijn { flex-direction: column; gap: 22px; padding: 10px 0 10px 76px; }
.d-lk-lijn::before { left: 88px; right: auto; top: 10px; bottom: 10px; width: 12px; height: auto; }
.d-lk-station { flex-direction: row; width: auto; gap: .8rem; align-self: flex-start; }
.d-lk-stip { flex: 0 0 36px; }
.d-lk-naam { position: static; transform: none; white-space: normal; text-align: left; }
.d-lk-bakfiets { left: 34px !important; margin-left: -32px; }
}
/* dagtrein */
.d-dagtrein { position: relative; max-width: 1200px; margin: 1.6rem auto 0 !important; overflow-x: auto; overflow-y: hidden; padding: 70px 4px 26px; scrollbar-width: thin; }
.d-dt-rit { display: flex; align-items: flex-end; width: max-content; transition: transform 2.6s cubic-bezier(.2,.7,.3,1); }
.d-dagtrein.is-js .d-dt-rit { transform: translateX(70vw); }
.d-dagtrein.is-js.is-op .d-dt-rit { transform: none; }
.d-dt-rit ol { display: flex; gap: 14px; list-style: none; margin: 0 0 0 14px; padding: 0; }
.d-dt-wagon { position: relative; flex: 0 0 150px; height: 126px; box-sizing: border-box; padding: .7rem .8rem; background: #FFC94D; border-radius: 12px 12px 6px 6px; box-shadow: inset 0 -14px 0 #2F5DA8; }
.d-dt-wagon:nth-child(3n+2) { background: #F6A05A; } .d-dt-wagon:nth-child(3n) { background: #8DB173; }
.d-dt-wagon::before { content: ""; position: absolute; left: -14px; bottom: 26px; width: 14px; height: 6px; background: #1E2B45; }
.d-dt-wagon strong { display: block; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 1.3rem; color: var(--d-navy); }
.d-dt-wagon span { display: block; font-size: .88rem; line-height: 1.3; color: var(--d-navy); margin-top: .2rem; }
.d-dt-wagon i, .d-dt-loc i { position: absolute; bottom: -14px; width: 28px; height: 28px; border-radius: 50%; background: #1E2B45; box-shadow: inset 0 0 0 8px #1E2B45, inset 0 0 0 14px #C9CFD8; }
.d-dt-wagon i:nth-of-type(1), .d-dt-loc i:nth-of-type(1) { left: 16px; } .d-dt-wagon i:nth-of-type(2), .d-dt-loc i:nth-of-type(2) { right: 16px; }
.d-dt-loc { position: relative; flex: 0 0 190px; height: 150px; padding: 0; border: 0; cursor: pointer; background: transparent; font: inherit; }
.d-dt-loc::before { content: ""; position: absolute; right: 0; bottom: 0; width: 76px; height: 150px; background: #1E2B45; border-radius: 12px 12px 6px 6px; box-shadow: inset 14px 18px 0 -6px #DCE6F6; }
.d-dt-loc::after { content: ""; position: absolute; left: 0; bottom: 0; width: 130px; height: 92px; background: #C8382E; border-radius: 40px 8px 6px 6px; }
.d-dt-schoorsteen { position: absolute; z-index: 1; left: 30px; bottom: 92px; width: 22px; height: 30px; background: #1E2B45; border-radius: 4px 4px 0 0; }
.d-dt-rook { position: absolute; left: 22px; bottom: 124px; width: 30px; height: 30px; border-radius: 50%; background: rgba(255,255,255,.9); box-shadow: 18px -16px 0 -4px rgba(255,255,255,.8), 36px -30px 0 -8px rgba(255,255,255,.7); animation: d-rook 2.4s ease-out infinite; }
@keyframes d-rook { 0% { opacity: 0; transform: translateY(10px) scale(.6); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(-20px) scale(1.2); } }
.d-dt-naam { position: absolute; z-index: 1; left: 12px; bottom: 30px; color: #fff; font-family: var(--wp--preset--font-family--hand); font-size: 1.05rem; white-space: nowrap; }
.d-dt-loc i { z-index: 1; }
.d-dt-toet { position: absolute; z-index: 3; right: -20px; top: -54px; padding: .35rem .8rem; background: #fff; border-radius: 14px; font-family: var(--wp--preset--font-family--hand); font-size: 1.3rem; color: #C8382E; box-shadow: 0 4px 10px rgba(30,43,69,.15); opacity: 0; transform: scale(.4); transition: opacity .2s, transform .3s cubic-bezier(.34,1.56,.64,1); }
.d-dt-loc.is-toet .d-dt-toet { opacity: 1; transform: none; }
.d-dt-loc.is-toet { animation: d-schud .3s ease-in-out 3; }
@keyframes d-schud { 50% { transform: translateY(-3px); } }
.d-dt-rails { display: block; position: relative; width: max(100%, 1500px); height: 12px; margin-top: 12px; background: repeating-linear-gradient(90deg, #8A5A3B 0 10px, transparent 10px 26px); border-top: 4px solid #8D93A0; }
.d-dt-hint { text-align: center; font-family: var(--wp--preset--font-family--hand); font-size: 1.25rem !important; color: #5B6478; margin-top: .4rem !important; }
@media (min-width: 1300px) { .d-dt-hint { display: none; } }
/* ijsje */
.d-ijsje-cols { gap: 2.5rem !important; }
.d-ijsje { position: relative; width: 340px; height: 470px; margin: 0 auto; }
.d-ij-bol { position: absolute; z-index: 2; width: 150px; height: 150px; padding: 0; border: 8px solid #F7B5C8; border-radius: 50%; overflow: visible; background: #fff; cursor: pointer; box-shadow: 0 8px 16px rgba(30,43,69,.15); }
.d-ij-bol img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.d-ij-bol:nth-of-type(1) { left: 18px; top: 200px; border-color: #F7B5C8; }
.d-ij-bol:nth-of-type(2) { left: 172px; top: 200px; border-color: #BFE3C9; }
.d-ij-bol:nth-of-type(3) { left: 95px; top: 82px; border-color: #FFE59A; z-index: 3; }
.d-ij-bol::after { content: ""; position: absolute; left: 30%; bottom: -16px; width: 22px; height: 24px; border-radius: 0 0 12px 12px; background: inherit; background: currentColor; color: inherit; }
.d-ij-bol:nth-of-type(1)::after { background: #F7B5C8; } .d-ij-bol:nth-of-type(2)::after { background: #BFE3C9; left: 55%; } .d-ij-bol:nth-of-type(3)::after { display: none; }
.d-ij-cap { position: absolute; left: 50%; top: 100%; margin-top: .3rem; transform: translateX(-50%) rotate(-4deg); white-space: nowrap; padding: .2rem .6rem; background: #fff; border-radius: 99px; font-family: var(--wp--preset--font-family--hand); font-size: 1.1rem; color: #C8661F; box-shadow: 0 3px 8px rgba(30,43,69,.12); z-index: 4; }
.d-ij-bol:nth-of-type(3) .d-ij-cap { top: -2.2rem; margin: 0; }
.d-ij-bol:nth-of-type(1) .d-ij-cap { top: auto; bottom: 100%; left: 20%; margin-bottom: .2rem; }
.d-ij-bol:nth-of-type(2) .d-ij-cap { top: auto; bottom: 100%; left: 80%; margin-bottom: .2rem; }
.d-ij-hoorn { position: absolute; left: 70px; top: 300px; width: 200px; height: 170px; clip-path: polygon(0 0, 100% 0, 50% 100%); background: #E0A86A; background-image: repeating-linear-gradient(45deg, transparent 0 16px, #C88A4A 16px 19px), repeating-linear-gradient(-45deg, transparent 0 16px, #C88A4A 16px 19px); }
.d-ij-bord { position: absolute; left: 0; top: 20px; padding: .3rem .9rem; background: #EC8B48; color: #fff; font-family: var(--wp--preset--font-family--hand); font-size: 1.5rem; border-radius: 10px; transform: rotate(-8deg); box-shadow: 0 4px 0 #C8661F; }
.d-ij-bol.is-wiebel { animation: d-ij-wiebel .7s ease-in-out; }
@keyframes d-ij-wiebel { 25% { transform: rotate(-8deg) scale(1.05); } 60% { transform: rotate(6deg); } }
@media (max-width: 781px) { .d-ijsje { transform: scale(.82); transform-origin: 50% 0; margin-bottom: -84px; } }
/* treinwagon */
.d-treinwagon { position: relative; overflow: hidden; margin: 1.4rem -2rem 0 !important; padding: 10px 0 0; }
.d-tw-rit { position: relative; width: max-content; margin: 0 auto; will-change: transform; }
.d-tw-wagon { position: relative; display: flex; gap: 16px; align-items: center; padding: 26px 30px 40px; background: #FFC94D; border-radius: 26px 26px 10px 10px; box-shadow: inset 0 -22px 0 #2F5DA8, inset 0 6px 0 rgba(255,255,255,.3); }
.d-tw-raam { position: relative; width: 168px; aspect-ratio: 4 / 3; padding: 0; border: 7px solid #fff; border-radius: 14px; overflow: hidden; background: #DCE6F6; cursor: zoom-in; }
.d-tw-raam img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.d-tw-raam:hover img { transform: scale(1.06); }
.d-tw-deur { order: 3; flex: 0 0 64px; align-self: stretch; margin: -6px 0 -18px; background: #E0A82E; border-radius: 10px 10px 0 0; box-shadow: inset 0 0 0 5px #fff, inset 0 40px 0 -10px #DCE6F6; }
.d-tw-raam:nth-child(n+4) { order: 4; }
.d-tw-wiel { position: absolute; bottom: -18px; width: 40px; height: 40px; border-radius: 50%; background: #1E2B45; box-shadow: inset 0 0 0 11px #1E2B45, inset 0 0 0 20px #C9CFD8; }
.d-tw-w1 { left: 40px; } .d-tw-w2 { left: 92px; } .d-tw-w3 { right: 92px; } .d-tw-w4 { right: 40px; }
.d-tw-rails { display: block; height: 12px; margin-top: 18px; background: repeating-linear-gradient(90deg, #8A5A3B 0 10px, transparent 10px 26px); border-top: 4px solid #8D93A0; }
.d-tw-hint { text-align: center; }
.d-tw-groot { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 1.2rem; background: rgba(30,43,69,.86); }
.d-tw-groot[hidden] { display: none; }
.d-tw-groot img { max-width: min(900px, 100%); max-height: 80vh; border: 10px solid #fff; border-radius: 14px; animation: d-hb-pop .35s cubic-bezier(.34,1.56,.64,1); }
.d-tw-dicht { position: absolute; top: 14px; right: 16px; width: 46px; height: 46px; border-radius: 50%; border: 0; background: #fff; color: var(--d-navy); font-size: 1.8rem; line-height: 1; cursor: pointer; }
@media (max-width: 781px) { .d-treinwagon { margin: 1rem -1rem 0 !important; } .d-tw-wagon { gap: 10px; padding: 18px 18px 32px; } .d-tw-raam { width: 118px; border-width: 5px; } .d-tw-deur { flex-basis: 46px; } .d-tw-wiel { width: 32px; height: 32px; bottom: -14px; box-shadow: inset 0 0 0 9px #1E2B45, inset 0 0 0 16px #C9CFD8; } }
/* overstap */
.d-overstap-section { padding-top: 2rem !important; padding-bottom: 2rem !important; }
.d-overstap { max-width: 620px; margin: 0 auto !important; text-align: center; }
.d-os-bord { display: inline-flex; align-items: center; gap: 1rem; padding: .9rem 1.4rem; background: #2F5DA8; color: #fff; border-radius: 10px; box-shadow: 0 0 0 4px #fff, 0 0 0 6px #2F5DA8, 0 10px 20px rgba(30,43,69,.15); text-align: left; text-decoration: none; }
.d-os-icoon { --ink: #fff; width: 34px; height: 34px; }
.d-os-tekst small { display: block; font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #FFC94D; }
.d-os-tekst strong { display: block; font-family: var(--wp--preset--font-family--schreef); font-weight: 400; font-size: 1.5rem; line-height: 1.1; }
.d-os-pijl { font-size: 2rem; line-height: 1; animation: d-os-pijl 1.6s ease-in-out infinite; }
@keyframes d-os-pijl { 50% { transform: translateX(6px); } }
.d-os-uitleg { margin-top: 1.2rem !important; font-size: 1.05rem !important; }
.d-os-uitleg a { font-weight: 700; color: #C8661F; }
/* kaartjesautomaat */
.d-automaat { display: flex; justify-content: center; align-items: center; max-width: 900px; margin: 0 auto !important; }
.d-am-kast { position: relative; z-index: 2; flex: 0 0 230px; display: flex; flex-direction: column; align-items: center; gap: 1rem; padding: 1.4rem 1.2rem 1.6rem; background: #FFC94D; border-radius: 26px; box-shadow: inset 0 -10px 0 rgba(0,0,0,.08), 0 14px 28px rgba(30,43,69,.18); }
.d-am-scherm { width: 100%; padding: .9rem .6rem; box-sizing: border-box; background: #1B2233; color: #8EE3A0; border-radius: 10px; text-align: center; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: .95rem; box-shadow: inset 0 0 0 4px #2B3448; }
.d-am-toetsen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; width: 70%; }
.d-am-toetsen i { height: 18px; border-radius: 5px; background: #fff; box-shadow: 0 3px 0 #C9A14A; }
.d-am-knop { width: 120px; height: 120px; border-radius: 50%; border: 0; background: #2F5DA8; color: #fff; font: inherit; font-weight: 700; font-size: .95rem; line-height: 1.2; padding: 1rem; cursor: pointer; box-shadow: 0 7px 0 #1E3E78, 0 10px 16px rgba(30,43,69,.2); transition: transform .1s, box-shadow .1s; }
.d-am-knop:active, .d-am-knop.is-druk { transform: translateY(5px); box-shadow: 0 2px 0 #1E3E78; }
.d-am-gleuf { position: absolute; right: -4px; top: 46%; width: 10px; height: 46%; margin-top: -60px; background: #1B2233; border-radius: 5px; }
.d-am-kaartje { position: relative; z-index: 1; flex: 0 1 440px; margin-left: -6px; padding: 1.6rem 1.8rem 1.4rem 2rem; background: #FFFBF0; border-radius: 0 16px 16px 0; box-shadow: 0 12px 26px rgba(30,43,69,.15); background-image: radial-gradient(circle at 0 50%, transparent 0 12px, transparent 12px), repeating-linear-gradient(transparent 0 6px, transparent 6px); border-left: 3px dashed #E2D6BF; transition: transform 1.4s cubic-bezier(.3,.9,.3,1), clip-path 1.4s cubic-bezier(.3,.9,.3,1); }
.d-automaat.is-js .d-am-kaartje { transform: translateX(-70%); clip-path: inset(0 0 0 70%); }
.d-automaat.is-js.is-op .d-am-kaartje { transform: none; clip-path: inset(0 0 0 0); }
.d-am-kaartje h2 { margin: .2rem 0 .6rem !important; }
.d-am-cta { display: inline-block; margin: .5rem 0 1rem; padding: .8rem 1.4rem; background: #EC8B48; color: #fff !important; border-radius: 99px; font-weight: 700; text-decoration: none; box-shadow: 0 4px 0 #C8661F; }
.d-am-kaartje ul { list-style: none; margin: 0; padding: 0; border-top: 2px dashed #E2D6BF; }
.d-am-kaartje li { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: .55rem 0; border-bottom: 2px dashed #E2D6BF; font-size: .95rem; }
.d-am-kaartje li span { color: #5B6478; } .d-am-kaartje li a { font-weight: 700; color: #2F5DA8; }
@media (max-width: 781px) {
.d-automaat { flex-direction: column; }
.d-am-kast { flex-basis: auto; width: 230px; box-sizing: border-box; flex-direction: row; flex-wrap: wrap; justify-content: center; padding: 1rem; }
.d-am-toetsen { display: none; } .d-am-knop { width: 96px; height: 96px; font-size: .85rem; }
.d-am-gleuf { right: auto; left: 15%; top: auto; bottom: -4px; width: 70%; height: 10px; margin: 0; }
.d-am-kaartje { margin: -6px 0 0; width: 100%; box-sizing: border-box; border-radius: 0 0 16px 16px; border-left: 0; border-top: 3px dashed #E2D6BF; padding: 1.5rem 1.2rem 1.2rem; }
.d-automaat.is-js .d-am-kaartje { transform: translateY(-60%); clip-path: inset(60% 0 0 0); }
}
@media (prefers-reduced-motion: reduce) { .d-dt-rook, .d-os-pijl, .d-vb-klok::after { animation: none !important; } }
.d-vertrekbord, .d-koffer, .d-dagtrein, .d-lijnkaart { text-align: left; }
@media (min-width: 782px) { .d-lk-lijn { padding-top: 130px; } .d-lk-lijn::before { top: 142px; } .d-lk-bakfiets { top: 160px; } .d-lijnkaart-section .d-hand-note { margin-bottom: 0 !important; } }
@media (max-width: 781px) { .d-dt-loc { flex-basis: 140px; height: 118px; } .d-dt-loc::before { width: 56px; height: 118px; } .d-dt-loc::after { width: 98px; height: 72px; } .d-dt-schoorsteen { left: 22px; bottom: 72px; } .d-dt-rook { left: 14px; bottom: 100px; } .d-dt-naam { font-size: .85rem; bottom: 24px; left: 8px; } .d-dt-wagon { flex-basis: 132px; height: 116px; } .d-dagtrein { padding-top: 60px; } }
@media (max-width: 781px) { .d-ijsje { margin-bottom: -120px; } }
/* Het Stationnetje: ronde kopfoto even groot als op de andere subpagina's */
@media (min-width: 782px) { body:not(.home) .d-play-hero .d-hero-blob { max-width: 380px; margin-inline: auto !important; } body:not(.home) .d-play-hero .d-hero-blob img { max-height: min(370px, calc(100vh - 300px)); aspect-ratio: 1; object-fit: cover; } }
@media (max-width: 781px) { body:not(.home) .d-play-hero .d-hero-blob { max-width: 260px; margin-inline: auto !important; } }
/* Doortje Express: naam onder het raampje, niet erachter */
.d-train .d-loco-name { bottom: 14px; font-size: 1.15rem !important; transform: rotate(-3deg); }
/* Het Warme Nest: vogels en dieren (figuren uit werelden.css) */
:root { --d-zebra: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 90 110'%3E %3Cpath d='M20 110 V 70 C 20 40 30 20 45 20 C 60 20 70 40 70 70 V 110 Z' fill='%23fff' stroke='%231E2B45' stroke-width='3'/%3E %3Cpath d='M24 50 H 66 M22 64 H 68 M22 80 H 68 M22 96 H 68' stroke='%231E2B45' stroke-width='6'/%3E %3Cellipse cx='45' cy='36' rx='22' ry='18' fill='%23fff' stroke='%231E2B45' stroke-width='3'/%3E %3Cpath d='M30 28 H 60 M28 38 H 34 M56 38 H 62' stroke='%231E2B45' stroke-width='5'/%3E %3Cpath d='M32 18 L 28 4 L 40 14 Z M58 18 L 62 4 L 50 14 Z' fill='%23fff' stroke='%231E2B45' stroke-width='3' stroke-linejoin='round'/%3E %3Cpath d='M40 12 C 44 2 50 2 52 12' stroke='%231E2B45' stroke-width='6' fill='none'/%3E %3Ccircle cx='37' cy='34' r='3.5' fill='%231E2B45'/%3E%3Ccircle cx='53' cy='34' r='3.5' fill='%231E2B45'/%3E %3Cellipse cx='45' cy='46' rx='12' ry='7' fill='%23C9CED8'/%3E%3Ccircle cx='41' cy='46' r='1.6' fill='%231E2B45'/%3E%3Ccircle cx='49' cy='46' r='1.6' fill='%231E2B45'/%3E %3C/svg%3E"); --d-olifant: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 110 110'%3E %3Cellipse cx='22' cy='44' rx='20' ry='24' fill='%23A7B4C8' stroke='%231E2B45' stroke-width='3'/%3E %3Cellipse cx='88' cy='44' rx='20' ry='24' fill='%23A7B4C8' stroke='%231E2B45' stroke-width='3'/%3E %3Cellipse cx='55' cy='46' rx='30' ry='28' fill='%23BCC7D8' stroke='%231E2B45' stroke-width='3'/%3E %3Cpath d='M48 62 C 46 84 52 98 64 104 C 70 106 72 98 66 96 C 58 92 60 80 62 62 Z' fill='%23BCC7D8' stroke='%231E2B45' stroke-width='3' stroke-linejoin='round'/%3E %3Ccircle cx='44' cy='42' r='4' fill='%231E2B45'/%3E%3Ccircle cx='66' cy='42' r='4' fill='%231E2B45'/%3E %3Ccircle cx='40' cy='54' r='4' fill='%23FF8FA3' opacity='.7'/%3E%3Ccircle cx='70' cy='54' r='4' fill='%23FF8FA3' opacity='.7'/%3E %3C/svg%3E"); --d-flamingo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 130'%3E %3Cpath d='M40 130 C 40 100 28 90 28 70 C 28 52 40 46 48 40' stroke='%23F49AB4' stroke-width='12' fill='none' stroke-linecap='round'/%3E %3Ccircle cx='50' cy='30' r='16' fill='%23F7AFC4' stroke='%231E2B45' stroke-width='3'/%3E %3Cpath d='M62 28 C 76 30 78 40 70 48 C 68 42 64 38 60 38 Z' fill='%231E2B45'/%3E %3Cpath d='M62 28 C 72 28 76 34 72 40' fill='%23fff'/%3E %3Ccircle cx='48' cy='26' r='3.5' fill='%231E2B45'/%3E %3Ccircle cx='42' cy='34' r='3' fill='%23FF6F91' opacity='.6'/%3E %3C/svg%3E"); --d-vogel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 70 60'%3E %3Cpath d='M10 40 C 10 20 26 8 42 10 C 56 12 62 24 60 34 L 68 36 L 60 40 C 58 52 44 58 30 56 C 18 54 10 50 10 40 Z' fill='%23F07A2B' stroke='%231E2B45' stroke-width='2.5'/%3E %3Cpath d='M22 36 C 30 30 40 32 44 40' stroke='%231E2B45' stroke-width='2.5' fill='none' stroke-linecap='round'/%3E %3Ccircle cx='48' cy='24' r='3' fill='%231E2B45'/%3E %3Cpath d='M30 56 V 60 M38 56 V 60' stroke='%231E2B45' stroke-width='2.5'/%3E %3C/svg%3E"); }
/* vogelhuisje */
.d-vogelhuis-section { padding-top: 2rem !important; }
.d-vogelhuis { position: relative; max-width: 520px; margin: 0 auto !important; display: flex; flex-direction: column; align-items: center; }
.d-vh-dak { display: block; width: 112%; height: 86px; background: #7A4B3A; clip-path: polygon(50% 0, 100% 100%, 0 100%); margin-bottom: -2px; }
.d-vh-kast { position: relative; width: 100%; box-sizing: border-box; padding: 92px 1.6rem 1.4rem; background: #EC8B48; background-image: repeating-linear-gradient(90deg, transparent 0 58px, rgba(0,0,0,.06) 58px 60px); border-radius: 0 0 14px 14px; box-shadow: 0 14px 26px rgba(30,43,69,.15); }
.d-vh-gat { position: absolute; left: 50%; top: 12px; width: 66px; height: 66px; margin-left: -33px; border-radius: 50%; background: #3B2A1E; box-shadow: 0 0 0 7px #C8661F; overflow: hidden; }
.d-vh-vogel { position: absolute; left: 6px; top: 66px; width: 56px; height: 48px; background: var(--d-vogel) center / contain no-repeat; transition: top .6s cubic-bezier(.34,1.56,.64,1) .4s; }
.d-vogelhuis.is-op .d-vh-vogel, .d-vogelhuis:not(.is-js) .d-vh-vogel { top: 14px; }
.d-vh-kast::before { content: ""; position: absolute; left: 50%; top: 84px; width: 46px; height: 8px; margin-left: -23px; background: #7A4B3A; border-radius: 4px; }
.d-vh-tsjilp { position: absolute; left: calc(50% + 46px); top: -4px; padding: .25rem .7rem; background: #fff; border-radius: 12px; font-family: var(--wp--preset--font-family--hand); font-size: 1.25rem; color: #C8661F; opacity: 0; transform: scale(.4); transition: opacity .3s 1s, transform .4s cubic-bezier(.34,1.56,.64,1) 1s; }
.d-vogelhuis.is-op .d-vh-tsjilp, .d-vogelhuis:not(.is-js) .d-vh-tsjilp { opacity: 1; transform: none; }
.d-vh-bord { padding: 1rem 1.2rem; background: #FFF8E6; border-radius: 10px; text-align: left; }
.d-vh-kop { font-family: var(--wp--preset--font-family--hand); font-size: 1.45rem !important; color: #C8661F; margin: 0 0 .4rem !important; }
.d-vh-bord dl { margin: 0; }
.d-vh-bord dl div { display: grid; grid-template-columns: 5.8rem 1fr; gap: .6rem; padding: .3rem 0; border-top: 1px dashed #EAD9BC; }
.d-vh-bord dt { font-weight: 700; color: #C8661F; font-size: .92rem; } .d-vh-bord dd { margin: 0; font-size: .98rem; }
.d-vh-paal { display: block; width: 18px; height: 60px; background: #7A4B3A; }
@media (max-width: 600px) { .d-vh-kast { padding: 86px 1rem 1rem; } .d-vh-bord dl div { grid-template-columns: 4.8rem 1fr; } .d-vh-tsjilp { left: calc(50% + 40px); } }
/* dierenparade */
.d-dierparade { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; max-width: 1040px; margin: 1.6rem auto 0 !important; }
.d-dierparade-plek { display: flex; flex-direction: column; align-items: center; }
.d-dierparade-dier { position: relative; width: 130px; height: 140px; padding: 0; border: 0; cursor: pointer; background: center bottom / contain no-repeat; margin-bottom: -6px; z-index: 1; transition: transform 1.4s cubic-bezier(.3,.8,.3,1) calc(var(--n) * .35s); }
.d-pd-zebra { background-image: var(--d-zebra); } .d-pd-olifant { background-image: var(--d-olifant); } .d-pd-flamingo { background-image: var(--d-flamingo); height: 160px; }
.d-dierparade.is-js .d-dierparade-dier { transform: translateX(-120vw); }
.d-dierparade.is-js.is-op .d-dierparade-dier { transform: none; animation: d-stap .45s ease-in-out 3 calc(var(--n) * .35s); }
@keyframes d-stap { 50% { translate: 0 -8px; rotate: -4deg; } }
.d-pd-geluid { position: absolute; left: 70%; top: -6px; padding: .25rem .7rem; background: #fff; border-radius: 12px; font-family: var(--wp--preset--font-family--hand); font-size: 1.25rem; color: #C8661F; white-space: nowrap; box-shadow: 0 4px 10px rgba(30,43,69,.12); opacity: 0; transform: scale(.4); transition: opacity .2s, transform .3s cubic-bezier(.34,1.56,.64,1); }
.d-dierparade-dier.is-geluid .d-pd-geluid { opacity: 1; transform: none; }
.d-dierparade-dier.is-geluid { animation: d-stap .35s ease-in-out 2; }
.d-dierparade-kaart { width: 100%; box-sizing: border-box; padding: 1.3rem 1.3rem 1.2rem; border-radius: 26px; text-align: center; box-shadow: 0 8px 18px rgba(30,43,69,.08); }
.d-dierparade-kaart h3 { margin: 0 0 .35rem !important; font-size: 1.45rem !important; }
.d-dierparade-kaart p { margin: 0 !important; font-size: .98rem !important; }
.d-dierparade-section { overflow-x: clip; }
@media (max-width: 781px) { .d-dierparade { grid-template-columns: 1fr; gap: 1.2rem; } .d-dierparade-plek { display: grid; grid-template-columns: 90px 1fr; align-items: end; gap: .6rem; } .d-dierparade-dier { width: 90px; height: 100px; margin: 0; } .d-pd-flamingo { height: 116px; } .d-dierparade-kaart { text-align: left; padding: 1rem; } .d-pd-geluid { left: 40%; top: -16px; font-size: 1.05rem; } }
/* veren */
.d-veren-cols { gap: 3rem !important; }
.d-veren { position: relative; max-width: 360px; margin: 1rem auto; }
.d-veren img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 50%; border: 8px solid #fff; box-shadow: 0 0 0 10px #F9D2B6, 0 18px 30px rgba(30,43,69,.15); }
.d-veer { position: absolute; z-index: 2; width: 26px; height: 74px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; background: linear-gradient(90deg, transparent 47%, rgba(122,75,58,.55) 47% 53%, transparent 53%), radial-gradient(ellipse at 50% 40%, #FFE4D2, #F6B08A); animation: d-dwarrel 7s ease-in-out infinite; }
.d-veer::after { content: ""; position: absolute; left: 50%; bottom: -14px; width: 2px; height: 16px; background: rgba(122,75,58,.55); }
.d-veer-1 { left: -24px; top: 10%; --r: -30deg; } .d-veer-2 { right: -18px; top: 2%; --r: 25deg; animation-delay: -2s; background: linear-gradient(90deg, transparent 47%, rgba(122,75,58,.55) 47% 53%, transparent 53%), radial-gradient(ellipse at 50% 40%, #FFF4C9, #FFC94D); }
.d-veer-3 { left: -10px; bottom: 12%; --r: 40deg; animation-delay: -4s; width: 20px; height: 56px; } .d-veer-4 { right: -28px; bottom: 24%; --r: -20deg; animation-delay: -1s; background: linear-gradient(90deg, transparent 47%, rgba(73,99,144,.5) 47% 53%, transparent 53%), radial-gradient(ellipse at 50% 40%, #EAF1FB, #B9D2EC); }
.d-veer-5 { left: 45%; top: -36px; --r: 70deg; animation-delay: -5s; width: 18px; height: 50px; }
@keyframes d-dwarrel { 0%, 100% { transform: rotate(var(--r)) translate(0, 0); } 50% { transform: rotate(calc(var(--r) + 14deg)) translate(6px, 12px); } }
.d-veren-note { position: absolute; right: -10px; bottom: -6px; z-index: 3; padding: .5rem 1rem; background: #fff; border-radius: 99px; font-family: var(--wp--preset--font-family--hand); font-size: 1.35rem; color: #C8661F; transform: rotate(-5deg); box-shadow: 0 6px 14px rgba(30,43,69,.15); }
@media (max-width: 781px) { .d-veren { max-width: 250px; margin-top: 2rem; } .d-veren-note { right: -16px; font-size: 1.15rem; } }
/* takvogels */
.d-takvogels { position: relative; max-width: 960px; margin: 1.4rem auto 0 !important; }
.d-tv-tak { position: absolute; left: -2%; right: -2%; top: 92px; height: 18px; background: #7A4B3A; border-radius: 9px; transform: rotate(-1.5deg); }
.d-tv-tak i { position: absolute; top: -12px; width: 36px; height: 20px; border-radius: 0 100% 0 100%; background: #6E9E45; }
.d-tv-tak i:nth-child(1) { left: 4%; transform: rotate(-30deg); } .d-tv-tak i:nth-child(2) { left: 31%; top: 12px; transform: rotate(150deg); background: #5E8A3A; } .d-tv-tak i:nth-child(3) { left: 63%; transform: rotate(-10deg); } .d-tv-tak i:nth-child(4) { left: 94%; top: 10px; transform: rotate(170deg); }
.d-tv-rij { position: relative; display: flex; justify-content: space-around; }
.d-tv-vogel { display: flex; flex-direction: column; align-items: center; gap: .4rem; padding: 0; border: 0; background: none; cursor: pointer; font: inherit; }
.d-tv-lijf { display: block; width: 84px; height: 72px; background: var(--d-vogel) center / contain no-repeat; margin-top: 22px; filter: hue-rotate(calc(var(--n) * 55deg)); transform-origin: 50% 100%; }
.d-tv-vogel:nth-child(even) .d-tv-lijf { transform: scaleX(-1); }
.d-tv-naam { margin-top: 18px; padding: .25rem .7rem; background: #fff; border-radius: 99px; font-weight: 700; font-size: .88rem; color: var(--d-navy); box-shadow: 0 3px 8px rgba(30,43,69,.1); }
.d-tv-vogel.is-actief .d-tv-naam { background: #EC8B48; color: #fff; }
.d-tv-vogel.is-fladder .d-tv-lijf { animation: d-fladder .8s ease-in-out; }
.d-tv-vogel:nth-child(even).is-fladder .d-tv-lijf { animation-name: d-fladder-r; }
@keyframes d-fladder { 30% { transform: translateY(-26px) rotate(-8deg); } 60% { transform: translateY(-14px) rotate(6deg); } }
@keyframes d-fladder-r { 0%, 100% { transform: scaleX(-1); } 30% { transform: scaleX(-1) translateY(-26px) rotate(-8deg); } 60% { transform: scaleX(-1) translateY(-14px) rotate(6deg); } }
.d-tv-teksten { max-width: 620px; margin: 1.4rem auto 0 !important; padding: 1rem 1.3rem; background: #fff; border-radius: 16px; box-shadow: 0 8px 18px rgba(30,43,69,.08); min-height: 3rem; }
.d-tv-uitleg { margin: 0 !important; }
.d-takvogels.is-js .d-tv-uitleg:not(.is-actief) { display: none; }
.d-tv-note { text-align: center; }
@media (max-width: 600px) { .d-tv-lijf { width: 52px; height: 46px; margin-top: 30px; } .d-tv-tak { top: 70px; height: 12px; } .d-tv-naam { font-size: .7rem; padding: .2rem .4rem; max-width: 64px; text-align: center; line-height: 1.15; } .d-tv-rij { gap: 2px; } }
/* uil */
.d-uil { display: grid; grid-template-columns: 1fr 1.1fr; gap: 2rem; align-items: center; max-width: 980px; margin: 1.4rem auto 0 !important; }
.d-uil-vragen { display: flex; flex-direction: column; gap: .7rem; }
.d-uil-vraag { display: flex; align-items: center; gap: .8rem; padding: .8rem 1.1rem; background: #FFF8E6; border: 2px solid #F3E3C3; border-radius: 16px; font: inherit; font-weight: 700; color: var(--d-navy); text-align: left; cursor: pointer; transition: transform .2s, background .2s; }
.d-uil-vraag .d-icon { --ink: #C8661F; width: 26px; height: 26px; flex: none; }
.d-uil-vraag:hover { transform: translateX(4px); }
.d-uil-vraag.is-actief { background: #EC8B48; border-color: #EC8B48; color: #fff; } .d-uil-vraag.is-actief .d-icon { --ink: #fff; }
.d-uil-hoek { position: relative; display: flex; align-items: flex-end; gap: 1rem; }
.d-uil-vogel { position: relative; flex: 0 0 130px; height: 170px; }
.d-uil-vogel::before { content: ""; position: absolute; left: 10px; right: 10px; top: 18px; bottom: 22px; background: #A8754E; border-radius: 50% 50% 46% 46% / 55% 55% 45% 45%; }
.d-uil-buik { position: absolute; left: 34px; right: 34px; top: 82px; bottom: 30px; background: #E9C9A0; border-radius: 50%; background-image: radial-gradient(circle at 30% 30%, #C89A6A 0 3px, transparent 4px), radial-gradient(circle at 70% 45%, #C89A6A 0 3px, transparent 4px), radial-gradient(circle at 45% 65%, #C89A6A 0 3px, transparent 4px); }
.d-uil-oor { position: absolute; top: 8px; width: 26px; height: 30px; background: #A8754E; clip-path: polygon(0 100%, 30% 0, 100% 100%); }
.d-uil-o1 { left: 18px; } .d-uil-o2 { right: 18px; transform: scaleX(-1); }
.d-uil-oog { position: absolute; top: 38px; width: 42px; height: 42px; border-radius: 50%; background: radial-gradient(circle at 50% 50%, #1E2B45 0 9px, #FFC94D 10px 15px, #fff 16px); box-shadow: 0 0 0 4px #7A4B3A; transform-origin: 50% 50%; }
.d-uil-g1 { left: 20px; } .d-uil-g2 { right: 20px; }
.d-uil-hoek.is-knipper .d-uil-oog { animation: d-knipper .35s ease-in-out; }
@keyframes d-knipper { 50% { transform: scaleY(.1); } }
.d-uil-snavel { position: absolute; left: 50%; top: 74px; width: 16px; height: 16px; margin-left: -8px; background: #EC8B48; clip-path: polygon(0 0, 100% 0, 50% 100%); }
.d-uil-tak { position: absolute; left: -20px; right: -40px; bottom: 12px; height: 14px; background: #7A4B3A; border-radius: 7px; }
.d-uil-ballon { position: relative; flex: 1; margin-bottom: 90px; padding: 1.1rem 1.3rem; background: #fff; border-radius: 22px; box-shadow: 0 10px 22px rgba(30,43,69,.12); min-height: 5rem; }
.d-uil-ballon::before { content: ""; position: absolute; left: -16px; bottom: 22px; border: 10px solid transparent; border-right: 16px solid #fff; }
.d-uil-antwoord { margin: 0 !important; }
.d-uil.is-js .d-uil-antwoord:not(.is-actief) { display: none; }
@media (max-width: 781px) { .d-uil { grid-template-columns: 1fr; } .d-uil-hoek { order: -1; } .d-uil-vogel { flex-basis: 100px; transform: scale(.8); transform-origin: 50% 100%; } .d-uil-ballon { margin-bottom: 60px; } }
/* mobiel */
.d-mobiel-cols { gap: 2.5rem !important; }
.d-mobiel { position: relative; max-width: 420px; margin: 0 auto; padding-top: 30px; }
.d-mb-haak { position: absolute; left: 50%; top: 0; width: 3px; height: 34px; margin-left: -1.5px; background: #7A4B3A; }
.d-mb-arm { position: relative; height: 380px; transform-origin: 50% 0; animation: d-mb-draai 8s ease-in-out infinite; }
.d-mb-arm::before { content: ""; position: absolute; left: 4%; right: 4%; top: 2px; height: 8px; background: #C89A6A; border-radius: 4px; }
@keyframes d-mb-draai { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }
.d-mb-hanger { position: absolute; top: 6px; display: flex; flex-direction: column; align-items: center; padding: 0; border: 0; background: none; cursor: pointer; font: inherit; transform-origin: 50% 0; animation: d-mb-hang 5s ease-in-out infinite; animation-delay: calc(var(--n) * -1.6s); }
.d-mb-hanger:nth-of-type(1) { left: 2%; } .d-mb-hanger:nth-of-type(2) { left: 50%; margin-left: -70px; } .d-mb-hanger:nth-of-type(3) { right: 2%; }
@keyframes d-mb-hang { 0%, 100% { transform: rotate(4deg); } 50% { transform: rotate(-4deg); } }
.d-mb-touw { width: 2px; height: 70px; background: #7A4B3A; }
.d-mb-hanger:nth-of-type(2) .d-mb-touw { height: 150px; }
.d-mb-hanger img { width: 140px; height: 140px; border-radius: 50%; object-fit: cover; border: 6px solid #fff; box-shadow: 0 8px 16px rgba(30,43,69,.15); }
.d-mb-hanger:nth-of-type(1) img, .d-mb-hanger:nth-of-type(3) img { width: 120px; height: 120px; }
.d-mb-cap { margin-top: .3rem; font-family: var(--wp--preset--font-family--hand); font-size: 1.2rem; color: #496390; }
.d-mb-hanger.is-tol img { animation: d-tol .8s ease-in-out; }
@keyframes d-tol { to { transform: rotateY(360deg); } }
.d-mb-ster { position: absolute; top: 6px; width: 3px; height: 40px; background: #7A4B3A; }
.d-mb-ster::after { content: ""; position: absolute; left: -14px; top: 100%; width: 30px; height: 30px; background: #FFC94D; clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.d-mb-s1 { left: 28%; } .d-mb-s2 { right: 28%; height: 56px; } .d-mb-s2::after { background: #F7B5C8; clip-path: circle(46%); }
@media (max-width: 781px) { .d-mobiel { max-width: 330px; } .d-mb-arm { height: 320px; } .d-mb-hanger img { width: 110px; height: 110px; } .d-mb-hanger:nth-of-type(1) img, .d-mb-hanger:nth-of-type(3) img { width: 92px; height: 92px; } .d-mb-hanger:nth-of-type(2) { margin-left: -55px; } .d-mb-hanger:nth-of-type(2) .d-mb-touw { height: 128px; } }
/* postduif */
.d-postduif-section { padding-top: 2rem !important; padding-bottom: 1.5rem !important; }
.d-postduif { display: flex; justify-content: center; align-items: center; gap: .6rem; }
.d-pdf-duif { flex: none; width: 96px; height: 82px; background: var(--d-vogel) center / contain no-repeat; filter: grayscale(1) brightness(1.5) contrast(.9); transform: rotate(-8deg); animation: d-duif 3s ease-in-out infinite; }
@keyframes d-duif { 50% { transform: rotate(-4deg) translateY(-6px); } }
.d-pdf-brief { position: relative; padding: 1rem 1.6rem; background: #FFF8E6; border-radius: 10px; box-shadow: 0 8px 16px rgba(30,43,69,.1); text-align: center; border-left: 10px solid #E9C9A0; border-right: 10px solid #E9C9A0; }
.d-pdf-brief .d-eyebrow { display: block; }
.d-pdf-brief strong { display: block; font-family: var(--wp--preset--font-family--schreef); font-weight: 400; font-size: 1.4rem; margin: .1rem 0 .4rem; }
.d-pdf-brief a { font-weight: 700; color: #C8661F; }
@media (max-width: 600px) { .d-postduif { flex-direction: column; } .d-pdf-brief { padding: .9rem 1rem; } }
/* snavelkaart-afsluiter */
.d-snavel { position: relative; display: flex; justify-content: center; align-items: flex-start; gap: 0; max-width: 820px; margin: 0 auto !important; }
.d-sk-vogel { position: relative; flex: none; width: 170px; height: 146px; margin-top: 10px; background: var(--d-vogel) center / contain no-repeat; animation: d-duif 4s ease-in-out infinite; z-index: 2; }
.d-sk-touw { flex: none; width: 70px; height: 2px; margin: 86px -10px 0 -24px; background: #C9A14A; transform: rotate(14deg); transform-origin: 0 50%; }
.d-sk-kaart { position: relative; flex: 0 1 460px; margin-top: 70px; padding: 1.8rem 1.8rem 1.5rem; background: #FFFBF0; border-radius: 18px; box-shadow: 0 14px 30px rgba(30,43,69,.15); transform: rotate(2deg); transform-origin: 0 0; animation: d-kaart-zwaai 6s ease-in-out infinite; }
.d-sk-kaart h2 { margin: .2rem 0 .6rem !important; }
.d-sk-knop { display: inline-block; margin: .5rem 0 1rem; padding: .8rem 1.4rem; background: #EC8B48; color: #fff !important; border-radius: 99px; font-weight: 700; text-decoration: none; box-shadow: 0 4px 0 #C8661F; }
.d-sk-kaart ul { list-style: none; margin: 0; padding: 0; border-top: 2px dashed #E2D6BF; }
.d-sk-kaart li { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: .55rem 0; border-bottom: 2px dashed #E2D6BF; font-size: .95rem; }
.d-sk-kaart li span { color: #5B6478; } .d-sk-kaart li a { font-weight: 700; color: #C8661F; }
.d-sk-sticker { position: absolute; right: -20px; top: -30px; width: 100px; height: 100px; display: flex; align-items: center; justify-content: center; text-align: center; border-radius: 50%; background: #EC8B48; color: #fff; font-family: var(--wp--preset--font-family--hand); font-size: 1.15rem; line-height: 1.05; padding: .6rem; box-sizing: border-box; transform: rotate(12deg); box-shadow: 0 0 0 4px #fff, 0 6px 12px rgba(30,43,69,.18); }
@media (max-width: 781px) { .d-snavel { flex-direction: column; align-items: center; } .d-sk-vogel { width: 120px; height: 100px; } .d-sk-touw { width: 2px; height: 30px; margin: -10px 0 0; transform: none; } .d-sk-kaart { margin-top: 0; transform: none; animation: none; padding: 1.5rem 1.2rem 1.2rem; } .d-sk-sticker { right: -6px; top: -40px; width: 84px; height: 84px; font-size: 1rem; } }
@media (prefers-reduced-motion: reduce) { .d-veer, .d-mb-arm, .d-mb-hanger, .d-pdf-duif, .d-sk-vogel, .d-sk-kaart { animation: none !important; } }
.d-dierparade { grid-template-columns: repeat(3, minmax(0, 1fr)); } .d-dierparade-kaart p, .d-dierparade-kaart h3 { white-space: normal; } @media (max-width: 781px) { .d-dierparade { grid-template-columns: minmax(0, 1fr); } }
.d-dierparade-kaart { background: #fff !important; border-top: 8px solid var(--ink); } .d-dierparade-dier, .d-pd-flamingo { height: 160px; } @media (max-width: 781px) { .d-dierparade-dier, .d-pd-flamingo { height: 110px; } }
@media (max-width: 600px) { .d-tv-naam { hyphens: manual; -webkit-hyphens: manual; overflow-wrap: normal; max-width: 66px; font-size: .68rem; } }
/* Het Warme Nest: vrolijk vogeltje (i.p.v. het boze uit werelden.css) */
:root { --d-vogel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 72 62'%3E%3Cpath d='M30 54 V60 M38 54 V60' stroke='%231E2B45' stroke-width='2.5' stroke-linecap='round'/%3E%3Cpath d='M10 38 C10 18 26 6 42 8 C56 10 62 22 60 32 C58 48 44 56 30 54 C18 52 10 48 10 38 Z' fill='%23F07A2B' stroke='%231E2B45' stroke-width='2.5'/%3E%3Cpath d='M60 26 L71 30 L60 35 Z' fill='%23FFC94D' stroke='%231E2B45' stroke-width='2' stroke-linejoin='round'/%3E%3Cpath d='M43 24 Q48 18 53 24' stroke='%231E2B45' stroke-width='3' fill='none' stroke-linecap='round'/%3E%3Ccircle cx='51' cy='35' r='4' fill='%23FF8FA3' opacity='.7'/%3E%3Cpath d='M18 34 C22 48 38 48 40 36 C32 40 24 40 18 34 Z' fill='%23C8561C' stroke='%231E2B45' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E"); }
/* Warme Nest: compact vogelhuisje naast het nestkaartje */
.d-vogelhuis { max-width: 900px; flex-direction: row; align-items: center; gap: 2rem; }
.d-vh-huisje { position: relative; flex: 0 0 150px; display: flex; flex-direction: column; align-items: center; }
.d-vh-dak { width: 180px; height: 56px; margin-bottom: -1px; }
.d-vh-kast { position: relative; display: block; width: 150px; height: 120px; padding: 0; background: #EC8B48; background-image: repeating-linear-gradient(90deg, transparent 0 36px, rgba(0,0,0,.07) 36px 38px); border-radius: 0 0 12px 12px; box-shadow: 0 10px 18px rgba(30,43,69,.15); }
.d-vh-kast::before { top: 84px; width: 40px; }
.d-vh-gat { top: 22px; width: 58px; height: 58px; margin-left: -29px; box-shadow: 0 0 0 6px #C8661F; }
.d-vh-vogel { left: 5px; top: 58px; width: 48px; height: 42px; }
.d-vogelhuis.is-op .d-vh-vogel, .d-vogelhuis:not(.is-js) .d-vh-vogel { top: 10px; }
.d-vh-paal { width: 14px; height: 54px; }
.d-vh-tsjilp { left: 112px; top: 30px; }
.d-vh-bord { flex: 1; padding: 1.1rem 1.4rem; background: #FFF8E6; border: 3px solid #F3E3C3; border-radius: 16px; }
.d-vh-bord dl { display: grid; grid-template-columns: 1fr 1fr; column-gap: 1.6rem; }
.d-vh-bord dl div { grid-template-columns: 5rem 1fr; }
@media (max-width: 781px) { .d-vogelhuis { flex-direction: column; gap: 0; } .d-vh-huisje { transform: scale(.8); margin-bottom: -1.6rem; } .d-vh-bord { width: 100%; box-sizing: border-box; padding: 1rem; } .d-vh-bord dl { grid-template-columns: 1fr; } .d-vh-bord dl div { grid-template-columns: 4.8rem 1fr; } .d-vh-tsjilp { left: 116px; } }
/* Warme Nest: afsluiter met een nestje op het kaartje */
.d-snavel { max-width: 560px; }
.d-sk-kaart { flex: 1; margin-top: 2.5rem; transform: rotate(-1deg); }
.d-sk-nest { position: absolute; left: 1.4rem; top: -38px; width: 96px; height: 42px; border-radius: 0 0 48px 48px; background: repeating-linear-gradient(-25deg, #8A5A3B 0 5px, #A8754E 5px 10px); box-shadow: inset 0 6px 0 rgba(0,0,0,.15); }
.d-sk-vogeltje { position: absolute; left: 22px; top: -34px; width: 54px; height: 46px; background: var(--d-vogel) center / contain no-repeat; z-index: -1; animation: d-duif 3s ease-in-out infinite; }
.d-snavel-section .d-sk-kaart .d-eyebrow { margin-top: .6rem !important; }
@media (max-width: 781px) { .d-sk-kaart { margin-top: 3rem; } }
@media (max-width: 781px) { .d-vogelhuis { position: relative; } .d-vh-huisje { position: absolute; right: 4px; top: -26px; transform: scale(.5); transform-origin: top right; margin: 0; z-index: 2; } .d-vh-paal, .d-vh-tsjilp { display: none; } .d-vh-bord { margin-top: .5rem; } .d-vh-kop { padding-right: 70px; } }
/* Praktisch: gereedschapskist */
/* gereedschapswand */
.d-gwand { max-width: 980px; margin: 1.6rem auto 0 !important; }
.d-gw-bord { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; padding: 2.2rem 1.6rem 1.6rem; background-color: #D9B48A; background-image: radial-gradient(circle, #9C7650 0 3px, transparent 3.5px); background-size: 26px 26px; background-position: 13px 13px; border-radius: 18px; box-shadow: inset 0 0 0 8px #C29A6E, 0 12px 24px rgba(30,43,69,.12); }
.d-gw-tool { position: relative; display: flex; flex-direction: column; align-items: center; gap: .55rem; padding: 0; border: 0; background: none; cursor: pointer; font: inherit; }
.d-gw-haak { width: 26px; height: 18px; border: 4px solid #8D93A0; border-bottom: 0; border-radius: 13px 13px 0 0; box-sizing: border-box; margin-bottom: -6px; position: relative; z-index: 1; }
.d-gw-ding { position: relative; display: flex; align-items: center; justify-content: center; width: 96px; height: 96px; border-radius: 26px; background: var(--k); box-shadow: 0 8px 0 rgba(0,0,0,.18); transition: transform .45s cubic-bezier(.34,1.56,.64,1); }
.d-gw-ding::before { content: ""; position: absolute; inset: -6px; border-radius: 30px; border: 3px dashed rgba(60,40,25,.45); opacity: 0; transition: opacity .3s; z-index: -1; }
.d-gw-ding .d-icon { --ink: #fff; width: 44px; height: 44px; }
.d-gw-naam { padding: .3rem .8rem; background: #FFF8E6; border-radius: 99px; font-weight: 700; font-size: .92rem; color: var(--d-navy); box-shadow: 0 3px 0 rgba(0,0,0,.1); text-align: center; }
.d-gw-tool:hover .d-gw-ding { transform: rotate(-4deg); }
.d-gw-tool.is-actief .d-gw-ding { transform: translateY(-14px) rotate(-8deg) scale(1.06); }
.d-gw-tool.is-actief .d-gw-naam { background: var(--k); color: #fff; }
.d-gw-teksten { max-width: 640px; margin: 1.3rem auto 0 !important; padding: 1.1rem 1.4rem; background: #fff; border-radius: 16px; border-left: 8px solid #C29A6E; box-shadow: 0 8px 18px rgba(30,43,69,.08); }
.d-gw-uitleg h3 { margin: 0 0 .3rem !important; font-size: 1.25rem !important; }
.d-gw-uitleg p { margin: 0 !important; }
.d-gw-uitleg a { font-weight: 700; color: #C8661F; }
.d-gwand.is-js .d-gw-uitleg:not(.is-actief) { display: none; }
.d-gwand:not(.is-js) .d-gw-uitleg + .d-gw-uitleg { margin-top: 1rem; }
.d-gw-hint { text-align: center; font-family: var(--wp--preset--font-family--hand); font-size: 1.3rem !important; color: #7A4B3A; margin-top: .8rem !important; }
@media (max-width: 781px) { .d-gw-bord { grid-template-columns: 1fr 1fr; gap: 1.4rem .8rem; padding: 1.8rem 1rem 1.2rem; } .d-gw-ding { width: 76px; height: 76px; border-radius: 20px; } .d-gw-ding .d-icon { width: 36px; height: 36px; } .d-gw-naam { font-size: .82rem; } }
/* labelstrips */
.d-labelstrips { max-width: 860px; margin: 0 auto !important; text-align: center; }
.d-ls-kop { display: inline-flex; align-items: center; gap: .7rem; font-family: var(--wp--preset--font-family--hand); font-size: 1.6rem !important; color: var(--d-navy); margin: 0 0 1rem !important; }
.d-ls-maker { position: relative; width: 52px; height: 30px; border-radius: 8px 8px 14px 14px; background: #8D93A0; box-shadow: inset 0 -6px 0 rgba(0,0,0,.15); }
.d-ls-maker::before { content: ""; position: absolute; left: 8px; top: 6px; width: 20px; height: 9px; border-radius: 2px; background: #BFE3C9; }
.d-ls-maker::after { content: ""; position: absolute; right: -18px; top: 9px; width: 20px; height: 10px; background: #C8382E; border-radius: 0 2px 2px 0; }
.d-ls-rij { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem 1.2rem; }
.d-ls-strip { display: inline-flex; align-items: baseline; gap: .7rem; padding: .55rem 1.1rem; background: #1E2B45; color: #fff; border-radius: 4px; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; text-shadow: 0 1px 0 rgba(255,255,255,.25), 0 -1px 0 rgba(0,0,0,.6); box-shadow: 0 4px 8px rgba(30,43,69,.18); background-image: linear-gradient(rgba(255,255,255,.12), transparent 50%); clip-path: inset(0 0 0 0); transition: clip-path .8s steps(14) calc(var(--n) * .35s); }
.d-ls-strip:nth-child(5n+1) { transform: rotate(-2deg); } .d-ls-strip:nth-child(5n+2) { transform: rotate(1.5deg); background-color: #C8382E; } .d-ls-strip:nth-child(5n+3) { transform: rotate(-1deg); background-color: #2F5DA8; } .d-ls-strip:nth-child(5n+4) { transform: rotate(2deg); background-color: #5E8A3A; } .d-ls-strip:nth-child(5n) { transform: rotate(-1.5deg); background-color: #E0A82E; }
.d-ls-label { font-size: .78rem; opacity: .75; } .d-ls-waarde { font-size: .95rem; } .d-ls-waarde a { color: #fff; }
.d-labelstrips.is-js .d-ls-strip { clip-path: inset(0 100% 0 0); }
.d-labelstrips.is-js.is-op .d-ls-strip { clip-path: inset(0 0 0 0); }
@media (max-width: 600px) { .d-ls-strip { flex-direction: column; gap: .1rem; align-items: flex-start; text-align: left; padding: .5rem .9rem; } .d-ls-waarde { font-size: .85rem; } }
/* rekenmachine */
.d-rekenmachine { display: flex; justify-content: center; align-items: center; gap: 2.4rem; max-width: 820px; margin: 0 auto !important; }
.d-rm-kast { flex: 0 0 210px; padding: 1rem; background: #1E2B45; border-radius: 22px; box-shadow: inset 0 -8px 0 rgba(0,0,0,.25), 0 14px 24px rgba(30,43,69,.25); transform: rotate(-4deg); }
.d-rm-scherm { display: block; padding: .6rem .8rem; margin-bottom: .8rem; background: #BFE3C9; border-radius: 8px; text-align: right; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 1.5rem; color: #1E2B45; box-shadow: inset 0 3px 0 rgba(0,0,0,.15); }
.d-rm-toetsen { display: grid; grid-template-columns: repeat(3, 1fr) 1fr; grid-auto-flow: row; gap: 7px; }
.d-rm-toets { display: flex; align-items: center; justify-content: center; height: 32px; border-radius: 8px; background: #3E4C68; color: #fff; font-weight: 700; font-size: .95rem; box-shadow: 0 3px 0 #10182A; }
.d-rm-toets.is-druk { transform: translateY(2px); box-shadow: 0 1px 0 #10182A; background: #496390; }
.d-rm-toetsen .d-rm-toets:nth-child(3n) { grid-column: auto; }
.d-rm-is { grid-column: 4; grid-row: 1 / span 4; display: flex; align-items: center; justify-content: center; border-radius: 10px; background: #EC8B48; color: #fff !important; font-size: 1.6rem; font-weight: 700; text-decoration: none; box-shadow: 0 3px 0 #C8661F; }
.d-rm-is:hover { background: #F6A05A; }
.d-rm-tekst { flex: 1; text-align: left; }
.d-rm-tekst p { font-size: 1.1rem !important; margin: 0 0 1rem !important; }
.d-rm-knop { display: inline-block; padding: .8rem 1.4rem; background: #EC8B48; color: #fff !important; border-radius: 99px; font-weight: 700; text-decoration: none; box-shadow: 0 4px 0 #C8661F; }
@media (max-width: 781px) { .d-rekenmachine { flex-direction: column; gap: 1.4rem; } .d-rm-kast { flex-basis: auto; width: 190px; } .d-rm-tekst { text-align: center; } }
/* kistdeksel-afsluiter */
.d-kistdeksel { position: relative; display: flex; flex-direction: column; align-items: center; max-width: 620px; margin: 0 auto !important; }
.d-kd-kaart { position: relative; z-index: 1; width: 86%; box-sizing: border-box; margin-bottom: -40px; padding: 1.8rem 1.8rem 3.4rem; background: #FFFBF0; border-radius: 18px; box-shadow: 0 10px 24px rgba(30,43,69,.12); text-align: center; transition: transform .9s cubic-bezier(.34,1.3,.64,1) .35s, opacity .5s .35s; }
.d-kd-kaart h2 { margin: .2rem 0 .6rem !important; }
.d-kd-knop { display: inline-block; margin: .5rem 0 1rem; padding: .8rem 1.4rem; background: #EC8B48; color: #fff !important; border-radius: 99px; font-weight: 700; text-decoration: none; box-shadow: 0 4px 0 #C8661F; }
.d-kd-kaart ul { list-style: none; margin: 0; padding: 0; text-align: left; border-top: 2px dashed #E2D6BF; }
.d-kd-kaart li { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: .55rem 0; border-bottom: 2px dashed #E2D6BF; font-size: .95rem; }
.d-kd-kaart li span { color: #5B6478; } .d-kd-kaart li a { font-weight: 700; color: #C8661F; }
.d-kd-kist { position: relative; z-index: 2; width: 100%; height: 120px; }
.d-kd-bak { position: absolute; left: 0; right: 0; bottom: 0; height: 92px; background: #C8382E; border-radius: 6px 6px 16px 16px; box-shadow: inset 0 -10px 0 rgba(0,0,0,.15), 0 12px 22px rgba(30,43,69,.18); }
.d-kd-bak i { position: absolute; top: 26px; width: 34px; height: 14px; background: #8D93A0; border-radius: 3px; }
.d-kd-bak i:first-child { left: 18%; } .d-kd-bak i:last-child { right: 18%; }
.d-kd-deksel { position: absolute; left: -2%; right: -2%; top: 4px; height: 30px; background: #A82E26; border-radius: 10px 10px 4px 4px; transform-origin: 0 100%; transition: transform .8s cubic-bezier(.4,1.4,.6,1); }
.d-kd-handvat { position: absolute; left: 50%; top: -22px; width: 120px; height: 26px; margin-left: -60px; border: 8px solid #3E4C68; border-bottom: 0; border-radius: 16px 16px 0 0; box-sizing: border-box; }
.d-kd-sticker { position: absolute; right: 12%; top: 50%; transform: translateY(-50%) rotate(-6deg); padding: .2rem .9rem; background: #FFC94D; color: var(--d-navy); border-radius: 99px; font-family: var(--wp--preset--font-family--hand); font-size: 1.2rem; box-shadow: 0 3px 0 rgba(0,0,0,.15); }
.d-kistdeksel.is-js .d-kd-kaart { opacity: 0; transform: translateY(160px) scale(.9); }
.d-kistdeksel.is-js.is-op .d-kd-kaart { opacity: 1; transform: none; }
.d-kistdeksel.is-js.is-op .d-kd-deksel { transform: rotate(-14deg) translateY(-14px); }
@media (max-width: 600px) { .d-kd-kaart { width: 94%; padding: 1.5rem 1.1rem 3rem; } .d-kd-kist { height: 100px; } .d-kd-bak { height: 76px; } .d-kd-handvat { width: 90px; margin-left: -45px; } }
.d-ls-strip:nth-child(5n) { color: #1E2B45; text-shadow: 0 1px 0 rgba(255,255,255,.4); } .d-ls-strip:nth-child(5n) .d-ls-waarde a { color: #1E2B45; }
.d-kd-kist { z-index: auto; } .d-kd-bak { z-index: 3; } .d-kd-deksel { z-index: 0; transform-origin: 50% 100%; } .d-kistdeksel.is-js.is-op .d-kd-deksel { transform: perspective(500px) rotateX(70deg); } .d-kistdeksel:not(.is-js) .d-kd-deksel { transform: perspective(500px) rotateX(70deg); }
.d-kd-bak .d-kd-sticker { top: 58%; right: auto; left: 50%; transform: translate(-50%, -50%) rotate(-4deg); font-size: 1.35rem; }
.d-ls-waarde { text-transform: none; letter-spacing: .02em; } @media (max-width: 781px) { .d-rm-kast { width: 170px; } .d-rm-toets { height: 28px; } }
.d-kd-bak i:nth-child(2) { left: auto; right: 18%; } @media (max-width: 600px) { .d-kd-bak i { top: 20px; width: 26px; } .d-kd-bak i:first-child { left: 8%; } .d-kd-bak i:nth-child(2) { right: 8%; } }
/* Praktisch: rustiger (Audrey: "beetje te druk") */
.d-ls-strip, .d-ls-strip:nth-child(5n+1), .d-ls-strip:nth-child(5n+2), .d-ls-strip:nth-child(5n+3), .d-ls-strip:nth-child(5n+4), .d-ls-strip:nth-child(5n) { background-color: #1E2B45; color: #fff; text-shadow: 0 -1px 0 rgba(0,0,0,.6); transform: rotate(-.6deg); }
.d-ls-strip:nth-child(even) { transform: rotate(.6deg); }
.d-ls-strip:nth-child(5n) .d-ls-waarde a { color: #fff; }
.d-ls-label { color: #FFC94D; opacity: 1; }
.d-ls-rij { gap: .8rem 1rem; }
.d-rm-kast { flex-basis: 170px; transform: rotate(-2deg); padding: .8rem; }
.d-rm-scherm { font-size: 1.2rem; padding: .45rem .7rem; }
.d-rm-toets { height: 26px; font-size: .85rem; }
.d-rekenmachine-section { padding-top: 2rem !important; padding-bottom: 2rem !important; }
/* Praktisch: afsluiter compacter (Audrey: "heel groot") */
.d-kistdeksel { max-width: 460px; }
.d-kd-kaart { width: 90%; padding: 1.3rem 1.4rem 2.6rem; margin-bottom: -30px; }
.d-kd-kaart h2 { font-size: clamp(1.5rem, 2.4vw, 1.9rem) !important; }
.d-kd-kaart > p { font-size: .95rem !important; }
.d-kd-knop { margin: .3rem 0 .7rem; padding: .65rem 1.2rem; }
.d-kd-kaart li { padding: .4rem 0; font-size: .9rem; }
.d-kd-kist { height: 84px; }
.d-kd-bak { height: 62px; border-radius: 6px 6px 12px 12px; }
.d-kd-bak i { top: 16px; width: 26px; height: 10px; }
.d-kd-bak .d-kd-sticker { font-size: 1.1rem; top: 55%; }
.d-kd-deksel { height: 22px; }
.d-kd-handvat { width: 80px; margin-left: -40px; height: 20px; top: -16px; border-width: 6px; }
/* Praktisch: feiten + rekenmachine samen in één rustig blok */
.d-kortkosten { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; max-width: 1000px; margin: 0 auto !important; }
.d-kk-feiten { text-align: left; margin: 0 !important; }
.d-kk-feiten .d-ls-kop { margin-bottom: .8rem !important; }
.d-kk-feiten .d-ls-rij { display: flex; flex-direction: column; align-items: flex-start; gap: .5rem; list-style: none; margin: 0; padding: 0; }
.d-kk-feiten .d-ls-strip, .d-kk-feiten .d-ls-strip:nth-child(n) { background: #FFF8E6; color: var(--d-navy); text-shadow: none; transform: none; box-shadow: 0 2px 0 rgba(122,75,58,.18); border-radius: 6px; padding: .45rem .9rem; font-weight: 600; }
.d-kk-feiten .d-ls-label { display: inline-block; min-width: 4.8rem; color: #C8661F; }
.d-kk-feiten .d-ls-waarde a { color: var(--d-navy) !important; }
.d-kk-reken { margin: 0 !important; gap: 1.4rem; justify-content: flex-start; }
.d-kk-reken .d-rm-kast { flex-basis: 150px; }
.d-kk-reken .d-rm-tekst p { font-size: 1rem !important; }
@media (max-width: 781px) { .d-kortkosten { grid-template-columns: 1fr; gap: 2rem; } .d-kk-feiten .d-ls-strip { flex-direction: row; align-items: baseline; } .d-kk-reken { flex-direction: row; align-items: center; } .d-kk-reken .d-rm-kast { flex: 0 0 120px; width: 120px; padding: .6rem; } .d-kk-reken .d-rm-tekst { text-align: left; } .d-kk-reken .d-rm-toets { height: 20px; font-size: .7rem; } .d-kk-reken .d-rm-scherm { font-size: 1rem; } }
/* Praktisch-wereld: meetlint tussen blokken helemaal tonen (golfrand van de band knipte hem half weg) */
body:has(.d-world-gereedschap) main .d-band::before, body:has(.d-world-spaarvarken) main .d-band::before, body:has(.d-world-wekker) main .d-band::before, body:has(.d-world-vraag) main .d-band::before, body:has(.d-world-koffer) main .d-band::before, body:has(.d-world-prikbord) main .d-band::before, body:has(.d-world-superheld) main .d-band::before, body:has(.d-world-dokter) main .d-band::before, body:has(.d-world-opendeur) main .d-band::before, body:has(.d-world-brievenbus) main .d-band::before, body:has(.d-world-post) main .d-band::before, body:has(.d-world-deurbel) main .d-band::before, body:has(.d-world-kapstok) main .d-band::before { -webkit-mask: none !important; mask: none !important; }
body:has(.d-world-gereedschap) main .d-band::after, body:has(.d-world-spaarvarken) main .d-band::after, body:has(.d-world-wekker) main .d-band::after, body:has(.d-world-vraag) main .d-band::after, body:has(.d-world-koffer) main .d-band::after, body:has(.d-world-prikbord) main .d-band::after, body:has(.d-world-superheld) main .d-band::after, body:has(.d-world-dokter) main .d-band::after, body:has(.d-world-opendeur) main .d-band::after, body:has(.d-world-brievenbus) main .d-band::after, body:has(.d-world-post) main .d-band::after, body:has(.d-world-deurbel) main .d-band::after, body:has(.d-world-kapstok) main .d-band::after { display: none !important; }
@media (max-width: 781px) { .d-kk-reken { flex-direction: column; align-items: center; gap: 1rem; } .d-kk-reken .d-rm-kast { flex: none; width: 130px; } .d-kk-reken .d-rm-tekst { text-align: center; } .d-kk-feiten .d-ls-strip { width: 100%; box-sizing: border-box; } }
/* Tarieven: spaarvarken */
/* prijskaartjes */
.d-prijskaartjes-section { padding-top: 2rem !important; padding-bottom: 1.5rem !important; }
.d-prijskaartjes { display: flex; justify-content: center; gap: clamp(1rem, 3vw, 2rem); flex-wrap: wrap; max-width: 960px; margin: 0 auto !important; }
.d-pk-kaartje { position: relative; flex: 0 1 260px; padding: 1.1rem 1.2rem 1rem 2.6rem; background: #fff; border-radius: 10px 4px 4px 10px; clip-path: polygon(22px 0, 100% 0, 100% 100%, 22px 100%, 0 50%); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--k) 35%, transparent); transform: rotate(calc((var(--n) - 1) * 2deg)); transform-origin: 0 50%; transition: transform .3s; filter: drop-shadow(0 6px 10px rgba(30,43,69,.12)); }
.d-pk-kaartje:hover { transform: rotate(calc((var(--n) - 1) * 2deg + 3deg)); }
.d-pk-gat { position: absolute; left: 18px; top: 50%; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%; background: #F3EBDD; box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--k) 45%, transparent); }
.d-pk-kaartje strong { display: block; font-family: var(--wp--preset--font-family--schreef); font-weight: 400; font-size: 2rem; line-height: 1.1; color: var(--k); }
.d-pk-kaartje span:last-child { display: block; font-size: .88rem; color: #5B6478; margin-top: .2rem; }
@media (max-width: 600px) { .d-pk-kaartje { flex-basis: 100%; transform: none; } .d-pk-kaartje:hover { transform: none; } }
/* kassabon */
.d-kassabon { max-width: 420px; margin: 0 auto !important; display: flex; flex-direction: column; align-items: center; }
.d-kb-schakel { display: inline-flex; padding: 4px; background: #fff; border-radius: 99px; box-shadow: 0 4px 10px rgba(30,43,69,.1); margin-bottom: -14px; position: relative; z-index: 2; }
.d-kb-keuze { padding: .5rem 1.1rem; border: 0; border-radius: 99px; background: none; font: inherit; font-weight: 700; font-size: .92rem; color: var(--d-navy); cursor: pointer; transition: background .2s, color .2s; }
.d-kb-keuze.is-actief { background: #EC8B48; color: #fff; }
.d-kb-bon { width: 100%; box-sizing: border-box; padding: 2rem 1.6rem 1.6rem; background: #fff; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: .92rem; color: #1E2B45; box-shadow: 0 10px 20px rgba(30,43,69,.12); --tand: radial-gradient(circle at 50% 100%, transparent 6px, #fff 6.5px); -webkit-mask: radial-gradient(circle at 8px 0, transparent 6px, #000 6.5px) 0 0 / 16px 100% repeat-x, linear-gradient(#000, #000) 0 8px / 100% calc(100% - 16px) no-repeat, radial-gradient(circle at 8px 100%, transparent 6px, #000 6.5px) 0 100% / 16px 100% repeat-x; mask: radial-gradient(circle at 8px 0, transparent 6px, #000 6.5px) 0 0 / 16px 100% repeat-x, linear-gradient(#000, #000) 0 8px / 100% calc(100% - 16px) no-repeat, radial-gradient(circle at 8px 100%, transparent 6px, #000 6.5px) 0 100% / 16px 100% repeat-x; }
.d-kb-kop { text-align: center; text-transform: uppercase; letter-spacing: .14em; font-size: .78rem !important; margin: 0 !important; color: #5B6478; }
.d-kb-titel { text-align: center; font-weight: 700; margin: .2rem 0 .8rem !important; padding-bottom: .6rem; border-bottom: 2px dashed #D8DCE3; }
.d-kb-regel { display: flex; justify-content: space-between; gap: 1rem; padding: .35rem 0; }
.d-kb-regel span:last-child { text-align: right; }
.d-kb-hoofd { font-size: 1.15rem; font-weight: 700; padding-bottom: .6rem; margin-bottom: .3rem; border-bottom: 2px dashed #D8DCE3; }
.d-kb-hoofd .d-kb-wissel { color: #C8661F; }
.d-kassabon.is-js .d-kb-w:not(.is-actief) { display: none; }
.d-kassabon:not(.is-js) .d-kb-w + .d-kb-w::before { content: " / "; }
.d-kb-voet { text-align: center; margin: .9rem 0 0 !important; padding-top: .6rem; border-top: 2px dashed #D8DCE3; color: #5B6478; font-size: .82rem !important; }
.d-kb-wissel .d-kb-w.is-actief { animation: d-kb-print .35s ease-out; }
@keyframes d-kb-print { from { opacity: 0; transform: translateY(-6px); } }
/* muntenstapel */
.d-muntenstapel { list-style: none; margin: 1.4rem auto 0 !important; padding: 0; max-width: 720px; display: grid; gap: .9rem; }
.d-ms-stap { display: flex; align-items: center; gap: 1rem; padding: .8rem 1.1rem; background: #fff; border-radius: 16px; box-shadow: 0 6px 14px rgba(30,43,69,.07); transition: transform .6s cubic-bezier(.34,1.56,.64,1) calc(var(--n) * .18s), opacity .4s calc(var(--n) * .18s); }
.d-ms-munt { flex: none; display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #FFE59A, #E0A82E 70%); box-shadow: inset 0 0 0 4px #C9902A, 0 3px 0 #A87A1E; color: #7A4B12; font-family: var(--wp--preset--font-family--schreef); font-size: 1.3rem; }
.d-ms-stap strong { display: block; font-size: 1.05rem; color: var(--d-navy); }
.d-ms-stap div span { display: block; font-size: .95rem; color: #5B6478; }
.d-muntenstapel.is-js .d-ms-stap { opacity: 0; transform: translateY(-30px); }
.d-muntenstapel.is-js.is-op .d-ms-stap { opacity: 1; transform: none; }
.d-ms-note { text-align: center; }
/* bonnetjes */
.d-bonnetjes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; max-width: 1000px; margin: 1.4rem auto 0 !important; align-items: start; }
.d-bon { position: relative; background: #fff; border-radius: 4px; box-shadow: 0 6px 12px rgba(30,43,69,.08); transform: rotate(calc((var(--n) - 2.5) * .5deg)); }
.d-bon::before { content: ""; position: absolute; left: 50%; top: -7px; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: #8D93A0; box-shadow: inset 0 -2px 0 rgba(0,0,0,.2); }
.d-bon summary { list-style: none; cursor: pointer; padding: 1rem 2.4rem 1rem 1.1rem; font-weight: 700; color: var(--d-navy); position: relative; }
.d-bon summary::-webkit-details-marker { display: none; }
.d-bon summary::after { content: "+"; position: absolute; right: 1rem; top: 50%; transform: translateY(-50%); width: 26px; height: 26px; border-radius: 50%; background: #FFF1C7; color: #9A6A00; text-align: center; line-height: 26px; font-weight: 700; transition: transform .3s; }
.d-bon[open] summary::after { content: "–"; background: #EC8B48; color: #fff; }
.d-bon p { margin: 0 !important; padding: .8rem 1.1rem 1.1rem; border-top: 2px dashed #E2D6BF; font-size: .95rem !important; animation: d-kb-print .35s ease-out; }
@media (max-width: 781px) { .d-bonnetjes { grid-template-columns: 1fr; } .d-bon { transform: none; } }
/* spaartip */
.d-spaartip-section { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }
.d-spaartip { display: flex; align-items: center; gap: 1rem; max-width: 760px; margin: 0 auto !important; padding: 1rem 1.3rem; background: #FFF1C7; border-radius: 14px; }
.d-st-munt { flex: none; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #FFE59A, #E0A82E 70%); box-shadow: inset 0 0 0 4px #C9902A; color: #7A4B12; font-weight: 700; font-size: 1.2rem; animation: d-munt-draai 4s ease-in-out infinite; }
@keyframes d-munt-draai { 0%, 80%, 100% { transform: rotateY(0); } 90% { transform: rotateY(180deg); } }
.d-spaartip p { margin: 0 !important; font-size: .98rem !important; }
.d-spaartip a { font-weight: 700; color: #C8661F; }
/* portemonnee-afsluiter */
.d-portemonnee { display: flex; flex-direction: column; align-items: center; max-width: 460px; margin: 0 auto !important; }
.d-pm-tas { position: relative; z-index: 2; width: 100%; height: 70px; background: #D0567B; border-radius: 18px 18px 6px 6px; box-shadow: inset 0 -8px 0 rgba(0,0,0,.12); }
.d-pm-klep { position: absolute; left: 0; right: 0; top: 0; height: 46px; background: #B8486A; border-radius: 18px 18px 40% 40% / 18px 18px 30px 30px; transform-origin: 50% 0; transition: transform .7s cubic-bezier(.4,1.4,.6,1); }
.d-pm-knoop { position: absolute; left: 50%; bottom: 6px; width: 18px; height: 18px; margin-left: -9px; border-radius: 50%; background: #FFC94D; box-shadow: inset 0 -3px 0 rgba(0,0,0,.15); }
.d-pm-kaart { position: relative; z-index: 1; width: 92%; box-sizing: border-box; margin-top: -10px; padding: 1.6rem 1.4rem 1.2rem; background: #FFFBF0; border-radius: 0 0 16px 16px; box-shadow: 0 10px 22px rgba(30,43,69,.12); text-align: center; transition: transform .8s cubic-bezier(.34,1.3,.64,1) .3s, opacity .4s .3s; }
.d-pm-kaart h2 { margin: .2rem 0 .5rem !important; font-size: clamp(1.5rem, 2.4vw, 1.9rem) !important; }
.d-pm-kaart > p { font-size: .95rem !important; }
.d-pm-knop { display: inline-block; margin: .3rem 0 .8rem; padding: .7rem 1.2rem; background: #EC8B48; color: #fff !important; border-radius: 99px; font-weight: 700; text-decoration: none; box-shadow: 0 4px 0 #C8661F; }
.d-pm-kaart ul { list-style: none; margin: 0; padding: 0; text-align: left; border-top: 2px dashed #E2D6BF; }
.d-pm-kaart li { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: .4rem 0; border-bottom: 2px dashed #E2D6BF; font-size: .9rem; }
.d-pm-kaart li span { color: #5B6478; } .d-pm-kaart li a { font-weight: 700; color: #C8661F; }
.d-pm-sticker { position: absolute; right: -14px; top: 16px; padding: .3rem .8rem; background: #FFC94D; color: var(--d-navy); border-radius: 99px; font-family: var(--wp--preset--font-family--hand); font-size: 1.15rem; transform: rotate(8deg); box-shadow: 0 3px 0 rgba(0,0,0,.12); }
.d-portemonnee.is-js .d-pm-kaart { opacity: 0; transform: translateY(-60px) scaleY(.6); transform-origin: 50% 0; }
.d-portemonnee.is-js.is-op .d-pm-kaart { opacity: 1; transform: none; }
.d-portemonnee.is-js.is-op .d-pm-klep { transform: rotateX(160deg); }
@media (prefers-reduced-motion: reduce) { .d-st-munt { animation: none; } }
.d-prijskaartjes { flex-wrap: nowrap; } .d-pk-kaartje { flex: 1 1 0; min-width: 0; transform: rotate(calc((var(--n) - 1) * 1deg)); } .d-prijskaartjes-section .d-prijskaartjes { max-width: 1000px; width: 100%; } @media (max-width: 600px) { .d-prijskaartjes { flex-direction: column; } }
@media (max-width: 600px) { .d-prijskaartjes { gap: .6rem; } .d-pk-kaartje { display: flex; align-items: center; gap: .8rem; padding: .6rem .9rem .6rem 2.3rem; text-align: left; } .d-pk-kaartje strong { flex: none; font-size: 1.45rem; } .d-pk-kaartje span:last-child { margin: 0; font-size: .8rem; } }
/* Tarieven: rustige, logische opbouw (Audrey: "dit is wel serieus") */
.d-tariefkaarten { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; max-width: 1000px; margin: 1.4rem auto 0 !important; align-items: stretch; }
.d-tk-kaart { padding: 1.4rem 1.5rem 1.2rem; background: #fff; border-radius: 18px; border-top: 6px solid var(--k); box-shadow: 0 8px 20px rgba(30,43,69,.08); }
.d-tk-kop { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; padding-bottom: .8rem; border-bottom: 1px solid #ECEFF3; }
.d-tk-kop h3 { margin: .2rem 0 0 !important; font-size: 1.35rem !important; }
.d-tk-bedrag { margin: 0 !important; text-align: right; font-family: var(--wp--preset--font-family--schreef); font-size: 2rem !important; line-height: 1; color: var(--k); }
.d-tk-bedrag small { display: block; margin-top: .2rem; font-family: inherit; font-size: .8rem; color: #5B6478; font-family: var(--wp--preset--font-family--body, inherit); }
.d-tk-intro { margin: .9rem 0 0 !important; font-size: .96rem !important; color: #3E4C68; }
.d-tk-kaart ul { list-style: none; margin: .8rem 0 0; padding: 0; }
.d-tk-kaart li { position: relative; padding: .55rem 0 .55rem 1.4rem; border-top: 1px dashed #ECEFF3; font-size: .95rem; }
.d-tk-kaart li:first-child { border-top: 0; }
.d-tk-kaart li::before { content: ""; position: absolute; left: 0; top: .95rem; width: 9px; height: 9px; border-radius: 50%; background: var(--k); }
.d-tk-kaart li strong { display: block; color: var(--d-navy); }
.d-tk-kaart li span { color: #3E4C68; }
.d-tk-gedeeld { max-width: 1000px; margin: 1.2rem auto 0 !important; padding: 1rem 1.4rem; background: #FFF8E6; border-radius: 14px; }
.d-tk-gedeeld-kop { margin: 0 0 .5rem !important; font-weight: 700; color: #9A6A00; font-size: .85rem !important; letter-spacing: .1em; text-transform: uppercase; }
.d-tk-gedeeld dl { display: grid; grid-template-columns: repeat(4, 1fr); gap: .8rem; margin: 0; }
.d-tk-gedeeld dt { font-size: .82rem; color: #5B6478; } .d-tk-gedeeld dd { margin: .1rem 0 0; font-weight: 700; color: var(--d-navy); font-size: .95rem; }
.d-tk-note { text-align: center; margin-top: 1rem !important; }
@media (max-width: 781px) { .d-tariefkaarten { grid-template-columns: 1fr; } .d-tk-gedeeld dl { grid-template-columns: 1fr 1fr; } .d-tk-bedrag { font-size: 1.7rem !important; } }
.d-toeslag { display: grid; grid-template-columns: 1.3fr 1fr; gap: 2.4rem; align-items: center; max-width: 1000px; margin: 0 auto !important; }
.d-ts-tekst h2 { margin: .2rem 0 .6rem !important; }
.d-ts-tekst p:not(.d-eyebrow) { font-size: 1rem !important; }
.d-ts-knop { display: inline-block; margin-top: .4rem; padding: .8rem 1.4rem; background: #EC8B48; color: #fff !important; border-radius: 99px; font-weight: 700; text-decoration: none; box-shadow: 0 4px 0 #C8661F; }
.d-ts-zij { display: flex; flex-direction: column; gap: 1rem; }
.d-ts-feit { margin: 0 !important; padding: 1.1rem 1.3rem; background: #fff; border-radius: 16px; box-shadow: 0 6px 14px rgba(30,43,69,.08); }
.d-ts-feit strong { display: block; font-family: var(--wp--preset--font-family--schreef); font-weight: 400; font-size: 2rem; color: #5E8A3A; line-height: 1.1; }
.d-ts-feit span { font-size: .9rem; color: #3E4C68; }
.d-ts-tip { display: flex; gap: .9rem; align-items: flex-start; margin: 0 !important; padding: 1rem 1.2rem; background: #FFF1C7; border-radius: 16px; font-size: .95rem !important; }
.d-ts-tip a { font-weight: 700; color: #C8661F; }
@media (max-width: 781px) { .d-toeslag { grid-template-columns: 1fr; gap: 1.4rem; } }
.d-voorwaarden { max-width: 760px; margin: 1.2rem auto 0 !important; }
.d-vw-item { background: #fff; border: 1px solid #ECEFF3; border-radius: 12px; margin-bottom: .6rem; }
.d-vw-item summary { list-style: none; cursor: pointer; padding: .9rem 3rem .9rem 1.1rem; font-weight: 700; color: var(--d-navy); position: relative; }
.d-vw-item summary::-webkit-details-marker { display: none; }
.d-vw-item summary::after { content: "+"; position: absolute; right: 1rem; top: 50%; transform: translateY(-50%); width: 26px; height: 26px; border-radius: 50%; background: #F3F5F8; text-align: center; line-height: 26px; color: #496390; }
.d-vw-item[open] summary::after { content: "–"; background: #EC8B48; color: #fff; }
.d-vw-item p { margin: 0 !important; padding: 0 1.1rem 1rem; color: #3E4C68; font-size: .96rem !important; }
.d-vw-links { display: flex; flex-wrap: wrap; gap: 1.4rem; margin: 1rem 0 0 !important; }
.d-vw-links a { font-weight: 700; color: #C8661F; }
/* Tarieven: minder wit tussen tarieven en rekentool */
.d-tariefkaarten-section { padding-bottom: 1.2rem !important; }
.d-tariefkaarten-section + .d-reken-wrap, .d-tariefkaarten-section + * + .d-reken-wrap, #rekentool { padding-top: 1.6rem !important; }
.d-tk-note { margin: .8rem 0 0 !important; }
/* Tarieven: rekentool als eigen blauw blok, even breed als de tariefkaarten */
.d-tariefkaarten-section { padding-bottom: 2.4rem !important; }
.d-tk-inbegrepen { margin: .8rem 0 0 !important; padding-top: .7rem; border-top: 1px dashed #EAD9BC; font-weight: 700; color: #496B3D; font-size: .95rem !important; }
.d-tk-inbegrepen::before { content: "✓ "; }
body:has(.d-tariefkaarten) #rekentool { background: #DFE8F6; padding-top: 2.6rem !important; padding-bottom: 2.6rem !important; }
body:has(.d-tariefkaarten) #rekentool > * { max-width: 1000px; }
body:has(.d-tariefkaarten) #rekentool .d-reken { background: #fff; border: 0; box-shadow: 0 8px 20px rgba(30,43,69,.08); }
body:not(.home) #rekentool + .d-toeslag-section, body:not(.home) #rekentool + * .d-toeslag-section { margin-top: 0 !important; }
body:not(.home) #rekentool ~ .d-toeslag-section { margin-top: 0 !important; } #rekentool + p:empty { display: none; margin: 0; }
/* Openingstijden: rustig en overzichtelijk */
.d-tijdenkaart-section { padding-top: 2rem !important; padding-bottom: 2rem !important; }
.d-tijdenkaart { display: flex; align-items: center; gap: 1.6rem; max-width: 760px; margin: 0 auto !important; padding: 1.4rem 1.8rem; background: #fff; border-radius: 20px; border-left: 8px solid #496390; box-shadow: 0 8px 20px rgba(30,43,69,.08); }
.d-tijd-klok { flex: none; position: relative; width: 74px; height: 74px; border-radius: 50%; background: #DFE8F6; box-shadow: inset 0 0 0 5px #496390; }
.d-tijd-klok::before, .d-tijd-klok::after { content: ""; position: absolute; left: 50%; bottom: 50%; width: 4px; margin-left: -2px; border-radius: 2px; background: #1E2B45; transform-origin: 50% 100%; }
.d-tijd-klok::before { height: 18px; transform: rotate(-60deg); } .d-tijd-klok::after { height: 26px; transform: rotate(90deg); }
.d-tijd-kop { margin: 0 0 .3rem !important; font-size: .82rem !important; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #496390; }
.d-tijd-uren { display: flex; align-items: flex-end; gap: 1rem; margin: 0 !important; font-family: var(--wp--preset--font-family--schreef); font-size: 2.4rem !important; line-height: 1; color: var(--d-navy); }
.d-tijd-uren small { display: block; font-family: var(--wp--preset--font-family--body, inherit); font-size: .8rem; color: #5B6478; margin-bottom: .3rem; }
.d-tijd-streep { color: #B9C3D3; }
.d-tijd-extra { margin: .8rem 0 0 !important; padding-top: .7rem; border-top: 1px dashed #E3E7EE; font-size: .96rem !important; }
@media (max-width: 600px) { .d-tijdenkaart { flex-direction: column; text-align: center; gap: 1rem; padding: 1.2rem; border-left: 0; border-top: 8px solid #496390; } .d-tijd-uren { justify-content: center; font-size: 1.9rem !important; } }
.d-feestdagen { display: grid; grid-template-columns: 1.2fr 1fr; gap: 1.4rem; max-width: 1000px; margin: 1.3rem auto 0 !important; align-items: start; }
.d-fd-lijst { padding: 1.3rem 1.4rem; background: #fff; border-radius: 18px; box-shadow: 0 8px 20px rgba(30,43,69,.08); }
.d-fd-lijst h3 { margin: 0 0 .6rem !important; font-size: 1.2rem !important; }
.d-fd-lijst > p { margin: 0 0 .6rem !important; font-size: .95rem !important; color: #3E4C68; }
.d-fd-lijst ul { list-style: none; margin: 0; padding: 0; }
.d-fd-lijst li { display: flex; justify-content: space-between; gap: 1rem; padding: .55rem 0; border-top: 1px dashed #E3E7EE; font-size: .96rem; }
.d-fd-dag { font-weight: 700; color: var(--d-navy); padding-left: 1.4rem; position: relative; }
.d-fd-dag::before { content: ""; position: absolute; left: 0; top: .35em; width: 12px; height: 12px; border-radius: 3px; background: #C8382E; }
.d-fd-korter .d-fd-dag::before { background: #E0A82E; border-radius: 50%; }
.d-fd-op { color: #5B6478; text-align: right; }
@media (max-width: 781px) { .d-feestdagen { grid-template-columns: 1fr; } }
.d-infokaart { display: flex; gap: 1.4rem; align-items: flex-start; max-width: 860px; margin: 0 auto !important; padding: 1.6rem 1.8rem; background: #FFF8E6; border-radius: 20px; }
.d-ik-icoon, .d-ek-icoon { flex: none; display: flex; align-items: center; justify-content: center; width: 60px; height: 60px; border-radius: 18px; background: #496390; }
.d-ik-icoon .d-icon, .d-ek-icoon .d-icon { --ink: #fff; width: 30px; height: 30px; }
.d-infokaart h2 { margin: .1rem 0 .6rem !important; font-size: clamp(1.5rem, 2.6vw, 2rem) !important; }
.d-infokaart p:not(.d-eyebrow) { font-size: 1rem !important; margin: 0 0 .6rem !important; }
.d-ik-note { font-family: var(--wp--preset--font-family--hand); font-size: 1.35rem !important; color: #496B3D; margin: .2rem 0 0 !important; }
@media (max-width: 600px) { .d-infokaart { flex-direction: column; gap: .8rem; padding: 1.3rem 1.2rem; } }
.d-infostrip-section { padding-top: 0 !important; }
.d-infostrip { display: flex; align-items: center; gap: 1rem; max-width: 860px; margin: 0 auto !important; padding: .9rem 1.3rem; background: #fff; border: 2px solid #E3E7EE; border-radius: 14px; }
.d-infostrip .d-icon { --ink: #C8661F; flex: none; width: 28px; height: 28px; }
.d-infostrip p { margin: 0 !important; font-size: .96rem !important; }
.d-infostrip a { font-weight: 700; color: #C8661F; }
.d-eindkaart { max-width: 520px; margin: 0 auto !important; padding: 1.6rem 1.6rem 1.2rem; background: #FFFBF0; border-radius: 18px; box-shadow: 0 10px 22px rgba(30,43,69,.1); text-align: center; }
.d-ek-icoon { margin: -3rem auto .8rem; border-radius: 50%; box-shadow: 0 0 0 6px #FFFBF0; }
.d-eindkaart h2 { margin: .2rem 0 .5rem !important; font-size: clamp(1.5rem, 2.4vw, 1.9rem) !important; }
.d-eindkaart > p:not(.d-eyebrow) { font-size: .96rem !important; }
.d-ek-knop { display: inline-block; margin: .3rem 0 .9rem; padding: .7rem 1.3rem; background: #EC8B48; color: #fff !important; border-radius: 99px; font-weight: 700; text-decoration: none; box-shadow: 0 4px 0 #C8661F; }
.d-eindkaart ul { list-style: none; margin: 0; padding: 0; text-align: left; border-top: 2px dashed #E2D6BF; }
.d-eindkaart li { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: .45rem 0; border-bottom: 2px dashed #E2D6BF; font-size: .92rem; }
.d-eindkaart li span { color: #5B6478; } .d-eindkaart li a { font-weight: 700; color: #C8661F; }
.d-eindkaart-section { padding-top: 3.4rem !important; }
.d-tijdenkaart, .d-feestdagen, .d-infokaart, .d-infostrip { text-align: left; } @media (max-width: 600px) { .d-tijdenkaart { text-align: center; } }
main .d-infostrip-section::before { display: none !important; } .d-infokaart-section { padding-bottom: 1rem !important; } .d-infokaart p.d-ik-note { font-size: 1.4rem !important; margin-top: .3rem !important; }
.d-tijd-uren > span { white-space: nowrap; } @media (max-width: 600px) { .d-tijd-uren { font-size: 1.6rem !important; gap: .6rem; } .d-tijd-klok { width: 54px; height: 54px; } .d-tijd-klok::before { height: 13px; } .d-tijd-klok::after { height: 19px; } }
/* Veelgestelde vragen: per onderwerp */
.d-fq-nav { display: flex; flex-wrap: wrap; gap: .6rem; max-width: 860px; margin: 1.2rem auto 0 !important; }
.d-fq-chip { display: inline-flex; align-items: center; gap: .5rem; padding: .55rem 1rem; background: #fff; border: 2px solid #E3E7EE; border-radius: 99px; font-weight: 700; font-size: .92rem; color: var(--d-navy) !important; text-decoration: none; transition: border-color .2s, background .2s; }
.d-fq-chip .d-icon { --ink: #C8661F; width: 20px; height: 20px; }
.d-fq-chip:hover { border-color: #EC8B48; background: #FFF4EC; }
.d-fq-groepen { max-width: 860px; margin: 1.6rem auto 0 !important; display: grid; gap: 1.6rem; text-align: left; }
.d-fq-groep { scroll-margin-top: 110px; }
.d-fq-groep h3 { display: flex; align-items: center; gap: .7rem; margin: 0 0 .7rem !important; font-size: 1.3rem !important; }
.d-fq-icoon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 12px; background: #FDE3CF; }
.d-fq-icoon .d-icon { --ink: #C8661F; width: 22px; height: 22px; }
.d-fq-groep .d-vw-item p a { font-weight: 700; color: #C8661F; }
@media (max-width: 600px) { .d-fq-chip { font-size: .85rem; padding: .45rem .8rem; } }
.d-faqgroepen-section > .d-eyebrow, .d-faqgroepen-section > h2, .d-faqgroepen-section > .d-muted { max-width: 1000px; margin-left: auto !important; margin-right: auto !important; }
.d-fq-nav, .d-fq-groepen { max-width: 1000px; }
@media (min-width: 900px) { .d-fq-groepen { grid-template-columns: 1fr 1fr; align-items: start; column-gap: 1.8rem; } }
.d-faqgroepen-section + .d-infostrip-section::before { display: none !important; }
.d-faqgroepen-section { padding-bottom: 1.4rem !important; }
.d-infostrip { max-width: 1000px; }
/* Beleidsdocumenten: per soort, nette downloadregels */
.d-documenten-section > .d-eyebrow, .d-documenten-section > h2 { max-width: 1000px; margin-left: auto !important; margin-right: auto !important; }
.d-documenten { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; max-width: 1000px; margin: 1.4rem auto 0 !important; align-items: start; text-align: left; }
.d-doc-groep { padding: 1.3rem 1.4rem; background: #fff; border-radius: 18px; box-shadow: 0 8px 20px rgba(30,43,69,.08); }
.d-doc-groep:nth-child(2) { grid-row: span 2; }
.d-doc-kop { display: flex; gap: .9rem; align-items: flex-start; margin-bottom: .8rem; }
.d-doc-kop h3 { margin: .1rem 0 .2rem !important; font-size: 1.2rem !important; }
.d-doc-kop p { margin: 0 !important; font-size: .94rem !important; color: #3E4C68; }
.d-doc-groep ul { list-style: none; margin: 0; padding: 0; }
.d-doc-groep li a { display: flex; align-items: center; gap: .8rem; padding: .7rem .4rem; border-top: 1px dashed #E3E7EE; color: var(--d-navy); text-decoration: none; font-weight: 600; font-size: .95rem; border-radius: 8px; transition: background .2s; }
.d-doc-groep li a:hover { background: #FFF4EC; }
.d-doc-pdf { flex: none; padding: .2rem .45rem; background: #C8382E; color: #fff; border-radius: 4px; font-size: .7rem; font-weight: 700; letter-spacing: .05em; }
.d-doc-titel { flex: 1; }
.d-doc-pijl { flex: none; width: 28px; height: 28px; border-radius: 50%; background: #F3F5F8; text-align: center; line-height: 28px; color: #C8661F; font-weight: 700; }
.d-doc-extra { margin: .8rem 0 0 !important; padding-top: .7rem; border-top: 1px dashed #E3E7EE; font-size: .92rem !important; }
.d-doc-extra a { font-weight: 700; color: #C8661F; }
@media (max-width: 781px) { .d-documenten { grid-template-columns: 1fr; } .d-doc-groep:nth-child(2) { grid-row: auto; } }
.d-documenten-section + .d-infostrip-section::before { display: none !important; }
.d-documenten-section { padding-bottom: 1.4rem !important; }
/* Koppen in de hero niet afbreken met een streepje; lange woorden worden met JS iets kleiner gemaakt (Audrey) */
body:not(.home) .d-play-title { -webkit-hyphens: manual !important; hyphens: manual !important; overflow-wrap: normal !important; word-break: normal !important; }
/* Voor ouders: kaartenbak (vier kaarten met tabje), tekst met kleine foto, driehoek */
.d-kaartenbak { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; margin-top: 2.2rem !important; text-align: left; }
.d-kb-kaart { position: relative; padding: 1.6rem 1.3rem 1.3rem; background: #fff; border-radius: 4px 18px 18px 18px; border-top: 5px solid var(--k); box-shadow: 0 8px 20px rgba(30,43,69,.08); }
.d-kb-tab { position: absolute; left: -5px; top: -30px; display: flex; align-items: center; justify-content: center; width: 54px; height: 30px; border-radius: 12px 12px 0 0; background: var(--k); }
.d-kb-tab .d-icon { --ink: #fff; width: 20px; height: 20px; }
.d-kb-kaart h3 { margin: 0 0 .4rem !important; font-size: 1.15rem !important; }
.d-kb-kaart p { margin: 0 !important; font-size: .95rem !important; color: #3E4C68; }
.d-kb-kaart a { font-weight: 700; color: #C8661F; white-space: nowrap; }
@media (max-width: 1000px) { .d-kaartenbak { grid-template-columns: 1fr 1fr; row-gap: 2.6rem; } }
@media (max-width: 560px) { .d-kaartenbak { grid-template-columns: 1fr; } }
.d-tf-cols { gap: 2.5rem !important; }
.d-tf-foto { position: relative; max-width: 260px; margin: 0 auto !important; }
.d-tf-foto img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 50%; border: 8px solid #fff; box-shadow: 0 12px 24px rgba(30,43,69,.15); }
.d-tf-foto figcaption { position: absolute; left: 50%; bottom: -12px; transform: translateX(-50%) rotate(-4deg); white-space: nowrap; padding: .4rem .9rem; background: #fff; border-radius: 99px; font-family: var(--wp--preset--font-family--hand); font-size: 1.25rem; color: #C8661F; box-shadow: 0 5px 12px rgba(30,43,69,.12); }
@media (max-width: 781px) { .d-tf-foto { max-width: 200px; margin-top: 1rem !important; } }
.d-tekstfoto-section + .d-infostrip-section { padding-top: 2rem !important; }
.d-driehoek { max-width: 760px; margin: 0 auto !important; text-align: center; }
.d-dh-vlak { position: relative; width: 460px; height: 300px; margin: 0 auto; }
.d-dh-lijnen, .d-dh-lijnen::before, .d-dh-lijnen::after { position: absolute; height: 3px; background: repeating-linear-gradient(90deg, #C9B79A 0 10px, transparent 10px 18px); }
.d-dh-lijnen { left: 15%; right: 15%; top: 85%; }
.d-dh-lijnen::before, .d-dh-lijnen::after { content: ""; width: 265px; top: 0; }
.d-dh-lijnen::before { left: 0; transform-origin: 0 50%; transform: rotate(-52.5deg); }
.d-dh-lijnen::after { right: 0; transform-origin: 100% 50%; transform: rotate(52.5deg); }
.d-dh-punt { position: absolute; transform: translate(-50%, -50%); padding: .55rem 1rem; background: var(--k); color: #fff; border-radius: 99px; font-weight: 700; font-size: .95rem; white-space: nowrap; box-shadow: 0 6px 12px rgba(30,43,69,.15); }
.d-dh-p1 { left: 50%; top: 15%; } .d-dh-p2 { left: 15%; top: 85%; } .d-dh-p3 { left: 85%; top: 85%; }
.d-dh-midden { position: absolute; left: 50%; top: 62%; transform: translate(-50%, -50%); display: flex; align-items: center; justify-content: center; width: 96px; height: 96px; border-radius: 50%; background: #FFF1C7; box-shadow: 0 0 0 6px #fff, 0 8px 16px rgba(30,43,69,.12); font-family: var(--wp--preset--font-family--hand); font-size: 1.5rem; color: #C8661F; }
.d-dh-tekst { max-width: 620px; margin: 1.4rem auto 0 !important; font-size: 1.02rem !important; }
.d-dh-tekst a { font-weight: 700; color: #C8661F; }
@media (max-width: 600px) { .d-dh-vlak { transform: scale(.72); transform-origin: 50% 0; margin-bottom: -84px; } }
.d-dh-punt { min-width: 70px; text-align: center; }
@media (max-width: 600px) { .d-dh-vlak { left: 50%; margin: 0 0 -90px; transform: translateX(-50%) scale(.68); transform-origin: 50% 0; } }
@media (max-width: 600px) { .d-dh-vlak { transform: translateX(-50%) scale(.6); margin-bottom: -110px; } }
/* Veiligheid en hygiëne: rustige lijsten, raster, toezicht */
.d-tl-cols { gap: 3rem !important; }
.d-themalijst { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; text-align: left; }
.d-themalijst li { display: flex; gap: .9rem; align-items: flex-start; padding: .9rem 1.1rem; background: #fff; border-radius: 14px; box-shadow: 0 6px 14px rgba(30,43,69,.06); }
.d-themalijst-section:not(.d-band) .d-themalijst li { border: 1px solid #ECEFF3; box-shadow: none; }
.d-tl-icoon { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 12px; background: #DFE8F6; }
.d-tl-icoon .d-icon { --ink: #496390; width: 22px; height: 22px; }
.d-themalijst strong { display: block; color: var(--d-navy); font-size: 1rem; }
.d-themalijst li span:not(.d-icon):not(.d-tl-icoon) { display: block; font-size: .94rem; color: #3E4C68; }
@media (max-width: 781px) { .d-tl-cols { gap: 1.2rem !important; } }
.d-ikonraster { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 1.4rem !important; text-align: left; }
.d-ir-kaart { padding: 1.1rem 1.2rem; background: #fff; border: 1px solid #ECEFF3; border-radius: 16px; }
.d-ir-kaart strong { display: block; margin: .6rem 0 .25rem; color: var(--d-navy); font-size: 1.02rem; }
.d-ir-kaart p { margin: 0 !important; font-size: .93rem !important; color: #3E4C68; }
.d-ir-note { text-align: center; margin-top: 1.1rem !important; }
@media (max-width: 900px) { .d-ikonraster { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .d-ikonraster { grid-template-columns: 1fr; } }
.d-toezicht { text-align: left; margin-top: 1.2rem !important; }
.d-tz-feiten { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.d-tz-feit { display: flex; align-items: center; gap: .9rem; padding: 1rem 1.2rem; background: #FFF8E6; border-radius: 14px; }
.d-tz-feit strong { flex: none; font-family: var(--wp--preset--font-family--schreef); font-weight: 400; font-size: 2rem; color: #C8661F; line-height: 1; }
.d-tz-feit span { font-size: .93rem; color: #3E4C68; }
.d-tz-tekst { margin: 1.2rem 0 !important; font-size: 1rem !important; }
.d-tz-tekst a { font-weight: 700; color: #C8661F; }
.d-tz-docs { max-width: 760px; }
.d-tz-docs h3 { margin: 0 0 .6rem !important; font-size: 1.15rem !important; }
@media (max-width: 781px) { .d-tz-feiten { grid-template-columns: 1fr; } }
/* Veiligheid en hygiëne: iets leuker (Audrey) */
.d-handwas { position: relative; display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; margin-top: 1.2rem; padding: .9rem 1.1rem; background: #E8F3FB; border-radius: 16px; font-family: var(--wp--preset--font-family--hand); font-size: 1.4rem; color: #2F5DA8; overflow: hidden; }
.d-hw-stap { display: inline-flex; align-items: center; gap: .4rem; }
.d-hw-bol { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 2px #9CC3EA; font-family: var(--wp--preset--font-family--body, inherit); font-size: .85rem; font-weight: 700; color: #2F5DA8; }
.d-hw-pijl { color: #9CC3EA; }
.d-hw-bellen i { position: absolute; bottom: -20px; width: 14px; height: 14px; border-radius: 50%; border: 2px solid rgba(47,93,168,.35); background: rgba(255,255,255,.6); animation: d-hw-bel 5s ease-in infinite; }
.d-hw-bellen i:nth-child(1) { left: 12%; } .d-hw-bellen i:nth-child(2) { left: 34%; width: 10px; height: 10px; animation-delay: 1s; } .d-hw-bellen i:nth-child(3) { left: 56%; animation-delay: 2s; width: 18px; height: 18px; } .d-hw-bellen i:nth-child(4) { left: 74%; animation-delay: 3s; } .d-hw-bellen i:nth-child(5) { left: 90%; animation-delay: 4s; width: 9px; height: 9px; }
@keyframes d-hw-bel { 0% { transform: translateY(0); opacity: 0; } 15% { opacity: 1; } 100% { transform: translate(8px, -90px); opacity: 0; } }
.d-tl-hygiene .d-themalijst li:nth-child(4n+1) .d-tl-icoon { background: #DFE8F6; } .d-tl-hygiene .d-themalijst li:nth-child(4n+2) .d-tl-icoon { background: #E0EBCF; } .d-tl-hygiene .d-themalijst li:nth-child(4n+3) .d-tl-icoon { background: #FDE3CF; } .d-tl-hygiene .d-themalijst li:nth-child(4n) .d-tl-icoon { background: #FFF0C2; }
.d-tl-hygiene .d-themalijst li:nth-child(4n+2) .d-icon { --ink: #496B3D; } .d-tl-hygiene .d-themalijst li:nth-child(4n+3) .d-icon { --ink: #C8661F; } .d-tl-hygiene .d-themalijst li:nth-child(4n) .d-icon { --ink: #9A6A00; }
.d-tl-schild .d-tl-icoon { width: 44px; height: 50px; border-radius: 0; clip-path: polygon(50% 0, 100% 14%, 100% 55%, 50% 100%, 0 55%, 0 14%); background: #496390; }
.d-tl-schild .d-tl-icoon .d-icon { --ink: #fff; margin-top: -4px !important; }
.d-tl-schild .d-themalijst li:nth-child(5n+2) .d-tl-icoon { background: #C8382E; } .d-tl-schild .d-themalijst li:nth-child(5n+3) .d-tl-icoon { background: #5E8A3A; } .d-tl-schild .d-themalijst li:nth-child(5n+4) .d-tl-icoon { background: #EC8B48; } .d-tl-schild .d-themalijst li:nth-child(5n) .d-tl-icoon { background: #B8860B; }
.d-themalijst li { transition: transform .25s; }
.d-themalijst li:hover { transform: translateX(4px); }
.d-themalijst li:hover .d-tl-icoon { animation: d-schild-wip .5s ease-in-out; }
@keyframes d-schild-wip { 40% { transform: rotate(-10deg) scale(1.08); } 70% { transform: rotate(6deg); } }
.d-ir-met-ogen { position: relative; }
.d-ogen { position: absolute; right: max(2rem, calc((100% - 1200px) / 2)); top: 2.4rem; display: flex; gap: 8px; }
.d-oog { position: relative; width: 54px; height: 54px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 4px #1E2B45, 0 6px 12px rgba(30,43,69,.12); overflow: hidden; animation: d-knipoog 5s infinite; }
.d-oog i { position: absolute; left: 50%; top: 50%; width: 20px; height: 20px; margin: -10px 0 0 -10px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff 0 3px, #1E2B45 4px); transition: transform .15s; }
@keyframes d-knipoog { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.1); } }
.d-ikonraster .d-ir-kaart:nth-child(6n+1) .d-tl-icoon { background: #DFE8F6; } .d-ikonraster .d-ir-kaart:nth-child(6n+2) .d-tl-icoon { background: #FDE3CF; } .d-ikonraster .d-ir-kaart:nth-child(6n+3) .d-tl-icoon { background: #E0EBCF; } .d-ikonraster .d-ir-kaart:nth-child(6n+4) .d-tl-icoon { background: #FFF0C2; } .d-ikonraster .d-ir-kaart:nth-child(6n+5) .d-tl-icoon { background: #F7DDE6; } .d-ikonraster .d-ir-kaart:nth-child(6n) .d-tl-icoon { background: #E0EBCF; }
.d-ir-kaart { transition: transform .25s, box-shadow .25s; } .d-ir-kaart:hover { transform: translateY(-4px); box-shadow: 0 10px 20px rgba(30,43,69,.08); }
.d-tz-feit { position: relative; }
.d-tz-stempel { position: absolute; right: -8px; top: -12px; display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; background: #5E8A3A; color: #fff; font-weight: 700; font-size: 1.1rem; box-shadow: 0 0 0 3px #fff; transform: rotate(-12deg); transition: transform .5s cubic-bezier(.34,1.56,.64,1) calc(var(--n) * .25s), opacity .3s calc(var(--n) * .25s); }
.d-toezicht.is-js .d-tz-stempel { transform: scale(2.2) rotate(-30deg); opacity: 0; }
.d-toezicht.is-js.is-op .d-tz-stempel { transform: rotate(-12deg); opacity: 1; }
@media (max-width: 781px) { .d-ogen { position: static; justify-content: flex-start; margin-bottom: .8rem; } .d-oog { width: 42px; height: 42px; } .d-oog i { width: 16px; height: 16px; margin: -8px 0 0 -8px; } }
@media (prefers-reduced-motion: reduce) { .d-hw-bellen i, .d-oog { animation: none; } }
/* Zieke kinderen: thermometer, pleisters, vinkjes, citaatstrook */
.d-th-cols { gap: 3rem !important; }
.d-thermo { display: flex; gap: 1.6rem; align-items: stretch; padding: 1.4rem 1.6rem; background: #fff; border-radius: 20px; box-shadow: 0 10px 22px rgba(30,43,69,.08); text-align: left; }
.d-th-meter { position: relative; flex: none; width: 46px; display: flex; flex-direction: column; align-items: center; padding-bottom: 4px; }
.d-th-buis { position: relative; flex: 1; width: 18px; min-height: 180px; border-radius: 9px 9px 0 0; background: #F3F5F8; box-shadow: inset 0 0 0 3px #D8DCE3; overflow: hidden; }
.d-th-kwik { position: absolute; left: 4px; right: 4px; bottom: 0; height: 72%; border-radius: 6px 6px 0 0; background: #E86A5E; transition: height 1.6s cubic-bezier(.3,.8,.3,1); }
.d-thermo-section.is-js .d-th-kwik { height: 8%; }
.d-thermo-section.is-js.is-op .d-th-kwik { height: 72%; }
.d-th-bol { width: 40px; height: 40px; margin-top: -6px; border-radius: 50%; background: #E86A5E; box-shadow: inset 0 0 0 3px #D8DCE3, 0 0 0 0 #E86A5E; }
.d-th-grens { position: absolute; left: 30px; top: calc(28% - 1px); white-space: nowrap; }
.d-th-grens::before { content: ""; position: absolute; left: -14px; top: 50%; width: 22px; height: 2px; background: #C8382E; }
.d-th-grens b { display: inline-block; margin-left: 12px; padding: .1rem .45rem; background: #C8382E; color: #fff; border-radius: 6px; font-size: .8rem; transform: translateY(-50%); }
.d-th-lijst { flex: 1; padding-left: 2.4rem; }
.d-th-kop { margin: 0 0 .5rem !important; font-family: var(--wp--preset--font-family--hand); font-size: 1.45rem !important; color: #C8382E; }
.d-th-lijst ul { list-style: none; margin: 0; padding: 0; }
.d-th-lijst li { padding: .55rem 0; border-top: 1px dashed #ECEFF3; font-size: .97rem; }
.d-th-lijst li:first-child { border-top: 0; }
.d-th-lijst li strong { display: block; color: #C8382E; font-size: .82rem; letter-spacing: .08em; text-transform: uppercase; }
@media (max-width: 600px) { .d-thermo { padding: 1.1rem; gap: .8rem; } .d-th-lijst { padding-left: 2.2rem; } }
.d-ir-pleister .d-ikonraster { grid-template-columns: 1fr 1fr; }
.d-ir-pleister .d-ir-kaart { position: relative; border: 0; box-shadow: 0 8px 18px rgba(30,43,69,.07); }
.d-ir-pleister .d-ir-kaart::after { content: ""; position: absolute; right: -10px; top: 14px; width: 58px; height: 20px; border-radius: 10px; background: radial-gradient(circle, rgba(200,140,90,.5) 1.2px, transparent 1.6px) 50% 50% / 6px 6px, linear-gradient(90deg, #F2C9A5 0 30%, #F7DCC2 30% 70%, #F2C9A5 70%); transform: rotate(35deg); box-shadow: 0 2px 4px rgba(0,0,0,.08); }
.d-ir-pleister .d-ir-kaart:nth-child(even)::after { right: auto; left: -10px; transform: rotate(-30deg); }
@media (max-width: 700px) { .d-ir-pleister .d-ikonraster { grid-template-columns: 1fr; } }
.d-tl-check .d-tl-icoon { border-radius: 50%; background: #E0EBCF; }
.d-tl-check .d-tl-icoon .d-icon { --ink: #496B3D; }
.d-tl-check.is-js .d-themalijst li .d-tl-icoon { transform: scale(0); }
.d-tl-check.is-js.is-op .d-themalijst li .d-tl-icoon { transform: scale(1); transition: transform .45s cubic-bezier(.34,1.56,.64,1); }
.d-tl-check.is-js.is-op .d-themalijst li:nth-child(2) .d-tl-icoon { transition-delay: .3s; } .d-tl-check.is-js.is-op .d-themalijst li:nth-child(3) .d-tl-icoon { transition-delay: .6s; } .d-tl-check.is-js.is-op .d-themalijst li:nth-child(4) .d-tl-icoon { transition-delay: .9s; }
.d-citaatstrip { max-width: 760px; margin: 0 auto !important; padding: 1.4rem 1.8rem; background: #FDE3CF; border-radius: 22px 22px 22px 4px; text-align: center; }
.d-citaatstrip blockquote { margin: 0; padding: 0; border: 0; font-family: var(--wp--preset--font-family--schreef); font-size: clamp(1.4rem, 2.6vw, 1.9rem); line-height: 1.25; color: var(--d-navy); }
.d-citaatstrip figcaption { margin-top: .6rem; font-weight: 700; color: #C8661F; font-size: .95rem; }
.d-citaatstrip figcaption span { font-weight: 400; color: #5B6478; }
.d-citaatstrip-section + .d-infostrip-section::before { display: none !important; }
.d-ir-pleister .d-ir-kaart:nth-child(even)::after { left: auto; right: -10px; transform: rotate(35deg); } .d-ir-pleister .d-ir-kaart:nth-child(n+3)::after { display: none; } .d-ir-pleister .d-ikonraster { column-gap: 1.6rem; }
.d-th-grens { top: calc((100% - 38px) * .28); }
.d-th-grens { transform: translateY(-50%); } .d-th-grens b { transform: none; }
/* Zieke kinderen: pleisterrand alleen rond de gekleurde band, niet tussen alle witte blokken */
body:has(.d-world-dokter) main .d-section:not(.d-band) + .d-section:not(.d-band)::before { display: none !important; }
.d-citaat-klein { margin: 1.6rem 0 0 !important; padding: 1.1rem 1.3rem; text-align: left; border-radius: 18px 18px 18px 4px; }
.d-citaat-klein blockquote { font-size: 1.35rem !important; }
.d-tl-check + .d-infostrip-section, .d-themalijst-section + .d-infostrip-section { padding-top: 0 !important; }
.d-themalijst-section + .d-infostrip-section::before { display: none !important; }
/* Ouders en oudercommissie: deurtje, open deuren, agendapunten */
body:has(.d-world-opendeur) main .d-section:not(.d-band) + .d-section:not(.d-band)::before { display: none !important; }
.d-dt-cols { gap: 3rem !important; }
.d-deurtje { position: relative; display: flex; flex-direction: column; align-items: center; max-width: 230px; margin: 0 auto !important; }
.d-dt-kozijn { position: relative; width: 200px; height: 270px; border-radius: 100px 100px 6px 6px; box-shadow: 0 0 0 10px #fff, 0 0 0 13px #E2D6BF, 0 16px 28px rgba(30,43,69,.15); overflow: hidden; perspective: 700px; background: #FFE7A3; }
.d-dt-kozijn img { display: block; width: 100%; height: 100%; object-fit: cover; }
.d-dt-blad { position: absolute; inset: 0; border-radius: 100px 100px 6px 6px; background: #5E8A3A; box-shadow: inset 0 0 0 10px rgba(255,255,255,.12); transform-origin: 0 50%; transition: transform 1.2s cubic-bezier(.4,1.2,.6,1) .2s; }
.d-dt-blad::before { content: ""; position: absolute; left: 26px; right: 26px; top: 34px; height: 70px; border-radius: 60px 60px 6px 6px; background: rgba(255,255,255,.18); }
.d-dt-blad i { position: absolute; right: 22px; top: 54%; width: 14px; height: 14px; border-radius: 50%; background: #FFC94D; }
.d-deurtekst-section.is-op .d-dt-blad, .d-deurtekst-section:not(.is-js) .d-dt-blad { transform: rotateY(-78deg); }
.d-dt-mat { margin-top: 18px; padding: .4rem 1.2rem; background: #C89A6A; color: #fff; border-radius: 8px; font-family: var(--wp--preset--font-family--hand); font-size: 1.3rem; transform: perspective(200px) rotateX(25deg); box-shadow: inset 0 0 0 3px rgba(0,0,0,.08); }
@media (max-width: 781px) { .d-dt-kozijn { width: 160px; height: 215px; } .d-deurtje { margin-top: 1rem !important; } }
.d-od-cols { gap: 2.5rem !important; }
.d-od-fotos { display: flex; justify-content: center; gap: 1rem; }
.d-od-foto { margin: 0; text-align: center; }
.d-od-foto:nth-child(2) { margin-top: 30px; }
.d-od-foto img { display: block; width: 140px; height: 140px; border-radius: 50%; object-fit: cover; border: 6px solid #fff; box-shadow: 0 8px 16px rgba(30,43,69,.12); }
.d-od-foto figcaption { margin-top: .4rem; font-family: var(--wp--preset--font-family--hand); font-size: 1.2rem; color: #496390; }
.d-od-tussen { margin-top: 2rem !important; padding: 1.2rem 1.4rem; background: #fff; border-radius: 18px; box-shadow: 0 8px 18px rgba(30,43,69,.07); }
.d-od-groepen { display: flex; align-items: center; flex-wrap: wrap; gap: .3rem; margin-bottom: .8rem; }
.d-od-groep { padding: .35rem .8rem; border-radius: 99px; background: var(--k); color: #fff; font-weight: 700; font-size: .88rem; }
.d-od-lijn { width: 26px; height: 2px; background: repeating-linear-gradient(90deg, #B9C3D3 0 5px, transparent 5px 9px); }
.d-od-tussen p { margin: 0 !important; font-size: .98rem !important; }
@media (max-width: 600px) { .d-od-foto img { width: 96px; height: 96px; border-width: 4px; } .d-od-foto figcaption { font-size: 1rem; } .d-od-fotos { gap: .5rem; } .d-od-lijn { width: 12px; } }
.d-ir-agenda .d-ikonraster { grid-template-columns: 1fr 1fr; counter-reset: agenda; }
.d-ir-agenda .d-ir-kaart { position: relative; border: 0; box-shadow: 0 8px 18px rgba(30,43,69,.07); padding-top: 1.5rem; counter-increment: agenda; }
.d-ir-agenda .d-ir-kaart::before { content: "Agendapunt " counter(agenda); position: absolute; right: 1rem; top: -11px; padding: .2rem .7rem; background: #FFC94D; color: var(--d-navy); border-radius: 6px; font-size: .75rem; font-weight: 700; letter-spacing: .04em; transform: rotate(2deg); }
@media (max-width: 700px) { .d-ir-agenda .d-ikonraster { grid-template-columns: 1fr; row-gap: 1.4rem; } }
.d-oc-noot { margin-top: 1.4rem !important; align-items: flex-start; background: #FFF8E6; border: 0; } .d-oc-noot .d-icon { margin-top: .2rem !important; }
/* Klachten en privacy: brievenbus, tijdlijn, slotje */
body:has(.d-world-brievenbus) main .d-section:not(.d-band) + .d-section:not(.d-band)::before { display: none !important; }
.d-bt-cols { gap: 3rem !important; }
.d-briefbus { position: relative; width: 170px; height: 220px; margin: 0 auto; }
.d-bb-bus { position: absolute; left: 10px; top: 40px; width: 150px; height: 110px; border-radius: 60px 60px 10px 10px; background: #2F5DA8; box-shadow: inset 0 -10px 0 rgba(0,0,0,.15), 0 10px 18px rgba(30,43,69,.15); z-index: 2; }
.d-bb-gleuf { position: absolute; left: 30px; right: 30px; top: 34px; height: 12px; border-radius: 6px; background: #1E2B45; }
.d-bb-hart { position: absolute; left: 50%; bottom: 18px; width: 22px; height: 20px; margin-left: -11px; background: #FFC94D; clip-path: path('M11 20 C 4 14 0 10 0 6 A 5.5 5.5 0 0 1 11 4 A 5.5 5.5 0 0 1 22 6 C 22 10 18 14 11 20 Z'); }
.d-bb-paal { position: absolute; left: 75px; top: 148px; width: 20px; height: 72px; background: #7A4B3A; }
.d-bb-envelop { position: absolute; left: 50px; top: -20px; width: 70px; height: 46px; z-index: 1; border-radius: 4px; background: #fff; box-shadow: 0 4px 10px rgba(30,43,69,.15); transition: transform 1.1s cubic-bezier(.5,0,.3,1) .3s; }
.d-bb-envelop::before { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom right, transparent 49%, #E2D6BF 50%, transparent 52%), linear-gradient(to bottom left, transparent 49%, #E2D6BF 50%, transparent 52%); background-size: 100% 60%; background-repeat: no-repeat; }
.d-brieftekst-section.is-op .d-bb-envelop { transform: translateY(60px) scaleY(.2); }
.d-bb-note { text-align: center; margin: .6rem 0 0 !important; font-family: var(--wp--preset--font-family--hand); font-size: 1.35rem !important; color: #496390; }
.d-stappenlijn { list-style: none; margin: 1.6rem auto 0 !important; padding: 0; max-width: 820px; position: relative; text-align: left; }
.d-stappenlijn::before { content: ""; position: absolute; left: 21px; top: 10px; bottom: 10px; width: 4px; border-radius: 2px; background: repeating-linear-gradient(#B8D39A 0 10px, transparent 10px 16px); }
.d-stappenlijn li { position: relative; display: flex; gap: 1.1rem; padding: 0 0 1.1rem; }
.d-tlj-nr { flex: none; position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 50%; background: #fff; color: #5E8A3A; font-weight: 700; font-size: 1.1rem; box-shadow: inset 0 0 0 3px #8DB173; transition: background .4s calc(var(--n) * .35s), color .4s calc(var(--n) * .35s); }
.d-stappenlijn-section.is-op .d-tlj-nr, .d-stappenlijn-section:not(.is-js) .d-tlj-nr { background: #5E8A3A; color: #fff; }
.d-stappenlijn li > div { flex: 1; padding: .9rem 1.2rem; background: #fff; border-radius: 16px; box-shadow: 0 6px 14px rgba(30,43,69,.07); }
.d-stappenlijn strong { color: var(--d-navy); font-size: 1.05rem; margin-right: .6rem; }
.d-tlj-termijn { display: inline-block; padding: .15rem .6rem; border-radius: 99px; background: #FFF0C2; color: #9A6A00; font-size: .8rem; font-weight: 700; vertical-align: middle; }
.d-stappenlijn p { margin: .35rem 0 0 !important; font-size: .95rem !important; color: #3E4C68; }
.d-infokaart a { font-weight: 700; color: #C8661F; }
.d-privacy { display: grid; grid-template-columns: 1.1fr 1fr; gap: 2rem; align-items: center; text-align: left; }
.d-pv-tekst { display: flex; gap: 1.2rem; align-items: flex-start; }
.d-pv-tekst h2 { margin: .2rem 0 .5rem !important; }
.d-pv-tekst p:not(.d-eyebrow) { font-size: 1rem !important; }
.d-pv-tekst a { font-weight: 700; color: #C8661F; }
.d-slot { position: relative; flex: none; width: 60px; height: 72px; margin-top: .4rem; }
.d-slot-beugel { position: absolute; left: 12px; top: 0; width: 36px; height: 40px; border: 7px solid #8D93A0; border-bottom: 0; border-radius: 20px 20px 0 0; box-sizing: border-box; transform: translateY(-12px); transition: transform .5s cubic-bezier(.34,1.56,.64,1) .4s; }
.d-privacy-section.is-op .d-slot-beugel, .d-privacy-section:not(.is-js) .d-slot-beugel { transform: none; }
.d-slot-body { position: absolute; left: 0; bottom: 0; width: 60px; height: 42px; border-radius: 10px; background: #FFC94D; box-shadow: inset 0 -6px 0 rgba(0,0,0,.1); }
.d-slot-body::after { content: ""; position: absolute; left: 50%; top: 12px; width: 8px; height: 14px; margin-left: -4px; border-radius: 4px; background: #7A4B12; }
@media (max-width: 781px) { .d-privacy { grid-template-columns: 1fr; } .d-briefbus { transform: scale(.8); margin-top: -1rem; } }
.d-ik-box { display: block; margin-top: .4rem; padding: .9rem 1.1rem; background: #fff; border-left: 5px solid #496390; border-radius: 10px; line-height: 1.6; } .d-ik-box a { white-space: nowrap; }
/* Contact: drie kanalen met bewegende figuurtjes, partnerrij */
body:has(.d-world-post) main .d-section:not(.d-band) + .d-section:not(.d-band)::before { display: none !important; }
.d-kanalen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; margin-top: 1.4rem !important; text-align: left; }
.d-kn-tegel { padding: 1.4rem 1.4rem 1.2rem; background: #fff; border-radius: 20px; box-shadow: 0 8px 20px rgba(30,43,69,.08); transition: transform .25s; }
.d-kn-tegel:hover { transform: translateY(-4px); }
.d-kn-figuur { display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 18px; margin-bottom: .8rem; }
.d-knt-mail .d-kn-figuur { background: #FDE3CF; } .d-knt-tel .d-kn-figuur { background: #DFE8F6; } .d-knt-app .d-kn-figuur { background: #E0EBCF; }
.d-kn-tegel h3 { margin: 0 0 .3rem !important; font-size: 1.2rem !important; }
.d-kn-tegel p { margin: 0 !important; font-size: .95rem !important; color: #3E4C68; }
.d-kn-waarde { margin-top: .7rem !important; font-weight: 700; font-size: 1.05rem !important; color: var(--d-navy) !important; }
.d-kn-waarde a { color: #C8661F; }
.d-kn-onder { text-align: center; margin-top: 1rem !important; font-family: var(--wp--preset--font-family--hand); font-size: 1.3rem !important; color: #496390; }
/* envelop */
.d-kn-envelop { position: relative; width: 38px; height: 26px; background: #EC8B48; border-radius: 3px; }
.d-kn-envelop::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 14px; background: #C8661F; clip-path: polygon(0 0, 100% 0, 50% 100%); transform-origin: 50% 0; transition: transform .35s; }
.d-kn-envelop i { position: absolute; left: 6px; right: 6px; top: 4px; height: 16px; background: #fff; border-radius: 2px; transform: translateY(6px); transition: transform .35s .1s; z-index: -1; }
.d-knt-mail:hover .d-kn-envelop::before { transform: rotateX(180deg); }
.d-knt-mail:hover .d-kn-envelop i { transform: translateY(-10px); }
/* telefoon */
.d-kn-telefoon { position: relative; width: 38px; height: 30px; }
.d-kn-telefoon::before { content: ""; position: absolute; left: 4px; right: 4px; bottom: 0; height: 18px; background: #496390; border-radius: 8px 8px 4px 4px; }
.d-kn-telefoon i { position: absolute; left: 0; right: 0; top: 0; height: 9px; background: #2F5DA8; border-radius: 6px; }
.d-kn-telefoon b { position: absolute; left: 50%; bottom: 4px; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: #DFE8F6; }
.d-knt-tel:hover .d-kn-telefoon, .d-knt-tel .d-kn-telefoon.is-tring { animation: d-tring .5s ease-in-out 2; }
@keyframes d-tring { 20% { transform: rotate(-12deg); } 40% { transform: rotate(10deg); } 60% { transform: rotate(-8deg); } 80% { transform: rotate(6deg); } }
/* app */
.d-kn-app { display: flex; align-items: center; justify-content: center; gap: 4px; width: 42px; height: 30px; border-radius: 15px 15px 15px 4px; background: #5E8A3A; }
.d-kn-app i { width: 6px; height: 6px; border-radius: 50%; background: #fff; animation: d-typ 1.2s ease-in-out infinite; }
.d-kn-app i:nth-child(2) { animation-delay: .2s; } .d-kn-app i:nth-child(3) { animation-delay: .4s; }
@keyframes d-typ { 0%, 60%, 100% { transform: translateY(0); opacity: .6; } 30% { transform: translateY(-4px); opacity: 1; } }
@media (max-width: 781px) { .d-kanalen { grid-template-columns: 1fr; } .d-kn-tegel { display: grid; grid-template-columns: 64px 1fr; column-gap: 1rem; } .d-kn-figuur { grid-row: span 3; margin: 0; } }
.d-pr-cols { gap: 3rem !important; }
.d-partnerrij { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.d-pr-kaart { display: flex; flex-direction: column; align-items: center; gap: .6rem; padding: 1.3rem 1rem 1.1rem; background: #fff; border-radius: 22px; box-shadow: 0 8px 18px rgba(30,43,69,.07); text-align: center; transform: rotate(calc((var(--n) - 1.5) * 1deg)); transition: transform .25s; }
.d-pr-kaart:hover { transform: rotate(0) translateY(-4px); }
.d-pr-rond { display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 50%; background: color-mix(in srgb, var(--k) 16%, #fff); box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--k) 35%, #fff); }
.d-pr-rond .d-icon { --ink: var(--k); width: 30px; height: 30px; }
.d-pr-kaart strong { color: var(--d-navy); font-size: 1rem; }
@media (max-width: 781px) { .d-pr-cols { gap: 1.2rem !important; } .d-pr-kaart { padding: 1rem .6rem .9rem; } .d-pr-kaart strong { font-size: .9rem; } }
@media (prefers-reduced-motion: reduce) { .d-kn-app i { animation: none; } }
/* Rondleiding: koffiekopje, stapstenen naar de deur */
body:has(.d-world-deurbel) main .d-section:not(.d-band) + .d-section:not(.d-band)::before { display: none !important; }
.d-kft-cols { gap: 3rem !important; }
.d-koffie { position: relative; width: 150px; height: 150px; margin: 0 auto; }
.d-kf-kop { position: absolute; left: 30px; bottom: 26px; width: 80px; height: 64px; border-radius: 6px 6px 34px 34px; background: #fff; box-shadow: inset 0 -8px 0 #F3EBDD, 0 8px 16px rgba(30,43,69,.12); background-image: linear-gradient(#EC8B48, #EC8B48); background-size: 100% 10px; background-position: 0 18px; background-repeat: no-repeat; }
.d-kf-oor { position: absolute; right: -22px; top: 12px; width: 26px; height: 28px; border: 7px solid #fff; border-left: 0; border-radius: 0 16px 16px 0; box-sizing: border-box; filter: drop-shadow(2px 2px 2px rgba(30,43,69,.1)); }
.d-kf-schotel { position: absolute; left: 12px; bottom: 16px; width: 120px; height: 14px; border-radius: 50%; background: #E2D6BF; }
.d-kf-damp { position: absolute; left: 44px; top: 4px; display: flex; gap: 10px; }
.d-kf-damp i { width: 8px; height: 34px; border-radius: 8px; background: linear-gradient(rgba(201,207,216,0), rgba(201,207,216,.8)); animation: d-damp 2.6s ease-in-out infinite; }
.d-kf-damp i:nth-child(2) { animation-delay: .6s; } .d-kf-damp i:nth-child(3) { animation-delay: 1.2s; }
@keyframes d-damp { 0% { opacity: 0; transform: translateY(10px) scaleX(1); } 40% { opacity: 1; } 100% { opacity: 0; transform: translateY(-12px) scaleX(1.6) skewX(10deg); } }
.d-kf-note { text-align: center; margin: .3rem 0 0 !important; font-family: var(--wp--preset--font-family--hand); font-size: 1.4rem !important; color: #C8661F; }
.d-deurpad { position: relative; display: flex; align-items: flex-start; gap: 1rem; margin-top: 1.6rem !important; text-align: left; }
.d-deurpad ol { flex: 1; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 1rem; position: relative; }
.d-deurpad ol::before { content: ""; position: absolute; left: 24px; right: 24px; top: 23px; height: 4px; background: repeating-linear-gradient(90deg, #B8D39A 0 10px, transparent 10px 18px); }
.d-deurpad li { position: relative; }
.d-dp-steen { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; width: 50px; height: 46px; border-radius: 50% 50% 46% 54% / 56% 50% 50% 44%; background: #fff; color: #5E8A3A; font-weight: 700; font-size: 1.1rem; box-shadow: 0 4px 0 #B8D39A; margin-bottom: .8rem; transition: transform .4s cubic-bezier(.34,1.56,.64,1) calc(var(--n) * .2s); }
.d-deurpad-section.is-js .d-dp-steen { transform: scale(0); }
.d-deurpad-section.is-op .d-dp-steen { transform: none; }
.d-deurpad li strong { display: block; color: var(--d-navy); font-size: 1.02rem; margin-bottom: .25rem; }
.d-deurpad li p { margin: 0 !important; font-size: .92rem !important; color: #3E4C68; }
.d-deurpad li p a { font-weight: 700; color: #C8661F; }
.d-dp-deur { flex: none; position: relative; width: 60px; height: 92px; border-radius: 30px 30px 4px 4px; background: #EC8B48; box-shadow: 0 0 0 6px #fff, 0 8px 16px rgba(30,43,69,.12); }
.d-dp-deur::after { content: ""; position: absolute; right: 10px; top: 50px; width: 8px; height: 8px; border-radius: 50%; background: #FFC94D; }
.d-dp-bel { position: absolute; right: -26px; top: 30px; width: 12px; height: 12px; border-radius: 50%; background: #FFC94D; box-shadow: 0 0 0 3px #fff; }
.d-dp-bel::before, .d-dp-bel::after { content: ""; position: absolute; left: -6px; top: -6px; width: 24px; height: 24px; border-radius: 50%; border: 2px solid #FFC94D; opacity: 0; animation: d-bel 2.4s ease-out infinite; }
.d-dp-bel::after { animation-delay: .5s; }
@keyframes d-bel { 0% { transform: scale(.5); opacity: .9; } 100% { transform: scale(1.8); opacity: 0; } }
@media (max-width: 900px) { .d-deurpad { flex-direction: column; } .d-deurpad ol { grid-template-columns: 1fr; gap: .9rem; } .d-deurpad ol::before { left: 23px; right: auto; top: 20px; bottom: 20px; width: 4px; height: auto; background: repeating-linear-gradient(#B8D39A 0 10px, transparent 10px 18px); } .d-deurpad li { display: grid; grid-template-columns: 50px 1fr; column-gap: 1rem; } .d-dp-steen { grid-row: span 2; margin: 0; } .d-dp-deur { margin-left: 0; width: 50px; height: 76px; } }
@media (prefers-reduced-motion: reduce) { .d-kf-damp i, .d-dp-bel::before, .d-dp-bel::after { animation: none; } }
.d-koffie { border-radius: 50%; background: #FDE3CF; width: 170px; height: 170px; } .d-kf-kop { left: 40px; bottom: 36px; } .d-kf-schotel { left: 22px; bottom: 26px; } .d-kf-damp { left: 54px; top: 14px; }
/* Rondleiding: speelser (Audrey) */
.d-koffie { display: block; border: 0; padding: 0; cursor: pointer; font: inherit; }
.d-kf-koekje { position: absolute; right: 8px; bottom: 30px; width: 34px; height: 34px; border-radius: 50%; background: radial-gradient(circle at 30% 35%, #7A4B12 0 2.5px, transparent 3px), radial-gradient(circle at 62% 30%, #7A4B12 0 2.5px, transparent 3px), radial-gradient(circle at 45% 65%, #7A4B12 0 2.5px, transparent 3px), radial-gradient(circle at 72% 62%, #7A4B12 0 2px, transparent 2.5px), #E0A86A; box-shadow: inset 0 -3px 0 rgba(0,0,0,.12); transform: rotate(-12deg); }
.d-kf-hart { position: absolute; left: 66px; top: 6px; width: 22px; height: 20px; background: #E86A5E; clip-path: path('M11 20 C 4 14 0 10 0 6 A 5.5 5.5 0 0 1 11 4 A 5.5 5.5 0 0 1 22 6 C 22 10 18 14 11 20 Z'); opacity: 0; animation: d-kf-hart 5s ease-out infinite 1.5s; }
@keyframes d-kf-hart { 0%, 60% { opacity: 0; transform: translateY(18px) scale(.4); } 70% { opacity: 1; } 100% { opacity: 0; transform: translateY(-14px) scale(1); } }
.d-koffie.is-wiebel .d-kf-kop { animation: d-kf-wiebel .6s ease-in-out; }
.d-koffie.is-wiebel .d-kf-hart { animation: d-kf-hart 1.2s ease-out; }
@keyframes d-kf-wiebel { 25% { transform: rotate(-8deg); } 60% { transform: rotate(6deg); } }
.d-koffie:hover .d-kf-koekje { transform: rotate(10deg) translateY(-3px); transition: transform .3s; }
.d-dp-voetjes { position: absolute; left: 30px; right: 30px; top: 12px; height: 26px; pointer-events: none; }
.d-dp-voetjes i { position: absolute; left: calc(var(--v) * 10% + 2%); top: 0; width: 9px; height: 13px; border-radius: 50% 50% 45% 45%; background: #8A5A3B; opacity: 0; transform: rotate(90deg); }
.d-dp-voetjes i:nth-child(even) { top: 12px; }
.d-deurpad-section.is-op .d-dp-voetjes i { animation: d-voetje 6s ease-in-out infinite; animation-delay: calc(var(--v) * .25s); }
@keyframes d-voetje { 0% { opacity: 0; } 8% { opacity: .7; } 55% { opacity: .7; } 70%, 100% { opacity: 0; } }
.d-deurpad ol::before { z-index: 0; }
.d-dp-deur { border: 0; padding: 0; cursor: pointer; overflow: visible; background: #FFE7A3; perspective: 300px; }
.d-dp-deur::after { display: none; }
.d-dp-licht { position: absolute; inset: 0; border-radius: 30px 30px 4px 4px; background: radial-gradient(circle at 50% 75%, #FFF6D6, #FFD166 70%); }
.d-dp-blad { position: absolute; inset: 0; border-radius: 30px 30px 4px 4px; background: #EC8B48; transform-origin: 0 50%; transition: transform .8s cubic-bezier(.4,1.3,.6,1) 2.6s; }
.d-dp-blad::after { content: ""; position: absolute; right: 10px; top: 50px; width: 8px; height: 8px; border-radius: 50%; background: #FFC94D; }
.d-deurpad-section.is-op .d-dp-blad { transform: rotateY(-70deg); }
.d-dp-dingdong { position: absolute; right: -10px; top: -38px; white-space: nowrap; padding: .2rem .6rem; background: #fff; border-radius: 12px; font-family: var(--wp--preset--font-family--hand); font-size: 1.2rem; color: #C8661F; box-shadow: 0 4px 10px rgba(30,43,69,.15); opacity: 0; transform: scale(.4); transition: opacity .25s 2.4s, transform .35s cubic-bezier(.34,1.56,.64,1) 2.4s; }
.d-deurpad-section.is-op .d-dp-dingdong { opacity: 1; transform: none; }
.d-dp-deur.is-bel .d-dp-dingdong { animation: d-dingdong .6s ease-in-out; }
@keyframes d-dingdong { 30% { transform: scale(1.2) rotate(-6deg); } 60% { transform: scale(.95) rotate(4deg); } }
@media (max-width: 900px) { .d-dp-voetjes { left: 14px; right: auto; top: 30px; bottom: 30px; width: 26px; height: auto; } .d-dp-voetjes i { left: 0; top: calc(var(--v) * 10% + 2%); transform: none; } .d-dp-voetjes i:nth-child(even) { left: 14px; top: calc(var(--v) * 10% + 2%); } .d-dp-dingdong { right: auto; left: 60px; top: 10px; } }
.d-dr-cols { gap: 2.5rem !important; }
.d-deurtjesrij { display: flex; justify-content: center; gap: 1.2rem; }
.d-dr-deur { display: flex; flex-direction: column; align-items: center; gap: .5rem; padding: 0; border: 0; background: none; cursor: pointer; font: inherit; }
.d-dr-kozijn { position: relative; display: block; width: 120px; height: 170px; border-radius: 60px 60px 6px 6px; overflow: hidden; box-shadow: 0 0 0 6px #fff, 0 10px 18px rgba(30,43,69,.15); perspective: 500px; background: #FFE7A3; }
.d-dr-kozijn img { display: block; width: 100%; height: 100%; object-fit: cover; }
.d-dr-blad { position: absolute; inset: 0; border-radius: 60px 60px 6px 6px; background: var(--k); transform-origin: 0 50%; transition: transform .7s cubic-bezier(.4,1.3,.6,1); box-shadow: inset 0 0 0 8px rgba(255,255,255,.15); }
.d-dr-blad::before { content: ""; position: absolute; left: 18px; right: 18px; top: 22px; height: 50px; border-radius: 40px 40px 4px 4px; background: rgba(255,255,255,.25); }
.d-dr-blad i { position: absolute; right: 14px; top: 56%; width: 10px; height: 10px; border-radius: 50%; background: #FFC94D; }
.d-dr-deur:hover .d-dr-blad { transform: rotateY(-18deg); }
.d-dr-deur.is-open .d-dr-blad { transform: rotateY(-80deg); }
.d-dr-cap { font-family: var(--wp--preset--font-family--hand); font-size: 1.25rem; color: #496390; opacity: .4; transition: opacity .3s; }
.d-dr-deur.is-open .d-dr-cap { opacity: 1; }
.d-dr-straat { margin-top: 1.8rem !important; padding: 1.1rem 1.3rem; background: #fff; border-radius: 18px; box-shadow: 0 8px 18px rgba(30,43,69,.07); }
.d-dr-bordjes { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: .7rem; }
.d-dr-bordje { padding: .3rem .8rem; background: #fff; border: 3px solid var(--k); border-radius: 8px; font-weight: 700; font-size: .88rem; color: var(--k); box-shadow: 0 3px 0 rgba(0,0,0,.08); }
.d-dr-bordje:nth-child(odd) { transform: rotate(-2deg); } .d-dr-bordje:nth-child(even) { transform: rotate(1.5deg); }
.d-dr-straat p { margin: 0 !important; font-size: .98rem !important; }
.d-dr-straat a { font-weight: 700; color: #C8661F; }
@media (max-width: 600px) { .d-deurtjesrij { gap: .6rem; } .d-dr-kozijn { width: 96px; height: 136px; } .d-dr-cap { font-size: 1rem; } }
@media (prefers-reduced-motion: reduce) { .d-kf-hart, .d-dp-voetjes i { animation: none !important; } }
@media (max-width: 600px) { .d-dr-bordje { font-size: .78rem; padding: .25rem .55rem; border-width: 2px; } .d-dr-bordjes { gap: .45rem; } }
/* Inschrijven: welkomststickers, kapstok met jasjes, naamlabels */
body:has(.d-world-kapstok) main .d-section:not(.d-band) + .d-section:not(.d-band)::before { display: none !important; }
.d-welkomstickers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; margin-top: 1.6rem !important; }
.d-ws-sticker { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 1.4rem 1.2rem 1.2rem; background: #fff; border-radius: 26px; box-shadow: 0 8px 18px rgba(30,43,69,.08); transform: rotate(calc((var(--n) - 1) * 1.5deg)); transition: transform .3s; }
.d-ws-sticker:hover { transform: rotate(0) scale(1.03); }
.d-ws-rond { display: flex; align-items: center; justify-content: center; width: 72px; height: 72px; margin-bottom: .7rem; border-radius: 50%; background: var(--k); box-shadow: 0 0 0 6px color-mix(in srgb, var(--k) 20%, #fff); }
.d-ws-rond .d-icon { --ink: #fff; width: 34px; height: 34px; }
.d-ws-sticker strong { color: var(--d-navy); font-size: 1.15rem; margin-bottom: .3rem; }
.d-ws-sticker p { margin: 0 !important; font-size: .95rem !important; color: #3E4C68; }
@media (max-width: 781px) { .d-welkomstickers { grid-template-columns: 1fr; gap: 1rem; } .d-ws-sticker { display: grid; grid-template-columns: 54px 1fr; column-gap: 1rem; text-align: left; align-items: start; transform: none; padding: 1.1rem; } .d-ws-rond { width: 54px; height: 54px; margin: 0; grid-row: span 2; } .d-ws-rond .d-icon { width: 26px; height: 26px; } }
.d-kapstok { position: relative; margin-top: 1.6rem !important; }
.d-ks-plank { display: block; height: 26px; border-radius: 6px; background: #C89A6A; background-image: repeating-linear-gradient(90deg, transparent 0 60px, rgba(122,75,58,.15) 60px 62px); box-shadow: 0 6px 0 #A9784A; }
.d-kapstok ol { list-style: none; margin: 0; padding: 0 2%; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; }
.d-ks-haak { position: relative; display: flex; flex-direction: column; align-items: center; padding-top: 18px; transform-origin: 50% 0; }
.d-ks-haak::before { content: ""; position: absolute; top: -6px; left: 50%; width: 16px; height: 30px; margin-left: -8px; border: 5px solid #8D93A0; border-top: 0; border-radius: 0 0 12px 12px; box-sizing: border-box; }
.d-ks-jas { position: relative; display: block; width: 74px; height: 70px; margin-top: 6px; background: var(--k, #E3E7EE); clip-path: polygon(30% 0, 70% 0, 100% 25%, 88% 40%, 82% 30%, 82% 100%, 18% 100%, 18% 30%, 12% 40%, 0 25%); }
.d-ks-kaartje { position: relative; width: 100%; box-sizing: border-box; margin-top: -10px; padding: 1rem 1rem .9rem; background: #FFFBF0; border-radius: 12px; box-shadow: 0 6px 14px rgba(30,43,69,.1); text-align: left; }
.d-ks-kaartje::before { content: ""; position: absolute; left: 50%; top: -12px; width: 2px; height: 14px; background: #C9A14A; }
.d-ks-nr { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; margin-right: .4rem; border-radius: 50%; background: var(--k); color: #fff; font-weight: 700; font-size: .85rem; }
.d-ks-kaartje strong { color: var(--d-navy); font-size: 1.02rem; }
.d-ks-kaartje p { margin: .4rem 0 0 !important; font-size: .93rem !important; color: #3E4C68; }
.d-ks-leeg .d-ks-jas { background: none; outline: 3px dashed #C9A14A; outline-offset: -3px; clip-path: none; border-radius: 12px; width: 60px; height: 60px; }
.d-ks-leeg .d-ks-kaartje { text-align: center; background: #fff; border: 2px dashed #EC8B48; box-shadow: none; }
.d-ks-leeg .d-ks-kaartje strong { font-family: var(--wp--preset--font-family--hand); font-weight: 400; font-size: 1.35rem; color: #C8661F; }
.d-kapstok-section.is-js .d-ks-haak { opacity: 0; transform: translateY(-20px) rotate(-6deg); }
.d-kapstok-section.is-op .d-ks-haak { opacity: 1; transform: none; transition: opacity .4s calc(var(--n) * .25s), transform .8s cubic-bezier(.34,1.56,.64,1) calc(var(--n) * .25s); }
.d-ks-haak:hover { animation: d-ks-zwaai .9s ease-in-out; }
@keyframes d-ks-zwaai { 25% { transform: rotate(4deg); } 60% { transform: rotate(-3deg); } }
@media (max-width: 781px) {
.d-ks-plank { position: absolute; left: 0; top: 0; bottom: 0; width: 18px; height: auto; background-image: repeating-linear-gradient(0deg, transparent 0 60px, rgba(122,75,58,.15) 60px 62px); box-shadow: 4px 0 0 #A9784A; }
.d-kapstok ol { grid-template-columns: 1fr; row-gap: 1rem; padding: 0 0 0 30px; }
.d-ks-haak { flex-direction: row; align-items: center; gap: .6rem; padding-top: 0; }
.d-ks-haak::before { top: 50%; left: -14px; width: 26px; height: 14px; margin: -7px 0 0; border: 5px solid #8D93A0; border-left: 0; border-radius: 0 10px 10px 0; }
.d-ks-jas { flex: none; width: 52px; height: 50px; margin: 0; }
.d-ks-leeg .d-ks-jas { width: 46px; height: 46px; margin: 0 3px; }
.d-ks-kaartje { margin-top: 0; padding: .8rem .9rem; }
.d-ks-kaartje::before { display: none; }
.d-ks-leeg .d-ks-kaartje { text-align: left; }
}
.d-ir-label .d-ikonraster { grid-template-columns: repeat(4, 1fr); }
.d-ir-label .d-ir-kaart { position: relative; padding-top: 1.6rem; border: 0; border-radius: 6px 18px 18px 18px; background: #FFF8E6; clip-path: polygon(0 14px, 14px 0, 100% 0, 100% 100%, 0 100%); }
.d-ir-label .d-ir-kaart::before { content: ""; position: absolute; right: 16px; top: 16px; width: 10px; height: 10px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 2px #E2D6BF; }
.d-ir-label .d-ir-kaart:nth-child(odd) { transform: rotate(-1deg); } .d-ir-label .d-ir-kaart:nth-child(even) { transform: rotate(1deg); }
.d-ir-label .d-ir-kaart p a { font-weight: 700; color: #C8661F; }
@media (max-width: 900px) { .d-ir-label .d-ikonraster { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .d-ir-label .d-ikonraster { grid-template-columns: 1fr; } }
body:has(.d-world-slotje) main .d-section:not(.d-band) + .d-section:not(.d-band)::before { display: none !important; }
/* Privacy: sleutelgaten, afvinkblok, naambordje, dossiermapjes, kluisjes, schakelaars */
.d-sleutelgaten { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 1.4rem !important; background: #fff; border-radius: 22px; box-shadow: 0 8px 20px rgba(30,43,69,.08); text-align: left; }
.d-sg-item { display: flex; gap: 1rem; padding: 1.4rem 1.5rem; }
.d-sg-item + .d-sg-item { border-left: 2px dashed #E3E7EE; }
.d-sg-item strong { display: block; color: var(--d-navy); font-size: 1.08rem; margin-bottom: .25rem; }
.d-sg-item p { margin: 0 !important; font-size: .95rem !important; color: #3E4C68; }
.d-sg-gat { position: relative; flex: none; width: 46px; height: 56px; border-radius: 14px; background: #1E2B45; overflow: hidden; }
.d-sg-gat::before, .d-sg-gat::after { content: ""; position: absolute; left: 50%; background: #3A4A6B; transition: background .5s calc(var(--n) * .3s), box-shadow .5s calc(var(--n) * .3s); }
.d-sg-gat::before { top: 12px; width: 16px; height: 16px; margin-left: -8px; border-radius: 50%; }
.d-sg-gat::after { top: 24px; width: 10px; height: 18px; margin-left: -5px; clip-path: polygon(20% 0, 80% 0, 100% 100%, 0 100%); }
.d-sleutelgaten-section.is-op .d-sg-gat::before, .d-sleutelgaten-section.is-op .d-sg-gat::after, .d-sleutelgaten-section:not(.is-js) .d-sg-gat::before, .d-sleutelgaten-section:not(.is-js) .d-sg-gat::after { background: #FFC94D; box-shadow: 0 0 14px #FFC94D; }
@media (max-width: 781px) { .d-sleutelgaten { grid-template-columns: 1fr; } .d-sg-item + .d-sg-item { border-left: 0; border-top: 2px dashed #E3E7EE; } }
.d-bk-cols { gap: 3rem !important; align-items: center !important; }
.d-beloftekaart { position: relative; padding: 1.6rem 1.6rem 1.2rem 2.4rem; background: #FFFDF6; border-radius: 6px 18px 18px 6px; box-shadow: 0 8px 20px rgba(30,43,69,.08); }
.d-bk-ringen { position: absolute; left: 10px; top: 18px; bottom: 18px; width: 10px; background: radial-gradient(circle, #C9CFDA 4px, transparent 5px) 0 0 / 10px 28px repeat-y; }
.d-beloftekaart ul { list-style: none; margin: 0; padding: 0; }
.d-beloftekaart li { position: relative; padding: .55rem 0 .55rem 2.2rem; border-bottom: 1px dashed #EDE6D3; font-size: .97rem; line-height: 1.55; color: #3E4C68; }
.d-bk-vink { position: absolute; left: 0; top: .6rem; width: 22px; height: 22px; border-radius: 6px; box-shadow: inset 0 0 0 2px #8DB173; }
.d-bk-vink::after { content: ""; position: absolute; left: 7px; top: 3px; width: 6px; height: 11px; border: solid #5E8A3A; border-width: 0 3px 3px 0; transform: rotate(45deg) scale(0); transition: transform .35s cubic-bezier(.34,1.56,.64,1) calc(.3s + var(--n) * .25s); }
.d-beloftekaart-section.is-op .d-bk-vink::after, .d-beloftekaart-section:not(.is-js) .d-bk-vink::after { transform: rotate(45deg) scale(1); }
.d-naambordje { position: relative; max-width: 760px; margin: 0 auto !important; padding: 1.5rem 2.4rem 1.4rem; border-radius: 14px; background: linear-gradient(135deg, #F3D58A, #D9AE52 55%, #F0CF7E); box-shadow: inset 0 0 0 3px rgba(255,255,255,.35), 0 8px 18px rgba(122,75,18,.18); text-align: left; }
.d-nb-schroef { position: absolute; width: 12px; height: 12px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff8, #A9784A 70%); }
.d-nb-schroef::after { content: ""; position: absolute; left: 2px; right: 2px; top: 5px; height: 2px; background: #7A4B12; transform: rotate(35deg); }
.d-nb-schroef:nth-child(1) { left: 12px; top: 12px; } .d-nb-schroef:nth-child(2) { right: 12px; top: 12px; } .d-nb-schroef:nth-child(3) { left: 12px; bottom: 12px; } .d-nb-schroef:nth-child(4) { right: 12px; bottom: 12px; }
.d-nb-head { margin: 0 0 .8rem !important; text-align: center; font-family: var(--wp--preset--font-family--hand); font-size: 1.6rem !important; color: #6B4310; }
.d-nb-rijen { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem 2rem; }
.d-nb-rijen span { display: block; font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #8A5A16; }
.d-nb-rijen strong { color: #3B2A0E; font-size: 1rem; } .d-nb-rijen a { color: #3B2A0E; }
@media (max-width: 600px) { .d-nb-rijen { grid-template-columns: 1fr; } .d-naambordje { padding: 1.4rem 1.6rem; } }
.d-dossiermapjes { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem; margin-top: 2.2rem !important; text-align: left; }
.d-dm-map { position: relative; padding-top: 30px; }
.d-dm-tab { position: absolute; left: 0; top: 0; height: 34px; padding: 0 1.4rem; border-radius: 12px 12px 0 0; background: var(--k); color: #fff; font-weight: 700; line-height: 34px; }
.d-dm-binnen { padding: 1.3rem 1.5rem 1rem; background: #fff; border-top: 5px solid var(--k); border-radius: 0 16px 16px 16px; box-shadow: 0 8px 18px rgba(30,43,69,.08); height: 100%; box-sizing: border-box; }
.d-dm-binnen > p { margin: 0 0 .6rem !important; font-weight: 600; color: var(--d-navy); font-size: .98rem !important; }
.d-dm-binnen ul { margin: 0; padding-left: 1.2rem; } .d-dm-binnen li { margin-bottom: .45rem; font-size: .95rem; color: #3E4C68; } .d-dm-binnen li::marker { color: var(--k); }
@media (max-width: 781px) { .d-dossiermapjes { grid-template-columns: 1fr; gap: 1.2rem; } }
.d-dt-cols { gap: 3rem !important; }
.d-deeltegels { display: flex; flex-direction: column; gap: 1rem; margin-top: 1.6rem; }
.d-dt-tegel { display: flex; gap: 1rem; padding: 1.2rem 1.3rem; background: #F6F8FC; border-radius: 18px; }
.d-dt-icoon { flex: none; display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 14px; background: #DFE8F6; }
.d-dt-icoon .d-icon { width: 24px; height: 24px; }
.d-dt-tegel strong { color: var(--d-navy); font-size: 1.05rem; }
.d-dt-label { display: inline-block; margin-left: .5rem; padding: .1rem .6rem; border-radius: 99px; background: #FFF0C2; color: #9A6A00; font-size: .78rem; font-weight: 700; vertical-align: middle; transform: rotate(-3deg); }
.d-dt-tegel p { margin: .35rem 0 0 !important; font-size: .93rem !important; color: #3E4C68; }
@media (max-width: 781px) { .d-deeltegels { margin-top: 0; } }
.d-kluisjes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; margin-top: 1.6rem !important; text-align: left; }
.d-kl-kluis { position: relative; padding: 2.4rem 1.3rem 1.2rem; background: #fff; border-radius: 12px; box-shadow: inset 0 0 0 2px #D6E4C6, 0 6px 14px rgba(30,43,69,.07); }
.d-kl-rooster { position: absolute; left: 1.3rem; top: 14px; width: 60px; height: 12px; background: repeating-linear-gradient(90deg, #C9D9B6 0 4px, transparent 4px 9px); border-radius: 2px; }
.d-kl-nr { position: absolute; right: 52px; top: 10px; padding: 0 .45rem; border-radius: 5px; background: #F3D58A; color: #6B4310; font-weight: 700; font-size: .8rem; line-height: 20px; }
.d-kl-slot { position: absolute; right: 18px; top: 16px; width: 20px; height: 16px; border-radius: 4px; background: #8DB173; transform-origin: 50% -8px; }
.d-kl-slot::before { content: ""; position: absolute; left: 4px; top: -9px; width: 12px; height: 12px; border: 3px solid #8D93A0; border-bottom: 0; border-radius: 8px 8px 0 0; box-sizing: border-box; }
.d-kl-kluis:hover .d-kl-slot { animation: d-kl-wiebel .7s ease-in-out; }
@keyframes d-kl-wiebel { 25% { transform: rotate(14deg); } 55% { transform: rotate(-10deg); } 80% { transform: rotate(4deg); } }
.d-kl-kluis strong { display: block; color: var(--d-navy); font-size: 1.05rem; margin-bottom: .3rem; }
.d-kl-kluis p { margin: 0 !important; font-size: .92rem !important; color: #3E4C68; }
@media (max-width: 900px) { .d-kluisjes { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .d-kluisjes { grid-template-columns: 1fr; } }
.d-rp-cols { gap: 3rem !important; }
.d-rechtenpaneel { max-width: 380px; margin: 0 auto; padding: 1.3rem 1.4rem; background: #fff; border-radius: 22px; box-shadow: 0 10px 24px rgba(30,43,69,.1); text-align: left; }
.d-rp-kop { margin: 0 0 .6rem !important; font-size: .78rem !important; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #8D93A0; }
.d-rechtenpaneel ul { list-style: none; margin: 0; padding: 0; }
.d-rechtenpaneel li { display: flex; align-items: center; justify-content: space-between; padding: .6rem 0; font-weight: 600; color: var(--d-navy); }
.d-rechtenpaneel li + li { border-top: 1px solid #EEF1F5; }
.d-rp-knop { position: relative; width: 44px; height: 26px; border-radius: 13px; background: #D5DAE3; transition: background .3s calc(.3s + var(--n) * .2s); }
.d-rp-knop i { position: absolute; left: 3px; top: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.2); transition: transform .3s calc(.3s + var(--n) * .2s); }
.d-rechtenpaneel-section.is-op .d-rp-knop, .d-rechtenpaneel-section:not(.is-js) .d-rp-knop { background: #5E8A3A; }
.d-rechtenpaneel-section.is-op .d-rp-knop i, .d-rechtenpaneel-section:not(.is-js) .d-rp-knop i { transform: translateX(18px); }
.d-rp-kaarten { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; margin-top: 2rem !important; text-align: left; }
.d-rp-kaart { padding: 1.2rem 1.4rem; background: #F6F8FC; border-radius: 18px; border-left: 5px solid #496390; }
.d-rp-kaart + .d-rp-kaart { border-left-color: #EC8B48; }
.d-rp-kaart strong { color: var(--d-navy); font-size: 1.08rem; }
.d-rp-kaart p { margin: .35rem 0 0 !important; font-size: .95rem !important; color: #3E4C68; }
.d-rp-kaart a { font-weight: 700; color: #C8661F; }
@media (max-width: 781px) { .d-rp-kaarten { grid-template-columns: 1fr; } }
/* Disclaimer: kleine lettertjes onder het vergrootglas, vel met artikelen */
body:has(.d-world-vergrootglas) main .d-section:not(.d-band) + .d-section:not(.d-band)::before { display: none !important; }
.d-kleinelettertjes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.3rem; margin-top: 1.5rem !important; text-align: left; }
.d-kl-kaartje { display: flex; flex-direction: column; position: relative; padding: 1.4rem 1.4rem 1.2rem; background: #fff; border-radius: 20px; box-shadow: 0 8px 18px rgba(30,43,69,.08); overflow: hidden; }
.d-kll-glas { position: relative; display: flex; align-items: center; justify-content: center; width: 54px; height: 54px; margin-bottom: .8rem; border-radius: 50%; background: color-mix(in srgb, var(--k) 14%, #fff); box-shadow: inset 0 0 0 4px var(--k); }
.d-kll-glas::after { content: ""; position: absolute; right: -9px; bottom: -5px; width: 16px; height: 6px; border-radius: 3px; background: var(--k); transform: rotate(45deg); }
.d-kll-glas .d-icon { width: 24px; height: 24px; }
.d-kl-kaartje strong { display: block; color: var(--d-navy); font-size: 1.1rem; margin-bottom: .3rem; }
.d-kl-kaartje p { margin: 0 !important; font-size: .95rem !important; color: #3E4C68; }
.d-kll-regels { display: block; height: 14px; margin-top: auto; padding-top: 1rem; background-clip: content-box; background: repeating-linear-gradient(#E3E7EE 0 2px, transparent 2px 6px); width: 75%; border-radius: 1px; }
.d-kl-kaartje:hover .d-kll-glas { animation: d-kll-zoek 1.2s ease-in-out; }
@keyframes d-kll-zoek { 30% { transform: translate(6px, -3px) scale(1.08); } 65% { transform: translate(-4px, 2px) scale(1.04); } }
@media (max-width: 781px) { .d-kleinelettertjes { grid-template-columns: 1fr; } }
.d-artikelvel { position: relative; max-width: 860px; margin: 0 auto !important; padding: 2.6rem 3rem 2.4rem; background: #fff; border-radius: 6px; box-shadow: 0 2px 0 #E8E2D2, 0 4px 0 #fff, 0 6px 0 #E8E2D2, 0 14px 30px rgba(30,43,69,.1); text-align: left; transform: rotate(-.4deg); }
.d-av-clip { position: absolute; left: 44px; top: -16px; width: 18px; height: 52px; border: 3px solid #8D93A0; border-radius: 9px; box-sizing: border-box; }
.d-av-clip::after { content: ""; position: absolute; left: 3px; top: 8px; width: 6px; height: 30px; border: 3px solid #8D93A0; border-top: 0; border-radius: 0 0 5px 5px; }
.d-artikelvel h2 { margin: .2rem 0 1.4rem !important; }
.d-artikelvel ol, .d-av-lijst { list-style: none; margin: 0; padding: 0; }
.d-artikelvel li, .d-av-item { display: flex; gap: 1.1rem; padding: .9rem 0; border-top: 1px dashed #E3E7EE; }
.d-av-nr { flex: none; display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: #E3EEDB; color: #5E8A3A; font-weight: 700; font-size: .95rem; }
.d-artikelvel li strong, .d-av-item strong { color: var(--d-navy); font-size: 1.05rem; }
.d-artikelvel li p, .d-av-item p:not(.d-ink) { margin: .3rem 0 0 !important; font-size: .97rem !important; color: #3E4C68; }
.d-av-stempel { position: absolute; right: 34px; bottom: 26px; padding: .3rem .9rem; border: 3px solid #EC8B48; border-radius: 10px; color: #EC8B48; font-family: var(--wp--preset--font-family--hand); font-size: 1.5rem; transform: rotate(-10deg) scale(1); opacity: .85; transition: transform .45s cubic-bezier(.34,1.56,.64,1) .4s, opacity .3s .4s; }
.d-artikelvel-section.is-js .d-av-stempel { transform: rotate(-10deg) scale(2.2); opacity: 0; }
.d-artikelvel-section.is-js.is-op .d-av-stempel { transform: rotate(-10deg) scale(1); opacity: .85; }
.d-artikelvel ol li:last-child, .d-av-item:last-child { padding-bottom: 2.6rem; }
@media (max-width: 781px) { .d-artikelvel { padding: 2.2rem 1.3rem 1.8rem; transform: none; } .d-av-clip { left: 24px; } .d-artikelvel li, .d-av-item { gap: .8rem; } .d-av-stempel { right: 18px; bottom: 16px; font-size: 1.3rem; } }
/* Geen automatische woordafbreking in koppen en feitkaartjes (lelijke afbrekingen op telefoon); afbreken alleen via zachte koppeltekens */
h1, h2, h3, .wp-block-heading, .d-sticker-fact .d-fact-small { -webkit-hyphens: manual; hyphens: manual; }
/* Iconen via een klasse (d-kic d-kic-) in plaats van een lege span: blijft staan als je de tekst in de editor bewerkt */
.d-kic { position: relative; }
.d-kic::after { content: ""; position: absolute; pointer-events: none; background: var(--ink, #C8661F); -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
/* Veelgestelde vragen als gewone blokken: onderwerpknoppen, koppen met icoonvakje, Details */
.d-fq-nav.wp-block-buttons { gap: .6rem; justify-content: flex-start; }
.d-fq-nav .d-fq-chip { display: block; padding: 0; background: none; border: 0; margin: 0 !important; }
.d-fq-nav .d-fq-chip .wp-block-button__link { display: inline-flex; align-items: center; padding: .55rem 1rem .55rem 2.75rem; background: #fff !important; border: 2px solid #E3E7EE; border-radius: 99px; font-weight: 700; font-size: .92rem; line-height: 1.7; letter-spacing: normal; color: var(--d-navy) !important; text-decoration: none; box-shadow: none !important; transition: border-color .2s, background .2s; }
.d-fq-nav .d-fq-chip .wp-block-button__link:hover { border-color: #EC8B48; background: #FFF4EC !important; }
.d-fq-nav .d-fq-chip::after { left: calc(1rem + 2px); top: 50%; width: 20px; height: 20px; transform: translateY(-50%); background: #C8661F; }
.d-fq-groepen > *, .d-fq-groep > * { margin-block-start: 0 !important; }
.d-fq-groep > .d-vw-item { margin-block-end: .6rem !important; }
.d-fq-groep .d-fq-kop { display: flex; align-items: center; min-height: 40px; padding-left: calc(40px + .7rem); }
.d-fq-groep .d-fq-kop::before { content: ""; position: absolute; left: 0; top: 50%; width: 40px; height: 40px; margin-top: -20px; border-radius: 12px; background: #FDE3CF; }
.d-fq-groep .d-fq-kop::after { left: 9px; top: 50%; width: 22px; height: 22px; margin-top: -11px; background: #C8661F; }
@media (max-width: 600px) { .d-fq-nav .d-fq-chip .wp-block-button__link { font-size: .85rem; padding: .45rem .8rem .45rem 2.55rem; } .d-fq-nav .d-fq-chip::after { left: calc(.8rem + 2px); } }
/* 27 okt — meldingen Audrey */
/* Schooltas: de tas boven het golflijntje van de sectie; open klep toont geen labeltje en slotje op zijn kop */
.d-schooltas { z-index: 3; }
.d-st-label, .d-st-slot { transition: opacity .25s ease .1s; }
.d-schooltas:hover .d-st-label, .d-schooltas.is-open .d-st-label, .d-schooltas:focus-within .d-st-label,
.d-schooltas:hover .d-st-slot, .d-schooltas.is-open .d-st-slot, .d-schooltas:focus-within .d-st-slot { opacity: 0; transition-delay: 0s; }
/* Tuintje onderin de kop (Otto van Reesweg): de tekening wordt op grotere schermen verkleind; het gras loopt toch van rand tot rand */
@media (min-width: 782px) { body:not(.home) .d-play-hero .d-scene-garden::after { left: -60vw; right: -60vw; } }
/* Vogeltjes op de tak: tak recht, zodat elk vogeltje er echt op zit */
.d-tv-tak { transform: none; }
/* open schooltas: bovenin een donkere binnenkant, zodat het lege stuk onder de klep op de opening van de tas lijkt */
.d-st-romp::before { content: ""; position: absolute; left: 18px; right: 18px; top: 14px; height: 120px; border-radius: 18px 18px 50% 50% / 18px 18px 40px 40px; background: linear-gradient(#5E2E0C, rgba(94,46,12,0)); opacity: 0; transition: opacity .4s ease .15s; pointer-events: none; }
.d-schooltas:hover .d-st-romp::before, .d-schooltas.is-open .d-st-romp::before, .d-schooltas:focus-within .d-st-romp::before { opacity: .55; }
/* Regenboog-kaartjes (De Saalamander): vlinder en regenboogje als nette tekening in een wit rondje op de hoek van het kaartje */
.d-rb-kaart .d-rb-figuur { top: -34px; left: 1.2rem; width: 68px; height: 68px; border-radius: 50%; background: #fff; box-shadow: 0 6px 14px rgba(30,43,69,.14); }
.d-rb-kaart .d-rb-figuur i { display: none; }
.d-rb-kaart .d-rb-figuur::after { content: none; }
.d-rb-kaart .d-rb-figuur::before { content: ""; position: absolute; inset: 8px; background: center / contain no-repeat; }
.d-rb-bfly .d-rb-figuur::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 40'%3E%3Cpath d='M23 9 Q19 2 15 3 M25 9 Q29 2 33 3' stroke='%231E2B45' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3Cellipse cx='14' cy='15' rx='11' ry='10' fill='%23EC8B48'/%3E%3Cellipse cx='34' cy='15' rx='11' ry='10' fill='%23EC8B48'/%3E%3Cellipse cx='16' cy='29' rx='8' ry='7' fill='%23F6B26B'/%3E%3Cellipse cx='32' cy='29' rx='8' ry='7' fill='%23F6B26B'/%3E%3Ccircle cx='12' cy='14' r='3.5' fill='%23FFC94D'/%3E%3Ccircle cx='36' cy='14' r='3.5' fill='%23FFC94D'/%3E%3Crect x='22' y='8' width='4' height='27' rx='2' fill='%231E2B45'/%3E%3C/svg%3E"); animation: d-rb-fladder 1.8s ease-in-out infinite; }
.d-rb-rainbow .d-rb-figuur::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 34'%3E%3Cpath d='M4 27 A20 20 0 0 1 44 27' stroke='%23E86A5E' stroke-width='3.6' fill='none'/%3E%3Cpath d='M7.5 27 A16.5 16.5 0 0 1 40.5 27' stroke='%23F6A05A' stroke-width='3.6' fill='none'/%3E%3Cpath d='M11 27 A13 13 0 0 1 37 27' stroke='%23FFC94D' stroke-width='3.6' fill='none'/%3E%3Cpath d='M14.5 27 A9.5 9.5 0 0 1 33.5 27' stroke='%238DB173' stroke-width='3.6' fill='none'/%3E%3Cpath d='M18 27 A6 6 0 0 1 30 27' stroke='%238EC3EE' stroke-width='3.6' fill='none'/%3E%3Cellipse cx='6.5' cy='28' rx='6.5' ry='4.5' fill='%23fff' stroke='%23D5DEEA'/%3E%3Cellipse cx='41.5' cy='28' rx='6.5' ry='4.5' fill='%23fff' stroke='%23D5DEEA'/%3E%3C/svg%3E"); inset: 12px 8px; }
@keyframes d-rb-fladder { 0%, 100% { transform: scaleX(1); } 50% { transform: scaleX(.72); } }
@media (prefers-reduced-motion: reduce) { .d-rb-bfly .d-rb-figuur::before { animation: none; } }
/* Kring van specialisten: vijfde helper (logopedist) bovenin het midden; op de telefoon naast de ouder */
.d-kring { grid-template-areas: "a e b" ". k ." "c o d"; }
.d-kring > .d-expert-item:nth-child(7) { grid-area: e; }
@media (max-width: 781px) { .d-kring { grid-template-areas: "k k" "a b" "c d" "e o"; } }
/* Review als ingelijst woordenboek-kaartje (homepage, 'Ervaringen van ouders'): houten lijstje met getekende hartjes;
bij in beeld komen zwaait het lijstje binnen, verschijnt het woord per lettergreep, de betekenissen één voor één, de groet en de diertjes. */
.d-woordkaart { max-width: 560px; margin: 1.4rem auto 0 !important; perspective: 1200px; }
.d-wk-lijst { position: relative; padding: 22px; border-radius: 10px; transform-origin: 50% -40px; rotate: -1.5deg;
background: repeating-linear-gradient(92deg, rgba(120,72,24,.10) 0 2px, transparent 2px 9px), linear-gradient(135deg, #E2B46F, #C9924B 55%, #D7A55E);
box-shadow: inset 0 0 0 2px rgba(110,64,20,.35), inset 0 0 0 11px rgba(255,255,255,.08), 0 26px 40px -24px rgba(30,43,69,.6); }
.d-wk-papier { position: relative; overflow: hidden; padding: 30px clamp(20px, 6%, 40px) 22px; background: #FBF8F3; color: #232B3D; box-shadow: inset 0 0 0 1px rgba(0,0,0,.06), inset 0 8px 18px -12px rgba(0,0,0,.35); font-size: 14.5px; line-height: 1.55; }
.d-wk-papier p { margin: 0 !important; }
.d-wk-lijnen svg, .d-wk-dieren svg { display: block; width: 100%; height: auto; }
.d-wk-lijnen { position: absolute; width: 150px; fill: none; stroke: #7F95C9; stroke-width: 1.2; opacity: .8; }
.d-wk-lijnen-boven { right: -18px; top: -8px; }
.d-wk-lijnen-onder { left: -14px; bottom: -6px; width: 130px; }
.d-wk-logo { display: block; width: 150px; height: auto; margin: 0 auto 14px; }
.d-wk-woord { text-align: center; font-family: var(--wp--preset--font-family--schreef); font-size: clamp(1.7rem, 4.6vw, 2.3rem); line-height: 1.15; letter-spacing: .01em; }
.d-wk-woord span { display: inline-block; }
.d-wk-woord span + span::before { content: "·"; display: inline-block; margin: 0 .04em; color: #232B3D; }
.d-wk-gram { text-align: center; font-style: italic; font-size: 15px; color: #3C4660; margin-top: 6px !important; }
.d-wk-streep { display: block; height: 1px; background: #9AA2B4; margin: 16px 6% 18px; transform-origin: 50% 50%; }
.d-wk-def { margin-bottom: 4px !important; }
.d-wk-def b { font-style: italic; }
.d-wk-voet { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; margin-top: 18px; }
.d-wk-groet { font-family: var(--wp--preset--font-family--schreef); font-size: 1.2rem; line-height: 1.3; color: #2B3245; }
.d-wk-dieren { width: 46%; max-width: 190px; flex: none; fill: none; stroke: #2E3B5E; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
/* getekende hartjes en krulletjes op de lijst */
.d-wk-hart, .d-wk-krul { position: absolute; left: var(--x); top: var(--y); width: 18px; height: 16px; z-index: 2; }
.d-wk-hart { background: #D9473F; clip-path: path("M9 15C3 10 0 6 2 3C4 1 7 1 9 4C11 1 14 1 16 3C18 6 15 10 9 15Z"); opacity: .9; }
.d-wk-hart.d-wk-groen { background: #5E9A3A; border-radius: 50%; clip-path: none; width: 12px; height: 12px; }
.d-wk-krul { width: 26px; height: 12px; border: 2px solid #E07A3A; border-color: #E07A3A transparent transparent; border-radius: 50%; }
/* animatie: beginstanden alleen als het script draait (zonder script en bij 'minder beweging' staat alles meteen goed) */
.d-woordkaart.is-js .d-wk-lijst { opacity: 0; transform: translateY(-34px) rotate(-7deg); }
.d-woordkaart.is-js .d-wk-hart, .d-woordkaart.is-js .d-wk-krul { opacity: 0; scale: .2; }
.d-woordkaart.is-js .d-wk-lijnen path, .d-woordkaart.is-js .d-wk-dieren path, .d-woordkaart.is-js .d-wk-dieren circle { stroke-dasharray: 1; stroke-dashoffset: 1; }
.d-woordkaart.is-js .d-wk-logo, .d-woordkaart.is-js .d-wk-gram, .d-woordkaart.is-js .d-wk-def { opacity: 0; translate: 0 8px; }
.d-woordkaart.is-js .d-wk-woord span { opacity: 0; translate: 0 10px; scale: .7; }
.d-woordkaart.is-js .d-wk-streep { scale: 0 1; }
.d-woordkaart.is-js .d-wk-groet { clip-path: inset(0 100% 0 0); }
.d-woordkaart.is-in .d-wk-lijst { opacity: 1; transform: none; transition: opacity .4s ease, transform 1.3s cubic-bezier(.3,1.9,.45,1); }
.d-woordkaart.is-in .d-wk-hart, .d-woordkaart.is-in .d-wk-krul { opacity: .92; scale: 1; transition: opacity .3s, scale .45s cubic-bezier(.3,1.8,.5,1); transition-delay: calc(.9s + var(--i) * .07s); }
.d-woordkaart.is-in .d-wk-lijnen path { stroke-dashoffset: 0; transition: stroke-dashoffset 1.4s ease .9s; }
.d-woordkaart.is-in .d-wk-logo { opacity: 1; translate: none; transition: opacity .5s ease 1s, translate .5s ease 1s; }
.d-woordkaart.is-in .d-wk-woord span { opacity: 1; translate: none; scale: 1; transition: opacity .25s, translate .4s cubic-bezier(.3,1.6,.5,1), scale .4s cubic-bezier(.3,1.6,.5,1); transition-delay: calc(1.3s + var(--i) * .16s); }
.d-woordkaart.is-in .d-wk-gram { opacity: 1; translate: none; transition: opacity .5s ease 2.2s, translate .5s ease 2.2s; }
.d-woordkaart.is-in .d-wk-streep { scale: 1 1; transition: scale .6s ease 2.4s; }
.d-woordkaart.is-in .d-wk-def { opacity: 1; translate: none; transition: opacity .5s ease, translate .5s ease; transition-delay: calc(2.7s + var(--i) * .45s); }
.d-woordkaart.is-in .d-wk-groet { clip-path: inset(0 0 0 0); transition: clip-path 1.4s steps(28) 4.2s; }
.d-woordkaart.is-in .d-wk-dieren path, .d-woordkaart.is-in .d-wk-dieren circle { stroke-dashoffset: 0; transition: stroke-dashoffset 1.6s ease 4.4s; }
.d-wk-lijst:hover { animation: d-wk-wiebel .7s ease; }
@keyframes d-wk-wiebel { 0%, 100% { transform: none; } 30% { transform: rotate(1.6deg); } 65% { transform: rotate(-1deg); } }
@media (max-width: 600px) { .d-wk-lijst { padding: 15px; } .d-wk-papier { font-size: 13.5px; padding-top: 24px; } .d-wk-logo { width: 120px; } .d-wk-groet { font-size: 1.05rem; } .d-wk-hart { width: 14px; height: 13px; } }
@media (prefers-reduced-motion: reduce) { .d-woordkaart * { transition: none !important; animation: none !important; } }