/* ============================================================
   /over-ons — pagina-eigen CSS (prefix `ov-`)

   Herbouw 06-08-2026: dezelfde pagina, dezelfde volgorde, dezelfde
   teksten en dezelfde beelden als de Tailwind-versie, maar op het
   designsysteem (BOUWGIDS §2 t/m §4). Alles wat het systeem al kan
   staat NIET hier: banden (.section--*), koppen, .lead, .btn, .card,
   .chip, .badge, .media-frame, .glow, .constellation, .em-kruimel
   en de reveal-motion komen uit tokens/base/components + ems-gedeeld.

   Hier staat alleen wat uniek is aan deze pagina: de bento-wand, het
   drieluik teamfoto's, de "Méér dan"-kop met de telefoon ertussen,
   het venue-/logoraster van In goed gezelschap, de videospeler met
   zijn verspringende omlijning, de jaartijdlijn en de grote teller.

   Nooit hardgecodeerde kleuren of maten: alles via tokens (§3).
   ============================================================ */

/* ---------- gedeelde bouwstenen van deze pagina ---------- */

/* Redactionele kolom: meerdere alinea's onder elkaar op leesritme.
   De alinea's zijn los gehouden (geen <br>-blokken), zodat ze op
   mobiel netjes afbreken. */
.ov-tekst > p {
    margin: 0 0 var(--sp-5);
    max-width: 42rem;
}
.ov-tekst > p:last-child {
    margin-bottom: 0;
}

/* Bijschrift onder een beeld op een LICHTE band. `.media-caption` uit
   components.css is krijtwit (bedoeld voor inkt-banden) en zou hier
   onder 4,5:1 zakken. */
.ov-bijschrift {
    font-size: var(--fs-small);
    line-height: 1.6;
    color: var(--c-ink-soft);
    font-style: italic;
    margin: var(--sp-4) 0 0;
    max-width: 20rem;
    margin-left: auto;
    text-align: right;
}
.ov-bijschrift strong {
    font-style: normal;
    font-weight: 600;
}

/* Link in lopende tekst. `a` erft standaard alleen de kleur, dus een
   verwijzing midden in een zin moet zichzelf aankondigen. */
.ov-tekstlink {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.18em;
    text-decoration-color: var(--c-ink-40);
    transition: text-decoration-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.ov-tekstlink:hover {
    color: var(--c-orange-deep);
    text-decoration-color: var(--c-orange-deep);
}

/* ---------- 1. Hero ---------- */

.ov-hero {
    padding-block: var(--section-y) 0;
    text-align: center;
}
/* De kop staat op twee regels, met een harde breuk na de komma. Ruim genoeg
   gehouden dat de langste helft ("gastvrijheid is wat we leveren.") past;
   `balance` staat uit, want die zou de breuk opnieuw verdelen. */
.ov-hero h1 {
    max-width: 34ch;
    margin-inline: auto;
}
.ov-hero .lead {
    max-width: 46rem;
    margin-inline: auto;
}
.ov-hero .lead + .lead {
    margin-top: var(--sp-4);
}
.ov-hero-beeld {
    margin-top: clamp(2.5rem, 6vw, var(--sp-9));
}
.ov-hero-beeld img {
    display: block;
    width: 100%;
    height: auto;
}

/* Het beeld loopt breder dan de tekstcontainer: het is een groepsfoto,
   die verdient de volle bandbreedte binnen een marge. */
.ov-breed {
    width: min(100%, 102rem);
    margin-inline: auto;
    padding-inline: var(--sp-4);
}

/* ---------- 2. Het doel / de reis (twee split-rijen) ---------- */

.ov-rij + .ov-rij {
    margin-top: clamp(4rem, 9vw, var(--sp-9));
}
.ov-rij-beeld img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--r-media);
}
/* De clipart hangt bewust over de onderrand van de foto heen, zoals in
   de oude opmaak. Geen overflow:hidden op de ouder, anders klipt hij. */
.ov-clipart {
    display: block;
    margin: calc(-1 * var(--sp-6)) auto 0;
    max-width: 60%;
    height: auto;
    position: relative;
}

/* ---------- 3. Omdat… (drieluik teamfoto's) ---------- */

