@charset "UTF-8";
/* CSS Document */

  

body {
	font-family:"Lucida Sans Unicode", "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;
	margin:0;
	/* hinzugefügt */
	font-size:15px;	
	}
strong, em, b, i, h5, h6, h7 {
		font-family: "Lucida Sans", "Lucida Sans Unicode", "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;
	}	
	.logo{
		text-align:center;
		margin:10px 0 10px 0;
	}
    
	
	.menue li{
		display:inline;
		font-size:16px;	
			
	}
	
	.menue {
		text-align:center;
		background:#0088B3;
		/* geändert */
		padding:10px 0 10px 0;
		
	}
	.menue a{
		text-decoration:none;
        font-weight: bold;
        line-height:2em;
		color:white;	
		padding:2px 20px;
	}
	.menue a:hover,.menue a.active{
		text-decoration:underline
	}

	.bild_bg {
		background-color: white;
        background-size: 100% auto;
        
	}
	/* hinzugefügt */
	
    .bild {
		margin:-16px auto;	
		   
	}

    .bild img{
		max-width: 100%;
        
	}
	
hr { 
    margin-bottom: 70px;
    margin-top: 60px;
    clear: both;

    }


	.kasten {
		background-color:rgba(255,255,255,.85);
		width:540px;
		position:absolute;
		padding:2%;
		color:#01779c;
		font-size:15px;
		line-height:1.4em;
		top:270px;
		width:36%;
		left:50%;
		margin-right:10%;
	}
	@media only screen and (max-width: 1100px) {
	
		.kasten {
			position:relative;
			top:0;
			left:0;
			margin:3% 2% 0 2%;
			width:92%;

		}
		
		.bild {
			margin:-16px auto;	
			width:92%;
		}	
		.kreise {
			padding-top:0;
		}
	}



	
	h1 {
		font-family:'Pacifico', cursive;
		font-size:42px;
		font-weight: normal;
		line-height:1.2em;
		margin:0 0 .3em 0;
		color:#0088B3;	
	}
	
	h2{
		color:#FF7F00;
		font-family:'Helvetica';
        font-weight: lighter;
        border-bottom: 2px solid #FF7F00;
        font-size:40px;	
        max-width: 100%;
		
	}

	h3{
		color:#0088B3;
		font-family:'Pacifico', cursive;
		margin: 0;
		font-weight:lighter;
		font-size:40px;
		line-height:1.2em;
	}
	h4{
		color:darkgrey;
		font-family:'Helvetica';
		font-style: normal;
        font-weight:lighter;
        font-size:38px;
		line-height:1.3em;
		margin:0;
	}
	h5{
		color:black;
		font-weight:lighter;
		font-size:16px;
		margin-bottom:-10px;
	}

    h6{
		color:#0088B3;
		font-family:'antoniolight';
		font-size:45px;
		line-height:1.3em;
		margin:0;
	}
    h7{
		color:#FF7F00;
        font-family:'antoniolight';
        font-size:45px;
		line-height:1.3em;
		margin:0;
        padding:0 11%;
		
	}


	.kreise {
		text-align:center;	
		padding:40px 10%;
		margin:auto;
		width:80%
	}
	.kreise img{
		margin:20px 50px;		
	}
	
	.kreise a img{	
		margin:0 0 10px 0;	
		
	}
	
	.kreise a{
		font-family:'Helvetica';
        font-weight:lighter;
        font-size:20px;
        display:block;
		float:left;
		text-decoration:none;
		color:#0088B3;
		margin-bottom:20px	
	}
	.kreise a:hover{
		background-color:#ebebeb;
		color:#FF7F00;;				
	}
	.ich {
		background:white;
        box-shadow:10px 10px 15px #e7e7e7;
		margin:100px auto;
		padding:20px 20px 10px 20px;
		width:70%;
	}
	.ich b{
		color:#0088B3;
	}

    .ich a {
		color:#7b7b7b;
		text-decoration:none;
	}
	.ich a:hover{
		color:#01779c;
		text-decoration:underline;
        }
            

	.beispiele {
		box-shadow:10px 10px 15px #e7e7e7;
        background:white;
		margin:100px auto;
		padding:20px 20px 20px 0px;
		width:79%;
		min-height:320px;
        overflow: auto;
	}

    

    .beispiele img{
		float:left;
		margin:0 20px 20px 0;
        max-width: 100%;
        
	}
   
	.beispiele p{
		padding:10px 0 10px 0;
        
	}
	.beispiele a{
		font-size:15px;
		color:#FF7F00;
		text-decoration:none;
	}
	.beispiele a:hover{
		font-size:15px;
		color:black;
		text-decoration:underline;
	}

    
	.impressum {
		background:white;
        box-shadow:10px 10px 15px #e7e7e7;
		margin:100px auto;
		padding:20px;
		width:60%;
		min-height:320px;
	}
	.impressum p{
		font-size:14px;
		
	}
	.impressum a{
		font-size:12px;
		color:black;
		text-decoration:none;
	}
	.impressum a:hover{
		font-size:12px;
		color:black;
		text-decoration:underline;
	}
   .datenschutz {
		background:white;
        box-shadow:10px 10px 15px #e7e7e7;
		margin:100px auto;
		padding:20px;
		width:60%;
		min-height:320px;
	}
	.datenschutz p{
		font-size:14px;
		
	}
	.datenschutz a{
		font-size:12px;
		color:black;
		text-decoration:none;
	}
	.datenschutz a:hover{
		font-size:12px;
		color:black;
		text-decoration:underline;
	}
   
    i {
        color:#FF7F00;
        }
	span {
        font-size:15px;
        font-weight: bold;
		color:black;
	}

	p{
		line-height:2em;
        color:black;
	}
	
        
	.kontakt {
		background-color:rgba(255,255,255,.65);
		width:400px;
		position:absolute;
		padding:2%;
		color:black;
		font-size:15px;
		line-height:1.4em;
		top:320px;
		width:37%;
		right:50%;
		margin-left:10%;
		
	}
	.kontakt a {
		color:black;
		text-decoration:none;
	}
	.kontakt a:hover{
		color:#01779c;
		text-decoration:underline;
	}
	@media only screen and (min-width: 1501px) {
		/* hinzugefügt */
		
		.bild{
			width:1200px;
		}
        .kreise{
			max-width: 100%;
		}
		.kasten {
			width:524px;
		}
		.kontakt {
			width:524px;
		}
		h2 {
			width:1200px;
			margin-left:auto;
			margin-right:auto
		}
		.impressum, .ich, .beispiele {
			width:1160px
		}
		
		
		/* *************/
		
		.kreise a{
			width:16%;
			padding:2%;
		}
		.kreise a img{
			width:97%
		}
	}
	@media only screen and (max-width: 1500px) {
		
		.kreise a{
			width:30%;
			padding:2%;
		}
		.kreise a img{
			width:97%
		}
	}
	@media only screen and (max-width: 1000px) {
		
		.kreise a{
			width:29.333%;
			padding:2%;
		}
		.kreise a img{
			width:97%
		}
	}
	@media only screen and (max-width: 700px) {
		
		.kreise a{
			width:44%;
			padding:3%;
		}
		.kreise a img{
			width:97%
		}
		/* hinzugefügt */
		.bild {
			width:100%;
			border-left:none;
			border-right:none;
		}
	
	}
	
	@media only screen and (max-width: 1100px) {
	
		.kontakt {
			position:relative;
			top:0;
			left:0;
			margin:3% 2% 0 2%;
			width:92%;
		}