/*-----------------------------------*\
  PROJEKT: pkwliste.com
  DESIGN: pkwliste.com | Matthias Janssen
  DATUM: 12.2020
\*-----------------------------------*/

/*-----------------------------------*\
  IMPORT
\*-----------------------------------*/

@import "bootstrap.min.css";
@import "font-awesome.min.css";
@import "checkboxes.css";
@import "pkwliste.css";
@import "https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,500,500i,700,700i,900,900i&display=swap";

/*-----------------------------------*\
  RESET
\*-----------------------------------*/

@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (device-aspect-ratio: 2 / 3) and (-webkit-device-pixel-ratio: 2) {
	html,
	body {
		width: 100vw
	}
}

@media only screen and (min-device-width: 320px) and (max-device-width: 568px) and (device-aspect-ratio: 40 / 71) and (-webkit-device-pixel-ratio: 2) {
	html,
	body {
		width: 100vw
	}
}

@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-device-pixel-ratio: 2) {
	html,
	body {
		width: 100vw
	}
}

@media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-device-pixel-ratio: 3) {
	html,
	body {
		width: 100vw
	}
}

body {
	font-family: 'Roboto';
	font-size: 16px;
	font-weight: 400;
	color: #515151;
	cursor: inherit;
	overflow-x: hidden;
    overflow-y: visible;
	background: #fafafa;
}

label {
	font-weight: normal
}

th {
	font-weight: 600
}


h1,
h2,
h3,
.h1,
.h2,
.h3 {
	font-weight: unset
}

h1,
.h1 {
	font-size: 36px;
	line-height: 1.3
}

h2,
.h2 {
	font-size: 30px;
	line-height: 1.3
}

h3,
.h3 {
	font-size: 24px;
	line-height: 1.3
}

li,
td,
th,
p,
span {
	font-size: 14px;
	line-height: 1.4
}

li.small-text,
td.small-text,
th.small-text,
p.small-text,
span.small-text {
	font-size: 12px
}

li.big-text,
td.big-text,
th.big-text,
p.big-text,
span.big-text {
	font-size: 16px
}

li.list,
td.list,
th.list,
p.list,
span.list {
	line-height: 1.5
}

small {
	font-size: 12px
}

a {
	color: #d9534f;
	text-decoration: underline
}

a:hover {
	color: #c9302c
}

b,
strong {
	font-weight: 600
}

.hidden {
	display: none
}

/*-----------------------------------*\
  MAIN - CONTENT
\*-----------------------------------*/

.main-content {
	position: relative
}

/*-----------------------------------*\
  HEADER
\*-----------------------------------*/

.main-header {
	border-bottom: 1px solid #c4c4c4
}

.header-container {
	display: grid;
	margin: 10px 0;
	grid-template-columns: auto 1fr 1fr;
	display: -ms-grid;
	-ms-grid-columns: auto 1fr auto
}

@media (min-width: 992px) {
	.header-container {
		grid-template-columns: auto 1fr auto
	}
}

@media (min-width: 992px) and (max-width: 1199px) {
	.header-container {
		margin: 14px 0 10px
	}
}

.header-container .header-logo {
	display: flex;
	align-items: center;
	padding: 0;
	-ms-grid-column: 1;
	max-width: 230px;
	height: auto;
}

.header-container .link-list {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	margin-right: 20px;
	-ms-grid-column: 2
}

@media (min-width: 992px) and (max-width: 1199px) {
	.header-container .link-list {
		margin: 0 10px
	}
}

.header-container .link-list .links {
	display: flex;
	align-items: center;
	justify-content: flex-end
}

.header-container .link-list .links .link {
	color: #333333;
	text-decoration: none;
	font-size: 18px;
	position: relative
}

.header-container .link-list .links .link:last-child {
	margin: 0px 25px 0 10px;
}

