@import url("../fonts/fonts.css");
/* ==========================================================================
   Condoleanceregister Necmi Türünc
   KLEUREN — pas alleen dit blok aan om de site op de rouwkaart af te stemmen.
   ========================================================================== */
:root{
  /* Overgenomen van de rouwkaart (steekproef uit het bestand zelf) */
  --papier:      #f7f3f2;   /* papierkleur van de kaart */
  --papier-diep: #f0eae6;   /* tweede vlak, iets dieper */
  --inkt:        #3d3a32;   /* tekstkleur van de kaart */
  --inkt-zacht:  #6f675c;
  --accent:      #9f8f6e;   /* warm taupe uit de orchideetak */
  --accent-diep: #7e7053;
  --rand:        #e3dbd4;
  --wit:         #fffdfc;
  --schaduw:     0 1px 2px rgba(61,58,50,.04), 0 10px 30px rgba(61,58,50,.06);
  --serif: "Cormorant Garamond", Georgia, "Iowan Old Style", "Times New Roman", serif;
  --sans: "Segoe UI", system-ui, -apple-system, Helvetica, Arial, sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--papier); color:var(--inkt);
  font-family:var(--sans); font-size:17px; line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:var(--serif); font-weight:400; letter-spacing:.01em; margin:0 0 .6em}
h1{font-size:clamp(2.2rem,6vw,3.4rem); line-height:1.15}
h2{font-size:clamp(1.45rem,3.4vw,2rem)}
h3{font-size:1.15rem}
p{margin:0 0 1.1em}
a{color:var(--accent-diep)}
.zacht{color:var(--inkt-zacht)}
.klein{font-size:.85rem}
.smal{max-width:720px; margin-inline:auto}
.midden{text-align:center}

/* ---------- hero ---------- */
.hero{
  padding:clamp(3rem,9vw,6rem) 1.4rem clamp(2.5rem,6vw,4rem);
  text-align:center;
  background:linear-gradient(180deg, var(--papier-diep), var(--papier));
  border-bottom:1px solid var(--rand);
}
.hero-inner{max-width:760px; margin-inline:auto}
.portret-wrap{
  width:min(230px,58vw); aspect-ratio:1; margin:0 auto 2rem;
  border-radius:50%; padding:7px; background:var(--wit);
  box-shadow:var(--schaduw); border:1px solid var(--rand);
}
.portret{width:100%; height:100%; object-fit:cover; border-radius:50%; display:block}
.eyebrow{
  font-family:var(--serif); font-style:italic; color:var(--accent-diep);
  letter-spacing:.06em; margin-bottom:.5em;
}
.leefjaren{
  display:flex; gap:.9rem; justify-content:center; align-items:center;
  flex-wrap:wrap; color:var(--inkt-zacht); font-family:var(--serif);
  font-size:1.05rem;
}
.ruit{color:var(--accent)}
.citaat{
  margin:2.4rem auto 0; max-width:34rem; padding-top:1.6rem;
  border-top:1px solid var(--rand);
  font-family:var(--serif); font-style:italic; font-size:1.15rem; color:var(--inkt-zacht);
}
.citaat footer{font-style:normal; font-size:.9rem; margin-top:.7em}

/* ---------- navigatie ---------- */
.snelmenu{
  position:sticky; top:0; z-index:20;
  display:flex; gap:clamp(.8rem,3vw,2rem); justify-content:center; flex-wrap:wrap;
  padding:.85rem 1rem; background:rgba(246,242,234,.94);
  backdrop-filter:blur(8px); border-bottom:1px solid var(--rand);
  font-size:.92rem;
}
.snelmenu a{color:var(--inkt-zacht); text-decoration:none}
.snelmenu a:hover{color:var(--accent-diep)}

/* ---------- blokken ---------- */
main{padding:0 1.4rem}
.blok{padding:clamp(2.8rem,7vw,4.5rem) 0; border-bottom:1px solid var(--rand)}
.blok:last-of-type{border-bottom:0}
.lopend p:last-child{margin-bottom:0}

