:root {
    --document_bg_color_1: #FFF8DC;
    --document_bg_color_2: #FFF8DC;
	
    /* Layout: */
    --header_height: 10rem;
    --footer_height: 3.5rem;
    
    --border_radius: 5px;
}

html {
    font-size: 62,5%;
    padding: 0;
    background-attachment: fixed; /* Verlauf scrollt nicht mit */
    background-image: linear-gradient(var(--document_bg_color_1), var(--document_bg_color_2));
}

body {
    font-family:  Verdana, Arial, Helvetica, sans-serif;
    font-size: 62,5%;
    text-align: left;
    
    min-width: 320px;
    max-width: 1900px;
    min-height: 100vh; /* footer immer unten */
    padding: 0 0 var(--footer_height) 0; /* Platz für footer */
    position: relative; /* für position:absolute des footers */
    
    background-color: #43CD80;
    box-shadow: 0 1px 9px rgba(0, 0, 0, 0.4);
    
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box; /* padding wird nicht zur Höhe addiert */
}

* {
  margin:0;
  padding:0;
}

a {
    color: var(--link-color);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

article, aside, details, figcaption, figure, footer, header, main, nav, test, section, summary {
    /* neue HTML5-Blockelemente */
    display: block;
}

strong, b {
    font-weight: bold;
}

em, i {
    font-style: italic;
}

small {
    font-size: 0.8em;
}


h1 {
    font-weight: bold;
    font-weight: normal;
    font-style: normal;
	text-align: center;
    margin-bottom: 1rem;	
}

h2 {
	text-align:center;
}





p {
    line-height: 1.5em;
    margin-bottom: 1rem;	
}



.box1 {
	border: 1px solid #bbb;
	padding: 10px;
	width: 25%;
	background-color: #FAEBD7;
}

.box2 {
	border: 1px solid #bbb;
	width: 75%; 
	padding: 10px;
	background-color: #FAEBD7;	
}

.box3 {
	border: 1px solid #bbb;
	width: 100%; 
	padding: 10px;
	background-color: #fff8dc;	
}

.box4 {
	border: 1px solid #bbb;
	width: 90%; 
	padding: 10px;
	background-color: #fff8dc;	
    margin-left: auto;
    margin-right: auto;
}

.box5 {
	border: 1px solid #bbb;
	width: 100%; 
	padding: 10px;
	background-color: #fff8dc;	
    margin-left: auto;
    margin-right: auto;
}
.box6 {
	border: 1px solid #bbb;
	width: 100%; 
	padding: 10px;
	background-color: #fffacd;	
    margin-left: auto;
    margin-right: auto;
}

#box3 {
	display: flex;
	flex-flow: row wrap;
	width: 100%;
	float: left;
    margin: 1rem 0rem 1rem 0rem;
    border: 0px solid #bbb;
}

#rahmen2 {
	border: 1px solid #3CB371;
	border-radius: 20px; 
	padding: 10px;	
}

.rahmen5 {
	border: 1px solid black;
	border-radius: 20px; 
	padding: 10px;	
}

p:last-child {
    margin-bottom: 0 !important;
    /* letzter Absatz soll Elemente nicht zusätzlich vergrößern */
}

/* Standard-Erscheinungsbild in Chrome & Safari entfernen: */
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
}

.figure_right {
    margin: 2rem auto;
}

.figure_right img {
    max-width: 100%; /* Breite der Bilder an figure anpassen */
    display: block;
    margin: 0 auto; /* zentrieren */
}

.titelbild {
    max-width: 100% auto;
}

img {
	max-width:100%;
	height: auto;
}

.titelbild img {
    width: 100%; /* Breite der Bilder an figure anpassen */
    display: block;
    margin: 0 auto; /* zentrieren */
}

.clearfix::after {
    content: ".";
    display: block;
    height: 0;
    line-height: 0;
    clear: both;
    visibility: hidden;
}

test{
  display: flex;
  flex-flow: row;
  padding-top: 20px;
}

#header1 {
  background: #f0ffff;
  width: 100%;
  position: relative;
  top: 0;
  text-align: center;
  transition: 200ms;
  height: 7rem;
}




    #rechts article:last-child {
        margin-right: 0;
    }
    #links article:last-child {
        margin-left: 0;
    }

.marquee {
 width: 100%;
 margin: auto;
 padding: 2px;
 overflow: hidden;
 white-space: nowrap;
 border: solid 0px #CCCCCC;
 animation: marquee 10s linear infinite;
}

