*** STATIC ***/

/**********************************************************
 * allgemeine Definitionen für HTML Elemente              *
 **********************************************************/

 html,
 body {
     height: 100%;
     background-color: #F5FFFA
 } 
 body {
     text-align: center;
 }
 
 h1, h2, h3, h4 {
     margin: 0;
     padding: 1rem;
     text-align: left;
 }
 
 h2 {
     font-size: 1.25em;
     margin-top: 1.5rem;
     margin-bottom: 0;
 }
 
 p {
     margin: 0;
     padding: 0;
 }
 
 table {
     border-spacing: 0;
 }
 
 td {
     padding: 0;
 }
 
 img {
     border-style: none;
     max-width: 100%;
 }
 
 
 input,
 select,
 textarea,
 button {
     font-family: inherit;
     box-sizing: border-box;
 }
 
 input[type=text],
 input[type=password],
 textarea {
     box-sizing: border-box;
     padding: .25em;
     border-radius: 0.5em;
 }
 
 input[type=date] {
     min-height: 1.5em;
     min-width: 6em;
 }
 
 select {
     max-width: 100%;
     padding: 0.25em;
 }
 
 fieldset {
     min-inline-size: auto;
 }
 
 /**********************************************************
  * Textstile                                              *
  **********************************************************/
 .text-block {
     text-align: left;
     padding: 1em
 }
 
 .text-block h3,
 .text-block p {
     padding: 0;
 }
 
 .text-block h3:not(:last-child),
 .text-block ul:not(:last-child),
 .text-block p:not(:last-child) {
     margin: 0 0 1em 0;
 }
 
 .bold {
     font-weight: bold;
 }
 
 .winzig {
     font-size: 0.7em;
 }
 
 p.inline {
     display: inline;
     margin: 0;
     padding: 0;
 }
 
 .padding {
     padding: 1em;
 }
 
 .padding-bottom {
     padding-bottom: 4em;
 }
 
 /**********************************************************
  * Listen                                                 *
  **********************************************************/
 ul {
     margin: 1em;
     padding-left: 1em;
 }
 
 ul > li:not(:first-child) {
     margin-top: .5em;
 }
 
 /**********************************************************
  * Formulare                                              *
  **********************************************************/
 input {
     font-size: 100%;
 }
 
 input[type=text],
 input[type=password],
 textarea {
     border: 1px solid #DBDBDB;
 }
 
 textarea:disabled,
 input[type=text]:disabled,
 input[type=number]:disabled,
 input[type=date]:disabled {
     background: #EEEEEE;
     color: #555555;
     border-color: rgba(118, 118, 118, 0.3);
 }
 
 .qp_login_form {
     display: flex;
     flex-flow: row wrap;
     align-items: center;
     row-gap: 1em;
     border-radius: 0.5em;
 }
 
 .qp_login_form > * {
     flex: 0 1 auto;
     margin-right: 1em;
     border-radius: 0.5em;
 }
 
 .qp_login_form > *:last-child {
     margin-right: 0;
     border-radius: 0.5em;
 }
 
 input.qp_password_field {
     padding: .1em;
     vertical-align: middle;
     align-self: center;
     border-radius: 0.5em;
 }
 
 .consent-check {
     display: flex;
     align-items: baseline;
     padding: .5em;
     border-radius: 0.5em;
 }
 
 .consent-check:not(:first-child) {
     margin-top: .5em;
     border-radius: 0.5em;
 }
 
 .consent-check:not(:last-child) {
     margin-bottom: .5em;
     border-radius: 0.5em;
 }
 
 .consent-check input {
     margin-right: .5em;
     position: relative;
     top: 1pt;
     flex-basis: auto;
     flex-shrink: 0;
     flex-grow: 0;
     width: 0.875em;
     height: 0.875em;
     border-radius: 0.5em;
 }
 
 input[type=submit]:hover, input[type=submit]:focus, input[type=submit]:active,
 input[type=button]:hover, input[type=button]:focus, input[type=button]:active,
 button.ui-button:hover, button.ui-button:focus button.ui-button:active,
 input.ui-button:hover, input.ui-button:focus, input.ui-button:active {
     cursor: pointer;
 }
 
 /**********************************************************
  * tabellenartige Darstellung von DIV Containern          *
  **********************************************************/
 
 .table-cell {
     display: table-cell;
     box-sizing: border-box;
     overflow: hidden;
     vertical-align: middle;
     text-align: center;
     border-width: 0;
     word-wrap: break-word;
     -ms-word-break: break-all;
 }
 
 .table-row {
     display: table-row;
     border-width: 0;
 }
 
 .table-fixed {
     display: table;
     table-layout: fixed;
     border-width: 0;
 }
 
 .table-inline {
     display: table;
     table-layout: fixed;
     border-width: 0;
     width: 100%;
     height: 100%;
 }
 
 .table {
     display: table;
 }
 
 .growX {
     width: 100%;
 }
 
 .growY {
     height: 100%;
 }
 
 /**********************************************************
  * Popups allgemein                                       *
  **********************************************************/
 .popup-div {
     display: none;
     position: absolute;
     top: 0;
     margin: 0 !important;
     z-index: 1002;
     min-width: 20em;
     border-radius: 0.5em;
 }
 
 .popup-div .popup-titlebar {
     display: grid;
     height: auto;
     min-height: 1.5em;
     grid-template-columns: auto 1.5em;
     grid-template-rows: auto;
     display: -ms-grid;
     -ms-grid-columns: auto 1.5em;
     -ms-grid-rows: auto;
 }
 
 .popup-title {
     grid-column: 1;
     -ms-grid-column: 1;
     align-self: center;
     font-weight: bold;
     padding: 0.2em 0.8em;
 }
 
 .popup-close {
     grid-column: 2;
     -ms-grid-column: 2;
 }
 
 .popup-close.ui-button {
     padding: 0;
     width: 1.25em;
     height: 1.25em;
     display: flex;
     align-items: center;
     justify-items: center;
     margin: auto;
 }
 
 .popup-close-icon {
     width: 1em;
     height: 1em;
     margin: auto;
 }
 
 .no-close .ui-dialog-titlebar-close {
     display: none;
 }
 
 .popup-content {
     padding: 1em;
     font-weight: normal;
     border: 0;
     overflow-y: auto;
 }
 
 .popup-content * {
     max-width: 100%;
 }
 
 .popup-content img {
     height: auto;
 }
 
 div.popup-div input[type=text],
 div.popup-div textarea {
     background-color: #FFFFFF;
     width: 99%;
 }
 
 /**********************************************************
  * Datumsfragen mit Date-Picker                           *
  **********************************************************/
 /* einzelne Felder */
 .ui-datepicker .ui-state-default,
 .ui-datepicker .ui-widget-content .ui-state-default,
 .ui-datepicker .ui-widget-header .ui-state-default {
     font-weight: normal;
     border: 0;
 }
 
 /* beim Mouse-Over */
 .ui-datepicker .ui-state-hover,
 .ui-datepicker .ui-widget-content .ui-state-hover,
 .ui-datepicker .ui-widget-header .ui-state-hover,
 .ui-datepicker .ui-state-focus,
 .ui-datepicker .ui-widget-content .ui-state-focus,
 .ui-datepicker .ui-widget-header .ui-state-focus {
     font-weight: normal;
 }
 
 /**********************************************************
  * Datumsfragen ohne Date-Picker                          *
  **********************************************************/
 
 .date-question .question-body p {
     margin-top: 1em;
 }
 
 .date-month-year {
     display: flex;
     align-items: center;
 }
 
 .month-first {
     flex-direction: row;
     justify-content: flex-start;
 }
 
 .month-first .date-year {
     padding-left: .5em;
 }
 
 .year-first {
     flex-direction: row-reverse;
     justify-content: flex-end;
 }
 
 .year-first .date-year {
     padding-right: .5em;
 }
 
 /**********************************************************
  * Hinweise zu Fragen als Tooltips/Popups                 *
  **********************************************************/
 .tooltip-text {
     display: none;
 }
 
 .tooltip-body {
     text-align: left;
 }
 
 .popup-target {
     cursor: pointer;
 }
 
 /**********************************************************
  * Wellenauswahl                                          *
  **********************************************************/
 .survey-list {
     list-style: none;
 }
 
 /**********************************************************
  * Sprachauswahl                                          *
  **********************************************************/
 
 form.language-box {
     margin: .5em;
 }
 
 .language-list {
     list-style: none;
     padding-top: 1em;
     padding-bottom: 1em;
     padding-left: 0;
 }
 
 .language-list li {
     display: inline-block;
     margin-right: .5em;
     margin-left: .5em;
 }
 
 /**********************************************************
  * Fragen allgemein                                       *
  **********************************************************/
 
 .question-row {
     padding: 1em 1em 0 1em;
 }
 
 .question-head {
     margin: 0;
 }
 
 .question-body {
     text-align: left;
     height: 100%;
     position: relative;
     padding-top: 1em;
     padding-bottom: 1em;
 }
 
 .question-title-text {
     position: relative;
 }
 
 .quest-row {
     margin-top: 1em;
     text-align: left;
 }
 
 .no-space {
     margin-top: 0 !important;
 }
 
 .no-space .question-row,
 .no-space .block-validation {
     border-top: 0;
 }
 
 .defaultSpace {
     margin-top: 1.5em !important;
 }
 
 .largeSpace {
     margin-top: 3em !important;
 }
 
 /* AJAX loading indicator */
 .ajax-indicator img {
     position: relative;
     left: -1.75em;
     width: 1.5em;
     height: 1.5em;
     max-width: none;
 }
 
 .scaled-question-group .ajax-indicator img {
     top: .25em;
 }
 
 .ajax-indicator {
     float: right;
     overflow: visible;
     width: 0;
     height: 0;
 }
 
 /**********************************************************
  * Markierung von Zwangsfragen                            *
  **********************************************************/
 
 .mandatory {
     display: inline-block;
     width: 1em;
     height: 1em;
     margin: 0;
     vertical-align: top;
     cursor: help;
     z-index: 1;
 }
 
 .question-row .mandatory,
 .scaled-question-group .mandatory {
     float: right;
     margin-top: -1em;
     margin-right: -1em;
 }
 
 .mandatory-explanation .mandatory {
     margin-right: .25em;
 }
 
 .mandatory-bitv {
     font-weight: bold;
     font-size: 120%;
     color: red;
     line-height: 0;
 }
 
 .mandatory-explanation-bitv {
     font-weight: bold;
 }
 
 
 /**********************************************************
  * Hinweise zu Fragen                                     *
  **********************************************************/
 .question-note {
     display: inline;
     font-size: 0.8em;
     margin-left: 1em;
 }
 
 .question-note .popup-div,
 .question-note .popup-title,
 .question-note .popup-content {
     display: block;
 }
 
 /**********************************************************
  * Antworten allgemein                                    *
  **********************************************************/
 
 .question-answer.ui-corner-all {
     box-shadow: 2px 2px 4px -1px 	#b4eeb4(0, 0, 0, .5);
     margin-right: 1em;
     margin-bottom: 1em;
     border-radius: 0.5em;
 }
 
 .refuseRadioGroup {
     margin-top: 1em;
 }
 
 .refuse-answer .question-answer.ui-corner-all {
     margin-bottom: 0;
     margin-top: 1em;
 }
 
 .question-answer input[type=checkbox],
 .question-answer input[type=radio] {
     position: relative;
     top: .125em;
 }
 
 .question-answer input[type=checkbox],
 .question-answer input[type=radio],
 .scaled-question-answer input {
     margin: 0;
     flex-basis: auto;
     flex-shrink: 0;
     flex-grow: 0;
     width: 0.875em;
     height: 0.875em;
 }
 
 .answer-container {
     display: inline-flex;
     align-items: first baseline;
     padding: .75em;
     box-sizing: border-box;
     border-radius: 0.5em;
 }
 
 .answer-text:not(:first-child) {
     padding-left: .5em;
 }
 
 .mc-other-answer input[type=text],
 .freetext-answer input[type=text] {
     padding: 0;
     border-top: 0;
     border-left: 0;
     border-right: 0;
     border-radius: 0;
 }
 
 .mc-other-answer input[type=text] {
     margin-left: .5em;
     margin-bottom: .5em;
 }
 
 .mc-other-answer .answer-text {
     max-width: calc(100% - 1.5em);
 }
 
 .answer-container.mc-other-answer:not(:has(input[type=radio])) .answer-text {
     max-width: 100%;
 }
 
 .answer-container.mc-other-answer {
     flex-wrap: wrap;
 }
 
 .date-month-year.month-first select.date-month,
 .date-month-year.year-first select.date-year {
     margin-right: .5em;
 }
 
 .number-question-answer-pattern input[type=text] {
     margin: 2pt;
 }
 
 .question-answer p {
     margin-top: 0.5em;
 }
 
 /**********************************************************
  * MC-Fragen                                              *
  **********************************************************/
 
 .multiple-columns.question-body {
     margin-left: -.5em;
     margin-right: -.5em;
     padding-bottom: 0;
 }
 
 .one-column.question-body {
     padding-bottom: 0;
 }
 
 .one-column .answer-container {
     display: flex;
     margin-bottom: 1em;
 }
 
 .one-column .mc-other-answer input[type="text"] {
     flex-grow: 1;
 }
 
 .multiple-columns .answer-container {
     margin: 0 .5em 1em .5em;
 }
 
 .mc-other-answer {
     padding-top: 0;
     padding-bottom: 0;
 }
 
 .mc-other-answer .answer-text {
     flex-shrink: 0;
     padding-top: .75em;
     padding-bottom: .75em;
 }
 
 .mc-dropdown .answer-container {
     padding: 0;
 }
 
 /**********************************************************
  * Freitextfragen                                         *
  **********************************************************/
 .freetext-answer textarea {
     font-size: 1.25em;
     overflow: auto;
     width: 100%;
     resize: vertical;
 }
 
 .freetext-answer input[type="text"] {
     font-size: 1.25em;
     width: 100%;
 }
 
 /**********************************************************
  * Zahlenwertfragen                                       *
  **********************************************************/
 .number-question-answer-pattern {
     display: inline-block;
     vertical-align: middle;
 }
 
 .number-question-answer.refuse-answer {
     margin-left: 0;
 }
 
 .number-question-answer.refuse-answer .answer-container {
     display: flex;
 }
 
 /**********************************************************
  * Rangordnungsfragen                                     *
  **********************************************************/
 .ranking-question-body {
     display: grid;
     display: -ms-grid;
 }
 
 .ranking-question-body {
     grid-template-columns: 50% 50%;
     -ms-grid-columns: 50% 50%;
 }
 
 .sort-source-info,
 .sortable.source {
     grid-column: 1;
     -ms-grid-column: 1;
 }
 
 .sort-target-info,
 .sortable.target {
     grid-column: 2;
     -ms-grid-column: 2;
 }
 
 .sort-source-info,
 .sort-target-info {
     grid-row: 1;
     -ms-grid-row: 1;
 }
 
 .sortable.target,
 .sortable.source {
     grid-row: 2;
     -ms-grid-row: 2;
 }
 
 .sort-target-info {
     grid-row: 1;
     -ms-grid-row: 1;
 }
 
 .sortable.target {
     grid-row: 2;
     -ms-grid-row: 2;
     min-height: 3em;
 }
 
 .sortable.target,
 .sortable.source {
     list-style: none;
 }
 
 ul.sortable {
     margin: 1em 0 0 0;
     padding: .5em;
 }
 
 ul.sortable.target {
     outline: dashed 2pt rgba(0, 0, 0, .3);
 }
 
 .question-answer.ui-sortable-handle {
     padding: .75em;
 }
 
 /**********************************************************
  * Skalierte Fragen                                       *
  **********************************************************/
 
 .scaled-question-group > .table-inline > .table-row:last-child > .table-cell,
 .scaled-question-group .table-row.scale-title > .table-cell,
 .scaled-question-group > .table-inline.double-scale > .table-row.desktop-only > .table-cell.scale-title {
     border-bottom: 0;
 }
 
 .scaled-question-group > .table-inline {
     display: table;
     width: unset;
 }
 
 .scaled-question-group > .table-inline > .table-row {
     display: table-row;
     width: unset;
 }
 
 .scaled-question-group > .table > .table-row > .table-cell,
 .scaled-question-group > .table-inline > .table-row > .table-cell {
     display: table-cell;
     width: unset;
 }
 
 .scaled-question-group .single-scale .mobile-only .empty-cell {
     display: table-cell;
 }
 
 .scaled-question-group .individually-labeled .scale-title-mobile,
 .slider-labels-mobile {
     display: none;
 }
 
 .scaled-block-refuse {
     border-radius: 0 !important;
     box-sizing: border-box;
 }
 
 .scaled-question-answer {
     text-align: center;
     height: 2em;
 }
 
 .scaled-question-answer.scaled-block-padding-none {
     height: auto;
 }
 
 .scaled-question-text {
     text-align: left;
     padding-left: 1em;
     padding-right: 1em;
 }
 
 .scaled-question-text.scaled-block-padding-none {
     padding-top: .25em;
     padding-bottom: .25em;
 }
 
 .scaled-question-text.scaled-block-padding-normal {
     padding-top: 1em;
     padding-bottom: 1em;
 }
 
 .scaled-question-text.scaled-block-padding-big {
     padding-top: 1.5em;
     padding-bottom: 1.5em;
 }
 
 .scale-label {
     vertical-align: bottom;
 }
 
 .scale-label label {
     padding: 1.5em .5em .25em .5em;
     display: inline-block;
     word-break: break-word;
     text-align: center;
 }
 
 .scale-labels {
     height: 100%;
 }
 
 .polar-label-left {
     text-align: left;
 }
 
 .polar-label-right {
     text-align: right;
 }
 
 .scale-label-content,
 .scale-title-content {
     margin: .5em;
 }
 
 .scale-title-mobile {
     text-align: center;
     padding: .25em 1em;
 }
 
 .double-scale-table {
     display: table;
     table-layout: fixed;
     width: 100%;
     height: 100%;
 }
 
 .ui-slider {
     box-shadow: 0 .1em .25em rgba(0, 0, 0, 0.25) inset, .1em 0 .25em rgba(0, 0, 0, 0.25) inset;
     margin: 1em 1em .5em 1em;
 }
 
 .ui-slider-handle {
     top: -.5em;
     margin-left: -1em;
     height: 2em;
     width: 2em;
     padding: 0;
 }
 
 .slider .untouched-hint,
 .slider input[type="text"] {
     border: 0;
     font-size: 80%;
     font-style: italic;
     text-align: center;
     margin-bottom: .5em;
 }
 
 .slider-with-reset .slider {
     margin-right: 2.25em;
 }
 
 .slider-reset {
     float: right;
     height: 0;
     width: 0;
     overflow: visible;
     line-height: 0;
 }
 
 .slider-reset .ui-button {
     position: relative;
     top: -2em;
     left: -2.25em;
     height: 2em;
     width: auto;
     padding: 0 .5em;
 }
 
 .text-block.no-space {
     border-bottom: 0;
 }
 
 .text-block.no-space + .scaled-question-group {
     border-top: 0;
 }
 
 /**********************************************************
  * Polaritätsprofil-Fragen                                *
  **********************************************************/
 
 .polarity-answer {
     border: 1pt solid transparent;
 }
 
 .polarity-label-left {
     text-align: right;
 }
 
 .polarity-label-left > .scale-label-content {
     margin-top: 1em;
     margin-right: 1em;
 }
 .polarity-label-right {
     text-align: left;
 }
 
 .polarity-label-top {
     vertical-align: bottom;
     padding-bottom: .25em;
     align-self: flex-end;
 }
 
 .polarity-answer,
 .polarity-label-top {
     text-align: center;
 }
 
 .polarity-mobile-header {
     display: none;
 }
 
 .polarity-answer {
     padding: 1em;
 }
 
 /**********************************************************
  * Interaktive Karte                                      *
  **********************************************************/
 .geolocation-map {
     margin: 1em auto;
     width: 90%;
     height: 30em;
 }
 
 /**********************************************************
  * Bilder im Fragebogen                                   *
  **********************************************************/
 .imageQuestion {
     text-align: center;
 }
 
 /**********************************************************
  * Navigations-Container & -Buttons                       *
  **********************************************************/
 .page-nav-container {
     margin: 1em 0 0 !important;
     box-sizing: border-box;
 }
 
 .ui-button {
     box-shadow: 2px 2px 4px -1px rgba(0, 0, 0, .5);
 }
 
 .prev-page-button-container > .ui-button:not(:first-child),
 .next-page-button-container > .ui-button:not(:first-child) {
     margin-top: 1em;
 }
 
 .prev-page-button-container > .ui-button:last-child,
 .next-page-button-container > .ui-button:last-child {
     margin-bottom: 1em;
 }
 
 .prev-page-button-container {
     width: 9em;
     float: left;
 }
 
 .next-page-button-container {
     width: 9em;
     float: right;
 }
 
 #back,
 #delete,
 #confirm,
 #continue,
 #resume,
 #change,
 #summary {
     width: 100%;
     white-space: normal;
     min-height: 4em;
 }
 
 .resume-later {
     max-width: 90%;
     text-align: left;
 }
 
 .resume-later input {
     display: block;
     margin: .5em 0;
 }
 
 /* Fortschrittsbalken
  */
 .progress-bar-container {
     margin-left: 10em;
     margin-right: 10em;
     clear: none;
 }
 
 .page-nav-container .progress-label {
     height: 0;
     line-height: 4em;
     text-align: center;
     font-weight: bold;
 }
 
 .ui-progressbar {
     box-sizing: border-box;
     height: 4em;
 }
 
 .ui-progressbar .ui-progressbar-value {
     box-sizing: border-box;
     height: 4em;
     margin: 0;
     position: relative;
     overflow: hidden;
 }
 
 /**********************************************************
  * allgemeine Anpassungen gegenüber jquery-ui             *
  **********************************************************/
 
 .ui-dialog .ui-dialog-content {
     text-align: left;
 }
 
 .ui-widget-header {
     border: inherit;
     background: inherit;
 }
 
 h2.ui-widget-header {
     font-weight: normal;
 }
 
 .scaled-block-margin-small.scaled-question-group.ui-widget {
     margin-top: .125em;
 }
 
 .scaled-block-margin-normal.scaled-question-group.ui-widget {
     margin-top: .5em;
 }
 
 .scaled-block-margin-big.scaled-question-group.ui-widget {
     margin-top: 2em;
 }
 
 /**********************************************************
  * Banner                                                 *
  **********************************************************/
 
 .box-heading {
     box-sizing: border-box;
     display: flex;
     align-items: center;
 }
 
 .heading-left,
 .heading-right {
     padding: 1em;
 }
 
 .heading-right {
     flex-grow: 1;
 }
 
 .box-heading h1 {
     font-weight: normal;
     text-align: right;
 }
 
 
 /**********************************************************
  * Hauptanzeige                                           *
  **********************************************************/
 
 #customHtmlId {
     display: flex;
     flex-direction: column;
     width: 100%;
     align-items: stretch;
     min-height: 100%;
 }
 
 .content-container {
     margin-top: 1em;
     margin-bottom: 1em;
 }
 
 #customHtmlId.embedded {
     justify-content: center;
     width: 98%;
     margin: auto;
 }
 
 .embedded .content-container {
     margin-top: 1%;
     margin-bottom: 1%;
 }
 
 .box-content {
     flex-grow: 1;
 }
 
 .content-width {
     max-width: 70rem;
     min-width: 19rem;
     margin: 0 auto;
     width: 95%;
 }
 
 .questionnaire {
     width: 95%;
     margin: 0 auto 5px auto;
 }
 
 .browserwarning {
     text-align: center;
     font-weight: bold;
     border: 1px solid red;
     margin-bottom: 5px;
     padding: 2px 2px 2px 5px;
 }
 
 .simplecaptcha {
     margin-bottom: 20px;
     padding: 5px;
 }
 
 .ir-chart {
     max-width: 30em;
     margin: 1em auto;
     border: 1pt solid #e5e5e5;
     padding: 1em;
 }
 
 .ir-chart figcaption {
     margin-bottom: 1em;
 }
 
 /**********************************************************
  * Footer                                                 *
  **********************************************************/
 .box-footing {
     text-align: center;
     font-size: 80%;
     box-sizing: border-box;
     padding: 1rem;
 }
 
 .box-footing li {
     list-style: none;
     display: inline-block;
 }
 
 .footer-divider:before {
     content: '|';
     margin-right: .5em;
     margin-left: .5em;
 }
 
 /**********************************************************
  * Feedback-Panels                                        *
  **********************************************************/
 .feedback {
     margin: .5em;
 }
 
 .feedback p {
     padding: 1em;
 }
 
 .feedback p:not(:first-child) {
     margin-top: 1em;
 }
 
 .question-head .feedback {
     margin-bottom: 1em;
 }
 
 .validation-goto-first {
     margin-left: .5em;
 }
 
 .validation-goto {
     position: absolute;
     /* unsichtbar, aber für assistive Technologien erreichbar */
     clip: rect(0 0 0 0);
     width: 1px;
     height: 1px;
     margin: -1px;
     overflow: hidden;
 }
 
 .validation-goto:focus {
     /* hebt unsichtbarkeit auf */
     clip: auto;
     width: auto;
     height: auto;
     margin: 0;
     overflow: visible;
 }
 
 /**********************************************************
  * HTML-Quittung                                          *
  **********************************************************/
 
 table.summary {
     width: 100%;
     margin: 1em auto;
     border: 1px solid #666666;
     border-collapse: collapse;
     word-break: break-word;
 }
 
 table.summary th:last-child {
     width: 40%;
 }
 
 table.summary td,
 table.summary th {
     padding: .5em;
 }
 
 table.summary td[colspan="2"] {
     border-right: 0;
 }
 
 table.summary td.summary-headline {
     font-weight: bold;
 }
 
 .download-pdf-link {
     margin-top: 2em;
     margin-bottom: 1em;
     text-align: center;
 }
 
 /**********************************************************
  * Auswertungslogin                                       *
  **********************************************************/
 
 .login-table {
     display: inline-table;
 }
 
 .login-row {
     display: table-row;
 }
 
 .login-cell {
     display: table-cell;
     padding: .25em .5em;
 }
 
 /**********************************************************
  * Mobil/Desktop                                          *
  **********************************************************/
 
 .mobile-only {
     /* unsichtbar, aber für assistive Technologien erreichbar */
     clip: rect(0 0 0 0);
     width: 1px;
     height: 1px;
     margin: -1px;
     overflow: hidden;
     position: absolute;
 }
 
 .desktop-only {
     /* hebt unsichtbarkeit auf */
     clip: auto;
     width: auto;
     height: auto;
     margin: 0;
     overflow: visible;
     position: static;
 }
 
 #debug {
     position: fixed;
     bottom: 0;
     left: 0;
     width: 1em;
     height: 1em;
     background-color: green;
 }
 
 
 /*** GENERATED ***/
 
 /* FONTS */
 
 body {
     font-family: 'Source Sans Pro', sans-serif;;
     font-size: 1em;
 }
 
 h1 {
    color: #000000;
 }
 h1, h2, h3, h4 {
     font-family: 'Poppins', sans-serif;;
 }
 
 /* BORDER RADIUS */
 
 .ui-corner-all,
 .ui-corner-top,
 .ui-corner-left,
 .ui-corner-tl {
     border-top-left-radius: 3px;
 }
 
 .ui-corner-all,
 .ui-corner-top,
 .ui-corner-right,
 .ui-corner-tr {
     border-top-right-radius: 3px;
 }
 
 .ui-corner-all,
 .ui-corner-bottom,
 .ui-corner-left,
 .ui-corner-bl {
     border-bottom-left-radius: 3px;
 }
 
 .ui-corner-all,
 .ui-corner-bottom,
 .ui-corner-right,
 .ui-corner-br {
     border-bottom-right-radius: 3px;
 }
 
 /* PAGE COLORS */
 
 html {
     background: #f5faff;
 }
 
 h2 {
     color: #ffffff;
     border: 1pt solid #b4eeb4;
     background: #b4eeb4;
     border-radius: 8px;
 }
 
 .box-heading {
     color: #66CDAA;
     border: 1pt solid #b4eeb4;
     border-bottom-width: 1em;
     background: #ffffff;
     margin-top: 0.75em;
     border-radius: 8px;
 }
 
 .box-footing {
     color: #000000;
     border: 1pt solid #b4eeb4;
     background: #ffffff;
     margin-bottom: 0.75em;
     border-radius: 8px;
 }
 
 
 .box-footing a,
 .box-footing a:visited,
 .box-footing a:active {
     background: transparent;
     color: #b4eeb4;
     text-decoration: underline solid;
     border-radius: 8px;
 }
 
 .box-footing a:hover {
     background: transparent;
     color: #b4eeb4;
     text-decoration: none;
     border-radius: 8px;
 }
 
 
 /* BUTTONS */
 
 .ui-button,
 a.ui-button,
 a:link.ui-button,
 a:visited.ui-button {
     color: #ffffff;
     border: 1pt solid #b4eeb4;
     background: #b4eeb4;
     text-decoration: none;
     border-radius: 8px;
 }
 
 .ui-button:hover,
 a.ui-button:hover,
 a:link.ui-button:hover,
 a:visited.ui-button:hover,
 .ui-button:active,
 a.ui-button:active,
 a:link.ui-button:active,
 a:visited.ui-button:active {
     color: #ffffff;
     border: 1pt solid #2b9d64;
     background: #b4eeb4;
     text-decoration: none;
     border-radius: 8px;
 }
 
 /* QUESTIONS */
 .question-row,
 .scaled-question-group {
     border: 1px solid #b4eeb4;
     background: #ffffff;
     color: #000000;
 }
 
 .question-answer.ui-corner-all {
     border: 1px solid #d1d1d7;
     background: #ffffff;
     color: #000000;
 }
 
 .question-answer.ui-corner-all:hover,
 .scaled-question-answer:hover,
 .scaled-question-group .table-row > .table-cell.polarity-answer:hover,
 .scaled-question-group .table-row > .table-cell.polarity-refuse:hover {
     border: 1px solid #d1d1d7;
     background: #f5f5fa;
     color: #000000;
 }
 
 .question-answer.ui-corner-all.selected-answer,
 .scaled-question-answer.selected-answer,
 .scaled-question-group .table-row > .table-cell.polarity-answer.selected-answer,
 .scaled-question-group .table-row > .table-cell.polarity-refuse.selected-answer {
     border: 1px solid #b4eeb4;
     background: #f5f5fa;
     color: #000000;
 }
 
 .question-note a:active,
 .question-note a:visited,
 .question-note a:link {
     background: transparent;
     color: 	#b4eeb4;
     text-decoration: underline solid;
 }
 
 .question-note a:focus,
 .question-note a:hover {
     background: transparent;
     color: 	#b4eeb4;
     text-decoration: none;
 }
 
 .mandatory-fg {
     fill: #ffffff;
 }
 
 .mandatory {
     border: 1px solid 	#b4eeb4;
     background: 	#b4eeb4;
 }
 
 /* POP-UPS */
 .ui-dialog .ui-dialog-titlebar,
 .popup-titlebar {
     border: 1px solid 	#b4eeb4;
     background: ##66CDAA;
     color: #ffffff;
 }
 
 .ui-dialog,
 .popup-content,
 body .ui-tooltip {
     border: 1px solid 	#b4eeb4;
     background: #ffffff;
     color: #000000;
 }
 
 .ui-dialog-content {
     background: #ffffff;
     color: #000000;
 }
 
 /* TEXT CONTENT */
 
 .text-block {
     border: 1px solid 	#b4eeb4;
     background: #ffffff;
     color: #000000;
     border-radius: 8px;
 }
 
 .text-block a:not(.ui-button),
 .text-block a:not(.ui-button):visited,
 .text-block a:not(.ui-button):active {
     background: transparent;
     color: #66CDAA;
     text-decoration: underline solid;
 }
 
 .text-block a:not(.ui-button):focus,
 .text-block a:not(.ui-button):hover {
     background: transparent;
     color: 	#b4eeb4;
     text-decoration: none;
 }
 
 /* ERRORS */
 
 .ui-state-error,
 .ui-widget-content .ui-state-error,
 .ui-widget-header .ui-state-error {
     border: 1px solid #ff4040;
     background: #fddfdf;
     color: #5f3f3f;
 }
 
 .ui-state-error a,
 .ui-widget-content .ui-state-error a,
 .ui-widget-header .ui-state-error a {
     color: #5f3f3f;
 }
 
 .ui-state-error-text,
 .ui-widget-content .ui-state-error-text,
 .ui-widget-header .ui-state-error-text {
     color: #5f3f3f;
 }
 
 /* TEXT INPUT */
 
 input[type=text],
 input[type=date],
 input[type=number],
 input[type=password],
 textarea {
     border: 1px solid #b4eeb4;	
     background: transparent;
     color: #000000;
 }
 
 /* INTERACTIVE MAP */
 .geolocation-map {
     border: 1px solid #b4eeb4;
 }
 
 /* FOCUS: Freitextfragen */
 
 a:focus,
 .ui-button:focus,
 input:focus,
 textarea:focus,
 select:focus {
     outline: 2pt solid #b4eeb4;
 }
 
 /* PROGRESS */
 .ui-progressbar {
     border: 1px solid #b4eeb4;
     background: #ffffff;
     color: #000000;
 }
 
 .ui-progressbar .ui-progressbar-value {
     background: #cef5cea2;
     color: #000000;
 }
 
 .double-scale-divider,
 .scaled-block-refuse {
     border-left: 1px solid #d1d1d7;
 }
 
 .scaled-question-group > .table-inline > .table-row > .table-cell,
 .scaled-question-group > .table-fixed > .table-row > .table-cell {
     border-bottom: 1px solid #d1d1d7;
 }
 
 /* Mobile Layout */
 @media screen and (max-width: 34em) {
 
     #debug {
         background-color: red;
     }
 
     .box-heading h1 {
         text-align: left;
     }
 
     .heading-left {
         padding-bottom: 0;
     }
 
     .heading-right {
         padding-top: 0;
     }
 
     .progress-bar-container {
         margin-left: 0;
         margin-right: 0;
         clear: both;
     }
 
     .box-footing li {
         display: block;
     }
 
     .footer-divider:before {
         content: '';
         margin-right: 0;
         margin-left: 0;
     }
 
     .login-table {
         display: inline-block;
         margin: auto;
         text-align: left;
     }
 
     .login-row,
     .login-cell {
         display: block;
     }
 
     .box-content {
         padding: 0 .5rem;
     }
 
     html > body .no-logo-mobile {
         display: none;
     }
 
     .page-nav-container {
         padding-left: 0;
         padding-right: 0;
     }
 
     .question-body select {
         width: 100%;
     }
 
     .mc-other-answer input[type=text] {
         width: 100%;
         margin: .25em .25em .75em .25em;
         padding: .25em;
     }
 
     .scaled-question-group > .table-inline,
     .scaled-question-group > .table-inline > .table-row,
     .scaled-question-group > .table-inline > .table-row > .table-cell,
     .individually-labeled .answers-table,
     .individually-labeled .answers-table .table-row {
         display: block;
         width: auto !important;
     }
 
     .scaled-question-group > .table-inline > .table-row > .table-cell {
         border-bottom: 0;
     }
 
     .individually-labeled .scaled-question-answer,
     .polarity-refuse {
         border: 1px solid #d1d1d7;
         background: #ffffff;
         color: #000000;
     }
 
     .scaled-question-group > .table-inline > .table-row:not(:last-child) {
         border-bottom: 1px solid #d1d1d7;
     }
 
     .single-scale .mobile-only .empty-cell {
         display: none !important;
     }
 
     .individually-labeled .answers-table .scaled-question-answer,
     .polarity-refuse {
         display: flex;
         align-items: baseline;
         width: 100% !important;
         height: auto;
         padding: 1em;
         text-align: left;
     }
 
     .individually-labeled .slider-answer {
         display: block;
         width: auto !important;
         margin-bottom: 0;
     }
 
     .scaled-question-group .individually-labeled .scale-title-mobile,
     .slider-labels-mobile {
         display: block;
     }
 
     .individually-labeled .scaled-question-answer.ui-corner-all,
     .polarity-refuse {
         box-shadow: 2px 2px 4px -1px rgba(0, 0, 0, .5);
         margin-right: .25em;
     }
 
     .individually-labeled .scaled-question-answer input,
     .polarity-refuse input {
         position: relative;
         top: .125em;
     }
 
     .individually-labeled .scaled-question-answer {
         margin-bottom: 1em;
     }
 
     .individually-labeled .answers-table {
         padding: .5em;
     }
 
     .polar-labeled .slider-refuse-text.mobile-only {
         display: none;
     }
 
     .double-scale-divider,
     .scaled-block-refuse {
         border-left: 0;
     }
 
     .slider-labels-mobile {
         display: grid;
         grid-template-columns: 50% 50%;
         display: -ms-grid;
         -ms-grid-columns: 50% 50%;
         padding: 0 .5em;
     }
 
     .slider-labels-mobile .polar-label-left {
         grid-column: 1;
         justify-self: left;
         -ms-grid-column: 1;
         -ms-justify-self: left;
     }
 
     .slider-labels-mobile .polar-label-right {
         grid-column: 2;
         justify-self: right;
         -ms-grid-column: 2;
         -ms-justify-self: right;
     }
 
     .battery.question-title-text.mobile-only {
         padding-top: .5em;
         padding-bottom: .5em;
         text-align: left;
     }
 
     .polarity-row {
         display: flex;
         flex-wrap: wrap;
     }
 
     .polarity-answer.table-cell {
         width: auto !important;
         flex-grow: 1;
         padding: 1em;
     }
 
     .polarity-label-left,
     .polarity-label-right {
         display: none;
     }
 
     .polarity-mobile-header:not(:first-child) {
         border-top: 1pt solid #E0E0E0;
     }
 
     .polarity-mobile-header .scale-title-content {
         width: 100%;
         text-align: center;
     }
 
     .polarity-mobile-header .polarity-label-left,
     .polarity-mobile-header .polarity-label-right {
         display: block;
         width: 50%;
         padding: .5em;
         box-sizing: border-box;
     }
 
     .polarity-mobile-header .polarity-label-left {
         text-align: left;
         padding-right: 1em;
     }
 
     .polarity-mobile-header .polarity-label-right {
         text-align: right;
         padding-left: 1em;
     }
 
     .polarity-refuse {
         margin: 1em;
     }
 
     .ranking-question-body {
         grid-template-columns: 100%;
         -ms-grid-columns: 100%;
     }
 
     .sort-target-info {
         grid-row: 1;
         -ms-grid-row: 1;
         grid-column: 1;
         -ms-grid-column: 1;
     }
 
     .sortable.target {
         grid-row: 2;
         -ms-grid-row: 2;
         grid-column: 1;
         -ms-grid-column: 1;
     }
 
     .sort-source-info {
         padding-top: 1em;
         grid-row: 3;
         -ms-grid-row: 3;
         grid-column: 1;
         -ms-grid-column: 1;
     }
 
     .sortable.source {
         grid-row: 4;
         -ms-grid-row: 4;
         grid-column: 1;
         -ms-grid-column: 1;
     }
 
     .popup-div {
         left: -1em !important;
         width: 26em !important;
         max-width: 26em !important;
     }
 
     .box-heading {
         flex-wrap: wrap;
     }
 
     .mobile-only {
         /* hebt unsichtbarkeit auf */
         clip: auto;
         width: auto;
         height: auto;
         margin: 0;
         overflow: visible;
         position: static;
     }
 
     .desktop-only {
         /* unsichtbar, aber für assistive Technologien erreichbar */
         clip: rect(0 0 0 0);
         width: 1px;
         height: 1px;
         margin: -1px;
         overflow: hidden;
         position: absolute;
 
     }
 }
 
 /* IE11-only */
 @media screen and (max-width: 34em) and (-ms-high-contrast: active), (-ms-high-contrast: none) {
     .scaled-question-group .polarity-mobile-header .table-cell.polarity-label-top {
         display: inline-block;
     }
 
     .polarity-row label {
         min-height: 1.5em;
     }
 
     .polarity-row label:not(.polarity-refuse) input {
         position: relative;
         left: 1.5em;
         top: 1.5em;
     }
 
     .polarity-row label input,
     .scaled-question-group .individually-labeled label input {
         width: .75em;
         margin-left: .75em;
     }
 
     .polarity-row label.polarity-refuse span {
         display: inline-block;
         margin-top: 0.75em;
     }
 }