body {
		font-family:  Inter, Verdana, Arial, Helvetica, sans-serif;
		font-size: 100%;
		background-color: #e6e6e6;
	}

	/* inter-regular - latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/inter-v2-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/inter-v2-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/inter-v2-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/inter-v2-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/inter-v2-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/inter-v2-latin-regular.svg#Inter') format('svg'); /* Legacy iOS */
  font-display: swap;
}

/* inter-500 - latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/inter-v2-latin-500.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/inter-v2-latin-500.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/inter-v2-latin-500.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/inter-v2-latin-500.woff') format('woff'), /* Modern Browsers */
       url('../fonts/inter-v2-latin-500.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/inter-v2-latin-500.svg#Inter') format('svg'); /* Legacy iOS */
  font-display: swap;
}

/* inter-700 - latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/inter-v2-latin-700.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/inter-v2-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/inter-v2-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/inter-v2-latin-700.woff') format('woff'), /* Modern Browsers */
       url('../fonts/inter-v2-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/inter-v2-latin-700.svg#Inter') format('svg'); /* Legacy iOS */
  font-display: swap;
}

/* Screenreader Links */

	a.sr {
		position: absolute;
	    width: 1px;
	    height: 1px;
	    margin: -1px;
	    padding: 0;
	    overflow: hidden;
	    clip: rect(0,0,0,0);
	    border: 0;
	}
	
	
	a.sr:focus {
	    position:relative;
	    width: 100%;
	    height: 25px;
	    margin: 0;
	    padding: 8px;
	    overflow: visible;
	    clip: rect(auto, auto, auto, auto);
	    border: 0;
	    display: block;
		text-align: center;
		font-weight: bold;
		color: #ffffff;
		background-color: #333333;
	}
	
	#hauptnav, #unternav, #main, #left {
		scroll-margin-top: 3rem; /* Fix für FF Sprungproblem */
	}

/* Sichtbarer Fokus */

input[type="text"]:focus {
  outline: 0px;
}

:focus-visible, input[type="text"]:focus-visible,  input[type="text"]:focus-visible,  input[type="email"]:focus-visible,  input[type="tel"]:focus-visible,  textarea:focus-visible {
  outline: 4px solid #0090dd;
  outline-offset: 2px;
  z-index: 10000;
}

/* Artikel, Bildergalerien, Formulare, Suche sollen Outlines nicht abschneiden */
.mod_article.block, .ce_gallery > ul, .content-gallery > ul, .ce_form, .mod_search {
  overflow: visible;
  /* sorgt trotzdem für "Clearing" der Inhalte */
  display: flow-root;
}

#hauptnav, #lupenbox, .mod_zad_switcher, #unternav, #footernav  {
	overflow: visible;
}

/* Skip Links in den Nav Modulen */
.invisible:focus,
.invisible:active {
  position: absolute;
  top: 10px;
  left: 10px;

  clip: auto;
  width: auto;
  height: auto;
  overflow: visible;
  margin: 0;
  padding: .6rem 1rem;

  background: #fff;
  color: #000;
  z-index: 10000;
  display: inline-block;
}


	#wrapper {
		background-color: #ffffff;
	}

	#logobox {
		width: 238px;
		height: 77px;
		background: #f1f1f1 url("../img/bg_lines_big.gif") repeat;
	}

	.mod_pageimage img {
		width: 100%;
		height: auto;
		display: block;
	}

	#zitat_transpbg {
		display: none;
	}

	#zitat {
		box-sizing: border-box;
		width: 100%;
		padding: 14px 4%;
		background-color: #e6e6e6;
		text-align: center;
		font-style: italic;
		font-weight: bold;
		font-size: 1rem;
		line-height: 1.25rem;
	}

	#left {
		background-color: #e6e6e6;
	}

	.mod_zad_switcher img, 
	.mod_zad_switcher span {
		vertical-align: middle;
	}

	.mod_zad_switcher img {
		width: 19px;
		margin-right: 6px;
	}
	
	.mod_zad_switcher button {
		display: inline-flex;
		align-items: center;
		font-size: 0.85em;
		margin-right: 6px;
		background-color: #e6e6e6;
		border: 1px solid #e6e6e6;
		padding: 4px 6px;
	}
	
	.mod_zad_switcher button:hover, .mod_zad_switcher button:focus-visible  {
		background-color: #cccccc;
		border: 1px solid #ffffff;
	}

	.mod_zad_switcher i {
		font-size: 20px;
		margin-right: 6px;
	}
	
	
	#sidebar-buttons {
	  margin-top: 40px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
	}

	#diakoniesiegel {		
		width: 200px;
	}
	
	#eu-label-logos {
		margin-top: 80px;
		width: 220px;
	}

	#main, #left {
    	font-size: 1rem;
    	line-height: 1.75rem;
    	margin-bottom: 20px;
	}

	#main .inside {
    	margin: 0 4% 0 4%;
	}
	
	#footer .inside {
		/* margin: 0 2% 0 1%; */
		padding: 8px 1% 0 1%;
		display: flex;
		justify-content: flex-end;
		flex-flow: row wrap;
		gap: 0;
	}
	
	
	footer {
		font-size: 0.9rem;
		background-color: #ffffff;
	}

	footer .trenner {
		font-size: 0.75rem;
	}
	
	#nach-oben-button {
		position: fixed;
		right: 45px;
		bottom: 50px;
		z-index: 1000;
	}
	
	.mobile_menu .inner {
    	background-color: #e6e6e6;
    	color: #000000;
	}

	.clearing {
		clear:both;
	}
	
	
	
	a {
		text-decoration: none;
		color: #cc3333;
		color: #c03030; /* wg Kontrast BF */
	}
	
	a:link, a:visited {
		text-decoration: none;
		color: #cc3333;
		color: #c03030; /* wg Kontrast BF */
	}
	
	a:focus {
		text-decoration: underline dotted;
	}
	
	/* 1. Jedes <a>, das ein <img> enthält, sauber als Box darstellen */