article, aside, details, figcaption, figure, footer, header, main, nav, section, summary {
    /* neue HTML5-Blockelemente */
    display: block;
}



#content {
    margin-bottom: 3rem; /* Platz für "sidebar" unterhalb */
}

#hg {
width: 100%;
min-height: 100vh;
padding: 20px;
background-color: #54FF9F;
color: black;
border-radius: 5%;
z-index: o;
}

@media (min-width: 1025px) {
    body {
        margin: 0 auto; /* zentrieren */
    }
}

@media (min-width: 801px) {
    .figure_right {
        max-width: 30%;
        float: right;
        margin: 0 0 1rem 1rem;
    }
    
    .figure_right img {
        width: 100%; /* Bild soll gesamte figure ausfüllen */
        height: auto; /* proportionale Skalierung */
        margin: 0;
    }
}


@media (min-width: 1025px) {

#content {
  background-color: #43CD80;
	width: 50%;
  margin-left: 0%;
  margin-right: 0%;
  padding-top:0px;
  padding-bottom:20px;
  border-top:1px solid #bbbbbb;
  padding-left:10px;
  padding-right:10px;
}

#rechts {
  background-color: #43CD80;
  width: 25%;
  float: right;
  padding-top:30px;
  padding-bottom:20px;
  border-top:0px solid #bbbbbb;
  padding-left:10px;
  padding-right:10px; 
 
}

#links {
  background-color:#43CD80;
	width: 25%;
	float: left;
  padding-top:30px;
  padding-bottom:20px;
  border-top:0px solid #bbbbbb;
  padding-left:10px;
  padding-right:10px; 

}

footer {
	font: Verdana, Arial, Helvetica, sans-serif;
  font-size: 10pt;
  background-color:#43CD80;
  text-align: center;
  border:1px solid #bbbbbb;
  
    color: black;
    padding: 1rem;
    
    /* footer immer unten: */
    position: relative;
    bottom: 0;
    left: 0;
    right: 0;
}

    #rechts article:last-child {
        margin-right: 0;
    }
    #links article:last-child {
        margin-left: 0;
    }





.marquee {
 width: 100%;
 margin: auto;
 padding: 2px;
 overflow: hidden;
 white-space: nowrap;
 border: solid 0px #CCCCCC;
 animation: marquee 10s linear infinite;
}

}


/* Header: */

#header {
    height: var(--header_height);
    position: relative; /* wegen position:absolute von nav */
    background: url(logo.jpg) no-repeat left;
    background-color: #43CD80;
    background-size: cover;
}

	@media (max-width: 750px) {
    #header {
    height: calc(var(--header_height) / 4 * 3); 
	}
}

@media (max-width: 600px) {
    #header {
        height: calc(var(--header_height) / 2);
        background-position: left top;
    }
}

* {
  margin: 0;
  padding: 0;
  font-family: 'Roboto', sans-serif;
  box-sizing: border-box;
}


#header1 nav#normal {
	color:#C83541;
	display: inline-block;
	
}

@media screen and (max-width:1400px) {
	#header1 nav#normal {display: none;}
}

@media screen and (min-width:1400px) {
	#header1 nav#mobile {display: none;}
}

#header1 nav#normal ul {
	margin 0;
	padding: 0;
	transition: all 300ms;
	display: inline-block;

}

#header1 nav#normal ul li {
	margin: 0;
	padding: 0;
	float: left;
	list-style: none;
	position: relative;
	transition: all 300ms;
}

#header1 nav#normal ul li a {
	display: inline-block;
	padding: 2rem;
	float: left;
	min-width: 12rem;
	text-align:left;
	font-size:1rem;
	color: black;
	margin: 0 1px 0 0;
	text-decoration: none;
	background: #F0FFFF;
	font-weight: 300;
	transition: all 300ms;
	font-family: 'Roboto', sans-serif;
}

#header1 nav#normal ul li:hover > a {
	background: #54FF9F;
}

#header1 nav#normal ul li ul {
	overflow: hidden;
	position: absolute;
	top: 100%;
	left: 0;
	width: 100%;
	transition: 300ms all;
	max-height: 0;
	z-index: 10000;
}

#header1 nav#normal ul li ul li {
	border-bottom: 1px solid #8c1e31;
}

#header1 nav#normal ul li:hover > ul {
	max-height: 700px;
}

