:root {
	--header-height: 125px;
	--header-height-standort: 580px;
	--color-awo-red: #e10816;
	--color-awo-red-rgb: 225, 8, 22;
	--card-shadow: 2px 2px 8px rgba(0,0,0,.3);
}

* {
	box-sizing: border-box;
}

html, body {
	padding: 0;
	margin: 0;
	height: 100%;
}

html {
	font: normal normal normal 1em helvetica, sans-serif;
}

a {
	color: var(--color-awo-red);
	text-decoration: none;
}

hr {
	border: none;
	border-top: 2px solid #eee;
}

ul {
	margin: .5em 0;
	padding: 0 2em;
}


blockquote {
	box-shadow: 2px 2px 8px rgba(0,0,0,.2);
	padding: 20px;
	margin: 1.5em 0;
}
blockquote p {
	margin: 0;
}

/* CK_EDITOR */
.cke_top  {
	z-index: 100;
}

/* LEAFLET */
.leaflet-container a {
	color: var(--color-awo-red) !important;
}


/* Form-Elements - START */

input, select {
	padding: .5em;
	font-size: 1em;
}
textarea {
	font: inherit;
	padding: .5em;
}

fieldset {
	border: 0;
	padding: 0;
	line-height: 2em;
}
fieldset > label.left {
	display: inline-block;
	width: 150px;
}

label.required:after {
	content: "*";
	color: var(--color-awo-red);
}

/* Upload START */
.upload-button {
	position: relative;
	padding: .5em;
	background-color: #eeeeee;
	border: 1px solid #0002;
	border-radius: 5px;
	overflow: hidden;
}
.upload-button:hover {
	background: #ddd;
}
.upload-button input {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	height: 30px;
	opacity: 0;
}
/* Upload END */

/* Form-Elements - END */


/* LAYOUT ELEMENTS */

#pagewrapper {
	display: grid;
	grid-template-rows: 135px 8px auto;
	min-height: 100%;
}
#pagewrapper.start {
	grid-template-rows: 135px 350px auto;
}
#pagewrapper:has(> div#headerimg_standort) {
	grid-template-rows: 135px 580px auto;
}

/* Header - START */

header {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-between;
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	font: normal normal normal 62px helvetica, sans-serif;
	color: #313131;
	position: relative;
}
header #logo {
	height: 125px;
}

#headerimg {
	background-size: cover;
	background-position: center center;
	height: 350px;
	box-shadow: var(--card-shadow);
}
#headerimg_standort {
	background-size: cover;
	background-position: center center;
	height: 580px;
	width: 1200px;
	margin: 0 auto;
}
#headerlinie {
	box-shadow: var(--card-shadow);
	background-color: var(--color-awo-red);
	height: 8px;
	display: none;
}

/* Main-Menu */
.menubutton {
	display: none;
}
nav.topmenu a {
	font-size: 20px;
	font-family: helvetica, sans-serif;
	color: var(--color-awo-red);
	text-decoration: none;
	display: inline-block;
	margin: 0 0 .5em .5em;
	padding: .2em .2em;
}
nav.topmenu a:hover {
	color: #444;
}
nav.topmenu a.active {
	color: #444;
}

nav.topmenu a.intern {
	opacity: .5;
}
nav.topmenu  ul,
nav.topmenu  li {
	margin: 0;
	padding: 0;
	z-index: 100;
	width: max-content;
}
nav.topmenu  ul {
	margin-right: 35px;
	margin-top: 25px;
}
nav.topmenu li {
	list-style-type: none;
	display: inline-block;
	position: relative;
}
nav.topmenu > ul > li > ul {
	display: none;
	position: absolute;
	top: 50px;
	background-color:#fff;
	border: 1px solid #ccc;
	box-shadow: 4px 4px 4px rgba(0,0,0,.2);
	font-size: 15px;
}
nav.topmenu > ul > li:hover > ul > li > a:hover {
	color: var(--color-awo-red);
}
nav.topmenu .submenubutton {
	display: none;
}


/* Sticky-Header - START */

#pagewrapper header,
#pagewrapper header #logo,
#pagewrapper header .topmenu,
#pagewrapper header .topmenu > ul {
	transition: all .3s ease-out;
}

