/*
 * AnimeRadar v2.4.228 - material-feedback-form-v2-4-228.css
 *
 * Zwei Dinge liegen in dieser Datei:
 *
 *   1. die gemeinsame Formular-Komponente #roadmapFeedbackPanel (.rm-feedback).
 *      Sie wird per JS zwischen den Hosts der Seiten "Bugs melden" und
 *      "Feature Wunsch" verschoben und traegt dabei data-type="bug|feature".
 *      Die Komponente ist bewusst breitenunabhaengig: sie fuellt immer 100 %
 *      ihres Hosts. Wie breit der Host ist, bestimmt die jeweilige Seite.
 *
 *   2. die Seite "Bugs melden" (.rm-page-bug): Breite und Zentrierung des
 *      Hosts sowie der Abstand zum Hero.
 *
 * Die Seite "Feature Wunsch" (.rm-page-feature) liegt in
 * material-feature-page-v2-4-228.css und wird hier nicht angefasst.
 *
 * Referenz: Referenzbilder/Seitendesigns/Bugs.png (1484 x 1060).
 * Gemessene Vorlagenwerte (Desktop, Inhaltsspalte 216..1079):
 *   Container       x 302..992 (691 breit, zentriert), y 346..874 (529 hoch),
 *                   Radius 12, Flaeche rgb(19,21,27), Innenabstand 24
 *   Titel           Oberkante Versalie y 373, Grundlinie 392.5, 26/800
 *   Hinweis         zwei Zeilen, 14/400, Zeilenabstand 18, Grundlinien 418.5/436.5
 *   Label           14/600, Grundlinie 9..10 ueber der Feldkante, roter Stern
 *   Eingabefelder   x 326..968 (643 breit), Hoehe 43..44, Radius 8,
 *                   Flaeche rgb(25,29,35), Innenabstand links 16
 *   Textarea        Hoehe 128, Platzhalter-Zeilenabstand 21
 *   Button          volle Feldbreite, Hoehe 44, #ea202d, Text 16/700 weiss,
 *                   Papierflieger-Icon links, Inhalt mittig
 * Mobil (Vorlage im Smartphone-Mockup, Screen 349 breit = Faktor 0.897 zu
 * einem 390er Viewport; alle Werte hier bereits hochgerechnet):
 *   Container       volle Inhaltsbreite, Innenabstand 18
 *   Titel           23/800, Hinweis 13.5/19 dreizeilig, Textarea 122 hoch
 *
 * Der Datenschutzhinweis .rm-privacy-note steht nicht in der Vorlage, ist aber
 * rechtlich noetig und bleibt deshalb dezent unter dem Button stehen.
 */

/* ========================================================================== */
/* Seite "Bugs melden": Host des gemeinsamen Formulars                        */
/* ========================================================================== */

/* Vertrag: der Host gibt der Komponente ueber --rm-form-max ihre
   Hoechstbreite vor. Auf der Seite "Bugs melden" steht die Karte mit 690
   zentriert in der 861 breiten Inhaltsspalte (Vorlage: 691 in 864). */
#view-roadmap.rm-2026 .rm-page-bug .rm-form-host-bug {
  display: block;
  width: 100%;
  min-width: 0;
  --rm-form-max: 690px;
}

/* Vor der ersten Zuordnung durch das JS ist der Host leer und darf keinen
   Abstand unter dem Hero erzeugen. */
#view-roadmap.rm-2026 .rm-page-bug .rm-form-host-bug:empty {
  display: none;
}

/* ========================================================================== */
/* Gemeinsame Formular-Komponente                                             */
/* ========================================================================== */

#view-roadmap.rm-2026 .rm-feedback {
  --rm-form-pad: 23px;
  --rm-form-bg: #13141a;
  --rm-form-line: rgba(255, 255, 255, .11);
  /* Feldflaeche der Vorlage: rgb(27,31,36). Bewusst nicht --rm-input-bg aus
     der Shell (#191c22), das misst 2 Punkte zu dunkel. */
  --rm-field-bg: #1b1f24;
  --rm-field-line: rgba(255, 255, 255, .12);
  --rm-field-line-hover: rgba(255, 255, 255, .2);
  --rm-field-radius: 8px;
  width: 100%;
  max-width: var(--rm-form-max, 690px);
  min-width: 0;
  margin-inline: auto;
  padding: var(--rm-form-pad);
  border: 1px solid var(--rm-form-line);
  border-radius: var(--rm-radius, 12px);
  background: var(--rm-form-bg);
  color: var(--rm-text, #fff);
}

