/*
 * fermento.app — de etalage.
 *
 * Dit is niet de huisstijl van een bureau maar die van de app zelf: dezelfde
 * donkere bak, dezelfde letters, hetzelfde goud. Wie van de pagina naar de app
 * gaat, mag geen sprong voelen — dat is het hele punt van een etalage.
 *
 * De opbouw is die van een streamingdienst en niet die van een brochure.
 * Concreet betekent dat vier dingen:
 *
 *   1. Elk blok vult het scherm en heeft één boodschap. Je bladert van scherm
 *      naar scherm, niet door een lange kolom tekst.
 *   2. Beeld staat achter de tekst, niet ernaast. Vollopend, met een verloop
 *      eroverheen zodat de letters altijd leesbaar zijn.
 *   3. De koppen zijn groot. Niet groot-voor-een-website maar groot: op een
 *      breed scherm loopt de eerste kop tegen de honderd pixels.
 *   4. Er staat altijd een knop in beeld. Wie op elk moment overtuigd raakt,
 *      moet op dat moment kunnen klikken.
 *
 * Wat er níet in zit: parallax die de pagina laat schokken, tellers die vanaf
 * nul omhoog rennen, en tekst die pas verschijnt als je erlangs scrolt. Dat
 * ziet er op een demo goed uit en is in gebruik alleen maar traag.
 */

/* ================================================================ letters */

@font-face {
  font-family: 'Fraunces';
  src: url('fonts/fraunces-latin.woff2') format('woff2');
  font-weight: 300 900; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fraunces';
  src: url('fonts/fraunces-latin-ext.woff2') format('woff2');
  font-weight: 300 900; font-display: swap;
  unicode-range: U+0100-02BA, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+A720-A7FF;
}
@font-face {
  font-family: 'Manrope';
  src: url('fonts/manrope-latin.woff2') format('woff2');
  font-weight: 200 800; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Manrope';
  src: url('fonts/manrope-latin-ext.woff2') format('woff2');
  font-weight: 200 800; font-display: swap;
  unicode-range: U+0100-02BA, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+A720-A7FF;
}

/* ================================================================ de bak */

:root {
  /* Exact de kleuren van de app. Geen lichte variant: deze pagina is donker,
     punt. Een etalage die van kleur wisselt met de systeeminstelling is geen
     etalage maar een instelling. */
  --bg: #0d0a07;
  --bg-op: #17120e;
  --paneel: #201a15;
  --paneel-op: #2a2118;
  --lijn: #382d22;
  --lijn-op: #52412f;

  --ink: #f7f0e4;
  --ink-zacht: #b9a892;
  --ink-dof: #7d6e5d;

  --goud: #db9815;
  --goud-licht: #f0b53d;
  --goud-diep: #a8620f;
  --groen: #7fbf6a;
  --rood: #e0573f;

  --r: 14px;
  --r-groot: 22px;
  --max: 78rem;
  --kop-max: 20ch;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 17px/1.6 'Manrope', -apple-system, "Segoe UI", Roboto, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg { max-width: 100%; display: block; }
a { color: var(--goud); text-decoration: none; }

h1, h2, h3, .cijfer-groot {
  font-family: 'Fraunces', Georgia, serif;
  font-variation-settings: 'SOFT' 34, 'WONK' 1, 'opsz' 100;
  font-weight: 600;
  line-height: 0.98;
  letter-spacing: -0.028em;
  margin: 0;
  text-wrap: balance;
}

/* Groot. Op een breed scherm loopt dit tegen de honderd pixels — dat is het
   verschil tussen een kop en een aankondiging. */
h1 { font-size: clamp(2.9rem, 8.2vw, 6.2rem); }
h2 { font-size: clamp(2.1rem, 5.4vw, 4rem); }
h3 { font-size: clamp(1.15rem, 2vw, 1.4rem); letter-spacing: -0.015em; }
p { margin: 0 0 1.1rem; }

.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: clamp(1.1rem, 4vw, 2.5rem); }
.smal { max-width: 46rem; }

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

/* ================================================================== nav */

