/* Termine-Seite: Ticket „Als Nächstes“, Liste mit Filter, Archiv.
   Übernommen vom Elementor-Code der WordPress-Seite (Klassen jkg-…), Farben aus basis.css. */

/* Seitenkopf mit Porträt und Ticket: das Ticket liegt nur auf Hemd und Rand, nie auf dem Gesicht */
.jk-termine-kopf__bild { position: relative; width: 100%; max-width: 620px; margin-left: auto; padding-bottom: 72px; }
@media (min-width: 901px) { .jk-termine-kopf__bild { max-width: min(620px, (100svh - 340px) * 1.07); } }
.jk-termine-kopf__bild .jk-rahmen { width: 70%; margin-left: auto; }
.jk-termine-kopf__bild .jk-rahmen img { aspect-ratio: 2 / 3; }
.jk-termine-kopf__bild .jk-gig-next { position: absolute; left: 0; bottom: 0; z-index: 1; width: 56%; }
.jk-lade { margin: 0; font-family: var(--font-serif); font-style: italic; font-size: 22px; color: var(--ink-muted); }
/* Ohne JS keine Dauer-Ladeanzeige: Ticket und Archiv weg, die Liste zeigt den <noscript>-Hinweis */
html:not(.jk-js) .jk-lade, html:not(.jk-js) .jk-gig-next, html:not(.jk-js) .jk-abschnitt:has(.jk-gig-archive) { display: none; }
@media (min-width: 901px) {
  /* 3:4 statt 2:3, damit Kopf samt Ticket auch bei 768 px Höhe ins Bild passt und der Scroll-Kreis Luft hat */
  .jk-seitenkopf:has(.jk-termine-kopf__bild) { grid-template-columns: 5fr 7fr; padding-bottom: 112px; }
  .jk-termine-kopf__bild .jk-rahmen img { aspect-ratio: 3 / 4; object-position: 50% 20%; }
}
/* Tablet: Kopf immer einspaltig (unterseiten.css hält ihn bis 900 px sonst zweispaltig), Bildgruppe unter dem Text */
@media (max-width: 900px) { .jk-seitenkopf:has(.jk-termine-kopf__bild) { grid-template-columns: minmax(0, 1fr); } }
@media (min-width: 601px) and (max-width: 900px) {
  /* Tablet hoch: Ticket links an der Textkante, Foto rechts, leicht überlappend */
  .jk-termine-kopf__bild { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; max-width: none; margin: 0; padding: 0; }
  .jk-termine-kopf__bild .jk-rahmen { grid-area: 1 / 2; width: 100%; }
  .jk-termine-kopf__bild .jk-gig-next { position: relative; grid-area: 1 / 1; left: auto; bottom: auto; width: auto; margin: 0 -56px 64px 0; }
}
@media (max-width: 600px) {
  .jk-termine-kopf__bild { max-width: none; margin: 0; padding: 0; }
  .jk-termine-kopf__bild .jk-rahmen { width: 64%; }
  .jk-termine-kopf__bild .jk-gig-next { position: relative; left: auto; bottom: auto; width: auto; margin: -64px 12% 0 0; }
}

/* ---------- Ticket „Als Nächstes“ (auch auf der Startseite) ----------
   Vor dem Laden bzw. ohne JS eine schlichte Karte. Mit Termin (.jkg-ticket) zwei Teile aus Papier mit Haarlinie,
   an der Abrisslinie echt ausgestanzt (Maske), damit Foto oder Papier durch die Löcher scheinen. */
.jk-gig-next { --loch: 11px; --kante: var(--line-strong); position: relative; padding: 22px 24px; background: var(--paper); border: 1px solid var(--kante); transform: rotate(-2deg); }
.jk-gig-next.jkg-ticket { padding: 0; background: none; border: 0; }
.jkg-t-teil { position: relative; padding: 22px 24px; background: var(--paper); border: 1px solid var(--kante); }
.jkg-t-teil--oben, .jkg-t-teil--abriss {
  --ring: #0000 calc(var(--loch) - .5px), var(--kante) var(--loch) calc(var(--loch) + 1px), #0000 calc(var(--loch) + 1.5px);
  --stanz: #0000 calc(var(--loch) - .5px), #000 var(--loch);
}
.jkg-t-teil--oben { padding-bottom: 20px; border-bottom: 0;
  background: radial-gradient(circle at 0 100%, var(--ring)) border-box, radial-gradient(circle at 100% 100%, var(--ring)) border-box, var(--paper);
  -webkit-mask: radial-gradient(circle at 0 100%, var(--stanz)) 0 0 / 51% 100% no-repeat, radial-gradient(circle at 100% 100%, var(--stanz)) 100% 0 / 51% 100% no-repeat;
          mask: radial-gradient(circle at 0 100%, var(--stanz)) 0 0 / 51% 100% no-repeat, radial-gradient(circle at 100% 100%, var(--stanz)) 100% 0 / 51% 100% no-repeat; }
