@import "menu.css";
@import "stuck.css";
@import "font-awesome.css";


@import url(//fonts.googleapis.com/css?family=Roboto:400);
@import url(//fonts.googleapis.com/css?family=Roboto:100);
@import url(//fonts.googleapis.com/css?family=Roboto:300);
@import url(//fonts.googleapis.com/css?family=Roboto:500);
@import url(//fonts.googleapis.com/css?family=Roboto:100Italic);
@import url(//fonts.googleapis.com/css?family=Roboto:300Italic);


/*css*/
a[href^="tel:"] {
  color: inherit;
  text-decoration: none;
}

* {
  -webkit-text-size-adjust: none;
}

body {
  font: 400 18px/26px 'Roboto', sans-serif;
  background: #fdfcfa url(../images/bg_body.png) 0 0 repeat;
  color: #333333;
}

p {
	margin-bottom: 22px;
}

/*************************Links*********************************/
a {
	color: inherit;
  	text-decoration: none;
  	-webkit-transition: 0.5s ease;
  	-moz-transition: 0.5s ease;
  	-ms-transition: 0.5s ease;
  	-o-transition: 0.5s ease;
  	transition: 0.5s ease;
}

a:hover {
	color: #609002;
}

.link1 {
	font-weight: 500;
	color: #000;
	font-size: 18px;
	line-height: 20px;
	display: inline-block;
	margin-top: 14px;
}

.link1:hover {
	color: #609002;
}




/*************************Classes*********************************/

.clear {
	clear: both;
	float: none;
	overflow: hidden;
}

.extra_wrapper {
	overflow: hidden;
}
.f-left{
	float: left;
}
.f-right{
	float: right;
}
/*****************************Text styles*************************************/

.color1 {
	color: #609002;
}

.color1 a:hover, a.color1:hover {
	color: #000;
}

.color2 {
	color: #000;
}

.p1 {
	font-size: 29px;
	line-height: 34px;
	font-weight: 200;  
}

p2 {
	margin-bottom: 0px;
	margin-top: 20px;
}


 .text1{
 	font-size: 26px;
	line-height: 34px;
	font-weight: 400; 
	color: #609002; 
 }

 .text3{
 	font-size: 26px;
	line-height: 34px;
	font-weight: 600; 
	color: #609002; 
 }
 .text4{
 	font-size: 18px;
	line-height: 30px;
	font-weight: 400; 
	color: rgb(51, 51, 51); 
	  padding-left: 26px;
 }

 .text5{
 	font-size: 16px;
	 font-style: italic;
	line-height: 22px;
	font-weight: 400; 
	color: rgb(51, 51, 51); 
	  padding-top: 20px;
 }

 .text7{
 	font-size: 18px;
	 font-style: regular;
	line-height: 22px;
	font-weight: 600; 
	color: #609002; 
	  padding-top: 0px;
 }

.text7 a:hover{
 	color: rgb(51, 51, 51);
	 text-decoration: none;
 }


 .text2{
 	font-size: 18px;
	line-height: 28px;
	font-weight: 400; 
	color: #609002; 
 }

 .text8{
 	font-size: 16px;
	line-height: 22px;
	font-weight: 400; 
	color: rgb(51, 51, 51);
	font-style: italic;
	 padding-top: 7px;
 }

 .text9{
 	font-size: 28px;
	line-height: 34px;
	font-weight: 400; 
	color: #609002; 
	 padding-top: 60px;
 }

 .text10{
 	font-size: 28px;
	line-height: 34px;
	font-weight: 400; 
	color: #609002; 
	 padding-top: 60px;
	 padding-bottom: 20px;
 }

 .text11{
 	font-size: 28px;
	line-height: 34px;
	font-weight: 400; 
	color: #609002; 
	 padding-top: 10px;
	 padding-bottom: 20px;
 }

 .text12{
 	font-size: 20px;
	line-height: 24px;
	font-weight: 400; 
	color: #609002; 
	 padding-left: 0px;
	 padding-top: 10px;
	 }



.divider {
  border: 0;               /* entfernt Standardlinien */
  height: 1px;             /* Linienstärke */
  background-color: #ccc;  /* feine graue Linie */
  margin: 10px 0px 20px;          /* Abstand über und unter der Linie */
}
/***********************************Heads*******************************/

h1,h2,h3,h4,h6 {
	font-weight: 400;
}	

h2{
	font-size: 38px;
	line-height: 45px;
	color: #fff;
	margin-bottom: 22px;
	}
h3 {
	font-size: 32px;
	line-height: 48px;
	color: #000;
	padding-bottom: 24px;
}


h5 {
	font-size: 20px;
	font-weight: 400;
	line-height: 38px;
	color: #000;
	padding-bottom: 24px;
}

h6 {
	font-size: 24px;
	font-weight: 400;
	line-height: 38px;
	color: #fff;
	padding-bottom: 0px;
}

strong {
		font-weight: 600;
	color: #000;	
}
/***********************************Header*******************************/
.logo {
  float: left;
}

.logo a {
	-webkit-transition: 0 ease;
  	-moz-transition: 0 ease;
  	-ms-transition: 0 ease;
  	-o-transition: 0 ease;
  	transition: 0 ease;
}

h7 {
	font-size: 20px;
	font-weight: 400;
	line-height: 38px;
	color: #000;
	padding-bottom: 24px;
	padding-top: 24px;
}

.list {
  margin-bottom: 20px;
}

.list ul {
  margin: 0;
  padding-left: 1.4em;
	list-style-type: disc;
  list-style-position: outside;
  padding-left: 1.4em;
}

.list li {
  padding-left: 1.4em;
  text-indent: -1.4em;
  line-height: 1.6;
}

.list--compact {
  margin-bottom: 0;
	font-weight: 600;
}

.list--plain{
 	margin-bottom: 20px;
	
}
.list--plain li {
  font-weight: 400;
	
}

.list--strong li {
  font-weight: 600;
}

.no-bullets ul {
  list-style: none;
  margin: 0;
  padding-left: 1.4em; /* gleicher Einzug wie normale Listen */
}

.no-bullets li {
  padding-left: 1.4em;
  text-indent: -1.4em;
}




/* ===================== HEADER PHONE ===================== */
/* Desktop: rechtsbündig, Schrift 13px, Icon + Text bündig */
.header_phone {
    float: right;
    display: inline-block;
    font-size: 13px;
    line-height: 16px;
    margin-left: 20px;
    vertical-align: middle;
}

.header_phone .fa {
    font-size: 13px;
    padding-right: 3px;
    vertical-align: middle;
}

.header_phone a { color: #609002; text-decoration: none; }


/*****************************Main*************************************/
.main {
	background: url(../images/main_bg.jpg) center 0 no-repeat;
	color: #fff;
	text-align: center;
	padding: 180px 0 120px;
	font-size: 20px;
	line-height: 25px;
}

.main p {
	font-style: normal;
	margin-bottom: 15px;
	
}

.main a {
	display: inline-block;
	background-color: rgba(255,255,255);
	border-radius: 6px;
	padding: 10px 35px 10px;
	behavior: url(ie.css);
}

.main a:hover {
	background-color: #609002;
}

/********************************Proj*********************************/

.proj {
  background: url("../images/DSCN5059.JPG") center center no-repeat;
  background-size: cover;

  color: #fff;
  text-align: center;

  padding: 60px 0;          /* Desktop-Höhe */
  display: flex;
  align-items: center;        /* vertikal zentriert */
}

.proj p {
	font-style: normal;
	margin-bottom: 15px;
		
}

.proj_intro {
  font-size: 22px;
  font-weight: 600;
  margin-bottom: 18px;
}

.proj p1 {
	font-size: 22px;
	font-weight: 600;
	margin-bottom: 18px;
	
}

.proj a {
	display: inline-block;
	background-color: rgba(255,255,255);
	border-radius: 6px;
	padding: 10px 35px 10px;
		}

.main a.proj_link {
	background-color: #fff;
	color: #609002;
	border: 1px solid #609002;
}

.main a.proj_link:hover {
	background-color: #609002;
	color: #fff;
	
}

.proj a.proj_link {
	background-color: #fff;
	color: #609002;
	border: 1px solid #609002;
}

.proj a.proj_link:hover {
	background-color: #609002;
	color: #fff;
	
}

.proj_text {
    font-size: 18px;
    line-height: 1.6;    
}

.upp {
	background: url("../images/DSCN5059.JPG") center center no-repeat;
	color: #fff;
	text-align: center;
	padding: 120px 0 80px;
	font-size: 20px;
	line-height: 25px;
	min-height: 250px;
}

.upp p {
	font-style: normal;
	margin-bottom: 0px;
	
}

.upp1 {
	background: url("../images/DSCN5059.JPG") center center no-repeat;
	color: #fff;
	text-align: center;
	padding: 120px 0 80px;
	font-size: 20px;
	line-height: 25px;
	min-height: 250px;
}

.upp2 {
	background: url("../images/upp2_bg.jpg") center center no-repeat;
	color: #fff;
	text-align: center;
	padding: 120px 0 80px;
	font-size: 20px;
	line-height: 25px;
	min-height: 250px;
}

.upp3 {
	background: url("../images/upp5_bg.jpg") center center no-repeat;
	color: #fff;
	text-align: center;
	padding: 120px 0 80px;
	font-size: 20px;
	line-height: 25px;
	min-height: 250px;
}

.gruene {
	background: url("../images/upp5_bg.jpg") center center no-repeat;
	color: #fff;
	text-align: center;
	padding: 120px 0 80px;
	font-size: 20px;
	line-height: 25px;
	min-height: 250px;
}

.thera {
	background: url("../images/upp4_bg.jpg") center center no-repeat;
  background-size: cover;

  color: #fff;
  text-align: center;

  padding: 120px 0;          /* Desktop-Höhe */
  display: flex;
  align-items: center;        /* vertikal zentriert */
}


.mich {
	background: url("../images/upp6_bg.jpg") center center no-repeat;
	color: #fff;
	text-align: center;
	padding: 120px 0 80px;
	font-size: 20px;
	line-height: 25px;
	min-height: 250px;
}



/*****************************Content*************************************/


.content_pad__1 {
	padding-bottom: 99px;
}

.content__white {
	background-color: #fff;
	padding: 100px 0 110px;	
}

.content_title {
	background-color: #fff;
	padding: 0px 0 110px;	
}

.block1 {
	margin: 0 -1px;
	padding-top: 72px;
}

.block1_title {
	font-size: 32px;
	line-height: 33px;
	font-weight: 500;
	color: #000;
	margin-bottom: 23px;
}

.block1_title span {
	text-transform: uppercase;
	font-weight: 300;
	display: block;
	font-size: 15px;
	line-height: 20px;
	margin-bottom: 9px;

}

.block1 img {
	margin-bottom: 24px;
	width: 100%;
}

.block1 em {
	font-style: italic;
}

.content__white h3{
	padding-bottom: 14px;
}

.content__white .link1{
	margin-top: 16px;
}

.content__white .p1{
	margin-bottom: 15px;
}

.content__white .p2{
	margin-top: 32px;
}

.news{
	border-bottom: 1px #d2d2d2 dotted; 
	margin: -2px 0 -3px;
}

.news:last-child{
	border:none;
	padding-bottom: 2px;
}

.news+.news {
	margin-top: 20px;
}

.news time, .news a{
  	font-size: 18px;
	font-weight: 400;
  	line-height: 28px;
  	color: #0b0b0b;
}

.news p{
	font-size: 16px;
	font-weight: 400;
  	line-height: 24px;
	margin:6px 0px 28px;
}

.news time{
	font-style: normal;
	font-size: 16px;
	color: #609002;
	padding-right: 10px;
}

.news a:hover{
	color: #609002;
}

.ver_separator{
	border-left: 3px #f2f2f2 solid;
	margin-left: 57px;
    padding-left: 54px;
}

.grid_title3.title_separator {
    position: relative;
	padding-left: 30px;   /* Abstand von Linie zum Inhalt */
}

.grid_title3.title_separator::before {
    content: "";
    position: absolute;
    top: 80px;              /* hier beginnt die Linie */
    left: 0;
	width: 1px;
    height: calc(100% - 80px);
    background-color: #ccc; /* Farbe des Separators */
}


.content__gallery{
	padding-top: 100px;
	padding-bottom: 120px;
}

.content__gallery h3{
	padding-bottom: 20px;    
}

.block2 p{
	margin-bottom: 5px;
}

.wrapper{
	background: #fff;
	border:1px solid #eeeeee;
	margin-top: 36px;
	margin-right:-2px;
}

.wrapperno{
	margin-top: 36px;
	margin-right:-2px;
}

.wrapperlogo {
	background: #fff;
	border:0px;
	margin-top: 10px;
	margin-right:0px;
}


.wrapper img{
	margin: 10px;
} 

.wrapper a{
	font-weight: 400;
	font-size: 18px;
	line-height: 24px;
	color: #609002;
}

.wrapper a:hover{
	color: #000;
}

.box{
	overflow: hidden;
	padding: 24px 20px 0;
}

.box p{
	margin:7px 0 20px 0;
	font-size: 14px;
	line-height: 22px;
}

.boxno{
	overflow: hidden;
	padding-top: 24px;
	padding-left: 0 px;
	padding-right: 0 px;
	padding-bottom: 0 px;
}

.boxno p{
	margin:7px 0px 20px 0px;
	font-size: 14px;
	line-height: 22px;
}


.boxlogo {
	overflow: hidden;
	padding: 0px 20px 0px 0px;
}

.boxlogo p{
	margin:0px 20px 0px 0px;
	font-size: 14px;
	line-height: 19px;
	text-align: center;
}

a.kl {  
font-size: 14px;
	font-weight: 400;
	font-style: normal;
	color: #609002;
	line-height: 30px;
}

a.kl:hover {
	color: #000;
	
}

a.vers {  
	font-weight: 400;
	font-style: normal;
	color: #609002;
	
}

a.vers:hover {
	color: #000;
	
}

.content__map h2{
	font-weight: 200;
	padding-bottom: 30px;
}

.content__map{
	background: url(../images/main_map_bg.jpg) center 0 no-repeat;
	text-align: center;
	padding: 85px 0 97px;
}
.content__map dt{
	font-size: 18px;
	line-height: 27px;
	color: #fff;
	font-style: italic;
	padding-bottom: 28px;
}

.content__map dl span{
	font-size: 18px;
	margin-right: 5px;
	vertical-align: bottom;
}

.content__map dd{
	font-size: 28px;
	line-height: 35px;
	color: #fff;
}

.copyright{
	padding: 0 4px;
}

.block3 img{
	padding-right: 18px;
}

.block3 .text1{
	margin-top: -8px;
  margin-bottom: 15px;
}

.block3 h3{
	margin-top: 9px;
}

.block3 p+p{
	margin-bottom: 32px;
}

.block3 li{
  background: url(../images/about-marker.png) 0 11px  no-repeat;
}

.block3 li a{
	margin-left: 15px;
	font-style: italic;
}

.block3 ul{
	margin-top: -7px;
}

.block3 li+li{
	margin-top: 8px;
}

.block3{
	padding-bottom: 60px;
}

.box_separator{
	border-left: 1px #f2f2f2 solid;
	width: 28%;
}

.box_separator:first-child{
	border-left: none;
}

.box_separator+.box_separator{
	padding-left: 40px;
	padding-top: 62px;
}

.box_separator .text1{
	padding-top: 3px;
}

.box_separator .p3{
	margin-bottom: 40px;
    margin-top: -6px;
}

.gallery{
	padding-top: 82px;
}

.gallery .box{
	padding: 10px 10px 0 9px;
}

.gallery .box p{
	margin: 6px 0 22px;
} 

.gallery .wrapper{
	margin-top: 0px;
	margin-top: 24px;
}

.gallery h3{
	padding-bottom: 0px;
}

.gallery .wrapper img{
	width: 93%;
	padding: 0px;
	margin: 10px;
} 

.lightbox:after{
  content:'';
  display:block;
  position:absolute;
  width: 100%;
  height: 100%;
  opacity:0;
  left:0;
  top:0;
  background: url(../images/magnify.png) center center no-repeat #609002;
  -webkit-transition:opacity .3s linear;
  -moz-transition:opacity .3s linear;
  -o-transition:opacity .3s linear;
  transition:opacity .3s linear;
  behavior: url(ie.css);
}

.lightbox:hover:after { 	
  opacity:.4;
  -webkit-transition:opacity .3s linear;
  -moz-transition:opacity .3s linear;
  -o-transition:opacity .3s linear;
  transition:opacity .3s linear;
  behavior: url(ie.css);
}

a.lightbox {
  position: relative;
  display: block;
}

.figure>a{
	position: relative;
  display: inline-block;
  width: 100%;
}

.pad0{
	padding-bottom: 30px;
}

.gallery_page .wrapper img {
	width: 94%;
	margin: 10px;
}

.gallery_page{
	padding-top: 0;
	margin-top: 10px;
	margin-bottom: 30px;
}

.gallery_page h3{
	margin-bottom: -17px;
}

.gallery_page .wrapper{
	margin-top: 42px;
	}

.news_page time{
	display: block;
	font-style: normal;
}

.news_page time .text1{
	font-size: 21px;
	line-height: 31px;
}

.news_page .box {
    overflow: hidden;
    padding: 21px 18px 0;
}

.news_page .wrapper{
	margin-top: 0px;
	margin-bottom: 42px;
}

.press_page .wrapper{
	margin-top: 0px;
	margin-bottom: 30px;
}

.press_page .box {
    overflow: hidden;
    padding: 21px 18px 0;
}

.press_page time{
	display: block;
	font-style: normal;
}

.press_page time .text1{
	font-size: 16px;
	line-height: 31px;
	color: rgb(51, 51, 51);
}

.press_page a{
	font-size: 18px;
	font-weight: 400;
	color: #609002;
	padding-bottom: 20px;
}

.press_page h3{
	margin-top: 8px;
}

.press_page .pad1{
	margin-bottom: 30px;
}

.news_page h3{
	margin-top: 8px;
}

.news_page .pad1{
	margin-bottom: 95px;
}

.events{
	padding: 72px 0 0 0;
}

.events h3{
	padding-bottom: 25px;
}

.events ul{
	padding-bottom: 25px;
}

.events .link1{
	margin-top:5px;
}

.events .block3{
	padding-bottom: 77px;
}

#map{
	padding-bottom: 95px;
}   

#map h3{
	padding-bottom: 0px;
	padding-top: 9px;
}

#map .wrapper{
	margin-top: 25px;
}                                   

#map_canvas{
    width: 98%;
    height: 414px;
    padding: 11px;
}

.form{
	background: #fff;
	padding: 80px 0 95px;
}

.form .text1{
	text-transform: uppercase;
	margin-top: -6px;
}

.address h3{
	padding-bottom: 30px;
}

/* dd ist die Flex-Zeile */
.form address dd {
  display: flex;
  align-items: baseline;
  gap: 2px;              /* Desktop-Abstand */
  margin: 0 0 8px 0;     /* optional: Abstand zwischen Zeilen */
}

/* Label */
.form address dd .label {
  display: inline-block;  /* nicht flex */
  width: 107px;           /* Desktop-Ausrichtung */
  flex: 0 0 107px;
}

/* Link */
.form address a {
  color: #609002;
  opacity: 0.6;
  text-decoration: none;

  margin-left: 0;         /* WICHTIG: raus */
  width: auto;            /* WICHTIG: raus */
  text-align: left;       /* in Flex meist sinnvoll */
  display: inline;        /* oder inline-block */
  flex: 1;                /* darf Platz nehmen */
  min-width: 0;           /* wichtig für Umbruch auf iOS */
  word-break: break-word; /* lange Mail bricht sauber */
}

.form address a:hover { color: #000; }

.privacy h3{
	margin-top: 9px;
	padding-bottom: 18px;
}

.privacy p{
	margin-bottom: 15px;
}

.pad2{
	padding-bottom: 16px;
}

.categ .text1{
	margin-top: -1px;
}

.privacy a{
	color: #609002;
	margin-bottom: 10px;
	margin-top: 2px;
}

.privacy a:hover{
  	color: #000;
}

.privacy {
    margin-bottom: -8px;
}

#toTop {
  display:none;
  text-decoration:none;
  position:fixed;
  bottom:100px;
  left: 55%;
  margin-left: 550px;
  overflow:hidden;
  width:42px;
  height:42px;
  border:none;
  text-indent:-999px;
  z-index:20;
  background:url(../images/top.png) no-repeat left top;
  transition: 0s ease;
  -o-transition: 0s ease;
  -webkit-transition: 0s ease;
}
#toTop:hover {
  outline:none;
  background-position: right 0;
}


.weiter{
	line-height: 27px;
	text-align: right;
	padding: 59px 0 0px;
}

/********************************* Footer *********************************/
#footer{
  font-size: 14px;
  line-height: 27px;
  padding: 59px 0 64px;
  background: url(../images/bg_footer.png) 0 0 repeat;
}

#footer p{
  display: inline-block;
  margin-bottom: 0px;
  margin-top: -2px;
}

