/* KLF Slider – Frontend */
.kls{position:relative;width:100%;container-type:inline-size;container-name:kls;line-height:normal;--kls-sbw:0px}
.kls--w-full{width:calc(100vw - var(--kls-sbw));margin-left:calc(50% - (100vw - var(--kls-sbw)) / 2);max-width:none}
.kls--w-custom{max-width:var(--kls-maxw);margin-left:auto;margin-right:auto}
.kls *,.kls *::before,.kls *::after{box-sizing:border-box}

.kls__stage{position:relative;overflow:hidden;width:100%;--u:min(1px,calc(100vw / var(--kls-g)));height:calc(var(--kls-h) * var(--u));min-height:var(--kls-mh);background:#000;touch-action:pan-y}
.kls--hm-fixed .kls__stage{height:calc(var(--kls-h) * 1px)}
.kls--hm-vh .kls__stage{height:calc(var(--kls-h) * 1vh);height:calc(var(--kls-h) * 1svh)}

/* Slides */
.kls__slide{position:absolute;inset:0;opacity:0;visibility:hidden;z-index:1}
.kls__slide:first-child{opacity:1;visibility:visible}
.kls.is-ready .kls__slide:first-child:not(.is-active){opacity:0;visibility:hidden}
.kls__slide.is-active{opacity:1;visibility:visible;z-index:3}
.kls__slide.is-leaving{opacity:1;visibility:visible;z-index:2}
.kls--t-fade .kls__slide.is-active{animation:kls-fade var(--kls-speed) ease both}
.kls--t-slide .kls__slide.is-active,.kls--t-slide .kls__slide.is-leaving{transition:transform var(--kls-speed) cubic-bezier(.4,0,.2,1)}
.kls__slide.kls-off{display:none!important}
@keyframes kls-fade{from{opacity:0}to{opacity:1}}

.kls__pic{position:absolute;inset:0;display:block}
.kls__bg{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:var(--fx) var(--fy);display:block;border:0;border-radius:0;margin:0}
.kls--kb-in.is-active .kls__bg{animation:kls-kb-in var(--kbd) linear both}
.kls--kb-out.is-active .kls__bg{animation:kls-kb-out var(--kbd) linear both}
@keyframes kls-kb-in{from{transform:scale(1)}to{transform:scale(1.12)}}
@keyframes kls-kb-out{from{transform:scale(1.12)}to{transform:scale(1)}}

/* Bezugsrahmen der Ebenen */
.kls__box{position:absolute;top:0;bottom:0;pointer-events:none}
.kls__box--full{left:0;right:0}
.kls__box--content{left:50%;width:calc(var(--kls-g) * var(--u));transform:translateX(-50%)}
.kls__box a,.kls__bars a,.kls__box img{pointer-events:auto}
.kls__sets{position:absolute;inset:0;z-index:5;pointer-events:none;transition:opacity .3s}
.kls.kls--nosets .kls__sets{opacity:0;visibility:hidden}

/* Überschrift + Unterzeile als Balken */
.kls__bars{position:absolute;left:0;right:0;top:0;z-index:4;display:flex;flex-direction:column;pointer-events:none}
.kls--pos-bottom .kls__bars{top:auto;bottom:0}
.kls--bars-content .kls__bars{left:50%;right:auto;width:calc(var(--kls-g) * var(--u));transform:translateX(-50%)}
.kls__bar{width:100%;display:flex;align-items:center}
.kls__bar--title{background:var(--kls-tbg);min-height:calc(var(--kls-tb) * var(--u))}
.kls__bar--sub{background:var(--kls-sbg);min-height:calc(var(--kls-sb) * var(--u))}
.kls__inner{width:calc(var(--kls-g) * var(--u));max-width:100%;margin:0 auto;padding:0 calc(var(--kls-pad) * var(--u))}
.kls--al-center .kls__inner{text-align:center}
.kls--al-right .kls__inner{text-align:right}
.kls .kls__title{margin:0;padding:0;border:0;background:none;text-transform:none;font-family:var(--kls-tf);font-weight:var(--kls-tw);color:var(--kls-tc);font-size:calc(var(--kls-ts) * var(--u));line-height:calc(var(--kls-tl) * var(--u));letter-spacing:calc(var(--kls-tls) * var(--u))}
.kls .kls__sub{margin:0;padding:0;font-family:var(--kls-sf);font-weight:var(--kls-sw);color:var(--kls-sc);font-size:calc(var(--kls-ss) * var(--u));line-height:calc(var(--kls-sl) * var(--u));letter-spacing:calc(var(--kls-sls) * var(--u))}
.kls__btnwrap{padding-top:calc(14 * var(--u))}
.kls .kls__btn{display:inline-block;pointer-events:auto;background:var(--kls-bbg);color:var(--kls-bc);font-family:var(--kls-sf);font-weight:600;font-size:max(14px,calc(var(--kls-ss) * var(--u)));line-height:1.2;padding:.6em 1.2em;border-radius:4px;text-decoration:none;box-shadow:0 2px 6px rgba(0,0,0,.25)}
.kls .kls__btn:hover,.kls .kls__btn:focus-visible{filter:brightness(1.08);text-decoration:none}
.kls__bar,.kls__btnwrap{opacity:0;transform:translateY(calc(50 * var(--u)));transition:opacity .3s ease,transform .3s cubic-bezier(.4,0,.2,1)}
.kls__slide.is-active .kls__bar,.kls__slide.is-active .kls__btnwrap,.kls:not(.is-ready) .kls__slide:first-child .kls__bar,.kls:not(.is-ready) .kls__slide:first-child .kls__btnwrap{opacity:1;transform:none}
.kls__slide.is-active .kls__bar--sub{transition-delay:.08s}
.kls__slide.is-active .kls__btnwrap{transition-delay:.16s}

/* Ebenen */
.kls-l{position:absolute;width:calc(var(--w) * var(--u));max-width:none}
.kls-l--text{font-size:calc(var(--fs) * var(--u));line-height:calc(var(--lh) * var(--u));padding:calc(var(--pv) * var(--u)) calc(var(--ph) * var(--u))}
.kls-l--autow{width:auto;white-space:nowrap}
.kls.kls--noanim *{animation:none!important;transition:none!important}
.kls-l--image img{display:block;width:100%;height:auto;max-width:none;border:0;margin:0}
.kls-l a{color:inherit;text-decoration:none}
.kls-l.kls-off{display:none!important}
.kls-an-tl{left:calc(var(--x) * var(--u));top:calc(var(--y) * var(--u))}
.kls-an-tc{left:calc(50% + var(--x) * var(--u));top:calc(var(--y) * var(--u));transform:translateX(-50%)}
.kls-an-tr{right:calc(var(--x) * var(--u));top:calc(var(--y) * var(--u))}
.kls-an-ml{left:calc(var(--x) * var(--u));top:calc(50% + var(--y) * var(--u));transform:translateY(-50%)}
.kls-an-mc{left:calc(50% + var(--x) * var(--u));top:calc(50% + var(--y) * var(--u));transform:translate(-50%,-50%)}
.kls-an-mr{right:calc(var(--x) * var(--u));top:calc(50% + var(--y) * var(--u));transform:translateY(-50%)}
.kls-an-bl{left:calc(var(--x) * var(--u));bottom:calc(var(--y) * var(--u))}
.kls-an-bc{left:calc(50% + var(--x) * var(--u));bottom:calc(var(--y) * var(--u));transform:translateX(-50%)}
.kls-an-br{right:calc(var(--x) * var(--u));bottom:calc(var(--y) * var(--u))}

/* Einblenden: Ausgangszustand, aktiv = Endzustand */
.kls-l__a{transition:opacity .4s ease var(--delay),transform .6s cubic-bezier(.2,.7,.2,1) var(--delay)}
.kls-a-fade .kls-l__a{opacity:0}
.kls-a-up .kls-l__a{opacity:0;transform:translateY(calc(50 * var(--u)))}
.kls-a-down .kls-l__a{opacity:0;transform:translateY(calc(-50 * var(--u)))}
.kls-a-left .kls-l__a{opacity:0;transform:translateX(calc(-80 * var(--u)))}
.kls-a-right .kls-l__a{opacity:0;transform:translateX(calc(80 * var(--u)))}
.kls-a-zoom .kls-l__a{opacity:0;transform:scale(.6)}
.kls__slide.is-active .kls-l__a,.kls.is-ready .kls__sets .kls-l__a,.kls:not(.is-ready) .kls__slide:first-child .kls-l__a,.kls:not(.is-ready) .kls__sets .kls-l__a{opacity:1;transform:none}

/* Dauerbewegung */
.kls-lp-float .kls-l__loop{animation:kls-float 3.2s ease-in-out infinite}
.kls-lp-wobble .kls-l__loop{animation:kls-wobble 2.6s ease-in-out infinite;transform-origin:50% 100%}
.kls-lp-swing .kls-l__loop{animation:kls-swing 3s ease-in-out infinite;transform-origin:50% 100%}
.kls-lp-pulse .kls-l__loop{animation:kls-pulse 2.4s ease-in-out infinite}
@keyframes kls-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6%)}}
@keyframes kls-wobble{0%,100%{transform:rotate(0)}25%{transform:rotate(-4deg)}75%{transform:rotate(4deg)}}
@keyframes kls-swing{0%,100%{transform:rotate(-6deg)}50%{transform:rotate(6deg)}}
@keyframes kls-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}

