/*++++++++++++++++++++++++++ clear.css ++++++++++++++++++++++*/
/* SET BASE FONT ATTRIBUTES */
body, table, td {
font: 14px/1.6em Arial, Verdana, Helvetica sans-serif;
color: #000;}
body {background-color:#fff;}
html {overflow: -moz-scrollbars-vertical;}

/* REMOVE PADDING AND MARGIN VALUES */
html, body, h1, h2, h3, h4, h5, h6, p, ul, ol, dl, li, dd, dt, img,
blockquote, q, table, thead, tbody, tfoot, caption, th, tr, td, a, form,
input, textarea, fieldset, pre
{margin: 0; padding: 0;}

/* HARMONIZE LINKS, KILL BORDER ON IMG LINKS */
a {text-decoration: underline;}
a:link, a:visited , a:hover, a:active {color: #000;}
a img, :link img, :visited img {border: none;}

/* REMOVE BROWSERS DEFAULT TABLE BORDERS */
table {border-collapse: collapse;}
td, th {vertical-align:top; text-align:left;}

/* REMOVE AUTOMATIC TOP/BOTTOM MARGINS ON NESTED LISTS */
ul ul, ul ol, ul dir, ul menu, ul dl,
ol ul, ol ol, ol dir, ol menu, ol dl,
dir ul, dir ol, dir dir, dir menu, dir dl,
menu ul, menu ol, menu dir, menu menu, menu dl,
dl ul, dl ol, dl dir, dl menu, dl dl
{margin-top: 0; margin-bottom: 0;}

/* HARMONISE LIST-BULLET TYPE */
ul, dl {list-style-type: none;}
ol {padding:0 20px;}
ol li {padding:0 0 6px 0;}

strong {font-weight:bold;}
.clear{clear:both;}

/* FALLBAG AUTO.WEBAUTO */
#language select {width:130px;}
#language select option {padding:0 0 1px 25px; background-repeat:no-repeat; background-position: 4px 3px;}
#language select option#lang {background-image:none; padding:0 0 0 2px;}
#language select option#de {background-image:url(img/lang-de-active.gif);}
#language select option#uk {background-image:url(img/lang-uk-active.gif);}
#language select option#es {background-image:url(img/lang-es-active.gif);}
#language select option#fr {background-image:url(img/lang-fr-active.gif);}
#language select option#it {background-image:url(img/lang-it-active.gif);}
#language select option#pl {background-image:url(img/lang-pl-active.gif);}
#language select option#ru {background-image:url(img/lang-ru-active.gif);}
#language select option#ba {background-image:url(img/lang-ba-active.gif);}
#language select option#cz {background-image:url(img/lang-cz-active.gif);}
#language select option#hr {background-image:url(img/lang-hr-active.gif);}
#language select option#hu {background-image:url(img/lang-hu-active.gif);}
#language select option#no {background-image:url(img/lang-no-active.gif);}
#language select option#ro {background-image:url(img/lang-ro-active.gif);}
#language select option#sk {background-image:url(img/lang-sk-active.gif);}
#language select option#yu {background-image:url(img/lang-yu-active.gif);}
#language select option#se {background-image:url(img/lang-se-active.gif);}
#language select option#bg {background-image:url(img/lang-bg-active.gif);}
#language select option#tr {background-image:url(img/lang-tr-active.gif);}

//++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ design/layout.css +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
/* General */
html { scroll-behavior: smooth; }
body {overflow-x: hidden; }

body, td, th {font-family:Verdana, Arial, Helvetica, sans-serif ;}
#content {line-height:16px; padding:0; max-width:/*830px*/100%; width:100%; margin:0 auto;}
h1 {line-height:24px; padding-bottom:10px;}
h2 {margin-top:20px; }
h2.top {margin-top:0;}
h3 {font-size:16px; padding-top:5px; font-weight:normal; letter-spacing:2px;}
span.tel {padding-right:8px;}
span.mobil {padding-right:21px;}
span.fax {padding-right:30px;}
span.mail {padding-right:15px;}
span.web {padding-right:5px;}
a:hover{text-decoration:none;}
#content a.image {background:url(img/icon-arrow.gif) no-repeat; padding:0 10px 0 13px;}

#content a.button {
background-image:url(img/but-bg.png);
background-repeat:repeat-x;
height:20px;
font-weight:bold;
padding:0 13px 0px;
font-size:16px;}

/* Navi */
#language select {margin:10px 0 0; width:160px;}
#language select option {text-align:left;}

/* Pager */
#content #toolbar {width:100%;}
#content .filter {float:left;}
#content .pager {float:right;}

#content #toolbar, #content div.pager {font-size:16px; padding:0 0 20px;}
#content div.pager img.arrow {padding:0 4px 1px 0;}
#content div.pager ul{text-align:right;float:right;}
#content div.pager ul li{display:inline;}
#content div.pager ul li a, #content div.pager ul li span{display:block; float:left; padding:2px 4px;}
#content div.pager ul li.active {font-weight:bold;}


/* Search */
#car-search select {width:180px;}
#car-search select#fmilemax, #car-search select#fryymin, #car-search select#fpricemax {width:100px;}

#cars #car-search {clear:both; padding:20px 0 20px 20px; margin:0 0 20px;}
#cars #car-search ul li {display:block; float:left;  padding:3px 30px 3px 0;}
#cars #car-search #tab1 ul li label { font-weight:bold; font-size:0.8em; width:100%; margin-bottom:5px; }
#cars #car-search a.button {float:right; margin:20px 60px 0 0;}
#cars #car-search a.show-all {float:left; margin:20px 0 0;}

#cars #car-list {margin-bottom:20px; }
#cars #car-list td.car-image img{ padding:4px; }
#cars #car-list td.car-description {/*width:400px;*/}
#cars #car-list td.car-description  h2{margin-top:0;}
#cars #car-list td.car-price { width:120px; text-align:right;}
#cars #car-list tr  td{padding:7px 10px 7px 0;}


/* Car-Detail */
#car-detail #content-box1{float:left; width:400px; }
#car-detail #content-box2{float:right; width:400px;}
#car-detail #content-box3{clear:both; }
#car-detail #content-box4{clear:both; padding-top:10px;}

#car-detail h1{line-height:24px; padding:3px 5px; margin-bottom:10px;}
#car-detail #content div.headline {line-height:20px; padding:3px 5px; margin:10px 0; clear:both;}
#car-detail #content div.headline h1 {display:inline;}
#car-detail #content div.headline a.button {float:right;}

#car-detail .contactdata{float:left; width:250px;}
#car-detail div.car-nr {width:250px; float:left; color:#666; text-align:left;}
#car-detail div.car-hint {width:100px; float:left; color:#666; text-align:left; margin-left:450px; }
#car-detail table.car-info  th, #car-detail table.car-quickinfo  td{font-size:16px;}
#car-detail table.car-info  th{width:165px; font-weight:normal;text-align:left;}
#car-detail table.car-info  td{padding-left:5px;font-weight:bold;}
#car-detail ul.ausstattung{list-style-type:disc; margin-left:13px;}
#car-detail ul.ausstattung li {float:left; width:100px; padding-right:10px;}

#car-detail ul.toolbar  {margin-top:30px;}
#car-detail ul.toolbar li {line-height:18px; padding:2px 0;}
#car-detail ul.toolbar a {padding-left:18px;}
#car-detail ul.toolbar a.print {background:url(img/icon-print.gif) no-repeat;}
#car-detail ul.toolbar a.recommend {background:url(img/icon-recommend.gif) no-repeat;}

#car-detail .contactform img.senden{margin-left:230px;}
#car-detail .contactform {float:left; width:350px;}

/* Contact */
.contactform label{display:block; float:left; width:90px;}
.contactform label.checkbox{float:none; width:300px;}
.contactform input{margin-bottom:2px; width:250px; font-size:16px;}
.contactform input.checkbox{margin-bottom:2px; width:20px; float:left;}
.contactform textarea{width:340px; height:120px; font-size:16px;}
#contact .contactform a.button{clear:both; margin-left:90px;}

#map {float:right; height:210px; width:200px; margin-left:50px;position:relative;}
#car-detail #map {float:left; margin:20px 0 0 0;}
#pcity {background:url(img/icon-dot.gif) no-repeat; padding-left:15px;}

/* Content */
#content div.pager ul li a{border:1px solid #fff;}
#content div.pager ul li.active a{border:1px solid #002D8F; color:#002D8F;}

#cars #car-list td.car-image img{ border:0; border-right:2px solid #bbb; border-bottom:2px solid #bbb; }
#cars #car-list tr  td{border-bottom:1px solid #ebeff7; border-top:1px solid #ebeff7;}

/*++++++++++++++++++++++ INDIVIDUAL STYLE +++++++++++++++++++++*/

/* Farbe 1 | BG */
body {background-color:#fff;}
/* Farbe 2 | BG Boxen */
#cars #car-search, #car-detail #content div.headline, #car-detail h1, h1.car-detail  {background-color:#eee;}
/* Farbe 3 | Text */
#content, select, div#content th, div#content td {color:#000;}
/* Farbe 4 | �berschriften */
h1, h2 {color:#000;}
/* Farbe 5,6 | Links */
#content a, #content a:link, #content a:visited, #content a:active  {color:#00227F;}
#content div.pager ul li.active a {border-color:#00227F; color:#00227F;}
#content a:hover {color:#00227F;}
/* Farbe 7 | Preis */
#content td.car-price {color:#9f0000;}
/* Farbe 8,9,10 | Suchbutton */
#content a.button {
text-decoration:none;
background-color:#9F0000;
border:1px solid #9F0000;
color:#fff;}
/*Schriftart 1 | �berschrift 1*/
h1{
font-size:18px;
font-family:Arial, Helvetica, Verdana, sans-serif;}
/*Schriftart 2 | �berschrift 2*/
h2{
font-size:12px;
font-family:Arial, Helvetica, Verdana, sans-serif;}
/*Schriftart 3 | Flie�text*/
#content, select, div#content th, div#content td, textarea{
font-size:14px;
font-family:Arial, Helvetica, Verdana, sans-serif;}






.row > .column {
  padding: 0 8px;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Create four equal columns that floats next to eachother */
.column {
  float: left;
  width: 25%;
}

/* The Modal (background) */
.modal {
  display: none;
  position: fixed;
  z-index: 1;
  padding-top: 100px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: black;
}

/* Modal Content */
.modal-content {
  position: relative;
  background-color: #fefefe;
  margin: auto;
  padding: 0;
  width: 90%;
  max-width: 700px;
}

/* The Close Button */
.close {
  color: white;
  position: absolute;
  top: 10px;
  right: 25px;
  font-size: 35px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #999;
  text-decoration: none;
  cursor: pointer;
}

/* Hide the slides by default */
.waSlides {
  display: none;
}

/* Next & previous buttons */
.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -50px;
  color: white;
  font-weight: bold;
  font-size: 20px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
  -webkit-user-select: none;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* Caption text */
.caption-container {
  text-align: center;
  background-color: black;
  padding: 2px 16px;
  color: white;
}

img.norm {
  opacity: 0.6;
}

.active,
.norm:hover {
  opacity: 1;
}

img.hover-shadow {
  transition: 0.3s
}

.hover-shadow:hover {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)
}



/*++++++++++++++++++++++ INDIVIDUAL STYLE - IP-1640 +++++++++++++++++++++*/

/*++++++ TEMPLATE ++++++*/


#content.container{
  margin-right: auto;
  margin-left: auto;
  /*padding-left: 15px;
  padding-right: 15px;*/
  width:100%;
  max-width:1400px;
}

#content .container-row{
  display:flex;
  flex-wrap:wrap;
  /*margin-left:-15px;
  margin-right:-15px;*/
}

#content .container-column{
  padding-left:15px;
  padding-right:15px;
  max-width:100%;
  width:100%;
  flex:0 1 auto;
}


