/**
 * Minder - Artiest portfolio stylesheet
 *
 * Structuur:
 *   1. CSS-variabelen
 *   2. Reset & basis
 *   3. Layout (#wrapper, #logo)
 *   4. Navigatie (desktop)
 *   5. Hamburger-knop (mobiel)
 *   6. Ingelogd-balk + admin-menu
 *   7. Content-blok
 *   8. Typografie (h1–h3, p, a)
 *   9. Afbeeldingen & hero
 *  10. Formulieren
 *  11. Embed (Spotify iframe)
 *  12. Muziekpagina (.music-grid)
 *  13. Showspagina (.table_shows)
 *  14. Werkpagina (.work-grid)
 *  15. Perspagina (.press-grid)
 *  16. Contactpagina (.contact-grid)
 *  17. Footer
 *  18. Bio-galerij (#bio_gallery)
 *  19. Pre-save pagina (.presave-page)
 *  20. Responsive – tablet/mobiel (≤ 760 px)
 *  21. Responsive – kleine telefoons (≤ 430 px)
 */

/* ─── 1. CSS-variabelen ────────────────────────────────────────── */
:root {
    /* 5 merkkleuren + 1 losse tekstkleur — per artiest instelbaar in
       Admin -> Artiesten / Stijl. Standaardwaarden hieronder gelden
       zolang een artiest niets eigens heeft ingevuld. */
    --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';

    --text:   var(--merk-titel-tekst, var(--merk-1));
    --muted:  var(--merk-tekst);
    --line:   color-mix(in srgb, var(--merk-3) 12%, transparent);
    /* #content-kaartachtergrond bij een meerdere-pagina's-site: gebruikt
       bewust sectiekleur 1 (niet kleur 4/schaduw!) zodat het aanpassen
       van de schaduwkleur nooit de paginakleur meeverandert. */
    --white:  color-mix(in srgb, var(--sectie-kleur-1, #ffffff) 92%, transparent);
    --radius: 24px;
}

/* ─── 2. Reset & basis ─────────────────────────────────────────── */
* {
    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: 17px;
    line-height: 1.6;
}

/* One-page weergave: elk blok krijgt wat lucht boven de anker zodat de
   koptekst niet wegduikt onder de vaste menubalk bij het scrollen. */
.onepage-sectie {
    scroll-margin-top: 96px;
}

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

/* ─── One-page: secties op maat van hun eigen inhoud ──────────────
   Alleen in one-page-modus (body.onepage-mode) — bij een normale
   meerdere-pagina's-site verandert er niets. Alleen de allereerste
   sectie (het logo) is schermvullend; alle andere secties passen zich
   gewoon aan hun eigen inhoud aan — met genoeg padding eromheen zodat
   de sectiekleur altijd duidelijk zichtbaar blijft. Heel bewust GEEN
   scroll-snap: dat voelde in de praktijk niet prettig aan op elk
   apparaat/browser. Gewoon vloeiend scrollen dus.

   Secties blijven op dezelfde breedte als de rest van de site (net
   als bij de niet-one-page-weergave) — dus links/rechts blijft altijd
   een klein randje van de eigen achtergrondfoto van de site zichtbaar,
   geen edge-to-edge kleurvlak.

   De 1e sectie (het logo) toont gewoon de kale achtergrondfoto van de
   site (transparant). Daarna cyclen de secties door 3 eigen
   sectie-achtergrondkleuren die de artiest zelf instelt in het
   adminpaneel (los van de 5 merkkleuren): kleur 1, kleur 2, kleur 3,
   kleur 1, kleur 2, kleur 3, enzovoort. */
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;
}

/* Alleen de bovenste sectie (Over, altijd de 1e inhoudssectie na het
   logo) krijgt ronde bovenhoeken; alleen de onderste (Contact, altijd
   de laatste sectie) krijgt ronde onderhoeken. Alle secties ertussen
   blijven vierkant. */
body.onepage-mode #sectie-bio {
    border-radius: var(--radius) var(--radius) 0 0;
}

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

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

/* Bij de speelse stijl krijgt ELKE sectie een harde schaduw — behalve
   de logo-sectie bovenaan, die blijft altijd schaduwloos. */
body.onepage-mode.vorm-speels .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;
}

/* #content is normaal een eigen "kaart" (achtergrond/rand/schaduw) —
   in one-page-modus zou dat een blok-in-blok geven, want de sectie
   eromheen heeft nu zelf al een achtergrond. Hier dus uitgeschakeld. */
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: #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;
}

/* ─── 3. Layout ────────────────────────────────────────────────── */
#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;
}

/* ─── Full-bleed band (herbruikbaar patroon, voor elk thema) ─────
   Deze twee classes doen HIER in de standaard CSS bewust NIETS: het
   zijn neutrale marker-classes. Een thema dat secties met een eigen,
   volle-breedte achtergrondkleur wil (zoals op ginajuly.com) kan ze
   in zijn eigen CSS activeren, bijvoorbeeld:

     .full-bleed-band {
         width: 100vw;
         margin-left: calc(50% - 50vw);
         margin-right: calc(50% - 50vw);
         background: var(--een-kleur-uit-het-palet);
     }
     .full-bleed-inner {
         width: min(100% - 32px, 1680px);
         margin: 0 auto;
     }

   Gebruik in de HTML/PHP: <div class="full-bleed-band"><div
   class="full-bleed-inner">...gewone inhoud...</div></div>.
   Zonder een thema dat dit activeert, gedragen deze elementen zich
   gewoon als heel normale, onopvallende <div>'s — dus veilig voor
   thema's (zoals de standaardstijl of Het Pompstation) die het NIET
   gebruiken: het #content-kader daar blijft intact. */

/* .kt-band-titel (de titel-band van elke pagina) krijgt wél altijd
   position:relative — nodig zodat een eventuele sticker (.kt-page-icon)
   erin altijd relatief aan zijn EIGEN sectie positioneert, niet aan de
   hele pagina (cruciaal bij one-page-sites). */
.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 {
    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;
    }
}

/* ─── 4. Navigatie – desktop ───────────────────────────────────── */
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;
    background: rgba(255, 255, 255, .86);
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: 999px;
    backdrop-filter: blur(18px);
    box-shadow: 0 18px 60px rgba(0, 0, 0, .14);
}

/* Menu volgt de vorm-instelling van de site (Admin -> Stijl -> "Stijl
   van artiest"): vierkant bij "strak vierkant"/"speels vierkant",
   met een extra schaduw bij de speelse variant. */
body.vorm-vierkant nav.main-menu {
    border-radius: 0;
}
body.vorm-speels nav.main-menu {
    box-shadow: 6px 6px 0 0 var(--merk-4), 0 18px 60px rgba(0, 0, 0, .14);
}

#menu a.linkmenu,
#menu a.linkmenulogin {
    color: #111;
    text-decoration: none;
    padding: 11px 17px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .1em;
    transition: background .2s ease, color .2s ease, transform .2s ease;
}

body.vorm-vierkant #menu a.linkmenu,
body.vorm-vierkant #menu a.linkmenulogin {
    border-radius: 0;
}

#menu a:hover {
    background: #111;
    color: #fff;
    transform: translateY(-1px);
}

/* ─── Menu-stijl "balk" (instelbaar in Admin -> Stijl) ────────────
   Alternatief voor de zwevende pil-vorm hierboven: een volle-breedte
   balk bovenaan de pagina, met een instelbare randkleur (kleur 4)
   eronder en een hover-kleur (kleur 1) op de links. Staat standaard
   uit ("normaal"). */
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;
    border-bottom: 4px solid transparent;
    border-image: linear-gradient(90deg, var(--merk-2), var(--merk-3)) 1;
    background: rgba(255, 255, 255, .96);
}

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

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

body.menu-stijl-balk #menu a:hover {
    background: var(--merk-chip-bg, var(--merk-3));
    color: #fff;
}

/* ─── 5. Menu-knop (alleen zichtbaar op mobiel) ────────────────── */
.menu-toggle {
    display: none; /* verborgen op desktop */
    position: fixed;
    top: 14px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1100;
    height: 44px;
    padding: 0 24px;
    background: rgba(255, 255, 255, .95);
    border: 1px solid rgba(0, 0, 0, .12);
    border-radius: 999px;
    backdrop-filter: blur(16px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, .16);
    cursor: pointer;
    font-family: var(--merk-font-tekst), "Outfit", "Space Grotesk", Arial, sans-serif;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #111;
    white-space: nowrap;
    line-height: 44px;
    text-align: center;
    vertical-align: middle;
}

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

