
:root {
	--braun:		#843C0C;
	--schwarz:	#000000;
	--weiss:		#ffffff;
	--blau:		#0018A8;
	--dunkelblau:	#334E69;
	--graublau:	#44546A;
	--orange01:	#ED7D31;
	--orange02:	#ED7D31;
	--orange03:	#ED7D31;

	--hellgrau:	#F2F2F2;
	--dunkelgrau:	#666666;
}


html {font-family: Arial, Helvetica, sans-serif; color: var(--dunkelblau); font-size: 16px;}
body {background-color:var(--weiss) !important;}
p {}
a {display:inline-block;color: var(--orange01);}
a:hover {color: var(--schwarz);}
h1 {}
h2 {}
h3 {}
h4 {}
img {display: block;}
.clear {clear:both;}
.clearleft {clear:left;}
.clearright {clear:right;}

.btn {padding-top: 10px !important;
    display: inline-block !important;
    padding-bottom: 10px !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
    text-decoration: none !important;
    border-radius: 4px !important;
    box-sizing: border-box !important;
    cursor: pointer;
    font-weight: 100;
    font-size: 16px;
    background-color: var(--orange01);
    border: 1px solid var(--orange01);
    color: var(--weiss) !important;}
.btn:hover {background-color: var(--braun);border: 1px solid var(--braun);}

.page { width:100%; max-width:1100px; margin-left: auto; margin-right: auto; }
.page > .wrapper {}

.artikelheadline {color:var(--blau);font-size: 22px;}
.absatzheadline {color:var(--blau);font-size: 22px;}
.ColorOrange {color:var(--orange01);}


/*header*/
.header {}
.header > .images {margin-top:35px; margin-bottom:20px;}
.header > .images > .left {float:left; padding-left: 35px; padding-right: 10px;}
.header > .images > .left img {margin-top: 10px;float:left; width: 100%;max-width: 100%;}
.header > .images > .right {float:right; padding-left: 10px; padding-right: 35px;}
.header > .images > .right img {float:right;width: 100%;max-width: 100%;}


.header .nav {padding-left: 35px; padding-right: 35px;}
.header .nav > .tbl {display: table;width: 100%;}
.header .nav > .tbl > .tr {display: table-row;}
.header .nav > .tbl > .tr > .td { display:table-cell;vertical-align: top;}

.header .nav > .tbl > .tr > .tdhome {width: 51px;text-align: -webkit-left;}
.header .nav .tdhome > .nav_home {background: url(/images/icons/home.png);width: 36px;height: 36px;display: block;background-position: top;background-size: cover;background-repeat: no-repeat;}
.header .nav .tdhome > .nav_home:hover {background-position: bottom;}

.header .nav > .tbl > .tr > .tdmenu {width: auto;text-align: -webkit-left;}