/*++++++ ENDE TEMPLATE ++++++*/


/*++++++ SUCHE ++++++*/

#cars #car-search {
  box-shadow: 0 0.375rem 0.75rem rgba(140,152,164,.075);
  background-color:#fff;
  border-radius:25px;
  border-color: rgba(0, 0, 0, 0.125);
  border-width:1px;
  border-style:solid;
  margin-bottom:3em;
  padding:20px 20px 25px 20px;
}

#cars #car-search ul {
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
}

#cars #car-search ul.mb-5{
  margin-bottom:3rem;
}

#cars #car-search ul li{
  /* flex: 1; */
  min-width: 324px; /* Mindestbreite für jedes Suchfeld */
  padding: 10px 0;
  display:flex;
  align-items:center;
  line-height:1.1;
  flex-wrap:wrap;
}

#cars #car-search ul li select{
  flex:2;
  padding:10px;
  border: 1px solid #ddd;
  border-radius: 3px;
}

#cars #car-search .form-field-checkbox {
  transform:scale(2);
  margin-left:8px;
}

#cars #car-search .form-field-checkbox-label {
  margin-left:15px;
}


#cars #car-search a.show-all {
  display:inline-flex;
  float:none;
  background-color: #999999;
  padding: 10px 15px;
  font-size: 1em;
  border-radius: 4px;
  border: none;
  color: #fff;
  transition:0.3s;
  text-decoration:none;
  font-size:16px;
}