.jkg-t-teil--abriss { margin-top: -1px; padding-top: 20px; border-top: 2px dashed rgba(31, 30, 28, .28);
  background: radial-gradient(circle at 0 0, var(--ring)) border-box, radial-gradient(circle at 100% 0, var(--ring)) border-box, var(--paper);
  -webkit-mask: radial-gradient(circle at 0 0, var(--stanz)) 0 0 / 51% 100% no-repeat, radial-gradient(circle at 100% 0, var(--stanz)) 100% 0 / 51% 100% no-repeat;
          mask: radial-gradient(circle at 0 0, var(--stanz)) 0 0 / 51% 100% no-repeat, radial-gradient(circle at 100% 0, var(--stanz)) 100% 0 / 51% 100% no-repeat;
  transform-origin: 100% 0; transition: rotate .5s cubic-bezier(.34, 1.56, .64, 1), translate .5s cubic-bezier(.34, 1.56, .64, 1); }
/* Hover: der Abriss gibt links ein wenig nach, als würde man ihn gerade abreißen */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .jkg-ticket:hover .jkg-t-teil--abriss { rotate: -1.4deg; translate: 0 2px; }
}

/* Stempel „Heute live!“: Rost, zwei Ringe, leicht ungleichmäßige Farbe; stempelt einmal auf */
.jkg-stempel { position: absolute; z-index: 2; top: 34px; right: -8px; display: grid; place-content: center; width: 90px; height: 90px; border: 2.5px solid currentColor; border-radius: 50%; outline: 1px solid currentColor; outline-offset: -7px; color: var(--rust); text-align: center; line-height: 1; rotate: -14deg; pointer-events: none; mix-blend-mode: multiply;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -1.5 1.85'/%3E%3C/filter%3E%3Crect width='90' height='90' filter='url(%23f)'/%3E%3C/svg%3E");
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -1.5 1.85'/%3E%3C/filter%3E%3Crect width='90' height='90' filter='url(%23f)'/%3E%3C/svg%3E"); }
.jkg-stempel b { margin: 0 0 4px .2em; font: 700 10px/1 var(--font-sans); letter-spacing: .2em; text-transform: uppercase; }
.jkg-stempel i { font: italic 25px/.9 var(--font-serif); }
.jkg-stempel.jkg-wartet { opacity: 0; }
.jkg-stempel.ist-gestempelt { animation: jkg-stempeln .55s cubic-bezier(.3, .7, .4, 1) both; }
@keyframes jkg-stempeln { 0% { opacity: 0; scale: 1.6; rotate: -4deg; } 55% { opacity: 1; scale: .95; rotate: -15deg; } 78% { scale: 1.02; } 100% { opacity: 1; scale: 1; rotate: -14deg; } }

.jk-gig-list, .jk-gig-next { --jkg-ink: var(--tinte, #1F1E1C); --jkg-grey: var(--graphit, #6A655D); --jkg-wood: var(--kirschholz, #8C5B45); }

/* ---------- Filter-Chips ---------- */
.jkg-filter { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 56px; padding: 0; list-style: none; }
.jkg-chip {
  display: inline-flex; align-items: center; min-height: 40px;
  font-family: var(--font-sans); font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--jkg-ink); background: transparent; border: 1px solid rgba(31,30,28,.35); border-radius: 2px;
  padding: 9px 16px 8px; cursor: pointer; transition: background .25s, color .25s, border-color .25s;
}
/* Theme faerbt button:hover/focus pink -> hier ueberschreiben */
.jkg-filter button.jkg-chip:hover, .jkg-filter button.jkg-chip:focus { background: transparent; color: var(--jkg-ink); border-color: var(--jkg-ink); }
.jkg-filter button.jkg-chip[aria-pressed="true"], .jkg-filter button.jkg-chip[aria-pressed="true"]:hover, .jkg-filter button.jkg-chip[aria-pressed="true"]:focus { background: var(--jkg-ink); border-color: var(--jkg-ink); color: var(--paper); }
.jkg-chip i { display: inline-block; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--c); margin-right: 8px; }

/* ---------- Monate + Zeilen ---------- */
.jkg-month { margin: 0 0 72px; }
.jkg-month:last-child { margin-bottom: 0; }
.jkg-month-h {
  display: flex; align-items: baseline; gap: 18px; margin: 0 0 8px;
  font-family: var(--font-serif); font-weight: 400; font-style: italic;
  font-size: clamp(30px, 3vw, 44px); line-height: 1; color: var(--jkg-wood);
}
.jkg-month-h::after { content: ""; flex: 1; height: 1px; background: rgba(31,30,28,.25); transform: translateY(-.25em); }
.jkg-month-h small { font-family: var(--font-sans); font-style: normal; font-size: 12px; letter-spacing: .14em; color: var(--jkg-grey); order: 2; }
.jkg-rows { list-style: none; margin: 0; padding: 0; }
/* Rechte Kante bündig mit Monatslinie; beim Hover rückt nur der Inhalt, nicht die Zeile */
.jkg-row {
  position: relative; display: grid; grid-template-columns: 112px minmax(0, 1fr) minmax(0, 200px) auto; align-items: center; gap: 32px;
  padding: 26px 0 26px 14px; border-bottom: 1px solid rgba(31,30,28,.14); transition: background-color .35s;
}
.jkg-row::before { content: ""; position: absolute; left: 0; top: 18%; bottom: 18%; width: 3px; border-radius: 2px; background: var(--c); transform: scaleY(0); transition: transform .35s; }
.jkg-row:hover { background-color: var(--paper-deep); }
.jkg-row:hover::before, .jkg-row.ist-ziel::before { transform: scaleY(1); }
.jkg-date, .jkg-main { transition: translate .35s cubic-bezier(.22, .61, .36, 1); }
@media (hover: hover) { .jkg-row:hover .jkg-date, .jkg-row:hover .jkg-main { translate: 6px 0; } }
.jkg-row[hidden] { display: none; }
.jkg-date { display: flex; align-items: baseline; gap: 10px; }
/* Instrument Serif hat keine Tabellenziffern: feste Mindestbreite, damit Wochentag/Monat immer gleich weit links stehen */
.jkg-day { display: inline-block; min-width: 1.04em; font-family: var(--font-serif); font-size: 64px; line-height: .85; color: var(--jkg-ink); font-variant-numeric: lining-nums; }
.jkg-wd { font-family: var(--font-sans); font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--jkg-grey); line-height: 1.35; }
.jkg-title { margin: 0 0 6px; font-family: var(--font-serif); font-weight: 400; font-size: clamp(28px, 2.6vw, 38px); line-height: 1.05; color: var(--jkg-ink); text-wrap: balance; }
.jkg-title a, .jkg-title a:visited, .jkg-t-title a, .jkg-t-title a:visited { color: inherit; text-decoration: none; background-image: linear-gradient(currentColor, currentColor); background-size: 0 1px; background-repeat: no-repeat; background-position: 0 100%; transition: background-size .35s; }
.jkg-title a:hover, .jkg-t-title a:hover { background-size: 100% 1px; }
.jkg-title i { display: inline-block; width: 11px; height: 11px; border-radius: 50%; background: var(--c); margin-right: 12px; vertical-align: .16em; }
.jkg-venue { margin: 0; font-family: var(--font-sans); font-size: 17px; line-height: 1.45; color: #3A3834; }
.jkg-meta { display: flex; flex-direction: column; gap: 4px; min-height: 52px; font-family: var(--font-sans); }
.jkg-city { font-size: 17px; color: var(--jkg-ink); }
.jkg-time { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--jkg-grey); }
a.jkg-route, a.jkg-route:visited {
  font-family: var(--font-sans); font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--jkg-ink); text-decoration: none; white-space: nowrap; padding: 10px 16px 9px; border: 1px solid rgba(31,30,28,.35); border-radius: 2px;
  transition: background .25s, color .25s, border-color .25s;
}
a.jkg-route:hover, a.jkg-route:focus { background: var(--jkg-ink); border-color: var(--jkg-ink); color: var(--paper); }
a.jkg-route:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.jkg-empty { margin: 0; font-family: var(--font-serif); font-style: italic; font-size: clamp(26px, 2.4vw, 34px); color: var(--jkg-grey); }
/* Zeilen steigen nacheinander auf, sobald sie ins Bild kommen (termine.js setzt .jkg-auf / .ist-da) */
.jk-bewegung .jkg-row.jkg-auf { opacity: 0; }
.jk-bewegung .jkg-row.jkg-auf.ist-da { animation: jkg-in .7s cubic-bezier(.22, .61, .36, 1) var(--jkg-verz, 0s) both; }

