﻿/*   CSS für Home Einigkeit Palsweis Priel   */

/* @import url("reset.css"); */
:root{
	--content_background: aqua;
	--content_width: 60%;
}

body {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 13px;
    color:#333
}

#wrapper {
    margin: 0 auto;
    width:100%;
}


@media only screen and (min-width: 1920px) {
	#navigation {float: left; width:100%; background: white;}

	#content {float: left; width: 60%;}
	#content_textbox1 {float: left; width: 100%; background-color: #B7D3EE; border-radius: 0px 0px 8px 8px; text-align: center;}
	#content_textbox1 h1 {margin: 2px; font-size: 2.0vw; font-style: italic;}
	#content_textbox1 h2 {margin: 1px; font-size: 1.8vw; font-style: italic; color:#FFFFFF}

	#content_textbox2 { margin-top: 5px; float: left; width: 100%; background-color: #B7D3EE; border-radius: 8px 8px 8px 8px; text-align: center;}
	#content_textbox2 h3 {font-size: 20px;font-style: italic; margin: 1px;}
	#content_textbox2 p { font-size: 20px;  font-style: italic; margin: 0px;}

	#content_table {float: left; width: 100%; margin-top: 5px; background-color: white; text-align: center;  overflow-y: scroll; scrollbar-color: green #B7D3EE; height:68vh;}
	#content_table table{ margin-left: auto; margin-right: auto;}
	#content_table table td {border-bottom: medium black solid; font-size:20px;}
	#content_table table thead tr th { font-size:22px; font-style: italic; border-bottom: medium black double; }
	#content_table table td p {margin: 0px; padding: 1px;}
	#content_table table tr:nth-child(even) {background-color:#DDDDDD;}
	#content_table table tr:nth-child(odd) {background-color: #fff;}

	#leftcolumn {float: left; background: whit; width: 20%; text-align: center;}
	#leftcolumn h3 {padding: 1px;}
	#leftcolumn img{height: 50%; width: 50%;}

	#rightcolumn {float: left; background: white; width: 20%; text-align: center;}
	#rightcolumn h3 {padding: 1px;}
	#rightcolumn img{height: 50%; width: 50%;}
	
}

@media only screen and (max-width: 1920px) {
	/* green */
	#navigation {float: left; width:100%;}

	#content {float: left; width: 60%; }
	#content_textbox1 {float: left; width: 100%; background-color: #B7D3EE; border-radius: 0px 0px 8px 8px; text-align: center;}
	#content_textbox1 h1 {margin: 2px; font-size: 2.0vw; font-style: italic;}
	#content_textbox1 h2 {margin: 1px; font-size: 1.8vw; font-style: italic; color:#FFFFFF}

	#content_textbox2{float: left; width: 100%; margin-top: 3px; background-color: #B7D3EE; border-radius: 8px 8px 8px 8px; text-align: center;}
	#content_textbox2 h2 { font-size: 20px; font-style: italic; margin: 1px;}
	#content_textbox2 p { font-size: 20px;  font-style: italic; margin: 0px;}

	#content_table {float: left; width: 100%; margin-top: 3px; background-color: white; text-align: center; overflow-y: scroll; scrollbar-color: green #B7D3EE; height:68vh;}
	#content_table table { margin-left:auto; margin-right:auto;}
	#content_table table td { font-size: 16px; border-bottom: medium black solid; }
	#content_table table thead tr th { font-size: 20px; font-style: italic; border-bottom: medium black double; }
	#content_table table td p {margin: 0px; padding: 1px;}
	#content_table table tr:nth-child(even) {background-color: #DDDDDD;}
	#content_table table tr:nth-child(odd) {background-color: #fff;}

	#content_dsgvo {float: left; width: 100%; margin-top: 5px; background-color: #B7D3EE; border-radius: 8px 8px 0px 0px; text-align: center;}
	#content_dsgvo p {margin:0px; font-size: 14px;}

	#leftcolumn {float: left; background: white; width: 20%; text-align: center;}
	#leftcolumn h3 {padding: 0px;}
	#leftcolumn img{height: 50%; width: 50%;}

	#rightcolumn {float: left; background: white; width: 20%; text-align: center;}
	#rightcolumn h3 {padding: 0px;}
	#rightcolumn img{height: 50%; width: 50%;}
}

	
@media only screen and (max-width: 1024px) {
	/* aqua */
	#navigation {float: left; width:100%;}

	#content {float: left; width: 80%;}
	#content_textbox1 { float: left;  width: 100%; background-color: #B7D3EE; border-radius: 0px 0px 8px 8px; text-align: center;}
	#content_textbox1 h1 {margin-top: 2px; font-size: 20px; font-style: italic;}
	#content_textbox1 h2 {margin-top: 2px; margin-bottom: 2px; font-size: 18px; font-style: italic; color:#FFFFFF}

	#content_textbox2{ float: left; width: 100%; margin-top: 3px; background-color: #B7D3EE; border-radius: 8px 8px 8px 8px; text-align: center;}
	#content_textbox2 h3 {font-size: 18px; font-style: italic;}
	#content_textbox2 p { font-size: 18px; font-style: italic; margin: 2px;}

	#content_table {float: left; width: 100%; margin-top: 3px; background-color: white; text-align: center;  overflow-y: scroll; scrollbar-color: green #B7D3EE; height:68vh;}
	#content_table table { margin-left:auto; margin-right:auto;}
	#content_table table td { font-size: 14px; border-bottom: medium black solid;}
	#content_table table thead tr th { font-size:18px; font-style: italic; border-bottom: medium black double; }
	#content_table table td p {margin: 0px; padding: 1px;}
	#content_table table tr:nth-child(even) {background-color: #DDDDDD;}
	#content_table table tr:nth-child(odd) {background-color: #fff;}

	#leftcolumn {float: left; background: white; width: 20%; text-align: center;}
	#leftcolumn h3 {padding: 0px;}
	#leftcolumn img{height: 40%; width: 40%;}

	#rightcolumn {display:none;} 
}

