*{box-sizing:border-box}:root{color-scheme:dark;--bg:#0d0f12;--panel:#171a1f;--panel2:#20242b;--text:#f4f4f5;--muted:#a9afb8;--line:#2d323b;--accent:#f0c75e;--radius:14px}html{background:var(--bg)}body{margin:0;min-height:100vh;font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:var(--bg);color:var(--text)}a{color:inherit}.site-header{position:sticky;top:0;z-index:50;border-bottom:1px solid var(--line);background:rgba(13,15,18,.94);backdrop-filter:blur(14px)}.header-inner{max-width:1500px;margin:0 auto;padding:14px 22px;display:flex;gap:24px;align-items:center;justify-content:space-between}.brand{text-decoration:none;display:flex;flex-direction:column;min-width:max-content}.brand-title{font-weight:750}.brand-subtitle{color:var(--muted);font-size:.8rem}.search-form{display:flex;width:min(620px,100%);gap:8px}.search-form input{width:100%;border:1px solid var(--line);border-radius:10px;background:var(--panel);color:var(--text);padding:10px 12px;font-size:1rem}.search-form button{border:0;border-radius:10px;background:var(--accent);color:#151515;padding:10px 16px;font-weight:700;cursor:pointer}.page{max-width:1500px;margin:0 auto;padding:28px 22px 48px}.hero,.album-header{display:flex;justify-content:space-between;gap:20px;align-items:end;margin-bottom:30px}.hero h1,.album-header h1{margin:0 0 6px;font-size:clamp(2rem,4vw,3.2rem)}.hero p,.album-header p{margin:0;color:var(--muted)}.hero-stats{color:var(--muted);white-space:nowrap}.year-section{margin:40px 0 54px}.year-heading{display:flex;gap:14px;align-items:baseline;border-bottom:1px solid var(--line);margin-bottom:18px;padding-bottom:10px}.year-heading h2{margin:0;font-size:2rem}.year-heading span{color:var(--muted)}.album-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:18px}.album-card{overflow:hidden;border-radius:var(--radius);border:1px solid var(--line);background:var(--panel);text-decoration:none;transition:transform .15s ease,border-color .15s ease}.album-card:hover{transform:translateY(-2px);border-color:#505966}.album-cover{aspect-ratio:4/3;background:#111317;overflow:hidden}.album-cover img{display:block;width:100%;height:100%;object-fit:cover}.media-thumb img{display:block;width:100%;height:auto;object-fit:contain;background:#101216}.placeholder,.video-thumb{height:100%;display:grid;place-content:center;color:var(--muted)}.album-meta{padding:13px 14px 15px}.album-meta h3{margin:0 0 5px;font-size:1rem;line-height:1.3}.album-meta p{margin:0;color:var(--muted);font-size:.9rem}.breadcrumb{display:flex;gap:9px;margin-bottom:24px;color:var(--muted)}.breadcrumb a{text-decoration:none}.media-grid{columns:5 220px;column-gap:10px}.media-card{width:100%;min-width:0;margin:0 0 10px;padding:0;overflow:hidden;text-align:left;border:1px solid var(--line);border-radius:10px;background:var(--panel);color:var(--text);cursor:pointer;break-inside:avoid;display:inline-block}.media-thumb{background:#101216;overflow:hidden;min-height:70px;position:relative}
.media-card[data-gps="1"] .media-thumb::after,
.search-media-card[data-gps="1"] .search-media-thumb::after{
    content:"📍";
    position:absolute;
    right:7px;
    bottom:7px;
    z-index:6;
    display:grid;
    place-items:center;
    width:29px;
    height:29px;
    border-radius:50%;
    background:rgba(16,18,22,.88);
    font-size:17px;
    line-height:1;
    box-shadow:0 1px 6px rgba(0,0,0,.48);
    pointer-events:none
}
.video-thumb{gap:8px;aspect-ratio:16/9}.play-icon{font-size:2rem;color:var(--accent)}.media-caption{padding:8px 9px 9px;display:flex;flex-direction:column;min-width:0}.media-caption span,.media-caption small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.media-caption small{margin-top:3px;color:var(--muted)}.pagination{display:flex;align-items:center;justify-content:center;gap:20px;margin-top:30px}.pagination a{border-radius:9px;padding:9px 13px;background:var(--panel2);text-decoration:none}.empty-state{padding:24px;background:var(--panel);border-radius:var(--radius);color:var(--muted)}.site-footer{padding:30px 22px 40px;text-align:center;color:var(--muted);border-top:1px solid var(--line)}.lightbox[hidden]{display:none}.lightbox{position:fixed;z-index:1000;inset:0;background:rgba(0,0,0,.94);display:grid;grid-template-columns:70px minmax(0,1fr) 70px;align-items:center}.lightbox-stage{width:100%;height:100vh;padding:36px 20px 70px;display:grid;place-items:center;position:relative}.lightbox-image,.lightbox-video{max-width:100%;max-height:calc(100vh - 110px);object-fit:contain}.lightbox-title{position:absolute;bottom:22px;left:20px;right:20px;text-align:center;color:#ddd}.lightbox-close,.lightbox-nav{border:0;background:transparent;color:white;cursor:pointer;font-size:3rem}.lightbox-close{position:absolute;z-index:2;top:10px;right:18px}@media(max-width:700px){.header-inner{flex-direction:column;align-items:stretch;gap:10px;padding:12px 14px}.brand{align-items:center}.page{padding:20px 12px 36px}.hero,.album-header{align-items:flex-start;flex-direction:column}.hero-stats{white-space:normal}.album-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.media-grid{columns:2;column-gap:6px}.album-meta{padding:10px}.media-caption{display:none}.media-card{margin-bottom:6px}.lightbox{grid-template-columns:42px minmax(0,1fr) 42px}.lightbox-nav{font-size:2.4rem}}

.media-thumb::before{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.05),transparent);
    transform:translateX(-100%);
    animation:thumbShimmer 1.4s infinite;
    pointer-events:none
}
.media-thumb:has(img)::before{animation-duration:1.8s}
.media-thumb img{position:relative;z-index:1}
@keyframes thumbShimmer{100%{transform:translateX(100%)}}

.search-form-advanced{
    max-width:850px
}
.search-form-advanced .search-main{
    min-width:220px
}
.search-form-advanced .year-input{
    width:92px;
    flex:0 0 92px
}
.active-filter{
    display:flex;
    gap:18px;
    justify-content:space-between;
    align-items:center;
    padding:12px 14px;
    margin:-10px 0 24px;
    border:1px solid var(--line);
    border-radius:10px;
    background:var(--panel);
    color:var(--muted)
}
.active-filter a{
    color:var(--accent);
    text-decoration:none;
    white-space:nowrap
}
.lightbox-info{
    position:absolute;
    left:20px;
    right:20px;
    bottom:16px;
    text-align:center;
    text-shadow:0 1px 5px #000
}
.lightbox-title{
    position:static;
    font-weight:650;
    color:#eee
}
.lightbox-metadata{
    margin-top:4px;
    color:#bfc4ca;
    font-size:.88rem;
    line-height:1.35
}
@media(max-width:700px){
    .search-form-advanced{
        display:grid;
        grid-template-columns:1fr 1fr auto
    }
    .search-form-advanced .search-main{
        grid-column:1/-1;
        min-width:0
    }
    .search-form-advanced .year-input{
        width:100%;
        flex:auto
    }
    .active-filter{
        align-items:flex-start;
        flex-direction:column;
        gap:8px
    }
    .lightbox-metadata{
        font-size:.78rem
    }
}