/* Bedienelemente */
.kls__arrow{position:absolute;top:50%;z-index:6;width:40px;height:40px;margin-top:-20px;padding:0;border:0;border-radius:0;background:rgba(0,0,0,.5);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .2s,background .2s}
.kls__arrow svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.kls__arrow--prev{left:0}
.kls__arrow--next{right:0}
.kls:hover .kls__arrow,.kls__arrow:focus-visible{opacity:1}
.kls__arrow:hover,.kls__arrow:focus-visible{background:#000}
.kls__pause{position:absolute;left:8px;bottom:8px;z-index:6;width:30px;height:30px;padding:0;border:0;border-radius:50%;background:rgba(0,0,0,.45);color:#fff;cursor:pointer;opacity:0;transition:opacity .2s}
.kls:hover .kls__pause,.kls__pause:focus-visible,.kls__pause[aria-pressed="true"]{opacity:1}
.kls__pause span{display:block;width:10px;height:12px;margin:0 auto;border-left:3px solid currentColor;border-right:3px solid currentColor}
.kls__pause[aria-pressed="true"] span{width:0;height:0;border-style:solid;border-width:7px 0 7px 12px;border-color:transparent transparent transparent currentColor;margin-left:11px}
.kls__dots{position:absolute;left:0;right:0;bottom:10px;z-index:6;display:flex;justify-content:center;gap:8px;opacity:0;transition:opacity .2s}
.kls:hover .kls__dots,.kls__dots:focus-within{opacity:1}
/* Touch-Geräte: Bedienung erst nach Berührung (Klasse kommt aus kls.js, verschwindet nach ein paar Sekunden).
   Unsichtbare Knöpfe nehmen keine Berührung an – der erste Tipp blendet nur ein. */
@media (hover:none){
	.kls__arrow,.kls__pause,.kls__dots{opacity:0;pointer-events:none}
	.kls.kls--touch .kls__arrow,.kls.kls--touch .kls__pause,.kls.kls--touch .kls__dots{opacity:1;pointer-events:auto}
	.kls.kls--touch .kls__arrow{opacity:.85}
	.kls__pause[aria-pressed="true"]{opacity:1;pointer-events:auto}
	.kls__arrow:focus-visible,.kls__pause:focus-visible,.kls__dots:focus-within{opacity:1;pointer-events:auto}
}
.kls__dot{width:12px;height:12px;padding:0;border:2px solid #fff;border-radius:50%;background:transparent;cursor:pointer;box-shadow:0 0 3px rgba(0,0,0,.5)}
.kls__dot[aria-current="true"]{background:#fff}
.kls__dot[hidden]{display:none}
.kls button:focus-visible,.kls a:focus-visible{outline:3px solid #eec643;outline-offset:2px}
.kls__progress{position:absolute;left:0;right:0;bottom:0;z-index:6;height:var(--kls-ph,4px);background:var(--kls-pbg,rgba(0,0,0,.25));pointer-events:none;overflow:hidden}
.kls--prog-top .kls__progress{top:0;bottom:auto}
.kls__progress-bar{height:100%;background:var(--kls-pc,#eec643);transform:scaleX(0);transform-origin:0 50%;will-change:transform}
.kls--single .kls__arrow,.kls--single .kls__pause,.kls--single .kls__dots,.kls--single .kls__progress{display:none}

/* Weniger Bewegung gewünscht */
@media (prefers-reduced-motion:reduce){
	.kls__slide.is-active,.kls__bg,.kls-l__loop{animation:none!important}
	.kls__bar,.kls__btnwrap,.kls-l__a,.kls__slide{transition:none!important}
	.kls-l__a,.kls__bar,.kls__btnwrap{transform:none!important}
}
.kls-admin-hint{position:relative;z-index:10;margin:0 0 6px;padding:8px 12px;background:#fff8e5;border-left:4px solid #dba617;color:#1d2327;font:13px/1.4 -apple-system,BlinkMacSystemFont,sans-serif}
@supports (width:1cqw){.kls__stage{--u:min(1px,calc(100cqw / var(--kls-g)))}}
.kls.kls--paused .kls-l__loop,.kls.kls--paused .kls__bg{animation-play-state:paused!important}