body {
  margin: 0;
  font-family: Inter, sans-serif;
  background: #fff;
  color: #222;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 0 16px;
}

img.logo {
  max-width: 160px;
  margin-bottom: 24px;
}

h1 {
  font-size: 2rem;
  margin: 0 0 8px;
  color: #8379b9; /* exact kleur uit logo */
}

.slogan-img {
  max-width: 420px;
  margin: 0 auto 32px;
  display: block;
}

.instagram-text {
  color: #cf99bf; /* roze, zoals slogan */
  font-weight: 600;
}

.instagram-text a{
  color: #cf99bf; /* roze, zoals slogan */
}

footer {
  font-size: 14px;
  color: #555;
  margin-top: 40px;
  line-height: 1.6;
}

a {
  color: #222;
  text-decoration: underline;
}

/* Responsive */
@media (max-width: 600px) {
  img.logo {
    max-width: 120px;
    margin-bottom: 16px;
  }
  h1 {
    font-size: 1.5rem;
  }
  .slogan-img {
    max-width: 260px;
    margin-bottom: 24px;
  }
  footer {
    font-size: 12px;
  }
}

/* Popup overlay */
.popup-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.popup-overlay.active {
  visibility: visible;
  opacity: 1;
}

.popup-box {
  background: #fff;
  color: #222;
  padding: 24px;
  border-radius: 12px;
  text-align: center;
  max-width: 320px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.25);
}

.popup-buttons {
  margin-top: 16px;
  display: flex;
  justify-content: space-around;
  gap: 12px;
}

.popup-buttons button {
  flex: 1;
  padding: 10px;
  border: none;
  border-radius: 6px;
  font-weight: 600;
  cursor: pointer;
}

#ageYes {
  background: #6a3c74; /* paars van logo */
  color: #fff;
}

#ageNo {
  background: #cf99bf; /* roze van slogan */
  color: #fff;
}

.nix18-logo {
  position: fixed;
  right: 16px;
  bottom: 16px;
  width: 200px;
  max-width: 40%;
  height: auto;
  z-index: 1000;
}

.nix18-popup {
  width: 200px;
  height: auto;
}

:root{
  --brand:#cf99bf;        /* Jen roze */
  --brand-deep:#6a3c74;   /* Jen paars */
  --surface:#ffffff;
  --text:#1f1f1f;
  --overlay:rgba(0,0,0,.55);
  --radius:18px;
  --shadow:0 20px 50px rgba(0,0,0,.18);
}

/* Basis reset voor het menu */
.menu-toggle{ position:absolute; opacity:0; pointer-events:none; }

/* Hamburger */
.hamburger{
  position:fixed; top:18px; left:18px; z-index:10010;
  width:36px; height:28px; display:inline-grid; align-content:space-between;
  cursor:pointer; padding:4px;
}
.hamburger span{
  display:block; height:3px; background:var(--brand-deep); border-radius:2px;
  transform-origin:left center; transition:.25s ease;
}

/* Overlay (klik om te sluiten) */
.menu-overlay{
  position:fixed; inset:0; background:var(--overlay);
  opacity:0; visibility:hidden; transition:.25s ease; z-index:10000;
}

/* Panel */
.menu-panel{
  position:fixed; top:12px; left:12px; bottom:12px; width:min(86vw, 420px);
  background:var(--surface); color:var(--text);
  border-radius:var(--radius); box-shadow:var(--shadow);
  transform:translateX(calc(-100% - 12px)); transition:transform .3s ease;
  z-index:10020; padding:12px 0;
}

/* Close knop (X) */
.close-btn{
  position:absolute; top:6px; left:10px; background:none; border:none; padding:0; margin:0;
}
.close-x{
  display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:10px; font-size:28px;
  color:var(--brand-deep); cursor:pointer; user-select:none;
}

/* Inhoud */
.menu-content{ padding:16px 22px 22px; }
.menu-title{
  font-size:40px; line-height:1.05; margin:10px 0 18px;
  color:var(--brand-deep); font-weight:800;
}
.menu-list{ list-style:none; margin:0; padding:0; }
.menu-list li{ margin:18px 0; }
.menu-list a{
  color:var(--text); text-decoration:none; font-weight:700; font-size:20px;
}
.menu-list a:hover{ color:var(--brand-deep); text-decoration:underline; }

/* Toggle open states */
#menuToggle:checked ~ .menu-overlay{ opacity:1; visibility:visible; }
#menuToggle:checked ~ .menu-panel{ transform:translateX(0); }

/* Hamburger animatie naar kruis */
#menuToggle:checked ~ .hamburger span:nth-child(1){ transform:rotate(42deg); }
#menuToggle:checked ~ .hamburger span:nth-child(2){ transform:scaleX(0); opacity:0; }
#menuToggle:checked ~ .hamburger span:nth-child(3){ transform:rotate(-42deg); }

/* Toegankelijkheid hint (visueel verbergen maar leesbaar kan optioneel) */
.hamburger:focus-visible, .close-x:focus-visible{
  outline:3px solid var(--brand);
  outline-offset:2px;
}

/* Mobiel fine-tuning */
@media (max-width: 480px){
  .menu-title{ font-size:36px; }
  .menu-list a{ font-size:18px; }
}

.contact-section {
  max-width: 600px;
  margin: 60px auto;
  padding: 20px;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 12px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.08);
}

.contact-section h2 {
  text-align: center;
  margin-bottom: 24px;
  font-size: 28px;
  color: #6a3c74; /* paars uit logo */
}

.contact-form div {
  margin-bottom: 18px;
}

