/* =========================================================
   Cuisine Céline — huisstijl
   Kleuren en fonts overgenomen van de bestaande site
   ========================================================= */

:root{
  /* Kleuren */
  --accent:        #e07961;   /* terracotta: knoppen, koppen, accentbanden */
  --accent-hover:  #c9634b;
  --accent-16:     #fae9e6;   /* accent 16% op wit — zachte roze secties */
  --accent-34:     #f4d1c9;   /* accent 34% op wit — footerband */
  --donker:        #4a4948;   /* donkergrijze band */
  --tekst:         #0d141a;
  --tekst-zacht:   #1d1e20;
  --wit:           #ffffff;

  /* Typografie */
  --font-basis:  "Libre Baskerville", Georgia, "Times New Roman", serif;
  --font-script: "Allura", "Brush Script MT", cursive;

  /* Maatvoering */
  --breedte:     1140px;
  --ruimte-xs:   .5rem;
  --ruimte-s:    1rem;
  --ruimte-m:    2rem;
  --ruimte-l:    4rem;
  --ruimte-xl:   6rem;
  --radius:      6px;
}

/* ---------- Basis ---------- */
*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  margin:0;
  font-family:var(--font-basis);
  font-size:16px;
  line-height:1.7;
  color:var(--tekst-zacht);
  background:var(--wit);
  -webkit-font-smoothing:antialiased;
}

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

a{ color:inherit; text-decoration:none; }
a:hover{ text-decoration:underline; }

.container{
  width:100%;
  max-width:var(--breedte);
  margin-inline:auto;
  padding-inline:var(--ruimte-s);
}

/* ---------- Koppen ---------- */
h1,h2,h3,h4{
  font-family:var(--font-basis);
  font-weight:400;
  line-height:1.25;
  margin:0 0 var(--ruimte-s);
  color:var(--accent);
}
h1{ font-size:clamp(2rem,4vw,3rem); }
h2{ font-size:clamp(1.5rem,2.6vw,2.125rem); }
h3{ font-size:clamp(1.25rem,2vw,1.625rem); }

/* Sierkop in schrijfletter, zoals "Over", "Mijn passie", "Contact" */
.sierkop{
  font-family:var(--font-script);
  font-size:clamp(3rem,6vw,4.5rem);
  line-height:1.05;
  color:var(--accent-34);
  margin:0 0 -.12em;
}

p{ margin:0 0 var(--ruimte-s); }

/* ---------- Knoppen ---------- */
.knop{
  display:inline-block;
  padding:.9em 2.2em;
  border-radius:999px;
  background:var(--accent);
  color:var(--wit);
  font-size:.875rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  border:0;
  cursor:pointer;
  transition:background .2s ease;
}
.knop:hover{ background:var(--accent-hover); text-decoration:none; }

.knop--licht{ background:var(--wit); color:var(--accent); }
.knop--licht:hover{ background:var(--accent-16); }

/* ---------- Kop van de site ---------- */
.site-kop{
  background:var(--wit);
  padding:var(--ruimte-s) 0;
  text-align:center;
  position:sticky;
  top:0;
  z-index:20;
}
.site-kop__logo img{ margin-inline:auto; width:min(200px,45vw); }

.hoofdmenu{
  display:flex;
  justify-content:center;
  gap:clamp(1rem,4vw,2.5rem);
  margin-top:var(--ruimte-xs);
  flex-wrap:wrap;
}
.hoofdmenu a{
  color:var(--tekst);
  padding:.25em 0;
}
.hoofdmenu a:hover,
.hoofdmenu a[aria-current="page"]{
  color:var(--accent);
  text-decoration:none;
  border-bottom:1px solid var(--accent);
}

/* ---------- Secties ---------- */
.sectie{ padding:var(--ruimte-xl) 0; }
.sectie--roze{ background:var(--accent-16); }
.sectie--accent{ background:var(--accent); color:var(--wit); }
.sectie--accent h1,.sectie--accent h2,.sectie--accent h3{ color:var(--wit); }
.sectie--donker{ background:var(--donker); color:var(--wit); }
.sectie--donker h2,.sectie--donker h3{ color:var(--accent); }

.sectie--smal{ max-width:820px; margin-inline:auto; text-align:center; }

/* Twee kolommen: tekst naast beeld */
.duo{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  gap:clamp(1.5rem,4vw,3.5rem);
  align-items:center;
}

/* Rij met drie beelden */
.beeldrij{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:var(--ruimte-s);
}
.beeldrij img{ width:100%; aspect-ratio:4/3; object-fit:cover; }

