/**************************
/
//// 	Gruppe
/
**************************/

.c-grp {
	margin-top: 10px;
	background: linear-gradient(180deg, rgba(255,255,255,.2) 0px, rgba(255,255,255,0) 150px);
	padding: 20px 15px 15px 15px;
}
.sppb-tab-pane {
	background: linear-gradient(180deg, rgba(255,255,255,.25) 0px, rgba(255,255,255,0) 150px);
}

.bike #j2store-product-detail-tab-content .sppb-tab-pane {
	padding: 0;
	color: #333;
}

.bike .product-title {
	padding-top: 15px;
	margin: 0 15px 0 15px;
}
.sppb-tab-pane .c-grp:first-of-type {
	margin-top: 0;
	background: unset;
	padding-top: 15px;
}
.sppb-tab-pane:first-of-type .c-grp:first-of-type {
	padding-top: 0;
}

/**************************
/
//// 	Titel
/
**************************/
.bike #j2store-product-detail-tab-content .product-title,
.c-title {
	font-weight: normal;
	color: var(--stricker-blue) !important;
}
.bike #j2store-product-detail-tab-content .product-title,
.c-title.c-title-h3,
h3.c-title {
	font-size: 28px;
	padding-bottom: 3px;
	border-bottom: 1px solid var(--stricker-blue-light);
}

.c-title.c-title-h4,
h4.c-title {
	font-size: 22px;
}

/**************************
/
//// 	Table
/
**************************/

.c-table tbody,
.c-table {
	border-collapse: collapse;
	background: transparent;

	position: relative;
}
.c-table.c-hm {
	width: 100%;
	margin: 40px 0;
}
.c-table tr:nth-child(odd),
.c-table tr:nth-child(even),
.c-table tr {
	background: none !important;
}
.c-table.c-hm td,
.c-table th {
	color: var(--stricker-blue-light);

	padding: 10px 15px;

	border-right: 1px solid #d0d0d0;
}
.c-table.c-hm tr th:last-of-type,
.c-table.c-hm tr td:last-of-type {

	border-right: 0 solid #d0d0d0;
}
.c-table th {
	width: auto;
	width: 200px;
	max-width: 30%;
	min-width: 10%;
	
	text-align: right;
	font-weight: bold;
}
.c-table.c-hm td,
.c-table.c-hm th {
	min-width: unset;
	width: auto;
	text-align: center !important;
	padding: 10px 3px;
}
.c-table th,
.c-table td {
	border-bottom: 1px solid #d0d0d0;
}
.c-table tr:last-of-type th,
.c-table tr:last-of-type td {
	border-bottom: none;
}

/**************************
/
//// 	Glossar
/
**************************/

