@font-face {
 font-family: 'blenda_script';
 src: url('blenda_script.otf');           
 src: url('blenda_script.woff')
           format('woff'),           
      url('blenda_script.ttf')
           format('truetype');         
}


html, body{
	font-family: 'blenda_script', Arial, sans-serif;
	font-size: clamp(1rem, 0.8vw, 2rem);
	-webkit-font-smoothing: subpixel-antialiased!important;
	color: black;
	font-weight:400;
	height:100%;  
	background-color: #2b271f;
	text-align: center;
}

h1{
	font-family: 'blenda_script', Arial, sans-serif;
	font-size: clamp(1rem, 2.5vw, 4rem);
}

h2{
	font-family: 'blenda_script', Arial, sans-serif;
	font-size: clamp(1rem, 2.5vw, 1.5rem);
}

h3{
	font-family: 'blenda_script', Arial, sans-serif;
	font-size: clamp(1rem, 2.5vw, 1.3rem);
}

h4{
	font-family: 'blenda_script', Arial, sans-serif;
	font-size: clamp(1rem, 2.5vw, 1rem);
}

html, body a {
	color: black;
}

.schrift_blenda_script{
	font-family: 'blenda_script', Arial, sans-serif;
	font-size: clamp(1rem, 0.8vw, 2rem);
}

.schrift_blenda_script_headline{
	font-family: 'blenda_script', Arial, sans-serif;
	font-size: clamp(1rem, 1.0vw, 2rem);
}

/*############ Index.php ########## */


.container{
	width: 95%;
	height: 100%;
	text-align: left;
	margin: 0 auto;
	margin-top: -10px;
	background-image: url(/img/bg_paper.png);
	background-size: cover;
}

.content{
	width: 88%;
	height: 100%;
	text-align: left;
	margin: 0 auto;
}

.content_left{
	width: 48%;
	height: 100%;
	float: left;
}

.content_left_top{
	width: 100%;
	height: 25%;
	float: left;
}

.content_left_top_banner{
	width: 100%;
	height: 30%;
	float: left;	
}

.content_left_top_banner img{

}

.content_left_top_nav{
	width: 100%;
	height: 70%;
	float: left;
}
.content_left_top_nav_menu{
	width: 100%;
	height: 50%;
	float: left;
}

.content_left_top_nav_url{
	width: 100%;
	height: 50%;
	margin-left: 30%;
	float: left;
}

.content_left_middle{
	width: 100%;
	height: 20%;
	float: left;
}

.raetsel_loesung{
	width: 100%;
	height: 70%;
	margin-left: 35%;
}

.content_left_bottom{
	width: 100%;
	height: 55%;
	float: left;
}

.content_left_bottom_text{
	width: 100%;
	height: 85%;
	float: left;
	text-align: left;
}

.content_middle{
	width: 8%;
	height: 100%;
	float: left;
}

.content_right{
	width: 42%;
	height: 100%;
	float: left;
}

.content_right_change{
	width: 100%;
	height: 95%;
	float: left;
	margin-top: 5%;
}

#change  {	
	width: 100%;
	height: 95%;
	margin-top: 5%;	
}

#menu  {
	margin-left: 30%;
	font-family: 'blenda_script', Arial, sans-serif;
	font-size: clamp(1rem, 0.8vw, 2rem);
}

#menu li {
	display: inline;
	float: left;
	list-style-type: none;
	padding: 10px 10px;
	border-top: 3px solid #786146;
	border-bottom: 3px solid #786146;
	border-radius: 10px;
	margin: 0;
	margin-left: 10px;
}

#menu a {
	color: black;
	text-decoration: none;
	padding: 4px 8px;
}

#menu a:hover {
	background-color: #786146;
}

#menu a:hover,
#startseite #navi01 a,
#kontaktseite #navi02 a {
	background-color: #786146;
	border-radius: 15px;
}

/*############ Raetsel.php ########## */

.content_top{
	width: 100%;
	height: 15%;
	float: left;
}

.content_bottom{
	width: 100%;
	height: 85%;
	float: left;
	overflow: scroll;
    overflow-x: hidden;
}

.content_bottom img{

}

.content_bottom::-webkit-scrollbar {
    width: 12px;
}

.content_bottom::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    border-radius: 10px;
}

.content_bottom::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
}

.raetsel_img{
	width: 40%;
	float: left;
	text-align: center;
	vertical-align: top;
	margin: 0 auto;
}

.raetsel_img img{
	width:100%;
	height:100%;
	object-fit: contain;
	border-radius: 10px;
}

.raetsel_text{
	width: 56%;
	float: left;
	text-align: left;
	padding-left: 4%;
}

.raetsel_tipp{
	width: 100%;
	float: left;
	max-height:	200px;
	border-top: 3px solid #786146;
	border-bottom: 3px solid #786146;
	overflow: scroll;
    overflow-x: hidden;
}

.raetsel_tipp::-webkit-scrollbar {
    width: 12px;
}

.raetsel_tipp::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    border-radius: 10px;
}

.raetsel_tipp::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
}

.send_button{
	float: left; 
	border: 3px solid #786146; 
	border-radius: 10px;
}

input, textarea{
	width: 100%;
    border-radius: 10px;
    font-size: 1.1em; 
    padding: 4px;
	background-color: #97885e;
	font-family: 'blenda_script', Arial, sans-serif;	
}

.content_left_top_nav_url input, textarea{
	width: 30%;
    border-radius: 10px;
    font-size: 0.7em; 
    padding: 4px;
	background-color: #97885e;
	font-family: 'blenda_script', Arial, sans-serif;	
}