/* Standaard (gecentreerde modus): tekst "MENU" zichtbaar, hamburger-
   streepjes verborgen. */
.menu-toggle-hamburger { display: none; }

/* ─── Menu-positie "rechtsboven" (instelbaar in Admin -> Stijl) ───
   Alternatief voor de gecentreerde tekst-knop hierboven: een klein,
   rond icoon-knopje met hamburger-streepjes, vastgezet rechtsboven.
   Volgt dezelfde vorm-instelling (rond/vierkant) als de rest van de
   site. Staat standaard uit ("midden"). */
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; /* overschreven door de mobiele media query hieronder */
}
body.menu-positie-rechtsboven.vorm-vierkant .menu-toggle {
    border-radius: 0;
}
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;
}
body.menu-positie-rechtsboven .menu-toggle-hamburger span {
    display: block;
    width: 100%;
    height: 2px;
    background: #111;
    border-radius: 2px;
}
body.menu-positie-rechtsboven.vorm-vierkant .menu-toggle-hamburger span {
    border-radius: 0;
}

/* ─── 6. Ingelogd-balk + admin-menu ────────────────────────────── */

/* "Ingelogd als: ..." – rechtsboven vastgezet */
p.logged-in-bar {
    position: fixed;
    top: 18px;
    right: 18px;
    z-index: 1001;
    margin: 0;
    padding: 8px 12px;
    background: rgba(255, 255, 255, .88);
    border: 1px solid rgba(0, 0, 0, .10);
    border-radius: 999px;
    backdrop-filter: blur(16px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, .12);
    color: #555;
    font-size: 12px;
}

p.logged-in-bar a {
    color: #111;
    font-weight: 800;
    text-decoration: none;
}

p.logged-in-bar a:hover {
    background: transparent;
    color: #111;
    opacity: .65;
}

/* Admin-menu (logout + content ideeën) – rechts onder de ingelogd-balk */
nav.admin-menu {
    position: fixed;
    top: 62px;
    right: 18px;
    z-index: 1001;
    display: flex;
    gap: 4px;
    padding: 6px;
    background: rgba(255, 255, 255, .88);
    border: 1px solid rgba(0, 0, 0, .10);
    border-radius: 999px;
    backdrop-filter: blur(16px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, .12);
}

nav.admin-menu a {
    font-size: 11px;
    padding: 8px 12px;
}

/* ─── 7. Content-blok ──────────────────────────────────────────── */
#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.vorm-vierkant #content {
    border-radius: 0;
}

/* ─── Sticker-plaatje op Over/Contact/Socials ─────────────────────
   Los, zwevend plaatje rechtsboven bij de titel — te kiezen in
   Admin -> Artiesten. Werkt voor elke pagina die deze klasse gebruikt
   (kt-page-icon), ongeacht welk thema/titelstijl gekozen is. */
.kt-page-icon {
    position: absolute;
    top: -16px;
    right: 4px;
    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 {
        top: -26px;
        right: 0;
        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;
    }
}

/* ─── 8. Typografie ────────────────────────────────────────────── */
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;
    /* Normale titelstijl: een lijn onder de titel met een gradiënt in
       kleur 2 -> kleur 3 (border-color ondersteunt zelf geen gradiënt,
       vandaar border-image). */
    border-bottom: 12px solid transparent;
    border-image: linear-gradient(90deg, var(--merk-2), var(--merk-3)) 1;
}

/* ─── Titel-stijl "blok" (instelbaar in Admin -> Stijl) ───────────
   Alternatief voor de normale titel hierboven: de kop (en een aantal
   kleinere sectietitels) krijgen een schuine, gekleurde achtergrond —
   net een sticker, met een harde schaduw erachter. Vaste kleurrollen:
   kleur 1 = achtergrond van het blok, titeltekst-kleur = de tekst
   erin (zelfde kleur als bij de normale titelstijl), kleur 4 = de
   harde schaduw. Werkt automatisch mee met wat de artiest daar al
   heeft ingesteld; geen apart CSS-bestand nodig. Staat standaard uit
   ("normaal"). */
body.vorm-speels h1 {
    display: inline-block;
    width: fit-content;
    background: var(--merk-1);
    color: var(--merk-titel-tekst, #ffffff);
    padding: 10px 28px;
    margin: 0 0 24px;
    border: none;
    border-bottom: none;
    text-shadow: none;
    box-shadow: 7px 7px 0 0 var(--merk-4);
    transform: rotate(-2deg);
}

body.vorm-speels .about-tile h2,
body.vorm-speels .music-card h2,
body.vorm-speels .press-card h2,
body.vorm-speels .instagram-feed-titel {
    display: inline-block;
    width: fit-content;
    max-width: fit-content;
    height: auto;
    max-height: none;
    align-self: start;
    justify-self: start;
    background: var(--merk-1);
    color: var(--merk-h2-tekst, #ffffff);
    padding: 8px 18px;
    margin: 0 0 16px;
    border-radius: 0;
    box-shadow: 4px 4px 0 0 var(--merk-4);
    transform: rotate(-3deg);
}

body.vorm-speels .contact-section-title,
body.vorm-speels .diensten-card h3 {
    display: inline-block;
    width: fit-content;
    max-width: fit-content;
    height: auto;
    max-height: none;
    align-self: start;
    justify-self: start;
    background: var(--merk-1);
    color: var(--merk-h3-tekst, #ffffff);
    padding: 8px 18px;
    margin: 0 0 16px;
    border-radius: 0;
    box-shadow: 4px 4px 0 0 var(--merk-4);
    transform: rotate(-3deg);
}

body.vorm-speels .music-card:nth-child(even) h2,
body.vorm-speels .press-card:nth-child(even) h2,
body.vorm-speels .diensten-card:nth-child(even) h3,
body.vorm-speels .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;
}

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

p {
    margin: 0 0 21px;
    color: var(--merk-tekst);
    font-size: clamp(17px, 1.7vw, 21px);
}

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;
}

/* ─── 9. Afbeeldingen & hero ───────────────────────────────────── */
.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);
}

/* ─── Hero-slideshow op de Over-pagina: alle foto's uit headers/ ───
   Bij 1 foto: alleen een zachte, voortdurende zoom/pan (Ken Burns).
   Bij meerdere: kruisvervaging ertussen, elk met diezelfde zoom/pan.
   overflow:hidden op de buitenste laag is essentieel — de zoom maakt
   de foto zelf iets groter dan zijn vak, en zonder overflow:hidden
   zou dat een horizontale scrollbalk kunnen veroorzaken.
   background:transparent hier is bewust expliciet (niet impliciet):
   bij animaties + overflow:hidden zetten sommige browsers dit element
   op een eigen renderlaag die niet altijd automatisch de achtergrond
   van de ouder (de sectiekleur) laat doorschijnen. */
.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;
}

@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 {
        animation: none !important;
        transform: none !important;
    }
    .hero-slideshow--multi img:first-child {
        opacity: 1 !important;
    }
}

/* ─── 10. Formulieren ──────────────────────────────────────────── */
input[type="text"],
input[type="password"],
textarea {
    width: 100%;
    padding: 15px 16px;
    margin-bottom: 14px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: #fff;
    color: #111;
    font: inherit;
    outline: none;
}

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

input:focus,
textarea:focus {
    border-color: #111;
}

input[type="submit"] {
    width: 100%;
    padding: 15px 18px;
    border: 1px solid #111;
    border-radius: 999px;
    background: #111;
    color: #fff;
    font-size: 14px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .09em;
    cursor: pointer;
}

input[type="submit"]:hover {
    background: #fff;
    color: #111;
}

/* Login-foutmelding */
.login-error {
    color: #c0392b;
    font-weight: 700;
}

/* ─── 11. Embed (Spotify e.d.) ─────────────────────────────────── */
.embed {
    width: 100%;
    margin-top: 34px;
    overflow: hidden;
    border-radius: 24px;
    box-shadow: 0 22px 70px rgba(0, 0, 0, .14);
}

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

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

