/*  Ein Kommentar in CSS */

/*  Der * definiert den "global reset" Hier werden alle Elemente angesprochen, die später nicht anders definiert werden. */
*
{
	/* font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; */
	/* font-family:  arial, sans-serif; */
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	font-size:100%;
}


html,body
{
	height:100%;
}

body 
{
	background:rgb(209, 205, 197);
	color:rgb(88, 88, 88);
	margin:0px;
	line-height: 130%;
}

.wrapper-all
{
	width:1200px;
	background:#fbfdf2;
	margin:auto;
}

#top
{
	color:rgb(209, 205, 197);
	height:120px;
	background: rgb(30, 30, 30);
	display: flex;
}

#top-mobile
{
	display: none;
}

#logo
{
	width:10%;
	height:auto;
	display: flex;
	justify-content: center;
	align-items: center;
}

#logo img
{
	width: 70%;
	max-width: 100%;  
	padding: 0px;
    margin-left: 0;
    margin-right: 0; 

}

#domain-navi
{
	width: 90%;
}

#domain
{
	height: 33%;
	display:flex;
	justify-content: space-around;
	align-items:center;
}



#position-domain
{
	font-size: 130%;
}

nav
{
	height:33%;
}
#navibox
{
	border-top: 1px solid rgb(209, 205, 197);
	box-sizing: border-box;
	height:100%;
	display:flex;
}
.navipunkt
{
	width: 33%;
	display:flex;
	justify-content: space-evenly;
	align-items:center; 
	box-sizing: border-box;

}

.dropdown
{
	background:rgb(30, 30, 30);
	position:absolute;
	top: 80px;
	z-index:1002;
	line-height:25px;
	display:none;
	padding:5px;
}

.navipunkt:hover .dropdown
{
	display:block;
}

.navipunkt a
{
	height: 100%;
	width: 100%;
	display:flex;
	justify-content: space-evenly;
	align-items:center;
}

.dropdown_pkt
{
	height: 30px;
	margin: 5px;
	/* border: solid 1px beige; */
}

.content
{
	margin-left: 80px;
	margin-right: 80px;
}

h1
{
	padding: 1%;
	font-size: 150%;
	line-height: 110%;
}
h2
{
	font-size: 130%;
}

a
{
	color:rgb(209, 205, 197);
	text-decoration:none;
}
p a
{
	color: blue;
}
li a
{
	height: 300px;
	color: blue;
}

.tap a
{
	color: blue;
}

summary
{
	border-radius: 3px;
	background-color: rgb(209, 205, 197);
	padding: 5px;
	margin: 10px;
}


img {
	max-width: 46%;
	height: auto;
    display: block;
	padding: 10px;
    margin-left: auto;
    margin-right: auto 
}



.nebeneinander
{
	display: flex;
}

footer
{
	color: brown;
	width: 100%;
	height: 50px;
	background: rgb(30, 30, 30);
	display: flex;
	justify-content: space-around;
	align-items:center;
}

.footerpunkte
{
	height:100%;
	padding-left: 1rem;
	padding-right: 1rem;
} 

.footerpunkte a
{
	height: 100%;
	width: 100%;
	display:flex;
	justify-content: space-evenly;
	align-items:center;
}


/* MEDIA QUERY */
@media screen and (max-width:1100px) {


#top
{
	height:120px;
}
/*  */

.wrapper-all
{
	width:96%;
	_height:1200px;
	_background:red;
	margin:auto;
}	
.content
{
	margin-left: 10px;
	margin-right: 10px;
}

.tap
{
	background-color: rgb(209, 205, 197);
	height:48px;
	width: max-content;
	margin: 0.2rem;
	padding-left: 1rem;
	padding-right: 1rem;
} 

.tap a
{
	color: rgb(30, 30, 30);
	height: 100%;
	display:flex;
	align-items:center;
}

}

@media screen and (max-width:820px) {


.wrapper-all
{
	width:96%;
	margin:auto;
}
.content
{
	width: 94%;
	margin-left: 10px;
	margin-right: 10px;
}

#top
{
	display: none;
}

#top-mobile
{
	display: block;
	color:rgb(209, 205, 197);
	background: rgb(30, 30, 30);
}

#domain-logo
{
	height: 50px;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-bottom: 5px;
	border-bottom: solid 1px rgb(209, 205, 197);
}

.buttonbox
{
	display: flex;
}

.navipunkt
{
	height:48px;
	width: 100%;
	margin: 5px;
}
.nebeneinander
{
	display: block;
}

img
{
	max-width:94%;
	height:auto;
}


}

@media screen and (max-width:480px) {

#position-domain
{
	font-size: 5.5vw;
}

h1
{
	font-size: 5vw;
}

h2
{
	font-size: 5vw;
}

.tap
{

	width: 94%;
	margin: 0.2rem;
	padding-left: 0.5rem;
	padding-right: 0rem;
} 

.footerpunkte
{
	height:100%;
	padding-left: 0rem;
	padding-right: 0rem;
} 

}

@media screen and (max-width:320px) {

	h1
	{
		font-size: 6vw;
	}
	
	h2
	{
		font-size: 6vw;
	}	

}