/* =====================================================================
   Bouwersfeestje — design system (Bold Playful)
   =====================================================================
   Typografie:
     Display  → Fraunces (variable serif, optical sizing) — H1/H2 met opsz
     Body     → Inter (logo-font) — lopend, UI, formulieren
   Kleur:
     Primary  = paars (#7C3AED), donker (#5B21B6)
     Accent   = geel (#FBBF24)
     Donker   = #1A0B2E (deep purple-black) — hero, footer, statement-vlakken
     Cream    = #FFFCF5 — pagina-bg
     Paper    = #F4EFE8 — sectie-bg variant voor ritmiek
   Vorm:
     Buttons  = 8px radius, hard inset shadow, GEEN pill (was 999px)
     Cards    = 6px radius, subtiele border (geen drop-shadow)
   Variabele-namen (`--feest-red`, `--feest-blue`, `--feest-mint`) blijven
   ongewijzigd om de cascade in andere componenten te respecteren — alleen
   waarden zijn gemapt op de nieuwe huisstijl.
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

:root {
  --feest-yellow:       #FBBF24;
  --feest-yellow-soft:  #FEF3C7;  /* zacht geel voor backgrounds */
  --feest-yellow-dark:  #D97706;
  --feest-red:          #7C3AED;  /* primary (paars) */
  --feest-red-dark:     #6D28D9;
  --feest-red-soft:     #F5EDFF;  /* lavendel voor backgrounds */
  --feest-blue:         #5B21B6;  /* paars-donker voor footer */
  --feest-mint:         #D97706;
  --feest-bg:           #FFFCF5;  /* warme offwhite */
  --feest-paper:        #FAF7FF;  /* lichtere lavendel-tint voor sectie-ritme */
  --feest-ink:          #1A1530;  /* warm-paars-zwart, niet pure black */
  --feest-muted:        #6B6280;  /* warm-paars-grijs */
  --feest-line:         #EDE4F5;  /* zacht-paarse lijn */

  --feest-radius:       12px;       /* buttons/inputs — vriendelijk, niet hard */
  --feest-radius-card:  16px;       /* cards — wat luchtiger */
  --feest-radius-pill:  999px;      /* alleen voor micro-elementen (rating-tag) */

  --feest-shadow-btn:   0 4px 14px rgba(124,58,237,0.22);  /* paars-glow op CTA */
  --feest-shadow-card:  0 2px 12px rgba(124,58,237,0.06), 0 1px 3px rgba(26,21,48,0.04);

  --font-display: "Inter", -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-body:    "Inter", -apple-system, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  font-family: var(--font-body);
  font-size: 16px;
  font-feature-settings: "ss01", "ss02", "cv11";  /* Inter stylistische sets */
  color: var(--feest-ink);
  background: var(--feest-bg);
  line-height: 1.55;
}

a { color: var(--feest-red); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0 0 16px;
}
h3, h4 { font-weight: 700; line-height: 1.25; }

.feest-wrap { max-width: 1180px; margin: 0 auto; padding: 0 24px; }
.feest-wrap-narrow { max-width: 760px; margin: 0 auto; padding: 0 24px; }

/* ---------- Eyebrow — kleine boven-titel in caps (editorial pattern) ---------- */
.feest-eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--feest-muted);
  margin-bottom: 14px;
}

/* ---------- Topbar (paars-donker maar warm, editorial typografie) ---------- */
.feest-topbar {
  background: var(--feest-red);
  color: #F5EDFF;
  padding: 7px 0;
  font-size: 13px;
  letter-spacing: 0.01em;
}
.feest-topbar-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
}
.feest-topbar-l { justify-self: start; display: inline-flex; align-items: center; gap: 10px; }
.feest-topbar-m { justify-self: center; text-align: center; }
.feest-topbar-r { justify-self: end; }
.feest-topbar strong { color: #fff; font-weight: 700; }
.feest-stars { color: var(--feest-yellow); letter-spacing: 2px; font-size: 13px; }
.feest-topbar-tel {
  color: #fff !important; font-weight: 700; text-decoration: none;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}
.feest-topbar-tel:hover { color: var(--feest-yellow) !important; text-decoration: none; }
.feest-topbar-login {
  color: #fff !important; font-weight: 600; text-decoration: none;
  font-size: 13px; letter-spacing: 0.02em;
  margin-right: 14px; padding-right: 14px;
  border-right: 1px solid rgba(255,255,255,0.25);
}
.feest-topbar-login:hover { color: var(--feest-yellow) !important; text-decoration: none; }

/* ---------- Urgency-strip (seizoens-CTC, geen emoji, editorial caps) ---------- */
.feest-urgency {
  background: var(--feest-yellow);
  color: var(--feest-ink);
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 6px 0;
  border-bottom: 1px solid rgba(0,0,0,0.12);
}

/* ---------- Header ---------- */
.feest-header {
  background: #fff;
  border-bottom: 1px solid var(--feest-line);
  position: sticky; top: 0; z-index: 50;
}
.feest-header-inner {
  display: flex; align-items: center; gap: 24px; min-height: 84px;
}

.feest-logo { display: inline-flex; align-items: center; color: var(--feest-ink); }
.feest-logo:hover { text-decoration: none; }
.feest-logo-img { display: block; height: 64px; width: auto; }

.feest-nav { flex: 1; display: flex; gap: 4px; justify-content: center; align-items: center; }
.feest-nav > a, .feest-nav-trigger {
  color: var(--feest-ink); padding: 8px 14px; border-radius: 8px;
  font-size: 14px; font-weight: 600;
  background: none; border: 0; cursor: pointer; font-family: inherit;
  display: inline-flex; align-items: center; gap: 4px;
}
.feest-nav > a:hover, .feest-nav-trigger:hover { background: var(--feest-bg); text-decoration: none; }
.feest-nav > a.is-active, .feest-nav-dropdown.is-active > .feest-nav-trigger {
  background: var(--feest-yellow); color: var(--feest-ink);
}

/* ---------- Leeftijd-dropdown (mega-menu) ---------- */
.feest-nav-dropdown { position: relative; }
.feest-caret { font-size: 10px; transition: transform .15s; }
.feest-nav-dropdown.is-open .feest-caret { transform: rotate(180deg); }
.feest-nav-menu {
  display: none;
  position: absolute; top: 100%; left: 50%;
  transform: translateX(-50%);
  margin-top: 8px;
  min-width: 480px;
  background: #fff;
  border: 1px solid var(--feest-line);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(91,33,182,0.18);
  padding: 8px;
  z-index: 60;
}
.feest-nav-menu-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 2px;
}
.feest-nav-dropdown.is-open .feest-nav-menu,
.feest-nav-dropdown:hover .feest-nav-menu,
.feest-nav-dropdown:focus-within .feest-nav-menu { display: block; }
.feest-nav-menu a {
  display: block; padding: 10px 14px; border-radius: 8px;
  color: var(--feest-ink); font-size: 14px;
}
.feest-nav-menu a:hover { background: var(--feest-bg); text-decoration: none; }
.feest-nav-menu strong { display: block; font-weight: 700; color: var(--feest-red); }
.feest-nav-menu span { display: block; font-size: 12px; color: var(--feest-muted); margin-top: 2px; }
.feest-nav-menu-all {
  display: block;
  padding: 12px;
  text-align: center;
  border-top: 1px solid var(--feest-line);
  margin-top: 6px;
  color: var(--feest-red) !important;
  font-weight: 600;
}

.feest-cta {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 22px;
  background: var(--feest-red); color: #fff !important;
  border: 0;
  border-radius: var(--feest-radius);
  font-family: var(--font-body); font-weight: 600;
  font-size: 14px; letter-spacing: 0.01em;
  box-shadow: var(--feest-shadow-btn);
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.feest-cta:hover {
  background: var(--feest-red-dark); text-decoration: none;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(124,58,237,0.32);
}

.feest-burger {
  display: none; background: none; border: 0;
  width: 44px; height: 44px;
  align-items: center; justify-content: center;
  cursor: pointer;
  position: relative;
}
.feest-burger span {
  position: absolute; left: 11px; right: 11px; height: 2.5px;
  background: var(--feest-ink); border-radius: 2px;
}
.feest-burger span:nth-child(1) { top: 14px; }
.feest-burger span:nth-child(2) { top: 50%; transform: translateY(-50%); }
.feest-burger span:nth-child(3) { bottom: 14px; }

.feest-mobile-menu {
  display: none; flex-direction: column; padding: 14px 24px;
  background: #fff; border-top: 1px solid var(--feest-line);
}
.feest-mobile-menu.is-open { display: flex; }
.feest-mobile-menu a {
  padding: 14px 0; color: var(--feest-ink); font-weight: 600;
  border-bottom: 1px solid var(--feest-line);
  min-height: 44px; display: flex; align-items: center;
}
.feest-mobile-section {
  padding: 14px 0 4px;
  font-size: 11px; font-weight: 700;
  color: var(--feest-muted);
  text-transform: uppercase; letter-spacing: 1px;
}
.feest-mobile-sub {
  padding-left: 16px !important;
  font-weight: 500 !important;
  font-size: 14px;
}
/* Mobile-menu collapsible (Voor welke leeftijd) — start dicht, klik = open */
.feest-mobile-details {
  border-bottom: 1px solid var(--feest-line);
}
.feest-mobile-details summary {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 0;
  font-weight: 600; color: var(--feest-ink);
  cursor: pointer; list-style: none;
  min-height: 44px;
}
.feest-mobile-details summary::-webkit-details-marker { display: none; }
.feest-mobile-details summary::after {
  content: '▾';
  font-size: 12px; color: var(--feest-muted);
  transition: transform 0.15s;
}
.feest-mobile-details[open] summary::after { transform: rotate(180deg); }
.feest-mobile-details a.feest-mobile-sub {
  border-bottom: 0;
  padding-top: 8px !important; padding-bottom: 8px !important;
  min-height: 36px; /* compacter dan top-level menu-items */
}
.feest-mobile-tel {
  color: var(--feest-red) !important; font-weight: 700;
}
.feest-mobile-login {
  color: var(--feest-ink) !important; font-weight: 600;
}
.feest-cta-mobile {
  background: var(--feest-red); color: #fff !important; text-align: center;
  border: 0 !important;
  border-radius: var(--feest-radius);
  margin: 4px 0 14px;
  padding: 14px 0;
  box-shadow: var(--feest-shadow-btn);
  font-weight: 700; font-size: 16px;
}

/* ---------- Skeleton-loaders voor de agenda (anti flash-of-empty) ----- */
@keyframes feest-skel-pulse {
  0%, 100% { background-position: 200% 0; }
  50%      { background-position: -200% 0; }
}
.feest-cal-skel,
.feest-cal-title-skel {
  background: linear-gradient(90deg, #f5f5f0 0%, #e6e6dd 50%, #f5f5f0 100%);
  background-size: 200% 100%;
  animation: feest-skel-pulse 1.4s ease-in-out infinite;
  border-radius: 8px;
}
.feest-cal-skel { min-height: 48px; }
.feest-cal-title-skel { display: inline-block; width: 140px; height: 22px; vertical-align: middle; }

/* ---------- Features-grid ('Wat krijg je op locatie') ---------- */
.feest-features-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.feest-feature-card {
  background: #fff; padding: 22px 24px;
  border-radius: 12px; border: 1px solid var(--feest-line);
}
.feest-feature-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px;
  background: var(--feest-red-soft); color: var(--feest-red);
  border-radius: 10px; margin-bottom: 12px;
}
.feest-feature-card h3 {
  margin: 0 0 4px;
  font-size: 16px; font-weight: 700; letter-spacing: -0.01em;
}
.feest-feature-card p {
  margin: 0; font-size: 14px; line-height: 1.5; color: var(--feest-muted);
}
@media (max-width: 800px) {
  .feest-features-grid { grid-template-columns: 1fr; gap: 12px; }
  .feest-feature-card { padding: 18px 20px; }
}

/* ---------- Reviews-sectie (home) ---------- */
.feest-reviews-section {
  padding: 60px 24px;
  background: var(--feest-paper);
  border-top: 1px solid var(--feest-line);
}
.feest-reviews-section .feest-wrap { max-width: 1100px; }
.feest-reviews-head {
  display: flex; justify-content: space-between; align-items: end;
  flex-wrap: wrap; gap: 12px; margin-bottom: 30px;
}
.feest-reviews-head h2 { margin: 0 0 6px; }
.feest-reviews-head p { margin: 0; color: var(--feest-muted); }
.feest-reviews-head strong { color: var(--feest-red); }
.feest-reviews-link { color: var(--feest-red); font-weight: 600; }
.feest-reviews-list {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px;
}
.feest-review-card {
  background: #fff; padding: 20px 24px;
  border-radius: 10px; border: 1px solid var(--feest-line);
}
.feest-review-stars { color: var(--feest-yellow-dark); font-size: 18px; letter-spacing: 1px; }
.feest-review-card h3 { margin: 8px 0 6px; font-size: 16px; }
.feest-review-card p { margin: 0; color: var(--feest-ink); font-size: 14px; line-height: 1.55; }
.feest-review-meta { margin-top: 10px; font-size: 12px; color: var(--feest-muted); }

/* Op mobiel: horizontale slider met scroll-snap (swipeable) */
@media (max-width: 800px) {
  .feest-reviews-list {
    grid-template-columns: none;
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 12px;
    padding-bottom: 12px;
    margin: 0 -24px;     /* doorlopend tot rand van scherm */
    padding-left: 24px;
    padding-right: 24px;
    -webkit-overflow-scrolling: touch;
  }
  .feest-review-card {
    flex: 0 0 calc(100% - 32px);
    scroll-snap-align: start;
  }
  .feest-reviews-head { margin-bottom: 18px; }
}

/* ---------- Stats-strip onder hero (4 trust-cijfers) ---------- */
.feest-stats-strip {
  background: #fff;
  border-top: 1px solid var(--feest-line);
  border-bottom: 1px solid var(--feest-line);
  padding: 22px 24px;
}
.feest-stats-grid {
  max-width: 1100px;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px;
  text-align: center;
  align-items: center;
}
.feest-stats-grid strong {
  display: block;
  font-size: 24px; font-family: var(--font-display);
  color: var(--feest-red);
}
.feest-stats-grid span {
  font-size: 13px; color: var(--feest-muted);
}
@media (max-width: 800px) {
  .feest-stats-strip { padding: 14px 16px; }
  .feest-stats-grid { grid-template-columns: 1fr 1fr; gap: 10px 18px; }
  .feest-stats-grid strong { font-size: 20px; line-height: 1.1; }
  .feest-stats-grid span { font-size: 12px; line-height: 1.3; }
  .feest-stats-grid > div { padding: 6px 0; }
}

/* ---------- Hero tagline (waardepropositie: type + leeftijd + prijs) ---------- */
.feest-hero-tagline {
  list-style: none; padding: 0; margin: 0 0 18px;
  display: flex; flex-wrap: wrap; gap: 0;
  font-size: 14px; font-weight: 600;
  color: var(--feest-ink);
  letter-spacing: 0.01em;
}
.feest-hero-tagline li {
  padding: 0 12px;
  border-right: 1px solid var(--feest-line);
}
.feest-hero-tagline li:first-child { padding-left: 0; }
.feest-hero-tagline li:last-child  { border-right: 0; padding-right: 0; }
@media (max-width: 480px) {
  .feest-hero-tagline { font-size: 13px; gap: 0; margin-bottom: 14px; }
  .feest-hero-tagline li { padding: 0 8px; }
}

/* ---------- Sticky mobile CTA-bar (alleen mobiel) ---------- */
.feest-sticky-bar {
  display: none;
  position: fixed; left: 12px; right: 12px;
  bottom: 12px;
  bottom: max(12px, calc(env(safe-area-inset-bottom) + 6px));
  z-index: 60;
  gap: 8px;
}
.feest-sticky-icon {
  flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  width: 56px;
  background: #fff; color: var(--feest-red) !important;
  border: 1px solid var(--feest-line);
  border-radius: var(--feest-radius);
  box-shadow: 0 8px 24px rgba(15,23,42,0.18);
}
.feest-sticky-icon:hover, .feest-sticky-icon:active {
  text-decoration: none;
  background: var(--feest-red-soft);
}
.feest-sticky-whatsapp { color: #25D366 !important; }
.feest-sticky-whatsapp:hover, .feest-sticky-whatsapp:active {
  background: #E7F8EE;
}
.feest-sticky-cta {
  flex: 1;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--feest-red); color: #fff !important;
  text-align: center; font-weight: 700; font-size: 16px;
  letter-spacing: 0.01em;
  padding: 16px 20px;
  border: 0;
  border-radius: var(--feest-radius);
  box-shadow: 0 8px 24px rgba(124,58,237,0.32);
}
.feest-sticky-cta:hover, .feest-sticky-cta:active {
  text-decoration: none;
  background: var(--feest-red-dark);
}

/* ---------- Main ---------- */
.feest-main { min-height: calc(100vh - 200px); }

/* ---------- Hero (licht, asymmetrisch grid, display-typografie) ---------- */
.feest-hero {
  background:
    radial-gradient(circle at 88% 18%, var(--feest-yellow-soft) 0%, transparent 42%),
    radial-gradient(circle at 6% 92%, #FBE7E0 0%, transparent 38%),
    var(--feest-red-soft);
  color: var(--feest-ink);
  padding: 48px 0 56px;
  position: relative; overflow: hidden;
}

.feest-hero-grid {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: 56px;
  align-items: end;
  position: relative; z-index: 1;
}

.feest-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(34px, 4.4vw, 52px);
  line-height: 1.1;
  letter-spacing: -0.025em;
  margin: 0 0 22px;
  font-weight: 800;
  color: var(--feest-ink);
}
.feest-hero h1 .accent { color: var(--feest-red); }

.feest-hero-sub {
  font-family: var(--font-body);
  font-size: 17px; line-height: 1.55;
  max-width: 480px; margin: 0 0 24px;
  color: var(--feest-muted);
}

.feest-hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }

.feest-btn-primary {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--feest-red); color: #fff !important;
  padding: 14px 26px;
  border: 0;
  border-radius: var(--feest-radius);
  font-family: var(--font-body); font-weight: 600;
  font-size: 15px; letter-spacing: 0.005em;
  box-shadow: var(--feest-shadow-btn);
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.feest-btn-primary:hover {
  background: var(--feest-red-dark);
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(124,58,237,0.30);
}
.feest-btn-primary:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(124,58,237,0.18);
}

