body,form,figure{margin:0;padding:0}img{border:0}header,footer,nav,section,aside,article,figure,figcaption{display:block}body{font-size:100.01%}select,input,textarea{font-size:99%}#container,.inside{position:relative}#main,#left,#right{float:left;position:relative}#main{width:100%}#left{margin-left:-100%}#right{margin-right:-100%}#footer{clear:both}#main .inside{min-height:1px}.ce_gallery>ul,.content-gallery>ul{margin:0;padding:0;overflow:hidden;list-style:none}.ce_gallery>ul li,.content-gallery>ul li{float:left}.ce_gallery>ul li.col_first,.content-gallery>ul li.col_first{clear:left}.float_left,.media--left>figure{float:left}.float_right,.media--right>figure{float:right}.block{overflow:hidden}.media{display:flow-root}.clear,#clear{height:.1px;font-size:.1px;line-height:.1px;clear:both}.invisible{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.custom{display:block}#container:after,.custom:after{content:"";display:table;clear:both}
@media (max-width:767px){#wrapper{margin:0;width:auto}#container{padding-left:0;padding-right:0}#main,#left,#right{float:none;width:auto}#left{right:0;margin-left:0}#right{margin-right:0}}img{max-width:100%;height:auto}.audio_container audio{max-width:100%}.video_container video{max-width:100%;height:auto}.aspect,.responsive{position:relative;height:0}.aspect iframe,.responsive iframe{position:absolute;top:0;left:0;width:100%;height:100%}.aspect--16\:9,.responsive.ratio-169{padding-bottom:56.25%}.aspect--16\:10,.responsive.ratio-1610{padding-bottom:62.5%}.aspect--21\:9,.responsive.ratio-219{padding-bottom:42.8571%}.aspect--4\:3,.responsive.ratio-43{padding-bottom:75%}.aspect--3\:2,.responsive.ratio-32{padding-bottom:66.6666%}
header,footer,nav,section,aside,main,article,figure,figcaption{display:block}body,div,h1,h2,h3,h4,h5,h6,p,blockquote,pre,code,ol,ul,li,dl,dt,dd,figure,table,th,td,form,fieldset,legend,input,textarea{margin:0;padding:0}table{border-spacing:0;border-collapse:collapse}caption,th,td{text-align:left;text-align:start;vertical-align:top}abbr,acronym{font-variant:normal;border-bottom:1px dotted #666;cursor:help}blockquote,q{quotes:none}fieldset,img,iframe{border:0}ul{list-style-type:none}sup{vertical-align:text-top}sub{vertical-align:text-bottom}del{text-decoration:line-through}ins{text-decoration:none}body{font:12px/1 "Lucida Grande","Lucida Sans Unicode",Verdana,sans-serif;color:#000}input,button,textarea,select{font-family:inherit;font-size:99%;font-weight:inherit}pre,code{font-family:Monaco,monospace}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:400}h1{font-size:1.8333em}h2{font-size:1.6667em}h3{font-size:1.5em}h4{font-size:1.3333em}table{font-size:inherit}caption,th{font-weight:700}a{color:#00f}h1,h2,h3,h4,h5,h6{margin-top:1em}h1,h2,h3,h4,h5,h6,p,pre,blockquote,table,ol,ul,form{margin-bottom:12px}
.mod_visitors .invisible {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    float: left;
	width:0px;
	height:0px;
}
.content-slider{overflow:hidden;visibility:hidden;position:relative}.slider-wrapper{overflow:hidden;position:relative}.slider-wrapper>*{float:left;width:100%;position:relative}.slider-control{height:30px;position:relative}.slider-control a,.slider-control .slider-menu{position:absolute;top:9px;display:inline-block}.slider-control .slider-prev{left:0}.slider-control .slider-next{right:0}.slider-control .slider-menu{top:0;width:50%;left:50%;margin-left:-25%;font-size:27px;text-align:center}.slider-control .slider-menu b{color:#bbb;cursor:pointer}.slider-control .slider-menu b.active{color:#666}

/* Schriftart für Stadt Laufen Schriftzug */
@font-face {
	font-family: 'WebVijaya';
	font-style: normal;
	font-weight: 400;
	src: url('https://dev.stadtlaufen.de/files/themes/fonts/vijaya/vijaya.eot');
	src: url('https://dev.stadtlaufen.de/files/themes/fonts/vijaya/vijaya.eot?#iefix') format('embedded-opentype'),
	url('https://dev.stadtlaufen.de/files/themes/fonts/vijaya/vijaya.woff2') format('woff2'),
	url('https://dev.stadtlaufen.de/files/themes/fonts/vijaya/vijaya.woff') format('woff'),
	url('https://dev.stadtlaufen.de/files/themes/fonts/vijaya/vijaya.ttf') format('truetype');
}

/* Schriftart Regular */
@font-face {
	font-family: 'WebFiraSans';
	font-style: normal;
	font-weight: 400;
	src: url('https://dev.stadtlaufen.de/files/themes/fonts/firasans/firasans-regular.eot');
	src: url('https://dev.stadtlaufen.de/files/themes/fonts/firasans/firasans-regular.eot?#iefix') format('embedded-opentype'),
	url('https://dev.stadtlaufen.de/files/themes/fonts/firasans/firasans-regular.woff2') format('woff2'),
	url('https://dev.stadtlaufen.de/files/themes/fonts/firasans/firasans-regular.woff') format('woff'),
	url('https://dev.stadtlaufen.de/files/themes/fonts/firasans/firasans-regular.ttf') format('truetype');
}

/* Schriftart Italic */
@font-face {
	font-family: 'WebFiraSans';
	font-style: italic;
	font-weight: 400;
	src: url('https://dev.stadtlaufen.de/files/themes/fonts/firasans/firasans-italic.eot');
	src: url('https://dev.stadtlaufen.de/files/themes/fonts/firasans/firasans-italic.eot?#iefix') format('embedded-opentype'),
	url('https://dev.stadtlaufen.de/files/themes/fonts/firasans/firasans-italic.woff2') format('woff2'),
	url('https://dev.stadtlaufen.de/files/themes/fonts/firasans/firasans-italic.woff') format('woff'),
	url('https://dev.stadtlaufen.de/files/themes/fonts/firasans/firasans-italic.ttf') format('truetype');
}

/* Schriftart Bold */
@font-face {
	font-family: 'WebFiraSans';
	font-style: normal;
	font-weight: 700;
	src: url('https://dev.stadtlaufen.de/files/themes/fonts/firasans/firasans-bold.eot');
	src: url('https://dev.stadtlaufen.de/files/themes/fonts/firasans/firasans-bold.eot?#iefix') format('embedded-opentype'),
	url('https://dev.stadtlaufen.de/files/themes/fonts/firasans/firasans-bold.woff2') format('woff2'),
	url('https://dev.stadtlaufen.de/files/themes/fonts/firasans/firasans-bold.woff') format('woff'),
	url('https://dev.stadtlaufen.de/files/themes/fonts/firasans/firasans-bold.ttf') format('truetype');
}

/* Schriftart Bold Italic */
@font-face {
	font-family: 'WebFiraSans';
	font-style: italic;
	font-weight: 700;
	src: url('https://dev.stadtlaufen.de/files/themes/fonts/firasans/firasans-bold-italic.eot');
	src: url('https://dev.stadtlaufen.de/files/themes/fonts/firasans/firasans-bold-italic.eot?#iefix') format('embedded-opentype'),
	url('https://dev.stadtlaufen.de/files/themes/fonts/firasans/firasans-bold-italic.woff2') format('woff2'),
	url('https://dev.stadtlaufen.de/files/themes/fonts/firasans/firasans-bold-italic.woff') format('woff'),
	url('https://dev.stadtlaufen.de/files/themes/fonts/firasans/firasans-bold-italic.ttf') format('truetype');
}


/* Schriftart Symbole Awesome */
@font-face {
	font-family: 'AwesomeWeb';
	font-style: normal;
	font-weight: 900;
	src: url('https://dev.stadtlaufen.de/files/themes/fonts/awesome/fa-solid-900.eot');
	src: url('https://dev.stadtlaufen.de/files/themes/fonts/awesome/fa-solid-900.eot?#iefix') format('embedded-opentype'),
	url('https://dev.stadtlaufen.de/files/themes/fonts/awesome/fa-solid-900.woff2') format('woff2'),
	url('https://dev.stadtlaufen.de/files/themes/fonts/awesome/fa-solid-900.woff') format('woff'),
	url('https://dev.stadtlaufen.de/files/themes/fonts/awesome/fa-solid-900.ttf') format('truetype');
}

/* Schriftart Symbole Awesome */
@font-face {
	font-family: 'AwesomeWeb';
	font-style: normal;
	font-weight: 400;
	src: url('https://dev.stadtlaufen.de/files/themes/fonts/awesome/fa-regular-400.eot');
	src: url('https://dev.stadtlaufen.de/files/themes/fonts/awesome/fa-regular-400?#iefix') format('embedded-opentype'),
	url('https://dev.stadtlaufen.de/files/themes/fonts/awesome/fa-regular-400.woff2') format('woff2'),
	url('https://dev.stadtlaufen.de/files/themes/fonts/awesome/fa-regular-400.woff') format('woff'),
	url('https://dev.stadtlaufen.de/files/themes/fonts/awesome/fa-regular-400.ttf') format('truetype');
}

/* Schriftart Symbole Awesome */
@font-face {
	font-family: 'AwbrandWeb';
	font-style: normal;
	font-weight: 400;
	src: url('https://dev.stadtlaufen.de/files/themes/fonts/awesome/fa-brands-400.eot');
	src: url('https://dev.stadtlaufen.de/files/themes/fonts/awesome/fa-brands-400?#iefix') format('embedded-opentype'),
	url('https://dev.stadtlaufen.de/files/themes/fonts/awesome/fa-brands-400.woff2') format('woff2'),
	url('https://dev.stadtlaufen.de/files/themes/fonts/awesome/fa-brands-400.woff') format('woff'),
	url('https://dev.stadtlaufen.de/files/themes/fonts/awesome/fa-brands-400.ttf') format('truetype');
}

@media print {

	/* Allgemeine Grundeinstellungen */
	html {
		overflow-y: scroll;
		overflow-x: auto;
	}
	
	/* Allgemeine Seitenformatierungen */
	body {
		margin-right :auto;
		margin-left :auto;
		padding: 0;
		vertical-align: top;
		text-align: left;
		font: 1rem WebFiraSans,Verdana,Arial,Helvetica,sans-serif;
	}
	
	#header,
	#footer,
	.startbanner,
	.navi_top {
		display: none;
	}

}


@media screen {

	/* Unsichtbare Links zum Überspringen der Navigation werden formatiert */
	.mod_navigation .invisible {
		color: var(--sl-fontcol);
		background-color: var(--sl-backcol);
	}
	
	/* Beschriftungen von Buttons werden ausgeblendet */
	.navi_start,
	.navi_suche,
	.share_cont,
	.navi_top {
		display: block;
		width: 0;
		height: 0;
		overflow: hidden;
		color: var(--sl-backcol);
		background-color: var(--sl-fontcol);
	}

	/* Der nach-oben-Button wird platziert und formatiert */
	.navi_top::before {
		content: '\f0d8';
		font-family: AwesomeWeb;
		font-weight: bold;
		font-size: calc(.9rem + .4vw);
		line-height: calc(1rem + 1vw);
		position: fixed;
		z-index: 11890;
		padding: calc(.5rem + .5vw);
		background-color: var(--sl-highcol);
		border-radius: var(--sl-rounded);
		border: 1px solid var(--sl-backcol);
		right: var(--sl-leerbox);
		width: calc(2rem + 2vw);
		height: calc(2rem + 2vw);
		box-sizing: border-box;
		text-align: center;
		vertical-align: middle;
		opacity: 1;
		overflow: hidden;
		transition: opacity var(--sl-speeder) ease;
	}

	/* Der nach-oben-Button wird ausgeblendet */
	.navi_top.hide-scroll::before {
		padding: 0;
		width: 0;
		opacity: 0;
		transition: opacity var(--sl-speeder) ease, width 0s ease var(--sl-speeder), padding 0s ease var(--sl-speeder);
	}

	/* Der Home-Button wird platziert und formatiert */
	.navi_start::before {
		content: '\f015';
		font-family: AwesomeWeb;
		font-weight: bold;
		font-size: calc(.9rem + .4vw);
		line-height: calc(1rem + 1vw);
		position: fixed;
		z-index: 11880;
		padding: calc(.5rem + .5vw);
		background-color: var(--sl-highcol);
		border-radius: var(--sl-rounded);
		border: 1px solid var(--sl-backcol);
		width: calc(2rem + 2vw);
		height: calc(2rem + 2vw);
		box-sizing: border-box;
		text-align: center;
		vertical-align: middle;
	}

	/* Der Suchen-Button wird platziert und formatiert */
	.navi_suche::before {
		content: '\f002';
		font-family: AwesomeWeb;
		font-weight: bold;
		font-size: calc(.9rem + .4vw);
		line-height: calc(1rem + 1vw);
		position: fixed;
		right: var(--sl-leerbox);
		z-index: 11850;
		padding: calc(.5rem + .5vw);
		background-color: var(--sl-highcol);
		border-radius: var(--sl-rounded);
		border: 1px solid var(--sl-backcol);
		width: calc(2rem + 2vw);
		height: calc(2rem + 2vw);
		box-sizing: border-box;
		text-align: center;
		vertical-align: middle;
	}

	/* Das Suchformular wird platziert und ausgeblendet */
	.navi_suche form {
		position: fixed;
		height: calc(2rem + 2vw);
		z-index: 11840;
		color: var(--sl-backcol);
		background-color: var(--sl-highcol);
		background-color: var(--sl-hightrs);
		border-radius: var(--sl-rounded);
		border: 1px solid var(--sl-backcol);
		box-sizing: border-box;
		overflow: hidden;
		text-align: left;
		opacity: 0;
		width: 0;
		padding: 0;
		white-space: nowrap;
		transition: width var(--sl-speeder) ease, opacity var(--sl-speeder) ease;
	}

	/* Das Suchformular wird dargestellt, wenn es den Fokus erhält */
	.navi_suche:hover form, .navi_suche:focus form, .navi_suche:active form, .navi_suche:focus-within form {
		width: calc(12rem + 12vw);
		opacity: 1;
		transition: width var(--sl-speeder) ease, opacity var(--sl-speeder) ease;
	}

	/* Das Suchformular wird formatiert */
	.navi_suche form .formbody {
		display: flex;
		font-size: 0;
		height: calc(2rem + 2vw);
		align-items: center;
    }

	/* Die Widgets im Suchformular werden platziert */
	.navi_suche .widget {
		display: inline-block;
	}

	/* Die Texteingabe im Suchformular wird formatiert */
	.navi_suche .widget-text .text {
		font-size: var(--sl-fontdef);
		border: 1px solid var(--sl-highcol);
		border-radius: 0;
		color: var(--sl-highcol);
		background-color: var(--sl-backcol);
		margin-left: calc(.9rem + .4vw);
		padding: calc(.15rem + .15vw) calc(.25rem + .25vw);
		outline: none;
		vertical-align: middle;
		width: calc(7.75rem + 7.75vw);
	}

	/* Die Texteingabe wird beim fokussieren anders formatiert */
	.navi_suche .widget-text .text:hover, .navi_suche .widget-text .text:focus, .navi_suche .widget-text .text:active {
		background-color: var(--sl-overlit);
	}

	/* Der Absenden-Button im Suchformular wird platziert */
	.navi_suche .widget-submit .submit {
		font-size: calc(.9rem + .4vw);
		border: 0;
		background-color: transparent;
		color: transparent;
		vertical-align: middle;
		overflow: hidden;
		outline: none;
		padding: 0;
		margin-left: calc(.5rem + .5vw);
	}

	/* Ein Symbol für den Absenden-Button wird eingefügt */
	.navi_suche .widget-submit .submit::before {
		content: '\f04b';
		color: var(--sl-backcol);
		font-family: AwesomeWeb;
		font-weight: bold;
		background-color: transparent;
		text-align: left;
	}

	/* Der Button für das Teilen-Menü wird platziert und formatiert */
	.share_label::before {
		content: '\f1e0';
		font-family: AwesomeWeb;
		font-weight: bold;
		font-size: calc(.9rem + .4vw);
		line-height: calc(1rem + 1vw);
		position: fixed;
		z-index: 11750;
		padding: calc(.5rem + .5vw);
		background-color: var(--sl-highcol);
		border-radius: var(--sl-rounded);
		border: 1px solid var(--sl-backcol);
		width: calc(2rem + 2vw);
		height: calc(2rem + 2vw);
		box-sizing: border-box;
		text-align: center;
		vertical-align: middle;
	}

	/* Die Beschriftung des Teilen-Buttons wird ausgeblendet */
	.share_button {
		display: block;
		width: 0;
		height: 0;
		overflow: hidden;
	}

	/* Das Teilen-Menü wird formatiert */
	.share_main {
		display: grid;
		grid-gap: 0;
		grid-auto-flow: column;
		grid-template-columns: calc(2rem + 2vw) calc(2rem + 2vw) calc(2rem + 2vw) calc(2rem + 2vw) calc(2rem + 2vw) 0;
		position: fixed;
		height: calc(2rem + 2vw);
		width: 0;
		z-index: 11740;
		color: var(--sl-backcol);
		background-color: var(--sl-highcol);
		background-color: var(--sl-hightrs);
		border-radius: var(--sl-rounded);
		border: 1px solid var(--sl-backcol);
		box-sizing: border-box;
		overflow: hidden;
		text-align: left;
		opacity: 0;
		padding: 0;
		white-space: nowrap;
		transition: width var(--sl-speeder) ease, opacity var(--sl-speeder) ease;
	}

	/* Die einzelnen Buttons des Teilen-Menüs werden formatiert und platziert */
	.share_print, .share_email, .share_whatsapp, .share_facebook, .share_twitter {
		display: grid;
		grid-template-columns: calc(2rem + 2vw) 0;
		grid-template-rows: calc(2rem + 2vw) 0;
		grid-gap: 0;
		align-items: center;
		justify-items: center;
   		font-size: calc(.9rem + .4vw);
		border: 0;
		background-color: transparent;
		color: transparent;
		vertical-align: middle;
		overflow: hidden;
		outline: none;
		padding: 0;
		margin: 0;
		width: calc(2rem + 2vw);
		height: calc(2rem + 2vw);
	}

	/* Abstand des ersten Symbols nach links einhalten */
	.share_print {
		margin-left: calc(.25rem + .25vw);
	}

	/* Der Drucken-Button erhält ein Symbol */
	.share_print::before {
		content: '\f02f';
		color: var(--sl-backcol);
		font-family: AwesomeWeb;
		font-weight: bold;
		font-size: calc(.9rem + .4vw);
		line-height: calc(1rem + 1vw);
		background-color: transparent;
	}

	/* Der E-Mail-Button erhält ein Symbol */
	.share_email::before {
		content: '\0040';
		color: var(--sl-backcol);
		font-family: AwesomeWeb;
		font-weight: bold;
		font-size: calc(.9rem + .4vw);
		line-height: calc(1rem + 1vw);
		background-color: transparent;
	}

	/* Der Whatsapp-Button erhält ein Symbol */
	.share_whatsapp::before {
		content: '\f232';
		color: var(--sl-backcol);
		font-family: AwbrandWeb;
		font-weight: normal;
		font-size: calc(.9rem + .4vw);
		line-height: calc(1rem + 1vw);
		background-color: transparent;
	}

	/* Der Facebook-Button erhält ein Symbol */
	.share_facebook::before {
		content: '\f09a';
		color: var(--sl-backcol);
		font-family: AwbrandWeb;
		font-weight: normal;
		font-size: calc(.9rem + .4vw);
		line-height: calc(1rem + 1vw);
		background-color: transparent;
	}

	/* Der Twitter-Button erhält ein Symbol */
	.share_twitter::before {
		content: '\e61b';
		color: var(--sl-backcol);
		font-family: AwbrandWeb;
		font-weight: normal;
		font-size: calc(.9rem + .4vw);
		line-height: calc(1rem + 1vw);
		background-color: transparent;
	}

	/* Die Checkboxen für Navigation und Teilen-Menü werden verborgen */
	.navi_select, .share_select {
		position: absolute;
		display: none;
		width: 0;
		height: 0;
		top: 0;
		left: 0;
	}
	
	/* Die Farbe für die Navigationsbutton und Teilen-Button wird gesetzt */
	.navi_label, .share_label {
		color: var(--sl-backcol);
	}
	
	/* Ein Symbol für den Navigationsbutton wird eingefügt */
	.navi_label::before {
		content: '\f0c9';
		font-family: AwesomeWeb;
		font-weight: bold;
		font-size: calc(.9rem + .4vw);
		line-height: calc(1rem + 1vw);
		position: fixed;
		z-index: 12000;
		padding: calc(.5rem + .5vw);
		background-color: var(--sl-highcol);
		border-radius: var(--sl-rounded);
		border: 1px solid var(--sl-backcol);
		width: calc(2rem + 2vw);
		height: calc(2rem + 2vw);
		box-sizing: border-box;
		text-align: center;
		vertical-align: middle;
	}

	/* Die Navigationsbeschriftung wird formatiert */
	.navi_button {
		position: fixed;
		height: calc(2rem + 2vw);
		z-index: 11995;
		font-size: calc(.9rem + .4vw);
		line-height: calc(1rem + 1vw);
		white-space: nowrap;
		background-color: var(--sl-highcol);
		background-color: var(--sl-hightrs);
		border-radius: var(--sl-rounded);
		border: 1px solid var(--sl-backcol);
		box-sizing: border-box;
		overflow: hidden;
		text-align: left;
		opacity: 1;
		width: calc(6rem + 4vw);
		padding: calc(.5rem + .5vw) calc(.9rem + .4vw);
		margin: 0;
		vertical-align: middle;
		display: flex;
		transition: width var(--sl-speeder) ease, opacity var(--sl-speeder) ease;
	}
	
	/* Ein Zusatz zur Navigationsbeschriftung wird eingefügt und verborgen */
	.navi_button::after {
		content: '\00a0- Navigation';
		width: 0;
		opacity: 0;
		overflow: hidden;
		display: inline-block;
		transition: width var(--sl-speeder) ease, opacity var(--sl-speeder) ease;
	}

	/* Ein Hintergrund-Objekt bei geöffneter Navigation wird eingefügt und verborgen */
	.navi_backer {
		position: fixed;
		top: 0;
		left: 0;
		width: 0;
		height: 0;
		margin: 0;
		box-sizing: border-box;
		background: rgba(0, 0, 0, 0);
		font-size: 0;
		z-index: 11900;
		transition: background var(--sl-speeder) ease, width 0s ease var(--sl-speeder), height 0s ease var(--sl-speeder);
	}

	/* Die Hauptnavigation wird formatiert */
	.navi_main {
		position: fixed;
		width: 0;
		z-index: 11950;
		opacity: 0;
		max-height: calc(100vh - 6rem - 3vh);
		overflow: visible;
		transition: width var(--sl-speeder) ease, opacity var(--sl-speeder) ease, padding 0s var(--sl-speeder);
		padding: 0;
		display: flex;
	}
	
	/* Die Checkboxen der ersten Navigationsebene werden ausgeblendet */
	.navi_main input[type=checkbox] {
		width: 0;
		height: 0;
		margin: 0;
		padding: 0;
	}
	
	/* Die oberste Ebene der Navigation wird formatiert */
	.navi_main .level_1 {
		background-color: var(--sl-highcol);
		color: var(--sl-backcol);
		border-radius: var(--sl-rounded);
		border: 0;
		overflow-y: auto;
		overflow-x: hidden;
		width: 100%;
		margin: 0;
		padding: calc(.25rem + .25vw) 0;
	}
	
	/* Unterdrückte Menüpunkte in der Navigation werden ausgeblendet */
	.navi_main .level_1 .navinot {
		display: none;
	}

	/* Die Container der Navigationspunkte auf der obersten Ebene werden formatiert */
	.navi_main .level_1 > li {
		display: flex;
	}

	/* Die Navigationspunkte auf der obersten Ebene werden formatiert */
	.navi_main .level_1 > li > a, .navi_main .level_1 > li > span, .navi_main .level_1 > li > strong, .navi_main .level_1 > li > label {
		padding: calc(.25rem + .25vw) calc(.9rem + .4vw);
		margin: 0;
		color: var(--sl-backcol);
		font-size: calc(.9rem + .4vw);
		text-decoration: none;
		text-align: left;
		white-space: nowrap;
		outline: none;
	}

	/* Aktive Einträge werden gesondert formatiert */
	.navi_main .level_1 > li > .active, .navi_main .level_1 > li > .trail,
	.navi_main .level_2 > li > .active, .navi_main .level_2 > li > .trail {
		color: var(--sl-overcol);
		font-weight: bold;
	}

	/* Den Navigationspunkten auf der obersten Ebene werden Symbole vorangestellt, wenn Unterpunkte vorhanden sind */
	.navi_main .level_1 > li.submenu > a::before,
	.navi_main .level_1 > li.submenu > span::before,
	.navi_main .level_1 > li.submenu > label::before {
		content: '\f0d9';
		font-family: AwesomeWeb;
		font-weight: bold;
		font-size: calc(.5rem + .5vw);
		display: inline-block;
		width: calc(.5rem + .5vw);
		padding-right: calc(.25rem + .25vw);
	}

	/* Die untergeordnete Menüebene wird formatiert und platziert */
	.navi_main .level_2 {
		position: absolute;
		right: 0;
		background-color: var(--sl-highcol);
		background-color: var(--sl-hightrs);
		border-radius: var(--sl-rounded);
		border: 0;
		overflow: hidden;
		width: 0;
		margin: 0;
		padding: calc(.25rem + .25vw) 0;
		text-align: right;
		opacity: 0;
		top: calc(1.5rem + 1.5vw);
		bottom: 0;
		z-index: -1;
		transition: right var(--sl-speeder) ease, opacity var(--sl-speeder) ease, width 0s var(--sl-speeder);
	}

	/* Die Container der Navigationspunkte auf der untergeordneten Ebene werden formatiert */
	.navi_main .level_2 > li {
		display: flex;
		text-align: right;
		justify-content: flex-end;
		margin-right: calc(.5rem + .5vw);
		overflow: hidden;
		transition: width var(--sl-speeder) ease, opacity var(--sl-speeder) ease;
	}

	/* Die Navigationspunkte auf der untergeordneten Ebene werden formatiert */
	.navi_main .level_2 > li > a, .navi_main .level_2 > li > span, .navi_main .level_2 > li > strong, .navi_main .level_2 > li > label {
		padding: calc(.25rem + .25vw) calc(.5rem + .5vw);
		margin: 0;
		color: var(--sl-backcol);
		font-size: calc(.8rem + .3vw);
		text-decoration: none;
		outline: none;
	}

	/* Verweise auf externe Seiten erhalten eine gesonderte Formatierung */
	.navi_main li.extern > a {
		color: var(--sl-fehlcol);
	}
	
	/* Verweise auf externe Seiten erhalten auch ein gesondertes Symbol */
	.navi_main li.extern > a::before {
		content: '\f2f5';
		font-family: AwesomeWeb;
		font-weight: bold;
		font-size: calc(.5rem + .5vw);
		display: inline-block;
		width: calc(.5rem + .5vw);
		padding-right: calc(.25rem + .25vw);
	}

}

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

	/* Positionierung des Top-Links */
	.navi_top::before {
		bottom: calc(1.5rem + 1.5vw);
	}

	/* Home-Button im Header */
	.navi_start::before {
		top: calc(1.5rem + 1.5vw);
		right: var(--sl-leerbox);
	}

	/* Positionierung der Hauptnavigation */
	.navi_main {
		top: calc(3rem + 3vw);
		right: calc(var(--sl-leerbox) + 3rem + 3vw);
		padding: calc(1.5rem + 1.5vw) 0 0 0;
	}

	/* Reaktion der Hauptnavigation auf Hover- und Fokus-Aktionen */
	.navi_cont:hover .navi_main, .navi_cont:focus .navi_main, .navi_cont:active .navi_main, .navi_cont:focus-within .navi_main {
		width: calc(12rem + 6vw);
		opacity: 1;
		transition: width var(--sl-speeder) ease, opacity var(--sl-speeder) ease, padding 0s;
	}

	/* Reaktion der Hauptnavigation auf Hover- und Fokus-Aktionen */
	.navi_cont:hover .navi_main .level_1, .navi_cont:focus .navi_main .level_1, .navi_cont:active .navi_main .level_1, .navi_cont:focus-within .navi_main .level_1 {
		border: 1px solid var(--sl-backcol);
	}

	/* Reaktion des Navigationsbuttons auf Hover- und Fokus-Aktionen */
	.navi_cont:hover .navi_button, .navi_cont:focus .navi_button, .navi_cont:active .navi_button, .navi_cont:focus-within .navi_button {
		width: calc(12rem + 6vw);
		opacity: 1;
	}

	/* Reaktion des zusätzlichen Inhalts im Navigationsbutton auf Hover- und Fokus-Aktionen */
	.navi_cont:hover .navi_button::after, .navi_cont:focus .navi_button::after, .navi_cont:active .navi_button::after, .navi_cont:focus-within .navi_button::after {
		width: calc(4rem + 4vw);
		opacity: 1;
	}

	/* Die statischen Hauptnavigationspunkte sind nicht klickbar */
	.navi_main .level_1 li span, .navi_main .level_1 li strong, .navi_main .level_1 li label {
		cursor: default;
	}

	/* Dynamische Hauptnavigationspunkte reagieren auf Hover- und Fokus-Aktionen */
	.navi_main .level_1 li:hover > a, .navi_main .level_1 li:focus > a, .navi_main .level_1 li:active > a, .navi_main .level_1 li:focus-within > a,
	.navi_main .level_1 li:hover > span, .navi_main .level_1 li:focus > span, .navi_main .level_1 li:active > span, .navi_main .level_1 li:focus-within > span,
	.navi_main .level_1 li:hover > label, .navi_main .level_1 li:focus > label, .navi_main .level_1 li:active > label, .navi_main .level_1 li:focus-within > label {
		color: var(--sl-overcol);
		text-decoration: underline;
	}

	/* "Statische" Hauptnavigationspunkte mit Untermenüs reagieren nicht auf Hover- und Fokus-Aktionen */
	.navi_main .level_1 li:hover > a::before, .navi_main .level_1 li:focus > a::before, .navi_main .level_1 li:active > a::before, .navi_main .level_1 li:focus-within > a::before,
	.navi_main .level_1 > li.submenu:hover > a, .navi_main .level_1 > li.submenu:focus > a, .navi_main .level_1 > li.submenu:active > a, .navi_main .level_1 > li.submenu:focus-within > a,
	.navi_main .level_1 > li.submenu:hover > span, .navi_main .level_1 > li.submenu:focus > span, .navi_main .level_1 > li.submenu:active > span, .navi_main .level_1 > li.submenu:focus-within > span,
	.navi_main .level_1 > li.submenu:hover > label, .navi_main .level_1 > li.submenu:focus > label, .navi_main .level_1 > li.submenu:active > label, .navi_main .level_1 > li.submenu:focus-within > label {
		text-decoration: none;
	}
	
	/* Untermenüs reagieren auf Hover- und Fokus-Aktionen und werden entsprechend animiert und platziert */
	.navi_main .level_1 li:hover .level_2, .navi_main .level_1 li:focus .level_2, .navi_main .level_1 li:active .level_2, .navi_main .level_1 li:focus-within .level_2 {
		right: calc(11.5rem + 5.5vw);
		width: calc(12rem + 6vw);
		opacity: 1;
		transition: right var(--sl-speeder) ease, opacity var(--sl-speeder) ease, width 0s;
		border: 1px solid var(--sl-backcol);
	}

	/* Farbliche Veränderung verschiedener Elemente auf Hover- und Fokus-Aktionen */
	.navi_start:hover::before, .navi_start:focus::before, .navi_start:active::before,
	.navi_label:hover, .navi_label:focus, .navi_label:active,
	.navi_suche:hover::before, .navi_suche:focus::before, .navi_suche:active::before, .navi_suche:focus-within::before,
	.navi_top:hover::before, .navi_top:focus::before, .navi_top:active::before,
	.navi_select:hover ~ .navi_label::before, .navi_select:focus ~ .navi_label::before, .navi_select:active ~ .navi_label::before,
	.navi_select:hover ~ .navi_label .navi_button, .navi_select:focus ~ .navi_label .navi_button, .navi_select:active ~ .navi_label .navi_button,
	.share_cont:hover .share_label::before, .share_cont:focus .share_label::before, .share_cont:active .share_label::before, .share_cont:focus-within .share_label::before,
	.share_print:hover::before, .share_print:focus::before, .share_print:active::before,
	.share_email:hover::before, .share_email:focus::before, .share_email:active::before,
	.share_whatsapp:hover::before, .share_whatsapp:focus::before, .share_whatsapp:active::before,
	.share_facebook:hover::before, .share_facebook:focus::before, .share_facebook:active::before,
	.share_twitter:hover::before, .share_twitter:focus::before, .share_twitter:active::before {
		color: var(--sl-overcol);
		border-color: var(--sl-overcol);
	}

	/* Positionierung des Navigationslabels */
	.navi_label::before {
		top: calc(1.5rem + 1.5vw);
		right: calc(var(--sl-leerbox) + 3rem + 3vw);
	}
	
	/* Positionierung des Navigationsbuttons */
	.navi_button {
		top: calc(1.5rem + 1.5vw);
		right: calc(var(--sl-leerbox) + 3rem + 3vw);
	}
	
	/* Platzierung des Suchbuttons */
	.navi_suche::before {
		top: calc(4.5rem + 4.5vw);
	}

	/* Platzierung des Suchformulars */
	.navi_suche form {
		top: calc(4.5rem + 4.5vw);
		right: calc(var(--sl-leerbox));
	}
	
	/* Darstellung der Widgets in der Suche */
	.navi_suche .widget-submit .submit:hover::before, .navi_suche .widget-submit .submit:focus::before, .navi_suche .widget-submit .submit:active::before {
		color: var(--sl-overcol);
		cursor: pointer;
	}

	/* Positionierung des Teilen-Labels */
	.share_main,
	.share_label::before {
		top: calc(7.5rem + 7.5vw);
		right: calc(var(--sl-leerbox));
	}

	/* Reaktion des Teilen-Buttons auf Hover- und Fokus-Aktionen */
	.share_main button:hover {
		cursor: pointer;
	}
	
	/* Darstellung des Teilen-Inhalts bei Hover- und Fokus-Aktionen anpassen */
	.share_cont:hover .share_main, .share_cont:focus .share_main, .share_cont:active .share_main, .share_cont:focus-within .share_main {
		width: calc(12.25rem + 12.25vw);
		opacity: 1;
		transition: width var(--sl-speeder) ease, opacity var(--sl-speeder) ease;
	}

}

@media screen and (max-width: 1024px) {
	
	/* nach-oben-Button wird positioniert */
	.navi_top::before {
		bottom: 1rem;
		right: var(--sl-leerabs);
	}

	/* Home-Button wird positioniert */
	.navi_start::before {
		bottom: calc(4rem + 2vw);
		left: var(--sl-leerabs);
	}

	/* Suchen-Button wird positioniert */
	.navi_suche::before {
		top: calc(4rem + 2vw);
		right: var(--sl-leerabs);
	}	

	/* Suchformular wird positioniert */
	.navi_suche form {
		top: calc(4rem + 2vw);
		right: var(--sl-leerabs);
	}

	/* Die Farben verschiedener Elemente reagieren bei Aktivierung */
	.navi_select:checked ~ .navi_label,
	.navi_suche:hover, .navi_suche:focus, .navi_suche:active, .navi_suche:focus-within,
	.share_cont:hover .share_label, .share_cont:focus .share_label, .share_cont:active .share_label, .share_cont:focus-within .share_label {
		color: var(--sl-overcol);
	}

	/* Positionierung der Hauptnavigation */
	.navi_main {
		padding: 0;
		top: calc(4rem + 2vw);
		right: var(--sl-leerabs);
	}	

	/* Aktivierung der Hauptnavigation bei Klick auf Navigationsbutton */
	.navi_select:checked ~ .navi_main {
		width: calc(12rem + 6vw);
		opacity: 1;
		transition: width var(--sl-speeder) ease, opacity var(--sl-speeder) ease, padding 0s, border 0s;
	}
	
	/* Sobald die erste Navigationsebene eingeblendet wird, setzen wir den Rahmen */
	.navi_select:checked ~ .navi_main .level_1 {
		border: 1px solid var(--sl-backcol);
	}

	/* Positionierung von Navigationsmenüs 2. Ebene */
	.navi_main .level_2 {
		top: 0;
		border: 1px solid var(--sl-backcol);
	}

	/* Aktivierung der untergeordneten Navigation 2. Ebene */
	.navi_main .level_1 li:hover .level_2,
	.navi_main .level_1 li:focus .level_2,
	.navi_main .level_1 li:active .level_2 {
		display: block;
		right: calc(11.5rem + 5.5vw);
		width: calc(12rem + 6vw);
		opacity: 1;
		transition: right var(--sl-speeder) ease, opacity var(--sl-speeder) ease, width 0s;
	}

	/* Änderung des Labels im aktiven Navigationsbutton */
	.navi_select:checked ~ .navi_label::before {
		content: '\f00d';
	}

	/* Änderung der Breite des aktiven Navigationsbuttons */
	.navi_select:checked ~ .navi_label .navi_button {
		width: calc(12rem + 6vw);
		opacity: 1;
	}

	/* Anpassung des zusätzlichen Inhalts im aktiven Navigationsbutton */
	.navi_select:checked ~ .navi_label .navi_button::after {
		width: calc(6rem + 3vw);
		opacity: 1;
	}

	/* Darstellung der Hintergrund-Hinterlegung bei aktivierter Navigation */
	.navi_select:checked ~ .navi_label .navi_backer {
		width: 100vw;
		height: 100vh;
		background-color: var(--sl-backtrs);
		transition: background var(--sl-speeder) ease, width 0s ease 0s, height 0s ease 0s;
	}

	/* Positionierung des Navigations-Icons */
	.navi_button, .navi_label::before {
		top: 1rem;
		right: var(--sl-leerabs);
	}
	
	/* Positionierung des Teilen-Labels */
	.share_label::before {
		bottom: 1rem;
		left: var(--sl-leerabs);
	}

	/* Positionierung des Teilen-Inhalts */
	.share_main {
		padding-left: calc(2rem + 2vw);
		bottom: 1rem;
		left: var(--sl-leerabs);
	}

	/* Aktivierung des Teilen-Inhalts bei bestimmten Aktionen */
	.share_select:hover ~ .share_main, .share_select:focus ~ .share_main, .share_select:active ~ .share_main, .share_select:focus-within ~ .share_main {
		width: calc(12.25rem + 12.25vw);
		opacity: 1;
		transition: width var(--sl-speeder) ease, opacity var(--sl-speeder) ease;
	}

}

@media screen and (max-width: 640px) {
	
	/* Aktivierung der Hauptnavigation bei Klick auf Navigationsbutton */
	.navi_select:checked ~ .navi_main {
		width: calc(14rem + 7vw);
	}

	/* Änderung der Breite des aktiven Navigationsbuttons */
	.navi_select:checked ~ .navi_label .navi_button {
		width: calc(14rem + 7vw);
	}
	
	/* Die Ausrichtung der Navigationseinträge erfolgt untereinander */
	.navi_main .level_1 li {
		flex-direction: column;
	}
	
	/* Die Pfeile werden für die Navigation verändert */
	.navi_main .level_1 > li.submenu > a::before,
	.navi_main .level_1 > li.submenu > span::before,
	.navi_main .level_1 > li.submenu > label::before {
		content: '\f0d7';
	}

	/* Die Pfeile werden für die Navigation verändert */
	.navi_main .level_1 > li.submenu > input[type=checkbox]:checked ~ a::before,
	.navi_main .level_1 > li.submenu > input[type=checkbox]:checked ~ span::before,
	.navi_main .level_1 > li.submenu > input[type=checkbox]:checked ~ label::before {
		content: '\f0da';
	}
	
	/* Die Formatierung der Navigationseinträge in der zweiten Ebene wird verändert */
	.navi_main .level_2 {
		z-index: auto;
		position: relative;
		height: 0;
		padding: 0;
		border: 0;
		right: calc(11.5rem + 5.5vw);
        width: 0;
	}
	
	/* Ausrichtung der Einträge in der zweiten Navigationsebene wird angepasst */
	.navi_main .level_2 a, .navi_main .level_2 strong, .navi_main .level_2 label {
		text-align: left;
	}
	
	/* Aktivierung der untergeordneten Navigation 2. Ebene */
	.navi_main .level_1 input[type=checkbox]:checked ~ .level_2 {
		right: 0;
		height: auto;
        width: 100%;
		opacity: 1;
		border: 0;
		margin-left: calc(1.4rem + .9vw);
		transition: right var(--sl-speeder) ease, opacity var(--sl-speeder) ease, width 0s;
	}
	
}

/* ----------------------------------------------------- */
/* Grundlegende Formatierungen für Bildschirmdarstellung */
/* ----------------------------------------------------- */

@media screen and (max-width: 1024px) {
	
	/* Variablen für mobile Darstellung */
	html {
		--sl-leerbox: calc(4rem + 2vw);
		--sl-leerabs: 1rem;
		--sl-leerend: calc(1rem + 1vw);
		--sl-headtop: 1rem;
		--sl-fontdef: .9rem;
		--sl-fontsml: .8rem;
	}

}

@media screen and (max-width: 640px) {
	
	/* Variablen für mobile Darstellung */
	html {
		--sl-leerbox: 1rem;
	}

}

@media screen and (min-width: 1025px) {
	
	/* Variable für Desktop-Darstellung */
	html {
		--sl-leerbox: 7.5vw;
		--sl-leerabs: 2.5vw;
		--sl-leerend: 5vw;
		--sl-headtop: calc(1.5rem + 1.5vw);
		--sl-fontdef: 1rem;
		--sl-fontsml: .9rem;
	}

}

@media screen {

	/* Allgemeine Grundeinstellungen */
	html {
		overflow-y: scroll;
		overflow-x: auto;
		scroll-behavior: smooth;
		--sl-highcol: rgb(3,82,169);
		--sl-hightrs: rgba(3,82,169,.80);
		--sl-highlgt: rgba(3,82,169,.10);
		--sl-fontcol: rgb(0,0,0);
		--sl-fonttrs: rgba(0,0,0,.5);
		--sl-backcol: rgb(255,255,255);
		--sl-backtrs: rgba(255,255,255,.5);
		--sl-overcol: rgb(255,232,76);
		--sl-overlit: rgb(255,249,204);
		--sl-fehlcol: rgb(255,225,210);
		--sl-fehllit: rgb(255,220,210);
		--sl-movecol: rgb(150,0,0);
		--sl-rounded: calc(1rem + 1vw);
		--sl-speeder: .25s;
	}
	
	/* Allgemeine Seitenformatierungen */
	body {
		margin-right :auto;
		margin-left :auto;
		padding: 0;
		vertical-align: top;
		text-align: left;
		font: var(--sl-fontdef) WebFiraSans,Verdana,Arial,Helvetica,sans-serif;
		color: var(--sl-fontcol);
		background-color: var(--sl-backcol);
		background-attachment: fixed;
	}
	
	/* Allgemeine Seitenformatierungen für RCE-Template */
	body.laufen-rce-template {
	    font-family: WebFiraSans,Verdana,Arial,Helvetica,sans-serif !important;
	}
	
	/* ------------------------------ */
	/* Formatierungen im Hauptbereich */
	/* ------------------------------ */
	
	/* Standard-Abstände für Artikel-Blöcke */
	.mod_article {
		margin: 0;
		padding: var(--sl-leerabs) var(--sl-leerbox);
		box-sizing: border-box;
	}

	/* Standard-Abstände für Artikel-Blöcke */
	.mod_article.startbanner {
		margin: 0;
		padding: 0;
	}

	/* Standard-Abstände für Artikel-Blöcke */
	.mod_article.infobox {
		background-color: var(--sl-highlgt);
	}

	/* Standard-Abstände für Artikel-Blöcke */
	.mod_article.trenner {
		border-top: 1px solid var(--sl-highcol);
	}

	/* Überschriften erster Ordnung */
	.mod_article h1 {
		font-size: calc(2 * var(--sl-fontdef));
		margin-top: calc(2 * var(--sl-fontdef));
		margin-bottom: calc(2 * var(--sl-fontdef));
		font-weight: bold;
	}
	
	/* Überschriften zweiter Ordnung */
	.mod_article h2 {
		font-size: calc(1.75 * var(--sl-fontdef));
		margin-top: calc(1.75 * var(--sl-fontdef));
		margin-bottom: calc(1.75 * var(--sl-fontdef));
		font-weight: bold;
	}
	
	/* Überschriften dritter Ordnung */
	.mod_article h3 {
		font-size: calc(1.5 * var(--sl-fontdef));
		margin-top: calc(1.5 * var(--sl-fontdef));
		margin-bottom: calc(1.5 * var(--sl-fontdef));
		font-weight: bold;
	}

	/* Überschriften vierter Ordnung */
	.mod_article h4 {
		font-size: calc(1.25 * var(--sl-fontdef));
		margin-top: calc(1.25 * var(--sl-fontdef));
		margin-bottom: calc(1.25 * var(--sl-fontdef));
		font-weight: bold;
	}

	/* Absatzformatierungen */
	.mod_article p {
		font-size: var(--sl-fontdef);
		margin-top: var(--sl-fontdef);
		margin-bottom: var(--sl-fontdef);
		line-height: 175%;
	}
	
	/* Standard-Abstände für Artikel-Blöcke */
	.content-text img,
	.content-gallery img {
		border: 1px solid var(--sl-highcol);
	}

	/* Standard-Abstände für Artikel-Blöcke */
	.content-text.media--right figure {
		margin: var(--sl-fontdef) 0 var(--sl-fontdef) var(--sl-fontdef);
	}

	/* Standard-Abstände für Artikel-Blöcke */
	.content-text.media--left figure {
		margin: var(--sl-fontdef) var(--sl-fontdef) var(--sl-fontdef) 0;
	}
	
	/* Ungeordnete Aufzählungen in Textblöcken */
	.content-text ul {
		margin-top: var(--sl-fontdef);
		margin-bottom: var(--sl-fontdef);
		list-style-type: disc;
		list-style-position: outside;
		margin-left: var(--sl-fontdef);
	}

	/* Zeilenhöhen in ungeordneten Aufzählungen */
	.content-text ul li {
		line-height: 175%;
	}

	/* Zeilenhöhen in Download-Aufzählungen */
	.content-download, .content-downloads ul li {
		line-height: 150%;
	}

	/* Formatierung in Download-Aufzählungen */
	.content-download, .content-downloads ul {
		margin-top: var(--sl-fontdef);
		margin-bottom: var(--sl-fontdef);
		list-style-type: none;
		margin-left: 0;
	}

	/* Tabellen-Inhaltsblock */
	.content-table {
		margin-top: var(--sl-fontdef);
		margin-bottom: var(--sl-fontdef);
	}

	/* Tabellenformatierung */
	.content-table table {
		margin-top: var(--sl-fontdef);
		margin-bottom: var(--sl-fontdef);
		font-size: var(--sl-fontdef);
		line-height: 175%;
		border-collapse: separate;
		border: 1px solid var(--sl-highcol);
		background-color: var(--sl-backcol);
	}
	
	/* Tabellenindexierungszelle formatieren */
	.content-table th {
		background-color: var(--sl-highlgt);
		padding: calc(.25 * var(--sl-fontdef)) calc(.5 * var(--sl-fontdef));
		font-weight: bold;
		border-bottom: 1px solid var(--sl-highlgt);
		border-right: 1px solid var(--sl-highlgt);
	}
	
	/* Tabelleninhaltszelle formatieren */
	.content-table td {
		padding: calc(.25 * var(--sl-fontdef)) calc(.5 * var(--sl-fontdef));
		border-bottom: 1px solid var(--sl-highlgt);
		border-right: 1px solid var(--sl-highlgt);
	}

	/* Letzten Eintrag einer Tabellenzeile formatieren */
	.content-table th:last-child,
	.content-table td:last-child {
		border-right: 0;
	}

	/* Letzte Zeile eines Gliederungsblocks in der Tabelle formatieren */
	.content-table tr:last-child th,
	.content-table tr:last-child td {
		border-bottom: 0;
	}

	/* Formatierungen für Links */
	.content-text a {
		color: var(--sl-highcol);
		text-decoration: underline dotted;
	}

	/* Formatierungen für markierte Links */
	.content-text a:hover, .content-text a:focus, .content-text a:active {
		color: var(--sl-movecol);
		text-decoration: underline;
	}

	/* Symbol vor Links */
	.content-text a::before, .content-download a::before, .content-downloads a::before {
		content: '\f0a4';
		font-family: AwesomeWeb;
		font-weight: bold;
		display: inline-block;
		padding-left: calc(.25 * var(--sl-fontdef));
		padding-right: calc(.5 * var(--sl-fontdef));
		text-decoration: none;
    }

	/* Symbol vor externen Links */
	.content-text a[href^="http:"]::before, .content-text a[href^="https:"]::before {
		content: '\f2f5';
    }

	/* Symbol vor E-Mail-Links */
	.content-text a[href^="mailto:"]::before {
		content: '\f0e0';
	}
	
	/* Symbol vor Telefon-Links */
	.content-text a[href^="tel:"]::before {
		content: '\f095';
	}
	
	/* Formatierungen für Links */
	.content-download a, .content-downloads a {
		color: var(--sl-fontcol);
		text-decoration: none;
		display: inline-grid;
		grid-template-columns: min-content 6rem auto;
	}

	/* Formatierungen für Links */
	.content-download a .filetext, .content-downloads a .filetext {
		color: var(--sl-highcol);
		text-decoration: underline dotted;
		clear: right;
		grid-column-start: 2;
		grid-column-end: 4;
	}

	/* Formatierungen für Links */
	.content-download a .filetype, .content-downloads a .filetype {
		font-size: var(--sl-fontsml);
	}

	/* Formatierungen für Links */
	.content-download a .filesize, .content-downloads a .filesize {
		color: var(--sl-movecol);
		font-size: var(--sl-fontsml);
	}
    
	/* Größeres Dateisymbol vor Download-Links */
	.content-download a::before, .content-downloads a::before {
		content: '\f56d';
		color: var(--sl-highcol);
		font-size: calc(2 * var(--sl-fontdef));
		grid-row: span 2;
		padding: 0 var(--sl-fontdef) 0 calc(.25 * var(--sl-fontdef));
		align-self: center;
	}

	/* Formatierungen für Links */
	.content-downloads li {
		margin-bottom: var(--sl-fontdef);
	}

	/* Formatierungen für Links */
	.content-downloads li::last-child {
		margin-bottom: 0;
	}

	/* Formatierungen für markierte Links */
	.content-download a:hover .filetext, .content-download a:focus .filetext, .content-download a:active .filetext,
	.content-downloads a:hover .filetext, .content-downloads a:focus .filetext, .content-downloads a:active .filetext {
		color: var(--sl-movecol);
		text-decoration: underline;
	}

	/* Formatierungen für markierte Links */
	.content-download a:hover:before, .content-download a:focus:before, .content-download a:active:before,
	.content-downloads a:hover:before, .content-downloads a:focus:before, .content-downloads a:active:before {
		color: var(--sl-movecol);
	}

	/* Formatierung für Akkordeon */
	.content-accordion {
		margin-top: var(--sl-fontdef);
		margin-bottom: var(--sl-fontdef);
		border-bottom: 1px solid var(--sl-highcol);
	}

	/* Formatierung für Header des Akkordeon-Bereichs */
	.content-accordion .handorgel__header {
		margin: 0;
		padding: 0;
		border: 0;
		font-size: var(--sl-fontdef);
		font-weight: bold;
		color: var(--sl-highcol);
		box-sizing: border-box;
	}

	/* Button im Header des Akkordeon-Bereichs */
	.content-accordion .handorgel__header__button {
		margin: 0;
		padding: var(--sl-fontdef);
		border-top: 1px solid var(--sl-highcol);
		border-left: 1px solid var(--sl-highcol);
		border-right: 1px solid var(--sl-highcol);
		border-bottom: 0;
		box-sizing: border-box;
		background-color: var(--sl-highlgt);
		text-decoration: underline dotted;
		outline: none;
	}

	/* Symbol für Button im Akkordeon-Bereich */
	.content-accordion .handorgel__header__button:before {
		display: inline-block;
		content: '\f150';
    	font-family: AwesomeWeb;
    	font-weight: bold;
    	margin-right: calc(.5 * var(--sl-fontdef));
    	text-decoration: none;
	}

	/* Markierung beim Überfahren des Header-Buttons im Akkordeon-Bereich */
	.content-accordion .handorgel__header__button:hover, .content-accordion .handorgel__header__button:focus, .content-accordion .handorgel__header__button:active {
		color: var(--sl-movecol);
	}
	
	/* Markierung des geöffneten Buttons im Header des Akkordeon-Bereichs */
	.content-accordion .handorgel__header--opened .handorgel__header__button:hover, .content-accordion .handorgel__header--opened .handorgel__header__button:focus, .content-accordion .handorgel__header--opened .handorgel__header__button:active {
		text-decoration: underline;
	}
	
	/* Änderung des geöffneten Buttons im Header des Akkordeon-Bereichs */
	.content-accordion .handorgel__header--opened .handorgel__header__button:before {
		content: '\f151';
	}

	/* Formatierung eines Akkordeon-Bereichs */
	.content-accordion .handorgel__content {
		border-top: 0;
		border-bottom: 0;
		border-left: 1px solid var(--sl-highcol);
		border-right: 1px solid var(--sl-highcol);
		background-color: var(--sl-backcol);
		margin: 0;
		padding: 0;
	}

	/* Formatierung eines Inhaltselements im Akkordeon-Bereich */
	.content-accordion .handorgel__content__inner {
		border: 0;
		margin: 0;
        padding: 0 var(--sl-fontdef);
        overflow: hidden;
        background-color: var(--sl_backcol);
	}

	/* Galerie-Darstellung */
	.content-gallery ul {
		display: inline-grid;
		grid-auto-flow: column;
		grid-template-columns: auto auto auto auto;
		column-gap: calc(1rem + 1vw);
		row-gap: calc(1rem + 1vw);
	}
	
	/* Darstellung eines Infoblocks - gegebenenfalls mit Bild */
	.vcard {
		display: inline-grid;
		grid-auto-flow: column;
		grid-template-columns: max-content auto;
		margin-right: 2rem;
		vertical-align: top;
	}
	
	/* Positionierung des Banners im Anfangsbereich der Seite */
	.startbanner, .content-swiper {
		position: relative;
		font-size: 0;
	}
	
	/* Breite der Bilder im Swiper und im Anfangsbereich werden auf 100 % gesetzt */
	.content-swiper .content-image img,
	.startbanner .content-image img {
		width: auto;
		height: auto;
		min-width: 100%;
		min-height: 30vh;
		object-fit: cover;
	}

	/* Darstellung der Unterschriften bei Bildbeschreibungen in Swiper und Anfangsbereich */
	.content-swiper .content-image figcaption,
	.startbanner .content-image figcaption {
		bottom: 0;
		position: absolute;
		display: block;
		box-sizing: border-box;
		font-size: calc(.45rem + .45vw);
		line-height: 175%;
		background-color: var(--sl-fontcol);
		background-color: var(--sl-fonttrs);
		font-weight: normal;
		color: var(--sl-backcol);
		text-align: left;
		width: 100%;
	}

	/* Seitenränder für Caption von Swiper begrenzen werden Seitenwechsler */
	.content-swiper .content-image figcaption {
		padding: calc(.45rem + .45vw) calc(2.5 * var(--sl-leerbox) + 1vw) calc(.45rem + .45vw) var(--sl-leerbox);
	}

	/* Seitenränder für Caption von Einzelbildern erweitern */
	.startbanner .content-image figcaption {
		padding: calc(.45rem + .45vw) var(--sl-leerbox) calc(.45rem + .45vw) var(--sl-leerbox);
	}
	
	/* Darstellung des Seitenwechslers */
	.content-swiper .swiper-pagination {
		position: absolute;
		width: calc(1.5* var(--sl-leerbox));
		padding: 0;
		margin: 0;
		font-size: calc(.45rem + .45vw);
		line-height: 175%;
		text-align: right;
		box-sizing: border-box;
		top: auto;
		bottom: calc(.45rem + .45vw);
		right: var(--sl-leerbox);
		left: auto;
    }

	/* Darstellung des Seitenwechslers */
	.content-swiper .swiper-pagination-bullet {
		background-color: var(--sl-backcol);
		background-color: var(--sl-backtrs);
		opacity: 1;
		width: calc(.25rem + .25vw);
		height: calc(.25rem + .25vw);
	}

	/* Darstellung des Seitenwechslers */
	.content-swiper .swiper-pagination-bullet-active {
		background-color: var(--sl-overcol);
	}

	/* Steuerelemente für Blättern formatieren */
	.content-swiper button {
		width: calc(2rem + 2vw);
		height: 100%;
		margin: 0;
		padding: 0;
		background-color: transparent;
		border: 0;
	}

	/* Steuerelemente für Blättern formatieren */
	.content-swiper button::after {
		display: none;
	}

	/* Steuerelemente für Blättern formatieren */
	.content-swiper .swiper-button-prev {
		left: 0;
		right: auto;
		top: 0;
	}

	/* Steuerelemente für Blättern formatieren */
	.content-swiper .swiper-button-next {
		right: 0;
		left: auto;
		top: 0;
	}

}


@media screen {

	/* ------------------------------------------------ */
	/* Darstellung im Kopfbereich der Seite formatieren */
	/* ------------------------------------------------ */

	/* Header für Kontrast mit dunklem Hintergrund versehen */
	#header {
		background-color: var(--sl-fontcol);
	}

	/* Logo in der Kopfzeile */
	.header_logo {
		position: absolute;
		top: var(--sl-headtop);
		left: var(--sl-leerbox);
		padding: 0;
		text-align: left;
	}

	/* Link im Header */
	.header_logo a {
		text-decoration: none;
	}
	
	/* Positionierung des Wappens */
	.header_wappen {
		position: relative;
		display: inline-block;
		vertical-align: middle;
		padding: 0;
		z-index: 3500;
	}

	/* Größe für Stadtwappen wird definiert */
	.header_wappen img {
		max-width: calc(2.5rem + 4.5vw);
		height: calc(2.5rem + 4.5vw);
		border: 0;
	}
	
	/* Positionierung der Schrift */
	.header_schrift {
		position: relative;
		display: inline-block;
		margin-left: calc(.5rem + 1vw);
		vertical-align: middle;
		padding: 0;
		z-index: 3505;
	}
	
	/* Schriftzug Stadt wird formatiert */
	.header_stadt {
		margin-bottom: calc(-.5rem + -1vw);
		padding-left: calc(1rem + 1.75vw);
		font: calc(.75rem + 1.75vw) WebVijaya,WebFiraSans,Verdana,Arial,Helvetica,sans-serif;
		font-weight: normal;
		text-decoration: none;
		color: var(--sl-backcol);
		text-shadow: 2px 2px 5px var(--sl-fontcol);
	}
	
	/* Schriftart für Logos wird festgelegt */
	.header_laufen {
		font: calc(1.75rem + 3.25vw) WebVijaya,WebFiraSans,Verdana,Arial,Helvetica,sans-serif;
		font-weight: normal;
		text-decoration: none;
		color: var(--sl-backcol);
		text-shadow: 2px 2px 5px var(--sl-fontcol);
	}
	
	/* Schriftart für Motto wird festgelegt */
	.header_motto {
		position: relative;
		margin-top: calc(.15rem + .25vw);
		font: calc(.5rem + 1.5vw) WebVijaya,WebFiraSans,Verdana,Arial,Helvetica,sans-serif;
		font-weight: normal;
		text-decoration: none;
		color: var(--sl-backcol);
		text-shadow: 2px 2px 5px var(--sl-fontcol);
		white-space: nowrap;
		z-index: 3510;
	}

}


/* ----------------------------------------------- */
/* Darstellung im Fußbereich der Seite formatieren */
/* ----------------------------------------------- */

@media screen {

	/* Footer-Block formatieren */
	#footer {
		background-color: var(--sl-highcol);
		color: var(--sl-backcol);
		font-size: var(--sl-fontsml);
		box-sizing: border-box;
		margin: 0;
 		padding: var(--sl-leerend) 0;
	}
	
	/* Textblöcke und Überschriften formatieren */
	#footer h2, #footer h3, #footer p {
		margin: 0;
		padding: 0;
	}
	
	/* Überschriften im Footer formatieren */
	#footer h2, #footer h3 {
		font-weight: bold;
	}
	
	/* Footer-Layout als Gitter darstellen */
	#footer > .inside {
		display: grid;
		row-gap: var(--sl-leerend);
	}
	
	/* Textblöcke im Footer ebenfalls als Gitter darstellen */
	#footer .rte {
		display: grid;
		column-gap: calc(.5rem + .5vw);
		row-gap: calc(.5rem + .5vw);
		grid-auto-flow: row;
	}
	
	/* Stadt Laufen Logo im Footer platzieren */
	.footer_logo {
		padding-left: var(--sl-leerbox);
	}

	/* Link im Footer formatieren */
	.footer_logo a {
		text-decoration: none;
	}
	
	/* Positionierung des Wappens */
	.footer_wappen {
		position: relative;
		display: inline-block;
		vertical-align: middle;
		padding: 0;
	}

	/* Größe für Stadtwappen wird definiert */
	.footer_wappen img {
		max-width: calc(2.5rem + 4.5vw);
		height: calc(2.5rem + 4.5vw);
		border: 0;
	}
	
	/* Positionierung der Schrift */
	.footer_schrift {
		position: relative;
		display: inline-block;
		margin-left: calc(.5rem + 1vw);
		vertical-align: middle;
		padding: 0;
	}

	/* Schriftzug Stadt wird formatiert */
	.footer_stadt {
		margin-bottom: calc(-.5rem + -1vw);
		padding-left: calc(1rem + 1.75vw);
		font: calc(.75rem + 1.75vw) WebVijaya,WebFiraSans,Verdana,Arial,Helvetica,sans-serif;
		font-weight: normal;
		text-decoration: none;
		color: var(--sl-backcol);
		text-shadow: 2px 2px 5px var(--sl-fontcol);
	}
	
	/* Schriftart für Logos wird festgelegt */
	.footer_laufen {
		font: calc(1.75rem + 3.25vw) WebVijaya,WebFiraSans,Verdana,Arial,Helvetica,sans-serif;
		font-weight: normal;
		text-decoration: none;
		color: var(--sl-backcol);
		text-shadow: 2px 2px 5px var(--sl-fontcol);
	}
	
	/* Links im Kontaktebereich formatieren */
	.footer_kontakt a, .footer_copy a {
		color: var(--sl-overlit);
	}
	
	/* Öffnungszeiten im Footer werden platziert */
	.footer_offen {
		padding-right: var(--sl-leerbox);
	}
	
	/* Zweispaltige Darstellung der Öffnungszeiten */
	.footer_offen .rte {
		grid-template-columns: max-content max-content;
	}
	
	/* Überschrift der Öffnungszeiten wird einspaltig */
	.footer_offen .rte h3 {
		grid-column-start: 1;
		grid-column-end: 3;
		margin: 0;
		padding: 0;
	}

	/* Verweise im Footer werden platziert */
	.footer_verweise {
		padding-right: var(--sl-leerbox);
		align-items: center;
		display: grid;
		grid-auto-flow: column;
		grid-auto-columns: min-content;
		grid-column-gap: calc(1rem + 1vw);
	}

	/* Die Beschriftung der Verweise-Buttons wird ausgeblendet */
	.footer_verweise a {
		display: grid;
		grid-template-columns: min-content 0;
		align-items: center;
		text-decoration: none;
		overflow: hidden;
		color: var(--sl-overlit);
		font-size: calc(1rem + 1vw);
	}

	/* Die Farbe der Buttons beim Überfahren ändert sich */
	.footer_kontakt a:hover, .footer_kontakt a:focus, .footer_kontakt a:active,
	.footer_verweise a:hover, .footer_verweise a:focus, .footer_verweise a:active,
	.footer_copy a:hover, .footer_copy a:focus, .footer_copy a:active {
		color: var(--sl-overcol);
	}

	/* Der E-Mail-Button erhält ein Symbol */
	.footer_email a::before {
		content: '\0040';
		font-family: AwesomeWeb;
		font-weight: bold;
	}

	/* Der Facebook-Button erhält ein Symbol */
	.footer_facebook a::before {
		content: '\f09a';
		font-family: AwbrandWeb;
		font-weight: normal;
	}

	/* Der Kummerkasten-Button erhält ein Symbol */
	.footer_kummer a::before {
		content: '\f01c';
		font-family: AwesomeWeb;
		font-weight: bold;
	}

	/* Der Online-Dienste-Button erhält ein Symbol */
	.footer_service a::before {
		content: '\f07a';
		font-family: AwesomeWeb;
		font-weight: bold;
	}

	/* Copyright-Hinweis im Footer wird platziert */
	.footer_copy {
		padding-left: var(--sl-leerbox);
		padding-right: var(--sl-leerbox);
		font-size: var(--sl-fontsml);
	}

	/* Die Navigation im Fußbereich wird formatiert */
	.footer_navi {
		padding-left: var(--sl-leerbox);
	}

	/* Unsichtbare Links zum Überspringen der Navigation werden formatiert */
	.footer_navi .invisible {
		background-color: var(--sl-backcol);
		color: var(--sl-highcol);
	}
	
	/* Die oberste Ebene der Navigation im Footer-Bereich wird formatiert */
	.footer_navi .level_1 {
		display: inline-block;
		text-align: center;
		box-sizing: border-box;
		margin: calc(.5rem + .5vw) 0;
		padding: calc(.25rem + .25vw);
		font-size: 0;
		background-color: var(--sl-backcol);
		color: var(--sl-highcol);
		border-radius: var(--sl-rounded);
	}

	/* Die Navigationseinträge im Footer werden nebeneinander angezeigt */
	.footer_navi .level_1 > li {
		text-align: center;
		display: inline-block;
	}

	/* Die Einträge in der obersten Ebene der Navigation werden formatiert */
	.footer_navi .level_1 > li > a,
	.footer_navi .level_1 > li > strong {
		padding: calc(.25rem + .25vw) calc(.5rem + .5vw);
		margin: 0;
		color: var(--sl-highcol);
		font-size: var(--sl-fontdef);
		text-decoration: none;
		text-align: left;
		white-space: nowrap;
		outline: none;
		display: block;
	}

	/* Die aktiven Einträge in der obersten Ebene der Navigation werden gesondert formatiert */
	.footer_navi .level_1 > li > .active,
	.footer_navi .level_1 > li > .trail {
		color: var(--sl-movecol);
		font-weight: bold;
	}

	/* Die Einträge in der obersten Ebene der Navigation werden beim fokussieren gesondert formatiert */
	.footer_navi .level_1 > li:hover > a, .footer_navi .level_1 > li:focus > a, .footer_navi .level_1 > li:focus-within > a, .footer_navi .level_1 > li:active > a {
		color: var(--sl-movecol);
		text-decoration: underline;
	}

}

