/* Logo */
img.etLO { 
          width: 400px;
          height: auto;
          border: none;
          }

/* Maske */
img.maske {
          width: 350px;
          height: auto;
          border: none;
          }

/* SocialMedia */
img.some {
          width: 22px;
          height: 22px;
          border: none;
          margin: 0.75em 0.25em 0.1em 0.25em;
          }

/* Sponsoren */
img.spons {
          width: auto;
          height: 50px;
          border: none;
          margin: 1.25em 0.5em 0.5em 0.5em;
          }

@media screen and (max-width: 30em) {
/* Logo */
img.etLO { 
          width: 85%;
          }

/* Maske */
img.maske {
          width: 250px;
          }}

/* Motto */
img.dfbLO {
          width: auto;
          height: 100px;
          border: none;
          }


/* ------------------------------------------------------------------------------------------------------ */


/* Animierte Kacheln */
.abild {
          position: relative;
          display: inline-block;
          height: 12em;
          width: 10em;
          margin: 1.5em 2em 1.5em 2em;
          border: none;
          }

.kaimg {
          height: 12em;
          width: 10em;
          border: 1px solid var(--border-color);
          }

.atext {
          color: var(--color-light);
          font-family: var(--font-family);
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          font-size: calc(var(--font-size) + 0.25rem);
          }
    

@media screen and (max-width: 30em) {
.abild {  margin: 1em 0.75em 1em 0.75em; }

.kaimg {
          height: 10em;
          width: 11em;
          }

.atext {  font-size: var(--font-size); }}
    
.overlay {
          position: absolute;
          transition: all .9s ease;
          opacity: 0;
          background: rgba(var(bgc-dark-rgb), 0.75);
          padding-right: 0;
          padding-left: 0;
          }
    
.abild:hover .overlay { opacity: 1; }

/* Text von links */    
.overlayLeft {
          height: 100%;
          width: 0;
          top: 0;
          left: 0;
          }
 
/* Text von rechts */   
.overlayRight {
          height: 100%;
          width: 0;
          top: 0;
          right: 0;
          }
    
.abild:hover .overlayLeft,
.abild:hover .overlayRight { width: 100%; }

/* Text von oben */    
.overlayTop {
          width: 100%;
          height: 0;
          top: 0;
          left: 0;
          }

/* Text von unten */    
.overlayBottom {
          width: 100%;
          height: 0;
          bottom: 0;
          left: 0;
          }
    
.abild:hover .overlayTop,
.abild:hover .overlayBottom {
          height: 100%;
          }

/* Text von schräg oben */   	 							
.overlayCross {
          width: 0;
          height: 0;
          top: 0;
          left: 0;
          }

.abild:hover .overlayCross {
          height: 100%;
          width: 100%;
          }

/* Text einblenden */    							
.overlayFade {
          height: 100%;
          width: 100%;
          top: 0;
          left: 0;
          }
 
/* Text aufklappen */   							
.overlayKlappen {
          top: 0;
          right: 0;
          left: 0;
          bottom: 0;
          transform: scaleY(0);
          }

.abild:hover .overlayKlappen { transform: scaleY(1); }