/* Der Host der aktiven Seite zeigt das Formular; die Regel in der Shell-Datei
   blendet es nur so lange aus, wie es noch direkt unter der Ansicht haengt. */
#view-roadmap.rm-2026 .rm-form-host > .rm-feedback {
  display: block;
}

#view-roadmap.rm-2026 .rm-feedback .is-hidden {
  display: none !important;
}

#view-roadmap.rm-2026 .rm-feedback.is-hidden {
  display: none !important;
}

/* Honigtopf gegen Spam. Bleibt in jedem Fall unsichtbar. */
#view-roadmap.rm-2026 .rm-feedback .rm-honeypot {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* -------------------------------------------------------------------------- */
/* Kopf                                                                        */
/* -------------------------------------------------------------------------- */

#view-roadmap.rm-2026 .rm-feedback-head {
  margin-bottom: 27px;
}

/* Die Basisdateien setzen viele Werte fuer h2, label, input, textarea und
   .ghost-action mit !important. Deshalb steht !important auch hier, wo ein
   Wert der Vorlage sonst nicht durchkaeme (material-redesign-v2-4-194.css). */
#view-roadmap.rm-2026 .rm-feedback-title {
  margin: 0;
  color: var(--rm-text, #fff);
  font-family: var(--font-display, inherit);
  font-size: 26px;
  font-weight: 800;
  line-height: 26px;
  letter-spacing: -.01em !important;
}

/* Die Vorlage bricht den Hinweis auf dem Desktop nach "angibst," um, obwohl
   die Zeile noch in den Container passt: der Textblock ist schmaler als der
   Container. Mobil laeuft er ueber die volle Breite. */
#view-roadmap.rm-2026 .rm-feedback-hint {
  max-width: 520px;
  margin: 9px 0 0;
  color: var(--rm-soft, #e6e4e8);
  font-size: 14px;
  font-weight: 400;
  line-height: 18px;
}

/* -------------------------------------------------------------------------- */
/* Feldgruppen                                                                 */
/* -------------------------------------------------------------------------- */

#view-roadmap.rm-2026 .rm-field {
  display: block;
  min-width: 0;
  margin-bottom: 14px;
}

/* Die Vorlage laesst unter dem Auswahlfeld etwas mehr Luft als unter dem
   Textfeld (gemessen 22 statt 14 bis zur Grundlinie des naechsten Labels). */
#view-roadmap.rm-2026 .rm-field:has(.rm-select) {
  margin-bottom: 22px;
}

/* Abstand zwischen Textarea und Button. Er steht bewusst hier und nicht als
   margin-top am Button, damit er nicht mit dem Feldabstand zusammenfaellt. */
#view-roadmap.rm-2026 .rm-field:has(.rm-textarea) {
  margin-bottom: 20px;
}

#view-roadmap.rm-2026 .rm-label {
  display: block;
  margin: 0 0 5px;
  color: var(--rm-text, #fff) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 18px;
  letter-spacing: normal !important;
  text-transform: none !important;
}

#view-roadmap.rm-2026 .rm-required {
  color: var(--rm-red, #ea202d);
  font-weight: 600;
}

/* -------------------------------------------------------------------------- */
/* Eingabefelder                                                               */
/* -------------------------------------------------------------------------- */

#view-roadmap.rm-2026 .rm-input {
  display: block;
  width: 100%;
  min-width: 0;
  height: 44px;
  margin: 0;
  padding: 0 16px !important;
  border: 1px solid var(--rm-field-line) !important;
  border-radius: var(--rm-field-radius) !important;
  outline: none;
  background: var(--rm-field-bg) !important;
  color: var(--rm-text, #fff) !important;
  box-shadow: none !important;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  appearance: none;
  -webkit-appearance: none;
  transition: border-color .16s ease, background-color .16s ease;
}

