/*  Festileaks 27 — gedeelde stylesheet
    ==========================================================================
    Deze laag is de uitvoering van het ontwerp uit de playground
    (festileaks.com/playground/fl27/4). Klassenamen en tokens zijn daar
    één op één van overgenomen, zodat het thema en de playground niet uit
    elkaar kunnen lopen: wat daar verandert, verandert hier hetzelfde.

    Opbouw:
      1  tokens
      2  basis
      3  advertenties
      4  supertop + header
      5  raamwerk (drie kolommen)
      6  linkermenu
      7  rechterkolom
      8  feed: sectiekoppen, chips, kaarten
      9  artikel
     10  profiel
     11  agenda + festival
     12  formulieren, inloggen, reacties
     13  footer, balk onderaan, uitschuifpaneel
     14  WordPress-inhoud (blokken, klassieke editor)
    ========================================================================== */

/* 1 · tokens ---------------------------------------------------------------- */

:root{
	/* typografie */
	--f-display:'Manrope';
	--f-body:'Manrope';
	--fs-body:15px;
	--lh-body:1.6;
	--fs-h1:27px;
	--fs-h2:20px;
	--fs-h3:16px;
	--fs-cardtitle:17px;
	--fs-meta:12.5px;
	--lh-head:1.14;
	--ls-head:-0.015em;
	--fw-head:700;

	/* kleuren */
	--c-red:#DC2E2E;
	--c-coral:#C94A5C;
	--c-blue:#28A0DC;
	--c-bluebr:#4F9BD9;
	--c-ink:#201F28;
	--c-muted:#55525E;
	--c-soft:#8B8794;
	--c-bg:#F7F6FA;
	--c-card:#FFFFFF;
	--c-line:#ECE9F1;

	/* categoriekleuren — de stip voor het etiket */
	--cat-nieuws:#28A0DC;
	--cat-preview:#97729F;
	--cat-review:#C9921A;
	--cat-community:#2E8B57;
	--cat-short:#8B8794;
	--cat-curated:#6C63C4;
	--cat-social:#DD2A7B;
	--cat-gerucht:#CC3535;

	/* ruimte */
	--sp-pad:16px;
	--sp-gap:13px;
	--sp-section:26px;
	--sp-page:14px;

	/* vormen */
	--r-card:16px;
	--r-sm:12px;
	--r-btn:999px;
	--bw-card:1px;

	/* raamwerk */
	--w-left:248px;
	--w-right:318px;
	--w-max:1400px;
	--h-header:60px;
	--h-supertop:90px;

	/* effecten */
	--sh-card:0 1px 2px rgba(32,31,40,.05),0 10px 26px -14px rgba(32,31,40,.14);
	--sh-card-op:0 4px 10px rgba(32,31,40,.07),0 20px 40px -16px rgba(32,31,40,.2);
	--grad:linear-gradient(135deg,#C94A5C 0%,#97729F 52%,#4F9BD9 100%);
	--grad27:linear-gradient(100deg,#DC2E2E 0%,#B84A86 45%,#28A0DC 100%);
	--wristband:linear-gradient(100deg,#DC2E2E 0%,#B84A86 45%,#28A0DC 100%);
	--gold:#C9921A;
	--gold-bg:#FBF4E2;
}

/* De vier gewichten staan in het thema zelf; er wordt niets extern geladen. */
@font-face{font-family:"Manrope";src:url("../fonts/Manrope-Regular.woff") format("woff");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Manrope";src:url("../fonts/Manrope-SemiBold.woff") format("woff");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Manrope";src:url("../fonts/Manrope-Bold.woff") format("woff");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Manrope";src:url("../fonts/Manrope-ExtraBold.woff") format("woff");font-weight:800;font-style:normal;font-display:swap}

/* 2 · basis (mobiel eerst) --------------------------------------------------- */

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}

body{margin:0;color:var(--c-ink);
	background:
		radial-gradient(900px 420px at 88% -100px, rgba(40,160,220,.08), transparent 60%),
		radial-gradient(700px 400px at -70px 32%, rgba(220,46,46,.05), transparent 55%),
		var(--c-bg);
	font-family:var(--f-body),system-ui,sans-serif;font-size:var(--fs-body);line-height:var(--lh-body);
	-webkit-font-smoothing:antialiased;overflow-wrap:break-word}

a{color:inherit;text-decoration:none}
img,svg,video{max-width:100%;display:block}
hr{border:none;border-top:1px solid var(--c-line);margin:12px 0}
h1,h2,h3,h4,h5{font-family:var(--f-display),system-ui,sans-serif;margin:0;
	line-height:var(--lh-head);letter-spacing:var(--ls-head);font-weight:var(--fw-head)}
h1{font-size:var(--fs-h1)} h2{font-size:var(--fs-h2)} h3{font-size:var(--fs-h3)}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
button{font-family:inherit;font-size:inherit;cursor:pointer;border:none;background:none;color:inherit}
:focus-visible{outline:2.5px solid var(--c-blue);outline-offset:2px;border-radius:6px}

/* Het hidden-attribuut wint altijd, ook van display-regels uit plugins. */
[hidden]{display:none!important}

.wrap{max-width:var(--w-max);margin:0 auto;padding:0 var(--sp-page)}
.muted{color:var(--c-muted)}
.card{background:var(--c-card);border:var(--bw-card) solid var(--c-line);border-radius:var(--r-card);box-shadow:var(--sh-card)}
.card.pad{padding:var(--sp-pad)}

.fl-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.fl-skip{position:absolute;left:-9999px;top:0;z-index:200;background:#fff;padding:12px 18px;border-radius:0 0 var(--r-sm) 0;font-weight:700}
.fl-skip:focus{left:0}

/* voorbeeldmarkering: bron nog niet gekoppeld */
.card.is-voorbeeld,.post.is-voorbeeld,.sidebox.is-voorbeeld,.statrow.is-voorbeeld{border-style:dashed}
.fl-vb{display:inline-flex;align-items:center;font-size:9.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
	color:#9A7015;background:var(--gold-bg);border:1px solid #EAD9AC;border-radius:20px;padding:2px 8px;font-family:var(--f-display)}

/* 3 · advertenties ---------------------------------------------------------- */

.ad{position:relative;display:flex;align-items:center;justify-content:center;text-align:center;
	background:repeating-linear-gradient(135deg,#EDF0F5 0 12px,#E8ECF2 12px 24px);
	color:#9aa4b0;border:1px dashed #d1d8e0;border-radius:10px;font-size:12px;font-weight:600}
.ad::before{content:"Advertentie";position:absolute;top:5px;left:9px;font-size:9px;color:#b7bfc9;letter-spacing:.12em;text-transform:uppercase}
.ad-rect{height:250px;margin:14px 0}
.ad-feed{height:120px;margin:0 0 var(--sp-gap)}

/* 4 · supertop + header ------------------------------------------------------ */

.supertop{height:var(--h-supertop);display:flex;align-items:center;justify-content:center;background:var(--c-bg)}
.supertop .ad{width:728px;max-width:calc(100% - 20px);height:calc(var(--h-supertop) - 14px)}

.header{position:sticky;top:0;z-index:70;background:rgba(255,255,255,.86);
	-webkit-backdrop-filter:blur(16px) saturate(1.3);backdrop-filter:blur(16px) saturate(1.3);
	border-bottom:1px solid var(--c-line)}
.header::after{content:"";position:absolute;left:0;right:0;bottom:-2.5px;height:2.5px;background:var(--grad)}
.header-inner{max-width:var(--w-max);margin:0 auto;height:var(--h-header);display:flex;align-items:center;gap:8px;padding:0 var(--sp-page)}

.brand{display:flex;align-items:center;gap:8px;flex-shrink:0}
.logo{width:33px;height:30px;object-fit:contain}
.logo--voet{width:60px;height:auto}
.brand .name{font-family:var(--f-display);font-weight:800;font-size:19px;letter-spacing:-.02em;display:none}

/*
	Let op de naam: WordPress zet zelf de klasse "search" op de <body> van een
	zoekresultatenpagina. Een kale .search-regel maakt dan het hele document
	een flexbox met padding en afgeronde hoeken, en klapt de hoofdkolom in.
	Vandaar een eigen naam.
*/
.zoekbalk{flex:1;display:flex;align-items:center;gap:9px;background:var(--c-bg);border:1px solid transparent;
	border-radius:40px;padding:8px 14px;color:var(--c-soft);min-width:0;transition:.15s;position:relative}
.zoekbalk:focus-within{background:#fff;border-color:#d8e0ea}
.zoekbalk input{border:none;background:none;outline:none;font:inherit;font-size:14px;color:var(--c-ink);width:100%;min-width:0}
.zoekbalk input::-webkit-search-cancel-button{display:none}
.zoekbalk button[type=submit]{display:none}

.iconbtn{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;color:#39434e;flex-shrink:0}
.iconbtn:hover{background:var(--c-bg)}

.addbtn{flex-shrink:0;width:40px;height:40px;border-radius:50%;background:var(--grad);color:#fff;
	display:none;place-items:center;box-shadow:0 4px 14px rgba(151,114,159,.4);transition:.15s}
.addbtn:hover{transform:scale(1.06)}
.addbtn span{display:none}

.munten{display:none;align-items:center;gap:7px;background:var(--gold-bg);border:1px solid #EAD9AC;color:#8A6512;
	border-radius:30px;padding:7px 13px;font-weight:700;font-size:13px;flex-shrink:0;font-family:var(--f-display)}

.avatarbtn{width:38px;height:38px;border-radius:50%;flex-shrink:0;background:var(--grad);color:#fff;
	display:grid;place-items:center;font-family:var(--f-display);font-weight:700;font-size:14px;border:2px solid #fff;
	box-shadow:0 0 0 2px var(--c-line)}
.avatarbtn svg{width:19px;height:19px}

@media (min-width:560px){.brand .name{display:block}}
@media (min-width:720px){
	.addbtn{display:inline-flex;align-items:center;justify-content:center;gap:7px;width:auto;padding:0 16px;height:40px;
		border-radius:30px;font-weight:700;font-family:var(--f-display);font-size:14px}
	.addbtn span{display:inline}
}
@media (min-width:1000px){.munten{display:inline-flex}.btn-menu{display:none}}

/* zoeken op smal scherm: het veld klapt onder de balk uit */
.btn-zoek{display:grid}
@media (min-width:720px){.btn-zoek{display:none}}
@media (max-width:719px){
	.header-inner .zoekbalk{position:absolute;left:0;right:0;top:var(--h-header);z-index:5;border-radius:0;
		background:#fff;border-top:1px solid var(--c-line);padding:12px var(--sp-page);display:none}
	.header.is-zoeken .zoekbalk{display:flex}
}

/* zoeksuggesties onder het veld */
.zoeksug{position:absolute;top:calc(100% + 8px);left:0;right:0;z-index:95;background:#fff;border:1px solid var(--c-line);
	border-radius:var(--r-card);box-shadow:0 12px 34px rgba(23,35,52,.16);padding:6px;min-width:280px;
	max-height:min(70vh,460px);overflow-y:auto}
.zoeksug__kop{font-family:var(--f-display);font-size:10px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
	color:var(--c-soft);padding:9px 11px 4px;margin:0}
.zoeksug__rij{display:flex;align-items:center;gap:10px;padding:8px 11px;border-radius:9px}
.zoeksug__rij:hover{background:var(--c-bg)}
.zoeksug__rij>span{min-width:0}
.zoeksug__rij img{width:32px;height:32px;border-radius:9px;object-fit:cover;flex-shrink:0}
.zoeksug__leeg{width:32px;height:32px;border-radius:9px;background:var(--c-bg);flex-shrink:0}
.zoeksug__rij b{display:block;font-family:var(--f-display);font-weight:700;font-size:13.5px;line-height:1.3;
	overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.zoeksug__sub{display:block;color:var(--c-muted);font-size:11.5px;margin-top:1px}
.zoeksug__alles{display:block;text-align:center;padding:10px;margin-top:4px;border-top:1px solid var(--c-line);
	color:var(--c-blue);font-weight:600;font-size:13px}

/* Bezig met zoeken. Drie regels op ware grootte in plaats van een leeg
   paneel: zo is te zien dát er iets gebeurt en verspringt er niets zodra de
   resultaten er zijn. De globale reduced-motion-regel zet de beweging uit. */
.zoeksug__bezig,.zoeksug__niets{display:flex;align-items:center;gap:8px;color:var(--c-muted);
	text-transform:none;letter-spacing:0;font-size:12px;font-weight:700;padding:11px 11px 7px}
.zoeksug__bezig::after{content:"";width:11px;height:11px;flex-shrink:0;border-radius:50%;
	border:2px solid var(--c-line);border-top-color:var(--c-blue);animation:fl-draai .7s linear infinite}
@keyframes fl-draai{to{transform:rotate(360deg)}}

.zoeksug__rij.is-laden{pointer-events:none}
/* De regel is leeg, dus de tekstkolom krimpt tot niets; zonder dit blijven de
   balkjes onzichtbaar. */
.zoeksug__rij.is-laden>span:last-child{flex:1}
.zoeksug__rij.is-laden .zoeksug__leeg,
.zoeksug__rij.is-laden b,
.zoeksug__rij.is-laden .zoeksug__sub{background:var(--c-line);border-radius:6px;animation:fl-adem 1.2s ease-in-out infinite}
.zoeksug__rij.is-laden b{height:11px;width:58%}
.zoeksug__rij.is-laden .zoeksug__sub{height:9px;width:34%;margin-top:6px}
.zoeksug__rij:nth-of-type(2).is-laden b{width:72%}
.zoeksug__rij:nth-of-type(3).is-laden b{width:46%}
@keyframes fl-adem{50%{opacity:.45}}

/* flyouts uit de header */
.flyout,.plusmenu{position:absolute;z-index:90;background:#fff;border:1px solid var(--c-line);border-radius:var(--r-card);
	box-shadow:0 12px 34px rgba(23,35,52,.16);display:none}
.flyout{top:calc(var(--h-header) + 8px);right:10px;width:290px;padding:18px}
.flyout.open,.plusmenu.open{display:block}
.flyout h4{font-size:16px;margin-bottom:3px}
.flyout p{color:var(--c-muted);font-size:13px;margin:0 0 13px}
.flyout .flyout-klein{font-size:12px;color:var(--c-soft);margin:10px 0 0;text-align:center}
.flyout__wie{display:flex;align-items:center;gap:11px;margin-bottom:13px}
.flyout__wie .pa{width:44px;height:44px;font-size:15px;background:var(--grad)}
.flyout__naam{min-width:0}
.flyout__naam b{display:block;font-family:var(--f-display);font-weight:700;font-size:15px}
.flyout__naam .muted{display:block;font-size:12.5px}
.flyout .btn-ghost{margin-top:8px}
.flyout .flyout-klein a{color:var(--c-blue);font-weight:600}

.plusmenu{top:calc(var(--h-header) + 8px);right:60px;width:250px;padding:8px}
.plusmenu a{display:flex;align-items:center;gap:11px;padding:11px 12px;border-radius:var(--r-sm);font-weight:600;font-size:14px}
.plusmenu a:hover{background:var(--c-bg)}
.plusmenu .pi{width:32px;height:32px;border-radius:9px;display:grid;place-items:center;color:#fff;flex-shrink:0;font-size:15px}

/* 5 · raamwerk --------------------------------------------------------------- */

/*
	Welke kolommen er zijn hangt af van de pagina: het zijmenu staat er alleen
	als er een menu is ingesteld, de rechterkolom alleen waar hij hoort. Het
	raster mag dus geen kolom reserveren die niet gevuld wordt — anders belandt
	de hoofdkolom in de smalle railkolom en is de pagina 248 px breed.

	Daarom stuurt het thema het raster met bodyklassen (fl-has-rail,
	fl-has-aside) in plaats van met een vaste kolomindeling.
*/
.layout{display:block;margin-top:14px}
.content{min-width:0}
.rail,.aside{display:none}

@media (min-width:1000px){
	.fl-has-rail .layout{display:grid;grid-template-columns:var(--w-left) minmax(0,1fr);gap:22px}
	.fl-has-rail .rail{display:block;position:sticky;top:calc(var(--h-header) + 12px);
		height:calc(100dvh - var(--h-header) - 20px);overflow-y:auto;overscroll-behavior:contain;
		padding:4px 6px 30px 0;scrollbar-width:thin;scrollbar-color:#cfd7e1 transparent}
}
@media (min-width:1260px){
	.fl-has-aside .layout{display:grid;grid-template-columns:minmax(0,1fr) var(--w-right);gap:22px}
	.fl-has-rail.fl-has-aside .layout{grid-template-columns:var(--w-left) minmax(0,1fr) var(--w-right)}
	.fl-has-aside .aside{display:block;position:sticky;top:calc(var(--h-header) + 12px);
		height:calc(100dvh - var(--h-header) - 20px);overflow-y:auto;overscroll-behavior:contain;
		padding:4px 2px 30px;scrollbar-width:thin;scrollbar-color:#cfd7e1 transparent}
}
.rail::-webkit-scrollbar,.aside::-webkit-scrollbar{width:6px}
.rail::-webkit-scrollbar-thumb,.aside::-webkit-scrollbar-thumb{background:#cfd7e1;border-radius:6px}

/*
	Pagina's zonder rechterkolom lezen prettiger op een beperkte maat.

	Let op de scoping met .content: WordPress zet zelf de klasse "page" op de
	<body> van elke pagina. Een kale .page-regel legt die breedte dus op het
	hele document, en dan is de site 780 px breed met een hoofdkolom van 142.
*/
.content .page{max-width:780px;margin:0 auto}

/* 6 · linkermenu ------------------------------------------------------------- */

.rail-lbl{font-family:var(--f-display);font-size:11px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
	color:var(--c-soft);padding:4px 12px;margin-top:6px}
.rl{display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:var(--r-sm);font-weight:600;font-size:14px;color:#333e4a;transition:.12s}
.rl:hover{background:#E7EDF4}
.rl.on{background:var(--c-ink);color:#fff}
.rl .ic{width:20px;display:grid;place-items:center;flex-shrink:0;color:inherit;opacity:.85}
.rl .cnt{margin-left:auto;font-size:11px;font-weight:700;background:var(--c-red);color:#fff;border-radius:20px;padding:1px 7px}
.rl .cnt.is-voorbeeld{background:var(--c-soft)}
.rl-sub{padding-left:26px}
.rl-sub .rl{padding:7px 12px;font-size:13.5px;font-weight:500;color:#4a5663}
.railsep{border:none;border-top:1px solid var(--c-line);margin:11px 8px}
.jouwfest{display:flex;align-items:center;gap:9px}
.jouwfest .fdot2{width:22px;height:22px;border-radius:7px;flex-shrink:0;display:grid;place-items:center;
	color:#fff;font-family:var(--f-display);font-weight:800;font-size:9.5px}

/* 7 · rechterkolom ----------------------------------------------------------- */

.sidebox{background:var(--c-card);border:var(--bw-card) solid var(--c-line);border-radius:var(--r-card);
	box-shadow:var(--sh-card);padding:14px 15px;margin-bottom:13px}
.side-h{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px}
.side-h h3{font-size:14.5px;display:flex;align-items:center;gap:7px}
.side-h a{color:var(--c-blue);font-weight:600;font-size:12.5px;flex-shrink:0}
.live{width:8px;height:8px;border-radius:50%;background:var(--c-red);box-shadow:0 0 0 3px rgba(221,51,51,.18);animation:pulse 1.8s infinite}
@keyframes pulse{50%{box-shadow:0 0 0 6px rgba(221,51,51,.05)}}

.newsitem{display:flex;gap:10px;padding:7px 0;border-bottom:1px solid var(--c-line);font-size:13px;line-height:1.42}
.newsitem:last-child{border-bottom:none}
.newsitem .tm{flex-shrink:0;color:var(--c-soft);font-size:11px;font-weight:700;width:38px;line-height:1.3;font-family:var(--f-display)}
.newsitem .tm span{display:block;font-weight:500;opacity:.75}
.newsitem:hover .nt{color:var(--c-blue)}

.ffrow{display:flex;align-items:center;gap:11px;padding:8px 0;border-bottom:1px solid var(--c-line)}
.ffrow:last-child{border-bottom:none}
.ffrow .fl{width:40px;height:40px;border-radius:11px;flex-shrink:0;display:grid;place-items:center;
	color:#fff;font-family:var(--f-display);font-weight:800;font-size:12px;overflow:hidden}
.ffrow .fl img{width:100%;height:100%;object-fit:cover}
.ffrow>span:not([class]){min-width:0;flex:1}
.ffrow .fn{display:block;font-family:var(--f-display);font-weight:700;font-size:13.5px;line-height:1.2}
.ffrow .fd{display:block;color:var(--c-muted);font-size:11.5px;margin-top:1px}
.ffrow .fr{margin-left:auto;flex-shrink:0;font-weight:800;font-size:12px;color:var(--gold);background:var(--gold-bg);
	border-radius:20px;padding:3px 8px;font-family:var(--f-display);white-space:nowrap}

.ftop{display:flex;gap:10px;padding:8px 0;border-bottom:1px solid var(--c-line)}
.ftop:last-child{border-bottom:none}
.ftop .ta{width:34px;height:34px;border-radius:10px;flex-shrink:0;display:grid;place-items:center;color:#fff;
	font-family:var(--f-display);font-weight:700;font-size:11px}
.ftop>span:not([class]){min-width:0;flex:1}
.ftop .topic{display:block;font-weight:700;font-size:13px;font-family:var(--f-display)}
.ftop .msg{color:var(--c-muted);font-size:12.5px;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ftop .tm2{display:block;color:var(--c-soft);font-size:11px;margin-top:2px}

.online{display:flex;flex-wrap:wrap;gap:9px}
.ou{display:flex;align-items:center;gap:6px;background:var(--c-bg);border-radius:30px;padding:4px 10px 4px 4px;font-size:12px;font-weight:600}
.ou .oa{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:9.5px;
	font-family:var(--f-display);font-weight:800;position:relative}
.ou .oa::after{content:"";position:absolute;right:-1px;bottom:-1px;width:8px;height:8px;border-radius:50%;background:#2ECC71;border:2px solid #fff}
/* Leden met een profielfoto op het forum krijgen die hier ook; wie er geen
   heeft houdt de initiaaltegel. Het groene stipje ligt er in beide gevallen
   overheen, dus de foto mag niet buiten de cirkel komen. */
.ou .oa img{width:100%;height:100%;object-fit:cover;border-radius:50%}
a.ou:hover{background:#EBEDF3}
.online-more{color:var(--c-soft);font-size:12px;font-weight:600;align-self:center}
a.online-more:hover{color:var(--c-blue)}

/* 8 · feed ------------------------------------------------------------------- */

.sec-h{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin:var(--sp-section) 4px 12px}
.sec-h:first-child{margin-top:0}
.sec-h h1,.sec-h h2{font-size:var(--fs-h2)}
.sec-h a,.sec-h button{color:var(--c-blue);font-weight:600;font-size:13.5px;flex-shrink:0}

/* welkomstkaart voor nieuwe bezoekers */
.welcome{position:relative;overflow:hidden;border-radius:var(--r-card);background:var(--grad);color:#fff;
	padding:20px 18px;margin-bottom:var(--sp-gap);box-shadow:var(--sh-card-op);display:none}
.welcome.show{display:block}
.welcome .wlogo{position:absolute;right:-20px;top:-20px;width:130px;height:auto;opacity:.16}
.welcome h2{font-size:21px;letter-spacing:-.5px;max-width:30ch}
.welcome p{margin:7px 0 14px;font-size:14.5px;line-height:1.55;opacity:.95;max-width:56ch}
.welcome .wacts{display:flex;gap:9px;flex-wrap:wrap}
.welcome .wjoin{display:inline-flex;align-items:center;background:#fff;color:#B23E50;border-radius:30px;
	padding:10px 18px;font-weight:800;font-size:14px;font-family:var(--f-display);transition:.14s}
.welcome .wjoin:hover{transform:translateY(-1px)}
.welcome .wlater{display:inline-flex;align-items:center;background:rgba(20,16,24,.28);color:#fff;border-radius:30px;
	padding:10px 18px;font-weight:700;font-size:14px;font-family:var(--f-display)}
.welcome .wlater:hover{background:rgba(20,16,24,.4)}
.welcome .wclose{position:absolute;top:10px;right:10px;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;color:#fff;background:rgba(20,16,24,.22)}
.welcome .wclose:hover{background:rgba(20,16,24,.38)}

/* uitgelicht */
.featured{background:var(--c-card);border:var(--bw-card) solid var(--c-line);border-radius:var(--r-card);
	box-shadow:var(--sh-card);overflow:hidden;margin-bottom:var(--sp-gap)}
.featured .band{height:6px;background:var(--wristband)}
.featured .inner{padding:calc(var(--sp-pad) - 2px) var(--sp-pad) var(--sp-pad)}
.featured .eyebrow{display:flex;align-items:center;gap:8px;font-family:var(--f-display);font-weight:800;
	font-size:11.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--c-red);margin-bottom:11px}
.featured .grid{display:grid;gap:12px}
@media (min-width:640px){.featured .grid{grid-template-columns:1fr 1fr}}
.feat-card{position:relative;border-radius:var(--r-sm);overflow:hidden;min-height:210px;display:flex;align-items:flex-end;color:#fff;background:#20222b}
.feat-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .35s}
.feat-card:hover img{transform:scale(1.04)}
.feat-card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,14,24,0) 30%,rgba(10,14,24,.88) 100%)}
.feat-card .body{position:relative;z-index:2;padding:14px}
.feat-card h3{font-size:17.5px;font-weight:800;max-width:26ch;text-wrap:balance}
.feat-card .meta{font-size:11.5px;opacity:.92;margin-top:6px;display:flex;gap:7px;flex-wrap:wrap}

.ontdek{margin-bottom:var(--sp-gap)}
.ontdek .eyebrow{display:block;font-family:var(--f-display);font-weight:800;font-size:11.5px;letter-spacing:.07em;
	text-transform:uppercase;color:var(--c-soft);margin-bottom:11px}

/* categorie-etiket */
.cat{display:inline-flex;align-items:center;gap:6px;font-family:var(--f-display);font-weight:800;
	font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;border-radius:30px;padding:3px 10px}
.cat .d{width:7px;height:7px;border-radius:50%;background:currentColor}
.cat.nieuws{background:#E9F4FB;color:#1478AD}
.cat.preview{background:#F1EDF4;color:#6E5A85}
.cat.review{background:var(--gold-bg);color:#9A7015}
.cat.community{background:#E1F4EE;color:#0F7D60}
.cat.short{background:#EBEEF2;color:#5B6672}
.cat.curated{background:#EDECF8;color:#4B44A0}
.cat.social{background:#FCE7F5;color:#B01E84}
.cat.gerucht{background:#FDECEA;color:#B7302B}
.cat.onimg{background:rgba(255,255,255,.2);color:#fff;border:1px solid rgba(255,255,255,.35);margin-bottom:8px}
/* Content van buiten: het pijltje zegt dat je de site verlaat. */
.cat.extern::after{content:"\2197";font-size:11px;line-height:1;margin-left:-1px;opacity:.75}

/* filterchips */
.chips{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:2px 2px 12px}
.chips::-webkit-scrollbar{display:none}
.chip{flex-shrink:0;background:var(--c-card);border:1px solid var(--c-line);color:#41505c;border-radius:30px;
	padding:8px 15px;font-weight:600;font-size:13px;transition:.14s;display:inline-flex;align-items:center;gap:7px}
.chip:hover{border-color:#c8d2dd}
.chip.on{background:var(--c-ink);color:#fff;border-color:var(--c-ink)}
.chip .cdot{width:8px;height:8px;border-radius:50%}
.chip.festchip.on{background:var(--c-red);border-color:var(--c-red)}

/* festivalkiezer: zoeken plus de vijf met de hoogste prioriteit als suggestie */
.festpick{position:relative;flex-shrink:0}
.festpick .pickmenu{position:absolute;top:calc(100% + 6px);left:0;z-index:50;background:#fff;border:1px solid var(--c-line);
	border-radius:var(--r-sm);box-shadow:0 10px 28px rgba(23,35,52,.14);padding:6px;display:none;min-width:250px;max-width:82vw}
.festpick .pickmenu.open{display:block}
.festpick .pickzoek{width:100%;padding:9px 11px;border:1px solid var(--c-line);border-radius:9px;font:inherit;font-size:13.5px;outline:none;margin-bottom:4px}
.festpick .pickzoek:focus{border-color:var(--c-blue)}
.festpick .picklbl{font-size:10px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--c-soft);padding:7px 11px 4px;font-family:var(--f-display)}
.festpick .picklijst{max-height:280px;overflow-y:auto}
.festpick .picklijst a{display:flex;align-items:center;gap:9px;width:100%;text-align:left;padding:8px 11px;border-radius:9px;font-weight:600;font-size:13.5px}
.festpick .picklijst a:hover,.festpick .picklijst a:focus-visible{background:var(--c-bg)}
.festpick .picklijst .fdot2{width:22px;height:22px;border-radius:7px;flex-shrink:0;display:grid;place-items:center;color:#fff;font-family:var(--f-display);font-weight:800;font-size:9.5px}
.festpick .pickleeg{padding:10px 11px;color:var(--c-soft);font-size:13px}

/* dag- en dagdeelscheiding in de feed */
.daybar{display:inline-flex;align-items:center;gap:10px;margin:14px 0 11px;padding:7px 15px;background:#fff;
	border:1px solid var(--c-line);border-radius:20px;font-family:var(--f-display);font-size:13px;font-weight:800}
.daybar .cnt{font-weight:600;color:var(--c-soft);font-size:11.5px}
.feed>.daybar:first-child{margin-top:0}
.blockbar{display:flex;align-items:center;gap:10px;font-size:10.5px;font-weight:800;letter-spacing:.09em;
	text-transform:uppercase;color:var(--c-soft);margin:4px 2px 10px;font-family:var(--f-display)}
.blockbar::after{content:"";flex:1;height:1px;background:var(--c-line)}

/* feedkaarten */
.post{background:var(--c-card);border:var(--bw-card) solid var(--c-line);border-radius:var(--r-card);
	box-shadow:var(--sh-card);margin-bottom:var(--sp-gap);overflow:hidden;transition:box-shadow .15s,transform .15s}
.post:hover{box-shadow:var(--sh-card-op);transform:translateY(-1px)}
@media (prefers-reduced-motion:reduce){.post:hover{transform:none}}
.post-pad{padding:var(--sp-pad)}
.post-head{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.pa{width:36px;height:36px;border-radius:50%;flex-shrink:0;display:grid;place-items:center;color:#fff;
	font-family:var(--f-display);font-weight:700;font-size:13px;overflow:hidden}
.pa img{width:100%;height:100%;object-fit:cover}
.pmeta{min-width:0;flex:1}
.pmeta .who{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.pmeta .who b{font-family:var(--f-display);font-weight:600;font-size:13.5px}
.role{display:inline-flex;align-items:center;gap:4px;font-size:10px;font-weight:800;
	padding:2px 8px;border-radius:20px;font-family:var(--f-display)}
.role svg{flex-shrink:0;opacity:.85}
.role.redactie{background:#FDEBE9;color:#C43A2E}
.role.lid{background:#EAF4FB;color:#1D74AE}
.role.curated{background:#EDECF8;color:#4B44A0}
.role.social{background:#FCE7F5;color:#B01E84}
.pmeta .sub{display:block;color:var(--c-soft);font-size:var(--fs-meta);margin-top:1px}
.post h3.t{font-size:var(--fs-cardtitle);font-weight:var(--fw-head);text-wrap:balance}
.post h3.t a:hover{color:var(--c-blue)}
.post .excerpt{color:var(--c-muted);font-size:calc(var(--fs-body) - 1px);margin:7px 0 0;
	display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

.post.v-big .media{aspect-ratio:16/10;overflow:hidden;background:var(--c-bg)}
.post.v-big .media img{width:100%;height:100%;object-fit:cover;transition:transform .35s}
.post.v-big:hover .media img{transform:scale(1.03)}

.post.v-row .rowgrid{display:flex;gap:13px;align-items:flex-start}
.post.v-row .thumb{flex-shrink:0;width:104px;aspect-ratio:1;border-radius:var(--r-sm);overflow:hidden;background:var(--c-bg)}
@media (min-width:560px){.post.v-row .thumb{width:150px;aspect-ratio:4/3}}
.post.v-row .thumb img{width:100%;height:100%;object-fit:cover}

.post.v-short{border-left:4px solid var(--cat-short)}
.post.v-short .qt{font-family:var(--f-display);font-weight:600;font-size:15.5px;line-height:1.4}
.post.v-forum{border-left:4px solid var(--cat-community)}
.post.v-curated{border-left:4px solid var(--cat-curated)}
.post.v-social{border-left:4px solid var(--cat-social)}

/* externe content: insluitingen en de deelkaart
   --------------------------------------------------------------------------
   Alles wat niet van ons is krijgt hier zijn eigen vorm. Dat is met opzet
   niet de vorm van een artikelkaart: een bezoeker hoort te zien dat hij naar
   buiten klikt en waarheen, nog voordat hij de titel heeft gelezen. */

/* de speler van het kanaal zelf */
.insluiting{margin-top:12px;border:1px solid var(--c-line);border-radius:var(--r-sm);
	overflow:hidden;background:var(--c-bg)}
.insluiting iframe{display:block;width:100%;border:0}
/* Hoe hoog een Instagram- of TikTok-post is hangt af van de foto en het
   bijschrift en is aan onze kant niet te weten. Het kanaal meet het zelf en
   stuurt het met postMessage door; assets/js/fl27.js zet dan --fl-insluit-h.
   Zonder JavaScript blijft deze waarde staan. */
.insluiting.is-instagram iframe{height:var(--fl-insluit-h,720px)}
.insluiting.is-tiktok iframe{height:var(--fl-insluit-h,760px)}
.insluiting.is-video{position:relative;padding-top:56.25%;background:#000;border-color:transparent}
.insluiting.is-video iframe{position:absolute;inset:0;height:100%}
/* Aanbieders die geen speler maar een blok tekst leveren (X, Facebook)
   houden hun eigen hoogte. */
.insluiting.is-los{background:var(--c-card)}
.insluiting.is-los>*{margin:0 auto;max-width:100%}

/* de regel onder een insluiting: waar klik je heen */
.bronregel{display:inline-flex;align-items:center;gap:7px;margin-top:11px;padding:7px 13px;
	border:1.5px solid var(--c-line);border-radius:var(--r-btn);background:var(--c-card);
	font-family:var(--f-display);font-weight:700;font-size:12.5px;color:var(--deel-kleur,var(--cat-social))}
.bronregel:hover{border-color:var(--deel-kleur,var(--cat-social));background:var(--c-bg)}
.bronregel svg{flex-shrink:0}

/* de deelkaart: één blok dat als geheel de link is, zoals een gedeelde link */
.post.v-link,.post.v-embed{border-left:4px solid var(--deel-kleur)}
.post.v-link{--deel-kleur:var(--cat-curated)}
.post.v-embed{--deel-kleur:var(--cat-social)}
.post.v-link[data-soort="social"]{--deel-kleur:var(--cat-social)}

.deel{display:block;margin-top:2px;border:1px solid var(--c-line);border-radius:var(--r-sm);
	overflow:hidden;background:var(--c-bg);transition:border-color .14s,background .14s}
.deel:hover{border-color:var(--deel-kleur);background:var(--c-card)}

.deel-bron{display:flex;align-items:center;gap:7px;padding:9px 13px;
	border-bottom:1px solid var(--c-line);color:var(--c-muted);
	font-family:var(--f-display);font-weight:700;font-size:11.5px;letter-spacing:.03em}
.deel-bron .bron-icoon{flex-shrink:0;color:var(--deel-kleur)}
.deel-domein{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.deel-pijl{margin-left:auto;flex-shrink:0;color:var(--c-soft)}
.deel:hover .deel-pijl{color:var(--deel-kleur)}

.deel-lijf{display:flex;gap:13px;align-items:flex-start;padding:12px 13px}
.deel-tekst{min-width:0;flex:1}
.deel-tekst .t{font-size:var(--fs-cardtitle);font-weight:var(--fw-head);line-height:var(--lh-head);
	letter-spacing:var(--ls-head);text-wrap:balance}
.deel:hover .deel-tekst .t{color:var(--deel-kleur)}
.deel-tekst .excerpt{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
	margin-top:6px;color:var(--c-muted);font-size:calc(var(--fs-body) - 1.5px);line-height:1.5}
.deel-beeld{flex-shrink:0;width:86px;aspect-ratio:1;border-radius:10px;overflow:hidden;background:var(--c-card)}
@media (min-width:560px){.deel-beeld{width:126px;aspect-ratio:4/3}}
.deel-beeld img{width:100%;height:100%;object-fit:cover}

.deel-uit{display:flex;align-items:center;gap:7px;padding:9px 13px;
	border-top:1px solid var(--c-line);background:var(--c-card);
	font-family:var(--f-display);font-weight:600;font-size:12.5px;color:var(--c-muted)}
.deel-uit b{font-weight:800;color:var(--deel-kleur)}
.deel-uit svg{margin-left:auto;flex-shrink:0;color:var(--deel-kleur)}
.deel:hover .deel-uit{background:var(--c-bg)}

.pfoot{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:12px;padding-top:10px;border-top:1px solid var(--c-line)}
.kudo{display:inline-flex;align-items:center;gap:2px;background:var(--c-bg);border-radius:30px;padding:3px}
.kudo button{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;color:#5c6773}
.kudo button:hover{background:#fff}
.kudo .up.on{color:var(--c-red)}
.kudo .down.on{color:var(--c-blue)}
.kudo .score{font-weight:800;font-size:12.5px;padding:0 6px;font-family:var(--f-display)}
.pact{display:inline-flex;align-items:center;gap:6px;color:var(--c-muted);font-weight:600;font-size:12.5px;border-radius:30px;padding:6px 11px}
.pact:hover{background:var(--c-bg)}
.pfoot .fest{margin-left:auto;font-size:11.5px;font-weight:700;color:var(--c-muted);background:var(--c-bg);
	border-radius:20px;padding:4px 10px;font-family:var(--f-display)}

/* bundelkaart: losse reacties samen */
.post.v-cluster{background:#FBFAFC}
.cluster-title{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:#0F7D60;margin:0 0 12px;font-family:var(--f-display)}
.cluster-list{display:flex;flex-direction:column;gap:11px}
.cluster-item{display:flex;gap:10px;align-items:flex-start}
.cluster-item .pa{width:28px;height:28px;font-size:10px}
.cluster-body{min-width:0;font-size:13.5px;color:var(--c-muted);line-height:1.5}
.cluster-body b{color:var(--c-ink);font-weight:700}
.cluster-meta{font-size:11px;color:var(--c-soft);margin-left:6px;white-space:nowrap}

/* lege staat */
.leeg{background:var(--c-card);border:1px solid var(--c-line);border-radius:var(--r-card);box-shadow:var(--sh-card);
	padding:40px 24px;text-align:center}
.leeg h1,.leeg h2{font-size:19px;margin-bottom:6px}
.leeg p{color:var(--c-muted);font-size:14px;max-width:46ch;margin:0 auto 16px}
.leeg .code{font-family:var(--f-display);font-weight:800;font-size:56px;color:var(--c-line);line-height:1}
.leeg .zoekvak{max-width:420px;margin:0 auto 16px}

/* bladeren */
.blader{margin:22px 0 8px}
.blader .nav-links{display:flex;flex-wrap:wrap;gap:7px;justify-content:center}
.blader .page-numbers{display:inline-grid;place-items:center;min-width:38px;height:38px;padding:0 13px;background:#fff;
	border:1px solid var(--c-line);border-radius:30px;font-weight:700;font-size:13.5px;font-family:var(--f-display);color:#41505c}
.blader .page-numbers:hover{border-color:#c8d2dd}
.blader .page-numbers.current{background:var(--c-ink);border-color:var(--c-ink);color:#fff}
.blader .page-numbers.dots{border-color:transparent;background:none}

/* kruimelpad */
.kruimels{margin-bottom:10px}
.kruimels ol{display:flex;flex-wrap:wrap;align-items:center;gap:5px;font-size:12px;color:var(--c-soft);font-weight:600}
.kruimels li{display:flex;align-items:center;gap:5px}
.kruimels a:hover{color:var(--c-blue)}
.kruimels svg{width:12px;height:12px;opacity:.6}
.kruimels [aria-current]{color:var(--c-muted)}

/* paginakop voor archieven en zoekresultaten */
.paginakop{margin-bottom:14px}
.paginakop h1{font-size:var(--fs-h1);text-wrap:balance}
.paginakop .intro{color:var(--c-muted);font-size:14px;margin-top:6px;max-width:68ch}
.paginakop .zoekvak{margin-top:12px;max-width:460px}

/* 9 · artikel ---------------------------------------------------------------- */

.article{padding:var(--sp-pad);border-radius:var(--r-card)}
.article .heroimg{aspect-ratio:16/8.5;overflow:hidden;border-radius:var(--r-sm);background:var(--c-bg)}
.article .heroimg img{width:100%;height:100%;object-fit:cover}
.article .artmeta{display:flex;align-items:center;gap:8px;margin-top:14px;flex-wrap:wrap;font-size:var(--fs-meta);color:var(--c-muted)}
.article h1{margin:12px 0 8px;text-wrap:balance}
.article .lead{font-size:calc(var(--fs-body) + 2px);color:#38434f;font-weight:500}
.article .bodytext{margin-top:14px}
.article .bodytext p{margin:0 0 14px}
.article .bodytext h2{margin:22px 0 8px;font-size:19px}
.article .bodytext h3{margin:18px 0 6px;font-size:16.5px}
.article .bodytext a{color:var(--c-blue);font-weight:600}
.article .bodytext a:hover{text-decoration:underline}
.article .bodytext ul,.article .bodytext ol{margin:0 0 14px;padding-left:20px}
.article .bodytext ul{list-style:disc}
.article .bodytext ol{list-style:decimal}
.article .bodytext li{margin-bottom:5px}
.article .bodytext blockquote{margin:0 0 14px;padding:2px 0 2px 15px;border-left:4px solid var(--c-line);color:var(--c-muted);font-style:italic}
.article .bodytext img{border-radius:var(--r-sm);margin:0 0 6px}
.article .bodytext figure{margin:0 0 16px}
.article .bodytext figcaption{font-size:12px;color:var(--c-soft);margin-top:5px}
.article .bodytext iframe{max-width:100%;border-radius:var(--r-sm)}
.article .bodytext table{width:100%;border-collapse:collapse;font-size:13.5px;margin:0 0 16px}
.article .bodytext th,.article .bodytext td{border:1px solid var(--c-line);padding:8px 10px;text-align:left}
.article .bodytext th{background:var(--c-bg);font-weight:700}

.tagsrow{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0}
.tag{background:var(--c-bg);border:1px solid var(--c-line);border-radius:30px;padding:5px 13px;font-size:12.5px;font-weight:600;color:#4a5663}
.tag:hover{border-color:var(--c-blue);color:var(--c-blue)}

.authorbox{display:flex;align-items:center;gap:12px;padding:12px 14px}
.authorbox .info{flex:1;min-width:0}
.authorbox .nm{font-family:var(--f-display);font-weight:700;font-size:14.5px;display:block}
.authorbox .bio{color:var(--c-muted);font-size:12.5px;line-height:1.4;display:block}
.authorbox .followbtn{flex-shrink:0;background:var(--c-ink);color:#fff;border-radius:30px;padding:8px 15px;font-weight:700;font-size:13px;font-family:var(--f-display)}

/* festival-infoblok naast een artikel */
.festinfo{overflow:hidden}
.festinfo .top{height:64px;background:var(--grad);position:relative}
.festinfo .top .fl{position:absolute;left:14px;bottom:-20px;width:52px;height:52px;border-radius:14px;border:3px solid #fff;
	display:grid;place-items:center;color:#fff;font-family:var(--f-display);font-weight:800;overflow:hidden}
.festinfo .top .fl img{width:100%;height:100%;object-fit:cover}
.festinfo .bd{padding:26px 15px 14px}
.festinfo .fn{font-family:var(--f-display);font-weight:800;font-size:16.5px}
.festinfo dl{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;margin:10px 0 12px;font-size:13px}
.festinfo dt{color:var(--c-soft);font-weight:600}
.festinfo dd{margin:0;font-weight:600}
.festinfo .fcta{display:block;text-align:center;background:var(--c-blue);color:#fff;border-radius:var(--r-btn);
	padding:10px;font-weight:700;font-family:var(--f-display);font-size:14px}
.festinfo .fcta:hover{filter:brightness(1.05)}

/* 10 · profiel --------------------------------------------------------------- */

.profcard{overflow:hidden}
.profcover{height:110px;background:var(--grad);position:relative}
.profcover .band{position:absolute;left:0;right:0;bottom:0;height:6px;background:var(--wristband)}
.profmain{padding:0 var(--sp-pad) var(--sp-pad)}

/*
	Alleen de avatar steekt over de band heen. Kreeg de hele rij een negatieve
	marge, dan schoof de naam mee omhoog en stond hij half op het verloop.
*/
.profav{width:84px;height:84px;border-radius:24px;border:4px solid #fff;display:grid;place-items:center;color:#fff;
	font-family:var(--f-display);font-weight:800;font-size:26px;box-shadow:0 6px 18px rgba(23,35,52,.14);flex-shrink:0;
	overflow:hidden;margin-top:-42px;position:relative;z-index:2}
.profav img{width:100%;height:100%;object-fit:cover}
.profrow{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-top:10px}
.profid{flex:1;min-width:180px}
.profid h1{font-size:23px;display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.rankpill{font-size:11px;font-weight:800;background:var(--gold-bg);color:var(--gold);border-radius:20px;padding:3px 10px;font-family:var(--f-display)}
.profid .sub{color:var(--c-muted);font-size:13px;margin-top:2px;display:block}
.profacts{display:flex;gap:8px;flex-wrap:wrap;padding-bottom:2px}
.pbtn{display:inline-flex;align-items:center;gap:7px;border-radius:30px;padding:9px 15px;font-weight:700;font-size:13px;font-family:var(--f-display);transition:.14s}
.pbtn.solid{background:var(--grad);color:#fff;box-shadow:0 4px 12px rgba(151,114,159,.35)}
.pbtn.solid:hover{filter:brightness(1.05)}
.pbtn.line{border:1.5px solid var(--c-line);color:#38424d;background:#fff}
.pbtn.line:hover{border-color:#c4cedb}
.pbtn.icon{width:38px;height:38px;padding:0;justify-content:center}

.statrow{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--c-line);border-radius:var(--r-sm);
	overflow:hidden;margin-top:16px;border:1px solid var(--c-line)}
.statrow .st{background:#fff;text-align:center;padding:11px 4px}
.statrow .n{font-family:var(--f-display);font-weight:800;font-size:17px;display:block}
.statrow .l{color:var(--c-soft);font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em}

.progress{margin-top:14px}
.progress .ptop{display:flex;justify-content:space-between;gap:10px;font-size:12px;font-weight:600;color:var(--c-muted);margin-bottom:5px}
.track{height:8px;background:var(--c-bg);border-radius:8px;overflow:hidden}
.track .fill{height:100%;background:var(--grad27);border-radius:8px}

.tabs{display:flex;gap:4px;background:var(--c-card);border:1px solid var(--c-line);border-radius:30px;padding:4px;margin:14px 0;overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab{flex:1;white-space:nowrap;text-align:center;border-radius:30px;padding:8px 14px;font-weight:700;font-size:13px;color:var(--c-muted);font-family:var(--f-display)}
.tab.on{background:var(--c-ink);color:#fff}

.dq{padding:9px 0;border-top:1px solid var(--c-line);font-size:14px}
.dq:first-of-type{border-top:none}
.dq .q{color:var(--c-soft);font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;margin-bottom:3px}
.tagpill{display:inline-block;background:var(--c-bg);border-radius:20px;padding:3px 11px;font-size:12.5px;font-weight:600;margin:2px 4px 2px 0}
.friendrow{display:flex;flex-wrap:wrap;gap:8px}
.friend{text-align:center;width:62px}
.friend .fa2{width:48px;height:48px;border-radius:16px;margin:0 auto 4px;display:grid;place-items:center;color:#fff;font-family:var(--f-display);font-weight:800;font-size:14px}
.friend .fn3{font-size:11px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block}

.festgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:11px}
.fcard2{border:1px solid var(--c-line);border-radius:var(--r-sm);overflow:hidden;background:#fff;transition:.14s}
.fcard2:hover{border-color:#c8d2dd;transform:translateY(-1px)}
.fcard2 .ft{height:56px;display:grid;place-items:center;position:relative;overflow:hidden;background:var(--c-bg)}
.fcard2 .ft img{width:auto;height:100%;max-width:100%;object-fit:contain;padding:8px}
.fcard2 .bd{padding:9px 11px;display:block}
.fcard2 .fn2{display:block;font-family:var(--f-display);font-weight:700;font-size:13px;line-height:1.2}
.fcard2 .fy{display:block;color:var(--c-muted);font-size:11.5px;margin-top:2px}
.chkd{color:#0F7D60;font-weight:700}

.badge2{display:flex;align-items:center;gap:11px;padding:9px 0;border-top:1px solid var(--c-line)}
.badge2:first-of-type{border-top:none}
.badge2 .bi{width:38px;height:38px;border-radius:12px;background:var(--c-bg);display:grid;place-items:center;font-size:18px;flex-shrink:0}
.badge2 .bn{font-weight:700;font-size:13.5px;font-family:var(--f-display)}
.badge2 .bd2{color:var(--c-muted);font-size:12px}

/* 11 · agenda + festival ----------------------------------------------------- */

/* agenda: filterbalk, maandkoppen, festivalrijen */
.agendabalk{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:14px}
.agendabalk .veld{display:flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--c-line);border-radius:30px;padding:8px 14px;min-width:0}
.agendabalk .veld input,.agendabalk .veld select{border:none;background:none;outline:none;font:inherit;font-size:13.5px;min-width:0;color:var(--c-ink)}
.agendabalk .veld svg{width:16px;height:16px;color:var(--c-soft);flex-shrink:0}
.agendabalk .knop{background:var(--c-ink);color:#fff;border-radius:30px;padding:9px 18px;font-weight:700;font-size:13.5px;font-family:var(--f-display)}

.maandkop{display:flex;align-items:center;gap:10px;margin:var(--sp-section) 2px 10px;font-family:var(--f-display);
	font-size:12px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--c-soft)}
.maandkop:first-child{margin-top:0}
.maandkop::after{content:"";flex:1;height:1px;background:var(--c-line)}

.agendarij{display:flex;align-items:center;gap:13px;padding:12px 14px;background:#fff;border:1px solid var(--c-line);
	border-radius:var(--r-card);box-shadow:var(--sh-card);margin-bottom:9px;transition:.14s}
.agendarij:hover{border-color:#c8d2dd;transform:translateY(-1px)}
.agendarij .datum{flex-shrink:0;width:52px;text-align:center;font-family:var(--f-display);line-height:1.05}
.agendarij .datum .d{font-size:19px;font-weight:800;display:block}
.agendarij .datum .m{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--c-soft);display:block;margin-top:2px}
.agendarij .fl{width:44px;height:44px;border-radius:12px;flex-shrink:0;display:grid;place-items:center;color:#fff;
	font-family:var(--f-display);font-weight:800;font-size:13px;overflow:hidden}
.agendarij .fl img{width:100%;height:100%;object-fit:cover}
.agendarij .tk{min-width:0;flex:1}
.agendarij .fn{display:block;font-family:var(--f-display);font-weight:800;font-size:15px;line-height:1.2}
.agendarij .fd{display:block;color:var(--c-muted);font-size:12.5px;margin-top:2px}

/* de line-up in het agenda-overzicht */
.lineuprij{display:flex;align-items:center;gap:8px;margin-top:6px;min-width:0}
.lineuprij__fotos{display:flex;flex-shrink:0}
.lineuprij__fotos img,.lineuprij__leeg{width:22px;height:22px;border-radius:50%;object-fit:cover;border:2px solid #fff;margin-left:-7px;background:var(--c-bg)}
.lineuprij__fotos img:first-child,.lineuprij__leeg:first-child{margin-left:0}
.lineuprij__namen{font-size:12px;color:var(--c-blue);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lineuprij__meer{color:var(--c-soft)}

/* keuzevakje in de filterbalk */
.veld--vink{gap:8px;font-size:13.5px;font-weight:600;cursor:pointer}
.veld--vink input{accent-color:var(--c-red)}
.agendarij .fr{flex-shrink:0;font-weight:800;font-size:12px;color:var(--gold);background:var(--gold-bg);border-radius:20px;padding:4px 9px;font-family:var(--f-display)}
.agendarij .uitverkocht{flex-shrink:0;font-weight:700;font-size:11px;color:#B7302B;background:#FDECEA;border-radius:20px;padding:4px 9px;font-family:var(--f-display);white-space:nowrap}
.agendarij .fl-gratis{color:#0F7D60;background:#E1F4EE}

/* festivalpagina */
.fhero{overflow:hidden;margin-bottom:var(--sp-gap)}
/* De band draagt de headerafbeelding uit festidb; is die er niet, dan blijft
   het huisstijlverloop staan. */
.fhero__band{height:96px;background:var(--grad);background-size:cover;background-position:center;position:relative}
.fhero__band::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,16,28,.05),rgba(20,16,28,.35))}
@media (min-width:640px){.fhero__band{height:150px}}
.fhero__bd{padding:0 var(--sp-pad) var(--sp-pad);position:relative}

/*
	Alleen het logo hoort over de band heen te steken. In de eerste versie
	kreeg de hele rij een negatieve marge en stond de titel dus óp het verloop,
	waar hij onleesbaar werd.
*/
.fhero__logo{width:84px;height:84px;border-radius:22px;border:4px solid #fff;display:grid;place-items:center;
	color:#fff;font-family:var(--f-display);font-weight:800;font-size:24px;overflow:hidden;margin-top:-42px;
	box-shadow:0 6px 18px rgba(23,35,52,.16);position:relative;z-index:2}
.fhero__logo img{width:100%;height:100%;object-fit:cover}

.fhero__rij{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-top:10px}
.fhero__tekst{min-width:0;flex:1}
.fhero h1{font-size:24px;text-wrap:balance;display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.fhero__sub{color:var(--c-muted);font-size:13.5px;margin-top:4px}
.fhero__acts{display:flex;gap:8px;flex-wrap:wrap}
.pbtn.fl-afgelast{border-color:#F0C6C2;color:#B7302B;background:#FDECEA}

/* eigen kanalen van het festival */
.fsoc{display:flex;gap:8px;margin-top:14px}
.fsoc a{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--c-bg);
	border:1px solid var(--c-line);color:#4a5663;transition:.12s}
.fsoc a:hover{border-color:var(--c-blue);color:var(--c-blue)}

/*
	Flexibel in plaats van een vast raster: het aantal feiten verschilt per
	festival, en met vier vaste kolommen blijft er bij zeven feiten een lege
	grijze cel over. Zo vullen de laatste feiten de rij netjes op.
*/
.feitrij{display:flex;flex-wrap:wrap;gap:1px;background:var(--c-line);border:1px solid var(--c-line);
	border-radius:var(--r-sm);overflow:hidden;margin-top:16px}
.feitrij .ft2{background:#fff;padding:11px 12px;flex:1 1 150px;min-width:0}
.feitrij .fl2{color:var(--c-soft);font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;display:block}
.feitrij .fv{font-family:var(--f-display);font-weight:800;font-size:14px;margin-top:2px;display:block}

/* tickets */
.ticketblok{display:flex;flex-wrap:wrap;gap:12px}
.ticket{flex:1 1 240px;display:flex;flex-direction:column;gap:4px;background:var(--c-bg);border:1px solid var(--c-line);
	border-radius:var(--r-sm);padding:14px}
.ticket__soort{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--c-soft);font-family:var(--f-display)}
.ticket__prijs{font-family:var(--f-display);font-weight:800;font-size:20px}
.ticket__wanneer{color:var(--c-muted);font-size:12.5px}
.ticket .pbtn{margin-top:8px;justify-content:center}

/* line-up */
.headliners{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:11px;margin-bottom:14px}
.headliner{text-align:center}
.headliner .hf{width:76px;height:76px;border-radius:22px;margin:0 auto 6px;display:grid;place-items:center;color:#fff;
	font-family:var(--f-display);font-weight:800;font-size:17px;overflow:hidden}
.headliner .hf img{width:100%;height:100%;object-fit:cover}
.headliner .hn{font-size:12.5px;font-weight:700;font-family:var(--f-display);line-height:1.25;display:block}

.lineup__dag+.lineup__dag{margin-top:4px}
.dagkop{font-family:var(--f-display);font-size:12px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
	color:var(--c-soft);margin:16px 0 9px;display:flex;align-items:center;gap:10px}
.dagkop::after{content:"";flex:1;height:1px;background:var(--c-line);order:3}
.dagkop__aantal{order:2;background:var(--c-bg);border-radius:20px;padding:2px 9px;letter-spacing:0;font-size:11px}
.acts{display:flex;flex-wrap:wrap;gap:7px}
.act{display:inline-flex;align-items:center;gap:7px;background:var(--c-bg);border:1px solid var(--c-line);border-radius:30px;
	padding:5px 13px 5px 5px;font-size:13px;font-weight:600;transition:.12s}
.act:hover{border-color:var(--c-blue);color:var(--c-blue)}
.act img{width:24px;height:24px;border-radius:50%;object-fit:cover;flex-shrink:0}
.act.kaal{padding-left:13px}
.act--kop{background:#fff;border-color:#d8c9de;font-weight:700}

/* praktische gidsen en communitylinks */
.gidsen{display:flex;flex-wrap:wrap;gap:8px}
.gids{display:inline-flex;align-items:center;gap:8px;background:var(--c-bg);border:1px solid var(--c-line);
	border-radius:30px;padding:9px 15px;font-size:13.5px;font-weight:600;transition:.12s}
.gids:hover{border-color:var(--c-blue);color:var(--c-blue)}
.gids svg{opacity:.7}

/* poster, plattegrond, video */
.beeldgrid{display:grid;gap:var(--sp-gap);margin-bottom:var(--sp-gap)}
@media (min-width:640px){.beeldgrid{grid-template-columns:1fr 1fr}}
.beeldkaart{margin:0;padding:var(--sp-pad);overflow:hidden}
.beeldkaart img{width:100%;height:auto;border-radius:var(--r-sm)}
.beeldkaart figcaption{margin-top:9px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--c-soft);font-family:var(--f-display)}
.video{position:relative;padding-top:56.25%;border-radius:var(--r-sm);overflow:hidden;background:#000}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* letterindex, artiesten, landen en leden ----------------------------------- */

.letters{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:14px}
.letter{display:grid;place-items:center;min-width:32px;height:32px;padding:0 8px;background:#fff;border:1px solid var(--c-line);
	border-radius:9px;font-family:var(--f-display);font-weight:700;font-size:12.5px;color:#41505c;transition:.12s}
.letter:hover{border-color:#c8d2dd}
.letter.on{background:var(--c-ink);border-color:var(--c-ink);color:#fff}

.actgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:14px}
.actkaart{text-align:center}
.actkaart__foto{width:64px;height:64px;border-radius:20px;margin:0 auto 7px;display:grid;place-items:center;color:#fff;
	font-family:var(--f-display);font-weight:800;font-size:15px;overflow:hidden}
.actkaart__foto img{width:100%;height:100%;object-fit:cover}
.actkaart__naam{display:block;font-size:12.5px;font-weight:700;font-family:var(--f-display);line-height:1.25}
.actkaart:hover .actkaart__naam{color:var(--c-blue)}

.landen{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:9px}
.land{display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--c-bg);border:1px solid var(--c-line);
	border-radius:var(--r-sm);padding:11px 14px;transition:.12s}
.land:hover{border-color:var(--c-blue)}
.land__naam{font-family:var(--f-display);font-weight:700;font-size:13.5px;min-width:0}
.land__sub{display:block;font-weight:500;font-size:11.5px;color:var(--c-soft)}
.land__aantal{font-size:12px;font-weight:700;color:var(--c-soft);background:#fff;border-radius:20px;padding:2px 9px}

.ledengrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:14px}
.ledenkaart{text-align:center}
.ledenkaart__foto{width:56px;height:56px;border-radius:50%;margin:0 auto 7px;display:grid;place-items:center;color:#fff;
	font-family:var(--f-display);font-weight:800;font-size:14px;overflow:hidden}
.ledenkaart__foto img{width:100%;height:100%;object-fit:cover}
.ledenkaart__naam{display:block;font-size:13px;font-weight:700;font-family:var(--f-display)}
.ledenkaart__sub{display:block;font-size:11.5px;color:var(--c-soft);margin-top:2px}

/* inhoudsopgave op de informatiepagina's */
.inhoudsopgave{background:var(--c-bg);border:1px solid var(--c-line);border-radius:var(--r-sm);padding:14px 16px;margin:16px 0}
.inhoudsopgave .eyebrow{display:block;font-family:var(--f-display);font-weight:800;font-size:11px;letter-spacing:.08em;
	text-transform:uppercase;color:var(--c-soft);margin-bottom:9px}
.inhoudsopgave ol{list-style:none;counter-reset:toc;display:flex;flex-direction:column;gap:5px}
.inhoudsopgave li{counter-increment:toc;font-size:13.5px;font-weight:600}
.inhoudsopgave li::before{content:counter(toc) ". ";color:var(--c-soft);font-weight:700}
.inhoudsopgave a:hover{color:var(--c-blue);text-decoration:underline}

/* 12 · formulieren, inloggen, reacties --------------------------------------- */

.field{width:100%;padding:11px 13px;border:1px solid var(--c-line);border-radius:var(--r-sm);font:inherit;font-size:14px;margin-bottom:9px;outline:none;background:#fff}
.field:focus{border-color:var(--c-blue)}
.btn-primary{display:block;width:100%;background:var(--grad);color:#fff;border-radius:var(--r-btn);padding:11px;
	font-weight:700;font-family:var(--f-display);font-size:14.5px;text-align:center}
.btn-primary:hover{filter:brightness(1.05)}
.btn-ghost{display:block;width:100%;background:var(--c-bg);color:#38424d;border-radius:var(--r-btn);padding:11px;
	font-weight:600;font-size:14px;margin-top:8px;text-align:center}
.btn-ghost:hover{background:#EBEDF3}

/* WP-loginformulier in de flyout en op de inlogpagina */
.fl-login p{margin:0}
.fl-login label{display:block;font-size:12px;font-weight:700;color:var(--c-muted);margin-bottom:4px}
.fl-login input[type=text],.fl-login input[type=password],.fl-login input[type=email]{width:100%;padding:11px 13px;
	border:1px solid var(--c-line);border-radius:var(--r-sm);font:inherit;font-size:14px;margin-bottom:9px;outline:none;background:#fff}
.fl-login input:focus{border-color:var(--c-blue)}
.fl-login .login-remember{font-size:12.5px;color:var(--c-muted);margin-bottom:9px;display:flex;align-items:center;gap:7px}
.fl-login .login-remember label{margin:0;font-weight:600;color:var(--c-muted);display:inline}
.fl-login input[type=submit]{display:block;width:100%;background:var(--grad);color:#fff;border-radius:var(--r-btn);
	padding:11px;font-weight:700;font-family:var(--f-display);font-size:14.5px;text-align:center;border:none;cursor:pointer}
.fl-login input[type=submit]:hover{filter:brightness(1.05)}

.comment{display:flex;gap:11px;padding:12px 0;border-top:1px solid var(--c-line)}
.comment:first-child{border-top:none}
.comment .cb{flex:1;min-width:0}
.comment .ch{display:flex;align-items:center;gap:8px;font-size:13px;flex-wrap:wrap}
.comment .ch b{font-family:var(--f-display)}
.comment .ct{font-size:14px;margin-top:3px;display:block}

/* 13 · footer, balk onderaan, uitschuifpaneel -------------------------------- */

/*
	De footer draagt de huisstijlgradient, zoals op de oude site. Er ligt een
	donkere sluier overheen: zonder dat haalt witte tekst op het rode en blauwe
	deel geen leesbaar contrast.
*/
.sitefoot{position:relative;margin-top:44px;color:#D9D5E2;padding:30px 0 90px;
	background:linear-gradient(150deg,#DC2E2E 0%,#B84A86 45%,#28A0DC 100%)}
.sitefoot::before{content:"";position:absolute;inset:0;background:linear-gradient(160deg,rgba(22,18,30,.70),rgba(22,18,30,.86));pointer-events:none}
.sitefoot::after{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:var(--wristband)}
.sitefoot .wrap{position:relative;z-index:1}
@media (min-width:1000px){.sitefoot{padding-bottom:34px}}
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:22px}
@media (min-width:760px){.fgrid{grid-template-columns:repeat(4,1fr) 1.3fr}}
.fgrid h5{color:#fff;font-size:13px;margin-bottom:9px}
.fgrid a{display:block;font-size:13px;padding:3px 0;opacity:.85}
.fgrid a:hover{opacity:1;color:#fff}
.footbrand{display:flex;align-items:center;gap:9px;font-family:var(--f-display);font-weight:700;font-size:13px;color:#fff}
.footbrand .logo{width:60px;height:auto;flex-shrink:0}
.footsoc{display:flex;gap:8px;margin-top:10px}
.footsoc a{width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.09);display:grid;place-items:center;padding:0;opacity:1}
.footsoc a:hover{background:rgba(255,255,255,.18)}
.footsoc svg{width:17px;height:17px}

.botnav{position:fixed;left:0;right:0;bottom:0;z-index:80;background:rgba(255,255,255,.94);
	-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-top:1px solid var(--c-line);display:block}
@media (min-width:1000px){.botnav{display:none}}
.botnav-inner{display:grid;grid-template-columns:repeat(5,1fr);max-width:520px;margin:0 auto;padding:6px 8px calc(6px + env(safe-area-inset-bottom))}
.bn{display:flex;flex-direction:column;align-items:center;gap:3px;font-size:10.5px;font-weight:700;color:var(--c-soft);
	padding:5px 0;border-radius:12px;font-family:var(--f-display)}
.bn svg{width:21px;height:21px}
.bn.on{color:var(--c-ink)}
.bn-plus{display:grid;place-items:center}
.bn-plus .pl{width:46px;height:46px;border-radius:50%;background:var(--grad);color:#fff;display:grid;place-items:center;
	box-shadow:0 6px 16px rgba(151,114,159,.45);margin-top:-16px;border:3px solid #fff}

.scrim{position:fixed;inset:0;background:rgba(15,22,32,.44);z-index:95;opacity:0;pointer-events:none;transition:.2s}
.scrim.open{opacity:1;pointer-events:auto}
.drawer{position:fixed;top:0;bottom:0;left:0;width:290px;max-width:86vw;background:#fff;z-index:96;
	transform:translateX(-102%);transition:transform .24s;overflow-y:auto;padding:14px 12px 30px;box-shadow:12px 0 40px rgba(15,22,32,.18)}
.drawer.open{transform:none}
.dhead{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}

/* 14 · WordPress-inhoud ------------------------------------------------------ */

.alignleft{float:left;margin:0 18px 12px 0}
.alignright{float:right;margin:0 0 12px 18px}
.aligncenter{margin-left:auto;margin-right:auto}
.wp-caption{max-width:100%}
.wp-caption-text{font-size:12px;color:var(--c-soft);margin-top:5px}
.screen-reader-text{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.wp-block-embed__wrapper{position:relative}
.artikel__paginas{margin:16px 0;font-size:13.5px;font-weight:600;color:var(--c-muted);display:flex;gap:8px;flex-wrap:wrap}
.artikel__paginas a{color:var(--c-blue)}