.header-container .link-list .links .link:after {
	content: " ";
	display: inline-block;
	width: 1px;
	height: 12px;
	background-color: #919191;
	margin: 0px 10px;
	color: transparent;
	vertical-align: middle
}
.header-container .link-list .links .link:last-child:after {
	content: none;
}

@media (min-width: 992px) and (max-width: 1199px) {
	.header-container .link-list .links .link:after {
		margin: 0 8px
	}
}

/*-----------------------------------*\
  BUTTON
\*-----------------------------------*/

.btn {
	border-radius: 0;
	font-size: 14px;
	line-height: 1.4;
	color: #ffffff;
	padding: 7px 11px;
	margin: 0;
	border: 1px solid;
	text-decoration: none;
	opacity: 1;
	transition: background-color .1s ease-out, border-color .1s ease-out
}

.btn:focus {
	color: #ffffff
}

.btn-primary,
.btn-success {
	background-color: #008436;
	border-color: #008436
}

.btn-primary:hover,
.btn-success:hover {
	background-color: #2fae62;
	border-color: #2fae62;
	color: #ffffff
}

.btn-primary.active,
.btn-primary.focus,
.btn-success.active,
.btn-success.focus {
	background-color: #004d1f;
	border-color: #004d1f
}

.btn-primary.active:hover,
.btn-primary.focus:hover,
.btn-success.active:hover,
.btn-success.focus:hover {
	background-color: #004d1f;
	border-color: #004d1f
}

.btn-primary:active,
.btn-primary:focus,
.btn-success:active,
.btn-success:focus {
	background-color: #004d1f;
	border-color: #004d1f
}

.btn-primary:active:hover,
.btn-primary:focus:hover,
.btn-success:active:hover,
.btn-success:focus:hover {
	background-color: #004d1f;
	border-color: #004d1f
}

.btn-primary.disabled,
.btn-primary:disabled,
.btn-success.disabled,
.btn-success:disabled {
	opacity: 0.4
}

.btn-primary[disabled]:hover,
.btn-primary[disabled]:active,
.btn-success[disabled]:hover,
.btn-success[disabled]:active {
	background-color: #008436;
	border-color: #008436
}

.btn-secondary {
	background-color: #333333;
	border-color: #333333
}

.btn-secondary:hover {
	background-color: #515151;
	border-color: #515151;
	color: #ffffff
}

.btn-secondary.active,
.btn-secondary.focus {
	background-color: #1a1a1a;
	border-color: #1a1a1a
}

.btn-secondary.disabled,
.btn-secondary:disabled {
	opacity: 0.4
}

.btn-secondary:active,
.btn-secondary:focus {
	background-color: #1a1a1a;
	border-color: #1a1a1a
}

.btn-secondary[disabled]:hover,
.btn-secondary[disabled]:active {
	background-color: #333333;
	border-color: #333333
}

.btn-back {
	background-color: transparent;
	border: solid 1px #333333;
	color: #333333
}

.btn-back:hover {
	color: #919191;
	border: solid 1px #919191
}

.btn-back.active,
.btn-back.focus {
	color: #1a1a1a;
	border: solid 1px #1a1a1a;
	box-shadow: none
}

.btn-back:active,
.btn-back:focus {
	color: #1a1a1a;
	border: solid 1px #1a1a1a;
	box-shadow: none
}

.btn-back.disabled,
.btn-back:disabled {
	opacity: 0.4
}

.btn-back[disabled]:hover,
.btn-back[disabled]:active {
	border: solid 1px #333333;
	color: #333333
}


/*-----------------------------------*\
  FORMS % INPUTS
\*-----------------------------------*/

input[type='text'],
input[type='email'],
input[type='password'],
textarea.form-control {
	background-color: #ffffff;
	border: 1px solid #c4c4c4;
	font-size: 14px;
	height: 35px;
	color: #333333
}

input[type='text']:focus,
input[type='email']:focus,
input[type='password']:focus,
textarea.form-control:focus {
	border: 1px solid #008436;
	border: 1px solid #d9534f;
}

