/*
 * AnimeRadar v2.4.228 - material-roadmap-board-v2-4-228.css
 *
 * Inhalt der Roadmap-Seite (#view-roadmap.rm-2026 .rm-page-roadmap):
 * Filterzeile im Hero, das dreispaltige Board, die Statusspalten, die Karten
 * und der Hinweis unter dem Board.
 *
 * Referenz: Referenzbilder/Seitendesigns/Roadmap.png (1484 x 1060,
 * Desktop links, Mobil rechts im Geraetemockup). Bildkoordinaten sind
 * CSS-Pixel; die Inhaltsspalte der Vorlage liegt bei x 213 bis 1090 und
 * entspricht lokal dem Viewport 1118.
 *
 * Gemessene Leitwerte der Vorlage (Desktop):
 *   Filterknopf        34 hoch, Radius 10, Abstand 14, aktiv rot
 *   Spalten            x 213-500 / 510-797 / 807-1090, Abstand 10, Start y 343
 *   Spaltenkopf        Icon 20 (Einzug 17), Titel bei x 262, Zaehler-Pill 23
 *   Beschreibung       ab y 387, 13/17 grau
 *   Karten             ab y 428, Hoehe 92, Abstand 8, Innenabstand 8
 *   Kartenicon         52 x 52, Radius 14, Abstand 18 zum Text
 *   Kartentitel        14/700, Text 12.5/400, Status-Pill 21 hoch
 * Mobil (Mockup 315 breit, Faktor ca. 1.13 auf 366):
 *   Filterknopf        25 -> 28 hoch, Kurzlabel "Planung"
 *   Spalten untereinander, "In Arbeit" und "Abgeschlossen" zugeklappt als
 *   kompakte Zeile (32 -> 36 hoch) ohne Beschreibung
 *
 * Es gibt fachlich nur die Status "planned" und "completed". Die Spalte
 * "In Arbeit" bleibt daher dauerhaft leer und zeigt ihren Leerzustand; die
 * Kategorie-Tags und die Drei-Punkte-Menues der Vorlage haben in AnimeRadar
 * keine Entsprechung und fehlen bewusst.
 */

/* ========================================================================== */
/* Grundwerte der Roadmap-Seite                                               */
/* ========================================================================== */

#view-roadmap.rm-2026 .rm-page-roadmap {
  --rmb-col-bg: #121216;
  --rmb-card-bg: #16171c;
  --rmb-plan: #e4e2e8;
  --rmb-work: #4da5fd;
  --rmb-done: #26ac74;
  --rmb-warm: #f0303a;
}

/* Filter und Accordion blenden per hidden-Attribut aus; die eigenen
   display-Regeln duerfen das nicht ueberstimmen. */
#view-roadmap.rm-2026 .rm-page-roadmap [hidden] {
  display: none !important;
}

/* ========================================================================== */
/* Filterzeile im Hero                                                        */
/* ========================================================================== */

#view-roadmap.rm-2026 .rm-page-roadmap .rm-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

#view-roadmap.rm-2026 .rm-page-roadmap .rm-filter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 37px;
  padding: 0 16px;
  border: 1px solid var(--rm-line-strong);
  border-radius: 10px;
  background: #12141a;
  color: var(--rm-soft);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .16s ease, border-color .16s ease, color .16s ease;
}

#view-roadmap.rm-2026 .rm-page-roadmap .rm-filter:hover {
  border-color: rgba(255, 255, 255, .2);
  background: #191c23;
  color: var(--rm-text);
}

#view-roadmap.rm-2026 .rm-page-roadmap .rm-filter:focus-visible {
  outline: 2px solid rgba(255, 255, 255, .55);
  outline-offset: 2px;
}

#view-roadmap.rm-2026 .rm-page-roadmap .rm-filter.active {
  border-color: transparent;
  background: radial-gradient(120% 170% at 50% 45%, #f0303a 0%, #dd1e2c 100%);
  color: #fff;
  box-shadow: 0 0 18px rgba(228, 42, 51, .34);
}

