/* De items zijn in de frontmatter opgebouwd — genest onder de gescopete nav. */
.breadcrumbs[data-wald-34326152]{
  margin-bottom: var(--byz-space-6);
  font-size: var(--byz-text-sm);

  & ol {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--byz-space-1) var(--byz-space-2);
    margin: 0;
    padding: 0;
    list-style: none;
  }
  & li {
    display: flex;
    align-items: center;
    gap: var(--byz-space-2);
    min-width: 0;
  }
  & li + li::before {
    content: "›";
    color: var(--byz-color-text-muted);
  }
  & a {
    color: var(--byz-color-text-secondary);
    text-decoration: none;
  }
  & a:hover {
    color: var(--byz-color-text-primary);
    text-decoration: underline;
  }
  & [aria-current] {
    overflow: hidden;
    color: var(--byz-color-text-muted);
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}


.cms-cookie-banner[data-wald-f599a241]{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--byz-space-4) var(--byz-space-6);
  /* Boven de adresbalk/thuisbalk van iOS blijven (viewport-fit=cover in Layout.wald). */
  padding: var(--byz-space-5) var(--steva-pagina-marge) calc(var(--byz-space-5) + env(safe-area-inset-bottom));
  background: var(--steva-bordeaux-donker);
  box-shadow: 0 -8px 30px rgb(0 0 0 / 0.35), inset 0 1px 0 var(--byz-color-border);
  color: var(--byz-color-text-primary);
  z-index: var(--byz-z-overlay);
}
.cms-cookie-banner[hidden][data-wald-f599a241]{
  display: none;
}
.cms-cookie-banner__text[data-wald-f599a241]{
  flex: 1 1 22rem;
  margin: 0;
  max-width: 60ch;
}
.cms-cookie-banner__actions[data-wald-f599a241], .cms-cookie-dialog__actions[data-wald-f599a241]{
  display: flex;
  flex-wrap: wrap;
  gap: var(--byz-space-3);
}
/* Alle knoppen even groot en even goed te vinden: weigeren mag niet moeilijker zijn dan
   accepteren. */
.cms-cookie-banner__primary[data-wald-f599a241], .cms-cookie-banner__secondary[data-wald-f599a241]{
  flex: 1 1 auto;
  min-height: 2.75rem;
  padding: var(--byz-space-2) var(--byz-space-5);
  border: 0;
  border-radius: 0.5rem;
  font: inherit;
  font-weight: var(--byz-font-semibold);
  cursor: pointer;
}
.cms-cookie-banner__primary[data-wald-f599a241]{
  background: var(--byz-color-accent);
  box-shadow: inset 0 -4px 0 var(--steva-oranje-donker);
  color: var(--steva-bordeaux-donker);
}
.cms-cookie-banner__primary[data-wald-f599a241]:hover{
  background: var(--steva-oranje-donker);
}
.cms-cookie-banner__secondary[data-wald-f599a241]{
  background: rgb(255 255 255 / 0.06);
  box-shadow: inset 0 0 0 1px var(--byz-color-border);
  color: var(--byz-color-text-primary);
}
.cms-cookie-banner__secondary[data-wald-f599a241]:hover{
  box-shadow: inset 0 0 0 1px var(--byz-color-accent);
}

/* Voorkeurenvenster */
/* margin: auto centreert het venster; de reset van Byzantium (* { margin: 0 }) haalt dat weg. */
.cms-cookie-dialog[data-wald-f599a241]{
  margin: auto;
  width: min(calc(100% - 2rem), 30rem);
  max-height: calc(100dvh - 2rem);
  padding: 0;
  border: 0;
  border-radius: 1rem;
  background: var(--steva-bordeaux-donker);
  box-shadow: 0 20px 60px rgb(0 0 0 / 0.5), inset 0 0 0 1px var(--byz-color-border);
  color: var(--byz-color-text-primary);
}
.cms-cookie-dialog[data-wald-f599a241]::backdrop{
  background: rgb(20 3 0 / 0.6);
}
.cms-cookie-dialog__form[data-wald-f599a241]{
  display: grid;
  gap: var(--byz-space-5);
  padding: var(--byz-space-8) var(--byz-space-6) var(--byz-space-6);
}
.cms-cookie-dialog__title[data-wald-f599a241]{
  margin: 0;
  font-size: var(--byz-text-xl);
  font-weight: var(--byz-font-semibold);
  text-transform: uppercase;
}
.cms-cookie-dialog__intro[data-wald-f599a241]{
  margin: 0;
  color: var(--byz-color-text-secondary);
  font-size: var(--byz-text-sm);
}
.cms-cookie-dialog__option[data-wald-f599a241]{
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--byz-space-3);
  padding: var(--byz-space-4);
  border-radius: 0.75rem;
  background: rgb(255 255 255 / 0.04);
  box-shadow: inset 0 0 0 1px var(--byz-color-border);
  cursor: pointer;
}
.cms-cookie-dialog__option input[data-wald-f599a241]{
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0.15rem;
  accent-color: var(--byz-color-accent);
  cursor: pointer;
}
.cms-cookie-dialog__option input[data-wald-f599a241]:disabled{
  cursor: not-allowed;
}
.cms-cookie-dialog__option strong[data-wald-f599a241]{
  display: block;
  margin-bottom: var(--byz-space-1);
}
.cms-cookie-dialog__option small[data-wald-f599a241]{
  display: block;
  color: var(--byz-color-text-muted);
  font-size: var(--byz-text-sm);
  line-height: 1.45;
}


/* De band staat schuin en zou daardoor buiten het scherm uitsteken: horizontaal afknippen. */
.marquee-clip[data-wald-0d1c5256]{
  position: relative;
  overflow-x: clip;
  margin: var(--byz-space-16) 0 var(--byz-space-20);
  padding: var(--byz-space-4) 0;
}
/* De lijsten zijn in de frontmatter opgebouwd — genest onder de gescopete nav. */
.marquee[data-wald-0d1c5256]{
  position: relative;
  overflow: hidden;
  padding: var(--byz-space-4) 0;
  /* Linnen lint: geweven textuur met gestikte randen boven en onder. */
  background:
    repeating-linear-gradient(90deg, rgb(255 255 255 / 0.025) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(0deg, rgb(0 0 0 / 0.06) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, var(--steva-bordeaux-licht), var(--steva-bordeaux-rand));
  box-shadow: 0 6px 16px rgb(0 0 0 / 0.3), inset 0 1px 0 rgb(255 255 255 / 0.08);
  transform: rotate(-1.2deg);
  /* Zachte randen links en rechts. */
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);

  &::before,
  &::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    border-top: 1.5px dashed rgb(255 196 113 / 0.55);
  }
  &::before {
    top: 6px;
  }
  &::after {
    bottom: 6px;
  }
  & .marquee__track {
    display: flex;
    width: max-content;
  }
  & .marquee__list {
    display: flex;
    flex-shrink: 0;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  & li {
    display: flex;
    align-items: center;
  }
  /* Ruitje tussen de namen. */
  & li::after {
    content: "✦";
    margin: 0 var(--byz-space-6);
    color: var(--byz-color-accent);
    font-size: var(--byz-text-sm);
  }
  & a {
    color: var(--steva-goud);
    font-family: var(--steva-font-script);
    font-size: var(--byz-text-2xl);
    line-height: 1.2;
    text-decoration: none;
    text-shadow: var(--steva-tekst-schaduw);
    white-space: nowrap;
  }
  & a:hover,
  & a:focus-visible {
    color: var(--steva-creme);
  }
}
.marquee__toggle[data-wald-0d1c5256]{
  position: absolute;
  right: var(--steva-pagina-marge);
  bottom: calc(-1 * var(--byz-space-6));
  padding: var(--byz-space-1) var(--byz-space-3);
  border: 0;
  border-radius: 999px;
  background: rgb(67 11 0 / 0.7);
  box-shadow: inset 0 0 0 1px var(--byz-color-border);
  color: var(--byz-color-text-muted);
  font: inherit;
  font-size: var(--byz-text-xs);
  cursor: pointer;
}
.marquee__toggle[hidden][data-wald-0d1c5256]{
  display: none;
}
.marquee__toggle[data-wald-0d1c5256]:hover{
  color: var(--byz-color-text-primary);
}
.marquee-clip.is-paused .marquee__track[data-wald-0d1c5256]{
  animation-play-state: paused !important;
}
@media (prefers-reduced-motion: no-preference) {
  .marquee[data-wald-0d1c5256]{
    & .marquee__track {
      animation: marquee-scroll 60s linear infinite;
    }
    /* Stil bij hover en zodra je er met het toetsenbord in zit. */
    &:hover .marquee__track,
    &:focus-within .marquee__track {
      animation-play-state: paused;
    }
  }
}
/* Bij minder beweging: geen lopende band maar horizontaal scrollen, zonder de kopie. */
@media (prefers-reduced-motion: reduce) {
  .marquee[data-wald-0d1c5256]{
    overflow-x: auto;

    & .marquee__list[aria-hidden] {
      display: none;
    }
  }
}
@keyframes marquee-scroll {
  to { transform: translateX(-50%); }
}


/* Afbeelding, feiten en keukenlink zijn in de frontmatter opgebouwd — genest onder de gescopete article. */
.featured[data-wald-e3fc2849]{
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  border-radius: 0.875rem;
  background: rgb(67 11 0 / 0.55);
  box-shadow: 8px 8px 24px rgb(0 0 0 / 0.3), inset 0 0 0 1px var(--byz-color-border);

  & .featured__image {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 16rem;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    transition: transform var(--byz-duration-slow) var(--byz-ease-out);
  }
  &:hover .featured__image {
    transform: scale(1.03);
  }
  & .featured__image--placeholder {
    display: grid;
    place-items: center;
    background: url("/images/hero-textuur.webp") center / cover, var(--byz-color-surface);
    background-blend-mode: multiply, normal;
  }
  & .featured__image--placeholder img {
    width: 45%;
    opacity: 0.85;
  }
  & .featured__facts {
    display: flex;
    flex-wrap: wrap;
    gap: var(--byz-space-6);
    margin: 0 0 var(--byz-space-8);
  }
  & .featured__facts dt {
    color: var(--byz-color-text-secondary);
    font-size: var(--byz-text-xs);
    font-weight: var(--byz-font-semibold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
  & .featured__facts dd {
    margin: 0;
    font-size: var(--byz-text-lg);
    font-weight: var(--byz-font-semibold);
  }
  & .featured__cuisine {
    color: var(--byz-color-text-secondary);
    font-weight: var(--byz-font-semibold);
    text-transform: uppercase;
    text-decoration: none;
  }
  & .featured__cuisine:hover {
    color: var(--byz-color-text-primary);
  }
}
.featured__media[data-wald-e3fc2849]{
  display: block;
  overflow: hidden;
  border-radius: 0.875rem 0.875rem 0 0;
}
.featured__body[data-wald-e3fc2849]{
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--byz-space-8) var(--byz-space-6) var(--byz-space-10);
}
.featured__kicker[data-wald-e3fc2849]{
  margin: 0;
  color: var(--byz-color-accent);
  font-family: var(--steva-font-script);
  font-size: var(--byz-text-xl);
  text-shadow: var(--steva-tekst-schaduw);
}
.featured__title[data-wald-e3fc2849]{
  overflow-wrap: break-word;
  hyphens: auto;
  margin: var(--byz-space-1) 0 var(--byz-space-4);
  font-size: var(--byz-text-3xl);
  font-weight: var(--byz-font-semibold);
  line-height: 1.15;
  letter-spacing: 0;
  text-transform: uppercase;
  text-shadow: var(--steva-tekst-schaduw);
}
.featured__title a[data-wald-e3fc2849]{
  color: var(--byz-color-text-primary);
  text-decoration: none;
}
.featured__intro[data-wald-e3fc2849]{
  margin: 0 0 var(--byz-space-5);
  color: var(--byz-color-text-muted);
  line-height: var(--byz-leading-relaxed);
}
.featured__actions[data-wald-e3fc2849]{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--byz-space-4) var(--byz-space-6);
}
.featured__button[data-wald-e3fc2849]{
  padding: var(--byz-space-3) var(--byz-space-6);
  border-radius: 0.5rem;
  background: var(--byz-color-accent);
  box-shadow: inset 0 -4px 0 var(--steva-oranje-donker), 0 2px 8px var(--steva-bordeaux-rand);
  color: var(--steva-bordeaux-donker);
  font-weight: var(--byz-font-semibold);
  text-transform: uppercase;
  text-decoration: none;
  text-shadow: 0 1px 0 rgb(255 255 255 / 0.3);
}
.featured__button[data-wald-e3fc2849]:hover{
  background: var(--steva-oranje-donker);
}
/* Indrukken: de knop zakt in zijn "rand". */
.featured__button[data-wald-e3fc2849]:active{
  box-shadow: inset 0 -1px 0 var(--steva-oranje-donker), inset 0 2px 4px rgb(67 11 0 / 0.35);
  transform: translateY(3px);
}
@media (min-width: 1024px) {
  /* Het hele blok moet in één keer in beeld passen (venster min. header): de foto vult de
     rij in plaats van een vaste 4:3-verhouding, die op 7 kolommen te hoog wordt. */
  .featured[data-wald-e3fc2849]{
    grid-template-columns: repeat(12, minmax(0, 1fr));
    height: min(34rem, calc(100vh - 10rem));
    min-height: 28rem;

    & .featured__image {
      min-height: 0;
      aspect-ratio: auto;
    }
  }
  .featured__media[data-wald-e3fc2849]{
    grid-column: span 7;
    border-radius: 0.875rem 0 0 0.875rem;
  }
  .featured__body[data-wald-e3fc2849]{
    grid-column: span 5;
    padding: var(--byz-space-8) var(--byz-space-10);
  }
  .featured__title[data-wald-e3fc2849]{
    /* Genoeg ruimte: niet afbreken ("West-Afrikaan-se"). */
    hyphens: manual;
    font-size: var(--byz-text-3xl);
  }
}


