@charset "UTF-8";
/* the whole globalvars.scss is importet to localvars.scss */ /* die gesamte globalvars.scss  wird in die localvars.scss importiert */
/*$space_Bottom_Article:		15px;*/
/* 04.12.2018 Änderung von 30px auf 15px DP Viewability */
/* 2019-08-30 17:02 TVB ---  */
/* Bildergrößen Artikel */
/*720px; */
/* 2019-06-26 18:13 TVB --- Sollte das im Zuge der Breitenanpassung nicht von 720 auf 610 geändert worden sein? Ich mach das jetzt mal */
/* 430px; */
/* 569px; */
/* 1000px; */
/* 2019-06-26 18:13 TVB --- Sollte das im Zuge der Breitenanpassung nicht von 1000 auf 940 geändert worden sein? Ich mach das jetzt mal */
/* 480px; */
/* Neue Modulgrößen Artikel */
/*720px; */
/* 2019-06-26 18:13 TVB --- Sollte das im Zuge der Breitenanpassung nicht von 720 auf 610 geändert worden sein? Ich mach das jetzt mal */
/* 1000px; */
/* 2019-06-26 18:13 TVB --- Sollte das im Zuge der Breitenanpassung nicht von 1000 auf 940 geändert worden sein? Ich mach das jetzt mal */
/* 480px; */
/* 320px ... 2014-06-1 */
/* 240px ... 2017-12-6 */
/* 11.09.2014*/
/* Max/min limit/content-Variablen sind nun nicht mehr lokal */
/* 1440 (1510) the space the website need, incl. 200px for right sky */
/* 
													wenn beim größer ziehen die Webseite nach rechts springt, dann muss die Liitbox vergrößert werden
													wird sie beim größer ziehen kurzzeitig nicht größer sondern erst nach weiteren XX Pixeln, dann muss die Limitbox verkleinert werden
												*/
