:root {
  --jpRot: rgb(214, 22, 16);
  --jpDarkGray: rgb(100, 100, 100);
  --jpGray190: rgb(190, 190, 190);
  --jpGray220: rgb(220, 220, 220);
  --sideMargin: 80px;
  --boxSpace: 40px;
  --contentAreaWidth: 1200px;
  --borderCornerRadius: 10px;
}


.inverted{filter: invert()}

html.inverted img,
html.inverted video,
html.inverted picture,
html.inverted iframe,
html.inverted #layoverOuter {
  filter: invert(1);
}

html.inverted input[type="text"]{
	border: black 1px solid /*black, weil es ja invertiert wird und dann als weiß erscheint.*/
}

/*
html{
	filter: invert()
}
img{filter: invert()}
*/
body{
	background-color: #F1F1F1;

}
* {
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    font-weight: 300;
    line-height: 24px;
}
strong, b{font-weight: 400;}
h2{font-size: 22px}

body{margin: 0px; padding: 0px;}

ul{margin-top: 10px; padding-top: 0px;}

#outerFrame{}

#headerArea{
	
}

#showMobileNav{display:none}
#showMobileNav img{width: 30px; height: auto; cursor: pointer;}
/*layover*/
.popupImage{max-height: calc(100vH - 60px); width: auto}
.popupImage{max-width: calc(100vW - 60px); height: auto}
#contentHeader{
	height:279px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	background-color: white;
}
#logo{padding-left: 20px}
#logo img{height: 200px; width: auto}
#headerImage{
	text-align: right;
}
#headerImage img{height: 280px; width: auto}
#headerSlogan{text-align: right; font-size: 40px; line-height:40px; font-style: italic; font-weight:lighter; color: #CCCCCC}
#headerSlogan img{height: 120px; width: auto}
#headerSloganSmall{font-size: 16px; margin-top: 10px}



td{vertical-align: top;}



#theContent{
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 40px;
	margin: 0px var(--sideMargin) 0px var(--sideMargin);
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
}

#contentInnerFrame{
	display: flex;
	align-items: flex-start;
	gap: 20px;
	background-color: #FFFFFF;
	padding:20px;
	padding-top: 50px;
	box-shadow: 0px 0px 14px rgba(0, 0, 0, 0.2);
	border: var(--jpRot) 1px solid;
	border-bottom: 0px;
	border-top: 0px;
	border-radius: 0px 0px 0px 0px;
}

#contentArea{
	width:100%;
}
#contentArea,
#footerContent{hyphens: auto;}

.largeContent{width: 100%}

h1, .contentTitle{font-size: 26px; }
.contentText{
	hyphens: auto!important;
	overflow-wrap: break-word;
	/*
	columns: 2;
	column-gap: 100px;
	*/
}
.largeContent .blocktitle{margin-bottom: 40px}

#sideContentArea {
	min-width:250px;
}
#sideContentArea{margin-bottom:40px}
.sideContent{margin-bottom: 20px; max-width: 400px}
.innerPadding{padding: 20px}
.box{

	/*box-shadow: rgba(0, 0, 0, 0.5) 4px 6px 8px 0px; */
	box-shadow: 0px 10px 14px rgba(0, 0, 0, 0.2);
	border: var(--jpGray190) 1px solid;
	border-radius: 10px;
	/*padding: 20px;*/
	background-color: #FFFFFF;
}
.boxSpaceTop{margin-top: var(--boxSpace)}
.blockTitle{
	color: #FFFFFF; background-color: var(--jpRot); margin: -20px; padding: 10px 10px 10px 25px; border-radius: 10px 10px 0px 0px; position: relative; font-weight: 300; font-size: 20px
}
.containerFrame .blockTitle{
	color: #FFFFFF; background-color: var(--jpRot); margin: -11px; padding: 10px 10px 10px 25px; border-radius: 10px 10px 0px 0px; position: relative; font-weight: 300; font-size: 20px; width: calc(100% - 12px)
}


.blockContent{margin-top: 40px;}

/*#footerOuter{display: none;} */
#footerOuter{width: 100%; min-height: 220px; background-color: var(--jpRot);}
#footerContent{color: #FFFFFF; padding: 10px; display: flex; justify-content: space-around;}
#footerContent div{max-width: 300px}
#footerContent h3{font-weight: 400; font-size: 20px; padding-bottom:0px; margin-bottom: 0px;}
#footerContent a{text-decoration: none; color: #FFFFFF;}

