/* ============================================================
   Urban Foods — Soep op kantoor (B2B)
   Huisstijl uit de stijlgids: Neulis Neue voor titels, Museo voor tekst,
   klei-rood als accent. Outfit en Bitter zijn de terugval als die fonts
   niet geladen zijn — nooit een schreefloze systeemfont als eindstation,
   dat breekt het beeld.
   ============================================================ */
.uf-soep{
  --room:#F3EEE9; --room2:#E9E1D8; --wit:#FFFFFF;
  --ink:#220D0A; --fg2:#5A4A44; --fg3:#8B7B74;
  --klei:#A73A1C; --klei2:#7E2911; --camel:#BF926B; --petrol:#386F7D;
  --groen:#5A845A;
  --lijn:rgba(34,13,10,.13); --lijn2:rgba(34,13,10,.07);
  --kop:"Neulis Neue","Outfit",system-ui,sans-serif;
  --tekst:"Museo","Museo Slab","Bitter",Georgia,serif;
  --max:1180px; --r:14px;
  --schaduw:0 1px 2px rgba(34,13,10,.04), 0 8px 26px rgba(34,13,10,.06);
  font-family:var(--tekst); color:var(--ink); background:var(--room);
  line-height:1.65; font-size:16px; -webkit-font-smoothing:antialiased;
  /* Op urbanfoods.be staat de pagina in een kolom van het thema, met donker
     ernaast. Deze twee regels laten de crème doorlopen tot de schermrand. */
  box-shadow:0 0 0 100vmax var(--room);
  clip-path:inset(0 -100vmax);
}
/* De site heeft zelf al een kop- en voetbalk; die van deze pagina waren er
   voor de losse schoolinstallatie en zouden nu dubbel staan. */
.uf-soep .hdr, .uf-soep .ft{ display:none; }
.uf-soep *,.uf-soep *::before,.uf-soep *::after{box-sizing:border-box}
.uf-soep h1,.uf-soep h2,.uf-soep h3,.uf-soep h4{
  font-family:var(--kop); font-weight:700; line-height:1.12;
  letter-spacing:-.025em; margin:0; color:var(--ink)}
.uf-soep p{margin:0}
.uf-soep em{font-style:italic; color:var(--klei); font-weight:400}
/* Het thema kleurt élke button roze bij hover. Dat is hier al eens misgelopen. */
.uf-soep button{font:inherit; color:inherit; background:none; border:none; cursor:pointer}
.uf-soep button:hover{background:none}

.uf-soep .wrap{max-width:var(--max); margin:0 auto; padding:0 22px}
.uf-soep section.sec{padding:80px 0}
.uf-soep section.sec.tight{padding:56px 0}
.uf-soep section.sec.alt{background:var(--wit);
  box-shadow:0 0 0 100vmax var(--wit); clip-path:inset(0 -100vmax)}
.uf-soep .eyebrow{font-family:var(--kop); font-size:12px; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--klei); margin-bottom:14px}
.uf-soep section.sec h2{font-size:clamp(28px,3.4vw,42px); margin-bottom:12px}
.uf-soep .lede{font-size:17px; color:var(--fg2); max-width:62ch}

/* ---------- Kop ---------- */
.uf-soep .hdr{position:sticky; top:0; z-index:60; background:rgba(243,238,233,.94);
  backdrop-filter:saturate(1.4) blur(9px); border-bottom:1px solid var(--lijn2)}
.uf-soep .hdr-in{max-width:var(--max); margin:0 auto; padding:14px 22px;
  display:flex; align-items:center; gap:14px}
.uf-soep .merk{font-family:var(--kop); font-weight:800; font-size:18px;
  letter-spacing:-.02em; text-transform:uppercase; text-decoration:none; color:var(--ink)}
.uf-soep .merk span{color:var(--klei)}
.uf-soep .hdr-sub{font-size:13.5px; color:var(--fg3); border-left:1px solid var(--lijn);
  padding-left:14px}
.uf-soep .hdr-spacer{flex:1}

/* ---------- Knoppen ---------- */
.uf-soep .knop{display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:15px 26px; border-radius:999px; font-family:var(--kop); font-weight:700;
  font-size:15px; letter-spacing:-.01em; text-decoration:none;
  transition:transform 140ms ease, background 140ms ease, border-color 140ms ease}
