/*--------------------------------------------------------------------------*/
/*		Prefixed CSS-Stylesheed - Veloroute - Stadt Hildesheim		*/
/*--------------------------------------------------------------------------*/

/* Scripte
------------------------------------*/
	@import url("../fonts/font-awesome/5.15.3/css/all.min.css");
	@import url("../fonts/open-sans.css");
	@import url("../fonts/roboto.css");


/* Entwicklungstools
------------------------------------*/
/* hidden elements */
	.hidden {
		display: none;
	}

/* Struktur Elemente
------------------------------------*/
	body,
	html {
		font-family: Roboto, Arial, Helvetica, sans-serif;
		font-size: 20px;
		line-height: 1.5;
		color: #383737;
	}
	body {
		background-color: #f1f1f1;
		overflow-y: scroll;
		margin: 0px;
	}
	html {
	  scroll-behavior: smooth;
	}

/* Header-Icons */
	.header-icons-container {
		height: auto;
		padding-bottom: 0.25%;
		background-color: #d43047;
	}
	.header-icons-wrap {
		max-width: 1140px;
		margin-left: auto;
		margin-right: auto;
	}
	.header-icons {
		width: 100%;
	}
/* Headline */
	.header-colorline {
		display: none;
	}
	.headline-container {
		position: relative;
		top: 0;
		width: 100%;
		height: 150px;
		z-index: 99;
	    background-color: rgba(255, 255, 255, 0.85);
	}
	.headline-wrap {
/*		background-color: #fff;*/
		position: relative;
		max-width: 1140px;
		margin-left: auto;
		margin-right: auto;
	}
	.headline-logo-wrap {
		background-color: #fff;
	}
	.headline-logo {
		padding: 20px 20px 20px 20px;
  		height: 150px;
	}
	.headline-slogan {
		position: absolute;
		top: 20px;
		left:150px;
		font-size: 1.9rem;
		color: #14394b;
		text-transform: uppercase;
		font-weight: bold;
		letter-spacing: 2px;
	}
	.uppercase {
		text-transform: uppercase;
	}
	.break-slogan {
		display: none;
	}
	.no-padding {
		padding: 0;
	}
/* Navigation */
	.navbar-container {
		-webkit-box-shadow: 0px 3px 3px 0px rgba(0,0,0,0.2);
		        box-shadow: 0px 3px 3px 0px rgba(0,0,0,0.2);
		/*width: 85%;*/
		height: 60px;
		background-color: #fff;
		opacity: 0.85;
		position: -webkit-sticky;
		position: sticky;
		top: 0;
		z-index: 1000;
		left: 0;
		right: 0;
	}
	.navbar {
		padding: 0;
	}
	.navbar-wrap {
		max-width: 1140px;
		margin-left: auto;
		margin-right: auto;
		/*box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.2);*/
	}
	#navbarBrand {
	  display: none;
	}
	.bg-nav {
		background-color: #fff;
		color: white;
	}
	.navbar-nav {
		position: relative;
		z-index: 999;
	}
	.navbar-expand-lg .navbar-nav .nav-link {
	    padding: 0;
		color: #14394b;
		border-bottom: 3px solid transparent;
		text-decoration: none;
		text-transform: uppercase;
		letter-spacing: 1px;
	}
	.navbar-expand-lg .navbar-nav .nav-link:hover {
		font-weight: bold;
		color: #d43047;
	}
	.navbar-nav .nav-link.active {
		font-weight: bold;
		color: #d43047;
	}
	.navbar-icon-red {
		color: #d43047;
	}
	.navbar-toggler {
	    position: absolute;
	    right: 20px;
	    top: -65px;
	    z-index: 99;
	    width: 50px;
	    height: 50px;
	    border-radius: 50%;
	    border: 1px solid #575656;
	    color: #14394b;
	    background-color: transparent;
	    display: -webkit-box;
	    display: -ms-flexbox;
	    display: flex;
	    -webkit-box-align: center;
	        -ms-flex-align: center;
	            align-items: center;
	    -webkit-box-pack: center;
	        -ms-flex-pack: center;
	            justify-content: center;
	    padding: 0;
	    -webkit-transform: scale(0.85);
	        -ms-transform: scale(0.85);
	            transform: scale(0.85);
	}
	.fa-bars {
		font-size: 25px;
		color: #d43047;
	}
	.fa-bars:hover {
		color: #14394b;
	}
	.navbar-toggler-text {
		display: none;
		font-size: 17px;
		padding: 10px;
		color:#14394b ;
    }
	.nav-item {
		font-size: 1.0rem;
		padding: 15px 35px 0 25px;
		height: 60px;
	}

/* Carousel */
	.carousel-wrap {
		position: relative;
		top: -210px;
		margin-bottom: -200px;
	}
	.carousel-inner {
		max-height: 800px;
	}
	.carousel-indicators li {
		height: 0px;
	}
	.carousel-indicators li:hover {
		opacity: 1;
		-webkit-transition: none;
		-o-transition: none;
		transition: none;
	}
	.carousel-copyright {
		display: block;
		font-size: 12px;
		position: absolute;
		bottom: 0px;
		right: 0px;
		background-color: white;
		padding: 1px 5px 1px 5px;
		opacity: 0.7;
	}