/*
 * Doorzichtig boven de held, dicht zodra je scrolt. Dat laatste gaat met
 * animation-timeline en dus zonder JavaScript: de balk kijkt naar hoever de
 * pagina gescrold is en kleurt zichzelf. Kent een browser dat niet, dan staat
 * hij gewoon altijd dicht — dat is lelijker en het werkt.
 */
.nav {
  position: fixed; inset: 0 0 auto; z-index: 60;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem;
  padding: clamp(.7rem, 2vw, 1.1rem) clamp(1.1rem, 4vw, 2.5rem);
  padding-top: calc(clamp(.7rem, 2vw, 1.1rem) + env(safe-area-inset-top));
  background: rgba(13, 10, 7, 0.92);
  border-bottom: 1px solid transparent;
}
@supports (animation-timeline: scroll()) {
  .nav {
    background: transparent;
    animation: navDicht linear both;
    animation-timeline: scroll(root block);
    animation-range: 0 6rem;
  }
  @keyframes navDicht {
    from { background: rgba(13, 10, 7, 0); border-bottom-color: transparent; }
    to   { background: rgba(13, 10, 7, 0.94); border-bottom-color: var(--lijn); }
  }
}

.merk { display: flex; align-items: center; gap: .6rem; color: var(--ink); }
.merk img { width: 34px; height: 34px; border-radius: 9px; }
.merk b {
  font-family: 'Fraunces', Georgia, serif; font-weight: 600; font-size: 1.28rem;
  letter-spacing: -0.02em; font-variation-settings: 'SOFT' 40, 'WONK' 1, 'opsz' 60;
}
.nav-rechts { display: flex; align-items: center; gap: .5rem; }
.nav-rechts a:not(.knop) {
  color: var(--ink-zacht); font-size: .92rem; font-weight: 600; padding: .45rem .6rem;
}
.nav-rechts a:not(.knop):hover { color: var(--ink); }
@media (max-width: 46rem) { .nav-rechts .verbergklein { display: none; } }

/* ================================================================ knoppen */

.knop {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  padding: .85rem 1.5rem;
  background: var(--goud); color: #1a1206;
  border: 0; border-radius: 10px;
  font: 700 1rem/1 'Manrope', system-ui, sans-serif; letter-spacing: -.01em;
  cursor: pointer; white-space: nowrap;
  box-shadow: 0 1px 0 rgba(255,255,255,.22) inset, 0 8px 26px -10px rgba(219,152,21,.7);
  transition: transform .14s cubic-bezier(.2,.8,.3,1), box-shadow .14s ease, background .14s ease;
}
.knop:hover { background: var(--goud-licht); transform: translateY(-1px);
              box-shadow: 0 1px 0 rgba(255,255,255,.28) inset, 0 14px 34px -10px rgba(219,152,21,.85); }
.knop:active { transform: translateY(0); }
.knop svg { width: 20px; height: 20px; }

.knop-groot { padding: 1.15rem 2.2rem; font-size: 1.15rem; border-radius: 12px; }

.knop-stil {
  background: rgba(247,240,228,.1); color: var(--ink);
  box-shadow: inset 0 0 0 1px rgba(247,240,228,.2);
}
.knop-stil:hover { background: rgba(247,240,228,.16); }

.knop[aria-disabled="true"] { opacity: .55; cursor: default; box-shadow: none; }
.knop[aria-disabled="true"]:hover { transform: none; background: var(--goud); }

/* ================================================================== held */

/*
 * Vult het scherm. `100svh` en niet `100vh`: op een telefoon telt vh de
 * adresbalk mee die er bij het scrollen af gaat, en dan springt de hele pagina
 * op het moment dat iemand begint te lezen.
 */
.held {
  position: relative;
  min-height: 100svh;
  display: grid; align-items: end;
  padding-bottom: clamp(3rem, 9vh, 7rem);
  overflow: hidden;
  isolation: isolate;
}
.held-beeld {
  position: absolute; inset: 0; z-index: -2;
  background: center / cover no-repeat;
  transform: scale(1.04);
}
/* Het verloop dat de tekst leesbaar houdt. Twee lagen: een donkere voet zodat
   de kop staat, en een waas van links zodat er ook op een breed scherm iets
   is om op te lezen. */