.feest-btn-ghost {
  display: inline-flex; align-items: center; gap: 6px;
  background: #fff;
  color: var(--feest-ink) !important;
  padding: 13px 24px;
  border: 1px solid var(--feest-line);
  border-radius: var(--feest-radius);
  font-family: var(--font-body); font-weight: 600;
  font-size: 15px;
  transition: border-color .15s, transform .15s;
}
.feest-btn-ghost:hover {
  border-color: var(--feest-red);
  color: var(--feest-red) !important;
  text-decoration: none;
  transform: translateY(-1px);
}

/* Hero meta-list (rechts in grid) — editorial maar licht */
.feest-hero-meta {
  background: rgba(255,255,255,0.55);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(124,58,237,0.12);
  border-radius: var(--feest-radius-card);
  padding: 22px 24px;
  display: flex; flex-direction: column; gap: 16px;
  box-shadow: var(--feest-shadow-card);
}
.feest-hero-meta > div + div {
  border-top: 1px solid var(--feest-line);
  padding-top: 16px;
}
.feest-hero-meta dt {
  font-family: var(--font-body);
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--feest-red);
  margin-bottom: 6px;
}
.feest-hero-meta dd {
  font-family: var(--font-display);
  font-size: 20px; font-weight: 600; line-height: 1.15;
  color: var(--feest-ink);
  margin: 0;
  letter-spacing: -0.01em;
}
.feest-hero-meta dd small {
  display: block;
  font-family: var(--font-body); font-weight: 500;
  font-size: 13px; color: var(--feest-muted);
  letter-spacing: 0;
  margin-top: 4px;
}

/* ---------- Stappen (zachte cards met kleurvariaties) ---------- */
.feest-steps { padding: 88px 0; background: #fff; }
.feest-steps h2 {
  font-family: var(--font-display);
  font-size: clamp(30px, 3.6vw, 44px);
  font-weight: 600; letter-spacing: -0.02em;
  margin: 0 0 40px; text-align: center;
  color: var(--feest-ink);
}
.feest-steps > .feest-wrap > h2 + p {
  color: var(--feest-muted); font-size: 16px; max-width: 540px;
  margin: 0 auto 48px; text-align: center;
}
.feest-steps-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
}
.feest-steps-grid-3 { grid-template-columns: repeat(3, 1fr); }
.feest-step {
  background: var(--feest-paper);
  border: 1px solid var(--feest-line);
  border-radius: var(--feest-radius-card);
  padding: 28px 24px;
  text-align: left;
  transition: transform .15s, box-shadow .15s;
}
.feest-step:hover {
  transform: translateY(-2px);
  box-shadow: var(--feest-shadow-card);
}
.feest-step-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px !important; height: 40px !important;
  background: var(--feest-red) !important;
  color: #fff !important;
  border-radius: 12px !important;
  box-shadow: none !important;
  font-family: var(--font-body);
  font-size: 16px; font-weight: 700;
  margin-bottom: 18px;
  letter-spacing: 0;
}
.feest-step h3 {
  font-family: var(--font-display);
  font-size: 20px; font-weight: 600; line-height: 1.2;
  margin: 0 0 8px;
  letter-spacing: -0.005em;
  color: var(--feest-ink);
}
.feest-step p { margin: 0; color: var(--feest-muted); font-size: 14px; line-height: 1.55; }

/* ---------- Pakketten ---------- */
.feest-packages { padding: 96px 0; background: var(--feest-paper); }
.feest-packages-head {
  text-align: center;
  margin-bottom: 48px;
}
.feest-packages-head h2 {
  font-family: var(--font-display);
  font-size: clamp(30px, 3.6vw, 44px); font-weight: 600; letter-spacing: -0.02em;
  margin: 0 0 10px;
  color: var(--feest-ink);
}
.feest-packages-head p {
  color: var(--feest-muted); margin: 0 auto;
  font-size: 16px; max-width: 480px;
}

.feest-pkg-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
}
.feest-pkg-card {
  background: #fff;
  border: 1px solid var(--feest-line);
  border-radius: var(--feest-radius-card);
  padding: 28px 26px 26px;
  display: flex; flex-direction: column;
  position: relative; overflow: hidden;
  transition: transform .15s, box-shadow .15s, border-color .15s;
  color: var(--feest-ink);
  box-shadow: var(--feest-shadow-card);
}
.feest-pkg-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(124,58,237,0.14), 0 2px 6px rgba(26,21,48,0.05);
  border-color: rgba(124,58,237,0.30);
  text-decoration: none;
}
.feest-pkg-stripe {
  position: absolute; top: 0; left: 0; right: 0; height: 6px;
}
.feest-pkg-card h3 {
  font-family: var(--font-display);
  margin: 18px 0 6px;
  font-size: 24px; font-weight: 600; letter-spacing: -0.01em;
  color: var(--feest-ink);
}
.feest-pkg-card .feest-pkg-tagline { color: var(--feest-muted); margin: 0 0 18px; font-size: 14px; line-height: 1.5; }

.feest-pkg-price {
  font-family: var(--font-display);
  font-size: 38px; font-weight: 600; line-height: 1;
  margin: 12px 0 22px;
  color: var(--feest-red);
  letter-spacing: -0.02em;
}
.feest-pkg-price-sup {
  font-family: var(--font-body);
  font-size: 18px; vertical-align: top; margin-right: 4px;
  font-weight: 600; color: var(--feest-red);
}

.feest-pkg-includes { list-style: none; padding: 0; margin: 0 0 22px; flex: 1; }
.feest-pkg-includes li {
  padding: 5px 0; font-size: 14px; line-height: 1.5;
  display: flex; align-items: flex-start; gap: 8px;
}
.feest-pkg-includes li::before {
  content: "✓";
  color: var(--feest-red); font-weight: 700;
  flex: 0 0 auto;
}
.feest-pkg-meta {
  display: flex; gap: 16px; font-size: 13px; color: var(--feest-muted);
  margin-bottom: 20px;
}
.feest-pkg-meta strong { color: var(--feest-ink); font-weight: 700; }
.feest-pkg-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font-family: var(--font-body);
  font-weight: 600; color: #fff !important;
  font-size: 14px; letter-spacing: 0.01em;
  padding: 12px 18px;
  background: var(--feest-red);
  border-radius: var(--feest-radius);
  text-align: center;
  box-shadow: 0 2px 10px rgba(124,58,237,0.18);
  transition: background .15s, transform .15s, box-shadow .15s;
}
.feest-pkg-cta:hover {
  background: var(--feest-red-dark);
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(124,58,237,0.28);
}
.feest-pkg-cta::after { content: " →"; }

/* ---------- Prijs-sectie (homepage — vervangt het pakketten-blok) ---------- */
.feest-pricing { padding: 96px 0; background: var(--feest-paper); border-top: 1px solid var(--feest-line); }
.feest-pricing-head {
  text-align: center; max-width: 680px; margin: 0 auto 56px;
}
.feest-pricing-head h2 {
  font-size: clamp(30px, 3.6vw, 44px);
  font-weight: 800; letter-spacing: -0.02em;
  margin: 6px 0 16px;
  color: var(--feest-ink);
}
.feest-pricing-head h2 .accent { color: var(--feest-red); }
.feest-pricing-head p {
  color: var(--feest-muted); font-size: 17px; margin: 0;
  line-height: 1.55;
}

