/* Vereinschronik (chronik.twig) – angelehnt an Gesamtchronik.html aus dem Chronik-Ordner,
   auf die Schrift und Farben der Website zurückgenommen. Alles unter .chronik. */

.chronik {
  --felt: #1f5a3a;
  --felt-dark: #143d27;
  --link: #1779ba;
  --link-light: #eaf3fa;
  --gold: #d4a017; --silver: #9aa3ad; --bronze: #b5793b;
  --border: #ddd;
  --muted: #666;
}

.chronik-kicker { margin: 0; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted); }
.chronik-kicker a { color: var(--felt); text-decoration: none; }
.chronik h1 { margin-top: 0.2rem; }

/* Überschriften: h2 = Abschnitt bzw. Saison, h3 = Unterpunkt */
.chronik h2 { font-size: 1.3rem; color: #fff; background: var(--felt); margin: 2.2rem 0 0.8rem; padding: 0.45rem 0.9rem;
  border-radius: 4px; border-left: 6px solid var(--felt-dark); scroll-margin-top: 1rem; }
.chronik h2 code { background: transparent; color: #cfe0d4; border: 0; }
.chronik h3 { font-size: 1.1rem; color: var(--felt-dark); margin: 1.8rem 0 0.6rem; padding-bottom: 0.25rem; border-bottom: 2px solid var(--felt); }

.chronik-sprungmarken { font-size: 0.85rem; line-height: 1.9; padding: 0.6rem 0.8rem; background: #f6f6f6; border-radius: 4px; }
.chronik-sprungmarken a { white-space: nowrap; }
.chronik-jahrzehnte { list-style: none; margin: 1rem 0 1.5rem; display: flex; flex-wrap: wrap; gap: 0.6rem; }
.chronik-jahrzehnte a { display: block; padding: 0.6rem 1.2rem; border: 1px solid var(--felt); border-radius: 4px; color: var(--felt-dark); font-weight: bold; text-decoration: none; }
.chronik-jahrzehnte a:hover { background: var(--felt); color: #fff; }

.chronik blockquote { margin: 1rem 0; padding: 0.8rem 1rem; background: var(--link-light); border-left: 4px solid var(--link); color: inherit; }
.chronik hr { margin: 2rem 0; }
.chronik code { font-size: 0.85em; }
.chronik p > em:only-child, .chronik li > em:only-child { color: var(--muted); }

/* Tabellen */
.chronik .table-wrap { overflow-x: auto; margin: 0.8rem 0 0.6rem; }
.chronik table { width: 100%; font-size: 0.88rem; margin: 0; border: 1px solid var(--border); }
.chronik th, .chronik td { padding: 0.4rem 0.6rem; text-align: left; vertical-align: top; }
.chronik thead, .chronik tr:first-child th { background: var(--felt-dark); color: #eef5ef; }
.chronik table.podium { width: auto; min-width: 60%; }
.chronik table.podium td:first-child { white-space: nowrap; font-weight: bold; }
.chronik table.podium td:first-child::before { content: ""; display: inline-block; width: 0.75em; height: 0.75em; border-radius: 50%;
  margin-right: 0.45em; vertical-align: -0.05em; background: #cfc9bb; }
.chronik table.podium tr.platz1 td:first-child::before { background: var(--gold); }
.chronik table.podium tr.platz2 td:first-child::before { background: var(--silver); }
.chronik table.podium tr.platz3 td:first-child::before { background: var(--bronze); }
.chronik table.podium tr.platz1 td { background: #fff8e3; }

/* Quellen-Chips und Notizen */
.chronik .quelle-link { font-size: 0.78em; color: var(--link); text-decoration: none; border: 1px solid #c4d6ec; background: #f2f7fd;
  padding: 0.05em 0.5em; border-radius: 999px; white-space: nowrap; display: inline-block; margin: 0.1em 0.15em 0.1em 0; }
.chronik .quelle-link:hover { background: var(--link); color: #fff; border-color: var(--link); }
.chronik .quelle-offline { font-size: 0.78em; color: var(--muted); border: 1px dashed #ccc; padding: 0.05em 0.5em; border-radius: 999px;
  white-space: nowrap; display: inline-block; margin: 0.1em 0.15em 0.1em 0; cursor: help; }
.chronik .quellen-block { font-size: 0.85em; color: var(--muted); }
.chronik .saison-note { font-size: 0.8em; color: var(--muted); }

/* Fotos: theme.css zentriert img ab 40em mit 80 % Breite – hier nicht */
.chronik img { margin: 0; max-width: none; display: inline-block; }
.chronik .foto-strip { display: flex; flex-wrap: wrap; gap: 10px; margin: 0.45rem 0 0.35rem; }
.chronik .foto-strip a { display: block; line-height: 0; }
.chronik .inline-foto { height: 140px; width: auto; max-width: 240px; object-fit: cover; border-radius: 4px; border: 3px solid #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); cursor: zoom-in; background: #ddd; }
.chronik .gallery-label { margin: 1rem 0 0.2rem; font-size: 0.9em; }
.chronik .photo-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; margin: 0.5rem 0 1.4rem;
  padding: 0.8rem; background: #f3f3f3; border-radius: 4px; }
.chronik .gallery-item { margin: 0; background: #fff; border-radius: 4px; overflow: hidden; box-shadow: 0 1px 6px rgba(0, 0, 0, 0.15); }
.chronik .gallery-item a { display: block; }
.chronik .gallery-img { display: block; width: 100%; max-width: 100%; aspect-ratio: 4 / 3; object-fit: cover; cursor: zoom-in; background: #ccc; }
.chronik .gallery-item figcaption { font-size: 0.75rem; color: var(--muted); line-height: 1.25; padding: 0.4rem 0.55rem 0.5rem; }

/* Lightbox (wird von chronik.js angelegt) */
.chronik-lightbox { position: fixed; inset: 0; background: rgba(10, 14, 12, 0.94); display: none; z-index: 1000;
  align-items: center; justify-content: center; flex-direction: column; }
.chronik-lightbox.open { display: flex; }
.chronik-lightbox img { max-width: 92vw; max-height: 82vh; background: #222; }
.chronik-lightbox .lb-cap { color: #e8efe9; font-size: 0.95rem; margin-top: 0.8rem; text-align: center; max-width: 90vw; }
.chronik-lightbox .lb-count { color: #9ccdae; font-size: 0.8rem; margin-top: 0.2rem; }
.chronik-lightbox button { position: absolute; background: rgba(255, 255, 255, 0.12); color: #fff; border: 0; font-size: 2.2rem; line-height: 1;
  width: 52px; height: 52px; border-radius: 50%; cursor: pointer; }
.chronik-lightbox button:hover { background: rgba(255, 255, 255, 0.3); }
.chronik-lightbox .lb-close { top: 16px; right: 18px; font-size: 1.8rem; }
.chronik-lightbox .lb-prev { left: 16px; top: 50%; transform: translateY(-50%); }
.chronik-lightbox .lb-next { right: 16px; top: 50%; transform: translateY(-50%); }

/* Smartphone: Podien als Karten, Tabellen kleiner und scrollbar */
@media screen and (max-width: 39.9375em) {
  .chronik h2 { font-size: 1.05rem; padding: 0.4rem 0.7rem; }
  .chronik table.podium { width: 100%; min-width: 0; }
  .chronik table.podium tr { display: block; border-bottom: 1px solid var(--border); }
  .chronik table.podium tr:first-child { display: none; }
  .chronik table.podium::before { content: attr(data-caption); display: block; font-weight: bold; font-size: 0.82rem; padding: 0.4rem 0.6rem;
    background: var(--felt-dark); color: #eef5ef; }
  .chronik table.podium td { display: block; border: 0; padding: 0.2rem 0.6rem; background: transparent !important; }
  .chronik table.podium td:first-child { padding-top: 0.5rem; color: var(--felt-dark); background: #f1efe7 !important; }
  .chronik table.podium tr.platz1 td:first-child { background: #fff3cf !important; }
  .chronik table.podium td:not(:first-child)::before { content: attr(data-th) ": "; font-weight: bold; color: var(--muted); }
  .chronik table:not(.podium) { font-size: 0.78rem; }
  .chronik .quelle-link, .chronik .quelle-offline { white-space: normal; word-break: break-all; }
  .chronik .inline-foto { height: 105px; max-width: 46vw; }
  .chronik .photo-gallery { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; padding: 0.5rem; }
  .chronik-lightbox img { max-width: 100vw; max-height: 72vh; }
  .chronik-lightbox button { width: 44px; height: 44px; font-size: 1.7rem; background: rgba(255, 255, 255, 0.2); }
}