@charset "ISO-8859-1";
/* CSS Document */







a:link { font-family: Verdana; font-weight:300; color:#66C; text-decoration:none; font-size: 1.1em; }
a:visited { font-family: Verdana; font-weight:300; color:#66C; text-decoration:none; font-size: 1.1em; }
a:focus { font-family: Verdana; font-weight:300; color:#66C; text-decoration:none; font-size: 1.1em; }
a:hover { font-family: Verdana; font-weight:300; color:#66C; text-decoration:none; font-size: 1.1em; }
a:active { font-family: Verdana; font-weight:300; color:#66C; text-decoration:none; font-size: 1.1em; }


span + span {
    margin-left: 10px;
}

ul.a {
  list-style-type: circle;
  
}

span {    
    white-space:pre;
}




#cover {
	
	/*background-image:url(bg_bggenerator_com.jpg); */
	background-color:#FFF;	
}


#head {
    padding: 1rem;
	font-family: Verdana;
	width:auto;
  	margin-right: auto;
  	margin-left: auto;	
  	text-align:center;
 	font-family: Verdana;
}

.link-group {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start; /* oder space-around / space-evenly */
    gap: 0.2rem; /* Abstand zwischen den Links */
    margin-top: 1rem;
	width:auto;
  	margin-right: auto;
  	margin-left: auto;
}

.link-group a {
    width:auto;
  	margin-right: auto;
  	margin-left: auto;
	font-size: 1.2em;
	
	flex: 1 0.2 auto; /* erlaubt flexible Breite */
    min-width: 20px; /* Mindestbreite für jeden Link */
    text-align: center;
    padding: 0.4rem 0.4rem;
    background-color: #eee;
    border-radius: 5px;
    text-decoration: none;
    color: #333;
    transition: background-color 0.3s;
}

.link-group-mobile {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start; /* oder space-around / space-evenly */
    gap: 0.2rem; /* Abstand zwischen den Links */
    margin-top: 1rem;
	width:auto;
  	margin-right: auto;
  	margin-left: auto;
}

.link-group-mobile a {
    width:auto;
  	margin-right: auto;
  	margin-left: auto;
	font-size: 1.8em;
	
	flex: 1 0.2 auto; /* erlaubt flexible Breite */
    min-width: 20px; /* Mindestbreite für jeden Link */
    text-align: center;
    padding: 0.4rem 0.4rem;
    background-color: #eee;
    border-radius: 5px;
    text-decoration: none;
    color: #333;
    transition: background-color 0.3s;
}

.link-group a:hover {
    background-color: #ddd;
}




#head_mobile {  
  padding: 10px;
  width:auto;
  margin-right: auto;
  margin-left: auto;	
  text-align:center;
  font-family: Verdana;
  font-size: 1.9em;  
}


#footer {
  background-color: #CCC;
  padding: 10px;
  text-align:center;
  border-radius: 18px;
  opacity:0.6;
  margin-right: auto;
  margin-left: auto;
  width: 70%;
}

#footer_mobile {
  background-color: #CCC;
  padding: 10px;
  text-align:center;
  border-radius: 18px;  
}


.textfeld_1
{
	margin-right: auto;
  	margin-left: auto;	
  	text-align:center;	
	
	text-align:justify;
	line-height: 1.5em;
	
	overflow:auto;
	overflow-x:hidden;
	padding-right:10px;	
}

#webchat {
        height: 100%; /* was 100VH volle Höhe des Viewports */
        width: 100%;  /* volle Breite des Viewports */
        box-sizing: border-box;
      }




.pic_site_2
{
	padding: 10px;
 	width:300px;
  	margin-right: auto;
  	margin-left: auto;	
  	text-align:center;
  	font-family: Verdana;	
}

.pic_site_3
{
	padding: 10px;
 	width:300px;
  	margin-right: auto;
  	margin-left: auto;	
  	text-align:center;
  	font-family: Verdana;	
}

.box1 {
     float: left;
	 position:relative;    
	 width: 50%;
	 height:20vw;
	 margin-left: 0%;
	 margin-right: 0%;
	 padding: 20px;
     
     background: #036;
	 
	 background-size: 100% 100%;
	 background-repeat:no-repeat;
     box-sizing: border-box;
	 margin-bottom: 2%;
	 border-radius: 18px;
}


.box2 {
     float: left;
	 position:relative;    
	 width: 50%;
	 height:20vw;
	 margin-left: 0%;
	 margin-right: 0%;
	 padding: 20px;
     
     background: #fff;
     box-sizing: border-box;
	 margin-bottom: 2%;
	 border-radius: 18px;
}

.image1 {
  opacity: 0.18;
  max-width: 100%;
  max-height: 100%;
}

.textfeld_picture{
	position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
	font-family:Verdana;
	font-size:2vw;
	color:#FFF;	
}

.textfeld_picture_1{
	position: absolute;
  	left: 50%;
  	top: 50%;
  	transform: translate(-50%, -50%);
	
	font-family:Verdana;
	font-size:2vw;
	line-height:2.1vw;
	color:#fff;	
}

.textfeld_picture_1.width{
	width:95%;
	color:#000000;
}
.textfeld_picture_2.width{
	width:95%;
	color:#000000;	
}

.textfeld_picture_2{
	position: absolute;
  	left: 50%;
  	top: 50%;
  	transform: translate(-50%, -50%);
	
	font-family:Verdana;
	font-size:3vw;
	line-height:3.1vw;
	color:#FFF;	
}




h2
{
	font-size: 1.2em;
	margin-right: auto;
  	margin-left: auto;	
  	text-align:center;
  	font-family: Verdana;
}

/*
#head h1 {
  font-size: 1.2em;
}
*/



#content {
	/*background-color:#D6E9FE;*/
	background-color:#fff;
	padding: 10px;
	border-radius: 18px;
	font-family: Verdana;
	margin-right: auto;
  	margin-left: auto;
	width: 70%;	
}

#content_mobile {
	/*background-color:#D6E9FE;*/
	background-color:#fff;
	padding: 10px;
	border-radius: 18px;
	font-family: Verdana;
	font-size: 1.8em;
	margin-right: auto;
  	margin-left: auto;
	width: 90%;
	
}

.clearAll {
  clear: both;
}


  /* if desktop */
    .mobile_device_380px {
        display: none;
    }
    .mobile_device_480px {
        display: none;
    }
	
	.textfeld_picture_2 {
        display: none;
    }


   /* if mobile device max width 380px */
    @media only screen and (max-widthh: 380px) {
        .mobile_device_380px{display: block;}       
        .desktop {display: none;}				
		.textfeld_picture_1 {display: none;}
		.textfeld_picture_2 {display: block;}
		
    } 

   
	
	/* if mobile device max width 480px */
    @media (min-width: 1025px) {
       .mobile_device_380px{display: none;}
	   .mobile_device_480px{display: none;}
       .desktop {display: block;}	   
    }

    
	
	
	 /*Schriftgrößen und Skalierung für verschiedene Bildschirmgrößen */
      @media (max-width: 600px) {
        #webchat {font-size: 14px;}
      }

      @media (min-width: 601px) and (max-width: 1024px) {
        #webchat {font-size: 16px;}
      }

      @media (min-width: 1025px) {
        #webchat {font-size: 18px;}
      }