/* =====================================================================
   WTEO HERO-SLIDER 1.0  (Vorbild randori-pro.de)
   Aufbau in Elementor:
   Container .wteo-slider
     └ Container .wteo-slide   (je Slide, beliebig viele)
         ├ Bild-Widget          .wteo-slide__img     (Foto aus der Mediathek)
         ├ HTML/Text            .wteo-slide__kicker  ("Avci Wing Tsun · …")
         ├ Überschrift          .wteo-slide__title   (Akzentwort in <em>…</em>)
         ├ Text-Editor          .wteo-slide__text
         ├ Button               .wteo-slide__cta
         └ HTML/Text            .wteo-slide__note    ("Kostenlos & unverbindlich")
   Optional pro Slide: CSS-Variable --wteo-pos (Bildausschnitt, z. B. "35% 50%")
   ===================================================================== */

@font-face{font-family:"Instrument Serif";font-style:italic;font-weight:400;font-display:swap;
  src:url(fonts/instrument-serif-latin-400-italic.woff2) format("woff2")}

.wteo-slider{
  --s-h:calc(100svh - var(--wteo-bar,78px) - var(--wp-admin--admin-bar--height,0px));
  --s-fg:#F2EFEA;--s-dim:#C9C5BD;--s-red:#FF0000;
  position:relative!important;height:var(--s-h);min-height:560px;max-height:1100px;
  overflow:hidden;background:#0B0B0C;color:var(--s-fg);
  display:block!important;padding:0!important;isolation:isolate}

/* --- Slides liegen übereinander, Überblendung --- */
.wteo-slider .wteo-slide{
  position:absolute!important;inset:0;display:flex!important;flex-direction:column;justify-content:flex-end;align-items:flex-start;
  padding:0 max(32px,calc((100% - 1320px)/2 + 32px)) 128px!important;gap:0!important;
  opacity:0;visibility:hidden;transition:opacity 1.2s ease,visibility 0s linear 1.2s;z-index:1}
.wteo-slider .wteo-slide.is-active{opacity:1;visibility:visible;transition:opacity 1.2s ease;z-index:2}
/* ohne JavaScript: erster Slide sichtbar */
.wteo-slider:not(.is-ready) .wteo-slide:first-child{opacity:1;visibility:visible}

/* --- Foto --- */
.wteo-slide__img,.wteo-slide__img .elementor-widget-container{position:absolute!important;inset:0;margin:0!important;z-index:0;width:100%!important;max-width:none!important}
.wteo-slide__img img{width:100%!important;height:100%!important;max-width:none!important;object-fit:cover;object-position:var(--wteo-pos,50% 50%);
  transform:scale(1.06);transition:transform 9s ease-out}
.wteo-slide.is-active .wteo-slide__img img{transform:scale(1)}
/* Verlauf für Lesbarkeit: links + unten dunkel */
.wteo-slide::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(90deg,rgba(11,11,12,.88) 0%,rgba(11,11,12,.62) 38%,rgba(11,11,12,.12) 72%,rgba(11,11,12,0) 100%),
    linear-gradient(0deg,rgba(11,11,12,.85) 0%,rgba(11,11,12,0) 45%),
    linear-gradient(180deg,rgba(11,11,12,.35) 0%,rgba(11,11,12,0) 22%)}

/* --- Inhalte --- */
.wteo-slider .wteo-slide > *:not(.wteo-slide__img){position:relative;z-index:2;max-width:760px!important;margin:0!important}
.wteo-slide__kicker,.wteo-slide__kicker p{font-family:var(--wteo-mono);font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--s-dim);margin:0}
.wteo-slide__kicker p::before,.wteo-slide__kicker>span::before{content:"";display:inline-block;width:32px;height:1px;background:var(--s-red);vertical-align:middle;margin-right:14px;transform:translateY(-2px)}
.wteo-slider .wteo-slide > .wteo-slide__title{margin-top:22px!important}
.wteo-slide__title .elementor-heading-title,.wteo-slide__title h1,.wteo-slide__title h2{
  font-family:var(--wteo-display)!important;font-weight:700;text-transform:none!important;letter-spacing:-.005em;
  font-size:clamp(46px,6.2vw,104px)!important;line-height:1!important;color:var(--s-fg)!important;margin:0;text-wrap:balance}
.wteo-slide__title em{font-family:"Instrument Serif",Georgia,"Times New Roman",serif;font-style:italic;font-weight:400;
  color:var(--s-red);font-size:1.04em;line-height:.9;letter-spacing:0;padding-right:.04em}
.wteo-slider .wteo-slide > .wteo-slide__text{margin-top:24px!important;max-width:560px!important}
.wteo-slide__text p,.wteo-slide__text{font-family:var(--wteo-body);font-size:18px;line-height:1.6;color:var(--s-dim);margin:0}
.wteo-slider .wteo-slide > .wteo-slide__cta{margin-top:34px!important}
.wteo-slide__cta .elementor-button{border-radius:999px!important;padding:18px 30px!important;font-family:var(--wteo-display);font-weight:600;
  font-size:15px;letter-spacing:.12em;text-transform:uppercase;background:#E60000;border:1px solid #E60000;color:#fff;
  transition:background .2s,color .2s,border-color .2s}
