:root {
--white-background: #fff;
--lightgray-background: #fafafa;
--darkgray-text: #374150;
--green-wohnungslosenhilfe: #2e8b57;
--blue-stadtmission: #009ee0;
--darkgray-placeholder: #a0a0a0;
}


/* **************************************************************************************************** */
/* html */
/* **************************************************************************************************** */


/* **************************************************************************************************** */
/* generell */
/* **************************************************************************************************** */

* { 
	margin: 0; 
	padding: 0; 
	border: none;
}

* {
    /* 
    box-sizing
    The box-sizing CSS property sets how the total width and height of an element is calculated. 
    
    box-sizing: border-box
    The width and height properties include the content, padding, and border, but do not include the margin. 
    Note that padding and border will be inside of the box. 
    For example, .box {width: 350px; border: 10px solid black;} renders a box that is 350px wide, with the area for content being 330px wide.
    */
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

:after, :before {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

a {
	color: #337ab7;
}

a:link,
a:visited,
a:hover,
a:active {
    /* link without undewrline */
	text-decoration: none;
} 

/* **************************************************************************************************** */
/* Body */
/* **************************************************************************************************** */

body {
	/* 1800px Bilderkarussell und 2 * 15px Padding  */ 
	max-width: 1830px;

	margin-left: auto;
	margin-right: auto;

	/* schmale Scrollbars in Browsern auf Smartphone und Tablet  */ 
	padding-left: 15px;
	padding-right: 15px;

	background-color: var(--lightgray-background);

	font-family: system-ui, sans-serif;

	/* die Prozentangabe bezieht sich auf die Standardschriftgroesse in Browsern  */ 
	/* die Standardschriftgroesse in Browsern ist 16px  */ 
	/* 1em = 16px */
	/* em-Angaben ("p","h1" usw.) beziehen sich auf die Schriftgroesse des Elternelementes ("body") */
	font-size: 100%; 

    /* 400 = normal */
	font-weight: 400;

	line-height: 1.5;

	color: var(--darkgray-text);

	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

@media screen and (min-width: 768px){
	body {
		/* breite Scrollbars in Browsern auf Notebook und PC  */ 
		padding-left: 30px;
		padding-right: 30px;

		font-size: 100%;
	}
}

@media screen and (min-width: 800px){
	body {
		font-size: 102.5%;
	}
}

@media screen and (min-width: 900px){
	body {
		font-size: 105%;
	}
}

@media screen and (min-width: 1000px){
	body {
		font-size: 107.5%;
	}
}

@media screen and (min-width: 1100px){
	body {
		font-size: 110%;
	}
}

@media screen and (min-width: 1200px){
	body {
		font-size: 112.5%;
	}
}

@media screen and (min-width: 1300px){
	body {
		font-size: 115%;
	}
}

@media screen and (min-width: 1400px){
	body {
		font-size: 115%;
	}
}

@media screen and (min-width: 1500px){
	body {
		font-size: 115%;
	}
}

@media screen and (min-width: 1600px){
	body {
		font-size: 115%;
	}
}

@media screen and (min-width: 1700px){
	body {
		font-size: 115%;
	}
}

@media screen and (min-width: 1800px){
	body {
		font-size: 115%;
	}
}


/* **************************************************************************************************** */
/* Gitternetz */
/* **************************************************************************************************** */

.col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9 {
    position: relative;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
}

.col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9 {
    float: left;
}

.col-xs-12 {
    width: 100%;
}

.col-xs-11 {
    width: 91.66666667%;
}

.col-xs-10 {
    width: 83.33333333%;
}

.col-xs-9 {
    width: 75%;
}

.col-xs-8 {
    width: 66.66666667%;
}

.col-xs-7 {
    width: 58.33333333%;
}

.col-xs-6 {
    width: 50%;
}

.col-xs-5 {
    width: 41.66666667%;
}

.col-xs-4 {
    width: 33.33333333%;
}

.col-xs-3 {
    width: 25%;
}

.col-xs-2 {
    width: 16.66666667%;
}

.col-xs-1 {
    width: 8.33333333%;
}

.col-xs-pull-12 {
    right: 100%;
}

.col-xs-pull-11 {
    right: 91.66666667%;
}

.col-xs-pull-10 {
    right: 83.33333333%;
}

.col-xs-pull-9 {
    right: 75%;
}

.col-xs-pull-8 {
    right: 66.66666667%;
}

.col-xs-pull-7 {
    right: 58.33333333%;
}

.col-xs-pull-6 {
    right: 50%;
}

.col-xs-pull-5 {
    right: 41.66666667%;
}

.col-xs-pull-4 {
    right: 33.33333333%;
}

.col-xs-pull-3 {
    right: 25%;
}

.col-xs-pull-2 {
    right: 16.66666667%;
}

.col-xs-pull-1 {
    right: 8.33333333%;
}

.col-xs-pull-0 {
    right: auto;
}

.col-xs-push-12 {
    left: 100%;
}

.col-xs-push-11 {
    left: 91.66666667%;
}

.col-xs-push-10 {
    left: 83.33333333%;
}

.col-xs-push-9 {
    left: 75%;
}

.col-xs-push-8 {
    left: 66.66666667%;
}

.col-xs-push-7 {
    left: 58.33333333%;
}

.col-xs-push-6 {
    left: 50%;
}

.col-xs-push-5 {
    left: 41.66666667%;
}

.col-xs-push-4 {
    left: 33.33333333%;
}

.col-xs-push-3 {
    left: 25%;
}

.col-xs-push-2 {
    left: 16.66666667%;
}

.col-xs-push-1 {
    left: 8.33333333%;
}

.col-xs-push-0 {
    left: auto;
}

.col-xs-offset-12 {
    margin-left: 100%;
}

.col-xs-offset-11 {
    margin-left: 91.66666667%;
}

.col-xs-offset-10 {
    margin-left: 83.33333333%;
}

.col-xs-offset-9 {
    margin-left: 75%;
}

.col-xs-offset-8 {
    margin-left: 66.66666667%;
}

.col-xs-offset-7 {
    margin-left: 58.33333333%;
}

.col-xs-offset-6 {
    margin-left: 50%;
}

.col-xs-offset-5 {
    margin-left: 41.66666667%;
}

.col-xs-offset-4 {
    margin-left: 33.33333333%;
}

.col-xs-offset-3 {
    margin-left: 25%;
}

.col-xs-offset-2 {
    margin-left: 16.66666667%;
}

.col-xs-offset-1 {
    margin-left: 8.33333333%;
}

.col-xs-offset-0 {
    margin-left: 0;
}

@media (min-width:768px) {
    .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9 {
        float: left;
    }

    .col-sm-12 {
        width: 100%;
    }

    .col-sm-11 {
        width: 91.66666667%;
    }

    .col-sm-10 {
        width: 83.33333333%;
    }

    .col-sm-9 {
        width: 75%;
    }

    .col-sm-8 {
        width: 66.66666667%;
    }

    .col-sm-7 {
        width: 58.33333333%;
    }

    .col-sm-6 {
        width: 50%;
    }

    .col-sm-5 {
        width: 41.66666667%;
    }

    .col-sm-4 {
        width: 33.33333333%;
    }

    .col-sm-3 {
        width: 25%;
    }

    .col-sm-2 {
        width: 16.66666667%;
    }

    .col-sm-1 {
        width: 8.33333333%;
    }

    .col-sm-pull-12 {
        right: 100%;
    }

    .col-sm-pull-11 {
        right: 91.66666667%;
    }

    .col-sm-pull-10 {
        right: 83.33333333%;
    }

    .col-sm-pull-9 {
        right: 75%;
    }

    .col-sm-pull-8 {
        right: 66.66666667%;
    }

    .col-sm-pull-7 {
        right: 58.33333333%;
    }

    .col-sm-pull-6 {
        right: 50%;
    }

    .col-sm-pull-5 {
        right: 41.66666667%;
    }

    .col-sm-pull-4 {
        right: 33.33333333%;
    }

    .col-sm-pull-3 {
        right: 25%;
    }

    .col-sm-pull-2 {
        right: 16.66666667%;
    }

    .col-sm-pull-1 {
        right: 8.33333333%;
    }

    .col-sm-pull-0 {
        right: auto;
    }

    .col-sm-push-12 {
        left: 100%;
    }

    .col-sm-push-11 {
        left: 91.66666667%;
    }

    .col-sm-push-10 {
        left: 83.33333333%;
    }

    .col-sm-push-9 {
        left: 75%;
    }

    .col-sm-push-8 {
        left: 66.66666667%;
    }

    .col-sm-push-7 {
        left: 58.33333333%;
    }

    .col-sm-push-6 {
        left: 50%;
    }

    .col-sm-push-5 {
        left: 41.66666667%;
    }

    .col-sm-push-4 {
        left: 33.33333333%;
    }

    .col-sm-push-3 {
        left: 25%;
    }

    .col-sm-push-2 {
        left: 16.66666667%;
    }

    .col-sm-push-1 {
        left: 8.33333333%;
    }

    .col-sm-push-0 {
        left: auto;
    }

    .col-sm-offset-12 {
        margin-left: 100%;
    }

    .col-sm-offset-11 {
        margin-left: 91.66666667%;
    }

    .col-sm-offset-10 {
        margin-left: 83.33333333%;
    }

    .col-sm-offset-9 {
        margin-left: 75%;
    }

    .col-sm-offset-8 {
        margin-left: 66.66666667%;
    }

    .col-sm-offset-7 {
        margin-left: 58.33333333%;
    }

    .col-sm-offset-6 {
        margin-left: 50%;
    }

    .col-sm-offset-5 {
        margin-left: 41.66666667%;
    }

    .col-sm-offset-4 {
        margin-left: 33.33333333%;
    }

    .col-sm-offset-3 {
        margin-left: 25%;
    }

    .col-sm-offset-2 {
        margin-left: 16.66666667%;
    }

    .col-sm-offset-1 {
        margin-left: 8.33333333%;
    }

    .col-sm-offset-0 {
        margin-left: 0;
    }
}

@media (min-width:992px) {
    .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9 {
        float: left;
    }

    .col-md-12 {
        width: 100%;
    }

    .col-md-11 {
        width: 91.66666667%;
    }

    .col-md-10 {
        width: 83.33333333%;
    }

    .col-md-9 {
        width: 75%;
    }

    .col-md-8 {
        width: 66.66666667%;
    }

    .col-md-7 {
        width: 58.33333333%;
    }

    .col-md-6 {
        width: 50%;
    }

    .col-md-5 {
        width: 41.66666667%;
    }

    .col-md-4 {
        width: 33.33333333%;
    }

    .col-md-3 {
        width: 25%;
    }

    .col-md-2 {
        width: 16.66666667%;
    }

    .col-md-1 {
        width: 8.33333333%;
    }

    .col-md-pull-12 {
        right: 100%;
    }

    .col-md-pull-11 {
        right: 91.66666667%;
    }

    .col-md-pull-10 {
        right: 83.33333333%;
    }

    .col-md-pull-9 {
        right: 75%;
    }

    .col-md-pull-8 {
        right: 66.66666667%;
    }

    .col-md-pull-7 {
        right: 58.33333333%;
    }

    .col-md-pull-6 {
        right: 50%;
    }

    .col-md-pull-5 {
        right: 41.66666667%;
    }

    .col-md-pull-4 {
        right: 33.33333333%;
    }

    .col-md-pull-3 {
        right: 25%;
    }

    .col-md-pull-2 {
        right: 16.66666667%;
    }

    .col-md-pull-1 {
        right: 8.33333333%;
    }

    .col-md-pull-0 {
        right: auto;
    }

    .col-md-push-12 {
        left: 100%;
    }

    .col-md-push-11 {
        left: 91.66666667%;
    }

    .col-md-push-10 {
        left: 83.33333333%;
    }

    .col-md-push-9 {
        left: 75%;
    }

    .col-md-push-8 {
        left: 66.66666667%;
    }

    .col-md-push-7 {
        left: 58.33333333%;
    }

    .col-md-push-6 {
        left: 50%;
    }

    .col-md-push-5 {
        left: 41.66666667%;
    }

    .col-md-push-4 {
        left: 33.33333333%;
    }

    .col-md-push-3 {
        left: 25%;
    }

    .col-md-push-2 {
        left: 16.66666667%;
    }

    .col-md-push-1 {
        left: 8.33333333%;
    }

    .col-md-push-0 {
        left: auto;
    }

    .col-md-offset-12 {
        margin-left: 100%;
    }

    .col-md-offset-11 {
        margin-left: 91.66666667%;
    }

    .col-md-offset-10 {
        margin-left: 83.33333333%;
    }

    .col-md-offset-9 {
        margin-left: 75%;
    }

    .col-md-offset-8 {
        margin-left: 66.66666667%;
    }

    .col-md-offset-7 {
        margin-left: 58.33333333%;
    }

    .col-md-offset-6 {
        margin-left: 50%;
    }

    .col-md-offset-5 {
        margin-left: 41.66666667%;
    }

    .col-md-offset-4 {
        margin-left: 33.33333333%;
    }

    .col-md-offset-3 {
        margin-left: 25%;
    }

    .col-md-offset-2 {
        margin-left: 16.66666667%;
    }

    .col-md-offset-1 {
        margin-left: 8.33333333%;
    }

    .col-md-offset-0 {
        margin-left: 0;
    }
}

@media (min-width:1200px) {
    .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9 {
        float: left;
    }

    .col-lg-12 {
        width: 100%;
    }

    .col-lg-11 {
        width: 91.66666667%;
    }

    .col-lg-10 {
        width: 83.33333333%;
    }

    .col-lg-9 {
        width: 75%;
    }

    .col-lg-8 {
        width: 66.66666667%;
    }

    .col-lg-7 {
        width: 58.33333333%;
    }

    .col-lg-6 {
        width: 50%;
    }

    .col-lg-5 {
        width: 41.66666667%;
    }

    .col-lg-4 {
        width: 33.33333333%;
    }

    .col-lg-3 {
        width: 25%;
    }

    .col-lg-2 {
        width: 16.66666667%;
    }

    .col-lg-1 {
        width: 8.33333333%;
    }

    .col-lg-pull-12 {
        right: 100%;
    }

    .col-lg-pull-11 {
        right: 91.66666667%;
    }

    .col-lg-pull-10 {
        right: 83.33333333%;
    }

    .col-lg-pull-9 {
        right: 75%;
    }

    .col-lg-pull-8 {
        right: 66.66666667%;
    }

    .col-lg-pull-7 {
        right: 58.33333333%;
    }

    .col-lg-pull-6 {
        right: 50%;
    }

    .col-lg-pull-5 {
        right: 41.66666667%;
    }

    .col-lg-pull-4 {
        right: 33.33333333%;
    }

    .col-lg-pull-3 {
        right: 25%;
    }

    .col-lg-pull-2 {
        right: 16.66666667%;
    }

    .col-lg-pull-1 {
        right: 8.33333333%;
    }

    .col-lg-pull-0 {
        right: auto;
    }

    .col-lg-push-12 {
        left: 100%;
    }

    .col-lg-push-11 {
        left: 91.66666667%;
    }

    .col-lg-push-10 {
        left: 83.33333333%;
    }

    .col-lg-push-9 {
        left: 75%;
    }

    .col-lg-push-8 {
        left: 66.66666667%;
    }

    .col-lg-push-7 {
        left: 58.33333333%;
    }

    .col-lg-push-6 {
        left: 50%;
    }

    .col-lg-push-5 {
        left: 41.66666667%;
    }

    .col-lg-push-4 {
        left: 33.33333333%;
    }

    .col-lg-push-3 {
        left: 25%;
    }

    .col-lg-push-2 {
        left: 16.66666667%;
    }

    .col-lg-push-1 {
        left: 8.33333333%;
    }

    .col-lg-push-0 {
        left: auto;
    }

    .col-lg-offset-12 {
        margin-left: 100%;
    }

    .col-lg-offset-11 {
        margin-left: 91.66666667%;
    }

    .col-lg-offset-10 {
        margin-left: 83.33333333%;
    }

    .col-lg-offset-9 {
        margin-left: 75%;
    }

    .col-lg-offset-8 {
        margin-left: 66.66666667%;
    }

    .col-lg-offset-7 {
        margin-left: 58.33333333%;
    }

    .col-lg-offset-6 {
        margin-left: 50%;
    }

    .col-lg-offset-5 {
        margin-left: 41.66666667%;
    }

    .col-lg-offset-4 {
        margin-left: 33.33333333%;
    }

    .col-lg-offset-3 {
        margin-left: 25%;
    }

    .col-lg-offset-2 {
        margin-left: 16.66666667%;
    }

    .col-lg-offset-1 {
        margin-left: 8.33333333%;
    }

    .col-lg-offset-0 {
        margin-left: 0;
    }
}

.row {
	margin-right: -15px;
	margin-left: -15px;
}

.row .row {
	margin-right: 0px;
	margin-left: 0px;
}

.col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12{
	padding-top: 0px;
	padding-bottom: 0px;
}

@media screen and (min-width: 768px){
	.col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12{
		padding-top: 0px;
		padding-bottom: 0px;
}
}

.col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12{
	padding-top: 15px;
	padding-bottom: 15px;
}

@media screen and (min-width: 1200px){
	.col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12{
		padding-top: 0px;
		padding-bottom: 0px;
}
}

/* **************************************************************************************************** */
/* Text */
/* **************************************************************************************************** */

p, 
h1, h2, h3, h4 h5, h6, 
ul, li, 
tr, td, 
input,
textarea,
select,
button
{
/* automatische Worttrennung */
/*
	-moz-hyphens: auto;
	-o-hyphens: auto;
	-webkit-hyphens: auto;
	-ms-hyphens: auto;
	hyphens: auto;
*/
}

p,
ul, li,
tr, td,
input,
textarea,
select, option, option:checked,
button 
{
	font-size: 1em;
}

p {
	margin-top: 0em;
	margin-right: 0em;
	margin-bottom: 0.5em;
	margin-left: 0em;

	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;

	text-align: justify;
}

ul {
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0.5em;
	margin-left: 30px;

	padding: 0px;
}

input,
textarea,
select, option, option:checked,
button 
{
	font-family: inherit;
	font-weight: inherit;
	line-height: inherit;
    color: inherit;
}

::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: var(--darkgray-placeholder);
}
:-moz-placeholder { /* Firefox 18- */
  color: var(--darkgray-placeholder);
    opacity: 1; /* Firefox adds a lower opacity to the placeholder, so we use opacity: 1 to fix this. */
}
::-moz-placeholder { /* Firefox 19+ */
  color: var(--darkgray-placeholder);
    opacity: 1; /* Firefox adds a lower opacity to the placeholder, so we use opacity: 1 to fix this. */
}
::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: var(--darkgray-placeholder);
    opacity: 1; /* Firefox adds a lower opacity to the placeholder, so we use opacity: 1 to fix this. */
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
    color: var(--darkgray-placeholder);
}
::-ms-input-placeholder { /* Microsoft Edge */
    color: var(--darkgray-placeholder);
}

h1, h2, h3, h4, h5, h6 {
	font-family: system-ui, sans-serif;
}

h1 {
	font-size: 2em;
	font-weight: 600;

	color: var(--green-wohnungslosenhilfe);

	margin-top: 0em;
	margin-right: 0;
	margin-bottom: 0.5em;
	margin-left: 0;

	padding: 0px;

	line-height: 1;
}

h1 .unterueberschrift {
	font-size: 0.75em;
	font-weight: 600;

    color: var(--darkgray-text);

	margin-top: 0;
	margin-right: 0;
	margin-bottom: 0;
	margin-left: 0;

	padding: 0px;

	line-height: 1;
}

h1 .uebersicht {
	font-size: 0.75em;
	font-weight: 600;

	margin-top: 0;
	margin-right: 0;
	margin-bottom: 0;
	margin-left: 0;

	padding: 0px;

	line-height: 1.25;
}

h2 {
	font-size: 1.5em;
	font-weight: 600;

	margin-top: 0em;
	margin-right: 0;
	margin-bottom: 0.5em;
	margin-left: 0;

	padding: 0px;
}









h3 {
	font-size: 1.25em;
	font-weight: 400;

	margin-top: 0em;
	margin-right: 0;
	margin-bottom: 0.5em;
	margin-left: 0;

	padding: 0px;
}

h4 {
	font-size: 1.25em;
	font-weight: 400;

	margin-top: 0em;
	margin-right: 0;
	margin-bottom: 0.5em;
	margin-left: 0;

	padding: 0px;
}

h5 {
	font-size: 1.25em;
	font-weight: 400;
	
	margin-top: 0em;
	margin-right: 0;
	margin-bottom: 0.5em;
	margin-left: 0;

	padding: 0px;
}

h6 {
	font-size: 1em;
	font-weight: 400; 

	margin-top: 0em;
	margin-right: 0;
	margin-bottom: 0.5em;
	margin-left: 0;

	padding: 0px;
}

/* **************************************************************************************************** */
/* Bild */
/* **************************************************************************************************** */

img {
  vertical-align: middle;
  border: 0;
}

.img-responsive {
  display: block;
  max-width: 100%;
  height: auto;
}

.img-circle {
  border-radius: 50%;
}
.bild-zentrieren{
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.bild-abstand-oben-unten{
	margin-top: 15px;
	margin-bottom: 15px;
}

.bild-abstand-links-rechts{
	margin-left: 15px;
	margin-right: 15px;
}

/* **************************************************************************************************** */
/* glyphicon */
/* **************************************************************************************************** */

@font-face {
  font-family: 'Glyphicons Halflings';
  src: url(/bootstrap/fonts/glyphicons-halflings-regular.eot);
  src: url(/bootstrap/fonts/glyphicons-halflings-regular.eot?#iefix) format('embedded-opentype'),
        url(/bootstrap/fonts/glyphicons-halflings-regular.woff2) format('woff2'),
        url(/bootstrap/fonts/glyphicons-halflings-regular.woff) format('woff'),
        url(/bootstrap/fonts/glyphicons-halflings-regular.ttf) format('truetype'),
        url(/bootstrap/fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular) format('svg');
}

.glyphicon {
  position: relative;
  top: 1px;
  display: inline-block;
  font-family: 'Glyphicons Halflings';
  font-style: normal;
  font-weight: 400;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.glyphicon-chevron-left:before {
    content: "\e079";
}

.glyphicon-chevron-right:before {
    content: "\e080";
}

.glyphicon-phone-alt:before {
    content: "\e183";
}

.glyphicon-print:before {
    content: "\e045";
}

.glyphicon-envelope:before {
    content: "\2709";
}

.glyphicon-globe:before {
    content: "\e135";
}

.glyphicon-user:before {
    content: "\e008";
}

.glyphicon-film:before {
    content: "\e009";
}

.glyphicon-file:before {
    content: "\e022";
}

.glyphicon-home:before {
    content: "\e021";
}

.glyphicon-menu-down:before {
	content:"\e259"
}

.glyphicon-menu-up:before {
	content:"\e260"
}

.glyphicon-remove:before {
	content:"\e014"
}

/* **************************************************************************************************** */
/* form */
/* **************************************************************************************************** */

.form-group {
  margin-bottom: 15px;

	font-size: 0.8em;
}

.form-control {
  display: block;

  width: 100%;
  height: 34px;

  padding: 6px 12px;

  background-color: #fff;
  background-image: none;

  border: 1px solid #ccc;
  border-radius: 4px;

  -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
  box-shadow: inset 0 1px 1px rgba(0,0,0,.075);

  -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
  -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
  transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}

textarea.form-control {
  height: auto;
}

.button {
  display: inline-block;
  
  padding: 6px 12px;

  margin-bottom: 0;

  text-align: center;

 	font-size: 0.8em;

  white-space: nowrap;

  vertical-align: middle;

  -ms-touch-action: manipulation;
  touch-action: manipulation;

  cursor: pointer;

  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  
  background-image: none;

  border: 1px solid transparent;
  border-radius: 4px;
}

.button-white {
  background-color: #fff;
}

.button-white:hover {
  background-color: #e6e6e6;
  color: #333;
}

.button-green {
  background-color: #2e8b57;
	color: white
}

.button-green:hover {
  background-color: #277246;
	color: white
}

/* **************************************************************************************************** */
/* Kontainer */
/* **************************************************************************************************** */

.kontainer{
	position: relative;

	margin-top: 0px;
	margin-bottom: 30px;
	margin-left: 0px;
	margin-right: 0px;

	padding-top: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	padding-right: 0px;

	border: none;

	float: none;
}

.kontainer:after{
	clear:both;
	content:" ";
	display:block;
}

/* **************************************************************************************************** */
/* Navigationsleiste */
/* **************************************************************************************************** */

#navigationsleiste{
	/* Position */
	position: fixed;
	top: 0;
	left: 0;
	height:75px; 
	width: 100%;
	
	/* Reihenfolge */
	/* an element with greater stack order is always in front of an element with a lower stack order,
		 z-index only works on positioned elements (position:absolute, position:relative, or position:fixed) */
	z-index:99999;

	/* Hintergrundfarbe: weiß */
	background-color: rgba(255,255,255,0.95);
  backdrop-filter: blur(10px);

	/* Transparenz */
	opacity:0.9;

	/* Schatten */
	/* horizontal shadow, vewrtikal shadow, blur effect, color */
	-webkit-box-shadow: 0 10px 30px rgba(0,0,0,0.08);
	-moz-box-shadow: 0 10px 30px rgba(0,0,0,0.08);
	box-shadow: 0 10px 30px rgba(0,0,0,0.08);
}

/* **************************************************************************************************** */
/* Navigation Logo */
/* **************************************************************************************************** */

#nav_logo{
	position: fixed;

	left: 15px;
	top: 5px;
}

@media screen and (min-width: 768px){
	#nav_logo{
		left: 30px;
	}
}

/* **************************************************************************************************** */
/* Navigation Desktop Tablet */
/* **************************************************************************************************** */

#nav_zentrieren{
	display: none;

	margin-top: 0px;
	margin-bottom: 0px;
	margin-right: auto;
	margin-left: auto;
}

