@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,600;12..96,800&family=JetBrains+Mono:wght@400;600&family=Public+Sans:ital,wght@0,300;0,400;0,600;1,400&display=swap');

/* ============================================================
   NUMERICA B.V. — huisstijl
   Blauw #365A9E en crème #ECE09A komen uit het logo.
   ============================================================ */

:root {
  --ink: #0E1A33;
  --ink-80: #38435C;
  --blue: #365A9E;
  --blue-dark: #2B4A85;
  --blue-soft: #7C94C0;
  --cream: #ECE09A;
  --cream-dim: #F6F0CB;
  --paper: #FBFAF6;
  --white: #FFFFFF;
  --line: #DCE0E9;
  --muted: #5C6880;

  --display: 'Bricolage Grotesque', system-ui, sans-serif;
  --body: 'Public Sans', system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;

  --wrap: 1180px;
  --r: 4px;

  /* Logohoogte en de ruimte eromheen. De winkelbalk rekent hiermee zijn
     eigen hoogte uit, zodat die altijd even hoog blijft als het menu. */
  --logo-h: 110px;
  --kop-pad: 13px;
  --banner-h: 60px;

  /* Alles wat bovenaan vastgezet is: menu + winkelbalk + hun randjes.
     Andere vastgezette dingen rekenen hiermee hun afstand uit. */
  --vast-h: calc(var(--logo-h) + var(--kop-pad) * 2 + 1px + var(--banner-h));
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a { color: var(--blue); text-decoration-thickness: 1px; text-underline-offset: 3px; }

:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 3px;
}

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: 24px;
}

/* ---------- Typografie ---------- */

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.025em;
  margin: 0 0 0.5em;
  text-wrap: balance;
}

h1 { font-size: clamp(2.6rem, 6.5vw, 4.6rem); }
h2 { font-size: clamp(1.9rem, 4vw, 2.9rem); }
h3 { font-size: 1.28rem; letter-spacing: -0.015em; }

p { margin: 0 0 1.1em; max-width: 66ch; }

.lead {
  font-size: clamp(1.05rem, 2vw, 1.25rem);
  color: var(--ink-80);
  font-weight: 300;
  line-height: 1.6;
}

.eyebrow {
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--blue);
  margin: 0 0 1.2rem;
  display: block;
}

.eyebrow--onblue { color: var(--cream); }

/* ---------- Knoppen ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-family: var(--body);
  font-size: 0.95rem;
  font-weight: 600;
  padding: 0.85em 1.6em;
  border-radius: var(--r);
  border: 1.5px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}

.btn:hover { transform: translateY(-2px); }

.btn--primary { background: var(--blue); color: var(--white); border-color: var(--blue); }
.btn--primary:hover { background: var(--blue-dark); border-color: var(--blue-dark); }

.btn--cream { background: var(--cream); color: var(--ink); border-color: var(--cream); }
.btn--cream:hover { background: var(--cream-dim); border-color: var(--cream-dim); }

.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn--ghost:hover { border-color: var(--blue); color: var(--blue); }

.btn--ghost-onblue { background: transparent; color: var(--white); border-color: rgba(255,255,255,.4); }
.btn--ghost-onblue:hover { border-color: var(--cream); color: var(--cream); }

.btn-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 2rem; }

/* ---------- Header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(251,250,246,.9);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-block: var(--kop-pad);
}

.brand { display: flex; align-items: center; text-decoration: none; }
.brand img { height: var(--logo-h); width: auto; display: block; }

.nav { display: flex; align-items: center; gap: 30px; }

.nav a {
  font-size: 0.94rem;
  font-weight: 400;
  color: var(--ink-80);
  text-decoration: none;
  padding-block: 4px;
  border-bottom: 2px solid transparent;
  transition: color .15s ease, border-color .15s ease;
}

.nav a:hover { color: var(--blue); }
.nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--cream); font-weight: 600; }

.nav-toggle {
  display: none;
  background: none;
  border: 1.5px solid var(--line);
  border-radius: var(--r);
  padding: 8px 12px;
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: .1em;
  cursor: pointer;
  color: var(--ink);
}

/* ---------- Hero ---------- */

.hero {
  position: relative;
  background: var(--blue);
  color: var(--white);
  overflow: hidden;
  padding-block: clamp(80px, 12vw, 150px);
}

