:root {
  --color-bg: #FAF4EF;
  --color-bg-alt: #F1E1D6;
  --color-salmon: #E68A72;
  --color-salmon-deep: #C96A50;
  --color-salmon-pale: #F6D9CC;
  --color-ink: #3C2E28;
  --color-ink-soft: #7A6963;
  --color-line: #E3CFC3;
  --color-cream: #FFFBF8;
  /* Voor meldingen: een fout in het rood, een korting of bevestiging in het
     groen. Dezelfde tinten als in het beheer. */
  --color-error: #B3382C;
  --color-success: #3C7A4E;

  --font-display: "Fraunces", Georgia, serif;
  --font-body: "Work Sans", -apple-system, BlinkMacSystemFont, sans-serif;

  --container-width: 1120px;
  --header-height: 68px;
}

* { box-sizing: border-box; }

/* Een element met het hidden-attribuut hoort onzichtbaar te zijn. Zonder deze
   regel wint een eigen display-waarde (zoals grid of flex) van de standaard
   van de browser, en blijft het toch staan. */
[hidden] { display: none !important; }


html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-height);
}

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

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

.container {
  width: 100%;
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 1.25rem;
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--color-ink);
  color: var(--color-cream);
  padding: 0.75rem 1.25rem;
  z-index: 200;
  border-radius: 0 0 8px 0;
}
.skip-link:focus {
  left: 0;
}

.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0%;
  background: var(--color-salmon-deep);
  z-index: 250;
}

.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.15;
  color: var(--color-ink);
  margin: 0 0 0.6em;
}

h1 { font-size: clamp(2.1rem, 6vw, 3.4rem); font-weight: 500; }
h2 { font-size: clamp(1.6rem, 4vw, 2.3rem); }
h3 { font-size: 1.2rem; }

p { margin: 0 0 1em; color: var(--color-ink); }

.eyebrow {
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-salmon-deep);
  margin-bottom: 0.8em;
}

a { color: var(--color-salmon-deep); }

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4em;
  padding: 0.9rem 1.7rem;
  border-radius: 999px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.98rem;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, transform 0.15s ease;
}

.btn-primary {
  background: var(--color-salmon-deep);
  color: var(--color-cream);
}
.btn-primary:hover { background: #B15A42; }
.btn-primary:active { transform: scale(0.98); }

/* De tweede knop naast een volle knop. Blijft vlak zodat er één blikvanger is,
   maar met een dunne onderlijn zodat het duidelijk aanklikbaar blijft. */
.btn-text {
  background: transparent;
  color: var(--color-ink);
  padding: 0.9rem 0.6rem;
  text-decoration: underline;
  text-decoration-color: var(--color-line);
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
}

.btn-text:hover {
  color: var(--color-salmon-deep);
  text-decoration-color: var(--color-salmon-deep);
}

.btn-full { width: 100%; }

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

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(250, 244, 239, 0.96);
  border-bottom: 1px solid transparent;
  height: var(--header-height);
  display: flex;
  align-items: center;
}

.site-header.scrolled {
  border-bottom-color: var(--color-line);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  text-decoration: none;
}

.brand-icon {
  display: block;
  width: auto;
  height: 40px;
}

.brand-word {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--color-ink);
  white-space: nowrap;
}

.nav-toggle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}
.nav-toggle span {
  display: block;
  height: 2px;
  width: 24px;
  background: var(--color-ink);
  margin: 0 auto;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}
.nav-toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

.primary-nav {
  position: fixed;
  top: var(--header-height);
  left: 0;
  right: 0;
  background: var(--color-cream);
  border-bottom: 1px solid var(--color-line);
  display: flex;
  flex-direction: column;
  padding: 0.5rem 1.25rem 1.5rem;
  transform: translateY(-8px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.primary-nav.open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.primary-nav a {
  color: var(--color-ink);
  text-decoration: none;
  font-weight: 500;
  padding: 0.85rem 0.2rem;
  border-bottom: 1px solid var(--color-line);
}
.primary-nav a:last-of-type { border-bottom: none; }
.primary-nav a:hover { color: var(--color-salmon-deep); }
.primary-nav a.active { color: var(--color-salmon-deep); font-weight: 600; }

.nav-cta {
  margin-top: 0.6rem;
  background: var(--color-salmon-deep);
  color: var(--color-cream) !important;
  border-radius: 999px;
  text-align: center;
  border-bottom: none !important;
  padding: 0.8rem 1rem !important;
}

/* ---------- Sections ---------- */

.section {
  padding: clamp(3.5rem, 8vw, 6rem) 0;
}

.section-alt {
  background: var(--color-bg-alt);
}

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

.hero {
  padding: clamp(2.5rem, 8vw, 5rem) 0 clamp(3rem, 8vw, 5rem);
}

.hero-inner {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}

.hero-lead {
  font-size: 1.08rem;
  color: var(--color-ink-soft);
  max-width: 46ch;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
  margin-top: 1.6rem;
}

.hero-media {
  position: relative;
}

.blob {
  position: absolute;
  inset: -8% -6%;
  background: var(--color-salmon-pale);
  border-radius: 62% 38% 55% 45% / 48% 42% 58% 52%;
  will-change: transform;
  z-index: 0;
}

.photo-placeholder {
  position: relative;
  z-index: 1;
  aspect-ratio: 4 / 5;
  background: linear-gradient(155deg, var(--color-salmon) 0%, var(--color-salmon-deep) 100%);
  border-radius: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.photo-placeholder span {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.95rem;
  color: var(--color-cream);
  letter-spacing: 0.04em;
  opacity: 0.9;
}

.photo-placeholder--portrait { aspect-ratio: 3 / 4; }
.photo-placeholder--wide { aspect-ratio: 16 / 10; border-radius: 20px; }

.photo {
  display: block;
  position: relative;
  z-index: 1;
  aspect-ratio: 4 / 5;
  border-radius: 24px;
  overflow: hidden;
  background: var(--color-salmon-pale);
}

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

.photo--wide { aspect-ratio: 16 / 10; border-radius: 20px; }
.photo--portrait { aspect-ratio: 3 / 4; }

/* ---------- Over mij ---------- */

.over-mij-grid {
  display: flex;
  flex-direction: column-reverse;
  gap: 2.5rem;
}

.signature {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.15rem;
  color: var(--color-salmon-deep);
  margin-top: 1.4rem;
}

/* ---------- Lessen ---------- */

.lessen-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  margin-top: 2.2rem;
}

.les-card {
  background: var(--color-cream);
  border: 1px solid var(--color-line);
  border-radius: 18px;
  padding: 1.6rem;
}

.les-card h3 { margin-bottom: 0.5em; }
.les-card p:not(.les-meta) { color: var(--color-ink-soft); }

.les-meta {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-salmon-deep);
  margin: 0;
}

/* ---------- Agenda ---------- */

.schedule {
  margin-top: 2.2rem;
  border-top: 1px solid var(--color-line);
}

.schedule-item {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--color-line);
}

.schedule-when {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
}

.schedule-when .day {
  font-weight: 600;
  min-width: 6em;
}

.schedule-when .time {
  color: var(--color-ink-soft);
  font-size: 0.95rem;
}

.schedule-what {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.class-name {
  font-family: var(--font-display);
  font-size: 1.1rem;
}

/* Het aantal plaatsen naast een geboekte les. Blijft op één regel: als
   "1 plaats" afbreekt tot een blokje van twee regels ziet dat er stuk uit. */
.class-level {
  display: inline-block;
  align-self: flex-start;
  white-space: nowrap;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--color-salmon-deep);
  background: var(--color-salmon-pale);
  padding: 0.3rem 0.85rem;
  border-radius: 999px;
  line-height: 1.3;
}

.schedule-note {
  margin-top: 1.3rem;
  font-size: 0.9rem;
  color: var(--color-ink-soft);
}