@media only screen and (max-width: 768px) {	
    /*maroon */	
	#navigation {float: left; width:100%;}

	#content {float: left; background: #FFFFFF; width: 100%;}
	#content_textbox1 {float: left; width: 100%; background-color: #B7D3EE; border-radius: 0px 0px 8px 8px; text-align: center; font-size: 12px;}
	#content_textbox1 h1 {margin-top: 2px; font-size: 20px; font-style: italic;}
	#content_textbox1 h2 {margin-top: 2px; margin-bottom: 2px; font-size: 16px; font-style: italic; color:#FFFFFF}

	#content_textbox2 {float: left; width: 100%; margin-top: 3px; background-color: #B7D3EE; border-radius: 8px 8px 8px 8px; text-align: center;}
	#content_textbox2 h3 {margin-top: 3px; margin-bottom: 3px; font-size: 18px; font-style: italic; text-decoration: underline;}
	#content_textbox2 p {font-size: 18px; font-style: italic; margin-top: 2px; margin-bottom: 2px; }

	#content_table {float: left; width: 100%; margin-top: 3px; background-color: white; text-align: center;  overflow-y: scroll; scrollbar-color: green #B7D3EE;}
	#content_table table {margin-left:auto; margin-right:auto;}
	#content_table table td {font-size: 14px; border-bottom: medium black solid; }
	#content_table table thead tr th { font-size:14px; font-style: italic; border-bottom: medium black double; }
	#content_table table td p {margin: 0px; padding: 1px;}
	#content_table table tr:nth-child(even) {background-color: #DDDDDD;}
	#content_table table tr:nth-child(odd) {background-color: #fff;}


	#leftcolumn {display:none;}
	#rightcolumn {display:none;}
}

@media only screen and (max-width: 680px) {	
	/* orange */	
	#navigation {float: left; width:100%;}

	#content {float:left; background: #FFFFFF; width: 100%;}
	#content_textbox1 {float: left; width: 100%; background-color: #B7D3EE; border-radius: 0px 0px 8px 8px; text-align: center;}
	#content_textbox1 h1 {margin-top: 2px; font-size: 20px; font-style: italic;}
	#content_textbox1 h2 {margin-top: 2px; margin-bottom: 2px; font-size: 16px; font-style: italic; color:#FFFFFF}
	#content_textbox1 table thead tr th{display:none;}
		
	#content_textbox2 {float: left; width: 100%; margin-top: 3px; background-color: #B7D3EE; border-radius: 8px 8px 8px 8px; text-align: center;}
	#content_textbox2 h3 {margin-top: 3px; margin-bottom: 3px; font-size: 16px; font-style: italic; text-decoration: underline;}
	#content_textbox2 p { margin-top: 2px; margin-bottom: 2px; font-size: 16px; font-style: italic;}

	#content_table {float: left; width: 100%; margin-top: 3px; text-align: center;}
	#content_table table {border: 1px solid white;border-collapse: collapse; margin-left:auto; margin-right:auto; padding: 0px; table-layout: fixed; min-width: 90%;}
	#content_table table td{margin: 0px; padding: 1px; border: 1px solid gray; display: block; text-align:center; width: 100%\9; float: left\9;}
	#content_table table td p {margin: 0px; padding: 1px;}
	#content_table table tr:nth-child(even) {background-color: #DDDDDD;}
	#content_table table tr:nth-child(odd) {background-color: #fff;}
	#content_table table thead tr th{display:none;}

	
	/* #content_table table tr th{background-color: #f4f1f1; color:#000000; text-align:right; margin:0} /*2px*/
	#content_table table tr{display: block;}
	/* #content_table table td:not(:first-child){border-top:0px;} */
	/* #content_table table .mobile-head{font-weight:bold;color:#000000;float:left;text-align:left;display:block} */
	
	#leftcolumn {display:none;}
	#rightcolumn {display:none;}
}
