@charset "utf-8";
/* CSS Document */

body{
	margin:0;
	padding:0;
	background-color:#000000
}

p{
	margin-top:0;
	padding-top:0
}

div#main{
	
}
div#wrapper{
	width:1024px;
	background-color:#FFFFFF;
	margin:0 auto;
	padding-bottom:40px
}
div#header{
	height:250px;
}
div#title{
	height:39px;
	font-family:"Times New Roman", Times, serif;
	letter-spacing:3px;
	font-size:14px;
	padding:30px 0 0 220px;
	color:#9c9e9f
}
span#middlePart{
	padding:0 15px;
	color:#000000
}
div#headerImage{
	height:181px
}

div#navi{
	width:178px;
	font-family:Arial,Verdana;
	font-size:12px;
	float:left
}
div#navi ul{
	padding:0;
	margin:96px 0 0 0
}
div#navi ul li{
	list-style-type:none;
	margin-bottom:3px
}
div#navi ul li a{
	display:block;
	width:173px;
	background-color:#4a6e9d;
	padding-right:5px;
	text-align:right;
	line-height:24px;
	font-family:Arial, Verdana;
	font-size:12px;
	color:#FFFFFF;
	text-decoration:none
}
div#navi ul li a:hover{
	background-color:#002039;
}
div#navi ul li.active a{
	background-color:#002039
}
div#links{
	margin-top:25px;
	text-align:right;
	padding-right:5px
}
div#links a{
	color:#4a6e9d;
	text-decoration:none;
	display:block;
	line-height:24px
}
div#links a.active{
	color:#002039
}
div#links a:hover{
	color:#002039
}

div#content,
div#contentLinks{
	float:left;
	width:560px;
	padding:0 0 0 45px;
	font-family:Arial, Verdana;
	font-size:15px;
	color:#4b4b4b;
	line-height:26px;
}
div#contentLinks {
	width:800px
}
div#content h1,
div#content h2,
div#contentLinks h1,
div#contentLinks h2{
	font-family:"Times New Roman", Times, serif;
	color:#274257;
	padding:36px 0 28px 0;
	margin:0;
	font-weight:normal;
	text-transform: uppercase;
	letter-spacing:2px;
	font-size:20px
}
div#content a,
div#contentLinks a{
	text-decoration:none;
	color:#4a6e9d;
}
div#content a:hover,
div#contentLinks a:hover{
	color:#002039
}

html body h2.f {
	text-transform: none !important;
}

div#contentLinks p.link{
	height:85px
}
div#contentLinks p.link img{
	float:right;
	margin-right:100px;
	border:0
}

div#sidebar{
	float:left;
	margin-top:93px;
	padding:0 20px 0 30px;
	width:190px;
	font-family:"Times New Roman", Times, serif;
	color:#333;
	font-size:12px;
	font-style:italic
}

.breaker{
	clear:both
}

.menu-toggle {
  display: inline-block;
  padding: .75em 15px;
  line-height: 1em;
  font-size: 1em;
  color: #333;
}

.menu-toggle:hover,
.menu-toggle:focus {
  color: #c00;
}

#hamnav label {
	display: none;
}


#hamnav #hamburger {
	display: none;
}

#breadcrumb {
	padding-top: 20px;
}


div#sidebar img {
	  object-fit: cover;
	  width: 100%;
}


div#sidebar p.cap {
	margin-top: 30px;
}


