/* LSG Zeitstrahl – vergangene Spielzeiten als vertikaler Zeitstrahl.
   Baut auf dem Markup des Themes auf: #spielzeiten ol.zeiten > li > .jahr + span > strong + small */

/* Abschnitt: Überschrift links, Zeitstrahl rechts */
@media (min-width:900px){
  #spielzeiten .rahmen{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);column-gap:clamp(40px,7vw,110px);align-items:start}
  #spielzeiten .kopf{margin-bottom:0}
  #spielzeiten .hinweis{grid-column:1/-1}
}

/* Liste als Zeitstrahl */
#spielzeiten .zeiten{columns:auto;column-gap:0;margin:0;padding:0;list-style:none}
#spielzeiten .zeiten > li{display:block;position:relative;break-inside:auto;padding:0 0 30px 54px}
#spielzeiten .zeiten > li::before{content:"";position:absolute;left:15px;top:0;bottom:0;width:2px;background:rgba(245,248,243,.16)}
#spielzeiten .zeiten > li:first-child::before{top:14px}
#spielzeiten .zeiten > li:last-child::before,
#spielzeiten .zeiten > li.zs-ende::before{bottom:auto;height:14px}
#spielzeiten .zeiten > li:first-child:last-child::before{display:none}
#spielzeiten .zeiten > li::after{content:"";position:absolute;left:10px;top:8px;width:12px;height:12px;border-radius:50%;background:var(--tann,#0a2218);border:2px solid var(--rampe,#ecc97a);box-sizing:border-box}
#spielzeiten .zeiten .jahr{display:block;font-size:1.55rem;line-height:1.15;color:var(--licht,#f5f8f3);margin-bottom:6px}
#spielzeiten .zeiten li.jetzt .jahr{color:var(--licht,#f5f8f3)} /* alle Jahre gleich, das Theme hebt sonst den ersten Eintrag hervor */
#spielzeiten .zeiten strong{display:block;line-height:1.4}
#spielzeiten .zeiten small{margin-top:2px}

/* Auf den ersten Blick nur drei Einträge (greift schon vor dem Skript, damit nichts springt) */
.js #spielzeiten .zeiten > li:nth-child(n+4):not(.zs-mehr){display:none}
.js #spielzeiten .zs.offen .zeiten > li:nth-child(n+4):not(.zs-mehr){display:block}

/* Punkt mit Pfeil: Weitere Stücke */
#spielzeiten .zeiten > li.zs-mehr{padding-bottom:0;min-height:32px}
#spielzeiten .zeiten > li.zs-mehr::before,
#spielzeiten .zeiten > li.zs-mehr::after{display:none}
#spielzeiten .zs.offen .zeiten > li.zs-mehr{display:none}
#spielzeiten .zs-knopf{display:inline-flex;align-items:center;gap:22px;margin-left:-54px;padding:0 14px 0 0;min-height:32px;font:inherit;font-size:.95rem;letter-spacing:.04em;color:var(--licht,#f5f8f3);background:none;border:0;border-radius:99px;cursor:pointer;-webkit-tap-highlight-color:transparent}
#spielzeiten .zs-pfeil{flex:none;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;border:2px solid var(--rampe,#ecc97a);background:var(--tann,#0a2218);color:var(--rampe,#ecc97a);box-sizing:border-box;transition:background .25s ease,color .25s ease}
#spielzeiten .zs-pfeil svg{display:block;width:14px;height:14px;animation:zs-wippen 2.4s ease-in-out infinite}
#spielzeiten .zs-knopf:hover .zs-pfeil,
#spielzeiten .zs-knopf:focus-visible .zs-pfeil{background:var(--rampe,#ecc97a);color:var(--nacht,#040d09)}
#spielzeiten .zs-knopf:focus-visible{outline:2px solid var(--rampe,#ecc97a);outline-offset:4px}
#spielzeiten .zs-knopf span:last-child{border-bottom:1px solid rgba(245,248,243,.28);padding-bottom:1px}

/* Aufgeklappt: begrenztes Scrollfeld, oben und unten läuft der Zeitstrahl ins Transparente */
#spielzeiten .zs{position:relative;max-width:620px;--zs-oben:0px;--zs-unten:0px}
#spielzeiten .zs.offen{overflow-y:auto;overflow-x:hidden;overscroll-behavior-y:auto;scrollbar-width:thin;scrollbar-color:rgba(245,248,243,.22) transparent;transition:height .55s cubic-bezier(.2,.7,.2,1);
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 var(--zs-oben),#000 calc(100% - var(--zs-unten)),transparent 100%);
          mask-image:linear-gradient(to bottom,transparent 0,#000 var(--zs-oben),#000 calc(100% - var(--zs-unten)),transparent 100%)}
#spielzeiten .zs.offen::-webkit-scrollbar{width:6px}
#spielzeiten .zs.offen::-webkit-scrollbar-thumb{background:rgba(245,248,243,.22);border-radius:99px}
#spielzeiten .zs.offen::-webkit-scrollbar-track{background:transparent}
#spielzeiten .zs.offen:focus{outline:none}
#spielzeiten .zs.offen .zeiten > li:nth-child(n+4):not(.zs-mehr){animation:zs-ein .7s cubic-bezier(.2,.7,.2,1) both}
#spielzeiten .zs.offen .zeiten > li:nth-child(5){animation-delay:.08s}
#spielzeiten .zs.offen .zeiten > li.zs-ende{padding-bottom:26px}

@keyframes zs-ein{from{opacity:0;transform:translate3d(0,14px,0)}to{opacity:1;transform:none}}
@keyframes zs-wippen{0%,100%{transform:none}50%{transform:translate3d(0,3px,0)}}

@media (max-width:600px){
  #spielzeiten .zeiten > li{padding-left:48px}
  #spielzeiten .zs-knopf{margin-left:-48px;gap:16px}
}
@media (prefers-reduced-motion:reduce){
  #spielzeiten .zs.offen{transition:none}
  #spielzeiten .zs.offen .zeiten > li{animation:none!important}
  #spielzeiten .zs-pfeil svg{animation:none}
}