/*----------------------------------------------------------*/
/*		CSS-Stylesheed - HHB Garmisch-Partenkirchen 2026			*/
/*----------------------------------------------------------*/

/* Scripte
------------------------------------*/
	@import url("../fonts/bootstrap-icons-1.8.1/bootstrap-icons.css");
	@import url("../fonts/font-awesome/5.13.0/css/all.min.css");
	@import url("../fonts/open-sans.css");

/* Etwicklung
------------------------------------*/
/* Prüfbereich für Parameter */
	.parameter-check-area {
	}

/* Leaflet-Map-Getters */
	.getters-check-area {
		position: absolute;
		top: 0px;
		z-index: 999;
		width: 100%;
		text-align: right;
	}
	.getters {
		padding: 2px 10px 2px 2px;
	 	background-color: rgba(255, 255, 255, 0.6);
	}

/* Printeinstellungen
------------------------------------*/
@media print {
  header, nav, footer, button, .no-print, .btn {
    display: none !important; /* ausblenden */
  }

  body, html {
    color: black;
    background: white;
  }

  .content {
    width: 100%;
    margin: 0;
    padding: 0;
  }

}

/* Versteckte Elemente
------------------------------------*/
	.hidden {
		display: none;
	}
	.visible {
		display: block;
	}
	.inline {
		display: inline-block;
	}
	.visible-inline {
		display: inline-block;
	}

/* Struktur Elemente
------------------------------------*/
	body,
	html {
		/*font-family: Arial, Helvetica, sans-serif;*/
		font-family: "Open Sans", Arial, Helvetica, sans-serif;
		font-size: 16px;
		line-height: 1.5;
		color: #4c5166;
	}
	body {
/*		background-image: url(../images/hintergrund.jpg);*/
		background-position: right 0 top -125px;
		background-attachment: fixed;
		background-color: #f2f2f2;
		overflow-y: scroll;
		margin: 0px;
	}
	html {
	  scroll-behavior: smooth;
	}

/* Überschriften */
	h1, .h1 {
	  font-size: 26px;
	  margin-top: 10px;
	  margin-bottom: 20px;
	  color: #008fcf;
/*	  font-weight: bold;*/
	}

	h2 {
		font-size: 16px;
		line-height: 1.5;
		color: #008fcf;
		font-weight: bold;
	}
	h3 {
		font-size: 16px;
		line-height: 1.5;
		font-weight: bold;

	}
/*	.protokoll h1  {
		font-size: 1.3em;
		margin-bottom: 10px;
	}*/

/* Header-Icons */
	.header-icons-container {
		height: 60px;
		padding: 0.25%;
		background-color: #008fcf;
		text-align: center;
	}
	.header-icons-wrap {
		max-width: 1140px;
		margin-left: auto;
		margin-right: auto;
	}
	.header-icons {
/*		width: 100%;*/
		height: 50px;
	}
/* Headline */
	.header-colorline {
		display: none;
	}
	.headline-container {
		position: relative;
		top: 0;
		width: 100%;
		height: 100px;
		z-index: 99;
		background: #fff;
	}
	.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 10px 0px 25px;
		 position: absolute;
		 left: 0px;
		 height: 80px;
	}
	.headline-slogan {
		position: absolute;
		top: 25px;
		right:0px;
		font-size: 1.9rem;
		color: #14394b;
		text-transform: uppercase;
		font-weight: bold;
		letter-spacing: 2px;
		line-height: 45px;
	}
	.txt-colored {
		color: #008fcf;
	}
	.break-slogan {
		display: none;
	}
	.no-padding {
		padding: 0;
	}
	.marked {
		text-decoration: underline;
		color: #ae0917 ;
	}