#pagewrapper header.nohero {
	position: sticky;
	border-bottom: 2px solid #eee;
	z-index: 9001;
	background-color: #fff;
	top: 0;
}
#pagewrapper #container.nohero {
	border-top: 0;
}
@media (min-width: 1201px) {
	#pagewrapper header.nohero {
		height: 135px;
	}
	#pagewrapper header.nohero.scrolled-below-header.scrolling-down {
		top: -80px;
	}
	#pagewrapper header.nohero.scrolled-below-header nav.topmenu > ul,
	#pagewrapper header.nohero.scrolling-down nav.topmenu > ul
	{
		margin-top:0;
	}
	#pagewrapper header.nohero.scrolled-below-header,
	#pagewrapper header.nohero.scrolling-down {
		height: 80px;
	}
	#pagewrapper header.nohero #logo {
		width: 100%;
		object-fit: cover;
		object-position: left;
		overflow-clip-margin: unset;
	}
	#pagewrapper header.nohero.scrolled-below-header #logo,
	#pagewrapper header.nohero.scrolling-down #logo {
		height: 68px;
		width: 86px;
		margin-top: 5px;
	}
	#pagewrapper header.nohero.scrolled-below-header .topmenu,
	#pagewrapper header.nohero.scrolling-down .topmenu {
		margin-top: -10px;
	}
}
@media (max-width: 1200px) {
	#pagewrapper header.nohero.scrolled-below-header.scrolling-down {
		top: -24vw;
	}
	#pagewrapper header.nohero.scrolled-below-header.scrolling-down:has(#menubutton:checked) {
		top: 0;
	}
}

/* Sticky-Header - END */

/* Header - END */


/* Content-Container - START */

#container {
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: auto 24%;
	padding: 35px 0;
}
#container.nohero {
	border-top: 2px solid #eee; 
	grid-row-start: span 2;
}

/* Content-Container - END */


/* Main-Content - START */

/* Breadcrump */
#content .breadcrump {
	padding: 10px 0;
	font-size: .9em;
	margin-bottom: 3.8em;
}
#content .breadcrump a, #content .breadcrump span {
	color: #444;
	margin: 0 0.3em;
}
#content .breadcrump a:first-child {
	margin-left: 0;
}
#content .breadcrump a:hover {
	color: var(--color-awo-red);
}

/* Startboxes */
#startboxes, .kitaboxes {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-gap: 2em;
	margin-bottom: 3em;
}
#startboxes a, .kitaboxes a {
	box-shadow: var(--card-shadow);
	height: 15em;
	display: flex;
	flex-direction: column;
	border-radius: 7px;
	overflow: hidden;
}
.kitaboxes > a { grid-template-rows: auto 4em; }
#startboxes > a > div:first-child, .kitaboxes > a > div:first-child {
	background-size: cover;
	background-position: center;
	flex-grow: 1;
}
#startboxes > a > div:last-child, .kitaboxes > a > div:last-child {
	padding: 1em;
	border-top: 1px solid #eee;
	background-color: #fff;
	/* background: linear-gradient(0deg, rgb(219 219 219) 0%, rgb(237 237 237) 45%, rgb(253 253 253) 100%); */
	color: var(--color-awo-red);
}
#startboxes:not(:first-child), .kitaboxes:not(:first-child) {
	margin-top: 2em;
}

/* Content */
#content {
	padding: 0 35px;
}
#content img {
	max-width: 100%;
	height: auto !important;
}
#content img.left {
	float: left;
	max-width: 30%;
	margin: 5px 5px 5px 0;
	height: auto !important;
}
#content img.right {
	float: right;
	max-width: 42%;
	margin: 1em 0 2em 2em;
	height: auto !important;
	box-shadow: 2px 2px 8px rgba(0,0,0,.2);
}
#content img.center {
	clear: both;
	max-width: 100%;
	margin: 5px auto;
	height: auto !important;
}
#content img.left:after, #content img.right:after {
	clear: both;
}
#content h1, #content h2, #content h3, #content h4, #content h5, #content h6 {
	margin-block-end: .5em;
}
#content h3 {
	text-decoration: underline;
}
#content p, #content h1, #content h2, #content h3, #content h4, #content h5, #content li {
	/* text-align: justify; */
	line-height: 1.4em;
}
#content h1 {
	text-align: center;
	margin-bottom: .8em;
}
#content span.redtext {
	color: var(--color-awo-red);
}
#content li {
	padding: .2em;
}
#content table {
	width: 100%;
	padding: 0;
	margin: 0;
	box-shadow: var(--card-shadow);
}
#content td {
	vertical-align: top;
	padding: .5em;
}
#content td p {
	margin-top: 0;
	text-align: left;
}
#content img.awovorort {
	margin: .5em 0 0 0;
	max-width: 300px;
}
#content figure.table {
	margin: 0;
}
#content figure.table td {
	padding: 10px;
	vertical-align: top;
}
#content .banner {
	box-shadow: var(--card-shadow);
	height: 300px;
	max-height: 33vw;
	background-size: cover;
	background-position: center;
	margin: 2em 0;
}

/* Site -> News */
#content .newspost {
	box-shadow: var(--card-shadow);
	margin-bottom: 2.5em;
	border-radius: 7px;
	overflow: hidden;
}
#content .newspost > h3 {
	background-color: var(--color-awo-red);
	margin: 0;
	padding: 1em;
	position: relative;
	text-decoration: none;
}
#content .newspost > h3 > a {
	color: #ffffff;				
}
#content .newspost > div {
	padding: 1em;
	overflow: hidden;
}
#content .newspost .newsdatum {
	position: absolute;
	bottom: -2.5em;
	right: 0.6em;
	font-weight: normal;
	font-size: 10px;
	color: #888;
}