/*Module*/
#buttonsMitgliedstatus{display: flex; gap:40px; justify-content: space-around; margin-bottom: 40px; margin-top: 40px;}
.buttonMitgliedsstatus{max-width: 200px; min-width: 120px; height: 120px; border:var(--jpRot) 1px solid; border-radius: 5px; display: flex; align-items: center; text-align: center;}
.buttonMitgliedsstatus div{display: inline-block; margin: 0px auto;}
.hgRot{background-color: var(--jpRot);}
.schriftWeiss{color: white}

#kursliste{display:flex; gap: 40px 80px; flex-wrap: wrap; justify-content: space-around;}
.kursLine{padding: 20px; border: var(--jpRot) 1px solid; border-radius: 5px; width: 260px}
.kursTitel{font-weight: 400; padding-bottom: 20px;}
.kursPreis{text-align: right; padding-top: 20px;}

.formFlexLine{display: flex; gap: 40px; margin-top:40px; flex-wrap: wrap}
.placeholderForInput{position: absolute; margin-top: 10px; margin-left: 10px}
.inputWithPlaceholder{height:40px; width:300px; border: ##000000 1px solid; text-indent: 10px;}

.titelAdressenBereich{font-weight: 400; margin-top: 40px; margin-bottom:20px}

.kontaktFunktion{margin-top: 40px; font-weight:400; padding-left:5px}
.kontaktArea{display: flex; flex-wrap: wrap; gap: 10px 40px}
.kontaktEintrag{padding:20px; border: var(--jpRot) 1px solid; border-radius: 10px; min-width: 300px}
.kontaktEintrag a{color: black; text-decoration: none;}
.kontaktEintrag:hover {background-color: var(--jpRot); color: #FFFFFF}
.kontaktEintrag:hover a,
.kontaktEintrag:hover a:visited,
.kontaktEintrag:hover a:active {
  color: #FFFFFF;
}
.newsArea{max-width: var(--contentAreaWidth); margin: 20px auto 20px auto}
.newsImageContainer{display: flex; gap: 20px 20px; flex-wrap: wrap; margin-bottom: 40px;}
.newsImageContainer img:hover{cursor: pointer;}
.featuredContent{display: flex; gap: 20px 40px; flex-wrap: wrap}
.featuredItem{width: calc(100% - 50px); padding: 20px; border: var(--jpGray190) 1px solid; border-radius: 10px;}
.featuredItem:first-child{margin-top: 40px;}


	.kursliste{margin-left:0px; margin-top:3px; display: flex; flex-wrap: wrap; gap: 40px}
	.kursBox{max-width: 350px; border: var(--jpRot) 1px solid; border-radius: 10px; padding: 10px}
	.kursTitel{margin-right:10px; max-width:500px;}
	.kursDatum{margin-right:10px; max-width:300px; padding-top:6px}
	.kursTagUhrzeit{margin-right:10px; max-width:500px}
	.kursTeilnehmer{margin-right:10px; max-width:500px}
	.kursPreis{margin-right:10px}
	.kursDetail{ margin-top:6px}
	.newLine{clear:both}

#sideContentArea div.subSideNavLink{margin-bottom: 10px; padding: 10px}
#sideContentArea div.subSideNavLink:hover{background-color: var(--jpRot);}
#sideContentArea div.subSideNavLink:hover a{color: #FFFFFF}
#sideContentArea div.subSideNavLink a{text-decoration: none; color: #000000}
.subSideNavLinkActive{background-color: var(--jpRot); border-radius: 10px}
.subSideNavLinkActive a{color: #FFFFFF!important}

	/*mobileNav*/
	#mobileNavFrame {
		width: 100%;
		position: absolute;
		left: -100%;
		top: 0;
		z-index: 9999;
		min-height: 100%;
	}

	#mobileNavFrame .divNavSub,
	#mobileNavFrame .divNavItem {
		background-color: #FFFFFF;
		font-size: 24px
	}

	#mobileNavWhiteBG {
		position: absolute;
		z-index: -1;
		background-color: #FFFFFF;
		min-height: 100%;
		width: 99%
	}

	#hideMobileNav {
		background-color: #F1F1F1;
		border-bottom: #666666 1px solid;
		padding: 20px 10px 20px 10px;
		font-size: 24px;
		font-weight: 600
	}

	#hideMobileNav .divCloseMenu {
		width: 33px;
		float: right;
		font-weight: 600;
		border-radius: 20px;
		padding-left: 16px;
		background-color: var(--jpRot);
		color: #FFFFFF
	}

	#mobileNavFrame .divNavMain {
		position: absolute;
		width: 99%
	}

	#mobileNavFrame .divNavItem {
		padding: 20px 10px 20px 10px;
		border-bottom: #CCCCCC 1px solid
	}

	#mobileNavFrame .divNavItem a {
		text-decoration: none;
		color: #000000
	}

	#mobileNavFrame .divNavItemActive {
		background-color: #F1F1F1
	}

	#mobileNavFrame .divOpenNext {
		width: 30px;
		float: right;
		font-weight: 600;
		border-radius: 20px;
		padding-left: 20px;
		background-color: var(--jpRot);
		color: #FFFFFF
	}

	#mobileNavFrame .divOpenPrevious {
		width: 30px;
		float: left;
		font-weight: 600;
		border-radius: 20px;
		padding-left: 20px;
		margin-right: 20px;
		background-color: var(--jpRot);
		color: #FFFFFF
	}

	#mobileNavFrame .divNavSub {
		background-color: #FFFFFF;
		position: absolute;
		opacity: 100;
		display: block;
		left: -200%;
		width: 99%
	}

	#mobileNavFrame .divNavSub .divNavItem {}