/* Content */
	.container-xl {
		padding: 0;
	}
	.content {
		margin-top: 75px;
		margin-bottom: 50px;
		padding: 20px;
		-webkit-box-shadow: 0 0 0.1875rem 0 #C2C2C2;
		        box-shadow: 0 0 0.1875rem 0 #C2C2C2;
		background-color: #fff;
	}
	section {
		padding: 10px 10px 20px 10px;
	}
	section.mittmachen {
		min-height: 300px;
	}
	.row {
		margin: 0;
	}
	section:first-child {
		border-top: none;
		/*padding-top: 0;*/
	}

/* Footer */
	.footer-2-container {
		border-top: 10px solid #d43047;
		width: 100%;
		min-height: 180px;
		background-color: #f1f1f1;
		padding: 10px;
		font-size: 16px;
		color: #4b4b48;
	}
	.footer-2-wrap {
		max-width: 1140px;
		margin-left: auto;
		margin-right: auto;
		padding-top: 15px;
	}
	.footer-1-container {
	    width: 100%;
		height: 429px;
		background: url('../images/silhouette.png') center no-repeat;
		background-size: auto;
		background-size: 120rem 429px;
/*		border-bottom: #d43047 0.4375rem solid;*/

	}
	.footer-1-wrap {
		max-width: 1140px;
		margin-left: auto;
		margin-right: auto;
	}
	.footer-3-container {
		/*border-top: 1px solid rgba(255,255,255,.25);*/
		position: relative;
	    background-color:#f1f1f1;
	}
	.footer-3-wrap {
		max-width: 1140px;
		margin-left: auto;
		margin-right: auto;
		height: 60px;
	}
	.silhouette-container {
		background-color: #14394b;
		margin-top: -75px;
	}
	.silhouette-wrap img {
		width: 100%;
	}
	.copyright {
		text-align: left;
		padding: 22px;
		font-size: 14px;
		color: #4b4b48;
		height: 60px;
	}
	.logo-lka-footer {
		float: right;
		height: 60px;
		padding: 7px;
		background-color: #f1f1f1;
	}
	.fa-ul a {
		color: #4b4b48;
		opacity: 1;
		text-decoration: none;
	}
	.fa-ul a:hover {
		opacity: 1;
		text-decoration: underline;
		color: #4b4b48;
	}
	footer .fa, footer .fas {
		color: #4b4b48;
	}

/* Stilelemente
------------------------------*/
/* Nach-Oben-Button */
	.gototop {
		position: fixed;
		bottom: 30px;
		right: 30px;
		z-index: 99;
		width: 50px;
		height: 50px;
		border: 1px solid #fff;
		border-radius: 25px;
		background-color: #d43047;
		padding-top: 8px;
		color: #fff;
		font-size: 20px;
		font-weight: bold;
		text-align: center;
		text-decoration: none;
	}
	.gototop:hover {
		color: white;
		-webkit-transform: translateY(-10px);
		    -ms-transform: translateY(-10px);
		        transform: translateY(-10px);
		-webkit-transition: -webkit-transform cubic-bezier(0.5, 3, 0.8, 0.5) 0.5s;
		transition: -webkit-transform cubic-bezier(0.5, 3, 0.8, 0.5) 0.5s;
		-o-transition: transform cubic-bezier(0.5, 3, 0.8, 0.5) 0.5s;
		transition: transform cubic-bezier(0.5, 3, 0.8, 0.5) 0.5s;
		transition: transform cubic-bezier(0.5, 3, 0.8, 0.5) 0.5s, -webkit-transform cubic-bezier(0.5, 3, 0.8, 0.5) 0.5s;
	}
	.fa-chevron-up {
		font-weight: bold;
	}

/* Schriften
------------------------------------*/
	.h_head {
		margin-top: 30px;
		margin-left: 25px;
		color: #14394b;
	  	font-size: 1.35rem;
	  	text-transform: uppercase;
	  	font-weight: bold;
	  	letter-spacing: 0.1em;
	}
	.h_head::after {
		content: "";
		display: block;
		width: 98%;
		height: 2px;
		background-color: #d43047;
		margin-top: 0.5rem;
	  	margin-bottom: 20px;
	}

	.h_bold	{
		margin-top: 15px;
	}
	h1 {
	  font-size: 1.35rem;
/*	  margin-top: 10px;*/
	  margin-bottom: 20px;
	  color: #14394b;
	}
	footer h1 {
	  font-size: 1.3em;
	  margin-bottom: 10px;
	  color: #4b4b48;
	}
	h2 {
		font-size: 1.2rem;
		color: #383737;
		margin-bottom: 15px;
		font-weight: bold;
	}
	.nonspacing {
		white-space: nowrap;
	}
	.italic {
		font-style: italic;
	}
	.infoframe {
		background-color: #EBEBEB;
		padding: 15px;
	}
	.txt-red {
		color: #d43047;
	}

