/* Zeitleiste. Layout comes from custom properties that the responsive
   controls set on the widget; tracks are columns (vertical) or rows
   (horizontal): side a, axis, side b. */

/* Fallback values: vertical, alternating, year in the tile */
.elementor-widget-webe-timeline{
  --wtl-v: 1;
  --wtl-h: 0;
  --wtl-richtung: column;
  --wtl-a: minmax(0, 1fr);
  --wtl-b: minmax(0, 1fr);
  --wtl-achse: 96px;
  --wtl-spuren: var(--wtl-a) var(--wtl-achse) var(--wtl-b);
  --wtl-gtc: var(--wtl-spuren);
  --wtl-gtr: auto;
  --wtl-li-w: auto;
  --wtl-strecke-w: auto;
  --wtl-strecke-max: var(--wtl-liste-max);
  --wtl-liste-max: 900px;
  --wtl-overflow: visible;
  --wtl-spur-u: 1;
  --wtl-spur-g: 3;
  --wtl-gspur-u: 3;
  --wtl-gspur-g: 1;
  --wtl-achse-pos: 50%;
  --wtl-zl-u: end;
  --wtl-zl-g: start;
  --wtl-gta-u: start;
  --wtl-gta-g: end;
  --wtl-wechsel: 1;
  --wtl-jk: block;
  --wtl-jd: none;
  --wtl-jl: 0;
  --wtl-datum-breite: 7rem;
  --wtl-abstand: 48px;
  --wtl-kachel-breite: 320px;
  --wtl-verschr: 1;
  --wtl-rand: 24px;
  --wtl-dicke: 3px;
  --wtl-punkt: 18px;
  --wtl-punkt-rand: 4px;
  --wtl-p-versatz: 22px;
  --wtl-l-top: 0;
  --wtl-l-bottom: 0;
  --wtl-l-left: var(--wtl-achse-pos);
  --wtl-l-right: auto;
  --wtl-l-w: var(--wtl-dicke);
  --wtl-l-h: auto;
  --wtl-l-tf: translateX(-50%);
  --wtl-l-dir: to bottom;
  --wtl-f-tf: scaleY(var(--wtl-fortschritt, 0));
  --wtl-f-origin: top;
  --wtl-e-top: 100%;
  --wtl-e-left: 50%;
  --wtl-e-tf: translate(-50%, -60%) rotate(0deg);
  --wtl-p-as: start;
  --wtl-p-js: center;
  --wtl-p-mt: var(--wtl-p-versatz);
  --wtl-kjs-u: var(--wtl-zl-u);
  --wtl-kjs-g: var(--wtl-zl-g);
  --wtl-kas-u: start;
  --wtl-kas-g: start;
  --wtl-tl: view();
  --wtl-snap: none;
  --wtl-bahn-pad: 0px;
  --wtl-bahn-py: 0px;
  --wtl-d-mt: calc(var(--wtl-p-versatz) + var(--wtl-punkt) / 2);
  --wtl-d-tf: translateY(-50%);
  --wtl-d-as-u: start;
  --wtl-d-as-g: start;
  --wtl-d-ta-u: var(--wtl-gta-u);
  --wtl-d-ta-g: var(--wtl-gta-g);
  --wtl-d-pad: 0 16px;
  --wtl-pt: 24px;
  --wtl-pr: 28px;
  --wtl-pb: 24px;
  --wtl-pl: 28px;
  --wtl-radius: 14px;
  --wtl-kante-d: 4px;
  --wtl-kante-t: var(--wtl-kante-d);
  --wtl-kante-l: 0px;
  --wtl-bildkante: var(--wtl-kante-d);
  --wtl-kgtc: minmax(0, 1fr);
  --wtl-kgtc-icon: minmax(0, 1fr);
  --wtl-ml: 0;
  --wtl-medien-abstand: 20px;
  --wtl-bild-format: 16/9;
  --wtl-bild-breite: 40%;
  --wtl-m-margin: calc(var(--wtl-pt) * -1) calc(var(--wtl-pr) * -1) var(--wtl-medien-abstand) calc(var(--wtl-pl) * -1);
  --wtl-m-ar: var(--wtl-bild-format);
  --wtl-bk-w: 100%;
  --wtl-bk-h: var(--wtl-bildkante);
  --wtl-bk-pos: auto 0 0 0;
  --wtl-text-abstand: 8px;
}