/* Site -> Jobs */
#content .stellenanzeigen_wrapper {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-gap: 35px;
	margin-bottom: 35px;
	justify-content: space-between;
}
#content .stellenanzeigen_wrapper h2 {
	grid-column: 1 / span 3;
	margin: 0;
	padding: 0;
}
#content .stellenanzeige {
	box-shadow: var(--card-shadow);
	color: #000;
	display: flex;
	flex-direction: column;
	height: 100%;
	border-radius: 7px;
	overflow: hidden;
}
#content .stellenanzeige .stellenanzeigestelle {
	padding: 10px;
	font-weight: bold;
	font-size: .9em;
	background-color: var(--color-awo-red);
	color: #ffffff;
}
#content .stellenanzeige .stellenanzeigeeinrichtung {
	padding: 10px;
	background-color: #eee;
	font-size: .75em;
	flex-grow: 1;
}
#content .stellenanzeige .stellenanzeigeeinrichtungname {
	color: var(--color-awo-red);
}
#content .stellenanzeige .stellenanzeigeeinrichtungname.kita:before {
	content: 'Kita „';
}
#content .stellenanzeige .stellenanzeigeeinrichtungname.kita:after {
	content: '“ ';
}
#content .stellenanzeige .stellenanzeigeeinrichtungzusatz {
	margin-bottom: .4em;
}
#content .jobs-buttons {
	display:flex;
	justify-content: space-between;
	margin: 4em 0;
}
#content .jobs-buttons a {
	padding-top: 9px;
	padding-bottom: 7px;
	padding-left: 40px;
	width: 215px;
	border-radius: 5px;
	background-repeat: no-repeat;
	background-position: 8px center;
	display: block;
	border: 1px solid;
}
#content .jobs-buttons a:hover {
	box-shadow: var(--card-shadow);
}
#content .jobs-buttons a.jobs-back {
	background-image: url(/img/icons/icon-awo-fuewa-zurueck.svg);
}
#content .jobs-buttons a.jobs-download {
	background-image: url(/img/icons/icon-awo-fuewa-download.svg);
}

/* Site -> Kontakt / Content-Form-Elements */
#content .button,
#content #contactform input[type=submit].button {
	padding-top: 9px;
	padding-bottom: 7px;
	padding-left: 40px;
	width: 215px;
	border-radius: 5px;
	background-repeat: no-repeat;
	background-position: 8px center;
	display: block;
	border: 1px solid var(--color-awo-red);
	color: var(--color-awo-red);
	background-color: transparent;
}
#content #contactform input[type=submit].button{
	padding-left:0;
}
#content .button:hover {
	box-shadow: var(--card-shadow);
	cursor: pointer;
}
#content .button.back {
	background-image: url(/img/icons/icon-awo-fuewa-zurueck.svg);
}
#content #contactform label, #content #eventform label {
	width: 18%;
	display: inline-block;
	vertical-align: top;
}
#content #contactform textarea {
	width: 80%;
	height: 250px;
	font-size: 1em;
	font-family: inherit;
	padding: .5em;
	border-radius: 5px;
	overflow: hidden;
	background-color: #eeeeee;
	border: 1px solid #0002;
}
#content #contactform input {
	padding: .5em;
	width: 40%;
	font-size: 1em;
	margin-bottom: 5px;
	border-radius: 5px;
	overflow: hidden;
	background-color: #eeeeee;
	border: 1px solid #0002;
}
#content #contactform input type checkbox {
	width: inherit;
	transform: scale(2);
	margin-right: 1em;
}
#content #contactform input[type=submit]{
	margin-left: 19%;
	width: auto;
}
#content #contactform input[type=checkbox]{
	width: auto;
}
#content #contactform input#txtCode {
	width: 8em;
	margin-right: .5em;
}
#content #contactform img {
	margin: 1%;
	margin-left: 19%;
}

