@charset "UTF-8";

/* --- TOKENS --- */

/* colors */

:root{
	--main-color:#3663ca;
	--main-color-light:#86b3fa;
	--main-color-dark:#1643aa;

	--color-primary:#333333;
	--color-secondary:#3663ca;

	--color-black:#212121;
	--color-white:#ffffff;
	--color-grey:#565656;
	--color-mediumgrey:#969696;
	--color-lightgrey:#e6e6e6;
	--color-darkgrey:#363636;
	--color-red:#d81e25;
	--color-green:#419c57;

	--bg-black:#212121;
	--bg-grey:#333333;
	--bg-blue:#3663ca;
	--bg-lilac:#6428B4;
	--bg-orange:#f49700;
	--bg-green:#00749a;
	--bg-yellow:yellow;
	--bg-red:#d81e25;
	--bg-red-light:#c00;
	--bg-red-dark:#700;
	--bg-green:#419c57;

	--color-shopware-blue:#189eff;
	--color-magento-orange:#f26321;
	--color-akeneo-lila:#8f4ef6;
	--color-pimcore-lila:#6428b4;
	--color-typo3-orange:#f49700;
	--color-wordpress-blue:#23354b;
	--color-php-blue:#4c578d;
	--color-hyva-green:#129d87;
	--color-hyva-blue:#0A23B9;

	--shopware:#189eff;
	--magento:#f26321;
	--akeneo:#8f4ef6;
	--pimcore:#6428b4;
	--typo3:#f49700;
	--wordpress:#23354b;
	--php:#4c578d;
	--hyva:#0A23B9;
	}

/* fonts */

:root {
	--font-size-xs: 12px;
	--font-size-s: 14px;
	--font-size-r: 16px;
	--font-size-m: 20px;
	--font-size-l: 25px;
	--font-size-xl: 30px;
	--font-size-xxl: 35px;
	--font-size-xxxl: 50px;
	}
  

/* dimensions */

:root{
	--spacing-xxs: 0.118rem;
	--spacing-xs: 0.191rem;
	--spacing-s: 0.45rem;
	--spacing-m: 0.7rem;
	--spacing-l: 2.2872rem;
	--spacing-xl: 1.309rem;
	}


/* --- MISC --- */

html,body{box-sizing:border-box;margin:0;padding:0;width:100%;height:100%;}
body{overflow-x:hidden}
body.navExpd{overflow-y:hidden}

*{box-sizing:border-box;border-width:0;border-style:solid;border-color:#d2d2d2;background-repeat:no-repeat}

h1,h2,h3,h4,h5,h6{margin:0;padding:0}
h2.patch{display:inline-block;position:relative;width:auto}
.txtWrap p + h2,.txtWrap p + h3{margin-top:20px}

ul,ol{list-style:none;margin:0;padding:0}
ul li{list-style:none;line-height:1.5}
ol li{line-height:1.5}

::marker{display:none}

button{line-height:1.4;background:none transparent;border:none}
.btn,.lnk,.btnInTxt{display:inline-block;position:relative;width:auto}

a{color:var(--color-primary)}


/* --- BASIC Z-INDICES --- */

header{z-index:302}


/* --- PAGE --- */

#page{margin:0;padding:0;min-height:100vh;justify-content:space-between}
#page.iframePage{padding-top:30px;min-height:unset}

.navExpd main::after{content:'';display:block;position:fixed;z-index:301;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,.6)}

#page > *,.ceItem,.ceItem *{width:100%}


/* --- HEADER --- */

#page > header{position:fixed;top:0;left:0;width:100%;height:180px;max-height:180px;overflow:visible;filter:drop-shadow(0 4px 4px rgba(0,0,0,.2));-webkit-transition:all .4s;transition:all .4s}

#page > header > *{position:relative}
#page > header + *{margin-top:180px}
.menu.main .subContainer,#page::after{top:180px}

#page > header .topBox{height:40px}
#page > header .menuBox{height:140px}
#page > header .menuBox .logoBox{height:80px}
#page > header .topLeft .grid-container .row{height:40px}

#page > header .topBox{position:relative;z-index:2;padding:0 10%;width:100%;background-color:#f1f3f8}

#page > header .topLeft{display:inline-block;width:auto;height:100%}
#page > header .topLeft > *{display:inline-block;margin-right:20px;width:auto;vertical-align:top}
#page > header .topLeft .grid-container .row{justify-content:flex-start;align-items:center}

