/* Veranstaltungen: chronologische Übersicht und Detailseite
 *
 * Die Detailseite folgt der gemessenen Projektvorlage (projekt.css).
 * Die Übersicht ist eine Neuentwicklung: Das Original zeigt ein horizontales
 * Akkordeon mit gedrehten Titeln und überlappenden Texten (Intario-
 * Portfolio-Baustein), das für 28 Termine nicht taugt.
 */

/* ---------------------------------------------------- Übersicht */
/* Jahresleiste: Reiter über einer Linie (wie Klappentext | Inhalt der Katalogseiten); reiter.js zeigt ein Jahr */
.jahresleiste { display: flex; flex-wrap: wrap; gap: 6px 30px; margin: 24px 0 0; padding: 12px 0; border-bottom: 1px solid var(--dunkel-rand); }
/* Bleibt beim Scrollen unter dem Kopfbalken stehen, die Termine laufen darunter durch (01.10.2026) */
.jahresleiste { position: sticky; top: 0; z-index: 5; background: var(--dunkel-grund); }
.js .jahresleiste { top: var(--kopf-balken); }
/* Handy: einzeilig und seitlich wischbar statt drei Zeilen hoch */
@media screen and (max-width: 767px) {
  .jahresleiste { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; gap: 0 24px;
    -webkit-overflow-scrolling: touch; touch-action: pan-x pan-y; overscroll-behavior-x: contain; }
  /* Hinweis, dass es weitergeht: Rand läuft weich aus, solange in der Richtung noch Jahre folgen (reiter.js setzt die Klassen) */
  .jahresleiste.mehr-rechts { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 56px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 56px), transparent); }
  .jahresleiste.mehr-links { -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 56px), transparent); mask-image: linear-gradient(to left, #000 calc(100% - 56px), transparent); }
  .jahresleiste.mehr-links.mehr-rechts { -webkit-mask-image: linear-gradient(to right, transparent, #000 56px, #000 calc(100% - 56px), transparent); mask-image: linear-gradient(to right, transparent, #000 56px, #000 calc(100% - 56px), transparent); }
  .jahresleiste::-webkit-scrollbar { display: none; }
  .jahresleiste .reiter { font-size: 26px; flex: none; }
}
.jahresleiste .reiter { font-family: var(--schrift-display); font-style: italic; font-weight: 500; font-size: 30px; line-height: 1.3; color: var(--dunkel-text-leise); opacity: .55; background: none; border: 0; padding: 0; cursor: pointer; transition: color .2s ease, opacity .2s ease; }
.jahresleiste .reiter[aria-selected="true"] { color: var(--dunkel-text); opacity: 1; cursor: default; }
.jahresleiste .reiter:hover { opacity: .85; }
.jahresleiste .reiter:focus-visible { outline: 2px solid var(--akzent); outline-offset: 4px; }
.js .jahr > h2 { display: none; }                 /* mit Reitern ist das Jahr schon in der Leiste */
.jahr { margin-top: 56px; }
.jahr:first-of-type { margin-top: 36px; }
.js .jahr, .js .jahr:first-of-type { margin-top: 0; }
.jahr > h2 {
  font-size: 30px; line-height: 1.3; margin: 0 0 6px;
  padding-bottom: 12px; border-bottom: 2px solid var(--dunkel-text);
}
.jahr > .angabe { margin: 0 0 6px; }

.termine { margin: 0; padding: 0; list-style: none; }
.termine li {
  display: grid; grid-template-columns: 150px 1fr 120px; gap: 6px 28px; align-items: start;
  padding: 18px 0; border-bottom: 1px solid var(--dunkel-rand);
}
.termine li:last-child { border-bottom: 0; }
.termine time, .termine .ohne-datum {
  font-variant-numeric: tabular-nums; color: var(--dunkel-text-leise); padding-top: 3px; line-height: 1.4;
}
.termine time small { display: block; font-size: .85em; }
.termine h3 {
  font-family: var(--schrift-text); font-style: normal; font-weight: 600;
  font-size: 20px; line-height: 1.4; margin: 0; color: var(--dunkel-text);
}
.termine h3 a { color: inherit; text-decoration: none; display: block; padding-block: 8px; margin-block: -8px; }
/* Ganze Zeile klickbar, wenn es eine Einzelseite gibt (23.09.2026): der Titel-Link spannt über die Zeile,
 * der Projekt-Link liegt darüber und bleibt eigenständig. Zeilen ohne Seite: normaler Mauszeiger. */
.termine li { position: relative; }
.termine h3 a::after { content: ""; position: absolute; inset: 0; }
.termine .projekt-tag { position: relative; z-index: 1; }
.termine li:has(h3 a):hover h3 a { color: var(--akzent); }
.termine .bild img { transition: transform .4s ease; }
.termine li:has(h3 a):hover .bild img { transform: scale(1.03); }
.termine h3 a:focus-visible { outline: none; }
.termine li:has(h3 a:focus-visible) { outline: 2px solid var(--akzent); outline-offset: 2px; }
.termine .ort { margin: 4px 0 0; font-size: 17px; color: var(--dunkel-text-leise); }
.termine .projekt-tag {
  /* Trefffläche 44 px ohne Layoutänderung: Innenabstand nach innen, Außenabstand nach außen */
  display: inline-block; margin: -4px 0 -12px; padding-block: 12px;
  font-size: .74rem; line-height: 20px; letter-spacing: .09em;   /* 20 + 2 × 12 = 44 */
  text-transform: uppercase; color: var(--akzent); text-decoration: none;
}
.termine .projekt-tag:hover { color: var(--dunkel-text); }
.termine .bild { aspect-ratio: 3 / 2; background: var(--dunkel-sektion); overflow: hidden; }
.termine .bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.termine .bild-leer { aspect-ratio: 3 / 2; }
@media screen and (max-width: 700px) {
  .termine li { grid-template-columns: 1fr; gap: 6px; }
  .termine .bild { max-width: 200px; order: -1; }
  .termine .bild-leer { display: none; }
}

/* ---------------------------------------------------- Detailseite */
/* Einzelseite nach dem Schema der Projektseiten (23.09.2026); Raster, Steckbrief, Reiter, Nachbarn aus projekt.css/katalog.css */
/* Programm-Reiter: Rolle · Name */
.mitwirkende { margin: 0; padding: 0; list-style: none; }
.mitwirkende li { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 4px 28px; padding: 14px 0; border-bottom: 1px solid var(--dunkel-rand); font-size: 18px; line-height: 1.5; }
.mitwirkende li:last-child { border-bottom: 0; }
.mitwirkende .rolle { color: var(--dunkel-text-leise); }
@media screen and (max-width: 600px) { .mitwirkende li { grid-template-columns: minmax(0, 1fr); } }

/* Seitenleiste: Veranstaltungen des Projekts, Datum klein über dem Titel (lange Titel dürfen umbrechen) */
.termin-liste a { min-height: 55px; padding: 10px 20px; }
.termin-liste a > span { display: block; line-height: 1.35; }
.termin-liste small { display: block; margin-bottom: 2px; font-size: .78rem; font-weight: 500; letter-spacing: .09em; text-transform: uppercase; color: var(--dunkel-text-leise); }
.termin-liste a:hover small, .termin-liste a[aria-current="page"] small { color: inherit; }
.leisten-umschalter .jahr-angabe { color: var(--dunkel-text-leise); opacity: .55; font-weight: 600; }   /* Jahr halbfett (23.09.2026) */
/* Zwei Knöpfe unter der Schnellauswahl: zurück zur Übersicht · zur Ausstellung */
.leiste-knoepfe { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 10px; margin-top: 24px; }
.leiste-knoepfe .knopf { display: flex; align-items: center; justify-content: center; min-height: 50px; padding: 0 12px; font-size: 16px; text-align: center; white-space: nowrap; }
.leiste-knoepfe .knopf-rahmen { background: transparent; color: var(--dunkel-text); border-color: var(--dunkel-text); }
.leiste-knoepfe .knopf-rahmen:hover { background: var(--akzent); color: var(--dunkel-grund); border-color: var(--akzent); }
.leiste-knoepfe .knopf-voll { background: var(--akzent); color: var(--dunkel-grund); border-color: transparent; }
.leiste-knoepfe .knopf-voll:hover { background: #fff; color: var(--dunkel-grund); }
@media screen and (max-width: 479px) { .leiste-knoepfe { grid-template-columns: minmax(0, 1fr); } }