.home-hero[data-wald-1c9f6672]{
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
  /* Figma: hero loopt tot 640px vanaf de bovenkant, de header (6rem) meegerekend. */
  min-height: 34rem;
  padding: 7.5rem var(--steva-pagina-marge) 0;
  text-align: center;
  perspective: 800px;
}
.home-hero__title[data-wald-1c9f6672]{
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0;
  font-size: clamp(var(--byz-text-2xl), 4.5vw, var(--byz-text-4xl));
  letter-spacing: 0;
  font-weight: var(--byz-font-semibold);
  line-height: 1.15;
  text-transform: uppercase;
  text-shadow: var(--steva-tekst-schaduw);
  perspective: 600px;
}
/* Wisselend woord in schrijfletter onder de titel (zie het script hierboven). */
.home-hero__word[data-wald-1c9f6672]{
  display: inline-block;
  margin-top: var(--byz-space-1);
  color: var(--byz-color-accent);
  font-family: var(--steva-font-script);
  font-size: 1.6em;
  font-weight: 400;
  line-height: 1.1;
  text-transform: none;
}
.home-hero__tagline[data-wald-1c9f6672]{
  margin: var(--byz-space-3) 0 0;
  color: var(--byz-color-text-muted);
  font-size: var(--byz-text-lg);
  text-shadow: var(--steva-tekst-schaduw);
}
.home-hero__search[data-wald-1c9f6672]{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--byz-space-4);
  width: 100%;
  margin-top: var(--byz-space-8);
}
.home-hero__pantry[data-wald-1c9f6672]{
  color: var(--byz-color-text-secondary);
  font-weight: var(--byz-font-semibold);
  text-shadow: var(--steva-tekst-schaduw);
  text-underline-offset: 0.2em;
}
.home-hero__pantry[data-wald-1c9f6672]:hover{
  color: var(--byz-color-text-primary);
}
@media (prefers-reduced-motion: no-preference) {
  /* Entree met CSS (niet met JavaScript): de titel is het grootste element bij het laden en
     mag dus niet op een script wachten. */
  .home-hero__line[data-wald-1c9f6672], .home-hero__tagline[data-wald-1c9f6672], .home-hero__search[data-wald-1c9f6672]{
    animation: home-hero-rise 900ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
  }
  .home-hero__line[data-wald-1c9f6672]{
    transform-origin: 50% 100%;
  }
  .home-hero__word[data-wald-1c9f6672]{
    animation-delay: 120ms;
  }
  .home-hero__tagline[data-wald-1c9f6672]{
    animation-delay: 300ms;
  }
  .home-hero__search[data-wald-1c9f6672]{
    animation-delay: 420ms;
  }
}
@keyframes home-hero-rise {
  /* Geen opacity: tekst die vanaf 0 infadet telt pas mee als LCP wanneer hij zichtbaar is. */
  from { transform: translateY(1.5rem) rotateX(-35deg); }
}
@media (max-width: 640px) {
  .home-hero[data-wald-1c9f6672]{
    min-height: 0;
    padding: var(--byz-space-20) var(--steva-pagina-marge) var(--byz-space-20);
  }
}


.cms-maintenance[data-wald-a66991f1]{
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: var(--byz-space-2);
  padding: var(--byz-space-8);
}


/* Zelfde kop als de receptpagina (indeling "Kookboek"): gecentreerd, script-kicker, titel in kapitalen. */
.page-header[data-wald-58b2e1f2]{
  max-width: 50rem;
  margin: 0 auto var(--byz-space-12);
  text-align: center;

  & .page-header__lead {
    max-width: 62ch;
    margin: 0 auto;
    color: var(--byz-color-text-muted);
    font-size: var(--byz-text-lg);
    line-height: var(--byz-leading-relaxed);
  }
}
.page-header__kicker[data-wald-58b2e1f2]{
  color: var(--byz-color-accent);
  font-family: var(--steva-font-script);
  font-size: var(--byz-text-xl);
  text-shadow: var(--steva-tekst-schaduw);
}
.page-header__title[data-wald-58b2e1f2]{
  /* Lange Nederlandse samenstellingen ("boerenkoolstamppot") passen anders niet op een telefoon. */
  overflow-wrap: break-word;
  hyphens: auto;
  margin: var(--byz-space-1) 0 var(--byz-space-6);
  font-size: var(--byz-text-4xl);
  font-weight: var(--byz-font-semibold);
  line-height: 1.15;
  letter-spacing: 0;
  text-transform: uppercase;
  text-shadow: var(--steva-tekst-schaduw);
}


/* De afbeelding en de titel (h2 of h3) worden als string in de frontmatter opgebouwd — die
   krijgen geen scope-attribuut. Daarom genest onder de gescopete kaart: de scoper
   voorziet alleen de buitenste selector van het attribuut. */
.recipe-card[data-wald-50b16508]{
  position: relative;
  display: flex;
  align-items: flex-end;
  aspect-ratio: 431 / 574;
  overflow: hidden;
  border-radius: 0.625rem;
  background: var(--byz-color-surface);
  box-shadow: 8px 8px 16px rgb(0 0 0 / 0.25);
  text-decoration: none;
  transition: transform var(--byz-duration-normal) var(--byz-ease-default);

  & .recipe-card__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--byz-duration-slow) var(--byz-ease-out);
  }
  & .recipe-card__image--placeholder {
    display: grid;
    place-items: center;
    padding-bottom: 30%;
    background: url("/images/hero-textuur.webp") center / cover, var(--byz-color-surface);
    background-blend-mode: multiply, normal;
  }
  & .recipe-card__image--placeholder img {
    width: 55%;
    opacity: 0.85;
  }
  & .recipe-card__title {
    /* Lange Nederlandse samenstellingen ("boerenkoolstamppot") passen anders niet op een telefoon. */
    overflow-wrap: break-word;
    hyphens: auto;
    margin: 0;
    color: var(--byz-color-text-primary);
    font-size: var(--byz-text-2xl);
    letter-spacing: 0;
    font-weight: var(--byz-font-semibold);
    line-height: 1.23;
    text-transform: uppercase;
    text-shadow: var(--steva-tekst-schaduw);
    word-break: break-word;
    text-wrap: balance;
  }
  & .recipe-card__meta {
    margin: var(--byz-space-2) 0 0;
    color: var(--byz-color-text-secondary);
    font-size: var(--byz-text-sm);
    font-weight: var(--byz-font-semibold);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-shadow: var(--steva-tekst-schaduw);
  }
}
.recipe-card__text[data-wald-50b16508]{
  position: relative;
  z-index: 1;
  width: 100%;
  padding: 0 var(--byz-space-8) var(--byz-space-8);
}
/* Figma: "Schaduw" — donkere verloop onderin zodat de titel leesbaar blijft. */
.recipe-card[data-wald-50b16508]::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgb(67 11 0 / 0.8), rgb(67 11 0 / 0) 40%);
}
.recipe-card[data-wald-50b16508]:hover{
  transform: translateY(-4px);

  & .recipe-card__image {
    transform: scale(1.03);
  }
}

/* Figma: 40px tussen de kaarten; de gap-schaal van Byzantium stopt bij xl (2rem). */
@media (min-width: 1024px) {
  .recipe-grid[data-wald-3f7a5031]{
    gap: var(--byz-space-10);
  }
}


.recipe-submission[data-wald-2cf1cb73]{
  max-width: 52rem;
  margin: 0 auto;
  padding: clamp(var(--byz-space-5), 4vw, var(--byz-space-10));
  border: 1px solid var(--steva-bordeaux-rand);
  border-radius: 1rem;
  background: var(--steva-bordeaux-donker);
  line-height: 1.6;

  & [hidden] { display: none; }
  & .recipe-submission__honeypot {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    pointer-events: none;
  }
  & fieldset {
    min-width: 0;
    margin: 0 0 var(--byz-space-8);
    padding: 0;
    border: 0;
  }
  & legend {
    margin-bottom: var(--byz-space-4);
    color: var(--byz-color-text-secondary);
    font-size: var(--byz-text-xl);
    font-weight: var(--byz-font-semibold);
  }
  & label { display: block; margin-bottom: var(--byz-space-4); }
  & input:not([type="checkbox"]), & textarea, & select {
    display: block;
    width: 100%;
    margin-top: var(--byz-space-2);
    padding: var(--byz-space-3);
    border: 1px solid var(--steva-goud);
    border-radius: 0.375rem;
    background: var(--steva-creme);
    color: var(--steva-bordeaux-donker);
    font: inherit;
  }
  & textarea { resize: vertical; }
  & input::placeholder, & textarea::placeholder { color: #765d53; }
  & button {
    padding: var(--byz-space-3) var(--byz-space-5);
    border-radius: 0.5rem;
    font: inherit;
    font-weight: var(--byz-font-semibold);
    cursor: pointer;
  }
  & button:disabled { opacity: 0.6; cursor: wait; }
  & .recipe-submission__columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--byz-space-4); }
  & .recipe-submission__columns--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  & .recipe-submission__row {
    margin-bottom: var(--byz-space-4);
    padding: var(--byz-space-4);
    border: 1px solid var(--steva-bordeaux-rand);
    border-radius: 0.5rem;
  }
  & .recipe-submission__row-title { margin: 0 0 var(--byz-space-3); font-weight: var(--byz-font-semibold); }
  & .recipe-submission__secondary { border: 1px solid var(--steva-goud); background: transparent; color: var(--steva-goud); }
  & .recipe-submission__remove { padding: var(--byz-space-1) 0; border: 0; background: transparent; color: var(--steva-goud); text-decoration: underline; }
  & .recipe-submission__hint { margin: 0 0 var(--byz-space-4); color: var(--byz-color-text-muted); font-size: var(--byz-text-sm); }
  & .recipe-submission__consent { display: flex; align-items: flex-start; gap: var(--byz-space-3); }
  & input[type="checkbox"] { flex-shrink: 0; width: 1.25rem; height: 1.25rem; margin-top: 0.25rem; accent-color: var(--steva-oranje); }
  & .recipe-submission__submit { margin-bottom: var(--byz-space-4); border: 0; background: var(--steva-oranje); color: var(--steva-bordeaux-donker); box-shadow: inset 0 -3px 0 var(--steva-oranje-donker); }
  & .recipe-submission__error { padding: var(--byz-space-4); border: 1px solid var(--steva-goud); border-radius: 0.5rem; }
  & .recipe-submission__success h2 { color: var(--steva-goud); font-size: var(--byz-text-2xl); }
  & .recipe-submission__success a { color: var(--steva-goud); }
}
@media (max-width: 640px) {
  .recipe-submission[data-wald-2cf1cb73]{
    & .recipe-submission__columns, & .recipe-submission__columns--three { grid-template-columns: 1fr; gap: 0; }
  }
}