input[type='text']::placeholder,
input[type='email']::placeholder,
input[type='password']::placeholder,
textarea.form-control::placeholder {
	color: #c4c4c4
}

textarea.form-control {
	height: auto
}

input[type="submit"] {
	cursor: pointer
}

/*-----------------------------------*\
  ANGEBOTSLISTE
\*-----------------------------------*/

.angebotsliste {
	width: 100%;
	-webkit-tap-highlight-color: transparent;
	position: relative;
	z-index: 1
}

.angebotsliste .aliste-main {
	position: relative;
	-ms-touch-action: pan-Y;
	-moz-backface-visibility: hidden
}

.angebotsliste .aliste-main:after {
	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0
}

.angebotsliste .aliste-outer {
	position: relative;
	overflow: hidden;
	-webkit-transform: translate3d(0px, 0px, 0px)
}

.angebotsliste .aliste-item {
	position: relative;
	min-height: 1px;
	float: left;
	width: 100%;
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	-ms-backface-visibility: hidden;
	-webkit-tap-highlight-color: transparent;
	-webkit-touch-callout: none;
	-webkit-transform: translate3d(0, 0, 0);
	-moz-transform: translate3d(0, 0, 0);
	-ms-transform: translate3d(0, 0, 0)
}

.angebotsliste .aliste-item img {
	display: block;
	width: 100%
}

/*-----------------------------------*\
  MAIN - CONTAINER
\*-----------------------------------*/

.main-container {
	display: grid;
	display: -ms-grid;
	grid-template-columns: repeat(12, 1fr);
	-ms-grid-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
	grid-column-gap: 15px;
	grid-template-rows: auto auto auto;
	-ms-grid-rows: auto auto auto;
	position: relative
}

@media only screen and (min-width: 414px) {
	.main-container {
		grid-column-gap: 30px
	}
}

/*-----------------------------------*\
  GRID - ITEM
\*-----------------------------------*/

.main-container .grid-item {
	position: relative;
	order: 0
}

@media (max-width: 767px) {
	.main-container .grid-item {
		grid-column: 1 / span 12;
		-ms-grid-column: 1;
		-ms-grid-column-span: 12
	}
}

/*-----------------------------------*\
  MAIN - BANNER - IMAGE - CONTAINER
\*-----------------------------------*/

.main-container .main-banner-image-container {
	grid-column-start: 1;
	grid-column-end: span 12;
	-ms-grid-column: 1;
	-ms-grid-column-span: 12;
	-ms-grid-row: 1;
	margin-bottom: -65px;
	min-height: 150px;
	z-index: 0
}

@media only screen and (min-width: 321px) {
	.main-container .main-banner-image-container {
		margin-bottom: -85px;
		min-height: 250px
	}
}

@media only screen and (min-width: 415px) {
	.main-container .main-banner-image-container {
		margin-bottom: -138px;
		min-height: 230px
	}
}

@media only screen and (min-width: 569px) {
	.main-container .main-banner-image-container {
		margin-bottom: -170px;
		min-height: 300px
	}
}

@media only screen and (min-width: 737px) {
	.main-container .main-banner-image-container {
		margin-bottom: -212px;
		min-height: 550px
	}
}

@media only screen and (min-width: 1201px) {
	.main-container .main-banner-image-container {
		margin-bottom: -295px;
		min-height: 800px
	}
}

.main-container .main-banner-image-content {
	position: relative;
	width: 100vw;
	left: 50%;
	margin-left: -50vw;
	overflow: hidden;
}

.main-container .main-banner-image-content::after {
	display: block;
	content: " ";
	clip-path: polygon(0 0%, 0% 100%, 100% 100%);
	-webkit-clip-path: polygon(0 0%, 0% 100%, 100% 100%);
	background-color: #fafafa;
	height: 20px;
	margin-top: -63px;
	position: absolute;
	width: 100vw
}