.wteo-slide__cta .elementor-button:hover,.wteo-slide__cta .elementor-button:focus-visible{background:#fff;border-color:#fff;color:#0B0B0C}
.wteo-slide__cta .elementor-button-text::after{content:"→";margin-left:12px;font-family:var(--wteo-body)}
.wteo-slider .wteo-slide > .wteo-slide__note{margin-top:14px!important}
.wteo-slide__note,.wteo-slide__note p{font-family:var(--wteo-mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:#8E8A82;margin-bottom:0}

/* Text erscheint gestaffelt */
.wteo-slider.is-ready .wteo-slide > *:not(.wteo-slide__img){opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease}
.wteo-slider.is-ready .wteo-slide.is-active > *:not(.wteo-slide__img){opacity:1;transform:none}
.wteo-slider.is-ready .wteo-slide.is-active > :nth-child(2){transition-delay:.35s}
.wteo-slider.is-ready .wteo-slide.is-active > :nth-child(3){transition-delay:.45s}
.wteo-slider.is-ready .wteo-slide.is-active > :nth-child(4){transition-delay:.55s}
.wteo-slider.is-ready .wteo-slide.is-active > :nth-child(5){transition-delay:.65s}
.wteo-slider.is-ready .wteo-slide.is-active > :nth-child(6){transition-delay:.7s}

/* --- Steuerung (wird per JS erzeugt) --- */
.wteo-slider__ui{position:absolute;z-index:5;right:max(32px,calc((100% - 1320px)/2 + 32px));bottom:48px;display:flex;align-items:center;gap:18px}
.wteo-slider__dots{display:flex;gap:8px;margin:0;padding:0;list-style:none}
.wteo-slider__dot{position:relative;width:44px;height:24px;padding:0;border:0;background:none;cursor:pointer}
.wteo-slider__dot::before{content:"";position:absolute;left:0;right:0;top:11px;height:2px;background:rgba(242,239,234,.28);border-radius:2px}
.wteo-slider__dot[aria-current="true"]::before{background:rgba(242,239,234,.6)}
.wteo-slider__dot i{position:absolute;left:0;top:11px;height:2px;width:0;background:var(--s-red);border-radius:2px}
.wteo-slider__dot[aria-current="true"] i{width:100%}
.wteo-slider.is-playing .wteo-slider__dot[aria-current="true"] i{width:0;animation:wteoFill var(--s-dur,7s) linear forwards}
.wteo-slider.is-paused .wteo-slider__dot[aria-current="true"] i{animation-play-state:paused}
@keyframes wteoFill{to{width:100%}}
.wteo-slider__count{font-family:var(--wteo-mono);font-size:12px;letter-spacing:.14em;color:var(--s-dim);min-width:58px;text-align:center}
.wteo-slider__count b{color:var(--s-fg);font-weight:500}
.wteo-slider__btn{width:44px;height:44px;border-radius:50%;border:1px solid rgba(242,239,234,.35);background:rgba(11,11,12,.25);color:var(--s-fg);
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer;padding:0;transition:background .2s,border-color .2s,color .2s}
.wteo-slider__btn:hover{background:#fff;border-color:#fff;color:#0B0B0C}
.wteo-slider__btn svg{width:18px;height:18px;display:block}
.wteo-slider__btn:focus-visible,.wteo-slider__dot:focus-visible{outline:2px solid #fff;outline-offset:3px}

/* --- Tablet / Handy --- */
@media (max-width:1199px){
  .wteo-slider{--s-h:calc(100svh - 64px - var(--wp-admin--admin-bar--height,0px))}
}
@media (max-width:767px){
  .wteo-slider{min-height:600px}
  .wteo-slider .wteo-slide{padding:0 16px 108px!important}
  .wteo-slide::before{background:
    linear-gradient(0deg,rgba(11,11,12,.95) 0%,rgba(11,11,12,.82) 38%,rgba(11,11,12,.25) 66%,rgba(11,11,12,.05) 100%),
    linear-gradient(180deg,rgba(11,11,12,.35) 0%,rgba(11,11,12,0) 20%)}
  .wteo-slide__img img{object-position:var(--wteo-pos-m,var(--wteo-pos,50% 50%))}
  .wteo-slide__kicker,.wteo-slide__kicker p{font-size:11px;letter-spacing:.16em}
  .wteo-slide__kicker p::before{width:22px;margin-right:10px}
  .wteo-slider .wteo-slide > .wteo-slide__title{margin-top:16px!important}
  .wteo-slide__title .elementor-heading-title,.wteo-slide__title h1,.wteo-slide__title h2{font-size:clamp(38px,11vw,54px)!important;line-height:.98!important}
  .wteo-slider .wteo-slide > .wteo-slide__text{margin-top:16px!important}
  .wteo-slide__text p,.wteo-slide__text{font-size:16px;line-height:1.55}
  .wteo-slider .wteo-slide > .wteo-slide__cta{margin-top:24px!important;width:100%!important;max-width:100%!important}
  .wteo-slide__cta .elementor-button-wrapper{display:block;width:100%}
  .wteo-slide__cta .elementor-button{display:flex;justify-content:center;width:100%;padding:17px 22px!important}
  .wteo-slide__note,.wteo-slide__note p{text-align:center;width:100%}
  .wteo-slider__ui{left:16px;right:16px;bottom:28px;justify-content:space-between;gap:10px}
  .wteo-slider__dots{order:-1;flex:1}
  .wteo-slider__dot{flex:1;max-width:56px}
  .wteo-slider__count{display:none}
  .wteo-slider__btn{width:40px;height:40px}
}
@media (max-height:700px) and (min-width:768px){
  .wteo-slider .wteo-slide{padding-bottom:104px!important}
  .wteo-slide__title .elementor-heading-title,.wteo-slide__title h1,.wteo-slide__title h2{font-size:clamp(42px,5vw,72px)!important}
}
@media (prefers-reduced-motion:reduce){
  .wteo-slider .wteo-slide,.wteo-slide__img img,.wteo-slider.is-ready .wteo-slide > *{transition:none!important;transform:none!important}
}