.elementor-23 .elementor-element.elementor-element-79a206a{--display:flex;--min-height:100vh;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:center;}.elementor-23 .elementor-element.elementor-element-79a206a:not(.elementor-motion-effects-element-type-background), .elementor-23 .elementor-element.elementor-element-79a206a > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-a4fea46 );}.elementor-23 .elementor-element.elementor-element-79a206a.e-con{--flex-grow:1;--flex-shrink:0;}.elementor-23 .elementor-element.elementor-element-a8e6ba5{z-index:0;text-align:center;}.elementor-23 .elementor-element.elementor-element-a8e6ba5 .elementor-heading-title{font-family:"Camera Obscura", Sans-serif;font-size:20vw;font-weight:normal;font-style:normal;-webkit-text-stroke-width:2px;stroke-width:2px;-webkit-text-stroke-color:var( --e-global-color-accent );stroke:var( --e-global-color-accent );color:#F5F3FF00;}.elementor-23 .elementor-element.elementor-element-1e14bf1{--display:flex;--min-height:100vh;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;}.elementor-23 .elementor-element.elementor-element-1e14bf1.e-con{--flex-grow:1;--flex-shrink:0;}.elementor-23 .elementor-element.elementor-element-22ba0b4{--display:flex;--justify-content:center;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );}.elementor-23 .elementor-element.elementor-element-6d68d35{text-align:left;}.elementor-23 .elementor-element.elementor-element-6d68d35 .elementor-heading-title{font-size:4vw;}.elementor-23 .elementor-element.elementor-element-4b7baf4{text-align:left;}.elementor-23 .elementor-element.elementor-element-4b7baf4 .elementor-heading-title{font-size:4vw;}.elementor-23 .elementor-element.elementor-element-53325b3{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:5% 5%;--row-gap:5%;--column-gap:5%;--flex-wrap:nowrap;--margin-top:50px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:15px;--padding-bottom:15px;--padding-left:15px;--padding-right:15px;}.elementor-23 .elementor-element.elementor-element-53325b3.e-con{--flex-grow:1;--flex-shrink:1;}.elementor-23 .elementor-element.elementor-element-f6eef9b{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:5% 5%;--row-gap:5%;--column-gap:5%;--flex-wrap:nowrap;--margin-top:50px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:15px;--padding-bottom:15px;--padding-left:15px;--padding-right:15px;}.elementor-23 .elementor-element.elementor-element-d9bd003{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:5% 5%;--row-gap:5%;--column-gap:5%;--flex-wrap:nowrap;--margin-top:50px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:15px;--padding-bottom:15px;--padding-left:15px;--padding-right:15px;}.elementor-23 .elementor-element.elementor-element-aa73359{--display:flex;--min-height:100vh;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:center;}.elementor-23 .elementor-element.elementor-element-aa73359:not(.elementor-motion-effects-element-type-background), .elementor-23 .elementor-element.elementor-element-aa73359 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-a4fea46 );}.elementor-23 .elementor-element.elementor-element-1442811{--display:flex;--min-height:413px;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:space-between;--align-items:center;border-style:solid;--border-style:solid;border-width:0px 0px 1px 0px;--border-top-width:0px;--border-right-width:0px;--border-bottom-width:1px;--border-left-width:0px;border-color:var( --e-global-color-primary );--border-color:var( --e-global-color-primary );--border-radius:0px 0px 0px 0px;}.elementor-23 .elementor-element.elementor-element-c070cc0 .elementor-heading-title{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-size:var( --e-global-typography-secondary-font-size );font-weight:var( --e-global-typography-secondary-font-weight );font-style:var( --e-global-typography-secondary-font-style );color:var( --e-global-color-accent );}.elementor-23 .elementor-element.elementor-element-757f390{color:var( --e-global-color-accent );font-family:var( --e-global-typography-f57b03f-font-family ), Sans-serif;font-size:var( --e-global-typography-f57b03f-font-size );font-weight:var( --e-global-typography-f57b03f-font-weight );font-style:var( --e-global-typography-f57b03f-font-style );}.elementor-23 .elementor-element.elementor-element-e9fbee7{width:var( --container-widget-width, 18% );max-width:18%;--container-widget-width:18%;--container-widget-flex-grow:0;}.elementor-23 .elementor-element.elementor-element-e9fbee7 img{border-style:none;}.elementor-23 .elementor-element.elementor-element-fe82c27{--display:flex;--overflow:hidden;}.elementor-23 .elementor-element.elementor-element-283a4ca{--display:flex;}.elementor-23 .elementor-element.elementor-element-30c85ae{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-23 .elementor-element.elementor-element-30c85ae.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-23 .elementor-element.elementor-element-dcf443d{--e-image-carousel-slides-to-show:3;}.elementor-23 .elementor-element.elementor-element-dcf443d > .elementor-widget-container{margin:0px 0px 0px 0px;}.elementor-23 .elementor-element.elementor-element-a94b71f{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-23 .elementor-element.elementor-element-07074df > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-23 .elementor-element.elementor-element-1715b54{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-23 .elementor-element.elementor-element-1715b54.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-23 .elementor-element.elementor-element-a19b4cc{--e-image-carousel-slides-to-show:3;}.elementor-23 .elementor-element.elementor-element-a19b4cc > .elementor-widget-container{margin:0px 0px 0px 0px;}.elementor-23 .elementor-element.elementor-element-349c9c6{--display:flex;}:root{--page-title-display:none;}@media(max-width:1024px){.elementor-23 .elementor-element.elementor-element-c070cc0 .elementor-heading-title{font-size:var( --e-global-typography-secondary-font-size );}.elementor-23 .elementor-element.elementor-element-757f390{font-size:var( --e-global-typography-f57b03f-font-size );}}@media(max-width:852px){.elementor-23 .elementor-element.elementor-element-a8e6ba5 .elementor-heading-title{font-size:40px;}.elementor-23 .elementor-element.elementor-element-c070cc0 .elementor-heading-title{font-size:var( --e-global-typography-secondary-font-size );}.elementor-23 .elementor-element.elementor-element-757f390{font-size:var( --e-global-typography-f57b03f-font-size );}.elementor-23 .elementor-element.elementor-element-fe82c27{--min-height:0vh;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-23 .elementor-element.elementor-element-30c85ae{--width:100%;--min-height:0vh;}.elementor-23 .elementor-element.elementor-element-dcf443d{--e-image-carousel-slides-to-show:2;}.elementor-23 .elementor-element.elementor-element-dcf443d > .elementor-widget-container{margin:0px 0px 0px 0px;}.elementor-23 .elementor-element.elementor-element-a94b71f{--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-23 .elementor-element.elementor-element-07074df > .elementor-widget-container{margin:50px 0px 0px 0px;}.elementor-23 .elementor-element.elementor-element-1715b54{--width:100%;--min-height:0vh;}.elementor-23 .elementor-element.elementor-element-a19b4cc{--e-image-carousel-slides-to-show:2;}.elementor-23 .elementor-element.elementor-element-a19b4cc > .elementor-widget-container{margin:0px 0px 0px 0px;}}@media(min-width:853px){.elementor-23 .elementor-element.elementor-element-53325b3{--width:14%;}.elementor-23 .elementor-element.elementor-element-f6eef9b{--width:14%;}.elementor-23 .elementor-element.elementor-element-d9bd003{--width:14%;}.elementor-23 .elementor-element.elementor-element-30c85ae{--width:100vw;}.elementor-23 .elementor-element.elementor-element-1715b54{--width:100vw;}}/* Start custom CSS for container, class: .elementor-element-79a206a */.items {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 2;
}