/* ---------- Testimonials ---------- */

/* De verhalen schuiven horizontaal. Op een breed scherm passen er drie, en
   pas als er meer zijn verschijnen de pijlen. Er beweegt niets automatisch. */
.verhalen-carrousel {
  position: relative;
  margin-top: 2.2rem;
}

.testimonial-rij {
  display: flex;
  gap: 1.5rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding-bottom: 0.4rem;
}

.testimonial-rij::-webkit-scrollbar { display: none; }

.testimonial-rij:focus-visible {
  outline: 2px solid var(--color-salmon-deep);
  outline-offset: 6px;
  border-radius: 18px;
}

.testimonial {
  margin: 0;
  flex: 0 0 85%;
  scroll-snap-align: start;
  background: var(--color-cream);
  border: 1px solid var(--color-line);
  border-radius: 18px;
  padding: 1.7rem;
}

/* Ingetogen ronde knopjes die over de rand van de eerste en laatste kaart
   liggen. Doorschijnend, zodat ze niet met de inhoud concurreren. */
.verhaal-pijl {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 3rem;
  height: 3rem;
  padding: 0;
  display: grid;
  place-items: center;
  border: 1px solid rgba(60, 46, 40, 0.18);
  border-radius: 50%;
  background: rgba(255, 251, 248, 0.9);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: 0 4px 14px rgba(60, 46, 40, 0.16);
  color: var(--color-ink);
  cursor: pointer;
  transition: background-color 0.2s ease, opacity 0.2s ease,
              border-color 0.2s ease, box-shadow 0.2s ease;
}

.verhaal-pijl:hover {
  background: var(--color-cream);
  border-color: var(--color-salmon-deep);
  color: var(--color-salmon-deep);
  box-shadow: 0 6px 18px rgba(60, 46, 40, 0.22);
}

.verhaal-pijl:disabled {
  opacity: 0.4;
  cursor: default;
}

.verhaal-pijl:disabled:hover {
  background: rgba(255, 251, 248, 0.9);
  border-color: rgba(60, 46, 40, 0.18);
  color: var(--color-ink);
  box-shadow: 0 4px 14px rgba(60, 46, 40, 0.16);
}

.verhaal-pijl svg {
  width: 1.3rem;
  height: 1.3rem;
}

.verhaal-pijl--vorige { left: -0.6rem; }
.verhaal-pijl--volgende { right: -0.6rem; }

.testimonial p {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.1rem;
  line-height: 1.5;
  color: var(--color-ink);
  margin-bottom: 0;

  /* Een lange getuigenis wordt afgekapt op vier regels. Zonder deze grens
     bepaalt de langste review de hoogte van alle kaarten in de rij. Wie de
     rest wil lezen, klikt en krijgt het volledige verhaal in een venster. */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  overflow: hidden;
}

.verhaal-meer {
  display: inline-block;
  margin-top: 0.9rem;
  padding: 0;
  border: none;
  background: none;
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-salmon-deep);
  cursor: pointer;
}

.verhaal-meer:hover {
  text-decoration: underline;
}

/* ---------- Eén venster voor de hele site ---------- */

.site-modal {
  width: min(92vw, 36rem);
  max-height: 85vh;
  padding: 2.2rem;
  border: none;
  border-radius: 20px;
  background: var(--color-cream);
  color: var(--color-ink);
  box-shadow: 0 24px 60px rgba(60, 46, 40, 0.28);
  overflow: hidden;
}

.site-modal::backdrop {
  background: rgba(60, 46, 40, 0.45);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}

.site-modal-titel {
  font-family: var(--font-display);
  font-size: 1.5rem;
  line-height: 1.25;
  margin: 0 0 1.2rem;
  color: var(--color-ink);
}

.site-modal-inhoud {
  max-height: calc(85vh - 10rem);
  overflow-y: auto;
  /* Regelovergangen uit een omschrijving blijven zo staan. */
  white-space: pre-line;
}

/* Een getuigenis leest als een citaat, met de naam als titel erboven. */
.site-modal-citaat {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.15rem;
  line-height: 1.6;
}

/* Een gewone tekst met tussenkopjes, zoals de privacyverklaring. */
.site-modal-tekst {
  white-space: normal;
  font-size: 0.98rem;
  line-height: 1.65;
}

.site-modal-tekst p { margin: 0 0 1rem; }
.site-modal-tekst p:last-child { margin-bottom: 0; }

.site-modal-tekst h3 {
  font-family: var(--font-display);
  font-size: 1.05rem;
  margin: 1.6rem 0 0.4rem;
  color: var(--color-salmon-deep);
}

.site-modal-tekst a { color: var(--color-salmon-deep); }

/* De eerste regel hoort tegen de titel aan te staan, niet een kopje lager. */
.site-modal-tekst > *:first-child { margin-top: 0; }

/* Opsommingen in de praktische afspraken. Een klein bolletje in de merkkleur
   in plaats van het standaardpuntje van de browser, dat te hard aankomt. */
.site-modal-tekst ul {
  margin: 0 0 1rem;
  padding: 0 0 0 1rem;
  list-style: none;
}

.site-modal-tekst li {
  position: relative;
  margin-bottom: 0.45rem;
}

.site-modal-tekst li:last-child { margin-bottom: 0; }

.site-modal-tekst li::before {
  content: "";
  position: absolute;
  left: -1rem;
  top: 0.62em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--color-salmon-deep);
}

.site-modal-sluiten {
  display: block;
  margin: 1.8rem 0 0 auto;
  padding: 0.55rem 1.3rem;
  border: 1px solid var(--color-line);
  border-radius: 999px;
  background: transparent;
  font-family: var(--font-body);
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--color-ink);
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.site-modal-sluiten:hover {
  background: var(--color-bg);
  border-color: var(--color-salmon);
}

/* Een tekstknop in de voettekst, zoals de link naar de privacyverklaring. */
.footer-link {
  padding: 0;
  border: none;
  background: none;
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  text-decoration: underline;
  cursor: pointer;
}

.footer-link:hover { color: var(--color-salmon); }

/* ---------- Mijn inschrijvingen ---------- */

/* Een eigen, rustige pagina: geen hero, geen tegels, alleen wat van jou is. */
.mijn-pagina {
  padding: clamp(2rem, 6vw, 4rem) 0 clamp(3rem, 8vw, 5rem);
}

.mijn-pagina .container { max-width: 44rem; }

.mijn-pagina h1 { margin-bottom: 0.4em; }

.mijn-lead {
  color: var(--color-ink-soft);
  margin-bottom: 2rem;
  max-width: 40ch;
}

.mijn-melding {
  background: var(--color-bg-alt);
  border-radius: 12px;
  padding: 0.9rem 1.1rem;
  font-size: 0.95rem;
  line-height: 1.55;
  margin-bottom: 1.6rem;
}

.mijn-melding.is-fout {
  background: #F7E3E0;
  color: #8E2F24;
}

.mijn-klein {
  font-size: 0.85rem;
  line-height: 1.55;
  color: var(--color-ink-soft);
}

/* ---------- Een link aanvragen ---------- */

.mijn-aanvraag label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.mijn-rij {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: 0.8rem;
}

.mijn-rij input {
  flex: 1 1 14rem;
  min-width: 0;
  padding: 0.85rem 1.1rem;
  border: 1px solid var(--color-line);
  border-radius: 999px;
  font-family: inherit;
  font-size: 1rem;
  background: var(--color-cream);
  color: var(--color-ink);
}

.mijn-rij input:focus {
  outline: none;
  border-color: var(--color-salmon-deep);
  box-shadow: 0 0 0 3px rgba(201, 106, 80, 0.16);
}

.mijn-rij .btn { width: auto; }

/* ---------- Wat je geboekt hebt ---------- */

.mijn-blok { margin-bottom: 2.6rem; }