/* Navigation */
	.navbar-container {
		box-shadow: 0px 3px 3px 0px rgba(0,0,0,0.2);
		/*width: 85%;*/
		height: 60px;
		background-color: #fff;
		opacity: 0.95;
		position: sticky;
		top: 0;
		z-index: 99;
	}
	.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);*/
	}
	.bg-nav {
		background-color: #fff;
		color: white;
	}
	.navbar-nav {
		position: relative;
		z-index: 999;
	}
	.navbar-expand-lg .navbar-nav .nav-link {
	    padding: 0;
		color: #4c5166;
		border-bottom: 3px solid transparent;
		text-decoration: none;
		text-transform: uppercase;
		letter-spacing: 1px;
	}
	.nav-item {
		font-size: 1.0rem;
		padding: 15px;
		height: 60px;
	}
	.navbar-expand-lg .navbar-nav .nav-link:hover {
		color: #201a5f;
	}
	.navbar-nav .nav-link.active {
		color: #201a5f;
		font-weight: bold;
	}
	.navbar-nav .nav-link.inactive {
/*		display: none;*/
		color: #201a5f;
	}
	.navbar-expand-lg .navbar-nav .nav-link:hover {
		color: #201a5f;
	}
	.navbar-expand-lg .navbar-nav .nav-link.inactive:hover {
		background-color: #c8c8c8;
		cursor: default;
	}
	.navbar-toggler {
		border-radius: 0;
		position: absolute;
		right: 10px;
		top: -65px;
		z-index: 99;
		padding: 10px 12px;
		color: #4c5166;
/*		border: 1px solid #4c5166;
		background-color: #525151;*/
	}
	.fa-bars {
		font-size: 30px;
		color: #4c5166;
	}
	.fa-bars:hover {
		color: #7ba4a8;
	}
	.navbar-toggler-text {
		display: none;
		font-size: 17px;
		padding: 10px;
		color:#4c5166 ;
    }
	.nav-item {
		font-size: 1.0rem;
		padding: 15px;
		height: 60px;
	}

/* Navigation Headline in den Fragebögen */
	.nav-item-fragebogen {
		display: inline-block;
	    padding: 18px;
		background-color: #201a5f;
		color: #ffffff;
	}

/* Container */
	.container-xl {
		padding: 0;
	}
	.header {
/*		margin-top: 30px;*/
	}
	.aside {
		background-color: #ebebeb;
	}
	.row {
		margin: 0;
	}
	.wrapper {
		background-color: white;
		padding: 10px;
		margin-top: 35px;
		margin-bottom: 35px;
		min-height: 425px;
	}
	#o-rufzeichen {
		background: transparent url(../images/o.png) no-repeat scroll 100% 103%;
		max-width: 1680px;
		margin: 0 auto;
		padding: 30px 0;
		position: relative;
		bottom: 20px;
		right: 20px;
		height: 400px;
	}

/* Progressbar */
	.progress-wrap {
		padding: 0 10px 10px 10px;
	}
	.progress {
		background-color: #ebebeb;
	}
	.progress-bar {
		background-color: #008fcf;
		font-size: 14px;
	}

	section.question {
		border-top: 1px solid #8a8a8a;
		padding: 0;
	}
	fieldset {
		background-color: #ebebeb;
		padding-top: 10px;
		padding-bottom: 10px;
	}
	article.question {
		padding-top: 15px;
		padding-bottom: 15px;
	}
	section.button,
	section.button-protokoll {
		text-align: right;
		border-top: 1px solid #8a8a8a;
		margin: 0;
		padding-top: 5px;
		padding-bottom: 5px;
	}
		section.button-protokoll {
		text-align: right;
		border-top: 1px solid #4c5166;
		margin: 0 10px 0 10px;
		padding-top: 5px;
		padding-bottom: 5px;
	}
	section.login-button {
		text-align: right;
		border-top: 1px solid #8a8a8a;
		margin: 0;
		padding-top: 5px;
		padding-bottom: 5px;
	}

