.landing-only {
  display: none;
  overflow: hidden;
  white-space: nowrap;
  position: relative;
  font-family: saira medium;
  font-size: 1.4rem;
  line-height: 1.7rem;
}

body.homepage .landing-only {
  display: inline;
}



body.homepage .footer {
    display: none;
}

.footer {
    display: block;
	
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 1rem;
    padding-bottom: 3rem;
	
	
}


@media only screen and (max-width: 768px) {
  .mobile-zoom img {
   scale: 170%;
   overflow: hidden;
      object-fit: cover;
   margin-top: 10vh;
   z-index: -5;
  }
}


.seperate {
 background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  padding: 2rem;
  color: white;
}


#VR5 {
  scroll-margin-top: 80px; /* or whatever spacing you need */
}

#imprint {
  scroll-margin-top: 80px; /* or whatever spacing you need */
}





.cv-entry {
  display: flex;
  justify-content: space-between;
  max-width: 100%;
  margin-bottom: 0.5rem;
  font-family: "Saira Regular", sans-serif;
  font-size: 1.4rem;
  color: #808080;
  line-height: 1.7rem;
  
  
}

.cv-date {
  flex: 0 0 120px; /* fixed width for dates */
  text-align: left;

}

@media only screen and (max-width: 768px) {
  .cv-date {
    flex: 0 0 75px; /* fixed width for dates */
  text-align: left;
  }
}

@media only screen and (min-width: 2000px) {
  .cv-date {
    flex: 0 0 200px; /* fixed width for dates */
  text-align: left;
  }
}




.cv-details {
  flex: 1;
  padding-left: 1rem;
  
   
}




.blur-shadow {
  background: #fff;
  margin-left: 200px;
  padding-left: 2px;
  padding-right: 2vh;
  border-radius: 2px;
  box-shadow: 0 0 3px rgba(79, 79, 79, 0.1);
}




@font-face {
    font-family: 'Saira Regular';
    src: url('https://files.cargocollective.com/c2160956/SairaSemiCondensed-Regular.ttf') format('truetype');
}

@font-face {
    font-family: 'Saira Medium';
    src: url('https://files.cargocollective.com/c2160956/SairaSemiCondensed-Medium.ttf') format('truetype');
}

@font-face {
    font-family: 'Saira Bold';
    src: url('https://files.cargocollective.com/c2160956/SairaSemiCondensed-Bold.ttf') format('truetype');
}

@font-face {
    font-family: 'Monument';
    src: url('https://files.cargocollective.com/c3039658/monument-grotesk-mono.ttf') format('truetype');
}

.button-12 {
  font-family: Saira Medium;
  font-size: 1.4rem;
  font-weight: normal;
  line-height: 1;
  letter-spacing: 0em;
  font-variation-settings: 'slnt' 0, 'MONO' 0;
  color: rgba(79, 79, 79, 1);
  display: inline-block;
  border: 0.12rem solid rgba(79, 79, 79, 1);
  border-radius: 0.4rem;
  padding: 0.2rem 0.7rem;
  background: rgba(212, 212, 212, 0.64);
  background: var(--bg-color);
  text-decoration: none;
  filter: drop-shadow(0.3rem 0.3rem 0.4rem rgba(255, 255, 255, 0.12));
  transition: all 0.2s ease-in-out;
}

.button-12:hover {
  color: #fff;
  font-family: Saira Medium;
  font-size: 1.4rem;
  font-weight: normal;
  line-height: 1;
  letter-spacing: 0em;
  font-variation-settings: 'slnt' 0, 'MONO' 0;
  color: rgba(48, 89, 129, 1);
  background: rgba(199, 210, 218, 0.64);
  border-color: rgba(48, 89, 129, 1);
  transform: scale(1.05);

}

.mobile .button-12 {
	font-family: 'Saira Medium';
	font-size: 1.4rem;
}

.button-12 a {
	color: rgba(79, 79, 79, 1);
	text-decoration: none;
	transform: scale(1.05);
}

.button-12 a:hover {
color: #305981;
transform: scale(1.05);
    
	
}

.button-12 a.active {
	color: rgba(48, 89, 129, 1);
	text-decoration: none;
}

/*VR5 Back Button*/
.button-11 {
  font-family: Saira Medium;
  position: fixed; 
  left: 26vh;
  font-size: 1.4rem;
  font-weight: normal;
  line-height: 1;
  letter-spacing: 0em;
  font-variation-settings: 'slnt' 0, 'MONO' 0;
  color:red;
  display: inline-block;
  border: 0.12rem solid red;
  border-radius: 0.4rem;
  padding: 0.2rem 0.7rem;
  background: rgba(255, 255, 255, 0.64);
  text-decoration: none;
  filter: drop-shadow(0.3rem 0.3rem 0.4rem rgba(255, 255, 255, 0.12));
  transition: all 0.2s ease-in-out;
}

.button-11:hover {
  color: #fff;
  font-family: Saira Medium;
  font-size: 1.4rem;
  font-weight: normal;
  line-height: 1;
  letter-spacing: 0em;
  font-variation-settings: 'slnt' 0, 'MONO' 0;
  color: rgba(48, 89, 129, 1);
  background: rgba(199, 210, 218, 0.64);
  border-color: rgba(48, 89, 129, 1);
  transform: scale(1.05);

}

.mobile .button-11 {
	font-family: Saira Medium;
	font-size: 1.4rem;
}

.button-11 a {
	color: rgba(79, 79, 79, 1);
	text-decoration: none;
	transform: scale(1.05);
}

.button-11 a:hover {
color: #305981;
transform: scale(1.05);
    
	
}

.button-11 a.active {
	color: rgba(48, 89, 129, 1);
	text-decoration: none;
}



