:root{
	--fob-orange: #e09020;
	--yellow-box: rgba(244, 245, 184, 0.48);
	--red-box: rgba(233, 147, 129, 0.18);
	--blue-box: rgba(141, 129, 233, 0.18);
	--grey-box: rgba(0, 0, 0, 0.08);
	--switch-box: linear-gradient(0.25turn, var(--yellow-box), var(--red-box), var(--blue-box));
}

table{
	display: flex;
	justify-content: center;
	align-items: center;
}
a{
	color: black !important;
	text-decoration: none;
}
p{
	font-family: Arial, Helvetica, sans-serif;
	color: black !important;
}

/* Alles zur den Boxen */
.box{
	padding: 110px;
}
.yellow{
	background-color: var(--yellow-box);
}
.red{
	background-color: var(--red-box);
}
.blue{
	background-color: var(--blue-box);
}
.grey{
	background-color: var(--grey-box);
}
.trans{
	background: var(--switch-box);
}

/* Bilder/Logo/Filter verändern/übereinander */
img{
	max-width: 220px;
}
.unten{
  top: 0;
  left: 0;
}
.logo{
	position: absolute;
  top: 5px;
  left: 5px;
	width: 75px;
	background-color: var(--back-white);
}
.logo-down-left{
	position: absolute;
  bottom: 10px;
  left: 5px;
	width: 75px;
	background-color: var(--back-white);
}
.logo-big{
	position: relative;
	max-width: 150px;
	left: 10%;
}
.oben{
  position: relative;
  top: 0;
  left: 0;
}
.bilder{
  position: relative;
  top: 0;
  left: 0;
}

.image-yellow{
	max-width: 220px; 
  background: 
  /* make both colors the same for a single color
     change one of the colors for a two-color effect*/ 
  linear-gradient(
    rgba(255, 0, 0, 0.45), 
    rgba(315, 212, 707, 0.45)
  ),
	url(pics/Bild4.jpg);
  background-repeat: no-repeat;
  background-size: cover;
}

/* Footer */
footer{
	position: relative;
	overflow: hidden;
	display: flex;
	justify-content: center;
	align-items: center;
}
.footer-content{
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	text-align: center;
	display: block;
	max-width: 695px;
}
.footer-content h3{
	font-size: 2.1rem;
	font-weight: 500;
	text-transform: capitalize;
	line-height: 3rem;
}
.footer-content p{
	line-height: 28px;
	font-size: 14px;
	color: #cacdd2;
}
.footer-bottom p{
	float: left;
	font-size: 14px;
	word-spacing: 2px;
	text-transform: capitalize;
	text-align: center;
}
.footer-bottom span{
	text-transform: uppercase;
	opacity: .4;
	font-weight: 200;
}
.footer-menu{
float: right;
}
.footer-menu ul{
display: flex;
}
.footer-menu ul li{
padding-right: 10px;
display: block;
}
.footer-menu ul li a{
color: #ffffff;
text-decoration: none;
}
.footer-menu ul li a:hover{
color: #27bcda;
}

/* Ab 690px veränderung */
@media screen and (max-width:690px) {
.box{
	padding: 65px;
}
.logo-down{
	position: absolute;
  bottom: 5px;
  left: 5px;
	max-width: 75px;
}

img{
	max-width: 130px;
}
.unten{
	max-width: 5px;
}
.oben{
	max-width: 5px;
}
.logo-big{
	position: relative;
	max-width: 100px;
	left: 10%;
}

/* Footer Größe */
.footer-content{
	font-size: 15px !important;
	max-width: 415px;
}

/* .logo{K
	position: absolute;
  bottom: 0;
  left: 0;
	width: max-content;
}

.logo-down-left{
	position: absolute;
  bottom: 0;
  left: 0;
	width: max-content;
} */
}