.held::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to top, var(--bg) 2%, rgba(13,10,7,.82) 26%, rgba(13,10,7,.25) 62%, rgba(13,10,7,.55) 100%),
    linear-gradient(to right, rgba(13,10,7,.9) 0%, rgba(13,10,7,.35) 46%, transparent 78%);
}

.held h1 { max-width: 14ch; }
.held .inleiding {
  margin: 1.5rem 0 0; max-width: 44ch;
  font-size: clamp(1.05rem, 2.1vw, 1.32rem); line-height: 1.55; color: #e8dcc8;
  text-shadow: 0 1px 20px rgba(0,0,0,.7);
}
.held-knoppen { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2.1rem; }
.held-voet { margin: 1.2rem 0 0; font-size: .9rem; color: var(--ink-dof); max-width: 46ch; }

/* Het pijltje onderaan. Niet omdat mensen niet weten dat ze kunnen scrollen,
   maar omdat het zegt: hieronder staat nog iets. */
.scrolpijl {
  position: absolute; left: 50%; bottom: 1.4rem; z-index: 2;
  translate: -50% 0; color: var(--ink-dof);
  animation: pijlWip 2.6s ease-in-out infinite;
}
@keyframes pijlWip { 0%,100% { translate: -50% 0; } 50% { translate: -50% 7px; } }

/* ================================================================ secties */

.sectie { padding-block: clamp(4.5rem, 11vh, 9rem); position: relative; }
.sectie-op { background: var(--bg-op); }
.sectie-vol { min-height: 92svh; display: grid; align-content: center; }

.kop-groep { max-width: var(--kop-max); margin-bottom: clamp(2rem, 5vw, 3.2rem); }
.kop-groep.breed { max-width: 32ch; }
.kop-groep p {
  margin: 1.1rem 0 0; max-width: 52ch;
  font-size: clamp(1rem, 1.8vw, 1.17rem); color: var(--ink-zacht); line-height: 1.6;
}

/* Het kleine label boven een kop. Zegt waar je bent zonder de kop te belasten. */
.etiket {
  display: inline-flex; align-items: center; gap: .5rem;
  margin-bottom: 1rem;
  font: 700 .78rem/1 'Manrope', system-ui; letter-spacing: .14em; text-transform: uppercase;
  color: var(--goud);
}
.etiket::before { content: ""; width: 1.6rem; height: 2px; background: var(--goud); border-radius: 2px; }

/* ============================================================ grote cijfers */

/*
 * Drie getallen die het verhaal in één blik vertellen. Groot gezet, want een
 * cijfer dat je moet zoeken is geen argument.
 */