/* Footer */
	.stripelement {
		width: 181px;
    margin-top: -75px;

	}
	.footer-1-container {
		/*border-top: 1px solid rgba(255,255,255,.25);*/
		position: relative;
	    background-color:#008fcf;
	}
	.footer-1-wrap {
	  position: relative;
	  width: 100%;
	  max-width: 1140px;
	  margin: 0 auto;
	  color: white;
	  padding: 20px 0;
	}
	.footer-1-wappen {
	  position: absolute;
	  top: 30px;
	  left: 0;
	  width: 75px;
	}
	.footer-1-title {
	  margin-left: 90px;
	  margin-bottom: 10px;
	  font-size: 1.4rem;
	  font-weight: bold;
	  text-transform: uppercase;
	  letter-spacing: 0.1em;
	}
	.footer-1-line {
	  height: 1px;
	  background-color: white;
	  width: calc(100% - 90px);
	  margin-left: 90px;
	  border: none;
	}
	.footer-2-container {
		width: 100%;
		min-height: 180px;
		background-color: #fff;
		padding: 10px;
		font-size: 16px;
		color: #737373;
	}
	.footer-2-wrap {
		max-width: 1140px;
		margin-left: auto;
		margin-right: auto;
		padding-top: 10px;
	}
	footer h1 {
	  font-size: 1.3em;
/*	  text-transform: uppercase;*/
	  margin-bottom: 10px;
	  color: #008fcf;
	}
	.ul-download > li {
		margin-left: -15px;
		color: #007bbf;
	}
	.footer-3-container {
		/*border-top: 1px solid rgba(255,255,255,.25);*/
		position: relative;
	    background-color:#fff;
	}
	.footer-3-wrap {
		max-width: 1140px;
		margin-left: auto;
		margin-right: auto;
		height: 60px;
	}
	.footer-back {
		display: none;
		position: absolute;
		width: 15%;
		right: 0;
		bottom: 55px;
		content: url("../images/footer-cornor.svg");
		opacity: 0.3;
	}
	.col-trenner {
		border-left: 1px solid #e5e5e5;
	}
	.silhouette-container {
		background-color: #fff;
	}
	.silhouette-wrap {
/*		max-width: 1140px;*/
		margin-left: auto;
		margin-right: auto;
	}
	.silhouette-wrap img {
		width: 100%;
	}
	.copyright {
		text-align: left;
		padding: 20px;
		font-size: 14px;
/*		color: #fff;*/
		height: 60px;
	}
	.logo-lka-footer {
		float: right;
		height: 60px;
		padding: 7px;
		background-color: white;
	}
	footer a {
		color: #008fcf;
		text-decoration: none;
	}
	footer a:hover {
		color: #e20719;
		text-decoration: underline;
/*		transition: 0.5s;*/
		opacity: 0.8;
	}
	.fa-ul > li {
		margin-left: -15px;
		color: #008fcf;
	}
	.fa-ul a {
		color: #008fcf;
/*		opacity: 1;*/
		text-decoration: none;
	}
	.fa-ul a:hover {
		color: #e20719;
/*		opacity: 1;*/
		text-decoration: underline;
	}

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

/* Absätze
------------------------------------*/
	p.explain {
		font-weight: normal;
		margin: 5px 0 15px 0;
	}
	p.note, span.note {
		font-style: italic;
		margin: 5px 0 5px 0;
	}
	p.question {
		font-weight: normal;
		margin: 5px 0 5px 0;
	}
	.hinweis {
		font-style: italic;
		color: #ae0917;
	}

/* Listen
------------------------------------*/
	ul {
		list-style-type: square;
		padding-left: 15px;
	}
	li {
		padding-bottom: 0.2rem;
	}

/* Links
------------------------------------*/
	a {
 		color: #008fcf;
 		text-decoration: none;
 	}
	a:hover {
		color: #e20719;
/* 		-webkit-transition: 0.4s;
 		-o-transition: 0.4s;*/
/* 		transition: 0.4s;*/
 		text-decoration: underline;
 	}
	.dl-link a {
 		color: #008fcf;
 		text-decoration: none;
 	}
 	.dl-link a:hover {
 		color: #e20719;
 		text-decoration: underline;
 	}
	.btn-link a {
		color: #ffffff;
		background-color: #007bff;
		border-color: #007bff;
		text-decoration: none;
		border: 1px solid;
		cursor: pointer;
		font-family: "MetaCompPro-Bold", sans-serif;
		font-size: 12px;
		font-style: normal;
		/*margin: 0 3px 0 3px;*/
		padding: 8px 20px 8px 20px;
		/*width: 100px;*/
		font-weight: normal;
		margin: 10px;
		/*border-radius: 0.25rem;*/
	}
	.btn-link a:hover {
		color: #ffffff;
		background-color: #0069d9;
		border-color: #0062cc;
		text-decoration: none;
		box-shadow:  0px 3px 2px -2px grey;
	}

/* Stil für Links, wenn sie den Tastaturfokus erhalten */
	a:focus {
	    outline: 2px solid #201a5f;
	    box-shadow: 0 0 0 3px white;
	}
	a:focus:not(:focus-visible) { /* Tastaturstil bei Mousklick verhindern */
	  outline: none;
	  box-shadow: none;
	}

/* Grafiken
------------------------------------*/
/*	.sticky {
		top: 0;
		position: -webkit-sticky;
    	position: sticky;
    	z-index: 999;
	}*/
	.intro-pic {
		margin-bottom: 20px;
		width: 100%;
		border: 1px solid #201a5f;
		border-radius: 5px;
		box-shadow: 5px 5px 5px rgba(0,0,0,0.3);
	}

