/* Logo */

/* Animation hier gesehen: https://www.drupal8-w3css-theme.flashwebcenter.com/ */

/*
@-webkit-keyframes site-name {
  0% {background-position: 200% 50%;}
  100% {background-position: 0% 50%;}
}
@keyframes site-name {
  0% {background-position: 200% 50%;}
  100% {background-position: 0% 50%;}
}
.user-logged-in h1.site-name {
  background-size: 200% 200%;
  animation: site-name 10s linear infinite;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-fill-color: transparent;

  / * ohne Hintergrundfarbe und nur der Gradient bis 100% interessanter Bannerverlauf * /
  background-color: transparent;
  background-image: -webkit-linear-gradient(45deg, #ffffff, #dddddd 100%);
  background-image: -moz-linear-gradient(to top right, #ffffff 0, #dddddd 100%);
  background-image: linear-gradient(to top right, #ffffff 0, #dddddd 100%);

  / * Regenbogen - Rot am Ende mehrmals wegen Animation* /
  background-color: #9037af;
  background-image: linear-gradient(45deg,#f44336,#f44336,#f44336,#f44336,#f44336,#e91e63,#9c27b0,#673ab7,#3f51b5,#2196f3,#87ceeb,#00bcd4,#00ffff,#009688,#4caf50,#8bc34a,#8bc34a,#8bc34a,#8bc34a,#4caf50,#009688,#00ffff,#00bcd4,#87ceeb,#2196f3,#3f51b5,#673ab7,#9c27b0,#e9$
} 
*/

/* ***************************************************** Startseite ************************* */

/* IE 10 + 11 unterstützen animation nicht in media queries -> raus */
.startseite /* #Seitenhintergrund */ #block-diashow div {position: absolute;position:fixed;height: 100%;width:100%;top: 0;left:0;}  
.startseite /* #Seitenhintergrund */ #block-diashow div {background-repeat:no-repeat;background-position:center center;background-size:cover;height:100%;width:100%;}
.startseite /* #Seitenhintergrund */ #block-diashow div {opacity:0; z-index:1; animation-play-state:running;
  -webkit-transition: opacity 2s ease; 
  transition: opacity 2s ease; 
}
.startseite/* #Seitenhintergrund */ #block-diashow div:nth-of-type(1) {z-index:2;opacity:1} /* zu Beginn sichtbar, falls alte Handy-Browser keine Animation machen */

/* Name Dauer Delay Anzahl-Zyklen Endpunktseinstellung */

/* 4 Bilder: */
.startseite /* animation-name  animation-duration  (animation-timing-function)  animation-delay  animation-iteration-count animation-direction */
.startseite /* #Seitenhintergrund */ #block-diashow div:nth-of-type(1) {animation: dia 60s 0s infinite;}
.startseite /* #Seitenhintergrund */ #block-diashow div:nth-of-type(2) {animation: dia 60s 15s infinite;}
.startseite /* #Seitenhintergrund */ #block-diashow div:nth-of-type(3) {animation: dia 60s 30s infinite;}
.startseite /* #Seitenhintergrund */ #block-diashow div:nth-of-type(4) {animation: dia 60s 45s infinite;}

/* Übergänge: */

  @-webkit-keyframes dia {
    0.01%, 24.99%  { z-index: 2; }
    25.01%, 100%  { z-index: 1; }
    0%, 100% { opacity: 0;}
    2.25%, 25% { opacity: 1 }
    27.25%, 100% { opacity: 0;}
  }
  @keyframes dia {
    0.01%, 24.99%  { z-index: 2; }
    25.01%, 100%  { z-index: 1; }
    0%, 100% { opacity: 0; }
    2.25%, 25% { opacity: 1 }
    27.25%, 100% { opacity: 0; }
  }

  .startseite main .diashow article {position: relative;}
  .startseite main .diashow article {z-index:1;opacity:0; animation-play-state:running;
      -webkit-transition: opacity 2s ease; 
      transition: opacity 2s ease; 
    }
  .startseite main .diashow article:nth-of-type(1) {z-index:2;opacity: 1;}
  /* Name Dauer Delay Anzahl-Zyklen Endpunktseinstellung */

  /* 4x Text: */
  .startseite main .diashow article:nth-of-type(1) {animation: text 40s 0s infinite;}
  .startseite main .diashow article:nth-of-type(2) {animation: text 40s 10s infinite;}
  .startseite main .diashow article:nth-of-type(3) {animation: text 40s 20s infinite;}
  .startseite main .diashow article:nth-of-type(4) {animation: text 40s 30s infinite;}

  /* Übergänge: */

