/* Stylesheets für Immobilienplanung.com */

/* allgemeines */

body { 
	margin:0; 
    background-color:#ffffff; 
    font-family: Helvetica, Arial, Verdana, sans-serif;
	line-height: normal;
	color: #000000;
    font-size:16px;
}

.wrapper {
	margin:0 auto;
	width:720px;
}


/* Header */

header {
	background-color:rgb(227, 227, 227);
	padding:60px 0 1px 0;
}
.logo span {
	font-size:28px;
	font-weight: bold;
	letter-spacing: 0.04em;
}
.logo {
	position:relative;
	
}
.logo::before {
	content:"";
	position:absolute;
	left:-120px;
	top:8px;
	width:95px;
	height:11px;
	background-color:rgb(204,0,0);
}

header ul {
	list-style-type: none;
	margin:70px 0px 5px;
	padding:0;
}
header li {
	display: inline-block;
}
header li a {
	display: inline-block;
	padding: 0 6px;
	text-decoration:none;
}
header li:first-child a {
	padding-left:0;
}
header li:last-child a {
	padding-right:0;
}

.hamburger,
#toggle {
	display:none;
}




/* .image { margin-right: 10px; margin-bottom: 10px;} /* allgemeiner Rahmen*/
/* überschriften */

/* Titel */

h1, h2, h3, h4 {
	font-family: Helvetica, Arial, Verdana, sans-serif;
	line-height: normal;
	color: #000000;
	line-height: normal;
	font-weight: bold;
}

h1 { 
    font-size: 40px; 
    display:inline;
}

/* Überschrift Textseiten */

h2 { 	
	font-size: 28px;
}

/* Überschrift Projekte */

h3 { 
	font-size: 21px;
	margin-bottom: 10px;
}

/* Überschrift Leistungen (1.Seite) */

h4 { 
    font-size: 20px; 
	margin-top: -2px;
	margin-bottom: 5px;
	letter-spacing: 0.5px
}


					
						
/* fliesstext */

main {
	font-family: Arial, Helvetica, Verdana, sans-serif;
	font-size: 17px; 
	font-style: normal; 
	line-height: normal; 
	font-weight: normal;
	color: #000000;
	padding:60px 0;
	
}
main p {
	margin:0;
	padding:0;
	line-height:21px;
	margin-bottom: 0.8em;
}
li { 
     color: #000000; 
     text-decoration: none; 
}

