/* Steve & Raff — eigen artdirection.
*
* Vertrekpunt was hun eigen materiaal, niet een moodboard:
* - De grond is het bijna-zwart dat 90% van hun livefoto vult (#08090a), en
* het is ook de ondergrond van hun eigen logo.
* - Het accent is hún rood. Gemeten uit het logobestand: #c81c1f. Voor tekst
* op bijna-zwart is dat te donker (2,4:1), dus in de site staat een iets
* opgehelderde versie van dezelfde tint; het logo zelf blijft onaangeroerd.
* - 08/09/2026: eerst stond hier een groen accent, gemeten uit het laserlicht
* op hun livefoto. Zodra hun echte logo binnenkwam bleek hun huisstijl rood
* te zijn — dan wint het merk van een toevallige kleur uit één foto.
*
* Bewust NIET: verlopen, een pagina vol identieke afgeronde kaartjes, neon
* overal, of animaties die de aandacht van de muziek wegtrekken.
*/
:root {
--grond: #08090a;
--grond-op: #0e1012; /* iets lichter vlak, voor afwisseling */
--lijn: #1d2124;
--lijn-fel: #2b3135;
--inkt: #f2f4f3;
--inkt-zacht: #a39a9a; /* grijs met een warme ondertoon, geen neutraal grijs */
/* 09/09/2026 — was #626b68. Dat haalde op zwart maar net 4,3:1 en las
onrustig bij plaatsnamen, tijden en beschrijvingen. Iets lichter, maar
nog duidelijk ondergeschikt aan de witte koppen. */
--inkt-flauw: #7c8481;
--accent: #f0262c; /* opgehelderd uit het logo-rood #c81c1f */
--accent-diep: #c81c1f; /* het rood zoals in hun logo */
--rood: #ff8a52; /* foutmelding, mag niet op het accent lijken */
--breed: 1240px;
--rand: clamp(20px, 5vw, 64px);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
body {
margin: 0;
background: var(--grond);
color: var(--inkt);
font-family: "Barlow", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
font-size: 17px;
line-height: 1.65;
-webkit-font-smoothing: antialiased;
overflow-x: hidden; /* nooit horizontaal schuiven */
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 3px;
}
.omhulsel { max-width: var(--breed); margin: 0 auto; padding: 0 var(--rand); }
/* ── Logo ──────────────────────────────────────────────────────────
08/09/2026 — hier stond een typografische zetting omdat het echte logo niet
te vinden was. Jimmy leverde het aan; het staat nu vrijgemaakt met
transparantie in static/img. Niets nagetekend, gewoon hun eigen merk. */
.merk { display: block; line-height: 0; }
.merk img { width: 100%; height: auto; }
/* ── Kop ───────────────────────────────────────────────────────────── */
.kop {
position: fixed; inset: 0 0 auto 0; z-index: 50;
display: flex; align-items: center; gap: 24px;
padding: 14px var(--rand);
background: rgba(8, 9, 10, .72);
backdrop-filter: blur(14px);
border-bottom: 1px solid transparent;
transition: border-color .3s, background .3s;
}
.kop.vast { border-bottom-color: var(--lijn); background: rgba(8, 9, 10, .93); }
.kop .merk { width: 132px; flex: none; }
.kop nav { margin-left: auto; display: flex; gap: 26px; align-items: center; }
.kop nav a {
font-family: "Barlow Condensed", sans-serif;
font-size: 15px; font-weight: 600; text-transform: uppercase;
letter-spacing: .12em; color: var(--inkt-zacht);
padding: 6px 0; position: relative;
}
.kop nav a::after {
content: ""; position: absolute; left: 0; right: 100%; bottom: 0;
height: 1px; background: var(--accent); transition: right .28s ease;
}
.kop nav a:hover, .kop nav a[aria-current] { color: var(--inkt); }
.kop nav a:hover::after, .kop nav a[aria-current]::after { right: 0; }
.knop-menu { display: none; margin-left: auto; background: none; border: 0;
color: var(--inkt); padding: 8px; cursor: pointer; }
/* ── Knoppen ───────────────────────────────────────────────────────── */
.knop {
display: inline-flex; align-items: center; gap: 10px;
font-family: "Barlow Condensed", sans-serif;
font-size: 15px; font-weight: 700; text-transform: uppercase;
letter-spacing: .12em;
padding: 15px 30px; border: 1px solid var(--lijn-fel);
color: var(--inkt); background: transparent; cursor: pointer;
transition: border-color .2s, color .2s, background .2s;
}
.knop:hover { border-color: var(--accent); color: var(--accent); }
.knop svg { transition: transform .25s ease; }
.knop:hover svg { transform: translateX(4px); }
.knop.vol {
background: var(--accent); border-color: var(--accent); color: #04120a;
}
.knop.vol:hover { background: #fff; border-color: #fff; color: #04120a; }
/* ── Openingsbeeld ──────────────────────────────────────────────────
08/09/2026 — nagebouwd naar het voorbeeld dat Jimmy aanleverde. Drie
dingen waren anders en die bepaalden het hele gevoel:
1. De hero was te laag, waardoor de persfoto klein oogde. De foto is 16:9,
dus krijgt de hero diezelfde verhouding: dan valt het beeld precies in
het kader en wordt er niets weggesneden.
2. Er stond een tekstblok tussen het logo en de knop. In het voorbeeld
staat er alleen eyebrow / logo / knop — dat is wat het rustig maakt.
De intro staat nu onder het beeld, waar hij niet in de weg zit.
3. De sluier links liep te ver door naar rechts en pakte de belichting op
hun gezichten mee. Hij is nu smaller en dieper: zwart waar de tekst
staat, en vanaf 55% helemaal weg. */
.hero {
position: relative; display: flex; align-items: stretch; overflow: hidden;
aspect-ratio: 16 / 9; max-height: 100vh; min-height: 560px;
}
.hero-beeld { position: absolute; inset: 0; }
.hero-beeld picture { display: block; width: 100%; height: 100%; }
.hero-beeld img,
.hero-beeld video { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-beeld::after {
content: ""; position: absolute; inset: 0;
background:
linear-gradient(to right, rgba(8,9,10,.92) 0%, rgba(8,9,10,.78) 24%,
rgba(8,9,10,.3) 42%, transparent 56%),
linear-gradient(to top, rgba(8,9,10,.75) 0%, transparent 22%);
}
.hero-inhoud { position: relative; width: 100%; }
/* 08/09/2026 — het blok stond verticaal gecentreerd, waardoor het logo laag
in het beeld hing en de intro onder de foto belandde. Nu staat de kop
hoog in het zwarte vlak en zakt de intro naar de onderkant daarvan:
het zwart draagt dan de hele tekst en de foto blijft vrij. */
.hero-kolom {
height: 100%; display: flex; flex-direction: column;
justify-content: space-between;
padding-top: clamp(96px, 15vh, 168px);
padding-bottom: clamp(44px, 8vh, 88px);
}
.hero-kolom .hero-intro {
max-width: 30ch; color: var(--inkt-zacht); margin: 0;
font-size: clamp(15px, 1.15vw, 17px); line-height: 1.62;
}
/* Eén breedte voor het woordmerk én voor de regel erboven, zodat die twee
altijd op elkaar uitgelijnd blijven. */
.hero { --merk-breedte: min(400px, 27%); }
.hero .merk { width: var(--merk-breedte); margin: 0; }
.hero-tag {
font-family: "Barlow Condensed", sans-serif;
text-transform: uppercase; letter-spacing: .34em; font-size: 13px;
color: var(--inkt); margin: 0 0 24px; opacity: .95;
/* Gecentreerd bóven het logo, niet links tegen de rand. De laatste letter
draagt de letterspatiëring mee; zonder die correctie oogt de regel een
paar pixels naar links geschoven. */
width: var(--merk-breedte); text-align: center;
text-indent: .34em;
}
.hero-tag i { color: var(--accent); font-style: normal; margin: 0 4px; }
.hero-acties { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 34px; }
.merk-fx { display: none; } /* alleen onder 1100px zichtbaar, zie onderaan */
/* Dunne rail onderaan het openingsbeeld — echoot de lijn van hun monogram. */
.hero-rail {
position: absolute; left: var(--rand); right: var(--rand); bottom: 0;
height: 1px; background: var(--lijn);
}
.hero-rail::before {
content: ""; position: absolute; left: 0; top: 0; height: 1px; width: 84px;
background: var(--accent);
}
/* Op de homepage draagt het grote woordmerk in het beeld het merk al; een
tweede, klein logo in de balk erboven is dubbelop. Het menu schuift dan
naar links, precies zoals in het voorbeeld. */
.kop.kaal .merk { display: none; }
/* Zolang je bovenaan staat zweeft het menu vrij over de foto, zonder balk —
anders ligt er een donkere strook over de bovenrand van het beeld. */
.kop.kaal:not(.vast) { background: transparent; backdrop-filter: none; }
.kop.kaal nav { margin-left: 0; }
/* ── Sectie ────────────────────────────────────────────────────────── */
.sectie { padding: clamp(64px, 10vw, 130px) 0; }
.sectie.op { background: var(--grond-op); }
.sectie-kop { display: flex; align-items: baseline; gap: 18px; margin-bottom: 44px;
flex-wrap: wrap; }
.sectie-nr {
font-family: "Barlow Condensed", sans-serif; font-size: 13px;
letter-spacing: .2em; color: var(--accent); text-transform: uppercase;
}
.sectie-kop h1, .sectie-kop h2 {
font-family: "Archivo", sans-serif; font-weight: 800; font-stretch: 112%;
text-transform: uppercase; letter-spacing: -.015em;
font-size: clamp(30px, 5vw, 54px); margin: 0; line-height: 1;
}
/* 09/09/2026 — deze link stond in grijs en viel daardoor weg: je zag niet dat
er achter de eerste tien nog meer data zaten. Nu in het accent, met de
streep eronder in dezelfde kleur. Het aantal staat in de tekst zelf
("Alle 15 dates"), want dát is het argument. */
.sectie-kop .meer { margin-left: auto; font-family: "Barlow Condensed", sans-serif;
text-transform: uppercase; letter-spacing: .12em; font-size: 14px; font-weight: 700;
color: var(--accent); border-bottom: 1px solid var(--accent); padding-bottom: 3px;
transition: color .2s, border-color .2s; }
.sectie-kop .meer:hover { color: var(--inkt); border-color: var(--inkt); }
/* ── Releases: een raster van hoezen ───────────────────────────────
08/09/2026 — dit was een lijst met één brede rij per release. Bij tien
releases (en er komen er bij) betekende dat scrollen langs enorme hoezen
die elk een halve schermhoogte innamen. Een raster laat je in één blik
zien wat er is; de hoes is toch waar iemand op herkent. */
.rel-lijst { display: grid; gap: clamp(20px, 2.6vw, 34px) clamp(16px, 2vw, 26px);
grid-template-columns: repeat(4, minmax(0, 1fr)); }
.rel { min-width: 0; }
.rel-hoes { position: relative; aspect-ratio: 1; background: var(--lijn);
overflow: hidden; border: 1px solid var(--lijn-fel); }
.rel-hoes img { width: 100%; height: 100%; object-fit: cover;
transition: transform .4s ease, filter .3s ease; }
.rel:hover .rel-hoes img { transform: scale(1.04); filter: brightness(.72); }
.rel-hoes.leeg { display: grid; place-items: center; color: var(--inkt-flauw);
font-family: "Barlow Condensed", sans-serif; letter-spacing: .18em;
font-size: 12px; text-transform: uppercase; }
/* De luisterknop ligt op de hoes en verschijnt bij hover. Op een aanraak-
scherm bestaat hover niet, dus daar staat hij altijd zichtbaar — zie de
telefoon-regels onderaan. */
.rel-luister {
position: absolute; inset: auto 10px 10px 10px; text-align: center;
font-family: "Barlow Condensed", sans-serif; font-size: 13px; font-weight: 700;
text-transform: uppercase; letter-spacing: .14em;
padding: 10px; background: var(--accent); color: #fff;
opacity: 0; transform: translateY(6px); transition: opacity .25s, transform .25s;
}
.rel:hover .rel-luister, .rel-luister:focus-visible { opacity: 1; transform: none; }
.rel h3 { font-family: "Archivo", sans-serif; font-weight: 700; font-stretch: 108%;
font-size: clamp(15px, 1.35vw, 19px); margin: 14px 0 5px; line-height: 1.2;
text-transform: uppercase; letter-spacing: -.005em;
overflow-wrap: anywhere; }
.rel-meta { font-family: "Barlow Condensed", sans-serif; text-transform: uppercase;
letter-spacing: .12em; font-size: 12px; color: var(--inkt-flauw);
display: flex; gap: 8px; flex-wrap: wrap; }
.rel-meta .punt { color: var(--lijn-fel); }
/* Titel en bijschrift op een vaste hoogte, anders staan de tegels in een
rij niet op één lijn en oogt het raster rommelig. */
.rel h3, .rel p.toel {
display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden;
}
.rel h3 { -webkit-line-clamp: 2; min-height: 2.4em; }
.rel p.toel { color: var(--inkt-zacht); margin: 8px 0 0; font-size: 14px;
-webkit-line-clamp: 2; }
/* ── Agenda ────────────────────────────────────────────────────────── */
.agenda { display: flex; flex-direction: column; }
/* 09/09/2026 — deze regels waren zo hoog dat er maar drie of vier data op een
scherm pasten. Met veertien boekingen zag je dus niet dat ze druk bezet
zijn, en dat is nu net het argument. De datum staat nu op één regel naast
de naam in plaats van als blok eronder; dat scheelt bijna de helft in
hoogte zonder dat er iets wegvalt. */
.gig {
display: grid; grid-template-columns: 92px minmax(0, 1fr) var(--actie-breedte);
gap: 20px;
align-items: start; padding: 15px 0; border-top: 1px solid var(--lijn);
position: relative;
}
/* Vaste breedte voor de actiekolom: daardoor staan alle ticketknoppen onder
elkaar, ook als het ene optreden een lange line-up heeft en het andere
alleen een plaatsnaam. */
.agenda { --actie-breedte: 178px; }
.gig:last-child { border-bottom: 1px solid var(--lijn); }
.gig-datum {
display: flex; align-items: baseline; gap: 7px;
font-family: "Archivo", sans-serif; font-weight: 800; line-height: 1;
}
.gig-datum .dag { font-size: 22px; }
.gig-datum .mnd { font-family: "Barlow Condensed", sans-serif; font-weight: 600;
font-size: 12px; letter-spacing: .16em; text-transform: uppercase;
color: var(--accent); }
.gig-info { min-width: 0; }
.gig h3 { margin: 0; font-size: 17px; font-weight: 600; line-height: 1.3; }
.gig .plek { color: var(--inkt-zacht); font-size: 14px; margin-top: 2px; }
/* De line-up onder een optreden. Op desktop precies zoals hij er altijd al
uitzag; alleen op tablet en telefoon wordt hij kleiner en doffer. */
.gig-extra { color: var(--inkt-zacht); font-size: 14px; margin-top: 4px; }
/* ── Actiekolom: status boven, knop eronder ───────────────────────── */
.gig-actie { display: flex; flex-direction: column; align-items: flex-start; gap: 7px; }
.gig-status {
font-family: "Barlow Condensed", sans-serif; font-weight: 700;
text-transform: uppercase; letter-spacing: .13em; font-size: 11px;
line-height: 1.2;
}
.gig-status.ja { color: var(--accent); }
.gig-status.nee { color: var(--inkt-flauw); }
.gig-status.prive { color: #8a6a6c; }
.knop.tickets {
height: 38px; padding: 0 18px; font-size: 11.5px; letter-spacing: .14em;
border-color: rgba(214, 32, 40, .62);
}
.knop.tickets::after { content: "\2192"; margin-left: 9px; font-size: 13px;
transition: transform .2s; }
.knop.tickets:hover { border-color: var(--accent); color: var(--accent);
box-shadow: 0 0 0 1px rgba(240, 38, 44, .16); }
.knop.tickets:hover::after { transform: translateX(3px); }
/* Uitgeschakeld: dof, geen pijl, geen hover, en het is geen link. */
.knop.tickets.uit {
border-color: var(--lijn-fel); color: var(--inkt-flauw);
background: rgba(255, 255, 255, .02); cursor: default;
}
.knop.tickets.uit::after { content: none; }
.knop.tickets.uit:hover { border-color: var(--lijn-fel); color: var(--inkt-flauw);
box-shadow: none; }
.gig.oud { opacity: .45; }
.gig.oud .gig-datum .mnd { color: var(--inkt-flauw); }
/* ── Livesets: pas laden na een klik ───────────────────────────────── */
/* 09/09/2026 — `minmax(320px, ...)` eiste letterlijk 320 pixels, dus op een
scherm van 320px (iPhone SE) stak de tegel buiten de rand en kreeg de hele
pagina een horizontale schuifbalk. `min(320px, 100%)` laat hem krimpen. */
/* ── Live sets ──────────────────────────────────────────────────────
09/09/2026 — de tegels waren 16:9 met een vierkante hoes erin, dus stonden
er brede lege banden naast elke hoes en oogde het kader half leeg. De
hoezen ZIJN vierkant; het kader nu ook. Zelfde ritme als het releaseraster:
beeld boven, tekst eronder, geen omkadering eromheen. */
/* 09/09/2026 — met auto-fill vulde het raster de hele contentbreedte, dus
stonden er twee hoezen links met een half scherm leegte rechts. Met auto-fit
én een maximum van 400px per kaart blijft een hoes scherp (de bron is 900px)
en staat de rij gecentreerd zodra dat maximum bereikt is. Komen er sets bij,
dan vult de rij vanzelf verder. */
.sets { display: grid; gap: clamp(22px, 2.6vw, 36px) clamp(18px, 2vw, 30px);
grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
justify-content: center; margin-inline: auto; }
/* Bij twee sets vulde het raster de hele contentbreedte: twee hoezen links,
een half scherm leegte rechts. Het raster wordt hier begrensd tot twee
kolommen van hoogstens 400px (de bron is 900px, dus dat blijft scherp) en
staat gecentreerd. Vanaf drie sets vervalt de grens vanzelf en vult de rij
de volle breedte. Een vaste maximumbreedte in de track zelf werkt niet:
auto-fit telt dan met 400px en zet er op een iPad maar één naast elkaar. */
.sets:not(:has(.set:nth-child(3))) { max-width: 830px; }
.set { border: 0; background: none; min-width: 0; }
/* 09/09/2026 — de hoezen hebben zelf een lichtgrijze ondergrond en stonden
daardoor als witte vakken op het zwart. De tegel neemt de randen nu op: een
donkere vignettering vanaf de rand naar binnen, plus een verloop onderaan
waar de titel begint. Bij hover trekt dat op, zodat de hoes zelf weer voluit
te zien is. */
.set-frame { position: relative; aspect-ratio: 1; background: var(--grond-op);
border: 1px solid var(--lijn-fel); cursor: pointer; overflow: hidden; }
.set-frame img { width: 100%; height: 100%; object-fit: cover; opacity: .74;
transition: opacity .35s ease, transform .5s ease; display: block; }
.set-frame::before {
content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
background:
radial-gradient(78% 78% at 50% 44%, transparent 40%, rgba(8, 9, 10, .58) 100%),
linear-gradient(to top, rgba(8, 9, 10, .72) 0%, rgba(8, 9, 10, .18) 22%,
transparent 46%);
transition: opacity .35s ease;
}
.set-frame:hover img { opacity: .94; transform: scale(1.03); }
.set-frame:hover::before { opacity: .55; }
.set-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.speel {
position: absolute; inset: 0; z-index: 2; display: grid; place-items: center;
pointer-events: none;
}
.speel span {
width: 64px; height: 64px; border: 1px solid var(--accent);
border-radius: 50%; display: grid; place-items: center;
background: rgba(8,9,10,.55); backdrop-filter: blur(4px);
transition: background .25s, transform .25s;
}
.set-frame:hover .speel span { background: var(--accent); transform: scale(1.06); }
.set-frame:hover .speel svg { fill: #04120a; }
.speel svg { fill: var(--accent); margin-left: 3px; transition: fill .25s; }
.set-tekst { padding: 14px 0 0; }
.set-tekst h3 { margin: 0 0 4px; font-size: 17px; font-weight: 600; line-height: 1.3; }
.set-tekst p { margin: 0; color: var(--inkt-zacht); font-size: 14px;
line-height: 1.55; }
/* ── Foto's: afwisselend raster, geen gelijke blokjes ──────────────── */
/* ── Galerij ────────────────────────────────────────────────────────
09/09/2026 — de tegels sneden elke foto bij met object-fit:cover en drie
verschillende beeldverhoudingen. Bij een staand portret of een uitsnede op
wit betekende dat een half hoofd. Nu past de hele foto in de tegel en vult
de donkere grond de rest op — niets wordt nog afgekapt. */
.galerij { display: grid; gap: 14px;
grid-template-columns: repeat(auto-fill, minmax(min(270px, 100%), 1fr)); }
.galerij a { overflow: hidden; background: var(--grond); position: relative;
border: 1px solid var(--lijn); aspect-ratio: 4/3; }
.galerij img { width: 100%; height: 100%; object-fit: contain;
transition: transform .5s ease; }
.galerij a:hover img { transform: scale(1.04); }
/* ── Boekingsformulier ─────────────────────────────────────────────── */
.form { display: grid; gap: 18px; grid-template-columns: 1fr 1fr; max-width: 760px; }
.veld { display: flex; flex-direction: column; gap: 7px; }
.veld.breed { grid-column: 1 / -1; }
.veld label { font-family: "Barlow Condensed", sans-serif; text-transform: uppercase;
letter-spacing: .14em; font-size: 13px; color: var(--inkt-zacht); }
.veld input, .veld textarea, .veld select {
background: var(--grond-op); border: 1px solid var(--lijn-fel);
color: var(--inkt); padding: 14px 16px; font: inherit; font-size: 16px;
border-radius: 0; min-height: 52px;
}
.veld textarea { min-height: 150px; resize: vertical; }
.veld input:focus, .veld textarea:focus { outline: none; border-color: var(--accent); }
.melding { border: 1px solid var(--accent); border-left-width: 3px;
padding: 16px 20px; margin-bottom: 26px; background: rgba(1,244,117,.05); }
.melding.fout { border-color: var(--rood); background: rgba(255,90,82,.06); }
/* ── Voet ──────────────────────────────────────────────────────────── */
.voet { border-top: 1px solid var(--lijn); padding: 56px 0 44px;
color: var(--inkt-flauw); font-size: 14px; }
.voet-boven { display: flex; gap: 40px; flex-wrap: wrap; align-items: flex-start;
margin-bottom: 40px; }
.voet .merk { width: 190px; }
.voet-links { margin-left: auto; display: flex; gap: 26px; flex-wrap: wrap; }
.voet-links a { font-family: "Barlow Condensed", sans-serif; text-transform: uppercase;
letter-spacing: .14em; font-size: 14px; color: var(--inkt-zacht); }
.voet-links a:hover { color: var(--accent); }
/* ── Losse hulpjes ─────────────────────────────────────────────────── */
.leeg { color: var(--inkt-flauw); border: 1px dashed var(--lijn-fel);
padding: 34px; text-align: center; }
.lint { font-family: "Barlow Condensed", sans-serif; text-transform: uppercase;
letter-spacing: .16em; font-size: 12px; color: var(--accent);
border: 1px solid var(--accent); padding: 4px 10px; display: inline-block; }
/* 08/09/2026 — hier stond een opkomst-effect dat elk blok op opacity:0 zette
tot je eroverheen scrolde. Op de eerste schermafdruk stond de halve pagina
dus leeg, en dat is precies wat iemand ziet die de link deelt of een
voorbeeldweergave maakt. Alles staat nu gewoon meteen zichtbaar; de rust in
deze site komt van de typografie en de witruimte, niet van beweging. */
.komt { opacity: 1; transform: none; }
/* ── Telefoon ──────────────────────────────────────────────────────── */
@media (max-width: 860px) {
body { font-size: 16px; }
.kop nav {
position: fixed; inset: 56px 0 auto 0; flex-direction: column; gap: 0;
background: rgba(8,9,10,.98); border-bottom: 1px solid var(--lijn);
padding: 10px 0 18px; display: none;
}
.kop nav.open { display: flex; }
.kop nav a { padding: 14px var(--rand); font-size: 17px; width: 100%; }
.knop-menu { display: block; }
.rel-lijst { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* Geen hover op een telefoon, dus de luisterknop staat er meteen. */
.rel-luister { opacity: 1; transform: none; }
/* De agenda heeft eigen breekpunten (767 en 1100); zie onderaan dit
bestand. Hier staat dus met opzet niets over .gig. */
.form { grid-template-columns: 1fr; }
.galerij { grid-template-columns: 1fr; }
/* Een foto van 2:1 kan op een smal, hoog scherm nooit twee mensen tonen:
object-fit:cover snijdt dan tot één gezicht dat half wegvalt. Daarom
krijgt het beeld hier een eigen band in de juiste verhouding, met de
tekst eronder. Zo blijft het duo herkenbaar — en dat is op een dj-site
precies wat een organisator wil zien. */
/* ── Mobiele hero ────────────────────────────────────────────────
09/09/2026 — dit was een verkleinde desktophero: een liggende foto van
een kwart scherm met de tekst eronder. Nu is het een eigen compositie
waarin zíj het beeld zijn.
De persfoto is 16:9. Op een staand scherm hoog maken kan dus niet zonder
één van de twee te verliezen; daarom laadt hier een eigen uitsnede
(verhouding 800:941, zie `hero_foto_mobiel`). Het kader krijgt diezelfde
verhouding, met een boven- en ondergrens in schermhoogte zodat het op een
kleine iPhone niet krimpt en op een grote niet de hele pagina opeet.
De onderrand van de foto lost helemaal op in het zwart, en het tekstblok
schuift daar met een negatieve marge in: geen harde rechthoek, en het
woordmerk overlapt licht met het uitgedoofde deel van het beeld. */
.hero { aspect-ratio: auto; max-height: none; min-height: 0;
display: block; padding-top: 0; }
.hero-beeld {
position: relative;
width: 100%;
/* 09/09/2026 — hier stond `aspect-ratio` mét een `max-height`. Zodra die
hoogtegrens greep, kromp de bréédte mee om de verhouding te bewaren:
op een tablet stond de foto dan als een smalle strook links met zwart
ernaast. De hoogte wordt nu rechtstreeks gerekend — 117.6vw is de
natuurlijke hoogte van de uitsnede op volle breedte (941/800) — met
een onder- en bovengrens in schermhoogte. De breedte blijft altijd
100%, en `cover` vangt op wat de grenzen eraf knippen. */
/* Onder 768px staat de aangeleverde laag (1080x855). Boven die grens de
eigen uitsnede (800x941). Twee verhoudingen, dus twee hoogtes; de
ondergrens in schermhoogte houdt hem in beide gevallen dominant. */
height: clamp(56vh, 117.6vw, 62vh);
background: var(--grond);
}
@media (max-width: 767px) {
/* 09/09/2026 — hier stond 111vw. Dat hoorde bij het logobestand mét
ingebakken effecten, dat 11% doorzichtige rand aan elke kant droeg. Nu
staat het ORIGINELE logo er weer, zonder rand: op 111vw werd de S en de
laatste F afgesneden. Gewoon de kolombreedte volstaat. */
.hero-beeld { height: clamp(54vh, 79vw, 60vh); }
/* De laag is al rond hen uitgesneden; alleen verticaal bijsturen zodat de
gezichten hoog in beeld staan en er onderaan ruimte blijft om uit te
doven. */
.hero-beeld img { object-position: 50% 12% !important; }
}
/* De uitsnede is al op maat; `cover` vangt alleen op wat de boven- en
ondergrens hierboven eraf knippen. De inline object-position hoort bij
de brede foto en moet hier wijken — vandaar de uitroep. */
.hero-beeld img,
.hero-beeld video { object-fit: cover !important;
object-position: 50% 24% !important; }
.hero-beeld::after {
background:
/* bovenaan net genoeg sluier om het menu leesbaar te houden */
linear-gradient(to bottom, rgba(8,9,10,.62) 0%, rgba(8,9,10,.18) 12%,
transparent 24%),
/* Onderaan een uitdoving van ongeveer 150px. In pixels en niet in
procenten, zodat de overgang op elk scherm even lang aanvoelt en de
rook links en het warme licht rechts erbóven onaangeroerd blijven. */
linear-gradient(to top, var(--grond) 0px, var(--grond) 26px,
rgba(8,9,10,.92) 62px, rgba(8,9,10,.62) 100px,
rgba(8,9,10,.28) 130px, transparent 168px);
}
.hero-inhoud { position: relative; margin-top: -74px; padding: 0 0 40px; }
/* Eyebrow, woordmerk en knop vormen samen het affichegedeelte en staan
gecentreerd; de bio en de kanalen eronder blijven links uitgelijnd, want
dat leest nu eenmaal beter. */
.hero-kolom > div:first-child { text-align: center; }
.hero-kolom { height: auto; display: block;
padding-top: 0; padding-bottom: 0; }
/* MUSIC • LIVE • BOOKINGS staat boven het woordmerk, in de uitgedoofde
onderrand van de foto. */
.hero { --merk-breedte: 100%; }
.hero-tag { font-size: 11px; letter-spacing: .34em; margin: 0 0 14px;
width: 100%; text-indent: .34em; }
/* 09/09/2026 — hier stond een correctie van +0,93%, op basis van het
zwaartepunt van de zichtbare pixels. Bij het nameten bleek dat de
verkeerde maat: het onderste punt van de wig — en dát is waar het oog
het midden legt bij een symmetrische vorm — staat op x=746 van een
bestand van 1492, dus exact in het midden. De correctie duwde het merk
juist scheef. Gewoon centreren is hier optisch juist. */
.hero .merk { margin: 0 auto; position: relative; }
.hero-acties { margin-top: 40px; justify-content: center; }
.hero-acties .knop { width: 86%; justify-content: center; }
/* Eén duidelijke actie, maar geen bak over de volle breedte: dat oogt op
een artiestensite eerder als een formulier dan als een uitnodiging. Wel
ruim genoeg om met een duim te raken. */
.hero-acties .knop { padding: 16px 26px; }
/* De bio staat ónder de knop en hoeft het eerste scherm niet te vullen.
Iets lichter dan het gewone grijs, anders leest hij niet op zwart. */
.hero-kolom .hero-intro {
margin: 26px 0 0; max-width: 38ch;
font-size: 17px; line-height: 1.62; color: #b9b1b1;
}
.hero .socials { margin-top: 20px; gap: 8px; }
/* Tablet staand (601-860px): daar laadt de bréde persfoto, want het scherm
is breed genoeg. Die heeft een andere verhouding, dus een eigen hoogte en
een eigen uitsnedepunt — anders staan ze half buiten beeld. */
@media (min-width: 601px) {
.hero-beeld { height: clamp(40vh, 56.25vw, 58vh); }
.hero-beeld img { object-position: 60% 30% !important; }
.hero { --merk-breedte: 68%; }
.hero-inhoud { margin-top: -46px; }
.hero-acties .knop { width: auto; }
.hero-kolom .hero-intro { max-width: 46ch; }
}
/* Kleine iPhones: alles een maat strakker, zodat foto, logo en knop samen
binnen het eerste scherm blijven. */
@media (max-width: 430px) {
.hero-beeld { height: clamp(56vh, 117.6vw, 62vh); }
.hero { --merk-breedte: 100%; }
.hero-inhoud { margin-top: -44px; padding-bottom: 34px; }
.hero-kolom .hero-intro { font-size: 16px; margin-top: 22px; }
.hero-acties .knop { padding: 15px 20px; font-size: 14px; }
.hero .socials a { padding: 8px 12px; }
.hero .socials span { font-size: 11px; }
}
.voet-links { margin-left: 0; width: 100%; }
}
/* ── Referenties ────────────────────────────────────────────────────
Waar ze al gestaan hebben. Bewust geen raster met vakjes maar losse
namen achter elkaar: het is een opsomming, geen catalogus, en zo blijft
het leesbaar of het er nu twintig of tachtig zijn. */
.refs { display: flex; flex-wrap: wrap; gap: 10px 0; max-width: 100%; }
.refs span {
font-family: "Barlow Condensed", sans-serif;
text-transform: uppercase; letter-spacing: .1em;
font-size: clamp(14px, 1.5vw, 17px); color: var(--inkt-zacht);
padding: 4px 18px 4px 0; position: relative; white-space: nowrap;
}
.refs span::after {
content: ""; position: absolute; right: 8px; top: 50%;
width: 3px; height: 3px; border-radius: 50%; background: var(--accent);
transform: translateY(-50%); opacity: .55;
}
.refs span:last-child::after { display: none; }
/* ── Over-pagina ────────────────────────────────────────────────────
08/09/2026 — stond met inline-stijlen in het sjabloon; nu hier, zodat het
op een telefoon ook netjes onder elkaar valt. Het portret krijgt zijn
eigen hoogte in plaats van een uitgesneden kader: het woordmerk staat
onderin de foto en zou anders wegvallen. */
.over-raster {
display: grid; gap: clamp(30px, 4vw, 52px);
grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
align-items: start;
}
.over-tekst { font-size: clamp(17px, 1.4vw, 19px); color: var(--inkt-zacht); max-width: 62ch; }
.over-beeld { margin: 0; border: 1px solid var(--lijn); background: #000; }
.over-beeld img { display: block; width: 100%; height: auto; }
@media (max-width: 860px) {
.over-raster { grid-template-columns: 1fr; }
.over-beeld { max-width: 420px; }
}
/* ── Podia-muur: de naad tussen hero en pagina ──────────────────────
Alle zalen en festivals tegelijk zichtbaar. Geen raster met vakjes en geen
beweging: het is een opsomming, en de lengte ervan is precies het punt.
De namen breken over meerdere regels; de rode ruit ertussen houdt het
leesbaar zonder dat het een lijstje met bolletjes wordt. */
.podia {
background: var(--grond-op);
border-top: 1px solid var(--lijn); border-bottom: 1px solid var(--lijn);
padding: clamp(28px, 4vw, 46px) 0;
}
.podia-kop {
display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
margin: 0 0 clamp(18px, 2.4vw, 26px);
font-family: "Barlow Condensed", sans-serif; text-transform: uppercase;
letter-spacing: .2em; font-size: 13px; color: var(--accent);
}
.podia-telling { color: var(--inkt-flauw); letter-spacing: .14em; }
.podia-muur { display: flex; flex-wrap: wrap; gap: 6px 0; }
.podia-muur span {
position: relative; white-space: nowrap;
font-family: "Barlow Condensed", sans-serif; font-weight: 600;
text-transform: uppercase; letter-spacing: .09em;
font-size: clamp(15px, 1.55vw, 20px); color: var(--inkt-zacht);
padding: 3px 26px 3px 0;
}
/* Rode ruit als scheiding — behalve achter de laatste naam. */
.podia-muur span::after {
content: ""; position: absolute; right: 9px; top: 50%;
width: 5px; height: 5px; margin-top: -2px;
background: var(--accent); transform: rotate(45deg);
}
.podia-muur span:last-child::after { display: none; }
@media (max-width: 860px) {
.podia-muur span { font-size: 14px; padding-right: 20px; }
.podia-muur span::after { right: 7px; }
}
/* ── Sociale kanalen ────────────────────────────────────────────────
De merktekens zijn hier uitgetekend (zie _socials.html), zodat ze de
kleur van de link overnemen en er geen extra bestand bij komt. In rust
staan ze wit — helder genoeg om meteen te zien wát het is — en bij hover
springt elk kanaal naar zijn eigen merkkleur. */
.socials { display: flex; flex-wrap: wrap; gap: 10px; }
.socials a {
display: inline-flex; align-items: center; gap: 11px;
padding: 10px 17px; border: 1px solid var(--lijn-fel);
color: var(--inkt); background: transparent;
transition: color .2s, border-color .2s, background .2s;
}
.socials svg { width: 22px; height: 22px; flex: none; }
.socials span {
font-family: "Barlow Condensed", sans-serif; font-weight: 700;
text-transform: uppercase; letter-spacing: .13em; font-size: 13px;
}
/* Eigen merkkleur bij hover — herkenbaarder dan één rood voor alles. */
.socials a[data-merk="soundcloud"]:hover, .socials a[data-merk="soundcloud"]:focus-visible {
color: #ff5500; border-color: #ff5500; background: rgba(255, 85, 0, .09); }
.socials a[data-merk="facebook"]:hover, .socials a[data-merk="facebook"]:focus-visible {
color: #1877f2; border-color: #1877f2; background: rgba(24, 119, 242, .09); }
.socials a[data-merk="instagram"]:hover, .socials a[data-merk="instagram"]:focus-visible {
color: #e1306c; border-color: #e1306c; background: rgba(225, 48, 108, .09); }
.socials a[data-merk="spotify"]:hover, .socials a[data-merk="spotify"]:focus-visible {
color: #1db954; border-color: #1db954; background: rgba(29, 185, 84, .09); }
.socials a[data-merk="youtube"]:hover, .socials a[data-merk="youtube"]:focus-visible {
color: #ff0033; border-color: #ff0033; background: rgba(255, 0, 51, .09); }
/* Grotere variant voor een pagina waar de kanalen zélf het aanbod zijn. */
.socials.groot { margin-top: 26px; gap: 12px; }
.socials.groot a { padding: 13px 22px; }
.socials.groot svg { width: 26px; height: 26px; }
.socials.groot span { font-size: 15px; }
/* In de voet blijft de naam staan: alleen een icoon leverde daar een
losse knop op waar de link eronder bij leek te horen. */
.voet .socials { margin-left: auto; }
.voet-onder { display: flex; gap: 18px; flex-wrap: wrap; align-items: center; }
.voet-onder a { color: var(--inkt-zacht); }
.voet-onder a:hover { color: var(--accent); }
.voet-punt { color: var(--lijn-fel); }
/* De credit staat rechts, apart van de sitelinks: het hoort bij de maker,
niet bij de navigatie. Ingelogd schuift Beheer erachter. */
.voet-bureau { margin-left: auto; color: var(--inkt-flauw) !important;
font-size: 13px; }
.voet-bureau:hover { color: var(--accent) !important; }
.voet-beheer { color: var(--accent) !important; }
/* Verwijzing naar hun kanalen waar nog geen sets staan. */
.kanaal { border: 1px solid var(--lijn); padding: clamp(24px, 4vw, 38px); }
.kanaal-tekst { margin: 0; color: var(--inkt-zacht); max-width: 52ch;
font-size: clamp(16px, 1.4vw, 18px); }
@media (max-width: 860px) {
.voet .socials { margin-left: 0; width: 100%; }
.voet-bureau { margin-left: 0; width: 100%; }
}
/* ── Geluidsset zonder beeld ────────────────────────────────────────
Een SoundCloud-set heeft geen voorbeeldafbeelding. In plaats van een leeg
zwart vlak staat er een golfvorm — dezelfde vorm die de speler zelf toont
zodra je klikt, dus het voelt als hetzelfde ding dat wakker wordt. De
hoogtes staan in het sjabloon: het is decoratie en geen echte meting, en
dan is verzinnen dat het een meting is erger dan het gewoon tekenen. */
.set-audio { display: grid; place-items: center; background: var(--grond-op); }
.set-golf {
position: absolute; inset: 0; display: flex; align-items: center;
justify-content: center; gap: 5px; padding: 0 22px;
}
.set-golf i {
display: block; width: 5px; background: var(--lijn-fel);
transition: background .3s ease;
}
.set-audio:hover .set-golf i { background: var(--accent); opacity: .55; }
.set-audio .speel { position: relative; }
/* Beweging uit in het systeem = een stilstaand beeld. De poster blijft dan
staan; dat is precies waarvoor hij er is. */
@media (prefers-reduced-motion: reduce) {
.hero-beeld video { display: none; }
.hero-beeld { background-image: url("/static/video/hero-poster.jpg?v=1");
background-size: cover; background-position: 50% 40%; }
}
/* ── Sluier bij een bewegende banner ────────────────────────────────
09/09/2026 — de sluier was afgestemd op de persfoto, die links al bijna
zwart is. De videobeelden zijn overal fel (rode zaalverlichting), dus daar
verdwenen het woordmerk en de tekst in. Bij video dus een zwaardere en
bredere sluier, plus een aanzet onderaan waar de intro staat. Alleen bij
video: op de foto zou dit de belichting van de fotograaf kapotmaken. */
.hero.met-video .hero-beeld::after {
background:
linear-gradient(to right, rgba(8,9,10,.95) 0%, rgba(8,9,10,.88) 26%,
rgba(8,9,10,.55) 44%, rgba(8,9,10,.15) 60%, transparent 72%),
linear-gradient(to top, rgba(8,9,10,.8) 0%, rgba(8,9,10,.25) 26%, transparent 50%);
}
@media (max-width: 860px) {
/* Op een telefoon staat de tekst ónder het beeld, dus daar hoeft alleen de
onderrand weg te vloeien. */
.hero.met-video .hero-beeld::after {
background:
linear-gradient(to bottom, rgba(8,9,10,.6) 0%, transparent 17%),
linear-gradient(to top, var(--grond) 0%, rgba(8,9,10,.72) 17%,
rgba(8,9,10,.2) 38%, transparent 58%);
}
}
.set-frame video { position: absolute; inset: 0; width: 100%; height: 100%;
background: #000; object-fit: contain; }
/* ── Eigen event ────────────────────────────────────────────────────
09/09/2026 — Endorphium is hún feest, niet zomaar een boeking. Daarom
staat het onder de gewone agenda in een eigen kader: dezelfde taal als de
rest van de site, maar met een rand en een iets lichtere grond, zodat het
opvalt zonder een banner te worden. */
.eigen {
margin-top: clamp(30px, 4vw, 46px);
border: 1px solid var(--lijn-fel); background: var(--grond-op);
/* Een dunne rode streep langs de bovenrand: hetzelfde accent als de
sectiestreep, zodat het kader bij de site hoort en niet los aanvoelt. */
border-top: 2px solid var(--accent);
padding: clamp(24px, 3.4vw, 40px);
}
.eigen-raster {
display: grid; gap: clamp(24px, 3vw, 40px);
grid-template-columns: minmax(0, 1fr) minmax(0, .85fr);
align-items: center;
}
.eigen-eyebrow {
font-family: "Barlow Condensed", sans-serif; text-transform: uppercase;
letter-spacing: .22em; font-size: 13px; color: var(--accent);
margin: 0 0 10px;
}
.eigen h2 {
font-family: "Archivo", sans-serif; font-weight: 800; font-stretch: 108%;
text-transform: uppercase; letter-spacing: -.015em; line-height: 1.05;
font-size: clamp(24px, 3.2vw, 38px); margin: 0 0 12px;
}
.eigen-wanneer {
font-family: "Barlow Condensed", sans-serif; text-transform: uppercase;
letter-spacing: .13em; font-size: 15px; color: var(--inkt); margin: 0;
}
.eigen-uitleg { color: var(--inkt-zacht); margin: 16px 0 0; max-width: 52ch; }
.eigen-lineup { color: var(--inkt-flauw); margin: 12px 0 0; font-size: 14px;
max-width: 56ch; line-height: 1.6; }
.eigen-video {
position: relative; aspect-ratio: 16/9; overflow: hidden; cursor: pointer;
border: 1px solid var(--lijn-fel); background: #000;
}
.eigen-video img { width: 100%; height: 100%; object-fit: cover; opacity: .8;
transition: opacity .3s ease, transform .5s ease; }
.eigen-video:hover img { opacity: 1; transform: scale(1.03); }
.eigen-video video { position: absolute; inset: 0; width: 100%; height: 100%;
background: #000; object-fit: contain; }
@media (max-width: 860px) {
.eigen-raster { grid-template-columns: 1fr; }
/* Beeld eerst op een telefoon: dat is wat iemand doet stoppen met scrollen. */
.eigen-video { order: -1; }
}
/* De kanalen in het openingsscherm: compacter dan elders, want daar draait
het om het logo en de boekingsknop. */
.hero .socials { margin-top: 22px; gap: 8px; }
.hero .socials a { padding: 8px 13px; }
.hero .socials svg { width: 18px; height: 18px; }
.hero .socials span { font-size: 12px; }
@media (max-width: 860px) {
.hero .socials { margin-top: 20px; }
}
/* ── Aanraakdoelen op een telefoon ──────────────────────────────────
09/09/2026 — uit de mobiele sweep: de links in de voet waren 21 tot 23
pixels hoog en de "alle ... dates"-links 27. Dat is te klein om met een
duim te raken; de richtlijn is 44. De tekst blijft even groot, er komt
alleen ruimte omheen. */
@media (max-width: 860px) {
.voet-onder { gap: 6px 16px; }
.voet-onder a, .voet-bureau {
display: inline-flex; align-items: center; min-height: 44px;
}
.sectie-kop .meer { min-height: 44px; display: inline-flex; align-items: center;
padding-bottom: 0; }
/* Het mailadres op de boekingspagina is een link die je aantikt. */
.form a[href^="mailto:"], .kanaal a { min-height: 44px; display: inline-flex;
align-items: center; }
}
/* Rechtstreeks contact onder het formulier. Het adres is een link die je
aantikt, dus die krijgt genoeg hoogte om te raken — 19px was te weinig. */
.rechtstreeks { margin-top: 36px; color: var(--inkt-zacht);
display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.rechtstreeks a { color: var(--accent); min-height: 44px;
display: inline-flex; align-items: center; }
.rechtstreeks a:hover { color: var(--inkt); }
/* ══ Agenda: eigen breekpunten ══════════════════════════════════════
09/09/2026 — de agenda volgde het algemene breekpunt van 860px en klapte
dus op een iPad al in de telefoonopmaak, terwijl daar ruimte zat voor een
bredere regel. En op desktop hing de ticketknop tegen de buitenrand van de
container, honderden pixels van het optreden waar hij bij hoort.
Drie zones nu:
tot 767px telefoon — datum links, inhoud rechts, knop eronder
768-1100px tablet — alles op één regel, knop vlak naast de inhoud
vanaf 1101 desktop — ongewijzigd
── Telefoon ─────────────────────────────────────────────────────── */
@media (max-width: 767px) {
/* Bovenste rij: datum links, informatie rechts. Daaronder, uitgelijnd met
de informatie, altijd dezelfde actiezone. Zo staat de ticketknop bij élk
optreden op precies dezelfde plek in de rij. */
.gig {
grid-template-columns: 74px minmax(0, 1fr);
grid-template-areas: "datum inhoud"
". actie";
gap: 0 14px;
padding: 14px 0;
align-items: start;
}
.gig-datum { grid-area: datum; flex-direction: column; gap: 1px; }
.gig-datum .dag { font-size: 26px; line-height: 1; }
.gig-datum .mnd { font-size: 11px; letter-spacing: .14em; }
.gig-info { grid-area: inhoud; }
.gig h3 { font-size: 16.5px; line-height: 1.26; }
.gig .plek { font-size: 13px; margin-top: 3px; line-height: 1.45; }
.gig-extra { font-size: 12.5px; margin-top: 4px; line-height: 1.45;
color: var(--inkt-flauw); }
/* 09/09/2026 — status boven de knop kostte een extra regel per optreden.
Naast elkaar op één lijn scheelt ruim tien pixels per rij en de lijst
oogt rustiger. */
.gig-actie { grid-area: actie; flex-direction: row; align-items: center;
gap: 11px; margin-top: 8px; flex-wrap: wrap; }
/* Vaste breedte voor de status: "Tickets beschikbaar" is langer dan
"Private event", en zonder deze regel begon de knop bij elke rij op een
andere plek. Nu staan alle knoppen weer onder elkaar. */
.gig-status { font-size: 10px; letter-spacing: .12em;
flex: 0 0 116px; max-width: 116px; }
/* Compact in beeld, maar wél te raken: de knop is 34px hoog en krijgt via
::before een onzichtbare uitbreiding tot 44px. Dat is de richtlijn voor
een duim, zonder dat de rij daarvoor hoger wordt. */
.knop.tickets { height: 38px; padding: 0 16px; font-size: 10.5px;
position: relative; }
.knop.tickets::before { content: ""; position: absolute; inset: -5px -2px; }
}
/* ── Tablet ───────────────────────────────────────────────────────── */
@media (min-width: 768px) and (max-width: 1100px) {
/* Op een iPad blijft de horizontale lijst, maar de actiekolom heeft een
vaste breedte en staat vlak naast de inhoud in plaats van tegen de
buitenrand. De laatste kolom vangt de overgebleven ruimte op, zodat een
lange line-up de knop nooit verschuift. */
.agenda { --actie-breedte: 168px; }
.gig {
grid-template-columns: 92px minmax(0, 40ch) var(--actie-breedte) minmax(0, 1fr);
gap: 22px;
padding: 18px 0;
align-items: start;
}
.gig-datum { grid-column: 1; align-items: baseline; gap: 8px; }
.gig-datum .dag { font-size: 24px; }
.gig-info { grid-column: 2; }
.gig h3 { font-size: 18px; line-height: 1.3; }
.gig .plek { font-size: 14px; margin-top: 4px; }
.gig-extra { font-size: 13px; color: var(--inkt-flauw); line-height: 1.5; }
.gig-actie { grid-column: 3; }
}
/* ══ Logo-effect (telefoon en tablet) ═══════════════════════════════
09/09/2026 — het woordmerk lag als een platte PNG op het zwart. Vier
ingrepen, allemaal in de donkere zone onder de foto en dus nooit over
gezichten of armen:
1. diepte — twee slagschaduwen: een zwarte die het merk van het
vlak tilt, en een heel zwakke rode die het rood van
het logo laat 'meekleuren'
2. contourgloed — een vervaagde kopie van het logo áchter het merk,
afgedekt zodat alleen de onderste helft doorschijnt.
Daar zit de rode wig, dus het licht komt vanzelf uit
het rode deel en niet uit de witte letters
3. energielijnen — twee dunne lijnen die uit de onderhoeken van het merk
naar buiten lopen en uitdoven; asymmetrisch van lengte
en hoogte, zodat het geen kader wordt
4. gloed onder het punt — een kleine ovale reflectie recht onder de
onderste punt van de wig
De glans over de witte letters loopt één keer per elf seconden, in
anderhalve seconde, en volgt de vorm van het logo dankzij een masker.
Zonder dat masker zou er een rechthoek overheen vegen. */
/* 09/09/2026 — onder 768px staat de aangeleverde logo-variant mét ingebakken
effecten; daar mogen mijn CSS-effecten dus NIET overheen, anders krijg je
het dubbel. Tussen 768 en 1100px staat het gewone logo en blijven ze wel
staan. */
@media (min-width: 768px) and (max-width: 1100px) {
.hero .merk { position: relative; isolation: isolate; }
.hero .merk img {
position: relative; z-index: 1;
filter: drop-shadow(0 8px 18px rgba(0, 0, 0, .55))
drop-shadow(0 3px 8px rgba(220, 20, 35, .18));
}
/* 2. contourgloed uit het rode onderstuk */
.hero .merk::before {
content: ""; position: absolute; inset: 0; z-index: 0;
background: url("/static/img/steve-raff-logo.png?v=1") no-repeat center / contain;
filter: blur(10px) saturate(1.5);
opacity: .22;
-webkit-mask-image: linear-gradient(to bottom, transparent 34%,
rgba(0,0,0,.5) 58%, #000 82%);
mask-image: linear-gradient(to bottom, transparent 34%,
rgba(0,0,0,.5) 58%, #000 82%);
pointer-events: none;
}
/* 4. glans over de witte letters, in de vorm van het logo */
.hero .merk::after {
content: ""; position: absolute; inset: 0; z-index: 2;
background: linear-gradient(110deg, transparent 25%,
rgba(255, 255, 255, .14) 45%, transparent 65%);
background-size: 230% 100%;
background-position: 165% 0;
-webkit-mask-image: url("/static/img/steve-raff-logo.png?v=1");
mask-image: url("/static/img/steve-raff-logo.png?v=1");
-webkit-mask-size: contain; mask-size: contain;
-webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
-webkit-mask-position: center; mask-position: center;
animation: merk-glans 11s ease-in-out infinite;
pointer-events: none;
}
/* 3 + 4. lijnen uit de onderhoeken, en de gloed onder het punt */
.merk-fx {
position: relative; display: block; height: 20px; margin-top: -2px;
/* 09/09/2026 — dit blok was zo breed als het hele omhulsel, waardoor de
accentlijn rechts over de foto liep, vlak naast Raff. Hij hoort bij het
woordmerk en krijgt daarom diens breedte. */
width: var(--merk-breedte); max-width: 100%;
/* De ovale reflectie: 96px breed, zacht, recht onder de punt. */
background: radial-gradient(ellipse 48px 6px at 50% 5px,
rgba(230, 25, 40, .24), rgba(230, 25, 40, 0) 72%);
}
/* Links langer dan rechts, en een paar pixels lager: dat verschil houdt het
los van een symmetrisch kadertje. -20px is precies de paginamarge, dus de
lijn loopt tot de schermrand en er nooit voorbij. */
.merk-fx::before {
content: ""; position: absolute; left: -20px; top: 4px;
width: 62px; height: 1px;
background: linear-gradient(90deg, rgba(230, 25, 40, 0),
rgba(230, 25, 40, .65) 62%, rgba(230, 25, 40, 0));
animation: fx-adem 10s ease-in-out infinite;
}
.merk-fx::after {
content: ""; position: absolute; right: -20px; top: 11px;
width: 46px; height: 1px;
background: linear-gradient(270deg, rgba(230, 25, 40, 0),
rgba(230, 25, 40, .55) 60%, rgba(230, 25, 40, 0));
animation: fx-adem 10s ease-in-out infinite 2.4s;
}
}
@keyframes merk-glans {
0%, 86% { background-position: 165% 0; }
100% { background-position: -65% 0; }
}
@keyframes fx-adem { 0%, 100% { opacity: .6; } 50% { opacity: 1; } }
/* Wie beweging heeft uitgezet, krijgt exact hetzelfde beeld — alleen stil.
De glans staat dan op zijn beginstand: buiten het logo, dus onzichtbaar. */
@media (prefers-reduced-motion: reduce) {
.merk-fx::before, .merk-fx::after,
.hero .merk::after, .hero-beeld img { animation: none !important; }
.merk-fx::before, .merk-fx::after { opacity: .85; }
}
/* ── Lucht rond het aangeleverde woordmerk ──────────────────────────
09/09/2026 — het FX-bestand draagt boven en onder elk ongeveer 23%
doorzichtige rand (de letters zitten op y150-507 van 658). Die rand telt
mee in de hoogte maar zie je niet, dus er stond 48px lucht boven de letters
en 74px eronder. Eyebrow en knop schuiven er met een negatieve marge weer
tegenaan.
Dit blok staat bewust helemaal achteraan: eerder in het bestand staat een
`.hero-tag { margin: 0 0 14px }` met dezelfde soortelijke kracht, en die
won het van een regel die er vóór stond. */
@media (max-width: 767px) {
.hero-tag { margin-bottom: 12px; }
.hero-acties { margin-top: 30px; }
}
/* ══ Mobiele hero in lagen (≤767px) ═════════════════════════════════
09/09/2026 — hiervóór was dit één samengestelde afbeelding. Nu weer echte
lagen, in deze volgorde:
::before sfeer + rook + rode/oranje FX (achter alles)
![]()
DE ECHTE FOTO VAN STEVE & RAFF — onaangeroerd
::after rookuitdoving onderaan, naar het zwart toe
.merk-fx rode sfeerlagen achter het woordmerk
![]()
HET ORIGINELE LOGO — messcherp, geen filter erop
tekst eyebrow, knop, bio, kanalen: gewone HTML
Op de fotolaag staat met opzet géén filter, drop-shadow of overlay: elk
effect zit in een aparte laag eronder of erboven. Het silhouet krijgt dus
nergens een omtrek mee. */
@media (max-width: 767px) {
.hero-beeld {
position: relative;
width: 100%;
height: auto;
/* 09/09/2026 — was 864/877; de laag is opnieuw geëxporteerd met 74px
lucht boven het haar, want Steve's kruin plakte tegen de rand. */
aspect-ratio: 864 / 951;
background: transparent;
isolation: isolate;
}
/* De foto staat exact in het kader; nergens uitsnede, dus geen kans dat er
een stuk van hen wegvalt. */
.hero-beeld picture,
.hero-beeld img {
position: relative; z-index: 2;
width: 100%; height: 100%;
object-fit: contain !important;
object-position: 50% 0 !important;
}
/* ── Achtergrond: het aangeleverde beeld ─────────────────────────
09/09/2026 — overgezet op de V3-maatvoering. De eigen rooktextuur, de
lichtstrepen en de voorgrondrook zijn eruit: die zaten dubbel bovenop een
achtergrond die de sfeer al bevat.
Het frame van V3 is 864x1536. Dit kader toont daarvan de bovenste 1005
pixels — precies het gebied waarin de personen staan. Vandaar de
verhouding 864/1005 en een achtergrondhoogte van 1536/1005 = 152,8%. */
.hero-beeld {
position: relative;
width: 100%;
height: auto;
aspect-ratio: 864 / 1005;
background-image: url("/static/img/hero-achtergrond.webp?v=1");
background-size: 100% 152.8%;
background-position: center top;
background-repeat: no-repeat;
isolation: isolate;
}
/* De personenlaag is al op maat gerenderd (940x940 op -38, 65 binnen
864x1005), dus ze past één-op-één in het kader. */
.hero-beeld picture,
.hero-beeld img {
position: relative; z-index: 2;
width: 100%; height: 100%;
object-fit: contain !important;
object-position: 50% 0 !important;
}
/* Alleen nog de aanzet naar de paginakleur onderaan; de onderfade van de
personen zit in hun eigen alfakanaal. Twee pixels door de rand heen, want
de kaderhoogte valt op een halve pixel. */
.hero-beeld::after {
content: ""; position: absolute; inset: 0 0 -2px; z-index: 3;
pointer-events: none;
background: linear-gradient(to top, var(--grond) 0%, var(--grond) 4%,
rgba(8, 9, 10, .62) 9%, rgba(8, 9, 10, .16) 15%, transparent 24%);
}
.hero-inhoud { margin-top: -34px; }
}
/* ══ Woordmerk (≤767px) ═════════════════════════════════════════════
09/09/2026 — de vijf CSS-gloedlagen zijn weg: het aangeleverde bestand
bevat de rode gloed en de lichtaccenten al. Twee lagen over elkaar gaf
dubbel rood.
Het bestand is 1200x410 met het zichtbare woordmerk op x60..1138 — dus 5%
doorzichtige rand links en rechts (gemeten, niet aangenomen). Zonder
correctie zou het merk 10% smaller ogen dan voorheen. De breedte wordt hier
met 1/0,898 opgerekt en de extra hoogte met een negatieve marge opgevangen,
zodat het zichtbare merk exact blijft staan waar het stond. */
@media (max-width: 767px) {
.hero .merk {
position: relative; z-index: 1;
width: 111.4%; /* 100 / 0,898 */
max-width: none;
left: 50%; transform: translateX(-50%);
margin-top: -26px; margin-bottom: -30px;
}
.hero .merk img { display: block; width: 100%; height: auto; }
/* ── Boekingsknop: ingehouden rood, geen gebakken beeld ─────────── */
.hero-acties .knop {
border-color: rgba(214, 32, 40, .72);
background: radial-gradient(120% 160% at 50% 130%,
rgba(190, 26, 34, .16) 0%, transparent 70%);
transition: border-color .25s, box-shadow .25s, background .25s;
}
.hero-acties .knop:hover,
.hero-acties .knop:focus-visible,
.hero-acties .knop:active {
border-color: var(--accent);
box-shadow: 0 0 0 1px rgba(240, 38, 44, .20), 0 8px 30px rgba(240, 38, 44, .18);
}
}
@keyframes rook-drift {
from { transform: translate3d(-5px, 0, 0); }
to { transform: translate3d(5px, -4px, 0); }
}
@media (prefers-reduced-motion: reduce) {
.hero-beeld::before { animation: none !important; transform: none !important; }
}
/* ══ Brede hero: content links, duo groot rechts (≥861px) ═══════════
09/09/2026 — de aangeleverde desktoplagen. Meetkunde uit het pakket,
gerekend op 1920x1080 en hier in procenten gezet zodat ze meeschalen:
personen 1083x973 op x790,y107 -> 56,41% breed, 2,45% van rechts, onderaan
logo-FX 480x164 op x143,y244 -> in de contentkolom
content 29% breed, marge links 9,06%
De personenlaag ligt als aparte afbeelding boven de achtergrond, met een
doorzichtige onderfade in zijn eigen alfakanaal: geen zwarte of witte
rechthoek eromheen. Mobiel raakt hier niets van. */
.hero-duo { display: none; }
@media (min-width: 861px) {
.hero {
position: relative; display: block; overflow: hidden;
/* `width: 100%` erbij: met alleen aspect-ratio én min-height rekt de
BREEDTE op zodra die ondergrens grijpt (1024px scherm gaf een hero van
1102px en dus horizontale overloop). */
width: 100%; aspect-ratio: 16 / 9; min-height: 620px; max-height: none;
padding: 0; background: #08090b;
}
.hero-beeld { position: absolute; inset: 0; z-index: 0; }
.hero-beeld picture, .hero-beeld img {
width: 100%; height: 100%; object-fit: cover; display: block;
}
.hero-beeld::after, .hero-beeld::before { content: none; }
.hero-duo {
display: block; position: absolute; z-index: 1;
width: 56.40625%; height: auto;
right: 2.447917%; bottom: 0;
pointer-events: none;
}
/* ── Contentkolom links ─────────────────────────────────────────── */
.hero-inhoud { position: relative; z-index: 2; width: 100%; margin: 0; padding: 0; }
.hero-kolom {
height: 100%; display: flex; flex-direction: column; justify-content: center;
width: 29%; min-width: 340px; max-width: 520px;
margin-left: 9.0625%; padding: clamp(90px, 9vw, 170px) 0 clamp(48px, 5vw, 90px);
text-align: left;
}
.hero-kolom > div:first-child { text-align: left; }
/* Gecentreerd boven het woordmerk, zoals in de eerdere brede indeling.
De kolombreedte is gelijk aan het zichtbare logo, dus centreren op de
kolom centreert hem op het merk. De laatste letter draagt de
letterspatiëring mee; vandaar de kleine inspringing. */
.hero-tag { width: 100%; text-align: center; text-indent: .30em;
font-size: 13px; letter-spacing: .30em; margin: 0 0 16px; }
/* Het logobestand draagt 5% doorzichtige rand aan elke kant; 112% breed met
een marge van -5,6% zet het zichtbare merk weer strak tegen de tekstkolom. */
.hero .merk {
position: relative; z-index: 1;
width: 112%; max-width: none; left: auto; transform: none;
margin: 0 0 0 -5.6%;
}
.hero .merk img { display: block; width: 100%; height: auto; }
.hero .merk::before, .hero .merk::after { content: none; }
.merk-fx { display: none; }
.hero-acties { margin-top: 26px; justify-content: flex-start; }
.hero-acties .knop { padding: 16px 28px; }
.hero-kolom .hero-intro {
margin: 34px 0 0; max-width: 34ch; text-align: left;
font-size: 17px; line-height: 1.6; color: #b9b1b1;
}
.hero .socials { justify-content: flex-start; margin-top: 30px; }
.hero-rail { display: none; }
}
/* ══ Contentblok onder het logo, breed scherm (≥861px) ══════════════
09/09/2026 — knop, bio en kanalen als één verzorgd blok met dezelfde
linkerlijn. Alleen dit blok; personen, achtergrond, logo en de mobiele
weergave blijven zoals ze zijn. */
@media (min-width: 861px) {
/* ── Boekingsknop: de primaire actie ─────────────────────────────
Diep rood met een verloop van iets lichter boven naar donkerder onder,
precies de tint van het ampersand in het logo. */
.hero-acties { margin-top: 30px; }
.hero-acties .knop {
min-height: 54px; padding: 0 34px;
background: linear-gradient(to bottom, #e11f2a 0%, #c0161f 100%);
border: 1px solid rgba(255, 96, 100, .55);
color: #fff;
box-shadow: 0 6px 20px rgba(190, 20, 28, .28);
transition: background .2s, border-color .2s, box-shadow .2s, transform .12s;
}
.hero-acties .knop svg { transition: transform .2s ease; }
.hero-acties .knop:hover {
background: linear-gradient(to bottom, #f0262c 0%, #cc1a24 100%);
border-color: rgba(255, 130, 132, .7);
box-shadow: 0 8px 26px rgba(210, 24, 34, .36);
color: #fff;
}
.hero-acties .knop:hover svg { transform: translateX(3px); }
.hero-acties .knop:focus-visible {
outline: 2px solid #ff8a8f; outline-offset: 3px;
}
.hero-acties .knop:active {
transform: translateY(1px);
background: linear-gradient(to bottom, #c0161f 0%, #a71119 100%);
box-shadow: 0 3px 12px rgba(160, 16, 24, .30);
}
/* ── Bio ─────────────────────────────────────────────────────────
Eerste zin als openingsregel met wat meer gewicht, de rest zachter. */
.hero-kolom .hero-intro {
margin: 30px 0 0; max-width: 36ch;
font-size: 17px; line-height: 1.6; color: #9d9698;
}
.hero-kolom .hero-intro strong {
display: block; margin-bottom: 6px;
font-weight: 500; color: #e9e6e6; font-size: 18px;
}
.hero-kolom .hero-intro span { color: #9d9698; }
/* ── Kanalen ─────────────────────────────────────────────────────
Drie gelijkvormige links, uitgelijnd met de bio. */
/* Drie knoppen moeten in een kolom van 29% passen: bij 1366px is dat 396px,
dus ze mogen samen niet breder zijn dan dat. Vandaar krappere padding en
tussenruimte dan elders op de site. */
.hero .socials { margin-top: 24px; gap: 8px; justify-content: flex-start;
flex-wrap: nowrap; }
.hero .socials a {
min-height: 44px; padding: 0 12px;
background: rgba(255, 255, 255, .035);
border: 1px solid rgba(255, 255, 255, .16);
color: var(--inkt-zacht);
transition: border-color .2s, color .2s, background .2s;
}
.hero .socials svg { width: 18px; height: 18px; flex: none; }
.hero .socials span { font-size: 11px; letter-spacing: .11em; white-space: nowrap; }
.hero .socials a:hover,
.hero .socials a:focus-visible {
border-color: var(--accent); color: var(--inkt);
background: rgba(240, 38, 44, .08);
}
.hero .socials a:focus-visible { outline: 2px solid #ff8a8f; outline-offset: 2px; }
}
/* Tussen 861 en 1150px is er minder plaats naast de personen. Die beginnen op
41,15% van de hero (100% − 2,45% marge − 56,41% breedte); bij 1024px is dat
x421, terwijl de kolom tot x433 liep. Vandaar een smallere kolom en een
compactere kanaalrij, zodat er lucht tussen blijft en de drie links op één
regel passen. */
@media (min-width: 861px) and (max-width: 1150px) {
.hero-kolom { width: 30%; min-width: 288px; max-width: 320px;
margin-left: 6.5%; padding-top: clamp(70px, 8vw, 120px); }
.hero .merk { width: 112%; margin-left: -5.6%; }
.hero-acties .knop { min-height: 50px; padding: 0 26px; font-size: 14px; }
.hero-kolom .hero-intro { font-size: 16px; max-width: 32ch; margin-top: 26px; }
.hero-kolom .hero-intro strong { font-size: 17px; }
.hero .socials { gap: 7px; margin-top: 22px; flex-wrap: nowrap; }
.hero .socials a { padding: 0 10px; min-height: 44px; }
.hero .socials svg { width: 17px; height: 17px; }
.hero .socials span { font-size: 10.5px; letter-spacing: .1em; }
}
/* Onder 861px is de intro één doorlopende alinea. De opsplitsing in
/ is daar puur structureel — nodig om op een breed scherm de
eerste zin als openingsregel te kunnen zetten — en mag aan de opmaak niets
veranderen. Zonder deze reset kreeg zijn standaard vetgedrukte
weergave en zag de telefoon er dus wél anders uit. */
@media (max-width: 860px) {
.hero .hero-intro strong,
.hero .hero-intro span {
font-weight: inherit; color: inherit; font-size: inherit;
display: inline; margin: 0;
}
}
/* ── Boekingssectie op de voorpagina ─────────────────────────────── */
.boek-tekst {
color: var(--inkt-zacht); font-size: clamp(17px, 1.5vw, 19px);
line-height: 1.6; max-width: 46ch; margin: 0;
}
/* ══ Woordmerk vanaf 768px ══════════════════════════════════════════
09/09/2026 — het bestand mét de ingebakken rode gloed stond alleen op de
telefoon; tablet en desktop kregen nog het kale logo (vraag van Jimmy,
09/09). Nu overal hetzelfde bestand.
Het FX-bestand is anders opgemaakt dan het kale logo: de witte letters
beslaan er x 0,0608-0,9217 en y 0,2049-0,6805 van het bestand, tegen
x 0,0288-0,9685 en y 0,1250-0,6167 bij het kale logo (gemeten, niet
geschat). Zonder correctie zou het merk kleiner ogen én omhoog springen.
De correctie zit op de afbeelding, niet op het kader: 109,16% breed, 3,76%
naar links, en negatieve marges die precies de extra lucht wegnemen. Het
kader houdt daardoor zijn huidige hoogte en de rest van de kolom schuift
geen pixel. De marges zijn percentages van de kaderbreedte; met een
beeldverhouding van 4,1444 komt -19,17% van de kaderhoogte neer op -4,63%
van de kaderbreedte. */
@media (min-width: 768px) {
.hero .merk img {
display: block; width: 109.16%; height: auto; max-width: none;
margin: -4.63% 0 -8.54% -3.76%;
}
/* De gloed, de contour en de glans zaten hier in CSS. Die zitten nu in het
bestand zelf; twee lagen over elkaar gaf dubbel rood. */
.hero .merk::before, .hero .merk::after { content: none; }
.hero .merk img { filter: none; }
/* De twee dunne rode accentlijnen zaten in het bestand al; los eronder
zetten gaf ze dubbel. */
.merk-fx { display: none; }
}
/* De boekingssectie draagt één korte zin. De kop staat daarom dichter bij de
tekst dan bij een sectie met een lijst eronder; 44px lucht liet de zin los
van zijn titel hangen. */
.boek .sectie-kop { margin-bottom: 20px; }
.boek-actie { margin-top: 26px; }
/* ── Hero op tablet staand (601-860px) ──────────────────────────────
09/09/2026 — in deze band staan de eyebrow, het woordmerk en de boekingsknop
gecentreerd, maar de bio en de kanaalknoppen begonnen links. Met een bio van
38ch in een kolom van 800px liet dat rechts 300px leeg naast een gecentreerde
knop: het oogde alsof er iets weggevallen was. Alles in deze band staat nu op
dezelfde as. De telefoon (≤600px) blijft ongemoeid — daar loopt de tekst
vrijwel over de volle breedte en is links uitlijnen juist rustiger. */
@media (min-width: 601px) and (max-width: 860px) {
.hero-kolom .hero-intro { margin-left: auto; margin-right: auto;
text-align: center; }
.hero .socials { justify-content: center; }
}
/* ── Hero: achtergrond en personen tegelijk in beeld ────────────────
09/09/2026 — de personen zijn een uitgeknipte laag boven een aparte
achtergrond. Die twee bestanden komen zelden op hetzelfde moment binnen, en
in dat gaatje stond de uitsnede zonder achtergrond: precies het effect dat
verraadt dát er geknipt is. Beide lagen wachten nu op elkaar en verschijnen
samen.
Alleen als javascript aan staat: zonder js blijft de hero gewoon zichtbaar,
want dan zet niets de klasse ooit terug. */
html.js .hero-beeld,
html.js .hero-duo { opacity: 0; }
html.js .hero-beeld.klaar,
html.js .hero-duo.klaar { opacity: 1; transition: opacity .5s ease-out; }
@media (prefers-reduced-motion: reduce) {
html.js .hero-beeld.klaar,
html.js .hero-duo.klaar { transition: none; }
}
/* ── Veelgestelde vragen ────────────────────────────────────────────
Zelfde ritme als de agenda: een dunne lijn per item en geen kaders. Een
vraag is één regel tekst, dus een kader eromheen zou hem zwaarder maken dan
hij is. */
.vragen { display: grid; gap: 0; }
.vraag { padding: 22px 0; border-top: 1px solid rgba(255, 255, 255, .08); }
.vraag:first-child { border-top: 0; padding-top: 0; }
.vraag h3 { margin: 0 0 8px; font-size: 18px; letter-spacing: .01em; }
.vraag p { margin: 0; max-width: 68ch; color: var(--inkt-zacht);
font-size: 16px; line-height: 1.66; }
@media (min-width: 861px) {
/* Twee kolommen zodra er ruimte is: zes vragen onder elkaar maakt de pagina
onnodig lang, terwijl elk antwoord op zich kort is. */
.vragen { grid-template-columns: 1fr 1fr; column-gap: clamp(32px, 4vw, 64px); }
.vraag:nth-child(2) { border-top: 0; padding-top: 0; }
}
.vraag-link { display: inline-flex; align-items: center; gap: 7px;
margin-top: 12px; min-height: 32px;
font-family: "Barlow Condensed", sans-serif; font-size: 14px;
letter-spacing: .12em; text-transform: uppercase;
color: var(--rood); text-decoration: none;
border-bottom: 1px solid transparent; }
.vraag-link:hover, .vraag-link:focus-visible { border-bottom-color: var(--rood); }
.vraag-link svg { transition: transform .2s; }
.vraag-link:hover svg { transform: translateX(3px); }