/* UitTocht — Fase 1 design quick-win (2026-07-29): van "flashy neon-template" naar
   "premium redactioneel". Warm-donker, één ember/amber-accent, Fraunces (display) +
   Hanken Grotesk (tekst), flat i.p.v. neon-gradients. Gescoped onder .uittocht-app.
   Oude kleur-vars (magenta/violet/cyan/gold) blijven als alias→amber staan zodat niets
   breekt, maar visueel is er nog maar 1 accentkleur.

   Fase 2, deel 3 (2026-07-30): component-niveau bovenop de quick-win. Eén echte
   token-laag (kleur/type/space/radius) — componenten verwijzen er ALLEEN naar, geen
   losse hex/ad-hoc px meer. Stop-card herbouwd tot "itinerary-entry" (redactioneel
   i.p.v. flashy), chips van gevulde amber-fill naar hairline-outline, foto-fallback
   van emoji naar typografische initiaal, en een subtiele gestaggerde reveal bij het
   bouwen van een tocht. De teaser (wp/uittocht-frontpage.php) gebruikt dezelfde
   tokenwaarden — bewust niet via CSS-vars (die inline-band leeft los van deze file
   in het thema), maar met identieke getallen, zodat er geen tweede palet ontstaat.

   Nachtleven-kleurpass (2026-07-30): Fase 2 was te ingetogen voor uitgaan/nachtleven.
   Basis warmer/dieper (richting plum-zwart i.p.v. neutraal near-black) en er komt
   NAAST amber (blijft primair: CTA/stopnummers/actieve keuze) precies één nachtaccent
   bij — --neon, warm bar-magenta — bewust spaarzaam op de arc-bar en de "hot"-facetten
   (dansen/livemuziek/cocktails e.d.). Max 2 accenten, geen 3e kleur erbij, glows blijven
   subtiel (géén stapeling). Discipline uit Fase 2 (typografie/spacing/tokens) blijft. */
.uittocht-app{
  /* ---- kleur-rollen (single source) ---- */
  --bg:#160a12; --bg2:#241019; --surface:rgba(255,255,255,.045); --ink:#F7ECF2; --muted:#AE97A1;
  --line:rgba(247,236,242,.14);
  --amber:#E4A548; --amber-soft:rgba(228,165,72,.14); --amber-ink:#1c1509;
  /* nachtaccent — spaarzaam: arc-bar (amber→neon) + "hot"-facetchips, zie verderop */
  --neon:#FF3D8A; --neon-soft:rgba(255,61,138,.14);
  /* oude namen als alias zodat niets breekt (Fase 1-conventie doorgetrokken) */
  --card:var(--surface); --card-b:var(--line);
  --magenta:var(--amber); --orange:var(--amber); --cyan:var(--amber); --violet:var(--amber); --gold:var(--amber);

  --font-display:'Fraunces',Georgia,serif; --font-text:'Hanken Grotesk',system-ui,-apple-system,Helvetica,Arial,sans-serif;

  /* ---- type-scale ---- */
  --fs-caption:12px; --fs-label:13px; --fs-body:15px; --fs-lead:18px; --fs-venue:24px; --fs-title:34px;

  /* ---- space-scale (4px-basis) ---- */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px;

  /* ---- radius-schaal ---- */
  --r-chip:4px; --r-card:10px; --r-full:999px; --r-frame:24px;

  font-family:var(--font-text);
  font-size:var(--fs-body);
  color:var(--ink);
  background:
    radial-gradient(950px 600px at 86% -12%, var(--amber-soft), transparent 60%),
    radial-gradient(720px 520px at 4% 106%, var(--neon-soft), transparent 62%),
    linear-gradient(180deg, var(--bg), var(--bg2));
  border-radius:var(--r-frame);
  padding:var(--s2) 0 var(--s7);
  overflow-x:hidden;
}
.uittocht-app *{box-sizing:border-box}
.uittocht-app .wrap{max-width:1180px;margin:0 auto;padding:0 var(--s5)}