/* Kurzform nur mobil, Langform nur ab Tablet. */
#view-roadmap.rm-2026 .rm-page-roadmap .rm-filter-abbr {
  display: none;
}

/* ========================================================================== */
/* Board                                                                      */
/* ========================================================================== */

#view-roadmap.rm-2026 .rm-page-roadmap .rm-board {
  display: flex;
  align-items: stretch;
  gap: 10px;
  min-width: 0;
}

#view-roadmap.rm-2026 .rm-page-roadmap .rm-column {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  min-width: 0;
  /* Seitlich 10 + 1 Rahmen: die Karten sitzen damit 11 von der Spaltenkante. */
  padding: 11px 10px 10px;
  border: 1px solid var(--rm-line);
  border-radius: var(--rm-radius);
  background: var(--rmb-col-bg);
}

/* ========================================================================== */
/* Spaltenkopf                                                                */
/* ========================================================================== */

/* Der Kopf steht enger als die Karten: Icon-Mittelpunkt 27 und
   Beschreibungskante 17 von der Spaltenkante, Zaehler-Pill 13 vom rechten
   Rand. */
#view-roadmap.rm-2026 .rm-page-roadmap .rm-column-head {
  padding: 0 2px 0 6px;
}

#view-roadmap.rm-2026 .rm-page-roadmap .rm-column-toggle {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  text-align: left;
  /* Auf dem Desktop ist der Kopf nur Ueberschrift; das Accordion greift
     erst ab 760 px (isMobileLayout). */
  cursor: default;
}

#view-roadmap.rm-2026 .rm-page-roadmap .rm-column-toggle:focus-visible {
  outline: 2px solid rgba(255, 255, 255, .5);
  outline-offset: 4px;
  border-radius: 6px;
}

#view-roadmap.rm-2026 .rm-page-roadmap .rm-column-icon {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
}

#view-roadmap.rm-2026 .rm-page-roadmap .rm-column-icon svg {
  width: 20px;
  height: 20px;
}

#view-roadmap.rm-2026 .rm-page-roadmap [data-roadmap-column="planned"] .rm-column-icon {
  color: var(--rmb-plan);
}

#view-roadmap.rm-2026 .rm-page-roadmap [data-roadmap-column="in-progress"] .rm-column-icon {
  color: var(--rmb-work);
}

#view-roadmap.rm-2026 .rm-page-roadmap [data-roadmap-column="completed"] .rm-column-icon {
  color: var(--rmb-done);
}

/* Zahnrad und Haken sind Flaechen, kein Strich. */
#view-roadmap.rm-2026 .rm-page-roadmap .rm-column-icon svg .rmb-fill {
  fill: currentColor;
  stroke: none;
}

#view-roadmap.rm-2026 .rm-page-roadmap .rm-column-icon svg .rmb-mark {
  fill: none;
  stroke: #ffffff;
  stroke-width: 2.4;
}

#view-roadmap.rm-2026 .rm-page-roadmap .rm-column-title {
  color: var(--rm-text);
  font-size: 16px;
  font-weight: 700;
  line-height: 20px;
  letter-spacing: -.005em;
}

#view-roadmap.rm-2026 .rm-page-roadmap .rm-column-count {
  display: inline-grid;
  place-items: center;
  min-width: 26px;
  height: 26px;
  padding: 0 6px;
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 999px;
  background: rgba(255, 255, 255, .07);
  color: var(--rm-soft);
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1;
}

#view-roadmap.rm-2026 .rm-page-roadmap .rm-column-desc {
  margin-top: 8px;
  color: var(--rm-muted);
  font-size: 12.5px;
  font-weight: 400;
  line-height: 15.5px;
}

/* ========================================================================== */
/* Karten                                                                     */
/* ========================================================================== */

#view-roadmap.rm-2026 .rm-page-roadmap .rm-column-panel {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
}

#view-roadmap.rm-2026 .rm-page-roadmap .rm-cards {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 11px;
}

#view-roadmap.rm-2026 .rm-page-roadmap .rm-cards:empty {
  display: none;
}