@media only screen and (min-width: 321px) {
	.main-container .main-banner-image-content::after {
		height: 40px;
		margin-top: -84px;
		clip-path: polygon(0 0, 100% 50%, 100% 100%, 0% 100%);
		-webkit-clip-path: polygon(0 0, 100% 50%, 100% 100%, 0% 100%)
	}
}

@media only screen and (min-width: 415px) {
	.main-container .main-banner-image-content::after {
		height: 40px;
		margin-top: -117px;
		clip-path: polygon(0 0%, 0% 100%, 100% 100%);
		-webkit-clip-path: polygon(0 0%, 0% 100%, 100% 100%)
	}
}

@media only screen and (min-width: 569px) {
	.main-container .main-banner-image-content::after {
		height: 86px;
		margin-top: -172px;
		clip-path: polygon(0 0, 100% 50%, 100% 100%, 0% 100%);
		-webkit-clip-path: polygon(0 0, 100% 50%, 100% 100%, 0% 100%)
	}
}

@media only screen and (min-width: 737px) {
	.main-container .main-banner-image-content::after {
		position: relative;
		height: 100px;
		margin-top: -211px;
		clip-path: polygon(0 0, 100% 40%, 100% 100%, 0% 100%);
		-webkit-clip-path: polygon(0 0, 100% 40%, 100% 100%, 0% 100%)
	}
}

@media only screen and (min-width: 1201px) {
	.main-container .main-banner-image-content::after {
		height: 185px;
		margin-top: -360px;
		clip-path: polygon(0 0, 100% 70px, 100% 100%, 0% 100%);
		-webkit-clip-path: polygon(0 0, 100% 70px, 100% 100%, 0% 100%)
	}
}

.main-container .main-banner-image-content .background {
	background: url("../img/hintergrund/bg-klein.jpg");
	transform: translate(-280px, -45px);
	width: 200%;
	height: 295px;
	position: relative;
}

@media only screen and (min-width: 321px) {
	.main-container .main-banner-image-content .background {
		background: url("../img/hintergrund/bg-klein.jpg");
		transform: translate(-230px, -45px);
		height: 295px;
	}
}

@media only screen and (min-width: 415px) {
	.main-container .main-banner-image-content .background {
		background: url("../img/hintergrund/bg-klein.jpg");
		transform: translate(0, -78px);
		height: 245px
	}
}

@media only screen and (min-width: 569px) {
	.main-container .main-banner-image-content .background {
		background: url("../img/hintergrund/bg-klein.jpg");
		transform: translate(0, -88px);
		height: 314px
	}
}

@media only screen and (min-width: 737px) {
	.main-container .main-banner-image-content .background {
		background: url("../img/hintergrund/bg-mittel.jpg");
		transform: translate(0, -112px);
		height: 552px;
		position: relative;
		left: 50%;
		margin-left: -680px
	}
}

@media only screen and (min-width: 1201px) {
	.main-container .main-banner-image-content .background {
		background: url("../img/hintergrund/bg-gross.jpg");
		transform: translate(0, -180px);
		height: 822px;
		margin-left: -960px;
	}
}

/*-----------------------------------*\
  MAIN - ANGEBOT - CONTAINER
\*-----------------------------------*/

.main-container .main-angebot-container {
	overflow: hidden;
	grid-column-start: span 8;
	grid-column-end: 13;
	-ms-grid-column: 5;
	-ms-grid-column-span: 8;
	-ms-grid-row: 2
}

@media (min-width: 992px) and (max-width: 1199px) {
	.main-container .main-angebot-container {
		grid-column-start: 6;
		grid-column-end: span 7;
		-ms-grid-column: 6;
		-ms-grid-column-span: 7
	}
}

@media (min-width: 768px) and (max-width: 991px) {
	.main-container .main-angebot-container {
		grid-column-start: 7;
		grid-column-end: span 6;
		-ms-grid-column: 7;
		-ms-grid-column-span: 6
	}
}

@media (max-width: 767px) {
	.main-container .main-angebot-container {
		grid-column: 1 / span 12;
		-ms-grid-column: 1;
		-ms-grid-column-span: 12
	}
}