.mijn-blok h2 {
  font-size: 1.15rem;
  margin-bottom: 0.9rem;
}

.mijn-leeg { color: var(--color-ink-soft); }

.mijn-lijst {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.7rem;
}

.mijn-lijst li {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.8rem;
  background: var(--color-cream);
  border: 1px solid var(--color-line);
  border-radius: 14px;
  padding: 1rem 1.2rem;
}

.mijn-lijst--stil li { background: none; opacity: 0.75; }

.mijn-wat { display: grid; gap: 0.2rem; }

.mijn-titel {
  font-family: var(--font-display);
  font-size: 1.08rem;
}

.mijn-wanneer {
  font-size: 0.88rem;
  color: var(--color-ink-soft);
}

.mijn-vlag {
  justify-self: start;
  margin-top: 0.2rem;
  background: #FBEEDC;
  color: #96601F;
  border-radius: 999px;
  padding: 0.1rem 0.65rem;
  font-size: 0.75rem;
  font-weight: 600;
}

.mijn-zijkant {
  display: grid;
  gap: 0.35rem;
  justify-items: end;
  text-align: right;
}

.mijn-bedrag { font-weight: 600; white-space: nowrap; }

.mijn-afmeld {
  background: none;
  border: 1px solid var(--color-line);
  border-radius: 999px;
  padding: 0.35rem 0.9rem;
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--color-ink-soft);
  cursor: pointer;
}

.mijn-afmeld:hover {
  border-color: var(--color-salmon-deep);
  color: var(--color-salmon-deep);
}

/* ---------- Eigen gegevens ---------- */

.mijn-formulier { display: grid; gap: 0.9rem; }

.mijn-formulier label {
  display: grid;
  gap: 0.35rem;
  font-size: 0.85rem;
  font-weight: 600;
}

.mijn-formulier input {
  padding: 0.75rem 1rem;
  border: 1px solid var(--color-line);
  border-radius: 10px;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 400;
  background: var(--color-cream);
  color: var(--color-ink);
}

.mijn-formulier input:focus {
  outline: none;
  border-color: var(--color-salmon-deep);
  box-shadow: 0 0 0 3px rgba(201, 106, 80, 0.16);
}

.mijn-formulier .btn { justify-self: start; width: auto; }

.mijn-paar { display: grid; gap: 0.9rem; }

@media (min-width: 560px) {
  .mijn-paar { grid-template-columns: 1fr 1fr; }
  .mijn-paar--drie { grid-template-columns: 1fr 1fr 1fr; }
}

.mijn-uitloggen button {
  background: none;
  border: none;
  padding: 0;
  font-family: inherit;
  font-size: 0.88rem;
  color: var(--color-ink-soft);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.mijn-uitloggen button:hover { color: var(--color-salmon-deep); }

/* De omschrijving op een lestegel: vier regels, de rest in het venster. */
.les-uitleg {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  overflow: hidden;
}

.les-meer { margin-top: 0.4rem; }

@media (prefers-reduced-motion: no-preference) {
  .site-modal[open] {
    animation: modalOpen 0.24s ease-out;
  }

  @keyframes modalOpen {
    from {
      opacity: 0;
      transform: translateY(10px) scale(0.98);
    }
  }
}

.reviews-link {
  margin: 2rem 0 0;
}

.reviews-link a {
  color: var(--color-salmon-deep);
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
}
.reviews-link a:hover { color: var(--color-ink); }

/* ---------- Locatie ---------- */

.locatie-grid {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}

.locatie-adres {
  font-family: var(--font-display);
  font-size: 1.3rem;
}

/* ---------- Inschrijven ---------- */

.inschrijven-grid {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}

.contact-direct {
  margin-top: 1.6rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--color-line);
}

.contact-direct p {
  display: flex;
  gap: 0.6rem;
  font-size: 0.95rem;
}

.contact-direct span {
  min-width: 6em;
  font-weight: 600;
  color: var(--color-salmon-deep);
}

.signup-form {
  background: var(--color-cream);
  border: 1px solid var(--color-line);
  border-radius: 20px;
  padding: 1.6rem;
}

.form-row {
  margin-bottom: 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.form-row label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-ink-soft);
}

.form-row input,
.form-row select,
.form-row textarea {
  font-family: var(--font-body);
  font-size: 1rem;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--color-line);
  border-radius: 10px;
  background: var(--color-bg);
  color: var(--color-ink);
}

.form-row input:focus,
.form-row select:focus,
.form-row textarea:focus {
  outline: 2px solid var(--color-salmon);
  outline-offset: 1px;
}

.form-note {
  margin: 0.9rem 0 0;
  font-size: 0.9rem;
  color: var(--color-salmon-deep);
  min-height: 1.2em;
}

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

.site-footer {
  background: var(--color-ink);
  color: var(--color-bg);
  padding: 3rem 0 2rem;
}

/* De globale p-regel zet tekst donkerbruin; in de donkere footer moet
   die de lichte kleur van de footer zelf overnemen. */
.site-footer p {
  color: inherit;
}

.footer-cols {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  padding-bottom: 2rem;
  align-items: start;
}

.footer-tagline {
  font-size: 0.92rem;
  opacity: 0.7;
  max-width: 34ch;
  line-height: 1.6;
}

.footer-col p { margin: 0 0 0.6em; }

.footer-brand {
  font-family: var(--font-display);
  font-size: 1.3rem;
  color: var(--color-bg);
  margin-bottom: 0.8rem;
}

.footer-col-title {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-salmon-pale);
  opacity: 0.9;
  margin-bottom: 0.9em;
}

.footer-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.5rem;
}

/* Twee smalle kolommen: houdt de sitemap even hoog als de kolommen ernaast. */
.footer-links--split {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem 1.2rem;
}

.footer-links a,
.footer-contact a {
  color: var(--color-bg);
  opacity: 0.8;
  text-decoration: none;
  font-size: 0.92rem;
}
.footer-links a:hover,
.footer-contact a:hover { opacity: 1; color: var(--color-salmon-pale); }

.footer-contact {
  font-size: 0.92rem;
  opacity: 0.8;
  line-height: 1.6;
}

.footer-legal {
  border-top: 1px solid rgba(250, 244, 239, 0.15);
  padding-top: 1.4rem;
}

.footer-legal p {
  font-size: 0.8rem;
  opacity: 0.6;
  margin: 0 0 0.35em;
}

.footer-copy {
  font-size: 0.8rem;
  opacity: 0.6;
  margin: 0;
}

.footer-made {
  text-align: center;
  font-size: 0.8rem;
  opacity: 0.55;
  margin: 1.6rem 0 0;
}

.footer-made a {
  color: var(--color-salmon-pale);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
}
.footer-made a:hover { opacity: 1; }

/* ================= Tablet & up ================= */

@media (min-width: 640px) {
  .lessen-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-cols { grid-template-columns: 1.5fr 1.3fr 1fr; gap: 3rem; }
  /* Drie kaarten naast elkaar, met de twee tussenruimtes eraf gerekend. */
  .testimonial { flex-basis: calc((100% - 3rem) / 3); }
}

@media (min-width: 780px) {
  .nav-toggle { display: none; }

  .primary-nav {
    position: static;
    flex-direction: row;
    align-items: center;
    gap: 1.8rem;
    padding: 0;
    background: transparent;
    border-bottom: none;
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }

  .primary-nav a {
    border-bottom: none;
    padding: 0.3rem 0;
    font-size: 0.96rem;
  }

  .nav-cta {
    margin-top: 0;
    padding: 0.6rem 1.3rem !important;
  }

  .hero-inner {
    flex-direction: row;
    align-items: center;
  }
  .hero-text { flex: 1; }
  .hero-media { flex: 1; max-width: 420px; }

  .over-mij-grid {
    flex-direction: row;
    align-items: center;
  }
  .over-mij-media { flex: 0 0 38%; }
  .over-mij-text { flex: 1; }

  .locatie-grid {
    flex-direction: row;
    align-items: center;
  }
  .locatie-text { flex: 1; }
  .locatie-media { flex: 1; }

  .inschrijven-grid {
    flex-direction: row;
    align-items: flex-start;
  }
  .inschrijven-intro { flex: 1; }
  .inschrijven-media { flex: 1; max-width: 420px; }
  .signup-form { flex: 1; max-width: 460px; }
}

