/* ==========================================================
   KWS Loader (einfache Variante) – Styles
   html.kwsl-loading  Loader aktiv
   html.kwsl-out      Loader blendet aus
   ========================================================== */

.kwsl { display: none; }

html.kwsl-loading,
html.kwsl-loading body { overflow: hidden; }

html.kwsl-loading .kwsl,
html.kwsl-out .kwsl {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 28px;
position: fixed;
inset: 0;
z-index: 100000;
background: #fff;
/* erst nach 0,2 s einblenden: schnelle Seiten zeigen keinen Loader */
animation: kwsl-show .25s ease-out .2s both;
}

html.kwsl-out .kwsl {
animation: kwsl-hide .4s ease both;
}

@keyframes kwsl-show {
from { opacity: 0; }
to   { opacity: 1; }
}
@keyframes kwsl-hide {
from { opacity: 1; }
to   { opacity: 0; visibility: hidden; }
}

.kwsl-sr {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
}

/* Logo: Farbflächen pulsieren leicht nacheinander */
.kwsl-logo {
width: min(170px, 45vw);
height: auto;
overflow: visible;
}
.kwsl-part {
transform-box: fill-box;
transform-origin: center;
animation: kwsl-pulse 1.6s ease-in-out infinite;
animation-delay: calc(var(--i) * 0.1s);
}
@keyframes kwsl-pulse {
0%, 100% { transform: scale(1); }
50%      { transform: scale(1.06); }
}

/* Ladebalken in den Logofarben */
.kwsl-bar {
--kwsl-bar-w: min(180px, 50vw);
width: var(--kwsl-bar-w);
height: 4px;
border-radius: 2px;
background: #e6edf0;
overflow: hidden;
}
.kwsl-bar > span {
display: block;
width: 0;
height: 100%;
border-radius: 2px;
background: linear-gradient(90deg, #69c8f3 0%, #00aaa4 28%, #80bb30 55%, #fcea10 80%, #9d897b 100%);
background-size: var(--kwsl-bar-w) 100%;
transition: width .2s ease-out;
}

/* Einflug-Animation des Sticky-Kontakts erst nach dem Loader */
html.kwsl-loading .sticky-kontakt { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
html.kwsl-loading .kwsl { animation: none; }
.kwsl-part { animation: none; }
.kwsl-bar > span { transition: none; }
html.kwsl-out .kwsl { animation: none; opacity: 0; }
}