.c-glossar {
	margin-top: 0;
}
* .c-glossar:first-of-type {
	margin-top: 0;
}
.c-glossar .c-item {
	display: grid;

	width: calc(100% - 20px);

	grid-template-columns: [column-start] auto [column-second] auto [column-third] auto [column-end];
	grid-template-rows: [row-start] auto [row-center] auto [row-end] auto [row-additional];

	justify-content: start;

	padding: 30px 10px;

	border-bottom: 1px solid var(--stricker-blue-lightest);
}
.c-glossar .c-item:nth-of-type(even) {
	justify-content: space-between;
}
.c-glossar .c-item:first-of-type {
	padding-top: 20px;
}
.c-glossar .c-item:last-of-type {
	border-bottom: none;
	padding-bottom: 0;
}
.c-glossar .c-item-header {
	grid-column: column-start / column-second;
	grid-row: row-start / row-end;

	margin-right: 30px;
	width: 240px;
}
.c-glossar .c-item-media {
	display: none;
	position: relative;

	vertical-align: middle;
}
.c-glossar .c-item-media .sppb-addon-single-image-container {
	display: block;
}
.c-glossar .c-item-media img {
	height: 180px;
	width: 100%;

	object-fit: cover;
}
.c-glossar .c-item-media.c-item-media-large img {
	height: auto;
	width: 100%;

	object-fit: cover;
}
.c-glossar .c-item-media p {
	position: absolute;
	bottom: 0;
	height: 24px;
	font-size: 14px;
	background: rgba(255,255,255,.8);
	margin: 0;
	padding: 2px 0;
	text-align: center;
	width: 100%;
	opacity: .75;
}
.c-glossar .c-item:hover .c-item-media p {
	opacity: 1;
}
.c-glossar .c-item-media:first-of-type {
	display: block;
}
.c-glossar .c-item-title {
	grid-column: column-third / column-end;
	grid-row: row-start / row-center;

	align-self: flex-end;

	font-size: 22px;
	position: relative;
	margin-bottom: 2px;
}
.c-glossar .c-item-content {
	grid-column: column-third / column-end;
	grid-row: row-center / row-end;

	align-self: flex-start;

	text-align: justify;

	width: 100%;
}
.c-glossar .c-item-content p {
	padding: 0;
	margin: 0;
}
.c-glossar .c-item-content .c-item-content-more {
	display: none;
}
.c-glossar .c-item:nth-of-type(even) .c-item-header {
	grid-column: column-third / column-end;

	margin-right: 0;
	margin-left: 30px;
}
.c-glossar .c-item:nth-of-type(even) .c-item-title {
	grid-column: column-start / column-second;
}
.c-glossar .c-item:nth-of-type(even) .c-item-content {
	grid-column: column-start / column-second;
}


/**************************
/
//// 	Dropdown
/
**************************/

.c-dropdown {
	border-radius: 4px;
	overflow: hidden;
	margin: 10px 0;
}
.c-dropdown .c-dropdown-header {
	padding: 5px 10px;
	background: var(--stricker-blue-lighter);
	position: relative;
	user-select: none;
}
.c-dropdown .c-dropdown-header:hover {
	cursor: pointer;
}
.c-dropdown .c-dropdown-header .c-title {
	border-bottom: none;
	display: inline-block;
	margin: 0;
	padding: 0;
}
.c-dropdown .c-dropdown-header,
.c-dropdown .c-dropdown-header .c-title {
	color: #fff !important;
	font-size: 20px;
}
.c-dropdown .c-dropdown-content {
	border: 1px solid #ccc;
	border-top: none;
}
.c-dropdown .c-dropdown-content {
	border: 1px solid #ccc;
	border-top: none;
}
.c-dropdown .c-item {
	padding: 15px 15px;
	border-bottom: 1px solid var(--stricker-blue-lightest);
}
.c-dropdown .c-item:nth-of-type(even) {
	background: #ddd;
}
.c-dropdown .c-item:hover {
	background: #cfcfcf;
	cursor: default;
}
.c-dropdown .c-item-header {
	display: none;
}
.c-dropdown .c-item-title .c-title,
.c-dropdown .c-item-title {
	color: #000;
	margin-bottom: 5px;
	font-size: 18px;
}
.c-dropdown .c-item-content {
	color: #333;
	font-size: 16px;
}
.c-dropdown .c-item-content p {	
	padding: 0;
	margin: 0;
}
.c-dropdown .c-item-content .c-item-content-more {
	display: none;
}

.c-dropdown.not-active .c-dropdown-content {
	display: none;
}
.c-dropdown .c-dropdown-icon-container {
	margin-right: 5px;
}
.c-dropdown .c-dropdown-icon {
	transition: all .3s;
}
.c-dropdown.not-active .c-dropdown-icon {
	transform: rotate(-90deg);
	margin-top: 3px;
}

/**************************
/
//// 	Gallery
/
**************************/
.c-gallery {
	width: 100%;
	position: relative;
	box-sizing: border-box;
}
.c-gallery-items {
	box-sizing: border-box;
	width: 100%;
	position: relative;
	display: grid;
	grid-template-columns: repeat(4, auto);
	padding: 10px 0;
	justify-content: space-between;
}
.c-gallery-items .sppb-addon-single-image-container {
	overflow: hidden;
	max-height: 185px;
	display: flex;
	justify-content: center;
	margin: 10px;
	position: relative;
}
.c-gallery-items img {
	min-width: 100%;
	min-height: 100%;
	object-fit: cover;
}