.recipe-invite[data-wald-92df2df7]{
  max-width: var(--steva-pagina-breedte);
  margin: var(--byz-space-24) auto 0;
  padding: 0 var(--steva-pagina-marge);
}
.recipe-invite__panel[data-wald-92df2df7]{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(14rem, 19rem);
  align-items: center;
  gap: var(--byz-space-10);
  padding: clamp(var(--byz-space-6), 5vw, var(--byz-space-12));
  border-radius: 1rem;
  background: var(--steva-creme);
  box-shadow: 0 8px 24px rgb(67 11 0 / 0.2);
  color: var(--steva-bordeaux-donker);
}
.recipe-invite__kicker[data-wald-92df2df7]{
  margin: 0 0 var(--byz-space-2);
  color: var(--steva-bordeaux-licht);
  font-family: var(--steva-font-script);
  font-size: var(--byz-text-2xl);
}
.recipe-invite__copy h2[data-wald-92df2df7]{
  margin: 0 0 var(--byz-space-4);
  font-size: clamp(var(--byz-text-xl), 3vw, var(--byz-text-3xl));
  font-weight: var(--byz-font-semibold);
  line-height: 1.2;
  text-transform: uppercase;
  overflow-wrap: break-word;
}
.recipe-invite__copy > p[data-wald-92df2df7]:last-child{
  max-width: 58ch;
  margin: 0;
  line-height: var(--byz-leading-relaxed);
}
.recipe-invite__action a[data-wald-92df2df7]{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--byz-space-3);
  width: 100%;
  padding: var(--byz-space-4) var(--byz-space-5);
  border-radius: 0.5rem;
  background: var(--steva-oranje);
  box-shadow: inset 0 -4px 0 var(--steva-oranje-donker);
  color: var(--steva-bordeaux-donker);
  font-weight: var(--byz-font-semibold);
  text-decoration: none;
  text-transform: uppercase;
}
.recipe-invite__action a[data-wald-92df2df7]:hover{
  filter: brightness(1.06);
}
.recipe-invite__action p[data-wald-92df2df7]{
  margin: var(--byz-space-3) 0 0;
  font-size: var(--byz-text-sm);
  line-height: var(--byz-leading-relaxed);
  text-align: center;
}
@media (max-width: 760px) {
  .recipe-invite__panel[data-wald-92df2df7]{
    grid-template-columns: 1fr;
    gap: var(--byz-space-6);
  }
  .recipe-invite__action[data-wald-92df2df7]{
    max-width: 22rem;
  }
}


/* Richtext (ul/ol/p uit Centaur) en conditionele onderdelen hebben geen scope-attribuut,
   dus die worden genest onder gescopete containers gestyled (zie RecipeCard.wald). */
.recipe[data-wald-ae26ab1c]{
  max-width: var(--steva-pagina-breedte);
  margin: 0 auto;
  padding: var(--byz-space-12) var(--steva-pagina-marge) var(--byz-space-24);
}

/* Indeling "Kookboek" (voorstel C): eerst titel, intro en kerngegevens gecentreerd, dan een
   brede foto, dan ingrediënten en bereiding — op desktop allemaal binnen kolom 2–11 van
   het 12-kolomsgrid (zie @media onderaan). Mobiel en tablet: alles onder elkaar. */
.recipe__hero[data-wald-ae26ab1c]{
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--byz-space-8);
  margin-bottom: var(--byz-space-12);
}
.recipe__media[data-wald-ae26ab1c]{
  & .recipe__image {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 0.625rem;
    box-shadow: 8px 8px 16px rgb(0 0 0 / 0.25);
  }
  & .recipe__image--placeholder {
    display: grid;
    place-items: center;
    background:
      linear-gradient(to top, rgb(67 11 0 / 0.6), rgb(67 11 0 / 0) 60%),
      url("/images/hero-textuur.webp") center / cover,
      var(--byz-color-surface);
    background-blend-mode: normal, multiply, normal;
  }
  & .recipe__image--placeholder img {
    width: 55%;
    opacity: 0.85;
  }
}
.recipe__intro[data-wald-ae26ab1c]{
  max-width: 50rem;
  margin-inline: auto;
  text-align: center;
}
.recipe__kicker[data-wald-ae26ab1c]{
  color: var(--byz-color-accent);
  font-family: var(--steva-font-script);
  font-size: var(--byz-text-xl);
  text-shadow: var(--steva-tekst-schaduw);
}
.recipe__title[data-wald-ae26ab1c]{
  /* Lange Nederlandse samenstellingen ("boerenkoolstamppot") passen anders niet op een telefoon. */
  overflow-wrap: break-word;
  hyphens: auto;
  margin: var(--byz-space-1) 0 var(--byz-space-6);
  font-size: var(--byz-text-4xl);
  font-weight: var(--byz-font-semibold);
  line-height: 1.15;
  letter-spacing: 0;
  text-transform: uppercase;
  text-shadow: var(--steva-tekst-schaduw);
  text-wrap: balance;
}
.recipe__lead[data-wald-ae26ab1c]{
  max-width: 62ch;
  margin-inline: auto;
  color: var(--byz-color-text-muted);
  font-size: var(--byz-text-lg);
  line-height: var(--byz-leading-relaxed);
}
/* Link naar de keuken onder de kerngegevens (alleen als het recept een keuken heeft). */
.recipe__meta[data-wald-ae26ab1c]{
  margin-top: var(--byz-space-5);

  & .recipe__cuisine {
    color: var(--byz-color-text-secondary);
    font-weight: var(--byz-font-semibold);
    text-transform: uppercase;
    text-decoration: none;
    text-shadow: var(--steva-tekst-schaduw);
  }
  & .recipe__cuisine:hover {
    color: var(--byz-color-text-primary);
  }
}
/* Printknop als afsluiting onder de bereiding (en de tips). */
.recipe__print-row[data-wald-ae26ab1c]{
  margin-top: var(--byz-space-8);
}
.recipe__print[data-wald-ae26ab1c]{
  padding: var(--byz-space-3) var(--byz-space-5);
  border: 0;
  border-radius: 999px;
  background: rgb(67 11 0 / 0.55);
  box-shadow: inset 0 0 0 1px var(--byz-color-border);
  color: var(--byz-color-text-secondary);
  font: inherit;
  font-size: var(--byz-text-sm);
  font-weight: var(--byz-font-semibold);
  text-transform: uppercase;
  cursor: pointer;
}
.recipe__print[hidden][data-wald-ae26ab1c]{
  display: none;
}
.recipe__print[data-wald-ae26ab1c]:hover{
  color: var(--byz-color-text-primary);
}
/* Alleen op papier (zie public/print.css). */
.recipe__print-source[data-wald-ae26ab1c]{
  display: none;
}
.recipe__facts[data-wald-ae26ab1c]{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--byz-space-3);
  margin-top: var(--byz-space-8);

  & .recipe__fact {
    padding: var(--byz-space-3) var(--byz-space-5);
    border-radius: 0.625rem;
    background: rgb(67 11 0 / 0.55);
    box-shadow: inset 0 0 0 1px var(--byz-color-border);
  }
  & dt {
    color: var(--byz-color-text-secondary);
    font-size: var(--byz-text-xs);
    font-weight: var(--byz-font-semibold);
    text-transform: uppercase;
    letter-spacing: 0.06em;
  }
  & dd {
    font-size: var(--byz-text-lg);
    font-weight: var(--byz-font-semibold);
  }
}

.recipe__heading[data-wald-ae26ab1c]{
  margin-bottom: var(--byz-space-6);
  font-size: var(--byz-text-2xl);
  font-weight: var(--byz-font-semibold);
  line-height: 1.23;
  letter-spacing: 0;
  text-transform: uppercase;
  text-shadow: var(--steva-tekst-schaduw);
}

/* Ingrediënten: crèmekleurige kaart, net als de zoekbalk in de hero; blijft staan tijdens het scrollen. */
.recipe__ingredients[data-wald-ae26ab1c]{
  align-self: start;
  position: sticky;
  top: calc(6rem + var(--byz-space-6));
  padding: var(--byz-space-8);
  border-radius: 1rem;
  background: var(--steva-creme);
  box-shadow: inset 0 2px 4px var(--byz-color-accent), 0 2px 8px var(--steva-bordeaux-rand);
  color: var(--steva-bordeaux-donker);
  /* De kaart is maar 4 kolommen breed: de kop schaalt mee met de kaart (max. de gewone grootte),
     anders loopt "INGREDIËNTEN" rond 1024–1100px tegen de rand. */
  container-type: inline-size;
  & .recipe__heading {
    color: var(--steva-bordeaux-donker);
    font-size: min(var(--byz-text-2xl), 10cqi);
    text-shadow: none;
  }
  & ul {
    list-style: none;
  }
  /* Tussenkopjes in de ingrediëntenlijst (bv. "Schnitzels" / "Weense aardappelsalade"). */
  & p {
    margin-top: var(--byz-space-6);
  }
  & p:first-of-type {
    margin-top: 0;
  }
  & li {
    padding: var(--byz-space-3) 0;
    border-bottom: 1px dashed rgb(67 11 0 / 0.2);
    line-height: var(--byz-leading-normal);
  }
  & li:last-child {
    border-bottom: 0;
  }

  /* Personen-rekentool */
  /* Past het label niet naast de knoppen (smalle kaart, bv. rond 1024–1100px), dan slaat het
     om: label boven, knoppen eronder — nooit buiten het vak. */
  & .recipe__scaler {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--byz-space-2) var(--byz-space-4);
    margin-bottom: var(--byz-space-4);
    padding: var(--byz-space-3) var(--byz-space-4);
    border-radius: 0.625rem;
    background: rgb(255 174 61 / 0.18);
  }
  & .recipe__scaler[hidden] {
    display: none;
  }
  & .recipe__scaler-label {
    font-size: var(--byz-text-sm);
    font-weight: var(--byz-font-semibold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }
  & .recipe__scaler-controls {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: var(--byz-space-3);
  }
  & .recipe__scaler button {
    display: grid;
    flex-shrink: 0;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    border: 0;
    border-radius: 999px;
    background: var(--byz-color-accent);
    box-shadow: inset 0 -3px 0 var(--steva-oranje-donker);
    color: var(--steva-bordeaux-donker);
    font-size: var(--byz-text-xl);
    font-weight: var(--byz-font-semibold);
    line-height: 1;
    cursor: pointer;
  }
  & .recipe__scaler button:disabled {
    opacity: 0.4;
    cursor: not-allowed;
  }
  & .recipe__scaler output {
    min-width: 2ch;
    font-size: var(--byz-text-xl);
    font-weight: var(--byz-font-semibold);
    text-align: center;
  }
  & .recipe__qty {
    font-weight: var(--byz-font-semibold);
    transition: color var(--byz-duration-normal) var(--byz-ease-default);
  }
  /* Bordeaux i.p.v. oranje: oranje op crème haalt het WCAG-contrast voor tekst niet. */
  &.recipe__ingredients--scaled .recipe__qty {
    color: var(--byz-color-surface);
  }
}

/* Bereiding: grote Fraunces-cijfers in oranje, zoals de accenten in het ontwerp. */
.recipe__steps[data-wald-ae26ab1c]{
  & ol {
    list-style: none;
    counter-reset: stap;
  }
  & ol > li {
    position: relative;
    counter-increment: stap;
    padding: 0 0 var(--byz-space-8) 4.5rem;
    line-height: var(--byz-leading-relaxed);
  }
  & ol > li::before {
    content: counter(stap);
    position: absolute;
    left: 0;
    top: -0.35rem;
    width: 3rem;
    color: var(--byz-color-accent);
    font-size: var(--byz-text-4xl);
    font-weight: var(--byz-font-semibold);
    line-height: 1;
    text-align: right;
    text-shadow: var(--steva-tekst-schaduw);
  }
  & strong {
    color: var(--byz-color-text-secondary);
  }
  & .recipe__tips {
    margin-top: var(--byz-space-8);
    padding: var(--byz-space-8);
    border-radius: 1rem;
    background: rgb(67 11 0 / 0.55);
    box-shadow: inset 0 0 0 1px var(--byz-color-border);
  }
  & .recipe__tips ul {
    padding-left: var(--byz-space-5);
  }
  & .recipe__tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--byz-space-2);
    margin-top: var(--byz-space-10);
    list-style: none;
  }
  & .recipe__tags li {
    padding: var(--byz-space-1) var(--byz-space-4);
    border-radius: 999px;
    background: var(--byz-color-accent);
    box-shadow: inset 0 -3px 0 var(--steva-oranje-donker);
    color: var(--steva-bordeaux-donker);
    font-size: var(--byz-text-sm);
    font-weight: var(--byz-font-semibold);
    text-transform: uppercase;
  }
}

@media (min-width: 1024px) {
  /* Pas vanaf lg een 12-kolomsgrid in de hero: op mobiel zijn 11 tussenruimtes van
     2.5rem al breder dan het scherm. Tussenruimte gelijk aan de body, zodat de
     kolomlijnen van foto, ingrediënten en bereiding exact op elkaar aansluiten. */
  .recipe__hero[data-wald-ae26ab1c]{
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--byz-space-10);
    margin-bottom: var(--byz-space-16);
  }
  .recipe__intro[data-wald-ae26ab1c]{
    grid-column: 3 / span 8;
  }
  .recipe__media[data-wald-ae26ab1c]{
    grid-column: 2 / span 10;

    & .recipe__image {
      aspect-ratio: 16 / 9;
    }
  }
  .recipe__body[data-wald-ae26ab1c]{
    column-gap: var(--byz-space-10);
  }
  .recipe__body > .recipe__ingredients[data-wald-ae26ab1c]{
    grid-column: 2 / span 4;
  }
  .recipe__body > .recipe__steps[data-wald-ae26ab1c]{
    grid-column: 6 / span 6;
  }
}
@media (max-width: 1023px) {
  .recipe__ingredients[data-wald-ae26ab1c]{
    position: static;
  }
}
@media (max-width: 640px) {
  .recipe__steps[data-wald-ae26ab1c]{
    & ol > li {
      padding-left: 3.25rem;
    }
    & ol > li::before {
      width: 2.25rem;
      font-size: var(--byz-text-3xl);
    }
  }
}