.feest-pricing-grid {
  display: grid; grid-template-columns: 7fr 5fr; gap: 24px;
  max-width: 1000px; margin: 0 auto;
}
.feest-pricing-card {
  background: #fff;
  border: 1px solid var(--feest-line);
  border-radius: var(--feest-radius-card);
  padding: 36px;
  position: relative;
}
.feest-pricing-main {
  background: linear-gradient(135deg, var(--feest-red-soft) 0%, #fff 70%);
  border-color: rgba(124,58,237,0.20);
  box-shadow: var(--feest-shadow-card);
}
.feest-pricing-addon {
  background: var(--feest-paper);
}

.feest-pricing-amount {
  font-weight: 800;
  font-size: 76px;
  line-height: 0.9;
  letter-spacing: -0.03em;
  color: var(--feest-ink);
  margin-bottom: 28px;
  display: flex; align-items: baseline; flex-wrap: wrap;
}
.feest-pricing-amount-sm { font-size: 48px; margin-bottom: 18px; }
.feest-pricing-cur {
  font-size: 0.45em; font-weight: 700; color: var(--feest-red);
  margin-right: 4px;
}
.feest-pricing-per {
  font-family: var(--font-body); font-size: 16px; font-weight: 500;
  color: var(--feest-muted); margin-left: 10px;
  letter-spacing: 0;
  line-height: 1;
  align-self: center;
}

.feest-pricing-tag {
  display: inline-block; font-size: 11px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  background: var(--feest-yellow); color: var(--feest-ink);
  padding: 5px 12px; border-radius: 999px;
  margin-bottom: 18px;
}

.feest-pricing-card h3 {
  font-size: 22px; font-weight: 700;
  margin: 0 0 8px; color: var(--feest-ink);
  letter-spacing: -0.01em;
}
.feest-pricing-card p {
  color: var(--feest-muted); margin: 0;
  font-size: 15px; line-height: 1.6;
}

.feest-pricing-includes {
  list-style: none; padding: 0; margin: 0;
}
.feest-pricing-includes li {
  padding: 10px 0;
  border-bottom: 1px solid var(--feest-line);
  font-size: 15px;
  display: flex; align-items: flex-start; gap: 12px;
  color: var(--feest-ink);
}
.feest-pricing-includes li:last-child { border-bottom: 0; }
.feest-pricing-includes li::before {
  content: "✓"; color: var(--feest-red); font-weight: 700;
  flex: 0 0 auto;
}
.feest-pricing-reassure {
  margin-top: 18px; padding: 14px 16px;
  background: var(--feest-paper);
  border-radius: var(--feest-radius);
  font-size: 13px; line-height: 1.5; color: var(--feest-muted);
}
.feest-pricing-reassure strong {
  display: block; color: var(--feest-ink);
  font-size: 14px; margin-bottom: 4px;
}

.feest-pricing-examples {
  display: flex; gap: 22px; flex-wrap: wrap; justify-content: center;
  margin: 48px auto 32px; max-width: 800px;
  font-size: 14px; color: var(--feest-muted);
}
.feest-pricing-examples > strong {
  color: var(--feest-ink); font-weight: 700;
  letter-spacing: 0.04em; text-transform: uppercase;
  font-size: 12px;
  align-self: center;
}
.feest-pricing-examples > span strong { color: var(--feest-ink); font-weight: 700; }

.feest-pricing-cta { text-align: center; margin-top: 8px; }
.feest-pricing-urgency {
  text-align: center; margin: 20px auto 12px;
  font-size: 14px; color: var(--feest-muted);
  font-weight: 500;
}

/* CTA-links onder de 3 stappen 'Zo eenvoudig is het' (2 ghost-knoppen) */
.feest-steps-cta {
  display: flex; flex-wrap: wrap; gap: 12px;
  justify-content: center;
  margin: 32px 0 0;
}
.feest-steps-cta .feest-btn-ghost { white-space: nowrap; }
@media (max-width: 480px) {
  .feest-steps-cta .feest-btn-ghost { width: 100%; text-align: center; }
}

/* Finale CTA-sectie boven de footer */
.feest-final-cta {
  background: var(--feest-paper);
  border-top: 1px solid var(--feest-line);
  padding: 64px 24px;
  text-align: center;
}
.feest-final-cta h2 {
  font-size: clamp(26px, 3vw, 36px);
  margin: 0 0 12px; letter-spacing: -0.01em;
}
.feest-final-cta p {
  margin: 0 auto 24px; max-width: 540px;
  color: var(--feest-muted); font-size: 16px; line-height: 1.55;
}
.feest-final-cta-btn { font-size: 16px; padding: 16px 28px; }
@media (max-width: 800px) {
  .feest-final-cta { padding: 48px 20px; }
  .feest-final-cta p { font-size: 15px; }
}

/* ---------- Detail-pagina ---------- */
.feest-detail { padding: 48px 0; }
.feest-detail-grid {
  display: grid; grid-template-columns: 1fr 380px; gap: 48px;
}
.feest-detail h1 { font-size: 36px; margin: 0 0 8px; font-weight: 900; }
.feest-detail-tagline { color: var(--feest-muted); font-size: 18px; margin: 0 0 24px; }
.feest-detail-desc { font-size: 16px; line-height: 1.7; }
.feest-detail-side {
  background: #fff; border-radius: var(--feest-radius);
  border: 2px solid var(--feest-line); padding: 24px;
  position: sticky; top: 100px; align-self: start;
}
.feest-detail-side .feest-pkg-price { margin-top: 0; }

/* ---------- Aanvraag-formulier ---------- */
.feest-form-page { padding: 72px 0; }
.feest-form-page h1 {
  font-family: var(--font-display);
  font-size: clamp(32px, 4vw, 48px); font-weight: 700; letter-spacing: -0.02em;
  margin: 0 0 12px;
}
.feest-form-page p.lead { font-size: 17px; color: var(--feest-muted); margin: 0 0 28px; max-width: 600px; }

.feest-form-progress {
  list-style: none;
  display: flex;
  gap: 8px;
  padding: 0;
  margin: 0 0 32px;
  flex-wrap: wrap;
}
.feest-form-progress li {
  flex: 1;
  min-width: 160px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: #fff;
  border: 1px solid var(--feest-line);
  border-radius: 10px;
  font-weight: 600;
  font-size: 14px;
  color: var(--feest-muted);
  transition: border-color .15s, background .15s;
}
.feest-form-progress li span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--feest-line);
  color: #fff;
  font-size: 13px;
  flex-shrink: 0;
}
.feest-form-progress li.is-active {
  border-color: var(--feest-red);
  color: var(--feest-ink);
  background: var(--feest-red-soft);
}
.feest-form-progress li.is-active span { background: var(--feest-red); }
.feest-form-progress li.is-done {
  border-color: #16A34A;
  color: #166534;
}
.feest-form-progress li.is-done span { background: #16A34A; }
.feest-form-progress li.is-done span::before {
  content: '✓';
  font-weight: 700;
}
.feest-form-progress li.is-done span { font-size: 0; }
.feest-form-progress li.is-done span::before { font-size: 14px; }

.feest-form-validation {
  background: #fef3c7;
  border: 2px solid #f59e0b;
  border-radius: 12px;
  padding: 16px 20px;
  margin: 0 0 22px;
  font-size: 14px;
  color: #78350f;
  line-height: 1.55;
}
.feest-form-validation strong { display: block; font-size: 15px; margin-bottom: 8px; color: #b45309; }
.feest-form-validation ul { margin: 0; padding-left: 20px; }
.feest-form-validation li { margin: 4px 0; }

.feest-slot-hint {
  font-size: 13px;
  color: var(--feest-muted);
  margin: 4px 0 12px;
  line-height: 1.5;
}

.feest-loc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
@media (max-width: 800px) {
  .feest-loc-grid { grid-template-columns: 1fr; gap: 28px; }
}

/* Stap-indicator — editorial, geen shouty caps */
.feest-step-bar {
  display: flex; gap: 14px; flex-wrap: wrap;
  margin-bottom: 24px;
  font-size: 12px; font-weight: 700;
  color: var(--feest-muted);
  letter-spacing: 0.14em; text-transform: uppercase;
}
.feest-step-bar > span { padding: 4px 0; }
.feest-step-bar > span.is-current { color: var(--feest-ink); }
.feest-step-bar > span.is-done    { color: var(--feest-red); }
.feest-step-bar > span:not(:first-child)::before {
  content: "/"; margin-right: 14px; color: var(--feest-line); font-weight: 400;
}

/* Helper-link-row onder pakket-grid (stap 1) */
.feest-form-help {
  text-align: center; margin-top: 32px;
  font-size: 14px; color: var(--feest-muted);
}
.feest-form-help a { color: var(--feest-ink); font-weight: 600; border-bottom: 1px solid var(--feest-line); }
.feest-form-help a:hover { color: var(--feest-red); border-color: var(--feest-red); text-decoration: none; }

/* Full-width submit aan het einde van het form */
.feest-form-submit {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%;
  margin: 0 0 18px;
  cursor: pointer;
  font-size: 16px; padding: 16px 28px;
}

/* Trust-strip boven het form: ster-rating + aantal feestjes, in 1 regel.
   Geeft sociaal bewijs zonder dat het visueel zwaar wordt. */
.feest-form-trust-strip {
  display: inline-flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  padding: 10px 14px;
  background: var(--feest-paper);
  border: 1px solid var(--feest-line);
  border-radius: var(--feest-radius);
  font-size: 14px; color: var(--feest-ink);
  margin: 0 0 24px;
}
.feest-form-trust-strip .feest-stars {
  color: var(--feest-yellow-dark); letter-spacing: 2px; font-size: 14px;
}
.feest-form-trust-strip strong { font-weight: 700; }

/* Privacy-zin onder de trust-row. Subtiel, klein. */
.feest-form-privacy {
  margin: 14px 0 0;
  font-size: 12px; color: var(--feest-muted);
  text-align: center;
}
.feest-form-privacy a { color: var(--feest-muted); text-decoration: underline; }
.feest-form-privacy a:hover { color: var(--feest-red); }

/* 'Wat gebeurt er hierna' uitleg-blok onder het form. */
.feest-next-steps {
  background: var(--feest-paper);
  border: 1px solid var(--feest-line);
  border-radius: var(--feest-radius-card);
  padding: 22px 26px;
  margin: 24px 0 0;
}
.feest-next-steps h3 {
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-size: 18px; font-weight: 700;
  color: var(--feest-ink);
  letter-spacing: -0.01em;
}
.feest-next-steps ol {
  margin: 0; padding-left: 22px;
  color: var(--feest-muted);
  font-size: 14px; line-height: 1.6;
}
.feest-next-steps ol li { margin: 6px 0; }
.feest-next-steps strong { color: var(--feest-ink); font-weight: 700; }

/* Hulp-zin onder het 'wat hierna' blok: telefoon + FAQ-link. */
.feest-form-help {
  margin: 18px 0 0; text-align: center;
  font-size: 14px; color: var(--feest-muted);
}
.feest-form-help a { color: var(--feest-red); font-weight: 600; }

/* Submit-knop disabled tijdens POST om dubbel-klik te voorkomen. */
.feest-form-submit:disabled {
  opacity: 0.7; cursor: progress;
  background: var(--feest-red-dark) !important;
}

/* Live totaal-balk + reservering-overzicht direct boven de submit-knop.
   Bevestigt klant wat hij/zij precies reserveert vlak voor de klik.
   Outer is display:block voor robuuste stacking zonder flex-cascade. */
.feest-form-summary {
  display: block;
  margin: 28px 0 14px; padding: 14px 18px;
  background: var(--feest-paper);
  border: 1px solid var(--feest-line);
  border-radius: var(--feest-radius);
}
.feest-form-summary-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  padding: 6px 0;
}
.feest-form-summary-when {
  border-bottom: 1px dashed var(--feest-line);
}
.feest-form-summary-when-text {
  font-size: 14px; font-weight: 700;
  color: var(--feest-ink);
  text-align: right;
  letter-spacing: 0.01em;
}
.feest-form-summary-label {
  font-size: 13px; font-weight: 600;
  color: var(--feest-muted);
  text-transform: uppercase; letter-spacing: 0.08em;
}
.feest-form-summary-amount {
  font-family: var(--font-display);
  font-size: 22px; font-weight: 700;
  color: var(--feest-red);
}
/* Autosave-indicator: kleine geruststelling dat input behouden blijft.
   Flash-state korte highlight bij elke save zodat klant 't ziet werken. */
.feest-form-summary-autosave {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--feest-muted);
  margin: 8px 0 0; padding-top: 8px;
  border-top: 1px dashed var(--feest-line);
  transition: color .25s;
  line-height: 1.4;
}
.feest-form-summary-autosave svg { color: #16A34A; flex-shrink: 0; }
.feest-form-summary-autosave.is-flash { color: #166534; }

/* Staleness-banner: passieve waarschuwing als klant >5 min op de pagina
   blijft. Voorkomt onverwachte 'slot net bezet'-fout bij submit. */
.feest-stale-banner {
  display: flex; align-items: center; gap: 10px;
  margin: 0 0 16px;
  padding: 12px 16px;
  background: var(--feest-yellow-soft);
  border: 1px solid var(--feest-yellow);
  border-radius: var(--feest-radius);
  font-size: 14px;
  color: var(--feest-ink);
  line-height: 1.5;
}
.feest-stale-banner svg { flex-shrink: 0; color: var(--feest-yellow-dark); }
.feest-stale-refresh {
  background: #fff;
  border: 1px solid var(--feest-yellow-dark);
  color: var(--feest-yellow-dark);
  padding: 4px 10px;
  border-radius: 6px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  margin: 0 4px;
}
.feest-stale-refresh:hover {
  background: var(--feest-yellow-dark);
  color: #fff;
}

/* Trust-row onder submit — editorial, geen vinkjes */
.feest-form-trust {
  display: flex; gap: 0; flex-wrap: wrap; justify-content: stretch;
  font-size: 12px; color: var(--feest-muted); margin: 0;
  border-top: 1px solid var(--feest-line); padding-top: 16px;
  letter-spacing: 0.04em;
}
.feest-form-trust span {
  flex: 1; text-align: center;
  border-right: 1px solid var(--feest-line);
  padding: 0 12px;
}
.feest-form-trust span:last-child { border-right: 0; }

/* "Twijfel? bel ons"-fallback onder de submit-knop */
.feest-form-doubt {
  font-size: 14px; color: var(--feest-muted);
  text-align: center; margin: 16px 0 8px;
}
.feest-form-doubt a { color: var(--feest-red); text-decoration: underline; }
.feest-form-doubt a:hover { color: var(--feest-red-dark); }

/* Goodiebag als prominente kaart i.p.v. losse checkbox-regel.
   Dezelfde visuele lading als op /prijs zodat upsell consistent voelt.
   Display:flex met expliciet column-direction op de body voorkomt dat
   flex-cascade rare layouts geeft op verschillende viewports. */
.feest-goodie-card {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  gap: 16px;
  background: var(--feest-yellow-soft);
  border: 2px solid var(--feest-yellow);
  border-radius: 12px;
  padding: 18px 20px;
  margin: 14px 0 18px;
  cursor: pointer;
  transition: border-color .15s, background .15s, box-shadow .15s, transform .12s;
  position: relative;
}
/* Hover alleen op pointer-devices (geen flicker op touch). */
@media (hover: hover) {
  .feest-goodie-card:hover {
    border-color: var(--feest-yellow-dark);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(217,119,6,0.12);
  }
}
.feest-goodie-card input[type="checkbox"] {
  flex: 0 0 auto;
  width: 22px; height: 22px;
  accent-color: var(--feest-red);
  cursor: pointer;
  margin: 0;
}
.feest-goodie-card:has(input:checked) {
  border-color: var(--feest-red);
  background: var(--feest-red-soft);
  box-shadow: 0 2px 8px rgba(124,58,237,0.15);
}
.feest-goodie-card-body {
  flex: 1 1 auto;
  min-width: 0;
  display: block;
}
.feest-goodie-card-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.feest-goodie-card-head strong {
  font-size: 17px;
  font-weight: 700;
  color: var(--feest-ink);
  letter-spacing: -0.005em;
}
.feest-goodie-card-price {
  font-size: 14px;
  font-weight: 700;
  color: var(--feest-red);
  background: #fff;
  padding: 2px 10px;
  border-radius: 999px;
  letter-spacing: 0.01em;
}
.feest-goodie-card-body p {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--feest-ink-soft);
}

/* Voorwaarden-checkbox: error-state benadrukt dat het verplicht is */
.feest-checkbox-terms {
  margin: 18px 0;
  padding: 12px 14px;
  border: 1px solid var(--feest-line);
  border-radius: 10px;
  background: var(--feest-paper);
  transition: border-color .12s, background .12s;
}
.feest-checkbox-terms.is-error {
  border-color: #dc2626;
  background: #fef2f2;
}
.feest-checkbox-terms a { color: var(--feest-red); text-decoration: underline; }
.feest-checkbox-terms a:hover { color: var(--feest-red-dark); }

/* Server-side error-banner gebruikt dezelfde stijl als JS-validatie-banner.
   Eén consistente foutmelding-UX, ongeacht waar de fout vandaan komt. */
.feest-form-validation-server { /* zelfde basis als .feest-form-validation */ }

/* Compactere mobile-agenda: alleen relevante (vrije/bezette) dagen tonen,
   geen rij-rij van vorige/volgende-maand-grijs en buiten-range cellen. */
@media (max-width: 600px) {
  .feest-cal-day.is-othermonth,
  .feest-cal-day.is-past {
    visibility: hidden;
    pointer-events: none;
  }
  .feest-cal-day { min-height: 44px; padding: 4px 2px; }
  .feest-cal-day .dnum { font-size: 13px; }
}
.feest-form {
  background: #fff;
  border-radius: var(--feest-radius-card);
  border: 1px solid var(--feest-line); padding: 32px;
  box-shadow: var(--feest-shadow-card);
  max-width: 720px;
}
.feest-form h3 {
  font-family: var(--font-body);
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--feest-muted);
  margin: 0 0 14px;
}
.feest-form-row { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 6px; }
.feest-form-row .feest-field { flex: 1; min-width: 160px; margin-bottom: 18px; }
.feest-field { margin-bottom: 22px; }
.feest-field label {
  display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px;
  color: var(--feest-ink);
}
.feest-field label.req::after { content: " *"; color: var(--feest-red); }
.feest-field input, .feest-field select, .feest-field textarea {
  width: 100%; padding: 12px 14px;
  border: 1px solid var(--feest-line);
  border-radius: var(--feest-radius);
  font-family: var(--font-body); font-size: 15px;
  background: #fff; color: var(--feest-ink);
}
.feest-field input:focus, .feest-field select:focus, .feest-field textarea:focus {
  outline: none; border-color: var(--feest-ink);
  box-shadow: 0 0 0 3px rgba(124,58,237,0.18);
}
.feest-form .feest-error {
  background: #FFEEEE; color: #B81F2A;
  padding: 12px 14px; border-radius: var(--feest-radius); margin-bottom: 18px;
  font-size: 14px;
  border: 1px solid #fecaca;
}
.feest-form .feest-summary {
  background: var(--feest-paper);
  padding: 16px 18px;
  border-radius: var(--feest-radius);
  border: 1px solid var(--feest-ink);
  margin-bottom: 26px; font-size: 14px;
}

