/******************
    User custom CSS
    ---------------

    In this file you can add your own custom CSS
    It will be loaded last, so you can override any other property.
    Also, it will never be updated. So if you inheritate a core template and just add here some CSS, you'll still benefit of all the updates
*/

:root {
    color-scheme: light;
    font-size:16px;
    --cd-primary-light: rgba(78, 132, 35, .5);
    --cd-primary:       #4E8423;  /* Grün  – Flächen, Rahmen, Links          */
    --cd-primary-dark:  #3E6A1C;  /* Grün  – Active/Hover                    */
    --cd-primary-rgb:   78, 132, 35;
    --cd-accent:        #D5440A;  /* Orange – Buttons, Fortschrittsbalken    */
    --cd-accent-dark:   #AB3608;
    --cd-neutral:       #dadada;  /* Grau  – Zurück-Button                   */
    --cd-neutral-hover: #c5c2c2;
    --cd-neutral-dark:  #938D8D;
    --cd-disabled:      #8E8E8E;
    --cd-surface:       #FFFFFF;
    --cd-text:          #1A1A1A;
    --cd-text-invert:   #FFFFFF;
    --cd-border:        #767676;  /* kontraststark genug für WCAG 1.4.11     */
    --cd-radius:        6px;
    
     /* Corporate-Schrift hier eintragen. Websafe-Fallbacks bleiben stehen. */
    --cd-font: 'Raleway', 'Helvetica Neue', system-ui, -apple-system, Arial, sans-serif;
    
    /* Datenschutz-Checkbox */
    --cd-privacy-box: 1.75em;   /* Bootstrap-Standard = 1em */
    --cd-privacy-gap: 1em;    /* Abstand Box → Labeltext */
}

@font-face {
  font-family: 'Raleway';
  src: url('https://umfragen.werdenktwas.de/upload/themes/survey/generalfiles/raleway/Raleway-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Raleway';
  src: url('https://umfragen.werdenktwas.de/upload/themes/survey/generalfiles/raleway/Raleway-Italic-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

html {
    font-size:16px;
    background-color:#fff;
}

body {
    background-color:#fff;
}

a, .btn {
    transition: all 0.3s ease-in-out
}

/* -----------------------------------------------------------------------------
   Typography
   -------------------------------------------------------------------------- */

/* [class] ist nötig, um die Font-Klasse aus den Theme-Optionen
   (<body class="font-noto">) zu überschreiben. Diesen Block löschen,
   wenn die Schrift über die Theme-Optionen gesteuert werden soll. */
body[class] {
    font-family: var(--cd-font);
    font-size: 1.0625rem;   /* 17px – bewusst grösser als der BS-Default */
    line-height: 1.55;
    color: var(--cd-text);
    background-color: var(--cd-surface);
    hyphens: none;          /* verhindert Silbentrennung in langen dt. Wörtern */
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
    line-height: 1.25;
    hyphens: none;
}

h1 { font-size: 2rem;    margin: 0 0 .75rem; }
h2 { font-size: 1.65rem; margin: 0 0 .75rem; }
h3 { font-size: 1.3rem;  margin: .9rem 0 .75rem; }
h4 { font-size: 1.15rem; margin: .9rem 0 .75rem; }

/* Umfragetitel im Kopfbereich */
.survey-name {
    font-size: 2.15rem;
    font-weight: 600;
    padding-bottom: .5rem;
}

/* Hilfetext unter der Frage */
.ls-questionhelp {
    color: #333333;
    padding-top: .3rem;
}

.fruity .text-info, .fruity .text-primary, .fruity .text-success {
    color:#222!important;
}

.fruity #welcome-container > div.survey-welcome.h5.text-primary {
    font-weight:400;
    line-height:1.5;
    font-size:1.15rem;
    margin: 1.5rem 0;
}

.fruity .completed-wrapper {
    padding-top:4rem;
}

/* -----------------------------------------------------------------------------
   Colors – Flächen im Corporate Design
   -------------------------------------------------------------------------- */

/* Fragenkopf und Validierungsmeldung: grüne Fläche, weisser Text */
.question-title-container {
    background-color: var(--cd-primary);
    color: var(--cd-text-invert);
}
.fruity .question-valid-container, .fruity .question-help-container {
    font-size:.98rem;
}
.question-valid-container {
    color:var(--cd-text);
    border-bottom:1px solid var(--cd-primary);
}
.question-text,
.question-text p {
    color: var(--cd-text-invert);
    margin: .3rem 0;
    hyphens: none;
}
.question-title-container a,
.question-valid-container a {
    color: var(--cd-text-invert);
    text-decoration: underline;
}
.question-text {
    padding:0 .5rem;
}
.question-container {
    margin-bottom:0;
}
.answer-container .radio-list {
    padding-left:1rem;
}
.answer-container .ls-answers.answers-list.radio-list {
    padding-left:2rem;
}
/* Tipps/Pflichtfeldmeldungen auf grünem Grund lesbar halten */
.question-valid-container .text-info,
.question-valid-container .ls-em-tip,
.question-valid-container .em-tip {
    color: var(--cd-text);
    font-weight: 400;
}
.question-valid-container .text-danger,
.question-valid-container .em-success {
    color: var(--cd-text-invert);
    font-weight: 400;
}

/* Fortschrittsbalken */
.progress .progress-bar {
    background-color: var(--cd-accent);
    color: var(--cd-text-invert);
}

/* Karten auf Start-, Speichern- und Abschlussseite (BS5-Ersatz für .panel-*) */
.fruity .card-primary {
    border-color: var(--cd-primary);
}
.fruity .card-primary > .card-header {
    background-color: var(--cd-primary)!important;
    border-color: var(--cd-primary)!important;
    color: var(--cd-text-invert)!important;
}

/* Navigationsleiste */
#survey-nav.navbar {
    background-color: var(--cd-surface);
    border-bottom: 3px solid var(--cd-primary);
}
#survey-nav .nav-link {
    color: var(--cd-primary);
    font-size:1rem;
    padding-top:0;
}
#survey-nav .nav-link:hover,
#survey-nav .nav-link:focus-visible {
    color: var(--cd-accent);
}
#survey-nav .logo-container > img {
    max-height: 6.25rem;
    width: auto;
    margin:10px 0;
}

