/*
v 23.12.01
*/

/*@import "_css-variablen";*/
$max-content-width: 1360px;
.IsResponsive {
	
	#FooterContent, #Inhalte, #ClickpathNaviRahmen, .header-area {
		max-width: $max-content-width;
		width: 100%;
		padding-left: 20px;
		padding-right: 20px;
	}

	.Inhalt {
		width: calc(100% - 560px);
		padding: 0 15px;
	}
}
@media only screen and (max-width: 1480px) {
	.IsResponsive {
		#Header #HeaderContent .logo a img {
  		padding-left: 2%;
		}
		#Header {
			padding: 20px;
		}
	}
}
@media only screen and (max-width: 1280px) {
	.IsResponsive {
		#FormularBuchungsnummer{
			max-width:unset;
		}
		#Rahmen {
			width:100%;
		}
		#Header #HeaderContent .logo a img {
  		padding-left: 2%;
		}
		#FooterContentText {
			width:100%;
			padding: 10px;
		}
	}
}

@media only screen and (max-width: 1049px) {
	.IsResponsive {
		#Header #HeaderContent .logo a img {
  		padding-left: 2%;
		}
		#Header {
			padding: 20px;
		}
		#Inhalte, #Footer{
			padding-right: 20px;
			padding-left: 20px;
		}
		.Inhalt {
			width: calc(100% - 280px);
			padding-left:0;
		}
		.Sidebar {
			float: left;
			margin-left: 0px;
		}
		#SidebarLeft {
			float: unset;
		}
		.Sidebar {
			#Printbutton a {
				width: 100%;
				text-align: center;
			}
		}

		.EventAppointmentMonth {
			> div:first-child[id^=EventAppointmentMonth], .EventAppointmentMonthDataAside {
				width: 100%;
				margin-bottom: 12px;
			}
		}
		.EventAppointmentMonth #EventAppointmentMonth .EventAppointmentMonthTable tbody tr td {
			width: auto;
			height: auto;
			span, button {
				display: inline-block;
				height: 32px;
				width: 32px;
			}
		}
		.EventAppointmentMonth div[id^=EventAppointmentMonthData] {
			border-left: 0px;
		}
		#FormularBuchungsnummer{
			max-width:unset;
		}
		#TextTop,
		.OVList > li{
			width:100%;
		}
		
		#Printform,
		.Printform{
			display:none;
		}
		.submitAnmeldung {
			float: right;
			margin-right: 20px
		}
		.Sidebar {
      margin: auto;
    }
	}

}
@media only screen and (max-width: 969px) {
	.IsResponsive {
		#Header #HeaderContent .logo a img {
  		padding-left: 2%;
		}
		.Inhalt {
			width: calc(100% - 0px);
		}
		#Header, #Inhalte, #Footer {
			width: 100%;
			max-width: 970px;
		}
		#Inhalte, #Footer {
			padding-right: 20px;
			padding-left: 20px;
		}
	}

}
@media only screen and (max-width: 799px) {
	.IsResponsive {
		.Inhalt {
    width: 100%;
  }
		#Header #HeaderContent .logo a img {
  		padding-left: 2%;
		}
		#Header{
			//height:45px;
		}
		
		#Inhalte{
			//display:flex;
			flex-direction:row;
			flex-wrap:wrap;
			justify-content:space-between;
			
		}
		
		.Inhalt{
			order: 1;
			width: 100%;
		}
		
		.Leftbar{
			order:1;
		}
		.Sidebar{
			order:2;
		}
		/*
		.Leftbar, .Inhalt, .Sidebar {
			padding-right: 0px;
			padding-left: 0px;
			float:none;
			margin:auto;
		}
		*/
		#NavigationTop{
			top: 20px;
  		right: 50px;
		}
		
		#Gesamt.ResponsiveButtonOpenUp{
			
			#Header.fixed{
				#Navigation #HauptMenuRahmen #HauptMenu > ul > li:hover{
					box-shadow:none;
				}
			}
			
			#HeaderContent{
				
					//position: absolute;
					top: 0;
					height: 50px;
					background: white;
					width: 100%;
					left: 0;
					padding-left: 20px;
				
				.logo{
					position:fixed;
					transition:unset;
				}
			}
			
			#Inhalte{
				opacity:0;
				transition:opacity 0.6s ease-in-out;
			}
			
			#NavigationTop{
				margin-right:20px;
			}
			#HauptMenuRahmen{
				overflow-y: scroll;
			}
		}
		
		#HeaderContent{
			
			.logo{
				img {
					//max-width: 140px;
					width: 100%;
				}
			}
		}
		
		#NavigationResponsiveSwitch {
			display: inline-block;
			position: absolute;
			top:9px;
			right: 20px;
			z-index:101;
		}
		
		#Navigation {
			margin-bottom: 0px;
			padding-top: 0px;
			margin-top: unset;
			height: unset;
		}
		
		#Navigation #HauptMenu ul li:first-child.mainMenue > a::before {
			display: none;
		} 

		#Navigation #HauptMenu {
			height: auto;
			border-bottom: 0px;
			margin-top: 0px;
			
			> ul{
				
				display:flex;
				flex-direction:column;
				
				li{
					margin-bottom:2px;
				}
				
				> li > a{
					
					&:hover,
					&.Self{
						color: #cd1536;
  					background: rgba(0, 0, 0, 0.05);
						
					}
					
					&.Self{
						&:hover{
							background: rgba(0, 0, 0, 0.025);
							color: #333;
						}
					}
					
				}
				
				&.topMenuElement{
					a{
						color: #1a1a1a;
					}
					
					.Printform{
						display:none;
					}
				}
				
				&:not(.topMenuElement) > li > a{
					font-weight:600;
				}
			}
		}
		
		#Gesamt > #Navigation #HauptMenu ul .mainMenue {
			float: none;
		}
		
		#Gesamt #Navigation #HauptMenu .MenueLevel2 {
			display: inline-block;
			position: relative;
			width: 100%;
			padding-left: 0;
			border:none;
			opacity:1;
			box-shadow:none;
			
			
			> li{
				
				> a{
					padding-left:40px;
					font-size:calc(var(--fs-1) - 4px);
				}
				
				&:last-of-type{
					margin-bottom:0;
				}
			}
		}
		
		.ResponsiveSwitch {
			text-indent: -99999px;
			height: 29px;
			width: 33px;
			cursor: pointer;
			background-color: #aaa;
			
			.ResponsiveButtonDown {
				position: absolute;
				left: 6px;
				top: 13px;
				height: 3px;
				width: 20px;
				background: #fff;
				display: block; 
				transition: all 0.3s ease 0s;
				&::after, &::before {
					content: "";
					position: absolute;
					left: 0;
					height:3px;
					width: 20px;
					background: #fff;
					display: block;
					transition: all 0.3s ease 0s;
				}
				&::after {
					top: 7px;
				}
				&::before {
					top: -7px;
				}
				&.ResponsiveButtonOpenUp {
					background-color: transparent;
					transform: rotate(45deg);
					&::before, &::after {
						top: 0px;
					}
					&::after {
						transform: rotate(-90deg);
						transition: all .3s cubic-bezier(.68,-0.55,.27,1.55) 0s;
					}
				}
			}
		}
		#HauptMenuRahmen {
			display: none;
			margin-bottom: 0px;
			margin-bottom: 0px;
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			z-index: 100;
			background: white;
		}
		#CalendarSmallCage table td, .calendar_cage table td {
			width: 110px;
		}
		.Inhalt {
			margin-bottom: 35px;
		}
		
		.logo{
			z-index: 10;
			position: relative;
		}
		
		#Footer #FooterContent #FooterContentText{
			flex-direction:column;
			
			#menu--footer,
			#powered-by{
				text-align: center;
				margin:auto;
				max-width:100%;
			}
			
			#powered-by{
				margin-top:20px;
			}
		}
		#FormularBuchungsnummer{
			max-width:unset;
		}
		#SidebarStartResponsive {
			display: block !important;
		}
		.SidebarResponsive d-none {
			display: block !important;
		}
		#HauptMenuRahmen {
			display: none;
		}
		#SidebarStartResponsive {
			display: block !important;
		}
		#SidebarFormularResponsive {
			display: block !important;
		}
		#SidebarStart {
			margin-left: 0;
		}
	}
}
@media only screen and (max-width: 479px) {
	.IsResponsive {
		#Gesamt {
			.TextInput, .EmailInput, .UrlInput, .NumberInput, .CurrencyInput, .TextareaInput, .SelectInput, .FileInput, #SucheEingabe, .customfile,
			.LabelTextInput, .LabelRadioGroup, .LabelTextarea, .LabelDateInput, .LabelDatetimeInput, .LabelTimeInput, .LabelSelect, .LabelFileUpload {
				width: 100%;
				float:none;
			}
			
			.teilnehmerabfrage > select{
				max-width: 95%;
			}
			
		}
		#cr {
  width: 100%;
}
		ul.footernavi {
  padding: 0;
}
		ul.footernavi li {
  float: left;
  list-style: none outside none;
  padding-left: 6px;
  text-align: left;
}
		#HauptMenuRahmen {
			display: none;
		}
		#SidebarStartResponsive {
			display: block !important;
		}
		
		.Navigation {
				width: 100%;
			}
		.f-col-wrapper {
			.f-col-3 {
				width: 100%;
			}
		}
		
		.Sidebar, .Leftbar{
			width:100%;
		}

		#FormularBuchungsnummer {
			padding-left: 0px;
			padding-right: 0px;
		
			#Buchungsnummer {
				#EingabeBN {
					width: 100% !important;
					float: none;
					margin-right: 0px;
					#Buchungsnr {
						width: 100% !important;
						max-width:unset;
						margin-bottom: 10px;
						margin-top: 6px;
						border-top-right-radius: 3px;
						border-bottom-right-radius: 3px;
					}
				}
				#WeiterBN {
					float: none;
					.submitBuchungsnummer {
						width: 100%;
						margin-left: 0px !important;
						border-top-left-radius: 3px !important;
						border-bottom-left-radius: 3px !important;
					}
				}
			}
		}
		
		.logo_2 {
			width: 30%;
		}
		.logo {
			width: 70%
		}
		#Footer {
      padding-right: 0;
      padding-left: 0;
    }
		#Header {
      padding: 10px;
    }
		#Inhalte {
			padding: 0 10px;
		}
		#Printbutton {
			margin-top: 23px;
			a {
				display: block;
				text-align: center;
			}
		}
		#NewsletterAbmeldung #abmelden #EMailFrageAbsage {
			padding: 8px 13px 13px;
		}
		#SidebarStartResponsive {
			display: block !important;
		}
		.SidebarResponsive d-none {
			display: block !important;
		}
		#HauptMenuRahmen {
			display: none;
		}
		#SidebarStartResponsive {
			display: block !important;
		}
		#SidebarFormularResponsive {
			display: block !important;
		}
		#SidebarStart {
			margin-left: 0;
		}
	}
}