.cijferrij {
  display: grid; gap: clamp(1.5rem, 4vw, 3rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  margin-top: clamp(2rem, 5vw, 3rem);
}
.cijfer-vak { border-top: 2px solid var(--lijn-op); padding-top: 1.1rem; }
.cijfer-groot {
  font-size: clamp(3rem, 7vw, 5rem); line-height: .92; color: var(--goud);
  font-variant-numeric: tabular-nums;
}
.cijfer-groot small { font-size: .42em; color: var(--ink-zacht); font-weight: 500; }
.cijfer-vak p { margin: .7rem 0 0; color: var(--ink-zacht); font-size: .98rem; line-height: 1.5; }

/* ================================================================== rijen */

/*
 * De horizontale rij, het patroon dat iedereen van een streamingdienst kent:
 * je veegt erdoorheen en er staat altijd nog iets half in beeld, zodat je weet
 * dat het doorloopt. `scroll-snap` maakt dat het netjes uitkomt.
 *
 * De rij loopt met opzet tot buiten de kolom door: een carrousel die aan de
 * rand stopt ziet eruit als een fout.
 */
.rij-kop { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.rij-kop .telling { color: var(--ink-dof); font-size: .92rem; }

.rij {
  display: grid; grid-auto-flow: column;
  grid-auto-columns: min(78vw, 20rem);
  gap: 1rem;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  padding: 1.6rem clamp(1.1rem, 4vw, 2.5rem) 2rem;
  margin-inline: calc(-1 * clamp(1.1rem, 4vw, 2.5rem));
  scrollbar-width: none;
}
.rij::-webkit-scrollbar { display: none; }
.rij > * { scroll-snap-align: start; }

/* De kaart. Wordt groter als je erover gaat, zoals in de rij van een
   streamingdienst — dat is niet gekopieerd om het kopiëren maar omdat het
   werkt: je ziet welke je te pakken hebt. */
.kaart {
  position: relative;
  background: var(--paneel);
  border: 1px solid var(--lijn);
  border-radius: var(--r-groot);
  padding: 1.6rem 1.5rem 1.7rem;
  display: grid; align-content: start; gap: .65rem;
  overflow: hidden;
  transition: transform .22s cubic-bezier(.2,.8,.3,1), border-color .22s ease, box-shadow .22s ease;
}
.kaart::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 3px;
  background: linear-gradient(90deg, var(--goud), transparent);
  opacity: 0; transition: opacity .22s ease;
}
.kaart:hover {
  transform: translateY(-6px);
  border-color: var(--lijn-op);
  box-shadow: 0 24px 60px -22px rgba(0,0,0,.9);
}
.kaart:hover::before { opacity: 1; }
.kaart h3 { color: var(--ink); }
.kaart p { margin: 0; color: var(--ink-zacht); font-size: .97rem; line-height: 1.6; }
.kaart .nummer {
  font: 600 .8rem/1 'Manrope'; letter-spacing: .1em; color: var(--goud-diep);
}

/* ================================================================ schermen */

.schermrij {
  display: grid; grid-auto-flow: column; grid-auto-columns: min(64vw, 15.5rem);
  gap: clamp(.9rem, 2.5vw, 1.6rem);
  overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 1rem clamp(1.1rem, 4vw, 2.5rem) 2.4rem;
  margin-inline: calc(-1 * clamp(1.1rem, 4vw, 2.5rem));
  scrollbar-width: none;
}
.schermrij::-webkit-scrollbar { display: none; }
.schermrij figure { margin: 0; scroll-snap-align: center; display: grid; gap: .9rem; }
.schermrij img {
  width: 100%; height: auto;
  border-radius: 20px;
  border: 1px solid var(--lijn-op);
  box-shadow: 0 30px 70px -26px rgba(0,0,0,.95);
  transition: transform .25s cubic-bezier(.2,.8,.3,1);
}
.schermrij figure:hover img { transform: translateY(-8px) scale(1.02); }
.schermrij figcaption { color: var(--ink-zacht); font-size: .9rem; line-height: 1.5; }

/* ================================================================== prijs */

.prijsrij {
  display: grid; gap: 1.2rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
  max-width: 52rem;
}
.prijskaart {
  background: var(--paneel); border: 1px solid var(--lijn);
  border-radius: var(--r-groot); padding: 2rem 1.8rem;
  display: grid; align-content: start; gap: 1rem;
}
.prijskaart.uit {
  border-color: rgba(219,152,21,.45);
  background: linear-gradient(180deg, rgba(219,152,21,.09), var(--paneel) 46%);
  box-shadow: 0 0 0 1px rgba(219,152,21,.16), 0 30px 70px -30px rgba(219,152,21,.4);
}
.prijskaart .lint {
  justify-self: start;
  font: 700 .72rem/1 'Manrope'; letter-spacing: .12em; text-transform: uppercase;
  background: var(--goud); color: #1a1206; padding: .42rem .7rem; border-radius: 6px;
}
.prijskaart .bedrag {
  font-family: 'Fraunces', Georgia, serif; font-weight: 600;
  font-size: clamp(2.6rem, 6vw, 3.6rem); line-height: 1; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.prijskaart .bedrag small { font-size: .3em; color: var(--ink-zacht); font-weight: 500; letter-spacing: .02em; }
.prijskaart ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .65rem; }
.prijskaart li { position: relative; padding-left: 1.7rem; font-size: .97rem; color: var(--ink-zacht); }
.prijskaart li::before {
  content: "\2713"; position: absolute; left: 0; top: -1px;
  color: var(--goud); font-weight: 700;
}
.prijskaart.uit li { color: var(--ink); }

/* ==================================================================== faq */

.faq { display: grid; gap: 0; max-width: 52rem; border-top: 1px solid var(--lijn); }
.faq details { border-bottom: 1px solid var(--lijn); }
.faq summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  padding: 1.5rem .2rem;
  font-family: 'Fraunces', Georgia, serif; font-weight: 600;
  font-size: clamp(1.05rem, 2.2vw, 1.42rem); letter-spacing: -.015em;
  transition: color .15s ease;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--goud); }