@media screen and (min-width: 768px){
	#nav_zentrieren {
		display: table;
	}
}

/* alle Ebenen */

#nav_zentrieren ul{
	margin-top: 0px;
	margin-bottom: 0px;
	margin-right: 0px;
	margin-left: 0px;
}

#nav_zentrieren li{
	list-style-type: none;
}

#nav_zentrieren a{
	font-family: system-ui, sans-serif;
	font-size: 17px;

	list-style-type: none;
}

/* 1. Ebene */

#nav_zentrieren>ul{
	width:500px;
}

#nav_zentrieren>ul>li {
	float:left;
}

#nav_zentrieren>ul>li>a {
	display: block;

	padding-top: 29px;
	padding-bottom: 15px;
}

	/* links Innenabstand außer bei erstem Eintrag */
#nav_zentrieren>ul>li:not(:first-child) a{
	padding-left: 7.5px;
}
	/* rechts Innenabstand außer bei letztem Eintrag */
#nav_zentrieren>ul>li:not(:last-child) a{
	padding-right: 7.5px;
}

#nav_zentrieren>ul>li> a {
	color: #374151;

	font-weight: 600;
}

#nav_zentrieren>ul>li> a:hover {
	color: #2e8b57;
}

/* auf Geräten, auf denen es keinen Hover- Effekt gibt, wie zum Beispiel Smartphones und Tablets, Pointer- Events deaktivieren */
@media (hover:none) {
	.dropdown>a:hover{
		pointer-events: none;
    }
}