/* 📱 Mobile adjustments */
@media screen and (max-width: 768px) {
  .button-11 {
    position: fixed; 
    top: 29vh; 
    left: 1.7vh;
     /* slightly zoomed out */
    background-color: rgba(255, 255, 255, 0.58);
	backdrop-filter: blur(0.20rem);
	box-shadow: 0.1rem 0.1rem 0.7rem 0rem rgba(255, 255, 255, 0.68);
	
  }
}

/*Disclaimer VR5 */
.button-10 {
  font-family: Saira Regular;
text-align: right;
  position: fixed; 
  max-width: 27vh;
  top: 20vh;
  font-size: 1.4rem;
  font-weight: normal;
  line-height: 1;
  letter-spacing: 0em;
  font-variation-settings: 'slnt' 0, 'MONO' 0;
  color: red;
  
}

/* 📱 Mobile adjustments */
@media screen and (max-width: 768px) {
  .button-10 {
    position: relative; 
    text-align: left;
    left: 0.1vh;
    
	top: 10vh; 
  
  }
}



/* Push video to back */
#video-background {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  z-index: -1000;
  pointer-events: none;
}

#video-background video {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.overlay-content {
  position: absolute; /* change to absolute for manual placement */
  top: 200%;           /* push down from top */
  left: 5%;           /* align left */
  z-index: 1000;
  color: white;
  padding: 2rem;
  background-color: rgba(255, 255, 255, 0.57); /* optional: light background for contrast */
  backdrop-filter: blur(10px);                /* optional: blur effect */
}



.video-background {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  z-index: -1;
}

.video-background video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  transform: translate(-50%, -50%);
  object-fit: cover;
  z-index: -2;
}

.video-overlay-content {
  position: relative;
  z-index: 2;
  text-align: center;
  color: white;
  background: white;
  padding: 6rem;
}

/* 📱 Mobile adjustments */
@media screen and (max-width: 768px) {
  .video-background video {
    width: 120%;
     /* slightly zoomed out */
    object-position: center center;
  }
}


image-gallery {
  display: flex;
  flex-wrap: wrap;
  margin: -0.5rem;
  z-index: 0;

}

.image-gallery img {
  width: calc(33.333% - 1rem); /* 3 per row with spacing */
  margin: 0.5rem;
  transition: transform 0.5s ease;
  will-change: transform;
  object-fit: cover;
  position: relative;
  z-index: 1;
    box-shadow: 0.1rem 0.1rem 0.7rem 0rem rgba(191, 191, 191, 0.27);
	border-width: 0.0rem;
	border-color: rgba(0,0,0,.85);
	border-style: solid;
  
}

.image-gallery img:hover {
  transform: scale(1.02);
  z-index: 9999;
  border-radius: 0.3rem;
}

	
[id="dock"] .page-content {
	padding-bottom: 0rem;
	background-color: rgba(255, 255, 255, 0.6);
	backdrop-filter: blur(0.40rem);
	box-shadow: 0.1rem 0.1rem 0.7rem 0rem rgba(205, 205, 205, 0.51);
	border-width: 0.0rem;
	border-color: rgba(0,0,0,.85);
	border-style: solid;
}

[id="dock"].page {
	background-color: rgba(255, 255, 255, 0.6);
}

[id="dock"] .page-layout {
	padding: 0rem;
	--page-layout-mix: normal;
}


	
[id="dock2"] .page-content2 {
	padding-bottom: 0rem;
	backdrop-filter: blur(0.8rem);
-webkit-backdrop-filter: blur(0.33rem);
	background-color: rgba(255, 255, 255, 0.65);
	box-shadow: 0.1rem 0.1rem 0.7rem 0rem rgba(205, 205, 205, 0.37);
	border-width: 0.0rem;
	border-color: rgba(0,0,0,.85);
	border-style: solid;

}

[id="dock"].page {
	background-color: rgba(255, 255, 255, 0.31);
    z-index: 0;
}

[id="dock"] .page-layout2 {
	padding: 0rem;
	--page-layout-mix: normal;
	z-index: 0;
}






p {
		text-align: justify;
  	
		font-family: Saira Regular;
		color: #808080;
		font-size: 1.4rem;
		font-weight: normal;
		line-height: 1.7rem;
    	
    	
       
	
		
	}

p a {
		
    	font-family: Saira Regular;
		color: #808080;
		
		font-weight: normal;
		
		text-decoration: none;
		
	}

p a:hover {
    color: #305981; /* Ändere dies auf die gewünschte Schriftfarbe im Hover-Zustand (Grau) */
}
	



p2 {
		text-align: justify;
  	
		font-family: Saira Regular;
		color: #808080;
		font-size: 1.4rem;
		font-weight: normal;
		line-height: 1.7rem;
    	
    	
       
	
		
	}

p2 a {
		
    	font-family: Saira Regular;
		color: #808080;
		font-size: 1.4rem;
		font-weight: normal;
		line-height: 1.7rem;
		text-decoration: none;
		
	}

p2 a:hover {
    color: #305981; /* Ändere dies auf die gewünschte Schriftfarbe im Hover-Zustand (Grau) */
}



p3 {
		display: block;
    	text-align: justify;
		text-align-last: left;
		font-family: Monument;
		text-align: justify;
  		width: 100%;
		color: #4f4f4f;
		font-size: 1.4rem;
		font-weight: normal;
		line-height: 1.7rem;
    	
    	
       
	
		
	}

/* FOOTER font */

p5 {
		text-align: justify;
  	
		font-family: Saira Regular;
		color: #808080;
		font-size: 1.2rem;
		font-weight: normal;
		line-height: 0.5rem;
    	
    	
       
	
		
	}

p5 a {
		
    	font-family: Saira Regular;
		color: #808080;
		
		font-weight: normal;
		
		text-decoration: none;
		
	}

p5 a:hover {
    color: #305981; /* Ändere dies auf die gewünschte Schriftfarbe im Hover-Zustand (Grau) */
}




