/* termine: loader (optional, aber dein JS referenziert #loader) */
#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;box-shadow:0 0 15px 5px rgba(0,0,0,.6)}
@keyframes spin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}
li,ul {list-style: none;}
/* termine: kalender layout */
#calendar ul{list-style:none;margin:0;padding:0}
#calendar li{margin:0;padding:20px 0}

/* cards */
.calendar{container-type:inline-size;font-size:clamp(18px,5cqw,60px);
	max-inline-size:100%;hyphens:auto;
	word-break:break-word;
	
	
	 color:color(display-p3 0.991 0.961 0.877); line-height:105%;display:flex;flex-direction:column;justify-content:flex-end;text-align:center;overflow:hidden;box-sizing:border-box;width:100%;max-width:1000px;aspect-ratio:1000/1408;background-size:cover;  background-repeat:no-repeat;background-position:top;border-radius:10px;margin:0 auto 10px;border:4px solid #000; 	
text-shadow:
-1px 3px 5px #000,
 1px 3px 5px #000,
 0   6px 10px #000;
}

/* hintergrund je band (deine JS erzeugt calendarpicXX mit 2 buchstaben) */
.calendarpicSt,.calendarpicSo,.calendarpicfu,.calendarpicSM{display:flex;flex-direction:column;justify-content:flex-end;align-items:center;padding:2%;width:100%;height:100%;box-sizing:border-box;background-repeat:no-repeat;background-size:cover;background-position:top;text-transform:uppercase;border-top:none;border-left:none;border-right:none; }

.calendarpicSt{
	background-image:url("img/SMBPlakat.jpeg");
	border:4px solid #000;

}

.calendarpicSo{
	background-image:url("img/SomTeuerPlakat.jpeg");
	border:4px solid #000;

}

.calendarpicfu{
	background-image:url("img/FuckleberryPlakat.jpeg");
	
}

.calendarpicSM{
	background-image:url("img/S&MPlakat.jpeg");
	background-position:center 30%;
}


/* textblöcke in der card */
.calendartitle{order:1;box-sizing:border-box;font-weight:900;font-size:150%;line-height:110%}
.calendarlinks{order:2;box-sizing:border-box;font-weight:400}
.calendarrechts{order:3;box-sizing:border-box;font-weight:400}

/* container setup */
.calendarinner{width:100%;container-type:inline-size}

/* unterer block mit fluid abstand */
.calendarbeide{
order:4;
box-sizing:border-box;
width:90%;
margin:0 auto clamp(60px,10vw,150px);
font-weight:600
}

/* verhindert schmalziehen durch flex */
.calendarpicSt,
.calendarpicSo,
.calendarpicfu,
.calendarpicSM{
align-items:stretch
}


/* navigation unterhalb */
.calendarnavi{font-weight:400;margin:0 auto;text-align:center;
	
}
.calendarnavi a:hover {background:#191C20;}
.calendarnavi a
{border: solid 2px #eb3e00;border-radius:20px; padding: 5px 20px;}

/* bilder aus ATTACH klein halten */
.calendarnavi img{width:100px;height:auto;display:block;margin:10px auto 0}


@media(max-width:1000px){.calendar{}}


#calfilter input,#calfilter select{padding:10px 12px;border-radius:22px;border:1px solid #00000022;background:#191C20;color:#D1D9DF}
#calfilter input{flex:1;min-width:220px}
select#band, select#mth{ font-size:20px; border-radius:22px; height:50px;}

#calfilter{display:flex;justify-content:center;align-items:center;gap:10px ;margin:0 0 18px}