@charset "UTF-8";


.teaser_text a, a:visited {
	color: #b7a36d;
	text-decoration: none;
}
.teaser_text a:hover {
	color: #999;
	text-decoration: none;
}

.teaser_text_2 a, a:visited {
	color: #000;
	text-decoration: none;
}
.teaser_text_2 a:hover {
	color: #000;
	text-decoration: none;
}



@media only screen and (max-width: 480px) {
    .onlydesktop {
        display: none !important;
    }
}

@media only screen and (min-width: 481px) {
    .onlymobile {
        display: none !important;
    }
}


/*  =====   teaser   ==================================================  */

#teaser {
	margin-top:5px;
	width:100%;
}
.teaser_1 {
	padding: 12px 30px 10px 20px;
	background: url(../images/arrow_teaser_1.svg) no-repeat right 10px bottom 22px;
	background-size: 24px;
	background-color: rgba(0, 0, 0, 0.9);
}
.teaser_no_arrow {
	padding: 12px 30px 10px 20px;
	background-color: rgba(0, 0, 0, 0.9);
}
.teaser_2 {
	margin-top:5px;
	padding: 12px 30px 10px 20px;
	background-color: rgba(170, 150, 100, 0.9);
}

@media only screen and (min-width: 481px) {
#teaser {
	padding-right: 20%;
}
}

@media only screen and (min-width: 768px) {
#teaser {
	position:absolute;
/*	right: 25px;  */  
	left: 25px;
/*	top: 25px;  */
	bottom: 15px;
	width: 42%;
	max-height:75%;
	padding-right: 10px;
}
.teaser_1, .teaser_no_arrow {
	position:relative;
	background-color: rgba(0, 0, 0, 0.8);
	transition: 1s ease;
}
.teaser_1:hover {
	background-color: rgba(0, 0, 0, 0.9);
	}
.teaser_2 {
	position:relative;
	background-color: rgba(170, 150, 100, 0.8);
	transition: 1s ease;
}
.teaser_2:hover {
	background-color: rgba(170, 150, 100, 0.9);
}

.teaser_1:hover, .teaser_2:hover {
	-webkit-transform: scale(1.01);
	-ms-transform: scale(1.01);
	transform: scale(1.01);
	transition: 1s ease;
	}  
}

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) 
and (-webkit-min-device-pixel-ratio: 2) { 
#teaser {
	width: 38%;
	max-height:75%;
}	
}

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape)
and (-webkit-min-device-pixel-ratio: 2) {
#teaser {
	max-height:80%;
}	
}


/*  =====   teaser_title   ==================================================  */

.teaser_title, .teaser_title_2, .teaser_aktuell {
	font-family:'Oswald' , Helvetica, Arial, sans-serif;
	color:#b7a36d;
	line-height:120%;
	text-transform:uppercase;
	margin: 10px 0;
	font-size:19px;  
}
.teaser_title_2 {
	color:#FFF;
}


@media only screen and (min-width: 481px) {
.teaser_title, .teaser_title_2, .teaser_aktuell {
	font-size:26px;  
}
}

@media only screen and (min-width: 768px) {
.teaser_title, .teaser_title_2, .teaser_aktuell {
	font-size:18px;
}
}

@media only screen and (min-width: 850px) {
.teaser_title, .teaser_title_2, .teaser_aktuell {
	font-size:22px;
}
}

@media only screen and (min-width: 950px) {
.teaser_title, .teaser_title_2, .teaser_aktuell {
	font-size:20px;
}
}

@media only screen and (min-width: 1025px) {
.teaser_title, .teaser_title_2, .teaser_aktuell {
	font-size:20px;
}
}
@media only screen and (min-width: 1300px) {
.teaser_title, .teaser_title_2, .teaser_aktuell {
	font-size:26px;
}
}

/*  */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) 
and (-webkit-min-device-pixel-ratio: 2) { 
.teaser_title, .teaser_title_2, .teaser_aktuell {
	font-size:18px;
	margin: 3px 0;
/*	color: #F3C;    */
}	
}

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape)
and (-webkit-min-device-pixel-ratio: 2) {
.teaser_title, .teaser_title_2, .teaser_aktuell {
	font-size:24px;
/* 	color:#39F;  blue */
}	
}

.teaser_aktuell {
	color: #FFF;
	margin: 0;;
}


/*  =====   teaser_text   ==================================================  */

.teaser_text, .teaser_text_2, .teaser_text_gold {
	font-family:Helvetica, Arial, sans-serif;
	font-family:'Oswald' , Helvetica, Arial, sans-serif;
/*	color:#FFF; */
	color: #b7a36d;
	font-size:16px;
	line-height:120%;
	padding: 2px 0; 
}
.teaser_text_2 {
	color:#000;
}
.teaser_text_gold {
	color:#b7a36d;
}

@media only screen and (min-width: 481px) {
.teaser_text, .teaser_text_2 {
	font-size:16px;
}
}

@media only screen and (min-width: 769px) {
.teaser_text, .teaser_text_2 {
	font-size:14px;
}
}

@media only screen and (min-width: 1125px) {
.teaser_text, .teaser_text_2 {
	font-size:15px;
}
}  

@media only screen and (min-width: 768px) and (-webkit-min-device-pixel-ratio: 2) {
.teaser_text, .teaser_text_2 {
	font-size:18px;
}	
}

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) 
and (-webkit-min-device-pixel-ratio: 2) { 
.teaser_text, .teaser_text_2 {
	font-size:16px;
}	
}

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) 
and (-webkit-min-device-pixel-ratio: 2) { 
.teaser_text, .teaser_text_2 {
	font-size:17px;
}	
}

/*  ======   Pfeil   ===================  */

.teaser_1_arrow {
    position: absolute;
    height: 24px;
    width: 24px;
    background: url(../images/arrow_teaser_1.svg) no-repeat center center;
    background-size: 100%;
    right: 10px;
    bottom: 22px;
}
.teaser_2_arrow {
    position: absolute;
    height: 24px;
    width: 24px;
    background: url(../images/arrow_teaser_2.svg) no-repeat center center;
    background-size: 100%;
    right: 10px;
    bottom: 22px;
}



/*  ======   Slide_in   ===================   */

.teaser_1 {
    -webkit-animation: 2s ease 0s normal forwards 1 fadein;
    animation: 2s ease 0s normal forwards 1 fadein;
}

.teaser_slide_in_2 {
    -webkit-animation: 2.5s ease 0s normal forwards 1 fadein;
    animation: 2.5s ease 0s normal forwards 1 fadein;
}

.teaser_slide_in_3 {
    -webkit-animation: 3s ease 0s normal forwards 1 fadein;
    animation: 3s ease 0s normal forwards 1 fadein;
}


.teaser_2{
    -webkit-animation: 3s ease 0s normal forwards 1 fadein_2;
    animation: 3s ease 0s normal forwards 1 fadein_2;
}

@keyframes fadein{
    0% { opacity:0; }
    30% { opacity:0; }
    100% { opacity:1; }
}

@keyframes fadein_2{
    0% { opacity:0; }
    50% { opacity:0; }
    100% { opacity:1; }
}