body{
  hyphens: auto;
  word-wrap: break-word;
}

.invisible{
  color: transparent;
}

.baustellen-seite{
  text-align: center;
  margin-top: 15rem;
  font-weight: 900;
  font-size: 3rem;
  padding: 1rem;
  font-family: 'Architects Daughter', cursive;
}

.baustellen-seite p{
  font-family: 'Architects Daughter', cursive;
}
/*------------------------------------------------------------------------------------------------------------------*/

/*START "Kunst" Unterseiten"  */
.flip-card {
  background-color: transparent;
  width: 100%; 
  height: 300px;
  perspective: 1000px;
  margin-bottom: 3rem;
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 120%;
  text-align: center;
  transition: transform 0.6s;
  transform-style: preserve-3d;
  box-shadow: 0 0.25rem 0.5rem 0  rgba(237, 137, 41, 0.651);
}

.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;

  /* background-color: red; */
  top: -1rem;
  right: 0.1rem;
  text-align: center;
}

.flip-card-front div:first-of-type{
  /* background-color: red; */
  margin-top: -0.5rem;
  padding: 0;
}

.flip-card-back {
  background-color: #ecc096;
  color: #441212;
  font-weight: bolder;
  transform: rotateY(180deg);
}

.flip-card-quer div:first-of-type img{
  margin-top: 2rem;
}

.kastanien-back-karte{
  margin-top: 4rem;
}

.flip-card-hoch-blumentopf{
  height: 415px;
}

.oelgemaelde-content .flip-card:last-of-type{
  /* background-color: red; */
  margin-bottom: 8rem;
}

/* ENDE "Kunst" Unterseiten" */










#wrap{ overflow:hidden; padding:3%; }

/* #pbOverlay.show ~ #wrap{ -webkit-filter:blur(2px) grayscale(.4); } */
		
#gallery{ padding:20px; }
	
#gallery li{ list-style:none; perspective:100px; -webkit-perspective:100px; margin:1px; float:right; position:relative; transition:.1s; -webkit-transition:0.1s; }
		
#gallery li.video::before{ content:'\25BA'; color:#FFF; font-size:20px; height:20px; width:20px; line-height:0.9; position:absolute; bottom:3px; left:4px; z-index:1; background:rgba(0,0,0,0.4); box-shadow:0 0 0 3px rgba(0,0,0,0.4); border-radius:0 3px 0 0; pointer-events:none; opacity:0; transition:.5s 0.2s; }
	
#gallery li.loaded.video::before{ opacity:1; }
	
#gallery a{ display:block; width:75px; height:68px; overflow:hidden; background:rgba(0,0,0,0.1);
					transition:.4s ease-out; -webkit-transition:0.4s ease-out; -webkit-transform:rotateX(90deg) translate(-50px,-50%); transform:rotateX(90deg) translate(-50px,-50%); }
	
#gallery a:active, #gallery a:focus{ outline:none; }
		
#gallery a img{ min-height:100%; width:100%; transition:.3s ease-out; -webkit-transition:0.3s ease-out; }
	
#gallery .loaded a{ -webkit-transform:rotateX(0deg) translate(0,0); transform:rotateX(0deg) translate(0,0); }
		
#gallery li.loaded:hover{ z-index:2; transform:scale(1.5); -webkit-transform:scale(1.5); }
		
#gallery li.loaded a:hover{ box-shadow:0 0 0 2px #FFF, 0 0 20px 5px #000; transition:.1s; -webkit-transition:0.1s; }
		
#gallery li.loaded:hover img{ transform:scale(1.2); -webkit-transform:scale(1.2); }
		
#gallery li.loaded.video:hover::before{ opacity:0; }
























/* xxxxxxxxxxxxxxxxxxCode Kunst Startseitexxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/
.Kunstausstellung {
  margin: 0 auto;
  box-shadow: 0.3125rem 0.625rem 0.625rem rgba(237, 137, 41, 0.651);
  width: 67vw;
}

.p{
  position: relative;
  top: 0;
  width: 67vw;
  margin: auto; 
} 

.galerie1 {
  position: absolute;
  top: 20%;
  left: 2.0%;
  height: 27%;
}
  
.galerie2 {
  position: absolute;
  top: 26.1%;
  left: 23.2%;
  height: 15.2%;
}
 
.galerie3 {
  position: absolute;
  top: 28.1%;
  left: 36.15%;
  height: 11.5%;
}
 
.galerie4 {
  position: absolute;
  top: 28%;
  left: 51.75%;
  height: 14%;
}
 
.galerie5 {
  position: absolute;
  top: 27.75%;
  right: 23.4%;
  height: 11.5%;
}
 
.galerie6 {
  position: absolute;
  top: 18.79%;
  right: 0%;
  height: 26.87%;
}
 
.galerie7 {
  position: absolute;
  top: 39.7%;
  right: 40.8%;
  height: 23%

}
/* xxxxxxxxxxxxxxxxxxxxxENDE Code Kunst Startseitexxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */





/* xxxxxxxxxxxxxxxxxxxxxPublikation Seitexxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */
.buechercover-publikationen img{
  margin: 0 auto;
  margin-top: 5rem;
  margin-bottom: 5rem;
  padding: 1rem;
  box-shadow: 0 14px 2px -2px rgba(237, 137, 41, 0.651);
}

.publikationen{
  margin: 0 auto;
  padding: 1rem;
  /* margin: 1rem; */
  margin-left: 1rem;
  margin-top: 4rem;
}

.publikationen img{
  margin: 0 auto;
  margin-bottom: 3rem;
  box-shadow: 0.75rem 0.75rem 0.75rem rgba(237, 137, 41, 0.651);
}

.publikationen h3{ 
    font-size: 2rem;
    /* background-color: blue; */
    display: inline-block;
    width: 100%;
    margin-top: 5rem;
    /* background-color: red; */
}

.publikationen-lebensgeschichten .heading-lg-screen,
.publikationen-unternehmensgeschichte .heading-lg-screen,
.publikationen-ausstellungswesen .heading-lg-screen{
  display: none;
}

.lebensgeschichten.auftragsbiografien{
  margin-top: 4rem;
}




/* *************************** */
.lebensgeschichten-list,
.archäologie-list,
.dokumentation-list,
.ethnologie-list,
.geschichte-list,
.unternehmensgeschichte-list,
.medizingeschichte-list,
.belletristik-list,
.ausstellungswesen-list{
  padding: 0;
}

.lebensgeschichten li,
.archäologie-list li,
.dokumentation-list li,
.ethnologie-list li,
.geschichte-list li,
.unternehmensgeschichte-list li,
.medizingeschichte-list li,
.belletristik-list li,
.belletristik-buecher-list li,
.ausstellungswesen-list li{
  padding-left: 1.3em;
  padding-left: 5rem;
}

.lebensgeschichten li:before,
.archäologie-list li:before,
.dokumentation-list li:before,
.ethnologie-list li:before,
.geschichte-list li:before,
.geschichte-co-autorin-list li:first-child:before,
.unternehmensgeschichte-list li:before,
.medizingeschichte-list li:before,
.belletristik-list li:before,
.ausstellungswesen-list li:before{
  content: "\f15b"; /* FontAwesome Unicode */
  font-family: FontAwesome;
  display: inline-block;
  margin-left: -0.85em; /* same as padding-left set on li */
  width: 1em; /* same as padding-left set on li */
}

.lebensgeschichten li:first-child:before,
.auftragsbiografien li:before,
.archäologie-list li:nth-child(4):before,
.archäologie-list li:nth-child(5):before,
.ethnologie-list li:nth-child(10):before,
.ethnologie-list li:nth-child(11):before,
.geschichte-list li:nth-child(1):before,
.geschichte-list li:nth-child(2):before,
.geschichte-list li:nth-child(3):before,
.geschichte-list li:nth-child(4):before,
.geschichte-co-autorin-list li:before,
.unternehmensgeschichte-list li:nth-child(6):before,
.unternehmensgeschichte-list li:nth-child(7):before,
.unternehmensgeschichte-list li:nth-child(8):before,
.belletristik-buecher-list li:before,
.ausstellungswesen-list li:nth-child(2):before,
.ausstellungswesen-list li:nth-child(3):before,
.ausstellungswesen-list li:nth-child(4):before,
.ausstellungswesen-list li:nth-child(5):before,
.ausstellungswesen-list li:nth-child(6):before,
.ausstellungswesen-list li:nth-child(7):before,
.ausstellungswesen-list li:nth-child(8):before,
.ausstellungswesen-list li:nth-child(9):before,
.ausstellungswesen-list li:nth-child(10):before{
  content: "\f02d"; /* FontAwesome Unicode */
  font-family: FontAwesome;
  display: inline-block;
  margin-left: -0.85em; /* same as padding-left set on li */
  width: 1em; /* same as padding-left set on li */
}
/* *************************** */

.geschichte-heading{
  margin-top: 5rem;
}


/* xxxxxxxxxxxxxxxxxxxxxENDE Publikation Seitexxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */


/*** Ausstellungswesen Seite ***/
.ausstellungswesen-lg-screen,
.lebensgeschichte-lg-screen,
.medizingeschichte-lg-screen,
.unternehmensgeschichte-lg-screen{
  display: none;
}
/*** Ausstellungswesen Seite ***/


/***UEBER MICH SEITE***/
.ueber-mich{
  margin-top: 5rem;
  box-shadow: 
  inset 0rem 0.6875rem 0.5rem -0.625rem #ed8929,
  inset 0rem -0.6875rem 0.5rem -0.635rem #ed8929; 
  border-radius: 1rem;
  padding: 1rem;
}

.ueber-mich div li{
  margin: 0 auto;
}

.ueber-mich-image img{
  margin: 0 auto;
  margin-top: 5rem;
  margin-bottom: 2.5rem;
  box-shadow: 0.3125rem 0.625rem 0.625rem rgba(237, 137, 41, 0.651);
  min-width: 240px;
  min-height: 450px;
  max-width: 240px;
  max-height: 450px;
}

.unterpunkte-ueber-mich{
  margin-left: 5rem;
}
/***ENDE UEBER MICH SEITE***/


/*** GALERIE SEITE ***/
.flags{
  width: 18%;
  margin: 0 auto;
  margin-top: 12%;
  box-shadow: 0.5rem 0.5rem 0.625rem rgba(237, 137, 41, 0.651);
}

.world_flags{
  display: flex;
  margin-top: 3rem;
  padding-top: 5rem;
}


.worldmap{
  margin: 0 auto;
  width: 52vw;
  box-shadow: 0.9375rem 1.25rem 1.815rem rgba(237, 137, 41, 0.651);
 }
/*** GALERIE SEITE ***/




/*** SART KOSTPROGEN SEITE ***/
.kostproben_links{
  color: #441212;
}


.lese-kostproben{
  text-align: center;
  max-width: 90%;
  margin: 0 auto;
  margin-top: 1.5rem;
  padding: 1rem;
  margin-bottom: 1.5rem;
}

.kostproben-intro,
.kostproben_links
{
  max-width: 50rem;
  margin: 0 auto;
}

.kostproben-intro{
  margin-bottom: 3rem;
}

/* .kostproben_links a{
  display: inline-block;
  color: rgb(88, 88, 219);
  margin-bottom: 0.5rem;
} */

.kostproben_links a:last-of-type{
  margin-bottom: 3.5rem;
}

.kostproben_links a:hover{
  color: #441212;
  transition: all 0.2s ease-in-out;
}



.kostproben_links a{
  display: inline-block;
  padding: 0.5rem;
  font-weight: bold;  
  border-bottom: 0.5rem solid rgba(237, 137, 41, 0.651);
  border-right: 0.4rem solid rgba(237, 137, 41, 0.651);
  border-top: 0.01rem solid rgba(237, 137, 41, 0.651);
  padding-right: 0.5rem;
  background-color: #ffcd9f;
  width: 100%;
  -moz-border-radius: 80px 40px 40px 80px;
  border-radius: 80px 40px 40px 80px;
  -webkit-transition: border-top-left-radius 0.5s ease, border-top-right-radius 1s ease,
  border-bottom-left-radius 2s ease, border-bottom-right-radius 3s ease;
  -moz-transition: -moz-border-radius-topleft 0.2s ease, -moz-border-radius-topright 1s ease,
  -moz-border-radius-bottomleft 2s ease, -moz-border-radius-bottomright 3s ease;
  -o-transition: border-top-left-radius 0.2s ease, border-top-right-radius 1s ease,
  border-bottom-left-radius 2s ease, border-bottom-right-radius 3s ease;
  transition: border-top-left-radius 0.2s ease, border-top-right-radius 1s ease,
  border-bottom-left-radius 2s ease, border-bottom-right-radius 3s ease;
  margin-bottom: 3rem;
  /* max-width: 100rem; */
  max-width: 25rem;
}

.kostproben_links a:hover{
  -moz-border-radius: 2.5rem 5rem 5rem 2.5rem;
  border-radius: 2.5rem 5rem 5rem 2.5rem; 
  cursor: pointer;
  text-decoration: underline;
  /* color: rgb(88, 88, 219); */
}


.weißes-mädchen h3,
.weißes-mädchen .first-image{
  margin-top: 2rem;
  font-size: 1.5rem;
}

.weißes-mädchen h3{
  margin-bottom: initial;
  padding: 0.5rem;
  /* box-shadow: 
  inset 0rem 0.6875rem 0.5rem -0.625rem #ed8929,
  inset 0rem -0.6875rem 0.5rem -0.635rem #ed8929; 
  border-radius: 1rem;
  display: inline; */
}

.weißes-mädchen .weißes-mädchen-img .images img{
  margin: 0 auto;
  margin-bottom: 3rem;
  /* margin-right: 0.5rem; */
}

.bruder-schwester{
  text-align: left;
}