/* Links
------------------------------------*/
	a {
 		color: #d43047;
 		text-decoration: none;
 	}
	a:hover {
		color: #d43047;
 		-webkit-transition: 0.4s;
 		-o-transition: 0.4s;
 		transition: 0.4s;
 		text-decoration: underline;
 	}

/* Absätze
------------------------------------*/
	p.explain {
		font-weight: normal;
		margin: 5px 0 15px 0;
	}
	p.note, span.note {
		font-style: italic;
		margin: 5px 0 5px 0;
	}
	.hinweis {
		font-style: italic;
	}
	.initial {
		font-size: 300%;
		line-height: 1;
		float: left;
		padding-right: .125em;
		color: #14394b;
	}

/* Accordion
------------------------------------*/
	.bar {
		position: relative;
		border-bottom: 1px solid #e9e9e9;
	  	padding-top: 5px;
		padding-bottom: 5px;
		cursor: pointer;
		width: 100%;
    	-webkit-transition: 0.4s;
    	-o-transition: 0.4s;
    	transition: 0.4s;
		text-align: left;
		font-size: 1.4rem;
	  	color: #14394b;
	}
	.wrap-h-bar {
		margin-top: -40px;
		margin-left: 40px;
	}
	.bar-active, .bar:hover, .bar:focus {
		background-color: #d43047;
		color: #fff;
	}
	.panel {
	  padding: 12px;
	  /*background-color: #e6e6e6;*/
	  /*font-size: 14px;*/
	}
	.accordion .fa-chevron-down {
/*	    position: absolute;
	    top: 12px;
	    right:5px;*/
    	margin-right: 20px;
    	margin-left: 5px;
	    font-size: 1.0rem;
    	-webkit-transition: all 0.4s ease;
    	-o-transition: all 0.4s ease;
    	transition: all 0.4s ease;
    	-webkit-transform: rotate(-90deg);
    	    -ms-transform: rotate(-90deg);
    	        transform: rotate(-90deg);
	}
	.accordion .open .fa-chevron-down {
		-webkit-transform: rotate(0deg);
		    -ms-transform: rotate(0deg);
		        transform: rotate(0deg);
	}

/* Modal
------------------------------------*/
	.modal-header {
		background-color: #d43047;
		color: white;
	}
	.modal-footer {
		background-color: #fff;
		color: white;
		padding-top: 3px;
		padding-bottom: 8px;
	}
	.modal-content{
		margin-top: 0;
	}
	.close {
		color: #fff;
		opacity: 1;
	}
	.close:hover {
		color: #fff;
		opacity: 0.3;
	}
	.smooth-modal .modal-dialog {
	    transition: transform 0.5s ease-out, opacity 0.5s ease-out;
	    transform: translateY(30px);
	    opacity: 0;
	}

	.smooth-modal.show .modal-dialog {
	    transform: translateY(0);
	    opacity: 1;
	}

/* Aufzählungslisten
------------------------------------*/
/* Allgemein */
	ul {
		list-style-type: square;
	}
	li {
		padding-bottom: 0.2rem;
	}

/* Footer */
	.fa-ul > li {
		margin-left: -15px;
	}

/* Grafiken
------------------------------------*/
	.pic,
	.intro-pic,
	.shadow-pic {
/*		margin-top: 5px;*/
		width: 100%;
		border-radius: 5px;
		-webkit-box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
		        box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
	}
	.beitragsbild {
		width: 100%;
		border-radius: 5px;
	}
	.bildunterschrift {
		display: block;
		margin-top: 10px;
		margin-bottom: 10px;
		font-size: 16px;
	}
	.zeitstrahl {
		width: 100%;
	}
	.accordion-pic-multimobilitaet,
	.accordion-pic-intermobilitaet,
	.accordion-pic-spnv,
	.accordion-pic-oepnv,
	.accordion-pic-ondemand,
	.accordion-pic-sharing {
		margin-top: 10px;
	    display: -webkit-box;
	    display: -ms-flexbox;
	    display: flex;
	    -webkit-box-pack: center;
	        -ms-flex-pack: center;
	            justify-content: center;
	}
	.accordion-pic-multimobilitaet img {
		width: 70%;
	}
	.accordion-pic-oepnv img,
	.accordion-pic-intermobilitaet img,
	.accordion-pic-sharing img,
	.accordion-pic-spnv img,
	.accordion-pic-ondemand img {
		width: 95%;
	}
	.mass-pic {
		width: 100%;
		border: 1px solid #0c2e82;
	}
	.show-map,
	.show-info {
		cursor: pointer;
		text-decoration: underline;
	}
	.show-map:hover,
	.show-info:hover  {
		text-decoration: none;
	}

	.karte-velorouten {
		width: 100%;
		margin-bottom: 10px;
	}

	.legende-velorouten {
		width: 85%;
		margin-top: 10px;
	}

/* Logos */
/* -------------------------- */
/* logos-modal-kontakt */
	.logo-lka-kontakt img {
		float: right;
		width: 175px;
		background-color: white;
	}
	.wappen img {
		position: absolute;
		bottom: 35px;
		right: 20px;
		float: right;
		width: 130px;
	}