/* ---------- Agenda + slot-picker (op /aanvraag) ---------- */
.feest-form-booking {
  max-width: 880px; padding: 32px;
}
.feest-cal {
  border: 1px solid var(--feest-line);
  border-radius: var(--feest-radius-card);
  padding: 22px 22px 16px;
  background: #fff;
  margin-bottom: 24px;
}
.feest-cal-toolbar {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 16px;
}
.feest-cal-title {
  flex: 1; text-align: center;
  font-size: 17px; font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--feest-ink);
}
.feest-cal-nav {
  background: #fff;
  border: 1px solid var(--feest-line);
  border-radius: 10px;
  width: 36px; height: 36px;
  font-size: 16px; cursor: pointer;
  color: var(--feest-ink);
}
.feest-cal-nav:hover { border-color: var(--feest-red); color: var(--feest-red); }

.feest-cal-weekhead {
  display: grid; grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.10em; text-transform: uppercase;
  color: var(--feest-muted);
  margin-bottom: 4px;
}
.feest-cal-weekhead span { padding: 6px 0; text-align: center; }

.feest-cal-grid {
  display: grid; grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}
.feest-cal-day {
  background: #fff;
  border: 1px solid var(--feest-line);
  border-radius: 10px;
  padding: 8px 6px 6px;
  min-height: 56px;
  cursor: pointer;
  font-family: inherit;
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: space-between;
  gap: 4px;
  transition: border-color .12s, transform .12s, background .12s;
  color: var(--feest-ink);
}
.feest-cal-day:hover:not(:disabled) {
  border-color: var(--feest-red);
  transform: translateY(-1px);
}
.feest-cal-day:disabled {
  cursor: not-allowed;
  background: var(--feest-paper);
  color: var(--feest-muted);
  opacity: 0.6;
}
/* Vorige/volgende-maand cellen: visueel leeg, geen border, geen content.
   In JS gerendert als <span> placeholder zodat 7-koloms grid uitgelijnd
   blijft maar klant geen klikbare grijze cellen ziet. */
.feest-cal-day.is-othermonth {
  background: transparent;
  border-color: transparent;
  cursor: default;
  pointer-events: none;
}
.feest-cal-day.is-selected {
  background: var(--feest-red);
  border-color: var(--feest-red);
  color: #fff;
}
.feest-cal-day .dnum { font-size: 14px; font-weight: 600; }

/* Status-bars per slot: één gekleurd balkje per tijdblok (zaterdag/zondag
   2 bars, doordeweeks 1). Communiceert beschikbaarheid in één oogopslag,
   zonder rommelige tekst-preview in de cell. is-active = gekozen slot. */
.feest-cal-day .cal-bars {
  display: flex;
  gap: 3px;
  justify-content: center;
  align-items: center;
  width: 100%;
}
.feest-cal-day .cal-bar {
  display: block;
  width: 18px;
  height: 4px;
  border-radius: 2px;
  background: var(--feest-line);
  transition: transform .12s, background .12s, box-shadow .12s;
}
.feest-cal-day .cal-bar-free    { background: #16A34A; }
.feest-cal-day .cal-bar-taken   { background: var(--feest-yellow-dark); }
.feest-cal-day .cal-bar-blocked { background: #9CA3AF; }
.feest-cal-day:hover:not(:disabled) .cal-bar-free { transform: scaleY(1.5); }
.feest-cal-day .cal-bar.is-active {
  background: var(--feest-red);
  transform: scaleY(1.5);
  box-shadow: 0 0 0 1px rgba(124,58,237,0.3);
}
/* In een geselecteerde paarse cel zijn de bars wit/transparant zodat
   ze leesbaar blijven op de paarse achtergrond. */
.feest-cal-day.is-selected .cal-bar { background: rgba(255,255,255,0.45); }
.feest-cal-day.is-selected .cal-bar.is-active {
  background: #fff;
  transform: scaleY(1.5);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.5);
}

/* '.dot' wordt nog gebruikt door .feest-cal-legend (de "Vrij / Bezet /
   Niet beschikbaar"-uitleg onder de agenda). Laten we 'm visueel aligneren
   met de nieuwe bars, een korte gekleurde streep ipv een rond bolletje. */
.dot {
  display: inline-block; width: 12px; height: 4px;
  border-radius: 2px;
  background: var(--feest-line);
  vertical-align: middle;
}
.dot-free    { background: #16A34A; }
.dot-taken   { background: var(--feest-yellow-dark); }
.dot-blocked { background: #9CA3AF; }

.feest-cal-legend {
  display: flex; gap: 18px; flex-wrap: wrap;
  margin-top: 14px; padding-top: 14px;
  border-top: 1px solid var(--feest-line);
  font-size: 12px; color: var(--feest-muted);
}
.feest-cal-legend span { display: inline-flex; align-items: center; gap: 6px; }
.feest-cal-legend .dot { width: 8px; height: 8px; }

/* Slot-keuze onder agenda */
.feest-slot-row { margin: 8px 0 24px; }
.feest-slot-row h3 {
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--feest-muted);
  margin: 0 0 12px;
}
.feest-slot-options {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}
.feest-slot-opt {
  background: #fff; border: 1px solid var(--feest-line);
  border-radius: var(--feest-radius);
  padding: 14px 18px;
  cursor: pointer; text-align: left;
  font-family: inherit;
  transition: border-color .12s, transform .12s;
  color: var(--feest-ink);
  display: flex; flex-direction: column; gap: 2px;
}
.feest-slot-opt:hover:not(:disabled) {
  border-color: var(--feest-red); transform: translateY(-1px);
}
.feest-slot-opt:disabled { cursor: not-allowed; opacity: 0.5; }
.feest-slot-opt.is-selected {
  background: var(--feest-red); border-color: var(--feest-red); color: #fff;
}
.feest-slot-opt strong { font-size: 16px; font-weight: 700; }
.feest-slot-opt span {
  font-size: 12px; color: var(--feest-muted); letter-spacing: 0.04em;
}
.feest-slot-opt.is-selected span { color: rgba(255,255,255,0.85); }

/* Kids-slider */
.feest-kids-row {
  display: grid; grid-template-columns: 1fr auto;
  align-items: center; gap: 18px;
  margin: 12px 0 18px;
}
.feest-kids-row input[type=range] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 6px;
  background: var(--feest-line);
  border-radius: 4px; outline: none;
}
.feest-kids-row input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 24px; height: 24px;
  background: var(--feest-red);
  border-radius: 50%; cursor: pointer;
  box-shadow: 0 2px 8px rgba(124,58,237,0.30);
}
.feest-kids-row input[type=range]::-moz-range-thumb {
  width: 24px; height: 24px;
  background: var(--feest-red); border: 0;
  border-radius: 50%; cursor: pointer;
  box-shadow: 0 2px 8px rgba(124,58,237,0.30);
}
.feest-kids-value {
  font-weight: 700; font-size: 18px;
  color: var(--feest-ink);
  white-space: nowrap;
}
.feest-kids-value span { color: var(--feest-red); font-size: 24px; }
.feest-kids-totals {
  display: flex; gap: 14px; flex-wrap: wrap;
  font-size: 14px; color: var(--feest-muted);
  margin-bottom: 16px;
}
.feest-kids-totals .total { color: var(--feest-ink); font-weight: 700; margin-left: auto; }
.feest-kids-totals strong { color: var(--feest-ink); }

/* Goodiebag checkbox */
.feest-checkbox {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 16px 18px;
  background: var(--feest-paper);
  border: 1px solid var(--feest-line);
  border-radius: var(--feest-radius);
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 14px;
  margin-top: 8px;
}
.feest-checkbox input { margin-top: 3px; flex: 0 0 auto; accent-color: var(--feest-red); }
.feest-checkbox span { flex: 1; line-height: 1.5; }
.feest-checkbox strong { font-weight: 700; color: var(--feest-ink); }

