/* podofit.nl — vernieuwende onderdelen bovenop het 2026-ontwerp.
   Laadt ná stijl.css en gebruikt dezelfde variabelen. Alles hier werkt ook
   zonder JavaScript (de voetkaart valt terug op een gewone lijst, de
   timer en de bewegingshint verschijnen pas mét JavaScript). */

/* ── voetkaart ───────────────────────────────────────────────────────────── */
.voetkaart {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: start;
  margin-top: 2rem;
}
.voetkaart__figuur {
  position: relative;
  border-radius: var(--radius-kaart);
  overflow: hidden;
  box-shadow: var(--schaduw);
  background: var(--zeeschuim);
}
.voetkaart__figuur img {
  width: 100%;
  height: auto;
  display: block;
}
/* aanklikpunt op de foto: percentages in style, gecentreerd op het punt */
.hotspot {
  position: absolute;
  width: 3rem;
  height: 3rem;
  margin: -1.5rem 0 0 -1.5rem;
  display: grid;
  place-items: center;
  text-decoration: none;
  cursor: pointer;
  outline: none;
}
.hotspot__stip {
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 50%;
  background: var(--blauw);
  color: var(--op-blauw);
  border: 3px solid var(--op-vlak);
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 1.2rem;
  line-height: 1;
  box-shadow: 0 4px 14px rgb(11 46 61 / 30%);
  transition: transform 200ms ease, background 200ms ease, color 200ms ease;
}
.hotspot__puls {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 3px solid var(--blauw);
  opacity: 0.7;
  animation: puls 2.4s ease-out infinite;
}
.hotspot:nth-of-type(2) .hotspot__puls { animation-delay: 0.3s; }
.hotspot:nth-of-type(3) .hotspot__puls { animation-delay: 0.6s; }
.hotspot:nth-of-type(4) .hotspot__puls { animation-delay: 0.9s; }
.hotspot:nth-of-type(5) .hotspot__puls { animation-delay: 1.2s; }
.hotspot:nth-of-type(6) .hotspot__puls { animation-delay: 1.5s; }
.hotspot:nth-of-type(7) .hotspot__puls { animation-delay: 1.8s; }
@keyframes puls {
  0% { transform: scale(0.7); opacity: 0.7; }
  70%, 100% { transform: scale(1.6); opacity: 0; }
}
.hotspot:hover .hotspot__stip,
.hotspot:focus-visible .hotspot__stip,
.hotspot.is-actief .hotspot__stip {
  background: var(--vlak);
  color: var(--op-vlak);
  transform: scale(1.15);
}
.hotspot:focus-visible .hotspot__stip {
  border-color: var(--blauw-diep);
}
.hotspot.is-actief .hotspot__puls {
  animation: none;
  opacity: 0;
}
@media (max-width: 600px) {
  .hotspot {
    width: 2.6rem;
    height: 2.6rem;
    margin: -1.3rem 0 0 -1.3rem;
  }
  .hotspot__stip {
    width: 1.9rem;
    height: 1.9rem;
    font-size: 1.05rem;
  }
}
.voetkaart__hoger {
  margin: 1.2rem 0 0;
  padding: 1rem 1.2rem;
  border-radius: 18px;
  background: var(--zand);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem 1rem;
  font-size: 1rem;
}
.voetkaart__hoger strong {
  display: block;
}
.voetkaart__hoger a {
  font-weight: 700;
}

.voetkaart__paneel {
  min-width: 0;
  background: var(--vlak);
  color: var(--op-vlak);
  border-radius: var(--radius-kaart);
  padding: clamp(1.5rem, 3vw, 2.2rem);
  min-height: 24rem;
  background-image: radial-gradient(28rem 16rem at 100% 0%, rgb(91 202 238 / 30%), transparent 70%);
  position: sticky;
  top: calc(var(--kop-hoogte) + 1.5rem);
}
.voetkaart__paneel h3 {
  color: var(--op-vlak);
  margin: 0 0 0.4rem;
  font-size: 1.7rem;
}
.voetkaart__paneel .paneel__hint {
  color: rgb(255 255 255 / 75%);
  margin: 0 0 1.2rem;
}
.regio {
  border: 0;
  padding: 0;
  margin: 0;
}
.regio > summary {
  list-style: none;
  cursor: pointer;
  font-family: var(--font-kop);
  font-weight: 700;
  font-size: 1.3rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid rgb(255 255 255 / 15%);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}
