@charset "UTF-8";
/* CSS Document */
* { margin: 0; padding: 0; list-style: none; }
html { margin: 0; cursor: url('pointer.png'), auto; scroll-behavior: smooth; }
body { font-family: 'ricm', sans-serif; min-height: 1300px; width: 100%; font-size: 45px;  color: whitesmoke; letter-spacing: 0.11em; background: url('backweb.jpg') no-repeat top, url('backwebrepeat.jpg') repeat-y; background-size: contain, contain; background-repeat: no-repeat, repeat-y; background-position: top, top;background-color: black; text-shadow: black 0px 0px 4px;
-webkit-text-stroke: 2px black;
text-stroke: 2px 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-radius: 25px; border: 2px solid black;}
.topper {margin-top: -120px;position: absolute;}
.bolder {  margin: 40px auto 0 auto; font-size:200%; border-bottom:5px solid orange; display: flex; padding: 20px 0; margin-bottom:0px; justify-content: center; color:red; align-items: center; -webkit-text-stroke: 2px yellow; /* Für Webkit-Browser */ text-stroke: 2px yellow; /* Standard */ line-height: 1; }
.around {-webkit-font-smoothing: subpixel-antialiased; margin: 80px auto 0  auto; font-weight: 200; 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; border-radius: 50%; 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 { -webkit-text-stroke: 1px black; display: flex; flex-wrap: wrap; align-items: stretch; border: 4px solid black; text-align: center; overflow: hidden; background-color: rgba(93, 128, 117, 0.95); box-sizing: border-box; width: 100%; background-size: cover; background-repeat: no-repeat; background-position: top; animation: fadeIn 1s ease-out forwards; border-radius: 10px; margin-bottom:80px;}
.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: 4px solid black; border-top: none; border-left: none; border-right: none; }
.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(93, 128, 117, 0.95); order: 1; box-sizing: border-box; width: 50%; border: 4px solid black; border-top: none; border-left: none; border-bottom: none; padding: 2%; }
.calendarrechts { background-color: rgba(93, 128, 117, 0.95); order: 2; box-sizing: border-box; width: 50%; padding: 2%; }
.calendarbeide { background-color: rgba(93, 128, 117, 0.95); box-sizing: border-box; width: 100%; clear: both; padding: 2%; border: 4px solid black; border-left: none; border-right: none; border-bottom: none; order: 3; }
@font-face { font-family: 'ricm'; font-weight: 100 1000; src: local('ricm'), url('https://fuckleberry.com/font/ricm.ttf') format('truetype'); }
@font-face { font-family: 'woodpick'; font-weight: 100 1000; src: local('woodpick'), url('https://fuckleberry.com/font/woodpick.otf') format('opentype'); }
@font-face { font-family: 'oswald'; font-weight: 100 1000; src: local('oswald'), url('https://fuckleberry.com/font/oswald.ttf') format('truetype'); }
@font-face { font-family: 'sacramento'; font-weight: 100 1000; src: local('sacramento'), url('https://fuckleberry.com/font/sacramento.ttf') format('truetype'); }
@font-face { font-family: 'indi'; font-weight: 100 1000; src: local('sacramento'), url('https://fuckleberry.com/font/indi.ttf') format('truetype'); }
@font-face { font-family: 'zeyda'; font-weight: 100 1000; src: local('zeyda'), url('https://fuckleberry.com/font/zeyda.ttf') format('truetype'); }
@font-face { font-family: 'shadow'; font-weight: 100 1000; src: local('shadow'), url('https://fuckleberry.com/font/shadow.ttf') format('truetype'); }
.text { -webkit-text-stroke: 1px white; width: 96%; padding: 2%; font-family: 'ricm'; margin: 0px auto 100px auto; line-height: 120%; border-radius: 20px; background-color: rgba(0, 0, 0, 0); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); box-shadow: 0px 0px 15px 5px rgba(0, 0, 0, 0.6); }
.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: rgba(116, 116, 116, 0.51)}
.calendar li { overflow: auto; margin: 0 0 0px 0; padding: 20px 0px 20px 0px; border-radius: 4px;  }
.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-text-stroke: 3px black; }
@-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 (min-width: 600px) {
  body {
	min-width: 600px;
  }
}
@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('fuckleberrylogo.png') no-repeat top; width:100%; height:700px; display: block; margin:00px auto 40px auto; background-size: contain;}



.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; width: 95%;}
.menu { width: 100%; background-color: #254; 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);}
.menu a {  padding: 10px 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; border-radius:20px;
	 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;
 }
.reservationForm {
   display: flex;
   flex-direction: column;
   align-items: center;
   margin: 10px auto;
 
 }
 textarea {line-height:100%; overflow: hidden; min-height:130px; width:77%; text-align: left; border-radius: 10px;padding:20px 20px;font-size:120%; color:black; display: block; margin: auto auto 50px auto;}
 input {height:130px; width:77%; text-align: left; border-radius: 10px;padding:0px 20px;font-size:120%; color:black; display: block; margin: auto auto 50px auto; background: white;}
button::placeholder {
		  
		  outline: none !important; text-shadow: none;
			
		}
 button {display:block; height:100px; Width:30%; text-align: center;border-radius: 10px; margin:0 auto auto auto; font-size: 80%;
	 
	 -webkit-text-stroke: 0 !important;
	 text-stroke: 0 !important;
	 
 }
button:hover {cursor:pointer;
   filter: brightness(50%);
 }
 /* FORM INPUT */
 form { padding: 50px 20px 20px 20px; max-width: 100%;}
 label { display: block; margin: 25px 0 0 0; font-weight: 900; }
select {
   width: 80%;
   padding: 20px;
   font-size: 35px;
   text-align: center;
   border-radius: 10px;
   margin-bottom: 25px;
   appearance: none; /* optional für einheitlicheres Design */
 }
input::placeholder {
   color: grey;
   opacity: 1;
   outline: none !important; text-shadow: none;
	 -webkit-text-stroke: 0 !important;
	 text-decoration: none;
 }
 
 

 
 @media (max-width: 800px) {
	 input, button, select {
	
		 width: 120%; ;
	
	 }
	 
	 
	 
 }
 
 
 
 
 
 
 
 
#passwortEingabe button {
	 position: relative;
	 top: -12px;
 }




.coder {font-size:80%;}
.coder td {background:rgba(43, 27, 6, 0.865);; padding:20px;;}
.coder th {padding:20px;font-size:140%;;}
.coder tbody tr:first-child th {
	padding-top: 0;
}
.coder tbody tr th {
	padding-top: 60px;
}
.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: pointer;
	 }
	 
	 .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: pointer;
		 z-index: 1001;
	 }
	 .arrow {
		 position: absolute;
		 top: 50%;
		 font-size: 40px;
		 color: white;
		 cursor: pointer;
		 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: 50px;
		height: 50px;
		background-size: cover;
		z-index: 9999;
		pointer-events: none;
	}