#view-roadmap.rm-2026 .rm-page-roadmap .rm-card {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  align-items: start;
  gap: 0 18px;
  min-height: 92px;
  padding: 8px;
  border: 1px solid rgba(255, 255, 255, .06);
  border-radius: var(--rm-radius);
  background: var(--rmb-card-bg);
}

#view-roadmap.rm-2026 .rm-page-roadmap .rm-card-icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 14px;
}

#view-roadmap.rm-2026 .rm-page-roadmap .rm-card-icon svg {
  width: 24px;
  height: 24px;
  stroke-width: 1.9;
}

#view-roadmap.rm-2026 .rm-page-roadmap [data-roadmap-status="planned"] .rm-card-icon {
  background: linear-gradient(145deg, rgba(240, 48, 58, .32) 0%, rgba(240, 48, 58, .1) 100%);
  color: #ff8e97;
}

#view-roadmap.rm-2026 .rm-page-roadmap [data-roadmap-status="completed"] .rm-card-icon {
  background: linear-gradient(145deg, rgba(38, 172, 116, .26) 0%, rgba(38, 172, 116, .1) 100%);
  color: #5ee7a3;
}

#view-roadmap.rm-2026 .rm-page-roadmap .rm-card-copy {
  display: block;
  min-width: 0;
}

#view-roadmap.rm-2026 .rm-page-roadmap .rm-card-copy strong {
  display: block;
  color: var(--rm-text);
  font-size: 14px;
  font-weight: 700;
  line-height: 18px;
}

#view-roadmap.rm-2026 .rm-page-roadmap .rm-card-copy small {
  display: block;
  color: #a6a4ac;
  font-size: 12.5px;
  font-weight: 400;
  line-height: 16.5px;
}

#view-roadmap.rm-2026 .rm-page-roadmap .rm-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}

#view-roadmap.rm-2026 .rm-page-roadmap .rm-tag {
  display: inline-flex;
  align-items: center;
  height: 21px;
  padding: 0 8px;
  border: 1px solid transparent;
  border-radius: 7px;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}

#view-roadmap.rm-2026 .rm-page-roadmap .rm-tag-planned {
  border-color: rgba(255, 255, 255, .12);
  background: rgba(255, 255, 255, .06);
  color: var(--rm-soft);
}

#view-roadmap.rm-2026 .rm-page-roadmap .rm-tag-done {
  background: #026937;
  color: #fff;
}

/* ========================================================================== */
/* Leerzustand einer Spalte                                                   */
/* ========================================================================== */

#view-roadmap.rm-2026 .rm-page-roadmap .rm-column-empty {
  display: grid;
  place-items: center;
  margin-top: 11px;
  padding: 22px 14px;
  border: 1px dashed rgba(255, 255, 255, .1);
  border-radius: var(--rm-radius);
  background: rgba(255, 255, 255, .014);
  color: var(--rm-dim);
  font-size: 12.5px;
  line-height: 17px;
  text-align: center;
}

/* ========================================================================== */
/* Hinweis unter dem Board                                                    */
/* ========================================================================== */

#view-roadmap.rm-2026 .rm-page-roadmap .rm-priority-note {
  margin-top: 2px;
  color: var(--rm-dim);
  font-size: 12.5px;
  line-height: 17px;
  text-align: center;
}

/* ========================================================================== */
/* Spalten untereinander ab 959 px                                            */
/* ========================================================================== */

@media (max-width: 959px) {
  #view-roadmap.rm-2026 .rm-page-roadmap .rm-board {
    flex-direction: column;
    gap: 8px;
  }

  #view-roadmap.rm-2026 .rm-page-roadmap .rm-column {
    flex: 0 0 auto;
  }

  #view-roadmap.rm-2026 .rm-page-roadmap .rm-priority-note {
    text-align: left;
  }
}

/* ========================================================================== */
/* Mobil - Filter kurz, Kopfzeile als Accordion                               */
/* ========================================================================== */

