@charset "utf-8";

/*
* CSS-Design
* HERRFURTH-Website
*/

/* Farbwerte 

Rosa:
rgba(207,134,177,1)
#cf86b1

Grün:
rgba(116,134,80,1)
#748650*/


/* Webfonts-Einbindung */

@import url('https://fonts.googleapis.com/css2?family=PT+Sans&display=swap=PT+Serif:wght@400;700&display=swap');


/* Reset * * * * * * * * */
*{
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
        box-sizing: border-box;
}


/* Basisformatierung */

body{
font: 700 32px/42px 'PT Serif bold';
color: rgba(116,134,80,1); /*#748650;*/
}

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

#logo{
max-height: 80px;
}


/* Layout */

.wrapper {
max-width: 1250px;
padding: 0 25px;
margin: 0 auto;
}

.column {
float: left;
background: #fff;
margin: 20px 0 20px 5%;
}

.column:first-child {
margin-left: 0;
}

section {
	padding: 75px 0;
}

.no-gutter .column {
	margin: 0;
	padding: 60px;
}

.no-gutter .col_1_2 {
	width: 50%;
}

.no-gutter .col_1_3 {
	width: 33.33%;
}

.no-gutter .col_2_3 {
	width: 66.66%;
}

.no-gutter .col_1_4 {
	width: 25%;
}

.no-gutter .col_3_4 {
	width: 75%;
}

/* Clearfix */
.row:before,
.row:after {
content: " ";
display: table;
}

.row::after {
clear: both;
}

/* Raster */
.col_1{
width: 100%;
}

.col_1_2{
width: 47.5%;
}

.col_1_3{
width: 30%;
}

.col_2_3{
width: 65%;
}

.col_1_4{
width: 21.25%;
}

.col_3_4{
width: 73.75%;
}


/* Navigation */

#navigation {
	text-align: center;
}

#navigation li{
	display: inline;
	list-style: none;
	margin-left: 35px;
}

#navigation li a{
	font: 20px 'PT Sans Regular'; 
	font-weight: 400;
	color: rgba(116,134,80,1); /*#748650;*/
	text-decoration: none;
	text-transform: uppercase;
}

#navigation li a.active {
	color: rgba(207,134,177,1); /* #cf86b1;*/;
}

#navigation li a:hover{
	color: rgba(207,134,177,1); /* #cf86b1;*/;
	border-bottom: 1px rgba(116,134,80,1); /*#748650;*/
}

#navigation li a:hover, a.active{ 
	color: rgba(207,134,177,1); /* #cf86b1;*/;
}

.nav-toggle { 
	display: none; 
}

/* Drop-Down-Menue */

#navigation ul {
	font: 18px/28px 'PT Sans Regular'; 
	position: absolute;
	text-align: left;
	top: 33px;
	left: -14px;
	background: #fff;
	width: 160px;
	box-shadow: 0px 5px 5px rgba(116,134,80,0.2);
	display: none;
	z-index: 9999;
}

#navigation li {
	position: relative;
}

#navigation ul li a {
	display: block;
	font-size: 1.125rem; /* 16 Pixel */
	text-transform: none;
	padding: 10px 25px 10px 13px;
	border-bottom: 1px solid rgba(116,134,80,1);
}

#navigation ul li {
	margin-left: 0;
}

#navigation ul li a:hover {
	background: rgba(116,134,80,1);
	transition: background .2s ease-in-out;
	color: #fff;
}

#navigation li:hover ul {
	display: block;
}


/* Responsive Navigation */

.nav-toggle {
	display: none;
}

.nav-toggle {
	padding: 10px 15px;
	color: rgba(116,134,80,1);
}

.nav-toggle:hover {
	background: #fff;
	text-decoration: none;
}

#nav-open:target nav{
	background: #fff;
	height: 500px;
}

/* Subnavigation  */

#subnavigation {
	border-top: 1px solid rgba(116,134,80,0.8);
}

#subnavigation li {
	font: 24px/34px 'PT Sans Regular';
	list-style: none;
	border-bottom: 1px solid rgba(116,134,80,1);
}