/* Site -> Events */
#content .events {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-gap: 35px;
	justify-content: space-between;
	margin-bottom: 2em;
}
#content .events h3 {
	grid-column: 1 / span 2;
	margin: 0;
}
#content .events .event {
	box-shadow: 2px 2px 8px rgba(0,0,0,.2);
	border-radius: 7px;
	overflow: hidden;
	display: grid;
	grid-template-columns: 30% auto 45%;
	grid-template-rows: 2em auto auto;
	grid-template-areas: 
		"datum uhrzeit edit" 
		"titel titel standort" 
		"beschreibung beschreibung standort";
	/* Alternative */
	/* grid-template-rows: 2em 2em auto auto; */
	/* grid-template-areas:
		"datum uhrzeit edit"
		"standort standort standort"
		"titel titel titel"
		"beschreibung beschreibung beschreibung"; */
}
#content .events .event div {
	padding: .5em;
}
#content .events .event .datum {
	grid-area: datum;
	background-color: var(--color-awo-red);
	color: #ffffff;
	font-weight: bold;
}
#content .events .event .uhrzeit {
	grid-area: uhrzeit;
	background-color: var(--color-awo-red);
	color: #ffffff;
}
#content .events .event .edit {
	grid-area: edit;
	background-color: var(--color-awo-red);
	color: #ffffff;
	text-align: right;
}
#content .events .event .titel {
	grid-area: titel;
	background-color: #eeeeee;
}
#content .events .event .beschreibung {
	grid-area: beschreibung;
	background-color: #eeeeee;
}
#content .events .event .standort {
	grid-area: standort;
	background-color: #eeeeee;
	border-left: 1px dashed #0002;
	font-size: .9em;
}
#content .events .event .standort a.kita:before {
	content: 'Kita „';
}
#content .events .event .standort a.kita:after {
	content: '“ ';
}

/* Site -> Standort */
#content #standortbild {
	width: 100%;
	margin-bottom: 2em;
	box-shadow: var(--card-shadow);
	height: 400px;
	background-position: center;
	background-size: cover;
}

/* Standort -> Ansprechpartner */
#content .ansprechpartner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-gap: 35px;
	justify-content: space-between;
	margin-bottom: 2em;
}
#content .ansprechpartner > div {
	box-shadow: 2px 2px 8px rgba(0,0,0,.2);
	padding: 35px;
	background-color: var(--color-awo-red);
	color: #ffffff;
	border-radius: 7px;
	overflow: hidden;
}
#content .ansprechpartner div.bild {
	height: 420px;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	margin: -35px -35px 35px -35px;
}
#content .ansprechpartner p {
	margin: 0;
	padding: 0;
}
#content .ansprechpartner p.name {
	font-size: 120%;
	font-weight: bold;
}
#content .ansprechpartner p.funktion {
	font-size: 90%;
	font-weight: bold;
	text-align: left;
}
#content .ansprechpartner p.telefon:before {
	content: 'Tel. ';
}
#content .ansprechpartner.c2modul div {
	padding: 0;
}
#content .ansprechpartner.c2modul > div {
	display: flex;
	flex-direction: column;
	position: relative;
}
#content .ansprechpartner.c2modul .del, 
#content .ansprechpartner.c2modul .edit {
	position: absolute;
	right: 0;
	padding: .4em;
	border: 0;
}
#content .ansprechpartner.c2modul .edit {
	right: 25px;
} 
#content .ansprechpartner.c2modul .nampos {
	padding: 10px;
}
#content .ansprechpartner.c2modul .name {
	font-weight: bold;
	font-size: 120%;
}
#content .ansprechpartner.c2modul .position {
	font-weight: bold;
	font-size: 90%;
}
#content .ansprechpartner.c2modul .data {
	padding: 10px;
	background-color: #eee;
	color: #444444;
	flex-grow: 1;
}
#content .ansprechpartner.c2modul .data div {
	text-overflow: ellipsis;
	overflow: hidden;
}
#content .ansprechpartner.c2modul .tel:before {
	content: 'Tel.: ';
}
#content .ansprechpartner.c2modul .mobil:before {
	content: 'Mobil: ';
}
#content .ansprechpartner.c2modul .fax:before {
	content: 'Fax: ';
}

/* Standort -> Add File */
#content form#standortaddfile input {
	width: 650px;
}
#content form#standortaddfile input[type=submit],
#content form#standortaddfile input[type=button] {
	width: auto;
}

/* Site -> Mewuedit */
#content table.menuedittable {
	width: initial;
}



/* Main-Content - Ende */


/* Sidebar - Start */

#sidebar {
	padding: 0 35px;
	border-left: 2px solid #eee;
}
#sidebar h3 {
	margin-top:3.5em;
}
#sidebar h3:first-of-type {
	margin-top:1.8em;
}

/* NEW BACKBUTTON */
#sidebar a.backbutton {
	background-image: url(/img/icons/icon-awo-fuewa-zurueck.svg);
	background-repeat: no-repeat;
	background-position: 8px center;
	display: block;
	text-decoration: none;
	padding-top: 9px;
	padding-bottom: 8px;
	padding-left: 35px;
	border: 1px solid var(--color-awo-red);
	margin-bottom: 2em;
	border-radius: 5px;
	font-size: .9em;
	margin-bottom: 4.7em;
}
#sidebar a.backbutton:hover {
	box-shadow: var(--card-shadow);
	/* background: url(/img/icons/icon-awo-fuewa-zurueck.svg) 8px center no-repeat, linear-gradient(0deg, rgb(209 205 205) 0%, rgb(225 225 225) 45%, rgb(247 247 247) 100%); */
}