@-webkit-keyframes text {
    0%, 100%  { z-index: 1; }
    0.01%, 25%  { z-index: 2; }
    0% { opacity: 0; }
    4% { opacity: 1; }
    21% { opacity:1; }
    25% { opacity:0; }
    100% { opacity: 0; }
    }
@keyframes text {
    0%, 100%  { z-index: 1; }
    0.01%, 25%  { z-index: 2; }
    0% { opacity: 0; }
    4% { opacity: 1; }
    21% { opacity:1; }
    25% { opacity:0; }
    100% { opacity: 0; }
    }

/* ************************************* Referenzen Bauprojekte **************************************** */
.bauprojekt .bilderset {position: relative; z-index: 2;}
.bauprojekt .diashow {position: relative; z-index: 2;}

.bauprojekt .bilderset figure {position:absolute;top:0;left:0;}

.bauprojekt .diashow .field_item {
  position:absolute;
  top:0;left:0;
}

.bauprojekt figure:nth-of-type(1) {position:relative;}
.bauprojekt .diashow .field_item:nth-of-type(1) {
  position:relative;
}

.bauprojekt .bilderset figure {opacity:0; z-index:1; animation-play-state:running;
/*  -webkit-transition: opacity 2s ease; transition: opacity 2s ease; */
}
.bauprojekt .diashow .field_item {opacity:0; z-index:1; animation-play-state:running;
/*  -webkit-transition: opacity 2s ease; transition: opacity 2s ease; */
}

.bauprojekt .bilderset figure:nth-of-type(1) {opacity:1;z-index:2;} /* zu Beginn sichtbar, falls alte Handy-Browser keine Animation machen */
.bauprojekt .diashow .field_item:nth-of-type(1) {opacity:1;z-index:2;} /* zu Beginn sichtbar, falls alte Handy-Browser keine Animation machen */

/* Name Dauer Delay Anzahl-Zyklen Endpunktseinstellung */

/* 4 Bilder: */

.bauprojekt:nth-of-type(4n) .bilderset figure:nth-of-type(1) {animation: referenzdia 40s 0s infinite;}
.bauprojekt:nth-of-type(4n) .bilderset figure:nth-of-type(2) {animation: referenzdia 40s 10s infinite;}
.bauprojekt:nth-of-type(4n) .bilderset figure:nth-of-type(3) {animation: referenzdia 40s 20s infinite;}
.bauprojekt:nth-of-type(4n) .bilderset figure:nth-of-type(4) {animation: referenzdia 40s 30s infinite;}

.bauprojekt:nth-of-type(4n+1) .bilderset figure:nth-of-type(1) {animation: referenzdia 40s -3s infinite;}
.bauprojekt:nth-of-type(4n+1) .bilderset figure:nth-of-type(2) {animation: referenzdia 40s 7s infinite;}
.bauprojekt:nth-of-type(4n+1) .bilderset figure:nth-of-type(3) {animation: referenzdia 40s 17s infinite;}
.bauprojekt:nth-of-type(4n+1) .bilderset figure:nth-of-type(4) {animation: referenzdia 40s 27s infinite;}

.bauprojekt:nth-of-type(4n+2) .bilderset figure:nth-of-type(1) {animation: referenzdia 40s -7s infinite;}
.bauprojekt:nth-of-type(4n+2) .bilderset figure:nth-of-type(2) {animation: referenzdia 40s 3s infinite;}
.bauprojekt:nth-of-type(4n+2) .bilderset figure:nth-of-type(3) {animation: referenzdia 40s 13s infinite;}
.bauprojekt:nth-of-type(4n+2) .bilderset figure:nth-of-type(4) {animation: referenzdia 40s 23s infinite;}

.bauprojekt:nth-of-type(4n+3) .bilderset figure:nth-of-type(1) {animation: referenzdia 40s -8s infinite;}
.bauprojekt:nth-of-type(4n+3) .bilderset figure:nth-of-type(2) {animation: referenzdia 40s 2s infinite;}
.bauprojekt:nth-of-type(4n+3) .bilderset figure:nth-of-type(3) {animation: referenzdia 40s 12s infinite;}
.bauprojekt:nth-of-type(4n+3) .bilderset figure:nth-of-type(4) {animation: referenzdia 40s 22s infinite;}

/* 4 Bilder neu: */

.bauprojekt:nth-of-type(4n) .diashow .field_item:nth-of-type(1) {animation: bauvorhaben 40s 0s infinite;}
.bauprojekt:nth-of-type(4n) .diashow .field_item:nth-of-type(2) {animation: bauvorhaben 40s 10s infinite;}
.bauprojekt:nth-of-type(4n) .diashow .field_item:nth-of-type(3) {animation: bauvorhaben 40s 20s infinite;}
.bauprojekt:nth-of-type(4n) .diashow .field_item:nth-of-type(4) {animation: bauvorhaben 40s 30s infinite;}