-----------------------------

#header1 nav#mobile {
	color: #3CB371;
	display: none;
}

@media screen and (max-width: 1400px) {
	#header1 nav#mobile { display: block;}
}

#header1 nav #menu {
	padding: 2.17rem 5% 2.17 5%;
	float: center;
	width: 100%;
	text-align:center;
	font-size: 2rem;
	color:black;
	cursor: pointer;
	font-weight: 300;
	transition: all 500ms;
	font-family: 'Roboto', sans-serif;
}

#header1 nav#mobile ul {
	width: 100%;
	margin: 0;
	padding: 0;
	max-height: 0;
	transition: all 500ms;
	overflow: hidden;
	float: left;
}

#header1 nav#mobile:hover > ul {
	max-height: 800px;
}

#header1 nav#mobile ul li {
	margin: 0;
	padding: 0;
	float: left;
	width: 100%;
	list-style: none;
	position: relative;
	tansition: all 500ms;
}

#header1 nav#mobile ul li a {
	display: inline-block;
	padding: 2.17rem 5% 2.17rem 5%;
	float: left;
	min-width: 12rem;
	width: 100%;
	text-align:center;
	font-size:1rem;
	color: black;
	text-decoration: none;
	background: #F0FFFF;
	font-weight: 300;
	transition: all 300ms;
	font-family: 'Roboto', sans-serif;
}

#header1 nav#mobile ul li:hover > a {
	background: #54FF9F;
}

#header1 nav#mobile ul li ul {
	width: 100%;
	transition: all 500ms;
	max-height:0;
	overflow: hidden;
	float:left;
}

#header1 nav#mobile ul li ul li {
	display: block;
	float: left;
	background: #F0FFFF;
	transition: all 500ms;
}

#header1 nav#mobile ul li ul li a {
	background: #F0FFFF;	
}

#header1 nav#mobile ul li:hover > ul {
	max-height: 500px;
}



/* Elemente im Content: */

#content h1 {
    color: var(--heading_color);
    font-size: var(--heading_font_size);
    line-height: 1.2em;
}

#content article {
	margin: 0px;	
}

@media (max-width: 600px) {	
    #content h1 {
        font-size: calc(var(--heading_font_size) / 1.3);
    }
}


#content p {
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    hyphens: auto;
}

#content figcaption {
    font-size: var(--small_font_size);
    font-style: italic;
    margin-top: .5rem;
}

/* Content & rechts links: */

#content {
    padding: 0 1.5rem;
    margin-bottom: 1rem; /* Platz für "sidebar" unterhalb */
}
    
    #links {
	    padding: 0 1.5rem;

    }
	
    #rechts {
	    padding: 0 1.5rem;
		
    }
}

@media (min-width: 801px) {

    #content {
        width: 50%;
		margin: 0 auto;
		padding: 1.5rem 1.5rem 0 1.5rem;
		    border: 0px solid #bbb;
    }
    
    #links {
        width: 25%;
		margin: 0 auto;
        padding: 1.5rem 1.5rem 0 1.5rem;
        float: left;
		border: 0px solid #bbb;
    }
	
    #rechts {
        width: 25%;
		margin: 0 auto;
        padding: 1.5rem 1.5rem 0 1.5rem;
        float: right;
		border: 0px solid #bbb;
    }	
}

@media (max-width: 800px) {

    #links, #rechts {

        float: none;

        width: 100%;

    }
	
	test {
			display: flex;
			flex-flow: column;
	}
	
	

	main {
		display: flex;
		order:-1;
	}

}




/* Elemente in der Sidebar: */


#links article {
    margin: 0 0 2rem 0;
    padding: 0 1rem 1rem 1rem;
    background-color: #3CB371;
    color:#f0ffff;
	width:100%;
    border: 1px solid #000000;
}

#links article h1 {
    color: #f0ffff;
    font-family: var(--base_fonts);
    font-weight: bold;
    font-style: normal;
    font-size: 1rem;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    
    margin: 0 -1rem 1rem -1rem;
    padding: 0.4rem 1rem;
    border-bottom: 1px solid #000000;    
    background-color: #3CB371;

}

#links article h1 a {
    color: #fff; /* falls Überschriften verlinkt sind */
}


#rechts article {
    margin: 0 0 2rem 0;
    padding: 0 1rem 1rem 1rem;
    background-color: #3CB371;
    color: #f0ffff;
    border: 1px solid #000000;
}

