/* =====  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);
}


/* Toast — global single-slot notification (see _toast.js)
 * ------------------------------------------------------- */
#toast{
position:fixed;
bottom:1.5rem;
right:1.5rem;
max-width:22rem;
padding:.75rem 1.25rem;
background:rgba(0, 0, 0, .85);
color:hsl(0, 0%, 100%);
border-radius:var(--brd-radius-25);
box-shadow:0 .25rem .75rem rgba(0, 0, 0, .2);
font-size:var(--fs-s);
line-height:1.35;
opacity:0;
transform:translateY(1rem);
transition:opacity 300ms ease-out, transform 300ms ease-out;
pointer-events:none;
z-index:10000;
}

#toast.is-visible{
opacity:1;
transform:translateY(0);
}


/* Breadcrumb — <nav class="breadcrumb"> enthaelt <ol> mit BreadcrumbList-
 * Microdata (siehe Html::function_system_html_part_breadcrumb). Einzeilig,
 * horizontal scrollbar bei Ueberlauf. Separator als ::after auf jedem
 * aber nicht auf dem letzten <li>. */
.breadcrumb{
width:100%;
margin:.75rem 0 .5rem 0;
font-size:var(--fs-s);
overflow-x:auto;
}

.breadcrumb ol{
list-style:none;
margin:0;
padding:0;
display:flex;
flex-wrap:nowrap;
gap:0;
}

.breadcrumb li{
display:inline-flex;
align-items:center;
white-space:nowrap;
}

.breadcrumb li:not(:last-child)::after{
content:'›';
margin:0 .5rem;
opacity:.5;
}

.breadcrumb a{
text-decoration:none;
color:inherit;
opacity:.7;
transition:opacity .15s ease;
}

.breadcrumb a:hover{
opacity:1;
text-decoration:underline;
}

.breadcrumb [aria-current="page"]{
font-weight:600;
}