/* Beteiligungsseiten
------------------------------------*/
	.dialog-login-tile {
/*		border-top: 1px solid darkgrey;
		border-bottom: 1px solid darkgrey;*/
		background-color: #d43047;
		margin-top: 15px;
		padding: 15px;
		color: #fff;
	}
	.dialog-login-tile h1 {
		color: #fff;
	}
	.dialog-login-btn {
		text-align: right;
		padding: 0;
	}
	.dialog-logout-tile {
		background-color: #d43047;
		margin-top: 15px;
		padding: 15px;
		color: #ffffff;
	}
	.dialog-logout-tile h1 {
		color: #ffffff;
		font-size: 1.3rem;
		text-transform: none;
	}
	.dialog-logout-btn {
		text-align: right;
		padding: 0;
	}
	.dialog-tile-img {
		width: 100%;
	}
	.dialog-wrap {
		position: relative;
		-webkit-transition: 0.5s;
		-o-transition: 0.5s;
		transition: 0.5s;
		background-color: #E9E9E9;
		min-height: 725px;
		padding-bottom: 50px;
	}
	.dialog-wrap:hover {
		-webkit-box-shadow: 2px 2px 10px rgba(0,0,0,0.3);
		        box-shadow: 2px 2px 10px rgba(0,0,0,0.3);
		-webkit-transition: 0.5s;
		-o-transition: 0.5s;
		transition: 0.5s;
		background-color: #e0e0e0;
	}
	.dialog-tile {
		width: 100%;
		padding: 15px;
	}
	.dialog-tile h1,
	.dialog-login-tile h1 {
		font-size: 1.3rem;
		line-height: 30px;
		margin: 0px 0 10px 0;
		text-transform: none;

	}
	.dialog-tile h2 {
		margin-top: 10px;
		margin-bottom: 20px;
		color: #373737;
		font-size: 1.3rem;
		line-height: 30px;
		margin: 0px 0 10px 0;
		font-weight: normal;
	}
	.dialog-link:hover {
		text-decoration: none;
	}
	.dialog-fa {
		margin-right: 8px;
	}
	.dialog-hinweis {
		background-color: #E9E9E9;
		border: 1px solid #C2C2C2;
		padding: 15px;
		margin-bottom: 20px;
		box-shadow: 0px 3px 3px 0px rgba(0,0,0,0.2);
	}

/* Header */
	p.header {
		font-size: 16px;
		font-weight: bold;
	}

/* Progressbar */
	.progress-wrap {
		padding: 0 0 10px 0;
	}
	.progress {
		background-color: #E9E9E9;

	}
	.progress-bar {
		background-color: #d43047;
		font-size: 14px;
	}

/* Fragen */
	.wrap {
		background-color: white;
		padding: 10px;
		min-height: 600px;
		/*font-size: 15px;*/
	}
	section.question {
		border-top: 1px solid #14394b;
		padding: 0;
	}
	article.question {
		padding-top: 15px;
		padding-bottom: 15px;
	}
	p.question {
		margin: 5px 0 5px 0;
	}
	fieldset {
		background-color: #E9E9E9;
		padding-top: 10px;
		padding-bottom: 10px;
	}
	.show-info {
		cursor: pointer;
		color: #14394b;
	}

/* Label */
	label {
		cursor: pointer;
		margin: 5px 5px 5px 5px;
	}

/* Inputfelder */
	input[type="text"],
	input[type="password"],
	select {
		border: 1px solid #CCCCCC;
		font-family: Arial, Helvetica, sans-serif;
		font-size: 18px;
		margin: 5px 0px 5px 0px;
		padding: 0.3em;
		border-radius: 0.25rem;
		color: #383737;
		background-color: white;
		height: 40px;
	}
	input[type="text"]:focus,
	input[type="password"]:focus,
	select:focus,
	input[type="text"]:hover,
	input[type="password"]:hover,
	select:hover {
		-webkit-box-shadow: 0px 0px 5px 1px #14394b;
		        box-shadow: 0px 0px 5px 1px #14394b;
		outline: none;
	}
	.ip-select-max {
		width: 100%;
	}
	.ip-txt-max {
		width: 100%;
	}
	.ip-txt-xl {
		width: 80%;
	}
	.ip-txt-lg {
		width: 60%;
	}
	.ip-txt-md {
		width: 40%;
	}
	.ip-txt-sm {
		width: 25%;
	}
	.img-pulldown {
		height: 20px;
	}
	.verbindungen {
		padding-bottom: 15px;
	}
	.lable-verbindung {
		display: inline-block;
		min-width: 45px;
	}
	.h-verbindungen {
		padding: 15px 0 15px 0;
		font-weight: bold;
	}
	.select-startziel{
		width: 80%;
	}
	.verbindung-andere-txt {
		height: 30px;
		width: 80%;
		font-size: 16px;
		margin-left: 50px !important;
		padding-left: 10px !important;
	}
	span.hhb-4 {
		display: inline-block;
		min-width: 320px;
	}