/* Signatuur: het cijferraster achter de hero — de naam Numerica, letterlijk. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='150'%3E%3Ctext x='0' y='42' font-family='monospace' font-size='40' fill='%23ECE09A' fill-opacity='0.11'%3E1850 86%3C/text%3E%3Ctext x='40' y='96' font-family='monospace' font-size='40' fill='%23ECE09A' fill-opacity='0.08'%3E0913 24%3C/text%3E%3Ctext x='10' y='142' font-family='monospace' font-size='40' fill='%23ECE09A' fill-opacity='0.10'%3E7402 61%3C/text%3E%3C/svg%3E");
  pointer-events: none;
}

.hero > .wrap { position: relative; z-index: 1; }

.hero h1 { color: var(--white); max-width: 15ch; }
.hero .lead { color: rgba(255,255,255,.82); max-width: 52ch; }
.hero em { color: var(--cream); font-style: normal; }

/* ---------- Secties ---------- */

.section { padding-block: clamp(64px, 9vw, 112px); }
.section--paper { background: var(--paper); }
.section--white { background: var(--white); border-block: 1px solid var(--line); }
.section--ink { background: var(--ink); color: rgba(255,255,255,.82); }
.section--ink h2, .section--ink h3 { color: var(--white); }
.section--cream { background: var(--cream-dim); }

.section__head { max-width: 640px; margin-bottom: clamp(36px, 5vw, 56px); }
.section__head p { color: var(--muted); }
.section--ink .section__head p { color: rgba(255,255,255,.72); }

/* ---------- Grids ---------- */

.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(32px, 5vw, 64px); align-items: start; }

/* Winkelindeling: kaarten links, bestellijst rechts */
.layout-shop {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: clamp(32px, 5vw, 56px);
  align-items: start;
}

.grid-2col { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }

/* De koffiepagina mag breder dan de rest: drie kaarten naast elkaar
   plus het keuzepaneel hebben meer ruimte nodig. */
.wrap--breed { max-width: 1380px; }

/* ---------- Koffiekaart ---------- */

.coffee {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.coffee:hover {
  border-color: var(--blue-soft);
  box-shadow: 0 10px 30px -18px rgba(14,26,51,.4);
  transform: translateY(-3px);
}

/* Foto bovenaan, gegevens eronder. */
.coffee__in { display: flex; flex-direction: column; flex: 1; }

.coffee__foto {
  aspect-ratio: 1 / 1;
  background: linear-gradient(180deg, #F2F5FA 0%, #E7EDF7 100%);
  display: grid;
  place-items: center;
  padding: 16px;
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}

.coffee__foto img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  transition: transform .4s ease;
}

.coffee:hover .coffee__foto img { transform: scale(1.04); }

.coffee__body {
  padding: 18px 18px 16px;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

/* Brandingniveau, precies zoals het op de zak staat */
.badge {
  display: inline-block;
  min-height: 17px;
  font-family: var(--mono);
  font-size: 0.56rem;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--white);
  background: var(--blue);
  border-radius: 100px;
  padding: 3px 9px;
  margin-bottom: 9px;
  align-self: flex-start;
}

.coffee h3 { margin-bottom: 4px; font-size: 1.12rem; }

.coffee h3 span {
  display: block;
  font-family: var(--body);
  font-size: 0.74rem;
  font-weight: 400;
  font-style: italic;
  letter-spacing: 0;
  color: var(--muted);
  margin-top: 3px;
}

.coffee__notes {
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.45;
  margin-bottom: 12px;
}

/* Alleen bij de koffiekaartjes wordt de smaaknoot op twee regels gezet.
   Dat is nodig om de blokken in kaarten naast elkaar uit te lijnen.
   Elders — groothandel, over ons, artikelen — staan langere teksten in
   ditzelfde vak en die moeten gewoon helemaal te lezen zijn. */
#producten .coffee__notes,
#uitgelicht .coffee__notes {
  min-height: calc(0.86rem * 1.45 * 2);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Smaakprofiel — de cijfers uit ons eigen proefblad.
   De hoogte ligt vast: kop + vijf regels. Een kaart zonder cijfers
   houdt diezelfde ruimte leeg, zodat de rest op één lijn blijft. */
.schaal { margin: 0 0 12px; min-height: 143px; }
.schaal--leeg { min-height: 143px; }

.schaal__kop {
  display: block;
  font-family: var(--mono);
  font-size: 0.55rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink);
  padding-bottom: 6px;
  margin-bottom: 7px;
  border-bottom: 1px solid var(--line);
}

.schaal__rij {
  display: grid;
  grid-template-columns: 74px 1fr 16px;
  align-items: center;
  gap: 7px;
  margin-bottom: 5px;
}