#sidebar img {
	max-width: 100%;
	border-radius: 5px;
}
#sidebar .c2bild img {
	box-shadow: var(--card-shadow);
}
#sidebar img.standortbild {
	box-shadow: var(--card-shadow);
}
#sidebar .sidebarmenu a:hover {
	background-color: #eee;
}
#sidebar .sidebarmenu a:last-child {
	border: none;
}
#sidebar .sidebarmenu a {
	display: block;
	text-decoration: none;
	padding: 5px;
	border-bottom: 1px solid #eee;
	/* color: #444; */
	/* font-size: 15px; */
}
#sidebar .sidebarmenu a.active {
	background-color: #eee;
}
#sidebar .anschriftcontainer {
	box-shadow: var(--card-shadow);
	border-radius: 5px;
	overflow: hidden;
}
#sidebar .anschriftcontainer p.anschrift {
	background-color: var(--color-awo-red);
	color: #ffffff;
	padding: 10px;
	margin: 0;
}
#sidebar #mapcontainer #map {
	height: 150px;
}
#sidebar .stellenanzeige, #sidebar .veranstaltungen {
	box-shadow: var(--card-shadow);
	border-radius: 5px;
	overflow: hidden;
	margin-bottom: 20px;
}
#sidebar a.veranstaltungen {
	display: block;
	color: inherit;
}
#sidebar .veranstaltung {
	font-size: .75em;
	display: grid;
	grid-template-columns: 4.4em auto;
}
#sidebar .veranstaltungdatum {
	background-color: var(--color-awo-red);
	color: #ffffff;
	font-weight: bold;
	padding: 10px;
}
#sidebar .veranstaltungname {
	background-color: #eeeeee;
	padding: 10px;
}
#sidebar .veranstaltungsort {
	color: var(--color-awo-red);
}
#sidebar .veranstaltungsort.kita:before {
	content: 'Kita „';
}
#sidebar .veranstaltungsort.kita:after {
	content: '“';
}
#sidebar .stellenanzeigen_wrapper p {
	background-image: url(/img/icons/icon-awo-fuewa-bewerben-rot.svg);
	background-repeat: no-repeat;
	background-position: 8px center;
	display: block;
	text-decoration: none;
	text-align: center;;
	padding-top: 9px;
	padding-bottom: 8px;
	border: 1px solid var(--color-awo-red);
	margin-bottom: 2em;
	border-radius: 5px;
	font-size: .9em;
	margin-bottom: 4.7em;
}
#sidebar .stellenanzeigen_wrapper p:hover {
	box-shadow: var(--card-shadow);
}
#sidebar .stellenanzeige {
	display: flex;
	flex-direction: column;
	color: #000000;
}
#sidebar .stellenanzeige .stellenanzeigestelle {
	background-color: var(--color-awo-red);
	color: #ffffff;
	padding: 10px;
	font-weight: bold;
	font-size: .9em;
}
#sidebar .stellenanzeige .stellenanzeigeeinrichtung {
	padding: 10px;
	background-color:#eee;
	font-size: .75em;
	flex-grow: 1;
}
#sidebar .stellenanzeige .stellenanzeigeeinrichtungname {
	color: var(--color-awo-red);
}

#sidebar .ansprechpartner>div {
	box-shadow: var(--card-shadow);
	border-radius: 5px;
	overflow: hidden;
	font-size: .9em;
	margin-bottom: 20px;
}
#sidebar .ansprechpartner.c2modul .del,
#sidebar .ansprechpartner.c2modul .edit {
	float: right;
	padding: .4em;
	border: 0;
}
#sidebar .ansprechpartner .nampos {
	background-color: var(--color-awo-red);
	color: #ffffff;
	padding: 10px;
}
#sidebar .ansprechpartner .name {
	font-weight: bold;
	font-size: 120%;
}
#sidebar .ansprechpartner .position {
	font-weight: bold;
	font-size: 90%;
}
#sidebar .ansprechpartner .data {
	padding: 10px;
	background-color: #eee;
}
#sidebar .ansprechpartner .data div {
	text-overflow: ellipsis;
	overflow: hidden;
}
#sidebar .ansprechpartner .tel:before {
	content: 'Tel.: ';
}
#sidebar .ansprechpartner .mobil:before {
	content: 'Mobil: ';
}
#sidebar .ansprechpartner .fax:before {
	content: 'Fax: '
}
#sidebar a.addansprechpartner, #sidebar a.addsprechzeiten, #sidebar a.showevents {
	font-size: .75em;
	text-align: right;
	display: block;
	padding: .5em 0;
}
#sidebar .sprechzeiten {
	box-shadow: var(--card-shadow);
	border-radius: 5px;
	overflow: hidden;
	font-size: .75em;
	display: grid;
	grid-template-columns: 4.4em auto;
	position: relative;
	min-height: 30px;
}
#sidebar .sprechzeiten .delete {
	position: absolute;
	top: 0;
	right: 0;
	padding: .5em;
}
#sidebar .sprechzeiten .edit {
	position: absolute;
	top: 0;
	right: 30px;
	padding: .5em;
}
#sidebar .sprechzeiten .tag {
	background-color: var(--color-awo-red);
	color: #ffffff;
	font-weight: bold;
	padding: 10px;
}
#sidebar .sprechzeiten .zeiten {
	background-color: #eeeeee;
	padding: 10px;
}

