/* =========================================================================
   Eleonore de Vet, site.css (het enige stylesheet, geen build)
   Alle kleuren, lettertypen en maten staan hier bovenaan als variabelen.
   Een ander uiterlijk is een kwestie van deze waarden aanpassen.
   ========================================================================= */

:root {
    /* Openbare site: donker, warm en rustig, zoals de versie uit 2018.
       Bewust hoog contrast (bijna witte tekst) zodat het ook voor oudere
       ogen goed leesbaar is. */
    --kleur-achtergrond: #2e2b28;   /* warm antraciet */
    --kleur-vlak: #38342f;          /* panelen, iets lichter dan de grond */
    --kleur-tekst: #e4ddd2;         /* warm licht, iets zachter dan wit, goed leesbaar */
    --kleur-tekst-zacht: #b3a99c;   /* bijschriften, minder nadruk */
    --kleur-accent: #e8815c;        /* warme terracotta, op donker iets lichter */
    --kleur-accent-donker: #f2a184; /* accent bij hover (lichter op donker) */
    --kleur-lijn: #4b453e;          /* fijne scheidingslijnen */
    --kleur-titel: #ede6da;         /* iets helderder, alleen voor de naam boven */

    /* Lettertypen */
    --font-tekst: Georgia, 'Times New Roman', serif;
    --font-kop: Georgia, 'Times New Roman', serif;

    /* Maten en ritme */
    --maat-inhoud: 1000px;          /* maximale breedte van de inhoud */
    --tekst-basis: 20px;            /* ruime basisgrootte, prettig leesbaar */
    --ruimte: 1rem;
    --ruimte-groot: 2.5rem;
    --radius: 4px;
}

/* Pflegebereich en inlogpagina: licht en helder, prettig om mee te werken. */
.thema-licht {
    --kleur-achtergrond: #faf6f1;
    --kleur-vlak: #ffffff;
    --kleur-tekst: #2b2622;
    --kleur-tekst-zacht: #6f645b;
    --kleur-accent: #c1553a;
    --kleur-accent-donker: #9c3f2b;
    --kleur-lijn: #e7ddd2;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--kleur-achtergrond);
    color: var(--kleur-tekst);
    font-family: var(--font-tekst);
    font-size: var(--tekst-basis);
    line-height: 1.65;
}

h1, h2, h3 {
    font-family: var(--font-kop);
    font-weight: 600;
    line-height: 1.2;
    margin: 0 0 var(--ruimte);
}

a { color: var(--kleur-accent); text-decoration: none; }
a:hover { color: var(--kleur-accent-donker); text-decoration: underline; }

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

/* Lay-out */
.inhoud {
    max-width: var(--maat-inhoud);
    margin: 0 auto;
    padding: 0 var(--ruimte);
}

/* Kop met menu, gecentreerd zoals in 2018 */
.site-kop {
    border-bottom: 1px solid var(--kleur-lijn);
    background: var(--kleur-achtergrond);
    text-align: center;
    padding-top: var(--ruimte-groot);
    padding-bottom: var(--ruimte);
}
.site-titel {
    display: inline-block;
    font-size: 2.7rem;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--kleur-titel);
}
.site-titel:hover { text-decoration: none; color: var(--kleur-titel); }
.site-ondertitel {
    color: var(--kleur-tekst-zacht);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-size: 0.85rem;
    margin: 0.4rem 0 1.4rem;
}

nav.hoofdmenu {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2rem;
    font-size: 1.45rem;
}
nav.hoofdmenu a { color: var(--kleur-tekst); }
nav.hoofdmenu a:hover { color: var(--kleur-accent); text-decoration: none; }