@media (min-width: 1024px) {
  .lessen-grid { grid-template-columns: repeat(4, 1fr); }

  .schedule-item {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
  .schedule-when { min-width: 16em; }
  .schedule-what { flex: 0 0 auto; }
}

/* ================= Boekpagina (winkelmandje) ================= */

.header-controls {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

.cart-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--color-ink);
  color: var(--color-cream);
  border: none;
  border-radius: 999px;
  padding: 0.55rem 1rem;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
}

.cart-count {
  background: var(--color-salmon);
  color: var(--color-cream);
  border-radius: 999px;
  min-width: 1.4em;
  height: 1.4em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  padding: 0 0.3em;
}

.boek-intro {
  padding-bottom: 0;
}

.boek-lead {
  color: var(--color-ink-soft);
  max-width: 56ch;
  font-size: 1.05rem;
}

.boek-empty {
  color: var(--color-ink-soft);
  background: var(--color-cream);
  border: 1px solid var(--color-line);
  border-radius: 16px;
  padding: 1.6rem;
  margin: 0;
}

/* Balk voor wie ingelogd is op het beheer: die ziet meer dan een bezoeker,
   en moet dat weten voor hij denkt dat de site al open staat. */
.voorbeeld-balk {
  background: var(--color-ink);
  color: #fff;
  text-align: center;
  padding: 0.6rem 1.2rem;
  font-size: 0.85rem;
  line-height: 1.5;
}

.voorbeeld-balk a {
  color: #fff;
  text-decoration: underline;
  margin-left: 0.4rem;
}

/* Staat online inschrijven uit, dan blijft het aanbod staan en komt hier de
   uitleg. Eén keer boven de tegels, niet op elke tegel opnieuw. */
.boek-melding {
  color: var(--color-ink);
  background: var(--color-cream);
  border: 1px solid var(--color-line);
  border-radius: 16px;
  padding: 1.1rem 1.4rem;
  margin: 0 0 2rem;
  font-size: 0.95rem;
}

.shop {
  padding-top: clamp(2rem, 5vw, 3rem);
}

.product-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.1rem;
}

.product-card {
  background: var(--color-cream);
  border: 1px solid var(--color-line);
  border-radius: 18px;
  padding: 1.4rem;
  display: flex;
  flex-direction: column;
}

.product-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.6rem;
}

.product-top h3 { margin-bottom: 0.3em; }

.product-price {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--color-salmon-deep);
  white-space: nowrap;
  margin: 0;
}

.product-desc {
  color: var(--color-ink-soft);
  font-size: 0.95rem;
}

.product-meta {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--color-ink-soft);
  margin: 0 0 1rem;
}

.btn-add {
  width: 100%;
  margin-top: auto;
  background: var(--color-salmon-pale);
  color: var(--color-salmon-deep);
}
.btn-add:hover:not(:disabled) { background: var(--color-salmon); color: var(--color-cream); }
.btn-add:disabled { opacity: 0.5; cursor: not-allowed; }

/* ---------- Winkelmandje-lade ---------- */

.cart-overlay {
  position: fixed;
  inset: 0;
  background: rgba(60, 46, 40, 0.45);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
  z-index: 150;
}

.cart-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}

.cart-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(400px, 100%);
  background: var(--color-cream);
  z-index: 200;
  transform: translateX(100%);
  transition: transform 0.28s ease;
  display: flex;
  flex-direction: column;
  box-shadow: -12px 0 32px rgba(60, 46, 40, 0.12);
}

.cart-drawer.is-open { transform: translateX(0); }

.cart-view {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.cart-view[hidden] { display: none; }

.cart-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.2rem 1.4rem;
  border-bottom: 1px solid var(--color-line);
}

.cart-header h2 { margin: 0; }

.cart-close, .cart-back {
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-body);
  color: var(--color-ink-soft);
}

.cart-close {
  font-size: 1.6rem;
  line-height: 1;
  padding: 0.2rem 0.4rem;
}

.cart-back {
  font-size: 0.9rem;
  font-weight: 600;
}

.cart-items {
  flex: 1;
  overflow-y: auto;
  padding: 1rem 1.4rem;
}

.cart-empty {
  color: var(--color-ink-soft);
  font-size: 0.95rem;
}

.cart-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  padding: 0.8rem 0;
  border-bottom: 1px solid var(--color-line);
}

.cart-item p { margin: 0; }

.cart-item-name {
  font-weight: 500;
  font-size: 0.92rem;
}

.cart-item-price {
  font-size: 0.85rem;
  color: var(--color-ink-soft);
}

.cart-item-qty {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.qty-btn {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid var(--color-line);
  background: var(--color-bg);
  color: var(--color-ink);
  cursor: pointer;
  font-size: 0.95rem;
  line-height: 1;
}

.cart-footer {
  padding: 1.2rem 1.4rem 1.6rem;
  border-top: 1px solid var(--color-line);
}

.cart-subtotal {
  display: flex;
  justify-content: space-between;
  font-weight: 600;
  margin-bottom: 1rem;
}

/* Wat er betaald werd, onder de bevestiging. */
.bedrag-regel {
  font-size: 0.9rem;
  color: var(--color-ink-soft);
  margin-bottom: 1.6rem;
}

/* Lesgeld en reservatiekost apart, zodat het totaal geen verrassing is. */
.cart-regel {
  display: flex;
  justify-content: space-between;
  font-size: 0.9rem;
  color: var(--color-ink-soft);
  margin-bottom: 0.4rem;
}

.cart-regel + .cart-subtotal {
  padding-top: 0.7rem;
  border-top: 1px solid var(--color-line);
}

.checkout-form {
  padding: 1.4rem;
  overflow-y: auto;
}

.checkout-form h2 { font-size: 1.3rem; }

/* ---------- Bedankpagina ---------- */

.status-wrap {
  min-height: 70vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1.25rem;
}

.status-card {
  background: var(--color-cream);
  border: 1px solid var(--color-line);
  border-radius: 20px;
  padding: 2.5rem 2rem;
  max-width: 480px;
  text-align: center;
}

.status-card p { color: var(--color-ink-soft); }

@media (min-width: 640px) {
  .product-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .product-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- Sociale media in de footer ---------- */

.footer-social {
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem;
  margin: 0 0 1rem;
}

.footer-social a {
  color: var(--color-bg);
  opacity: 0.8;
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 600;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
}
.footer-social a:hover { opacity: 1; color: var(--color-salmon-pale); }

/* ================= Events & workshops ================= */

.event-lijst {
  margin-top: 2.2rem;
  border-top: 1px solid var(--color-line);
}

.event-card {
  border-bottom: 1px solid var(--color-line);
}

/* ---------- De regel die je aanklikt ---------- */

.event-trigger {
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  background: none;
  border: none;
  text-align: left;
  padding: 1.3rem 0;
  cursor: pointer;
  font-family: var(--font-body);
  color: var(--color-ink);
}

.event-samenvatting {
  display: grid;
  gap: 0.4rem;
}

.event-soort {
  justify-self: start;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-salmon-deep);
  background: var(--color-salmon-pale);
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
}

.event-titel {
  font-family: var(--font-display);
  font-size: 1.25rem;
  line-height: 1.25;
}

.event-regel {
  font-size: 0.92rem;
  color: var(--color-ink-soft);
}

.event-extra {
  color: var(--color-salmon-deep);
}

.event-icoon {
  flex: 0 0 auto;
  font-family: var(--font-display);
  font-size: 1.4rem;
  line-height: 1;
  color: var(--color-salmon-deep);
  transition: transform 0.2s ease;
  margin-top: 1.6rem;
}

.event-trigger[aria-expanded="true"] .event-icoon {
  transform: rotate(45deg);
}

/* ---------- Het uitklapbare gedeelte ---------- */

.event-panel {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.3s ease;
}

.event-panel-inner {
  padding-bottom: 1.6rem;
  max-width: 44rem;
}

.event-omschrijving {
  color: var(--color-ink-soft);
  font-size: 0.97rem;
}

.event-gesloten {
  color: var(--color-ink-soft);
  font-size: 0.95rem;
  margin: 0;
}

.event-datums {
  border: none;
  padding: 0;
  margin: 0 0 1.1rem;
}

.event-datums legend {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-ink-soft);
  padding: 0;
  margin-bottom: 0.3rem;
}