pj {
		 text-align: justify;
  		max-width: 600px; /* or 100% */
  		width: 100%;
		font-family: Saira Regular;
		color: #808080;
		font-size: 1.4rem;
		font-weight: normal;
		line-height: 1.7rem;
    	
       
	
		
	}

pj a {
		
    	font-family: Saira Regular;
		color: #4f4f4f#4f4f4f;
		
		font-weight: normal;
		
		text-decoration: none;
		
	}

pj a:hover {
    color: #305981; /* Ändere dies auf die gewünschte Schriftfarbe im Hover-Zustand (Grau) */
}




	h1 {
		font-family: Saira Medium;
		color: #4f4f4f;
		font-size: 1.5rem;
		font-weight: normal;
		line-height: 1.5rem;
	
	}


	h1 a {
		text-align: justify;	
    	font-family: Saira Medium;
		color: #4f4f4f;
		font-size: 1.5rem;
		font-weight: normal;
		line-height: 1.5rem;
		text-decoration: none;
		
	}

h1 a:hover {
    color: #305981; /* Ändere dies auf die gewünschte Schriftfarbe im Hover-Zustand (Grau) */
}


home {
		font-family: Saira Medium;
		color: #4f4f4f;
		font-size: 1.1rem;
		font-weight: 100;
		line-height: 0rem;
	
	}


	home a {
		text-align: justify;	
    	font-family: Saira Medium;
		color: #4f4f4f;
		font-size: 1.1rem;
		font-weight: 100;
		line-height: 1.5rem;
		text-decoration: none;
		
	}

home a:hover {
    color: #305981; /* Ändere dies auf die gewünschte Schriftfarbe im Hover-Zustand (Grau) */
}



	h2 {
		font-family: Saira Medium;
		color: #4f4f4f;
		font-size: 1.6rem;
		font-weight: normal;
		line-height: 1.7rem;
	
	}


	h2 a {
		text-align: justify;	
    	font-family: Saira Medium;
		color: #4f4f4f;
		font-size: 1.1rem;
		font-weight: normal;
		line-height: 1.5rem;
		text-decoration: none;
		
	}

h1 a:hover {
    color: #305981; /* Ändere dies auf die gewünschte Schriftfarbe im Hover-Zustand (Grau) */
}


h3 {
		font-family: Saira Medium;
		color: red;
		font-size: 1.5rem;
		font-weight: normal;
		line-height: 1.5rem;
	
	}

pj a {
		text-align: justify;	
    	font-family: Saira Regular;
		color: #4f4f4f#4f4f4f;
		font-size: 1.1rem;
		font-weight: normal;
		line-height: 1.5rem;
		text-decoration: none;
		
	}
	
	h4 {
    font-family: Saira Medium;
    font-size: 1.4rem;
    text-transform: uppercase;
    font-weight: 400;
    color: #4f4f4f;
    margin-bottom: 0px;
    margin-top: -10px;
    line-height: 1.5; /* Legt den Zeilenabstand fest */
}



h4 a {
    color: #808080; 
    text-decoration: none;
    font-family: Saira Medium;
    font-size: 1.4rem;
    font-weight: 540;
    line-height: 0.1rem;
    transition: color 0.4s; /* Fügt eine sanfte Übergangsanimation für die Schriftfarbe hinzu */
}

/* Schriftfarbe ändern beim Hover */
h4 a:hover {
    color: #305981; /* Ändere dies auf die gewünschte Schriftfarbe im Hover-Zustand (Grau) */
}

	
h5 a {
    color: #4f4f4f; 
    text-decoration: none;
    font-family: Saira Medium;
    font-size: 1.2rem;
    font-weight: 540;
    line-height: 2rem;
    transition: color 0.4s; /* Fügt eine sanfte Übergangsanimation für die Schriftfarbe hinzu */
}

/* Schriftfarbe ändern beim Hover */
h5 a:hover {
    color: #305981; /* Ändere dies auf die gewünschte Schriftfarbe im Hover-Zustand (Grau) */
}


  
 



body {
	background-color: #fff;
	color: #000;
    padding-top: 0px;
   ;
}

.body-container {
    position: relative;
 
}

@font-face {
    font-family: 'Space';
    font-weight: bold;
    font-style: normal;
    src: url('https://files.cargocollective.com/c1859688/SpaceGrotesk-VariableFont_wght.ttf');
}

@font-face {
    font-family: 'MONO';
    font-weight: normal;
    font-style: normal;
    src: url('https://files.cargocollective.com/c1997659/ABCMonumentGroteskSemi-Mono-Regular-Trial.otf');
}

#burger-menu {
    cursor: pointer;
    width: auto;
    font-size: 1.1rem;
    padding-left: 10px;
    margin-right: 10px;
    padding-top: 10px;
    padding-bottom: 10px ;
    background: #fff;
    font-family: 'Saira Regular';
    color: #808080;
    font-size: 1.1rem;
    font-weight: normal;
    line-height: 1.5rem;
    position: fixed;
}

#burger-icon {
    display: block;
    font-size: 36px; /* Hier die Schriftgröße des Symbols anpassen */
}

/* Dropdown-Menü für Desktop */
#desktop-dropdown {
    display: none;
    position: absolute;
    width: 170px; /* Hier die Breite des Dropdown-Menüs anpassen */
    top: 100%;
    left: 0;
    background-color: #fff; /* Hintergrundfarbe anpassen */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    padding: 10px;
    font-family: 'Saira Regular';
    color: #808080;
    font-size: 0.1rem;
    font-weight: normal;
    line-height: 1.5rem;
}

/* Stil der Menüelemente */
#desktop-dropdown ul {
    list-style: none;
    padding: 0;
    margin: 0;
    font-family: 'Saira Regular';
    color: #808080;
    font-size: 0.1rem;
    font-weight: normal;
    line-height: 0.1rem;
}

#desktop-dropdown li {
    margin-bottom: 1px;
}

