:root {
  color-scheme: dark;   /* donkere scrollbalken en formulieren van de browser zelf */
  scrollbar-color: var(--stip) var(--bg);
  /* Filmhuis-stijl: schreeflletter voor koppen, rustige tekstletter, typemachineletter voor kleine labels */
  --font: 'IBM Plex Sans', system-ui, sans-serif;
  --kop: 'Instrument Serif', Georgia, serif;
  --mono: 'IBM Plex Mono', ui-monospace, monospace;
  --hoek: 3px;
  font-synthesis: none;   /* geen nep-vette schreefletter */
  --bg-rgb: 15, 14, 12;
  --accent-rgb: 226, 85, 45;
  --tweede: #C8B27A;
  --tweede-rgb: 200, 178, 122;
  --bg: #0F0E0C;
  --vlak: #171614;
  --vlak2: #211F1C;
  --lijn: #2D2A26;
  --stip: #4C4740;
  --tekst: #ECE6DA;
  --zacht: #9B9488;
  --licht: #CFC8BB;
  --accent: #E2552D;
  --op-accent: #0F0E0C;
}

/* ---------- thema's: kies je eigen kleuren via het tandwiel rechtsboven ---------- */
:root[data-thema="oceaan"] {
  --bg: #0B1220; --bg-rgb: 11, 18, 32; --vlak: #121B2C; --vlak2: #1A2538; --lijn: #24314A; --stip: #3E4D68;
  --accent: #4FB3FF; --accent-rgb: 79, 179, 255; --op-accent: #04121F; --tweede: #7CF0C8; --tweede-rgb: 124, 240, 200;
}
:root[data-thema="bos"] {
  --bg: #0D1411; --bg-rgb: 13, 20, 17; --vlak: #141D18; --vlak2: #1C2721; --lijn: #26342C; --stip: #3F5246;
  --accent: #5BE49B; --accent-rgb: 91, 228, 155; --op-accent: #062014; --tweede: #F5C86B; --tweede-rgb: 245, 200, 107;
}
:root[data-thema="paars"] {
  --bg: #110E18; --bg-rgb: 17, 14, 24; --vlak: #191523; --vlak2: #221D2F; --lijn: #2E2840; --stip: #4A4260;
  --accent: #B98CFF; --accent-rgb: 185, 140, 255; --op-accent: #150A26; --tweede: #FF8FC7; --tweede-rgb: 255, 143, 199;
}
:root[data-thema="roze"] {
  --bg: #150F13; --bg-rgb: 21, 15, 19; --vlak: #1E161B; --vlak2: #291E25; --lijn: #382830; --stip: #57414C;
  --accent: #FF6FAE; --accent-rgb: 255, 111, 174; --op-accent: #26060F; --tweede: #FFC46B; --tweede-rgb: 255, 196, 107;
}
:root[data-thema="licht"] {
  color-scheme: light;
  --bg: #F5F2EE; --bg-rgb: 245, 242, 238; --vlak: #FFFFFF; --vlak2: #ECE7E1; --lijn: #DDD5CC; --stip: #B3A99E;
  --tekst: #17191D; --zacht: #5E636B; --licht: #2E3238;
  --accent: #E2571A; --accent-rgb: 226, 87, 26; --op-accent: #FFFFFF; --tweede: #2F7DE1; --tweede-rgb: 47, 125, 225;
}
:root[data-letter="simpel"] { --font: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --kop: var(--font); --mono: var(--font); }
:root[data-letter="klassiek"] { --font: Georgia, 'Times New Roman', serif; --kop: var(--font); }

* { box-sizing: border-box; }
/* Nooit breder dan het scherm: de iPhone laat je anders de hele pagina opzij schuiven (wiebelig).
   Op html én body, want alleen op body neemt de telefoon het over voor het hele venster en telt hij de rest toch mee. */
html { overflow-x: clip; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--bg); -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }   /* verborgen blijft verborgen, ook als een blok zelf display: grid of flex heeft */
body {
  margin: 0;
  overflow-x: clip;   /* gloed en zwevende posters mogen niet voor een horizontale scrollbalk zorgen */
  background: var(--bg);
  color: var(--tekst);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.5;
}
a { color: var(--tekst); text-decoration: none; }
a:hover { color: var(--accent); }
button, input { font: inherit; }
.accent { color: var(--accent); }

.kop { max-width: 1200px; margin: 0 auto; padding: 14px 16px; display: flex; align-items: center; gap: 16px; }
.logo { font-weight: 800; font-size: 23px; letter-spacing: -1px; }
.logo .punt { color: var(--accent); }
.logo .wat { color: var(--zacht); }
.kop { flex-wrap: wrap; row-gap: 8px; }
.tabs { margin-left: auto; display: flex; gap: 4px; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
/* Past het menu niet naast het logo, dan krijgt het een eigen regel (die je opzij kunt vegen) */
@media (max-width: 1100px) {
  .tabs { order: 3; margin-left: -8px; width: calc(100% + 16px); }
  .kop-profiel { margin-left: auto; }
}
@media (min-width: 1101px) { .kop { flex-wrap: nowrap; } .tabs { min-width: 0; } .kop-profiel { margin-left: 8px; } }
.tabs a { flex: none; }
.tabs a { display: flex; align-items: center; min-height: 38px; padding: 0 12px; border-radius: var(--hoek); font-size: 14px; font-weight: 600; color: var(--zacht); }
.tabs a:hover { color: var(--tekst); }
.tabs a[aria-current="page"] { background: var(--vlak2); color: var(--tekst); }
.tabs a:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

main { max-width: 1200px; margin: 0 auto; padding: 8px 16px 64px; display: flex; flex-direction: column; gap: 36px; }

.intro h1 { margin: 0; font-weight: 800; font-size: clamp(30px, 5vw, 44px); line-height: 1; letter-spacing: -1.5px; }
.intro p { margin: 10px 0 0; max-width: 640px; font-size: 15px; color: var(--licht); }

/* ---------- levendige paginakop: tekst links, beeld rechts, gloed erachter ---------- */
.intro.levend { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 24px 40px; }
.intro.levend::before {
  content: ''; position: absolute; z-index: -1; inset: -40px -16px -20px; pointer-events: none;
  background: radial-gradient(420px 260px at 85% 50%, rgba(var(--accent-rgb), .16), transparent 70%),
              radial-gradient(360px 240px at 65% 20%, rgba(var(--tweede-rgb), .10), transparent 70%);
}
.intro-tekst { grid-column: 1; grid-row: 1; min-width: 0; }
.intro-beeld { grid-column: 2; grid-row: 1; position: relative; width: 340px; height: 270px; zoom: .75; animation: verschijn .6s ease-out both; }
@keyframes verschijn { from { opacity: 0; transform: translateY(12px); } }
@keyframes zweef { 50% { transform: translateY(-8px); } }
@media (max-width: 760px) {
  .intro.levend { grid-template-columns: 1fr; row-gap: 12px; }
  .intro-beeld { grid-column: 1; grid-row: 1; justify-self: center; zoom: .6; }
  .intro-tekst { grid-row: 2; }
  .intro-beeld.swipe-demo { display: none; }   /* op de telefoon is de echte swipekaart al het beeld */
}

/* Waaier van posters */
.waaier { animation: verschijn .6s ease-out both, zweef 6s ease-in-out 1s infinite; }
.waaier img {
  position: absolute; left: 50%; bottom: 10px; width: 128px; aspect-ratio: 2 / 3; object-fit: cover; border-radius: var(--hoek);
  box-shadow: 0 14px 30px rgba(0, 0, 0, .55); transform-origin: 50% 120%;
  transform: translateX(-50%) rotate(calc(var(--i) * 11deg)); transition: transform .4s ease;
}
.waaier img:nth-child(3) { z-index: 2; }
.waaier img:nth-child(2), .waaier img:nth-child(4) { z-index: 1; }
.intro:hover .waaier img { transform: translateX(-50%) rotate(calc(var(--i) * 15deg)); }

/* Swipe-demo: de bovenste kaart swipet steeds naar rechts */
.swipe-demo .demo-kaart { position: absolute; left: 90px; top: 10px; width: 160px; aspect-ratio: 2 / 3; border-radius: var(--hoek); overflow: hidden; box-shadow: 0 16px 34px rgba(0, 0, 0, .55); }
.swipe-demo .demo-kaart img { width: 100%; height: 100%; object-fit: cover; display: block; }
.swipe-demo .onder { transform: rotate(calc(var(--i) * -5deg)) translateX(calc(var(--i) * -10px)) scale(calc(1 - var(--i) * .05)); filter: brightness(.6); }
.swipe-demo .boven { z-index: 2; animation: swipe-rechts 3.6s ease-in-out infinite; }
/* Eigen naam: .stempel is van de echte swipekaart */
.demo-stempel {
  position: absolute; top: 18px; left: 12px; padding: 4px 10px; border: 3px solid #5BE49B; border-radius: var(--hoek); color: #5BE49B;
  font-weight: 800; font-size: 16px; text-transform: uppercase; transform: rotate(-12deg); background: rgba(var(--bg-rgb), .5);
  opacity: 0; animation: demo-stempel 3.6s ease-in-out infinite;
}
.demo-hand { position: absolute; z-index: 3; left: 190px; top: 170px; font-size: 34px; animation: hand 3.6s ease-in-out infinite; }
@keyframes swipe-rechts {
  0%, 25% { transform: none; opacity: 1; }
  60% { transform: translateX(150px) rotate(16deg); opacity: 0; }
  61% { transform: none; opacity: 0; }
  80%, 100% { transform: none; opacity: 1; }
}
@keyframes demo-stempel { 0%, 22% { opacity: 0; } 35%, 55% { opacity: 1; } 60%, 100% { opacity: 0; } }
@keyframes hand { 0%, 20% { transform: none; opacity: 1; } 55% { transform: translateX(110px); opacity: 0; } 61%, 100% { transform: none; opacity: 0; } 85% { opacity: 1; } }

/* Scan-demo: dvd-hoes met een scanlijn */
.scan-demo .dvd-hoes {
  position: absolute; left: 95px; top: 18px; width: 158px; height: 222px; display: flex; border-radius: var(--hoek); overflow: hidden;
  background: #0B0D10; border: 2px solid #2A3038; box-shadow: 0 16px 34px rgba(0, 0, 0, .55);
}
.dvd-rug { flex: 0 0 16px; writing-mode: vertical-rl; font-size: 9px; font-weight: 800; letter-spacing: 2px; color: var(--zacht); display: flex; align-items: center; justify-content: center; background: #15191F; }
.scan-demo .dvd-hoes img { flex: 1; min-width: 0; object-fit: cover; }
.scan-lijn { position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--accent); box-shadow: 0 0 18px 6px rgba(var(--accent-rgb), .55); animation: scan 3s ease-in-out infinite; }
@keyframes scan { 0% { top: 2%; } 50% { top: 96%; } 100% { top: 2%; } }
.scan-demo .hoek { position: absolute; width: 26px; height: 26px; border: 3px solid var(--accent); }
.hoek.lb { left: 80px; top: 4px; border-right: 0; border-bottom: 0; border-radius: 8px 0 0 0; }
.hoek.rb { left: 242px; top: 4px; border-left: 0; border-bottom: 0; border-radius: 0 8px 0 0; }
.hoek.lo { left: 80px; top: 230px; border-right: 0; border-top: 0; border-radius: 0 0 0 8px; }
.hoek.ro { left: 242px; top: 230px; border-left: 0; border-top: 0; border-radius: 0 0 8px 0; }
.herkend {
  position: absolute; z-index: 2; left: 50%; bottom: 0; transform: translateX(-50%); max-width: 320px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  padding: 7px 14px; border-radius: var(--hoek); background: #5BE49B; color: #0B2416; font-size: 14px; font-weight: 600;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .4); animation: zweef 3s ease-in-out infinite;
}

/* Aanraad-demo: poster met een tekstballon van een vriend */
.demo-poster { position: absolute; width: 140px; aspect-ratio: 2 / 3; border-radius: var(--hoek); overflow: hidden; box-shadow: 0 16px 34px rgba(0, 0, 0, .55); }
.demo-poster img { width: 100%; height: 100%; object-fit: cover; display: block; }
.aanraad-demo .demo-poster { left: 30px; top: 30px; transform: rotate(-7deg); }
.ballon {
  position: absolute; right: 0; top: 24px; width: 200px; display: flex; flex-direction: column; gap: 6px; padding: 14px 16px;
  border-radius: 18px 18px 18px 4px; background: var(--vlak2); border: 1px solid var(--lijn); box-shadow: 0 14px 30px rgba(0, 0, 0, .5);
  font-size: 15px; font-weight: 600; animation: zweef 5s ease-in-out infinite;
}
.ballon-wie { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; color: var(--zacht); }
.ballon-wie b { color: var(--tekst); }
.ballon-ster { color: var(--accent); letter-spacing: 2px; }
.hartje {
  position: absolute; left: 150px; top: 190px; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--accent); color: var(--op-accent); font-size: 24px; box-shadow: 0 8px 20px rgba(var(--accent-rgb), .45);
  animation: klop 2s ease-in-out infinite;
}

/* Vrienden-beeld: avatars die rond een poster zweven */
.vrienden-beeld .midden { left: 100px; top: 30px; }
.zwever { position: absolute; display: flex; flex-direction: column; align-items: center; gap: 4px; animation: zweef 4s ease-in-out infinite; }
.zwever .avatar { width: 64px; height: 64px; font-size: 26px; box-shadow: 0 0 0 4px var(--bg), 0 10px 24px rgba(0, 0, 0, .5); }
.zwever small { padding: 2px 8px; border-radius: var(--hoek); background: var(--accent); color: var(--op-accent); font-size: 12px; font-weight: 800; }
.zwever.z0 { left: 20px; top: 20px; }
.zwever.z1 { right: 18px; top: 6px; animation-delay: -1s; }
.zwever.z2 { left: 34px; top: 160px; animation-delay: -2s; }
.zwever.z3 { right: 30px; top: 150px; animation-delay: -3s; }

