/* Empire themasite: gedeelde componenten + vier themacontracten (design-tokens.json). */

@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/cormorant-garamond-600.woff2') format('woff2'); }
@font-face { font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 500; font-display: swap; src: url('fonts/cormorant-garamond-500-cursief.woff2') format('woff2'); }
@font-face { font-family: 'DM Serif Display'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/dm-serif-display-400.woff2') format('woff2'); }
@font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/fraunces-600.woff2') format('woff2'); }
@font-face { font-family: 'Libre Caslon Display'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/libre-caslon-display-400.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/inter-400.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/inter-500.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/inter-700.woff2') format('woff2'); }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/manrope-400.woff2') format('woff2'); }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/manrope-500.woff2') format('woff2'); }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/manrope-700.woff2') format('woff2'); }
@font-face { font-family: 'Libre Franklin'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/libre-franklin-400.woff2') format('woff2'); }
@font-face { font-family: 'Libre Franklin'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/libre-franklin-500.woff2') format('woff2'); }
@font-face { font-family: 'Libre Franklin'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/libre-franklin-700.woff2') format('woff2'); }

/* ---- Themacontracten ---- */
:root {
  --container: 1440px;
  --inhoud: 1200px;
  --goot: 20px;
  --sectieruimte: 48px;
  --radius-kaart: 6px;
  --radius-knop: 5px;
  --beweging: 260ms cubic-bezier(0.22, 1, 0.36, 1);
}
@media (min-width: 768px) { :root { --goot: 32px; } }
@media (min-width: 1024px) { :root { --goot: 56px; --sectieruimte: 80px; } }

:root, [data-theme="cognac-club"] {
  --achtergrond: #F1E4CF;
  --vlak: #F8F1E6;
  --vlak-sterk: #9A5432;
  --tekst: #241B17;
  --tekst-op-donker: #F8F1E6;
  --gedempt: #6C5A4D;
  --primair: #9A5432;
  --primair-hover: #7F4228;
  --accent: #AA8650;
  --secundair: #424735;
  --rand: #C7AD88;
  --kopbalk-bg: #1D1714;
  --kopbalk-tekst: #F8F1E6;
  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-tekst: 'Inter', Arial, sans-serif;
  --nav-spatiering: 0.12em;
  --radius-kaart: 6px;
  --radius-knop: 5px;
}
[data-theme="bordeaux-art-deco"] {
  --achtergrond: #E8D9BA;
  --vlak: #F7F1E5;
  --vlak-sterk: #54272C;
  --tekst: #211A17;
  --tekst-op-donker: #F7F1E5;
  --gedempt: #756556;
  --primair: #54272C;
  --primair-hover: #421D22;
  --accent: #B48A4A;
  --secundair: #A95036;
  --rand: #C7A971;
  --kopbalk-bg: #431A20;
  --kopbalk-tekst: #F7F1E5;
  --font-display: 'DM Serif Display', Georgia, serif;
  --font-tekst: 'Manrope', Arial, sans-serif;
  --nav-spatiering: 0.14em;
  --radius-kaart: 10px;
  --radius-knop: 8px;
}
[data-theme="modern-empire"] {
  --achtergrond: #F3E9D6;
  --vlak: #FBF6EC;
  --vlak-sterk: #A4492F;
  --tekst: #2B201C;
  --tekst-op-donker: #F7F0E4;
  --gedempt: #6C6258;
  --primair: #A4492F;
  --primair-hover: #843923;
  --accent: #A77B43;
  --secundair: #6E7452;
  --rand: #D6B98C;
  --kopbalk-bg: #211A17;
  --kopbalk-tekst: #F7F0E4;
  --font-display: 'Fraunces', Georgia, serif;
  --font-tekst: 'Manrope', Arial, sans-serif;
  --nav-spatiering: 0.13em;
  --radius-kaart: 24px;
  --radius-knop: 10px;
}
[data-theme="empire-gazette"] {
  --achtergrond: #EFE1C6;
  --vlak: #FFF8EA;
  --vlak-sterk: #682D32;
  --tekst: #27211E;
  --tekst-op-donker: #FFF8EA;
  --gedempt: #6A5B50;
  --primair: #682D32;
  --primair-hover: #512126;
  --accent: #B58A37;
  --secundair: #B68072;
  --rand: #BDAA83;
  --kopbalk-bg: #FFF8EA;
  --kopbalk-tekst: #27211E;
  --font-display: 'Libre Caslon Display', Georgia, serif;
  --font-tekst: 'Libre Franklin', Arial, sans-serif;
  --nav-spatiering: 0.06em;
  --radius-kaart: 0px;
  --radius-knop: 2px;
}

/* ---- Basis ---- */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-tekst);
  font-size: 16px;
  line-height: 1.65;
  color: var(--tekst);
  background: var(--achtergrond);
  caret-color: transparent;
  cursor: default;
}
*, *::before, *::after { caret-color: transparent; }
body { -webkit-user-select: none; user-select: none; }
input, textarea, select { caret-color: auto; -webkit-user-select: text; user-select: text; }
input, textarea { cursor: text; }
a[href], button, select, summary, label { cursor: pointer; }
img { max-width: 100%; display: block; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 600; color: var(--tekst); line-height: 1.05; }
[data-theme="bordeaux-art-deco"] h1, [data-theme="bordeaux-art-deco"] h2, [data-theme="bordeaux-art-deco"] h3,
[data-theme="empire-gazette"] h1, [data-theme="empire-gazette"] h2, [data-theme="empire-gazette"] h3 { font-weight: 400; }
h1 { font-size: clamp(38px, 5vw, 58px); }
h2 { font-size: clamp(28px, 3.4vw, 40px); margin-bottom: 18px; }
h3 { font-size: 22px; margin-bottom: 10px; }
p { max-width: 62ch; }
a { color: var(--primair); }
a:hover { color: var(--primair-hover); }
:focus-visible { outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 38%, transparent); border-radius: 2px; }