/* ─── 12. Muziekpagina (.music-grid) ───────────────────────────── */
.music-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
    gap: 28px;
    margin-top: 20px;
}

.music-card {
    background: rgba(255, 255, 255, .82);
    border: 1px solid rgba(0, 0, 0, .10);
    border-radius: 24px;
    padding: 20px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, .10);
}

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

/* Aankomende release: vervaagd */
.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: clamp(24px, 3vw, 42px);
    line-height: .95;
    text-transform: uppercase;
}

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

/* Statistieken teller op muziek- en shows-pagina */
.stat-label {
    display: inline-block;
    margin: -8px 0 28px;
    font-size: 13px;
    font-weight: 600;
    color: #999;
    letter-spacing: .03em;
}

/* ─── 13. Showspagina (.table_shows) ───────────────────────────── */
.shows-saved {
    display: inline-block;
    margin-bottom: 20px;
    padding: 10px 18px;
    background: #e6f9ee;
    border: 1px solid #a3d9b5;
    border-radius: 999px;
    color: #1a6e3a;
    font-weight: 700;
    font-size: 14px;
}
.table_shows {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0 48px;
}

.table_shows td {
    padding: 14px 12px;
    color: #555;
    vertical-align: middle;
    border-bottom: 1px solid rgba(0, 0, 0, .08);
}

.table_shows h3 {
    margin: 0;
    color: #111;
    font-size: 17px;
    white-space: nowrap;
    letter-spacing: -.02em;
}

.table_shows big {
    font-size: 18px;
    line-height: 1.25;
}

.table_shows img {
    width: 28px !important;
    height: auto;
    display: block;
    border-radius: 0;
    box-shadow: none;
}

.table_shows small {
    display: inline-block;
    padding: 5px 9px;
    border: 1px solid rgba(0, 0, 0, .14);
    border-radius: 999px;
    color: #555;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .06em;
    white-space: normal;
}

/* ─── 14b. Werk detail pagina (.work-solo) ─────────────────────── */

/* Terugknop boven de layout */
.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: 13px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .07em;
    text-decoration: none;
    transition: background .18s ease, color .18s ease;
}

.work-back-link:hover {
    background: #111;
    color: #fff;
}

/* Tweekoloms layout: slideshow links, tekst rechts */
.work-solo-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 36px;
    align-items: start;
    margin-bottom: 48px;
}

/* ── Linker kolom: slideshow ── */
.work-solo-left {
    position: sticky;
    top: 100px; /* blijft zichtbaar terwijl je de tekst scrollt */
}

/* Slideshow: 4:3 in de linker kolom — minder dominant dan 16:9 */
.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%); }
}

/* Pijl-knoppen */
.ws-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, .82);
    border: none;
    border-radius: 999px;
    font-size: 22px;
    line-height: 1;
    color: #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; }

/* Dots */
.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;
}

/* Geen media beschikbaar */
.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: 14px;
    font-style: italic;
}

/* ── Rechter kolom: meta + tekst ── */
.work-solo-right {
    min-width: 0; /* voorkomt overflow bij lange woorden */
}

.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: clamp(28px, 3.5vw, 56px);
    line-height: .95;
    letter-spacing: -.055em;
    text-transform: uppercase;
}

/* Logo van het werk op de detailpagina, netjes boven de titel */
.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: clamp(15px, 1.5vw, 18px);
    line-height: 1.75;
    color: var(--muted);
}

.work-solo-body p   { margin: 0 0 18px; }
.work-solo-body b,
.work-solo-body strong { color: #111; }

/* Mobiel: één kolom, slideshow boven */
@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;
    }
}

/* Pijl-knoppen */
.ws-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: 48px;
    height: 48px;
    background: rgba(255, 255, 255, .85);
    border: none;
    border-radius: 999px;
    font-size: 28px;
    line-height: 1;
    color: #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);
}

/* Dots onderaan de slideshow */
.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;
    }
}

/* ─── Werk: logobalk van bedrijven/partijen ────────────────────── */
/* Logo's uit de map <artiest>/work/ worden bovenaan de Werkpagina
   getoond als nette, gelijkmatige rij. Elk logo zit in een licht
   kaartje zodat ook transparante of donkere logo's goed leesbaar zijn. */
.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: 14px;
    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;   /* logo nooit uitrekken of bijsnijden */
    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 {
    display: flex;
    flex-direction: column;
    gap: 28px;
    margin-top: 34px;
}

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

/* Als er een achtergrondafbeelding is */
.work-card--has-bg {
    background-size: cover;
    background-position: center;
    background-color: #111;
    border: none;
}

/* Overlay die de tekst leesbaar houdt over de afbeelding */
.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;
}

/* Zonder achtergrond: geen donkere overlay */
.work-card:not(.work-card--has-bg) .work-card-inner {
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

/* Tekst wit maken op kaarten met afbeelding */
.work-card--has-bg h2,
.work-card--has-bg .work-meta,
.work-card--has-bg .work-excerpt {
    color: #fff !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 {
    background: #fff;
    color: #111;
}

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

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

/* Titel-blok: klein logo naast de klantnaam */
.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: clamp(30px, 4vw, 56px);
    line-height: .95;
    letter-spacing: -.055em;
    overflow-wrap: break-word;
    min-width: 0;
}

.work-period {
    flex: 0 0 auto;
    padding: 8px 12px;
    background: #111;
    color: #fff;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
}

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

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

/* Samenwerkings-credit: "Werk door X in samenwerking met Y" */
.work-credit {
    margin: -8px 0 20px;
    padding: 8px 14px;
    display: inline-block;
    background: rgba(0, 0, 0, .05);
    border-radius: 999px;
    font-size: 13px;
    color: #444;
    line-height: 1.4;
}
.work-credit strong {
    font-weight: 700;
    color: #111;
}
/* Op de detailpagina iets meer lucht eromheen */
.work-solo-right .work-credit {
    margin: 4px 0 20px;
}
/* Op kaarten met achtergrondfoto: leesbaar op donker */
.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: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .07em;
}

.work-button:hover {
    box-shadow: inset 0 0 0 1px #111;
}

/* ─── 15. Perspagina (.press-grid) ────────────────────────────── */
.press-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, 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: rgba(255, 255, 255, .84);
    border: 1px solid rgba(0, 0, 0, .10);
    border-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: #111;
    color: #fff;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .07em;
}

.press-card h2 {
    margin: 0 0 24px;
    font-size: clamp(26px, 3vw, 46px);
    line-height: 1;
    letter-spacing: -.045em;
    text-transform: none;
    overflow-wrap: break-word;
    word-break: break-word;
    hyphens: auto;
}

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

.press-card a:hover {
    box-shadow: inset 0 0 0 1px #111;
}

/* ─── 15b. Dienstenpagina (.diensten-grid) ─────────────────────── */
.diensten-cat-titel {
    margin: 48px 0 6px;
}

.diensten-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
    gap: 22px;
    margin-top: 24px;
}

.diensten-card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: clamp(22px, 3vw, 34px);
    background: rgba(255, 255, 255, .84);
    border: 1px solid rgba(0, 0, 0, .10);
    border-radius: 28px;
    box-shadow: 0 18px 60px rgba(0, 0, 0, .10);
}

.diensten-card-uitgelicht {
    border: 2px solid #111;
}

.diensten-sticker {
    position: absolute;
    top: -14px;
    right: 22px;
    z-index: 3;
    padding: 7px 13px;
    background: #111;
    color: #fff;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
    transform: rotate(2.5deg);
}

.diensten-card h3 {
    margin: 0 0 4px;
    font-size: clamp(22px, 2.2vw, 30px);
    line-height: 1.1;
    letter-spacing: -.03em;
}

.diensten-subtitel {
    margin: 0 0 16px;
    color: var(--muted);
    font-size: 15px;
}

.diensten-prijs {
    margin: 0;
    font-size: clamp(26px, 2.6vw, 36px);
    font-weight: 800;
    letter-spacing: -.03em;
    line-height: 1;
}

.diensten-prijs-info {
    margin: 6px 0 0;
    color: var(--muted);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .03em;
}

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

.diensten-punten li {
    position: relative;
    padding: 8px 0 8px 24px;
    font-size: 15px;
    border-top: 1px dashed rgba(0, 0, 0, .12);
}

.diensten-punten li:first-child {
    border-top: none;
}