.ov-teamraster {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: var(--sp-5);
}
.ov-teamraster > div {
    display: grid;
    gap: var(--sp-5);
}
.ov-teamfoto {
    border-radius: var(--r-media);
    overflow: hidden;
    min-height: 12rem;
}
.ov-teamfoto img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.ov-teamraster > .ov-teamfoto {
    min-height: clamp(18rem, 34vw, 33.75rem);
}
@media (max-width: 800px) {
    .ov-teamraster {
        grid-template-columns: 1fr;
    }
    .ov-teamraster > .ov-teamfoto {
        min-height: 18rem;
    }
}

/* ---------- 4. Platform-wand (bento) ---------- */

.ov-bento {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--sp-5);
}
.ov-bento + .ov-bento {
    margin-top: var(--sp-5);
}
.ov-bento .card {
    background: var(--c-surface);
    border-radius: var(--r-card);
    padding: clamp(1.75rem, 3vw, var(--sp-7));
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.ov-bento .h-fn {
    margin: 0 0 var(--sp-5);
}
.ov-bento p {
    font-size: var(--fs-small);
    line-height: 1.6;
    color: var(--c-ink-soft);
    margin: 0 0 var(--sp-4);
    max-width: 34ch;
}
.ov-bento p:last-of-type {
    margin-bottom: 0;
}
/* Kaartkop met een chip ernaast ("uniek") */
.ov-kaartkop-rij {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    flex-wrap: wrap;
    margin-bottom: var(--sp-5);
}
.ov-kaartkop-rij .h-fn {
    margin: 0;
}

/* ---- De kaart als ingang ----
   Elke kaart wijst naar de pagina van díe functie. De link zit op de
   kaartkop (één link per kaart in de leesvolgorde) en spant met een
   ::after de hele kaart op. De kaart zelf tilt op en de pijl komt
   binnen, zodat het klikbare karakter zichtbaar is vóór je klikt. */
.ov-kaart {
    transition: transform var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease);
}
.ov-kaart:hover,
.ov-kaart:focus-within {
    transform: translateY(-4px);
    box-shadow: var(--shadow-pop);
}
.ov-kaart-a {
    text-decoration: none;
}
.ov-kaart-a::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
    border-radius: var(--r-card);
}
.ov-kaart-pijl {
    position: absolute;
    top: clamp(1.75rem, 3vw, var(--sp-7));
    right: clamp(1.75rem, 3vw, var(--sp-7));
    z-index: 2;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--r-pill);
    display: grid;
    place-items: center;
    background: var(--c-bg);
    color: var(--c-ink);
    opacity: 0;
    transform: translateX(-6px);
    transition: opacity var(--t-med) var(--ease), transform var(--t-med) var(--ease);
}
.ov-kaart:hover .ov-kaart-pijl,
.ov-kaart:focus-within .ov-kaart-pijl {
    opacity: 1;
    transform: none;
}
.ov-kaart-pijl svg {
    width: 1.25rem;
    height: 1.25rem;
}
@media (prefers-reduced-motion: reduce) {
    .ov-kaart,
    .ov-kaart-pijl {
        transition: none;
    }
    .ov-kaart:hover,
    .ov-kaart:focus-within {
        transform: none;
    }
}
/* De kaartkop staat naast de pijl: houd er ruimte voor vrij. */
.ov-kaart > .h-fn,
.ov-kaart > .ov-kaartkop-rij,
.ov-kaart .ov-kaart-split .h-fn {
    padding-right: 3rem;
}

/* Kolomindeling van de eerste wand: 3 + 2 */
.ov-bento-3 {
    grid-column: span 3;
    display: grid;
    gap: var(--sp-5);
}
.ov-bento-2 {
    grid-column: span 2;
}

/* Kaart met beeld naast de tekst */
.ov-kaart-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-5);
    align-items: start;
}
.ov-kaart-split img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--r-tile);
}
.ov-kaart-ill {
    width: 8rem;
    height: auto;
    margin-top: var(--sp-4);
}

/* Beeld dat in de hoek van de kaart hangt (assistent, gastenplatform,
   sales-widget, leads). Vaste ondermarge zodat de tekst er nooit
   overheen valt: de kaart groeit mee, het beeld blijft ankeren. */