.item {
  position: absolute;
  width: 250px; /* Breite des Containers */
  height: 400px; /* Höhe des Containers */
  overflow: hidden; /* Verhindert, dass das Bild außerhalb des Containers ragt */
}

.item img {
  width: 100%; /* Bild passt sich der Breite des Containers an */
  height: 100%; /* Bild passt sich der Höhe des Containers an */
  object-fit: contain; /* Zeigt das ganze Bild proportional an */
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-22ba0b4 */.elementor-23 .elementor-element.elementor-element-22ba0b4 .elementor-heading-title {
  color: rgb(182, 182, 182, 0.2);
  background: linear-gradient(to right, #22223B, #22223B) no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  background-size: 0%;
  transition: background-size cubic-bezier(.1,.5,.5,1) 0.5s;
  position: relative;
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-53325b3 */.verticalcolumnone {
    max-height: 750px;
    height: 750px;
    width: 200px;
    overflow: hidden;
    position: relative; /* Wichtig für die Positionierung */
    -webkit-mask-image: linear-gradient(transparent, black 20%, black 80%, transparent 100%);
    mask-image: linear-gradient(transparent, black 20%, black 80%, transparent 100%);
}

.carouselverticalone {
    display: flex;
    flex-direction: column;
    animation: pingpong 10s linear infinite alternate; /* Rückwärtsbewegung hinzugefügt */
}

.carouselverticalone ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
}

.carouselverticalone li {
    height: 100px; /* Höhe jedes Elements */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Animation */
@keyframes pingpong {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(-100%); /* Bewegt sich bis zum Ende der Liste */
    }
}

@media only screen and (max-width: 360px) {
    .verticalcolumnone {
        max-height: 350px;
        height: 350px;
        width: 100px;
    }

    @keyframes pingpong {
        0% {
            transform: translateY(0);
        }
        100% {
            transform: translateY(-100%);
        }
    }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-f6eef9b */.verticalcolumntwo {
    margin-top: 5rem;
    max-height: 700px;
    height: 700px;
    width: 200px;
    overflow: hidden;
    position: relative; /* Wichtig für die Positionierung */
    -webkit-mask-image: linear-gradient(transparent, black 20%, black 80%, transparent 100%);
    mask-image: linear-gradient(transparent, black 20%, black 80%, transparent 100%);
}

.carouselverticaltwo {
    display: flex;
    flex-direction: column;
    animation: pingpongtwo 12s linear infinite alternate; /* Bewegt sich von oben nach unten */
}

.carouselverticaltwo ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
}

.carouselverticaltwo li {
    height: 100px; /* Höhe jedes Elements */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Animation */
@keyframes pingpongtwo {
    0% {
        transform: translateY(0); /* Startet oben */
    }
    100% {
        transform: translateY(100%); /* Bewegt sich nach unten */
    }
}

@media only screen and (max-width: 360px) {
    .verticalcolumntwo {
        max-height: 350px;
        height: 350px;
        width: 100px;
    }

    @keyframes pingpongtwo {
        0% {
            transform: translateY(0);
        }
        100% {
            transform: translateY(100%);
        }
    }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d9bd003 */.verticalcolumnthree {
    max-height: 800px;
    height: 800px;
    width: 200px;
    overflow: hidden;
    position: relative; /* Wichtig für die Positionierung */
    -webkit-mask-image: linear-gradient(transparent, black 20%, black 80%, transparent 100%);
    mask-image: linear-gradient(transparent, black 20%, black 80%, transparent 100%);
}

.carouselverticalthree {
    display: flex;
    flex-direction: column;
    animation: pingpongthree 13s linear infinite alternate; /* Rückwärtsbewegung für die dritte Reihe */
}

.carouselverticalthree ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
}

.carouselverticalthree li {
    height: 100px; /* Höhe jedes Elements */
    display: flex;
    align-items: center;
    justify-content: center;
}

.img-one {
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

/* Animation */
@keyframes pingpongthree {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(-100%); /* Bewegt sich bis zum Ende der Liste */
    }
}

@media only screen and (max-width: 360px) {
    .verticalcolumnthree {
        max-height: 350px;
        height: 350px;
        width: 100px;
    }

    @keyframes pingpongthree {
        0% {
            transform: translateY(0);
        }
        100% {
            transform: translateY(-100%);
        }
    }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-aa73359 *//*Add this code in the main container - top-level*/

 
/*.img-one class can be changed with whatever class you want. 
this is the class to be used for images*/

.img-one { 
    display: none;   
    position: absolute;
    object-fit: contain;
    transform: translateX(-50%) translateY(-50%);
    top: 50%;
    left: 50%;
    z-index: 10;
}

/*.text class can be changed with whatever class you want. 
this is the class for your containers*/

.text:hover .img-one {
    display: block;
	  position: absolute;
    z-index: 1;
    cursor: pointer;
    transition: all 0.5s ease-out;
}

.text:hover  {
/*you can remove the cursor pointer property & value if you don't 
want your containers clickable*/
    cursor: pointer;
    background-color: black;
    transition:all 0.5s ease-out;

}

/*do not remove !important, otherwise the hover effect does not work*/
/*this is where you change the color of the text editor widget*/
.text:hover .paragraph-scroll  {
     color: #FFFFFF !important;
}
/*do not remove !important, otherwise the hover effect does not work*/
/*this is where you change the color of the heading widget*/
.text:hover .elementor-heading-title  {
     color: #FFFFFF !important;
}

/*media query to make the images show by default on mobile devices*/
@media only screen and (max-width: 768px) {
  .img-one {
/*made a correction, from block change to inline*/
    display: inline;
    
  }
  
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-fe82c27 */.gallery {
  width: 100%;
  height: calc(100vh - 60px); /* Höhe passend zur Navigation */
  position: relative;
  overflow: hidden; /* Verhindert Überschreiten der Galerie */
}

/* Bilder-Elemente */
.cool-img {
  width: 75px;
  height: 100px;
  overflow: hidden;
  position: absolute;
  margin: 20px;
}

/* Bilder selbst */
.cool-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Navigation (falls nötig, um Platzprobleme zu vermeiden) */
nav {
  position: fixed;
  top: 0;
  width: 100%;
  height: 60px;
  background-color: #333;
  z-index: 1000; /* Sicherstellen, dass Navigation oben bleibt */
}

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

nav li {
  margin: 0 15px;
}

nav a {
  text-decoration: none;
  color: white;
  font-size: 16px;
  padding: 10px;
  transition: color 0.3s ease;
}

nav a:hover {
  color: #aaa;
}/* End custom CSS */
/* Start custom CSS for image-carousel, class: .elementor-element-dcf443d */.elementor-23 .elementor-element.elementor-element-dcf443d .swiper-wrapper {
      -webkit-transition-timing-function: linear !important;
      -moz-transition-timing-function: linear !important;
      -o-transition-timing-function: linear !important;
      transition-timing-function: linear !important; 
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-30c85ae */.elementor-23 .elementor-element.elementor-element-30c85ae .swiper-wrapper {
      -webkit-transition-timing-function: linear !important;
      -moz-transition-timing-function: linear !important;
      -o-transition-timing-function: linear !important;
      transition-timing-function: linear !important; 
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a94b71f */.marquee {
  display: flex;
 /* overflow: hidden;
  height: 10vh;
  user-select: none;
  gap: 2rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
/*background-color: #F0F600;*/
   /*transform: skewY(-3deg); */
 transform: rotate(-0deg) translateY(-30px) translateX(50px);*/
}


.marquee:hover {
  -webkit-text-stroke: 1.5px #F0F600;
	text-stroke: 1.5px #F0F600;
	-webkit-text-fill-color: transparent;
	text-fill-color: transparent;
	color: transparent;
	transition: all 0.5s ease;
	-webkit-font-smoothing: antialiased;
	/*-moz-osx-font-smoothing: grayscale;*/

}

.marquee__group {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  min-width: 100%;
  animation: scroll 70s linear infinite reverse;
}

.marquee__group span {
  color: #CAC4E7;
  font-size: 300vw;
  font-weight: 200;
  white-space: nowrap;
  font-family: 'Belkin', sans-serif !important;
  text-transform: uppercase;*/
  
}

@keyframes scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(calc(-100% - 2rem));
  }
}

@media only screen and (min-width: 360px) {
    .marquee__group span {
        font-size: 6.5vw;
    }
}/* End custom CSS */
/* Start custom CSS for image-carousel, class: .elementor-element-a19b4cc */.elementor-23 .elementor-element.elementor-element-a19b4cc .swiper-wrapper {
      -webkit-transition-timing-function: linear !important;
      -moz-transition-timing-function: linear !important;
      -o-transition-timing-function: linear !important;
      transition-timing-function: linear !important; 
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-1715b54 */.elementor-23 .elementor-element.elementor-element-1715b54 .swiper-wrapper {
      -webkit-transition-timing-function: linear !important;
      -moz-transition-timing-function: linear !important;
      -o-transition-timing-function: linear !important;
      transition-timing-function: linear !important; 
}/* End custom CSS */
/* Start Custom Fonts CSS */@font-face {
	font-family: 'Camera Obscura';
	font-style: normal;
	font-weight: normal;
	font-display: auto;
	src: url('https://junika-design.com/wp-content/uploads/2024/12/CameraObscura.eot');
	src: url('https://junika-design.com/wp-content/uploads/2024/12/CameraObscura.eot?#iefix') format('embedded-opentype'),
		url('https://junika-design.com/wp-content/uploads/2024/12/CameraObscura.woff2') format('woff2'),
		url('https://junika-design.com/wp-content/uploads/2024/12/CameraObscura.woff') format('woff'),
		url('https://junika-design.com/wp-content/uploads/2024/12/CameraObscura.ttf') format('truetype'),
		url('https://junika-design.com/wp-content/uploads/2024/12/CameraObscura.svg#CameraObscura') format('svg');
}
/* End Custom Fonts CSS */