/* Aanvulling op stijl.css voor de merksite: bredere pagina, menu, held, galerij. */
main { max-width: 960px; justify-content: flex-start; }
.balk { max-width: 960px; flex-wrap: wrap; }
.voet { max-width: 960px; }
.menu { display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; }
.menu a { text-decoration: none; color: var(--ink); font-weight: 600; padding: 6px 12px; border-radius: 999px; }
.menu a[aria-current="page"] { background: var(--ink); color: #fff; }
/* Op aanraakschermen: knoppen en links minstens 44 px hoog, zodat ze goed aan te tikken zijn */
@media (pointer: coarse), (max-width: 900px) {
  .talen button { min-height: 44px; min-width: 48px; }
  .menu a { display: inline-flex; align-items: center; min-height: 44px; }
}
/* Toegankelijkheid */
/* Duidelijke focusrand voor toetsenbordgebruikers op alles wat aan te klikken is */
:focus-visible { outline: 3px solid #7a4be0; outline-offset: 3px; }
/* Link om de menu's over te slaan: pas zichtbaar als je met Tab binnenkomt */
.skip { position: absolute; left: 12px; top: -80px; z-index: 10; background: var(--ink); color: #fff; padding: 12px 18px; border-radius: 12px; font-weight: 600; text-decoration: none; }
.skip:focus { top: 12px; }
main:focus { outline: none; }
/* Genoeg kleurcontrast (minstens 4,5 : 1): donkerder roze voor de knop, donkere tekst op de gekleurde pillen */
/* De hoofdknop heeft grote, vette tekst (20 px): daarvoor is 3 : 1 genoeg; dit roze haalt 3,7 : 1 */
.knop { background: #ee4276; box-shadow: 0 5px 0 #b02a56; }
.knop:active { box-shadow: 0 2px 0 #b02a56; }
.knop.licht { background: #f4eefa; color: var(--ink); box-shadow: 0 4px 0 var(--rand); }
.spelkaart .speel { color: var(--ink); }
.knop.uitgeschakeld { background: #ece3f2; color: var(--muted); box-shadow: none; opacity: 1; }
.knop.klein { min-height: 44px; }
/* Beweging uit: geen verrassende animaties voor wie dat niet wil */
@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }
.thema h2 { margin: 0; padding: 10px 14px 14px; font-size: 1.05rem; }
.filmknop { align-self: center; }

/* Kaart even breed als de galerij of het raster eronder; de tekst erin blijft goed leesbaar */
.kaart.vol { max-width: 960px; }
.kaart.vol p, .kaart.vol ul { max-width: 75ch; }
/* Smaller dan 1000 px zou de confetti over de pagina vallen: dan weglaten (op telefoons deed stijl.css dat al) */
@media (max-width: 1000px) { body { background: var(--creme); } }
.rechts { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
a.merk { text-decoration: none; }
a.knop { text-decoration: none; display: inline-block; }
.held { text-align: center; align-items: center; }
.held .acties { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.held video { width: min(100%, 320px); border-radius: 22px; box-shadow: 0 10px 28px rgba(30,60,100,.18); }
.twee { width: 100%; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.stappen { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; text-align: center; }
.stappen .nr { font-size: 2rem; font-weight: 700; color: #cc2f5f; }
.galerij { width: 100%; display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 16px; }
.thema { background: var(--card); border-radius: 22px; overflow: hidden; box-shadow: 0 10px 28px rgba(30,60,100,.12); display: flex; flex-direction: column; }
.thema button { border: 0; padding: 0; background: #eee; cursor: pointer; display: block; position: relative; }
.thema img, .thema video { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.thema .speel { position: absolute; right: 8px; bottom: 8px; background: rgba(43,27,74,.8); color: #fff; border-radius: 999px; padding: 4px 10px; font-size: .85rem; }
.label { font-size: .85rem; color: var(--muted); text-align: center; }
.kaart h2 + p, .kaart p + p { margin-top: -4px; }
.kaart ul { margin: 0; padding-left: 1.2em; text-align: left; }
.kaart.breed h2 { margin-top: 8px; }
.kaart.breed h2:first-child { margin-top: 0; }
.uitgeschakeld { cursor: default; }