#cars #car-search a.show-all:hover,
#cars #car-search a.show-all:focus {
  outline:none;
  background-color:#4c4c4c;
}


#cars #car-search a.button {
  display:inline-flex;
  background-color: #069;
  padding: 10px 15px;
  font-size: 1em;
  border-radius: 4px;
  border: none;
  color: #fff;
  transition:0.3s;
  text-decoration:none;
  background-image:none;
  font-weight:normal;
  height:auto;
  margin:20px 0 0;
  justify-content:flex-end;
  font-size:16px;
}

#cars #car-search a.button:hover,
#cars #car-search a.button:focus {
  outline:none;
  background-color:#cc3332;
}


#cars #car-search .tab {
  display:flex;
  flex-wrap:wrap;
}

#cars #car-search .tablinks {
    background-color: #f2f2f2;
    border: 1px solid #ccc;
    padding: 10px 20px 10px 50px;
    cursor: pointer;
    display:flex;
    flex:1;
    background-size:24px;
    background-position:15px center;
    background-repeat:no-repeat;
    font-weight:700;
}

#cars #car-search .tablinks.active {
  color:#fff;
  background-color:#069;
  border-color:#069;
}

#cars #car-search .tablinks.basisdaten {
  background-image: url('../images/basisdaten.svg');
}

