/* O&Ki Teamspel — huisstijl van de Beweeg-Tool, opgeschaald voor een groot scherm. */
:root {
  --wit: #FFFDFA;
  --papier: #FBF4EC;
  --ink: #2E2A26;
  --grijs-tekst: #6E6B66;
  --lijn: #E6D9CB;
  --koraal: #EA8D71;          /* alleen decoratief */
  --koraal-knop: #B85536;     /* vlakken met witte tekst */
  --koraal-knop-hover: #A34527;
  --perzik-licht: #F5E3D5;
  --zand: #EFDBC2;
  --salie-licht: #D9DECF;
  --roze: #C8006A;
  --goed: #3E7A3A;
  --radius: 22px;
  --kop: 'Patrick Hand SC', 'Nunito', system-ui, sans-serif;
  color-scheme: light;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--wit);
  color: var(--ink);
  font-family: 'Nunito', system-ui, sans-serif;
  font-weight: 600;
  -webkit-font-smoothing: antialiased;
}
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3 { font-family: var(--kop); font-weight: 400; line-height: 1.05; margin: 0 0 .3em; letter-spacing: .01em; }
:focus-visible { outline: 3px solid var(--roze); outline-offset: 3px; }
.hulp { color: var(--grijs-tekst); font-size: .92em; }
[hidden] { display: none !important; }

.teamchip {
  display: inline-block; padding: .08em .6em .12em; border-radius: 999px;
  background: var(--tk); color: var(--tt); font-weight: 800; white-space: nowrap;
}

/* =========================================================
   GROOT SCHERM
   ========================================================= */
body.scherm {
  height: 100vh; overflow: hidden;
  display: grid; grid-template-rows: 1fr auto;
  background:
    radial-gradient(60vw 60vw at 110% -10%, var(--perzik-licht) 0 40%, transparent 41%),
    radial-gradient(40vw 40vw at -10% 115%, var(--salie-licht) 0 45%, transparent 46%),
    var(--wit);
  font-size: clamp(16px, 1.45vw, 34px);
}
#podium {
  position: relative; overflow: hidden; min-height: 0;
  display: flex; flex-direction: column;
  padding: 2.2vh 3.5vw 1vh;
}
#podium > section {
  flex: 1; min-height: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: 1.6vh;
  animation: binnen .45s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes binnen { from { transform: translateY(2.5vh) scale(.98); } }
