/* =====  UTILITIES  =====
 * Einzelne Util-Klassen + globale Progressbar. */


#page-progressbar{
background: linear-gradient(to right, var(--bgr-progressbar-300) 0%, var(--bgr-progressbar-400)  100%);
position:fixed;
top:0;
left:0;
width:0;
height:2px;
z-index:10000;
}


.asset{
float:left;
width:100%;
margin:.25rem 0;
padding:.25rem 0;
border-top:var(--brd-gray-300) 1px solid;
border-bottom:var(--brd-gray-300) 1px solid;
}

.asset a{
float:right;
}


.show{
float:left;
width:100%;
animation:fade-in 850ms ease-in forwards;
}

.hide{
float:left;
width:100%;
animation:fade-out 850ms ease-out forwards;
}


.toggle{
transition:height 250ms ease-in-out;
overflow:hidden;
}

.toggle:not(.active) {
display:none;
}


/* Scroll-Reveal Default
 * ----------------------
 * Jedes Element mit .scroll-reveal bekommt ohne weitere CSS-Regel eine
 * dezente Fade+Slide-up-Animation, sobald _scroll-reveal.js .visible
 * setzt. Spezifischere Selektoren (z.B. .container article, .media-
 * wrapper::before, .feature-wrapper .icon) schlagen diese Defaults
 * automatisch per Spezifitaet. */
.scroll-reveal{
opacity:0;
transform:translateY(1rem);
transition:opacity 600ms ease-out, transform 600ms ease-out;
}

.scroll-reveal.visible{
opacity:1;
transform:translateY(0);
}