.schaal__label {
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.schaal__track { height: 4px; background: #DDE8F5; border-radius: 100px; overflow: hidden; }
.schaal__vul { display: block; height: 100%; background: var(--blue); border-radius: 100px; }

.schaal__num {
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 600;
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

/* Verhouding arabica / robusta */
.mix {
  display: flex;
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 10px;
  min-height: 32px;
}
.mix--leeg { background: none; }

.mix__deel {
  display: grid;
  place-items: center;
  padding: 5px 2px;
  min-width: 0;
  line-height: 1.15;
}

.mix__deel b {
  font-family: var(--display);
  font-weight: 800;
  font-size: 0.78rem;
  letter-spacing: -0.02em;
}

.mix__deel i {
  font-family: var(--mono);
  font-style: normal;
  font-size: 0.48rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: .85;
}

.mix__deel--a { background: var(--ink); color: var(--white); }
.mix__deel--r { background: var(--blue-soft); color: var(--ink); }

/* Korte merktekens: cold brew, melk, volautomaat */
.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 12px;
  min-height: 20px;
  align-content: flex-start;
}

.tag {
  font-family: var(--mono);
  font-size: 0.53rem;
  font-weight: 600;
  letter-spacing: .09em;
  color: var(--white);
  border-radius: 3px;
  padding: 3px 6px;
  cursor: help;
}

.tag--cb    { background: #4A7FC1; }
.tag--melk  { background: #2E5590; }
.tag--auto  { background: var(--ink); }
.tag--zwart { background: var(--cream); color: var(--ink); }

/* ---------- Koffiekaart: specs ---------- */


/* Specs in mono — de cijfers achter de boon */
.coffee__specs {
  list-style: none;
  margin: 0 0 22px;
  min-height: 52px;
  padding: 18px 0 0;
  border-top: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 0.76rem;
}

.coffee__specs li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding-block: 5px;
  color: var(--muted);
}

.coffee__specs b {
  color: var(--ink);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.dots { letter-spacing: 2px; color: var(--blue); }
.dots i { color: var(--line); font-style: normal; }

.coffee__foot {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 6px;
}

.price {
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.35rem;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
}

.price--aanvraag { font-size: 0.92rem; font-family: var(--body); font-weight: 600; color: var(--muted); }

.price small { font-family: var(--body); font-size: 0.72rem; font-weight: 400; color: var(--muted); display: block; letter-spacing: 0; }

/* ---------- Waarde-blokken ---------- */

.value { border-top: 2px solid var(--blue); padding-top: 20px; }
.value h3 { margin-bottom: 8px; }
.value p { color: var(--muted); font-size: 0.96rem; margin: 0; }
.section--ink .value { border-top-color: var(--cream); }
.section--ink .value p { color: rgba(255,255,255,.7); }

/* ---------- Formulier ---------- */

.form { display: grid; gap: 18px; }
.field { display: grid; gap: 7px; }

.field label {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-80);
}

.field input, .field select, .field textarea {
  font-family: var(--body);
  font-size: 1rem;
  color: var(--ink);
  background: var(--white);
  border: 1.5px solid var(--line);
  border-radius: var(--r);
  padding: 12px 14px;
  width: 100%;
}

.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--blue);
  outline: none;
  box-shadow: 0 0 0 3px rgba(54,90,158,.15);
}

.field textarea { resize: vertical; min-height: 130px; }

.form-note { font-size: 0.85rem; color: var(--muted); margin: 0; }

.form-status {
  font-family: var(--mono);
  font-size: 0.82rem;
  padding: 12px 14px;
  border-radius: var(--r);
  background: var(--cream-dim);
  border: 1px solid var(--cream);
  /* De kleur staat er met opzet bij: op een donkere sectie — zoals het
     formulier van de landingspagina — erft de melding anders de witte
     letterkleur van die sectie en staat er room op room. */
  color: var(--ink);
}

.form-status[hidden] { display: none; }

/* ---------- Bestellijst (koffie-pagina) ---------- */

.order-panel {
  position: sticky;
  top: calc(var(--vast-h) + 22px);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 26px;
}

.order-list { list-style: none; margin: 0 0 18px; padding: 0; font-size: 0.92rem; }

.order-list li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  padding-block: 9px;
  border-bottom: 1px solid var(--line);
}

.order-list button {
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  font-size: 1.1rem;
  line-height: 1;
  padding: 0 2px;
}

.order-list button:hover { color: var(--blue); }

.order-total {
  display: flex;
  justify-content: space-between;
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.2rem;
  font-variant-numeric: tabular-nums;
  padding-block: 10px 18px;
}

.order-total[hidden] { display: none; }

.order-empty { color: var(--muted); font-size: 0.92rem; }

/* ---------- Filters ---------- */

.filters { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 36px; }

