/*
Theme Name: Gunter Koenig 2020
Description: Individuelle Entwicklung für Gunter Koenig
Author: Gerrit van Aaken
Version: 2.1
-------------------------------------------------------------- */
@import url(reset.css);

#wrapper {
	width: 780px;
	margin: 190px auto 0 60px;
}

.inszenariobrand {
	text-transform:  uppercase;
	font-style:  italic;
	color:  #db0132;
}

sup {
	font-size: .7em;
	line-height: 0;
	position:  relative;
	top:  -.6em;
}


img {
	max-width: 100%;
	height: auto;
}

.wp-caption {
	width: auto !important;
}

/* ============== Header  */

#header {
	position: absolute;
	right: 60px;
	top: 28px;
	width: 330px;
	height: 162px;
}

/* ============== Navigation  */

#navigation {
	width: 190px;
	float: left;
}

.menu{
	margin-bottom: 250px;
}

#menu-hauptnavigation .page_item {
	margin-bottom: 10px;
	font-size: 20px;
}

#menu-hauptnavigation .current_page_item a {
	color: #db0132;
}

#menu-hauptnavigation li a {
	text-decoration: none;
	color: #868889;
	display: block;
	overflow: hidden;
	background: url(images/menu.svg) no-repeat -3px -12px;
	zoom: 1;
	height: 30px;
}

#menu-hauptnavigation {
	width: 190px;
	overflow: hidden;
}

#menu-hauptnavigation li {

	text-indent: -1000px;
	height: 30px;
}

#doit {
	width: 190px;
	height: 44px;
	background: url(images/machen.svg) no-repeat 0 0;
	overflow: hidden;
	cursor: pointer;
	margin-bottom: 2rem;
}

#doit:hover {
	background-position: 0 -100px;
}

#doit.clicked {
	background-position: 0 -200px;
}

#toggle-menu-button {
	display: none;
}

@media all and (max-width: 905px) {
	#navigation {
		-webkit-box-sizing: border-box;
		        box-sizing: border-box;
		position: absolute;
		width: 100%;
		padding: 4%;
		padding-top: 0;
		float: none;
		top: 0;
		left: 0;
		z-index: -1;
	}
	
	#navigation.is-active {
		background-color: #fff;
		box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.25), 0 1px 1px rgba(0, 0, 0, 0.2);
		z-index: 1;
	}
	
	.menu {
		display: none;
		margin-top: 25px;
		margin-bottom: 2rem;
	}
	#navigation.is-active .menu {
		display: block;
	}
	
	#doit {
		display: none;
	}
	#navigation.is-active #doit {
		display: block;
	}
	
	#toggle-menu-button {
		-webkit-appearance: none;
		appearance: none;
		display: block;
		font-family: Arial, sans-serif;
		font-size: 16px;
		color: #fff;
		padding: 9px 20px;
		background-color: #db0132;
		border: none;
		margin: 0;
	}
}

/* ============== menüpunkte  */


#menu-hauptnavigation .page-item-6 a{ background-position: -3px -12px; }
#menu-hauptnavigation .page-item-22 a{ background-position: -3px -112px; }
#menu-hauptnavigation .page-item-48 a{ background-position: -3px -212px; }
#menu-hauptnavigation .page-item-61 a{ background-position: -3px -312px; }
#menu-hauptnavigation .page-item-73 a{ background-position: -3px -412px; }
#menu-hauptnavigation .page-item-88 a{ background-position: -3px -512px; }
#menu-hauptnavigation .page-item-99 a{ background-position: -3px -612px; }
#menu-hauptnavigation .page-item-109 a{ background-position: -3px -712px; }
#menu-hauptnavigation .page-item-111 a{ background-position: -3px -812px; }
#menu-hauptnavigation .page-item-1878 a{ background-position: -3px -881px; }
#menu-hauptnavigation .page-item-1880 a{ background-position: -3px -947px; }
#menu-hauptnavigation .page-item-1961 a{ background-position: -3px -766px; }