@media (min-width: 769px) {
    .fruity .navbar .navbar-nav .nav-item:after {
        background-color: var(--cd-accent)!important;
    }
}

/* Footer */
.fruity .footer {
    background-color: var(--cd-primary);
    border-top: 2px solid var(--cd-surface);
    color: var(--cd-text-invert);
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2rem;
    text-align: center;
    font-size:.9rem;
}
.footer-text {
    color: white;
    text-align: center;
    font-size:.9em;
}
.footer-inner {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    padding-bottom:1px;
}
.fruity .footer a {
    color: var(--cd-text-invert);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: all 0.3s ease;
}
.fruity .footer a:hover,
.fruity .footer a:focus-visible,
.fruity .footer a:focus {
    color: var(--cd-text-invert);
    text-decoration: none;
    border-bottom: 1px solid var(--cd-text-invert);
}


/* -----------------------------------------------------------------------------
   Buttons
   .btn.btn-* statt .btn-* : schlägt die Farbvariation (z. B. sea_green.css)
   ohne !important.
   Weiter/Absenden = .btn-primary, Zurück = .btn-outline-secondary (LS 7-Markup)
   -------------------------------------------------------------------------- */
.btn {
    border-radius: var(--cd-radius);
}

/* Grosse Navigationsbuttons – bewusst grosszügige Klickfläche */
.btn-lg {
    --bs-btn-padding-y: 1rem;
    --bs-btn-padding-x: 1.7rem;
    --bs-btn-font-size: 1.1875rem;
    --bs-btn-border-radius: var(--cd-radius);
}

.btn.btn-primary {
    background-color: var(--cd-primary);
    border-color: var(--cd-primary);
    color: var(--cd-text-invert);
}
.btn.btn-primary:hover {
    background-color: var(--cd-accent);
    border-color: var(--cd-accent);
    color: var(--cd-text-invert);
}
.btn.btn-primary:active,
.btn.btn-primary.active,
.btn.btn-primary:focus {
    background-color: var(--cd-accent-dark);
    border-color: var(--cd-accent-dark);
    color: var(--cd-text-invert);
}
.btn.btn-primary:disabled,
.btn.btn-primary.disabled {
    background-color: var(--cd-disabled);
    border-color: var(--cd-disabled);
    color: var(--cd-text-invert);
    opacity: 1;
}

/* Zurück-Button */
.btn.btn-outline-secondary {
    background-color: var(--cd-neutral);
    border-color: var(--cd-neutral-hover);
    color: var(--cd-text);
}
.btn.btn-outline-secondary:hover,
.btn.btn-outline-secondary:active,
.btn.btn-outline-secondary:focus {
    background-color: var(--cd-neutral-hover);
    border-color: var(--cd-neutral-dark);
    color: var(--cd-text);
}

