/* Linello – zachte pastels, ronde vormen, rustige bewegingen */
:root {
  --bg: #FBF9ED;
  --inkt: #6F5B9C;
  --inkt-zacht: #9A8BB8;
  --lila: #C9B8EB;
  --lila-d: #A48FD0;
  --lila-dd: #8C76BD;
  --perzik: #F4A58E;
  --geel: #F9DC8C;
  --mint: #A9DCDD;
  --roze: #F6CFD6;
  --kaart: #FFFDF7;
  --schaduw: 0 8px 28px rgba(120, 100, 160, .13);
}

* { box-sizing: border-box; }
html, body { margin: 0; }
/* geen dubbeltik-zoom (snel tikken op + of −); knijpen om te zoomen blijft gewoon werken */
html { touch-action: manipulation; }
body {
  background: var(--bg);
  color: var(--inkt);
  font-family: 'Fredoka', ui-rounded, system-ui, sans-serif;
  font-weight: 500;
  min-height: 100dvh;
  transition: background-color 2.5s ease;
  -webkit-tap-highlight-color: transparent;
}
body[data-sfeer="avond"] { background: #ECE4F6; }
body[data-sfeer="kijk"] { background: #F4EFE4; }
body[data-sfeer="ouder"] { background: #FDF8F5; }
body[data-sfeer="nacht"] { background: #3E3B66; }
body[data-sfeer="nacht"], body[data-donker] { --inkt: #E6DDF5; --inkt-zacht: #C9C2E6; color: var(--inkt); }
body[data-donker] { transition: none; }

#app {
  max-width: 1120px;
  margin: 0 auto;
  padding: max(16px, env(safe-area-inset-top)) 16px max(32px, env(safe-area-inset-bottom));
}
button { font: inherit; color: inherit; cursor: pointer; }
button:focus-visible, input:focus-visible { outline: 3px solid var(--lila-d); outline-offset: 3px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.klein { font-size: .85em; color: var(--inkt-zacht); font-weight: 400; }

/* ---------- home ---------- */
.kop-home { text-align: center; padding-top: 8px; }
.logo { width: min(560px, 88vw); height: auto; display: block; margin: 0 auto; mix-blend-mode: multiply; }
.tagline { margin: -2px 0 0; font-size: clamp(18px, 2.6vw, 26px); color: var(--lila-dd); letter-spacing: .02em; font-weight: 400; }

.teller-blok { display: flex; flex-direction: column; align-items: center; gap: 4px; margin: 18px 0 28px; text-align: center; }
.teller-tekst { margin: 0; font-size: 18px; color: var(--inkt-zacht); font-weight: 400; }
.teller-tekst b { color: var(--inkt); font-weight: 600; }

.sterren { display: inline-flex; gap: 4px; align-items: center; }
.ster { width: 30px; height: 30px; transition: transform .6s ease; }
.ster.aan path { fill: var(--geel); stroke: #EFC766; }
.ster.uit path { fill: #F1ECF7; stroke: #DCD2EA; }
.kop .ster { width: 26px; height: 26px; }

.tegels { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(14px, 2.4vw, 32px); }
.tegel { background: none; border: 0; padding: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.tegel-beeld {
  position: relative; display: block; width: 100%; aspect-ratio: 328 / 284;
  border-radius: 13% / 15%; overflow: hidden; box-shadow: var(--schaduw);
  transition: transform .5s ease, box-shadow .5s ease;
}
.tegel-beeld img { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.04); }
.tegel:hover .tegel-beeld, .tegel:focus-visible .tegel-beeld { transform: translateY(-4px); box-shadow: 0 14px 34px rgba(120, 100, 160, .18); }
.tegel:active .tegel-beeld { transform: scale(.98); }
.tegel-naam { font-size: clamp(20px, 2.4vw, 28px); }
.tegel-icoon svg { width: 60px; height: 32px; display: block; }
.voet { text-align: center; margin-top: 36px; color: var(--inkt-zacht); font-weight: 400; }

/* ---------- kop op subpagina's ---------- */
.kop { display: grid; grid-template-columns: 56px 1fr minmax(56px, auto); align-items: center; gap: 12px; margin-bottom: 8px; }
.kop h1 { margin: 0; text-align: center; font-size: clamp(22px, 3vw, 32px); font-weight: 500; }
.kop-rechts { display: flex; justify-content: flex-end; }
.knop-rond {
  width: 52px; height: 52px; border-radius: 50%; border: 0; background: #FBF6EC;
  outline: 2px dashed #D9CDEB; outline-offset: -6px;
  box-shadow: 0 3px 7px rgba(43, 33, 64, .16); display: grid; place-items: center; color: var(--lila-dd);
}
body[data-sfeer="nacht"] .knop-rond, body[data-donker] .knop-rond { background: #4E4A7C; color: #E6DDF5; outline-color: #6B6499; }
.knop-rond svg { width: 24px; height: 24px; }
.knop-rond:active { transform: scale(.94); }

/* ---------- lijsten ---------- */
.lijst-intro { text-align: center; margin: 4px 0 0; color: var(--inkt-zacht); font-size: 19px; font-weight: 400; }
.kaarten { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 22px; margin-top: 22px; }
.kaart {
  border: 0; padding: 0; background: var(--kaart); border-radius: 26px; overflow: hidden;
  box-shadow: var(--schaduw); text-align: left; display: flex; flex-direction: column;
  transition: transform .5s ease;
}
.kaart:hover, .kaart:focus-visible { transform: translateY(-4px); }
.kaart:active { transform: scale(.98); }
.kaart-beeld { display: block; aspect-ratio: 16 / 9; overflow: hidden; }
.kaart-beeld svg { width: 100%; height: 100%; display: block; }
.kaart-beeld img { width: 100%; height: 100%; display: block; object-fit: cover; }
.kaart-beeld.icoon { display: grid; place-items: center; }
.kaart-beeld.icoon svg, .kaart-beeld.icoon img { height: 78%; width: auto; }
.kaart-beeld.icoon img { border-radius: 18px; }
.kaart-tekst { padding: 14px 18px 18px; display: flex; flex-direction: column; gap: 2px; }
.kaart-titel { font-size: 21px; }
.gezien { font-size: 14px; color: var(--inkt-zacht); font-weight: 400; }
.gezien::before { content: ''; display: inline-block; width: 14px; height: 14px; margin-right: 5px; vertical-align: -2px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14'%3E%3Cpath d='M3.5 3.8l7 6.6M10.6 3.4l-6.8 7.2' stroke='%237CC3A0' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat; }

/* ---------- speler ---------- */
.podium {
  position: relative; margin: 14px auto 0;
  width: min(100%, calc((100dvh - 250px) * 16 / 9)); min-width: min(100%, 300px);
  aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden;
  box-shadow: var(--schaduw); background: #fff; transition: opacity 1.4s ease;
}
.podium.uit { opacity: 0; }
.podium svg.scene, .podium video { width: 100%; height: 100%; display: block; object-fit: cover; }
.podium canvas.vilt, .kaart-beeld canvas, .op-scene canvas { width: 100%; height: 100%; display: block; }
/* naamkaartje boven de vilten scène (mindfulness, yoga): een lapje met een rijgsteek-randje */
.vilt-label {
  position: absolute; top: 10px; left: 12px; transform: rotate(-2deg);
  background: #FBF6EC; color: #4F3F73; border-radius: 9px 12px 8px 13px; padding: 5px 15px 6px;
  font-family: 'Patrick Hand', Fredoka, system-ui, sans-serif; font-size: calc(1.15 * clamp(17px, 2.6vw, 26px));
  outline: 2px dashed #B9A8DD; outline-offset: -6px;
  box-shadow: 0 3px 6px rgba(43, 33, 64, .18); transition: opacity .6s ease; white-space: nowrap;
}
.vilt-label:empty { opacity: 0; }
/* staand op een telefoon: een hoger speelvlak, zodat het scherm gevuld is */
@media (orientation: portrait) and (max-width: 820px) {
  .podium { aspect-ratio: 3 / 4; width: min(100%, calc((100dvh - 240px) * 3 / 4)); }
  .op-scene { aspect-ratio: 1; width: min(100%, calc(100dvh - 380px)); }
}
/* liggend op een telefoon: knoppen als overlay in de hoeken, zodat het vilt zo groot mogelijk is */
@media (orientation: landscape) and (max-height: 500px) {
  .speler .kop { position: absolute; top: max(8px, env(safe-area-inset-top)); left: max(12px, env(safe-area-inset-left));
    right: max(12px, env(safe-area-inset-right)); z-index: 3; margin: 0; pointer-events: none; }
  .speler .kop > * { pointer-events: auto; }
  .speler .kop h1 { visibility: hidden; }
  .speler .knop-rond { width: 40px; height: 40px; }
  .speler .podium { margin-top: 0; width: min(100%, calc((100dvh - 96px) * 16 / 9)); border-radius: 12px; }
  .speler .ondertitel { margin: 8px auto 6px; min-height: 1.35em; font-size: 18px; }
  .vilt-label { font-size: 15px; padding: 3px 10px 4px; top: 8px; left: 56px; }
}
.ondertitel {
  min-height: 2.8em; text-align: center; font-size: clamp(20px, 2.6vw, 30px);
  max-width: 780px; margin: 18px auto 12px; line-height: 1.35;
  opacity: 0; transform: translateY(6px); transition: opacity .9s ease, transform .9s ease;
}
.ondertitel.zicht { opacity: 1; transform: none; }
/* voortgang: een rijgsteek die zich vult, alsof het filmpje wordt dichtgenaaid */
.voortgang { height: 12px; max-width: 520px; margin: 0 auto; position: relative; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='12'%3E%3Ccircle cx='10' cy='6' r='1.3' fill='%23D6CBE8'/%3E%3C/svg%3E") left center / 20px 12px repeat-x; }
.voortgang i { display: block; height: 100%; width: 0; transition-property: width; transition-timing-function: steps(1, end);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='12'%3E%3Cpath d='M4 7.3h12' stroke='rgba(43,33,64,.22)' stroke-width='3.6' stroke-linecap='round'/%3E%3Cpath d='M4 6h12' stroke='%23A48FD0' stroke-width='3.6' stroke-linecap='round'/%3E%3Cpath d='M6.5 5.1h6' stroke='%23C9B8EB' stroke-width='1' stroke-linecap='round'/%3E%3C/svg%3E") left center / 20px 12px repeat-x; }
body[data-donker] .voortgang { opacity: .8; }

/* mindfulness */
.adem { position: absolute; inset: 0; display: grid; place-items: center; background: radial-gradient(circle at 50% 50%, #FFF8DE 0%, #FBEBB8 62%, #F7E0A0 100%); }
.speler-mindfulness .adem { --duur: 4s; }
.adem-bol {
  width: 36%; aspect-ratio: 1; border-radius: 50%; background: #FFFCF3; display: grid; place-items: center;
  box-shadow: 0 0 0 16px rgba(255, 255, 255, .38), 0 0 0 36px rgba(255, 255, 255, .18);
  transform: scale(1); transition: transform var(--duur) ease-in-out;
}
.adem[data-adem="in"] .adem-bol { transform: scale(1.32); }
.adem[data-adem="uit"] .adem-bol { transform: scale(.8); }
.adem-bol svg { width: 76%; }
.adem-label { position: absolute; top: 6%; font-size: clamp(18px, 3vw, 30px); color: #B0924C; min-height: 1.2em; }
.adem-sterren { position: absolute; bottom: 6%; }
.adem-sterren .ster { width: clamp(26px, 5vw, 48px); height: clamp(26px, 5vw, 48px); }
.adem-sterren .ster.aan { animation: sterAan 1.2s ease; }
@keyframes sterAan { 0% { transform: scale(.7); } 60% { transform: scale(1.15); } 100% { transform: scale(1); } }

/* yoga */
.yoga { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3%; background: linear-gradient(#DDF1F0, #F3FAF6); }
.pose { height: 60%; aspect-ratio: 1; display: grid; place-items: center; }
.pose svg { height: 100%; width: 100%; animation: bob 5s ease-in-out infinite; }
.pose img { max-height: 100%; max-width: 100%; border-radius: 22px; }
.pose-naam { font-size: clamp(20px, 3.2vw, 34px); }
.tel { display: flex; gap: 10px; height: 20px; align-items: center; }
.tel i { width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 2.5px solid var(--mint); animation: vul .7s ease forwards; }
@keyframes vul { to { background: var(--mint); transform: scale(1.2); } }

/* ---------- praatvraag ---------- */
.praat { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 22px; padding-top: 3vh; }
.praat-beer svg { width: 150px; animation: bob 5s ease-in-out infinite; }
.praat-beer canvas { width: 250px; height: 268px; display: block; }
.ballon { background: #FBF6EC; border-radius: 18px 22px 16px 24px; padding: 26px 32px; max-width: 640px; position: relative;
  outline: 2px dashed #CBBBE6; outline-offset: -10px; box-shadow: 0 3px 8px rgba(43, 33, 64, .16); transform: rotate(-.8deg); }
.ballon::before { content: ''; position: absolute; top: -14px; left: 50%; transform: translateX(-50%) rotate(4deg); border: 15px solid transparent; border-top: 0; border-bottom-color: #FBF6EC; }
.knoopjes { display: inline-block; width: 30px; height: 14px; margin-right: 6px; vertical-align: -1px; }
body[data-sfeer="nacht"] .ballon { background: #4E4A7C; outline-color: #7D69AE; box-shadow: 0 3px 8px rgba(0, 0, 0, .25); }
body[data-sfeer="nacht"] .ballon::before { border-bottom-color: #4E4A7C; }
body[data-sfeer="nacht"] .ballon-kop { color: #CBBBE6; }
.ballon-kop { color: var(--lila-d); margin: 0 0 8px; font-size: 18px; }
.ballon-vraag { font-size: clamp(24px, 3.4vw, 34px); margin: 0 0 12px; line-height: 1.25; }
.ballon-tip { margin: 0; color: var(--inkt-zacht); font-weight: 400; }

.knop {
  border: 0; border-radius: 16px 13px 17px 12px; background: var(--lila-d); color: #fff;
  padding: 14px 28px; font-size: 20px; outline: 2px dashed rgba(255, 255, 255, .75); outline-offset: -7px;
  box-shadow: 0 3px 7px rgba(43, 33, 64, .22); transform: rotate(-.6deg);
  transition: transform .15s ease, box-shadow .15s ease;
}
.knop:active { transform: rotate(-.6deg) translateY(2px); box-shadow: 0 1px 3px rgba(43, 33, 64, .22); }
.knop.zacht { background: #FBF6EC; color: #4F3F73; outline-color: #CBBBE6; box-shadow: 0 3px 7px rgba(43, 33, 64, .14); }
.knop.groot { font-size: 24px; padding: 18px 38px; }
.knoppen { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* ---------- op / tot morgen ---------- */
.op { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 6px; padding-top: 2vh; }
.op-scene { width: min(100%, 700px); aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden; box-shadow: var(--schaduw); animation: doezel 2.6s ease both; }
.op-scene svg { width: 100%; height: 100%; display: block; }
.op h1 { font-size: clamp(26px, 4vw, 40px); margin: 22px 0 0; font-weight: 500; animation: doezel 2s ease .8s both; }
.op-tekst { margin: 4px 0 10px; font-size: 20px; color: var(--inkt-zacht); font-weight: 400; animation: doezel 2s ease 1.4s both; }
.bonus { animation: doezel 1.8s ease 3.8s both; }
.bonus p { font-size: 22px; margin: 8px 0 16px; }
@keyframes doezel { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ---------- ouderslot ---------- */
.poort-achter { position: fixed; inset: 0; background: rgba(90, 72, 130, .35); backdrop-filter: blur(4px); display: grid; place-items: center; padding: 16px; z-index: 10; animation: doezel .3s ease; }
.poort { background: #fff; border-radius: 28px; padding: 28px 26px 18px; max-width: 380px; width: 100%; text-align: center; box-shadow: 0 20px 60px rgba(60, 40, 100, .25); }
.poort-slot { width: 56px; height: 56px; border-radius: 50%; background: #F1ECF9; display: grid; place-items: center; margin: 0 auto 8px; color: var(--lila-dd); }
.poort-slot svg { width: 26px; height: 26px; }
.poort h2 { margin: 0 0 4px; font-weight: 500; }
.poort p { margin: 0 0 16px; color: var(--inkt-zacht); font-weight: 400; }
.poort-vorm { display: flex; gap: 10px; align-items: center; justify-content: center; flex-wrap: wrap; }
.poort-som { font-size: 26px; }
.poort input { width: 84px; font: inherit; font-size: 26px; text-align: center; padding: 8px; border-radius: 16px; border: 2px solid #E4DCF0; color: var(--inkt); }
.link { background: none; border: 0; color: var(--inkt-zacht); margin-top: 14px; padding: 8px; font-weight: 400; text-decoration: underline; }

/* ---------- ouderportaal ---------- */
.badge { display: inline-flex; align-items: center; gap: 6px; background: #F1ECF9; color: var(--lila-dd); padding: 6px 12px; border-radius: 999px; font-size: 15px; }
.badge svg { width: 16px; height: 16px; }
.tabs { display: flex; gap: 6px; background: #F3EEF9; padding: 5px; border-radius: 999px; width: fit-content; margin: 10px auto 22px; }
.tabs button { border: 0; background: none; padding: 10px 20px; border-radius: 999px; font-size: 17px; color: var(--inkt-zacht); }
.tabs button[aria-selected="true"] { background: #fff; color: var(--inkt); box-shadow: 0 2px 8px rgba(120, 100, 160, .12); }

.coach-intro { display: flex; gap: 20px; align-items: center; background: #fff; border-radius: 26px; padding: 16px; box-shadow: var(--schaduw); }
.coach-intro img { width: 150px; border-radius: 20px; flex: none; }
.coach-intro h2 { margin: 0 0 4px; font-weight: 500; }
.coach-intro p { margin: 0; color: var(--inkt-zacht); font-weight: 400; line-height: 1.45; }

.onderwerpen { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; margin-top: 18px; }
.onderwerp {
  border: 0; background: #fff; border-radius: 22px; padding: 18px 20px; text-align: left;
  box-shadow: var(--schaduw); border-top: 10px solid var(--kleur); display: flex; flex-direction: column; gap: 6px;
  transition: transform .4s ease;
}
.onderwerp:hover, .onderwerp:focus-visible { transform: translateY(-3px); }
.onderwerp-titel { font-size: 19px; }
.onderwerp-kort { color: var(--inkt-zacht); font-weight: 400; line-height: 1.4; }
.onderwerp-meer { color: var(--lila-d); font-size: 15px; margin-top: 4px; }

.artikel { max-width: 720px; margin: 10px auto 0; background: #fff; border-radius: 28px; padding: clamp(20px, 4vw, 40px); box-shadow: var(--schaduw); }
.artikel h2 { margin: 0; font-size: clamp(24px, 3.2vw, 32px); font-weight: 500; }
.artikel-kort { color: var(--inkt-zacht); font-weight: 400; margin: 6px 0 18px; }
.artikel h3 { margin: 26px 0 6px; font-weight: 500; font-size: 21px; }
.artikel p, .artikel li { font-family: system-ui, -apple-system, 'Segoe UI', sans-serif; font-weight: 400; line-height: 1.6; color: #4F4466; font-size: 17px; }
.artikel ul { padding-left: 22px; }
.artikel li { margin: 6px 0; }
.artikel li::marker { color: var(--lila-d); }
.coach-video { display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: 20px; background: #000; }
.coach-video.leeg { background: var(--kleur); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: var(--inkt); text-align: center; padding: 16px; }
.coach-video .play { width: 64px; height: 64px; border-radius: 50%; background: rgba(255, 255, 255, .8); display: grid; place-items: center; color: var(--lila-d); }
.coach-video .play svg { width: 28px; height: 28px; margin-left: 4px; }

.inst { max-width: 720px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
.inst-rij { background: #fff; border-radius: 22px; padding: 18px 20px; box-shadow: var(--schaduw); display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.inst-rij.kolom { flex-direction: column; align-items: flex-start; }
.inst-rij h3 { margin: 0 0 2px; font-weight: 500; font-size: 19px; }
.inst-rij p { margin: 0; color: var(--inkt-zacht); font-weight: 400; line-height: 1.4; }
.inst-rij ul { margin: 0; padding-left: 20px; font-weight: 400; line-height: 1.6; }
.vandaag li { margin: 2px 0; }
.stepper { display: flex; align-items: center; gap: 6px; background: #F3EEF9; border-radius: 999px; padding: 5px; flex: none; }
.stepper button { width: 42px; height: 42px; border-radius: 50%; border: 0; background: #fff; font-size: 24px; line-height: 1; color: var(--lila-dd); }
.stepper output { min-width: 32px; text-align: center; font-size: 22px; }
.schakel { flex: none; width: 58px; height: 34px; border-radius: 999px; border: 0; background: #E4DCF0; position: relative; padding: 0; transition: background .3s; }
.schakel span { position: absolute; top: 4px; left: 4px; width: 26px; height: 26px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .15); transition: transform .3s ease; }
.schakel[aria-checked="true"] { background: var(--lila-d); }
.schakel[aria-checked="true"] span { transform: translateX(24px); }

/* ---------- animaties in de scènes ---------- */
.podium svg *, .op-scene svg *, .kaart-beeld svg * { transform-box: fill-box; }
.a-twinkel { animation: twinkel 4s ease-in-out infinite; transform-origin: center; }
.a-adem { animation: ademBeer 5s ease-in-out infinite; transform-origin: center bottom; }
.a-zzz { animation: zzz 7s ease-in-out infinite; opacity: 0; }
.a-drijf { animation: drijf 36s ease-in-out infinite alternate; }
.a-bob { animation: bob 4s ease-in-out infinite; }
.a-puls { animation: puls 8s ease-in-out infinite; transform-origin: center; }
.a-kring { animation: kring 6s ease-out infinite; transform-origin: center; }
.a-heen { animation: heen 40s linear infinite; transform-origin: center; }
.a-wieg { animation: wieg 6s ease-in-out infinite alternate; transform-origin: center bottom; }
.a-val { animation: val 14s linear infinite; transform-origin: center; }
.a-golf { animation: golf 9s ease-in-out infinite alternate; }
.a-vlieg { animation: vlieg 42s linear infinite; }
.a-vleugel { animation: vleugel 1.8s ease-in-out infinite; transform-origin: center; }
.a-kruip { animation: kruip 80s linear infinite; }
.a-zweef { animation: zweef 14s ease-in-out infinite; }

@keyframes twinkel { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
@keyframes ademBeer { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.035); } }
@keyframes zzz { 0% { opacity: 0; transform: translate(0, 0); } 20% { opacity: .9; } 100% { opacity: 0; transform: translate(34px, -80px); } }
@keyframes drijf { from { transform: translateX(-50px); } to { transform: translateX(70px); } }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes puls { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.07); } }
@keyframes kring { 0% { transform: scale(.3); opacity: .9; } 100% { transform: scale(1.6); opacity: 0; } }
@keyframes heen {
  0% { transform: translateX(0) scaleX(1); }
  48% { transform: translateX(var(--dx, 200px)) scaleX(1); }
  50% { transform: translateX(var(--dx, 200px)) scaleX(-1); }
  98% { transform: translateX(0) scaleX(-1); }
  100% { transform: translateX(0) scaleX(1); }
}
@keyframes wieg { from { transform: rotate(-4deg); } to { transform: rotate(4deg); } }
@keyframes val { 0% { transform: translate(0, -40px) rotate(0); opacity: 0; } 10% { opacity: 1; } 88% { opacity: 1; } 100% { transform: translate(70px, 360px) rotate(260deg); opacity: 0; } }
@keyframes golf { from { transform: translateX(-50px); } to { transform: translateX(0); } }
@keyframes vlieg { from { transform: translate(-80px, 0); } 50% { transform: translate(430px, -26px); } to { transform: translate(900px, 0); } }
@keyframes vleugel { 0%, 100% { transform: scaleX(1); } 50% { transform: scaleX(.5); } }
@keyframes kruip { 0% { transform: translateX(0); opacity: 0; } 6% { opacity: 1; } 94% { opacity: 1; } 100% { transform: translateX(300px); opacity: 0; } }
@keyframes zweef { 0%, 100% { transform: translate(0, 0); } 25% { transform: translate(60px, -24px); } 50% { transform: translate(120px, 6px); } 75% { transform: translate(50px, 26px); } }

.gepauzeerd *, .gepauzeerd { animation-play-state: paused !important; }
.stil * { animation: none !important; }
.stil .a-zzz { opacity: 0; }

/* ---------- mobiel ---------- */
@media (max-width: 760px) {
  .tegels { grid-template-columns: repeat(2, 1fr); }
  .teller-tekst { font-size: 16px; }
  .kop { grid-template-columns: 48px 1fr minmax(48px, auto); gap: 8px; }
  .knop-rond { width: 46px; height: 46px; }
  .kop .ster { width: 20px; height: 20px; }
  .kop .sterren { gap: 1px; }
  .coach-intro { flex-direction: column; text-align: center; }
  .coach-intro img { width: 120px; }
  .inst-rij:not(.kolom) { align-items: flex-start; }
}
@media (max-width: 420px) {
  .kop h1 { font-size: 20px; }
  .kop .ster { width: 16px; height: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .podium svg *, .op-scene svg *, .pose svg, .praat-beer svg { animation-duration: 0s !important; animation-iteration-count: 1 !important; }
  .a-zzz { display: none; }
}

/* praatscherm liggend: Beer links, de vraag en de knop rechts (alles boven de vouw); na de gewone regels */
@media (orientation: landscape) and (max-height: 500px) {
  .praat { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 24px; row-gap: 14px;
    align-items: center; justify-items: center; padding-top: 1vh; max-width: 820px; margin: 0 auto; }
  .praat-beer { grid-row: 1 / 3; }
  .praat-beer canvas { width: 200px; height: 214px; }
  .ballon { padding: 16px 22px; }
  .ballon::before { top: 50%; left: -14px; transform: translateY(-50%) rotate(-90deg); }
  .ballon-vraag { font-size: 22px; margin-bottom: 6px; }
  .knop.groot { font-size: 20px; padding: 12px 28px; }
}
/* klein scherm staand: het praatscherm past zonder scrollen */
@media (orientation: portrait) and (max-height: 700px) {
  .praat { gap: 14px; padding-top: 1vh; }
  .praat-beer canvas { width: 180px; height: 193px; }
  .ballon { padding: 18px 22px; }
  .ballon-vraag { font-size: 22px; }
}