.diensten-punten li::before {
    content: "+";
    position: absolute;
    left: 2px;
    font-weight: 800;
}

.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: #111 !important;
    color: #fff !important;
}

/* Hypeddit-knop krijgt bewust een eigen kleur — dezelfde als de
   gradiënt-lijn links onder titels / de grote beginletter bij Over
   (kleur 2, in te stellen via Admin -> Stijl). */
.presave-link--hypeddit {
    background: var(--merk-2, #5f5f5f) !important;
}
.presave-link--hypeddit:hover {
    background: var(--merk-2, #5f5f5f) !important;
    opacity: .85;
}

.diensten-cta {
    display: inline-block;
    width: fit-content;
    margin-top: auto;
    padding: 10px 15px;
    border-radius: 999px;
    text-decoration: none;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .07em;
}

.diensten-cta:hover {
    box-shadow: inset 0 0 0 1px #111;
}

/* ─── 16. Contactpagina (.contact-grid) ────────────────────────── */
.contact-grid {
    display: flex;
    flex-direction: column;
    gap: 28px;
    margin-top: 34px;
}

.contact-card {
    padding: clamp(24px, 3vw, 36px);
    background: rgba(255, 255, 255, .86);
    border: 1px solid rgba(0, 0, 0, .10);
    border-radius: 28px;
    box-shadow: 0 18px 60px rgba(0, 0, 0, .10);
}

body.vorm-vierkant .contact-card {
    border-radius: 0;
}
body.vorm-speels .contact-card {
    box-shadow: 8px 8px 0 0 var(--merk-4);
}

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

/* Dezelfde instelling geldt voor ALLE content-kaartjes op de site —
   niet alleen het contact-blok. Zo hoef je dit maar op 1 plek in te
   stellen (Admin -> Stijl) voor een consistente look overal. */
body.vorm-vierkant .about-tile,
body.vorm-vierkant .music-card,
body.vorm-vierkant .press-card,
body.vorm-vierkant .diensten-card,
body.vorm-vierkant .work-card {
    border-radius: 0 !important;
}
body.vorm-speels .about-tile,
body.vorm-speels .music-card,
body.vorm-speels .press-card,
body.vorm-speels .diensten-card,
body.vorm-speels .work-card {
    box-shadow: 7px 7px 0 0 var(--merk-4) !important;
    transform: rotate(-1.3deg);
}

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

body.vorm-vierkant .about-intro {
    border-radius: 0 !important;
}
body.vorm-speels .about-intro {
    box-shadow: 7px 7px 0 0 var(--merk-4) !important;
}

body.vorm-speels .about-tile:nth-child(even),
body.vorm-speels .music-card:nth-child(even),
body.vorm-speels .press-card:nth-child(even),
body.vorm-speels .diensten-card:nth-child(even),
body.vorm-speels .work-card:nth-child(even) {
    transform: rotate(1.1deg);
}

.contact-card h2 {
    margin: 0 0 24px;
    font-size: clamp(34px, 4vw, 58px);
    line-height: .9;
    letter-spacing: -.055em;
}

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

/* Wrapper rond elke sectie (Contact/Locatie(s)/Socials/Streaming).
   Elke sectie is een eigen cel in het .contact-links-grid hierboven,
   met de eigen inhoud (chip-links, of foto+naam+adres+knop bij een
   locatie) als interne flex-rij zodat losse chips nog steeds fijn
   wrappen, maar samenhangende content (zoals een locatie) niet uiteen
   valt over losse gridcellen. Een thema kan dit verder verrijken met
   een eigen achtergrond/rand (zie stylekadetattoo.css). */
.contact-subblock {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    align-items: stretch;
    gap: 10px 12px;
    grid-column: span 1;
}

.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: 12px;
    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: 15px;
    font-weight: 800;
    overflow-wrap: anywhere;
    transition: background .2s ease, color .2s ease, transform .2s ease;
}

/* ─── Vorm van knoppen/chips (bepaald via Admin -> Stijl -> "Stijl
   van artiest") — vierkante hoeken bij zowel "strak vierkant" als
   "speels vierkant"; de schaduw en scheve stand komen er alleen bij
   de speelse variant nog bij. Geldt voor de mail/WhatsApp/
   socials-chips én de Route-knop en alle overige knoppen. */
body.vorm-vierkant .contact-links a,
body.vorm-vierkant .locatie-maps-link,
body.vorm-vierkant .diensten-cta,
body.vorm-vierkant .work-button,
body.vorm-vierkant .cv-export-btn,
body.vorm-vierkant .press-card a,
body.vorm-vierkant #content a.about-export-btn,
body.vorm-vierkant #content a.shows-video-link,
body.vorm-vierkant .diensten-sticker,
body.vorm-vierkant .press-card time,
body.vorm-vierkant .work-period,
body.vorm-vierkant .presave-link {
    border-radius: 0;
}

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

body.vorm-speels .contact-links a:nth-child(even),
body.vorm-speels .contact-subblock:nth-of-type(even) .locatie-maps-link {
    transform: rotate(1.2deg);
}

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

.contact-links a:hover {
    background: #111;
    color: #fff;
    transform: translateY(-1px);
}

.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);
}

/* Zelfde hover-vergroting voor klikbare icoontjes elders op de site
   (zoals het Bandsintown-icoontje bij Shows) — algemene regel zodat
   dit voor elk klikbaar icoontje geldt, niet alleen bij Contact. */
a img {
    transition: transform .2s ease;
}
a:hover img {
    transform: scale(1.18);
}

/* Volgers-teller op aparte regel in de contact-link */
.contact-followers {
    display: block;
    font-size: 11px;
    font-weight: 400;
    color: var(--merk-chip-tekst, #ffffff);
    opacity: .75;
    margin-top: 2px;
    letter-spacing: .02em;
    line-height: 1.3;
}

/* WhatsApp krijgt zijn herkenbare groen in rust, maar volgt verder
   dezelfde regel als alle andere contactknoppen: zwart met witte
   tekst bij hover. */
.contact-whatsapp {
    background: var(--merk-chip-bg, var(--merk-3, #111111));
}
.contact-whatsapp:hover {
    background: #111;
}

/* ─── Locatie(s) op de contactpagina ──────────────────────────────
   Elke locatie staat in een eigen .contact-subblock (zie
   .contact-links hierboven). Hier alleen de eigen onderdelen: foto
   (altijd vierkant, ongeacht de vorm van het origineel), naam en
   adres, en de Route-knop. */
.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: 15px;
    font-weight: 800;
    letter-spacing: .03em;
    color: #111;
}

.locatie-adres {
    display: block;
    grid-column: 1 / -1;
    margin-top: 4px;
    text-align: center;
    font-style: normal;
    font-size: 14px;
    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: 12px;
    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: #fff;
    color: #111;
    box-shadow: inset 0 0 0 2px #111;
}

/* De onderbalk (korte bio + "powered by") staat volledig, incl. eigen
   <style>-blok, in includes/footer.php — bewust niet hier, zodat hij
   nooit verkeerd oogt door een niet-bijgewerkte of thema-stylesheet. */

/* ─────────────────────────────────────────────────────────────────
   SCROLL-REVEAL (standaard, voor elk thema)
   ─────────────────────────────────────────────────────────────────
   Het gedeelde script in includes/footer.php zet de klasse
   .kt-observe op de bekende blok-elementen (kaarten, tekstblokken,
   het menu, ...). Zodra zo'n element voor ~15% in beeld scrollt,
   krijgt het ook .kt-in-view en speelt onderstaande overgang af: een
   subtiele fade + iets omhoog. Een thema (zoals Kade Tattoo) kan dit
   zelf verder verrijken (bijv. met een kanteling), maar deze basis
   werkt overal, ook zonder extra thema-CSS. Zonder JavaScript blijft
   alles gewoon meteen zichtbaar. */
.kt-observe {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .8s cubic-bezier(.2, .7, .3, 1),
                transform .8s cubic-bezier(.2, .7, .3, 1);
    will-change: opacity, transform;
}

.kt-observe.kt-in-view {
    opacity: 1;
    transform: translateY(0);
}

/* Het menu komt van bovenaf i.p.v. van onderen, want dat oogt logischer
   voor een balk die aan de bovenkant van de pagina hoort. */
#menu.kt-observe {
    transform: translateY(-18px);
}
#menu.kt-observe.kt-in-view {
    transform: translateY(0);
}

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