/* ---------- Ticket: Inhalt ---------- */
.jkg-t-label { margin: 0 0 14px; font-family: var(--font-sans); font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--jkg-wood); text-wrap: balance; }
.jkg-t-wann { white-space: nowrap; }
.jkg-t-date { margin: 0; font-family: var(--font-serif); font-size: clamp(50px, 4.6vw, 72px); line-height: .85; color: var(--jkg-ink); font-variant-numeric: lining-nums; }
.jkg-t-wd { margin: 8px 0 0; font-family: var(--font-serif); font-style: italic; font-size: clamp(19px, 1.6vw, 23px); color: var(--jkg-grey); }
.jkg-t-title { margin: 0 0 6px; font-family: var(--font-serif); font-weight: 400; font-size: clamp(26px, 2.3vw, 34px); line-height: 1; color: var(--jkg-ink); }
.jkg-t-title i { display: inline-block; width: 12px; height: 12px; border-radius: 50%; background: var(--c); margin-right: 12px; vertical-align: .14em; }
.jkg-t-place { margin: 0; font-family: var(--font-sans); font-size: 15px; line-height: 1.5; color: #3A3834; }
.jkg-t-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px 12px; margin-top: 16px; }
.jkg-t-count { font-family: var(--font-sans); font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--jkg-grey); }