.text { font-family: Arial, Helvetica, Verdana, sans-serif;
     font-size: 16px; font-style: normal; line-height: normal; font-weight: normal;
     color: #FFFFFF; text-decoration: none; }

.textfett { font-family: Arial, Helvetica, Verdana, sans-serif;
     font-size: 16px; font-style: normal; line-height: normal; font-weight: bold;
     color: #FFFFFF; text-decoration: none; }

.textkontakt { font-family: Arial, Helvetica, Verdana, sans-serif;
     font-size: 16px; font-style: normal; line-height: normal; font-weight: normal;
     color: #000000; text-decoration: none; }


.projekttext { 
     font-family: Arial, Helvetica, Verdana, sans-serif;
     font-size: 16px; font-style: normal; line-height: normal; font-weight: normal;
     text-decoration: none; 
     width=655px; margin-left:0px;
    }

.vorhernachher
     { font-family: Arial, Helvetica, Verdana, sans-serif;
     font-size: 8pt; font-weight: bold;
     color: white; text-decoration: none; 
     text-align:right; padding-right:10px;}

.nachoben    { position:absolute; left:725px;   }

img {
	border:0px solid #999999; 
    margin:0px; 
    height:auto;
    display:inline-block;
    float:none;
}

td {text-align:left; vertical-align:top;}



a { 
    color: #cc0000;	
	text-decoration: none;
}

a:focus, a:hover {
  text-decoration: underline;
}


nav .navigation { 
	font-family: Arial, Helvetica, sans-serif; 
    font-size: 14px; 
    font-style: normal; 
    line-height: normal; 
    color: #626160;  
	letter-spacing: 0.05em;
}


nav .active { 
     color: #cc0000; 
}




p .hinweis {  color: #000099;  }

/* Definition für weissen Textblock: Randabstand 70 Pixel, Breite 655px, Innenabstand 5px, */

.inhalt {margin-left:70px; background-color:white; width:655px; padding:5px;
         font-family: Arial, Helvetica, Verdana, sans-serif;
         font-size: 8pt; font-style: normal; line-height: normal; font-weight: normal;
         color: #000000; text-decoration: none; }
         
.columns {
	columns:2;
	column-gap: 40px;
}
.columns-home {
	display:flex;
}
.column-home-1 {
	width:480px;
}
.column-home-1 img:first-child {
	margin-right:5px;
}
.column-home-2 {
	width:calc(100% - 380px);
	margin-left:15px;
}

.column-kontakt-2 {
	width:calc(100% - 30px);
	margin-left:15px;
}
   
#publikationen img,
#hochhaus-ensemble img,
#Wohnhaus-1903 img {
	/* max-width:48%;*/
}     

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * 
* 
* Projekte
*
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

.projekt .imagecontainer {
	display:flex;
	flex-wrap:wrap;
  	justify-content: left;
  	gap:10px;
}
.projekt .imagecontainer img {
	box-sizing:border-box;
}
.projekt .imagecontainer img.grey-border {
	border:1px solid #d8d6d6;
}
.projekt .imagecontainer.side-by-side img {
	max-width:calc(50% - 3px);
}
.projekt .subheading {
	text-align:center;
	margin:30px 0 20px 0;
}

.projekt.publikation {
	max-width:550px;
}



/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * 
* 
* Footer
*
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
        
footer {
	background-color: rgb(227, 227, 227);
	padding:40px 0;
}

footer ul {
	list-style-type: none;
	margin:40px 0;
	padding:0;
}

footer p {
	color: #333333;
}

footer li {
	display: inline-block;
}

footer li a {
	display: inline-block;
	padding: 0 10px;
	color: #626160;  
	text-decoration:none;
}

footer li:first-child a {
	padding-left:0;
}
footer li:last-child a {
	padding-right:0;
}

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * 
* 
* Mobile
*
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

@media only screen and (max-width: 959.9px) {
  	
  	body {
  		hyphens: auto;
  	}
  	.wrapper {
    	width: 100vw;
    	box-sizing:border-box;
    	padding:0 30px;
  	}
  
  /* Header */
  
  
	.logo::before {
		left:0;
	}
	.logo span {
		margin-left:120px;
		display:block;
	}
	header ul {
		margin-top:50px;
	}
	
	
}

@media only screen and (max-width: 779.9px) {
	
	/* Projektbeispiele */
	.projekt .imagecontainer.side-by-side img {
	  max-width: calc(49% - 3px);
	}
	
}
@media only screen and (max-width: 739.9px) {
	
	/* Home */
	.column-home-1 {
	  	width:50%;
	}
	.column-home-1 img {
		width:90%;
	}
	.column-home-2 {
		margin-left:0;
		width:50%;
	}

}
@media only screen and (max-width: 579.9px) {

	/* Header */
	
	.hamburger {
		margin-top:25px;
		display:block;
	}
	.hamburger span {
		width:30px;
		height:3px;
		display:block;
		margin:3px 0;
		background-color: rgb(204,0,0);
	}
	#toggle {
	  	appearance: none;
		width: 30px;
		height: 20px;
   		padding:0;
   		margin:0;
   		cursor:pointer;
   		margin-top:-20px;
   		display:block;
	}

	
	#nav {
		margin-top:10px;
	  	overflow: hidden;  
	  	transition: height .5s ease-in-out;
	  	height: 0;
	  
	}
	#toggle:checked ~ #nav {
	  height: 160px;
	}
	header li {
		display:block;
		padding-left:0;
	}
	header li a {
		padding:3px 0;
	}
	
	.projekt .imagecontainer img {
	  	width:100%;
	}

}

@media only screen and (max-width: 499.9px) {

	/* Header */
	
	.logo span {
		font-size: 22px;
		margin-left:100px;
	}
	.logo::before {
		top:4px;
		width:80px;
		height:9px;
	}
	
	/* Home */
	.columns-home {
		flex-wrap: wrap;
	}
	.column-home-1 {
	  	width:100%;
	  	order:2;
	}
	.column-home-1 img {
		width:100%;
	}
	.column-home-2,
	.column-kontakt-2 {
		width:100%;
		order:1;
		margin-left:0;
	}
	.column-home-1 img:first-child {
		margin-right:0;
		margin-bottom:5px;
	}
	
	/* Projektbeispiele */
	.projekt .imagecontainer.side-by-side img {
	  max-width: initial;
	  	width:100%;
	}
	.projekt .imagecontainer img {
	  	width:100%;
	}
}
@media only screen and (max-width: 399.9px) {

	.wrapper {
		padding:0 20px;
	  }
	  
	/* Header */
	
	header {
		padding-top:40px;
	}
	.logo span {
		font-size: 19px;
		margin-left:65px;
	}
	.logo::before {
		top:5px;
		width:50px;
		height:7px;
	}
	
	/* Content */
	
	main h1 {
		text-transform:initial;
	} 
}