:root{--green:#097969;--green2:#286653;--cream:white;--gold:#f0ddaa;--ink:#172521;--muted:#52645c}
*{box-sizing:border-box}
body{color:var(--ink);background:#fff;font-family:system-ui,-apple-system,"Segoe UI",sans-serif;line-height:1.65}
a{color:#175c49;text-underline-offset:.2em}
a:hover{color:#103d31}
:focus-visible{outline:3px solid #b36b00!important;outline-offset:3px}
.skip-link{position:absolute;left:-9999px;top:0;background:#fff;color:#000;padding:.75rem;z-index:2000}
.skip-link:focus{left:1rem;top:1rem}
.site-nav{background:var(--green)}
.navbar-brand{letter-spacing:.02em}
.navbar .nav-link{color:#f3f6f2;padding:.8rem}
.navbar .nav-link:hover,.navbar .nav-link:focus{color:var(--gold)}
.hero{background:var(--cream);padding:clamp(3rem,7vw,6.5rem) 0}
.eyebrow{text-transform:uppercase;letter-spacing:.12em;font-weight:750;color:var(--green2);font-size:.82rem}
.hero h1{font-size:clamp(2.2rem,5vw,4.2rem);font-weight:800;letter-spacing:-.04em;line-height:1.08;max-width:15ch}
.hero-copy{max-width:55ch;font-size:1.15rem;color:#3e5149}
.hero-art{background:linear-gradient(145deg,#dfe9df,#f2e6c7);border-radius:1.5rem;min-height:260px;display:flex;align-items:center;justify-content:center;font-size:6rem;color:var(--green)}
.section-space{padding:4rem 0}
.section-title{font-weight:800;letter-spacing:-.025em}
.book-card{height:100%;border:1px solid #e2e8e2;border-radius:1rem;overflow:hidden;background:#fff;transition:transform .18s ease,box-shadow .18s ease}
.book-card:hover{transform:translateY(-3px);box-shadow:0 12px 32px #183d3612}
.cover-wrap{background:var(--cream);aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;padding:0.25rem}
.cover-wrap img{max-height:100%;max-width:100%;object-fit:contain}
.cover-placeholder{font-size:3rem;color:var(--green)}
.book-card-body{padding:1.25rem}
.price{font-size:1.25rem;font-weight:800;color:var(--green)}
.btn-primary{--bs-btn-bg:var(--green);--bs-btn-border-color:var(--green);--bs-btn-hover-bg:#102d27;--bs-btn-hover-border-color:#102d27;--bs-btn-focus-shadow-rgb:38,102,83}
.btn-outline-primary{--bs-btn-color:var(--green);--bs-btn-border-color:var(--green);--bs-btn-hover-bg:var(--green);--bs-btn-hover-border-color:var(--green)}
.info-band{background:#F3E8D0}
.info-boeken{background:#edf3ee}
.site-footer{background:var(--green);color:#f3f6f2}
.site-footer a{color:#f0ddaa}
.form-label{font-weight:650}
.form-control,.form-select{min-height:46px}
audio{width:100%;max-width:100%}
.track-list li{padding:.7rem 0;border-bottom:1px solid #e4e9e4}
.admin-nav{background:#edf3ee}
.badge-soft{background:#e6f0e8;color:#174b3b}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important}}

#playlist .list-group-item {
    padding-top: 3px;
    padding-bottom: 3px;
}

body {
    padding-top: 70px;
}

@media (max-width: 991.98px) {
    body {
        padding-top: 60px;
    }
}

.hero-art {
    background: linear-gradient(145deg, #dfe9df, #f2e6c7);
    border-radius: 1.5rem;
    min-height: 260px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 6rem;
    color: var(--green);

    /* Toegevoegd */
    overflow: hidden;
    padding: 20px;
}

.hero-art img {
    display: block;
    max-width: 100%;
    max-height: 300px;
    width: auto;
    height: auto;
    object-fit: contain;
}