/* ---------- Klant-dashboard (/mijn-feestje) ---------- */
.feest-flash {
  padding: 14px 18px; border-radius: var(--feest-radius);
  margin-bottom: 24px; font-size: 14px;
}
.feest-flash-info  { background: var(--feest-red-soft); color: var(--feest-red-dark); border: 1px solid rgba(124,58,237,0.18); }
.feest-flash-ok    { background: #DCFCE7; color: #166534; border: 1px solid #86EFAC; }
.feest-flash-error { background: #FEE2E2; color: #B81F2A; border: 1px solid #FECACA; }

.feest-dash-card {
  background: #fff;
  border: 1px solid var(--feest-line);
  border-radius: var(--feest-radius-card);
  padding: 28px 32px 32px;
  margin-bottom: 28px;
  box-shadow: var(--feest-shadow-card);
}
.feest-dash-head {
  display: flex; justify-content: space-between; align-items: start;
  flex-wrap: wrap; gap: 14px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--feest-line);
}
.feest-dash-status {
  display: inline-block; font-size: 11px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  padding: 5px 12px; border-radius: 999px;
  background: var(--feest-yellow); color: var(--feest-ink);
}
.feest-dash-status-bevestigd       { background: #DBEAFE; color: #1E40AF; }
.feest-dash-status-retainer_betaald,
.feest-dash-status-betaald,
.feest-dash-status-afgerond        { background: #DCFCE7; color: #166534; }
.feest-dash-status-bellen          { background: #FED7AA; color: #9A3412; }
.feest-dash-status-geannuleerd     { background: #E5E7EB; color: #4B5563; }

.feest-dash-progress {
  list-style: none; padding: 24px 0; margin: 0;
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  border-bottom: 1px solid var(--feest-line);
}
.feest-dash-progress li {
  display: flex; align-items: center; gap: 10px;
  font-size: 13px; color: var(--feest-muted);
  padding: 10px 12px;
  background: var(--feest-paper);
  border-radius: 10px;
}
.feest-dash-progress li > span {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 50%;
  background: #fff; color: var(--feest-muted);
  border: 1px solid var(--feest-line);
  font-weight: 700; font-size: 12px;
  flex: 0 0 auto;
}
.feest-dash-progress li.is-done {
  background: var(--feest-red-soft); color: var(--feest-red-dark);
}
.feest-dash-progress li.is-done > span {
  background: var(--feest-red); color: #fff; border-color: var(--feest-red);
}

.feest-dash-grid {
  display: grid; grid-template-columns: 1fr 320px; gap: 28px;
  margin-top: 24px;
}

.feest-dash-block {
  background: var(--feest-paper);
  border: 1px solid var(--feest-line);
  border-radius: var(--feest-radius);
  padding: 16px 20px;
  margin-bottom: 14px;
}
.feest-dash-block summary {
  cursor: pointer; list-style: none;
  display: flex; align-items: center; gap: 8px;
  font-size: 15px; padding: 4px 0;
}
.feest-dash-block summary::-webkit-details-marker { display: none; }
.feest-dash-block summary::after {
  content: '+'; margin-left: auto;
  font-size: 22px; font-weight: 600; color: var(--feest-muted);
  transition: transform .15s;
}
.feest-dash-block[open] summary::after { transform: rotate(45deg); color: var(--feest-red); }
.feest-dash-badge {
  background: var(--feest-red); color: #fff;
  font-size: 11px; font-weight: 700;
  padding: 2px 8px; border-radius: 999px;
}

.feest-chat {
  margin: 14px 0;
  max-height: 280px; overflow-y: auto;
  display: flex; flex-direction: column; gap: 10px;
}
.feest-chat-msg {
  padding: 10px 14px; border-radius: 12px;
  max-width: 85%; font-size: 14px; line-height: 1.5;
}
.feest-chat-msg.is-mine {
  background: var(--feest-red); color: #fff;
  align-self: flex-end;
  border-bottom-right-radius: 3px;
}
.feest-chat-msg.is-them {
  background: #fff; color: var(--feest-ink);
  border: 1px solid var(--feest-line);
  align-self: flex-start;
  border-bottom-left-radius: 3px;
}
.feest-chat-msg p { margin: 0; }
.feest-chat-msg small {
  display: block; margin-top: 4px;
  font-size: 11px; opacity: 0.75;
}
.feest-chat-form {
  display: flex; gap: 10px; align-items: end;
  margin-top: 12px;
}
.feest-chat-form textarea {
  flex: 1; padding: 10px 14px;
  border: 1px solid var(--feest-line);
  border-radius: var(--feest-radius);
  font-family: inherit; font-size: 14px;
  resize: vertical; min-height: 44px;
}

.feest-dash-actions {
  background: linear-gradient(135deg, var(--feest-red-soft) 0%, #fff 65%);
  border: 1px solid rgba(124,58,237,0.20);
  border-radius: var(--feest-radius);
  padding: 22px;
  margin-bottom: 16px;
}

.feest-dash-paid {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  background: #DCFCE7; color: #166534;
  padding: 14px; border-radius: var(--feest-radius);
  font-weight: 600; text-align: center;
}
.feest-dash-paid svg { flex: none; }

.feest-dash-cta-headline {
  margin: 0 0 14px;
}
.feest-dash-cta-headline strong {
  display: block; font-size: 16px; color: var(--feest-ink);
  margin-bottom: 4px;
}
.feest-dash-cta-headline span {
  display: block; font-size: 13px; color: var(--feest-muted);
}
.feest-dash-pay-form { margin: 0 0 12px; }
.feest-dash-pay-btn {
  width: 100%;
  background: var(--feest-yellow);
  color: var(--feest-ink) !important;
  font-size: 16px; padding: 16px;
  box-shadow: 0 6px 16px rgba(252,211,77,0.35);
}
.feest-dash-pay-btn:hover {
  background: var(--feest-yellow);
  filter: brightness(0.97);
}
.feest-dash-pay-note {
  font-size: 13px; color: var(--feest-muted); margin: 0;
  line-height: 1.5;
}
.feest-dash-action-note {
  font-size: 14px; color: var(--feest-ink-soft);
  margin: 14px 0 12px; line-height: 1.5;
}
.feest-dash-review-btn {
  display: block; text-align: center; text-decoration: none;
  width: 100%; box-sizing: border-box;
}

.feest-dash-waiting {
  background: #fff7ed;
  border: 1px solid #fed7aa;
  border-radius: 12px;
  padding: 16px;
}
.feest-dash-waiting-head {
  display: flex; align-items: center; gap: 10px;
  color: #9A3412; margin-bottom: 6px;
}
.feest-dash-waiting-head strong { font-size: 15px; }
.feest-dash-waiting p {
  font-size: 14px; color: var(--feest-muted);
  margin: 0; line-height: 1.5;
}

.feest-dash-ics-link {
  display: inline-flex; align-items: center; gap: 5px;
  color: var(--feest-red); text-decoration: none;
  font-weight: 500;
}
.feest-dash-ics-link:hover { text-decoration: underline; }

/* ---------- Login flow (mijn-feestje) ---------- */
.feest-login-form { max-width: 520px; }
.feest-login-help {
  margin: 14px 0 0;
  font-size: 14px; color: var(--feest-muted);
  text-align: center; line-height: 1.6;
}
.feest-login-help a {
  color: var(--feest-red);
  text-decoration: none;
  font-weight: 500;
}
.feest-login-help a:hover { text-decoration: underline; }
.feest-login-codesent {
  margin: 0 0 14px;
  color: var(--feest-muted);
  font-size: 15px;
}
.feest-login-code-input {
  font-size: 28px !important;
  letter-spacing: 0.5em;
  text-align: center;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* ---------- Dashboard greeting + card head ---------- */
.feest-dash-greeting {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 12px;
}
.feest-dash-logout-form { margin: 0; }
.feest-dash-logout-btn {
  padding: 8px 16px;
  font-size: 13px;
}
.feest-dash-head-info { flex: 1 1 60%; min-width: 0; }
.feest-dash-head-title {
  margin: 6px 0 4px;
  font-size: 24px;
  line-height: 1.2;
}
.feest-dash-head-meta {
  margin: 0;
  color: var(--feest-muted);
  line-height: 1.5;
}
.feest-dash-head-total {
  text-align: right;
  flex: 0 0 auto;
}
.feest-dash-head-total-label {
  font-size: 13px; color: var(--feest-muted);
}
.feest-dash-head-total-amount {
  font-size: 32px; font-weight: 800;
  color: var(--feest-red);
  line-height: 1;
}

/* ---------- Dashboard forms + chat helpers ---------- */
.feest-dash-form { margin-top: 14px; }
.feest-dash-btn-save {
  font-size: 14px;
  padding: 11px 20px;
}
.feest-dash-btn-toggle {
  font-size: 13px;
  padding: 9px 16px;
}
.feest-chat-empty {
  color: var(--feest-muted);
  font-size: 14px;
}
.feest-chat-send {
  padding: 10px 18px;
}
.feest-field-optional {
  color: var(--feest-muted);
  font-weight: 400;
}
.feest-field-narrow { max-width: 240px; }
.feest-field-wide { flex: 2 1 0; }
.feest-form-section-h3 {
  margin: 44px 0 6px;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.01em;
  padding-top: 24px;
  border-top: 1px solid var(--feest-line);
}
.feest-form-section-hint {
  margin: 0 0 22px;
  font-size: 14px;
  color: var(--feest-muted);
  line-height: 1.5;
}
.feest-form-section-hint:empty { display: none; }

/* Scarcity-banner: 'Nog X weekend-blokken vrij' boven calendar */
.feest-scarcity-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 18px;
  padding: 12px 16px;
  background: var(--feest-yellow-soft);
  border: 1px solid var(--feest-yellow);
  border-radius: var(--feest-radius);
  font-size: 14px;
  color: var(--feest-ink);
  line-height: 1.5;
}
.feest-scarcity-banner svg {
  flex-shrink: 0;
  color: var(--feest-yellow-dark);
}
.feest-scarcity-banner strong { color: var(--feest-yellow-dark); }

/* Email-typo suggester (mailcheck-light): subtiele hint onder het e-mail-veld */
.feest-email-suggest {
  margin: 6px 0 0;
  font-size: 13px;
  color: var(--feest-ink-soft);
  line-height: 1.4;
}
.feest-email-suggest[hidden] { display: none; }
.feest-email-suggest-btn {
  background: var(--feest-yellow-soft);
  border: 1px solid var(--feest-yellow);
  color: var(--feest-ink);
  padding: 2px 8px;
  border-radius: 6px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 120ms ease;
}
.feest-email-suggest-btn:hover {
  background: var(--feest-yellow);
}
/* Wrap-container voor de twee knoppen ('Bedoel je x@y.com?' + 'Nee, klopt al')
   zodat ze samen in een flex-rij blijven en netjes wrappen op smal scherm
   zonder rare margin-uitlijning. */
.feest-email-suggest-actions {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.feest-email-suggest-dismiss {
  background: transparent;
  border: 1px solid var(--feest-line);
  color: var(--feest-muted);
  padding: 2px 8px;
  border-radius: 6px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 120ms ease, color 120ms ease;
}
.feest-email-suggest-dismiss:hover {
  border-color: var(--feest-ink);
  color: var(--feest-ink);
}

/* Field-level error-styling: rode border + lichte rode achtergrond op invalid velden */
.feest-field.is-error label { color: #b91c1c; }
.feest-field.is-error input,
.feest-field.is-error select,
.feest-field.is-error textarea {
  border-color: #dc2626;
  background: #fef2f2;
}
.feest-field.is-error input:focus,
.feest-field.is-error select:focus,
.feest-field.is-error textarea:focus {
  border-color: #dc2626;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.18);
}

/* Sticky reservering-bar voor mobile (bottom-fixed). Op desktop verborgen.
   Toont datum/slot + prijs zodat klant ziet wat er gereserveerd wordt. */
.feest-form-sticky {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  background: #fff;
  border-top: 1px solid var(--feest-line);
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.08);
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  align-items: center;
  gap: 12px;
}
/* Info-blok mag krimpen (flex:1 + min-width:0) zodat ellipsis werkt
   en de Reserveer-knop nooit van het scherm wordt geduwd op iPhone SE-
   breedtes (320px). Knop houdt zijn natuurlijke breedte. */
.feest-form-sticky-info {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}
.feest-form-sticky-when {
  font-size: 11px;
  color: var(--feest-muted);
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.feest-form-sticky-amount {
  font-size: 18px;
  color: var(--feest-red);
  font-weight: 800;
  line-height: 1.1;
  margin-top: 2px;
}
.feest-form-sticky-btn {
  flex: 0 0 auto;
  font-size: 15px;
  padding: 12px 16px;
}

@media (max-width: 800px) {
  .feest-form-sticky { display: flex; }
  /* Extra ruimte onderaan zodat content niet onder de sticky-bar verstopt */
  .feest-form-page { padding-bottom: 90px; }
}
.feest-dash-callslots {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--feest-line);
}
.feest-dash-callslots strong { font-size: 13px; }
.feest-dash-callslot {
  font-size: 14px;
  margin-top: 6px;
}
.feest-dash-callslot-status { color: var(--feest-muted); }

/* ---------- Annulering-block ---------- */
.feest-dash-block-cancel summary { color: #7f1d1d; }
.feest-dash-cancel-info {
  margin: 14px 0 10px;
  font-size: 14px;
  color: var(--feest-muted);
  line-height: 1.5;
}
.feest-dash-cancel-info a { color: var(--feest-red); }
.feest-dash-btn-cancel {
  color: #dc2626 !important;
  border-color: #dc2626 !important;
  font-size: 14px;
  padding: 11px 20px;
}
.feest-dash-btn-cancel:hover {
  background: #fef2f2;
}

/* ---------- Niet-beschikbaar / planning ---------- */
.feest-dash-flash { margin: 0 0 12px; }
.feest-dash-pay-note-spaced { margin-top: 12px !important; }

/* ---------- Mobile dashboard layout ---------- */
@media (max-width: 720px) {
  .feest-dash-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  .feest-dash-head-total {
    text-align: left;
  }
  .feest-dash-head-total-amount {
    font-size: 26px;
  }
  .feest-dash-head-title {
    font-size: 20px;
  }
  .feest-dash-greeting h1 {
    font-size: 28px;
  }
}

.feest-dash-summary {
  background: var(--feest-paper);
  border: 1px solid var(--feest-line);
  border-radius: var(--feest-radius);
  padding: 22px;
}
.feest-dash-summary h3 {
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--feest-muted);
  margin: 0 0 14px;
}
.feest-dash-summary dl {
  display: grid; grid-template-columns: auto 1fr; gap: 6px 14px;
  margin: 0; font-size: 14px;
}
.feest-dash-summary dt { color: var(--feest-muted); }
.feest-dash-summary dd { margin: 0; color: var(--feest-ink); font-weight: 600; }

/* ---------- Bedankt-pagina ---------- */
.feest-thanks {
  text-align: center;
  padding: 64px 24px 80px;
  max-width: 640px; margin: 0 auto;
}
.feest-thanks-icon {
  display: inline-flex; margin: 0 0 18px;
}
.feest-thanks h1 {
  font-size: clamp(28px, 3.6vw, 38px);
  margin: 0 0 14px; font-weight: 800;
  letter-spacing: -0.01em;
}
.feest-thanks-lead {
  font-size: 17px; color: var(--feest-ink-soft);
  max-width: 540px; margin: 0 auto 18px;
  line-height: 1.55;
}
.feest-thanks-ref {
  display: inline-block; margin-left: 6px;
  padding: 2px 10px; border-radius: 999px;
  background: var(--feest-paper);
  border: 1px solid var(--feest-line);
  font-size: 13px; color: var(--feest-muted);
  font-family: var(--font-body); font-variant-numeric: tabular-nums;
}
.feest-thanks-mail {
  font-size: 14px; color: var(--feest-muted);
  max-width: 540px; margin: 0 auto 28px;
  padding: 12px 18px;
  background: var(--feest-yellow-soft);
  border-radius: var(--feest-radius);
  line-height: 1.5;
}

/* 3 stappen onder elkaar */
.feest-thanks-steps {
  list-style: none; padding: 0;
  max-width: 560px; margin: 0 auto 24px;
  text-align: left;
}
.feest-thanks-steps li {
  display: flex; gap: 16px;
  padding: 16px 20px;
  background: var(--feest-paper);
  border-radius: var(--feest-radius);
  margin-bottom: 10px;
}
.feest-thanks-num {
  flex: 0 0 36px; height: 36px;
  border-radius: 50%;
  background: var(--feest-red); color: #fff;
  font-weight: 700; font-size: 16px;
  display: flex; align-items: center; justify-content: center;
}
.feest-thanks-steps strong { display: block; margin-bottom: 2px; color: var(--feest-ink); }
.feest-thanks-steps span { color: var(--feest-muted); font-size: 14px; line-height: 1.5; }

/* Locatie-card */
.feest-thanks-locatie {
  max-width: 540px; margin: 24px auto;
  padding: 16px 22px;
  background: #fff;
  border: 1px solid var(--feest-line);
  border-radius: var(--feest-radius);
  font-size: 15px; line-height: 1.6;
  color: var(--feest-ink-soft);
  text-align: left;
}
.feest-thanks-locatie strong {
  display: block;
  font-size: 12px; text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--feest-muted); margin-bottom: 4px;
}
.feest-thanks-locatie small {
  display: block; margin-top: 4px;
  font-size: 13px; color: var(--feest-muted);
}

/* Acties */
.feest-thanks-actions { margin: 28px 0 18px; display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; align-items: center; }
.feest-thanks-actions .feest-btn-ghost { display: inline-flex; align-items: center; gap: 8px; }

/* Snel contact onderaan */
.feest-thanks-help {
  font-size: 14px; color: var(--feest-muted);
  margin: 12px auto 0; max-width: 540px;
}
.feest-thanks-help a { color: var(--feest-red); font-weight: 600; }

@media (max-width: 800px) {
  .feest-thanks { padding: 40px 18px 56px; }
  .feest-thanks-mail { font-size: 13px; padding: 10px 14px; }
  .feest-thanks-steps li { padding: 14px 16px; }
}

/* ---------- Footer ---------- */
.feest-foot {
  background: var(--feest-blue); color: #E8DEFA;
  padding: 48px 0 24px; margin-top: 80px;
}
.feest-foot-grid {
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 32px;
  padding-bottom: 28px; border-bottom: 1px solid rgba(255,255,255,0.14);
}
.feest-foot strong { color: #fff; display: block; margin-bottom: 8px; font-size: 16px; }
.feest-foot a { display: block; color: #C8B6E2; padding: 3px 0; font-size: 14px; }
.feest-foot a:hover { color: #fff; }
.feest-foot p, .feest-foot span {
  color: #C8B6E2; font-size: 14px; margin: 0; padding: 3px 0; display: block;
}
.feest-foot-bottom {
  padding-top: 18px; font-size: 12px; color: #9C8AB8;
}
.feest-foot-address {
  font-style: normal;
  line-height: 1.5;
  color: inherit;
  margin-bottom: 8px;
}
.feest-foot-parent {
  color: #C8B6E2 !important;
  font-size: 12px !important;
  margin-top: 8px;
}
.feest-foot-extra {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  margin-top: 24px;
  padding-top: 20px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 18px;
  font-size: 13px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.78);
}
.feest-foot-extra strong {
  display: block;
  color: #fff;
  margin-bottom: 4px;
}
.feest-foot-legal {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
  margin-bottom: 8px;
}
.feest-foot-legal a {
  color: rgba(255, 255, 255, 0.7) !important;
  font-size: 13px !important;
  display: inline !important;
  padding: 0 !important;
}
.feest-foot-legal a:hover { color: #fff !important; }

/* ---------- Home-page sections (gallery, locatie, features-head) ---------- */
.feest-home-section-wrap { max-width: 1100px; }
.feest-home-section-h2 {
  font-size: clamp(28px, 3.4vw, 40px);
  margin: 6px 0 16px;
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.feest-home-section-lead {
  color: var(--feest-ink-soft);
  margin: 0 0 20px;
  font-size: 17px;
  line-height: 1.6;
}

.feest-home-gallery {
  padding: 60px 24px;
  background: #fff;
  border-top: 1px solid var(--feest-line);
}
.feest-home-gallery-head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 24px;
}
.feest-home-gallery-head h2 { margin: 0; }
.feest-home-gallery-link {
  color: var(--feest-red);
  font-weight: 600;
  text-decoration: none;
}
.feest-home-gallery-link:hover { text-decoration: underline; }
.feest-home-gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
}
.feest-home-gallery-item {
  display: block;
  aspect-ratio: 1 / 1;
  background: var(--feest-line);
  border-radius: 8px;
  overflow: hidden;
}
.feest-home-gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 220ms ease;
}
.feest-home-gallery-item:hover img { transform: scale(1.04); }

.feest-home-locatie {
  padding: 60px 24px;
  background: #fff;
  border-top: 1px solid var(--feest-line);
}
.feest-home-locatie-cta {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.feest-home-features {
  padding: 50px 24px;
  background: var(--feest-paper);
  border-top: 1px solid var(--feest-line);
}
.feest-home-features-head {
  text-align: center;
  margin-bottom: 36px;
}
.feest-home-features-h2 {
  font-size: clamp(26px, 3vw, 36px);
  margin: 6px 0 0;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

@media (max-width: 700px) {
  .feest-home-gallery,
  .feest-home-locatie,
  .feest-home-features { padding: 36px 18px; }
  .feest-home-gallery-grid { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; }
}

/* ---------- Mobiel ---------- */
@media (max-width: 800px) {
  .feest-nav, .feest-cta, .feest-nav-dropdown { display: none; }
  .feest-burger { display: inline-flex; }
  .feest-urgency { font-size: 11px; padding: 8px 16px; letter-spacing: 0.10em; }
  .feest-logo-img { height: 56px; }
  .feest-header-inner { min-height: 80px; gap: 12px; justify-content: space-between; }
  .feest-logo { margin-right: auto; }     /* logo links, burger pinned uiterst rechts */
  .feest-burger { margin-left: auto; }

  /* Topbar: sterren links, telefoon rechts, op één regel */
  .feest-topbar { padding: 6px 0; font-size: 12px; }
  .feest-topbar-inner { grid-template-columns: auto auto; gap: 8px; align-items: center; }
  .feest-topbar-l { justify-self: start; min-height: 32px; display: inline-flex; align-items: center; }
  .feest-topbar-r { justify-self: end; }
  .feest-topbar-m { display: none; }
  .feest-topbar-login { display: none; } /* Mijn feestje staat in mobile-menu */
  .feest-topbar-tel { padding: 6px 8px; margin: -6px -8px; min-height: 32px; display: inline-flex; align-items: center; }
  .feest-stars { font-size: 12px; }

  /* Slider thumb groter voor accurate tap-control */
  .feest-kids-row input[type=range]::-webkit-slider-thumb { width: 28px; height: 28px; }
  .feest-kids-row input[type=range]::-moz-range-thumb { width: 28px; height: 28px; }

  /* Sticky CTA-bar tonen + ruimte onderaan reserveren */
  .feest-sticky-bar { display: flex; }
  .feest-main { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }

  .feest-hero { padding: 32px 0 40px; }
  .feest-hero-grid { grid-template-columns: 1fr; gap: 24px; }
  /* Meta-card op mobiel verbergen: prijs/locatie/boeken-info zit al in
     de hero-tagline en sub-tekst hierboven. Voorkomt scroll-burden. */
  .feest-hero-meta { display: none; }

  .feest-steps { padding: 48px 0; }
  .feest-steps h2 { margin-bottom: 24px; }
  .feest-steps-grid { grid-template-columns: 1fr; gap: 12px; }
  .feest-step { padding: 18px 18px; }
  .feest-step h3 { font-size: 17px; margin-bottom: 4px; }
  .feest-step p { font-size: 14px; line-height: 1.5; }
  .feest-step-num {
    width: 32px !important; height: 32px !important;
    font-size: 16px;
    margin-bottom: 8px;
  }
  .feest-pkg-grid { grid-template-columns: 1fr; gap: 16px; }
  .feest-pricing { padding: 56px 0; }
  .feest-pricing-grid { grid-template-columns: 1fr; }
  .feest-pricing-card { padding: 28px 22px; }
  .feest-pricing-amount { font-size: 56px; }
  .feest-pricing-amount-sm { font-size: 40px; }
  .feest-pricing-examples { gap: 14px; }
  .feest-dash-grid { grid-template-columns: 1fr; }
  .feest-dash-progress { grid-template-columns: 1fr; gap: 8px; }
  .feest-form-booking { padding: 22px; }
  .feest-cal-day { min-height: 48px; padding: 6px 4px; }
  .feest-detail-grid { grid-template-columns: 1fr; }
  .feest-detail-side { position: static; }
  /* Footer: alle blokken onder elkaar op mobiel; 2-koloms wordt te smal */
  .feest-foot { padding: 36px 0 18px; margin-top: 56px; }
  .feest-foot-grid { grid-template-columns: 1fr; gap: 22px; }
  .feest-foot strong { font-size: 14px; margin-bottom: 6px; }
  .feest-foot a, .feest-foot p, .feest-foot span { font-size: 13px; padding: 2px 0; }

  /* Catch-all: inline 2- en 3-koloms grids in pagina-templates worden
     1-koloms op mobiel, behalve grids die expliciet anders zijn opgezet
     (zoals .feest-hero-meta). Voorkomt smalle 'lege' blokjes naast elkaar. */
  [style*="grid-template-columns: 1fr 1fr"]:not(.feest-hero-meta),
  [style*="grid-template-columns:1fr 1fr"]:not(.feest-hero-meta),
  [style*="grid-template-columns: 1fr 1fr 1fr"]:not(.feest-hero-meta),
  [style*="grid-template-columns:1fr 1fr 1fr"]:not(.feest-hero-meta),
  [style*="grid-template-columns:repeat(2,1fr)"]:not(.feest-hero-meta),
  [style*="grid-template-columns: repeat(2, 1fr)"]:not(.feest-hero-meta),
  [style*="grid-template-columns:repeat(3,1fr)"]:not(.feest-hero-meta),
  [style*="grid-template-columns: repeat(3, 1fr)"]:not(.feest-hero-meta) {
    grid-template-columns: 1fr !important;
  }
}

/* ---------- Smal mobiel (< 480px) ---------- */
@media (max-width: 480px) {
  .feest-urgency { display: none; } /* verticale ruimte besparen op kleine schermen */
  .feest-topbar { font-size: 11px; }
  .feest-topbar-tel { font-size: 11px; font-weight: 600; opacity: 0.85; }
  /* Topbar minder dominant: tel rustiger, sterren bepalen het beeld */
  .feest-topbar-tel:hover { opacity: 1; }
  .feest-logo-img { height: 52px; }
  .feest-header-inner { min-height: 72px; }
  .feest-hero { padding: 28px 0 36px; }
  .feest-hero h1, .feest-hero-grid h1 { font-size: clamp(28px, 8vw, 36px); }
  .feest-hero-sub { font-size: 15px; line-height: 1.5; margin-bottom: 18px; }
  .feest-hero-sub-detail { display: none; } /* alleen kern-zin tonen op klein scherm */
  .feest-hero-ctas { gap: 8px; }
  .feest-hero-ctas .feest-btn-primary,
  .feest-hero-ctas .feest-btn-ghost { padding: 13px 18px; font-size: 14px; }
  .feest-sticky-cta { font-size: 15px; padding: 14px 16px; }

  /* .feest-hero-meta is op <800px al display:none; geen <480 override nodig */
}

/* ---------- Aanvraagformulier op mobiel (alle schermen <800px) ---------- */
@media (max-width: 800px) {
  /* iOS: voorkom auto-zoom bij tap op input/textarea/select.
     Onder 16px font-size triggert Safari een zoom die de layout verspringt. */
  .feest-field input,
  .feest-field select,
  .feest-field textarea,
  .rev-form input,
  .rev-form select,
  .rev-form textarea { font-size: 16px; }

  /* Stappen-progress compacter: alleen nummer + korte label, niet stapelen */
  .feest-form-progress { gap: 4px; margin-bottom: 20px; flex-wrap: nowrap; }
  .feest-form-progress li { min-width: 0; flex: 1; padding: 8px 6px; font-size: 11px; flex-direction: column; gap: 4px; text-align: center; line-height: 1.2; }
  .feest-form-progress li span { width: 22px; height: 22px; font-size: 12px; }

  /* Trust-row: stapelen op smal scherm zodat tekst niet breekt */
  .feest-form-trust { flex-direction: column; gap: 6px; padding-top: 14px; text-align: center; }
  .feest-form-trust span { border-right: 0; padding: 0; }

  .feest-cal-toolbar { flex-wrap: wrap; gap: 8px; }

  /* Slider-thumb groter op mobiel: vinger-tap is minder precies dan
     een muisklik, dus 32px ipv default ~16px voor comfort + zichtbaarheid. */
  .feest-kids-row input[type=range]::-webkit-slider-thumb {
    width: 32px; height: 32px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.18);
  }
  .feest-kids-row input[type=range]::-moz-range-thumb {
    width: 32px; height: 32px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.18);
  }
}

/* Reservering-summary 'Je reserveert: ...' op mobiel als block-layout.
   Op desktop is space-between mooi (label links, tekst rechts), maar
   bij lange tekst op smal scherm wordt het rommelig — daarom hier
   label boven tekst, beide links uitgelijnd. !important is nodig om
   eventuele browser-cache van eerdere flex-row-styling te overrulen. */
@media (max-width: 600px) {
  .feest-form-summary {
    display: block !important;
    width: 100%;
  }
  .feest-form-summary > * {
    width: 100%;
  }
  .feest-form-summary-row {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 4px;
  }
  .feest-form-summary-when-text {
    text-align: left;
    font-size: 14px;
  }
  .feest-form-summary-amount {
    font-size: 26px;
  }
}

/* Goodiebag-card head-row stacking + progress-labels compact op zeer smal
   scherm (<380px, bv. iPhone SE 1st gen 320px). */
@media (max-width: 380px) {
  .feest-goodie-card-head { flex-direction: column; align-items: flex-start; gap: 2px; }
  .feest-form-progress li { padding: 8px 4px; font-size: 10px; }
}

/* ---------- Prijs-pagina ---------- */
.feest-prijs-hero { padding: 72px 0 24px; }
.feest-prijs-h1 {
  font-size: clamp(36px, 4.6vw, 56px);
  margin: 4px 0 18px;
  line-height: 1.1;
}
.feest-prijs-h1-accent { color: var(--feest-red); }
.feest-prijs-lead {
  font-size: 18px;
  color: var(--feest-muted);
  line-height: 1.6;
  max-width: 640px;
}
.feest-prijs-pricing { padding: 24px 0 80px; }
.feest-prijs-h2 {
  font-size: clamp(28px, 3.4vw, 40px);
  margin: 0 0 14px;
  line-height: 1.2;
}
.feest-prijs-h2 em { font-style: normal; color: var(--feest-red); }
.feest-prijs-body {
  font-size: 16px;
  line-height: 1.7;
  color: var(--feest-ink-soft);
  margin: 0 0 14px;
}
.feest-prijs-retainer {
  padding: 60px 0;
  background: var(--feest-paper);
}
.feest-prijs-cancel-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 18px;
  margin-top: 24px;
}
.feest-prijs-cancel-card {
  padding: 20px;
  background: #fff;
  border-radius: var(--feest-radius);
  border: 1px solid var(--feest-line);
}
.feest-prijs-cancel-card strong {
  display: block;
  margin-bottom: 6px;
  font-size: 15px;
}
.feest-prijs-cancel-card span {
  color: var(--feest-muted);
  font-size: 14px;
  line-height: 1.5;
}

.feest-prijs-included { padding: 60px 0; }
.feest-prijs-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.feest-prijs-list li {
  padding: 12px 0;
  border-bottom: 1px solid var(--feest-line);
  display: flex;
  align-items: center;
  gap: 12px;
}
.feest-prijs-list li svg {
  flex: none;
  color: var(--feest-red);
}
.feest-prijs-footnote {
  font-size: 14px;
  color: var(--feest-muted);
  margin-top: 16px;
  line-height: 1.6;
}

.feest-prijs-final-cta {
  padding: 60px 0;
  background: var(--feest-paper);
}
.feest-prijs-final-cta-inner { text-align: center; }
.feest-prijs-final-lead {
  font-size: 17px;
  color: var(--feest-muted);
  margin-bottom: 24px;
}

@media (max-width: 700px) {
  .feest-prijs-hero { padding: 40px 0 18px; }
  .feest-prijs-cancel-grid { grid-template-columns: 1fr; gap: 12px; }
  .feest-prijs-cancel-card { padding: 16px 18px; }
  .feest-prijs-retainer,
  .feest-prijs-included,
  .feest-prijs-final-cta { padding: 40px 0; }
}

/* ---------- Reviews-pagina ---------- */
.feest-rev-section { padding: 50px 24px; }
.feest-rev-wrap { max-width: 780px; }

.feest-rev-summary {
  display: flex; align-items: center; gap: 18px;
  flex-wrap: wrap;
  margin: 14px 0 22px;
}
.feest-rev-summary-score {
  font-size: 56px; font-weight: 900;
  color: var(--feest-red);
  line-height: 1;
}
.feest-rev-summary-stars {
  display: flex; gap: 2px;
  color: var(--feest-yellow);
}
.feest-rev-summary-meta {
  font-size: 14px;
  color: var(--feest-muted);
  flex: 1 0 100%;
}

.feest-rev-star { display: inline-block; }
.feest-rev-star-empty { color: var(--feest-line); }
.feest-rev-star-full,
.feest-rev-star-half { color: var(--feest-yellow); }

.feest-rev-cta-top {
  display: flex; gap: 12px; flex-wrap: wrap;
  margin: 0 0 32px;
}

.feest-rev-card {
  background: #fff;
  border: 1px solid var(--feest-line);
  border-radius: var(--feest-radius);
  padding: 18px 22px;
  margin-bottom: 14px;
}
.feest-rev-card-stars {
  display: flex; gap: 1px;
  color: var(--feest-yellow);
  margin-bottom: 6px;
}
.feest-rev-card-title {
  margin: 8px 0 6px;
  font-size: 17px;
  line-height: 1.3;
}
.feest-rev-card-body {
  margin: 0;
  color: var(--feest-ink);
  line-height: 1.6;
}
.feest-rev-card-meta {
  font-size: 12px;
  color: var(--feest-muted);
  margin-top: 8px;
}

.feest-rev-empty {
  color: var(--feest-muted);
  text-align: center;
  padding: 30px 12px;
  font-size: 15px;
  line-height: 1.5;
}

.feest-rev-form-wrap {
  background: var(--feest-paper);
  border: 1px solid var(--feest-line);
  border-radius: var(--feest-radius);
  padding: 24px;
  margin-top: 36px;
}
.feest-rev-form-title {
  margin: 0 0 8px;
  font-size: 22px;
}
.feest-rev-form-lead {
  font-size: 14px;
  color: var(--feest-muted);
  margin: 0 0 18px;
  line-height: 1.5;
}

.feest-honeypot {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

@media (max-width: 700px) {
  .feest-rev-section { padding: 32px 18px; }
  .feest-rev-summary-score { font-size: 44px; }
  .feest-rev-form-wrap { padding: 18px; }
}

/* ---------- Galerij-pagina ---------- */
.feest-gal-section { padding: 60px 24px; }
.feest-gal-wrap { max-width: 1100px; }
.feest-gal-lead {
  font-size: 17px;
  color: var(--feest-muted);
  max-width: 680px;
  line-height: 1.6;
  margin: 8px 0 24px;
}

.feest-gal-empty {
  margin: 36px 0;
  padding: 48px 32px;
  background: var(--feest-paper);
  border: 2px dashed var(--feest-line);
  border-radius: 12px;
  text-align: center;
  color: var(--feest-muted);
}
.feest-gal-empty svg {
  color: var(--feest-red);
  margin-bottom: 12px;
}
.feest-gal-empty p {
  margin: 0 0 16px;
  font-size: 15px;
  line-height: 1.5;
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
}

.feest-gal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  margin-top: 24px;
}
.feest-gal-item {
  margin: 0;
  background: var(--feest-line);
  border-radius: 8px;
  overflow: hidden;
  position: relative;
  aspect-ratio: 4 / 3;
}
.feest-gal-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 220ms ease;
}
.feest-gal-item:hover img { transform: scale(1.04); }
.feest-gal-item figcaption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 10px 14px;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
  color: #fff;
  font-size: 12px;
  line-height: 1.4;
}

.feest-gal-cta {
  margin: 48px 0 32px;
  padding: 32px 28px;
  background: linear-gradient(135deg, var(--feest-red-soft) 0%, var(--feest-yellow-soft) 100%);
  border-radius: var(--feest-radius);
  text-align: center;
}
.feest-gal-cta h2 {
  margin: 0 0 8px;
  font-size: clamp(24px, 3vw, 32px);
}
.feest-gal-cta p {
  margin: 0 0 18px;
  color: var(--feest-ink-soft);
  font-size: 16px;
  line-height: 1.5;
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
}
.feest-gal-cta-buttons {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}

.feest-gal-share {
  margin-top: 32px;
  padding: 22px 26px;
  background: var(--feest-yellow-soft);
  border: 1px solid var(--feest-yellow);
  border-radius: 12px;
  max-width: 680px;
}
.feest-gal-share h3 {
  margin: 0 0 6px;
  font-size: 18px;
}
.feest-gal-share p {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--feest-ink-soft);
}
.feest-gal-share a { color: var(--feest-red); font-weight: 600; }

@media (max-width: 700px) {
  .feest-gal-section { padding: 32px 18px; }
  .feest-gal-grid { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 8px; }
  .feest-gal-empty { padding: 32px 18px; }
  .feest-gal-cta { padding: 24px 18px; }
  .feest-gal-share { padding: 18px 20px; }
}

/* ---------- Contact-pagina ---------- */
.feest-ct-section { padding: 60px 24px; }
.feest-ct-wrap { max-width: 1000px; }
.feest-ct-h1 {
  font-size: clamp(36px, 4.4vw, 48px);
  margin: 6px 0 12px;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.feest-ct-lead {
  font-size: 17px;
  color: var(--feest-muted);
  margin: 0 0 32px;
  max-width: 640px;
  line-height: 1.6;
}

/* Hero-CTA: full-width, paars, prominentere call-to-action */
.feest-ct-hero-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  background: linear-gradient(135deg, var(--feest-red) 0%, var(--feest-red-dark) 100%);
  color: #fff !important;
  padding: 28px 32px;
  border-radius: 16px;
  text-decoration: none;
  box-shadow: 0 8px 24px rgba(124, 58, 237, 0.18);
  transition: transform 160ms ease, box-shadow 160ms ease;
}
.feest-ct-hero-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(124, 58, 237, 0.28);
}
.feest-ct-hero-cta-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.feest-ct-hero-cta-eyebrow {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 700;
  opacity: 0.85;
}
.feest-ct-hero-cta strong {
  font-size: clamp(20px, 2.8vw, 26px);
  font-weight: 800;
  line-height: 1.2;
}
.feest-ct-hero-cta-sub {
  font-size: 14px;
  line-height: 1.5;
  opacity: 0.9;
  max-width: 520px;
}
.feest-ct-hero-cta-arrow {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  background: rgba(255, 255, 255, 0.18);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 160ms ease;
}
.feest-ct-hero-cta:hover .feest-ct-hero-cta-arrow {
  background: rgba(255, 255, 255, 0.3);
}

.feest-ct-grid-title {
  font-size: clamp(22px, 2.6vw, 28px);
  margin: 48px 0 20px;
  letter-spacing: -0.01em;
  text-align: center;
  color: var(--feest-ink);
}

.feest-ct-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-bottom: 18px;
}
.feest-ct-grid-info {
  grid-template-columns: repeat(2, 1fr);
  margin-top: 18px;
}

.feest-ct-card {
  background: #fff;
  border: 1px solid var(--feest-line);
  border-radius: 14px;
  padding: 26px 24px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  transition: border-color 160ms ease, transform 160ms ease;
}
.feest-ct-card:hover {
  border-color: var(--feest-red);
  transform: translateY(-2px);
}
.feest-ct-card-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: var(--feest-red-soft);
  color: var(--feest-red);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 4px;
}
.feest-ct-card h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--feest-ink);
}
.feest-ct-card-link {
  font-size: 16px;
  font-weight: 600;
  color: var(--feest-red);
  text-decoration: none;
  word-break: break-word;
}
.feest-ct-card-link:hover { text-decoration: underline; }
.feest-ct-card-link-disabled {
  color: var(--feest-muted) !important;
  cursor: not-allowed;
}
.feest-ct-card-body {
  font-size: 14px;
  line-height: 1.55;
  color: var(--feest-ink-soft);
  margin: 0;
}
.feest-ct-card-body strong { color: var(--feest-ink); }
.feest-ct-sub {
  color: var(--feest-muted);
  font-size: 13px;
  line-height: 1.5;
}