.faq summary::after {
  content: "+"; flex: 0 0 auto;
  font-family: 'Manrope', system-ui; font-weight: 300; font-size: 1.9rem; line-height: 1;
  color: var(--goud); transition: rotate .25s cubic-bezier(.2,.8,.3,1);
}
.faq details[open] summary::after { rotate: 45deg; }
.faq details p {
  margin: 0 0 1.6rem; max-width: 60ch;
  color: var(--ink-zacht); font-size: 1.02rem; line-height: 1.7;
}

/* ================================================================== slot */

.slot {
  position: relative; overflow: hidden;
  min-height: 76svh; display: grid; align-content: center;
  text-align: center;
}
.slot-beeld {
  position: absolute; inset: 0; z-index: -2;
  background: center / cover no-repeat; opacity: .5;
}
.slot::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(70% 70% at 50% 50%, rgba(13,10,7,.5), var(--bg) 78%);
}
.slot h2 { max-width: 18ch; margin-inline: auto; }
.slot .knoppen { display: flex; gap: .8rem; justify-content: center; flex-wrap: wrap; margin-top: 2.2rem; }
.slot .onder { margin-top: 1.4rem; color: var(--ink-dof); font-size: .92rem; }

/* ================================================================== voet */

.voet {
  border-top: 1px solid var(--lijn); padding-block: 3rem 2rem;
  color: var(--ink-dof); font-size: .9rem;
}
.voet a { color: var(--ink-zacht); }
.voet a:hover { color: var(--goud); }
.voet-rij { display: flex; flex-wrap: wrap; gap: .6rem 1.4rem; align-items: center; }
.voet-rij + .voet-rij { margin-top: .8rem; }

/* ============================================================ vaste balk */

/*
 * Onderaan, altijd. Op een pagina van acht schermen staat de knop anders alleen
 * bovenaan en helemaal onderaan, en precies daartussen raakt iemand overtuigd.
 */
.vast {
  position: fixed; inset: auto 0 0; z-index: 55;
  background: rgba(23,18,14,.97);
  border-top: 1px solid var(--lijn);
  padding: .7rem clamp(1.1rem, 4vw, 2.5rem);
  padding-bottom: calc(.7rem + env(safe-area-inset-bottom));
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  box-shadow: 0 -10px 40px -14px rgba(0,0,0,.9);
}
.vast .zin { font-size: .95rem; line-height: 1.3; }
.vast .zin small { display: block; color: var(--ink-dof); font-size: .82rem; }
@supports (animation-timeline: view()) {
  .vast {
    translate: 0 110%;
    animation: vastIn linear both;
    animation-timeline: view(block);
    animation-range: entry 0% entry 1%;
  }
  @keyframes vastIn { to { translate: 0 0; } }
}
body { padding-bottom: 5.2rem; }
@media (max-width: 34rem) { .vast .zin small { display: none; } }


/* ==================================================== wat er in de pot gebeurt
 *
 * Twee tekeningen die allebei hetzelfde doen: het argument van deze app tonen
 * in plaats van het te beweren.
 *
 * De eerste is de zuurcurve. Die staat op geen enkele pagina over fermenteren
 * en hij hoort er op allemaal te staan, want hij beantwoordt in één beeld de
 * vraag die iedereen als eerste stelt: is dit veilig? Het antwoord is niet
 * "ja hoor" maar "na drie dagen zit je onder de grens waar de gevaarlijke
 * dingen het opgeven, en dat is meetbaar".
 *
 * De tweede zijn de twee potten. Dezelfde kool, dezelfde dag, twee plekken in
 * huis — en je ziet ze op verschillende snelheid vollopen. Dat is precies wat
 * een kalenderteller niet kan tonen.
 */

