/*
 * De publieke site: de voordeur en de opleidingspagina's (wayfinder
 * publieke-site, ticket 004). Maten, kleuren en letters uit de handoff van
 * Claude Design (resources/claude design handoff/design_handoff_academy_homepage),
 * ontworpen op 1280px; onder de 900px één kolom en een ingeklapt menu.
 * Nooit boogvormen op foto's (klantregel).
 */

.ps { max-width: 1280px; margin: 0 auto; background: #F5EFE6; color: #5F4E58; font-family: var(--font-body); -webkit-font-smoothing: antialiased; }
.ps a { color: #A9603F; text-decoration: none; }
.ps a:hover { color: #8A4C30; }
.ps ::selection { background: #EDD3C2; }
.ps-serif { font-family: var(--font-display); font-weight: 400; color: #45303F; margin: 0; }
.ps-mono { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: #8A7580; }
.ps-eyebrow { font-weight: 600; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: #A9603F; }
.ps-dot { width: 7px; height: 7px; border-radius: 999px; flex: none; display: inline-block; }

/* knoppen: pillen die van kleur wisselen */
.ps .ps-knop { display: inline-block; background: #45303F; color: #FFF7EF; border-radius: 999px; padding: 15px 26px; font-weight: 600; font-size: 15px; white-space: nowrap; border: 0; font-family: inherit; cursor: pointer; }
.ps .ps-knop:hover { background: #32222E; color: #FFF7EF; }
.ps .ps-knop-rand { background: transparent; border: 1px solid #CDBFA9; color: #45303F; }
.ps .ps-knop-rand:hover { background: #E9DFCE; color: #45303F; }
.ps .ps-knop-klei { background: #A9603F; padding: 14px 24px; }
.ps .ps-knop-klei:hover { background: #8A4C30; }
.ps .ps-link { font-weight: 600; font-size: 15px; }
.ps .ps-link-inkt { color: #45303F; }
.ps .ps-link-inkt:hover { color: #A9603F; }

/* 1. kop */
.ps-kop { display: flex; align-items: center; justify-content: space-between; padding: 22px 64px; border-bottom: 1px solid #E3D9CB; position: relative; }
.ps-lockup { display: flex; align-items: center; gap: 26px; }
.ps-lockup-academy { display: flex; align-items: center; gap: 16px; }
.ps-lockup-academy img { width: 56px; height: 56px; border-radius: 14px; display: block; }
.ps-lockup-naam { font-family: var(--font-display); font-size: 22px; line-height: 1.05; color: #45303F; }
.ps-lockup-streep { width: 1px; height: 28px; background: #E3D9CB; }
.ps-lockup-door { display: flex; align-items: center; gap: 12px; }
.ps-lockup-door span { font-weight: 600; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: #8A7580; }
.ps-lockup-door img { height: 19px; width: auto; display: block; }
.ps-nav { display: flex; align-items: center; gap: 32px; font-size: 14.5px; font-weight: 500; }
.ps .ps-nav a { color: #45303F; }
.ps .ps-nav a:hover { color: #A9603F; }
.ps .ps-nav .ps-inloggen { border: 1px solid #CDBFA9; border-radius: 999px; padding: 9px 18px; }
.ps .ps-nav .ps-inloggen:hover { background: #E9DFCE; color: #45303F; }
.ps-menu { display: none; }

/* 2. hero */
.ps-hero { display: grid; grid-template-columns: 1.05fr 1fr; gap: 64px; align-items: center; padding: 80px 64px 88px; }
.ps-hero-tekst { display: flex; flex-direction: column; gap: 22px; }
.ps-hero h1 { font-family: var(--font-display); font-weight: 400; font-size: 58px; line-height: 1.06; color: #45303F; margin: 0; text-wrap: pretty; }
.ps-hero-lead { font-size: 18px; line-height: 1.65; max-width: 50ch; margin: 0; text-wrap: pretty; }
.ps-hero-lead b { color: #45303F; }
.ps-hero-knoppen { display: flex; gap: 12px; margin-top: 6px; flex-wrap: wrap; }
.ps-kengetallen { display: flex; gap: 28px; margin-top: 18px; padding-top: 22px; border-top: 1px solid #E3D9CB; }
.ps-kengetal { display: flex; flex-direction: column; gap: 4px; }
.ps-kengetal-getal { font-family: var(--font-display); font-size: 26px; color: #45303F; }
.ps-kengetal-label { font-size: 13px; }
.ps-beeld { background: #E9DFCE; overflow: hidden; }
.ps-beeld img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ps-beeld-hero { height: 540px; border-radius: 20px; }

/* de klassen die lopen: een smalle regel per klas */
.ps-lopend { display: flex; flex-direction: column; gap: 12px; padding: 0 64px 40px; }
.ps-lopend-regel { display: flex; align-items: center; gap: 12px; background: #FFFFFF; border-radius: 999px; padding: 8px 8px 8px 22px; font-size: 15px; box-shadow: 0 1px 4px rgba(69,48,63,.08); }
.ps-lopend-regel b { color: #45303F; }
.ps-lopend-regel turbo-frame { margin-left: auto; }
.ps .ps-wens { border: 1px solid #CDBFA9; background: transparent; border-radius: 999px; padding: 8px 16px; font: 600 14px var(--font-body); color: #45303F; cursor: pointer; white-space: nowrap; }
.ps .ps-wens:hover { background: #E9DFCE; }
.ps .ps-wens:disabled { cursor: default; opacity: .6; background: transparent; }
.ps-wens-klaar { display: inline-block; padding: 8px 16px; font-weight: 600; font-size: 14px; color: #45303F; }

/* 3. cursussen en opleidingen */
.ps-cursussen { background: #FFFFFF; padding: 88px 64px; }
.ps-sectiekop { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; margin-bottom: 36px; }
.ps-sectiekop-titel { display: flex; flex-direction: column; gap: 10px; }
.ps-h2 { font-family: var(--font-display); font-weight: 400; font-size: 40px; line-height: 1.1; color: #45303F; margin: 0; }
.ps-sectiekop p { font-size: 15px; line-height: 1.6; max-width: 40ch; margin: 0; }
.ps-kaarten-groot { display: flex; flex-direction: column; gap: 24px; }
.ps-kaart-groot { display: grid; grid-template-columns: 1.1fr 1fr; border-radius: 20px; overflow: hidden; box-shadow: 0 2px 16px rgba(69,48,63,.10); }
.ps-kaart-links { padding: 48px; display: flex; flex-direction: column; gap: 16px; }
.ps-kaart-eyebrow { font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #45303F; }
.ps-kaart-groot .ps-kaart-titel { font-family: var(--font-display); font-weight: 400; font-size: 40px; line-height: 1.1; color: #45303F; margin: 0; }
.ps-kaart-lead { font-size: 17px; line-height: 1.6; color: #45303F; margin: 0; }
.ps-highlights { display: flex; flex-direction: column; gap: 10px; margin: 8px 0 0; padding: 0; list-style: none; }
.ps-highlight { display: flex; gap: 12px; align-items: baseline; font-size: 15.5px; line-height: 1.5; color: #45303F; }
.ps-highlight .ps-dot { background: #A9603F; transform: translateY(-2px); }
.ps-kaart-rechts { background: #FFFFFF; padding: 48px; display: flex; flex-direction: column; gap: 24px; }
.ps-status { display: inline-flex; align-self: flex-start; align-items: center; gap: 8px; color: #45303F; border-radius: 999px; padding: 6px 13px; font-size: 13px; font-weight: 600; }
.ps-status-open { background: #E4EBDF; } .ps-status-open .ps-dot { background: #5F7A5A; }
.ps-status-bijna-vol { background: #F3E7CE; } .ps-status-bijna-vol .ps-dot { background: #C08A2E; }
.ps-status-wachtlijst { background: #E9DFCE; } .ps-status-wachtlijst .ps-dot { background: #8A7580; }
.ps-feiten { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 28px; margin: 0; }
.ps-feit { display: flex; flex-direction: column; gap: 5px; }
.ps-feit dt { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: #8A7580; }
.ps-feit dd { margin: 0; font-size: 16px; font-weight: 600; color: #45303F; }
.ps-noot { font-size: 14.5px; line-height: 1.55; margin: 0; }
.ps-kaart-knoppen { display: flex; gap: 12px; align-items: center; margin-top: auto; padding-top: 8px; flex-wrap: wrap; }
.ps-agenda-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #8A7580; margin: 48px 0 16px; }
.ps-kaarten-klein { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.ps-kaarten-klein-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ps-kaart-klein { border: 1px solid #E3D9CB; border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; transition: box-shadow .15s; }
.ps-kaart-klein:hover { box-shadow: 0 2px 16px rgba(69,48,63,.10); }
.ps-kaart-band { padding: 24px 26px; display: flex; flex-direction: column; gap: 8px; }
.ps-kaart-band .ps-kaart-eyebrow { font-size: 10.5px; }
.ps-kaart-klein .ps-kaart-titel { font-family: var(--font-display); font-weight: 400; font-size: 23px; line-height: 1.2; color: #45303F; margin: 0; }
.ps-kaart-lijf { padding: 22px 26px 24px; display: flex; flex-direction: column; gap: 14px; flex: 1; }
.ps-kaart-lijf > p { font-size: 15px; line-height: 1.55; margin: 0; }
.ps-kaart-meta { display: flex; gap: 18px; flex-wrap: wrap; font-size: 14px; color: #45303F; font-weight: 600; }
.ps-kaart-meta span + span { color: #8A7580; font-weight: 400; }
.ps-kaart-voet { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: auto; padding-top: 14px; border-top: 1px solid #E3D9CB; }
.ps-kaart-voet .ps-status { background: none; padding: 0; gap: 7px; }
.ps-kaart-voet a { font-weight: 600; font-size: 14.5px; }
.ps-tint-huid { background: #EDD3C2; }
.ps-tint-lila { background: #E7DDEA; }
.ps-tint-zand { background: #E9DFCE; }
.ps-tint-klei { background: #F7E8DE; }
.ps-leeg { background: #F7E8DE; border-radius: 20px; padding: 56px; display: grid; grid-template-columns: 1.2fr 1fr; gap: 48px; align-items: center; }
.ps-leeg-tekst { display: flex; flex-direction: column; gap: 12px; }
.ps-leeg h3 { font-family: var(--font-display); font-weight: 400; font-size: 34px; line-height: 1.15; color: #45303F; margin: 0; }
.ps-leeg p { font-size: 16px; line-height: 1.65; margin: 0; }
.ps-leeg .ps-knop { justify-self: start; }

/* 4. zo leer je */
.ps-sectie { padding: 96px 64px; }
.ps-sectie-intro { display: flex; flex-direction: column; gap: 10px; max-width: 640px; margin-bottom: 44px; }
.ps-zo { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.ps-zo-kolom { display: flex; flex-direction: column; gap: 14px; }
.ps-zo-kolom .ps-beeld { height: 200px; border-radius: 16px; }
.ps-zo-kolom .ps-beeld img { object-position: center 25%; }
.ps-zo-kolom h3 { font-family: var(--font-display); font-weight: 400; font-size: 21px; color: #45303F; margin: 0; line-height: 1.2; }
.ps-zo-kolom p { font-size: 15px; line-height: 1.6; margin: 0; }

/* 6. wat oud-cursisten zeggen */
.ps-ervaringen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 36px; }
.ps-ervaring { background: #FFFFFF; border-radius: 16px; box-shadow: 0 1px 4px rgba(69,48,63,.08); padding: 30px; display: flex; flex-direction: column; gap: 20px; margin: 0; position: relative; }
.ps-ervaring blockquote { font-family: var(--font-display); font-size: 19px; line-height: 1.45; color: #45303F; margin: 0; }
.ps-ervaring figcaption { display: flex; gap: 12px; align-items: center; margin-top: auto; font-size: 14px; line-height: 1.4; }
.ps-ervaring figcaption b { color: #45303F; }
.ps-avatar { width: 44px; height: 44px; border-radius: 999px; background: #E9DFCE; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 14px; color: #8A7580; flex: none; overflow: hidden; }
.ps-bekend { display: flex; align-items: center; flex-wrap: wrap; gap: 20px 36px; margin-top: 48px; padding-top: 28px; border-top: 1px solid #E3D9CB; }
.ps-ervaringen-leeg + .ps-bekend, .ps-bekend:first-child { margin-top: 0; }
.ps-vermelding { width: 140px; height: 40px; display: flex; align-items: center; justify-content: center; opacity: .7; filter: grayscale(1); }
.ps .ps-vermelding, .ps .ps-vermelding:hover { color: #8A7580; font-weight: 700; font-size: 15px; }
.ps-vermelding img { max-width: 100%; max-height: 100%; }

/* 7. een academy van Kiki Mae */
.ps-kikimae-wrap { padding: 0 64px 96px; }
.ps-kikimae { background: #E9DFCE; border-radius: 20px; display: grid; grid-template-columns: 420px 1fr; overflow: hidden; }
.ps-kikimae .ps-beeld { height: 440px; background: #EDD3C2; }
.ps-kikimae .ps-beeld img { object-position: center 25%; }
.ps-kikimae-tekst { padding: 56px; display: flex; flex-direction: column; gap: 18px; justify-content: center; }
.ps-kikimae-tekst > img { height: 34px; width: auto; align-self: flex-start; }
.ps-kikimae-tekst h2 { font-family: var(--font-display); font-weight: 400; font-size: 34px; line-height: 1.15; color: #45303F; margin: 0; }
.ps-kikimae-tekst p { font-size: 16.5px; line-height: 1.7; max-width: 52ch; margin: 0; }
.ps-kikimae-tekst p b { color: #45303F; }
.ps-kikimae-links { display: flex; gap: 24px; align-items: center; margin-top: 6px; flex-wrap: wrap; }

/* 8. voet */
.ps-voet { background: #45303F; color: #F5EFE6; padding: 36px 64px; display: flex; justify-content: space-between; align-items: center; gap: 24px; font-size: 14px; }
.ps-voet nav { display: flex; gap: 28px; flex-wrap: wrap; }
.ps .ps-voet a { color: #F5EFE6; }
.ps .ps-voet a:hover { color: #EDD3C2; }

/* de opleidingspagina */
.ps-opl-hero { margin: 56px 64px 0; }
.ps-opl-kop { font-family: var(--font-display); font-weight: 400; font-size: 26px; line-height: 1.3; color: #45303F; margin: 0; text-wrap: pretty; max-width: 30ch; }
.ps-opl-lijf { display: grid; grid-template-columns: 1.1fr 1fr; gap: 64px; padding: 80px 64px 88px; align-items: start; }
.ps-verhaal { display: flex; flex-direction: column; gap: 18px; }
.ps-verhaal p { font-size: 17px; line-height: 1.7; margin: 0; max-width: 60ch; }
.ps-opl-zij { display: flex; flex-direction: column; gap: 40px; }
.ps-opl-blok { display: flex; flex-direction: column; gap: 14px; }
.ps-opl-blok h2 { font-family: var(--font-display); font-weight: 400; font-size: 26px; line-height: 1.15; color: #45303F; margin: 0; }
.ps-programma, .ps-momenten { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.ps-programma li, .ps-momenten li { display: flex; gap: 16px; align-items: baseline; padding: 14px 0; border-top: 1px solid #E3D9CB; font-size: 15.5px; color: #45303F; }
.ps-programma li:last-child, .ps-momenten li:last-child { border-bottom: 1px solid #E3D9CB; }
.ps-programma .ps-mono, .ps-momenten .ps-mono { flex: none; width: 34px; }
.ps-momenten .ps-mono { width: 120px; }
.ps-programma small, .ps-momenten small { display: block; color: #8A7580; font-size: 14px; margin-top: 2px; }
.ps-opl-ervaringen { padding: 0 64px 96px; }
.ps-opl-ervaringen .ps-ervaringen { margin-top: 28px; }

/* wat de opleidingspagina laat verkopen: voor wie, wat je meeneemt, de investering met de knop, de vragen */
.ps-opl-links { display: flex; flex-direction: column; gap: 48px; }
.ps-voor-wie p { font-size: 17px; line-height: 1.7; margin: 0; max-width: 60ch; }
.ps-opl-uitkomsten { padding: 0 64px 96px; }
.ps-uitkomsten { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; margin-top: 28px; }
.ps-uitkomst { background: #FFFFFF; border-radius: 16px; box-shadow: 0 1px 4px rgba(69,48,63,.08); padding: 28px; display: flex; flex-direction: column; gap: 10px; }
.ps-uitkomst h3 { font-family: var(--font-display); font-weight: 400; font-size: 21px; line-height: 1.2; color: #45303F; margin: 0; }
.ps-uitkomst p { font-size: 15px; line-height: 1.6; margin: 0; }
.ps-opl-slot { margin: 0 64px 96px; display: grid; grid-template-columns: 1fr 1fr; border-radius: 20px; overflow: hidden; box-shadow: 0 2px 16px rgba(69,48,63,.10); }
.ps-opl-slot > :only-child { grid-column: 1 / -1; }
.ps-slot-prijs { padding: 48px; display: flex; flex-direction: column; gap: 16px; }
.ps-slot-bedrag { font-family: var(--font-display); font-size: 34px; line-height: 1.15; color: #45303F; margin: 0; }
.ps-inbegrepen { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.ps-slot-actie { background: #FFFFFF; padding: 48px; display: flex; flex-direction: column; gap: 18px; align-items: flex-start; justify-content: center; }
.ps-slot-kop { font-family: var(--font-display); font-weight: 400; font-size: 34px; line-height: 1.15; color: #45303F; margin: 0; }
.ps-opl-vragen { padding: 0 64px 96px; max-width: 900px; }
.ps-vragen { margin-top: 28px; border-top: 1px solid #E3D9CB; }
.ps-vraag { border-bottom: 1px solid #E3D9CB; }
.ps-vraag summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: baseline; gap: 24px; padding: 20px 0; font-size: 17px; font-weight: 600; color: #45303F; }
.ps-vraag summary::-webkit-details-marker { display: none; }
.ps-vraag summary::after { content: '+'; font-weight: 400; font-size: 22px; line-height: 1; color: #A9603F; flex: none; }
.ps-vraag[open] summary::after { content: '\2212'; }
.ps-vraag-antwoord { display: flex; flex-direction: column; gap: 12px; padding: 0 0 22px; }
.ps-vraag-antwoord p { font-size: 16px; line-height: 1.7; margin: 0; max-width: 68ch; }

/* telefoon en smal: één kolom, het menu klapt in */
/* een pagina uit Sulu (webspace academy) en de foutpagina van de host */
/* tekst in een kolom; de levende blokken (aanbod, lopende klassen) over de volle breedte, zoals op de voordeur */
.ps-pagina { padding: 80px 0 96px; display: flex; flex-direction: column; gap: 24px; }
.ps-pagina > * { margin-inline: 64px; max-width: 772px; }
/* Opening, stappen, Bekend van en het blok over Kiki Mae ook; begint de pagina met Opening, dan geeft die de ruimte bovenaan */
.ps-pagina > .ps-cursussen, .ps-pagina > .ps-lopend, .ps-pagina > .ps-hero, .ps-pagina > .ps-kikimae-wrap { margin-inline: 0; max-width: none; }
.ps-pagina > .ps-stappen, .ps-pagina > .ps-bekend { max-width: none; }
.ps-pagina:has(> .ps-hero:first-child) { padding-top: 0; }
.ps-pagina > .ps-hero h2 { font-family: var(--font-display); font-weight: 400; font-size: 46px; line-height: 1.08; color: #45303F; margin: 0; text-wrap: pretty; }
.ps-pagina > .ps-stappen, .ps-pagina > .ps-vragen, .ps-pagina > .ps-bekend { margin-block: 32px; }
.ps-pagina > .ps-kikimae-wrap { padding-bottom: 0; }
.ps-hero-lead p { margin: 0; }
.ps-hero-lead p + p { margin-top: 12px; }
.ps-stappen { display: flex; flex-direction: column; gap: 28px; }
.ps-stappen-lijst { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 24px; }
.ps-stappen-lijst li { display: flex; flex-direction: column; gap: 10px; }
.ps-stap-nummer { font-family: var(--font-display); font-size: 30px; line-height: 1; color: #A9603F; }
.ps-stappen-lijst h3 { font-family: var(--font-display); font-weight: 400; font-size: 21px; color: #45303F; margin: 0; line-height: 1.2; }
.ps-stap-tekst p { font-size: 15px; line-height: 1.6; margin: 0; }
.ps-stap-tekst p + p { margin-top: 8px; }
.ps-vragen { display: flex; flex-direction: column; }
.ps-vragen > h2 { margin-bottom: 12px; }
.ps-kikimae-rechts { grid-template-columns: 1fr 420px; }
.ps-kikimae-rechts > .ps-beeld { order: 2; }
.ps-kikimae-tekst a:not(.ps-knop) { font-weight: 600; color: #45303F; }
.ps-kikimae-tekst a:not(.ps-knop):hover { color: #A9603F; }
.ps-pagina h1 { font-family: var(--font-display); font-weight: 400; font-size: 44px; line-height: 1.1; color: #45303F; margin-block: 0; text-wrap: pretty; }
.ps-tekst { font-size: 17px; line-height: 1.7; max-width: 64ch; }
.ps-tekst > :first-child { margin-top: 0; }
.ps-tekst > :last-child { margin-bottom: 0; }
.ps-tekst h2, .ps-tekst h3 { font-family: var(--font-display); font-weight: 400; color: #45303F; line-height: 1.25; }
/* een levend blok dat weg is voor bezoekers: alleen in het voorbeeld van Sulu */
.ps-voorbeeld-regel { margin-block: 0; padding: 12px 16px; border: 1px dashed #CDBFA9; border-radius: 12px; color: #8A7580; font-style: italic; font-size: 14px; }
.ps-fout p { font-size: 17px; line-height: 1.7; margin-block: 0; max-width: 52ch; }

@media (max-width: 900px) {
  .ps-kop { padding: 16px 20px; }
  .ps-lockup { gap: 14px; }
  .ps-lockup-academy { gap: 10px; }
  .ps-lockup-academy img { width: 44px; height: 44px; border-radius: 11px; }
  .ps-lockup-naam { font-size: 18px; }
  .ps-lockup-door img { height: 15px; }
  .ps-lockup-door span { font-size: 11px; }
  .ps-kop > .ps-nav { display: none; }
  .ps-menu { display: block; }
  .ps-menu summary { list-style: none; cursor: pointer; border: 1px solid #CDBFA9; border-radius: 999px; padding: 8px 16px; font-weight: 600; font-size: 14px; color: #45303F; }
  .ps-menu summary::-webkit-details-marker { display: none; }
  .ps-menu .ps-nav { position: absolute; right: 20px; top: calc(100% + 8px); z-index: 5; flex-direction: column; align-items: flex-start; gap: 16px; background: #FFFFFF; border-radius: 16px; padding: 20px 24px; box-shadow: 0 2px 16px rgba(69,48,63,.10); }
  .ps-hero, .ps-kaart-groot, .ps-leeg, .ps-kikimae, .ps-opl-lijf { grid-template-columns: 1fr; }
  .ps-kikimae-rechts { grid-template-columns: 1fr; }
  .ps-kikimae-rechts > .ps-beeld { order: 0; }
  .ps-hero { gap: 36px; padding: 40px 20px 48px; }
  .ps-hero h1 { font-size: 38px; }
  .ps-beeld-hero { height: 320px; }
  .ps-kengetallen { flex-wrap: wrap; }
  .ps-lopend { padding: 0 20px 32px; }
  .ps-lopend-regel { flex-wrap: wrap; border-radius: 20px; padding: 14px 16px 14px 18px; }
  .ps-lopend-regel turbo-frame { margin-left: 19px; }
  .ps-cursussen { padding: 56px 20px; }
  .ps-sectiekop { flex-direction: column; align-items: flex-start; gap: 14px; }
  .ps-h2 { font-size: 32px; }
  .ps-kaart-links, .ps-kaart-rechts { padding: 28px 24px; }
  .ps-kaart-groot .ps-kaart-titel { font-size: 30px; }
  .ps-kaarten-klein, .ps-kaarten-klein-3 { grid-template-columns: 1fr; }
  .ps-leeg { padding: 32px 24px; gap: 24px; }
  .ps-sectie { padding: 56px 20px; }
  .ps-zo { grid-template-columns: 1fr 1fr; gap: 28px 16px; }
  .ps-zo-kolom .ps-beeld { height: 140px; }
  .ps-ervaringen { grid-template-columns: 1fr; }
  .ps-kikimae-wrap { padding: 0 20px 56px; }
  .ps-kikimae .ps-beeld { height: 280px; }
  .ps-kikimae-tekst { padding: 32px 24px; }
  .ps-voet { flex-direction: column; align-items: flex-start; padding: 32px 20px; }
  .ps-opl-hero { margin: 24px 20px 0; }
  .ps-pagina { padding: 48px 0 56px; }
  .ps-pagina > * { margin-inline: 20px; }
  .ps-pagina > .ps-cursussen, .ps-pagina > .ps-lopend, .ps-pagina > .ps-hero, .ps-pagina > .ps-kikimae-wrap { margin-inline: 0; }
  .ps-pagina > .ps-hero h2 { font-size: 34px; }
  .ps-pagina h1 { font-size: 32px; }
  .ps-opl-lijf { gap: 48px; padding: 48px 20px 56px; }
  .ps-opl-ervaringen { padding: 0 20px 56px; }
  .ps-opl-links { gap: 36px; }
  .ps-opl-uitkomsten, .ps-opl-vragen { padding: 0 20px 56px; }
  .ps-uitkomsten { grid-template-columns: 1fr; }
  .ps-uitkomst { padding: 24px; }
  .ps-opl-slot { grid-template-columns: 1fr; margin: 0 20px 56px; }
  .ps-slot-prijs, .ps-slot-actie { padding: 28px 24px; }
  .ps-slot-bedrag, .ps-slot-kop { font-size: 28px; }
}

@media (max-width: 520px) {
  .ps-lockup-streep, .ps-lockup-door { display: none; }
  .ps-zo { grid-template-columns: 1fr; }
  .ps-feiten { grid-template-columns: 1fr 1fr; gap: 18px 20px; }
}

/*
 * Het beheer Publieke site (ticket 005): de pagina verkleind in het beheer,
 * randen en labels om wat te bewerken is, een lade rechts. Alleen desktop.
 */
.psb { padding: 8px clamp(20px, 3vw, 40px) 90px; min-width: 0; }
.psb-balk { position: sticky; top: 0; z-index: 20; display: flex; gap: 12px 14px; align-items: center; flex-wrap: wrap; padding: 12px 0; background: var(--surface-page); border-bottom: 1px solid var(--border-subtle); }
.psb-balk h1 { font-size: 22px; margin: 0 8px 0 0; }
.psb-paginas { display: flex; gap: 4px; flex-wrap: wrap; background: #FFFFFF; border: 1px solid var(--border-subtle); border-radius: 999px; padding: 4px; }
.psb-paginas a { padding: 6px 14px; border-radius: 999px; font-size: 14px; color: var(--text-heading); text-decoration: none; }
.psb-paginas a.is-actief { background: var(--km-aubergine); color: #FFF7EF; font-weight: 600; }
.psb-paginas a.is-uit { color: var(--text-muted); font-style: italic; }
.psb-schakel { margin-left: auto; display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; }
.psb-los { font-size: 14px; }
.psb-tip, .psb-melding { font-size: 14px; color: var(--text-muted); margin: 10px 0; }
.psb-melding { color: var(--km-klei-deep); font-weight: 600; }
.psb-doek { background: #E7DFD3; border-radius: 16px; padding: 20px; overflow: hidden; max-width: 100%; }
.psb-schaal { width: 1280px; box-shadow: 0 2px 16px rgba(69,48,63,.10); }
.psb-schaal .ps { max-width: none; }

/* de bewerkstand: wat te bewerken is krijgt een rand en een label */
.psb-doek:not(.als-bezoeker) [data-blok] { position: relative; outline: 2px dashed transparent; outline-offset: 6px; border-radius: 12px; cursor: pointer; transition: outline-color .15s; }
.psb-doek:not(.als-bezoeker) [data-blok]:hover, .psb-doek:not(.als-bezoeker) [data-blok].is-actief { outline-color: #A9603F; }
.psb-doek:not(.als-bezoeker) [data-blok]::after { content: '✎ ' attr(data-label); position: absolute; top: -32px; right: 0; background: #A9603F; color: #FFF7EF; font: 600 13px var(--font-body); padding: 4px 12px; border-radius: 999px; opacity: 0; transition: opacity .15s; pointer-events: none; white-space: nowrap; z-index: 3; }
.psb-doek:not(.als-bezoeker) [data-blok][data-bron="klassen"]::after { content: '✎ ' attr(data-label) ' · deels uit de klas'; background: #45303F; }
.psb-doek:not(.als-bezoeker) [data-blok="lopend"]::after { content: 'uit de klassen · niets te bewerken'; background: #8A7580; }
.psb-doek:not(.als-bezoeker) [data-blok]:hover::after, .psb-doek:not(.als-bezoeker) [data-blok].is-actief::after { opacity: 1; }
.psb-doek:not(.als-bezoeker) [data-vast] { position: relative; }
.psb-doek:not(.als-bezoeker) [data-vast]::before { content: 'vast in de repo'; position: absolute; top: 12px; left: 12px; background: rgba(69,48,63,.75); color: #FFFFFF; font: 600 11px var(--font-body); padding: 3px 10px; border-radius: 999px; z-index: 1; }
.psb-doek:not(.als-bezoeker) [data-verborgen] { opacity: .45; }
.psb-doek:not(.als-bezoeker) .ps-ervaring[data-verborgen]::before { content: attr(data-verborgen); position: absolute; top: -11px; left: 20px; background: #45303F; color: #FFF7EF; font: 600 11px var(--font-body); border-radius: 999px; padding: 3px 10px; opacity: 1; }
.psb-doek:not(.als-bezoeker) .ps-leeg-blok { color: #8A7580; font-style: italic; font-size: 14px; }
.psb-doek.als-bezoeker [data-verborgen], .psb-doek.als-bezoeker .ps-leeg-blok { display: none; }

/* de lade */
.psb-lade { position: fixed; top: 0; right: 0; bottom: 0; width: min(460px, 100vw); background: #FFFFFF; box-shadow: -12px 0 40px rgba(69,48,63,.18); z-index: 70; transform: translateX(100%); transition: transform .2s; display: flex; flex-direction: column; }
.psb-lade.is-open { transform: none; }
.psb-lade-kop { display: flex; gap: 12px; align-items: center; padding: 16px 22px; border-bottom: 1px solid var(--border-subtle); }
.psb-lade-kop h2 { margin: 0; font-size: 20px; flex: 1; }
.psb-status { font-size: 13px; color: #5F7A5A; }
.psb-sluit { border: 0; background: none; font-size: 26px; line-height: 1; cursor: pointer; color: var(--text-muted); }
.psb-lade-body { padding: 18px 22px 80px; overflow-y: auto; }
.psb-lade-body > [data-voor] { display: none; }
.psb-lade-body > [data-voor].is-actief { display: flex; flex-direction: column; gap: 16px; }
.psb-lade-body p { margin: 0; font-size: 14.5px; line-height: 1.55; }
.psb-form { display: flex; flex-direction: column; gap: 12px; }
.psb-veld { display: flex; flex-direction: column; gap: 5px; font-size: 14px; min-width: 0; }
.psb-veld > span:first-child { font-weight: 600; color: var(--text-heading); }
.psb-veld small, .psb-lade-body small { color: var(--text-muted); font-size: 12.5px; }
.psb-fout, .psb-fout:empty { color: #A33A2A; font-size: 12.5px; margin: 0; }
.psb-twee { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.psb-rij, .psb-form.psb-rij { display: flex; flex-direction: row; gap: 10px; align-items: flex-end; }
.psb-item > .psb-form { flex: 1; min-width: 0; }
.psb-rij .psb-veld { flex: 1; min-width: 0; }
.psb-rij .psb-smal { flex: 0 0 90px; }
.psb-nieuw .btn { flex: none; width: auto; white-space: nowrap; }
.psb-kop { font-size: 16px; margin: 8px 0 0; padding-top: 12px; border-top: 1px solid var(--border-subtle); }
.psb-aan { display: flex; gap: 8px; align-items: center; font-weight: 600; font-size: 15px; }
.psb-vast { margin: 0; font-family: var(--font-mono); font-size: 13px; }
.psb-tinten { display: flex; gap: 10px; }
.psb-tint { width: 36px; height: 36px; border-radius: 999px; border: 2px solid transparent; cursor: pointer; }
.psb-tint:has(input:checked) { border-color: #45303F; }
.psb-tint input { opacity: 0; width: 0; height: 0; }
.psb-klas { background: var(--surface-page); border-radius: 12px; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; font-size: 14.5px; margin: 0; }
.psb-vinkjes { display: flex; gap: 20px; font-size: 14.5px; }
.psb-vinkjes label, .psb-vinkjes span { display: flex; gap: 6px; align-items: center; }
.psb-lijst { display: flex; flex-direction: column; gap: 10px; }
.psb-item { display: flex; gap: 10px; align-items: flex-start; border: 1px solid var(--border-subtle); border-radius: 12px; padding: 10px 12px; background: #FFFFFF; }
details.psb-item { display: block; }
details.psb-item[open] > summary { margin-bottom: 12px; }
details.psb-item > form + form { margin-top: 12px; }
.psb-item summary { cursor: pointer; font-size: 14.5px; }
.psb-item.is-gesleept { opacity: .5; }
.psb-greep { cursor: grab; color: var(--text-muted); user-select: none; padding: 26px 2px 0; }
summary .psb-greep { padding: 0 4px 0 0; }
.psb-reden { font-size: 12px; background: var(--km-zand); border-radius: 999px; padding: 2px 8px; color: var(--text-heading); }
.psb-weg { border: 0; background: none; font-size: 22px; color: var(--text-muted); cursor: pointer; padding: 22px 2px 0; }
.psb-weg-tekst { border: 0; background: none; color: #A33A2A; cursor: pointer; font: inherit; font-size: 13.5px; padding: 0; }
.psb-nieuw { display: flex; flex-direction: column; gap: 10px; border-top: 1px solid var(--border-subtle); padding-top: 14px; }
.psb-nieuw.psb-rij { flex-direction: row; align-items: flex-end; }
.psb-upload { display: flex; gap: 12px; align-items: center; }
.psb-avatar { width: 52px; height: 52px; }
.psb-avatar img, .ps-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.psb-logo { width: 110px; height: 40px; border: 1px dashed var(--border-strong); border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 12px; color: var(--text-muted); flex: none; overflow: hidden; }
.psb-logo img { max-width: 100%; max-height: 100%; }