/*
 * AnimeRadar v2.4.228 - gemeinsames Grundgeruest der drei Seiten Roadmap,
 * Bugs melden und Feature Wunsch (#view-roadmap.rm-2026).
 *
 * Alle drei Seiten leben in derselben Ansicht #view-roadmap (Route /roadmap).
 * Welche Seite sichtbar ist, steuert das Attribut data-roadmap-entry auf der
 * Ansicht (roadmap | bug | feature); es wird aus der Navigation bzw. dem
 * URL-Parameter ?bereich=bugs|feature gesetzt.
 *
 * Diese Datei enthaelt nur die gemeinsamen Teile:
 *   - Grundwerte und Seitenumschaltung
 *   - die gemeinsame Hero-Komponente .rm-hero (Desktop und Mobil)
 *   - die leeren Artwork-Ebenen (--rm-hero-art-roadmap, -bug, -feature)
 * Die Seiteninhalte liegen in eigenen Dateien:
 *   material-roadmap-board-v2-4-228.css   (Roadmap: Filter, Spalten, Cards)
 *   material-feedback-form-v2-4-228.css   (gemeinsames Formular, Bugs-Seite)
 *   material-feature-page-v2-4-228.css    (Feature-Wunsch-Seite)
 *
 * Referenzen: Referenzbilder/Seitendesigns/Roadmap.png, Bugs.png,
 * "Feature Wunsch.png" (je 1484 x 1060, Desktop links, Mobil rechts).
 * Hero der Vorlage: 222 hoch (Bugs), 230 (Feature), 234 (Roadmap, mit
 * Filterzeile unten); Titel 40/800, Unterzeile 19/600, Text 15/400.
 * Die drei Mockups sind unterschiedlich skaliert (Inhaltsspalte 882 / 864 /
 * 847, entspricht lokal 1119 / 1105 / 1088) und setzen den Textblock
 * unterschiedlich: Versalkante des Titels bei +38 (Roadmap), +63 (Bugs) bzw.
 * +73 (Feature) unter der Hero-Oberkante; Textkante 28 (Bugs), 25 (Feature)
 * bzw. 14 (Roadmap) vom Rand. Diese Werte werden je Seite uebernommen. Die
 * Hero-Oberkante liegt in den Mockups bei 98 / 109 / 128 - hier einheitlich
 * 100 (Ansicht ab 85 + 15).
 *
 * Die Hero-Artworks der drei Vorlagen liegen nicht im Projekt und wurden
 * absichtlich nicht ersetzt. Ein spaeteres Bild wird ueber die Custom Property
 * auf #view-roadmap gesetzt, ohne das Layout zu veraendern:
 *   #view-roadmap.rm-2026 { --rm-hero-art-bug: url("assets/...webp"); }
 */

/* ========================================================================== */
/* Grundwerte                                                                 */
/* ========================================================================== */

#view-roadmap.rm-2026 {
  --rm-radius: 12px;
  --rm-line: rgba(255, 255, 255, .07);
  --rm-line-strong: rgba(255, 255, 255, .11);
  --rm-hero-bg: #0d0b0e;
  --rm-panel-bg: #121216;
  --rm-card-bg: #16171c;
  --rm-input-bg: #191c22;
  --rm-text: #ffffff;
  --rm-soft: #e6e4e8;
  --rm-muted: #b3b1b8;
  --rm-dim: #8f8d95;
  --rm-red: #ea202d;
  --rm-red-bright: #fb2234;
  --rm-blue: #2f7ff2;
  --rm-green: #22b35a;
  /* Reservierte Artwork-Ebenen, absichtlich leer. */
  --rm-hero-art-roadmap: none;
  --rm-hero-art-bug: none;
  --rm-hero-art-feature: none;
  /* Breite des Hero-Textblocks je Seite (Zeilenumbrueche der Vorlage). */
  --rm-hero-copy-width: 420px;
  width: 100%;
  min-width: 0;
  padding: 15px 0 22px;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: var(--rm-text);
}

#view-roadmap.rm-2026.active {
  display: grid;
  gap: 0;
  align-content: start;
}

#view-roadmap.rm-2026 *,
#view-roadmap.rm-2026 *::before,
#view-roadmap.rm-2026 *::after {
  box-sizing: border-box;
}

#view-roadmap.rm-2026 :where(h1, h2, h3, p, ul, ol, li, small) {
  margin: 0;
  padding: 0;
}

#view-roadmap.rm-2026 :where(ul, ol) {
  list-style: none;
}

#view-roadmap.rm-2026 :where(button, input, select, textarea) {
  font: inherit;
}

