@charset "UTF-8";
/* CSS Document */

/* alle Ränder auf 0 setzen */
* {
	margin:0;
	padding:0;
	border:none;
}

/* Seiten-Aufbau (Layout) */
html {
	height:99%;
}
body {
	overflow:auto;
}

header, main, footer {
	padding:4px;
	display:flex;
}


header {
	min-height:36px;
	/*border:1px solid blue;*/
	    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    padding: 10px 20px;
}

main {
	flex-direction:column;
}

footer {
	flex-direction:column;	
}


.wrapper {
	display:block;
	width: 1100px;
	margin: 0 auto;
	background-color: rgba(255, 255, 255, 0.6);
	/*border:1px dotted orange;	*/
}

.flexcontainer {
	display:flex;
	flex-direction:row;
}

.flexitem {
	flex-basis: left;
	margin-right: 8px;
	border:1px solid #ccc;
	border-radius:8px;
	padding:4px;
}

section {
	display:flex;
	flex-direction:column;
	align-items: flex-start;
}

article {
	border:1px solid #bbb;
	border-radius:4px;
	margin: 4px;
	display:flex;
	flex-direction:column;
	padding:2px 8px 2px 8px;
	width:100%;
}

.logo
{
	 flex: 0;
}

img.logo {
    width: 350px;
    height: auto;
	position:relative;
	bottom:1px;
	left:1px;
	display: block;
}


/* nur so breit wie nötig */
.name {
	white-space: nowrap;
    font-size: 1.8rem;
    font-weight: bold;
	margin-right: 12px;       /* Abstand zum Logo */
}

.menu{
	flex: 1;
    display: flex;
    justify-content: flex-end;

    background: none;
    border: none;
    color: white;
    font-size: 2rem;
    cursor: pointer;
}


/*
	media size:
	über 1024 Pixel = Standard
    bis zu 1024 Pixel (1024 : 16 = 64em)
    bis zu 800 Pixel (800 : 16 = 50em)
    bis zu 480 Pixel (480 : 16 = 30em)
*/


@media screen and (max-width: 1199px) {
	body {
	  font-size: 90%;
	}

	section {
		display:flex;
		flex-direction:column;
		align-items: flex-start;
	}
	.wrapper {
		width: 900px;
	}
	img.logo {
		width: 300px;
		height: auto;
    }

}

@media screen and (max-width: 959px) {
	body {
	   font-size: 75%;
	}
	
   	section {
		display:flex;
		flex-direction:column;
		align-items: flex-start;
	}
	.wrapper {
		width: 760px;
	}	
	img.logo {
		width: 250px;
		height: auto;
    }

}


@media screen and (max-width: 799px) {
	body {
	   font-size: 75%;
	}
	
   	section {
		display:flex;
		flex-direction:column;
		align-items: flex-start;
	}
	.wrapper {
		width: 450px;
	}
		img.logo {
		width: 200px;
		height: auto;
    }

}
@media screen and (max-width: 480px) {
	body {
		font-size: 50%;
	}
	
  	section {
		display:flex;
		flex-direction:column;
		align-items: flex-start;
	}
	.wrapper {
		width: 420px;
	}
	img.logo {
		width: 150px;
		height: auto;
    }

}