/* /////////////////////// Webagentur ALL css ///////////////////// */

:root {
  --rot: #F44336;
  --weiss: #ffffff;
  --schwarz: #111111;
  --gelb: #D8B528;
  --gruen: #048291;
}

@font-face {
  font-family: RobotoSlab;
  src: url(fonts/RobotoSlab-VariableFont_wght.ttf);
}

body, html {
	font-family: RobotoSlab;
	color: var(--schwarz);
	scroll-behavior: smooth;
	}
	
.flex-hori-top {
	display: flex;
	flex-direction: row;
	#justify-content: space-between;
	justify-content: space-around;
	align-items: top;
	flex-wrap: wrap;
	}
	
a {
	transition: 0.3s;
	}
	
h1, h2, h3 {
	color: var(--gruen);
	}
	
/* ////////////////////// header ///////////////////////////// */

#In_Header .fa-bars {
	display: none;
	}
	
#Navi_top {
	display: none;
	}
	
/* ////////////////////// Navi_links ///////////////////////// */

#Navi_links {
  width: 220px;
  height: 100%;
  padding: 20px;
  position: fixed;
  z-index: 1;
  #top: 0;
  #left: 0;
  background-color: var(--schwarz);
  overflow-x: hidden;
  padding-top: 20px;
}

#Navi_links h1 {
	color: var(--weiss);
	margin-top: 16px;
	}

#Navi_links #User {
	  font-size: 1.2em;
	  font-weight: bold;
	  color: white;
	  }

#Navi_links a {
  padding: 6px 8px 6px 16px;
  text-decoration: none;
  font-size: 1.4em;
  color: var(--weiss);
  display: block;
}

#Navi_links a:hover {
  color: var(--gelb);
}

#Webagentur {
  text-align: center;
  position: absolute;
  bottom: 80px;
  }

#Webagentur .title {
  color: var(--weiss);
  font-size: 0.85em;
  }

#Webagentur a {
  font-size: 0.85em;
  }

/* /////////////////////// INHALT //////////////////////////// */

.mod_article {
  margin-left: 300px; /* Same as the width of the sidenav */
  font-size: 1.3em;
  padding: 0px 10px;
}

.ce_text {
	margin: 10px 0px 40px 0px;
	}
	
.roterBalken {
	height: 17px;
	}
	
.ce_gallery {
	margin: -10px 0px 40px 0px;
	}
	
figure img {
	width: 120px;
	transition: 0.3s;
	box-shadow: 0px 0px 6px 6px lightgrey;
	border-radius: 8px;
	cursor: pointer;
	margin: 20px;
	}
	
figure img:hover {
	margin-left: 40px;
	}
	
.caption {
	text-align: center;
	font-size: 0.9em;
	color: var(--gruen);
	}
	
#main {
	margin-bottom: 60px;
	}
	
mod_visitors {
	position: absolute;
	bottom: 200px;
	right: 20px;
	}
	
#main a {
  color: var(--gruen);
  }
  
  #main a:hover {
    color: var(--gelb);
    }
	
/* ////////////////////// form /////////////////////////// */

.ce_form {
	margin: 0px 0px 60px 0px;
	}

input.text {
	width: 380px;
	height: 50px;
	border-radius: 8px;
	margin-bottom: 10px;
	font-family: RobotoSlab;
	}
	
textarea {
	width: 380px;
	height: 150px;
	border-radius: 8px;
	margin-bottom: 10px;
	font-family: RobotoSlab;
	}
	
button.submit {
	width: 388px;
	height: 50px;
	border-radius: 8px;
	margin-bottom: 10px;
	font-family: RobotoSlab;
	font-size: 1.0em;
	transition: 0.3s;
	}
	
button.submit:hover {
	background: var(--rot);
	color: var(--weiss);
	}
	
/* /////////////////////////////// scroll to top ///////////// */

#up {
  display: none; /* Hidden by default */
  position: fixed; /* Fixed/sticky position */
  bottom: 30px; /* Place the button at the bottom of the page */
  right: 30px; /* Place the button 30px from the right */
  z-index: 99; /* Make sure it does not overlap */
  border: none; /* Remove borders */
  outline: none; /* Remove outline */
  background: var(--gruen);
  color: var(--weiss);
  cursor: pointer; /* Add a mouse pointer on hover */
  padding: 8px; /* Some padding */
  border-radius: 10px; /* Rounded corners */
  font-size: 1.3em;
  transition: 0.3s;
}

#up:hover {
  background-color: var(--gelb);
}

.fa-circle-arrow-up {
  color: white;
  }