.days{padding-block:var(--s-7) var(--s-7);background:var(--c-bg)}
#tage{scroll-margin-top:calc(var(--nav-h) + 8px)}
.days-head{display:flex;flex-direction:column;gap:var(--s-2);margin-bottom:var(--s-5)}
.days-head .eyebrow{margin:0}
.days-title{margin:0;font-family:var(--f-display);font-weight:400;font-size:var(--t-h2);line-height:.98;text-transform:uppercase;text-wrap:balance;hyphens:none;-webkit-hyphens:none}
.days-title-em{color:var(--c-or)}

.days-card{position:relative;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto;grid-template-areas:"photo" "prog" "buy";width:100%;background:var(--c-bg-2);border:1px solid var(--c-line-2);border-radius:var(--r-2);overflow:hidden;color:var(--c-ink);text-decoration:none;-webkit-tap-highlight-color:transparent;transition:border-color .25s var(--ease),transform .2s var(--ease),opacity .7s var(--ease)}
.days-card:focus-visible{outline:2px solid var(--c-or);outline-offset:3px}
.days-card:active{transform:scale(.985);border-color:var(--c-or)}

.days-photo{grid-area:photo;position:relative;margin:0;height:clamp(150px,44vw,180px);overflow:hidden;background:var(--c-bg-3)}
.days-photo img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 45%;filter:grayscale(.25) contrast(1.05) brightness(.72);transition:filter .5s var(--ease),transform .8s var(--ease)}
.days-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,9,8,.2),rgba(10,9,8,0) 35%,rgba(18,16,14,.95));pointer-events:none}

.days-tag{grid-area:photo;align-self:start;justify-self:start;position:relative;z-index:1;margin:var(--s-3);padding:.2em .6em;background:var(--c-or);color:var(--c-or-ink);font-family:var(--f-cond);font-weight:600;font-size:var(--t-xs);letter-spacing:.16em;text-transform:uppercase}
.days-date{grid-area:photo;align-self:end;position:relative;z-index:1;display:flex;align-items:baseline;gap:var(--s-2);padding:0 var(--s-4) var(--s-2)}
.days-num{font-family:var(--f-display);font-size:clamp(3.2rem,14vw,4.2rem);line-height:.8;color:var(--c-ink);transition:color .3s var(--ease)}
.days-mon{font-family:var(--f-mono);font-size:var(--t-xs);letter-spacing:.2em;text-transform:uppercase;color:var(--c-ink)}

.days-prog{grid-area:prog;display:flex;flex-direction:column;gap:var(--s-2);min-width:0;padding:var(--s-3) var(--s-4) 0}
.days-genre{margin:0;font-family:var(--f-display);font-weight:400;font-size:clamp(1.5rem,6.8vw,1.9rem);line-height:1;text-transform:uppercase;hyphens:none;-webkit-hyphens:none}
.days-tl{list-style:none;margin:0;padding:0;display:grid;gap:.35em}
.days-tl li{display:grid;grid-template-columns:4.2rem minmax(0,1fr);align-items:baseline;gap:var(--s-2);color:var(--c-ink-2);font-size:var(--t-m);line-height:1.35}
.days-t{color:var(--c-ink-3);font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;font-variant-numeric:tabular-nums}
.days-tl .days-tl-hl{color:var(--c-ink);font-weight:600}
.days-tl-hl .days-t{color:var(--c-or)}

.days-buy{grid-area:buy;display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);margin:var(--s-4) var(--s-4) var(--s-3);padding-top:var(--s-3);border-top:1px dashed var(--c-line)}
.days-price{margin:0;font-family:var(--f-display);font-size:1.75rem;line-height:1;white-space:nowrap}
.days-price span:not([data-price-from]){font-family:var(--f-cond);font-weight:600;font-size:var(--t-s);letter-spacing:.16em;text-transform:uppercase;color:var(--c-ink-2);vertical-align:.3em}
.days-cta{display:inline-flex;align-items:center;gap:.5em;min-height:44px;padding:0 1.1em;background:var(--c-or);color:var(--c-or-ink);font-family:var(--f-cond);font-weight:600;font-size:var(--t-s);letter-spacing:.16em;text-transform:uppercase;white-space:nowrap}
.days-cta-arrow{transition:transform .25s var(--ease)}

@media (hover:hover){
  .days-card:hover{border-color:var(--c-or)}
  .days-card:hover .days-num{color:var(--c-or)}
  .days-card:hover .days-photo img{filter:grayscale(0) contrast(1.05) brightness(.82);transform:scale(1.04)}
  .days-card:hover .days-cta-arrow{transform:translateX(3px)}
}

/* dezente Einblendung, nur mit JS und ohne reduced motion */
.days.is-js .days-card{opacity:0;transform:translateY(12px)}
.days.is-js.is-in .days-card{opacity:1;transform:none}

@media (min-width:760px){
  .days-card{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);grid-template-rows:1fr auto;grid-template-areas:"photo prog" "photo buy";max-width:880px;margin-inline:auto}
  .days-photo{height:auto;min-height:300px}
  .days-photo img{position:absolute;inset:0}
  .days-photo::after{background:linear-gradient(180deg,rgba(10,9,8,.2),rgba(10,9,8,0) 40%,rgba(18,16,14,.85))}
  .days-date{padding:0 var(--s-5) var(--s-4)}
  .days-prog{justify-content:center;gap:var(--s-3);padding:var(--s-6) var(--s-6) 0}
  .days-genre{font-size:2.2rem}
  .days-buy{margin:var(--s-4) var(--s-6) var(--s-5)}
}
@media (min-width:960px){
  .days{padding-block:var(--s-8)}
  .days-head{max-width:880px;margin-inline:auto;margin-bottom:var(--s-6)}
}

@media (prefers-reduced-motion:reduce){
  .days-card,.days-photo img,.days-cta-arrow,.days-num{transition:none}
  .days-card:active{transform:none}
  .days-card:hover .days-photo img{transform:none}
  .days.is-js .days-card{opacity:1;transform:none}
}