.event-datum {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.45rem 0;
  font-size: 0.95rem;
  cursor: pointer;
}

.event-datum input {
  margin-top: 0.35rem;
  accent-color: var(--color-salmon-deep);
  width: auto;
}

.event-datum.is-vol {
  color: var(--color-ink-soft);
  cursor: default;
}

.event-vol {
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-ink-soft);
  margin-left: 0.4rem;
}

.event-keuzes {
  display: grid;
  gap: 0.9rem;
  margin-bottom: 1.1rem;
}

.event-veld {
  display: grid;
  gap: 0.35rem;
}

.event-veld > span {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--color-ink-soft);
}

.event-veld select,
.event-veld input {
  font-family: var(--font-body);
  font-size: 0.97rem;
  padding: 0.65rem 0.8rem;
  border: 1px solid var(--color-line);
  border-radius: 10px;
  background: var(--color-bg);
  color: var(--color-ink);
  width: 100%;
}

.event-add {
  width: auto;
  padding-left: 2rem;
  padding-right: 2rem;
}

.event-melding {
  margin: 0.7rem 0 0;
  font-size: 0.9rem;
  color: var(--color-salmon-deep);
  min-height: 1.2em;
}

.cart-item-extra {
  font-size: 0.82rem;
  color: var(--color-salmon-deep);
}

@media (prefers-reduced-motion: reduce) {
  .event-panel { transition: none; }
  .event-icoon { transition: none; }
}

@media (min-width: 640px) {
  .event-samenvatting {
    grid-template-columns: auto 1fr;
    align-items: baseline;
    gap: 0.4rem 0.9rem;
  }
  .event-soort { grid-row: span 2; align-self: center; }
  .event-icoon { margin-top: 0.3rem; }
  .event-keuzes { grid-template-columns: 1fr 1fr; align-items: end; }
}

/* ================= Lestegels ================= */

.les-kaart {
  gap: 0;
}

/* ---------- De lestegel ----------
   Van boven naar onder: de titel, wanneer het doorgaat, de periode, de
   uitleg, en onderaan een voet met de prijs naast de knop. Die voet wordt
   naar beneden geduwd, zodat prijs en knop van alle tegels op één lijn
   staan hoe lang de uitleg ook is. */

.les-titel {
  font-size: 1.35rem;
  line-height: 1.2;
  margin: 0 0 0.35rem;
}

/* Wanneer het doorgaat: klein en vet, in de merkkleur zodat het als een
   aanduiding leest en niet als een tweede titel. */
.les-wanneer {
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--color-salmon-deep);
  margin: 0 0 1rem;
}

/* Volgt de lijst met reeksen erop, dan horen die bij elkaar en mag er
   geen witruimte tussen. */
.les-wanneer:has(+ .les-reeksen) {
  margin-bottom: 0.25rem;
}

/* Elke reeks op een eigen regel: wanneer ze doorgaat, met de periode eronder.
   Een samenvatting van alle reeksen samen las als één doorlopende reeks,
   terwijl je er per stuk voor inschrijft.

   Dezelfde merkkleur als bij een losse les: het is dezelfde soort informatie,
   dus hoort ze er ook hetzelfde uit te zien. */
.les-reeksen {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--color-salmon-deep);
}

.les-reeksen li {
  margin-bottom: 0.4rem;
}

.les-reeksen li:last-child { margin-bottom: 0; }

/* De periode en het aantal lessen: eronder, in dezelfde kleur maar rustiger,
   zodat de weekdag en het uur vooraan blijven staan. */
.reeks-periode {
  display: block;
  font-weight: 500;
  opacity: 0.85;
}

/* Een volle reeks blijft leesbaar maar stapt op de achtergrond, zodat het oog
   naar de reeks gaat waar nog plaats is. */
.les-reeksen li.is-vol { opacity: 0.7; }

.reeks-vlag {
  display: inline-block;
  margin-left: 0.25rem;
  border-radius: 999px;
  padding: 0.05rem 0.5rem;
  background: var(--color-bg-alt);
  color: var(--color-ink-soft);
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  vertical-align: 1px;
}

.les-reeksen li.reeks-meer {
  font-style: italic;
  opacity: 0.8;
}

.les-reeksen li.reeks-meer::before { display: none; }

.les-kaart .product-desc {
  font-size: 0.93rem;
  line-height: 1.6;
  margin: 0;
}

.les-voet {
  margin-top: auto;
  padding-top: 1.1rem;
  border-top: 1px solid var(--color-line);
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.8rem 1rem;
}

/* De prijs draagt de tegel, dus in het schreeflettertype en in inktkleur.
   Zalm is voor de knop, anders vechten die twee om aandacht. */
.les-prijs {
  font-family: var(--font-display);
  font-size: 1.45rem;
  line-height: 1.1;
  color: var(--color-ink);
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

/* De leeftijdstarieven zijn bijzaak: klein en rustig, onder het bedrag. */
.les-tarieven {
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 500;
  line-height: 1.4;
  color: var(--color-ink-soft);
}

/* In de voet is de knop geen volle balk meer maar een knop naast de prijs. */
.les-voet .btn-add {
  width: auto;
  margin-top: 0;
  padding: 0.7rem 1.4rem;
  font-size: 0.92rem;
}

.les-voet .event-gesloten { margin: 0; }

/* De tegel is een kolom, dus zonder dit rekt de knop over de volle breedte
   en komt "Lees meer" in het midden te staan in plaats van links. */
.les-kaart .les-meer {
  align-self: flex-start;
  margin: 0.5rem 0 1.2rem;
}
.les-kaart .product-desc + .les-voet { margin-top: 1.2rem; }

.les-moment-enkel {
  font-size: 0.95rem;
  margin: 0 0 1.2rem;
  padding: 0.7rem 0.9rem;
  background: var(--color-bg);
  border-radius: 12px;
}

/* ---------- Keuze uit meerdere momenten ---------- */

.momenten {
  border: none;
  padding: 0;
  margin: 0 0 1.1rem;
  display: grid;
  gap: 0.4rem;
}

.momenten legend {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--color-ink-soft);
  padding: 0;
  margin-bottom: 0.5rem;
}

.moment {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--color-line);
  border-radius: 12px;
  background: var(--color-bg);
  font-size: 0.95rem;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.moment:hover { border-color: var(--color-salmon); }

.moment input {
  accent-color: var(--color-salmon-deep);
  width: auto;
  margin: 0;
}

.moment:has(input:checked) {
  border-color: var(--color-salmon-deep);
  background: var(--color-salmon-pale);
}

.moment.is-vol {
  color: var(--color-ink-soft);
  cursor: default;
  opacity: 0.65;
}
.moment.is-vol:hover { border-color: var(--color-line); }

.moment-tekst { flex: 1; }