#cars #car-search .tablinks.basisdaten.active {
  background-image: url('../images/basisdaten-w.svg');
}

#cars #car-search .tablinks.komfort {
  background-image: url('../images/komfort.svg');
}

#cars #car-search .tablinks.komfort.active {
  background-image: url('../images/komfort-w.svg');
}

#cars #car-search .tablinks.sitze {
  background-image: url('../images/sitze.svg');
}

#cars #car-search .tablinks.sitze.active {
  background-image: url('../images/sitze-w.svg');
}

#cars #car-search .tablinks.aussen {
  background-image: url('../images/aussen.svg');
}

#cars #car-search .tablinks.aussen.active {
  background-image: url('../images/aussen-w.svg');
}

#cars #car-search .tablinks.multimedia {
  background-image: url('../images/multimedia.svg');
}

#cars #car-search .tablinks.multimedia.active {
  background-image: url('../images/multimedia-w.svg');
}

#cars #car-search .tablinks.assistenz {
  background-image: url('../images/assistenz.svg');
}

#cars #car-search .tablinks.assistenz.active {
  background-image: url('../images/assistenz-w.svg');
}

#cars #car-search .tablinks.sicherheit {
  background-image: url('../images/sicherheit.svg');
}

#cars #car-search .tablinks.sicherheit.active {
  background-image: url('../images/sicherheit-w.svg');
}

#cars #car-search .tablinks.extras {
  background-image: url('../images/extras.svg');
}

#cars #car-search .tablinks.extras.active {
  background-image: url('../images/extras-w.svg');
}

#cars #car-search .tabcontent {
    display: none;
    padding: 20px;
    border: 1px solid #ccc;
    border-radius:2px;
    margin-bottom:10px;
}

#cars #car-search .tabcontent.active {
    display: block;
}



/*++++++ ENDE SUCHE ++++++*/


/*++++++ LISTE ++++++*/

#cars #car-list{
  width:100%;
  max-width:100%;
  box-shadow: 0 0.375rem 0.75rem rgba(140,152,164,.075);
  background-color: #fff;
  border-radius: 25px;
  border-color: rgba(0, 0, 0, 0.125);
  border-width: 1px;
  border-style: solid;
  margin-bottom: 1em;
  border-collapse:separate;
}

#cars #car-list .car-image img {
  width:100%;
  max-width:350px;
  height:auto;
  border:none !important;
  padding:0 !important;
}