/* ─── Headerfoto: lichte, doorlopende beweging tijdens het scrollen ─
   Geeft de pagina wat diepte ("lagen"), heel subtiel. Gebruikt CSS
   scroll-driven animations; browsers die dit nog niet ondersteunen
   tonen de foto gewoon statisch (progressive enhancement, breekt
   nergens iets). */
@supports (animation-timeline: scroll()) {
    .hero-image 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); }
}

@media (prefers-reduced-motion: reduce) {
    .hero-image img {
        animation: none !important;
        transform: none !important;
    }
}

/* ─── Instagram Social Feed ─────────────────────────────────────
   Tot 5 losse Instagram-embeds naast elkaar in gelijke breedte. De
   blockquote die Instagram's eigen embed.js gebruikt, zet standaard
   een eigen min-width/margin inline — die overschrijven we hier zodat
   de posts netjes in het grid passen i.p.v. allemaal een andere
   grootte te hebben. */
.instagram-feed-titel {
    font-size: 20px;
    font-weight: 700;
    margin: 0 0 20px;
}

.instagram-feed-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 28px;
    margin-top: 28px;
    align-items: start;
}

@media (max-width: 900px) {
    .instagram-feed-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 620px) {
    .instagram-feed-grid {
        grid-template-columns: 1fr;
    }
}

.instagram-feed-grid > .instagram-media {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: 650px;
    margin: 0 !important;
    border-radius: 16px !important;
    box-shadow: 0 14px 40px rgba(0, 0, 0, .14) !important;
}

/* ─── Vorm van de Instagram-frames (bepaald via Admin -> Stijl ->
   "Stijl van artiest"): witte lijst + vierkante hoeken bij zowel
   "strak vierkant" als "speels vierkant"; de schaduw en afwisselende
   scheve stand komen er alleen bij de speelse variant nog bij. */
body.vorm-vierkant .instagram-feed-grid > .instagram-media {
    border: 8px solid #fff !important;
    border-radius: 0 !important;
}
body.vorm-speels .instagram-feed-grid > .instagram-media {
    box-shadow: 7px 7px 0 0 var(--merk-4) !important;
    transform: rotate(-2.5deg);
}
body.vorm-speels .instagram-feed-grid > .instagram-media:nth-child(2n) {
    transform: rotate(2deg);
}
body.vorm-speels .instagram-feed-grid > .instagram-media:nth-child(3n) {
    transform: rotate(-1.2deg);
}
body.vorm-speels .instagram-feed-grid > .instagram-media:nth-child(4n) {
    transform: rotate(2.8deg);
}

/* ─── 18. Bio-galerij (.bio-gallery) ───────────────────────────── */

/* Masonry-achtige kolommen: elke thumbnail behoudt zijn eigen
   beeldverhouding (staand/liggend), geschaald naar de kolombreedte.
   Geen bijsnijden meer. */
.bio-gallery {
    column-width: 200px;
    column-gap: 14px;
    margin-top: 8px;
}

/* Galerij staat nu tussen het bio-verhaal en blok 3/player: wat lucht eromheen */
.about-paper .bio-gallery {
    margin: 26px 0;
}

/* Elke thumbnail-link */
.bio-thumb {
    display: inline-block;    /* nodig binnen column-layout */
    width: 100%;
    position: relative;       /* voor titelbalkje + afspeel-icoon */
    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, .04);
    margin: 0 0 14px;         /* verticale ruimte tussen thumbnails */
    transition: transform .22s ease, box-shadow .22s ease;
    -webkit-column-break-inside: avoid;
    break-inside: avoid;      /* thumbnail niet over 2 kolommen splitsen */
}

.bio-thumb:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 48px rgba(0, 0, 0, .18);
    background: transparent;   /* override algemene a:hover achtergrond */
    color: inherit;
}

.bio-thumb img {
    width: 100%;
    height: auto;             /* eigen beeldverhouding, op schaal */
    object-fit: contain;
    display: block;
    border-radius: 0;
    box-shadow: none;
}

/* Video-thumbnail: poster (of tegel) vult de breedte, hoogte op ratio */
.bio-thumb--video {
    position: relative;
}

.bio-thumb--video video {
    width: 100%;
    height: auto;
    object-fit: contain;
    display: block;
    pointer-events: none;   /* klik gaat naar de link, niet naar de video */
    background: #000;
}

/* Video zonder eigen poster-afbeelding: nette donkere tegel.
   Er wordt zo niets van de video vooraf geladen — alleen bij klik.
   Zonder poster is er geen natuurlijke hoogte, dus geven we er een. */
.bio-thumb-placeholder {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: linear-gradient(135deg, #1a1a1a, #333);
}

/* Afspeel-icoon midden op de video-thumbnail */
.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;      /* driehoekje optisch centreren */
    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);
}

/* Lightbox overlay */
.bio-lightbox {
    display: none;              /* standaard verborgen */
    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;
}

/* Grote foto of video in de lightbox — past zich aan aan
   zowel liggende (16:9) als staande (9:16) bestanden */
.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;
}

/* Bijschrift onderin de lightbox: titel van de huidige foto/video */
.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;
}

/* Leeg bijschrift niet als los pilletje tonen */
.bio-lightbox-caption:empty {
    display: none;
}

/* Gedeelde stijl voor alle knoppen in de lightbox */
.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);
}

/* Sluit-knop rechtsboven */
.bio-lightbox-close {
    top: 20px;
    right: 24px;
    font-size: 26px;
    width: 48px;
    height: 48px;
}

/* Vorige/volgende pijlen links en rechts gecentreerd */
.bio-lightbox-prev,
.bio-lightbox-next {
    top: 50%;
    transform: translateY(-50%);
    font-size: 42px;
    width: 56px;
    height: 56px;
    padding-bottom: 3px; /* visuele centrering van het pijltje */
}

.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);
}

/* Op kleine schermen: pijlen kleiner en dichter bij de rand */
@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;
    }
}

/* Responsive: kleinere thumbnails op mobiel */
@media (max-width: 760px) {
    .bio-gallery {
        column-width: 140px;
        column-gap: 10px;
    }
}

/* ─── 18b. Over-pagina als krant/folder (.about-*) ─────────────── */

/* Volgorde: foto's/video's → headerfoto →
   rij 1 (grote tekst + zijkolom met blok 1 en 2) →
   rij 2 (blok 3 + Spotify-player) */

/* Headerfoto tussen de galerij en de tekst */
.bio-gallery ~ .hero-image {
    margin: 44px 0 0;
}

/* Krant-raster: rijen met kolommen naast elkaar */
.about-paper {
    margin-top: 44px;
}

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

/* Hoofdtekst: groot, luchtig blok — het artikel van de voorpagina */
.about-intro {
    position: relative;
    padding: clamp(26px, 4vw, 50px);
    background: rgba(255, 255, 255, .84);
    border: 1px solid rgba(0, 0, 0, .10);
    border-radius: 28px;
    box-shadow: 0 18px 60px rgba(0, 0, 0, .10);
    overflow: hidden;
}

.about-intro p {
    font-size: clamp(18px, 1.7vw, 22px);
    line-height: 1.65;
}

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

/* Krantje: grote beginletter van de eerste alinea */
.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-2);
}

/* Tegels: de kleinere kolomstukjes naast de artikelen */
.about-tile {
    position: relative;
    padding: clamp(20px, 2.4vw, 30px);
    background: rgba(255, 255, 255, .88);
    border: 1px solid rgba(0, 0, 0, .10);
    border-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: 18px;
    line-height: 1.2;
    letter-spacing: .06em;
    text-transform: uppercase;
}

/* Tekst in de tegels bewust kleiner dan de hoofdtekst */
.about-tile p {
    margin: 0 0 12px;
    font-size: 15px;
    line-height: 1.6;
}

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

/* De player als blok in het raster */
.about-row .embed {
    margin: 0;
    align-self: start;
}