#view-roadmap.rm-2026 .rm-input::placeholder {
  color: var(--rm-muted, #b3b1b8);
  opacity: 1;
}

#view-roadmap.rm-2026 .rm-input:hover:not(:disabled) {
  border-color: var(--rm-field-line-hover) !important;
}

#view-roadmap.rm-2026 .rm-input:focus-visible,
#view-roadmap.rm-2026 .rm-input:focus {
  border-color: rgba(234, 32, 45, .6) !important;
  box-shadow: 0 0 0 3px rgba(234, 32, 45, .16) !important;
}

#view-roadmap.rm-2026 .rm-input:disabled {
  opacity: .6;
  cursor: not-allowed;
}

/* Auswahlfeld mit eigenem Chevron. Die Vorlage zeigt den Platzhaltertext des
   Auswahlfeldes in normaler Textfarbe, nicht als graue Platzhalteroptik -
   deshalb bleibt .is-placeholder hier bewusst hell. */
#view-roadmap.rm-2026 .rm-select {
  position: relative;
  display: block;
  min-width: 0;
}

#view-roadmap.rm-2026 .rm-select-input {
  padding-right: 44px !important;
  cursor: pointer;
  text-overflow: ellipsis;
}

#view-roadmap.rm-2026 .rm-select-input.is-placeholder {
  color: var(--rm-text, #fff);
}

#view-roadmap.rm-2026 .rm-select-input option {
  background: var(--rm-field-bg);
  color: var(--rm-text, #fff);
}

#view-roadmap.rm-2026 .rm-select-chevron {
  position: absolute;
  top: 50%;
  right: 14px;
  z-index: 30;
  width: 20px;
  height: 20px;
  margin-top: -10px;
  color: var(--rm-soft, #e6e4e8);
  stroke-width: 2;
  pointer-events: none;
  transition: transform .18s ease;
}

/* Die Anwendung ersetzt jedes native <select> durch die vorhandene
   Auswahl-Komponente .ar-select (app-v2-4-153.js, createSelectProxyFor).
   Das native Feld wird dabei unsichtbar; sichtbar ist der Proxy-Knopf.
   Er bekommt hier exakt die Feldoptik der Vorlage, das eigene Pfeil-Element
   des Proxys weicht dem Chevron aus dem Markup. Gleiches Muster wie in
   material-recovery-calendar-discover-v2-4-219.css. */
#view-roadmap.rm-2026 .rm-select .ar-select {
  width: 100%;
  min-width: 0;
}

#view-roadmap.rm-2026 .rm-select .ar-select-btn {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  width: 100%;
  min-height: 44px;
  height: 44px;
  padding: 0 44px 0 16px !important;
  border: 1px solid var(--rm-field-line) !important;
  border-radius: var(--rm-field-radius) !important;
  background: var(--rm-field-bg) !important;
  color: var(--rm-text, #fff) !important;
  box-shadow: none !important;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: normal !important;
  text-align: left;
  text-transform: none !important;
  transition: border-color .16s ease;
}

#view-roadmap.rm-2026 .rm-select .ar-select-btn:hover:not(:disabled) {
  border-color: var(--rm-field-line-hover) !important;
}

#view-roadmap.rm-2026 .rm-select .ar-select.is-open .ar-select-btn {
  border-color: rgba(234, 32, 45, .6) !important;
}

#view-roadmap.rm-2026 .rm-select .ar-select-btn:focus-visible {
  outline: 2px solid rgba(234, 32, 45, .7);
  outline-offset: 2px;
}

#view-roadmap.rm-2026 .rm-select .ar-select-text {
  padding: 0 !important;
  color: inherit !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
}

#view-roadmap.rm-2026 .rm-select .ar-select-arrow {
  display: none !important;
}

#view-roadmap.rm-2026 .rm-select:has(.ar-select.is-open) .rm-select-chevron {
  transform: rotate(180deg);
}

