/* ==========================================================================
Festival Voor de Vloed 2026 — Huisstijl / Design System
--------------------------------------------------------------------------
Bevat: design tokens (kleuren, typografie, ruimte), basis, herbruikbare
componenten (nav, footer, knoppen, kaarten, badges) en huisstijl-texturen
(halftone-stippen, organische golf-scheidingen, verschoven inktlijn).
Mobiel-first. Respecteert prefers-reduced-motion. Tap-targets >= 44px.
========================================================================== */
/* ---------- Fonts ----------
Titelfont: Anton (definitief, via Google Fonts in de ).
Bodyfont: Raleway (via Google Fonts).
Frontage Pro is bewust niet gebruikt (geen licentie/bestand). */
/* ==========================================================================
1. Design tokens
========================================================================== */
:root {
/* Merkkleuren (niet onderhandelbaar) */
--kleur-navy: #081d56;
--kleur-rood: #cb3833;
--kleur-zalm: #ee847a;
--kleur-lichtblauw: #b9cbeb;
--kleur-creme: #f9e6d1;
/* Afgeleide / functionele kleuren */
--kleur-navy-90: rgba(8, 29, 86, 0.90);
--kleur-navy-60: rgba(8, 29, 86, 0.60);
--kleur-navy-12: rgba(8, 29, 86, 0.12);
--kleur-wit: #ffffff;
--kleur-creme-diep: #f3d9bd;
--kleur-rood-diep: #a82b27;
/* Semantische toewijzing */
--bg: var(--kleur-creme);
--bg-alt: var(--kleur-wit);
--tekst: var(--kleur-navy);
--tekst-zacht: var(--kleur-navy-60);
--accent: var(--kleur-rood);
--accent-warm: var(--kleur-zalm);
--lijn: var(--kleur-navy-12);
/* Typografie */
--font-titel: 'Anton', 'Arial Narrow', sans-serif;
--font-body: 'Raleway', system-ui, -apple-system, 'Segoe UI', sans-serif;
--fs-300: 0.875rem; /* 14px - klein */
--fs-400: 1rem; /* 16px - basis */
--fs-500: 1.125rem; /* 18px - lead */
--fs-600: clamp(1.25rem, 1rem + 1.2vw, 1.6rem); /* subkop */
--fs-700: clamp(1.6rem, 1.1rem + 2.4vw, 2.5rem); /* h2 */
--fs-800: clamp(2.2rem, 1.2rem + 4.5vw, 4rem); /* h1 */
--fs-900: clamp(2.8rem, 1.2rem + 7vw, 6rem); /* hero */
--lh-titel: 1.02;
--lh-body: 1.6;
/* Ruimte (8pt schaal) */
--sp-1: 0.25rem;
--sp-2: 0.5rem;
--sp-3: 0.75rem;
--sp-4: 1rem;
--sp-5: 1.5rem;
--sp-6: 2rem;
--sp-7: 3rem;
--sp-8: 4rem;
--sp-9: 6rem;
/* Vorm */
--radius: 14px;
--radius-lg: 24px;
--radius-pill: 999px;
--schaduw: 0 10px 30px -12px var(--kleur-navy-60);
--schaduw-zacht: 0 6px 18px -10px var(--kleur-navy-60);
--max-width: 1280px;
--tap: 44px; /* minimale tap-target */
--duur: 240ms;
--ease: cubic-bezier(0.22, 1, 0.36, 1);
}
/* ==========================================================================
2. Reset & basis
========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body.hs {
margin: 0;
font-family: var(--font-body);
font-size: var(--fs-400);
line-height: var(--lh-body);
color: var(--tekst);
background-color: var(--bg);
min-height: 100vh;
display: flex;
flex-direction: column;
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--accent); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
a:hover { color: var(--kleur-rood-diep); }
h1, h2, h3, h4 {
font-family: var(--font-titel);
font-weight: 700;
line-height: var(--lh-titel);
letter-spacing: 0.01em;
text-transform: uppercase;
margin: 0 0 var(--sp-4);
color: var(--tekst);
}
h1 { font-size: var(--fs-800); }
h2 { font-size: var(--fs-700); }
h3 { font-size: var(--fs-600); }
p { margin: 0 0 var(--sp-4); }
/* Focus zichtbaar voor toetsenbordgebruikers (WCAG) */
:focus-visible {
outline: 3px solid var(--accent);
outline-offset: 2px;
border-radius: 4px;
}
/* Skip-link voor toegankelijkheid */
.skip-link {
position: absolute;
left: var(--sp-3);
top: -3rem;
background: var(--kleur-navy);
color: var(--kleur-wit);
padding: var(--sp-2) var(--sp-4);
border-radius: var(--radius);
z-index: 1000;
transition: top var(--duur) var(--ease);
}
.skip-link:focus { top: var(--sp-3); color: var(--kleur-wit); }
.page {
width: 100%;
max-width: var(--max-width);
margin-inline: auto;
padding-inline: clamp(1.1rem, 4vw, 3rem);
}
main { display: block; flex: 1; }
section { padding-block: clamp(2.5rem, 6vw, 5rem); }
.section-titel { text-align: center; margin-bottom: var(--sp-6); }
.lead { font-size: var(--fs-500); color: var(--tekst-zacht); }
.tekst-center { text-align: center; }
.visually-hidden {
position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* ==========================================================================
3. Huisstijl-texturen
========================================================================== */
/* Halftone-stippen: subtiele puntraster-textuur als achtergrondaccent */
.halftone {
background-image: radial-gradient(var(--kleur-navy-12) 1.5px, transparent 1.6px);
background-size: 14px 14px;
}
/* Tekst boven de (knipperende) stippen krijgt een zachte halo in de
paginakleur, zodat de stippen niet dwars door de letters lopen en de
leesbaarheid niet verstoren. */
.halftone .section-titel,
.sterren-sectie .section-titel,
.halftone .lead,
.sterren-sectie .lead {
text-shadow:
0 0 6px var(--kleur-creme),
0 0 6px var(--kleur-creme),
0 0 6px var(--kleur-creme),
0 0 6px var(--kleur-creme);
}
/* Twinkelende sterrenhemel-golf: canvas dat over een sectie heen ligt.
Wordt door js/sterrenhemel.js gevuld; valt terug op de statische .halftone
eronder als JS uit staat of de bezoeker reduced-motion wil. */
.sterren-sectie { position: relative; isolation: isolate; }
/* Zodra het canvas tekent, neemt het de stippen over van de statische laag */
.sterren-actief { background-image: none !important; }
.sterren-canvas {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
z-index: -1;
pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
.sterren-canvas { display: none; }
}
.halftone-zalm {
background-image: radial-gradient(var(--kleur-zalm) 2px, transparent 2.1px);
background-size: 18px 18px;
}
/* Verschoven inktlijn: accentstreep onder titels, bewust 'misdrukt' */
.inktlijn { position: relative; display: inline-block; }
.inktlijn::after {
content: "";
position: absolute;
left: 2%;
right: -4%;
bottom: -0.18em;
height: 0.16em;
background: var(--accent);
transform: rotate(-1.2deg);
border-radius: var(--radius-pill);
z-index: -1;
}
/* Organische golf als sectiescheiding */
.wave-divider { display: block; width: 100%; height: clamp(40px, 6vw, 90px); line-height: 0; }
.wave-divider svg { display: block; width: 100%; height: 100%; }
/* ==========================================================================
4. Knoppen
========================================================================== */
.btn {
--btn-bg: var(--kleur-rood);
--btn-fg: var(--kleur-wit);
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--sp-2);
min-height: var(--tap);
padding: 0.7rem 1.5rem;
font-family: var(--font-body);
font-weight: 700;
font-size: var(--fs-400);
line-height: 1.1;
text-decoration: none;
color: var(--btn-fg);
background: var(--btn-bg);
border: 2px solid var(--btn-bg);
border-radius: var(--radius-pill);
cursor: pointer;
transition: transform var(--duur) var(--ease), background var(--duur) var(--ease), box-shadow var(--duur) var(--ease);
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--schaduw-zacht); color: var(--btn-fg); }
.btn:active { transform: translateY(0); }
.btn-primary { --btn-bg: var(--kleur-rood); --btn-fg: var(--kleur-wit); }
.btn-primary:hover { background: var(--kleur-rood-diep); border-color: var(--kleur-rood-diep); }
.btn-secondary {
--btn-bg: transparent; --btn-fg: var(--kleur-navy);
border-color: var(--kleur-navy);
}
.btn-secondary:hover { background: var(--kleur-navy); color: var(--kleur-wit); }
.btn-ghost {
--btn-bg: transparent; --btn-fg: var(--kleur-wit);
border-color: var(--kleur-wit);
}
/* ===================== Nieuws homepage (2 kaarten naast elkaar) ===================== */
.nieuws-home-sectie { padding: var(--sp-8) 0; }
.nieuws-home-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--sp-5);
}
@media (max-width: 700px) {
.nieuws-home-grid { grid-template-columns: 1fr; }
}
/* ===================== Nieuws uitgelicht (homepage, legacy) ===================== */
.nieuws-uitgelicht-sectie { padding: var(--sp-8) 0; }
.nieuws-uitgelicht {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--sp-7);
align-items: center;
}
.nieuws-uitgelicht__media img {
width: 100%;
aspect-ratio: 16/9;
object-fit: cover;
border-radius: var(--radius-lg);
}
.nieuws-uitgelicht__body { display: flex; flex-direction: column; gap: var(--sp-3); }
.nieuws-uitgelicht__body .kaart__titel { margin: 0; }
@media (max-width: 700px) {
.nieuws-uitgelicht { grid-template-columns: 1fr; }
}
/* Gratis-badge — zelfde hoogte als btn maar niet klikbaar */
.badge-gratis {
display: inline-flex;
align-items: center;
padding: var(--sp-2) var(--sp-4);
border-radius: var(--radius-pill);
background: var(--kleur-groen, #2d8a4e);
color: #fff;
font-size: var(--fs-300);
font-weight: 700;
letter-spacing: .03em;
text-transform: uppercase;
}
.btn-ghost:hover { background: var(--kleur-wit); color: var(--kleur-navy); }
/* ==========================================================================
5. Header & navigatie
========================================================================== */
.hs-header {
position: sticky;
top: 0;
z-index: 100;
background: var(--kleur-creme);
border-bottom: 2px solid var(--kleur-navy);
}
.hs-header__inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--sp-4);
padding-block: var(--sp-3);
}
.hs-logo { display: inline-flex; align-items: center; }
.hs-logo img { height: clamp(40px, 7vw, 56px); width: auto; }
.hs-nav { display: flex; align-items: center; }
.hs-nav__list {
list-style: none;
display: flex;
align-items: center;
gap: clamp(0.6rem, 2vw, 1.6rem);
margin: 0; padding: 0;
}
.hs-nav__list a:not(.lang-switch a):not(.hs-nav__dropdown-menu a) {
font-family: var(--font-body);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.03em;
font-size: var(--fs-300);
color: var(--kleur-navy);
text-decoration: none;
padding: var(--sp-2);
display: inline-flex;
min-height: var(--tap);
align-items: center;
}
.hs-nav__list a:hover { color: var(--kleur-rood); }
.hs-nav__list a.active { color: var(--kleur-rood); }
/* Dropdown navigatie */
.hs-nav__dropdown { position: relative; }
.hs-nav__dropdown-toggle {
background: none; border: none; cursor: pointer;
font-family: var(--font-body);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.03em;
font-size: var(--fs-300);
color: var(--kleur-navy);
padding: var(--sp-2);
display: inline-flex;
align-items: center;
gap: .3em;
min-height: var(--tap);
}
.hs-nav__dropdown-toggle:hover,
.hs-nav__dropdown-toggle.active { color: var(--kleur-rood); }
.hs-nav__chevron { transition: transform .2s ease; flex-shrink: 0; }
.hs-nav__dropdown.open .hs-nav__chevron { transform: rotate(180deg); }
.hs-nav__dropdown-menu {
display: none;
position: absolute;
top: 100%; /* geen kloofje t.o.v. de knop — anders verlies je :hover tussenin */
right: 0;
background: var(--kleur-navy);
border-radius: 6px;
min-width: 210px;
list-style: none;
padding: .4rem 0; /* geeft al ruimte boven het eerste item, binnen de hoverbare box */
margin: 0;
box-shadow: 0 6px 24px rgba(0,0,0,.25);
z-index: 200;
}
.hs-nav__dropdown.open .hs-nav__dropdown-menu { display: block; }
/* Hover ook op desktop (pointer: fine = muis) */
@media (hover: hover) and (pointer: fine) {
.hs-nav__dropdown:hover .hs-nav__dropdown-menu { display: block; }
.hs-nav__dropdown:hover .hs-nav__chevron { transform: rotate(180deg); }
}
.hs-nav__dropdown-menu a {
display: block;
padding: .55rem 1.1rem;
font-family: var(--font-body);
font-weight: 500;
font-size: var(--fs-300);
color: #ffffff;
text-decoration: none;
text-transform: none;
letter-spacing: 0;
}
.hs-nav__dropdown-menu a:hover { color: var(--kleur-zalm); background: rgba(255,255,255,.08); }
@media (max-width: 860px) {
.hs-nav__dropdown-menu {
position: static;
background: rgba(8,29,86,.06);
border-radius: 4px;
box-shadow: none;
margin: .25rem 0 .5rem;
padding: .2rem 0;
}
.hs-nav__dropdown-toggle { font-size: var(--fs-500); }
.hs-nav__dropdown-menu a { font-size: var(--fs-400); padding: .5rem 1rem; color: var(--kleur-navy); }
.hs-nav__dropdown-menu a:hover { color: var(--kleur-rood); background: rgba(8,29,86,.06); }
}
/* Taalswitch */
.lang-switch {
display: inline-flex;
align-items: center;
gap: var(--sp-1);
font-weight: 700;
font-size: var(--fs-300);
}
.lang-switch a {
color: var(--kleur-navy-60);
text-decoration: none;
padding: var(--sp-1) var(--sp-2);
min-width: var(--tap);
min-height: var(--tap);
display: inline-flex;
align-items: center;
justify-content: center;
}
.lang-switch a.active { color: var(--kleur-rood); }
.lang-switch span { color: var(--kleur-navy-12); }
/* Burger (mobiel) */
.hs-burger {
display: none;
flex-direction: column;
justify-content: center;
gap: 5px;
width: var(--tap);
height: var(--tap);
padding: 0;
background: none;
border: 0;
cursor: pointer;
}
.hs-burger span {
display: block;
width: 26px;
height: 3px;
background: var(--kleur-navy);
border-radius: 3px;
transition: transform var(--duur) var(--ease), opacity var(--duur) var(--ease);
}
.hs-burger.open span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.hs-burger.open span:nth-child(2) { opacity: 0; }
.hs-burger.open span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
@media (max-width: 860px) {
.hs-burger { display: inline-flex; }
.hs-nav__list {
position: fixed;
inset: 0 0 0 30%;
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
gap: var(--sp-2);
padding: calc(var(--tap) + var(--sp-6)) var(--sp-6) var(--sp-6);
background: var(--kleur-creme);
border-left: 2px solid var(--kleur-navy);
box-shadow: var(--schaduw);
transform: translateX(100%);
transition: transform var(--duur) var(--ease);
overflow-y: auto;
}
.hs-nav__list.open { transform: translateX(0); }
.hs-nav__list a:not(.lang-switch a):not(.hs-nav__dropdown-menu a) { font-size: var(--fs-500); }
.lang-switch { margin-top: var(--sp-4); }
}
/* ==========================================================================
6. Footer
========================================================================== */
.hs-footer {
margin-top: auto;
background: var(--kleur-navy);
color: var(--kleur-creme);
padding-block: var(--sp-7) var(--sp-6);
}
.hs-footer a { color: var(--kleur-creme); }
.hs-footer a:hover { color: var(--kleur-zalm); }
.hs-footer__grid {
display: grid;
gap: var(--sp-6);
grid-template-columns: 1fr;
align-items: start;
}
.hs-footer__logo img { height: 56px; width: auto; }
.hs-footer__links { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); font-weight: 700; }
.hs-footer__klein {
display: flex;
flex-wrap: wrap;
gap: var(--sp-1) var(--sp-3);
margin-top: var(--sp-3);
font-size: var(--fs-300);
}
.hs-footer__klein a { color: rgba(249, 230, 209, 0.65); }
.hs-footer__klein a:hover { color: var(--kleur-creme); }
.hs-footer__socials { display: flex; gap: var(--sp-3); }
.hs-footer__socials a {
width: var(--tap); height: var(--tap);
display: inline-flex; align-items: center; justify-content: center;
border: 2px solid var(--kleur-creme);
border-radius: var(--radius-pill);
}
.hs-footer__socials img { width: 20px; height: 20px; }
.hs-footer__copyright { font-size: var(--fs-300); color: rgba(249, 230, 209, 0.7); }
@media (min-width: 720px) {
.hs-footer__grid { grid-template-columns: auto 1fr auto; gap: var(--sp-8); }
}
/* ==========================================================================
7. Kaarten (programma / hoogtepunten)
========================================================================== */
.kaart-grid {
display: grid;
gap: var(--sp-5);
grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
align-items: stretch;
}
/* Zorg dat li-wrappers in nieuwsgrid even hoog zijn als de rij */
.kaart-grid > li { display: flex; }
.kaart-grid > li > .kaart { width: 100%; }
.kaart {
display: flex;
flex-direction: column;
background: var(--kleur-wit);
border: 2px solid var(--kleur-navy);
border-radius: var(--radius-lg);
overflow: hidden;
text-decoration: none;
color: var(--tekst);
transition: transform var(--duur) var(--ease), box-shadow var(--duur) var(--ease);
}
.kaart:hover { transform: translateY(-4px); box-shadow: var(--schaduw); color: var(--tekst); }
.kaart__media {
position: relative;
aspect-ratio: 4 / 3;
background: var(--kleur-lichtblauw);
overflow: hidden;
}
.kaart__media img { width: 100%; height: 100%; object-fit: cover; }
/* Placeholder wanneer nog geen foto (CMS vult later) */
.kaart__media--leeg {
display: flex; align-items: center; justify-content: center;
background:
radial-gradient(var(--kleur-navy-12) 1.5px, transparent 1.6px) 0 0 / 14px 14px,
var(--kleur-lichtblauw);
}
.kaart__media--leeg::after {
content: "Foto volgt";
font-family: var(--font-titel);
text-transform: uppercase;
color: var(--kleur-navy-60);
font-size: var(--fs-500);
}
.kaart__body { padding: var(--sp-4) var(--sp-5) var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-2); flex: 1; }
.kaart__titel { font-size: var(--fs-600); margin: 0; }
.kaart__meta { font-size: var(--fs-300); color: var(--tekst-zacht); display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-3); }
.kaart__tekst { font-size: var(--fs-400); margin: 0; }
.kaart__footer { margin-top: auto; padding-top: var(--sp-3); }
/* Badges / labels */
.badge {
display: inline-flex;
align-items: center;
gap: var(--sp-1);
padding: 0.25rem 0.7rem;
border-radius: var(--radius-pill);
font-size: var(--fs-300);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
background: var(--kleur-lichtblauw);
color: var(--kleur-navy);
}
.badge--theater { background: var(--kleur-zalm); }
.badge--music { background: var(--kleur-lichtblauw); }
.badge--activity { background: var(--kleur-creme-diep); }
.badge--art-installation { background: #d7c4e8; }
.badge--children { background: #bfe3c4; }
.badge--food { background: #f3d9bd; }
.badge--concept { background: transparent; border: 1.5px dashed var(--kleur-navy-60); color: var(--tekst-zacht); }
.badge--ticket { background: var(--kleur-rood); color: var(--kleur-wit); }
.badge--gratis { background: #2d7a3a; color: var(--kleur-wit); }
/* ==========================================================================
8. Filterbalk (programma per dag)
========================================================================== */
.filterbalk {
display: flex;
flex-wrap: wrap;
gap: var(--sp-1) var(--sp-2);
justify-content: center;
margin-bottom: var(--sp-4);
}
.filter-knop {
min-height: 2.2rem;
padding: 0.3rem 0.85rem;
border: 1.5px solid var(--kleur-navy);
border-radius: var(--radius-pill);
background: transparent;
color: var(--kleur-navy);
font-family: var(--font-body);
font-weight: 600;
font-size: var(--fs-200);
cursor: pointer;
transition: background var(--duur) var(--ease), color var(--duur) var(--ease);
white-space: nowrap;
}
.filter-knop:hover { background: var(--kleur-navy-12); }
.filter-knop[aria-pressed="true"] { background: var(--kleur-navy); color: var(--kleur-wit); border-color: var(--kleur-navy); }
/* Uitgelicht programma — horizontale scroll, 3 kaarten zichtbaar */
.uitgelicht-scroll {
display: flex;
gap: var(--sp-4);
overflow-x: auto;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
padding-bottom: var(--sp-3);
/* Verberg scrollbar maar houd functionaliteit */
scrollbar-width: thin;
scrollbar-color: var(--kleur-navy) transparent;
}
.uitgelicht-scroll::-webkit-scrollbar { height: 4px; }
.uitgelicht-scroll::-webkit-scrollbar-track { background: transparent; }
.uitgelicht-scroll::-webkit-scrollbar-thumb { background: var(--kleur-navy); border-radius: 4px; }
.uitgelicht-kaart {
flex: 0 0 calc((100% - 2 * var(--sp-4)) / 3);
min-width: 240px;
scroll-snap-align: start;
}
@media (max-width: 860px) {
.uitgelicht-kaart { flex: 0 0 80%; }
}
@media (max-width: 540px) {
.uitgelicht-kaart { flex: 0 0 88%; }
}
/* ==========================================================================
9. Hero (homepage slideshow)
========================================================================== */
.hero {
position: relative;
min-height: clamp(60vh, 70vh, 760px);
display: grid;
place-items: center;
overflow: hidden;
background: var(--kleur-navy);
}
.hero__slide {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
opacity: 0;
transition: opacity 1.2s var(--ease);
}
.hero__slide.active { opacity: 1; }
.hero__slide::after {
content: "";
position: absolute; inset: 0;
background: linear-gradient(180deg, var(--kleur-navy-60) 0%, transparent 35%, var(--kleur-navy-90) 100%);
}
.hero__content {
position: relative;
z-index: 2;
text-align: center;
color: var(--kleur-creme);
padding: var(--sp-6);
max-width: 40ch;
}
.hero__title { max-width: 16ch; margin-inline: auto; }
.hero__title {
color: var(--kleur-creme);
font-size: var(--fs-900);
text-shadow: 0 4px 24px rgba(0,0,0,0.4);
margin-bottom: var(--sp-5);
}
.hero__cta { display: flex; flex-wrap: wrap; gap: var(--sp-3); justify-content: center; }
/* ==========================================================================
9a. Contentrijen (Over, Contact), partnerlogo's, formulieren
========================================================================== */
.over-rij {
display: grid;
gap: var(--sp-6);
align-items: center;
grid-template-columns: 1fr;
}
.over-rij__media img {
width: 100%;
border: 2px solid var(--kleur-navy);
border-radius: var(--radius-lg);
box-shadow: var(--schaduw-zacht);
}
/* Detailpagina's met veel tekst: foto bovenaan uitlijnen i.p.v. verticaal centreren
(anders 'zakt' de foto naar het midden naast een lange tekstkolom). */
.over-rij--top { align-items: start; }
@media (min-width: 820px) {
.over-rij { grid-template-columns: 5fr 7fr; gap: var(--sp-8); }
.over-rij--omgekeerd .over-rij__media { order: 2; }
}
.over-partnerlogos {
display: flex;
flex-wrap: wrap;
gap: var(--sp-4);
align-items: center;
margin-top: var(--sp-5);
}
.over-partnerlogos img { height: 56px; width: auto; }
/* Leeg portret (Wouter-foto volgt) — halftone in lichtblauw */
.portret-leeg {
width: 100%;
aspect-ratio: 4 / 5;
border: 2px solid var(--kleur-navy);
border-radius: var(--radius-lg);
background:
radial-gradient(var(--kleur-navy-12) 1.5px, transparent 1.6px) 0 0 / 12px 12px,
var(--kleur-lichtblauw);
}
/* Weetjes (kinderpagina) */
.weetjes-grid {
display: grid;
gap: var(--sp-4);
grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
margin-top: var(--sp-5);
}
.weetje-kaart {
background: var(--kleur-wit);
border: 2px solid var(--kleur-navy);
border-radius: var(--radius-lg);
padding: var(--sp-5) var(--sp-5) var(--sp-5) var(--sp-6);
position: relative;
}
.weetje-kaart p { margin: 0; font-weight: 600; }
.weetje-nr {
position: absolute;
top: -16px;
left: var(--sp-4);
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
background: var(--kleur-rood);
color: var(--kleur-wit);
border: 2px solid var(--kleur-wit);
border-radius: var(--radius-pill);
font-family: var(--font-titel);
font-size: 1.2rem;
}
/* "We doen dit samen"-blok */
.samen-blok {
margin-top: var(--sp-8);
padding: var(--sp-7) var(--sp-5);
background: var(--kleur-wit);
border: 2px solid var(--kleur-navy);
border-radius: var(--radius-lg);
box-shadow: var(--schaduw-zacht);
}
.samen-blok h3 { font-size: var(--fs-700); margin-bottom: var(--sp-3); }
.samen-blok .btn { margin-top: var(--sp-4); }
/* Rich-text uit het CMS (kinderpagina, WYSIWYG): nette marges voor Quill-output
(paragrafen, lijsten, links) en varianten voor nadruk/zachte tekst. */
.rich-tekst > :first-child { margin-top: 0; }
.rich-tekst > :last-child { margin-bottom: 0; }
.rich-tekst ul, .rich-tekst ol { margin: 0 0 var(--sp-4); padding-left: 1.4em; }
/* Quill-paragrafen erven de grootte/kleur van een .lead-blok */
.lead.rich-tekst p { font-size: inherit; color: inherit; margin: 0 0 var(--sp-3); }
.rich-tekst--nadruk { font-weight: 700; }
.rich-tekst--zacht { font-style: italic; color: var(--tekst-zacht); }
/* Tekstblok dat direct op de stippen-achtergrond staat krijgt een eigen kader
(zelfde stijl als de foto-kaders en .samen-blok), zodat de levendige stippen
de leesbaarheid niet verstoren. Alleen binnen de stippen-secties; de tekst in
gewone secties (witte achtergrond) blijft ongewijzigd. */
.sterren-sectie .over-rij__tekst {
background: var(--kleur-wit);
border: 2px solid var(--kleur-navy);
border-radius: var(--radius-lg);
box-shadow: var(--schaduw-zacht);
padding: clamp(1.25rem, 3.5vw, 2.25rem);
}
/* Partneroverzicht */
.partners-grid {
display: grid;
gap: var(--sp-4);
grid-template-columns: repeat(auto-fill, minmax(min(100%, 180px), 1fr));
align-items: center;
}
.partners-grid--hoofd { grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); margin-bottom: var(--sp-6); }
.partner-tegel {
background: var(--kleur-wit);
border: 2px solid var(--lijn);
border-radius: var(--radius);
padding: var(--sp-4);
display: flex;
align-items: center;
justify-content: center;
aspect-ratio: 3 / 2;
}
/* width/height i.p.v. max-width/max-height: percentage max-height resolvet
niet betrouwbaar op een flex-kind waarvan de ouder z'n hoogte via
aspect-ratio krijgt (Safari) — logo's konden daardoor buiten de tegel vallen. */
.partner-tegel img { width: 100%; height: 100%; object-fit: contain; }
.partner-tegel--hoofd { border-color: var(--kleur-navy); }
/* Formulieren */
.hs-form { display: grid; gap: var(--sp-4); max-width: 560px; }
.hs-form label { font-weight: 700; display: block; margin-bottom: var(--sp-1); }
.hs-form .hint { font-size: var(--fs-300); color: var(--tekst-zacht); font-weight: 400; }
.hs-form input[type="text"],
.hs-form input[type="email"],
.hs-form input[type="tel"],
.hs-form input[type="url"],
.hs-form input[type="number"],
.hs-form input[type="date"],
.hs-form input[type="file"],
.hs-form select,
.hs-form textarea {
width: 100%;
min-height: var(--tap);
padding: 0.6rem 0.9rem;
font: inherit;
line-height: 1.6;
color: var(--tekst);
background: var(--kleur-wit);
border: 2px solid var(--kleur-navy);
border-radius: var(--radius);
}
.hs-form textarea { min-height: 7rem; resize: vertical; }
/* Keuzelijsten: zelfde doos als de tekstvelden, met ruimte voor het pijltje. */
/* Chrome rekent de hoogte van een select niet uit de line-height, waardoor hij
5px lager uitviel dan de tekstvelden. Zelfde hoogte expliciet meegeven:
line-height + verticale padding + rand. */
.hs-form select { cursor: pointer; padding-right: 2.2rem; min-height: calc(1.6em + 1.2rem + 4px); }
.hs-form select:disabled { opacity: .6; cursor: default; }
/* Bestandsvelden ("choose files") in de huisstijl. */
.hs-form input[type="file"] { cursor: pointer; line-height: 1.4; }
.hs-form input[type="file"]::file-selector-button {
font: inherit;
font-weight: 700;
margin: -0.1rem 0.8rem -0.1rem 0;
padding: 0.35rem 0.9rem;
color: var(--kleur-wit, #fff);
background: var(--kleur-navy);
border: none;
border-radius: var(--radius);
cursor: pointer;
}
.hs-form input[type="file"]::file-selector-button:hover { background: var(--kleur-rood, #cb3833); }
.checkbox-rij { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.checkbox-chip {
display: inline-flex;
align-items: center;
gap: var(--sp-2);
min-height: var(--tap);
padding: 0.4rem 1rem;
border: 2px solid var(--kleur-navy);
border-radius: var(--radius-pill);
background: var(--kleur-wit);
cursor: pointer;
font-weight: 600;
}
.checkbox-chip input { width: 1.1rem; height: 1.1rem; accent-color: var(--kleur-rood); }
.checkbox-chip:has(input:checked) { background: var(--kleur-navy); color: var(--kleur-wit); }
.melding { padding: var(--sp-4) var(--sp-5); border-radius: var(--radius); border: 2px solid; font-weight: 600; }
.melding--ok { border-color: #2c7a3f; background: #e7f4ea; color: #1d5a2d; }
.melding--fout { border-color: var(--kleur-rood); background: #fdecea; color: var(--kleur-rood-diep); }
/* ==========================================================================
9b. Video-sectie
========================================================================== */
.video-wrapper {
position: relative;
width: 100%;
max-width: 900px;
margin-inline: auto;
aspect-ratio: 16 / 9;
border: 2px solid var(--kleur-navy);
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: var(--schaduw-zacht);
}
.video-wrapper iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-loop-placeholder {
width: 100%;
max-width: 900px;
margin: 0 auto var(--sp-6);
aspect-ratio: 16 / 9;
display: flex;
align-items: center;
justify-content: center;
border: 2px dashed var(--kleur-navy-60);
border-radius: var(--radius-lg);
background:
radial-gradient(var(--kleur-navy-12) 1.5px, transparent 1.6px) 0 0 / 16px 16px,
var(--kleur-lichtblauw);
}
.video-loop-placeholder span {
font-family: var(--font-titel);
text-transform: uppercase;
color: var(--kleur-navy-60);
font-size: var(--fs-600);
}
/* ==========================================================================
9c. Festivalgids
========================================================================== */
.gids-tabs {
display: flex;
gap: var(--sp-2);
justify-content: center;
flex-wrap: wrap;
margin-bottom: var(--sp-6);
position: sticky;
top: calc(var(--tap) + var(--sp-5));
z-index: 50;
}
.gids-tab {
flex: 1 1 auto;
min-height: var(--tap);
padding: 0.6rem 1rem;
border: 2px solid var(--kleur-navy);
border-radius: var(--radius-pill);
background: var(--kleur-wit);
color: var(--kleur-navy);
font-family: var(--font-body);
font-weight: 700;
cursor: pointer;
}
.gids-tab[aria-selected="true"] { background: var(--kleur-navy); color: var(--kleur-wit); }
.gids-lijst { display: grid; gap: var(--sp-3); }
.gids-item {
background: var(--kleur-wit);
border: 2px solid var(--kleur-navy);
border-radius: var(--radius);
padding: var(--sp-4);
position: relative;
}
.gids-item h3 { margin: var(--sp-2) 0 var(--sp-1); font-size: var(--fs-600); }
.gids-item h3 a { color: inherit; text-decoration: none; }
.gids-item h3 a:hover { color: var(--kleur-rood); }
.gids-item p { margin: 0; font-size: var(--fs-300); color: var(--tekst-zacht); }
/* Favorietenster (eigen programma) */
.gids-fav {
position: absolute;
top: var(--sp-3);
right: var(--sp-3);
width: var(--tap);
height: var(--tap);
border: 0;
background: transparent;
font-size: 1.6rem;
line-height: 1;
color: var(--kleur-navy);
cursor: pointer;
}
.gids-fav.is-fav { color: var(--kleur-rood); }
.filter-knop--fav[aria-pressed="true"] { background: var(--kleur-rood); border-color: var(--kleur-rood); }
#gids-mijn-locatie.is-actief { background: var(--kleur-lichtblauw); }
.gids-kaart {
width: 100%;
height: min(70vh, 560px);
border: 2px solid var(--kleur-navy);
border-radius: var(--radius-lg);
overflow: hidden;
}
/* Genummerde kaartmarkers + legenda (boekjestijl) */
.kaart-marker span {
display: flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
background: var(--kleur-rood);
color: var(--kleur-wit);
border: 2px solid var(--kleur-wit);
border-radius: var(--radius-pill);
font-family: var(--font-titel);
font-size: 1rem;
line-height: 1;
box-shadow: 0 2px 5px rgba(8, 29, 86, 0.4);
}
.kaart-legenda {
list-style: none;
margin: var(--sp-4) 0 0;
padding: 0;
display: grid;
gap: var(--sp-2);
grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
}
.kaart-legenda li { display: flex; align-items: center; gap: var(--sp-2); font-weight: 600; }
.kaart-nr {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
width: 26px;
height: 26px;
background: var(--kleur-rood);
color: var(--kleur-wit);
border-radius: var(--radius-pill);
font-family: var(--font-titel);
font-size: 0.9rem;
}
/* Foutpagina's */
.fout-sectie { text-align: center; padding-block: var(--sp-9); }
.fout-code {
font-family: var(--font-titel);
font-size: clamp(5rem, 18vw, 11rem);
line-height: 1;
color: var(--kleur-lichtblauw);
-webkit-text-stroke: 3px var(--kleur-navy);
margin: 0;
}
/* [hidden] altijd laten winnen van display-regels op componenten (filters!) */
[hidden] { display: none !important; }
/* ==========================================================================
Illustraties (Suzan Hijink merkpakket)
========================================================================== */
.footer-illustratie {
text-align: center;
margin-top: var(--sp-9);
margin-bottom: -2px; /* naadloos op de footer */
line-height: 0;
}
.footer-illustratie img {
width: min(320px, 70vw);
height: auto;
margin-inline: auto;
}
@media (prefers-reduced-motion: no-preference) {
.footer-illustratie img { animation: deinen 6s ease-in-out infinite; transform-origin: bottom center; }
}
@keyframes deinen {
0%, 100% { transform: translateY(0) rotate(-0.5deg); }
50% { transform: translateY(-6px) rotate(0.5deg); }
}
/* Decoratieve illustratie naast tekst (bv. noodpakket op Praktisch) */
.illustratie-blok {
display: grid;
gap: var(--sp-5);
align-items: center;
grid-template-columns: 1fr;
}
@media (min-width: 760px) {
.illustratie-blok { grid-template-columns: 3fr 2fr; }
.illustratie-blok--omgekeerd > :first-child { order: 2; }
}
.illustratie-blok img { width: 100%; max-width: 360px; height: auto; margin-inline: auto; display: block; }
/* Infokaarten (Praktisch) */
.info-grid {
display: grid;
gap: var(--sp-4);
grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr));
}
.info-kaart {
background: var(--kleur-wit);
border: 2px solid var(--kleur-navy);
border-radius: var(--radius);
padding: var(--sp-5);
}
.info-kaart__titel { font-size: var(--fs-600); margin: 0 0 var(--sp-3); }
.info-kaart__body p { margin: 0 0 var(--sp-3); }
.info-kaart__body p:last-child { margin-bottom: 0; }
.info-kaart__body ul { margin: 0; padding-left: 1.1rem; display: grid; gap: var(--sp-2); }
.info-kaart__body li { color: var(--tekst-zacht); }
.info-kaart__body strong { color: var(--tekst); }
/* "Nog invullen"-notitie voor de organisatie (✎) — bewust onopvallend */
.invullen {
display: inline;
font-size: 0.88em;
font-style: italic;
color: var(--tekst-zacht);
border-bottom: 1px dotted var(--tekst-zacht);
}
.invullen::before { content: "✎ "; opacity: 0.6; }
.faq-antwoord p { margin: 0 0 var(--sp-2); }
.faq-antwoord { padding: 0 var(--sp-5) var(--sp-4); color: var(--tekst-zacht); }
.faq-antwoord strong { color: var(--tekst); }
/* FAQ (details/summary) */
.faq-lijst { display: grid; gap: var(--sp-3); max-width: 720px; margin-inline: auto; }
.faq-item {
background: var(--kleur-wit);
border: 2px solid var(--kleur-navy);
border-radius: var(--radius);
padding: 0;
}
.faq-item summary {
cursor: pointer;
list-style: none;
min-height: var(--tap);
padding: var(--sp-4) var(--sp-5);
font-weight: 700;
position: relative;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
content: "+";
position: absolute;
right: var(--sp-5);
top: 50%;
transform: translateY(-50%);
font-family: var(--font-titel);
font-size: var(--fs-600);
color: var(--kleur-rood);
}
.faq-item[open] summary::after { content: "–"; }
/* Legacy: directe in een faq-item (zonder .faq-antwoord wrapper) */
.faq-item > p { margin: 0; padding: 0 var(--sp-5) var(--sp-4); }
/* Klikbare kaarten (programma -> detailpagina) */
.kaart__media-link { display: block; line-height: 0; }
.kaart__titel-link { color: inherit; text-decoration: none; }
.kaart__titel-link:hover { color: var(--kleur-rood); text-decoration: underline; text-decoration-thickness: 2px; }
/* Kleine actieknoppen op kaarten (agenda, route) */
.btn-klein {
display: inline-flex;
align-items: center;
gap: 0.4rem;
min-height: var(--tap);
padding: 0.35rem 0.9rem;
font-size: var(--fs-300);
font-weight: 600;
color: var(--kleur-navy);
background: var(--kleur-wit);
border: 1.5px solid var(--kleur-navy);
border-radius: var(--radius-pill);
text-decoration: none;
}
.btn-klein:hover { background: var(--kleur-lichtblauw); }
.kaart__acties { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }
/* Routeknopje in de gids */
.gids-route { text-decoration: none; margin-left: 0.35rem; }
/* ==========================================================================
9c2. Tickets
========================================================================== */
.tickets-layout {
display: grid;
gap: var(--sp-6);
grid-template-columns: 1fr;
align-items: start;
}
@media (min-width: 860px) {
.tickets-layout { grid-template-columns: 5fr 6fr; gap: var(--sp-8); }
}
.tickets-event-image {
width: 100%;
border: 2px solid var(--kleur-navy);
border-radius: var(--radius-lg);
box-shadow: var(--schaduw-zacht);
}
.tickets-meta { list-style: none; padding: 0; margin: 0 0 var(--sp-5); display: grid; gap: var(--sp-1); color: var(--tekst-zacht); }
.available-tickets-info { font-weight: 700; color: var(--kleur-navy); }
.available-tickets-info.sold-out { color: var(--kleur-rood); }
.voucher-rij { display: flex; gap: var(--sp-3); align-items: flex-end; flex-wrap: wrap; }
.prijs-blok {
background: var(--kleur-wit);
border: 2px solid var(--kleur-navy);
border-radius: var(--radius);
padding: var(--sp-4) var(--sp-5);
}
.prijs-blok p { margin: 0 0 var(--sp-1); }
.prijs-blok__totaal { font-size: var(--fs-500); }
.form-loader { display: flex; align-items: center; gap: var(--sp-3); }
.loader-spinner {
width: 28px;
height: 28px;
border: 4px solid var(--kleur-lichtblauw);
border-top-color: var(--kleur-rood);
border-radius: 50%;
animation: hs-spin 0.9s linear infinite;
}
@keyframes hs-spin { to { transform: rotate(360deg); } }
/* Ticketweergave (QR) */
.ticket-brand { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-4); }
.ticket-brand img { height: 40px; width: auto; }
.ticket-brand span { font-family: var(--font-titel); font-size: var(--fs-400); color: var(--kleur-navy); }
.ticket-footer { margin-top: var(--sp-5); text-align: center; font-size: var(--fs-300); color: var(--tekst-zacht); }
.ticket-event {
display: flex;
gap: var(--sp-4);
align-items: center;
background: var(--kleur-creme-diep, var(--kleur-creme));
border-radius: var(--radius-lg);
padding: var(--sp-4);
margin-bottom: var(--sp-5);
flex-wrap: wrap;
}
.ticket-event__foto { width: 96px; height: 96px; border-radius: var(--radius); object-fit: cover; flex-shrink: 0; }
.ticket-event__titel { font-size: var(--fs-500); margin: 0 0 var(--sp-1); }
.ticket-event__meta { margin: 0; color: var(--tekst-zacht); font-size: var(--fs-300); }
.ticket-lijst { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); }
.ticket-kaart {
background: var(--kleur-wit);
border: 2px solid var(--kleur-navy);
border-radius: var(--radius-lg);
padding: var(--sp-5);
display: grid;
gap: var(--sp-3);
}
.ticket-kaart__top { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); flex-wrap: wrap; }
.ticket-kaart__code { font-family: var(--font-titel); letter-spacing: 0.02em; font-size: var(--fs-400); }
.ticket-kaart__badge {
display: inline-block;
padding: 0.2rem 0.7rem;
border-radius: var(--radius);
font-size: var(--fs-300);
font-weight: 700;
color: var(--kleur-wit);
background: var(--tekst-zacht);
}
.ticket-kaart__badge--geldig { background: #2d7a3a; }
.ticket-kaart__badge--gebruikt { background: var(--tekst-zacht); }
.ticket-kaart__badge--wacht { background: var(--kleur-zalm); color: var(--kleur-navy); }
.ticket-kaart__qr { display: flex; justify-content: center; }
.ticket-kaart__qr img, .ticket-kaart__qr canvas { max-width: 100%; height: auto; }
.ticket-kaart__hint { margin: 0; text-align: center; font-size: var(--fs-300); color: var(--tekst-zacht); }
.ticket-acties { margin-top: var(--sp-5); text-align: center; }
/* Ticket als PDF/print: alleen het ticket zelf, geen site-chrome. */
@media print {
.no-print, .hs-header, .hs-footer, header, footer, nav { display: none !important; }
body { background: var(--kleur-wit); }
.ticket-lijst { grid-template-columns: 1fr; }
.ticket-kaart { break-inside: avoid; page-break-inside: avoid; border-width: 1px; }
}
/* ==========================================================================
9c3. Voorwoord (burgemeester / dijkgraaf)
========================================================================== */
.voorwoord-grid {
display: grid;
gap: var(--sp-6);
grid-template-columns: 1fr;
}
@media (min-width: 820px) { .voorwoord-grid { grid-template-columns: 1fr 1fr; gap: var(--sp-7); } }
.voorwoord {
margin: 0;
background: var(--kleur-wit);
border: 2px solid var(--kleur-navy);
border-radius: var(--radius-lg);
padding: var(--sp-6);
position: relative;
}
.voorwoord::before {
content: "\201C";
position: absolute;
top: -0.35em;
left: var(--sp-5);
font-family: var(--font-titel);
font-size: 5rem;
line-height: 1;
color: var(--kleur-zalm);
}
.voorwoord__portret {
width: 96px;
height: 96px;
border-radius: var(--radius-pill);
border: 2px solid var(--kleur-navy);
overflow: hidden;
margin-bottom: var(--sp-4);
}
.voorwoord__portret img { width: 100%; height: 100%; object-fit: cover; }
.voorwoord__portret--leeg {
background:
radial-gradient(var(--kleur-navy-12) 1.5px, transparent 1.6px) 0 0 / 10px 10px,
var(--kleur-lichtblauw);
}
.voorwoord__tekst { font-size: var(--fs-500); }
.voorwoord__naam {
font-family: var(--font-titel);
text-transform: uppercase;
color: var(--kleur-rood);
font-size: var(--fs-400);
}
/* ==========================================================================
9c4. Video-grid & social
========================================================================== */
.video-grid {
display: grid;
gap: var(--sp-5);
grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
margin-top: var(--sp-6);
}
.video-grid__item { margin: 0; }
.video-wrapper--klein { max-width: none; }
.video-grid__item figcaption { margin-top: var(--sp-2); }
.social-knoppen {
display: flex;
flex-wrap: wrap;
gap: var(--sp-3);
justify-content: center;
margin-top: var(--sp-5);
}
.social-knoppen .btn img { width: 20px; height: 20px; }
/* Behold Instagram-widget — één rij, in huisstijl */
.insta-balk-sectie { padding-block: var(--sp-7); }
.insta-widget { margin-top: var(--sp-5); width: 100%; }
behold-widget {
--behold-rows: 1;
--behold-gap: 0.75rem;
--behold-border-radius: 14px;
--behold-background: transparent;
}
/* ==========================================================================
9c5. Partnerverhalen
========================================================================== */
.partner-verhalen { display: grid; gap: var(--sp-7); margin-top: var(--sp-7); }
.partner-verhaal {
display: grid;
gap: var(--sp-5);
grid-template-columns: 1fr;
align-items: center;
}
@media (min-width: 760px) {
.partner-verhaal { grid-template-columns: 4fr 8fr; gap: var(--sp-7); }
.partner-verhaal--omgekeerd .partner-verhaal__logo { order: 2; }
}
.partner-verhaal__logo .partner-tegel { max-width: 320px; margin-inline: auto; }
.partner-verhaal__tekst h2 { margin-bottom: var(--sp-3); }
/* ==========================================================================
9d. TTS-widget (voorleesfunctie, Web Speech API)
========================================================================== */
.tts-widget {
position: fixed;
bottom: 1.5rem;
right: 1.5rem;
z-index: 1000;
}
.tts-widget-toggle {
width: 56px;
height: 56px;
border-radius: var(--radius-pill);
background: var(--kleur-navy);
color: var(--kleur-creme);
border: 2px solid var(--kleur-creme);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
box-shadow: var(--schaduw-zacht);
transition: transform var(--duur) var(--ease);
}
.tts-widget-toggle:hover { transform: scale(1.06); }
.tts-widget-panel {
position: absolute;
bottom: 72px;
right: 0;
width: 280px;
background: var(--kleur-wit);
border: 2px solid var(--kleur-navy);
border-radius: var(--radius-lg);
box-shadow: var(--schaduw);
opacity: 0;
visibility: hidden;
transform: translateY(10px);
transition: opacity var(--duur) var(--ease), transform var(--duur) var(--ease), visibility var(--duur);
max-height: 0;
overflow: hidden;
}
.tts-widget-panel.active {
opacity: 1;
visibility: visible;
transform: translateY(0);
max-height: 500px;
}
.tts-widget-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: var(--sp-4);
border-bottom: 1px solid var(--lijn);
font-weight: 700;
}
.tts-widget-close {
background: transparent;
border: 0;
cursor: pointer;
padding: var(--sp-1);
display: flex;
color: var(--tekst);
border-radius: 4px;
}
.tts-widget-close:hover { background: var(--kleur-navy-12); }
.tts-widget-controls { padding: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-3); }
.tts-widget-btn {
display: flex;
align-items: center;
gap: var(--sp-3);
min-height: var(--tap);
padding: 0.6rem 1rem;
background: transparent;
border: 1.5px solid var(--lijn);
border-radius: var(--radius);
cursor: pointer;
color: var(--tekst);
font: inherit;
font-size: var(--fs-300);
text-align: left;
}
.tts-widget-btn:hover { background: var(--kleur-lichtblauw); border-color: var(--kleur-lichtblauw); }
.tts-widget-speed {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--sp-2);
padding-top: var(--sp-3);
border-top: 1px solid var(--lijn);
}
.tts-widget-speed select {
background: var(--kleur-wit);
border: 1.5px solid var(--lijn);
border-radius: var(--radius);
padding: 0.4rem;
font: inherit;
font-size: var(--fs-300);
cursor: pointer;
}
/* ==========================================================================
10. Animatie-respect
========================================================================== */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
scroll-behavior: auto !important;
}
.hero__slide { transition: none; }
}
/* ── Beheerder: 'bewerken'-knoppen op de publiekssite (onzichtbaar voor bezoekers) ── */
.admin-bewerk {
display: inline-flex;
align-items: center;
gap: .35em;
font-family: inherit;
font-size: .85rem;
font-weight: 700;
text-decoration: none;
border-radius: 999px;
padding: .35em .9em;
background: #081d56;
color: #fff;
border: 2px solid #f9e6d1;
box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
transition: background .15s ease;
}
.admin-bewerk:hover,
.admin-bewerk:focus { background: #cb3833; color: #fff; }
.admin-bewerk--inline { margin-left: auto; }
.admin-bewerk--zwevend {
position: fixed;
right: 1.25rem;
bottom: 1.25rem;
z-index: 900;
font-size: .95rem;
padding: .6em 1.15em;
}
/* ── Extra foto's (galerij) op de detailpagina ── */
.item-galerij { margin-top: var(--sp-7, 2.5rem); }
.item-galerij__titel { font-size: var(--fs-500, 1.1rem); margin-bottom: var(--sp-3, 1rem); }
.item-galerij__grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: var(--sp-3, 1rem);
}
.item-galerij__grid a { display: block; border-radius: var(--radius-lg, 12px); overflow: hidden; }
.item-galerij__grid img {
width: 100%;
aspect-ratio: 4 / 3;
object-fit: cover;
display: block;
}
/* ── Nieuws-detailpagina: leesbare body + open-call-oproep ── */
.nieuws-inhoud { line-height: 1.7; }
.nieuws-inhoud p { margin-bottom: var(--sp-3, .75rem); }
.nieuws-inhoud h3 { margin-top: var(--sp-5, 1.5rem); margin-bottom: var(--sp-2, .5rem); }
/* Lege 'witregel'-alinea's uit Quill (
) niet als dubbele witruimte tonen. */
.nieuws-inhoud p:has(> br:only-child) { display: none; }
.nieuws-bijlagen { margin-top: var(--sp-5, 1.5rem); padding-top: var(--sp-4, 1rem); border-top: 1px solid var(--kleur-navy-20, rgba(8,29,86,.15)); }
.nieuws-bijlagen__titel { font-size: var(--fs-400); margin: 0 0 var(--sp-2, .5rem); }
.nieuws-bijlagen__lijst { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-2, .5rem); }
.nieuws-bijlagen__lijst a { color: var(--kleur-rood, #cb3833); font-weight: 600; text-decoration: underline; }
.oproep-cta {
background: var(--kleur-navy, #081d56);
color: var(--kleur-creme, #f9e6d1);
border-radius: var(--radius-lg, 12px);
padding: var(--sp-5, 1.5rem) var(--sp-6, 2rem);
margin-top: var(--sp-7, 2.5rem);
text-align: center;
}
.oproep-cta p { font-size: var(--fs-500, 1.1rem); margin: 0 0 var(--sp-4, 1.25rem); }
/* Open-call-formulier: voorbeeldtekst (placeholder) consistent grijs. */
.hs-form input::placeholder,
.hs-form textarea::placeholder { color: #8a93a3; opacity: 1; }
/* Open-call-formulier: tekentellers + upload-terugkoppeling (js/opencall-form.js) */
.oc-teller { font-size: .75rem; color: var(--tekst-zacht, #6b7280); text-align: right; margin-top: .15rem; }
.oc-teller--vol { color: var(--kleur-rood, #cb3833); font-weight: 700; }
.oc-upload-hint { font-size: .8rem; color: var(--tekst-zacht, #6b7280); margin: .15rem 0 .4rem; }
.oc-preview { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .6rem; }
.oc-preview__item { position: relative; width: 110px; }
.oc-preview__item img { width: 110px; height: 82px; object-fit: cover; border-radius: 8px; border: 1px solid var(--lijn, #d1d5db); display: block; }
.oc-preview__naam { font-size: .68rem; color: var(--tekst-zacht, #6b7280); margin-top: .2rem; word-break: break-word; line-height: 1.25; }
.oc-preview__del { position: absolute; top: -8px; right: -8px; width: 24px; height: 24px; border-radius: 50%; border: none;
background: var(--kleur-rood, #cb3833); color: #fff; font-size: .9rem; line-height: 1; cursor: pointer; box-shadow: 0 1px 4px rgba(0, 0, 0, .35); }
.oc-veldfout { font-size: .8rem; color: var(--kleur-rood, #cb3833); font-weight: 600; margin-top: .35rem; }