@font-face {
    font-family: 'hn85';
    src: url('../fonts/hn85.eot');
    src: url('../fonts/hn85.eot?#iefix') format('embedded-opentype'),
url('../fonts/hn85.woff') format('woff'),
url('../fonts/hn85.ttf') format('truetype'),
url('../fonts/hn85.svg#hn85') format('svg');
}
@font-face {
    font-family: 'hn86';
    src: url('../fonts/hn86.eot');
    src: url('../fonts/hn86.eot?#iefix') format('embedded-opentype'),
url('../fonts/hn86.woff') format('woff'),
url('../fonts/hn86.ttf') format('truetype'),
url('../fonts/hn86.svg#hn86') format('svg');
}
@font-face {
    font-family: 'hn65';
    src: url('../fonts/hn65.eot');
    src: url('../fonts/hn65.eot?#iefix') format('embedded-opentype'),
url('../fonts/hn65.woff') format('woff'),
url('../fonts/hn65.ttf') format('truetype'),
url('../fonts/hn65.svg#hn65') format('svg');
}
@font-face {
    font-family: 'hn66';
    src: url('../fonts/hn66.eot');
    src: url('../fonts/hn66.eot?#iefix') format('embedded-opentype'),
url('../fonts/hn66.woff') format('woff'),
url('../fonts/hn66.ttf') format('truetype'),
url('../fonts/hn66.svg#hn66') format('svg');
}
@font-face {
    font-family: 'hn45';
    src: url('../fonts/hn45.eot');
    src: url('../fonts/hn45.eot?#iefix') format('embedded-opentype'),
url('../fonts/hn45.woff') format('woff'),
url('../fonts/hn45.ttf') format('truetype'),
url('../fonts/hn45.svg#hn45') format('svg');
}
@font-face {
    font-family: 'hn46';
    src: url('../fonts/hn46.eot');
    src: url('../fonts/hn46.eot?#iefix') format('embedded-opentype'),
url('../fonts/hn46.woff') format('woff'),
url('../fonts/hn46.ttf') format('truetype'),
url('../fonts/hn46.svg#hn46') format('svg');
}
@font-face {
    font-family: 'hn35';
    src: url('../fonts/hn35.eot');
    src: url('../fonts/hn35.eot?#iefix') format('embedded-opentype'),
url('../fonts/hn35.woff') format('woff'),
url('../fonts/hn35.ttf') format('truetype'),
url('../fonts/hn35.svg#hn35') format('svg');
}
@font-face {
    font-family: 'hn36';
    src: url('../fonts/hn36.eot');
    src: url('../fonts/hn36.eot?#iefix') format('embedded-opentype'),
url('../fonts/hn36.woff') format('woff'),
url('../fonts/hn36.ttf') format('truetype'),
url('../fonts/hn36.svg#hn36') format('svg');
}
@font-face {
    font-family: 'hn25';
    src: url('../fonts/hn25.eot');
    src: url('../fonts/hn25.eot?#iefix') format('embedded-opentype'),
url('../fonts/hn25.woff') format('woff'),
url('../fonts/hn25.ttf') format('truetype'),
url('../fonts/hn25.svg#hn25') format('svg');
}
@font-face {
    font-family: 'hn26';
    src: url('../fonts/hn26.eot');
    src: url('../fonts/hn26.eot?#iefix') format('embedded-opentype'),
url('../fonts/hn26.woff') format('woff'),
url('../fonts/hn26.ttf') format('truetype'),
url('../fonts/hn26.svg#hn26') format('svg');
}

/*	---------------------------------------------------------------------------------------------------- */

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior:smooth;
}
body {
    background: #FFFFF6;
	width:100%;
	margin:0 auto;
	font-family: 'hn45', Helvetica Neue, Arial, Helvetica, sans-serif;
	font-size: 100%;
	font-weight: normal;
	font-style: normal;
	line-height:1.375;
	color: #666;
}

a.scrollup {
	position:fixed;
	display: none;
	width: 50px;
	height:50px;
	right:25px;
	bottom: 125px;
	margin:0;
	padding:0;
	font-size: 50px;
	color:rgba(248,248,78,0.50);
	line-height:50px;
	text-align:center;
	overflow: hidden;
	z-index:99999;
}
a:hover.scrollup {
	color:rgba(248,248,78,1.00);
	-webkit-transition: .5s;
	transition: .5s;
}


/*	Header		---------------------------------------------------------------------------------------------------- */