#menu-hauptnavigation .page-item-6 .active,  #menu-hauptnavigation .page-item-6 a:hover { background-position: -203px -12px; }
#menu-hauptnavigation .page-item-22 .active,  #menu-hauptnavigation .page-item-22 a:hover { background-position: -203px -112px; }
#menu-hauptnavigation .page-item-48 .active,  #menu-hauptnavigation .page-item-48 a:hover { background-position: -203px -212px; }
#menu-hauptnavigation .page-item-61 .active,  #menu-hauptnavigation .page-item-61 a:hover { background-position: -203px -312px; }
#menu-hauptnavigation .page-item-73 .active,  #menu-hauptnavigation .page-item-73 a:hover { background-position: -203px -412px; }
#menu-hauptnavigation .page-item-88 .active,  #menu-hauptnavigation .page-item-88 a:hover { background-position: -203px -512px; }
#menu-hauptnavigation .page-item-99 .active,  #menu-hauptnavigation .page-item-99 a:hover { background-position: -203px -612px; }
#menu-hauptnavigation .page-item-109 .active,  #menu-hauptnavigation .page-item-109 a:hover { background-position: -203px -712px; }
#menu-hauptnavigation .page-item-111 .active,  #menu-hauptnavigation .page-item-111 a:hover { background-position: -203px -812px; }
#menu-hauptnavigation .page-item-1878 .active, #menu-hauptnavigation .page-item-1878 a:hover { background-position: -203px -881px; }
#menu-hauptnavigation .page-item-1880 .active, #menu-hauptnavigation .page-item-1880 a:hover { background-position: -203px -947px; }
#menu-hauptnavigation .page-item-1961 .active, #menu-hauptnavigation .page-item-1961 a:hover { background-position: -203.5px -766px; }

/* ============== Post  */

#schmuckbild {
	width: 570px;
	height: 168px;
	margin-bottom: 11px;	
}

.post {
	width: 582px;
	float: right;
	font-family: Arial, sans-serif;
	font-size: 16px;
	line-height: 1.5;
	font-weight: normal;
	padding-bottom: 2em;
}
.post h2 {
	width: 557px;
	font-weight: bold;
	border-bottom: 1px solid #db0132;
	padding: 0 0 6px 13px;
	margin: 0;
	background: url(images/pfeile.svg) no-repeat 0 7px;
	cursor: pointer;
}

.post .active h2 {
	background: url(images/pfeile.svg) no-repeat 0 -93px;
}

.post h3 {
  
	padding: 6px 0 0 0;
	margin: 0 0 9px 0;
	font-weight: bold;
}

.post h4 {
  font-style: italic;
  margin-bottom: .3em;
  color: #777;
}

.post strong {
	color: #868889;
}

.post .entry {
  width: 582px;
  padding: 6px 0 25px 0;
}

.post .entry .inner {
  padding-bottom: 30px;
}

.post .entry a:link,
.post .entry a:visited {
  color: inherit;
	border-bottom: 1px solid #db0132;
	text-decoration: none;
}

.ie7 .post .entry a {
  color: #000;
}

.ie7 .post .entry strong a {
  color: #868889;
}


.post .entry a:focus,
.post .entry a:hover,
.post .entry a:active,
.post .entry a:focus strong,
.post .entry a:hover strong,
.post .entry a:active strong {
	color: #db0132;
}

.post .entry strong a:focus,
.post .entry strong a:hover,
.post .entry strong a:active {
	color: #db0132;
}

.post .entry p,
.post .entry ul,
.post .entry ol,
.post .entry dl {
	margin-bottom: 8px;
}

.post .entry blockquote {
	color: #000;
	font-size: 15px;
	background-color: #f9dfdb;
	padding: 10px 20px;
	margin: 10px 35px 10px 0;
}

.post .entry blockquote cite {
	font-style:  italic;
}


.post .entry ol {
	padding-left: 30px;
	display: block;
}

.post .entry ol li {
	list-style: outside decimal;
}


.post .entry ul li {
	list-style: none;
	background: url(images/dot.svg) no-repeat 0px 9px;
	display: block;
	padding-left: 15px;
	margin-left: 5px;
}

.post .item {
	overflow: hidden;
	margin-bottom: 6px;
}