#view-roadmap.rm-2026 .rm-select .ar-select-menu {
  top: calc(100% + 6px);
  padding: 6px !important;
  border: 1px solid var(--rm-field-line-hover) !important;
  border-radius: 10px !important;
  background: #16171d !important;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .5) !important;
}

#view-roadmap.rm-2026 .rm-select .ar-select-option {
  min-height: 38px;
  padding: 9px 11px !important;
  border-radius: 7px !important;
  background: transparent !important;
  color: var(--rm-soft, #e6e4e8) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
}

/* Die Platzhalterzeile ist ein deaktivierter Knopf (createSelectProxyFor
   setzt das echte disabled-Attribut) und traegt zugleich is-selected, solange
   nichts gewaehlt ist. Sie darf die Hervorhebung deshalb nicht bekommen. */
#view-roadmap.rm-2026 .rm-select .ar-select-option:hover:not(:disabled),
#view-roadmap.rm-2026 .rm-select .ar-select-option:focus-visible:not(:disabled),
#view-roadmap.rm-2026 .rm-select .ar-select-option.is-selected:not(:disabled) {
  background: rgba(234, 32, 45, .16) !important;
  color: #fff !important;
}

#view-roadmap.rm-2026 .rm-select .ar-select-option:disabled {
  color: var(--rm-dim, #8f8d95) !important;
  cursor: default;
}

#view-roadmap.rm-2026 .rm-textarea {
  height: 128px;
  min-height: 88px;
  padding: 11px 16px !important;
  line-height: 21px;
  resize: vertical;
}

/* -------------------------------------------------------------------------- */
/* Absenden                                                                    */
/* -------------------------------------------------------------------------- */

#view-roadmap.rm-2026 .rm-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 13px;
  width: 100%;
  height: 44px;
  margin: 0;
  padding: 0 16px;
  border: 0;
  border-radius: var(--rm-field-radius);
  /* Grundfarbe der Vorlage: rgb(252,35,51). */
  background: #fc2333;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  line-height: 20px;
  cursor: pointer;
  transition: background-color .16s ease, opacity .16s ease;
}

#view-roadmap.rm-2026 .rm-submit:hover:not(:disabled) {
  background: #ff3b48;
}

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

#view-roadmap.rm-2026 .rm-submit:disabled {
  opacity: .68;
  cursor: progress;
}

/* Papierflieger 17 x 17, Gluehbirne 13 x 18 in der Vorlage. Die beiden Pfade
   fuellen ihre Flaeche unterschiedlich stark, deshalb zwei Groessen. */
#view-roadmap.rm-2026 .rm-submit-icon {
  flex: none;
  width: 18px;
  height: 18px;
  stroke-width: 2.2;
}

#view-roadmap.rm-2026 .rm-icon-bulb {
  width: 22px;
  height: 22px;
  stroke-width: 2;
}

/* Je Formularvariante wird nur das passende Icon gezeigt. */
#view-roadmap.rm-2026 .rm-feedback .rm-icon-bulb,
#view-roadmap.rm-2026 .rm-feedback[data-type="feature"] .rm-icon-plane {
  display: none;
}

#view-roadmap.rm-2026 .rm-feedback[data-type="feature"] .rm-icon-bulb {
  display: block;
}

#view-roadmap.rm-2026 .rm-submit-label {
  display: block;
}

/* -------------------------------------------------------------------------- */
/* Statusmeldung und Datenschutzhinweis                                        */
/* -------------------------------------------------------------------------- */

#view-roadmap.rm-2026 .rm-feedback-status {
  margin: 12px 0 0;
  color: #ff8f9c;
  font-size: 13px;
  font-weight: 500;
  line-height: 18px;
}

#view-roadmap.rm-2026 .rm-feedback-status.is-success {
  color: #7ddc9b;
}

#view-roadmap.rm-2026 .rm-feedback-status[hidden] {
  display: none;
}

#view-roadmap.rm-2026 .rm-privacy-note {
  display: block;
  margin: 12px 0 0;
  color: var(--rm-dim, #8f8d95);
  font-size: 11.5px;
  font-weight: 400;
  line-height: 16px;
}