/* 2. Ebene */

#nav_zentrieren>ul>li>ul {
	position: absolute;

	background: #2e8b57;

	/* Schatten */
	/* horizontal shadow, vewrtikal shadow, blur effect, color */
/*	-webkit-box-shadow: 0 10px 30px rgba(0,0,0,0.08);
	-moz-box-shadow: 0 10px 30px rgba(0,0,0,0.08);
	box-shadow: 0 10px 30px rgba(0,0,0,0.08); */
}

/* die Untermenüs werden nur angezeigt, wenn das Hauptmenüelement gehovert wird */
#nav_zentrieren>ul>li>ul {
	visibility: hidden;

	-webkit-transform:scaleY(0); 
	-moz-transform:scaleY(0); 
	-o-transform:scaleY(0); 
	transform:scaleY(0);
}
#nav_zentrieren>ul>li:hover ul {
	/* "ul" Abstand Oben 21px */
	/* "li" Innenabstand 7.5px */
	/* "a" Schriftgröße 17px */
	/* "body" Zeilenhöhe ca. 1.4 */
	/* "li" Innenabstand 7.5px */
	/* (21px + 7.5px + (17px x 1.4)) + 7.5px = ca. 59px */
	top: 59px;

	visibility: visible;

	-webkit-transition:-webkit-transform 0.3s;
	-moz-transition:-moz-transform 0.3s;
	-o-transition:-o-transform 0.3s;
	transition:transform 0.3s;

	-webkit-transform:scaleY(1); 
	-moz-transform:scaleY(1); 
	-o-transform:scaleY(1); 
	transform:scaleY(1); 

	-webkit-transform-origin:top; 
	-moz-transform-origin:top; 
	-o-transform-origin:top; 
	transform-origin:top; 
}