@media (prefers-reduced-motion: reduce) { #podium > section { animation: none; } }

.kop { display: flex; align-items: center; gap: 1.5vw; color: var(--grijs-tekst); font-weight: 800; }
.kop-logo { height: 5.5vh; width: auto; }
.kop-ronde { font-family: var(--kop); font-size: 1.5em; color: var(--ink); }
.kop-extra { margin-left: auto; font-size: 1.1em; }

.scherm h1 { font-size: clamp(2.6rem, 5.4vw, 8rem); }
.scherm h1.groot { font-size: clamp(2.2rem, 4.4vw, 6.5rem); }
.scherm .sub { font-size: 1.25em; color: var(--grijs-tekst); max-width: 60ch; margin: 0; }

/* Aanmelden */
.lobby { flex-direction: row !important; align-items: stretch !important; gap: 4vw !important; text-align: left !important; }
.lobby-links {
  flex: 0 0 34vw; display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: #fff; border-radius: 32px; padding: 3vh 2vw; box-shadow: 0 10px 40px rgba(46,42,38,.08);
  text-align: center;
}
.lobby-logo { width: 13vw; max-width: 260px; height: auto; margin-bottom: 1vh; }
.lobby-links h1 { font-size: clamp(2rem, 3.2vw, 4.6rem); }
.qr { width: min(24vw, 46vh); aspect-ratio: 1; margin: 1.5vh 0; }
.qr svg { width: 100%; height: 100%; display: block; }
.lobby-url { font-size: 1.3em; font-weight: 800; margin: 0; }
.lobby-code { margin: .3em 0 0; color: var(--grijs-tekst); font-size: 1.2em; }
.lobby-code b { color: var(--ink); font-family: var(--kop); font-size: 2em; letter-spacing: .15em; vertical-align: -.1em; }
.lobby-rechts { flex: 1; display: flex; flex-direction: column; min-width: 0; padding-top: 2vh; }
.lobby-top { display: flex; align-items: center; justify-content: space-between; gap: 1vw; }
.lobby-top h2 { font-size: 2.4em; }
.teams { flex: 1; display: grid; grid-template-columns: repeat(auto-fit, minmax(22vw, 1fr)); gap: 1.4vw; align-content: start; margin: 1.5vh 0; overflow: hidden; }
.team { background: #fff; border-radius: var(--radius); overflow: hidden; box-shadow: 0 4px 18px rgba(46,42,38,.06); }
.team h3 { background: var(--tk); color: var(--tt); margin: 0; padding: .45em .8em; font-size: 1.5em; display: flex; justify-content: space-between; }
.team h3 small { font-family: 'Nunito'; font-weight: 800; font-size: .7em; opacity: .9; }
.team ul { list-style: none; margin: 0; padding: .5em; display: flex; flex-wrap: wrap; gap: .35em; }
.naam { border: 0; background: var(--papier); border-radius: 999px; padding: .3em .85em; font-size: 1.15em; font-weight: 700; animation: plop .35s cubic-bezier(.3,1.6,.5,1) both; }
.naam:hover { background: var(--perzik-licht); }
@keyframes plop { from { transform: scale(.4); } }

/* Intro */
.intro-em { font-size: clamp(4rem, 10vw, 14rem); line-height: 1; animation: wieg 2.4s ease-in-out infinite; }
@keyframes wieg { 50% { transform: rotate(-8deg) scale(1.06); } }
.intro-nr { font-weight: 800; color: var(--koraal-knop); letter-spacing: .15em; text-transform: uppercase; margin: 0; font-size: 1.2em; }
.intro-lijst { text-align: left; font-size: 1.45em; line-height: 1.5; max-width: 52ch; margin: 1vh 0 0; padding-left: 1.3em; }
.intro-lijst li::marker { color: var(--koraal-knop); font-weight: 900; }

/* Vraag */
.vraag-klein { font-size: 1.5em; color: var(--grijs-tekst); margin: 0; max-width: 60ch; }
.vraag-klein b { color: var(--ink); }
.antwoord, .stelling {
  margin: 0; background: #fff; border-radius: 32px; padding: 4vh 4vw; max-width: 80vw;
  font-family: var(--kop); font-size: clamp(2.4rem, 5vw, 7.5rem); line-height: 1.1;
  box-shadow: 0 12px 50px rgba(46,42,38,.1); position: relative;
}
.antwoord::before { content: '“'; position: absolute; left: 1.5vw; top: -2vh; color: var(--koraal); font-size: 1.8em; }
.stelling { font-size: clamp(2rem, 4.2vw, 6rem); }
.stelling.klein { font-size: clamp(1.6rem, 2.8vw, 4rem); padding: 2.5vh 3vw; }
.vraag-onder { display: flex; align-items: center; gap: 3vw; margin-top: 1vh; }
.kanten { display: flex; gap: 3vw; font-size: 1.35em; font-weight: 800; }
.kant { padding: .4em 1em; border-radius: 999px; }
.kant.eens { background: #DCEBD8; color: #2F5E2B; }
.kant.oneens { background: #F6DCD2; color: #8E3A1F; }

.timer {
  --maat: 11vh; width: var(--maat); height: var(--maat); border-radius: 50%;
  display: grid; place-items: center; background: #fff; border: .7vh solid var(--koraal);
  font-family: var(--kop); font-size: 5.5vh; box-shadow: 0 6px 24px rgba(46,42,38,.1);
}
.timer:empty, .timer span:empty { display: none; }
.timer.bijna { border-color: var(--roze); color: var(--roze); animation: tik 1s ease-in-out infinite; }
.timer.om { animation: none; }
@keyframes tik { 50% { transform: scale(1.1); } }

.teller { font-size: 1.3em; color: var(--grijs-tekst); display: flex; flex-direction: column; align-items: flex-start; gap: .4em; }
.teller b { color: var(--ink); font-size: 1.5em; }
.stippen { display: flex; flex-wrap: wrap; gap: .35em; max-width: 40vw; }
.stippen i { width: 1.1em; height: 1.1em; border-radius: 50%; border: 3px solid var(--tk); background: transparent; transition: background .2s, transform .2s; }
.stippen i.aan { background: var(--tk); transform: scale(1.15); }

/* Onthulling */
.onthul-naam {
  background: var(--tk, var(--ink)); color: var(--tt, #fff); padding: .15em .7em .2em; border-radius: 28px;
  animation: knal .6s cubic-bezier(.3,1.6,.5,1) both .1s;
}
@keyframes knal { from { transform: scale(.3) rotate(-6deg); } }
.onthul-score { font-size: 1.5em; font-weight: 800; margin: 0; }

.staafjes { list-style: none; padding: 0; margin: 1vh 0 0; width: min(70vw, 1100px); display: grid; gap: 1vh; }
.staafjes li { display: grid; grid-template-columns: minmax(8em, 26%) 1fr 3em; align-items: center; gap: 1vw; font-size: 1.25em; text-align: left; }
.staaf { height: 3.2vh; background: var(--papier); border-radius: 999px; overflow: hidden; }
.staaf span { display: block; height: 100%; background: var(--grijs-tekst); border-radius: 999px; animation: groei 1s cubic-bezier(.2,.8,.2,1) both .3s; }
.staafjes li.goed .staaf span { background: var(--goed); }
.staafjes li.goed { font-weight: 900; }
.staaf-n { font-weight: 900; }
@keyframes groei { from { width: 0 !important; } }

.splits { display: flex; width: min(80vw, 1400px); height: 13vh; border-radius: 24px; overflow: hidden; font-size: 1.6em; box-shadow: 0 8px 30px rgba(46,42,38,.1); }
.splits > div { display: flex; align-items: center; justify-content: center; gap: .3em; min-width: 0; white-space: nowrap; overflow: hidden; animation: groeiflex 1s cubic-bezier(.2,.8,.2,1) both; }
.splits b { font-family: var(--kop); font-size: 1.6em; font-weight: 400; }
.splits-eens { background: #3E7A3A; color: #fff; }
.splits-oneens { background: var(--koraal-knop); color: #fff; }
@keyframes groeiflex { from { flex: 1 !important; } }
.conclusie { font-size: 1.6em; font-weight: 800; margin: 0; }

/* Beweegronde */
.kaarten { display: grid; grid-template-columns: repeat(auto-fit, minmax(18vw, 1fr)); gap: 1.4vw; width: 100%; max-width: 92vw; }
.kaart { background: #fff; border-radius: var(--radius); overflow: hidden; text-align: left; box-shadow: 0 6px 24px rgba(46,42,38,.08); animation: plop .4s cubic-bezier(.3,1.6,.5,1) both; }
.kaart header { background: var(--tk); color: var(--tt); padding: .4em .9em; font-family: var(--kop); font-size: 1.5em; }
.kaart h3 { padding: .5em .8em 0; font-size: 1.7em; }
.kaart p { margin: 0; padding: 0 1.1em .6em; }
.kaart-groep { color: var(--grijs-tekst); }
.kaart-drempel { font-weight: 800; }
.kaart.wacht h3 { color: var(--grijs-tekst); }

.optreden { background: var(--tk); color: var(--tt); border-radius: 36px; margin: 1vh 0 1.5vh; padding: 3vh 4vw; }
.optreden-team { font-size: 1.6em; font-weight: 900; text-transform: uppercase; letter-spacing: .12em; margin: 0; opacity: .9; }
.optreden-publiek { font-size: 1.6em; margin: 0; }
.optreden-drempel { font-size: 1.7em; font-weight: 800; margin: 0; background: rgba(255,255,255,.18); padding: .5em 1em; border-radius: 18px; }
.presentatie-uitleg { font-size: 1.4em; max-width: 70ch; white-space: pre-line; margin: 0; }
.optreden .timer { color: var(--ink); }

.sterren { font-size: clamp(3rem, 8vw, 11rem); color: #E0A100; margin: 0; letter-spacing: .05em; line-height: 1; }
.sterren span { color: var(--lijn); }

/* Samen sterk */
.aftel-getal { font-family: var(--kop); font-size: clamp(8rem, 26vh, 30rem); line-height: 1; color: var(--koraal-knop); }
.aftel-getal.pulse { animation: knal .5s cubic-bezier(.3,1.6,.5,1); }
.meter { position: relative; width: min(84vw, 1600px); height: 16vh; background: #fff; border-radius: 30px; box-shadow: inset 0 0 0 6px var(--lijn); overflow: hidden; }
.meter-vulling { display: flex; height: 100%; }
.meter-vulling span { height: 100%; transition: width .35s ease-out; }
.meter-doel { position: absolute; top: 0; bottom: 0; width: 8px; margin-left: -4px; background: var(--ink); transition: left .3s; }
.meter-doel::after { content: '🏁'; position: absolute; top: -.1em; left: 12px; font-size: 2.2em; }
.meter.vol { box-shadow: inset 0 0 0 6px var(--goed), 0 0 60px rgba(62,122,58,.5); }
.meter-tal { font-family: var(--kop); font-size: 4em; margin: 0; }

/* Stand en einde */
.scorebord { list-style: none; padding: 0; margin: 0; width: min(80vw, 1400px); display: grid; gap: 1.6vh; counter-reset: plek; }
.scorebord li { display: grid; grid-template-columns: 2.2em minmax(6em, 18%) 1fr 4em; align-items: center; gap: 1vw; font-size: 1.7em; counter-increment: plek; }
.scorebord li::before { content: counter(plek); font-family: var(--kop); font-size: 1.4em; color: var(--grijs-tekst); }
.sb-naam { font-family: var(--kop); font-size: 1.3em; text-align: left; }
.sb-balk { height: 5vh; background: var(--papier); border-radius: 999px; overflow: hidden; }
.sb-balk span { display: block; height: 100%; background: var(--tk); border-radius: 999px; animation: groei 1.2s cubic-bezier(.2,.8,.2,1) both .2s; min-width: 4px; }
.sb-punten { font-weight: 900; text-align: right; }

.podiumrij { display: flex; align-items: flex-end; gap: 2vw; }
.plek { display: flex; flex-direction: column; align-items: center; width: 17vw; animation: plop .6s cubic-bezier(.3,1.6,.5,1) both; }
.plek-naam { font-family: var(--kop); font-size: 2em; }
.plek-punten { font-weight: 900; font-size: 1.3em; color: var(--grijs-tekst); }
.plek-blok { width: 100%; background: var(--tk); color: var(--tt); border-radius: 18px 18px 0 0; display: grid; place-items: start center; padding-top: .5vh; font-family: var(--kop); font-size: 3.2em; line-height: 1.1; }
.plek-1 .plek-blok { height: 17vh; } .plek-2 .plek-blok { height: 11vh; } .plek-3 .plek-blok { height: 7vh; }
.plek-1 { animation-delay: .6s; } .plek-2 { animation-delay: .3s; }
.prijzen { display: flex; gap: 1.4vw; flex-wrap: wrap; justify-content: center; }
.prijs { background: #fff; border-radius: var(--radius); padding: 1.4vh 1.4vw; width: 19vw; box-shadow: 0 6px 24px rgba(46,42,38,.08); animation: plop .5s cubic-bezier(.3,1.6,.5,1) both 1s; }
.prijs-em { font-size: 2.4em; line-height: 1; }
.prijs h3 { font-size: 1.5em; margin: .2em 0 0; }
.prijs-naam { font-weight: 900; font-size: 1.2em; margin: .2em 0; }
.prijs-uitleg { color: var(--grijs-tekst); margin: 0; font-size: .9em; }
.einde { gap: 1.2vh !important; }
.einde h1 { font-size: clamp(2rem, 3.6vw, 5.5rem); margin: 0; }
.einde .sub { margin: 0; }

/* Bedieningsbalk */
#bediening {
  display: flex; align-items: center; gap: .8em; padding: .6em 1.2vw;
  background: rgba(255,253,250,.9); border-top: 1px solid var(--lijn);
  font-size: clamp(13px, .85vw, 18px); color: var(--grijs-tekst);
}
#bediening .ruimte { flex: 1; }
#bediening button, #bediening select, .klein {
  border: 1px solid var(--lijn); background: #fff; border-radius: 12px; padding: .5em .9em; min-height: 44px;
}
#bediening button:hover, .klein:hover { background: var(--papier); }
.chip { font-weight: 800; color: var(--ink); }
.spring { display: flex; align-items: center; gap: .4em; }
.melding { font-weight: 800; color: var(--koraal-knop); }
button.verder {
  background: var(--koraal-knop) !important; color: #fff; border: 0 !important; font-weight: 900;
  padding: .6em 1.6em !important; font-size: 1.25em; border-radius: 14px !important;
}
button.verder:hover { background: var(--koraal-knop-hover) !important; }
button.verder:disabled { opacity: .45; cursor: default; }
.welkom #bediening { visibility: hidden; }
.welkom .verder { font-size: 1.6em; padding: .7em 2em !important; }

/* Voorbereiden */
dialog {
  border: 0; border-radius: 24px; padding: 0; width: min(760px, 94vw); max-height: 90vh;
  box-shadow: 0 30px 80px rgba(0,0,0,.3); font-size: 16px; color: var(--ink);
}
dialog::backdrop { background: rgba(46,42,38,.45); }
dialog form { padding: 24px 28px; display: grid; gap: 14px; }
dialog h2 { font-size: 2.2rem; }
fieldset { border: 1px solid var(--lijn); border-radius: 16px; padding: 12px 16px 16px; display: grid; gap: 10px; }
legend { font-weight: 900; padding: 0 .4em; }
fieldset p { margin: 0; }
dialog label { display: grid; gap: 4px; font-weight: 700; }
dialog input, dialog textarea, dialog select { border: 1px solid #CDBFB0; border-radius: 10px; padding: 8px 10px; background: #fff; min-height: 44px; }
dialog textarea { resize: vertical; line-height: 1.4; }
.teamnamen { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.teamnamen label { display: flex; align-items: center; gap: 8px; }
.teamnamen .stip { flex: 0 0 18px; height: 18px; border-radius: 50%; background: var(--tk); }
.teamnamen input { flex: 1; min-width: 0; }
.kopieerregel { display: flex; gap: 8px; }
.kopieerregel input { flex: 1; min-width: 0; font-size: 13px; }
.knoppenrij { display: flex; gap: 10px; flex-wrap: wrap; }
.knoppenrij.eind { justify-content: flex-end; position: sticky; bottom: -24px; background: #fff; padding: 12px 0 4px; }
dialog button { border: 1px solid var(--lijn); background: #fff; border-radius: 12px; padding: 10px 18px; font-weight: 800; min-height: 44px; }
dialog button.hoofd { background: var(--koraal-knop); color: #fff; border: 0; }
dialog button.gevaar { color: #9E2A10; border-color: #E8B7A8; }

/* Confetti */
#confetti { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 10; }
#confetti i {
  position: absolute; top: -3vh; width: 1.1vw; height: 1.8vw; border-radius: 3px;
  animation: val linear forwards;
}
@keyframes val { to { transform: translate(var(--x), 110vh) rotate(var(--draai)); } }

/* =========================================================
   TELEFOON
   ========================================================= */
body.telefoon {
  min-height: 100vh; min-height: 100dvh;
  background: var(--papier);
  font-size: 17px; line-height: 1.45;
  padding: 0 16px calc(24px + env(safe-area-inset-bottom));
  border-top: 8px solid var(--tk, var(--koraal));
}
.tel-kop { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 0; min-height: 64px; }
.tel-logo { height: 38px; width: auto; }
#telTeam { display: flex; align-items: center; gap: 8px; min-width: 0; }
.tel-naam { font-weight: 800; color: var(--grijs-tekst); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#tel { max-width: 560px; margin: 0 auto; display: grid; gap: 14px; }
.tel-kaart { background: #fff; border-radius: var(--radius); padding: 20px; box-shadow: 0 4px 18px rgba(46,42,38,.07); animation: binnen .35s ease-out both; }
.tel-kaart.midden { text-align: center; padding: 32px 20px; }
.tel-kaart h1 { font-size: 2.2rem; }
.tel-kaart h2 { font-size: 1.7rem; margin-top: .4em; }
.tel-kaart p { margin: .4em 0; }
.tel-em { font-size: 4rem; line-height: 1.1; margin-bottom: 8px; }
.tel-klein { color: var(--grijs-tekst); font-weight: 800; font-size: .95em; }
.tel-waarschuwing { background: var(--perzik-licht); border-radius: 12px; padding: 10px 12px; }
.tel-fout { position: fixed; left: 16px; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); margin: 0; background: var(--ink); color: #fff; border-radius: 14px; padding: 12px 16px; font-weight: 700; z-index: 5; }
.tel-fout:empty { display: none; }

.tel-form { display: grid; gap: 14px; }
.tel-form label { display: grid; gap: 6px; font-weight: 800; }
.tel-form input, .tel-form textarea {
  border: 2px solid #D9CBBB; border-radius: 14px; padding: 12px 14px; background: var(--wit);
  font-size: 17px; font-weight: 600; min-height: 48px; width: 100%;
}
.tel-form textarea { resize: vertical; }
.tel-form input:focus, .tel-form textarea:focus { border-color: var(--koraal-knop); outline: none; }
.tel-knop { border: 0; border-radius: 16px; min-height: 54px; padding: 12px 18px; font-weight: 900; font-size: 1.1rem; }
.tel-knop.hoofd { background: var(--koraal-knop); color: #fff; }
.tel-knop:disabled { opacity: .5; }
.tel-ok { color: var(--goed); font-weight: 800; margin: 0; min-height: 1.4em; }

.tel-antwoord { font-family: var(--kop); font-size: 1.9rem; line-height: 1.15; margin: .2em 0 .4em !important; }
.tel-stelling { font-family: var(--kop); font-size: 1.8rem; line-height: 1.15; }
.tel-namen { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 12px 0; }
.tel-namen.enkel { grid-template-columns: 1fr; }
.tel-keuze {
  border: 2px solid var(--lijn); background: var(--wit); border-radius: 16px; min-height: 56px; padding: 10px 12px;
  font-weight: 800; font-size: 1.05rem; text-align: left; border-left: 8px solid var(--kk, var(--lijn));
  transition: transform .1s, background .15s; touch-action: manipulation;
  display: flex; flex-direction: column; justify-content: center;
}
.tel-keuze small { font-weight: 700; color: var(--grijs-tekst); font-size: .8em; }
.tel-keuze:active { transform: scale(.97); }
.tel-keuze.gekozen { background: var(--ink); color: #fff; border-color: var(--ink); border-left-color: var(--kk, var(--ink)); }
.tel-keuze.gekozen small { color: #EDE6DE; }
.tel-eensoneens { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 16px 0; }
.tel-eensoneens .tel-keuze { min-height: 130px; font-size: 1.4rem; text-align: center; align-items: center; border-left-width: 2px; }
.tel-keuze.eens.gekozen { background: #3E7A3A; border-color: #3E7A3A; }
.tel-keuze.oneens.gekozen { background: var(--koraal-knop); border-color: var(--koraal-knop); }
.tel-sterren { display: flex; justify-content: center; gap: 6px; margin: 18px 0; }
.tel-keuze.ster { flex: 1 1 0; min-width: 0; max-width: 66px; min-height: 58px; aspect-ratio: 1; font-size: 2.2rem; padding: 0; align-items: center; color: var(--lijn); border-left-width: 2px; background: var(--wit); }
.tel-keuze.ster.gekozen { color: #E0A100; background: #FFF6DA; border-color: #E8C35A; }

.timer.klein { width: auto; min-width: 76px; height: 58px; padding: 0 18px; border-radius: 999px; font-size: 1.9rem; border-width: 4px; margin: 12px auto 0; justify-self: center; }

.tel-act h2 { font-size: 1.8rem; margin-top: 0; }
.tel-act-kort { color: var(--grijs-tekst); }
.tel-act h3 { font-size: 1.4rem; margin-top: .8em; }
.tel-act ol { padding-left: 1.3em; margin: 0; display: grid; gap: 8px; }
.tel-drempel { background: var(--perzik-licht); border-radius: 12px; padding: 10px 12px; }
.tel-tip { background: var(--salie-licht); border-radius: 12px; padding: 10px 12px; }
.tel-prijs { background: #FFF6DA; border-radius: 14px; padding: 12px; font-size: 1.1em; }
.tel-aftel { font-family: var(--kop); font-size: 7rem; line-height: 1; color: var(--koraal-knop); }

.tel-tik { display: grid; place-items: center; gap: 16px; padding-top: 4vh; }
.tik-knop {
  width: min(78vw, 360px); aspect-ratio: 1; border-radius: 50%; border: 0;
  background: var(--tk, var(--koraal-knop)); color: var(--tt, #fff);
  font-family: var(--kop); font-size: 4.5rem; line-height: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  box-shadow: 0 14px 0 rgba(46,42,38,.25), 0 20px 40px rgba(46,42,38,.25);
  touch-action: manipulation; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent;
}
.tik-knop small { font-family: 'Nunito'; font-weight: 900; font-size: 1.6rem; opacity: .9; }
.tik-knop.tik { animation: indruk .12s ease-out; }
@keyframes indruk { 50% { transform: translateY(8px) scale(.96); box-shadow: 0 6px 0 rgba(46,42,38,.25), 0 10px 20px rgba(46,42,38,.2); } }