.user-menu{display:flex;align-items:center;gap:10px;margin-left:auto;white-space:nowrap;font-size:.9rem;color:var(--muted)}
.user-menu a{color:var(--accent);text-decoration:none}
.login-body{min-height:100vh;display:grid;place-items:center;padding:20px;background:var(--bg)}
.login-page{width:min(430px,100%)}
.login-card{border:1px solid var(--line);border-radius:18px;background:var(--panel);padding:30px}
.login-brand{margin-bottom:24px;text-align:center}
.login-brand h1{margin:0 0 5px}
.login-brand p{margin:0;color:var(--muted)}
.login-form{display:grid;gap:16px}
.login-form label{display:grid;gap:7px;color:var(--muted);font-size:.92rem}
.login-form input{width:100%;border:1px solid var(--line);border-radius:10px;background:#101318;color:var(--text);padding:12px 13px;font-size:1rem}
.login-form button{border:0;border-radius:10px;background:var(--accent);color:#151515;padding:12px 16px;font-size:1rem;font-weight:750;cursor:pointer}
.login-error{padding:10px 12px;margin-bottom:16px;border-radius:9px;background:#3a1717;color:#ffd8d8}
@media(max-width:900px){.user-menu{order:3;justify-content:center;margin-left:0}}

.error-body{min-height:100vh;display:grid;place-items:center;padding:20px;background:var(--bg)}
.error-page{width:min(520px,100%)}
.error-card{text-align:center;border:1px solid var(--line);border-radius:18px;background:var(--panel);padding:38px 28px}
.error-code{font-size:4rem;line-height:1;font-weight:800;color:var(--accent);margin-bottom:12px}
.error-card h1{margin:0 0 10px}
.error-card p{margin:0 0 24px;color:var(--muted)}
.error-button{display:inline-block;border-radius:10px;background:var(--accent);color:#151515;padding:11px 15px;font-weight:750;text-decoration:none}

.favorite-wrap{
    position:relative;
    display:inline-block;
    width:100%;
    break-inside:avoid;
    margin-bottom:10px
}
.favorite-wrap .media-card{margin-bottom:0}
.favorite-button{
    position:absolute;
    top:8px;
    right:8px;
    z-index:4;
    width:36px;
    height:36px;
    border:0;
    border-radius:50%;
    background:rgba(20,22,26,.76);
    color:#fff;
    font-size:1.35rem;
    line-height:1;
    cursor:pointer;
    backdrop-filter:blur(6px)
}
.favorite-button.active{
    color:#ff5b74;
    background:rgba(30,18,21,.88)
}

.lightbox-favorite{
    position:absolute;
    z-index:5;
    top:18px;
    right:72px;
    width:44px;
    height:44px;
    border:0;
    border-radius:50%;
    background:rgba(20,22,26,.78);
    color:#fff;
    font-size:1.7rem;
    line-height:1;
    cursor:pointer;
    backdrop-filter:blur(8px)
}
.lightbox-favorite.active{
    color:#ff5b74;
    background:rgba(30,18,21,.9)
}
.lightbox-favorite:hover{
    transform:scale(1.05)
}
@media(max-width:700px){
    .lightbox-favorite{
        top:10px;
        right:56px;
        width:40px;
        height:40px;
        font-size:1.5rem
    }
}

.brand-subtitle{
    font-size:.82rem;
    letter-spacing:.01em
}
.breadcrumb-enhanced{
    display:flex;
    align-items:center;
    gap:14px;
    flex-wrap:wrap
}
.back-button{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:9px 14px;
    border:1.5px solid var(--accent);
    border-radius:11px;
    color:var(--accent);
    text-decoration:none;
    font-weight:700;
    transition:background-color .15s ease,color .15s ease,transform .15s ease
}
.back-button:hover{
    background:var(--accent);
    color:#151515;
    transform:translateY(-1px)
}
.breadcrumb-link{
    color:var(--accent);
    text-decoration:none;
    font-weight:600
}
.breadcrumb-year{
    display:inline-flex;
    align-items:center;
    padding:6px 10px;
    border-radius:9px;
    background:var(--panel-2);
    text-decoration:none;
    color:var(--accent);
    font-weight:650
}
@media(max-width:700px){
    .breadcrumb-enhanced{
        gap:9px
    }
    .back-button{
        padding:8px 12px
    }
}

.timeline-header{
    margin-bottom:18px
}
.timeline-year-picker{
    display:flex;
    flex-wrap:wrap;
    gap:9px;
    margin:0 0 34px
}
.timeline-year-button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:68px;
    padding:9px 13px;
    border:1.5px solid var(--accent);
    border-radius:11px;
    color:var(--accent);
    background:transparent;
    text-decoration:none;
    font-weight:700;
    transition:background-color .15s ease,color .15s ease,transform .15s ease
}
.timeline-year-button:hover,
.timeline-year-button.active{
    background:var(--accent);
    color:#151515;
    transform:translateY(-1px)
}
.timeline-month{
    margin:0 0 44px
}
.timeline-month-heading{
    display:flex;
    align-items:baseline;
    gap:12px;
    padding-bottom:9px;
    margin-bottom:14px;
    border-bottom:1px solid var(--line)
}
.timeline-month-heading h2{
    margin:0;
    font-size:1.55rem
}
.timeline-month-heading span{
    color:var(--muted);
    font-size:.9rem
}
.timeline-pagination{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:14px;
    flex-wrap:wrap;
    margin:34px 0 8px
}
.timeline-page-status{
    color:var(--muted);
    padding:8px 4px
}
.timeline-more-button{
    min-width:140px;
    justify-content:center
}
@media(max-width:700px){
    .timeline-year-picker{
        gap:7px
    }
    .timeline-year-button{
        min-width:60px;
        padding:8px 10px
    }
    .timeline-month-heading{
        align-items:flex-start;
        flex-direction:column;
        gap:4px
    }
}

.timeline-unknown{
    padding-top:6px
}
.timeline-unknown .timeline-month-heading h2{
    color:var(--muted)
}

.timeline-month-picker{
    display:flex;
    flex-wrap:wrap;
    gap:9px;
    margin:0 0 34px
}
.timeline-month-button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:58px;
    padding:9px 13px;
    border:1.5px solid var(--accent);
    border-radius:11px;
    color:var(--accent);
    background:transparent;
    text-decoration:none;
    font-weight:700;
    text-transform:lowercase;
    transition:background-color .15s ease,color .15s ease,transform .15s ease
}
.timeline-month-button:hover,
.timeline-month-button.active{
    background:var(--accent);
    color:#151515;
    transform:translateY(-1px)
}
.timeline-month-unknown-button{
    min-width:96px
}
@media(max-width:700px){
    .timeline-month-picker{
        gap:7px
    }
    .timeline-month-button{
        min-width:52px;
        padding:8px 10px
    }
}

.subject-section{margin:0 0 34px}
.subject-section h2{margin:0 0 12px}
.subject-buttons{display:flex;flex-wrap:wrap;gap:9px}
.subject-button{min-width:auto;gap:8px}
.subject-button span{opacity:.72;font-size:.85em}
.subject-album-list{display:grid;gap:12px}
.subject-album-card{display:block;padding:16px 18px;border:1px solid var(--line);border-radius:14px;text-decoration:none;color:inherit;background:var(--panel)}
.subject-album-card:hover{border-color:var(--accent)}
.subject-album-card>div:first-child{display:flex;justify-content:space-between;gap:15px;align-items:baseline}
.subject-album-card strong{font-size:1.08rem}
.subject-album-card>div:first-child span{color:var(--muted)}
.metadata-badges{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.metadata-badges span{display:inline-flex;padding:4px 8px;border:1px solid var(--accent);border-radius:999px;color:var(--accent);font-size:.75rem;font-weight:700;text-transform:uppercase}

.timeline-context-meta{
    margin:28px 0 38px;
    padding-top:22px;
    border-top:1px solid var(--line)
}
.timeline-context-heading{
    margin-bottom:18px
}
.timeline-context-heading h2{
    margin:0;
    font-size:1.5rem
}
.timeline-context-group{
    margin:0 0 20px
}
.timeline-context-group h3{
    margin:0 0 10px;
    color:var(--muted);
    font-size:.95rem;
    font-weight:650
}
.timeline-context-button span{
    margin-left:6px;
    opacity:.7;
    font-size:.85em
}


/* 0.9.0 - metadata zichtbaar op album- en tijdlijnniveau */
.album-card{display:flex;flex-direction:column}
.album-main-link,.album-title-link{text-decoration:none;color:inherit}
.album-main-link{display:block}
.album-title-link{display:block}
.album-card .album-meta{margin-top:auto}
.album-card-badges{margin-top:10px}
.metadata-badges{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.metadata-badge{
    display:inline-flex;
    align-items:center;
    padding:4px 8px;
    border:1px solid var(--accent);
    border-radius:999px;
    color:var(--accent);
    font-size:.72rem;
    font-weight:700;
    line-height:1.15;
    text-transform:uppercase;
    text-decoration:none;
    transition:background .15s ease,color .15s ease,transform .15s ease
}
.metadata-badge:hover{
    background:var(--accent);
    color:#151515;
    transform:translateY(-1px)
}
.album-detail-badges{margin-top:14px;max-width:900px}
.timeline-album-metadata{
    margin:26px 0 34px;
    padding-top:22px;
    border-top:1px solid var(--line)
}
.timeline-album-metadata h2{margin:0 0 14px;font-size:1.25rem}
.timeline-album-meta-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(250px,1fr));
    gap:10px
}
.timeline-album-meta-card{
    padding:12px 14px;
    border:1px solid var(--line);
    border-radius:12px;
    background:var(--panel)
}
.timeline-album-meta-card>a{
    display:block;
    font-weight:700;
    text-decoration:none
}
.timeline-card-badges{margin-top:8px}
@media(max-width:700px){
    .metadata-badge{font-size:.66rem;padding:4px 7px}
    .timeline-album-meta-grid{grid-template-columns:1fr}
}


/* 1.0.2 - admin navigatie */
.admin-menu{
    position:relative
}
.admin-menu summary{
    cursor:pointer;
    list-style:none;
    color:inherit
}
.admin-menu summary::-webkit-details-marker{
    display:none
}
.admin-menu-panel{
    position:absolute;
    z-index:20;
    right:0;
    top:calc(100% + 8px);
    min-width:190px;
    padding:8px;
    border:1px solid var(--line);
    border-radius:10px;
    background:var(--panel);
    box-shadow:0 8px 24px rgba(0,0,0,.25)
}
.admin-menu-panel a{
    display:block;
    padding:8px 10px;
    border-radius:7px;
    white-space:nowrap
}
.admin-menu-panel a:hover{
    background:rgba(255,255,255,.06)
}


/* 1.0.3 - uniforme adminnavigatie */
.admin-navigation-wrap{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:12px;
    flex-wrap:wrap;
    margin:0 0 20px
}
.admin-navigation-wrap .admin-nav{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
    margin:0
}
.admin-navigation-wrap .admin-home-button{
    white-space:nowrap
}
@media(max-width:700px){
    .admin-navigation-wrap{
        flex-direction:column
    }
}


/* 1.0.4 - expliciete albumlink in Onderwerpen-resultaten */
.photos-badge{
    font-weight:800;
    letter-spacing:.03em
}

.subject-album-heading{
    display:flex;
    justify-content:space-between;
    align-items:baseline;
    gap:12px
}
.subject-album-title{
    color:inherit;
    text-decoration:none
}
.subject-album-title:hover{
    color:var(--accent)
}
.subject-album-actions{
    display:flex;
    align-items:flex-start;
    gap:6px;
    flex-wrap:wrap;
    margin-top:10px
}
.subject-album-actions .metadata-badges{
    margin-top:0
}

/* 1.0.5 - admin look-and-feel volledig gelijkgetrokken */

.admin-wrap{
    max-width:1100px;
    margin:20px auto 30px;
    padding:0 16px
}
.admin-header{
    margin-bottom:18px
}
.admin-header h1{
    margin:0;
    font-size:2rem;
    line-height:1.15
}
.admin-subtitle{
    margin-top:6px;
    color:var(--muted);
    font-size:.95rem
}
.admin-navigation-wrap{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:12px;
    flex-wrap:wrap;
    margin:0 0 26px
}
.admin-navigation-wrap .admin-nav{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
    margin:0
}
.admin-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border:1px solid transparent;
    border-radius:10px;
    padding:10px 14px;
    background:var(--accent);
    color:#151515;
    text-decoration:none;
    font-weight:700;
    cursor:pointer;
    min-height:44px
}
.admin-btn.secondary{
    background:#343a44;
    color:var(--text)
}
.admin-btn.secondary.active{
    border-color:var(--accent);
    color:var(--accent);
    background:#343a44
}
.admin-home-button{
    white-space:nowrap
}
.admin-card{
    background:var(--panel);
    border:1px solid var(--line);
    border-radius:14px;
    padding:18px;
    margin-bottom:20px
}
.admin-card h2{
    margin-top:0
}
.muted{
    color:var(--muted)
}
.notice{
    padding:10px 12px;
    border-radius:8px;
    margin-bottom:15px;
    background:#17351f
}
.error{
    padding:10px 12px;
    border-radius:8px;
    margin-bottom:15px;
    background:#4a1c1c
}
@media(max-width:700px){
    .admin-navigation-wrap{
        flex-direction:column
    }
    .admin-header h1{
        font-size:1.65rem
    }
}

/* 1.0.7 exact shared admin shell */

.admin-wrap{
    width:min(1100px,calc(100% - 32px));
    max-width:1100px;
    margin:20px auto 30px;
    padding:0;
}
.admin-header{
    margin:0 0 18px;
    padding:0;
}
.admin-header h1{
    margin:0;
    padding:0;
    font-size:2rem;
    line-height:1.15;
}
.admin-subtitle{
    margin:8px 0 0;
    padding:0;
    color:var(--muted);
    font-size:.95rem;
    line-height:1.3;
}
.admin-navigation-wrap{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:12px;
    flex-wrap:wrap;
    margin:0 0 26px;
    padding:0;
}
.admin-navigation-wrap .admin-nav{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
    margin:0;
    padding:0;
}
.admin-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:44px;
    box-sizing:border-box;
    border:1px solid transparent;
    border-radius:10px;
    padding:10px 14px;
    background:var(--accent);
    color:#151515;
    text-decoration:none;
    font-weight:700;
    line-height:1;
    cursor:pointer;
}
.admin-btn.secondary{
    background:#343a44;
    color:var(--text);
}
.admin-btn.secondary.active{
    border-color:var(--accent);
    color:var(--accent);
    background:#343a44;
}
.admin-home-button{
    white-space:nowrap;
}
@media(max-width:700px){
    .admin-wrap{
        width:calc(100% - 24px);
        margin:14px auto 24px;
    }
    .admin-navigation-wrap{
        flex-direction:column;
    }
    .admin-header h1{
        font-size:1.65rem;
    }
}