/*-----------------------------------*\
  MAIN - PKWLISTE - CONTAINER
\*-----------------------------------*/

.main-container .main-pkwliste-container {
	grid-column-start: 1;
	grid-column-end: 5;
	-ms-grid-column: 1;
	-ms-grid-column-span: 4;
	-ms-grid-row: 2
}

@media (min-width: 992px) and (max-width: 1199px) {
	.main-container .main-pkwliste-container {
		grid-column-start: 1;
		grid-column-end: 6;
		-ms-grid-column: 1;
		-ms-grid-column-span: 5
	}
}

@media (min-width: 768px) and (max-width: 991px) {
	.main-container .main-pkwliste-container {
		grid-column-start: 1;
		grid-column-end: 7;
		-ms-grid-column: 1;
		-ms-grid-column-span: 6
	}
}

@media (max-width: 767px) {
	.main-container .main-pkwliste-container {
		grid-column: 1 / span 12;
		-ms-grid-column: 1;
		-ms-grid-column-span: 12
	}
	.main-container .main-pkwliste-container {
		position: relative;
		order: 1;
		width: 100%
	}
}

.main-container .main-pkwliste-container .pkwliste {
	position: absolute;
	bottom: 0;
	width: 100%
}

@media (max-width: 767px) {
	.main-container .main-pkwliste-container .pkwliste {
		position: inherit;
		margin-top: 15px
	}
}

/*-----------------------------------*\
  HR
\*-----------------------------------*/

.banner-horizontal-line {
	margin: 50px 0 10px
}

/*-----------------------------------*\
  ANGEBOTSLISTE > STATIC - LISTE
\*-----------------------------------*/

.static-liste {
	touch-action: manipulation
}

@media screen and (-ms-high-contrast: active),
screen and (-ms-high-contrast: none) {
	.static-liste {
		background-color: #ffffff
	}
}

@supports (-ms-ime-align: auto) {
	.static-liste {
		background-color: #ffffff
	}
}

.static-liste .grid-container {
	display: grid;
	display: -ms-grid;
	grid-template-columns: repeat(12, 1fr);
	-ms-grid-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
	grid-column-gap: 15px;
	grid-template-rows: auto;
	-ms-grid-rows: auto;
	text-decoration: none;
	color: #515151;
	padding-top: 20px;
	margin: 0 2px
}

@media only screen and (min-width: 321px) {
	.static-liste .grid-container {
		padding-top: 40px
	}
}

@media only screen and (min-width: 586px) {
	.static-liste .grid-container {
		padding-top: 20px
	}
}

@media only screen and (min-width: 768px) {
	.static-liste .grid-container {
		padding-top: 60px
	}
}

@media only screen and (min-width: 1200px) {
	.static-liste .grid-container {
		padding-top: 70px;
		grid-column-gap: 30px
	}
}

.static-liste .grid-container .item-text {
	grid-column: 1 / span 6;
	-ms-grid-column: 1;
	-ms-grid-column-span: 6
}

@media only screen and (min-width: 568px) {
	.static-liste .grid-container .item-text {
		grid-column: 1 / span 6;
		-ms-grid-column: 1;
		-ms-grid-column-span: 6
	}
}

@media only screen and (min-width: 768px) {
	.static-liste .grid-container .item-text {
		grid-column: 1 / span 6;
		grid-row: 1 /span 1;
		-ms-grid-column: 1;
		-ms-grid-column-span: 6;
		-ms-grid-row: 1
	}
}

@media only screen and (min-width: 1200px) {
	.static-liste .grid-container .item-text {
		grid-column: 1 / span 6;
		grid-row: 1 / span 1;
		-ms-grid-column: 1;
		-ms-grid-column-span: 3;
		-ms-grid-row: 1
	}
}

.static-liste .grid-container .item-text p.eins {
	margin-bottom: 5px;
	font-size: 24px;
	font-weight: 600;
	line-height: 1.2;
}