/* Zurück & Weiter-Button größer */
.fruity .ls-move-btn.ls-move-previous-btn.action--ls-button-previous.btn.btn-lg.btn-outline-secondary,
.fruity .ls-move-btn.ls-move-next-btn.ls-move-submit-btn.action--ls-button-submit.btn.btn-lg.btn-primary  {
    padding: .5rem 1.2rem .65rem 1.2rem;
}

/* Sprachumschalter */
.btn.btn-info {
    background-color: var(--cd-accent);
    border-color: var(--cd-accent);
    color: var(--cd-text-invert);
}
.btn.btn-info:hover,
.btn.btn-info:focus {
    background-color: var(--cd-primary);
    border-color: var(--cd-primary);
    color: var(--cd-text-invert);
}

/* Fruity setzt outline:none auf .btn:focus – Tastaturfokus wieder sichtbar
   machen (WCAG 2.4.7). */
.btn:focus-visible {
    outline: 3px solid var(--cd-primary-dark);
    outline-offset: 2px;
    box-shadow: none;
}


/* -----------------------------------------------------------------------------
   Links
   -------------------------------------------------------------------------- */
.fruity a {
    color: var(--cd-primary);
    text-decoration: none;
    transition: color .3s ease-in-out;
}
.fruity a.dropdown-item {
    transition:all .15s ease-in-out;
}
.fruity a:hover,
.fruity a:focus-visible,
.fruity a:focus {
    color: var(--cd-accent);
    text-decoration: underline;
    text-underline-offset: .2em;
}
.fruity a.btn:hover,
.fruity a.btn:focus-visible,
.fruity a.btn:focus {
    text-decoration: none;
}


/* -----------------------------------------------------------------------------
   Formularelemente
   LimeSurvey rendert Radios/Checkboxen weiterhin über label::before (Box) und
   label::after (Haken) – nicht über .form-check-input.
   -------------------------------------------------------------------------- */
.form-control:focus,
.form-select:focus {
    border-color: var(--cd-primary);
    box-shadow: 0 0 0 .2rem rgba(var(--cd-primary-rgb), .3);
}

.radio-item label::before,
.checkbox-item label::before {
    border: 1px solid var(--cd-border);
}
.radio-item input[type="radio"]:checked + label::after,
.checkbox-item input[type="checkbox"]:checked + label::after {
    background-color: var(--cd-primary);
    color: var(--cd-text-invert);
}
.radio-item input[type="radio"]:focus-visible + label::before,
.checkbox-item input[type="checkbox"]:focus-visible + label::before {
    border-color: var(--cd-primary);
    box-shadow: 0 0 0 3px rgba(var(--cd-primary-rgb), .5);
}

/* Datenschutz-Checkbox auf der Startseite: vergrösserte Trefferfläche */
.datasecurity-accepted-wrapper.checkbox-item label::before,
.datasecurity-accepted-wrapper.checkbox-item label::after {
    width: 24px;
    height: 24px;
}

/* Checkbox Items, Antwort-Elemente */

li.radio-item, li.checkbox-item, li.radio-text-item, li.checkbox-text-item {
    margin-bottom:0;
}
@media (min-width: 768px) {
    .fruity .text-item.other-text-item {
    margin-right:2rem;
    }
}
.fruity .list-group-horizontal .control-label.answer-text {
    line-height:1;
}
.fruity .ls-answers {
    padding-top:10px;
    line-height:1;
}
.fruity .ls-answers.subquestion-list .answertext.control-label {
    line-height:1.25;
}
.fruity .answer-item {
    padding:10px 0;
}
.fruity .answer-item .dropdown {
    margin-left:10px;
}
.fruity .dropdown-menu>.active>a, .fruity .dropdown-menu>.active>a:focus, .fruity .dropdown-menu>.active>a:hover, .fruity .dropdown-menu>li>a:focus, .fruity .dropdown-menu>li>a:hover {
    background-color:var(--cd-primary)!important;
}
.fruity .checkbox-item input[type="checkbox"]:checked + label::after {
    line-height:1.5;
}
.fruity .list-unstyled.ls-answers.checkbox-list.answers-list {
    padding-left:1.75rem;
}
.fruity .checkbox-item.othertext-label-checkox-container {
    padding-left:0;
}

