@charset "utf-8";  /*** UTF Kodierung erspart Sonderzeichenkodierung ***/

html { height: 101%; scroll-behavior: smooth;}

body { margin:0;
height: 100%; 
font-family: Georgia, 'Times New Roman', Times, serif; 
font-size: 1.3em; line-height: 1.7em;
}

img {
width: auto;
max-width: 100%;
animation: fadein 0.6s;           /* weiches einblenden */
} 

 
/**** link im text ****/

a, a:visited {
color: #a44529;
font-weight: normal;
text-decoration: none;
opacity: 1;
}

a:hover {
color: #000;   
font-weight: normal;
text-decoration: underline;
opacity: 0.7; 
}

a:active, a:focus { 
outline: 0; 
}

/********/

.wrapper {position:relative; width: 100%;}

.header {
position:relative;
width: 100%;
background: linear-gradient(0deg, #a64427 0%, #b94e2e 70%);

}
.headin {
position:relative;
float: none;
margin-left: auto;
margin-right: auto;
padding: 40px 0 0 0;
min-height: 75px;
max-width: 1040px;
text-align: left;
background: #b94e2e;

}

.logotop{
float: left;
diplay: block;
padding: 10px 10px 10px 40px;
max-width: auto;
font-size: 1.8em;
color: #fff;
}

.logotop a, .logotop a:visited{
color: #fff;
font-weight: bold;
text-decoration: none;
opacity: 1;
}

.logotop a:hover{
color: #fff;
font-weight: bold;
opacity:0.5;                         /**** transition: color 0.6s ease;  ***/ 
}


/** Hamburger-Icon wird in Großansicht ausgeblendet **/
   label.open-menu-label {display: none;}
   input#open-menu {display: none;}
   input[type=checkbox]:checked ~ nav {display: none;}

.menu {
float: right;
display: block;  /** display: block; **/
margin: 8px 0 0 0;
padding: 0 0 0 0;
line-height: 1.8em;
max-width: 650px;
}

nav {float: right;}

nav ul { float: none; list-style: none; margin: 0; padding:0;}
nav > ul > li { float: left;}

nav > ul a, nav > ul a:visited  {
    display: block;
    margin: 0 12px;
	padding: 7px 0 2px; 
    color: #fff;
	font-size: 1em;
	font-weight: normal;
    text-decoration: none;
	border-bottom: 3px solid #b94e2e;
}

nav > ul a:hover {
    color: #000;
	font-weight: normal;
    text-decoration: none;
}
nav > ul a.active {
	color: #fff;
	border-bottom: 3px solid #fff;
}

nav > ul a.active:hover {
	color: #fff;
	border-bottom: 3px solid #fff;
}


/******************************************/

.content{
clear: both;
position: relative;
margin:0;
width: 100%;
background: #f2f0ee;
animation: fadein 0.6s;           /* weiches einblenden */
}


.feature {
position:relative;
margin-top: 0;
margin-left: auto;
margin-right: auto;
margin-bottom: 0;
padding: 0; 
width: 100%;
max-width: 1040px;
min-height: 700px;
background: #fff;
}

.feature2 {
position:relative;
margin-top: 0;
margin-left: auto;
margin-right: auto;
margin-bottom: 0;
padding: 0; 
width: 100%;
max-width: 1040px;
min-height: 700px;
background: none;
}


h1, h2, h3, h4 {font-family: Georgia, 'Times New Roman', Times, serif;}

h1 {
margin: 0;
padding: 50px 10px 20px 40px;
font-size: 1.6em; 
text-transform: none;
color: #666;
font-weight: normal;
letter-spacing: -0.02em;
}

h2 {
margin: 0;
padding: 30px 10px 10px 40px;
font-size: 1.2em; 
text-transform: none;
color: #a44529;
font-weight: bold;
}

h3 {
margin: 0;
padding: 25px 10px 10px 40px;
font-size: 1.1em;
color: #666; 
text-transform: none;
z-index: 999;
font-weight: bold;
}

h4 {
margin: 0;
padding: 25px 10px 10px 40px;
font-size: 1.2em;
color: #799ecc; 
text-transform: none;
z-index: 999;
font-weight: bold;
}

p {
margin: 0;
padding: 10px 40px 10px 40px;
font-size: 0.85em;
line-height: 1.6em;
color: #222;
font-weight: normal;
}

.feature ul { margin: 10px 20px; padding: 0;} 
.feature li {
margin: 0 0 10px 60px;
padding: 0;
font-size: 0.95em;
line-height: 1.6em;
color: #2f3d43;
list-style-type: disc;
} 

.flexbuch {
   display: flex;
   flex-wrap: wrap;
   justify-content: left;
   margin-top: 10px;
}
.voll {width: 100%; height: auto;}
.mini {float: left; margin: 15px 0 15px 35px; padding: 10px; background: #fff; max-width: 200px; height: auto; box-shadow: 6px 12px 12px #ccc;}

.regular {font-size: 1.5em; letter-spacing: 0;}
.halbfett {font-size: 1.5em; letter-spacing: 0;}
.fett {font-size: 1.5em; letter-spacing: 0;}
em {font-style: italic;}

.flexcontainer {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   padding: 20px 0;
   margin-top: 20px;
   background: #fff;
}

.drei {margin: 0; padding: 0; width: 30%;}
.drei img {margin: 30px 20px 20px 40px; max-width: 230px; box-shadow: 6px 12px 12px #ccc;}
.sieben {margin: 0 1% 0 0; padding: 0 0 30px 0; width: 69%;}

.trenner {background: #f2f0ee; height: 30px; }

.alignleft {float: left; padding: 0 30px 0 0;}
.alignright {float: right; padding: 0 0 0 30px;}
.alignnone {float: none; padding: 0;}
.clear {clear: both;}

.linki {margin: 10px 0; padding: 10px; background: #ece7e3; border-left: 3px solid #999;}

/**** footer ****/

.footer {
clear: both;
position: relative;
float: none;
margin: 0;
padding: 30px 0 40px 3%;
width: 97%;
min-height: 2.5em;
text-align: center;
color: #fff;
font-size: 0.85em;
background: #737475;
border-top: 30px solid #f2f0ee;
}

.footer a{
 color: #fff;
 padding: 0 5px;
 font-weight: 400;
 white-space: nowrap;
 text-decoration: none;  
}

.footer a:hover{
color:#000;
padding: 0 5px;
text-decoration: underline; 
}

.topbutton {display: block; float: none; padding: 0 5px; margin: 30px 42% 0 42%; background: #c65635; border: 1px solid #c65635; border-radius: 24px;}



/** weiches Einblenden der Seiten und Bilder **/

@keyframes fadein{from{opacity:0;}to{opacity:1;}}
@-moz-keyframes fadein{from{opacity:0;}to{opacity:1;}}
@-webkit-keyframes fadein{from{opacity:0;}to{opacity:1;}}
@-o-keyframes fadein{from{opacity:0;}to{opacity:1;}}


/***************************************************************/
/***************************************************************/



/*		wide screens */

@media only screen and (min-width: 826px) and (max-width: 2200px) {

}

/*		mittlere Größe */

@media only screen and (min-width: 601px) and (max-width: 825px) {

    .menu {display: inherit; float: right; margin: 10px 10px 0 0; padding: 0; width: auto; border: 0;}
	input#open-menu {display: none;}
    input[type=checkbox]:checked ~ nav {display: block; cursor: pointer;}
	
    label.open-menu-label {position: relative; float: right; display: block; margin: 0; cursor: pointer;}
	nav {display: none; position: absolute; padding: 10px 0 20px 0; margin: 52px 0 20px -170px; font-size: 0.95em;  
	      background: #666; border-left: 10px solid #666; cursor: pointer; z-index:999; transition: all 0.3s ease-in-out;}
	
	nav ul {width: 100%; min-width: 225px;}
    nav ul li { float: none; display: block; margin:0;}
    nav ul a, nav ul a:visited { display: block; color: #fff; border:0;} 
	nav ul a:hover   {color: #ede8e6 !important; padding-left: 5px;} 
	nav ul a.active, nav ul a.active:hover  {display: block; color: #fff;} 
	.topbutton {float: none; padding: 10px; margin: 30px 40% 30px 40%;}

}


/*	Mobile Layout: 320px / 480px / 600px Smartphones  */

@media only screen and (min-width: 220px) and (max-width: 600px) {
    
	body {width: 100%; min-width: 230px; padding: 0 0 60px 0;}
	img {width: auto; max-width: 100%; max-height: auto;}
	.headin {padding: 20px 0 0 0; min-height: 3.1em;}
	.logotop {font-size: 1.4em; padding-left: 20px;}
	
	.menu {display: inherit; float: right; margin: 10px 10px 0 0; padding: 0; width: auto; border: 0;}
	input#open-menu {display: none;}
    input[type=checkbox]:checked ~ nav {display: block; cursor: pointer;}
	
    label.open-menu-label {position: relative; float: right; display: block; margin: 0; cursor: pointer;}
	nav {display: none; position: absolute; padding: 10px 0 20px 0; margin: 52px 0 20px -170px; font-size: 0.95em;  
	      background: #666; border-left: 10px solid #666; cursor: pointer; z-index:999; transition: all 0.3s ease-in-out;}
	
	nav ul {width: 100%; min-width: 225px;}
    nav ul li { float: none; display: block; margin:0;}
    nav ul a, nav ul a:visited { display: block; color: #fff; border:0;} 
	nav ul a:hover   {color: #ede8e6 !important; padding-left: 5px;} 
	nav ul a.active, nav ul a.active:hover  {display: block; color: #fff;} 
	
	.feature {}
     h1 {padding: 20px 10px 10px 10px; font-size: 1.2em;}
	 h2, h3 {padding: 20px 10px 10px 10px; font-size: 1em;}
	.feature li {margin: 0 0 10px 20px; hyphens: auto;}
	 p {padding: 10px; font-size: 0.75em; line-height: 1.5em; hyphens: auto;}
	.linki {line-height:1.7em; padding: 5px 6px;}
	
	.flexbuch { }
	.mini {float: left; margin: 15px 0 15px 15px; padding: 8px; background: #fff; max-width: 120px; height: auto; box-shadow: 6px 12px 12px #ccc;}

.drei {margin: 0; padding: 0; width: 100%;}
.drei img {margin: 20px 30px 20px 30px; max-width: 230px; box-shadow: 6px 12px 12px #ccc;}
.sieben {margin: 0 0 0 0; padding: 0 3% 30px 3%; width: 90%;}
	 
	.alignleft {float: none; padding: 0; hyphens: auto;}
	.footer {line-height: 2em; text-align: center;}
	.topbutton {float: none; padding: 10px; margin: 20px auto 20px auto; max-width: 130px;}
}