/*------------------------------------------------------------------------------Seitenübergreifende Icons */
.stern{  
    position:fixed;
    z-index: 3;
    width: 12px;
    height: 12px;
    padding: 15px;
    animation: 6s pulsieren infinite;
}


@keyframes pulsieren{
    90% {opacity: 0.25;}
    100% {opacity: 100;}
}


@media only screen and (min-width:1024px){.stern {width: 15px; height: 15px;}}
@media only screen and (min-height:1024px){.stern {width: 15px; height: 15px;}}
@media only screen and (min-width:1920px){.stern {width: 20px; height: 20px;}}
@media only screen and (min-height:1920px){.stern {width: 20px; height: 20px;}}



/*-----------------------hover / Bildwechsel */
.active{display: block;}
.hover{display: none;}
a:hover .active{display: none;}
a:hover .hover{display: block;}


.logo, .icon, .upicon{background-repeat: no-repeat;}



/*--------------------------------------------Logo */
@media only screen and (orientation: portrait) and (max-width:568px){.logo {width:80vw;}}
@media only screen and (orientation: portrait) and (min-width:569px){.logo {width:40vw;}}


@media only screen and (orientation: landscape) and (max-height:568px){.logo {height:45vh;}}
@media only screen and (orientation: landscape) and (min-height:569px){.logo {height:35vh;}}



/*--------------------------------------------Icon-Standard */
@media only screen and (orientation: portrait) and (max-width:568px){ .icon {width: 45vw;}}
@media only screen and (orientation: portrait) and (min-width:569px){ .icon {width: 25vw;}}
@media only screen and (orientation: landscape) and (max-height:568px){ .icon {height: 40vh;}}
@media only screen and (orientation: landscape) and (min-height:569px){ .icon {height: 25vh;}}

/*--------------------------------------------Print-Icon */
@media only screen and (orientation: portrait) and (max-width:568px){ .print-icon{width: 50vw;}}
@media only screen and (orientation: portrait) and (min-width:569px){ .print-icon{width: 25vw;}}
@media only screen and (orientation: landscape) and (max-height:568px){ .print-icon{height: 75vh;}}
@media only screen and (orientation: landscape) and (min-height:569px){ .print-icon{height: 37.5vh;}}


/*--------------------------------------------Up-Icon */
@media only screen and (orientation: portrait) and (max-width:568px){ .upicon {width: 40vw;}}
@media only screen and (orientation: portrait) and (min-width:569px){ .upicon {width: 20vw;}}
@media only screen and (orientation: landscape) and (max-height:568px){ .upicon {height: 40vh;}}
@media only screen and (orientation: landscape) and (min-height:569px){ .upicon {height: 20vh;}}

/*--------------------------------------------Mail-Icon */
@media only screen and (orientation: portrait) and (max-width:568px){ .mail-icon {width: 30vw;}}
@media only screen and (orientation: portrait) and (min-width:569px){ .mail-icon {width: 20vw;}}
@media only screen and (orientation: landscape) and (max-height:568px){ .mail-icon {height: 40vh;}}
@media only screen and (orientation: landscape) and (min-height:569px){ .mail-icon {height: 30vh;}}


/*--------------------------------------------Line-Icon */
@media only screen and (orientation: portrait) and (max-width:568px){.line-icon{width: 35vw;}}
@media only screen and (orientation: portrait) and (min-width:569px){.line-icon{width: 17.5vw;}}
@media only screen and (orientation: landscape) and (max-height:568px){.line-icon{height: 60vh;}}
@media only screen and (orientation: landscape) and (min-height:569px){.line-icon{height: 30vh;}}





/*--------------------------------------------E-Mail-Icon - Wechsel*/

@media only screen and (orientation: portrait){#icon-mail-portrait{display:none;}}    
@media only screen and (orientation: landscape){#icon-mail-landscape{display:none;}}




/*-----------------------------------------------------------------------------Anfahrt/Karte/Mail/Icons/Landscape/Mobile */
.mlandscape{display: none;}
@media only screen and (max-width:768px) and (orientation: landscape){
.dportrait{display: none;}
.mlandscape{display: block;}
}

/*------------------------------------------------------------------------------Startseite */

/* hover-icons */
#hover-drucker:hover{background-image: url("../img/start/storys/druck-hover.svg")}
#hover-lupe:hover{background-image: url("../img/start/storys/lupe-hover.svg")}
#hover-muenze:hover{background-image: url("../img/start/storys/muenze-hover.svg")}
#hover-hoerer:hover{background-image: url("../img/start/storys/hoerer-hover.svg")}



/*------------------------------------------------------------------------------footer mandala */
@media only screen and (orientation: portrait){.footer-desktop{display:none;} .footer-mobile{display:block; width: 100vw;}}    
@media only screen and (orientation: landscape){.footer-mobile{display:none;} .footer-desktop{display:block; width: 100vw;}}