/* Hoofddeel */
main { padding: var(--ruimte-groot) 0; }
main .inhoud > h1 { font-size: 2rem; }
.intro { color: var(--kleur-tekst-zacht); font-size: 1.15rem; max-width: 42em; }
.intro-midden { margin-left: auto; margin-right: auto; text-align: center; }
.home-intro { width: min(100%, 46rem); margin: 2rem auto 0; text-align: center; }
.home-intro-sier { width: 46px; height: 2px; background: var(--kleur-accent); border: 0; margin: 0 auto 2rem; opacity: 0.9; }
.home-intro-titel { font-size: 1.2rem; letter-spacing: 0.22em; text-transform: uppercase; line-height: 1.6; color: var(--kleur-tekst-zacht); margin: 0 0 1.5rem; text-wrap: balance; }
.home-intro-ondertitel { font-size: 0.95rem; line-height: 1.7; color: var(--kleur-tekst-zacht); max-width: 33rem; margin: 0 auto 1.4rem; text-wrap: balance; }
.home-intro-tekst { font-size: 0.95rem; line-height: 1.7; color: var(--kleur-tekst-zacht); max-width: 33rem; margin: 0 auto; text-wrap: balance; }
.home-contact { margin: 4rem auto 0; max-width: 30rem; background: var(--kleur-vlak); border: 1px solid var(--kleur-lijn); border-radius: var(--radius); padding: 1.5rem 1.75rem; text-align: center; }
.home-contact-kop { font-size: 0.8rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--kleur-tekst-zacht); margin: 0 0 0.7rem; }
.home-contact-regel { font-size: 1.02rem; line-height: 1.9; color: var(--kleur-tekst); margin: 0; }
.home-contact-regel a { color: var(--kleur-accent); }
.home-contact-regel a:hover { color: var(--kleur-accent-donker); text-decoration: none; }
.home-contact-sleutel { color: var(--kleur-tekst-zacht); }
.melding-leeg { color: var(--kleur-tekst-zacht); font-style: italic; }

/* Beelden op de startpagina (rij zoals in 2018) */
.start-beelden {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.25rem;
    margin: 3rem 0 4rem;
}
.start-beeld {
    line-height: 0;
    padding: 0;
    background: var(--kleur-vlak);
    border: 1px solid var(--kleur-lijn);
    border-radius: var(--radius);
    overflow: hidden;
    cursor: pointer;
}
.start-beeld img {
    width: 170px;
    height: 170px;
    object-fit: cover;
    transition: transform 0.25s ease;
}
.start-beeld:hover img { transform: scale(1.04); }
.start-keuze-rij { align-items: flex-start; }
.start-keuze { display: block; max-width: 220px; }
.start-keuze img { width: 180px; height: 180px; object-fit: cover; }
.start-keuze-regel { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.5rem; }
.start-keuze-volgorde { margin-top: 0.65rem; }
.start-keuze-volgorde input { width: 5rem; }
.start-beeld:focus-visible { outline: 2px solid var(--kleur-accent); outline-offset: 2px; }

/* Voettekst */
.site-voet {
    border-top: 1px solid var(--kleur-lijn);
    color: var(--kleur-tekst-zacht);
    font-size: 0.85rem;
    padding: var(--ruimte-groot) 0;
    margin-top: var(--ruimte-groot);
    text-align: center;
}
.site-voet .voet-scheiding { margin: 0 0.4rem; }
.site-voet .voet-link { color: var(--kleur-tekst-zacht); }
.site-voet .voet-link:hover { color: var(--kleur-accent); }

/* Formulieren (inloggen, later beheer) */
.paneel {
    background: var(--kleur-vlak);
    border: 1px solid var(--kleur-lijn);
    border-radius: var(--radius);
    padding: var(--ruimte-groot);
    max-width: 26rem;
    margin: 0 auto;
}
.veld { margin-bottom: var(--ruimte); }
.veld label { display: block; margin-bottom: 0.35rem; font-size: 0.95rem; }
.veld input {
    width: 100%;
    padding: 0.6rem 0.7rem;
    font-family: inherit;
    font-size: 1rem;
    color: var(--kleur-tekst);
    background: var(--kleur-achtergrond);
    border: 1px solid var(--kleur-lijn);
    border-radius: var(--radius);
}
.veld input:focus {
    outline: 2px solid var(--kleur-accent);
    outline-offset: 1px;
}
.knop {
    display: inline-block;
    padding: 0.6rem 1.2rem;
    font-family: inherit;
    font-size: 1rem;
    color: #fff;
    background: var(--kleur-accent);
    border: 0;
    border-radius: var(--radius);
    cursor: pointer;
}
.knop:hover { background: var(--kleur-accent-donker); }

.fout {
    color: var(--kleur-accent-donker);
    font-size: 0.9rem;
    margin-bottom: var(--ruimte);
}