.feest-ct-card-info {
  /* Info-cards (locatie, tijden) iets ruimer */
  padding: 28px;
  gap: 12px;
}

.feest-ct-card-soon {
  opacity: 0.75;
  background: var(--feest-paper);
}
.feest-ct-card-soon .feest-ct-card-icon {
  background: rgba(0, 0, 0, 0.05);
  color: var(--feest-muted);
}
.feest-ct-card-soon:hover {
  border-color: var(--feest-line);
  transform: none;
}

.feest-ct-soon-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 9px;
  background: var(--feest-yellow);
  color: var(--feest-ink);
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  vertical-align: middle;
}

@media (max-width: 800px) {
  .feest-ct-hero-cta {
    flex-direction: column;
    text-align: left;
    align-items: flex-start;
    padding: 22px 22px 26px;
  }
  .feest-ct-hero-cta-arrow {
    width: 44px;
    height: 44px;
    align-self: flex-end;
  }
  .feest-ct-grid,
  .feest-ct-grid-info { grid-template-columns: 1fr; gap: 14px; }
}
@media (max-width: 700px) {
  .feest-ct-section { padding: 36px 18px; }
  .feest-ct-card { padding: 22px 20px; }
  .feest-ct-card-info { padding: 22px 20px; }
  .feest-ct-grid-title { margin: 36px 0 16px; }
}