/* -------------------------------------------------------------------------- */
/* Erfolgszustand                                                              */
/* -------------------------------------------------------------------------- */

/* Fuer den Erfolgszustand gibt es keine Vorlage. Er uebernimmt deshalb nur
   die Schrift- und Farbwerte des Formulars; die alte gruen umrandete Karte
   aus styles-v2-4-141.css wird hier bewusst zurueckgesetzt. */
#view-roadmap.rm-2026 .rm-feedback-success {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 10px;
  min-height: 220px;
  margin: 0;
  padding: 8px 0;
  border: 0;
  background: none;
  text-align: center;
}

#view-roadmap.rm-2026 .rm-success-icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin: 0 auto 2px;
  border: 0;
  border-radius: 50%;
  background: rgba(34, 179, 90, .16);
  color: #55d183;
  font-size: 22px;
  line-height: 1;
}

#view-roadmap.rm-2026 .rm-feedback-success h2 {
  margin: 0;
  color: var(--rm-text, #fff);
  font-family: var(--font-display, inherit);
  font-size: 22px;
  font-weight: 800;
  line-height: 28px;
  letter-spacing: -.01em !important;
}

#view-roadmap.rm-2026 .rm-feedback-success p {
  margin: 0;
  max-width: 420px;
  color: var(--rm-soft, #e6e4e8);
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
}

#view-roadmap.rm-2026 .rm-success-again {
  height: 40px;
  margin-top: 6px;
  padding: 0 18px;
  border: 1px solid var(--rm-field-line-hover) !important;
  border-radius: var(--rm-field-radius) !important;
  background: transparent !important;
  color: var(--rm-text, #fff) !important;
  font-size: 14px;
  font-weight: 600 !important;
  line-height: 20px;
  letter-spacing: normal !important;
  cursor: pointer;
}

#view-roadmap.rm-2026 .rm-success-again:hover {
  border-color: rgba(255, 255, 255, .32) !important;
  background: rgba(255, 255, 255, .06) !important;
}

#view-roadmap.rm-2026 .rm-success-again:focus-visible {
  outline: 2px solid rgba(255, 255, 255, .6);
  outline-offset: 2px;
}

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

@media (max-width: 959px) {
  /* Mobil fuellt die Karte die Inhaltsspalte (Vorlage skaliert 366 bei 390). */
  #view-roadmap.rm-2026 .rm-page-bug .rm-form-host-bug {
    --rm-form-max: none;
  }

  #view-roadmap.rm-2026 .rm-feedback {
    --rm-form-pad: 19px;
  }

  #view-roadmap.rm-2026 .rm-feedback-head {
    margin-bottom: 25px;
  }

  #view-roadmap.rm-2026 .rm-feedback-title {
    font-size: 23px;
    line-height: 23px;
  }

  #view-roadmap.rm-2026 .rm-feedback-hint {
    max-width: none;
    margin-top: 5px;
    line-height: 19px;
  }

  #view-roadmap.rm-2026 .rm-field,
  #view-roadmap.rm-2026 .rm-field:has(.rm-select) {
    margin-bottom: 19px;
  }

  #view-roadmap.rm-2026 .rm-field:has(.rm-textarea) {
    margin-bottom: 16px;
  }

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

  /* Innenabstand der Felder, Chevron-Position und Schriftgroessen bleiben
     mobil wie am Desktop; die Vorlage misst dort dieselben Werte. */
  #view-roadmap.rm-2026 .rm-textarea {
    height: 122px;
    line-height: 20px;
  }

  /* Der Knopfinhalt ist in der Vorlage mobil genauso breit wie auf dem
     Desktop (117), deshalb bleiben Schriftgroesse und Abstand gleich. */
  #view-roadmap.rm-2026 .rm-submit {
    height: 46px;
  }

  #view-roadmap.rm-2026 .rm-feedback-success {
    min-height: 200px;
  }

  #view-roadmap.rm-2026 .rm-feedback-success h2 {
    font-size: 20px;
    line-height: 26px;
  }
}