@charset "UTF-8";
/* CSS Document */
* { margin: 0; padding: 0; list-style: none; }
html { margin: 0 auto; min-width: 600px; cursor: url('pointer.png'), auto; scroll-behavior: smooth; }
body { font-family: 'pr', sans-serif; min-height: 1300px; width: 100%; font-size: 45px; margin:auto; color: whitesmoke; letter-spacing: 0.11em; background: url('backwebrepeat.jpg') repeat-y top; background-size: contain; background-color: black;
}
.prompost {display:none !important}
.prompost, .prompost:has(*) {
	display: none !important;
	visibility: hidden !important;
	height: 0 !important;
	width: 0 !important;
	overflow: hidden !important;
}
.prompost {
	visibility: hidden !important;
	pointer-events: none !important;
	height: 0px !important;
	width: 0px !important;
	overflow: hidden !important;
	opacity: 0 !important;

	

}

a {cursor: url('pointer.png'), auto;}

.instagram-media {
	width: 100% !important;
	min-height: 1000px !important;
	max-width: none !important;
}

#countdown {background:turquoise; border: 2px solid black;}
.topper {margin-top: -120px;position: absolute;}
.bolder {  margin: 40px auto 0 auto; font-size:200%;  display: flex; padding: 20px 0; margin-bottom:0px; justify-content: center; color:rgba(255, 243, 223, 1); align-items: center;  line-height: 1; }
.around {-webkit-font-smoothing: subpixel-antialiased; margin: 80px auto 0  auto; font-weight: 900; text-decoration: none; word-break: break-word; text-align: left; line-height: 140%; max-width: 1200px; padding-top: 20px;  }
a { text-decoration: none; color: darkorange; }
#loader { border: 16px solid transparent; border-top: 16px solid red; border-right: 16px solid orange; border-bottom: 16px solid blue; border-left: 16px solid white;  width: 120px; height: 120px; animation: spin 2s ease infinite; margin: 200px auto 200px 50%; transform: translate(-50%, -50%); box-shadow: 0px 0px 15px 5px rgba(0, 0, 0, 0.6);}
#passwortEingabe {margin:auto; width: 96%; padding: 2%; text-align: center; }
@keyframes spin { 0%, 100% { transform: translate(-50%, -50%) rotate(0deg); } 100% { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes fadeIn { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } }
.calendar { display: flex; flex-wrap: wrap; align-items: stretch; text-align: center; 
	overflow: hidden; background-color: rgba(255, 243, 223, 1);border: 4px solid rgb(231, 203, 145);  box-sizing: border-box; width: 96%; 
	margin: auto auto 80px auto; background-size: cover; background-repeat: no-repeat; 
	background-position: top; animation: fadeIn 1s ease-out forwards; 	color:black;
			 }
	

	
	
	
	
.calendarpic { order: 0; padding: 2% 2% 2% 2%; font-size: 150%; box-sizing: border-box; width: 100%;
	background-image: url('.jpg'); background-size: cover; background-position: center 10%; 
	border-top: none; border-left: none; border-right: none;

background-color: rgba(255, 243, 223, 1);border: 4px solid rgb(231, 203, 145); 


 }
 
 h1, h2, h3, h4 {font-size:110%;}
.calendarattachment { order: 5; width: 96%; }
.calendartickets { order: 6; text-align: center; width: 96%; }
.calendar:hover { filter: brightness(0.95); cursor: url('pointer.png'), auto; }
.calendarlinks { background-color: rgba(255, 243, 223, 1); order: 1; box-sizing: border-box; width: 50%; border: 4px solid rgb(231, 203, 145); border-top: none; border-left: none; border-bottom: none; padding: 2%; }
.calendarrechts { background-color: rgba(255, 243, 223, 1); order: 2; box-sizing: border-box; width: 50%; padding: 2%; }
.calendarbeide { background-color: rgba(255, 243, 223, 1); box-sizing: border-box; width: 100%; clear: both; padding: 2%; border: 4px solid rgb(231, 203, 145); border-left: none; border-right: none; border-bottom: none; order: 3; }
@font-face { font-family: 'of'; font-weight: 100 1000; src: local('ricm'), url('https://somteuer.de/font/of.ttf') format('truetype'); }
@font-face { font-family: 'pr'; font-weight: 100 1000; src: local('pr'), url('https://somteuer.de/font/pr.ttf') format('truetype'); }
@font-face { font-family: 'woodpick'; font-weight: 100 1000; src: local('woodpick'), url('https://somteuer.de/font/woodpick.otf') format('opentype'); }
@font-face { font-family: 'oswald'; font-weight: 100 1000; src: local('oswald'), url('https://somteuer.de/font/oswald.ttf') format('truetype'); }
@font-face { font-family: 'sacramento'; font-weight: 100 1000; src: local('sacramento'), url('https://somteuer.de/font/sacramento.ttf') format('truetype'); }
@font-face { font-family: 'indi'; font-weight: 100 1000; src: local('sacramento'), url('https://somteuer.de/font/indi.ttf') format('truetype'); }
@font-face { font-family: 'zeyda'; font-weight: 100 1000; src: local('zeyda'), url('https://somteuer.de/font/zeyda.ttf') format('truetype'); }
@font-face { font-family: 'shadow'; font-weight: 100 1000; src: local('shadow'), url('https://somteuer.de/font/shadow.ttf') format('truetype'); }

.text { font-family:  zeyda;  width: 86%; padding: 4%;  margin: 0px auto 100px auto; color: rgb(31, 12, 0); line-height: 120%; 
		
		border: 20px double rgb(231, 203, 145);
		
		
		
		
		
	 background-color:rgba(255, 243, 223, 1);
 
 
 }
.blink { -webkit-animation: blink 10000ms ease-in-out infinite alternate;}
.impressum {margin:100px auto 0  auto; font-size:50%;width: 96%; padding: 2%; text-align: center; color: background-color:rgba(255, 243, 223, 1);}
.calendar li { overflow: auto; margin: 0 0 0px 0; padding: 20px 0px 20px 0px;  }
.calendar lo { overflow: auto; margin: 0 0 0px 0; padding: 20px 0; }
.number { margin: 0px auto auto auto; font-weight: 900; text-align: center; width: 95%; -webkit-animation: blink 20000ms ease-in-out infinite alternate; }
@-webkit-keyframes blink { 0% { color: green; } 20% { color: red; } 40% { color: yellow; } 60% { color: blue; } 70% { color: white; } 80% { color: black; } 90% { color: brown; } 100% { color: purple; } }
@media (max-width: 1000px) { body { font-size: 50px !important; } #text { color: white !important; line-height: 6vw; } }
.importantmessage {text-align: center; padding: 10px 0; color:darkorange;}
.logo {background: url('bgst.jpg') no-repeat top; width:60%; height:700px; display: block; margin:20px auto 40px auto; background-size: cover;	border: 20px double rgb(231, 203, 145);}
.banner.top img{height:140px; margin:60px auto;}

.banner {background: url('') no-repeat top; width:100%;text-align: center; font-size: 250%; color: rgb(231, 203, 145); -webkit-text-stroke: rgb(255, 255, 255) 4px;  display: block; margin:100px auto 0 auto;  background-size: contain; 	height:100px;
}

.bansdner.top {
	background: url('') no-repeat top;
	width: 100%;

height:100px !important;

	padding-top: 40px;
	background-size: contain;
}
.banner ul { list-style: none; display: flex; justify-content: space-around; margin: 0; padding: 0; display: flex; /* Flexbox aktiviert */
	justify-content: center; /* Zentriert den Inhalt horizontal */
	align-items: center; /* Zentriert den Inhalt vertikal */}
	.banner li {padding: 0 30px;}

.banner img {height:200px; width:auto;}
.banner img:hover {filter: brightness(1.1)}


.allebands {background: url('') no-repeat top; width:100%; height:160px; display: block; margin:40px auto; padding-top:40px; background-size: contain;}
.allebands ul { list-style: none; display: flex; justify-content: space-around; margin: 0; padding: 0; }
.allebands img {height:200px; width:auto;}
.allebands img:hover {filter: brightness(1.1)}


.mehr {margin:0px auto 80px auto; text-align: center; 
	
	
	font-family:  zeyda;  width: 86%; padding: 4%;  margin: 0px auto 100px auto; color: rgb(31, 12, 0); line-height: 120%; 
		
		
		
		border: 20px double rgb(231, 203, 145);
		
		
		
	 background-color:rgba(255, 243, 223, 1);
	
	
	
}
.menu {
  width: 100%;
  background-color: #422;
  background-image: url('grain.png');
  background-repeat: repeat;
  background-blend-mode: overlay;
  top: 0;
  z-index: 1000;
  position: fixed;
  box-shadow: 0 5px 5px rgba(0,0,0,0.1), 0 5px 5px rgba(0,0,0,0.1);
  border-bottom: 10px double rgb(231, 203, 145);
}

.menu a {  padding: 0px 30px; }
.menu ul { list-style: none; display: flex; justify-content: space-around; margin: 0; padding: 0; }
.menu a { display: block; text-align: center; text-decoration: none; color: white; transition: background-color 0.3s, color 0.3s; }
.menu a:hover { color: darkorange; }
@media (max-width: 600px) { .menu ul { flex-direction: column; } .menu a { padding: 10px 0; font-size: 1em; } }
#geheimeNachricht {
	 display: none;
	 border: 4px solid orange; 
	 padding: 10px 20px;
	 margin-top: 10px;animation: blinking-border 2s linear infinite;
 }
 @keyframes blinking-border {
	 0% { border-color: red; }
	 20% { border-color: orange; }
	 40% { border-color: yellow; }
	 60% { border-color: green; }
	 80% { border-color: blue; }
	 100% { border-color: purple; }
 }
 #fehlermeldung {
	 color: red;
	 display: none;
	 margin-top: 10px;
 }