.uittocht-app .topbar{display:flex;align-items:center;justify-content:space-between;padding:var(--s5) 0 var(--s2)}
.uittocht-app .brand{display:flex;align-items:center;gap:var(--s3);font-weight:700;letter-spacing:.5px}
.uittocht-app .brand .dot{width:10px;height:10px;border-radius:var(--r-full);background:var(--amber)}
.uittocht-app .brand small{color:var(--muted);font-weight:600;letter-spacing:2px;text-transform:uppercase;font-size:var(--fs-caption)}
.uittocht-app .navcity{font-size:var(--fs-label);color:var(--muted);border:1px solid var(--line);padding:var(--s2) var(--s4);border-radius:var(--r-card);background:var(--surface)}
.uittocht-app .navcity b{color:var(--amber)}

.uittocht-app .hero{padding:var(--s5) 0 var(--s6);position:relative}
.uittocht-app .kicker{display:inline-flex;align-items:center;gap:var(--s2);font-size:var(--fs-caption);letter-spacing:3px;text-transform:uppercase;color:var(--amber);font-weight:700;margin-bottom:var(--s4)}
.uittocht-app .kicker::before{content:"";width:26px;height:2px;background:var(--amber)}
/* .hero-h1 = visueel identiek aan h1, maar géén <h1> (SEO: enige h1 = de
   keyword-rijke thema-paginatitel, dit is de actie-kop eronder) */
.uittocht-app h1,
.uittocht-app .hero-h1{
  font-family:var(--font-display);
  font-size:clamp(40px,7vw,84px);line-height:.98;font-weight:700;letter-spacing:-1px;margin:0;
  color:var(--ink);
}
.uittocht-app h1 span,
.uittocht-app .hero-h1 span{color:var(--amber)}
.uittocht-app .hero p.lead{margin-top:var(--s4);font-size:var(--fs-lead);max-width:640px;color:var(--muted);line-height:1.5;font-weight:400}
.uittocht-app .hero p.lead b{color:var(--ink)}

.uittocht-app .builder{
  margin-top:var(--s5);background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02));
  border:1px solid var(--line);border-radius:20px;padding:var(--s6);position:relative;
  box-shadow:0 20px 50px rgba(0,0,0,.35);
}
.uittocht-app .builder h2{font-family:var(--font-text);font-size:var(--fs-caption);letter-spacing:2px;text-transform:uppercase;color:var(--muted);font-weight:700;margin-bottom:var(--s4)}
.uittocht-app .field-label{font-size:var(--fs-label);color:var(--muted);margin:var(--s5) 0 var(--s3);font-weight:600;letter-spacing:.4px}

.uittocht-app .occasions{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--s3)}
.uittocht-app .occ{
  border:1px solid var(--line);border-radius:14px;padding:var(--s4) var(--s3);text-align:center;cursor:pointer;
  background:var(--surface);transition:.18s;position:relative;overflow:hidden;color:var(--ink)
}
.uittocht-app .occ .emo{font-size:30px;display:block;margin-bottom:var(--s2)}
.uittocht-app .occ .nm{font-weight:700;font-size:var(--fs-body)}
.uittocht-app .occ .sub{font-size:var(--fs-caption);color:var(--muted);margin-top:3px}
.uittocht-app .occ.active{border-color:var(--amber);background:var(--amber);color:var(--amber-ink);transform:translateY(-2px)}
.uittocht-app .occ.active .nm{color:var(--amber-ink)}
.uittocht-app .occ.active .sub{color:rgba(28,21,9,.7)}

.uittocht-app .row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:var(--s4);margin-top:6px}
.uittocht-app .pill-group{display:flex;gap:var(--s2);flex-wrap:wrap}
.uittocht-app .pill{border:1px solid var(--line);background:var(--surface);border-radius:var(--r-card);padding:9px 15px;font-size:var(--fs-label);font-weight:600;cursor:pointer;transition:.15s;color:var(--ink)}
.uittocht-app .pill.on{background:var(--amber);border-color:var(--amber);color:var(--amber-ink)}
.uittocht-app .mini{font-size:var(--fs-caption);color:var(--muted);margin-top:var(--s2)}

