/* Ronde 6: de header als gelaagd blok met sticker, stedenstrook en duidelijke knoppen.
   Alle beweging staat stil bij prefers-reduced-motion en ?still=1 (.calm). */

/* ---------------------------------------------------------------- 1. HEADER */
.h4{padding-bottom:calc(clamp(40px,5vw,72px) + 64px);align-items:center}
.h6{position:relative;max-width:min(760px,100%)}
.h6-eye{margin:0}
.h6-eye span{display:inline-block;background:var(--ma-yellow);color:var(--ma-ink);padding:7px 14px 6px;transform:rotate(-1.5deg);font-size:.8125rem;letter-spacing:.14em;text-transform:uppercase;box-shadow:4px 4px 0 var(--ma-magenta)}
.h4 .h6 h1{margin:22px 0 0;line-height:.9}
.h4 .h6 h1 .h6-a{display:flex;align-items:center;gap:16px;font-size:clamp(1.15rem,1.4vw + .85rem,2rem);letter-spacing:.16em;line-height:1.1;color:var(--ma-white)}
.h6-a::after{content:"";flex:0 1 clamp(48px,14vw,200px);height:4px;background:var(--ma-magenta)}
.h4 .h6 h1 .h6-b{font-size:clamp(3.4rem,7.2vw + 1rem,7.25rem);line-height:.88;margin-top:8px;letter-spacing:.005em;text-shadow:3px 3px 0 var(--ma-magenta),6px 6px 0 rgba(21,10,34,.9),0 0 38px rgba(255,206,0,.28);overflow-wrap:normal;max-width:6.2em}
.h6 .lead{margin-top:26px;max-width:30em;text-shadow:0 2px 14px rgba(21,10,34,.8)}
.h6-cta{margin-top:30px;align-items:center;gap:18px 22px}
.h6-go{flex-direction:column;gap:7px;min-height:72px;padding:0 38px;transform:rotate(-1.5deg)}
.h6-go-t{font-size:1.0625rem;letter-spacing:.16em}
.h6-go-s{font-size:.75rem;letter-spacing:.08em;font-weight:600;opacity:.85}
.h6-alt{min-height:56px}
/* de sticker van het negenjarig jubileum: hun eigen uitgesneden ontwerp, bovenaan rechts van de kop */
.h6-sticker{position:absolute;right:clamp(0px,2vw,24px);top:-18px;width:clamp(110px,12vw,176px);height:auto;transform-origin:50% 60%;transform:rotate(7deg);filter:drop-shadow(0 8px 14px rgba(8,2,20,.55));animation:stk 6s ease-in-out infinite alternate;pointer-events:none}
@keyframes stk{from{transform:rotate(5deg) translateY(0)}to{transform:rotate(10deg) translateY(-7px)}}
/* stedenstrook onderaan de header */
.h6-strip{position:absolute;left:0;right:0;bottom:0;z-index:2;overflow:hidden;border-top:1px solid rgba(255,255,255,.28);background:rgba(21,10,34,.62);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.h6-strip-track{display:flex;width:max-content;animation:marq 70s linear infinite;padding:17px 0;font:700 .875rem/1 var(--f-body);letter-spacing:.2em;text-transform:uppercase;color:var(--ma-lilac)}
.h6-strip-track span{padding-right:28px;white-space:nowrap}
.h6-strip-track span::after{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--ma-magenta);margin-left:28px;vertical-align:middle}
.h6-strip:hover .h6-strip-track{animation-play-state:paused}
@media(max-width:860px){
 .h4{align-items:flex-start;padding-top:36px}
 .h4 .h6 h1 .h6-b{max-width:none}
 .h6-sticker{top:34px;right:-2px;width:92px}
 .h6-go{padding:0 22px}
 .h6 .lead{max-width:none}
}

/* ---------------------------------------------------------------- rustig voor wie dat vraagt (en ?still=1) */
.calm .h6-sticker,.calm .h6-strip-track{animation:none}
.calm .h6-strip-track{width:auto;flex-wrap:wrap;row-gap:10px;padding-inline:var(--gut);justify-content:center}
.calm .h6-strip{position:relative}
@media(prefers-reduced-motion:reduce){
 .h6-sticker,.h6-strip-track{animation:none}
 .h6-strip-track{width:auto;flex-wrap:wrap;row-gap:10px;padding-inline:var(--gut);justify-content:center}
 .h6-strip{position:relative}
}