/* --------------------------------------------------
   reset
-------------------------------------------------- */

* { 
	box-sizing:border-box;
	outline:0;
}

html { 
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,
b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }

ol, ul { list-style: none; }

table {
	border-collapse: collapse;
	border-spacing: 0;
}

::selection { background:black; color:white; }
::-moz-selection { background:black; color:white; }






/* --------------------------------------------------
   font import
-------------------------------------------------- */

@font-face {
    font-family: 'Bebas Neue';
    src: url('fonts/bebasneue_light-webfont.eot');
    src: url('fonts/bebasneue_light-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/bebasneue_light-webfont.woff2') format('woff2'),
         url('fonts/bebasneue_light-webfont.woff') format('woff'),
         url('fonts/bebasneue_light-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Bebas Neue';
    src: url('fonts/bebasneue_bold-webfont.eot');
    src: url('fonts/bebasneue_bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/bebasneue_bold-webfont.woff2') format('woff2'),
         url('fonts/bebasneue_bold-webfont.woff') format('woff'),
         url('fonts/bebasneue_bold-webfont.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'PT Serif';
    src: url('fonts/pt_serif-web-regular-webfont.eot');
    src: url('fonts/pt_serif-web-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/pt_serif-web-regular-webfont.woff2') format('woff2'),
         url('fonts/pt_serif-web-regular-webfont.woff') format('woff'),
         url('fonts/pt_serif-web-regular-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'PT Serif';
    src: url('fonts/pt_serif-web-italic-webfont.eot');
    src: url('fonts/pt_serif-web-italic-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/pt_serif-web-italic-webfont.woff2') format('woff2'),
         url('fonts/pt_serif-web-italic-webfont.woff') format('woff'),
         url('fonts/pt_serif-web-italic-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: 'PT Serif';
    src: url('fonts/pt_serif-web-bold-webfont.eot');
    src: url('fonts/pt_serif-web-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/pt_serif-web-bold-webfont.woff2') format('woff2'),
         url('fonts/pt_serif-web-bold-webfont.woff') format('woff'),
         url('fonts/pt_serif-web-bold-webfont.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'PT Serif';
    src: url('fonts/pt_serif-web-bolditalic-webfont.eot');
    src: url('fonts/pt_serif-web-bolditalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/pt_serif-web-bolditalic-webfont.woff2') format('woff2'),
         url('fonts/pt_serif-web-bolditalic-webfont.woff') format('woff'),
         url('fonts/pt_serif-web-bolditalic-webfont.ttf') format('truetype');
    font-weight: bold;
    font-style: italic;
}







/* --------------------------------------------------
   typography
-------------------------------------------------- */

html {
	font-size:16px;
}

	@media only screen and (min-width :  600px) { html { font-size:17px; } }
	@media only screen and (min-width :  800px) { html { font-size:18px; } }
	@media only screen and (min-width : 1000px) { html { font-size:19px; } }
	@media only screen and (min-width : 1200px) { html { font-size:20px; } }

body {
	font-family:'PT Serif',serif;
	font-size:1rem;
	line-height:1.6;
	color:#333;
}

h1,h2,h3,.headline {
	font-family:'Bebas Neue',sans-serif;
	text-transform:uppercase;
	line-height:1;
	font-weight: bold;
}

h1 {
	font-size:4.5rem;
	margin-bottom:.7em;
}

h2 {
	font-size:2.5rem;
	margin-bottom:.8em;
}

h3 {
	font-size:2rem;
}

p {
	margin:1.6rem 0;
}

p:first-child {
	margin-top:0;
}

p:last-child {
	margin-bottom:0;
}

a {
	text-decoration:none;
	font-weight:bold;
	color:black;
}

strong {
	font-weight:bold;
}

em {
	font-style:italic;
}





/* --------------------------------------------------
   general layout
-------------------------------------------------- */

body {
	background:url(img/flecktarn.jpg);
	background-size:cover;
	background-attachment: fixed;
}

.content {
	max-width:60rem;
	margin:0 auto;
}




/* --------------------------------------------------
   header
-------------------------------------------------- */

.header {
	height:100vh;
	display:flex;
	align-items:center;
	justify-content:center;
}

.logo img {
	display:block;
	width:80vw;
	min-width:18rem;
	max-width:29rem;
	height:auto;
}




/* --------------------------------------------------
   argumente
-------------------------------------------------- */

.argumente {
	margin-bottom:5rem;
}

	.argument {
		background:white;
		padding:2rem;
		box-shadow:0 4px 4px rgba(0,0,0,.5);
		margin:1rem auto;
		max-width:30rem;
	}

		.argument .icon {
			display:block;
			margin:1rem auto;
		}

		.argument h2 {
			text-align: center;
		}

@media only screen and (min-width : 1000px) {
	.argumente {
		display:flex;
		justify-content: space-around;
	}

		.argument {
			width:45%;
			margin:0;
		}
}




/* --------------------------------------------------
   zahlen
-------------------------------------------------- */

.zahlen ul {
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
	list-style: none;
	margin:5rem 0 2.5rem;
}

	.zahlen li {
		width:50%;
	}

@media only screen and (min-width : 600px) {
	.zahlen li { width:33%; }
}
@media only screen and (min-width : 900px) {
	.zahlen li { width: 25%; }
}

		.zahlen li:nth-child(1) a { background-color:#001739; }
		.zahlen li:nth-child(2) a { background-color:#1d1d1b; }
		.zahlen li:nth-child(3) a { background-color:#540800; }
		.zahlen li:nth-child(4) a { background-color:#004380; }
		.zahlen li:nth-child(5) a { background-color:#1d1d1b; }
		.zahlen li:nth-child(6) a { background-color:#d17800; }
		.zahlen li:nth-child(7) a { background-color:#001739; }
		.zahlen li:nth-child(8) a { background-color:#473928; }

		.zahlen li:nth-child(1) a:hover { background-color:#002152; }
		.zahlen li:nth-child(2) a:hover { background-color:#363632; }
		.zahlen li:nth-child(3) a:hover { background-color:#6e0b00; }
		.zahlen li:nth-child(4) a:hover { background-color:#004f99; }
		.zahlen li:nth-child(5) a:hover { background-color:#363632; }
		.zahlen li:nth-child(6) a:hover { background-color:#eb8500; }
		.zahlen li:nth-child(7) a:hover { background-color:#002152; }
		.zahlen li:nth-child(8) a:hover { background-color:#614e36; }

		.zahlen a {
			display:block;
			height:11.5rem;
			color:white;
			position:relative;
			text-align: center;
			padding:1rem;
			transition:all .3s ease;
			overflow:hidden;
		}

		.zahlen li a .zahlen-text::after {
			content:'zur Quelle';
			display:block;
			height:1.5rem;
			bottom:-13.5rem;
			left:-1rem;
			right:-1rem;
			padding:5rem 1rem;
			text-align:center;
			background:rgba(0,0,0,.75);
			color:white;
			position:absolute;
			opacity:0;
			transition:all .3s ease;
		}

		.zahlen li a:hover .zahlen-text::after {
			bottom:-1rem;
			opacity:1;
		}

		.zahlen-zahl {
			font-size:4.5rem;
		}

		.zahlen-text {
			position:absolute;
			bottom:1rem;
			left:1rem;
			right:1rem;
			font-size:1.25rem;
		}

.zahlen p.quelle {
	color:white;
	text-shadow:0 4px 4px rgba(0,0,0,.5);
	font-size:1.2rem;
	text-align:center;
	margin-bottom:5rem;
}




/* --------------------------------------------------
   zitate
-------------------------------------------------- */

.zitate ul {
	list-style: none;
	margin:5rem 0;
}

	.zitate li {
		display:flex;
		max-width:30rem;
		margin:0 auto;
	}

		.zitat-portrait {
			flex:2;
			padding-right:1rem;
		}

			.zitat-portrait img {
				display:block;
				width:100%;
				height:auto;
				border:4px solid white;
				border-radius:50%;
				box-shadow:0 4px 4px rgba(0,0,0,.5);
			}

		.zitat-inhalt {
			flex:5;
			background:white;
			padding:1rem;
			margin-top:1rem;
			font-style:italic;
			box-shadow:0 4px 4px rgba(0,0,0,.5);
		}

		.zitat-name {
			font-style:normal;
			font-size:.8rem;
		}

@media only screen and (min-width : 900px) {
	.zitate ul { overflow:auto; }
	.zitate li { float:left; width: 50%; padding:0 3%; margin:0; }
}




/* --------------------------------------------------
   berufe
-------------------------------------------------- */

.berufe ul {
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
	list-style: none;
	margin:5rem 0;
}

	.berufe li {
		width:50%;
		height:11.5rem;
		color:white;
		position:relative;
		text-align: center;
		padding:1rem;
		background-size: cover;
		background-position: 50% 50%;
	}

@media only screen and (min-width : 600px) {
	.berufe li { width:33%; }
}
@media only screen and (min-width : 900px) {
	.berufe li { width: 25%; }
}

		.beruf-name {
			position:absolute;
			bottom:0;
			left:0;
			right:0;
			padding:1rem;
			font-size:1.25rem;
			background:rgba(0,0,0,.75);
		}


.gutejobs {
	max-width:40rem;
	margin:0 auto;
	padding:0 3rem;
	color:white;
	text-shadow:0 3px 3px rgba(0,0,0,.5);
	text-align:center;
}

.counter {
	background:#00457b;
	color:white;
	text-align:center;
	padding:1rem;
}

footer {
	padding:2rem;
	background:rgba(255,255,255,.8);
	color:#333;
	text-align:center;
	font-size:.7rem;
}