/* Blend-voorbeeld: zo ziet een blend eruit */
.blend-voorbeeld {
  display: flex; flex-direction: column; gap: 10px; padding: 18px; border-radius: var(--hoek); height: auto; width: 320px;
  background: linear-gradient(130deg, rgba(var(--accent-rgb), .2), rgba(var(--tweede-rgb), .12) 70%), var(--vlak);
  border: 1px solid rgba(var(--accent-rgb), .55); box-shadow: 0 20px 40px rgba(0, 0, 0, .45); transform: rotate(2deg);
  animation: verschijn .6s ease-out both, zweef 6s ease-in-out 1s infinite;
}
.voorbeeld-label { position: absolute; top: -11px; right: 18px; padding: 3px 10px; border-radius: var(--hoek); background: var(--tekst); color: var(--bg); font-size: 12px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; }
.bv-kop { display: flex; align-items: center; justify-content: space-between; }
.blend-voorbeeld .blend-duo .avatar + .avatar { margin-left: -14px; box-shadow: 0 0 0 3px var(--vlak); }
.bv-score { display: flex; flex-direction: column; align-items: flex-end; }
.bv-score b { font-size: 44px; font-weight: 800; letter-spacing: -2px; line-height: 1; color: var(--accent); }
.bv-score small { font-size: 13px; font-weight: 600; color: var(--licht); }
.bv-kop-tekst { font-size: 13px; font-weight: 800; color: var(--accent); }
.bv-posters { display: flex; gap: 8px; }
.bv-posters span { flex: 1; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.bv-posters img { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; border-radius: var(--hoek); }
.bv-posters small { font-size: 11px; color: var(--zacht); white-space: nowrap; }
.bv-samen { font-size: 13px; font-weight: 600; color: var(--licht); padding-top: 8px; border-top: 1px solid var(--lijn); }

@media (prefers-reduced-motion: reduce) {
  .intro-beeld, .intro-beeld *, .waaier { animation: none !important; }
  .swipe-demo .demo-stempel { opacity: 1; }
  .demo-hand { display: none; }
}

.raster { display: flex; flex-wrap: wrap; gap: 32px; align-items: flex-start; }
.scanner { flex: 1 1 320px; max-width: 420px; display: flex; flex-direction: column; gap: 14px; }
.resultaat { flex: 999 1 480px; min-width: 0; }

.dropzone {
  position: relative; display: flex; align-items: center; justify-content: center;
  min-height: 300px; border-radius: var(--hoek); background: var(--vlak); border: 2px dashed var(--stip);
  overflow: hidden; cursor: pointer; transition: border-color .15s;
}
.dropzone:hover, .dropzone.sleep { border-color: var(--accent); }
.dropzone:focus-within { outline: 3px solid var(--accent); outline-offset: 3px; }
.dropzone input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.dropzone img { width: 100%; height: 100%; max-height: 520px; object-fit: contain; display: block; }
.leeg { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 24px; text-align: center; color: var(--zacht); }
.leeg[hidden] { display: none; }   /* zodra er een foto is, verdwijnt de uitleg */
.leeg svg { color: var(--accent); }
.leeg strong { color: var(--tekst); font-size: 16px; }
.leeg span { font-size: 14px; }
.scanlijn {
  position: absolute; left: 16px; right: 16px; top: 50%; height: 3px; border-radius: 2px;
  background: var(--accent); box-shadow: 0 0 16px var(--accent); animation: scan 1.4s ease-in-out infinite;
}
@keyframes scan { 0% { top: 6%; } 50% { top: 92%; } 100% { top: 6%; } }
@media (prefers-reduced-motion: reduce) { .scanlijn { animation: none; } }

.status { margin: 0; min-height: 24px; font-size: 14px; font-weight: 600; color: var(--zacht); }
.status.fout { color: #FF8A7A; }
main > .status:empty, main > div:empty { display: none; }   /* lege rijen (nog niets te tonen) geven geen extra witruimte */

.zelf { display: flex; flex-direction: column; gap: 6px; }
.zelf label { font-size: 13px; color: var(--zacht); }
.zelf-rij { display: flex; gap: 8px; }
.zelf input { flex: 1; min-width: 0; min-height: 44px; padding: 0 14px; border-radius: var(--hoek); border: 1.5px solid var(--lijn); background: var(--vlak); color: var(--tekst); }
.zelf input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }

.knop {
  min-height: 40px; padding: 0 18px; border-radius: var(--hoek); border: 1.5px solid var(--lijn);
  background: transparent; color: var(--tekst); font-weight: 600; font-size: 14px; cursor: pointer;
}
.knop.vol, .zelf button { background: var(--accent); border-color: var(--accent); color: var(--op-accent); font-weight: 700; }
.zelf button { min-height: 44px; padding: 0 18px; border-radius: var(--hoek); border: 0; cursor: pointer; }
.knop:focus-visible, .zelf button:focus-visible, .chip:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

.uitleg, .kaart { background: var(--vlak); border: 1px solid var(--lijn); border-radius: var(--hoek); padding: 20px; }
.uitleg h2 { margin: 0 0 12px; font-size: 21px; letter-spacing: -0.5px; }
.uitleg ol { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 12px; color: var(--licht); }
.uitleg strong { color: var(--tekst); }

.kaart { display: flex; flex-direction: column; gap: 22px; }
.kaart-kop { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; }
.kaart-kop img { flex: 0 0 140px; width: 140px; aspect-ratio: 2 / 3; object-fit: cover; border-radius: var(--hoek); background: var(--vlak2); }
.kaart-tekst { flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
/* Scanresultaat: grote kaart met de achtergrondfoto van de film erachter */
.scan-kaart { position: relative; overflow: hidden; isolation: isolate; }
.scan-achtergrond { position: absolute; z-index: -2; inset: 0; width: 100%; height: 340px; object-fit: cover; opacity: .32; }
.scan-kaart::before {
  content: ''; position: absolute; z-index: -1; inset: 0;
  background: linear-gradient(180deg, rgba(var(--bg-rgb), .2) 0, rgba(var(--bg-rgb), .75) 200px, var(--vlak) 340px);
}
.scan-kop { display: flex; flex-wrap: wrap; gap: 28px; align-items: flex-end; }
.scan-fotos { position: relative; flex: 0 0 140px; width: 140px; }
.scan-fotos.dubbel { flex-basis: 176px; width: 176px; padding-right: 36px; }
.scan-foto, .scan-poster { display: block; width: 140px; aspect-ratio: 2 / 3; object-fit: cover; border-radius: var(--hoek); background: var(--vlak2); box-shadow: 0 16px 34px rgba(0, 0, 0, .5); }
.scan-foto { position: relative; z-index: 1; transform: rotate(-3deg); }
.scan-poster { position: absolute; top: 10px; left: 36px; transform: rotate(6deg); filter: brightness(.8); }
.scan-kaart .tagline { font-size: 15px; }
.label.herkend { background: #5BE49B; color: #0B2416; }
.scan-score { display: flex; align-items: center; gap: 8px; font-weight: 700; }
.scan-score a { color: var(--tekst); }
.scan-score a:hover { color: var(--accent); }
.scan-samenvatting { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.scan-kaart .knoppen { margin-top: 4px; }
#resultaat-meer { display: flex; flex-direction: column; gap: 32px; margin-top: 40px; }
#resultaat-meer > .rij-blok { margin: 0; }
#resultaat-meer:empty { display: none; }
@media (max-width: 560px) { .scan-fotos { flex-basis: 120px; width: 120px; } .scan-fotos.dubbel { flex-basis: 150px; width: 150px; padding-right: 30px; } .scan-foto, .scan-poster { width: 120px; } .scan-poster { left: 30px; } }

.labels { display: flex; flex-wrap: wrap; gap: 6px; }
.label { background: var(--vlak2); border-radius: var(--hoek); padding: 4px 12px; font-size: 13px; font-weight: 700; }
.label b { color: var(--accent); }
.kaart h2 { margin: 0; font-size: clamp(24px, 3.5vw, 32px); line-height: 1; letter-spacing: -1px; }
.meta { font-size: 15px; color: var(--zacht); }
.samenvatting { margin: 0; color: var(--licht); }
.bron { font-size: 13px; color: var(--zacht); }
.bron a { text-decoration: underline; color: var(--zacht); }

/* De vakjes groeien mee, zodat een rij altijd vol is en er geen leeg vak overblijft */
.feiten { margin: 0; display: flex; flex-wrap: wrap; gap: 1px; background: var(--lijn); border: 1px solid var(--lijn); border-radius: var(--hoek); overflow: hidden; }
.feiten div { flex: 1 1 200px; background: var(--vlak); padding: 14px 16px; }
.feiten a { color: inherit; }
.feiten a:hover { color: var(--accent); }
.imdb-label { display: inline-block; padding: 0 5px; border-radius: 4px; background: #F5C518; color: #000; font-weight: 800; font-size: 12px; letter-spacing: -.2px; }
.feiten dt { font-size: 13px; color: var(--zacht); }
.feiten dd { margin: 0; font-weight: 700; line-height: 1.35; }

/* Waar kijken: bioscoop, streamen, huren, kopen */
.kijken { display: flex; flex-direction: column; gap: 18px; }
.blok.kijken h2 { margin-bottom: 0; }
.kijken .kast-leeg { margin: 0; }
.bios {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 14px 16px; max-width: 640px;
  border: 1px solid var(--lijn); border-radius: var(--hoek); background: var(--vlak);
}
.bios.nu { border-color: rgba(var(--accent-rgb), .55); background: linear-gradient(100deg, rgba(var(--accent-rgb), .14), var(--vlak) 60%); }
.bios-icoon { font-size: 26px; line-height: 1; }
.bios > div { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 160px; }
.bios small { font-size: 13px; color: var(--zacht); }
.kijk-rij h3 { margin: 0 0 8px; font-size: 13px; font-weight: 600; letter-spacing: .4px; text-transform: uppercase; color: var(--zacht); }
.diensten { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.dienst {
  display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 5px 12px 5px 5px;
  border: 1px solid var(--lijn); border-radius: var(--hoek); background: var(--vlak); color: var(--tekst);
  font-size: 13px; font-weight: 600; transition: border-color .15s, transform .15s;
}
.dienst:hover { border-color: var(--accent); color: var(--tekst); transform: translateY(-1px); }
.dienst img { width: 30px; height: 30px; border-radius: var(--hoek); display: block; }
.kijk-bron { margin: 0; font-size: 13px; color: var(--zacht); }
.kijk-bron a { color: var(--accent); }

.acties { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; justify-content: space-between; }
.rating { display: flex; flex-direction: column; gap: 2px; }
.rating > span:first-child { font-size: 14px; font-weight: 700; }
.rating small { font-size: 13px; color: var(--zacht); }
.sterren { display: flex; }
.ster { display: flex; }
.ster button {
  width: 21px; height: 44px; padding: 0; border: 0; background: none; overflow: hidden; cursor: pointer;
  color: var(--stip); font-size: 30px; line-height: 44px;
}
.ster button span { display: inline-block; width: 42px; text-align: center; }
.ster button.links { text-align: left; }
.ster button.rechts { direction: rtl; }
.ster button.aan { color: var(--accent); }
.ster button:focus-visible { outline: 2px solid var(--accent); }

.anders { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; border-top: 1px solid var(--lijn); padding-top: 16px; font-size: 13px; color: var(--zacht); }
.chip { min-height: 36px; padding: 0 12px; border-radius: var(--hoek); border: 1px solid var(--lijn); background: none; color: var(--licht); font-size: 13px; cursor: pointer; }
.chip:hover { border-color: var(--accent); }

details { font-size: 14px; color: var(--zacht); }
details summary { cursor: pointer; font-weight: 600; min-height: 32px; }
details ol { margin: 8px 0 0; padding-left: 22px; display: flex; flex-direction: column; gap: 4px; }
details a { color: var(--licht); }

.kast-kop { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 18px; }
.kast-kop h2 { margin: 0; font-size: 21px; letter-spacing: -0.5px; }
.kast-kop span { font-size: 13px; color: var(--zacht); }
.kast-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 14px; }
.kast-item { position: relative; display: flex; flex-direction: column; gap: 8px; }
.kast-item > button.open { padding: 0; border: 0; background: none; color: inherit; text-align: left; cursor: pointer; display: flex; flex-direction: column; gap: 8px; }
.kast-item img { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; border-radius: var(--hoek); background: var(--vlak2); display: block; }
.kast-item strong { font-size: 14px; line-height: 1.2; }
.kast-item small { font-size: 12px; color: var(--zacht); }
.kast-item small.nieuw { color: var(--accent); }
.kast-item .weg {
  position: absolute; top: 8px; right: 8px; width: 36px; height: 36px; border-radius: 50%; border: 0;
  background: rgba(var(--bg-rgb), .85); color: var(--tekst); font-size: 18px; cursor: pointer;
}
.kast-leeg { grid-column: 1 / -1; color: var(--zacht); }

/* ---------- gedeeld: zoekbalk, rijen, posterkaarten ---------- */

.verborgen { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.zoekbalk { display: flex; gap: 8px; max-width: 520px; margin-top: 16px; }
.zoekbalk input {
  flex: 1; min-width: 0; min-height: 44px; padding: 0 18px; border-radius: var(--hoek); border: 1.5px solid var(--lijn);
  background: var(--vlak); color: var(--tekst); font-size: 16px;
}
.zoekbalk input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.zoekbalk button { min-height: 44px; padding: 0 20px; border-radius: var(--hoek); border: 0; background: var(--accent); color: var(--op-accent); font-weight: 700; cursor: pointer; }
.zoekbalk button:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

.blok-kop { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 6px 16px; margin-bottom: 12px; }
.blok-kop h2, .blok h2 { margin: 0; font-size: 21px; letter-spacing: -0.4px; }
.blok h2 { margin-bottom: 12px; }
.blok-link { color: var(--accent); font-weight: 600; font-size: 14px; }
.blok-link:hover { text-decoration: underline; color: var(--accent); }
.tel { font-size: 13px; color: var(--zacht); }

.rij {
  display: grid; grid-auto-flow: column; grid-auto-columns: 128px; gap: 14px; margin: 0; padding: 0 0 4px;
  overflow-x: auto; scroll-snap-type: x proximity; list-style: none;
  scrollbar-width: none;   /* geen balk: pijlen met de muis, vegen op je telefoon */
}
.rij::-webkit-scrollbar { display: none; }
.rij > * { scroll-snap-align: start; }

/* Ronde pijlen op de zijkanten van een rij, midden op de posters */
.rij-houder { position: relative; }
.rij-pijl {
  position: absolute; top: calc(192px / 2 - 20px); z-index: 2; width: 40px; height: 40px; padding: 0;
  display: flex; align-items: center; justify-content: center; border-radius: 50%; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, .14); background: rgba(var(--bg-rgb), .82); color: var(--tekst);
  box-shadow: 0 6px 20px rgba(0, 0, 0, .45);
  backdrop-filter: blur(8px); transition: opacity .2s, transform .15s, background .15s;
}
.rij-pijl svg { width: 19px; height: 19px; }
.rij-pijl.links { left: 8px; }
.rij-pijl.rechts { right: 8px; }
.rij-pijl:hover { background: var(--accent); color: var(--op-accent); border-color: transparent; transform: scale(1.06); }
.rij-pijl:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.rij-pijl.uit { opacity: 0; pointer-events: none; }
.rij-houder:has(.cast) .rij-pijl { top: calc(156px / 2 - 20px); }
@media (hover: none) { .rij-pijl { display: none; } }
.poster-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 20px 14px; }

.pkaart { display: flex; flex-direction: column; gap: 5px; min-width: 0; color: var(--tekst); }
.pkaart-beeld { display: block; border-radius: var(--hoek); overflow: hidden; background: var(--vlak2); aspect-ratio: 2 / 3; }
.pkaart-beeld img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .2s; }
.pkaart-beeld .poster-leeg { height: 100%; border-radius: 0; }
a.pkaart:hover .pkaart-beeld img { transform: scale(1.04); }
a.pkaart:hover strong { color: var(--accent); }
a.pkaart:focus-visible { outline: none; }
a.pkaart:focus-visible .pkaart-beeld { outline: 3px solid var(--accent); outline-offset: 3px; }
.pkaart strong { font-size: 14px; line-height: 1.2; }
.pkaart small { font-size: 12px; color: var(--zacht); }
.kast-item > .pkaart img { aspect-ratio: auto; border-radius: 0; }
/* Op de telefoon alles een maatje kleiner: kleinere posters, dus meer films en series in beeld */
@media (max-width: 760px) {
  main { gap: 26px; }
  .rij:not(.cast):not(.stills):not(.fotorij) { grid-auto-columns: 96px; gap: 10px; }
  .poster-raster { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 16px 10px; }
  .pkaart { gap: 4px; }
  .pkaart-beeld { border-radius: var(--hoek); }
  .pkaart strong { font-size: 13px; }
  .pkaart small { font-size: 11px; }
  .blok-kop { margin-bottom: 10px; }
  .blok-kop h2, .blok h2 { font-size: 18px; letter-spacing: -0.3px; }
  .blok-link { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) { .pkaart-beeld img { transition: none; } }

.meer-link { color: var(--accent); font-weight: 600; }

.sterren button:disabled { cursor: default; opacity: .5; }

/* ---------- titelpagina ---------- */

.titel-kop { position: relative; border-radius: var(--hoek); overflow: hidden; background: var(--vlak); }
.titel-kop .achtergrond { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .35; }
.titel-kop::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, var(--bg) 0%, rgba(var(--bg-rgb), .75) 55%, rgba(var(--bg-rgb), .4) 100%); }
.titel-kop-inhoud { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 28px; padding: clamp(18px, 3vw, 36px); align-items: flex-end; }
.titel-poster { flex: 0 0 180px; width: 180px; aspect-ratio: 2 / 3; object-fit: cover; border-radius: var(--hoek); box-shadow: 0 18px 40px rgba(0, 0, 0, .5); }
.titel-tekst { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.titel-tekst h1 { margin: 0; font-size: clamp(28px, 4.5vw, 44px); line-height: 1; letter-spacing: -1.5px; }
.tagline { margin: 0; font-style: italic; color: var(--licht); }
.titel-acties { display: flex; flex-wrap: wrap; gap: 16px 32px; align-items: flex-end; justify-content: space-between; margin-top: 12px; }
.knoppen { display: flex; flex-wrap: wrap; gap: 10px; }
a.knop { display: inline-flex; align-items: center; }
.knop.stil { display: inline-flex; align-items: center; cursor: default; color: var(--zacht); }
@media (max-width: 560px) { .titel-poster { flex-basis: 120px; width: 120px; } }

.over .samenvatting { max-width: 760px; font-size: 15px; margin-bottom: 16px; }

.cast { grid-auto-columns: 104px; }
.cast li, .cast-link { display: flex; flex-direction: column; gap: 4px; }
.cast-link { color: var(--tekst); }
a.cast-link img { transition: transform .2s, box-shadow .2s; }
a.cast-link:hover img { transform: translateY(-3px); box-shadow: 0 0 0 2px var(--accent); }
a.cast-link:hover strong { color: var(--accent); }

/* Pagina van een acteur of actrice */
.persoon-kop .achtergrond { filter: blur(24px) saturate(1.2); transform: scale(1.2); opacity: .3; }
.persoon-kop .cijfers { margin-top: 6px; }
.persoon-kop .cijfers div { min-width: 110px; padding: 10px 16px; }
.persoon-kop .cijfers dd { font-size: 22px; }
.knop .imdb-label { margin-right: 7px; }
.persoon-leeg { display: flex; align-items: center; justify-content: center; background: var(--vlak2); font-size: 80px; font-weight: 800; color: var(--stip); }
.persoon-bio { white-space: pre-line; margin-bottom: 8px !important; }
button.lees-verder { background: none; border: 0; padding: 0; font: inherit; font-weight: 700; cursor: pointer; }
.rollen-filter { max-width: 360px; margin-bottom: 16px; }
.rollen-lijst { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; border-top: 1px solid var(--lijn); }
.rollen-lijst li { display: flex; align-items: center; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--lijn); }
.rol-jaar { flex: 0 0 72px; font-size: 14px; font-weight: 700; color: var(--zacht); font-variant-numeric: tabular-nums; }
.rol-titel { flex: 1; min-width: 0; display: flex; align-items: center; gap: 14px; color: var(--tekst); }
.rol-titel img, .rol-poster-leeg { flex: 0 0 40px; width: 40px; aspect-ratio: 2 / 3; object-fit: cover; border-radius: var(--hoek); background: var(--vlak2); }
.rol-titel span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rol-titel strong { line-height: 1.25; }
.rol-titel small { font-size: 13px; color: var(--zacht); line-height: 1.3; }
.rol-titel:hover strong { color: var(--accent); }
.rol-mijn { flex: 0 0 auto; padding: 4px 10px; border-radius: var(--hoek); background: var(--accent); color: var(--op-accent); font-size: 13px; font-weight: 700; }
.rol-mijn.kijklijst { background: var(--vlak2); color: var(--licht); }
@media (max-width: 560px) { .rol-jaar { flex-basis: 44px; font-size: 13px; } .rollen-lijst li { gap: 10px; } }
.cast img, .cast-leeg { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; border-radius: var(--hoek); background: var(--vlak2); }
.cast-leeg { display: flex; align-items: center; justify-content: center; font-size: 36px; font-weight: 800; color: var(--stip); }
.cast strong { font-size: 13px; line-height: 1.2; }
.cast small { font-size: 12px; color: var(--zacht); line-height: 1.3; }

.seizoenen, .afleveringen { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.seizoenen { gap: 12px; }
.seizoen { background: var(--vlak); border: 1px solid var(--lijn); border-radius: var(--hoek); overflow: hidden; }
.seizoen-kop { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: center; padding: 12px; }
.seizoen-kop img, .seizoen-leeg { flex: 0 0 48px; width: 48px; aspect-ratio: 2 / 3; object-fit: cover; border-radius: var(--hoek); background: var(--vlak2); }
.seizoen-leeg { display: flex; align-items: center; justify-content: center; font-weight: 800; color: var(--stip); }
.seizoen-tekst { flex: 1 1 200px; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.seizoen-tekst strong { font-size: 16px; }
.seizoen-tekst small, .afl-rating small { font-size: 13px; color: var(--zacht); }
.afl-rating { display: flex; flex-direction: column; gap: 2px; }
.afleveringen { border-top: 1px solid var(--lijn); }
.afleveringen li { display: flex; flex-wrap: wrap; gap: 6px 20px; justify-content: space-between; align-items: center; padding: 10px 14px; border-top: 1px solid var(--lijn); }
.afleveringen li:first-child { border-top: 0; }
.afl-tekst { flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.afl-tekst small { font-size: 13px; color: var(--zacht); }
.afl-tekst p { margin: 4px 0 0; font-size: 14px; color: var(--licht); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.stil-tekst { padding: 16px; margin: 0; color: var(--zacht); }

/* ---------- mijn lijst ---------- */

.cijfers { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 0; }
.cijfers div { min-width: 96px; padding: 8px 14px; border-radius: var(--hoek); background: var(--vlak); border: 1px solid var(--lijn); }
.cijfers dt { font-size: 12px; color: var(--zacht); }
.cijfers dd { margin: 0; font-size: 19px; font-weight: 800; letter-spacing: -0.3px; }
.filter-rij .filter { max-width: 360px; }
.sorteer { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--zacht); }
.sorteer select { min-height: 40px; padding: 0 12px; border-radius: var(--hoek); border: 1.5px solid var(--lijn); background: var(--vlak); color: var(--tekst); font: inherit; }

/* ---------- accounts, profiel, vrienden, blend ---------- */

.kop-profiel { display: flex; align-items: center; gap: 10px; }

/* Tandwiel rechtsboven: taal, thema en lettertype */
.tandwiel {
  flex: none; width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; padding: 0; cursor: pointer;
  border-radius: 50%; border: 1px solid var(--lijn); background: var(--vlak); color: var(--zacht); transition: color .15s, transform .3s;
}
.tandwiel svg { width: 19px; height: 19px; }
.tandwiel:hover { color: var(--accent); transform: rotate(45deg); }
.tandwiel:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.kiezer.instellingen { width: min(560px, calc(100% - 32px)); }
.instellingen-kop { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.instellingen-kop h2 { margin: 0; }
.keuze-groep { border: 0; padding: 0; margin: 18px 0 0; }
.keuze-groep legend { padding: 0; margin-bottom: 10px; font-weight: 700; }
.keuzes { display: flex; flex-wrap: wrap; gap: 8px; }
.keuze {
  display: flex; align-items: center; gap: 10px; min-height: 46px; padding: 6px 14px 6px 8px; border-radius: var(--hoek); cursor: pointer;
  border: 1.5px solid var(--lijn); background: var(--bg); color: var(--tekst); font: inherit; font-weight: 600;
}
.keuze:hover { border-color: var(--stip); }
.keuze[aria-pressed="true"] { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .25); }
.keuze:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.taal-keuze { padding-left: 12px; }
.vlag { font-size: 20px; line-height: 1; }
.staal { display: flex; align-items: flex-end; gap: 3px; width: 38px; height: 28px; padding: 5px; border-radius: var(--hoek); background: var(--staal-bg); border: 1px solid rgba(128, 128, 128, .35); }
.staal i { flex: 1; height: 40%; border-radius: 2px; background: var(--staal-accent); }
.staal i:nth-child(2) { height: 100%; }
.staal i:nth-child(3) { height: 65%; opacity: .6; }
.letter-keuze b { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: var(--hoek); background: var(--vlak2); font-size: 16px; }
.letter-modern b { font-family: 'Instrument Serif', Georgia, serif; font-weight: 400; }
.letter-simpel b { font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; }
.letter-klassiek b { font-family: Georgia, 'Times New Roman', serif; }
.instellingen .knoppen { margin-top: 22px; justify-content: flex-end; }
.profiel-knop { display: flex; border-radius: 50%; }
.profiel-knop:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.profiel-knop[aria-current="page"] .avatar { box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px var(--accent); }
.avatar {
  display: inline-flex; align-items: center; justify-content: center; flex: none; width: 38px; height: 38px; border-radius: 50%;
  background: var(--accent); color: var(--op-accent); font-weight: 800; font-size: 16px; overflow: hidden;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar.klein { width: 32px; height: 32px; font-size: 14px; }
.avatar.groot { width: 88px; height: 88px; font-size: 40px; }
.avatar.tweede { background: var(--tweede); }
.knop.klein { min-height: 34px; padding: 0 14px; font-size: 13px; display: inline-flex; align-items: center; }

.persoon { display: inline-flex; align-items: center; gap: 10px; min-width: 0; color: var(--tekst); }
.persoon > span:last-child { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.persoon strong { font-size: 15px; }
.persoon small { font-size: 13px; color: var(--zacht); }
.persoon:hover strong { color: var(--accent); }

.login { align-items: center; padding-top: 24px; }
.login-kaart { width: 100%; max-width: 420px; display: flex; flex-direction: column; gap: 16px; padding: 26px 24px; border-radius: var(--hoek); background: var(--vlak); border: 1px solid var(--lijn); }
.login-kaart h1 { margin: 0; font-size: 30px; letter-spacing: -1px; line-height: 1; }
.login-uitleg { margin: 0; color: var(--licht); }
.uitnodiger { display: flex; align-items: center; gap: 12px; padding: 10px 14px 10px 10px; border-radius: var(--hoek); background: rgba(var(--accent-rgb), .12); border: 1px solid rgba(var(--accent-rgb), .4); color: var(--licht); }
.uitnodiger[hidden] { display: none; }
.login-form { display: flex; flex-direction: column; gap: 10px; }
.login-form label { display: flex; flex-direction: column; gap: 6px; font-size: 14px; font-weight: 600; }
.login-form label[hidden] { display: none; }
.login-form input, .bewerk input, .bewerk textarea {
  min-height: 44px; padding: 0 14px; border-radius: var(--hoek); border: 1.5px solid var(--lijn); background: var(--bg); color: var(--tekst); font: inherit; font-size: 16px;
}
.bewerk textarea { padding: 12px 16px; resize: vertical; }
.login-form input:focus, .bewerk input:focus, .bewerk textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.login-form small { margin-top: -4px; font-size: 13px; color: var(--zacht); }
.login-form .knop { margin-top: 8px; }

.profiel-kop { display: flex; flex-wrap: wrap; gap: 20px 28px; align-items: flex-start; }
.profiel-tekst { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.profiel-tekst h1 { margin: 0; font-size: clamp(28px, 4.5vw, 40px); line-height: 1; letter-spacing: -1.5px; }
.profiel-tekst .cijfers { margin-top: 6px; }
/* Op de telefoon de vier cijfers naast elkaar op één regel */
@media (max-width: 560px) {
  .profiel-tekst .cijfers { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
  .profiel-tekst .cijfers div { min-width: 0; padding: 6px 8px; }
  .profiel-tekst .cijfers dd { font-size: 17px; }
  .profiel-kop { gap: 14px 18px; }
  .profiel-avatar .avatar.groot { width: 76px; height: 76px; font-size: 32px; }
}
.profiel-tekst .knoppen { margin-top: 6px; }
.bio { margin: 0; max-width: 560px; color: var(--licht); font-size: 15px; }
.bewerk { display: flex; flex-direction: column; gap: 6px; max-width: 480px; margin-top: 8px; }
.bewerk label { font-size: 14px; font-weight: 600; margin-top: 6px; }
.beveiliging { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--lijn); }
.beveiliging h3 { margin: 0; font-size: 18px; }
.beveiliging small { font-size: 13px; color: var(--zacht); }
.beveiliging .status:empty { display: none; }

.top3 { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 200px)); gap: 20px; }
.top-vak { position: relative; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.top-nummer {
  position: absolute; z-index: 1; top: -10px; left: -10px; width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; background: var(--accent); color: var(--op-accent); font-weight: 800; font-size: 18px;
}
.top-vak.leeg .top-nummer { background: var(--vlak2); color: var(--zacht); }
.top-kies {
  display: flex; align-items: center; justify-content: center; text-align: center; padding: 16px; aspect-ratio: 2 / 3; width: 100%;
  border-radius: var(--hoek); border: 2px dashed var(--stip); background: none; color: var(--zacht); font: inherit; font-weight: 600;
}
button.top-kies { cursor: pointer; color: var(--tekst); }
button.top-kies:hover { border-color: var(--accent); }
button.top-kies:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.top-acties { display: flex; flex-wrap: wrap; gap: 6px; }
@media (max-width: 480px) { .top3 { gap: 12px; } .top-nummer { width: 32px; height: 32px; font-size: 15px; } }

button.pkaart { padding: 0; border: 0; background: none; font: inherit; text-align: left; cursor: pointer; }
button.pkaart:hover strong { color: var(--accent); }
button.pkaart:focus-visible { outline: none; }
button.pkaart:focus-visible .pkaart-beeld { outline: 3px solid var(--accent); outline-offset: 3px; }

.kiezer {
  width: min(760px, calc(100% - 32px)); max-height: calc(100% - 48px); padding: 24px; border-radius: var(--hoek);
  border: 1px solid var(--lijn); background: var(--vlak); color: var(--tekst);
}
.kiezer::backdrop { background: rgba(0, 0, 0, .7); }
.kiezer-kop { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.kiezer-kop h2 { margin: 0; font-size: 20px; }
.kiezer-uitleg { color: var(--zacht); font-size: 14px; }

.deel-inhoud { display: flex; flex-wrap: wrap; gap: 24px 40px; align-items: flex-start; }
canvas.deelkaart { width: 200px; height: auto; aspect-ratio: 9 / 16; border-radius: var(--hoek); border: 1px solid var(--lijn); }
.deel-tekst { flex: 1 1 260px; max-width: 460px; display: flex; flex-direction: column; gap: 16px; }
.deel-tekst p { margin: 0; color: var(--licht); }
.deel-knoppen { display: flex; flex-wrap: wrap; gap: 10px; }
.deel-melding { flex-basis: 100%; min-height: 20px; font-size: 14px; color: var(--zacht); word-break: break-all; }

.twee { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 32px; }
.mensen, .vrienden, .feed { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.vriend { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; padding: 10px 14px; border-radius: var(--hoek); background: var(--vlak); border: 1px solid var(--lijn); }
.vriend .knoppen { gap: 8px; }
.vriend-oordeel { font-weight: 700; color: var(--accent); }
.mensen li:not(.vriend) { padding: 4px 0; }

.feed-regel { display: flex; gap: 12px; align-items: center; padding: 10px; border-radius: var(--hoek); background: var(--vlak); border: 1px solid var(--lijn); }
.feed-poster { flex: 0 0 48px; }
.feed-poster img, .feed-poster .poster-leeg { width: 48px; aspect-ratio: 2 / 3; object-fit: cover; border-radius: var(--hoek); display: block; font-size: 10px; }
.feed-tekst { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.feed-wie, .feed-titel { font-weight: 700; }
.feed-titel:hover, .feed-wie:hover { color: var(--accent); }
.feed-sterren { color: var(--accent); letter-spacing: 2px; }
.feed-tekst small { font-size: 13px; color: var(--zacht); }

.blend-kop { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 16px 0 4px; }
.blend-avatars { display: flex; }
.blend-avatars .avatar + .avatar { margin-left: -24px; box-shadow: 0 0 0 6px var(--bg); }
.blend-namen { margin: 0; font-size: 18px; font-weight: 700; }
.blend-namen a:hover { color: var(--accent); }
.blend-match { margin: 0; display: flex; flex-direction: column; align-items: center; color: var(--accent); font-size: clamp(60px, 11vw, 96px); line-height: .9; letter-spacing: -3px; }
.blend-match span { font-size: 18px; letter-spacing: 0; color: var(--tekst); font-weight: 600; margin-top: 8px; }
.blend-uitleg { margin: 0; max-width: 520px; color: var(--zacht); }
.blend-match.voorlopig { color: rgba(var(--accent-rgb), .7); }
.blend-kop .knoppen { justify-content: center; margin-top: 6px; }
.blend-voortgang { display: flex; flex-direction: column; align-items: center; gap: 6px; width: min(360px, 100%); }
.blend-voortgang .balk { width: 100%; height: 8px; border-radius: 4px; background: var(--vlak2); overflow: hidden; }
.blend-voortgang .balk span { display: block; height: 100%; width: calc(min(var(--deel), 1) * 100%); border-radius: 4px; background: var(--accent); }
.blend-voortgang small { font-size: 13px; color: var(--zacht); }
.rij-uitleg { margin: -4px 0 12px; color: var(--zacht); font-size: 14px; max-width: 640px; }
.blend-procent.leeg { color: var(--zacht); }

/* Blends-overzicht: een kaart per vriend */
.blend-lijst { list-style: none; margin: 0 0 32px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.blend-kaart {
  height: 100%; display: flex; flex-direction: column; gap: 12px; padding: 16px; border-radius: var(--hoek);
  border: 1px solid var(--lijn); background: var(--vlak); color: var(--tekst); transition: border-color .15s, transform .15s;
}
.blend-lijst li:first-child .blend-kaart { background: linear-gradient(120deg, rgba(var(--accent-rgb), .16), rgba(var(--tweede-rgb), .1)); border-color: rgba(var(--accent-rgb), .6); }
.blend-kaart:hover { border-color: var(--accent); color: var(--tekst); transform: translateY(-2px); }
.blend-kaart-kop { display: flex; align-items: center; gap: 14px; }
.blend-kaart .blend-duo .avatar + .avatar { margin-left: -16px; box-shadow: 0 0 0 3px var(--vlak); }
.blend-kaart .blend-wie strong { font-size: 16px; }
.blend-score { display: flex; flex-direction: column; align-items: flex-end; text-align: right; }
.blend-score b { font-size: 26px; font-weight: 800; letter-spacing: -1px; color: var(--accent); line-height: 1; }
.blend-score b.voorlopig { color: rgba(var(--accent-rgb), .7); }
.blend-score b.leeg { color: var(--zacht); }
.blend-score small { font-size: 13px; color: var(--licht); font-weight: 600; }
.blend-voortgang.links { align-items: flex-start; width: 100%; }
.blend-samen { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 14px; border-top: 1px solid var(--lijn); font-size: 14px; font-weight: 600; color: var(--licht); }
.mini-posters { display: flex; gap: 6px; list-style: none; margin: 0; padding: 0; }
.mini-posters img { width: 40px; aspect-ratio: 2 / 3; object-fit: cover; border-radius: var(--hoek); background: var(--vlak2); }
.blend-open { margin-top: auto; font-weight: 700; color: var(--accent); }
.blend-leeg { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 12px; color: var(--licht); }
.blend-leeg p { margin: 0; }
@media (max-width: 420px) { .blend-lijst { grid-template-columns: 1fr; } }

/* Hoe werkt een blend: drie stappen */
.blend-hoe summary { color: var(--tekst); cursor: pointer; list-style: none; display: flex; align-items: center; gap: 10px; }
.blend-hoe summary::-webkit-details-marker { display: none; }
.blend-hoe summary h2 { margin: 0; }
.blend-hoe summary::after { content: '+'; font-size: 28px; font-weight: 600; color: var(--accent); line-height: 1; }
.blend-hoe[open] summary::after { content: '−'; }
.stappen { list-style: none; margin: 16px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.stappen li { display: flex; flex-direction: column; gap: 6px; padding: 14px; border-radius: var(--hoek); background: var(--vlak); border: 1px solid var(--lijn); }
.stappen strong { font-size: 15px; }
.stappen li > span:last-child { color: var(--zacht); font-size: 14px; }
.stap-nr { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: var(--accent); color: var(--op-accent); font-weight: 800; }

/* ---------- aanbevolen door vrienden ---------- */

.tabs a { position: relative; }
.badge {
  display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; margin-left: 6px; padding: 0 6px;
  border-radius: var(--hoek); background: var(--accent); color: var(--op-accent); font-size: 12px; font-weight: 800;
}
.pil { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: var(--hoek); background: var(--vlak2); color: var(--licht); font-size: 12px; font-weight: 700; white-space: nowrap; }
.aanrader .pil, .pil.oranje { background: var(--accent); color: var(--op-accent); }
.pil.blauw { background: var(--tweede); color: var(--op-accent); }
.sectie-uitleg { margin: -6px 0 14px; color: var(--zacht); max-width: 640px; font-size: 14px; }

.aanraders { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 460px), 1fr)); gap: 14px; }
.aanrader {
  position: relative; isolation: isolate; overflow: hidden; display: flex; gap: 16px; padding: 16px;
  border-radius: var(--hoek); background: var(--vlak); border: 1px solid var(--lijn);
}
.aanrader.nieuw { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
/* De kleuren van de film als zachte gloed achter de kaart */
.aanrader-gloed { position: absolute; inset: -40px; z-index: -1; width: calc(100% + 80px); height: calc(100% + 80px); object-fit: cover; filter: blur(48px) saturate(1.4); opacity: .28; }
.aanrader::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(100deg, rgba(24, 28, 34, .2), rgba(24, 28, 34, .85) 60%); }
.aanrader-poster { flex: 0 0 92px; align-self: flex-start; }
.aanrader-poster img, .aanrader-poster .poster-leeg { width: 92px; aspect-ratio: 2 / 3; object-fit: cover; border-radius: var(--hoek); display: flex; box-shadow: 0 12px 28px rgba(0, 0, 0, .45); }
.aanrader-inhoud { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.aanrader-van { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 14px; color: var(--licht); }
.aanrader-van a { font-weight: 700; color: var(--tekst); }
.aanrader-van a:hover, .aanrader h3 a:hover { color: var(--accent); }
.aanrader-van small { color: var(--zacht); font-size: 13px; }
.aanrader h3 { margin: 4px 0 0; font-size: 19px; line-height: 1.1; letter-spacing: -0.3px; }
.aanrader-bericht {
  position: relative; margin: 8px 0 4px; padding: 10px 14px 10px 36px; border-radius: var(--hoek);
  background: rgba(var(--bg-rgb), .55); color: var(--tekst); font-size: 14px; line-height: 1.45;
}
.aanrader-bericht::before { content: '“'; position: absolute; left: 10px; top: 0; font-size: 40px; font-weight: 800; line-height: 1; color: var(--accent); }
.aanrader-acties { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-top: auto; padding-top: 12px; }
.aanrader-acties .knop { min-height: 36px; padding: 0 14px; font-size: 13px; }
.aanrader-acties small { flex-basis: 100%; font-size: 13px; color: var(--zacht); }
.knop.stil-knop { border-color: transparent; color: var(--zacht); }
.knop.stil-knop:hover { color: var(--tekst); }
.aanrader-klaar { font-weight: 800; color: var(--accent); }
.aanrader-klaar.blauw { color: var(--tweede); }
.aanrader-klaar.stil { color: var(--zacht); }
@media (max-width: 520px) {
  .aanrader { padding: 14px; gap: 12px; }
  .aanrader-poster { flex-basis: 72px; }
  .aanrader-poster img, .aanrader-poster .poster-leeg { width: 72px; }
}

.leeg-kaart { display: flex; flex-direction: column; gap: 6px; padding: 20px; border-radius: var(--hoek); border: 2px dashed var(--stip); color: var(--zacht); font-size: 14px; }
.leeg-kaart strong { font-size: 17px; color: var(--tekst); }

.fav { position: relative; }
.avatar-stapel { position: absolute; top: 10px; left: 10px; display: flex; }
.avatar-stapel .avatar { box-shadow: 0 0 0 3px var(--bg); }
.avatar-stapel .avatar + .avatar { margin-left: -10px; }
.avatar.meer { background: var(--vlak2); color: var(--tekst); font-size: 12px; }

.verstuurd { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.verstuurd-regel { display: flex; gap: 12px; align-items: center; padding: 10px; border-radius: var(--hoek); background: var(--vlak); border: 1px solid var(--lijn); }
.verstuurd-regel .feed-tekst { flex: 1; }
.verstuurd-bericht { font-style: italic; color: var(--licht) !important; }
.verstuurd-rechts { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 8px; }

.aanrader-label { background: var(--accent) !important; color: var(--op-accent); }

.aanraad-banner { display: flex; flex-direction: column; gap: 10px; padding: 16px 18px; border-radius: var(--hoek); background: var(--vlak); border: 1px solid var(--accent); }
.aanraad-banner-regel { display: flex; gap: 12px; align-items: flex-start; }
.aanraad-banner-regel a { font-weight: 700; }
.aanraad-banner-regel small { color: var(--zacht); }
.aanraad-banner .aanrader-bericht { margin-bottom: 0; background: var(--bg); }

.aanraad { width: min(520px, calc(100% - 32px)); }
.aanraad-kop { display: flex; gap: 16px; align-items: center; margin-bottom: 20px; }
.aanraad-kop img { width: 64px; aspect-ratio: 2 / 3; object-fit: cover; border-radius: var(--hoek); }
.aanraad-kop small { font-size: 13px; color: var(--accent); font-weight: 700; text-transform: uppercase; letter-spacing: 1px; }
.aanraad-kop h2 { margin: 2px 0; font-size: 21px; line-height: 1.1; }
.aanraad-form { display: flex; flex-direction: column; gap: 10px; }
.aanraad-form fieldset { border: 0; margin: 0 0 8px; padding: 0; }
.aanraad-form legend, .aanraad-form label { font-size: 14px; font-weight: 700; margin-bottom: 8px; }
.vriend-keuzes { display: flex; flex-wrap: wrap; gap: 8px; }
.vriend-keuze {
  display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 4px 12px 4px 4px; border-radius: var(--hoek);
  border: 1.5px solid var(--lijn); background: var(--bg); color: var(--tekst); font: inherit; font-weight: 600; cursor: pointer;
}
.vriend-keuze .vinkje { display: none; color: var(--accent); font-weight: 800; }
.vriend-keuze[aria-pressed="true"] { border-color: var(--accent); background: rgba(var(--accent-rgb), .12); }
.vriend-keuze[aria-pressed="true"] .vinkje { display: inline; }
.vriend-keuze:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.aanraad-form textarea {
  padding: 12px 16px; border-radius: var(--hoek); border: 1.5px solid var(--lijn); background: var(--bg); color: var(--tekst); font: inherit; resize: vertical;
}
.aanraad-form textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.teller { align-self: flex-end; font-size: 13px; color: var(--zacht); }
.aanraad-leeg p { color: var(--licht); }

/* De kleuren van een film als zachte gloed achter de kop (op het profiel) */
.kop-gloed {
  position: absolute; z-index: -1; top: -120px; left: calc(50% - 50vw); width: 100vw; height: calc(100% + 200px);
  object-fit: cover; filter: blur(70px) saturate(1.5); opacity: .32; pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse 55% 65% at 65% 40%, #000 20%, transparent 100%);
  mask-image: radial-gradient(ellipse 55% 65% at 65% 40%, #000 20%, transparent 100%);
  transition: opacity .8s;
}

@keyframes zweef { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes vervaag { from { opacity: 0; } }

/* Feed komt rustig binnen, kaart voor kaart */
.feed-kaart { animation: omhoog .5s calc(var(--i, 0) * 60ms) both cubic-bezier(.2, .8, .2, 1); }
@keyframes omhoog { from { opacity: 0; transform: translateY(14px); } }

@keyframes klop { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.25); } }
@media (prefers-reduced-motion: reduce) { .feed-kaart { animation: none; } .kop-gloed { transition: none; } }

/* Vriend uitnodigen */
.uitnodig-regel { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 14px 0 0; color: var(--licht); }
.uitnodigen textarea {
  width: 100%; box-sizing: border-box; margin: 4px 0 14px; padding: 14px 16px; border-radius: var(--hoek); border: 1.5px solid var(--lijn);
  background: var(--bg); color: var(--licht); font: inherit; font-size: 15px; line-height: 1.5; resize: none;
}
.uitnodigen textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.uitnodig-icoon {
  flex: none; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%;
  background: var(--accent); color: var(--op-accent); font-size: 21px;
}
.uitnodig-sluit { margin-left: auto; align-self: flex-start; }
.uitnodigen .deel-melding:empty { display: none; }
.uitnodig-let-op { margin: 0 0 12px; padding: 12px 14px; border-radius: var(--hoek); background: rgba(var(--accent-rgb), .12); border: 1px solid rgba(var(--accent-rgb), .4); font-size: 14px; color: var(--licht); }
.avatar.plus { background: var(--vlak2); color: var(--tekst); font-weight: 400; font-size: 26px; }

.feed.rijk { gap: 8px; }
.feed-kaart {
  display: flex; gap: 12px; align-items: flex-start; padding: 10px 12px; border-radius: var(--hoek);
  background: var(--vlak); border: 1px solid var(--lijn);
}
.feed-kaart.aanbevolen { border-color: var(--accent); }
.feed-avatar { flex: none; border-radius: 50%; }
.feed-midden { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.feed-zin { font-size: 14px; line-height: 1.35; }
.feed-midden .aanrader-bericht { margin: 4px 0 2px; font-size: 14px; background: var(--bg); }
.feed-midden .recensie-tekst { font-size: 14px; }
.feed-onder { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px; margin-top: 2px; }
.feed-onder small, .feed-tijd { font-size: 12px; color: var(--zacht); }
.feed-mini { flex-wrap: wrap; margin: 4px 0 2px; }
.feed-mini a { display: block; border-radius: var(--hoek); }
.feed-mini img, .feed-mini .poster-leeg { width: 40px; aspect-ratio: 2 / 3; object-fit: cover; border-radius: var(--hoek); display: block; font-size: 8px; padding: 2px; }
.feed-mini a:hover img { outline: 2px solid var(--accent); }
.feed-meer { width: 100%; }

.blends { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.blend-kaartje {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--hoek);
  background: var(--vlak); border: 1px solid var(--lijn); color: var(--tekst);
}
.blend-kaartje:hover { border-color: var(--accent); color: var(--tekst); }
.blend-kaartje.beste { background: linear-gradient(120deg, rgba(var(--accent-rgb), .18), rgba(var(--tweede-rgb), .12)); border-color: var(--accent); }
.blend-duo { display: flex; flex: none; }
.blend-duo .avatar + .avatar { margin-left: -12px; box-shadow: 0 0 0 3px var(--vlak); }
.blend-wie { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.blend-wie small { font-size: 12px; color: var(--zacht); }
.blend-procent { font-size: 20px; font-weight: 800; letter-spacing: -1px; color: var(--accent); }

.samen { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.samen-regel { display: flex; align-items: center; gap: 12px; color: var(--tekst); }
.samen-regel img, .samen-regel .poster-leeg { flex: none; width: 36px; aspect-ratio: 2 / 3; object-fit: cover; border-radius: var(--hoek); font-size: 9px; }
.samen-regel span { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.samen-regel small { font-size: 13px; color: var(--tweede); }
.samen-regel:hover strong { color: var(--accent); }

.deel-kaartje {
  display: flex; flex-direction: column; gap: 8px; padding: 22px; border-radius: var(--hoek); color: var(--licht);
  background: radial-gradient(circle at 100% 0%, rgba(var(--accent-rgb), .35), transparent 60%), var(--vlak); border: 1px solid var(--lijn);
}
.deel-kaartje strong { font-size: 22px; color: var(--tekst); letter-spacing: -0.5px; }
.deel-kaartje .knoppen { margin-top: 8px; gap: 8px; }
.deel-kaartje .deel-inhoud { flex-wrap: nowrap; gap: 16px; margin-top: 8px; }
.deel-kaartje canvas.deelkaart { flex: none; width: 132px; border-radius: var(--hoek); }
.deel-kaartje .deel-knoppen { flex: 1; min-width: 0; flex-direction: column; align-items: stretch; gap: 8px; }
.deel-kaartje .deel-knoppen .knop { min-height: 40px; padding: 0 14px; font-size: 14px; }
.deel-kaartje .deel-melding { min-height: 0; font-size: 13px; }
.deel-uitleg { display: flex; flex-direction: column; gap: 8px; }
/* Onderaan de homepage: uitleg links, plaatje en knoppen rechts */
.deel-kaartje.breed { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; padding: 18px 22px; }
.deel-kaartje.breed .deel-uitleg { flex: 1 1 260px; max-width: 460px; font-size: 14px; }
.deel-kaartje.breed strong { font-size: 18px; }
.deel-kaartje.breed .deel-inhoud { flex: 0 1 auto; margin: 0; align-items: center; }
.deel-kaartje.breed canvas.deelkaart { width: 96px; border-radius: var(--hoek); }
.deel-kaartje.breed .deel-knoppen { flex: 0 0 180px; }
.deel-kaartje.breed .knoppen { margin: 0; }

/* ---------- profiel: levendiger ---------- */

.profiel-kop { position: relative; isolation: isolate; align-items: center; padding: 12px 0 4px; }

/* De achtergrond van een profiel: een filmbeeld vanaf de bovenkant dat aan alle kanten wegvloeit in de pagina
   (die zelf de kleur van het beeld krijgt, zie zetSfeer). Je foto en naam staan op het onderste, vervaagde deel. */
body:has(.profiel-kop.met-achtergrond) #kop { position: absolute; z-index: 3; top: 0; left: 0; right: 0; }
.profiel-kop.met-achtergrond { padding-top: clamp(170px, 24vw, 300px); align-items: flex-start; }
.profiel-achtergrond {
  position: absolute; z-index: -1; top: -8px; left: 50%; width: 100vw; height: calc(clamp(170px, 24vw, 300px) + 170px);
  transform: translateX(-50%); overflow: hidden; pointer-events: none;
}
.profiel-achtergrond img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; display: block; }
.profiel-achtergrond::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(var(--bg-rgb), .6) 0%, transparent 22%, transparent 42%, rgba(var(--bg-rgb), .75) 74%, var(--bg) 100%),
    linear-gradient(to right, var(--bg) 0%, rgba(var(--bg-rgb), .5) 12%, transparent 30%, transparent 70%, rgba(var(--bg-rgb), .5) 88%, var(--bg) 100%);
}
@media (max-width: 760px) {
  .profiel-kop.met-achtergrond { padding-top: 150px; }
  .profiel-achtergrond { height: 330px; }
  .profiel-achtergrond::after { background: linear-gradient(to bottom, rgba(var(--bg-rgb), .6) 0%, transparent 25%, transparent 40%, rgba(var(--bg-rgb), .8) 72%, var(--bg) 100%); }
}

/* Lichtbak: een foto groot, met vegen of pijltjes naar de volgende */
dialog.lichtbak {
  width: 100vw; height: 100vh; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0;
  background: rgba(0, 0, 0, .94); color: #ECE6DA; touch-action: pinch-zoom; overscroll-behavior: contain;
}
dialog.lichtbak:not([open]) { display: none; }
dialog.lichtbak::backdrop { background: rgba(0, 0, 0, .9); }
.lichtbak figure { box-sizing: border-box; margin: 0; width: 100%; height: 100%; display: grid; place-items: center; padding: 60px 12px 110px; }
.lichtbak img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 2px; user-select: none; -webkit-user-select: none; }
.lichtbak-sluit, .lichtbak-pijl {
  position: absolute; display: flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .12); color: #fff; cursor: pointer;
}
.lichtbak-sluit { top: max(12px, env(safe-area-inset-top)); right: 12px; width: 44px; height: 44px; }
.lichtbak-sluit svg { width: 20px; height: 20px; }
.lichtbak-pijl { top: 50%; width: 48px; height: 48px; margin-top: -24px; font-size: 30px; line-height: 1; }
.lichtbak-pijl.vorige { left: 12px; }
.lichtbak-pijl.volgende { right: 12px; }
.lichtbak-sluit:hover, .lichtbak-pijl:hover { background: rgba(255, 255, 255, .24); }
.lichtbak-sluit:focus-visible, .lichtbak-pijl:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
@media (hover: none) { .lichtbak-pijl { display: none; } }   /* op de telefoon veeg je */
.lichtbak-onder {
  position: absolute; left: 0; right: 0; bottom: max(18px, env(safe-area-inset-bottom)); display: flex; flex-wrap: wrap;
  align-items: center; justify-content: center; gap: 10px 16px; padding: 0 16px;
}
.lichtbak-teller { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; color: rgba(236, 230, 218, .7); }
.lichtbak .knop { border-color: rgba(236, 230, 218, .45); color: #ECE6DA; background: rgba(0, 0, 0, .3); }
.lichtbak-melding { flex-basis: 100%; margin: 0; text-align: center; font-size: 13px; color: rgba(236, 230, 218, .85); }
.lichtbak-melding:empty { display: none; }
.lichtbak-melding a { color: #ECE6DA; text-decoration: underline; }

/* Beelden op de filmpagina zijn knoppen: tik om te vergroten */
.beeld-knop { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.beeld-knop:focus-visible { outline: 2px solid var(--tekst); outline-offset: 2px; }
.beeld-knop:hover img { outline: 1px solid var(--tekst); outline-offset: -1px; }

/* Achtergrond kiezen: stap 1 films, stap 2 beelden uit die film (tik = kiezen, ⤢ = eerst groot bekijken) */
.achtergrond-stap { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.achtergrond-stap .kiezer-uitleg { margin: 0; }
div.achtergrond-keuze { position: relative; }
.still-kies { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; }
.still-kies:hover img { outline: 2px solid var(--tekst); outline-offset: -2px; }
.still-kies:focus-visible { outline: 2px solid var(--tekst); outline-offset: 2px; }
.still-groot {
  position: absolute; right: 6px; top: 6px; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
  padding: 0; border: 0; border-radius: 50%; background: rgba(0, 0, 0, .6); color: #fff; font-size: 16px; cursor: zoom-in;
}

.kiezer .versie { margin: 14px 0 0; font-family: var(--mono); font-size: 10px; letter-spacing: .06em; color: var(--stip); text-align: right; }

/* De kiezer: filmbeelden in een raster, met zoeken erboven */
.kiezer.achtergrond-kiezer { width: min(640px, calc(100% - 24px)); }
.achtergrond-kiezer .zoekbalk { margin: 12px 0 0; max-width: none; }
.achtergrond-kiezer .status:empty { display: none; }
.achtergrond-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(45%, 180px), 1fr)); gap: 10px; margin-top: 14px; max-height: min(460px, 55vh); overflow-y: auto; }
.achtergrond-keuze { display: flex; flex-direction: column; gap: 4px; padding: 0; border: 0; background: none; color: var(--licht); text-align: left; cursor: pointer; }
.achtergrond-keuze img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; border-radius: 2px; background: var(--vlak2); outline: 1px solid rgba(236, 230, 218, .08); outline-offset: -1px; }
.achtergrond-keuze small { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.achtergrond-keuze:hover img { outline-color: var(--tekst); }
.achtergrond-keuze[aria-pressed="true"] img { outline: 2px solid var(--accent); outline-offset: -2px; }
.achtergrond-keuze:focus-visible { outline: 2px solid var(--tekst); outline-offset: 2px; }
.profiel-avatar { position: relative; display: flex; padding: 3px; border-radius: 50%; background: conic-gradient(from 200deg, var(--accent), var(--tweede), var(--accent)); }
.profiel-avatar .avatar.groot { box-sizing: border-box; width: 96px; height: 96px; font-size: 42px; border: 4px solid var(--bg); }

/* Je eigen profielfoto: klik op het rondje om hem te wijzigen */
.foto-knop { position: relative; display: flex; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--tekst); cursor: pointer; }
.foto-knop:focus-visible { outline: 3px solid var(--accent); outline-offset: 6px; }
.foto-wijzig {
  position: absolute; inset: 5px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  border-radius: 50%; background: rgb(16 19 23 / .65); font-size: 14px; font-weight: 700; opacity: 0; transition: opacity .2s;
}
.foto-wijzig svg { width: 22px; height: 22px; }
.foto-knop:hover .foto-wijzig, .foto-knop:focus-visible .foto-wijzig { opacity: 1; }
/* Op een telefoon kun je niet hoveren: dan staat er altijd een klein labeltje onderaan */
@media (hover: none) {
  .foto-wijzig { inset: auto 0 0; width: max-content; margin: 0 auto; flex-direction: row; padding: 4px 10px; border-radius: var(--hoek); background: var(--vlak2); font-size: 12px; opacity: 1; }
  .foto-wijzig svg { width: 14px; height: 14px; }
}
.foto-veld { border: 0; padding: 0; margin: 6px 0 4px; }
.foto-veld legend { padding: 0; margin-bottom: 8px; font-size: 14px; font-weight: 600; }
.profiel-avatar.actief::after {
  content: ''; position: absolute; right: 6px; bottom: 6px; width: 16px; height: 16px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 0 4px var(--bg); animation: klop 2s ease-in-out infinite;
}
.match-pil {
  align-self: flex-start; display: inline-flex; gap: 4px; padding: 4px 12px; border-radius: var(--hoek);
  background: linear-gradient(120deg, rgba(var(--accent-rgb), .25), rgba(var(--tweede-rgb), .2)); border: 1px solid rgba(var(--accent-rgb), .5);
  color: var(--tekst); font-size: 13px;
}
.match-pil b { color: var(--accent); }
.match-pil:hover { border-color: var(--accent); color: var(--tekst); }
.profiel-tekst h1 { animation: omhoog .6s both cubic-bezier(.2, .8, .2, 1); }

.smaak-labels { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.smaak-labels li {
  padding: 3px 10px; border-radius: var(--hoek); background: var(--vlak2); border: 1px solid var(--lijn);
  font-size: 12px; font-weight: 700; color: var(--licht); animation: omhoog .5s both; animation-delay: .2s;
}
.smaak-labels li:first-child { background: var(--accent); border-color: var(--accent); color: var(--op-accent); }

/* Top 3 met grote omlijnde cijfers achter de posters */
.top3 { grid-template-columns: repeat(3, minmax(0, 170px)); gap: 12px; }
.top-vak { padding-left: 34px; animation: omhoog .6s calc(var(--i, 0) * 120ms) both cubic-bezier(.2, .8, .2, 1); }
.top-vak .pkaart, .top-vak .top-kies, .top-vak .top-acties { position: relative; z-index: 1; }
.top-vak .top-nummer {
  top: auto; bottom: 60px; left: -2px; width: auto; height: auto; border-radius: 0; background: none;
  font-size: 108px; font-weight: 800; line-height: .8; letter-spacing: -6px;
  color: var(--bg); -webkit-text-stroke: 3px var(--accent); paint-order: stroke fill;
}
.top-vak.leeg .top-nummer { background: none; color: var(--bg); -webkit-text-stroke-color: var(--stip); }
@media (max-width: 560px) {
  .top-vak { padding-left: 20px; }
  .top-vak .top-nummer { font-size: 68px; letter-spacing: -3px; bottom: 56px; -webkit-text-stroke-width: 2px; }
}

/* Ratingverdeling: tien staafjes van ½ tot 5 sterren */
.verdeling-blok { max-width: 480px; }
.verdeling { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(10, 1fr); gap: 2px; height: 90px; align-items: end; border-bottom: 1px solid var(--lijn); }
.verdeling li { position: relative; height: 100%; display: flex; align-items: flex-end; outline: none; cursor: default; }
.staaf {
  width: 100%; height: max(3px, calc(var(--h) * 100%)); border-radius: 4px 4px 0 0; background: var(--accent); opacity: .55;
  transform-origin: bottom; animation: groei .7s calc(var(--i) * 50ms) both cubic-bezier(.2, .8, .2, 1);
}
.verdeling li.meest .staaf { opacity: 1; }
.verdeling li:hover .staaf, .verdeling li:focus-visible .staaf { opacity: 1; }
.verdeling li:focus-visible .staaf { outline: 2px solid var(--tekst); outline-offset: 2px; }
.verdeling-tip {
  position: absolute; bottom: calc(100% + 8px); left: 50%; z-index: 2; transform: translateX(-50%); padding: 6px 10px; border-radius: var(--hoek);
  background: var(--vlak2); border: 1px solid var(--lijn); color: var(--tekst); font-size: 13px; font-weight: 600; white-space: nowrap;
  opacity: 0; pointer-events: none; transition: opacity .15s;
}
.verdeling li:hover .verdeling-tip, .verdeling li:focus-visible .verdeling-tip { opacity: 1; }
/* Bij de buitenste staafjes het ballonnetje naar binnen, anders steekt het buiten het scherm */
.verdeling li:nth-child(-n+2) .verdeling-tip { left: 0; transform: none; }
.verdeling li:nth-last-child(-n+2) .verdeling-tip { left: auto; right: 0; transform: none; }
.verdeling-as { display: flex; justify-content: space-between; margin-top: 6px; font-size: 13px; color: var(--zacht); }
@keyframes groei { from { transform: scaleY(0); } }

@media (prefers-reduced-motion: reduce) {
  .profiel-avatar.actief::after, .profiel-tekst h1, .smaak-labels li, .top-vak, .staaf { animation: none; }
}

/* ---------- recensies ---------- */
.recensie { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin: 6px 0 2px; }
.recensie-tekst { margin: 0; white-space: pre-line; overflow-wrap: anywhere; line-height: 1.55; color: var(--licht); }
.lees-verder { font-weight: 700; color: var(--accent); white-space: nowrap; }
.lees-verder:hover { text-decoration: underline; }
.spoiler-knop { border-style: dashed; color: var(--tekst); }
.recensie-lijst { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
/* Op je profiel naast elkaar; op de telefoon vanzelf onder elkaar */
#profiel .recensie-lijst { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 10px; }
.recensie-kaart { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: var(--hoek); background: var(--vlak); border: 1px solid var(--lijn); }
.recensie-kaart.eigen { margin-bottom: 12px; border-color: rgba(var(--accent-rgb), .45); background: radial-gradient(circle at 0% 0%, rgba(var(--accent-rgb), .14), transparent 55%), var(--vlak); }
.recensie-midden { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.recensie-midden h3 { margin: 0; font-size: 16px; letter-spacing: -0.2px; }
.recensie-midden .recensie-tekst { font-size: 14px; }
.recensie-midden h3 a:hover { color: var(--accent); }
.recensie-midden .jaar { font-weight: 400; color: var(--zacht); }
.recensie-midden .knoppen { margin-top: 4px; }
.recensie-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.recensie-meta small { font-size: 13px; color: var(--zacht); }
.recensie-poster { flex: none; width: 52px; }
.recensie-poster img, .recensie-poster .poster-leeg { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; border-radius: var(--hoek); display: block; font-size: 10px; }
.recensie-form { max-width: 640px; margin-bottom: 24px; }
.recensie-form textarea { min-height: 150px; line-height: 1.5; }
.vink-regel { display: flex; align-items: center; gap: 10px; font-weight: 400 !important; color: var(--licht); cursor: pointer; }
.vink-regel input { width: 20px; height: 20px; min-height: 0; padding: 0; accent-color: var(--accent); }
.recensie-tip { font-size: 13px; color: var(--zacht); }
@media (max-width: 560px) {
  .recensie-kaart { padding: 12px; gap: 10px; }
  .recensie-poster { width: 44px; }
}

.voet { max-width: 1200px; margin: 0 auto; padding: 24px 16px 40px; border-top: 1px solid var(--lijn); font-size: 13px; color: var(--zacht); }
.voet a { color: var(--licht); text-decoration: underline; }

/* ---------- swipen ---------- */

.swipe-pagina { overflow-x: clip; }
.swipe-raster { display: flex; flex-wrap: wrap; gap: 40px; align-items: flex-start; }
.swipe { flex: 1 1 300px; max-width: 350px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
.lijsten { flex: 999 1 420px; min-width: 0; display: flex; flex-direction: column; gap: 32px; }

.filter { display: flex; gap: 6px; }
.filter button {
  flex: 1; min-height: 38px; border-radius: var(--hoek); border: 1.5px solid var(--lijn); background: none;
  color: var(--licht); font-weight: 600; font-size: 14px; cursor: pointer;
}
.filter button[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--op-accent); }
.filter button:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

.stapel { position: relative; width: 100%; aspect-ratio: 2 / 3; }
.swipekaart {
  position: absolute; inset: 0; border-radius: var(--hoek); overflow: hidden; background: var(--vlak2);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .45); touch-action: none; user-select: none; cursor: grab;
  transition: transform .2s ease-out;
  --ja: 0; --nee: 0; --gezien: 0;
}
.swipekaart[data-diepte="0"] { animation: naar-voren .2s ease-out; }
.swipekaart[data-diepte="1"] { transform: translateY(14px) scale(.95); filter: brightness(.7); cursor: default; }
.swipekaart[data-diepte="2"] { transform: translateY(28px) scale(.9); filter: brightness(.5); cursor: default; }
.swipekaart.sleept { transition: none; cursor: grabbing; }
.swipekaart.vliegt { transition: transform .26s ease-in; }
@keyframes naar-voren { from { transform: translateY(14px) scale(.95); } }
@media (prefers-reduced-motion: reduce) {
  .swipekaart, .swipekaart.vliegt { transition: none; animation: none; }
}

.swipekaart .poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.geen-poster {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 32px;
  text-align: center; font-size: 34px; font-weight: 800; line-height: 1; letter-spacing: -1px; color: var(--stip);
}
.swipekaart .onder {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 72px 20px 20px; display: flex; flex-direction: column; gap: 6px;
  align-items: flex-start; background: linear-gradient(to bottom, rgba(var(--bg-rgb), 0), rgba(var(--bg-rgb), .92) 45%);
}
.swipekaart h2 { margin: 0; font-size: 24px; line-height: 1.05; letter-spacing: -0.5px; }
.swipekaart .meta { font-size: 14px; color: var(--licht); }
.info-knop {
  margin-top: 4px; min-height: 36px; padding: 0 14px; border-radius: var(--hoek); border: 1px solid rgba(237, 239, 242, .35);
  background: rgba(var(--bg-rgb), .5); color: var(--tekst); font-size: 13px; font-weight: 600; cursor: pointer;
}
.info-knop:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

.stempel {
  position: absolute; top: 28px; padding: 6px 12px; border: 3px solid; border-radius: var(--hoek);
  font-size: 22px; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; background: rgba(var(--bg-rgb), .6);
  pointer-events: none;
}
.stempel.ja { left: 20px; color: var(--accent); transform: rotate(-12deg); opacity: var(--ja); }
.stempel.nee { right: 20px; color: var(--tekst); transform: rotate(12deg); opacity: var(--nee); }
.stempel.gezien { left: 50%; top: 40%; color: var(--tweede); transform: translateX(-50%); opacity: var(--gezien); }

.meer {
  position: absolute; inset: 0; padding: 24px; overflow-y: auto; background: rgba(var(--bg-rgb), .96);
  display: flex; flex-direction: column; gap: 12px; align-items: flex-start; touch-action: pan-y; cursor: auto; user-select: text;
}
.meer[hidden] { display: none; }
.meer h3 { margin: 0; font-size: 20px; letter-spacing: -0.3px; }
.meer p { margin: 0; font-size: 15px; color: var(--licht); }
.meer dl { margin: 0; display: flex; flex-direction: column; gap: 8px; }
.meer dt { font-size: 13px; color: var(--zacht); }
.meer dd { margin: 0; font-weight: 700; font-size: 15px; }

.stapel-leeg {
  position: absolute; inset: 0; border: 2px dashed var(--stip); border-radius: var(--hoek); padding: 32px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; text-align: center; color: var(--zacht);
}
.stapel-leeg strong { font-size: 20px; color: var(--tekst); letter-spacing: -0.3px; }
/* ---------- menu op de telefoon: drie streepjes linksboven, menu schuift van links in ---------- */
.menu-knop {
  display: none; flex: none; width: 44px; height: 44px; margin-left: -6px; padding: 0; align-items: center; justify-content: center;
  border: 0; border-radius: var(--hoek); background: none; color: var(--tekst); cursor: pointer;
}
.menu-knop svg { width: 26px; height: 26px; }
.menu-knop:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
@media (max-width: 760px) {
  .menu-knop { display: flex; }
  #kop { flex-wrap: nowrap; gap: 8px; }
  #kop .tabs, #kop .tandwiel, #kop .kop-nieuw { display: none; }   /* die staan nu in het menu */
  #kop .logo { font-size: 21px; }
}
dialog.menu-la {
  position: fixed; inset: 0 auto 0 0; margin: 0; width: min(320px, 86vw); height: 100%; max-height: none; max-width: none;
  padding: max(18px, env(safe-area-inset-top)) 16px max(18px, env(safe-area-inset-bottom)); border: 0; border-right: 1px solid var(--lijn);
  background: var(--vlak); color: var(--tekst); display: flex; flex-direction: column; gap: 18px; overflow-y: auto;
  animation: menu-in .25s ease-out;
}
dialog.menu-la:not([open]) { display: none; }
dialog.menu-la::backdrop { background: rgba(0, 0, 0, .55); backdrop-filter: blur(2px); animation: vervaag-in .25s ease-out; }
@keyframes menu-in { from { transform: translateX(-100%); } }
@keyframes vervaag-in { from { opacity: 0; } }
.menu-kop { display: flex; align-items: center; justify-content: space-between; padding-left: 6px; }
.menu-kop .logo { font-size: 21px; }
.menu-sluit { width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; padding: 0; border: 1px solid var(--lijn); border-radius: 50%; background: var(--bg); color: var(--tekst); cursor: pointer; }
.menu-sluit svg { width: 20px; height: 20px; }
.menu-profiel { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: var(--hoek); background: var(--bg); border: 1px solid var(--lijn); color: var(--tekst); }
.menu-profiel span { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.menu-profiel small { font-size: 13px; color: var(--zacht); }
.menu-profiel[aria-current="page"] { border-color: var(--accent); }
.menu-links { display: flex; flex-direction: column; gap: 2px; }
.menu-gast { display: flex; gap: 8px; }
.menu-gast .knop { flex: 1; justify-content: center; }

/* Zonder account: de vraag om er een te maken, en de knoppen bovenaan de homepage */
.kiezer.account-vraag { width: min(420px, calc(100% - 32px)); }
.account-vraag h2 { margin: 0; font-size: 20px; }
.account-vraag .knoppen { margin-top: 16px; }
.gast-knoppen { margin-top: 12px; }
.menu-regel {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 44px; padding: 0 12px; border: 0; border-radius: var(--hoek);
  background: none; color: var(--licht); font: inherit; font-size: 15px; font-weight: 600; text-align: left; cursor: pointer;
}
.menu-regel svg { width: 20px; height: 20px; flex: none; color: var(--zacht); }
.menu-regel:hover { background: var(--vlak2); color: var(--tekst); }
.menu-regel[aria-current="page"] { background: rgba(var(--accent-rgb), .14); color: var(--tekst); }
.menu-regel[aria-current="page"] svg { color: var(--accent); }
.menu-regel .badge { position: static; margin-left: auto; }
.menu-regel:focus-visible, .menu-profiel:focus-visible, .menu-sluit:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.menu-onder { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--lijn); display: flex; flex-direction: column; gap: 2px; }
@media (prefers-reduced-motion: reduce) { dialog.menu-la, dialog.menu-la::backdrop { animation: none; } }

/* ---------- de site als app ---------- */
.install-banner {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; margin: 0 0 16px; padding: 10px 14px; border-radius: var(--hoek);
  background: linear-gradient(120deg, rgba(var(--accent-rgb), .18), var(--vlak) 70%); border: 1px solid rgba(var(--accent-rgb), .45);
}
.install-banner img { width: 40px; height: 40px; border-radius: var(--hoek); flex: none; }
.install-banner > div:nth-child(2) { flex: 1 1 200px; display: flex; flex-direction: column; gap: 2px; }
.install-banner span { font-size: 14px; color: var(--licht); }
.install-banner .knoppen { gap: 8px; }
.app-uitleg { margin: 0; font-size: 14px; color: var(--licht); }
.app-terug {
  flex: none; width: 40px; height: 40px; padding: 0; display: flex; align-items: center; justify-content: center;
  border-radius: 50%; border: 1px solid var(--lijn); background: var(--vlak); color: var(--tekst); cursor: pointer;
}
.app-terug svg { width: 20px; height: 20px; }
/* In de app: ruimte voor de inkeping en de balk van de telefoon */
@media (display-mode: standalone) {
  .kop { padding-top: max(20px, env(safe-area-inset-top)); }
  .voet { padding-bottom: max(24px, env(safe-area-inset-bottom)); }
}
/* In de app op de telefoon: vaste tabbalk onderin (Home, Zoeken, Swipen, Mijn lijst, Profiel) */
.app-balk { display: none; }
@media (max-width: 760px) {
  :root[data-app] body { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
  :root[data-app] .voet { padding-bottom: 24px; }
  :root[data-app] #kop .kop-profiel { display: none; }   /* profiel en inloggen zitten al in de tabbalk */
  /* Op de telefoon zoomt de iPhone in zodra je in een veld tikt met tekst kleiner dan 16px; dat voorkomen we zo */
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), textarea, select { font-size: 16px !important; }
}
/* In de app: niet "doorveren" boven- en onderaan, en geen dubbeltik-zoom; dan staat alles stil zoals in een echte app */
:root[data-app], :root[data-app] body { overscroll-behavior: none; }
:root[data-app] { touch-action: manipulation; }
@media (max-width: 760px) {
  .app-balk {
    position: fixed; z-index: 50; left: 0; right: 0; bottom: 0; display: flex; padding: 6px 4px max(6px, env(safe-area-inset-bottom));
    background: var(--bg); border-top: 1px solid var(--lijn);   /* effen: een vervaagde balk kost de iPhone bij elke scrollbeweging rekenwerk */
  }
}
.app-tab {
  flex: 1; min-width: 0; min-height: 52px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  border-radius: var(--hoek); color: var(--zacht); font-size: 11px; font-weight: 600; line-height: 1.2; -webkit-tap-highlight-color: transparent;
}
.app-tab > span:last-child { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-tab svg { width: 24px; height: 24px; }
.app-tab .avatar { width: 26px; height: 26px; font-size: 12px; }
.app-tab:hover { color: var(--tekst); }
.app-tab[aria-current="page"] { color: var(--accent); }
.app-tab[aria-current="page"] .avatar { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent); }
.app-tab:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }
/* Stipje op de drie streepjes als er nieuwe aanbevelingen zijn */
.menu-knop { position: relative; }
.menu-stip { position: absolute; top: 8px; right: 6px; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 2px var(--bg); }

/* ---------- /app: Watvanavond op je telefoon zetten ---------- */
.app-pagina { max-width: 720px; gap: 28px; }
.app-intro { display: flex; align-items: center; gap: 18px; }
.app-icoon-groot { width: 72px; height: 72px; flex: none; border-radius: var(--hoek); box-shadow: 0 10px 28px rgba(0, 0, 0, .45); }
.app-welkom { margin: 0; padding: 12px 16px; border-radius: var(--hoek); background: rgba(var(--accent-rgb), .14); border: 1px solid rgba(var(--accent-rgb), .45); font-weight: 600; }
#installeer:empty { display: none; }
#installeer { display: flex; flex-direction: column; gap: 14px; }
#installeer h2, .app-deel h2 { margin: 0; font-size: 22px; letter-spacing: -0.5px; }
.app-stappen { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.app-stap { display: flex; align-items: flex-start; gap: 14px; padding: 14px 16px; border-radius: var(--hoek); background: var(--vlak); border: 1px solid var(--lijn); }
.app-stap .stap-nr { flex: none; }
.app-stap div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.app-stap strong { font-size: 16px; line-height: 1.4; }
.app-stap div > span { font-size: 14px; color: var(--licht); }
.app-teken {
  display: inline-flex; align-items: center; justify-content: center; min-width: 30px; height: 30px; margin-left: 4px; padding: 0 6px;
  border-radius: var(--hoek); background: var(--vlak2); color: #3B8CFF; font-weight: 800; vertical-align: middle;
}
.app-teken svg { width: 20px; height: 20px; }
.app-resultaat { display: flex; flex-direction: column; align-items: center; gap: 6px; align-self: center; font-size: 12px; color: var(--licht); }
.app-resultaat img { width: 64px; height: 64px; border-radius: var(--hoek); box-shadow: 0 8px 22px rgba(0, 0, 0, .45); }
.app-noot { margin: 0; font-size: 14px; color: var(--zacht); }
.app-klaar { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: var(--hoek); background: var(--vlak); border: 1px solid var(--lijn); }
.app-vink { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; flex: none; border-radius: 50%; background: var(--accent); color: var(--op-accent); font-weight: 800; }
.knop.groot { min-height: 52px; padding: 0 24px; border-radius: var(--hoek); font-size: 16px; display: inline-flex; align-items: center; gap: 10px; }
.knop.groot svg { width: 22px; height: 22px; }
.app-deel { display: flex; align-items: center; gap: 24px; padding: 20px; border-radius: var(--hoek); background: var(--vlak); border: 1px solid var(--lijn); }
.app-qr { flex: none; width: 200px; }
.app-qr svg { display: block; width: 100%; height: auto; border-radius: var(--hoek); }
.app-deel-tekst { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.app-deel-tekst p { margin: 0; color: var(--licht); font-size: 14px; }
@media (max-width: 560px) {
  .app-deel { flex-direction: column; text-align: center; }
  .app-deel .knoppen { justify-content: center; }
  .app-qr { width: min(240px, 70vw); }
}
/* Pagina zonder verbinding */
.offline { min-height: 100vh; max-width: 480px; margin: 0 auto; padding: 32px 24px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; text-align: center; }
.offline .logo { margin-bottom: 24px; }
.offline-icoon { font-size: 56px; }
.offline h1 { margin: 0; font-size: 34px; letter-spacing: -1px; }
.offline p { margin: 0; color: var(--licht); }
.offline .offline-en { color: var(--zacht); font-size: 14px; }

/* Volgers en Volgend op het profiel: aanklikbaar */
.cijfers .klikbaar { position: relative; transition: border-color .15s, transform .15s; }
.cijfers .klikbaar dt::after { content: ' ›'; color: var(--accent); font-weight: 700; }
.cijfers .klikbaar:hover { border-color: var(--accent); transform: translateY(-2px); }
.cijfer-klik { position: absolute; inset: 0; width: 100%; padding: 0; border: 0; border-radius: inherit; background: none; cursor: pointer; }
.cijfer-klik:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.kiezer.volg-venster { width: min(480px, calc(100% - 32px)); }
.volg-venster .filter { margin-top: 14px; }
.volg-lijst { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; max-height: min(420px, 60vh); overflow-y: auto; }
.volg-lijst li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 2px; border-bottom: 1px solid var(--lijn); }
.volg-lijst li:last-child { border-bottom: 0; }
.volg-lijst .kast-leeg { justify-content: flex-start; }

/* Uitleg: zo werkt swipen */
.kiezer.swipe-uitleg { width: min(460px, calc(100% - 32px)); text-align: center; }
.kiezer.swipe-uitleg .instellingen-kop { text-align: left; }
.uitleg-label { font-size: 13px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; color: var(--accent); }
.kiezer.swipe-uitleg h2 { margin: 6px 0 0; font-size: 24px; }
.kiezer.swipe-uitleg .kiezer-uitleg { font-size: 16px; color: var(--licht); margin: 8px 0 0; }
.kiezer.swipe-uitleg .knoppen { justify-content: center; margin-top: 18px; }
.uitleg-beeld { position: relative; height: 250px; margin-top: 10px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.uitleg-kaart { position: relative; width: 140px; aspect-ratio: 2 / 3; border-radius: var(--hoek); overflow: hidden; background: var(--vlak2); box-shadow: 0 14px 30px rgba(0, 0, 0, .45); }
.uitleg-kaart img { width: 100%; height: 100%; object-fit: cover; display: block; }
.uitleg-kaart.rechts { animation: uitleg-rechts 2.6s ease-in-out infinite; }
.uitleg-kaart.links { animation: uitleg-links 2.6s ease-in-out infinite; }
.uitleg-kaart.omhoog { animation: uitleg-omhoog 2.6s ease-in-out infinite; }
@keyframes uitleg-rechts { 0%, 15% { transform: none; } 55%, 70% { transform: translateX(90px) rotate(14deg); } 100% { transform: none; } }
@keyframes uitleg-links { 0%, 15% { transform: none; } 55%, 70% { transform: translateX(-90px) rotate(-14deg); } 100% { transform: none; } }
@keyframes uitleg-omhoog { 0%, 15% { transform: none; } 55%, 70% { transform: translateY(-70px); } 100% { transform: none; } }
.uitleg-stempel {
  position: absolute; top: 16px; padding: 3px 9px; border: 3px solid; border-radius: var(--hoek); font-weight: 800; font-size: 13px;
  text-transform: uppercase; background: rgba(var(--bg-rgb), .6); opacity: 0; animation: uitleg-stempel 2.6s ease-in-out infinite;
}
.uitleg-stempel.rechts { left: 10px; color: var(--accent); transform: rotate(-12deg); }
.uitleg-stempel.links { right: 10px; color: var(--tekst); transform: rotate(12deg); }
.uitleg-stempel.omhoog { left: 50%; top: 42%; color: var(--tweede); transform: translateX(-50%); white-space: nowrap; }
@keyframes uitleg-stempel { 0%, 25% { opacity: 0; } 50%, 72% { opacity: 1; } 90%, 100% { opacity: 0; } }
.uitleg-hand { position: absolute; left: 55%; bottom: 18px; font-size: 30px; }
.uitleg-sterren { position: absolute; bottom: 4px; left: 50%; transform: translateX(-50%); padding: 4px 12px; border-radius: var(--hoek); background: var(--vlak2); color: var(--accent); font-size: 20px; letter-spacing: 2px; animation: uitleg-stempel 2.6s ease-in-out infinite; }
.uitleg-knoppen { display: flex; align-items: flex-start; gap: 12px; }
.uitleg-knop { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 76px; }
.uitleg-knop b { width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; border-radius: 50%; border: 1.5px solid var(--lijn); background: var(--vlak2); font-size: 20px; }
.uitleg-knop.groot b { width: 64px; height: 64px; font-size: 24px; }
.uitleg-knop.vol b { background: var(--accent); border-color: var(--accent); color: var(--op-accent); }
.uitleg-knop small { font-size: 12px; color: var(--zacht); line-height: 1.2; }
.uitleg-stippen { display: flex; justify-content: center; gap: 6px; margin-top: 14px; }
.uitleg-stippen i { width: 8px; height: 8px; border-radius: 4px; background: var(--stip); transition: width .2s, background .2s; }
.uitleg-stippen i.aan { width: 22px; background: var(--accent); }
@media (prefers-reduced-motion: reduce) { .uitleg-kaart, .uitleg-stempel, .uitleg-sterren { animation: none; } .uitleg-stempel, .uitleg-sterren { opacity: 1; } }

.laad-bolletjes { display: flex; gap: 8px; }
.laad-bolletjes i { width: 12px; height: 12px; border-radius: 50%; background: var(--accent); animation: stuiter 1s ease-in-out infinite; }
.laad-bolletjes i:nth-child(2) { animation-delay: .15s; }
.laad-bolletjes i:nth-child(3) { animation-delay: .3s; }
@keyframes stuiter { 0%, 80%, 100% { transform: scale(.5); opacity: .4; } 40% { transform: scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .laad-bolletjes i { animation: none; } }

.swipe-knoppen { display: flex; justify-content: center; align-items: flex-start; gap: 14px; margin-top: 18px; }
.rond {
  display: flex; flex-direction: column; align-items: center; gap: 6px; width: 72px; padding: 0; border: 0; background: none;
  color: var(--licht); font-size: 12px; font-weight: 600; line-height: 1.2; text-align: center; cursor: pointer;
}
.rond svg { box-sizing: content-box; padding: 15px; border-radius: 50%; border: 1.5px solid var(--lijn); background: var(--vlak); }
.rond.groot svg { padding: 18px; }
.rond.vol svg { background: var(--accent); border-color: var(--accent); color: var(--op-accent); }
.rond:hover svg { border-color: var(--accent); }
.rond:focus-visible { outline: none; }
.rond:focus-visible svg { outline: 3px solid var(--accent); outline-offset: 3px; }
.rond:disabled { opacity: .35; cursor: default; }
.rond:disabled:hover svg { border-color: var(--lijn); }
.toetsen { margin: 0; text-align: center; font-size: 13px; color: var(--zacht); }
@media (hover: none) { .toetsen { display: none; } }

.beoordeel { background: var(--vlak); border: 1px solid var(--lijn); border-radius: var(--hoek); padding: 12px 16px; display: flex; flex-direction: column; gap: 4px; }
.beoordeel > span { font-size: 15px; }
.beoordeel-onder { display: flex; flex-wrap: wrap; gap: 8px; justify-content: space-between; align-items: center; }
.beoordeel-onder small { font-size: 13px; color: var(--zacht); }

.poster-leeg {
  display: flex; align-items: center; justify-content: center; padding: 12px; width: 100%; aspect-ratio: 2 / 3;
  border-radius: var(--hoek); background: var(--vlak2); color: var(--stip); font-weight: 800; text-align: center; line-height: 1.1;
}

/* =====================================================================================================
   Filmhuis-stijl: de laag die alles rustiger maakt. Koppen in een schreeflletter, kleine labels in
   typemachineletter, strakke hoeken, geen gloed. Staat onderaan, zodat hij voor de rest gaat.
   ===================================================================================================== */

/* Een vleugje korrel over het hele beeld, zoals op film */
body::after {
  content: ''; position: fixed; inset: 0; z-index: 900; pointer-events: none; opacity: .05;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1.2 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23k)'/%3E%3C/svg%3E");
}

/* Koppen en logo: schreeflletter, niet vet (de letter is zelf al uitgesproken genoeg) */
h1, h2, h3, .logo { font-family: var(--kop) !important; font-weight: 400 !important; letter-spacing: 0 !important; }
h1 { line-height: 1.05; }
.accent { font-style: italic; }
.logo, #kop .logo { font-size: 27px; font-style: italic; line-height: 1; }
.logo .wat { color: var(--zacht); }

/* Kleine labels, knoppen en tabbladen: typemachineletter in kapitalen */
.knop, .chip, .pil, .badge, .blok-link, .zoekbalk button, .tabs a, .app-tab span, .wand-filter button, .still-label, .still-meta,
.pkaart small, .huis-groet, .review-titel small {
  font-family: var(--mono); font-weight: 500; letter-spacing: .07em; text-transform: uppercase;
}
.knop, .chip, .zoekbalk button { font-size: 11.5px; }
.knop { min-height: 38px; border-width: 1px; }
.knop.klein { min-height: 32px; font-size: 10.5px; }
/* Hoofdknoppen in papierwit; het rood bewaren we voor sterren en wat actief is */
.knop.vol, .zoekbalk button { background: var(--tekst); border-color: var(--tekst); color: var(--bg); font-weight: 500; }
.pil { font-size: 10.5px; padding: 3px 8px; }
.badge { font-size: 10px; }
.blok-link { font-size: 10.5px; color: var(--zacht); }
.blok-link:hover { color: var(--tekst); text-decoration: none; }
.tabs a { font-size: 11px; color: var(--zacht); }
.tabs a[aria-current="page"] { background: none; color: var(--tekst); box-shadow: inset 0 -1px 0 var(--accent); border-radius: 0; }

/* Zoeken: een lijn om op te schrijven in plaats van een vak */
.zoekbalk input { background: transparent; border: 0; border-bottom: 1px solid var(--stip); border-radius: 0; padding: 0 2px; }
.zoekbalk input:focus { outline: none; border-bottom-color: var(--tekst); }

/* Sectiekoppen met een dunne lijn erboven, zoals in een filmtijdschrift */
.blok-kop { align-items: baseline; padding-top: 12px; border-top: 1px solid var(--lijn); }
.blok-kop h2, .blok h2 { font-size: 26px; line-height: 1.1; }

/* Posters: haarscherpe hoek, een dun randje; titels rustig, jaartal en soort in kapitalen */
.pkaart-beeld { border-radius: 2px; }
.pkaart-beeld img { outline: 1px solid rgba(236, 230, 218, .08); outline-offset: -1px; }
.pkaart strong { font-weight: 500; font-size: 13.5px; }
.pkaart small { font-size: 10px; }
a.pkaart:hover .pkaart-beeld img { transform: none; outline-color: var(--tekst); }

/* Geen gloed, geen verlopen */
.kop-gloed, .intro.levend::before { display: none; }
.install-banner { background: var(--vlak); border-color: var(--lijn); }
.uitnodig-icoon, .stap-nr, .app-vink { background: none; border: 1px solid var(--stip); color: var(--tekst); }

/* De tabbalk onderin de app */
.app-tab span { font-size: 9.5px; letter-spacing: .06em; }

/* ---------- vloeiend: posters die invloeien, reactie op tikken ---------- */
/* Geen @view-transition tussen pagina's: daar crasht WebKit (Safari) op bij het openen van de homepage */

/* Posters en filmbeelden vloeien in zodra ze binnen zijn (gedeeld.js zet .geladen), in plaats van ineens te verschijnen */
.pkaart-beeld img, .wand-poster img, .still-beeld img, .review-poster img, .feed-poster img { opacity: 0; transition: opacity .35s ease-out; }
.pkaart-beeld img.geladen, .wand-poster img.geladen, .still-beeld img.geladen, .review-poster img.geladen, .feed-poster img.geladen { opacity: 1; }

/* De korrel krijgt een eigen laag: één keer getekend, daarna kost hij niets tijdens het scrollen */
body::after { transform: translateZ(0); }

/* Even indrukken als je ergens op tikt */
@media (hover: none) {
  .pkaart, .wand-poster, .still, .knop, .app-tab, .review-poster { transition: transform .12s ease-out; }
  .pkaart:active, .wand-poster:active, .still:active, .review-poster:active { transform: scale(.97); }
  .knop:active, .app-tab:active { transform: scale(.95); }
}
@media (prefers-reduced-motion: reduce) {
  .pkaart-beeld img, .wand-poster img, .still-beeld img, .review-poster img, .feed-poster img { transition: none; }
}

/* ---------- home ---------- */
.huis { gap: 34px; }
.huis-kop { display: flex; flex-direction: column; gap: 6px; padding-top: 6px; }
.huis-groet { margin: 0; font-size: 11px; color: var(--zacht); }
.huis-kop h1 { margin: 0; font-size: clamp(34px, 6vw, 56px); }
.huis-kop .zoekbalk { margin-top: 10px; }

/* Zolang de filmbeelden nog laden: een grijs vlak op hun plek, dan springt de pagina niet als ze binnenkomen */
.huis-stills:empty {
  height: calc(min(78vw, 420px) * 9 / 16 + 66px);
  background: linear-gradient(var(--vlak), var(--vlak)) 0 0 / min(78vw, 420px) calc(min(78vw, 420px) * 9 / 16) no-repeat;
}

/* Uitgelicht: brede filmbeelden met de titel eronder, om opzij door te vegen */
.rij.stills { grid-auto-columns: min(78vw, 420px); gap: 16px; }
.still { display: flex; flex-direction: column; gap: 3px; color: var(--tekst); }
.still-beeld { display: block; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 2px; background: var(--vlak2); margin-bottom: 6px; }
.still-beeld img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(.9) contrast(1.03); transition: filter .3s; }
.still:hover .still-beeld img { filter: none; }
.still-label { font-size: 10px; color: var(--accent); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.still-titel { font-family: var(--kop); font-weight: 400; font-size: 24px; line-height: 1.1; }
.still-meta { font-size: 10px; color: var(--zacht); }
.still:focus-visible { outline: none; }
.still:focus-visible .still-beeld { outline: 2px solid var(--tekst); outline-offset: 3px; }
.rij-houder:has(.stills) .rij-pijl { top: calc(min(78vw, 420px) * 9 / 32 - 20px); }

/* Reviews van vrienden: poster, wie, sterren en een stuk van de tekst */
.reviews { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.review { display: flex; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--lijn); }
.review:first-child { padding-top: 2px; }
.review-poster { flex: none; width: 64px; }
.review-poster img, .review-poster .poster-leeg { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; display: block; border-radius: 2px; }
.review-midden { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.review-titel { font-family: var(--kop); font-size: 22px; line-height: 1.1; color: var(--tekst); }
.review-titel small { font-size: 11px; color: var(--zacht); }
.review-wie { display: flex; align-items: center; gap: 7px; margin: 0; font-size: 13px; color: var(--licht); }
.review-wie .avatar { width: 20px; height: 20px; font-size: 10px; }
.review-wie a { color: var(--licht); }
.review-sterren { color: var(--accent); letter-spacing: 1px; }
.review .recensie-tekst { margin: 2px 0 0; font-size: 14.5px; line-height: 1.55; color: var(--licht); }

/* De posterwand onderaan: alleen posters, dicht op elkaar, eindeloos */
.wand-filter { display: flex; gap: 14px; }
.wand-filter button { padding: 4px 0; border: 0; background: none; color: var(--zacht); font-size: 10.5px; cursor: pointer; }
.wand-filter button[aria-pressed="true"] { color: var(--tekst); box-shadow: inset 0 -1px 0 var(--accent); }
.wand-filter button:focus-visible { outline: 2px solid var(--tekst); outline-offset: 2px; }
.poster-wand { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; }
.wand-poster { position: relative; display: block; aspect-ratio: 2 / 3; overflow: hidden; border-radius: 2px; background: var(--vlak2); }
.wand-poster img { width: 100%; height: 100%; object-fit: cover; display: block; outline: 1px solid rgba(236, 230, 218, .08); outline-offset: -1px; }
.wand-poster:hover img { outline-color: var(--tekst); }
.wand-poster:focus-visible { outline: 2px solid var(--tekst); outline-offset: 2px; }
.wand-merk {
  position: absolute; right: 4px; bottom: 4px; padding: 1px 5px; border-radius: 2px; background: rgba(var(--bg-rgb), .85);
  color: var(--accent); font-size: 10px; letter-spacing: 1px;
}
.wand-status { margin: 12px 0 0; font-size: 13px; color: var(--zacht); text-align: center; }
.wand-status:empty { display: none; }
#wand-einde { height: 1px; }

@media (max-width: 760px) {
  .huis { gap: 28px; }
  .huis-kop h1 { font-size: 36px; }
  .blok-kop h2, .blok h2 { font-size: 22px; }
  .still-titel { font-size: 21px; }
  .poster-wand { grid-template-columns: repeat(3, 1fr); gap: 5px; }
  .review-poster { width: 56px; }
  .review-titel { font-size: 20px; }
}
/* ---------- titelpagina: zoals de filmpagina van het festival ---------- */
/* Groot filmbeeld vanaf de bovenkant, de menubalk eroverheen; titel, gegevens en knoppen onderin het beeld */
body:has(.titel-held) #kop { position: absolute; z-index: 3; top: 0; left: 0; right: 0; }
.titel-held { position: relative; isolation: isolate; margin: -8px calc(50% - 50vw) 0; min-height: min(80vh, 46rem); display: grid; align-items: end; }
.held-beeld { position: absolute; inset: 0; z-index: -1; overflow: hidden; background: var(--vlak); }
.held-beeld img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; display: block; }
.held-beeld img.staand { filter: blur(22px) saturate(1.1); transform: scale(1.15); opacity: .7; }
.held-beeld::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(var(--bg-rgb), .6), transparent 22%),
    linear-gradient(to right, rgba(var(--bg-rgb), .92), rgba(var(--bg-rgb), .55) 38%, transparent 70%),
    linear-gradient(to top, var(--bg), rgba(var(--bg-rgb), .6) 30%, transparent 60%);
}
.held-tekst { width: min(1200px, 100%); margin: 0 auto; padding: 140px 16px 30px; display: grid; gap: 12px; justify-items: start; }
.held-tekst > * { max-width: 40rem; }
.titel-held h1 {
  margin: 0; font-family: 'Big Shoulders Display', var(--kop) !important; font-weight: 900 !important; letter-spacing: .005em !important;
  text-transform: uppercase; font-size: clamp(3rem, 7.5vw, 6.2rem); line-height: .88; overflow-wrap: anywhere;
}
.titel-held .labels { display: flex; flex-wrap: wrap; gap: 6px; }
.titel-held .label { padding: 2px 7px; border-radius: 2px; background: rgba(236, 230, 218, .14); color: var(--tekst); font-family: var(--mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.held-meta { margin: 0; font-size: 14px; color: var(--licht); }
.held-wanneer { margin: 0; font-weight: 600; }
.held-kort { margin: 0; font-size: 16px; line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.held-met { margin: 0; font-size: 13.5px; color: var(--licht); }
.held-knoppen { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.held-knoppen .knop { min-height: 46px; padding: 0 22px; font-size: 12px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.knop.glas { background: rgba(236, 230, 218, .14); border-color: transparent; color: var(--tekst); }
.knop.glas[aria-pressed="true"] { background: rgba(236, 230, 218, .3); }

/* Jouw oordeel, direct onder het beeld */
.titel-oordeel { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; padding-bottom: 16px; border-bottom: 1px solid var(--lijn); }
.titel-oordeel .rating { display: flex; flex-direction: column; gap: 4px; }
.titel-oordeel .rating > span { font-family: var(--mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--zacht); }
.titel-oordeel .rating small { font-size: 12px; color: var(--zacht); }

/* De vraag van de film: de tagline, met een streep ervoor */
.film-vraag { margin: 0; max-width: 30em; padding-left: 16px; border-left: 3px solid var(--accent); font-family: var(--kop); font-style: italic; font-size: clamp(24px, 3.2vw, 34px); line-height: 1.2; }

/* Trailer: een groot beeld met een knop; pas bij een tik laden we YouTube */
#trailer .trailer-knop, #trailer iframe { display: block; width: 100%; max-width: 760px; aspect-ratio: 16 / 9; border: 0; border-radius: var(--hoek); background: #000; }
.trailer-knop { position: relative; display: grid !important; place-items: center; padding: 0; overflow: hidden; cursor: pointer; }
.trailer-knop img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .8; transition: opacity .2s; }
.trailer-knop:hover img { opacity: 1; }
.trailer-knop span {
  position: relative; display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 22px; border-radius: var(--hoek);
  background: var(--tekst); color: var(--bg); font-family: var(--mono); font-size: 12px; letter-spacing: .07em; text-transform: uppercase;
}
.trailer-knop span::before { content: ''; border-left: 12px solid currentColor; border-top: 7px solid transparent; border-bottom: 7px solid transparent; }
.trailer-knop:focus-visible { outline: 3px solid var(--tekst); outline-offset: 3px; }
.uitweg { display: inline-block; margin-top: 8px; font-size: 13px; color: var(--zacht); text-decoration: underline; }

/* Beelden uit de film */
.rij.fotorij { grid-auto-columns: minmax(260px, 32%); gap: 10px; }
.fotorij img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 2px; background: var(--vlak2); }
.rij-houder:has(.fotorij) .rij-pijl { top: calc(50% - 22px); }

/* Cast: ronde portretten met naam en rol eronder */
.cast { grid-auto-columns: 112px; }
.cast li, .cast-link { align-items: center; text-align: center; }
.cast img, .cast-leeg { width: 96px; aspect-ratio: 1; border-radius: 50%; }
.rij-houder:has(.cast) .rij-pijl { top: 28px; }

/* Over de film: de samenvatting links, de feiten rechts in een raster */
.over-raster { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 2fr); gap: 20px 40px; padding-top: 14px; border-top: 1px solid var(--lijn); }
.over-film h2 { margin-bottom: 12px; }
.over-raster .samenvatting { margin: 0; color: var(--licht); }
.info-raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 18px 24px; margin: 0; }
.info-raster div { display: grid; gap: 3px; align-content: start; }
.info-raster dt { font-family: var(--mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--zacht); }
.info-raster dd { margin: 0; font-weight: 500; }

@media (max-width: 760px) {
  .titel-held { min-height: 0; display: block; }
  .held-beeld { position: relative; inset: auto; aspect-ratio: 4 / 3; }
  .held-beeld::after { background: linear-gradient(to bottom, rgba(var(--bg-rgb), .6), transparent 25%), linear-gradient(to top, var(--bg), rgba(var(--bg-rgb), .4) 35%, transparent 65%); }
  .held-tekst { margin-top: -54px; padding: 0 16px 6px; gap: 10px; }
  .titel-held h1 { font-size: clamp(2.6rem, 13vw, 3.4rem); }
  .held-kort { font-size: 15px; }
  .held-knoppen .knop { flex: 1 1 100%; }
  .film-vraag { font-size: 22px; padding-left: 12px; }
  .rij.fotorij { grid-auto-columns: 80%; }
  .cast { grid-auto-columns: 92px; }
  .cast img, .cast-leeg { width: 80px; }
  .over-raster { grid-template-columns: 1fr; }
  .info-raster { grid-template-columns: 1fr 1fr; gap: 14px 16px; }
}