#cars #car-list tr td.car-image {
 padding:20px 15px 0px 20px;
}

#cars #car-list tr td.car-description {
  padding:20px 15px 0px 15px;
}

#cars #car-list tr td.car-price{
  padding:20px 20px 0px 15px;
}



#cars #car-list tr td {
  border:none;
}


#cars #car-list tr td.car-description h2 {
  font-size:1.25em;
}

#cars #car-list tr td.car-description h2 a {
  color:#000;
  text-decoration:none;
}

#cars #car-list tr td.car-price {
  font-size:1.25em;
  color:#000;
}


/*++++++ ENDE LISTE ++++++*/



/*++++++ DETAIL ++++++*/


#car-detail .car-container-id{
  display:flex;
  flex-direction:row;
}

#car-detail .car-container-id .car-nr{
  width:auto;
  float:none;
  font-size:0.75em;
}

#car-detail .car-container-id .car-hint{
  width:auto;
  float:none;
  font-size:0.75em;
  margin-left:15px;
}



#car-detail .headline {
  background-color:#fff !important;
  padding:0 !important;
  margin:25px 0 !important;
}

#car-detail .headline h1 {
  padding:0 !important;
  font-size:2em ;
  background-color:#fff !important;
}


#car-detail .detail-wrapper {
  display:flex;
  flex-direction:row;
  width: 100%;
  max-width: 100%;
  box-shadow: 0 0.375rem 0.75rem rgba(140,152,164,.075);
  background-color: #fff;
  border-radius: 25px;
  border-color: rgba(0, 0, 0, 0.125);
  border-width: 1px;
  border-style: solid;
  margin-bottom: 1em;
}


#car-detail .detail-wrapper #content-box1 {
  float:none;
  width:75%;
  padding:20px;
}


#car-detail .detail-wrapper #content-box1 h2 {
  font-size:1.15em;
}

#car-detail .detail-wrapper #content-box1 h2.top{
  margin-bottom:15px;
}


#car-detail .detail-wrapper #content-box2 {
  float:none;
  width:25%;
  padding:20px 20px 20px 0px;
  font-size:16px;
}


#car-detail .detail-wrapper #content-box1 .card{
  position: relative;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  background-color: #fff;
  background-clip: border-box;
  border: 1px solid rgba(0, 0, 0, 0.125);
  border-radius: 0.25rem;
  margin-top:25px;
}


#car-detail .detail-wrapper #content-box1 .card div.card-header {
    font-weight: bold;
}


#car-detail .detail-wrapper #content-box1 .card div.card-header h2 {
  margin-top:0;
}

#car-detail .detail-wrapper #content-box1 .card-header:first-child {
    border-radius: calc(0.25rem - 1px) calc(0.25rem - 1px) 0 0;
}

#car-detail .detail-wrapper #content-box1.justify-content-between {
    -ms-flex-pack: justify !important;
    justify-content: space-between !important;
}

.d-flex {
    display: -ms-flexbox !important;
    display: flex !important;
}

.d-none {
    display: none !important;
}

#car-detail .detail-wrapper #content-box1 .card-body {
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    padding: 1.25rem;
}

#car-detail .detail-wrapper #content-box1 .card-header {
    padding: 0.75rem 1.25rem;
    margin-bottom: 0;
    background-color: rgba(0, 0, 0, 0.03);
    border-bottom: 1px solid rgba(0, 0, 0, 0.125);
}

#car-detail .detail-wrapper #content-box1 .card-header .card-toggle-icon{
  transition:transform 0.3s;
}


#car-detail .detail-wrapper #content-box1 .card-header .fa-angle-double-down {
  background-image:url(../images/arrow_down.svg);
  background-size:100%;
  background-repeat:no-repeat;
  background-position:center;
  width:16px;
  height:16px;
  margin-right:10px;
}


#car-detail .detail-wrapper #content-box1 .card-header .fa-angle-double-right {
  background-image:url(../images/arrow_down.svg);
  background-size:100%;
  background-repeat:no-repeat;
  background-position:center;
  width:16px;
  height:16px;
  margin-right:10px;
  transform:rotate(-90deg);
}


#car-detail .detail-wrapper #content-box1 .ausstattung {
  list-style: none;
  padding-left: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin:0;
}