#page > header .topRight{width:auto;height:100%}
#page > header .topRight *{font-size:var(--font-size-xs)!important}
#page > header .topRight > *{display:inline-block;margin-left:30px;width:auto;height:auto}

#page > header .topBox::after{content:'';position:fixed;z-index:-1;top:40px;left:0;width:100%;height:1px;background-color:#f2f2f2}
#page > header .topBox > section{display:inline-block;width:auto}
#page > header .topBox > section .bodyWrap *{color:var(--color-black)}
#page > header .topBox > section .bodyWrap a{text-decoration:none;-webkit-transition:all .4s;transition:all .4s}
#page > header .topBox > section .bodyWrap a:hover{filter:brightness(60%)}
#page > header .topBox > section .bodyWrap i{margin:0 0 0 20px}
#page > header .topBox > section .bodyWrap i:first-child{margin:0 5px 0 0;font-style:normal}
#page > header .topBox > section .bodyWrap a i,#page > header .topBox > section .bodyWrap a i:first-child{margin:0 5px 0 20px}

#page > header .menuBox{position:relative;z-index:1;padding:0 10%;width:100%}

#page > header .topLeft .buttonBox{padding:6px 0 0 5%!important}
#page > header .topLeft .buttonBox img{margin:0 7px 0 0;height:22px}

#page > header .topRight .buttonBox{padding:0!important}
#page > header .topRight .buttonBox .btn:first-child{background-color:transparent!important;border:1px solid #212121!important}
#page > header .topRight .buttonBox .btn:first-child:hover{border-color:var(--main-color)!important}
#page > header .topRight .buttonBox .btn:first-child *{color:#000!important}
#page > header .topRight .buttonBox .btn:first-child:hover *{color:var(--main-color)!important}
#page > header .topRight .buttonBox .btn:nth-child(2){background-color:#212121!important;border:none!important}
#page > header .topRight .buttonBox .btn:nth-child(2) *{color:#fff!important}
#page > header .topRight .buttonBox .btn:nth-child(2):hover{background-color:#424242!important}
#page > header .topRight .buttonBox .btn *{font-weight:normal;font-family:regular,arial,helvetica,awesome,sans-serif;white-space:nowrap}

/* topLeft */

header .topLeft{display:block!important;position:relative}
header .topLeft .hGroup.accToggle{padding:0;cursor:pointer}
header .topLeft .hGroup.accToggle *{margin:0;padding:0;font-size:var(--font-size-s)!important;-webkit-transition:all .4s;transition:all .4s}
#page header .topLeft .hGroup.accToggle > * strong,#page header .topLeft .hGroup.accToggle > * b{font-weight:bold!important}
header .topLeft .hGroup.accToggle > *::after{content:'\f107';margin-left:5px;font-weight:bold;font-size:var(--font-size-s)!important;font-family:awesome;border:none!important}
header .topLeft .hGroup.accToggle:hover > *::after,header .topLeft .hGroup.accToggle.cur > *::after{color:var(--main-color)}
header .topLeft .hGroup.accToggle.cur > *::after{content:'\f106';font-family:awesome}
header .topLeft .hGroup.accToggle:hover *,header .topLeft .hGroup.accToggle.cur *,header .topLeft .hGroup.accToggle:hover *::after,header .topLeft .hGroup.accToggle.cur *::after{color:var(--main-color)}