/* Kommentarfelder */
	textarea {
		border: 1px solid #CCCCCC;
		/*font-size: 14px;*/
		height: 100px;
		width: 100%;
		padding: 0.5em;
		color: #383737;
	}
	textarea:hover,
	textarea:focus {
		-webkit-box-shadow: 0px 0px 5px 1px #14394b;
		        box-shadow: 0px 0px 5px 1px #14394b;
		outline: none;
	}
/* Pulldown Map */
	.pd-map {
		width: 100%;
	}

/* Button */
	.btn {
		margin-top: 10px;
		border-radius: 25px;
	}
	.btn-login {
		padding-right: 25px;
		padding-left: 25px;
	}
	section.button {
		text-align: right;
		border-top: 1px solid #14394b;
		/*margin: 0 10px 0 10px;*/
		padding-top: 5px;
		padding-bottom: 5px;
	}
	.btn-primary,
	.btn-warning {
		color: #fff;
		background-color: #4b4b48;
		border-color: #4b4b48;
/*		border-radius: 20px;*/
	}

/* aktiver/gedrückter Zustand überschreiben */
	.btn-primary:not(:disabled):not(.disabled):active,
	.btn-primary.active,
	.show > .btn-primary.dropdown-toggle {
	  background-color: #d43047;
	  border-color: #d43047;
	}
	.btn-primary:focus,
	.btn-primary:active:focus,
	.btn-primary.active:focus,
	.show > .btn-primary.dropdown-toggle:focus {
	  border-color: #d43047;
	  -webkit-box-shadow: 0 0 0 0.2rem rgba(230,0,0,0.1);
	          box-shadow: 0 0 0 0.2rem rgba(230,0,0,0.1);
	}
	.btn-primary:hover,
	.btn-primary:focus {
		outline: none;
		color: #d43047;
		background-color: #fff;
		border-color: #d43047;
	}
	.btn-primary:active {
		color: #fff;
		background-color: #919190;
		border-color: #919190;
	}
	.btn-warning:hover  {
		outline: none;
		color: #d43047;
		background-color: #fff;
		border-color: #d43047;
	}
	.btn-warning:focus  {
		color: #ffffff;
		background-color: #E50032;
	}
	.btn-danger {
		color: #fff;
		background-color: #d43047;
		border-color: #d43047;
/*		border-radius: 20px;*/
	}
	.btn-danger:hover {
		outline: none;
		color: #d43047;
		background-color: #fff;
		border-color: #d43047;
	}
/* Dialog "link-button" */
	.dialog-btn {
	    position: absolute; 			/* in Relation zu .dialog-wrap */
	    left: 50%; 						/* horizontale Zentrierung */
	    -webkit-transform: translateX(-50%);
	        -ms-transform: translateX(-50%);
	            transform: translateX(-50%); 	/* horizontale Zentrierung */
	    bottom: 25px;
	    width: 210px;
	    padding: 8px;
	    border: 1px solid #4b4b48;
	    font-size: 1rem;
	    text-align: center;
	    border-radius: 25px;
	    color: #FFF;
	    background-color: #4b4b48;
	    border-color: #4b4b48;
	    text-decoration: none;
	    -webkit-transition: 0.3s;
	    -o-transition: 0.3s;
	    transition: 0.3s;
	}
	.dialog-btn:hover {
		color: #d43047;
		background-color: #fff;
		border-color: #d43047;
		text-decoration: none;
		-webkit-transition: 0.3s;
		-o-transition: 0.3s;
		transition: 0.3s;
		outline: none;
	}
	.dialog-btn:focus {
		color: #d43047;
		background-color: #fff;
		border-color: #d43047;
		text-decoration: none;
		-webkit-transition: 0.3s;
		-o-transition: 0.3s;
		transition: 0.3s;
		outline: none;
	  	-webkit-box-shadow: 0 0 0 0.2rem rgba(230,0,0,0.1);
	  	        box-shadow: 0 0 0 0.2rem rgba(230,0,0,0.1);
	}

/* Dialog "allow-osm" */
	.btn-allow-osm {
		display: block;
		margin-top: 20px;
		margin-left: auto;
		margin-right: auto;
		width: 200px;
		padding: 8px;
		border: 1px solid #919190;
		font-size: 1rem;
		text-align: center;
		border-radius: 25px;
		color: #fff;
		background-color: #d43047;
		border-color: #d43047;
		text-decoration: none;
		-webkit-transition: 0.3s;
		-o-transition: 0.3s;
		transition: 0.3s;
	}
/* Formularvalidierung
------------------------------------*/
/* Hauptformular */
	.meldung-invalid {
		color: #d43047;
		text-align: center;
		border: 1px solid;
		padding: 5px 0 5px 0;

	}
	#meldung-invalid {
		border-top: 1px solid #14394b;
		padding: 10px 0 10px 0;
	}
	.invalid {
/*		border: 1px solid #14394b;*/
		-webkit-box-shadow: 0px 0px 3px 1px #E50032;
		        box-shadow: 0px 0px 3px 1px #E50032;
	}
	.invalid-select,
	.invalid-textfeld {
		border: 2px solid #d43047;
	}
	.invalid-login {
		display: none;
		text-align: center;
		color: #fff;
		border: 1px solid;
		margin-top: 10px;
		padding: 5px 15px 5px 15px;
	}
	.invalid-marker,
	.invalid-input-text,
	.invalid-input-text-edit {
		display: none;
		text-align: center;
		color: #c30c0e;
		border: 1px solid;
		margin-top: 10px;
		padding: 5px 15px 5px 15px;
	}
	.red {
		color: #c30c0e;
	}
	.fs-invalid {
		border-left: 5px solid #d43047;
		padding: 11px;
	}