header {
	position: fixed;
	top: 0;
	display: block;
	margin:0;
	width:100%;
	height: 240px;
	padding:0;
	z-index:99999;
}
header div.wrapper {
	position:relative;
	display: block;
	width:100%;
	height:100px;
	background-color: rgba(255,255,255,0.65);
    border-top: 3px solid #0C0247;
    border-bottom: 3px solid #0C0247;
	margin:70px auto;
    padding: 0;
    backdrop-filter: blur(5px);
    -o-backdrop-filter:blur(5px);
    -ms-backdrop-filter:blur(5px);
    -moz-backdrop-filter:blur(5px);
    -webkit-backdrop-filter:blur(5px);
    -webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
	z-index:99999;
    clear: both;
}
.navi {
	position: relative;
	display: block;
	float: left;
	margin:0;
	padding:0;
	line-height: 100px;
	height:100px;
	width: calc(50% - 110px);
	color: #999;
    font-family: 'hn85', Helvetica Neue, Arial, Helvetica, sans-serif;
    font-size: 16px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
}
.navi.left {
	text-align: right;
}
.navi.right {
	text-align: left;
}
.navi a {
	color: rgba(12,2,71,0.50);
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
    width: auto;
    margin: 0;
	text-align: right;
    white-space: nowrap;
}
.navi.left a {
	text-align: right;
	padding:0 40px 0 0;
}
.navi.right a {
	text-align: left;
	padding:0 0 0 40px;
}
.navi a.active {
	color: #666;
}
.navi a.dsktp:last-of-type {
	padding:0;
}
.navi a:hover {
	color: rgba(12,2,71,1.00);
}
.navi a.mobile  {
	width: 0;
    display: none;
	padding:0;
}

.logo {
    position: relative;
	float: left;
	display: block;
	line-height: 220px;    
	width: 220px;
	height:220px;
	background-image: url(../img/tc_blaugelb_1.png);
    background-size:220px 220px;
	background-position: center center;
	background-repeat: no-repeat;
	padding:0;
	margin:-60px auto;
}
/* Retina */
@media (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.logo {
	background-image: url(../img/tc_blaugelb_1@2x.png);
}
}


 /*	Navi		---------------------------------------------------------------------------------------------------- */


nav.main {
	position:fixed;
	display:none;
	width:0;
	height:0;
	top:0;
	right:0;
}



/*	Footer		---------------------------------------------------------------------------------------------------- */


footer {
	position:relative;
	display:block;
	width:100%;
	height:auto;
	margin:0;
	padding:0;
	background: rgba(12,2,71,1.0);
    border-top: 2px solid rgba(248,248,78,1.00);
	overflow: auto;
	z-index: 99;
}
footer div {
	display:block;
	width:1920px;
	height:auto;
	padding:40px;
	margin: 0 auto;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
}
footer span {
	display:block;
    float: left;
	width: 50%;
	padding:0;
	margin:0 0 40px;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
	text-align: left;
}
footer span:first-of-type {
	padding:0 40px 0 0;
	text-align: right;
}
footer span p em {
	font-size: 0.9375em;
}
footer h1 {
	font-family: 'hn26', Helvetica Neue, Arial, Helvetica, sans-serif;
	font-size: 40px;
	color: rgba(248,248,78,1.00);
    letter-spacing: 0;
	padding: 0 0 20px;;
	margin: 0 auto 40px;
	border-bottom: 1px dashed rgba(248,248,78,1.00);
	text-align: center;
}
footer p {
	font-family: 'hn45', Helvetica Neue, Arial, Helvetica, sans-serif;
	color: #FFF;
	font-size: 1.125em;
    max-width: 600px;
    margin: 0 auto 20px;
}
footer strong {
    font-family: 'hn65', Helvetica Neue, Arial, Helvetica, sans-serif;
	color: #FFF;
}
footer a {
	color: rgba(199,203,231,1.00);
}
footer a:hover {
	color: rgba(46,53,109,1.00);
}

footer nav {
    position:relative;
    display: block;
	width:100%;
	font-family: 'hn45', Helvetica Neue, Arial, Helvetica, sans-serif;
	color: #FFF;
	border-top: 1px dashed rgba(248,248,78,1.00);
    padding:30px 0 0;
	margin:0;
    overflow: hidden;
    text-align: center;
}
footer nav em {
    float: left;
	display: block;
	font-family: 'hn35', Helvetica Neue, Arial, Helvetica, sans-serif;
	color: #FFF;
    padding:0 40px 0 0;
}
footer nav p {
    float: right;
	display: block;
	color: #FFF;
    padding:0;
    max-width: 100%;
}
footer nav a {
    padding:0 0 0 40px;
}
footer nav a i {
    font-size: 1.5em;
    vertical-align: -3px;
}



