@font-face { font-family: 'Source Sans Pro';
             src: url('../includes/fonts/Source_Sans_Pro/SourceSansPro-Regular.ttf') format('truetype'); font-weight: normal; font-display: swap; }
@font-face { font-family: 'Source Sans Pro';
             src: url('../includes/fonts/Source_Sans_Pro/SourceSansPro-Italic.ttf') format('truetype'); font-weight: normal; font-style: italic; font-display: swap; }
@font-face { font-family: 'Source Sans Pro';
             src: url('../includes/fonts/Source_Sans_Pro/SourceSansPro-SemiBold.ttf') format('truetype'); font-weight: bold; font-display: swap; }
@font-face { font-family: 'Source Sans Pro';
             src: url('../includes/fonts/Source_Sans_Pro/SourceSansPro-SemiBoldItalic.ttf') format('truetype'); font-weight: bold; font-style: italic; font-display: swap; }


* {box-sizing: border-box;}

/*body, html {height: 100%;}*/
body {
	margin: 0;
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 16px;
  font-weight: normal;
  background: #fff;
  color: #000;
  overflow-y: auto; /* muss gesetzt werden, damit die modals später entsprechend den Wert ändern können auf 'clip'. Verhindert dann, dass der body scrollt, während ein modal offen ist. */
}

body.body-with-margin { margin: 2rem; }

address, dl, fieldset, figure, ol, pre, ul {
	margin: 0 0 auto 0;
}
fieldset { margin-bottom: .5rem; }

#welcometext ul { margin-bottom: 1rem; }

img {max-width: 100%;}

img#logo-ile-h-i {width: 100%; max-width: 535px;}

p { margin-top: 0; }
.normal { font-weight: normal; }
.hinweis-rot { color: red; }
.checkbox-rot { outline-color: red; }

.indented { padding-left: 1rem; }

.centered { text-align: center; }