#nav_zentrieren>ul>li>ul>li>a {
	padding-left: 15px;
	padding-right: 15px;
	padding-top: 15px;
	padding-bottom: 15px;
}

	/* unten weißer Rand außer bei letztem Eintrag */
#nav_zentrieren>ul>li>ul>li:not(:last-child) {
	border-bottom: 1px solid #ffffff;
}

#nav_zentrieren>ul>li>ul>li a {
	display: block;

	color: #ffffff;

	font-weight: 400;
}

#nav_zentrieren>ul>li>ul>li:hover {
	background: #41a86e;
}

/* **************************************************************************************************** */
/* Navigation Icon Open */
/* **************************************************************************************************** */

#nav_icon_open{
	position: fixed;
	right:15px;
	/* "Navigationsleiste" Höhe 75px */
	/* "Navicon" Schriftgrö 25px */
	/* (75px - 25) / 2 = ca. 25px */
	top:25px;

	font-size: 25px;
	color:#374151;

	visibility: visible;
}

@media screen and (min-width: 768px){
	#nav_icon_open {
		visibility: hidden;
	}
}

#nav_icon_open:hover {
	color: #2e8b57;
}

/* **************************************************************************************************** */
/* Navigation Smartphone */
/* **************************************************************************************************** */

#nav_overlay {
	position: fixed;

	top: 0;
	left: 0;

	height: 100%;
	width: 0;

	z-index: 1;

	background-color: rgb(255,255,255);
	background-color: rgba(255,255,255, 0.9);

	overflow-x: hidden;

	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	-o-transition: all 0.3s;
	transition: all 0.3s;
}