/* ----------------------------------- */
/* Optimierung für Mobil-Darstellung */
/* ----------------------------------- */

@media screen and (max-width: 1024px) {
	
	/* Alle Inhalte im Footer werden mittig ausgerichtet */
	#footer {
		text-align: center;
	}

	/* Die einspaltige Darstellung wird für die mobile Darstellung vorgegeben */
	#footer > .inside {
		column-gap: calc(1rem + 1vw);
		row-gap: var(--sl-leerend);
		grid-template-columns: auto auto;
		grid-auto-flow: row;
	}

	/* Die Textblöcke im Footer-Bereich werden mittig ausgerichtet (Grid) */
	#footer .rte {
		justify-self: center;
	}

	/* Seitlicher Abstand in der mobilen Darstellung wird gesetzt */
	.footer_logo, .footer_navi {
		padding-left: var(--sl-leerbox);
		padding-right: var(--sl-leerbox);
	}
	
	/* Schriftzug muss linksbündig bleiben, sonst stimmen die Positionierungen nicht mehr */
	.footer_schrift {
		text-align: left;
	}
	
	/* Bei Zweispaltiger Darstellung Kontakt rechtsbündig anzeigen */
	.footer_kontakt {
		padding-left: var(--sl-leerbox);
		text-align: right;
		justify-self: end;
	}

	/* Bei zweispaltiger Darstellung Öffnungszeiten linksbündig anzeigen */
	.footer_offen {
		text-align: left;
		justify-self: start;
	}

	/* Die Verweise werden mittig ausgerichtet (Grid) */
	.footer_verweise {
		justify-self: center;
		padding-left: var(--sl-leerbox);
	}

	/* Die Navigation im Footer wird über zwei Spalten gezogen */
	.footer_navi, .footer_copy, .footer_verweise, .footer_logo {
		grid-column: span 2;
	}

}