/* ---------- afscheid ---------- */
.afscheid-kaart{
  background:var(--wit); border:1px solid var(--rand); border-radius:3px;
  padding:clamp(1.4rem,4vw,2.2rem); box-shadow:var(--schaduw);
}
.afscheid-kaart dl{display:grid; gap:1.1rem; margin:0}
.afscheid-kaart dt{
  font-size:.75rem; text-transform:uppercase; letter-spacing:.12em;
  color:var(--accent-diep); margin-bottom:.2em;
}
.afscheid-kaart dd{margin:0; font-family:var(--serif); font-size:1.15rem}
.toelichting{margin:1.6rem 0 0; padding-top:1.2rem; border-top:1px solid var(--rand); color:var(--inkt-zacht)}
.rsvp{margin-top:2.6rem}

/* ---------- formulieren ---------- */
.formulier{display:grid; gap:1rem}
.formulier.kaart{
  background:var(--wit); border:1px solid var(--rand); border-radius:3px;
  padding:clamp(1.3rem,4vw,2rem); box-shadow:var(--schaduw);
}
.formulier label{display:grid; gap:.35rem; font-size:.9rem; color:var(--inkt-zacht)}
.rij{display:grid; gap:1rem; grid-template-columns:1fr 1fr}
input,textarea{
  font:inherit; color:var(--inkt); background:var(--papier);
  border:1px solid var(--rand); border-radius:2px; padding:.7rem .8rem; width:100%;
}
.formulier.kaart input,.formulier.kaart textarea{background:var(--papier)}
input:focus,textarea:focus{outline:2px solid var(--accent); outline-offset:1px; border-color:transparent}
textarea{resize:vertical}
.honeypot{position:absolute; left:-9999px; width:1px; height:1px; opacity:0}
.knop,.knop-licht{
  font:inherit; cursor:pointer; border-radius:2px; padding:.75rem 1.6rem;
  display:inline-block; text-align:center; text-decoration:none; transition:.18s;
}
.knop{background:var(--accent-diep); color:var(--wit); border:1px solid var(--accent-diep); justify-self:start}
.knop:hover:not(:disabled){background:var(--inkt); border-color:var(--inkt)}
.knop:disabled{opacity:.5; cursor:default}
.knop-licht{background:transparent; color:var(--accent-diep); border:1px solid var(--accent)}
.knop-licht:hover{background:var(--accent); color:var(--wit)}
.status{margin:0; font-size:.9rem; min-height:1.2em}
.status.ok{color:var(--accent-diep)}
.status.fout{color:#a23b2d}

/* ---------- kaarsje ---------- */
.kaars-sectie{text-align:center; background:var(--papier-diep); margin-inline:calc(-1 * 1.4rem); padding-inline:1.4rem}
.vlam{
  width:22px; height:52px; margin:0 auto 1.4rem; position:relative;
  background:linear-gradient(180deg,#efe6d2,#e2d5ba); border-radius:3px 3px 2px 2px;
}
.vlam-kern{
  position:absolute; top:-20px; left:50%; width:14px; height:22px; transform:translateX(-50%);
  background:radial-gradient(ellipse at 50% 70%, #fff6d8 0%, #f5c66b 45%, #e08b2a 75%, rgba(224,139,42,0) 100%);
  border-radius:50% 50% 45% 45%; animation:flakkeren 2.4s ease-in-out infinite;
}
@keyframes flakkeren{
  0%,100%{transform:translateX(-50%) scale(1); opacity:.95}
  50%{transform:translateX(-52%) scale(1.08); opacity:1}
}
.teller strong{font-family:var(--serif); font-size:1.6rem; color:var(--accent-diep)}
.kaars-sectie .knop{justify-self:center}

/* ---------- galerij ---------- */
.galerij{
  display:grid; gap:12px; margin-top:1.6rem;
  grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
  max-width:1000px; margin-inline:auto;
}
.galerij figure{margin:0; aspect-ratio:4/5; overflow:hidden; border:1px solid var(--rand); background:var(--wit)}
.galerij img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s}
.galerij figure:hover img{transform:scale(1.04)}

/* ---------- berichten ---------- */
.intro{max-width:36rem}
.berichten{margin-top:3rem}
.berichten h3{color:var(--inkt-zacht); font-size:.8rem; text-transform:uppercase; letter-spacing:.12em; font-family:var(--sans)}
.bericht{
  background:var(--wit); border:1px solid var(--rand); border-left:3px solid var(--accent);
  padding:1.3rem 1.4rem; margin-bottom:1rem; border-radius:2px;
}
.bericht .tekst{white-space:pre-line; margin-bottom:.9em; font-family:var(--serif); font-size:1.05rem}
.afzender{margin:0; font-size:.88rem; color:var(--inkt-zacht); display:flex; gap:.6rem; flex-wrap:wrap; align-items:baseline}
.afzender strong{color:var(--inkt); font-weight:600}
.relatie{font-style:italic}
.afzender .datum{margin-left:auto}
.leeg{font-style:italic}

/* ---------- delen + voet ---------- */
.deelknoppen{display:flex; gap:.8rem; flex-wrap:wrap}
.voet{
  text-align:center; padding:3rem 1.4rem 4rem; border-top:1px solid var(--rand);
  background:var(--papier-diep); color:var(--inkt-zacht); font-size:.92rem;
}
.voet p{margin:0 0 .5em}

/* ---------- toegangspoort ---------- */
.poort{display:grid; place-items:center; min-height:100vh; padding:2rem; text-align:center}
.poort .formulier{max-width:320px; margin-inline:auto}

@media (max-width:640px){
  body{font-size:16px}
  .rij{grid-template-columns:1fr}
  .afzender .datum{margin-left:0; width:100%}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none !important; transition:none !important}
  html{scroll-behavior:auto}
}


/* ---------- toevoegingen bij de rouwkaart-stijl ---------- */
.hero{position:relative; overflow:hidden}
.ornament{
  position:absolute; top:-10px; left:-20px; width:min(310px,34vw);
  opacity:.95; pointer-events:none; user-select:none;
}
.ornament-voet{
  position:absolute; top:auto; bottom:-18px; left:auto; right:-24px;
  width:min(210px,26vw); transform:scaleX(-1) rotate(180deg); opacity:.55;
}
.voet{position:relative; overflow:hidden}
.voet p{position:relative; z-index:1}

h1{
  font-size:clamp(1.9rem,5.4vw,3rem); letter-spacing:.14em; text-transform:uppercase;
  margin-bottom:.35em;
}
.leefjaren{font-family:var(--serif); font-size:1.1rem; color:var(--inkt-zacht); margin-bottom:1.6em}
.aankondiging{
  max-width:32rem; margin:0 auto; font-family:var(--serif); font-size:1.18rem;
  line-height:1.6; color:var(--inkt);
}
.memoriam-tekst p{margin:0 0 .2em; font-family:var(--serif); font-size:1.12rem}
.levensdata{
  display:flex; gap:.9rem; align-items:center; flex-wrap:wrap; margin-top:1.8rem;
  padding-top:1.4rem; border-top:1px solid var(--rand); color:var(--inkt-zacht); font-size:.95rem;
}
.snelmenu{justify-content:space-between; padding-inline:clamp(1rem,4vw,2.5rem)}
.snelmenu-links{display:flex; gap:clamp(.8rem,2.4vw,1.8rem); flex-wrap:wrap}
.taalwissel{
  border:1px solid var(--rand); border-radius:2px; padding:.25rem .75rem;
  text-decoration:none; color:var(--inkt-zacht); white-space:nowrap;
}
.taalwissel:hover{border-color:var(--accent); color:var(--accent-diep)}
.kaartlink{margin:1.4rem 0 0}
.afscheid-kaart dd{font-size:1.2rem}

@media (max-width:640px){
  .ornament{width:44vw; top:-6px; left:-26px}
  .snelmenu{font-size:.85rem}
  h1{letter-spacing:.1em}
}


/* ---------- lichtbak ---------- */
.foto-knop{
  display:block; padding:0; border:0; background:none; cursor:zoom-in;
  width:100%; height:100%;
}
.lichtbak{
  position:fixed; inset:0; z-index:60; display:flex; align-items:center; justify-content:center;
  background:rgba(47,43,38,.92); padding:clamp(1rem,4vw,3rem);
}
/* moet sterker zijn dan .lichtbak zelf, anders wint display:flex van het hidden-attribuut */
.lichtbak[hidden]{display:none}
.lichtbak-beeld{
  max-width:min(1100px,92vw); max-height:88vh; object-fit:contain;
  box-shadow:0 20px 60px rgba(0,0,0,.4); background:var(--papier);
}
.lichtbak button{
  position:absolute; background:none; border:0; color:rgba(255,253,248,.85);
  font-size:2.6rem; line-height:1; cursor:pointer; padding:.4rem .8rem; font-family:var(--sans);
}
.lichtbak button:hover{color:#fff}
.lichtbak-sluit{top:.6rem; right:1rem; font-size:2.2rem}
.lichtbak-vorige{left:.4rem}
.lichtbak-volgende{right:.4rem}
@media (max-width:640px){
  .lichtbak-vorige,.lichtbak-volgende{bottom:1.2rem; top:auto; font-size:3rem}
  .lichtbak-vorige{left:2rem}
  .lichtbak-volgende{right:2rem}
}


/* ---------- tekst uit het rouwbericht ---------- */
.hero .aankondiging{margin-bottom:1.4em; font-size:1.12rem}
.hero .citaat{
  margin:2rem auto 0; max-width:30rem; padding-top:1.5rem;
  border-top:1px solid var(--rand); border-left:0;
  font-family:var(--serif); font-style:italic; font-size:1.15rem; color:var(--inkt-zacht);
}
.memoriam-intro{
  font-family:var(--serif); font-size:1.25rem; line-height:1.55; color:var(--inkt);
  margin-bottom:1.6em; max-width:34rem;
}
.afscheid-welkom{font-family:var(--serif); font-size:1.12rem; max-width:34rem; margin-bottom:1.6em}

/* ---------- foto meesturen bij een bericht ---------- */
.fotoveld{display:grid; gap:.5rem; justify-items:start}
.fotoveld-kop{font-size:.9rem; color:var(--inkt-zacht)}
.fotoknop{cursor:pointer; font-size:.92rem; padding:.55rem 1.2rem}
.fotoveld-stand{font-size:.9rem}
.fotoveld-hint{margin:0; max-width:34rem}
.bericht-fotos{display:flex; gap:.6rem; flex-wrap:wrap; margin:0 0 1rem}
.bericht-fotos .foto-knop{width:110px; height:110px; border:1px solid var(--rand); background:var(--papier)}
.bericht-fotos img{width:100%; height:100%; object-fit:cover; display:block}

/* ---------- snelknop naar het condoleanceregister ----------
   Drie varianten, zodat de knop nergens over de inhoud valt:
   - breed scherm (>=1200px): staand tabje tegen de rechterrand
   - middel (721-1199px): compacte knop rechtsonder
   - mobiel (<=720px): balk over de volle breedte, zoals in een webshop
   Verdwijnt zodra het register zelf in beeld komt.                      */
.snelknop{
  position:fixed; z-index:40; text-decoration:none;
  background:var(--accent-diep); color:var(--wit);
  box-shadow:0 6px 24px rgba(61,58,50,.22);
  transition:opacity .25s, transform .25s;
  display:flex; align-items:center; justify-content:center; gap:.55rem;
}
.snelknop:hover{background:var(--inkt)}
.snelknop-pen{font-size:1.05em; line-height:1}
.snelknop[hidden]{display:none}
.snelknop.is-weg{opacity:0; pointer-events:none}

/* breed scherm: verticaal tabje rechts */
@media (min-width:1200px){
  .snelknop{
    top:50%; right:0; writing-mode:vertical-rl;
    transform:translateY(-50%) rotate(180deg);
    padding:1.4rem .8rem; border-radius:3px 0 0 3px;
    font-size:.92rem; letter-spacing:.04em;
  }
  .snelknop.is-weg{transform:translateY(-50%) rotate(180deg)}
  .snelknop-pen{transform:rotate(90deg)}
}

/* middelgroot scherm: knop rechtsonder, laat de inhoud met rust */
@media (min-width:721px) and (max-width:1199px){
  .snelknop{
    right:1.1rem; bottom:1.1rem; padding:.7rem 1.1rem;
    border-radius:3px; font-size:.85rem;
  }
  .snelknop.is-weg{transform:translateY(10px)}
}

/* mobiel: balk onderin, met ruimte voor de iPhone-thuisbalk */
@media (max-width:720px){
  .snelknop{
    left:0; right:0; bottom:0; padding:1rem 1.2rem;
    padding-bottom:calc(1rem + env(safe-area-inset-bottom, 0px));
    font-size:1rem; text-align:center;
  }
  .snelknop.is-weg{transform:translateY(100%)}
  body{padding-bottom:4.2rem}
}