#nav_overlay_content {
	position: relative;

	top: 75px;

	width: 100%;

	text-align: center;

	margin-top: 15px;
}

#nav_icon_close {
	position: absolute;

	top: 0px;
	right: 0px;
}

#nav_icon_close a , #nav_icon_close span{
	display: block;

	padding-left: 15px;
	padding-right: 15px;

	font-size: 50px; 

	text-decoration: none;
}

#nav_overlay_content a {
	display: block;

	padding: 7.5px;

	font-size: 25px;

}

#nav_overlay a:link,
#nav_overlay a:visited {
	color: #2e8b57;
}

#nav_overlay a:hover,
#nav_overlay a:active {
	color: #374151;
}

/* **************************************************************************************************** */
	/* Ãœberschrift */
	/* **************************************************************************************************** */

#ueberschrift{
	margin-top: 100px;

	position: relative;

	display: block;
}

@media screen and (min-width: 768px){
	#ueberschrift {
		display: none;
	}
}

#ueberschrift h1 {
	text-align: center;

	/* font-family: 'Overlock SC', cursive; */
	font-family: system-ui, sans-serif;
	
	/* padding-bottom: 0.35em; */
	/* border-bottom: 1px solid #aaa; */

	margin-bottom: 0em;
}

/* **************************************************************************************************** */
	/* Bilderkarussell */
	/* **************************************************************************************************** */