input {height:50px; width: 350px;  font-size:120%;}
 button {height:50px; width: 150px;  font-size:60%;line-height:200%;}
#passwortEingabe button {
	 position: relative;
	 top: -12px;
 }









.gallery {
		 display: grid;
		 grid-template-columns: repeat(3, 1fr);
		 gap: 10px;
		 padding: 10px;
	 }
	 
	 .item {
		 width: 100%;
		 padding-top: 100%;
		 position: relative;
		 overflow: hidden;
	 }
	 
	 .item img, .item video {
		 position: absolute;
		 top: 50%;
		 left: 50%;
		 width: auto;
		 height: 100%;
		 transform: translate(-50%, -50%);
		 object-fit: cover;
		 cursor: url('pointer.png'), auto;
	 }
	 
	 .fullscreen {
		 display: none;
		 position: fixed;
		 top: 0;
		 left: 0;
		 width: 100%;
		 height: 100%;
		 background: rgba(0, 0, 0, 0.9);
		 z-index: 1000;
		 justify-content: center;
		 align-items: center;
		 overflow: auto;

			 touch-action: pan-y;
	 }
	 
	 .fullscreen .content {
		 position: relative;
		 max-width: 90%;
		 max-height: 90%;
		 margin: auto;
	 }
	 
	 
	 
	 
