/* Plugin „Countdown“: ASCII-Countdown. Alle Werte kommen als CSS-Variablen vom Partial (src/lib/countdown.js). */
.cd{--cd-fs:var(--cd-size);position:absolute;left:0;right:0;z-index:4;display:flex;justify-content:center;pointer-events:none;font-family:var(--cd-font);font-weight:var(--cd-weight);color:var(--cd-color);line-height:1;padding:0 var(--margin,2rem);box-sizing:border-box}
/* Blend-Modus: ohne z-index liegt der Countdown im Stacking-Context des Heros und mischt sich mit dem Video */
.cd--blend{z-index:auto}
.cd--align-left{justify-content:flex-start}.cd--align-right{justify-content:flex-end}
.cd--hero-top{top:calc(2rem + var(--cd-y))}
.cd--hero-center{top:calc(50% + var(--cd-y));transform:translateY(-50%)}
.cd--hero-bottom{bottom:calc(3rem - var(--cd-y))}
.cd--hero-bottom:has(~ .section--media-combo-marquee){bottom:calc(6.5rem - var(--cd-y))} /* über dem Laufband */
/* Coming-soon-Seite: im Anmeldeblock über der Überschrift, Versatz bleibt wirksam */
.offline .cd{position:relative;inset:auto;transform:translateY(var(--cd-y));padding:0 0 1.6rem}
.cd--below{position:relative;background:var(--black,#000);color:var(--cd-color);padding:calc(3rem + var(--cd-y)) var(--margin,2rem) 3rem}
.cd--fixed-top,.cd--fixed-bottom{position:fixed;z-index:60}
/* feste Leisten sind immer ein eigener Stacking-Context: dort mischt die ganze Leiste mit der Seite */
.cd--fixed-top.cd--blend,.cd--fixed-bottom.cd--blend{mix-blend-mode:var(--cd-blend)}
.cd--fixed-top .cd__row,.cd--fixed-bottom .cd__row,.cd--fixed-top .cd__title,.cd--fixed-bottom .cd__title{mix-blend-mode:normal}
.cd--fixed-top{top:calc(var(--header-height,6.6rem) + .5rem + var(--cd-y))}
.cd--fixed-bottom{bottom:calc(1rem - var(--cd-y))}
.cd__box{position:relative;left:var(--cd-x);pointer-events:auto;display:inline-flex;flex-direction:column;align-items:center;gap:.6em;max-width:100%;font-size:var(--cd-fs)}
.cd--align-left .cd__box{align-items:flex-start}.cd--align-right .cd__box{align-items:flex-end}
.cd--full .cd__box{width:100%}
.cd--block .cd__box{background:var(--cd-block-bg);padding:var(--cd-block-pad);border-radius:var(--cd-block-radius);border:var(--cd-block-border);mix-blend-mode:var(--cd-block-blend)}
.cd--blur .cd__box{-webkit-backdrop-filter:blur(var(--cd-block-blur));backdrop-filter:blur(var(--cd-block-blur))}
.cd__title{font-size:var(--cd-title-size);letter-spacing:.14em;text-transform:uppercase;color:var(--cd-title-color);mix-blend-mode:var(--cd-blend);opacity:0;animation:cd-in .6s .2s forwards}
.cd__row{display:flex;flex-wrap:wrap;align-items:flex-start;gap:0 var(--cd-gap);min-height:1em;mix-blend-mode:var(--cd-blend);cursor:default;user-select:none;-webkit-user-select:none}
.cd--align-center .cd__row{justify-content:center}.cd--align-right .cd__row{justify-content:flex-end}
.cd__group{display:flex;flex:none;flex-direction:column;align-items:center;gap:.35em}
.cd__group--above{flex-direction:column-reverse}
.cd__num{display:flex;white-space:nowrap}
/* jede Stelle hat eine feste Breite und steht mittig, egal welches Zeichen gerade drin ist: kein Wackeln */
.cd__c{display:inline-block;flex:none;width:var(--cd-cw);min-width:var(--cd-cw);max-width:var(--cd-cw);overflow:visible;text-align:center;letter-spacing:0;margin-right:var(--cd-tracking);font-variant-numeric:tabular-nums;transition:color var(--cd-burn-decay) ease-out,text-shadow var(--cd-burn-decay) ease-out}
.cd__c.is-spin{color:var(--cd-alt);transition:none}
.cd__c.is-burn{transition:none;color:var(--cd-burn);text-shadow:0 0 var(--cd-glow) var(--cd-burn),0 0 calc(var(--cd-glow) * 2.5) var(--cd-burn)}
.cd__sep{display:inline-block;flex:none;width:var(--cd-cw);letter-spacing:0;margin-right:var(--cd-tracking);text-align:center;opacity:.6}
.cd__label{padding:0 .4em;font-size:var(--cd-label-size);letter-spacing:.14em;text-transform:uppercase;color:var(--cd-label-color);font-weight:400;white-space:nowrap}
.cd__group.is-glitch{animation:cd-glitch .12s steps(2) infinite}
.cd__group.is-glitch .cd__num{text-shadow:-2px 0 var(--cd-alt),2px 0 var(--cd-burn)}
.cd__row.is-blink .cd__c:not(.is-spin){animation:cd-blink 1.2s steps(1) infinite}
.cd.is-hidden{display:none}
/* CRT: zwei Maskenebenen auf der Zahlenzeile (Schnittmenge): Scanlines (Kachel = eine Zeile) und ein dunkler Balken
   (Kachel = 3 Zeilenhöhen). Beide wandern in einer Animation über mask-position. Dazu Farbsaum rot/cyan, Glühen,
   Flackern (Deckkraft) und Bildzittern (Versatz). Der Block selbst bleibt unmaskiert, nur eine Vignette darüber. */
.cd--crt .cd__row{padding:.5em;margin:-.5em;-webkit-mask-image:linear-gradient(#000 0 calc(var(--cd-crt-pitch) - var(--cd-crt-lw)),rgba(0,0,0,var(--cd-crt-keep)) calc(var(--cd-crt-pitch) - var(--cd-crt-lw)) var(--cd-crt-pitch)),var(--cd-crt-bar);mask-image:linear-gradient(#000 0 calc(var(--cd-crt-pitch) - var(--cd-crt-lw)),rgba(0,0,0,var(--cd-crt-keep)) calc(var(--cd-crt-pitch) - var(--cd-crt-lw)) var(--cd-crt-pitch)),var(--cd-crt-bar);-webkit-mask-size:100% var(--cd-crt-pitch),100% 300%;mask-size:100% var(--cd-crt-pitch),100% 300%;-webkit-mask-repeat:repeat;mask-repeat:repeat;-webkit-mask-position:0 0,0 0;mask-position:0 0,0 0;-webkit-mask-composite:source-in;mask-composite:intersect}
.cd--crt .cd__c:not(.is-burn){text-shadow:calc(var(--cd-crt-rgb) * -1) 0 var(--cd-crt-r),var(--cd-crt-rgb) 0 var(--cd-crt-c),0 0 var(--cd-crt-glow) currentColor}
.cd--crt.cd--crt-anim .cd__row{animation:cd-crt-roll var(--cd-crt-cycle) linear infinite,cd-flicker var(--cd-crt-fl-dur) linear infinite,cd-crt-jitter 1.7s steps(1) infinite}
.cd--crt.cd--block .cd__box::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(ellipse at center,transparent 55%,rgba(0,0,0,var(--cd-crt-vig)) 100%)}
@keyframes cd-crt-roll{from{-webkit-mask-position:0 0,0 0;mask-position:0 0,0 0}to{-webkit-mask-position:0 var(--cd-crt-roll-shift),0 var(--cd-crt-bar-shift);mask-position:0 var(--cd-crt-roll-shift),0 var(--cd-crt-bar-shift)}}
@keyframes cd-flicker{0%,100%{opacity:1}7%{opacity:calc(1 - var(--cd-crt-fl))}9%{opacity:1}31%{opacity:calc(1 - var(--cd-crt-fl) * .4)}33%{opacity:1}58%{opacity:calc(1 - var(--cd-crt-fl) * 1.2)}59%{opacity:1}83%{opacity:calc(1 - var(--cd-crt-fl) * .5)}85%{opacity:1}}
@keyframes cd-crt-jitter{0%,100%{transform:translateX(0)}11%{transform:translateX(var(--cd-crt-jit))}13%{transform:translateX(0)}47%{transform:translateX(calc(var(--cd-crt-jit) * -1))}49%{transform:translateX(0)}71%{transform:translateX(calc(var(--cd-crt-jit) * .5))}72%{transform:translateX(0)}}
@keyframes cd-in{to{opacity:1}}
@keyframes cd-blink{50%{opacity:0}}
@keyframes cd-glitch{0%{transform:translate(0,0)}25%{transform:translate(-3px,1px) skewX(-6deg)}50%{transform:translate(2px,-2px)}75%{transform:translate(-1px,2px) skewX(4deg)}100%{transform:translate(0,0)}}
@media (max-width:767px){.cd{--cd-fs:var(--cd-size-m);padding:0 1rem}.cd__row{gap:0 calc(var(--cd-gap) * .6)}.cd__sep{display:none}.cd--no-mobile{display:none}.cd--hero-bottom{bottom:calc(4rem - var(--cd-y))}.cd--hero-bottom:has(~ .section--media-combo-marquee){bottom:calc(7.5rem - var(--cd-y))}.cd__box{gap:.5em}.cd--block .cd__box{padding:calc(var(--cd-block-pad) * .6)}}
@media (prefers-reduced-motion:reduce){.cd__group.is-glitch{animation:none}.cd--crt .cd__row{animation:none}}