#bilderkarussell{
margin-top: 75px;

	position: relative;

	display: none;
}

@media screen and (min-width: 768px){
	#bilderkarussell {
		display: block;
	}
}

#bilderkarussell .beschriftung{
	position: absolute;
	
	right: 15%;
	left: 15%;
	bottom: 45px;

	margin-bottom: 0.5em;

	z-index: 1;
}

#bilderkarussell .beschriftung h1, 
#bilderkarussell .beschriftung p {
	margin-bottom: 0em;

	line-height: 1;

	text-align: center;

	color: var(--lightgray-background);

	text-shadow: 1px 1px 2px #374151;
}

#bilderkarussell .beschriftung h1{
	/* font-family: 'Overlock SC', cursive; */
	font-family: system-ui, sans-serif;
}

#bilderkarussell .beschriftung h1 .schrift-vergrößern {
	font-size: 100%;
}

@media screen and (min-width: 768px){
	#bilderkarussell .beschriftung h1 .schrift-vergrößern{
		font-size: 150%;
	}
}

	/* carousel-control */

.carousel-control {
	position: absolute;

	top: 0;
	bottom: 0;

	width: 15%;

	text-shadow: 0 1px 2px rgba(0,0,0,.6);

	filter: alpha(opacity=50);
	opacity: .5;
}