/* ---------- Hero ---------- */
.hero{
  position:relative;
  min-height:min(78vh,720px);
  display:grid;
  place-items:center;
  text-align:center;
  color:var(--wit);
  padding:var(--ruimte-xl) var(--ruimte-s);
  background:var(--donker) center/cover no-repeat;
}
.hero::after{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.18);
}
.hero > *{ position:relative; z-index:1; }
.hero h1{
  font-family:var(--font-script);
  font-weight:600;
  font-size:clamp(2.5rem,6vw,4.5rem);
  color:var(--wit);
  text-shadow:0 2px 12px rgba(0,0,0,.35);
}
.hero p{
  font-size:clamp(1.05rem,1.8vw,1.5rem);
  max-width:26ch;
  margin-inline:auto;
  text-shadow:0 2px 10px rgba(0,0,0,.35);
}

/* ---------- Contact ---------- */
.contact-raster{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:clamp(2rem,5vw,4rem);
}
.formulier label{ display:block; margin-bottom:var(--ruimte-s); }
.formulier input,
.formulier textarea{
  width:100%;
  margin-top:.35em;
  padding:.75em 1em;
  font:inherit;
  font-size:.95rem;
  color:var(--tekst);
  background:var(--wit);
  border:1px solid #d9d9d9;
  border-radius:var(--radius);
}
.formulier input:focus,
.formulier textarea:focus{
  outline:2px solid var(--accent);
  outline-offset:1px;
  border-color:var(--accent);
}
.formulier textarea{ min-height:8em; resize:vertical; }
.formulier .knop{ text-transform:none; letter-spacing:normal; font-size:1rem; }