.moment-vol {
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ---------- Tarief ---------- */

.les-tarief {
  display: grid;
  gap: 0.35rem;
  margin-bottom: 1.1rem;
}

.les-tarief > span {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--color-ink-soft);
}

.les-tarief select {
  font-family: var(--font-body);
  font-size: 0.95rem;
  padding: 0.6rem 0.8rem;
  border: 1px solid var(--color-line);
  border-radius: 12px;
  background: var(--color-bg);
  color: var(--color-ink);
  width: 100%;
}

/* ---------- Keuzescherm in het uitschuifvenster ---------- */

.kies-inhoud {
  flex: 1;
  overflow-y: auto;
  padding: 1.2rem 1.4rem;
}

.kies-inhoud .momenten { margin-bottom: 1.4rem; }
.kies-inhoud .les-tarief { margin-bottom: 1.2rem; }

/* Eerst welke reeks, dan wat daarbinnen. Een lijn houdt de twee keuzes uit
   elkaar, anders lijkt het één lange lijst met keuzerondjes. */
.kies-inhoud .reeksen {
  margin-bottom: 1.5rem;
  padding-bottom: 1.3rem;
  border-bottom: 1px solid var(--color-line);
}

.kies-inhoud .les-tarief input {
  font-family: var(--font-body);
  font-size: 0.95rem;
  padding: 0.6rem 0.8rem;
  border: 1px solid var(--color-line);
  border-radius: 12px;
  background: var(--color-bg);
  color: var(--color-ink);
  width: 100%;
}

/* ================= Inschrijfpagina ================= */

/* De gegevens staan op een eigen pagina omdat tien verplichte velden niet in
   de smalle uitschuiflade passen. Links het formulier, rechts wat je boekt. */
.inschrijf-wrap {
  padding: clamp(2rem, 6vw, 4rem) 0 clamp(3rem, 8vw, 5rem);
}

.inschrijf-grid {
  display: grid;
  gap: 2.5rem;
  align-items: start;
}

@media (min-width: 900px) {
  .inschrijf-grid {
    grid-template-columns: 1fr 20rem;
    gap: 3.5rem;
  }
}

.inschrijf-form h1 { margin-bottom: 0.4rem; }

.inschrijf-uitleg {
  color: var(--color-ink-soft);
  margin-bottom: 2rem;
}

.msg-fout {
  background: #F7E3E0;
  border: 1px solid #E8BFB8;
  border-radius: 12px;
  padding: 0.9rem 1.1rem;
  margin-bottom: 1.6rem;
  font-size: 0.95rem;
}

.gegevens-form { display: grid; gap: 1.1rem; }

.veld { display: grid; gap: 0.35rem; }

.veld > span,
.veld-titel {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-ink-soft);
}

.veld input,
.datum-drie select {
  font-family: var(--font-body);
  font-size: 1rem;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--color-line);
  border-radius: 12px;
  background: var(--color-cream);
  color: var(--color-ink);
  width: 100%;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.veld input:focus,
.datum-drie select:focus {
  outline: none;
  border-color: var(--color-salmon-deep);
  box-shadow: 0 0 0 3px rgba(201, 106, 80, 0.16);
}

/* Twee velden naast elkaar, maar op een telefoon onder elkaar. */
.veld-duo { display: grid; gap: 1.1rem; }

@media (min-width: 560px) {
  .veld-duo { grid-template-columns: 1fr 1fr; }
  .veld-duo--straat { grid-template-columns: 3fr 1fr; }
  .veld-duo--postcode { grid-template-columns: 1fr 2fr; }
}

/* Dag, maand en jaar apart: zo staat de maand voluit en is er nooit twijfel
   of 07/09 juli of september is. */
.datum-drie {
  display: grid;
  grid-template-columns: 5rem 1fr 6rem;
  gap: 0.5rem;
}

.datum-drie select {
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23C96A50' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.7rem center;
  background-size: 0.7rem;
  padding-right: 2rem;
  cursor: pointer;
}

.gegevens-form .btn { margin-top: 0.6rem; }

.inschrijf-klein {
  font-size: 0.85rem;
  color: var(--color-ink-soft);
  margin: 0.4rem 0 0;
}

/* Rechterkolom: wat er geboekt wordt, blijft meescrollen op een breed scherm. */
.inschrijf-overzicht {
  background: var(--color-cream);
  border: 1px solid var(--color-line);
  border-radius: 18px;
  padding: 1.5rem;
}

@media (min-width: 900px) {
  .inschrijf-overzicht { position: sticky; top: calc(var(--header-height) + 1.5rem); }
}

.inschrijf-overzicht h2 {
  font-size: 1.15rem;
  margin-bottom: 1.2rem;
}

.overzicht-regel {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.8rem 0;
  border-top: 1px solid var(--color-line);
}

.overzicht-titel {
  font-weight: 600;
  margin: 0 0 0.2rem;
  font-size: 0.95rem;
}

.overzicht-wanneer {
  font-size: 0.85rem;
  color: var(--color-ink-soft);
  margin: 0;
}

.overzicht-prijs {
  margin: 0;
  white-space: nowrap;
  font-size: 0.95rem;
}

.overzicht-tussen {
  display: flex;
  justify-content: space-between;
  font-size: 0.9rem;
  color: var(--color-ink-soft);
  padding: 0.6rem 0 0;
}

.overzicht-totaal {
  display: flex;
  justify-content: space-between;
  margin-top: 0.7rem;
  padding-top: 0.7rem;
  border-top: 2px solid var(--color-ink);
  font-family: var(--font-display);
  font-size: 1.2rem;
}

/* In het mandje staat nu één plaats per regel, met een knopje om ze weg te
   halen in plaats van een aantal. */
.cart-weg {
  align-self: start;
  padding: 0;
  border: none;
  background: none;
  font-family: var(--font-body);
  font-size: 0.82rem;
  color: var(--color-ink-soft);
  text-decoration: underline;
  cursor: pointer;
}

.cart-weg:hover { color: var(--color-salmon-deep); }


/* ==========================================================================
   Lessenrooster
   Alle lesdagen op één pagina. De maand staat links, de dagen ernaast als
   losse vakjes: zo zie je in één oogopslag hoeveel lessen er in een maand
   vallen en waar er een week uitvalt. Voorbije dagen blijven staan maar
   vervagen, anders lijkt een lopende reeks ineens korter dan hij is.
   ========================================================================== */

.rooster-pagina {
  padding: clamp(2rem, 6vw, 4rem) 0 clamp(3rem, 8vw, 5rem);
}

.rooster-pagina .container { max-width: 52rem; }

.rooster-pagina h1 { margin-bottom: 0.35em; }

.rooster-lead {
  color: var(--color-ink-soft);
  margin-bottom: 1.4rem;
  max-width: 46ch;
}

.rooster-melding {
  background: var(--color-bg-alt);
  border-radius: 12px;
  padding: 0.9rem 1.1rem;
  font-size: 0.95rem;
  line-height: 1.55;
  margin-bottom: 1.6rem;
}

/* ---------- Wie er kijkt ---------- */

.rooster-herkend {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem;
  margin-bottom: 2.4rem;
  padding: 0.8rem 1.1rem;
  border: 1px solid var(--color-line);
  border-radius: 12px;
  background: var(--color-cream);
  font-size: 0.9rem;
}

.rooster-herkend--vraag { color: var(--color-ink-soft); }

.rooster-herkend a {
  color: var(--color-salmon-deep);
  font-weight: 600;
}

/* ---------- Eén les ---------- */

.rooster-les {
  padding-top: 1.8rem;
  margin-bottom: 1.8rem;
  border-top: 1px solid var(--color-line);
}

.rooster-les:first-of-type { border-top: none; padding-top: 0; }

.rooster-les > h2 {
  font-size: clamp(1.3rem, 3.5vw, 1.65rem);
  margin-bottom: 1rem;
}