a {
	color: #333;
	text-decoration: none;
}
a:hover { color: #000; }
a.imglink { line-height: 0; display: block; }
a.underlined { text-decoration: underline; }

hr.section { margin: 24px 0; border-color: white; border-top: 1px solid #d9d9d9; }

h1, h2, h3, h4 {
	color: #333;
	margin-top: 0;
	font-weight: bold;
}

h1 { font-size: 2.125rem; margin-bottom: 0.5rem; }
h2 { font-size: 1.375rem; margin-bottom: 1rem; }
h3 { font-size: 1.2rem; margin-bottom: 1rem; }

.clear_left { clear: left; }
.clear_both { clear: both; }
.width_auto { width: auto; }
.width_115 { width: 115px; }
.bg_white { background-color: white; }
.bg_gray { background-color: #666666; }
.text_right { text-align: right; }
.text_centered { text-align: center; }
.text_white { color: white; }
.text_black { color: black; }
.text_red { color:red; }
.red_bold { color:red;font-weight:bold; }
.padding_0 { padding: 0; }
.padding_top_20 { padding-top: 20px; }
.m_top_0 { margin-top: 0; }
.m_top_14 { margin-top: 14px; }
.m_left_20 { margin-left: 20px; }
.m_left_1rem { margin-left: 1rem; }
.m_bottom_0 { margin-bottom: 0; }
.m_bottom_100 { margin-bottom: 100px; }
hr.m_30_0 { margin: 30px 0; }
.mitarb_kont { width: 240px; }
.mitarb_text { width: 600px; }
.valign_texttop { vertical-align: text-top; }
.intromap_preview { width:140px; height:auto; }
.no_flex_shrink { flex-shrink: 0; }

/* LINKS UND BUTTONS */

.buttons-container {
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
}
.buttons-container div { flex-basis: 48%; }
.buttons-container.threecols div { flex-basis: 32%; flex-grow: 1; margin: 1px; }

h2.bg_coloured a,
div.bg_coloured a,
li.bg_coloured a {
	background-color: #F6C800 !important;
	padding: 4px 12px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}

h2.bg_coloured a { width: 300px; }
div.bg_coloured a { width: 300px; }
li.bg_coloured a { width: auto; margin-left: 0; margin-right: 10px; }

h2.bg_coloured a:hover { background-color: #F69F30; color: #000; }
div.bg_coloured a:hover { background-color: #F69F30 !important; color: #000; }
li.bg_coloured a:hover { background-color: #F69F30 !important; color: #000; }

button, input { font-family: 'Source Sans Pro', sans-serif; }

button,
a.button,
a.button-coloured,
a.button-gray,
input[type="submit"] { 
	cursor: pointer; 
	display: inline-block;
	padding: .5em 1em;
	margin: auto auto 2px auto;
	color: white;
	font-size: 1.2rem;
	font-weight: bold;
	border: 0;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
}

a.button-gray.active {
	background-color: #d9d9d9;
}
a.button-gray.active::before {
	content: "✅ ";
}

button,
a.button,
input[type="submit"] { background-color: #31a53a; }

button:hover,
a.button:hover,
input[type="submit"]:hover { background-color: #235a23; color: #fff; }

button.coloured,
a.button-coloured,
input[type="submit"].coloured { background-color: #F6C800; color: black; }

button.coloured:hover,
a.button-coloured:hover,
input[type="submit"].coloured:hover { background-color: #F69F30; color: #000; }

button.gray,
a.button-gray,
input[type="submit"].gray { background-color: #eeeeee; color: #000; font-weight: bold; }

button.gray:hover,
a.button-gray:hover,
input[type="submit"].gray:hover { background-color: #d9d9d9; color: #000; }

button[id^="weiter"] { margin: auto .5rem 2px .5rem; }
p.button_send { text-align: left; }

input[type="submit"]#weiter7 {
	font-size: 18px;
	padding: 8px;
}

#umfrage input[type="submit"] { font-family: "Source Sans Pro"; font-size: 1.2rem; margin: 2rem auto; font-weight: bold; }
#menu ul li a { display: inline-block; }
input[type="submit"]#spaeter,
#menu ul li a { 
	margin: 0 auto; 
	padding: 0.2rem 1rem; 
	background-color: #eee; 
	font-size: 1rem;
	color: #000; 
	border: 0;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px; 
}
#umfrage input[type="submit"]#spaeter:hover,
#menu ul li a#helplink1:hover { background-color: #d9d9d9; }

/*
input[type="submit"] {
	background-color: #f6c800;
	border: 0;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	padding: 4px 12px;
	margin-right: 16px;
	font-size: 14px;
	color: #338233;
	cursor: pointer;
	margin-bottom: 14px;
	margin-top: 10px;
}

input[type="submit"]:hover { background-color: #F69F30; color: #000; }
*/

div.coloured {
	background-color: #F6C800;
	padding: 8px 12px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	color: #000;
	font-size: 14px;
}

.color_0 { color: #ea9b2e; }
.color_1 { color: #7E197F; }
.color_2 { color: #E3001B; }
.color_3 { color: #63B56D; }
.color_4 { color: #334A96; }
.color_5 { color: #F6C800; }
.color_6 { color: #7C1317; }
.color_7 { color: #333333; }
.color_8 { color: #3abfff; }

.bgcolor_0 { background-color: #ea9b2e; }
.bgcolor_1 { background-color: #7E197F; }
.bgcolor_2 { background-color: #E3001B; }
.bgcolor_3 { background-color: #63B56D; }
.bgcolor_4 { background-color: #334A96; }
.bgcolor_5 { background-color: #F6C800; }
.bgcolor_6 { background-color: #7C1317; }
.bgcolor_7 { background-color: #333333; }
.bgcolor_8 { background-color: #3abfff; }
.bgcolor_default { background-color: #31a53a; }

.sectiondata {display: none;}


/**** HEADER ****/

#header,
#header-fixed {
	width: 100%;
	height: auto;
	margin: auto;
	overflow: auto;
	background-color: #fff;
}

#header-fixed {
	position: fixed;
	z-index: 50;
}

#header-top {
	display: flex;
	flex-flow: row nowrap;
	text-align: left;
	padding: 12px 12px 4px 12px;
	overflow: hidden;
	background-color: #fff;
}

.logo-top,
.logo-top-right {
	flex-shrink: 0;
	height: 78px;
	line-height: 0;
}

.logo-top {
	flex-basis: 100px;
}
.logo-top-right {
	flex-basis: 200px;
}

.logo-ale {float: right;}

img.header-logo {
	margin: 0 20px 0 0;
	width: 78px;
	height: auto;
}

.header-right {
	display: flex;
	flex-direction: column;
	flex-grow: 3;
	justify-content: space-between;
}

.header_flexrow {
	display: flex;
	flex-flow: column;
}

h1.header-top-title
{
	font-weight: bold;
	font-size: 1.5rem;
	color: #333;
	max-width: 80%;
	margin-bottom: 0;
	flex: 1 1 75%;
}

.prozent_abgeschlossen { flex: 1 1 20%; align-self: flex-end; text-align: right; }
#prozent_abgeschlossen_val {}

.progress {
	width: 100%;
	height: 8px;
	background-color: #cccccc;
	margin-top: 3px;
}

#progressbar { width: 0; height: 8px; background-color: #00cd00; }
#progressbar.fullwidth { width: 100% !important; }


/****  MAIN ELEMENTS FLEX AND SIZES ****/

#content-wrapper {
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	min-height: 400px;
	margin: 0 auto;
	padding: 0 0 5rem 0;
}

#menu, 
#content,
#header-top { width: 100%; max-width: 1140px; margin: 0 auto; }
#menu { width: 100%; min-width: 260px; background-color: #fff; }



/**** CONTENT ****/


#content_wide {
	text-align: left;
	padding: 1em;
	margin: 40px 0 0 0;
	height: auto; 
	width: 100%;
}

#content { 
	text-align: left;
	padding: 12px;
}
.fragebogen { padding: 0 !important; }

.flex-welcome {
	display: flex;
	flex-direction: row;
}
.flex-welcome > #img_welcometext {
	flex-shrink: 0;
	width: auto;
}
.flex-welcome > #img_welcometext figure { width: 100%; }
.flex-welcome > #welcometext {
	padding: 0;
}


.login_user {
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
	margin-top: 1rem;
}
.hinweis-bedingungen,
.login_user #spalte1,
.login_user #spalte2,
.login_user #spalte-full {
	flex-basis: 100%;
	border: 1px solid #ccc;
	padding: 14px;
	margin-bottom: 1rem;
	text-align: center;
}
.login_user #spalte1 button { margin-bottom: .5rem; }
.login_user #spalte1 button:first-child { margin-bottom: 1rem; }

.hinweis-bedingungen { margin-top: 1rem; }

.label-login { display: inline-block; width: 140px; }



#icons-collage {
	float: right;
	padding: 0 50px;
}
#icons-collage #img1 { margin-left: 0px; margin-bottom: 10px; }
#icons-collage #img2 { margin-left: 15px; margin-bottom: 10px; }
#icons-collage #img3 { margin-left: 20px; margin-bottom: 10px; }
#icons-collage #img4 { margin-left: 10px; margin-bottom: 10px; }
#icons-collage #img5 { margin-left: 0px; margin-bottom: 10px; }
#icons-collage #img6 { margin-left: 15px; margin-bottom: 10px; }

img#gemeindefoto { width: 100%; height: auto; }


/* MENU UND LEGENDE */

p.menu_text { clear: left; margin: 4px 0 0 6px; }


#x-close-wrapper { text-align: right; margin-top: 1em; }
a#x-close { text-decoration: none; font-family: mono-space; padding: .1em .3em; background-color: #fff; width: 3em; height: 3em; margin-right: 0.5em; font-size: 2.5em; border: 1px solid #000; }
a#x-close:hover { text-decoration: none; }

#legende-mobile-view {
	position: fixed;
	top: 0;
	left: -100vw;
	z-index: 10000;
	width: 100vw;
	min-height: 23em;
	padding: 0 1rem;
	border-bottom: 1px solid #000;
	background-color: rgba(255,255,255,0.9);
	transition: left .5s;
}

#legende {
	padding-left: 15px;
	padding-top: 10px;
}

.li-icon-hilfe { padding-top: 20px; }
.li-icon-hilfe img { margin-bottom: 100px; }

#fragebogen-intro {
	display: flex;
	flex-flow: row wrap;
	align-items: center;
	padding: 50px 50px 50px 100px;
}
#fragebogen-intro div { flex-basis: 100%; }
@media screen and (min-width: 860px){
	#fragebogen-intro div { flex-basis: 50%; }
	#fragebogen-intro div.fullwidth { flex-basis: 100%; padding-top: 25px; }
}

.fragebogen-hilfe {
	display: flex;
	flex-flow: row wrap;
	align-items: flex-start;
	padding: 0 12px 50px 12px;
}
.fragebogen-hilfe div { flex-basis: 100%; }
.fragebogen-hilfe .list_bewertung { padding-bottom: 25px; }
@media screen and (min-width: 860px){
	.fragebogen-hilfe { padding: 0 50px 50px 100px; }
	.fragebogen-hilfe div { flex-basis: 33%; }
	.fragebogen-hilfe div.fullwidth { flex-basis: 100%; padding: 25px 0 25px; }
}

.zusatz-icons figure img { height: 50px; }
.zusatz-icons figure { display: flex; margin-bottom: 1rem; }
.zusatz-icons figcaption { padding: 0 1rem; }

#legende ul.list_bewertung,
#fragebogen-intro ul.list_bewertung {
	padding-top: 16px;
}

#legende li,
#fragebogen-intro li {
	display: block;
	min-height: 26px;
	line-height: 24px;
}

#legende li:first-child {
	border-top: 1px solid #ccc;
}

.hinweis-bedingungen {
	background: #eee;
}

.hinweis-bedingungen,
.hinweis-bedingungen a {
	font-weight: bold;
}

.hinweis-bedingungen a::before { content: "▸ "; }
.hinweis-bedingungen a { text-decoration: underline; }
.hinweis-bedingungen input { 
	-ms-transform: scale(1.5); /* IE */
  -moz-transform: scale(1.5); /* FF */
  -webkit-transform: scale(1.5); /* Safari and Chrome */
  -o-transform: scale(1.5); /* Opera */
  transform: scale(1.5);
  margin-right: 1rem;
	outline: 2px solid red;
	background-color: white;
}



/* modals und additional-info */

/* svg Glühbirne und map-marker im Fragebogen */
.icon-additional-info {
	width: 48px;
	height: auto;
}

.additional-info {
	display: flex;
	flex-flow: row nowrap;
	align-items: center;
	padding-bottom: .5rem;
	padding-right: .5rem;
	min-width: 50%;
}

.additional-info-text { padding-left: 4px; }

.additional-info-link { font-style: italic; }

.mobile-view .additional-info-icon-container { margin-right: 1rem; }
.desktop-view .additional-info-icon-container { height: 47px; margin-top: 8px; }
.additional-info-icon-container img { margin: 0 !important; }
.additional-info-icon-container a:hover { background: none; }

.additional-info-icon-container.bgcolor_0:hover { background-color: #ffb533; cursor: pointer; }
.additional-info-icon-container.bgcolor_1:hover { background-color: #a213a3; cursor: pointer; }
.additional-info-icon-container.bgcolor_2:hover { background-color: #fb1f02; cursor: pointer; }
.additional-info-icon-container.bgcolor_3:hover { background-color: #7ade86; cursor: pointer; }
.additional-info-icon-container.bgcolor_4:hover { background-color: #2759b3; cursor: pointer; }
.additional-info-icon-container.bgcolor_5:hover { background-color: #fcec3c; cursor: pointer; }
.additional-info-icon-container.bgcolor_6:hover { background-color: #9a151a; cursor: pointer; }
.additional-info-icon-container.bgcolor_7:hover { background-color: #4d4c4c; cursor: pointer; }

.modal {
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgb(0,0,0);
  background-color: rgba(0,0,0,0.4);
}

.modal-container,
.modal-map-container {
  background-color: #fff;
  margin: 10% auto;
  border: 1px solid #888;
  border-radius: 12px;
  -webkit-border-radius: 12px;
  overflow: hidden;
  width: 80%;
  max-width: 900px;
  animation-name: fademe;
  animation-duration: 1s;
}
@keyframes fademe {
  from {opacity: 0}
  to {opacity: 1}
}
.modal-map-container {
  margin: 1rem auto;
  width: 95%;
  height: 95vh;
  max-width: 2000px;
}

.modal-header { 
	padding: 1rem 2rem;
}

.additional-info-header,
.additional-info-header h2 {
	color: white !important;
	margin-top: 2rem !important;
}
.modal-map-header,
.modal-map-header h2 { color: white !important; margin-top: 0 !important; }
.modal-map-header { display: flex; flex-flow: row nowrap; justify-content: space-between; width: 100%; margin-top: 0 !important; padding: .5rem 1rem 0.25rem 1rem; }

.map-helplink-container {  }
a.map-helplink { color: white; text-decoration: underline; }
a.map-helplink:hover { color: text-decoration: underline; }
.black { color: black !important; }
.map-help { display: none; position: absolute; z-index: 1000; padding: 1rem; background: white; max-width: calc(100vw - 1.3rem); }

.iframe-map { width: 100%; height: 100vh; border: 0; }

.modal-content {
	clear: right;
	padding: 2rem;
	font-size: 1rem;
	color: #333;
}

.modal-content a { text-decoration: underline; }

.modal-content ul { margin-bottom: 1rem; }

.close-modal {
  color: #fff;
  float: right;
  font-size: 2rem;
  font-weight: bold;
  line-height: 1rem;
  margin-right: -1rem;
  margin-top: 5px;
  cursor: pointer;
}
.modal-map-header .close-modal { width: 20px; float: none; margin-right: 0; }

.close-modal:hover,
.close-modal:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

.map_text { padding: 1rem 0; width: 100%;  }
.map_text::before {content: '⇨';}

.leaflet-popup-content { width: auto; max-width: 220px; }


/* sticky menu */

#menu {
	width: 100%;
	overflow: auto;
	padding: 0 14px;
}
#menu { position: relative; border-bottom: 1px solid #ccc; }

@supports (position: sticky) or (position: -webkit-sticky) {
	.stickyheader {
		 position: -webkit-sticky;
		 position: sticky;
		 top: 0;
	}
}
/* ende sticky menu */

#menu br {display: none;}

#menu ul {
	list-style: none;
	margin: 0;
	padding: 4px 0 4px 0;
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
	align-content: stretch;
}
@media screen and (min-width: 860px){
	#menu ul { padding: 4px 0 4px 100px; }
}

#menu ul li {
	padding: 0;
	border: 0;
	font-weight: bold;
	flex-basis: auto;
}
#menu ul li:first-child { width: 100%; margin: .25rem 1rem; }
@media screen and (min-width: 500px){
	#menu ul li:first-child { width: auto; margin: .25rem 0;  }
}

#menu ul li.fullwidth {
	flex-basis: 100%;
}

#menu ul li a {
	color: #000;
	font-weight: bold;
}

#menu ul li a:hover, #menu ul li a.current { background-color: #d9d9d9; }

#menu ul li a.current {
  font-weight: bold;
}

.menu_text {
	margin: 12px 0 0 15px;
	font-size: 0.8em;
}

#menu button[type="submit"] { margin: 0; }

.menu-subheader { padding-left: 12px; padding-top: 12px; }

#dialog {
	display: none; 
}
.ui-dialog { max-width: 900px !important; top: 30px !important; }
.ui-dialog-content { height: auto !important; overflow: visible !important; }
.ui-button:focus { outline:none !important; }
.ui-widget-overlay { background: #000 !important; opacity: .6 !important; }


.layer_hinweis {
	width: 100%;
	height: 100%;
	margin-top: 0;
	padding-top: 20px;
	position: fixed;
	z-index: 100;
	display: none;
}

.container_hinweis
{
	width: 90%;
	height: auto;
	max-height: 85vh;
	overflow: auto;
	margin-left: auto;
	margin-right: auto;
	padding: 20px;
	background-color: #eee;
	box-shadow: 5px 5px 20px black;
	font-weight: bold;
}


.layer_hinweis .button_ok, 
.layer_hinweis .button_cancel {
	font-weight: bold;
	padding: 4px;
	font-size: 1.2em;
	color: white;
	cursor: pointer;
	border: 0;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
}

.layer_hinweis .button_ok {background-color: #31a53a;}
.layer_hinweis .button_ok:hover {background-color: #235a23;}
.layer_hinweis .button_cancel { background-color: #E32E0E; }
.layer_hinweis .button_cancel:hover { background-color: #B61B02; }

.section_header,
.section_header_simple {
	clear: left;
	color: white;
	font-size: 18px;
}

.section_header {
	-webkit-border-top-left-radius: 7px;
	-moz-border-radius-topleft: 7px;
	border-top-left-radius: 7px;
}

.section_header_simple { padding: 0 4px 6px 12px; }

.section_header a,
.section_header_simple a {
	color: white;
	font-weight: bold;
	text-decoration: none;
	display: block;
	width: 100%;
	padding: 0 6px 0 10px;
}
@media screen and (min-width: 860px){
	.section_header a,
	.section_header_simple a { padding: 0 6px 0 60px; }
}

.section_header a:hover,
.section_header_simple a:hover { text-decoration: underline; color: #fff; }

.section_header h1,
.section_header_simple h1 {
	color: white;
	font-weight: bold;
	font-size: 1.5rem;
	margin: 0;
}
.section_header_simple h2 {
	color: white;
	font-weight: bold;
	font-size: 1.5rem;
	margin: 0;
}

.section_header h1 { padding: 10px;}
.section_header_simple h1 { padding: 8px 0; }
.section_header_simple h2 { padding: 8px 0; }
.section_header_simple p { color: white; margin: 0; }

.section-ergebnisse,
.section-map-linklist {
	background-color: #f6f6f6;
	padding: 1rem;
	border: 1px solid #ccc;
	border-radius: 11px;
	-webkit-border-radius: 11px;
	margin-bottom: 1rem;
}
.section-map-linklist h3 { margin-top: .5rem; margin-bottom: .25rem; }
.section-map-linklist h4 { margin-bottom: 0; }
.section-map-linklist .details { margin-bottom: 1rem; }
.section-map-linklist ul { margin-bottom: 1rem; }

.map-comments-charts {}

.deckblatt img {
	float: left;
	margin-right: 24px;
}

.deckblatt p {
	font-size: 1.4em;
	margin-top: 14px;
	margin-left: 14px;
}

.img-welcome {
	width: 100%;
	height: auto;
	padding-bottom: 2em;
	margin-top: 1rem;
}

#img_welcometext {
	float: left;
	padding: 0 20px 20px 0;
	width: 160px;
}
#img_welcometext figure {
	padding: 0;
}
#img_welcometext figcaption {
	font-size: 0.8rem;
}

#welcometext {
	padding-left: 180px;
}

/*  Fragebogen */

.fortschritt_farbfelder_container {
	display: flex;
	flex-flow: row nowrap;
}

#befragung_fortschritt {
	padding: 20px 0;
}

#befragung_fortschritt p {
	margin-bottom: 1rem;
}

.befragung_fortschritt_farbfeld {
	flex-grow: 1;
	height: 32px;
	text-align: center;
	padding-top: 2px;
	color: white;
	margin-left: 1px;
}
.befragung_fortschritt_farbfeld:first-child { margin-left: 0; }

.icon_0 { background: #ea9b2e url('../images/fragebogen/icons-sections-weiss/icon-0.png') no-repeat center center; }
.icon_1 { background: #7E197F url('../images/fragebogen/icons-sections-weiss/icon-1.png') no-repeat center center; }
.icon_2 { background: #E3001B url('../images/fragebogen/icons-sections-weiss/icon-2.png') no-repeat center center; }
.icon_3 { background: #63B56D url('../images/fragebogen/icons-sections-weiss/icon-3.png') no-repeat center center; }
.icon_4 { background: #334A96 url('../images/fragebogen/icons-sections-weiss/icon-4.png') no-repeat center center; }
.icon_5 { background: #F6C800 url('../images/fragebogen/icons-sections-weiss/icon-5.png') no-repeat center center; }
.icon_6 { background: #7C1317 url('../images/fragebogen/icons-sections-weiss/icon-6.png') no-repeat center center; }
.icon_7 { background: #333333 url('../images/fragebogen/icons-sections-weiss/icon-7.png') no-repeat center center; }

.icon_0_ok { background: #ea9b2e url('../images/fragebogen/icons-sections-weiss/icon-0_ok.png') no-repeat center center; }
.icon_1_ok { background: #7E197F url('../images/fragebogen/icons-sections-weiss/icon-1_ok.png') no-repeat center center; }
.icon_2_ok { background: #E3001B url('../images/fragebogen/icons-sections-weiss/icon-2_ok.png') no-repeat center center; }
.icon_3_ok { background: #63B56D url('../images/fragebogen/icons-sections-weiss/icon-3_ok.png') no-repeat center center; }
.icon_4_ok { background: #334A96 url('../images/fragebogen/icons-sections-weiss/icon-4_ok.png') no-repeat center center; }
.icon_5_ok { background: #F6C800 url('../images/fragebogen/icons-sections-weiss/icon-5_ok.png') no-repeat center center; }
.icon_6_ok { background: #7C1317 url('../images/fragebogen/icons-sections-weiss/icon-6_ok.png') no-repeat center center; }
.icon_7_ok { background: #333333 url('../images/fragebogen/icons-sections-weiss/icon-7_ok.png') no-repeat center center; }

.ok {
	background-image: url('../images/fragebogen/icon-ok-haekchen.png');
	background-repeat: no-repeat;
	background-position: center;
}

/* Abschnitt mit Frage innerhalb eines der Hauptbereiche */

.frage_abschnitt, .frage_abschnitt_results {
	clear: both;
	margin-bottom: 14px;
	overflow: auto;
}

.frage_abschnitt { background-color: #eee; padding: 16px 0 12px 12px; }
.frage_abschnitt_simple { padding: 0; clear: both; margin-bottom: 20px; }
.frage_abschnitt_results { padding: 0 0 12px 0; }

.seite_nr_von { clear: both; margin: 2px; font-size: 10px; }

.frage_abschnitt img,
.frage_abschnitt_simple img {
	float: left;
	margin-bottom: 12px;
	margin-right: 20px;
}

.section_visible { visibility:visible; display:block; }
.section_hidden { visibility:hidden; display:none; }

.frage_abschnitt h2,
.frage_abschnitt_results h2,
.frage_abschnitt_simple h2 { color: #333; margin-top: 0; margin-bottom: 4px; font-size: 1.25rem;  }
.frage_abschnitt p.subheadline { font-weight: bold; margin-top: 14px; }
h2.bg-light { background-color: #eee; padding: .25rem; }
.abschnitt_header {
	display: flex;
	flex-flow: row nowrap;
	justify-content: flex-start;
	align-items: center;
}
.abschnitt_header_img { min-width: 114px; text-align: center; }
.abschnitt_header_h { width: auto; padding: 1rem; }

hr.divider { margin: 0 0 4px 0; border: 1px 0 0 0 solid black; }

@media screen and (min-width: 860px){
	.frage_abschnitt { padding: 16px 50px 12px 100px; }
	.frage_abschnitt img,
	.frage_abschnitt_simple img {
		margin-right: 36px;
	}
	.frage_abschnitt h2,
	.frage_abschnitt_results h2,
	.frage_abschnitt_simple h2 { 
		font-size: 1.375rem;
		line-height: 1.6rem;
    margin-top: -0.5rem;
	}
}

/* Abschnitt mit Antworten zur Frage */

.flex-flow-column { flex-direction: column !important; }

.antwort_abschnitt {
	width: 100%;
	min-height: 264px;
	margin-bottom: 24px;
}

.frage-nr { clear: both; margin: 4px 0 0 0; }

.antwort {
	display: grid;
	grid-template-columns: 30% auto;
	grid-template-rows: max-content repeat(3, auto);
	grid-column-gap: 1rem;
	grid-row-gap: 1rem;
	background-color: #eeeeee;
	padding: 0 0 24px 0;
}
.antwort-img { grid-area: 1 / 1 / 2 / 2; }
.antwort-img img { 
  float: none;
  width: auto;
  min-width: 78px;
}
.antwort-headline { grid-area: 1 / 2 / 2 / 3; }
.antwort-col2 { grid-area: 2 / 1 / 3 / 3; }
.antwort-col3 { grid-area: 3 / 1 / 4 / 3; }
.antwort-col4 { grid-area: 4 / 1 / 5 / 3; display: flex; flex-flow: row wrap; }

.antwort-results {
	display: flex;
	flex-flow: row wrap;
	padding: 0 10px 24px 0;
	margin-bottom: .5rem;
}
.antwort-results {
	padding: 0 10px 0 10px;
}

.desktop-view { display: none; }
@media screen and (min-width: 600px){
	
	#content { padding: 12px; }
	
	button[id^="weiter"] { margin: auto auto 2px auto; }
	input[type="submit"] { font-size: 1.2rem; }
	
	.antwort {
		display: grid;
		grid-template-columns: 30% auto repeat(2, 85px);
		grid-template-rows: max-content repeat(3, auto);
		grid-column-gap: 1rem;
		grid-row-gap: 1rem; 
	}
	.antwort-img { grid-area: 1 / 1 / 3 / 2; width: auto; }
	.antwort-headline { grid-area: 1 / 2 / 2 / 3; }
	.antwort-col2 { grid-area: 2 / 2 / 3 / 3; }
	.antwort-col3 { grid-area: 1 / 3 / 3 / 4; }
	.antwort-col4 { grid-area: 1 / 4 / 3 / 5; display: block; }
	.desktop-view { display: block; }
	span.desktop-view { display: inline-block; }
	.mobile-view { display: none; }
}

.border_bottom { border-bottom: 1px solid gray; }

.antwort > img {
	margin-right: 50px;
	width: 250px;
	height: auto;
}

.antwort h3,
.antwort-results h3 { color: #333; margin-top: 4px; margin-bottom: 4px; }
.antwort h3 {margin-top: 0;}

.kommentar {
	width: 100%;
}

.kommentar p { margin-bottom: 4px; }

textarea { font-size: 1rem; max-width:80vw; }
.kommentar textarea {
	width: 99%;
	margin-right: 4px;
	height: 60px;
}

.bewertung {
	width: auto;
}

.icon_bewertung {
	width: 28px;
	height: 28px;
}

.icon_bewertung:hover {
	cursor: pointer;
}

/* tooltips */
.tooltip-container { position: relative; }
.bew_tooltip
{
	position: absolute;
	right: 80px;
	top: -10px;
	padding: .5rem;
	width: auto;
	max-width: 220px;
	background-color: #333;
	color: white;
	text-align: center;
	white-space: nowrap;
	border: 1px solid white;
	border-radius: 12px;
	display: none;
}
.extlink_tooltip
{
	position: absolute;
	left: 30px;
	top: -10px;
	padding: .5rem;
	width: auto;
	max-width: 600px;
	background-color: #333;
	color: white;
	text-align: center;
	white-space: nowrap;
	border: 1px solid white;
	border-radius: 12px;
	display: none;
}
.extlink_tooltip a { color: white; text-decoration: underline; }

/* draggables */
  .draggables-list { list-style: none; padding: 0; margin: 0; }
  .draggable-item {
    padding:8px 12px;
    margin:4px 0;
    max-width: 240px;
    background:#f0f0f0;
    border:1px solid #ccc;
    cursor:grab;
    user-select:none;
    touch-action:none;
  }
  .dragging { opacity:0.5; }
/*  end draggables */

.zusatzfragen,
.auswertung_zusatzfragen {
	padding-bottom: 2rem;
}
.zusatzfragen h3 {
	margin-top: 1rem;
	margin-bottom: 0;
}
.auswertung_zusatzfragen h3 {
	margin-top: 2rem;
	margin-bottom: .5rem;
}
.flexrow {
	display: flex;
	flex-flow: row wrap;
}

.ausw_zusatz_antw,
.ausw_zusatz_antw_wide { flex: 0 0 auto; padding: .25rem 1rem 0 0; }
.ausw_zusatz_antw { min-width: 150px; max-width:100%; text-indent: 1rem hanging; }
.ausw_zusatz_antw_wide { min-width: 250px; max-width:100%; }
.ausw_zusatz_antw_kommentar { flex: 0 1 100%; padding-bottom: 1rem; }
.ausw_zusatz_anz { flex: 0 1 auto; padding: .25rem 1rem 0 0; }
/*
.ausw_zusatz_anz_graph { display: flex; align-items: center; }
.ausw_zusatz_anz_graph div { background: gray; height: 10px; }
*/

.textfield_wide { width: 100%; max-width: 400px; }

/* user results */

p.no-topmargin { margin-top: 0; }

.user_results {
	padding: 10px;
}

.user_results h2,
.user_results h3,
.user_results p {
	margin: 0;
	color: #000;
}

.t_results {
	width: 100%;
	border: 0;
	border-collapse: collapse;
}

.t_results td {
	border: 1px solid #ccc;
	text-align: left;
	vertical-align: top;
	padding: 10px;
}


/* Listen */

ul.list_icons, 
ul.list_icons_bewertung,
ul.list_bewertung {
	list-style: none;
	margin: 0;
	padding: 0;
}

ul.list_icons li,
ul.list_icons_bewertung li,
ul.list_bewertung li {
	clear: left;
	padding-top: 0;
}

ul.list_icons li img,
ul.list_icons_bewertung li img,
ul.list_bewertung img {
	margin-right: 12px;
	margin-bottom: 4px;
}

ul.list_icons li p {
	font-size: 1.4em;
	margin-top: 12px;
	margin-bottom: 0;
}

ul.list_icons_bewertung li p {
	font-size: 1.2em;
	margin-top: 6px;
	margin-bottom: 0;
}

/* Charts */

table.charts {
	border: 0;
}
table.charts td,
table.charts th {
	padding: 0;
	font-size: 10px;
	border-bottom: 1px solid black;
}

.weissnicht { padding: 2px 4px; background-color: #ccc; font-size: 14px; }
table.charts_simple {
	border: 0;
	width: auto;
	border-spacing: 0;
}
table.charts_simple td {
	padding: 2px;
	font-size: 14px;
	width: 135px;
	border-right: 1px solid white;
	text-align: center;
}
table.charts_simple td.charts_td {
	background-color: #666;
}
/*table.charts_simple tr.firstrow
{
	background-image: url(../images/css/charts_simple_kurve.png);
	background-repeat: no-repeat;
	background-position: left center;
}*/
.charts_div h3 { margin-top: 0; }
.charts_div p { margin: 0; }
.charts_div > img { margin-top: 2px; float: none; width: 30%; max-width: 250px; height: auto;  }
/*.charts_div .no-image { float: none; width: 30%; max-width: 250px; height: auto; min-height: 200px; margin-right: 36px; }*/
.charts_div .no-image { display: none; }
.charts_div .antwort { background-color: white; margin-bottom:3em; }
.section-ergebnisse .charts_div .antwort { background-color: inherit; }
@media screen and (min-width: 400px) {
	.charts_div > img { float: left; }
	.charts_div no-image { float: left; } 
}

.frage_abschnitt_simple hr { clear: both; }

.chart_balken { width: 0; height: 14px; background-color: #ccc; border-right: 1px solid black; }

.auswertung_gemeinde .charts_td1,
	.auswertung_gemeinde .charts_td2,
	.auswertung_gemeinde .charts_td3,
	.auswertung_gemeinde .charts_td4,
	.auswertung_gemeinde .charts_td5,
	.auswertung_gemeinde .charts_td6 { padding: 1px 3px; }

.auswertung_gemeinde .charts_td1,
	.auswertung_gemeinde .charts_row1 .chart_balken { background-color: #18C300; }
.auswertung_gemeinde .charts_td2,
	.auswertung_gemeinde .charts_row2 .chart_balken { background-color: #97D200; }
.auswertung_gemeinde .charts_td3,
	.auswertung_gemeinde .charts_row3 .chart_balken { background-color: #FED100; }
.auswertung_gemeinde .charts_td4,
	.auswertung_gemeinde .charts_row4 .chart_balken { background-color: #FEA400; }
.auswertung_gemeinde .charts_td5,
	.auswertung_gemeinde .charts_row5 .chart_balken { background-color: #FD583C; }
.auswertung_gemeinde .charts_td6,
	.auswertung_gemeinde .charts_row6 .chart_balken { background-color: #D1D1D1; }
	
.auswertung_gemeinde .skala { 
	background-image: url("../images/fragebogen/skala-auswertung.png");
	background-repeat: repeat;
	height: 12px;
	border: 0;
}
.auswertung_gemeinde .noborder { 
	border: 0;
}

.auswertung_gemeinde #div0 { padding-left: 14px; border-left: 4px solid  #ea9b2e; }
#div0 .frage_abschnitt { border-left: 4px solid  #ea9b2e; }
#div0 .antwort_abschnitt { border-bottom: 4px solid  #ea9b2e; }
.auswertung_gemeinde #div1 { padding-left: 14px; border-left: 4px solid  #7E197F; }
#div1 .frage_abschnitt { border-left: 4px solid  #7E197F; }
#div1 .antwort_abschnitt { border-bottom: 4px solid  #7E197F; }
.auswertung_gemeinde #div2 { padding-left: 14px; border-left: 4px solid  #E3001B; }
#div2 .frage_abschnitt { border-left: 4px solid  #E3001B; }
#div2 .antwort_abschnitt { border-bottom: 4px solid  #E3001B; }
.auswertung_gemeinde #div3 { padding-left: 14px; border-left: 4px solid  #63B56D; }
#div3 .frage_abschnitt { border-left: 4px solid  #63B56D; }
#div3 .antwort_abschnitt { border-bottom: 4px solid  #63B56D; }
.auswertung_gemeinde #div4 { padding-left: 14px; border-left: 4px solid  #334A96; }
#div4 .frage_abschnitt { border-left: 4px solid  #334A96; }
#div4 .antwort_abschnitt { border-bottom: 4px solid  #334A96; }
.auswertung_gemeinde #div5 { padding-left: 14px; border-left: 4px solid  #F6C800; }
#div5 .frage_abschnitt { border-left: 4px solid  #F6C800; }
#div5 .antwort_abschnitt { border-bottom: 4px solid  #F6C800; }
.auswertung_gemeinde #div6 { padding-left: 14px; border-left: 4px solid  #7C1317; }
#div6 .frage_abschnitt { border-left: 4px solid  #7C1317; }
#div6 .antwort_abschnitt { border-bottom: 4px solid  #7C1317; }

#div0 .antwort_abschnitt:last-child,
#div1 .antwort_abschnitt:last-child,
#div2 .antwort_abschnitt:last-child,
#div3 .antwort_abschnitt:last-child,
#div4 .antwort_abschnitt:last-child,
#div5 .antwort_abschnitt:last-child,
#div6 .antwort_abschnitt:last-child { border-bottom: 0; }


.auswertung_gemeinde .antwort img {
	float: none;
	margin-left: 12px;
}

.nav-charts-onpage {
	width: 100%;
	border: 0;
}

.nav-charts-onpage h2 { color: black; font-size: 1em; margin-top: 1em; margin-bottom: 0; }
.nav-charts-onpage label { float: left; width: 140px; }
.nav-charts-onpage div { float: left; }

.nav-charts-onpage a:hover {
	color: black;
}

.nav-charts-onpage a.current {
	color: black;
	background-color: #F6C800;
}


/* FOOTER */



#footer {
	width: 100%;
	border-top: 1px solid #c6c6c6;
}

#footer_inner {
	width: 100%;
	max-width: 1120px;
	margin: auto;
	padding: 1em;
	display: flex;
	flex-flow: row wrap;
}

div.footer-logo {
	flex: 1 1 100%;
	text-align: center;
}

p.footerlinks
{
	flex: 1 1 auto;
	margin-top: .8em;
	text-align: center;
}
p.footerlinks,
p.footerlinks a { font-size: 0.8rem; }

.footer-sep { display: block; }
.footer-sep::after { content:''; padding: 0; }

.footer_print { display: none; }


/* Media Queries */

@media screen and (max-width: 470px) {
	h1 { font-size: 1.5rem; }
	#header-top {
		/*flex-flow: column;*/
	}
	.logo-top { flex-basis: 60px; }
	.logo-top, .logo-top-right { height: auto; }
	img.header-logo { width: 50px; }
	h1.header-top-title { font-size: 1.125rem; margin-top: -0.25rem; max-width: 100%; }
	.logo-top-right {
		flex-basis: 100px;
		padding-top: 1rem;
	}
	.prozent_abgeschlossen { font-size: 0.75rem; }
	.progress { height: 4px; }
	.img-welcome { padding-bottom: 0; }
	#menu { padding: 0 14px 0 70px; }
	#menu ul {
		padding-left: 0;
	}
	#menu ul li,
	#menu ul li a,
	input[type="submit"]#spaeter { font-size: 0.75rem; }
	#menu ul li:first.child { margin: 0 1rem .5rem 0; }
	.fragebogen-hilfe { padding-top: 12px; }
	.section_header {
		-webkit-border-top-left-radius: 0;
		-moz-border-radius-topleft: 0;
		border-top-left-radius: 0;
	}
	.frage_abschnitt { padding: 16px 10px 12px 10px; }
	.abschnitt_header_img { width: 30%; text-align: center; }
	.abschnitt_header_h { width: 70%; padding-left: 1rem; }
	.frage-nr span { display: none; }
	.frage_abschnitt h2, 
	.frage_abschnitt_results h2, 
	.frage_abschnitt_simple h2, 
	.zusatzfragen h2, 
	h3 { font-size: 1rem; }
	.antwort { grid-row-gap: 0; }
	.map_text { padding: .25rem 0; }
}

@media screen and (min-width: 500px){
	/*h1.header-top-title { flex-basis: 100%; }*/
}

@media screen and (min-width: 600px) {
	.container_hinweis
	{
		width: 400px;
	}
	.buttons-container.threecols div { max-width: 32%; }
	img.header-logo { 
		width: 78px;
		height: auto; 
	}
	h1.header-top-title { font-size: 1.5em; }
	.logo-top,
	.logo-top-right {
		height: auto;
	}
	.login_user #spalte1,
	.login_user #spalte2 {
		flex-basis: 48%;
		min-height: 190px;
	}
	div.footer-logo {
		padding-right: 1rem;
		text-align: left;
		flex-basis: auto;
	}
	.footer-sep { display: inline; }
	.footer-sep::after { content:'·'; padding: 0 .5rem; }
	p.footerlinks
	{
		flex: 1 1 auto;
		margin-top: 1rem;
		text-align: right;
	}
	.antwort-results {
		flex-flow: row nowrap;
		padding: 0 10px 0 0;
	}
	.antwort-results {
		padding: 0 10px 0 10px;
	}
}

@media screen and (max-width: 600px) {
	#img_welcometext {max-width: 50%;}
	#welcometext {padding-left: 0; float: right;}
	.flex-welcome {
		flex-direction: column;
	}
	.flex-welcome #img_welcometext { flex-shrink: 1; }
	.bewertung { width: 100%; padding-bottom: .75rem; }
	.bewertung .list_bewertung img { margin-right: 0; }
	.bewertung .list_bewertung { display: flex; margin-left: 6px; justify-content: space-between; width: 100%; max-width: 300px; }
	.bewertung .list_bewertung li { margin-right: 6px; max-width: 32px; }
	.antwort_abschnitt { width: 100%; margin-bottom: 0; }
	/* tooltips */
	.bew_tooltip
	{
		position: absolute;
		right: -50px;
		top: -50px;
		padding: .5rem;
		width: auto;
		max-width: 220px;
		background-color: #333;
		color: white;
		text-align: center;
		white-space: nowrap;
		border: 1px solid white;
		border-radius: 12px;
		display: none;
	}
	.extlink_tooltip
	{
		position: absolute;
		right: -50px;
		top: -50px;
		padding: .5rem;
		width: auto;
		max-width: 220px;
		background-color: #333;
		color: white;
		text-align: center;
		white-space: nowrap;
		border: 1px solid white;
		border-radius: 12px;
		display: none;
	}
	p.button_send { text-align: center; }
}