.bruder-schwester h3{
  text-align: center;
  margin-top: 2rem;
  margin-bottom: initial;
  padding: 0.5rem;
  font-size: 1.5rem;
  /* background-color: red */
  /* box-shadow: 
  inset 0rem 0.6875rem 0.5rem -0.625rem #ed8929,
  inset 0rem -0.6875rem 0.5rem -0.635rem #ed8929; 
  border-radius: 1rem;
  display: inline-block; */
}

.bruder-schwester p:first-of-type{
  margin-top: -0.5rem;
}

.bruder-schwester p{
  margin-bottom: 0.5rem;
}

.bruder-schwester .red{
  color: red;
  font-weight: bold;
}
/*** ENDE KOSTPROBEN SEITE ***




/***NEWS SEITE***/
.news{
  margin: 0 auto;
  margin-top: 5rem;
  margin: 0.5rem;
}

.news-list li{
  box-shadow: 
  inset 0rem 0.6875rem 0.5rem -0.625rem #ed8929,
  inset 0rem -0.6875rem 0.5rem -0.635rem #ed8929; 
  border-radius: 1rem;
  padding: 1rem;
  margin-top: 2rem;
}

.news-list li a{
  display: inline-block;
  color: rgb(88, 88, 219);
}

.news-list li a:hover{
  /* text-decoration: underline 0.3rem solid #ff7c01; */
  color: #441212;
  transition: all 0.2s ease-in-out;
}

.news-footer{
  margin-top: 25rem;
}

.literatur-fabrik-news{ /************************news Seite (26. Juni bringt den Text oben links neben das Bild) ************************/
  vertical-align: text-top;
}

.news-image li{
  box-shadow: 0px 0px transparent;
  /* background-color: red; */
  text-align: center;
}
/***ENDE NEWS SEITE***/


.gemaelde-index{
  margin: 0 auto;
  margin-top: 10rem;
  padding: 1rem;
}

.gemaelde-index h3{
  font-size: 2rem;
  text-align: center;
}

.gemaelde-index a,
.publikationen a h3{
  color: #441212;
  display: inline-block;
}

.gemaelde-index a:hover,
.publikationen a h3:hover{
  text-decoration: underline 0.3rem solid #ed8929;
}




/*****************************Bilder ZAPPELN***********************/
      /* .publikationen img:hover{
          animation: shake 0.5s;
          animation-iteration-count: 0.1s;
      }
      @keyframes shake {
        0% { transform: translate(1px, 1px) rotate(0deg); }
        10% { transform: translate(-1px, -2px) rotate(-1deg); }
        20% { transform: translate(-3px, 0px) rotate(1deg); }
        30% { transform: translate(3px, 2px) rotate(0deg); }
        40% { transform: translate(1px, -1px) rotate(1deg); }
        50% { transform: translate(-1px, 2px) rotate(-1deg); }
        60% { transform: translate(-3px, 1px) rotate(0deg); }
        70% { transform: translate(3px, 1px) rotate(-1deg); }
        80% { transform: translate(-1px, -1px) rotate(1deg); }
        90% { transform: translate(1px, 2px) rotate(0deg); }
        100% { transform: translate(1px, -2px) rotate(-1deg); }
      } */
/*****************************Bilder ZAPPELN***********************/

.gemaelde-index-content div{
  margin-left: auto;
  margin-right: auto;
}

.gemaelde-index-content h4{
  padding-top: 3rem;
  padding-left: 1rem;
  width: 100%;
  font-size: 2rem;
}

.gemaelde-index img{
  margin: 0 auto;
  margin-top: 1rem;
}

/* Kunst Seite */
  .kunst-gemaelde{
    margin-top: -2rem;
  }
/* ENDE Kunst Seite */