.carousel-control.left {
	left: 0;
	right: auto;
}

.carousel-control.right {
	right: 0;
	left: auto;
}

.carousel-control:hover {
	color: #fff;

	filter: alpha(opacity=90);
	opacity: .9;
}

	/* glyphicon */

.carousel-control .glyphicon-chevron-left, 
.carousel-control .glyphicon-chevron-right {
	display: inline-block;

	position: absolute;

	top: 50%;

	font-size: 30px;

	color: #2e8b57;    
}

.carousel-control .glyphicon-chevron-left {
	left: 50%;
}

.carousel-control .glyphicon-chevron-right {
	right: 50%;
}

.carousel-control .glyphicon-chevron-right:before,
.carousel-control .glyphicon-chevron-left:before {
	background: #ffffff;    

	border-radius: 100%;    

	padding: 7px 10px;
}

/* carousel-indicators */

.carousel-indicators {
	position: absolute;

	bottom: 15px;

	left: 50%;

	width: 60%;

	margin-left: -30%;

	text-align: center;

	list-style: none;
}

.carousel-indicators li {
	display: inline-block;

	width: 12px;
	height: 12px;

	margin: 2px;

	cursor: pointer;

	background-color: rgba(0,0,0,0);

	border: 1px solid #ffffff;
	border-radius: 10px;
}

.carousel-indicators li.active {
	background-color: #ffffff;
}

	/* **************************************************************************************************** */
	/* Bilderkarussell - Bootstrap */
	/* **************************************************************************************************** */

	/* carousel-inner */

.carousel-inner {
	position: relative;

	width: 100%;
	height: auto;

	overflow: hidden;
}

.carousel-inner:after {
	position: absolute;

	right:0;
	bottom: 0;

	width: 1800px;
	height: 650px;

	content: "";

	background: url(/png/bilderkarusell_gruene_linie.png) 100% 0 no-repeat transparent;
}

.carousel-inner > .item {
	position: relative;

	display: none;

	-webkit-transition: .6s ease-in-out left;
	-o-transition: .6s ease-in-out left;
	transition: .6s ease-in-out left;
}

.carousel-inner > .item > a > img, 
.carousel-inner > .item > img {
	display: block;
	max-width: 100%;
	height: auto;
}

.carousel-inner > .active, 
.carousel-inner > .next, 
.carousel-inner > .prev {
	display: block;
}

.carousel-inner > .active {
	left: 0;
}

.carousel-inner > .next, 
.carousel-inner > .prev {
	position: absolute;
	top: 0;
	width: 100%;
}

.carousel-inner > .next {
	left: 100%;
}

.carousel-inner > .prev {
	left: -100%;
}

.carousel-inner > .next.left, 
.carousel-inner > .prev.right {
	left: 0;
}

.carousel-inner > .active.left {
	left: -100%;
}

.carousel-inner > .active.right {
	left: 100%;
}

	/* **************************************************************************************************** */
	/* Sidebar Maincontent */
	/* **************************************************************************************************** */

#sidebarmaincontent{
	max-width: 1400px;

	margin-left: auto;
	margin-right: auto;
}

	/* **************************************************************************************************** */
	/* Sidebar */
	/* **************************************************************************************************** */

.sidebar{

	border-radius:12px;

	background-color: var(--white-background);

	/* Schatten */
	/* horizontal shadow, vertikal shadow, blur effect, color */
	-webkit-box-shadow: 0 10px 30px rgba(0,0,0,0.08);
	-moz-box-shadow: 0 10px 30px rgba(0,0,0,0.08);
	box-shadow: 0 10px 30px rgba(0,0,0,0.08);
}

.bildmitueberschrift { 
	position: relative; 
}

.bildmitueberschrift img {
	
	border-radius: 15px 15px 0px 0px;
	
	display: block;

	width: 100%;
	height: auto;
}