#desktop-dropdown a {
    text-decoration: none;
    color: #808080; /* Schriftfarbe anpassen */
    font-size: 18px;
}

/* Änderung der Farbe bei Hover */
#desktop-dropdown a:hover {
    color: #305981; /* Farbe anpassen */
}

/* Zeige Dropdown-Menü bei Klick auf das Burger-Menü, wenn es aktiv ist */
#burger-menu.active + #desktop-dropdown {
    display: block;
}




/* Änderungen für mobile Geräte */
@media only screen and (max-width: 767px) {
    #burger-menu {
        display: none; /* Verstecke Burger-Menü bei mobilen Geräten */
    }
}

i,
em {
	font-style: italic;
}

b,
strong {
	font-weight: bolder;
}

sub,
sup {
	position: relative;
	vertical-align: baseline;
}

sub {
	top: 0.3em;
}

sup {
	top: -0.4em;
}

s {
	text-decoration: line-through;
}

img {
	border: 0;
	padding:0;
}

ul,
ol {
	margin: 0;
	padding: 0 0 0 1em;
}

blockquote {
	margin: 0;
	padding: 0 0 0 2em;
}

hr {
	background: rgba(127, 127, 127, 0.2);
	border: 0;
	height: 1px;
	display: block;
}

.content img {
	float: none;
	margin-bottom: .5em;
}

.gallery_image_caption {
    margin-top: 1.2rem;
    margin-bottom: 0.5rem;
    font-size: 1.5rem;
	font-weight: 400;
	color: rgba(0, 0, 0, 0.35);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, "Sans Serif", Icons;
	font-style: normal;
	line-height: 1.3;	
}
@keyframes vertical-scroll {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-100%);
  }
}




 

/**
 * Loading Animation
 */

.loading[data-loading] {
	position: fixed;
	bottom: 8px; 
    left: 8px;
}



.custom-gif-container {
  position: fixed;
  top:10px;
  left: 4px;
  width: 200px;
  height: auto;
  z-index: -2;
  scale: 70%;
  pointer-events: none; /* so it doesn't block clicks */
}


@media only screen and (max-width: 768px) {
  .custom-gif-container {
  position: fixed;
  top: 10px; 
  scale: 45%;
  left: 13vh;
  z-index: -2;/* Anpassen Sie dies entsprechend Ihrer gewünschten Position *
  width: 30% ;

; /* Verhindert, dass das Bild über die Höhe hinausragt */
}
    
    }
@media only screen and (min-width: 2000px) {
  .custom-gif-container {
  position: fixed;
  top: 300px; 
  scale: 110%;
  left: -75px;
  z-index: -2;/* Anpassen Sie dies entsprechend Ihrer gewünschten Position *
  width: 30% ;

; /* Verhindert, dass das Bild über die Höhe hinausragt */
}
    

  .custom-gif-container img {
   /* Damit das Bild die Höhe des Containers ausfüllt */
  display: block; /* Sicherstellen, dass es sich um ein Blockelement handelt */
  margin: auto;
  padding: 20px;
}
}

/**
 * Breakpoints
 */


[data-css-preset] .page {
    background-color: initial/*!page_bgcolor*/;
 
}

.mobile .page,
[data-css-preset].mobile .page {
	position: relative;
	min-height: 10px;
	max-width: 100%;
	width: 100%;
	background-color: transparent /*!page_bgcolor*/;
}

[data-css-preset] .container {
	margin-left: 0 /*!content_left*/;
	margin-right: 1 /*!content_left*/;
    margin-top: 0px;
    padding-top: 0px ;
	text-align: left ;
 ;
}
[data-css-preset] .container2 {
	margin-left: 0 /*!content_left*/;
	margin-right: 16 /*!content_left*/;
    margin-top: 1px;
	text-align: left ;
 ;
}
[data-css-preset] body {
	background-color: rgba(255, 255, 255, 0.98)/*!body_bgcolor*/;
}

[data-css-preset] .container_width {
	width: 100%/*!content_left*/;
}

[data-css-preset] .content_padding {
	padding-top: 0.8rem /*!main_margin*/;
	padding-bottom: 0.8rem /*!main_margin*/;
	padding-left: 0.8rem /*!main_margin*/;
	padding-right: 0.8rem /*!main_margin*/;
}


[data-css-preset] text-limit {
	display: inline-block /*!text_width*/;
	max-width: 66rem/*!text_width*/;
}

/**
 * Thumbnails
 */

div[thumbnails] {
	justify-content: flex-start;
}

[data-css-preset] .thumbnails {
   	background-color: rgba(0, 0, 0, 0)/*!thumbnails_bgcolor*/;   
}

[data-css-preset] .thumbnails_width {
    width: 100%/*!thumbnails_width*/;
}

[data-css-preset] [thumbnails-pad] {
    padding: 1rem/*!thumbnails_padding*/;
}

[data-css-preset] [thumbnails-gutter] {
    margin: -2rem/*!thumbnails_padding*/;
}

[data-css-preset] [responsive-layout] [thumbnails-pad] {
    padding: 0.5rem/*!responsive_thumbnails_padding*/; 
}

[data-css-preset] [responsive-layout] [thumbnails-gutter] {
    margin: -1rem/*!responsive_thumbnails_padding*/; 
}

.thumbnails .thumb_image {
	outline: 0px solid rgba(0,0,0,.12);
    outline-offset: -1px;
}

.thumbnails .title {
    margin-top: 1.2rem;
    margin-bottom: .3rem;
    font-size: 1.8rem;
	font-weight: normal;
	color: rgba(0, 0, 0, 0.85);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, "Sans Serif", Icons;
	font-style: normal;
	line-height: 1.1;
}

.thumbnails .tags {
    margin-top: 1.2rem;
    margin-bottom: 0.5rem;
    font-size: 1.6rem;
	font-weight: 400;
	color: rgba(0, 0, 0, 0.35);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, "Sans Serif", Icons;
	font-style: normal;
	line-height: 1.2;
}