#car-detail .detail-wrapper #content-box1 .ausstattung li{
  flex: 0;
  min-width: 300px;
  padding: 10px 0;
  display: flex;
  align-items: center;
  width:100%;
  font-size:16px;
}


#car-detail .detail-wrapper #content-box1 .ausstattung li::before {
    content: "";
    display: inline-block;
    width: 16px;
    height: 16px;
    background-image: url(../images/check_circle.svg);
    background-size: contain; /* Skaliere das Bild, um es im Listenpunkt darzustellen */
    margin-right: 10px;
}


#car-detail .detail-wrapper #content-box1 .more-information {
  line-height:2;
}


#car-detail .detail-wrapper #content-box1 .car-info tbody {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin:0;
}

#car-detail .detail-wrapper #content-box2 .car-info tbody {
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

#car-detail .detail-wrapper #content-box1 .car-info tr{
  flex: 0;
  min-width: 300px;
  padding: 10px 0;
  display: flex;
  align-items: center;
  width:100%;
}


#car-detail .detail-wrapper #content-box2 .car-info tr{
  display: flex;
  align-items: center;
  flex-wrap:wrap;
}

#car-detail .detail-wrapper #content-box2 .car-info td sup {
  font-size:11px;
}

#car-detail .detail-wrapper #content-box2 .car-info tr th{
  min-width:220px;
}

#car-detail .detail-wrapper #content-box1 .car-info tr,
#car-detail .detail-wrapper #content-box1 .car-info td,
#car-detail .detail-wrapper #content-box2 .car-info td {
  font-size:16px;
}

#car-detail .detail-wrapper #content-box2 #preview {
  aspect-ratio:5/4;
  display:flex;
  align-items:center;
  justify-content:center;
}

#car-detail .detail-wrapper #content-box2 #preview a {
  display:flex;
  flex:1;
}

#car-detail .detail-wrapper #content-box2 #preview img {
  width:100%;
  max-width:100%;
  height:auto;
}


#car-detail .detail-wrapper #content-box2 ul.toolbar {
  margin-top:0;
}

#car-detail .detail-wrapper #content-box2 h2.fuel-headline {
  font-size:16px;
  margin-bottom:15px;
}


#car-detail .detail-wrapper #content-box2 .co2-efficiency-image {
  margin-top:25px;
}


#car-detail .detail-wrapper #content-box2 .co2-efficiency-image img {
  width:100%;
  max-width:100%;
  height:auto;
}


#car-detail .detail-wrapper #content-box2 a.image,
#car-detail .detail-wrapper #content-box2 ul.toolbar a.print{
    display: flex;
    float: none;
    background-color: #999999;
    padding: 10px 15px;
    font-size: 1em;
    border-radius: 4px;
    border: none;
    color: #fff;
    transition: 0.3s;
    text-decoration: none;
    background-image:none;
    margin-top:15px;
    justify-content:center;
}

#car-detail .detail-wrapper #content-box2 ul.toolbar a.share{
    display: flex;
    float: none;
    background-color: #999999;
    padding: 10px 15px;
    font-size: 1em;
    border-radius: 4px;
    border: none;
    color: #fff;
    transition: 0.3s;
    text-decoration: none;
    background-image:none;
    margin-top:15px;
    justify-content:center;
}



#car-detail .detail-wrapper #content-box2 a.image:hover,
#car-detail .detail-wrapper #content-box2 a.image:focus,
#car-detail .detail-wrapper #content-box2 a.image:active,
#car-detail .detail-wrapper #content-box2 ul.toolbar a.print:hover,
#car-detail .detail-wrapper #content-box2 ul.toolbar a.print:focus,
#car-detail .detail-wrapper #content-box2 ul.toolbar a.print:active {
    background-color:#4c4c4c;
    outline:none;
}
#car-detail .detail-wrapper #content-box2 ul.toolbar a.share:hover,
#car-detail .detail-wrapper #content-box2 ul.toolbar a.share:focus,
#car-detail .detail-wrapper #content-box2 ul.toolbar a.share:active {
    background-color:#4c4c4c;
    outline:none;
}


#car-detail .detail-wrapper #content-box2 a.image .photo-icon{
  background-image:url(../images/photo.svg);
  background-size:100%;
  background-repeat:no-repeat;
  background-position:center;
  width:16px;
  height:16px;
  margin-right:10px;
  filter:invert();
}