/* Fragebogenauswahl
-------------------------------------*/
	.fb-auswahl-tile-img {
		background-color: #ebebeb;
		width: 100%;
	}
	.fb-auswahl-wrapper {
		position: relative;
		margin-bottom: 25px;
		transition: 0.5s;
	}
	.fb-auswahl-wrapper:hover {
		box-shadow: 2px 2px 10px rgba(0,0,0,0.3);
		transition: 0.5s;
		background-color: #e0e0e0;
	}
	.fb-auswahl-tile {
		width: 100%;
		min-height: 225px;
		background-color: #ebebeb;
		padding: 15px;
		min-height:285px;
	}
/*	.fb-auswahl-tile-content {
		min-height: 225px;
	}*/
	.fb-auswahl-tile h1,
	.fb-auswahl-login-tile h1 {
		font-size: 22px;
		line-height: 30px;
		margin: 0px 0 10px 0;
		color: black;
	}
	.fb-auswahl-btn {
	    text-decoration: none;
	    position: absolute; 			/* in Relation zu .dialog-wrap */
	    left: 50%; 						/* horizontale Zentrierung */
	    transform: translateX(-50%); 	/* horizontale Zentrierung */
	    bottom: 25px;
	    width: 230px;
	    padding: 8px;
	}

/* Accordion (Modal)
------------------------------------*/
	.modal-header {
		background-color: #008fcf;
		color: white;
		padding-left: 20px;
	}
	.modal-header .close {
		padding-right: 20px;
		padding-left: 20px;
		font-size: 25px;
		color: white;
		opacity: 0.7;
	}
	.modal-body {
	  	padding-top: 20;
	  	padding-bottom: 0;
	}
	.modal-footer {
	  	padding-top: 10px;
	  	padding-bottom: 10px;
	}

	.h-modal-body {
	  	padding-top: 7px;
		padding-bottom: 7px;
		font-size: 18px;
	}
	.bar {
		position: relative;
		border-bottom: 1px solid black;
	  	padding-top: 7px;
		padding-bottom: 7px;
		cursor: pointer;
		width: 100%;
    	transition: 0.4s;
		text-align: left;
		font-size: 16px;
/*	  	color: #201a5f;*/
	}
	.bar-active, .bar:hover, .bar:focus {
		background-color: #008fcf;
		color: #fff;
		outline: none;
	}
	.fa-chevron-down-container {
		float: left;
		width: 30px;
	}
	.accordion .fa-chevron-down {
     	margin-left: 5px;
	    font-size: 1.0rem;
    	transition: all 0.4s ease;
    	transform: rotate(-90deg);
	}
	.accordion .open .fa-chevron-down {
		transform: rotate(0deg);
	}
	.bar-content {
		display: inline-block;
		width: 90%;
	}
	.panel {
	  padding: 12px;
	  /*background-color: #ebebeb;*/
	  /*font-size: 14px;*/
	}

/* Formularelemente
------------------------------------*/
/* Formular Header */
/* Header */
	.fb-header-question {
		font-size: 16px;
		font-weight: bold;
	}

/* Button */
	.btn {
		margin-top: 10px;
/*		border-radius: 25px;*/
		height: 40px;
	}
	.btn-primary,
	.btn-warning {
		color: #fff;
		background-color: #008fcf;
		border-color: #008fcf;
	}
	.btn-warning:hover,
	.btn-warning:focus {
		color: #fff !important;
		background-color: #CC0012 !important;
		border-color: #CC0012 !important;
	    box-shadow: 0 0 1px 1px #CC0012 !important;
	}
	.btn-warning:active {
		color: #fff !important;
		background-color: #ae0917 !important;
		border-color: #ae0917 !important;
	    box-shadow: 0 0 1px 1px #ae0917 !important;
	}
	.btn-primary:hover {
		color: #008fcf;
		background-color: #ffed00;
		border-color: #ffed00;
	  box-shadow: 0 0 1px 1px #008fcf !important;
	}
	.btn-primary:active,
	.btn-primary:focus {
		color: #008fcf;
		background-color: #ffed00 !important;
		border-color: #ffed00 !important;
	  box-shadow: 0 0 1px 1px #007330 !important;
	}
	.btn-warning:hover  {
		color: #fff;
		background-color: #E50032;
		border-color: #E50032;
	}
	.btn-login {
		width: 100px;
	}
	.btn-forward,
	.btn-backward {
		width: 80px;
	}
	.btn-danger {
		background-color: #ae0917;
		border-color: #ae0917;
	}
	.btn-danger:hover,
	.btn-danger:focus {
		background-color: #CC0012 !important;
		border-color: #CC0012 !important;
	    box-shadow: 0 0 1px 1px #CC0012 !important;
	}
	.btn-danger:active {
		color: #fff !important;
		background-color: #ae0917 !important;
		border-color: #ae0917 !important;
	    box-shadow: 0 0 1px 1px #ae0917 !important;
	}