/* Beheer-balk */
.beheer-kop {
    background: var(--kleur-tekst);
    color: var(--kleur-achtergrond);
}
.beheer-kop .inhoud {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}
.beheer-kop a { color: var(--kleur-achtergrond); }
.beheer-kop .knop-uitloggen {
    background: none;
    border: 1px solid var(--kleur-achtergrond);
    color: var(--kleur-achtergrond);
    padding: 0.35rem 0.8rem;
    border-radius: var(--radius);
    font-family: inherit;
    font-size: 0.9rem;
    cursor: pointer;
}
.beheer-kop .knop-uitloggen:hover { background: rgba(255,255,255,0.12); }
.beheer-kop-rechts { display: flex; align-items: center; gap: 1.2rem; }
.beheer-website { font-size: 1rem; }

/* Pflegebereich, groessere Schrift voor prettige leesbaarheid (oudere ogen). */
.beheer-body { font-size: 22px; }
.beheer-body main .inhoud > h1 { font-size: 2.3rem; }
.beheer-body h2 { font-size: 1.6rem; }
.beheer-body .beheer-lijst { font-size: 1.35rem; line-height: 2.2; }
.beheer-body .intro { font-size: 1.25rem; }
.beheer-body .veld label { font-size: 1.1rem; }
.beheer-body .veld input,
.beheer-body .veld textarea,
.beheer-body .veld select { font-size: 1.1rem; padding: 0.7rem 0.8rem; }
.beheer-body .knop { font-size: 1.1rem; padding: 0.65rem 1.4rem; }
.beheer-body .beheer-tabel { font-size: 1.05rem; }
.beheer-body .beheer-terug { font-size: 1.1rem; }

/* =========================================================================
   Galerie (openbaar)
   ========================================================================= */
/* Masonry: de beelden houden hun eigen vorm (staand, liggend, vierkant) en
   vullen toch een rustig geheel. */
/* Vast drieluik: drie beelden per rij met een gelijke bovenrand (geen masonry).
   align-items: start laat kortere kaarten bovenaan staan met een gaatje eronder,
   in plaats van uitrekken; zo houdt elke rij van drie dezelfde bovenlijn. De
   volgorde loopt links naar rechts, rij voor rij, volgens de ingestelde
   volgorde. */
.galerie {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    align-items: start;
    margin-top: var(--ruimte-groot);
}
.galerie-item {
    position: relative;
    display: block;
    width: 100%;
    padding: 0;
    margin: 0;
    border: 1px solid var(--kleur-lijn);
    background: var(--kleur-vlak);
    border-radius: var(--radius);
    cursor: pointer;
    overflow: hidden;
    line-height: 0;
    text-align: left;
}
.galerie-item img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.35s ease;
}
.galerie-item:hover img { transform: scale(1.03); }
.galerie-sectie-verkocht { position: relative; margin-top: 3.5rem; padding-top: 2rem; }
.galerie-sectie-verkocht::before { content: ''; position: absolute; top: 0; left: 50%; width: 48px; height: 2px; background: var(--kleur-accent); transform: translateX(-50%); }
.galerie-groep-kop { margin: 0 0 1.25rem; font-family: var(--font-tekst); font-size: 1.45rem; font-weight: 400; letter-spacing: 0.04em; color: var(--kleur-tekst-zacht); }
.galerie-item:focus-visible { outline: 2px solid var(--kleur-accent); outline-offset: 2px; }
.galerie-titel {
    display: block;
    line-height: 1.3;
    font-size: 0.95rem;
    color: var(--kleur-tekst-zacht);
    padding: 0.5rem 0.7rem 0.6rem;
}

