body{background-color:#faedd3;}

header,footer,div#quickjump>div{box-shadow:5px 5px 20px rgba(0,0,0,.5);}
main,img.ftbild,div.facebook,img.titelbild,img.referenz,nav.quernav li a,div.steckbrief,a.sociallinks img,figure{box-shadow:3px 3px 7px rgba(0,0,0,.3);}
div.facebook,img.referenz,nav.quernav li a,div.steckbrief,img.ftbild,img.titelbild,div.suchbutton,figure{outline:1px solid #562039;}

header,footer,ul.mininav{position:fixed;}
header nav,header nav ul,main,footer>div,a.sociallinks img{position:absolute;}
header nav li,div.fbfueller,nav.quernav,nav.quernav li a,div#quickjump a,figure img{display:block;}
nav.quernav li,div.materialbeschreibung,img.bewertung,img.haerteskala{display:inline-block;}

header,footer,header nav li a,footer a,nav.quernav li a,header nav li.inactive a,div#quickjump a,div.copyright,div.impressum,div.steckbrief h4,figcaption{color:#fff;}
header nav li a,div.quickjumptitel,div.steckbrief p{color:#bcbbb5;}
nav.quernav li a:hover,div#quickjump a:hover{color:#562039;}
main,nav.quernav li a:hover,div#quickjump a:hover{background-color:#fff;}
header,footer,nav.quernav li a,div.steckbrief h4,div.steckbrief p,figcaption{background-color:#562039;}
div.fbfueller{background-color:#f5f6f7;}
div.suchbutton{background-color:#bcbbb5;}

header nav li,nav.quernav,nav.quernav li a,div.steckbrief h4,div.steckbrief p{text-align:center;}
div.steckbrief{float:right;}
header nav li{float:left;}
img.titelbild{clear:both;}

header{background-image:url("../elements/logo.svg");transform:rotate(-2deg);}
div.fbfueller{background-image:url("../elements/hglogo.svg");}
div.suchbutton{background-position:left;cursor:pointer;}
div#quickjump.open div.suchbutton,nav#mininav.open div.nav2button{background-image:url("../elements/closebutton.svg");}
nav.quernav li a{background-position:top;}
footer{transform:rotate(1deg);}

header,footer{z-index:10000;}
main{z-index:1000;}

h1{font-size:2.5em;}
h2,h3{font-size:1.5em;}
article>h4{font-size:1.25em;}
figcaption{font-size:.8em;line-height:1.1em;}
p,ul.stdliste>li{line-height:1.5em;}
a:hover{text-decoration:underline;}
a,nav li a:hover,div#quickjump a{text-decoration:none;}
ul.mininav li,nav.quernav li,div#quickjump li{list-style:none;}
div#quickjump a::before{content:"▶ ";}

nav[id] li a{transition:font-size .3s ease-out;}
nav.quernav li a,div#quickjump a{transition:background-color .5s,color .5s;}

header nav ul{left:0;}
main,div.copyright,div.impressum{top:0;}
a.sociallinks img{top:2px;}
a.twitchlink img,a.discordlink img{top:-2px;}
header nav,header nav ul{bottom:0;}
header nav ul,header nav li,div.steckbrief h4,div.steckbrief td,img.bewertung,img.haerteskala{margin:0;}
img.materialbeschreibungtitelbild~p:first-of-type{margin-top:0;}
img.ftbild,figure{margin-top:.25em;}
header nav ul,header nav li,ul.mininav,nav.quernav ul,div.steckbrief td,img.bewertung,img.haerteskala{padding:0;}
div.steckbrief h4{padding-top:3px;}
figcaption{padding:3px;}
div.facebook{width:351px;}

@media only screen and (min-width:1400px){
	div.filterbutton,div.nav2button{display:none;}
	
	div#quickjump,div.facebook{position:fixed;}
	div.suchbutton,div#quickjump ul,div#quickjump>div,div.quickjumptitel{position:absolute;}
	
	header,footer{left:50%;width:1300px;}
	header{top:-30px;margin-left:-630px;height:150px;background-size:1200px 110px;background-position:50px 30px;}
	header nav{left:370px;height:35px;}
	header nav ul{width:800px;}
	header nav li{width:200px;height:35px;line-height:35px;}
	header nav li a{transition:font-size .3s ease-out;}
	main{left:50%;width:1100px;min-height:calc(100vh - 210px);margin-left:-600px;padding:150px 50px 60px 50px;}

	p,article ul,h3,article>h4,div.home h2{margin-left:30px;margin-right:30px;}
	nav li.active a,nav.quernav li a,div.steckbrief h4{font-size:18px;}
	nav[id] li.inactive a,nav[id] li a:hover,div.facebook h2{font-size:24px;}
	ul.mininav li.active a{color:#645e52;}

	div.home{margin-left:400px;width:700px;}
	div.facebook{left:50%;top:260px;margin-left:-520px;}
	div.facebook h2{margin:10px}
	div.sitewithnav{margin-left:250px;}
	div.sitewithnav p,div.sitewithnav h3{margin-left:0;}
	div.sitewithnav p,div.sitewithnav h3{margin-right:0;}
	img.ftbild,figure{margin-bottom:15px;}
	img.ftbild.hochformat{width:250px;}
	img.ftbild.querformat{width:333px;}
	img.ftbild.quadrat{width:292px;}
	img.ftbild.hochformatk{width:150px;}
	img.ftbild.querformatk,figure{width:200px;}
	img.ftbild.quadratk{width:175px;}
	img.ftbild.rechts,figure.rechts{margin-left:15px;margin-right:30px;}
	img.ftbild.links,figure.links{margin-right:25px;}
	img.ftbild.links{margin-left:30px;}
	div.fbfueller{width:100%;height:1500px;margin:0;background-size:560px;background-position:-192px -15px;}
	article>img.titelbild{width:1040px;margin-left:30px;}
	div.sitewithnav img.titelbild,div.referstellt,img.materialbeschreibungtitelbild{width:850px;}

	ul.mininav{left:50%;top:50%;width:250px;margin-left:-550px;margin-top:-120px;}
	ul.mininav li{height:40px;}
	ul.mininav li,nav.quernav li{line-height:40px;}
	nav.quernav{margin-bottom:50px;}
	nav.quernav li{margin-left:10px;margin-right:10px;}
	nav.quernav li a{width:180px;padding-top:180px;background-size:180px;}

	img.referenz{max-width:850px;max-height:80vh;}
	div.referstellt{height:12px;font-size:12px;line-height:12px;}

	div.materialbeschreibung h3{margin-top:50px;}
	
	div.steckbrief{margin-left:30px;margin-bottom:10px;margin-top:1px;padding:10px;}
	div.steckbrief p{margin:0 0 10px 0;font-size:16px;}
	div.steckbrief td,img.bewertung,img.haerteskala{height:30px;}
	div.steckbrief td{font-size:14px;}
	div.steckbrief td:first-child{padding-right:10px;}
	img.bewertung{width:20px;}
	img.haerteskala{width:60px;}

	div.anker{margin:-160px 0 0 0;}
	div#quickjump>div:hover,div#quickjump.open>div{width:100%;height:100%;}
	div#quickjump{width:350px;right:50%;top:110px;margin-right:-630px;transform:rotate(3deg);}
	div#quickjump>div,div.quickjumptitel,div.suchbutton{top:0;}
	div#quickjump>div{overflow:hidden;background-color:#562039;outline:1px solid #562039;transition:height .5s,width .5s;}
	div.suchbutton{right:0;width:60px;height:60px;background-size:80px;}
	div#quickjump>div{right:0;width:60px;height:60px;}
	div.quickjumptitel,div#quickjump a{font-size:16px;}
	div.quickjumptitel{right:60px;width:250px;padding:10px 20px;line-height:20px;}
	div#quickjump ul{right:0;top:60px;width:350px;margin:0;padding:0;}
	div#quickjump a{width:310px;height:30px;padding:0 20px;line-height:30px;}
	
	footer{bottom:-15px;margin-left:-670px;height:50px;}
	div.copyright,div.impressum{height:30px;font-size:12px;line-height:30px;}
	div.copyright{left:80px;}
	div.impressum{right:80px;}
	a.fblink img,a.instalink img{width:40px;}
	a.fblink img{left:250px;}
	a.instalink img{left:305px;}
	a.twitterlink img,a.twitchlink img{width:46px;}
	a.twitterlink img{left:355px;}
	a.twitchlink img{left:411px;border-radius:23px;}
	a.discordlink img{left:467px;width:38px;}
}
@media only screen and (max-width:1399px){
	div.facebook h2,li.title,div.quickjumptitel{display:none;}
	
	header,footer{left:-2.5vw;width:105vw;}
	header{top:-2.5vw;height:12vw;background-size:95vw;background-position:5vw 2vw;}
	header nav{left:27.5vw;height:3vw;}
	header nav ul{width:70vw;}
	header nav li{width:17.5vw;height:3vw;line-height:3vw;}
	main{left:5vw;width:81vw;min-height:calc(100vh - 15vw);padding:10vw 4vw 5vw 4vw;}
	
	p,article ul,article>h4,img.referenz,div.referstellt{margin-left:3vw;margin-right:3vw;}
	nav li.active a,ul.mininav li.inactive a,div.steckbrief h4{font-size:1.75vw;}
	nav#nav li.inactive a,nav#nav li a:hover,div.facebook h2{font-size:2.2vw;}
	nav.quernav li a{font-size:1.5vw;}
	div.facebook{float:right;}
	
	img.ftbild,div.facebook{margin-bottom:1vw;}
	img.ftbild.hochformat{width:24vw;}
	img.ftbild.querformat{width:32vw;}
	img.ftbild.quadrat{width:28vw;}
	img.ftbild.hochformatk{width:13vw;}
	img.ftbild.querformatk,figure{width:17vw;}
	img.ftbild.quadratk{width:15vw;}
	img.ftbild.rechts,div.facebook,figure.rechts{margin-left:2vw;margin-right:3vw;}
	img.ftbild.links,figure.links{margin-left:3vw;margin-right:2vw;}
	
	div.sitewithnav img.titelbild,img.materialbeschreibungtitelbild{width:81vw;}
	
	div.filterbutton,div.nav2button,ul.mininav li a,div#quickjump li a{outline:1px solid #562039;}
	div.filterbutton,div.nav2button,div.suchbutton,ul.mininav li,div#quickjump li{box-shadow:3px 3px 7px rgba(0,0,0,.3);}
	div.filterbutton,div.nav2button,div.suchbutton,div#quickjump ul{position:fixed}
	div.filterbutton,div.nav2button,div.suchbutton{width:6vw;height:4.5vw;}
	div.filterbutton,div.nav2button{background-color:#bcbbb5;background-size:6vw;cursor:pointer;}
	div.filterbutton,div.nav2button{left:-1.5vw;top:calc(50vh - 17vw);transform:rotate(6deg);background-position:1.5vw 0;}
	ul.mininav{left:-25vw;top:calc(50vh - 12vw);width:25vw;transition:left .5s,transform .5s;transform:rotate(-4deg);}
	ul.mininav:hover,nav#mininav.open ul{left:-8vw;transform:rotate(2deg);}
	ul.mininav li,div#quickjump li{margin-bottom:.5vw;}
	ul.mininav li a,div#quickjump li a{display:block;background-color:#562039;}
	ul.mininav li a{width:23vw;height:4vw;padding-right:2vw;text-align:right;transition:background-color .5s,color .5s;}
	ul.mininav li.active a{color:#fff;}
	ul.mininav li a:hover,ul.mininav li.inactive a,div#quickjump li a:hover{color:#562039;background-color:#fff;}
	ul.mininav li{line-height:4vw;}
	div.suchbutton{right:-1.5vw;top:12vw;transform:rotate(-7deg);}
	div#quickjump ul{right:-35vw;top:17vw;width:35vw;transition:right .5s,transform .5s;transform:rotate(2deg);}
	div#quickjump ul:hover,div#quickjump.open ul{right:-8vw;transform:rotate(-5deg);}
	div#quickjump li a{width:34vw;padding-left:1vw;font-size:1.5vw;}
	div#quickjump.buntstift li a{height:2vw;line-height:2vw;}
	div#quickjump.pastellstift li a,div#quickjump.pastell li a{height:3vw;line-height:3vw;}
	
	nav.quernav{margin-bottom:4vw;}
	nav.quernav li{margin-left:1vw;margin-right:1vw;}
	nav.quernav li a{width:12.5vw;padding-top:12.5vw;line-height:3vw;background-size:12.5vw;}
	
	img.referenz{max-width:75vw;max-height:calc(100vh - 15vw);}
	div.materialbeschreibung h3{margin-top:4vw;}
	
	div.steckbrief{margin:1px 3vw 1vw 3vw;padding:1vw;}
	div.steckbrief p{margin:0 0 1vw 0;font-size:1.5vw;}
	div.steckbrief td,img.bewertung,img.haerteskala{height:3vw;}
	div.steckbrief td{font-size:1.3vw;}
	div.steckbrief td:first-child{padding-right:1vw;}
	img.bewertung{width:2vw;}
	img.haerteskala{width:6vw;}
	
	div.anker{margin:-12vw 0 0 0;}
	
	footer{bottom:-2.5vw;height:6vw;}
	div.copyright,div.impressum{top:0;height:3vw;font-size:1.25vw;line-height:3vw;}
	div.copyright{left:4vw;}
	div.impressum{right:6vw;}
	a.fblink img,a.instalink img{width:3.5vw;}
	a.fblink img{left:18vw;}
	a.instalink img{left:22.5vw;}
	a.twitterlink img,a.twitchlink img{width:4vw;}
	a.twitterlink img{left:26.5vw;}
	a.twitchlink img{left:31vw;border-radius:2vw;}
	a.discordlink img{left:35.5vw;width:3.3vw;}
}