.header .nav > .tbl > .tr > .tdquick {width: 160px;text-align: -webkit-right;}
.header .nav > .tbl > .tr > .tdquick > .quick {margin-top: 6px;}
.header .nav .tdquick > .quick > a {width: 25px;height: 25px;display: block; float:left; margin-left: 15px; }
.header .nav .tdquick > .quick > a:first-child {margin-left:0px;}
.header .nav .tdquick > .quick > .nav_account {background: url(/images/icons/svg/user.svg);background-position: top;background-size: cover;background-repeat: no-repeat;width: 22px;}
.header .nav .tdquick > .quick > .nav_account:hover {background: url(/images/icons/svg/user_hover.svg);background-position: top;background-size: cover;background-repeat: no-repeat;}
.header .nav .tdquick > .quick > .nav_search {background: url(/images/icons/svg/search.svg);background-position: top;background-size: cover;background-repeat: no-repeat;}
.header .nav .tdquick > .quick > .nav_search:hover {background: url(/images/icons/svg/search_hover.svg);background-position: top;background-size: cover;background-repeat: no-repeat;}
.header .nav .tdquick > .quick > .nav_eng {background: url(/images/icons/svg/eng.svg); width:41px; background-position: top;background-size: cover;background-repeat: no-repeat;}
.header .nav .tdquick > .quick > .nav_eng:hover {background: url(/images/icons/svg/eng_hover.svg);background-position: top;background-size: cover;background-repeat: no-repeat;}
.header .nav .tdquick > .quick .nav_logout {background: url(/images/icons/svg/logout.svg);background-position: top;background-size: cover;background-repeat: no-repeat;border: 0px solid #ffffff;width: 25px;height: 25px;float: left;margin-left: 10px;cursor: pointer;}
.header .nav .tdquick > .quick .nav_logout:hover {background: url(/images/icons/svg/logout_hover.svg);background-position: top;background-size: cover;background-repeat: no-repeat;}

.header .nav > .tbl > .tr > .tdhamburger {display:none;width: 51px;text-align: -webkit-right;}
.header .nav .tdhamburger > .nav_menu {background: url(/images/icons/menu.png);width: 36px;height: 36px;display: block;background-position: top;background-size: cover;background-repeat: no-repeat;}
.header .nav .tdhamburger > .nav_menu:hover {background-position: bottom;}

.header .searchform {display:none;background-color: var(--braun);margin-top: 20px;}
.header .searchform .search {}
.header .searchform .search .suchfeld {margin-right: 45px;width: -webkit-fill-available;font-size: 15px;padding: 13px 10px 13px 10px;border: 1px solid var(--braun);}
.header .searchform .search .suchfeld:focus {
    outline: none !important;
    border: 1px solid var(--braun);
    box-shadow: 0 0 0px #719ECE;
  }
.header .searchform .search .sucheSubmit {width: 45px; height:45px; margin-top:-45px; float: right;}
/*header*/



/*menu*/
.tdmenu > .main-menu{text-align:left;display:inline-block;background-color:var(--weiss); }
.tdmenu > .main-menu a, .tdmenu > .main-menu a:hover{text-decoration:none; font-size: 18px;}
.tdmenu > .main-menu{list-style:none;padding:0;margin:0}
.tdmenu > .main-menu li{display:block;padding:0;position:relative;vertical-align:top}
.tdmenu > .main-menu > li{background-color:var(--weiss);}
.tdmenu > .main-menu > li > a{background-color:var(--weiss);color: var(--braun); display:block;padding:.75em 1.25em;}
.tdmenu > .main-menu ul.sub-menu{position:relative;padding:0}
.tdmenu > .main-menu ul.sub-menu li{display:block}
.tdmenu > .main-menu ul.sub-menu a{background-color:var(--hellgrau);color:var(--weiss);padding:.75em 1.25em;display:block}
.tdmenu > .main-menu > li:hover ul.sub-menu{}
.tdmenu > .main-menu li{display:inline-block;}
.tdmenu > .main-menu > li > a{display:block;}
.tdmenu > .main-menu > li > a:hover{background-color: var(--hellgrau) ;color:var(--braun);}

.tdmenu > .main-menu > li:hover ul.sub-menu, .main-menu > li:focus ul.sub-menu{visibility: visible;opacity:1}
.tdmenu > .main-menu > li.menu-item-has-children{/*padding-right:1.5em;*/padding-right:0.5em;overflow:hidden}
.tdmenu > .main-menu > li.menu-item-has-children a{padding:.75em .7em .7em 1.25em; font-weight: 100;}
.tdmenu > .main-menu > li.menu-item-has-children:hover a{background-color:var(--hellgrau);color:var(--braun)}

/*.tdmenu > .main-menu > li.menu-item-has-children:after{content:'';position:absolute;right:.5em;top:1.2em;width: 0;height: 0;border-style: solid;border-width: 6px 5px 0 5px;border-color: var(--braun) transparent transparent}*/

.tdmenu > .main-menu > li.menu-item-has-children:hover,
.tdmenu > .main-menu > li.menu-item-has-children:focus{overflow:visible;background-color: var(--hellgrau)}

.tdmenu > .main-menu ul.sub-menu{min-width: 16em;position:absolute;/*top:100%;*/top:0;z-index:900;padding-top:3em;}
.tdmenu > .main-menu ul.sub-menu li{opacity:0}

.tdmenu > .main-menu > li.menu-item-has-children:hover ul.sub-menu,
.tdmenu > .main-menu > li.menu-item-has-children:focus ul.sub-menu{top:100%;padding-top:0;}

.tdmenu > .main-menu > li.menu-item-has-children:hover ul.sub-menu li,
.tdmenu > .main-menu > li.menu-item-has-children:focus ul.sub-menu li{opacity:1}

.tdmenu > .main-menu ul.sub-menu li{display:block}
.tdmenu > .main-menu ul.sub-menu a{display:block}
.tdmenu > .main-menu ul.sub-menu a:hover{background-color:var(--dunkelgrau); color:var(--hellgrau);}
/*menu*/


/*formular*/
.formular {display: grid;grid-template-columns: 1fr 3fr;max-width: 700px;margin-left: auto;margin-right: auto;}
.formular > .angabe {text-align: right;margin-right: 10px;line-height: 13px;padding-top: 6px;font-weight: 700;min-height: 16px;}
.formular > .angabeleer {}
.formular > .angabe > span {font-weight: 600;display: inline-block;}
.formular > .angabe > span > span {display: inline-block;}
.formular .field-validation-error {color: var(--orange01);padding-bottom: 20px;display: block;}
.formular > .form {padding-right: 10px;min-height: 20px;}
.formular > .form > button {margin-top: 0px;}
.formular input, .formular select, .formular textarea {
    display: block;
    height: 27px;
    padding: 0 4px;
    font-size: 14px;
    line-height: 1.42857143;
    color: #555;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    outline: 0;
    margin-bottom: 10px;
    width: 95%;
}
.formular textarea {height: 150px;resize:none;}
.formular > .form > label {float: left;display: -webkit-box;margin-top: 5px;margin-right: 20px;}
.formular input[type=radio], .formular input[type=checkbox] {    height: auto;
    margin-top: 0px;
    width: 25px;
    border: 0px solid #ffffff;
    border-radius: 0px;
    border-radius: 0px;
    -webkit-box-shadow: inset 0 0px 0px rgba(0,0,0,.075);
    box-shadow: inset 0 0px 0px rgba(0,0,0,.075);
    -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;float: left;}

.formularAnmeldung {grid-template-columns: 1fr 2fr;padding-top: 20px;padding-bottom: 20px;}
.formularPasswortReset {grid-template-columns: 1fr 2fr;padding-top: 0px;padding-bottom: 20px;}
.formularRegistrierung {grid-template-columns: 1fr 2fr;padding-top: 20px;padding-bottom: 20px;}
.formularRegistrierung input[type=checkbox] {margin-top: 6px;margin-bottom: 30px;}
/*formular*/


/*mobilemenu*/
.mobilemenu {display:none;}
.mobilemenu > .LoadMenu {margin-top: 20px;}
.mobilemenu > .OtherMenu {}
.mobilemenu > .OtherMenu > .main-menu input.nav_logout {background: url(/images/icons/svg/logout.svg);
    background-position: top;
    background-size: cover;
    background-repeat: no-repeat;
    border: 0px solid #ffffff;
    width: 25px;
    height: 25px;
    margin-left: 22px;
    cursor: pointer;}
.mobilemenu .main-menu {display: block;margin-left: 0px;padding-left: 0px;}
.mobilemenu .main-menu li {display: block;}
.mobilemenu .main-menu > li > a {background-color: var(--weiss);color: var(--braun);padding: .75em 1.25em;display: block;text-decoration: none;font-size: 18px;}
.mobilemenu .main-menu > li > a:hover {background-color: var(--hellgrau);}
.mobilemenu .main-menu > li > .sub-menu > li > a {background-color: var(--weiss);color: var(--braun);padding: .75em 1.25em;display: block;text-decoration: none;    padding-left: 50px;font-size: 18px;}
.mobilemenu .main-menu > li > .sub-menu > li > a:hover {background-color: var(--hellgrau);}
.mobilemenu .main-menu li > ul {margin-left: 0px;padding-left: 0px;}
/*mobilemenu*/


/*main*/
.main {}
.main > .wrapper {}
.main > .wrapper > .headergrafik {background: url(/images/FCJ_Banner.jpg);
    background-size: cover;
    min-height: 50px;
    margin-top: 15px;
    margin-bottom: 20px;
    display: flex;
    align-items: flex-end;}
.main > .wrapper > .headergrafikgross {min-height: 250px;}
.main > .wrapper > .headergrafik h1 {padding-left:35px;padding-right:35px;margin-bottom:20px;margin-top:50px; color:var(--weiss);font-weight: 100;font-size: 30px;}
.main > .wrapper > .content {padding-left: 35px;padding-right: 35px;margin-top: 30px;margin-bottom: 30px;}
.main > .wrapper > .content p, .rte > .rte-bwrapper .rteButton {display: block;margin-block-start: 1em;margin-block-end: 1em;margin-inline-start: 0px;margin-inline-end: 0px;font-size: 17px;line-height: 23px;padding-bottom: 0px;margin-bottom: 15px;margin-top: 10px;}
.main > .wrapper > .content ul {margin-left: 25px;}
.main > .wrapper > .content ul.schnellzugriff {margin-left: 0px;}
.main > .wrapper > .content ul > li {font-size: 17px;line-height: 23px;margin-bottom: 7px;}
.main > .wrapper > .content ul > li:last-child {margin-bottom: 0px;}

.main > .wrapper > .content ul.search {max-width: 700px;margin-left: auto;margin-right: auto;list-style: none;}
.main > .wrapper > .content ul.search li {}
.main > .wrapper > .content ul.search li:last-child hr {display:none;}

.main > .wrapper > .content_startseite {}
.main > .wrapper > .content_startseite {}

.main > .wrapper > .content_startseite .StartseiteGitter {display: grid;grid-template-columns: repeat(4, 1fr);grid-template-rows: 1fr;grid-column-gap: 20px;grid-row-gap: 20px;}
/*main*/


/*rte*/
.rte {}
.rte > .rte-bwrapper {border: 1px solid var(--orange01);padding: 20px;border-radius: 25px;margin-bottom: 2rem; text-align:center;padding-top: 10px;padding-bottom: 5px;}
.rte > .rte-bwrapper p {color: var(--graublau);font-size: 20px;line-height: 25px;}
.rte > .rte-bwrapper .rteButton a {color: var(--weiss);background-color: var(--orange03);text-decoration: none;font-size: 16px;margin-top: 13px;padding: 3px 15px;border-radius: 7px;}
.rte > .rte-bwrapper .rteButton a:hover {background-color: var(--braun);}
.rte > .rte-bwrapper .rteButton {text-align: center;}
.rte > .rte-bwrapper .rteTopic {text-transform: uppercase;text-align: center;font-size: 22px !important;line-height: 25px !important;}
.rte > .rte-bwrapper .rteButton {text-align: center;}
/*rte*/


/*col-md*/
.col-md-3 {}
.main > .wrapper > .content .col-md-3 p {}
/*col-md*/


/*mb-form*/
form .mb-form {margin-top: 20px;}
form .mb-form > .col {}
form .mb-form label {font-weight: lighter;color: var(--braun);font-size: 18px;}
input.formcontrol-fluid, .formcontrol-fluid select {height: 38px;padding-left: 10px !important;padding-right: 10px !important;border-radius: 4px;border: 1px solid var(--schwarz);}
form .btn {margin-top: -12px;}
/*mb-form*/


/*coaches*/
.coaches {}
.coaches > .column {}
.coaches > .column > div {}
.coaches > .column > div > p:first-child {}
.coaches > .column > div > p:first-child img {}
.coaches > .column > div > p:last-child {}
/*coaches*/


/*schnellzugriff*/
.schnellzugriffContainer {}
.schnellzugriff-h {margin-bottom: 0.7em;font-weight: lighter;color: var(--braun);font-size: 20px;}
ul.schnellzugriff {margin-left: 0px;}
.schnellzugriff {display: flex;flex-direction: column;align-items: stretch;list-style: none;padding: 0;margin: 0;}
.schnellzugriff li {display: block;margin-bottom: 1em;margin-left: 0;}
.schnellzugriff a {border-radius: 10px;display: flex;text-align: center;text-decoration: none;color: var(--schwarz);align-items: center;padding: 0.5em;flex-grow: 1;height: 2rem;border: 1px solid var(--schwarz);padding-right: 25px;background-color: var(--hellgrau);}
.schnellzugriff a:hover {color: var(--orange01);border: 1px solid var(--orange01);}
.schnellzugriff li a img {margin-right: 1em;width: 2rem;max-height: 100%;mix-blend-mode: darken;}

.schnellzugriff-horizontal {display: inline-block;width: 100%;}
.schnellzugriff-horizontal li {float: left;margin-bottom: 0;margin-right: 1em;min-height: 100%;width: 23%;}
.schnellzugriff-horizontal li:last-child {margin-right: 0;}
/*schnellzugriff*/


/*Video*/
.video {margin-top: 30px;}
.video > h3 {margin-bottom: 0.7em;font-weight: lighter;color: var(--braun);font-size: 20px;}
.video > video {display: block;width: 100%;max-width: 100%;}
/*Video*/

/*footer*/
.footer {padding-left: 35px;padding-right: 35px;margin-top:20px;border-top: 1px solid var(--hellgrau);}
.footer > .wrapper {margin-bottom:20px; padding-top:20px;}
.footer > .wrapper > .imprint {color:var(--dunkelgrau);}
.footer > .wrapper > .imprint a {color: var(--braun);margin-right: 10px;}
.footer > .wrapper > .imprint a:hover {color: var(--schwarz);}
.footer > .wrapper > .imprint a::after {content: '|';margin-left: 10px;}
.footer > .wrapper > .imprint a:last-child::after {content: '';margin-left: 0px;margin-right: 0px;}
.footer > .wrapper > .copyrightline {color:var(--dunkelgrau);padding-top:10px; padding-bottom:10px;}
.footer > .wrapper > .copyrightline > .copyrightElement {}
.footer > .wrapper > .copyrightline > .copyrightElement::after {content: '|';margin-left: 10px;margin-right: 10px;}
.footer > .wrapper > .copyrightline > .copyrightElement:last-child::after {content: '';margin-left: 0px;margin-right: 0px;}
.footer > .wrapper > .copyrightline > .copyrightElement > a {color: var(--braun);}
.footer > .wrapper > .copyrightline > .copyrightElement > a:hover {color: var(--schwarz);}
/*footer*/

@media screen and (max-width:1100px) {
    .schnellzugriff-horizontal {width:auto;}
    .schnellzugriff-horizontal li {width:auto;}
    .main > .wrapper > .content_startseite .StartseiteGitter {grid-template-columns: repeat(2, 1fr);}
    .col-md-3 {width: 50%;}

    .coaches > .column > div > p:first-child {display: inline-block;margin-right: 20px;float: left;}
    .coaches > .column > div > p:last-child {padding-top: 50px;}
}


@media screen and (max-width:820px) {
    .coaches > .column > div > p:first-child {float: none;}
    .coaches > .column > div > p:last-child {padding-top: 0px;}
}


@media screen and (max-width:780px) {
	.footer > .wrapper > .imprint {text-align: center;}

	.footer > .wrapper > .copyrightline {margin-top: 15px;text-align: center;}
	.footer > .wrapper > .copyrightline > .copyrightElement {display: block;margin-bottom: 7px;}
	.footer > .wrapper > .copyrightline > .copyrightElement::after {content: '';margin-left: 0px;margin-right: 0px;}

    .schnellzugriff-horizontal {display: block;}
    .schnellzugriff-horizontal li {float: none;margin-bottom: 0;margin-right: 0em;min-height: 100%;}
}

@media screen and (max-width:767px) {
    .col-md-8 {margin-bottom: 30px;}
    .col-md-3 {width: 50%;}
    .col-md-4 {margin-bottom: 30px;}
    .col-md-4:last-child {margin-bottom: 0px;}
}

@media screen and (min-width:750px) {
	.mobilemenu {display:none !important;}
}

@media screen and (max-width:750px) {
	.header .nav > .tbl > .tr > .tdhamburger {display:table-cell;}
	.header .nav > .tbl > .tr > .tdmenu {display:none;}
	.header .nav > .tbl > .tr > .tdquick {display:none;}

	.header .searchform {display:none;}

    .formular {grid-template-columns: 1fr;}
    .formular > .angabe {text-align: left;margin-bottom: 5px;padding-left: 5px;}
    .formular > .angabeleer {display:none;}
    .formular > .form {padding-left: 5px;}
    .formular input, .formular select, .formular textarea {width: 100%;}
    .formularAnmeldung {padding-top: 0px;padding-bottom: 5px;}

    .main > .wrapper > .content_startseite .StartseiteGitter {grid-template-columns: repeat(1, 1fr);}
    .main > .wrapper > .content_startseite .StartseiteGitter .rte > .rte-bwrapper {margin-bottom: 10px;}
}

@media screen and (max-width:500px) {
	.header .nav {padding-left: 20px; padding-right: 20px;}
	.header > .images > .left {padding-left: 20px;}
	.header > .images > .left img {margin-top: 7px; max-width:75%;}
	.header > .images > .right {padding-right: 20px;}
	.header > .images > .right img {max-width:75%;}

	.footer {padding-left: 20px; padding-right: 20px;}
    .col-md-3 {width: 100%;}

    .coaches > .column > div > p:first-child {float: left;}
    .coaches > .column > div > p:last-child {padding-top: 50px;}
}



@media screen and (max-width:430px) {
    .coaches > .column > div > p:first-child {float: none;display: block;}
    .coaches > .column > div > p:first-child > img {margin-left: auto;margin-right: auto;}
    .coaches > .column > div > p:last-child {padding-top: 0px;margin-left: auto;margin-right: auto;display: table;}
}
