.changelog-page { color: var(--text-primary); }
#prototype-main .changelog-hero .product-figma-lockup { margin-bottom: 0; }
.changelog-page > .changelog-timeline { max-width: var(--landing-content-width); margin-top: var(--prototype-hero-content-gap); }
.changelog-page h1, .changelog-page h2, .changelog-page h3, .changelog-page p { margin: 0; }
.changelog-timeline { border-top: 1px solid var(--border-default); }
.changelog-release { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 680px) minmax(0, 1fr); column-gap: var(--landing-column-gap); padding-block: 56px 64px; border-bottom: 1px solid var(--border-default); scroll-margin-top: 112px; }
.changelog-date { grid-column: 1; padding-top: var(--regel-space-3); position: sticky; top: 112px; align-self: start; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.changelog-date a { color: var(--text-tertiary); text-decoration: none; transition: color var(--site-hover-transition); }
.changelog-date a:hover { color: var(--text-primary); }
.changelog-entry { grid-column: 2; width: 100%; max-width: 680px; min-width: 0; display: grid; gap: 32px; }
.changelog-entry-heading { display: grid; gap: 16px; }
.changelog-tag[data-slot="badge"][data-category="feature"] { color: var(--success-text); background: var(--success-bg); border-color: transparent; }
.changelog-tag[data-slot="badge"][data-category="improvement"] { color: var(--info-text); background: var(--info-bg); border-color: transparent; }
.changelog-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.changelog-tag[data-slot="badge"] { display: inline-flex; align-items: center; width: fit-content; min-height: 24px; border: 1px solid var(--border-default); border-radius: var(--regel-button-radius); padding: 2px 8px; background: var(--surface-sunken); color: var(--text-secondary); font-size: var(--regel-label-sm-size); line-height: var(--regel-label-sm-line); letter-spacing: var(--regel-label-sm-tracking); font-weight: var(--regel-type-label-weight); }
.changelog-entry h2 { font-size: var(--regel-heading-lg-size); line-height: var(--regel-heading-lg-line); letter-spacing: var(--regel-heading-lg-tracking); font-weight: var(--regel-type-heading-weight); }
.changelog-entry h3 { margin-bottom: 12px; font-size: var(--regel-heading-sm-size); line-height: var(--regel-heading-sm-line); letter-spacing: var(--regel-heading-sm-tracking); font-weight: var(--regel-type-heading-weight); }
.changelog-entry p { color: var(--text-secondary); }
.changelog-entry-copy { display: grid; gap: 32px; }
.changelog-rulebook-visual { margin: 0; padding: 40px; border-radius: var(--regel-media-frame-radius); background: var(--site-media-surface); }
.changelog-answer.regel-card { display: grid; gap: 24px; padding: 32px; border: 1px solid var(--border-default); background: var(--regel-surface); border-radius: var(--regel-card-radius); box-shadow: var(--regel-shadow-md); }
.changelog-question { justify-self: end; padding: 10px 16px; border-radius: var(--regel-media-frame-radius); background: var(--surface-sunken); color: var(--text-primary); }
.changelog-answer .changelog-answer-label { color: var(--text-tertiary); }
.changelog-answer ul { display: grid; gap: 12px; margin: 0; padding-left: 20px; color: var(--text-primary); }
.changelog-source { padding-top: 20px; border-top: 1px solid var(--border-default); color: var(--text-tertiary); }
.changelog-page a:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 6px; border-radius: 4px; }
@media (max-width: 1023px) {
 .changelog-release { grid-template-columns: minmax(0, 1fr); row-gap: 24px; }
 .changelog-date { grid-column: 1; width: 100%; max-width: 680px; justify-self: center; padding-top: 0; position: static; }
 .changelog-entry { grid-column: 1; justify-self: center; }
 .changelog-rulebook-visual { padding: 24px; }
 .changelog-answer.regel-card { padding: 24px; }
}
@media (max-width: 599px) {
 .changelog-release { grid-template-columns: minmax(0, 1fr); gap: 24px; }
 .changelog-release { padding-block: 32px 48px; }
 .changelog-date { grid-column: 1 / -1; padding-top: 0; position: static; }
 .changelog-entry { grid-column: 1 / -1; gap: 24px; }
 .changelog-entry h2 { font-size: var(--regel-heading-lg-size); line-height: var(--regel-heading-lg-line); }
 .changelog-rulebook-visual { padding: 16px; }
 .changelog-answer.regel-card { padding: 20px; gap: 20px; }
}
@media (prefers-reduced-motion: reduce) { .changelog-date a { transition: none; } }