.bildmitueberschrift h1 {
	position: absolute; 

	left: 25px;
	right: 25px;
	bottom: 25px;

	text-align: center;

	color: var(--lightgray-background);
	line-height: 1;
	/* font-family: 'Overlock SC', cursive; */
	font-family: system-ui, sans-serif;
	text-shadow: 1px 1px 2px #374151;

	margin-bottom: 0em;
}

.bildmitueberschrift h2 {
	position: absolute; 

	left: 25px;
	right: 25px;
	bottom: 25px;

	text-align: center;

	color: var(--lightgray-background);
	line-height: 1;
	/* font-family: 'Overlock SC', cursive; */
	font-family: system-ui, sans-serif;
	text-shadow: 1px 1px 2px #374151;

	margin-bottom: 0em;
}

.bildmitüberschrift h1 .schrift-vergrößern {
	font-size: 100%;
}

@media screen and (min-width: 768px){
	.bildmitüberschrift h1 .schrift-vergrößern{
		font-size: 120%;
	}
}

.sidebar>.inhalt{
	/* Innenabstand */
	padding: 25px;
}

.sidebar>.inhalt>p {
	text-align: left;
}

	/* **************************************************************************************************** */
	/* Maincontent */
	/* **************************************************************************************************** */

#maincontent{
	margin-bottom: 30px;
}

@media screen and (min-width: 768px){
	#maincontent{
		margin-bottom: 0px;
	}
}

	/* **************************************************************************************************** */
	/* Ãœbersicht */
	/* **************************************************************************************************** */
/*
#uebersicht{
	padding: 25px;
}
*/
#uebersicht h1{
	text-align: center;
}

#uebersicht p{
	text-align: center;
}

#uebersicht a:link,
#uebersicht a:visited,
#uebersicht a:hover,
#uebersicht a:active {
	/* The inherit keyword specifies that a property should inherit its value from its parent element. */
	color:inherit;
} 

#uebersicht img{
	width:250px;
	height:250px;

/* rundes Bild */
	border-radius: 15px;
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;

/* Bild zentrieren */
	display: block;
	margin-left: auto;
	margin-right: auto;

	/* Schatten */
	/* horizontal shadow, vewrtikal shadow, blur effect, color */
	-webkit-box-shadow: 0 10px 30px rgba(0,0,0,0.08);
	-moz-box-shadow: 0 10px 30px rgba(0,0,0,0.08);
	box-shadow: 0 10px 30px rgba(0,0,0,0.08);

	margin-bottom:25px;
}

#uebersicht img:hover{
	/* Schatten */
	/* horizontal shadow, vewrtikal shadow, blur effect, color */
	-webkit-box-shadow: 4px 4px 6px #374151;
	-moz-box-shadow: 4px 4px 6px #374151;
	box-shadow: 4px 4px 6px #374151;
}

	/* **************************************************************************************************** */
	/* Fußbereich */
	/* **************************************************************************************************** */

#fussbereich{
	
	width: 100vw;
	margin-left: calc(50% - 50vw);
	
	margin-bottom: 0px;

	padding: 25px;

	background-color: var(--blue-stadtmission);
}

#fussbereich .row{
    max-width: 1400px;
    margin: 0 auto;
}

#fussbereich h2{

	color: 	var(--lightgray-background);
}

#fussbereich p{
	text-align: left;
	color: 	var(--lightgray-background);
}

#fussbereich td{
	color: var(--lightgray-background);
}

	/* **************************************************************************************************** */
	/* Google Map */
	/* **************************************************************************************************** */

#fussbereich .googlemapinfowindow p{
	color: #000000;
	font-size: 0.75em;
}

	/* **************************************************************************************************** */
	/* Meldung */
	/* **************************************************************************************************** */

.meldung{
	
	border-radius:12px;
	
	background-color: var(--white-background);

	padding: 25px;

	/* Schatten */
	/* horizontal shadow, vertikal shadow, blur effect, color */
	-webkit-box-shadow: 0 10px 30px rgba(0,0,0,0.08);
	-moz-box-shadow: 0 10px 30px rgba(0,0,0,0.08);
	box-shadow: 0 10px 30px rgba(0,0,0,0.08);

}

	/* **************************************************************************************************** */
	/* Meldung */
	/* **************************************************************************************************** */

.stellenausschreibung{
	
	border-radius:12px;
	
	background-color: var(--white-background);

	padding: 25px;

	/* Schatten */
	/* horizontal shadow, vertikal shadow, blur effect, color */
	-webkit-box-shadow: 0 10px 30px rgba(0,0,0,0.08);
	-moz-box-shadow: 0 10px 30px rgba(0,0,0,0.08);
	box-shadow: 0 10px 30px rgba(0,0,0,0.08);

}



.badgeinfo {
    position: absolute;
    top: 0;
  
    padding: 0;
    right: 0;
    color: #fff;
    font-family: system-ui, sans-serif;
   
    /* text-transform: uppercase; */
    z-index: 10000;
    -webkit-transition: 300ms;
    transition: 300ms;max-width: 224px;background: #5babe3;
}
.badgeinfo a span {
    display: block;
    padding: 5px 12px 5px 12px;
    background: url(/jpg/icon_more_than.svg) no-repeat 95% 5px #5babe3;
    color: #fff;
    line-height: 1;
    background-size: 32px;
}
.badgeinfo:hover {
    transform: scale(1.1);
}