/* ---------------------------------------------------------- de zuurcurve */

.zuurcurve {
  width: 100%;
  height: auto;
  display: block;
  margin: 0.5rem 0 0;
  overflow: visible;
}

/* Het venster waarin het nog niet veilig is. Niet rood: er is niets mis, het
   is gewoon nog niet zover. Een waarschuwingskleur zou hier bangmaken voor
   iets wat elke fermentatie de eerste dagen doet. */
.zc-onveilig { fill: var(--ink-dof); opacity: 0.13; }

.zc-raster { stroke: var(--lijn); stroke-width: 1; }
.zc-as { fill: var(--ink-zacht); font-size: 12px; font-family: inherit; }

.zc-grens {
  stroke: var(--goud);
  stroke-width: 1.5;
  stroke-dasharray: 5 4;
  opacity: 0.75;
}
.zc-grenstekst { fill: var(--goud); font-size: 12px; font-weight: 600; font-family: inherit; }

.zc-lijn {
  fill: none;
  stroke: var(--goud);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* De lijn tekent zichzelf zodra hij in beeld komt: dat is precies wat de curve
   beschrijft — een verloop in de tijd — en het is de enige plek op de pagina
   waar een animatie iets uitlegt in plaats van iets versiert. Wie beweging
   heeft uitgezet, krijgt de volledige lijn meteen. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .zc-lijn, .zc-vlak, .zc-punt, .zc-punttekst {
      animation: curveIn linear both;
      animation-timeline: view(block);
      animation-range: entry 12% cover 34%;
    }
    .zc-lijn {
      stroke-dasharray: 1400;
      animation-name: curveTeken;
    }
  }
}
@keyframes curveTeken { from { stroke-dashoffset: 1400; } to { stroke-dashoffset: 0; } }
@keyframes curveIn { from { opacity: 0; } to { opacity: 1; } }

.zc-punt { fill: var(--goud); stroke: var(--paneel); stroke-width: 2.5; }
.zc-punttekst { fill: var(--ink); font-size: 12.5px; font-weight: 700; font-family: inherit; }

/* De drie fasen als streepjes onder de as. Elk zijn eigen kleur uit het
   spectrum, zodat ze bij elkaar horen zonder een legenda nodig te hebben. */