.footer_nav .footer-menu{
  padding-top: 0px;
}

.footer-separator{
  border-top: 1px solid #eeeeee;
  padding-top: 59px;
  margin-top: 36px;
}


/* ================== Navigation (Desktop default) ================== */
.sf-menu { display: block; }
.sf-menu ul { display: none; }

.sf-menu li:hover > ul,
.sf-menu li.sfHover > ul {
  display: block;
}

/* Sicherheit: falls irgendwo noch Hamburger-Reste sind */
.menu-toggle { display: none !important; }


/* ================== Quellen-Sektion ================== */
#quellen {
  padding: 0;
  margin: 0;
  line-height: 1.6;
  color: #333;
}

#quellen h2 {
  font-size: 1.5rem;
  margin-bottom: 12px;
  color: #609002;
}

#quellen ul {
  list-style-type: disc;
  padding-left: 20px;
  margin-bottom: 12px;
}

#quellen ul li { margin-bottom: 8px; }

#quellen ul li em {
  font-style: italic;
  font-weight: 500;
  color: #000;
}

#quellen p {
  font-size: 18px;
  color: #555;
  margin-top: 10px;
}


/* =======================================================================
   RESPONSIVE LAYOUTS (gebündelt)
   ======================================================================= */

/* -------- <= 1199px -------- */
@media only screen and (max-width: 1199px) {
  .ver_separator { margin-left: 43px; }

  .gallery .wrapper img { width: 91%; }

  .box_separator + .box_separator { padding-top: 110px; }

  .gallery_page .wrapper img { width: 93%; }
}