/* Login Gemeindebefragung */
	.login {
		text-align: center;
		width: 120px;
		border-radius: 5px 0 0 5px !important;
	}
	.input-group-pssw {
		margin-top: 5px;
		margin-bottom: 10px;
	}
	.btn-input-group-pssw {
		margin-top: 5px;
		height: 40px;
		border-left: none;
		border-radius: 0 5px 5px 0;
		cursor: pointer;
	}
	.meldung-invalid-login {
		color: #fff;
		text-align: center;
		border: 1px solid #fff;
		padding: 5px 0 5px 0;
	}

/* Info und Tooltips
------------------------------------*/
	.info {
		cursor: pointer;
	}
	.fa-info-circle {
		font-size: 1rem;
		color: #d43047;
	}
	.info-text {
		text-decoration: underline;
		color: #007bff;
		font-weight: bold;
	}
	.info-text:hover {
		text-decoration: none;
	}
	.tooltip-inner {
		font-size: 18px;
		text-align: left;
		color: white;
		background-color: #d43047;
	}

/* Leaflet
------------------------------------*/
/* Map-Getters */
	.getters-check-area {
		text-align: right;
		display: none;
	}
	.getters {
		padding: 2px 10px 2px 2px;
	 	background-color: rgba(255, 255, 255, 0.6);
	}
	.pd-zoom-ortsteil {
		display: block;
		z-index: 10;
		padding: 5px 5px 0 5px;
		position: absolute;
		right: 0px;
		top: 0px;
	}
	.map-wrap {
		margin: -10px -15px 10px -15px;
	}
	#map {
		height: 550px;
		width: 100%;
		z-index: 9;
	}
	.map-button {
		position: absolute;
		width: 35px;
		height: 35px;
		border: 2px solid rgba(0,0,0,0.2);
		border-radius: 4px;
		background-color: #f4f4f4;
		z-index: 10;
		color: black;
		cursor: pointer;
		font-size: 22px;
		text-align: center;
	}
	.map-button:hover {
		color: #BA0000;
		background-color: #ffffff;
	}
	.map-button:active {
		color: black;
	}
	#map-edit {
		height: 300px;
		width: 100%;
		z-index: 9;
	}
	.map-wrap,
	#map {
		height: 550px;
	}
/* Allow OSM */
	.allow-osm-info {
		position: absolute;
		background-image: url(../images/placeholder_osm_map.png);
		background-position: center top;
    	background-size: auto 100%;
		height: 100%;
		width: 100%;
		padding: 25px;
		color: #fff;
		z-index: 11;
	}
	.link-allow-osm {
		color: #ffffff;
	}
	.link-allow-osm:hover {
		color: #ffffff;
		text-decoration: underline;
	}

/* Leaflet-Popup */
	.leaflet-popup-content-wrap {
	    /*background: orange;*/
	    color: #333;
	    -webkit-box-shadow: 0 3px 14px rgba(0,0,0,0.4);
	            box-shadow: 0 3px 14px rgba(0,0,0,0.4);
	    padding: 1px;
	    border-radius: 5px;
	    min-width: 240px;
	}
	.leaflet-popup-content {
	    text-align: left;
		font-size: 16px;
	}
	.leaflet-popup-content h1 {
		font-size: 16px;
		margin: 0;
		padding: 10px 20px 10px 20px;
		background-color: #669933;
		color: white;
		margin: -14px -20px 10px -20px;
		border-radius: 4px 4px 0 0;
		text-transform: none;
		font-weight: normal;
	}
	.leaflet-popup-content h2 {
		font-weight: bold;
		font-size: 16px;
		margin: 0;
		padding: 10px 20px 10px 20px;
		background-color: white;
		color: #383737;
		margin: -14px -20px 0 -20px;
	}
	.leaflet-popup-content p {
		margin:	0;
		padding: 0 0 5px 0;
	}
	.leaflet-popup-content h1.start {
		background-color: #f2921a;
	}
	.leaflet-popup-content h1.ziel {
		background-color: #e31519;
	}
	.leaflet-popup-content h1.delroute {
		background-color: #DD0707;
	}
	.leaflet-popup-content h1.default {
		background-color: #828282;
	}
	.leaflet-popup-content h1.radverkehr {
		background-color: #008000;
	}
	.leaflet-popup-content h1.fussverkehr {
		background-color: #009800;
	}
	.leaflet-popup-content h1.auto {
		background-color: #ff0000;
	}
	.leaflet-popup-content h1.bus {
		background-color: #99ccff;
	}
	.leaflet-popup-content h1.bahn {
		background-color: #000066;
	}
	.leaflet-popup-content h1.emobilitaet {
		background-color: #ff9900;
	}
	.leaflet-popup-content h1.parken {
		background-color: #ffcc00;
	}
	.leaflet-popup-content h1.sonstiges {
		background-color: #828282;
	}