#car-detail .detail-wrapper #content-box2 ul.toolbar a.print .print-icon {
  background-image:url(../images/print.svg);
  background-size:100%;
  background-repeat:no-repeat;
  background-position:center;
  width:16px;
  height:16px;
  margin-right:10px;
  filter:invert();
}

#car-detail .detail-wrapper #content-box2 ul.toolbar a.share .share-icon {
  background-image:url(../images/share.svg);
  background-size:100%;
  background-repeat:no-repeat;
  background-position:center;
  width:16px;
  height:16px;
  margin-right:10px;
  filter:invert();
}

#car-detail .detail-wrapper #content-box2 .ibox,
#car-detail .detail-wrapper #content-box1 .ibox {
  height:auto !important;
  font-size:12px !important;
  width:100% !important;
  max-width:350px !important;
  z-index:100 !important;
}






#car-detail .detail-wrapper #content-box2 .contactform,
#car-detail .detail-wrapper #content-box2 .contactform form{
  width:100%;
  max-width:100%;
  float:none;
}



#car-detail .detail-wrapper #content-box2 .contactform label,
#car-detail .detail-wrapper #content-box2 .contactform .headline-form {
  width:100%;
  margin-bottom:10px;
  font-size:16px;
}


#car-detail .detail-wrapper #content-box2 .contactform input[type="text"]{
  height:35px;
  width:100%;
  font-size:1em;
  margin-bottom:15px;
  box-sizing:border-box;
}


#car-detail .detail-wrapper #content-box2 .contactform textarea {
  box-sizing:border-box;
  width:100%;
  max-width:100%;
  font-size:1em;
  height:auto;
}


#car-detail .detail-wrapper #content-box2 .contactform .copytome-wrapper,
#car-detail .detail-wrapper #content-box2 .contactform .dsgvo-wrapper,
#car-detail .detail-wrapper #content-box2 .contactform .dsgvo-link-wrapper {
  margin:15px 0;
}





#car-detail .detail-wrapper #content-box2 .contactform a.form-send{
    display: flex;
    float: none;
    background-color: #069;
    padding: 10px 15px;
    font-size: 1em;
    border-radius: 4px;
    border: none;
    color: #fff;
    transition: 0.3s;
    text-decoration: none;
    background-image:none;
    margin-top:15px;
    justify-content:center;
    align-items:center;
}


#car-detail .detail-wrapper #content-box2 .contactform a.form-send:hover,
#car-detail .detail-wrapper #content-box2 .contactform a.form-send:focus,
#car-detail .detail-wrapper #content-box2 .contactform a.form-send:active {
    background-color:#cc3332;
    outline:none;
}


#car-detail .detail-wrapper #content-box2 .contactform a.form-send .send-icon{
  background-image:url(../images/arrow_down.svg);
  background-size:100%;
  background-repeat:no-repeat;
  background-position:center;
  width:16px;
  height:16px;
  margin-right:10px;
  filter:invert();
  transform:rotate(-90deg);
}








#car-detail .detail-wrapper #content-box3 h1 {
  background-color:transparent;
  padding:0;
  line-height:1.1em;
}






#car-detail .detail-wrapper #content-box4 p.footnote {
  font-size:12px;
}

.footer-links .separator {
  display:inline;
}




/*++++++ ENDE DETAIL ++++++*/

/*++++++ MEDIA QUERIES ++++++*/


@media (min-width:992px) {
  #car-detail .detail-wrapper #content-box1 .ausstattung li{
    min-width:300px;
  }
}


@media (min-width:768px) and (max-width:991px){
  #car-detail .detail-wrapper #content-box1 .ausstattung li{
    min-width:200px;
  }
}

@media (max-width:767px) {
  #car-detail .detail-wrapper #content-box1 .ausstattung li{
    min-width:200px;
  }

  #car-detail .detail-wrapper #content-box1 .car-info tbody {
    gap:0;
  }

  #car-detail .detail-wrapper #content-box2 {
    padding:20px;
  }


}

@media(min-width:769px){
  #cars #car-list tr:last-of-type td.car-image {
  padding:20px 15px 20px 20px;
}
}