/* Desktop: kolommen naast elkaar, als een krantenpagina */
@media (min-width: 761px) {
    .about-row {
        display: flex;
        align-items: flex-start;
        gap: 26px;
    }

    /* Brede kolom (artikel / player) */
    .about-row .about-main {
        flex: 1 1 62%;
        min-width: 0;
    }

    /* Zijkolom met blok 1 en 2, gestapeld — elk blok wordt nu zo groot
       als zijn eigen inhoud, rekt niet meer uit tot gelijke hoogte. */
    .about-rail {
        flex: 1 1 34%;
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 26px;
    }

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

    /* Rij 2: blok 3 links van de player */
    .about-row-2 {
        align-items: flex-start;
    }
    .about-row-2 .about-tile {
        flex: 1 1 34%;
        min-width: 0;
    }

    /* Staat er maar één ding in een rij, dan de volle breedte */
    .about-row > :only-child {
        flex: 1 1 100%;
    }
}

/* Mobiel: alles onder elkaar */
@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;
    }
}

/* ─── 19. Pre-save / music_solo pagina ─────────────────────────── */

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

/* Logo klein gecentreerd bovenaan */
.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;
}

/* Albumhoes */
.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);
}

/* Titel */
.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;
}

/* Artiesten-naam */
.presave-artists {
    margin: 0 0 8px;
    font-size: clamp(16px, 2.5vw, 22px);
    color: var(--muted);
    text-align: center;
}

/* Datum */
.presave-date {
    margin: 0 0 6px;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #999;
    text-align: center;
}

/* Extra info */
.presave-extra {
    margin: 0 0 20px;
    font-size: 14px;
    color: #888;
    text-align: center;
}

/* Streaming-links — zelfde stijl als contact-links */
.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: 16px;
    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;
}

/* Copyright onderaan */
.presave-label {
    margin: 0;
    font-size: 12px;
    color: #aaa;
    text-align: center;
}

/* ─── All-artiesten / startpagina (.all-*) ──────────────────────── */

/* Zoekbalk */
.all-search-wrap {
    margin-bottom: 36px;
}

.all-search-form {
    display: flex;
    gap: 8px;
    max-width: 560px;
    margin: 0 auto;
}

.all-search-input {
    flex: 1;
    padding: 14px 20px;
    border: 1px solid rgba(0, 0, 0, .12);
    border-radius: 999px;
    background: rgba(255, 255, 255, .92);
    color: #111;
    font: inherit;
    font-size: 16px;
    outline: none;
    backdrop-filter: blur(8px);
}

.all-search-input:focus {
    border-color: #111;
    background: #fff;
}

.all-search-btn {
    width: 52px;
    height: 52px;
    border: none;
    border-radius: 999px;
    background: #111;
    color: #fff;
    font-size: 20px;
    cursor: pointer;
    flex-shrink: 0;
    transition: background .18s ease;
}

.all-search-btn:hover {
    background: #333;
}

/* Sectie-titels */
.all-section-title {
    margin: 0 0 16px;
    font-size: clamp(14px, 1.8vw, 18px);
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #555;
    border-bottom: none;
    padding-bottom: 0;
}

/* Externe logo's (favicon formaat) */
.all-ext-logo {
    width: 48px !important;
    height: 48px !important;
    object-fit: contain;
    border-radius: 10px !important;
    background: #f0f0f0;
    padding: 8px;
}

.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: rgba(255, 255, 255, .84);
    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: #111;
    font-size: 13px;
    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: #111;
    color: #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;
}

.all-artist-card:hover .all-ext-logo {
    background: rgba(255, 255, 255, .15);
}

.all-login-link {
    margin-top: 28px;
    text-align: center;
    font-size: 13px;
    color: #888;
}

.all-login-link a {
    color: #555;
    text-decoration: none;
    font-weight: 600;
}

.all-login-link a:hover {
    color: #111;
    background: transparent;
}

/* Inlogformulier onderaan all-pagina */
.all-login-form {
    max-width: 360px;
    margin: 40px auto 0;
    padding: clamp(22px, 3vw, 36px);
    background: rgba(255, 255, 255, .84);
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: 24px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, .10);
    text-align: center;
    backdrop-filter: blur(8px);
}

.all-login-form h2 {
    margin: 0 0 20px;
    font-size: clamp(20px, 3vw, 28px);
    letter-spacing: -.04em;
    text-transform: none;
    border-bottom: none;
    padding-bottom: 0;
}

.all-login-inner {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.all-login-inner input {
    width: 100%;
    padding: 13px 15px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fff;
    color: #111;
    font: inherit;
    font-size: 16px;
    outline: none;
}

.all-login-inner input:focus {
    border-color: #111;
}

.all-login-inner button {
    padding: 14px;
    background: #111;
    color: #fff;
    border: 1px solid #111;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .09em;
    cursor: pointer;
    transition: background .2s ease, color .2s ease;
    margin-top: 4px;
}

.all-login-inner button:hover {
    background: #fff;
    color: #111;
}

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

    .all-search-form {
        padding: 0 4px;
    }
}

/* Artiest-selectie balk (home/bio tabs) */
.admin-artist-switcher {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 20px;
}

.admin-artist-btn {
    padding: 9px 16px;
    background: rgba(0, 0, 0, .06);
    border: 1px solid rgba(0, 0, 0, .12);
    border-radius: 999px;
    color: #444;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    transition: background .18s ease, color .18s ease;
}

.admin-artist-btn:hover {
    background: #333;
    color: #fff;
}

.admin-artist-btn.active {
    background: #111;
    color: #fff;
    border-color: #111;
}

/* Tab-navigatie bovenaan de admin-pagina */
.admin-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 36px;
}

.admin-tab {
    padding: 11px 20px;
    background: rgba(0, 0, 0, .06);
    border: 1px solid rgba(0, 0, 0, .12);
    border-radius: 999px;
    color: #333;
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .08em;
    text-decoration: none;
    transition: background .18s ease, color .18s ease;
}

.admin-tab:hover {
    background: #333;
    color: #fff;
}

.admin-tab-active {
    background: #111;
    color: #fff;
    border-color: #111;
}

.admin-tab-active:hover {
    background: #111;
    color: #fff;
}

/* Formulierkaart */
.admin-form-card {
    padding: clamp(22px, 3vw, 40px);
    background: rgba(255, 255, 255, .86);
    border: 1px solid rgba(0, 0, 0, .10);
    border-radius: 28px;
    box-shadow: 0 18px 60px rgba(0, 0, 0, .10);
    margin-bottom: 48px;
}

.admin-form-title {
    margin: 0 0 28px;
    font-size: clamp(24px, 3vw, 40px);
    letter-spacing: -.04em;
    text-transform: none;
}

/* 2-kolommen grid-formulier */
.admin-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px 24px;
}

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

/* Full-breedte rijen */
.af-full {
    grid-column: 1 / -1;
}

.af-row label {
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #666;
}

/* Tekenteller onder het korte-bio-veld */
.af-charcount {
    font-size: 12px;
    color: #888;
}

.admin-form input[type="text"],
.admin-form input[type="date"],
.admin-form input[type="url"],
.admin-form input[type="number"],
.admin-form select,
.admin-form textarea {
    width: 100%;
    padding: 13px 15px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fff;
    color: #111;
    font: inherit;
    font-size: 16px;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
}

.admin-form input:focus,
.admin-form select:focus,
.admin-form textarea:focus {
    border-color: #111;
}

.admin-form textarea {
    min-height: 160px;
    resize: vertical;
}

/* Checkboxes */
.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: 15px;
    text-transform: none;
    letter-spacing: 0;
    color: #333;
    cursor: pointer;
}

.af-checks input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: #111;
}

/* Raster van artiest-vinkjes (zichtbaarheid werk/opleiding) */
.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: 15px;
    color: #333;
    cursor: pointer;
    padding: 6px 0;
}

.af-check-inline input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: #111;
    flex: 0 0 auto;
}

/* Actieknoppen in het formulier */
.af-actions {
    flex-direction: row;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
}

.af-btn-save {
    padding: 13px 24px;
    background: #111;
    color: #fff;
    border: 1px solid #111;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .09em;
    cursor: pointer;
    transition: background .2s ease, color .2s ease;
}

.af-btn-save:hover {
    background: #fff;
    color: #111;
}

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

.af-btn-cancel:hover {
    background: #f0f0f0;
    color: #111;
}

/* ── Lijst van bestaande records ── */
.admin-list-title {
    margin: 0 0 16px;
    font-size: clamp(22px, 2.5vw, 36px);
    letter-spacing: -.03em;
    text-transform: none;
}