/* 1200 maximal width of the website without skyscraper */
/* die minimale Größe der gesamten Seite (eingebaut ab 1024er Auflösung */
/* die minimale Größe des Contents (eingebaut ab 1024er Auflösung */
/* der Platz welchen die Störer über die Page hinausreichen */
/* disrupterColor */
/* mixins */
/*
@mixin background-gradient-v($color1,$color2,$color3: false) {
		@if $color3 == null {
			background: -moz-linear-gradient(top,  rgba($color1, 0), rgba($color2, 1)) !important; 
			background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,$color1), color-stop(100%,$color2)) !important; 
			background: -webkit-linear-gradient(top,  rgba($color1, 0),rgba($color2, 1)) !important; 
			background: -o-linear-gradient(top,  rgba($color1, 0),rgba($color2, 1)) !important; 
			background: -ms-linear-gradient(top,  rgba($color1, 0),rgba($color2, 1)) !important; 
			background: linear-gradient(top,  rgba($color1, 0),rgba($color2, 1)) !important; 
			-pie-background: linear-gradient(top,  rgba($color1, 0),rgba($color2, 1)) !important; 
		} @else {
			background: -moz-linear-gradient(top,  rgba($color1, 0), rgba($color2, 50 / 100), rgba($color3, 1)) !important; 
			background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,$color1), color-stop(50%,$color2), color-stop(100%,$color3)) !important; 
			background: -webkit-linear-gradient(top,  rgba($color1, 0),rgba($color2, 50 / 100),rgba($color3, 1)) !important; 
			background: -o-linear-gradient(top,  rgba($color1, 0),rgba($color2, 50 / 100),rgba($color3, 1)) !important; 
			background: -ms-linear-gradient(top,  rgba($color1, 0),rgba($color2, 50 / 100),rgba($color3, 1)) !important; 
			background: linear-gradient(top,  rgba($color1, 0),rgba($color2, 50 / 100),rgba($color3, 1)) !important; 
			-pie-background: linear-gradient(top,  rgba($color1, 0),rgba($color2, 50 / 100),rgba($color3, 1)) !important; 			
		}
}
@mixin background-gradient-h($color1,$color2,$color3: false) {
		@if $color3 == null {
			background: -moz-linear-gradient(left,  rgba($color1, 0), rgba($color2, 1)) !important; 
			background: -webkit-gradient(linear, left top, right top, color-stop(0%,$color1), color-stop(100%,$color2)) !important; 
			background: -webkit-linear-gradient(left,  rgba($color1, 0),rgba($color2, 1)) !important; 
			background: -o-linear-gradient(left,  rgba($color1, 0),rgba($color2, 1)) !important; 
			background: -ms-linear-gradient(left,  rgba($color1, 0),rgba($color2, 1)) !important;
			background: linear-gradient(left,  rgba($color1, 0),rgba($color2, 1)) !important;
			-pie-background: linear-gradient(left,  rgba($color1, 0),rgba($color2, 1)) !important; 
		} @else {
			background: -moz-linear-gradient(left,  rgba($color1, 0), rgba($color2, 50 / 100), rgba($color3, 1)) !important; 
			background: -webkit-gradient(linear, left top, right top, color-stop(0%,$color1), color-stop(50%,$color2), color-stop(100%,$color3)) !important; 
			background: -webkit-linear-gradient(left,  rgba($color1, 0),rgba($color2, 50 / 100),rgba($color3, 1)) !important; 
			background: -o-linear-gradient(left,  rgba($color1, 0),rgba($color2, 50 / 100),rgba($color3, 1)) !important; 
			background: -ms-linear-gradient(left,  rgba($color1, 0),rgba($color2, 50 / 100),rgba($color3, 1)) !important; 
			background: linear-gradient(left,  rgba($color1, 0),rgba($color2, 50 / 100),rgba($color3, 1)) !important;
			-pie-background: linear-gradient(left,  rgba($color1, 0),rgba($color2, 50 / 100),rgba($color3, 1)) !important; 		
		}
}
*/
/* mixins */
/*
@mixin btn-shadow-inner($arg) {
	@if $arg == 1 {
		-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 20 / 100) inset, 0 1px 2px rgba(0, 0, 0, 10 / 100); 
		-moz-box-shadow: 	0 1px 0 rgba(255, 255, 255, 20 / 100) inset, 0 1px 2px rgba(0, 0, 0, 10 / 100); 
		box-shadow: 		0 1px 0 rgba(255, 255, 255, 20 / 100) inset, 0 1px 2px rgba(0, 0, 0, 10 / 100); 
	}
}
*/
/* Line clamp Mixin */
/*
$bgck: 1 hat zufolge das viele Module die ganz oben platziert sind ein margin-top bekommen.
*/
/* the default font */
/* the second font (mostly for navigation & header	 */
/* alle möglichen vertikalen Abstände: http://babel2.pcgames.de/static/gfx/scss_docu_img/vspace.jpg */
/* Vordergrundfarbe der Webseite  http://babel2.pcgames.de/static/gfx/scss_docu_img/backgroundcolor1.jpg */
/* Hintergrundfarbe auf den Landingpages http://babel2.pcgames.de/static/gfx/scss_docu_img/backgroundcolor1.jpg */
/* Hintergrundfarbe auf den Artikelseiten http://babel2.pcgames.de/static/gfx/scss_docu_img/backgroundcolor2.jpg */
/* Border for Images */
/* Border für die Teaser http://babel2.pcgames.de/static/gfx/scss_docu_img/border.jpg */
/* die Farbe dieser Border http://babel2.pcgames.de/static/gfx/scss_docu_img/border.jpg */
/* main colors from styleguide */
/*black*/
/*white*/
/* Nicht immer werden die Variablen auf die dargestellten Elemente zutreffen, da die Elemente je nach Webseite mit anderen farben oder Farben-Variablen versehen werden */
/*yellow*/
/* http://babel2.pcgames.de/static/gfx/scss_docu_img/MaincolorA.jpg */
/*yellow*/
/*green*/
/* http://babel2.pcgames.de/static/gfx/scss_docu_img/MaincolorB.jpg */
/*orange*/
/* http://babel2.pcgames.de/static/gfx/scss_docu_img/MaincolorC.jpg */
/* #bf2a32;*/
/*red*/
/* http://babel2.pcgames.de/static/gfx/scss_docu_img/MaincolorD.jpg kuratierte Forenpostungs, Zitate, User-Namen im Foren-Modul und Kommentarmodul, Überschrift für Kommentarmodul, Fehlermeldungen im Registrierungsformular */
/*blue*/
/* http://babel2.pcgames.de/static/gfx/scss_docu_img/MaincolorE.jpg */
/*light blue gray*/
/* http://babel2.pcgames.de/static/gfx/scss_docu_img/MaincolorF.jpg */
/*middle blue gray*/
/*dark gray*/
/* purple red */
/* cboxtable-th */
/* cyan */
/* cboxtable-th */
/* light blue */
/* cboxtable-cells */
/* light violett  */
/* cboxtable-th */
/* Hintergrundfarbe des Headers */
/* die Hintergrundfarbe des Navigationsbalken */
/* Die Farbe für die Kommentar-Icons http://babel2.pcgames.de/static/gfx/scss_docu_img/commentboxesDefault.jpg */
/* Die Farbe für die Kommentar-Icons für das große FullTeaserModule: http://babel2.pcgames.de/static/gfx/scss_docu_img/commentboxesFTM.jpg */
/* Dark gray used for backgrounds - eg. recommendations block */
/* Gray blue color for backgrounds */
/* Gray blue darker color for backgrounds */
/* Gray blue color for Top-Games-Module (disrupter) */
/* not used */
/* Light red color for backgrounds */
/* Light red darker color for backgrounds */
/* light gray color for callout icon for comments */
/* color of the ticker-display-icons	*/
/* color for pagination for listings etc */
/* color for pagination for listings etc */
/* color for pagination for listings etc */
/* the height of the pagination */
/* disrupterColor */
/* http://babel2.pcgames.de/static/gfx/scss_docu_img/disrupter.jpg This is a disrupter. A disrupter can have the following colors */
/* rowSeparatorColors */
/* color for all links */
/* color for all links on hover */
/* its a more decent color in comparison to the default text color http://babel2.pcgames.de/static/gfx/scss_docu_img/understatedFontColorA.jpg */
/* like understatedFontColorA, but even more decent */
/* color for module headlines within contentarea http://babel2.pcgames.de/static/gfx/scss_docu_img/standardModuleHeadlineColor.jpg */
/* color for module headlines within the right column ... some modules in the right column have another backgroundcolor so we need another color for their headlines*/
/* an alternatiove color for for module headlines within the right column ... if the backrgoundcolors are very dark */
/* the most important textcolor. its the standard color for tetx all over the website (for pcgames their is no #000 at all, the darkest possible color is #333) */
/* a slightly brighter Version of the regularFontColorA (i didnt use it to often) */
/* a slightly brighter Version of the regularFontColorA & regularFontColorB (i didnt use it to often) */
/* color for the "updated"-Sign http://babel2.pcgames.de/static/gfx/scss_docu_img/updatedColor.jpg */
/* color where you need high attention http://babel2.pcgames.de/static/gfx/scss_docu_img/attentionColor.jpg */
/* color of the loginbutton when logindropdown is not active */
/* *** color of the loginbutton when logindropdown is active */
/* color for shop link button	http://babel2.pcgames.de/static/gfx/scss_docu_img/shotButton.jpg */
/* ... for hover state */
/* color for platforms within the recommendationbox	http://babel2.pcgames.de/static/gfx/scss_docu_img/recommendationsPlatformColor.jpg */
/* the color for the editor-rating on mouseover (not for article-ratingbox) http://babel2.pcgames.de/static/gfx/scss_docu_img/ratinghover.jpg */
/* searchoverlay border + button color for desaturateB */
/* following colors are for productnavigation: http://babel2.pcgames.de/static/gfx/scss_docu_img/productnavigation.jpg */
/* all the colors for the Schnäppchenführer http://babel2.pcgames.de/static/gfx/scss_docu_img/bargains.jpg */
/* article teaser navigation are the big next & previous Buttons with Picture at the end of any article */
/* keine Ahnung */
/* könnte die sehr sehr blasse Hintergrundfarbe sein */
/* color for these platformoverlays http://babel2.pcgames.de/static/gfx/scss_docu_img/platformswitcher.jpg */
/* color for these platformoverlays http://babel2.pcgames.de/static/gfx/scss_docu_img/platformswitcher.jpg */
/* the following colors are for the ratingboxes in review articles */
/* there exist 2 types of ratingboxes: 1) boxes created by an computec-editor, 2) boxes created by users */
/* used for the Button "load more comments" in the end of the comments in articles */
/* its the horizontal space between modules (mainly used on landingpages) */
/* similar to $moduleBottomMargin, but only for the megadropdown */
/* similar to $spaceV , but only for megadropdown */
/* the height of the main navigation bar */
/* the height of the footer bar */
/*
this color is used for
		1.)		a mix of colors for teaser images which appears in a lot of old modules and in the teaser-background of Community-groups (look Megadropdown (MDD) -> Forum -> groups)
		2.)		for the images in the right column: http://babel2.pcgames.de/tags/the-elder-scrolls-5-skyrim-1790/
		3.) 	for backgroundcolor of these Element: item.miniImg
*/
/* these are several shades of textcolors (Forumteaser, article-archive-calandar etc.) */
/*
These are the formats for productpictures
The default is a portrait format, but pcgames hardware need a landscape format, because hardware product packages are unlike game packages (which are in a portrait format)
*/
/* format of mini product pictures (search dropdown -> autosuggest items) */
/* format of mini product pictures (search dropdown -> autosuggest items) */
/* a lot of modules on the right side will become this color ... http://babel2.pcgames.de/static/gfx/scss_docu_img/sideblockcolor.jpg */
/* in an article there are more then 1 color for the modules on the right side, it depends on the relation to the article */
/* relatedColorA has a bigger relation to the article then relatedColorB ... and so on */
/* background image for thumbnails of the lightboxgallery */
/* input elements */
/* the default backgroundcolor for the round avatars */
/* -------------- form-colors ---------------- */
/* ------------------------------------------- */
/* suchergebnisseite -> seiten & quickpoll (auch Article QP) */
/* im Quickpoll verwendet unausgefüllt */
/*$colorDefaultB_Font:				#a8d6f2;	*/
/*$colorDefaultB_Font_hover:		#a8d6f2;*/
/* die gesamte globalvars.scss  wird in die localvars.scss importiert */
/*$space_Bottom_Article:		15px;*/
/* 04.12.2018 Änderung von 30px auf 15px DP Viewability */
/* 2019-08-30 17:02 TVB ---  */
/* Bildergrößen Artikel */
/*720px; */
/* 2019-06-26 18:13 TVB --- Sollte das im Zuge der Breitenanpassung nicht von 720 auf 610 geändert worden sein? Ich mach das jetzt mal */
/* 430px; */
/* 569px; */
/* 1000px; */
/* 2019-06-26 18:13 TVB --- Sollte das im Zuge der Breitenanpassung nicht von 1000 auf 940 geändert worden sein? Ich mach das jetzt mal */
/* 480px; */
/* Neue Modulgrößen Artikel */
/*720px; */
/* 2019-06-26 18:13 TVB --- Sollte das im Zuge der Breitenanpassung nicht von 720 auf 610 geändert worden sein? Ich mach das jetzt mal */
/* 1000px; */
/* 2019-06-26 18:13 TVB --- Sollte das im Zuge der Breitenanpassung nicht von 1000 auf 940 geändert worden sein? Ich mach das jetzt mal */
/* 480px; */
/* 320px ... 2014-06-1 */
/* 240px ... 2017-12-6 */
/* 11.09.2014*/
/* Max/min limit/content-Variablen sind nun nicht mehr lokal */
/* 1440 (1510) the space the website need, incl. 200px for right sky */
/* 
													wenn beim größer ziehen die Webseite nach rechts springt, dann muss die Liitbox vergrößert werden
													wird sie beim größer ziehen kurzzeitig nicht größer sondern erst nach weiteren XX Pixeln, dann muss die Limitbox verkleinert werden
												*/
