/* Erzeugt von scripts/marke.mjs aus brand/design-system. Nicht von Hand bearbeiten. */
/* The Rise Club: Bausteine. Liest nur Variablen aus tokens.css (--navy, --space-4, --radius-pill …). */

.trc-row { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center; }
.trc-stack { display: grid; gap: var(--space-4); }
.trc-icon { width: 1.25em; height: 1.25em; flex: none; fill: currentColor; }

/* Button: immer Pille, 48px hoch */
.trc-btn {
  display: inline-flex; align-items: center; gap: var(--space-2);
  min-height: 48px; padding: 0 var(--space-6);
  border-radius: var(--radius-pill); border: 1.5px solid transparent;
  font: 600 15px/1 var(--font-text); text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: transform .15s cubic-bezier(.22, 1, .36, 1), background-color .15s;
}
.trc-btn:hover { transform: translateY(-1px); }
.trc-btn:active { transform: scale(.98); }
.trc-btn:focus-visible, .trc-btn.is-focus { outline: 3px solid var(--focus); outline-offset: 3px; }
.trc-btn--primary { background: var(--cta-bg); color: var(--cta-text); }
.trc-btn--secondary { background: transparent; color: var(--text); border-color: var(--line-strong); }
.trc-btn--small { min-height: 40px; padding: 0 var(--space-4); font-size: 14px; }

/* Kategorie-Chip */
.trc-chip {
  display: inline-flex; align-items: center; gap: var(--space-1);
  padding: 6px 12px; border-radius: var(--radius-pill);
  font: 600 13px/1.2 var(--font-text); letter-spacing: .04em; text-transform: uppercase;
  color: var(--on-cat);
}
.trc-chip--run { background: var(--cat-run); }
.trc-chip--social { background: var(--cat-social); }
.trc-chip--workshop { background: var(--cat-workshop); }
.trc-chip--special, .trc-chip--soldout { background: var(--cat-special); color: var(--on-cat-special); }
/* Auf einer Event-Karte hätte der Chip die Farbe der Karte und verschwände: dort sitzt er immer auf Offwhite. */
.trc-event .trc-chip { background: var(--offwhite); color: var(--navy); }
.trc-event .trc-chip--soldout { background: var(--bordeaux); color: var(--offwhite); }
.trc-event--special .trc-chip--special { color: var(--bordeaux); }
.trc-event--special .trc-chip--soldout { background: transparent; color: var(--offwhite); box-shadow: inset 0 0 0 1.5px var(--offwhite); }

/* Event-Karte: Fläche in Kategoriefarbe, kein Schatten */
.trc-event {
  display: grid; grid-template-columns: 92px 1fr; gap: var(--space-4);
  padding: var(--space-6); border-radius: var(--radius-card);
  color: var(--on-cat); border: 1.5px solid transparent;
}
.trc-event--run { background: var(--cat-run); }
.trc-event--social { background: var(--cat-social); }
.trc-event--workshop { background: var(--cat-workshop); }
.trc-event--special { background: var(--cat-special); color: var(--on-cat-special); border-color: var(--cat-special-edge); }
/* Feste Breite: Gliker Black hat keine gleich breiten Ziffern, „22“ braucht bis 88px. So beginnen alle Titel auf derselben Linie. */
.trc-event__date { display: grid; justify-items: center; align-content: start; text-align: center; }
.trc-event__weekday, .trc-event__month { font: 600 13px/1.2 var(--font-text); letter-spacing: .04em; text-transform: uppercase; }
.trc-event__day { font: 900 56px/0.9 var(--font-display); font-variant-numeric: tabular-nums; margin-block: 4px; }
.trc-event__body { display: grid; gap: var(--space-3); align-content: start; min-width: 0; }
.trc-event__title { margin: 0; font: 600 32px/1.1 var(--font-display); text-wrap: balance; }
.trc-event__meta { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; font: 500 14px/1.45 var(--font-text); }
.trc-event__meta li { display: flex; gap: var(--space-2); align-items: center; }
.trc-event__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-2); }
.trc-event .trc-btn--primary { background: var(--navy); color: var(--offwhite); }
.trc-event .trc-btn--secondary { color: inherit; border-color: currentColor; }
.trc-event--special .trc-btn--primary { background: var(--offwhite); color: var(--navy); }
.trc-event .trc-btn:focus-visible, .trc-event .trc-btn.is-focus { outline-color: currentColor; }
@media (max-width: 520px) {
  /* Schmal: Datum als eine kompakte Zeile links („MI 22 OKT“), nicht über die ganze Breite verteilt */
  .trc-event { grid-template-columns: 1fr; gap: var(--space-3); }
  .trc-event__date { display: flex; align-items: baseline; justify-content: flex-start; gap: var(--space-2); }
  .trc-event__day { font-size: 44px; margin: 0; }
}

