/* Site-specific styles for ki-reifecheck.de — shared/css/base.css + reifecheck.css are linked first. */

/* Roadshow promo block (registry/sites.json -> roadshow). Lives in every site style.css that
   renders one, so there is exactly one source for the rules. */
/* The card is one building block and has one width across all three sites: the content column
   (--content-col, declared in PROSE_CSS and in shared/css/reifecheck.css). At 660px it used to be
   wider than the column it stands in on every content page. */
.roadshow { background: var(--storm-white); border: 1px solid var(--storm-light-gray);
  border-left: 4px solid var(--storm-teal); border-radius: 8px; padding: 28px 32px;
  margin: 2.5em 0; max-width: min(var(--content-col), 100%); text-align: left; }
/* In a centred context (the check start screen) the card centres with its section; everywhere
   else it keeps the left edge of the surrounding text, otherwise it floats out of the column
   and breaks the page's alignment spine. */
.hero .roadshow, [style*="text-align:center"] .roadshow { margin-inline: auto; }
/* Teal reaches 2.85:1 on white — below the 4.5:1 the label's size demands. Dark teal is 12.6:1
   and is the same brand token family. */
.roadshow-kicker { color: var(--storm-dark-teal); font-weight: 700; font-size: .78rem;
  letter-spacing: .04em; text-transform: uppercase; margin: 0 0 .5em; }
.roadshow-h { margin: 0 0 .5em; color: var(--storm-dark-teal); font-size: 1.25rem; line-height: 1.35; }
.roadshow-body { margin: 0 0 .9em; line-height: 1.7; }
.roadshow-cities { margin: 0 0 1.2em; font-weight: 600; font-size: .9rem; color: var(--storm-dark-teal); }
.roadshow-dates { list-style: none; margin: 0 0 1.2em; padding: 0; display: flex; flex-wrap: wrap;
  gap: .4em 1.4em; font-weight: 600; font-size: .9rem; color: var(--storm-dark-teal); }
.roadshow-dates .rd-date { font-variant-numeric: tabular-nums; margin-right: .4em; }
.roadshow.on-dark .roadshow-dates { color: var(--storm-white); }
.roadshow-cta { margin: 0; }
.roadshow-cta a { display: inline-block; background: var(--storm-teal); color: var(--storm-white);
  padding: 12px 26px; border-radius: 4px; font-weight: 700; text-decoration: none; }
.roadshow-cta a:hover { background: var(--storm-dark-teal); color: var(--storm-white); }
.roadshow.on-dark { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.28);
  border-left-color: var(--storm-light-teal); color: var(--storm-white); }
.roadshow.on-dark .roadshow-kicker { color: var(--storm-light-teal); }
.roadshow.on-dark .roadshow-cities { color: var(--storm-white); }
/* base.css sets an explicit colour on <p>, so inheriting from the aside is not enough here. */
.roadshow.on-dark .roadshow-h, .roadshow.on-dark .roadshow-body { color: var(--storm-white); }
.roadshow.on-dark .roadshow-cta a { background: var(--storm-white); color: var(--storm-dark-teal); }
.roadshow.on-dark .roadshow-cta a:hover { background: var(--storm-light-teal); color: var(--storm-dark-teal); }

@media (max-width: 560px) { .roadshow { padding: 22px 20px; } }

/* An event advert has no business on a printed maturity profile. */
@media print { .roadshow { display: none; } }