/* -------- <= 979px -------- */
@media only screen and (max-width: 979px){
  .wrapper img { width: 91%; }

  .ver_separator { margin-left: 26px; }

  .gallery .wrapper img { width: 89%; }

  .box_separator{
    border-left: 1px #f2f2f2 solid;
    width: 27%;
  }

  .gallery_page .wrapper img { width: 92%; }

  .news_page .wrapper img { width: 95%; }

  #map_canvas { width: 97%; }
}


/* -------- <= 768px -------- */
@media (max-width: 768px) {
  #content .content_title {
    padding-top: 24px;
  }

  #content .content_title h3 {
    margin-top: 0;
  }
}


/* -------- <= 767px (MOBILE) -------- */
@media only screen and (max-width: 767px) {

  /* Superfish komplett aus */
  .sf-menu { display: none !important; }

  /* Mobilemenu (select) an */
  .select-menu,
  select.select-menu {
    display: block !important;
    width: 100%;
    padding: 12px;
    font-size: 16px;
    margin-top: 15px;
    box-sizing: border-box;
  }

  /* Header-Kontakt aus */
  .header_phone { display: none; }


  /* Logo Mobile zentrieren */
  h1.logo {
    float: none;
    text-align: center;
    margin: 0 auto 15px auto;
  }

  h1.logo img {
    display: inline-block;
    margin: 0 auto;
  }


  /* Mobile Menu – Clean Style */
  .select-menu {
    width: 90%;
    margin: 20px auto;
    padding: 14px 16px;
    font-size: 16px;
    line-height: 1.4;
    color: #609002;
    background-color: #fff;
    border: 2px solid #609002;
    border-radius: 6px;

    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;

    background-image:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='10'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%23609002' stroke-width='2' fill='none'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 14px 10px;
  }

  .select-menu:focus {
    outline: none;
    border-color: #4a7002;
  }


  /* Mobile Menu – breiter */
  select.select-menu {
    width: 100%;
    max-width: 520px;
    margin: 12px auto;
    padding: 10px 10px;
    font-size: 14px;
    line-height: 1.4;
    border: 2px solid #609002;
    border-radius: 4px;
    background-color: #fff;
    color: #333;
    box-sizing: border-box;
  }


  /* rechte Spalte unter die linke zwingen */
  .grid_title3.title_separator {
    clear: both;
    width: 100%;
    padding-left: 0;
    margin-top: 24px;
    border-top: 1px solid #ccc;
    padding-top: 24px;
  }

  /* Vertikallinie aus */
  .grid_title3.title_separator::before { display: none; }

  .wrapperlogo { margin-bottom: 30px; }


  /* Proj */
  .proj {
    padding: 60px 0;
    display: flex;
    align-items: center;
  }

  .proj_text {
    font-size: 15px;
    line-height: 1.5;
  }

  .proj_intro {
    display: block;
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 18px;
  }


  /* Form */
  .form { padding: 60px 0 70px; }

  .form h3 {
    font-size: 22px;
    line-height: 28px;
    margin-bottom: 18px;
  }

  .form address dd,
  .form address a {
    font-size: 15px;
    line-height: 24px;
  }

  .form .grid_5 { margin-bottom: 28px; }

  .form .grid_5,
  .form .grid_7 {
    float: none;
    width: 100%;
  }

  /* Contact labels schmaler */
  .form address dd { gap: 6px; }

  .form address dd .label {
    width: 70px;
    flex: 0 0 70px;
  }


  /* Bild + Text: float auf Mobile aus */
  .f-left {
    float: none;
    display: block;
    margin: 0 0 20px 0;
    width: 100%;
    height: auto;
  }



  /* Footer: Links linksbündig */
  #footer .footer_nav,
  #footer .footer_nav.f-right,
  #footer .f-right {
    float: none !important;
    text-align: left !important;
  }

  #footer p { display: block; }

  #footer .footer-menu {
    display: flex;
    justify-content: flex-start;
    gap: 14px;
    padding: 0;
    margin: 10px 0 0 0;
  }

  #footer .footer-menu li { margin: 0; }
}