.melding{
  padding:var(--ruimte-s);
  border-radius:var(--radius);
  margin-bottom:var(--ruimte-s);
}
.melding--ok{ background:var(--accent-16); color:var(--tekst); }
.melding--fout{ background:#fdecea; color:#8a2b1c; }

/* ---------- Voettekst ---------- */
.site-voet{
  background:var(--accent-34);
  color:var(--tekst);
  padding:var(--ruimte-m) 0;
  font-size:.9rem;
}
.site-voet__raster{
  display:flex;
  flex-wrap:wrap;
  gap:var(--ruimte-m);
  justify-content:space-between;
  align-items:center;
}
.label-logo{ width:70px; height:70px; }
.site-voet__label a:hover{ text-decoration:none; }
.site-voet strong{ display:block; margin-bottom:var(--ruimte-xs); }

/* ---------- Toegankelijkheid ---------- */
.skip{
  position:absolute;
  left:-9999px;
}
.skip:focus{
  left:var(--ruimte-s);
  top:var(--ruimte-s);
  z-index:99;
  background:var(--wit);
  padding:.5em 1em;
  border-radius:var(--radius);
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *{ transition:none !important; animation:none !important; }
}

/* =========================================================
   Keuzepagina (index) — twee velden naast elkaar
   ========================================================= */
.keuze-pagina{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  background:var(--accent-16);
}
.keuze-kop{
  text-align:center;
  padding:var(--ruimte-m) var(--ruimte-s) var(--ruimte-s);
}
.keuze-kop img{ margin-inline:auto; width:min(220px,50vw); }

.keuze-raster{
  flex:1;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:clamp(1rem,3vw,2.5rem);
  width:100%;
  max-width:var(--breedte);
  margin-inline:auto;
  padding:var(--ruimte-s) var(--ruimte-s) var(--ruimte-xl);
  align-content:center;
}

.keuze{
  display:block;
  background:var(--wit);
  border-radius:var(--radius);
  overflow:hidden;
  text-align:center;
  color:var(--tekst-zacht);
  box-shadow:0 2px 14px rgba(0,0,0,.06);
  transition:transform .25s ease, box-shadow .25s ease;
}
.keuze:hover,
.keuze:focus-visible{
  transform:translateY(-4px);
  box-shadow:0 10px 26px rgba(0,0,0,.12);
  text-decoration:none;
}
.keuze__beeld{
  width:100%;
  aspect-ratio:4/3;
  object-fit:cover;
  background:var(--accent-34);
}
.keuze__tekst{ padding:var(--ruimte-m) var(--ruimte-s); }
.keuze__titel{
  font-size:clamp(1.4rem,2.4vw,2rem);
  color:var(--accent);
  margin:0 0 var(--ruimte-xs);
}
.keuze__omschrijving{
  margin:0 auto;
  max-width:34ch;
  font-size:.95rem;
  line-height:1.6;
}
.keuze--binnenkort{ cursor:default; }
.keuze--binnenkort:hover{ transform:none; box-shadow:0 2px 14px rgba(0,0,0,.06); }
.keuze__label{
  display:inline-block;
  margin-top:var(--ruimte-s);
  padding:.35em 1em;
  border-radius:999px;
  background:var(--accent-16);
  color:var(--accent);
  font-size:.8rem;
  letter-spacing:.06em;
  text-transform:uppercase;
}

/* =========================================================
   Pagina-onderdelen
   ========================================================= */

/* Witte kaart over het roze blok, zoals in "Over" */
.kaart{
  background:var(--wit);
  padding:clamp(1.5rem,4vw,3rem);
}

/* Tekst met een opsomming van vinkjes / emoji */
.lijst{ list-style:none; margin:0 0 var(--ruimte-s); padding:0; }
.lijst li{ margin-bottom:var(--ruimte-s); }

/* Gecentreerde tekstband (terracotta of donker) */
.band{ text-align:center; }
/* Paginatitel in een band: klein genoeg om op één regel te passen */
.band h1{ font-size:clamp(1.35rem,2.45vw,2.15rem); line-height:1.3; }
.band p{ max-width:70ch; margin-inline:auto; }
.band .knop{ margin-top:var(--ruimte-s); }

/* Omlijnde knop voor op een gekleurde band */
.knop--lijn{
  background:transparent;
  border:1px solid currentColor;
  color:var(--wit);
  border-radius:0;
  text-transform:none;
  letter-spacing:normal;
  font-size:1rem;
  padding:.7em 1.6em;
}
.knop--lijn:hover{ background:rgba(255,255,255,.14); }

/* Ronde beelden (crew catering) */
.rondrij{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:clamp(1rem,3vw,2rem);
  max-width:760px;
  margin:var(--ruimte-l) auto 0;
}
.rondrij img{ width:100%; aspect-ratio:1; object-fit:cover; border-radius:50%; }

/* Vijf tekstkolommen (crew catering) */
.kolommen{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:clamp(1.5rem,3vw,2.5rem);
  margin-top:var(--ruimte-l);
}
.kolommen h3{
  text-transform:uppercase;
  font-size:1rem;
  letter-spacing:.04em;
  line-height:1.4;
}
.kolommen p{ font-size:.9rem; line-height:1.6; }

/* Kaartjes met beeld erboven (crew: voor welke evenementen) */
.kaartrij{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:clamp(1rem,3vw,2rem);
  margin-top:var(--ruimte-l);
  text-align:center;
}
.kaartrij img{ width:100%; aspect-ratio:3/2; object-fit:cover; }
.kaartrij h3{ color:var(--tekst); margin:var(--ruimte-s) 0 var(--ruimte-xs); font-size:1.15rem; }
.kaartrij p{ font-size:.9rem; }

/* Kaarten met foto als achtergrond (food delivery) */
.fotokaarten{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:var(--ruimte-s);
  margin-top:var(--ruimte-l);
  max-width:900px;
  margin-inline:auto;
}
@media (max-width:700px){ .fotokaarten{ grid-template-columns:1fr; } }
.fotokaart{
  position:relative;
  display:grid;
  place-items:center;
  text-align:center;
  min-height:230px;
  padding:var(--ruimte-m) var(--ruimte-s);
  background:var(--donker) center/cover no-repeat;
  color:var(--tekst);
  overflow:hidden;
}
.fotokaart::before{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(255,255,255,.72);
}
.fotokaart > *{ position:relative; }
.fotokaart h3{ color:var(--tekst); margin-bottom:var(--ruimte-xs); }
.fotokaart p{ margin:0; max-width:36ch; font-size:.92rem; }

/* Volle-breedte beeld */
.breedbeeld img{ width:100%; aspect-ratio:19/5; object-fit:cover; }

/* Diavoorstelling met twee beelden */
.dia{ position:relative; overflow:hidden; }
.dia__spoor{ display:flex; transition:transform .5s ease; }
.dia__spoor img{ min-width:100%; aspect-ratio:24/5; object-fit:cover; }
.dia__knop{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  border:0;
  border-radius:50%;
  background:rgba(255,255,255,.75);
  color:var(--tekst);
  font-size:1.25rem;
  line-height:1;
  cursor:pointer;
}
.dia__knop:hover{ background:var(--wit); }
.dia__knop--vorige{ left:var(--ruimte-s); }
.dia__knop--volgende{ right:var(--ruimte-s); }

/* Contactgegevens */
.gegevens{ margin-top:var(--ruimte-m); }
.gegevens p{ margin-bottom:var(--ruimte-xs); }
.gegevens strong{ display:inline-block; min-width:6.5em; }

/* Terug naar de keuzepagina */
.terugkeuze{ font-size:.85rem; }

@media (max-width:640px){
  .sectie{ padding:var(--ruimte-l) 0; }
  .hero{ min-height:60vh; }
}

/* Alleen voor schermlezers en zoekmachines */
.enkel-schermlezer{
  position:absolute;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
  border:0;
}

/* Genummerde stappen (event catering) */
.stappen{
  list-style:none;
  counter-reset:stap;
  margin:0 0 var(--ruimte-s);
  padding:0;
  display:grid;
  gap:var(--ruimte-s);
}
.stappen li{
  counter-increment:stap;
  display:flex;
  gap:var(--ruimte-s);
  align-items:baseline;
}
.stappen li::before{
  content:counter(stap);
  flex:0 0 1.6em;
  font-size:1.1rem;
  color:var(--accent);
}
.sectie--donker .stappen li::before{ color:var(--wit); }

/* Kaartje met de ligging */
.kaart iframe{
  display:block;
  width:100%;
  height:clamp(260px,38vw,400px);
  border:0;
}