/* ============================================================
   Photography Portfolio  —  Modern Glassmorphism Design
   ============================================================ */

/* ---------- Ontwerp-tokens (design tokens) ---------- */
:root {
    --achtergrond:  #07090d;
    --glas:         rgba(255, 255, 255, 0.045);
    --glasHover:    rgba(255, 255, 255, 0.075);
    --rand:         rgba(255, 255, 255, 0.08);
    --randHelder:   rgba(255, 255, 255, 0.16);
    --tekst:        #f1f5f9;
    --tekstMuted:   #94a3b8;
    --tekstZwak:    #475569;
    --accent:       #818cf8;
    --accentTweede: #a78bfa;
    --gevaar:       #ef4444;
    --succes:       #22c55e;
    --radiusKlein:  8px;
    --radius:       14px;
    --radiusGroot:  20px;
    --navHoogte:    68px;
    --maxBreedte:   1400px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
    background-color: var(--achtergrond);
    background-image:
        radial-gradient(ellipse 70% 55% at 5%   0%,   rgba(99,  102, 241, 0.13), transparent 60%),
        radial-gradient(ellipse 55% 45% at 95%  100%, rgba(167, 139, 250, 0.09), transparent 60%),
        radial-gradient(ellipse 40% 35% at 50%  50%,  rgba(56,  189, 248, 0.04), transparent 60%);
    /* background-attachment: fixed; — uitgeschakeld: blokkeert glow op sommige browsers */
    color:       var(--tekst);
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    line-height: 1.65;
    min-height:  100vh;
    display:     flex;
    flex-direction: column;
}

a { color: var(--accent); text-decoration: none; transition: opacity .2s; }
a:hover { opacity: .75; }
img { display: block; max-width: 100%; }

/* ---------- Layout ---------- */
.container    { width: 90%; max-width: var(--maxBreedte); margin: 0 auto; }
.hoofdInhoud  { flex: 1; display: flex; flex-direction: column; }

/* ============================================================
   NAVIGATIE  —  glas, vast bovenaan
   ============================================================ */
.siteHeader {
    position:   fixed;
    top: 0; left: 0; right: 0;
    height:     var(--navHoogte);
    z-index:    200;
    background: rgba(7, 9, 13, 0.6);
    backdrop-filter:         blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--rand);
    transition: background .4s, border-color .4s;
}

/* JS voegt .navBovenaan toe wanneer de hero zichtbaar is */
.siteHeader.navBovenaan {
    background:   transparent;
    border-color: transparent;
}

.headerBinnenste {
    height:          100%;
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap: 1.5rem;
}

.siteLogo {
    font-size:      1rem;
    font-weight:    700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color:          var(--tekst);
}
.siteLogo:hover { color: var(--accent); opacity: 1; }

.navLinks {
    list-style:  none;
    display:     flex;
    align-items: center;
    gap: 2rem;
}
.navLinks a       { color: var(--tekstMuted); font-size: .875rem; letter-spacing: .04em; }
.navLinks a:hover { color: var(--tekst); opacity: 1; }
.navGebruiker     { color: var(--tekstZwak); font-size: .8rem; }

.navKnop {
    display:    none;
    background: none;
    border:     none;
    color:      var(--tekst);
    font-size:  1.3rem;
    cursor:     pointer;
    line-height: 1;
}

@media (max-width: 640px) {
    .siteHeader { position: sticky; height: auto; }
    .headerBinnenste { padding: .85rem 0; flex-wrap: wrap; }
    .navKnop { display: block; }
    .navLinks {
        display:        none;
        flex-direction: column;
        align-items:    flex-start;
        width:          100%;
        gap:            .6rem;
        padding:        .75rem 0 .5rem;
        border-top:     1px solid var(--rand);
        margin-top:     .5rem;
    }
    .navLinks.open { display: flex; }
}

/* ============================================================
   HERO  —  volledig scherm
   ============================================================ */
.hero {
    position:        relative;
    width:           100%;
    height:          100vh;      /* exacte viewport hoogte */
    min-height:      600px;      /* minimum op kleine schermen */
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    text-align:      center;
    overflow:        hidden;
    padding:         var(--navHoogte) 1.5rem 2rem;
}