.vlag-verkocht, .vlag-tekoop {
    position: absolute;
    top: 0.6rem;
    left: 0.6rem;
    color: #fff;
    font-size: 0.85rem;
    line-height: 1;
    padding: 0.3rem 0.55rem;
    border-radius: var(--radius);
    letter-spacing: 0.03em;
}
.vlag-verkocht { background: var(--kleur-accent); }
.vlag-tekoop { background: #4a7a4a; }

/* Afspeelteken midden op het omslagbeeld van een video in de galerie. */
.galerie-video-merk {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 3.4rem;
    height: 3.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: rgba(0, 0, 0, 0.45);
    border-radius: 50%;
    pointer-events: none;
    transition: background 0.2s ease;
}
.galerie-video-merk svg { width: 1.5rem; height: 1.5rem; margin-left: 0.15rem; }
.galerie-item-video:hover .galerie-video-merk { background: rgba(0, 0, 0, 0.6); }

/* Vergroting: omkaderde laag midden in de pagina, met een zacht groei-effect. */
.vergroting {
    position: fixed;
    inset: 0;
    background: rgba(20, 17, 14, 0.88);
    padding: 1.5rem;
    z-index: 100;
    opacity: 0;
    transition: opacity 0.26s ease;
}
/* Alleen als de laag NIET verborgen is neemt hij ruimte in en vangt hij klikken.
   Zo blijft de rest van de pagina normaal klikbaar. */
.vergroting:not([hidden]) {
    display: flex;
    align-items: center;
    justify-content: center;
}
.vergroting.open { opacity: 1; }
.vergroting-kader {
    position: relative;
    display: flex;
    flex-direction: column;
    /* Het kader is zo breed als het beeld (niet als de tekst). De breedte van
       de scroll-laag wordt in JS op de beeldbreedte gezet; fit-content laat het
       kader daar dan strak omheen vallen, met een smalle witte rand. */
    width: fit-content;
    background: #faf6f1;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: var(--radius);
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.5);
    padding: 0.8rem;
    max-width: min(92vw, 1100px);
    max-height: 90vh;
    overflow: hidden;
    transform: scale(0.86);
    opacity: 0.5;
    transition: transform 0.28s ease, opacity 0.28s ease;
}
.vergroting.open .vergroting-kader { transform: scale(1); opacity: 1; }
/* Beeld en gegevens scrollen samen binnen het kader; min-height:0 laat de
   flex-kolom krimpen zodat overflow echt kan scrollen. */
.vergroting-scroll { min-height: 0; max-width: 100%; overflow-y: auto; }
.vergroting-beeld { line-height: 0; text-align: center; }
.vergroting-beeld img {
    /* Breedte wordt begrensd door het scherm, niet door het kader, zodat de
       beeldbreedte stabiel is en het kader zich daarnaar kan voegen. */
    max-width: min(88vw, 1000px);
    /* 70vh (niet hoger) zodat bij een staand beeld de titel al net aanlicht en
       duidelijk is dat er onder het beeld gegevens staan. */
    max-height: 70vh;
    width: auto;
    height: auto;
    display: inline-block;
    border-radius: 2px;
}
/* De videospeler in de vergroting volgt dezelfde begrenzing als het beeld,
   zodat het kader zich er net zo omheen voegt. */
.vergroting-beeld video {
    max-width: min(88vw, 1000px);
    max-height: 70vh;
    width: auto;
    height: auto;
    display: inline-block;
    border-radius: 2px;
    background: #000;
}
/* Bij een afbeelding is de speler verborgen en omgekeerd. Het display hierboven
   zou het hidden-attribuut overstemmen, dus zetten we een verborgen beeld of
   speler hier expliciet uit (specificiteit wint van de regels hierboven). */