/* ---------- Archiv "Schon gespielt" (Akkordeon pro Jahr) ---------- */
.jk-gig-archive { --jkg-ink: var(--tinte, #1F1E1C); --jkg-grey: var(--graphit, #6A655D); --jkg-wood: var(--kirschholz, #8C5B45); }
.jkg-arch { border-bottom: 1px solid rgba(31,30,28,.28); }
.jkg-year { border-top: 1px solid rgba(31,30,28,.28); }
.jkg-year summary { list-style: none; display: flex; align-items: baseline; gap: 24px; padding: 18px 4px 16px; cursor: pointer; }
.jkg-year summary::-webkit-details-marker { display: none; }
.jkg-year summary:focus-visible { outline: 2px solid var(--jkg-wood); outline-offset: 4px; }
.jkg-year-n { min-width: 2.1em; font-family: var(--font-serif); font-size: clamp(26px, 2.2vw, 34px); line-height: 1; color: var(--jkg-ink); transition: color .25s; font-variant-numeric: lining-nums; }
.jkg-year summary:hover .jkg-year-n, .jkg-year[open] .jkg-year-n { color: var(--jkg-wood); }
.jkg-year[open] .jkg-year-n { font-style: italic; }
.jkg-year-c { line-height: 20px; font-family: var(--font-sans); font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--jkg-grey); }
.jkg-plus { position: relative; width: 18px; height: 18px; margin-left: auto; align-self: center; transition: transform .35s; }
.jkg-plus::before, .jkg-plus::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; background: var(--jkg-ink); }
.jkg-plus::after { transform: rotate(90deg); }
.jkg-year[open] .jkg-plus { transform: rotate(45deg); }
.jkg-arows { list-style: none; margin: 0; padding: 0 0 36px; }
@media (prefers-reduced-motion: no-preference) { .jkg-year[open] .jkg-arows { animation: jkg-in .5s cubic-bezier(.22, .61, .36, 1) both; } }
.jkg-arow { display: grid; grid-template-columns: 76px minmax(0, 1fr) minmax(0, 1.3fr); gap: 4px 24px; align-items: baseline; padding: 13px 4px; border-bottom: 1px dashed rgba(31,30,28,.16); font-family: var(--font-sans); font-size: 16px; line-height: 1.4; color: #3A3834; }
.jkg-arow:last-child { border-bottom: 0; }
.jkg-adate { font-size: 12px; font-weight: 700; letter-spacing: .12em; color: var(--jkg-grey); font-variant-numeric: tabular-nums; }
.jkg-atitle { font-family: var(--font-serif); font-size: 22px; line-height: 1.15; color: var(--jkg-ink); }
.jkg-atitle i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--c); margin-right: 10px; vertical-align: .2em; }
.jkg-acity { color: var(--jkg-grey); }
.jkg-venue a, .jkg-venue a:visited, .jkg-avenue a, .jkg-avenue a:visited { color: inherit; text-decoration: underline; text-decoration-color: rgba(31,30,28,.3); text-underline-offset: 3px; transition: text-decoration-color .25s, color .25s; }
.jkg-venue a:hover, .jkg-avenue a:hover { color: var(--jkg-wood); text-decoration-color: currentColor; }
.jkg-venue a span, .jkg-avenue a span { font-size: .8em; }