.ov-kaart-hoek {
    position: relative;
    min-height: 24rem;
}
.ov-kaart-hoek img {
    position: absolute;
    bottom: 0;
    right: 0;
    max-width: 88%;
    height: auto;
    pointer-events: none;
}
.ov-kaart-hoek--midden img {
    left: 0;
    right: 0;
    margin-inline: auto;
    max-width: 100%;
}
.ov-kaart-vol img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--r-tile);
    margin-top: auto;
}

/* Tweede wand: 3 + 3 + 2 */
.ov-bento--drie {
    grid-template-columns: repeat(8, 1fr);
}
.ov-bento--drie > .ov-b3 {
    grid-column: span 3;
}
.ov-bento--drie > .ov-b2 {
    grid-column: span 2;
    display: grid;
    gap: var(--sp-5);
}

@media (max-width: 1000px) {
    .ov-bento,
    .ov-bento--drie {
        grid-template-columns: 1fr;
    }
    .ov-bento-3,
    .ov-bento-2,
    .ov-bento--drie > .ov-b3,
    .ov-bento--drie > .ov-b2 {
        grid-column: 1 / -1;
    }
    .ov-kaart-split {
        grid-template-columns: 1fr;
    }
    .ov-kaart-hoek {
        min-height: 21rem;
    }
}

/* ---------- 5. Méér dan alleen software ---------- */

.ov-meerdan {
    text-align: center;
}
/* De telefoon staat tússen de twee tekstdelen en zakt onder de
   basislijn door; op smal scherm gaat hij ertussen op een eigen regel. */
.ov-meerdan-kop {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: clamp(0.5rem, 2vw, var(--sp-5));
    margin-bottom: var(--sp-7);
}
.ov-meerdan-kop h2 {
    margin: 0;
    font-size: clamp(2rem, 6vw, 4.25rem);
    line-height: 1;
    white-space: nowrap;
}
.ov-meerdan-kop em {
    font-style: italic;
    opacity: 0.5;
}
.ov-meerdan-kop img {
    display: block;
    width: clamp(7rem, 14vw, 13rem);
    height: auto;
    align-self: flex-end;
}
@media (max-width: 800px) {
    .ov-meerdan-kop {
        flex-direction: column;
        align-items: center;
        gap: var(--sp-4);
    }
    .ov-meerdan-kop h2 {
        white-space: normal;
    }
}
.ov-diensten {
    font-size: var(--fs-small);
    font-weight: 600;
    letter-spacing: 0.06em;
    margin: var(--sp-5) 0 0;
}
.ov-diensten .sep {
    color: var(--c-ink-40);
    margin-inline: var(--sp-3);
}
.ov-meerdan-cover {
    display: block;
    max-width: 100%;
    height: auto;
    margin: clamp(2.5rem, 6vw, var(--sp-8)) auto 0;
}
.ov-midden-actie {
    display: flex;
    justify-content: center;
    margin-top: clamp(2.5rem, 5vw, var(--sp-8));
}

/* ---------- 7. Vertrouwd netwerk ---------- */

/* "constell" moet uit de kop springen, "ation" hoort erachteraan te zakken.
   0,52 is de lichtste stand die op de steen-band nog boven 3:1 blijft
   (gemeten 3,1:1), de eis voor grote tekst. */
.ov-staart {
    font-style: italic;
    opacity: 0.52;
}

.ov-netwerk-beeld {
    display: block;
    max-width: 100%;
    height: auto;
    margin-inline: auto;
}
.ov-netwerk .lead {
    max-width: 40rem;
    margin-inline: auto;
}

/* ---------- 8. Founders ---------- */

.ov-founders {
    display: grid;
    grid-template-columns: minmax(0, 30%) minmax(0, 1fr);
    gap: clamp(2rem, 7vw, var(--sp-9));
    align-items: start;
}
@media (max-width: 900px) {
    .ov-founders {
        grid-template-columns: 1fr;
    }
}
.ov-founder-foto img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--r-card);
    box-shadow: var(--shadow-pop);
}
.ov-founder-bij {
    font-size: var(--fs-small);
    color: var(--c-ink-soft);
    margin: var(--sp-4) 0 0;
}
.ov-founder-bij p {
    margin: 0;
}
.ov-socials {
    display: flex;
    gap: var(--sp-3);
    margin-top: var(--sp-4);
}
.ov-socials a {
    display: inline-flex;
    border-radius: var(--r-btn);
}
.ov-founders-intro {
    font-weight: 600;
    margin: 0 0 var(--sp-6);
}