/* -----------------------------------------------------------------------------
   Tooltip (nur behalten, wenn Fragetexte <span class="mytooltip"> nutzen)
   -------------------------------------------------------------------------- */
.mytooltip {
    position: relative;
    cursor: help;
    font-weight: 600;
    text-decoration: underline dotted;
    text-underline-offset: .2em;
}
.mytooltip .tooltiptext {
    visibility: hidden;
    position: absolute;
    z-index: 2;
    top: 120%;
    left: 50%;
    transform: translateX(-50%);
    width: min(25em, 90vw);
    padding: 1em;
    border-radius: var(--cd-radius);
    background-color: #343533;
    color: var(--cd-text-invert);
    font-weight: 400;
    text-align: center;
    text-decoration: none;
}
.mytooltip:hover .tooltiptext,
.mytooltip:focus-within .tooltiptext {
    visibility: visible;
}

/* -----------------------------------------------------------------------------
   Navbar Shrink Effekt
   -------------------------------------------------------------------------- */
   
/* Smooth transition for header and logo shrink */
.fruity .navbar,
.logo-container > img {
    transition: all 0.3s ease;
}

.fruity .navbar.shrink {
    padding-top: 0;
    padding-bottom: 0;
    /*box-shadow: 0 2px 5px var(--color-shadow-medium);*/
}

.fruity #survey-nav.navbar.shrink .logo-container > img {
    max-height: 5rem; /* kleinere Logo-Höhe beim Scrollen */
    padding: 10px;
}

/* -----------------------------------------------------------------------------
   Datasecurity
   -------------------------------------------------------------------------- */

.fruity .modal-title {
    margin-top:0;
    font-size:1.35rem;
}
#datasecurity_notice.card-body {
    font-size:.95rem;
}
#datasecurity_notice h1 {
    font-size:1.5rem;
}
#datasecurity_notice h2 {
    font-size:1.25rem;
}
#datasecurity_notice h3 {
    font-size:1.15rem;
}
#datasecurity_notice h4 {
    font-size:1.1rem;
}
#datasecurity_accepted {
    width: var(--cd-privacy-box);
    height: var(--cd-privacy-box);
    margin-top: 10px;
    margin-right: var(--cd-privacy-gap);
    border-width: 2px;
    border-color: #999;
}
#datasecurity_accepted:checked {
    background-color: var(--cd-primary);
    border-color: var(--cd-primary);
}
#datasecurity_accepted:focus-visible {
    border-color: var(--cd-primary);
    box-shadow: 0 0 0 3px rgba(var(--cd-primary-rgb), .5);
}
#datasecurity_accepted + .form-check-label {
    line-height: 1.5;
}

/* Variante "Datenschutzhinweis als Pop-up" */
.form-check:has(> #datasecurity_accepted) {
    padding-left: calc(var(--cd-privacy-box) + var(--cd-privacy-gap));
    min-height: var(--cd-privacy-box);
}
.form-check > #datasecurity_accepted {
    margin-left: calc((var(--cd-privacy-box) + var(--cd-privacy-gap)) * -1);
}

/* Pop-Animation bei Aktivierung */
#datasecurity_accepted:checked {
  animation: pop 0.3s ease;
}
@keyframes pop {
  0%   { transform: scale(0.8); }
  50%  { transform: scale(1.2); }
  100% { transform: scale(1); }
}
#datasecurity_accepted {
  accent-color: var(--cd-primary);
  color:var(--cd-primary) ;
}

/* -----------------------------------------------------------------------------
   Slider
   -------------------------------------------------------------------------- */

.fruity .slider-selection {
    box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.15);
}
.fruity .slider-handle {
    position: absolute;
    top: 0;
    width: 20px;
    height: 20px;
    background-color: var(--cd-primary);
    border-radius:20px;
}
.fruity .slider-selection {
    background-image: linear-gradient(to right, var(--cd-primary-light) 0%, var(--cd-primary) 100%);
}
.fruity .slider-list .slider-container .slider.slider-horizontal .slider-track {
    container-type: inline-size;
}
.fruity .slider-list .slider-container .slider.slider-horizontal:not(.slider-untouched) .slider-selection {
    background-size: 100cqw 100%;
}
.fruity .slider-list .slider-container .slider .slider-handle::before,
.fruity .slider-list .slider-container .slider .slider-handle::after {
    display: none;
}

/* Table Styling */

.fruity .dual_scale_separator, .fruity .header_separator  {
    background-color:#efefef;
}

