/* ============================================================
   THEATER AG DES TMG – Seite im Stil eines Programmhefts
   Ruhiges Papier, eine Akzentfarbe, Bodoni Moda nur für Titel.
   Schwerpunkt liegt auf der AG selbst und ihren Impressionen,
   die erste Produktion ist ein Kapitel davon.

   Alle Farben stehen als Variablen ganz oben und lassen
   sich hier zentral ändern.
   ============================================================ */
:root {
    --paper: #f6f1e7;   /* Papierfarbe des Hintergrunds        */
    --ink:   #1c1712;   /* Fließtext, Überschriften             */
    --ink-2: #58504a;   /* etwas heller, für Nebentext          */
    --red:   #a3372b;   /* einzige Akzentfarbe, aus dem Plakat  */
    --rule:  rgba(28, 23, 18, 0.16); /* Trennlinien             */

    --serif: "Bodoni Moda", Georgia, "Times New Roman", serif;
    --sans:  "Lato", "Helvetica Neue", Arial, sans-serif;

    --col:  640px;             /* Breite der Lesespalte          */
    --wide: 1080px;            /* Breite für Bilder/Galerie       */
    --pad:  clamp(20px, 6vw, 48px);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    font-family: var(--sans);
    color: var(--ink);
    background: var(--paper);
    line-height: 1.7;
    font-size: 17px;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--red); }

img { display: block; max-width: 100%; height: auto; }

/* ============================================================
   KOPFLEISTE
   ============================================================ */
.masthead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: var(--wide);
    margin: 0 auto;
    padding: 24px var(--pad);
    border-bottom: 1px solid var(--rule);
}

.masthead-name {
    text-decoration: none;
    color: var(--ink);
    font-weight: 900;
    font-size: 14px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.masthead-name span { font-weight: 400; color: var(--ink-2); text-transform: none; letter-spacing: normal; }

.nav { display: flex; gap: 24px; }
.nav a {
    color: var(--ink);
    text-decoration: none;
    font-weight: 700;
    font-size: 14px;
}
.nav a:hover { color: var(--red); }
/* aktueller Menüpunkt (z. B. die geöffnete Stückseite) */
.nav a.current { color: var(--red); }

.nav-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
}
.nav-toggle span { width: 24px; height: 2px; background: var(--ink); }

/* ============================================================
   TITELSEITE
   ============================================================ */
.titlepage {
    max-width: 760px;
    margin: 0 auto;
    padding: clamp(56px, 12vh, 104px) var(--pad) clamp(40px, 7vh, 64px);
    text-align: center;
}

.kicker {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--ink-2);
    margin-bottom: 20px;
}

.title {
    font-family: var(--serif);
    font-weight: 700;
    font-size: clamp(48px, 10vw, 92px);
    line-height: 1.02;
    letter-spacing: -0.015em;
    color: var(--ink);
    margin-bottom: 18px;
}

.subtitle {
    font-family: var(--serif);
    font-style: italic;
    font-weight: 500;
    font-size: clamp(18px, 2.6vw, 22px);
    color: var(--ink-2);
    margin-bottom: 24px;
}

.intro {
    max-width: 52ch;
    margin: 0 auto;
    color: var(--ink);
}

/* Datumszeile auf der Stückseite */
.dates {
    font-size: 15px;
    font-weight: 700;
    color: var(--red);
}

/* Brotkrumen-/Zurück-Verweise */
.crumb {
    max-width: var(--col);
    margin: 0 auto;
    padding: 24px var(--pad) 0;
    font-size: 14px;
    font-weight: 700;
}
.crumb a { text-decoration: none; }
.crumb a:hover { text-decoration: underline; text-underline-offset: 3px; }

.chapter--back { text-align: center; }
.back-link {
    font-weight: 700;
    text-decoration: none;
}
.back-link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ============================================================
   GROSSES BILD unter der Titelseite
   ============================================================ */
.lead-figure {
    max-width: var(--wide);
    margin: 0 auto;
    padding: 8px var(--pad) 0;
}
.lead-figure img {
    width: 100%;
    aspect-ratio: 1400 / 760;
    object-fit: cover;
    /* Graustufen halten die Platzhalter ruhig; für echte
       Farbfotos einfach die nächste Zeile löschen. */
    filter: grayscale(1) contrast(1.02);
}
.lead-figure figcaption,
.gallery figcaption {
    margin-top: 10px;
    font-size: 13px;
    color: var(--ink-2);
}

/* ============================================================
   KAPITEL (wiederkehrender Abschnitts-Aufbau)
   ============================================================ */
.chapter {
    max-width: var(--col);
    margin: 0 auto;
    padding: 48px var(--pad);
    border-top: 1px solid var(--rule);
}
/* breitere Variante für die Galerie */
.chapter--wide {
    max-width: var(--wide);
}

.chapter-eyebrow {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--red);
    margin-bottom: 10px;
}