#sidebar .downloads a {
	display: block;
	padding: .5em 0;
	border-bottom: 1px dashed rgba(0,0,0,.3);
	font-size: .9em;
}			
#sidebar .downloads a:last-child {
	border: none;
}
#sidebar .downloads a:hover {
	background-color: #eee;
	/* background: linear-gradient(0deg, rgb(219 219 219) 0%, rgb(237 237 237) 45%, rgb(253 253 253) 100%); */
}
#sidebar .downloads a.add {
	font-size: .75em;
	text-align: right;
}
#sidebar a.standort {
	display: flex;
	flex-direction: column;
	box-shadow: var(--card-shadow);
	border-radius: 5px;
	overflow: hidden;
	margin-bottom: 20px;
	display: block;
}
#sidebar .standort .bild { 
	height: 140px;
	background-size: cover;
	background-position: center;
}
#sidebar .standort .details {
	padding: 10px;
	font-size: .75em;
	flex-grow: 1;
	background-color: #eeeeee;
}
#sidebar .standort .name {
	color: var(--color-awo-red);
}
#sidebar .standort .adresse { 
	color: #000;
}
#sidebar .bewerbung {
	font-size: .9em;
}
#sidebar .bewerbung label {
	margin: .5em 0;
	display: block;
	padding: 0 !important;
}
#sidebar .bewerbung input, 
#sidebar .bewerbung select, 
#sidebar .bewerbung button {
	padding: .5em;
	background-color: #eeeeee;
	border: 1px solid #0002;
	border-radius: 5px;
	overflow: hidden;
}
#sidebar .bewerbung label,
#sidebar .bewerbung input,
#sidebar .bewerbung select {
	width: 100%;
	padding: .5em;
	font-size: inherit;
	font-family: inherit;
}
/* NEW RED BUTTON */
#sidebar .bewerbung button {
	width: 100%;
	background-color: var(--color-awo-red);
	border-color: var(--color-awo-red);
	color: #fff;
	background-image: url(/img/icons/icon-awo-fuewa-bewerben.svg);
	background-repeat: no-repeat;
	background-position: 8px center;
	padding-top: 9px;
	padding-bottom: 8px;
	margin-top: 35px;
}
#sidebar .bewerbung button:hover {
	box-shadow: var(--card-shadow);
	cursor: pointer;
}

/* Sidebar - Ende */


/* Spendenbanner - Start */

#spendenbanner {
	width: 100%;
	background-color: #eee;
	/* 
	margin-top: 35px; 
	height: 70px;
	*/
	height: 65px;
}
#spendenbanner > div {
	width:100%;
	max-width:1200px;
	margin: 0 auto;
	/*
	display: grid;
	grid-template-columns: auto 24%;
	*/
	display: flex;
	justify-content: flex-end;
}
/* Spenden */
#spendenbanner a {
	display: block;
	height: 34px;
	border-radius: 5px;
	padding: 9px 20px 0px 40px;
	/* 
	font-weight: bold;
	margin: 18px 35px;
	background-color: #79b530;
	width: 218px;
	*/
	background-color: var(--color-awo-red);
	margin: 15px 35px 0 0;

	color: #fff;
	background-image: url(/img/icons/icon-awo-fuewa-spenden.svg);
	background-repeat: no-repeat;
	background-position: 8px center;
}
#spendenbanner a:hover,
#spendenbanner a.active {
	/*
	background-color: #e10816;
	color: #fff;
	*/
	background-color: #444;
}
/* Einfache Sprache */
#spendenbanner a:first-child {
	background-color: initial;
	color: var(--color-awo-red);
	background-image: none;
	margin-right: auto;
	margin-left: 35px;
	border: 1px solid transparent;
	order: -1;
	position: relative;
}
#spendenbanner a:first-child:before {
	content: '';
	position: absolute;
	inset: 0;
	background-color: var(--color-awo-red);
	-webkit-mask: url(/img/icons/icon-awo-fuewa-einfache-sprache.svg) no-repeat 8px center;
	mask: url(/img/icons/icon-awo-fuewa-einfache-sprache.svg) no-repeat 8px center;
}
#spendenbanner a:first-child:hover,
#spendenbanner a:first-child.active {
	color: #444;
}
#spendenbanner a:first-child:hover:before,
#spendenbanner a:first-child.active:before {
	background-color: #444;
}
/* Mitmachen */
#spendenbanner a:nth-child(2) {
	background-color: #fff;
	color: var(--color-awo-red);
	border: 1px solid var(--color-awo-red);
	background-image: url(/img/icons/icon-awo-fuewa-mitmachen-rot.svg);
}
#spendenbanner a:nth-child(2):hover,
#spendenbanner a:nth-child(2).active {
	/* background-image: url(/img/icons/icon-awo-fuewa-mitmachen-grau.svg); */
	filter: grayscale(1);
	background-color: #fff;
	color: #444;
	border: 1px solid #444;
}