/********************************************************* general styling */
    html{
        background-color: #f8cea7;
        font-family: Arial, Helvetica, sans-serif;
    }

    .inner-container{
        padding: 1rem;
    }

    a{
        text-decoration: none;
        display: block;
        color: #441212;
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6{
      font-family: 'Architects Daughter', cursive;
      color: #441212;
    }
/********************************************************* End general styling */

/*********************************************************MENU***/
svg{
    width: 1rem;
}

/* Hide "h1" in Menu */
.visually-hidden{
    clip: rect(0.0625rem, 0.0625rem, 0.0625rem, 0.0625rem); /***1rem***/
    clip-path: inset(50%);
    height: 0.0625rem;
    width: 0.0625rem;
    margin: -0.0625rem;
    overflow: hidden;
    padding: 0;
    position: absolute;
}
/* END "h1" in Menu */

/********************* header *********************/
header{
    background-color: #ecc096;
    box-shadow: 0.3125rem 0.625rem 0.625rem rgba(237, 137, 41, 0.651);
}

.logo{
  display: none;
}

.menu-icon{
    cursor: pointer;
    margin-left: auto;
}

.menu-icon span{
    display: block;
    background-color: #ed8929;
    width: 3rem;
    height: 0.5rem; /***8px***/
    border-radius: 6.25rem; /***100px***/
    margin-bottom: 0.375rem; /***6px***/
    position: relative; /***for getting the 'x' to work when clicking it***/
    transition: all 0.4s ease-in-out;
}

.menu-icon p{
    text-align: center;
    margin-bottom: 0;
}

/***toggle effect 'x' ***/
/*** remove the top span element - just during the active state (when we pressed the toggle icon)***/
.menu-icon:hover span{
    background:  linear-gradient(to right, #ed8929 0%, #ffcd9f 51%, #ed8929  100%);
    transition: background 0.3s ease-in-out;
    background-size: 200%;
    background-position: right center;
}

.active-nav .menu-icon span:first-child{
    display: none;
}

/***rotating the remaining two <span> ***/
.active-nav .menu-icon span:nth-child(2){
    transform: rotate(-45deg);
    top: 0.5rem; /***8px***/
}

.active-nav .menu-icon span:nth-child(3){ /***or use last-of-type ***/
    transform: rotate(45deg);
    bottom: 0.3125rem; /***5px***/
}
/***end toggle effect 'x' ***/

.sm-flex{
    display: flex;
    align-items: center; 
    justify-content: space-between;
}

/*** Step 1: style the li and a tags before hiding them ***/
nav{
   position: absolute; /***take out the <nav> of normal document flow; so we can hide it***/
   left: 0; /***start from the left***/
   width: 100vw; /***over the full view port ***/

   /***hiding the nav***/
   max-height: 0;
   overflow: hidden; /***hides the rest of the content***/
   transition: all 0.4s ease-in-out;
   z-index: 1;
   box-shadow: 0.3125rem 0.625rem 0.625rem rgba(237, 137, 41, 0.651);
   background-color: #ecc096; /***************FARBE**********************/
}

/***special JavaScript class is append the header and to hide and the show the menu we apply to the nav ***/
.active-nav nav{ /***.active-nav is applied to the <header> by JS when toggle button is clicked ->  ***/
    max-height: 200vh; /***-> this is applied to the nav when the 'active-nav' class is applied to the header ***/ /*****-------------------------------------------------------------------------------------100bh*******/
}

.main-menu li{
    margin: 0 1.5625rem; /***25px***/
    line-height: 3rem; /***85px --> 5.3125rem***/ /***------------height of the links in the menu----------------------------------------------------******/
    white-space: nowrap; /***if text is to long to keep it in one line ***/
    border-bottom: 0.0625rem solid #ed8929;
}

/* removes the last border for the sub-menu/dropdown */
.main-menu li:last-of-type{ /***.dropdown-menu li:last-of-type***/
    border-bottom: none;
}

.main-menu a{
    font-size: 1.15rem; /***24px***/ /***this targets ALL links within the header ***/
    text-transform: uppercase;
    font-weight: 700; /***bold***/
    padding-left: 0.625rem; /***10px***/
    margin-right: 100%;
}

/***show the dropdown menu on hover***/
.main-menu li:hover > .dropdown-menu{ /***hover over the .main-menu li (first tier) > apply the following commands for the .dropdown-menu ***/
    visibility: visible;
    max-height: 100vh; /***so it expands as much as it can (as much as it has content for)***/
}

a.first-link {
    display: flex; /***this and margin:auto (line: 141) to display the chevron to the very right ***/
}

ul.dropdown-menu{
    background-color: #ecc096; 
}

/***hiding sub-menu***/
.dropdown-menu{
    visibility: hidden;
    max-height: 0;
    transition: all 0.4s ease-in-out;
}

.dropdown-menu a{
    text-transform: none;
    /* color: #363b74; */
    color: #ed8929;
    font-size: 1.125rem; /***targets only the dropdown links ***/
    font-weight: 400; /***thinner***/
}

/***Focus State for Menu***/
.main-menu li:focus-within > ul, 
.main-menu li > ul:focus{
    visibility: visible;
    opacity: 1;
    display: block;
    max-height: 100vh; /***100***/
} 




/*** adding in HOVER state for MENU ***/
nav ul li a{
    display: inline-block;
    color: #441212;
    border-bottom: 0.5rem solid rgba(237, 137, 41, 0.651);
    border-right: 0.4rem solid rgba(237, 137, 41, 0.651);
    padding-right: 0.5rem;
    background-color: #ffcd9f;
    width: 100%;
    -moz-border-radius: 80px 40px 40px 80px;
    border-radius: 80px 40px 40px 80px;
    -webkit-transition: border-top-left-radius 0.2s ease, border-top-right-radius 1s ease,
    border-bottom-left-radius 2s ease, border-bottom-right-radius 3s ease;
    -moz-transition: -moz-border-radius-topleft 0.2s ease, -moz-border-radius-topright 1s ease,
    -moz-border-radius-bottomleft 2s ease, -moz-border-radius-bottomright 3s ease;
    -o-transition: border-top-left-radius 0.2s ease, border-top-right-radius 1s ease,
    border-bottom-left-radius 2s ease, border-bottom-right-radius 3s ease;
    transition: border-top-left-radius 0.2s ease, border-top-right-radius 1s ease,
    border-bottom-left-radius 2s ease, border-bottom-right-radius 3s ease;
}

nav ul li a:hover{
    -moz-border-radius: 40px 80px 80px 40px;
    border-radius: 40px 80px 80px 40px;
}


/***hover state for dropdown menu***/
.dropdown-menu li a{
    padding-right: 0.5rem;
    display: inline-block;
    color: #441212;
    border-bottom: 0.5rem solid rgba(237, 137, 41, 0.651);
}
/* 
/********************************************************** END adding in HOVER state for MENU */


/*********************************************************banner (index.html)***/
.banner h2{
    text-align: center;
    margin-top: 1.5rem;
    padding-left: 1rem;
    padding-right: 1rem;
    font-family: 'Architects Daughter', cursive;
    font-size: 2.75rem;
    word-wrap: break-word;
}

.fly-in{
    display: none;
}
/*********************************************************END BANNER***/


/* STYLING INDEX.HTML */
/*********************************************************HIDING BOOK ANIMATION***/
.scene{
  display: none;
}
/*********************************************************END HIDING BOOK ANIMATION***/

.scene-small-screen{
  padding: 1rem;
  margin: 5rem 0.5rem 0rem 0.5rem;
  box-shadow: 15px 10px 15px 10px rgba(237, 137, 41, 0.2);
}

.scene-small-screen img{
  margin: 0 auto;
  margin-bottom: 1rem;
}


.scene-small-screen-text{
  text-align: center;
  padding-left: 1rem;
  margin-right: 1rem;
}

.scene-small-screen-text h2{
  text-align: center;
  margin-bottom: 0.25rem;
  font-family: Arial, Helvetica, sans-serif;
}



/**********************************INDEX SEITE START **********************************/
.kostproben{
  text-align: center;
  margin-bottom: 5rem;
}

.kostproben a{
  font-family: Arial, Helvetica, sans-serif;
  padding: 0.25rem; /*1rem*/
  padding-left: 0.5rem;
  font-size: 1.75rem;
  /* adding hover effect */
  /* display: inline-block; */
  display: inline;
  color: #441212;
  /* font-weight: bold; */
  border-bottom: 0.5rem solid rgba(237, 137, 41, 0.651);
  border-right: 0.4rem solid rgba(237, 137, 41, 0.651);
  /* border-top: 0.10rem solid rgba(237, 137, 41, 0.651); */
  padding-right: 0.5rem;
  background-color: #ffcd9f;
  width: 100%;
  -moz-border-radius: 80px 40px 40px 80px;
  border-radius: 80px 40px 40px 80px;
  -webkit-transition: border-top-left-radius 0.2s ease, border-top-right-radius 1s ease,
  border-bottom-left-radius 2s ease, border-bottom-right-radius 3s ease;
  -moz-transition: -moz-border-radius-topleft 0.2s ease, -moz-border-radius-topright 1s ease,
  -moz-border-radius-bottomleft 2s ease, -moz-border-radius-bottomright 3s ease;
  -o-transition: border-top-left-radius 0.2s ease, border-top-right-radius 1s ease,
  border-bottom-left-radius 2s ease, border-bottom-right-radius 3s ease;
  transition: border-top-left-radius 0.2s ease, border-top-right-radius 1s ease,
  border-bottom-left-radius 2s ease, border-bottom-right-radius 3s ease;
}

.kostproben a:hover{
  -moz-border-radius: 40px 80px 80px 40px;
  border-radius: 40px 80px 80px 40px;
}




/**************INDEX -- VORSTELLEN  ****************/
.index-vorstellen{
   margin-top: 5rem;
   margin-left: 1rem;
   margin-right: 1rem;
}

.index-vorstellen div:nth-of-type(2),
.index-vorstellen div:nth-of-type(3){
  margin-top: 2rem;
}

.index-vorstellen div:nth-of-type(3){
  margin-bottom: 5rem;
}

.index-vorstellen div{
  box-shadow: /***box-shadow top and bottom***/
  inset 0rem 0.6875rem 0.5rem -0.625rem #ed8929,
  inset 0rem -0.6875rem 0.5rem -0.635rem #ed8929; 
  border-radius: 1rem;
  padding: 1rem;
}
/**************ENDE INDEX -- VORSTELLEN  ****************/

/**********************************INDEX SEITE START **********************************/


/************************************************ VIDEO STYLING ***/
  .video{
    padding: 0.5rem;
    text-align: center;
    margin-top: 3rem;
  }

  .video-index{
    width: 100%;
    height: 15rem;
  }

  .video h2,
  .video h3{
    font-family: 'Architects Daughter', cursive;
  }

  .flammentod-vorstellung{
    margin-bottom: 2rem;
  }

  .video-beschreibung{
    text-align: left;
    padding-top: 1rem;
    margin: 0 auto;
  }  
/************************************************ END VIDEO STYLING***/


/* VIDEO SEITE */
.video-page{
  box-shadow: 
  inset 0rem 0.6875rem 0.5rem -0.625rem #ed8929,
  inset 0rem -0.6875rem 0.5rem -0.635rem #ed8929; 
  border-radius: 1rem;
  margin-top: 3rem;
  background-color: #ecc096;
}

.video-page iframe{
  padding: 0.5rem;
  border-radius: 1rem;
}

.video-page p{
  /* width: 180ch; */
  padding-right: 0.5rem;
  padding-left: 0.5rem;
  padding: 1rem;
  margin: 0 auto;
}
/* ENDE VIDEO SEITE */


/************************************************ END INDEX.HTML Forschungsreisen***/
  /* BILDER FUER FORSCHUNGSREISE */
  .forschungsreisen-bilder .books__book__img{
    width: 15rem; /***20rem***/
    margin-left: 2rem;
  }

  .forschungsreisen-bilder .books__book__img img{
    width: 15rem; /***20rem***/
    height: 10.125rem; /***12***/
  }
  /* ENDE  BILDER FUER FORSCHUNGSREISE */
/************************************************ END INDEX.HTML Forschungsreisen***/

/************************************************Bookcover index.html***/
.bookcover-content{
  margin-top: 2rem;
  padding: 1rem;
}

.bookcover-content img{
  box-shadow: 0.3125rem 0.625rem 0.625rem rgba(237, 137, 41, 0.651);
  margin: 0 auto;
  margin-bottom: 2.5rem;
}

.buchinhalt{
  font-size: 1.5rem;
}

.parallax-img{
  display: none;
}

.parallax-effect{
  position: relative;
  text-align: center;
}

.parallax-effect h2{
  display: none;
}

.parallax-effect p{
  font-size: 1.25rem;
  font-weight: bold;
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%; /***85%***/
  padding: 1rem;
  font-family: 'Architects Daughter', cursive;
}

.parallax-text a{
  color: #441212;
  display: inline-block;
}

.parallax-text a:hover{
  text-decoration: underline 0.3rem solid #ed8929;
}

/*** Center the book ***/
.panel__image.panel__image--book,
.publikationen img{
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    top: 60px;
}

.article__content a:not(.btn):not(.toolbar-item){
	color: #006fc6;
}

.product-panel--book .panel__image--book img{
	width: 100% !important;
}

.books__book__img{
	width: 10rem;
	will-change: transform;
	transform-origin: 0 100%;
	transform: rotate(-10deg);
	transition: transform 0.3s ease-out;
  margin-top: 10rem;
  /* margin-left: 5rem; */
}


.publikationen img{
  will-change: transform;
	transform-origin: 0 100%;
	transform: rotate(-10deg);
	transition: transform 0.3s ease-out;
}

.books__book__img img{
  width: 10rem;
  height: 15rem;
  margin-left: 2rem;
  margin: 0 auto;
  box-shadow: 5px 5px 5px 5px rgba(237, 137, 41, 0.4);
}

.books__book__img a{
  display: inline-block;
}

.books__book__img:hover,
.publikationen img:hover{
    transform: rotate(0);
}

.author__image-wrapper::before,
.books__book__image::before{
    display: block;
    content: "";
    height: 20%;
    width: 45%;
    position: absolute;
    /* background-image: url(https://i.imgur.com/5udcDlp.png); */
    background-size: 100% auto;
    background-repeat: no-repeat;
    top: 84%;
    left: 35%;
    right: 0;
    transition: all 0.2s ease-out;
    transform-origin: 30% 50%;
    pointer-events: none;
}

.books__book__image:hover {
    position: relative;
}
/************************************************END Bookcover index.html***/


/************************************************MODAL IMAGE POP UP***/
.modal-images img{
  /* margin: 2rem auto; */
  cursor: pointer;
}

.modal {
  z-index: 1;
  display: none;
  padding-top: 0.625rem;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgb(0,0,0);
  background-color: rgba(0,0,0,0.8);
}
  
.modal-content{
  margin: auto;
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.modal-hover-opacity{
  opacity: 1;
  filter: alpha(opacity=100);
  /* -webkit-backface-visibility:hidden; */
}
  
.modal-hover-opacity:hover{
opacity: 0.60;
filter: alpha(opacity=60);
/* -webkit-backface-visibility: hidden; */
}

.close {
    text-decoration:none;float:right;font-size:24px;font-weight:bold;color:white;
    cursor: pointer;
}

@-webkit-keyframes zoom {
    from {-webkit-transform:scale(0)} 
    to {-webkit-transform:scale(0.5)}
}

@keyframes zoom {
    from {transform:scale(0)} 
    to {transform:scale(0.5)}
}
/************************************************END MODAL IMAGE***/

/************************************************FOOTER STYLING***/
footer{
  padding: 1rem;
  display: flex;
  flex-direction: column;
  margin: 0.5rem;
  margin-bottom: 1rem;
  background-color: #ecc096;
  margin-top: 10rem;
}

.footer-links a{
  font-size: 1.15rem; /***24px***/ /***this targets ALL links within the header ***/
  text-transform: uppercase;
  font-weight: 700; /***bold***/
  padding-left: 0.625rem; /***10px***/
  background-color: #ffcd9f;
  border-bottom: 0.5rem solid rgba(237, 137, 41, 0.651);
  border-radius: 1rem;
  padding: 0.5rem;
  margin-bottom: 0.5rem;
  color: #441212;
  width: 100%;
  padding-right: 0.5rem;
  background-color: #ffcd9f;
  -moz-border-radius: 80px 40px 40px 80px;
  border-radius: 80px 40px 40px 80px;
  -webkit-transition: border-top-left-radius 0.2s ease, border-top-right-radius 1s ease,
  border-bottom-left-radius 2s ease, border-bottom-right-radius 3s ease;
  -moz-transition: -moz-border-radius-topleft 0.2s ease, -moz-border-radius-topright 1s ease,
  -moz-border-radius-bottomleft 2s ease, -moz-border-radius-bottomright 3s ease;
  -o-transition: border-top-left-radius 0.2s ease, border-top-right-radius 1s ease,
  border-bottom-left-radius 2s ease, border-bottom-right-radius 3s ease;
  transition: border-top-left-radius 0.2s ease, border-top-right-radius 1s ease,
  border-bottom-left-radius 2s ease, border-bottom-right-radius 3s ease;
  padding-top: 1rem;
}

.footer-links a:hover{
  -moz-border-radius: 2.5rem 5rem 5rem 2.5rem; /***40px 80px 80px 40px ***/
  border-radius: 2.5rem 5rem 5rem 2.5rem; /***40px 80px 80px 40px ***/
}

.footer-button{
  text-align: center;
}

.footer-button p{
  margin-top: 2rem;
}

.footer-button a{
  margin-top: 0.5rem;
}

footer a{
  height: 4rem;
  width: 4rem;
  background: #ffcd9f;
  border: none;
  padding-right: 0.5rem;
  -moz-border-radius: 80px 40px 40px 80px;
  border-radius: 80px 40px 40px 80px;
  -webkit-transition: border-top-left-radius 0.2s ease, border-top-right-radius 1s ease,
  border-bottom-left-radius 2s ease, border-bottom-right-radius 3s ease;
  -moz-transition: -moz-border-radius-topleft 0.2s ease, -moz-border-radius-topright 1s ease,
  -moz-border-radius-bottomleft 2s ease, -moz-border-radius-bottomright 3s ease;
  -o-transition: border-top-left-radius 0.2s ease, border-top-right-radius 1s ease,
  border-bottom-left-radius 2s ease, border-bottom-right-radius 3s ease;
  transition: border-top-left-radius 0.2s ease, border-top-right-radius 1s ease,
  border-bottom-left-radius 2s ease, border-bottom-right-radius 3s ease;
  border-bottom: 0.5rem solid rgba(237, 137, 41, 0.651);
  border-radius: 1rem;
  margin-left: 1rem;
  margin-left: auto;
  margin-right: auto;
}

footer a:hover{
  -moz-border-radius: 40px 80px 80px 40px;
  border-radius: 40px 80px 80px 40px; 
}

.footer-button p{
  font-family: 'Architects Daughter', cursive;
  font-weight: 700;
  font-size: 1.25rem;
  margin-bottom: 1rem;
}

footer a svg{
  width: 2.5rem;
  height: 2.5rem;
  padding-top: 0.5rem;
}

.books_panel div{
  margin-top: 1rem;
}
/************************************************END FOOTER STYLING***/
/* END STYLING INDEX.HTML */


/*** Archaeologie Seite ***/
.archäologie,
.dokumentation,
.ethnologie,
.belletristik,
.ausstellungswesen,
.medizingeschichte,
.lebensgeschichten,
.unternehmensgeschichte,
.geschichte,
.ueber-mich
{
  margin: 0 1rem;
}

.archäologie-list li,
.dokumentation-list li,
.ethnologie-list li,
.belletristik li,
.ausstellungswesen li,
.medizingeschichte li,
.lebensgeschichten li,
.unternehmensgeschichte li,
.geschichte li{
  padding: 1rem;
  box-shadow: 
  inset 0rem 0.6875rem 0.5rem -0.625rem #ed8929,
  inset 0rem -0.6875rem 0.5rem -0.635rem #ed8929; 
  border-radius: 1rem;
  margin-top: 2rem;
}

.belletristik li a{
  /* background-color: red; */
  margin-top: -1.5rem;
  margin-left: 0.25rem;
  display: inline-block;
  color: #0000EE;
  display: initial;
}

.archäologie-list img,
.dokumentation-list img,
.ethnologie-list img,
.belletristik img,
.ausstellungswesen img,
.medizingeschichte img,
.lebensgeschichten img,
.unternehmensgeschichte img,
.geschichte img,
.ueber-mich img{ 
  display: inline-block;
  vertical-align: middle;
  margin-right: 0.5rem;
}


.belletristik-heading{
  margin-top: 2.5rem;
}

/*** Archaeologie Seite ***/



/* BROKAT BUCH SEITE*/
.bookcover p{
  padding: 1rem;
}

.bookcover h2{
  margin-top: 5rem;
}

.bookcover h2,
.bookcover h3{
  text-align: center;
}

.karlsruher-beitraege{
  /* background: red; */
  text-align: center;
}

.brokat-video,
.sog-der-ferne-video{
  margin: 0 auto;
  margin-top: -0.5rem;
}
/* END BROKAT BUCH SEITE*/

/* DSGVO SEITE */
.dsgvo a{
  display: inline-block;
}

.dsgvo a:hover{
  text-decoration: underline 0.3rem solid #ff7c01;
}

.dsgvo .phonenumber-link:hover,
.dsgvo .email-link:hover{
  text-decoration: none;
}

.dsgvo span{
  margin-left: 1rem;
  margin-bottom: 10rem;
}
/* ENDE DSGVO SEITE */



  /* FOOTER LINKS SEITEN */
  .widerrufsrecht,
  .dsgvo,
  .agb,
  .impressum{
    margin: 1rem auto;
    padding: 1rem;
  }

  .widerrufsrecht h2,
  .dsgvo h2,
  .agb h2,
  .impressum h2{
    font-size: 2rem;
    margin-top: 3rem;
    margin-bottom: 2rem;
  }

  .widerrufsrecht h3,
  .dsgvo h3,
  .agb h3,
  .impressum h3{
    margin-bottom: 0.5rem;
    margin-top: 2rem;
  }

  .widerrufsrecht-content p,
  .widerrufsrecht-content ul,
  .dsgvo p,
  .agb p,
  .agb ol,
  .agb-wiedrrufsrecht,
  .impressum-content p{
    padding: 1rem;
    box-shadow: 
    inset 0rem 0.6875rem 0.5rem -0.625rem #ed8929,
    inset 0rem -0.6875rem 0.5rem -0.635rem #ed8929; 
    border-radius: 1rem;
    /* display: inline-block; */
  }

  .widerrufsrecht-content ul{
    padding: 1rem 1rem  1rem 1.5rem;
    margin: 1rem;
  }

  .widerrufsrecht-content .strong,
  .agb-content {
    display: inline-block;
  }

  .agb-content h2{
    font-size: 1.6rem;
  }

  .agb ol{
    padding-left: 2rem;
    margin-top: -1.5rem;
  }

  /***auf AGB SEITE***/
  .email-link,
  .phonenumber-link{ 
    display: inline-block;
    color: rgb(88, 88, 219);
    font-weight: 700;
  }

  /***auf AGB SEITE***/
  .email-link:hover,
  .phonenumber-link:hover{ 
    /* text-decoration: underline 0.2rem solid #441212; */
    color: #441212;
    transition: all 0.2s ease-in-out;
  } 
  /* ENDE FOOTER LINKS SEITEN */


/* FORSCHUNGSREISE */
  /* parallax effect Forschungsreisen */
  .forschungsreisen .parallax-text a{
    font-size: 2rem;
    background-color: rgba(173, 170, 170, 0.8);
    padding: 0 0.5rem;
  }
  /*END parallax effect Forschungsreisen */

  /* FORSCHUNGSREISE */
  .forschungsreisen img{
    margin-top: 10rem;
  }

  .forschungsreisen-bilder h3{
    color: #441212;
  }
  /* ENDE FORSCHUNGSREISE */



  /* KONTAKT SEITE */
  .heading{
    text-align: center;
    margin-top: 3rem;
    font-size: 2rem;
    color: #441212;
  }


  .contact-form,
  .kontakt-adresse{
    margin: 0 auto;
    margin-top: 6rem;
  }


  /******Kontakt Seite*******/
      /***FORM STYLING***/
  .project-form-heading,
  .kontakt-adresse{
    box-shadow: 
    inset 0rem 0.6875rem 0.5rem -0.625rem #ed8929,
    inset 0rem -0.6875rem 0.5rem -0.635rem #ed8929; 
    border-radius: 1rem;
    margin-left: 1rem;
    margin-right: 1rem;
    background-color: #ecc096;
  }

  .kontakt-adresse{
    padding: 1rem;
  }

  .project-form-heading p{
    color: #441212;
    padding-top: 1rem;
    padding-bottom: 1rem;
  }

  .project-form label{
      display: block;
      color: #441212;
      margin-top: 1.75rem;
      margin-bottom: 0.5rem;
  }
  
  .required{
      color: #fa0404;
  }
    
  .project-form input,
  .project-form textarea{
      width: 100%;
      padding-left: 0.5rem;
  }
  
  .project-form textarea{
      padding-top: 0.5rem;
  }
  
  .project-form input,
  .dropdown select{
      border: none;
      border-radius: 0.5rem;
      height: 2.5rem;
  }
  
  .project-form textarea{
      resize: vertical;
      border: none;
      border-radius: 0.5rem;
      min-height: 22rem;
  }
  
  .project-form-btn{
      color: #441212;
      border: none;
      font-weight: bold;
      border-radius: 1rem;
      padding: 1rem 1.75rem;
      margin-top: 1rem;
      display: flex;
      align-items: center;
      background: #ffcd9f;
      border: none;
      padding-right: 0.5rem;
      -moz-border-radius: 5rem 2.5rem 2.5rem 5rem; /***80px 40px 40px 80px***/
      border-radius: 5rem 2.5rem 2.5rem 5rem; /***80px 40px 40px 80px***/
      -webkit-transition: border-top-left-radius 0.2s ease, border-top-right-radius 1s ease,
      border-bottom-left-radius 2s ease, border-bottom-right-radius 3s ease;
      -moz-transition: -moz-border-radius-topleft 0.2s ease, -moz-border-radius-topright 1s ease,
      -moz-border-radius-bottomleft 2s ease, -moz-border-radius-bottomright 3s ease;
      -o-transition: border-top-left-radius 0.2s ease, border-top-right-radius 1s ease,
      border-bottom-left-radius 2s ease, border-bottom-right-radius 3s ease;
      transition: border-top-left-radius 0.2s ease, border-top-right-radius 1s ease,
      border-bottom-left-radius 2s ease, border-bottom-right-radius 3s ease;
      border-bottom: 0.5rem solid rgba(237, 137, 41, 0.651);
      border-radius: 1rem;
      padding-left: 0.5rem;
  }
        
  .project-form-btn:hover{
    -moz-border-radius: 40px 80px 80px 40px;
    border-radius: 40px 80px 80px 40px; 
    cursor: pointer;
  }
    /***End general styling of the form***/
  /* ENDE KONTAKT SEITE */



/* AQUARELLE SEITE, GRAPHIK SEITE*/
.aquarelle-heading,
.graphik-heading,
.galerie-heading,
.bildhauerei-heading,
.oelgemaelde-heading,
.video-heading,
.ueber-mich-heading{
  text-align: center;
  margin-top: 3rem;
  font-size: 2rem;
}

.aquarelle-bilder,
.graphik-bilder,
.bildhauerei-bilder,
.oelgemaelde-bilder{
  margin-top: 3rem;
}

.aquarelle-content div,
.oelgemaelde-content div,
.graphiken-content div,
.galerie-content div,
.galerie-bilder,
.bildhauerei-content div,
.oelgemaelde-content div{
  padding: 1rem;
  margin-top: 1rem;
}

.aquarelle-content div img,
.graphiken-content div img,
.bildhauerei-content div img,
.galerie-content div img,
.oelgemaelde-content div img{
  margin: 0 auto;
}
/* ENDE AQUARELLE SEITE, GRAPHIKEN SEITE */






  /*Adding in BUTTON TO GO BACK TO TOP */
  .goToTop{
    position: fixed;
    bottom: 8rem; /***originally: 20rem --> 320px***/
    right: 1.875rem; /***30px***/
    z-index: 99;
    font-size: 1.875rem; /***30px***/
    border: none;
    outline: none;
    cursor: pointer;
    padding: 0.9375rem; /***15px***/
    border-radius: 0.25rem; /***4px***/
    color: #441212;
    border: none;
    font-weight: bold;
    border-radius: 1rem;
    padding: 1rem 1.75rem;
    margin-top: 1rem;
    display: flex;
    align-items: center;
    background: #ecc096;;
    border: none;
    padding-right: 0.5rem;
    -moz-border-radius: 5rem 2.5rem 2.5rem 5rem; /***80px 40px 40px 80px***/
    border-radius: 5rem 2.5rem 2.5rem 5rem; /***80px 40px 40px 80px***/
    -webkit-transition: border-top-left-radius 0.2s ease, border-top-right-radius 1s ease,
    border-bottom-left-radius 2s ease, border-bottom-right-radius 3s ease;
    -moz-transition: -moz-border-radius-topleft 0.2s ease, -moz-border-radius-topright 1s ease,
    -moz-border-radius-bottomleft 2s ease, -moz-border-radius-bottomright 3s ease;
    -o-transition: border-top-left-radius 0.2s ease, border-top-right-radius 1s ease,
    border-bottom-left-radius 2s ease, border-bottom-right-radius 3s ease;
    transition: border-top-left-radius 0.2s ease, border-top-right-radius 1s ease,
    border-bottom-left-radius 2s ease, border-bottom-right-radius 3s ease;
    border-bottom: 0.5rem solid rgba(237, 137, 41, 0.651);
    border-radius: 1rem;
    padding-left: 0.5rem;
  }
  
  .goToTop:hover {
    -moz-border-radius: 2.5rem 5rem 5rem 2.5rem; /***40px 80px 80px 40px***/
    border-radius: 2.5rem 5rem 5rem 2.5rem; /***40px 80px 80px 40px***/
    cursor: pointer;
  }
  /* END Adding in BUTTON TO GO BACK TO TOP */



  /* Galerie Seiten */
    .galerie-info{
      padding: 1rem;
      margin-left: 1rem;
    }
  /* END Galerie Seiten */


  @media screen and (min-width: 340px){
    .publikationen-ausstellungswesen .heading-lg-screen{
      display: inline-block;
      padding-bottom: 0.5rem;
    }

    .publikationen-ausstellungswesen .heading-sm-screen{
      display: none;
    }


    
    /* Index Seite */
    .kostproben{
      margin-top: 5rem;
    }
    /* Ende Index Seite */
  }
  

@media screen and (min-width: 350px){
  .publikationen-lebensgeschichten .heading-lg-screen{
    display: inline-block;
    padding-bottom: 0.5rem;
  }

  .publikationen-lebensgeschichten .heading-sm-screen{
    display: none;
  }
}


@media screen and (min-width: 452px){
  .publikationen-unternehmensgeschichte .heading-lg-screen{
    display: inline-block;
    padding-bottom: 0.5rem;
  }

  .publikationen-unternehmensgeschichte .heading-sm-screen{
    display: none;
  }
}

@media screen and (min-width:430px){
  .video-index{
    height: 20rem;
  }
}


@media screen and (min-width: 420px){
  /*** Ausstellungswesen Seite, Lebensgeschichten Seite, Medizingeschichte Seite, Unternehmensgeschichte Seite ***/
  .ausstellungswesen-sm-screen,
  .medizingeschichte-sm-screen{
    display: none;
  }

  .ausstellungswesen-lg-screen,
  .medizingeschichte-lg-screen{
    display: initial;
  }
/***ENDE Ausstellungswesen Seite, Lebensgeschichten Seite, Medizingeschichte Seite, Unternehmensgeschichte Seite ***/
}



@media screen and (min-width: 445px){
      /*** Ausstellungswesen Seite, Lebensgeschichten Seite, Medizingeschichte Seite, Unternehmensgeschichte Seite ***/
      .ausstellungswesen-sm-screen,
      .lebensgeschichte-sm-screen,
      .medizingeschichte-sm-screen{
        display: none;
      }
  
      .ausstellungswesen-lg-screen,
      .lebensgeschichte-lg-screen,
      .medizingeschichte-lg-screen{
        display: initial;
      }
    /***ENDE Ausstellungswesen Seite, Lebensgeschichten Seite, Medizingeschichte Seite, Unternehmensgeschichte Seite ***/
}


@media screen and (min-width: 500px){
  .gemaelde-index-content{
    display: flex;
    flex-wrap: wrap;
  }

  .gemaelde-index-content img{
    margin-left: 0.5rem;
  }

  .agb-content h2{
    font-size: 2rem;
  }

  .footer-links a{
    width: 100%;
  }

  .footer-section{
    display: flex;
  }

  .footer-button{
    margin-right: 0;
  }

  .footer-button a{
    margin-right: 1rem;
    margin-top: 0;
  }

  .footer-links li{
    margin-right: 2rem;
  }

  .footer-button{ /***social media buttons***/
    margin-left: auto;
  }

  .footer-button a{
    margin-top: 1rem;
  }  
}



@media screen and (min-width: 540px){
  
/************************************************ END INDEX.HTML Forschungsreisen***/
  /* BILDER FUER FORSCHUNGSREISE */
  .forschungsreisen-bilder .books__book__img{
    margin-left: 5rem;
  }
/************************************************ END INDEX.HTML Forschungsreisen***/
}


@media screen and (min-width: 560px){
  .video-index{
    height: 23rem;
  }

  .parallax-effect h2{
    margin-bottom: 5rem;
  }


  /* Parallax effect headings + Forschungsreisen Parallax heading + Gemaelde Uberschriften duenner / dicker machen */
  .buecher-prallax-heading,
  .forschungsreisen h2,
  .gemaelde-index-content h3{
    font-weight: 100;
  }

  .books_panel{
    display: flex;
    flex-wrap: wrap;
    margin-left: 2.2rem; /***2.20***/
  }
  
  .books_panel div{
    margin: 0 auto;
    margin-right: 5rem;/***3***/
    margin-bottom: 2rem;  
  }
  
  .books__book__img {
    width: 11.5rem; /***muss groesser gemacht werden in order to make the images bigger***/
    will-change: transform;
    transform-origin: 0 100%;
    transform: rotate(-5deg);
    transition: transform 0.3s ease-out;
    margin-top: 10rem;
    margin-left: 5rem;
    text-align: center;
    margin: 0 auto;
  } 
  
  .books__book__img img{
    width: 11.5rem; /***160px --- 10rem***/ /***10% -- 11rem***/ /***15% -- ***/
    height: 17.25rem; /***240px ---15rem***/ /***10% -- 16.5rem***/ /***15% -- 17.25rem***/
  }

  /* BILDER FUER FORSCHUNGSREISE */
  .forschungsreisen-bilder .books__book__img{
    width: 20rem; /***20rem***/
  }

  .forschungsreisen-bilder .books__book__img img{
    width: 20rem; /***20rem***/
    height: 12rem; /***12***/
  }
  /* ENDE  BILDER FUER FORSCHUNGSREISE */



  /* Index Seite */
  .kostproben{
    margin-top: 5rem;
  }
  /* Ende Index Seite */
}

/* 
@media screen and (min-width: 583px){
  .books_panel.verschiedene-buecher-cover>div{
    margin-left: 14rem;
  }
}


@media screen and (min-width: 653px){
  .books_panel.verschiedene-buecher-cover>div{
    margin-left: 2.5rem;
  }
} */





@media screen and (min-width: 600px){
 .scene-small-screen-content{
    display: flex;
  }

  .scene-small-screen-text,
  .scene-small-screen-text h2{
    text-align: left;
  }

  .video-index{
    height: 25rem;
  }

  .footer-button{
      display: flex;
  }

  .footer-button p{
    margin-right: 0.5rem;
  }


  .footer-links li{
    margin-top: 1rem;
  }


  .books_panel div{
    margin-right: 8rem;/***3***/
  }

  /* FORSCHUNGSREISE */
  .forschungsreisen-bilder div{
    margin-right: 4rem;
  }
  /*ENDE FORSCHUNGSREISE */

  /* AQUARELLE SEITE, GRAPHIKEN SEITE */
  .aquarelle-content,
  .oelgemaelde-content,
  .graphiken-content,
  .galerie-content,
  .bildhauerei-content{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    
  }
  /* ENDE AQUARELLE SEITE, GRAPHIKEN SEITE */


  /* Publikationen Seite */
  .publikationen div{
    display: flex;
    flex-wrap: wrap;
    /* justify-content: space-evenly; */
    justify-content: space-around;
  }


  .publikationen img{
    margin-left: 2rem;
  }
  /* ENDE Publikationen Seite */
}



@media screen and (min-width: 670px){
  .video-index{
    height: 28rem;
  }

  .books_panel div{
    margin-right: 3rem;/***3***/
  }

  .forschungsreisen-bilder div{
    margin-right: 6rem;
  }
}



@media screen and (min-width: 570px){
  
  .unternehmensgeschichte-sm-screen{
    display: none;
  }

  .unternehmensgeschichte-lg-screen{
    display: initial;
  }
}




@media screen and (min-width: 620px){
 .flip-card {
    width: 300px; 
    height: 300px;
  }

  .flip-card-quer{
    width: 435px;
  }
}

@media screen and (min-width: 770px){
  .video-index{
    max-width: 48rem; /***768px***/
  }

   /***parallax-effect***/
   .parallax-effect img,
   .parallax-effect div{
       display: none;
   }

   .parallax-effect{
       background-image: url(../img/buecher-parallax.jpg);
       background-size: cover; 
       background-position: top center;
       background-repeat: none; 
       width: 100%; 
       height: 120rem; /*****30rem********/ /***100rem***/
       padding-left: 1rem;
       background-attachment: fixed;
       /***Centering the content***/
       display: flex; 
       align-items: center;
       margin: 0 auto;
       margin-top: 5rem;
       margin-bottom: 5rem; 
   }

   .parallax-effect h2{
      display: initial;
      font-size: 2rem;
      width: 100%;
      text-align: center;
      margin: 0 auto;
      margin-top: -80rem;
      font-family: 'Architects Daughter', cursive;
      margin-bottom: 10rem;
      margin-right: 1rem;

      margin-top: -100rem;
   }
   /***end parallax-effect***/


  /* 2. PARALLAX EFFEKT -- FORSCHUNGSREISEN */
  .forschungsreisen{
    background-size: cover; 
    background-position: top center;
    background-repeat: none; 
    width: 100%; 
    height: 100rem; /*****30rem********/
    padding-left: 1rem;
    background-attachment: fixed;
    /***Centering the content***/
    display: flex; 
    align-items: center;
    margin: 0 auto;
    margin-top: 5rem; /***5rem***/
    margin-bottom: 5rem; 
    
    background-image:linear-gradient(rgba(173, 170, 170, 0.8), rgba(173, 170, 170, 0.8)),
    url(../img/camper.jpeg);
  }

  .forschungsreisen .parallax-text a{
    background-color: transparent;
  }

  .forschungsreisen-bilder h3{
    color: #441212;
  }

  .forschungsreisen-bilder div{
    margin-top: -1rem;
  }

  /* ENDE 2. PARALLAX EFFEKT -- FORSCHUNGSREISEN */

  .books_panel{
    margin-top: -115rem; /***-95rem***/
    margin-bottom: 20rem;
  }

  .gemaelde-index h3{
    margin-top: -5rem;
  }

  .forschungsreisen-bilder .books__book__img{
      /* width: 20rem; */
      margin-right: 7rem;

    }

  .forschungsreisen{
    height: 150rem;
  }


  .forschungsreisen-bilder{
    margin-top: -140rem;
  }

  .forschungsreisen h2{
    margin-top: -125rem;
  }
}

@media screen and (min-width: 800px){

  .bookcover-content{
    display: flex;
  }

  .bookcover-content img{
    margin-top: 1.5rem;
  }

  .flammentod-link img{
    margin-right: 15rem;
  }


  .bookcover-content p{
    padding-left: 2.5rem;
    padding-right: 0.5rem;
  }

  .kontakt-footer{
    margin-top: 10rem;
  }
  /*ENDE KONTAKTE SEITE*/



  .worldmap{ 
    margin-bottom: 5rem;
   }
}


@media screen and (min-width: 821px){
  .books_panel{
    margin-bottom: 40rem;
  }

  .gemaelde-index{
    margin-top: -25rem;
    margin-bottom: 15rem;
    padding: 1rem;
  }
  
  .gemaelde-index img{
    margin: 0 auto;
    margin-top: 1rem;
  }

  footer{
    margin-top: -20rem;
  }

  .publikationen-footer{
    margin-top: 25rem;
  }

  /* WIDERRUFSRECHT SEITE */
  .widerrufsrecht-footer,
  .dsgvo-footer,
  .agb-footer,
  .impressum-footer,
  .flammentod-footer,
  .baustellen-footer,
  .brokat-footer,
  .fleckenwasser-footer,
  .sog-der-ferne-footer,
  .hexenglaube-footer,
  .archaeologisch-footer,
  .aquarelle-footer,
  .oelgemaelde-footer,
  .graphiken-footer,
  .galerie-footer,
  .bildhauerei-footer,
  .video-footer,
  .ueber-mich-footer{
    margin-top: 10rem;
  }
}

@media  screen and (min-width: 825px){
  /* Kunst Seite */
  .gemaelde-index.kunst-gemaelde{
    margin-bottom: 2rem;
  }
/* ENDE Kunst Seite */
}




@media  screen and (min-width: 804px) {
    /* Kunst Seite */
    .kunst-gemaelde{
      margin-top: 2rem;
    }
  /* ENDE Kunst Seite */
}

@media  screen and (min-width: 842px) {
  /* Kunst Seite */
  .kunst-gemaelde{
    margin-bottom: -15rem;
  }
/* ENDE Kunst Seite */
}

@media  screen and (min-width: 883px) {
  /* Kunst Seite */
  .gemaelde-index.kunst-gemaelde{
    margin-top: 2rem;
  }
/* ENDE Kunst Seite */
}




@media screen and (min-width: 859px){
  .gemaelde-index-content{
    margin-bottom: 20rem;
  }
}


@media screen and (min-width: 861px){
  .gemaelde-index div{
      margin-left: 2rem;
  } 
}


@media screen and (min-width: 876px){
  .gemaelde{
    margin-top: -12rem;
  }

  .parallax-effect.forschungsreisen{
    margin-top: -30rem;
  }

  .gemaelde-index-content h3{
    margin-left: 2rem;
  }

  .bildhauerei-bilder-index{
    padding-bottom: 8rem;
  }
}


@media screen and (min-width: 893px){
  .lgemaelde-index{
    margin-top: 10rem;
    margin-bottom: 30rem;
  }

  .gemaelde-index-content{
      margin-bottom: 15rem;
  }

  footer{
    margin-top: 20rem
  }

    /* WIDERRUFSRECHT SEITE */
    .widerrufsrecht-footer,
    .dsgvo-footer{
      margin-bottom: 1rem;
    }


    .forschungsreisen{
      margin-top: -20rem;
      height: 150rem; /***90rem***/
    }

    .forschungsreisen h2{
      margin-top: -130rem;
    }

    .forschungsreisen-bilder{
      margin-top: -140rem;
      margin-right: 4rem;
    }


    .books_panel.verschiedene-buecher-cover{
      margin-bottom: 60rem;
    }
}


@media screen and (min-width: 900px){
  .parallax-effect{
    height: 95rem;/***95***/
  }

  .parallax-effect h2{
    margin-bottom: -1rem; /**-5rem**/
  }

  .books_panel{
    padding-top: 10rem;/***15rem***/
  }

  .gemaelde-index{
    margin-top: -15rem;
  }

  .forschungsreisen{
    height: 150rem;
  }

  .forschungsreisen-bilder .books__book__img{
    margin-right: 12rem;
  }

  .forschungsreisen-bilder{
    margin-top: -150rem;
    margin-right: 0;
  }

  .forschungsreisen h2{
    margin-top: -135rem; 
  }

  .forschungsreisen .forschungsreisen-parallax-heading{
    margin-top: -135rem;
  }

  .gemaelde-index-content h3{
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    line-height: 1;
  }


  .parallax-effect h2{
    margin-top: -90rem;
  }

  .verschiedene-buecher-cover{
    padding-top: 20rem;
  }

  /* .gemaelde-index.modal-images{
    margin-top: -40rem;
  } */
}



@media screen and (min-width: 1077px){
/*** START KOSTPROBEN ***/

.weißes-mädchen img{
  margin: 0 auto;
  margin-bottom: 1rem;
  display: inline;
  margin: 1rem 3rem;
}

.bruder-schwester{
  max-width: 75%;
  margin: 0 auto;
}


.weißes-mädchen .weißes-mädchen-img .images img{
  margin-right: 1rem;
}

/*** ENDE KOSTPROBEN ***/

  .forschungsreisen .forschungsreisen-parallax-heading{
    margin-top: -75rem;
  }


  .gemaelde-index.modal-images{
    margin-top: 40rem;
  }


  /* OELGEMAELDE */
  .gemaelde-index,
  .aquarelle-index-content{
    margin-top: -20rem;
  }

  .parallax-effect h2{
    margin-top: -75rem; 
  }

  .parallax-effect{
    height: 90rem;
  }

  .books_panel{
    margin-top: -90rem; 
    margin-bottom: 20rem;/***20***/
    height: 50rem;
  }

  .gemaelde-index h3{
    margin-top: 5rem;
  }

  footer{
    margin-top: -15rem /***40***/
  }

  /* WIDERRUFSRECHT SEITE */
  .widerrufsrecht-content,
  .dsgvo-content{
    margin-bottom: 10rem;
  }

  .books_panel.forschungsreisen-bilder{
    margin-bottom: 70rem;
  }

  .gemaelde-index{
    margin-top: 40rem;
  }

  .parallax-effect h2{
    margin-top: -75rem;
  }


  .parallax-effect{
    height: 90rem;
  }

  .books_panel{
    margin-top: -90rem;
    margin-bottom: 20rem;
    height: 50rem;
  }

  footer{
    margin-top: -15rem /***40***/
  }

  .forschungsreisen-bilder .books__book__img{
    margin-right: 0;
  }

  .forschungsreisen{
    height: 85rem;
  }

  .forschungsreisen-bilder{
    margin-top: -85rem;
  }

  .forschungsreisen h2{
    margin-top: -75rem;
  }

  .buecher-prallax-heading a,
  .forschungsreisen .forschungsreisen-parallax-heading a,
  .gemaelde-index-content h3 a{
    font-size: 2.75vw;
  }


  /************************************************ END INDEX.HTML Forschungsreisen***/
  /* BILDER FUER FORSCHUNGSREISE */
  .forschungsreisen-bilder .books__book__img{
    margin-left: 2rem;
  }
  /************************************************ END INDEX.HTML Forschungsreisen***/



  /*** Index seite "Vorstellen" ***/
  .index-vorstellen{
    display: flex;
    justify-content: space-evenly;
    margin-bottom: 5rem;
  }

  .index-vorstellen div{
    margin-right: 2rem;
    /* flex-wrap: wrap; */
    width: 30.66%;
  }

  .index-vorstellen div:nth-of-type(2),
  .index-vorstellen div:nth-of-type(3){
    margin-top: 0;
  }

  .index-vorstellen div:nth-of-type(3){
    margin-bottom: 0;
    margin-right: 0;
  }
  /*** Index seite "Vorstellen" ***/

  .parallax-effect.buch{
    height: 100rem;
  }
  .verschiedene-buecher-cover{
    margin-top: -115rem;
    margin-bottom: 60rem;
  }

  .parallax-effect h2{
    margin-top: -85rem;
  }
}

@media screen and (min-width: 1175px){
  .books_panel{
    width: 68.75rem; /***1100px***/
    text-align: center;
  }


  .gemaelde{
    margin-top: -8rem;
  }

  .bildhauerei-bilder{
    margin-bottom: 10rem;
  }

  .parallax-effect.forschungsreisen{
    margin-top: -20rem;
  }



  .gemaelde-index.modal-images{
    margin-top: -3rem;
  }
}


@media screen and (min-width: 1083px){
  .kontakt-footer{
    margin-top: 10rem;
  }

  .news{
    /* width: 50%; */
    max-width: 1050px;
    margin: 0 auto;
  }

  
}



/* @media screen and (min-width: 1182px){
  .gemaelde{
    background-color: rgb(0, 89, 255);
    margin-top: 2rem;
  }
} */

@media screen and (min-width: 1200px){
  .bookcover-content .freiheit-demokratie-image{
    margin-right: 2rem;
  }
  
  
  /*** NEWS SEITE ***/
  .news-footer{
    margin-top: 75rem;
  }
  /***ENDE NEWS SEITE ***/


  .video-content{
    display: flex;
  }

  .video-index{
    /* height: 28rem; */
    width: 95vw;
  }

  .tagesthemen-video{
    padding-left: 1rem;
  }

  .footer-links{
    display: flex;
  }

  .gemaelde-index-content{
    margin-bottom: 10rem;
  }

  .invisible{
    color: transparent;
  }

  .archaeologisch-footer.karlruher-footer{
    margin-top: 31rem;
  }

  /* WIDERRUFSRECHT SEITE */
  .widerrufsrecht-footer,
  .dsgvo-footer{
    margin-top: -1rem;
  }

  .archaeologisch-footer{
    margin-top: 26rem;
  }

  .baustellen-footer{
    margin-top: 20rem;
  }






  .bookcover.buecher{ /* Wenn nicht jetzt wann dann */
    max-width: 1250px;
  }
  .bookcover.huettenberg-buch,
  .bookcover.kleiekotzer-buch,
  .bookcover.museumskunde-buch,
  .bookcover.koenigstein-buch,
  .bookcover.ausstellung-hexen-buch{
    max-width: 1000px;
  }

  .bookcover.tschüssikowski-buch,
  .bookcover.nix-zu-verlieren-buch{
    max-width: 700px;
  }






  .brokat-footer{
    margin-top: 10rem;
  }

  /***Styling of "Kontakt" page***/
  .contact-form{
    margin: 0 auto;
  }

  .project-form-heading{
    /* margin-left: 2rem; */
    border-radius: 1rem;
    width: 75%; 
    margin: 0 auto;
    margin-top: 5rem;
    margin-left: 2rem;
  }

  .contact-form{
    display: flex;
  }

  .kontakt-adresse{
    margin-top: 4rem;
  }
  /***END Styling of "Kontakt" page***/


    /* VIDEO PAGE */
    .video-page p{
      width: 80ch; /***120ch***/
      text-align: left;
    }
    /* ENDE VIDEO PAGE */


    /* VIDEO PAGE */
    .video-right iframe{
      order: 1;
    }
    /* ENDE VIDEO PAGE */
}


@media screen and (min-width: 1246px){
  .books_panel .book_panel_first_div{
    /* background: red; */
    margin-left: 8.5rem;
  }
}

@media screen and (min-width: 1263px){
  /* .gemaelde-index h3{
    background-color: red;
    font-size: 2.75rem;
    width: 100%;
  } */

  .gemaelde-index-content{
    justify-content: space-evenly;
  }

  /*AQUARELLE SEITE  */
  .aquarelle-content,
  .graphiken-content{
    margin-top: 3rem;
  }
  /* ENDE AQUARELLE SEITE */


    /* Kunst Seite */
    .gemaelde-index.kunst-gemaelde{
      margin-bottom: -15rem;
    }
    /* ENDE Kunst Seite */ 

    /***INDEX "VORSTELLUNG" ***/
    .index-vorstellen{
      margin-bottom: 5rem;
    }
    /***ENDE INDEX "VORSTELLUNG" ***/

}


@media screen and (min-width: 1280px){ /****give content max width ****/
  .video,
  .bookcover,
  .bookcover-content,
  .footer-section,
  .gemaelde-index,
  .widerrufsrecht,
  .dsgvo,
  .agb,
  .impressum,
  .contact-form,
  .aquarelle-bilder,
  .oelgemaelde-bilder,
  .graphiken-bilder,
  .bildhauerei-bilder,
  .galerie-bilder,
  .galerie-content,
  .galerie-info,
  .index-vorstellen,
  .publikationen{
    max-width: 87.5rem; /***1400px***/
    margin: 0 auto;
  }


  .books_panel.verschiedene-buecher-cover{
    margin-top: -115rem;
    height: 100rem;
    margin-bottom: 25rem;
  }






  /* Galerie Seite */
  .world_flags{ 
    max-width: 130rem; 
    margin: 0 auto;
    padding-bottom: 5rem;
  } 

  .worldmap{
    max-width: 70rem;
  }
  /* ENDE Galerie Seite */

  .archäologie,
  .dokumentation,
  .ethnologie,
  .belletristik,
  .ausstellungswesen,
  .medizingeschichte,
  .lebensgeschichten,
  .unternehmensgeschichte,
  .geschichte{
    max-width: 1200px;
    margin: 0 auto;
  }

  .ueber-mich{
    max-width: 1150px;
    margin: 0 auto;
    margin-top: 3rem;
  }


    /***INDEX "VORSTELLUNG" ***/
    .index-vorstellen{
      margin-bottom: 5rem;
    }

    .index-vorstellen div{
      margin-left: 1rem;
      margin-right: 1rem;
    }


    .index-vorstellen div:last-child{
      margin-right: 1rem;
    }
    /***ENDE INDEX "VORSTELLUNG" ***/


  .bildhauerei-bilder-index{
    margin-top: -5rem;
    margin-bottom: 8rem;
  }

  .footer-section{
    padding: 1rem;
    width: 100%;
  }

  .gemaelde-index{
    margin-top: -10rem;
    margin-bottom: 20rem;
  }

  .gemaelde-index div{
    margin-right: 1rem;
  }

  .books_panel{
    width: 75rem; /***1200px***/
    margin: 0 auto;
    margin-top: -90rem; /***-95rem***/
    margin-bottom: 50rem;
    height: 50rem;
  }


  .books_panel .book_panel_first_div{
    margin-left: 11.5rem;
  }

  .forschungsreisen-bilder{
    margin-top: -90rem;
  }


    /* changing BUCHCOVER PARALLAX EFFECT */
      .buch-parallax-effect h2{
        margin-top: -70rem;
      }
    /* changing BUCHCOVER PARALLAX EFFECT */
  

    /*********************************************************MENU***/
      /* removing the box-shadow of nav on bigger screen */
      nav{
        box-shadow: none;
    }

    /* hiding HAMBURGER MENU */
    .menu-icon{
        display: none;
    }

    .wide-flex{
            display: flex;
            justify-content: space-around; /***space between***/
        }

    /***reverse things from above ***/
    nav{
        position: static; /***puts it back to the document flow ***/
        overflow: visible;
        max-height: 100vh;
        width: auto; /***puts it back to its normal default state ***/
        margin-left: auto;
        margin-right: auto;
    }

    .main-menu{
        display: flex;
    }

    .main-menu li{
        border-bottom: none;
        position: relative;
        margin-left: 0rem;
        margin-top: 0.5rem;
    }

    /***Dropdowns***/
    .dropdown-menu{
        position: absolute;
        left: 0;
        background: #ede8f1;
        transition: all 0.2s ease-in-out; 
        border-radius: 1rem;
    }

    .dropdown-menu a{
      margin-left: 0.5rem;
    }

    .logo-small-screen{
      display: none;
    }

    a.logo{  
        display: inline-block;
        padding-top: 0.3rem;
    } 

    .logo-div{
      margin: 0 auto;
      text-align: center;
    }
  /*********************************************************END MENU***/


    /*********************************************************for small screen index.html*/
    .banner h2{
        /* font-size: 4rem; */
        display: none;
    }
    /*********************************************************END for small screen index.html */



    /********************************************************* for larger screens */
    .fly-in{
        position: absolute;
        left: 50%;
        top: 19rem; /***43 --> 12rem***/
        list-style: none;
        transform: translateX(-50%) translateY(-50%);
        display: initial;
    }

    .fly-in-heading ul{
      width: 100%;
      text-align: center;
    }


    .fly-in li {
        display: inline-block;
        font-family: 'Architects Daughter', cursive;
        font-weight: 800;
        opacity: 1;
        transition: all 2s cubic-bezier(0.6, -.005, 0.32, 1.75); 
        font-size: 2.75rem;
    }


    .fly-in.hidden li {
        opacity: 0;
    }
    .fly-in.hidden li:nth-child(1) {
        transform: translateX(150px) translateY(-170px); 
    }
    .fly-in.hidden li:nth-child(2) {
        transform: translateX(-210px) translateY(170px); 
    }
    .fly-in.hidden li:nth-child(3) {
        transform: translateX(20px) translateY(-100px); 
    }
    .fly-in.hidden li:nth-child(4) {
        transform: translateX(-100px) translateY(-20px); 
    }
    .fly-in.hidden li:nth-child(5) {
        transform: translateX(-70px) translateY(-200px); 
    }
    .fly-in.hidden li:nth-child(6) {
        transform: translateX(200px) translateY(70px); 
    }
    .fly-in.hidden li:nth-child(7) {
        transform: translateX(30px) translateY(200px); 
    }
    .fly-in.hidden li:nth-child(8) {
        transform: translateX(30px) translateY(-100px); 
    }
    .fly-in.hidden li:nth-child(9) {
        transform: translateX(100px) translateY(-170px); 
    }
    .fly-in.hidden li:nth-child(11) {
        transform: translateX(50px) translateY(50px); 
    }
    .fly-in.hidden li:nth-child(12) {
        transform: translateX(150px) translateY(-170px); 
    }
    .fly-in.hidden li:nth-child(13) {
        transform: translateX(-210px) translateY(170px); 
    }
    .fly-in.hidden li:nth-child(14) {
        transform: translateX(20px) translateY(-100px); 
    }
    .fly-in.hidden li:nth-child(15) {
        transform: translateX(-100px) translateY(-20px); 
    }
    .fly-in.hidden li:nth-child(16) {
        transform: translateX(-70px) translateY(-200px); 
    }
    .fly-in.hidden li:nth-child(17) {
        transform: translateX(200px) translateY(70px); 
    }
    .fly-in.hidden li:nth-child(18) {
        transform: translateX(30px) translateY(200px); 
    }
    .fly-in.hidden li:nth-child(19) {
        transform: translateX(30px) translateY(-100px); 
    }
    .fly-in.hidden li:nth-child(20) {
        transform: translateX(100px) translateY(-170px); 
    }
    .fly-in.hidden li:nth-child(21) {
        transform: translateX(50px) translateY(50px); 
    }
    .fly-in.hidden li:nth-child(22) {
        transform: translateX(150px) translateY(-170px); 
    }
    .fly-in.hidden li:nth-child(23) {
        transform: translateX(-210px) translateY(170px); 
    }
    .fly-in.hidden li:nth-child(24) {
        transform: translateX(20px) translateY(-100px); 
    }
    .fly-in.hidden li:nth-child(25) {
        transform: translateX(-100px) translateY(-20px); 
    }
    .fly-in.hidden li:nth-child(26) {
        transform: translateX(50px) translateY(50px); 
    }
    .fly-in.hidden li:nth-child(27) {
        transform: translateX(-70px) translateY(-200px); 
    }
    .fly-in.hidden li:nth-child(28) {
        transform: translateX(200px) translateY(70px); 
    }
    .fly-in.hidden li:nth-child(29) {
        transform: translateX(30px) translateY(200px); 
    }
    .fly-in.hidden li:nth-child(30) {
        transform: translateX(30px) translateY(-100px); 
    }
    .fly-in.hidden li:nth-child(31) {
        transform: translateX(100px) translateY(-170px); 
    }
    .fly-in.hidden li:nth-child(32) {
        transform: translateX(50px) translateY(50px); 
    }
    .fly-in.hidden li:nth-child(33) {
        transform: translateX(150px) translateY(-170px); 
    }
    .fly-in.hidden li:nth-child(34) {
        transform: translateX(-210px) translateY(170px); 
    }
    .fly-in.hidden li:nth-child(35) {
        transform: translateX(20px) translateY(-100px); 
    }
    .fly-in.hidden li:nth-child(36) {
        transform: translateX(-100px) translateY(-20px); 
    }
    .fly-in.hidden li:nth-child(37) {
        transform: translateX(-70px) translateY(-200px); 
    }
    .fly-in.hidden li:nth-child(38) {
        transform: translateX(200px) translateY(70px); 
    }
    .fly-in.hidden li:nth-child(39) {
        transform: translateX(30px) translateY(200px); 
    }
    .fly-in.hidden li:nth-child(40) {
      transform: translateX(30px) translateY(-100px); 
    }
    .fly-in.hidden li:nth-child(41) {
      transform: translateX(100px) translateY(-170px); 
    }
    .fly-in.hidden li:nth-child(42) {
      transform: translateX(50px) translateY(50px); 
    }
    .fly-in.hidden li:nth-child(43) {
      transform: translateX(150px) translateY(-170px); 
    }
    .fly-in.hidden li:nth-child(44) {
      transform: translateX(-210px) translateY(170px); 
    }
    .fly-in.hidden li:nth-child(45) {
      transform: translateX(20px) translateY(-100px); 
    }
    /********************************************************* END for larger screens */


  /* HIDING SCENE-SMALL-SCREEN ON BIGGER SCREENS */
  .scene-small-screen{
      display: none;
  }
 /* HIDING SCENE-SMALL-SCREEN ON BIGGER SCREENS */


  /* FOR BOOK ANIMATION */
     /*Webflow standard classes */
     html.w-mod-touch * {
      background-attachment: scroll !important;
    }
    .w-block {
      display: block;
    }
    .w-inline-block {
      max-width: 100%;
      display: inline-block;
    }
    
    .w-webflow-badge,
    .w-webflow-badge * {
      position: static;
      left: auto;
      top: auto;
      right: auto;
      bottom: auto;
      z-index: auto;
      display: block;
      visibility: visible;
      overflow: visible;
      overflow-x: visible;
      overflow-y: visible;
      box-sizing: border-box;
      width: auto;
      height: auto;
      max-height: none;
      max-width: none;
      min-height: 0;
      min-width: 0;
      margin: 0;
      padding: 0;
      float: none;
      clear: none;
      border: 0 none transparent;
      border-radius: 0;
      background: none;
      background-image: none;
      background-position: 0% 0%;
      background-size: auto auto;
      background-repeat: repeat;
      background-origin: padding-box;
      background-clip: border-box;
      background-attachment: scroll;
      background-color: transparent;
      box-shadow: none;
      opacity: 1.0;
      transform: none;
      transition: none;
      direction: ltr;
      font-family: inherit;
      font-weight: inherit;
      color: inherit;
      font-size: inherit;
      line-height: inherit;
      font-style: inherit;
      font-variant: inherit;
      text-align: inherit;
      letter-spacing: inherit;
      text-decoration: inherit;
      text-indent: 0;
      text-transform: inherit;
      list-style-type: disc;
      text-shadow: none;
      /* font-smoothing: auto;
      vertical-align: baseline; */
      cursor: inherit;
      white-space: inherit;
      word-break: normal;
      word-spacing: normal;
      word-wrap: normal;
    }
    .w-webflow-badge {
      position: fixed !important;
      display: inline-block !important;
      visibility: visible !important;
      opacity: 1 !important;
      z-index: 2147483647 !important;
      top: auto !important;
      right: 0.75rem !important; /***12px***/
      bottom: 0.75rem !important; /***12px***/
      left: auto !important;
      color: #AAADB0 !important;
      background-color: #fff !important; /***white***/
      border-radius: 0.1875rem !important; /***3px***/
      padding: 0.375rem 0.5rem 0.375rem 0.375rem !important; /***6px 8px 6px 6px ***/
      font-size: 0.75rem !important; /***12px***/
      opacity: 1.0 !important;
      line-height: 0.875rem !important; /***14px***/
      text-decoration: none !important;
      transform: none !important;
      margin: 0 !important;
      width: auto !important;
      height: auto !important;
      overflow: visible !important;
      white-space: nowrap;
      box-shadow: 0 0 0 0.0625rem rgba(0, 0, 0, 0.1), 0rem 0.0625rem 0.1875rem rgba(0, 0, 0, 0.1);
    }
    .w-webflow-badge > img {
      display: inline-block !important;
      visibility: visible !important;
      opacity: 1 !important;
      vertical-align: middle !important;
    }
    
    .w-richtext:before,
    .w-richtext:after {
      content: " ";
      display: table;
    }
    .w-richtext:after {
      clear: both;
    }
    .w-richtext[contenteditable="true"]:before,
    .w-richtext[contenteditable="true"]:after {
      white-space: initial;
    }
    /*-----------------------*/

    h3 {
      margin-top: 1.25rem; /***20px***/
      margin-bottom: 0.625rem; /***10px***/
      font-size: 1.5rem; /***24px***/
      line-height: 1.875rem; /***30px***/
      font-weight: bold;
    }
    
    p {
      margin-top: 0;
      margin-bottom: 0.625rem; /***10px***/
    }

    .scene { /*******************************************************change book  *************************/
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      width: 100%;
      height: 54vw;
      -webkit-box-pack: center;
      -webkit-justify-content: center;
      -ms-flex-pack: center;
      justify-content: center;
      -webkit-box-align: stretch;
      -webkit-align-items: stretch;
      -ms-flex-align: stretch;
      align-items: stretch;
      background-color: transparent; /***white***/
      -webkit-perspective: 250rem; /***4000px***/
      perspective: 250rem; /***4000px***/
      -webkit-perspective-origin: 50% 0%;
      perspective-origin: 50% 0%;
  
      height: 51vw; /***40vw***/
      width: 50vw; /***40% ***/
      margin: 0 auto;
      margin-top: 4rem;
      padding: 0;
    }

    .book-image{
      width: 15rem;
      height: 18rem;
    }

    .book-text{ /***rechte Seite vom Buch Text***/
      font-weight: normal;
      font-family: Arial, Helvetica, sans-serif;
    }

    .book-wrap {
      position: relative;
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      width: 57vw;
      margin-top: 8vw;
      margin-bottom: 8vw;
      padding-right: 1%;
      padding-left: 1%;
      -webkit-box-pack: center;
      -webkit-justify-content: center;
      -ms-flex-pack: center;
      justify-content: center;
      -webkit-perspective: 250rem; /***4000px***/
      perspective: 250rem;
      -webkit-perspective-origin: 50% 50%;
      perspective-origin: 50% 50%;
      -webkit-transform: translate3d(0px, 5%, -16.5rem) rotateX(27deg) rotateY(0deg) rotateZ(-10deg);
      transform: translate3d(0px, 5%, -16.5rem) rotateX(27deg) rotateY(0deg) rotateZ(-10deg);
      -webkit-transition: -webkit-transform 2000ms cubic-bezier(.165, .84, .44, 1);
      transition: -webkit-transform 2000ms cubic-bezier(.165, .84, .44, 1);
      transition: transform 2000ms cubic-bezier(.165, .84, .44, 1);
      transition: transform 2000ms cubic-bezier(.165, .84, .44, 1), -webkit-transform 2000ms cubic-bezier(.165, .84, .44, 1);
      -webkit-transform-style: preserve-3d;
      transform-style: preserve-3d;
    }
    
    .book-cover-left {
      -webkit-box-flex: 1;
      -webkit-flex: 1;
      -ms-flex: 1;
      flex: 1;
      border-top-left-radius: 4%;
      border-bottom-left-radius: 4%;
      background-color: #441212;
      box-shadow: inset 0.25rem -0.25rem 0.25rem 0.0625rem #635648, inset 7px -7px 4px 0 #221b14;
      -webkit-perspective: 250rem; /***4000px***/
      perspective: 250rem; /***4000px***/
      -webkit-transform: translate3d(0rem, 0rem, -0.0625rem); /***0px, 0px, -1px***/
      transform: translate3d(0rem, 0rem, -0.0625rem); /***0px, 0px, -1px***/
      -webkit-transform-style: preserve-3d;
      transform-style: preserve-3d;
      box-shadow: 10px 10px 10px 10px rgba(237, 137, 41, 0.4);
    }
    
    .book-cover-right{
      -webkit-box-flex: 1;
      -webkit-flex: 1;
      -ms-flex: 1;
      flex: 1;
      border-top-right-radius: 4%;
      border-bottom-right-radius: 4%;
      background-color: #441212;
      box-shadow: inset -4px -4px 4px 1px #635648, inset -7px -7px 4px 0 #221b14;
      box-shadow: 10px 10px 10px 10px rgba(237, 137, 41, 0.4);
    }
    
    .layer1 {
      position: fixed;
      left: 0rem;
      top: 0rem;
      right: 0rem;
      bottom: 0rem;
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      margin: 1.25rem 0.625rem 0.625rem; /***20px 10px 10px***/
      -webkit-box-pack: start;
      -webkit-justify-content: flex-start;
      -ms-flex-pack: start;
      justify-content: flex-start;
      -webkit-transform: translate3d(0rem, 0rem, 0.3125rem); /***0px, 0px, 5px ***/
      transform: translate3d(0rem, 0rem, 0.3125rem); /***0px, 0px, 5px***/
      -webkit-transform-style: preserve-3d;
      transform-style: preserve-3d;
    }
    
    .page-left {
      -webkit-box-flex: 1;
      -webkit-flex: 1;
      -ms-flex: 1;
      flex: 1;
      border-top-left-radius: 1%;
      border-bottom-left-radius: 1%;
      background-color: #fff;
      box-shadow: inset 0 0 1.625rem 0.125rem #d8cccc, -0.0625rem 0.0625rem 0.8125rem 0 rgba(34, 27, 20, .81);
    }
    
    .layer-text {
      position: fixed;
      left: 0rem;
      top: 0rem;
      right: 0rem;
      bottom: 0rem;
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      width: 97%;
      margin: 1.25rem 0.625rem 1.125rem; /***20px 10px 18px***/
      -webkit-box-pack: start;
      -webkit-justify-content: flex-start;
      -ms-flex-pack: start;
      justify-content: flex-start;
      -webkit-backface-visibility: hidden;
      backface-visibility: hidden;
      -webkit-perspective: 4000px;
      perspective: 4000px;
      -webkit-perspective-origin: 50% 50%;
      perspective-origin: 50% 50%;
      -webkit-transform: translate3d(0rem, 0rem, 2rem);
      transform: translate3d(0rem, 0rem, 2rem);
      -webkit-transform-style: preserve-3d;
      transform-style: preserve-3d;
    }

    .layer-text h3{
      font-family: Arial, Helvetica, sans-serif;
    }
    
    .layer-text.right {
      -webkit-transform: translate3d(-2.3125rem, 0rem, 2rem); /***-37px, 0px, 32px***/
      transform: translate3d(-2.3125rem, 0rem, 2rem); /***-37px, 0px, 32px***/
      -webkit-transform-style: preserve-3d;
      transform-style: preserve-3d;
    }
    
    .page-left-2 {
      position: relative;
      -webkit-box-flex: 1;
      -webkit-flex: 1;
      -ms-flex: 1;
      flex: 1;
      border-top-left-radius: 18%;
      border-bottom-left-radius: 1%;
      background-color: #fff;
      box-shadow: inset 0 0 7px 4px hsla(0, 13%, 82%, .43), -1px 1px 13px 0 rgba(34, 27, 20, .49);
      -webkit-backface-visibility: hidden;
      backface-visibility: hidden;
      -webkit-transform: rotateX(0deg) rotateY(17deg) rotateZ(0deg);
      transform: rotateX(0deg) rotateY(17deg) rotateZ(0deg);
      -webkit-transform-origin: 100% 50%;
      -ms-transform-origin: 100% 50%;
      transform-origin: 100% 50%;
      -webkit-transition: -webkit-transform 650ms cubic-bezier(.165, .84, .44, 1);
      transition: -webkit-transform 650ms cubic-bezier(.165, .84, .44, 1);
      transition: transform 650ms cubic-bezier(.165, .84, .44, 1);
      transition: transform 650ms cubic-bezier(.165, .84, .44, 1), -webkit-transform 650ms cubic-bezier(.165, .84, .44, 1);
      -webkit-transform-style: preserve-3d;
      transform-style: preserve-3d;
    }
    
    .page-left-2:hover {
      -webkit-transform: rotateX(0deg) rotateY(7deg) rotateZ(0deg);
      transform: rotateX(0deg) rotateY(7deg) rotateZ(0deg);
    }
    
    .left-side {
      position: relative;
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      width: 49%;
      -webkit-backface-visibility: hidden;
      backface-visibility: hidden;
      -webkit-perspective: 4000px;
      perspective: 4000px;
      -webkit-perspective-origin: 0% 50%;
      perspective-origin: 0% 50%;
      -webkit-transform: rotateX(0deg) rotateY(20deg) rotateZ(0deg);
      transform: rotateX(0deg) rotateY(20deg) rotateZ(0deg);
      -webkit-transform-origin: 100% 50%;
      -ms-transform-origin: 100% 50%;
      transform-origin: 100% 50%;
      -webkit-transform-style: preserve-3d;
      transform-style: preserve-3d;
    }
    
    .right-side {
      position: relative;
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      width: 49%;
      -webkit-perspective: 4000px;
      perspective: 4000px;
      -webkit-perspective-origin: 0% 50%;
      perspective-origin: 0% 50%;
      -webkit-transform: rotateX(0deg) rotateY(-1deg) rotateZ(0deg);
      transform: rotateX(0deg) rotateY(-1deg) rotateZ(0deg);
      -webkit-transform-style: preserve-3d;
      transform-style: preserve-3d;
    }
    
    .center {
      width: 3%;
      background-image: -webkit-radial-gradient(circle farthest-corner at 56% -8%, #fff 8%, transparent 0), -webkit-radial-gradient(circle farthest-corner at 50% 108%, #fff 8%, transparent 0), -webkit-linear-gradient(0deg, #635648, #2e1800 21%, #635648 30%, #2e1800 48%, #635648 68%, #2e1800 79%, #635648);
      background-image: radial-gradient(circle farthest-corner at 56% -8%, #fff 8%, transparent 0), radial-gradient(circle farthest-corner at 50% 108%, #fff 8%, transparent 0), linear-gradient(90deg, #635648, #2e1800 21%, #635648 30%, #2e1800 48%, #635648 68%, #2e1800 79%, #635648);
    }
    
    .corner-fold {
      position: absolute;
      left: 0px;
      top: 0px;
      width: 30px;
      height: 30px;
      border-right: 1px solid hsla(0, 13%, 82%, .55);
      border-bottom: 1px solid hsla(0, 13%, 82%, .55);
      background-image: -webkit-linear-gradient(315deg, transparent 47%, #f0f0f0 48%, #fff 55%, #f6f6f6);
      background-image: linear-gradient(135deg, transparent 47%, #f0f0f0 48%, #fff 55%, #f6f6f6);
      box-shadow: 6px 6px 9px -4px hsla(0, 13%, 82%, .53);
    }
    
    .corner {
      position: absolute;
      left: 0px;
      top: 27px;
      width: 5vw;
      height: 5vw;
      background-image: -webkit-lkostprobeninear-gradient(315deg, #fff 30%, transparent);
      background-image: linear-gradient(135deg, #fff 30%, transparent);
      box-shadow: inset 13px 0 17px -12px hsla(0, 13%, 82%, .43);
    }
    
    .corner2 {
      position: absolute;
      left: 28px;
      top: 0px;
      width: 5vw;
      height: 5vw;
      background-image: -webkit-linear-gradient(315deg, #fff 31%, transparent);
      background-image: linear-gradient(135deg, #fff 31%, transparent);
      box-shadow: inset 0 13px 17px -12px hsla(0, 13%, 82%, .43);
    }
    
    .page-text {
      position: relative;
      display: block;
      width: 80%;
      margin-top: 25px;
      margin-right: auto;
      margin-left: auto;
    }
    
    .page-text p {
      margin-bottom: 0px;
      font-size: 0.85vw;
      line-height: 1.5;
    }
    
    .layer2 {
      position: fixed;
      left: 0px;
      top: 0px;
      right: 0px;
      bottom: 0px;
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      margin: 20px 10px 13px;
      -webkit-box-pack: start;
      -webkit-justify-content: flex-start;
      -ms-flex-pack: start;
      justify-content: flex-start;
      -webkit-transform: translate3d(2px, 0px, 10px);
      transform: translate3d(2px, 0px, 10px);
      -webkit-transform-style: preserve-3d;
      transform-style: preserve-3d;
    }
    
    .layer2.right {
      -webkit-transform: translate3d(-5px, 0px, 10px);
      transform: translate3d(-5px, 0px, 10px);
      -webkit-transform-style: preserve-3d;
      transform-style: preserve-3d;
    }
    
    .layer3 {
      position: fixed;
      left: 0px;
      top: 0px;
      right: 0px;
      bottom: 0px;
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      margin: 20px 10px 13px;
      -webkit-box-pack: start;
      -webkit-justify-content: flex-start;
      -ms-flex-pack: start;
      justify-content: flex-start;
      -webkit-transform: translate3d(4px, 0px, 20px);
      transform: translate3d(4px, 0px, 20px);
      -webkit-transform-style: preserve-3d;
      transform-style: preserve-3d;
    }
    
    .layer3.right {
      -webkit-transform: translate3d(-10px, 0px, 20px);
      transform: translate3d(-10px, 0px, 20px);
      -webkit-transform-style: preserve-3d;
      transform-style: preserve-3d;
    }
    
    .layer4 {
      position: fixed;
      left: 0rem;
      top: 0rem;
      right: 0rem;
      bottom: 0rem;
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      margin: 20px 10px 15px;
      -webkit-box-pack: start;
      -webkit-justify-content: flex-start;
      -ms-flex-pack: start;
      justify-content: flex-start;
      -webkit-transform: translate3d(6px, 0px, 30px);
      transform: translate3d(6px, 0px, 30px);
      -webkit-transform-style: preserve-3d;
      transform-style: preserve-3d;
    }
    
    .layer4.right {
      -webkit-transform: translate3d(-15px, 0px, 30px);
      transform: translate3d(-15px, 0px, 30px);
      -webkit-transform-style: preserve-3d;
      transform-style: preserve-3d;
    }
    
    .page-right-2 {
      position: relative;
      -webkit-box-flex: 1;
      -webkit-flex: 1;
      -ms-flex: 1;
      flex: 1;
      border-top-right-radius: 1%;
      border-bottom-right-radius: 1%;
      background-color: #fff;
      box-shadow: inset 0 0 7px 4px hsla(0, 13%, 82%, .43), 1px 1px 13px 0 rgba(34, 27, 20, .49);
      -webkit-backface-visibility: hidden;
      backface-visibility: hidden;
      -webkit-transform: rotateX(0deg) rotateY(-3deg) rotateZ(0deg);
      transform: rotateX(0deg) rotateY(-3deg) rotateZ(0deg);
      -webkit-transform-origin: 0% 50%;
      -ms-transform-origin: 0% 50%;
      transform-origin: 0% 50%;
      -webkit-transition: -webkit-transform 850ms ease;
      transition: -webkit-transform 850ms ease;
      transition: transform 850ms ease;
      transition: transform 850ms ease, -webkit-transform 850ms ease;
      -webkit-transform-style: preserve-3d;
      transform-style: preserve-3d;
    }
    
    .page-right-2:hover {
      -webkit-transform: rotateX(0deg) rotateY(-17deg) rotateZ(0deg);
      transform: rotateX(0deg) rotateY(-17deg) rotateZ(0deg);
    }
    
    .page-right {
      -webkit-box-flex: 1;
      -webkit-flex: 1;
      -ms-flex: 1;
      flex: 1;
      border-top-right-radius: 1%;
      border-bottom-right-radius: 1%;
      box-shadow: inset 0 0 26px 2px #d8cccc, 1px 1px 13px 0 rgba(34, 27, 20, .81);
    }

    /***Parallax images***/
    .parallax-img{
      background-image: url(../img/buecher-parallax.jpg); /***adding background-image***/
      background-size: cover; /***stop background-image from repeating***/
      background-position: top center; /***position image 
                                          could also be e.g. 'bottom center'***/
      background-repeat: none; /***just to make sure it's not repeating***/

      /***givig the image a width and a height***/
      width: 98vw; 
      height: 25rem; /***400px***/

      /***NOTE: this gets disabled on mobile due to performance***/
      background-attachment: fixed; /***THIS MAKES THE IMAGE SCROLL !!!***/
      
      /***Centering the content***/
      display: flex; /***flexing the h3 (it's the only thing that is in there***/
      justify-content: center; /***puts it in the middle***/
      align-items: center; /***puts it in the center of the <div> 
                              when using display: flex; ***/
      margin: 0 auto;
      margin-top: 5rem;
    }

    .parallax-img h3{
      font-family: 'Architects Daughter', cursive;
      font-size: 2rem;
    }





    .buecher-prallax-heading a,
    .forschungsreisen .forschungsreisen-parallax-heading a,
    .gemaelde-index-content h3 a{
      font-size: 3.75vw;
    }
  }


@media screen and (max-width: 991px) {
  .scene {
    height: 56vw;
  }
  .book-wrap {
    width: 62vw;
  }
  .page-left-2 {
    border-top-left-radius: 20%;
  }
  .corner-fold {
    left: 0%;
    top: -1%;
    width: 3.5vw;
    height: 3.5vw;
    max-height: 35px;
    background-image: -webkit-linear-gradient(315deg, transparent 50%, #f0f0f0 51%, #fff 52%, #f6f6f6);
    background-image: linear-gradient(135deg, transparent 50%, #f0f0f0 51%, #fff 52%, #f6f6f6);
  }
  .corner {
    top: 8%;
  }
  .page-text h3 {
    margin-top: 2vw;
    margin-bottom: 1vw;
    font-size: 3vw;
  }
  .page-text h6 {
    margin-top: 1vw;
    margin-bottom: 1vw;
    font-size: 1vw;
  }
  .page-right-2 {
    padding-left: 9%;
  }
}

@media screen and (max-width: 767px) {
  .book-wrap {
    width: 80vw;
    margin-bottom: 2vw;
  }
  .layer-text {
    width: 94%;
    -webkit-transform: translate3d(0px, 0px, 20px);
    transform: translate3d(0px, 0px, 20px);
  }
  .layer-text.right {
    -webkit-box-pack: end;
    -webkit-justify-content: flex-end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    -webkit-transform: translate3d(-34px, 0px, 24px);
    transform: translate3d(-34px, 0px, 24px);
  }
  .page-left-2 {
    border-top-left-radius: 23%;
    -webkit-transform: rotateX(0deg) rotateY(17deg) rotateZ(0deg) translate(9px, 0px);
    transform: rotateX(0deg) rotateY(17deg) rotateZ(0deg) translate(9px, 0px);
  }
  .corner-fold {
    width: 4.5vw;
    height: 4.5vw;
    max-height: 29px;
    min-width: 29px;
    background-image: -webkit-linear-gradient(310deg, transparent 48%, #f0f0f0 49%, #fff 50%, #f6f6f6);
    background-image: linear-gradient(140deg, transparent 48%, #f0f0f0 49%, #fff 50%, #f6f6f6);
  }
  .page-text {
    margin-top: 2vw;
  }
  .page-text h3 {
    margin-top: 0vw;
    font-size: 3vw;
  }
  .layer2 {
    -webkit-transform: translate3d(2px, 0px, 6px);
    transform: translate3d(2px, 0px, 6px);
  }
  .layer2.right {
    -webkit-transform: translate3d(-5px, 0px, 6px);
    transform: translate3d(-5px, 0px, 6px);
  }
  .layer3 {
    -webkit-transform: translate3d(4px, 0px, 12px);
    transform: translate3d(4px, 0px, 12px);
  }
  .layer3.right {
    -webkit-transform: translate3d(-10px, 0px, 12px);
    transform: translate3d(-10px, 0px, 12px);
  }
  .layer4 {
    -webkit-transform: translate3d(6px, 0px, 18px);
    transform: translate3d(6px, 0px, 18px);
  }
  .layer4.right {
    -webkit-transform: translate3d(-15px, 0px, 18px);
    transform: translate3d(-15px, 0px, 18px);
  }
  .page-right-2 {
    width: 92%;
    -webkit-box-flex: 0;
    -webkit-flex: 0 auto;
    -ms-flex: 0 auto;
    flex: 0 auto;
  }
}


@media screen and (min-width: 1500px){
  .scene{
    height: 45vw; /***40vw***/
    width: 45vw; /***40% ***/
    margin: 0 auto;
    margin-top: 4rem;
    padding: 0;
  }

  img.book-image{
    width: 18rem;
    height: 18rem;
  }
 
  .buecher-prallax-heading a,
  .forschungsreisen .forschungsreisen-parallax-heading a,
  .gemaelde-index-content h3 a{
    font-size: 3.0vw;
  }
}


@media screen and (min-width: 1600px) {
  /******************MENU MENU MENU***********************************************************/

        /***BOOK ANIMATION***/
        .scene{
          height: 43vw; /***40vw***/
          width: 43%; /***40% ***/
          margin: 0 auto;
          margin-top: 4rem;
          padding: 0;
        }
        /***BOOK ANIMATION***/
    }

  @media (max-width: 479px) {
    .scene {
      height: 69vw;
    }
    .corner-fold {
      width: 5.5vw;
      height: 5.5vw;
      min-width: 21px;
    }
  }
  /* END FOR BOOK ANIMATION */

/***adjusting image on book animation***/

  @media screen and (min-width: 1345px){
    .book-image{
        width: 14rem;
        height: 18rem;
    }
  }


  /* @media screen and (min-width: 1400px){ 
    .forschungsreisen-bilder .forschung-syrien{
      margin-left: 2rem;
    }
  } */


  @media screen and (min-width: 1395px){
    .book-image{
        width: 17rem;
        height: 20rem;
    } 
  }


@media screen and (min-width: 1400px){
    .forschungsreisen-bilder .forschung-syrien{
      margin-left: 2rem;
    }


    /* BOOK ANIMATION IMAGE */
    .book-image{
        padding-top: 1rem;
        height: 20rem; /***12..5rem***/
        width: 16rem; /***12rem***/
    }

    .books_panel{
      width: 87.5rem; /***1400px***/
      padding-top: 30rem; /***40***/
    }

    .parallax-effect{
      height: 70rem;
    }

    .parallax-effect h2{
      margin-bottom: -20rem; /***-25***/
    }

    .forschungsreisen-bilder{
      margin-top: -93rem;
    }

    .forschungsreisen h2{
      margin-top: -82rem;
    }

    .books_panel .book_panel_first_div{
      margin-left: 3rem;
    }
}

@media screen and (min-width: 1430px){
  /* BOOK ANIMATION IMAGE */
  .book-image{
      padding-top: 1rem;
      height: 21.5rem; /***12..5rem***/
      width: 17rem; /***12rem***/
  }
}

@media screen and (min-width: 1450px){
    /* BOOK ANIMATION IMAGE */
    .book-image{
        height: 22rem;
        width: 19rem;
    }
}

@media screen and (min-width: 1520px){
    /* BOOK ANIMATION IMAGE */
    .book-image{
        height: 23rem;
        width: 20rem;
    }
}

@media screen and (min-width: 1580px){
  /* BOOK ANIMATION IMAGE */
  .book-image{
      height: 24rem;
      width: 21rem;
  }
}

@media screen and (min-width: 1600px){
  /* BOOK ANIMATION IMAGE */
  .book-image{
      height: 18rem;
      width: 22rem;
  }
}

@media screen and (min-width: 1640px){
    /* BOOK ANIMATION IMAGE */
    .book-image{
        height: 18rem; 
        width: 23rem;
    }
}

@media screen and (min-width: 1720px){
    /* BOOK ANIMATION IMAGE */
    img.book-image{
        height: 21rem;
        width: 24rem;
    }
}

@media screen and (min-width: 1800px){
    /* BOOK ANIMATION IMAGE */
    img.book-image{
        height: 22rem;
        width: 25rem;
    }
}

@media screen and (min-width: 1880px){
    /* BOOK ANIMATION IMAGE */
    img.book-image{
        height: 23rem;
        width: 30rem;
    }
}

@media screen and (min-width: 1960px){
    /* BOOK ANIMATION IMAGE */
    img.book-image{
        height: 24rem;
        width: 32rem;
    }
}

@media screen and (min-width: 2040px){
    /* BOOK ANIMATION IMAGE */
    img.book-image{
        height: 25rem;
        width: 33rem;
    }
}

@media screen and (min-width: 2120px){
    /* BOOK ANIMATION IMAGE */
    .book-image{
        height: 27rem;
        width: 26rem;
    }
}

@media screen and (min-width: 2220px){
    /* BOOK ANIMATION IMAGE */
    img.book-image{
        height: 26rem;
        width: 25rem;
    }
}

@media screen and (min-width: 2300px){
    /* BOOK ANIMATION IMAGE */
    img.book-image{
        height: 27rem;
        width: 23rem;
    }
}

@media screen and (min-width: 2380px){
    /* BOOK ANIMATION IMAGE */
    img.book-image{
        height: 28rem;
        width: 24rem;
    }
}

@media screen and (min-width: 2460px){
    /* BOOK ANIMATION IMAGE */
    img.book-image{
        height: 29rem;
        width: 25rem;
    }
}

@media screen and (min-width: 2540px){
    /* BOOK ANIMATION IMAGE */
    img.book-image{
        height: 30rem;
        width: 28rem;
    }
}
/********************END BOOK ANIMATION*****/

/* ==========================================================================
   ENHANCEMENTS: ACCESSIBILITY, DSGVO 2-CLICK VIDEO, BREADCRUMBS, MULTILINGUAL
   ========================================================================== */

/* 1. Skip to main content link for a11y */
.skip-link {
    position: absolute;
    top: -100px;
    left: 10px;
    background: #ecc096;
    color: #441212;
    padding: 10px 16px;
    font-weight: bold;
    z-index: 100000;
    text-decoration: none;
    border-radius: 4px;
    transition: top 0.2s ease;
    border: 2px solid #441212;
}
.skip-link:focus {
    top: 10px;
}

/* 2. Language Switcher in Navigation */
.lang-switcher {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: 15px;
    font-family: 'PT Sans', sans-serif;
    font-size: 0.95rem;
    color: #ecc096;
}
.lang-link {
    color: #ecc096;
    text-decoration: none;
    padding: 2px 6px;
    border-radius: 3px;
    transition: background-color 0.2s, color 0.2s;
}
.lang-link:hover, .lang-link.active {
    background-color: #ecc096;
    color: #441212 !important;
    font-weight: bold;
}

/* 3. Breadcrumbs */
.breadcrumbs {
    max-width: 1200px;
    margin: 10px auto 0;
    padding: 8px 20px;
    font-size: 0.9rem;
    color: #ecc096;
}
.breadcrumbs a {
    color: #ecc096;
    text-decoration: underline;
}
.breadcrumbs a:hover {
    color: #ffffff;
}
.breadcrumb-separator {
    margin: 0 8px;
    opacity: 0.7;
}

/* 4. Two-Click Privacy YouTube Embed Container */
.video-consent-wrapper {
    position: relative;
    width: 560px;
    max-width: 100%;
    height: 315px;
    background: linear-gradient(135deg, #1e0b0b, #441212);
    border: 2px solid #ecc096;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.4);
}
.video-consent-wrapper iframe {
    width: 100%;
    height: 100%;
    border: none;
}
.video-placeholder {
    padding: 20px;
    text-align: center;
    color: #ecc096;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.play-btn-circle {
    width: 64px;
    height: 64px;
    background: rgba(236, 192, 150, 0.2);
    border: 2px solid #ecc096;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
    cursor: pointer;
    transition: transform 0.3s, background-color 0.3s;
}
.play-btn-circle:hover {
    transform: scale(1.1);
    background: rgba(236, 192, 150, 0.4);
}
.consent-text {
    font-size: 0.85rem;
    line-height: 1.4;
    margin-bottom: 12px;
    max-width: 400px;
    color: #ecc096;
}
.video-load-btn {
    background: #ecc096;
    color: #441212;
    border: none;
    padding: 8px 18px;
    font-size: 0.95rem;
    font-weight: bold;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s;
}
.video-load-btn:hover {
    background: #ffffff;
    color: #1e0b0b;
}

/* 5. Accessible Focus Visible Ring */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
    outline: 2px solid #ecc096;
    outline-offset: 3px;
}