/* GUDIs Literaturwelt – bereinigte Gestaltung, 24.10.2026 */
:root {
  --gudi-cream: #fffdf8;
  --gudi-bordeaux: #722f37;
  --gudi-gold: #b79a65;
  --gudi-text: #292929;
}

/* Typografie – bisherige Arial-Einstellung beibehalten */
body { font-family: Arial, Helvetica, sans-serif !important; font-weight: 400; }
h1, h2, h3, h4, h5, h6 {
  font-family: Arial, Helvetica, sans-serif !important;
  font-weight: 500 !important;
  letter-spacing: normal !important;
}
h1 { font-size: 2.4rem; line-height: 1.3; }
h2 { font-size: 1.8rem; line-height: 1.4; }
h3 { font-size: 1.4rem; line-height: 1.4; }
.literatur-gedicht, .gedicht-inhalt { font-family: Arial, Helvetica, sans-serif !important; }

/* Gedichtansicht */
.literatur-gedicht {
  max-width: 850px;
  margin: 1.5rem auto;
  padding: 2rem 3rem;
  background: var(--gudi-cream) !important;
  border-radius: 12px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.05);
  color: var(--gudi-text) !important;
  color-scheme: light;
}
.gedicht-kopf { text-align: center; }
.gedicht-kopf h1 { font-size: 2.8rem; font-weight: normal; color: var(--gudi-bordeaux); margin-bottom: .3rem; }
.gedicht-datum { font-size: .95rem; color: #777; font-style: italic; margin-bottom: .5rem; }
.gedicht-trennlinie { text-align: center; color: var(--gudi-gold); margin: 1rem 0; letter-spacing: 3px; }
.gedicht-inhalt { max-width: 650px; margin: 1.5rem auto; font-size: 1.2rem; line-height: 1.7; }
.gedicht-inhalt p { margin-bottom: 1.2rem; }
.gedicht-fuss { text-align: center; margin-top: 1.5rem; }
.gedicht-zurueck { display: inline-block; margin-top: .5rem; color: var(--gudi-bordeaux); text-decoration: none; font-size: 1rem; }
.gedicht-zurueck:hover { color: var(--gudi-gold); text-decoration: underline; }

/* Theaterübersicht */
.theater-uebersicht { max-width: 850px; margin: 0 auto; }
.theater-liste { margin-top: 2rem; }
.theater-karte { padding: 1.5rem 0; border-bottom: 1px solid #e5ddd5; }
.theater-karte h2 { font-size: 1.5rem; font-weight: 500; margin-bottom: .5rem; }
.theater-karte h2 a { color: var(--gudi-bordeaux); text-decoration: none; }
.theater-karte h2 a:hover { text-decoration: underline; }
.theater-datum { color: #777; font-size: .9rem; margin-bottom: .8rem; }

/* Theaterstück-Leseansicht */
.literatur-theater {
  max-width: 850px;
  margin: 1.5rem auto;
  padding: 2rem 3rem;
  background: var(--gudi-cream) !important;
  border-radius: 14px;
  color: var(--gudi-text) !important;
  color-scheme: light;
}
.theater-kopf { text-align: center; }
.theater-kopf h1 { color: var(--gudi-bordeaux); font-size: 2.3rem; font-weight: 500; margin-bottom: .5rem; }
.theater-kopf .theater-datum { font-size: .9rem; color: #777; }
.theater-trennlinie { text-align: center; color: var(--gudi-gold); margin: 1.5rem 0; }
.literatur-theater .theater-inhalt {
  max-width: 740px;
  margin: 1.2rem auto;
  line-height: 1.55;
  font-size: 1.05rem;
  background: transparent !important;
}
.literatur-theater .theater-inhalt h2 { text-align: center; font-size: 1.55rem; margin: 2rem 0 .5rem; }
.literatur-theater .theater-inhalt h3 { text-align: center; font-size: 1.2rem; margin: .5rem 0 1.3rem; }
.literatur-theater .theater-inhalt p { margin: 0 0 .4rem; line-height: 1.5; }
.literatur-theater .theater-inhalt p:has(> strong:only-child) { margin-top: .9rem; margin-bottom: 0; }
.literatur-theater .theater-inhalt p:has(> strong:only-child) + p { margin-top: 0; margin-bottom: .4rem; }
.literatur-theater .theater-inhalt p:has(> em:only-child) { margin-top: .5rem; margin-bottom: .75rem; }
.literatur-theater .theater-inhalt strong { font-weight: 600; }
.literatur-theater .theater-inhalt em { font-style: italic; }
.literatur-theater .theater-inhalt hr { border: 0; border-top: 1px solid #d8c8c0; width: 45%; margin: 2rem auto; }
.literatur-theater .theater-inhalt ul { margin-bottom: 1.5rem; }
.literatur-theater .theater-inhalt li { margin-bottom: .4rem; }
.theater-fuss { text-align: center; margin-top: 2rem; }
.theater-zurueck { color: var(--gudi-bordeaux); text-decoration: none; }
.theater-zurueck:hover { text-decoration: underline; }

/* Lesbarkeit auf iPhone: Theme-Dark-Mode innerhalb der Lesekarten überschreiben.
   Die Farbvorgaben gelten unabhängig vom Systemfarbmodus. */
html body .literatur-gedicht .gedicht-inhalt,
html body .literatur-gedicht .gedicht-inhalt p,
html body .literatur-gedicht .gedicht-inhalt li,
html body .literatur-gedicht .gedicht-inhalt span,
html body .literatur-theater .theater-inhalt,
html body .literatur-theater .theater-inhalt p,
html body .literatur-theater .theater-inhalt li,
html body .literatur-theater .theater-inhalt span {
  color: var(--gudi-text) !important;
  -webkit-text-fill-color: var(--gudi-text) !important;
}
/* In HTML-Absätzen können zusätzliche Elemente stecken. */
html body .literatur-gedicht .gedicht-inhalt p *,
html body .literatur-theater .theater-inhalt p *,
html body .literatur-theater .theater-inhalt li * {
  color: var(--gudi-text) !important;
  -webkit-text-fill-color: var(--gudi-text) !important;
}
html body .literatur-theater .theater-inhalt strong,
html body .literatur-theater .theater-inhalt strong *,
html body .literatur-theater .theater-inhalt h2,
html body .literatur-theater .theater-inhalt h3 {
  color: var(--gudi-bordeaux) !important;
  -webkit-text-fill-color: var(--gudi-bordeaux) !important;
}
html body .literatur-theater .theater-inhalt em,
html body .literatur-theater .theater-inhalt em * {
  color: #666 !important;
  -webkit-text-fill-color: #666 !important;
}

/* Logo */
header .navbar-brand img, header .logo img, header a.logo img {
  width: 220px; max-width: 220px; height: auto; max-height: none; object-fit: contain;
}

/* Cremefarbener Kopfbereich */
body > header, body > .header, #header {
  background-color: #fffaf1;
  background-image:
    radial-gradient(ellipse at 50% 120%, rgba(218, 169, 92, .18) 0%, transparent 65%),
    linear-gradient(180deg, #fffdf8 0%, #fff7e9 100%);
  border-bottom: 1px solid #dfbd85;
  box-shadow: 0 3px 12px rgba(114, 47, 55, .06);
}
#header .navigation .active > a,
#header .navigation a.active,
header .navigation .active > a {
  background-color: var(--gudi-bordeaux);
  color: #fff;
  border-radius: 8px;
}
#header .navigation a:hover { color: var(--gudi-bordeaux); }

/* Smartphone */
@media (max-width: 768px) {
  .literatur-gedicht { padding: 1.5rem; margin: 1rem; }
  .gedicht-kopf h1 { font-size: 2rem; }
  .gedicht-inhalt { font-size: 1.05rem; line-height: 1.9; }
  .literatur-theater { padding: 1.5rem; margin: 1rem; }
  .theater-kopf h1 { font-size: 1.9rem; }
  .literatur-theater .theater-inhalt { font-size: 1rem; line-height: 1.5; }
  .literatur-theater .theater-inhalt h2 { font-size: 1.35rem; }
  header .navbar-brand img, header .logo img, header a.logo img { width: 160px; max-width: 160px; }
  body > header, body > .header, #header { background-color: #fffaf1; }
}

/* ==========================================
   GUDIs Literaturwelt – Musikstücke
   ========================================== */

.musik-uebersicht,
.literatur-musik {
    max-width: 850px;
    margin: 1.5rem auto;
    padding: 2rem 3rem;
    background: #fffdf8 !important;
    color: #292929 !important;
    border-radius: 14px;
}

.musik-kopf,
.musik-fuss {
    text-align: center;
}

.musik-kopf h1,
.musik-uebersicht h1 {
    color: #722f37 !important;
}

.musik-trennlinie {
    text-align: center;
    color: #b79a65;
    margin: 1.5rem 0;
}

.musik-karte {
    padding: 1.5rem 0;
    border-bottom: 1px solid #e5ddd5;
}

.musik-karte h2 a,
.musik-karte a,
.musik-fuss a {
    color: #722f37;
    text-decoration: none;
}

.musik-datum {
    color: #777;
    font-size: 0.9rem;
}

.musik-inhalt {
    max-width: 720px;
    margin: 1.5rem auto;
    text-align: center;
}

.musik-inhalt audio {
    display: block;
    width: 100%;
    margin: 2rem auto;
}

.musik-download a {
    display: inline-block;
    padding: 0.8rem 1.5rem;
    background: #722f37;
    color: #fff !important;
    border-radius: 8px;
    text-decoration: none;
}

.musik-download a:hover {
    background: #5b252c;
}

@media (max-width: 768px) {
    .musik-uebersicht,
    .literatur-musik {
        padding: 1.5rem;
        margin: 1rem;
    }
}