/* Inputfelder */
	input[type="text"],
	input[type="password"],
	select {
		background-color: white;
		border: 1px solid #CCCCCC;
		border-radius: 0.25rem;
		font-family: Arial, Helvetica, sans-serif;
		font-size: 14px;
		color: #383737;
		margin: 5px 0px 5px 0px;
		padding: 5px;
	}
	select {
		padding: 7px;
	}
	input[type="text"]:focus,
	input[type="password"]:focus,
	select:focus {
		background-color: white;
		border-bottom: #201a5f 1px solid;
		box-shadow: 0 0 4px rgba(0,0,0,0.2);
		outline: none;
	}
	input[type="text"]:hover,
	input[type="password"]:hover,
	select:hover {
		background-color: white;
		border-bottom: #201a5f 1px solid;
		box-shadow: 0 0 4px rgba(0,0,0,0.2);
		outline: none;
	}
	.ip-txt-number-sm-r {
		text-align: right;
		width: 50px;
	}
	.ip-txt-sm-r {
		text-align: right;
		width: 45px;
	}
	.ip-txt-sm {
		width: 100px;
	}
	.ip-txt-md {
		width: 225px;
	}
	.ip-txt-lg {
		width: 300px;
	}
	.ip-txt-xl {
		width: 350px;
	}
	.ip-txt-xxl {
		width: 550px;
	}
	.ip-txt-max {
		width: 100%;
	}
	.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: 32px;
		border-left: none;
		border-radius: 0 5px 5px 0;
		cursor: pointer;
	}
	.break-input-txt {
		display: none;
	}

/* jQuery UI-Plugin
------------------------------------*/
/* Drop-Down-Menu Autocomlete-Plugin */
	.ui-menu .ui-menu-item-wrapper {
		padding: 1px 1em 1px .4em;
	}
	.ui-menu .ui-menu-item-wrapper.ui-state-active  {
		border: none !important;
		background-color: #4D4D4D;
	}
	.ui-widget  {
		font-size: 14px !important;
	}

/* Einzelelemente
------------------------------------*/
/* Haushaltsbogen */
	hr {
 		border-top: 2px solid white;
 		margin: 2px;
	}
	span.hhb-1 {
		display: inline-block;
		min-width: 185px;
	}
	span.hhb-2 {
		display: inline-block;
		margin-top: 5px;
	}
	span.hhb-3 {
		display: inline-block;
		min-width: 115px;
	}
	span.hhb-4 {
		display: inline-block;
		min-width: 180px;
	}
	span.hhb-5 {
		display: inline-block;
		min-width: 145px;
	}
	span.labelbefore {
		margin-right: 5px;
	}
	span.labelafter {
		display: inline-block;
		margin-left: 5px;
		min-width: 115px;
	}
	select#anzpersonen {
		width: 70px;
		text-align: center;
	}

/* Label Start/ Ziel */
	span.start,
	span.ziel {
		display: inline-block;
		min-width: 90px;
	}

	select.start-ziel-zeit	{
		width: 50px;
	}
	.input-start,
	.input-ziel {
		min-width: 260px;
	}

/* Inputfelder und Label zu Haushaltsmitgliedern */
	.pers-wrapper {
		/*background-color: #e5e6df;*/
		margin: 0 -5px 10px -5px;
		padding: 5px 10px 5px 10px;
		border-bottom: 2px solid white;
	}
	.pers-wrapper:last-child {
		border-bottom: none;
		margin-bottom: -10px;
	}
	.label-pers-zaehler,
	.label-pers-alter,
	.label-pers-status,
	.label-pers-status-sonst {
		display: inline-block;
		min-width: 140px;
	}
	.pers-alter {
		margin-right: 5px !important;
		margin-left: -4px !important;
		text-align: center;
	}
	.pers-gender {
		margin-right: 5px;
		margin-top: 0px;
		width: 200px;
	}
	.pd-pers-status {
		width: 243px;
		margin-right: 5px;
	}
	.txt-pers-status {
		width: 243px;
		margin-right: 5px;
	}