@media (max-width: 760px) {
  #view-roadmap.rm-2026 .rm-page-roadmap .rm-filters {
    gap: 5px;
  }

  /* Innenabstand 11 und 12.5 px, damit die vier Knoepfe wie in der Vorlage
     ab 375 px in einer Reihe bleiben (Projektschrift ist breiter als die
     Mockup-Schrift); darunter zweireihig. */
  #view-roadmap.rm-2026 .rm-page-roadmap .rm-filter {
    height: 36px;
    padding: 0 11px;
    border-radius: 9px;
    font-size: 12.5px;
  }

  #view-roadmap.rm-2026 .rm-page-roadmap .rm-column-count {
    min-width: 22px;
    height: 22px;
  }

  #view-roadmap.rm-2026 .rm-page-roadmap .rm-filter-full {
    display: none;
  }

  #view-roadmap.rm-2026 .rm-page-roadmap .rm-filter-abbr {
    display: inline;
  }

  #view-roadmap.rm-2026 .rm-page-roadmap .rm-column {
    padding: 10px 10px 10px;
  }

  #view-roadmap.rm-2026 .rm-page-roadmap .rm-column-toggle {
    cursor: pointer;
  }

  /* Zugeklappte Spalte: kompakte Zeile ohne Beschreibung. */
  #view-roadmap.rm-2026 .rm-page-roadmap .rm-column.is-collapsed {
    padding: 11px 10px;
  }

  #view-roadmap.rm-2026 .rm-page-roadmap .rm-column.is-collapsed .rm-column-desc {
    display: none;
  }

  #view-roadmap.rm-2026 .rm-page-roadmap .rm-column-title {
    font-size: 15px;
  }

  /* Mobil ist das Kartensymbol groesser als auf dem Desktop (Vorlage 46 im
     Mockup, Faktor 1.18). */
  #view-roadmap.rm-2026 .rm-page-roadmap .rm-card {
    grid-template-columns: 58px minmax(0, 1fr);
    gap: 0 14px;
  }

  #view-roadmap.rm-2026 .rm-page-roadmap .rm-card-icon {
    width: 58px;
    height: 58px;
  }

  #view-roadmap.rm-2026 .rm-page-roadmap .rm-card-icon svg {
    width: 26px;
    height: 26px;
  }
}

@media (max-width: 380px) {
  #view-roadmap.rm-2026 .rm-page-roadmap .rm-card {
    grid-template-columns: 46px minmax(0, 1fr);
    gap: 0 12px;
    min-height: 0;
  }

  #view-roadmap.rm-2026 .rm-page-roadmap .rm-card-icon {
    width: 46px;
    height: 46px;
  }
}

/* ========================================================================== */
/* V2.4.323 (Nachtrag, Nutzerauftrag): Roadmap ohne Icons                      */
/* ========================================================================== */

/* Weder die Spaltenkoepfe noch die Punkte tragen ein Symbol. Die Regel greift
   auch fuer kuenftige Punkte, falls dort wieder ein rm-card-icon steht. Sie
   steht am Dateiende, damit sie die Mobil-Raster der Medienabfragen oben
   ueberschreibt (gleiche Spezifitaet). */
#view-roadmap.rm-2026 .rm-page-roadmap .rm-column-icon,
#view-roadmap.rm-2026 .rm-page-roadmap .rm-card-icon {
  display: none;
}

#view-roadmap.rm-2026 .rm-page-roadmap .rm-card {
  grid-template-columns: minmax(0, 1fr);
}

/* Spaltenkopf ohne Icon-Spalte: Titel und Zaehler. Sonst rutscht der Titel in
   die 20-px-Spalte des Icons und bricht um. */
#view-roadmap.rm-2026 .rm-page-roadmap .rm-column-toggle {
  grid-template-columns: minmax(0, 1fr) auto;
}

/* Status-Tag "In Arbeit": Flaeche wie "Abgeschlossen", im Blau der Spalte
   (--rmb-work, abgedunkelt fuer weisse Schrift). */
#view-roadmap.rm-2026 .rm-page-roadmap .rm-tag-progress {
  background: #1d5f9e;
  color: #fff;
}