/* Smartphones angeblich besser in em, hab aber keine angaben gefunden */
  /* 40em = 640px / 16px */
@media (width <= 767px) {

.gross { 
  width: 95vw;
  display: block;
  margin-left: auto;
  margin-right: auto;}  

.column {
  float: left;
  height: 13vw;}
  
.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 3em;
  width: auto;
  padding: 1px;
  margin-top: -1em;
  color: gold;
  font-weight: 400;
  font-size: 30px;
  border-radius: 0 3px 3px 0;
  user-select: none;
  -webkit-user-select: none;} 
  
}

/* Tablets */
@media (768px <= width <= 1023px) {

.gross { 
  width: 70vw;
  display: block;
  margin-left: auto;
  margin-right: auto;
}   
  
.column {
  float: left;
  height: 6vw;
}
  
}

/* Desktops */
@media (width >= 1024px) {
  
.gross { 
  width: 50vw;
  display: block;
  margin-left: auto;
  margin-right: auto;  
} 
.column {
  float: left;
  height: 4vw;} 
  
.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 3em;
  width: auto;
  margin: 2em 5em 1em 5em;
  color: gold;
  font-weight: 400;
  font-size: 50px;
  border-radius: 0 3px 3px 0;
  user-select: none;
  -webkit-user-select: none;}
}


* {
  box-sizing: border-box;
}


* {
  margin: 0;
  padding:0;
}

html, body {
  font-family:  Aptos, Open Sans, Source Sans Pro, arial, sans-serif;
    margin: .1em;  
    background-color: #6F90BE;
}



img {
    border: 2px solid black;
    margin-top: 0.1em;

}

header{
  text-align: center;
}

.zahl {
  color:black;
  text-shadow: 03px -3px 3px gold; 
  font-size: 200%;
  text-decoration:none;
  font-weight:600;
        
}


/* Position the image container (needed to position the left and right arrows) */
.container1 {
  position: relative; 
  margin-left: 2px;
}

.container2 {
  margin-left: 6px;
  margin-right: px;
  position: relative; 
 
}


/* Hide the images by default */
.mySlides {
  display: none;
  width: 100%;
  margin-left: auto;
  margin-right: auto;

}


/* Next & previous buttons   
Schwebt mit negetivem margin ganz oben. Wieso???? */


/* Kapier ich nicht. Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 2px 0 0 2px;
}


/* On hover wirds rosa.*/
.prev:hover,
.next:hover {
  color: salmon;
}


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

/* Mit height kann man hier bestimmen, 
wie viele Bilder nebeneinenader stehen.
Ohne height kann man mit width bestimmen, 
wie viele Bilder nebeneinenader stehen. 
Das taugt gut, wenn alle gleich hoch sind. 
vw ist viewport width: man skaliert in Prozent der Breite des Geräts.*/





.bildchen{ 
  cursor: pointer;
  max-width: 100%;
  max-height: 100%;
  object-fit: scale-down;
  display: block;
  margin: auto;


}

.bildchen:hover {
  border: 2px solid gold;
  opacity: 1;
}