/*  Extra-Stylesheet für index-page  */

/*  INHALT - Styles und Formatierung für den Inhaltsbereich (= alles zwischen header und footer)  */

#elm_first {
grid-area: ho1 / ve1 / ho2 / ve5;
margin-right: calc(0rem - var(--gap_h, 2rem));
}
#elm_02 {
grid-area: ho2 / ve1 / ho4 / ve6;
}
#elm_03 {
grid-area: ho2 / ve6 / ho4 / ve7;
}
#elm_04 {
grid-area: ho4 / ve1 / ho5 / ve5;
}
#elm_05 {
grid-area: ho5 / ve1 / ho6 / ve7;
margin-top: 0;
}
#elm_last {
grid-area: ho8 / ve1 / ho9 / ve7;
}

.a_b_s {
	font-size: 93%;
}
.PfCont {
	display: flex;
	flex-flow: row wrap;
	margin-top: 0;
	margin-bottom: calc(var(--gap_v, 1rem) * 1.6);
	justify-content: space-around;
}
.Pfimg {
	width: 16.5%;
	margin-top: var(--gap_v, 1rem);
	transition: 0.3s ease-in;
}
.Pfimg:hover {
  transform: scale(1.25,1.25) translate(-1.75%, -0.8%);
-webkit-transform: scale(1.25,1.25) translate(-1.75%, -0.8%);
}

  .piccard .faceB {
    background-color: var(--side_color, #1F72AD);
	 display: flex;
    justify-content: center;
    align-items: center;
    min-height: 14em;
  }
  .piccard .faceB h3 {
    font-family: 'open-sans', Helvetica, sans-serif; 
    font-size: 1.2em;
    font-weight: 400;
    color: var(--verybright_color, #FFFEFC);
  }
  .piccard .faceB > .piccard_content {
    padding: 0 0 2.5em 0;  
  }
  .piccard .faceA h2 {
  	 margin: 0.8em 0.3em 0.8em 0.3em;
    font-size: 1.75em;
    font-weight: 600;
    text-align: center;
    color: var(--verybright_color, #FAFBFE);
    text-shadow: 2px 1px 6px black;
  }
  .piccard:hover .faceA {
    height: 2.5em;
  }
  .piccard:hover .faceA h2 {
    font-size: 1.05em;
    color: var(--verybright_color, #FAFBFE);    
    text-shadow: 2px 1px 6px black;
  }
  .bunt section:nth-child(1) .faceA {
    background: #1CACAB; 				/*  Alternative: radial-gradient(#02678C, #1CACAB);  */
  }
  .bunt section:nth-child(2) .faceA {
    background: #4CA871;
  }
  .bunt section:nth-child(3) .faceA {
    background: #00627A;
  }
  .bunt section:nth-child(4) .faceA {
    background: #04508F;
  }
  .full_img {
	 align-self: flex-start;
	 margin-top: 0.3em;
  }

/*  ... hover-Effekt - doppelseitiges Element dreht sich um die vertikale Achse ...  */

.kontainer {
	margin-top: 0.3em;
}	
.kt_image {
  background-color: transparent;
}
.kt_image, .kt_overlay, .kt_overlay_pic {
  transition: transform 1.9s ease;
}


/* ================  LAYOUT-Anpassungen für schmalere Bildschirme, Tablets und Handys  ======================== */

@media screen and (max-width: 74rem) {

#elm_first {
grid-area: ho1 / ve1 / ho2 / ve6;
margin-right: 0;
}
#elm_02 {
grid-area: ho2 / ve1 / ho4 / ve7;
}
#elm_03 {
grid-area: ho4 / ve5 / ho5 / ve7;
}
#elm_04 {
grid-area: ho4 / ve1 / ho5 / ve5;
}
#elm_05 {
grid-area: ho5 / ve1 / ho6 / ve7;
}
.Pfimg {
	  width: 26%;
}
.Pfimg:hover {
  transform: scale(1.2,1.2) translate(-1.61%, -0.7%);
-webkit-transform: scale(1.2,1.2) translate(-1.61%, -0.7%);
}
.piccard .faceA h2{
    font-size: 1.75em;
}
.piccard:hover .faceA h2 {
    font-size: 0.9em;
}

}

/*  ab hier Anpassungen für Smartphones etc.  */

@media screen and (max-width: 44rem) {

#elm_first {
grid-area: ho1 / ve1 / ho2 / ve7;
margin-right: 0;
}
#elm_02 {
grid-area: ho3 / ve1 / ho4 / ve7;
}
#elm_03 {
grid-area: ho4 / ve1 / ho5 / ve7;
}
#elm_04 {
grid-area: ho5 / ve1 / ho6 / ve7;
}
#elm_05 {
grid-area: ho6 / ve1 / ho7 / ve7;
}
.Pfimg {
	  width: 33.3%;
}
.Pfimg:hover {
  transform: none;
-webkit-transform: none;
}
.piccard .faceB {
   min-height: 10em;
}
.piccard .faceB h3 {
   font-size: 1.2em;
}
.piccard .faceB > .piccard_content {
   padding: 0 0 2em 0;  
}
.piccard:hover .faceA {
   height: 2em;
}
.piccard .faceA h2 {
   font-size: 1.75em;
}
.piccard:hover .faceA h2 {
   font-size: 0.85em;
}

}