/* Übersicht Protokolle
--------------------------------------*/
	fieldset.protokoll {
		border-top: 1px solid #8a8a8a;
	}
	.protokoll h1 {
		color: black;
	}
	.protokoll-wrapper {
		padding: 10px 0 10px 0;
		border-top: 2px solid white;
	}
	.protokoll-wrapper:last-child {
		border-bottom: 2px solid white;
	}
	.protokoll-sp1 {
		display: inline-block;
		width: 120px;
		font-weight: bold;
	}
	.protokoll-sp2 {
		display: inline-block;
		width: 160px;
	}
	.protokoll-sp3 {
		display: inline-block;
		width: 140px;
	}
	.bold {
		font-weight: bold;
	}
	.nonspacing {
		white-space: nowrap;
	}

/* Kommentarfeld */
	textarea {
		border: 1px solid #CCCCCC;
		padding: 0.5em;
		width: 100%;
		color: #383737;
	}
	textarea:hover,
	textarea:focus {
		background-color: white;
		border-bottom: #201a5f 1px solid;
		box-shadow: 0 0 4px rgba(0,0,0,0.2);
		outline: none;
	}
	#anregungen, #wuensche {
		height: 150px;
	}
	.kommentar {
		height: 100px;
	}

/* Formularvaledierung
------------------------------------*/
/* Formatierungen für invalide Felder */
	fieldset.invalid {
		border-left: 4px solid #ae0917;
		padding-left: 11px;
	}
	.question-invalid {
		color: #ae0917;
	}
	.hinweis-invalid {
		color: #ae0917;
	}
	input[type="text"].invalid,
	input[type="password"].invalid,
	textarea.invalid,
	select.invalid {
		border: 1px solid #ae0917;
	}
	input[type="checkbox"].invalid + label::before {
		border: 1px solid #ae0917;
	}
	input[type="radio"].invalid + label::before {
		border: 1px solid #ae0917;
	}
	#map-wrapper-start.invalid,
	#map-wrapper-ziel.invalid {
		border-left: 4px solid #ae0917;
	}

/* Meldungsfeld */
	.meldung-invalid {
		color: #ae0917;
		padding: 15px;
		border: 1px solid #ae0917;
	}
	.meldung-invalid {
		text-align: center;
		color: #ae0917;
		border: 1px solid;
		padding: 5px 15px 5px 15px;
		margin: 15px 0 15px 0;
	}
	#meldung-invalid {
		border-top: 1px solid #8a8a8a;
	}
	#ac-meldung {
		padding: 15px;
	}
	div.meldung-i {
		display: inline-block;
		float: left;
		margin: 0 10px 0 0;
	}

/* Label */
	label {
		cursor: pointer;
		margin: 5px 5px 5px 5px;
	}
	div.center {
		text-align: center;
		padding: 10px 20px 10px 20px;
	}

/* ---------------- Baustelle ----------------- */
	div.zeile {
		/*margin: 15px 0 15px 0;*/
		padding: 4px 5px 4px 5px;
		border-bottom: 1px dotted darkgrey;
		min-height: 50px;
	}
	div.zeile:nth-child(even) {
		background-color: #E2E2E2;
	}
	div.zeile:hover, div.zeile-s:hover {
		background-color: lightblue;
	}
	/* Einzelne Zeile */
	div.zeile-s {
		padding: 4px 5px 4px 5px;
		background: #DEDDDD;
	}
	div.liste {
		display: table-cell;
		min-width: 100px;
		padding-top: 11px;
		text-align: center;
	}
	div.listentext {
		display: table-cell;
		min-width: 200px;
		padding-top: 11px;
	}

/* Info und Tooltips
------------------------------------*/
	.info {
		cursor: pointer;
	}
	.info-text {
		text-decoration: underline;
		/*color: #007bff;*/
		font-weight: bold;
	}
	.info-text:hover {
		text-decoration: none;
	}

	.tooltip-inner {
		font-size: 16px;
		text-align: left;
		color: white;
		background-color: #ae0917;
	}
	.tooltip-inner a {
		color: white;
		text-decoration: underline;
	}
	.tooltip-inner a:hover {
		text-decoration: none;
	}
	.kritisch {
		color: #DD1212;
	}
	.protokoll-kritisch {
		color: #DD1212;
	}

/* Font Awesome Stylings
------------------------------------*/
	.fa-info-circle {
	    vertical-align: middle;
	    font-size: 1.2rem;
	    margin-left: 2px;
	    color: #ae0917;
	}
	.fa-exclamation-circle {
	    font-size: 1.3rem;
	}

