/* zie commentaar.php #1 */

/* zie commentaar.php #2 */
:root {
    /* zie commentaar.php #3 */
    --merk-1: #111111;
    --merk-2: #5f5f5f;
    --merk-3: #000000;
    --merk-4: #ffffff;
    --merk-5: #111111;
    --merk-tekst: #5f5f5f;
    --merk-font-koppen: 'Space Grotesk';
    --merk-font-tekst:  'Outfit';

    /* zie commentaar.php #216 */
    --fs-mini:      12px;
    --fs-klein:     14px;
    --fs-knop:      13px;
    --fs-basis:     16px;
    --fs-tekst:     clamp(17px, 1.6vw, 20px);
    --fs-kop-klein: clamp(20px, 2.2vw, 26px);
    --fs-kop:       clamp(26px, 3.2vw, 44px);

    --text:   var(--merk-titel-tekst, var(--merk-1));
    --muted:  var(--merk-tekst);
    --line:   color-mix(in srgb, var(--merk-3) 12%, transparent);
    /* zie commentaar.php #4 */
    --white:  var(--sectie-kleur-1, #ffffff);
    --radius: 24px;
}

/* zie commentaar.php #5 */
body.hoeken-vierkant {
    --radius: 0px;
}

/* zie commentaar.php #6 */
* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    overflow-x: hidden;
}

body {
    margin: 0;
    min-height: 100%;
    max-width: 100vw;
    overflow-x: hidden;
    color: var(--merk-tekst, var(--text));
    font-family: var(--merk-font-tekst), "Outfit", "Space Grotesk", Arial, sans-serif;
    font-size: var(--fs-basis);
    line-height: 1.6;
}

/* zie commentaar.php #7 */
.onepage-sectie {
    scroll-margin-top: 96px;
}

.onepage-sectie + .onepage-sectie {
    margin-top: 64px;
}

body.scheiding-gradient .onepage-sectie + .onepage-sectie,
body.scheiding-stippellijn .onepage-sectie + .onepage-sectie,
body.scheiding-effen .onepage-sectie + .onepage-sectie {
    position: relative;
    padding-top: 48px;
}
body.scheiding-stippellijn .onepage-sectie + .onepage-sectie::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 5px;
    background-image: repeating-linear-gradient(to right, var(--merk-stippellijn, #111111) 0 20px, transparent 20px 32px);
}
body.scheiding-gradient .onepage-sectie + .onepage-sectie::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 5px;
    background: linear-gradient(90deg, var(--merk-2), var(--merk-3));
}
body.scheiding-effen .onepage-sectie + .onepage-sectie::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 5px;
    background: var(--merk-stippellijn, #111111);
}

/* zie commentaar.php #8 */
body.onepage-mode .onepage-sectie {
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-sizing: border-box;
    padding: 64px clamp(20px, 5vw, 76px);
    background: transparent;
    border-radius: 0;
}

body.onepage-mode .onepage-sectie--logo {
    min-height: 100vh;
    min-height: 100dvh;
    padding-top: 96px;
}

/* zie commentaar.php #9 */
body.onepage-mode #sectie-bio {
    border-radius: var(--radius) var(--radius) 0 0;
}

body.onepage-mode .onepage-sectie--laatste {
    border-radius: 0 0 var(--radius) var(--radius);
}

body.onepage-mode #sectie-bio.onepage-sectie--laatste {
    border-radius: var(--radius);
}

body.onepage-mode.hoeken-vierkant #sectie-bio,
body.onepage-mode.hoeken-vierkant .onepage-sectie--laatste {
    border-radius: 0;
}

/* zie commentaar.php #10 */
body.onepage-mode.rand-schaduw .onepage-sectie:not(.onepage-sectie--logo) {
    box-shadow: 10px 10px 0 0 var(--merk-4);
}

body.onepage-mode .onepage-sectie[data-sectiekleur="1"] {
    background: var(--sectie-kleur-1, #ffffff) !important;
}
body.onepage-mode .onepage-sectie[data-sectiekleur="2"] {
    background: var(--sectie-kleur-2, #e8eaed) !important;
}
body.onepage-mode .onepage-sectie[data-sectiekleur="3"] {
    background: var(--sectie-kleur-3, #d3d7dc) !important;
}
/* zie commentaar.php #11 */
body.onepage-mode.sectiebg-transparant .onepage-sectie[data-sectiekleur] {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    clip-path: none !important;
}

/* zie commentaar.php #12 */
body.onepage-mode #content {
    background: none;
    border: none;
    box-shadow: none;
    backdrop-filter: none;
    border-radius: 0;
}

body.onepage-mode .onepage-sectie--logo {
    position: relative;
    align-items: center;
    text-align: center;
}

.onepage-scroll-hint {
    position: absolute;
    left: 50%;
    bottom: 34px;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 999px;
    border: 2px solid rgba(0, 0, 0, .12);
    color: var(--merk-tekst, #111);
    opacity: .9;
    text-decoration: none !important;
    background: #fff !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .16);
    animation: kt-scroll-hint-bob 1.8s ease-in-out infinite;
}

.onepage-scroll-hint svg {
    width: 20px;
    height: 20px;
}

.onepage-scroll-hint:hover {
    opacity: 1;
}

@keyframes kt-scroll-hint-bob {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50%      { transform: translateX(-50%) translateY(8px); }
}

@media (prefers-reduced-motion: reduce) {
    .onepage-scroll-hint {
        animation: none;
    }
}

body.onepage-mode .onepage-sectie + .onepage-sectie {
    margin-top: 0;
}

/* zie commentaar.php #13 */
#wrapper {
    width: min(100% - 32px, 1680px);
    margin: 0 auto;
    padding: 28px 0 60px;
}

@media (min-width: 761px) {
    #wrapper {
        padding-top: 92px;
    }
}

body.onepage-mode #wrapper {
    padding: 0;
}

/* zie commentaar.php #14 */

/* zie commentaar.php #15 */
.kt-band-titel {
    position: relative;
}

.full-bleed-band,
.kt-band-foto,
.kt-band-donker,
.kt-band-foto-img {
    background: transparent;
}

#logo {
    padding: 28px 0 22px;
    text-align: center;
}

#logo-klein {
    position: fixed;
    top: 16px;
    left: 16px;
    z-index: 1050;
    display: block;
    line-height: 0;
}
#logo-klein img {
    display: block;
    height: 44px;
    width: auto;
    max-width: 160px;
    object-fit: contain;
    transition: opacity .2s ease;
}
#logo-klein:hover img {
    opacity: .8;
}

/* zie commentaar.php #225 */
#logo-midden {
    padding: 8px 0 26px;
    text-align: center;
    line-height: 0;
}
#logo-midden img {
    display: inline-block;
    max-width: min(420px, 70vw);
    max-height: 190px;
    width: auto;
    height: auto;
    animation: kt-logo-intro .9s cubic-bezier(.2, .8, .3, 1) both;
}
.kt-band-foto-img:has(.hero-logo-laag) {
    position: relative;
}
.hero-logo-laag {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 40px;
    left: 0;
    display: flex;
    align-items: center;
    padding-left: 5%;
    pointer-events: none;
    z-index: 2;
}
.hero-logo-laag--rechts {
    justify-content: flex-end;
    padding-left: 0;
    padding-right: 5%;
}
.hero-logo-laag .hero-logo {
    display: block;
    width: auto;
    height: auto;
    max-width: min(32%, 440px);
    max-height: 52%;
    rotate: -7deg;
    filter: drop-shadow(0 10px 28px rgba(0, 0, 0, .45));
    animation: kt-logo-intro .9s cubic-bezier(.2, .8, .3, 1) .2s both;
}
@media (max-width: 760px) {
    #logo-midden {
        padding: 0 0 18px;
    }
    #logo-midden img {
        max-width: 78vw;
        max-height: 150px;
    }
    .hero-logo-laag .hero-logo {
        max-width: 54%;
        max-height: 46%;
    }
}
.hero-logo-laag--rechts .hero-logo {
    rotate: 7deg;
}
@media (prefers-reduced-motion: reduce) {
    #logo-midden img,
    .hero-logo-laag .hero-logo {
        animation: none;
    }
}

/* zie commentaar.php #228 */
body.logo-kleur-wit .logo,
body.logo-kleur-wit #logo-midden img,
body.logo-kleur-wit #logo-klein img {
    filter: brightness(0) invert(1);
}
body.logo-kleur-omgekeerd .logo,
body.logo-kleur-omgekeerd #logo-midden img,
body.logo-kleur-omgekeerd #logo-klein img {
    filter: invert(1);
}
body.logo-kleur-wit .hero-logo-laag .hero-logo,
body.logo-kleur-wit-slideshow .hero-logo-laag .hero-logo {
    filter: brightness(0) invert(1) drop-shadow(0 10px 28px rgba(0, 0, 0, .45));
}
body.logo-kleur-omgekeerd .hero-logo-laag .hero-logo {
    filter: invert(1) drop-shadow(0 10px 28px rgba(0, 0, 0, .45));
}

.logo {
    display: block;
    max-width: min(510px, 70vw);
    max-height: 285px;
    width: auto;
    height: auto;
    margin: 0 auto;
}

@media (min-width: 761px) {
    .logo {
        max-height: 420px;
        max-width: min(840px, 60vw);
        animation: kt-logo-intro .9s cubic-bezier(.2, .8, .3, 1) both,
                   kt-logo-zweven 6s ease-in-out .9s infinite;
    }
}

@keyframes kt-logo-zweven {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-10px); }
}