/* ---------- 9. In goed gezelschap (inkt) ---------- */

.ov-gezelschap {
    display: grid;
    grid-template-columns: minmax(0, 44%) minmax(0, 1fr);
    gap: clamp(2.5rem, 8vw, var(--sp-9));
}
@media (max-width: 1000px) {
    .ov-gezelschap {
        grid-template-columns: 1fr;
    }
}
.ov-gezelschap-sub {
    color: var(--c-on-dark);
    opacity: 0.5;
    margin: 0 0 var(--sp-7);
}
.ov-venueraster {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--sp-4);
}
.ov-venueraster div {
    border-radius: var(--r-tile);
    overflow: hidden;
    aspect-ratio: 3 / 4;
}
.ov-venueraster img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--t-med) var(--ease), filter var(--t-med) var(--ease);
}
.ov-venueraster div:hover img {
    transform: scale(1.08);
    filter: brightness(1.15);
}
.ov-venue-actie {
    display: flex;
    justify-content: center;
    margin-top: var(--sp-7);
}

/* 1000+ met de zwarte diamant en zijn witte halo. De ster zelf is inkt;
   wat je ziet is de gloed eromheen (BOUWGIDS §5.11 stap 7). */
.ov-mijlpaal {
    display: flex;
    align-items: center;
    gap: var(--sp-6);
    margin-bottom: var(--sp-8);
}
.ov-mijlpaal .ov-ster {
    flex-shrink: 0;
    animation: ov-halo 3s ease-in-out infinite;
}
@keyframes ov-halo {
    0%,
    100% {
        filter: drop-shadow(0 0 29px rgba(255, 255, 255, 0.7));
    }
    50% {
        filter: drop-shadow(0 0 50px rgba(255, 255, 255, 0.25));
    }
}
@media (prefers-reduced-motion: reduce) {
    .ov-mijlpaal .ov-ster {
        animation: none;
        filter: drop-shadow(0 0 29px rgba(255, 255, 255, 0.55));
    }
}
.ov-mijlpaal h3 {
    font-size: clamp(2.7rem, 5vw, 4.05rem);
    line-height: 1;
    margin: 0 0 var(--sp-2);
    color: var(--c-on-dark);
}
.ov-mijlpaal p {
    margin: 0;
    color: var(--c-on-dark);
}
.ov-logoraster {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--sp-6) var(--sp-7);
    align-items: center;
}
.ov-logoraster img {
    display: block;
    width: auto;
    max-width: 100%;
    max-height: 6.75rem;
    margin-inline: auto;
    opacity: 0.8;
    transition: opacity var(--t-fast) var(--ease);
}
.ov-logoraster img:hover {
    opacity: 1;
}

/* De grote klantuitspraak onder het raster. Grotesk, niet serif: de
   losse scroll-quote mag geen serif zijn (§3.2). */
.ov-emg {
    margin-top: clamp(3rem, 8vw, var(--sp-9));
    text-align: center;
}
.ov-emg blockquote {
    font-size: clamp(1.6rem, 3.6vw, 3.15rem);
    line-height: 1.25;
    font-weight: 300;
    max-width: 62rem;
    margin: 0 auto var(--sp-8);
    text-wrap: balance;
    color: var(--c-on-dark);
}
.ov-emg blockquote em {
    font-style: normal;
    color: var(--c-orange);
}
.ov-emg-wie {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: clamp(1.5rem, 5vw, var(--sp-9));
}
.ov-emg-persoon {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
}
.ov-emg-portret {
    width: 5rem;
    aspect-ratio: 3 / 4;
    border-radius: var(--r-tile);
    overflow: hidden;
    flex-shrink: 0;
}
.ov-emg-portret img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
}
.ov-emg-persoon p {
    margin: 0;
    text-align: left;
    color: var(--c-on-dark);
}
.ov-emg-persoon .rol {
    font-size: var(--fs-small);
    opacity: 0.5;
}
/* Het EMG-logo stond op 4rem en verdween daarmee naast het portret. Fors
   groter, en iets minder gedempt (0,3 → 0,5) omdat het anders juist door
   het formaat als een vlek gaat lezen. */
