/*** si basano su simple-master, basic-style.cs ****/
/*** ho modificato parecchio, non ho capito tutto **/

/*Simple Responsive Template v 1.2


primary styles 
   Author: www.prowebdesign.ro
   Add your own styles to customize the project.

grazie, già fatto.



BASE (MOBILE) SIZE

/* si inizia con gli stili per piccoli schermi */

/* TYPO */

	   .textnorm 
		{
		font-size: 22pt; 
		font-family: "Verdana", sans-serif; 
		line-height: 28pt;
		color: #ffffff;
		link: #ffffff;		
		vlink: #ffffff;
		}		
		
		a:link
		{
		font-size: 22pt; 
		font-family: "Verdana", Arial, Helvetica, sans-serif; 
		line-height: 28pt;
		color: #ffffff;
		text-decoration: none;
		}
		
		a:visited
		{
		font-size: 22pt; 
		font-family: "Verdana", Arial, Helvetica, sans-serif; 
		line-height: 28pt;
		color: #999999;
		text-decoration: none;
		}
		
		.subnavi
		{
		font-size: 22pt; 
		font-family: "Verdana", Arial, Helvetica, sans-serif; 
		line-height: 28pt;
		color: #ffffff;
		link: #ffffff;
		text-decoration:none;
		}
						
		.bu 
		{
		font-size: 12pt; 
		font-family: "Verdana", sans-serif;
		color: #000000;	
		}
		
		.blau 
		{
		font-size: 22pt; 
		font-family: "Verdana", sans-serif;
		font-weight: 700;
		color: #003366;	
		}		
		
		.titelfett
		{
		font-size: 22pt; 
		font-family: "Verdana", sans-serif;
		font-weight: 700;
		color: #000000;	
		}		



 /* SCHERMI FINO A 1023 PX */
@media only screen and (max-width: 1023px) {    
.wrapper {
	width: 90%; /* larghezza con spazio ds e sn */
	margin: 0 auto; /* i margini top e bottom a 0, il resto automatico */
}


/* Container */
.slideshow {
  max-width: 100%;
  width: auto;
}

/* Großes Bild */

.main-image img {
  width: 100%;
  /*height: clamp(250px, 50vw, 500px);*/
  height: auto;
  object-fit: cover;
  border-radius: 0px;
}

/* Thumbnail-Leiste */
.thumbnails {
  display: flex;
  gap: 10px;
  margin-top: 15px;
  overflow-x: auto;
  padding-bottom: 10px;
  justify-content: left; /* 👈 hier für die Ausrichtung */
}

/* Thumbnails */
.thumb {
  height: 40px;              /* 👈 hier stellst du die Höhe ein */
  width: auto;
  object-fit: cover;
  opacity: 0.6;
  cursor: pointer;
  border-radius: 0px;
  transition: all 0.3s ease;
  flex: 0 0 auto;
}

/* Hover */
.thumb:hover {
  opacity: 1;
  transform: scale(1.05);
}

/* Aktives Bild */
.thumb.active {
  opacity: 1;
  border: 3px solid #2196F3;
}

}




/* SCHERMI DA 1024 PX */
@media only screen and (min-width: 1024px) {

.wrapper {
	max-width: 70%; /* larghezza massima anche se lo schermo è più grande */
	margin: 0 auto; /* .0em (prima) margini nel wrapper */}
	
/* Container */
.slideshow {
  max-width: auto;
  width: auto;
}

/* Großes Bild */

.main-image img {
  width: 100%;
  /*height: clamp(250px, 50vw, 500px);*/
  height: auto;
  object-fit: cover;
  border-radius: 0px;
}

/* Thumbnail-Leiste */
.thumbnails {
  display: flex;
  gap: 10px;
  margin-top: 15px;
  overflow-x: auto;
  padding-bottom: 10px;
  justify-content: left; /* 👈 hier für die Ausrichtung */
}

/* Thumbnails */
.thumb {
  height: 60px;              /* 👈 hier stellst du die Höhe ein */
  width: auto;
  object-fit: cover;
  opacity: 0.6;
  cursor: pointer;
  border-radius: 0px;
  transition: all 0.3s ease;
  flex: 0 0 auto;
}


/* Hover */
.thumb:hover {
  opacity: 1;
  transform: scale(1.05);
}

/* Aktives Bild */
.thumb.active {
  opacity: 1;
  border: 3px solid #2196F3;
}

/* TYPO */

	   .textnorm 
		{
		font-size: 10pt; 
		font-family: "Verdana", sans-serif; 
		line-height: 16pt;
		color: #ffffff;
		link: #ffffff;		
		vlink: #ffffff;
		}		
		
		a:link
		{
		font-size: 10pt; 
		font-family: "Verdana", Arial, Helvetica, sans-serif; 
		line-height: 16pt;
		color: #ffffff;
		text-decoration: none;
		}
		
		a:visited
		{
		font-size: 10pt; 
		font-family: "Verdana", Arial, Helvetica, sans-serif; 
		line-height: 16pt;
		color: #999999;
		text-decoration: none;
		}
		
		.subnavi
		{
		font-size: 10pt; 
		font-family: "Verdana", Arial, Helvetica, sans-serif; 
		line-height: 16pt;
		color: #ffffff;
		link: #ffffff;
		text-decoration:none;
		}
						
		.bu 
		{
		font-size: 9pt; 
		font-family: "Verdana", sans-serif;
		color: #000000;	
		}
		
		.blau 
		{
		font-size: 10pt; 
		font-family: "Verdana", sans-serif;
		font-weight: 700;
		color: #003366;	
		}		
		
		.titelfett
		{
		font-size: 10pt; 
		font-family: "Verdana", sans-serif;
		font-weight: 700;
		color: #000000;	
		}		



}