.chapter-title {
    font-family: var(--serif);
    font-weight: 700;
    font-size: clamp(24px, 3.4vw, 30px);
    line-height: 1.15;
    color: var(--ink);
    margin-bottom: 20px;
}

.chapter p { color: var(--ink); margin-bottom: 16px; max-width: 58ch; }
.chapter p:last-of-type { margin-bottom: 0; }

.chapter-intro { color: var(--ink-2); margin-bottom: 28px; }

.chapter-note {
    margin-top: 24px;
    color: var(--ink-2);
    font-size: 15px;
}

/* ---------- Stück-Vorschau (Karte auf der Startseite) ---------- */
.play-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 20px 0;
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
    text-decoration: none;
    color: var(--ink);
}
.play-card + .play-card { border-top: none; }
.play-card-title {
    display: block;
    font-family: var(--serif);
    font-weight: 700;
    font-size: 21px;
}
.play-card-meta {
    display: block;
    color: var(--ink-2);
    font-size: 14px;
    margin-top: 2px;
}
.play-card-go {
    flex-shrink: 0;
    font-weight: 700;
    font-size: 14px;
    color: var(--red);
}
.play-card:hover .play-card-title { color: var(--red); }
.play-card:hover .play-card-go { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Eckdaten der AG ---------- */
.facts {
    margin-top: 28px;
    border-top: 1px solid var(--rule);
}
.facts > div {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    padding: 11px 0;
    border-bottom: 1px solid var(--rule);
}
.facts dt { color: var(--ink-2); }
.facts dd { font-weight: 700; text-align: right; }

/* ---------- Galerie / Impressionen ---------- */
.gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
.gallery img {
    width: 100%;
    aspect-ratio: 5 / 4;
    object-fit: cover;
    /* Graustufen für ruhige Platzhalter; für echte Farbfotos
       diese Zeile löschen. */
    filter: grayscale(1) contrast(1.02);
}

/* ---------- Aufführungen ---------- */
.show-list { list-style: none; margin-top: 28px; }
.show-list li {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 6px 20px;
    padding: 12px 0;
    border-bottom: 1px solid var(--rule);
}
.show-list li:first-child { border-top: 1px solid var(--rule); }
.show-date { font-weight: 700; }
.show-place { color: var(--ink-2); font-size: 15px; }

/* ---------- Ensemble ---------- */
.cast-list { list-style: none; }
.cast-list li {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
    padding: 11px 0;
    border-bottom: 1px solid var(--rule);
}
.cast-list li:first-child { border-top: 1px solid var(--rule); }
.cast-name { font-weight: 700; }
.cast-role { color: var(--ink-2); font-size: 14px; text-align: right; flex-shrink: 0; }

/* ============================================================
   MITMACHEN / AUSBLICK
   ============================================================ */
.notice {
    background: var(--ink);
    color: var(--paper);
    text-align: center;
    padding: clamp(56px, 10vh, 84px) var(--pad);
    margin-top: 48px;
}
.notice-label {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(246, 241, 231, 0.6);
    margin-bottom: 14px;
}
.notice-text {
    font-family: var(--serif);
    font-weight: 700;
    font-size: clamp(26px, 4vw, 36px);
    margin-bottom: 16px;
}
.notice-sub {
    color: rgba(246, 241, 231, 0.78);
    max-width: 52ch;
    margin: 0 auto 22px;
    font-size: 15px;
}
.notice-link {
    color: var(--paper);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.notice-link:hover { color: var(--red); }

/* ============================================================
   FUSSBEREICH
   ============================================================ */
.footer {
    max-width: var(--wide);
    margin: 0 auto;
    padding: 40px var(--pad) 56px;
    text-align: center;
}
.footer-addr { color: var(--ink-2); font-size: 14px; margin-bottom: 18px; }
.footer-links {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}
.footer-links a { color: var(--ink); text-decoration: none; font-size: 14px; font-weight: 700; }
.footer-links a:hover { color: var(--red); }
.footer-copy { color: var(--ink-2); font-size: 13px; }

/* ============================================================
   RESPONSIV
   ============================================================ */
/* Menü einklappen, sobald die Navigation (mit dem langen
   Stück-Titel) in einer Zeile eng würde */
@media (max-width: 820px) {
    .gallery { grid-template-columns: repeat(2, 1fr); }

    .masthead { position: relative; }
    .nav-toggle { display: flex; }
    .nav {
        display: none;
        position: absolute;
        top: 100%; left: 0; right: 0;
        flex-direction: column;
        gap: 0;
        background: var(--paper);
        border-bottom: 1px solid var(--rule);
        padding: 6px var(--pad) 16px;
        z-index: 10;
    }
    .nav.open { display: flex; }
    .nav a { padding: 10px 0; border-top: 1px solid var(--rule); }
}

@media (max-width: 640px) {
    .gallery { grid-template-columns: 1fr; gap: 20px; }

    .cast-list li, .show-list li, .facts > div {
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
    }
    .cast-role, .show-place, .facts dd { text-align: left; }
}

/* Bewegung reduzieren, wenn gewünscht */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
}