.bauprojekt:nth-of-type(4n+1) .diashow .field_item:nth-of-type(1) {animation: bauvorhaben 40s -3s infinite;}
.bauprojekt:nth-of-type(4n+1) .diashow .field_item:nth-of-type(2) {animation: bauvorhaben 40s 7s infinite;}
.bauprojekt:nth-of-type(4n+1) .diashow .field_item:nth-of-type(3) {animation: bauvorhaben 40s 17s infinite;}
.bauprojekt:nth-of-type(4n+1) .diashow .field_item:nth-of-type(4) {animation: bauvorhaben 40s 27s infinite;}

.bauprojekt:nth-of-type(4n+2) .diashow .field_item:nth-of-type(1) {animation: bauvorhaben 40s -7s infinite;}
.bauprojekt:nth-of-type(4n+2) .diashow .field_item:nth-of-type(2) {animation: bauvorhaben 40s 3s infinite;}
.bauprojekt:nth-of-type(4n+2) .diashow .field_item:nth-of-type(3) {animation: bauvorhaben 40s 13s infinite;}
.bauprojekt:nth-of-type(4n+2) .diashow .field_item:nth-of-type(4) {animation: bauvorhaben 40s 23s infinite;}

.bauprojekt:nth-of-type(4n+3) .diashow .field_item:nth-of-type(1) {animation: bauvorhaben 40s -8s infinite;}
.bauprojekt:nth-of-type(4n+3) .diashow .field_item:nth-of-type(2) {animation: bauvorhaben 40s 2s infinite;}
.bauprojekt:nth-of-type(4n+3) .diashow .field_item:nth-of-type(3) {animation: bauvorhaben 40s 12s infinite;}
.bauprojekt:nth-of-type(4n+3) .diashow .field_item:nth-of-type(4) {animation: bauvorhaben 40s 22s infinite;}

/* Übergänge: */

@-webkit-keyframes referenzdia {
    0.01%, 25%  { z-index: 2; }
    25.01%, 100%  { z-index: 1; }

    0% { opacity: 0.5; }
    2% { opacity: 0.75; }
    4% { opacity: 1; }
    25% { opacity:1; }
    27% { opacity: 0.5; }
    29% { opacity:0; }
    100% { opacity: 0; }
}
@keyframes referenzdia {
    0.01%, 25%  { z-index: 2; }
    25.01%, 100%  { z-index: 1; }

    0% { opacity: 0.2; }
    2% { opacity: 0.75; }
    4% { opacity: 1; }
    25% { opacity:1; }
    29% { opacity:0; }
    100% { opacity: 0; }
}


@-webkit-keyframes bauvorhaben {

    0.01%, 25%  { z-index: 2; }
    25.01%, 100%  { z-index: 1; }

    0% { opacity: 0; }
    4% { opacity: 1; }
    23% { opacity:1; }
    25% { opacity: 1; }
    33% { opacity:0; }
    100% { opacity: 0; }
}
@keyframes bauvorhaben {

    0.01%, 25%  { z-index: 2; }
    25.01%, 100%  { z-index: 1; }

    0% { opacity: 0; }
    4% { opacity: 0.75; }
    23% { opacity:1; }
    25% { opacity: 1; }
    33% { opacity:0; }
    100% { opacity: 0; }
}


/* ************************** grundrisse, ansichten, lagepläne, ... ********************* */
/* Danke: http://stackoverflow.com/questions/21647389/implement-a-css-only-slideshow-carousel-with-next-and-previous-buttons  * */
/* ************************************************************************** */


/* ************************ Übersichtsseite: Zoom in bei Hover ******************************************** */
/* Danke an: https://stackoverflow.com/questions/15757036/creating-a-zoom-effect-on-an-image-on-hover-using-css ** */

body[class*="angebot"] .zoom_in_bei_hover figure {
  /* width: 100%; */
  /* height: 100%; */
  overflow:hidden;
}

body[class*="angebot"] .zoom_in_bei_hover figure img {
  -webkit-transition: all 1.5s ease; /* Safari and Chrome */
  -moz-transition: all 1.5s ease; /* Firefox */
  -ms-transition: all 1.5s ease; /* IE 9 */
  -o-transition: all 1.5s ease; /* Opera */
  transition: all 1.5s ease;
}

 
body[class*="angebot"] .zoom_in_bei_hover figure:hover img {

  -webkit-transform:scale(1.1); /* Safari and Chrome */
  -moz-transform:scale(1.1); /* Firefox */
  -ms-transform:scale(1.1); /* IE 9 */
  -o-transform:scale(1.1); /* Opera */
  transform:scale(1.1);
}