/* -------- <= 479px -------- */
@media only screen and (max-width: 479px) {
  .logo{
    float: none;
    margin-left: 30px;
  }

  .main { padding: 34px 0 50px 0; }

  .main h2 { font-size: 45px; }

  .wrapper img { width: 93%; }

  .gallery .wrapper img { width: 93%; }

  .block3 .text1 { margin-top: 0px; }

  .news_page .wrapper img { width: 93%; }

  #map_canvas { width: 92%; }

  /* VERY SMALL (bis 479px) */
  .main h2,
  .proj h2 {
    font-size: 24px;
    line-height: 30px;
  }
}


/* -------- <= 320px -------- */
@media only screen and (max-width: 320px) {
  .wrapper img { width: 93%; }
}



/* -------- <= liste 767px -------- */

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

  /* UL nicht zusätzlich einrücken (sonst wirkt's doppelt) */
  .list ul,
  .no-bullets ul {
    padding-left: 0;         /* wichtig */
    margin: 0 0 16px 0;
  }

  /* Hanging indent nur über LI steuern */
  .list li,
  .no-bullets li {
    padding-left: 1em;       /* hier steuerst du die Einrückung */
    text-indent: -1em;
    line-height: 1.7;
  }

  /* no-bullets: wirklich ohne Marker */
  .no-bullets ul {
    list-style: none;
  }
}