@charset "UTF-8";
/* CSS Document */



    @font-face {
      font-family: pickle;
      src: url("fonts/pickle.ttf");
    }


    * {
      font-family: pickle;
      text-decoration: none;
      font-size: 30px;
    
    }
	
 
    body {
     
    background-color: #000000;
    margin-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
	/*background: url("img/picklecourt-dark.jpg") no-repeat center center fixed;
  	-webkit-background-size: cover;
	
  	-moz-background-size: cover;
  	-o-background-size: cover;
  	background-size: cover;*/
	scroll-behavior: smooth;
		font-size: clamp(1em, 2.8vw, 1.75em);
		cursor: url('img/cursor.png') 16 16, auto;
	}
    
	a:link {
	color: #999999;
	text-decoration-line: none;
	z-index: 10;
cursor: url('img/cursoractive.png') 16 16, auto;
	font-family: pickle;
	
}


a:visited {
  	color: #999999;
	font-family: pickle;
	cursor: url('img/cursoractive.png') 16 16, auto;
	
}

a:hover {
  	color: #ffcc00;
	font-family: pickle;
	cursor: url('img/cursoractive.png') 16 16, auto;
	
}

a:active {
    color: #ffcc00;
	font-family: pickle;
	cursor: url('img/cursoractive.png') 16 16, auto;
    
}
	
	h2 {
		color: #ffcc00;
		font-size: clamp(1.5em, 2.8vw, 1.75em);
		
	}
	
ul {
  list-style-image: url("/favicon-16x16.png")
}

	.starter {
		font-size: clamp(1.5em, 2.8vw, 1.75em);
		color: #ffcc00;
		width: 80%;
        height: auto;
       
        margin-right: auto;
		margin-left: 0%;
        
        text-align: left;
	}
	
    .logo
    {
        
        width: 60%;
        height: auto;
        margin-top: 0%;
        margin-left: 20%;
        margin-right: auto;
        
        }
    
    .headline {
        
        width: 50%;
        height: auto;
        margin-top: 0%;
        margin-left: auto;
        margin-right: 20%;
        color: #ffffff;
        text-align: right;
        }
	
	marquee {
		
		width: 60%;
        height: auto;
        margin-left:20%;
        margin-right: 20%;
		font-size: 80px;
		
		color: #777777;
		
	}
    
	.paragrapher {
		 
		color: #ffffff;
        text-align: left;
		width: 60%;
        height: auto;
        margin-left:20%;
        margin-right: 20%;
		
		}
		
		.imprinter {
			
			color: #BBBBBB;
			width: 80%; 
			height: auto; 
			margin-left: auto; 
			margin-right: 20%; 
			text-align: right; 
		}	
		
	

	.flicker {

	 width: 60%;
        height: auto;
        margin-left:20%;
        margin-right: 20%;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
		cursor: url('img/cursoractive.png') 16 16, auto;
	
	}
	
	.imager {
		
	
	
	 width: 60%;
        height: auto;
        margin-left:20%;
        margin-right: 20%;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	
	}
	
  
    .imagertable {
        width: 100% ;
        height: auto;
        max-width: 100% ;
        
        display: block ;
    }
    
  	table {
		width: 100%;
		border: none;
		margin: 0px;
		padding: 0px;
	
		
	}
    	td {
		
		width: 50%;
	}
	

  
    
    /* Mobile-specific overrides */
    @media screen and (max-width: 768px) {
               .imagertable, 
        .imagertable video {
            width: 100vw !important;
            max-width: 100vw !important;
            height: auto !important;
            max-height: 56.25vw !important; /* 16:9 aspect ratio */
        }
        
        .video-wrapper {
            width: 100vw !important;
            max-width: 100vw !important;
        }
    }
	
	.imager2 {
		
	
/*	cursor: pointer;*/
	 width: 60%;
        height: auto;
        margin-left:20%;
        margin-right: 20%;
        
	
	}
	
    .yt-embed {
        aspect-ratio: 16 / 9;
        width: 60%;
        height: auto;
        margin-left:20%;
        margin-right: 20%;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
		cursor: url('img/cursoractive.png') 16 16, auto!important;
    }
    
	
	 .container {
          width: 60%;
        height: auto;
        margin-left:20%;
        margin-right: 20%;  
		 display: flex;
            flex-wrap: wrap;
            gap: 20px;
            max-width: 60%;
            margin: 0 auto;
        }
        
        .box {
            flex: 1 1 calc(20% - 20px);
            min-width: 100px;
            background-color: #222222;
			padding: 20px;
            border-radius: 8px;
/*            box-shadow: 0 2px 5px rgba(0,0,0,0.1);*/
        }
        
        .box h2 {
            color: #ffcc00;
            margin-bottom: 10px;
        }
        
        .box p {
            color: #ffffff;
            line-height: 1.5;
        }
	


	
	
    summary {
  list-style-type: '> ';
		
		cursor: url('img/cursoractive.png') 16 16, auto!important;
}
	
	details[open] > summary {
  list-style-type: '< ';
		cursor: url('img/cursoractive.png') 16 16, auto!important;
}
	
	
	/* The sidepanel menu */
