/* ============================================================
   Vakantie-Fotoboek.nl — gedeelde opmaak voor alle publieke pagina's
   ------------------------------------------------------------
   Eén stylesheet voor de hele site. Elke pagina laadt dit bestand;
   pagina-eigen opmaak staat in een <style> op die pagina zelf en
   blijft daar beperkt tot wat écht alleen daar voorkomt.

   De tool (app.html) gebruikt dit bestand NIET. Die heeft zijn eigen
   opmaak, omdat een boekpagina heel andere maten volgt dan een website.

   Uitgangspunt is een reisboekmerk, geen software: veel wit, echte
   fotografie en rustige typografie. Publieke pagina's gebruiken Fraunces voor koppen en Inter voor lopende tekst en bediening.
   ============================================================ */

:root{
  --papier:#FFFFFF;
  --inkt:#1C1C1A;
  --gedempt:#6E6B63;
  --accent:#9C5B3C;          /* terracotta, gelijk aan de boekopmaak */
  --accent-donker:#7E4630;
  --lijn:#E5E1D6;
  --zand:#F6F4EF;
  --paneel:#2A2622;
  --max:1160px;
  --radius:10px;
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--papier);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  color:var(--inkt);
  line-height:1.68;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* ---------- ruimte ---------- */
.wrap{max-width:var(--max); margin:0 auto; padding:0 28px;}
.wrap-smal{max-width:760px; margin:0 auto; padding:0 28px;}
section{padding:92px 0; border-top:1px solid var(--lijn);}
section.zand{background:var(--zand); border-top:none;}
section.geen-lijn{border-top:none;}
.vol-breed{width:100vw; position:relative; left:50%; right:50%; margin-left:-50vw; margin-right:-50vw;}

/* ---------- typografie ---------- */
h1,h2,h3{font-family:'Fraunces',Georgia,'Times New Roman',serif; font-weight:600; letter-spacing:-.01em; line-height:1.12;}
h1{font-size:clamp(34px,5vw,58px); line-height:1.04; margin-bottom:22px;}
h2{font-size:clamp(26px,3.2vw,40px); margin-bottom:18px;}
h3{font-size:20px; margin-bottom:10px;}
h1 em, h2 em{font-style:normal; color:var(--accent);}
p{margin-bottom:16px;}
p:last-child{margin-bottom:0;}
a{color:var(--accent); text-decoration:none;}
a:hover{text-decoration:underline;}
strong{font-weight:600;}

.kicker{
  display:inline-block; background:rgba(156,91,60,.1); color:var(--accent);
  font-size:12px; font-weight:700; letter-spacing:1.4px; text-transform:uppercase;
  padding:7px 14px; border-radius:20px; margin-bottom:22px;
}
.lead{font-size:clamp(17px,1.6vw,20px); color:var(--gedempt); max-width:34em;}
.kop{max-width:38em; margin-bottom:52px;}
.kop.midden{margin-left:auto; margin-right:auto; text-align:center;}
.kop p{color:var(--gedempt); font-size:17px;}