.thumbnails .tags a {
	border-bottom: 0;
    color: rgba(0, 0, 0, 0.35);
    text-decoration: none;
}

.thumbnails .has_title .tags {
	margin-top: 0rem;
}

/**
 * Site Menu
 */
[data-css-preset] #site_menu_button_desktop {
    color: #808080;
    line-height: 1;
    font-size: 28px /*!site_menu_button*/;
    padding-left: 30px;
    padding-top: 20px;
    padding-bottom: 1px;
    width: auto;
    line-height: 1;
    background: rgba(255, 255, 255, 1);
    position: fixed;
    top: -1vh;
    z-index: 1;
}

/* Neue CSS-Regel für den Burger-Button */
[data-css-preset] #site_menu_button_desktop.burger-menu {
    background: rgba(255, 255, 255, 1);
    padding-top: 15px; /* Anpassen Sie die Padding-Werte nach Bedarf */
    padding-bottom: 15px; /* Anpassen Sie die Padding-Werte nach Bedarf */
}

[data-css-preset] #site_menu_button_desktop.burger-menu2 {
    background: rgba(255, 255, 255, 1);
    padding-top: 15px; /* Anpassen Sie die Padding-Werte nach Bedarf */
    padding-bottom: 15px; /* Anpassen Sie die Padding-Werte nach Bedarf */
}



[data-css-preset] #site_menu_button2_desktop {
     color: #808080;
    line-height: 1;
    font-size: 28px /*!site_menu_button*/;
    padding-left: 30px;
    padding-top: 0px;
    padding-bottom: 100px;
    width: auto;
    line-height: 1;
    background: rgba(255, 255, 255, 1);
    position: absolute;
    top: 0;
    z-index: -1000;
}

@media screen and (max-width: 767px) {
    [data-css-preset] #site_menu_button_desktop {
        display: none; /* Verstecke den Button auf mobilen Geräten */
    }
}

@media screen and (max-width: 767px) {
    [data-css-preset] #site_menu_button2_desktop {
        display: none; /* Verstecke den Button auf mobilen Geräten */
    }
    }
    
    
    [data-css-preset] #site_menu_button {

/*!BURGERBURGER*/
     color: #808080;
    line-height: 1;
    font-size: 28px /*!site_menu_button*/;
    padding-left: 10px;
    padding-top: 2px;
    padding-right: 8px ;
    padding-bottom: 6px;
    width: auto;
    line-height: 1;
    backdrop-filter: blur(0.8rem);
-webkit-backdrop-filter: blur(0.4rem);
	background-color: rgba(255, 255, 255, 0.65);
    position: fixed;
	border-radius: 0.3rem;
   
	top: 0rem /*!site_menu_button*/;
	left: 0rem /*!site_menu_button*/;
}



[data-css-preset] #site_menu_button2 {
     color: #808080;
    line-height: 1;
    font-size: 28px /*!site_menu_button*/;
    padding-left: 30px;
    padding-top: 0px;
    padding-bottom: 100px;
    width: auto;
    line-height: 1;
    background: rgba(172, 46, 189, 1);
    position: absolute;
    top: -10px;
    z-index: 3;
}

@media screen and (max-width: 767px) {
    [data-css-preset] #site_menu_button {
        display: none; /* Verstecke den Button auf mobilen Geräten */
    }
}

@media screen and (max-width: 767px) {
    [data-css-preset] #site_menu_button2 {
        display: none; /* Verstecke den Button auf mobilen Geräten */
    }
}
body.mobile #site_menu_button {
	
    font-size: 34px;
    
}

#site_menu_button.custom_icon {
	width: 40px;
    height: auto;
   
    
}
#site_menu_button.active {
	display: none;
  
}

body.mobile #site_menu_button2 {
	
    font-size: 34px;
    
}

#site_menu_button2.custom_icon {
	width: 40px;
    height: auto;
    
    
}
#site_menu_button2.active {
	display: none;
   
}

/**
 * Site Menu
 */
#site_menu {

/* MENUWINDOW */
	font-family: Saira Medium;
   color:#808080;
	margin: 0;
	padding: 0;
	width: 10%; /* Optional: full width */
  backdrop-filter: blur(0.8rem);
-webkit-backdrop-filter: blur(0.8rem);
	background-color: rgba(255, 255, 255, 0.77);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    text-align: left !important;
	font-size: 20px;
	font-style: normal;
	padding: 0px 0px 0px 0px;
	height: 125px;
	display: flex;
	justify-content: flex-start;
	font-weight: 100;
	font-variation-settings: 'slnt' 0, 'MONO' 0;
	border-radius: 0.3rem;
}

	#toggle{
		background: linear-gradient(red, red, darkred);
		border-color: white;
		border-radius: 0.25vw;
		text-align: left;
		border-width: 0.2vw;
		font-family: Webdings;
		margin: auto;
        z-index: 6;
        
        }

body.mobile #site_menu {
    width: auto !important;
     text-align: left !important;
    margin-left: 0px ;
    margin-right: 40vw;
padding-right: 0;
    }

#site_menu .page-link a {
	color: #808080;
}

#site_menu .set-link > a {
	color: rgba(3, 3, 3, 0.75);
	font-weight: bold;
}

#site_menu a:active {
	color: #305981;
}

#site_menu a.active {
	color: #305981;
}

#site_menu .close {
    display: none;
    color:  rgba(255, 255, 255, 0);
    line-height: .85em;
    font-size: 45px;
}

body.mobile #site_menu .close {
    display: block;
    font-size: 50px;
    line-height: 1em;
}


#site_menu .break {
	height: 28px;
}

#site_menu .indent {
	margin-left: 28px;
}

/*
 * Shop Button
 */