#rechts article h1 {
    color: #f0ffff;
    font-family: var(--base_fonts);
    font-weight: bold;
    font-style: normal;
    font-size: 1rem;
    
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border-bottom: 1px solid #000000;    
    margin: 0 -1rem 1rem -1rem;
    padding: 0.4rem 1rem;
    
    background-color: #3CB371;

}

#rechts article h1 a {
    color: #fff; /* falls Überschriften verlinkt sind */
}


img {
	padding: 0;
	margin: 0;	
	width: 100%;  /* Bild passt sich an verfügbaren Raum im li an */
}

button {
  padding: 0.1em;
}

     /* Large screens */
@media all and (min-width: 35em) {

	img {
		padding: 10 em;
		margin: 0;	
		width: 100%;  /* Bild passt sich an verfügbaren Raum im li an */
	}

	button {
		padding: 0.1em;
	}

	button:focus, 
	button:hover {
		background: #09c;
	}
}

@media all and (min-width: 35em) {
	button {
		padding: 0.1em;
		width: 10em;
		height: 7.5em;
		position: relative;	
	}

	button img {
		border: 0;
		position: absolute;
		left: 0%;
		top: 0%;
		z-index: 0;
		box-shadow: 0;
		width: 10em;
		transition: all 1s;			
	}

	button:focus img, 
	button:hover img {
		border: 1em solid #eee;
		border-radius: 1em;
		box-shadow: 0px 0px 0px #333;
		width: 300%;
		position: absolute;
		left: -4%;
		top: -4%;
		z-index: 5;

		transition: all 1s;		
	}	
}









#gallery {

	position: relative;

	margin: 0;

	background: none;

	border: none;

}



#gallery figure {

	position: absolute;

	display: inline-block;

	top: 0;
	left: 0em;

	z-index: 1;

	animation: wechseln 15s infinite;

}



#gallery figure:last-of-type {

	position: relative;

}



#gallery > figure figcaption {

	position: absolute;

	left: 1em;

	font-size: 2em;
	font-weight: bold;

	bottom: 0.5em;

	z-index: 2;

	color: white;

}



@keyframes wechseln {

	0% {

		opacity: 0;

	}

	20% {

		opacity: 1;

	}

	40% {

		opacity: 1;

	}

	60% {

		opacity: 0;

	}

	100% {

		opacity: 0;

	}

}



#gallery figure:nth-of-type(2) {

	animation-delay: 5s;

	opacity: 0;

}



#gallery figure:nth-of-type(3) {

	animation-delay: 10s;

	opacity: 0;

}

#gallery figure:nth-of-type(4) {

	animation-delay: 15s;

	opacity: 0;

}



    <style>
      table {width: 95%; border-collapse: collapse;}
      th {
        background-color: #666; 
        color: #fff;

	padding:1em;
      }
      tr {
        background-color: #f0ffff;
        color: #000;

	padding:1em;
      }
      tr:nth-child(odd) {
        background-color: #54FF9F;
        color: #000;

      }
      td {

 	text-align: center;

      }

 
     td:nth-child(3) {

 	text-align: right;

      }

       @media screen and (max-width: 800px) {

 	thead {

 		display: none;

 	}

 	tr:first-child {

 		border-top: 2px solid lightblue;

 	}

 	tr {

 		border-bottom: 2px solid lightblue;

 		padding: .5em 2em 1em;

 	}

 	table,
 	tbody,
 	tr {

 		display: block;

 	}

 	tbody th {

 		display: block;

 		font-weight: bold;

 	}

 	th a {

 		font-weight: normal;

 	}

 	td {

 		display: inline-block;

 		min-width: 30%;

 		padding: .2em 2em;

 		text-align: left;

 	}

 	td:nth-child(3) {

 		text-align: left;

 	}

 }


 
 @media screen and (max-width: 600px) {

 	td {

 		display: block;

 	}

 	tr {

 		padding: .5em .5em 1em;

 	}

 }
    </style>



p.info1 {

	display: table;
	width: calc(100% - 10px);

	padding: 0px;

}



p.info2 {

	display: table-cell;

	width: 50%;

	padding: 0px;

}


p.info3 {

	display: table-cell;

	width: 35%;

	padding-bottom: 0px;

}


p.info4 {

	display: table-cell;

	width: 65%;

	padding-bottom: 0px;

}