@media only screen and (max-width: 1920px) {


/*	Header		---------------------------------------------------------------------------------------------------- */



/*	Footer		---------------------------------------------------------------------------------------------------- */

footer div {
	width:100%;
	padding:40px;
}

}


@media only screen and (max-width: 1600px) {


/*	Header		---------------------------------------------------------------------------------------------------- */

.navi {
    font-size: 14px;
}
.navi.left a {
	padding:0 10px 0 0;
}
.navi.right a {
	padding:0 0 0 20px;
}
	
/*	Footer		---------------------------------------------------------------------------------------------------- */





}


@media only screen and (max-width: 1280px) {


/*	Header		---------------------------------------------------------------------------------------------------- */


/*	Header		---------------------------------------------------------------------------------------------------- */

header {
	height: 240px;
}
header div.wrapper {
	height:100px;
    border-top: 3px solid #0C0247;
    border-bottom: 3px solid #0C0247;
	margin:70px auto;
    padding: 0;
}
.navi {
	position: relative;
	display: block;
	float: left;
	margin:0;
	padding:0;
	line-height: 100px;
	height:100px;
	width: calc(50% - 110px);
    font-size: 13px;
    letter-spacing: 0;
}
.navi.left a {
	padding:0 10px 0 0;
}
.navi.right a {
	padding:0 0 0 10px;
}
.logo {
	line-height: 220px;    
	width: 220px;
	height:220px;
	background-image: url(../img/tc_blaugelb_1.png);
    background-size:220px 220px;
	margin:-60px auto;
}
/* Retina */
@media (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.logo {
	background-image: url(../img/tc_blaugelb_1@2x.png);
}
}
    
    
    
/*	Footer		---------------------------------------------------------------------------------------------------- */


}


@media only screen and (max-width: 1100px) {
	

/*	---------------------------------------------------------------------------------------------------- */



/*	Header		---------------------------------------------------------------------------------------------------- */

.navi {
    font-size: 12px;
}
.navi.left a {
	padding:0 5px 0 0;
}
.navi.right a {
	padding:0 0 0 10px;
}
    
}    

@media only screen and (max-width: 1024px) {
	

/*	---------------------------------------------------------------------------------------------------- */



/*	Header		---------------------------------------------------------------------------------------------------- */

header div.wrapper {
	height:60px;
	margin:90px auto;
}    
.navi {
	line-height: 60px;
	height:60px;
	width: calc(50% - 110px);
}
.navi a {
	display: none;
    width: 0;
	padding:0;
}
.navi a.mobile {
    display: inline;
    width: auto;
	font-size: 36px;
}
.navi.left a.mobile {
	padding:0 20px 0 0;
}
.navi.right a.mobile {
	padding:0 0 0 20px;
}
.navi a.mobile i {
    vertical-align: -2px;
}

.logo {
	margin:-80px auto;
}



    

 /*	Navi		---------------------------------------------------------------------------------------------------- */
    
    
nav.main {
	display:block;
	background:rgba(248,248,78,0.75);
	margin:0;
	padding:0;
	overflow:hidden;
	opacity: 0;
	z-index: 1;
	-webkit-transition: .5s;
	transition: .5s;
}
nav.main ul {
	height:100%;
	width:auto;
	list-style:none;
	padding:20px 20px 0;
	margin:0;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
}
nav.main li {
	display: block;
	width:auto;
    font-family: 'hn85', Helvetica Neue, Arial, Helvetica, sans-serif;
	font-weight: normal;
	font-style: normal;
    text-transform: uppercase;
    letter-spacing: 0.05em;
	color: #CCC;
	font-size: 18px;
	line-height: 20px;
	padding:0;
	margin:0 0 15px;
    text-align: right;
}
nav.main a {
	text-decoration: none;
	color: rgba(12,2,71,0.5);
	-webkit-transition: .5s;
	transition: .5s;
}
nav.main a.menu-close {
	font-size: 36px;
	margin: 0;
	padding:0 0 20px;
}
nav.main a:hover, a.menu-close:hover, a.contact:hover {
	color:rgba(12,2,71,1.00);
}
nav.main .active a {
	color: rgba(12,2,71,0.3);
}

#menu-open:target nav.main {
	opacity: 1;
	width:100%;
	height:100%;
    backdrop-filter: blur(5px);
    -o-backdrop-filter:blur(5px);
    -ms-backdrop-filter:blur(5px);
    -moz-backdrop-filter:blur(5px);
    -webkit-backdrop-filter:blur(5px);
	z-index: 999999;
}
#menu-close:target nav.main {
	opacity: 0;
	width:0;
	height:0;
    backdrop-filter: blur(0);
    -o-backdrop-filter:blur(0);
    -ms-backdrop-filter:blur(0);
    -moz-backdrop-filter:blur(0);
    -webkit-backdrop-filter:blur(0);
	z-index: 1;
}