@keyframes jkg-in { from { opacity: 0; translate: 0 14px; } to { opacity: 1; translate: 0 0; } }

@media (max-width: 1024px) {
  .jkg-row { grid-template-columns: 96px minmax(0, 1fr) auto; gap: 8px 24px; }
  .jkg-meta { grid-column: 2; grid-row: 2; flex-direction: row; flex-wrap: wrap; gap: 4px 14px; align-items: baseline; min-height: 0; }
  .jkg-route { grid-column: 3; grid-row: 1 / span 2; }
}
@media (max-width: 767px) {
  /* Unterzeile der Abschnittstitel als eigene Zeile statt Wortsalat */
  .jk-abschnitt__kopf .jk-unterzeile { display: block; margin: 8px 0 0; font-size: 22px; line-height: 1.15; }
  /* Filter als wischbare Zeile, über die ganze Breite */
  .jkg-filter { flex-wrap: nowrap; gap: 8px; overflow-x: auto; margin: 0 calc(-1 * var(--jk-gutter)) 36px; padding: 6px var(--jk-gutter); scroll-padding-inline: var(--jk-gutter); scrollbar-width: none; }
  .jkg-filter::-webkit-scrollbar { display: none; }
  .jkg-chip { flex: none; }
  .jkg-year summary { gap: 14px; padding: 16px 2px 14px; }
  .jkg-arow { grid-template-columns: 52px minmax(0, 1fr); padding: 12px 2px; }
  .jkg-avenue { grid-column: 2; }
  .jkg-atitle { font-size: 20px; }
  .jkg-month { margin-bottom: 56px; }
  .jkg-row { grid-template-columns: 64px minmax(0, 1fr); gap: 6px 16px; padding: 22px 0 22px 10px; align-items: start; }
  .jkg-date { grid-row: 1 / span 3; flex-direction: column; gap: 6px; }
  .jkg-day { min-width: 0; font-size: 48px; }
  .jkg-wd { font-size: 11px; }
  .jkg-meta { grid-column: 2; grid-row: auto; }
  .jkg-route { grid-column: 2; grid-row: auto; justify-self: start; margin-top: 8px; padding: 8px 14px 7px; font-size: 11px; }
  a.jkg-route { display: inline-flex; align-items: center; min-height: 40px; }
  .jkg-t-teil { padding-inline: 18px; }
  .jkg-t-date { font-size: 48px; }
  .jkg-t-title { font-size: 24px; }
  .jkg-t-count { display: none; }
}
@media (prefers-reduced-motion: reduce) { .jkg-row, .jkg-row::before, .jkg-date, .jkg-main, .jkg-t-teil--abriss { transition: none; } }

/* Handy: „Anfahrt“ als ruhiger Textlink statt Rahmen-Knopf in jeder Zeile (Trefferfläche bleibt groß) */
@media (max-width: 767px) {
  a.jkg-route, a.jkg-route:visited { position: relative; min-height: 0; padding: 4px 0; border: 0; border-radius: 0; background: none; text-decoration: underline; text-decoration-color: var(--rust); text-underline-offset: 4px; }
  a.jkg-route::after { content: ""; position: absolute; inset: -10px -8px; }
  a.jkg-route:hover, a.jkg-route:focus { background: none; color: var(--rust); }
}

/* Platz für das Ticket vorhalten, bis die Termine da sind (kein Springen) */
@media (min-width: 901px) { .jk-termine-kopf__bild .jk-gig-next { min-height: 350px; } }