.admin-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Categorie-kopje in het diensten-overzicht */
.admin-list-cat {
    margin: 22px 0 2px;
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #111;
    border-bottom: 2px solid rgba(0, 0, 0, .12);
    padding-bottom: 6px;
}
.admin-list-cat:first-child {
    margin-top: 4px;
}

/* Status-badge (ACTIEF / INACTIEF) */
.admin-status-badge {
    display: inline-block;
    vertical-align: middle;
    margin-right: 8px;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
    white-space: nowrap;
}
.admin-status-badge.is-actief {
    background: #128a3b;
    color: #fff;
}
.admin-status-badge.is-inactief {
    background: #e6e2df;
    color: #8a8580;
}

/* Inactieve rij iets gedimd zodat het verschil meteen opvalt */
.admin-list-row-inactief {
    opacity: .62;
}

.admin-list-row {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    background: rgba(255, 255, 255, .82);
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: 18px;
    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: 15px;
    font-weight: 800;
    color: #111;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 2px 0;
}

.admin-list-info span {
    font-size: 13px;
    color: #555;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.admin-list-info small {
    font-size: 11px;
    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: 12px;
    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-edit:hover {
    background: #111;
    color: #fff;
}

.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;
}

/* ── Volgers-formulier ── */
.followers-form {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 20px;
    align-items: flex-end;
    width: 100%;
}

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

.followers-field input {
    width: 120px;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fff;
    color: #111;
    font: inherit;
    font-size: 15px;
    outline: none;
}

.followers-field input:focus {
    border-color: #111;
}

.followers-save {
    padding: 10px 18px !important;
    font-size: 12px !important;
    align-self: flex-end;
}

/* Responsive admin */
@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; /* ruimte voor de hamburger-knop bovenin */
    }

    #logo {
        padding: 0 0 18px;
    }

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

    /* Menu-knop zichtbaar maken op mobiel */
    .menu-toggle,
    body.menu-positie-rechtsboven .menu-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* Hoofdmenu: standaard verborgen, wordt geopend via JS. Gecentreerd
       via left/right/margin (niet via transform:translateX) — anders
       botst dit met de transform die de scroll-intro-animatie gebruikt,
       die volledig overschrijft i.p.v. optelt, waardoor het menu na het
       in-beeld-komen niet meer gecentreerd zou staan. */
    nav.main-menu {
        position: fixed;
        top: 88px;          /* onder de hamburger-knop, met ruime marge */
        left: 16px;
        right: 16px;
        margin: 0 auto;
        max-width: 480px;
        z-index: 1000;
        display: none;      /* verborgen tot gebruiker op hamburger klikt */
        flex-direction: column;
        border-radius: 22px;
        padding: 10px;
        gap: 4px;
    }

    /* Op mobiel werkt het menu altijd als hamburger + uitklap-lijst,
       ongeacht of voor desktop "balk" of "normaal" is gekozen — anders
       zou de balk-variant (hogere specificiteit) deze positionering
       hier overschrijven. */
    body.menu-stijl-balk nav.main-menu {
        top: 88px;
        left: 16px;
        right: 16px;
        width: auto;
        max-width: 480px;
        padding: 10px;
        border-bottom: none;
    }

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

    /* Menu tonen als klasse .is-open aanwezig is (via JS) */
    nav.main-menu.is-open {
        display: flex;
    }

    #menu a.linkmenu,
    #menu a.linkmenulogin {
        text-align: center;
        padding: 14px 10px;
        font-size: 13px;
        border-radius: 14px;
    }

    /* Ingelogd-balk en admin-menu: niet vastgezet op mobiel */
    p.logged-in-bar {
        position: static;
        display: inline-block;
        margin: 0 0 10px;
    }

    nav.admin-menu {
        position: static;
        width: 100%;
        max-width: 100%;
        margin: 0 auto 22px;
        flex-direction: column;
        border-radius: 22px;
    }

    #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: 16px;
    }

    /* Overschrijf inline width/height attributen op afbeeldingen */
    img[width] {
        max-width: 100% !important;
        height: auto !important;
    }

    /* Muziekgrid: één kolom */
    .music-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    /* Showstabel: block-layout (elke td op eigen rij) */
    .table_shows,
    .table_shows tbody,
    .table_shows tr,
    .table_shows td {
        display: block;
        width: 100% !important;
    }

    .table_shows tr {
        padding: 16px 0;
        border-bottom: 1px solid rgba(0, 0, 0, .14);
    }

    .table_shows td {
        padding: 4px 0 !important;
        border-bottom: 0 !important;
    }

    .table_shows h3 {
        font-size: 19px;
    }

    .table_shows big {
        font-size: 20px;
    }

    /* Werkkaart-header: datum onder de titel */
    .work-card-header {
        flex-direction: column;
    }

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

    /* Perspagina: één kolom */
    .press-grid {
        grid-template-columns: 1fr;
    }

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

    /* Contactlinks: één kolom */
    .contact-links {
        grid-template-columns: 1fr;
    }
}

/* ─── 21. Responsive – kleine telefoons (≤ 430 px) ────────────── */
@media (max-width: 430px) {

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

/* ─── CV-pagina ────────────────────────────────────────────────── */
.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: clamp(20px, 2.4vw, 28px);
    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: #111; font-weight: 800; font-size: clamp(17px, 1.8vw, 21px); letter-spacing: -.01em; }
.cv-entry-date { color: var(--muted); font-size: 14px; font-weight: 600; white-space: nowrap; letter-spacing: .02em; }
.cv-entry-sub { margin: 0 0 10px; color: var(--muted); font-size: 15px; font-style: italic; }
.cv-text { margin: 0 0 16px; color: var(--muted); font-size: clamp(15px, 1.5vw, 18px); 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: clamp(15px, 1.5vw, 18px); line-height: 1.55; }
.cv-list li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 7px; height: 7px; border-radius: 50%; background: #111; }
.cv-list li b { color: #111; }
@media (max-width: 600px) {
    .cv-entry-head { flex-direction: column; gap: 2px; }
    .cv-entry-date { font-size: 13px; }
}

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

/* ─── Beheer: zichtbaarheidsmatrix ─────────────────────────────── */
.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: 13px; }
.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: #111; font-weight: 800; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; }
.zicht-artist-col { text-align: left !important; min-width: 120px; }
.zicht-table input[type="checkbox"] { width: 18px; height: 18px; cursor: pointer; }

/* ─── Beheer: Extra content (bron-artiesten aanvinken) ─────────── */
.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: 13px; cursor: pointer; user-select: none;
}
.extra-bron-chip input { width: 16px; height: 16px; cursor: pointer; }
.extra-bron-chip:hover { border-color: #111; }

/* ─── "Over als PDF"-knop (onderaan de Over-pagina) ─────────────
   Let op de selector: #content a heeft in de thema's een eigen
   kleur (specificiteit 101). Een losse .class (10) verliest het
   daarvan, waardoor de tekst dezelfde kleur kreeg als de knop en
   dus onleesbaar werd. Daarom hier ook via #content a. */
.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: 11px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    text-decoration: none;
}

/* ─── Video-koppeling in de showtabel ──────────────────────────── */
/* Kleine, duidelijke "Bekijk video"-link onder de venue-regel.
   Zelfde specificiteits-truc als bij .about-export-btn hierboven:
   thema's zetten via #content a (101) een eigen tekstkleur, dus een
   losse .class (10) verliest dat en de tekst werd onleesbaar. Daarom
   ook hier via #content a. */
#content a.shows-video-link {
    display: inline-block;
    margin-top: 6px;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    padding: 3px 10px;
    border-radius: 999px;
    line-height: 1.6;
}

#content a.shows-video-link:hover {
    background: #111 !important;
    color: #fff !important;
    border-color: #111;
}

/* ─── Diensten: media-thumbnails onderaan de kaart ─────────────── */
/* Map /diensten/<id>/ op de FTP met foto's/video's; er worden
   willekeurig maximaal 8 thumbnails getoond die groot openen in een
   lightbox. Ze staan onderaan de kaart in een net raster van 8 naast
   elkaar; op smallere schermen vouwen ze netjes af naar minder. */
.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;   /* vierkant, netjes uitgelijnd in het raster */
    border-radius: 8px;
    background: #111;
    cursor: pointer;
    text-decoration: none;
    overflow: hidden;
}

