/* Roadmap-Board (/roadmap). Immer dunkel, unabhängig vom Farbschema der Seite. */
.rm {
    --rm-bg: #16181d;
    --rm-col: #1d2026;
    --rm-text: #e6e8ec;
    --rm-muted: #a2a8b4;
    --rm-line: #2b2f37;
    background: var(--rm-bg);
    color: var(--rm-text);
    padding: clamp(28px, 5vw, 48px) var(--gutter) clamp(40px, 6vw, 72px);
    min-height: 70vh;
}
.rm__head, .rm__toolbar, .rm__empty, .rm__none { max-width: 1760px; margin-inline: auto; }
.rm__title { display: flex; align-items: center; gap: 12px; margin: 0; font: 800 clamp(1.75rem, 4vw, 2.25rem)/1.1 var(--font-display); color: #fff; }
.rm__title-icon { width: 1.1em; height: 1.1em; color: #e5484d; }
.rm__meta { margin: 8px 0 0; color: var(--rm-text); font-size: 0.9375rem; }
.rm__empty, .rm__none { color: var(--rm-muted); margin-top: 24px; }

.rm__toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 24px; }
.rm__tab { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px; background: #262a31; font-weight: 600; font-size: 0.9375rem; }
.rm__tab svg { width: 18px; height: 18px; }
.rm__filters { display: flex; flex-wrap: wrap; gap: 6px; }
.rm-chip { border: 1px solid var(--rm-line); background: transparent; color: var(--rm-muted); border-radius: 999px; padding: 5px 12px; font: 500 0.8125rem/1.2 var(--font-body); cursor: pointer; }
.rm-chip:hover { color: var(--rm-text); border-color: #454b56; }
.rm-chip.is-active { background: var(--rm-text); color: var(--rm-bg); border-color: var(--rm-text); }
.rm__search { margin-left: auto; display: flex; align-items: center; gap: 8px; border: 1px solid var(--rm-line); border-radius: 999px; padding: 6px 12px; color: var(--rm-muted); }
.rm__search:focus-within { border-color: #5b6270; }
.rm__search svg { width: 16px; height: 16px; flex: none; }
.rm__search input { background: transparent; border: 0; color: var(--rm-text); font: inherit; font-size: 0.9375rem; width: 160px; outline: none; padding: 0; }

/* Spalten */
.rm__board {
    display: grid; grid-auto-flow: column; grid-auto-columns: minmax(240px, 1fr);
    gap: 12px; margin: 20px auto 0; max-width: 1760px;
    overflow-x: auto; scroll-snap-type: x proximity; padding-bottom: 12px; align-items: start;
}
.rm__board:focus-visible { outline: 2px solid #5b6270; outline-offset: 4px; }
.rm-col { --c: 107, 114, 128; background: rgba(var(--c), .07); background-color: color-mix(in srgb, rgb(var(--c)) 7%, var(--rm-col)); border-radius: 10px; padding: 10px 8px 8px; scroll-snap-align: start; min-width: 0; }
.rm-col--future   { --c: 229, 72, 77; }
.rm-col--later    { --c: 247, 107, 21; }
.rm-col--soon     { --c: 48, 164, 108; }
.rm-col--progress { --c: 245, 180, 20; }
.rm-col--next     { --c: 62, 99, 221; }
.rm-col .rm-pill { margin: 0 4px 10px; color: #fff; }
.rm-col.is-empty .rm-col__cards::after { content: "Keine Treffer"; display: block; padding: 16px 8px; color: var(--rm-muted); font-size: 0.875rem; }
.rm-col__cards { display: grid; gap: 8px; }

/* Karten */
.rm-card { border-radius: 8px; overflow: hidden; background: color-mix(in srgb, rgb(var(--c)) 14%, #22252c); border: 1px solid color-mix(in srgb, rgb(var(--c)) 18%, transparent); }
.rm-card[hidden] { display: none; }
.rm-card__body {
    display: block; width: 100%; text-align: left; font: inherit; color: var(--rm-text); cursor: pointer;
    background: color-mix(in srgb, rgb(var(--c)) 10%, #2a2d34); border: 0; padding: 16px 18px 12px;
    max-height: 150px; overflow: hidden; position: relative;
    -webkit-mask-image: linear-gradient(#000 70%, transparent); mask-image: linear-gradient(#000 70%, transparent);
}
.rm-card__body[aria-expanded="true"], .rm-card__body.is-short { max-height: none; -webkit-mask-image: none; mask-image: none; }
.rm-card__body.is-short { cursor: default; }
.rm-card__body:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }
.rm-card__body ul { margin: 0; padding-left: 18px; display: grid; gap: 6px; font-size: 0.8125rem; line-height: 1.45; }
.rm-card__body li::marker { color: var(--rm-muted); }
.rm-card__body li.is-sub { margin-left: 18px; list-style: circle; color: var(--rm-muted); }

.rm-card__foot { padding: 12px 14px 14px; }
.rm-card__foot h3 { display: flex; align-items: flex-start; gap: 9px; margin: 0; font: 700 1rem/1.35 var(--font-body); color: #fff; }
.rm-card__icon { width: 20px; height: 20px; flex: none; margin-top: 1px; color: rgb(var(--c)); filter: brightness(1.25); }
.rm-col--far .rm-card__icon, .rm-col--done .rm-card__icon { color: #e5484d; filter: none; }
.rm-card__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }

/* Tag-Farben (fest pro Name) */
.rm-tag { display: inline-block; padding: 2px 7px; border-radius: 4px; font-size: 0.75rem; font-weight: 500; color: #fff; }
.rm-tag--0 { background: #2f6b45; }
.rm-tag--1 { background: #7a4a2e; }
.rm-tag--2 { background: #2f4f8f; }
.rm-tag--3 { background: #5b3f8c; }
.rm-tag--4 { background: #1f6b6b; }
.rm-tag--5 { background: #8a3a5c; }
.rm-chip.rm-tag--0, .rm-chip.rm-tag--1, .rm-chip.rm-tag--2, .rm-chip.rm-tag--3, .rm-chip.rm-tag--4, .rm-chip.rm-tag--5 { background: transparent; }
.rm-chip.is-active[class*="rm-tag--"] { background: var(--rm-text); }

@media (max-width: 640px) {
    .rm__search { margin-left: 0; width: 100%; }
    .rm__search input { width: 100%; }
    .rm__board { grid-auto-columns: 82%; }
}
@media (prefers-reduced-motion: no-preference) {
    .rm-card { transition: transform .15s ease; }
    .rm-card:hover { transform: translateY(-1px); }
}