.uf-soep .knop.pri{background:var(--klei); color:#fff}
.uf-soep .knop.pri:hover{background:var(--klei2); transform:translateY(-1px)}
.uf-soep .knop.rand{background:transparent; color:var(--ink); border:1.5px solid var(--lijn)}
.uf-soep .knop.rand:hover{border-color:var(--ink); transform:translateY(-1px)}
.uf-soep .knop.klein{padding:11px 18px; font-size:13.5px}
.uf-soep .knop[disabled]{opacity:.45; cursor:not-allowed; transform:none}

/* ---------- Hero ----------
   Het kleurvlak links loopt met vingers over in de foto rechts, zoals op de
   referentie. Geen afbeelding nodig: de rand is een clip-path, dus ze blijft
   scherp op elk scherm en weegt niets. */
.uf-soep .hero{position:relative; overflow:hidden; background:var(--ink);
  width:100vw; margin-left:calc(50% - 50vw); max-width:100vw}
.uf-soep .hero-media{position:absolute; inset:0 0 0 40%; z-index:0}
.uf-soep .dia{position:absolute; inset:0; opacity:0; transition:opacity 900ms ease;
  background-size:cover; background-position:center}
.uf-soep .dia.aan{opacity:1}
/* Zolang er geen eigen foto's zijn: een warm vlak met een duidelijke aanduiding,
   geen stockbeeld dat niet bij de zaak past. */
.uf-soep .dia.leeg{display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:9px; text-align:center; padding:30px; color:rgba(255,255,255,.92)}
.uf-soep .dia.leeg .ico{font-size:46px; line-height:1}
.uf-soep .dia.leeg b{font-family:var(--kop); font-size:16px; letter-spacing:-.01em}
.uf-soep .dia.leeg span{font-size:13px; opacity:.8; max-width:28ch}
.uf-soep .dia.k1{background:linear-gradient(150deg,#C97B4A,#A73A1C 55%,#7E2911)}
.uf-soep .dia.k2{background:linear-gradient(150deg,#BF926B,#8A5A38 55%,#5A3421)}
.uf-soep .dia.k3{background:linear-gradient(150deg,#7C9A7C,#5A845A 55%,#3C5B3C)}
/* De overgang is een SVG-vorm in plaats van een clip-path: die schaalt naar
   elk formaat, blijft glad, en werkt in elke browser zonder voorbehoud. */
.uf-soep .hero-vlak{position:absolute; inset:0; z-index:1; width:100%; height:100%;
  display:block; pointer-events:none}
.uf-soep .hero-vlak path{fill:var(--room)}
.uf-soep .hero-in{position:relative; z-index:2; max-width:var(--max); margin:0 auto;
  padding:88px 22px 78px}
.uf-soep .hero-tekst{max-width:min(640px,50%)}
.uf-soep .hero h1{font-size:clamp(34px,4.1vw,54px); margin-bottom:20px}
.uf-soep .hero .lede{font-size:19px; margin-bottom:30px}
.uf-soep .hero-cta{display:flex; gap:12px; flex-wrap:wrap; margin-bottom:26px}
.uf-soep .hero-punten{display:flex; gap:10px 26px; flex-wrap:wrap; font-size:14px; color:var(--fg2)}
.uf-soep .hero-punten > div{white-space:nowrap}
.uf-soep .hero-punten b{font-family:var(--kop); color:var(--ink)}
/* Bolletjes om te wisselen, net als op de referentie. */
.uf-soep .hero-bolletjes{display:flex; gap:9px; margin-top:30px}
.uf-soep .hero-bolletjes button{width:11px; height:11px; border-radius:50%;
  background:transparent; border:1.5px solid var(--fg3); padding:0; transition:all 200ms ease}
.uf-soep .hero-bolletjes button:hover{border-color:var(--klei)}
.uf-soep .hero-bolletjes button.aan{background:var(--klei); border-color:var(--klei); transform:scale(1.15)}

/* ---------- Stappen ---------- */
.uf-soep .stappen{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:36px}
.uf-soep .stap{background:var(--wit); border:1px solid var(--lijn2); border-radius:var(--r); padding:28px 24px}
.uf-soep .stap .nr{font-family:var(--kop); font-size:12px; font-weight:700; letter-spacing:.12em;
  color:var(--klei); margin-bottom:12px}
.uf-soep .stap h3{font-size:20px; margin-bottom:8px}
.uf-soep .stap p{font-size:15px; color:var(--fg2)}
.uf-soep .streep{margin-top:26px; padding:18px 22px; background:var(--room2);
  border-radius:var(--r); font-size:15.5px; color:var(--fg2); text-align:center}
.uf-soep .streep b{color:var(--ink)}

/* ---------- Formulekaarten ---------- */
.uf-soep .kaarten{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:38px}
.uf-soep .kaart{background:var(--wit); border:1.5px solid var(--lijn2); border-radius:var(--r);
  padding:30px 26px; display:flex; flex-direction:column; position:relative;
  transition:border-color 150ms ease, transform 150ms ease}
.uf-soep .kaart:hover{border-color:var(--camel); transform:translateY(-2px)}
.uf-soep .kaart.uit{border-color:var(--klei)}
.uf-soep .kaart.aan{border-color:var(--klei); box-shadow:0 0 0 3px rgba(167,58,28,.12)}
.uf-soep .kaart .badge{position:absolute; top:-11px; left:26px; background:var(--klei); color:#fff;
  font-family:var(--kop); font-size:11px; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; padding:6px 13px; border-radius:999px}
.uf-soep .kaart h3{font-size:23px; margin-bottom:6px}
.uf-soep .kaart .om{font-size:14.5px; color:var(--fg3); margin-bottom:20px; min-height:44px}
.uf-soep .prijs{display:flex; align-items:baseline; gap:7px; margin-bottom:4px}
.uf-soep .prijs .van{font-size:13px; color:var(--fg3)}
.uf-soep .prijs .bed{font-family:var(--kop); font-size:38px; font-weight:800; letter-spacing:-.03em}
.uf-soep .prijs .pp{font-size:14px; color:var(--fg3)}
.uf-soep .btwlabel{font-size:12.5px; color:var(--fg3); margin-bottom:20px}
.uf-soep .bevat{list-style:none; padding:0; margin:0 0 24px; flex:1}
.uf-soep .bevat li{font-size:14.5px; color:var(--fg2); padding:7px 0 7px 26px; position:relative}
.uf-soep .bevat li::before{content:"→"; position:absolute; left:0; color:var(--klei); font-weight:700}

/* ---------- Samensteller ---------- */
.uf-soep .bouw{display:grid; grid-template-columns:1fr 372px; gap:34px; align-items:start}
.uf-soep .blok{background:var(--wit); border:1px solid var(--lijn2); border-radius:var(--r);
  padding:26px; margin-bottom:18px}
.uf-soep .blok h3{font-size:19px; margin-bottom:5px}
.uf-soep .blok .hint{font-size:13.5px; color:var(--fg3); margin-bottom:18px}
.uf-soep .chips{display:flex; flex-wrap:wrap; gap:9px}
.uf-soep .chip{border:1.5px solid var(--lijn); border-radius:999px; padding:11px 18px;
  font-size:14.5px; font-weight:600; color:var(--fg2); background:var(--wit);
  transition:all 130ms ease; font-family:var(--tekst)}
.uf-soep .chip:hover{border-color:var(--camel); color:var(--ink); background:var(--wit)}
.uf-soep .chip.aan{background:var(--klei); border-color:var(--klei); color:#fff}
.uf-soep .chip.aan:hover{background:var(--klei2)}
.uf-soep .chip .bij{font-size:12.5px; opacity:.72; margin-left:5px}
.uf-soep .aantal-rij{display:flex; align-items:center; gap:12px; margin-top:14px; flex-wrap:wrap}
.uf-soep .aantal-rij label{font-size:13.5px; color:var(--fg3)}
.uf-soep input[type=number], .uf-soep input[type=text], .uf-soep input[type=email],
.uf-soep input[type=tel], .uf-soep input[type=date], .uf-soep select, .uf-soep textarea{
  font-family:var(--tekst); font-size:15px; color:var(--ink); background:var(--wit);
  border:1.5px solid var(--lijn); border-radius:10px; padding:12px 14px; width:100%;
  transition:border-color 130ms ease, box-shadow 130ms ease}
.uf-soep input:focus, .uf-soep select:focus, .uf-soep textarea:focus{
  outline:none; border-color:var(--klei); box-shadow:0 0 0 3px rgba(167,58,28,.12)}
.uf-soep input[type=number]{max-width:130px}
.uf-soep .fout{color:var(--klei); font-size:13.5px; font-weight:600; margin-top:9px}
.uf-soep .schakel{display:flex; gap:15px; align-items:flex-start; padding:20px;
  border:1.5px solid var(--camel); border-radius:var(--r); background:rgba(191,146,107,.09); cursor:pointer}
.uf-soep .schakel.aan{border-color:var(--klei); background:rgba(167,58,28,.07)}
.uf-soep .schakel input{width:19px; height:19px; margin-top:2px; accent-color:var(--klei); flex:none}
.uf-soep .schakel b{font-family:var(--kop); font-size:16px; display:block; margin-bottom:4px}
.uf-soep .schakel span{font-size:14.5px; color:var(--fg2)}
.uf-soep .aanbevolen{display:inline-block; background:var(--camel); color:#fff; font-family:var(--kop);
  font-size:10.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  padding:3px 9px; border-radius:999px; margin-left:8px; vertical-align:middle}

/* ---------- Besteloverzicht ---------- */
.uf-soep .samenvat{position:sticky; top:88px; background:var(--ink); color:#F6EFE9;
  border-radius:var(--r); padding:28px 26px; box-shadow:var(--schaduw)}
.uf-soep .samenvat h3{color:#fff; font-size:20px; margin-bottom:20px}
.uf-soep .sv-rij{display:flex; justify-content:space-between; gap:16px; padding:9px 0;
  font-size:14.5px; border-bottom:1px solid rgba(255,255,255,.1)}
.uf-soep .sv-rij span{color:rgba(246,239,233,.62)}
.uf-soep .sv-rij b{text-align:right; font-weight:600}
.uf-soep .sv-tot{display:flex; justify-content:space-between; align-items:baseline;
  margin-top:20px; padding-top:18px; border-top:1px solid rgba(255,255,255,.22)}
.uf-soep .sv-tot span{font-size:14px; color:rgba(246,239,233,.62)}
.uf-soep .sv-tot b{font-family:var(--kop); font-size:31px; font-weight:800; letter-spacing:-.02em; color:#fff}
.uf-soep .sv-maand{text-align:right; font-size:13.5px; color:rgba(246,239,233,.62); margin-top:5px}
.uf-soep .samenvat .knop{width:100%; margin-top:20px}
.uf-soep .sv-na{font-size:12.5px; color:rgba(246,239,233,.55); text-align:center; margin-top:12px; line-height:1.55}
.uf-soep .sv-leeg{font-size:14.5px; color:rgba(246,239,233,.62); padding:8px 0 4px}

/* ---------- Soepenmenu ---------- */
.uf-soep .soepen{display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:34px}
.uf-soep .soepgroep{background:var(--wit); border:1px solid var(--lijn2); border-radius:var(--r); padding:26px}
.uf-soep .soepgroep h3{font-size:19px; margin-bottom:16px}
.uf-soep .soeplijst{list-style:none; padding:0; margin:0; display:grid; gap:2px}
.uf-soep .soeplijst li{font-size:15px; color:var(--fg2); padding:9px 0;
  border-bottom:1px solid var(--lijn2); display:flex; align-items:center; gap:10px}
.uf-soep .soeplijst li:last-child{border-bottom:none}
.uf-soep .soeplijst li::before{content:""; width:7px; height:7px; border-radius:50%;
  background:var(--camel); flex:none}

/* ---------- Proeflevering ---------- */
.uf-soep .proef{background:var(--ink); color:#F6EFE9; border-radius:var(--r); padding:46px}
.uf-soep .proef h2{color:#fff}
.uf-soep .proef .lede{color:rgba(246,239,233,.72)}
.uf-soep .proef-in{display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:start}
.uf-soep .velden{display:grid; grid-template-columns:1fr 1fr; gap:13px}
.uf-soep .veld.breed{grid-column:1/-1}
.uf-soep .veld label{display:block; font-size:12.5px; color:var(--fg3); margin-bottom:5px}
.uf-soep .proef .veld label{color:rgba(246,239,233,.6)}
.uf-soep .proef input, .uf-soep .proef textarea{background:rgba(255,255,255,.07);
  border-color:rgba(255,255,255,.17); color:#fff}
.uf-soep .proef input::placeholder, .uf-soep .proef textarea::placeholder{color:rgba(246,239,233,.38)}

/* ---------- FAQ ---------- */
.uf-soep .faq{margin-top:32px; border-top:1px solid var(--lijn)}
.uf-soep .faq details{border-bottom:1px solid var(--lijn)}
.uf-soep .faq summary{padding:20px 40px 20px 0; font-family:var(--kop); font-size:17px;
  font-weight:700; cursor:pointer; list-style:none; position:relative}
.uf-soep .faq summary::-webkit-details-marker{display:none}
.uf-soep .faq summary::after{content:"+"; position:absolute; right:6px; top:18px;
  font-size:23px; color:var(--klei); font-weight:400; transition:transform 160ms ease}
.uf-soep .faq details[open] summary::after{transform:rotate(45deg)}
.uf-soep .faq .antw{padding:0 40px 22px 0; font-size:15.5px; color:var(--fg2); max-width:74ch}

/* ---------- Voet ---------- */
.uf-soep .ft{background:var(--ink); color:rgba(246,239,233,.68); padding:48px 0 40px; font-size:14px}
.uf-soep .ft-in{max-width:var(--max); margin:0 auto; padding:0 22px;
  display:grid; grid-template-columns:repeat(3,1fr); gap:26px}
.uf-soep .ft b{color:#fff; font-family:var(--kop); display:block; margin-bottom:9px; font-size:15px}
.uf-soep .ft a{color:rgba(246,239,233,.68); text-decoration:none}
.uf-soep .ft a:hover{color:#fff}

/* ---------- Bedankscherm ---------- */
.uf-soep .bedankt{background:var(--wit); border:1.5px solid var(--groen); border-radius:var(--r);
  padding:34px; text-align:center}
.uf-soep .bedankt .ref{font-family:var(--kop); font-size:15px; color:var(--klei); margin-top:8px}

/* ---------- Mobiel ---------- */
@media (max-width:1000px){
  /* Onder elkaar: een getande rand over de volle breedte leest niet meer. */
  .uf-soep .hero{background:var(--room); display:flex; flex-direction:column;
    width:auto; margin-left:0}
  /* Tekst eerst, beeld eronder: op een telefoon wil je meteen lezen waarover
     het gaat, niet eerst een foto wegscrollen. */
  .uf-soep .hero-in{order:1}
  .uf-soep .hero-media{order:2; position:relative; inset:auto; height:280px;
    margin:30px 22px 46px; border-radius:var(--r); overflow:hidden}
  .uf-soep .hero-vlak{display:none}
  .uf-soep .hero-in{padding:52px 22px 0}
  .uf-soep .hero-tekst{max-width:none}
  .uf-soep .hero-bolletjes{margin:22px 0 0}
  .uf-soep .bouw{grid-template-columns:1fr}
  .uf-soep .samenvat{position:static}
  .uf-soep .kaarten{grid-template-columns:1fr}
  .uf-soep .kaart{padding:26px 22px}
  .uf-soep .kaart .om{min-height:0}
  .uf-soep .stappen{grid-template-columns:1fr}
  .uf-soep .soepen{grid-template-columns:1fr}
  .uf-soep .proef-in{grid-template-columns:1fr; gap:28px}
  .uf-soep .proef{padding:32px 24px}
  .uf-soep .ft-in{grid-template-columns:1fr; gap:20px}
  .uf-soep section.sec{padding:56px 0}
  /* Rasterkolommen groeien mee met hun breedste kind; dat duwde de
     broodjespagina ooit naar 817px op een telefoon. */
  .uf-soep > *{min-width:0}
}
@media (max-width:620px){
  .uf-soep .wrap{padding:0 16px}
  .uf-soep .velden{grid-template-columns:1fr}
  .uf-soep .hdr-sub{display:none}
  /* Volle breedte hoort bij de knoppen in de inhoud, niet bij die in de kopbalk:
     daar duwde ze het merk over twee regels. */
  .uf-soep .hero-cta .knop, .uf-soep .samenvat .knop,
  .uf-soep #uf-proef-verstuur, .uf-soep #uf-checkout-verstuur{width:100%}
  .uf-soep .hdr .knop{width:auto; padding:9px 15px; font-size:13px}
  .uf-soep .merk{white-space:nowrap; font-size:16px}
  .uf-soep .hero-cta{flex-direction:column}
  .uf-soep .blok{padding:20px 18px}
  .uf-soep .proef{padding:26px 20px}
  .uf-soep .prijs .bed{font-size:33px}
}
/* wpautop plakt lege paragrafen tussen blokken in de pagina-inhoud; die
   telden mee als rasterkolom en lieten de winkelwagen een rij zakken. */
.uf-soep > p:empty, .uf-soep .bouw > p:empty, .uf-soep .wrap > p:empty{display:none}