/* Beteiligung Städte und Gemeinden	*/
	.leaflet-popup-content h1.default-v {
		background-color: #14394b;
	}
	.leaflet-popup-content h1.default-p {
		background-color: #67A5D6;
	}

	.leaflet-container a.leaflet-popup-close-button {
	    position: absolute;
	    top: 10px;
	    right: 10px;
	    padding: 4px 4px 0 0;
	    border: none;
	    text-align: center;
	    width: 24px;
	    height: 24px;
	    font-size: 20px;
	    font-weight: normal;
	    color: white;
	    text-decoration: none;
	    font-weight: bold;
	    background: transparent;
	}
	.leaflet-container a {
		color: #14394b;
	}
	.link-edit-marker {
		position: absolute;
		bottom: 10px;
		right: 15px;
		font-size: 14px;
		color: #14394b;
		cursor: pointer;
		-webkit-transition: 0.3s;
		-o-transition: 0.3s;
		transition: 0.3s;
	}
	.link-edit-marker:hover {
		text-shadow: 0px 20px 20px 0px rgba(0,0,0,0.3);
		cursor: pointer;
		opacity: 0.6;
		-webkit-transition: 0.3s;
		-o-transition: 0.3s;
		transition: 0.3s;
	}
	.popup-content-text {
		padding-bottom: 25px;
	}

/* Custom Chekboxen
------------------------------------*/
/* Custom Checkbox – technisch wie Radio (barrierefrei) */
input[type="checkbox"].custom-checkbox {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	-webkit-clip-path: inset(50%);
	        clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* Label mit Platz für Kästchen links */
input[type="checkbox"].custom-checkbox + label {
	position: relative;
	display: block;
	padding-left: 28px; /* 18px + ~10px Abstand */
	line-height: 1.6;
	cursor: pointer;
}

/* das Kästchen */
input[type="checkbox"].custom-checkbox + label::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.2em;
	width: 18px;
	height: 18px;
	border-radius: 0; /* quadratisch */
	border: 1px solid #898989;
	background-color: #ffffff;
	transition: background-color 0.1s, box-shadow 0.1s;
}

/* Hover / Fokus */
input[type="checkbox"].custom-checkbox:hover + label::before,
input[type="checkbox"].custom-checkbox:focus-visible + label::before,
input[type="checkbox"].custom-checkbox:focus + label::before { /* Fallback */
	background: #CDCDCD;
	box-shadow: inset 0 0 0 3px #ffffff;
}

/* Checked */
input[type="checkbox"].custom-checkbox:checked + label::before {
	background: #14394b;
	border-color: #14394b;
	box-shadow: inset 0 0 0 3px #ffffff;
}

/* Checked + Hover/Fokus */
input[type="checkbox"].custom-checkbox:checked:hover + label::before,
input[type="checkbox"].custom-checkbox:checked:focus-visible + label::before,
input[type="checkbox"].custom-checkbox:checked:focus + label::before { /* Fallback */
	background: #14394b;
	box-shadow: inset 0 0 0 3px #ffffff, 0 0 3px #14394b;
}


/* Custom Radiobutton – mit hängendem Einzug
------------------------------------------------*/
	input[type="radio"].custom-radio {
		position: absolute;
		width: 1px;
		height: 1px;
		padding: 0;
		margin: -1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		-webkit-clip-path: inset(50%);
		      clip-path: inset(50%);
		white-space: nowrap;
		border: 0;
	}

/* Label bekommt Platz links -> hängender Einzug */
	input[type="radio"].custom-radio + label {
		position: relative;
		display: block;
		padding-left: 28px;   /* 18px Kreis + ~10px Abstand */
		line-height: 1.6;
		cursor: pointer;
	}

/* der „Kringel“ */
	input[type="radio"].custom-radio + label::before {
		content: "";
		position: absolute;
		left: 0;
		top: 0.2em;
		width: 18px;
		height: 18px;

	/* border-radius (mit Prefixes) */
		-webkit-border-radius: 50%;
		   -moz-border-radius: 50%;
			    border-radius: 50%;

		border: 1px solid #898989;
		background-color: #ffffff;

	/* Transition (mit Prefixes) */
		-webkit-transition: background-color .1s, -webkit-box-shadow .1s;
		 -moz-transition: background-color .1s,    -moz-box-shadow .1s;
		   -o-transition: background-color .1s,           box-shadow .1s;
		      transition: background-color .1s,           box-shadow .1s;
	}

/* Hover & Fokus */
	input[type="radio"].custom-radio + label:hover::before,
	input[type="radio"].custom-radio:focus-visible + label::before,
	input[type="radio"].custom-radio:focus + label::before { /* Fallback */
		-webkit-box-shadow: inset 0 0 0 3px #ffffff;
		 -moz-box-shadow: inset 0 0 0 3px #ffffff;
		      box-shadow: inset 0 0 0 3px #ffffff;
		background: #CDCDCD;
}