/* ---------- FAQ-pagina ---------- */
.feest-faq-section { padding: 50px 24px; }
.feest-faq-wrap { max-width: 740px; }

.feest-faq { margin-top: 32px; }
.feest-faq details {
  background: #fff;
  border: 2px solid var(--feest-line);
  border-radius: 12px;
  padding: 14px 18px;
  margin-bottom: 12px;
  transition: border-color 160ms ease;
}
.feest-faq details[open] { border-color: var(--feest-red); }
.feest-faq summary {
  font-weight: 700;
  font-size: 16px;
  cursor: pointer;
  list-style: none;
  position: relative;
  padding-right: 32px;
  line-height: 1.4;
}
.feest-faq summary::-webkit-details-marker { display: none; }
.feest-faq summary::after {
  content: '+';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  color: var(--feest-red);
  font-size: 24px;
  font-weight: 400;
  line-height: 1;
}
.feest-faq details[open] summary::after { content: '−'; }
.feest-faq details p {
  margin: 12px 0 0;
  color: var(--feest-ink-soft);
  line-height: 1.6;
}
.feest-faq details p a { color: var(--feest-red); }

.feest-faq-cta {
  margin-top: 48px;
  padding: 32px 28px;
  background: linear-gradient(135deg, var(--feest-red-soft) 0%, var(--feest-yellow-soft) 100%);
  border-radius: var(--feest-radius);
  text-align: center;
}
.feest-faq-cta h2 {
  margin: 0 0 8px;
  font-size: clamp(22px, 2.6vw, 28px);
}
.feest-faq-cta p {
  margin: 0 0 18px;
  color: var(--feest-ink-soft);
  font-size: 15px;
  line-height: 1.5;
}
.feest-faq-cta-buttons {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}

@media (max-width: 700px) {
  .feest-faq-section { padding: 32px 18px; }
  .feest-faq summary { font-size: 15px; }
  .feest-faq-cta { padding: 24px 20px; margin-top: 36px; }
}

/* ---------- Leeftijd-overzicht (/leeftijd) ---------- */
.feest-lf-overview-hero { padding: 72px 0 32px; }
.feest-lf-overview-h1 {
  font-size: clamp(36px, 4.6vw, 56px);
  line-height: 1.1;
  margin: 4px 0 16px;
}
.feest-lf-overview-lead {
  font-size: 18px;
  line-height: 1.6;
  color: var(--feest-muted);
  max-width: 600px;
  margin: 0 0 22px;
}
.feest-lf-overview-cta {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.feest-lf-overview-grid-section { padding: 0 0 72px; }
.feest-lf-overview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}
.feest-lf-overview-card {
  display: block;
  background: #fff;
  border: 1px solid var(--feest-line);
  border-radius: var(--feest-radius);
  padding: 22px;
  text-decoration: none;
  color: var(--feest-ink);
  transition: border-color 160ms ease, transform 160ms ease;
}
.feest-lf-overview-card:hover {
  border-color: var(--feest-red);
  transform: translateY(-2px);
}
.feest-lf-overview-num {
  font-family: var(--font-display);
  font-size: 48px;
  font-weight: 800;
  color: var(--feest-red);
  line-height: 1;
  letter-spacing: -0.02em;
}
.feest-lf-overview-num span {
  font-size: 18px;
  color: var(--feest-muted);
  font-weight: 600;
}
.feest-lf-overview-desc {
  margin: 12px 0 0;
  font-size: 14px;
  color: var(--feest-muted);
  line-height: 1.5;
}

/* ---------- Leeftijd-detail (/kinderfeestje-N-jaar) ---------- */
.feest-lf-hero {
  padding: 64px 0 48px;
  background: linear-gradient(135deg, var(--feest-red-soft) 0%, var(--feest-yellow-soft) 100%);
}
.feest-lf-h1 {
  font-size: clamp(32px, 4.2vw, 48px);
  margin: 4px 0 16px;
  line-height: 1.15;
}
.feest-lf-lead {
  font-size: 18px;
  line-height: 1.6;
  color: var(--feest-ink-soft);
  max-width: 640px;
  margin: 0;
}
.feest-lf-meta-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
  margin: 24px 0;
}
.feest-lf-meta-grid > div {
  background: #fff;
  border: 1px solid var(--feest-line);
  border-radius: var(--feest-radius);
  padding: 18px 20px;
}
.feest-lf-meta-grid strong {
  display: block;
  color: var(--feest-red);
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 4px;
  font-family: var(--font-display);
}
.feest-lf-meta-grid span {
  color: var(--feest-muted);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 600;
}
.feest-lf-hero-cta { margin-top: 20px; }