.static-liste .grid-container .item-text p.zwei {
	margin-bottom: 15px;
	font-size: 18px;
	font-weight: 600;
	line-height: 1.1;
}

.static-liste .grid-container .item-text p.drei {
	margin-bottom: 8px;
	font-size: 14px;
	font-weight: 300;
	line-height: 1.1;
}

.static-liste .grid-container .item-text p.vier {
	margin-bottom: 30px;
	font-size: 14px;
	font-weight: 300;
	line-height: 1.1;
}

.static-liste .grid-container .item-preis {
	grid-column: 1 / span 6;
	-ms-grid-column: 1;
	-ms-grid-column-span: 6
}

@media only screen and (min-width: 568px) {
	.static-liste .grid-container .item-preis {
		grid-column: 1 / span 6;
		-ms-grid-column: 1;
		-ms-grid-column-span: 6
	}
}

@media only screen and (min-width: 768px) {
	.static-liste .grid-container .item-preis {
		grid-column: 1 / span 6;
		grid-row: 2 /span 1;
		-ms-grid-column: 1;
		-ms-grid-column-span: 6;
		-ms-grid-row: 2
	}
}

@media only screen and (min-width: 1200px) {
	.static-liste .grid-container .item-preis {
		grid-column: 1 / span 6;
		grid-row: 2 /span 2;
		-ms-grid-column: 1;
		-ms-grid-column-span: 3;
		-ms-grid-row: 2
	}
}

.static-liste .grid-container .item-info {
	grid-column: 1 / span 12;
	-ms-grid-column: 1;
	-ms-grid-column-span: 12;
	grid-row: 4 /span 1;
	-ms-grid-row: 4
}

@media only screen and (min-width: 360px) {
	.static-liste .grid-container .item-info {
		grid-column: 1 / span 12;
		grid-row: 3 /span 1;
		-ms-grid-column: 1;
		-ms-grid-column-span: 12;
		-ms-grid-row: 3;
	}
	.static-liste .grid-container .item-info:after {
		content:"";
		background: linear-gradient(90deg, rgba(238,238,238,1) 0%, rgba(238,238,238,1) 5%, rgba(238,221,221,1) 17%, rgba(217,83,79,1) 35%, rgba(217,83,79,1) 100%);
		display: block;
		height:5px;
		width: 100%;
		position: absolute;
		bottom: 0;
	}
}

@media only screen and (min-width: 568px) {
	.static-liste .grid-container .item-info {
		grid-column: 1 / span 12;
		grid-row: 3 / span 1;
		-ms-grid-column: 1;
		-ms-grid-column-span: 12;
		-ms-grid-row: 3;
	}
	.static-liste .grid-container .item-info:after {
		content:"";
		background: linear-gradient(90deg, rgba(238,238,238,1) 0%, rgba(238,238,238,1) 5%, rgba(238,221,221,1) 17%, rgba(217,83,79,1) 35%, rgba(217,83,79,1) 100%);
		display: block;
		height:5px;
		width: 100%;
		position: absolute;
		bottom: 0;
	}
}

@media only screen and (min-width: 768px) {
	.static-liste .grid-container .item-info {
		grid-column: 1 / span 12;
		grid-row: 4 / span 1;
		-ms-grid-column: 1;
		-ms-grid-column-span: 12;
		-ms-grid-row: 4;
	}	
	.static-liste .grid-container .item-info:after {
		content:"";
		background: linear-gradient(90deg, rgba(238,238,238,1) 0%, rgba(238,238,238,1) 5%, rgba(238,221,221,1) 17%, rgba(217,83,79,1) 35%, rgba(217,83,79,1) 100%);
		display: block;
		height:5px;
		width: 100%;
		position: absolute;
		bottom: 0;
	}	
}

.static-liste .grid-container .item-info .mehr-infos {
	text-align: right;
	position: relative;
	bottom: 0;
	right: 0;
	background: #d9534f
}