.uittocht-app .cta{
  margin-top:var(--s6);width:100%;border:none;cursor:pointer;border-radius:var(--r-card);padding:20px;
  font-size:19px;font-weight:700;letter-spacing:.2px;color:var(--amber-ink);
  /* subtiel amber→neon-verloop op de primaire CTA — dezelfde "borrel naar nacht"-
     beweging als de arc-bar, terughoudend (amber blijft dominant) */
  background:linear-gradient(100deg,var(--amber) 10%,var(--neon) 150%);
  box-shadow:0 10px 24px rgba(0,0,0,.3);transition:.15s
}
.uittocht-app .cta:hover{transform:translateY(-2px)}
.uittocht-app .cta[disabled]{opacity:.6;cursor:progress;transform:none}
.uittocht-app .cta .arrow{display:inline-block;margin-left:var(--s2)}

.uittocht-app .result{margin-top:var(--s7)}
.uittocht-app .result[hidden]{display:none}
.uittocht-app .result-head{display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:var(--s4);margin-bottom:var(--s2)}
.uittocht-app .result-head .title h3{font-family:var(--font-display);font-size:var(--fs-title);font-weight:700;letter-spacing:-.5px;margin:0}
.uittocht-app .result-head .title h3 span{color:var(--amber)}
.uittocht-app .result-head .title p{color:var(--muted);margin-top:6px;font-size:var(--fs-label)}
.uittocht-app .regen{border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:var(--r-card);padding:11px 18px;font-weight:700;font-size:var(--fs-label);cursor:pointer}
.uittocht-app .regen span{color:var(--amber)}

.uittocht-app .arc{display:flex;align-items:center;gap:0;margin:var(--s6) 0;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:var(--s4) var(--s5)}
.uittocht-app .arc .step{flex:1;text-align:center;position:relative;font-size:var(--fs-caption);color:var(--muted);font-weight:600}
.uittocht-app .arc .step b{display:block;font-size:var(--fs-label);color:var(--ink);margin-bottom:2px}
.uittocht-app .arc .bar{height:4px;border-radius:4px;margin-top:var(--s3);background:linear-gradient(90deg,var(--amber),var(--neon))}

.uittocht-app .grid{display:grid;grid-template-columns:1.55fr 1fr;gap:var(--s5);align-items:start}

/* ==================================================================
   Itinerary-entry — de stop-kaart (Fase 2, deel 3, grootste upgrade).
   Groot ordinaal in de display-face als redactioneel structuurelement
   (geen gevulde pil meer), venue-naam groot in de display-face, type +
   adres als getrackte micro-caps, meer witruimte tussen stops.
   ================================================================== */
.uittocht-app .timeline{position:relative;padding-left:0}
.uittocht-app .stop{
  position:relative;padding-left:64px;padding-bottom:var(--s6);
  opacity:0;transform:translateY(10px);
  animation:ut-reveal .5s ease forwards;animation-delay:calc(var(--i,0) * 90ms);
}
.uittocht-app .stop::before{content:"";position:absolute;left:21px;top:48px;bottom:0;width:1px;background:var(--line)}
.uittocht-app .stop:last-child::before{display:none}
.uittocht-app .num{
  position:absolute;left:0;top:-4px;width:48px;
  font-family:var(--font-display);font-weight:700;font-size:32px;line-height:1;
  color:var(--amber);z-index:2;
}
.uittocht-app .walk{position:absolute;left:0;top:46px;width:48px;font-size:10px;color:var(--muted);font-weight:700;letter-spacing:.4px;text-transform:uppercase}

.uittocht-app .vcard{background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02));border:1px solid var(--line);border-radius:var(--r-card);padding:var(--s5);transition:.15s}
.uittocht-app .vcard:hover{border-color:rgba(228,165,72,.4)}
.uittocht-app .vtop{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--s3)}
.uittocht-app .vname{font-family:var(--font-display);font-size:var(--fs-venue);font-weight:700;letter-spacing:-.2px;line-height:1.15}
.uittocht-app .vtype{font-size:var(--fs-caption);color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:1.2px;margin-top:4px}
.uittocht-app .stars{white-space:nowrap;font-weight:600;font-size:var(--fs-label);color:var(--amber);display:flex;align-items:center;gap:var(--s2)}
.uittocht-app .stars small{color:var(--muted);font-weight:600;font-size:var(--fs-caption);text-transform:none}