.ov-emg-logo img {
    max-height: clamp(5.5rem, 10vw, 10rem);
    max-width: 100%;
    width: auto;
    opacity: 0.5;
}

/* ---------- 10. Videoblok ---------- */

/* De verspringende omlijning uit het oude ontwerp: een tweede kader dat
   links-onder uitsteekt. Pas vanaf 700px, daaronder zou hij overlopen. */
.ov-video-wrap {
    position: relative;
}
.ov-video {
    position: relative;
    border: 1px solid var(--c-ink);
    border-radius: var(--r-media);
    line-height: 0;
}
.ov-video video {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--r-media);
}
@media (min-width: 700px) {
    .ov-video-wrap {
        padding-left: var(--sp-5);
    }
    .ov-video::after {
        content: "";
        position: absolute;
        left: calc(-1 * var(--sp-5));
        top: var(--sp-5);
        width: 100%;
        height: 100%;
        border: 1px solid var(--c-ink);
        border-radius: var(--r-media);
        z-index: 0;
    }
}
.ov-video-balk {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-4);
    margin-top: var(--sp-6);
}
.ov-video-knoppen {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
}
.ov-video-knoppen button {
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    border-radius: var(--r-pill);
    display: inline-flex;
}
.ov-video-knoppen img {
    display: block;
    max-width: 2.7rem;
}
.ov-video-balk h2 {
    margin: 0;
    font-size: clamp(1.6rem, 3.4vw, 3.375rem);
}
@media (min-width: 700px) {
    .ov-video-balk {
        flex-direction: row;
        align-items: center;
        gap: var(--sp-4);
        margin-top: var(--sp-7);
    }
    .ov-video-balk h2 {
        margin-left: auto;
        text-align: right;
    }
    .ov-video-knoppen img {
        max-width: 4rem;
    }
}

/* ---------- 11. Jaartijdlijn ---------- */

/* Eindstand-eerst (§2 wet 3): zónder JS staan álle jaren open onder
   elkaar als leesbare lijst. De kolomweergave zet JS aan door
   `data-tijdlijn="aan"` op de wrapper te zetten. */
.ov-tijdlijn-jaar + .ov-tijdlijn-jaar {
    border-top: 1px solid var(--c-ink);
}
.ov-tijdlijn-jaar:first-child {
    border-top: 1px solid var(--c-ink);
}
.ov-tijdlijn-knop {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: var(--sp-4);
    padding: var(--sp-4) 0;
    background: none;
    border: 0;
    cursor: pointer;
    text-align: left;
    color: inherit;
    font: inherit;
}
.ov-tijdlijn-jaartal {
    font-family: var(--font-display);
    font-size: var(--fs-kaartkop);
    font-weight: 700;
    line-height: 1;
}
.ov-tijdlijn-chevron {
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
    transition: transform var(--t-med) var(--ease);
}
.ov-tijdlijn-knop[aria-expanded="true"] .ov-tijdlijn-chevron {
    transform: rotate(180deg);
}
.ov-tijdlijn-paneel {
    padding-bottom: var(--sp-6);
    max-width: 42rem;
}
.ov-tijdlijn-paneel p {
    margin: 0 0 var(--sp-5);
}
.ov-tijdlijn-paneel img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--r-tile);
}

/* Kolomweergave vanaf 1024px, alleen als JS hem heeft aangezet.

   Hier wordt bewust HOOGTE en PADDING geanimeerd in plaats van transform:
   de kolom groeit van 25% naar 100% terwijl zijn buren krimpen, en het
   jaartal groeit van 24px naar 162px mee. Dat is precies het gebaar uit
   het oude ontwerp, en het is met transform niet na te maken zonder de
   tekst te vervormen. Het gaat om acht elementen, één keer per klik,
   niet om scroll-gestuurde motie. */