/* Checked */
	input[type="radio"].custom-radio:checked + label::before {
		-webkit-box-shadow: inset 0 0 0 3px #ffffff;
		 -moz-box-shadow: inset 0 0 0 3px #ffffff;
		      box-shadow: inset 0 0 0 3px #ffffff;
		background: #14394b;
		border-color: #14394b;
}

/* Checked + Hover/Fokus */
	input[type="radio"].custom-radio:checked + label:hover::before,
	input[type="radio"].custom-radio:checked:focus-visible + label::before,
	input[type="radio"].custom-radio:checked:focus + label::before { /* Fallback */
		background: #14394b;
		-webkit-box-shadow: inset 0 0 0 3px #ffffff, 0 0 3px #14394b;
		 -moz-box-shadow: inset 0 0 0 3px #ffffff, 0 0 3px #14394b;
		      box-shadow: inset 0 0 0 3px #ffffff, 0 0 3px #14394b;
	}

/* Media-Querys
------------------------------------*/
/* Entspricht Bootstrap Extra large .col-xl */
@media only screen and (max-width: 1199px) {
	.content {
		width: 90%;
		margin-left: auto;
		margin-right: auto;
	}
}
/* Entspricht Bootstrap Large .col-lg */
@media only screen and (max-width: 991px) {
	.break-slogan {
		display: block;
	}
	.headline-slogan {
	    position: absolute;
	    line-height: 35px;
	    top: 15px;
	    left: 150px;
	    font-size: 28px;
	}
	.navbar-container {
		height: 0px;
		position: relative;
	}
	.content {
		width: 100%;
		margin-top: 50px;
	}
	.headline-wrap,
	.nav-item:last-child {
		-webkit-box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.2);
		        box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.2);
	}
	h1 {
	  font-size: 1.5rem;
	}

/* Accordeon */
	.bar {
		font-size: 1.2em;
	}
	.wrap-h-bar {
		margin-top: -32px;
	}

/* Footer */
	.footer-1-container {
		display: none;
	}
}

/* Entspricht Bootstrap Medium .col-md
----------------------------------------*/
@media only screen and (max-width: 767px) {
/* Header */
	.headline {
		height: 50px;
		font-size: 1.0rem;
		padding: 2px 0 0 110px;
	}
	.container-xl {
		margin-top: 25px;
	}
/* Grafiken	*/
	.carousel-indicators li,
	.carousel-control-prev,
	.carousel-control-next {
		display: none;
	}
	.carousel-wrap {
		display: none;
	}
/* Footer */
	.copyright {
		display: none;
	}
	.logo-lka-footer {
		position: absolute;
		left: 10px;
	}
	.footer-back {
	  display: none;
	}

/* Schriften */
	h2 {
		font-size: 1.5em;
	}

/* Accordeon */
	.bar {
		font-size: 1.0em;
	}
	.wrap-h-bar {
		margin-top: -27px;
	}
	.accordion-pic {
		width: 50%;
	}

/* Dialogeauswahl */
	.dialog-wrap {
		margin-top: 25px
	}
}

/* Entspricht Bootstrap Small .col-sm
---------------------------------------------*/
@media only screen and (max-width: 575px) {
/* Header */
	.header-colorline {
		display: block;
		height: 40px;
		background-color:#d43047;
		color: #fff;
		padding: 5px 5px 5px 20px;
		font-weight: bold;
	}
	.headline-slogan {
		display: none;
	}
	.headline-container {
		height: 90px;
	}
	.headline-logo {
		padding: 15px 15px 15px 15px;
  		height: 90px;
	}
	 .navbar-toggler {
		top: -70px;
	 }
	.container-xl {
		/*margin-top: 0;*/
	}
	.h_head {
		font-size: 24px;
	}
/* Schriften */
	h1 {
		font-size: 1.5rem;
	}
	.margin-top-20 {
		margin-top: 20px;
	}

/* Kacheln */
	div.tile a, .tile-footer {
		display: none;
	}

/* Carousel */
/*	.carousel-wrap,
	.header-icons-container {
		display: block;
	}*/

/* Footer */
	.copyright {
		padding: 15px;
		width: 100%;
		height: 25px;
		text-align: center;
	}

/* logos-modal */
	.wappen img {
		display: none;
	}
	.logo-lka-kontakt img {
		display: none;
	}

/* Formulare */
	select {
	    width: 100%;
	}
	.btn {
		width: 100%;
	}

/* Dialograum */
	.dialog-tile {
		min-height: 100px;
	}
	.legende-radnetz {
		display: block;
	}
	.legende-radnetz-map {
		display: none;
	}

	.accordion-pic {
		width: 95%;
	}
}

/* Smartphone portrait
---------------------------------------------*/
@media only screen and (max-width: 400px) {
	.header-colorline {
		display: none;
	}
	.headline-slogan {
	    display: none;
	}
	.logo-lka-footer,
	.logo-plm-footer {
	    display: none;
	}
}