.time-control: {left: 401px; width: 256px !important;}
	 
	 
	 
	 .fullscreen img, .fullscreen video {
		 width: 100%;
		 height: auto;
	 }
	 
	 .close {
		 position: absolute;
		 top: 20px;
		 right: 30px;
		 color: #fff;
		 font-size: 40px;
		 cursor: url('pointer.png'), auto;
		 z-index: 1001;
	 }
	 .arrow {
		 position: absolute;
		 top: 50%;
		 font-size: 40px;
		 color: white;
		 cursor: url('pointer.png'), auto;
		 user-select: none;
		 z-index: 1001;
		 padding: 10px;
		 background: rgba(0, 0, 0, 0.5);
		 border-radius: 50%;
	 }
	 
	 .left-arrow {
		 left: 20px;
	 }
	 
	 .right-arrow {
		 right: 20px;
	 }
	 
	.grape {
		position: absolute;
		width: 150px;
		height: 150px;
		background-size: cover;
		z-index: 9999;
		pointer-events: none;
	}
	button {height:50px; width: 150px; border-radius: 10px; font-size:60%;}
	
	/* FORM INPUT */
	input {height:50px; width: 80%; padding:20px; border-radius: 10px; font-size:120%; margin-bottom:20px;}
	form { padding: 50px 20px 20px 20px; max-width: 100%;}
	label { display: block; margin: 25px 0 0 0; font-weight: 900; }
	select { font-weight: 900; width: 60%; margin-bottom: 25px;  font-size: 35px;  text-align: center; }