#view-roadmap.rm-2026 svg {
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ========================================================================== */
/* Seitenumschaltung                                                          */
/* ========================================================================== */

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

#view-roadmap.rm-2026[data-roadmap-entry="roadmap"] .rm-page-roadmap,
#view-roadmap.rm-2026[data-roadmap-entry="bug"] .rm-page-bug,
#view-roadmap.rm-2026[data-roadmap-entry="feature"] .rm-page-feature {
  display: grid;
  /* Abstand Hero -> Inhalt laut Vorlage: Roadmap 11, Bugs 16, Feature 13. */
  gap: 13px;
  align-content: start;
}

#view-roadmap.rm-2026[data-roadmap-entry="roadmap"] .rm-page-roadmap {
  gap: 11px;
}

#view-roadmap.rm-2026[data-roadmap-entry="bug"] .rm-page-bug {
  gap: 16px;
}

/* Das Formular liegt bis zur ersten Zuordnung ausserhalb der Seiten und ist
   dann unsichtbar; sobald es per JS in einen Host verschoben ist, zeigt es
   der jeweilige Host. */
#view-roadmap.rm-2026 > .rm-feedback {
  display: none;
}

/* ========================================================================== */
/* Hero (gemeinsam)                                                           */
/* ========================================================================== */

#view-roadmap.rm-2026 .rm-hero {
  position: relative;
  display: grid;
  align-content: start;
  min-height: 222px;
  /* Bugs: Versalkante des Titels 63 unter der Oberkante, Text endet 24 ueber
     der Unterkante. */
  padding: 53px 28px 21px;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid var(--rm-line-strong);
  border-radius: var(--rm-radius);
  background:
    radial-gradient(52% 120% at 78% 50%, rgba(150, 18, 40, .34) 0%, rgba(150, 18, 40, .12) 46%, rgba(13, 11, 14, 0) 76%),
    radial-gradient(34% 90% at 100% 0%, rgba(126, 16, 36, .32) 0%, rgba(126, 16, 36, 0) 70%),
    var(--rm-hero-bg);
}

#view-roadmap.rm-2026 .rm-hero-roadmap {
  min-height: 234px;
  padding: 28px 14px 10px;
}

#view-roadmap.rm-2026 .rm-hero-feature {
  min-height: 230px;
  padding: 64px 28px 33px 25px;
}

/* Leere Artwork-Ebene rechts (60 %). Ohne Bild unsichtbar, Layout bleibt gleich. */
#view-roadmap.rm-2026 .rm-hero-art {
  position: absolute;
  z-index: 0;
  inset: 0 0 0 auto;
  width: 60%;
  display: block;
  overflow: hidden;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: right center;
  pointer-events: none;
}

#view-roadmap.rm-2026 .rm-hero-roadmap .rm-hero-art { background-image: var(--rm-hero-art-roadmap); }
#view-roadmap.rm-2026 .rm-hero-bug .rm-hero-art { background-image: var(--rm-hero-art-bug); }
#view-roadmap.rm-2026 .rm-hero-feature .rm-hero-art { background-image: var(--rm-hero-art-feature); }

/* Weicher Uebergang nach links, damit der Text spaeter auf dunklem Grund steht. */
#view-roadmap.rm-2026 .rm-hero-art::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(13, 11, 14, 1) 0%, rgba(13, 11, 14, .8) 22%, rgba(13, 11, 14, .25) 52%, rgba(13, 11, 14, 0) 100%);
}

#view-roadmap.rm-2026 .rm-hero-copy {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 0;
  max-width: var(--rm-hero-copy-width);
  min-width: 0;
}

#view-roadmap.rm-2026 .rm-page-roadmap { --rm-hero-copy-width: 420px; }
#view-roadmap.rm-2026 .rm-page-bug { --rm-hero-copy-width: 400px; }
/* Vorlage bricht den Bugs-Text nach "funktioniert nicht" um. */
#view-roadmap.rm-2026 .rm-page-bug .rm-hero-lead { max-width: 385px; }
#view-roadmap.rm-2026 .rm-page-feature { --rm-hero-copy-width: 560px; }

#view-roadmap.rm-2026 .rm-hero-title {
  margin: 0 0 6px;
  color: var(--rm-text);
  font-family: var(--font-display, inherit);
  font-size: 40px;
  font-weight: 800;
  line-height: 44px;
  letter-spacing: -.01em;
}

#view-roadmap.rm-2026 .rm-hero-sub {
  margin: 0 0 12px;
  color: var(--rm-text);
  font-size: 19px;
  font-weight: 600;
  line-height: 24px;
}