.feest-lf-content { padding: 60px 0; }
.feest-lf-card {
  background: #fff;
  border: 1px solid var(--feest-line);
  border-radius: var(--feest-radius);
  padding: 24px;
  margin: 16px 0;
}
.feest-lf-card h2 {
  font-size: 22px;
  margin: 0 0 12px;
  line-height: 1.3;
}
.feest-lf-card-body {
  margin: 0 0 8px;
  line-height: 1.6;
}
.feest-lf-card-examples {
  color: var(--feest-muted);
  font-size: 14px;
  margin: 0;
  line-height: 1.5;
}
.feest-lf-tips {
  padding-left: 20px;
  margin: 0;
}
.feest-lf-tips li {
  margin: 8px 0;
  line-height: 1.5;
}
.feest-lf-card-pricing {
  background: var(--feest-red-soft);
  border-color: rgba(124, 58, 237, 0.20);
}
.feest-lf-card-pricing h2 { color: var(--feest-red-dark); }
.feest-lf-card-cta { margin: 16px 0 0; }

.feest-lf-nearby {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 32px;
}
.feest-lf-nearby a {
  display: block;
  padding: 18px 22px;
  background: var(--feest-paper);
  border: 1px solid var(--feest-line);
  border-radius: var(--feest-radius);
  text-decoration: none;
  color: var(--feest-ink);
  transition: border-color 160ms ease;
}
.feest-lf-nearby a:hover { border-color: var(--feest-red); }
.feest-lf-nearby small {
  display: block;
  color: var(--feest-muted);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 600;
}
.feest-lf-nearby strong {
  display: block;
  font-size: 16px;
  margin-top: 4px;
}
.feest-lf-nearby-next { text-align: right; }

@media (max-width: 800px) {
  .feest-lf-nearby { grid-template-columns: 1fr; }
  .feest-lf-nearby-next { text-align: left; }
}
@media (max-width: 700px) {
  .feest-lf-overview-hero { padding: 40px 0 24px; }
  .feest-lf-overview-grid-section { padding: 0 0 40px; }
  .feest-lf-hero { padding: 36px 0 28px; }
  .feest-lf-content { padding: 36px 0; }
  .feest-lf-card { padding: 20px; }
  .feest-lf-meta-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .feest-lf-meta-grid > div { padding: 14px 16px; }
  .feest-lf-meta-grid strong { font-size: 18px; }
}

/* ---------- Plaatsen-overzicht (/plaatsen) ---------- */
.feest-pls-hero { padding: 56px 0 32px; }
.feest-pls-hero h1 {
  font-size: clamp(32px, 4.4vw, 52px);
  margin: 4px 0 18px;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.feest-pls-accent { color: var(--feest-red); }
.feest-pls-lead {
  font-size: 17px;
  line-height: 1.6;
  color: var(--feest-muted);
  max-width: 640px;
  margin: 0 0 24px;
}
.feest-pls-loc-card {
  background: #fff;
  border: 2px solid var(--feest-red);
  border-radius: var(--feest-radius);
  padding: 22px 24px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 18px;
  align-items: center;
  margin: 24px 0;
}
.feest-pls-loc-card address { font-style: normal; line-height: 1.5; font-size: 15px; }
.feest-pls-loc-eyebrow {
  display: block;
  font-size: 13px;
  color: var(--feest-muted);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 4px;
  font-weight: 700;
}
.feest-pls-loc-name { font-size: 17px; }
.feest-pls-loc-meta {
  margin: 10px 0 0;
  font-size: 14px;
  color: var(--feest-muted);
}

.feest-pls-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
  margin-top: 24px;
}
.feest-pls-card {
  display: flex;
  flex-direction: column;
  padding: 20px 22px;
  background: #fff;
  border: 1px solid var(--feest-line);
  border-radius: var(--feest-radius);
  text-decoration: none;
  color: var(--feest-ink);
  transition: border-color 150ms ease, transform 150ms ease;
}
.feest-pls-card:hover {
  border-color: var(--feest-red);
  transform: translateY(-2px);
}
.feest-pls-card strong { font-size: 18px; margin-bottom: 6px; }
.feest-pls-time {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--feest-yellow);
  color: var(--feest-ink);
  font-size: 12px;
  font-weight: 700;
  align-self: flex-start;
  margin-bottom: 8px;
}
.feest-pls-route {
  color: var(--feest-muted);
  font-size: 13px;
  line-height: 1.5;
}
.feest-pls-arrow {
  margin-top: 10px;
  color: var(--feest-red);
  font-weight: 600;
  font-size: 13px;
}
.feest-pls-card.is-bussum {
  background: var(--feest-red-soft);
  border-color: var(--feest-red);
}

.feest-pls-fallback {
  margin-top: 32px;
  padding: 18px 22px;
  background: var(--feest-paper);
  border-radius: var(--feest-radius);
  font-size: 14px;
  color: var(--feest-ink-soft);
  line-height: 1.6;
}
.feest-pls-fallback a {
  color: var(--feest-red);
  font-weight: 600;
}
.feest-pls-final-cta {
  text-align: center;
  margin-top: 36px;
}

@media (max-width: 600px) {
  .feest-pls-loc-card { grid-template-columns: 1fr; }
}

/* ---------- Plaats-detail (/lego-feestje-X) ---------- */
.feest-pl-crumb,
.feest-bp-crumb {
  margin: 0 auto;
  padding: 14px 24px;
  font-size: 13px;
  color: var(--feest-muted);
}
.feest-pl-crumb { max-width: 1100px; }
.feest-bp-crumb { max-width: 760px; }
.feest-pl-crumb a,
.feest-bp-crumb a { color: inherit; text-decoration: none; }
.feest-pl-crumb a:hover,
.feest-bp-crumb a:hover { color: var(--feest-red); }
.feest-pl-crumb span,
.feest-bp-crumb span { color: var(--feest-ink); }

.feest-pl-hero { padding-top: 30px; }
.feest-pl-narrow { max-width: 780px; }
.feest-pl-h2 { margin: 4px 0 14px; }

.feest-pl-intro {
  max-width: 780px;
  margin: 0 0 30px;
  color: var(--feest-muted);
  font-size: 16px;
  line-height: 1.6;
}

.feest-pl-locatie {
  padding: 60px 24px;
  background: var(--feest-paper);
}
.feest-pl-loc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  margin: 20px 0;
}
.feest-pl-loc-card {
  background: #fff;
  padding: 16px 20px;
  border-radius: var(--feest-radius);
  border: 1px solid var(--feest-line);
}
.feest-pl-loc-card strong {
  display: block;
  color: var(--feest-muted);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 4px;
  font-weight: 700;
}
.feest-pl-loc-card .feest-pl-loc-time {
  font-size: 22px;
  font-weight: 700;
}
.feest-pl-loc-card .feest-pl-loc-text { font-size: 15px; }
.feest-pl-loc-card p {
  margin: 6px 0 0;
  font-size: 14px;
  color: var(--feest-ink-soft);
}

.feest-pl-reviews { padding: 60px 24px; }
.feest-pl-reviews-head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 24px;
}
.feest-pl-reviews-head h2 { margin: 0 0 6px; }
.feest-pl-reviews-head p { margin: 0; color: var(--feest-muted); }
.feest-pl-reviews-head p strong { color: var(--feest-red); }
.feest-pl-reviews-link {
  color: var(--feest-red);
  font-weight: 600;
  text-decoration: none;
}
.feest-pl-reviews-link:hover { text-decoration: underline; }
.feest-pl-reviews-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
}
.feest-pl-review-card {
  background: #fff;
  padding: 20px 24px;
  border-radius: 10px;
  border: 1px solid var(--feest-line);
}
.feest-pl-review-stars {
  display: flex;
  gap: 1px;
  margin-bottom: 6px;
}
.feest-pl-review-title {
  margin: 8px 0 6px;
  font-size: 16px;
  line-height: 1.3;
}
.feest-pl-review-body {
  margin: 0;
  color: var(--feest-ink);
  font-size: 14px;
  line-height: 1.55;
}
.feest-pl-review-author {
  margin-top: 10px;
  font-size: 12px;
  color: var(--feest-muted);
}

.feest-pl-tip { padding: 50px 24px; }
.feest-pl-tip-body {
  font-size: 16px;
  color: var(--feest-ink);
  line-height: 1.7;
}
.feest-pl-final-cta {
  margin-top: 30px;
  padding: 18px 22px;
  background: var(--feest-yellow-soft);
  border: 2px solid var(--feest-yellow);
  border-radius: 10px;
}
.feest-pl-final-cta-eyebrow {
  font-size: 13px;
  color: var(--feest-yellow-dark);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 6px;
}
.feest-pl-final-cta p { margin: 0 0 12px; }

@media (max-width: 700px) {
  .feest-pl-locatie,
  .feest-pl-reviews,
  .feest-pl-tip { padding: 40px 18px; }
  .feest-pl-final-cta { padding: 16px 18px; }
}

/* ---------- Printables-pagina ---------- */
.feest-pr-hero {
  background: var(--feest-yellow-soft);
  padding: 50px 24px 40px;
  border-bottom: 2px solid var(--feest-yellow);
}
.feest-pr-hero-inner {
  max-width: 780px;
  text-align: center;
}
.feest-pr-eyebrow {
  font-size: 13px;
  color: var(--feest-yellow-dark);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 700;
  margin-bottom: 8px;
}
.feest-pr-h1 {
  margin: 0 0 12px;
  font-size: clamp(28px, 4.4vw, 40px);
  line-height: 1.2;
}
.feest-pr-lead {
  font-size: 18px;
  color: var(--feest-ink-soft);
  line-height: 1.5;
  margin: 0 0 20px;
}
.feest-pr-print-btn {
  background: var(--feest-red);
  color: #fff;
  padding: 10px 20px;
  border-radius: 8px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  border: 0;
  cursor: pointer;
  font-size: 15px;
  transition: background 150ms ease;
}
.feest-pr-print-btn:hover { background: var(--feest-red-dark); }

.feest-pr-content { padding: 50px 24px; }
.feest-pr-narrow { max-width: 780px; }

.feest-pr-card {
  background: #fff;
  border: 1px solid var(--feest-line);
  border-radius: 14px;
  padding: 26px;
  margin: 20px 0;
}
.feest-pr-card h2 {
  margin-top: 0;
  color: var(--feest-red);
  line-height: 1.3;
}
.feest-pr-template {
  background: var(--feest-paper);
  border: 1px dashed var(--feest-line);
  border-radius: 10px;
  padding: 18px 22px;
  margin: 14px 0;
  font-family: Georgia, serif;
  font-size: 15px;
  line-height: 1.6;
}
.feest-pr-template strong { color: var(--feest-red); }
.feest-pr-tip {
  font-size: 13px;
  color: var(--feest-muted);
  margin-top: 12px;
}

.feest-pr-game-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
  margin: 18px 0;
}
.feest-pr-game {
  background: var(--feest-paper);
  border: 1px solid var(--feest-line);
  border-radius: 10px;
  padding: 16px;
}
.feest-pr-game h3 {
  margin: 0 0 6px;
  font-size: 16px;
  color: var(--feest-ink);
}
.feest-pr-game-meta {
  font-size: 12px;
  color: var(--feest-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 10px;
  font-weight: 600;
}
.feest-pr-game p {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--feest-ink-soft);
}

.feest-pr-card-cta {
  background: var(--feest-red-soft);
  border-color: var(--feest-red);
  text-align: center;
}
.feest-pr-card-cta h2 { color: var(--feest-red-dark); }
.feest-pr-cta-btn {
  display: inline-block;
  margin-top: 14px;
}

@media print {
  .feest-header, .feest-footer, .feest-pr-hero, .feest-pr-print-btn,
  header, footer, nav { display: none !important; }
  .feest-pr-card { border: none; padding: 0; margin: 12px 0; }
  .feest-pr-card h2 { page-break-after: avoid; }
  .feest-pr-game { break-inside: avoid; }
}

@media (max-width: 700px) {
  .feest-pr-hero { padding: 32px 18px 28px; }
  .feest-pr-content { padding: 32px 18px; }
  .feest-pr-card { padding: 20px; }
  .feest-pr-template { padding: 14px 16px; font-size: 14px; }
}

/* ---------- Juridische paginas (voorwaarden, privacy, cookies, disclaimer) ---------- */
.legal {
  max-width: 760px;
  margin: 0 auto;
  padding: 60px 20px;
  line-height: 1.7;
  color: var(--feest-ink-soft);
}
.legal h1 {
  font-size: clamp(32px, 4vw, 48px);
  margin: 0 0 8px;
  color: var(--feest-ink);
  line-height: 1.15;
}
.legal .meta {
  color: var(--feest-muted);
  font-size: 14px;
  margin-bottom: 32px;
}
.legal h2 {
  font-size: 22px;
  margin: 32px 0 12px;
  color: var(--feest-ink);
  line-height: 1.3;
}
.legal h3 {
  font-size: 17px;
  margin: 18px 0 8px;
  color: var(--feest-ink);
}
.legal p, .legal li { font-size: 15px; }
.legal ul, .legal ol {
  padding-left: 22px;
  margin: 8px 0 16px;
}
.legal li { margin: 4px 0; }
.legal a {
  color: var(--feest-red);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
.legal a:hover { text-decoration-thickness: 2px; }
.legal table {
  width: 100%;
  border-collapse: collapse;
  margin: 12px 0 20px;
  font-size: 14px;
}
.legal th, .legal td {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--feest-line);
  vertical-align: top;
}
.legal th {
  background: var(--feest-paper);
  font-weight: 700;
  color: var(--feest-ink);
}
.legal code {
  background: var(--feest-paper);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 12px;
}
.legal-box {
  background: var(--feest-paper);
  border: 1px solid var(--feest-line);
  border-radius: 12px;
  padding: 18px 22px;
  margin: 16px 0;
  font-size: 14px;
}
.legal-box strong { color: var(--feest-ink); }
.legal-footer {
  margin-top: 40px;
  color: var(--feest-muted);
  font-size: 13px;
}

@media (max-width: 700px) {
  .legal { padding: 36px 18px; }
  .legal table { font-size: 13px; }
  .legal th, .legal td { padding: 8px; }
}