/* facet-chips: hairline-outline i.p.v. gevulde amber-fill, micro-caps, compact */
.uittocht-app .facets{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s4)}
.uittocht-app .facet{
  font-size:var(--fs-caption);font-weight:600;letter-spacing:.5px;text-transform:uppercase;
  padding:4px 10px;border-radius:var(--r-chip);background:transparent;color:var(--muted);border:1px solid var(--line);
}
/* hot-facetten (dansen/livemuziek/cocktails e.d.): het nachtaccent, niet amber —
   zo lichten juist de "nacht"-kenmerken van de zaak op tussen de neutrale chips */
.uittocht-app .facet.hot{color:var(--neon);border-color:rgba(255,61,138,.5)}

/* special: notitie met amber left-rule, geen gevuld blok; bron/zekerheid als stille caption */
.uittocht-app .special{margin-top:var(--s4);display:flex;gap:var(--s3);align-items:flex-start;background:transparent;border-left:2px solid var(--amber);border-radius:0;padding:2px 0 2px var(--s3)}
.uittocht-app .special .badge{font-size:16px;line-height:1.3}
.uittocht-app .special .txt{font-size:var(--fs-label);line-height:1.4;color:var(--ink)}
.uittocht-app .special .txt b{color:var(--amber);font-weight:700}
.uittocht-app .special .src{font-size:var(--fs-caption);color:var(--muted);margin-top:4px;text-transform:uppercase;letter-spacing:.4px}

.uittocht-app .vactions{display:flex;gap:var(--s3);margin-top:var(--s4)}
.uittocht-app .btn2{flex:1;border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:var(--r-card);padding:11px;font-weight:700;font-size:var(--fs-label);cursor:pointer;transition:.15s;display:flex;align-items:center;justify-content:center;gap:7px}
.uittocht-app .btn2:hover{border-color:var(--amber)}
.uittocht-app .btn2.locked{background:var(--amber-soft);border-color:var(--amber);color:var(--amber)}

.uittocht-app .aside{position:sticky;top:20px;display:flex;flex-direction:column;gap:var(--s4)}
.uittocht-app .mapcard{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:6px;overflow:hidden}
.uittocht-app .maphead{display:flex;justify-content:space-between;align-items:center;padding:var(--s3) var(--s4) 6px}
.uittocht-app .maphead b{font-size:var(--fs-label);font-weight:700}
.uittocht-app .maphead span{font-size:var(--fs-caption);color:var(--amber);font-weight:700}
.uittocht-app .leafmap{width:100%;height:300px;display:block;border-radius:12px;background:var(--bg2);z-index:0}
/* iets meer mono/warm i.p.v. kale OSM-kleuren (Fase 2, deel 3: kaart-verfijning) */
.uittocht-app .leafmap .leaflet-tile{filter:grayscale(.2) sepia(.12) saturate(.6) brightness(.8) contrast(1.05)}

.uittocht-app .live{background:var(--amber-soft);border:1px solid rgba(228,165,72,.3);border-radius:16px;padding:var(--s5)}
.uittocht-app .live h4{font-size:var(--fs-label);font-weight:700;display:flex;align-items:center;gap:var(--s2);margin:0}
.uittocht-app .live h4 .rec{width:8px;height:8px;border-radius:var(--r-full);background:var(--amber)}
.uittocht-app .live p{font-size:var(--fs-label);color:var(--ink);margin-top:var(--s2);line-height:1.45}
.uittocht-app .live .tag{display:inline-block;margin-top:var(--s3);font-size:var(--fs-caption);font-weight:700;color:var(--amber);border:1px dashed rgba(228,165,72,.4);padding:5px 10px;border-radius:var(--r-chip)}

.uittocht-app .summ{display:flex;gap:var(--s4);background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:var(--s4)}
.uittocht-app .summ div{flex:1;text-align:center}
.uittocht-app .summ b{display:block;font-family:var(--font-display);font-size:22px;font-weight:700;color:var(--ink)}
.uittocht-app .summ small{font-size:var(--fs-caption);color:var(--muted);font-weight:600}

.uittocht-app .ut-note{background:var(--amber-soft);border:1px solid rgba(228,165,72,.35);color:var(--ink);border-radius:var(--r-card);padding:var(--s3) var(--s4);font-size:var(--fs-label);font-weight:500;margin:var(--s4) 0}
.uittocht-app .ut-empty{color:var(--muted);font-size:var(--fs-lead);padding:var(--s5) 0}

