:root {
	--color-425: #182983;

	--font-feature-liga: 1;
	--font-feature-calt: 1;
	--font-feature-ss01: 1;
	--font-feature-tnum: 0;

	font-family: Inter, sans-serif;
	font-feature-settings: 'liga' var(--font-feature-liga), 'calt' var(--font-feature-calt), 'ss01' var(--font-feature-ss01), 'tnum' var(--font-feature-tnum);
}

@supports (font-variation-settings: normal) {
	:root { font-family: InterVariable, sans-serif; }
}


/* @view-transition {
  navigation: auto;
} */


@layer base {

	* {
		box-sizing: border-box;
	}

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

	html {
		font-weight: 300;
	}

	h1, h2, h3, h4, h5, h6 {
		margin-block-end: 1rem;
	}
	h1 {
		font-size: 6em;
		letter-spacing: -1.5px;
		font-weight: 400;
	}
	h2 {
		font-size: 3em;
		letter-spacing: -0.5px;
		font-weight: 300;
	}
	h3 {
		font-size: 2em;
		letter-spacing: 0.25px;
		font-weight: 400;
	}
	li {
		padding: .2em;
	}

	p {
		text-wrap: pretty;
	}
	
	a {
		color: var(--color-425);
		text-decoration: none;
		font-weight: normal;
	}

	b, strong {
		font-weight: 700;
	}

	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;
		& p {
			margin: 0;
		}
	}

	input, select {
		padding: 5px;
		font-size: 1em;
	}
	textarea {
		font: inherit;
		padding: .5em;
	}	
	fieldset {
		border: 0;
		padding: 0;
		line-height: 2em;
		& > label.left {
			display: inline-block;
			width: 150px;
		}
	}

}
			
			
	/* CK-Editor */	
	.cke_top  {
		z-index: 100;
	}
	.cke_wysiwyg_div {
		padding: 8px !important;
	}
	
	

	
	/* Upload START */
	.upload-button {
		position: relative;
		border-radius: 3px;
		background: #eee;
		border: 1px solid #888;
		padding: .2em .4em;
	}
	.upload-button:hover {
		background: #ddd;
	}
	.upload-button input {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		height: 30px;
		opacity: 0;
	}
	/* Upload END */
			

			
	/* Layout START */
	#pagewrapper {
		/* display: grid; */
		/* grid-template-rows: 100px 400px auto; */
		display: flex;
		flex-direction: column;
		min-height: 100%;
	}

	header {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: space-between;
		width: 100%;
		max-width: 1200px;
		margin: 0 auto;
		font-size: 62px;
		color: #313131;
		& #logo {
			height: 300px;
			position: relative;
			z-index: 100;
			margin-left: 35px;
			margin-bottom: -215px;
		}
		& .menubutton {
			display: none;
		}
		& nav.topmenu {
			margin-right: 35px;
			& a {
				font-size: 20px;
				font-weight: normal;
				color: var(--color-425);
				text-decoration: none;
				display: inline-block;
				margin: 0 0 .8vw .8vw;
				padding: .2vw .2vw;
				&:hover {
					color: #888;
				}
			}
		}
	}

	#headerimg {
		background-size: cover;
		background-position: center 52%;
		height: 400px;
	}

	#container {
		width: 100%;
		max-width: 1200px;
		margin: 0 auto;
		display: grid;
		grid-template-columns: auto 24%;
		padding: 35px 0;
		&.noheader {
			border-top: 2px solid #eee;
			grid-row-start: span 2;
		}
	}
	/* Layout END */
	
	
			/* Startboxes / Kitaboxes */
			#startboxes, .kitaboxes {
				display: grid;
				grid-template-columns: 1fr 1fr 1fr;
				grid-gap: 2em;
				margin-bottom: 3em;
			}
			#startboxes a, .kitaboxes a {
				box-shadow: 2px 2px 8px rgba(0,0,0,.3);
				height: 15em;
				display: flex;
				flex-direction: column;
			}
			.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;
			}

			/* Content */
			#content {
				padding: 35px;
				& :first-child {
					margin-top: 0;
				}
			}
			
			#content img {
				max-width: 100%;
				height: auto !important;
				&.left {
					float: left;
					max-width: 33%;
					margin: .25rem 1.2rem .5rem 0;
					height: auto !important;
					box-shadow: 2px 2px 8px rgba(0, 0, 0, .2);
				}
				&.right {
					float: right;
					max-width: 40%;
					margin: 1rem 0 1rem 1rem;
					height: auto !important;
					box-shadow: 2px 2px 8px rgba(0,0,0,.3);
				}
				&.center {
					clear: both;
					max-width: 100%;
					margin: 5px auto;
					height: auto !important;
				}
				&.left:after, &.right:after {
					clear: both;
				}
			}


			#content span.redtext {
				color: #fff;
				background-color: red;
				display: inline-block;
				padding-inline: .2em;
				border-radius: 4px;
			}
			#content span.bluetext {
				color: #fff;
				background-color: var(--color-425);
				display: inline-block;
				padding-inline: .2em;
				border-radius: 4px;
			}
			
			#content table {
				width: 100%;
				padding: 0;
				margin: 1em 0;				
				box-shadow: 2px 2px 8px rgba(0,0,0,.3);
				border-collapse: collapse;
				& th, & td {
					border: 1px solid #eee;
				}
				& th {
					background-color: #eee;
				}
				& td {
					vertical-align: top;
					padding: .5em;
					& :first-child {
						margin-top: 0;
					}
					& :last-child {
						margin-bottom: 0;
					}
				}
				&.invisible {
					box-shadow: unset;
					& th, & td {
						border: unset;
						background-color: unset;
						padding: .5em 0;
						.cke_wysiwyg_div & {
							border: 1px dashed #eee;
						}
					}
				}
			}

			#content figure.table {
				margin: 0;
				& td {
					padding: 10px;
					vertical-align: top;
				}
			}
			#content .banner {
				box-shadow: 2px 2px 8px rgba(0,0,0,.3);
				height: 300px;
				max-height: 33vw;
				background-size: cover;
				background-position: center;
				margin: 2em 0;
			}

			#content .newspost {
				box-shadow: 2px 2px 8px rgba(0,0,0,.3);
				margin-bottom: 2.5em;
				& > h3 {
					background-color: #eeeeee;
					margin: 0;
					padding: 1em;
					position: relative;
				}
				& > div {
					padding: 1em;
				}
				& .newsdatum {
					position: absolute;
					bottom: 0;
					right: 0;
					font-weight: normal;
					font-size: 10px;
					color: #888;
				}
			}
			
			#content .stellenanzeigen_wrapper {
				display: grid;
				grid-template-columns: 1fr 1fr 1fr;
				grid-gap: 35px;
				margin-bottom: 35px;
				justify-content: space-between;
			}
			#content .stellenanzeige {
				box-shadow: 2px 2px 8px rgba(0,0,0,.3);
				color: #000;
				display: flex;
				flex-direction: column;
				height: 100%;
				& .stellenanzeigestelle {
					padding: 10px;
					font-weight: bold;
					font-size: .9em;
				}
				& .stellenanzeigeeinrichtung {
					padding: 10px;
					background-color: #eee;
					flex-grow: 1;
				}
				& .stellenanzeigeeinrichtungname {
					color: var(--color-425);
				}
			}


			#content .events {
				display: grid;
				grid-template-columns: 1fr;
				grid-gap: 2rem;
				justify-content: space-between;
				margin-bottom: 2rem;
				& h3 {
					margin: 0;
				}
				& .event {
					box-shadow: 2px 2px 8px rgba(0,0,0,.2);
					display: grid;
					grid-template-columns: max-content auto;
					position: relative;
					& label {
						grid-column: 1 / -1;
						display: grid;
						grid-template-columns: subgrid;
						align-items: center;
						cursor: pointer;
						& > .eventheader {
							display: flex;
							align-items: center;
							& > div {
								padding: 1rem;
							}
							& .uhrzeit {
								min-width: max-content;
							}
							& .titel {
								font-weight: bold;
								font-size: 1.2rem;
							}
						}
						.nichtoeffentlich & {
							filter: opacity(.5);
						}
					}
					& .datum {
						background-color: #eeeeee;
						padding: 1rem;
						height: 100%;
						display: flex;
						flex-direction: column;
						justify-content: center;
						& > div {
							text-align: center;
						}
						& .datum-tag {
							font-size: 1.5rem;
							font-weight: bold;
						}
					}
					& .edit {
						position: absolute;
						top: 2px;
						right: 2px;
						text-align: right;
						font-size: 0;
						& a {
							padding: 4px;
							display: inline-block;
							border-radius: 4px;
							&:hover {
								background-color: #eee;
							}
						}
					}
					& input {
						display: none;
					}
					& input:checked + .details-wrapper {
						grid-template-rows: 1fr;
					}
					& .details-wrapper {
						grid-column: 1 / -1;
						display: grid;
						grid-template-columns: subgrid;
						grid-template-rows: 0fr;
						padding: 0;
						transition: all .4s ease;
						& > div {
							grid-column: 1 / -1;
							display: grid;
							grid-template-columns: subgrid;
							overflow: hidden;
							grid-row: 1 / span 2;
							& > .details {
								border-top: 1px solid #0001;
								padding: 1rem;
								& :first-child {
									margin-top: 0;
								}
								& :last-child {
									margin-bottom: 0;
								}
							}
						}
					}
				}	
			}
			

			#content .ansprechpartner {
				display: grid;
				grid-template-columns: 1fr 1fr;
				grid-gap: 35px;
				justify-content: space-between;
				margin-bottom: 2em;
				& > div {
					box-shadow: 2px 2px 8px rgba(0,0,0,.2);
					padding: 35px;
				}
				& div.bild {
					height: 420px;
					background-size: cover;
					background-repeat: no-repeat;
					background-position: center;
					margin: -35px -35px 35px -35px;
				}
				& p {
					margin: 0;
					padding: 0;
					&.name {
						font-weight: bold;
						font-size: 120%;
					}
					&.funktion {
						font-weight: bold;
						font-size: 90%;
						color: var(--color-425);
						margin-bottom: 1em;
						text-align: left;
					}
					&.telefon {
						font-size: 120%;
						font-weight: bold;
						color: var(--color-425);
						margin-bottom: 1em;
						text-align: left;
						&::before {
							content: 'Tel. ';
						}
					}
				}
				&.c2modul {
					& div {
						padding: 0;
					}
					& > div {
						display: flex;
						flex-direction: column;
						position: relative;
					}
					& .del, & .edit {
						position: absolute;
						right: 0;
						padding: .4em;
						border: 0;
					}
					& .edit {
						right: 25px;
					}
					& .nampos {
						padding: 10px;
					}
					& .name {
						font-weight: bold;
						font-size: 120%;
					}
					& .position {
						font-weight: bold;
						font-size: 90%;
						color: var(--color-425);
					}
					& .data {
						padding: 10px;
						background-color: #eee;
						flex-grow: 1;
						& div {
							text-overflow: ellipsis;
							overflow: hidden;
						}
					}
					& .tel::before {
						content: 'Tel.: ';
					}
					& .mobil::before {
						content: 'Mobil: ';
					}
					& .fax::before {
						content: 'Fax: ';
					}
				}
			}
			
			
			#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: 5px;
				}
				& input {
					padding: 5px;
					width: 40%;
					font-size: 1em;
					margin-bottom: 5px;					
					&[type=checkbox] {
						width: auto;
						transform: scale(1.5);
						margin-right: 1em;
					}
					&[type=submit] {
						margin-left: 19%;
						width: auto;
					}
					&#txtCode {
						width: 8em;
						margin-right: .5em;
					}
					&:user-invalid {
						border-color: red;
						border-style: solid;
					}
				}
				& img {
					margin: 1%;
					margin-left: 19%;
				}
			} 

			
			#content #standortbild {
				width: 100%;
				margin-bottom: 2em;
				box-shadow: 2px 2px 8px rgba(0,0,0,.3);
				height: 400px;
				background-position: center;
				background-size: cover;
			}
			#content form#standortaddfile input {
				width: 650px;
			}
			#content form#standortaddfile input[type=submit],
			#content form#standortaddfile input[type=button] {
				width: auto;
			}
			
			/* Sidebar */
			#sidebar {
				padding: 35px;
				font-size: .75rem;
    			border-left: 2px solid #eee;
				& a.backbutton {
					display: block;
					text-decoration: none;
					padding: 5px;
					border-bottom: 1px solid #eee;
					margin-bottom: 1em;
					&:hover {
						background-color: #eee;
					}
				}
				& img {
					max-width: 100%;
					&.standortbild {
						box-shadow: 2px 2px 8px rgba(0,0,0,.3);
					}
				}
				& :first-child {
					margin-top: 0;
				}
			}

			#sidebar .sidebarmenu {
				& a {
					display: block;
					text-decoration: none;
					padding: 5px;
					border-bottom: 1px solid #eee;
					&:last-child {
						border: none;
					}
					&:hover,
					&.active {
						background-color: #eee;
					}
				}
			}
			
			#sidebar #mapcontainer #map {
				height: 150px;
			}
			
			#sidebar .stellenanzeige, #sidebar .veranstaltungen {
				box-shadow: 2px 2px 8px rgba(0,0,0,.3);
    			margin-bottom: 20px;
			}

			#sidebar a.veranstaltungen {
				display: block;
				color: inherit;
				& .veranstaltung {
					display: grid;
					grid-template-columns: 4.5em auto;
					& .veranstaltungdatum {
						background-color: #eee;
						font-weight: bold;
						padding: 10px;
					}
					& .veranstaltungname {
						padding: 10px;
					}
					& .veranstaltungsort {
						color: var(--color-425);
					}
				}
			}

			#sidebar .sprechzeiten {
				box-shadow: 2px 2px 8px rgba(0,0,0,.3);
				display: grid;
				grid-template-columns: 4.4em auto;
				position: relative;
				margin-bottom: 2em;
				& .delete {
					position: absolute;
					top: 0;
					right: 0;
					padding: .5em;
				}
				& .edit {
					position: absolute;
					top: 0;
					right: 30px;
					padding: .5em;
				}
				& .tag {
					background-color: #eeeeee;
					font-weight: bold;
					padding: 10px;
				}
				& .zeiten {
					padding: 10px;
				}
			}
			
			#sidebar .downloads {
				/* box-shadow: 2px 2px 8px rgba(0,0,0,.3); */
				margin-bottom: 20px;
				& a {
					display: block;
					padding: .5em 0;
					border-bottom: 1px dashed rgba(0,0,0,.3);
					&:last-child {
						border: none;
					}
					&:hover {
						background-color: #eee;
					}
					&.add {
						text-align: right;
					}
				}
			}
			
			

			/* Footer */
			footer {
				background-color: #000b40;
				color: #889;
				font-weight: normal;
				margin-top: auto;
			}

			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 #668;
			}
			footer #footercontent>div:last-child {
				border: none;
			}
			footer #footermenu a {
				display: block;
				color: #889;
				border-bottom: 1px solid #668;
				text-decoration: none;
				padding: 5px;
			}
			footer #footermenu a:last-child {
				border: none;
			}
			footer #footermenu a:hover {
				background-color: #225;
			}
			
			/* Contentbilder-Grid */
			#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;
			}

			/* Cookiebanner */
			@keyframes slideIn {
				from { transform: translate(0px, -500px); }
			}
			#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: 9999;
			}

			/* ############################################### */
			/* ################ Mobile Ansicht ############### */
			/* ############################################### */
			@media (max-width: 1000px) { 
				html {
					font-size: 4vw;
				}
				header {
					display: block;
					font-size: 5vw;
					& #logo {
						height: 45vw;
						margin-bottom: -25vw;
						margin-left: 5vw;
					}
				}

				label.menubutton {
					display: block;
					width: 16vw;
					height: 14vw;
					position: absolute;
					top: 5vw;
					right: 5vw;
					border-radius: 2vw;
					& .line { 
						position: absolute;
						left: unset;
						right: 0;
						height: 1vw;
						width: 9vw;
						background: #888;
						border-radius: 1vw;
						display: block;
						transition: 0.5s;
						transform-origin: center;
						&:nth-child(1) { top: 3vw; }
						&:nth-child(2) { top: 6vw; }
						&:nth-child(3) { top: 9vw; }
					}
				}
				#menubutton:checked + label.menubutton .line {
					&:nth-child(1){
						transform: translateY(3vw) rotate(135deg);
					}
					&:nth-child(2){
						opacity:0;
					}
					&:nth-child(3){
						transform: translateY(-3vw) rotate(45deg);
					}
				}

				header nav.topmenu {
				    overflow: hidden; 
				    padding: 0;
					margin-right: 5vw;
				    transition: all 0.4s;
					display: grid;
					grid-template-rows: 0fr;
					& a {
						display: block;
						padding: 1vw;
						text-align: right;
						font-size: 5vw;
					}
					& div {
						overflow: hidden;
						grid-row: 1 / span 2;
					}
					#menubutton:checked + .menubutton + & { 
						grid-template-rows: 1fr;
						margin-bottom: 4vw;
					}
				}

				#headerimg {
					height: 45vw;
				}
				#pagewrapper {
					display: flex;
					flex-direction: column;
				}
				#container {
					padding: 5vw 0;
					display: block;
					flex-grow: 1;
				}

				#startboxes {
					grid-template-columns: 1fr 1fr;
					grid-gap: 6vw;
					& > a {
					    height: 40vw;
						& > div:last-child {
							padding: 3vw;
							font-size: .9em;
						}
					}
				}

				#content, #sidebar {
					padding: 0 5vw;
				}

				#content h1 {
					font-size: 3.5em;
				}
				#content h2 {
					font-size: 2.5em;
				}
				#content h3 {
					font-size: 1.5em;
				}
				#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: 2px 2px 8px rgba(0,0,0,.3);
				}

				#content .events {
					grid-row-gap: 1.5rem;
					& .event {
						grid-template-columns: max-content auto 1fr;
						& label .datum::after {
							content: attr(data-uhrzeit);
							display: block;
							text-align: center;
							font-size: .75em;
							font-weight: bold;
							margin-top: .25em;
						}
						& label .uhrzeit {
							display: none;
						}
						& .details-wrapper .datum {
							display: none;
						}
						& .details-wrapper .details {
							grid-column: 1 / -1;
						}
					}
				}

				#content #contactform {
					& label {
						display: block;
					}
					& input {
						width: 100%;
						&[type=submit] {
							margin-left: 0;
							margin-bottom: 2em;
						}
					}
					& textarea {
						font-size: 1em;
						padding: .2em;
						width: 100%;
						height: 8em;
					}
					& img {
						margin: 0;
						width: 50%;
					}
				}
				
				#sidebar {
					margin-top: 2em;
					font-size: .8rem;
					& #mapcontainer #map {
						height: 40vw;
					}
				}

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

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