.fruity .ls-choice.list-group-item.answer-item.sortable-item.grabable.sortable-enable {
    padding-left:10px;
}

.fruity .sortable-subtitle.sortable-rank-subtitle {
    margin-bottom:10px;
}

/* -----------------------------------------------------------------------------
   Sonstige Media Queries
   -------------------------------------------------------------------------- */
   
@media (min-width: 768px) {
    body.fruity .top-container {
        margin-top:5px;
    }
    .fruity.brand-logo .top-container .top-content {
        padding-top:1em;
    }
    .fruity .table>:not(:first-child) {
        border-top: 1px solid #aaa;   
    }
    .fruity .ls-answers .ls-heading th {
        font-weight:500;
        font-size:.95rem;
    }
    .survey-form-container.form {
        padding-bottom:3.5rem;
    }
}
@media (max-width: 767.98px) {
    .fruity .survey-name {
        font-size:1.75rem;
    }
    .fruity .answer-container .ls-answers {
        padding-top:0;
    }
  #outerframeContainer {
      padding:0 2rem 4rem 2rem;
  }
  #survey-nav .logo-container > img {
    max-height: 3rem;
    margin: 6px 0;
    padding: 5px;
  }
  #survey-nav .navbar-brand.logo-container {
    margin-right: auto;
  }
  #survey-nav .navbar-toggler {
    margin-left: .5rem;
  }
  .fruity .navbar-light .navbar-toggler {
    border-color: var(--cd-primary);      
  }
  body.fruity .top-container {
      margin-top:0;
  }
  body.fruity .space-col {
      margin-bottom:.5rem;
  }
  .fruity .top-container .top-content {
      margin-bottom:0;
  }
  .fruity .navbar-toggler {
      font-size:1rem;
  }
}

/**************************************************************
 * LimeSurvey – Leaflet-Kartenfragen
 **************************************************************/

.ls-fn-map-wrapper {
    width: 100%;
    margin: 1rem 0;
}


/* Karte */

.ls-fn-map {
    width: 100%;
    height: 550px;

    margin-top: 0.5rem;

    border: 1px solid #ccc;
    border-radius: 6px;

    background: #f5f5f5;
}


/* Zähler */

.ls-fn-map-status {
    display: inline-block;

    margin-top: 10px;
    padding: 8px 14px;

    background: #f5f5f5;

    border-radius: 5px;

    font-weight: 600;
}


/* Drei Marker erreicht */

.ls-fn-map-status.is-complete {
    background: #dff0ed;
}


/* Hilfetext */

.ls-fn-map-help {
    margin-top: 8px;

    color: #555;

    font-size: 0.9rem;
}


/**************************************************************
 * Nummerierte Marker
 **************************************************************/

.ls-fn-number-marker {
    background: transparent !important;
    border: none !important;
}


.ls-fn-number-marker-inner {

    display: flex;

    align-items: center;
    justify-content: center;

    width: 36px;
    height: 36px;

    box-sizing: border-box;

    border: 3px solid #fff;
    border-radius: 50%;

    background: #1B8683;
    color: #fff;

    box-shadow:
        0 2px 6px rgba(0, 0, 0, 0.45);

    font-size: 17px;
    font-weight: 700;

    cursor: pointer;
}


/**************************************************************
 * LimeSurvey – Leaflet-Kartenfragen
 **************************************************************/

.ls-fn-map-wrapper {
    width: 100%;
    margin: 1rem 0;
}


/* Karte */

.ls-fn-map {
    width: 100%;
    height: 550px;

    margin-top: 0.5rem;

    border: 1px solid #ccc;
    border-radius: 6px;

    background: #f5f5f5;
}


/* Zähler */

.ls-fn-map-status {
    display: inline-block;

    margin-top: 10px;
    padding: 8px 14px;

    background: #f5f5f5;

    border-radius: 5px;

    font-weight: 600;
}


/* Drei Marker erreicht */

.ls-fn-map-status.is-complete {
    background: #dff0ed;
}


/* Hilfetext */

.ls-fn-map-help {
    margin-top: 8px;

    color: #555;

    font-size: 0.9rem;
}


/**************************************************************
 * Nummerierte Marker
 **************************************************************/

.ls-fn-number-marker {
    background: transparent !important;
    border: none !important;
}