.regio > summary::-webkit-details-marker {
  display: none;
}
.regio > summary::after {
  content: '+';
  color: var(--blauw);
  font-size: 1.5rem;
  line-height: 1;
}
.regio[open] > summary::after {
  content: '–';
}
.regio-inhoud {
  padding: 0.8rem 0 1.2rem;
}
.klacht-item {
  display: block;
  padding: 1rem 1.1rem;
  margin-bottom: 0.7rem;
  border-radius: 16px;
  background: rgb(255 255 255 / 8%);
  border: 1px solid rgb(255 255 255 / 12%);
  color: var(--op-vlak);
  text-decoration: none;
  transition: background var(--overgang), transform var(--overgang);
}
.klacht-item:hover {
  background: rgb(255 255 255 / 14%);
  color: var(--op-vlak);
  transform: translateX(4px);
}
.klacht-item strong {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.8rem;
  color: var(--op-vlak);
  font-size: 1.1rem;
  margin-bottom: 0.25rem;
}
.klacht-item strong::after {
  content: '›';
  color: var(--blauw);
  font-size: 1.5rem;
  line-height: 1;
}
.klacht-item span {
  display: block;
  color: rgb(255 255 255 / 78%);
  font-size: 0.98rem;
  line-height: 1.5;
}
/* Mét JavaScript worden de details tabbladen: één regio tegelijk, gestuurd door de tekening. */
.js .voetkaart--actief .regio {
  display: none;
}
.js .voetkaart--actief .regio.is-actief {
  display: block;
}
.js .voetkaart--actief .regio.is-actief > summary {
  pointer-events: none;
  border-bottom: 0;
  padding-top: 0;
}
.js .voetkaart--actief .regio.is-actief > summary::after {
  content: '';
}
.paneel__terug {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0.5rem 0 0;
  color: var(--op-vlak);
  font-weight: 700;
  background: none;
  border: 0;
  padding: 0.5rem 0;
  cursor: pointer;
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 0.18em;
}
.paneel__terug[hidden] {
  display: none;
}
.paneel__alle {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
}
.paneel__alle li {
  margin: 0;
}
.paneel__alle a {
  display: block;
  padding: 0.65rem 0.9rem;
  border-radius: 12px;
  background: rgb(255 255 255 / 8%);
  color: var(--op-vlak);
  text-decoration: none;
  font-weight: 700;
  font-size: 0.98rem;
}
.paneel__alle a:hover {
  background: rgb(255 255 255 / 16%);
  color: var(--op-vlak);
}
.js .voetkaart--actief .paneel__alle,
.js .voetkaart--actief .paneel__hint {
  display: none;
}
@media (max-width: 900px) {
  .voetkaart {
    grid-template-columns: minmax(0, 1fr);
  }
  .voetkaart__paneel {
    position: static;
    min-height: 0;
  }
  .paneel__alle {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ── tijdlijn eerste afspraak ────────────────────────────────────────────── */
.sectie__binnen > .tijdlijn {
  max-width: none;
}
.tijdlijn {
  list-style: none;
  margin: 2.5rem 0 1rem;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1rem;
  position: relative;
  counter-reset: stap;
}
.tijdlijn::before {
  content: '';
  position: absolute;
  left: 3rem;
  right: 3rem;
  top: 2.4rem;
  height: 4px;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--blauw), var(--zeeschuim-2));
}
.tijdlijn li {
  margin: 0;
  position: relative;
  text-align: left;
}
.tijdlijn__bol {
  position: relative;
  width: 4.8rem;
  height: 4.8rem;
  border-radius: 50%;
  background: var(--paneel);
  border: 4px solid var(--blauw);
  display: grid;
  place-items: center;
  margin-bottom: 1rem;
  box-shadow: var(--schaduw-zacht);
}
.tijdlijn__bol svg {
  width: 2.2rem;
  height: 2.2rem;
  color: var(--kop);
}
.tijdlijn__bol::after {
  counter-increment: stap;
  content: counter(stap);
  position: absolute;
  right: -0.4rem;
  top: -0.4rem;
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 50%;
  background: var(--vlak);
  color: var(--op-vlak);
  font-size: 0.85rem;
  font-weight: 800;
  display: grid;
  place-items: center;
}
.tijdlijn__tijd {
  display: inline-block;
  margin: 0 0 0.4rem;
  padding: 0.2rem 0.7rem;
  border-radius: var(--radius-knop);
  background: var(--zeeschuim);
  color: var(--kop);
  font-size: 0.9rem;
  font-weight: 700;
}
.tijdlijn h3 {
  font-size: 1.25rem;
  margin: 0 0 0.4rem;
}
.tijdlijn p {
  color: var(--tekst-zacht);
  font-size: 1rem;
  margin: 0;
}
.tijdlijn__bron {
  font-size: 0.95rem;
  color: var(--tekst-zacht);
  margin: 1.5rem 0 0;
  max-width: var(--breedte-tekst);
}
@media (max-width: 1000px) {
  .tijdlijn {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    padding-left: 0;
  }
  .tijdlijn::before {
    left: 2.3rem;
    right: auto;
    top: 2rem;
    bottom: 2rem;
    width: 4px;
    height: auto;
    background: linear-gradient(180deg, var(--blauw), var(--zeeschuim-2));
  }
  .tijdlijn li {
    display: grid;
    grid-template-columns: 4.8rem minmax(0, 1fr);
    grid-template-rows: auto auto 1fr;
    column-gap: 1.2rem;
    row-gap: 0.3rem;
    padding-bottom: 2rem;
  }
  .tijdlijn__bol {
    margin: 0;
    grid-row: 1 / 4;
  }
  .tijdlijn__tijd,
  .tijdlijn h3,
  .tijdlijn p {
    grid-column: 2;
  }
  .tijdlijn__tijd {
    justify-self: start;
  }
}

