@charset "UTF-8";
/*
 * PlayToEarn Index page (/charts/p2e100).
 * Uses the site's existing building blocks where they exist (PlayToEarnTabFilter,
 * SnowTable, loadingSpinner); everything below is only what those do not cover.
 * Everything is scoped under .P2eIndexPage so nothing leaks into other pages.
 */
/* Header auf Inhaltsbreite bringen, wie auf /blockchaingames. Zentriert wird
   global ueber app.update.css (.HeaderLayout{justify-content:center}), es fehlt
   dort nur die Breite. Die anderen Seiten setzen sie per jQuery auf 1370px;
   hier per CSS, damit der Header beim Laden nicht kurz voll breit aufblitzt,
   und als max-width statt width, damit schmale Fenster nicht ueberlaufen.
   Diese Regel steht bewusst ausserhalb von .P2eIndexPage, weil der Header
   ueber dem Seiteninhalt liegt. p2e100.css wird nur auf dieser Seite geladen. */
.HeaderLayoutInnerView {
  max-width: 1370px;
}

.P2eIndexPage {
  --p2e-line: #eff2f5;
  --p2e-muted: #616e85;
  display: flex;
  flex-direction: column;
  padding-bottom: 3rem;
  /* Schlanke Scrollbalken ohne Pfeile, transparenter Track, damit die
     Scrollbereiche (Entered/Left, breite Tabellen) ruhig wirken.

     WICHTIG: scrollbar-width / scrollbar-color duerfen NICHT global gesetzt
     werden. Chrome schaltet die ::-webkit-scrollbar-Pseudoelemente ab, sobald
     eine der beiden Standard-Eigenschaften am Element haengt, dann greifen
     weder Breite noch das Ausblenden der Pfeile. Deshalb stehen sie in einem
     @supports-Block, den nur Browser ohne ::-webkit-scrollbar sehen (Firefox). */
}
@supports not selector(::-webkit-scrollbar) {
  .P2eIndexPage * {
    scrollbar-width: thin;
    scrollbar-color: #dcdfe4 transparent;
  }
}
.P2eIndexPage *::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
.P2eIndexPage *::-webkit-scrollbar-track {
  background: transparent;
}
.P2eIndexPage {
  /* Transparenter Rand statt weissem, sonst schneidet der Balken einen
     hellen Streifen in den Farbverlauf der Boxen */
}
.P2eIndexPage *::-webkit-scrollbar-thumb {
  background: #dcdfe4;
  border: 2px solid transparent;
  background-clip: padding-box;
  border-radius: 100px;
}
.P2eIndexPage *::-webkit-scrollbar-thumb:hover {
  background: #c2c7d0;
  background-clip: padding-box;
}
.P2eIndexPage {
  /* Chrome zeichnet die Pfeile ueber die single-button-Varianten, ein
     blosses ::-webkit-scrollbar-button erwischt sie nicht zuverlaessig */
}
.P2eIndexPage *::-webkit-scrollbar-button,
.P2eIndexPage *::-webkit-scrollbar-button:single-button,
.P2eIndexPage *::-webkit-scrollbar-button:start:decrement,
.P2eIndexPage *::-webkit-scrollbar-button:end:increment,
.P2eIndexPage *::-webkit-scrollbar-button:start:increment,
.P2eIndexPage *::-webkit-scrollbar-button:end:decrement {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  background: transparent !important;
  -webkit-appearance: none !important;
}
.P2eIndexPage *::-webkit-scrollbar-corner {
  background: transparent;
}
.P2eIndexPage {
  /* ----------------------------------------------------------------- hero
     Groesse und Gewicht der Ueberschrift kommen aus .ListItemsTitle
     (app.update.css), damit die Seite exakt wie /blockchaingames/genres
     aussieht. Hier steht nur, was dort nicht abgedeckt ist. */
  /* Familien-Leiste (P2E10 ... P2E500) steht direkt unter dem Werbebanner,
     die braucht etwas Luft nach oben, sonst klebt sie am Banner */
}
.P2eIndexPage .__P2eTopTabs {
  margin-top: 1.5rem;
}
.P2eIndexPage .__P2eHero .__Eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--p2e-muted);
  font-size: 12px;
  font-weight: 600;
}
.P2eIndexPage .__P2eHero p {
  max-width: 820px;
  line-height: 1.6;
}
.P2eIndexPage .__SecLabel {
  padding: 2rem 0 1rem 0;
  font-size: 20px;
  font-weight: 700;
}
.P2eIndexPage {
  /* Titelzeile mit den Pill-Links rechts daneben */
}
.P2eIndexPage .__TitleRow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}
.P2eIndexPage .__TitleRow .__Pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.P2eIndexPage .__TitleRow .__Pills a {
  display: inline-flex;
  align-items: center;
  padding: 0.3rem 0.75rem;
  border: 1px solid var(--p2e-line);
  border-radius: 100px;
  color: #000;
  font-size: 12px;
  font-weight: 600;
}
.P2eIndexPage .__TitleRow .__Pills a:hover {
  background: var(--trendingItemHoverColor);
  border-color: var(--borderColorHover);
}
.P2eIndexPage {
  /* ------------------------------------------------------ layout raster */
  /* Kennzahlen und Chart sitzen in EINEM Rahmen, getrennt nur durch Linien.
     Deshalb tragen die inneren Karten hier keinen eigenen Rahmen. */
}
.P2eIndexPage .__Grid {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  align-items: stretch;
  border: 1px solid var(--p2e-line);
  border-radius: 16px;
  background: #fff;
  overflow: hidden;
}
.P2eIndexPage .__Grid .__Card,
.P2eIndexPage .__Grid .__ChartCard {
  border: 0;
  border-radius: 0;
}
.P2eIndexPage .__Side {
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--p2e-line);
}
.P2eIndexPage .__Side .__Card {
  border-bottom: 1px solid var(--p2e-line);
}
.P2eIndexPage .__Side .__Card:last-child {
  border-bottom: 0;
}
.P2eIndexPage .__Card,
.P2eIndexPage .__ChartCard {
  border: 1px solid var(--p2e-line);
  border-radius: 16px;
  background: #fff;
  overflow: hidden;
}
.P2eIndexPage .__Card {
  display: flex;
  flex-direction: column;
  padding: 1.25rem;
  gap: 0.75rem;
}
.P2eIndexPage .__Card .__CardTitle {
  font-size: 16px;
  font-weight: 700;
}
.P2eIndexPage .__Card .__Row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.P2eIndexPage .__Card .__Row span {
  color: var(--p2e-muted);
  font-size: 14px;
  font-weight: 500;
}
.P2eIndexPage .__Card .__Row b {
  font-size: 14px;
  font-weight: 700;
}
.P2eIndexPage .__Card .__Row b.Up {
  color: var(--colorGreen);
}
.P2eIndexPage .__Card .__Row b.Down {
  color: var(--colorRed);
}
.P2eIndexPage .__ValueCard .__Big {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.6rem;
  line-height: 1.1;
  font-size: 36px;
  font-weight: 800;
}
.P2eIndexPage .__ValueCard .__Big .__Chg {
  color: var(--p2e-muted);
  font-size: 14px;
  font-weight: 600;
}
.P2eIndexPage .__ValueCard .__Big .__Chg.Up {
  color: var(--colorGreen);
}
.P2eIndexPage .__ValueCard .__Big .__Chg.Down {
  color: var(--colorRed);
}
.P2eIndexPage {
  /* --------------------------------------------------------------- chart */
}
.P2eIndexPage .__ChartHead {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem 1.25rem 0 1.25rem;
}
.P2eIndexPage .__ChartHead .__ChartTitle {
  font-size: 16px;
  font-weight: 700;
}
.P2eIndexPage {
  /* Segmentierte Zeitraumwahl statt der Unterstrich-Tabs */
}
.P2eIndexPage .__RangeSeg {
  display: inline-flex;
  padding: 3px;
  border-radius: 100px;
  background: #f2f2f1;
}
.P2eIndexPage .__RangeSeg .__RangeTab {
  padding: 0.35rem 0.85rem;
  border-radius: 100px;
  cursor: pointer;
  user-select: none;
  color: var(--p2e-muted);
  font-size: 13px;
  font-weight: 600;
}
.P2eIndexPage .__RangeSeg .__RangeTab:hover {
  color: #000;
}
.P2eIndexPage .__RangeSeg .__RangeTab.Active {
  background: #fff;
  color: #000;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}
.P2eIndexPage .__ChartBody {
  position: relative;
  padding: 1rem 0.5rem 0 0.5rem;
  min-height: 420px;
}
.P2eIndexPage .__ChartBody .__Empty {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 380px;
  color: var(--p2e-muted);
}
.P2eIndexPage .__Loading {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.7);
  z-index: 2;
}
.P2eIndexPage {
  /* Kachel mit dem aktuellen Stand am rechten Ende der Linie */
}
.P2eIndexPage .P2eLastValue {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 6px;
  color: #fff;
  white-space: nowrap;
  font-family: Inter, arial, sans-serif;
  font-size: 12px;
  font-weight: 700;
  /* Gleiche Toene wie die Chartlinie, siehe GREEN/RED in p2e100.js */
}
.P2eIndexPage .P2eLastValue.Up {
  background: #16c784;
}
.P2eIndexPage .P2eLastValue.Down {
  background: #ea3943;
}
.P2eIndexPage {
  /* Eigener Chart-Tooltip: die Apex-Huelle wird neutralisiert, die Karte
     darin bringt Rahmen, Radius und Schatten selbst mit. */
}
.P2eIndexPage .apexcharts-tooltip {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}
.P2eIndexPage .P2eTooltip {
  min-width: 200px;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--p2e-line);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
}
.P2eIndexPage .P2eTooltip .__TtHead {
  padding-bottom: 0.5rem;
  margin-bottom: 0.5rem;
  border-bottom: 1px solid var(--p2e-line);
  color: var(--p2e-muted);
  font-size: 12px;
  font-weight: 600;
}
.P2eIndexPage .P2eTooltip .__TtRow {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.15rem 0;
}
.P2eIndexPage .P2eTooltip .__TtRow .__TtDot {
  flex: 0 0 8px;
  width: 8px;
  height: 8px;
  border-radius: 100px;
}
.P2eIndexPage .P2eTooltip .__TtRow .__TtName {
  flex: 1;
  color: var(--p2e-muted);
  font-size: 13px;
  font-weight: 500;
}
.P2eIndexPage .P2eTooltip .__TtRow .__TtVal {
  color: #000;
  font-size: 13px;
  font-weight: 700;
}
.P2eIndexPage .__ChartNote,
.P2eIndexPage .__ConstNote {
  padding: 0 1.5rem 1.25rem 1.5rem;
  color: var(--p2e-muted);
  font-size: 12px;
}
.P2eIndexPage .__ChartNote a,
.P2eIndexPage .__ConstNote a {
  color: var(--alink);
  font-weight: 600;
}
.P2eIndexPage .__ConstNote {
  padding: 0.9rem 1.25rem;
  border-top: 1px solid var(--p2e-line);
}
.P2eIndexPage {
  /* -------------------------------------------------------- constituents */
}
.P2eIndexPage .__ConstHeadRow {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  padding: 2.5rem 0 1.25rem 0;
}
.P2eIndexPage .__ConstHeadRow h2 {
  margin: 0;
  letter-spacing: -0.5px;
  font-size: 26px;
  font-weight: 800;
}
.P2eIndexPage .__ConstHeadRow .__LastUpdate {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.15rem;
}
.P2eIndexPage .__ConstHeadRow .__LastUpdate span {
  color: var(--p2e-muted);
  font-size: 12px;
}
.P2eIndexPage .__ConstHeadRow .__LastUpdate b {
  font-size: 13px;
  font-weight: 600;
}
.P2eIndexPage {
  /* Wie oben: alles in EINEM Rahmen, innen nur Trennlinien */
}
.P2eIndexPage .__ConstGrid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 420px;
  align-items: stretch;
  border: 1px solid var(--p2e-line);
  border-radius: 16px;
  background: #fff;
  overflow: hidden;
}
.P2eIndexPage .__ConstGrid .__Card {
  border: 0;
  border-radius: 0;
}
.P2eIndexPage .__ConstMain {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.P2eIndexPage .__ConstSide {
  border-left: 1px solid var(--p2e-line);
}
.P2eIndexPage .__DonutBody {
  display: flex;
  justify-content: center;
  min-height: 420px;
}
.P2eIndexPage .__DonutBody > div {
  width: 100%;
}
.P2eIndexPage .__ConstHead {
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 1rem;
}
.P2eIndexPage .__ConstTools {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  padding-bottom: 0.5rem;
}
.P2eIndexPage .__ConstDate,
.P2eIndexPage .__ConstSearch {
  height: 34px;
  padding: 0 0.8rem;
  border: 1px solid var(--p2e-line);
  border-radius: 100px;
  background: #fff;
  color: #000;
  outline: none;
  font-size: 14px;
  font-weight: 500;
}
.P2eIndexPage .__ConstDate:focus,
.P2eIndexPage .__ConstSearch:focus {
  border-color: var(--borderColorHover);
}
.P2eIndexPage .__ConstSearch {
  width: 220px;
}
.P2eIndexPage .__Changes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}
.P2eIndexPage .__Changes .__ChgBox {
  border: 0;
  border-right: 1px solid var(--p2e-line);
  border-radius: 0;
  padding: 1.25rem;
}
.P2eIndexPage .__Changes .__ChgBox:last-child {
  border-right: 0;
}
.P2eIndexPage .__Changes .__ChgBox h4 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.75rem 0;
  font-size: 14px;
  font-weight: 700;
}
.P2eIndexPage .__Changes .__ChgBox h4 svg {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
}
.P2eIndexPage .__Changes .__ChgBox h4 .__n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 0.4rem;
  border-radius: 100px;
  background: #f2f2f1;
  font-size: 12px;
  font-weight: 600;
}
.P2eIndexPage .__Changes .__ChgBox {
  /* Ganz leichter Farbhauch von oben, laeuft nach unten in Weiss aus.
     Die Unterkante nimmt denselben Ton auf, damit der Block zusammen
     gehoert statt zwei fremde Farben nebeneinander zu stellen. */
}
.P2eIndexPage .__Changes .__ChgBox.Add {
  background: linear-gradient(180deg, rgba(5, 150, 105, 0.06) 0%, rgba(5, 150, 105, 0) 55%);
  border-bottom: 1px solid rgba(5, 150, 105, 0.18);
}
.P2eIndexPage .__Changes .__ChgBox.Rem {
  background: linear-gradient(180deg, rgba(225, 29, 72, 0.06) 0%, rgba(225, 29, 72, 0) 55%);
  border-bottom: 1px solid rgba(225, 29, 72, 0.18);
}
.P2eIndexPage .__Changes .__ChgBox {
  /* Die Icons zeichnen mit currentColor, deshalb faerbt die Ueberschrift sie mit */
}
.P2eIndexPage .__Changes .__ChgBox.Add h4 svg {
  color: var(--colorGreen);
}
.P2eIndexPage .__Changes .__ChgBox.Add h4 .__n {
  background: var(--buttonGreenBackgroundColor);
  color: var(--colorGreen);
}
.P2eIndexPage .__Changes .__ChgBox.Rem h4 svg {
  color: var(--colorRed);
}
.P2eIndexPage .__Changes .__ChgBox.Rem h4 .__n {
  background: #ffe8ed;
  color: var(--colorRed);
}
.P2eIndexPage .__Changes {
  /* Scroll nach etwa drei Zeilen. Die negativen Raender ziehen den
     Scrollbereich bis an die rechte und untere Kante der Box, damit die
     Scrollbar dort sitzt und nicht frei im Innenabstand steht. Das padding
     haelt Text und letzte Zeile trotzdem auf Abstand, und weil box-sizing
     border-box gilt, bleibt der sichtbare Bereich bei 150px. */
}
.P2eIndexPage .__Changes .__ChgList {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  max-height: 170px;
  overflow-y: auto;
  margin-right: -1.25rem;
  margin-bottom: -1.25rem;
  padding-right: 1rem;
  padding-bottom: 1.25rem;
}
.P2eIndexPage .__Changes .__ChgItem {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.35rem 0.5rem;
  border-radius: 8px;
  color: #000;
  font-size: 14px;
  font-weight: 500;
}
.P2eIndexPage .__Changes .__ChgItem:hover {
  background: var(--trendingItemHoverColor);
}
.P2eIndexPage .__Changes .__ChgEmpty {
  color: var(--p2e-muted);
  font-size: 13px;
}
.P2eIndexPage {
  /* Der Rahmen sitzt jetzt aussen, deshalb ruecken Titel und Fussnote
     selbst ein; die Tabelle laeuft bewusst bis an die Kanten. */
}
.P2eIndexPage .__ConstTitle {
  padding: 1rem 1.25rem 0.75rem 1.25rem;
  color: var(--p2e-muted);
  font-size: 13px;
  font-weight: 600;
}
.P2eIndexPage .__GameCell {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: #000;
}
.P2eIndexPage .__GameCell:hover .__GameName {
  color: var(--alink);
}
.P2eIndexPage .__GameLogo {
  display: flex;
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: #f2f2f1;
  overflow: hidden;
}
.P2eIndexPage .__GameLogo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.P2eIndexPage .__GameLogo .__Fallback {
  color: var(--p2e-muted);
  font-size: 14px;
  font-weight: 700;
}
.P2eIndexPage .__GameName {
  font-weight: 600;
}
.P2eIndexPage {
  /* Gewicht als Balken plus Zahl. Die Breite kommt aus dem Markup, weil sie
     vom groessten Gewicht der jeweiligen Liste abhaengt. */
}
.P2eIndexPage .__WeightCell {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.7rem;
}
.P2eIndexPage .__WeightCell .__Bar {
  display: block;
  flex: 0 0 90px;
  height: 6px;
  border-radius: 100px;
  background: var(--p2e-line);
  overflow: hidden;
}
.P2eIndexPage .__WeightCell .__Bar i {
  display: block;
  height: 100%;
  min-width: 3px;
  border-radius: 100px;
  background: #0012ff;
}
.P2eIndexPage .__WeightCell .__Val {
  min-width: 58px;
  text-align: right;
  font-weight: 600;
}
.P2eIndexPage {
  /* Die Hoehe fuer 20 Zeilen setzt das JS, weil die Zeilenhoehe aus der
     SnowTable kommt und sich nicht sinnvoll raten laesst. */
}
.P2eIndexPage #p2eTableScroll {
  overflow-y: auto;
}
.P2eIndexPage #p2eConstTable {
  /* app.css setzt global "table.SnowTable thead tr { position: sticky; top: -1px }".
     Das ist fuer die seitenlangen Listen gedacht, wo die SEITE scrollt. Hier
     scrollt der Container um die Tabelle, und ein sticky <tr> funktioniert bei
     border-collapse: collapse nicht sauber (der Rahmen bleibt zurueck, die
     Kopfzeile loest sich optisch auf und schiebt die erste Zeile darunter).
     Also: Zeile zurueck auf static, Sticky auf die Zellen legen. */
}
.P2eIndexPage #p2eConstTable thead tr {
  position: static !important;
  top: auto !important;
  z-index: auto !important;
}
.P2eIndexPage #p2eConstTable thead th {
  position: sticky;
  top: 0;
  z-index: 3;
  background: #fff;
  /* Die Trennlinie kommt als 1px inset-Schatten: die globale SnowTable
     zeichnet hier 2px oben und unten, und collapse-Rahmen wandern an
     sticky-Zellen ohnehin nicht mit. */
  border-top: 0;
  border-bottom: 0;
  box-shadow: inset 0 -1px 0 var(--p2e-line);
}
.P2eIndexPage #p2eConstTable {
  /* Die erste Datenzeile bringt aus der SnowTable einen border-top mit, der
     direkt unter der Trennlinie der Kopfzeile sitzt und sie doppelt wirken
     laesst. */
}
.P2eIndexPage #p2eConstTable tbody tr:first-child td {
  border-top: 0;
}
.P2eIndexPage #p2eConstTable .__Sort {
  cursor: pointer;
  user-select: none;
}
.P2eIndexPage #p2eConstTable .__Sort:hover {
  color: var(--alink);
}
.P2eIndexPage #p2eConstTable .__Sort.Asc::after {
  content: " ↑";
}
.P2eIndexPage #p2eConstTable .__Sort.Desc::after {
  content: " ↓";
}
.P2eIndexPage #p2eConstTable tbody.IsLoading {
  opacity: 0.45;
}
.P2eIndexPage {
  /* ----------------------------------------------------------------- faq
     Uebernommen aus game.scss (die zusammenhaengende Variante des Game-FAQ):
     ein Block, die Eintraege nur durch eine Linie getrennt statt als
     Einzelkarten. Die Antworten stehen im HTML und werden nur ueber
     max-height zugeklappt, bleiben fuer Suchmaschinen also lesbar. */
}
.P2eIndexPage .GameFaqWrapper {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-bottom: 1.5rem;
  background: #f2f2f1;
  border-radius: 12px;
  overflow: hidden;
}
.P2eIndexPage .GameFaqWrapper .GameFaqItem {
  display: block;
  border: 0;
  border-bottom: 1px solid #e2e2e0;
  border-radius: 0;
  background: transparent;
}
.P2eIndexPage .GameFaqWrapper .GameFaqItem:last-child {
  border-bottom: 0;
}
.P2eIndexPage .GameFaqWrapper .GameFaqItem .GameFaqHeading {
  margin: 0 !important;
  padding: 0 !important;
}
.P2eIndexPage .GameFaqWrapper .GameFaqItem .GameFaqQuestion {
  display: flex !important;
  width: 100% !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 1rem !important;
  padding: 1rem 1.25rem !important;
  background: transparent !important;
  border: 0 !important;
  cursor: pointer !important;
  text-align: left !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  color: #000 !important;
  line-height: 1.4 !important;
}
.P2eIndexPage .GameFaqWrapper .GameFaqItem .GameFaqQuestion:focus {
  outline: none;
}
.P2eIndexPage .GameFaqWrapper .GameFaqItem .GameFaqQuestion .GameFaqIcon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #666;
  transition: transform 0.25s ease;
}
.P2eIndexPage .GameFaqWrapper .GameFaqItem.Active .GameFaqQuestion .GameFaqIcon {
  transform: rotate(180deg);
  color: #0012ff;
}
.P2eIndexPage .GameFaqWrapper .GameFaqItem .GameFaqAnswer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}
.P2eIndexPage .GameFaqWrapper .GameFaqItem .GameFaqAnswer .GameFaqAnswerInner {
  padding: 0 1.25rem 1.1rem 1.25rem;
  font-size: 14px;
  color: #444;
  line-height: 1.55;
}
.P2eIndexPage .GameFaqWrapper .GameFaqItem .GameFaqAnswer .GameFaqAnswerInner p {
  margin: 0 0 0.75rem 0;
}
.P2eIndexPage .GameFaqWrapper .GameFaqItem .GameFaqAnswer .GameFaqAnswerInner p:last-child {
  margin-bottom: 0;
}
.P2eIndexPage .GameFaqWrapper .GameFaqItem .GameFaqAnswer .GameFaqAnswerInner a {
  color: #0012ff;
  text-decoration: underline;
}

@media (max-width: 1200px) {
  .P2eIndexPage .__Grid,
  .P2eIndexPage .__ConstGrid {
    grid-template-columns: minmax(0, 1fr);
  }
  .P2eIndexPage {
    /* Einspaltig trennt die Linie nach unten statt zur Seite */
  }
  .P2eIndexPage .__Side {
    border-right: 0;
    border-bottom: 1px solid var(--p2e-line);
  }
  .P2eIndexPage .__ConstSide {
    border-left: 0;
    border-top: 1px solid var(--p2e-line);
  }
}
@media (max-width: 900px) {
  .P2eIndexPage .__Changes {
    grid-template-columns: 1fr;
  }
  .P2eIndexPage .__ConstHead {
    align-items: stretch;
  }
  .P2eIndexPage .__ConstTools {
    width: 100%;
  }
  .P2eIndexPage .__ConstSearch {
    flex: 1;
    width: auto;
  }
}

/*# sourceMappingURL=p2e100.css.map */