[data-css-preset] #shop_button {
	color: rgba(0, 0, 0, 0.85);
    background: transparent;
	font-size: 32px;
    font-style: normal;
	font-weight: 400;
    line-height: 1;
    position: fixed;
	padding: 6px;
	top: 2rem /*!shop_button*/;
	right: 2rem /*!shop_button*/;
}

#shop_button.text {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, "Sans Serif", Icons;
	font-size: 2rem;
    padding: 0;
	font-weight: 400;
	color: rgba(0, 0, 0, 0.85);
}

#shop_button.custom_icon {
	width: 40px;
    height: auto;
}

body.mobile #shop_button:not(.text) {
	margin: -6px;
    font-size: 36px;
}

/*
 * Shop Product Widget
 */

.shop_product {
    width: 100%;
	max-width: 22rem;
    position: relative;
    display: block;
}

.shop_product .price {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, "Sans Serif", Icons;
	font-size: 2rem;
	line-height: 1;
	color: rgba(0, 0, 0, 0.85);
    display: block;
    margin-bottom: 1rem;
}

.shop_product .dropdown {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, "Sans Serif", Icons;
    font-size: 1.4rem;
    display: inline-block;
	width: 100%;
    border: 1px solid rgba(0,0,0,.2);
    background:  white url(https://static.cargo.site/assets/images/select-arrows.svg) no-repeat right;
    margin-bottom: 1rem;
    line-height: 1.2;
    padding: .7rem 2.5rem .7rem 1rem;
}

.shop_product .button {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, "Sans Serif", Icons;
	font-size: 1.4rem;
    background: rgba(0, 0, 0, 0.7);
    color: rgba(255,255,255,1);
    flex: 0 0 50%;
    text-align: left;
    display: inline-block;
	line-height: 1;
    padding: .8rem 1rem .9rem;
}

/*
 * Image Zoom
 */

.content img.image-zoom:active {
  opacity: .7;
}

/**
 * Quick View
 */

[data-css-preset] .quick-view {
    padding-top: 2.5rem /*!quick_view_padding*/;
    padding-bottom: 2.5rem /*!quick_view_padding*/;
    padding-left: 2.5rem /*!quick_view_padding*/;
    padding-right: 2.5rem /*!quick_view_padding*/;
    height: 100% /*!quick_view_height*/;
    width: 100% /*!quick_view_width*/;
}

body.mobile .quick-view {
    width: 100%;
    height: 100%;
    margin: 0;
}


[data-css-preset] .quick-view-background {
	background: rgba(0, 0, 0, 0.85) /*!quick_view_bgcolor*/;
}

.quick-view-caption {
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif;
    font-weight: 400;
    transition: 100ms opacity ease-in-out;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 3.5rem 0;
    text-align: center;
    font-size: 1.5rem;
}

.quick-view-caption span {
    padding: 0.5rem 1rem;
    display: inline-block;
    background: rgba(0,0,0,.5);
    color: white;
}


/**
 * Quick View Navigation 
 */

.quick-view-navigation .left-arrow {
    left: 10px;
}

.quick-view-navigation .right-arrow {
    right: 10px;
}

.quick-view-navigation .left-arrow,
.quick-view-navigation .right-arrow {
    /* Change height/width together to scale */
    height: 36px;
    width: 36px;
}

.quick-view-navigation .left-arrow .inner-color,
.quick-view-navigation .right-arrow .inner-color {
    stroke: #8f8f8f;
    stroke-width: 1.5px;
}

.quick-view-navigation .left-arrow .outer-color,
.quick-view-navigation .right-arrow .outer-color {
    stroke: #8f8f8f;
    stroke-width: 2.5px;
}

.quick-view-navigation .close-button {  
    top: 10px;
    right: 10px;
    /* Change height/width together to scale */
    width: 36px;
    height: 36px;
}

.quick-view-navigation .close-button .inner-color {
    stroke: #fff;
    stroke-width: 1.5px;
}

.quick-view-navigation .close-button .outer-color {
    stroke: #000;
    stroke-width: 2.5px;
    opacity: 0.6;
}

/** 
 * Image Gallery Navigation Arrows 
 */
 
.image-gallery-navigation .left-arrow,
.image-gallery-navigation .right-arrow {
    /* Change height/width together to scale */
    height: 36px;
    width: 36px;
}

.image-gallery-navigation .left-arrow .inner-color,
.image-gallery-navigation .right-arrow .inner-color {
    stroke: #8f8f8f;
    stroke-width: 1.5px;
}

.image-gallery-navigation .left-arrow .outer-color,
.image-gallery-navigation .right-arrow .outer-color {
    stroke: #8f8f8f;
    stroke-width: 2.5px;
    position: absolute;
   
    
}

.image-gallery-navigation .left-arrow .outer-color {
    left: 1000; /* Ändere den Wert nach Bedarf */
}

.image-gallery-navigation .right-arrow .outer-color {
    right: 1000; /* Ändere den Wert nach Bedarf */
}

/**
 * Wallpaper Backdrop Navigation Arrows 
 */

.wallpaper-navigation .left-arrow,
.wallpaper-navigation .right-arrow {
   /* Change height/width together to scale */
   width: 36px;
   height: 36px;
}

.wallpaper-navigation .left-arrow .inner-color,
.wallpaper-navigation .right-arrow .inner-color {
   stroke: #fff;
   stroke-width: 1.5px;
}

.wallpaper-navigation .left-arrow .outer-color,
.wallpaper-navigation .right-arrow .outer-color {
    stroke: rgba(0, 0, 0, 0.6);
    stroke-width: 2.5px;
}


/**
 * Feed
 */

.feed .content_container .page {
    border-top: 0px dashed rgba(0, 0, 0, 0.2);
}

.feed .content_container .page_container:first-child .page {
	border-top: 0;
}



/*
 * Audio Player
 */

    
.audio-player {
    width: 100%;
    max-width: 100%;
    height: 3.3rem;
    font-size: 1.2rem;
    line-height: 1.3;
    font-family: "Monument Grotesk Semi-Mono Variable", Icons;
    font-style: normal;
    font-weight: 400;
    text-align: left;
    margin: 1px 1px 1em 1px;
	font-variation-settings: 'slnt' 0, 'MONO' 0.5;
  
}




.audio-player .separator {
    width: 1px;
    background-color: rgba(191, 191, 191, 0);
    
}

.audio-player .button {
    background: #fff;
    cursor: pointer;
    fill: rgba(255, 255, 255, 1);
}

.audio-player .icon {
    fill: rgba(191, 191, 191, 0.15);
    padding: 30%;
    width: 100%;
    margin: auto;
}

.audio-player .buffer {
    background: rgba(146, 75, 75, 0.03);
}

.audio-player .progress {
    background: rgba(255, 255, 255, 0.1);
}

.audio-player .progress-indicator {
    border: 1px solid rgba(255, 255, 255, 0.7);
    width: 1px;
    height: 100%;
    right: 0;
    position: absolute;
    cursor: ew-resize;
}

.audio-player .note-icon {
    height: 100%;
    width: 3.8rem;
    padding: 1rem;
    fill: rgba(255, 255, 255, 0.5);
}

.audio-player .current-time {
    padding-left: 1rem;
}

.audio-player .total-time {
    padding-right: 1rem;
}
   
   


[data-predefined-style="true"] .custom-icon {
  	display: flex;
  	align-items: center;
  	cursor: pointer;
	font-size: 1.4rem;
	font-family: "Saira regular", Icons;
	font-style: normal;
	font-weight: 200;
	color: #8f8f8f;
}

[data-predefined-style="true"] .icon-image {
  width: 30px;
  height: auto;
  margin-right: 3px;
  margin-bottom: 9px ;
  transition: transform;
  font-size: 5.3rem;
  line-height: 1.1;
}

[data-predefined-style="true"] details[open] .icon-image {
  transform: rotate(90deg);
}

@media screen and (max-width: 767px) {
  [data-predefined-style="true"] details .custom-icon::before {
    width: 20px; /* Passen Sie die Größe nach Bedarf an */
    height: 20px; /* Passen Sie die Größe nach Bedarf an */
  }

  /* Verstecke den Pfeil in der mobilen Ansicht */
  [data-predefined-style="true"] details summary::-webkit-details-marker {
    display: none;
  }
}
/* Füge diese Regel hinzu, um die Image Gallery standardmäßig zu verbergen */
.image-gallery {
  display: none;
}

/* Füge diese Regel hinzu, um die Image Gallery anzuzeigen, wenn das Elternelement das 'open'-Attribut hat */
details[open] .image-gallery {
  display: flex; /* Ändere 'flex' zu 'block', wenn 'flex' Probleme verursacht */
}

/* Stelle sicher, dass die Bildgröße korrekt ist und die Bilder innerhalb der Galerie sichtbar sind */
.image-gallery img {
  max-width: 1200px;
  max-height: auto;
 
}

/* Füge diese Regel hinzu, um sicherzustellen, dass die Image Gallery beim Klicken auf die Pfeile sichtbar bleibt */
details[open] [aria-controls="image-gallery"] {
  display: block;
}
/* Globale Breite aller Werkbeschreibungen */
.description {
    text-align: justify; /*Blocksatz*/
    max-width: 100%;

    
}


/* Stelle sicher, dass die Bildgröße korrekt ist und die Bilder innerhalb der Galerie sichtbar sind */
.image-gallery img {
  max-width: 4000px;
  max-height: auto;
 
}

/* Füge diese Regel hinzu, um sicherzustellen, dass die Image Gallery beim Klicken auf die Pfeile sichtbar bleibt */
details[open] [aria-controls="image-gallery"] {
  display: block;
}
/* Globale Breite aller Werkbeschreibungen */
.description {
    text-align: justify; /*Blocksatz*/
    max-width: 100%;

    
}



/* Basis-Styling für das OverlayGlass-Div */
.overlayGlass {
  position: absolute;
  top: 0;
  left: 0;
  width: 50vh;
  height: 40vh;
  margin-left: 20vh;
  margin-top: 11vh;
  z-index: 999; /* Stellen Sie sicher, dass das Overlay über dem Inhalt liegt */
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(15px) ;/* Anpassbare Unschärfe, Sättigung und Farbton */
  background-color: rgba(171, 215, 255, 0.21);/* Anpassbare Unschärfe */
  
}

/* Text-Styling im OverlayGlass */
.overlayGlass-text {
  		font-family: Saira Regular;
		color: #808080;
		font-size: 1.1rem;
		font-weight: normal;
		line-height: 1.5rem;
        text-align: justify;
		padding: 30px;
}


.horizontal-scroll {
  overflow-x: auto;
  white-space: nowrap;
  width: 100%; /* Oder eine feste Breite nach Bedarf */
}

.horizontal-scroll > div {
  display: inline-block;
  margin-right: 0px; /* Optionaler Abstand zwischen den Elementen */
}


.marquee-container {
   
    overflow: hidden;
    background: #fff;
    border: solid 1px #808080 ;
  
}

.marquee-content {
    white-space: nowrap; 
    height: 100%;
    line-height: 1.4;
    color: #808080;
    font-family: 'MONO';
    display: flex;
    flex-direction: column;
    transform: translate3d(0, 0, 0);
    animation: marquee 20s linear infinite; /* Füge eine CSS-Animation hinzu */
}

@media screen and (min-width: 768px) {
    .marquee-container {
        width: 100%; 
        height: 80%;

    }

    .marquee-content {
		margin-left: 20px;
        margin-right: 20px;
    }
}

@media screen and (max-width: 767px) {
    .marquee-container {
        font-family: "MONO", Icons;
        font-style: normal;
        font-size: 1rem;
        font-weight: 400;
    	font-variation-settings: 'slnt' 0, 'MONO' 1;
    }

    .marquee-content {
		margin-left: 12px;
		
       
        
    }
}

/* Wiederholung der Animation ohne Lücke */
@keyframes marquee {
    0%, 100% {
        transform: translateZ(100%);
    }
    50% {
        transform: translateZ(-100%);
    }
}


.header {
    position: relative;
    text-align: left;
     z-index: 1;
 	
    
}

.header img {
    position: top;
    width: 100%; /* Die Breite des Bildes wird auf 100% der Elternbreite gesetzt */
    height: auto; /* Die Höhe wird automatisch anhand des Seitenverhältnisses angepasst */
    z-index: 2;
 	
}

@media screen and (max-width: 767px) {
    .header img {
        position: fixed;
        width: 133%;
        height:auto;
        position: relative;
        left: -31%;
        z-index: 1;
        padding-top: 2%;
      }
 }

.header2 {
    position: relative;
    text-align: left;
	z-index: -5;
	left: -10%;
	top: -40px;
	
 	
    
}

.header2 img {
    position: top;
    width: 110%; /* Die Breite des Bildes wird auf 100% der Elternbreite gesetzt */
    height: auto; /* Die Höhe wird automatisch anhand des Seitenverhältnisses angepasst */
    z-index: -2;
	
 	
}

@media screen and (max-width: 767px) {
    .header2 img {
        position: fixed;
        width: 160%;
        height:auto;
        position: relative;
        left: -19%;
		z-index: 1;
      }
 }



.header3 {
    position: relative;
    text-align: left;
	z-index: -5;
	left: -8%;
	top: 0px;
	
 	
    
}

.header3 img {
    position: top;
    width: 120%; /* Die Breite des Bildes wird auf 100% der Elternbreite gesetzt */
    height: auto; /* Die Höhe wird automatisch anhand des Seitenverhältnisses angepasst */
    z-index: -2;
	
 	
}

@media screen and (max-width: 767px) {
    .header3 img {
        position: fixed;
        width: 160%;
        height:auto;
        position: relative;
        left: -13%;
		z-index: 1;
      }

}


.header4 {
    position: relative;
    text-align: left;
	z-index: -5;
	left: -8%;
	top: 0px;
	
 	
    
}

.header4 img {
    position: top;
    width: 120%; /* Die Breite des Bildes wird auf 100% der Elternbreite gesetzt */
    height: auto; /* Die Höhe wird automatisch anhand des Seitenverhältnisses angepasst */
    z-index: -2;
	
 	
}

@media screen and (max-width: 767px) {
    .header4 img {
        position: fixed;
        width: 160%;
        height:auto;
        position: relative;
        left: -52%;
		z-index: 1;
      }

  }

.arrow-1 {
      position: relative;
      display: inline-block;
      width: 24px; /* Breite des Pfeils */
      height: 24px; /* Höhe des Pfeils */
      margin-right: 5px; /* Optional: Abstand zwischen Pfeil und Text */
    }

    .arrow-1::before {
      content: '';
      position: absolute;
      top: 4px; /* Anpassen der Position des Dreiecks */
      left: 20px;
      width: 0;
      height: 0;
      border-style: solid;
      border-width: 10px 0 10px 10px; /* Größe und Form des Dreiecks */
      border-color: transparent transparent transparent #808080; /* Farbe des Dreiecks */
      
    }

    .arrow-1::after {
      content: '';
      position: absolute;
      top: 10px;
      left: 0px; /* Position des Rechtecks */
      width: 24px; /* Breite des Rechtecks */
      height: 8px; /* Höhe des Rechtecks */
      background-color: #808080; /* Farbe des Rechtecks */
    }

@media screen and (max-width: 767px) {
   .arrow-1 {
      position: relative;
      scale: 60%;
      top: 7px ;
	  left: -5px;
      display: inline-block;
      width: 24px; /* Breite des Pfeils */
      height: 24px; /* Höhe des Pfeils */
      /* Optional: Abstand zwischen Pfeil und Text */
    }

    .arrow-1::before {
      content: '';
      position: absolute;
      top: 3px; /* Anpassen der Position des Dreiecks */
      left: 10px;
      width: 0;
      height: 0;
      border-style: solid;
      border-width: 10px 0 10px 10px; /* Größe und Form des Dreiecks */
      border-color: transparent transparent transparent #808080; /* Farbe des Dreiecks */
      
    }

    .arrow-1::after {
      content: '';
      position: absolute;
      top: 10px;
      left: 0px; /* Position des Rechtecks */
      width: 12px; /* Breite des Rechtecks */
      height: 6px; /* Höhe des Rechtecks */
      background-color: #808080; /* Farbe des Rechtecks */
    }
 }


.landing-only-mobile {
  display: none; /* hide by default */
  
  overflow: hidden;
  white-space: nowrap;
  width: 99%;
  
  border: none;
  border-right: 1px solid red;
  
  font-family: 'Saira Medium', sans-serif;
  font-size: 1.5rem;
  line-height: 1.5rem;
}

body.homepage .landing-only-mobile {
  display: inline-block; /* show only on landing page */
}

.scrolling-text {
  display: inline-block;
  padding-left: 100%;
  animation: marquee 13s linear infinite;
  white-space: nowrap;
  color: #f00;
}


@keyframes marquee {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}



.landing-only-mobile2 {
  display: none; /* hide by default */
  
  overflow: hidden;
  white-space: nowrap;
  width: 99%;
  
  border: none;
  border-right: 1px solid red;
  
  font-family: 'Saira Medium', sans-serif;
  font-size: 1.5rem;
  line-height: 1.5rem;
}

body.homepage .landing-only-mobile2 {
  display: inline-block; /* show only on landing page */
}

.scrolling-text2 {
  display: inline-block;
  padding-left: 100%;
  animation: marquee 13s linear infinite;
  white-space: nowrap;
  color: #f00;
}


@keyframes marquee {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}