/* blocks.css — Layer: blocks (Kirby-Blocks, seitenübergreifend einsetzbar).
 * Timeline, Personen, Bildkarten, Preiskarten, Trainingszeiten, Kommandos,
 * Download. Stärker als components, damit Blocks die Basis-UI überschreiben. */
@layer blocks {

/* =====================================================
 * Timeline — chronology in chapters (block: timeline)
 * Years on a vertical rail; milestones in red; the
 * "Zäsur" entry breaks the rail as a dark card.
 * ===================================================== */
.frgs-timeline {
  --tl-year: 5.5rem;
  --tl-gap: var(--sp-6);
  margin-block: var(--sp-12) var(--sp-16);
}

.frgs-timeline-header {
  max-width: 62ch;
  margin: 0 0 var(--sp-8);
}
.frgs-timeline-era { letter-spacing: 0.12em; color: var(--color-accent); margin-bottom: var(--sp-2); }
.frgs-timeline-header h2 { margin-bottom: var(--sp-3); }
.frgs-timeline-intro {
  color: var(--color-text-muted);
  margin: 0;
}

.frgs-timeline-list {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
}
.frgs-timeline-list::before {
  content: "";
  position: absolute;
  top: 8px;
  bottom: 8px;
  left: calc(var(--tl-year) + var(--tl-gap));
  width: 2px;
  background: var(--ink-200);
}

.frgs-timeline-item {
  position: relative;
  display: grid;
  grid-template-columns: var(--tl-year) 1fr;
  column-gap: calc(var(--tl-gap) * 2 + 2px);
  padding: var(--sp-4) 0;
}
.frgs-timeline-item::before {
  content: "";
  position: absolute;
  left: calc(var(--tl-year) + var(--tl-gap) - 5px);
  top: calc(var(--sp-4) + 0.65em);
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--color-bg);
  border: 2px solid var(--ink-300);
}

.frgs-timeline-year {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-xl);
  line-height: 1.15;
  text-align: right;
  color: var(--ink-500);
}
.frgs-timeline-text {
  padding-top: 0.35rem;
  max-width: 62ch;
}
.frgs-timeline-text p { margin: 0 0 var(--sp-2); }
.frgs-timeline-text p:last-child { margin-bottom: 0; }

/* Milestones — the moments the club is remembered by */
.frgs-timeline-item.is-meilenstein .frgs-timeline-year {
  color: var(--color-accent);
  font-size: var(--fs-2xl);
  line-height: 1;
}
.frgs-timeline-item.is-meilenstein::before {
  background: var(--color-accent);
  border-color: var(--color-accent);
  top: calc(var(--sp-4) + 0.55em);
}
.frgs-timeline-item.is-meilenstein .frgs-timeline-text {
  font-weight: 500;
  padding-top: 0.5rem;
}

/* Zäsur — 1934: the rail breaks, the page goes dark */
.frgs-timeline-item.is-zaesur {
  display: block;
  background: var(--ink-900);
  color: var(--ink-100);
  border-radius: var(--radius-lg);
  padding: var(--sp-8);
  margin: var(--sp-8) 0;
}
.frgs-timeline-item.is-zaesur::before { display: none; }
.frgs-timeline-zaesur-label {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--frgs-red-bright);
  margin: 0 0 var(--sp-3);
}
.frgs-timeline-item.is-zaesur .frgs-timeline-year {
  display: block;
  text-align: left;
  font-size: var(--fs-3xl);
  line-height: 1;
  color: var(--white);
  margin: 0 0 var(--sp-4);
}
.frgs-timeline-item.is-zaesur .frgs-timeline-text {
  color: var(--ink-200);
  font-weight: 400;
  padding-top: 0;
}

/* =====================================================
 * Personen (block: personen) — fotofreies Raster mit
 * Initialen-Monogramm, Rolle als Eyebrow, Name in Fraunces
 * ===================================================== */
.frgs-personen {
  list-style: none;
  padding: 0;
  margin: var(--sp-8) 0;
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.frgs-person {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--sp-6);
}
.frgs-person-monogramm {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--frgs-red-soft);
  color: var(--frgs-red-dark);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-md);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 0 var(--sp-4);
}
.frgs-person-rolle { margin-bottom: var(--sp-1); }
.frgs-person-name {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-xl);
  line-height: var(--lh-tight);
  margin: 0;
}


/* =====================================================
 * Bildkarten (block: bildkarten) — Foto-Raster mit Titel
 * und Kurztext; Einträge ohne Text als breites Auftaktbild
 * ===================================================== */
