/*
Theme Name: SchönerHausen
Author: Hannes Welk
Description: WordPress Theme für SchönerHausen
*/

/* --------------------------------------------------
   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;
}


@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  src: url('fonts/montserrat-v12-latin-700.eot'); /* IE9 Compat Modes */
  src: local('Montserrat Bold'), local('Montserrat-Bold'),
       url('fonts/montserrat-v12-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/montserrat-v12-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/montserrat-v12-latin-700.woff') format('woff'), /* Modern Browsers */
       url('fonts/montserrat-v12-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/montserrat-v12-latin-700.svg#Montserrat') format('svg'); /* Legacy iOS */
}

@font-face {
  font-family: 'Roboto Slab';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/roboto-slab-v7-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Roboto Slab Regular'), local('RobotoSlab-Regular'),
       url('fonts/roboto-slab-v7-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/roboto-slab-v7-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/roboto-slab-v7-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('fonts/roboto-slab-v7-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/roboto-slab-v7-latin-regular.svg#RobotoSlab') format('svg'); /* Legacy iOS */
}

@font-face {
  font-family: 'Roboto Slab';
  font-style: normal;
  font-weight: 700;
  src: url('fonts/roboto-slab-v7-latin-700.eot'); /* IE9 Compat Modes */
  src: local('Roboto Slab Bold'), local('RobotoSlab-Bold'),
       url('fonts/roboto-slab-v7-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/roboto-slab-v7-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/roboto-slab-v7-latin-700.woff') format('woff'), /* Modern Browsers */
       url('fonts/roboto-slab-v7-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/roboto-slab-v7-latin-700.svg#RobotoSlab') format('svg'); /* Legacy iOS */
}





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

html {
	font-size:15px;
}

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

body {
	font-family:'Roboto Slab','Georgia',sans-serif;
	font-size:1rem;
	line-height:1.5;
}

h1, h2, h3, h4, .headline, .button {
	font-family:'Montserrat','Helvetica',sans-serif;
	text-transform:uppercase;
	line-height:1;
	font-weight:700;
}

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

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

h2:not(:first-child) {
	margin-top:.666em;
}

h3 {
	font-size:1.3rem;
}

h4 {
	font-size:.9rem;
}

p {
	margin:1em 0;
}

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

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

.button {
	font-size:.8rem;
	padding:.5rem 1rem;
	border-style:solid;
	border-width:2px;
	text-decoration:none;
}

strong {
	font-weight:bold;
}






/* --------------------------------------------------
   colors
-------------------------------------------------- */


body { background-color: #858488; color: #28262c; }
a { color: #858488; }
.button {	border-color: #858488; }
.block-illustration img {	background-color: #47454b; }


.projekt { color: #353f1b; }
.projekt a { color: #a3be5f; }
.projekt .button {	border-color: #a3be5f; }
.projekt .block-illustration img {	background-color: #9e9abe; }
.projekt, .primarynav a[href='/projekt'] { background-color: #a3be5f; }
.frontpage .projekt .button { color: #353f1b; border-color:#353f1b; }


.blog, .single-post { color: #5a221f; }
.blog a, .single-post a { color: #d2514b; }
.blog .button, .single-post button { border-color: #d2514b; }
.blog, .single-post, .primarynav a[href='/aktuelles'] { background-color: #d2514b; }
.frontpage .blog .button { color: #5a221f; border-color:#5a221f; }


.direktkredit {	color: #2b4655; }
.direktkredit a { color: #66a3c6; }
.direktkredit .button {	border-color: #66a3c6; }
.direktkredit .block-illustration img {	background-color: #e6c056; }
.direktkredit, .primarynav a[href='/direktkredit'] { background-color: #66a3c6; }
.frontpage .direktkredit .button { color: #2b4655; border-color:#2b4655; }


.visionen {	color: #635221; }
.visionen a { color: #e8c04f; }
.visionen .button {	border-color: #e8c04f; }
.visionen .block-illustration img {	background-color: #69a3c5; }
.visionen, .primarynav a[href='/visionen'] { background-color: #e8c04f; }
.frontpage .visionen .button { color: #635221; border-color:#635221; }


.interesse {	color: #434252; }
.interesse a { color: #9d9abf; }
.interesse .button {	border-color: #9d9abf; }
.interesse .block-illustration img {	background-color: #d14d4b; }
.interesse, .primarynav a[href='/interesse'] { background-color: #9d9abf; }
.frontpage .interesse .button { color: #434252; border-color:#434252; }





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

body {
	background-image: url(img/general/sh-logo-dunkel.png);
	background-position: top left;
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-size: 25rem auto;
}

.content {
	max-width:1000px;
	margin:5rem auto;
}





/* --------------------------------------------------
   frontpage
-------------------------------------------------- */

.frontpage::before {
	display:block;
	content:'';
	background-image: url(img/general/sh-logo-kreis.png);
	background-position: top left;
	background-repeat: no-repeat;
	background-size: 100% auto;
	position:absolute;
	width:40%;
	max-width:278px;
	padding-bottom:26%;
	height:0;
	z-index:2;
}
	
@media only screen and (min-width :  800px) { 

	.frontpage::before {
		padding-bottom:200px;
	}
}

.frontpage-sections {
	list-style: none;
}

	.section {
		max-width:1400px;
		margin:0 auto;
	}

		.section-image {
			background-size:cover;
			background-position:50% 50%;
			padding-bottom:66%;
			opacity:.9;
		}

			.section-content-text {
				padding:4rem 6%;
			}

				.section-content-text h1 {
					color:white;
				}

				.section-content-text .button {
					display:inline-block;
					margin-top:1rem;
				}

				.section-content-text .button:hover {
					background:rgba(255,255,255,.2);
				}
	
@media only screen and (min-width :  800px) { 
	
	.section {
		display:flex;
	}

	.frontpage-sections li:nth-child(even) .section {
	  flex-direction: row-reverse;
	}

		.section-image, .section-content {
			flex:1;
		}

		.section-image {
			padding:0;
		}
}




/* --------------------------------------------------
   blocks
-------------------------------------------------- */


.blocks {
	list-style:none;
}

	.blocks > li {
		padding:0 3%;
		margin-bottom:5rem;
	}

	.blocks > li:last-child {
		margin-bottom:0;
	}

	.block-illustration {
		margin-bottom:2rem;
	}

		.block-illustration img {
			display:block;
			width:100%;
			max-width:15rem;
			height:auto;
			margin:0 auto;
			border-radius:50%;
			animation:inScale .4s ease;
		}

			@keyframes inScale {
				from { transform:scale(.3); opacity:0; }
				to   { transform:scale(1);  opacity:1; }
			}


		.block-content-text {
			padding:2rem 6%;
			background:white;
			color:#47454b;
			animation:inFade .4s ease;
		}

			@keyframes inFade {
				from { transform:translate(0,3rem); opacity:0; }
				to   { transform:translate(0,0);     opacity:1; }
			}
	
@media only screen and (min-width :  800px) { 
	
	.block {
		display:flex;
	}

	.blocks li:nth-child(even) .block {
	  flex-direction: row-reverse;
	}

	.block-illustration {
		flex:1;
		margin-bottom:0;
		padding-right:6%;
	}

	.blocks li:nth-child(even) .block-illustration {
		padding-right:0;
		padding-left:6%;
	}

	.block-content {
		flex:3;
	}
}





/* --------------------------------------------------
   blog
-------------------------------------------------- */

.blocks.blog {
	background:none;
}

.blog .block {
	max-width:25rem;
	margin:0 auto;
}

.blog .block-illustration {
	padding:0;
	margin:0;
}

.blog-thumbnail {
	background-size:cover;
	background-position:50% 50%;
	padding-bottom:66%;
}

.blog-date {
	text-align:right;
	opacity:.8;
}

.blog-readmore {
	display:inline-block;
	margin-top:1rem;
}

.wp-pagenavi {
	margin-top:3rem;
	text-align:center;
}

	.wp-pagenavi .pages {
		display:none;
	}

	.blog .wp-pagenavi a,
	.blog .wp-pagenavi span {
		border-width:2px;
		border-color:white !important;
		font-size:.8rem;
		padding:.5rem 1rem;
		margin:0 .25rem;
		font-family:'Montserrat','Helvetica',sans-serif;
		text-transform:uppercase;
		line-height:1;
		font-weight:700;
	}

	.blog .wp-pagenavi span {
		background-color:white;
		color:#d2514b;
	}

	.blog .wp-pagenavi a {
		color:white;
	}

	.blog .wp-pagenavi a:hover {
		background:rgba(0,0,0,.25);
	}
	
@media only screen and (min-width :  800px) { 

	.blog .block {
		max-width:100%;
	}

	.blog .block-illustration {
		flex:1;
	}

		.blog-thumbnail {
			padding-bottom:100%;
		}

	.blog .blocks li:nth-child(even) .block-illustration {
		padding-left:0;
	}

	.blog .block-content {
		flex:2;
	}
}




/* --------------------------------------------------
   post
-------------------------------------------------- */

.post {
	max-width:40rem;
	padding:0 3%;
	margin:0 auto;
}

	.post-thumbnail {
		background-size:cover;
		background-position:50% 50%;
		padding-bottom:66%;
	}

	.post-content {
		padding:2rem 6%;
		background:white;
		color:#47454b;
	}

	.post-date {
		text-align:right;
		opacity:.8;
	}

.postnav {
	max-width:40rem;
	padding:0 3%;
	margin:0 auto;
}

	.postnav li {
		background:white;
		color:#47454b;
		text-align:center;
		font-family:'Montserrat','Helvetica',sans-serif;
		text-transform:uppercase;
		font-weight:700;
		font-size:.8rem;
		padding:.666rem 1rem;
		margin:.5rem 0;
	}

		.postnav a {
			text-decoration:none;
		}



/* --------------------------------------------------
   gallery
-------------------------------------------------- */

.gallery {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin:2rem 0;
}

	.gallery li {
		padding:.35rem;
	}

		.gallery li a,
		.gallery li a img {
			display:block;
		}

			.gallery li a img {
				display:block;
				width:7rem;
				height:7rem;
			}




/* --------------------------------------------------
   faq
-------------------------------------------------- */

.faq {
	list-style-type:none;
	margin-top:3rem;
}

	.faq li {
		padding:1rem 2%;
	}

		.faq-question {
			text-align:left;
		}

			.faq-question h3,
			.faq-question a {
				color:white;
			}
	
@media only screen and (min-width :  600px) { 

	.faq {
		text-align:center;
	}

		.faq li {
			display:inline-block;
			width:48%;
			vertical-align:top;
		}
}



/* --------------------------------------------------
   direktkredit kontakt
-------------------------------------------------- */

	.direktkredit-kontakt {
		background:#47454b;
		color:#dbdbdb;
		text-align:center;
		font-family:'Montserrat','Helvetica',sans-serif;
		text-transform:uppercase;
		font-weight:700;
		font-size:.8rem;
		padding:.666rem 1rem;
		margin:5rem auto;
		width:100%;
	}

	.direktkredit-kontakt:first-child {
		margin-top:0;
	}

		.direktkredit-kontakt a {
			text-decoration:none;
		}
	
@media only screen and (min-width :  600px) { 

	.direktkredit-kontakt {
		width:80%;
	}
}






/* --------------------------------------------------
   top navigation
-------------------------------------------------- */

.primarynav-top {
	position:relative;
	z-index:10;
	width:100%;
}

.primarynav-top ul {
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
	list-style:none;
	width:100%;
}

.primarynav-top li {
	flex:1 1 12rem;
	min-width:0;
}

.primarynav-top a {
	display:block;
	height:100%;
	padding:1rem .8rem;
	text-align:center;
	color:#fff !important;
	font-family:'Montserrat','Helvetica',sans-serif;
	font-size:.8rem;
	line-height:1.2;
	text-transform:uppercase;
	text-decoration:none;
	transition:filter .2s ease, opacity .2s ease;
}

.primarynav-top a:hover,
.primarynav-top a:focus {
	filter:brightness(.92);
}

.primarynav-top .nav-startseite a { background:#2d2d2d; color:#fff !important; }
.primarynav-top .nav-projekt a { background:#a3be5f; color:#353f1b !important; }
.primarynav-top .nav-aktuelles a { background:#d2514b; color:#5a221f !important; }
.primarynav-top .nav-direktkredit a { background:#66a3c6; color:#2b4655 !important; }
.primarynav-top .nav-visionen a { background:#e8c04f; color:#635221 !important; }

@media only screen and (max-width :  599px) {
	.primarynav-top a {
		padding:.8rem .5rem;
		font-size:.7rem;
	}
}

/* --------------------------------------------------
   footer
-------------------------------------------------- */

footer {
	background:#2d2d2d;
}

	footer a {
		color:white !important;
		font-family:'Montserrat','Helvetica',sans-serif;
		font-size:.8rem;
		text-transform:uppercase;
		text-decoration:none;
	}

.primarynav ul {
	list-style-type:none;
}

	.primarynav a {
		display:block;
		text-align:center;
		padding:1rem 0;
		transition:all .3s ease;
	}

	.primarynav a:hover {
	}

.secondarynav ul {
	list-style:none;
	text-align:center;
	padding:1rem 0;
}

	.secondarynav li {
		display:inline-block;
		padding:0 1rem;
	}

		.secondarynav a {
			color: #bebebe !important;
		}

		.secondarynav a:hover {
			color:white !important;
		}

.socialmedia {
	text-align:center;
	padding-bottom:1rem;
}

	.socialmedia .facebook {
		background:#3864a3;
		color: white !important;
		padding:.4rem .8rem;
	}

.datenschutz .block-content-text ul {
	list-style:disc inside none;
}