/* 1.1.1 - expliciete downloadfunctie */
.lightbox-download{
    position:absolute;
    right:18px;
    bottom:18px;
    z-index:4;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:42px;
    padding:9px 13px;
    border:1px solid var(--accent);
    border-radius:10px;
    background:#171a20;
    color:var(--accent);
    text-decoration:none;
    font-weight:700
}
.lightbox-download:hover{
    background:var(--accent);
    color:#151515
}
.lightbox-download[hidden]{
    display:none!important
}


/* 1.2.0 - Mijn overzicht / personalisatie */
.personal-hero{
    margin:18px 0 30px
}
.personal-hero h1{
    margin:0 0 8px
}
.personal-hero p{
    margin:0;
    color:var(--muted)
}
.personal-section{
    margin:0 0 38px
}
.personal-section-heading{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:14px;
    flex-wrap:wrap;
    margin-bottom:14px
}
.personal-section-heading h2{
    margin:0 0 5px
}
.personal-section-heading p{
    margin:0;
    color:var(--muted)
}
.personal-album-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
    gap:14px
}
.personal-album-card{
    overflow:hidden;
    border:1px solid var(--line);
    border-radius:14px;
    background:var(--panel)
}
.personal-album-card>a{
    color:inherit;
    text-decoration:none
}
.personal-album-cover{
    aspect-ratio:4/3;
    overflow:hidden;
    background:#101318
}
.personal-album-cover img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block
}
.personal-album-info{
    display:grid;
    gap:5px;
    padding:12px 13px 4px
}
.personal-album-info span{
    color:var(--muted);
    font-size:.85rem
}
.personal-album-badges{
    padding:0 13px 13px
}
.personal-favorites-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
    gap:12px
}
.personal-favorite-card{
    overflow:hidden;
    border:1px solid var(--line);
    border-radius:12px;
    background:var(--panel);
    color:inherit;
    text-decoration:none
}
.personal-favorite-thumb{
    aspect-ratio:4/3;
    overflow:hidden;
    background:#101318
}
.personal-favorite-thumb img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block
}
.personal-favorite-info{
    display:grid;
    gap:3px;
    padding:10px 11px
}
.personal-favorite-info span{
    color:var(--muted);
    font-size:.78rem;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap
}


/* 1.3.3 - zichtbaarheid privacy-content */
.privacy-badge{
    display:inline-flex;
    align-items:center;
    width:max-content;
    padding:4px 8px;
    margin:5px 0 3px;
    border:1px solid var(--accent);
    border-radius:999px;
    color:var(--accent);
    font-size:.72rem;
    font-weight:800;
    letter-spacing:.06em;
    line-height:1.1
}
.privacy-notice{
    display:flex;
    align-items:center;
    gap:9px;
    flex-wrap:wrap;
    margin:7px 0 4px;
    color:var(--muted);
    font-size:.88rem
}
.privacy-notice .privacy-badge{
    margin:0
}