a img {
  display: block; /* verhindert kleine „Lücken“ unter dem Bild */
}

a:has(> img) {
  display: inline-block;
  line-height: 0;
}
	
	#main a {
		font-weight: bold;
	}

	#main li a {
		font-weight: normal;
	}

	#main a:hover, #footer a:hover, #unternehmen a:hover {
		text-decoration: underline dotted;
	}

	#main #breadcrumbs ul {
		margin-left: 0;
		margin-bottom: 0;
	}

	#breadcrumbs {
		margin-top: 34px;
		font-size: 0.8125rem;
		line-height: 1.25rem;
		font-weight: 400;
		overflow: visible;
		display: flow-root;
	}
		
	#breadcrumbs li {
		display: inline;
	}
	
	#breadcrumbs li:not(:first-child) a::before,
	#breadcrumbs li.active::before {
    	content: ">";
    	margin: auto 6px;   	
	}

	#breadcrumbs li a, #breadcrumbs li.active {
		float: left;
		font-weight: normal;
	}
	
	#breadcrumbs li.last {
		border-right: none;
	}
	
	button {
		cursor: pointer;
	}
	
	button.bg_transparent {
		background: transparent;
		border: none;
	}

	h1, h2, h3, h4, h5, h6, p, pre, blockquote, table, ol, ul, form {
    	margin-bottom: 1em;
	}
	
	h1 {
		font-weight: bold;
		font-size: 1.875rem;
		line-height: 2.375rem;
		color: #cc3333;
	}
	
	h2 {
		font-weight: bold;
		font-size: 1.4375rem;
		color: #cc3333;
	}
	
	h3 {
		font-weight: bold;
		font-size: 1.125rem;
	}
	
	
	h4 {
		font-size: 1rem;
		font-weight: bold;
	}
	
	#main ul {
		list-style-image: url(../img/aufzaehlung.svg);
	}
	
	#main ul {
		margin-left: 1.5rem;
	}

	#main .mod_article li {
		margin-bottom: 0.5em;
		line-height: 1.625rem;
		padding-left: 6px;
	}

	#main .content-gallery li {
		padding-left: 0;
	}

	#main .media--left figure {
		margin-right: 16px;
	}
	
	#main .media--right figure {
		margin-left: 16px;
	}

	#main figcaption {
		font-size: 0.875rem;
		font-style: italic;
		line-height: 1.25rem; 
		margin-top: -6px;
		margin-bottom: 1em;
	}
	
	#main .mitarbeiter figcaption {
		text-align: right;
		margin-right: 6px;
	}
	
	#main .mitarbeiter-2 figcaption {
		text-align: right;
		margin-right: 6px;
	}

	.veranstaltungen li {
		margin-bottom: 0.5em;
		line-height: 1.625rem;
	}

	.veranstaltungen h2 {
		padding: 0.5em;
		border-left: 1px solid #cc3333;
		border-bottom: 1px solid #cc3333;
	}

	.veranstaltungen ul {
		margin-bottom: 2.5em;
	}
	
	#mobilemenu-button button, #mobilemenu-button button:active {
		background-color: transparent;
		color: #cc3333;
		border: 0;
		padding: 0;
	}
	
	
	#suchfeld input,
	#mobile-suchfeld input {
		width: 600px;
		height: 35px;
		margin-top:1px;
		margin-left: 1px;
		border: solid 1px #000000;
		font-size: 1.1rem;
		color: #000000;
		padding: 3px;
		float: left;
	}
	
	
	#suchfeld button,
	#mobile-suchfeld button {
		background-image: none;
		border: 0;
		border-radius: 0px;
		background-color: transparent;
		font-size: 1.4rem;
		color: #000000;
		margin-top: 3px;
	}

	#suchfeld button:hover,
	#mobile-suchfeld button:hover {
		color: #cc3333;
	}
	
	
	#main input[type=text], 
	#main input[type=password], 
	#main input[type=date], 
	#main input[type=datetime], 
	#main input[type=email], 
	#main input[type=number], 
	#main input[type=search], 
	#main input[type=tel], 
	#main input[type=time], 
	#main input[type=url], 
	#main input:not([type]), 
	#main textarea {
    padding: 9px 6px;
	}
	
	
	
	#main form button, #main input[type="submit"], #main .button {
		display: inline-block;
	    padding: 10px 14px 10px 14px;
	    margin-bottom: 0;
	    text-align: center;
	    vertical-align: middle;
	    line-height: 16px;
	    font-size: 1rem;
	    color: #ffffff;
	    border: none;
	    -moz-border-radius: 0px;
	    -webkit-border-radius: 0px;
	    border-radius: 0px;
	    background-color: #cc3333;
	    background-image: none;
	}
	