.filters button {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  background: var(--white);
  border: 1.5px solid var(--line);
  border-radius: 100px;
  padding: 9px 18px;
  cursor: pointer;
  color: var(--ink-80);
  transition: all .15s ease;
}

.filters button:hover { border-color: var(--blue-soft); }
.filters button[aria-pressed="true"] { background: var(--blue); border-color: var(--blue); color: var(--white); }

/* ---------- Footer ---------- */

.site-footer { background: var(--ink); color: rgba(255,255,255,.65); padding-block: 64px 32px; font-size: 0.92rem; }
.site-footer h4 { color: var(--white); font-size: 0.78rem; font-family: var(--mono); font-weight: 600; letter-spacing: .16em; text-transform: uppercase; margin-bottom: 14px; }
.site-footer a { color: rgba(255,255,255,.65); text-decoration: none; }
.site-footer a:hover { color: var(--cream); }
.site-footer__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; }
.site-footer__grid img { height: 46px; width: auto; margin-bottom: 18px; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.site-footer__base { margin-top: 48px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.14); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 14px; font-family: var(--mono); font-size: 0.74rem; letter-spacing: .05em; }

/* ---------- Bandje ---------- */

.cta-band { background: var(--cream); color: var(--ink); padding-block: clamp(48px, 7vw, 76px); }
.cta-band h2 { margin-bottom: 0.3em; }
.cta-band p { color: var(--ink-80); }

/* ---------- Scroll-reveal ---------- */

.reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.reveal.is-in { opacity: 1; transform: none; }

/* ---------- Responsief ---------- */

@media (max-width: 1180px) {
  .layout-shop { grid-template-columns: 1fr; }
  .grid-2col { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 900px) {
  .grid-2col { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
  .grid-2col { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .grid-2 { grid-template-columns: 1fr; }
  .site-footer__grid { grid-template-columns: 1fr 1fr; }
  .order-panel { position: static; }
}

@media (max-width: 680px) {
  body { font-size: 16px; }
  .grid-3 { grid-template-columns: 1fr; }
  .site-footer__grid { grid-template-columns: 1fr; }

}

/* Het menu telt zeven links plus de taalkeuze. Onder de 900px past dat
   niet meer naast elkaar, dus daar gaat het onder een menuknop. */
@media (max-width: 900px) {
  .site-header__inner { position: relative; }
  .nav-toggle { display: block; }
  .nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--white);
    border-bottom: 1px solid var(--line);
    padding: 8px 24px 18px;
    z-index: 60;
  }
  .nav.is-open { display: flex; }
  .nav a { padding-block: 12px; border-bottom: 1px solid var(--line); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
}

/* ============================================================
   Meertalig: taalwissel, hulpklassen
   ============================================================ */

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--blue);
  color: var(--white);
  padding: 12px 20px;
  font-size: 0.9rem;
}

.skip:focus { left: 0; }

.header-right { display: flex; align-items: center; gap: 18px; order: 3; }

.langswitch { display: flex; align-items: center; gap: 2px; }

.langswitch a {
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: .08em;
  color: var(--muted);
  text-decoration: none;
  padding: 5px 8px;
  border-radius: 3px;
  transition: color .15s ease, background-color .15s ease;
}

.langswitch a:hover { color: var(--blue); background: var(--cream-dim); }
.langswitch a[aria-current="true"] { color: var(--white); background: var(--blue); }

/* --- Taalkeuze als uitklapmenu (vanaf vier talen) ------------------
   Met zes talen namen de losse knopjes zoveel breedte dat "Over ons"
   over twee regels viel. Vanaf vier talen wordt het daarom één knop
   met een lijst eronder.

   <details> regelt het openen en sluiten zelf, dus de taal is ook te
   wisselen als het JavaScript niet laadt. */
.langswitch--menu { position: relative; display: block; }

.langswitch--menu > summary {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: .08em;
  color: var(--white);
  background: var(--blue);
  padding: 5px 8px;
  border-radius: 3px;
  cursor: pointer;
  user-select: none;
  list-style: none;                /* driehoekje van de browser weg */
  transition: background-color .15s ease;
}
.langswitch--menu > summary::-webkit-details-marker { display: none; }
.langswitch--menu > summary::marker { content: ''; }
.langswitch--menu > summary:hover { background: var(--blue-dark); }
.langswitch--menu > summary:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

.langswitch__pijl { transition: transform .15s ease; }
.langswitch--menu[open] .langswitch__pijl { transform: rotate(180deg); }