/* 1.4.0 - centrale zoekfunctie */
.search-page-header{
    margin:18px 0 18px
}
.search-page-header h1{
    margin:0 0 7px
}
.search-page-header p{
    margin:0;
    color:var(--muted)
}
.central-search-form{
    display:grid;
    grid-template-columns:minmax(260px,1fr) 120px 120px auto auto;
    gap:10px;
    align-items:end;
    margin:0 0 30px;
    padding:16px;
    border:1px solid var(--line);
    border-radius:14px;
    background:var(--panel)
}
.central-search-form label{
    display:grid;
    gap:6px
}
.central-search-form label>span{
    color:var(--muted);
    font-size:.82rem
}
.central-search-form input{
    width:100%;
    box-sizing:border-box;
    padding:11px 12px;
    border:1px solid var(--line);
    border-radius:9px;
    background:#101318;
    color:var(--text)
}
.search-page-button,
.search-page-reset{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:42px;
    box-sizing:border-box;
    border-radius:9px;
    padding:10px 13px;
    text-decoration:none;
    font-weight:700
}
.search-page-button{
    border:0;
    background:var(--accent);
    color:#151515;
    cursor:pointer
}
.search-page-reset{
    background:#343a44;
    color:var(--text)
}
.search-result-section{
    margin:0 0 38px
}
.search-result-heading{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:12px;
    margin-bottom:13px
}
.search-result-heading h2{
    margin:0 0 4px
}
.search-result-heading p{
    margin:0;
    color:var(--muted)
}
.search-album-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
    gap:14px
}
.search-album-card{
    overflow:hidden;
    border:1px solid var(--line);
    border-radius:14px;
    background:var(--panel)
}
.search-album-main{
    display:block;
    color:inherit;
    text-decoration:none
}
.search-album-cover{
    aspect-ratio:4/3;
    overflow:hidden;
    background:#101318
}
.search-album-cover img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block
}
.search-album-info{
    display:grid;
    gap:5px;
    padding:11px 12px 5px
}
.search-album-info>span:not(.privacy-badge){
    color:var(--muted);
    font-size:.84rem
}
.search-album-badges{
    padding:0 12px 12px
}
.search-media-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
    gap:12px
}
.search-media-card{
    overflow:hidden;
    border:1px solid var(--line);
    border-radius:12px;
    background:var(--panel);
    color:inherit;
    text-decoration:none
}
.search-media-thumb{position:relative;
    aspect-ratio:4/3;
    overflow:hidden;
    background:#101318
}
.search-media-thumb img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block
}
.search-media-info{
    display:grid;
    gap:4px;
    padding:10px 11px
}
.search-media-info>span:not(.privacy-badge){
    color:var(--muted);
    font-size:.78rem
}
.search-media-filename{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap
}
.search-empty{
    margin-top:18px
}
@media(max-width:850px){
    .central-search-form{
        grid-template-columns:1fr 1fr
    }
    .central-search-main{
        grid-column:1/-1
    }
}
@media(max-width:520px){
    .central-search-form{
        grid-template-columns:1fr
    }
    .central-search-main{
        grid-column:auto
    }
}


/* 1.5.0 - Personen */
.people-header{margin:18px 0}
.people-header h1{margin:0 0 7px}
.people-header p{margin:0;color:var(--muted)}
.people-search{
    display:flex;
    gap:9px;
    flex-wrap:wrap;
    margin:0 0 15px
}
.people-search input{
    min-width:240px;
    flex:1;
    padding:11px 12px;
    border:1px solid var(--line);
    border-radius:9px;
    background:#101318;
    color:var(--text)
}
.people-search button,
.people-search a{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:42px;
    box-sizing:border-box;
    padding:10px 14px;
    border:0;
    border-radius:9px;
    text-decoration:none;
    font-weight:700
}
.people-search button{
    background:var(--accent);
    color:#151515;
    cursor:pointer
}
.people-search a{
    background:#343a44;
    color:var(--text)
}
.people-summary{
    margin:0 0 13px;
    color:var(--muted)
}
.people-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(190px,1fr));
    gap:14px
}
.person-card{
    overflow:hidden;
    border:1px solid var(--line);
    border-radius:14px;
    background:var(--panel);
    color:inherit;
    text-decoration:none
}
.person-card-photo{
    aspect-ratio:4/3;
    overflow:hidden;
    background:#101318
}
.person-card-photo img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block
}
.person-initial{
    width:100%;
    height:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:3rem;
    font-weight:800;
    color:var(--accent)
}
.person-card-info{
    display:grid;
    gap:4px;
    padding:11px 12px
}
.person-card-info span{
    color:var(--muted);
    font-size:.84rem
}
.people-album-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
    gap:14px
}
.person-album-card{
    overflow:hidden;
    border:1px solid var(--line);
    border-radius:14px;
    background:var(--panel)
}
.person-album-card>a{
    color:inherit;
    text-decoration:none
}
.person-album-cover{
    aspect-ratio:4/3;
    overflow:hidden;
    background:#101318
}
.person-album-cover img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block
}
.person-album-info{
    display:grid;
    gap:5px;
    padding:11px 12px 6px
}
.person-album-info>span:not(.privacy-badge){
    color:var(--muted);
    font-size:.84rem
}
.person-album-badges{
    padding:0 12px 12px
}
@media(max-width:520px){
    .people-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:10px
    }
    .people-search input{
        min-width:100%
    }
}


/* 1.5.2 - compacte mobiele navigatie en albumkaarten */
.mobile-menu-toggle{display:none}

@media(max-width:768px){
    .header-inner{
        display:grid;
        grid-template-columns:minmax(0,1fr) 44px;
        gap:8px 12px;
        align-items:center;
        padding:10px 14px
    }
    .brand{align-items:flex-start;min-width:0}
    .brand-title{font-size:1rem}
    .brand-subtitle{font-size:.72rem}

    .mobile-menu-toggle{
        display:inline-flex;
        align-items:center;
        justify-content:center;
        width:44px;
        height:44px;
        padding:0;
        border:1px solid var(--line);
        border-radius:10px;
        background:var(--panel);
        color:var(--accent);
        font-size:1.65rem;
        line-height:1;
        cursor:pointer
    }
    .user-menu{
        display:none;
        grid-column:1/-1;
        margin:0;
        padding:5px 0 3px;
        font-size:.9rem
    }
    .user-menu.is-open{
        display:flex;
        flex-direction:column;
        align-items:stretch;
        gap:2px
    }
    .user-menu>span,
    .user-menu>a,
    .user-menu>details>summary{
        display:block;
        padding:9px 8px;
        border-radius:8px
    }
    .user-menu>span{color:var(--muted);font-size:.8rem}
    .user-menu>a:hover,
    .user-menu>details>summary:hover{background:rgba(255,255,255,.05)}
    .admin-menu-panel{
        position:static;
        margin:3px 0 4px 8px;
        box-shadow:none
    }

    .page{padding:16px 12px 32px}
    .hero,.album-header{gap:9px;margin-bottom:20px}
    .hero h1,.album-header h1{
        font-size:clamp(1.8rem,8vw,2.25rem);
        line-height:1.08
    }
    .hero p,.album-header p,.hero-stats{font-size:.92rem}

    .year-section{margin:26px 0 36px}
    .year-heading{gap:9px;margin-bottom:12px;padding-bottom:8px}
    .year-heading h2{font-size:1.75rem}
    .year-heading span{font-size:.88rem}

    .album-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:9px
    }
    .album-card{min-width:0;border-radius:11px}
    .album-cover{aspect-ratio:4/3}
    .album-meta{padding:8px 9px 9px}
    .album-meta h3{margin-bottom:4px;font-size:.86rem;line-height:1.2}
    .album-meta p{font-size:.73rem;line-height:1.25}
    .album-card-badges,.album-meta .metadata-badges{margin-top:6px;gap:4px}
    .album-card .metadata-badge{
        padding:3px 5px;
        font-size:.55rem;
        line-height:1.05
    }
}
@media(max-width:360px){
    .album-grid{grid-template-columns:1fr}
}

