@charset "utf-8";
 
/*
* CSS-Design
* DUPLEX-Website
* Online-Schule für Gestaltung: Webdesign-Kurs
*/
 
/* Reset * * * * * * * * */
@import url('https://fonts.googleapis.com/css2?family=Bellefair&family=Fira+Sans+Condensed:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: bellefair, sans-serif;
}
 /* Gallery * * * * * * * * */
body{
    font-family: sans-serif;
}


h1{
    font-size: 2.5em;
	text-align: center;
    color: #fae5cc;
    margin: 30px 0 50px;
	padding-top: 60px;	
}
h2{
    font-size: 2em;
	text-align: center;
    color: #fae5cc;
    margin: 30px 0 50px;
	padding-top: 60px;	
}
h3{
    text-align: center;
    color: #fae5cc;
    margin: 30px 0 50px;
	padding-left: 20px;
}
.gallery{
   margin-left: 200px; 
}
.gallery img{
    width: 230px;
    padding: 5px;
    filter: grayscale(0);
    transition: 1s;
}

.gallery img:hover{
    filter:grayscale(1);
    transform: scale(1.1);
	
}
 
/* Layout * * * * * * * * */
 
header{
}
 
.wrapper{
}
 
footer{
}



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

.column {
float: left;
background: #454241;
border-style: ;
border-color:#fae5cc ;
margin: 25px 0px 25px 5%;
padding: px 0;
font: 400 0.9rem 'Bellefair', Helvetica, Arial, sans-serif;
text-align: center;
color: #fae5cc;
}

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

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



.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%;
}




@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 
{width: 100%;}
.column{
margin-left: 0;}
}
/* Navigation */

#navigation {
	float: right;
	margin-top: 30px;
}

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

#navigation li a {
	text-decoration: none;
	text-transform: uppercase;
	font-size: 1.25rem;
	/* 20px; */
	font-weight: 300;
	color: #fae5cc;
	padding: 15px 0;
}

#navigation li a:hover {
	color: #4697a8;
}
/* Drop-Down-Menü */
#navigation ul {
	position: absolute;
	top: 20px;
	left: 5px;
	background: #454241;
	width: 110px;
	box-shadow: 5px 5px 5px rgba(250, 229, 204, 0.5);
	display: none;
}

#navigation li {
	position: relative;
}

#navigation ul li a {
	display: block;
	font-size: 1.125rem;/* 18 Pixel */
	text-transform: none;
	padding: 5px 0px 0px 0px;
	border-bottom: 1px solid rgba(250, 229, 204, .2);
}

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

#navigation ul li a:hover {
	background: rgba(69,66, 65, 1);
	color: #4697a8;
}

#navigation li:hover ul {
	display: block;
}
/* Hero-Teaser */
.hero-projekte {
	background: #fff url('../images/Bodensee.jpg') center center no-repeat;
	background-size: cover;
	background-attachment: fixed;
	min-height: 500px;
	min-width: 25%;
}
.hero h1,
.hero h2 {
	color: #fff;
}

.hero h1 {
	margin-top: 30px;
}

.hero h2 {
	margin-bottom: 2%;
	font-weight: 400;
}

/*Preistabelle*/
table{
	font-size: 30px;
	color: rgb(250,229,204);
	/*border: 2px solid rgb(250,229,204);*/
	border-collapse: collapse;
	margin-left: 50px;
	margin-top: 200px;
	margin-bottom: 200px;
	background: rgb(69,66, 65);opacity: 1.5;
	
	
}
th{
	font-size:55px;
	text-align: left;
	padding-left: 55px;
}
td{

	/*border: 2px solid rgb(250,229,204);*/
	padding: 25px 55px;
	background: rgb(69,66, 65);opacity: ;
}




textarea{
    font-family: inherit;    
}

form {
    border: 3px solid rgb(250,229,204);
    width: 50%;
    background-color: rgb(69,66,65);
    margin-top: 70px;
    margin-left: 350px;
    padding-top: 5px;
    padding-left: 50px; 
    padding-right: 50px;
    padding-bottom: 10px;
}

form label {
	border: 1px solid rgb(250,229,204);
    display: block;
    font-size: 1em;
    color: rgb(250,229,204);
    padding-top: 10px;    
    
}

input,
textarea
{
    width: 100%;
    font-size: 1em; 
    padding: 10px;
    font-family: inherit;
    font-weight: lighter;
    border:5px inset rgb(70,151,168);
    outline: none;
    border-radius: 0em;
}    

input:focus,
textarea:focus { 
    border:5px inset rgb(138, 130, 113);
}

button[type=submit] {
    background-color: rgb(250,229,204);
	font-size: 1em;
    font-style: normal;
    cursor: pointer;
    padding: 10px;
    margin-top: 30px;
    border-radius: 0em;
    border:0px;
}


button[type=submit]:hover {
    background-color: rgb(250,229,204);
    font-size: 1em;
    font-style: normal;
    color: rgb(70,151,168);
    border-radius: 1em;
}
/*Footer*/

.social{
	text-align: center;
	padding-top: 20px;
	padding-bottom: 20px;
	color: #fae5cc;
}
.social a{
	font-size: 20px;
	display: inline-block;
	width: 25px;
	padding-top: 3px; 
	border-radius: 8px;
	color: #fae5cc;
}
.social a:hover{
	background-color: #4697a8;
}
.footer ul{
	list-style: none;
	text-align: center;
	padding-bottom: 20px;
}
.footer ul li{
	display: inline-block;
	padding: 10px 15px;
}
.footer ul li a{
	text-decoration: none;
	color: #fae5cc;
}
.footer ul li a:hover{
	text-decoration: none;
	color: #4697a8;
}

.copy-right{
	text-align: center;
	padding-bottom: 30px;
	color: #fae5cc;

}
.impressum{
	text-decoration: none;
	color: #fae5cc;
	padding-left: 50px;
}
.impressum a:{
	text-align: center;
	color: #fae5cc;
	padding-left: 10px;
}
.impressum a:hover{
	text-align: center;
	color: #4697a8;
	padding-left: 10px;
}
.Datenschutz{
	ext-align: center;
	color: #fae5cc;
	padding-left: 30px;	
}
.Datenschutz n{
	ext-align: center;
	color: #4697a8;
	padding-left: 0px;	
}
.Datenschutz n:hover{
	ext-align: center;
	color: #4697a8;
	padding-left: 30px;	
} 
.Name{
	text-align: center;
	color:#fae5cc;

}