@keyframes kt-logo-intro {
    from { opacity: 0; transform: translateY(-18px) scale(.92); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .logo {
        animation: none !important;
    }
}

/* zie commentaar.php #16 */
nav.main-menu {
    position: fixed;
    top: 16px;
    left: 0;
    right: 0;
    z-index: 999;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    width: fit-content;
    max-width: calc(100% - 24px);
    margin: 0 auto;
    padding: 8px;
}

/* zie commentaar.php #17 */
body.hoeken-vierkant nav.main-menu {
    border-radius: 0;
}
#menu a.linkmenu {
    background: var(--merk-chip-bg, #111);
    color: var(--merk-chip-tekst, #fff);
    border: 1px solid rgba(0, 0, 0, .12);
    text-decoration: none;
    padding: 11px 17px;
    border-radius: 999px;
    font-size: var(--fs-knop);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .1em;
    transition: background .2s ease, color .2s ease, transform .2s ease;
}

body.hoeken-vierkant #menu a.linkmenu {
    border-radius: 0;
}


/* zie commentaar.php #18 */
body.menu-stijl-balk nav.main-menu {
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 16px 20px;
    border-radius: 0;
    border: none;
    background: var(--white);
}
body.menu-stijl-balk.scheiding-gradient nav.main-menu {
    border-bottom: 4px solid transparent;
    border-image: linear-gradient(90deg, var(--merk-2), var(--merk-3)) 1;
}
body.menu-stijl-balk.scheiding-stippellijn nav.main-menu {
    border-bottom: none;
    background-image: repeating-linear-gradient(to right, var(--merk-stippellijn, #111111) 0 20px, transparent 20px 32px);
    background-position: bottom;
    background-size: 100% 4px;
    background-repeat: no-repeat;
}
body.menu-stijl-balk.scheiding-effen nav.main-menu {
    border-bottom: 4px solid var(--merk-stippellijn, #111111);
}

body.menu-stijl-balk #menu a.linkmenu {
    border-radius: 8px;
}

body.menu-stijl-balk.hoeken-vierkant #menu a.linkmenu {
    border-radius: 0;
}

/* zie commentaar.php #19 */
.menu-toggle {
    display: none; /* zie commentaar.php #20 */
    position: fixed;
    top: 14px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1100;
    height: 44px;
    padding: 0 24px;
    background: var(--merk-chip-bg, #111111);
    border: 1px solid rgba(0, 0, 0, .12);
    border-radius: 999px;
    cursor: pointer;
    font-family: var(--merk-font-tekst), "Outfit", "Space Grotesk", Arial, sans-serif;
    font-size: var(--fs-knop);
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--merk-chip-tekst, #ffffff);
    white-space: nowrap;
    line-height: 44px;
    text-align: center;
    vertical-align: middle;
}
body.rand-schaduw .menu-toggle { box-shadow: 4px 4px 0 0 var(--merk-4); }
body.rand-dik .menu-toggle,
body.rand-gescheurd .menu-toggle { border: 2px solid var(--merk-metal-rand, #ffffff) !important; }
body.rand-gescheurd .menu-toggle {
    clip-path: polygon(0.0% 0px, 25.0% 3px, 50.0% 3px, 75.0% 3px, 100.0% 0px, calc(100% - 1px) 25.0%, calc(100% - 1px) 50.0%, calc(100% - 3px) 75.0%, calc(100% - 0px) 100.0%, 75.0% calc(100% - 1px), 50.0% calc(100% - 0px), 25.0% calc(100% - 3px), 0.0% calc(100% - 0px), 2px 75.0%, 1px 50.0%, 0px 25.0%, 0px 0.0%);
}
body.schuin-chips-aan .menu-toggle { transform: translateX(-50%) rotate(-1.4deg); }

body.hoeken-vierkant .menu-toggle {
    border-radius: 0;
}

/* zie commentaar.php #21 */
.menu-toggle-hamburger { display: none; }

/* zie commentaar.php #22 */
body.menu-positie-rechtsboven .menu-toggle {
    left: auto;
    right: 16px;
    top: 16px;
    transform: none;
    width: 46px;
    height: 46px;
    padding: 0;
    border-radius: 50%;
    display: none; /* zie commentaar.php #23 */
}
body.menu-positie-rechtsboven.hoeken-vierkant .menu-toggle {
    border-radius: 0;
}
body.menu-positie-rechtsboven.schuin-chips-aan .menu-toggle {
    transform: rotate(-1.4deg);
}
body.menu-positie-rechtsboven .menu-toggle-tekst {
    display: none;
}
body.menu-positie-rechtsboven .menu-toggle-hamburger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 20px;
    margin: 0 auto;
    position: relative;
}
body.menu-positie-rechtsboven .menu-toggle-hamburger span {
    display: block;
    width: 100%;
    height: 2px;
    background: var(--merk-chip-tekst, #ffffff);
    border-radius: 2px;
    transition: transform .22s ease, opacity .22s ease;
}
body.menu-positie-rechtsboven.hoeken-vierkant .menu-toggle-hamburger span {
    border-radius: 0;
}
/* zie commentaar.php #24 */
body.menu-positie-rechtsboven .menu-toggle.is-open .menu-toggle-hamburger span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}
body.menu-positie-rechtsboven .menu-toggle.is-open .menu-toggle-hamburger span:nth-child(2) {
    opacity: 0;
}
body.menu-positie-rechtsboven .menu-toggle.is-open .menu-toggle-hamburger span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* zie commentaar.php #25 */

/* zie commentaar.php #26 */
/* zie commentaar.php #27 */
#content {
    width: 100%;
    margin: 0 auto;
    padding: clamp(28px, 5vw, 76px);
    background: var(--white);
    color: var(--merk-tekst);
    border: 1px solid rgba(255, 255, 255, .72);
    border-radius: var(--radius);
    backdrop-filter: blur(18px);
    box-shadow: 0 34px 120px rgba(0, 0, 0, .16);
}

body.hoeken-vierkant #content {
    border-radius: 0;
}

/* zie commentaar.php #28 */
.kt-page-icon {
    position: absolute;
    bottom: -34px;
    right: -6px;
    top: auto;
    width: 96px;
    height: 96px;
    max-width: 96px;
    max-height: 96px;
    object-fit: contain;
    margin: 0;
    pointer-events: none;
    z-index: 5;
    transform: rotate(-9deg);
}

.kt-icon-contact,
.kt-icon-socials {
    transform: rotate(8deg);
}

@media (min-width: 761px) {
    .kt-page-icon {
        bottom: -50px;
        top: auto;
        right: -14px;
        width: 130px;
        height: 130px;
        max-width: 130px;
        max-height: 130px;
    }
}

.kt-page-icon.kt-in-view {
    animation: kt-icon-wieg 5s ease-in-out .85s infinite;
}

@keyframes kt-icon-wieg {
    0%, 100% { transform: translateY(0) rotate(-9deg); }
    50%      { transform: translateY(-12px) rotate(-4deg); }
}
.kt-icon-contact.kt-in-view,
.kt-icon-socials.kt-in-view {
    animation-name: kt-icon-wieg-om;
}
@keyframes kt-icon-wieg-om {
    0%, 100% { transform: translateY(0) rotate(8deg); }
    50%      { transform: translateY(-12px) rotate(4deg); }
}

@media (prefers-reduced-motion: reduce) {
    .kt-page-icon.kt-in-view {
        animation: none;
    }
}

/* zie commentaar.php #29 */
h1 {
    margin: 0 0 34px;
    padding-bottom: 26px;
    color: var(--merk-titel-tekst, #111111);
    font-family: var(--merk-font-koppen), "Space Grotesk", Arial, sans-serif;
    font-size: clamp(48px, 9vw, 132px);
    line-height: .86;
    letter-spacing: -.075em;
    text-transform: uppercase;
}

/* zie commentaar.php #30 */
body.titelblok-aan h1 {
    display: inline-block;
    width: fit-content;
    background: var(--merk-1, #111111);
    color: var(--merk-titel-tekst, #ffffff);
    padding: 10px 28px;
    margin: 0 0 24px;
    border: none;
    border-bottom: none;
    text-shadow: none;
}
body.titelblok-aan.rand-gescheurd h1,
body.titelblok-aan.rand-gescheurd h2,
body.titelblok-aan.rand-gescheurd h3,
body.titelblok-aan.rand-gescheurd .contact-section-title {
    border: 2px solid var(--merk-metal-rand, #ffffff);
    clip-path: polygon(0.0% 0px, 25.0% 3px, 50.0% 3px, 75.0% 3px, 100.0% 0px, calc(100% - 1px) 25.0%, calc(100% - 1px) 50.0%, calc(100% - 3px) 75.0%, calc(100% - 0px) 100.0%, 75.0% calc(100% - 1px), 50.0% calc(100% - 0px), 25.0% calc(100% - 3px), 0.0% calc(100% - 0px), 2px 75.0%, 1px 50.0%, 0px 25.0%, 0px 0.0%);
}
body.titelblok-aan.rand-dik h1,
body.titelblok-aan.rand-dik h2,
body.titelblok-aan.rand-dik h3,
body.titelblok-aan.rand-dik .contact-section-title {
    border: 2px solid var(--merk-metal-rand, #ffffff);
}
body.titelblok-aan.rand-schaduw h1 {
    box-shadow: 6px 6px 0 0 var(--merk-4);
}
body.titelblok-aan.schuin-titel-aan h1 {
    transform: rotate(-2deg);
}

/* zie commentaar.php #31 */
body.titelblok-aan h2,
body.titelblok-aan h3,
body.titelblok-aan .contact-section-title {
    display: inline-block;
    width: fit-content;
    max-width: 100%;
    height: auto;
    max-height: none;
    align-self: start;
    justify-self: start;
    background: var(--merk-1, #111111);
    color: var(--merk-h2-tekst, #ffffff);
    padding: 8px 18px;
    margin: 0 0 16px;
    border: none;
    border-radius: 0;
    text-shadow: none;
}
body.titelblok-aan h3,
body.titelblok-aan .contact-section-title {
    color: var(--merk-h3-tekst, #ffffff);
    padding: 6px 16px;
}
body.titelblok-aan.rand-schaduw h2,
body.titelblok-aan.rand-schaduw h3,
body.titelblok-aan.rand-schaduw .contact-section-title {
    box-shadow: 4px 4px 0 0 var(--merk-4);
}
body.titelblok-aan.schuin-titel-aan h2,
body.titelblok-aan.schuin-titel-aan h3,
body.titelblok-aan.schuin-titel-aan .contact-section-title {
    transform: rotate(-2.5deg);
}

/* zie commentaar.php #32 */
body.rand-gescheurd .work-card,
body.rand-gescheurd .press-card,
body.rand-gescheurd .diensten-card,
body.rand-gescheurd .shows-item--komend,
body.rand-gescheurd .contact-subblock,
body.rand-gescheurd .about-intro,
body.rand-gescheurd .about-tile,
body.rand-gescheurd .shop-product,
body.rand-gescheurd .music-card,
body.rand-gescheurd .admin-form-card,
body.rand-gescheurd .mandje-regel {
    border: 3px solid var(--merk-metal-rand, #111111) !important;
    box-shadow: none !important;
    clip-path: polygon(0.0% 0px, 16.7% 2px, 33.3% 1px, 50.0% 3px, 66.7% 5px, 83.3% 0px, 100.0% 0px, calc(100% - 0px) 16.7%, calc(100% - 6px) 33.3%, calc(100% - 4px) 50.0%, calc(100% - 0px) 66.7%, calc(100% - 2px) 83.3%, calc(100% - 0px) 100.0%, 83.3% calc(100% - 4px), 66.7% calc(100% - 0px), 50.0% calc(100% - 4px), 33.3% calc(100% - 1px), 16.7% calc(100% - 0px), 0.0% calc(100% - 0px), 0px 83.3%, 3px 66.7%, 3px 50.0%, 0px 33.3%, 1px 16.7%, 0px 0.0%);
}
body.rand-dik .work-card,
body.rand-dik .press-card,
body.rand-dik .diensten-card,
body.rand-dik .shows-item--komend,
body.rand-dik .contact-subblock,
body.rand-dik .about-intro,
body.rand-dik .about-tile,
body.rand-dik .shop-product,
body.rand-dik .music-card,
body.rand-dik .admin-form-card,
body.rand-dik .mandje-regel {
    border: 3px solid var(--merk-metal-rand, #111111) !important;
    box-shadow: none !important;
}

/* zie commentaar.php #33 */
body.tekstblokbg-transparant .work-card,
body.tekstblokbg-transparant .press-card,
body.tekstblokbg-transparant .diensten-card,
body.tekstblokbg-transparant .shows-item--komend,
body.tekstblokbg-transparant .contact-subblock,
body.tekstblokbg-transparant .about-intro,
body.tekstblokbg-transparant .about-tile,
body.tekstblokbg-transparant .shop-product,
body.tekstblokbg-transparant .music-card,
body.tekstblokbg-transparant .admin-form-card,
body.tekstblokbg-transparant .mandje-regel {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    clip-path: none !important;
}

body.rand-gescheurd .diensten-cta,
body.rand-gescheurd .work-button,
body.rand-gescheurd .cv-export-btn,
body.rand-gescheurd .press-card a,
body.rand-gescheurd #content a.about-export-btn,
body.rand-gescheurd #content a.shows-video-link,
body.rand-gescheurd .presave-link,
body.rand-gescheurd .shop-koop-knop,
body.rand-gescheurd #menu a.linkmenu,
body.rand-gescheurd .admin-tab,
body.rand-gescheurd .admin-artist-btn,
body.rand-gescheurd .af-btn-save,
body.rand-gescheurd .af-btn-cancel,
body.rand-gescheurd .af-btn-danger,
body.rand-gescheurd .al-btn-edit,
body.rand-gescheurd .al-btn-delete,
body.rand-gescheurd .contact-links a,
body.rand-gescheurd .locatie-maps-link,
body.rand-gescheurd .extra-bron-chip,
body.rand-gescheurd .shop-mandje-link a,
body.rand-gescheurd input[type="submit"] {
    border: 2px solid var(--merk-metal-rand, #ffffff) !important;
    box-shadow: none !important;
    clip-path: polygon(0.0% 0px, 25.0% 3px, 50.0% 3px, 75.0% 3px, 100.0% 0px, calc(100% - 1px) 25.0%, calc(100% - 1px) 50.0%, calc(100% - 3px) 75.0%, calc(100% - 0px) 100.0%, 75.0% calc(100% - 1px), 50.0% calc(100% - 0px), 25.0% calc(100% - 3px), 0.0% calc(100% - 0px), 2px 75.0%, 1px 50.0%, 0px 25.0%, 0px 0.0%);
}

body.rand-dik .diensten-cta,
body.rand-dik .work-button,
body.rand-dik .cv-export-btn,
body.rand-dik .press-card a,
body.rand-dik #content a.about-export-btn,
body.rand-dik #content a.shows-video-link,
body.rand-dik .presave-link,
body.rand-dik .shop-koop-knop,
body.rand-dik #menu a.linkmenu,
body.rand-dik .admin-tab,
body.rand-dik .admin-artist-btn,
body.rand-dik .af-btn-save,
body.rand-dik .af-btn-cancel,
body.rand-dik .af-btn-danger,
body.rand-dik .al-btn-edit,
body.rand-dik .al-btn-delete,
body.rand-dik .contact-links a,
body.rand-dik .locatie-maps-link,
body.rand-dik .extra-bron-chip,
body.rand-dik .shop-mandje-link a,
body.rand-dik input[type="submit"] {
    border: 2px solid var(--merk-metal-rand, #ffffff) !important;
    box-shadow: none !important;
}

/* zie commentaar.php #34 */
body.onepage-mode.rand-gescheurd .onepage-sectie:not(.onepage-sectie--logo) {
    border: 3px solid var(--merk-tekst, #111111);
    clip-path: polygon(0.0% 0px, 10.0% 4px, 20.0% 1px, 30.0% 0px, 40.0% 4px, 50.0% 6px, 60.0% 6px, 70.0% 5px, 80.0% 2px, 90.0% 3px, 100.0% 0px, calc(100% - 4px) 10.0%, calc(100% - 7px) 20.0%, calc(100% - 0px) 30.0%, calc(100% - 3px) 40.0%, calc(100% - 7px) 50.0%, calc(100% - 0px) 60.0%, calc(100% - 1px) 70.0%, calc(100% - 1px) 80.0%, calc(100% - 7px) 90.0%, calc(100% - 0px) 100.0%, 90.0% calc(100% - 6px), 80.0% calc(100% - 0px), 70.0% calc(100% - 6px), 60.0% calc(100% - 5px), 50.0% calc(100% - 0px), 40.0% calc(100% - 3px), 30.0% calc(100% - 0px), 20.0% calc(100% - 5px), 10.0% calc(100% - 2px), 0.0% calc(100% - 0px), 3px 90.0%, 5px 80.0%, 5px 70.0%, 4px 60.0%, 5px 50.0%, 1px 40.0%, 7px 30.0%, 2px 20.0%, 7px 10.0%, 0px 0.0%);
}

/* zie commentaar.php #35 */
body.menu-stijl-balk.rand-gescheurd nav.main-menu {
    border-bottom: 5px solid var(--merk-metal-rand, #111111) !important;
    border-image: none !important;
}

body.titelblok-aan.schuin-titel-aan .music-card:nth-child(even) h2,
body.titelblok-aan.schuin-titel-aan .press-card:nth-child(even) h2,
body.titelblok-aan.schuin-titel-aan .diensten-card:nth-child(even) h3,
body.titelblok-aan.schuin-titel-aan .contact-subblock:nth-of-type(even) .contact-section-title {
    transform: rotate(1.6deg);
}

h2 {
    margin: 58px 0 24px;
    color: var(--merk-h2-tekst, #111111);
    font-family: var(--merk-font-koppen), "Space Grotesk", Arial, sans-serif;
    font-size: clamp(32px, 5.6vw, 78px);
    line-height: .92;
    letter-spacing: -.055em;
    text-transform: uppercase;
}

/* zie commentaar.php #36 */
body.scheiding-gradient:not(.titelblok-aan) h1,
body.scheiding-gradient:not(.titelblok-aan) h2 {
    border-bottom: 12px solid transparent;
    border-image: linear-gradient(90deg, var(--merk-2), var(--merk-3)) 1;
}
body.scheiding-stippellijn:not(.titelblok-aan) h1,
body.scheiding-stippellijn:not(.titelblok-aan) h2 {
    border-bottom: none;
    padding-bottom: 22px;
    background-image: repeating-linear-gradient(to right, var(--merk-stippellijn, #111111) 0 20px, transparent 20px 32px);
    background-position: bottom;
    background-size: 100% 6px;
    background-repeat: no-repeat;
}
body.scheiding-effen:not(.titelblok-aan) h1,
body.scheiding-effen:not(.titelblok-aan) h2 {
    border-bottom: 6px solid var(--merk-stippellijn, #111111);
}

h3 {
    margin: 34px 0 12px;
    color: var(--merk-h3-tekst, #111111);
    font-family: var(--merk-font-koppen), "Space Grotesk", Arial, sans-serif;
    font-size: var(--fs-kop-klein);
    text-transform: uppercase;
    letter-spacing: .03em;
}

p {
    margin: 0 0 21px;
    color: var(--merk-tekst);
    font-size: var(--fs-tekst);
}

b,
strong {
    color: var(--merk-5, #111111);
    font-weight: 900;
}

a {
    color: var(--merk-5, #111111);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-decoration-color: rgba(17, 17, 17, .35);
    text-underline-offset: 5px;
    transition: text-decoration-color .25s ease, text-underline-offset .25s ease;
}

a:hover {
    text-decoration-color: currentColor;
    text-underline-offset: 3px;
}

img {
    max-width: 100%;
    height: auto;
}

/* zie commentaar.php #37 */
.hero-image {
    margin: 0 0 40px;
    background: transparent;
}

.hero-image img {
    display: block;
    width: 100%;
    border-radius: var(--radius);
    object-fit: cover;
    box-shadow: 0 24px 80px rgba(0, 0, 0, .16);
}

/* zie commentaar.php #38 */
.hero-slideshow {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: transparent;
}

.hero-slideshow img {
    display: block;
    width: 100%;
    height: auto;
    animation-name: kt-hero-kenburns;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    transform-origin: center;
}

.hero-slideshow--multi {
    aspect-ratio: 16 / 7;
    background-size: cover;
    background-position: center;
}

@media (max-width: 760px) {
    .hero-slideshow,
    .hero-slideshow--multi {
        aspect-ratio: 1 / 1;
    }
    .hero-slideshow img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }
}

.hero-slideshow--multi img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    animation-name: kt-hero-crossfade, kt-hero-kenburns;
    animation-timing-function: ease-in-out, ease-in-out;
    animation-iteration-count: infinite, infinite;
    animation-fill-mode: backwards, both;
    animation-direction: normal, alternate;
}

@keyframes kt-hero-kenburns {
    from { transform: scale(1); }
    to   { transform: scale(1.08); }
}

@media (prefers-reduced-motion: reduce) {
    .hero-slideshow img,
    .hero-image img {
        animation: none !important;
        transform: none !important;
    }
    .hero-slideshow--multi img:first-child {
        opacity: 1 !important;
    }
}

/* zie commentaar.php #39 */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="url"],
input[type="date"],
input[type="number"],
select,
textarea {
    width: 100%;
    padding: 15px 16px;
    margin-bottom: 14px;
    border: 1px solid rgba(0, 0, 0, .18);
    border-radius: 16px;
    background: #fff;
    color: var(--merk-tekst, #111);
    font: inherit;
    font-size: var(--fs-basis);
    outline: none;
    appearance: none;
    -webkit-appearance: none;
}

body.hoeken-vierkant input[type="text"],
body.hoeken-vierkant input[type="password"],
body.hoeken-vierkant input[type="email"],
body.hoeken-vierkant input[type="url"],
body.hoeken-vierkant input[type="date"],
body.hoeken-vierkant input[type="number"],
body.hoeken-vierkant select,
body.hoeken-vierkant textarea {
    border-radius: 0;
}
body.rand-schaduw input[type="text"],
body.rand-schaduw input[type="password"],
body.rand-schaduw input[type="email"],
body.rand-schaduw input[type="url"],
body.rand-schaduw input[type="date"],
body.rand-schaduw input[type="number"],
body.rand-schaduw select,
body.rand-schaduw textarea,
body.rand-schaduw #menu a.linkmenu,
body.rand-schaduw .admin-tab,
body.rand-schaduw .admin-artist-btn,
body.rand-schaduw .af-btn-save {
    box-shadow: 3px 3px 0 0 var(--merk-4);
}

textarea {
    min-height: 130px;
    resize: vertical;
}

input[type="submit"],
.af-btn-save {
    padding: 13px 24px;
    background: var(--merk-chip-bg, #111);
    color: var(--merk-chip-tekst, #fff);
    border: 1px solid rgba(0, 0, 0, .12);
    border-radius: 999px;
    font-size: var(--fs-knop);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .09em;
    cursor: pointer;
    transition: background .2s ease, color .2s ease;
}
input[type="submit"] {
    width: 100%;
}
body.hoeken-vierkant input[type="submit"] {
    border-radius: 0;
}

.work-card--has-bg .work-button {
    background: #fff !important;
    color: var(--merk-tekst, #111) !important;
}
input[type="submit"]:hover,
.af-btn-save:hover,
.contact-whatsapp:hover,
.admin-artist-btn:hover,
.admin-artist-btn.active:hover,
.admin-tab-active:hover,
.admin-tab:hover {
    background: var(--merk-chip-tekst, #fff);
    color: var(--merk-chip-bg, #111);
}

/* zie commentaar.php #41 */
.embed {
    width: 100%;
    margin-top: 34px;
    overflow: hidden;
    border-radius: 24px;
    box-shadow: 0 22px 70px rgba(0, 0, 0, .14);
}

body.hoeken-vierkant .embed {
    border-radius: 0;
}

.embed iframe,
#content iframe {
    display: block;
    width: 100%;
    max-width: 100%;
    border: 0;
}

/* zie commentaar.php #42 */
.music-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr));
    gap: 28px;
    margin-top: 20px;
}

.music-card {
    background: var(--merk-tekstblok-bg, var(--white));
    border: 1px solid rgba(0, 0, 0, .10);
    border-radius: var(--radius, 28px);
    padding: 20px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, .10);
}

.music-cover {
    display: block;
    width: 100%;
    border-radius: 18px;
    margin-bottom: 14px;
}

/* zie commentaar.php #43 */
.music-upcoming {
    opacity: .55;
    filter: grayscale(.15);
}

.music-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}

.music-links a img {
    width: 28px !important;
    height: 28px !important;
    border-radius: 0;
    box-shadow: none;
}

.music-card h2 {
    margin: 14px 0 10px;
    font-size: var(--fs-kop);
    line-height: .95;
    text-transform: uppercase;
}

.music-artists,
.music-card small {
    display: block;
    color: #666;
    line-height: 1.4;
}

/* zie commentaar.php #44 */
.stat-label {
    display: inline-block;
    margin: -8px 0 28px;
    font-size: var(--fs-klein);
    font-weight: 600;
    color: #999;
    letter-spacing: .03em;
}

/* zie commentaar.php #45 */
.melding {
    display: block;
    width: fit-content;
    max-width: 100%;
    margin: 0 0 20px;
    padding: 12px 18px;
    background: #eef1f5;
    border: 1px solid #c9d1dc;
    border-radius: 14px;
    color: #33414f;
    font-size: var(--fs-klein);
    font-weight: 700;
    line-height: 1.5;
}
.melding-ok {
    background: #e6f9ee;
    border-color: #a3d9b5;
    color: #1a6e3a;
}
.melding-let-op {
    background: #fff7e6;
    border-color: #f0d9a0;
    color: #8a6100;
}
body.hoeken-vierkant .melding {
    border-radius: 0;
}
body.rand-schaduw .melding-fout {
    box-shadow: 4px 4px 0 0 #7a1414;
}
.melding-fout {
    background: #fdeaea;
    border-color: #f0b3b3;
    color: #a11d1d;
}

/* zie commentaar.php #46 */
.af-btn-danger {
    padding: 13px 24px;
    background: #a11d1d;
    color: #fff;
    border: 1px solid #a11d1d;
    border-radius: 999px;
    font-size: var(--fs-knop);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .09em;
    cursor: pointer;
    transition: background .2s ease, color .2s ease;
}
.af-btn-danger:hover {
    background: #fff;
    color: #a11d1d;
}

/* zie commentaar.php #47 */
.tfa-intro {
    margin: 0 0 20px;
    color: #666;
}
.status-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    vertical-align: middle;
    margin-right: 6px;
    padding: 5px 12px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: var(--fs-knop);
    font-weight: 800;
    font-family: system-ui, sans-serif;
    letter-spacing: 0;
    text-transform: none;
    white-space: nowrap;
}
.status-label.is-goed {
    background: #e6f9ee;
    border-color: #a3d9b5;
    color: #1a6e3a;
}
.status-label.is-fout {
    background: #fdeaea;
    border-color: #f0b3b3;
    color: #a11d1d;
}
.status-label.is-uit {
    background: #efefef;
    border-color: #d4d4d4;
    color: #555;
}
body.hoeken-vierkant .status-label {
    border-radius: 0;
}
.tfa-form {
    max-width: 360px;
}
.tfa-secret-key {
    font-family: monospace;
    font-size: var(--fs-basis);
    letter-spacing: .05em;
    background: #f5f5f5;
    padding: 10px 14px;
    border-radius: 8px;
    display: inline-block;
    margin: 0 0 16px;
}
.tfa-qr-code {
    margin: 0 0 16px;
}
.tfa-annuleren-form {
    margin-top: 10px;
}
/* zie commentaar.php #235 */
.shows-cijfers {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 4px 0 8px;
}
.shows-cijfer {
    padding: 7px 14px;
    border: 1px solid color-mix(in srgb, currentColor 18%, transparent);
    border-radius: 999px;
    font-size: var(--fs-klein);
    letter-spacing: .02em;
    opacity: .85;
}
.shows-cijfer strong {
    font-variant-numeric: tabular-nums;
}

#content .shows-kop {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 56px 0 20px;
}
.shows-kop-aantal {
    padding: 3px 11px;
    border-radius: 999px;
    background: var(--merk-chip-bg, #111);
    color: var(--merk-chip-tekst, #fff);
    font-size: var(--fs-mini);
    font-weight: 800;
    letter-spacing: .04em;
    line-height: 1.6;
}

.shows-lijst {
    display: grid;
    gap: 14px;
}

.shows-item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px 22px;
}

.shows-item--komend {
    padding: 18px 22px 18px 18px;
    background: var(--merk-tekstblok-bg, var(--white));
    border: 1px solid rgba(0, 0, 0, .10);
    border-radius: var(--radius, 24px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, .08);
}
.shows-item--eerst {
    border: 2px solid currentColor;
    box-shadow: 0 18px 60px rgba(0, 0, 0, .14);
}

.shows-datum {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 76px;
    padding: 10px 8px;
    border-radius: calc(var(--radius, 24px) * .6);
    background: var(--merk-chip-bg, #111);
    color: var(--merk-chip-tekst, #fff);
    line-height: 1;
    text-align: center;
}
.shows-weekdag,
.shows-maand {
    font-size: var(--fs-mini);
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.shows-dag {
    margin: 4px 0;
    font-size: 2rem;
    font-weight: 800;
    letter-spacing: -.03em;
    font-variant-numeric: tabular-nums;
}
.shows-item--eerst .shows-datum {
    min-width: 92px;
    padding: 14px 10px;
}
.shows-item--eerst .shows-dag {
    font-size: 2.6rem;
}

.shows-info {
    min-width: 0;
}
.shows-aftellen {
    display: inline-block;
    margin-bottom: 6px;
    font-size: var(--fs-mini);
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--merk-1, currentColor);
}
.shows-aftellen--stil {
    color: inherit;
    opacity: .6;
}
#content .shows-naam {
    margin: 0;
    font-weight: 800;
    color: var(--merk-tekst, #111);
    font-size: var(--fs-kop-klein);
    line-height: 1.15;
    letter-spacing: -.02em;
    overflow-wrap: anywhere;
}
.shows-plek {
    margin: 6px 0 0;
    font-size: var(--fs-basis);
    line-height: 1.45;
    opacity: .8;
}
.shows-punt {
    margin: 0 4px;
    opacity: .5;
}
.shows-vlag {
    white-space: nowrap;
}
.shows-labels {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
}
.shows-label {
    padding: 4px 9px;
    border: 1px solid color-mix(in srgb, currentColor 22%, transparent);
    border-radius: 999px;
    font-size: var(--fs-mini);
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.shows-knoppen {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
}
#content a.shows-knop {
    margin-top: 0;
    padding: 8px 14px;
    white-space: nowrap;
}

.shows-leeg {
    padding: 26px 24px;
    border: 1px dashed color-mix(in srgb, currentColor 30%, transparent);
    border-radius: var(--radius, 24px);
}
.shows-leeg p {
    margin: 0 0 14px;
}

.shows-jaar {
    border-top: 1px solid color-mix(in srgb, currentColor 16%, transparent);
}
.shows-jaar:last-of-type {
    border-bottom: 1px solid color-mix(in srgb, currentColor 16%, transparent);
}
.shows-jaar summary {
    display: flex;
    align-items: baseline;
    gap: 14px;
    padding: 16px 2px;
    cursor: pointer;
    list-style: none;
}
.shows-jaar summary::-webkit-details-marker {
    display: none;
}
.shows-jaar summary::after {
    content: "+";
    margin-left: auto;
    font-size: 1.5rem;
    font-weight: 300;
    line-height: 1;
}
.shows-jaar[open] summary::after {
    content: "\2013";
}
.shows-jaar-titel {
    font-size: var(--fs-kop-klein);
    font-weight: 800;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
}
.shows-jaar-aantal {
    font-size: var(--fs-mini);
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    opacity: .6;
}
.shows-lijst--verleden {
    gap: 0;
    padding-bottom: 14px;
}
.shows-item--verleden {
    padding: 12px 0;
    border-top: 1px solid color-mix(in srgb, currentColor 8%, transparent);
}
.shows-item--verleden .shows-datum {
    min-width: 58px;
    padding: 7px 6px;
    background: transparent;
    color: inherit;
    border: 1px solid color-mix(in srgb, currentColor 22%, transparent);
}
.shows-item--verleden .shows-weekdag {
    display: none;
}
.shows-item--verleden .shows-dag {
    margin: 0 0 3px;
    font-size: 1.35rem;
}
#content .shows-item--verleden .shows-naam {
    font-size: var(--fs-basis);
    font-weight: 700;
}
.shows-item--verleden .shows-plek {
    margin-top: 3px;
    font-size: var(--fs-klein);
}
.shows-item--verleden .shows-labels {
    margin-top: 6px;
}
#content .shows-item--verleden a.shows-knop {
    padding: 5px 11px;
}

/* zie commentaar.php #48 */

/* zie commentaar.php #49 */
.work-back-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 24px;
    padding: 9px 16px;
    background: rgba(0, 0, 0, .06);
    border: 1px solid rgba(0, 0, 0, .10);
    border-radius: 999px;
    color: #333;
    font-size: var(--fs-knop);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .07em;
    text-decoration: none;
    transition: background .18s ease, color .18s ease;
}

.work-back-link:hover,
.al-btn-edit:hover {
    background: var(--merk-chip-bg, #111);
    color: var(--merk-chip-tekst, #fff);
}

/* zie commentaar.php #50 */
.work-solo-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 36px;
    align-items: start;
    margin-bottom: 48px;
}

/* zie commentaar.php #51 */
.work-solo-left {
    position: sticky;
    top: 100px; /* zie commentaar.php #52 */
}

/* zie commentaar.php #53 */
.ws-slideshow {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    border-radius: 20px;
    overflow: hidden;
    background: #111;
    user-select: none;
}

.ws-slides {
    position: relative;
    width: 100%;
    height: 100%;
}

.ws-slide {
    display: none;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.ws-slide--active {
    display: block;
}

.ws-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0;
    box-shadow: none;
    animation: kenburns 12s ease-in-out infinite alternate;
    transform-origin: center center;
}

.ws-slide video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0;
    box-shadow: none;
}

@keyframes kenburns {
    0%   { transform: scale(1.00) translate(0%,  0%);   }
    33%  { transform: scale(1.05) translate(-1%, -1%);  }
    66%  { transform: scale(1.04) translate(1%,  0.5%); }
    100% { transform: scale(1.07) translate(0%, -1.5%); }
}

/* zie commentaar.php #54 */
.ws-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: 40px;
    height: 40px;
    background: var(--white);
    border: none;
    border-radius: 999px;
    font-size: 22px;
    line-height: 1;
    color: var(--merk-tekst, #111);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .18);
    transition: background .18s ease;
    -webkit-user-select: none;
    user-select: none;
}

.ws-btn--prev { left: 10px; }
.ws-btn--next { right: 10px; }

.ws-btn:hover { background: #fff; }

/* zie commentaar.php #55 */
.ws-dots {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 6px;
    z-index: 10;
}

.ws-dot {
    width: 7px;
    height: 7px;
    border-radius: 999px;
    border: none;
    background: rgba(255, 255, 255, .50);
    cursor: pointer;
    padding: 0;
    transition: background .18s ease, width .18s ease;
}

.ws-dot--active {
    background: #fff;
    width: 20px;
}

/* zie commentaar.php #56 */
.ws-no-media {
    aspect-ratio: 4 / 3;
    border-radius: 20px;
    background: rgba(0, 0, 0, .05);
    border: 1px dashed rgba(0, 0, 0, .15);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--muted);
    font-size: var(--fs-klein);
    font-style: italic;
}

/* zie commentaar.php #57 */
.work-solo-right {
    min-width: 0; /* zie commentaar.php #58 */
}

.work-solo-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.work-solo-title {
    margin: 0 0 20px;
    padding-bottom: 0;
    border-bottom: none;
    font-size: var(--fs-kop);
    line-height: .95;
    letter-spacing: -.055em;
    text-transform: uppercase;
}

/* zie commentaar.php #59 */
.work-solo-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    max-width: 200px;
    padding: 16px 20px;
    margin: 0 0 18px;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: 14px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .05);
}

.work-solo-logo img {
    max-width: 100%;
    max-height: 90px;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
}

.work-solo-body {
    font-size: var(--fs-tekst);
    line-height: 1.75;
    color: var(--muted);
}

.work-solo-body p   { margin: 0 0 18px; }
.work-solo-body b,
.work-solo-body strong,
.cv-list li b { color: var(--merk-tekst, #111); }

/* zie commentaar.php #60 */
@media (max-width: 760px) {
    .work-solo-layout {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .work-solo-left {
        position: static;
    }

    .ws-slideshow {
        border-radius: 16px;
    }

    .ws-btn {
        width: 36px;
        height: 36px;
        font-size: 18px;
    }
}

/* zie commentaar.php #61 */
.ws-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: 48px;
    height: 48px;
    background: var(--white);
    border: none;
    border-radius: 999px;
    font-size: 28px;
    line-height: 1;
    color: var(--merk-tekst, #111);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .18);
    transition: background .18s ease, transform .18s ease;
    -webkit-user-select: none;
    user-select: none;
}

.ws-btn--prev { left: 14px; }
.ws-btn--next { right: 14px; }

.ws-btn:hover {
    background: #fff;
    transform: translateY(-50%) scale(1.08);
}

/* zie commentaar.php #62 */
.ws-dots {
    position: absolute;
    bottom: 14px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 10;
}

.ws-dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    border: none;
    background: rgba(255, 255, 255, .55);
    cursor: pointer;
    padding: 0;
    transition: background .18s ease, width .18s ease;
}

.ws-dot--active {
    background: #fff;
    width: 22px;
}

@media (max-width: 760px) {
    .ws-slide img,
    .ws-slide video {
        max-height: 320px;
    }

    .ws-btn {
        width: 38px;
        height: 38px;
        font-size: 22px;
    }
}

/* zie commentaar.php #63 */
/* zie commentaar.php #64 */
.work-logos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(170px, 100%), 1fr));
    gap: 16px;
    margin: 28px 0 8px;
}

.work-logo-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin: 0;
}

.work-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 3 / 2;
    padding: 26px;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: 16px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .05);
    transition: transform .2s ease, box-shadow .2s ease;
}

.work-logo-naam {
    font-size: var(--fs-klein);
    font-weight: 600;
    text-align: center;
    color: var(--text, #222);
    line-height: 1.3;
}

.work-logo:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(0, 0, 0, .10);
}

.work-logo img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;   /* zie commentaar.php #65 */
    display: block;
}

@media (max-width: 520px) {
    .work-logos {
        grid-template-columns: repeat(auto-fill, minmax(min(130px, 100%), 1fr));
        gap: 12px;
    }
    .work-logo { padding: 18px; }
}

.work-grid,
.contact-grid {
    display: flex;
    flex-direction: column;
    gap: 28px;
    margin-top: 34px;
}

.work-card {
    display: flex;
    flex-direction: column;
    padding: 0;
    background: var(--merk-tekstblok-bg, var(--white));
    border: 1px solid rgba(0, 0, 0, .10);
    border-radius: var(--radius, 28px);
    box-shadow: 0 18px 60px rgba(0, 0, 0, .10);
    overflow: hidden;
}

/* zie commentaar.php #66 */
.work-card--has-bg {
    background-size: cover;
    background-position: center;
    background-color: var(--merk-tekst, #111);
    border: none;
}

/* zie commentaar.php #67 */
.work-card-inner {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: clamp(24px, 4vw, 42px);
    background: rgba(0, 0, 0, .52);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    border-radius: 28px;
}

/* zie commentaar.php #68 */
.work-card:not(.work-card--has-bg) .work-card-inner {
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

/* zie commentaar.php #69 */
.work-card--has-bg h2,
.work-card--has-bg .work-meta,
.work-card--has-bg .work-excerpt {
    color: var(--merk-werk-titel-bg, #ffffff) !important;
}

/* zie commentaar.php #70 */
.work-card:not(.work-card--has-bg) h2 {
    color: var(--merk-werk-titel-geen-bg, #111111) !important;
}

.work-card--has-bg .work-period {
    background: rgba(255, 255, 255, .20);
    border: 1px solid rgba(255, 255, 255, .35);
    color: #fff;
}


.work-card--has-bg .work-button:hover {
    background: transparent !important;
    color: #fff !important;
    box-shadow: inset 0 0 0 2px #fff;
}

.work-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 24px;
}

/* zie commentaar.php #71 */
.work-card-titel {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.work-card-logo {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    padding: 8px;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: 12px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, .06);
}

.work-card-logo img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
}

.work-card h2 {
    margin: 0;
    font-size: var(--fs-kop);
    line-height: .95;
    letter-spacing: -.055em;
    overflow-wrap: break-word;
    min-width: 0;
}

.work-period {
    flex: 0 0 auto;
    padding: 8px 12px;
    background: var(--merk-chip-bg, #111);
    color: var(--merk-chip-tekst, #fff);
    border-radius: 999px;
    font-size: var(--fs-mini);
    font-weight: 800;
    white-space: nowrap;
}

.work-meta {
    margin: 16px 0 22px;
    color: #777;
    font-size: var(--fs-mini);
    text-transform: uppercase;
    letter-spacing: .08em;
}

.work-excerpt {
    margin: 0 0 24px;
    color: #555;
    font-weight: 400;
}

/* zie commentaar.php #72 */
.work-credit {
    margin: -8px 0 20px;
    padding: 8px 14px;
    display: inline-block;
    background: rgba(0, 0, 0, .05);
    border-radius: 999px;
    font-size: var(--fs-klein);
    color: #444;
    line-height: 1.4;
}
.work-credit strong {
    font-weight: 700;
    color: var(--merk-tekst, #111);
}
/* zie commentaar.php #73 */
.work-solo-right .work-credit {
    margin: 4px 0 20px;
}
/* zie commentaar.php #74 */
.work-card--has-bg .work-credit {
    background: rgba(255, 255, 255, .16);
    color: #f3f3f3;
}
.work-card--has-bg .work-credit strong {
    color: #fff;
}

.work-button {
    display: inline-block;
    width: fit-content;
    padding: 10px 16px;
    border-radius: 999px;
    text-decoration: none;
    font-size: var(--fs-knop);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .07em;
}

.work-button:hover,
.press-card a:hover,
.diensten-cta:hover {
    box-shadow: inset 0 0 0 1px var(--merk-chip-bg, #111);
}

/* zie commentaar.php #75 */
.press-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
    gap: 22px;
    margin-top: 34px;
}

.press-card {
    display: flex;
    flex-direction: column;
    min-height: 260px;
    padding: clamp(22px, 3vw, 34px);
    background: var(--merk-tekstblok-bg, var(--white));
    border: 1px solid rgba(0, 0, 0, .10);
    border-radius: var(--radius, 28px);
    box-shadow: 0 18px 60px rgba(0, 0, 0, .10);
}

.press-card time {
    display: inline-block;
    width: fit-content;
    margin-bottom: 18px;
    padding: 7px 11px;
    background: var(--merk-chip-bg, #111);
    color: var(--merk-chip-tekst, #fff);
    border-radius: 999px;
    font-size: var(--fs-mini);
    font-weight: 800;
    letter-spacing: .07em;
}

.press-card h2 {
    margin: 0 0 24px;
    font-size: var(--fs-kop);
    line-height: 1;
    letter-spacing: -.045em;
    overflow-wrap: break-word;
    word-break: break-word;
    hyphens: auto;
}

.press-card a,
.diensten-cta {
    display: inline-block;
    width: fit-content;
    margin-top: auto;
    padding: 10px 15px;
    border-radius: 999px;
    text-decoration: none;
    font-size: var(--fs-knop);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .07em;
}

/* zie commentaar.php #76 */
.diensten-cat-kop {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 6px 16px;
    margin: 64px 0 0;
    padding-bottom: 14px;
    border-bottom: 2px solid currentColor;
}
.diensten-cat-kop:first-of-type {
    margin-top: 40px;
}
.diensten-cat-nr {
    font-size: var(--fs-kop-klein);
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--merk-1, currentColor);
    font-variant-numeric: tabular-nums;
}
.diensten-cat-titel {
    margin: 0;
}
.diensten-cat-aantal {
    margin-left: auto;
    font-size: var(--fs-mini);
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    opacity: .6;
}

.diensten-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
    gap: 26px;
    margin-top: 30px;
    align-items: stretch;
}

.diensten-card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: clamp(24px, 3vw, 36px);
    background: var(--merk-tekstblok-bg, var(--white));
    border: 1px solid rgba(0, 0, 0, .10);
    border-radius: var(--radius, 28px);
    box-shadow: 0 18px 60px rgba(0, 0, 0, .10);
    overflow: visible;
    transition: box-shadow .25s ease;
}
.diensten-card:hover {
    box-shadow: 0 26px 70px rgba(0, 0, 0, .16);
}

.diensten-card-uitgelicht {
    border: 2px solid currentColor;
}
.diensten-card-uitgelicht::before {
    content: "";
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    height: 8px;
    background: currentColor;
    border-radius: inherit;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.diensten-sticker {
    position: absolute;
    top: -14px;
    right: 22px;
    z-index: 3;
    padding: 7px 13px;
    background: var(--merk-chip-bg, #111);
    color: var(--merk-chip-tekst, #fff);
    border: 1px solid rgba(0, 0, 0, .12);
    border-radius: 999px;
    font-size: var(--fs-mini);
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
}
body.schuin-chips-aan .diensten-sticker {
    transform: rotate(2.5deg);
}

.diensten-kop {
    margin-bottom: 8px;
}

.diensten-card h3 {
    margin: 0 0 10px;
    font-size: var(--fs-kop-klein);
    line-height: 1.1;
    letter-spacing: -.03em;
}

.diensten-subtitel {
    margin: 0 0 18px;
    font-size: var(--fs-basis);
    line-height: 1.6;
    opacity: .8;
}

.diensten-prijsblok {
    margin: 4px 0 6px;
    padding: 16px 0;
    border-top: 1px solid color-mix(in srgb, currentColor 14%, transparent);
    border-bottom: 1px solid color-mix(in srgb, currentColor 14%, transparent);
}

.diensten-prijs {
    margin: 0;
    font-size: var(--fs-kop);
    font-weight: 800;
    letter-spacing: -.04em;
    line-height: 1;
}

.diensten-prijs-info {
    margin: 8px 0 0;
    font-size: var(--fs-klein);
    font-weight: 600;
    letter-spacing: .03em;
    opacity: .7;
}

.diensten-punten {
    margin: 14px 0 28px;
    padding: 0;
    list-style: none;
    flex: 1;
}

.diensten-punten li {
    position: relative;
    padding: 9px 0 9px 34px;
    font-size: var(--fs-basis);
    line-height: 1.5;
}

.diensten-punten li::before {
    content: "\2713";
    position: absolute;
    left: 0;
    top: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    background: var(--merk-chip-bg, #111);
    color: var(--merk-chip-tekst, #fff);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 30%, transparent);
    border-radius: 50%;
    font-size: 12px;
    font-weight: 800;
    line-height: 1;
}
body.hoeken-vierkant .diensten-punten li::before {
    border-radius: 0;
}

.diensten-card .diensten-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    margin-top: auto;
}
.diensten-cta-pijl {
    font-size: 1.3em;
    line-height: 1;
    transition: transform .2s ease;
}
.diensten-cta:hover .diensten-cta-pijl {
    transform: translateX(4px);
}

.diensten-btw {
    display: inline-block;
    margin-left: 4px;
    font-size: var(--fs-mini);
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    vertical-align: middle;
    opacity: .6;
}

.diensten-card {
    --kaart-pad: clamp(24px, 3vw, 36px);
}
.diensten-card .diensten-omslag {
    display: block;
    margin: calc(-1 * var(--kaart-pad)) calc(-1 * var(--kaart-pad)) 22px;
    border-radius: inherit;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    overflow: hidden;
}
.diensten-card .diensten-omslag .diensten-thumb {
    aspect-ratio: 16 / 10;
    border-radius: 0 !important;
    box-shadow: none !important;
    clip-path: none !important;
}
.diensten-card .diensten-omslag .diensten-thumb--extra {
    display: none;
}
.diensten-omslag-meer {
    position: absolute;
    right: 12px;
    bottom: 12px;
    padding: 5px 11px;
    background: rgba(0, 0, 0, .65);
    color: #fff;
    border-radius: 999px;
    font-size: var(--fs-mini);
    font-weight: 800;
    letter-spacing: .05em;
}
body.hoeken-vierkant .diensten-omslag-meer {
    border-radius: 0;
}
.diensten-card-uitgelicht::before {
    z-index: 2;
}

@media (min-width: 900px) {
    .diensten-grid--een {
        grid-template-columns: 1fr;
    }
    .diensten-grid--een .diensten-card {
        display: grid;
        grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
        grid-template-rows: auto auto 1fr;
        grid-template-areas:
            "kop    punten"
            "knop   punten"
            ".      punten";
        column-gap: clamp(32px, 5vw, 64px);
    }
    .diensten-grid--een .diensten-card--foto {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
        grid-template-rows: auto auto 1fr;
        grid-template-areas:
            "foto kop    punten"
            "foto knop   punten"
            "foto .      punten";
    }
    .diensten-grid--een .diensten-kop {
        grid-area: kop;
    }
    .diensten-grid--een .diensten-punten {
        grid-area: punten;
        margin: 0;
        align-self: center;
    }
    .diensten-grid--een .diensten-cta {
        grid-area: knop;
        align-self: start;
        width: fit-content;
        min-width: 260px;
        margin-top: 18px;
    }
    .diensten-grid--een .diensten-omslag {
        grid-area: foto;
        margin: calc(-1 * var(--kaart-pad)) 0 calc(-1 * var(--kaart-pad)) calc(-1 * var(--kaart-pad));
        border-radius: inherit;
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
    }
    .diensten-grid--een .diensten-omslag .diensten-thumb {
        height: 100%;
        aspect-ratio: auto;
        min-height: 320px;
    }
}

.diensten-cta,
.work-button,
.cv-export-btn,
.press-card a,
#content a.about-export-btn,
#content a.shows-video-link,
.presave-link {
    background: var(--merk-chip-bg, var(--merk-3, #111111)) !important;
    color: var(--merk-chip-tekst, #ffffff) !important;
    border: 1px solid rgba(0, 0, 0, .12) !important;
}

.diensten-cta:hover,
.work-button:hover,
.cv-export-btn:hover,
.press-card a:hover,
#content a.about-export-btn:hover,
#content a.shows-video-link:hover,
.presave-link:hover {
    background: var(--merk-chip-tekst, #111) !important;
    color: var(--merk-chip-bg, #fff) !important;
}

/* zie commentaar.php #77 */
.presave-link--hypeddit {
    background: var(--merk-2, #5f5f5f) !important;
}
.presave-link--hypeddit:hover {
    background: var(--merk-2, #5f5f5f) !important;
    opacity: .85;
}

/* zie commentaar.php #78 */

.contact-card {
    /* zie commentaar.php #79 */
}

body.hoeken-vierkant .locatie-foto {
    border-radius: 0;
}
body.rand-schaduw .locatie-foto {
    box-shadow: 6px 6px 0 0 var(--merk-4);
}

/* zie commentaar.php #80 */
body.hoeken-vierkant .about-tile,
body.hoeken-vierkant .music-card,
body.hoeken-vierkant .press-card,
body.hoeken-vierkant .diensten-card,
body.hoeken-vierkant .work-card {
    border-radius: 0 !important;
}
body.rand-schaduw .about-tile,
body.rand-schaduw .music-card,
body.rand-schaduw .press-card,
body.rand-schaduw .diensten-card,
body.rand-schaduw .work-card {
    box-shadow: 7px 7px 0 0 var(--merk-4) !important;
}
/* zie commentaar.php #81 */
body.schuin-aan .schuin-blok {
    transform: rotate(-1.3deg);
}
body.schuin-aan .schuin-blok:nth-child(even) {
    transform: rotate(1.1deg);
}

body.hoeken-vierkant .work-card-inner {
    border-radius: 0 !important;
}

body.hoeken-vierkant .about-intro {
    border-radius: 0 !important;
}

.contact-card h2 {
    margin: 0 0 24px;
    font-size: var(--fs-kop);
    line-height: .9;
    letter-spacing: -.055em;
}

.contact-links {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
    align-items: start;
    gap: 24px;
}

/* zie commentaar.php #82 */
.contact-subblock {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    align-items: stretch;
    gap: 10px 12px;
    grid-column: span 1;
    padding: clamp(20px, 2.6vw, 30px);
    background: var(--merk-tekstblok-bg, var(--white));
    border: 1px solid rgba(0, 0, 0, .10);
    border-radius: var(--radius, 28px);
    box-shadow: 0 18px 60px rgba(0, 0, 0, .10);
}
body.hoeken-vierkant .contact-subblock {
    border-radius: 0;
}
body.rand-schaduw .contact-subblock,
body.rand-schaduw .admin-form-card {
    box-shadow: 8px 8px 0 0 var(--merk-4);
}

.contact-section-title {
    grid-column: 1 / -1;
    margin: 20px 0 6px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(0, 0, 0, .08);
    font-size: var(--fs-mini);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: #777;
}

.contact-links a {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    height: 64px;
    padding: 13px 15px;
    background: var(--merk-chip-bg, var(--merk-3, #000000));
    border: 1px solid rgba(0, 0, 0, .12);
    border-radius: 16px;
    color: var(--merk-chip-tekst, #ffffff);
    text-decoration: none;
    font-size: var(--fs-basis);
    font-weight: 800;
    overflow-wrap: anywhere;
    transition: background .2s ease, color .2s ease, transform .2s ease;
}

/* zie commentaar.php #83 */
body.hoeken-vierkant .contact-links a,
body.hoeken-vierkant .locatie-maps-link,
body.hoeken-vierkant .diensten-cta,
body.hoeken-vierkant .work-button,
body.hoeken-vierkant .cv-export-btn,
body.hoeken-vierkant .press-card a,
body.hoeken-vierkant #content a.about-export-btn,
body.hoeken-vierkant #content a.shows-video-link,
body.hoeken-vierkant .diensten-sticker,
body.hoeken-vierkant .press-card time,
body.hoeken-vierkant .work-period,
body.hoeken-vierkant .presave-link {
    border-radius: 0;
}

body.rand-schaduw .contact-links a,
body.rand-schaduw .locatie-maps-link,
body.rand-schaduw .diensten-cta,
body.rand-schaduw .work-button,
body.rand-schaduw .cv-export-btn,
body.rand-schaduw .press-card a,
body.rand-schaduw #content a.about-export-btn,
body.rand-schaduw #content a.shows-video-link,
body.rand-schaduw .presave-link {
    box-shadow: 4px 4px 0 0 var(--merk-4);
}
body.schuin-chips-aan .contact-links a,
body.schuin-chips-aan .locatie-maps-link,
body.schuin-chips-aan .diensten-cta,
body.schuin-chips-aan .work-button,
body.schuin-chips-aan .cv-export-btn,
body.schuin-chips-aan .press-card a,
body.schuin-chips-aan #content a.about-export-btn,
body.schuin-chips-aan #content a.shows-video-link,
body.schuin-chips-aan .presave-link,
body.schuin-chips-aan #menu a.linkmenu {
    transform: rotate(-1.4deg);
}

body.schuin-chips-aan .contact-links a:nth-child(even),
body.schuin-chips-aan .contact-subblock:nth-of-type(even) .locatie-maps-link,
body.schuin-chips-aan #menu a.linkmenu:nth-child(even) {
    transform: rotate(1.2deg);
}

body.hoeken-vierkant .contact-links a:hover,
body.hoeken-vierkant .locatie-maps-link:hover,
body.hoeken-vierkant .diensten-cta:hover,
body.hoeken-vierkant .work-button:hover,
body.hoeken-vierkant .cv-export-btn:hover,
body.hoeken-vierkant .press-card a:hover,
body.hoeken-vierkant #content a.about-export-btn:hover,
body.hoeken-vierkant #content a.shows-video-link:hover,
body.hoeken-vierkant .presave-link:hover {
    transform: rotate(0deg) translateY(-2px);
}

.contact-links a:hover,
#menu a:hover {
    background: var(--merk-chip-tekst, #111);
    color: var(--merk-chip-bg, #fff);
    transform: translateY(-1px);
}
.contact-links a:hover .contact-followers {
    color: var(--merk-chip-bg, #fff);
}

.contact-links img:not(.locatie-foto) {
    width: 26px !important;
    height: 26px !important;
    flex: 0 0 26px !important;
    object-fit: contain;
    margin: 0 !important;
    transition: transform .2s ease;
}

.contact-links a:hover img:not(.locatie-foto) {
    transform: scale(1.18);
}

/* zie commentaar.php #84 */
a img {
    transition: transform .2s ease;
}
a:hover img {
    transform: scale(1.18);
}

/* zie commentaar.php #85 */
.contact-followers {
    display: block;
    font-size: var(--fs-mini);
    font-weight: 400;
    color: var(--merk-chip-tekst, #ffffff);
    opacity: .75;
    margin-top: 2px;
    letter-spacing: .02em;
    line-height: 1.3;
}

/* zie commentaar.php #86 */
.contact-whatsapp {
    background: var(--merk-chip-bg, var(--merk-3, #111111));
}
/* zie commentaar.php #87 */
.locatie-foto {
    display: block;
    width: 100%;
    max-width: 320px;
    margin: 0 auto 14px;
    grid-column: 1 / -1;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 18px;
    box-shadow: 0 14px 40px rgba(0, 0, 0, .14);
}

.locatie-naam {
    display: block;
    grid-column: 1 / -1;
    text-align: center;
    font-size: var(--fs-basis);
    font-weight: 800;
    letter-spacing: .03em;
    color: var(--merk-tekst, #111);
}

.locatie-adres {
    display: block;
    grid-column: 1 / -1;
    margin-top: 4px;
    text-align: center;
    font-style: normal;
    font-size: var(--fs-klein);
    line-height: 1.5;
    color: #555;
}

.locatie-maps-link {
    display: inline-block;
    grid-column: 1 / -1;
    width: fit-content;
    justify-self: center;
    margin: 14px auto 0;
    padding: 10px 20px;
    background: var(--merk-chip-bg, var(--merk-3, #111111));
    border: 1px solid rgba(0, 0, 0, .12);
    color: var(--merk-chip-tekst, #ffffff);
    border-radius: 999px;
    font-size: var(--fs-knop);
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    text-decoration: none;
    transition: background .2s ease, color .2s ease, box-shadow .2s ease;
}

.locatie-maps-link:hover {
    background: var(--merk-chip-tekst, #fff);
    color: var(--merk-chip-bg, #111);
    box-shadow: inset 0 0 0 2px var(--merk-chip-bg, #111);
}

/* zie commentaar.php #233 */
.about-contact {
    margin-top: 18px;
}
.about-tile > .about-contact:first-child {
    margin-top: 0;
}
.about-tile .contact-links.about-contact {
    grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr));
    gap: 10px;
}
.about-contact-locatie {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}
.about-contact-locatie .locatie-naam,
.about-contact-locatie .locatie-adres {
    text-align: left;
    color: inherit;
}
.about-contact-locatie .locatie-maps-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 10px 0 0;
}
body.tekst-midden .about-contact-locatie {
    align-items: center;
}
body.tekst-midden .about-contact-locatie .locatie-naam,
body.tekst-midden .about-contact-locatie .locatie-adres {
    text-align: center;
}

/* zie commentaar.php #88 */

/* zie commentaar.php #89 */
.kt-observe {
    opacity: 0;
    translate: 0 46px;
    scale: .93;
    transition: opacity .45s ease-out,
                translate .65s cubic-bezier(.2, 1.3, .35, 1),
                scale .65s cubic-bezier(.2, 1.3, .35, 1),
                transform .2s ease,
                box-shadow .2s ease;
    will-change: opacity, translate, scale;
}

.kt-observe.kt-in-view {
    opacity: 1;
    translate: 0 0;
    scale: 1;
}

@media (prefers-reduced-motion: reduce) {
    .kt-observe {
        opacity: 1 !important;
        translate: none !important;
        scale: none !important;
        transition: none !important;
    }
}

/* zie commentaar.php #90 */
@supports (animation-timeline: scroll()) {
    .hero-image img:not(.hero-slideshow--multi img) {
        animation: kt-hero-drift linear both;
        animation-timeline: scroll(root);
        animation-range: 0% 60%;
    }
}

@keyframes kt-hero-drift {
    from { transform: translateY(0) scale(1); }
    to   { transform: translateY(-28px) scale(1.04); }
}

/* zie commentaar.php #93 */

/* zie commentaar.php #94 */
.bio-gallery {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-flow: dense;
    gap: 14px;
    margin-top: 8px;
}

/* zie commentaar.php #95 */
.about-paper .bio-gallery {
    margin: 26px 0;
}

/* zie commentaar.php #96 */
.bio-thumb {
    display: block;           /* zie commentaar.php #97 */
    width: 100%;
    aspect-ratio: 1 / 1;
    position: relative;       /* zie commentaar.php #98 */
    overflow: hidden;
    border-radius: 16px;
    border: 1px solid var(--line);
    box-shadow: 0 8px 28px rgba(0, 0, 0, .10);
    background: rgba(0, 0, 0, .06);
    margin: 0;                /* zie commentaar.php #99 */
    transition: box-shadow .25s ease;
    isolation: isolate;       /* zie commentaar.php #100 */
}
.bio-thumb[hidden] {
    display: none;
}
.bio-thumb--groot {
    grid-column: span 2;
    grid-row: span 2;
}

.bio-thumb:hover {
    box-shadow: 0 18px 48px rgba(0, 0, 0, .20);
    background: rgba(0, 0, 0, .06);   /* zie commentaar.php #101 */
    color: inherit;
}

.bio-thumb img {
    width: 100%;
    height: 100%;             /* zie commentaar.php #102 */
    object-fit: cover;
    display: block;
    border-radius: 0;
    box-shadow: none;
    transition: transform .6s cubic-bezier(.2, .8, .3, 1), filter .3s ease;
}
.bio-thumb:hover img {
    transform: scale(1.06);
}

.bio-thumb-label {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 28px 14px 12px;
    background: linear-gradient(to top, rgba(0, 0, 0, .72), transparent);
    color: #fff;
    font-size: var(--fs-klein);
    font-weight: 700;
    line-height: 1.3;
    opacity: 0;
    translate: 0 8px;
    transition: opacity .25s ease, translate .25s ease;
    pointer-events: none;
}
.bio-thumb:hover .bio-thumb-label,
.bio-thumb:focus-visible .bio-thumb-label {
    opacity: 1;
    translate: 0 0;
}
@media (hover: none) {
    .bio-thumb-label {
        opacity: 1;
        translate: 0 0;
    }
}

.bio-thumb--nieuw {
    animation: kt-tegel-in .5s cubic-bezier(.2, .8, .3, 1) both;
}
@keyframes kt-tegel-in {
    from { opacity: 0; scale: .94; }
    to   { opacity: 1; scale: 1; }
}

.bio-meer {
    display: flex;
    justify-content: center;
    margin: 26px 0 8px;
}
.bio-meer[hidden] {
    display: none;
}
.bio-meer-knop {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 13px 26px;
    background: var(--merk-chip-bg, #111);
    color: var(--merk-chip-tekst, #fff);
    border: 1px solid rgba(0, 0, 0, .12);
    border-radius: 999px;
    font-size: var(--fs-knop);
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    cursor: pointer;
}
.bio-meer-aantal {
    opacity: .7;
}
body.hoeken-vierkant .bio-meer-knop {
    border-radius: 0;
}
body.rand-schaduw .bio-meer-knop {
    box-shadow: 4px 4px 0 0 var(--merk-4);
}

/* zie commentaar.php #103 */
.bio-thumb--video {
    position: relative;
}

.bio-thumb--video video {
    width: 100%;
    height: auto;
    object-fit: contain;
    display: block;
    pointer-events: none;   /* zie commentaar.php #104 */
    background: #000;
}

/* zie commentaar.php #105 */
.bio-thumb-placeholder {
    display: block;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #1a1a1a, #333);
}

/* zie commentaar.php #106 */
.bio-thumb-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 54px;
    height: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: 5px;      /* zie commentaar.php #107 */
    border-radius: 999px;
    background: rgba(0, 0, 0, .55);
    border: 2px solid rgba(255, 255, 255, .85);
    color: #fff;
    font-size: 20px;
    line-height: 1;
    pointer-events: none;
    transition: transform .22s ease, background .22s ease;
}

.bio-thumb--video:hover .bio-thumb-play {
    transform: translate(-50%, -50%) scale(1.1);
    background: rgba(0, 0, 0, .75);
}

/* zie commentaar.php #108 */
.bio-lightbox {
    display: none;              /* zie commentaar.php #109 */
    position: fixed;
    inset: 0;
    z-index: 9000;
    background: rgba(0, 0, 0, .92);
    backdrop-filter: blur(6px);
    justify-content: center;
    align-items: center;
    cursor: default;
}

/* zie commentaar.php #110 */
.bio-lightbox img,
.bio-lightbox video {
    max-width: min(88vw, 1200px);
    max-height: 86vh;
    object-fit: contain;
    border-radius: 12px;
    box-shadow: 0 32px 100px rgba(0, 0, 0, .5);
    user-select: none;
}

.bio-lightbox video {
    background: #000;
    outline: none;
}

/* zie commentaar.php #111 */
.bio-lightbox-caption {
    position: absolute;
    left: 50%;
    bottom: 22px;
    transform: translateX(-50%);
    max-width: 80vw;
    padding: 8px 18px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .22);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none;
    user-select: none;
}

/* zie commentaar.php #112 */
.bio-lightbox-caption:empty {
    display: none;
}

/* zie commentaar.php #113 */
.bio-lightbox-close,
.bio-lightbox-prev,
.bio-lightbox-next {
    position: absolute;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 999px;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .2s ease, transform .15s ease;
    line-height: 1;
    -webkit-user-select: none;
    user-select: none;
}

.bio-lightbox-close:hover,
.bio-lightbox-prev:hover,
.bio-lightbox-next:hover {
    background: rgba(255, 255, 255, .28);
}

/* zie commentaar.php #114 */
.bio-lightbox-close {
    top: 20px;
    right: 24px;
    font-size: 26px;
    width: 48px;
    height: 48px;
}

/* zie commentaar.php #115 */
.bio-lightbox-prev,
.bio-lightbox-next {
    top: 50%;
    transform: translateY(-50%);
    font-size: 42px;
    width: 56px;
    height: 56px;
    padding-bottom: 3px; /* zie commentaar.php #116 */
}

.bio-lightbox-prev {
    left: 20px;
}

.bio-lightbox-next {
    right: 20px;
}

.bio-lightbox-prev:hover {
    transform: translateY(-50%) translateX(-2px);
}

.bio-lightbox-next:hover {
    transform: translateY(-50%) translateX(2px);
}

/* zie commentaar.php #117 */
@media (max-width: 760px) {
    .bio-lightbox-prev,
    .bio-lightbox-next {
        font-size: 30px;
        width: 44px;
        height: 44px;
    }

    .bio-lightbox-prev { left: 8px; }
    .bio-lightbox-next { right: 8px; }

    .bio-lightbox img {
        max-width: 96vw;
        max-height: 80vh;
    }
}

/* zie commentaar.php #118 */
@media (max-width: 1000px) {
    .bio-gallery {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}
@media (max-width: 760px) {
    .bio-gallery {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }
}

/* zie commentaar.php #119 */

/* zie commentaar.php #120 */

/* zie commentaar.php #121 */
.bio-gallery ~ .hero-image {
    margin: 44px 0 0;
}

/* zie commentaar.php #122 */
.about-paper {
    margin-top: 44px;
}

.about-row {
    margin-bottom: 26px;
}

/* zie commentaar.php #123 */
.about-intro {
    position: relative;
    padding: clamp(26px, 4vw, 50px);
    background: var(--merk-tekstblok-bg, var(--white));
    border: 1px solid rgba(0, 0, 0, .10);
    border-radius: var(--radius, 28px);
    box-shadow: 0 18px 60px rgba(0, 0, 0, .10);
    overflow: hidden;
}

.about-intro p {
    font-size: var(--fs-tekst);
    line-height: 1.65;
}

.about-intro p:first-child { margin-top: 0; }
.about-intro p:last-child  { margin-bottom: 0; }

/* zie commentaar.php #124 */
.about-intro > p:first-child::first-letter {
    float: left;
    padding: 6px 12px 0 0;
    font-size: 3.3em;
    line-height: .8;
    font-weight: 800;
    color: var(--merk-tekst);
}

/* zie commentaar.php #125 */
.about-tile {
    position: relative;
    padding: clamp(20px, 2.4vw, 30px);
    background: var(--merk-tekstblok-bg, var(--white));
    border: 1px solid rgba(0, 0, 0, .10);
    border-radius: var(--radius, 28px);
    box-shadow: 0 18px 60px rgba(0, 0, 0, .12);
    overflow: hidden;
    transition: transform .25s ease, box-shadow .25s ease;
}

.about-tile:hover {
    transform: translateY(-3px);
    box-shadow: 0 24px 70px rgba(0, 0, 0, .16);
}

.about-tile h2 {
    margin: 0 0 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(0, 0, 0, .14);
    font-size: var(--fs-kop-klein);
    line-height: 1.2;
    letter-spacing: .06em;
    text-transform: uppercase;
}

/* zie commentaar.php #126 */
.about-tile p {
    margin: 0 0 12px;
    font-size: var(--fs-basis);
    line-height: 1.6;
}

.about-tile p:last-child { margin-bottom: 0; }

/* zie commentaar.php #127 */
.about-row .embed {
    margin: 0;
    align-self: start;
}

/* zie commentaar.php #128 */
@media (min-width: 761px) {
    .about-row {
        display: flex;
        align-items: flex-start;
        gap: 26px;
    }

    /* zie commentaar.php #129 */
    .about-row .about-main {
        flex: 1 1 62%;
        min-width: 0;
    }

    /* zie commentaar.php #130 */
    .about-rail {
        flex: 1 1 34%;
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 26px;
    }

    .about-rail .about-tile {
        flex: 0 0 auto;
    }

    /* zie commentaar.php #131 */
    .about-row-2 {
        align-items: flex-start;
    }
    .about-row-2 .about-tile {
        flex: 1 1 34%;
        min-width: 0;
    }

    /* zie commentaar.php #132 */
    .about-row > :only-child {
        flex: 1 1 100%;
    }
}

/* zie commentaar.php #133 */
@media (max-width: 760px) {
    .about-paper {
        margin-top: 34px;
    }

    .about-intro,
    .about-tile,
    .about-rail .about-tile,
    .about-row .embed {
        margin-bottom: 18px;
    }

    .about-row:last-child > :last-child {
        margin-bottom: 0;
    }
}

/* zie commentaar.php #134 */

.presave-page {
    max-width: 560px;
    margin: 0 auto;
}

/* zie commentaar.php #135 */
.presave-logo {
    display: block;
    margin: 28px auto 24px;
    max-height: 80px;
    max-width: 200px;
    width: auto;
    height: auto;
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* zie commentaar.php #136 */
.presave-cover {
    display: block;
    width: 100%;
    max-width: 340px;
    margin: 0 auto 28px;
    border-radius: 20px !important;
    box-shadow: 0 24px 80px rgba(0, 0, 0, .20) !important;
}

.presave-cover--upcoming {
    opacity: .45;
    filter: grayscale(.2);
}

/* zie commentaar.php #137 */
.presave-title {
    margin: 0 0 10px;
    padding-bottom: 0;
    border-bottom: none;
    font-size: clamp(36px, 8vw, 72px);
    line-height: .9;
    letter-spacing: -.055em;
    text-transform: uppercase;
    text-align: center;
}

/* zie commentaar.php #138 */
.presave-artists {
    margin: 0 0 8px;
    font-size: var(--fs-tekst);
    color: var(--muted);
    text-align: center;
}

/* zie commentaar.php #139 */
.presave-date {
    margin: 0 0 6px;
    font-size: var(--fs-klein);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #999;
    text-align: center;
}

/* zie commentaar.php #140 */
.presave-extra {
    margin: 0 0 20px;
    font-size: var(--fs-klein);
    color: #888;
    text-align: center;
}

/* zie commentaar.php #141 */
.presave-links {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 28px 0 24px;
}

.presave-link {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 20px;
    border-radius: 16px;
    text-decoration: none;
    font-size: var(--fs-knop);
    font-weight: 800;
    transition: background .18s ease, color .18s ease, transform .18s ease;
}

.presave-link:hover {
    transform: translateY(-2px);
}

.presave-link img {
    width: 28px !important;
    height: 28px !important;
    flex-shrink: 0;
    object-fit: contain;
    border-radius: 0 !important;
    box-shadow: none !important;
    margin: 0 !important;
}

/* zie commentaar.php #142 */
.presave-label {
    margin: 0;
    font-size: var(--fs-mini);
    color: #aaa;
    text-align: center;
}

/* zie commentaar.php #143 */

/* zie commentaar.php #144 */
.all-section-title {
    margin: 0 0 16px;
    font-size: var(--fs-tekst);
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #555;
    border-bottom: none;
    padding-bottom: 0;
}

.all-artists-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(160px, 100%), 1fr));
    gap: 16px;
    margin-bottom: 32px;
}

.all-artist-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 24px 14px 18px;
    background: var(--white);
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: 22px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, .09);
    text-decoration: none;
    color: var(--merk-tekst, #111);
    font-size: var(--fs-klein);
    font-weight: 800;
    text-align: center;
    letter-spacing: .02em;
    transition: background .18s ease, transform .18s ease, box-shadow .18s ease;
    backdrop-filter: blur(4px);
}

.all-artist-card:hover {
    background: var(--merk-chip-bg, #111);
    color: var(--merk-chip-tekst, #fff);
    transform: translateY(-3px);
    box-shadow: 0 16px 50px rgba(0, 0, 0, .18);
}

.all-artist-card img {
    width: 72px;
    height: 72px;
    object-fit: contain;
    border-radius: 0;
    box-shadow: none;
}

@media (max-width: 760px) {
    .all-artists-grid {
        grid-template-columns: repeat(auto-fill, minmax(min(130px, 100%), 1fr));
        gap: 12px;
    }
}

/* zie commentaar.php #145 */
.admin-artist-switcher {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 20px;
}

.admin-artist-btn {
    padding: 9px 16px;
    background: var(--merk-chip-bg, #111);
    color: var(--merk-chip-tekst, #fff);
    border: 1px solid rgba(0, 0, 0, .12);
    border-radius: 999px;
    font-size: var(--fs-knop);
    font-weight: 700;
    text-decoration: none;
    transition: background .18s ease, color .18s ease;
}

.admin-artist-btn.active,
.admin-tab-active {
    background: var(--merk-chip-tekst, #fff);
    color: var(--merk-chip-bg, #111);
    border-color: var(--merk-chip-bg, #111);
}

/* zie commentaar.php #229 */
.admin-algemeen {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0 0 18px;
}
.admin-algemeen .admin-tabs-label {
    padding-top: 0;
    margin-right: 8px;
}
.admin-algemeen .admin-tab {
    padding: 7px 14px;
    font-size: var(--fs-mini);
}
.admin-artiestblok {
    margin: 0 0 36px;
    padding: 18px 20px 20px;
    background: var(--merk-tekstblok-bg, #fff);
    border: 1px solid rgba(0, 0, 0, .10);
    border-radius: var(--radius, 12px);
}
body.hoeken-vierkant .admin-artiestblok {
    border-radius: 0;
}
.admin-artiestblok .admin-tabs {
    margin-bottom: 0;
}
.admin-artiestkeuze {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
    margin: 0 0 18px;
    padding: 0 0 16px;
    border-bottom: 1px solid rgba(0, 0, 0, .10);
}
.admin-artiestkeuze label {
    font-size: var(--fs-mini);
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
}
.admin-artiestkeuze select {
    width: auto;
    min-width: 220px;
    max-width: 100%;
    font-weight: 700;
}
.admin-artiestkeuze-link {
    margin-left: auto;
    font-size: var(--fs-klein);
}
.met-artiestkeuze .admin-artist-switcher:not(.admin-artist-switcher--houden) {
    display: none;
}
.admin-tabs-uit .admin-tab {
    opacity: .5;
}
.admin-tabs-uit .admin-tab:hover,
.admin-tabs-uit .admin-tab-active {
    opacity: 1;
}
.admin-tabs-uit-link {
    align-self: center;
    font-size: var(--fs-klein);
}

/* zie commentaar.php #234 */
.stijl-beelden {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
    gap: 18px;
    margin: 0 0 22px;
}
.stijl-beeld {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.stijl-beeld-voorbeeld {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 140px;
    overflow: hidden;
    border: 1px dashed rgba(0, 0, 0, .2);
    border-radius: 12px;
    background: rgba(0, 0, 0, .04);
    font-size: var(--fs-klein);
    opacity: .9;
}
.stijl-beeld-voorbeeld img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0;
    box-shadow: none;
}
.stijl-beeld-voorbeeld--logo {
    background-color: #fff;
    background-image: linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%),
                      linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%);
    background-size: 16px 16px;
    background-position: 0 0, 8px 8px;
}
.stijl-beeld-voorbeeld--logo img {
    object-fit: contain;
    padding: 12px;
}
body.hoeken-vierkant .stijl-beeld-voorbeeld {
    border-radius: 0;
}

.bst-totaal {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 6px 0 18px;
}
.bst-knoppen {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 6px 0 14px;
}
.bst-raster {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(190px, 100%), 1fr));
    gap: 12px;
    margin: 0 0 18px;
}
.bst-tegel {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--merk-tekstblok-bg, #fff);
    border: 2px solid #e2a3a3;
    border-radius: 12px;
    cursor: pointer;
}
.bst-tegel.is-gebruikt {
    border-color: rgba(0, 0, 0, .10);
    cursor: default;
}
.bst-tegel:has(input:checked) {
    border-color: #a11d1d;
    box-shadow: 0 0 0 3px rgba(161, 29, 29, .18);
}
.bst-beeld {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 4 / 3;
    background: repeating-conic-gradient(#eee 0% 25%, #fff 0% 50%) 50% / 16px 16px;
}
.bst-beeld img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 0;
    box-shadow: none;
}
.bst-soort {
    font-size: var(--fs-mini);
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    opacity: .7;
}
.bst-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 12px 12px;
    font-size: var(--fs-klein);
    overflow-wrap: anywhere;
}
.bst-info strong {
    font-size: var(--fs-klein);
}
.bst-info small {
    font-size: var(--fs-mini);
    opacity: .75;
}
.bst-reden {
    font-style: italic;
}
.bst-form .af-actions {
    margin-bottom: 18px;
}
body.hoeken-vierkant .bst-tegel {
    border-radius: 0;
}

/* zie commentaar.php #146 */
.admin-tabs {
    display: grid;
    gap: 12px;
    margin-bottom: 36px;
}
.admin-tabs-groep {
    display: grid;
    grid-template-columns: 110px 1fr;
    align-items: start;
    gap: 8px 16px;
}
.admin-tabs-label {
    padding-top: 12px;
    font-size: var(--fs-mini);
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    opacity: .8;
}
.admin-tabs-rij {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.admin-tab.admin-tab-active {
    outline: 2px solid var(--merk-tekst, #111);
    outline-offset: 3px;
}
.admin-tab-extern {
    opacity: .75;
}
@media (max-width: 640px) {
    .admin-tabs-groep {
        grid-template-columns: 1fr;
        gap: 6px;
    }
    .admin-tabs-label {
        padding-top: 0;
    }
}

.admin-tab {
    padding: 11px 20px;
    background: var(--merk-chip-bg, #111);
    color: var(--merk-chip-tekst, #fff);
    border: 1px solid rgba(0, 0, 0, .12);
    border-radius: 999px;
    font-size: var(--fs-knop);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .08em;
    text-decoration: none;
    transition: background .18s ease, color .18s ease;
}
body.hoeken-vierkant .admin-tab,
body.hoeken-vierkant .admin-artist-btn {
    border-radius: 0;
}


/* zie commentaar.php #147 */
.admin-form-card {
    padding: clamp(22px, 3vw, 40px);
    background: var(--merk-tekstblok-bg, var(--white));
    border: 1px solid rgba(0, 0, 0, .10);
    border-radius: var(--radius, 28px);
    box-shadow: 0 18px 60px rgba(0, 0, 0, .10);
    margin-bottom: 48px;
}

.admin-form-title {
    margin: 0 0 28px;
    font-size: var(--fs-kop);
    letter-spacing: -.04em;
}

/* zie commentaar.php #148 */
.admin-form-subtitel {
    margin: 24px 0 2px;
    font-size: var(--fs-basis);
    font-weight: 700;
}
.admin-form-subtitel:first-of-type {
    margin-top: 18px;
}

/* zie commentaar.php #149 */
.admin-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px 24px;
}

.af-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* zie commentaar.php #150 */
.af-full {
    grid-column: 1 / -1;
}

.af-label {
    display: block;
    margin-bottom: 6px;
}
.af-row label,
.af-label {
    font-size: var(--fs-mini);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #666;
    color: color-mix(in srgb, currentColor 75%, transparent);
}

/* zie commentaar.php #151 */
.af-charcount {
    font-size: var(--fs-mini);
    color: #888;
}

/* zie commentaar.php #152 */
.admin-form textarea {
    min-height: 160px;
    resize: vertical;
}

/* zie commentaar.php #153 */
.af-checks {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 20px;
    align-items: center;
}

.af-checks label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--fs-basis);
    text-transform: none;
    letter-spacing: 0;
    color: #333;
    cursor: pointer;
}

input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--merk-chip-bg, #111);
}

/* zie commentaar.php #154 */
.af-checks-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(180px, 100%), 1fr));
    gap: 10px 18px;
    margin-top: 4px;
}

.af-check-inline {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--fs-basis);
    color: #333;
    cursor: pointer;
    padding: 6px 0;
}

.af-check-inline input[type="checkbox"] {
    flex: 0 0 auto;
}

/* zie commentaar.php #155 */
.af-actions {
    flex-direction: row;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
}

body.hoeken-vierkant .af-btn-save,
body.hoeken-vierkant .af-btn-cancel,
body.hoeken-vierkant .af-btn-danger,
body.hoeken-vierkant .al-btn-edit,
body.hoeken-vierkant .al-btn-delete {
    border-radius: 0;
}

.af-btn-cancel {
    padding: 13px 20px;
    background: transparent;
    color: #666;
    border: 1px solid rgba(0, 0, 0, .18);
    border-radius: 999px;
    font-size: var(--fs-knop);
    font-weight: 700;
    text-decoration: none;
    transition: background .2s ease, color .2s ease;
}

.af-btn-cancel:hover {
    background: #f0f0f0;
    color: var(--merk-tekst, #111);
}

/* zie commentaar.php #156 */
.admin-list-title {
    margin: 0 0 16px;
    font-size: var(--fs-kop);
    letter-spacing: -.03em;
}

.admin-list,
.mandje-checkout-velden {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* zie commentaar.php #157 */
.admin-list-cat {
    margin: 22px 0 2px;
    font-size: var(--fs-klein);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--merk-tekst, #111);
    border-bottom: 2px solid rgba(0, 0, 0, .12);
    padding-bottom: 6px;
}
.admin-list-cat:first-child {
    margin-top: 4px;
}

/* zie commentaar.php #158 */

/* zie commentaar.php #159 */
.admin-list-row-inactief {
    opacity: .62;
}

.admin-list-row {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    background: var(--merk-tekstblok-bg, var(--white));
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: calc(var(--radius, 24px) * 0.75);
    flex-wrap: wrap;
}

.admin-list-info {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.admin-list-info strong {
    font-size: var(--fs-basis);
    font-weight: 800;
    color: var(--merk-tekst, #111);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 2px 0;
}

.admin-list-info span {
    font-size: var(--fs-klein);
    color: #555;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.admin-list-info small {
    font-size: var(--fs-mini);
    color: #999;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.admin-list-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
    flex-wrap: wrap;
}

.al-btn-edit,
.al-btn-delete {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 8px 14px;
    border-radius: 999px;
    font-size: var(--fs-knop);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .06em;
    text-decoration: none;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background .18s ease, color .18s ease;
    white-space: nowrap;
}

.al-btn-edit {
    background: rgba(0, 0, 0, .06);
    color: #333;
    border-color: rgba(0, 0, 0, .12);
}

.al-btn-delete {
    background: #fff0f0;
    color: #c0392b;
    border-color: rgba(192, 57, 43, .22);
}

.al-btn-delete:hover {
    background: #c0392b;
    color: #fff;
    border-color: #c0392b;
}

/* zie commentaar.php #160 */
.followers-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
}

.followers-velden {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 20px;
}

.followers-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: var(--fs-mini);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: #666;
}

.followers-field input {
    width: 120px;
    margin-bottom: 0;
}

/* zie commentaar.php #161 */
@media (max-width: 760px) {
    .admin-form {
        grid-template-columns: 1fr;
    }

    .af-row {
        grid-column: 1 / -1;
    }

    .admin-list-row {
        flex-direction: column;
        align-items: flex-start;
    }

    .admin-list-actions {
        width: 100%;
    }

    .al-btn-edit,
    .al-btn-delete {
        flex: 1;
        justify-content: center;
    }

    .followers-field input {
        width: 100%;
    }
}
@media (max-width: 760px) {

    #wrapper {
        width: min(100% - 18px, 1680px);
        padding: 80px 0 40px; /* zie commentaar.php #162 */
    }

    #logo {
        padding: 0 0 18px;
    }

    .logo {
        max-width: 90vw;
        max-height: 225px;
    }

    /* zie commentaar.php #163 */
    .menu-toggle,
    body.menu-positie-rechtsboven .menu-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* zie commentaar.php #164 */
    nav.main-menu {
        position: fixed;
        top: 88px;          /* zie commentaar.php #165 */
        left: 16px;
        right: 16px;
        margin: 0 auto;
        max-width: 480px;
        z-index: 1000;
        display: none;      /* zie commentaar.php #166 */
        flex-direction: column;
        border-radius: 22px;
        padding: 10px;
        gap: 4px;
    }

    /* zie commentaar.php #167 */
    body.menu-stijl-balk nav.main-menu {
        top: 88px;
        left: 16px;
        right: 16px;
        width: auto;
        max-width: 480px;
        padding: 10px;
        border-bottom: none;
    }

    body.hoeken-vierkant nav.main-menu {
        border-radius: 0;
    }

    /* zie commentaar.php #168 */
    nav.main-menu.is-open {
        display: flex;
    }

    #menu a.linkmenu {
        text-align: center;
        padding: 14px 10px;
        font-size: var(--fs-knop);
        border-radius: 14px;
    }

    #content {
        padding: 22px;
        border-radius: 22px;
    }

    h1 {
        font-size: clamp(42px, 16vw, 78px);
        letter-spacing: -.065em;
    }

    h2 {
        font-size: clamp(30px, 10vw, 54px);
    }

    p {
        font-size: var(--fs-basis);
    }

    /* zie commentaar.php #169 */
    img[width] {
        max-width: 100% !important;
        height: auto !important;
    }

    /* zie commentaar.php #170 */
    .music-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    /* zie commentaar.php #171 */
    .shows-item {
        grid-template-columns: auto minmax(0, 1fr);
        gap: 12px 16px;
    }

    .shows-item--komend {
        padding: 16px;
    }

    .shows-knoppen {
        grid-column: 1 / -1;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
    }

    .shows-item--verleden .shows-knoppen {
        grid-column: 2;
    }

    .shows-item--eerst .shows-datum {
        min-width: 80px;
    }

    .shows-item--eerst .shows-dag {
        font-size: 2.2rem;
    }

    /* zie commentaar.php #172 */
    .work-card-header {
        flex-direction: column;
    }

    .work-period {
        display: inline-block;
        margin-top: 14px;
    }

    /* zie commentaar.php #173 */
    .press-grid {
        grid-template-columns: 1fr;
    }

    .press-card {
        min-height: auto;
    }

    /* zie commentaar.php #174 */
    .contact-links {
        grid-template-columns: 1fr;
    }
}

/* zie commentaar.php #175 */
@media (max-width: 430px) {

    nav.main-menu {
        width: calc(100% - 20px);
    }
}

/* zie commentaar.php #176 */
.cv { max-width: 900px; }
.cv-section { padding: 30px 0 4px; border-top: 1px solid var(--line); }
.cv-section:first-child { border-top: none; padding-top: 6px; }
.cv h2.cv-section-title {
    margin: 0 0 22px;
    font-size: var(--fs-kop-klein);
    line-height: 1.05;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.cv-entry-head {
    display: flex; justify-content: space-between; align-items: baseline;
    gap: 18px; margin: 26px 0 2px; flex-wrap: wrap;
}
.cv-entry-head:first-of-type { margin-top: 0; }
.cv-entry-title { color: var(--merk-tekst, #111); font-weight: 800; font-size: var(--fs-kop-klein); letter-spacing: -.01em; }
.cv-entry-date { color: var(--muted); font-size: var(--fs-klein); font-weight: 600; white-space: nowrap; letter-spacing: .02em; }
.cv-entry-sub { margin: 0 0 10px; color: var(--muted); font-size: var(--fs-basis); font-style: italic; }
.cv-text { margin: 0 0 16px; color: var(--muted); font-size: var(--fs-tekst); line-height: 1.6; }
.cv-list { margin: 0 0 18px; padding: 0; list-style: none; }
.cv-list li { position: relative; margin: 0 0 9px; padding-left: 22px; color: var(--muted); font-size: var(--fs-tekst); line-height: 1.55; }
.cv-list li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 7px; height: 7px; border-radius: 50%; background: #111; }
@media (max-width: 600px) {
    .cv-entry-head { flex-direction: column; gap: 2px; }
    .cv-entry-date { font-size: var(--fs-klein); }
}

/* zie commentaar.php #177 */
.cv-actions { margin: 0 0 30px; }
.cv-export-btn {
    display: inline-block; padding: 12px 22px; border: 1px solid var(--merk-chip-bg, #111); border-radius: 999px;
    font-family: var(--merk-font-tekst), "Outfit","Space Grotesk",Arial,sans-serif;
    font-size: var(--fs-knop); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; text-decoration: none;
}
@media print { .cv-actions--screen { display: none !important; } }

/* zie commentaar.php #178 */
.zicht-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--line); border-radius: 16px; margin-bottom: 18px; }
.zicht-table { border-collapse: collapse; width: 100%; min-width: 360px; background: #fff; font-size: var(--fs-klein); }
.zicht-table th, .zicht-table td { padding: 9px 10px; text-align: center; border-bottom: 1px solid var(--line); white-space: nowrap; }
.zicht-table thead th { background: #f4f4f4; color: var(--merk-tekst, #111); font-weight: 800; font-size: var(--fs-mini); text-transform: uppercase; letter-spacing: .04em; }
.zicht-artist-col { text-align: left !important; min-width: 120px; }

/* zie commentaar.php #179 */
.extra-bron-rij { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 6px; }
.extra-bron-chip {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 7px 12px; border: 1px solid var(--line); border-radius: 999px;
    background: #fff; font-size: var(--fs-klein); cursor: pointer; user-select: none;
}
.extra-bron-chip input { width: 16px; height: 16px; cursor: pointer; }
.extra-bron-chip:hover { border-color: var(--merk-tekst, #111); }

/* zie commentaar.php #180 */
.about-export-actions {
    margin: 34px 0 10px;
    text-align: center;
}

#content a.about-export-btn {
    display: inline-block;
    padding: 9px 18px;
    border-radius: 999px;
    font-family: var(--merk-font-tekst), "Outfit", "Space Grotesk", Arial, sans-serif;
    font-size: var(--fs-knop);
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    text-decoration: none;
}

/* zie commentaar.php #181 */
/* zie commentaar.php #182 */
#content a.shows-video-link {
    display: inline-block;
    margin-top: 6px;
    font-size: var(--fs-knop);
    font-weight: 700;
    text-decoration: none;
    padding: 3px 10px;
    border-radius: 999px;
    line-height: 1.6;
}

#content a.shows-video-link:hover {
    background: var(--merk-chip-tekst, #fff) !important;
    color: var(--merk-chip-bg, #111) !important;
    border-color: var(--merk-chip-bg, #111);
}

/* zie commentaar.php #183 */
/* zie commentaar.php #184 */
.diensten-thumbs {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 6px;
    margin-top: 22px;
}

.diensten-thumb {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;   /* zie commentaar.php #185 */
    border-radius: 8px;
    background: #111;
    cursor: pointer;
    text-decoration: none;
    overflow: hidden;
}

.diensten-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;     /* zie commentaar.php #186 */
    border-radius: 0;
    box-shadow: none;
    transition: transform .3s ease;
}

.diensten-thumb .diensten-thumb-placeholder {
    display: block;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #2a2a2a, #444);
}

.diensten-thumb:hover img {
    transform: scale(1.06);
}

/* zie commentaar.php #187 */
.diensten-thumb-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, .55);
    border: 2px solid rgba(255, 255, 255, .9);
    border-radius: 999px;
    color: #fff;
    font-size: 13px;
    padding-left: 2px;
    pointer-events: none;
}

@media (max-width: 900px) {
    .diensten-thumbs { grid-template-columns: repeat(6, 1fr); }
}

@media (max-width: 520px) {
    .diensten-thumbs { grid-template-columns: repeat(4, 1fr); }
}

/* zie commentaar.php #188 */
.diensten-lightbox {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9000;
    background: rgba(0, 0, 0, .92);
    backdrop-filter: blur(6px);
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.diensten-lightbox--open {
    display: flex;
}

.diensten-lightbox-inner {
    max-width: 92vw;
    max-height: 88vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.diensten-lightbox-inner img,
.diensten-lightbox-inner video {
    max-width: 92vw;
    max-height: 88vh;
    width: auto;
    height: auto;
    border-radius: 10px;
    box-shadow: 0 20px 70px rgba(0, 0, 0, .5);
}

.diensten-lightbox-close {
    position: absolute;
    top: 18px;
    right: 22px;
    width: 44px;
    height: 44px;
    background: rgba(255, 255, 255, .12);
    border: none;
    border-radius: 999px;
    color: #fff;
    font-size: 30px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .18s ease;
}

.diensten-lightbox-close:hover,
.diensten-lightbox-nav:hover {
    background: rgba(255, 255, 255, .25);
}

/* zie commentaar.php #189 */
.diensten-lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 46px;
    height: 46px;
    background: rgba(255, 255, 255, .12);
    border: none;
    border-radius: 999px;
    color: #fff;
    font-size: 30px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .18s ease;
    z-index: 2;
}

.diensten-lightbox-prev { left: 18px; }
.diensten-lightbox-next { right: 18px; }

@media (max-width: 520px) {
    .diensten-lightbox-prev { left: 8px; }
    .diensten-lightbox-next { right: 8px; }
    .diensten-lightbox-nav { width: 40px; height: 40px; font-size: 26px; }
}

/* zie commentaar.php #190 */
body.hoeken-vierkant .music-cover,
body.hoeken-vierkant .work-logo,
body.hoeken-vierkant .work-solo-logo,
body.hoeken-vierkant .work-card-logo,
body.hoeken-vierkant .bio-thumb,
body.hoeken-vierkant .ws-slideshow,
body.hoeken-vierkant .ws-no-media,
body.hoeken-vierkant .bio-lightbox video,
body.hoeken-vierkant .diensten-thumb,
body.hoeken-vierkant .locatie-foto,
body.hoeken-vierkant .embed.about-main iframe,
body.hoeken-vierkant .hero-image img {
    border-radius: 0 !important;
}

/* zie commentaar.php #191 */
body.rand-schaduw .about-intro,
body.rand-schaduw .music-cover,
body.rand-schaduw .work-logo,
body.rand-schaduw .work-solo-logo,
body.rand-schaduw .work-card-logo,
body.rand-schaduw .bio-thumb,
body.rand-schaduw .ws-slideshow,
body.rand-schaduw .diensten-thumb,
body.rand-schaduw .hero-image img,
body.rand-schaduw .embed {
    box-shadow: 7px 7px 0 0 var(--merk-4) !important;
}

body.rand-gescheurd .music-cover,
body.rand-gescheurd .work-logo,
body.rand-gescheurd .work-solo-logo,
body.rand-gescheurd .work-card-logo,
body.rand-gescheurd .bio-thumb,
body.rand-gescheurd .ws-slideshow,
body.rand-gescheurd .ws-no-media,
body.rand-gescheurd .diensten-thumb,
body.rand-gescheurd .locatie-foto,
body.rand-gescheurd .embed.about-main iframe,
body.rand-gescheurd .hero-image img {
    border-radius: 0 !important;
    clip-path: polygon(0.0% 0px, 16.7% 2px, 33.3% 1px, 50.0% 3px, 66.7% 5px, 83.3% 0px, 100.0% 0px, calc(100% - 0px) 16.7%, calc(100% - 6px) 33.3%, calc(100% - 4px) 50.0%, calc(100% - 0px) 66.7%, calc(100% - 2px) 83.3%, calc(100% - 0px) 100.0%, 83.3% calc(100% - 4px), 66.7% calc(100% - 0px), 50.0% calc(100% - 4px), 33.3% calc(100% - 1px), 16.7% calc(100% - 0px), 0.0% calc(100% - 0px), 0px 83.3%, 3px 66.7%, 3px 50.0%, 0px 33.3%, 1px 16.7%, 0px 0.0%);
}

/* zie commentaar.php #192 */
.shop-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr));
    gap: 28px;
    margin-top: 28px;
}

.shop-product {
    display: flex;
    flex-direction: column;
    background: var(--merk-tekstblok-bg, var(--white));
    border: 1px solid rgba(0, 0, 0, .10);
    border-radius: var(--radius, 28px);
    overflow: hidden;
    box-shadow: 0 18px 60px rgba(0, 0, 0, .10);
}

body.hoeken-vierkant .shop-product {
    border-radius: 0;
}
body.rand-schaduw .shop-product {
    box-shadow: 7px 7px 0 0 var(--merk-4);
}
body.schuin-aan .shop-product {
    transform: rotate(-1.1deg);
}
body.schuin-aan .shop-product:nth-child(even) {
    transform: rotate(1deg);
}

.shop-product-foto {
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: #eee;
}
.shop-product-foto img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    cursor: zoom-in;
}
.shop-product-mini-fotos {
    display: flex;
    gap: 6px;
    margin-top: 6px;
}
.shop-product-mini-fotos a {
    display: block;
    width: 52px;
    height: 52px;
    flex: 0 0 auto;
    border-radius: 8px;
    overflow: hidden;
}
.shop-product-mini-fotos img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    cursor: zoom-in;
}

.shop-product-info {
    padding: 20px 22px 24px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.shop-product-info h2 {
    margin: 0;
    font-size: var(--fs-kop-klein);
    line-height: 1.05;
}
.shop-product-omschrijving {
    font-size: var(--fs-klein);
    color: var(--merk-tekst);
    margin: 2px 0 0;
}
.shop-product-prijs {
    font-size: var(--fs-kop-klein);
    font-weight: 900;
    margin: 8px 0 0;
}
.shop-uitverkocht {
    margin: 14px 0 0;
    font-weight: 800;
    color: #b00020;
    text-transform: uppercase;
    font-size: var(--fs-klein);
    letter-spacing: .04em;
}

.shop-koop-form {
    margin-top: 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.shop-koop-knop {
    display: inline-block;
    width: 100%;
    padding: 12px 18px;
    background: var(--merk-chip-bg, var(--merk-3, #111111)) !important;
    color: var(--merk-chip-tekst, #ffffff) !important;
    border: 1px solid rgba(0, 0, 0, .12);
    border-radius: 999px;
    font-size: var(--fs-knop);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .07em;
    cursor: pointer;
    transition: background .18s ease, transform .18s ease;
}
.shop-koop-knop:hover {
    background: var(--merk-chip-tekst, #111) !important;
    color: var(--merk-chip-bg, #fff) !important;
}
body.hoeken-vierkant .shop-koop-knop {
    border-radius: 0;
}
body.rand-schaduw .melding,
body.rand-schaduw .shop-koop-knop,
body.rand-schaduw .mandje-regel {
    box-shadow: 4px 4px 0 0 var(--merk-4);
}
body.schuin-chips-aan .shop-koop-knop:hover {
    transform: translateY(-2px);
}


/* zie commentaar.php #193 */
.shop-mandje-link {
    position: fixed;
    top: 16px;
    right: 16px;
    z-index: 1050;
    margin: 0;
}
.shop-mandje-link a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 18px;
    background: var(--merk-chip-bg, var(--merk-3, #111111));
    color: var(--merk-chip-tekst, #ffffff);
    border: 1px solid rgba(0, 0, 0, .12);
    border-radius: 999px;
    font-weight: 800;
    font-size: var(--fs-knop);
    text-decoration: none;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
}
body.hoeken-vierkant .shop-mandje-link a {
    border-radius: 0;
}
body.rand-schaduw .shop-mandje-link a {
    box-shadow: 4px 4px 0 0 var(--merk-4), 0 8px 24px rgba(0, 0, 0, .18);
}
.shop-mandje-teller {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .25);
    font-size: var(--fs-mini);
}
@media (max-width: 760px) {
    .shop-mandje-link {
        top: auto;
        bottom: 16px;
        right: 16px;
    }
}
/* zie commentaar.php #194 */
body.menu-positie-rechtsboven .shop-mandje-link {
    top: 74px;
}
@media (max-width: 760px) {
    body.menu-positie-rechtsboven .shop-mandje-link {
        top: auto;
        bottom: 16px;
    }
}

.shop-koop-aantal {
    width: 64px;
    padding: 8px 10px;
    border: 1px solid rgba(0, 0, 0, .18);
    border-radius: 10px;
    font-size: var(--fs-klein);
    font-family: inherit;
}
body.hoeken-vierkant .shop-koop-aantal {
    border-radius: 0;
}
body.rand-schaduw .shop-koop-aantal,
body.rand-schaduw .mandje-regel-aantal input,
body.rand-schaduw .mandje-checkout-velden input,
body.rand-schaduw .shop-koop-maat {
    box-shadow: 2px 2px 0 0 var(--merk-4);
}

.mandje-lijst {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 20px;
}

.mandje-regel {
    display: grid;
    grid-template-columns: 64px 1fr auto auto auto;
    align-items: center;
    gap: 16px;
    padding: 14px 16px;
    background: var(--merk-tekstblok-bg, var(--white));
    border: 1px solid rgba(0, 0, 0, .10);
    border-radius: var(--radius, 28px);
    box-shadow: 0 18px 60px rgba(0, 0, 0, .10);
}

.mandje-regel-foto {
    width: 64px;
    height: 64px;
    object-fit: cover;
    border-radius: 10px;
    grid-row: span 1;
}
body.hoeken-vierkant .mandje-regel-foto {
    border-radius: 0;
}

.mandje-regel-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.mandje-regel-info strong {
    font-size: var(--fs-basis);
}
.mandje-regel-prijs {
    font-size: var(--fs-mini);
    color: var(--merk-tekst);
}

.mandje-regel-aantal {
    display: flex;
    gap: 6px;
    align-items: center;
}
.mandje-regel-aantal input {
    width: 56px;
    padding: 6px 8px;
    border: 1px solid rgba(0, 0, 0, .18);
    border-radius: 8px;
    font-size: var(--fs-klein);
}
body.hoeken-vierkant .mandje-regel-aantal input {
    border-radius: 0;
}
.mandje-regel-aantal button {
    padding: 6px 10px;
    border: 1px solid rgba(0, 0, 0, .15);
    border-radius: 8px;
    background: #fff;
    font-size: var(--fs-mini);
    font-weight: 800;
    text-transform: uppercase;
    cursor: pointer;
}

.mandje-regel-subtotaal {
    font-weight: 800;
    white-space: nowrap;
}

.mandje-regel-verwijder button {
    width: 32px;
    height: 32px;
    border: none;
    background: rgba(176, 0, 32, .08);
    color: #b00020;
    border-radius: 50%;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}
.mandje-regel-verwijder button:hover {
    background: rgba(176, 0, 32, .16);
}

.mandje-totaal {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 2px solid rgba(0, 0, 0, .1);
    text-align: right;
    font-size: var(--fs-basis);
}
.mandje-totaal strong {
    font-size: var(--fs-kop-klein);
}

.mandje-checkout-form {
    margin-top: 18px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 480px;
}
.mandje-checkout-rij {
    display: flex;
    gap: 10px;
}
.mandje-checkout-form .shop-koop-knop {
    width: fit-content;
    padding: 14px 28px;
}

@media (max-width: 620px) {
    .mandje-regel {
        grid-template-columns: 56px 1fr auto;
        row-gap: 10px;
    }
    .mandje-regel-aantal { grid-column: 1 / -1; }
    .mandje-checkout-rij { flex-direction: column; }
}

/* zie commentaar.php #195 */
body.tekst-midden h1,
body.tekst-midden h2,
body.tekst-midden h3,
body.tekst-midden .about-intro p,
body.tekst-midden .about-tile p,
body.tekst-midden .music-card p,
body.tekst-midden .press-card p,
body.tekst-midden .diensten-card p,
body.tekst-midden .work-card p,
body.tekst-midden .contact-subblock p,
body.tekst-midden .cv-section p,
body.tekst-midden #content > p {
    text-align: center;
}

body.tekst-midden h1 {
    margin-left: auto;
    margin-right: auto;
}
body.tekst-midden.scheiding-gradient h1,
body.tekst-midden.scheiding-stippellijn h1,
body.tekst-midden.scheiding-effen h1 {
    /* zie commentaar.php #196 */
    width: fit-content;
    max-width: 100%;
}
body.tekst-midden .about-tile h2,
body.tekst-midden .music-card h2,
body.tekst-midden .press-card h2,
body.tekst-midden .contact-section-title,
body.tekst-midden .diensten-card h3 {
    margin-left: auto;
    margin-right: auto;
}

body.tekst-midden .about-intro > p:first-child::first-letter {
    /* zie commentaar.php #197 */
    float: none;
}

body.tekst-midden .diensten-punten,
body.tekst-midden .work-solo-body ul,
body.tekst-midden .cv-list {
    text-align: left;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
}

/* zie commentaar.php #199 */
.shop-koop-maat {
    padding: 8px 10px;
    border: 1px solid rgba(0, 0, 0, .18);
    border-radius: 10px;
    font-size: var(--fs-klein);
    font-family: inherit;
    margin-bottom: 6px;
}
body.hoeken-vierkant .shop-koop-maat {
    border-radius: 0;
}
.mandje-regel-maat {
    font-weight: 400;
    color: var(--merk-tekst);
    font-size: var(--fs-klein);
}
.mandje-verzend-melding {
    font-size: var(--fs-klein);
    color: var(--merk-tekst);
    margin: 0 0 14px;
}
.mandje-adres-status {
    font-size: var(--fs-mini);
    margin: -6px 0 4px;
    min-height: 16px;
}
.mandje-adres-status--bezig { color: #8a6100; }
.mandje-adres-status--ok { color: #1a6e3a; }
.mandje-adres-status--fout { color: #b00020; }
#mandje-straat, #mandje-plaats {
    background: rgba(0, 0, 0, .03);
}
.shop-koop-knop:disabled {
    opacity: .5;
    cursor: not-allowed;
}

/* zie commentaar.php #200 */
.bio-paginering {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin: 20px 0 8px;
}
.bio-pag-knop {
    width: 40px;
    height: 40px;
    border: 1px solid rgba(0, 0, 0, .15);
    border-radius: 50%;
    background: var(--white);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: var(--merk-tekst, #111);
}
.bio-pag-knop:disabled,
.bio-pag-knop[aria-disabled="true"] {
    opacity: .35;
    cursor: not-allowed;
    pointer-events: none;
}
body.hoeken-vierkant .bio-pag-knop {
    border-radius: 0;
}
.bio-pag-cijfers {
    font-size: var(--fs-klein);
    font-weight: 800;
    color: var(--merk-tekst);
    min-width: 60px;
    text-align: center;
}

/* zie commentaar.php #201 */
.shop-foto-vakjes {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 12px;
}
.shop-foto-vak {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 10px;
    border: 1px dashed rgba(0, 0, 0, .2);
    border-radius: 12px;
    text-align: center;
}
.shop-foto-vak img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 8px;
}
.shop-foto-vak input[type="file"] {
    width: 100%;
    font-size: var(--fs-mini);
    padding: 8px;
}
.shop-foto-verwijder-label {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: var(--fs-mini);
    color: #b00020;
    cursor: pointer;
}
.shop-foto-verwijder-label input {
    width: auto;
}

/* zie commentaar.php #202 */
.shop-maten-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 10px;
}
.shop-maat-vak {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px 10px;
    border: 1px solid rgba(0, 0, 0, .12);
    border-radius: 10px;
}
.shop-maat-voorraad-input {
    width: 100%;
    padding: 6px 8px;
    font-size: var(--fs-klein);
}

/* zie commentaar.php #203 */
.shop-lijst-thumb {
    width: 48px;
    height: 48px;
    object-fit: cover;
    border-radius: 8px;
    flex: 0 0 auto;
}

/* zie commentaar.php #204 */
.admin-info-blok {
    background: #f7f7f5;
    border-radius: calc(var(--radius, 24px) * 0.42);
    padding: 14px 16px;
    margin-bottom: 4px;
}
.admin-info-blok strong {
    font-size: var(--fs-klein);
}
.admin-info-blok p {
    margin: 8px 0 0;
    font-size: var(--fs-klein);
    color: #555;
    line-height: 1.6;
}

/* zie commentaar.php #205 */
.linkmenu-mandje {
    margin-left: auto;
}

/* zie commentaar.php #206 */
.ig-grid {
    margin-top: 0;
}
.ig-post-foto {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: rgba(0, 0, 0, .08);
}
.ig-post-foto img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .35s ease;
}
.ig-post-foto:hover img,
.ig-post-foto:focus-visible img {
    transform: scale(1.04);
}

/* zie commentaar.php #207 */
.ig-post-soort {
    position: absolute;
    top: 10px;
    right: 10px;
    padding: 4px 9px;
    border-radius: 999px;
    background: rgba(0, 0, 0, .62);
    color: #fff;
    font-size: var(--fs-mini);
    font-weight: 800;
    letter-spacing: .04em;
    line-height: 1.4;
}
body.hoeken-vierkant .ig-post-soort {
    border-radius: 0;
}

/* zie commentaar.php #208 */
.ig-post-info {
    padding: 16px 18px 18px;
}
.ig-post-tekst {
    margin: 0;
    font-size: var(--fs-klein);
    line-height: 1.45;
    color: var(--merk-tekst);
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    overflow: hidden;
}
.ig-post-datum {
    margin: 6px 0 0;
    font-size: var(--fs-mini);
    font-weight: 700;
    color: var(--merk-tekst);
    opacity: .6;
}
.ig-volg {
    margin: 32px 0 0;
}

/* zie commentaar.php #209 */
@media (max-width: 520px) {
    h1.titel-lang {
        font-size: 11.5vw;
    }
}

/* zie commentaar.php #210 */
.ig-post-cijfers {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
    margin: 8px 0 0;
    font-size: var(--fs-klein);
    font-weight: 800;
    color: var(--merk-tekst);
}

/* zie commentaar.php #211 */
.kleur-groep {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr));
    gap: 12px;
}
.kleur-keuze {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    border: 1px solid rgba(0, 0, 0, .12);
    border-radius: 14px;
    background: #fff;
}
body.hoeken-vierkant .kleur-keuze {
    border-radius: 0;
}
.af-row label.kleur-naam {
    font-size: var(--fs-klein);
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0;
    color: #222;
    line-height: 1.3;
}
.kleur-invoer {
    display: flex;
    align-items: center;
    gap: 8px;
}
.kleur-invoer input[type="color"] {
    flex: 0 0 auto;
    width: 46px;
    height: 42px;
    padding: 2px;
    margin: 0;
    border: 1px solid rgba(0, 0, 0, .18);
    border-radius: 10px;
    background: #fff;
    cursor: pointer;
}
.kleur-invoer input[type="text"] {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    padding: 10px 10px;
    font-family: monospace;
    font-size: 14px;
    border-radius: 10px;
    box-shadow: none;
}

/* zie commentaar.php #212 */
.stijl-intro {
    margin: -14px 0 24px;
    max-width: 70ch;
    font-size: var(--fs-basis);
    line-height: 1.6;
    color: #555;
}
.stijl-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
}
.stijl-blokken {
    display: grid;
    gap: 20px;
    min-width: 0;
}
.stijl-blok {
    padding: clamp(16px, 2.4vw, 26px);
    border: 1px solid rgba(0, 0, 0, .12);
    border-radius: 18px;
    background: rgba(0, 0, 0, .025);
}
body.hoeken-vierkant .stijl-blok {
    border-radius: 0;
}
.stijl-blok-kop {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 20px;
}
.stijl-blok-nr {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #111;
    color: #fff;
    font-size: 15px;
    font-weight: 800;
    font-family: system-ui, sans-serif;
}
.stijl-blok .stijl-blok-kop h3 {
    margin: 0 0 6px;
    line-height: 1.25;
    letter-spacing: -.01em;
    font-size: var(--fs-kop-klein);
}
.stijl-blok-kop p {
    margin: 4px 0 0;
    max-width: 62ch;
    font-size: var(--fs-klein);
    line-height: 1.55;
    color: #555;
}
.stijl-blok select,
.stijl-blok input[type="text"] {
    margin-bottom: 0;
}
.stijl-blok select.stijl-smal {
    max-width: 440px;
}
.stijl-tussen-rij {
    margin-top: 10px;
    padding-top: 16px;
    border-top: 1px solid rgba(0, 0, 0, .10);
}
.stijl-tussen-rij:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}
.stijl-blok h3.stijl-tussenkop {
    margin: 0 0 4px;
    font-size: var(--fs-basis);
    line-height: 1.3;
    letter-spacing: 0;
}
.stijl-bij {
    display: grid;
    gap: 12px;
    padding: 12px 14px;
    border-left: 3px solid rgba(0, 0, 0, .22);
    background: rgba(0, 0, 0, .03);
}
.stijl-vinkjes {
    gap: 10px 22px;
}
.stijl-font-voorbeeld {
    margin-top: 4px;
    padding: 14px 16px;
    border: 1px dashed rgba(0, 0, 0, .25);
    border-radius: 12px;
    background: #fff;
    color: #111;
    font-size: var(--fs-basis);
    line-height: 1.4;
}
.stijl-font-groot {
    font-size: 26px;
}
.stijl-leeg {
    margin: 0;
    font-size: var(--fs-klein);
    line-height: 1.6;
    color: #666;
}
.stijl-form {
    padding-bottom: 56px;
}
.stijl-opslaan.is-vast {
    position: fixed;
    left: 50%;
    bottom: 12px;
    transform: translateX(-50%);
    width: min(640px, calc(100% - 24px));
    box-sizing: border-box;
    z-index: 50;
}
.stijl-opslaan {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 16px;
    padding: 12px 16px;
    border: 1px solid rgba(0, 0, 0, .14);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .16);
}
body.hoeken-vierkant .stijl-opslaan {
    border-radius: 0;
}
.stijl-gewijzigd {
    font-size: var(--fs-klein);
    font-weight: 700;
    color: #a15c00;
}

/* zie commentaar.php #213 */
.stijl-voorbeeld {
    min-width: 0;
}
.stijl-voorbeeld-kop {
    margin-bottom: 8px;
    font-size: var(--fs-mini);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #666;
}
.stijl-voorbeeld-noot {
    margin: 8px 0 0;
    font-size: var(--fs-mini);
    line-height: 1.5;
    color: #777;
}
.sv-pagina {
    padding: 22px 20px 26px;
    border: 1px solid rgba(0, 0, 0, .18);
    border-radius: 14px;
    overflow: hidden;
    font-size: 14px;
    line-height: 1.55;
}
.sv-titel-rij {
    margin-bottom: 12px;
}
.sv-h1 {
    display: inline-block;
    font-size: 26px;
    font-weight: 800;
    line-height: 1.15;
}
.sv-lijn {
    height: 4px;
    margin-bottom: 18px;
    border-radius: 2px;
}
.sv-blok {
    padding: 16px;
}
.sv-h1,
.sv-h2,
.sv-h3 {
    text-transform: uppercase;
}
.sv-h2,
.sv-h3 {
    width: fit-content;
    max-width: 100%;
    margin-bottom: 8px;
}
.sv-pagina[style*="center"] .sv-h2,
.sv-pagina[style*="center"] .sv-h3 {
    margin-left: auto;
    margin-right: auto;
}
.sv-h2 {
    font-size: 18px;
    font-weight: 800;
    line-height: 1.2;
}
.sv-h3 {
    margin-top: 4px;
    font-size: 14px;
    font-weight: 700;
}
.sv-tekst {
    margin: 10px 0 14px;
    color: inherit;
    font-size: 14px;
}
.sv-link {
    font-weight: 700;
    text-decoration: underline;
}
.sv-vet {
    font-weight: 800;
}
.sv-knop {
    display: inline-block;
    padding: 9px 18px;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .08em;
}
@media (min-width: 1000px) {
    .stijl-form {
        grid-template-columns: minmax(0, 1fr) 300px;
        align-items: start;
    }
    .stijl-blokken {
        grid-column: 1;
        grid-row: 1;
    }
    .stijl-voorbeeld {
        grid-column: 2;
        grid-row: 1;
        will-change: transform;
    }
}

/* zie commentaar.php #214 */
.igb-kaart {
    margin-bottom: 24px;
}
.igb-kaart .admin-form-title {
    margin-bottom: 18px;
}
.igb-status {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 14px;
    margin-bottom: 16px;
}
.igb-account {
    font-size: var(--fs-basis);
}
.igb-waarschuwing {
    margin-bottom: 16px;
    padding: 14px 16px;
    border: 1px solid #f0b3b3;
    border-left-width: 4px;
    border-radius: 10px;
    background: #fdf3f3;
    color: #5c1616;
}
.igb-waarschuwing strong {
    font-size: var(--fs-basis);
    color: #a11d1d;
}
.igb-waarschuwing p {
    margin: 6px 0 0;
    max-width: 72ch;
    font-size: var(--fs-klein);
    line-height: 1.55;
    color: #5c1616;
}
.igb-waarschuwing p.igb-techniek {
    font-size: var(--fs-mini);
    color: #8a5a5a;
    word-break: break-word;
}
.igb-mini {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 6px;
    max-width: 560px;
    margin-bottom: 18px;
}
.igb-mini img {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 8px;
    background: #eee;
}
.igb-feiten {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr));
    gap: 12px;
    margin: 0 0 20px;
}
.igb-feiten > div {
    padding: 12px 14px;
    border: 1px solid rgba(0, 0, 0, .12);
    border-radius: 12px;
    background: rgba(0, 0, 0, .025);
}
.igb-feiten dt {
    font-size: var(--fs-mini);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #666;
}
.igb-feiten dd {
    margin: 4px 0 0;
    font-size: var(--fs-basis);
    font-weight: 700;
    color: #111;
}
.igb-feiten dd.is-fout {
    color: #a11d1d;
}
.igb-feiten dd small {
    display: block;
    margin-top: 2px;
    font-size: var(--fs-mini);
    font-weight: 400;
    line-height: 1.45;
    color: #666;
}
.igb-acties {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 16px;
}
.igb-intro,
.igb-leeg {
    margin: 0 0 16px;
    max-width: 70ch;
    font-size: var(--fs-basis);
    line-height: 1.6;
    color: #555;
}
.igb-leeg {
    margin-bottom: 0;
}
.igb-vinkjes {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 2px 0 6px;
}
.af-row label.igb-vinkje {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    border: 1px solid rgba(0, 0, 0, .16);
    border-radius: 999px;
    background: #fff;
    font-size: var(--fs-klein);
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    color: #222;
    cursor: pointer;
}
.af-row label.igb-vinkje-breed {
    border-radius: 12px;
    align-self: flex-start;
}
body.hoeken-vierkant .af-row label.igb-vinkje {
    border-radius: 0;
}
.igb-vinkje input[type="checkbox"] {
    flex: 0 0 auto;
    margin: 0;
}

/* zie commentaar.php #215 */
.igb-stappen {
    list-style: none;
    counter-reset: igbstap;
    display: grid;
    gap: 12px;
    max-width: 760px;
    margin: 0 0 16px;
    padding: 0;
}
.igb-stappen li {
    counter-increment: igbstap;
    position: relative;
    min-height: 34px;
    padding-left: 48px;
}
.igb-stappen li::before {
    content: counter(igbstap);
    position: absolute;
    left: 0;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #111;
    color: #fff;
    font-size: 15px;
    font-weight: 800;
    font-family: system-ui, sans-serif;
}
.igb-stappen strong {
    display: block;
    font-size: var(--fs-basis);
    color: #111;
}
.igb-stappen span {
    display: block;
    margin-top: 2px;
    font-size: var(--fs-klein);
    line-height: 1.55;
    color: #555;
}
.igb-veilig {
    max-width: 760px;
    margin: 0 0 18px;
    padding: 12px 14px;
    border-radius: 10px;
    background: #f1f6f1;
    font-size: var(--fs-klein);
    line-height: 1.55;
    color: #2c4a35;
}
.igb-uitklap {
    border-top: 1px solid rgba(0, 0, 0, .10);
}
.igb-kaart > .igb-uitklap:first-child {
    border-top: 0;
}
.igb-uitklap > summary {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 12px;
    padding: 14px 0;
    font-size: var(--fs-basis);
    font-weight: 800;
    color: #111;
    cursor: pointer;
    list-style: none;
}
.igb-uitklap > summary::-webkit-details-marker {
    display: none;
}
.igb-uitklap > summary::before {
    content: "+";
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: 1px solid rgba(0, 0, 0, .25);
    border-radius: 50%;
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
    font-family: system-ui, sans-serif;
}
.igb-uitklap[open] > summary::before {
    content: "\2212";
}
.igb-uitklap[open] {
    padding-bottom: 18px;
}
.igb-kaart > .igb-uitklap:first-child:not([open]) > summary {
    padding: 0;
}
.igb-gevaar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px 20px;
    margin-top: 24px;
    padding-top: 18px;
    border-top: 1px solid rgba(0, 0, 0, .10);
}
.igb-gevaar strong {
    display: block;
    font-size: var(--fs-basis);
    color: #111;
}
.igb-gevaar span {
    display: block;
    font-size: var(--fs-klein);
    color: #666;
}
.igb-label {
    display: inline-block;
    margin-bottom: 10px;
    padding: 4px 10px;
    border-radius: 6px;
    background: #111;
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    font-family: system-ui, sans-serif;
    text-transform: uppercase;
    letter-spacing: .08em;
}
.igb-beheerder {
    border-style: dashed;
}
@media (max-width: 560px) {
    .igb-mini {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* zie commentaar.php #217 */
.af-hint {
    max-width: 70ch;
    margin: 0;
    font-size: var(--fs-klein);
    font-weight: 400;
    line-height: 1.5;
    text-transform: none;
    letter-spacing: 0;
    color: #666;
    color: color-mix(in srgb, currentColor 75%, transparent);
}
p.af-hint,
ul.af-hint,
small.af-hint {
    display: block;
}
p.af-hint {
    margin-bottom: 14px;
}
ul.af-hint {
    margin: 0 0 16px 18px;
    line-height: 1.7;
}
.af-row[hidden],
.af-hint[hidden] {
    display: none;
}

/* zie commentaar.php #226 */
.admin-form-card[hidden],
.admin-nieuw-knop[hidden] {
    display: none;
}
.admin-nieuw-knop {
    display: flex;
    width: fit-content;
    margin: 0 0 28px;
}
.admin-inklap {
    margin: 0 0 24px;
    padding: 14px 18px;
    background: var(--merk-tekstblok-bg, #fff);
    border: 1px solid rgba(0, 0, 0, .10);
    border-radius: var(--radius, 12px);
}
body.hoeken-vierkant .admin-inklap {
    border-radius: 0;
}
.admin-inklap > summary {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 12px;
    cursor: pointer;
    font-weight: 700;
    list-style: none;
}
.admin-inklap > summary::-webkit-details-marker {
    display: none;
}
.admin-inklap > summary::before {
    content: "+";
    display: inline-block;
    width: 1em;
    font-weight: 800;
}
.admin-inklap[open] > summary::before {
    content: "\2212";
}
.admin-inklap[open] > summary {
    margin-bottom: 14px;
}
small.af-hint.af-hint-inline {
    display: inline;
}
.af-hint.is-fout {
    color: #a11d1d;
}
.af-hint.is-let-op {
    color: #8a6100;
}
.af-hint-inspring {
    margin: 4px 0 0 24px;
}
.af-hint-boven {
    margin-bottom: 12px;
}
.af-hint-los {
    margin-top: 14px;
}

/* zie commentaar.php #218 */
input[type="submit"],
.af-btn-save,
.af-btn-cancel,
.af-btn-danger,
.shop-koop-knop,
.diensten-cta,
.work-button,
.press-card a,
.cv-export-btn {
    padding: 13px 22px;
    font-size: var(--fs-knop);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .08em;
    line-height: 1.2;
}

/* zie commentaar.php #219 */
.login-form {
    display: grid;
    gap: 14px;
    max-width: 460px;
}
.login-form p {
    margin: 0;
}

/* zie commentaar.php #220 */
body.rand-schaduw .contact-subblock,
body.rand-schaduw .admin-form-card,
body.rand-schaduw .all-artist-card,
body.rand-schaduw .stijl-blok {
    box-shadow: 7px 7px 0 0 var(--merk-4);
}
body.rand-schaduw input[type="text"],
body.rand-schaduw input[type="password"],
body.rand-schaduw input[type="email"],
body.rand-schaduw input[type="url"],
body.rand-schaduw input[type="date"],
body.rand-schaduw input[type="number"],
body.rand-schaduw select,
body.rand-schaduw textarea,
body.rand-schaduw input[type="submit"],
body.rand-schaduw .af-btn-save,
body.rand-schaduw .af-btn-cancel,
body.rand-schaduw .af-btn-danger,
body.rand-schaduw .al-btn-edit,
body.rand-schaduw .al-btn-delete,
body.rand-schaduw .admin-tab,
body.rand-schaduw .admin-artist-btn,
body.rand-schaduw #menu a.linkmenu {
    box-shadow: 4px 4px 0 0 var(--merk-4);
}
body.rand-schaduw .kleur-invoer input[type="text"] {
    box-shadow: none;
}

/* zie commentaar.php #221 */
.site-icoon {
    display: inline-block;
    width: 1.3em;
    height: 1.3em;
    margin: 0 .45em 0 0;
    vertical-align: -.28em;
    object-fit: contain;
}
.ig-post-cijfers .site-icoon {
    margin-right: .3em;
}

/* zie commentaar.php #222 */
.stijl-brandguide {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 16px;
    margin: 0 0 24px;
}
.stijl-brandguide .af-btn-cancel {
    flex: 0 0 auto;
}

/* zie commentaar.php #223 */
body.titel-anim-subtiel .titel-observe {
    opacity: 0;
    translate: 0 16px;
    transition: opacity .6s ease-out, translate .6s ease-out;
}
body.titel-anim-overdreven .titel-observe {
    opacity: 0;
    translate: -70vw 0;
    scale: .7;
    rotate: -8deg;
    transition: opacity .35s ease-out,
                translate .85s cubic-bezier(.16, 1.45, .3, 1),
                scale .85s cubic-bezier(.16, 1.45, .3, 1),
                rotate .85s cubic-bezier(.16, 1.45, .3, 1);
}
body.titel-anim-overdreven .titel-observe.titel-observe-rechts {
    translate: 70vw 0;
    rotate: 8deg;
}
body.titel-anim-subtiel .titel-observe.titel-in-view,
body.titel-anim-overdreven .titel-observe.titel-in-view {
    opacity: 1;
    translate: 0 0;
    scale: 1;
    rotate: 0deg;
}
@media (prefers-reduced-motion: reduce) {
    body .titel-observe {
        opacity: 1 !important;
        translate: none !important;
        scale: none !important;
        rotate: none !important;
        transition: none !important;
    }
}

/* zie commentaar.php #224 */
.locatie-kaart {
    display: block;
    grid-column: 1 / -1;
    width: 100%;
    max-width: 320px;
    height: 150px;
    margin: 12px auto 0;
    border: 1px solid rgba(0, 0, 0, .12);
    border-radius: 14px;
    background: #eee;
}
body.hoeken-vierkant .locatie-kaart {
    border-radius: 0;
}

/* zie commentaar.php #239 */
.seo-voorbeeld {
    margin-top: 16px;
}
.seo-voorbeeld-kaart {
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-width: 600px;
    margin: 8px 0;
    padding: 14px 16px;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, .12);
    border-radius: 12px;
    font-family: Arial, sans-serif;
    text-transform: none;
    letter-spacing: 0;
}
.seo-voorbeeld-site {
    color: #202124;
    font-size: 14px;
}
.seo-voorbeeld-url {
    color: #4d5156;
    font-size: 12px;
    overflow-wrap: anywhere;
}
.seo-voorbeeld-titel {
    margin-top: 4px;
    color: #1a0dab;
    font-size: 20px;
    line-height: 1.3;
}
.seo-voorbeeld-tekst {
    color: #4d5156;
    font-size: 14px;
    line-height: 1.58;
}
.sr-alleen {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* zie commentaar.php #240 */
.shop-info-balk {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 18px;
    margin: 4px 0 8px;
}
.shop-info-chip {
    padding: 7px 14px;
    border: 1px solid color-mix(in srgb, currentColor 18%, transparent);
    border-radius: 999px;
    font-size: var(--fs-klein);
}
.shop-info-details summary {
    cursor: pointer;
    font-size: var(--fs-klein);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.shop-info-tekst {
    margin-top: 8px;
    padding: 14px 16px;
    max-width: 640px;
    border-left: 3px solid var(--merk-1, currentColor);
    font-size: var(--fs-klein);
    line-height: 1.6;
}
.shop-status {
    margin: 0 0 22px;
    padding: 16px 18px;
    border-radius: calc(var(--radius, 24px) * .5);
    border: 1px solid transparent;
    line-height: 1.5;
}
.shop-status--ok {
    background: #e8f6ec;
    border-color: #b9e2c5;
    color: #14532d;
}
.shop-status--wacht {
    background: #fff7e6;
    border-color: #f0d9a0;
    color: #6b4a00;
}
.shop-status--fout {
    background: #fdecee;
    border-color: #f2c2c8;
    color: #7a1020;
}
.shop-status-nr {
    margin-left: 6px;
    font-weight: 800;
    opacity: .7;
}
.shop-foto-hoofd {
    position: relative;
    display: block;
    height: 100%;
}
.shop-foto-label {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 2;
    padding: 6px 12px;
    background: #111;
    color: #fff;
    border-radius: 999px;
    font-size: var(--fs-mini);
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.shop-product--uitverkocht .shop-product-foto img {
    filter: grayscale(1);
    opacity: .6;
}
.shop-voorraad-laag {
    margin: 0;
    font-size: var(--fs-klein);
    font-weight: 700;
    color: #b45309;
}
.shop-koop-rij {
    display: flex;
    gap: 8px;
    align-items: stretch;
}
.shop-koop-aantal-label {
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: 76px;
    flex: 0 0 auto;
}
.shop-koop-aantal-label span {
    font-size: var(--fs-mini);
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    opacity: .7;
}
.shop-koop-rij .shop-koop-aantal {
    width: 100%;
}
.shop-koop-rij .shop-koop-knop {
    flex: 1 1 auto;
    align-self: flex-end;
}
.shop-koop-knop:disabled {
    opacity: .45;
    cursor: not-allowed;
}
.mandje-totalen {
    margin-top: 18px;
    margin-left: auto;
    max-width: 360px;
}
.mandje-totalen-regel {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 4px 0;
    font-size: var(--fs-basis);
}
.mandje-totalen-tip {
    margin-top: 6px;
    font-size: var(--fs-klein);
    font-weight: 700;
    color: #b45309;
    text-align: right;
}
.mandje-totalen .mandje-totaal {
    margin-top: 10px;
}
.mandje-akkoord {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 12px 0 0;
    font-size: var(--fs-klein);
    cursor: pointer;
}
.mandje-veilig {
    margin: 14px 0;
    font-size: var(--fs-klein);
    opacity: .75;
}
.status-label.is-let-op {
    background: #fff7e6;
    color: #8a6100;
}
.shop-adm-status {
    margin: 0 0 14px;
}
.shop-o-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}
.shop-o-lijst {
    display: grid;
    gap: 14px;
}
.shop-o-kaart {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: 10px 22px;
    padding: 16px 18px;
    border: 1px solid rgba(0, 0, 0, .10);
    border-radius: 14px;
    background: #fff;
}
.shop-o-kop {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
}
.shop-o-bedrag {
    font-weight: 800;
}
.shop-o-regels {
    margin: 0;
    padding-left: 18px;
    font-size: var(--fs-klein);
    line-height: 1.6;
}
.shop-o-adres {
    font-size: var(--fs-klein);
    line-height: 1.5;
}
.shop-o-verzend {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}
.shop-o-verzend input[type="text"] {
    flex: 1 1 220px;
}
@media (max-width: 600px) {
    .shop-o-kaart {
        grid-template-columns: 1fr;
    }
}