/* Afgeleid uit style.css door publieke_css.py: alleen de regels die op
   de publieke pagina's kunnen matchen; de app laadt de volle style.css.
   Daarna publiek-v2.css en fonts/phosphor-publiek.css. */
@font-face { font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(/fonts/hanken-ieVn2YZDLWuGJpnzaiwFXS9tYtpd59A.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(/fonts/hanken-ieVn2YZDLWuGJpnzaiwFXS9tYtpT59CjCQ.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Phosphor-Bold"; src: url(/fonts/Phosphor-Bold.woff2) format('woff2'); font-weight: normal; font-style: normal; font-display: swap; }
:root { --bg: #efedea; --panel: #f8f6f4; --card: #ffffff; --ink: #242220; --muted: #615d58; --faint: #9e9890; --line: #e4e0db; --tint: #eae6e1; --dark: #211f1d; --on-dark: #f7f4f0; --primary: #333230; --on-primary: #f5f4f2; --accent: #3e627c; --accent-soft: #e6eaee; --banner-bg: #eceae6; --banner-ink: #4c4945; --ok: #3d7a4a; --waarschuwing: #8a6d3b; --waarschuwing-soft: #f2eadb; --fout: #9a2f2f; --danger: #9b4b3f; --danger-soft: #f3e7e4; --pos: #4a7a5a; --pos-soft: #e7f0e9; --schaduw-kaart: 0 1px 2px rgba(40, 39, 37, .04), 0 1px 3px rgba(40, 39, 37, .03); --schaduw-zwevend: 0 2px 4px rgba(40, 39, 37, .04), 0 24px 48px rgba(40, 39, 37, .09); --rail: 1180px; --achtergrond: var(--bg); --kaart: var(--card); --rand: var(--line); --tekst: var(--ink); --tekst-licht: var(--muted); --accent-donker: #2f4c62; }
* { box-sizing: border-box; }
body { margin: 0; font-family: "Hanken Grotesk", "Segoe UI", system-ui, sans-serif; background: var(--bg); color: var(--ink); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
a { color: var(--accent); }
.verborgen { display: none !important; }
h1,
h2,
h3,
h4 { letter-spacing: -.01em; }
.knop { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid var(--line); background: var(--card); color: var(--ink); border-radius: 10px; padding: 10px 16px; font: inherit; font-size: 14px; font-weight: 600; line-height: 1.1; cursor: pointer; white-space: nowrap; text-decoration: none; transition: background .15s, border-color .15s, color .15s, filter .15s; }
.knop i { font-size: 1.15em; }
.knop:hover { background: var(--tint); border-color: var(--line); color: var(--ink); }
.knop.stil { border-color: transparent; background: none; color: var(--muted); }
.knop.stil:hover { background: var(--tint); color: var(--ink); }
.knop.groot { padding: 14px 24px; font-size: 15.5px; border-radius: 12px; }
.knop.klein { padding: 4px 8px; font-size: 13px; border-radius: 8px; }
.knop.breed { width: 100%; }
.knop:disabled { opacity: .55; cursor: default; }
.merk { display: inline-flex; align-items: center; text-decoration: none; color: var(--ink); }
.merk-logo { height: 48px; width: auto; display: block; flex-shrink: 0; }
.merk.klein .merk-logo { height: 42px; }
.site-header { border-bottom: 1px solid var(--line); background: rgba(251, 250, 249, .85); backdrop-filter: blur(8px); position: sticky; top: 0; z-index: 20; }
.site-header-inner { max-width: var(--rail); margin: 0 auto; padding: 16px 40px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.site-nav { display: flex; align-items: center; gap: 26px; white-space: nowrap; }
.site-nav a { font-size: 14.5px; color: var(--muted); text-decoration: none; font-weight: 500; }
.site-nav a:hover { color: var(--ink); }
.site-nav a.actief { color: var(--ink); font-weight: 600; }
.site-nav .nav-midden { display: contents; }
.site-nav .scheiding { width: 1px; height: 20px; background: var(--line); }
.site-nav a.inlog { color: var(--ink); font-weight: 600; }
.site-nav a.inlog:hover { color: var(--accent); }
.site-nav a.knop-nav { color: var(--on-primary); background: var(--primary); font-weight: 600; padding: 10px 18px; border-radius: 10px; }
.site-nav a.knop-nav:hover { filter: brightness(1.14); color: var(--on-primary); }
.site-nav .nav-dropdown { position: relative; display: inline-flex; }
.site-nav .nav-dropdown > a { display: inline-flex; align-items: center; gap: 4px; }
.site-nav .nav-dropdown > a i { font-size: 1.05em; position: relative; top: 2px; transition: transform .15s; }
.site-nav .nav-dropdown:hover > a,
.site-nav .nav-dropdown:focus-within > a { color: var(--ink); }
.site-nav .nav-dropdown:hover > a i,
.site-nav .nav-dropdown:focus-within > a i { transform: rotate(180deg); }
.site-nav .nav-sub { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); display: none; flex-direction: column; min-width: 232px; margin-top: 10px; padding: 8px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--schaduw-zwevend); }
.site-nav .nav-sub::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
.site-nav .nav-dropdown:hover .nav-sub,
.site-nav .nav-dropdown:focus-within .nav-sub { display: flex; }
.site-nav .nav-sub a { padding: 9px 12px; border-radius: 8px; white-space: nowrap; }
.site-nav .nav-sub a:hover { background: var(--tint); color: var(--ink); }
@media (max-width: 760px) {
.site-header-inner { padding: 14px 20px; }
.site-nav { gap: 14px; }
.site-nav .nav-midden { display: none; }
.site-nav a.knop-nav { display: none; }
.site-nav a.inlog { color: var(--on-primary); background: var(--primary); padding: 10px 18px; border-radius: 10px; }
.site-nav a.inlog:hover { color: var(--on-primary); filter: brightness(1.14); }
.site-header .merk-logo { height: 38px; }
}
#landing { display: block; }
.kicker { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); font-weight: 700; }
.sectie-tekst .kicker { margin-bottom: 10px; }
.hero { max-width: var(--rail); margin: 0 auto; padding: 80px 40px 74px; display: grid; grid-template-columns: 1.02fr 1fr; gap: 64px; align-items: center; }
.hero h1 { font-size: 53px; line-height: 1.07; font-weight: 700; letter-spacing: -.025em; margin: 0 0 22px; color: var(--ink); }
.hero h1 span { color: var(--faint); }
.hero-cta { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; flex-wrap: wrap; }
.hero-mini { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; font-size: 13.5px; color: var(--faint); font-weight: 500; }
.hero-mini span { display: inline-flex; align-items: center; gap: 7px; }
.hero-mini i { font-size: 16px; color: var(--accent); }
.preview { background: var(--card); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; box-shadow: 0 2px 4px rgba(40, 39, 37, .06), 0 24px 44px rgba(40, 39, 37, .16); }
.preview-balk { display: flex; align-items: center; gap: 9px; padding: 11px 14px; border-bottom: 1px solid var(--line); }
.preview-balk .naam { font-size: 12px; font-weight: 600; white-space: nowrap; }
.preview-body { padding: 12px; background: var(--bg); display: flex; flex-direction: column; gap: 8px; }
.preview-blok { background: var(--card); border: 1px solid var(--line); border-radius: 9px; padding: 9px 10px; }
.preview-blok .rij { display: flex; align-items: center; gap: 7px; }
.preview-pill { display: inline-flex; align-items: center; gap: 5px; flex: none; padding: 3px 7px; border-radius: 999px; background: var(--tint); border: 1px solid var(--line); font-size: 8px; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.preview-pill i { font-size: 11px; color: var(--accent); }
.preview-blok .titel { font-size: 11.5px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hero-foto { position: relative; overflow: hidden; background: var(--ink); }
.hero-foto .hero-bg,
.hero-foto .hero-overlay { position: absolute; inset: 0; }
.hero-foto .hero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 48%; display: block; }
.hero-foto .hero-overlay { background: linear-gradient(100deg, rgba(24, 22, 19, .90) 0%, rgba(24, 22, 19, .76) 42%, rgba(24, 22, 19, .48) 72%, rgba(24, 22, 19, .58) 100%); }
.site-header.op-foto { position: relative; z-index: 2; background: transparent; border-bottom: 0; backdrop-filter: none; }
.site-header.op-foto .site-nav a { color: rgba(255, 255, 255, .9); }
.site-header.op-foto .site-nav a:hover,
.site-header.op-foto .site-nav .nav-dropdown:hover > a,
.site-header.op-foto .site-nav .nav-dropdown:focus-within > a { color: #fff; }
.site-header.op-foto .site-nav .scheiding { background: rgba(255, 255, 255, .28); }
.site-header.op-foto .site-nav a.inlog { color: #fff; }
.site-header.op-foto .site-nav a.knop-nav { color: var(--ink); background: rgba(255, 255, 255, .96); }
.site-header.op-foto .site-nav a.knop-nav:hover { filter: none; background: #fff; color: var(--ink); }
.site-header.op-foto .site-nav .nav-sub a { color: var(--muted); }
.site-header.op-foto .site-nav .nav-sub a:hover { color: var(--ink); }
.site-header.op-foto .site-header-inner { max-width: 1440px; padding-left: 56px; padding-right: 56px; }
.hero-foto-inner { position: relative; z-index: 1; max-width: 1440px; margin: 0 auto; min-height: 580px; padding: 76px 56px 60px; display: grid; grid-template-columns: 1fr 400px; gap: 40px; align-items: start; }
.hero-foto h1 { font-size: 50px; line-height: 1.07; font-weight: 700; letter-spacing: -.028em; margin: 0 0 26px; color: #fff; max-width: 760px; text-shadow: 0 2px 30px rgba(18, 15, 12, .4); text-wrap: pretty; }
.hero-foto h1 span { color: rgba(255, 255, 255, .7); }
.hero-sub2 { font-size: 18px; line-height: 1.6; color: rgba(255, 255, 255, .86); margin: 0 0 34px; max-width: 580px; text-wrap: pretty; }
.hero-sub2 strong { color: #fff; font-weight: 700; }
.knop.hero-knop-wit { background: #fff; border-color: #fff; color: var(--ink); }
.knop.hero-knop-wit:hover { background: #fff; border-color: #fff; color: var(--ink); filter: brightness(.94); }
.knop.hero-knop-omlijnd { background: transparent; border-color: rgba(255, 255, 255, .55); color: #fff; }
.knop.hero-knop-omlijnd:hover { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .75); color: #fff; }
.hero-foto .hero-cta { margin-bottom: 0; }
.hero-foto .hero-mini { display: none; }
.hero-kaart { width: 100%; max-width: 384px; justify-self: center; }
.preview.groot { border: 0; border-radius: 18px; background: rgba(255, 255, 255, .97); box-shadow: 0 2px 6px rgba(20, 16, 12, .14), 0 30px 60px rgba(20, 16, 12, .36); }
.preview.groot .preview-balk { padding: 15px 18px; }
.preview.groot .preview-balk .naam { font-size: 14.5px; }
.preview.groot .preview-body { padding: 14px; }
.preview.groot .preview-blok { border-radius: 11px; padding: 11px 12px; }
.preview.groot .preview-pill { font-size: 8.5px; padding: 4px 9px; }
.preview.groot .preview-pill i { font-size: 12px; }
.preview.groot .preview-blok .titel { font-size: 12.5px; }
.preview-stippen { display: flex; align-items: center; gap: 9px; padding: 10px 4px 4px; }
.preview-stippen span { width: 7px; height: 7px; border-radius: 999px; background: #CFC9C2; opacity: .5; transform: scale(.82); animation: 2.6s infinite; }
.preview-stippen span:nth-child(1) { animation-name: stip-een; }
.preview-stippen span:nth-child(2) { animation-name: stip-twee; }
.preview-stippen span:nth-child(3) { animation-name: stip-drie; }
@keyframes stip-een { 0%, 18% { background: #CFC9C2; opacity: .5; transform: scale(.82); } 20%, 92% { background: var(--accent); opacity: 1; transform: scale(1); } 94%, 100% { background: #CFC9C2; opacity: .5; transform: scale(.82); } }
@keyframes stip-twee { 0%, 43% { background: #CFC9C2; opacity: .5; transform: scale(.82); } 45%, 92% { background: var(--accent); opacity: 1; transform: scale(1); } 94%, 100% { background: #CFC9C2; opacity: .5; transform: scale(.82); } }
@keyframes stip-drie { 0%, 68% { background: #CFC9C2; opacity: .5; transform: scale(.82); } 70%, 92% { background: var(--accent); opacity: 1; transform: scale(1); } 94%, 100% { background: #CFC9C2; opacity: .5; transform: scale(.82); } }
.hero-band { display: none; }
.usp-strook { background: var(--panel); border-bottom: 1px solid var(--line); }
.usp-strook-inner { max-width: var(--rail); margin: 0 auto; padding: 36px 40px; display: grid; grid-template-columns: repeat(3, 1fr); }
.usp { display: flex; align-items: flex-start; gap: 14px; padding: 0 40px; }
.usp:first-child { padding-left: 0; }
.usp:last-child { padding-right: 0; }
.usp + .usp { border-left: 1px solid var(--line); }
.usp i { font-size: 26px; color: var(--accent); line-height: 1; }
.usp-kop { font-size: 15.5px; font-weight: 600; letter-spacing: -.01em; margin-bottom: 5px; }
.usp-tekst { font-size: 13.5px; line-height: 1.5; color: var(--muted); }
@media (max-width: 1080px) {
.site-header.op-foto .site-header-inner { padding-left: 28px; padding-right: 28px; }
.hero-foto-inner { grid-template-columns: 1fr; gap: 0; min-height: 0; padding: 36px 28px 48px; }
.hero-foto h1 { font-size: 42px; }
.hero-kaart { display: none; }
.hero-band { display: block; position: relative; overflow: hidden; padding: 24px 20px 28px; }
.hero-band img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 52%; display: block; }
.hero-band-overlay { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(28, 26, 22, .62) 0%, rgba(28, 26, 22, .44) 62%, rgba(28, 26, 22, .40) 100%); }
.hero-band .preview { position: relative; width: 300px; max-width: 100%; margin: 0 auto; }
}
@media (max-width: 940px) {
.usp-strook-inner { grid-template-columns: 1fr; gap: 18px; padding: 28px; }
.usp { padding: 0; }
.usp + .usp { border-left: 0; border-top: 1px solid var(--line); padding-top: 18px; }
}
@media (max-width: 760px) {
.site-header.op-foto .site-header-inner { padding: 14px 20px; }
.site-header.op-foto .site-nav a.inlog { background: transparent; border: 0; padding: 0; color: #fff; }
.site-header.op-foto .site-nav a.inlog:hover { filter: none; color: #fff; }
}
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.site-nav .menu-schakel,
.site-nav .menu-knop,
.site-nav .mobiel-menu { display: none; }
@media (max-width: 760px) {
.site-nav .menu-knop { display: inline-flex; align-items: center; justify-content: center; font-size: 27px; line-height: 1; color: var(--ink); cursor: pointer; }
.site-header.op-foto .site-nav .menu-knop { color: #fff; }
.site-nav .menu-schakel:checked ~ .mobiel-menu { display: flex; }
.site-nav .mobiel-menu { position: absolute; top: calc(100% + 4px); left: 12px; right: 12px; flex-direction: column; padding: 8px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--schaduw-zwevend); z-index: 30; }
.site-nav .mobiel-menu a { padding: 9px 12px; border-radius: 8px; font-size: 14px; font-weight: 500; color: var(--ink); }
.site-nav .mobiel-menu a:hover { background: var(--tint); color: var(--ink); }
.site-nav .mobiel-menu .menu-cta { margin-top: 6px; background: var(--primary); color: var(--on-primary); text-align: center; font-weight: 600; border-radius: 10px; justify-content: center; }
.site-nav .mobiel-menu .menu-cta:hover { background: var(--primary); color: var(--on-primary); }
.site-header.op-foto .site-nav .mobiel-menu a { color: var(--ink); }
.site-header.op-foto .site-nav .mobiel-menu .menu-cta { color: var(--on-primary); }
.site-header:not(.op-foto) .site-nav:has(.menu-schakel) a.inlog { background: none; border: 0; padding: 0; color: var(--ink); }
.site-header:not(.op-foto) .site-nav:has(.menu-schakel) a.inlog:hover { filter: none; color: var(--accent); }
}
@media (max-width: 640px) {
.hero-foto { background: var(--bg); }
.hero-foto .hero-bg,
.hero-foto .hero-overlay { inset: auto; top: 0; left: 0; right: 0; height: 340px; }
.hero-foto .hero-bg img { object-position: center 30%; }
.hero-foto .hero-overlay { background: linear-gradient(180deg, rgba(28, 26, 22, .50) 0%, rgba(28, 26, 22, .16) 38%, rgba(28, 26, 22, .74) 100%); }
.hero-foto-inner { display: block; padding: 0; }
.hero-kop { min-height: 274px; display: flex; align-items: flex-end; padding: 0 20px 28px; }
.hero-foto h1 { font-size: 28px; line-height: 1.1; letter-spacing: -.025em; margin: 0; text-shadow: 0 1px 20px rgba(20, 16, 12, .4); }
.hero-foto h1 span { color: rgba(255, 255, 255, .74); }
.hero-onder { padding: 30px 20px; }
.hero-sub2 { font-size: 14.5px; color: var(--muted); margin-bottom: 28px; }
.hero-sub2 strong { color: var(--ink); }
.hero-foto .hero-cta { flex-direction: column; align-items: stretch; gap: 10px; margin-bottom: 26px; }
.hero-foto .hero-cta .knop { justify-content: center; }
.knop.hero-knop-wit { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.knop.hero-knop-omlijnd { background: var(--card); border-color: var(--line); color: var(--ink); }
.hero-foto .hero-mini { display: flex; justify-content: center; text-align: center; gap: 9px 16px; color: var(--muted); }
.usp-strook { display: none; }
}
.stappen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.stap { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 30px 28px; }
.stap h3 { font-size: 19px; font-weight: 600; margin: 0 0 10px; letter-spacing: -.01em; }
.stap p { font-size: 14.5px; line-height: 1.6; color: var(--muted); margin: 0; }
#landing .stap { padding: 0; overflow: hidden; }
.stap-visual { aspect-ratio: 16 / 10; border-bottom: 1px solid var(--line); position: relative; background: var(--card); padding: 16px; overflow: hidden; }
.stap-badge { position: absolute; top: 12px; right: 12px; z-index: 2; display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 10px; background: var(--ink); color: var(--on-primary); font-weight: 700; font-size: 15px; box-shadow: 0 6px 16px rgba(40, 39, 37, .28); }
.stap-body { padding: 24px 26px 28px; }
.stap-visual.foto { padding: 0; }
.stap-visual.foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.wie-kaart { background: var(--card); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.wie-kaart img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-bottom: 1px solid var(--line); }
.wie-body { padding: 26px 26px 28px; }
.wie-body h3 { font-size: 19px; font-weight: 600; margin: 0 0 10px; letter-spacing: -.01em; }
.wie-body p { font-size: 14.5px; line-height: 1.6; color: var(--muted); margin: 0; }
.sectie-tekst { max-width: 720px; margin: 0 auto; }
.sectie-tekst h2 { font-size: 28px; font-weight: 700; letter-spacing: -.02em; margin: 0 0 16px; }
.sectie-tekst h3 { font-size: 19px; font-weight: 600; margin: 30px 0 10px; }
.sectie-tekst p { font-size: 15.5px; line-height: 1.7; color: var(--muted); margin: 0 0 16px; }
.sectie-tekst a { color: var(--accent); font-weight: 600; text-decoration: none; }
.sectie-tekst a:hover { text-decoration: underline; }
@media (max-width: 1024px) {
.hero { gap: 36px; padding: 48px 28px 44px; }
.hero h1 { font-size: 38px; }
.stappen { gap: 16px; }
.stap-body { padding: 18px 20px 22px; }
.stap h3 { font-size: 17px; }
.stap p { font-size: 13px; }
.wie-body { padding: 18px 20px 22px; }
.wie-body h3 { font-size: 16px; }
.wie-body p { font-size: 12.5px; }
}
@media (max-width: 640px) {
.hero { grid-template-columns: 1fr; gap: 28px; padding: 28px 20px 34px; }
.hero h1 { font-size: 31px; }
.hero-cta { flex-direction: column; align-items: stretch; }
.hero-cta .knop { justify-content: center; }
.stappen { grid-template-columns: 1fr; }
.stap-visual { aspect-ratio: auto; min-height: 120px; }
.stap-visual.foto { aspect-ratio: 16 / 10; min-height: 0; }
.wie-kaart img { aspect-ratio: 16 / 9; }
}
#auth { display: grid; grid-template-columns: 1.05fr 1fr; min-height: 100vh; }
@media (max-width: 820px) {
#auth { grid-template-columns: 1fr; }
}
#start { display: block; padding: 0; }
.intro { color: var(--muted); margin: 0 0 26px; line-height: 1.6; }
.segment { display: flex; align-items: center; gap: 2px; background: var(--tint); border-radius: 10px; padding: 3px; }
@media (max-width: 860px) {
.segment { width: 100%; overflow-x: auto; }
}
#editor { display: block; }
.veld { display: block; font-size: 13px; color: var(--muted); font-weight: 600; }
.veld select,
.veld input[type=text],
.veld input[type=date],
.veld textarea { display: block; width: 100%; margin-top: 8px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); font-size: 14px; color: var(--ink); font-family: inherit; font-weight: 500; }
.veld select:focus,
.veld input:focus,
.veld textarea:focus { outline: none; border-color: var(--accent); }
.veld textarea { resize: vertical; line-height: 1.4; }
.blok[data-type="binnenkomst"] { --bt-ink: #6e6a63; --bt-tint: #edeae5; }
.blok[data-type="spreker"] { --bt-ink: #3e627c; --bt-tint: #e9eef3; }
.blok[data-type="muziek"] { --bt-ink: #6b5a8a; --bt-tint: #eeeaf3; }
.blok[data-type="live_muziek"] { --bt-ink: #4a7a5a; --bt-tint: #e7f0e9; }
.blok[data-type="video"] { --bt-ink: #8a6d3b; --bt-tint: #f2eadb; }
.blok[data-type="laatste_afscheid"] { --bt-ink: #7a5c55; --bt-tint: #f4eae7; }
.blok[data-type="op_maat"] { --bt-ink: #5f6b4a; --bt-tint: #eef0e6; }
#blokken { position: relative; display: flex; flex-direction: column; gap: 9px; }
#blokken:not(.leeg)::before { content: ""; position: absolute; left: 16px; top: 20px; bottom: 20px; width: 1.5px; background: var(--line); transform: translateX(-50%); z-index: 0; }
.blok { flex: 1; min-width: 0; background: var(--card); border: 1px solid var(--line); border-radius: 13px; transition: border-color .16s, box-shadow .16s; }
.blok:not(.ingeklapt) { border-color: #d9d4ce; border-radius: 15px; overflow: hidden; box-shadow: 0 2px 3px rgba(32, 29, 26, .03), 0 14px 30px rgba(32, 29, 26, .07); }
.calc { font-size: 12px; color: var(--faint); line-height: 1.45; padding: 0 2px; }
.calc:empty { display: none; }
.calc div:first-child { font-size: 13px; font-weight: 700; color: var(--ink); }
@media (max-width: 560px) {
.merk.klein .merk-logo { height: 34px; }
}
.pub-body { min-height: 100vh; display: flex; flex-direction: column; }
.blog-figuur { margin: 28px 0; }
.blog-figuur img { display: block; }
.blog-figuur figcaption { font-size: 13px; color: var(--faint); margin-top: 8px; line-height: 1.5; }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item:last-child { border-bottom: none; }
.faq-item summary { cursor: pointer; font-weight: 600; font-size: 17px; padding: 22px 0; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "\e3d4"; font-family: "Phosphor-Bold"; color: var(--accent); font-size: 18px; transition: transform .28s ease; flex: none; }
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item summary:hover { color: var(--accent); }
.faq-item p { margin: 0 0 24px; color: var(--muted); line-height: 1.65; max-width: 640px; }
.faq-item a { color: var(--accent); }
.faq-antwoord { margin: 0 0 24px; max-width: 640px; }
.faq-antwoord p { margin: 0 0 12px; }
.faq-antwoord ul,
.faq-antwoord ol { margin: 0 0 12px; padding-left: 22px; color: var(--muted); line-height: 1.65; }
.faq-antwoord > :last-child { margin-bottom: 0; }
.juridisch { width: 100%;  max-width: 760px; margin: 0 auto; padding: 60px 40px 80px; line-height: 1.65; }
.juridisch .terug { color: var(--muted); text-decoration: none; font-size: 14px; }
.juridisch .terug:hover { color: var(--accent); }
.juridisch h1 { font-weight: 700; font-size: 36px; letter-spacing: -.02em; margin: 22px 0 6px; }
.juridisch h2 { font-weight: 600; font-size: 19px; margin: 32px 0 8px; }
.juridisch p,
.juridisch li { color: var(--ink); }
.juridisch .laatst { color: var(--faint); font-size: 13px; margin-top: 0; }
.juridisch a { color: var(--accent); }
.juridisch table { border-collapse: collapse; width: 100%; margin: 8px 0; }
.juridisch td { border: 1px solid var(--line); padding: 8px 10px; vertical-align: top; }
@media (max-width: 860px) {
.juridisch { padding-left: 24px; padding-right: 24px; }
}
@media (max-width: 400px) {
.juridisch { padding-left: 16px; padding-right: 16px; }
.juridisch td { padding: 8px 7px; }
}
.contact-form { margin: 0; }
.contact-form .veld { display: block; margin-bottom: 18px; font-size: 13px; font-weight: 600; color: var(--muted); }
.contact-form .veld input,
.contact-form .veld textarea,
.contact-form .veld select { display: block; width: 100%; margin-top: 8px; padding: 12px 13px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); font-size: 14.5px; color: var(--ink); font-family: inherit; font-weight: 500; }
.contact-form .veld input:focus,
.contact-form .veld textarea:focus,
.contact-form .veld select:focus { outline: none; border-color: var(--accent); background: var(--card); }
.banner { display: flex; align-items: center; justify-content: center; gap: 9px; padding: 11px 20px; font-size: 13px; font-weight: 500; }
.banner i { font-size: 16px; }
.banner.ok { background: var(--banner-bg); color: var(--banner-ink); }
.banner.slot { justify-content: flex-start; align-items: flex-start; text-align: left; margin: 18px 32px 0; padding: 14px 16px; background: var(--waarschuwing-soft); color: var(--waarschuwing); border: 1px solid rgba(138, 109, 59, .22); border-radius: 14px; line-height: 1.5; }
.banner.slot i { margin-top: 1px; flex: none; }
.banner.slot .knop { margin-left: auto; flex: none; }
@media (max-width: 860px) {
.banner.slot { margin: 12px 16px 0; flex-wrap: wrap; }
.banner.slot .knop { margin-left: 0; }
}
body:has(.modal-achtergrond:not(.verborgen)),
body:has(.dialoog-achtergrond:not(.verborgen)),
body:has(.blok-sheet.open),
body:has(#editor.type-sheet-open) { overflow: hidden; }
@media (min-width: 861px) and (max-width: 1100px) {
body:has(#editor.sidebar-open:not(.verborgen)) { overflow: hidden; }
}
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes draai { to { transform: rotate(360deg); } }
.intro.klein { font-size: 13.5px; line-height: 1.55; color: var(--muted); margin: 0 0 18px; max-width: 600px; text-wrap: pretty; }
.pakket { display: flex; align-items: center; gap: 14px; border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; margin-bottom: 10px; }
.cookie-banner { position: fixed; left: 16px; right: 16px; bottom: 16px; margin: 0 auto; max-width: 640px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--schaduw-zwevend); padding: 18px 20px; z-index: 100; }
.cookie-banner-tekst { margin: 0 0 14px; font-size: 14px; line-height: 1.55; color: var(--ink); }
.cookie-banner-knoppen { display: flex; gap: 10px; }
.cookie-banner-knoppen .knop { flex: 1 1 140px; }
.link-knop { border: none; background: none; padding: 0; font: inherit; color: inherit; text-decoration: none; cursor: pointer; }
.link-knop:hover { text-decoration: underline; }
.preview-balk { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; z-index: 5; }
/* ======================================================================
   publiek-v2.css — v2-vormgeving voor de publieke marketingpagina's
   ====================================================================== */

.pv2 {
  --bg: #EFEDEA;
  --card: #FFFFFF;
  --panel: #F8F6F4;
  --ink: #242220;
  --muted: #615D58;
  --faint: #9E9890;
  --line: #E4E0DB;
  --tint: #EAE6E1;
  --dark: #211F1D;
  --onDark: #F7F4F0;
  --accent: #3E627C;
  --pos: #4A7A5A;

  background: var(--bg);
  color: var(--ink);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.pv2 .pv2-footer { margin-top: auto; }
.pv2 a { color: var(--accent); text-decoration: none; }
.pv2 a:hover { color: #2F4C60; }
.pv2 * { box-sizing: border-box; }

.pv2-container {
  max-width: 1180px;
  margin: 0 auto;
  padding-left: 40px;
  padding-right: 40px;
}

.pv2-kicker {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 11px; letter-spacing: .15em; text-transform: uppercase;
  color: var(--accent); font-weight: 700;
}

.pv2-section { max-width: 1180px; margin: 0 auto; padding: 76px 40px 0; }
.pv2-section:last-of-type { padding-bottom: 0; }
.pv2-section--slot { padding-bottom: 76px; }
.pv2-section--slot:last-of-type { padding-bottom: 76px; }
.pv2-section-head {
  display: flex; flex-direction: column; gap: 10px; align-items: center;
  text-align: center; margin: 0 auto 32px; max-width: 640px;
}
.pv2-section-head h2 { font-size: 34px; line-height: 1.12; font-weight: 700; letter-spacing: -.028em; margin: 0; }
.pv2-section-head p { font-size: 16px; line-height: 1.6; color: var(--muted); margin: 0; text-wrap: pretty; }

/* ---------- knoppen ---------- */
.pv2-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font: inherit; font-size: 15px; font-weight: 700;
  padding: 13px 21px; border-radius: 12px;
  text-decoration: none; border: 1px solid transparent; cursor: pointer;
  white-space: nowrap; transition: background .15s, border-color .15s, filter .15s;
}
.pv2-btn:hover { text-decoration: none; }
.pv2-btn i { font-size: .92em; }
.pv2-btn--onhero { color: var(--dark); background: var(--onDark); }
.pv2-btn--onhero:hover { background: #FFFFFF; color: var(--dark); }
.pv2-btn--ghost { color: var(--onDark); background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .18); }
.pv2-btn--ghost:hover { background: rgba(255, 255, 255, .2); color: var(--onDark); }
.pv2-btn--dark { color: var(--onDark); background: var(--dark); }
.pv2-btn--dark:hover { background: #312E2B; color: var(--onDark); }
.pv2-btn--outline { color: var(--ink); background: var(--card); border-color: var(--line); }
.pv2-btn--outline:hover { border-color: #DCD7D1; }
.pv2-btn--block { width: 100%; }
/* dubbele klasse: knopkleur wint van de algemene ".pv2 a"-linkkleur */
a.pv2-btn.pv2-btn--onhero, a.pv2-btn.pv2-btn--onhero:hover { color: var(--dark); }
a.pv2-btn.pv2-btn--ghost, a.pv2-btn.pv2-btn--ghost:hover { color: var(--onDark); }
a.pv2-btn.pv2-btn--dark, a.pv2-btn.pv2-btn--dark:hover { color: var(--onDark); }
a.pv2-btn.pv2-btn--outline, a.pv2-btn.pv2-btn--outline:hover { color: var(--ink); }

/* ======================================================================
   Foto-hero — gedeeld basisframe (dark bg, achtergrondfoto, gradient)
   ====================================================================== */
.pv2-hero { position: relative; overflow: hidden; background: var(--dark); }
.pv2-hero-bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.pv2-hero-overlay { position: absolute; inset: 0; }
.pv2-hero-overlay--diag {
  background: linear-gradient(100deg, rgba(26, 23, 21, .95) 0%, rgba(26, 23, 21, .87) 44%,
              rgba(26, 23, 21, .55) 78%, rgba(26, 23, 21, .7) 100%);
}
.pv2-hero-inner {
  position: relative; max-width: 1180px; margin: 0 auto;
  padding: 48px 40px 84px;
  display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center;
}
.pv2-hero-content, .pv2-hero-card { min-width: 0; }
.pv2-hero-content { display: flex; flex-direction: column; gap: 20px; }
.pv2-hero h1 {
  font-size: 46px; line-height: 1.08; font-weight: 700; letter-spacing: -.03em;
  margin: 0; color: var(--onDark); text-wrap: pretty;
}
.pv2-hero-sub {
  font-size: 17px; line-height: 1.6; color: rgba(247, 244, 240, .76);
  margin: 0; max-width: 480px; text-wrap: pretty;
}
.pv2-hero-cta { display: flex; align-items: center; gap: 12px; margin-top: 4px; flex-wrap: wrap; }
.pv2-hero-mini {
  display: flex; align-items: center; gap: 20px; font-size: 13.5px;
  color: rgba(247, 244, 240, .62); font-weight: 500; flex-wrap: wrap; margin-top: 6px;
}
.pv2-hero-mini span { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.pv2-hero-mini i { font-size: 16px; }

/* simpele centrale hero (FAQ, contact): geen kaart naast de tekst */
.pv2-hero--simple .pv2-hero-inner {
  grid-template-columns: 1fr; max-width: 760px; padding: 56px 40px 74px;
  text-align: center; justify-items: center;
}
.pv2-hero--simple .pv2-hero-cta,
.pv2-hero--simple .pv2-hero-mini { justify-content: center; }
.pv2-hero--simple .pv2-hero-sub { max-width: 560px; }

/* ---- witte kaart in de hero (prijzen / hoe-werkt-het) ---- */
.pv2-hero-card {
  background: var(--card); border-radius: 18px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, .12), 0 30px 70px rgba(0, 0, 0, .35);
}

/* prijzen: "wat u gratis doet" */
.pv2-gratis-kaart { padding: 22px; display: flex; flex-direction: column; gap: 12px; }
.pv2-gratis-label { font-size: 10.5px; letter-spacing: .15em; text-transform: uppercase; color: var(--faint); font-weight: 700; }
.pv2-gratis-stap { display: flex; align-items: center; gap: 12px; }
.pv2-gratis-icon {
  width: 36px; height: 36px; border-radius: 10px; background: var(--tint); color: var(--ink);
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 17px;
}
.pv2-gratis-tekst { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pv2-gratis-tekst b { font-size: 14.5px; font-weight: 700; letter-spacing: -.01em; }
.pv2-gratis-tekst span { font-size: 12.5px; color: var(--muted); text-wrap: pretty; }
.pv2-gratis-pill {
  font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--pos); background: #E7F0E9; padding: 5px 10px; border-radius: 7px; white-space: nowrap;
}
.pv2-gratis-divider { display: flex; align-items: center; gap: 10px; margin: 2px 0; }
.pv2-gratis-divider .lijn { flex: 1; height: 1px; background: var(--line); }
.pv2-gratis-divider span.tekst {
  display: inline-flex; align-items: center; gap: 7px; font-size: 11.5px; color: var(--faint);
  font-weight: 600; white-space: nowrap;
}
.pv2-gratis-slot {
  display: flex; align-items: center; gap: 12px; background: var(--panel);
  border: 1px solid var(--line); border-radius: 13px; padding: 14px;
}
.pv2-gratis-slot .pv2-gratis-icon { background: var(--dark); color: var(--onDark); }
.pv2-gratis-slot .prijs { font-size: 15px; font-weight: 700; letter-spacing: -.015em; white-space: nowrap; }

/* hoe-werkt-het: mini-draaiboek */
.pv2-draaiboek-balk {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 16px; border-bottom: 1px solid var(--line); background: var(--panel);
  border-radius: 18px 18px 0 0;
}
.pv2-draaiboek-balk .naam { font-size: 14px; font-weight: 700; letter-spacing: -.01em; }
.pv2-draaiboek-status {
  display: inline-flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--pos); background: #E7F0E9;
  padding: 4px 8px; border-radius: 6px;
}
.pv2-draaiboek-status span { width: 5px; height: 5px; border-radius: 50%; background: var(--pos); }
.pv2-draaiboek-body { padding: 12px; display: flex; flex-direction: column; gap: 7px; }
.pv2-draaiboek-blok {
  display: flex; align-items: center; gap: 10px; border: 1px solid var(--line);
  border-radius: 11px; padding: 10px 11px;
}
.pv2-draaiboek-nr {
  width: 22px; height: 22px; border-radius: 50%; background: var(--panel); border: 1px solid var(--line);
  color: var(--muted); font-size: 10.5px; font-weight: 700; display: inline-flex;
  align-items: center; justify-content: center; flex-shrink: 0;
}
.pv2-draaiboek-type {
  display: inline-flex; align-items: center; gap: 6px; font-size: 9.5px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; padding: 4px 8px; border-radius: 6px; white-space: nowrap;
}
.pv2-draaiboek-titel {
  flex: 1; min-width: 0; font-size: 13px; font-weight: 600; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pv2-draaiboek-meta { font-size: 11px; color: var(--faint); white-space: nowrap; }

/* bloktype-kleuren, gedeeld tussen hero-kaart en stap-visuals */
.pv2-type--binnenkomst { color: #6E6A63; background: #EDEAE5; }
.pv2-type--spreker { color: #3E627C; background: #E9EEF3; }
.pv2-type--muziek { color: #6B5A8A; background: #EEEAF3; }
.pv2-type--live { color: #4A7A5A; background: #E7F0E9; }
.pv2-type--video { color: #8A6D3B; background: #F2EADB; }
.pv2-type--afscheid { color: #7A5C55; background: #F4EAE7; }

@media (max-width: 1024px) {
  .pv2-hero-inner { grid-template-columns: minmax(0, 1fr); padding: 32px 32px 56px; gap: 32px; }
  .pv2-hero h1 { font-size: 38px; }
  .pv2-hero-card { max-width: 480px; }
  .pv2-hero-card--draaiboek { display: none; }
}
@media (max-width: 620px) {
  .pv2-hero-inner { padding: 28px 20px 44px; }
  .pv2-hero h1 { font-size: 30px; }
  .pv2-hero-sub { font-size: 15.5px; }
  .pv2-hero-cta { flex-direction: column; align-items: stretch; }
  .pv2-hero-cta .pv2-btn { width: 100%; }
  .pv2-hero--simple .pv2-hero-inner { padding: 28px 20px 44px; }
}

/* ======================================================================
   Kaarten (algemeen)
   ====================================================================== */
.pv2-card {
  background: var(--card); border: 1px solid var(--line); border-radius: 16px;
  box-shadow: 0 1px 2px rgba(32, 29, 26, .03);
  transition: border-color .16s, box-shadow .16s;
}
.pv2-card:hover {
  border-color: #DCD7D1;
  box-shadow: 0 2px 3px rgba(32, 29, 26, .03), 0 16px 34px rgba(32, 29, 26, .08);
}

/* ======================================================================
   CTA-band (foto met paneel) — gedeeld door alle vier de pagina's
   ====================================================================== */
.pv2-cta { position: relative; overflow: hidden; margin-top: 70px; }
.pv2-cta-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.pv2-cta-overlay { position: absolute; inset: 0; background: rgba(26, 23, 21, .5); }
.pv2-cta-inner { position: relative; max-width: 1180px; margin: 0 auto; padding: 64px 40px; }
.pv2-cta-panel {
  background: var(--card); border-radius: 20px; padding: 30px 34px;
  display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap;
  box-shadow: 0 20px 50px rgba(0, 0, 0, .2);
}
.pv2-cta-text { flex: 1 1 420px; min-width: 280px; display: flex; flex-direction: column; gap: 9px; }
.pv2-cta-text h2 { font-size: 25px; font-weight: 700; letter-spacing: -.025em; line-height: 1.15; margin: 0; }
.pv2-cta-text p { font-size: 15px; line-height: 1.6; color: var(--muted); margin: 0; text-wrap: pretty; }
@media (max-width: 620px) {
  .pv2-cta-inner { padding: 40px 20px; }
  .pv2-cta-panel { padding: 24px; }
  .pv2-cta-panel .pv2-btn { width: 100%; }
}

/* ======================================================================
   Footer — gedeeld door alle vier de pagina's
   ====================================================================== */
.pv2-footer { background: var(--panel); border-top: 1px solid var(--line); }
.pv2-footer-grid {
  max-width: 1180px; margin: 0 auto; padding: 50px 40px 30px;
  display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 36px;
}
.pv2-footer-brand { display: flex; flex-direction: column; gap: 12px; max-width: 300px; }
.pv2-footer-brand img { height: 44px; width: auto; display: block; }
.pv2-footer-brand p { font-size: 13.5px; line-height: 1.6; color: var(--muted); margin: 0; text-wrap: pretty; }
.pv2-footer-contact { display: flex; flex-direction: column; gap: 8px; font-size: 13px; }
.pv2-footer-contact a { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); }
.pv2-footer-contact a:hover { color: var(--ink); }
.pv2-footer-contact i { font-size: 15px; color: var(--accent); }
.pv2-footer-col { display: flex; flex-direction: column; gap: 11px; }
/* #6f6a63 i.p.v. --faint: haalt contrast 4,5:1 op de footerachtergrond (WCAG AA) */
.pv2-footer-col-title { font-size: 10.5px; letter-spacing: .15em; text-transform: uppercase; color: #6f6a63; font-weight: 700; }
.pv2-footer-col a, .pv2-footer-col button {
  font-size: 13.5px; color: var(--muted); text-decoration: none; font-weight: 500;
  background: none; border: 0; padding: 0; text-align: left; font-family: inherit; cursor: pointer;
}
.pv2-footer-col a:hover, .pv2-footer-col button:hover { color: var(--ink); }
.pv2-footer-bottom { max-width: 1180px; margin: 0 auto; padding: 0 40px 34px; }
.pv2-footer-bottom-inner {
  border-top: 1px solid var(--line); padding-top: 18px; display: flex; align-items: center;
  justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 12.5px; color: #6f6a63;
}
@media (max-width: 900px) {
  .pv2-footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
}
@media (max-width: 560px) {
  .pv2-footer-grid { grid-template-columns: 1fr; gap: 28px; padding: 44px 20px 28px; }
  .pv2-footer-bottom { padding: 0 20px 28px; }
}

@media (max-width: 620px) {
  .pv2-section { padding: 52px 20px 0; }
  .pv2-section--slot, .pv2-section--slot:last-of-type { padding-bottom: 52px; }
  .pv2-section-head h2 { font-size: 27px; }
}

/* ======================================================================
   PRIJZEN — pakketten
   ====================================================================== */
.pv2-price-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: start; }
.pv2-price-card {
  position: relative; background: var(--card); border: 1.5px solid var(--line); border-radius: 18px;
  padding: 26px; display: flex; flex-direction: column; gap: 16px;
  box-shadow: 0 1px 2px rgba(32, 29, 26, .03); transition: border-color .16s, box-shadow .16s;
}
.pv2-price-card:hover { border-color: #DCD7D1; box-shadow: 0 2px 3px rgba(32, 29, 26, .03), 0 16px 34px rgba(32, 29, 26, .08); }
.pv2-price-card--top {
  border-color: var(--dark);
  box-shadow: 0 4px 8px rgba(32, 29, 26, .05), 0 22px 44px rgba(32, 29, 26, .1);
}
.pv2-price-badge {
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 7px; font-size: 10.5px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--onDark); background: var(--dark);
  padding: 6px 13px; border-radius: 999px; white-space: nowrap;
}
.pv2-price-head { display: flex; align-items: center; gap: 11px; flex-wrap: wrap; }
.pv2-price-icon {
  width: 38px; height: 38px; border-radius: 11px; background: var(--tint); color: var(--ink);
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 18px;
}
.pv2-price-head h3 { font-size: 16.5px; font-weight: 700; letter-spacing: -.015em; margin: 0; }
.pv2-price-saving {
  margin-left: auto; font-size: 11.5px; font-weight: 700; color: var(--pos); background: #E7F0E9;
  padding: 5px 10px; border-radius: 7px; white-space: nowrap;
}
.pv2-price-amount { display: flex; flex-direction: column; gap: 5px; }
.pv2-price-amount .bedrag { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; }
.pv2-price-amount .getal { font-size: 40px; font-weight: 700; letter-spacing: -.035em; line-height: 1; }
.pv2-price-amount .per { font-size: 14px; color: var(--faint); font-weight: 500; }
.pv2-price-amount .sub { font-size: 13.5px; color: var(--muted); font-weight: 500; }
.pv2-price-hr { height: 1px; background: var(--line); border: 0; margin: 0; }
.pv2-price-features { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.pv2-price-features li {
  display: flex; align-items: flex-start; gap: 10px; font-size: 14px; line-height: 1.5; color: var(--muted);
}
.pv2-price-features i { font-size: 12px; color: var(--pos); margin-top: 4px; flex-shrink: 0; }
.pv2-price-cta {
  margin-top: auto; display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-size: 14.5px; font-weight: 700; text-decoration: none; padding: 14px; border-radius: 12px;
  color: var(--onDark); background: var(--dark); border: 1px solid var(--dark);
}
.pv2-price-cta:hover { background: #312E2B; color: var(--onDark); }
.pv2-price-cta--outline { color: var(--ink); background: var(--card); border-color: var(--line); }
.pv2-price-cta--outline:hover { border-color: #DCD7D1; color: var(--ink); background: var(--card); }
/* dubbele klasse: knopkleur wint van de algemene ".pv2 a"-linkkleur */
a.pv2-price-cta, a.pv2-price-cta:hover { color: var(--onDark); }
a.pv2-price-cta.pv2-price-cta--outline, a.pv2-price-cta.pv2-price-cta--outline:hover { color: var(--ink); }
.pv2-price-meta {
  display: flex; align-items: center; justify-content: center; gap: 26px; flex-wrap: wrap;
  margin-top: 26px; font-size: 13.5px; color: var(--muted); font-weight: 500;
}
.pv2-price-meta span { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.pv2-price-meta i { font-size: 16px; color: var(--faint); }

@media (max-width: 900px) {
  .pv2-price-grid { grid-template-columns: 1fr; max-width: 440px; margin: 0 auto; }
}

/* ---------- inbegrepen ---------- */
.pv2-included {
  width: 100%; /* body.pv2 is een flex-kolom, zie .pv2-overlap */
  max-width: 1180px; margin: 0 auto; padding: 76px 40px 0;
  display: grid; grid-template-columns: .85fr 1.15fr; gap: 48px; align-items: start;
}
.pv2-included-intro { position: sticky; top: 40px; display: flex; flex-direction: column; gap: 14px; }
.pv2-included-intro h2 { font-size: 30px; line-height: 1.12; font-weight: 700; letter-spacing: -.028em; margin: 0; text-wrap: pretty; }
.pv2-included-intro p { font-size: 15.5px; line-height: 1.6; color: var(--muted); margin: 0; text-wrap: pretty; }
.pv2-included-intro .pv2-btn { align-self: flex-start; margin-top: 4px; }
.pv2-included-list { display: flex; flex-direction: column; gap: 12px; }
.pv2-included-item { padding: 20px; display: flex; gap: 15px; }
.pv2-included-icon {
  width: 40px; height: 40px; border-radius: 11px; background: var(--tint); color: var(--ink);
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 19px;
}
.pv2-included-item .tekst { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.pv2-included-item b { font-size: 16px; font-weight: 700; letter-spacing: -.015em; }
.pv2-included-item p { font-size: 14px; line-height: 1.55; color: var(--muted); margin: 0; text-wrap: pretty; }
@media (max-width: 900px) {
  .pv2-included { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .pv2-included-intro { position: static; }
}

/* ---------- mini-faq (prijzen) ---------- */
.pv2-faq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; max-width: 900px; margin: 0 auto; }
.pv2-faq-card { padding: 18px 20px; display: flex; gap: 12px; }
.pv2-faq-card i { font-size: 18px; color: var(--accent); flex-shrink: 0; margin-top: 2px; }
.pv2-faq-card .tekst { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.pv2-faq-card b { font-size: 15px; font-weight: 700; letter-spacing: -.015em; }
.pv2-faq-card p { font-size: 13.5px; line-height: 1.55; color: var(--muted); margin: 0; text-wrap: pretty; }
.pv2-faq-more { display: flex; justify-content: center; margin-top: 22px; }
.pv2-faq-more a { display: inline-flex; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 600; color: var(--ink); }
.pv2-faq-more a:hover { color: var(--accent); }
@media (max-width: 700px) {
  .pv2-faq-grid { grid-template-columns: 1fr; }
}

/* ======================================================================
   HOE WERKT HET — stappen
   ====================================================================== */
.pv2-steps { max-width: 1180px; margin: 0 auto; padding: 66px 40px 20px; display: grid; grid-template-columns: 210px 1fr; gap: 48px; align-items: start; }
.pv2-steps-nav { position: sticky; top: 24px; display: flex; flex-direction: column; gap: 4px; }
.pv2-steps-nav-title { font-size: 11px; letter-spacing: .15em; text-transform: uppercase; color: var(--faint); font-weight: 700; padding: 0 12px 10px; }
.pv2-step-link {
  display: flex; align-items: center; gap: 11px; text-decoration: none; color: var(--muted);
  font-size: 13.5px; font-weight: 600; padding: 9px 12px; border-radius: 10px;
  transition: background .15s, color .15s;
}
.pv2-step-link:hover { background: var(--tint); color: var(--ink); }
a.pv2-step-link { color: var(--muted); }
a.pv2-step-link:hover { color: var(--ink); }
.pv2-step-nr {
  width: 22px; height: 22px; border-radius: 50%; background: var(--tint); color: var(--ink);
  font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.pv2-steps-nav .pv2-btn { margin-top: 14px; }

.pv2-steps-list { display: flex; flex-direction: column; gap: 16px; }
.pv2-step-card {
  scroll-margin-top: 24px;
  padding: 26px 28px; display: flex; gap: 22px; align-items: flex-start; flex-wrap: wrap;
}
.pv2-step-text { flex: 1 1 380px; min-width: 280px; display: flex; flex-direction: column; gap: 11px; }
.pv2-step-head { display: flex; align-items: center; gap: 11px; }
.pv2-step-badge {
  width: 30px; height: 30px; border-radius: 50%; background: var(--dark); color: var(--onDark);
  font-size: 13px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.pv2-step-text h2 { font-size: 24px; line-height: 1.15; font-weight: 700; letter-spacing: -.025em; margin: 0; text-wrap: pretty; }
.pv2-step-text > p { font-size: 15px; line-height: 1.62; color: var(--muted); margin: 0; text-wrap: pretty; }
.pv2-step-points { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.pv2-step-points li { display: flex; align-items: flex-start; gap: 9px; font-size: 14px; line-height: 1.55; color: var(--muted); }
.pv2-step-points i { font-size: 13px; color: var(--pos); margin-top: 4px; flex-shrink: 0; }
.pv2-step-points strong { color: var(--ink); font-weight: 700; }

.pv2-step-visual {
  flex: 0 1 300px; min-width: 250px; background: var(--panel); border: 1px solid var(--line);
  border-radius: 14px; padding: 16px; display: flex; flex-direction: column; gap: 10px;
  align-self: stretch; justify-content: center;
}
.pv2-step-visual-label { font-size: 10.5px; letter-spacing: .13em; text-transform: uppercase; color: var(--faint); font-weight: 700; }
.pv2-types { display: flex; flex-wrap: wrap; gap: 6px; }
.pv2-types span {
  display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600;
  padding: 7px 11px; border-radius: 999px; white-space: nowrap;
}
.pv2-fotos-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; }
.pv2-foto-vak {
  position: relative; aspect-ratio: 1 / 1; border-radius: 7px; overflow: hidden; border: 1px solid var(--line);
  background-image: repeating-linear-gradient(135deg, rgba(32, 29, 26, .055) 0 6px, transparent 6px 12px);
}
.pv2-regels { display: flex; flex-direction: column; gap: 7px; }
.pv2-regel {
  display: flex; align-items: center; gap: 10px; background: var(--card); border: 1px solid var(--line);
  border-radius: 10px; padding: 11px 12px;
}
.pv2-regel i { font-size: 16px; color: var(--accent); flex-shrink: 0; }
.pv2-regel .tekst { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pv2-regel b { font-size: 12.5px; font-weight: 700; color: var(--ink); }
.pv2-regel span.sub { font-size: 11.5px; color: var(--faint); }

@media (max-width: 1024px) {
  .pv2-steps { grid-template-columns: 170px 1fr; gap: 26px; padding: 54px 28px 20px; }
  .pv2-steps-nav-title { padding: 0 10px 8px; }
  .pv2-step-link { font-size: 12.5px; padding: 8px 10px; gap: 9px; }
  .pv2-step-card { padding: 22px; gap: 18px; }
}
@media (max-width: 760px) {
  .pv2-steps { display: block; padding: 0; }
  .pv2-steps-nav { display: none; }
  .pv2-steps-list { padding: 20px 16px 0; gap: 12px; }
  .pv2-step-card { padding: 20px 18px; flex-direction: column; gap: 12px; }
  /* flex-basis 380px zou in kolomrichting als vaste hóógte werken */
  .pv2-step-text { flex: 0 1 auto; min-width: 0; }
  /* de illustratiekolom (rechts op desktop) vervalt op mobiel: alleen de steptekst */
  .pv2-step-visual { display: none; }
}

/* ---------- daarna ---------- */
.pv2-daarna-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.pv2-daarna-card { padding: 20px; display: flex; flex-direction: column; gap: 10px; }
.pv2-daarna-icon {
  width: 38px; height: 38px; border-radius: 11px; background: var(--tint); color: var(--ink);
  display: inline-flex; align-items: center; justify-content: center; font-size: 19px;
}
.pv2-daarna-card b { font-size: 15.5px; font-weight: 700; letter-spacing: -.015em; }
.pv2-daarna-card p { font-size: 13.5px; line-height: 1.55; color: var(--muted); margin: 0; text-wrap: pretty; }
@media (max-width: 900px) {
  .pv2-daarna-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .pv2-daarna-grid { grid-template-columns: 1fr; }
}

/* ======================================================================
   VEELGESTELDE VRAGEN
   ====================================================================== */
.pv2-faq-rubriek { font-size: 21px; font-weight: 700; letter-spacing: -.015em; margin: 0 0 14px; }
.pv2-section + .pv2-section .pv2-faq-rubriek { margin-top: 6px; }
.pv2-faq-kaart { padding: 6px 24px; margin-bottom: 40px; }
#faq .pv2-faq-kaart { max-width: 900px; margin-left: auto; margin-right: auto; }
.pv2-faq-item { border-bottom: 1px solid var(--line); }
.pv2-faq-item:last-child { border-bottom: 0; }
.pv2-faq-item summary {
  padding: 18px 28px 18px 0; position: relative; cursor: pointer; list-style: none;
  font-size: 15.5px; font-weight: 600; letter-spacing: -.005em; color: var(--ink);
}
.pv2-faq-item summary::-webkit-details-marker { display: none; }
.pv2-faq-item summary::after {
  content: "+"; position: absolute; right: 2px; top: 16px; font-size: 20px; font-weight: 400;
  color: var(--faint); transition: transform .15s;
}
.pv2-faq-item[open] summary::after { transform: rotate(45deg); }
.pv2-faq-item summary:hover { color: var(--accent); }
.pv2-faq-item p { margin: 0 0 22px; color: var(--muted); line-height: 1.65; max-width: 680px; }
.pv2-faq-item ol { margin: 0 0 22px; padding-left: 22px; color: var(--muted); line-height: 1.65; max-width: 680px; }
.pv2-faq-item ol li { margin-bottom: 6px; }
.pv2-faq-item a { color: var(--accent); }

/* ======================================================================
   CONTACT
   ====================================================================== */
.pv2-contact-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 20px; align-items: start; }
.pv2-contact-redenen { display: flex; flex-direction: column; gap: 12px; }
.pv2-contact-reden { padding: 18px 20px; display: flex; gap: 14px; align-items: flex-start; }
.pv2-contact-reden-icon {
  width: 38px; height: 38px; border-radius: 11px; background: var(--tint); color: var(--ink);
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 18px;
}
.pv2-contact-reden .tekst { flex: 1; min-width: 0; }
.pv2-contact-reden b { font-size: 15px; font-weight: 700; letter-spacing: -.01em; display: block; margin-bottom: 3px; }
.pv2-contact-reden p { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--muted); }
.pv2-contact-kanalen { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.pv2-contact-kanaal {
  display: flex; align-items: center; gap: 13px; padding: 14px 16px;
}
.pv2-contact-kanaal i { font-size: 19px; color: var(--accent); flex-shrink: 0; }
.pv2-contact-kanaal .tekst { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
.pv2-contact-kanaal .onder { overflow-wrap: anywhere; }
.pv2-contact-kanaal .boven { font-size: 12px; color: var(--faint); font-weight: 500; }
.pv2-contact-kanaal .onder { font-size: 14px; font-weight: 700; color: var(--ink); }

.pv2-contact-form-kaart { padding: 26px 28px 28px; }
.pv2-contact-form-kaart h2 { font-size: 22px; font-weight: 700; letter-spacing: -.02em; margin: 0 0 6px; }
.pv2-contact-form-kaart .sub { font-size: 14px; color: var(--muted); margin: 0 0 22px; }
.pv2-veld { display: block; margin-bottom: 16px; font-size: 13px; font-weight: 600; color: var(--muted); }
.pv2-veld .opt { font-weight: 500; color: var(--faint); }
.pv2-veld input, .pv2-veld textarea, .pv2-veld select {
  display: block; width: 100%; margin-top: 7px; padding: 12px 13px; font: inherit; font-size: 14.5px;
  color: var(--ink); background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
  transition: border-color .15s, background .15s;
}
.pv2-veld input:focus, .pv2-veld textarea:focus, .pv2-veld select:focus {
  outline: none; border-color: var(--accent); background: var(--card);
}
.pv2-veld-rij { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.pv2-contact-form .pv2-btn { width: 100%; margin-top: 4px; }
.pv2-form-melding { margin-top: 12px; font-size: 13.5px; color: var(--muted); min-height: 1em; }
.pv2-faq-tip {
  display: flex; align-items: center; gap: 9px; margin-top: 18px; font-size: 13px; color: var(--muted);
}
.pv2-faq-tip i { font-size: 15px; color: var(--accent); flex-shrink: 0; }
.pv2-privacy-note { text-align: center; font-size: 12.5px; color: var(--faint); margin: 16px 0 0; }

@media (max-width: 900px) {
  .pv2-contact-grid { grid-template-columns: 1fr; }
  .pv2-veld-rij { grid-template-columns: 1fr; }
}

/* compat: site-header (style.css) binnen body.pv2 */
.pv2 :where(.site-nav) a { color: var(--muted); }
.pv2 .site-header:not(.op-foto) { background: rgba(239, 237, 234, .88); }

/* ======================================================================
   SEO-landingssjabloon (pv2-land-*)
   ====================================================================== */

/* ---------- prose-paneel met lopende tekst ---------- */
/* bewust geen .pv2-card (geen hover-effect) */
.pv2-land-paneel {
  background: var(--card); border: 1px solid var(--line); border-radius: 20px;
  padding: 30px 32px; display: flex; flex-direction: column; gap: 22px;
  box-shadow: 0 2px 4px rgba(32, 29, 26, .04), 0 20px 44px rgba(32, 29, 26, .07);
}
.pv2-land-kolommen { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }
.pv2-land-kolom { min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.pv2-land-paneel > .pv2-land-kolom { max-width: 840px; }
.pv2-land-kolom h2 { font-size: 28px; line-height: 1.14; font-weight: 700; letter-spacing: -.028em; margin: 0; text-wrap: pretty; }
.pv2-land-kolom h3 { font-size: 19px; line-height: 1.2; font-weight: 700; letter-spacing: -.02em; margin: 0; text-wrap: pretty; }
.pv2-land-kolom p { font-size: 15px; line-height: 1.62; color: var(--muted); margin: 0; text-wrap: pretty; }
.pv2-land-kolom a { font-weight: 600; }
.pv2-land-kolom a:hover { text-decoration: underline; }

/* duo-kaart h2: zelfde maat als h3 */
.pv2-duo-kaart h2 {
  font-size: 24px; line-height: 1.15; font-weight: 700; letter-spacing: -.025em;
  margin: 0; text-wrap: pretty;
}

.pv2-land-paneel + .pv2-land-paneel,
.pv2-panelband + .pv2-land-paneel,
.pv2-kaartrij + .pv2-land-paneel,
.pv2-land-paneel + .pv2-donkerband { margin-top: 14px; }

/* ---------- FAQ-accordeon ---------- */
/* hergebruikt .pv2-faq-kaart/.pv2-faq-item van Veelgestelde vragen */
.pv2-land-faq { max-width: 820px; margin: 0 auto; }

/* ---------- ankersprongen (#faq, #uitleg, #vergelijking, #aanleveren …) ---------- */
.pv2 .pv2-section[id] { scroll-margin-top: 28px; }

@media (max-width: 1024px) {
  .pv2-land-paneel { padding: 26px 26px; }
  .pv2-land-kolommen { gap: 30px; }
}
@media (max-width: 900px) {
  .pv2-land-kolommen { grid-template-columns: minmax(0, 1fr); gap: 22px; }
}
@media (max-width: 620px) {
  .pv2-land-paneel { padding: 20px; border-radius: 16px; gap: 18px; }
  .pv2-land-kolom h2 { font-size: 23px; }
  .pv2-land-kolom h3 { font-size: 17px; }
  .pv2-duo-kaart h2 { font-size: 21px; }
}

/* ======================================================================
   v2.1-componenten uit de Onderdelen/VUO-mockups
   ====================================================================== */

/* ---------- 1. hero-uitbreidingen ---------- */
/* kicker op donker: streepje + onDark-kleuren */
.pv2-hero-kicker {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  color: rgba(247, 244, 240, .6); font-weight: 700;
}
.pv2-hero-kicker::before {
  content: ""; width: 20px; height: 1.5px; flex-shrink: 0;
  background: rgba(247, 244, 240, .5);
}

/* terug-link boven de h1 ("Alle informatie") */
.pv2-hero-terug {
  display: inline-flex; align-items: center; gap: 8px; align-self: flex-start;
  font-size: 13px; font-weight: 600;
}
.pv2-hero-terug i { font-size: 12px; }
/* dubbele klasse: wint van de algemene ".pv2 a"-linkkleur */
a.pv2-hero-terug { color: rgba(247, 244, 240, .62); }
a.pv2-hero-terug:hover { color: var(--onDark); }

/* foto-kolom rechts in de hero (i.p.v. .pv2-hero-card) */
.pv2-hero-visual {
  min-width: 0; margin: 0; overflow: hidden; border-radius: 18px;
  aspect-ratio: 4 / 3;
  box-shadow: 0 4px 8px rgba(0, 0, 0, .14), 0 30px 70px rgba(0, 0, 0, .4);
}
.pv2-hero-visual--breed { aspect-ratio: 16 / 10; }
.pv2-hero-visual img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- 2. overlap-sectie + kaartrijen ---------- */
/* schuift met een negatieve marge over de onderrand van de hero heen.
   width: 100% omdat body.pv2 een flex-kolom is: met auto-marges krijgt een
   kind daar anders de breedte van zijn inhoud, en de veegbare kaartrij
   (mobiel) maakte de pagina zo ~1000 px breed. */
.pv2-overlap {
  position: relative; z-index: 5; width: 100%;
  max-width: 1180px; margin: -40px auto 0; padding: 0 40px;
}
.pv2-overlap--diep { margin-top: -44px; }

.pv2-kaartrij { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.pv2-kaartrij--2 { grid-template-columns: 1fr 1fr; }
.pv2-kaartrij--4 { grid-template-columns: repeat(4, 1fr); }

/* zwaardere kaartschaduw voor kaarten die over de hero heen liggen */
.pv2-card--zwevend { box-shadow: 0 2px 4px rgba(32, 29, 26, .04), 0 18px 40px rgba(32, 29, 26, .08); }
.pv2-card--zwevend:hover {
  border-color: #DCD7D1;
  box-shadow: 0 2px 4px rgba(32, 29, 26, .05), 0 22px 46px rgba(32, 29, 26, .11);
}

/* ---------- 3. icoontegel + kaart met icoon ---------- */
.pv2-icoon {
  width: 38px; height: 38px; border-radius: 11px; background: var(--tint); color: var(--ink);
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0; font-size: 18px;
}
.pv2-icoon--accent { color: var(--accent); }
.pv2-icoon--groot { width: 44px; height: 44px; border-radius: 12px; font-size: 21px; }
.pv2-icoon--donker { background: var(--dark); color: var(--onDark); }
.pv2-icoon--opdonker { background: rgba(255, 255, 255, .1); color: var(--onDark); }
.pv2-icoon--omkaderd { background: var(--card); border: 1px solid var(--line); color: var(--accent); }

/* horizontale kaart: icoontegel links, tekst rechts (techniek-kaarten) */
.pv2-icoonkaart { padding: 20px; display: flex; gap: 14px; }
.pv2-icoonkaart .tekst { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.pv2-icoonkaart b { font-size: 15px; font-weight: 700; letter-spacing: -.015em; text-wrap: pretty; }
.pv2-icoonkaart p { font-size: 13.5px; line-height: 1.55; color: var(--muted); margin: 0; text-wrap: pretty; }
/* zelfde kaart, maar met het icoon bóven de tekst (pijlerkaarten) */
.pv2-icoonkaart--boven { flex-direction: column; gap: 11px; }
.pv2-icoonkaart--boven b { font-size: 15.5px; }

/* ---------- 4. donkere accentbanner ---------- */
.pv2-donkerband {
  background: var(--dark); border-radius: 16px; padding: 24px 26px;
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
}
.pv2-kaartrij + .pv2-donkerband { margin-top: 14px; }
.pv2-donkerband .pv2-icoon { width: 42px; height: 42px; font-size: 20px; }
.pv2-donkerband-tekst { flex: 1 1 420px; min-width: 280px; display: flex; flex-direction: column; gap: 5px; }
.pv2-donkerband-tekst b { font-size: 17px; font-weight: 700; letter-spacing: -.015em; color: var(--onDark); }
.pv2-donkerband-tekst p { font-size: 14px; line-height: 1.55; color: rgba(247, 244, 240, .72); margin: 0; text-wrap: pretty; }

/* ---------- 5. panel-band (twee kolommen) ---------- */
.pv2-panelband {
  background: var(--panel); border: 1px solid var(--line); border-radius: 20px;
  padding: 34px 36px; display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center;
}
.pv2-panelband-tekst { min-width: 0; display: flex; flex-direction: column; gap: 13px; }
.pv2-panelband-tekst h2 { font-size: 28px; line-height: 1.14; font-weight: 700; letter-spacing: -.028em; margin: 0; text-wrap: pretty; }
.pv2-panelband-tekst p { font-size: 15px; line-height: 1.6; color: var(--muted); margin: 0; text-wrap: pretty; }
.pv2-panelband-lijst { min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.pv2-panelband-item {
  display: flex; align-items: center; gap: 13px;
  background: var(--card); border: 1px solid var(--line); border-radius: 13px; padding: 15px 16px;
}
.pv2-panelband-item .tekst { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pv2-panelband-item b { font-size: 14.5px; font-weight: 700; letter-spacing: -.01em; }
.pv2-panelband-item .tekst > span { font-size: 12.5px; color: var(--muted); text-wrap: pretty; }

/* ---------- 6. gedrag-pills ---------- */
.pv2-pil {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 600; padding: 6px 11px; border-radius: 999px;
  border: 1px solid transparent; white-space: nowrap;
}
.pv2-pil i { font-size: 13px; }
.pv2-pil--groen { color: #33604A; background: #E7F0E9; border-color: #CFE0D4; }
.pv2-pil--neutraal { color: var(--ink); background: var(--panel); border-color: var(--line); }
.pv2-pil--blauw { color: #3E627C; background: #F1F3F6; border-color: #DDE4EA; }
/* grotere variant, bv. het gedragslabel in een blokkop */
.pv2-pil--groot { font-size: 12.5px; font-weight: 700; padding: 8px 13px; }
.pv2-pil--groot i { font-size: 14px; }

/* ---------- 7. callouts ---------- */
/* "wanneer u het gebruikt": paneelvlak met accentrand links */
.pv2-callout {
  display: flex; align-items: flex-start; gap: 11px;
  background: var(--panel); border-left: 2px solid var(--accent);
  border-radius: 0 11px 11px 0; padding: 14px 16px;
}
.pv2-callout > i { font-size: 17px; color: var(--accent); flex-shrink: 0; margin-top: 1px; }
.pv2-callout .tekst { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pv2-callout .label { font-size: 11px; letter-spacing: .13em; text-transform: uppercase; color: var(--faint); font-weight: 700; }
.pv2-callout .waarde { font-size: 14.5px; line-height: 1.55; color: var(--ink); font-weight: 500; text-wrap: pretty; }

/* tip-callout (blauwgrijs, met lightbulb) */
.pv2-tip {
  display: flex; align-items: flex-start; gap: 11px;
  background: #F1F3F6; border: 1px solid #DDE4EA; border-radius: 12px; padding: 14px 16px;
  font-size: 14px; line-height: 1.55; color: var(--muted); text-wrap: pretty;
}
.pv2-tip > i { font-size: 18px; color: var(--accent); flex-shrink: 0; margin-top: 1px; }
.pv2-tip strong { color: var(--ink); font-weight: 700; }

/* ---------- 8. checklijst met bold aanhef ---------- */
.pv2-checks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.pv2-checks li { display: flex; align-items: flex-start; gap: 11px; font-size: 14.5px; line-height: 1.58; color: var(--muted); text-wrap: pretty; }
.pv2-checks i { font-size: 12px; color: var(--pos); margin-top: 5px; flex-shrink: 0; }
.pv2-checks strong { color: var(--ink); font-weight: 700; }

/* ---------- 9. sticky zij-index ---------- */
.pv2-index-layout {
  max-width: 1180px; margin: 0 auto; padding: 70px 40px 0;
  display: grid; grid-template-columns: 236px 1fr; gap: 40px; align-items: start;
}
.pv2-index { position: sticky; top: 32px; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pv2-index-titel { font-size: 10.5px; letter-spacing: .15em; text-transform: uppercase; color: var(--faint); font-weight: 700; padding: 0 12px 10px; }
.pv2-index-link {
  display: flex; align-items: center; gap: 11px; font-size: 14px; font-weight: 600;
  padding: 10px 12px; border-radius: 10px; transition: background .15s, color .15s;
}
.pv2-index-link i { font-size: 17px; color: var(--accent); flex-shrink: 0; }
a.pv2-index-link { color: var(--muted); }
a.pv2-index-link:hover, a.pv2-index-link.actief { background: var(--tint); color: var(--ink); }
.pv2-index-cta {
  margin-top: 14px; background: var(--card); border: 1px solid var(--line); border-radius: 14px;
  padding: 16px; display: flex; flex-direction: column; gap: 9px;
  box-shadow: 0 1px 2px rgba(32, 29, 26, .03);
}
.pv2-index-cta b { font-size: 14px; font-weight: 700; letter-spacing: -.015em; text-wrap: pretty; }
.pv2-index-cta p { font-size: 12.5px; line-height: 1.5; color: var(--muted); margin: 0; text-wrap: pretty; }
.pv2-index-cta .pv2-btn { width: 100%; font-size: 13.5px; padding: 11px; }
.pv2-index-inhoud { min-width: 0; display: flex; flex-direction: column; gap: 14px; }

/* ---------- 10. link met pijl ---------- */
.pv2-link-pijl { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; font-size: 14.5px; font-weight: 600; }
.pv2-link-pijl i { font-size: 13px; }
.pv2-link-pijl-midden { display: flex; justify-content: center; margin-top: 22px; }

/* ---------- 11. duo-kaarten en productmocks ---------- */
/* duo-kaarten/mocks: bewust geen .pv2-card (geen hover-effect) */
.pv2-duo-kaart {
  background: var(--card); border: 1px solid var(--line); border-radius: 18px;
  box-shadow: 0 1px 2px rgba(32, 29, 26, .03);
  padding: 26px; display: flex; flex-direction: column; gap: 14px;
}
.pv2-duo-kaart h3 { font-size: 24px; line-height: 1.15; font-weight: 700; letter-spacing: -.025em; margin: 0; text-wrap: pretty; }
.pv2-duo-kaart > p { font-size: 14.5px; line-height: 1.6; color: var(--muted); margin: 0; text-wrap: pretty; }
/* paneelvlak onderin een duo-kaart (logboek, deellink) */
.pv2-paneelvak {
  margin-top: auto; display: flex; flex-direction: column; gap: 8px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 13px; padding: 14px;
}
.pv2-paneelvak-label { font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); font-weight: 700; }

/* mock van het instructiedocument */
.pv2-mock {
  background: var(--card); border: 1px solid var(--line); border-radius: 18px;
  box-shadow: 0 2px 4px rgba(32, 29, 26, .04), 0 18px 40px rgba(32, 29, 26, .07);
  padding: 24px; display: flex; flex-direction: column; gap: 16px;
}
.pv2-mock-head { display: flex; align-items: center; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.pv2-mock-logo {
  width: 44px; height: 44px; border-radius: 10px; background: var(--tint); border: 1px dashed #CFC9C2;
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  font-size: 9px; letter-spacing: .06em; text-transform: uppercase; color: var(--faint);
  font-weight: 700; text-align: center; line-height: 1.2;
}
.pv2-mock-head .tekst { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pv2-mock-head b { font-size: 14.5px; font-weight: 700; letter-spacing: -.01em; }
.pv2-mock-head .tekst > span { font-size: 12px; color: var(--faint); }
.pv2-mock-merk {
  margin-left: auto; display: inline-flex; align-items: center; gap: 7px;
  font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
  background: var(--panel); border: 1px solid var(--line); padding: 6px 11px; border-radius: 8px; white-space: nowrap;
}
.pv2-mock-merk i { font-size: 14px; color: var(--accent); }
.pv2-mock-label { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); font-weight: 700; }
.pv2-mock-regels { display: flex; flex-direction: column; gap: 8px; }
.pv2-mock-regel {
  display: flex; align-items: center; gap: 13px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 11px; padding: 12px 14px;
}
.pv2-mock-regel .dia { font-size: 12px; font-weight: 700; color: var(--faint); width: 34px; flex-shrink: 0; }
.pv2-mock-regel .tekst { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pv2-mock-regel .tekst b { font-size: 14px; font-weight: 600; letter-spacing: -.01em; }
.pv2-mock-regel .tekst > span { font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pv2-mock-actie {
  display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600;
  padding: 6px 10px; border-radius: 8px; white-space: nowrap;
}
.pv2-mock-actie i { font-size: 13px; }
.pv2-mock-actie--auto { color: var(--pos); background: #E7F0E9; }
.pv2-mock-actie--klik { color: var(--muted); background: var(--tint); }
.pv2-mock-note { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--faint); text-wrap: pretty; }
.pv2-mock-note i { font-size: 15px; flex-shrink: 0; }

/* logboekregel (avatar + wie/wat + tijd) */
.pv2-log-rij { display: flex; align-items: center; gap: 10px; }
.pv2-avatar {
  width: 26px; height: 26px; border-radius: 50%; background: var(--tint); color: var(--muted);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10.5px; font-weight: 700; flex-shrink: 0;
}
.pv2-log-rij .wat { flex: 1; min-width: 0; font-size: 13px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pv2-log-rij .wat b { font-weight: 600; }
.pv2-log-rij .tijd { font-size: 11.5px; color: var(--faint); font-weight: 500; white-space: nowrap; }

/* deellinkregel + bestandsregels */
.pv2-deellink {
  display: flex; align-items: center; gap: 10px;
  background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 11px 12px;
}
.pv2-deellink i { flex-shrink: 0; font-size: 15px; color: var(--faint); }
.pv2-deellink i:first-child { font-size: 16px; color: var(--accent); }
.pv2-deellink .url {
  flex: 1; min-width: 0; font-size: 12.5px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pv2-bestand-rij { display: flex; align-items: center; gap: 11px; }
.pv2-bestand-rij .pv2-icoon { width: 30px; height: 30px; border-radius: 8px; font-size: 15px; }
.pv2-bestand-rij .tekst { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pv2-bestand-rij b { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pv2-bestand-rij .meta { font-size: 11.5px; color: var(--faint); }
.pv2-bestand-rij > i { font-size: 15px; color: var(--faint); flex-shrink: 0; }

/* smallere prijzenrij (drie kaarten zonder vinklijst) */
.pv2-price-grid--smal { max-width: 900px; margin: 0 auto; }

/* ---------- 12. responsief ---------- */
@media (max-width: 1024px) {
  .pv2-hero-visual { max-width: 520px; width: 100%; }
  .pv2-overlap { padding: 0 32px; }
  .pv2-panelband { padding: 28px 28px; gap: 28px; }
  .pv2-index-layout { grid-template-columns: 190px 1fr; gap: 26px; padding: 54px 28px 0; }
  .pv2-index-link { font-size: 13px; padding: 9px 10px; gap: 9px; }
  .pv2-duo-kaart { padding: 20px; }
  .pv2-mock { padding: 18px; }
}
@media (max-width: 900px) {
  .pv2-kaartrij, .pv2-kaartrij--4 { grid-template-columns: 1fr 1fr; }
  .pv2-kaartrij--2 { grid-template-columns: 1fr; }
  .pv2-panelband { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .pv2-price-grid--smal { max-width: 440px; }
  .pv2-index-layout { grid-template-columns: minmax(0, 1fr); gap: 18px; padding: 32px 20px 0; }
  .pv2-index {
    position: static; flex-direction: row; gap: 7px;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    padding: 2px 20px 4px; margin: 0 -20px;
  }
  .pv2-index-titel, .pv2-index-cta { display: none; }
  .pv2-index-link {
    flex: none; white-space: nowrap; font-size: 12.5px; padding: 8px 13px;
    border: 1px solid var(--line); background: var(--card); border-radius: 999px;
  }
  .pv2-index-link i { font-size: 14px; }
}
@media (max-width: 760px) {
  .pv2-donkerband { padding: 20px; gap: 14px; }
  .pv2-duo-kaart h3 { font-size: 21px; }
}
@media (max-width: 620px) {
  .pv2-hero-visual { aspect-ratio: 16 / 10; border-radius: 14px; }
  .pv2-overlap { margin-top: -28px; padding: 0 20px; }
  .pv2-kaartrij, .pv2-kaartrij--2, .pv2-kaartrij--4 { grid-template-columns: minmax(0, 1fr); gap: 11px; }
  /* kaartrij--veeg: veegbare rij tot schermrand */
  .pv2-kaartrij--veeg {
    display: flex; gap: 11px; overflow-x: auto; -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory; scroll-padding: 0 20px; padding: 2px 20px 4px; margin: 0 -20px;
  }
  .pv2-kaartrij--veeg > * { flex: none; width: 236px; scroll-snap-align: start; }
  .pv2-icoonkaart { padding: 16px; gap: 12px; }
  .pv2-donkerband { border-radius: 14px; }
  .pv2-donkerband-tekst { flex-basis: 100%; min-width: 0; }
  .pv2-panelband { padding: 20px; border-radius: 16px; }
  .pv2-panelband-tekst h2 { font-size: 23px; }
  .pv2-duo-kaart { padding: 18px; border-radius: 16px; }
  .pv2-mock { padding: 16px; border-radius: 16px; gap: 13px; }
  .pv2-mock-regel { padding: 10px 12px; gap: 10px; }
  .pv2-mock-regel .dia { width: auto; font-size: 11px; }
  .pv2-mock-actie { font-size: 11px; padding: 4px 8px; }
  .pv2-checks li { font-size: 14px; }
  .pv2-index-layout { padding: 26px 20px 0; }
}

/* ---- Wat is er nieuw (changelog): per maand een kop, per datum een rij met de wijzigingen ---- */
.changelog { max-width: 840px; margin: 0 auto; padding: 56px 40px 88px; }
.changelog-intro { font-size: 16.5px; line-height: 1.6; color: var(--muted); margin: 0; }
.changelog-maand { margin-top: 44px; }
.changelog-maand h2 {
  display: flex; align-items: center; gap: 14px; margin: 0 0 16px;
  font-size: 12.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
}
.changelog-maand h2::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.changelog-dag {
  display: grid; grid-template-columns: 140px 1fr; gap: 24px;
  padding: 14px 0; border-bottom: 1px solid var(--line);
}
.changelog-dag:last-child { border-bottom: 0; }
.changelog-datum { font-size: 13.5px; font-weight: 600; color: var(--muted); padding-top: 2px; }
.changelog-dag ul { margin: 0; padding-left: 18px; }
.changelog-dag li { font-size: 15px; line-height: 1.6; color: var(--ink); text-wrap: pretty; }
.changelog-dag li + li { margin-top: 6px; }
.changelog-slot { margin: 40px 0 0; font-size: 15px; color: var(--muted); }
.changelog-slot a { color: var(--accent); }
@media (max-width: 720px) {
  .changelog { padding: 36px 16px 64px; }
  .changelog-maand { margin-top: 34px; }
  .changelog-dag { grid-template-columns: 1fr; gap: 6px; }
  .changelog-datum { padding-top: 0; }
}

/* GEGENEREERD door tools/iconen_publiek.py, niet met de hand bewerken.
   Kleine Phosphor-set voor de publieke pagina's; de app gebruikt
   phosphor-light.css/phosphor-bold.css met de volledige fonts. */
@font-face {
  font-family: "Phosphor-Light";
  src: url("/fonts/Phosphor-Light-publiek-34824bd05f.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
  font-display: block;
}
.ph-light {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: "Phosphor-Light" !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Enable Ligatures ================ */
  letter-spacing: 0;
  -webkit-font-feature-settings: "liga";
  -moz-font-feature-settings: "liga=1";
  -moz-font-feature-settings: "liga";
  -ms-font-feature-settings: "liga" 1;
  font-feature-settings: "liga";
  -webkit-font-variant-ligatures: discretionary-ligatures;
  font-variant-ligatures: discretionary-ligatures;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.ph-light.ph-arrow-down:before { content: "\e03e"; }
.ph-light.ph-arrow-left:before { content: "\e058"; }
.ph-light.ph-arrow-right:before { content: "\e06c"; }
.ph-light.ph-arrows-clockwise:before { content: "\e094"; }
.ph-light.ph-arrows-split:before { content: "\ed3c"; }
.ph-light.ph-bank:before { content: "\e0b4"; }
.ph-light.ph-bell-simple:before { content: "\e0d0"; }
.ph-light.ph-calendar-check:before { content: "\e712"; }
.ph-light.ph-calendar-x:before { content: "\e10c"; }
.ph-light.ph-caret-down:before { content: "\e136"; }
.ph-light.ph-check:before { content: "\e182"; }
.ph-light.ph-check-circle:before { content: "\e184"; }
.ph-light.ph-clock:before { content: "\e19a"; }
.ph-light.ph-clock-counter-clockwise:before { content: "\e1a0"; }
.ph-light.ph-coin:before { content: "\e60e"; }
.ph-light.ph-coins:before { content: "\e78e"; }
.ph-light.ph-copy:before { content: "\e1ca"; }
.ph-light.ph-crop:before { content: "\e1d4"; }
.ph-light.ph-cursor-click:before { content: "\e7c8"; }
.ph-light.ph-device-mobile-camera:before { content: "\e1e2"; }
.ph-light.ph-door-open:before { content: "\e7e6"; }
.ph-light.ph-download-simple:before { content: "\e20c"; }
.ph-light.ph-envelope-simple:before { content: "\e218"; }
.ph-light.ph-eye:before { content: "\e220"; }
.ph-light.ph-file-pdf:before { content: "\e702"; }
.ph-light.ph-file-text:before { content: "\e23a"; }
.ph-light.ph-film-slate:before { content: "\e8c2"; }
.ph-light.ph-film-strip:before { content: "\e792"; }
.ph-light.ph-flower-lotus:before { content: "\e6cc"; }
.ph-light.ph-folder-simple-plus:before { content: "\e25e"; }
.ph-light.ph-gift:before { content: "\e276"; }
.ph-light.ph-globe-hemisphere-west:before { content: "\e28c"; }
.ph-light.ph-guitar:before { content: "\ea8a"; }
.ph-light.ph-hand-heart:before { content: "\e810"; }
.ph-light.ph-headset:before { content: "\e584"; }
.ph-light.ph-image:before { content: "\e2ca"; }
.ph-light.ph-image-square:before { content: "\e2cc"; }
.ph-light.ph-images:before { content: "\e836"; }
.ph-light.ph-infinity:before { content: "\e634"; }
.ph-light.ph-info:before { content: "\e2ce"; }
.ph-light.ph-lifebuoy:before { content: "\e63a"; }
.ph-light.ph-lightbulb:before { content: "\e2dc"; }
.ph-light.ph-link:before { content: "\e2e2"; }
.ph-light.ph-link-simple:before { content: "\e2e6"; }
.ph-light.ph-list:before { content: "\e2f0"; }
.ph-light.ph-lock-simple-open:before { content: "\e30a"; }
.ph-light.ph-metronome:before { content: "\ec8e"; }
.ph-light.ph-microphone:before { content: "\e326"; }
.ph-light.ph-microphone-stage:before { content: "\e75c"; }
.ph-light.ph-microsoft-powerpoint-logo:before { content: "\eace"; }
.ph-light.ph-monitor-play:before { content: "\e58c"; }
.ph-light.ph-music-notes:before { content: "\e340"; }
.ph-light.ph-palette:before { content: "\e6c8"; }
.ph-light.ph-paper-plane-tilt:before { content: "\e398"; }
.ph-light.ph-pencil-simple:before { content: "\e3b4"; }
.ph-light.ph-phone:before { content: "\e3b8"; }
.ph-light.ph-play:before { content: "\e3d0"; }
.ph-light.ph-play-circle:before { content: "\e3d2"; }
.ph-light.ph-projector-screen:before { content: "\e658"; }
.ph-light.ph-question:before { content: "\e3e8"; }
.ph-light.ph-receipt:before { content: "\e3ec"; }
.ph-light.ph-repeat:before { content: "\e3f6"; }
.ph-light.ph-selection-background:before { content: "\eaf8"; }
.ph-light.ph-share-network:before { content: "\e408"; }
.ph-light.ph-shield-check:before { content: "\e40c"; }
.ph-light.ph-sliders-horizontal:before { content: "\e434"; }
.ph-light.ph-speaker-high:before { content: "\e44a"; }
.ph-light.ph-speaker-slash:before { content: "\e45a"; }
.ph-light.ph-squares-four:before { content: "\e464"; }
.ph-light.ph-stack:before { content: "\e466"; }
.ph-light.ph-star:before { content: "\e46a"; }
.ph-light.ph-timer:before { content: "\e492"; }
.ph-light.ph-user-circle:before { content: "\e4c4"; }
.ph-light.ph-user-square:before { content: "\e4d4"; }
.ph-light.ph-users-three:before { content: "\e68e"; }
.ph-light.ph-video-camera:before { content: "\e4da"; }
.ph-light.ph-warning-circle:before { content: "\e4e2"; }
.ph-light.ph-waveform:before { content: "\e802"; }
@font-face {
  font-family: "Phosphor-Bold";
  src: url("/fonts/Phosphor-Bold-publiek-75ed3dc795.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
  font-display: block;
}
.ph-bold {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: "Phosphor-Bold" !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Enable Ligatures ================ */
  letter-spacing: 0;
  -webkit-font-feature-settings: "liga";
  -moz-font-feature-settings: "liga=1";
  -moz-font-feature-settings: "liga";
  -ms-font-feature-settings: "liga" 1;
  font-feature-settings: "liga";
  -webkit-font-variant-ligatures: discretionary-ligatures;
  font-variant-ligatures: discretionary-ligatures;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.ph-bold.ph-arrow-down:before { content: "\e03e"; }
.ph-bold.ph-arrow-left:before { content: "\e058"; }
.ph-bold.ph-arrow-right:before { content: "\e06c"; }
.ph-bold.ph-arrows-clockwise:before { content: "\e094"; }
.ph-bold.ph-arrows-split:before { content: "\ed3c"; }
.ph-bold.ph-bank:before { content: "\e0b4"; }
.ph-bold.ph-bell-simple:before { content: "\e0d0"; }
.ph-bold.ph-calendar-check:before { content: "\e712"; }
.ph-bold.ph-calendar-x:before { content: "\e10c"; }
.ph-bold.ph-caret-down:before { content: "\e136"; }
.ph-bold.ph-check:before { content: "\e182"; }
.ph-bold.ph-check-circle:before { content: "\e184"; }
.ph-bold.ph-clock:before { content: "\e19a"; }
.ph-bold.ph-clock-counter-clockwise:before { content: "\e1a0"; }
.ph-bold.ph-coin:before { content: "\e60e"; }
.ph-bold.ph-coins:before { content: "\e78e"; }
.ph-bold.ph-copy:before { content: "\e1ca"; }
.ph-bold.ph-crop:before { content: "\e1d4"; }
.ph-bold.ph-cursor-click:before { content: "\e7c8"; }
.ph-bold.ph-device-mobile-camera:before { content: "\e1e2"; }
.ph-bold.ph-door-open:before { content: "\e7e6"; }
.ph-bold.ph-download-simple:before { content: "\e20c"; }
.ph-bold.ph-envelope-simple:before { content: "\e218"; }
.ph-bold.ph-eye:before { content: "\e220"; }
.ph-bold.ph-file-pdf:before { content: "\e702"; }
.ph-bold.ph-file-text:before { content: "\e23a"; }
.ph-bold.ph-film-slate:before { content: "\e8c2"; }
.ph-bold.ph-film-strip:before { content: "\e792"; }
.ph-bold.ph-flower-lotus:before { content: "\e6cc"; }
.ph-bold.ph-folder-simple-plus:before { content: "\e25e"; }
.ph-bold.ph-gift:before { content: "\e276"; }
.ph-bold.ph-globe-hemisphere-west:before { content: "\e28c"; }
.ph-bold.ph-guitar:before { content: "\ea8a"; }
.ph-bold.ph-hand-heart:before { content: "\e810"; }
.ph-bold.ph-headset:before { content: "\e584"; }
.ph-bold.ph-image:before { content: "\e2ca"; }
.ph-bold.ph-image-square:before { content: "\e2cc"; }
.ph-bold.ph-images:before { content: "\e836"; }
.ph-bold.ph-infinity:before { content: "\e634"; }
.ph-bold.ph-info:before { content: "\e2ce"; }
.ph-bold.ph-lifebuoy:before { content: "\e63a"; }
.ph-bold.ph-lightbulb:before { content: "\e2dc"; }
.ph-bold.ph-link:before { content: "\e2e2"; }
.ph-bold.ph-link-simple:before { content: "\e2e6"; }
.ph-bold.ph-list:before { content: "\e2f0"; }
.ph-bold.ph-lock-simple-open:before { content: "\e30a"; }
.ph-bold.ph-metronome:before { content: "\ec8e"; }
.ph-bold.ph-microphone:before { content: "\e326"; }
.ph-bold.ph-microphone-stage:before { content: "\e75c"; }
.ph-bold.ph-microsoft-powerpoint-logo:before { content: "\eace"; }
.ph-bold.ph-monitor-play:before { content: "\e58c"; }
.ph-bold.ph-music-notes:before { content: "\e340"; }
.ph-bold.ph-palette:before { content: "\e6c8"; }
.ph-bold.ph-paper-plane-tilt:before { content: "\e398"; }
.ph-bold.ph-pencil-simple:before { content: "\e3b4"; }
.ph-bold.ph-phone:before { content: "\e3b8"; }
.ph-bold.ph-play:before { content: "\e3d0"; }
.ph-bold.ph-play-circle:before { content: "\e3d2"; }
.ph-bold.ph-projector-screen:before { content: "\e658"; }
.ph-bold.ph-question:before { content: "\e3e8"; }
.ph-bold.ph-receipt:before { content: "\e3ec"; }
.ph-bold.ph-repeat:before { content: "\e3f6"; }
.ph-bold.ph-selection-background:before { content: "\eaf8"; }
.ph-bold.ph-share-network:before { content: "\e408"; }
.ph-bold.ph-shield-check:before { content: "\e40c"; }
.ph-bold.ph-sliders-horizontal:before { content: "\e434"; }
.ph-bold.ph-speaker-high:before { content: "\e44a"; }
.ph-bold.ph-speaker-slash:before { content: "\e45a"; }
.ph-bold.ph-squares-four:before { content: "\e464"; }
.ph-bold.ph-stack:before { content: "\e466"; }
.ph-bold.ph-star:before { content: "\e46a"; }
.ph-bold.ph-timer:before { content: "\e492"; }
.ph-bold.ph-user-circle:before { content: "\e4c4"; }
.ph-bold.ph-user-square:before { content: "\e4d4"; }
.ph-bold.ph-users-three:before { content: "\e68e"; }
.ph-bold.ph-video-camera:before { content: "\e4da"; }
.ph-bold.ph-warning-circle:before { content: "\e4e2"; }
.ph-bold.ph-waveform:before { content: "\e802"; }