@charset "UTF-8";

img, object, embed, video {
  max-width: 100%;
  height:auto;
}
/* IE 6 unterstützt keine maximale Breite, verwenden Sie daher eine Standardbreite von 100% */
.ie6 img {
  width:100%;
}

/* Layout für Mobilgeräte: 768 px oder weniger. */

:root {
  --breite: 1440px;
  --breite-marginalie: 1160px;
  --marginalie: 280px;
}
body {
  padding-top: 6.25rem;
  width: 100%;
	display: flex;
	min-height: 100vh;
	flex-direction: column;
	}
header {
  position: fixed;
		top:0;
z-index:9999;
display: flex;
justify-content: center;
border-bottom: 1px solid rgba(24,43,72,0.3);
height:6.25rem;
background: #fff;
 		// set animation
 		-webkit-transition: all 0.4s ease;
 		transition: all 0.4s ease;
width: 100%;
padding: 1rem 1rem 0 1rem;
}
.header {
width: 100%;
max-width:  var(--breite);

}
.header {
width: 100%;
max-width:  var(--breite);

}
#oben, #unten {
display: flex;
justify-content: center;
transition: 1s;
width: 100%;
}
#oben > div.custom, #unten > div.custom {
width: 100%;
max-width:  var(--breite);
margin: 1rem 1rem 0 1rem;
}

#oben a, #unten a {
color:  rgba(24,43,72,0.7);
}

#oben a:hover, #unten a:hover {
color:  rgba(24,43,72,0.5);
}

#keyvisual {
  display: block;
  width: 100%;
  border-bottom: 1px solid rgba(24,43,72,0.5);
  margin: 0 0 1rem 0;
  background:  rgba(24,43,72,0.3);
  min-height: 1.5rem;
}
#links {
  padding: 0em 1rem;
  width: 100%;
  display: block;
}
#links2 {
  padding: 0em 1rem;
  width: 100%;
  display: block;
}

/* PAGINATION */
.pagination .pull-right {
    width: 100%;
    margin: 0 0 1rem 0;
    float: none;
}
.pagination, .com-tags-tag__pagination {
    width: 100%;
    grid-column: 1 / -1;
}
 ul.pagination {
    width: 100%;
    padding: 0;
    margin: 0 0 2rem 0;
}

.pagination li {
    display: inline-block;
    list-style: none;
    text-align: center;
	padding: 0 1rem;
}
.pagination li.pagination-start {
	padding-left: 0;
}
.pagination-start, .pagination-prev {

}
.pagination-next, .pagination-end {
float: right;
}
.pagination li.pagination-end {
	padding-right: 0;
}


#rechts {
  display: block;
  padding: 0em 1rem;
  width: 100%;
  /* border-top: 1px solid rgba(24,43,72,0.5);*/
}

#rechts img {
  margin: 0;
  display: block;
  max-width: 100%;
}
.custom-ohne-abstand {
  margin: 0 0 1.5em 0%;
}
.contactinfo {
  margin: 0 0 1em 0;

}
.info_image img {
width: 50%;
max-width: 250px;
  margin: 0 0 0.5em 0;
}
#unten {
  padding: 2rem 8%;
  background-color: #fff;
  width: 100%;
}
.engagement {
  width: 100%;
}
.engagement h1 {
text-align: center;
margin-top: 0;
}
.engagement .mod-custom {
    display:grid;
    gap: 2rem;
    margin: auto;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    align-items: center;
    justify-content: center;
}
#buttons {
  padding: 2rem 8% 0 8%;
}
#buttons p {
text-align: right;
}
footer {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  padding:2rem 1rem 0 1rem;
  display: block;
  background: rgba(24,43,72,1);
}
footer > div {
display: grid;
gap: 2rem;
}

/* Layout für Tablet-PCs: 641 bis 768 px. Erbt Stile vom: Layout für Mobilgeräte. */

@media only screen and (min-width: 769px) {

body {
  padding-top: 6.25rem;
}
header {
 		padding: 0 8%;
}
.header {
display: flex;
align-items: center;
-webkit-align-items: center;
justify-content: space-between;
}
#logo {
 padding:0; 
}
#metanavigation {
  clear: none;
  float: left;
  margin-left: 10%;
  width: 25%;
  display: block;
}
#oben > div.custom, #unten > div.custom {
margin: 1rem 8% 0 8%;
}
.container {
width: 100%;
	min-height: 5em;
display: flex;
flex: 1;
justify-content: center;
padding: 0 8% 2rem 8%;
}
#links { /* wenn Marginalie */
  padding: 0 4rem 0 0;
  max-width: var(--breite-marginalie);
}
#links2 {
  max-width:  var(--breite);
  padding: 0 0 0 0;

}
#rechts {
  margin: 4.25rem 8% 0 0%;
  padding: 0 0rem 0 0;
  width: 30%;
  max-width: var(--marginalie);
}
footer {
  width: 100%;
   padding: 2rem 8%;
  border-top: 1px solid rgba(24,43,72,0.5);
}
footer > div {
grid-template-columns: repeat(4, 1fr);
max-width:  var(--breite);
}
}