/* Custom Chekboxen
------------------------------------*/
	input[type="checkbox"] {
	    opacity: 0;
	}

	input[type="checkbox"].custom-checkbox + label:before {
	    content: "";
	    width: 18px;
	    height: 18px;
	    border-radius: 0px;
	    border: 1px solid #898989;
	    background-color: #ffffff;
	    display: block;
	    float: left;
	    margin: 3px 10px 4px -20px;
	    transition: background-color 0.1s, box-shadow 0.1s;
	}

	input[type='checkbox'].custom-checkbox:hover + label:before,
	input[type='checkbox'].custom-checkbox:focus + label:before {
	    background: #CDCDCD;
	    box-shadow: inset 0 0 0 3px white;
	}

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

	input[type='checkbox'].custom-checkbox:checked:hover + label:before,
	input[type='checkbox'].custom-checkbox:checked:focus + label:before {
	    background: #4c5166;
	    box-shadow: inset 0 0 0 3px #ffffff, 0 0 3px #4c5166

	}

/* Custom Radiobutton
------------------------------------*/
	input[type="radio"].custom-radio {
		opacity: 0;
	}
	input[type="radio"].custom-radio + label:before {
		content: "";
		width: 18px;
		height: 18px;
		border-radius: 50px;
		border: 1px solid #898989;
		background-color: #ffffff;
		display: block;
		float: left;
		margin: 3px 10px 4px -20px;
		transition: background-color 0.1s, box-shadow 0.1s;
	}
	input[type="radio"].custom-radio:hover + label:before,
	input[type="radio"].custom-radio:focus + label:before {
		box-shadow: inset 0px 0px 0px 3px #ffffff;
		background: #CDCDCD;
	}
	input[type="radio"].custom-radio:checked + label:before {
		box-shadow: inset 0px 0px 0px 3px #ffffff;
		background: #4c5166;
		border-color: #4c5166;
	}
	input[type='radio'].custom-radio:checked:hover + label:before,
	input[type='radio'].custom-radio:checked:focus + label:before {
	    background: #4c5166;
	    box-shadow: inset 0 0 0 3px #ffffff, 0 0 3px #4c5166;
	}


/* Weg-Tiles Wegeprotokoll
------------------------------------*/
	.weg-tile-wrapper {
		margin-left: -5px;
		margin-right: -5px;
	}
	.wp-weg-tiles {
		border-top: 1px solid #0081c7;
		padding-bottom: 5px;
	}
	.wp-weg-tiles > .weg-tile {
		background-color: #D6D6D6;
	}
	.weg-tile {
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		padding: 5px;
	}
	.weg-tile-content {
		padding: 10px 10px 10px 10px;
		background-color: #008fcf;
		box-shadow: 1px 1px 1px 1px silver;
	}
	.label-weg-tile {
		font-weight: bold;
		min-width: 60px;
		display: inline-block;
	}
	.weg-tile-edit a,
	.weg-tile-trash a {
		color: inherit;
		position: absolute;
		top: 6px;
		right: 11px;
		font-size: 1.2rem;
	}
	.weg-tile-trash a {
		top: 40px;
		right: 15px;
	}
	.weg-tile-edit a:hover,
	.weg-tile-trash a:hover {
		color: #BA0000;
	}

/* Leaflet
------------------------------------*/
	.map-wrapper {
		margin: -10px -15px 10px -15px;
	}
	#mapstart,
	#mapziel {
		height: 620px;
		width: 100%;
	}
	.map-button {
		position: absolute;
		width: 35px;
		height: 35px;
		border: 2px solid rgba(0,0,0,0.2);
		border-radius: 0;
		background-color: #f4f4f4;
		z-index: 999;
		color: black;
		cursor: pointer;
		font-size: 22px;
		text-align: center;
	}
	.map-button:hover {
		color: #BA0000;
		background-color: #ffffff;
	}
	.map-button:active {
		color: black;
	}
	#del-marker-start,
	#del-marker-ziel {
		top: 125px;
		left: 10px;
	}