@media only screen and (min-width: 360px) {
	.static-liste .grid-container .item-info .mehr-infos {
		position: absolute
	}
}

.static-liste .grid-container .item-info .mehr-infos .text {
	display: inline-block;
	font-size: 14px;
	font-weight: 300;
	padding: 7px 25px 7px 2px;
	background: #d9534f;
	color: #ffffff;
	position: relative
}

.static-liste .grid-container .item-info .mehr-infos .text:after {
	border: solid transparent;
	border-color: rgba(255, 255, 255, 0);
	border-bottom-color: #d9534f;
	border-right-color: #d9534f;
	border-width: 17.5px;
	content: ' ';
	height: 0;
	margin-top: -17px;
	pointer-events: none;
	position: absolute;
	right: 100%;
	top: 50%;
	width: 0
}

.static-liste .grid-container .item-info .mehr-infos .pfeil {
	position: relative;
	right: 10px;
	color: #ffffff
}

.static-liste .grid-container .item-bilder {
	position: absolute;
	top: 0;
	right: 2px
}

@media only screen and (min-width: 568px) {
	.static-liste .grid-container .item-bilder {
		right: 2px
	}
}

@media only screen and (min-width: 768px) {
	.static-liste .grid-container .item-bilder {
		right: 2px;
		top: 60px
	}
}

@media only screen and (min-width: 992px) {
	.static-liste .grid-container .item-bilder {
		top: 15px
	}
}

@media only screen and (min-width: 1200px) {
	.static-liste .grid-container .item-bilder {
		top: 0
	}
}

.static-liste .grid-container .item-bilder .bild-1 {
	position: absolute;
	display: none;
}

.static-liste .grid-container .item-bilder .bild-2 {
	position: absolute;
	right: -15px;
	top: 90px;
	display: block;
}

@media only screen and (min-width: 360px) {
	.static-liste .grid-container .item-bilder .bild-1 {
		display: none;
	}
	.static-liste .grid-container .item-bilder .bild-2 {
		top: 75px;
		right: 0;
		display: block;
	}
}

@media only screen and (min-width: 414px) {
	.static-liste .grid-container .item-bilder .bild-1 {
		display: none;
	}
	.static-liste .grid-container .item-bilder .bild-2 {
		top: 75px;
		right: 0;
		display: block;
	}	
}

@media only screen and (min-width: 568px) {
	.static-liste .grid-container .item-bilder .bild-1 {
		top: 44px;
		right: 0;
		display: block;
	}
	.static-liste .grid-container .item-bilder .bild-2 {
		top: 50px;
		right: 150px;
		display: block;
	}	
}

@media only screen and (min-width: 768px) {
	.static-liste .grid-container .item-bilder .bild-1 {
		display: none;
	}
	.static-liste .grid-container .item-bilder .bild-2 {
		top: 30px;
		right: 0;
		display: block;
	}	
}

@media only screen and (min-width: 992px) {
	.static-liste .grid-container .item-bilder .bild-1 {
		top: 40px;
		right: 0;
		display: block;
	}
	.static-liste .grid-container .item-bilder .bild-2 {
		top: 55px;
		right: 150px;
		display: block;
	}
}

@media only screen and (min-width: 1200px) {
	.static-liste .grid-container .item-bilder .bild-1 {
		top: 55px;
		right: 0;
		display: block;
	}
	.static-liste .grid-container .item-bilder .bild-2 {
		top: 70px;
		right: 170px;
		display: block;
	}
}

.static-liste .grid-container .item-bilder .bild-1 .aliste-bild {
	width: 220px;
	height: 124px
}

.static-liste .grid-container .item-bilder .bild-2 .aliste-bild {
	width: 112px;
	height: 125px
}

.static-liste .grid-container .item-preis .ab {
	display: block;
	color: #919191;
	font-size: 11px
}

.static-liste .grid-container .item-preis .preis {
	font-size: 24px;
	font-weight: 800;
	line-height: 1.2;
	display: block;
	margin-bottom: 10px;
}