.langswitch__lijst {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  /* Hoger dan de 60 van het mobiele menu: dat staat later in de HTML
     en zou bij gelijke z-index over deze lijst heen vallen. */
  z-index: 70;
  min-width: 172px;
  display: grid;
  gap: 1px;
  padding: 4px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 3px;
  box-shadow: 0 10px 26px rgba(14, 26, 51, .13);
}

.langswitch__lijst a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 7px 10px;
  border-radius: 3px;
  text-decoration: none;
  color: var(--ink);
  font-family: var(--body);
  font-size: 0.88rem;
  font-weight: 400;
  letter-spacing: 0;
  white-space: nowrap;
  transition: color .15s ease, background-color .15s ease;
}
.langswitch__lijst a:hover { background: var(--cream-dim); color: var(--blue); }
.langswitch__lijst a[aria-current="true"] { background: var(--blue); color: var(--white); }

.langswitch__code {
  font-family: var(--mono);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: .08em;
  color: var(--muted);
}
.langswitch__lijst a:hover .langswitch__code { color: var(--blue); }
.langswitch__lijst a[aria-current="true"] .langswitch__code { color: var(--white); }

.hero--kort { padding-block: clamp(56px, 8vw, 110px); }

.stack { display: grid; gap: 26px; align-content: start; }

/* Kaart zonder foto — team, zakelijke blokken */
.coffee--plain .coffee__body { padding: 26px; }
.coffee--plain:hover { transform: none; box-shadow: none; border-color: var(--line); }

.coffee__specs.specs--kaal { border-top: none; padding-top: 0; font-size: 0.82rem; max-width: 440px; }

.eyebrow--los { margin-top: 2.5rem; }

.beeld { border-radius: var(--r); margin-bottom: 2.5rem; }


.form--los { margin-top: 1.6rem; }

.btn--vol { width: 100%; justify-content: center; }

.order-panel .form-note { margin-top: 14px; }

/* Checkbox met label ernaast */
.check {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  text-transform: none;
  letter-spacing: 0;
  font-family: var(--body);
  font-size: 0.95rem;
  color: var(--ink);
}

.check input { width: auto; margin-top: 4px; }

/* Kleine toevoeging binnen een label, bv. "(optioneel)" */
.lc { text-transform: none; letter-spacing: 0; }

@media (max-width: 680px) {
  .header-right { gap: 10px; }
  /* Alleen de losse knopjes krimpen. De regels in het uitklapmenu
     staan onder elkaar en hebben die ruimte niet nodig; met 0.64rem
     zouden de volledige taalnamen daar onleesbaar klein worden. */
  .langswitch:not(.langswitch--menu) a { padding: 5px 6px; font-size: 0.64rem; }
  .langswitch__lijst { min-width: 156px; }
}

/* Honeypot: onzichtbaar voor bezoekers, wel invulbaar voor bots. */
.lokaas { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-status--ok   { background: var(--cream-dim); border-color: var(--cream); }
.form-status--fout { background: #FBEDED; border-color: #E7C4C4; color: #A3282C; }

/* ---------- Offerteformulier in het keuzepaneel ---------- */

.paneelform {
  margin-top: 4px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  gap: 14px;
}

.paneelform[hidden] { display: none; }

.paneelform .field label {
  font-size: 0.66rem;
  letter-spacing: .12em;
}

.paneelform input,
.paneelform textarea {
  font-size: 0.94rem;
  padding: 10px 12px;
}

.paneelform textarea { min-height: 76px; }

.paneelform .btn { margin-top: 2px; }

#paneelnoot[hidden] { display: none; }
#afronden[hidden] { display: none; }

/* ---------- Winkelbalk onder het menu ----------
   De achtergrond is de kleur van de cijfers in de hero: het crème
   op 11% over het merkblauw komt uit op #4A699E. Gemeten, niet gegokt. */

.banner {
  --banner-bg: #4A699E;

  /* Blijft staan bij het scrollen, net onder het menu. De afstand
     rekent zichzelf uit vanuit de logohoogte, plus 1px voor de
     onderrand van het menu. */
  position: sticky;
  top: calc(var(--logo-h) + var(--kop-pad) * 2 + 1px);
  z-index: 40;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  height: var(--banner-h);
  padding-inline: 20px;
  background: var(--banner-bg);
  color: var(--cream);
  text-decoration: none;
  /* Onderrandje, anders loopt de balk visueel over in de blauwe hero. */
  border-bottom: 1px solid rgba(255, 255, 255, .16);
  transition: background-color .2s ease;
}

.banner:hover { background: #3F5D93; }

.banner__foto {
  flex: none;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--ink);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .22);
}

.banner__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.banner__tekst {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(0.86rem, 1.7vw, 1.02rem);
  letter-spacing: -0.015em;
  line-height: 1.25;
  text-align: center;
}

.banner__pijl {
  flex: none;
  font-size: 1.05rem;
  color: var(--cream);
  opacity: .8;
}

@media (max-width: 680px) {
  .banner { gap: 11px; padding-inline: 14px; }
  .banner__foto { width: 40px; height: 40px; }
  .banner__tekst { font-size: 0.82rem; }
}

/* Gewone productfoto's (met achtergrond) vullen het hele fotovlak. */
.coffee__foto--vol { padding: 0; background: var(--ink); }
.coffee__foto--vol img { width: 100%; height: 100%; max-width: none; max-height: none; object-fit: cover; }

/* Leeg brandingmerkje: houdt de ruimte, laat niets zien. */
.badge--leeg { background: none; border: none; }

/* ---------- Bovenste blok met foto of video ---------- */

/* Staat er een foto of video achter, dan verdwijnt het cijferpatroon. */
.hero--media::before { display: none; }

.hero__media {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--blue);
}

