/* Countdown-Seite im MOSAIC-Stil: Ink-Grund, Lime-Akzent, vier Zähl-Kacheln, darunter ein Mosaik, das sich Tag für Tag füllt. */
.cd-page{min-height:100svh;display:flex;flex-direction:column;background:var(--ink)}
.cd-bg{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.cd-main{position:relative;z-index:2;flex:1;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;padding:calc(88px + 5vh) 4vw 6vh}
.cd-main>*{opacity:0;transform:translateY(16px);animation:cdIn .9s cubic-bezier(.2,.7,.2,1) forwards}
.cd-main>:nth-child(1){animation-delay:.05s}.cd-main>:nth-child(2){animation-delay:.18s}.cd-main>:nth-child(3){animation-delay:.3s}
.cd-main>:nth-child(4){animation-delay:.42s}.cd-main>:nth-child(5){animation-delay:.54s}.cd-main>:nth-child(6){animation-delay:.66s}.cd-main>:nth-child(7){animation-delay:.78s}
@keyframes cdIn{to{opacity:1;transform:none}}

.cd-kicker{margin:0 0 3vh;font:500 12px DM Mono,monospace;letter-spacing:.22em;color:var(--lime);text-transform:uppercase}
.cd-title{margin:0 0 5vh;font-size:clamp(54px,11vw,190px);font-weight:700;letter-spacing:-.07em;line-height:.78}
.cd-title .l{display:block}
.cd-title .outline{-webkit-text-stroke:1.5px var(--paper);color:transparent}
.cd-title .dot{display:inline-block;width:.13em;height:.13em;margin-left:.07em;background:var(--lime)}
.cd-open{margin:0 0 3vh;font-size:clamp(34px,7vw,110px);font-weight:700;letter-spacing:-.06em;line-height:.9;color:var(--lime)}
.cd-open[hidden]{display:none}

.cd-digits{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(8px,1.2vw,18px);width:min(1180px,100%);margin-bottom:5vh}
.cd-unit{position:relative;padding:clamp(14px,2vw,28px) clamp(12px,1.8vw,24px) clamp(12px,1.4vw,20px);border:1px solid var(--line);background:rgba(7,7,7,.6);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);overflow:hidden}
.cd-unit:nth-child(1){border-radius:clamp(20px,4vw,64px) 0 0 0}
.cd-unit:nth-child(2){border-radius:0 clamp(20px,4vw,64px) 0 0}
.cd-unit:nth-child(3){border-radius:0 0 0 clamp(20px,4vw,64px)}
.cd-unit:nth-child(4){border-radius:0 0 clamp(20px,4vw,64px) 0}
.cd-num{display:block;font-size:clamp(44px,9.6vw,170px);font-weight:700;letter-spacing:-.07em;line-height:.84;font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}
.cd-num.tick{animation:cdTick .38s cubic-bezier(.2,.7,.2,1)}
@keyframes cdTick{from{transform:translateY(-14%);opacity:.25}to{transform:none;opacity:1}}
.cd-unit span{display:block;margin-top:14px;font:500 11px DM Mono,monospace;letter-spacing:.2em;opacity:.7}
.cd-unit.sec{background:var(--lime);border-color:var(--lime);color:var(--ink)}
.cd-unit.sec span{opacity:.75}

.cd-tiles{display:grid;grid-template-columns:repeat(var(--cols,12),minmax(0,1fr));gap:clamp(4px,.6vw,9px);width:min(1180px,100%);margin-bottom:2.2vh}
.cd-tile{position:relative;display:block;aspect-ratio:1;border:1px solid var(--line);overflow:hidden;background:rgba(7,7,7,.5)}
.cd-tile::before{content:"";position:absolute;inset:0;background:var(--lime);transform-origin:bottom;transform:scaleY(var(--f,0));transition:transform 1s ease}
.cd-tile.on{border-color:var(--lime)}
.cd-tile.now{border-color:var(--lime);animation:cdPulse 1.8s ease-in-out infinite}
.cd-tile:nth-child(5n+1){border-top-left-radius:70%}
.cd-tile:nth-child(7n+4){border-bottom-right-radius:70%}
@keyframes cdPulse{50%{box-shadow:0 0 0 5px rgba(203,255,0,.22)}}
.cd-caption{margin:0 0 3vh;font:500 11px DM Mono,monospace;letter-spacing:.2em;text-transform:uppercase;opacity:.65}
.cd-sub{margin:0;max-width:52ch;font-size:clamp(16px,1.5vw,20px);line-height:1.55;opacity:.82}

.cd-foot{position:relative;z-index:2;padding:34px 4vw 40px;border-top:1px solid rgba(255,255,255,.12);background:rgba(7,7,7,.85)}

@media(max-width:700px){
  .cd-main{padding-top:calc(88px + 3vh)}
  .cd-digits{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cd-num{font-size:clamp(58px,22vw,130px)}
  .cd-tiles{grid-template-columns:repeat(6,minmax(0,1fr))}
}
@media(prefers-reduced-motion:reduce){
  .cd-main>*{opacity:1;transform:none;animation:none}
  .cd-num.tick,.cd-tile.now{animation:none}
  .cd-tile::before{transition:none}
}