@charset "UTF-8";
/*
Cascading Style Sheets für den Webauftritt der Imchen Combo, Berlin
Raimund Gryszik, 2019/2020
Version 04 v. 1.1.2020
*/

img {width: 100%; height: auto;}  /* Damit der Elternkasten die Bildgröße steuert */
.hinweistext {
	padding: 0.7em;
	margin: 2.7em;
	font-size:1.4em; color: rgb(130,40,40); text-align: center; border:3px solid red;}

.durchgestrichen {
	text-decoration: line-through;  
}

/* Zunächst alles für kleine Bildschirmchen */
#top_logo {position: absolute; width: 100%; max-width: 65rem;}
#top_logoxs {position: absolute; width: 100%; max-width: 65rem; visibility: hidden;}
#combo_startgalerie {width:100%; max-width:67rem;}

p {font-family:Helvetica, Arial, Geneva, sans-serif; 
	color:#572723;  
	margin-block-start: 0;
	margin-block-end: 0;}

.normaltext {
	font-family:Helvetica, Arial, Geneva, sans-serif; 
	color:#572723;  
}
.minidatum {
	font-size:0.74em;  
}

h1 {font-family:Helvetica, Arial, Geneva, sans-serif; 
	color:#572723; 
	font-size:1.2em;
	font-weight: 100; 
	margin-block-start: 1.75em;
	margin-block-end: 0;}

h2 {font-family:Helvetica, Arial, Geneva, sans-serif; 
	color:#572723; 
	font-size:1.4em;
	font-weight: 100; 
	margin-block-start: 1.8em;
	margin-block-end: 0;}

h3 {font-family:Helvetica, Arial, Geneva, sans-serif; 
	color:#572723; 
	font-size:1.6em;
	font-weight: 100; 
	margin-block-start: 1.85em;
	margin-block-end: 0;}

h4 {font-family:Helvetica, Arial, Geneva, sans-serif; 
	color:#572723; 
	font-size:1.8em; 
	font-weight: 100;
	margin-block-start: 2em;
	margin-block-end: 0;}
	
.seitentitel {font-family:Helvetica, Arial, Geneva, sans-serif; 
	color:#572723; 
	font-size:1.8em; 
	font-weight: 100;
	margin-block-start: 0.5em;
	margin-block-end: 0.4em;}

.rahmentest {
border: 20px double red;
	border-radius: 20px;
   }
.flex-container {
  display: flex;
  flex-flow: row wrap;
}
.flex-item {
flex:auto;
}
.wrap {
  flex-wrap: wrap;
}
.normalkasten {
  margin-left: 2.7rem;
  margin-right: 2.7rem;
  margin-top: 0.7rem;
  margin-bottom: 2.7rem;
}
.icokasten {
	width:96%; padding:1em;
	margin-left: auto; margin-right: auto;	
	margin-top: 0.8em;
	margin-bottom: 0.8em;
	background-color:#F9F3E6;}
	
header {
	width:100%;
	background-image:url("../combo_img/header_bg3.png");
	background-repeat:repeat;
	height:14rem;
	position:relative;
	z-index:9999;
	}
#menubalkenoben a {font-family:sans-serif; font-size:0.8em; margin-left:22px; color:rgb(200,200,0); text-decoration: none;}
#menubalkenoben a:hover {color:rgb(255,255,255);}
#menubalkenunten a {font-family:sans-serif; font-size:0.6em; margin-left:22px; color:rgb(200,200,0); text-decoration: none;}
#menubalkenunten a:hover {color:rgb(255,255,255);}
#menubalkenoben, #menubalkenunten 	{
	width:100%;
	margin-bottom: 1em;
	padding:6px; 
	background-image:url("../combo_img/header_bg4.png");
	background-repeat:repeat-x;
	}

body {
	background-color:#F9F3E6;
		}  
		
.multicol {display: flex;}
	
#main {
	width:100%;	}
.normalsection {
	width:80%;
	max-width:67rem;
	padding:0.4em;
	background-color:#EEE8DC;
	position:relative;
	margin-top:0;
	margin-bottom: 0;
	margin-left:auto;
	margin-right:auto;
	}
.normalsection p	{
	padding:0.4em;
	}
footer {margin-top:2.7em;}

#info_box {
	font-family:'Muli', sans-serif;
	font-size:12px;
	color:#e9e9e9;
	position: absolute;
	bottom:0.4em;
	right:2em;
	}
	
#meinhamburger {
	visibility: hidden;	
	width:2.5em;
	position: absolute;
	top:5em;	
	right:1.3em;}
	

/*   ------------  Jetzt Media queries  ------------------ */  
/* Die Formulierung max-width:300px bedeutet: das Gerät kann höchstens 300px darstellen */   

/* Handy uä */
@media (max-width: 31rem)  {
	#info_box {display:none;} 
	#menubalkenoben 	{display:none;}   
	#menubalkenunten 	{display:none;}   
	header {height:6rem;}
	#meinhamburger {
	visibility: visible;	
	top:2.3em;	
	}
#top_logo {
	visibility: hidden;	
	}
#top_logoxs {
	visibility: visible;	
	}

}

/* Tablets uä bis ca 760 px */
@media (min-width: 31rem) and (max-width: 36rem)  {
	#info_box {display:none;} 
	#menubalkenoben 	{display:none;}   
	#menubalkenunten 	{display:none;}   
	header {height:9rem;}
	#meinhamburger {
	visibility: visible;	
	}
}
/* größere  */
@media (min-width: 36rem) and (max-width: 45rem)  {     
	header {height:10rem;}
#kirchegatow {width:80%; margin-top: 2em;}

}
/* größere  */
@media (min-width: 45rem) and (max-width: 53rem)  {     
	header {height:11rem;}
#kirchegatow {width:70%; margin-top: 2em;}

}
/* größere  */
@media (min-width: 53rem)   {     
	header {height:15rem;}
	#info_box {	right:5em;	bottom:5em}
#kirchegatow {width:60%; margin-top: 2em;}

}