/* Grundsätzliche Template Farben und Einstellungen */

:root {
  --cassiopeia-color-primary: hsl(1deg, 62%, 46%);
  --cassiopeia-color-link: hsl(210deg, 58%, 22%);
  --cassiopeia-color-hover: hsl(2deg, 56%, 49%);
}

/* =========================================================
   ZEITGEIST – „MITGESPIELT“-LISTE
   ---------------------------------------------------------
   - Nicht verlinkte Stücke: neutraler Text
   - Verlinkte Stücke: folgen den globalen Link-Farben des Templates
   - Saubere Hierarchie: Spielzeit → Stück → Rolle
   ========================================================= */

/* Gesamte Liste */
.zg-mitgespielt {
    list-style: none;          /* keine Aufzählungszeichen */
    margin: 2rem 0;            /* Abstand oben / unten */
    padding: 0;
}

/* Einzelner Eintrag */
.zg-mitgespielt li {
    margin-bottom: 1.2rem;     /* Abstand zwischen Einträgen */
    padding-bottom: 0.8rem;
    line-height: 1.45;         /* gute Lesbarkeit */
    border-bottom: 1px solid rgba(200,200,200,0.35);
}

/* Letzter Eintrag ohne Trennlinie */
.zg-mitgespielt li:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

/* ---------------------------------------------------------
   Spielzeit (z. B. 2024/2025)
   --------------------------------------------------------- */
.zg-spielzeit {
    display: block;            /* eigene Zeile */
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #6a6a6a;             /* dezentes Grau */
    margin-bottom: 0.2rem;
}

/* ---------------------------------------------------------
   Stücktitel – NICHT verlinkt (span)
   --------------------------------------------------------- */
span.zg-stueck {
    font-size: 1.1rem;
    font-weight: 600;
    color: #222222;             /* normaler Text */
    text-decoration: none;
    cursor: default;            /* kein Hand-Cursor */
}

/* ---------------------------------------------------------
   Stücktitel – VERLINKT (a)
   ---------------------------------------------------------
   Keine eigene Farbe setzen!
   → benutzt automatisch die Link-Farben des Templates
   --------------------------------------------------------- */
a.zg-stueck {
    font-size: 1.1rem;
    font-weight: 600;
/*    text-decoration: none;  */    /* Standard-Link-Unterstreichung aus */
}

/* Hover / Fokus nur bei echten Links */
a.zg-stueck:hover,
a.zg-stueck:focus-visible {
    text-decoration: underline;
}

/* ---------------------------------------------------------
   Rolle (z. B. – Regie, – Hauptrolle, …)
   --------------------------------------------------------- */
.zg-rolle {
    font-size: 0.95rem;
    font-weight: 400;
    color: #4d4d4d;
    margin-left: 0.5rem;
    white-space: nowrap;        /* Rolle bleibt kompakt */
}

/* ---------------------------------------------------------
   Optional: kompaktere Darstellung auf kleinen Bildschirmen
   --------------------------------------------------------- */
@media (max-width: 600px) {
    .zg-stueck {
        font-size: 1.05rem;
    }

    .zg-rolle {
        display: block;         /* Rolle unter dem Titel */
        margin-left: 0;
        margin-top: 0.2rem;
    }
}