.rooster-reeks { margin-bottom: 1.4rem; }

.rooster-reeks-naam {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-ink-soft);
  margin-bottom: 0.6rem;
}

/* ---------- Eén groep binnen een reeks ---------- */

.rooster-groep {
  background: var(--color-cream);
  border: 1px solid var(--color-line);
  border-radius: 14px;
  padding: 1rem 1.2rem;
  margin-bottom: 0.7rem;
}

/* Waar je zelf voor ingeschreven staat, springt eruit zonder te schreeuwen. */
.rooster-groep.is-van-mij {
  border-color: var(--color-salmon-deep);
  box-shadow: inset 3px 0 0 var(--color-salmon-deep);
}

.rooster-groep-kop {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.7rem;
}

.rooster-groep-tekst {
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: var(--color-ink);
}

/* Een losse les heeft geen maandenlijst eronder. */
.rooster-groep-kop:last-child { margin-bottom: 0; }

.rooster-vlag {
  background: var(--color-salmon-pale);
  color: var(--color-salmon-deep);
  border-radius: 999px;
  padding: 0.15rem 0.7rem;
  font-size: 0.72rem;
  font-weight: 600;
  white-space: nowrap;
}

/* ---------- De maanden met hun dagen ---------- */

.rooster-maanden {
  display: grid;
  gap: 0.45rem;
}

.rooster-maand {
  display: grid;
  gap: 0.15rem 0.9rem;
  align-items: baseline;
}

@media (min-width: 33rem) {
  .rooster-maand { grid-template-columns: 7.5rem 1fr; }
}

.rooster-maand-kop {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--color-ink-soft);
  text-transform: capitalize;
}

.rooster-dagen {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}

.rooster-dag {
  display: inline-flex;
  align-items: baseline;
  gap: 0.3rem;
  padding: 0.2rem 0.5rem;
  border-radius: 7px;
  background: var(--color-bg);
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
}

/* De dagletter mag er zijn maar hoeft niet te schreeuwen: het getal is waar je
   op mikt, de letters zeggen alleen welke dag het is. */
.rooster-dagnaam {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-ink-soft);
}

/* Een dag met een eigen uur draagt dat mee, kleiner en zonder cursief. */
.rooster-dag em {
  font-style: normal;
  font-size: 0.72rem;
  color: var(--color-ink-soft);
}

.rooster-dag.is-voorbij {
  background: none;
  color: var(--color-line);
}

.rooster-dag.is-voorbij em,
.rooster-dag.is-voorbij .rooster-dagnaam { color: var(--color-line); }

.rooster-rest {
  margin-top: 0.6rem;
  font-size: 0.82rem;
  color: var(--color-ink-soft);
}

/* ---------- Events en workshops ---------- */

.rooster-events {
  margin-top: 2.6rem;
  padding-top: 1.8rem;
  border-top: 2px solid var(--color-line);
}

.rooster-events > h2 { font-size: clamp(1.3rem, 3.5vw, 1.65rem); }

.rooster-events-uitleg {
  color: var(--color-ink-soft);
  font-size: 0.9rem;
  margin-bottom: 1rem;
}

.rooster-eventlijst {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.6rem;
}

.rooster-eventlijst li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.3rem 0.9rem;
  background: var(--color-cream);
  border: 1px solid var(--color-line);
  border-radius: 14px;
  padding: 0.9rem 1.2rem;
}

.rooster-eventlijst li.is-van-mij {
  border-color: var(--color-salmon-deep);
  box-shadow: inset 3px 0 0 var(--color-salmon-deep);
}

.rooster-event-titel {
  font-family: var(--font-display);
  font-size: 1.05rem;
  flex: 1 1 14rem;
}

.rooster-event-wanneer {
  font-size: 0.88rem;
  color: var(--color-ink-soft);
}

.rooster-voet { margin-top: 2.4rem; }

/* ---------- Afdrukken ---------- */
/* Een rooster hangt aan een koelkast. Alles wat je op papier niets bijbrengt
   valt weg, en de vakjes krijgen een lijn zodat ze zonder kleur leesbaar
   blijven. */

