.filter { margin-bottom:30px; text-align:center; }
  .checks { display: flex;
      flex-wrap: wrap;

      align-items: center;
      justify-content: center; }
  .checks label { display:flex; align-items:center; gap:15px; cursor:pointer; }
  select {height: 30px; font-size: 16px}
  select,button { padding:9px 20px; border: none; border-radius:7px; background:white; margin: 0 5px; font-family: inherit; }
  button { cursor:pointer; margin-top:20px; }
  button.primary { color:white; background-color: #854B6F; font-size: 14px }
  #status { margin-top:10px; }
  .menu { display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:16px; }
  .gerecht.verbergen { display:none; }
  .allergenenMeldingContainer { border-radius:5px; display: none; background-color: #fbe8e6; font-size: 14px; flex: 0 0 calc(100% + 16px);
  margin-left: -8px; padding: 5px 8px;
  box-sizing: border-box; }
.allergenenMeldingContainer.toon { display:block; }
  /* Meldingen staan standaard uit; JavaScript toggelt alleen de melding(en) die bij selectie horen. */
  .allergenenMelding { display:none; line-height: normal;}
  .allergenenMelding.toon { display:block; }
  .note { margin-top:24px; padding:14px; background:#f4f4f4; border-radius:8px; color:#555; }


     .checkbox-item {
      display: inline-flex;
      align-items: center;
      cursor: pointer;
      user-select: none;
      width: 50%;
    }

    @media only screen and (min-width: 601px) {
.checkbox-item {
      width: 33.3%;
    }

    }

    @media only screen and (min-width: 1024px) {
.checkbox-item {
      width: auto;
    }
    .checks {
              gap: 30px;
    }

    button {
        margin: 0;
    }

    }


    /* Verberg de standaard checkbox, maar behoud toetsenbordbediening */
    .checkbox {
      position: absolute;
      opacity: 0;
      width: 1px;
      height: 1px;
    }

    /* Witte checkbox met paarse rand */
    .checkmark {
      width: 16px;
      height: 16px;
      border: 2px solid #854B6F;
      border-radius: 6px;
      position: relative;
      display: inline-block;
      flex-shrink: 0;
      background: #fff;
      transition: border-color 0.3s ease;
    }

    /* Paars vinkje; mag buiten het vakje uitsteken */
    .checkmark svg {
      width: 26px;
      height: 26px;
      position: absolute;
      top: -4px;
      left: -2px;
      overflow: visible;
      fill: none;
      stroke: #854B6F;
      stroke-width: 3;
      stroke-linecap: round;
      stroke-linejoin: round;
      pointer-events: none;
    }

    /* Vinkje begint verborgen */
    .checkmark path {
      stroke-dasharray: 50;
      stroke-dashoffset: 50;
      transform: translate(0, 0);
      transition:
        stroke-dashoffset 0.3s ease,
        transform 0.4s cubic-bezier(.34, 1.56, .64, 1);
    }

    /* Aangevinkt: witte invulling en paarse rand */
    .checkbox:checked + .checkmark {
      background: #fff;
      border-color: #854B6F;
    }

    /* Teken het vinkje */
    .checkbox:checked + .checkmark path {
      stroke-dashoffset: 0;
    }

    /* Vinkje schiet na het tekenen iets naar linksonder */
    .checkbox:checked + .checkmark path {
      transform: translate(0, -1px);
      transition-delay: 0.2s;
    }

    .checkbox-item:hover .checkmark {
      border-color: #854B6F;
    }

    .checkbox:focus-visible + .checkmark {
      outline: 3px solid ##854B6F;
      outline-offset: 3px;
    }

    @media (prefers-reduced-motion: reduce) {
      .checkmark,
      .checkmark path {
        transition: none;
      }
    }