/* Figma: zoekbalk 665 × 48, crème met oranje binnenrand. */
.search-form[data-wald-625aaf03]{
  display: flex;
  align-items: center;
  gap: 0.625rem;
  width: min(100%, 41.5rem);
  padding: var(--byz-space-2) var(--byz-space-4) var(--byz-space-2) var(--byz-space-6);
  border-radius: 2rem;
  background: var(--steva-creme);
  box-shadow: inset 0 2px 4px var(--byz-color-accent), 0 2px 8px var(--steva-bordeaux-rand);
}
.search-form[data-wald-625aaf03]:focus-within{
  outline: 2px solid var(--byz-color-focus);
  outline-offset: 2px;
}
.search-form__button[data-wald-625aaf03]{
  display: flex;
  padding: 0;
  border: 0;
  background: none;
  color: var(--steva-bordeaux-donker);
  cursor: pointer;
}
.search-form__input[data-wald-625aaf03]{
  flex: 1;
  min-width: 0;
  height: 2rem;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--steva-bordeaux-donker);
  font: var(--byz-font-semibold) var(--byz-text-lg) var(--byz-font-serif);
}
/* Contrast placeholder op crème: bordeaux op 65% blijft boven 4.5:1 (WCAG AA). */
.search-form__input[data-wald-625aaf03]::placeholder{
  color: rgb(67 11 0 / 0.65);
  font-weight: var(--byz-font-normal);
}


.search-icon[data-wald-1af29b5b]{
  display: block;
  flex-shrink: 0;
}


/* Niet in het Figma-ontwerp; stijl afgeleid van de header (zelfde palet en typografie). */
.site-footer[data-wald-4ee12808]{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--byz-space-5);
  padding: var(--byz-space-12) var(--steva-pagina-marge) var(--byz-space-8);
  background: var(--steva-bordeaux-donker);
  color: var(--byz-color-text-primary);
  text-align: center;
}

.site-footer__logo[data-wald-4ee12808]{
  width: 9rem;
  height: auto;
}
.site-footer__nav[data-wald-4ee12808], .site-footer__social[data-wald-4ee12808]{
  display: flex;
  gap: var(--byz-space-6);
  flex-wrap: wrap;
  justify-content: center;
}
/* "Over Steva" en "Contact" zijn optioneel (frontmatter, zonder scope-attribuut): genest. */
.site-footer__nav[data-wald-4ee12808]{
  & a {
    color: var(--byz-color-text-secondary);
    font-weight: var(--byz-font-semibold);
    text-transform: uppercase;
    text-decoration: none;
  }
  & a:hover {
    color: var(--byz-color-text-primary);
  }
}
/* Social links zijn optioneel en dus in de frontmatter opgebouwd (zonder scope-attribuut),
   vandaar genest onder de gescopete container. */
.site-footer__social[data-wald-4ee12808]{
  & a {
    color: var(--byz-color-text-primary);
    text-decoration: none;
  }
  & a:hover {
    color: var(--byz-color-text-secondary);
  }
}
.site-footer__copyright[data-wald-4ee12808]{
  margin: 0;
  font-size: var(--byz-text-xs);
  opacity: 0.7;
}
/* Cookievoorkeuren (CookieBanner.wald toont de knop alleen als de cookiebanner aan staat). */
.site-footer__sep[data-wald-4ee12808]{
  margin: 0 var(--byz-space-2);
}
.site-footer__sep[data-wald-4ee12808]:has(+ .site-footer__cookies[hidden]), .site-footer__cookies[hidden][data-wald-4ee12808]{
  display: none;
}
.site-footer__cookies[data-wald-4ee12808]{
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  cursor: pointer;
}


.site-header[data-wald-7e19a411]{
  position: sticky;
  top: 0;
  z-index: var(--byz-z-sticky);
  background: rgb(140 35 14 / 0.25);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.site-header__inner[data-wald-7e19a411]{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--byz-space-8);
  max-width: var(--steva-pagina-breedte);
  min-height: 6rem;
  margin: 0 auto;
  padding: 0 var(--steva-pagina-marge);
}
.site-header__brand[data-wald-7e19a411]{
  display: block;
  flex-shrink: 0;
}
.site-header__logo[data-wald-7e19a411]{
  display: block;
  width: 12.125rem;
  height: auto;
}
.site-header__nav[data-wald-7e19a411]{
  display: flex;
  flex: 1;
  justify-content: flex-end;
  gap: var(--byz-space-6);
}
/* "Over Steva" is optioneel en in de frontmatter opgebouwd (zonder scope-attribuut): genest. */
.site-header__nav[data-wald-7e19a411]{
  & a {
    color: var(--byz-color-text-secondary);
    font-size: 1rem;
    font-weight: var(--byz-font-semibold);
    text-transform: uppercase;
    text-decoration: none;
    text-shadow: var(--steva-tekst-schaduw);
    white-space: nowrap;
  }
  & a:hover {
    color: var(--byz-color-text-primary);
  }
}
.site-header__search[data-wald-7e19a411]:active{
  box-shadow: inset 0 -1px 0 var(--steva-oranje-donker), inset 0 2px 4px rgb(67 11 0 / 0.35);
  transform: translateY(3px);
}
.site-header__search[data-wald-7e19a411]{
  display: inline-flex;
  align-items: center;
  gap: var(--byz-space-2);
  padding: var(--byz-space-2) var(--byz-space-4);
  border-radius: 0.5rem;
  background: var(--byz-color-accent);
  box-shadow: inset 0 -4px 0 var(--steva-oranje-donker), 0 2px 8px var(--steva-bordeaux-rand);
  color: var(--steva-bordeaux-donker);
  font-size: 1rem;
  font-weight: var(--byz-font-semibold);
  line-height: 1.5rem;
  text-transform: uppercase;
  text-decoration: none;
}
.site-header__search[data-wald-7e19a411]:hover{
  filter: brightness(1.06);
}
/* Mobiel menu: <details>/<summary> werkt zonder JavaScript en is toetsenbord-toegankelijk.
   Alleen zichtbaar als de gewone navigatie verdwijnt (≤ 960px). */
.site-header__menu[data-wald-7e19a411]{
  display: none;
  position: relative;
  margin-left: auto;
}
.site-header__menu summary[data-wald-7e19a411]{
  display: flex;
  align-items: center;
  gap: var(--byz-space-2);
  padding: var(--byz-space-2) var(--byz-space-3);
  border-radius: 0.5rem;
  color: var(--byz-color-text-secondary);
  font-weight: var(--byz-font-semibold);
  text-transform: uppercase;
  text-shadow: var(--steva-tekst-schaduw);
  list-style: none;
  cursor: pointer;
}
.site-header__menu summary[data-wald-7e19a411]::-webkit-details-marker{
  display: none;
}
.site-header__menu-icon[data-wald-7e19a411], .site-header__menu-icon[data-wald-7e19a411]::before, .site-header__menu-icon[data-wald-7e19a411]::after{
  display: block;
  width: 1.125rem;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
}
.site-header__menu-icon[data-wald-7e19a411]{
  position: relative;
}
.site-header__menu-icon[data-wald-7e19a411]::before, .site-header__menu-icon[data-wald-7e19a411]::after{
  content: "";
  position: absolute;
  left: 0;
}
.site-header__menu-icon[data-wald-7e19a411]::before{
  top: -6px;
}
.site-header__menu-icon[data-wald-7e19a411]::after{
  top: 6px;
}
.site-header__menu-nav[data-wald-7e19a411]{
  position: absolute;
  top: calc(100% + var(--byz-space-2));
  right: 0;
  display: flex;
  flex-direction: column;
  min-width: 13rem;
  padding: var(--byz-space-2);
  border-radius: 0.625rem;
  background: var(--steva-bordeaux-donker);
  box-shadow: 0 8px 24px rgb(0 0 0 / 0.4), inset 0 0 0 1px var(--byz-color-border);
}
/* "Over Steva" is optioneel en in de frontmatter opgebouwd (zonder scope-attribuut): genest. */
.site-header__menu-nav[data-wald-7e19a411]{
  & a {
    padding: var(--byz-space-3) var(--byz-space-4);
    border-radius: 0.375rem;
    color: var(--byz-color-text-secondary);
    font-weight: var(--byz-font-semibold);
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
  }
  & a:hover {
    background: rgb(255 174 61 / 0.15);
    color: var(--byz-color-text-primary);
  }
}
@media (max-width: 640px) {
  /* Logo + menu + zoekknop passen anders niet naast elkaar op een telefoon:
     de zoekknop wordt een icoon, het label blijft voor schermlezers. */
  .site-header__inner[data-wald-7e19a411]{
    gap: var(--byz-space-3);
  }
  .site-header__search[data-wald-7e19a411]{
    padding: var(--byz-space-2) var(--byz-space-3);
  }
  .site-header__search-label[data-wald-7e19a411]{
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}
/* Onder 1200px passen logo, vijf links en de zoekknop niet naast elkaar (gemeten: vanaf ±1120px,
   plus speling voor "Over Steva"): dan het menu. */
@media (max-width: 1199px) {
  .site-header__nav[data-wald-7e19a411]{
    display: none;
  }
  .site-header__menu[data-wald-7e19a411]{
    display: block;
  }
  .site-header__logo[data-wald-7e19a411]{
    width: 9rem;
  }
}
@media (max-width: 360px) {
  .site-header__inner[data-wald-7e19a411]{
    gap: var(--byz-space-2);
  }
}


/* Variant van RecipeCard: liggend, met een titel en een korte ondertitel (keukens, thema's). */
.tile-card[data-wald-7001b62e]{
  position: relative;
  display: flex;
  align-items: flex-end;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 0.625rem;
  background: var(--byz-color-surface);
  box-shadow: 8px 8px 16px rgb(0 0 0 / 0.25);
  text-decoration: none;
  transition: transform var(--byz-duration-normal) var(--byz-ease-default);

  & .tile-card__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--byz-duration-slow) var(--byz-ease-out);
  }
  & .tile-card__image--placeholder {
    display: grid;
    place-items: center;
    padding-bottom: 20%;
    background: url("/images/hero-textuur.webp") center / cover, var(--byz-color-surface);
    background-blend-mode: multiply, normal;
  }
  & .tile-card__image--placeholder img {
    width: 45%;
    opacity: 0.85;
  }
}
.tile-card[data-wald-7001b62e]::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgb(67 11 0 / 0.85), rgb(67 11 0 / 0) 55%);
}
.tile-card[data-wald-7001b62e]:hover{
  transform: translateY(-4px);

  & .tile-card__image {
    transform: scale(1.03);
  }
}
.tile-card__text[data-wald-7001b62e]{
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: var(--byz-space-1);
  padding: 0 var(--byz-space-8) var(--byz-space-6);
}
.tile-card__name[data-wald-7001b62e]{
  color: var(--byz-color-text-primary);
  font-size: var(--byz-text-2xl);
  font-weight: var(--byz-font-semibold);
  line-height: 1.2;
  text-transform: uppercase;
  text-shadow: var(--steva-tekst-schaduw);
}
.tile-card__count[data-wald-7001b62e]{
  color: var(--byz-color-accent);
  font-family: var(--steva-font-script);
  font-size: var(--byz-text-lg);
  text-shadow: var(--steva-tekst-schaduw);
}


/* Byzantium levert tokens, reset en utilities (public/vendor/byzantium.css, zie
   wald.config.ts). Hier het Figma-palet (Stevas kookboek v2) als --steva-*, met de
   semantische Byzantium-tokens daarop gemapt — componenten gebruiken waar mogelijk de
   --byz-* tokens. Op body i.p.v. :root omdat scoped CSS van :root anders
   :root[data-wald-…] maakt; body wint zo ook van de :root-defaults van Byzantium. */