.hero__media img,
.hero__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Donkere sluier: zonder deze laag is witte tekst op een foto
   onleesbaar zodra er een licht vlak achter komt. */
.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    rgba(14, 26, 51, .82) 0%,
    rgba(14, 26, 51, .68) 45%,
    rgba(54, 90, 158, .52) 100%
  );
}

/* Bezoekers die beweging hebben uitgezet krijgen het stilstaande beeld.
   De video blijft staan — hij speelt alleen niet, en toont dan zijn
   posterframe. Weghalen zou ook de poster verbergen. */

/* Video alleen op een groot scherm: op een telefoon staat er een
   stilstaand beeld, dat scheelt de bezoeker data en batterij. */
.hero__media--groot .hero__stil { position: absolute; inset: 0; }

@media (max-width: 780px) {
  .hero__media--groot video { display: none; }
}

@media (min-width: 781px) {
  .hero__media--groot .hero__stil { display: none; }
}

/* ---------- Opmaak binnen een artikel ---------- */

.artikel { max-width: 760px; }

/* Foto en tekst even breed: de foto vult de kolom, de tekst loopt tot
   dezelfde rand. */
.artikel > .beeld,
.artikel img.beeld { width: 100%; max-width: 100%; }

/* Aan beide kanten uitgelijnd. Met afbreken erbij, anders vallen er
   grote gaten tussen de woorden — zeker bij lange Nederlandse en
   Turkse woorden. */
.artikel p,
.artikel li,
.artikel blockquote {
  /* De algemene regel kapt alinea's af op 66 tekens; in een artikel
     moet de tekst juist even breed zijn als de foto erboven. */
  max-width: none;
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
  -webkit-hyphens: auto;
  overflow-wrap: break-word;
}

/* De laatste regel van een alinea niet uitrekken. */
.artikel p { text-align-last: left; }

.artikel h2, .artikel h3, .artikel h4 { margin: 1.8em 0 0.5em; }
.artikel h2 { font-size: clamp(1.5rem, 3vw, 2rem); }
.artikel h3 { font-size: 1.25rem; }
.artikel h4 { font-size: 1.05rem; }
.artikel h2:first-child, .artikel h3:first-child { margin-top: 0; }

.artikel p { margin: 0 0 1.1em; }

.artikel ul, .artikel ol { margin: 0 0 1.2em; padding-left: 22px; }
.artikel li { margin-bottom: 0.45em; }

.artikel a { color: var(--blue); }

.artikel img {
  max-width: 100%;
  height: auto;
  border-radius: var(--r);
  margin: 1.4em 0;
}

.artikel figure { margin: 1.6em 0; }
.artikel figure img { margin: 0; }
.artikel figcaption {
  font-size: 0.82rem;
  color: var(--muted);
  margin-top: 8px;
}

.artikel blockquote {
  margin: 1.6em 0;
  padding: 4px 0 4px 20px;
  border-left: 3px solid var(--cream);
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.1rem;
  line-height: 1.45;
  color: var(--ink-80);
}

.artikel hr { border: none; border-top: 1px solid var(--line); margin: 2.2em 0; }

.artikel code {
  font-family: var(--mono);
  font-size: 0.86em;
  background: var(--cream-dim);
  padding: 1px 5px;
  border-radius: 3px;
}

.artikel pre {
  background: var(--ink);
  color: var(--white);
  padding: 16px 18px;
  border-radius: var(--r);
  overflow-x: auto;
  font-size: 0.84rem;
}
.artikel pre code { background: none; color: inherit; padding: 0; }

