/* ==========================================================================
   Theatergesellschaft Eich – Child Theme
   Datei: templates/yootheme_theatereich/css/custom.css
   Grundfarben, Schriften und Abstände im YOOtheme Customizer setzen;
   hier nur das, was der Customizer nicht abdeckt.
   ========================================================================== */

:root {
  /* Braun (Logo) */
  --tge-braun:        #4B3A24;
  --tge-braun-2:      #6A5243;
  --tge-braun-3:      #B8AAA0;
  --tge-braun-4:      #D9CFC8;
  --tge-braun-5:      #ECE6E1;
  /* Orange (Programmheft) */
  --tge-orange:       #F68712;
  --tge-orange-2:     #FDE7D0;
  --tge-orange-3:     #FEF4EA;
  --tge-orange-dunkel:#A85400;   /* nur kleine Labels auf Weiss */
  /* Schwarz (Logo) */
  --tge-schwarz:      #0D0E0E;
}

/* --------------------------------------------------------------------------
   Titel: Serif kursiv (Schrift selbst im Customizer wählen, lokal laden)
   -------------------------------------------------------------------------- */
.tge-serif,
.tge-serif .el-title {
  font-style: italic;
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* --------------------------------------------------------------------------
   Kicker-Label «01 / RÜCKBLICK · SAISON 2020»
   Als Klasse auf ein Text- oder Headline-Element (Meta-Stil)
   -------------------------------------------------------------------------- */
.tge-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tge-orange-dunkel);
}
/* Auf dunklen Sections das helle Orange */
.uk-section-secondary .tge-label,
.uk-light .tge-label,
.tge-bg-braun .tge-label { color: var(--tge-orange); }
/* Auf orangem Grund dunkelbraun */
.tge-bg-orange .tge-label { color: var(--tge-braun); }

/* --------------------------------------------------------------------------
   Farbflächen für Sections (Klasse in Section > Advanced > Class)
   -------------------------------------------------------------------------- */
.tge-bg-braun        { background: var(--tge-braun);    color: #fff; }
.tge-bg-orange       { background: var(--tge-orange);   color: var(--tge-schwarz); }
.tge-bg-schwarz      { background: #231F20;             color: #fff; }
.tge-bg-sand         { background: var(--tge-braun-5); }
.tge-bg-orange-hell  { background: var(--tge-orange-3); }

/* Zweigeteilte Section (Medien | vorheriges/nächstes Stück)
   Grenze in der Mitte, Text bleibt im Container */
.tge-split {
  background: linear-gradient(to right, var(--tge-braun-5) 50%, #fff 50%);
}
@media (max-width: 959px) {
  .tge-split { background: var(--tge-braun-5); }
  .tge-split .uk-grid > *:last-child { background: #fff; padding-top: 30px; padding-bottom: 30px; }
}

/* --------------------------------------------------------------------------
   Ensemble-Karten (Grid-Element, Klasse «tge-ensemble»)
   -------------------------------------------------------------------------- */
.tge-ensemble .el-item {
  background: #fff;
  border-top: 4px solid var(--tge-schwarz);
  padding: 10px 10px 16px;
  height: 100%;
  box-sizing: border-box;
}
.tge-ensemble .el-image { aspect-ratio: 1 / 1; object-fit: cover; width: 100%; }
.tge-ensemble .el-title { font-size: 15px; font-weight: 800; margin-top: 12px; }
.tge-ensemble .el-meta  { font-size: 12px; color: var(--tge-braun-2); }
.tge-ensemble .el-content { font-size: 11px; color: var(--tge-braun-3); margin-top: 2px; }

/* --------------------------------------------------------------------------
   Personen mit Avatar (Regie / Souffleuse)
   -------------------------------------------------------------------------- */
.tge-person .el-image { width: 48px; height: 48px; object-fit: cover; }

/* --------------------------------------------------------------------------
   Jahres-Navigation im Rückblick (Subnav-Element, Klasse «tge-jahre»)
   -------------------------------------------------------------------------- */
.tge-jahre > * > a { color: var(--tge-braun-4); font-size: 13px; }
.tge-jahre > .uk-active > a,
.tge-jahre > * > a:hover {
  color: var(--tge-orange);
  box-shadow: inset 0 -2px 0 var(--tge-orange);
}

/* --------------------------------------------------------------------------
   Sponsoren
   -------------------------------------------------------------------------- */
/* Logo-Raster: Hauptsponsor / Gold / Silber */
.tge-logos .el-item {
  background: #fff;
  border: 1px solid var(--tge-braun-5);
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 2 / 1;
  padding: 20px;
}
.tge-logos .el-image { max-height: 70px; width: auto; filter: grayscale(1); transition: filter .2s; }
.tge-logos a:hover .el-image { filter: none; }

/* Liniensponsoren: Name + Adresse als Textliste */
.tge-linie .el-title   { font-size: 14px; font-weight: 700; margin: 0; }
.tge-linie .el-content { font-size: 13px; color: var(--tge-braun-2); }

/* Gönner: Namen fliessend, durch Punkte getrennt */
.tge-goenner .el-item { display: inline; }
.tge-goenner .el-item:not(:last-child)::after { content: " · "; color: var(--tge-orange); }

/* --------------------------------------------------------------------------
   Eventfrog-iFrame
   -------------------------------------------------------------------------- */
.tge-eventfrog iframe { width: 100%; border: 0; display: block; }