/*	Footer		---------------------------------------------------------------------------------------------------- */

footer div {
	padding:20px;
}
footer nav {
	padding:20px 0 0;
	font-size: 0.9375em;
}
footer h1 {
	font-size: 30px;
	margin: 0 auto 30px;
}
footer p {
	font-size: 1em;
}
footer nav a {
    padding:0 0 0 16px;
}


	
}



@media only screen and (max-width: 768px) {

	
/*	---------------------------------------------------------------------------------------------------- */

	

/*	Header		---------------------------------------------------------------------------------------------------- */
    


 /*	Navi		---------------------------------------------------------------------------------------------------- */



/*	Footer		---------------------------------------------------------------------------------------------------- */

footer span {
	margin:0 0 30px;
}
footer nav {
	font-size: 0.9375em;
    letter-spacing: 0;
}
footer nav em, footer nav p {
    float: none;
    width: 100%;
}
footer nav em {
    padding:0 0 20px;
}
footer nav p {
    padding:20px 0 0;
	border-top: 1px dashed rgba(248,248,78,0.5);    
}
footer nav a {
    padding:0 0 0 20px;
}
footer h1 {
	font-size: 30px;
}
footer p {
	font-size: 1em;
}

}


@media only screen and (max-width: 640px) {
	
/*	---------------------------------------------------------------------------------------------------- */

a.scrollup {
	width: 40px;
	height:40px;
	right:20px;
	bottom: 60px;
	font-size: 40px;
	line-height:40px;
}

/*	Header		---------------------------------------------------------------------------------------------------- */

header {
	position: absolute;
	height: 130px;
}
header div.wrapper {
	height:40px;
	margin:35px auto;
    border-top: 2px solid #0C0247;
    border-bottom: 2px solid #0C0247;
}
.navi {
	line-height: 40px;
	height:40px;
	width: calc(50% - 55px);
}
.navi a.mobile {
	font-size: 30px;
}
.navi.left a.mobile {
	padding:0 20px 0 0;
}
.navi.right a.mobile {
	padding:0 0 0 20px;
}
.navi a.mobile i {
    vertical-align: -3px;
}

.logo {
	line-height: 110px;    
	width: 110px;
	height:110px;
	background-image: url(../img/tc_blaugelb_2.png);
    background-size:110px 110px;
	margin:-35px auto;
}
/* Retina */
@media (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.logo {
	background-image: url(../img/tc_blaugelb_2@2x.png);
}
}


/*	Navi		---------------------------------------------------------------------------------------------------- */

	
	
/*	Footer		---------------------------------------------------------------------------------------------------- */

footer div {
	padding:20px;
}
footer span {
    float: none;
	width: 100%;
	padding:0;
	margin:0 auto 20px;
}
footer span:first-of-type {
	padding: 0;
	border-bottom: 1px dashed rgba(248,248,78,0.5);    
	text-align: left;
}
footer nav {
	padding:20px 0 0;
	font-size: 0.875em;
}
footer h1 {
	font-size: 24px;
	margin: 0 auto 20px;
}
footer p {
	font-size: 0.9375em;
    max-width: 400px;
}
footer nav a {
    padding:0 0 0 15px;
}
	
}

@media only screen and (max-width: 480px) {

/*	Header		---------------------------------------------------------------------------------------------------- */



/*	Navi		---------------------------------------------------------------------------------------------------- */


nav.main ul {
	padding:20px 20px 0;
}
nav.main li {
	font-size: 18px;
	line-height: 20px;
	margin:0 0 10px;
}
a.menu-close {
	font-size: 30px;
	padding:0 0 20px;
}
    
	
/*	Footer		---------------------------------------------------------------------------------------------------- */

footer div {
	padding:10px;
}  
footer h1 {
	font-size: 20px;
}
footer p {
	font-size: 0.9375em;
    max-width: 100%;
}
footer nav {
	font-size: 0.875em;
}
footer nav p,
footer nav em {
	width: 100%;
}
footer nav a {
    padding:0 0 0 10px;
}
	
}


@media only screen and (max-width: 440px) {

/*	Header		---------------------------------------------------------------------------------------------------- */


}


/* Farbe
Blau = #0C0247 / rgba(12,2,71,1.00)
Gelb = #F8F84E / rgba(248,248,78,1.00)
Hellgelb = #FDFDD9
*/