/*
		Highlight images
*/

.c-gallery-items .c-gallery-image-main,
.c-gallery-items .c-gallery-image-inuse,
.c-gallery-items .c-gallery-image-special {
	grid-column-start: unset;
	border: 2px solid transparent;
}
.c-gallery-items .c-gallery-image-special:after {
	display: block;
	position: absolute;
	width: 15px;
	height: 15px;
	content: " ";
	right: 0;
	top: 0;

	border: 10px solid rgba(242, 211, 34, 1);
	border-bottom: 10px solid transparent;
	border-left: 10px solid transparent;
}
.c-gallery-items .c-gallery-image-main {
	border-color: rgba(160, 207, 45, .6);
	border: none;
}
.c-gallery-items .c-gallery-image-inuse {
	border-color: rgba(245, 206, 66, .6);
	border: none;
}
.c-gallery-items .c-gallery-image-special {
	border-color: rgba(242, 211, 34, 1);
}
.c-gallery-items .c-gallery-image-main ~ .c-gallery-image-main,
.c-gallery-items .c-gallery-image-inuse ~ .c-gallery-image-inuse,
.c-gallery-items .c-gallery-image-special ~ .c-gallery-image-special {
	grid-column-start: unset;
	margin: 10px;
}

/**************************
/
//// 	Color Card
/
**************************/
.c-color-card {
	display: inline-block;
	width: 17px;
	height: 20px;
	position: relative;
	margin-right: 8px;
	margin-left: 0px;
}
.c-color-card::before {
	content: " ";
	width: 17px;
	height: 17px;
	display: block;
	position: absolute;
	left: 0;
	top: 5px;
	border-radius: 50%;
	color: black;
	background: #fff;
}
.c-color-card::after {
	content: " ? ";
	position: absolute;
	display: block;
	width: 17px;
	height: 17px;
	left: 5px;
	top: 5px;
	font-size: 15px;
}

.c-color-card-orage::before {
	background: #e25303;
}
.c-color-card-red::before {
	background: #8d1d2c;
}
.c-color-card-blue::before {
	background: #025669;
}
.c-color-card-metallic-silver::before {
	background: #ccc;
	animation: metallic_silver 1.275s ease infinite alternate;
}
.c-color-card-ral::before {
	background: linear-gradient(to right, red, orange, yellow, green, blue);
	animation: rainbow 12s ease infinite alternate;
}
.c-color-card-black::before {
	background: #222;
	animation: black .9s linear infinite alternate;
}

.c-color-card-black-matte::before {
	background: #000;
}

.c-color-card-metallic-silver::after,
.c-color-card-red::after,
.c-color-card-blue::after,
.c-color-card-orange::after,
.c-color-card-black::after,
.c-color-card-black-matte::after {
	color: transparent;
}

@keyframes color-card-metallic_silver {
	0% {
		background-color: #ccc;
	}
	85% {
		background-color: #ccc;
	}
	100% {
		background-color: #cfcfcf;
	}
}
@keyframes color-card-black {
	60% {
		background-color: #222;
	}
	100% {
		background-color: #aaa;
	}
}
@keyframes color-card-rainbow { 
	0% {
		background: #ff2400;
	}
	10% {
		background: #e81d1d;
	}
	20% {
		background: #e8b71d;
	}
	30% {
		background: #e3e81d;
	}
	40% {
		background: #1de840;
	}
	50% {
		background: #1ddde8;
	}
	60% {
		background: #2b1de8;
	}
	70% {
		background: #dd00f3;
	}
	80% {
		background: #dd00f3;
	}
	90% {
		background: #FF51CE;
	}
	100% {
		background: #FF2472;
	}
}

/**************************
/
//// 	Hint
/
**************************/