/* ── oefening van de week ────────────────────────────────────────────────── */
/* Kop over de volle breedte, daaronder video links en de stappen rechts. De
   timer en startknop liggen óp de video, zodat het blok in één scherm past. */
.oefening {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  grid-template-areas:
    'kop kop'
    'figuur tekst';
  gap: 1.5rem clamp(1.5rem, 3vw, 3rem);
  align-items: start;
}
.oefening__kop {
  grid-area: kop;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0 clamp(1.5rem, 3vw, 3rem);
  align-items: end;
}
.oefening__kop .label {
  grid-column: 1 / -1;
  margin-bottom: 0.4rem;
}
.oefening__kop h2 {
  margin: 0;
}
.oefening__kop p:not(.label) {
  margin: 0;
  color: var(--tekst-zacht);
  max-width: none;
}
.oefening__figuur {
  grid-area: figuur;
  position: relative;
  border-radius: var(--radius-kaart);
  overflow: hidden;
  box-shadow: var(--schaduw);
  background: var(--zeeschuim);
  aspect-ratio: 3 / 2;
}
@media (min-width: 901px) {
  /* even hoog als de kaart ernaast; het beeld wordt dan iets bijgesneden */
  .oefening__figuur {
    aspect-ratio: auto;
    align-self: stretch;
    min-height: 24rem;
  }
  .oefening__foto {
    position: absolute;
    inset: 0;
  }
}
.oefening__foto {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform-origin: 50% 60%;
}
.oefening--loopt .oefening__foto {
  animation: zoom 30s linear forwards;
}
@keyframes zoom {
  from { transform: scale(1); }
  to { transform: scale(1.12); }
}
.oefening__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--vlak);
}
.oefening__video[hidden] {
  display: none;
}
/* timer en startknop onderin het beeld */
.oefening__timer {
  flex-wrap: wrap;
  position: absolute;
  left: 1rem;
  right: 1rem;
  bottom: 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.6rem 0.6rem 0.6rem 1.2rem;
  border-radius: var(--radius-knop);
  background: var(--waas);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: var(--schaduw-zacht);
}
html:not(.js) .oefening__timer {
  display: none;
}
.oefening__klok {
  margin: 0;
  font-family: var(--font-kop);
  font-weight: 800;
  font-size: 2.2rem;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--kop);
  font-variant-numeric: tabular-nums;
}
.oefening__klok small {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--tekst-zacht);
  letter-spacing: 0;
  margin-left: 0.2rem;
}
.oefening__timer .knop {
  min-height: 3rem;
  padding: 0.6rem 1.4rem;
  font-size: 1rem;
  box-shadow: none;
  white-space: nowrap;
}
.oefening__voortgang {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 8px;
  background: rgb(255 255 255 / 40%);
}
.oefening__voortgang span {
  display: block;
  height: 100%;
  width: 0;
  background: var(--blauw);
  transition: width 1s linear;
}
/* bewegingshint: bovenin het beeld zolang de timer loopt */
.oefening__hint {
  position: absolute;
  left: 1rem;
  top: 1.4rem;
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.5rem 1rem 0.5rem 0.6rem;
  border-radius: var(--radius-knop);
  background: rgb(11 46 61 / 82%);
  color: var(--op-vlak);
  font-weight: 700;
  font-size: 0.95rem;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 300ms, transform 300ms;
}
.oefening--loopt .oefening__hint {
  opacity: 1;
  transform: none;
}
.oefening__pijl {
  flex: none;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 50%;
  background: var(--blauw);
  color: var(--op-blauw);
  display: grid;
  place-items: center;
}
.oefening__pijl svg {
  width: 1.1rem;
  height: 1.1rem;
}
.oefening--loopt[data-oefening='rollen'] .oefening__pijl svg {
  animation: pijl-rollen 4s ease-in-out infinite;
}
@keyframes pijl-rollen {
  0%, 100% { transform: translateX(-4px) scaleX(1); }
  50% { transform: translateX(4px) scaleX(1); }
  50.01% { transform: translateX(4px) scaleX(-1); }
  99.99% { transform: translateX(-4px) scaleX(-1); }
}
.oefening--loopt[data-oefening='hakken'] .oefening__pijl svg {
  animation: pijl-hakken 5s ease-in-out infinite;
}
@keyframes pijl-hakken {
  0%, 15% { transform: rotate(-90deg) translateX(0); }
  40%, 55% { transform: rotate(-90deg) translateX(5px); }
  100% { transform: rotate(-90deg) translateX(0); }
}
.oefening--loopt[data-oefening='balans'] .oefening__pijl svg {
  animation: pijl-balans 4s ease-in-out infinite;
}
@keyframes pijl-balans {
  0%, 100% { transform: rotate(-105deg); }
  50% { transform: rotate(-75deg); }
}
.oefening--loopt[data-oefening='tenen'] .oefening__pijl svg {
  animation: pijl-tenen 3s ease-in-out infinite;
}
@keyframes pijl-tenen {
  0%, 20%, 100% { transform: scale(0.8); }
  50%, 70% { transform: scale(1.15); }
}