/* Spendenbanner - Ende */


/* Footer - Start */

footer {
	background-color: #444;
	color: #bbb;
}
footer a {
	color: #bbb;
	text-decoration: underline;
}
footer a:hover {
	color: var(--color-awo-red);
	text-decoration: underline;
}

footer #footercontent {
	width: 100%;
	max-width: 1200px;
	margin: 0px auto;
	display: grid;
	grid-template-columns: 38% auto 24%;
	padding: 35px 0;
	/* text-align: justify; */
}
footer #footercontent>div {
	padding: 0 35px;
	border-right: 2px solid #fff5;
}
footer #footercontent>div:last-child {
	border: none;
}
footer #footermenu a {
	display: block;
	color: #bbb;
	border-bottom: 1px solid #555;
	text-decoration: none;
	padding: 5px;
}
footer #footermenu a:last-child {
	border: none;
}
footer #footermenu a:hover {
	background-color: #555;
}

/* Footer - Ende */


/* CK-Fotoverwaltung */

#contentbildergrid {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-gap: 35px;
	justify-content: space-between;
	margin-bottom: 2em;
}
#contentbildergrid .contentbild {
	box-shadow: 2px 2px 8px rgba(0,0,0,.2);
	height: 30vw;
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	background-color: #eee;
	position: relative;
}
#contentbildergrid .contentbild .insertlink {
	display: block;
	background-color: rgba(255,255,255,.5);
	padding: 1vw;
	text-align: center;
	position: absolute;
	width: 100%;
	bottom: 0;
}
#contentbildergrid .contentbild .dellink {
	position: absolute;
	right: 0;
	padding: 1vw;
}
@keyframes slideIn {
	from { transform: translate(0px, -500px); }
}

/* CK-Fotoverwaltung - Ende */


/* Cookiebanner - Start */

#cookiebanner {
	position: fixed;
	top: 0;
	padding: 2vw;
	width: 520px;
	margin-left: -260px;
	background-color: #fff;
	box-shadow: 0px 0px 20px 5px #0005;
	left: 50%;
	font-size: .75em;
	animation: slideIn 1s cubic-bezier(.25, 0, .25, 1);
	z-index:10000;
}

/* Cookiebanner - Ende */