.ls-fn-number-marker-inner {

    display: flex;

    align-items: center;
    justify-content: center;

    width: 36px;
    height: 36px;

    box-sizing: border-box;

    border: 3px solid #fff;
    border-radius: 50%;

    background: #1B8683;
    color: #fff;

    box-shadow:
        0 2px 6px rgba(0, 0, 0, 0.45);

    font-size: 17px;
    font-weight: 700;

    cursor: pointer;
}


/**************************************************************
 * Leaflet in Fruity
 **************************************************************/

.ls-fn-map .leaflet-control-container {
    font-size: 14px;
}

.ls-fn-map .leaflet-control-attribution {
    font-size: 10px;
}


/**************************************************************
 * Fragenspezifische Abgrenzungen Matrix-Fragen
 **************************************************************/

@media (min-width: 768px) {
    #question4218 #answerQ4218-AO06,
    #question4218 td.answer_cell_AO06.answer-item.radio-item,
    #question4231 #answerQ4231-AO05,
    #question4231 td.answer_cell_AO05.answer-item.radio-item,
    #question4231 tr.ls-heading.ls-heading-repeat > th:nth-child(6),
    #question4358 #answerQ4358-AO05,
    #question4358 td.answer_cell_AO05.answer-item.radio-item {
    	border-left: 2px solid #bababa !important;
    }
}

@media only screen and (max-width: 767.98px) {
    #question4218 #answerQ4218-AO06,
    #question4218 td.answer_cell_AO06.answer-item.radio-item,
    #question4231 #answerQ4231-AO05,
    #question4231 td.answer_cell_AO05.answer-item.radio-item,
    #question4231 tr.ls-heading.ls-heading-repeat > th:nth-child(6),
    #question4358 #answerQ4358-AO05,
    #question4358 td.answer_cell_AO05.answer-item.radio-item {
        border-top: 2px dashed #999 !important;
    }
}

/**************************************************************
 * Fragenspezifische Abgrenzungen Mehrfachauswahl-Fragen
 **************************************************************/

li[id$="Q4237_S4297"],
li[id$="Q4249_S4430"],
li[id$="Q4261_S4300"],
li[id$="Q4273_S4303"],
li[id$="Q4285_S4306"] {
    position: relative;
    margin-top: 3rem;   /* Platz über dem li für Überschrift + Linie + Abstand nach oben */
    /* kein border-top und kein padding-top mehr */
}

/* Trennlinie */
li[id$="Q4237_S4297"]::after,
li[id$="Q4249_S4430"]::after,
li[id$="Q4261_S4300"]::after,
li[id$="Q4273_S4303"]::after,
li[id$="Q4285_S4306"]::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -1.5rem;               /* Abstand Linie → Antwortoption (hier einstellen) */
    border-top: 1px solid #999;
    /*margin-right:1.5rem!important;*/
}

/* Überschrift mittig auf der Linie */
li[id$="Q4237_S4297"]::before,
li[id$="Q4249_S4430"]::before,
li[id$="Q4261_S4300"]::before,
li[id$="Q4273_S4303"]::before,
li[id$="Q4285_S4306"]::before {
    content: "flächenspezifische Aspekte";
    position: absolute;
    top: -1.5rem;               /* gleicher Wert wie bei der Linie */
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;                 /* liegt über der Linie */
    padding: 0 1rem;
    background-color: #fff;     /* = Seitenhintergrund */
    color: #333;
    /*font-weight: bold;*/
    white-space: nowrap;
}

@media (min-width: 768px) {
li[id$="Q4237_S4297"]::after,
li[id$="Q4249_S4430"]::after,
li[id$="Q4261_S4300"]::after,
li[id$="Q4273_S4303"]::after,
li[id$="Q4285_S4306"]::after {
    margin-right:1.5rem!important;
    }
}

@media only screen and (max-width: 767.98px) {
li[id$="Q4237_S4297"]::after,
li[id$="Q4249_S4430"]::after,
li[id$="Q4261_S4300"]::after,
li[id$="Q4273_S4303"]::after,
li[id$="Q4285_S4306"]::after {
    margin-right:.5rem!important;
    }
}

/**************************************************************
 * Fragenspezifisches Ausblenden
 **************************************************************/

#question4400 .answer-container {
	display:none;
}

@media (min-width: 768px) {
#javatbdQ4422_S4423 label,
#javatbdQ4422_S4424 label, 
#javatbdQ4422_S4425 label, 
#javatbdQ4422_S4426 label {
    padding-top:10px;
}}

.fruity .question-container.input-error {
    box-shadow:none;
}