.wtl{ position: relative; }
.wtl *, .wtl *::before, .wtl *::after{ box-sizing: border-box; }

/* Track: scrolls sideways when horizontal */
.wtl__bahn{
  overflow-x: var(--wtl-overflow);
  overflow-y: hidden;
  padding: var(--wtl-bahn-py) var(--wtl-bahn-pad);
  scroll-snap-type: var(--wtl-snap);
  scroll-padding-inline: var(--wtl-bahn-pad);
  scrollbar-width: thin;
}
.wtl:not(.is-horizontal) .wtl__bahn{ overflow: visible; }
.wtl__strecke{
  position: relative;
  width: var(--wtl-strecke-w);
  max-width: var(--wtl-strecke-max, none);
  margin-inline: auto;
}

/* Line, filled part, end arrow */
.wtl__linie{
  position: absolute;
  top: var(--wtl-l-top);
  bottom: var(--wtl-l-bottom);
  left: var(--wtl-l-left);
  right: var(--wtl-l-right);
  width: var(--wtl-l-w);
  height: var(--wtl-l-h);
  transform: var(--wtl-l-tf);
  background: linear-gradient(var(--wtl-l-dir), var(--wtl-linie-a, var(--wtl-akzent, #4FA1D3)), var(--wtl-linie-b, #BEBEBE));
  border-radius: var(--wtl-dicke);
  pointer-events: none;
}
.wtl__fortschritt{
  display: none;
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--wtl-fortschritt-farbe, var(--wtl-akzent, #4FA1D3));
  transform: var(--wtl-f-tf);
  transform-origin: var(--wtl-f-origin);
}
.wtl[data-wtl-fortschritt="ja"] .wtl__fortschritt{ display: block; }
.wtl__ende{
  display: var(--wtl-ende, none);
  position: absolute;
  top: var(--wtl-e-top);
  left: var(--wtl-e-left);
  width: calc(var(--wtl-dicke) * 4 + 6px);
  height: calc(var(--wtl-dicke) * 4 + 6px);
  border-right: var(--wtl-dicke) solid var(--wtl-linie-b, #BEBEBE);
  border-bottom: var(--wtl-dicke) solid var(--wtl-linie-b, #BEBEBE);
  transform: var(--wtl-e-tf) rotate(45deg);
}

/* List and entries */
.wtl__liste{
  position: relative;
  display: flex;
  flex-direction: var(--wtl-richtung);
  gap: var(--wtl-abstand);
  margin: 0;
  padding: 0;
  list-style: none;
}
.wtl__eintrag{
  position: relative;
  display: grid;
  grid-template-columns: var(--wtl-gtc);
  grid-template-rows: var(--wtl-gtr);
  flex: 0 0 auto;
  width: var(--wtl-li-w);
  margin: 0;
  padding: 0;
  scroll-snap-align: start;
}
.wtl__eintrag + .wtl__eintrag{
  margin-inline-start: calc((var(--wtl-kachel-breite) + var(--wtl-abstand)) * -0.5 * var(--wtl-verschr) * var(--wtl-h) * var(--wtl-wechsel));
}
.wtl__eintrag::marker{ content: none; }

.wtl__kachel{
  grid-column: calc(var(--wtl-v) * (var(--wtl-spur-u) - 1) + 1);
  grid-row: calc(var(--wtl-h) * (var(--wtl-spur-u) - 1) + 1);
  justify-self: var(--wtl-kjs-u);
  align-self: var(--wtl-kas-u);
}
.wtl__eintrag:nth-child(even) > .wtl__kachel{
  grid-column: calc(var(--wtl-v) * (var(--wtl-spur-g) - 1) + 1);
  grid-row: calc(var(--wtl-h) * (var(--wtl-spur-g) - 1) + 1);
  justify-self: var(--wtl-kjs-g);
  align-self: var(--wtl-kas-g);
}

/* Dot on the line */
.wtl__punkt{
  grid-column: calc(var(--wtl-v) + 1);
  grid-row: calc(var(--wtl-h) + 1);
  align-self: var(--wtl-p-as);
  justify-self: var(--wtl-p-js);
  margin-top: var(--wtl-p-mt);
  position: relative;
  z-index: 2;
  width: var(--wtl-punkt);
  height: var(--wtl-punkt);
  border-radius: 50%;
  background: var(--wtl-punkt-fuellung, #FFFFFF);
  border: var(--wtl-punkt-rand) solid var(--wtl-akzent, #4FA1D3);
  box-shadow: 0 0 0 4px var(--wtl-punkt-ring, transparent);
  transition: background-color .3s ease;
}
.wtl__eintrag:hover .wtl__punkt{ background: var(--wtl-akzent, #4FA1D3); }

/* Year opposite the tile */
.wtl__datum{
  display: var(--wtl-jd, none);
  grid-column: calc(var(--wtl-v) * (var(--wtl-gspur-u) - 1) + 1);
  grid-row: calc(var(--wtl-h) * (var(--wtl-gspur-u) - 1) + 1);
  align-self: var(--wtl-d-as-u);
  text-align: var(--wtl-d-ta-u);
  margin-top: var(--wtl-d-mt);
  transform: var(--wtl-d-tf);
  padding: var(--wtl-d-pad);
  color: var(--wtl-jahr-farbe, var(--wtl-akzent, #4FA1D3));
}
.wtl__eintrag:nth-child(even) > .wtl__datum{
  grid-column: calc(var(--wtl-v) * (var(--wtl-gspur-g) - 1) + 1);
  grid-row: calc(var(--wtl-h) * (var(--wtl-gspur-g) - 1) + 1);
  align-self: var(--wtl-d-as-g);
  text-align: var(--wtl-d-ta-g);
}

/* Tile */
.wtl__kachel{
  position: relative;
  display: grid;
  grid-template-columns: var(--wtl-kgtc);
  align-items: start;
  width: 100%;
  max-width: var(--wtl-kachel-max, none);
  padding: var(--wtl-pt) var(--wtl-pr) var(--wtl-pb) var(--wtl-pl);
  background: var(--wtl-kachel, #FFFFFF);
  border-radius: var(--wtl-radius);
  border-top: var(--wtl-kante-t) solid var(--wtl-akzent, #4FA1D3);
  border-left: var(--wtl-kante-l) solid var(--wtl-akzent, #4FA1D3);
  overflow: hidden;
  color: inherit;
  text-decoration: none;
  transition: transform .3s ease, box-shadow .3s ease;
}
.wtl__kachel:has(> .wtl__medien){ border-top-width: 0; }
.wtl__kachel:has(> .wtl__icon){ grid-template-columns: var(--wtl-kgtc-icon); }
.wtl__kachel:not(:has(> .wtl__medien, > .wtl__icon)){ grid-template-columns: minmax(0, 1fr); }
.wtl__eintrag:hover .wtl__kachel{ transform: translateY(var(--wtl-heben, -4px)); }
a.wtl__kachel:hover, a.wtl__kachel:focus-visible{ color: inherit; }

/* Image and icon */
.wtl__medien{
  position: relative;
  align-self: stretch;
  margin: var(--wtl-m-margin);
  aspect-ratio: var(--wtl-m-ar);
  overflow: hidden;
  background: #E8EEF3;
  line-height: 0;
}
/* Stronger than Elementor's ".elementor img { height: auto }", which loads later */
.wtl .wtl__medien img{
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  border-radius: 0;
  object-fit: cover;
  transform: scale(var(--wtl-bild-skala, 1));
  transition: transform .5s ease, filter .4s ease;
}
.wtl__eintrag:hover .wtl__medien img{ transform: scale(calc(var(--wtl-bild-skala, 1) * var(--wtl-bild-zoom, 1.04))); }
.wtl__medien::after{
  content: "";
  position: absolute;
  inset: var(--wtl-bk-pos);
  width: var(--wtl-bk-w);
  height: var(--wtl-bk-h);
  background: var(--wtl-akzent, #4FA1D3);
  z-index: 1;
}
.wtl__icon{
  margin: 0 calc(var(--wtl-medien-abstand) * var(--wtl-ml)) calc(var(--wtl-medien-abstand) * (1 - var(--wtl-ml))) 0;
  color: var(--wtl-icon-farbe, var(--wtl-akzent, #4FA1D3));
  font-size: var(--wtl-icon, 48px);
  line-height: 1;
}
.wtl__icon svg{ display: block; width: 1em; height: 1em; fill: currentColor; }
.wtl__icon i{ display: block; }

/* Text */
.wtl__inhalt{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--wtl-text-abstand);
  min-width: 0;
}
.wtl__jahr{
  display: var(--wtl-jk, block);
  margin: 0;
  color: var(--wtl-jahr-farbe, var(--wtl-akzent, #4FA1D3));
}
.wtl__titel{ margin: 0; color: var(--wtl-titel-farbe, inherit); }
.wtl__text{ color: var(--wtl-text-farbe, inherit); }
.wtl__text > :first-child{ margin-top: 0; }
.wtl__text > :last-child{ margin-bottom: 0; }
.wtl__knopf{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  line-height: 1;
  text-decoration: none;
  transition: background-color .25s ease, color .25s ease, transform .25s ease;
}
.wtl__knopf:hover, .wtl__knopf:focus-visible{ transform: translateY(-2px); }
.wtl__knopf span{ transition: transform .25s ease; }
.wtl__knopf:hover span{ transform: translateX(3px); }

/* Highlighted entry */
.is-hervorgehoben > .wtl__kachel{
  background: var(--wtl-hervor-flaeche, var(--wtl-akzent, #4FA1D3));
  --wtl-jahr-farbe: var(--wtl-hervor-text, #FFFFFF);
  --wtl-titel-farbe: var(--wtl-hervor-text, #FFFFFF);
  --wtl-text-farbe: var(--wtl-hervor-text, #FFFFFF);
}

/* Arrows */
.wtl__pfeile{
  display: none;
  justify-content: center;
  gap: 12px;
  margin-top: 16px;
}
.wtl.is-wischen .wtl__pfeile{ display: flex; }
.wtl .wtl__pfeil{
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--wtl-akzent, #4FA1D3);
  color: #FFFFFF;
  cursor: pointer;
  transition: opacity .2s ease, transform .2s ease;
}
.wtl .wtl__pfeil:hover, .wtl .wtl__pfeil:focus-visible{ background: var(--wtl-akzent, #4FA1D3); color: #FFFFFF; transform: scale(1.06); }
.wtl .wtl__pfeil[disabled]{ opacity: .35; cursor: default; transform: none; }
.wtl__pfeil svg{ width: 20px; height: 20px; }
.wtl__pfeil--zurueck svg{ transform: rotate(180deg); }

/* Pinned horizontal: the page scroll moves the track */
.wtl.is-angeheftet .wtl__bahn{
  position: sticky;
  top: var(--wtl-pin-oben, 100px);
  overflow: hidden;
  scroll-snap-type: none;
}

/* Scroll effects */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    @keyframes wtl-treiben-a{
      from{ opacity: 0; transform: translateY(60px); }
      30%{ opacity: 1; }
      to{ opacity: 1; transform: translateY(-30px); }
    }
    @keyframes wtl-treiben-b{
      from{ opacity: 0; transform: translateY(90px); }
      30%{ opacity: 1; }
      to{ opacity: 1; transform: translateY(0); }
    }
    @keyframes wtl-ein{
      from{ opacity: 0; transform: translateY(30px); }
      to{ opacity: 1; transform: none; }
    }
    .wtl__eintrag{
      animation: var(--wtl-anim-u, none) linear both;
      animation-timeline: var(--wtl-tl, view());
      animation-range: var(--wtl-anim-range, normal);
    }
    .wtl__eintrag:nth-child(even){ animation-name: var(--wtl-anim-g, none); }
  }
}
/* Fallback without scroll timelines: fade in once */
.wtl--io .wtl__eintrag{ opacity: 0; transform: translateY(30px); transition: opacity .6s ease, transform .6s ease; }
.wtl--io .wtl__eintrag.is-sichtbar{ opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce){
  .wtl__kachel, .wtl .wtl__medien img, .wtl__knopf{ transition: none; }
  .wtl__eintrag:hover .wtl__kachel{ transform: none; }
  .wtl__eintrag:hover .wtl__medien img{ transform: scale(var(--wtl-bild-skala, 1)); }
}