/* Programm: Als nächstes + Nächte-Liste */

/* ---------- Als nächstes ---------- */
.pg-next { position: relative; background: var(--pink); color: #0A0A0A; padding-block: clamp(46px, 6vw, 80px) clamp(40px, 5vw, 64px); overflow: hidden; }
.pg-next-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 0.7647rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; }
.pg-live { display: inline-flex; align-items: center; gap: 8px; }
.pg-live i { width: 9px; height: 9px; border-radius: 50%; background: #0A0A0A; animation: pg-pulse 1.4s ease-in-out infinite; }
@keyframes pg-pulse { 50% { transform: scale(1.6); opacity: .4; } }
.pg-next-word { margin-top: 10px; font-family: var(--display); font-weight: 400; line-height: 0.82; text-transform: uppercase; color: #0A0A0A; }
.pg-next-row { margin-top: clamp(18px, 2.4vw, 30px); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 30px; }
.pg-next-info { font-family: var(--display); font-size: clamp(1.5rem, 2.6vw, 2.4rem); line-height: 1; text-transform: uppercase; }
.pg-next .btn.primary { background: #0A0A0A; border-color: #0A0A0A; color: #F2EEE3; }
.pg-next .btn.primary:hover { background: #FFFFFF; border-color: #FFFFFF; color: #0A0A0A; }
.pg-next a:focus-visible { outline-color: #0A0A0A; }
@media (max-width: 640px) { .pg-next .btn.primary { width: 100%; justify-content: center; } }

/* ---------- Liste ---------- */
.pg-list-sec { padding-block: clamp(80px, 9vw, 130px) clamp(70px, 8vw, 110px); }
.pg-list-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px 30px; flex-wrap: wrap; margin-bottom: clamp(40px, 5vw, 70px); }
.pg-hint { font-size: 0.7647rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); }

.pg-month { position: sticky; top: 64px; z-index: 3; display: flex; align-items: baseline; gap: 14px; margin: 46px 0 0; padding: 14px 0 10px; background: #0A0A0A; border-bottom: 2px solid rgba(242, 238, 227, 0.6); }
.pg-month:first-child { margin-top: 0; }
.pg-month span { font-family: var(--display); font-weight: 400; font-size: clamp(1.6rem, 2.4vw, 2.2rem); line-height: 1; text-transform: uppercase; color: var(--pink); }
.pg-month small { font-size: 0.7059rem; font-weight: 600; letter-spacing: 0.2em; color: var(--muted); }

.pg-rows { list-style: none; margin: 0; padding: 0; }
.pg-row { position: relative; border-bottom: 1px solid rgba(242, 238, 227, 0.14); }
.pg-row-btn { position: relative; width: 100%; display: grid; grid-template-columns: 112px minmax(0, 1fr) auto 44px; align-items: center; gap: 10px 28px; padding: clamp(14px, 1.6vw, 22px) 0; background: none; border: 0; color: inherit; font: inherit; text-align: left; cursor: pointer; isolation: isolate; }
.pg-row-btn::before { content: ""; position: absolute; inset: 0 -14px; z-index: -1; background: var(--pink); transform: scaleX(0); transform-origin: 0 50%; transition: transform .55s cubic-bezier(.77, 0, .18, 1); }
.pg-row-btn:disabled { cursor: default; }
.pg-date { display: flex; flex-direction: column; gap: 2px; }
.pg-date b { font-family: var(--display); font-weight: 400; font-size: 1.5rem; line-height: 1; color: #F2EEE3; font-variant-numeric: tabular-nums; transition: color .3s; }
.pg-date small { font-size: 0.7059rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); transition: color .3s; }
.pg-word { font-family: var(--display); font-weight: 400; font-size: clamp(2.6rem, 7.4vw, 7.4rem); line-height: 0.86; text-transform: uppercase; color: #F2EEE3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color .3s, transform .55s cubic-bezier(.16, 1, .3, 1); }
.pg-info { font-size: 0.8235rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text); text-align: right; white-space: nowrap; transition: color .3s; }
.pg-arrow { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid rgba(242, 238, 227, 0.3); font-family: var(--display); font-size: 1.4rem; color: #F2EEE3; transition: transform .4s cubic-bezier(.16, 1, .3, 1), border-color .3s, color .3s; }

/* Hover / offen: Pink wischt rein */
@media (hover: hover) {
  .pg-row:not(.is-zu) .pg-row-btn:hover::before { transform: scaleX(1); }
  .pg-row:not(.is-zu) .pg-row-btn:hover .pg-word { color: #0A0A0A; transform: translateX(14px); }
  .pg-row:not(.is-zu) .pg-row-btn:hover .pg-date b, .pg-row:not(.is-zu) .pg-row-btn:hover .pg-date small,
  .pg-row:not(.is-zu) .pg-row-btn:hover .pg-info { color: #0A0A0A; }
  .pg-row:not(.is-zu) .pg-row-btn:hover .pg-arrow { border-color: #0A0A0A; color: #0A0A0A; }
}
.pg-arrow::before { content: "+"; }
.pg-row.open .pg-arrow::before { content: "–"; }

/* Besondere Abende */
.pg-row.is-special .pg-word { color: var(--pink); }
.pg-row.is-special .pg-date b { color: var(--pink); }
.pg-row.is-special .pg-info::before { content: "Special · "; color: var(--pink); }
/* Heute */
.pg-row.is-today .pg-date small { color: var(--pink); }
/* Geschlossen */
.pg-row.is-zu .pg-word, .pg-row.is-zu .pg-date b { color: rgba(242, 238, 227, 0.22); text-decoration: line-through; text-decoration-thickness: 3px; }
.pg-row.is-zu .pg-info { color: var(--muted); }

/* Aufklappen */
.pg-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s cubic-bezier(.16, 1, .3, 1); }
.pg-panel-in { overflow: hidden; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 30px; padding-left: 140px; }
.pg-row.open .pg-panel { grid-template-rows: 1fr; }
.pg-row.open .pg-panel-in { padding-bottom: 24px; }
.pg-panel p { max-width: 34em; color: var(--text); }

.pg-more-row { margin-top: 50px; display: flex; justify-content: center; }

/* Foto am Mauszeiger */
.pg-float { position: fixed; left: 0; top: 0; z-index: 40; width: clamp(220px, 20vw, 320px); aspect-ratio: 4 / 5; pointer-events: none; opacity: 0; transition: opacity .3s; overflow: hidden; }
.pg-float img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.4) brightness(1.05); transform: scale(1.15); transition: transform .6s cubic-bezier(.16, 1, .3, 1); }
.pg-float.on { opacity: 1; }
.pg-float.on img { transform: scale(1); }
.pg-float::after { content: ""; position: absolute; inset: 0; mix-blend-mode: multiply; opacity: .5; background-image: radial-gradient(rgba(0,0,0,.55) 0.9px, transparent 1.2px); background-size: 3px 3px; }

/* Zeilen gleiten rein */
.pg-mo .pg-row { opacity: 0; transform: translateY(40px); transition: opacity .7s cubic-bezier(.2, .8, .2, 1), transform .9s cubic-bezier(.16, 1, .3, 1); transition-delay: var(--d, 0ms); }
.pg-mo .pg-row.in { opacity: 1; transform: none; }

/* Handy */
@media (max-width: 760px) {
  .pg-month { top: 60px; }
  .pg-row-btn { grid-template-columns: 58px minmax(0, 1fr) 44px; grid-template-areas: "date word arrow" "date info arrow"; gap: 4px 14px; padding: 16px 0; }
  .pg-date { grid-area: date; align-self: start; padding-top: 4px; }
  .pg-date b { font-size: 1.15rem; }
  .pg-word { grid-area: word; font-size: clamp(2.2rem, 11vw, 3.2rem); }
  .pg-info { grid-area: info; text-align: left; white-space: normal; font-size: 0.7647rem; letter-spacing: 0.1em; }
  .pg-arrow { grid-area: arrow; }
  .pg-panel-in { padding-left: 72px; }
  .pg-panel-in .btn { width: 100%; justify-content: center; }
  .pg-row-btn::before { inset: 0 -8px; }
  .pg-row.open .pg-row-btn::before { transform: scaleX(1); }
  .pg-row.open .pg-word, .pg-row.open .pg-date b, .pg-row.open .pg-date small, .pg-row.open .pg-info, .pg-row.open .pg-arrow { color: #0A0A0A; border-color: #0A0A0A; }
}

@media (prefers-reduced-motion: reduce) {
  .pg-row-btn::before, .pg-word, .pg-arrow, .pg-panel, .pg-float, .pg-float img { transition: none; }
  .pg-live i { animation: none; }
}
.pg-row.open .pg-info::before { color: #0A0A0A; }
@media (hover: hover) { .pg-row .pg-row-btn:hover .pg-info::before { color: #0A0A0A; } }