.heroAchtergrond { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.heroAchtergrond::before,
.heroAchtergrond::after {
    content:       '';
    position:      absolute;
    border-radius: 50%;
    filter:        blur(90px);
    animation:     zweefBlob 10s ease-in-out infinite alternate;
}
.heroAchtergrond::before {
    width: 600px; height: 600px;
    background: var(--accent);
    opacity: .18;
    top: -150px; left: -150px;
}
.heroAchtergrond::after {
    width: 500px; height: 500px;
    background: var(--accentTweede);
    opacity: .14;
    bottom: -100px; right: -100px;
    animation-delay: -5s;
}
@keyframes zweefBlob {
    from { transform: translate(0, 0)       scale(1);   }
    to   { transform: translate(80px, 50px) scale(1.2); }
}

.heroInhoud {
    position:       relative;
    z-index:        1;
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            1.4rem;
}

.heroLabel {
    font-size:      .72rem;
    letter-spacing: .28em;
    text-transform: uppercase;
    color:          var(--tekstMuted);
    background:     rgba(255,255,255,.05);
    border:         1px solid var(--rand);
    padding:        .35rem 1.1rem;
    border-radius:  99px;
}

.heroTitel {
    font-size:      clamp(3rem, 11vw, 7.5rem);
    font-weight:    700;
    line-height:    1.03;
    letter-spacing: -.035em;
    color:          var(--tekst);
}
.heroTitel em {
    display:         block;
    font-style:      italic;
    font-weight:     300;
    background:      linear-gradient(135deg, var(--accent) 0%, var(--accentTweede) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    padding-bottom:  0.12em;  /* ruimte voor letters met staart zoals g, y, p */
}

.heroOndertitel {
    color:          var(--tekstMuted);
    font-size:      .95rem;
    letter-spacing: .05em;
}

.heroScroll {
    margin-top:  .5rem;
    display:     flex;
    flex-direction: column;
    align-items: center;
    gap:         .5rem;
    color:       var(--tekstMuted);
    font-size:   .7rem;
    letter-spacing: .16em;
    text-transform: uppercase;
}
.heroScroll:hover { opacity: 1; color: var(--tekst); }

.scrollLijn {
    display:    block;
    width:      1px;
    height:     55px;
    background: linear-gradient(to bottom, rgba(255,255,255,.5), transparent);
    animation:  scrollPuls 2.2s ease-in-out infinite;
}
@keyframes scrollPuls {
    0%,100% { transform: scaleY(1);    opacity: .4; }
    50%      { transform: scaleY(.55); opacity: .9; }
}

/* ============================================================
   GALERIJ  —  masonry + glassmorphism kaarten
   ============================================================ */
.galerij { padding: 5rem 0 7rem; }

.sectieKoptekst {
    display:       flex;
    align-items:   center;
    gap:           1.25rem;
    margin-bottom: 2.5rem;
}
.sectieKoptekst h2 {
    font-size:      .75rem;
    letter-spacing: .22em;
    text-transform: uppercase;
    color:          var(--tekstMuted);
    white-space:    nowrap;
}
.sectieLijn   { flex: 1; height: 1px; background: var(--rand); }
.sectieActie  { font-size: .78rem; color: var(--accent); white-space: nowrap; }

/* Masonry via CSS columns */
.fotoRooster {
    columns:    3 260px;
    column-gap: 1rem;
}

.fotoKaart {
    break-inside:  avoid;
    display:       inline-block;
    width:         100%;
    margin-bottom: 1rem;
    border-radius: var(--radiusGroot);
    overflow:      hidden;
    position:      relative;
    opacity:       0;
    border:        1px solid var(--rand);
    box-shadow:    0 4px 24px rgba(0,0,0,.45);
    transition:    transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.fotoKaart:hover {
    transform:    translateY(-6px);
    box-shadow:   0 16px 48px rgba(0,0,0,.65);
    border-color: var(--randHelder);
}

.fotoKaart a   { display: block; }
.fotoKaart img { width: 100%; height: auto; display: block; transition: transform .55s ease; }
.fotoKaart:hover img { transform: scale(1.05); }

.fotoOverlay {
    position:   absolute;
    inset:      0;
    display:    flex;
    flex-direction: column;
    justify-content: flex-end;
    padding:    1.25rem 1.1rem;
    background: linear-gradient(to top, rgba(0,0,0,.78) 0%, rgba(0,0,0,.28) 45%, transparent 100%);
    opacity:    0;
    transition: opacity .3s ease;
}
.fotoKaart:hover .fotoOverlay { opacity: 1; }

.fotoOverlay h3  { font-size: .95rem; font-weight: 600; color: #fff; margin-bottom: .2rem; }
.kaartPijl       { font-size: .72rem; letter-spacing: .1em; color: rgba(255,255,255,.55); }

.legeStatus { color: var(--tekstMuted); text-align: center; padding: 5rem 0; }

/* ============================================================
   FOOTER
   ============================================================ */
.siteFooter {
    background:  rgba(255,255,255,.02);
    border-top:  1px solid var(--rand);
    padding:     1.5rem 0;
    text-align:  center;
    color:       var(--tekstZwak);
    font-size:   .78rem;
    letter-spacing: .06em;
}

/* ============================================================
   FOTO DETAIL
   ============================================================ */
.fotoDetail { padding: calc(var(--navHoogte) + 2.5rem) 0 2.5rem; }
.fotoDetailAfb {
    width:         100%;
    max-height:    75vh;
    object-fit:    contain;
    border-radius: var(--radiusGroot);
    margin-bottom: 2rem;
    background:    rgba(255,255,255,.02);
    border:        1px solid var(--rand);
}
.fotoDetail h1    { font-size: 2rem; margin-bottom: .5rem; }
.fotoBeschrijving { color: var(--tekstMuted); margin-bottom: .5rem; white-space: pre-line; }
.fotoMeta         { font-size: .82rem; color: var(--tekstZwak); }

/* ============================================================
   REACTIES
   ============================================================ */
.reactiesGedeelte { border-top: 1px solid var(--rand); padding-top: 2.5rem; margin-top: 1rem; }
.reactiesGedeelte h2 { margin-bottom: 1.5rem; font-size: 1.15rem; }

.reactie {
    background:    var(--glas);
    backdrop-filter:         blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border:        1px solid var(--rand);
    border-radius: var(--radius);
    padding:       1rem 1.25rem;
    margin-bottom: .85rem;
    transition:    border-color .2s;
}
.reactie:hover    { border-color: var(--randHelder); }
.reactieAuteur    { font-weight: 700; font-size: .9rem; margin-bottom: .25rem; }
.reactieTekst     { white-space: pre-line; color: var(--tekstMuted); }
.reactieDatum     { font-size: .78rem; color: var(--tekstZwak); margin-top: .4rem; }
.reactieFormulier { margin-top: 2rem; }
.reactieFormulier h3 { margin-bottom: 1rem; font-size: 1rem; }
.inlogPrompt      { margin-top: 1.5rem; color: var(--tekstMuted); }

/* ============================================================
   AUTH FORMULIEREN
   ============================================================ */
.authGedeelte {
    min-height:  calc(100vh - var(--navHoogte));
    display:     flex;
    align-items: center;
    justify-content: center;
    padding:     calc(var(--navHoogte) + 2rem) 1rem 4rem;
}
.authVak {
    background:    rgba(255,255,255,.045);
    backdrop-filter:         blur(28px);
    -webkit-backdrop-filter: blur(28px);
    border:        1px solid var(--rand);
    border-radius: var(--radiusGroot);
    padding:       2.5rem 2.25rem;
    width:         100%;
    max-width:     440px;
    box-shadow:    0 8px 48px rgba(0,0,0,.45);
}
.authVak h1   { margin-bottom: 1.75rem; font-size: 1.6rem; }
.authWissel   { margin-top: 1.1rem; font-size: .875rem; color: var(--tekstMuted); }

/* ============================================================
   FORMULIER-ELEMENTEN
   ============================================================ */
label {
    display:        block;
    font-size:      .78rem;
    letter-spacing: .04em;
    color:          var(--tekstMuted);
    margin-bottom:  .35rem;
}
.labelHint { font-size: .75rem; }

input[type="text"],
input[type="email"],
input[type="password"],
input[type="file"],
textarea,
select {
    display:       block;
    width:         100%;
    padding:       .65rem .9rem;
    background:    rgba(255,255,255,.05);
    border:        1px solid var(--rand);
    border-radius: var(--radiusKlein);
    color:         var(--tekst);
    font-family:   inherit;
    font-size:     .95rem;
    margin-bottom: 1.1rem;
    transition:    border-color .2s, background .2s;
}
input:focus, textarea:focus {
    outline:       none;
    border-color:  var(--accent);
    background:    rgba(255,255,255,.08);
}

button[type="submit"] {
    width:          100%;
    background:     linear-gradient(135deg, var(--accent), var(--accentTweede));
    color:          #fff;
    border:         none;
    border-radius:  var(--radiusKlein);
    padding:        .72rem 1.5rem;
    font-size:      .95rem;
    font-weight:    600;
    letter-spacing: .03em;
    cursor:         pointer;
    transition:     opacity .2s, transform .2s;
}
button[type="submit"]:hover { opacity: .85; transform: translateY(-1px); }

/* ============================================================
   MELDINGEN  (alerts)
   ============================================================ */
.melding       { padding: .72rem 1rem; border-radius: var(--radiusKlein); margin-bottom: 1.1rem; font-size: .875rem; }
.meldingFout   { background: rgba(239,68,68,.1);  border: 1px solid rgba(239,68,68,.3);  color: #fca5a5; }
.meldingSucees { background: rgba(34,197,94,.08); border: 1px solid rgba(34,197,94,.25); color: #86efac; }

/* ============================================================
   ADMIN DASHBOARD
   ============================================================ */
.adminGedeelte { padding: calc(var(--navHoogte) + 2rem) 0 5rem; }
.adminGedeelte h1 { margin-bottom: 2.5rem; font-size: 1.6rem; }

.adminPaneel {
    background:    var(--glas);
    backdrop-filter:         blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border:        1px solid var(--rand);
    border-radius: var(--radiusGroot);
    padding:       1.75rem;
    margin-bottom: 1.75rem;
}
.adminPaneel h2 {
    margin-bottom:  1.25rem;
    font-size:      .75rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color:          var(--tekstMuted);
}
.uploadFormulier { max-width: 560px; }

/* Voortgangsbalk bulk upload */
.uploadVoortgang {
    background:    rgba(255,255,255,.06);
    border:        1px solid var(--rand);
    border-radius: var(--radiusKlein);
    padding:       .6rem 1rem;
    margin-bottom: 1rem;
    font-size:     .82rem;
    color:         var(--tekstMuted);
    display:       none;
}

.adminTabel { width: 100%; border-collapse: collapse; font-size: .875rem; }
.adminTabel th,
.adminTabel td { padding: .6rem .85rem; border: 1px solid var(--rand); text-align: left; vertical-align: middle; }
.adminTabel th { background: rgba(255,255,255,.03); color: var(--tekstMuted); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; }
.adminMiniatuur { width: 60px; height: 45px; object-fit: cover; border-radius: var(--radiusKlein); }

.inlineFormulier { display: inline; }

.knopGevaar {
    background: rgba(239,68,68,.12); color: #fca5a5;
    border: 1px solid rgba(239,68,68,.28); border-radius: var(--radiusKlein);
    padding: .3rem .75rem; font-size: .78rem; cursor: pointer; margin-left: .4rem;
    transition: background .2s;
}
.knopGevaar:hover { background: rgba(239,68,68,.25); }

.knopBewerken {
    background: rgba(99,102,241,.12); color: #a5b4fc;
    border: 1px solid rgba(99,102,241,.28); border-radius: var(--radiusKlein);
    padding: .3rem .75rem; font-size: .78rem; cursor: pointer;
    transition: background .2s;
}
.knopBewerken:hover { background: rgba(99,102,241,.25); }

.knopAnnuleren {
    background: rgba(255,255,255,.05); color: var(--tekstMuted);
    border: 1px solid var(--rand); border-radius: var(--radiusKlein);
    padding: .3rem .75rem; font-size: .78rem; cursor: pointer; margin-left: .4rem;
}
.reactieBewerkForm textarea { margin-top: .5rem; }

/* ============================================================
   ACTIEVE NAVIGATIELINK
   ============================================================ */
.navLinks a { position: relative; }
.navLinks a.actief {
    color:   var(--tekst) !important;
    opacity: 1;
}
.navLinks a.actief::after {
    content:       '';
    position:      absolute;
    bottom:        -4px;
    left: 0; right: 0;
    height:        2px;
    background:    var(--accent);
    border-radius: 99px;
}

/* ============================================================
   HERO FOTO-TELLER
   ============================================================ */
.heroTeller {
    font-size:      .75rem;
    color:          var(--tekstMuted);
    letter-spacing: .12em;
    opacity:        .75;
}

/* ============================================================
   CATEGORIE FILTER KNOPPEN
   ============================================================ */
.categorieFilter {
    display:       flex;
    flex-wrap:     wrap;
    gap:           .5rem;
    margin-bottom: 2rem;
}
.categorieKnop {
    background:      var(--glas);
    border:          1px solid var(--rand);
    border-radius:   99px;
    color:           var(--tekstMuted);
    font-size:       .78rem;
    letter-spacing:  .06em;
    padding:         .35rem 1.1rem;
    cursor:          pointer;
    text-decoration: none;
    display:         inline-block;
    transition:      background .2s, border-color .2s, color .2s;
}
.categorieKnop:hover,
.categorieKnop.actief {
    background:   rgba(129, 140, 248, 0.16);
    border-color: var(--accent);
    color:        var(--accent);
    opacity:      1;
}

/* ============================================================
   PAGINERING
   ============================================================ */
.paginering {
    display:         flex;
    justify-content: center;
    align-items:     center;
    gap:             .4rem;
    margin-top:      3rem;
    flex-wrap:       wrap;
}
.pagineringKnop {
    background:      var(--glas);
    border:          1px solid var(--rand);
    border-radius:   var(--radiusKlein);
    color:           var(--tekstMuted);
    font-size:       .85rem;
    padding:         .45rem .85rem;
    text-decoration: none;
    display:         inline-block;
    transition:      background .2s, border-color .2s, color .2s;
}
.pagineringKnop:hover {
    background:   var(--glasHover);
    border-color: var(--randHelder);
    color:        var(--tekst);
    opacity:      1;
}
.pagineringKnop.actief {
    background:   rgba(129, 140, 248, 0.2);
    border-color: var(--accent);
    color:        var(--accent);
    cursor:       default;
}
.pagineringKnop.actief:hover { opacity: 1; }

/* ============================================================
   LIGHTBOX MODAL  —  foto links | reacties rechts
   ============================================================ */
.lightboxOverlay {
    position:        fixed;
    inset:           0;
    background:      rgba(0, 0, 0, 0.9);
    backdrop-filter:         blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index:         900;
    display:         flex;
    align-items:     center;
    justify-content: center;
    padding:         1.25rem;
    opacity:         0;
    pointer-events:  none;
    transition:      opacity .3s ease;
}
.lightboxOverlay.open {
    opacity:        1;
    pointer-events: all;
}

/* Twee-kolom container */
.lightboxBinnenste {
    position:       relative;
    max-width:      1150px;
    width:          100%;
    max-height:     88vh;
    background:     rgba(8, 10, 16, 0.97);
    border:         1px solid var(--randHelder);
    border-radius:  var(--radiusGroot);
    overflow:       hidden;
    display:        flex;
    flex-direction: row;
    transform:      scale(.93);
    transition:     transform .3s ease;
}
.lightboxOverlay.open .lightboxBinnenste { transform: scale(1); }

/* ---------- Linkerkolom: foto ---------- */
.lightboxLinks {
    flex:           1;
    display:        flex;
    flex-direction: column;
    min-width:      0;
}

.lightboxAfbeelding {
    flex:        1;
    width:       100%;
    max-height:  calc(88vh - 56px);
    object-fit:  contain;
    display:     block;
    background:  rgba(0, 0, 0, 0.6);
}

.lightboxInfo {
    flex-shrink:     0;
    height:          56px;
    padding:         0 1.1rem;
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             .75rem;
    border-top:      1px solid var(--rand);
    background:      rgba(0, 0, 0, 0.35);
}
.lightboxTitel {
    font-size:     .92rem;
    font-weight:   600;
    color:         var(--tekst);
    white-space:   nowrap;
    overflow:      hidden;
    text-overflow: ellipsis;
}

/* Maximize-knop → volledige pagina */
.lightboxMaximizeKnop {
    flex-shrink:     0;
    background:      rgba(255,255,255,.06);
    border:          1px solid var(--rand);
    border-radius:   var(--radiusKlein);
    color:           var(--tekstMuted);
    padding:         .3rem .55rem;
    display:         flex;
    align-items:     center;
    gap:             .35rem;
    font-size:       .75rem;
    letter-spacing:  .04em;
    white-space:     nowrap;
    opacity:         1;
    transition:      background .2s, color .2s, border-color .2s;
}
.lightboxMaximizeKnop:hover {
    background:   rgba(129,140,248,.18);
    border-color: var(--accent);
    color:        var(--accent);
    opacity:      1;
}

/* Sluiten × */
.lightboxSluiten {
    position:        absolute;
    top:             .65rem;
    right:           .65rem;
    background:      rgba(0,0,0,.65);
    border:          1px solid var(--rand);
    border-radius:   50%;
    color:           var(--tekst);
    width:           1.9rem;
    height:          1.9rem;
    font-size:       .85rem;
    cursor:          pointer;
    display:         flex;
    align-items:     center;
    justify-content: center;
    transition:      background .2s;
    z-index:         10;
    line-height:     1;
}
.lightboxSluiten:hover { background: rgba(239,68,68,.45); color: #fff; }

/* ---------- Rechterkolom: reacties ---------- */
.lightboxRechts {
    width:          270px;
    flex-shrink:    0;
    display:        flex;
    flex-direction: column;
    border-left:    1px solid var(--rand);
    background:     rgba(0,0,0,.18);
}

.lightboxReactiesHeader {
    flex-shrink:    0;
    padding:        .8rem 1rem;
    border-bottom:  1px solid var(--rand);
    font-size:      .7rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color:          var(--tekstMuted);
    display:        flex;
    align-items:    center;
    gap:            .4rem;
}
#lightboxReactiesTelling { color: var(--accent); }

.lightboxReacties {
    flex:           1;
    overflow-y:     auto;
    padding:        .8rem;
    scrollbar-width: thin;
    scrollbar-color: var(--rand) transparent;
}
.lightboxReacties::-webkit-scrollbar       { width: 4px; }
.lightboxReacties::-webkit-scrollbar-track { background: transparent; }
.lightboxReacties::-webkit-scrollbar-thumb { background: var(--rand); border-radius: 99px; }

.lightboxReactie {
    background:    rgba(255,255,255,.04);
    border:        1px solid var(--rand);
    border-radius: var(--radiusKlein);
    padding:       .65rem .85rem;
    margin-bottom: .55rem;
    transition:    border-color .2s;
}
.lightboxReactie:last-child    { margin-bottom: 0; }
.lightboxReactie:hover         { border-color: var(--randHelder); }
.lightboxReactieAuteur         { font-weight: 700; font-size: .8rem; margin-bottom: .2rem; color: var(--tekst); }
.lightboxReactieTekst          { color: var(--tekstMuted); font-size: .8rem; line-height: 1.55; margin-bottom: .25rem; word-break: break-word; }
.lightboxReactieDatum          { font-size: .68rem; color: var(--tekstZwak); }

.lightboxLaden,
.lightboxGeenReacties {
    text-align:  center;
    padding:     2.5rem 1rem;
    color:       var(--tekstMuted);
    font-size:   .82rem;
    line-height: 1.65;
}
.lightboxGeenReacties a { color: var(--accent); }

/* Reactie-formulier onderaan de rechterkolom */
.lightboxReactieFormulier {
    flex-shrink:    0;
    padding:        .7rem;
    border-top:     1px solid var(--rand);
    background:     rgba(0, 0, 0, 0.25);
    display:        flex;
    flex-direction: column;
    gap:            .45rem;
}
.lightboxReactieTekstVeld {
    width:         100%;
    display:       block;
    background:    rgba(255,255,255,.06);
    border:        1px solid var(--rand);
    border-radius: var(--radiusKlein);
    color:         var(--tekst);
    font-family:   inherit;
    font-size:     .82rem;
    padding:       .5rem .7rem;
    resize:        vertical;
    min-height:    58px;
    max-height:    110px;
    margin-bottom: 0;          /* overschrijft de globale textarea-marge */
    transition:    border-color .2s, background .2s;
}
.lightboxReactieTekstVeld:focus {
    outline:      none;
    border-color: var(--accent);
    background:   rgba(255,255,255,.09);
}
.lightboxReactieKnop {
    width:          100%;
    background:     linear-gradient(135deg, var(--accent), var(--accentTweede));
    color:          #fff;
    border:         none;
    border-radius:  var(--radiusKlein);
    padding:        .45rem;
    font-size:      .82rem;
    font-weight:    600;
    cursor:         pointer;
    transition:     opacity .2s;
}
.lightboxReactieKnop:hover    { opacity: .85; }
.lightboxReactieKnop:disabled { opacity: .45; cursor: not-allowed; }

.lightboxReactieFout {
    font-size:     .76rem;
    color:         #fca5a5;
    background:    rgba(239,68,68,.1);
    border:        1px solid rgba(239,68,68,.25);
    border-radius: var(--radiusKlein);
    padding:       .35rem .6rem;
}

.lightboxInlogPrompt {
    flex-shrink: 0;
    padding:     .9rem 1rem;
    border-top:  1px solid var(--rand);
    text-align:  center;
    font-size:   .8rem;
    color:       var(--tekstMuted);
    background:  rgba(0,0,0,.2);
}
.lightboxInlogPrompt a { color: var(--accent); }

/* Mobiel: stapel de kolommen */
@media (max-width: 700px) {
    .lightboxBinnenste  { flex-direction: column; max-height: 94vh; }
    .lightboxRechts     { width: 100%; max-height: 170px; border-left: none; border-top: 1px solid var(--rand); }
    .lightboxAfbeelding { max-height: 48vh; }
}

/* ============================================================
   OVER MIJ PAGINA
   ============================================================ */
.overMijGedeelte { padding: calc(var(--navHoogte) + 3rem) 0 5rem; }

.profielKaart {
    background:    var(--glas);
    backdrop-filter:         blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border:        1px solid var(--rand);
    border-radius: var(--radiusGroot);
    padding:       2.5rem;
    margin-bottom: 1.5rem;
    display:       flex;
    gap:           2.5rem;
    align-items:   flex-start;
    flex-wrap:     wrap;
}
.profielFoto {
    width:         160px;
    height:        160px;
    border-radius: 50%;
    overflow:      hidden;
    flex-shrink:   0;
    border:        3px solid var(--randHelder);
    box-shadow:    0 0 32px rgba(129, 140, 248, 0.25);
}
.profielFoto img {
    width:           100%;
    height:          100%;
    object-fit:      cover;
    object-position: center 15%;
    display:         block;
    transition:      transform .5s ease;
}
.profielFoto img:hover { transform: scale(1.06); }
.profielTekst h1   { font-size: 2rem; margin-bottom: .4rem; }
.profielTekst p    { color: var(--tekstMuted); line-height: 1.8; margin-bottom: .75rem; }
.profielLabel {
    display:        block;
    font-size:      .7rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    color:          var(--accent);
    margin-bottom:  .5rem;
}

.infoRooster {
    display:               grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
}
.infoKaart {
    background:    var(--glas);
    border:        1px solid var(--rand);
    border-radius: var(--radius);
    padding:       1.5rem;
    text-align:    center;
    transition:    border-color .2s;
}
.infoKaart:hover { border-color: var(--randHelder); }
.infoKaart .icoon { font-size: 2rem; margin-bottom: .6rem; }
.infoKaart h3     { font-size: .8rem; color: var(--tekstMuted); margin-bottom: .3rem; letter-spacing: .06em; }
.infoKaart p      { font-weight: 600; color: var(--tekst); }

/* ============================================================
   CONTACTPAGINA
   ============================================================ */
.contactGedeelte { padding: calc(var(--navHoogte) + 2.5rem) 0 5rem; }

.contactRooster {
    display:               grid;
    grid-template-columns: 1fr 1.6fr;
    gap:                   2rem;
    align-items:           start;
}
@media (max-width: 720px) {
    .contactRooster { grid-template-columns: 1fr; }
    .profielKaart   { flex-direction: column; }
    .profielFoto    { width: 110px; height: 110px; font-size: 2.5rem; }
}

.contactInfo {
    background:    var(--glas);
    border:        1px solid var(--rand);
    border-radius: var(--radiusGroot);
    padding:       2rem;
}
.contactInfo h2 { margin-bottom: 1rem; font-size: 1.15rem; }
.contactInfo p  { color: var(--tekstMuted); line-height: 1.75; margin-bottom: .75rem; }

.contactInfoRegel {
    display:     flex;
    align-items: center;
    gap:         .6rem;
    font-size:   .875rem;
    color:       var(--tekstMuted);
    margin-top:  .5rem;
}

.contactFormVak {
    background:    var(--glas);
    backdrop-filter:         blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border:        1px solid var(--rand);
    border-radius: var(--radiusGroot);
    padding:       2.5rem;
}
.contactFormVak h2 { margin-bottom: 1.75rem; font-size: 1.3rem; }