/*
Name: style.css
Description: CSS-Datei für das Webdesign Tutorial.
Version: 1.0
*/

/* ################# STANDARTEINSTELLUNGEN ################# */
body {
    font-family: 'Roboto', sans-serif;
    background-color: #aaa9a7;
}
h1, p {
    margin: 0;
}

/* ################# Header ################# */

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

header {
        width: 100%;
        background-color: #383838;
}
header .flex-box-xs{
		item-align: center;
		margin-bottom: 15px;		
}
header .logo {
		margin-bottom: 15px;
		margin-top: 15px;
		img-align: center;
		
}
header .logo img {
        height: 110px;
        border-radius: 10px;
		display: block;
		margin-left: auto;
		margin-right: auto;
}
header .titel {
		margin-top:10px;
        color:#db241c;
		text-align: center;
}
header .login {
        color:#db241c;
		text-align: center;
}		
header .login a {
        color: #db241c;
		text-decoration: none;
}
header .login a:hover {
        color: #00923f;
}
main .main-box-xl {
		align-items: center;
}
main .gruppe {
		display: block;
		float: top; 
		min-width: 170px;
}
main .titel {
	    width: flex;
		text-align: center;
		background-color: #aaa9a7;
		display: block;
		float: top;
}
main .list {
		background-color: #E6E6E6;
		margin: 15px 15px 15px 0;
}
main .list ul li {
		list-style: none;
		font-size: 16px;	
}
main .xs-box-10 {
		background-color: #fff;
		display: flex;
		flex-wrap: wrap;
		justify-content: center; 
}
main .article {
        height: 300px;
		width: 204px;
		border: solid 1px;		
		margin:15px 0 0 15px;
		float:left;
		display: inline-block;
}
main .article:hover {
		border: solid 1px;
        border-color: #00923f;		
}	
main .article .image {  
		height:155px;
		width: 100%;
}	
main .article .image img {
        max-width: 200px;
		display: block;
		margin-left: auto;
		margin-right: auto;
		max-height: 154px;
}
main .article .image img:hover {
		-ms-transform: scale(2); /* IE 9 */
		-webkit-transform: scale(2); /* Safari 3-8 */
		transform: scale(2); 
        border-radius: 15px;		
}
main .article .det {
		height: 140px;
		width: 98%;
        background-color: #E6E6E6;
		float:bottom;
}
main .article .det .nr {
		height: 17%;
		width: 50%;		
		float: left;
		
}	
main .article .det .spur {
		height: 17%;
		width: 50%;		
		float: right;
		text-align: right;	
}
main .article .det .bezeichnung {
		width: 100%;
		height: 44%;
		float: left;
}
main .article .det .farbe {
		height: 18%;
		width: 100%;
		float: left;
}
main .article .det .preis {
		height: 20%;
		float: right;
		font-size: 22px;
}