.c-hint {
	display: inline-block;
	position: relative;
	color: var(--stricker-blue-light);
}
.c-hint-preview {
	display: inline-block;
	margin: 0 5px;
}
.c-hint-content {
	width: 250px;
	position: absolute;
	padding: 8px 14px;

	border-radius: 3px;

	background: #fff;
	box-shadow: 0 0 3px rgba(0,0,0,.2);

	font-size: 12px;

	right: -125px;
	z-index: 888;

	text-align: justify;

	display: none;
}
.c-hint-content p {
	padding: 0;
	margin: 0;
}
.c-hint:hover {
	cursor: pointer;
}
.c-hint.active .c-hint-content,
.c-hint:hover .c-hint-content {
	display: block;
}

/*
	Sonstiges
*/
.c-grp a {
	color: var(--stricker-blue-light);
}
.c-grp a:hover {
	color: var(--stricker-blue);
}

.a-tool-dev {
	width:100%; 
	display:block; 

	position: fixed;
	top:  0;

	z-index: 9999;
}
.a-tool-dev h3 {
	position: absolute;
	left: 10px;
	top: 10px;
	background: #ccc;
	padding: 5px;
}
.a-tool-dev p {
	position: absolute;
	left: 10px;
	top: 60px;
	background: #ccc;
	padding: 5px;
	display: none;
}
.a-tool-dev:hover p {
	display: block;
}
.a-tool-dev ul{
	position: absolute;
	left: 10px;
	top: 92px;

	background: #ccc;
	display: none;
}
.a-tool-dev:hover ul{
	display: block;
}
.a-tool-dev ul li{
	font-weight: bold;
	padding: 5px;
}
.a-tool-dev .a-set-lang {
	font-weight: bold;
}
.a-tool-dev .a-set-lang:hover {
	cursor: pointer;
}

.c-alert-noscript {
	background: #bd362f;
	padding: 10px 15px;
	color: #fff;
	border-radius: 4px;
}

.c-btn {
	border: 1px solid #000;	
	border-radius: 3px;
	position: relativ;
	padding: 5px 10px;
	box-sizing: border-box;
	margin: 3px 0;
	display: inline-block;
	transition: all .2s;
}
.c-btn:hover {
	opacity: .85;
	box-shadow: 0 0 4px rgba(0,0,0,.45);
}
.c-btn,
a.c-btn,
a .c-btn,
.c-btn a {
	color: #000;
}
.c-btn-full {
	width:100%;
	text-align:center;
}
.c-btn * {
	box-sizing: border-box;
}
.c-btn.c-btn-primary {
	border-color: #3C5C8D;
	color: #fff !important;
	background: #3C5C8D;
	padding: 10px 15px;
	font-size:18px;
}
.c-btn-primary,
a.c-btn-primary,
a .c-btn-primary,
.c-btn-primary a {
	color: #fff !important;
}
.c-btn.c-btn-secondary {
	border-color: #3C5C8D;
	color: #3C5C8D !important;
}
.c-btn-secondary,
a.c-btn-secondary,
a .c-btn-secondary,
.c-btn-secondary a {
	color: #3C5C8D !important;
}
.c-btn-icon {
	margin-left:10px;
	opacity:.5;
	top:1px;
	display: inline-block;
	position:relative;
}



/* Responsive */
@media only screen and (max-width: 991px) {
	.c-glossar .c-item {
		display: block;
	}
	.c-glossar,
	.c-glossar .c-item,
	.c-glossar .c-item .c-item-header,
	.c-glossar .c-item .c-item-title,
	.c-glossar .c-item .c-item-content {
		grid-column: unset;
		grid-row: unset;

		width: 100%;
	}
	.c-glossar .c-item .c-item-header{
		grid-column: unset;
		grid-row: unset;

		width: 100%;
		margin-left: 0 !important;
		margin-bottom: 25px;
	}
	.c-glossar .c-item-media img {
		height: auto;

		width: 100%;
	}
	.c-gallery-items {
		grid-template-columns: repeat(2, auto);
	}
}