/* Kwistig: muziek-tijdlijn (proef). Tv en telefoon naast elkaar op één pagina. */
.tl-kop .kopband-inhoud h1 { margin: .1em 0 .2em; }
.tl-proef { display: inline-block; margin: 0; padding: .3em .9em; border-radius: 999px; background: rgba(var(--accent-rgb), .18); border: 1px solid rgba(var(--accent-rgb), .5); font-weight: 800; font-size: .9rem; }
.tl { max-width: 1240px; margin: 0 auto; padding: 24px 16px 64px; display: grid; gap: 28px; }
.tl-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.tl-klein { color: var(--tekst-zacht); font-size: .95rem; }

/* instellingen */
.tl-instellingen { display: grid; gap: 12px; padding: 18px; border-radius: 18px; background: rgba(255, 255, 255, .04); border: 1px solid var(--lijn); }
.tl-keuze { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.tl-label { min-width: 7.5em; font-weight: 800; }
.tl-keuze button { min-height: 44px; padding: .45em 1em; border-radius: 999px; border: 1px solid var(--lijn); background: transparent; color: var(--tekst); font: inherit; font-weight: 700; cursor: pointer; }
.tl-keuze button[aria-checked="true"] { background: var(--messing); border-color: var(--messing); color: var(--kroegzwart); }
.tl-keuze button:disabled { opacity: .5; cursor: default; }
.tl-start-rij { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin: 4px 0 0; }
.tl-knop { min-height: 48px; padding: .55em 1.3em; border: 0; border-radius: 999px; background: var(--accent); color: var(--kroegzwart); font: inherit; font-weight: 800; cursor: pointer; }
.tl-knop:disabled { opacity: .45; cursor: default; }
.tl-knop.tl-groot { font-size: 1.15rem; padding: .7em 1.6em; }
.tl-knop:focus-visible, .tl-keuze button:focus-visible, .tl-slot:focus-visible { outline: 3px solid var(--messing-licht); outline-offset: 2px; }

/* podium: tv links, telefoon rechts */
.tl-podium { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 24px; align-items: start; }
@media (max-width: 900px) { .tl-podium { grid-template-columns: minmax(0, 1fr); } }

/* tv */
.tl-tv { position: relative; aspect-ratio: 16 / 9; border-radius: 18px; overflow: hidden; border: 8px solid #0b0806; box-shadow: var(--schaduw-object);
  background: radial-gradient(ellipse at 50% 120%, rgba(var(--accent-rgb), .35), transparent 60%), radial-gradient(ellipse at 20% 0%, rgba(18, 99, 255, .25), transparent 55%), #130D09;
  display: grid; grid-template-rows: auto 1fr auto auto; container-type: inline-size; }
.tl-tv-kop { display: flex; justify-content: space-between; align-items: center; padding: 2.2cqw 3cqw 0; font-weight: 800; font-size: 2.1cqw; color: var(--tekst-zacht); }
.tl-tv-logo { font-family: var(--kop); color: var(--schuim); font-size: 2.6cqw; }
.tl-tv-midden { display: grid; place-items: center; text-align: center; padding: 0 4cqw; min-height: 0; }
.tl-tv-midden h2 { font-family: var(--kop); font-size: 4.6cqw; line-height: 1.05; margin: 0; }
.tl-tv-midden p { margin: .4em 0 0; font-size: 2.2cqw; color: var(--tekst-zacht); }
.tl-plaat-rij { display: flex; align-items: center; gap: 4cqw; }
.tl-plaat { width: 20cqw; aspect-ratio: 1; border-radius: 50%; flex: none;
  background: radial-gradient(circle, var(--accent) 0 14%, #111 15% 17%, transparent 18%), repeating-radial-gradient(circle, #1b1b1b 0 1.2%, #0b0b0b 1.3% 2.4%);
  box-shadow: 0 0 0 .6cqw rgba(255, 255, 255, .05), 0 2cqw 4cqw rgba(0, 0, 0, .6); animation: tl-draai 2.4s linear infinite; }
.tl-plaat.stil { animation-play-state: paused; }
@keyframes tl-draai { to { transform: rotate(360deg); } }
.tl-onthul { display: grid; gap: .3cqw; animation: tl-in .5s var(--uit); }
.tl-onthul .tl-jaar-groot { font-family: var(--kop); font-size: 11cqw; line-height: .95; color: var(--messing); }
.tl-onthul b { font-size: 3.4cqw; }
.tl-onthul span { font-size: 2.4cqw; color: var(--tekst-zacht); }
@keyframes tl-in { from { opacity: 0; transform: scale(.9); } }
.tl-tv-teams { display: flex; justify-content: center; flex-wrap: wrap; gap: 1.2cqw; padding: 0 3cqw 1.6cqw; }
.tl-team { display: grid; gap: .5cqw; min-width: 18cqw; padding: 1cqw 1.4cqw; border-radius: 1.4cqw; background: rgba(0, 0, 0, .55); border: 1px solid rgba(255, 255, 255, .12); font-size: 1.8cqw; }
.tl-team-naam { display: flex; justify-content: space-between; gap: 1cqw; font-weight: 800; }
.tl-team.ik { border-color: var(--messing); }
.tl-team.goed { border-color: #3DDC84; box-shadow: 0 0 0 .3cqw rgba(61, 220, 132, .3); }
.tl-team.fout { border-color: #FF5D5D; }
.tl-balk { display: flex; gap: .3cqw; height: 1.2cqw; }
.tl-balk i { flex: 1; border-radius: .3cqw; background: rgba(255, 255, 255, .12); }
.tl-balk i.aan { background: var(--messing); }
.tl-tijd { height: .9cqw; margin: 0 3cqw 2cqw; border-radius: 1cqw; background: rgba(255, 255, 255, .1); overflow: hidden; }
.tl-tijd[hidden] { display: none; }
.tl-tijd i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, var(--accent), var(--messing)); transform-origin: left; transform: scaleX(var(--rest, 1)); }

/* telefoon */
.tl-tel { justify-self: center; width: 100%; max-width: 340px; padding: 12px; border-radius: 36px; background: #0b0806; box-shadow: var(--schaduw-object); }
.tl-tel-scherm { display: grid; grid-template-rows: auto auto 1fr auto; gap: 10px; height: 640px; padding: 16px 14px; border-radius: 26px; background: linear-gradient(180deg, #1d140e, #130D09); overflow: hidden; }
.tl-tel-kop { display: flex; justify-content: space-between; align-items: baseline; }
.tl-tel-kop b { font-family: var(--kop); font-size: 1.3rem; }
.tl-tel-kop span { color: var(--tekst-zacht); font-weight: 700; }
.tl-tel-melding { margin: 0; padding: .6em .8em; border-radius: 12px; background: rgba(255, 255, 255, .06); font-weight: 700; min-height: 2.6em; }
.tl-tel-melding.goed { background: rgba(61, 220, 132, .18); }
.tl-tel-melding.fout { background: rgba(255, 93, 93, .18); }
.tl-lijn { min-height: 0; list-style: none; margin: 0; padding: 0 2px; overflow-y: auto; display: grid; align-content: start; gap: 6px; }
.tl-kaart { display: grid; grid-template-columns: 4.2em minmax(0, 1fr); gap: 10px; align-items: center; padding: 10px 12px; border-radius: 12px; background: var(--schuim); color: var(--inkt); }
.tl-kaart .j { font-family: var(--kop); font-size: 1.5rem; }
.tl-kaart .t { min-width: 0; font-size: .92rem; line-height: 1.2; }
.tl-kaart .t b, .tl-kaart .t span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tl-kaart.nieuw { animation: tl-in .5s var(--uit); box-shadow: 0 0 0 3px #3DDC84; }
.tl-slot { width: 100%; min-height: 40px; border: 2px dashed rgba(var(--accent2-rgb), .45); border-radius: 12px; background: transparent; color: var(--tekst-zacht); font: inherit; font-weight: 800; cursor: pointer; }
.tl-slot:hover { border-color: var(--messing); color: var(--tekst); }
.tl-slot[aria-pressed="true"] { border-style: solid; border-color: var(--accent); background: rgba(var(--accent-rgb), .22); color: var(--tekst); }
.tl-slot:disabled { opacity: .35; cursor: default; }
.tl-tel-onder { display: grid; gap: 8px; }
.tl-tel-onder[hidden] { display: none; }
.tl-jaar { display: grid; gap: 4px; font-weight: 700; font-size: .92rem; }
.tl-jaar span { color: var(--tekst-zacht); font-weight: 600; }
.tl-jaar input { min-height: 44px; padding: 0 .8em; border-radius: 10px; border: 1px solid var(--lijn); background: rgba(255, 255, 255, .06); color: var(--tekst); font: inherit; }

.tl-uitleg ul { padding-left: 1.2em; } .tl-uitleg li { margin: .3em 0; }

@media (prefers-reduced-motion: reduce) { .tl-plaat { animation: none; } .tl-onthul, .tl-kaart.nieuw { animation: none; } }