@media (max-width: 479px) {
	
	html body .pagefooter .inner {
		width: 100% !important;
	}
	
	html body .pagefooter .col_f {
		width: 100% !important;
		font-size: 15px !important;
	}

	
	div#headerImage {
		height: 181px;
		width: 100%;
		margin-top: 10px;
		overflow: hidden;
	}

	div#geschichte_contact_teaser {
		float: none !important;
		width: 80% !important;
	}

	
	div#header {
		height: auto;
	}

	div#wrapper {
		width: 100%;
	}


	div#title {
		padding: 5px;
		letter-spacing: 1px;
		color: black;
		font-size: 22px;
		margin-bottom: 30px;
	}
	
	div#sidebar {
		float: none;
		display: none;
	}
	
	div#navi {
		display: none;
	}
	
	div#content {
		float: none;
		width: 100%;
		padding: 0;
	}
	
	div#content h2,
		div#content h3,
	div#content h1 {
		text-align: center;
		width: 95%;
		font-size: 22px;
	}
	
	div#navi {
		width: 100%;
		float: none;
		margin-top: 10px;
	}
	
	div#navi ul {
		margin: 0;
	}
	
	div#navi ul li {
		padding: 0 15px;
		margin-bottom: 5px;
	}
	
	div#navi ul li a {
		width: 100%;
		text-align: center;
		padding: 15px 0px;
		font-size: 22px;
		height: 26px;
	}
	
	div#links a {
		display: inline;
		padding-right: 20px;
		font-size: 22px;
	}
	
	span#middlePart {
		display: block;
		padding: 0;
	}

	#hamburger { display: none; }
	
	nav input:checked ~ #navi { display: block; }
	
	
	#hamnav {
	  width: 100%;
	  /* Optional */
	  position: sticky;
	  top: 0;
	}
	
	
	div#content address,
	div#content p {
		padding: 0 20px;
		font-size: 22px;
		line-height: 28px;
	}
	
	
	div#content img.full {
		width: 100%;
	}
	
	
	
	#hamnav label { 
		display: inline-block; 
		color: white;
		background: #4a6e9d;
		font-style: normal;
		font-size: 30px;
		padding: 15px 25px;
		position: fixed;
		top: 0em;
		right: 0;
	  }
	  
	  html div#header {
		  height: 250px !important;
	  }
	  
	
}


.fff {
	background:#4a6e9d;
	
}

div.footer div {
	text-align: center;
	padding: 5px 0px;
}

div.footer a {
	color: white;
	font-family:Arial,Verdana;
	font-size:12px;
	text-decoration: none;
}


.teaser-container {
  display: flex;
}

.teaser-container {
	padding: 10px;
	background: rgb(239,239,239);
background: linear-gradient(180deg, rgba(239,239,239,1) 14%, rgba(255,255,255,1) 87%);
	margin-top: 30px;
}

.teaser {
  flex: 1;
  border: 0px solid #ccc;
  padding: 0px;
  margin: 10px;
  padding-bottom: 20px;
      border-bottom: 2px solid #ccc;
}


.teaser:hover {
      border-bottom: 2px solid #4a6e9d;
}



html body .teaser p {
	width: auto !important;
	padding-right: 20px;
	
}

.teaser .button {
		background: #4a6e9d;
		color: white !important;
		padding: 10px;
		border-radius: 5px;
}

.teaser .button:hover {
	background: #002039;
}

.teaser picture, 
.teaser picture img {
	width: 100%;
}

.teaser h3 {
	margin: 0 !important;
	padding: 0 !important;
}

@media only screen and (max-width: 767px) {
	.teaser-container {
	  display: block;
	}
	.teaser {
		margin-bottom: 20px;
	}
	
	.teaser a {
		font-size: 22px !important;
	}
		
	.teaser p {
		padding: 0 !important;
	}
	.teaser h3 {
		text-align: left !important;
	}
}


/* Media Query für kleine Bildschirme (maximale Breite von 600 Pixeln) */
@media only screen and (max-width: 600px) {
  .teaser {
    flex: 100%; /* Änderung für mobile Ansicht */
  }
}

#glossarbox,
#glossarbox ul {
	list-style-type: none;
	margin-left: 0;
	padding-left: 0;
}

#glossarbox ul {
	margin-left: 0;
	padding-left: 0;
}

#glossarbox ul li {
	padding: 5px 0px;
}