.contact-form label {
  font-weight: 600;
  color: #6a3c74;
  display: inline-block;
  margin-bottom: 6px;
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 12px 14px;
  border-radius: 8px;
  border: 1px solid #ccc;
  font-size: 15px;
  font-family: inherit;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.contact-form input:focus,
.contact-form textarea:focus {
  border-color: #cf99bf; /* roze */
  box-shadow: 0 0 0 3px rgba(207,153,191,0.35);
  outline: none;
}

.contact-form button {
  display: inline-block;
  padding: 12px 20px;
  background: linear-gradient(90deg, #6a3c74, #cf99bf);
  color: #fff;
  font-weight: 700;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.2s ease;
}

.contact-form button:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0,0,0,0.15);
}

/* ---- Ons verhaal ---- */
:root{
  --brand:#cf99bf;            /* roze */
  --brand-deep:#6a3c74;       /* paars */
  --ink:#222;                 /* tekst */
  --muted:#666;
  --card:#fff;
  --ring: rgba(207,153,191,.35);
  --shadow:0 12px 30px rgba(0,0,0,.08);
  --radius:14px;
}

.story-hero{
  text-align:center;
  padding: 48px 16px 8px;
}
.story-logo{
  width: 84px; height:auto; margin-bottom: 10px;
}
/* Titel */
.story-title {
  font-size: clamp(24px, 5vw, 38px);
  margin-bottom: 24px;
  color: #6a3c74; /* paars uit logo */
}

/* Afbeeldingen binnen story-card */
.story-card .img-taste {
  display: block;
  width: 100%;           /* schaal naar de breedte van story-card */
  height: auto;          /* behoud verhouding */
  max-width: 600px;      /* voorkom dat ze te groot worden */
  max-height: 60px;
  margin: 0 auto 24px;   /* centreren + ruimte tussen items */
  object-fit: contain;   /* voorkomt uitrekken */
}

/* Responsief gedrag op kleine schermen */
@media (max-width: 600px) {
  .story-card {
    padding: 16px 18px;
  }

  .story-card .img-taste {
    max-width: 100%;     /* gebruik volledige breedte van kaart */
    margin-bottom: 16px;
  }

  .story-title {
    font-size: 24px;
  }
}
.story-kicker{
  margin: 6px 0 28px;
  color: var(--muted);
  font-weight: 600;
}

.story-section {
  display: flex;
  justify-content: center;
  padding: 40px 16px;
}
.story-card {
  width: 100%;
  max-width: 800px;              /* houdt alles binnen een prettig formaat */
  background: #fff;
  border-radius: 14px;
  border: 1px solid #eee;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  padding: 24px 28px;
  text-align: center;
}
.story-card p{ margin: 0 0 16px; }
.story-card strong{ color: var(--brand-deep); }

.story-footer{
  text-align:center;
  color:#555;
  font-size: 14px;
  padding: 28px 16px 40px;
}
.story-footer a{ color: var(--ink); }

/* Optioneel: subtiele linkstijl binnen tekst */
.story-card a{
  color: var(--brand-deep);
  text-decoration: underline;
}
.story-card a:hover{ color: var(--brand); }

/* Mobile tuning */
@media (max-width:600px){
  .story-card{ padding: 18px; }
}

/* Afbeelding-menu binnen het zijpaneel */
.img-menu { 
  list-style: none; 
  margin: 0; 
  padding: 6px 0 0; 
  max-height: calc(100vh - 160px); 
  overflow: auto;                   /* scrollbaar bij lange lijsten */
}

/* Items: netjes stapelen, animatie bij openen */
.img-menu li {
  margin: 10px 0;
  opacity: 0; 
  transform: translateY(8px);
  transition: opacity .28s ease, transform .28s ease;
}

/* Afbeeldingen: responsive schalen, scherpe randen uit */
.img-menu img {
  display: block;
  width: min(82vw, 380px);          /* schaal op viewport, cap op desktop */
  height: auto;
  user-select: none;
  -webkit-user-drag: none;
  image-rendering: auto;
}

/* Ruimte aan de randen van het paneel */
.menu-content { padding: 16px 22px 22px; }

/* Menu zichtbaar: items faden in (stagger effect) */
#menuToggle:checked ~ .menu-panel .img-menu li { 
  opacity: 1; 
  transform: translateY(0);
}
#menuToggle:checked ~ .menu-panel .img-menu li:nth-child(1){ transition-delay: .05s; }
#menuToggle:checked ~ .menu-panel .img-menu li:nth-child(2){ transition-delay: .10s; }
#menuToggle:checked ~ .menu-panel .img-menu li:nth-child(3){ transition-delay: .15s; }
#menuToggle:checked ~ .menu-panel .img-menu li:nth-child(4){ transition-delay: .20s; }

/* Donkere modus / paneel zelf heb je al; extra afronding optioneel */
.menu-panel { border-radius: 18px; }

/* Kleine schermen: iets breder beeldmerk toestaan */
@media (max-width: 480px){
  .img-menu img { width: min(86vw, 360px); }
}

/* FAQ opmaak binnen story-card */
.faq-item {
  text-align: left;
  margin-bottom: 24px;
}

.faq-item h3 {
  font-size: 20px;
  color: #6a3c74; /* paars van logo */
  margin-bottom: 6px;
  font-weight: 700;
}

.faq-item p,
.faq-item ul {
  font-size: 16px;
  line-height: 1.7;
  color: #333;
  margin: 0 0 12px;
}

.faq-item ul {
  list-style-type: disc;
  padding-left: 24px;
}

.faq-item a {
  color: #cf99bf;
  font-weight: 600;
  text-decoration: underline;
}
.faq-item a:hover {
  color: #6a3c74;
}