#subnavigation li a {
	text-decoration: none;
	color: rgba(207,134,177,1);
	font-weight: 300;
	font-size: 18px;
	display: block;
	padding: 10px 0 10px 0px;
}

#subnavigation li a:hover,
#subnavigation li a.active {
	color: rgba(116,134,80,1);
}

.sidebar img {
	margin: 50px 0 0 10%;
}

.sidebar blockquote {
	padding: 50px;
}

/* Typo */

h1, h2, h3, h4, h5, h6{
	font-family: 700 32px/42px 'PT Serif Bold';
	margin: 10px 0 5px 0;
	color: rgba(207,134,177,1); /* #cf86b1;*/
}

h1{
font-size: 3.625rem; /* 58px; */
margin-bottom: 25px;
line-height: 1.2;
} 

h2{
font-size: 2.125rem; /* 34px; */
margin-bottom: 25px;
text-align: left;
}

h3 {
font-size: 1.75rem; /* 28px; */
margin-bottom: 5px;
margin-top: 10px;
text-align: left;
}

h4 {
font-size: 1.5rem; /* 24px; */
text-align: center;
}

h5 {
font-size: 1.375rem; /* 22px; */
}

h6 {
font-size: 1.250rem; /* 20px; */
}


ul {
font: bold 700 32px/42px 'PT Serif Bold';
}


p {
font: 400 16px/28px 'PT Sans Regular', sans-serif;
color: rgba(116,134,80,1); /*#748650;*/
text-align: left;
}

a {
color: rgba(116,134,80,1); /*#748650;*/
text-decoration: none;
padding-bottom: 3px;
}

a:hover {
color: rgba(207,134,177,1); /* #cf86b1;*/
}

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

section{
padding: 15px 0;
}

hr { 
	border: 1px solid rgba(116,134,80,1); /*#748650;*/
}

.button1 {
	font: 18px/28px 'PT Sans Regular'; 
	background: #fff;
	border: 1px solid rgba(207,134,177,1);
	padding: 10px 15px 8px;
	float: right;
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: rgba(207,134,177,1);
	margin: 40px 0 20px 0;
	display: inline-block;
	transition: all 0.25s ease-out 0s;
	border-radius: 25px;
	position: fixed;
	top: 83%;
	right: 8%;
}

.button1:hover {
	background: rgba(116,134,80,0.8);
	color: #fff;
	text-decoration: none;
}

.button2 {
	background: #fff;
	border: 1px solid rgba(207,134,177,1);
	padding: 10px 12px;
	float: right;
	text-decoration: none;
	
	letter-spacing: 1px;
	color: rgba(207,134,177,1);
	margin: 40px 0 20px 2px;
	display: inline-block;
	transition: all 0.25s ease-out 0s;
	border-radius: 50%;
	position: fixed;
	top: 73%;
	right: 8%;
}

.button2:hover {
	background: rgba(116,134,80,0.8);
	color: #fff;
	text-decoration: none;
}

/* Tabelle */

table {
	border-collapse: collapse;
	margin: 20px auto;
}

thead {
	background: rgba(116,134,80,0.8);
	color: #fff;
	text-align: center;
}

th,
td {
	border-top: 3px solid #fff;
	padding: 5px 12px;
	border-right: 3px solid #fff;
}

tbody tr:nth-child(1) {
	text-align: center;
}

tbody tr:nth-child(2) {
	background-color: rgba(116,134,80,0.3);
	text-align: center;
}
	

/* Header-Teaser */

.logo {
	text-align: center;
	padding: 0 0 20px 0;
}

/* Hero-Teaser */

.hero{
	text-align: center;
}

.hero .column.col_1.slogan.herz img{
	padding: 50px 0 0 0;
}

.hero h4{
	color: rgba(116,134,80,1);
}

/* Illustrationen-Teaser */

.illustrationen {
	text-align: center;
}
.illustrationen img{
	border: 2px solid rgba(116,134,80,1); /*#748650;*/
	text-align: center;
}
.illustrationen hr{
	border: none;
}

.illustrationen .column.col_1_3.kinderbuch p{
	text-align: center;
}