.visueel-verborgen { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.intro-beeld { border-radius: var(--radius-kaart); overflow: hidden; border: 1px solid var(--rand); align-self: stretch; max-height: 420px; }
.intro-beeld img { width: 100%; height: 100%; min-height: 240px; object-fit: cover; }
.eyebrow {
  display: flex; align-items: center; gap: 12px;
  font-size: 12.5px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 14px;
}
.sier { display: flex; align-items: center; gap: 12px; color: var(--accent); font-size: 11px; margin: 20px 0 8px; max-width: 380px; }
.sier::before, .sier::after { content: ''; flex: 1; height: 1px; background: linear-gradient(to right, var(--accent), color-mix(in srgb, var(--accent) 25%, transparent)); }
.sier::before { background: linear-gradient(to left, var(--accent), color-mix(in srgb, var(--accent) 25%, transparent)); }
.sier-midden { margin-left: auto; margin-right: auto; }
.streepje { width: 56px; height: 2px; background: var(--accent); margin: 16px 0 20px; }

.knop {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-tekst); font-size: 15px; font-weight: 700; letter-spacing: 0.02em;
  text-decoration: none; cursor: pointer; border-radius: var(--radius-knop); padding: 13px 26px;
  transition: background var(--beweging), color var(--beweging), border-color var(--beweging);
}
.knop svg { flex-shrink: 0; }
.knop-hoofd { background: var(--primair); color: var(--tekst-op-donker); border: 0; }
.knop-hoofd:hover { background: var(--primair-hover); color: var(--tekst-op-donker); }
[data-theme="empire-gazette"] .knop-hoofd { background: var(--accent); color: #2B2015; }
[data-theme="empire-gazette"] .knop-hoofd:hover { background: #9A7128; color: #FFF8EA; }
.knop-spook { background: transparent; color: var(--tekst); border: 1.5px solid var(--rand); }
.knop-spook:hover { border-color: var(--tekst); color: var(--tekst); }
.op-donker .knop-spook { color: var(--tekst-op-donker); border-color: color-mix(in srgb, var(--tekst-op-donker) 55%, transparent); }
.op-donker .knop-spook:hover { border-color: var(--tekst-op-donker); color: var(--tekst-op-donker); }
.op-donker .bronregel { color: color-mix(in srgb, var(--tekst-op-donker) 75%, transparent); }
[data-theme="modern-empire"] .pheld-paneel .knop-spook { color: var(--tekst); border-color: var(--rand); }
[data-theme="modern-empire"] .pheld-paneel .knop-spook:hover { border-color: var(--tekst); color: var(--tekst); }
[data-theme="modern-empire"] .pheld-paneel .bronregel { color: var(--gedempt); }

.band { max-width: var(--inhoud); margin: 0 auto; padding: var(--sectieruimte) var(--goot) 0; }
main > .band:last-of-type { padding-bottom: var(--sectieruimte); }
.bandkop { display: flex; align-items: center; gap: 14px; margin-bottom: 8px; }
.bandkop .waaier { width: 30px; height: 24px; }
.bandintro { margin-bottom: 28px; color: var(--gedempt); }

/* ---- Leeftijdspoort ---- */
.poort { position: fixed; inset: 0; background: var(--kopbalk-bg); z-index: 100; overflow: auto; }
[data-theme="modern-empire"] .poort { background: var(--kopbalk-bg) url('assets/deco-patroon.svg'); }
[data-theme="empire-gazette"] .poort { background: #2B2015; }
.poort-kaart { min-height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 32px 24px; color: #F7F1E5; }
.poort-foto { width: min(600px, 92vw); height: 200px; object-fit: cover; object-position: 50% 38%; border-radius: var(--radius-kaart); border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent); margin-bottom: 32px; }
.poort-merk { font-family: var(--font-display); font-size: 58px; letter-spacing: 0.12em; text-transform: uppercase; line-height: 1; color: var(--accent); }
.poort-sub { font-size: 12.5px; font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase; opacity: 0.85; margin: 14px 0 34px; }
.poort-kaart h1 { font-family: var(--font-tekst); font-weight: 500; font-size: 21px; margin-bottom: 22px; color: #F7F1E5; }
.poort-knoppen { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.poort-knoppen .knop-spook { color: #F7F1E5; border-color: rgba(247, 241, 229, 0.5); }
body:not(.vergrendeld) .poort { display: none; }
body.vergrendeld { overflow: hidden; }
body.vergrendeld main, body.vergrendeld footer, body.vergrendeld .kopbalk, body.vergrendeld .themawissel { visibility: hidden; }

/* ---- Kopbalk ---- */
.kopbalk {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 11px var(--goot);
  background: var(--kopbalk-bg); color: var(--kopbalk-tekst);
}
[data-theme="cognac-club"] .kopbalk { background: var(--kopbalk-bg) url('assets/patroon-ruit.svg'); }
[data-theme="bordeaux-art-deco"] .kopbalk { background: var(--kopbalk-bg) url('assets/deco-rand.svg') repeat-x bottom; background-size: auto 100%; border-bottom: 2px solid var(--accent); }
[data-theme="modern-empire"] .kopbalk { background: var(--kopbalk-bg) url('assets/deco-rand.svg') repeat-x bottom; background-size: auto 100%; border-bottom: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); }
[data-theme="empire-gazette"] .kopbalk {
  background: repeating-linear-gradient(90deg, var(--kopbalk-bg) 0 7px, color-mix(in srgb, var(--rand) 10%, var(--kopbalk-bg)) 7px 8px);
  border-top: 3px double var(--primair); border-bottom: 3px double var(--primair);
}
[data-theme="empire-gazette"] .kopbalk nav a { position: relative; }
[data-theme="empire-gazette"] .kopbalk nav a.actief span { border-bottom-color: transparent; }
[data-theme="empire-gazette"] .kopbalk nav a.actief::after {
  content: ''; position: absolute; left: 8%; right: 8%; bottom: -12px; height: 5px; background: var(--accent);
}
.kopbalk-merk { display: flex; align-items: baseline; gap: 16px; }
.woordmerk {
  font-family: var(--font-display); font-size: 23px; letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--accent); text-decoration: none;
}
[data-theme="empire-gazette"] .woordmerk { color: var(--primair); font-size: 28px; letter-spacing: 0.08em; }
.woordmerk:hover { color: inherit; }
[data-theme="empire-gazette"] .woordmerk:hover { color: var(--primair); }
.kopbalk-sub { display: none; font-size: 11px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--accent); white-space: nowrap; }
.kopbalk-merk { flex-shrink: 0; }
.woordmerk { white-space: nowrap; }
[data-theme="bordeaux-art-deco"] .kopbalk-sub { display: inline; }
.kopbalk-zegel { display: none; position: absolute; left: 50%; transform: translateX(-50%); width: 44px; height: 44px; color: var(--accent); }
[data-theme="empire-gazette"] .kopbalk-zegel { color: var(--primair); }
@media (min-width: 1800px) {
  [data-theme="cognac-club"] .kopbalk-zegel,
  [data-theme="modern-empire"] .kopbalk-zegel,
  [data-theme="empire-gazette"] .kopbalk-zegel { display: block; }
}
.taalwissel-menu { position: relative; }
.taal-knop {
  display: flex; align-items: center; gap: 8px;
  background: transparent; color: var(--kopbalk-tekst);
  border: 1px solid color-mix(in srgb, var(--kopbalk-tekst) 40%, transparent);
  border-radius: var(--radius-knop); padding: 7px 11px;
  font-family: var(--font-tekst); font-size: 12.5px; font-weight: 700; letter-spacing: 0.05em;
  cursor: pointer; transition: border-color var(--beweging);
}
.taal-knop:hover { border-color: var(--kopbalk-tekst); }
.taal-knop::after {
  content: ''; width: 6px; height: 6px; margin-top: -3px;
  border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg);
}
.taal-lijst {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 60; min-width: 132px;
  margin: 0; padding: 6px; list-style: none;
  background: var(--vlak); border: 1px solid var(--rand); border-radius: var(--radius-kaart);
  box-shadow: 0 16px 38px rgba(20, 15, 12, 0.28);
}
.taal-lijst a {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px;
  border-radius: var(--radius-knop); text-decoration: none;
  color: var(--tekst); font-family: var(--font-tekst); font-size: 13.5px; font-weight: 600; letter-spacing: 0.04em;
}
.taal-lijst a:hover { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--tekst); }
.taal-lijst a.actief { background: color-mix(in srgb, var(--accent) 26%, transparent); }
.vlagkader {
  display: inline-flex; flex-shrink: 0; border-radius: 2px; overflow: hidden;
  box-shadow: 0 0 0 1px rgba(20, 15, 12, 0.22);
}
.vlagkader svg { display: block; }
.menu-knop { display: none; background: none; border: 1.5px solid color-mix(in srgb, currentColor 45%, transparent); border-radius: var(--radius-knop); color: inherit; padding: 8px 10px; cursor: pointer; }
.menu-knop svg { display: block; }
.kopbalk nav { display: flex; align-items: center; justify-content: center; gap: 16px; row-gap: 7px; flex-wrap: wrap; }
.kopbalk nav a {
  color: var(--kopbalk-tekst); font-size: 12px; font-weight: 700;
  letter-spacing: var(--nav-spatiering); text-transform: uppercase; text-decoration: none;
}
.kopbalk nav a span { display: inline-block; padding-bottom: 3px; border-bottom: 2px solid transparent; }
.kopbalk nav a:hover { color: var(--accent); }
[data-theme="empire-gazette"] .kopbalk nav a:hover { color: var(--primair); }
.kopbalk nav a.actief { color: var(--accent); }
.kopbalk nav a.actief span { border-bottom-color: var(--accent); }
[data-theme="empire-gazette"] .kopbalk nav a.actief { color: var(--primair); }
[data-theme="empire-gazette"] .kopbalk nav a.actief span { border-bottom-color: var(--primair); }
[data-theme="bordeaux-art-deco"] .kopbalk nav a + a::before { content: '\2756'; color: color-mix(in srgb, var(--accent) 80%, transparent); font-size: 8px; margin-right: 16px; vertical-align: 2px; }
[data-theme="empire-gazette"] .kopbalk nav a + a::before { content: ''; border-left: 1px solid var(--rand); margin-right: 16px; padding-top: 2px; padding-bottom: 2px; }
@media (max-width: 1699px) { .kopbalk-sub { display: none !important; } }
@media (max-width: 1499px) {
  [data-theme="bordeaux-art-deco"] .kopbalk nav a + a::before,
  [data-theme="empire-gazette"] .kopbalk nav a + a::before { display: none; }
}

/* ---- Hero (home) ---- */
.held { position: relative; overflow: hidden; background: var(--kopbalk-bg); }
.held-foto { width: 100%; height: 100%; object-fit: cover; }
.held-sluier { position: absolute; inset: 0; pointer-events: none; }
.held-paneel { position: relative; padding: 44px var(--goot); }
.held-paneel h1 { color: var(--tekst-op-donker); transition: opacity 300ms ease; }
.held-paneel h1.wisselt { opacity: 0; }
.held-paneel .knopperij { margin-top: 26px; }
.held-watermerk { display: none; position: absolute; right: 4%; top: 10%; width: 130px; height: 130px; opacity: 0.16; color: var(--tekst-op-donker); pointer-events: none; }

[data-theme="cognac-club"] .held { display: grid; grid-template-columns: 5fr 7fr; min-height: 400px; }
[data-theme="cognac-club"] .held-paneel { background: var(--vlak-sterk) url('assets/patroon-ruit-fel.svg'); display: flex; flex-direction: column; justify-content: center; grid-column: 1; grid-row: 1; }
[data-theme="cognac-club"] .held-foto { position: absolute; inset: 0; grid-column: 2; grid-row: 1; }
[data-theme="cognac-club"] .held-sluier { display: none; }

[data-theme="bordeaux-art-deco"] .held { display: flex; align-items: flex-end; min-height: 52vh; }
[data-theme="bordeaux-art-deco"] .held-foto { position: absolute; inset: 0; }
[data-theme="bordeaux-art-deco"] .held-sluier { background: linear-gradient(100deg, rgba(67, 26, 32, 0.82) 0%, rgba(67, 26, 32, 0.45) 45%, rgba(33, 26, 23, 0.2) 100%), linear-gradient(180deg, transparent 50%, rgba(33, 26, 23, 0.45) 100%); }
[data-theme="bordeaux-art-deco"] .held-paneel { max-width: var(--inhoud); margin: 0 auto; width: 100%; padding-bottom: 52px; }

[data-theme="modern-empire"] .held { display: flex; align-items: flex-end; min-height: 50vh; }
[data-theme="modern-empire"] .held-foto { position: absolute; inset: 0; }
[data-theme="modern-empire"] .held-sluier { background: linear-gradient(95deg, rgba(33, 26, 23, 0.66) 0%, rgba(33, 26, 23, 0.25) 50%, rgba(33, 26, 23, 0.05) 80%); }
[data-theme="modern-empire"] .held-paneel { max-width: var(--inhoud); margin: 0 auto; width: 100%; padding-bottom: 56px; }

[data-theme="empire-gazette"] .held { display: grid; grid-template-columns: 11fr 9fr; min-height: 380px; }
[data-theme="empire-gazette"] .held-foto { position: absolute; inset: 0; grid-column: 1; grid-row: 1; }
[data-theme="empire-gazette"] .held-sluier { display: none; }
[data-theme="empire-gazette"] .held-paneel { grid-column: 2; grid-row: 1; background: var(--vlak-sterk); display: flex; flex-direction: column; justify-content: center; }
[data-theme="empire-gazette"] .held-watermerk { display: block; }

/* ---- Pagina-held (subpagina's) ---- */
.pheld { position: relative; overflow: hidden; background: var(--vlak-sterk); }
.pheld-paneel { position: relative; padding: 40px var(--goot); color: var(--tekst-op-donker); }
.pheld-paneel h1 { color: var(--tekst-op-donker); }
.pheld-sub { font-family: var(--font-display); font-size: 21px; margin-top: 6px; color: color-mix(in srgb, var(--tekst-op-donker) 85%, transparent); }
.pheld-paneel p.pheld-intro { margin-top: 14px; color: color-mix(in srgb, var(--tekst-op-donker) 92%, transparent); }
.pheld-paneel .knopperij { margin-top: 24px; }
.pheld-media { position: relative; min-height: 260px; }
.pheld-media > img, .pheld-media > .landkaart { position: absolute; inset: 0; width: auto; height: auto; min-height: 0; border: 0; border-radius: 0; }
/* Het beeld krijgt een echte maat (02-09): zonder maat toonde het zijn pixelmaat gecentreerd en leunde het op overflow: hidden. */
.pheld-media > img { object-fit: cover; width: 100%; height: 100%; }
.pheld { display: grid; grid-template-columns: 5fr 7fr; }
.pheld-paneel { display: flex; flex-direction: column; justify-content: center; }
[data-theme="cognac-club"] .pheld-paneel { background: var(--vlak-sterk) url('assets/patroon-ruit-fel.svg'); }
[data-theme="bordeaux-art-deco"] .pheld-paneel { background: var(--kopbalk-bg) url('assets/deco-patroon.svg'); }
[data-theme="modern-empire"] .pheld { background: var(--achtergrond); }
[data-theme="modern-empire"] .pheld-paneel { color: var(--tekst); }
[data-theme="modern-empire"] .pheld-paneel h1 { color: var(--tekst); }
[data-theme="modern-empire"] .pheld-paneel .pheld-sub, [data-theme="modern-empire"] .pheld-paneel p.pheld-intro { color: var(--gedempt); }
[data-theme="modern-empire"] .pheld-media > img, [data-theme="modern-empire"] .pheld-media > .landkaart { inset: 28px var(--goot) 28px 0; border-radius: var(--radius-kaart); }
[data-theme="modern-empire"] .pheld-media > img { width: calc(100% - var(--goot)); height: calc(100% - 56px); }
[data-theme="empire-gazette"] .pheld { background: var(--achtergrond); grid-template-columns: 7fr 5fr; }
[data-theme="empire-gazette"] .pheld-media { order: 1; }
[data-theme="empire-gazette"] .pheld-paneel { order: 2; background: var(--vlak-sterk); overflow: hidden; }
[data-theme="empire-gazette"] .pheld-paneel::after {
  content: ''; position: absolute; right: -28px; top: 16px; width: 150px; height: 150px;
  background: url('assets/zegel-e.svg') no-repeat center / contain; opacity: 0.14; pointer-events: none;
}
[data-theme="empire-gazette"] .pheld-paneel .eyebrow::before,
[data-theme="empire-gazette"] .pheld-paneel .eyebrow::after {
  content: ''; flex: 0 0 42px; height: 1px; background: color-mix(in srgb, var(--tekst-op-donker) 45%, transparent);
}
[data-theme="empire-gazette"] .pheld-paneel .pheld-sub::after {
  content: ''; display: block; width: 64px; height: 2px; background: var(--accent); margin-top: 14px;
}
[data-theme="empire-gazette"] .verhaal { gap: 0; }
[data-theme="empire-gazette"] .verhaalblok { padding: 0 28px; border-left: 1px solid var(--rand); }
[data-theme="empire-gazette"] .verhaalblok:first-child { border-left: 0; padding-left: 0; }

/* ---- Intro home + asides ---- */
.intro-raster { display: grid; grid-template-columns: 4fr 5fr 3fr; gap: 40px; align-items: start; }
.intro-raster p { margin-bottom: 14px; }
.quotekaart, .locatiekaart, .vintagekaart { display: none; }
[data-theme="cognac-club"] .quotekaart { display: block; }
[data-theme="modern-empire"] .locatiekaart { display: block; }
[data-theme="empire-gazette"] .vintagekaart { display: block; }
[data-theme="bordeaux-art-deco"] .intro-raster { grid-template-columns: 5fr 7fr; }
[data-theme="bordeaux-art-deco"] .intro-aside { display: none; }

.quotekaart { background: var(--vlak-sterk) url('assets/patroon-ruit-fel.svg'); color: var(--tekst-op-donker); border-radius: var(--radius-kaart); padding: 30px 26px; text-align: center; box-shadow: 0 14px 34px rgba(29, 23, 20, 0.25); }
.quotekaart .zegel { width: 52px; height: 52px; margin: 0 auto 18px; color: var(--tekst-op-donker); }
.qk-tekst { font-family: var(--font-display); font-style: italic; font-size: 21px; line-height: 1.35; }
.qk-bron { margin-top: 12px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; opacity: 0.85; }

.locatiekaart { position: relative; z-index: 5; background: var(--vlak-sterk); color: var(--tekst-op-donker); border-radius: var(--radius-kaart); padding: 34px 32px; box-shadow: 0 18px 44px rgba(33, 26, 23, 0.28); background-image: url('assets/boog-groot.svg'); background-repeat: no-repeat; background-position: -180px -80px; background-size: 420px; }
.locatiekaart .zegel { width: 52px; height: 52px; margin: 0 auto 22px; color: var(--tekst-op-donker); }
.lk-label { font-size: 11.5px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: color-mix(in srgb, var(--accent) 70%, #fff); margin-bottom: 4px; }
.lk-waarde { font-size: 15px; margin-bottom: 16px; }
.knop-kader { display: inline-flex; justify-content: center; width: 100%; background: transparent; color: var(--tekst-op-donker); border: 1.5px solid color-mix(in srgb, var(--tekst-op-donker) 70%, transparent); margin-top: 6px; }
.knop-kader:hover { border-color: var(--tekst-op-donker); color: var(--tekst-op-donker); }

.vintagekaart { background: var(--vlak); border: 1px solid var(--primair); outline: 1px solid var(--primair); outline-offset: 4px; padding: 26px 22px; text-align: center; }
.vintagekaart svg { margin: 0 auto 12px; color: var(--primair); }
.vk-kop { font-size: 12.5px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--primair); margin-bottom: 8px; }
.vk-sub { font-size: 14px; }

.ornament { display: none; position: absolute; pointer-events: none; opacity: 0.8; color: var(--accent); }
[data-theme="bordeaux-art-deco"] .band-sier { position: relative; }
@media (min-width: 1181px) {
  [data-theme="bordeaux-art-deco"] .band-sier { padding-left: 220px; }
  [data-theme="bordeaux-art-deco"] .ornament { display: block; left: 40px; top: 60px; width: 150px; height: 420px; }
}
[data-theme="modern-empire"] body { position: relative; }
[data-theme="modern-empire"] .boogdecor { position: relative; z-index: 0; }
.boogdecor::after { content: none; }
[data-theme="modern-empire"] .boogdecor::after {
  content: ''; position: absolute; right: 0; top: 24px; width: 220px; height: 380px;
  background: url('assets/boog-groot.svg') no-repeat right top / contain; opacity: 0.3; pointer-events: none; z-index: -1;
}

/* ---- Shop ---- */
.filters { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-bottom: 30px; }
.filterknop {
  font-family: var(--font-tekst); font-size: 14.5px; font-weight: 500; cursor: pointer;
  background: transparent; color: var(--tekst); border: 1px solid var(--rand);
  border-radius: 999px; padding: 9px 20px; transition: background var(--beweging), color var(--beweging);
}
.filterknop:hover { border-color: var(--tekst); }
.filterknop.actief { background: var(--primair); color: var(--tekst-op-donker); border-color: var(--primair); }
.shoprij { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.shopkaart {
  display: flex; flex-direction: column; text-align: center;
  background: var(--vlak); border: 1px solid var(--accent); border-radius: var(--radius-kaart);
  padding: 12px 14px 18px; transition: box-shadow var(--beweging), transform var(--beweging);
}
.shopkaart:hover { box-shadow: 0 14px 34px rgba(33, 26, 23, 0.14); transform: translateY(-2px); }
.shopkaart[hidden] { display: none; }
.shopbeeld { aspect-ratio: 1 / 1; border-radius: calc(var(--radius-kaart) - 2px); background: #FFFFFF; overflow: hidden; }
.shopbeeld img { width: 100%; height: 100%; object-fit: cover; }
.shopnaam { font-family: var(--font-display); font-size: 19px; color: var(--tekst); margin-top: 12px; }
.shopprijs { font-size: 14px; color: var(--gedempt); margin: 2px 0 14px; }
.shop-knop { margin-top: auto; align-self: center; padding: 9px 16px; font-size: 13px; }
.partnerband {
  margin-top: 44px; display: grid; grid-template-columns: 7fr 5fr; align-items: stretch; overflow: hidden;
  background: var(--vlak); border: 1px solid var(--rand); outline: 1px solid var(--rand); outline-offset: 5px; border-radius: var(--radius-kaart);
}
.partner-inhoud { padding: 32px; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; justify-content: center; }
.partner-merk { font-size: 12px; font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase; color: var(--accent); }
.partner-kop { font-family: var(--font-display); font-size: 26px; }
.partnerband img { width: 100%; height: 100%; min-height: 180px; max-height: 300px; object-fit: cover; }

/* ---- Route ---- */
.adresregel { display: flex; align-items: center; gap: 10px; font-size: 17px; font-weight: 500; margin-top: 16px; }
.adresregel svg { color: var(--accent); flex-shrink: 0; }
.vervoer { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.vervoerblok { background: var(--vlak); border: 1px solid var(--rand); border-radius: var(--radius-kaart); padding: 26px; text-align: center; }
.vervoerblok .icoon { margin: 0 auto 14px; }
.icoon {
  width: 58px; height: 58px; display: flex; align-items: center; justify-content: center;
  color: var(--accent); border: 1.5px solid var(--accent); border-radius: 50%;
}
[data-theme="bordeaux-art-deco"] .icoon, [data-theme="empire-gazette"] .icoon { border-radius: 999px 999px 10px 10px; }
[data-theme="cognac-club"] .vervoerblok .icoon, [data-theme="bordeaux-art-deco"] .vervoerblok .icoon { background: var(--vlak-sterk); color: var(--accent); border-color: var(--accent); }
.vervoerblok p { margin: 6px auto 0; font-size: 15px; color: var(--gedempt); max-width: 30ch; }
.hartband { display: grid; grid-template-columns: 6fr 6fr; gap: 0; margin-top: var(--sectieruimte); overflow: hidden; border-radius: var(--radius-kaart); border: 1px solid var(--rand); background: var(--vlak); }
.hartband img { width: 100%; height: 100%; min-height: 200px; max-height: 340px; object-fit: cover; object-position: 50% 42%; }
.hart-inhoud { padding: 40px; display: flex; flex-direction: column; justify-content: center; }
.hart-inhoud p { color: var(--gedempt); }
.bronregel { font-size: 12.5px; color: var(--gedempt); margin-top: 10px; }
.landkaart { position: relative; z-index: 0; overflow: hidden; }

/* ---- Historie ---- */
.tijdlijn { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.fase { position: relative; padding-top: 8px; }
.fase .icoon { background: var(--vlak-sterk); color: var(--accent); border: 0; margin-bottom: 16px; }
.fase-lijn { position: absolute; left: 28px; top: 76px; bottom: -8px; width: 1px; background: color-mix(in srgb, var(--accent) 45%, transparent); }
.fase p { color: var(--gedempt); font-size: 15.5px; }
.karakterband { display: grid; grid-template-columns: 5fr 7fr; margin-top: var(--sectieruimte); overflow: hidden; border-radius: var(--radius-kaart); border: 1px solid var(--rand); background: var(--vlak); }
.karakterband img { width: 100%; height: 100%; min-height: 220px; max-height: 340px; object-fit: cover; }
.karakter-inhoud { padding: 40px; display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: center; }
.karakter-inhoud p { color: var(--gedempt); font-size: 15.5px; }
.karakter-quote { text-align: center; }
.karakter-quote .qk-tekst { color: var(--tekst); font-size: 23px; }
.karakter-quote .knop { margin-top: 20px; }

/* ---- Huisregels ---- */
.rheld { background: var(--vlak-sterk); color: var(--tekst-op-donker); position: relative; overflow: hidden; }
[data-theme="cognac-club"] .rheld { background: var(--vlak-sterk) url('assets/patroon-ruit-fel.svg'); }
[data-theme="bordeaux-art-deco"] .rheld { background: var(--kopbalk-bg) url('assets/deco-patroon.svg'); }
[data-theme="modern-empire"] .rheld { background: var(--achtergrond); color: var(--tekst); }
.rheld-inhoud { max-width: var(--inhoud); margin: 0 auto; padding: 44px var(--goot); text-align: center; }
[data-theme="modern-empire"] .rheld-inhoud { text-align: left; display: grid; grid-template-columns: 7fr 5fr; gap: 44px; align-items: center; }
.rheld h1 { color: inherit; }
.rheld .zegel { width: 64px; height: 64px; margin: 0 auto 20px; color: var(--accent); }
[data-theme="modern-empire"] .rheld .zegel { margin: 0 0 20px; }
.rheld-sub { margin: 14px auto 0; max-width: 52ch; }
[data-theme="modern-empire"] .rheld-sub { margin-left: 0; }
.kortsamengevat { display: none; }
[data-theme="modern-empire"] .kortsamengevat {
  display: block; background: var(--vlak-sterk); color: var(--tekst-op-donker);
  border-radius: var(--radius-kaart); padding: 30px 28px; box-shadow: 0 16px 40px rgba(33, 26, 23, 0.25);
  background-image: url('assets/boog-groot.svg'); background-repeat: no-repeat; background-position: -200px -60px; background-size: 420px;
}
.kortsamengevat h2 { color: inherit; font-size: 24px; border-bottom: 1px solid color-mix(in srgb, var(--tekst-op-donker) 40%, transparent); padding-bottom: 10px; }
.kortsamengevat ul { list-style: none; margin-top: 14px; }
.kortsamengevat li { display: flex; gap: 10px; align-items: baseline; font-size: 14.5px; margin-bottom: 8px; }
.kortsamengevat li::before { content: '\2713'; color: var(--accent); font-weight: 700; }
.regelraster { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 56px; }
.regel { display: grid; grid-template-columns: 64px 1fr; gap: 20px; align-items: start; padding: 22px 0; border-bottom: 1px solid color-mix(in srgb, var(--rand) 60%, transparent); }
.regel:nth-last-child(-n+2) { border-bottom: 0; }
.regel .icoon { width: 62px; height: 62px; }
.regel h3 { border-bottom: 1px solid var(--rand); padding-bottom: 6px; display: inline-block; }
.regel p { font-size: 15px; color: var(--gedempt); }
.vraagband { position: relative; margin-top: var(--sectieruimte); overflow: hidden; border-radius: var(--radius-kaart); background: var(--vlak-sterk); color: var(--tekst-op-donker); display: grid; grid-template-columns: 7fr 5fr; }
[data-theme="cognac-club"] .vraagband { background: var(--vlak-sterk) url('assets/patroon-ruit-fel.svg'); }
[data-theme="modern-empire"] .vraagband { background: var(--vlak-sterk) url('assets/deco-patroon.svg'); }
.vraag-inhoud { padding: 44px; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; justify-content: center; }
.vraag-inhoud h2 { color: inherit; margin-bottom: 4px; }
.vraagband img { width: 100%; height: 100%; min-height: 180px; max-height: 280px; object-fit: cover; }

/* ---- Verhaalblokken (over) ---- */
.verhaal { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.verhaalblok .waaier { width: 28px; height: 22px; margin-bottom: 10px; }
.verhaalblok .icoon { margin-bottom: 18px; }
.verhaalblok p { font-size: 15.5px; color: var(--gedempt); }
.beeldstrip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 36px; }
.beeldstrip img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius-kaart); border: 1px solid var(--rand); }
.quoteband { margin-top: var(--sectieruimte); background: var(--vlak); border-top: 1px solid var(--rand); border-bottom: 1px solid var(--rand); }
[data-theme="empire-gazette"] .quoteband { background: repeating-linear-gradient(90deg, var(--vlak) 0px, var(--vlak) 5px, color-mix(in srgb, var(--accent) 8%, var(--vlak)) 5px, color-mix(in srgb, var(--accent) 8%, var(--vlak)) 6px); }
.quote-inhoud { max-width: var(--inhoud); margin: 0 auto; padding: 40px var(--goot); display: grid; grid-template-columns: 84px 1fr auto; gap: 32px; align-items: center; }
.quote-inhoud .zegel { width: 72px; height: 72px; color: var(--accent); }
.quote-inhoud .qk-tekst { font-size: 26px; color: var(--tekst); }

/* ---- Kennisbank ---- */
main section[id], main h3[id] { scroll-margin-top: 96px; }
.tegelrij { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.tegel { position: relative; display: block; border-radius: var(--radius-kaart); overflow: hidden; border: 1px solid var(--rand); text-decoration: none; }
.tegel img { width: 100%; height: 190px; object-fit: cover; display: block; transition: transform 300ms ease; }
.tegel:hover img, .tegel:focus-visible img { transform: scale(1.06); }
.tegel-tekst { position: absolute; inset: auto 0 0 0; padding: 34px 16px 13px; background: linear-gradient(transparent, rgba(22, 16, 13, 0.88)); color: #F7F1E5; }
.tegel-kop { font-family: var(--font-display); font-size: 21px; line-height: 1.15; }
.tegel-sub { font-size: 12.5px; opacity: 0.85; margin-top: 2px; }
.lijstkop { margin-top: 36px; }
.stiplijst { list-style: none; margin-top: 10px; }
.stiplijst li { position: relative; padding-left: 20px; font-size: 15px; color: var(--gedempt); margin-bottom: 6px; max-width: 62ch; }
.stiplijst li::before { content: '\2726'; position: absolute; left: 0; top: 1px; color: var(--accent); font-size: 11px; }
.kolommen-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.kolommen-2 h3 { border-bottom: 1px solid var(--rand); padding-bottom: 6px; display: inline-block; }
.bronlijst { max-width: 640px; }
.bronlijst a { display: block; padding: 11px 0; border-bottom: 1px solid color-mix(in srgb, var(--rand) 60%, transparent); text-decoration: none; font-weight: 500; }
.bronlijst a:last-child { border-bottom: 0; }

/* ---- Contact en vacatures ---- */
.contact-raster { display: grid; grid-template-columns: 7fr 5fr; gap: 36px; align-items: stretch; }
.contactkaart {
  background: var(--vlak); border: 1px solid var(--rand); border-radius: var(--radius-kaart);
  padding: 34px 34px 30px; box-shadow: 0 18px 44px rgba(33, 26, 23, 0.10);
}
.contactkaart .kaartkop { font-size: clamp(30px, 3.4vw, 40px); margin: 0; }
.demoformulier label {
  display: block; font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--gedempt); margin: 16px 0 6px;
}
.demoformulier input, .demoformulier select, .demoformulier textarea {
  width: 100%; background: #FFFFFF; border: 1px solid var(--rand); border-radius: var(--radius-knop);
  padding: 12px 14px; font-family: var(--font-tekst); font-size: 15px; color: var(--tekst);
}
.demoformulier input:focus, .demoformulier select:focus, .demoformulier textarea:focus {
  border-color: var(--accent); outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent);
}
.demoformulier textarea { min-height: 120px; resize: vertical; }
.demoformulier .knop { margin-top: 22px; }
.veldrij { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
.veldweg { display: none; }
.veldhint { font-size: 12.5px; color: var(--gedempt); margin-top: 6px; }
.form-dank { margin-top: 18px; font-weight: 600; color: var(--secundair); }
.oproep { margin: 20px 0 2px; font-weight: 600; max-width: 62ch; }
.contact-beeld img { width: 100%; height: 100%; min-height: 320px; object-fit: cover; object-position: 50% 42%; border-radius: var(--radius-kaart); border: 1px solid var(--rand); }

/* ---- Soortengids ---- */
.waarschuwing {
  display: flex; gap: 14px; align-items: flex-start;
  background: color-mix(in srgb, var(--accent) 14%, transparent); border: 1px solid var(--accent);
  border-radius: var(--radius-kaart); padding: 16px 18px; margin-bottom: 28px;
}
.waarschuwing p { font-size: 14.5px; font-weight: 500; max-width: none; }
.waarschuwing .waaier { flex-shrink: 0; margin-top: 3px; }
.gidsrij { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.gidskaart { background: var(--vlak); border: 1px solid var(--rand); border-radius: var(--radius-kaart); overflow: hidden; display: flex; flex-direction: column; }
.gidskaart[hidden] { display: none; }
.gids-kopvlak { height: 118px; display: flex; align-items: center; justify-content: center; color: #F7F1E5; }
.g-citrus { background: linear-gradient(135deg, #C9922E, #A65B22); }
.g-den { background: linear-gradient(135deg, #4E6B4A, #2F4A3C); }
.g-fruit { background: linear-gradient(135deg, #B4685A, #7A3E4A); }
.g-peper { background: linear-gradient(135deg, #7A4A3A, #4A2C28); }
.g-aards { background: linear-gradient(135deg, #6B5A44, #3E3428); }
.g-bloem { background: linear-gradient(135deg, #7A6A8A, #4A4262); }
.gids-inhoud { padding: 18px 20px 20px; }
.gids-badges { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.badge {
  font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 22%, transparent); color: var(--tekst);
}
.badge-licht { background: transparent; border: 1px solid var(--rand); }
.gids-inhoud p { font-size: 14.5px; color: var(--gedempt); }

/* ---- Reviews ---- */
.gr-raster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.gr { background: #FFFFFF; border: 1px solid var(--rand); border-radius: var(--radius-kaart); padding: 22px; }
.gr-sterren { color: var(--accent); font-size: 16px; letter-spacing: 3px; margin-bottom: 8px; }
.gr-tekst { font-size: 14.5px; margin-bottom: 10px; }
.gr-naam { font-weight: 500; font-size: 13px; color: var(--gedempt); }
.knopperij { display: flex; gap: 12px; flex-wrap: wrap; }
.knopperij-midden { justify-content: center; margin-top: 28px; }
.knopperij-ruim { margin-top: 28px; }
.bronregel-midden { text-align: center; margin-top: 20px; }

/* ---- Voet ---- */
.voet { background: var(--kopbalk-bg); color: color-mix(in srgb, var(--kopbalk-tekst) 92%, transparent); padding: 56px var(--goot) 26px; margin-top: var(--sectieruimte); -webkit-font-smoothing: antialiased; }
.voet p { font-size: 14.5px; line-height: 2; }
.voet a { font-weight: 600; }
[data-theme="cognac-club"] .voet { background: var(--kopbalk-bg) url('assets/patroon-ruit.svg'); }
[data-theme="bordeaux-art-deco"] .voet { background: var(--kopbalk-bg) url('assets/deco-patroon.svg'); border-top: 2px solid var(--accent); }
[data-theme="modern-empire"] .voet { background: var(--kopbalk-bg) url('assets/deco-patroon.svg'); }
[data-theme="empire-gazette"] .voet { border-top: 3px double var(--primair); color: var(--gedempt); }
.voet a { color: var(--kopbalk-tekst); text-decoration: none; }
.voet a:hover { color: var(--accent); }
[data-theme="empire-gazette"] .voet a { color: var(--tekst); }
[data-theme="empire-gazette"] .voet a:hover { color: var(--primair); }
.voet h4 { font-size: 12px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; margin-bottom: 10px; color: var(--accent); }
.voet-kolommen { display: grid; grid-template-columns: 1.6fr 1fr 1.6fr 1.1fr; gap: 32px; max-width: var(--inhoud); margin: 0 auto 40px; }
.voet-paginas { display: grid; grid-template-columns: 1fr 1fr; gap: 0 26px; }
.woordmerk-voet { font-family: var(--font-display); font-size: 28px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); }
[data-theme="empire-gazette"] .woordmerk-voet { color: var(--primair); }
.leus-voet { font-family: var(--font-display); font-style: italic; font-size: 15px; opacity: 0.75; }
.voet-onder { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; max-width: var(--inhoud); margin: 0 auto; border-top: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); padding-top: 18px; font-size: 12.5px; }

/* ---- Chat ---- */
.chat-knop { position: fixed; right: 20px; bottom: 20px; z-index: 90; display: flex; align-items: center; gap: 8px; background: var(--primair); color: var(--tekst-op-donker); border: 1px solid color-mix(in srgb, var(--accent) 60%, transparent); border-radius: 999px; padding: 12px 20px; font-family: var(--font-tekst); font-size: 15px; font-weight: 700; cursor: pointer; box-shadow: 0 6px 24px rgba(33, 26, 23, 0.35); }
.chat-knop:hover { background: var(--primair-hover); }
.chat-paneel { position: fixed; left: 16px; right: 20px; bottom: 82px; z-index: 95; width: auto; max-width: 380px; margin-left: auto; max-height: min(540px, calc(100vh - 118px)); display: flex; flex-direction: column; background: var(--vlak); border: 1px solid var(--rand); border-radius: var(--radius-kaart); box-shadow: 0 18px 50px rgba(33, 26, 23, 0.3); overflow: hidden; }
.chat-paneel[hidden] { display: none; }
.chat-kop { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 20px 20px 12px; }
.chat-hallo { font-family: var(--font-display); font-size: 24px; color: var(--primair); }
.chat-uitleg { font-size: 13.5px; color: var(--gedempt); margin-top: 4px; }
.chat-dicht { flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--rand); background: #FFFFFF; color: var(--primair); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.chat-berichten { flex: 1; overflow-y: auto; padding: 6px 20px; display: flex; flex-direction: column; gap: 8px; min-height: 36px; }
.chat-bericht { max-width: 85%; padding: 9px 14px; border-radius: 14px; font-size: 14px; line-height: 1.5; }
.chat-bericht-gast { align-self: flex-end; background: var(--primair); color: var(--tekst-op-donker); border-bottom-right-radius: 4px; }
.chat-bericht-bot { align-self: flex-start; background: #FFFFFF; color: var(--tekst); border: 1px solid var(--rand); border-bottom-left-radius: 4px; }
.chat-chips { display: flex; gap: 8px; flex-wrap: wrap; padding: 10px 20px 4px; }
.chat-chips button { border: 1px solid var(--rand); background: #FFFFFF; color: var(--tekst); border-radius: 999px; padding: 7px 14px; font-family: var(--font-tekst); font-size: 13px; font-weight: 500; cursor: pointer; }
.chat-chips button:hover { border-color: var(--primair); color: var(--primair); }
.chat-invoer { display: flex; gap: 8px; padding: 12px 20px 6px; }
.chat-invoer input { flex: 1; border: 1px solid var(--rand); border-radius: 999px; padding: 11px 18px; font-family: var(--font-tekst); font-size: 14px; background: #FFFFFF; color: var(--tekst); }
.chat-verstuur { flex-shrink: 0; width: 42px; height: 42px; border-radius: 50%; border: 0; background: var(--primair); color: var(--tekst-op-donker); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.chat-verstuur:hover { background: var(--primair-hover); }
.chat-voetnoot { font-size: 11px; color: var(--gedempt); padding: 0 20px 14px; }

/* ---- Themawisselaar (dev) ---- */
/* Themakiezer: op de demolink kiest de klant hier zelf een ontwerp. */
.themawissel { position: fixed; left: 16px; bottom: 16px; z-index: 90; display: flex; align-items: center; gap: 10px; background: rgba(20, 16, 13, 0.92); color: #F7F1E5; border: 1px solid rgba(247, 241, 229, 0.28); border-radius: 999px; padding: 9px 16px; font-family: var(--font-tekst); font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; box-shadow: 0 6px 24px rgba(20, 16, 13, 0.35); }
.themawissel select { font-family: var(--font-tekst); font-size: 13px; font-weight: 600; border-radius: 8px; border: 0; padding: 6px 8px; max-width: 46vw; cursor: pointer; }
@media (max-width: 560px) {
  .themawissel { left: 12px; bottom: 78px; padding: 7px 12px; gap: 0; }
  .themawissel label { display: none; }
  .themawissel select { max-width: 42vw; }
}

/* ---- Responsief ---- */
@media (max-width: 1023px) {
  .intro-raster, [data-theme="bordeaux-art-deco"] .intro-raster { grid-template-columns: 1fr; gap: 28px; }
  .locatiekaart { margin-top: 0; }
  .verhaal, .tijdlijn, .vervoer { grid-template-columns: 1fr; }
  [data-theme="empire-gazette"] .verhaal { gap: 28px; }
  [data-theme="empire-gazette"] .verhaalblok { padding: 0; border-left: 0; }
  .karakter-inhoud, .quote-inhoud, .kolommen-2 { grid-template-columns: 1fr; text-align: left; }
  .quote-inhoud { gap: 16px; }
  [data-theme="modern-empire"] .rheld-inhoud { grid-template-columns: 1fr; }
  .regelraster { grid-template-columns: 1fr; }
  .shoprij { grid-template-columns: 1fr 1fr; }
  .gr-raster { grid-template-columns: 1fr; }
  .boogdecor::after { display: none; }
}
@media (max-width: 767px) {
  .kopbalk { flex-wrap: wrap; }
  .kopbalk-merk { order: 0; }
  .taalwissel-menu { order: 1; margin-left: auto; }
  .menu-knop { display: block; order: 2; }
  .kopbalk nav { order: 3; }
  .kopbalk nav { display: none; width: 100%; flex-direction: column; align-items: flex-start; gap: 4px; padding-top: 12px; }
  .kopbalk nav.open { display: flex; }
  .kopbalk nav a { padding: 10px 0; width: 100%; border-bottom: 1px solid color-mix(in srgb, currentColor 15%, transparent); }
  .kopbalk nav a + a::before { display: none !important; }
  /* Gazette: de gouden balk onder de actieve link is desktopdecoratie; in het uitklapmenu blijft alleen de rode streep (02-09). */
  [data-theme="empire-gazette"] .kopbalk nav a.actief::after { display: none; }
  .kopbalk-zegel { display: none !important; }
  [data-theme="cognac-club"] .held, [data-theme="empire-gazette"] .held { grid-template-columns: 1fr; min-height: 0; }
  /* Foto boven het paneel (02-09): de foto stond absoluut achter het paneel, met alleen een reepje links zichtbaar. */
  [data-theme="cognac-club"] .held-foto, [data-theme="empire-gazette"] .held-foto { position: relative; inset: auto; grid-column: 1; grid-row: 1; height: 240px; min-height: 0; }
  [data-theme="cognac-club"] .held-paneel, [data-theme="empire-gazette"] .held-paneel { grid-column: 1; grid-row: 2; }
  [data-theme="empire-gazette"] .held-watermerk { top: auto; bottom: 6%; }
  [data-theme="bordeaux-art-deco"] .held, [data-theme="modern-empire"] .held { min-height: 56vh; }
  [data-theme="modern-empire"] .held-paneel { padding-bottom: 64px; }
  .pheld, [data-theme="empire-gazette"] .pheld { grid-template-columns: 1fr; }
  .pheld-media { order: 1; }
  .pheld-paneel { order: 2; }
  [data-theme="modern-empire"] .pheld-media { padding: 20px var(--goot) 0; }
  .partnerband, .hartband, .karakterband, .vraagband { grid-template-columns: 1fr; }
  .beeldstrip { grid-template-columns: 1fr; }
  .shoprij { grid-template-columns: 1fr 1fr; }
  .voet-kolommen { grid-template-columns: 1fr 1fr; }
  .voet-paginas { grid-template-columns: 1fr; gap: 0; }
  .poort-merk { font-size: 42px; }
  .poort-foto { height: 150px; }
  .held-paneel h1 { min-height: 2.1em; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .knop, .filterknop, .tegel img { transition: none; }
}
@media (max-width: 1023px) {
  .tegelrij, .gidsrij { grid-template-columns: 1fr 1fr; }
  .contact-raster { grid-template-columns: 1fr; }
}
@media (max-width: 599px) {
  .tegelrij, .gidsrij { grid-template-columns: 1fr; }
  .veldrij { grid-template-columns: 1fr; }
  .contactkaart { padding: 24px 20px; }
}

/* ==== 3D-thema's (29-08): diepteletters en lagenparallax (de draaigalerij is 02-09 vervallen, zie fotostroom) ==== */

@font-face { font-family: 'IBM Plex Serif'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/ibm-plex-serif-600.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/ibm-plex-sans-400.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/ibm-plex-sans-500.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/ibm-plex-sans-700.woff2') format('woff2'); }

[data-theme="3d-letters"] {
  --achtergrond: #EFE3CC;
  --vlak: #F7F1E5;
  --vlak-sterk: #54272C;
  --tekst: #211A17;
  --tekst-op-donker: #F7F1E5;
  --gedempt: #756556;
  --primair: #A95036;
  --primair-hover: #8A3F2A;
  --accent: #B48A4A;
  --secundair: #54272C;
  --rand: #C7A971;
  --kopbalk-bg: #341419;
  --kopbalk-tekst: #F7F1E5;
  --font-display: 'IBM Plex Serif', Georgia, serif;
  --font-tekst: 'IBM Plex Sans', Arial, sans-serif;
  --nav-spatiering: 0.14em;
  --radius-kaart: 12px;
  --radius-knop: 10px;
}
[data-theme="3d-lagen"] {
  --achtergrond: #E8D9BA;
  --vlak: #F7F1E5;
  --vlak-sterk: #54272C;
  --tekst: #211A17;
  --tekst-op-donker: #F7F1E5;
  --gedempt: #756556;
  --primair: #54272C;
  --primair-hover: #421D22;
  --accent: #B48A4A;
  --secundair: #A95036;
  --rand: #C7A971;
  --kopbalk-bg: #431A20;
  --kopbalk-tekst: #F7F1E5;
  --font-display: 'DM Serif Display', Georgia, serif;
  --font-tekst: 'Manrope', Arial, sans-serif;
  --nav-spatiering: 0.14em;
  --radius-kaart: 10px;
  --radius-knop: 8px;
}

/* -- 3d-letters: donker bordeaux-podium, EMPIRE met dikte, gelaagde paginakoppen -- */
[data-theme="3d-letters"] .held { background: radial-gradient(ellipse at 50% 20%, #6B3339 0%, #54272C 45%, #38191D 100%); }
[data-theme="3d-letters"] .held::before { content: ""; position: absolute; inset: 0; background: url('assets/deco-patroon.svg'); background-size: 220px; opacity: 0.1; pointer-events: none; }
[data-theme="3d-letters"] .held-foto, [data-theme="3d-letters"] .held-sluier { display: none; }
[data-theme="3d-letters"] .held-paneel { text-align: center; max-width: 940px; margin: 0 auto; padding-top: 40px; padding-bottom: 52px; }
[data-theme="3d-letters"] .held-paneel .eyebrow { justify-content: center; }
[data-theme="3d-letters"] .held-paneel .sier { margin-left: auto; margin-right: auto; justify-content: center; }
[data-theme="3d-letters"] .held-paneel .knopperij { justify-content: center; }
[data-theme="3d-letters"] .held-paneel h1 { font-size: clamp(19px, 2.2vw, 26px); font-weight: 400; letter-spacing: 0.02em; opacity: 0.95; }
[data-theme="3d-letters"] .pheld-paneel { background: #421D22 url('assets/deco-patroon.svg'); }

.podium3d { perspective: 1100px; margin-bottom: 10px; }
.w3d {
  display: inline-block; position: relative;
  transform-style: preserve-3d; will-change: transform;
  font-family: var(--font-display); font-weight: 600;
  letter-spacing: 0.1em; line-height: 1.1;
  font-size: clamp(46px, 9vw, 128px);
  color: var(--tekst-op-donker);
}
.w3d-laag { display: block; }
.w3d-voor { position: relative; }
.w3d-diep { position: absolute; inset: 0; user-select: none; }
.h1-3d { perspective: 900px; }
.h1-3d .w3d { font-size: clamp(32px, 4.4vw, 54px); letter-spacing: 0.05em; }

/* -- 3d-lagen: Bordeaux & Messing met lagen die in eigen tempo meeschuiven -- */
[data-theme="3d-lagen"] .held { display: flex; align-items: flex-end; min-height: 52vh; }
[data-theme="3d-lagen"] .held-foto { position: absolute; inset: 0; }
[data-theme="3d-lagen"] .held-sluier { background: linear-gradient(100deg, rgba(67, 26, 32, 0.82) 0%, rgba(67, 26, 32, 0.45) 45%, rgba(33, 26, 23, 0.2) 100%), linear-gradient(180deg, transparent 50%, rgba(33, 26, 23, 0.45) 100%); }
[data-theme="3d-lagen"] .held-paneel { max-width: var(--inhoud); margin: 0 auto; width: 100%; padding-bottom: 52px; }
[data-theme="3d-lagen"] .held-watermerk { display: block; }
[data-theme="3d-lagen"] .pheld-paneel { background: var(--kopbalk-bg) url('assets/deco-patroon.svg'); }
[data-theme="3d-lagen"] .band-sier { position: relative; }
@media (min-width: 1181px) {
  [data-theme="3d-lagen"] .band-sier { padding-left: 220px; }
  [data-theme="3d-lagen"] .ornament { display: block; left: 40px; top: 60px; width: 150px; height: 420px; }
}
.l3d-monogram {
  position: absolute; right: -120px; top: -40px;
  width: 480px; height: 480px;
  background: url('assets/sier-monogram.svg') no-repeat center / contain;
  opacity: 0.14; pointer-events: none;
}
[data-theme="3d-lagen"] .l3d-laag { will-change: transform; }

/* ==== 2026-thema's (02-09): nachtcinema, kinetisch, bento, zwitsers (aurora-glas is 02-09 's avonds vervallen) ==== */
/* Nieuwste technieken, allemaal zonder inline stijl of script (CSP): scroll-gestuurde
   animaties (animation-timeline: view()), @property, animation-composition, losse
   translate/rotate-eigenschappen, backdrop-filter, scroll-snap, text-wrap: balance,
   view transitions tussen pagina's (opt-in in thema.js). Alles valt stil terug in oudere
   browsers en bij prefers-reduced-motion. */

/* -- Gedeeld: scroll-gestuurde onthulling van kaarten en koppen -- */
@keyframes n26-opkomen { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@supports (animation-timeline: view()) {
  html:is([data-theme="nacht-cinema"], [data-theme="kinetisch"], [data-theme="bento"], [data-theme="zwitsers"], [data-theme="goud"], [data-theme="horizontaal"], [data-theme="tijdschrift"], [data-theme="collage"], [data-theme="organisch"], [data-theme="stil"], [data-theme="fotostroom"])
  :is(.bandkop, .bandintro, .intro-raster > div, .intro-beeld, .intro-aside, .shopkaart, .gr, .vervoerblok, .fase, .verhaalblok, .beeldstrip img, .tegel, .gidskaart, .regel, .contactkaart, .contact-beeld, .partnerband, .hartband, .karakterband, .vraagband, .quote-inhoud, .kolommen-2 > *, .stiplijst, .bronlijst, .waarschuwing, .knopperij-midden, .bn-tegel, .filters, .lijstkop) {
    animation: n26-opkomen linear both; animation-timeline: view(); animation-range: entry 0% entry 40%;
  }
}
/* Witte onderdelen op de donkere thema's houden donkere tekst. */
html:is([data-theme="nacht-cinema"], [data-theme="goud"], [data-theme="fotostroom"]) :is(.gr, .chat-bericht-bot, .chat-chips button, .chat-invoer input, .demoformulier input, .demoformulier select, .demoformulier textarea) { color: #241B17; }
html:is([data-theme="nacht-cinema"], [data-theme="goud"], [data-theme="fotostroom"]) .gr-naam { color: #6C5A4D; }
html:is([data-theme="nacht-cinema"], [data-theme="goud"], [data-theme="fotostroom"]) .demoformulier label { color: var(--gedempt); }
html:is([data-theme="nacht-cinema"], [data-theme="goud"], [data-theme="fotostroom"]) .knop-spook { border-color: rgba(247, 241, 229, 0.42); }
html:is([data-theme="nacht-cinema"], [data-theme="goud"], [data-theme="fotostroom"]) .knop-spook:hover { border-color: #F7F1E5; }
/* Lichte kopbalken: de poort blijft donker. */
html:is([data-theme="kinetisch"], [data-theme="bento"], [data-theme="zwitsers"], [data-theme="tijdschrift"], [data-theme="collage"], [data-theme="stil"], [data-theme="organisch"]) .poort { background: var(--vlak-sterk); }

/* -- 1. Nachtcinema: filmisch donker, lichtbundel volgt de muis, korrel, filmstrook -- */
[data-theme="nacht-cinema"] {
  --achtergrond: #0F0C0B;
  --vlak: #1B1613;
  --vlak-sterk: #2A1F1A;
  --tekst: #F3EAD9;
  --tekst-op-donker: #F7F1E5;
  --gedempt: #B9AA97;
  --primair: #A95036;
  --primair-hover: #C25E3E;
  --accent: #CFA85F;
  --secundair: #54272C;
  --rand: rgba(247, 241, 229, 0.16);
  --kopbalk-bg: #0F0C0B;
  --kopbalk-tekst: #F3EAD9;
  --font-display: 'IBM Plex Serif', Georgia, serif;
  --font-tekst: 'Inter', Arial, sans-serif;
  --nav-spatiering: 0.14em;
  --radius-kaart: 14px;
  --radius-knop: 999px;
}
[data-theme="nacht-cinema"] .kopbalk { background: linear-gradient(180deg, rgba(15, 12, 11, 0.94), rgba(15, 12, 11, 0.72)); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid rgba(247, 241, 229, 0.08); }
[data-theme="nacht-cinema"] .held { display: flex; align-items: flex-end; min-height: min(88vh, 900px); isolation: isolate; }
[data-theme="nacht-cinema"] .held-foto { position: absolute; inset: 0; transform-origin: 50% 40%; animation: nc-zoom 30s ease-in-out infinite alternate; filter: saturate(0.9); }
@keyframes nc-zoom { from { transform: scale(1.04); } to { transform: scale(1.18) translate(-1.5%, -1%); } }
[data-theme="nacht-cinema"] .held-sluier {
  z-index: 1;
  background:
    radial-gradient(circle at var(--mx, 68%) var(--my, 42%), rgba(207, 168, 95, 0.26), transparent 24%),
    radial-gradient(ellipse at 50% 50%, transparent 38%, rgba(15, 12, 11, 0.78) 100%),
    linear-gradient(180deg, rgba(15, 12, 11, 0.4) 0%, rgba(15, 12, 11, 0.08) 35%, rgba(15, 12, 11, 0.94) 100%);
}
[data-theme="nacht-cinema"] .held::after { content: ''; position: absolute; inset: 0; z-index: 2; background: url('assets/korrel.svg'); background-size: 260px; opacity: 0.22; mix-blend-mode: soft-light; pointer-events: none; }
[data-theme="nacht-cinema"] .held-paneel { position: relative; z-index: 3; max-width: var(--inhoud); margin: 0 auto; width: 100%; padding-bottom: 64px; }
[data-theme="nacht-cinema"] .held-paneel .eyebrow { display: inline-flex; padding: 8px 16px; border: 1px solid rgba(247, 241, 229, 0.3); border-radius: 999px; background: rgba(15, 12, 11, 0.38); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); margin-bottom: 22px; color: #F3EAD9; }
[data-theme="nacht-cinema"] .held-paneel h1 { font-size: clamp(42px, 7vw, 96px); line-height: 0.98; letter-spacing: -0.01em; max-width: 12ch; text-wrap: balance; text-shadow: 0 10px 40px rgba(0, 0, 0, 0.55); }
[data-theme="nacht-cinema"] .held-paneel .sier { display: none; }
[data-theme="nacht-cinema"] .held-paneel .knopperij { margin-top: 30px; }
.nc-rail { background: var(--achtergrond); padding: 26px 0 6px; }
.nc-rail::before, .nc-rail::after { content: ''; display: block; height: 12px; margin: 0 var(--goot); border-radius: 3px; background: repeating-linear-gradient(90deg, transparent 0 16px, rgba(247, 241, 229, 0.2) 16px 26px); }
.nc-rail-scroll { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 14px var(--goot); scrollbar-width: none; }
.nc-rail-scroll::-webkit-scrollbar { display: none; }
.nc-kader { position: relative; flex: 0 0 auto; width: min(340px, 74vw); aspect-ratio: 4 / 5; margin: 0; scroll-snap-align: center; border-radius: 10px; overflow: hidden; background: #1B1613; border: 1px solid rgba(247, 241, 229, 0.1); }
.nc-kader img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.85) contrast(1.05); transition: transform 700ms cubic-bezier(0.22, 1, 0.36, 1), filter 700ms; }
.nc-kader:hover img { transform: scale(1.05); filter: saturate(1) contrast(1.05); }
.nc-nr { position: absolute; left: 14px; top: 12px; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px; letter-spacing: 0.14em; color: rgba(247, 241, 229, 0.85); background: rgba(15, 12, 11, 0.55); padding: 4px 8px; border-radius: 4px; }
@keyframes nc-focus { 0% { opacity: 0.45; scale: 0.92; } 50% { opacity: 1; scale: 1; } 100% { opacity: 0.45; scale: 0.92; } }
@supports (animation-timeline: view()) {
  .nc-kader { animation: nc-focus linear both; animation-timeline: view(inline); animation-range: cover 0% cover 100%; }
}
[data-theme="nacht-cinema"] .pheld { background: var(--achtergrond); grid-template-columns: 6fr 6fr; min-height: 56vh; }
[data-theme="nacht-cinema"] .pheld-paneel { background: transparent; padding-top: 60px; padding-bottom: 60px; }
[data-theme="nacht-cinema"] .pheld-paneel h1 { font-size: clamp(40px, 5.6vw, 76px); letter-spacing: -0.01em; text-wrap: balance; }
[data-theme="nacht-cinema"] .pheld-media { min-height: 400px; }
[data-theme="nacht-cinema"] .pheld-media > img { filter: saturate(0.9); -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 24%); mask-image: linear-gradient(90deg, transparent 0%, #000 24%); }
[data-theme="nacht-cinema"] .rheld { background: var(--vlak); }
[data-theme="nacht-cinema"] .shopkaart { border-color: rgba(207, 168, 95, 0.32); }
[data-theme="nacht-cinema"] .shopkaart:hover, [data-theme="nacht-cinema"] .gidskaart:hover, [data-theme="nacht-cinema"] .vervoerblok:hover, [data-theme="nacht-cinema"] .tegel:hover { box-shadow: 0 0 0 1px rgba(207, 168, 95, 0.55), 0 24px 60px rgba(0, 0, 0, 0.5); }
[data-theme="nacht-cinema"] .gidskaart, [data-theme="nacht-cinema"] .vervoerblok, [data-theme="nacht-cinema"] .tegel { transition: box-shadow var(--beweging); }
[data-theme="nacht-cinema"] .voet { border-top: 1px solid rgba(247, 241, 229, 0.08); }
[data-theme="nacht-cinema"] .icoon { border-color: rgba(207, 168, 95, 0.6); }

/* -- 2. Kinetisch: reusachtige letters die binnenvliegen, lopende tekstband, redactioneel licht -- */
[data-theme="kinetisch"] {
  --achtergrond: #F3ECDD;
  --vlak: #FBF7EE;
  --vlak-sterk: #17120F;
  --tekst: #17120F;
  --tekst-op-donker: #F7F1E5;
  --gedempt: #6A5F55;
  --primair: #A95036;
  --primair-hover: #8A3F2A;
  --accent: #54272C;
  --secundair: #B48A4A;
  --rand: #CDBFA6;
  --kopbalk-bg: #F3ECDD;
  --kopbalk-tekst: #17120F;
  --font-display: 'DM Serif Display', Georgia, serif;
  --font-tekst: 'Manrope', Arial, sans-serif;
  --nav-spatiering: 0.1em;
  --radius-kaart: 0px;
  --radius-knop: 999px;
}
[data-theme="kinetisch"] h1, [data-theme="kinetisch"] h2, [data-theme="kinetisch"] h3 { font-weight: 400; }
[data-theme="kinetisch"] h2 { font-size: clamp(34px, 5vw, 64px); text-transform: uppercase; letter-spacing: -0.02em; line-height: 0.95; }
[data-theme="kinetisch"] .kopbalk { border-bottom: 1px solid color-mix(in srgb, var(--tekst) 18%, transparent); }
[data-theme="kinetisch"] .held { background: var(--achtergrond); display: block; padding: 28px var(--goot) 0; min-height: 0; }
[data-theme="kinetisch"] .held-sluier, [data-theme="kinetisch"] .held-watermerk { display: none; }
[data-theme="kinetisch"] .held-foto { position: absolute; right: 5%; top: 6%; width: min(30vw, 400px); height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 6px; box-shadow: 0 30px 60px rgba(23, 18, 15, 0.28); z-index: 0; rotate: -4deg; animation: kn-zweef 9s ease-in-out infinite alternate; }
@keyframes kn-zweef { to { translate: 0 -14px; rotate: -2deg; } }
[data-theme="kinetisch"] .held-paneel { position: relative; z-index: 1; max-width: var(--container); margin: 0 auto; padding: 20px 0 52px; color: var(--tekst); }
[data-theme="kinetisch"] .held-paneel .eyebrow { color: var(--accent); }
[data-theme="kinetisch"] .held-paneel h1 { color: var(--tekst); font-size: clamp(40px, 9.6vw, 150px); line-height: 0.9; letter-spacing: -0.03em; text-transform: uppercase; max-width: none; }
[data-theme="kinetisch"] .held-paneel .sier { display: none; }
[data-theme="kinetisch"] .held-paneel .knopperij { margin-top: 34px; }
[data-theme="kinetisch"] .held-paneel .knop-spook { color: var(--tekst); border-color: var(--tekst); }
.kn-regel { display: block; animation: kn-in 900ms cubic-bezier(0.22, 1, 0.36, 1) both; animation-delay: calc(var(--i, 0) * 130ms); }
.kn-regel:nth-child(even) { text-align: right; padding-right: 6vw; animation-name: kn-in-rechts; }
@keyframes kn-in { from { opacity: 0; transform: translateX(-7vw) skewX(-8deg); } to { opacity: 1; transform: none; } }
@keyframes kn-in-rechts { from { opacity: 0; transform: translateX(7vw) skewX(8deg); } to { opacity: 1; transform: none; } }
@keyframes kn-schuif-links { to { transform: translateX(-9vw); } }
@keyframes kn-schuif-rechts { to { transform: translateX(9vw); } }
@supports (animation-timeline: scroll()) {
  .kn-regel { animation: kn-in 900ms cubic-bezier(0.22, 1, 0.36, 1) both, kn-schuif-links linear both; animation-delay: calc(var(--i, 0) * 130ms), 0s; animation-timeline: auto, scroll(root); animation-range: normal, 0 700px; animation-composition: replace, add; }
  .kn-regel:nth-child(even) { animation-name: kn-in-rechts, kn-schuif-rechts; }
}
.kn-marquee { overflow: hidden; border-top: 1px solid var(--tekst); border-bottom: 1px solid var(--tekst); background: var(--vlak-sterk); color: var(--tekst-op-donker); padding: 12px 0; white-space: nowrap; }
.kn-marquee-spoor { display: inline-flex; align-items: center; animation: kn-marquee 40s linear infinite; font-family: var(--font-display); font-size: clamp(20px, 2.4vw, 32px); text-transform: uppercase; letter-spacing: 0.06em; }
.kn-marquee:hover .kn-marquee-spoor { animation-play-state: paused; }
.kn-marquee-item { padding: 0 28px; }
.kn-ster { color: var(--secundair); font-size: 0.7em; }
@keyframes kn-marquee { to { transform: translateX(-50%); } }
@keyframes kn-kop-in { from { opacity: 0; transform: translateX(-40px) skewX(-4deg); } to { opacity: 1; transform: none; } }
@supports (animation-timeline: view()) { [data-theme="kinetisch"] .bandkop { animation-name: kn-kop-in; } }
[data-theme="kinetisch"] .bandkop .waaier { display: none; }
[data-theme="kinetisch"] .intro-raster { grid-template-columns: 5fr 7fr; }
[data-theme="kinetisch"] .intro-aside { display: none; }
[data-theme="kinetisch"] .shopkaart, [data-theme="kinetisch"] .gr, [data-theme="kinetisch"] .vervoerblok, [data-theme="kinetisch"] .gidskaart, [data-theme="kinetisch"] .contactkaart { border-color: var(--tekst); }
[data-theme="kinetisch"] .pheld { background: var(--achtergrond); grid-template-columns: 1fr; }
[data-theme="kinetisch"] .pheld-paneel { color: var(--tekst); max-width: var(--container); margin: 0 auto; width: 100%; padding: 52px var(--goot) 28px; }
[data-theme="kinetisch"] .pheld-paneel h1 { color: var(--tekst); font-size: clamp(44px, 9vw, 140px); text-transform: uppercase; letter-spacing: -0.03em; line-height: 0.92; animation: kn-in 900ms cubic-bezier(0.22, 1, 0.36, 1) both; }
[data-theme="kinetisch"] .pheld-paneel .eyebrow { color: var(--accent); }
[data-theme="kinetisch"] .pheld-paneel .pheld-sub { color: var(--accent); }
[data-theme="kinetisch"] .pheld-paneel p.pheld-intro, [data-theme="kinetisch"] .pheld-paneel .bronregel { color: var(--gedempt); }
[data-theme="kinetisch"] .pheld-paneel .knop-spook { color: var(--tekst); border-color: var(--tekst); }
[data-theme="kinetisch"] .pheld-media { min-height: 48vh; margin: 0 var(--goot) 0; }
[data-theme="kinetisch"] .pheld-media > img { animation: kn-onthul 1100ms cubic-bezier(0.22, 1, 0.36, 1) both; }
@keyframes kn-onthul { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0); } }
[data-theme="kinetisch"] .rheld { background: var(--achtergrond); color: var(--tekst); }
[data-theme="kinetisch"] .rheld .zegel { color: var(--accent); }
[data-theme="kinetisch"] .voet { border-top: 1px solid var(--tekst); }
[data-theme="kinetisch"] .icoon { border-radius: 0; }

/* -- 3. Bento: alles in afgeronde tegels, mozaiek van echte foto's, zachte lift bij hover -- */
[data-theme="bento"] {
  --achtergrond: #ECE6DA;
  --vlak: #FBF9F4;
  --vlak-sterk: #211A17;
  --tekst: #1E1916;
  --tekst-op-donker: #F7F1E5;
  --gedempt: #6E655C;
  --primair: #A95036;
  --primair-hover: #8A3F2A;
  --accent: #B48A4A;
  --secundair: #54272C;
  --rand: #DDD3C2;
  --kopbalk-bg: #ECE6DA;
  --kopbalk-tekst: #1E1916;
  --font-display: 'Fraunces', Georgia, serif;
  --font-tekst: 'Manrope', Arial, sans-serif;
  --nav-spatiering: 0.08em;
  --radius-kaart: 24px;
  --radius-knop: 12px;
  --sectieruimte: 40px;
}
[data-theme="bento"] .kopbalk { background: rgba(236, 230, 218, 0.82); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid rgba(30, 25, 22, 0.08); }
[data-theme="bento"] .held { background: var(--achtergrond); display: grid; grid-template-columns: 7fr 5fr; gap: 16px; max-width: var(--inhoud); margin: 0 auto; padding: 16px var(--goot) 0; min-height: 0; overflow: visible; }
[data-theme="bento"] .held-sluier, [data-theme="bento"] .held-watermerk { display: none; }
[data-theme="bento"] .held-paneel { grid-column: 1; grid-row: 1; background: var(--vlak-sterk) url('assets/boog-groot.svg') no-repeat right -140px top -90px / 520px; border-radius: 28px; padding: 48px 44px; display: flex; flex-direction: column; justify-content: flex-end; min-height: 520px; }
[data-theme="bento"] .held-paneel h1 { font-size: clamp(38px, 4.6vw, 64px); text-wrap: balance; }
[data-theme="bento"] .held-foto { grid-column: 2; grid-row: 1; position: relative; height: 100%; min-height: 520px; border-radius: 28px; }
[data-theme="bento"] .intro-raster { grid-template-columns: 6fr 4fr 3fr; gap: 16px; align-items: stretch; }
[data-theme="bento"] .intro-raster > div:first-child { background: var(--vlak); border: 1px solid var(--rand); border-radius: var(--radius-kaart); padding: 36px; }
[data-theme="bento"] .intro-beeld { border: 0; max-height: none; min-height: 320px; }
[data-theme="bento"] .intro-aside { display: grid; }
[data-theme="bento"] .locatiekaart { display: block; height: 100%; }
.bn-mozaiek { margin-top: 16px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 200px; gap: 16px; }
.bn-tegel { margin: 0; border-radius: var(--radius-kaart); overflow: hidden; position: relative; background: var(--vlak); }
.bn-tegel:first-child { grid-column: span 2; grid-row: span 2; }
.bn-tegel img { width: 100%; height: 100%; object-fit: cover; transition: transform 700ms cubic-bezier(0.22, 1, 0.36, 1); }
.bn-tegel:hover img { transform: scale(1.05); }
[data-theme="bento"] .shoprij { gap: 16px; }
[data-theme="bento"] .shopkaart { border-radius: 20px; border-color: var(--rand); }
[data-theme="bento"] .shopbeeld { border-radius: 14px; }
[data-theme="bento"] .gr-raster { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
[data-theme="bento"] .gr { border-radius: 20px; padding: 26px; }
[data-theme="bento"] .gr:nth-child(1), [data-theme="bento"] .gr:nth-child(6) { grid-column: span 2; }
[data-theme="bento"] .shopkaart, [data-theme="bento"] .gr, [data-theme="bento"] .vervoerblok, [data-theme="bento"] .gidskaart, [data-theme="bento"] .tegel, [data-theme="bento"] .bn-tegel, [data-theme="bento"] .contactkaart { transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 320ms; }
[data-theme="bento"] .shopkaart:hover, [data-theme="bento"] .gr:hover, [data-theme="bento"] .vervoerblok:hover, [data-theme="bento"] .gidskaart:hover, [data-theme="bento"] .tegel:hover, [data-theme="bento"] .bn-tegel:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(30, 25, 22, 0.12); }
[data-theme="bento"] .hartband, [data-theme="bento"] .karakterband, [data-theme="bento"] .partnerband, [data-theme="bento"] .vraagband { border-radius: 28px; }
[data-theme="bento"] .partnerband { outline: 0; }
[data-theme="bento"] .pheld { background: var(--achtergrond); gap: 16px; max-width: var(--inhoud); margin: 0 auto; padding: 16px var(--goot) 0; overflow: visible; }
[data-theme="bento"] .pheld-paneel { background: var(--vlak-sterk) url('assets/boog-groot.svg') no-repeat right -160px top -100px / 480px; border-radius: 28px; padding: 44px; }
[data-theme="bento"] .pheld-media { border-radius: 28px; overflow: hidden; min-height: 380px; }
[data-theme="bento"] .pheld-media > img, [data-theme="bento"] .pheld-media > .landkaart { border-radius: 28px; }
[data-theme="bento"] .rheld { max-width: var(--inhoud); margin: 16px auto 0; padding: 0 var(--goot); background: transparent; color: var(--tekst-op-donker); }
[data-theme="bento"] .rheld-inhoud { background: var(--vlak-sterk); border-radius: 28px; padding: 48px 40px; }
[data-theme="bento"] .voet { background: var(--vlak-sterk); color: rgba(247, 241, 229, 0.9); border-radius: 28px; margin: var(--sectieruimte) var(--goot) 16px; }
[data-theme="bento"] .voet a { color: #F7F1E5; }
[data-theme="bento"] .voet a:hover { color: var(--accent); }
[data-theme="bento"] .icoon { border-radius: 16px; }

/* -- 5. Zwitsers raster: zichtbaar raster, monospace-labels, genummerde secties, omkering bij hover -- */
[data-theme="zwitsers"] {
  --achtergrond: #F4F1EA;
  --vlak: #FFFFFF;
  --vlak-sterk: #111111;
  --tekst: #111111;
  --tekst-op-donker: #F4F1EA;
  --gedempt: #5A5650;
  --primair: #111111;
  --primair-hover: #A95036;
  --accent: #A95036;
  --secundair: #B48A4A;
  --rand: #111111;
  --kopbalk-bg: #F4F1EA;
  --kopbalk-tekst: #111111;
  --font-display: 'Inter', Arial, sans-serif;
  --font-tekst: 'Inter', Arial, sans-serif;
  --nav-spatiering: 0.02em;
  --radius-kaart: 0px;
  --radius-knop: 0px;
  --mono: ui-monospace, 'SFMono-Regular', Menlo, Consolas, 'Liberation Mono', monospace;
}
[data-theme="zwitsers"] h1, [data-theme="zwitsers"] h2, [data-theme="zwitsers"] h3 { font-weight: 700; letter-spacing: -0.03em; }
[data-theme="zwitsers"] h2 { font-size: clamp(34px, 4.6vw, 60px); text-transform: uppercase; }
[data-theme="zwitsers"] body::before { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: repeating-linear-gradient(90deg, rgba(17, 17, 17, 0.07) 0 1px, transparent 1px calc(100% / 12)); }
[data-theme="zwitsers"] .kopbalk { border-bottom: 1px solid var(--tekst); }
[data-theme="zwitsers"] .woordmerk { font-weight: 700; letter-spacing: -0.02em; color: var(--tekst); }
[data-theme="zwitsers"] .woordmerk:hover { color: var(--accent); }
[data-theme="zwitsers"] .kopbalk nav a { font-size: 13px; }
[data-theme="zwitsers"] .kopbalk nav a.actief, [data-theme="zwitsers"] .kopbalk nav a:hover { color: var(--accent); }
[data-theme="zwitsers"] .kopbalk nav a.actief span { border-bottom-color: var(--accent); }
.zw-status { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.04em; color: var(--gedempt); white-space: nowrap; }
[data-theme="zwitsers"] .held { background: var(--achtergrond); display: grid; grid-template-columns: 7fr 5fr; min-height: 0; border-bottom: 1px solid var(--tekst); }
[data-theme="zwitsers"] .held-sluier, [data-theme="zwitsers"] .held-watermerk { display: none; }
[data-theme="zwitsers"] .held-paneel { grid-column: 1; grid-row: 1; color: var(--tekst); padding: 56px var(--goot) 48px; border-right: 1px solid var(--tekst); display: flex; flex-direction: column; justify-content: flex-end; }
[data-theme="zwitsers"] .held-paneel h1 { color: var(--tekst); font-size: clamp(44px, 8.4vw, 132px); text-transform: uppercase; letter-spacing: -0.04em; line-height: 0.9; max-width: none; }
[data-theme="zwitsers"] .held-foto { grid-column: 2; grid-row: 1; position: relative; height: 100%; min-height: 480px; filter: grayscale(1) contrast(1.08); transition: filter 600ms ease; }
[data-theme="zwitsers"] .held:hover .held-foto { filter: none; }
[data-theme="zwitsers"] .held-paneel .eyebrow, [data-theme="zwitsers"] .pheld-paneel .eyebrow { font-family: var(--mono); font-weight: 500; letter-spacing: 0.04em; color: currentColor; }
[data-theme="zwitsers"] .held-paneel .sier { display: none; }
[data-theme="zwitsers"] .held-paneel .knop-spook, [data-theme="zwitsers"] .pheld-paneel .knop-spook { color: var(--tekst); border-color: var(--tekst); }
[data-theme="zwitsers"] .knop { text-transform: uppercase; letter-spacing: 0.04em; font-size: 13px; }
[data-theme="zwitsers"] main { counter-reset: sectie; }
[data-theme="zwitsers"] .bandkop { counter-increment: sectie; position: relative; padding-top: 16px; margin-bottom: 14px; }
[data-theme="zwitsers"] .bandkop::before { content: counter(sectie, decimal-leading-zero); position: absolute; right: 0; top: 16px; font-family: var(--mono); font-size: 12px; color: var(--gedempt); }
[data-theme="zwitsers"] .bandkop::after { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 1px; background: var(--tekst); transform-origin: left; }
@keyframes zw-lijn { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@supports (animation-timeline: view()) { [data-theme="zwitsers"] .bandkop::after { animation: zw-lijn linear both; animation-timeline: view(); animation-range: entry 0% entry 70%; } }
[data-theme="zwitsers"] .bandkop .waaier { display: none; }
[data-theme="zwitsers"] .bandintro { font-family: var(--mono); font-size: 13.5px; }
[data-theme="zwitsers"] .vintagekaart { display: block; outline-offset: 5px; }
[data-theme="zwitsers"] .icoon { border-radius: 0; }
[data-theme="zwitsers"] .shopkaart, [data-theme="zwitsers"] .gr, [data-theme="zwitsers"] .vervoerblok, [data-theme="zwitsers"] .gidskaart, [data-theme="zwitsers"] .tegel, [data-theme="zwitsers"] .contactkaart, [data-theme="zwitsers"] .hartband, [data-theme="zwitsers"] .karakterband, [data-theme="zwitsers"] .partnerband { border-color: var(--tekst); box-shadow: none; }
[data-theme="zwitsers"] .shopkaart, [data-theme="zwitsers"] .vervoerblok, [data-theme="zwitsers"] .gidskaart { transition: background 200ms, color 200ms; }
[data-theme="zwitsers"] .shopkaart:hover, [data-theme="zwitsers"] .vervoerblok:hover, [data-theme="zwitsers"] .gidskaart:hover { background: var(--tekst); color: var(--tekst-op-donker); transform: none; box-shadow: none; }
[data-theme="zwitsers"] .shopkaart:hover .shopnaam, [data-theme="zwitsers"] .shopkaart:hover .shopprijs, [data-theme="zwitsers"] .vervoerblok:hover h3, [data-theme="zwitsers"] .vervoerblok:hover p, [data-theme="zwitsers"] .gidskaart:hover h3, [data-theme="zwitsers"] .gidskaart:hover p, [data-theme="zwitsers"] .gidskaart:hover .badge { color: var(--tekst-op-donker); }
[data-theme="zwitsers"] .vervoerblok:hover .icoon { color: var(--tekst-op-donker); border-color: var(--tekst-op-donker); }
[data-theme="zwitsers"] .gr { position: relative; }
[data-theme="zwitsers"] .gr::after { content: '+'; position: absolute; right: 12px; top: 8px; font-family: var(--mono); font-size: 14px; color: var(--gedempt); }
[data-theme="zwitsers"] .gr-naam, [data-theme="zwitsers"] .shopprijs, [data-theme="zwitsers"] .bronregel, [data-theme="zwitsers"] .lk-label, [data-theme="zwitsers"] .vk-kop, [data-theme="zwitsers"] .partner-merk { font-family: var(--mono); }
[data-theme="zwitsers"] .filterknop { border-radius: 0; border-color: var(--tekst); font-family: var(--mono); font-size: 13px; }
[data-theme="zwitsers"] .badge { border-radius: 0; font-family: var(--mono); }
[data-theme="zwitsers"] .pheld { background: var(--achtergrond); grid-template-columns: 7fr 5fr; border-bottom: 1px solid var(--tekst); }
[data-theme="zwitsers"] .pheld-paneel { color: var(--tekst); border-right: 1px solid var(--tekst); padding: 56px var(--goot) 44px; }
[data-theme="zwitsers"] .pheld-paneel h1 { color: var(--tekst); font-size: clamp(40px, 7vw, 110px); text-transform: uppercase; letter-spacing: -0.04em; line-height: 0.9; }
[data-theme="zwitsers"] .pheld-paneel .pheld-sub { color: var(--accent); font-family: var(--mono); font-size: 14px; text-transform: uppercase; margin-top: 18px; }
[data-theme="zwitsers"] .pheld-paneel p.pheld-intro, [data-theme="zwitsers"] .pheld-paneel .bronregel, [data-theme="zwitsers"] .pheld-paneel .adresregel { color: var(--gedempt); }
[data-theme="zwitsers"] .pheld-media > img { filter: grayscale(1) contrast(1.05); transition: filter 600ms ease; }
[data-theme="zwitsers"] .pheld:hover .pheld-media > img { filter: none; }
[data-theme="zwitsers"] .rheld { background: var(--achtergrond); color: var(--tekst); border-bottom: 1px solid var(--tekst); }
[data-theme="zwitsers"] .rheld .zegel { color: var(--tekst); }
[data-theme="zwitsers"] .voet { background: var(--vlak-sterk); color: rgba(244, 241, 234, 0.9); }
[data-theme="zwitsers"] .voet a { color: #F4F1EA; }
[data-theme="zwitsers"] .voet a:hover { color: var(--secundair); }
[data-theme="zwitsers"] .voet h4 { color: #F4F1EA; font-family: var(--mono); }
[data-theme="zwitsers"] .woordmerk-voet { color: #F4F1EA; letter-spacing: -0.02em; }
[data-theme="zwitsers"] .chat-knop { border-radius: 0; }

/* -- Responsief voor de vijf nieuwe thema's -- */
@media (max-width: 1023px) {
  [data-theme="bento"] .intro-raster, [data-theme="kinetisch"] .intro-raster { grid-template-columns: 1fr; }
  [data-theme="bento"] .gr-raster { grid-template-columns: 1fr 1fr; }
  [data-theme="bento"] .gr:nth-child(1), [data-theme="bento"] .gr:nth-child(6) { grid-column: auto; }
}
@media (max-width: 767px) {
  [data-theme="nacht-cinema"] .held { min-height: 78vh; }
  [data-theme="nacht-cinema"] .pheld { grid-template-columns: 1fr; min-height: 0; }
  [data-theme="nacht-cinema"] .pheld-media { min-height: 260px; }
  [data-theme="nacht-cinema"] .pheld-media > img { -webkit-mask-image: none; mask-image: none; }
  [data-theme="kinetisch"] .held-foto { position: relative; right: auto; top: auto; width: 78%; margin: 4px auto 0; rotate: -3deg; }
  [data-theme="kinetisch"] .held-paneel { padding-bottom: 32px; }
  [data-theme="kinetisch"] .held-paneel h1 { min-height: 0; }
  .kn-regel:nth-child(even) { padding-right: 0; }
  [data-theme="kinetisch"] .pheld { grid-template-columns: 1fr; }
  [data-theme="kinetisch"] .pheld-media { min-height: 260px; margin: 0; }
  [data-theme="bento"] .held { grid-template-columns: 1fr; padding: 12px var(--goot) 0; }
  [data-theme="bento"] .held-foto { grid-column: 1; grid-row: 1; height: 260px; min-height: 0; }
  [data-theme="bento"] .held-paneel { grid-column: 1; grid-row: 2; min-height: 0; padding: 32px 24px; }
  [data-theme="bento"] .intro-raster > div:first-child { padding: 26px 22px; }
  .bn-mozaiek { grid-template-columns: 1fr 1fr; grid-auto-rows: 140px; }
  [data-theme="bento"] .gr-raster { grid-template-columns: 1fr; }
  [data-theme="bento"] .pheld { grid-template-columns: 1fr; padding: 12px var(--goot) 0; }
  [data-theme="bento"] .pheld-media { min-height: 240px; order: 1; }
  [data-theme="bento"] .pheld-paneel { order: 2; padding: 30px 24px; }
  [data-theme="bento"] .rheld-inhoud { padding: 32px 22px; }
  [data-theme="bento"] .voet { margin: var(--sectieruimte) 12px 12px; }
  [data-theme="zwitsers"] .held { grid-template-columns: 1fr; }
  [data-theme="zwitsers"] .held-foto { grid-column: 1; grid-row: 1; height: 260px; min-height: 0; border-bottom: 1px solid var(--tekst); }
  [data-theme="zwitsers"] .held-paneel { grid-column: 1; grid-row: 2; border-right: 0; padding: 32px var(--goot) 36px; }
  [data-theme="zwitsers"] .pheld { grid-template-columns: 1fr; }
  [data-theme="zwitsers"] .pheld-paneel { border-right: 0; border-bottom: 1px solid var(--tekst); order: 2; }
  [data-theme="zwitsers"] .pheld-media { order: 1; }
  .zw-status { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  html:is([data-theme="nacht-cinema"], [data-theme="kinetisch"], [data-theme="bento"], [data-theme="zwitsers"], [data-theme="goud"], [data-theme="horizontaal"], [data-theme="tijdschrift"], [data-theme="collage"], [data-theme="organisch"], [data-theme="stil"], [data-theme="fotostroom"]) :is(.bandkop, .bandintro, .intro-raster > div, .intro-beeld, .intro-aside, .shopkaart, .gr, .vervoerblok, .fase, .verhaalblok, .beeldstrip img, .tegel, .gidskaart, .regel, .contactkaart, .contact-beeld, .partnerband, .hartband, .karakterband, .vraagband, .quote-inhoud, .kolommen-2 > *, .stiplijst, .bronlijst, .waarschuwing, .knopperij-midden, .bn-tegel, .filters, .lijstkop) { animation: none; }
  .kn-marquee-spoor { white-space: normal; }
}

/* ==== 2026-thema's, deel 2 (02-09, avond): goud, horizontaal, tijdschrift, collage, stil (duotoon is dezelfde nacht vervallen) ==== */

/* -- Kinetisch (herzien): de foto staat naast de letters in een eigen kolom, niet meer eronder -- */
[data-theme="kinetisch"] .held { display: grid; grid-template-columns: minmax(0, 1fr) min(28vw, 380px); gap: 40px; align-items: center; }
[data-theme="kinetisch"] .held-foto { position: relative; right: auto; top: auto; width: 100%; grid-column: 2; grid-row: 1; }
[data-theme="kinetisch"] .held-paneel { grid-column: 1; grid-row: 1; min-width: 0; }
[data-theme="kinetisch"] .held-paneel h1 { font-size: clamp(40px, 6.4vw, 112px); }
.kn-regel { overflow-wrap: anywhere; }
.kn-regel:nth-child(even) { padding-right: 2vw; }

/* -- 6. Zwart & Goud: luxe clubgevoel, dunne gouden lijnen, cursieve serif, foto's die openwissen -- */
[data-theme="goud"] {
  --achtergrond: #0B0A09;
  --vlak: #14120F;
  --vlak-sterk: #1C1815;
  --tekst: #EFE6D3;
  --tekst-op-donker: #F7F1E5;
  --gedempt: #A99B85;
  --primair: #B48A4A;
  --primair-hover: #CFA85F;
  --accent: #B48A4A;
  --secundair: #54272C;
  --rand: rgba(180, 138, 74, 0.38);
  --kopbalk-bg: #0B0A09;
  --kopbalk-tekst: #EFE6D3;
  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-tekst: 'Manrope', Arial, sans-serif;
  --nav-spatiering: 0.18em;
  --radius-kaart: 0px;
  --radius-knop: 0px;
}
[data-theme="goud"] h1, [data-theme="goud"] h2, [data-theme="goud"] h3 { font-weight: 600; letter-spacing: 0.01em; }
[data-theme="goud"] .knop-hoofd, [data-theme="goud"] .knop-hoofd:hover, [data-theme="goud"] .chat-knop, [data-theme="goud"] .chat-verstuur, [data-theme="goud"] .chat-bericht-gast, [data-theme="goud"] .filterknop.actief { color: #0B0A09; }
[data-theme="goud"] .knop { text-transform: uppercase; letter-spacing: 0.14em; font-size: 12.5px; padding: 14px 28px; }
[data-theme="goud"] .knop-spook { border-color: rgba(180, 138, 74, 0.6); color: var(--accent); }
[data-theme="goud"] .knop-spook:hover { border-color: var(--accent); color: var(--tekst); }
[data-theme="goud"] .kopbalk { border-bottom: 1px solid rgba(180, 138, 74, 0.35); padding-top: 16px; padding-bottom: 16px; }
[data-theme="goud"] .woordmerk { font-size: 26px; letter-spacing: 0.24em; }
[data-theme="goud"] .kopbalk nav a { font-size: 11.5px; }
[data-theme="goud"] .held { background: var(--achtergrond); display: grid; grid-template-columns: 1fr; justify-items: center; padding: 48px var(--goot) 56px; min-height: 0; }
[data-theme="goud"] .held::before { content: ''; position: absolute; left: 50%; top: 50%; width: 640px; height: 640px; transform: translate(-50%, -50%); background: url('assets/zegel-e.svg') no-repeat center / contain; opacity: 0.06; pointer-events: none; }
[data-theme="goud"] .held-sluier, [data-theme="goud"] .held-watermerk { display: none; }
[data-theme="goud"] .held-paneel { order: -1; position: relative; text-align: center; max-width: 900px; padding: 0 0 40px; }
[data-theme="goud"] .held-paneel .eyebrow { justify-content: center; }
[data-theme="goud"] .held-paneel .eyebrow::before, [data-theme="goud"] .held-paneel .eyebrow::after, [data-theme="goud"] .pheld-paneel .eyebrow::before { content: ''; flex: 0 0 56px; height: 1px; background: rgba(180, 138, 74, 0.6); }
[data-theme="goud"] .held-paneel h1 { font-size: clamp(42px, 5.6vw, 80px); font-style: italic; font-weight: 500; line-height: 1.02; text-wrap: balance; }
[data-theme="goud"] .held-paneel .sier { margin-left: auto; margin-right: auto; justify-content: center; }
[data-theme="goud"] .held-paneel .knopperij { justify-content: center; }
[data-theme="goud"] .held-foto { order: 1; position: relative; width: min(100%, 1040px); height: auto; aspect-ratio: 21 / 9; object-fit: cover; border: 1px solid rgba(180, 138, 74, 0.55); outline: 1px solid rgba(180, 138, 74, 0.35); outline-offset: 10px; filter: saturate(0.85) sepia(0.12); }
[data-theme="goud"] .bandkop { justify-content: center; }
[data-theme="goud"] .bandkop .waaier { color: var(--accent); }
[data-theme="goud"] .bandintro { text-align: center; margin-left: auto; margin-right: auto; }
[data-theme="goud"] .shopkaart, [data-theme="goud"] .vervoerblok, [data-theme="goud"] .gidskaart, [data-theme="goud"] .contactkaart, [data-theme="goud"] .tegel, [data-theme="goud"] .partnerband, [data-theme="goud"] .hartband, [data-theme="goud"] .karakterband, [data-theme="goud"] .vraagband, [data-theme="goud"] .quoteband, [data-theme="goud"] .intro-beeld, [data-theme="goud"] .beeldstrip img, [data-theme="goud"] .contact-beeld img { border-color: rgba(180, 138, 74, 0.4); box-shadow: none; }
[data-theme="goud"] .shopkaart:hover { box-shadow: 0 0 0 1px rgba(180, 138, 74, 0.7); transform: none; }
[data-theme="goud"] .shopkaart, [data-theme="goud"] .vervoerblok, [data-theme="goud"] .gidskaart, [data-theme="goud"] .contactkaart { position: relative; }
[data-theme="goud"] .shopkaart::before, [data-theme="goud"] .vervoerblok::before, [data-theme="goud"] .gidskaart::before, [data-theme="goud"] .contactkaart::before { content: ''; position: absolute; left: 6px; top: 6px; width: 14px; height: 14px; border-left: 1px solid var(--accent); border-top: 1px solid var(--accent); pointer-events: none; }
[data-theme="goud"] .shopkaart::after, [data-theme="goud"] .vervoerblok::after, [data-theme="goud"] .gidskaart::after, [data-theme="goud"] .contactkaart::after { content: ''; position: absolute; right: 6px; bottom: 6px; width: 14px; height: 14px; border-right: 1px solid var(--accent); border-bottom: 1px solid var(--accent); pointer-events: none; }
[data-theme="goud"] .partnerband { outline-color: rgba(180, 138, 74, 0.25); }
[data-theme="goud"] .quotekaart { display: block; background: transparent; border: 1px solid rgba(180, 138, 74, 0.5); outline: 1px solid rgba(180, 138, 74, 0.25); outline-offset: 6px; color: var(--tekst); box-shadow: none; }
[data-theme="goud"] .quotekaart .zegel { color: var(--accent); }
[data-theme="goud"] .icoon { border-color: var(--accent); }
[data-theme="goud"] .fase .icoon { background: transparent; border: 1px solid var(--accent); }
@keyframes goud-wis { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0); } }
@supports (animation-timeline: view()) {
  [data-theme="goud"] :is(.intro-beeld, .beeldstrip img, .tegel, .hartband, .karakterband, .vraagband, .partnerband, .contact-beeld) { animation: goud-wis linear both; animation-timeline: view(); animation-range: entry 0% entry 70%; }
}
[data-theme="goud"] .pheld { background: var(--achtergrond); grid-template-columns: 5fr 7fr; }
[data-theme="goud"] .pheld-paneel { background: transparent; border-right: 1px solid rgba(180, 138, 74, 0.3); padding: 56px var(--goot); }
[data-theme="goud"] .pheld-paneel h1 { font-style: italic; font-weight: 500; font-size: clamp(40px, 5vw, 70px); }
[data-theme="goud"] .pheld-media { padding: 24px; min-height: 380px; }
[data-theme="goud"] .pheld-media > img, [data-theme="goud"] .pheld-media > .landkaart { inset: 24px; border: 1px solid rgba(180, 138, 74, 0.55); }
[data-theme="goud"] .pheld-media > img { filter: saturate(0.85) sepia(0.12); }
[data-theme="goud"] .rheld { background: var(--vlak); border-top: 1px solid rgba(180, 138, 74, 0.35); border-bottom: 1px solid rgba(180, 138, 74, 0.35); }
[data-theme="goud"] .voet { border-top: 1px solid rgba(180, 138, 74, 0.35); }
[data-theme="goud"] .poort-foto { border-color: rgba(180, 138, 74, 0.6); }

/* -- 7. Horizontale Reis: de homepagina-secties schuiven zijwaarts terwijl je gewoon naar beneden scrolt -- */
[data-theme="horizontaal"] {
  --achtergrond: #EFE6D6;
  --vlak: #F9F4EA;
  --vlak-sterk: #2A1D19;
  --tekst: #241B17;
  --tekst-op-donker: #F8F1E6;
  --gedempt: #6C5A4D;
  --primair: #A95036;
  --primair-hover: #8A3F2A;
  --accent: #B48A4A;
  --secundair: #54272C;
  --rand: #D8C8AC;
  --kopbalk-bg: #2A1D19;
  --kopbalk-tekst: #F8F1E6;
  --font-display: 'Fraunces', Georgia, serif;
  --font-tekst: 'Manrope', Arial, sans-serif;
  --nav-spatiering: 0.12em;
  --radius-kaart: 16px;
  --radius-knop: 999px;
}
[data-theme="horizontaal"] .held { display: flex; align-items: flex-end; min-height: 72vh; }
[data-theme="horizontaal"] .held-foto { position: absolute; inset: 0; }
[data-theme="horizontaal"] .held-sluier { background: linear-gradient(95deg, rgba(42, 29, 25, 0.72) 0%, rgba(42, 29, 25, 0.3) 55%, rgba(42, 29, 25, 0.05) 100%), linear-gradient(180deg, transparent 55%, rgba(42, 29, 25, 0.55) 100%); }
[data-theme="horizontaal"] .held-paneel { max-width: var(--inhoud); margin: 0 auto; width: 100%; padding-bottom: 56px; }
[data-theme="horizontaal"] .held-paneel h1 { font-size: clamp(40px, 5.6vw, 76px); text-wrap: balance; }
.hz-scroll { view-timeline-name: --hz; view-timeline-axis: block; height: calc(var(--panelen, 4) * 100vh); }
.hz-toneel { position: sticky; top: 0; height: 100vh; overflow: hidden; }
.hz-spoor { display: flex; height: 100vh; width: max-content; animation: hz-schuif linear both; animation-timeline: --hz; animation-range: contain 0% contain 100%; will-change: transform; }
@keyframes hz-schuif { to { transform: translateX(calc(-100vw * (var(--panelen, 4) - 1))); } }
.hz-paneel { flex: 0 0 100vw; height: 100vh; overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column; padding: 70px 0 48px; }
.hz-paneel > .band { margin: auto; width: 100%; padding-top: 24px; padding-bottom: 24px; }
.hz-paneel:nth-child(even) { background: var(--vlak); }
.hz-balk { position: absolute; left: var(--goot); right: var(--goot); bottom: 22px; height: 2px; background: color-mix(in srgb, var(--tekst) 15%, transparent); }
.hz-balk::after { content: ''; position: absolute; inset: 0; background: var(--primair); transform-origin: left; animation: hz-vul linear both; animation-timeline: --hz; animation-range: contain 0% contain 100%; }
@keyframes hz-vul { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.hz-teller { position: absolute; right: var(--goot); bottom: 32px; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px; letter-spacing: 0.14em; color: var(--gedempt); }
[data-theme="horizontaal"] .hz-paneel .boogdecor::after { display: none; }

/* -- 8. Tijdschrift: cursieve serif-koppen, initiaal, leesbalk bovenaan, foto's die onder de kop wegduiken -- */
[data-theme="tijdschrift"] {
  --achtergrond: #F6F1E7;
  --vlak: #FFFFFF;
  --vlak-sterk: #1A1614;
  --tekst: #1A1614;
  --tekst-op-donker: #F7F1E5;
  --gedempt: #6B625A;
  --primair: #A95036;
  --primair-hover: #8A3F2A;
  --accent: #54272C;
  --secundair: #B48A4A;
  --rand: #DED4C3;
  --kopbalk-bg: #F6F1E7;
  --kopbalk-tekst: #1A1614;
  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-tekst: 'Libre Franklin', Arial, sans-serif;
  --nav-spatiering: 0.1em;
  --radius-kaart: 2px;
  --radius-knop: 2px;
}
[data-theme="tijdschrift"] h1, [data-theme="tijdschrift"] h2 { font-style: italic; font-weight: 500; letter-spacing: -0.01em; }
[data-theme="tijdschrift"] h2 { font-size: clamp(34px, 4.4vw, 58px); }
@keyframes ts-lees { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@supports (animation-timeline: scroll()) {
  [data-theme="tijdschrift"] body::after { content: ''; position: fixed; left: 0; top: 0; height: 3px; width: 100%; background: var(--primair); transform-origin: left; z-index: 60; pointer-events: none; animation: ts-lees linear both; animation-timeline: scroll(root); }
}
[data-theme="tijdschrift"] .kopbalk { border-bottom: 1px solid var(--tekst); }
[data-theme="tijdschrift"] .woordmerk { color: var(--tekst); font-style: italic; text-transform: none; letter-spacing: 0.02em; font-size: 30px; font-weight: 500; }
[data-theme="tijdschrift"] .woordmerk:hover { color: var(--primair); }
[data-theme="tijdschrift"] .kopbalk nav a.actief { color: var(--primair); }
[data-theme="tijdschrift"] .kopbalk nav a.actief span { border-bottom-color: var(--primair); }
[data-theme="tijdschrift"] .held { background: var(--achtergrond); display: grid; grid-template-columns: 1fr; padding: 0 var(--goot); min-height: 0; overflow: visible; }
[data-theme="tijdschrift"] .held-foto { position: relative; width: 100%; height: auto; aspect-ratio: 21 / 9; max-height: 560px; object-fit: cover; margin-top: 24px; }
[data-theme="tijdschrift"] .held-sluier, [data-theme="tijdschrift"] .held-watermerk { display: none; }
[data-theme="tijdschrift"] .held-paneel { position: relative; z-index: 2; justify-self: start; max-width: 900px; margin-top: -90px; background: var(--achtergrond); padding: 30px 48px 0 0; color: var(--tekst); }
[data-theme="tijdschrift"] .held-paneel h1 { color: var(--tekst); font-size: clamp(46px, 7vw, 108px); line-height: 0.95; }
[data-theme="tijdschrift"] .held-paneel .eyebrow { color: var(--accent); }
[data-theme="tijdschrift"] .held-paneel .sier { max-width: 200px; margin-left: 0; }
[data-theme="tijdschrift"] .held-paneel .knop-spook, [data-theme="tijdschrift"] .pheld-paneel .knop-spook { color: var(--tekst); border-color: var(--tekst); }
[data-theme="tijdschrift"] .intro-raster { grid-template-columns: 7fr 5fr; align-items: start; gap: 56px; }
[data-theme="tijdschrift"] .intro-raster > div:first-child p:first-of-type::first-letter { font-family: var(--font-display); font-style: italic; font-size: 4.4em; line-height: 0.8; float: left; padding: 8px 12px 0 0; color: var(--accent); }
[data-theme="tijdschrift"] .intro-beeld { position: sticky; top: 90px; border: 0; border-radius: 0; max-height: none; }
[data-theme="tijdschrift"] .intro-beeld img { aspect-ratio: 4 / 5; min-height: 0; }
[data-theme="tijdschrift"] .intro-aside { display: none; }
[data-theme="tijdschrift"] .bandkop { border-top: 1px solid var(--tekst); padding-top: 18px; }
[data-theme="tijdschrift"] .bandkop .waaier { display: none; }
[data-theme="tijdschrift"] .bandintro { font-style: italic; font-family: var(--font-display); font-size: 20px; }
[data-theme="tijdschrift"] .shopkaart { border: 0; border-top: 1px solid var(--tekst); border-radius: 0; background: transparent; text-align: left; padding: 14px 0 12px; }
[data-theme="tijdschrift"] .shopkaart:hover { box-shadow: none; transform: none; }
[data-theme="tijdschrift"] .shopbeeld { border: 1px solid var(--rand); }
[data-theme="tijdschrift"] .shop-knop { align-self: flex-start; }
[data-theme="tijdschrift"] .gr { border-color: var(--rand); }
[data-theme="tijdschrift"] .gr-tekst { font-family: var(--font-display); font-style: italic; font-size: 19px; line-height: 1.4; }
[data-theme="tijdschrift"] .vervoerblok, [data-theme="tijdschrift"] .gidskaart, [data-theme="tijdschrift"] .contactkaart { border-color: var(--tekst); box-shadow: none; }
[data-theme="tijdschrift"] .pheld { background: var(--achtergrond); grid-template-columns: 1fr; padding: 0 var(--goot); overflow: visible; }
[data-theme="tijdschrift"] .pheld-media { order: 1; min-height: 0; }
[data-theme="tijdschrift"] .pheld-media > img, [data-theme="tijdschrift"] .pheld-media > .landkaart { position: relative; inset: auto; width: 100%; height: 46vh; min-height: 300px; margin-top: 24px; }
[data-theme="tijdschrift"] .pheld-paneel { order: 2; position: relative; z-index: 2; color: var(--tekst); max-width: 900px; margin: -80px 0 0; background: var(--achtergrond); padding: 30px 48px 20px 0; }
[data-theme="tijdschrift"] .pheld-paneel h1 { color: var(--tekst); font-size: clamp(42px, 6vw, 92px); }
/* Bij de kaart geen overlappend tekstvak: de bronregel en de knoppen van Leaflet moeten vrij blijven. */
[data-theme="tijdschrift"] .pheld:has(.landkaart) .pheld-paneel { margin-top: 20px; }
[data-theme="tijdschrift"] .pheld-paneel .eyebrow { color: var(--accent); }
[data-theme="tijdschrift"] .pheld-paneel .pheld-sub { color: var(--accent); font-style: italic; }
[data-theme="tijdschrift"] .pheld-paneel p.pheld-intro, [data-theme="tijdschrift"] .pheld-paneel .bronregel, [data-theme="tijdschrift"] .pheld-paneel .adresregel { color: var(--gedempt); }
[data-theme="tijdschrift"] .rheld { background: var(--achtergrond); color: var(--tekst); border-bottom: 1px solid var(--tekst); }
[data-theme="tijdschrift"] .rheld .zegel { color: var(--accent); }
[data-theme="tijdschrift"] .voet { border-top: 1px solid var(--tekst); }

/* -- 9. Collage: prikbord met polaroids, plakband, sticker en een handgetekende streep onder de koppen -- */
[data-theme="collage"] {
  --achtergrond: #F1E8D8;
  --vlak: #FFFDF7;
  --vlak-sterk: #2E2420;
  --tekst: #2A211D;
  --tekst-op-donker: #F7F1E5;
  --gedempt: #6F6359;
  --primair: #A95036;
  --primair-hover: #8A3F2A;
  --accent: #B48A4A;
  --secundair: #424735;
  --rand: #CDBB9B;
  --kopbalk-bg: #F1E8D8;
  --kopbalk-tekst: #2A211D;
  --font-display: 'Fraunces', Georgia, serif;
  --font-tekst: 'Inter', Arial, sans-serif;
  --nav-spatiering: 0.08em;
  --radius-kaart: 4px;
  --radius-knop: 999px;
}
[data-theme="collage"] body { background-image: radial-gradient(rgba(42, 33, 29, 0.13) 1px, transparent 1.5px); background-size: 22px 22px; }
[data-theme="collage"] .kopbalk { background: var(--kopbalk-bg); border-bottom: 2px dashed color-mix(in srgb, var(--tekst) 28%, transparent); }
[data-theme="collage"] h2 { background: url('assets/krabbel.svg') no-repeat left bottom / 100% 10px; padding-bottom: 14px; }
[data-theme="collage"] .held { background: transparent; display: grid; grid-template-columns: 6fr 6fr; gap: 32px; align-items: center; max-width: var(--inhoud); margin: 0 auto; padding: 40px var(--goot) 24px; min-height: 0; overflow: visible; }
[data-theme="collage"] .held-sluier, [data-theme="collage"] .held-watermerk { display: none; }
[data-theme="collage"] .held-paneel { grid-column: 1; grid-row: 1; color: var(--tekst); padding: 0; }
[data-theme="collage"] .held-paneel h1 { color: var(--tekst); font-size: clamp(40px, 5.4vw, 74px); line-height: 1.02; }
[data-theme="collage"] .held-paneel .eyebrow { color: var(--primair); }
[data-theme="collage"] .held-paneel .sier { display: none; }
[data-theme="collage"] .held-paneel .knop-spook, [data-theme="collage"] .pheld-paneel .knop-spook { color: var(--tekst); border-color: var(--tekst); }
.cl-stapel { grid-column: 2; grid-row: 1; position: relative; height: min(560px, 44vw); }
.cl-polaroid { position: absolute; margin: 0; background: #FFFDF7; padding: 12px 12px 42px; box-shadow: 0 18px 40px rgba(42, 33, 29, 0.22); transition: rotate 400ms cubic-bezier(0.22, 1, 0.36, 1), translate 400ms cubic-bezier(0.22, 1, 0.36, 1); width: 52%; }
.cl-polaroid img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
.cl-polaroid::before { content: ''; position: absolute; left: 50%; top: -12px; width: 96px; height: 26px; translate: -50% 0; rotate: -3deg; background: rgba(240, 220, 170, 0.78); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08); }
.cl-polaroid:nth-child(1) { left: 0; top: 4%; rotate: -6deg; z-index: 2; }
.cl-polaroid:nth-child(2) { right: 0; top: 0; rotate: 5deg; width: 46%; }
.cl-polaroid:nth-child(3) { left: 26%; bottom: 0; rotate: -2deg; width: 48%; z-index: 3; }
.cl-polaroid:hover { rotate: 0deg; translate: 0 -8px; z-index: 5; }
[data-theme="collage"] .held-foto { position: static; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
.cl-sticker { position: absolute; right: -6px; top: -18px; z-index: 4; width: 92px; height: 92px; border-radius: 50%; background: var(--primair); color: #F7F1E5; display: grid; place-items: center; rotate: 12deg; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2); border: 3px dashed rgba(247, 241, 229, 0.7); }
.cl-sticker svg { display: block; width: 52px; height: 52px; }
[data-theme="collage"] .shopkaart, [data-theme="collage"] .gr, [data-theme="collage"] .vervoerblok, [data-theme="collage"] .gidskaart, [data-theme="collage"] .contactkaart, [data-theme="collage"] .tegel { position: relative; border: 0; background: #FFFDF7; box-shadow: 0 10px 24px rgba(42, 33, 29, 0.14); rotate: -1deg; transition: rotate 300ms ease, translate 300ms ease, box-shadow 300ms ease; }
[data-theme="collage"] .shopkaart:nth-child(even), [data-theme="collage"] .gr:nth-child(even), [data-theme="collage"] .vervoerblok:nth-child(even), [data-theme="collage"] .gidskaart:nth-child(even), [data-theme="collage"] .tegel:nth-child(even) { rotate: 1.2deg; }
[data-theme="collage"] .shopkaart:hover, [data-theme="collage"] .gr:hover, [data-theme="collage"] .vervoerblok:hover, [data-theme="collage"] .gidskaart:hover, [data-theme="collage"] .tegel:hover { rotate: 0deg; translate: 0 -6px; transform: none; box-shadow: 0 18px 40px rgba(42, 33, 29, 0.2); }
[data-theme="collage"] .shopkaart::before, [data-theme="collage"] .gr::before, [data-theme="collage"] .vervoerblok::before, [data-theme="collage"] .contactkaart::before { content: ''; position: absolute; left: 50%; top: -11px; width: 84px; height: 22px; translate: -50% 0; rotate: -2deg; background: rgba(240, 220, 170, 0.78); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08); z-index: 2; }
[data-theme="collage"] .tegel, [data-theme="collage"] .tegel:nth-child(even) { overflow: visible; padding: 8px 8px 10px; rotate: 0deg; }
[data-theme="collage"] .tegel img { border-radius: 2px; }
[data-theme="collage"] .tegel-tekst { inset: auto 8px 10px 8px; border-radius: 0 0 2px 2px; }
[data-theme="collage"] .pheld { background: transparent; max-width: var(--inhoud); margin: 0 auto; padding: 36px var(--goot) 0; gap: 32px; align-items: center; overflow: visible; }
[data-theme="collage"] .pheld-paneel { color: var(--tekst); background: transparent; padding: 0; }
[data-theme="collage"] .pheld-paneel h1 { color: var(--tekst); }
[data-theme="collage"] .pheld-paneel .eyebrow, [data-theme="collage"] .pheld-paneel .pheld-sub { color: var(--primair); }
[data-theme="collage"] .pheld-paneel p.pheld-intro, [data-theme="collage"] .pheld-paneel .bronregel, [data-theme="collage"] .pheld-paneel .adresregel { color: var(--gedempt); }
[data-theme="collage"] .pheld-media { min-height: 380px; background: #FFFDF7; padding: 12px 12px 44px; box-shadow: 0 18px 40px rgba(42, 33, 29, 0.22); rotate: 2deg; transition: rotate 400ms cubic-bezier(0.22, 1, 0.36, 1); }
[data-theme="collage"] .pheld:hover .pheld-media { rotate: 0deg; }
[data-theme="collage"] .pheld-media:has(> .landkaart) { rotate: 0deg; }
[data-theme="collage"] .pheld-media > img, [data-theme="collage"] .pheld-media > .landkaart { inset: 12px 12px 44px; }
[data-theme="collage"] .voet { border-top: 2px dashed color-mix(in srgb, var(--tekst) 28%, transparent); }
[data-theme="collage"] .icoon { border-style: dashed; }

/* -- 11. Stil & Warm: veel lucht, kleine koppen, gedempte foto's, dunne lijnen, trage onthulling -- */
[data-theme="stil"] {
  --achtergrond: #EFE9DF;
  --vlak: #F7F3EC;
  --vlak-sterk: #3B302A;
  --tekst: #2B2521;
  --tekst-op-donker: #F7F1E5;
  --gedempt: #7A6F65;
  --primair: #9A5A45;
  --primair-hover: #7E4837;
  --accent: #A08C6A;
  --secundair: #6B6A5A;
  --rand: #E0D7CB;
  --kopbalk-bg: #EFE9DF;
  --kopbalk-tekst: #2B2521;
  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-tekst: 'Manrope', Arial, sans-serif;
  --nav-spatiering: 0.16em;
  --radius-kaart: 4px;
  --radius-knop: 4px;
  --sectieruimte: 110px;
}
[data-theme="stil"] h1, [data-theme="stil"] h2, [data-theme="stil"] h3 { font-weight: 600; letter-spacing: 0.005em; }
[data-theme="stil"] h2 { font-size: clamp(28px, 3vw, 38px); }
[data-theme="stil"] .kopbalk { padding-top: 18px; padding-bottom: 18px; border-bottom: 1px solid var(--rand); }
[data-theme="stil"] .kopbalk nav a { font-size: 11px; font-weight: 500; }
[data-theme="stil"] .woordmerk { color: var(--tekst); font-weight: 600; letter-spacing: 0.3em; font-size: 20px; }
[data-theme="stil"] .woordmerk:hover { color: var(--primair); }
[data-theme="stil"] .knop { font-weight: 500; letter-spacing: 0.06em; font-size: 13.5px; padding: 14px 26px; }
[data-theme="stil"] .held { background: var(--achtergrond); display: grid; grid-template-columns: 5fr 7fr; gap: 64px; align-items: center; max-width: var(--inhoud); margin: 0 auto; padding: 72px var(--goot) 48px; min-height: 0; overflow: visible; }
[data-theme="stil"] .held-sluier, [data-theme="stil"] .held-watermerk { display: none; }
[data-theme="stil"] .held-paneel { grid-column: 1; grid-row: 1; padding: 0; color: var(--tekst); }
[data-theme="stil"] .held-paneel h1 { color: var(--tekst); font-size: clamp(34px, 3.8vw, 54px); font-weight: 500; line-height: 1.15; max-width: 16ch; }
[data-theme="stil"] .held-paneel .eyebrow, [data-theme="stil"] .pheld-paneel .eyebrow { color: var(--gedempt); font-size: 11px; letter-spacing: 0.28em; font-weight: 500; }
[data-theme="stil"] .held-paneel .sier { display: none; }
[data-theme="stil"] .held-paneel .knopperij { margin-top: 36px; }
[data-theme="stil"] .held-paneel .knop-spook, [data-theme="stil"] .pheld-paneel .knop-spook { color: var(--tekst); border-color: var(--rand); }
[data-theme="stil"] .held-foto { grid-column: 2; grid-row: 1; position: relative; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 4px; }
[data-theme="stil"] :is(.held-foto, .intro-beeld img, .beeldstrip img, .tegel img, .hartband img, .karakterband img, .vraagband img, .partnerband img, .contact-beeld img, .pheld-media > img) { filter: saturate(0.8) sepia(0.12) contrast(0.98); }
[data-theme="stil"] .bandkop .waaier { display: none; }
[data-theme="stil"] .bandintro { max-width: 52ch; }
[data-theme="stil"] .shopkaart { border: 0; background: transparent; padding: 0 0 12px; }
[data-theme="stil"] .shopkaart:hover { box-shadow: none; transform: none; }
[data-theme="stil"] .shopbeeld { border: 1px solid var(--rand); }
[data-theme="stil"] .vervoerblok { border: 0; border-top: 1px solid var(--rand); border-radius: 0; text-align: left; padding: 24px 0 0; background: transparent; }
[data-theme="stil"] .vervoerblok .icoon { margin: 0 0 14px; }
[data-theme="stil"] .vervoerblok p { margin-left: 0; }
[data-theme="stil"] .gr, [data-theme="stil"] .gidskaart, [data-theme="stil"] .contactkaart, [data-theme="stil"] .tegel, [data-theme="stil"] .hartband, [data-theme="stil"] .karakterband, [data-theme="stil"] .partnerband, [data-theme="stil"] .intro-beeld { border-color: var(--rand); box-shadow: none; }
[data-theme="stil"] .partnerband { outline: 0; }
[data-theme="stil"] .icoon { border-color: var(--rand); color: var(--tekst); }
[data-theme="stil"] .fase .icoon { background: var(--vlak-sterk); color: var(--tekst-op-donker); }
@keyframes stil-op { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@supports (animation-timeline: view()) {
  [data-theme="stil"] :is(.bandkop, .bandintro, .intro-raster > div, .intro-beeld, .intro-aside, .shopkaart, .gr, .vervoerblok, .fase, .verhaalblok, .beeldstrip img, .tegel, .gidskaart, .regel, .contactkaart, .contact-beeld, .partnerband, .hartband, .karakterband, .vraagband, .quote-inhoud, .kolommen-2 > *, .stiplijst, .bronlijst, .waarschuwing, .knopperij-midden, .filters, .lijstkop) { animation-name: stil-op; animation-range: entry 0% entry 60%; }
}
[data-theme="stil"] .pheld { background: var(--achtergrond); max-width: var(--inhoud); margin: 0 auto; padding: 56px var(--goot) 0; gap: 56px; align-items: center; overflow: visible; }
[data-theme="stil"] .pheld-paneel { background: transparent; color: var(--tekst); padding: 0; }
[data-theme="stil"] .pheld-paneel h1 { color: var(--tekst); font-weight: 500; font-size: clamp(34px, 4vw, 56px); line-height: 1.12; }
[data-theme="stil"] .pheld-paneel .pheld-sub { color: var(--gedempt); font-size: 19px; }
[data-theme="stil"] .pheld-paneel p.pheld-intro, [data-theme="stil"] .pheld-paneel .bronregel, [data-theme="stil"] .pheld-paneel .adresregel { color: var(--gedempt); }
[data-theme="stil"] .pheld-media { min-height: 380px; }
[data-theme="stil"] .pheld-media > img, [data-theme="stil"] .pheld-media > .landkaart { border-radius: 4px; }
[data-theme="stil"] .rheld { background: var(--achtergrond); color: var(--tekst); }
[data-theme="stil"] .rheld .zegel { color: var(--accent); }
[data-theme="stil"] .voet { border-top: 1px solid var(--rand); }

/* -- Responsief, deel 2 -- */
@media (max-width: 1023px) {
  [data-theme="tijdschrift"] .intro-raster { grid-template-columns: 1fr; }
  [data-theme="tijdschrift"] .intro-beeld { position: static; }
}
@media (max-width: 767px) {
  [data-theme="kinetisch"] .held { display: block; }
  .kn-regel:nth-child(even) { padding-right: 0; }
  [data-theme="goud"] .held { padding: 32px var(--goot) 40px; }
  [data-theme="goud"] .held-foto { aspect-ratio: 4 / 3; outline-offset: 6px; }
  [data-theme="goud"] .pheld { grid-template-columns: 1fr; }
  [data-theme="goud"] .pheld-paneel { border-right: 0; border-bottom: 1px solid rgba(180, 138, 74, 0.3); padding: 36px var(--goot); }
  [data-theme="goud"] .pheld-media { min-height: 260px; padding: 16px; }
  [data-theme="goud"] .pheld-media > img, [data-theme="goud"] .pheld-media > .landkaart { inset: 16px; }
  [data-theme="horizontaal"] .held { min-height: 60vh; }
  [data-theme="tijdschrift"] .held-foto { aspect-ratio: 4 / 3; }
  [data-theme="tijdschrift"] .held-paneel { margin-top: -40px; padding-right: 0; }
  [data-theme="tijdschrift"] .pheld-paneel { margin-top: -40px; padding-right: 0; }
  [data-theme="tijdschrift"] .pheld-media > img, [data-theme="tijdschrift"] .pheld-media > .landkaart { height: 36vh; min-height: 240px; }
  [data-theme="collage"] .held { grid-template-columns: 1fr; gap: 24px; padding-top: 24px; }
  [data-theme="collage"] .held-paneel { grid-column: 1; grid-row: 1; }
  .cl-stapel { grid-column: 1; grid-row: 2; height: min(420px, 108vw); }
  [data-theme="collage"] .pheld { grid-template-columns: 1fr; }
  [data-theme="collage"] .pheld-media { min-height: 260px; order: 1; rotate: 1deg; }
  [data-theme="collage"] .pheld-paneel { order: 2; }
  [data-theme="stil"] .held { grid-template-columns: 1fr; gap: 28px; padding-top: 40px; }
  [data-theme="stil"] .held-foto { grid-column: 1; grid-row: 1; }
  [data-theme="stil"] .held-paneel { grid-column: 1; grid-row: 2; }
  [data-theme="stil"] .pheld { grid-template-columns: 1fr; gap: 28px; }
  [data-theme="stil"] .pheld-media { order: 1; min-height: 240px; }
  [data-theme="stil"] .pheld-paneel { order: 2; }
}
@media (prefers-reduced-motion: reduce) {
  .cl-polaroid, .cl-stapel, [data-theme="goud"] :is(.intro-beeld, .beeldstrip img, .tegel, .hartband, .karakterband, .vraagband, .partnerband, .contact-beeld), [data-theme="tijdschrift"] body::after, .hz-spoor, .hz-balk::after { animation: none; transition: none; }
}
/* goud: de shopknop paste op mobiel niet in de halve kaart (02-09 QA) */
[data-theme="goud"] .shop-knop { padding: 10px 14px; letter-spacing: 0.08em; font-size: 11.5px; max-width: 100%; white-space: normal; text-align: center; }

/* ==== 2026-thema's, deel 3 (02-09, nacht): organisch vervangt duotoon; foto's op subpagina's vullen hun vak ==== */

/* Het basisbeeld op subpagina's (.pheld-media > img) staat absoluut met inset 0 maar zonder maat: het toont dan zijn
   eigen pixelmaat, gecentreerd, en leunt op overflow: hidden van .pheld. De nieuwe thema's zetten dat vak open, dus
   hier krijgt het beeld een echte maat (object-fit: cover doet de rest). De zeven oorspronkelijke thema's blijven zoals ze waren. */
html:is([data-theme="nacht-cinema"], [data-theme="kinetisch"], [data-theme="bento"], [data-theme="zwitsers"], [data-theme="goud"], [data-theme="horizontaal"], [data-theme="collage"], [data-theme="organisch"], [data-theme="stil"], [data-theme="fotostroom"]) .pheld-media > img { width: 100%; height: 100%; }
[data-theme="goud"] .pheld-media > img { width: calc(100% - 48px); height: calc(100% - 48px); }
[data-theme="collage"] .pheld-media > img { width: calc(100% - 24px); height: calc(100% - 56px); }

/* -- 10. Organisch: zachte blobvormen die langzaam van vorm veranderen; de foto's blijven natuurlijk van kleur -- */
[data-theme="organisch"] {
  --achtergrond: #F4EBDD;
  --vlak: #FBF6EE;
  --vlak-sterk: #3F2A22;
  --tekst: #2B1F1A;
  --tekst-op-donker: #F7F1E5;
  --gedempt: #75655A;
  --primair: #B35A3A;
  --primair-hover: #944A30;
  --accent: #C7975B;
  --secundair: #6E7452;
  --rand: #E4D6C2;
  --kopbalk-bg: #F4EBDD;
  --kopbalk-tekst: #2B1F1A;
  --font-display: 'Fraunces', Georgia, serif;
  --font-tekst: 'Manrope', Arial, sans-serif;
  --nav-spatiering: 0.08em;
  --radius-kaart: 28px;
  --radius-knop: 999px;
}
@keyframes og-morf { 0%, 100% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; } 50% { border-radius: 35% 65% 65% 35% / 50% 60% 40% 50%; } }
@keyframes og-morf-2 { 0%, 100% { border-radius: 40% 60% 60% 40% / 55% 40% 60% 45%; } 50% { border-radius: 60% 40% 35% 65% / 40% 60% 40% 60%; } }
[data-theme="organisch"] .kopbalk nav a.actief, [data-theme="organisch"] .kopbalk nav a:hover, [data-theme="organisch"] .woordmerk:hover { color: var(--primair); }
[data-theme="organisch"] .kopbalk nav a.actief span { border-bottom-color: var(--primair); }
[data-theme="organisch"] .bandkop { position: relative; padding-left: 28px; }
[data-theme="organisch"] .bandkop .waaier { display: none; }
[data-theme="organisch"] .bandkop::before { content: ''; position: absolute; left: 0; top: 0.42em; width: 16px; height: 16px; background: var(--accent); border-radius: 60% 40% 55% 45% / 50% 60% 40% 50%; }
[data-theme="organisch"] .held { background: var(--achtergrond); display: grid; grid-template-columns: 6fr 6fr; gap: 40px; align-items: center; max-width: var(--inhoud); margin: 0 auto; padding: 48px var(--goot) 40px; min-height: 0; overflow: visible; }
[data-theme="organisch"] .held::before { content: ''; position: absolute; left: 42%; bottom: 0; width: 24%; aspect-ratio: 1; background: var(--primair); opacity: 0.14; border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; animation: og-morf 16s ease-in-out infinite; pointer-events: none; }
[data-theme="organisch"] .held-watermerk { display: none; }
[data-theme="organisch"] .held-paneel { grid-column: 1; grid-row: 1; position: relative; padding: 0; color: var(--tekst); }
[data-theme="organisch"] .held-paneel h1 { color: var(--tekst); font-size: clamp(42px, 5.6vw, 78px); line-height: 1; text-wrap: balance; }
[data-theme="organisch"] .held-paneel .eyebrow { color: var(--primair); }
[data-theme="organisch"] .held-paneel .sier { display: none; }
[data-theme="organisch"] .held-paneel .knopperij { margin-top: 30px; }
[data-theme="organisch"] .held-paneel .knop-spook, [data-theme="organisch"] .pheld-paneel .knop-spook { color: var(--tekst); border-color: var(--tekst); }
[data-theme="organisch"] .held-foto { grid-column: 2; grid-row: 1; position: relative; z-index: 1; width: 90%; height: auto; aspect-ratio: 1; object-fit: cover; margin: 0 auto; border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; animation: og-morf 14s ease-in-out infinite; transition: translate 400ms ease-out; }
[data-theme="organisch"] .held-sluier { grid-column: 2; grid-row: 1; position: relative; inset: auto; width: 58%; aspect-ratio: 1; justify-self: end; align-self: start; margin-top: -4%; background: var(--accent); opacity: 0.32; border-radius: 40% 60% 60% 40% / 55% 40% 60% 45%; animation: og-morf-2 18s ease-in-out infinite; pointer-events: none; }
[data-theme="organisch"] .intro-beeld { border: 0; border-radius: 45% 55% 40% 60% / 55% 45% 60% 40%; animation: og-morf-2 20s ease-in-out infinite; max-height: none; }
[data-theme="organisch"] .quotekaart { display: block; background: var(--vlak-sterk); border-radius: 40% 60% 60% 40% / 55% 40% 60% 45%; padding: 46px 36px; box-shadow: none; }
[data-theme="organisch"] .quotekaart .zegel { color: var(--accent); }
[data-theme="organisch"] .shopkaart, [data-theme="organisch"] .vervoerblok, [data-theme="organisch"] .gidskaart, [data-theme="organisch"] .contactkaart, [data-theme="organisch"] .tegel { border: 0; border-radius: 28px; box-shadow: 0 14px 34px rgba(43, 31, 26, 0.1); }
[data-theme="organisch"] .shopbeeld { border-radius: 22px; }
[data-theme="organisch"] .gr { border: 0; border-radius: 24px; box-shadow: 0 10px 28px rgba(43, 31, 26, 0.08); }
[data-theme="organisch"] .hartband, [data-theme="organisch"] .karakterband, [data-theme="organisch"] .partnerband, [data-theme="organisch"] .vraagband { border: 0; border-radius: 32px; outline: 0; }
[data-theme="organisch"] .icoon { border: 0; background: color-mix(in srgb, var(--accent) 24%, transparent); color: var(--primair); border-radius: 60% 40% 55% 45% / 50% 60% 40% 50%; }
[data-theme="organisch"] .fase .icoon { background: var(--vlak-sterk); color: var(--accent); }
[data-theme="organisch"] .beeldstrip img { border: 0; border-radius: 40% 60% 55% 45% / 50% 45% 55% 50%; aspect-ratio: 4 / 3; }
[data-theme="organisch"] .beeldstrip img:nth-child(2) { border-radius: 55% 45% 40% 60% / 45% 55% 45% 55%; }
[data-theme="organisch"] .filterknop { border-color: var(--rand); }
[data-theme="organisch"] .pheld { background: var(--achtergrond); max-width: var(--inhoud); margin: 0 auto; padding: 40px var(--goot) 0; gap: 40px; align-items: center; overflow: visible; }
[data-theme="organisch"] .pheld-paneel { background: transparent; color: var(--tekst); padding: 0; }
[data-theme="organisch"] .pheld-paneel h1 { color: var(--tekst); }
[data-theme="organisch"] .pheld-paneel .eyebrow, [data-theme="organisch"] .pheld-paneel .pheld-sub { color: var(--primair); }
[data-theme="organisch"] .pheld-paneel p.pheld-intro, [data-theme="organisch"] .pheld-paneel .bronregel, [data-theme="organisch"] .pheld-paneel .adresregel { color: var(--gedempt); }
[data-theme="organisch"] .pheld-media { min-height: 400px; border-radius: 55% 45% 40% 60% / 45% 55% 45% 55%; overflow: hidden; animation: og-morf-2 22s ease-in-out infinite; }
[data-theme="organisch"] .pheld-media:has(> .landkaart) { border-radius: 32px; animation: none; }
[data-theme="organisch"] .rheld { background: var(--achtergrond); color: var(--tekst); }
[data-theme="organisch"] .rheld .zegel { color: var(--primair); }
[data-theme="organisch"] .voet { background: var(--vlak-sterk); color: rgba(247, 241, 229, 0.9); border-radius: 40px 40px 0 0; }
[data-theme="organisch"] .voet a { color: #F7F1E5; }
[data-theme="organisch"] .voet a:hover { color: var(--accent); }

/* -- 12. Fotostroom (vervangt de 3D-draaigalerij, die op mobiel niet goed werkte): rijen echte foto's die eindeloos langsschuiven, warm donker -- */
[data-theme="fotostroom"] {
  --achtergrond: #1F1815;
  --vlak: #2A211D;
  --vlak-sterk: #3A2C26;
  --tekst: #F3EAD9;
  --tekst-op-donker: #F7F1E5;
  --gedempt: #B7A896;
  --primair: #A95036;
  --primair-hover: #C25E3E;
  --accent: #C9A25E;
  --secundair: #54272C;
  --rand: rgba(247, 241, 229, 0.14);
  --kopbalk-bg: #1F1815;
  --kopbalk-tekst: #F3EAD9;
  --font-display: 'Fraunces', Georgia, serif;
  --font-tekst: 'Inter', Arial, sans-serif;
  --nav-spatiering: 0.12em;
  --radius-kaart: 14px;
  --radius-knop: 999px;
}
[data-theme="fotostroom"] .kopbalk { border-bottom: 1px solid rgba(247, 241, 229, 0.08); }
[data-theme="fotostroom"] .held { background: var(--achtergrond); display: block; padding: 48px var(--goot) 8px; min-height: 0; overflow: visible; }
[data-theme="fotostroom"] .held-foto, [data-theme="fotostroom"] .held-sluier, [data-theme="fotostroom"] .held-watermerk { display: none; }
[data-theme="fotostroom"] .held-paneel { max-width: var(--inhoud); margin: 0 auto; padding: 0; }
[data-theme="fotostroom"] .held-paneel h1 { font-size: clamp(42px, 6vw, 88px); line-height: 0.98; max-width: 14ch; text-wrap: balance; }
[data-theme="fotostroom"] .held-paneel .knopperij { margin-top: 30px; }
.fs-stroom { overflow: hidden; padding: 34px 0 30px; background: var(--achtergrond); }
.fs-kantel { rotate: -2deg; scale: 1.06; display: grid; gap: 14px; }
.fs-rij { display: flex; width: max-content; animation: fs-links 70s linear infinite; }
.fs-rij:nth-child(2) { animation-name: fs-rechts; animation-duration: 85s; }
.fs-rij:nth-child(3) { animation-duration: 95s; }
.fs-set { display: flex; gap: 14px; padding-right: 14px; }
.fs-stroom:hover .fs-rij { animation-play-state: paused; }
@keyframes fs-links { to { transform: translateX(-50%); } }
@keyframes fs-rechts { from { transform: translateX(-50%); } to { transform: translateX(0); } }
.fs-kaart { flex: 0 0 auto; width: 260px; aspect-ratio: 3 / 2; margin: 0; border-radius: 12px; overflow: hidden; border: 1px solid rgba(247, 241, 229, 0.1); background: var(--vlak); }
.fs-kaart img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms cubic-bezier(0.22, 1, 0.36, 1); }
.fs-kaart:hover img { transform: scale(1.06); }
[data-theme="fotostroom"] .pheld { background: var(--achtergrond); }
[data-theme="fotostroom"] .pheld-paneel { background: transparent; padding-top: 56px; padding-bottom: 56px; }
[data-theme="fotostroom"] .pheld-media { min-height: 380px; }
[data-theme="fotostroom"] .pheld-media > img, [data-theme="fotostroom"] .pheld-media > .landkaart { inset: 24px var(--goot) 24px 0; border-radius: 18px; }
[data-theme="fotostroom"] .pheld-media > img { width: calc(100% - var(--goot)); height: calc(100% - 48px); }
[data-theme="fotostroom"] .rheld { background: var(--vlak); }
[data-theme="fotostroom"] .shopkaart { border-color: rgba(201, 162, 94, 0.3); }
[data-theme="fotostroom"] .voet { border-top: 1px solid rgba(247, 241, 229, 0.08); }
[data-theme="fotostroom"] .icoon { border-color: rgba(201, 162, 94, 0.6); }

@media (max-width: 767px) {
  .fs-kaart { width: 160px; }
  .fs-rij:nth-child(3) { display: none; }
  .fs-kantel { scale: 1.1; }
  [data-theme="fotostroom"] .pheld-media { min-height: 240px; }
  [data-theme="fotostroom"] .pheld-media > img, [data-theme="fotostroom"] .pheld-media > .landkaart { inset: 12px var(--goot); }
  [data-theme="fotostroom"] .pheld-media > img { width: calc(100% - 2 * var(--goot)); height: calc(100% - 24px); }
  [data-theme="goud"] .pheld-media > img { width: calc(100% - 32px); height: calc(100% - 32px); }
  [data-theme="organisch"] .held { grid-template-columns: 1fr; gap: 16px; padding-top: 24px; }
  [data-theme="organisch"] .held-foto { grid-column: 1; grid-row: 1; width: 80%; }
  [data-theme="organisch"] .held-sluier { grid-column: 1; grid-row: 1; width: 46%; }
  [data-theme="organisch"] .held-paneel { grid-column: 1; grid-row: 2; }
  [data-theme="organisch"] .pheld { grid-template-columns: 1fr; gap: 24px; }
  [data-theme="organisch"] .pheld-media { order: 1; min-height: 280px; }
  [data-theme="organisch"] .pheld-paneel { order: 2; }
}
@media (prefers-reduced-motion: reduce) {
  [data-theme="organisch"] :is(.held::before, .held-foto, .held-sluier, .intro-beeld, .pheld-media) { animation: none; }
  .fs-rij { animation: none; }
  .fs-kantel { rotate: 0deg; scale: 1; }
  .fs-stroom { overflow-x: auto; }
}

/* ==== Empire Gazette Experience (02-09, nacht): alleen zichtbaar in het thema empire-gazette ====
   Krantenkop met datum en editie, 3D-kroon in de hero, drie rubrieken die de teksten van andere
   pagina's ophalen (verhaal, ontdek Haarlem met kaart, archieven), vijf verstopte kronen met een
   verborgen pagina, en een optionele arcade met twee spelletjes. Niets verplicht, niets extern. */

.gz-masthead, .gz-rubriek, .gz-arcade-band, .gz-kroon3d, .gz-kroon, .gz-voet-kronen { display: none; }

/* -- Krantenkop -- */
[data-theme="empire-gazette"] .gz-masthead { display: block; background: var(--vlak); border-bottom: 3px double var(--primair); }
.gz-masthead-inhoud { max-width: var(--inhoud); margin: 0 auto; padding: 14px var(--goot) 12px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; }
.gz-datum, .gz-rechts { font-family: var(--font-tekst); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gedempt); }
.gz-rechts { display: flex; justify-content: flex-end; align-items: center; gap: 14px; }
.gz-krant { font-family: var(--font-display); font-size: clamp(26px, 3.4vw, 44px); letter-spacing: 0.08em; text-transform: uppercase; color: var(--primair); text-align: center; white-space: nowrap; line-height: 1; }
.gz-knop { font-family: var(--font-tekst); font-size: 11.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; background: none; border: 1px solid var(--rand); border-radius: 2px; padding: 6px 11px; color: var(--tekst); cursor: pointer; transition: border-color var(--beweging), color var(--beweging); }
.gz-knop:hover { border-color: var(--primair); color: var(--primair); }
.gz-teller { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.gz-teller svg { width: 18px; height: 14px; }

/* -- 3D-kroon (hero en verborgen pagina) -- */
[data-theme="empire-gazette"] .gz-kroon3d { display: block; perspective: 900px; width: 150px; height: 112px; margin: 0 0 18px; }
.gz-kroon-stapel { position: relative; width: 150px; height: 112px; transform-style: preserve-3d; will-change: transform; }
.gz-kroon-stapel svg { position: absolute; inset: 0; width: 100%; height: 100%; backface-visibility: hidden; }

/* -- Rubrieken op de homepage -- */
[data-theme="empire-gazette"] .gz-rubriek { display: block; }
.gz-kicker { display: flex; align-items: center; gap: 14px; font-size: 12px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--primair); margin-bottom: 12px; }
.gz-kicker::before { content: ''; flex: 0 0 40px; height: 1px; background: var(--primair); }
.gz-kicker::after { content: ''; flex: 1; height: 1px; background: var(--primair); }
.gz-kolommen { column-count: 3; column-gap: 40px; column-rule: 1px solid var(--rand); display: block; }
.gz-kolommen > * { break-inside: avoid; margin-bottom: 22px; }
.gz-kaart { height: 320px; border: 1px solid var(--rand); margin-top: 24px; }
.gz-rubriek .vervoer { margin-top: 4px; }
.gz-rubriek .tijdlijn { margin-top: 6px; }

/* -- Verstopte kronen -- */
[data-theme="empire-gazette"] .gz-kroon { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 22px; margin-left: 6px; vertical-align: middle; background: none; border: 0; padding: 0; cursor: pointer; color: var(--accent); opacity: 0.5; transition: opacity 200ms, transform 200ms; }
[data-theme="empire-gazette"] .gz-kroon:hover, [data-theme="empire-gazette"] .gz-kroon:focus-visible { opacity: 1; transform: scale(1.18); }
[data-theme="empire-gazette"] .gz-kroon.gevonden { opacity: 1; color: var(--primair); }
.gz-kroon svg { width: 20px; height: 15px; }
.gz-toast { position: fixed; left: 50%; bottom: 96px; z-index: 96; transform: translateX(-50%) translateY(20px); background: var(--primair); color: var(--tekst-op-donker); padding: 12px 20px; border-radius: 3px; font-family: var(--font-tekst); font-size: 14px; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25); opacity: 0; transition: opacity 250ms, transform 250ms; pointer-events: none; max-width: calc(100vw - 32px); text-align: center; }
.gz-toast.zichtbaar { opacity: 1; transform: translateX(-50%) translateY(0); }
[data-theme="empire-gazette"] .gz-voet-kronen { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; width: 100%; border-top: 1px solid color-mix(in srgb, var(--primair) 30%, transparent); padding-top: 12px; margin-top: 4px; font-size: 12.5px; }
.gz-voet-kronen .gz-knop { color: inherit; border-color: color-mix(in srgb, var(--primair) 45%, transparent); }
.gz-voet-kronen .gz-knop:hover { color: var(--primair); border-color: var(--primair); }

/* -- Verborgen pagina -- */
.gz-geheim { position: fixed; inset: 0; z-index: 120; background: var(--vlak-sterk); color: var(--tekst-op-donker); overflow: auto; display: none; }
.gz-geheim.open { display: block; }
.gz-geheim-inhoud { position: relative; z-index: 1; max-width: 900px; margin: 0 auto; padding: 56px var(--goot) 64px; text-align: center; }
.gz-geheim .gz-kroon3d { margin: 0 auto 10px; }
.gz-geheim h2 { color: var(--tekst-op-donker); font-size: clamp(34px, 5vw, 56px); margin: 14px 0 12px; }
.gz-geheim p { margin: 0 auto 24px; max-width: 56ch; color: color-mix(in srgb, var(--tekst-op-donker) 88%, transparent); }
.gz-geheim img { width: min(100%, 640px); height: auto; margin: 6px auto 28px; border: 1px solid var(--accent); outline: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); outline-offset: 6px; }
.gz-confetti { position: absolute; top: -20px; width: 10px; height: 14px; opacity: 0.9; animation: gz-val linear forwards; pointer-events: none; }
@keyframes gz-val { to { transform: translateY(110vh) rotate(540deg); opacity: 0.15; } }

/* -- Arcade -- */
[data-theme="empire-gazette"] .gz-arcade-band { display: block; }
.gz-kaartjes { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 8px; }
.gz-spelkaart { background: var(--vlak); border: 1px solid var(--primair); outline: 1px solid var(--primair); outline-offset: 4px; padding: 26px; }
.gz-spelkaart h3 { font-size: 24px; margin-bottom: 8px; }
.gz-spelkaart p { color: var(--gedempt); font-size: 15px; margin-bottom: 16px; }
.gz-arcade { position: fixed; inset: 0; z-index: 120; background: rgba(43, 32, 21, 0.86); display: none; align-items: center; justify-content: center; padding: 20px; }
.gz-arcade.open { display: flex; }
.gz-arcade-kader { background: var(--vlak); color: var(--tekst); border: 3px double var(--primair); width: min(560px, 100%); max-height: calc(100vh - 40px); overflow: auto; padding: 22px; }
.gz-arcade-kop { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; }
.gz-arcade-kop h3 { margin: 0; font-size: 26px; }
.gz-arcade-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.gz-arcade-tabs .gz-knop.actief { background: var(--primair); color: var(--tekst-op-donker); border-color: var(--primair); }
.gz-arcade-uitleg { font-size: 14px; color: var(--gedempt); margin-bottom: 12px; max-width: none; }
.gz-arcade canvas { width: 100%; height: auto; display: block; background: #FFF8EA; border: 1px solid var(--rand); touch-action: none; user-select: none; }
.gz-arcade-status { display: flex; justify-content: space-between; gap: 12px; font-family: var(--font-tekst); font-size: 12.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gedempt); margin: 10px 0 12px; }
.gz-arcade-acties { display: flex; gap: 10px; flex-wrap: wrap; }

@media (max-width: 1023px) {
  .gz-kolommen { column-count: 2; }
}
@media (max-width: 767px) {
  .gz-masthead-inhoud { grid-template-columns: 1fr; text-align: center; gap: 8px; padding: 12px var(--goot); }
  .gz-rechts { justify-content: center; }
  .gz-krant { white-space: normal; }
  .gz-kolommen { column-count: 1; }
  .gz-kaart { height: 240px; }
  .gz-kaartjes { grid-template-columns: 1fr; }
  .gz-arcade { padding: 10px; }
  .gz-arcade-kader { padding: 16px; max-height: calc(100vh - 20px); }
  .gz-toast { bottom: 140px; }
}
@media (prefers-reduced-motion: reduce) {
  .gz-confetti { display: none; }
  .gz-toast { transition: none; }
}

/* ==== Empire Arcade in alle thema's (03-09) ====
   De twee spelletjes uit de Gazette staan nu in elk thema: een arcaderegel bovenaan elke pagina
   (zoals de krantenkop van Gazette) en een knop in de voet. Het venster en het canvas volgen de tokens
   van het actieve thema; alleen empire-gazette houdt zijn krantenrand. */
.arcade-regel { background: var(--vlak); border-bottom: 1px solid var(--rand); }
.arcade-regel-inhoud { max-width: var(--inhoud); margin: 0 auto; padding: 10px var(--goot); display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.arcade-regel-tekst { margin: 0; font-family: var(--font-tekst); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gedempt); display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.arcade-regel-tekst strong { color: var(--primair); font-weight: 700; letter-spacing: 0.2em; }
.arcade-regel-tekst strong::after { content: ''; display: inline-block; width: 28px; height: 1px; background: var(--primair); margin-left: 12px; vertical-align: middle; }
.arcade-regel-knoppen { display: flex; gap: 8px; flex-wrap: wrap; }
.voet-arcade { background: none; border: 0; padding: 0; margin: 0; font: inherit; color: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.voet-arcade:hover, .voet-arcade:focus-visible { color: var(--primair); }
.gz-knop { border-radius: var(--radius-knop); }
.gz-arcade-kader { border: 1px solid var(--rand); border-radius: var(--radius-kaart); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35); }
.gz-arcade canvas { background: var(--vlak); border-radius: calc(var(--radius-kaart) - 2px); }
[data-theme="empire-gazette"] .gz-knop { border-radius: 2px; }
[data-theme="empire-gazette"] .gz-arcade-kader { border: 3px double var(--primair); border-radius: 0; box-shadow: none; }
[data-theme="empire-gazette"] .gz-arcade canvas { border-radius: 0; }
[data-theme="organisch"] .gz-arcade-kader { border-radius: 24px; }
[data-theme="zwitsers"] .arcade-regel, [data-theme="kinetisch"] .arcade-regel { border-bottom-color: var(--tekst); }
[data-theme="zwitsers"] .gz-arcade-kader, [data-theme="kinetisch"] .gz-arcade-kader { border-color: var(--tekst); border-radius: 0; }
[data-theme="zwitsers"] .arcade-regel-tekst, [data-theme="zwitsers"] .arcade-regel .gz-knop { font-family: var(--mono); }
[data-theme="goud"] .arcade-regel { border-bottom-color: color-mix(in srgb, var(--accent) 50%, transparent); }
[data-theme="goud"] .arcade-regel-tekst strong { color: var(--accent); }
[data-theme="goud"] .arcade-regel-tekst strong::after { background: var(--accent); }
[data-theme="goud"] .gz-arcade-kader { border-color: var(--accent); }
html:is([data-theme="nacht-cinema"], [data-theme="goud"], [data-theme="fotostroom"]) .arcade-regel { border-bottom-color: color-mix(in srgb, var(--rand) 40%, transparent); }
@media (max-width: 767px) {
  .arcade-regel-inhoud { justify-content: center; text-align: center; padding: 10px var(--goot); }
  .arcade-regel-tekst { justify-content: center; }
  .arcade-regel-tekst span { display: none; }
  .arcade-regel-tekst strong::after { display: none; }
  .arcade-regel-knoppen { justify-content: center; }
}