/* ---------- toegankelijkheid ---------- */
a:focus-visible, button:focus-visible, summary:focus-visible,
input:focus-visible, select:focus-visible{
  outline:3px solid var(--accent); outline-offset:3px; border-radius:3px;
}
.overslaan{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--paneel); color:#fff; padding:12px 20px;
  border-radius:0 0 8px 0; font-weight:600;
}
.overslaan:focus{left:0;}
.alleen-schermlezer{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ---------- knoppen ---------- */
.btn{
  display:inline-block; background:var(--accent); color:#fff; border:none;
  border-radius:8px; padding:16px 32px; font-size:16px; font-weight:600;
  cursor:pointer; font-family:inherit; text-decoration:none; transition:background .15s;
}
.btn:hover{background:var(--accent-donker); text-decoration:none; color:#fff;}
.btn.groot{padding:19px 42px; font-size:17px;}
.btn.licht{background:transparent; color:var(--inkt); border:1.5px solid var(--lijn);}
.btn.licht:hover{background:var(--zand); border-color:var(--gedempt); color:var(--inkt);}
.btn.wit{background:#fff; color:var(--inkt);}
.btn.wit:hover{background:var(--zand); color:var(--inkt);}
.acties{display:flex; gap:14px; align-items:center; flex-wrap:wrap;}

/* ---------- navigatie ---------- */
nav.hoofdmenu{
  position:sticky; top:0; z-index:100;
  background:rgba(255,255,255,.94); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--lijn);
}
nav.hoofdmenu .wrap{display:flex; align-items:center; justify-content:space-between; height:74px; gap:20px;}
.logo{font-family:'Fraunces',Georgia,serif; font-weight:600; font-size:19px; letter-spacing:-.01em; color:var(--inkt);}
.logo:hover{text-decoration:none;}
.logo span{color:var(--accent);}
.menu{display:flex; align-items:center; gap:26px; font-size:15px;}
.menu a{color:var(--inkt);}
.menu a.actief{color:var(--accent); font-weight:600;}
nav.hoofdmenu .btn{padding:11px 22px; font-size:15px;}
@media(max-width:900px){ .menu a:not(.btn){display:block;} }

/* ---------- voettekst ---------- */
footer{background:var(--paneel); color:rgba(255,255,255,.72); padding:62px 0 46px; font-size:14.5px;}
footer a{color:rgba(255,255,255,.9);}
footer h4{font-family:inherit; font-size:12px; font-weight:700; letter-spacing:1.4px; text-transform:uppercase; color:rgba(255,255,255,.5); margin-bottom:14px;}
.voet-kolommen{display:grid; grid-template-columns:1.6fr 1fr 1fr; gap:44px; margin-bottom:38px;}
.voet-kolommen ul{list-style:none;}
.voet-kolommen li{margin-bottom:9px;}
.voet-onder{border-top:1px solid rgba(255,255,255,.14); padding-top:24px; display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; font-size:13.5px; color:rgba(255,255,255,.55);}
@media(max-width:760px){ .voet-kolommen{grid-template-columns:1fr; gap:30px;} }

/* ---------- rasters en kaarten ---------- */
.rij{display:grid; gap:34px;}
.rij.k2{grid-template-columns:repeat(2,1fr);}
.rij.k3{grid-template-columns:repeat(3,1fr);}
.rij.k4{grid-template-columns:repeat(4,1fr);}
.kaart{background:#fff; border:1px solid var(--lijn); border-radius:var(--radius); padding:30px;}
.kaart.zand{background:var(--zand); border-color:transparent;}
@media(max-width:900px){ .rij.k3, .rij.k4{grid-template-columns:repeat(2,1fr);} }
@media(max-width:640px){ .rij.k2, .rij.k3, .rij.k4{grid-template-columns:1fr;} }

/* ---------- twee kolommen met beeld ---------- */
.split{display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center;}
.split.beeld-links > :first-child{order:-1;}
@media(max-width:900px){ .split{grid-template-columns:1fr; gap:34px;} }

/* ---------- beeld ---------- */
figure{margin:0;}
.beeldkader{
  border-radius:var(--radius); overflow:hidden; background:var(--zand);
  box-shadow:0 18px 50px rgba(28,28,26,.13);
}
.beeldkader img{width:100%; height:auto; display:block;}
figcaption{font-size:13px; color:var(--gedempt); margin-top:12px;}
.bijschrift{font-size:13px; color:var(--gedempt); margin-top:12px;}

/* boekpagina met een subtiele vouwlijn in het midden, voor spreads */
.spread{position:relative; border-radius:var(--radius); overflow:hidden; box-shadow:0 20px 60px rgba(28,28,26,.18);}
.spread img{width:100%; height:auto; display:block;}
.spread::after{
  content:''; position:absolute; top:0; bottom:0; left:50%; width:26px; transform:translateX(-50%);
  background:linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.09) 45%, rgba(0,0,0,.14) 50%, rgba(0,0,0,.09) 55%, rgba(0,0,0,0) 100%);
  pointer-events:none;
}

.band{height:clamp(220px,38vh,440px); overflow:hidden; border-top:1px solid var(--lijn); border-bottom:1px solid var(--lijn);}
.band img{width:100%; height:100%; object-fit:cover; display:block;}

/* ---------- stappen ---------- */
.stappen{display:grid; grid-template-columns:repeat(3,1fr); gap:38px;}
.stap .nr{
  display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px; border-radius:50%; background:var(--accent); color:#fff;
  font-size:15px; font-weight:700; margin-bottom:16px;
}
.stap p{color:var(--gedempt); font-size:15.5px;}
@media(max-width:800px){ .stappen{grid-template-columns:1fr; gap:28px;} }

/* ---------- prijzen ---------- */
.prijzen{display:grid; grid-template-columns:repeat(2,1fr); gap:28px; max-width:800px; margin:0 auto;}
.prijs{background:#fff; border:1px solid var(--lijn); border-radius:var(--radius); padding:36px 32px; position:relative;}
.prijs.uitgelicht{border-color:var(--accent); border-width:2px;}
.prijs .bedrag{font-family:'Fraunces',Georgia,serif; font-size:38px; font-weight:600; color:var(--accent); margin:6px 0 2px;}
.prijs .per{font-size:13.5px; color:var(--gedempt); margin-bottom:22px;}
.prijs ul{list-style:none; margin-bottom:26px;}
.prijs li{padding-left:24px; position:relative; margin-bottom:9px; font-size:15px;}
.prijs li::before{content:'—'; position:absolute; left:0; color:var(--accent);}
@media(max-width:700px){ .prijzen{grid-template-columns:1fr;} }

/* ---------- veelgestelde vragen ---------- */
.faq{max-width:900px; margin:0 auto; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; align-items:start;}
.faq details{border:1px solid var(--lijn); border-radius:12px; padding:18px 20px; background:#fff; box-shadow:0 5px 18px rgba(16,36,58,.045);}
.faq summary{cursor:pointer; font-weight:700; font-size:16px; line-height:1.4; list-style:none; display:flex; justify-content:space-between; gap:16px; align-items:center; color:var(--navy, var(--inkt));}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:'+'; display:grid; place-items:center; flex:0 0 28px; width:28px; height:28px; border-radius:50%; color:var(--navy, var(--accent)); background:var(--sky, var(--zand)); font-size:20px; line-height:1; transition:transform .18s ease;}
.faq details[open]{border-color:#B9D6E7; box-shadow:0 8px 24px rgba(16,36,58,.08);}
.faq details[open] summary::after{content:'−'; transform:rotate(180deg);}
.faq details p{margin-top:15px; padding-top:14px; border-top:1px solid var(--lijn); color:var(--gedempt); font-size:15px; line-height:1.6;}
@media(max-width:700px){.faq{grid-template-columns:1fr; gap:10px;}}

/* ---------- opvallend blok (backup-oproep) ---------- */
.blok{background:var(--paneel); color:#fff; border-radius:var(--radius); padding:56px 52px;}
.blok h2{color:#fff;}
.blok p{color:rgba(255,255,255,.78); max-width:44em;}
@media(max-width:640px){ .blok{padding:38px 26px;} }

/* ---------- twee routes op de exportpagina ----------
   Staat direct onder de kop, dus voordat er gescrold wordt. De linkerkaart is
   de belangrijkste (bezoeker kan meteen door) en krijgt daarom een gekleurde
   rand; de rechter blijft rustig. */
.startkeuze{margin:30px 0 0;}
.startkaart{display:flex; flex-direction:column;}
.startkaart h2{font-size:19px; margin-bottom:8px;}
.startkaart p{font-size:15px; color:var(--gedempt); margin-bottom:20px;}
/* De knop onderaan, zodat beide kaarten er gelijk uitzien ook als de ene tekst
   een regel langer is dan de andere. */
.startkaart .btn{margin-top:auto; align-self:flex-start;}
.startkeuze > .startkaart:first-child{border-color:var(--accent);}
.startnoot{margin-top:18px; font-size:14px; color:var(--gedempt);}
.bewaarnoot{margin:22px 0 0; padding:16px 20px; border-left:3px solid var(--accent); border-radius:0 9px 9px 0; background:var(--sky); color:var(--navy); font-size:14.5px; line-height:1.55;}
.bewaarnoot strong{display:block; margin-bottom:3px;}
@media(max-width:640px){
  .startkeuze{gap:14px;}
  .startkaart{padding:24px;}
  .startkaart .btn{align-self:stretch; text-align:center; padding:15px 18px;}
  .bewaarnoot{padding:14px 16px; font-size:14px;}
}

/* Eén prijskaart in plaats van twee: de PDF is geen gelijkwaardig alternatief
   meer maar een regel eronder. */
.prijzen.solo{grid-template-columns:1fr; max-width:440px;}
.pdfregel{max-width:800px; margin:26px auto 0; padding-top:22px;
  border-top:1px solid var(--lijn); font-size:15px; color:var(--gedempt);}

/* ---------- voorbeeldprijzen ----------
   De tabel staat onder de twee prijsblokken en is bewust rustig: hij hoort te
   informeren, niet te concurreren met de knop erboven. */
/* LET OP de naam. Dit heette eerst `.tabelwikkel`, en beheer.php gebruikte die
   naam al voor de bestellingentabel — én laadt deze stylesheet. Gevolg: de hele
   beheertabel werd afgeknepen tot 800 px en gecentreerd, waardoor de kolommen
   met de knoppen buiten beeld vielen (gemeld door Peter, 10-9-2026).

   Vandaar een eigen naam. Nieuwe klassen die hier bijkomen: eerst controleren of
   ze al ergens anders gebruikt worden — de beheerpagina's delen deze stylesheet. */
.prijswikkel{overflow-x:auto; max-width:800px; margin:34px auto 0;}
.prijstabel{width:100%; border-collapse:collapse; font-size:15px; background:#fff;
  border:1px solid var(--lijn); border-radius:var(--radius); overflow:hidden;}
.prijstabel th, .prijstabel td{padding:12px 16px; text-align:right; border-bottom:1px solid var(--lijn);}
.prijstabel th:first-child, .prijstabel td:first-child{text-align:left;}
.prijstabel thead th{background:var(--zand); font-weight:600; font-size:14px;}
.prijstabel tbody tr:last-child td{border-bottom:none;}
.prijsnoot{max-width:800px; margin:12px auto 0; font-size:13.5px; color:var(--gedempt);}

/* ---------- het eigen verhaal ----------
   De blokken .ervaring en .staging stonden hier voor een sectie met
   klantreacties die nooit is ingevuld. Die sectie is vervangen door het eigen
   verhaal (8-9-2026); komen er echte reacties, dan kan dit stukje CSS terug uit
   de geschiedenis. */
.ondertekening{
  font-family:'Fraunces',Georgia,serif; font-size:17px; color:var(--gedempt);
  margin-top:26px;
}

/* ---------- artikelpagina's ---------- */
.artikel{padding:66px 0 84px;}
.artikel .lead{margin-bottom:34px; max-width:none;}
.artikel h2{margin-top:52px;}
.artikel h3{margin-top:32px; font-size:19px;}
.artikel ol, .artikel ul{margin:0 0 20px 22px;}
.artikel li{margin-bottom:9px;}
.artikel .kruimels{font-size:13.5px; color:var(--gedempt); margin-bottom:28px;}
.artikel .kruimels a{color:var(--gedempt);}
.artikel figure{margin:32px 0;}

.let-op{background:var(--zand); border-left:3px solid var(--accent); border-radius:0 8px 8px 0; padding:22px 26px; margin:28px 0;}
.let-op strong{display:block; margin-bottom:6px;}

.verder{background:var(--zand); border-radius:var(--radius); padding:32px; margin-top:56px;}
.verder h2{margin-top:0; font-size:20px;}
.verder ul{list-style:none; margin:0;}
.verder li{margin-bottom:10px; padding-left:20px; position:relative;}
.verder li::before{content:'→'; position:absolute; left:0; color:var(--accent);}

/* ---------- afdrukken ---------- */
@media print{
  nav.hoofdmenu, footer, .overslaan, .btn{display:none !important;}
  body{color:#000;}
  section{padding:24px 0; border:none;}
}

/* ---------- huisstijl Vakantie-Fotoboek.nl ----------
   Alleen pagina's met .site-publiek gebruiken deze kleuren en typografie.
   beheer.php deelt het stylesheet, maar houdt zijn bestaande beheerlook. */
body.site-publiek{
  --papier:#FFFFFF;
  --inkt:#16202B;
  --gedempt:#526475;
  --accent:#3E83B8;
  --accent-donker:#2B6E9E;
  --lijn:#DCE7EE;
  --zand:#F7F5F1;
  --paneel:#10243A;
  --navy:#10243A;
  --sky:#D8EAF3;
  --zon:#F7C44A;
  --max:1200px;
  --radius:12px;
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  color:var(--inkt);
  background:var(--papier);
}
body.site-publiek h1,
body.site-publiek h2,
body.site-publiek h3{
  font-family:'Fraunces',Georgia,'Times New Roman',serif;
  color:var(--navy);
  letter-spacing:-.025em;
}
body.site-publiek h1{font-weight:700;}
body.site-publiek h2,
body.site-publiek h3{font-weight:600;}
body.site-publiek h1 em,
body.site-publiek h2 em{color:var(--accent);}
body.site-publiek nav.hoofdmenu{
  background:rgba(255,255,255,.97);
  border-bottom-color:var(--lijn);
}
body.site-publiek nav.hoofdmenu .wrap{height:100px; transition:height .22s ease;}
body.site-publiek .logo-header{display:block; flex:none; line-height:0;}
body.site-publiek .logo-header img{display:block; width:clamp(185px,20.8vw,247px); height:auto; transition:width .22s ease;}
body.site-publiek.site-header-compact nav.hoofdmenu .wrap{height:78px;}
body.site-publiek.site-header-compact .logo-header img{width:clamp(142px,16vw,190px);}
body.site-publiek .menu{gap:clamp(12px,1.65vw,22px); font-size:14px; font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;}
body.site-publiek .menu a{color:var(--navy);}
body.site-publiek .menu-toggle{display:none; border:1px solid var(--lijn); border-radius:999px; background:#fff; color:var(--navy); padding:11px 16px; font:600 14px 'Inter',sans-serif; cursor:pointer; align-items:center; gap:8px;}
body.site-publiek .menu-toggle span:first-child{font-size:18px; line-height:1;}
body.site-publiek .btn{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  background:var(--zon);
  color:var(--navy);
  border-radius:999px;
  font-weight:700;
  transition:background .15s, transform .15s;
}
body.site-publiek .btn:hover{background:#EDB832; color:var(--navy); transform:translateY(-1px);}
body.site-publiek .btn.licht{
  background:#fff;
  color:var(--navy);
  border:1.5px solid var(--lijn);
}
body.site-publiek .btn.licht:hover{background:var(--sky); border-color:var(--sky); color:var(--navy);}
body.site-publiek .kicker{
  background:var(--sky);
  color:var(--navy);
  letter-spacing:.08em;
}
body.site-publiek a:focus-visible,
body.site-publiek button:focus-visible,
body.site-publiek summary:focus-visible,
body.site-publiek input:focus-visible,
body.site-publiek select:focus-visible{
  outline-color:var(--accent);
}
body.site-publiek .logo-gestapeld{
  position:relative;
  display:block;
  width:138px;
  aspect-ratio:1.5;
  overflow:hidden;
  line-height:0;
}
body.site-publiek .logo-gestapeld img{
  position:absolute;
  inset:0 auto auto 0;
  display:block;
  width:200%;
  max-width:none;
  height:100%;
}
body.site-publiek .logo-footer-link{display:inline-block; line-height:0; margin-bottom:14px;}
body.site-publiek footer{
  background:#fff;
  color:var(--inkt);
  border-top:1px solid var(--lijn);
}
body.site-publiek footer a{color:var(--navy);}
body.site-publiek footer h4{color:var(--navy);}
body.site-publiek .voet-onder{border-top-color:var(--lijn); color:var(--gedempt);}
body.site-publiek .voet-onder a{color:var(--navy);}
body.site-publiek .stap .nr{background:var(--accent);}
body.site-publiek #vragen{background:linear-gradient(180deg,#fff 0%,#F7FAFC 100%);}
body.site-publiek .faq-kop{margin-bottom:32px;}
body.site-publiek .faq-kop .kicker{margin-bottom:12px;}
body.site-publiek .faq-kop h2{margin-bottom:10px;}
body.site-publiek .faq-kop p{margin:0;}
body.site-publiek .eindcta{background:linear-gradient(135deg,#F2FAFE 0%,#E8F5FC 100%); border:1px solid #E0EFF7; border-radius:14px; padding:42px 30px 30px; text-align:center;}
body.site-publiek .eindcta h2{max-width:800px; margin:0 auto 20px; font-size:clamp(30px,3.7vw,44px); line-height:1.05;}
body.site-publiek .eindcta .btn{padding:15px 30px; font-size:17px;}
body.site-publiek .cta-kenmerken{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); align-items:center; max-width:850px; margin:24px auto 0; gap:20px; color:var(--navy); font-size:15px;}
body.site-publiek .cta-kenmerken span{display:flex; align-items:center; justify-content:center; gap:10px;}
body.site-publiek .cta-kenmerken svg{width:30px; height:30px; flex:none; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round;}
@media(max-width:600px){body.site-publiek .cta-kenmerken{grid-template-columns:1fr; gap:12px;} body.site-publiek .cta-regel{display:none;}}

@media(max-width:900px){
  body.site-publiek nav.hoofdmenu .wrap{height:90px; position:relative;}
  body.site-publiek.site-header-compact nav.hoofdmenu .wrap{height:72px;}
  body.site-publiek .menu-toggle{display:flex;}
  body.site-publiek .menu{display:none; position:absolute; top:calc(100% - 1px); left:16px; right:16px; z-index:101; padding:12px; border:1px solid var(--lijn); border-radius:0 0 14px 14px; background:#fff; box-shadow:0 14px 28px rgba(16,36,58,.14); flex-direction:column; align-items:stretch; gap:0; font-size:15px;}
  body.site-publiek .menu.is-open{display:flex;}
  body.site-publiek .menu a:not(.btn){display:block; padding:11px 12px; border-bottom:1px solid var(--lijn);}
  body.site-publiek .menu .btn{display:block; margin-top:10px; text-align:center;}
}

@media(max-width:600px){
  body.site-publiek .logo-header img{width:185px;}
  body.site-publiek.site-header-compact .logo-header img{width:142px;}
  body.site-publiek .logo-gestapeld{width:124px;}
}

@media(prefers-reduced-motion:reduce){
  body.site-publiek nav.hoofdmenu .wrap,
  body.site-publiek .logo-header img{transition:none;}
}