@media (max-width:768px){

#cars #car-search a.show-all,
#cars #car-search a.button {
  box-sizing:border-box;
  width:100%;
  float:none;
  justify-content:center;
  align-items:center;
}


#cars #car-list tbody {
  display:flex;
  flex-wrap:wrap;
  flex-direction:column;
}

#cars #car-list tbody tr {
  display:flex;
  flex-wrap:wrap;
  flex-direction:column;
}

#cars #car-list tr td.car-image {
 padding:25px 15px 0 15px;
 overflow:hidden;
}

#cars #car-list tr td.car-image img {
  max-width:100%;
}

#cars #car-list tr td.car-price {
  text-align:center;
  font-size:2em;
}

#car-detail .detail-wrapper #content-box2 .car-info tr {
  align-items:flex-start;
  flex-wrap:wrap;
  flex-direction:column;
}


#car-detail .detail-wrapper #content-box2 .car-info td {
  padding-left:0;
}

#cars #car-list tr td.car-price, #cars #car-list tr td.car-description{
  padding:15px 15px 0 15px;
}

#cars #car-list tr:last-of-type td.car-price {
  padding:20px 20px 25px 15px;
}


#car-detail .detail-wrapper{
  flex-wrap:wrap;
}

#car-detail #content .container-column {
  display:flex;
  flex-direction:column;
}

#car-detail .detail-wrapper #content-box1,
#car-detail .detail-wrapper #content-box2,
#car-detail .detail-wrapper #content-box2 .contactform{
  width:100%;
  max-width:100%;
}

.footer-links .separator {
  display:none;
}

.footer-links a {
  display:block;
  margin-bottom:10px;
}


}

@media (max-width:576px){
#cars #car-search ul li{
width:100%;
}
}




@media print {

    .no-print {
        display: none; /* Beispiel: Elemente mit der Klasse "no-print" ausblenden */
    }

    .no-page-break {
        page-break-inside: avoid;
    }

#content .container-column{
  padding:0;
}

#car-detail .detail-wrapper #content-box1{
  width:100%;
  padding:0;
}

#car-detail .detail-wrapper {
  border:none;
  box-shadow:none;
  background:transparent;
}

#car-detail table.car-info th{
  width:165px;
}

#car-detail .detail-wrapper #content-box1 .car-info tr {
  min-width:315px;
}

#car-detail .detail-wrapper #content-box1 .card-body {
  display:block !important;
}

#car-detail .detail-wrapper #content-box2 #preview {
  aspect-ratio:unset;
}

#car-detail .detail-wrapper #content-box2 #preview img {
  max-width:60%;
  height:auto;
  margin:0 auto;
  display:flex;
}

#car-detail .detail-wrapper #content-box2 #thumbnails img {
  width:120px;
  height:auto;
  padding:5px;
}

#car-detail .detail-wrapper #content-box2 #thumbnails.thumbnail-margin{
  margin:0 -5px;
}

#car-detail .detail-wrapper #content-box1 .ausstattung li::before,
#car-detail .detail-wrapper #content-box1 .card-header .fa-angle-double-down,
#car-detail .detail-wrapper #content-box1 .card-header .fa-angle-double-right{
  display:none;
}

#car-detail .detail-wrapper #content-box1 .card,
#car-detail .detail-wrapper #content-box1 .card-header,
#car-detail .detail-wrapper #content-box1 .card-body {
  border:none;
  background-color:transparent;
  padding:0;
}

#car-detail .detail-wrapper #content-box1 .ausstattung li,
#car-detail .detail-wrapper #content-box1 .card-header {
  padding:0 0 15px 0;
}

#car-detail .detail-wrapper #content-box1 .card-body{
  font-size:12px !important;
}

.print-info-text {
  margin-top:15px;
  font-size:12px;
}

#car-detail .detail-wrapper #content-box2 .co2-efficiency-image img{
  max-width:250px;
}

}


@media screen {
.print-info-text{
  display:none ;
}
}


/*++++++ ENDE MEDIA QUERIES ++++++*/


/* car list paginator */
.pagination {
  text-align: center;
  margin-top: 20px;
}

.pagination button {
  padding: 5px 10px;
  margin: 0 5px;
  cursor: pointer;
  outline: 1px solid #494a4f;
  border-radius: 1px;
  border: none;
}

.carhidden {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.pagination button.active {
  background-color: #007bff;
  color: white;
}