.diensten-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;     /* vult het vlak netjes, geen witranden */
    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);
}

/* Afspeel-driehoekje op video-thumbnails */
.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); }
}

/* ─── Diensten: lightbox (groot beeld bij klik) ────────────────── */
.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 {
    background: rgba(255, 255, 255, .25);
}

/* Pijltjes om binnen dezelfde dienstkaart te bladeren */
.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-nav:hover {
    background: rgba(255, 255, 255, .25);
}

.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; }
}

/* ─── Vorm-audit: overige foto's/logo's/knoppen die ook de vorm-
   instelling van de site moeten volgen (Admin -> Stijl -> "Stijl van
   artiest") — allemaal vierkant bij "strak vierkant"/"speels
   vierkant". */
body.vorm-vierkant .music-cover,
body.vorm-vierkant .work-logo,
body.vorm-vierkant .work-solo-logo,
body.vorm-vierkant .work-card-logo,
body.vorm-vierkant .bio-thumb,
body.vorm-vierkant .ws-slideshow,
body.vorm-vierkant .ws-no-media,
body.vorm-vierkant .bio-lightbox video,
body.vorm-vierkant .diensten-thumb,
body.vorm-vierkant .locatie-foto,
body.vorm-vierkant .hero-image img {
    border-radius: 0 !important;
}

/* Dezelfde afbeeldingen krijgen bij de SPEELSE stijl ook de harde
   schaduw (kleur 4, in te stellen via Admin -> Stijl) — niet alleen
   de tekstblokken/kaartjes hierboven, maar echt alles. */
body.vorm-speels .music-cover,
body.vorm-speels .work-logo,
body.vorm-speels .work-solo-logo,
body.vorm-speels .work-card-logo,
body.vorm-speels .bio-thumb,
body.vorm-speels .ws-slideshow,
body.vorm-speels .diensten-thumb,
body.vorm-speels .hero-image img,
body.vorm-speels .embed {
    box-shadow: 7px 7px 0 0 var(--merk-4) !important;
}

/* ─── Webshop (.shop-grid) ──────────────────────────────────────── */
.shop-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
    gap: 28px;
    margin-top: 28px;
}

.shop-product {
    display: flex;
    flex-direction: column;
    background: rgba(255, 255, 255, .86);
    border: 1px solid rgba(0, 0, 0, .10);
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 18px 60px rgba(0, 0, 0, .10);
}

body.vorm-vierkant .shop-product {
    border-radius: 0;
}
body.vorm-speels .shop-product {
    box-shadow: 7px 7px 0 0 var(--merk-4);
    transform: rotate(-1.1deg);
}
body.vorm-speels .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;
}

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

.shop-koop-form {
    margin-top: 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.shop-koop-velden {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.shop-koop-velden input {
    padding: 10px 13px;
    border: 1px solid rgba(0, 0, 0, .15);
    border-radius: 10px;
    font-size: 14px;
    font-family: inherit;
}
body.vorm-vierkant .shop-koop-velden input {
    border-radius: 0;
}

.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: 13px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .07em;
    cursor: pointer;
    transition: background .18s ease, transform .18s ease;
}
.shop-koop-knop:hover {
    background: #111 !important;
}
body.vorm-vierkant .shop-koop-knop {
    border-radius: 0;
}
body.vorm-speels .shop-koop-knop {
    box-shadow: 4px 4px 0 0 var(--merk-4);
}
body.vorm-speels .shop-koop-knop:hover {
    transform: translateY(-2px);
}

.shop-melding {
    margin: 0 0 28px;
    padding: 16px 20px;
    border-radius: 16px;
    font-weight: 700;
}
body.vorm-vierkant .shop-melding {
    border-radius: 0;
}
.shop-melding-ok {
    background: #e6f9ee;
    border: 1px solid #a3d9b5;
    color: #1a6e3a;
}
.shop-melding-wacht {
    background: #fff7e6;
    border: 1px solid #f0d9a0;
    color: #8a6100;
}
.shop-melding-fout {
    background: #fdeaea;
    border: 1px solid #f0b4b4;
    color: #b00020;
}

/* ─── Winkelmandje (.mandje-*) ──────────────────────────────────── */
.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: 14px;
    text-decoration: none;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
}
body.vorm-vierkant .shop-mandje-link a {
    border-radius: 0;
}
body.vorm-speels .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: 12px;
}
@media (max-width: 760px) {
    .shop-mandje-link {
        top: auto;
        bottom: 16px;
        right: 16px;
    }
}
/* Botsing voorkomen met de rechtsboven-hamburger-menu-variant. */
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, .15);
    border-radius: 10px;
    font-size: 14px;
    font-family: inherit;
}
body.vorm-vierkant .shop-koop-aantal {
    border-radius: 0;
}

.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: rgba(255, 255, 255, .86);
    border: 1px solid rgba(0, 0, 0, .10);
    border-radius: 16px;
}
body.vorm-vierkant .mandje-regel {
    border-radius: 0;
}
body.vorm-speels .mandje-regel {
    box-shadow: 4px 4px 0 0 var(--merk-4);
}

.mandje-regel-foto {
    width: 64px;
    height: 64px;
    object-fit: cover;
    border-radius: 10px;
    grid-row: span 1;
}
body.vorm-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: 15px;
}
.mandje-regel-prijs {
    font-size: 12px;
    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, .15);
    border-radius: 8px;
    font-size: 13px;
}
.mandje-regel-aantal button {
    padding: 6px 10px;
    border: 1px solid rgba(0, 0, 0, .15);
    border-radius: 8px;
    background: #fff;
    font-size: 11px;
    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: 17px;
}
.mandje-totaal strong {
    font-size: 22px;
}

.mandje-checkout-form {
    margin-top: 18px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 480px;
}
.mandje-checkout-velden {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.mandje-checkout-rij {
    display: flex;
    gap: 10px;
}
.mandje-checkout-velden input {
    padding: 12px 14px;
    border: 1px solid rgba(0, 0, 0, .15);
    border-radius: 10px;
    font-size: 14px;
    font-family: inherit;
}
body.vorm-vierkant .mandje-checkout-velden input {
    border-radius: 0;
}
.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; }
}

/* ─── Tekstuitlijning: gecentreerd (Admin -> Stijl -> Tekstuitlijning) ─
   Standaard staat alles links uitgelijnd (natuurlijke leesrichting).
   Bij "Gecentreerd" komen titels en tekstblokken in het midden te
   staan, site-breed — inclusief de gradiënt-lijn onder h1 en de
   grote eerste letter bij Over (die laten we links van de gecentreerde
   tekst meebewegen i.p.v. aan de paginarand te laten hangen). */
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:not(.vorm-speels) h1 {
    /* Bij de normale titelstijl: gradiënt-lijn ook gecentreerd i.p.v.
       over de volle breedte van het tekstblok. */
    width: fit-content;
    max-width: 100%;
}
body.tekst-midden.vorm-speels h1,
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 {
    /* De grote beginletter (drop cap) hoort bij links uitgelijnde tekst
       thuis; bij gecentreerde tekst laten we 'm gewoon meelopen met de
       tekst i.p.v. los te laten "zweven". */
    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;
}

/* ─── Winkelmandje: reserveringsmelding ─────────────────────────── */
.mandje-reservering-melding {
    margin: 0 0 20px;
    padding: 12px 16px;
    background: #fff7e6;
    border: 1px solid #f0d9a0;
    border-radius: 12px;
    color: #8a6100;
    font-size: 13px;
}
body.vorm-vierkant .mandje-reservering-melding {
    border-radius: 0;
}

/* ─── Shop: maat-selectie en overige nieuwe elementen ───────────── */
.shop-koop-maat {
    padding: 8px 10px;
    border: 1px solid rgba(0, 0, 0, .15);
    border-radius: 10px;
    font-size: 13px;
    font-family: inherit;
    margin-bottom: 6px;
}
body.vorm-vierkant .shop-koop-maat {
    border-radius: 0;
}
.mandje-regel-maat {
    font-weight: 400;
    color: var(--merk-tekst);
    font-size: 13px;
}
.mandje-verzend-melding {
    font-size: 13px;
    color: var(--merk-tekst);
    margin: 0 0 14px;
}
.mandje-adres-status {
    font-size: 12px;
    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;
}