.post .entry .alignleft {
	float: left;
	margin: 6px 10px 0 0;
}

.post .entry .alignright {
	float: right;
	margin: 6px 0 10px 0;
}

/* ============== Kommentare  */

.post .entry .commentlist {
	width: 582px;
	max-width: 100%;
	padding: 0;
	margin-bottom: 25px;
}

#comment {
	box-sizing: border-box;
	width: 570px;
}

.commentlist li {
	list-style: none;
	margin: 0 0 10px 0;
}

.commentlist p {
	display: inline;
}

#commentform small {
	font-size: 11px;
}

#commentform #author,
#commentform #email {
	width: 250px;
}

.commentlist .happy p {
	font-style: italic;
	margin-right: 0.5em;
}
.commentlist .happy p:before {
	content:"„";
}

.commentlist .happy p:after {
	content:"“";
}

.post .entry ul li.shoplist {
	font-size: 13px;
	list-style: none;
	background: url(images/dot.svg) no-repeat 0px 7px;
	display: block;
	padding-left: 12px;
	margin-left: 195px;
}


/* ============== Starstseite  */

#matrix {
  margin: 0 0 40px 198px;
  overflow: hidden;
}
.ie6 #matrix {
  width: 600px;
}

#matrix li {
  float: left;
  margin: 0 0 12px 12px;
  width: 182px;
  height: 167px;
}

#matrix img {
  display: block;
	width: 182px;
	height: 167px;
}


/* ============== Shop  */

.product {
  border: 1px solid #ddd;
  padding: 10px 13px;
  margin: 10px 12px 10px 0px;
  overflow: hidden;
}

.product .meta {
  float: right;
  width: 150px;
  text-align: right;
  color: #DB0132;
}

.meta small {
  display: block;
  font-size: 10px;
  color: #868889;
  line-height: 12px;
  margin-top: -3px;
}

.product h4 {
  width: 182px;
  float: left;
}

.product p,
.product ul,
.product ol {
  margin-left: 195px;
  font-size: 12px;
}

.post .product ul li {
  background-position: 2px 6px;
}

.reference, .buy {
  font-weight: bold;
}

@media all and (max-width: 905px) {
	#header {
		max-width: 330px;
		width: 60vw;
		height: auto;
		top: 3.5vw;
		right: 4%;
	}
	
	#wrapper {
		width: 92%;
		margin-top: 26vw;
		margin-right: auto;
		margin-left: auto;
	}
	
	.post {
		width: 100%;
		float: none;
	}
	
	img {
		max-width: 100%;
		height: auto;
	}
	
	.post h2,
	#schmuckbild,
	.post .entry,
	#comment {
		max-width: 570px;
		width: 100%;
	}
	
	#schmuckbild {
		height: auto;
	}
}

.footer {
	font-family: Arial, sans-serif;
	font-size: 12px;
	text-align: right;
	margin-top: 6rem;
	margin-bottom: 2rem;
}

.footer__link {
	color: #999;
	text-decoration: none;
}

.footer__link:hover {
	text-decoration: underline;
}

@media all and (max-width: 905px) {
	#matrix {
		margin-top: 1rem;
		margin-right: 170px;
		margin-bottom: 0;
		margin-left: 0;
	}
}

@media all and (max-width: 820px) {
	#matrix {
		margin-right: 0;
	}
}

@media all and (max-width: 618px) {
	.product h4 {
		max-width: 100%;
		float: none;
		margin-right: auto;
		margin-left: auto;
	}
	
	.product p,
	.product ul,
	.product ol {
		margin-left: 0;
	}
}

@media all and (max-width: 638px) {
	.post .entry blockquote {
		margin: 10px 0 10px 0;
	}
	
	.post h2 {
		-webkit-hyphens: auto;
		-ms-hyphens: auto;
		hyphens: auto
	}
	
	#matrix {
		width: 103.5%;
		margin-left: -2.625%;
	}
	
	#matrix li {
		width: 30%;
		height: auto;
		margin: 0 0 3% 3%;
	}
	
	#matrix img {
		width: 100%;
		height: auto;
	}
}