#view-roadmap.rm-2026 .rm-hero-lead {
  color: var(--rm-soft);
  font-size: 15px;
  font-weight: 400;
  line-height: 20px;
}

/* Abstaende je Vorlage: Roadmap enger (Titel -> Unterzeile 44, Unterzeile ->
   Text 31, Zeilenabstand 18.5), Feature weiter (Unterzeile -> Text 39). */
#view-roadmap.rm-2026 .rm-hero-roadmap .rm-hero-title { margin-bottom: 4px; }
#view-roadmap.rm-2026 .rm-hero-roadmap .rm-hero-sub { margin-bottom: 8px; }
#view-roadmap.rm-2026 .rm-hero-roadmap .rm-hero-lead { line-height: 18.5px; }
#view-roadmap.rm-2026 .rm-hero-feature .rm-hero-sub { margin-bottom: 16px; }

/* Manueller Zeilenumbruch der Vorlage im Feature-Text (nur Desktop). */
#view-roadmap.rm-2026 .rm-lead-break {
  display: inline;
}

/* Satzteil, den die mobile Vorlage nicht zeigt (Bugs-Text). */
#view-roadmap.rm-2026 .rm-desktop-only {
  display: inline;
}

/* Zusatzzeile im Hero (Roadmap-Filter). Gestaltung der Knoepfe in der
   Board-Datei. */
#view-roadmap.rm-2026 .rm-hero-extra {
  position: relative;
  z-index: 1;
  margin-top: 21px;
}

/* ========================================================================== */
/* Mobil                                                                      */
/* ========================================================================== */

@media (max-width: 959px) {
  #view-roadmap.rm-2026 {
    padding: 0 0 8px;
  }

  #view-roadmap.rm-2026[data-roadmap-entry="roadmap"] .rm-page-roadmap,
  #view-roadmap.rm-2026[data-roadmap-entry="bug"] .rm-page-bug,
  #view-roadmap.rm-2026[data-roadmap-entry="feature"] .rm-page-feature {
    gap: 14px;
  }

  /* Mobile Mockups (Bildschirm 330 px, Faktor 1.18): Versalkante des Titels
     40 (Bugs), 86 (Roadmap) bzw. 91 (Feature) unter der Hero-Oberkante;
     Hero 223 / 303 / 270 hoch. */
  #view-roadmap.rm-2026 .rm-hero {
    min-height: 0;
    padding: 32px 16px 26px;
  }

  #view-roadmap.rm-2026 .rm-hero-roadmap {
    padding: 78px 16px 14px;
  }

  #view-roadmap.rm-2026 .rm-hero-feature {
    padding: 84px 16px 28px;
  }

  #view-roadmap.rm-2026 .rm-lead-break,
  #view-roadmap.rm-2026 .rm-desktop-only {
    display: none;
  }

  #view-roadmap.rm-2026 .rm-hero-art {
    width: 100%;
    background-position: 78% 30%;
  }

  #view-roadmap.rm-2026 .rm-hero-art::after {
    background:
      linear-gradient(90deg, rgba(13, 11, 14, .96) 0%, rgba(13, 11, 14, .78) 48%, rgba(13, 11, 14, .2) 100%),
      linear-gradient(180deg, rgba(13, 11, 14, .1) 0%, rgba(13, 11, 14, .5) 100%);
  }

  #view-roadmap.rm-2026 .rm-hero-copy {
    max-width: 240px;
  }

  /* Vorlage: "Hilf uns, AnimeRadar" / "noch besser zu machen." */
  #view-roadmap.rm-2026 .rm-page-bug .rm-hero-sub {
    max-width: 205px;
  }

  #view-roadmap.rm-2026 .rm-hero-title {
    margin-bottom: 6px;
    font-size: 25px;
    line-height: 30px;
  }

  #view-roadmap.rm-2026 .rm-hero-sub {
    margin-bottom: 10px;
    font-size: 16px;
    line-height: 21px;
  }

  #view-roadmap.rm-2026 .rm-hero-lead,
  #view-roadmap.rm-2026 .rm-hero-roadmap .rm-hero-lead {
    font-size: 13.5px;
    line-height: 18px;
  }

  #view-roadmap.rm-2026 .rm-hero-roadmap .rm-hero-title { margin-bottom: 6px; }

  #view-roadmap.rm-2026 .rm-hero-roadmap .rm-hero-sub,
  #view-roadmap.rm-2026 .rm-hero-feature .rm-hero-sub { margin-bottom: 10px; }

  #view-roadmap.rm-2026 .rm-hero-extra {
    margin-top: 16px;
  }
}