.frgs-bildkarten {
  list-style: none;
  padding: 0;
  margin: var(--sp-8) 0;
  display: grid;
  gap: var(--sp-6);
}
@media (min-width: 640px) {
  .frgs-bildkarten { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
  .frgs-bildkarten { grid-template-columns: repeat(3, 1fr); }
}
.frgs-bildkarte {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.frgs-bildkarte--lead { grid-column: 1 / -1; }
.frgs-bildkarte-media {
  aspect-ratio: 3 / 2;
  background: var(--ink-100);
  overflow: hidden;
}
.frgs-bildkarte--lead .frgs-bildkarte-media { aspect-ratio: 2 / 1; }
.frgs-bildkarte--lead .frgs-bildkarte-media img { object-position: center bottom; }
.frgs-bildkarte-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.frgs-bildkarte-body { padding: var(--sp-4) var(--sp-6) var(--sp-6); }
.frgs-bildkarte-titel {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-lg);
  margin: 0 0 var(--sp-2);
}
.frgs-bildkarte-text {
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
  margin: 0;
}


/* =====================================================
 * Preiskarten (block: preise) — Betrag als Fraunces-Zahl
 * ===================================================== */
.frgs-preise {
  list-style: none;
  margin: var(--sp-8) 0;
  padding: 0;
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.frgs-preis {
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--sp-6);
}
.frgs-preis-label {
  font-size: var(--fs-sm);
  font-weight: 600;
  margin: 0 0 var(--sp-4);
  flex: 1; /* Beträge über alle Karten auf gleicher Höhe */
}
.frgs-preis-betrag {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-2xl);
  line-height: 1;
  margin: 0;
}
.frgs-preis-zeitraum {
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
  margin: var(--sp-1) 0 0;
}


/* =====================================================
 * Trainingszeiten (block: trainingszeiten) — Saison-Karten
 * ===================================================== */
.frgs-zeitplan {
  display: grid;
  gap: var(--sp-6);
  margin: var(--sp-8) 0 var(--sp-4);
}
@media (min-width: 768px) {
  .frgs-zeitplan { grid-template-columns: 1fr 1fr; align-items: start; }
}
.frgs-zeitplan-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--sp-6);
}
.frgs-zeitplan-card h3 { margin-bottom: var(--sp-1); }
.frgs-zeitplan-zeitraum { margin-bottom: var(--sp-4); }
.frgs-zeitplan-liste { margin: 0; }
.frgs-zeitplan-row {
  display: grid;
  grid-template-columns: 6.5rem 1fr;
  gap: var(--sp-3);
  padding: var(--sp-3) 0;
  border-top: 1px solid var(--ink-100);
}
.frgs-zeitplan-row dt {
  font-weight: 600;
  font-size: var(--fs-sm);
}
.frgs-zeitplan-row dd {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--ink-700);
}


/* =====================================================
 * Kommandos — Ruf und Ausführung als Glossarzeilen
 * (block: kommandos) Der Ausführungsruf nach dem letzten
 * „–" trägt die Signalfarbe.
 * ===================================================== */
.frgs-kommandos {
  margin: var(--sp-8) 0;
}
.frgs-kommando {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  column-gap: var(--sp-8);
  padding: var(--sp-4) 0;
  border-top: 1px solid var(--color-border);
}
.frgs-kommando:last-child { border-bottom: 1px solid var(--color-border); }
.frgs-kommando-ruf {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-lg);
  line-height: 1.4;
  color: var(--color-text);
}
.frgs-kommando-exec { color: var(--color-accent-ink); }
.frgs-kommando-text {
  margin: 0;
  color: var(--color-text-muted);
  max-width: 60ch;
  padding-top: 0.25em;
}
.frgs-kommando-text p { margin: 0 0 var(--sp-2); }
.frgs-kommando-text p:last-child { margin-bottom: 0; }

@media (max-width: 639px) {
  .frgs-kommando { display: block; }
  .frgs-kommando-ruf { margin-bottom: var(--sp-2); }
}


@media (max-width: 639px) {
  .frgs-timeline-list::before { left: 5px; }
  .frgs-timeline-item {
    display: block;
    padding-left: var(--sp-6);
  }
  .frgs-timeline-item::before,
  .frgs-timeline-item.is-meilenstein::before {
    left: 0;
    top: calc(var(--sp-4) + 0.5em);
  }
  .frgs-timeline-year { text-align: left; }
  .frgs-timeline-text { padding-top: var(--sp-1); }
  .frgs-timeline-item.is-zaesur { padding: var(--sp-6); }
}

/* =====================================================
 * Download-Block
 * ===================================================== */

.frgs-download {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-block: var(--sp-4);
  padding: var(--sp-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.frgs-download-icon { color: var(--frgs-red); display: flex; }
.frgs-download-body { flex: 1; min-width: 12rem; }
.frgs-download-title { margin: 0; font-weight: 600; }
.frgs-download-meta { margin: 0; font-size: var(--fs-xs); color: var(--color-text-muted); }
.frgs-download .btn .icon { margin-right: var(--sp-1); }
@media (max-width: 480px) { .frgs-download { flex-wrap: wrap; } }

} /* Ende @layer blocks */