/************* für neue Harleys ab Modell 2026 */
div.Farbe	{margin:3px;padding:10px;position:relative;width:210px;max-width:210px;height:220px;display:block;float:left;
}


img.CL1		{width:180px; position:relative; z-index:2; margin-top:10px; box-shadow: 3px 3px 10px gray; }
img.CL2		{top:-111px; left:5px; width:310px; position:relative;z-index:1; }


div.cd		{margin:3px;padding:10px;display:block;float:left;}
div.Clipl	{border:1px solid #F90;width:87px; height:37px;margin-top:3px;}
div.Clipl img	{width:120px;max-width:120px;position: absolute;margin-top:-29px;margin-left:-24px;
     		clip: rect(30px 110px 65px 25px);overflow: hidden;}



		

div.Zeile, div.Bike23 	{clear:both;width:100%;position:relative;padding:0;margin:0;}
div.Zeile 	{min-height:170px;}

div.BikeBilder		{position:absolute;top:12%;left:5%;width:30%;}
div.BikeBilder img		{max-width:48%;}

/***************** Feature Test *************/
.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: 20%;
}

/* The Modal (background) */
.modal {
  display: none;
  position: fixed;
  z-index: 1;
  padding-top: 0px; padding-bottom:5px;
  top:40px;
  left:50%;
transform: translate(-50%, 0%);
  width: 90%;
  max-width: 790px;
  height: auto;
  max-height:90vh;
  overflow: auto;
  background-color:rgba(0, 0, 0, 0.85);
}

/* Modal Content */
.modal-content {
  position: relative;
  margin: auto;
box-shadow: 10px 10px 10px 10px black;
  width: 95%;
  max-width: 650px;
background-color:black;

}

/* The Close Button */
div.CloseCursor {position:sticky; top:0;text-align:right;padding:10px 25px 10px;}
.close {
  color: white;
  font-size: 25px;
  font-weight: bold;
}

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


/* Hide the slides by default */
.mySlides {
  display: none; padding-bottom:0px;
}

/* Next & previous buttons */
.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 50px;
  width: auto;
  padding: 16px;
  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;
text-shadow: 0 0 3px #000;}

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


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


/* Caption text */
.caption-container {
  background-color: black;
  padding: 0 6px;
  color: white;
  position: relative;
  top:-45px;
  font-size:90%;
}


/* The dots/bullets/indicators */
.dot {
  cursor: pointer;
  height: 12px;
  width: 12px;
  margin: 0 4px;
  background-color: #ddd;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active, .dot:hover {
  background-color: #717171;
}

/* Fading animation */
.fade {
  animation-name: fade;
  animation-duration: 1.5s;
}

@keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}

/***************** Fature Test Ende *************/
.FeatureGrid {
display: grid; 
grid-template-columns: repeat(auto-fill, 15em);
row-gap: 10px;
column-gap: 10px;}

.FeatureCol {
  background-color:#181818;
  padding:1px;
}
.FeatureCol > p {padding:10px;}
.FeatureCol > p > i {color:#ff8800;}
.FeatureCol > img {border: 1px solid #ff8800;}
.FeatureCol:hover,
.FeatureCol:focus {
  opacity:0.7;
  cursor: pointer;
}
.FeatureLi:hover,
.FeatureLi:focus {
  color:#ff8800;
  cursor: pointer;
}



div.Zeile img 	{width: 100%;  height: auto; max-width: 100%;}
div.Bike img 	{width: 100%;  height: auto;}

div.Bike div	{position:absolute; right;top:0;right:0;width:35%;padding:0 5px 0 8%;
		background: -moz-linear-gradient(left, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 20%); /* FF3.6+ */
		background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,0.65))); /* Chrome,Safari4+ */
		background: -webkit-linear-gradient(left, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); /* Chrome10+,Safari5.1+ */
		background: -o-linear-gradient(left, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); /* Opera 11.10+ */
		background: -ms-linear-gradient(left, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); /* IE10+ */
		background: linear-gradient(to right, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 20%); /* W3C */
		}
div.Bike img.L	{margin:2px 0px 2px 4px;}

div.Zeile h3	{position:absolute; top:10px;left:1%;min-width:30%;}
div.Zeile p	{position:absolute;bottom:20px;left:1%;width:30%;  padding:5px; background-color: hsla(0, 0%, 0%, 0.5);}
div.Zeile h3, div.Zeile p	{padding:5px; background-color: hsla(0, 0%, 0%, 0.5);}

div.Link	{position:absolute; top:0;right:3%;width:25%;min-width:90pt;}
.Link li	{padding:0;margin:10px 0 0 0;width:100%} 
.Link ul 	{list-style: none;margin:0; padding:0;}
.Zclear	 	{border-bottom: 1px solid #666;clear:both;}

table.PreisTab {width:97%;	background-color: #111;}
table.PreisTab caption {
padding-bottom: 1em;
}
table.PreisTab th {
text-align: left; width:20%;padding-left:15px;
}
table.PreisTab 
td {
border: 1px solid #333;
	border-collapse: separate;padding:1px; vertical-align: middle;padding:5px 10px 5px 10px;
}
table.PreisTab tbody tr:nth-child(even) {
	background-color: #000;

}
table.PreisTab tbody tr:hover {  background-color:#333;}


/************* für HD 2023 Handybild = kleine Vorschaubilder ganz links ran */

@media only screen and (max-width: 38em) {
div.BikeBilder		{top:0;left:5%;width:18.5%;}
div.BikeBilder img		{max-width:98%;}
}



/************* für neue Harleys ab Modell 2015 fast Ende */

@media only screen and (max-width: 773px) {
div.Zeile p	{bottom:0;}
}

@media only screen and (max-width: 690px) {

div.Zeile h3	{left:70%;width:30%;}
div.Zeile p	{display:none;}
div.Bike img.L	{width:46%;}
div.Link	{left:2%;}
div.Farbe	{max-width:100%;}

}

/************* nötige Alt-Defintionen */
.L 		{border: 1px solid #FF8800;padding:0;margin:0;max-width:100%;}
A.N 		{text-decoration:underline;}
A.N:link	{ color:#FF8800; } 
A.N:visited	{ color:#DD6600; } 
A.N:active	{ color:#AAAAAA; } 
A.N:hover	{ color:#FFFFFF; }