/*-----------------------------------*\
  TOP - TITEL - BAR
\*-----------------------------------*/

.top-titel-bar {
	border-bottom: 1px solid #c4c4c4;
	padding: 20px 0 5px;
}
.top-titel-bar span {
	font-size: 24px;
	font-weight: 300;
}

/*-----------------------------------*\
  BOTTOM - TITEL - BAR
\*-----------------------------------*/

.bottom-titel-bar {
	padding: 0;
}
.bottom-titel-bar p {
	margin: 15px 0;
	font-size: 15px;
	font-weight: 300;
}
.bottom-titel-bar .i-link {
	background: #f4f4f4;
	padding: 8px 14px;
	text-decoration: none;
	margin-bottom: 10px;
	display: inline-block;
	float: right;
}
.bottom-titel-bar .i-link:hover {
	text-decoration: none;
	background: #f2f2f2;
}
.bottom-titel-bar .i-link i {
	padding-right: 5px;
}
@media only screen and (max-width: 991px) {
	.bottom-titel-bar .i-link {
		float: none;
	}
}

/*-----------------------------------*\
  FAHRZEUGINFORMATION
\*-----------------------------------*/

.fahrzeuginformation {
	padding: 20px 0;
}
.fahrzeuginformation h1 {
	font-size: 24px;
	font-weight: 400;
	padding: 0;
	margin: 0;
}

.fahrzeuginformation h2 {
	font-size: 18px;
	font-weight: 400;
	padding: 0;
	margin: 5px 0 10px;
}

.fahrzeuginformation .hr1 {
	margin: 15px 0 20px;
}
.fahrzeuginformation .hr2 {
	margin: 0 0 10px;
}
.fahrzeuginformation .hr3 {
	margin: 25px 0 15px;
}

@media only screen and (min-width: 992px) {
.fahrzeuginformation .row.equal {
    display: flex;
    flex-wrap: wrap;
  }
}
  
.fahrzeuginformation .panel {
    border-radius: 0;
	border-color: #eee;
	box-shadow: none;
	background: #f9f9f9;
}

.fahrzeuginformation .panel .panel-logo {
    height:124px;
	padding:13px 0 0 0;
	text-align: center;
}
  
.fahrzeuginformation .panel-body {
    padding: 8px 16px 8px 60px;
	font-size: 14px;
	font-weight: 300;
}
.fahrzeuginformation .panel-body h6 {
	font-size: 16px;
	font-weight: 300;
	padding: 0 0 2px 0;
	margin: 0;
}
.fahrzeuginformation .panel-body p {
	font-size: 11px;
	font-weight: 300;
	padding: 0;
	margin: 0;
}
.fahrzeuginformation .panel-body i {
	width: 24px;
	height: 24px;
	background: #333;
	position: absolute;
	left: 35px;
	top: 14px;
	margin: 0;
	padding: 0;
}
.fahrzeuginformation .panel-body i.motorart {
	background: url(../img/fahrzeuginformation/motorart.png) no-repeat;
	background-size: 100%;
}
.fahrzeuginformation .panel-body i.hubraum {
	background: url(../img/fahrzeuginformation/hubraum.png) no-repeat;
	background-size: 100%;
}
.fahrzeuginformation .panel-body i.leistung {
	background: url(../img/fahrzeuginformation/leistung.png) no-repeat;
	background-size: 100%;
}
.fahrzeuginformation .panel-body i.geschwindigkeit {
	background: url(../img/fahrzeuginformation/geschwindigkeit.png) no-repeat;
	background-size: 100%;
}  
.fahrzeuginformation table thead tr th {
	  border-bottom: 2px solid #eee;
	  font-weight: 300;
}
.fahrzeuginformation table tbody tr td {
	  border-top: 1px solid #eee;
	  font-weight: 300;
}
.fahrzeuginformation table tbody tr td:first-child {
	  border-right: 1px solid #eee;
}