@media print {
  .site-header,
  .site-footer,
  .rooster-herkend,
  .rooster-voet,
  .site-modal { display: none !important; }

  .rooster-pagina { padding: 0; }

  .rooster-groep,
  .rooster-eventlijst li {
    box-shadow: none;
    break-inside: avoid;
  }

  /* Achtergrondtinten drukken vaak niet af, dus op papier komen de lijntjes
     terug. Anders lopen tien regels in elkaar over. */
  .les-dagen-lijst li,
  .rooster-groep .les-dagen-lijst li {
    background: none;
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
    border-bottom: 1px solid #CCC;
    break-inside: avoid;
  }

  .les-dagen-lijst li.is-voorbij .lesdag-datum,
  .les-dagen-lijst li.is-voorbij .lesdag-uur { color: #999; }

  /* Een afwijkend uur staat op papier niet in kleur, dus dat krijgt zijn
     nadruk van het vet alleen. */
  .les-dagen-lijst li.is-anders .lesdag-uur { color: #000; font-weight: 700; }

  .rooster-vlag { border: 1px solid #999; }
}

/* De link naar het volledige rooster, onder de lestegels. */
.lessen-rooster-link {
  margin-top: 2rem;
  text-align: center;
}

.lessen-rooster-link a {
  color: var(--color-salmon-deep);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.lessen-rooster-link a:hover { color: var(--color-ink); }

/* ---------- De lesdagen van een reeks, in het venster ---------- */

/* Het venster laat regelovergangen uit een omschrijving staan (pre-line), maar
   dit stuk is opgemaakte HTML: daar zou elke inspringing een witregel worden. */
.site-modal-lesdagen { white-space: normal; }

/* De banden van de lijst lopen over de volle breedte. Alles eromheen springt
   even ver in als de tekst in die banden, zodat het geheel op één lijn staat.
   Dat is bewust geen negatieve marge: die stak buiten het venster en leverde
   een horizontale schuifbalk op. */
.site-modal-lesdagen .les-dagen-uitleg,
.site-modal-lesdagen .les-dagen-groepnaam,
.site-modal-lesdagen .les-dagen-kop,
.site-modal-lesdagen .les-dagen-voet {
  padding-left: 0.7rem;
  padding-right: 0.7rem;
}

/* Niets in dit venster mag breder worden dan het venster zelf. */
.site-modal-lesdagen,
.site-modal-lesdagen * {
  max-width: 100%;
}

/* De omschrijving leest als inleiding: iets ruimer gezet dan de lijst eronder,
   zodat het oog het verschil tussen uitleg en opsomming meteen ziet. */
.site-modal-lesdagen .les-dagen-uitleg {
  margin: 0 0 1.8rem;
  font-size: 1.02rem;
  line-height: 1.7;
  color: var(--color-ink-soft);
  /* De omschrijving komt wél uit de database, dus daar blijven de
     regelovergangen van Hanne staan. */
  white-space: pre-line;
}

.les-dagen-groep + .les-dagen-groep {
  margin-top: 1.8rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--color-line);
}

.les-dagen-groepnaam {
  font-size: 0.98rem;
  font-weight: 600;
  margin: 0 0 0.1rem;
}

/* Dezelfde kleine kapitalen als de kicker boven elke sectie op de site. */
.les-dagen-kop {
  margin: 0 0 0.7rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--color-salmon-deep);
}

/* Elke lesdag op een eigen regel: de datum links, het uur rechts. Zelfde
   lettertype, geen vet, nauwelijks verschil in grootte. Het onderscheid komt
   van de kleur alleen: de datum in de gewone inkt, het uur zachter. */
.les-dagen-lijst {
  list-style: none;
  margin: 0;
  padding: 0;
}

.les-dagen-lijst li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.2rem 1rem;
  padding: 0.35rem 0.7rem;
  border-radius: 7px;
  line-height: 1.5;
}

/* Om de andere regel een tint verschil in plaats van een lijntje ertussen.
   Tien scheidingslijnen onder elkaar hakken de lijst in stukken; een bijna
   onzichtbare band houdt hem heel en laat het oog toch de regel volgen. */
.les-dagen-lijst li:nth-child(odd) {
  background: var(--color-bg);
}

/* Zo klein als verantwoord is. De basisletter van de site is 17px, dus dit
   komt uit op 14px voor de datum en 13px voor het uur.
   Veertien pixels is de ondergrens die overal terugkomt als je richtlijnen
   naast elkaar legt (Apple, Material, de Britse overheid) voor tekst die je
   echt moet lezen. Het uur mag één stap lager: dat herhaalt zich toch en je
   leest het per regel niet opnieuw.
   Lager gaan kan technisch, maar dan wordt een lesdag opzoeken op een telefoon
   turen, en dat is precies waar deze lijst voor dient. */
.lesdag-datum {
  font-size: 0.82rem;
  /* Kleine letters staan graag iets ruimer; dat wint terug wat de grootte
     aan leesbaarheid inlevert. */
  letter-spacing: 0.01em;
  color: var(--color-ink);
  font-variant-numeric: tabular-nums;
}

.lesdag-uur {
  font-size: 0.76rem;
  letter-spacing: 0.01em;
  color: var(--color-ink-soft);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Een les met een ander uur dan de rest: het uur springt eruit, want dat is
   precies wat er anders is. Dit is de enige plek in de lijst waar vet nog
   nodig is. De datum blijft staan zoals de andere. */
.les-dagen-lijst li.is-anders .lesdag-uur {
  font-weight: 600;
  color: var(--color-salmon-deep);
}

/* Op het lessenrooster staat dezelfde lijst in een kaart met eigen marge. De
   banden lopen daar van rand tot rand: de negatieve marge heft precies de
   binnenmarge van de kaart op, dus er steekt niets buiten. Zo staan de datums
   op één lijn met de regel erboven. */
.rooster-groep .les-dagen-lijst li {
  margin-left: -1.2rem;
  margin-right: -1.2rem;
  padding-left: 1.2rem;
  padding-right: 1.2rem;
  border-radius: 0;
}

/* Een les die al geweest is blijft staan, maar stapt naar de achtergrond. */
.les-dagen-lijst li.is-voorbij .lesdag-datum,
.les-dagen-lijst li.is-voorbij .lesdag-uur {
  color: var(--color-ink-soft);
  text-decoration: line-through;
  text-decoration-color: var(--color-line);
}

.les-dagen-voet {
  margin: 1.6rem 0 0;
  padding-top: 0.9rem;
  border-top: 1px solid var(--color-line);
  font-size: 0.85rem;
  color: var(--color-ink-soft);
}

/* ---------- De kop op een smal scherm ----------
   Op een telefoon staan de merknaam, het mandje en de hamburger samen breder
   dan het scherm, en dan schuiven ze over elkaar. Alles hieronder is de
   compacte versie; vanaf 30rem is er plaats genoeg en groeit ze terug.
   De merknaam mag als laatste redmiddel afgekapt worden, zodat er nooit meer
   iets over de knop heen kan vallen. */

.brand { min-width: 0; }

.brand-word {
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 1.05rem;
}

.brand-icon { height: 32px; }

.header-controls {
  gap: 0.5rem;
  flex-shrink: 0;
}

.cart-toggle {
  padding: 0.45rem 0.8rem;
  font-size: 0.82rem;
  gap: 0.4rem;
}

/* Alleen het korte woord op een smal scherm. Het andere staat op display:none
   en wordt dus ook niet voorgelezen. */
.cart-woord { display: none; }
.cart-woord-kort { display: inline; }

@media (min-width: 30rem) {
  .brand-word { font-size: 1.25rem; }
  .brand-icon { height: 40px; }
  .header-controls { gap: 0.8rem; }

  .cart-toggle {
    padding: 0.55rem 1rem;
    font-size: 0.9rem;
    gap: 0.5rem;
  }

  .cart-woord { display: inline; }
  .cart-woord-kort { display: none; }
}

/* ---------- De pagina van één les ---------- */

.les-pagina {
  padding: calc(var(--header-height) + 2.5rem) 0 4rem;
}

.les-pagina .container { max-width: 44rem; }

/* Eén tegel hoort niet uitgerekt te worden over de volle breedte: dan staat de
   tekst in een lint van rand tot rand en leest niemand het. */
.product-grid--een {
  display: block;
  max-width: 34rem;
  margin: 0 auto;
}

.les-kruimels {
  margin: 0 0 1.2rem;
  font-size: 0.85rem;
}

.les-kruimels a {
  color: var(--color-ink-soft);
  text-decoration: none;
}

.les-kruimels a::before { content: "\2190  "; }
.les-kruimels a:hover { color: var(--color-salmon-deep); }

.les-pagina h1 {
  font-size: 1.7rem;
  margin: 0 0 1rem;
}

.les-weg {
  color: var(--color-ink-soft);
  margin-bottom: 1.6rem;
}

/* ---------- De knoppen om een les te delen ---------- */

.les-deel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.9rem;
  margin: 1rem 0 0;
  padding-top: 0.9rem;
  border-top: 1px solid var(--color-line);
}

.les-deel-label {
  font-size: 0.8rem;
  color: var(--color-ink-soft);
}

/* Twee knoppen naast elkaar, allebei met hun eigen woord erbij. Het logo van
   Facebook staat náást de tekst, niet in de plaats ervan: een icoontje alleen
   laat je raden wat er gebeurt. */
.deel-knop {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.7rem;
  border: 1px solid var(--color-line);
  border-radius: 999px;
  background: none;
  color: var(--color-ink-soft);
  font: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}

.deel-knop:hover {
  color: var(--color-ink);
  border-color: var(--color-ink-soft);
}

/* Het merkteken blijft grijszwart in plaats van Facebookblauw: zo stoort het
   de rustige kleuren van de site niet. */
.deel-merk {
  width: 0.95rem;
  height: 0.95rem;
  fill: currentColor;
  flex-shrink: 0;
}

.les-deel-knop:disabled {
  color: var(--color-ink-soft);
  border-color: var(--color-line);
  cursor: default;
}

/* De titel op een tegel verwijst naar de eigen pagina van de les. Hij mag er
   niet uitzien als een gewone link: het is nog altijd de kop van de tegel. */
.les-titel a {
  color: inherit;
  text-decoration: none;
}

.les-titel a:hover {
  color: var(--color-salmon-deep);
}

/* ---------- Kortingscode op de inschrijfpagina ---------- */

.korting-vak {
  margin: 1.2rem 0;
  padding: 0.9rem 0;
  border-top: 1px solid var(--color-line);
  border-bottom: 1px solid var(--color-line);
}

.korting-vak label {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-ink-soft);
  margin-bottom: 0.4rem;
}

.korting-rij {
  display: flex;
  gap: 0.5rem;
}

.korting-rij input {
  flex: 1;
  min-width: 0;
  text-transform: uppercase;
}

.korting-rij input::placeholder { text-transform: none; }

.korting-fout {
  margin: 0.5rem 0 0;
  font-size: 0.85rem;
  color: var(--color-error);
}

/* De korting hoort er als een aftrek uit te zien, niet als nog een kost. */
.overzicht-korting {
  color: var(--color-success);
  font-weight: 600;
}

/* Melding bovenaan wanneer er een kortingscode uit een link of een QR meekwam. */
.korting-melding {
  margin: 0;
  padding: 0.7rem 1.2rem;
  background: var(--color-salmon-pale);
  color: var(--color-salmon-deep);
  font-size: 0.9rem;
  font-weight: 600;
  text-align: center;
}