.sidepanel {
  
	height: auto; /* Specify a height */
  width: 0; /* 0 width - change this with JavaScript */
  position: fixed; /* Stay in place */
  z-index: 1; /* Stay on top */
	top: 0;
  left: 0;
	
  background-color: #ffcc00; /* Black*/
  overflow-x: hidden; /* Disable horizontal scroll */
	overflow-y: hidden; /* Hide vertical scrollbar */
	overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
	padding-bottom: 30px;
  padding-top: 20px; /* Place content 60px from the top */
  transition: 0.5s; /* 0.5 second transition effect to slide in the sidepanel */
	 box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.6), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	border-bottom-right-radius: 20px;
/*	 border-color: #333333; border-style: solid; border-width: 1px;*/
	opacity: 1;
	cursor: url('img/cursoractive.png') 16 16, auto;
}

/* The sidepanel links */
.sidepanel a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #000000;
  display: block;
  transition: 0.3s;
	cursor: url('img/cursoractive.png') 16 16, auto;
}

/* When you mouse over the navigation links, change their color */
.sidepanel a:hover {
  color: #333333;
	cursor: url('img/cursoractive.png') 16 16, auto;
}

/* Position and style the close button (top right corner) */
.sidepanel .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
	cursor: url('img/cursoractive.png') 16 16, auto;
}

/* Style the button that is used to open the sidepanel */
.openbtn {
  font-size: 40px;
 
  background-color: #000;
  color: #ffcc00;
  padding: 10px 15px;
  border: none;
	 position: fixed; /* Stay in place */
	 top: 0;
  left: 0px;
		border-bottom-right-radius: 20px;
/*	 border-color: #333333; border-style: solid; border-width: 1px;*/
	opacity: 1;
	cursor: url('img/cursoractive.png') 16 16, auto;
}

.openbtn:hover {
  background-color: #000;
	cursor: url('img/cursoractive.png') 16 16, auto;
}
		
		

	.inspoma {
		
		width: 15%; 
		height: auto;
	}
	
/*	:target::before {
  content: "<h2>";
  display: block;
  height: 80px; /* Höhe des Hamburger-Buttons */
/*  margin-top: -80px; /* Negativer Abstand gleicht Höhe aus */
 /* visibility: hidden;
  pointer-events: none;
}*/

  

#upBtn {
 
  position: fixed; /* Fixed/sticky position */
  bottom: 0px; /* Place the button at the bottom of the page */
  right: 0px; /* Place the button 30px from the right */
  z-index: 99; /* Make sure it does not overlap */
  border: none; /* Remove borders */
  outline: none; /* Remove outline */
  background-color: #ffcc00; /* Set a background color */
  color: #000000; /* Text color */

  padding: 15px; /* Some padding */
  border-radius: 10px; /* Rounded corners */
	 border-bottom-left-radius: 0px; 
	border-bottom-right-radius: 0px; 
	border-top-right-radius: 0px; 
	
  font-size: 30px; /* Increase font size */
	font-weight: bold; 
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.6), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	cursor: url('img/cursoractive.png') 16 16, auto;
}

#upBtn:hover {
 
	background-color: #222222; /* Set a background color */
	color: #ffcc00;
	cursor: url('img/cursoractive.png') 16 16, auto;
/*
	border-color: #ffcc00;
	border: solid;
	border-width: 1px;
*/
}













        
	 @media (max-width: 420px) {
            .box {
                flex: 1 1 calc(50% - 20px);
            }
		 

	
        }
        
        @media (max-width: 500px) {
            .box {
                flex: 1 1 100%;
            }
			
				.imagertable {

	 width: 100%;
     height: auto;
       
     
	
	}
	
        }
	
        
    
        
        @media screen
    and (max-device-width : 420px)
     
		{
        * {
          font-family: pickle;
          text-decoration: none;
			font-size: 60px;
		 }
      
			#boxmenu {
				
				
				visibility: hidden;
				height: 0px;
			}
			
			 body {
    
    background-color: #000000;
    margin-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
	
	scroll-behavior: smooth;
		font-size: clamp(1em, 2.8vw, 1.75em);
	}
			
			
				#upBtn {
 
  position: fixed; /* Fixed/sticky position */
  bottom: 0px; /* Place the button at the bottom of the page */
  right: 0px; /* Place the button 30px from the right */
  z-index: 99; /* Make sure it does not overlap */
  border: none; /* Remove borders */
  outline: none; /* Remove outline */
  background-color: #ffcc00; /* Set a background color */
  color: #000000; /* Text color */
  cursor: pointer; /* Add a mouse pointer on hover */
  padding: 15px; /* Some padding */
  border-radius: 10px; /* Rounded corners */
	 border-bottom-left-radius: 0px; 
	border-bottom-right-radius: 0px; 
	border-top-right-radius: 0px; 
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.6), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  font-size: 60px; /* Increase font size */
	font-weight: bold;
}

