/* =========================================================
   FONTS
   ========================================================= */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap');

@font-face {
  font-family: "Adventures Unlimited Script";
  src: url("fonts/aduscript-rg.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* =========================================================
   VARS 
   ========================================================= */
:root{
  --poppins-size: 16px;
  --poppins-line: 1.45;
  --poppins-weight: 400;

  --btn-pad-y: 12px;
  --btn-pad-x: 16px;

  --sep: 14px; /* witte balk */

  /* Pakketten-card typografie */
  --pkg-title-size: 60px;
  --pkg-sub-size: 12px;
  --pkg-item-size: 16px;
  --pkg-price-size: 20px;
  --pkg-card-minh: 420px;

  /* HOME blok 5 mini-cards */
  --homepkgmini-title: 56px;
  --homepkgmini-sub: 12px;

  /* HOME blok 5 titel (GS) */
  --homeb5-gx-p: 0px; --homeb5-gy-p: 10px; --homeb5-sx-p: 0px; --homeb5-sy-p: -15px;

  /* HOME blok 1 */
  --homeb1-gx-p: -10px; --homeb1-gy-p: 0px; --homeb1-sx-p: 5px; --homeb1-sy-p: -25px;

  /* OVER */
  --overb2-gx-p: -15px; --overb2-gy-p: 10px; --overb2-sx-p: 15px; --overb2-sy-p: -15px;
  --overb5-gx-p: -3px; --overb5-gy-p: 15px; --overb5-sx-p: 0px; --overb5-sy-p: -20px;

  /* PAKKETTEN */
  --pakkb2-gx-p: 0px; --pakkb2-gy-p: 5px; --pakkb2-sx-p: 0px; --pakkb2-sy-p: -15px;

  /* CONTACT blok 1 GS */
  --contactb1-gx-p: -25px; --contactb1-gy-p: 12px; --contactb1-sx-p: 18px; --contactb1-sy-p: -12px;
}

@media (orientation: landscape){
  :root{
    --poppins-size: 26px;
    --poppins-line: 1.5;
    --poppins-weight: 400;

    --btn-pad-y: 16px;
    --btn-pad-x: 24px;

    --homepkgmini-title: 64px;
    --homepkgmini-sub: 12px;

    --homeb1-gx-l: -20px; --homeb1-gy-l: 0px; --homeb1-sx-l: 15px; --homeb1-sy-l: -55px;
    --homeb5-gx-l: 0px; --homeb5-gy-l: 20px; --homeb5-sx-l: 0px; --homeb5-sy-l: -25px;

    --overb2-gx-l: -35px; --overb2-gy-l: 25px; --overb2-sx-l: 35px; --overb2-sy-l: -30px;
    --overb5-gx-l: 0px; --overb5-gy-l: 50px; --overb5-sx-l: 0px; --overb5-sy-l: -25px;

    --pakkb2-gx-l: 0px; --pakkb2-gy-l: 20px; --pakkb2-sx-l: 0px; --pakkb2-sy-l: -25px;

    --contactb1-gx-l: -100px; --contactb1-gy-l: 30px; --contactb1-sx-l: 50px; --contactb1-sy-l: -25px;
  }
}

/* =========================================================
   RESET / BASIS
   ========================================================= */
*, *::before, *::after{ box-sizing: border-box; }

html, body{ height: 100%; }

body{
  margin: 0;
  font-family: "Poppins", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: var(--poppins-size);
  line-height: var(--poppins-line);
  font-weight: var(--poppins-weight);
  background: #ffffff;
}

a{ color: inherit; text-decoration: none; }
img{ max-width: 100%; display: block; }
h1,h2,h3,h4,h5,h6{ margin: 0; font-weight: 400; }

/* =========================================================
   CONTAINERS
   ========================================================= */
.site-container{ width: 100%; }
.header-container{ width: 100%; }
.footer-container{ width: 100%; }

/* =========================================================
   BUTTON BASIS
   ========================================================= */
.btn{
  font-family: inherit;
  font-size: var(--poppins-size);
  font-weight: var(--poppins-weight);
  line-height: 1;
  padding: var(--btn-pad-y) var(--btn-pad-x);
  border-radius: 999px;
  border: none;
  cursor: pointer;
  display: inline-block;
  text-align: center;
  transition: background-color 0.25s ease, color 0.25s ease, transform 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}

/* =========================================================
   HEADER + MENU
   ========================================================= */
.site-header{
  width: 100%;
  position: sticky;
  top: 0;
  z-index: 5002;
  background: rgba(249, 246, 242, 0.85);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 0;
}

.header-inner{
  display: grid;
  grid-template-columns: 48px 1fr 48px;
  align-items: center;
  padding: 10px 14px;
}

.header-logo{
  justify-self: center;
  display: inline-flex;
  align-items: center;
  padding: 6px 8px;
}
.header-logo img{ height: 60px; width: auto; }

.header-spacer{ width: 48px; height: 48px; }

.sr-only{
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

.menu-btn{
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 0;
  background: transparent;   /* ✅ geen kader/tegel meer */
  cursor: pointer;
  display: grid;
  place-items: center;
}
.menu-btn__bar{
  display: block;
  width: 22px;
  height: 2px;
  background: #3b1e0f;
  margin: 4px 0;
  border-radius: 2px;
}

.menu-btn:focus-visible{
  outline: 2px solid #d12b5b;
  outline-offset: 4px;
}

.main-nav{
  position: fixed;
  top: 0;
  left: 0;
  width: min(320px, 86vw);
  height: 100vh;

  background: rgba(249, 246, 242, 0.7);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);

  padding: 16px 14px;
  border-right: 1px solid rgba(59, 30, 15, 0.15);
  box-shadow: 0 12px 40px rgba(0,0,0,0.18);

  display: flex;
  flex-direction: column;
  gap: 10px;

  /* ✨ animatie basis */
  transform: translateX(-105%) scale(0.98);
  opacity: 0;
  transition:
    transform 320ms cubic-bezier(.2,.9,.2,1),
    opacity 220ms ease;
  will-change: transform, opacity;

  z-index: 5001;
}

@media (orientation: portrait){
  .main-nav{
    padding-top: 104px; /* ⬅️ duwt de knoppen onder de header vandaan */
  }
}

@media (orientation: landscape){
  .main-nav{
    padding-top: 104px; /* iets meer ruimte in landscape */
  }
}

.main-nav.open{
  transform: translateX(0) scale(1);
  opacity: 1;
}

.menu-backdrop{
  position: fixed;
  inset: 0;
  background: rgba(59, 30, 15, 0.25);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms ease;
  z-index: 5000;
}
.menu-backdrop.open{
  opacity: 1;
  pointer-events: auto;
}

body.menu-open{ overflow: hidden; }

.navitem{
  font-weight: 600;
  color: #3b1e0f;
  background: #f9f6f2;  /* ✅ solid, geen glas */
  border-radius: 999px;
  padding: 12px 14px;
  text-align: center;
  transition: background-color 0.25s ease, color 0.25s ease, transform 0.2s ease;
}
.navitem:hover{
  background-color: #3b1e0f;
  color: #f9f6f2;
  transform: translateY(-1px);
}
.navitem:active{ transform: translateY(0); }
.navitem:focus-visible{
  outline: 2px solid #d12b5b;
  outline-offset: 4px;
}

/* =========================================================
   PAGES & BLOKKEN
   ========================================================= */
main{ min-height: calc(100vh - 56px - 56px); }

.page{ display: none; }
.page.active{ display: block; }

.blocks{ display: flex; flex-direction: column; }

.block{ padding: 18px 16px; }
.blocks > * + *{ border-top: var(--sep) solid #ffffff; }

.block-media{ padding: 0 !important; }
.block-media__img{ width: 100%; height: auto; display: block; }

/* =========================================================
   LANDSCAPE CONTAINER WIDTH (1240)
   ========================================================= */
@media (orientation: landscape){
  .site-container{
    max-width: 1240px;
    margin: 0 auto;
    background: #ffffff;
  }
  .header-container,
  .footer-container{
    max-width: 1240px;
    margin: 0 auto;
  }
  .block{ padding: 20px 18px; }
}

/* =========================================================
   GEORGIA + SCRIPT SYSTEM
   ========================================================= */
.gs{
  --gx: 0px; --gy: 0px; --sx: 0px; --sy: 0px;
  width: fit-content;
  margin: 0 auto;
}
.gs__g{
  font-family: Georgia, "Times New Roman", serif;
  color: #3b1e0f;
  font-weight: 400;
  line-height: 1.05;
  transform: translate(var(--gx), var(--gy));
}
.gs__s{
  font-family: "Adventures Unlimited Script", cursive;
  font-weight: 400;
  line-height: 0.85;
  text-align: right;
  transform: translate(var(--sx), var(--sy));
}

/* =========================================================
   ANIMATIES
   ========================================================= */
@keyframes fadeUpSoft{
  from{ opacity: 0; transform: translateY(8px); }
  to{ opacity: 1; transform: translateY(0); }
}


/* =========================================================
   HOME — BLOK 1
   ========================================================= */
#home-b1{ padding: 0; }
.home-hero__img{ width: 100%; height: auto; object-fit: contain; }

.home-hero__panel{
  background: #ecafbf;
  padding: 22px 16px 26px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

#home-b1 .gs{
  --gx: var(--homeb1-gx-p);
  --gy: var(--homeb1-gy-p);
  --sx: var(--homeb1-sx-p);
  --sy: var(--homeb1-sy-p);
}
#home-b1 .gs__g{ font-size: 28px; }
#home-b1 .gs__s{ font-size: 96px; color: #f9f6f2; margin-top: -6px; }

@media (orientation: landscape){
  #home-b1 .gs{
    --gx: var(--homeb1-gx-l);
    --gy: var(--homeb1-gy-l);
    --sx: var(--homeb1-sx-l);
    --sy: var(--homeb1-sy-l);
  }
  #home-b1 .gs__g{ font-size: 56px; }
  #home-b1 .gs__s{ font-size: 192px; line-height: 0.9; }
}

.homeb1_btn{ background: #f9f6f2; color: #3b1e0f; }
.homeb1_btn:hover{ background: #d12b5b; color: #f9f6f2; transform: translateY(-2px); }
.homeb1_btn:active{ transform: translateY(0); }
.homeb1_btn:focus-visible{ outline: 2px solid #d12b5b; outline-offset: 4px; }

/* =========================================================
   HOME — RIJ BLOK 2/3
   ========================================================= */
.home-row-23{ display: flex; flex-direction: column; }

/* ✅ PORTRAIT: wél witte balk tussen b2 en b3 */
@media (orientation: portrait){
  .home-row-23 > .block + .block{
    border-top: var(--sep) solid #ffffff !important;
  }
}

@media (orientation: landscape){
  .home-row-23{ flex-direction: row; }
  .home-row-23 > .block{ flex: 1; }
  /* geen witte balk tussen 2 en 3 in landscape */
  .home-row-23 > .block + .block{ border-top: 0 !important; }
}

#home-b2{ padding: 0; }
.home-b2__img{ width: 100%; height: auto; display: block; }

#home-b3{
  background: #dde7ff;
  padding: 28px 22px;
  display: flex;
  justify-content: center;
  align-items: stretch;
}
.home-b3__inner{
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.home-b3__text{ margin: 0 auto; max-width: 42ch; color: #3b1e0f; }

.homeb3_btn{ margin-top: 18px; background: #f9f6f2; color: #3b1e0f; }
.homeb3_btn:hover{ background: #ecafbf; color: #f9f6f2; transform: translateY(-2px); }
.homeb3_btn:active{ transform: translateY(0); }
.homeb3_btn:focus-visible{ outline: 2px solid #ecafbf; outline-offset: 4px; }

/* =========================================================
   HOME — BLOK 4
   ========================================================= */
#home-b4{ position: relative; padding: 0; }
.home-b4__media img{ width: 100%; height: auto; display: block; }

.home-b4__overlay{
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
}

.home-b4__content{
  --b4-gx: 0px;
  --b4-gy: 15px;
  --b4-sx: 0px;
  --b4-sy: -15px;

  opacity: 0;
  background: #f9f6f2;
  padding: 32px 28px;
  text-align: center;
  max-width: 360px;
  width: 100%;
  border-radius: 32px;
}

.home-b4__content.is-visible{ animation: fadeUpSoft 0.9s ease-out forwards; }

.home-b4__title{
  font-family: Georgia, "Times New Roman", serif;
  color: #3b1e0f;
  font-size: 22px;
  font-weight: 400;
  margin: 0 0 6px 0;
  transform: translate(var(--b4-gx), var(--b4-gy));
  will-change: transform;
}

.home-b4__script{
  font-family: "Adventures Unlimited Script", cursive;
  color: #ecafbf;
  font-size: 56px;
  line-height: 0.9;
  margin: 0 0 14px 0;
  transform: translate(var(--b4-sx), var(--b4-sy));
  padding-left: 12px;
  will-change: transform;
}

.home-b4__content.is-visible .home-b4__title{
  animation: none;
}
.home-b4__content.is-visible .home-b4__script{
  animation: none;
}

.home-b4__list{ color: #d12b5b; margin: 0; }
.home-b4__list--landscape{ display: none; }

@media (orientation: landscape){
  .home-b4__list--portrait{ display: none; }
  .home-b4__list--landscape{ display: block; }

  .home-b4__content{
    max-width: 1000px;
    padding: 44px 56px;
    --b4-gx: 0px;
    --b4-gy: 25px;
    --b4-sx: 0px;
    --b4-sy: -25px;
  } 
  .home-b4__title{ font-size: 44px; }
  .home-b4__script{ font-size: 110px; padding-left: 20px; }
}

/* =========================================================
   HOME — BLOK 5 (mini pakketten)
   ========================================================= */
#home-b5{
  background: #ecafbf; /* lichtroze */
  padding: 26px 16px;
  position: relative;
}

/* titel bovenaan */
.home-b5__title{
  margin: 0 auto 10px auto;
  text-align: center;
}
#home-b5 .gs{
  --gx: var(--homeb5-gx-p);
  --gy: var(--homeb5-gy-p);
  --sx: var(--homeb5-sx-p);
  --sy: var(--homeb5-sy-p);
}
#home-b5 .gs__g{ font-size: 28px; color:#3b1e0f; }
#home-b5 .gs__s{ font-size: 96px; color:#f9f6f2; margin-top:-6px; } /* ✅ creme */

@media (orientation: landscape){
  #home-b5 .gs{
    --gx: var(--homeb5-gx-l);
    --gy: var(--homeb5-gy-l);
    --sx: var(--homeb5-sx-l);
    --sy: var(--homeb5-sy-l);
  }
  #home-b5 .gs__g{ font-size: 56px; }
  #home-b5 .gs__s{ font-size: 140px; line-height:0.9; }
}

.home-pkgs{ position: relative; width: 100%; }

.home-pkgs__track{
  display: flex;
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;

  padding: 14px 0;
  scroll-padding-inline: 50%;
}
.home-pkgs__track::-webkit-scrollbar{ display: none; }
.home-pkgs__track{ scrollbar-width: none; }

.home-pkgs__track::before,
.home-pkgs__track::after{
  content:"";
  flex: 0 0 11%;
}

.home-pkgs__slide{
  scroll-snap-align: center;
  flex: 0 0 78%;
  max-width: 420px;
}

.home-pkgmini{
  background: #f9f6f2;         /* crème */
  border-radius: 28px;
  padding: 20px 18px 18px;
  color: #ecafbf;              /* ✅ altijd lichtroze tekst */
  min-height: 300px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.home-pkgmini__title{
  font-family: "Adventures Unlimited Script", cursive;
  font-size: var(--homepkgmini-title);
  line-height: 1;
  font-weight: 400;
  margin: 0 0 6px 0;
}
.home-pkgmini__sub{
  font-size: var(--homepkgmini-sub);
  margin: 0 0 18px 0;
}

.home-pkgmini__btn{
  background: #ecafbf; /* lichtroze */
  color: #f9f6f2;      /* creme tekst */
  margin-top: 18px;    /* ✅ knoppen wat lager */
}
.home-pkgmini__btn:hover{
  background: #d12b5b;
  color: #f9f6f2;
  transform: translateY(-2px);
}
.home-pkgmini__btn:active{ transform: translateY(0); }
.home-pkgmini__btn:focus-visible{ outline: 2px solid #3b1e0f; outline-offset: 4px; }

/* portrait: subtiel actief + tilt (alleen portrait) */
@media (orientation: portrait){
  .home-pkgs__track{
    perspective: 900px;
    perspective-origin: 50% 50%;
  }
  .home-pkgs__slide{
    transition: transform 220ms ease, opacity 220ms ease;
    opacity: 0.82;
    transform: scale(0.97);
  }
  .home-pkgs__slide.is-left{
    transform: scale(0.95) rotateY(7deg);
    opacity: 0.72;
  }
  .home-pkgs__slide.is-right{
    transform: scale(0.95) rotateY(-7deg);
    opacity: 0.72;
  }
  .home-pkgs__slide.is-active{
    transform: scale(1.03) rotateY(0deg);
    opacity: 1;
  }
}

/* pijlen (portrait) — ✅ géén schaduw */
.home-pkgs__arrow{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 0;
  cursor: pointer;
  display: grid;
  place-items: center;
  background: rgba(249, 246, 242, 0.88);
  color: #3b1e0f;
  box-shadow: none; /* ✅ weg */
  z-index: 2;
}
.home-pkgs__arrow:hover{ background: #f9f6f2; transform: translateY(-50%) scale(1.03); }
.home-pkgs__arrow:active{ transform: translateY(-50%) scale(0.98); }
.home-pkgs__arrow:focus-visible{ outline: 2px solid #3b1e0f; outline-offset: 4px; }

.home-pkgs__arrow--prev{ left: 8px; }
.home-pkgs__arrow--next{ right: 8px; }

/* landscape: 4 naast elkaar, géén active effect */
@media (orientation: landscape){
  #home-b5{ padding: 26px 18px; }

  .home-pkgs__arrow{ display: none; }

  .home-pkgs__track{
    overflow: visible;
    scroll-snap-type: none;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(220px, 1fr));
    gap: 18px;
  }
  .home-pkgs__track::before,
  .home-pkgs__track::after{ display:none; }

  .home-pkgs__slide{
    flex: initial;
    max-width: none;
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .home-pkgmini{ min-height: 320px; }

  /* ✅ knop kleiner in landscape (1 regel) */
  .home-pkgmini__btn{
    font-size: 18px;
    padding: 12px 16px;
    white-space: nowrap;
  }
}

/* =========================================================
   HOME — BLOK 6 (afbeelding i.p.v. knop)
   ========================================================= */
#home-b6{ padding: 0; }

/* =========================================================
   OVER MIJ (ongewijzigd t.o.v. jouw basis)
   ========================================================= */
.over-row-12{ display: flex; flex-direction: column; }
.over-row-12 > .block + .block{ border-top: 0 !important; }

#over-b1{ padding: 0; }
.over-b1__img{ width: 100%; height: auto; display: block; }

#over-b2{ padding: 0; }
.over-hero__panel{
  background: #ecafbf;
  padding: 22px 16px 26px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

#over-b2 .gs{
  --gx: var(--overb2-gx-p);
  --gy: var(--overb2-gy-p);
  --sx: var(--overb2-sx-p);
  --sy: var(--overb2-sy-p);
}
#over-b2 .gs__g{ font-size: 28px; }
#over-b2 .gs__s{ font-size: 96px; color: #f9f6f2; margin-top: -6px; }

@media (orientation: landscape){
  .over-row-12{ flex-direction: row; align-items: stretch; }
  #over-b1{ flex: 1; }
  #over-b2{ flex: 1; display: flex; }
  .over-hero__panel{ flex: 1; justify-content: center; }

  #over-b2 .gs{
    --gx: var(--overb2-gx-l);
    --gy: var(--overb2-gy-l);
    --sx: var(--overb2-sx-l);
    --sy: var(--overb2-sy-l);
  }
  #over-b2 .gs__g{ font-size: 56px; }
  #over-b2 .gs__s{ font-size: 192px; line-height: 0.9; }
}

.overb2_btn{ background: #f9f6f2; color: #3b1e0f; }
.overb2_btn:hover{ background: #d12b5b; color: #f9f6f2; transform: translateY(-2px); }
.overb2_btn:active{ transform: translateY(0); }
.overb2_btn:focus-visible{ outline: 2px solid #d12b5b; outline-offset: 4px; }

#over-b3{ padding: 0; }

#over-b4{
  background: #dde7ff;
  color: #3b1e0f;
  padding: 100px 22px;

  display: flex;
  justify-content: center;   /* horizontaal centreren */
  align-items: center;       /* verticaal centreren */
  text-align: center;        /* tekst zelf centreren */
}

.over-b4__text{ margin: 0 auto; max-width: none; width: 100%; color: #3b1e0f; }
.over-b4__text--landscape{ display: none; }
@media (orientation: landscape){
  .over-b4__text--portrait{ display: none; }
  .over-b4__text--landscape{ display: block; }
}

#over-b5{ position: relative; padding: 0; }
.over-b5__media img{ width: 100%; height: auto; display: block; }

.over-b5__overlay{
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
}
.over-b5__content{
  opacity: 0;
  background: #f9f6f2;
  padding: 32px 28px;
  text-align: center;
  max-width: 360px;
  width: 100%;
  border-radius: 32px;
}
.over-b5__content.is-visible{ animation: fadeUpSoft 0.9s ease-out forwards; }

.over-b5__top{ margin-bottom: 10px; }
#over-b5 .gs{
  --gx: var(--overb5-gx-p);
  --gy: var(--overb5-gy-p);
  --sx: var(--overb5-sx-p);
  --sy: var(--overb5-sy-p);
}
#over-b5 .gs__g{ font-size: 28px; color: #3b1e0f; }
#over-b5 .gs__s{ font-size: 96px; color: #ecafbf; margin-top: -6px; }

@media (orientation: landscape){
  #over-b5 .gs{
    --gx: var(--overb5-gx-l);
    --gy: var(--overb5-gy-l);
    --sx: var(--overb5-sx-l);
    --sy: var(--overb5-sy-l);
  }
  #over-b5 .gs__g{ font-size: 56px; }
  #over-b5 .gs__s{ font-size: 192px; line-height: 0.9; }
  .over-b5__content{ max-width: 1000px; padding: 44px 56px; }
}

/* Basis (portrait) */
.over-b5__section-title{
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 400;
  color: #3b1e0f;
  font-size: 18px;          /* weer klein in portrait */
  margin: 14px 0 4px 0;
}

/* Alleen in landscape groter */
@media (orientation: landscape){
  .over-b5__section-title{
    font-size: 36px;        /* groot in landscape */
  }
}

.over-b5__section-text{ margin: 0; color: #d12b5b; }

@media (orientation: portrait){
  .over-b5__content{ text-align: left; }
  .over-b5__top{ text-align: center; }
}

#over-b6{
  background: #d12b5b;
  color: #f9f6f2;

  padding: 100px 22px;          /* ✅ veel ruimte boven & onder */
  display: flex;                /* ✅ centreren */
  justify-content: center;      /* horizontaal */
  align-items: center;          /* verticaal */
  text-align: center;           /* tekst netjes in het midden */
}

.over-b6__text{ margin: 0 auto; max-width: 52ch; }
.over-b6__text--portrait{ display: block; }
.over-b6__text--landscape{ display: none; }
@media (orientation: landscape){
  .over-b6__text--portrait{ display: none; }
  .over-b6__text--landscape{ display: block; }
}

#over-b7{ position: relative; padding: 0; }
.over-b7__media img{ width: 100%; height: auto; display: block; }
.over-b7__overlay{
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 20px;
}
.overb7_btn{ background: #f9f6f2; color: #3b1e0f; }
.overb7_btn:hover{ background: #d12b5b; color: #f9f6f2; transform: translateY(-2px); }
.overb7_btn:active{ transform: translateY(0); }
.overb7_btn:focus-visible{ outline: 2px solid #d12b5b; outline-offset: 4px; }

#over-b8{ padding: 0; }

/* =========================================================
   PAKKETTEN
   ========================================================= */
.pakketten-row-12{ display: flex; flex-direction: column; }
.pakketten-row-12 > .block + .block{ border-top: 0 !important; }

#pakketten-b1{ padding: 0; }

#pakketten-b2{
  padding: 0;
  background: #dde7ff;
  display: flex;
  align-items: stretch;
}
.pakketten-b2__inner{
  flex: 1;
  padding: 22px 16px 26px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

#pakketten-b2 .gs{
  --gx: var(--pakkb2-gx-p);
  --gy: var(--pakkb2-gy-p);
  --sx: var(--pakkb2-sx-p);
  --sy: var(--pakkb2-sy-p);
}
#pakketten-b2 .gs__g{ font-size: 28px; color: #3b1e0f; }
#pakketten-b2 .gs__s{
  font-size: 96px;
  color: #3b1e0f;
  margin-top: -6px;
}

@media (orientation: landscape){
  .pakketten-row-12{ flex-direction: row; align-items: stretch; }
  #pakketten-b2{ order: 1; flex: 1; }
  #pakketten-b1{ order: 2; flex: 1; }

  #pakketten-b2 .gs{
    --gx: var(--pakkb2-gx-l);
    --gy: var(--pakkb2-gy-l);
    --sx: var(--pakkb2-sx-l);
    --sy: var(--pakkb2-sy-l);
  }
  #pakketten-b2 .gs__g{ font-size: 56px; }
  #pakketten-b2 .gs__s{ font-size: 192px; line-height: 0.9; }
}

.pakkb2_btn{ background: #f9f6f2; color: #3b1e0f; }
.pakkb2_btn:hover{ background: #d12b5b; color: #f9f6f2; transform: translateY(-2px); }
.pakkb2_btn:active{ transform: translateY(0); }
.pakkb2_btn:focus-visible{ outline: 2px solid #d12b5b; outline-offset: 4px; }

#pakketten-b3{ padding: 0; }
#pakketten-b8{ padding: 0; }

/* cards */
.pakketten-row-47{ display: flex; flex-direction: column; }
.pakketten-row-47 > .block + .block{ border-top: 0 !important; }
@media (orientation: portrait){
  .pakketten-row-47 > .block + .block{
    border-top: var(--sep) solid #ffffff !important;
  }
}

@media (orientation: landscape){
  .pakketten-row-47{
    background: #ecafbf;
    padding: 26px 18px;
    display: grid;
    grid-template-columns: repeat(4, minmax(220px, 1fr));
    gap: 18px;
  }
  .pakketten-row-47 .pkg-block{
    background: transparent !important;
    padding: 0;
  }
}

.pkg-bg--lichtroze{ background: #ecafbf; }
.pkg-bg--oranje{ background: #fbd8c0; }
.pkg-bg--blauw{ background: #dde7ff; }
.pkg-bg--donkerroze{ background: #d12b5b; }

.pkg-block{
  display: flex;
  justify-content: center;
  align-items: stretch;   /* ✅ i.p.v. center: laat de card de hoogte pakken */
  padding: 26px 16px;
}

.pkg-card{
  width: 100%;
  max-width: 340px;
  background: #f9f6f2;
  border-radius: 28px;
  padding: 18px 18px 16px;
  color: #d12b5b;
  display: flex;
  flex-direction: column;
  min-height: var(--pkg-card-minh);
}

.pkg-title{
  font-family: "Adventures Unlimited Script", cursive;
  font-size: var(--pkg-title-size);
  line-height: 1;
  font-weight: 400;
  margin: 0 0 6px 0;
  text-align: center;
}

.pkg-sub{
  font-size: var(--pkg-sub-size);
  margin: 0 0 12px 0;
  text-align: center;
}

.pkg-list{
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: var(--pkg-item-size);
  line-height: 1.35;
}
.pkg-list li{
  position: relative;
  padding-left: 1.1em;
  margin: 0 0 10px 0;
}
.pkg-list li::before{
  content: "–";
  position: absolute;
  left: 0;
  top: 0;
}

.pkg-price{
  margin-top: auto;
  font-size: var(--pkg-price-size);
  text-align: center;
  padding-top: 10px;
}

/* =========================================================
   CONTACT
   ========================================================= */
#contact-b1{ padding: 0; }
.contact-b1__img{ width:100%; height:auto; display:block; }

.contact-b1__panel{
  background:#ecafbf;
  padding: 22px 16px 26px;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}
#contact-b1 .gs{
  --gx: var(--contactb1-gx-p);
  --gy: var(--contactb1-gy-p);
  --sx: var(--contactb1-sx-p);
  --sy: var(--contactb1-sy-p);
}
#contact-b1 .gs__g{ font-size: 28px; color:#3b1e0f; }
#contact-b1 .gs__s{ font-size: 96px; color:#f9f6f2; margin-top:-6px; } /* ✅ creme */

@media (orientation: landscape){
  #contact-b1 .gs{
    --gx: var(--contactb1-gx-l);
    --gy: var(--contactb1-gy-l);
    --sx: var(--contactb1-sx-l);
    --sy: var(--contactb1-sy-l);
  }
  #contact-b1 .gs__g{ font-size: 56px; }
  #contact-b1 .gs__s{ font-size: 192px; line-height:0.9; }
}

#contact-b2{ padding:0; }

#contact-b3,
#contact-b4{
  padding: 28px 22px;
}

/* blok 3 formulier (portrait default) */
#contact-b3{
  background:#fbd8c0; /* oranje */
  color:#3b1e0f;
}

.contact-form{
  max-width: 720px;
  margin: 0 auto;
  display:flex;
  flex-direction:column;
  gap: 14px;
}

.contact-form label{
  display:block;
  /* labels bevatten nu alleen het veld, dus geen Georgia nodig */
  margin: 0;
  font-family: inherit;
}

.contact-form input,
.contact-form textarea{
  width: 100%;
  padding: 14px 14px;
  border-radius: 16px;
  border: none;
  box-shadow: none;

  background: rgba(249,246,242,0.85);
  color:#3b1e0f;

  /* ✅ dit voorkomt terugvallen naar Georgia */
  font-family: "Poppins", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: inherit;
  line-height: inherit;
  font-weight: inherit;

  outline: none;
}

.contact-form textarea{
  min-height: 170px; /* ✅ groter */
  resize: vertical;
}

.contact-submit{
  align-self: center;
  background:#f9f6f2; /* creme */
  color:#3b1e0f;
  margin-top: 8px;
}
.contact-submit:hover{
  background:#d12b5b;
  color:#f9f6f2;
  transform: translateY(-2px);
}
.contact-submit:active{ transform: translateY(0); }
.contact-submit:focus-visible{ outline: 2px solid #3b1e0f; outline-offset: 4px; }

/* blok 4 info (portrait: blauw) */
#contact-b4{
  background:#dde7ff; /* blauw */
  color:#3b1e0f;
}

.contact-info{
  max-width: 720px;
  margin: 0 auto;
  display:flex;
  flex-direction:column;
  gap: 18px;
}

.contact-info__row{
  display:flex;
  flex-direction:column;
  gap: 4px;
}

.contact-info__k{
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 400;
  color:#3b1e0f;
}

.contact-info__v{
  font-family: "Poppins", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:#3b1e0f;
}

.contact-socials{
  display:flex;
  gap: 18px;
  align-items:center;
}

.contact-socials a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border: 0;          /* ✅ geen kaders */
  outline: none;
  padding: 0;
  border-radius: 0;
  background: transparent;
}
.contact-socials a:focus-visible{
  outline: 2px solid #3b1e0f;
  outline-offset: 4px;
}

.contact-socials img{
  width: 42px;
  height: 42px;
}

/* landscape: blok 4 links, blok 3 rechts — beide oranje */
@media (orientation: landscape){
  .contact-row-34{
    display:flex;
    gap: 0;
  }
  #contact-b4, #contact-b3{
    flex:1;
    background:#fbd8c0; /* ✅ beide oranje */
  }

  /* ✅ contact b4: verticaal centreren + meer ruimte tussen onderdelen */
  #contact-b4{
    display:flex;
    align-items:center;
  }
  .contact-info{
    gap: 34px;             /* ✅ meer ruimte */
  }
  .contact-socials{
    gap: 26px;
  }
  .contact-socials img{
    width: 52px;           /* ≈ 125% */
    height: 52px;
  }
}

#contact-b5{ padding:0; }
#contact-b6{ padding:0; }

/* =========================================================
   FOOTER
   ========================================================= */
.footer-links{
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.footer-links .footer-link{
  display: inline-block; /* of: block; allebei is prima */
}

.site-footer{
  width: 100%;
  background: #dde7ff;
  color: #3b1e0f;
  padding: 20px 16px 24px;
}

.footer-grid{
  display: flex;
  justify-content: space-between;
  gap: 22px;
  align-items: flex-start;
  flex-direction: row; /* ✅ portrait naast elkaar */
}

.footer-col{ flex: 1; min-width: 0; text-align: left; }
.footer-col--right{ text-align: right; }

.footer-title{
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 400;
  font-size: 18px; /* ✅ portrait iets groter */
  margin-bottom: 10px;
  color: #3b1e0f;
}

/* footer socials onder www */
.footer-socials{
  display: flex;
  gap: 10px;
  margin-top: 10px;
  align-items: center;
}

.footer-socials a{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  padding: 0;
  border-radius: 0;
}

.footer-socials a:focus-visible{
  outline: 2px solid #3b1e0f;
  outline-offset: 4px;
}

.footer-download{
  display: inline-block;
  margin-top: 10px;
  font-size: 14px;
  color: #3b1e0f;
}

.footer-download:hover{
  text-decoration: underline;
}

/* landscape iets groter */
@media (orientation: landscape){
  .footer-socials img{
    width: 42px;
    height: 42px;
  }
}

.footer-link:hover{ text-decoration: underline; }

.footer-mark{
  display: flex;
  justify-content: center;
  margin-top: 18px;
}
.footer-mark img{ height: 66px; width: auto; }

@media (max-width: 420px){
  /* ook op super smal nog naast elkaar, maar iets compacter */
  .footer-grid{ gap: 16px; }
}

@media (orientation: landscape){
  .site-footer{
    padding-top: 44px;  /* ✅ wat lager */
    padding-bottom: 34px;
  }
  .footer-container{
    max-width: 1240px; /* ✅ echt doortrekken */
    margin: 0 auto;
    padding: 0 34px;   /* ✅ naar midden toe */
  }
  .footer-title{
    font-size: 30px;   /* ✅ ~200% */
    margin-bottom: 14px;
  }
  .footer-mark img{ height: 200px; }
}

/* =========================================================
   REDUCED MOTION
   ========================================================= */
@media (prefers-reduced-motion: reduce){
  .home-b4__content,
  .over-b5__content{ opacity: 1; }
  .home-b4__content.is-visible,
  .over-b5__content.is-visible{ animation: none; transform: none; opacity: 1; }
  .home-b4__title,
  .home-b4__script{ animation: none !important; }
  .home-pkgs__track{ scroll-behavior: auto; }
}

@media (prefers-reduced-motion: reduce){
  .main-nav{
    transition: none;
  }
}

/* =========================================================
   CONTACT — BLOK 1 (afbeelding + lichtroze panel met GS)
   ========================================================= */
#contact-b1{ padding: 0; }
.contact-b1__img{ width: 100%; height: auto; display:block; }

.contact-b1__panel{
  background: #ecafbf;           /* lichtroze */
  padding: 22px 16px 26px;
  display:flex;
  justify-content:center;
  align-items:center;
  text-align:center;
}

#contact-b1 .gs__g{ font-size: 28px; color:#3b1e0f; }
#contact-b1 .gs__s{ font-size: 96px; color:#f9f6f2; margin-top:-6px; } /* script = creme */

/* =========================================================
   CONTACT — BLOK 3 (formulier) & BLOK 4 (info)
   portrait: onder elkaar
   landscape: naast elkaar (blok4 links, blok3 rechts) en beide oranje
   ========================================================= */
#contact-b3{
  background:#fbd8c0;   /* oranje */
  color:#3b1e0f;        /* bruin */
}

#contact-b4{
  background:#dde7ff;   /* blauw in portrait */
  color:#3b1e0f;
}

.contact-row-34{
  display:flex;
  flex-direction:column;
}

/* ===== Form styling ===== */
.contact-formwrap{ max-width: 560px; margin: 0 auto; width: 100%; }

.contact-msg{
  margin: 0 0 14px 0;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(249,246,242,0.65);
  color:#3b1e0f;
}

.contact-form{
  display:flex;
  flex-direction:column;
  gap: 12px;
}

.contact-field{ display:flex; flex-direction:column; gap: 6px; }
.contact-field__label{ font-weight: 600; color:#3b1e0f; }

.contact-input{
  border: none;
  box-shadow: none;
  width: 100%;
  border-radius: 16px;
  padding: 12px 12px;
  font: inherit;
  color:#3b1e0f;
  background: rgba(249,246,242,0.85);
  outline: none;
}

.contact-input:focus{
  outline: none;
  box-shadow: none;
}

.contact-textarea{
  min-height: 160px; /* Bericht groter */
  resize: vertical;
}

.contact-btn{
  margin-top: 6px;
  background: #f9f6f2;
  color: #3b1e0f;
  font-family: "Poppins", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

.contact-btn:hover{
  background: #d12b5b; /* donkerroze */
  color: #f9f6f2;      /* creme */
  transform: translateY(-2px);
}
.contact-btn:active{ transform: translateY(0); }
.contact-btn:focus-visible{ outline: 2px solid #3b1e0f; outline-offset: 4px; }

/* ===== Info blok (Georgia + Poppins wissel) ===== */
.contact-info{
  max-width: 560px;
  margin: 0 auto;
  display:flex;
  flex-direction:column;
  gap: 18px;
}

.contact-line{
  display:flex;
  flex-direction:column;
  gap: 6px;
}

.contact-label{
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 400;
  color:#3b1e0f;
}

.contact-value{
  font-family: "Poppins", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:#3b1e0f;
}

.contact-icons{
  display:flex;
  gap: 14px;
  margin-top: 10px;
  align-items:center;
}

.contact-iconlink{
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

.contact-icon{
  width: 44px;
  height: 44px;
  display:block;
}

/* =========================================================
   CONTACT — LANDSCAPE layout
   ========================================================= */
@media (orientation: landscape){
  #contact-b1 .gs__g{ font-size: 56px; }
  #contact-b1 .gs__s{ font-size: 192px; line-height:0.9; }

  .contact-row-34{
    flex-direction: row;
    align-items: stretch;
  }

  /* blok 4 links, blok 3 rechts */
  #contact-b4{ order: 1; flex: 1; background:#fbd8c0; } /* oranje in landscape */
  #contact-b3{ order: 2; flex: 1; }

  /* iets ruimer + verticaal centreren zoals je vroeg */
  #contact-b4{ display:flex; align-items:center; }
  .contact-info{
    width:100%;
    gap: 26px;             /* meer ruimte tussen de 3 onderdelen */
  }

  /* icons iets groter (125%) */
  .contact-icon{ width: 55px; height: 55px; }
}

@media (orientation: landscape){
  /* Zorg dat de grid echt 4 zichtbare kolommen maakt */
  .home-pkgs__track{
    align-items: stretch;
  }

  /* Maak elke slide een normaal grid-item dat breedte pakt */
  .home-pkgs__slide{
    width: 100%;
    max-width: none;
    min-width: 0;      /* belangrijk in grid/flex situaties */
  }

  /* Zorg dat het kaartje de kolom vult */
  .home-pkgmini{
    width: 100%;
    height: 100%;
  }
}

@media (orientation: landscape){
  .pakketten-row-47 .pkg-block{
    height: 100%;         /* ✅ grid-item vult de rijhoogte */
  }

  .pakketten-row-47 .pkg-card{
    height: 100%;         /* ✅ card wordt even hoog als de andere */
    max-width: none;      /* ✅ voorkomt “smalle card” die niet vult */
  }
}

/* labels weg (als er nog spans bestaan) */
.contact-field__label{ display:none; }

/* placeholder = Poppins + nette kleur */
.contact-input::placeholder{
  font-family: "Poppins", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: rgba(59,30,15,0.55);
}

/* iOS/Safari: placeholder opacity fix */
.contact-input::-webkit-input-placeholder{
  font-family: "Poppins", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: rgba(59,30,15,0.55);
  opacity: 1;
}