/* de stappen: compacte kaart naast het beeld */
.oefening__tekst {
  grid-area: tekst;
  background: var(--paneel);
  border-radius: var(--radius-kaart);
  padding: 1.6rem 1.8rem;
  box-shadow: var(--schaduw-zacht);
  align-self: stretch;
  display: flex;
  flex-direction: column;
}
.oefening__tekst h3 {
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  margin: 0 0 0.8rem;
}
.oefening__stappen {
  margin: 0 0 1rem;
  padding-left: 1.4rem;
  font-size: 1rem;
}
.oefening__stappen li {
  margin-bottom: 0.45rem;
  padding-left: 0.3rem;
}
.oefening__stappen li::marker {
  color: var(--blauw-diep);
  font-weight: 800;
}
.oefening__waarom {
  padding: 0.8rem 1rem;
  border-left: 5px solid var(--blauw);
  background: var(--zeeschuim);
  border-radius: 0 14px 14px 0;
  margin: 0 0 1rem;
  font-size: 1rem;
}
.oefening__waarom p {
  margin: 0;
}
.oefening__status {
  font-size: 0.95rem;
  color: var(--goed);
  font-weight: 700;
  margin: 0 0 0.5rem;
  min-height: 0;
}
.oefening__status:empty {
  display: none;
}
.oefening__wissel {
  margin: auto 0 0;
  font-size: 0.98rem;
}
.oefening__wissel button {
  background: none;
  border: 0;
  padding: 0.3rem 0;
  font: inherit;
  font-weight: 700;
  color: var(--zee);
  text-decoration: underline;
  text-underline-offset: 0.18em;
  cursor: pointer;
}
.oefening__noot {
  font-size: 0.85rem;
  color: var(--tekst-zacht);
  margin: 0.8rem 0 0;
}
@media (max-width: 900px) {
  .oefening {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      'kop'
      'figuur'
      'tekst';
  }
  .oefening__kop {
    grid-template-columns: minmax(0, 1fr);
  }
  .oefening__kop p:not(.label) {
    margin-top: 0.6rem;
  }
}
@media (max-width: 520px) {
  .oefening__timer {
    left: 0.6rem;
    right: 0.6rem;
    bottom: 0.6rem;
    padding: 0.5rem 0.5rem 0.5rem 0.9rem;
  }
  .oefening__klok {
    font-size: 1.7rem;
  }
  .oefening__timer .knop {
    flex: 1 1 auto;
    min-width: 0;
    padding-inline: 0.9rem;
  }
  .oefening__hint {
    font-size: 0.85rem;
  }
}

/* ── vandaag: open/gesloten ──────────────────────────────────────────────── */
.nu {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.8rem;
  padding: 0.35rem 0.9rem 0.35rem 0.7rem;
  border-radius: var(--radius-knop);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--kop);
  background: var(--zeeschuim);
}
.nu::before {
  content: '';
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  background: var(--tekst-zacht);
}
.nu--open {
  background: #e3f5ea;
}
.nu--open::before {
  background: var(--goed);
  box-shadow: 0 0 0 4px rgb(27 127 75 / 20%);
}
.nu--dicht {
  background: var(--zand);
}
.nu[hidden] {
  display: none;
}
.oproep .nu {
  background: rgb(255 255 255 / 12%);
  color: var(--op-vlak);
  margin: 0 0 1rem;
}
.oproep .nu--open::before {
  background: var(--blauw);
  box-shadow: 0 0 0 4px rgb(91 202 238 / 25%);
}

@media (prefers-reduced-motion: reduce) {
  .hotspot__puls,
  .oefening--loopt .oefening__foto,
  .oefening__pijl svg {
    animation: none !important;
  }
}