body[data-wald-444d0d05]{
  /* Figma-palet */
  --steva-bordeaux: #571103;
  --steva-bordeaux-licht: #8c230e;
  --steva-bordeaux-rand: #6a1808;
  --steva-bordeaux-donker: #430b00;
  --steva-creme: #fcf6ea;
  --steva-goud: #ffc471;
  --steva-oranje: #ffae3d;
  --steva-oranje-donker: #d47c02;
  --steva-font-script: "Marck Script", "Brush Script MT", cursive;
  --steva-tekst-schaduw: 0 2px 4px var(--steva-bordeaux-donker);
  /* viewport-fit=cover (zie <head>): de pagina loopt door achter de notch en de adresbalk van
     iOS. De marge groeit mee met de veilige zone, zodat tekst nooit achter de notch valt. */
  --steva-pagina-marge: max(clamp(var(--byz-space-4), 4.6vw, 4.4rem), env(safe-area-inset-left), env(safe-area-inset-right));
  /* Contentbreedte 86rem (Figma: 1372px) plus de marges — Byzantium zet box-sizing op
     border-box, dus de padding valt binnen de max-width. */
  --steva-pagina-breedte: calc(86rem + 2 * var(--steva-pagina-marge));

  /* Byzantium-tokens → Figma */
  --byz-brand-900: var(--steva-bordeaux-donker);
  --byz-brand-800: var(--steva-bordeaux);
  --byz-brand-700: var(--steva-bordeaux-rand);
  --byz-brand-600: var(--steva-bordeaux-licht);
  --byz-color-background: var(--steva-bordeaux);
  --byz-color-surface: var(--steva-bordeaux-licht);
  --byz-color-surface-raised: var(--steva-bordeaux-rand);
  --byz-color-text-primary: var(--steva-creme);
  --byz-color-text-secondary: var(--steva-goud);
  --byz-color-text-muted: rgb(252 246 234 / 0.7);
  --byz-color-border: var(--steva-bordeaux-rand);
  --byz-color-accent: var(--steva-oranje);
  --byz-color-focus: var(--steva-goud);
  --byz-font-serif: "Fraunces", Georgia, serif;
  --byz-font-sans: "Fraunces", Georgia, serif;

  position: relative;
  isolation: isolate;
  min-height: 100vh;

  /* Tekst over meerdere regels gelijkmatig verdelen (geen los woord op de laatste regel).
     Genest onder body, zodat het ook geldt voor HTML uit componenten en de frontmatter.
     Browsers balanceren alleen korte teksten (Chrome tot 6, Firefox tot 10 regels); langere
     alinea's breken gewoon af zoals voorheen. */
  & :is(h1, h2, h3, h4, h5, h6, p, li, dt, dd, blockquote, figcaption, label, summary, a, button) {
    text-wrap: balance;
  }
}

/* Korte pagina's vullen de viewport. De inhoud kan bij kleine schermen of ingezoomde
   tekst meegroeien; de footer blijft onder de inhoud staan. */
body[data-full-height="true"][data-wald-444d0d05]{
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;

  & > main { flex: 1; }
  & > .site-header, & > .site-footer { flex-shrink: 0; }
  & > .site-footer { margin-top: auto; }
  /* Decoratieve lagen mogen de korte pagina niet voorbij de viewport laten scrollen. */
  & > .page-backdrop { height: 100%; }
  & > .page-steam { height: min(40rem, 100%); }

  @media (max-height: 700px) {
    & > .site-footer {
      gap: var(--byz-space-3);
      padding-top: var(--byz-space-6);
      padding-bottom: var(--byz-space-5);
    }
  }
}

/* Rode gloed + marmertextuur bovenaan elke pagina (Figma: "Rectangle 2", "image 1" en
   "Rectangle 3"). Figma legt de textuur met linear-burn op 25% over de gloed; CSS kent
   geen linear-burn, multiply komt het dichtst in de buurt. De onderste 240px vloeien
   over in de achtergrondkleur. */
.page-backdrop[data-wald-444d0d05]{
  position: absolute;
  inset: 0 0 auto;
  height: 61.5rem;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(50% 50% at 50% 50%, var(--byz-color-surface), var(--byz-color-background)) center top / 100% 40rem no-repeat,
    var(--byz-color-background);
}
/* Stoom die boven aan elke pagina opstijgt, achter de inhoud (shader in public/effects.js,
   geladen door motion.js). Vervaagt erin zodra hij tekent; zonder WebGPU/WebGL2 of bij minder
   beweging blijft hij leeg en zie je alleen de gloed hierboven. */
.page-steam[data-wald-444d0d05]{
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 40rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 2s ease;
}
.page-steam.is-on[data-wald-444d0d05]{
  opacity: 1;
}
.page-backdrop[data-wald-444d0d05]::before, .page-backdrop[data-wald-444d0d05]::after{
  content: "";
  position: absolute;
  inset: 0;
}
.page-backdrop[data-wald-444d0d05]::before{
  background: url("/images/hero-textuur.webp") center top / cover no-repeat;
  opacity: 0.25;
  mix-blend-mode: multiply;
}
.page-backdrop[data-wald-444d0d05]::after{
  top: auto;
  height: 15rem;
  background: linear-gradient(to bottom, rgb(87 17 3 / 0.2), rgb(87 17 3 / 0.8));
}


.cms-error[data-wald-fbeadf58]{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: var(--byz-space-4);
  padding: clamp(var(--byz-space-4), 5vw, var(--byz-space-8));
}
.cms-error__title[data-wald-fbeadf58]{
  overflow-wrap: break-word;
  hyphens: auto;
  font-size: var(--byz-text-3xl);
  font-weight: var(--byz-font-semibold);
  letter-spacing: 0;
  text-transform: uppercase;
  text-shadow: var(--steva-tekst-schaduw);
}
.cms-error a[data-wald-fbeadf58]{
  background: var(--byz-color-accent);
  box-shadow: inset 0 -4px 0 var(--steva-oranje-donker);
  color: var(--steva-bordeaux-donker);
  font-weight: var(--byz-font-semibold);
  text-transform: uppercase;
  border-radius: 0.375rem;
  padding: var(--byz-space-2) var(--byz-space-5);
  text-decoration: none;
}


.cms-page[data-wald-ed735114]{
  max-width: var(--steva-pagina-breedte);
  margin: 0 auto;
  padding: var(--byz-space-16) var(--steva-pagina-marge) var(--byz-space-24);
  line-height: 1.6;
}
.cms-page__title[data-wald-ed735114]{
  margin: 0 0 var(--byz-space-8);
  font-size: var(--byz-text-3xl);
  font-weight: var(--byz-font-semibold);
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: uppercase;
  text-shadow: var(--steva-tekst-schaduw);
}


/* Alle secties worden in de frontmatter opgebouwd (geen loops/if in Wald-templates) en zijn
   dus genest onder de gescopete main gestyled (zie RecipeCard.wald). */
.home[data-wald-28894e32]{
  padding-bottom: var(--byz-space-24);

  & .home__section-inner {
    max-width: var(--steva-pagina-breedte);
    margin: 0 auto;
    padding: 0 var(--steva-pagina-marge);
  }
  /* Verborgen seizoenen tellen niet mee voor de ruimte tussen secties. */
  & .home__section[hidden] {
    display: none;
  }
  & .home__section:not([hidden]) ~ .home__section {
    margin-top: var(--byz-space-24);
  }
  /* Donkere band over de volle breedte, voor ritme tussen de secties. */
  & .home__section--band {
    padding: var(--byz-space-20) 0;
    background: rgb(67 11 0 / 0.55);
    box-shadow: inset 0 1px 0 var(--byz-color-border), inset 0 -1px 0 var(--byz-color-border);
  }
  & .home__section-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--byz-space-2) var(--byz-space-6);
    margin-bottom: var(--byz-space-12);
  }
  & .home__section-title {
    font-size: var(--byz-text-2xl);
    font-weight: var(--byz-font-semibold);
    line-height: 1.23;
    letter-spacing: 0;
    text-transform: uppercase;
    text-shadow: var(--steva-tekst-schaduw);
  }
  & .home__section-link {
    color: var(--byz-color-text-secondary);
    font-weight: var(--byz-font-semibold);
    text-transform: uppercase;
    text-decoration: none;
    text-shadow: var(--steva-tekst-schaduw);
  }
  & .home__section-link:hover {
    color: var(--byz-color-text-primary);
  }
  & .home__empty {
    color: var(--byz-color-text-secondary);
    font-family: var(--steva-font-script);
    font-size: var(--byz-text-xl);
  }

  /* Mozaïek "De nieuwste recepten" (voorstel C). Tablet: uitgelicht recept liggend over de volle breedte. */
  @media (min-width: 640px) and (max-width: 1023px) {
    & .home__recipe--uitgelicht .recipe-card {
      aspect-ratio: 16 / 9;
    }
  }
  /* Desktop: vaste rijhoogte, zodat de grote kaart precies twee kleine rijen hoog is.
     Figma heeft 40px tussen de kaarten; de gap-schaal van Byzantium stopt bij xl (2rem). */
  @media (min-width: 1024px) {
    & .home__recipes-grid {
      grid-auto-rows: 17rem;
    }
    & .home__recipes-grid,
    & .home__tiles {
      gap: var(--byz-space-10);
    }
    & .home__recipe--uitgelicht {
      grid-row: span 2;
    }
    & .home__recipe .recipe-card {
      aspect-ratio: auto;
      height: 100%;
    }
    & .home__recipe:not(.home__recipe--uitgelicht) .recipe-card__title {
      padding: 0;
      font-size: var(--byz-text-lg);
    }
  }
}


/* "Meer inspiratie" is in de frontmatter opgebouwd — genest onder de gescopete main. */
.theme[data-wald-8805907b]{
  max-width: var(--steva-pagina-breedte);
  margin: 0 auto;
  padding: var(--byz-space-12) var(--steva-pagina-marge) var(--byz-space-24);

  & .theme__others {
    margin-top: var(--byz-space-20);
    text-align: center;
  }
  & .theme__others h2 {
    margin-bottom: var(--byz-space-6);
    font-size: var(--byz-text-2xl);
    font-weight: var(--byz-font-semibold);
    line-height: 1.23;
    letter-spacing: 0;
    text-transform: uppercase;
    text-shadow: var(--steva-tekst-schaduw);
  }
  & .theme__others ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--byz-space-2);
    margin: 0;
    padding: 0;
    list-style: none;
  }
  & .theme__others a {
    display: inline-block;
    padding: var(--byz-space-2) var(--byz-space-5);
    border-radius: 999px;
    background: rgb(67 11 0 / 0.55);
    box-shadow: inset 0 0 0 1px var(--byz-color-border);
    color: var(--byz-color-text-secondary);
    font-size: var(--byz-text-sm);
    font-weight: var(--byz-font-semibold);
    text-transform: uppercase;
    text-decoration: none;
  }
  & .theme__others a:hover {
    background: var(--byz-color-accent);
    color: var(--steva-bordeaux-donker);
  }
}


/* Navigatie, secties en lege staat zijn in de frontmatter opgebouwd — genest onder de gescopete main. */
.inspiration[data-wald-c56ba6a4]{
  max-width: var(--steva-pagina-breedte);
  margin: 0 auto;
  padding: var(--byz-space-12) var(--steva-pagina-marge) var(--byz-space-24);

  & .inspiration__nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--byz-space-2);
    margin-bottom: var(--byz-space-16);
  }
  & .inspiration__nav a {
    padding: var(--byz-space-2) var(--byz-space-5);
    border-radius: 999px;
    background: rgb(67 11 0 / 0.55);
    box-shadow: inset 0 0 0 1px var(--byz-color-border);
    color: var(--byz-color-text-secondary);
    font-size: var(--byz-text-sm);
    font-weight: var(--byz-font-semibold);
    text-transform: uppercase;
    text-decoration: none;
  }
  & .inspiration__nav a:hover {
    background: var(--byz-color-accent);
    color: var(--steva-bordeaux-donker);
  }
  & .inspiration__section {
    /* Ruimte voor de sticky header bij springen naar een anker. */
    scroll-margin-top: calc(6rem + var(--byz-space-6));
  }
  & .inspiration__section + .inspiration__section {
    margin-top: var(--byz-space-20);
  }
  & .inspiration__title {
    font-size: var(--byz-text-2xl);
    font-weight: var(--byz-font-semibold);
    line-height: 1.23;
    letter-spacing: 0;
    text-transform: uppercase;
    text-shadow: var(--steva-tekst-schaduw);
  }
  & .inspiration__title a {
    color: inherit;
    text-decoration: none;
  }
  & .inspiration__title a:hover {
    color: var(--byz-color-text-secondary);
  }
  & .inspiration__more {
    margin-top: var(--byz-space-8);
    text-align: center;
  }
  & .inspiration__more a {
    color: var(--byz-color-text-secondary);
    font-weight: var(--byz-font-semibold);
    text-transform: uppercase;
    text-decoration: none;
  }
  & .inspiration__more a:hover {
    color: var(--byz-color-text-primary);
  }
  & .inspiration__description {
    max-width: 62ch;
    margin: var(--byz-space-2) 0 var(--byz-space-8);
    color: var(--byz-color-text-muted);
  }
  & .inspiration__empty {
    color: var(--byz-color-text-secondary);
    font-family: var(--steva-font-script);
    font-size: var(--byz-text-xl);
    text-align: center;
  }
}