/* 1.8.12 - ondersteuning, contact en beheerstatistieken */
.support-form-card,.support-card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:18px;margin:18px 0}.support-form{display:grid;gap:15px;max-width:820px}.support-form label{display:grid;gap:7px;color:var(--muted)}.support-form input,.support-form select,.support-form textarea{width:100%;box-sizing:border-box;padding:11px;border:1px solid var(--line);border-radius:9px;background:#101318;color:var(--text);font:inherit}.support-form textarea{resize:vertical}.support-context{padding:10px 12px;border-radius:9px;background:#171b20;color:var(--muted);font-size:.88rem}.support-notice{padding:12px 14px;border-radius:10px;margin:14px 0}.support-notice.success{background:#173b2a}.support-notice.error{background:#552525}.stats-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:16px 0}.stat-card{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:15px}.stat-card strong{display:block;font-size:1.65rem;color:var(--accent)}.stat-card span{color:var(--muted);font-size:.84rem}.support-table-wrap{overflow:auto}.support-table{width:100%;border-collapse:collapse}.support-table th,.support-table td{padding:10px 9px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}.status-pill{display:inline-block;border:1px solid var(--line);border-radius:999px;padding:3px 8px;font-size:.8rem}.status-pill.new{color:#ffcf5a}.status-pill.in_progress{color:#79c8ff}.status-pill.done{color:#78d68b}@media(max-width:800px){.stats-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:480px){.stats-grid{grid-template-columns:1fr}}

/* 1.9.0 - beheerlink GPS-correctie op fotokaarten */
.favorite-wrap .gps-edit-link{position:absolute;right:10px;bottom:10px;z-index:4;display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;background:rgba(10,14,20,.86);border:1px solid var(--line);text-decoration:none;font-size:18px}
.favorite-wrap .gps-edit-link:hover{transform:scale(1.05)}
\n\n/* 1.9.0.4 - duidelijke GPS-selectieactie, ook mobiel */
.gps-selection-bar {
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
  margin:12px 0;
  padding:10px 12px;
  border:1px solid var(--line);
  border-radius:10px;
  background:var(--panel);
  position:relative;
  z-index:20;
}
.gps-selection-bar .gps-selection-action:disabled { opacity:.5; cursor:not-allowed; }
.gps-selection-bar.has-selection .gps-selection-action { font-weight:700; }
.gps-selection-bar button:disabled { opacity:.5; }
@media (max-width:700px) {
  .gps-selection-bar.has-selection {
    position:fixed;
    left:10px;
    right:10px;
    bottom:calc(10px + env(safe-area-inset-bottom, 0px));
    margin:0;
    padding:10px;
    z-index:1000;
    box-shadow:0 6px 24px rgba(0,0,0,.45);
    max-height:42vh;
    overflow:auto;
  }
  .gps-selection-bar.has-selection strong { width:100%; }
  .gps-selection-bar.has-selection .gps-selection-action { order:-1; width:100%; min-height:46px; }
  .gps-selection-bar.has-selection .muted { flex:1 1 100%; }
  body:has(.gps-selection-bar.has-selection) { padding-bottom:180px; }
}

/* 1.9.1.13: compacte uploadinformatie in album */
.album-last-upload{margin:.35rem 0 0;font-size:.88rem;color:var(--muted)}.album-last-upload strong{color:var(--text);font-weight:600}

/* 1.9.1.17 - hoofdpagina-layout vroeg laden om ongestylede tussenweergave (FOUC) te voorkomen */
/* Hoofdpagina 1.8.24: desktop zijbalk + compact jaaroverzicht */
@media(min-width:901px){
  .site-header{display:none}
  .page{
    max-width:none;
    margin:0;
    padding:0 0 48px 300px;
  }
  .site-footer{
    margin-left:300px;
  }
}

.archive-sidebar{
  position:fixed;
  inset:0 auto 0 0;
  width:300px;
  z-index:60;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding:36px 14px 24px;
  background:linear-gradient(180deg,#111419 0%,#0d1014 100%);
  border-right:1px solid var(--line);
}
.archive-brand{
  display:block;
  padding:0 16px 28px;
  margin:0 6px 18px;
  border-bottom:1px solid var(--line);
  text-decoration:none;
}
.archive-brand strong{
  display:block;
  font-size:1.55rem;
  line-height:1.18;
  letter-spacing:.01em;
}
.archive-brand span{
  display:block;
  margin-top:14px;
  color:var(--muted);
  font-size:.94rem;
}
.archive-nav{
  display:flex;
  flex-direction:column;
  gap:5px;
}
.archive-nav a,
.archive-sidebar-bottom a{
  min-height:52px;
  display:flex;
  align-items:center;
  gap:14px;
  padding:0 15px;
  border-radius:9px;
  color:#e7e9ec;
  text-decoration:none;
  font-size:1.03rem;
}
.archive-nav a:hover,
.archive-sidebar-bottom a:hover{
  background:rgba(255,255,255,.06);
}
.archive-nav a.active{
  background:linear-gradient(90deg,#3b3f45,#33373d);
  color:#fff;
  font-weight:650;
}
.archive-nav-icon{
  width:26px;
  flex:0 0 26px;
  display:inline-grid;
  place-items:center;
  font-size:1.35rem;
  line-height:1;
  color:#d7dbe0;
}
.archive-sidebar-bottom{
  margin:20px 6px 0;
  padding-top:20px;
  border-top:1px solid var(--line);
}
.archive-user-chevron{
  margin-left:auto;
  color:var(--muted);
}

.archive-main{
  width:min(100%,1500px);
  margin:0 auto;
  padding:27px 58px 60px;
}
.archive-breadcrumb{
  min-height:44px;
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:12px;
  color:var(--muted);
  font-size:1.05rem;
}
.archive-breadcrumb a{
  text-decoration:none;
  color:#dfe2e6;
  font-size:1.35rem;
}

.year-section{
  margin:0;
  content-visibility:auto;
  contain-intrinsic-size:520px;
}
.year-toggle{
  width:100%;
  min-height:82px;
  border:0;
  border-bottom:1px solid var(--line);
  background:transparent;
  color:inherit;
  padding:12px 0;
  margin:0;
  display:flex;
  align-items:center;
  gap:18px;
  text-align:left;
  cursor:pointer;
}
.year-toggle .year-title{
  flex:0 0 auto;
  min-width:94px;
  font-size:2rem;
  line-height:1;
  font-weight:720;
  color:var(--text);
  transition:font-size .15s ease,min-width .15s ease;
}
.year-toggle[aria-expanded="true"]{
  min-height:108px;
}
.year-toggle[aria-expanded="true"] .year-title{
  min-width:194px;
  font-size:4.25rem;
  font-weight:680;
  letter-spacing:-.035em;
}
.year-toggle-box{
  width:56px;
  height:56px;
  flex:0 0 56px;
  display:grid;
  place-items:center;
  border-radius:7px;
  background:#1b1e23;
  border:1px solid #22262c;
  color:#f2f3f4;
  font-size:1.75rem;
  line-height:1;
}
.year-toggle[aria-expanded="true"] .year-toggle-box{
  border-color:#6a3333;
}
.year-summary{
  color:var(--muted);
  font-size:1.05rem;
  line-height:1.2;
}
.album-grid[hidden]{
  display:none !important;
}
.archive-main .album-grid{
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:28px 26px;
  padding:20px 0 28px;
}
.archive-main .album-card{
  overflow:visible;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
}
.archive-main .album-card:hover{
  transform:none;
  border-color:transparent;
}
.archive-main .album-cover{
  border-radius:13px;
  border:1px solid var(--line);
  overflow:hidden;
  background:#111317;
}
.archive-main .album-main-link:hover .album-cover{
  border-color:#58616d;
}
.archive-main .album-meta{
  padding:9px 1px 0;
}
.archive-main .album-meta h3{
  margin:0 0 4px;
  font-size:1.07rem;
  line-height:1.25;
  font-weight:540;
}
.archive-main .album-meta p{
  font-size:.92rem;
}
.archive-main .album-card-badges{
  margin-top:7px;
}

@media(max-width:1260px) and (min-width:901px){
  .archive-main{padding-left:34px;padding-right:34px}
  .archive-main .album-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .year-toggle[aria-expanded="true"] .year-title{min-width:165px;font-size:3.6rem}
}

@media(max-width:900px){
  .archive-sidebar{display:none}
  .archive-main{
    width:100%;
    padding:0;
  }
  .archive-breadcrumb{display:none}
  .year-toggle{
    min-height:66px;
    gap:10px;
    padding:9px 0;
  }
  .year-toggle .year-title{
    min-width:76px;
    font-size:1.75rem;
  }
  .year-toggle[aria-expanded="true"]{
    min-height:82px;
  }
  .year-toggle[aria-expanded="true"] .year-title{
    min-width:112px;
    font-size:2.6rem;
  }
  .year-toggle-box{
    width:42px;
    height:42px;
    flex-basis:42px;
    font-size:1.35rem;
  }
  .year-summary{font-size:.9rem}
  .archive-main .album-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px 10px;
    padding:12px 0 20px;
  }
  .archive-main .album-meta h3{font-size:.98rem}
}

@media(max-width:520px){
  .year-toggle{
    gap:8px;
  }
  .year-toggle .year-title{
    min-width:68px;
    font-size:1.55rem;
  }
  .year-toggle[aria-expanded="true"] .year-title{
    min-width:94px;
    font-size:2.15rem;
  }
  .year-toggle-box{
    width:38px;
    height:38px;
    flex-basis:38px;
  }
  .year-summary{
    font-size:.82rem;
  }
  .archive-main .album-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

/* 1.9.1.18 - upload: keuze tussen losse bestanden en complete map */
.upload-source-actions { margin-bottom: .65rem; }
.upload-source-actions .admin-btn { cursor: pointer; }
.upload-folder-hint { margin-top: .25rem; }
@media (max-width: 640px) {
  .upload-source-actions { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
  .upload-source-actions .admin-btn { width: 100%; box-sizing: border-box; text-align: center; }
}


/* 1.9.1.19 - compacte beheer-navigatie op smartphone */
@media(max-width:800px){
  .admin-navigation-wrap{
    flex-direction:row !important;
    flex-wrap:nowrap !important;
    align-items:stretch !important;
    gap:8px !important;
    margin-bottom:16px !important;
  }
  .admin-navigation-wrap .admin-nav{
    flex:1 1 0 !important;
    min-width:0;
    flex-wrap:nowrap !important;
  }
  .admin-navigation-wrap .admin-nav .admin-btn,
  .admin-navigation-wrap .admin-home-button{
    width:100%;
    min-width:0;
    min-height:40px;
    padding:8px 10px;
    font-size:.88rem;
    white-space:nowrap;
  }
  .admin-navigation-wrap .admin-home-button{
    flex:1 1 0;
  }
}
\n\n/* 1.9.1.20 - compacte beheerpagina's en helperteksten */\n.admin-helper-text{font-size:.86rem;line-height:1.35;margin:.45rem 0 .7rem}\n@media(max-width:800px){\n  .admin-helper-text,.wrap>p.muted,.admin-wrap>p.muted,.admin-subtitle{font-size:.82rem;line-height:1.3}\n  .wrap>h1,.admin-wrap h1{margin-bottom:6px}\n  .support-card,.admin-card,.card{margin-top:10px;margin-bottom:10px}\n  .support-card,.admin-card{padding:12px}\n  .admin-compact-card{padding:10px 12px}\n  .admin-compact-card h2{margin-top:0;margin-bottom:6px}\n  .stats-grid{gap:8px}\n  .stat-card{padding:10px}\n  .support-table th,.support-table td,.admin-table th,.admin-table td{padding:7px 6px}\n}\n@media(max-width:520px){\n  .wrap,.admin-wrap{margin-top:12px}\n  .admin-navigation-wrap{margin-bottom:10px !important}\n}\n
/* 1.9.1.21 - compacte statistieken */
@media(max-width:800px){
  .stats-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important;margin:10px 0 12px!important}
  .stat-card{min-height:0!important;padding:10px 11px!important;border-radius:10px!important}
  .stat-card strong{font-size:1.3rem!important;line-height:1.05}
  .stat-card span{display:block;margin-top:3px;font-size:.73rem!important;line-height:1.2}
}
@media(max-width:480px){.stats-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}}


/* 1.9.1.27 - uploaduitleg expliciet als compacte bullets */
.upload-help-list{
  margin:.45rem 0 .85rem 1.15rem;
  padding:0;
  color:var(--muted);
  font-size:.9rem;
  line-height:1.35;
  list-style:disc outside;
}
.upload-help-list li{display:list-item;margin:.18rem 0;padding-left:.08rem;}
.upload-help-list li::marker{color:var(--accent);}
@media(max-width:640px){
  .upload-help-list{font-size:.82rem;line-height:1.28;margin:.35rem 0 .7rem 1.05rem;}
  .upload-help-list li{margin:.12rem 0;}
}


/* 1.9.1.44 - uniforme paginakoppen en compacte navigatie */
.standard-page-title,
.admin-header h1,
.admin-wrap > header h1,
.wrap > h1{
    margin:0 0 4px;
    padding:0;
    font-size:clamp(2rem,4vw,3.2rem);
    line-height:1.08;
    font-weight:750;
    letter-spacing:-.02em
}
.standard-page-meta{
    margin:0 0 20px;
    color:var(--muted);
    font-size:clamp(.9rem,2vw,1.05rem);
    line-height:1.35
}
.admin-navigation-wrap{
    display:block;
    margin:0 0 20px
}
.admin-navigation-wrap .admin-nav{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:10px;
    width:100%;
    margin:0;
    padding:0
}
.admin-navigation-wrap .admin-nav .admin-btn{
    width:100%;
    min-width:0;
    white-space:nowrap;
    padding:10px 12px
}
@media(max-width:700px){
    .standard-page-title,
    .admin-header h1,
    .admin-wrap > header h1,
    .wrap > h1{font-size:2rem}
    .standard-page-meta{font-size:.9rem;margin-bottom:14px}
    .admin-navigation-wrap{display:block}
    .admin-navigation-wrap .admin-nav{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
    .admin-navigation-wrap .admin-nav .admin-btn{
        min-height:42px;
        padding:8px 5px;
        font-size:.8rem;
        line-height:1.1;
        text-align:center;
        white-space:normal
    }
}


/* 1.9.1.45 - definitieve consistente paginakop en mobiele navigatie */
:root{
  --page-title-size:clamp(1.38rem,2.2vw,1.58rem);
  --page-meta-size:clamp(.86rem,1.55vw,.98rem)
}
.brand-title,
.standard-page-title,
.admin-header h1,
.admin-wrap > header h1,
.wrap > header h1,
.wrap > h1{
  margin:0 0 3px !important;
  padding:0 !important;
  font-size:var(--page-title-size) !important;
  line-height:1.12 !important;
  font-weight:750 !important;
  letter-spacing:-.015em !important
}
.brand-subtitle,
.standard-page-meta{
  color:var(--muted) !important;
  font-size:var(--page-meta-size) !important;
  line-height:1.3 !important;
  font-weight:400 !important
}
.standard-page-meta{margin:0 0 16px !important}
.admin-header{margin-bottom:0 !important;padding-bottom:0 !important}
.admin-header .admin-subtitle{display:none !important}

.admin-navigation-wrap{width:100%;max-width:100%;margin:0 0 16px !important;overflow:visible !important}
.admin-navigation-wrap .admin-nav{
  display:grid !important;
  width:100% !important;
  max-width:100% !important;
  gap:8px !important;
  margin:0 !important;
  padding:0 !important;
  flex-wrap:nowrap !important
}
.admin-navigation-wrap .admin-nav.nav-count-2{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
.admin-navigation-wrap .admin-nav.nav-count-3{grid-template-columns:repeat(3,minmax(0,1fr)) !important}
.admin-navigation-wrap .admin-nav .admin-btn,
.admin-navigation-wrap .admin-home-button{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:100% !important;
  min-width:0 !important;
  min-height:42px !important;
  margin:0 !important;
  padding:9px 8px !important;
  box-sizing:border-box !important;
  text-align:center !important;
  white-space:nowrap !important;
  overflow-wrap:normal !important;
  font-size:.9rem !important;
  line-height:1.12 !important
}

@media(max-width:768px){
  :root{--page-title-size:1.36rem;--page-meta-size:.86rem}
  .header-inner{padding:11px 14px !important}
  .brand{align-items:flex-start !important;min-width:0 !important}
  .standard-page-meta{margin-bottom:12px !important}
  .admin-navigation-wrap{margin-bottom:12px !important}
  .admin-navigation-wrap .admin-nav{gap:6px !important}
  .admin-navigation-wrap .admin-nav .admin-btn,
  .admin-navigation-wrap .admin-home-button{
    min-height:40px !important;
    padding:7px 5px !important;
    font-size:.78rem !important
  }
}
@media(max-width:380px){
  .admin-navigation-wrap .admin-nav .admin-btn,
  .admin-navigation-wrap .admin-home-button{font-size:.72rem !important;padding-left:3px !important;padding-right:3px !important}
}

/* 1.9.1.45 - gelijke shell-uitlijning op beheerpagina's */
@media(max-width:768px){
  body > .wrap,
  body > .admin-wrap{
    margin-top:14px !important;
    padding-left:14px !important;
    padding-right:14px !important
  }
}


/* 1.9.1.46 - consistente koppen, navigatie en compacte helperteksten */
:root{
  --page-title-size:clamp(1.58rem,2.5vw,1.78rem);
  --page-meta-size:clamp(.84rem,1.45vw,.96rem)
}
.admin-navigation-wrap .admin-nav.nav-count-1{grid-template-columns:minmax(0,1fr)!important}
.admin-helper-text{font-size:.80rem!important;line-height:1.32!important;color:var(--muted)!important;margin-top:.35rem!important;margin-bottom:.65rem!important}
@media(max-width:768px){
  :root{--page-title-size:1.52rem;--page-meta-size:.82rem}
  .admin-helper-text{font-size:.76rem!important}
}

.login-brand h1,.error-card h1{font-size:var(--page-title-size)!important;line-height:1.12!important;font-weight:750!important;letter-spacing:-.015em!important}
.login-brand p{font-size:var(--page-meta-size)!important;color:var(--muted)!important}

/* 1.9.1.47 - compacte checkboxregels op formulieren */
.support-form label.check.compact-check{
  display:flex!important;flex-direction:row!important;align-items:center!important;justify-content:flex-start!important;
  gap:9px!important;width:fit-content!important;max-width:100%!important;min-height:28px!important;
}
.support-form label.check.compact-check input[type="checkbox"]{
  display:inline-block!important;width:20px!important;height:20px!important;min-width:20px!important;max-width:20px!important;
  flex:0 0 20px!important;margin:0!important;padding:0!important;
}

/* 1.9.1.49 - compacte aanklikbare beheerregels */
.album-item-link,.user-card-row{color:inherit;text-decoration:none}.album-item-link{cursor:pointer}.album-item-link:hover,.album-item-link:focus-visible,.user-card-row:hover,.user-card-row:focus-visible{background:var(--panel2)}.row-chevron{margin-left:auto;align-self:center;font-size:1.7rem;color:var(--muted);line-height:1}.user-card-list{display:grid}.user-card-row{display:flex;align-items:center;gap:12px;padding:14px 4px;border-bottom:1px solid var(--line)}.user-card-row:last-child{border-bottom:0}.user-card-main{display:grid;gap:5px;min-width:0}.user-card-main>strong{font-size:1rem}.user-card-main small{font-size:.78rem}
@media(max-width:700px){.album-item-link{padding:12px 2px}.row-chevron{padding-left:8px}}


/* 1.9.3.2 sessiewaarschuwing */
#session-idle-warning{position:fixed;z-index:9999;left:12px;right:12px;bottom:12px;max-width:620px;margin:auto;background:#171b20;color:#fff;border:2px solid #d8a62a;border-radius:12px;padding:14px 16px;box-shadow:0 8px 30px #0008}
#session-idle-warning[hidden]{display:none}.session-warning-actions{margin-top:9px}.session-warning-button{border:0;border-radius:8px;padding:8px 12px;font-weight:800;cursor:pointer}

.session-warning-title{color:#e0bd61}.login-notice{margin:12px 0;padding:11px 13px;border:1px solid #b58a26;border-radius:10px;color:#e0bd61;background:#2d2818}

/* 1.9.3.7 - navigatie, eigen sessies en compacte bediening */
@media(min-width:901px){.archive-sidebar{overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}.archive-sidebar-top,.archive-sidebar-bottom{flex:0 0 auto}}
.archive-home-button{display:inline-flex!important;align-items:center;gap:7px;padding:7px 11px;border:1px solid var(--line);border-radius:9px;background:var(--panel);font-size:1rem!important;transition:background .15s,border-color .15s}.archive-home-button span{font-size:.88rem}.archive-home-button:hover{background:var(--panel2);border-color:var(--accent);color:var(--accent)}
.my-session-list{display:grid;gap:9px}.my-session-card{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:12px 0;border-bottom:1px solid var(--line)}.my-session-card:last-child{border-bottom:0}.my-session-ua{max-width:680px;margin-top:4px;font-size:.8rem;color:var(--muted);overflow-wrap:anywhere}.session-current-badge{padding:6px 9px;border:1px solid var(--line);border-radius:999px;color:var(--muted);font-size:.78rem}.personal-session-shortcut{padding-top:12px!important;padding-bottom:12px!important}
@media(max-width:650px){.archive-home-button span{display:none}.my-session-card{align-items:flex-start;flex-direction:column}}

/* 1.9.3.8 - vertrouwde apparaten */
.trusted-device-create{display:flex;align-items:end;gap:10px;flex-wrap:wrap;margin:10px 0 16px}.trusted-device-create label{display:grid;gap:5px;min-width:min(100%,280px);font-size:.86rem}.trusted-device-create input{padding:9px 10px;border:1px solid var(--line);border-radius:8px;background:var(--panel2);color:var(--text);font:inherit}.trusted-device-list{display:grid;gap:8px}.trusted-device-card{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:11px 0;border-bottom:1px solid var(--line)}.trusted-device-card:last-child{border-bottom:0}
@media(max-width:650px){.trusted-device-card{align-items:flex-start;flex-direction:column}.trusted-device-create{align-items:stretch}.trusted-device-create label{min-width:100%}}

/* 1.9.3.9 - consistente beheer/startnavigatie en gewone paginakoppen */
.admin-navigation-wrap .admin-nav.nav-count-1{display:flex !important;width:max-content !important;max-width:100% !important;grid-template-columns:none !important}
.admin-navigation-wrap .admin-nav.nav-count-1 .back-button{width:auto !important;justify-self:start !important}
.standard-user-heading{max-width:1100px;margin:0 0 18px;padding:0}
.standard-user-heading h1{margin:0 0 3px;font-size:var(--page-title-size);line-height:1.12;font-weight:750;letter-spacing:-.015em}
.standard-user-heading .standard-page-meta{margin:0 0 14px !important}
.standard-user-heading .breadcrumb{margin:0 0 12px}
.standard-user-heading .page-intro{margin:0;color:var(--muted);font-size:.94rem;line-height:1.4}
@media(max-width:768px){.standard-user-heading{margin-bottom:14px}.standard-user-heading .breadcrumb{margin-bottom:10px}}

.standardized-context-header h1{font-size:var(--page-title-size) !important;line-height:1.12 !important;font-weight:750 !important;letter-spacing:-.015em !important}
.standardized-context-header{margin-bottom:18px !important}

/* 1.9.3.10: uniforme paginakop en Home-navigatie */
.standard-user-heading{margin-top:18px}
.standard-user-heading .breadcrumb{margin-top:12px}
.back-button,.admin-home-button{width:auto!important;max-width:max-content;display:inline-flex;align-items:center}
@media(max-width:700px){.standard-user-heading{margin-top:14px}}

/* 1.9.3.11 - applicatiebrede compacte actiestandaard. */
.admin-navigation-wrap{justify-content:flex-start!important;align-items:center!important;gap:7px!important;margin-bottom:14px!important}
.admin-navigation-wrap .admin-nav{display:flex!important;justify-content:flex-start!important;align-items:center!important;gap:7px!important;flex-wrap:wrap!important;width:auto!important}
.admin-navigation-wrap .admin-btn,.admin-navigation-wrap .back-button,.admin-btn,.back-button{width:auto!important;min-width:0!important;max-width:max-content!important;min-height:36px!important;padding:7px 10px!important;border-radius:9px!important;line-height:1.15!important;white-space:nowrap}
.admin-actions{gap:7px!important}.admin-actions .admin-btn,.admin-actions button{width:auto!important;min-width:0!important;min-height:36px!important;padding:7px 10px!important}
@media(max-width:620px){.admin-navigation-wrap .admin-nav{gap:6px!important}.admin-navigation-wrap .admin-btn,.admin-navigation-wrap .back-button{font-size:.84rem!important;padding:7px 9px!important}}
.admin-navigation-wrap .admin-home-button{display:inline-flex!important}

/* 1.9.3.12 - uniforme actieve hover/focus-toestand voor alle actieknoppen. */
.admin-btn,.back-button,.action-button,.btn,
button,input[type="submit"],input[type="button"],
.search-form button,.login-form button,.session-warning-button,
.timeline-more-button,.people-search button,.gps-selection-bar button,
.error-button,.favorite-button,.lightbox-download,.metadata-badge,
.archive-nav a,.archive-sidebar-bottom a,.security-pill-link{
  transition:background-color .14s ease,border-color .14s ease,color .14s ease,box-shadow .14s ease,transform .14s ease,filter .14s ease;
}
.admin-btn:not(:disabled):hover,.admin-btn:not(:disabled):focus-visible,
.back-button:not(:disabled):hover,.back-button:not(:disabled):focus-visible,
.action-button:not(:disabled):hover,.action-button:not(:disabled):focus-visible,
.btn:not(:disabled):hover,.btn:not(:disabled):focus-visible,
button:not(:disabled):hover,button:not(:disabled):focus-visible,
input[type="submit"]:not(:disabled):hover,input[type="submit"]:not(:disabled):focus-visible,
input[type="button"]:not(:disabled):hover,input[type="button"]:not(:disabled):focus-visible,
.error-button:hover,.error-button:focus-visible,
.security-pill-link:hover,.security-pill-link:focus-visible{
  border-color:var(--accent)!important;
  box-shadow:0 0 0 2px rgba(240,199,94,.14);
  filter:brightness(1.08);
  transform:translateY(-1px);
  outline:none;
}
.admin-btn.secondary:not(:disabled):hover,.admin-btn.secondary:not(:disabled):focus-visible,
.back-button:not(:disabled):hover,.back-button:not(:disabled):focus-visible{
  background:var(--panel2)!important;
  color:var(--accent)!important;
  border-color:var(--accent)!important;
}
button:disabled,input[type="submit"]:disabled,input[type="button"]:disabled,
.admin-btn[aria-disabled="true"],.back-button[aria-disabled="true"]{
  cursor:not-allowed!important;transform:none!important;filter:none!important;box-shadow:none!important;
}
@media(hover:none){
  .admin-btn:not(:disabled):hover,.back-button:not(:disabled):hover,.action-button:not(:disabled):hover,.btn:not(:disabled):hover,
  button:not(:disabled):hover,input[type="submit"]:not(:disabled):hover,input[type="button"]:not(:disabled):hover{
    transform:none;
  }
}

/* 2.0.1-patch4 - gedeelde zijbalk op iedere laptop/desktop-pagina. */
@media(min-width:901px){
  body.global-sidebar-loaded{padding-left:300px}
  body.global-sidebar-loaded .page{padding-left:0}
  body.global-sidebar-loaded .site-footer{margin-left:0}
  .global-archive-sidebar{left:0}
}


/* 2.0.1-patch5 - geopende media benut vrijwel de volledige beschikbare viewport. */
.lightbox{
  display:block;
  width:100vw;
  height:100vh;
  height:100dvh;
  overflow:hidden
}
.lightbox-stage{
  width:100vw;
  height:100vh;
  height:100dvh;
  padding:max(4px,env(safe-area-inset-top)) max(4px,env(safe-area-inset-right)) max(4px,env(safe-area-inset-bottom)) max(4px,env(safe-area-inset-left));
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative
}
.lightbox-image,.lightbox-video{
  width:100%;
  height:100%;
  max-width:none;
  max-height:none;
  object-fit:contain
}
.lightbox-image[hidden],.lightbox-video[hidden]{display:none!important}
.lightbox-nav{
  position:absolute;
  z-index:6;
  top:50%;
  transform:translateY(-50%);
  width:clamp(42px,7vw,70px);
  height:clamp(72px,14vh,120px);
  display:grid;
  place-items:center;
  background:rgba(0,0,0,.22);
  border-radius:12px;
  text-shadow:0 1px 5px #000
}
.lightbox-nav.prev{left:max(2px,env(safe-area-inset-left))}
.lightbox-nav.next{right:max(2px,env(safe-area-inset-right))}
.lightbox-close{top:max(6px,env(safe-area-inset-top));right:max(10px,env(safe-area-inset-right))}
.lightbox-info{
  left:max(8px,env(safe-area-inset-left));
  right:max(8px,env(safe-area-inset-right));
  bottom:max(8px,env(safe-area-inset-bottom));
  padding:18px 70px 6px;
  pointer-events:none;
  background:linear-gradient(transparent,rgba(0,0,0,.58));
  border-radius:0 0 10px 10px
}
@media(max-width:700px){
  .lightbox{grid-template-columns:none}
  .lightbox-stage{padding:2px}
  .lightbox-nav{width:42px;height:76px;font-size:2.35rem;background:rgba(0,0,0,.18)}
  .lightbox-info{padding:14px 52px 4px;font-size:.9rem}
  .lightbox-metadata{font-size:.74rem}
  .lightbox-favorite{top:max(8px,env(safe-area-inset-top));right:max(54px,calc(env(safe-area-inset-right) + 48px))}
  .lightbox-download{right:max(8px,env(safe-area-inset-right));bottom:max(8px,env(safe-area-inset-bottom));min-height:36px;padding:7px 9px;font-size:.82rem}
}
@media(orientation:landscape) and (max-height:600px){
  .lightbox-info{padding-top:8px;padding-bottom:2px}
  .lightbox-metadata{font-size:.70rem;margin-top:2px}
  .lightbox-download{min-height:32px;padding:5px 8px}
}


/* 2.0.1-patch6 - smartphone/landscape, compacte beheer-UX en robuuste fullscreen viewer. */
body.lightbox-open{overflow:hidden!important;overscroll-behavior:none}
.lightbox{
  position:fixed!important;
  inset:0!important;
  z-index:2147483000!important;
  width:100vw!important;
  width:100dvw!important;
  height:100vh!important;
  height:100dvh!important;
  max-width:none!important;
  max-height:none!important;
  margin:0!important;
  padding:0!important;
  background:#000!important;
  contain:layout paint;
}
.lightbox-stage{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  min-width:0!important;
  min-height:0!important;
  margin:0!important;
  box-sizing:border-box;
}
.lightbox-image,.lightbox-video{display:block;max-width:100%!important;max-height:100%!important;object-fit:contain!important}
.lightbox-nav{top:50%!important;transform:translateY(-50%)!important;margin:0!important}

/* Een smartphone in landscape kan breder dan 900 CSS-pixels worden: behandel een lage viewport als mobiel. */
@media (orientation:landscape) and (max-height:649px){
  .archive-sidebar,.global-archive-sidebar{display:none!important}
  body.global-sidebar-loaded{padding-left:0!important}
  .site-header{display:block!important}
  .page{max-width:none!important;margin:0!important;padding-left:0!important}
  .site-footer{margin-left:0!important}
  .header-inner{display:grid!important;grid-template-columns:minmax(0,1fr) 44px!important;gap:8px 12px!important;align-items:center!important;padding:8px 12px!important}
  .mobile-menu-toggle{display:inline-flex!important;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border:1px solid var(--line);border-radius:10px;background:var(--panel);color:var(--accent);font-size:1.65rem;line-height:1;cursor:pointer}
  .user-menu{display:none!important;grid-column:1/-1!important;margin:0!important;padding:5px 0 3px!important;font-size:.9rem!important}
  .user-menu.is-open{display:flex!important;flex-direction:column!important}
  .lightbox-info{padding:8px 54px 2px!important}
  .lightbox-nav{width:42px!important;height:72px!important;font-size:2.2rem!important}
}

/* Permanente desktopzijbalk alleen wanneer er ook werkelijk laptop/desktophoogte beschikbaar is. */
@media(min-width:901px) and (min-height:650px){body.global-sidebar-loaded{padding-left:300px}.global-archive-sidebar{left:0}}
@media(min-width:901px) and (max-height:649px){body.global-sidebar-loaded{padding-left:0!important}}

/* 2.0.2 · OTAP-omgeving altijd zichtbaar */
.environment-banner{position:sticky;top:0;z-index:10050;display:flex;align-items:center;justify-content:center;gap:10px;min-height:34px;padding:5px 12px;font-size:.82rem;font-weight:800;letter-spacing:.02em;box-sizing:border-box}.environment-banner.environment-test{background:#a95f00;color:#fff}.environment-banner.environment-acceptance{background:#1768a5;color:#fff}.environment-banner.environment-production{background:#285c3a;color:#fff}.environment-switch{display:inline-flex;gap:5px;margin-left:8px}.environment-switch a{color:#fff;border:1px solid rgba(255,255,255,.65);border-radius:999px;padding:2px 8px;text-decoration:none;font-size:.76rem}.env-test .login-card{border-color:#d7831b}.env-acceptance .login-card{border-color:#2e8dcc}@media(max-width:600px){.environment-banner{font-size:.72rem;min-height:30px;padding:4px 7px}.environment-switch{margin-left:3px}.environment-switch a{font-size:.68rem;padding:2px 6px}}