/* ###################################### */
/* ############ MOBILE START ############ */
/* ###################################### */
@media (max-width: 1200px) { 

	html {
		font-size: 4vw;
	}
	header {
		display: block;
		font-size: 5vw;
	}
	header #logo {
		height: 22vw;
	}

	/* Menu-Button */
	label.menubutton {
		display: block;
		width: 16vw;
		height: 14vw;
		position: absolute;
		top: 5vw;
		right: 5vw;
		border-radius: 2vw;
	}
	label.menubutton .line { 
		position: absolute;
		left: 2vw;
		height: 2vw;
		width: 12vw;
		background: #bbb;
		border-radius: 1vw;
		display: block;
		transition: 0.5s;
		transform-origin: center;
	}
	label.menubutton .line:nth-child(1) { top: 2vw; }
	label.menubutton .line:nth-child(2) { top: 6vw; }
	label.menubutton .line:nth-child(3) { top: 10vw; }
	blockquote {
		padding: 4vw;
	}

	/* Main-Menu */
	#menubutton:checked + label.menubutton .line:nth-child(1){
	   transform: translateY(4vw) rotate(135deg);
	}
	#menubutton:checked + label.menubutton .line:nth-child(2){
	   opacity:0;
	}
	#menubutton:checked + label.menubutton .line:nth-child(3){
	   transform: translateY(-4vw) rotate(45deg);
	}
	nav.topmenu {
		height: auto; 
		max-height:0; 
		overflow: hidden; 
		padding: 0;
		transition: all 0.5s;
	}
	nav.topmenu li {
		display: block;
	}
	nav.topmenu a {
		display: block;
		padding: 1vw 5vw;
		text-align: center;
		font-size: 5vw;
	}
	#menubutton:checked + .menubutton  + nav.topmenu { 
		max-height: 600px; 
		margin-bottom: 4vw;
	}

	/* Headerimg */
	#headerimg {
		height: 40vw;
	}
	#headerimg_standort {
		height: auto;
		width: 100%;
		aspect-ratio: 2 / 1;
	}

	/* Page-Layout */
	#pagewrapper {
		display: flex;
		flex-direction: column;
	}
	#container {
		padding: 5vw 0;
		display: block;
		flex-grow: 1;
	}

	/* Startboxes */
	#startboxes, .kitaboxes {
		grid-template-columns: 1fr 1fr;
		grid-gap: 6vw;
	}
	#startboxes > a {
		height: 40vw;
	}
	.kitaboxes > a {
		height: 45vw;
	}
	.kitaboxes > a { grid-template-rows: auto 18vw; }
	#startboxes > a > div:last-child, .kitaboxes > a > div:last-child {
		padding: 3vw;
		font-size: .9em;
	}

	/* Main-Content */
	#content h1 {
		font-size: 1.6em;
		text-align: center;
	}
	#content p {
		/* text-align: left; */
	}
	#content table {
		font-size: .8em;
	}
	#content figure.table {
		display: block;
		margin-block-start: 0;
		margin-block-end: 0;
		margin-inline-start: 0;
		margin-inline-end: 0;
		overflow: scroll;
		box-shadow: var(--card-shadow);
	}
	#content img.right {
		float: none;
		max-width: 100%;
		margin: 0 0 1em 0;
		height: auto !important;
		box-shadow: 2px 2px 8px rgba(0,0,0,.2);
	}
	#content, #sidebar {
		padding: 0 5vw;
	}
	#content .events {
		grid-template-columns: 1fr;
		grid-row-gap: 20px;
		grid-column-gap: 0;
	}
	#content .events .event {
		grid-column: 1;
	}
	#content .stellenanzeigen_wrapper {
		grid-template-columns: 1fr;
		grid-gap: 6vw;
	}
	#content .stellenanzeigen_wrapper h2 {
		grid-column: 1 / 1;
	}
	#content .jobs-buttons {
		display:flex;
		justify-content: space-between;
		margin: 4em 0;
	}
	#content .jobs-buttons a.jobs-download {
		width:100%;
	}
	#content .jobs-buttons a.jobs-back {
		display: none;
	}
	#content #contactform label {
		display: block;
	}
	#content #contactform input {
		padding: .2em;
		width: 100%;
		font-size: 1em;
	}
	#content #contactform textarea {
		font-size: 1em;
		padding: .2em;
		width: 100%;
		height: 8em;
	}
	#content #contactform input type checkbox {
		transform: scale(4);
		margin-right: 1em;
		position: relative;
		bottom: .2em;
		left: .4em;
	}
	#content #contactform input[type=submit] {
		margin-left: 0;
		margin-bottom: 2em;
	}
	#content #contactform img {
		margin: 0;
		width: 50%;
	}
	#content .ansprechpartner {
		grid-template-columns: 1fr;
	}
	#content #standortbild{
		height: 50vw;
	} 
	
	/* Sidebar */
	#sidebar {
		margin-top: 2em;
	}
	#sidebar #mapcontainer #map {
		height: 40vw;
	}
	#sidebar .veranstaltung {
		font-size: .8em;
	}
	#sidebar .stellenanzeigen_wrapper {
		display: grid;
		grid-template-columns: 1fr;
		justify-content: space-between;
	}
	

	#sidebar .standort .bild { 
		height: 40vw;
	}

	/* Spendenbanner */
	#spendenbanner {
		height: fit-content;
	}
	#spendenbanner div {
		justify-content: space-between;
		font-size: smaller;
	}
	#spendenbanner div a {
		width: initial;
		height: fit-content;
		padding-top: .5em;
		padding-bottom: .5em;
        margin: 1em;
		text-align: center;
		padding-left: 5vw;
		padding-right: 1vw;
	}
	#spendenbanner a:nth-child(2) {
		margin-left: 5vw;
	}

	/* Footer */
	footer #footercontent {
		grid-template-columns: 100%;
		justify-content: space-between;
		padding: 5vw 0;
		font-size: .9em;
	}
	footer #footercontent>div {
		padding: 0 5vw;
		border: 0;
	}
	footer #footermenu {
		text-align: center;
		margin-top:5vw;
	}
	footer #footermenu a {
		display: inline-block;
		color: #bbb;
		border-bottom: 0;
		border-right: 1px solid #555;
		text-decoration: none;
		padding: 5px;
	}
	#socialmedialinks, #jobrad {
		text-align: center;
	}
	#socialmedialinks, #kununu {
		text-align: center;
	}

	/* Cookiebanner */
	#cookiebanner {
		padding: 4vw;
		width: 80vw;
		top: 100px;
		margin-left: -40vw;
	}
}