/* Allow OSM */
	.allow_osm_info {
		position: absolute;
		background-image: url(../images/placeholder_osm_map.png);
		background-position: center top;
    	background-size: auto 100%;
		height: 620px;
		width: 100%;
		padding: 25px;
		color: #fff;
	}
	.btn-allow-osm {
	    position: absolute; 			/* in Relation zu .allow_osm_info */
	    left: 50%; 						/* horizontale Zentrierung */
	    transform: translateX(-50%); 	/* horizontale Zentrierung */
		width: 200px;
		padding: 7px 5px;
	}
	.link_osm {
		color: white;
	}
	.link_osm:hover{
		color: white;
		text-decoration: none;
	}

/* Cookie Disclaimer
------------------------------------*/
	.cookiedis {
		position: fixed;
		bottom: 0px;
		left: 0px;
		background-color: #3C3C3C;
		color: white;
		text-align: center;
		padding: 5px;
		width: 100%;
		z-index: 999;
		border-top: 15px solid #DA1616;
	}
	.cookiedis a {
		color: white;
	}
	.cookiedisok {
		border-top: 15px solid #2F8305;
	}
	.cookiedisCloser {
		cursor: pointer;
		margin: 10px;
		background: #DA1616;
		padding: 5px 10px;
		border-radius: 5px;
	}
	.cookiedisCloser:hover {
		background: #2F8305;
	}

/* Media Querys
------------------------------------*/
/* Entspricht Bootstrap Extra large .col-xl */
@media only screen and (max-width: 1199px) {
/* Header */
	.headline-slogan {
	    position: absolute;
	    line-height: 35px;
	    top: 45px;
	    font-size: 28px;
	}
}

/* Entspricht Bootstrap Large .col-lg */
@media only screen and (max-width: 991px) {
	.weg-tile {
		max-width: 100%;
	}
	.navbar-container {
		height: 0px;
		position: relative;
	}
	.nav-item:last-child {
		box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.2);
	}
	.wrapper {
		margin-bottom: 0px;
	}
	.header {
		margin-top: 0px;
	}
	.col-trenner {
		border:none;
	}
	.fb-auswahl-tile {
		min-height: 205px;
	}
}

/* Entspricht Bootstrap Medium .col-md */
@media only screen and (max-width: 767px) {
/* Header */
	.headline {
		height: 50px;
		font-size: 1.1rem;
		padding: 13px 0 0 65px;
	}
	.fb-auswahl-tile {
		min-height: 220px;
	}
	.hidden-767px {
		display: none;
	}

/* Entspricht Bootstrap Small .col-sm */
@media only screen and (max-width: 575px) {
	.header-colorline {
		display: block;
		height: 40px;
		background-color:#008fcf;
		font-size: 1.1rem;
		color: #fff;
		padding: 7px 5px 5px 20px;
		font-weight: bold;
		text-align: center;
	}
	.header-icons-container {
	  display: none;
	}
	.headline-slogan {
		display: none;
	}
	.headline-container {
		height: 90px;
	}
	.headline-logo {
  		height: 80px;
	}
	.break-input-txt {
		display: block;
	}
	.btn-allow-osm {
		width: 200px !important;
	}
	.fb-auswahl-btn {
	    width: 230px !important;
	}

/* Custom Chekboxen
------------------------------------*/
	input[type="checkbox"] {
	    display: none;
	}
	input[type="checkbox"].custom-checkbox + label:before {
	    margin: 3px 10px 4px -3px;
	}
/* Custom Radiobutton
------------------------------------*/
	input[type="radio"].custom-radio {
		display: none;
	}
	input[type="radio"].custom-radio + label:before {
		margin: 3px 10px 4px -3px;
	}

/* Überschriften */
	h1 {
		font-size: 1.5rem;
	}
/* Protokolle */
	.protokoll h1 {
		font-size: 1.3rem;
	}
/* Footer */
	.copyright {
		padding: 10px;
	}
/* Formulare */
	select {
	    width: 100%;
	}
	.btn {
		width: 100%;
	}
/* Fragebogen */
/* .fb-header-question {
 	font-size: 14px;
 	font-weight: normal;
 }*/
/* Inputfelder */
	.ip-txt-xl,
	.ip-txt-lg,
	.ip-txt-md {
		width: 100%;
	}
	.pers-gender {
		width: 125px;
		margin-right: 0;
	}
	.txt-pers-status {
		width: 100%;
	}
/*Wegeprotokoll	*/
	.input-start,
	.input-ziel {
		width: 100%;
	}
	.select-vm-reihenfolge {
		width: 210px;
	}
/*Haushaltsbogen*/
	.pers-gender,
	.pd-pers-status {
		width: 100%;}
	}
	span.hhb-3 {
		width: 200px;
	}