/* Kalender-Menü */
.trc-menu {
  display: grid; min-width: 260px; padding: var(--space-2);
  background: var(--surface-raised); color: var(--text);
  border-radius: var(--radius-tile); box-shadow: var(--float); border: 1px solid var(--line);
}
.trc-menu__item {
  display: flex; align-items: center; gap: var(--space-3); min-height: 44px; padding: 0 var(--space-4);
  border-radius: calc(var(--radius-tile) - 8px); color: inherit; text-decoration: none;
  font: 600 15px/1 var(--font-text);
}
.trc-menu__item:hover, .trc-menu__item.is-hover { background: var(--surface); }
.trc-menu__item:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; }
.trc-menu__sep { height: 1px; margin: var(--space-2) var(--space-4); background: var(--line); }
.trc-menu__hint { padding: 0 var(--space-4) var(--space-2); font: 500 13px/1.45 var(--font-text); color: var(--text-muted); }

/* Partner-Kachel */
.trc-partners { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--space-2); }
.trc-partner {
  display: grid; place-items: center; aspect-ratio: 3 / 2; padding: var(--space-6);
  background: var(--surface); border-radius: var(--radius-tile); color: var(--text-muted);
  font: 500 14px/1.45 var(--font-text); text-align: center;
}
.trc-partner img { max-width: 100%; max-height: 64px; object-fit: contain; }
.trc-partner--invite {
  background: transparent; border: 1.5px solid var(--line-strong); color: var(--text);
  gap: var(--space-2); align-content: center; text-decoration: none; font-weight: 600;
}
.trc-partner--invite .trc-icon { width: 32px; height: 32px; }

/* Sonnenbogen: Bildrahmen, oben voll gerundet wie die aufgehende Sonne (Seitenverhältnis 4:5) */
.trc-arch {
  aspect-ratio: 4 / 5; width: 100%; max-width: 100%; overflow: hidden;
  border-radius: 50% 50% var(--radius-tile) var(--radius-tile) / 40% 40% var(--radius-tile) var(--radius-tile);
  background: var(--cat-workshop);
}
.trc-arch img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Animiertes Logo: Sonne geht auf, Strahlen fächern von der Mitte nach außen, Schriftzug steigt auf */
.trc-logo { display: block; width: 100%; height: auto; }
.trc-logo path { fill: var(--text); }
.trc-logo .strahl, .trc-logo .sonne, .trc-logo .buchstabe { transform-box: view-box; }
.trc-logo .strahl { transform-origin: 672px 673px; }
@media (prefers-reduced-motion: no-preference) {
  .trc-logo .sonne { animation: trc-aufgang .6s cubic-bezier(.22, 1, .36, 1) both; }
  .trc-logo .strahl { animation: trc-strahl .5s cubic-bezier(.34, 1.56, .64, 1) both; animation-delay: calc(.25s + var(--r) * 35ms); }
  .trc-logo .buchstabe { animation: trc-buchstabe .4s cubic-bezier(.22, 1, .36, 1) both; animation-delay: calc(.6s + var(--i) * 25ms); }
}
@keyframes trc-aufgang { from { transform: translateY(400px); } to { transform: none; } }
@keyframes trc-strahl {
  from { opacity: 0; transform: rotate(calc(var(--s) * 14deg)) scale(.35); }
  35% { opacity: 1; }
  to { opacity: 1; transform: none; }
}
@keyframes trc-buchstabe { from { opacity: 0; transform: translateY(70px); } to { opacity: 1; transform: none; } }