.cuisine[data-wald-9b82220b]{
  max-width: var(--steva-pagina-breedte);
  margin: 0 auto;
  padding: var(--byz-space-12) var(--steva-pagina-marge) var(--byz-space-24);
}
.cuisine__back[data-wald-9b82220b]{
  margin-top: var(--byz-space-12);
  text-align: center;
}
.cuisine__back a[data-wald-9b82220b]{
  color: var(--byz-color-text-secondary);
  font-weight: var(--byz-font-semibold);
  text-transform: uppercase;
  text-decoration: none;
}
.cuisine__back a[data-wald-9b82220b]:hover{
  color: var(--byz-color-text-primary);
}


/* Snelmenu, hoofdstukken en lege staat zijn in de frontmatter opgebouwd — genest onder de gescopete main. */
.cuisines[data-wald-007c3ed4]{
  max-width: var(--steva-pagina-breedte);
  margin: 0 auto;
  padding: var(--byz-space-12) var(--steva-pagina-marge) var(--byz-space-24);

  /* Snelmenu */
  & .cuisines__jump ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--byz-space-2);
    margin: 0 0 var(--byz-space-20);
    padding: 0;
    list-style: none;
  }
  & .cuisines__jump a {
    display: inline-flex;
    align-items: center;
    gap: var(--byz-space-2);
    padding: var(--byz-space-2) var(--byz-space-2) var(--byz-space-2) var(--byz-space-5);
    border-radius: 999px;
    background: rgb(67 11 0 / 0.55);
    box-shadow: inset 0 0 0 1px var(--byz-color-border);
    color: var(--byz-color-text-secondary);
    font-size: var(--byz-text-sm);
    font-weight: var(--byz-font-semibold);
    text-transform: uppercase;
    text-decoration: none;
  }
  & .cuisines__jump a span {
    min-width: 1.75rem;
    padding: 0.125rem var(--byz-space-2);
    border-radius: 999px;
    background: var(--steva-bordeaux-licht);
    color: var(--byz-color-text-primary);
    text-align: center;
  }
  & .cuisines__jump a:hover {
    background: var(--byz-color-accent);
    color: var(--steva-bordeaux-donker);
  }

  /* Hoofdstukken */
  & .chapter {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--byz-space-8);
    align-items: center;
    scroll-margin-top: calc(6rem + var(--byz-space-6));
  }
  & .chapter + .chapter {
    margin-top: var(--byz-space-20);
  }
  & .chapter__media {
    display: block;
    overflow: hidden;
    text-decoration: none;
    border-radius: 0.875rem;
    box-shadow: 8px 8px 24px rgb(0 0 0 / 0.3);
  }
  & .chapter__image {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    transition: transform var(--byz-duration-slow) var(--byz-ease-out);
  }
  & .chapter:hover .chapter__image {
    transform: scale(1.03);
  }
  /* Zonder foto: een reisstempel op de marmertextuur. */
  & .chapter__image--placeholder {
    display: grid;
    place-items: center;
    padding: var(--byz-space-6);
    background:
      radial-gradient(70% 70% at 50% 50%, rgb(140 35 14 / 0.4), rgb(67 11 0 / 0.7)),
      url("/images/hero-textuur.webp") center / cover,
      var(--byz-color-surface);
    background-blend-mode: normal, multiply, normal;
    color: var(--steva-goud);
  }
  & .stamp-wrap {
    display: block;
    width: min(70%, 20rem);
  }
  & .stamp {
    display: block;
    width: 100%;
    height: auto;
    opacity: 0.85;
    transform: rotate(-9deg);
    mix-blend-mode: screen;
  }
  & .chapter:nth-of-type(even) .stamp {
    transform: rotate(7deg);
  }
  & .stamp__rand {
    font-size: 15px;
    font-weight: 600;
  }
  & .stamp__naam {
    font-family: var(--steva-font-script);
  }
  & .stamp__aantal {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 2px;
  }
  & .chapter__number {
    margin: 0;
    color: transparent;
    font-size: clamp(3.5rem, 8vw, 5.5rem);
    font-weight: var(--byz-font-semibold);
    line-height: 0.9;
    -webkit-text-stroke: 1.5px var(--byz-color-accent);
  }
  & .chapter__title {
    overflow-wrap: break-word;
    hyphens: auto;
    margin: var(--byz-space-2) 0 0;
    font-size: var(--byz-text-4xl);
    font-weight: var(--byz-font-semibold);
    line-height: 1.1;
    letter-spacing: 0;
    text-transform: uppercase;
    text-shadow: var(--steva-tekst-schaduw);
  }
  & .chapter__title a {
    color: var(--byz-color-text-primary);
    text-decoration: none;
  }
  & .chapter__count {
    margin: var(--byz-space-1) 0 var(--byz-space-5);
    color: var(--byz-color-accent);
    font-family: var(--steva-font-script);
    font-size: var(--byz-text-xl);
  }
  & .chapter__intro {
    max-width: 60ch;
    margin: 0 0 var(--byz-space-6);
    color: var(--byz-color-text-muted);
    line-height: var(--byz-leading-relaxed);
  }
  & .chapter__label {
    margin: 0 0 var(--byz-space-2);
    color: var(--byz-color-text-secondary);
    font-size: var(--byz-text-xs);
    font-weight: var(--byz-font-semibold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
  & .chapter__dishes {
    margin: 0 0 var(--byz-space-8);
    padding: 0;
    list-style: none;
  }
  & .chapter__dishes li {
    border-top: 1px solid var(--byz-color-border);
  }
  & .chapter__dishes li:last-child {
    border-bottom: 1px solid var(--byz-color-border);
  }
  & .chapter__dishes a {
    display: flex;
    justify-content: space-between;
    gap: var(--byz-space-4);
    padding: var(--byz-space-3) 0;
    color: var(--byz-color-text-primary);
    font-weight: var(--byz-font-semibold);
    text-decoration: none;
  }
  & .chapter__dishes a::after {
    content: "→";
    color: var(--byz-color-accent);
    transition: transform var(--byz-duration-normal);
  }
  & .chapter__dishes a:hover {
    color: var(--byz-color-text-secondary);
  }
  & .chapter__dishes a:hover::after {
    transform: translateX(4px);
  }
  & .chapter__button {
    display: inline-block;
    padding: var(--byz-space-3) var(--byz-space-6);
    border-radius: 0.5rem;
    background: var(--byz-color-accent);
    box-shadow: inset 0 -4px 0 var(--steva-oranje-donker), 0 2px 8px var(--steva-bordeaux-rand);
    color: var(--steva-bordeaux-donker);
    font-weight: var(--byz-font-semibold);
    text-transform: uppercase;
    text-decoration: none;
    text-shadow: 0 1px 0 rgb(255 255 255 / 0.3);
  }
  & .chapter__button:hover {
    background: var(--steva-oranje-donker);
  }
  & .chapter__button:active {
    box-shadow: inset 0 -1px 0 var(--steva-oranje-donker), inset 0 2px 4px rgb(67 11 0 / 0.35);
    transform: translateY(3px);
  }
  & .cuisines__empty {
    color: var(--byz-color-text-secondary);
    font-family: var(--steva-font-script);
    font-size: var(--byz-text-xl);
    text-align: center;
  }

  /* Vanaf lg: beeld 7 kolommen, tekst 5; om en om gespiegeld. */
  @media (min-width: 1024px) {
    & .chapter {
      grid-template-columns: repeat(12, minmax(0, 1fr));
      gap: var(--byz-space-12);
    }
    & .chapter + .chapter {
      margin-top: var(--byz-space-24);
    }
    & .chapter__media {
      grid-column: 1 / span 7;
      grid-row: 1;
    }
    & .chapter__body {
      grid-column: 8 / span 5;
      grid-row: 1;
    }
    & .chapter:nth-of-type(even) .chapter__media {
      grid-column: 6 / span 7;
    }
    & .chapter:nth-of-type(even) .chapter__body {
      grid-column: 1 / span 5;
    }
  }
}


.submit-recipe[data-wald-65a74a19]{
  max-width: var(--steva-pagina-breedte);
  margin: 0 auto;
  padding: var(--byz-space-12) var(--steva-pagina-marge) var(--byz-space-24);
}


.recipe-page__crumbs[data-wald-47822e79]{
  max-width: var(--steva-pagina-breedte);
  margin: 0 auto;
  padding: var(--byz-space-8) var(--steva-pagina-marge) 0;
}
/* "Meer recepten" is conditioneel en dus in de frontmatter opgebouwd — genest onder de gescopete main. */
.recipe-page[data-wald-47822e79]{
  & .more-recipes {
    max-width: var(--steva-pagina-breedte);
    margin: 0 auto;
    padding: 0 var(--steva-pagina-marge) var(--byz-space-24);
  }
  & .more-recipes__title {
    margin-bottom: var(--byz-space-12);
    font-size: var(--byz-text-2xl);
    font-weight: var(--byz-font-semibold);
    line-height: 1.23;
    letter-spacing: 0;
    text-transform: uppercase;
    text-shadow: var(--steva-tekst-schaduw);
  }
}


/* Thema-strook: helemaal naar links tot de laatste kaart aan de rechterrand staat. De zichtbare
   breedte is de breedte van main (max. de paginabreedte). */
@keyframes recipes-drawer {
  from { transform: translateY(100%); }
}
@keyframes recipes-backdrop {
  from { opacity: 0; }
}
@keyframes recipes-rail {
  to { transform: translateX(calc(-100% + min(100vw, var(--steva-pagina-breedte)))); }
}
/* Alles onder de kop is conditioneel en dus in de frontmatter opgebouwd — genest onder de
   gescopete main (zie RecipeCard.wald). */
.recipes[data-wald-cda830d4]{
  max-width: var(--steva-pagina-breedte);
  margin: 0 auto;
  padding: var(--byz-space-12) var(--steva-pagina-marge) var(--byz-space-24);

  /* Kerncijfers */
  & .recipes__stats {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--byz-space-4) var(--byz-space-12);
    margin: calc(-1 * var(--byz-space-4)) 0 var(--byz-space-16);
  }
  & .recipes__stats div {
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
  }
  & .recipes__stats dd {
    margin: 0;
    color: var(--byz-color-text-primary);
    font-size: var(--byz-text-4xl);
    font-weight: var(--byz-font-semibold);
    line-height: 1;
    text-shadow: var(--steva-tekst-schaduw);
  }
  & .recipes__stats dt {
    color: var(--byz-color-accent);
    font-family: var(--steva-font-script);
    font-size: var(--byz-text-lg);
  }

  /* Koppen van de secties */
  & .recipes__themes {
    margin-top: var(--byz-space-20);
  }
  /* "Blader door alles": meer lucht erboven en tussen de kop en de filters. */
  & .recipes__all {
    margin-top: var(--byz-space-24);
  }
  & .recipes__all .recipes__section-head {
    margin-bottom: var(--byz-space-12);
  }
  & .recipes__section-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--byz-space-2) var(--byz-space-6);
    margin-bottom: var(--byz-space-8);
  }
  & .recipes__heading {
    margin: 0;
    font-size: var(--byz-text-2xl);
    font-weight: var(--byz-font-semibold);
    line-height: 1.23;
    letter-spacing: 0;
    text-transform: uppercase;
    text-shadow: var(--steva-tekst-schaduw);
  }
  & .recipes__more {
    color: var(--byz-color-text-secondary);
    font-weight: var(--byz-font-semibold);
    text-transform: uppercase;
    text-decoration: none;
  }
  & .recipes__more:hover {
    color: var(--byz-color-text-primary);
  }

  /* Thema-strook: horizontaal scrollen met snap; loopt door tot de rand van het scherm. */
  & .recipes__rail {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(15rem, 18rem);
    gap: var(--byz-space-4);
    margin: 0 calc(-1 * var(--steva-pagina-marge));
    /* Ruimte boven voor de tabjes: overflow-x: auto knipt ook verticaal af. */
    padding: var(--byz-space-6) var(--steva-pagina-marge) var(--byz-space-6);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--steva-pagina-marge);
    scrollbar-width: none;
    list-style: none;
  }
  & .recipes__rail::-webkit-scrollbar {
    display: none;
  }
  /* Browsers met scroll-driven animations (Chrome, Edge, Safari 26), vanaf tablet: de strook
     blijft staan terwijl je naar beneden scrolt en de thema's schuiven horizontaal voorbij.
     De sectie is hoger dan het scherm; die extra hoogte is de "scrollweg" van de strook.
     Anders (en bij minder beweging): gewoon horizontaal swipen. */
  @supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) and (min-width: 768px) {
      & .recipes__themes {
        height: 260vh;
        view-timeline-name: --themas;
      }
      & .recipes__themes-sticky {
        position: sticky;
        top: 6rem;
        display: flex;
        flex-direction: column;
        justify-content: center;
        height: calc(100vh - 6rem);
        /* Tot de rand van main afknippen, niet tot de binnenrand: anders verdwijnen de
           kaarten al bij de paginamarge. */
        margin-inline: calc(-1 * var(--steva-pagina-marge));
        padding-inline: var(--steva-pagina-marge);
        overflow-x: clip;
      }
      & .recipes__rail {
        width: max-content;
        overflow: visible;
        scroll-snap-type: none;
        animation: recipes-rail linear both;
        animation-timeline: --themas;
        animation-range: contain 0% contain 100%;
      }
    }
  }
  & .recipes__rail li {
    scroll-snap-align: start;
  }
  /* Als tabbladen in een receptenbak: een tabje links boven, papierachtige rand. */
  & .recipes__theme {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: var(--byz-space-6);
    border-radius: 0.75rem;
    background:
      linear-gradient(160deg, rgb(140 35 14 / 0.9), rgb(67 11 0 / 0.9)),
      url("/images/hero-textuur.webp") center / cover;
    background-blend-mode: normal, multiply;
    box-shadow: 6px 6px 16px rgb(0 0 0 / 0.25), inset 0 0 0 1px var(--byz-color-border);
    color: var(--byz-color-text-primary);
    text-decoration: none;
    transition: transform var(--byz-duration-normal) var(--byz-ease-default), box-shadow var(--byz-duration-normal);
  }
  & .recipes__theme::before {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 1.25rem;
    width: 42%;
    height: 0.9rem;
    border-radius: 0.5rem 0.5rem 0 0;
    background: rgb(140 35 14 / 0.95);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.1), inset 1px 0 0 var(--byz-color-border), inset -1px 0 0 var(--byz-color-border);
  }
  & .recipes__rail li:nth-child(3n + 2) .recipes__theme::before {
    left: 29%;
  }
  & .recipes__rail li:nth-child(3n) .recipes__theme::before {
    left: auto;
    right: 1.25rem;
  }
  & .recipes__theme:hover {
    transform: translateY(-4px);
    box-shadow: 6px 10px 20px rgb(0 0 0 / 0.3), inset 0 0 0 1px var(--byz-color-accent);
  }
  & .recipes__theme-count {
    color: var(--byz-color-accent);
    font-size: var(--byz-text-4xl);
    font-weight: var(--byz-font-semibold);
    line-height: 1;
    text-shadow: var(--steva-tekst-schaduw);
  }
  & .recipes__theme-title {
    margin: var(--byz-space-3) 0 var(--byz-space-2);
    font-size: var(--byz-text-lg);
    font-weight: var(--byz-font-semibold);
    text-transform: uppercase;
    text-shadow: var(--steva-tekst-schaduw);
  }
  & .recipes__theme-text {
    color: var(--byz-color-text-muted);
    font-size: var(--byz-text-sm);
    line-height: var(--byz-leading-relaxed);
  }

  /* Filters */
  /* Lucht tussen de gang-knoppen, de keuzelijsten en het aantal. */
  & .recipes__filters {
    display: grid;
    gap: var(--byz-space-8);
    margin-bottom: var(--byz-space-10);
  }
  & .recipes__filters[hidden],
  & [data-cuisine][hidden],
  & .recipes__none[hidden] {
    display: none;
  }
  & .recipes__courses {
    display: flex;
    flex-wrap: wrap;
    gap: var(--byz-space-2);
  }
  & .recipes__courses button {
    padding: var(--byz-space-2) var(--byz-space-5);
    border: 0;
    border-radius: 999px;
    background: rgb(67 11 0 / 0.55);
    box-shadow: inset 0 0 0 1px var(--byz-color-border);
    color: var(--byz-color-text-secondary);
    font-size: var(--byz-text-sm);
    font-weight: var(--byz-font-semibold);
    text-transform: uppercase;
    cursor: pointer;
  }
  & .recipes__courses button[aria-pressed="true"] {
    background: var(--byz-color-accent);
    box-shadow: inset 0 -3px 0 var(--steva-oranje-donker);
    color: var(--steva-bordeaux-donker);
  }
  & .recipes__slot .recipes__panel {
    display: grid;
    gap: var(--byz-space-8);
  }
  & .recipes__selects {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 10.5rem), 1fr));
    gap: var(--byz-space-3) var(--byz-space-4);
  }
  & .recipes__filter-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--byz-space-4);
  }
  & .recipes__select {
    display: flex;
    flex-direction: column;
    gap: var(--byz-space-1);
    color: var(--byz-color-text-secondary);
    font-size: var(--byz-text-sm);
    font-weight: var(--byz-font-semibold);
    text-transform: uppercase;
  }
  & .recipes__select select {
    width: 100%;
    max-width: 100%;
    padding: var(--byz-space-2) var(--byz-space-8) var(--byz-space-2) var(--byz-space-4);
    border: 0;
    border-radius: 0.5rem;
    background: rgb(67 11 0 / 0.55) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23ffc471' stroke-width='2'/%3E%3C/svg%3E") right 0.75rem center no-repeat;
    box-shadow: inset 0 0 0 1px var(--byz-color-border);
    color: var(--byz-color-text-primary);
    font: inherit;
    text-transform: none;
    appearance: none;
    cursor: pointer;
  }
  /* Gekozen filter: oranje rand, zodat je ziet wat er aan staat. */
  & .recipes__select select.is-active {
    box-shadow: inset 0 0 0 2px var(--byz-color-accent);
  }
  & .recipes__reset[hidden] {
    display: none;
  }
  & .recipes__reset {
    padding: 0;
    border: 0;
    background: none;
    color: var(--byz-color-text-secondary);
    font: inherit;
    font-weight: var(--byz-font-semibold);
    text-decoration: underline;
    cursor: pointer;
  }
  & .recipes__reset:hover {
    color: var(--byz-color-text-primary);
  }
  & .recipes__select option {
    background: var(--steva-bordeaux-donker);
  }
  & .recipes__count {
    margin: 0;
    color: var(--byz-color-text-muted);
    font-family: var(--steva-font-script);
    font-size: var(--byz-text-lg);
  }
  /* Mobiel: knop "Filters" met teller; het paneel zit dan in de drawer. */
  & .recipes__bar {
    display: none;
  }
  @media (max-width: 767px) {
    & .recipes__bar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--byz-space-4);
    }
    & .recipes__filter-row {
      display: none;
    }
    & .recipes__filters {
      margin-bottom: var(--byz-space-8);
    }
  }
  & .recipes__open {
    display: inline-flex;
    align-items: center;
    gap: var(--byz-space-2);
    padding: var(--byz-space-3) var(--byz-space-5);
    border: 0;
    border-radius: 999px;
    background: var(--byz-color-accent);
    box-shadow: inset 0 -3px 0 var(--steva-oranje-donker), 0 2px 8px var(--steva-bordeaux-rand);
    color: var(--steva-bordeaux-donker);
    font: inherit;
    font-weight: var(--byz-font-semibold);
    text-transform: uppercase;
    cursor: pointer;
  }
  & .recipes__badge {
    display: inline-grid;
    place-items: center;
    min-width: 1.4rem;
    height: 1.4rem;
    padding: 0 0.35rem;
    border-radius: 999px;
    background: var(--steva-bordeaux-donker);
    color: var(--byz-color-accent);
    font-size: var(--byz-text-xs);
    line-height: 1;
  }
  & .recipes__badge[hidden] {
    display: none;
  }

  /* De drawer: schuift van onderen in beeld, maximaal 85% van het scherm hoog. */
  & .recipes__drawer {
    position: fixed;
    inset: auto 0 0;
    width: 100%;
    max-width: 100%;
    /* Vaste hoogte (niet alleen max-height): dan krijgt het middendeel altijd ruimte. */
    height: min(calc(31rem + env(safe-area-inset-bottom)), 90vh);
    height: min(calc(31rem + env(safe-area-inset-bottom)), calc(100dvh - 2.5rem));
    max-height: none;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 1.25rem 1.25rem 0 0;
    background: var(--steva-bordeaux-donker);
    box-shadow: 0 -10px 40px rgb(0 0 0 / 0.45), inset 0 1px 0 var(--byz-color-border);
    color: var(--byz-color-text-primary);
  }
  & .recipes__drawer[open] {
    display: flex;
    flex-direction: column;
  }
  & .recipes__drawer::backdrop {
    background: rgb(20 3 0 / 0.6);
  }
  @media (prefers-reduced-motion: no-preference) {
    & .recipes__drawer[open] {
      animation: recipes-drawer 320ms cubic-bezier(0.2, 0.8, 0.2, 1);
    }
    & .recipes__drawer[open]::backdrop {
      animation: recipes-backdrop 320ms ease;
    }
  }
  & .recipes__drawer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--byz-space-5) var(--steva-pagina-marge) var(--byz-space-3);
  }
  /* Greepje bovenaan, zoals bij een bottom sheet. */
  & .recipes__drawer-head::before {
    content: "";
    position: absolute;
    top: 0.5rem;
    left: 50%;
    width: 2.5rem;
    height: 0.3rem;
    border-radius: 999px;
    background: var(--byz-color-border);
    transform: translateX(-50%);
  }
  & .recipes__drawer-title {
    margin: 0;
    font-size: var(--byz-text-xl);
    font-weight: var(--byz-font-semibold);
    text-transform: uppercase;
  }
  & .recipes__close {
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    border: 0;
    border-radius: 50%;
    background: rgb(255 255 255 / 0.06);
    color: var(--byz-color-text-secondary);
    cursor: pointer;
  }
  /* flex: 1 1 auto, niet flex: 1: Safari geeft een item met basis 0% in een container zonder
     vaste hoogte anders hoogte 0, en dan zie je alleen de kop en de knoppen. */
  & .recipes__drawer-body {
    flex: 1 1 auto;
    min-height: 0;
    padding: var(--byz-space-3) var(--steva-pagina-marge) var(--byz-space-6);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  & .recipes__drawer-body .recipes__panel {
    display: grid;
    gap: var(--byz-space-6);
  }
  /* In de drawer: gangen op één regel om horizontaal te vegen, zodat alles in beeld past. */
  & .recipes__drawer-body .recipes__courses {
    flex-wrap: nowrap;
    margin-inline: calc(-1 * var(--steva-pagina-marge));
    padding: var(--byz-space-1) var(--steva-pagina-marge);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }
  & .recipes__drawer-body .recipes__courses::-webkit-scrollbar {
    display: none;
  }
  & .recipes__drawer-body .recipes__courses button {
    flex-shrink: 0;
  }
  /* Minstens 16px: kleiner laat Safari op de iPhone inzoomen zodra je een keuzelijst aantikt. */
  & .recipes__drawer-body .recipes__select select {
    font-size: max(1rem, 16px);
  }
  & .recipes__drawer-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--byz-space-4);
    padding: var(--byz-space-4) var(--steva-pagina-marge) calc(var(--byz-space-4) + env(safe-area-inset-bottom));
    box-shadow: inset 0 1px 0 var(--byz-color-border);
  }
  & .recipes__drawer-reset {
    padding: var(--byz-space-2) 0;
    border: 0;
    background: none;
    color: var(--byz-color-text-secondary);
    font: inherit;
    font-weight: var(--byz-font-semibold);
    text-decoration: underline;
    cursor: pointer;
  }
  & .recipes__drawer-reset:disabled {
    opacity: 0.45;
    cursor: default;
  }
  & .recipes__show {
    flex: 1;
    max-width: 16rem;
    padding: var(--byz-space-3) var(--byz-space-5);
    border: 0;
    border-radius: 0.5rem;
    background: var(--byz-color-accent);
    box-shadow: inset 0 -4px 0 var(--steva-oranje-donker);
    color: var(--steva-bordeaux-donker);
    font: inherit;
    font-weight: var(--byz-font-semibold);
    text-transform: uppercase;
    cursor: pointer;
  }
  & .recipes__none {
    color: var(--byz-color-text-muted);
    text-align: center;
  }
  & .recipes__none button {
    border: 0;
    background: none;
    color: var(--byz-color-text-secondary);
    font: inherit;
    font-weight: var(--byz-font-semibold);
    text-decoration: underline;
    cursor: pointer;
  }
  & .recipes__empty {
    color: var(--byz-color-text-secondary);
    font-family: var(--steva-font-script);
    font-size: var(--byz-text-xl);
    text-align: center;
  }
}