.uittocht-app .cta.ut-start{width:auto;flex:0 0 auto;padding:11px 22px;font-size:var(--fs-label);border-radius:var(--r-card);box-shadow:0 8px 20px rgba(0,0,0,.3)}
.uittocht-app .ut-headactions{display:flex;flex-wrap:wrap;gap:var(--s3);align-items:center}

/* ---- stopkaart: foto / typografische fallback + verhaal ---- */
.uittocht-app .ut-foto{
  position:relative;margin:calc(-1 * var(--s5)) calc(-1 * var(--s5)) var(--s4);border-radius:var(--r-card) var(--r-card) 0 0;overflow:hidden;
  height:150px;background:var(--bg2);
}
.uittocht-app .ut-foto img{width:100%;height:100%;object-fit:cover;display:block}
/* echte foto: subtiele warme duotone-overlay i.p.v. los blok */
.uittocht-app .ut-foto:not(.ut-foto-fallback)::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(155deg,rgba(16,13,16,.4),rgba(228,165,72,.1) 60%,transparent);
  mix-blend-mode:multiply;
}
/* geen foto: rustige typografische letter-tegel — de initiaal van de venue-naam,
   in de display-face, geen emoji */
.uittocht-app .ut-foto-fallback{
  display:flex;align-items:center;justify-content:center;
  background:var(--surface);
}
.uittocht-app .ut-foto-fallback span{
  font-family:var(--font-display);font-weight:700;font-size:48px;line-height:1;
  color:rgba(242,236,227,.32);
}
.uittocht-app .ut-verhaal{margin-top:var(--s4);font-size:var(--fs-label);line-height:1.5;color:var(--muted)}
.uittocht-app .ut-verhaal p{margin:0 0 6px}
.uittocht-app .ut-verhaal p:last-child{margin-bottom:0}
.uittocht-app .ut-verhaal .ut-drinktip{color:var(--amber);font-weight:600}

/* ---- overgang tussen twee stops ---- */
.uittocht-app .ut-overgang{
  margin:2px 0 var(--s4) 64px;font-size:var(--fs-caption);font-weight:600;color:var(--muted);
  display:flex;align-items:center;gap:6px;
}

/* ---- playlist-blok in het aside ---- */
.uittocht-app .ut-playlist{
  background:var(--amber-soft);
  border:1px solid rgba(228,165,72,.3);border-radius:16px;padding:var(--s5);
}
.uittocht-app .ut-playlist h4{font-size:var(--fs-label);font-weight:700;margin:0}
.uittocht-app .ut-playlist a{
  display:inline-block;margin-top:var(--s3);font-size:var(--fs-label);font-weight:700;color:var(--amber);
  text-decoration:none;border-bottom:1px dashed rgba(228,165,72,.5);
}
.uittocht-app .ut-playlist a:hover{color:var(--ink);border-color:var(--ink)}

/* ---- onderweg-modus: volschermkaart, grote knoppen, leesbaar in een donker café ---- */
.uittocht-app .ut-onderweg{
  position:fixed;inset:0;z-index:1000;overflow-y:auto;
  padding:var(--s4) var(--s4) var(--s6);
  background:linear-gradient(180deg,var(--bg),var(--bg2));
  display:flex;flex-direction:column;gap:var(--s4);
}
.uittocht-app .ut-onderweg[hidden]{display:none}
.uittocht-app .ut-owtop{display:flex;align-items:center;justify-content:space-between;gap:var(--s3)}
.uittocht-app .ut-owback{
  border:1px solid var(--line);background:var(--surface);color:var(--ink);
  border-radius:var(--r-card);padding:14px 18px;font-weight:700;font-size:var(--fs-lead);cursor:pointer;min-height:56px
}
.uittocht-app .ut-owstep{font-size:var(--fs-label);color:var(--muted);font-weight:700;letter-spacing:.5px}
.uittocht-app .ut-owcard{
  flex:1;background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02));
  border:1px solid var(--line);border-radius:20px;padding:var(--s6) var(--s5);
  box-shadow:0 20px 50px rgba(0,0,0,.35);
}
.uittocht-app .ut-owtime{font-size:var(--fs-label);font-weight:700;color:var(--amber);letter-spacing:.5px;margin-bottom:var(--s3)}
.uittocht-app .ut-owname{font-family:var(--font-display);font-size:clamp(28px,8vw,42px);font-weight:700;letter-spacing:-.5px;line-height:1.08}
.uittocht-app .ut-owtype{font-size:var(--fs-caption);color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:1.2px;margin-top:6px}
.uittocht-app .ut-owcard .facets{margin-top:var(--s5)}
.uittocht-app .ut-owcard .facet{font-size:var(--fs-label);padding:8px 14px}
.uittocht-app .ut-owcard .special{margin-top:var(--s5)}
.uittocht-app .ut-waarom{margin-top:var(--s5);font-size:16px;line-height:1.5;color:var(--muted)}
.uittocht-app .ut-owwalk{
  text-align:center;font-size:var(--fs-lead);font-weight:700;color:var(--muted);
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);padding:var(--s3)
}
.uittocht-app .ut-owdone{
  border:none;cursor:pointer;border-radius:var(--r-card);padding:20px;min-height:56px;
  font-size:19px;font-weight:700;letter-spacing:.2px;color:var(--amber-ink);
  background:linear-gradient(100deg,var(--amber) 10%,var(--neon) 150%);
  box-shadow:0 10px 24px rgba(0,0,0,.3);
}

