/* Animation der App-Navigation */

.animated {
  animation-duration: 500ms;
  animation-fill-mode: both;
}
.fadeIn {
  animation-name: fadeIn;
}
.fadeOut {
  animation-name: fadeOut;
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(200px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeOut {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(200px); }
}


/* Custom Classes */


.via-smooth-animation {
transition: 1s;
}

.glassy {
backdrop-filter: blur( 20px );
-webkit-backdrop-filter: blur( 20px );
}

.fliesstext {
text-align: justify !important;
text-align-last: left;
hyphens: auto;
}

.elementor-button-icon { 
    font-size:.8rem; 
    vertical-align:middle;
}

.bierhaus-gradient {
    background-image: conic-gradient(from var(--angle), #e40000, #741308, #e40000);
}

 /* via-gradient-border */

:root {
    
    --abstand: 2rem;
}

@property --angle {
    syntax: "<angle>";
		inherits: false;
    initial-value: 0deg;
}

@-moz-keyframes spin {    
        from {--angle: 0deg;}
		    to {--angle: 360deg;}
  }	
	
@-webkit-keyframes spin	{    
        from {--angle: 0deg;}
		    to {--angle: 360deg;}
  }
	
@keyframes spin {    
        0% {--angle: 0deg;}
		    100% {--angle: 360deg;}
  }
  

.via-gradient-border::after, .via-gradient-border::before {
    content: '';
    position: absolute;
    height: 100%;
    width: 100%;
    top: var(--abstand);
    left: var(--abstand);
    z-index: -1;
    
 /* Breite der Border = padding */
    padding: 2px;

/* Farbverlauf eintragen */

    background-image: conic-gradient(from var(--angle), #e40000, #741308, #e40000);
    
/* Animation eintragen */

 	  -webkit-animation: 4s spin linear infinite;
    -moz-animation: 4s spin linear infinite;
    -ms-animation: 4s spin linear infinite;    
    animation: 4s spin linear infinite;

/* Maske */
    -webkit-mask: 
        linear-gradient(#fff 0 0) content-box, 
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: destination-out;
    mask-composite: exclude; 
*/
    
}


/* Blurry Border (NUR OHNE MASKE) */
.via-gradient-border::before {
    filter: blur(1.5rem);
    opacity:1;
}


 /* via-container-border */

.via-container-border::after{
    content: '';
    position: absolute;
    height: 100%;
    width: 100%;
    top: var(--abstand);
    left: var(--abstand);
    z-index: -1;

 /* Breite der Border = padding */
    padding: 2px;


/* Maske */
    -webkit-mask: 
        linear-gradient(#fff 0 0) content-box, 
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: destination-out;
    mask-composite: exclude; 
    
}

 @media only screen and (max-width: 900px){
     :root {
     --abstand: -1rem;
    }
    

.via-gradient-border::after, .via-gradient-border::before, .via-container-border::after {
        content: '';
    position: absolute;
    height: calc(100%);
    width: calc(100% + 2rem);
    top: calc(var(--abstand) + 2rem);
    left: var(--abstand);
}
}