/* Resultaat, filters en knoppen staan in het template (gescopet); het SVG-rad wordt door het
   script getekend en krijgt zijn kleuren als attributen. */
.rad[data-wald-977cdf0a]{
  max-width: var(--steva-pagina-breedte);
  margin: 0 auto;
  padding: var(--byz-space-12) var(--steva-pagina-marge) var(--byz-space-24);
}
.rad__filters[data-wald-977cdf0a]{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--byz-space-2);
  margin-bottom: var(--byz-space-12);
}
.rad__filters[hidden][data-wald-977cdf0a], .rad__wheel-wrap[hidden][data-wald-977cdf0a], .rad__result[hidden][data-wald-977cdf0a], .rad__result-card[hidden][data-wald-977cdf0a], .rad__result-empty[hidden][data-wald-977cdf0a], .rad__result-media[hidden][data-wald-977cdf0a]{
  display: none;
}
.rad__filters button[data-wald-977cdf0a]{
  padding: var(--byz-space-2) var(--byz-space-5);
  border: 0;
  border-radius: 999px;
  background: rgb(67 11 0 / 0.55);
  box-shadow: inset 0 0 0 1px var(--byz-color-border);
  color: var(--byz-color-text-secondary);
  font: inherit;
  font-size: var(--byz-text-sm);
  font-weight: var(--byz-font-semibold);
  text-transform: uppercase;
  cursor: pointer;
}
.rad__filters button[aria-pressed="true"][data-wald-977cdf0a]{
  background: var(--byz-color-accent);
  box-shadow: inset 0 -3px 0 var(--steva-oranje-donker);
  color: var(--steva-bordeaux-donker);
}
.rad__stage[data-wald-977cdf0a]{
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--byz-space-12);
  align-items: center;
  justify-items: center;
}