/* Galerie */	

	#main .content-gallery ul,
	#right .content-gallery ul {
	  margin-left: 0;
	  list-style-image: none;
	}
	
	.content-gallery--cols-4 li {
		width: 23%;
		margin-right: 2%;
		margin-bottom: 0.6%;
	}
	
	.content-gallery--cols-3 li {
		width: 29%;
		margin-right: 2%;
		margin-bottom: 0.6%;
	}
	
	.content-gallery--cols-2 li {
		width: 48%;
		margin-right: 2%;
		margin-bottom: 0.6%;
	}
	
	.content-gallery--cols-1 li {
		width: 100%;
		margin-right: 0;
		margin-bottom: 0.6%;
	}
	
	.content-gallery--cols-4 li:last-child,
	.content-gallery--cols-3 li:last-child,
	.content-gallery--cols-2 li:last-child,
	.content-gallery--cols-1 li:last-child {
		margin-right: 0;
	}
	
	.content-gallery figure {
    	margin-bottom: 0;
	}
	

/* Suchergebnisse */

	.mod_search h3, 
	.mod_search .context, 
	.mod_search .header {
		margin-bottom: 0;
	}

	.mod_search .url {
		font-style: italic;
	}

/* Tabelle */

	table {
		border-collapse: collapse;
		border: 1px solid #cc3333;
	}

	th, td {
		padding: 1.5%;
		border: 1px solid #cc3333;
		vertical-align: middle;
	}

/* Farbbox und Texthervorhebungen */

	.farbbox {
		background-color: #FFEFD5;
		padding: 10px;
		width: 100%;
		box-sizing: border-box;
		max-width: 600px;
		color: red;
	}
	
	#main .mod_article .farbe {
		color: red;
		background-color: #FFEFD5;
	}
	

	/* Error */

	p.error {
		background-color: #cc3333;
		color: #ffffff;
		font-weight: bold;
		padding-left: 6px;
	}
	
	
		/* Anpassungen Formular */
	
select, input[type="file"] {
  display: block;
  width: 100%;
  display: inline-block;
  padding: 3px 6px;
  background: #fff;
  border: 1px solid #ccc;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  -moz-box-shadow: inset 0 1px 1px #eee;
  -webkit-box-shadow: inset 0 1px 1px #eee;
  box-shadow: inset 0 1px 1px #eee;
  -moz-transition: all .15s linear;
  -webkit-transition: all .15s linear;
  -o-transition: all .15s linear;
  transition: all .15s linear;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 9px 6px;
}
	
	
	/* Facabook-Logo*/

	#facebook {
		/* display:none; */
		width: 40px;
		margin-right: 71px;
		margin-top: 15px;
	}
	
	/* Bewerbungs-Button */

	a.bewerbungs-button {
		/* display: none; */
		background-color: #ce1719;
		color: #ffffff;
		font-weight: bold;
		padding: 10px;
	}
	
	/* für runde Bilder */
    /* Ausgangsbilder sollte quadratisch sein und der wichtige Inhalt des Bildes sollte in der Mitte sein! */
	
	.rund img {
		border-radius: 100%;
		-webkit-border-radius: 100%;
		-moz-border-radius: 100%;
	}	
	
	/* Portraits für die Seite "Unsere Mitarbeitende" */
	
	.mitarbeiter {
		margin-bottom: 60px;
	}
	
	.mitarbeiter:nth-child(even) {
		display:flex;
		align-items: center;
		gap: 35px
	}
	
	.mitarbeiter:nth-child(even) figure {
		flex-basis:30%;
		min-width: 300px;
	}

	.mitarbeiter:nth-child(even) p {
		flex-basis:70%;
		font-style: italic;
	}

	/* Portraits für die Seite "Unsere Mitarbeitende" - mit Bild rechts */
	
	.mitarbeiter:nth-child(odd) {
		display:flex;
		flex-direction: row-reverse;
		align-items: center;
		gap: 35px
	}
	
	.mitarbeiter:nth-child(odd) figure {
		flex-basis:30%;
		min-width: 300px;
	}

	.mitarbeiter:nth-child(odd) p {
		flex-basis:70%;
		font-style: italic;
		text-align: left;
	}

	/* Video-Anzeige*/

.content-player video {
    max-width: 100%;
    height: auto;
}