/* Öffentliche Roadmap — schmale, zentrierte Seite. */

.rm-wrap { max-width: 860px; margin: 0 auto; padding: 40px clamp(16px, 4vw, 32px) 80px; }

.rm-head { margin-bottom: 28px; }
.rm-brand { display: flex; align-items: center; gap: 10px; font-weight: 800;
  margin-bottom: 22px; letter-spacing: -.01em; }
.rm-brand .icon { width: 24px; height: 24px; }
.rm-head h1 { margin-bottom: 6px; }
.rm-head .btn { margin-top: 10px; padding-left: 0; }

.rm-legend { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 30px; }
.rm-legend .badge { font-size: 12px; }

.rm-section { margin-bottom: 34px; }
.rm-section h2 { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.rm-section h2 .icon { width: 20px; height: 20px; color: var(--ink-muted); }

.rm-items { display: grid; gap: 12px; }
.rm-item .top { display: flex; align-items: center; gap: 12px; justify-content: space-between; flex-wrap: wrap; }
.rm-item h3 { margin: 0; }
.rm-item p { margin: 8px 0 0; color: var(--ink-muted); }

.rm-empty { text-align: center; padding: 60px 20px; color: var(--ink-muted); }
.rm-empty .icon { width: 36px; height: 36px; margin: 0 auto 14px; stroke: var(--ink-faint); }