/* ende MobileNav */

.containerFrame{padding: 10px; border: var(--jpGray190) 1px solid; margin-bottom: 20px; border-radius: var(--borderCornerRadius);}
.containerFrame .newsImageContainer{margin-top: 40px; text-align: center;}

/* trainingszeiten */
.tzTitle{font-weight:400;}
.tzLine{display: flex; flex-wrap: wrap; gap: 10px 20px}
.tzLeitung{flex-basis: 100%; display: flex; gap: 20px}
.trainingszeitenInnner{margin-bottom: 40px; padding: 20px}
.tzLeitungTitle, .tzWochentag{width: 120px;}
.tzZeit{width: 180px}


@media screen and (max-width:1001px) {
	/*body, html{overflow-y:hidden}*/
	h1{line-height: 28px}
	.box{border-left: none; border-right: none;}
	#menuArea{justify-content:end!important; padding: 10px 40px 10px 40px!important; border-bottom: 0px!important}
	#showMobileNav {display:block}
	.blockTitle{border-radius: 0px}
	#contentHeader{height: unset; padding: 10px 0px 0px 0px;}
	#logo img{max-width: 90px; height: auto}
	#headerSlogan{position: absolute; left: 140px}
	#headerSlogan img{height: 45px;}
	/*#headerImage{display: none}*/
	#headerImage img{width: 140px; height:auto}
	#menuParentLine{display:none!important}
	#menuChildOuter{display: none!important;}
	.menuChildsOfParent{display: none}

	#theContent{flex-wrap: wrap; margin:0px; margin-top: 0px;} /* max-width: calc(100vW - 40px) */
	#contentArea{margin-top: 0px;}
	#contentInnerFrame{display: block; padding: 0px;}

	.box{border-radius: 0px}

	.sideContent{max-width: 100%;}
	.kontaktEintrag{min-width: calc(100vW - 80px)}


	.kursliste{display: block!important}
	.kursBox{margin-bottom: 20px; max-width: 100%}
	.kursLine{width:calc(100vW - 80px); margin-bottom: 40px;}
	.kursTitel, .kursDatum{width: 100%}
	#sideContentArea{width: 100%}
	.newsImageContainer{display: block; text-align: center;}
	.newsImageContainer img{width: calc(100vW - 80px); max-width: 300px; margin-bottom: 20px;}
	.featuredItem{width: 100%; max-width: unset;}

	#footerContent{flex-wrap: wrap; padding-bottom: 40px;}
	#footerContent div{width:100%}
	.fc_2, .fc_3{border-bottom: #FFFFFF 2px solid; margin-bottom: 10px; padding-bottom: 20px;}
	.tzLine{gap: 10px; margin-bottom: 40px;}
	.tzOrt{flex-basis: 100%; text-align: right; padding-right:0px}
	.tzZeit{text-align:right}
	.tzLeitung{margin-top: 30px;}
	.tzLeitungTitle{width: auto}
}