/* === Changelog – Section-Design (Namespace .cl-) === */
.changelog main.content.cl-page { max-width: none !important; padding: 0 !important; flex-grow: 1 !important; background: #f7fafd; }
.cl-container { max-width: 1100px; padding: 0 0 0 80px; margin: 0; box-sizing: border-box; }
@media (max-width: 768px) { .cl-container { padding: 0 20px; } }
.cl-page, .cl-page h1, .cl-page h2, .cl-page h3, .cl-page h5 { color: #1a2b3c; }
.cl-page p { line-height: 1.7; color: #334155; }

/* Hero */
.cl-hero { background: linear-gradient(135deg, #eef4fb 0%, #f7fbff 55%, #eaf3fb 100%); border-bottom: 1px solid #d4e4f4; padding: 50px 0 44px; }
.cl-hero-grid { display: grid; grid-template-columns: 1fr auto; gap: 36px; align-items: center; }
.cl-hero h1 { font-size: 2.3rem; font-weight: 800; letter-spacing: -0.025em; line-height: 1.15; margin: 0 0 14px; color: #0d2137; }
.cl-hero-sub { font-size: 1.1rem; line-height: 1.6; color: #475569; max-width: 780px; margin: 0 0 22px; }
.cl-hero-cta { display: inline-flex; align-items: center; gap: 8px; background: #0d5a93; color: #fff; font-weight: 700; font-size: 1rem; padding: 12px 24px; border-radius: 9px; text-decoration: none; box-shadow: 0 6px 16px rgba(13,90,147,0.25); transition: background .2s, transform .15s; }
.cl-hero-cta:hover { background: #094a7a; color: #fff; transform: translateY(-2px); text-decoration: none; }
.cl-hero-cta svg { width: 16px; height: 16px; }
.cl-hero-badge { text-align: center; }
.cl-hero-badge img { width: 100%; max-width: 240px; height: auto; }

/* Sections */
.cl-section { padding: 40px 0; }
.cl-toolbar { display: flex; justify-content: flex-end; gap: 8px; margin-bottom: 10px; }

/* Anker-Nav: Sprung zu Major-Versionen (sticky unter dem fixen 64px-Header, wie im ThemeWare-Hub) */
.cl-anchor-nav { position: sticky; top: 64px; z-index: 4; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; background: rgba(247,250,253,0.96); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); padding: 10px 0; margin-bottom: 10px; border-bottom: 1px solid #e6eef4; }
/* Anker-Nav oberhalb der Toolbar anordnen (nur im Changelog-Container, der die Nav enthaelt) */
.cl-container:has(> .cl-anchor-nav) { display: flex; flex-direction: column; }
.cl-container:has(> .cl-anchor-nav) > .cl-anchor-nav { order: 1; }
.cl-container:has(> .cl-anchor-nav) > .cl-toolbar { order: 2; }
.cl-container:has(> .cl-anchor-nav) > .changelogs { order: 3; }
.cl-anchor-label { font-size: 0.85rem; font-weight: 700; color: #64748b; margin-right: 2px; }
.cl-anchor-link { font-size: 0.85rem; font-weight: 600; color: #0d5a93; background: #eef5fb; border: 1px solid #d4e4f4; border-radius: 999px; padding: 4px 13px; text-decoration: none; transition: background .15s, color .15s, border-color .15s; }
.cl-anchor-link:hover { background: #0d5a93; color: #fff; border-color: #0d5a93; text-decoration: none; }

/* "Nach oben"-Button nach jeder Versionsgruppe */
.cl-top-wrap { text-align: right; margin: 4px 0 0; }
.cl-top { display: inline-flex; align-items: center; gap: 6px; color: #64748b; font-size: 0.82rem; font-weight: 600; text-decoration: none; transition: color .15s; }
.cl-top:hover { color: #0d5a93; text-decoration: none; }
.cl-top svg { width: 13px; height: 13px; }

/* Karten (Newsletter, Glossar) */
.cl-card { background: #fff; border: 1px solid #e6eef4; border-radius: 16px; padding: 28px 30px; box-shadow: 0 4px 18px rgba(13,33,55,0.06); }
.cl-card h3 { font-size: 1.3rem; font-weight: 800; margin: 0 0 6px; }
.cl-card #klicktipp-form { width: 100%; max-width: 100%; margin-bottom: 0; }
.cl-card .form-info { margin-top: 1.25rem; }
.cl-card .table td { vertical-align: top; }
@media (max-width: 768px) {
  .cl-hero-grid { grid-template-columns: 1fr; gap: 18px; }
  .cl-hero-badge { display: none; }
  .cl-hero h1 { font-size: 1.9rem; }
  .cl-card { padding: 22px 18px; }
}

/* Helle Outline-Badges im Changelog (statt opacity) – Farben wie im News-Reader */
.cl-page .badge.cl-badge--cloud { background: #eef5fb; color: #0d5a93; border: 1px solid #cfe1f2; }
.cl-page .badge.cl-badge--feature { background: #f1f9f4; color: #166534; border: 1px solid #d2ebda; }
.cl-page .badge.cl-badge--beta { background: #fdf8ee; color: #a85d0a; border: 1px solid #f0e3c6; }

/* Heading-Hierarchie: Gruppe ist jetzt h2 (statt h5) - Optik 1:1 erhalten */
.changelogs .subtitle { font-size: 1.25rem; }
.changelogs .subtitle[id^="cl-major-"] { scroll-margin-top: 112px; }
/* Glossar-Legend: Sub-Labels jetzt h4 (unter h3 Glossar) - Optik erhalten */
.changelog-legend h4 { font-size: 1.25rem; }