.illustrationen .column.col_1_3.malbuch p{
	text-align: center;
}

/* Papeterie-Teaser */

.papeterie {
	text-align: center;
}
.papeterie img{
	border: 2px solid rgba(116,134,80,1); /*#748650;*/
	text-align: center;
}

.papeterie hr{
	border: none;
}

.papeterie .column.col_1_4.geburtstagskarte p{
	text-align: center;
}

.papeterie .column.col_1_4.sommerkarte p{
	text-align: center;
}

.papeterie .column.col_1_4.weihnachtskarte p{
	text-align: center;
}


/* Logodesign-Teaser */

.logodesign {
	text-align: center;
}

.logodesign img {
	border: 2px solid rgba(116,134,80,1); /*#748650;*/
	text-align: center;
	margin: 0 auto;
}

.logodesign h5 {
	text-align: left;
	margin_bottom: 40px;
}

.logodesign .column.col_1.serientitel p{
	color: rgba(207,134,177,1);
}

.logodesign .column.col_1_2 logo{
	margin-top: 0;
}

.logodesign .column.col_1_4.logo1 p{
	text-align: center;
	
}
.logodesign .column.col_1_4.logo2 p{
	text-align: center;
}
.logodesign .column.col_1_4.logo3 p{
	text-align: center;
}

.logodesign .column.col_1_3.logo1 p{
	text-align: center;
}

.logodesign .column.col_1_3.logo2 p{
	text-align: center;
}
.logodesign .column.col_1_3.logo3 p{
	text-align: center;
}

.logodesign .column.col_1_3.logo4 p{
	text-align: center;
}

.logodesign .column.col_1_3.logo5 p{
	text-align: center;
}

/* Kinderbuch */
.kinderbuch {
	text-align: center;
}

.kinderbuch img{
	border: 2px solid rgba(116,134,80,1); /*#748650;*/
	text-align: center;
}
.kinderbuch hr{
	border: none;
}

.kinderbuch .column.col_1_2.kinderbuch h2{
	text-align: center;
}
.kinderbuch .column.col_1_2.kinderbuch p{
	text-align: center;
}
.kinderbuch .column.col_1_2.malbuch h2{
	text-align: center;
}

.kinderbuch .column.col_1_2.malbuch p{
	text-align: center;
}


/* Kreaturen */

.kreaturen img {
	text-align: center;
}

.kreaturen p{
	text-align: center;
}

/* Geburtstagskarten */

.geburtstagskarten .column.col_1 {
	margin: 0 auto;
} 


.geburtstagskarten img{
	border: 2px solid rgba(116,134,80,1); /*#748650;*/
	text-align: center;
}

.geburtstagskarten .bestellbutton{
	position: fixed;	
}


/* Grußpostkarten */

.grusspostkarten .column.col_1 {
	margin: 0 auto;
}
.grusspostkarten img{
	border: 2px solid rgba(116,134,80,1); /*#748650;*/
	text-align: center;
}

/* Weihnachtskarten */

.weihnachtskarten .column.col_1{
	margin: 0;
}

.weihnachtskarten .column.col_1.serientitel {
	margin: 20px 0 0 0;
	text-decoration: 2px solid rgba(116,134,80,1); /*#748650;*/ 
}


.weihnachtskarten .column.col_1.serientitel p {
	color: rgba(207,134,177,1);
}

.weihnachtskarten img{
	border: 2px solid rgba(116,134,80,1); /*#748650;*/
	text-align: center;
}

/* Sticker */

.sticker .column.col_1{
	margin: 0;
}

.sticker .column.col_1.serientitel {
	margin: 0px 0 0 0;
	text-decoration: 2px solid rgba(116,134,80,1); /*#748650;*/ 
}

.sticker .column.col_1.serientitel p{
	color: rgba(207,134,177,1);
}

.weihnachtssticker img{
	border: 2px solid rgba(116,134,80,1); /*#748650;*/
	border-radius: 50%;
	text-align: center;
}


/* Geschenkanhaenger */