#upBtn:hover {
 
	 background-color: #ffcc00; /* Set a background color */
  color: #000000; /* Text color */
}

			
			
	
			
			
			
			.starter {
		font-size: clamp(1.5em, 2.8vw, 1.75em);
		color: #ffcc00;
		width: 90%;
        height: auto;
        margin-left: 5%;
        margin-right: auto;
        
        text-align: left;
	}
			
        .logo
        {
            
          width: 70%;
          height: auto;
          margin-top: 0%;
          margin-left: 15%;
          margin-right:15%;
            
            }
			
			.box {
                flex: 1 1 calc(50% - 20px);
				 padding-left: 5%;
			 padding-right: 5%;
            }
			
         .container {
          width: 90%;
			
        height: auto;
        margin-left:5%;
        margin-right: 5%;  
		 display: flex;
            flex-wrap: wrap;
            gap: 20px;
            max-width: 90%;
            margin: 0 auto;
        }
			
			.flicker {

	 width: 90%;
        height: auto;
        margin-left: 5%;
        margin-right: 5%;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	
	}
			
			.imager {
				
				width: 90%;
        height: auto;
        margin-left:5%;
        margin-right: 5%;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
				
			}
			
			.imager2 {
				
				width: 90%;
        height: auto;
        margin-left:5%;
        margin-right: 5%;
        
				
			}
	
 	marquee {
		
		width: 90%;
        height: auto;
        margin-left:5%;
        margin-right: 5%;
		font-size: 100px;
		
		color: #777777;
		
	}
	
			.paragrapher {
		 
		color: #ffffff;
        text-align: left;
		 width: 90%;
        height: auto;
        margin-left:5%;
        margin-right: 5%;
		
		
		
	}

			
        .yt-embed {
            aspect-ratio: 16 / 9;
            
            width: 90%;
            height: auto;
            margin-left: 5%;
            margin-right: 5%;
            box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
        }
        
        .headline {
            
            width: 90%;
            height: auto;
            margin-top: 0%;
            margin-left: auto;
            margin-right: 5%;
            color: #ffffff;
            text-align: right;
            }
			
			ul {
  list-style-image: url("/favicon-32x32.png")
}

        
			.imprinter {
			
			color: #BBBBBB;
			width: 80%; 
			height: auto; 
			margin-left: auto; 
			margin-right: 5%; 
			text-align: right; 
		}	
				 	/* The sidepanel menu */
.sidepanel {
  height: auto; /* Specify a height */
  width: 0; /* 0 width - change this with JavaScript */
  position: fixed; /* Stay in place */
  z-index: 1; /* Stay on top */
  top: 0;
  left: 0;
  background-color: #ffcc00; /* Black*/
  overflow-x: hidden; /* Disable horizontal scroll */
  padding-top: 100px; /* Place content 60px from the top */
  transition: 0.5s; /* 0.5 second transition effect to slide in the sidepanel */
	 box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.6), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

/* The sidepanel links */
.sidepanel a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 80px;
  color: #000000;
  display: block;
  transition: 0.3s;
	 overflow-x: hidden; /* Disable horizontal scroll */
	overflow-y: hidden; /* Hide vertical scrollbar */
	overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
	border-bottom-right-radius: 20px;
/*	 border-color: #333333; border-style: solid; border-width: 1px;*/
	opacity: 1;
}

/* When you mouse over the navigation links, change their color */
.sidepanel a:hover {
  color: #ffffff;
}

/* Position and style the close button (top right corner) */
.sidepanel .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 80px;
  margin-left: 50px;
}

/* Style the button that is used to open the sidepanel */
.openbtn {
   font-size: 80px;
  cursor: pointer;
  background-color: #000;
  color: #ffcc00;
  padding: 10px 15px;
  border: none;
		 position: fixed; /* Stay in place */
	 top: 0;
  left: 0px;
			border-bottom-right-radius: 20px;
/*	 border-color: #333333; border-style: solid; border-width: 1px;*/
	opacity: 1;
}

.openbtn:hover {
  background-color: #000;
}
			
			
		 }
         
		.inspoma {
		
		width: 30%; 
		height: auto;
	}
	
	 :target::before {
		   content: "<h2>";
  display: block;
/*
    height: 120px; 
    margin-top: -120px;
*/
		 
		  width: 120px; /* Größerer Abstand für mobile */
    margin-left: -120px;
		   visibility: hidden;
  pointer-events: none;
  }
  


/*
.paragrapher1 {		 
		color: #ffffff;
        text-align: left;
		 width: 60%;
        height: auto;
        margin-left:20%;
        margin-right: 20%;
}
.paragrapher1 {		 
		color: #ffffff;
        text-align: left;
		 width: 90%;
        height: auto;
        margin-left:5%;
        margin-right: 5%;
}
*/