.zc-fase { stroke-width: 5; stroke-linecap: round; }
.zc-fase.f0 { stroke: #6d8f4e; }
.zc-fase.f1 { stroke: var(--goud); }
.zc-fase.f2 { stroke: #b4482a; }

.curvefasen {
  display: grid;
  gap: 0.6rem;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  margin-top: 1.4rem;
}
.curvefase {
  border-left: 3px solid var(--kleur, var(--goud));
  padding: 0.1rem 0 0.1rem 0.8rem;
}
.curvefase b { display: block; font-size: 0.95rem; font-style: italic; }
.curvefase span { color: var(--ink-zacht); font-size: 0.88rem; line-height: 1.5; display: block; }
.curvefase i { color: var(--ink-zacht); font-size: 0.8rem; font-style: normal; letter-spacing: .04em; text-transform: uppercase; }

/* ------------------------------------------------------------ twee potten */

.tweepotten {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.2rem, 4vw, 2.5rem);
  align-items: end;
  max-width: 34rem;
  margin: 1.5rem 0 0;
}

.pot-vak { display: grid; gap: 0.7rem; justify-items: center; }

.pot-etiket { text-align: center; }
.pot-etiket b { display: block; font-size: 0.98rem; }
.pot-etiket span { color: var(--ink-zacht); font-size: 0.86rem; }

/*
 * De pot zelf: getekend met randen en een verloop, niet als afbeelding. Zo
 * schaalt hij mee, klopt hij vanzelf in donkere modus, en weegt hij niets.
 * De schouder komt uit een border-radius die bovenaan sterker is dan onderaan
 * — dat is het verschil tussen een pot en een reageerbuis.
 */
.pot {
  position: relative;
  width: min(100%, 8.5rem);
  aspect-ratio: 3 / 4.4;
  border: 2px solid var(--lijn);
  border-radius: 34% 34% 14% 14% / 18% 18% 9% 9%;
  background: linear-gradient(160deg, rgba(247,240,228,.05), rgba(0,0,0,.22));
  overflow: hidden;
}

/* de hals */
.pot::before {
  content: "";
  position: absolute;
  left: 50%; top: -9px;
  transform: translateX(-50%);
  width: 46%; height: 12px;
  border: 2px solid var(--lijn);
  border-bottom: 0;
  border-radius: 6px 6px 0 0;
  background: var(--bg-op);
}

.pot-vulling {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  background: linear-gradient(0deg, var(--goud), #e6b95a);
  opacity: 0.85;
  height: 0;
}

/* Het streepje op de hoogte waar deze pot klaar is. */
.pot-lijn {
  position: absolute;
  left: -4px; right: -4px;
  bottom: var(--op);
  height: 2px;
  background: var(--goud);
}
.pot-lijn::after {
  content: "klaar";
  position: absolute;
  right: 0; bottom: 4px;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--goud);
  letter-spacing: .04em;
}

/*
 * De twee potten lopen vol in dezelfde tijd op het scherm, maar niet even ver:
 * de warme is na de helft van de animatie al vol en blijft dan staan, de koele
 * doet er de volle rit over. Dat is precies de verhouding 14 tegen 40 dagen.
 *
 * Beide animaties duren even lang en herhalen samen, zodat je ze naast elkaar
 * kunt vergelijken zonder dat ze uit de pas gaan lopen.
 */
@media (prefers-reduced-motion: no-preference) {
  .pot-warm .pot-vulling { animation: vulWarm 9s cubic-bezier(.4,0,.5,1) infinite; }
  .pot-koel .pot-vulling { animation: vulKoel 9s cubic-bezier(.4,0,.5,1) infinite; }
}
/* Zonder beweging: allebei op hun eindstand, dan is het verschil nog steeds te
   zien — het is dan een grafiek in plaats van een animatie. */
.pot-warm .pot-vulling { height: 100%; }
.pot-koel .pot-vulling { height: 35%; }

@keyframes vulWarm {
  0%   { height: 0; }
  35%  { height: 100%; }
  88%  { height: 100%; }
  100% { height: 0; }
}
@keyframes vulKoel {
  0%   { height: 0; }
  88%  { height: 100%; }
  100% { height: 0; }
}

.pot-uitkomst { text-align: center; font-size: 0.9rem; color: var(--ink-zacht); }
.pot-uitkomst strong {
  display: block;
  font: 600 1.9rem/1 'Fraunces', Georgia, serif;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.pot-bij {
  grid-column: 1 / -1;
  margin: 0.6rem 0 0;
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--ink-zacht);
}

@media (max-width: 30rem) {
  .pot { width: min(100%, 6.5rem); }
  .pot-uitkomst strong { font-size: 1.55rem; }
}

/* ============================================================== rekenblok */

/*
 * Het stuk waar de bezoeker zijn eigen keuken invult. Dat is meer waard dan
 * elk cijfer dat wij op de pagina zetten: het is zijn getal, en het is meteen
 * een demonstratie van wat de app doet.
 */
.rekenblok {
  background: var(--paneel);
  border: 1px solid var(--lijn);
  border-radius: var(--r-groot);
  padding: clamp(1.4rem, 4vw, 2.2rem);
  display: grid; gap: 1.6rem;
}
.velden { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }
.velden label {
  display: grid; gap: .5rem;
  font-size: .88rem; font-weight: 600; color: var(--ink-zacht); letter-spacing: .01em;
}
.velden input {
  font: 600 1.5rem/1 'Manrope', system-ui; font-variant-numeric: tabular-nums;
  background: var(--bg); color: var(--ink);
  border: 1px solid var(--lijn-op); border-radius: 11px;
  padding: .8rem .9rem; width: 100%;
  -moz-appearance: textfield;
}
.velden input::-webkit-outer-spin-button,
.velden input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.velden input:focus-visible { outline: 2px solid var(--goud); outline-offset: 1px; border-color: transparent; }

.uitslag { border-top: 1px solid var(--lijn); padding-top: 1.4rem; }
.uitslag .groot {
  margin: 0 0 .3rem;
  font-family: 'Fraunces', Georgia, serif; font-weight: 600;
  font-size: clamp(2.4rem, 6.5vw, 3.6rem); line-height: 1;
  color: var(--goud); font-variant-numeric: tabular-nums;
  letter-spacing: -.025em;
}
.uitslag p:last-child { margin: 0; color: var(--ink-zacht); font-size: 1rem; line-height: 1.55; max-width: 44ch; }

/* De knop met een winkel-pictogram krijgt twee regels tekst. */
.knop span { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.15; }
.knop span small { font-size: .74rem; font-weight: 600; opacity: .72; }

/* Alle beweging uit. Wordt gezet met ?stil in de URL, voor het maken van
   schermafbeeldingen — een pagina met doorlopende scroll-animaties laat zich
   niet betrouwbaar vastleggen. */
.stil *, .stil *::before, .stil *::after {
  animation: none !important;
  transition: none !important;
  scroll-behavior: auto !important;
}
.stil .nav { background: rgba(13,10,7,.94); border-bottom-color: var(--lijn); }
.stil .vast { translate: 0 0; }
.stil .zc-lijn { stroke-dasharray: none; }
.stil .zc-vlak, .stil .zc-punt, .stil .zc-punttekst { opacity: 1; }

/* ==================================================== waar de app ophoudt

   Deze sectie zegt wat Fermento niet kan. Ze staat daarom niet weggemoffeld
   onderaan maar op ware grootte tussen de prijs en de vragen, met dezelfde
   maten als de rest — een blok dat eruitziet als kleine lettertjes, wordt ook
   als kleine lettertjes gelezen, en dan doet het zijn werk niet.

   Wel iets rustiger van kleur dan de secties eromheen: geen gouden koppen,
   geen beeld, geen beweging. Het is het moment waarop de pagina even ophoudt
   met verkopen. */

.grens { background: var(--bg-op); }
.grens .kop-groep { max-width: 28ch; }
.grens h2 { line-height: 1.06; }

.grens-rij {
  display: grid; gap: 1px; background: var(--lijn);
  border: 1px solid var(--lijn); border-radius: var(--r-groot); overflow: hidden;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}
.grens-kaart { background: var(--paneel); padding: clamp(1.5rem, 3vw, 2.2rem); }
.grens-kaart h3 {
  font-family: var(--display, inherit); font-size: clamp(1.15rem, 2vw, 1.45rem);
  margin-bottom: .7rem; color: var(--ink);
}
.grens-kaart p { color: var(--ink-zacht); font-size: .97rem; line-height: 1.65; }

/* De zin die de aansprakelijkheid legt. Een streep ervoor in plaats van een
   kader eromheen: een kader maakt er een waarschuwing van, en dat is precies
   de toon die we niet willen. */
.grens-slot {
  margin-top: clamp(1.6rem, 3vw, 2.4rem);
  padding-left: clamp(1rem, 2vw, 1.5rem);
  border-left: 3px solid var(--goud-diep);
  max-width: 58ch; color: var(--ink-zacht);
  font-size: 1rem; line-height: 1.7;
}

/* De aansprakelijkheidsregel in de voet. Klein maar leesbaar: dit is de plek
   waar iemand hem zoekt, en tekst die je moet vergroten om te lezen is tekst
   die je verstopt. */
.voet-grens {
  margin-top: 1.4rem; padding-top: 1.4rem; border-top: 1px solid var(--lijn);
  color: var(--ink-dof); font-size: .85rem; line-height: 1.65; max-width: 62ch;
}