.artikel table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5em 0;
  font-size: 0.92rem;
}
.artikel th, .artikel td {
  text-align: left;
  padding: 9px 12px;
  border-bottom: 1px solid var(--line);
}
.artikel th { font-family: var(--mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }

/* Op een smal scherm passen er te weinig woorden op een regel om netjes
   uit te vullen; daar leest links uitlijnen rustiger. */
@media (max-width: 680px) {
  .artikel p,
  .artikel li,
  .artikel blockquote { text-align: left; }
}

/* ============================================================
   Tekst aan beide kanten uitlijnen
   ------------------------------------------------------------
   Met afbreken erbij: zonder dat vallen er gaten tussen de
   woorden, zeker bij lange Nederlandse en Turkse woorden.
   De laatste regel van een alinea wordt niet uitgerekt.
   ============================================================ */

.hero .lead,
.section__head p,
.value p,
.grid-2 > div > p,
.coffee__notes,
.order-empty,
.form-note,
.site-footer__grid p,
.cta-band p,
.artikel p,
.artikel li,
.artikel blockquote {
  text-align: justify;
  text-align-last: left;
  hyphens: auto;
  -webkit-hyphens: auto;
  overflow-wrap: break-word;
}

/* Uitvullen werkt pas vanaf ongeveer 45 tekens per regel. Deze drie
   blijven daaronder — gemeten: 37 tot 44 tekens — en zouden lelijke
   gaten tussen de woorden krijgen. Die laten we links uitgelijnd. */
.coffee__notes,
.order-panel .form-note,
.order-panel .order-empty {
  text-align: left;
  hyphens: manual;
}

/* Smalle kolommen lezen slechter uitgevuld dan links uitgelijnd:
   er passen te weinig woorden op een regel. */
@media (max-width: 680px) {
  .hero .lead,
  .section__head p,
  .value p,
  .grid-2 > div > p,
  .coffee__notes,
  .order-empty,
  .form-note,
  .site-footer__grid p,
  .cta-band p,
  .artikel p,
  .artikel li,
  .artikel blockquote {
    text-align: left;
  }
}

/* ============================================================
   NUMERICA — kopaanvullingen
   ------------------------------------------------------------
   Alles hieronder is toegevoegd; er is niets boven deze regel
   gewijzigd. Drie onderdelen: het woordmerk, de knop naar het
   klantenportaal en de knop naar de webshop.
   ============================================================ */

/* De kop toont alleen het beeldmerk; de naam staat er al in. Staat er
   in inc/header.php nog een <span>NUMERICA</span>, dan blijft die hier
   verborgen. */
.brand span { display: none; }

/* ---------- Klantenportaal ---------- */

/* De knop staat naast de menuknop en leent daar zijn vorm van: zelfde
   randdikte, zelfde hoek, zelfde lettertype. Zo leest de rechterkant
   als één geheel in plaats van als losse onderdelen. */
.portal {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  padding: 9px 14px;
  border: 1.5px solid var(--line);
  border-radius: var(--r);
  background: none;
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: .06em;
  line-height: 1;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
  transition: color .15s ease, border-color .15s ease, background-color .15s ease;
}

.portal:hover,
.portal:focus-visible {
  color: var(--blue);
  border-color: var(--blue-soft);
  background: var(--cream-dim);
}

.portal__icoon { flex: 0 0 auto; }

/* ---------- Webshop ---------- */

/* De selector is .nav a.nav__shop en niet .nav__shop: de regel .nav a
   verderop weegt zwaarder en zou anders de binnenruimte overschrijven. */
.nav a.nav__shop {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  line-height: 1;
  white-space: nowrap;
  padding: 11px 22px;
  border-bottom: none;
  border-radius: 100px;
  background: var(--cream);
  color: var(--ink);
  font-weight: 600;
  box-shadow: 0 2px 10px rgba(54, 90, 158, .18);
  transition: background-color .15s ease, color .15s ease, box-shadow .15s ease;
}

/* Het pijltje ↗ iets kleiner dan de tekst. */
.nav a.nav__shop span { font-size: .9em; }

.nav a.nav__shop:hover,
.nav a.nav__shop:focus-visible {
  background: var(--blue);
  color: var(--white);
  box-shadow: 0 4px 14px rgba(54, 90, 158, .32);
}

/* ---------- Ruimte in de kop ---------- */

/* De menubalk stond op 900px. Met de portaalknop erbij en een bredere
   webshopknop past de rij daar niet meer: in het Turks is 953px nodig,
   in het Nederlands 937px. Daarom klapt het menu nu onder 980px in.
   Deze regels herhalen wat de blokken hierboven op 900px doen, zodat
   de tussenliggende maten ook goed gaan. */
@media (max-width: 980px) {
  .site-header__inner { position: relative; }
  .nav-toggle { display: block; }
  .nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--white);
    border-bottom: 1px solid var(--line);
    padding: 8px 24px 18px;
    z-index: 60;
  }
  .nav.is-open { display: flex; }
  .nav a { padding-block: 12px; border-bottom: 1px solid var(--line); }

  /* In het uitklapmenu staat de webshopknop onderaan, los van de lijst. */
  .nav a.nav__shop {
    justify-content: center;
    margin-top: 14px;
    margin-bottom: 4px;
    border-bottom: none;
  }
}