/* 1200 maximal width of the website without skyscraper */
/* die minimale Größe der gesamten Seite (eingebaut ab 1024er Auflösung */
/* die minimale Größe des Contents (eingebaut ab 1024er Auflösung */
/* der Platz welchen die Störer über die Page hinausreichen */
/* disrupterColor */
/* Responsive Benchmarks */
.featured .dynamischeChart,
.featured .diagram {
  margin-left: -275px;
  width: 137%;
  width: calc(100% + 275px);
}

.dynamischeChart {
  width: 100%;
  margin: 27px 0 27px;
  padding: 27px 15px 0 15px;
  font-size: 12px;
  line-height: 15px;
  background: #f5f5f5;
}
.dynamischeChart ul li {
  list-style-type: none;
}
.dynamischeChart .barColor0 {
  background: #134b7d;
}
.dynamischeChart .barColor0:hover {
  background: #185d9b;
}
.dynamischeChart .barColor1 {
  background: #ff7e00;
}
.dynamischeChart .barColor1:hover {
  background: #f9891c;
}
.dynamischeChart .barColor2 {
  background: #f1c40f;
}
.dynamischeChart .barColor2:hover {
  background: #face1e;
}
.dynamischeChart .barColor3 {
  background: #38935b;
}
.dynamischeChart .barColor3:hover {
  background: #44b06e;
}
.dynamischeChart .barColor4 {
  background: #f7564b;
}
.dynamischeChart .barColor4:hover {
  background: #fb6d63;
}
.dynamischeChart .barColor5 {
  background: #6f5092;
}
.dynamischeChart .barColor5:hover {
  background: #835eac;
}
.dynamischeChart .barColor6 {
  background: #5bd5e6;
}
.dynamischeChart .barColor6:hover {
  background: #66eafc;
}
.dynamischeChart .barColor7 {
  background: #960018;
}
.dynamischeChart .barColor7:hover {
  background: #b0001c;
}
.dynamischeChart .barColor8 {
  background: #06e7c7;
}
.dynamischeChart .barColor8:hover {
  background: #48f0d8;
}
.dynamischeChart .barColor9 {
  background: #FF4477;
}
.dynamischeChart .barColor9:hover {
  background: #f96890;
}
.dynamischeChart .barColor10 {
  background: #aad500;
}
.dynamischeChart .barColor10:hover {
  background: #b8e30d;
}
.dynamischeChart .barColor11 {
  background: #0270d6;
}
.dynamischeChart .barColor11:hover {
  background: #027df0;
}
.dynamischeChart .barColor12 {
  background: #013440;
}
.dynamischeChart .barColor12:hover {
  background: #024959;
}
.dynamischeChart .benchmarkNavigation {
  width: 100%;
  margin: 0 0 27px 0;
  float: left;
  font-size: 13px;
}
.dynamischeChart .benchmarkNavigation li {
  display: block;
  float: left;
  margin: 0 1px 1px 0;
  padding: 5px 15px;
  cursor: pointer;
  background-color: #ededed;
}
.dynamischeChart .benchmarkNavigation li:hover {
  background-color: #e5e5e5;
}
.dynamischeChart .benchmarkNavigation li div {
  color: #282828;
}
.dynamischeChart .benchmarkNavigation li.active {
  background-color: #377eb4;
}
.dynamischeChart .benchmarkNavigation li.active:hover {
  background-color: #3c8dca;
}
.dynamischeChart .benchmarkNavigation li.active div {
  color: #ffffff;
}
.dynamischeChart .benchmarkNavigation li a:hover,
.dynamischeChart .benchmarkNavigation li a:focus {
  text-decoration: none;
}
.dynamischeChart .produktBeschreibung {
  width: 100%;
  float: left;
}
.dynamischeChart .produktBeschreibung h1 {
  color: #134b7d;
  font-size: 2.4rem;
  font-weight: 400;
  line-height: 2.8rem;
}
.dynamischeChart .produktBeschreibung p {
  font-size: 14px;
  line-height: 18px;
}
.dynamischeChart .infoBoxContainer {
  width: 100%;
  padding: 10px 0;
  margin: 0 0 27px 0;
  float: left;
  border-top: 3px solid #e6e6e6;
  border-bottom: 3px solid #e6e6e6;
  font-size: 14px;
}
.dynamischeChart .infoBoxContainer .title {
  color: #aaaaaa;
}
.dynamischeChart .infoBoxContainer img {
  margin-left: 30%;
}
.dynamischeChart .infoBoxContainer p {
  margin: 0;
}
.dynamischeChart .infoBoxContainer table {
  width: 100%;
  border-collapse: collapse;
}
.dynamischeChart .infoBoxContainer table tr {
  width: 100%;
}
.dynamischeChart .infoBoxContainer table td {
  vertical-align: top;
}
.dynamischeChart .infoBoxContainer .infoIconContainer {
  width: 10%;
  text-align: center;
}
.dynamischeChart .infoBoxContainer .title {
  width: 22%;
  padding: 0.3em 1% 0.3em 3%;
}
.dynamischeChart .infoBoxContainer .beschreibung {
  width: 70%;
  padding: 0.3em 1% 0.3em 3%;
}
.dynamischeChart .topDropDowns {
  width: 100%;
  float: left;
  margin: 0 0 27px 0;
}
.dynamischeChart .topDropDowns div:nth-child(1) {
  margin-right: 15px;
}
.dynamischeChart .topDropDowns .aufloesungenContainer,
.dynamischeChart .topDropDowns .grafikkartenContainer {
  width: 40%;
  float: left;
  position: relative;
}
.dynamischeChart .topDropDowns .aufloesungenContainer p,
.dynamischeChart .topDropDowns .grafikkartenContainer p {
  font-size: 14px;
  line-height: 15px;
}
.dynamischeChart .topDropDowns .aufloesungenContainer p,
.dynamischeChart .topDropDowns .grafikkartenContainer p {
  margin: 0;
  padding: 7px 0 0 10px;
  margin-top: 0 !important;
}
.dynamischeChart .topDropDowns .aufloesungenContainer .aufloesungenDropDownBtn,
.dynamischeChart .topDropDowns .grafikkartenContainer .aufloesungenDropDownBtn {
  height: 30px;
  width: 100%;
  float: left;
  cursor: default;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  border: 1px solid #646464;
  line-height: 15px;
  background: #999999;
  color: #ffffff;
}
.dynamischeChart .topDropDowns .aufloesungenContainer .arrowDropdown.fontIconAfter:after,
.dynamischeChart .topDropDowns .grafikkartenContainer .arrowDropdown.fontIconAfter:after {
  content: "\e810";
  height: 28px;
  overflow: hidden;
  position: absolute;
  right: 0;
  text-align: center;
  top: 0;
  width: 28px;
  background: none repeat scroll 0 0 #646464;
  color: #fff;
  font-size: 16px;
  line-height: 30px;
}
.dynamischeChart .topDropDowns .aufloesungenContainer .aufloesungenDropDownBtn.active.arrowDropdown.fontIconAfter:after,
.dynamischeChart .topDropDowns .grafikkartenContainer .aufloesungenDropDownBtn.active.arrowDropdown.fontIconAfter:after {
  line-height: 30px;
  transform: rotate(180deg);
}
.dynamischeChart .topDropDowns .aufloesungenContainer .aufloesungenDropDownMenu,
.dynamischeChart .topDropDowns .grafikkartenContainer .aufloesungenDropDownMenu {
  display: none;
  position: absolute;
  top: 30px;
  z-index: 101;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  width: 100%;
  border-right: 1px solid #646464;
  border-bottom: 1px solid #646464;
  border-left: 1px solid #646464;
  color: #282828;
  background: #ffffff;
  box-shadow: 1px 1px 2px 0px rgba(50, 50, 50, 0.5);
}
.dynamischeChart .topDropDowns .aufloesungenContainer .aufloesungenDropDownMenu li:hover,
.dynamischeChart .topDropDowns .grafikkartenContainer .aufloesungenDropDownMenu li:hover {
  background: #ececec;
}
.dynamischeChart .topDropDowns .aufloesungenContainer .aufloesungenDropDownMenu label:after,
.dynamischeChart .topDropDowns .grafikkartenContainer .aufloesungenDropDownMenu label:after {
  /* IE9 SVG, needs conditional override of 'filter' to 'none' */
  /* FF3.6+ */
  /* Chrome,Safari4+ */
  /* Chrome10+,Safari5.1+ */
  /* Opera 11.10+ */
  /* IE10+ */
  background: linear-gradient(left, rgba(255, 255, 255, 0), white) !important;
  /* W3C */
  -pie-background: linear-gradient(left, rgba(255, 255, 255, 0), white) !important;
  /*ie 6-9 via PIE*/
}
.dynamischeChart .topDropDowns .aufloesungenContainer .aufloesungenDropDownMenu li:hover label:after,
.dynamischeChart .topDropDowns .grafikkartenContainer .aufloesungenDropDownMenu li:hover label:after {
  /* IE9 SVG, needs conditional override of 'filter' to 'none' */
  /* FF3.6+ */
  /* Chrome,Safari4+ */
  /* Chrome10+,Safari5.1+ */
  /* Opera 11.10+ */
  /* IE10+ */
  background: linear-gradient(left, rgba(236, 236, 236, 0), #ececec) !important;
  /* W3C */
  -pie-background: linear-gradient(left, rgba(236, 236, 236, 0), #ececec) !important;
  /*ie 6-9 via PIE*/
}
.dynamischeChart .topDropDowns .aufloesungenContainer .aufloesungenDropDownMenu label,
.dynamischeChart .topDropDowns .grafikkartenContainer .aufloesungenDropDownMenu label {
  display: inline;
  position: relative;
  top: 4px;
  left: 18px;
  display: block;
  width: 90%;
  overflow: hidden;
}
.dynamischeChart .topDropDowns .aufloesungenContainer .aufloesungenDropDownMenu label:after,
.dynamischeChart .topDropDowns .grafikkartenContainer .aufloesungenDropDownMenu label:after {
  content: " ";
  display: block;
  height: 100%;
  position: absolute;
  right: 0;
  top: 0;
  width: 40px;
}
.dynamischeChart .topDropDowns .aufloesungenContainer .aufloesungenDropDownMenu li,
.dynamischeChart .topDropDowns .grafikkartenContainer .aufloesungenDropDownMenu li {
  height: 29px;
  padding: 0 10px;
  overflow: hidden;
  float: left;
  width: 100%;
  position: relative;
}
.dynamischeChart .topDropDowns .aufloesungenContainer .aufloesungenDropDownMenu input[type=checkbox],
.dynamischeChart .topDropDowns .grafikkartenContainer .aufloesungenDropDownMenu input[type=checkbox] {
  position: absolute;
  top: 4px;
}
.dynamischeChart .topDropDowns .aufloesungenContainer .aufloesungenDropDownMenu.visible,
.dynamischeChart .topDropDowns .grafikkartenContainer .aufloesungenDropDownMenu.visible {
  display: block;
}
.dynamischeChart .topDropDowns .grafikkartenContainer p {
  margin: 0;
  padding: 7px 0 0 10px;
}
.dynamischeChart .topDropDowns .grafikkartenContainer .grafikkartenDropDownBtn {
  height: 30px;
  width: 100%;
  float: left;
  cursor: default;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  border: 1px solid #646464;
  line-height: 15px;
}
.dynamischeChart .topDropDowns .grafikkartenContainer .arrowDropdown.fontIconAfter:after {
  content: "\e810";
  height: 28px;
  overflow: hidden;
  position: absolute;
  right: 0;
  text-align: center;
  top: 0;
  width: 28px;
  background: none repeat scroll 0 0 #646464;
  color: #fff;
  font-size: 16px;
  line-height: 30px;
}
.dynamischeChart .topDropDowns .grafikkartenContainer .grafikkartenDropDownBtn.active.arrowDropdown.fontIconAfter:after {
  line-height: 26px;
  transform: rotate(180deg);
}
.dynamischeChart .topDropDowns .grafikkartenContainer .grafikkartenDropDownMenu {
  display: none;
  position: absolute;
  top: 30px;
  z-index: 101;
  overflow-y: auto;
  white-space: nowrap;
  text-overflow: ellipsis;
  width: 100%;
  max-height: 340px;
  border-right: 1px solid #646464;
  border-bottom: 1px solid #646464;
  border-left: 1px solid #646464;
  color: #282828;
  background: #ffffff;
  box-shadow: 1px 1px 2px 0px rgba(50, 50, 50, 0.5);
}
.dynamischeChart .topDropDowns .grafikkartenContainer .grafikkartenDropDownMenu .checkAll {
  color: #134b7d;
}
.dynamischeChart .topDropDowns .grafikkartenContainer .grafikkartenDropDownMenu li:hover {
  background: #ececec;
}
.dynamischeChart .topDropDowns .grafikkartenContainer .grafikkartenDropDownMenu label:after {
  /* IE9 SVG, needs conditional override of 'filter' to 'none' */
  /* FF3.6+ */
  /* Chrome,Safari4+ */
  /* Chrome10+,Safari5.1+ */
  /* Opera 11.10+ */
  /* IE10+ */
  background: linear-gradient(left, rgba(255, 255, 255, 0), white) !important;
  /* W3C */
  -pie-background: linear-gradient(left, rgba(255, 255, 255, 0), white) !important;
  /*ie 6-9 via PIE*/
}
.dynamischeChart .topDropDowns .grafikkartenContainer .grafikkartenDropDownMenu li:hover label:after {
  /* IE9 SVG, needs conditional override of 'filter' to 'none' */
  /* FF3.6+ */
  /* Chrome,Safari4+ */
  /* Chrome10+,Safari5.1+ */
  /* Opera 11.10+ */
  /* IE10+ */
  background: linear-gradient(left, rgba(236, 236, 236, 0), #ececec) !important;
  /* W3C */
  -pie-background: linear-gradient(left, rgba(236, 236, 236, 0), #ececec) !important;
  /*ie 6-9 via PIE*/
}
.dynamischeChart .topDropDowns .grafikkartenContainer .grafikkartenDropDownMenu label {
  display: inline;
  position: relative;
  top: 4px;
  display: block;
  left: 18px;
  width: 99%;
  overflow: hidden;
}
.dynamischeChart .topDropDowns .grafikkartenContainer .grafikkartenDropDownMenu label:after {
  content: " ";
  display: block;
  height: 100%;
  position: absolute;
  right: 0;
  top: 0;
  width: 40px;
}
.dynamischeChart .topDropDowns .grafikkartenContainer .grafikkartenDropDownMenu li {
  height: 26px;
  padding: 0 10px;
  overflow: hidden;
  float: left;
  width: 100%;
  position: relative;
}
.dynamischeChart .topDropDowns .grafikkartenContainer .grafikkartenDropDownMenu input[type=checkbox] {
  font-size: 12px;
  position: absolute;
  top: 4px;
}
.dynamischeChart .topDropDowns .grafikkartenContainer .grafikkartenDropDownMenu.visible {
  display: block;
}
.dynamischeChart .chartLegend {
  float: right;
  margin-bottom: 10px;
  width: 70%;
}
.dynamischeChart .chartLegend .chartLegendGroup {
  display: inline-block;
  width: 100%;
}
.dynamischeChart .chartLegend .chartLegendGroup .chartLegendContainer {
  float: left;
  margin: 0 0 10px;
  width: 100%;
}
.dynamischeChart .chartLegend .chartLegendGroup .chartLegendContainer .legendBullet {
  float: left;
  height: 25px;
  margin: 0 5px 0 0;
  width: 25px;
  opacity: 0.8;
}
.dynamischeChart .chartLegend .chartLegendGroup .chartLegendContainer .legendBullet.empty {
  box-sizing: border-box;
  border: 2px solid #808080;
}
.dynamischeChart .chartLegend .chartLegendGroup .chartLegendContainer .legendLabel {
  float: left;
  cursor: pointer;
  height: 25px;
  position: relative;
  padding: 5px 10px 0;
  background: #ededed;
  color: #2672a8;
}
.dynamischeChart .chartLegend .chartLegendGroup .chartLegendContainer .legendLabel:hover {
  background: #e5e5e5;
}
.dynamischeChart .chartLegend .chartLegendGroup .chartLegendContainer .legendLabelNoSorting {
  float: left;
  cursor: default;
  height: 25px;
  position: relative;
  padding: 5px 10px 0;
  background: #ededed;
  color: #2672a8;
}
.dynamischeChart .chartLegend .chartLegendGroup .chartLegendContainer .legendLabel.arrowUp.fontIcon,
.dynamischeChart .chartLegend .chartLegendGroup .chartLegendContainer .legendLabel.arrowDown.fontIcon {
  color: #ffffff;
  background: #808080;
}
.dynamischeChart .chartLegend .chartLegendGroup .chartLegendContainer .legendLabel.arrowUp.fontIcon:before,
.dynamischeChart .chartLegend .chartLegendGroup .chartLegendContainer .legendLabel.arrowDown.fontIcon:before {
  display: none;
}
.dynamischeChart .chartLegend .chartLegendGroup .chartLegendContainer .legendLabel.arrowUp.fontIcon:after,
.dynamischeChart .chartLegend .chartLegendGroup .chartLegendContainer .legendLabel.arrowDown.fontIcon:after {
  color: #ffffff;
}
.dynamischeChart .chartLegend .chartLegendGroup .chartLegendContainer .legendLabel.arrowUp.fontIcon:after,
.dynamischeChart .chartLegend .chartLegendGroup .chartLegendContainer .legendLabel.arrowDown.fontIcon:after {
  text-align: right;
  width: 20px;
  font-size: 1.7rem;
}
.dynamischeChart .dropDownBtn {
  background: #646464;
}
.dynamischeChart .dropDownBtn:hover {
  background: #727272;
}
.dynamischeChart .sortierungContainer {
  width: 70%;
  float: right;
  margin-bottom: 27px;
  position: relative;
}
.dynamischeChart .sortierungContainer .dropDownBtn {
  cursor: pointer;
  width: 90px;
}
.dynamischeChart .sortierungContainer ul li {
  float: left;
  margin: 0 1px 1px 0;
  text-align: center;
  padding: 5px 10px;
}
.dynamischeChart .sortierungContainer ul ul li {
  background: #f5f5f5;
  color: #2672a8;
  cursor: pointer;
}
.dynamischeChart .sortierungContainer ul ul li:hover {
  background: #eaeaea;
}
.dynamischeChart .dropDownBtn.arrowDropdown.fontIconAfter:after {
  content: "\e810";
  height: 28px;
  overflow: hidden;
  position: absolute;
  right: -2px;
  text-align: center;
  top: 2px;
  width: 28px;
  transform: rotate(30deg);
  color: #fff;
  font-size: 1.6rem;
  line-height: 32px;
}
.dynamischeChart .dropDownBtn.active.arrowDropdown.fontIconAfter:after {
  transform: rotate(90deg);
  line-height: 26px;
}
.dynamischeChart .dropDownBtn p {
  padding: 0 10px 0 0;
  margin: 0;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  color: #ffffff;
}
.dynamischeChart .dropDownMenu li.active,
.dynamischeChart .dropDownMenu li.active:hover {
  background: #134b7d;
}
.dynamischeChart .dropDownMenu li.active {
  color: #ffffff;
}
.dynamischeChart .sortierungContainer ul li:hover a,
.dynamischeChart .sortierungContainer ul ul li:hover a {
  text-decoration: none;
}
.dynamischeChart .dropDownMenu {
  position: relative;
  overflow: hidden;
  top: 0;
  display: block;
}
.dynamischeChart #sortierung ul.dropDownMenu.visible {
  display: block;
}
.dynamischeChart .chartRow {
  z-index: 100;
  display: table;
  width: 100%;
  position: relative;
}
.dynamischeChart .chartRow label {
  margin-bottom: 0;
  height: auto;
  cursor: initial;
  max-height: 35px;
  overflow: hidden;
  line-height: 1.3rem;
  font-size: 1.2rem;
}
.dynamischeChart .chartRow label .reviewedProduct {
  background-color: #00659b;
  color: #ffffff !important;
  font-size: 1.2rem;
}
.dynamischeChart .chartRow .label {
  position: relative;
  display: table-cell;
  vertical-align: middle;
  text-align: right;
  padding: 0 10px 0 0;
}
.dynamischeChart .chartRow .label .reviewedProduct {
  padding: 2px 6px;
  font-weight: 700;
  line-height: 16px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.dynamischeChart .chartRow .label .productTextWrapper.titleHighlight {
  position: relative;
  margin: 0 3px 0 0;
}
.dynamischeChart .chartRow .label .productTextWrapper.titleHighlight:after {
  content: "";
  width: 2px;
  background: #999999;
  position: absolute;
  top: 2px;
  height: 89%;
  right: -6px;
}
.dynamischeChart .chartRow .labelDescription {
  padding: 2px 0 0;
  display: block;
}
.dynamischeChart .chartRow .labelDescription.reviewedProduct {
  padding: 4px 6px 4px 6px;
}
.dynamischeChart .chartRow .checkbox {
  width: 2%;
  padding-left: 0;
  display: table-cell;
  vertical-align: middle;
  position: relative;
}
.dynamischeChart .chartRow .benchmark-close {
  display: block;
  height: 20px;
  position: relative;
  width: 20px;
}
.dynamischeChart .chartRow .benchmark-close:before {
  height: 30px;
  left: 0;
  overflow: hidden;
  padding: 0;
  position: absolute;
  top: -6px;
  width: 30px;
  cursor: pointer;
  color: #005999;
  font-size: 1.4rem;
  line-height: 32px;
}
.dynamischeChart .chartRow .benchmark-close:hover:before {
  color: #0268b2;
}
.dynamischeChart .chartRow .labelDescription {
  color: #646464;
  font-size: 10px;
  line-height: 10px;
}
.dynamischeChart .chartRow .chartBars {
  position: relative;
  width: 70%;
  height: 100%;
  display: table-cell;
  vertical-align: middle;
  /*
  .naWrapper {
  	-webkit-box-shadow: 1px 1px 2px 0px rgba(50, 50, 50, 0.5);
  	-moz-box-shadow:    1px 1px 2px 0px rgba(50, 50, 50, 0.5);
  	box-shadow:         1px 1px 2px 0px rgba(50, 50, 50, 0.5);
  	opacity:0.80;
  	width:30px !important;
  	.naText {
  		padding: 1px 5px;
  	}
  }
  */
}
.dynamischeChart .chartRow .chartBars .chartBarsContainer {
  padding: 0 0 0.7rem 0;
  position: relative;
}
.dynamischeChart .chartRow .chartBars .chartBarsContainer .chartBarsGroupContainer {
  padding-top: 0.7rem;
}
.dynamischeChart .chartRow .chartBars .chartBar {
  position: relative;
  text-align: right;
  box-shadow: 1px 1px 2px 0px rgba(50, 50, 50, 0.5);
  color: #ffffff;
  opacity: 0.8;
}
.dynamischeChart .chartRow .chartBars .chartBar .chartBarText {
  padding: 1px 5px 1px 0;
  cursor: default;
  height: 17px;
  line-height: 1.6rem;
}
.dynamischeChart .chartRow .chartBars .chartBar.moved .chartBarText {
  display: inline-block;
  margin-right: -24px;
  width: 20px;
  color: #555555;
}
.dynamischeChart .chartRow .chartBars .highlight {
  box-shadow: 6px 6px 2px 0px rgba(50, 50, 50, 0.7) !important;
  z-index: 1;
  margin-left: 2px;
  top: -2px;
}
.dynamischeChart .chartRow .chartBars .barBest {
  opacity: 0.8;
}
.dynamischeChart .chartRow .chartBars .barMedium {
  opacity: 0.8;
}
.dynamischeChart .chartRow .chartBars .barNiedrig {
  opacity: 0.8;
}
.dynamischeChart .chartRow .chartBars .barMinFPS {
  opacity: 0.8;
}
.dynamischeChart .chartRow.hidden {
  display: none;
}
.dynamischeChart .chartRow.list-item.highlightRow {
  background: #ececec;
}
.dynamischeChart .chartBarGrid {
  border-right: 1px solid #dcdcdc;
}
.dynamischeChart .benchmarksContainer {
  position: relative;
  width: 100%;
  float: right;
}
.dynamischeChart .chartBarGridContainer {
  height: 100%;
  position: absolute;
  right: 0;
  width: 70%;
}
.dynamischeChart .chartBarGrid {
  position: absolute;
  top: 0;
  width: 1px;
  height: 100%;
}
.dynamischeChart .grid0 {
  left: 0%;
}
.dynamischeChart .grid1 {
  left: 12.5%;
}
.dynamischeChart .grid2 {
  left: 25%;
}
.dynamischeChart .grid3 {
  left: 37.5%;
}
.dynamischeChart .grid4 {
  left: 50%;
}
.dynamischeChart .grid5 {
  left: 62.5%;
}
.dynamischeChart .grid6 {
  left: 75%;
}
.dynamischeChart .grid7 {
  left: 87.5%;
}
.dynamischeChart .grid8 {
  left: 99.9%;
}
.dynamischeChart .chartAxes {
  height: 12px;
  margin-top: 5px;
  position: relative;
  width: 70%;
  float: right;
  margin: 0 0 27px;
}
.dynamischeChart .chartAxes .axesFPS {
  position: absolute;
}
.dynamischeChart .chartAxes .axesFPS_0 {
  left: -0.5%;
}
.dynamischeChart .chartAxes .axesFPS_1 {
  left: 11.3%;
}
.dynamischeChart .chartAxes .axesFPS_2 {
  left: 23.8%;
}
.dynamischeChart .chartAxes .axesFPS_3 {
  left: 36.3%;
}
.dynamischeChart .chartAxes .axesFPS_4 {
  left: 49%;
}
.dynamischeChart .chartAxes .axesFPS_5 {
  left: 61.3%;
}
.dynamischeChart .chartAxes .axesFPS_6 {
  left: 73.8%;
}
.dynamischeChart .chartAxes .axesFPS_7 {
  left: 86.3%;
}
.dynamischeChart .chartAxes .axesFPS_8 {
  left: 98.7%;
}
.dynamischeChart .chartFooter {
  width: 100%;
}
.dynamischeChart .chartFooter .footerRow {
  margin: 0 0 10px;
  display: table;
  width: 100%;
}
.dynamischeChart .chartFooter .footerRow .titel {
  width: 20%;
  display: table-cell;
  color: #2672a8;
  font-size: 13px;
}
.dynamischeChart .chartFooter .footerRow .beschreibung {
  width: 80%;
  display: table-cell;
  font-size: 13px;
  line-height: 17px;
}
.dynamischeChart .chartFooter .footerRow .info {
  padding: 3px 10px;
  text-align: center;
  margin: 0 0 1.5rem;
  background: #e6e6e6;
  font-size: 13px;
  line-height: 17px;
}

/* Responsive Diagram */
.diagram {
  min-height: 900px !important;
  position: relative;
  width: 100%;
  margin: 27px 0 27px;
  padding: 27px 15px 0 15px;
  font-size: 12px;
  line-height: 15px;
  background: #f5f5f5;
}
.diagram .benchmarkNavigation {
  width: 100%;
  margin: 0 0 27px 0;
  font-size: 13px;
}
.diagram .benchmarkNavigation li {
  display: block;
  float: left;
  margin: 0 1px 1px 0;
  padding: 5px 15px;
  cursor: pointer;
  background-color: #ededed;
}
.diagram .benchmarkNavigation li:hover {
  background-color: #e5e5e5;
}
.diagram .benchmarkNavigation li a:hover,
.diagram .benchmarkNavigation li a:focus {
  text-decoration: none;
}
.diagram .benchmarkNavigation li div {
  color: #282828;
}
.diagram .benchmarkNavigation li.active {
  background-color: #377eb4;
}
.diagram .benchmarkNavigation li.active:hover {
  background-color: #3c8dca;
}
.diagram .benchmarkNavigation li.active div {
  color: #ffffff;
}
.diagram .benchmarkNavigation:after {
  display: table;
  content: "";
  clear: both;
}
.diagram .produktBeschreibung {
  width: 100%;
  float: left;
}
.diagram .produktBeschreibung h1 {
  color: #134b7d;
  font-size: 2.4rem;
  font-weight: 400;
  line-height: 2.8rem;
}
.diagram .produktBeschreibung p {
  font-size: 14px;
  line-height: 18px;
}
.diagram .infoBoxContainer {
  width: 100%;
  padding: 10px 0;
  margin: 0 0 27px 0;
  border-top: 3px solid #e6e6e6;
  border-bottom: 3px solid #e6e6e6;
  font-size: 14px;
}
.diagram .infoBoxContainer img {
  margin-left: 30%;
}
.diagram .infoBoxContainer p {
  margin: 0;
}
.diagram .infoBoxContainer table {
  width: 100%;
  border-collapse: collapse;
}
.diagram .infoBoxContainer table tr {
  width: 100%;
}
.diagram .infoBoxContainer table td {
  vertical-align: top;
}
.diagram .infoBoxContainer .infoIconContainer {
  width: 10%;
  text-align: center;
}
.diagram .infoBoxContainer .title {
  width: 22%;
  padding: 0.3em 1% 0.3em 3%;
  color: #aaaaaa;
}
.diagram .infoBoxContainer .beschreibung {
  width: 70%;
  padding: 0.3em 1% 0.3em 3%;
}
.diagram .benchmarkDiagram {
  display: block;
  position: relative;
  background: rgba(0, 0, 0, 0) !important;
  z-index: 1;
  background: #f5f5f5;
}
.diagram .benchmarkDiagram canvas {
  max-width: 910px !important;
}
.diagram .chartFooter {
  width: 100%;
}
.diagram .chartFooter .footerRow {
  margin: 0 0 10px;
  display: table;
  width: 100%;
}
.diagram .chartFooter .footerRow .titel {
  width: 20%;
  display: table-cell;
  color: #2672a8;
  font-size: 13px;
}
.diagram .chartFooter .footerRow .beschreibung {
  width: 80%;
  display: table-cell;
  font-size: 13px;
  line-height: 17px;
}
.diagram .chartFooter .footerRow .info {
  padding: 3px 10px;
  text-align: center;
  margin: 0 0 1.5rem;
  background: #e6e6e6;
  font-size: 13px;
  line-height: 17px;
}

.diagram {
  min-height: 600px;
}

.diagramContent {
  background: #f5f5f5;
  position: relative;
}

/* HardwareData Charts global/local */
.article .module.chartjs {
  margin-bottom: 27px;
}
.article .module.chartjs > div {
  background-color: #F0F0F0;
  padding: 0 0 10px;
}
.article .chartHeadline {
  height: 40px;
  display: block;
  position: relative;
  margin: 0 0 15px;
  border-bottom: 1px solid #ffffff;
  background-color: #e2e2e2;
  color: #888888;
  font-size: 17px;
  line-height: 40px;
  font-weight: 900;
  padding: 0px 10px;
}
.article .chartHeadline .chText {
  width: calc(100% - 135px);
  line-height: 17px !important;
  max-height: 35px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  -webkit-box-pack: center;
  overflow: hidden;
  position: absolute;
  margin: auto 0;
  top: 0;
  bottom: 0;
  height: -moz-max-content;
  height: max-content;
}
.article .chartHeadline img {
  position: absolute;
  top: 7px;
  right: 46px;
  content: "";
  height: 26px;
  width: 66px;
}
.article .hardwareDataChartDownload,
.article .sortby {
  background: #d0d0d0;
  float: right;
  margin: 0px -10px 0 0;
  position: relative;
  height: 39px;
  width: 40px;
  cursor: pointer;
  z-index: 1;
}
.article .hardwareDataChartDownload .downloadSel,
.article .hardwareDataChartDownload .sortbySel,
.article .sortby .downloadSel,
.article .sortby .sortbySel {
  display: block;
  position: absolute;
  right: 0;
  top: 40px;
}
.article .hardwareDataChartDownload .downloadSel span,
.article .hardwareDataChartDownload .sortbySel span,
.article .sortby .downloadSel span,
.article .sortby .sortbySel span {
  padding: 8px 10px;
  font-weight: 400;
  display: block;
  cursor: pointer;
  background: #ffffff;
  font-size: 13px;
  line-height: 13px;
}
.article .hardwareDataChartDownload .downloadSel span:hover,
.article .hardwareDataChartDownload .sortbySel span:hover,
.article .sortby .downloadSel span:hover,
.article .sortby .sortbySel span:hover {
  background: #1e90ff;
  color: #ffffff;
}
.article .hardwareDataChartDownload .downloadSel.hide,
.article .sortby .downloadSel.hide {
  display: none;
}
.article .hardwareDataChartDownload:before,
.article .sortby:before {
  content: "\e832";
  display: block;
  position: absolute;
  top: 0px;
  left: 10px;
  transform: rotate(360deg);
  color: #333333;
  font-size: 22px;
}