.anhaenger .column.col_1{
	margin: 0;
}
.anhaenger img{
	border: 2px solid rgba(116,134,80,1); /*#748650;*/
	text-align: center;
}
.anhaenger .column.col_1.serientitel p{
	color: rgba(207,134,177,1);
}

/* Über mich */

.portrait {
	padding-top: 0;
}

.portrait .column.col_1_3 {
	text-align: center;
}

.portrait .column.col_1_2 {
	text-align: center;
}


.portrait .column.col_1_4 img{
	border: 2px solid rgba(116,134,80,1);
	margin: 10px 0 10 0;
} 

.portrait .row.zertifikate {
	margin: 50px 0 10px 0;
}


.hund {
	background: rgba(116,134,80,0.8);
}
.hund .column.col_1_4.hund {
	background: none;
	text-align: center;
}


/* Impressum */

.impressum {
	padding-bottom: 50px;
}
/* Datenschutz */

.datenschutz {
	padding: 50px 0;
}

/* Kontakt */

.kontakt h6{
	color: rgba(116,134,80,1);
}

.kontakt .adresse p{
	text-align: center;
}

/* Nuesse */

.nuesse .column.col_1.walnuss {
	text-align: center;
}



/* Käfer */

.kaefer{
	text-align: center;
}

.kaefer .col_1{
	margin: 0 auto;
}



/* Footer */

footer .column.col_1_3.center{
	text-align: center;
}

footer .column.col_1_3.right p{
	text-align: right;
}

footer .row.impressum p{
	padding: 0 0 10px 1%;
	text-align: center;
}

footer hr{
	margin-top: 20px;
}


/* Media Queries */

@media only screen and (max-width: 950px) {
.col_1, 
.col_1_2, 
.col_1_3, 
.col_2_3, 
.col_1_4, 
.col_3_4, 
.col_1_2,
.no-gutter .col_1_2,
.no-gutter .col_1_3,
.no-gutter .col_2_3,
.no-gutter .col_1_4,
.no-gutter .col_3_4  {
width: 100%;
}

.column{
margin-left: 0;
}

section {
	padding: 5px 0;
}



/* Responsive Navigation */

.nav-toggle {
	display:block;
}

nav {
	display:none;
}

#nav-open:target .nav-closed { 
	display:block; 
}

.nav-closed,
#nav-closed:target .nav-closed,
#nav-open:target .nav-open { 
	display:none;
}

#nav-open:target nav{
	display:block;
}

.hauptnavigation .column.col_1{
	text-align: center;
}

#navigation{
	margin-top: 0;
	float: none;
	border-bottom: 1px solid rgba(116,134,80,0.5); 
}

#navigation li{
	display: block;
	margin-left: 0;
	text-align: left;
	border-top: 1px solid rgba(116,134,80,0.5); 
}

#navigation li a{
	margin-left: 0;
	display: block;
	padding: 15px;
}

#navigation li a:hover{
	color: rgba(116,134,80,1); /*#748650;*/
	border-bottom: 1px rgba(116,134,80,1); /*#748650;*/
}

#navigation li a.active {
	color: rgba(116,134,80,1);
}

#navigation ul{
	position: relative;
	display: block;
	top: 0;
	left:0;
	box-shadow: 0 0 0 rgba(0,0,0,0);
	width: 100%;
	margin-bottom: 0;
}
	 
#navigation ul li a{
	border-bottom: 0;
	padding: 15px 15px 15px 60px;
}

#navigation ul li a:hover{
	background: rgba(116,134,80,1);
	color: #fff;
}

.illustrationen hr{
	border: 1px solid rgba(207,134,177,.8);
	max-width: 100px;
	margin: 0 auto;
}
.papeterie hr{
	border: 1px solid rgba(207,134,177,.8);
	max-width: 100px;
	margin: 0 auto;
}

.geschenke hr{
	border: 1px solid rgba(207,134,177,.8);
	max-width: 50px;
	margin: 0 auto;
}



footer .column.col_1_3{
	text-align: center;
}
footer .column.col_1_3.center{
	text-align: center;
}

footer .column.col_1_3.right{
	text-align: center;
}

footer .row.impressum{
	padding: 5% 0 20px 0;
	text-align: center;
}


}