@media (min-width: 1024px) {
    .ov-tijdlijn[data-tijdlijn="aan"] {
        display: flex;
        align-items: flex-end;
        height: 32.5rem;
    }
    .ov-tijdlijn[data-tijdlijn="aan"] .ov-tijdlijn-jaar {
        flex: 1 1 0;
        min-width: 0;
        transition: flex-basis var(--t-med) var(--ease);
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        height: 25%;
        padding-left: var(--sp-4);
        border-top: 0;
        border-left: 1px solid var(--c-ink);
        border-bottom: 1px solid var(--c-ink);
        cursor: pointer;
        transition: height var(--t-med) var(--ease), padding var(--t-med) var(--ease),
            border-bottom-width var(--t-med) var(--ease);
    }
    /* Het open jaar krijgt een eigen breedte. In het oude ontwerp hield elke
       kolom exact 1/8 van de balk en stak de tekst van het open jaar er
       gewoon overheen: het beeld lag dan bovenop de jaartallen 2020 en 2021.
       Nu maakt het open jaar plaats voor zijn eigen paneel en schuiven de
       andere jaren op. */
    .ov-tijdlijn[data-tijdlijn="aan"] .ov-tijdlijn-jaar[data-open="true"] {
        flex: 0 0 clamp(20rem, 26vw, 24rem);
        height: 100%;
        padding-left: var(--sp-6);
        padding-right: var(--sp-5);
        border-bottom-width: 9px;
    }
    .ov-tijdlijn[data-tijdlijn="aan"] .ov-tijdlijn-knop {
        padding: 0;
        cursor: pointer;
        justify-content: flex-start;
    }
    .ov-tijdlijn[data-tijdlijn="aan"] .ov-tijdlijn-chevron {
        display: none;
    }
    .ov-tijdlijn[data-tijdlijn="aan"] .ov-tijdlijn-jaartal {
        white-space: nowrap;
        transition: font-size var(--t-med) var(--ease), margin var(--t-med) var(--ease);
    }
    .ov-tijdlijn[data-tijdlijn="aan"] .ov-tijdlijn-jaar[data-open="true"] .ov-tijdlijn-jaartal {
        font-size: 10.125rem;
        margin-top: -2.4rem;
    }
    .ov-tijdlijn[data-tijdlijn="aan"] .ov-tijdlijn-paneel {
        width: 100%;
        padding-top: var(--sp-3);
        opacity: 0;
        visibility: hidden;
        transition: opacity var(--t-med) var(--ease);
    }
    .ov-tijdlijn[data-tijdlijn="aan"] .ov-tijdlijn-jaar[data-open="true"] .ov-tijdlijn-paneel {
        opacity: 1;
        visibility: visible;
    }
    .ov-tijdlijn[data-tijdlijn="aan"] .ov-tijdlijn-paneel img {
        margin-top: var(--sp-5);
    }
}

/* ---------- 12. De grote teller (inkt) ---------- */

.ov-teller {
    text-align: center;
}
.ov-teller-label {
    font-family: var(--font-display);
    font-size: var(--fs-kaartkop);
    font-weight: 600;
    color: var(--c-on-dark);
    margin: 0 0 var(--sp-5);
}
.ov-teller-getal {
    font-family: var(--font-display);
    font-size: clamp(4rem, 12vw, 12.6rem);
    font-weight: 600;
    line-height: 1;
    color: var(--c-on-dark);
    font-variant-numeric: tabular-nums;
    margin: 0 0 clamp(3rem, 9vw, 9.3rem);
}
.ov-teller-rij {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(2rem, 7vw, var(--sp-9));
}
.ov-teller-rij + .ov-teller-rij {
    margin-top: clamp(2rem, 7vw, 7rem);
}
.ov-teller-cijfer {
    font-family: var(--font-display);
    font-size: clamp(2.2rem, 4.5vw, 3.5rem);
    font-weight: 600;
    line-height: 1;
    color: var(--c-on-dark);
    margin: 0;
}
.ov-teller-cijfer small {
    display: block;
    font-family: var(--font-body);
    font-size: var(--fs-small);
    font-weight: 300;
    line-height: 1.5;
    margin-top: var(--sp-2);
}
@media (max-width: 700px) {
    .ov-teller-rij {
        grid-template-columns: 1fr;
        gap: var(--sp-6);
    }
}