/* Het rad */
.rad__wheel-wrap[data-wald-977cdf0a]{
  position: relative;
  width: min(100%, 30rem);
  aspect-ratio: 1;
}
.rad__wheel[data-wald-977cdf0a]{
  cursor: pointer;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  box-shadow: 0 0 0 6px var(--steva-bordeaux-donker), 0 0 0 8px var(--steva-goud), 0 20px 40px rgb(0 0 0 / 0.45);
  transition: transform 4.6s cubic-bezier(0.15, 0.7, 0.12, 1);
  will-change: transform;
}
.rad__svg[data-wald-977cdf0a]{
  display: block;
  width: 100%;
  height: 100%;
}
/* Wijzer bovenaan: een gouden driehoek die over de rand valt. */
.rad__pointer[data-wald-977cdf0a]{
  position: absolute;
  top: -0.9rem;
  left: 50%;
  z-index: 2;
  width: 2.2rem;
  height: 2.6rem;
  background: var(--steva-goud);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  filter: drop-shadow(0 3px 3px rgb(0 0 0 / 0.5));
  transform: translateX(-50%);
}
.rad__spin[data-wald-977cdf0a]{
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  width: 26%;
  aspect-ratio: 1;
  border: 0;
  border-radius: 50%;
  background: var(--byz-color-accent);
  box-shadow: inset 0 -5px 0 var(--steva-oranje-donker), 0 0 0 5px var(--steva-bordeaux-donker), 0 6px 16px rgb(0 0 0 / 0.4);
  color: var(--steva-bordeaux-donker);
  font: inherit;
  font-size: clamp(var(--byz-text-base), 3vw, var(--byz-text-xl));
  font-weight: var(--byz-font-semibold);
  text-transform: uppercase;
  cursor: pointer;
  transform: translate(-50%, -50%);
}
.rad__spin[data-wald-977cdf0a]:hover:not(:disabled){
  background: var(--steva-oranje-donker);
}
.rad__spin[data-wald-977cdf0a]:active:not(:disabled){
  box-shadow: inset 0 -1px 0 var(--steva-oranje-donker), 0 0 0 5px var(--steva-bordeaux-donker);
  transform: translate(-50%, calc(-50% + 3px));
}
.rad__spin[data-wald-977cdf0a]:disabled{
  cursor: wait;
  opacity: 0.85;
}

/* Uitslag */
.rad__result[data-wald-977cdf0a]{
  display: grid;
  gap: var(--byz-space-6);
  justify-items: center;
  width: min(100%, 26rem);
  text-align: center;
}
.rad__result-empty[data-wald-977cdf0a]{
  color: var(--byz-color-text-muted);
  font-size: var(--byz-text-lg);

  /* De tekst wordt door het script vervangen (zonder scope-attribuut): genest. */
  & strong {
    color: var(--byz-color-text-secondary);
  }
}
.rad__result-card[data-wald-977cdf0a]{
  display: grid;
  gap: var(--byz-space-3);
  justify-items: center;
  width: 100%;
  animation: rad-uitslag 500ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.rad__result-kicker[data-wald-977cdf0a]{
  color: var(--byz-color-accent);
  font-family: var(--steva-font-script);
  font-size: var(--byz-text-xl);
  text-shadow: var(--steva-tekst-schaduw);
}
.rad__result-media[data-wald-977cdf0a]{
  width: 100%;
  overflow: hidden;
  border-radius: 0.875rem;
  box-shadow: 8px 8px 24px rgb(0 0 0 / 0.3);
}
.rad__result-image[data-wald-977cdf0a]{
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.rad__result-title[data-wald-977cdf0a]{
  overflow-wrap: break-word;
  text-wrap: balance;
  font-size: var(--byz-text-3xl);
  font-weight: var(--byz-font-semibold);
  line-height: 1.15;
  letter-spacing: 0;
  text-transform: uppercase;
  text-shadow: var(--steva-tekst-schaduw);
}
.rad__result-meta[data-wald-977cdf0a]{
  color: var(--byz-color-text-secondary);
  font-size: var(--byz-text-sm);
  font-weight: var(--byz-font-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.rad__result-actions[data-wald-977cdf0a]{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--byz-space-3);
  margin-top: var(--byz-space-3);
}
.rad__result-link[data-wald-977cdf0a]{
  padding: var(--byz-space-3) var(--byz-space-6);
  border-radius: 0.5rem;
  background: var(--byz-color-accent);
  box-shadow: inset 0 -4px 0 var(--steva-oranje-donker), 0 2px 8px var(--steva-bordeaux-rand);
  color: var(--steva-bordeaux-donker);
  font-weight: var(--byz-font-semibold);
  text-decoration: none;
  text-transform: uppercase;
}
.rad__result-link[data-wald-977cdf0a]:hover{
  background: var(--steva-oranje-donker);
}
.rad__again[data-wald-977cdf0a], .rad__shuffle[data-wald-977cdf0a]{
  padding: var(--byz-space-3) var(--byz-space-5);
  border: 0;
  border-radius: 0.5rem;
  background: rgb(67 11 0 / 0.55);
  box-shadow: inset 0 0 0 1px var(--byz-color-border);
  color: var(--byz-color-text-secondary);
  font: inherit;
  font-weight: var(--byz-font-semibold);
  text-transform: uppercase;
  cursor: pointer;
}
.rad__shuffle[data-wald-977cdf0a]{
  background: none;
  box-shadow: none;
  font-size: var(--byz-text-sm);
  text-decoration: underline;
  text-transform: none;
}
.rad__again[data-wald-977cdf0a]:hover, .rad__shuffle[data-wald-977cdf0a]:hover{
  color: var(--byz-color-text-primary);
}
.rad__noscript[data-wald-977cdf0a]{
  color: var(--byz-color-text-muted);
  text-align: center;
}
.rad__noscript a[data-wald-977cdf0a]{
  color: var(--byz-color-text-secondary);
}
@keyframes rad-uitslag {
  from { opacity: 0; transform: translateY(1rem) scale(0.97); }
}
@media (prefers-reduced-motion: reduce) {
  .rad__wheel[data-wald-977cdf0a], .rad__result-card[data-wald-977cdf0a]{
    transition: none;
    animation: none;
  }
}
/* Vanaf lg: rad links, uitslag rechts. */
@media (min-width: 1024px) {
  .rad__stage[data-wald-977cdf0a]{
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--byz-space-10);
  }
  .rad__wheel-wrap[data-wald-977cdf0a]{
    grid-column: 1 / span 7;
    justify-self: center;
  }
  .rad__result[data-wald-977cdf0a]{
    grid-column: 8 / span 5;
  }
}


/* Kaarten en uitslagregels worden in de frontmatter of door het script gemaakt: genest gestyled. */
.in-huis[data-wald-ce6bd1d0]{
  max-width: var(--steva-pagina-breedte);
  margin: 0 auto;
  padding: var(--byz-space-12) var(--steva-pagina-marge) var(--byz-space-24);

  & .in-huis__cell[hidden] {
    display: none;
  }
  & .in-huis__cell {
    display: flex;
    flex-direction: column;
    gap: var(--byz-space-3);
  }
  & .in-huis__match {
    display: grid;
    gap: var(--byz-space-1);
    font-size: var(--byz-text-sm);
    line-height: 1.4;
  }
  & .in-huis__have {
    color: var(--byz-color-accent);
    font-weight: var(--byz-font-semibold);
  }
  & .in-huis__missing {
    color: var(--byz-color-text-secondary);
  }
  /* Knoppen uit de frontmatter. */
  & .in-huis__chip {
    padding: var(--byz-space-2) var(--byz-space-4);
    border: 0;
    border-radius: 999px;
    background: rgb(67 11 0 / 0.55);
    box-shadow: inset 0 0 0 1px var(--byz-color-border);
    color: var(--byz-color-text-secondary);
    font: inherit;
    font-size: var(--byz-text-sm);
    font-weight: var(--byz-font-semibold);
    cursor: pointer;
  }
  & .in-huis__chip[aria-pressed="true"] {
    background: var(--byz-color-accent);
    box-shadow: inset 0 -3px 0 var(--steva-oranje-donker);
    color: var(--steva-bordeaux-donker);
  }
  & .in-huis__chip:hover {
    color: var(--byz-color-text-primary);
  }
  & .in-huis__chip[aria-pressed="true"]:hover {
    color: var(--steva-bordeaux-donker);
  }
}
.in-huis__form[hidden][data-wald-ce6bd1d0], .in-huis__chips[hidden][data-wald-ce6bd1d0]{
  display: none;
}
.in-huis__form[data-wald-ce6bd1d0]{
  display: grid;
  gap: var(--byz-space-2);
  width: min(100%, 41.5rem);
  margin: calc(-1 * var(--byz-space-4)) auto 0;
}
.in-huis__label[data-wald-ce6bd1d0]{
  color: var(--byz-color-text-secondary);
  font-size: var(--byz-text-sm);
  font-weight: var(--byz-font-semibold);
  text-align: center;
}
.in-huis__input[data-wald-ce6bd1d0]{
  width: 100%;
  padding: var(--byz-space-3) var(--byz-space-6);
  border: 0;
  border-radius: 2rem;
  background: var(--steva-creme);
  box-shadow: inset 0 2px 4px var(--byz-color-accent), 0 2px 8px var(--steva-bordeaux-rand);
  color: var(--steva-bordeaux-donker);
  font: var(--byz-font-semibold) var(--byz-text-lg) var(--byz-font-serif);
}
.in-huis__input[data-wald-ce6bd1d0]:focus{
  outline: 2px solid var(--byz-color-focus);
  outline-offset: 2px;
}
/* Contrast placeholder op crème: bordeaux op 65% blijft boven 4.5:1 (WCAG AA). */
.in-huis__input[data-wald-ce6bd1d0]::placeholder{
  color: rgb(67 11 0 / 0.65);
  font-weight: var(--byz-font-normal);
}
.in-huis__chips[data-wald-ce6bd1d0]{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--byz-space-2);
  max-width: 50rem;
  margin: var(--byz-space-6) auto 0;
}
.in-huis__status[data-wald-ce6bd1d0]{
  min-height: 1.5em;
  margin: var(--byz-space-8) 0;
  color: var(--byz-color-text-secondary);
  font-weight: var(--byz-font-semibold);
  text-align: center;
}
.in-huis__noscript[data-wald-ce6bd1d0]{
  color: var(--byz-color-text-muted);
  text-align: center;
}
.in-huis__noscript a[data-wald-ce6bd1d0]{
  color: var(--byz-color-text-secondary);
}


.search[data-wald-c59a4ea5]{
  max-width: var(--steva-pagina-breedte);
  margin: 0 auto;
  padding: var(--byz-space-12) var(--steva-pagina-marge) var(--byz-space-24);

  & [data-search][hidden] {
    display: none;
  }
}
.search__form[data-wald-c59a4ea5]{
  display: flex;
  justify-content: center;
  margin-top: calc(-1 * var(--byz-space-4));
}
.search__pantry[data-wald-c59a4ea5]{
  margin-top: var(--byz-space-4);
  font-size: var(--byz-text-sm);
  text-align: center;
}
.search__pantry a[data-wald-c59a4ea5]{
  color: var(--byz-color-text-secondary);
  font-weight: var(--byz-font-semibold);
}
.search__status[data-wald-c59a4ea5]{
  min-height: 1.5em;
  margin: var(--byz-space-6) 0 var(--byz-space-8);
  color: var(--byz-color-text-secondary);
  font-weight: var(--byz-font-semibold);
  text-align: center;
}
.search__empty[data-wald-c59a4ea5]{
  color: var(--byz-color-text-muted);
  text-align: center;
}
.search__empty[hidden][data-wald-c59a4ea5]{
  display: none;
}
.search__empty a[data-wald-c59a4ea5]{
  color: var(--byz-color-text-secondary);
}