/* ---- beweging: gestaggerde reveal bij het bouwen van een tocht ---- */
@keyframes ut-reveal{
  from{opacity:0;transform:translateY(10px)}
  to{opacity:1;transform:none}
}
@media (prefers-reduced-motion:reduce){
  .uittocht-app .stop{animation:none;opacity:1;transform:none}
}

/* ==================================================================
   Groeiplan Golf 1 — instant-voorbeeld, deel-prompt/WhatsApp, datum,
   recipient-CTA, verras-knop. Zelfde token-laag (amber-structuur +
   neon-nachtaccent), geen nieuwe kleuren buiten WhatsApp-groen.
   ================================================================== */

/* build + 'Verras me' naast elkaar */
.uittocht-app .ut-buildrow{display:flex;gap:var(--s3);align-items:stretch;margin-top:var(--s6)}
.uittocht-app .ut-buildrow .cta{margin-top:0;flex:1}
.uittocht-app .ut-buildrow .btn2{flex:0 0 auto;padding:0 22px;font-size:var(--fs-body)}

/* instant voorbeeld-tocht: stille banner, niet schreeuwerig */
.uittocht-app .ut-voorbeeld{
  display:flex;gap:var(--s2);align-items:center;background:var(--surface);
  border:1px solid var(--line);border-left:3px solid var(--amber);
  border-radius:var(--r-card);padding:var(--s3) var(--s4);
  font-size:var(--fs-label);color:var(--muted);margin-bottom:var(--s4);
}
.uittocht-app .ut-voorbeeld b{color:var(--ink)}
.uittocht-app .ut-headactions > .cta#ut-naarbuilder{width:auto;flex:0 0 auto;margin-top:0;padding:11px 22px;font-size:var(--fs-label)}

/* deel-prompt na het bouwen: feestelijk (amber→neon) + WhatsApp-groen */
.uittocht-app .ut-deelprompt{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s3);
  background:linear-gradient(100deg,var(--amber-soft),var(--neon-soft));
  border:1px solid rgba(255,61,138,.3);border-radius:var(--r-card);
  padding:var(--s3) var(--s4);margin:var(--s4) 0;
}
.uittocht-app .ut-dp-txt{font-family:var(--font-display);font-weight:700;font-size:var(--fs-lead);color:var(--ink)}
.uittocht-app .ut-wa{
  border:none;cursor:pointer;border-radius:var(--r-card);padding:12px 22px;font-weight:700;
  font-size:var(--fs-label);color:#08210f;background:#25D366;transition:.15s;font-family:inherit;
}
.uittocht-app .ut-wa:hover{transform:translateY(-1px);box-shadow:0 8px 20px rgba(37,211,102,.32)}