#glossarbox {
	background: linear-gradient(180deg, rgba(239,239,239,1) 14%, rgba(255,255,255,1) 87%);
	padding: 20px 10px;
	      border-bottom: 2px solid #4a6e9d;

}

#glossarbox li a {
	font-weight: bold;
	margin-bottom: 10px;
	display: block;

}


#glossarbox ul li a {
	font-weight: normal;
	margin-bottom: 5px;

}


#glossarbox a {
	font-family: arial;
		font-family:Arial,Verdana;
	font-size:14px;
	font-style: normal;
	color: black;
	color: #4a6e9d;
}



/* Mobile Geräte (Portrait und Landscape) */
@media only screen and (max-width: 767px) {
  /* Styles für mobile Geräte hier einfügen */
  div#title {
	  padding-left: 0 !important;
	  padding-right: 0 !important;
	  font-size: 15px;
  }
}

/* Tablet-Geräte (Portrait und Landscape) */
@media only screen and (min-width: 768px) and (max-width: 1023px) {
  /* Styles für Tablet-Geräte hier einfügen */
}

div#headerImage img {
	width: 100%;
}

div#title {
		padding: 30px 0 0 30px;
		text-align: center;
}


/* Standard Desktop-Geräte */
@media only screen and (min-width: 1280px) {
  /* Styles für Standard Desktop-Geräte hier einfügen */
  
  div#wrapper {
	  width: 1260px;
  }
  
  .pagefooter .inner {

		width:  1260px !important;
  }
  
  
  div#headerImage {
    height: auto;
	}
	
	html body div#header {
		height: auto !important;
	}
	div#content, div#contentLinks {
		width: 750px;
	}
  
	body.hp div#content {
		width: 950px;
	}
  
  
  	body.hp div#content p
	{
		width: 850px;
	}
	
	body.hp div#content h1,
	body.hp div#content h2  {
		width: 750px;
	}
  
}

/* Größere Desktop-Geräte */
@media only screen and (min-width: 1600px) {
  /* Styles für größere Desktop-Geräte hier einfügen */
}



.contenu {
  /* grow shrink basis */
  flex: 1 0 auto;
}

.contenu p {
  padding: 5vw 10vw;
  text-align: justify;
}

footer {
  flex-shrink: 0;
  border-top: 1px dashed #000;
  width: 100%;
  
  color: #333;
}

.contenu-footer {
  width: 1260px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  font-size: 20px;
  padding: 50px 0 100px;
  background: #4a6e9d;
}

.bloc {
  width: 25%;
  margin: 0 30px;
}

/* contact */
.footer-services h3,
.footer-informations h3,
.footer-contact h3 {
  font-size: 25px;
  padding-bottom: 20px;
}

.footer-contact p {
  padding: 5px 0;
}

/* Services */

.liste-services,
.liste-information {
  list-style-type: none;
}

.liste-services li {
  padding: 2px 0;
}

.liste-services a {
  text-decoration: none;
  color: #333;
}
.liste-services a:hover {
  color: rgb(3, 3, 3);
}




.pagefooter {
	
}

.pagefooter .inner {
	background: #002039;
	padding: 10px 0px 20px 0px;
		font-size: 11px !important;
	width: 1024px; 
	margin: auto;
}

.pagefooter .inner .col_f {
	width: 30%;
	float: left;
}

.pagefooter .inner .col_f {
	color: rgba(255,255,255,0.4);	
	font-family:Arial,Verdana;
	padding-left: 20px;
}

.pagefooter .inner .col_f a {
	color: rgba(255,255,255,0.4);	
	text-decoration: none;
}

.pagefooter .inner .col_f ul {
	list-style-type: none;
	padding: 0;
	margin: 0;
}

.pagefooter .inner .col_f ul li {
	margin-bottom: 12px;
}


.pagefooter .inner .col_f a {
	
}