header .topLeft .hGroup.accToggle + *{position:absolute;z-index:200;top:100%;left:-20px;padding:0 20px 10px;width:65%;background-color:#fff;border:1px solid #d2d2d2;border-top:none;-webkit-transform:scaleY(0);transform:scaleY(0);-webkit-transform-origin:top;transform-origin:top;-webkit-transition:all .4s;transition:all .4s}
header .topLeft .hGroup.accToggle + *.cur{-webkit-transform:scaleY(1);transform:scaleY(1)}
header .topLeft .hGroup.accToggle + * i{margin:0 5px 0 0}
header .topLeft .hGroup.accToggle + * i::before{position:relative;top:2px}
header .topLeft .hGroup.accToggle + * table,#page header .topLeft .hGroup.accToggle + * table th,#page header .topLeft .hGroup.accToggle + * table td{margin:0;background-color:transparent;border:none!important;white-space:nowrap}
header .topLeft .hGroup.accToggle + * table tr{background-color:transparent!important}
#page header .topLeft .hGroup.accToggle + * table th,#page header .topLeft .hGroup.accToggle + * table td{padding:5px 0!important;font-size:var(--font-size-s)!important}
#page header .topLeft .hGroup.accToggle + * table td a{text-decoration:none}
#page header .topLeft .hGroup.accToggle + * table td a:hover{text-decoration:underline}

/* topright */

#pageHeader .topBox .topRight figure.logoImage{margin-left:30px!important}

/* search */

.searchBox{position:relative;margin-top:5px;width:100%}
.topRight .searchBox{margin-top:0}
.topBox .searchBox ~ *{display:none}

.searchBox .accButton{display:none;margin:0;padding:0;border:0;background:transparent;cursor:pointer}

.searchBox .searchContent{margin:0;padding:0;width:100%;background:transparent}
.searchBox .searchContent fieldset{margin:0;padding:0;border:0}
.searchBox .searchContent legend{display:none}

.searchBox .searchForm{position:relative;width:auto}
.searchBox .searchForm > *{display:inline-block;width:auto}

.searchBox .searchForm label{display:none}

.searchBox .searchForm input.searchInput{padding:4px 40px 4px 10px;width:250px;font-size:12px;color:#000;background:#fff;border:1px solid #7a7a7a}
.searchBox .searchForm input.searchInput:focus{outline:0;background-color:#fff;border-color:var(--main-color)}

.searchBox .searchSubmit{position:absolute;z-index:1;top:0;right:0}
.searchBox .searchSubmit::after{content:'\e813';position:absolute;z-index:2;top:3px;right:10px;font-family:awesome;font-size:16px;color:#5a5a5a;transition:all .4s}
.searchBox .searchInput:focus + .searchSubmit::after{color:var(--main-color)}
.searchBox .searchSubmit:hover::after{color:#aaa!important}
#page .searchBox .searchSubmit input.submit{display:block;position:relative;z-index:3;margin:0;padding:0;width:35px;height:25px;font-size:0!important;cursor:pointer!important;background-color:transparent;border:none}
.searchBox .searchSubmit:hover input.submit,.searchBox .searchSubmit input.submit:hover{color:transparent;border:none}

.searchBox .searchType{display:none}

main .searchBox .searchContent{text-align:center}
main .searchBox .searchContent fieldset{display:inline-block;width:auto}
main .searchBox .searchForm input.searchInput{padding:10px 40px 10px 15px;width:25rem;font-size:16px}
main .searchBox .searchSubmit::after{top:10px;font-size:20px}
#page main .searchBox .searchSubmit input.submit{width:40px;height:45px}

/* topmenu and langmenu */

header ul.topMenu{text-align:right}
header ul.topMenu li{display:inline-block;margin-left:15px;width:auto;height:auto!important}
header ul.topMenu li:nth-child(3){display:none}
header ul.topMenu li > span{display:block;border:1px solid transparent;-webkit-transition:all .4s;transition:all .4s}
header ul.topMenu li > span:not(.hasColor){border-color:#212121}
header ul.topMenu li > span.hasColor:hover{filter:brightness(1.5)}
header ul.topMenu li > span:not(.hasColor):hover{border-color:var(--main-color)}
header ul.topMenu li a{display:block;padding:8px 20px 12px;line-height:1;color:inherit;background-color:transparent}
header ul.topMenu li a:hover,header ul.topMenu li.act a{text-decoration:none}
header ul.topMenu li > span:not(.hasColor):hover *{color:var(--main-color)}
header ul.topMenu > li > .title > a i{margin-left:7px}
header ul.topMenu > li > .title > a *,header ul.langMenu,header ul.langMenu li a{font-size:var(--font-size-s)}

header ul.langMenu{text-align:right}
header ul.langMenu li{display:inline-block;width:auto;height:auto!important}
header ul.langMenu li:last-child{margin-left:-1px}
header ul.langMenu li span{display:block}
header ul.langMenu li a{display:block;padding:5px 10px 6px;font-family:regular,arial,helvetica,sans-serif,awesome;font-weight:normal;line-height:1;color:#212121;background-color:#fff;border:1px solid #a2a2a2;-webkit-transition:all .4s;transition:all .4s}
header ul.langMenu li a:hover{text-decoration:none;color:var(--main-color);border-color:var(--main-color)}
header ul.langMenu li.act a{font-weight:bold;font-family:medium,arial,helvetica,sans-serif;color:#fff;background-color:var(--main-color);border-color:var(--main-color)}
header ul.langMenu li.disabled{display:block;padding:5px 10px 6px;font-family:regular,arial,helvetica,sans-serif,awesome;font-weight:normal;line-height:1;border:1px solid #a2a2a2;-webkit-opacity:.4;opacity:.4;-webkit-transition:all .4s;transition:all .4s}

/* logobox + mainnav */

#page > header .menuBox .logoBox{position:relative;padding:30px 0 0;width:100%}
#page > header .menuBox .logoBox > *{width:25%!important}
#page > header .menuBox .logoBox *{width:100%}
#page > header .menuBox .logoBox:has(.subLogo) picture{top:0}
#page > header .menuBox .logoBox .subLogo{position:absolute;bottom:0;left:0;font-size:1.1vw;font-weight:bold;font-family:arial,helvetica,sans-serif;color:var(--main-color)}

#page > header .menuBox .logoBox picture{width:100%;height:100%}
#page > header .menuBox .logoBox picture a{width:100%;height:100%;text-align:left}
#page > header .menuBox .logoBox picture img{width:100%!important;height:100%!important}

.fancyPage .logoBox{padding-top:5px;width:25%}

#page > header .menuBox nav.mainNav{width:auto}

.domain-edl2-asp-sportpsychologie-de #page > header .menuBox,.domain-edl-asp-sportpsychologie-de #page > header .menuBox{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:flex-end}
.domain-edl2-asp-sportpsychologie-de #page > header .menuBox .logoBox,.domain-edl2-asp-sportpsychologie-de #page > header .menuBox nav.mainNav,
.domain-edl-asp-sportpsychologie-de #page > header .menuBox .logoBox,.domain-edl-asp-sportpsychologie-de #page > header .menuBox nav.mainNav{padding:0;width:50%}
.domain-edl2-asp-sportpsychologie-de #page > header .menuBox .logoBox,.domain-edl-asp-sportpsychologie-de #page > header .menuBox .logoBox{margin-bottom:20px}
.domain-edl2-asp-sportpsychologie-de #page > header .menuBox .logoBox > *,.domain-edl-asp-sportpsychologie-de #page > header .menuBox .logoBox > *{width:100%!important}


/* --- MEDIABOX --- */

#heroSlider,#mediaBox,#mediaBox > .picSlide{position:relative;margin:0;padding:0;width:100%;max-width:100%;overflow:hidden}
#mediaBox{visibility:hidden;opacity:0}
#mediaBox.mediaBoxReady{visibility:visible;opacity:1}
#mediaBox > .picSlide:not(.slick-initialized) > .sliderItem:first-child{display:flex!important;position:relative;margin:0;padding:0;width:100%!important;max-width:100%!important}
#mediaBox > .picSlide:not(.slick-initialized) > .sliderItem:not(:first-child){display:none!important}
#mediaBox > .picSlide > .ceItem{position:relative;margin:0;padding:0;width:100%;max-width:100%;height:100%}

#mediaBox .ceItem.imgOverlay.boxRightIndent .galWrap + *,#mediaBox .ceItem.imgOverlay.boxLeftIndent .galWrap + *{width:80%!important}
#mediaBox .ceItem.imgOverlay.boxRightIndent .galWrap + *{margin-left:10%!important}
#mediaBox .ceItem.imgOverlay.boxLeftIndent .galWrap + *{margin-right:10%!important}

.ceItem.imgOverlay{position:relative;overflow:hidden}
.ceItem.imgOverlay .galWrap{position:absolute;z-index:0;top:0;left:0;width:100%;height:100%}
#heroSlider .ceItem.imgOverlay .galWrap{top:auto;bottom:0}
.ceItem.imgOverlay .galWrap .outerBox,.ceItem.imgOverlay .galWrap .innerBox,.ceItem.imgOverlay .galWrap .imgRow,.ceItem.imgOverlay .galWrap .imgCol,.ceItem.imgOverlay .galWrap figure,.ceItem.imgOverlay .galWrap picture{width:100%;height:100%}
.ceItem.imgOverlay .galWrap img,.ceItem.imgOverlay .galWrap video{display:block;margin:0;width:100%!important;height:100%!important;object-fit:cover}
.ceItem.imgOverlay .galWrap picture.scaleDown::before,.ceItem.imgOverlay .galWrap picture.scaleDown::after{display:none}
.ceItem.imgOverlay .galWrap picture.scaleDown img{object-fit:scale-down!important;background-color:#363636}
.ceItem.imgOverlay .galWrap figcaption{display:none}

.ceItem.imgOverlay .galWrap + *{position:relative;z-index:1;height:auto}
.ceItem.imgOverlay .galWrap + * *{color:#fff}
.ceItem.imgOverlay .galWrap + * .btn.noBg *{color:#212121}
.ceItem.imgOverlay .galWrap + * .hGroup > *:first-child{display:inline-block;padding:15px 20px;width:auto;background-color:rgba(255,255,255,.8)}
.ceItem.imgOverlay .galWrap + * .hGroup > *:first-child *{display:block;color:var(--main-color)}

@media only screen and (max-width:768px){
	#heroSlider,#mediaBox,#mediaBox > .picSlide{aspect-ratio:auto;min-height:480px}
}


/* --- MAINMENU BOX --- */

.menu.main{margin:0;width:100%}
header nav .menu.main{padding-top:10px;width:100%}

nav a,nav a:hover{text-decoration:none;color:inherit}
header nav > section + *{display:inline-block}


/* --- BASIC HORIZONTAL SPACES --- */

#topBox > *,header > *,main > article:not(.main2ColWrap) > * > *,.main2ColWrap,.subBox1,footer > *,.newsSearch.boxIndent,.tableAcc .txtWrap{margin-right:auto;margin-left:auto}


/* --- FLEXBOXES --- */

.flexRow,.flexCol,.row,.flex{display:-moz-box;display:-webkit-box;display:-webkit-flex;display:flex;}
.flexRow.inline,.flexCol.inline{display:-moz-inline-box;display:-webkit-inline-flex;display:inline-flex}
.flexRow,.flexCol,.row{-webkit-flex-wrap:wrap;flex-wrap:wrap}
.flexRow.nowrap,.flexCol.nowrap{-webkit-flex-wrap:nowrap;flex-wrap:nowrap}
.flexRow,.colrow,.row{-webkit-flex-direction:row;flex-direction:row}
.flexRow.rev{-webkit-flex-direction:row-reverse;flex-direction:row-reverse}
.flexCol{-webkit-flex-direction:column;flex-direction:column}
.flexCol.rev{-webkit-flex-direction:column-reverse;flex-direction:column-reverse}

.flexRow.jCenter,.flexCol.jCenter{-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center}
.flexRow.jBetween,.flexCol.jBetween{-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between}
.flexRow.jAround,.flexCol.jAround{-webkit-justify-content:space-around;-ms-flex-pack:distribute;justify-content:space-around}
.flexRow.jEnd,.flexCol.jEnd{-webkit-justify-content:flex-end;-ms-flex-pack:end;justify-content:flex-end}
.flexRow.jStart,.flexCol.jStart{-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start}
.flexRow.jStretch,.flexCol.jStretch{-webkit-justify-content:stretch;justify-content:stretch}

.flexRow.aCenter,.flexCol.aCenter{-webkit-align-items:center;-ms-flex-align:center;align-items:center}
.flexRow.aStart,.flexCol.aStart{-webkit-align-items:flex-start;-ms-flex-align:start;align-items:flex-start}
.flexRow.aEnd,.flexCol.aEnd{-webkit-align-items:flex-end;-ms-flex-align:end;align-items:flex-end}
.flexRow.aStretch,.flexCol.aStretch{-webkit-align-items:stretch;-ms-flex-align:stretch;align-items:stretch}
.flexRow.aBase,.flexCol.aBase{-webkit-align-items:baseline;-ms-flex-align:baseline;align-items:baseline}

.flexRow.cCenter,.flexCol.cCenter{-webkit-align-content:center;align-content:center}
.flexRow.cBetween,.flexCol.cBetween{-webkit-align-content:space-between;align-content:space-between}
.flexRow.cAround,.flexCol.cAround{-webkit-align-content:space-around;align-content:space-around}
.flexRow.cStart,.flexCol.cStart{-webkit-align-content:flex-start;align-content:flex-start}
.flexRow.cEnd,.flexCol.cEnd{-webkit-align-content:flex-end;align-content:flex-end}
.flexRow.cStretch,.flexCol.cStretch{-webkit-align-content:stretch;align-content:stretch}

.displayBlock{display:block}
.inlineBlock{display:inline-block}


/* --- TRANSLATIONS --- */

html[lang="en-US"] .de,html[lang="en-GB"] .de{display:none!important}
html[lang="de-DE"] .en,html[lang="de"] .en{display:none!important}