@media screen and (max-width: 512px) {
	
	/* Footer-Block formatieren */
	#footer {
		margin-bottom: calc(4rem + 2vw);
	}
	
	/* Die einspaltige Darstellung wird für die mobile Darstellung vorgegeben */
	#footer > .inside {
		grid-template-columns: auto;
		grid-auto-flow: row;
	}

	/* Bei einspaltiger Darstellung zentrierte Positionierung */
	.footer_kontakt, .footer_offen {
		text-align: center;
		justify-self: center;
		padding-left: var(--sl-leerbox);
		padding-right: var(--sl-leerbox);
	}

	/* Bei zu schmaler Darstellung wird das Copyright seitlich begrenzt */
	.footer_copy {
		padding-left: 4rem;
		padding-right: 4rem;
	}

	/* Der Mail-Link wird nicht umgebrochen */
	.footer_copy a {
		display: inline-block;
		white-space: nowrap;
	}
	
	/* Die Navigation im Footer wird über zwei Spalten gezogen */
	.footer_navi, .footer_copy, .footer_verweise, .footer_logo {
		grid-column: 1;
	}

}

/* ----------------------------------- */
/* Optimierung für Desktop-Darstellung */
/* ----------------------------------- */

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

	/* Eine dreispaltige Darstellung wird am Desktop vorgegeben */
	#footer > .inside {
		column-gap: calc(1rem + 1vw);
		grid-template-columns: auto auto auto;
	}

	/* Das Copyright wird über alle drei Spalten gezogen */
	.footer_copy {
		grid-column: span 3;
	}

	/* Die Navigation im Footer wird über zwei Spalten gezogen */
	.footer_navi {
		grid-column: span 2;
	}

}