/* ---------- KEGEL hero video met overlay tekst ---------- */ .kegel-hero { position: relative; width: 100%; aspect-ratio: 16 / 9; /* pas aan naar de echte verhouding van de Vimeo video */ overflow: hidden; container-type: inline-size; /* laat de tekst meeschalen met de video, niet met het scherm */ } .kegel-hero iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; } .kegel-hero__overlay { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; justify-content: flex-end; /* tekst onderaan. Gebruik center voor midden. */ align-items: center; text-align: center; padding: 0 5% 8% 5%; /* onderste waarde bepaalt de hoogte van de tekst */ pointer-events: none; /* video blijft klikbaar */ } .kegel-hero__title, .kegel-hero__subtitle { margin: 0; color: #FFFFFF !important; font-family: "GT Sectra; font-weight: 400; line-height: 1.4; } .kegel-hero__title { font-size: clamp(18px, 4.4cqw, 96px); letter-spacing: 0.27em; text-indent: 0.22em; /* compenseert de spatie achter de laatste letter */ text-transform: uppercase; } .kegel-hero__subtitle { margin-top: 1.2cqw; font-size: clamp(15px, 2.6cqw, 48px) ; letter-spacing: 0.30em; text-indent: 0.30em; } /* Op smalle schermen de tekst iets hoger en compacter */ @media (max-width: 767px) { .kegel-hero__overlay { padding-bottom: 3%; } .kegel-hero__title { line-height: 1.2; text-indent: 0.14em; } .kegel-hero__subtitle { text-indent: 0.18em; } }