/* Op de telefoon blijft van het klantenportaal alleen het icoon over:
   de kop is daar te smal voor de tekst. */
@media (max-width: 680px) {
  .portal { padding: 9px; gap: 0; }
  .portal__tekst { display: none; }
}

/* Heel smalle toestellen: iets minder ruimte tussen de knoppen. */
@media (max-width: 400px) {
  .header-right { gap: 8px; }
  .langswitch a { padding: 5px 4px; }
  .portal { padding: 8px; }
  .nav-toggle { padding: 8px 9px; }
}

/* Het logo iets verder naar links zodra de volledige menubalk zichtbaar
   is. Deze ene waarde bepaalt hoeveel: hoger is verder naar links.
   Boven de 24px steekt het logo buiten de tekstkolom uit. */
@media (min-width: 981px) {
  .brand { margin-left: -18px; }
}

/* surum: v5 - 25 Temmuz */
/* ---------- Workshops ----------
   Drie feitenkaarten (prijs, duur, groep), het genummerde programma en
   de lijst met data. Kleuren en letters uit de huisstijl hierboven. */
.ws-feiten {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: clamp(36px, 5vw, 56px);
}
.ws-feit {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 20px 22px;
  display: grid;
  gap: 4px;
}
.ws-feit__l {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}
.ws-feit__w {
  font-family: var(--display);
  font-weight: 800;
  font-size: 2rem;
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.ws-feit__s { font-size: 0.85rem; color: var(--muted); }

.ws-tekst h2 { margin-top: 1.6em; }
.ws-tekst h2:first-child { margin-top: 0; }

.ws-programma { list-style: none; margin: 0 0 1.4em; padding: 0; display: grid; gap: 12px; }
.ws-programma li {
  display: flex;
  gap: 18px;
  align-items: baseline;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 16px 20px;
}
.ws-programma__nr { font-family: var(--mono); font-weight: 600; color: var(--blue); flex: none; }
.ws-programma p { margin: 4px 0 0; color: var(--muted); font-size: 0.96rem; }

.ws-data { list-style: none; margin: 0 0 18px; padding: 0; border-top: 1px solid var(--line); }
.ws-data li {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}
.ws-data li span { grid-column: 1; font-size: 0.9rem; color: var(--muted); }
.ws-data li em {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  font-style: normal;
  font-family: var(--mono);
  font-size: 0.76rem;
  color: var(--blue);
}
.ws-data--vol { opacity: .55; }
.ws-data--vol em { color: var(--muted); }

.ws-terug { padding-block: 28px 56px; }

@media (max-width: 760px) {
  .ws-feiten { grid-template-columns: 1fr; }
  .ws-feit__w { font-size: 1.6rem; }
}

/* ---------- Menu: nooit over twee regels ----------
   Een menu-item mag niet breken ("Over / ons"). Past de rij niet, dan
   zet assets/main.js de klasse kop--vol op de kop en klapt het menu in,
   met dezelfde weergave als onder 980px (zie "Ruimte in de kop"). */
.nav a { white-space: nowrap; }
@media (min-width: 981px) {
  .nav { gap: 24px; }
}
.site-header.kop--vol .site-header__inner { position: relative; }
.site-header.kop--vol .nav-toggle { display: block; }
.site-header.kop--vol .nav {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  background: var(--white);
  border-bottom: 1px solid var(--line);
  padding: 8px 24px 18px;
  z-index: 60;
}
.site-header.kop--vol .nav.is-open { display: flex; }
.site-header.kop--vol .nav a { padding-block: 12px; border-bottom: 1px solid var(--line); }
.site-header.kop--vol .nav a.nav__shop {
  justify-content: center;
  margin-top: 14px;
  margin-bottom: 4px;
  border-bottom: none;
}
/* Ook het portaal-opschrift niet breken: anders krimpt de kop in plaats
   van over te lopen, en ziet main.js niet dat het menu moet inklappen. */
.portal__tekst, .langswitch a { white-space: nowrap; }