* {
  box-sizing: border-box; 
} 
:root {  
	--content-width: 1080px; 
}	
body {
	margin: 0;
	padding:0;
	
	 font-family:Tahoma, Geneva, sans-serif;
	 /* clamp(MIN, VAL, MAX) */
	font-size: clamp(1.5rem, 4vw + 1rem, 3rem);
	
	background-image: linear-gradient(to right, silver 10%,gray 100%);	
	
	/* Dieser Teil verhindert, das eine Border oder ein Padding, die Box vergrößert. */
    -webkit-box-sizing: border-box;
    -moz-box-sizing:     border-box;
    box-sizing:          border-box;
}
.wrapper {
	display: flex; 
  width:				100%;

/* 	border: 1px solid #0000e7; */
}

/* ###  Spalte Links, Rechts  #################################################### */
.left {
	border-right: 1px solid #e7e7e7;	/* zu Demonstration Zwecken */
	border: none;
}
.right {
	border-left: 1px solid #e7e7e7;	/* zu Demonstration Zwecken */
	border: none;
}
.left, .right{
	height: 100vh;
	width: calc((100% - 1080px) * 0.5);
}	
	
/* ###  mittlere Spalte mit Inhalt  #################################################### */			
.content { 
	display:flex;
	flex-wrap: wrap;
/* justify-content: center; /* Horizontal */
  /*align-items: center;     /* Vertikal */
  /*height: 100vh;           /* Optional: volle Höhe */
  
  	width:				1080px;

/* border: 1px solid #e7e7e7; */
}
.content, .background {
  background-image: url("/img/IMG_7560.jpg"); 
  background-position: center center;
  background-repeat: no-repeat; /* Do not repeat the image */
  background-size: cover; /* Resize the background image to cover the entire container */	
}

/* ###  Inhalt  #################################################### */	
.first_content, .second_content, .third_content, .fourth_content {
	margin-top: 20px;
	margin-left:20px;
	
	width:160px;
	height:160px;
	border: 1px solid #e7e7e7;
	border-radius:10px;

	display: flex; /* Macht den Container zum  Flex-Container */
	 justify-content: center; /* Horizontal */
   /*align-items: center;     /* Vertikal */
  /*height: 100vh;           /* Optional: volle Höhe */

  font-family: Rancho; /*Tangerine; /*fantasy;*/
  opacity: 0.5;
}		
.first_content {
	align-items: center;
  background-color: #959595;
  font-family:Rancho;
}
.second_content {
  align-items: center;
  background-color: #858585;
  font-family:Rancho;
}  
.second_content {
  font-family: Rancho; /*Tangerine; /*fantasy;*/
  opacity: 0.5;
}
.third_content {
	justify-content:left;
  background-color: #757575;
} 
.text {
	display: flex; /* Macht den Container zum  Flex-Container */
	 /*justify-content: center; /* Horizontal */
   align-items: center;     /* Vertikal */
  /*height: 100vh;           /* Optional: volle Höhe */
	/* vertical-align: middle;*/
	/*font-size: clamp(1.5rem, 4vw + 1rem, 3rem); */
	font-size: 1em;
}
.description{	
	display: block; /* Beendet Flexbox */
	/*width: 80%; 
	border: 1px solid #000; */
	width: 100vw;
	height:auto;

	align-items: center;     /* Vertikal */
	
	opacity: 0.5;	
	
	border-radius: 5px 10px 10px 5px;
	background-color: #FFFFFF; 
	margin-top:20px;
	margin-left:20px; 
	/*text-align:center; Text wird horizontal zentriert */
	padding:5px;
 
	position: relative; 
	z-index: 3;	
}	

@media only screen and (min-width: 1080px){
	body {
    background-image: url("/img/IMG_7560.jpg"); 
    background-repeat: no-repeat; /* Do not repeat the image */
    background-size: cover; /* Resize the background image to cover the entire container */	
  }
	.content, .background {
  background-image:none;
}
	.description{
		width: 900px;
	}
}
	
@media only screen and (max-width: 1080px){
	.description{
		/*width:90%;*/
		width:calc(100vw - 1080px) - 90vw;
	}
	.content {
		padding: 20px;
	}
	.third_content {
			background-color: #363535;
	}	
  .fourth_content {
			background-color: #fff;
	}	
}
	
@media only screen and (max-width: 500px){
	.first_content {
		background-image: url("/img/urlaub.jpg");
		background-repeat: no-repeat; /* Do not repeat the image */
		background-size: cover; /* Resize the background image to cover the entire container */
	}
}

@media only print {
	.no-print { display: none; } /* Klasse zum Ausblenden */
}