/* mail-route + datumkiezer als één nette balk */
.uittocht-app .ut-mailform{
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3);margin:var(--s4) 0;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);padding:var(--s3) var(--s4);
}
.uittocht-app .ut-datumveld{display:flex;align-items:center;gap:var(--s2);font-size:var(--fs-label);color:var(--muted);font-weight:600}
.uittocht-app .ut-mailform input{
  background:var(--bg2);border:1px solid var(--line);border-radius:var(--r-chip);
  padding:10px 12px;color:var(--ink);font-size:var(--fs-label);font-family:inherit;
}
.uittocht-app .ut-mailform input[type=email]{flex:1;min-width:180px}
.uittocht-app .ut-datumveld input[type=date]{color-scheme:dark}
.uittocht-app .ut-mailform .btn2{flex:0 0 auto;padding:10px 18px}
.uittocht-app .ut-mailmeld{font-size:var(--fs-caption);color:var(--amber);font-weight:700}

/* recipient-CTA: wie een gedeelde tocht opende, hierheen naar de eigen builder */
.uittocht-app .ut-eigenca{
  margin-top:var(--s7);text-align:center;
  background:linear-gradient(160deg,var(--amber-soft),var(--neon-soft));
  border:1px solid rgba(255,61,138,.3);border-radius:20px;padding:var(--s6);
}
.uittocht-app .ut-eigenca h3{font-family:var(--font-display);font-size:var(--fs-title);font-weight:700;color:var(--ink);margin:0 0 var(--s2)}
.uittocht-app .ut-eigenca p{color:var(--muted);font-size:var(--fs-lead);max-width:520px;margin:0 auto var(--s4);line-height:1.5}
.uittocht-app .ut-eigenca .cta{margin-top:0;width:auto;display:inline-block;padding:16px 32px}

@media(max-width:900px){
  .uittocht-app .grid{grid-template-columns:1fr}
  .uittocht-app .occasions{grid-template-columns:repeat(2,1fr)}
  .uittocht-app .row{grid-template-columns:1fr}
  .uittocht-app .aside{position:static}
  .uittocht-app .ut-buildrow{flex-direction:column}
  .uittocht-app .ut-deelprompt{flex-direction:column;align-items:stretch;text-align:center}
}

/* ---- redactionele uitleg + FAQ (Golf 2): indexeerbare content onder de tool ---- */
.uittocht-app .uittocht-uitleg{margin-top:var(--s7);border-top:1px solid var(--line);padding-top:var(--s6)}
.uittocht-app .uittocht-uitleg h2{font-family:var(--font-display);font-size:28px;font-weight:700;color:var(--ink);margin:0 0 var(--s3)}
.uittocht-app .uittocht-uitleg h2:not(:first-child){margin-top:var(--s6)}
.uittocht-app .uittocht-uitleg p{color:var(--muted);font-size:var(--fs-lead);line-height:1.6;max-width:760px;margin:0 0 var(--s3)}
.uittocht-app .uittocht-faq{max-width:760px}
.uittocht-app .uittocht-faq details{border:1px solid var(--line);border-radius:var(--r-card);background:var(--surface);margin-bottom:var(--s3);overflow:hidden}
.uittocht-app .uittocht-faq summary{cursor:pointer;padding:var(--s4);font-weight:700;font-size:var(--fs-body);color:var(--ink);list-style:none;display:flex;justify-content:space-between;align-items:center;gap:var(--s3)}
.uittocht-app .uittocht-faq summary::-webkit-details-marker{display:none}
.uittocht-app .uittocht-faq summary::after{content:"+";color:var(--amber);font-size:22px;font-weight:400;line-height:1}
.uittocht-app .uittocht-faq details[open] summary::after{content:"\2013"}
.uittocht-app .uittocht-faq details[open] summary{border-bottom:1px solid var(--line)}
.uittocht-app .uittocht-faq details p{color:var(--muted);font-size:var(--fs-label);line-height:1.55;margin:0;padding:var(--s4)}

/* ---- gelegenheid-landing links (chip-rij op de hoofdpagina, Golf 2) ---- */
.uittocht-app .uittocht-gelegenheden{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2);margin:0 0 var(--s5)}
.uittocht-app .uittocht-gelegenheden .ug-label{font-size:var(--fs-label);color:var(--muted);font-weight:600;margin-right:var(--s2)}
.uittocht-app .uittocht-gelegenheden a{font-size:var(--fs-label);font-weight:700;color:var(--ink);text-decoration:none;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-full);padding:7px 14px;transition:.15s}
.uittocht-app .uittocht-gelegenheden a:hover{border-color:var(--amber);color:var(--amber)}