.vergroting-beeld img[hidden], .vergroting-beeld video[hidden] { display: none; }
.vergroting-info { padding: 0.9rem 0.4rem 0.3rem; color: #2b2622; overflow-wrap: break-word; }
.vergroting-info a { color: #a2472a; text-decoration: underline; }
.vergroting-info a:hover { color: #7d3620; }
/* Variante "ruim": alleen op de startpagina. Het beeld iets groter, zodat de
   rand ongeveer halveert (maar niet tot aan de schermrand). Werk blijft ongewijzigd. */
.vergroting-ruim .vergroting-kader { max-width: min(96vw, 1300px); max-height: 94vh; }
.vergroting-ruim .vergroting-beeld img { max-width: min(94vw, 1200px); max-height: 84vh; }
/* Startpagina heeft geen gegevens onder het beeld: laat het lege infoblok geen
   ruimte innemen en geef de onderregel dezelfde marge als de kaderrand (0.8rem),
   zodat de witte rand rondom het beeld even breed is (boven = zijkant = onder). */
.vergroting-ruim .vergroting-info:empty { padding: 0; }
.vergroting-ruim .vergroting-werklink { padding: 0.8rem 0.4rem 0; }
/* Klikbare onderregel onder het vergrote startpagina-beeld, naar de galerie. */
.vergroting-werklink {
    display: block;
    text-align: center;
    padding: 0.75rem 0.4rem 0.2rem;
    color: #a2472a;
    text-decoration: none;
    font-size: 1.05rem;
}
.vergroting-werklink:hover { color: #7d3620; text-decoration: underline; }
.vergroting-info .vergroting-omschrijving {
    margin: 0.7rem 0 0;
    color: #443d36;
    font-style: italic;
    white-space: pre-line;
}
/* Pijltje rechtsonder: wijst rustig dat er nog gegevens onder de rand staan.
   Zit vast aan het kader (dat zelf niet scrollt), dus blijft in beeld. */
.vergroting-pijl {
    position: absolute;
    right: 0.7rem;
    bottom: 0.7rem;
    z-index: 5;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(43, 38, 34, 0.9);
    color: #faf6f1;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.35);
    cursor: pointer;
    animation: vergroting-wip 1.8s ease-in-out infinite;
}
.vergroting-pijl:hover { background: rgba(43, 38, 34, 1); }
.vergroting-pijl:focus-visible { outline: 2px solid #faf6f1; outline-offset: 2px; }
.vergroting-pijl svg { width: 18px; height: 18px; }
@keyframes vergroting-wip {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(2px); }
}
@media (prefers-reduced-motion: reduce) {
    .vergroting-pijl { animation: none; }
}
.vergroting-info h2 { font-size: 1.5rem; margin: 0 0 0.4rem; color: #2b2622; }
.vergroting-info p { margin: 0.25rem 0; }
.vergroting-info .info-verkocht,
.vergroting-info .info-tekoop {
    display: inline-block;
    color: #fff;
    padding: 0.2rem 0.5rem;
    border-radius: var(--radius);
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
}
.vergroting-info .info-verkocht { background: var(--kleur-accent); }
.vergroting-info .info-tekoop { background: #4a7a4a; }
.vergroting-sluit {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: #fff;
    color: #1c1712;
    border: 2px solid #1c1712;
    border-radius: 50%;
    font-size: 2rem;
    line-height: 1;
    cursor: pointer;
    z-index: 3;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
}
.vergroting-sluit:hover { background: var(--kleur-accent); color: #fff; border-color: #fff; }

/* =========================================================================
   Beheer (schilderijenlijst en formulier)
   ========================================================================= */
.beheer-kop-rij {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--ruimte);
}
.beheer-lijst { font-size: 1.15rem; line-height: 2; padding-left: 1.2rem; }
/* Samenwerkingen en Referenties horen onder "Over mij": ingesprongen subgroep,
   iets kleiner, met een rustige lijn links zodat de samenhang zichtbaar is. */
.beheer-sublijst { margin: 0.1rem 0 0.3rem; padding-left: 1.4rem; border-left: 2px solid var(--kleur-lijn); }
.beheer-sublijst li { font-size: 0.9em; }

.melding-goed {
    background: #edf5ea;
    border: 1px solid #cfe3c6;
    color: #3a5a30;
    padding: 0.7rem 1rem;
    border-radius: var(--radius);
}
.melding-waarschuwing {
    background: #fbf3e3;
    border: 1px solid #e6d4a8;
    color: #6b5320;
    padding: 0.7rem 1rem;
    border-radius: var(--radius);
}

.beheer-tabel { width: 100%; border-collapse: collapse; margin-top: var(--ruimte); }
.beheer-tabel th, .beheer-tabel td {
    text-align: left;
    padding: 0.7rem 0.6rem;
    border-bottom: 1px solid var(--kleur-lijn);
    vertical-align: middle;
}
.beheer-tabel .cel-beeld img { width: 90px; height: 68px; object-fit: cover; border-radius: var(--radius); }
.cel-acties { white-space: nowrap; }
.cel-acties form { display: inline; }

.merk {
    display: inline-block;
    font-size: 0.85rem;
    padding: 0.15rem 0.5rem;
    border: 1px solid var(--kleur-lijn);
    border-radius: var(--radius);
    margin-right: 0.3rem;
    color: var(--kleur-tekst-zacht);
}
.merk-verkocht { background: var(--kleur-accent); color: #fff; border-color: var(--kleur-accent); }
.merk-verborgen { background: #eee5d9; }

.knop-tekst { background: none; border: 0; color: var(--kleur-tekst-zacht); font: inherit; cursor: pointer; }
.knop-tekst-gevaar { background: none; border: 0; color: var(--kleur-accent-donker); font: inherit; cursor: pointer; padding: 0; margin-left: 0.6rem; }
.knop-tekst-gevaar:hover { text-decoration: underline; }

.paneel-breed { max-width: 640px; }
.veld textarea {
    width: 100%;
    padding: 0.6rem 0.7rem;
    font-family: inherit;
    font-size: 1rem;
    color: var(--kleur-tekst);
    background: var(--kleur-achtergrond);
    border: 1px solid var(--kleur-lijn);
    border-radius: var(--radius);
}
.veld .hint { color: var(--kleur-tekst-zacht); font-size: 0.85rem; margin: 0.3rem 0 0; }
.veld-keuze label { display: block; margin: 0.4rem 0; }
.veld-keuze input { width: auto; margin-right: 0.5rem; }
.veld-knoppen { display: flex; align-items: center; gap: 1rem; margin-top: var(--ruimte); }
.huidige-afbeelding { width: 140px; height: auto; border-radius: var(--radius); margin-bottom: 0.5rem; }
.huidige-video { display: block; max-width: 280px; width: 100%; height: auto; border-radius: var(--radius); margin-bottom: 0.5rem; background: #000; }
.beheer-terug { margin-top: var(--ruimte-groot); }
.fout ul { margin: 0; padding-left: 1.2rem; }
.ruimte-boven { margin-top: var(--ruimte-groot); }

/* =========================================================================
   Over mij (tekst en foto's)
   ========================================================================= */
.tekst { max-width: 42em; }
.tekst { margin-bottom: var(--ruimte-groot); }

/* Over mij: op desktop loopt de tekst om de eerste foto heen. */
.over-beeld-links {
    float: left;
    margin: 0.3rem 1.6rem 1rem 0;
    padding: 0;
    background: var(--kleur-vlak);
    border: 1px solid var(--kleur-lijn);
    border-radius: var(--radius);
    overflow: hidden;
    line-height: 0;
    cursor: pointer;
    max-width: 60%;
}
.over-beeld-links img { display: block; height: auto; transition: transform 0.3s ease; }
.over-beeld-links:hover img { transform: scale(1.03); }
.over-beeld-vast img { width: 300px; }
.over-beeld-origineel img { width: auto; max-width: min(100%, 460px); }
.over-clear { clear: both; }

/* Atelier-blok: een eigen sectie met een dunne scheidingslijn bovenaan (zoals
   Samenwerkingen/Referenties). Het bredere querformaat-atelierbeeld zweeft links
   en de eigen atelier-tekst loopt er rechts omheen, net als de intro. De tekst
   kan vrij groeien zonder dat de beelden verschuiven. */
.atelier-blok { border-top: 1px solid var(--kleur-lijn); padding-top: 2rem; margin-top: var(--ruimte-groot); }
/* Kop bij het atelier, in dezelfde stijl als de paginatitel "Over mij". */
.atelier-titel { font-size: 2rem; margin: 0 0 1rem; }
.over-beeld-atelier {
    float: left;
    margin: 0.3rem 1.6rem 1rem 0;
    padding: 0;
    max-width: min(100%, 460px);
    background: var(--kleur-vlak);
    border: 1px solid var(--kleur-lijn);
    border-radius: var(--radius);
    overflow: hidden;
    line-height: 0;
    cursor: pointer;
}
.over-beeld-atelier img { display: block; width: 100%; height: auto; transition: transform 0.3s ease; }
.over-beeld-atelier:hover img { transform: scale(1.03); }
.over-beeld-atelier:focus-visible { outline: 2px solid var(--kleur-accent); outline-offset: 2px; }

.foto-rij {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1.25rem;
}
.foto-item { line-height: 0; padding: 0; background: var(--kleur-vlak); border: 1px solid var(--kleur-lijn); border-radius: var(--radius); overflow: hidden; cursor: pointer; width: 100%; }
.foto-item img { width: 100%; height: 200px; object-fit: cover; }

.samenwerkingen { border-top: 1px solid var(--kleur-lijn); padding-top: 2rem; }
.samenwerkingen h2 { font-size: 1.45rem; margin: 0 0 1.2rem; }
.samenwerkingen-rij { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.samenwerking-kaart { background: var(--kleur-vlak); border: 1px solid var(--kleur-lijn); border-radius: var(--radius); padding: 1rem; }
.samenwerking-kaart h3 { font-size: 1.05rem; margin: 0 0 0.45rem; }
.samenwerking-kaart p { color: var(--kleur-tekst-zacht); font-size: 0.95rem; margin: 0; }
.samenwerking-kaart a { color: var(--kleur-tekst); }
.referenties { border-top: 1px solid var(--kleur-lijn); padding-top: 2rem; }
.referenties h2 { font-size: 1.45rem; margin: 0 0 1.2rem; }
.referentie-label { color: var(--kleur-accent) !important; font-size: 0.82rem !important; margin-bottom: 0.35rem !important; }

.beheer-foto-rij { display: flex; flex-wrap: wrap; gap: 1rem; }
.beheer-foto {
    border: 1px solid var(--kleur-lijn);
    border-radius: var(--radius);
    padding: 0.5rem;
    text-align: center;
    background: var(--kleur-vlak);
}
.beheer-foto img { width: 150px; height: 110px; object-fit: cover; border-radius: var(--radius); display: block; margin-bottom: 0.4rem; }

.veld select {
    width: 100%;
    padding: 0.6rem 0.7rem;
    font-family: inherit;
    font-size: 1rem;
    color: var(--kleur-tekst);
    background: var(--kleur-achtergrond);
    border: 1px solid var(--kleur-lijn);
    border-radius: var(--radius);
}

/* =========================================================================
   Exposities
   ========================================================================= */
.expo-lijst { display: flex; flex-direction: column; gap: var(--ruimte-groot); margin-top: var(--ruimte-groot); }
.expo { border-left: 3px solid var(--kleur-accent); padding-left: 1.2rem; }
.expo h3 { font-size: 1.4rem; margin-bottom: 0.2rem; }
.expo-plaats { margin: 0.1rem 0; }
.expo-periode { margin: 0.1rem 0; color: var(--kleur-tekst-zacht); }
.expo-link { margin: 0.4rem 0 0; }
.expo-voorbij .expo { border-left-color: var(--kleur-lijn); }
.expo-voorbij { opacity: 0.85; }

/* =========================================================================
   Login-slot rechtsonder (openbaar)
   ========================================================================= */
.slot-knop {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--kleur-vlak);
    border: 1px solid var(--kleur-lijn);
    border-radius: 50%;
    color: var(--kleur-tekst-zacht);
    opacity: 0.65;
    transition: opacity 0.2s ease, color 0.2s ease;
    z-index: 50;
}
.slot-knop:hover, .slot-knop:focus-visible { opacity: 1; color: var(--kleur-accent); text-decoration: none; }
.slot-knop svg { width: 20px; height: 20px; display: block; }

/* =========================================================================
   Taalkeuze rechtsboven
   ========================================================================= */
.taal-knop {
    position: fixed;
    top: 0.8rem;
    right: 1rem;
    z-index: 50;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    background: var(--kleur-vlak);
    border: 1px solid var(--kleur-lijn);
    border-radius: 999px;
    padding: 0.28rem 0.8rem 0.28rem 0.45rem;
    color: var(--kleur-tekst);
    font-size: 0.9rem;
    opacity: 0.85;
    transition: opacity 0.2s ease;
}
.taal-knop:hover, .taal-knop:focus-visible { opacity: 1; text-decoration: none; color: var(--kleur-tekst); }
.taal-knop .vlag {
    width: 24px;
    height: 16px;
    line-height: 0;
    border-radius: 2px;
    overflow: hidden;
    display: inline-block;
    border: 1px solid rgba(0, 0, 0, 0.15);
}
.taal-knop .vlag svg { width: 100%; height: 100%; display: block; }

/* =========================================================================
   Uitleg-laag (kleine helptekst bij muis, focus of aanraken; geen bibliotheek)
   ========================================================================= */
.uitleg-laag {
    position: absolute;
    max-width: 260px;
    background: #1f1a16;
    color: #f4efe8;
    border-radius: var(--radius);
    padding: 0.5rem 0.75rem;
    font-size: 0.95rem;
    line-height: 1.4;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
    z-index: 200;
    pointer-events: none;
    /* Zacht en rustig op- en afkomen. */
    opacity: 0;
    transform: translateY(-3px);
    transition: opacity 0.28s ease, transform 0.28s ease;
}
.uitleg-laag.zichtbaar {
    opacity: 1;
    transform: translateY(0);
}
.uitleg { cursor: help; }
.info-knop {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    margin-left: 0.4rem;
    border: 1px solid var(--kleur-lijn);
    border-radius: 50%;
    background: var(--kleur-achtergrond);
    color: var(--kleur-tekst-zacht);
    font-size: 0.9rem;
    font-family: inherit;
    line-height: 1;
    cursor: help;
    vertical-align: middle;
}
.info-knop:hover, .info-knop:focus-visible { border-color: var(--kleur-accent); color: var(--kleur-accent); }

/* =========================================================================
   Inlogpagina: groter en rustig gecentreerd
   ========================================================================= */
.inlog-omhulsel { display: flex; flex-direction: column; align-items: center; padding: var(--ruimte-groot) 0; }
.inlog-titel {
    font-size: 1.5rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--kleur-tekst);
    margin-bottom: var(--ruimte-groot);
    text-align: center;
}
.paneel-inlog { font-size: 1.1rem; }
.paneel-inlog h1 { font-size: 1.8rem; }
.paneel-inlog .veld label { font-size: 1.1rem; }
.paneel-inlog .veld input { font-size: 1.15rem; padding: 0.75rem 0.8rem; }
.paneel-inlog .knop { font-size: 1.15rem; padding: 0.7rem 1.5rem; }

/* =========================================================================
   Contact en berichten
   ========================================================================= */
.honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.contact-gegevens { margin: var(--ruimte-groot) 0; }
.contact-gegevens p { margin: 0.2rem 0; }
.contact-sier { width: 46px; height: 2px; border: 0; background: var(--kleur-accent); margin: 1.5rem auto; opacity: 0.9; }
.contact-social { margin-top: 2.25rem; padding-top: 1.5rem; border-top: 1px solid var(--kleur-lijn); }
.contact-social h2 { font-size: 1.2rem; font-weight: 400; margin-bottom: 0.7rem; }
.contact-social ul { list-style: none; padding: 0; margin: 0; }
.contact-social li { margin: 0.25rem 0; }
.social-link-rij { display: grid; grid-template-columns: 1fr 2fr 7rem auto; gap: 0.75rem; align-items: end; border-bottom: 1px solid var(--kleur-lijn); padding: 1rem 0; }
.social-link-rij .veld { margin: 0; }
.bericht { margin-bottom: var(--ruimte); }
.bericht-kop { margin-bottom: 0.4rem; }
.bericht-datum { color: var(--kleur-tekst-zacht); font-size: 0.85rem; margin-left: 0.5rem; }

/* =========================================================================
   Kleine schermen
   ========================================================================= */
@media (max-width: 600px) {
    body { font-size: 18px; }
    .site-titel { font-size: 1.6rem; letter-spacing: 0.16em; }
    nav.hoofdmenu { font-size: 1.25rem; gap: 0.75rem; }
    .vergroting-binnen { grid-template-columns: 1fr; }
    .beheer-tabel .cel-beeld { display: none; }
    .home-intro { margin-top: 1.5rem; }
    .home-intro-titel { letter-spacing: 0.16em; }
    .home-intro-ondertitel { font-size: 0.95rem; }
    .over-beeld-links { width: 100%; max-width: 100%; }
    .over-beeld-links { float: none; margin: 0.3rem 0 1.6rem; }
    .over-beeld-links img { width: 100%; max-width: 100%; height: auto; }
    /* Atelierbeeld op mobiel: gestapeld, volle breedte (geen float meer). */
    .over-beeld-atelier { float: none; width: 100%; max-width: 100%; margin: 0.3rem 0 1.6rem; }
    .over-beeld-atelier img { width: 100%; max-width: 100%; height: auto; }
    /* Galerie op smalle schermen: twee op een rij (het vaste drieluik zou te smal worden). */
    .galerie { grid-template-columns: repeat(2, 1fr); }
    .samenwerkingen-rij { grid-template-columns: 1fr; }
    .social-link-rij { grid-template-columns: 1fr; gap: 0.35rem; }
    /* Startseiten-Kacheln auf Mobil größer (Rand etwa halbiert); Desktop bleibt 170px. */
    .start-beeld img { width: min(80vw, 360px); height: min(80vw, 360px); }
}

/* Sehr schmale Handys: Menue noch enger, damit alle vier punten op een regel
   blijven staan. */
@media (max-width: 380px) {
    nav.hoofdmenu { gap: 0.5rem; font-size: 1.15rem; }
    /* Galerie op zeer smalle schermen: een op een rij. */
    .galerie { grid-template-columns: 1fr; }
}