/**************************
/
//// 	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;
}
.pb-tab-pane {
	background: linear-gradient(180deg, rgba(255,255,255,.25) 0px, rgba(255,255,255,0) 150px);
}

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

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

/**************************
/
//// 	Titel
/
**************************/
.bike #product-product-detail-tab-content .product-title,
.c-title {
	font-weight: normal;
	color: var(--stricker-blue) !important;
}
.bike #product-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 .pb-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;
}
/* Pfeil und Überschrift in einer Zeile. Ohne Flexbox ist die Überschrift ein
   inline-block, das als Ganzes umbricht: Auf schmalen Bildschirmen passte sie
   nicht mehr neben den Pfeil und rutschte komplett unter ihn. Als Flex-Zeile
   bleibt der Pfeil stehen und der Text umbricht neben ihm. */
.c-dropdown .c-dropdown-header {
	display: flex;
	align-items: baseline;
	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 {
	/* Der Pfeil behält seine Breite, auch wenn die Überschrift lang ist. */
	flex: none;
	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 .pb-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;
}

/* Platingrau entspricht RAL 7036. Matt, deshalb ohne Glanz-Animation. */
.c-color-card-platinum-grey-matte::before {
	background: #7f7679;
}

.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,
.c-color-card-platinum-grey-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
*/
/*
	Der Videokasten bringt keinen eigenen Abstand nach unten mit. In den
	Installations-Reitern folgt direkt darunter die nächste Überschrift, die
	dadurch am Video klebte. Der Abstand entspricht dem, was der Seitenbaukasten
	sonst zwischen seinen Bausteinen lässt.
*/
.c-grp .pb-video-block {
	margin-bottom: 30px;
}

.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);
	}
}
/*
	Videoeinbindung mit Einwilligung

	Der iframe bleibt leer, bis der Besucher auf den Hinweis klickt; erst dann
	setzt js.js die Adresse. So wird beim reinen Seitenaufruf nichts von Google
	geladen und es geht keine IP-Adresse dorthin.
*/

iframe.c-video-consent:not([src]) {
	display: none;
}

/*
	Der Kasten um den iframe hält über padding-bottom das Seitenverhältnis des
	Videos frei. Vor der Einwilligung steht darin aber nur der Hinweis, und
	darunter blieb eine große weiße Fläche stehen. js.js markiert den Kasten
	deshalb als "pending", bis der Besucher klickt; erst dann bekommt er den
	Platz fürs Video.

	Mit !important, weil das Seitenverhältnis bei einem Teil der Einbindungen
	im style-Attribut steht und eine gewöhnliche Regel dagegen nicht ankommt.
*/
.c-video-consent-pending {
	height: auto !important;
	padding-bottom: 0 !important;
}
.c-video-consent-notice {
	display: flex;
	align-items: center;
	gap: 16px;
	width: 100%;
	min-height: 180px;
	padding: 20px 24px;
	border: 1px solid rgba(0, 0, 0, .2);
	border-radius: 4px;
	background: #1e222b;
	color: #fff;
	text-align: left;
	cursor: pointer;
}
.c-video-consent-notice:hover,
.c-video-consent-notice:focus {
	background: #2b3140;
}
.c-video-consent-play {
	flex: 0 0 auto;
	font-size: 32px;
	line-height: 1;
}
.c-video-consent-text {
	font-size: 15px;
	line-height: 1.45;
}
.c-video-consent-text strong {
	display: block;
	margin-bottom: 4px;
	font-size: 17px;
}