/******************
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, html {
  color-scheme: only light;
}

html, body {
  background-color: #ffffff !important;
}

@media (max-width:568px) {
.fruity a.wrap {
	 white-space: normal!important;
}
.fruity a.wrap::after {
    background-color:white!important;
 }
}

/* Korrektur Datei-Upload-Button */
#upload_861567X34X365 .fa-upload {
    margin-right: 0.4em;
}

/* --- Fragen verstecken --- */

#question388, #question381 {
	display:none;
}

/* --- HTML font-size Anpassung --- */

html {
    font-size:16px;
}

/* --- Schriftart Merriweather Sans (Variable Fonts) --- */

@font-face {
font-family: 'Merriweather Sans';
src: url('../files/MerriweatherSans-VariableFont_wght.ttf') format('truetype-variations'),
url('../files/MerriweatherSans-VariableFont_wght.ttf') format('truetype');
font-weight: 300 800; /* Gewichtsbereich der Variable Font */
font-style: normal;
font-display: swap;
}

@font-face {
font-family: 'Merriweather Sans';
src: url('../files/MerriweatherSans-Italic-VariableFont_wght.ttf') format('truetype-variations'),
url('../files/MerriweatherSans-Italic-VariableFont_wght.ttf') format('truetype');
font-weight: 300 800;
font-style: italic;
font-display: swap;
}

body {
font-family: 'Merriweather Sans', Arial, sans-serif !important;
}

/* Bootstrap-Elemente in LimeSurvey setzen teils eigene font-family-Regeln,
erben also nicht automatisch von body: */
h1, h2, h3, h4, h5, h6,
input, select, textarea, button,
.btn, .form-control, .navbar, .panel, .modal {
font-family: 'Merriweather Sans', Arial, sans-serif !important;
}

/* Neue Navbar mit zwei Logos */
/* ==========================================================================
   Navbar: zwei linksbündige Logos + Menülinks in EINER Zeile
   LimeSurvey 5.x / Theme "fruity" / Bootstrap 3
   ========================================================================== */

/* --------------------------------------------------------------------------
   BASIS (alle Breiten)
   -------------------------------------------------------------------------- */

/* Bezugspunkt für den absolut positionierten Burger-Button */
.ls-navbar-dual .ls-navbar-row {
    position: relative;
}

/* Logo-Block: linksbündig, volle Breite solange mobil (Burger daneben) */
.ls-navbar-dual .ls-navbar-topbar {
    position: static;
    float: none;
    width: 100%;
    margin: 0;
    padding: 0.5rem 0.9375rem;
    min-height: 3.125rem;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

/* Burger-Button aus dem Flexfluss nehmen, rechts fixieren (< 768px sichtbar) */
.ls-navbar-dual .ls-navbar-toggle {
    position: absolute;
    top: 0.75rem;
    right: 0.9375rem;
    margin: 0;
    z-index: 2;
}

/* Logo-Gruppe: linksbündig, beide Logos auf EINER horizontalen Linie.
   align-items:center = gemeinsame Mittelachse trotz unterschiedlicher Höhen. */
.ls-navbar-dual .ls-logo-group {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    padding: 0 3.75rem 0 0;   /* rechts Platz für den Burger-Button */
    gap:2rem;
}

/* min-width:0 erlaubt das Schrumpfen der Flex-Items auf schmalen Displays */
.ls-navbar-dual .ls-logo {
    padding: 0.3125rem 0.9375rem;
    min-width: 0;
    flex-shrink: 1;
}

/* Erstes Logo bündig an der linken Innenkante */
.ls-navbar-dual .ls-logo--primary {
    padding-left: 0;
}

/* Bildskalierung: nie breiter als der Container, Höhe begrenzt */
.ls-navbar-dual .ls-logo-img {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 3.25rem;      /* Desktop */
    object-fit: contain;
}

/* Optische Angleichung des zweiten Logos – hier feinjustieren */
.ls-navbar-dual .ls-logo--secondary .ls-logo-img {
    max-height: 2.5rem;
}

/* --------------------------------------------------------------------------
   DESKTOP / TABLET quer (>= 768px): Logos und Links in einer Zeile
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {

    /* Der Wrapper wird zur Flex-Zeile: Logos links, Menü rechts */
    .ls-navbar-dual .ls-navbar-row {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;           /* Logos und Links auf einer Linie */
        justify-content: space-between;
        width: 100%;
        padding: 0 0.9375rem;
    }

    /* Logo-Block nimmt nur seine natürliche Breite ein */
    .ls-navbar-dual .ls-navbar-topbar {
        flex: 0 1 auto;
        width: auto;
        padding-left: 0;
        padding-right: 0;
        min-height: 0;
    }

    .ls-navbar-dual .ls-logo-group {
        width: auto;
        padding: 0;
    }

    /* Menü-Container: überschreibt Bootstraps display:block !important,
       schiebt die Links ans rechte Ende der Zeile.                        */
    .ls-navbar-dual .ls-navbar-menu.navbar-collapse {
        display: flex !important;
        flex: 1 1 auto;
        justify-content: flex-end;
        align-items: center;
        width: auto;
        max-height: none;
        margin: 0;
        padding: 0;
        border: 0;
        box-shadow: none;
        overflow: visible;
    }

    /* Bootstrap-Floats der Liste durch Flex ersetzen (saubere Ausrichtung) */
    .ls-navbar-dual .ls-navbar-menu .navbar-nav {
        float: none !important;
        display: flex;
        align-items: center;
        flex-wrap: nowrap;
        margin: 0;
    }

    .ls-navbar-dual .ls-navbar-menu .navbar-nav > li {
        float: none !important;
        white-space: nowrap;
    }

    /* Dropdowns (Fragenindex / Sprache) weiterhin korrekt ausklappen */
    .ls-navbar-dual .ls-navbar-menu .navbar-nav > li.dropdown {
        position: relative;
    }
    .ls-navbar-dual .ls-navbar-menu .navbar-nav .dropdown-menu {
        right: 0;
        left: auto;
    }

    /* Navbar ist jetzt einzeilig – Inhalt darunter freihalten.
       Wert ggf. an die tatsächliche Navbar-Höhe anpassen.                 */
    body { padding-top: 6.25rem; }
}

/* --------------------------------------------------------------------------
   Kleinere Desktops / Tablets (768–991px): etwas kompakter
   -------------------------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 991px) {
    .ls-navbar-dual .ls-logo-img                     { max-height: 3rem; }
    .ls-navbar-dual .ls-logo--secondary .ls-logo-img { max-height: 2.5rem; }
    .ls-navbar-dual .ls-logo                         { padding: 0.25rem 0.625rem; }
    .ls-navbar-dual .ls-logo--primary                { padding-left: 0; }

    /* Links enger setzen, damit alles in die Zeile passt */
    .ls-navbar-dual .ls-navbar-menu .navbar-nav > li > a {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
        font-size: 0.8125rem;
    }

    body { padding-top: 4.75rem; }
}

/* --------------------------------------------------------------------------
   MOBIL (< 768px): Standard-Bootstrap – Menü klappt unter die Logos
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
    .ls-navbar-dual .ls-navbar-row                   { display: block; }
    .ls-navbar-dual .ls-logo-group                   { padding: 0 3.4375rem 0 0; }
    .ls-navbar-dual .ls-logo-img                     { max-height: 2.375rem; }
    .ls-navbar-dual .ls-logo--secondary .ls-logo-img { max-height: 2rem; }

    body { padding-top: 3.875rem; }
}

/* Sehr schmale Displays (< 400px): Logos nebeneinander, kompakt skaliert */
@media (max-width: 399px) {
    .ls-navbar-dual .ls-logo-group {
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: flex-start;
        gap: 1.1rem;
        padding: 0 3.125rem 0 0;
    }
    .ls-navbar-dual .ls-logo                         { padding: 0.1875rem 0; }
    .ls-navbar-dual .ls-logo-img                     { max-height: 1.625rem; }
    .ls-navbar-dual .ls-logo--secondary .ls-logo-img { max-height: 1.15rem; }

    body { padding-top: 3.875rem; }
}

:root {
/* Flaechen / Hintergruende */
--sg-bg: #f5f4f1; /* Seitenhintergrund (tokens2) */
--sg-bg-warm: #efede8; /* warme Sekundaerflaeche, Hinweisboxen */
--sg-surface: #ffffff; /* Inhaltsflaechen (Panels, Fragen) */
--sg-surface-alt: #f7f7f7; /* dezente Flaeche (Infoboxen) */
--sg-border: #eae8e3; /* Rahmen, Trennlinien, Sekundaerbutton */

/* Dunkle Flaechen / Text */
--sg-black: #000000;
--sg-white: #ffffff;
--sg-ink: #26262c; /* Primaerflaeche dunkel (Kopfzeilen, Footer) */
--sg-ink-strong: #212020; /* Hover-/Aktiv-Zustand dunkel, Ueberschriften */
--sg-ink-muted: #323131; /* Fliesstext auf hellen Flaechen */
--sg-text: #212020; /* Standard-Textfarbe */
--sg-text-muted: #333333; /* sekundaerer Text, Hilfetexte */

/* Grauwerte */
--sg-grey-800: #3b3b3b;
--sg-grey-700: #4b4b4b;
--sg-grey-600: #535363;
--sg-grey-500: #727272; /* deaktiviert, Meta-Angaben */
--sg-grey-400: #808080;
--sg-grey-300: #aaaaaa;
--sg-grey-200: #aeaeae; /* Formular- und Auswahlrahmen */

/* Akzent & Signal */
--sg-accent: #ffb300; /* Primaeraktion, Fortschritt, Auswahl */
--sg-accent-contrast: #212020;/* Text/Glyphe auf Akzentflaeche */
--sg-danger: #dd0000; /* Fehler / Pflichtfeld-Hinweis */
--sg-highlight: #ffff00; /* Markierung (Textmarker) */

/* Links
Annahme: #0000ee im Styleguide ist die Browser-Default-Linkfarbe
(unformatierter Link). Links werden daher in Textfarbe mit
Akzent-Unterstreichung gesetzt; --sg-link-native bleibt als
Rueckfalloption erhalten. */
--sg-link: #26262c;
--sg-link-hover: #212020;
--sg-link-native: #0000ee;

/* Radien / Bewegung - nicht im Styleguide enthalten,
aus der bestehenden custom.css uebernommen */
--sg-radius-sm: 3px;
--sg-radius: 4px;
--sg-radius-lg: 6px;
--sg-transition: 0.3s ease-in-out;

/* === SP-Button Design-System (aus style-BUlBPL08.css extrahiert) === */
--spbtn-color-accent: #ffb300;        /* var(--color-accent) im SP-Design-System */
--spbtn-color-accent-hover: #d99900;  /* entspricht color-mix(sRGB, accent 85%, black 15%) */
--spbtn-color-accent-text: #26262c;   /* var(--color-accent-text) */
--spbtn-color-disabled-bg: #efede8;   /* var(--color-pampas-darker) */
--spbtn-color-disabled-text: #26262c; /* var(--color-text) */

/* --- zusaetzlich fuer SP-Button--letter (Zurueck-Button) --- */
--spbtn-color-carrara: #eae8e3;       /* var(--color-carrara)  -> Rahmen im Ruhezustand */
--spbtn-color-main: #26262c;          /* var(--color-main)     -> Schriftfarbe */
--spbtn-color-dove-gray: #727272;     /* var(--color-dove-gray)-> Schriftfarbe disabled */
}

/* QUESTION-ID IN FINALER UMFRAGE NOCH ANPASSEN */

.fruity #question56 .question-valid-container,
.fruity #question78181 .question-valid-container,
.fruity #question78382 .question-valid-container {
border:none;
display:none;
}

.fruity #question56 .answer-container,
.fruity #question78181 .answer-container,
.fruity #question78382 .answer-container {
display:none;
}

.fruity #question55 .checkbox-item label::after, 
.fruity #question55 .checkbox-item label::before {
border-radius:50%; 
}

.ls-questionhelp:before {
content: "\f06a";
font-style:normal;
}

/* Hinweisbox */

.hinweisbox {
/* Farben aktualisiert nach Living Styleguide */
background-color: var(--sg-bg-warm);
border-left: 4px solid var(--sg-accent);
padding: 12px 16px;
margin: 20px 0;
color: var(--sg-ink-muted);
border-radius: var(--sg-radius);
}

.fruity .completed-text {
font-size:1.25em;
line-height:1.75;
}
.fruity .completed-text p {
    padding-top:.5rem;
}

/* Token Page */

.token-page-list li {
line-height:1.5;
font-size:0.9em;
}

/* Checkbox Kreuz statt Häckchen */

.fruity .checkbox-item input[type="checkbox"]:checked + label::after, .fruity .checkbox-item input[type="radio"]:checked + label::after {
content: "✓";
font-weight:bold;
}

.fruity .checkbox-item label::before, .fruity .checkbox-item label::after {
width:25px;
height:25px;
border-radius:0;
}
/* Transition Effects (general) */

a, ul, li, button, input[type="button"], input[type="submit"] {
transition: all 0.6s ease-in-out;
-webkit-transition: all 0.6s ease-in-out;
-moz-transition: all 0.6s ease-in-out;
-o-transition: all 0.6s ease-in-out;
}

/* Media Queries */
@media (min-width: 764px) and (max-width: 1199px) {
	.fruity .question-help-container, .fruity .question-valid-container {
		width:96%
	}
}
@media (max-width: 499px) {
.mobile-hide {
display: none!important;
}
}
@media (max-width: 550px) {
    .fruity .logo-container>img {
        max-height:3.25em!important;
        padding:15px!important; 
}
}
@media (min-width: 500px) {
.desktop-hide {
display:none;
}
}
@media (min-width: 481px) {
.fruity .ls-input-group-extra {
padding-left:3.5rem;
}
}
@media (min-device-width: 768px) and (max-device-width: 1024px) {
    .logo-container>img {
        max-height:3.75em!important;
        padding:15px!important; 
}}
@media only screen and (max-width: 767px) {
  .logo-container>img {
    max-height:3.5em!important;
    padding:15px!important;
}  
}
@media only screen and (max-width: 767px),
(min-device-width: 768px) and (max-device-width: 1024px) {
.fruity .dir-ltr .ls-questionhelp {
padding-top:10px;
}
.fruity .ls-input-group-reset {
margin-top:2.1em;
}
.fruity .token-page .btn-default {
color: var(--sg-accent-contrast);
background-color: var(--sg-accent);
border: 1px solid var(--sg-accent);
font-size:14px;
padding:6px 12px;
}
.fruity .token-page .btn-default:hover, .fruity .token-page .btn-default:focus, .fruity .token-page .btn-default:active, .fruity .token-page .btn-default.active {
color: var(--sg-white);
background-color: var(--sg-ink);
border: 1px solid var(--sg-ink);
font-size:14px;
padding:6px 12px;
}
.fruity .token-page .text-info, 
.fruity .token-page .text-info:hover {
font-size:0.8em;
padding:5px 0px;
line-height:1.25;
hyphens:none;
}
.fruity .token-page .text-info2, 
.fruity .token-page .text-info2:hover {
padding:5px 0px;
line-height:1.25;
font-size:0.85em;
hyphens:none;
}
.fruity .token-page .text-info3, 
.fruity .token-page .text-info3:hover {
font-size:0.85em;
padding-top:5px;
padding-bottom:15px;
line-height:1.25;
hyphens:none;
}
.fruity .token-page .form-group {
font-size:0.85em;
padding-top:5px;
}
.fruity .privacy label {
display:inline;
}
.fruity .checkbox-label {
margin-top:2px;
}
.fruity .radio-item label::before {
margin-top:2px;
}
.fruity .radio-item label::after {
margin-top:2px;
}
.privacy #label {
display:inline;
}
.ls-questionhelp, .help-block, .ls-question-help, .ls-questionhelp {
/*font-size: 95%!important;*/
}
.fruity .navbar-toggle {
background-color:var(--sg-bg-warm);
}
.mobile-hide2 {
display: none!important;
}
.fruity .panel .panel-body h1 {
font-size: 165%;
margin-top: 0;
margin-bottom: 15px;
}
.leaflet-marker-icon {
margin-top:-20px!important;
}
.question-valid-container .ls-question-help, .question-valid-container .ls-questionhelp {
margin:5px 0px;
}
.checkbox-list ul, .radio-list ul {
margin-bottom:0;
}
#main-row {
margin:0 1em;
} 
.navbar-default {
background-color: var(--sg-white);
border-color: transparent;
color: var(--sg-text);
height: 90px;
}
.navbar-toggle {
position: relative;
float: right;
margin-right: 15px;
padding: 9px 10px;
margin-top: 20px;
/*margin-bottom: 13px;*/
background-color: transparent;
background-image: none;
border: 1px solid transparent;
border-radius: 6px;
}
.navbar-collapse.collapse.in, .navbar-collapse.collapse.in ul li {
background-color: white;
}
.ls-answers {
padding-top:15px;
padding-bottom:5px;
}
.navbar-column {
float: left;
width: 75%!important;
}
.navbar-column2 {
float: right;
width: 75%!important;
}
.logo-container {
max-width: 85%!important;
}
.logo-container2>img {
/*min-height:4em;*/
max-height:4em!important;
padding:10px!important;
margin-bottom:10px;
}
.logo-container4>img {
max-height:4em!important;
}
.answers-list.radio-list th, .question-item.slider-item .control-label, .dropdown-array .control-label {
font-weight:600;
}
.map-item .form-inline, .url-wrapper-survey-print .ls-print {
display:none;
}
.save-form .return-to-survey {
margin-bottom:5em;
}
.form-control {
margin-bottom:15px;
}
.ls-answers .ls-input-group {
padding-bottom:15px;
}
.ls-answers.dropdown-item {
padding:10px 0 10px 0;
}
.list-unstyled.col-xs-12.col-sm-6 {
margin-bottom:0;
}
.fruity .footer {
height:auto;
/*font-size:95%;*/
}
.survey-welcome.h4.text-primary h2 {
font-size:20px;
}
.fruity #main-row .survey-welcome.text-primary p {
font-size:16px;
}
.fruity #main-row .survey-welcome.text-primary li {
font-size:16px;
}
h1.survey-name {
padding-bottom: 0.25em;
margin-top: 0.35em;
}
.custom-array table.ls-answers {
display: table;
} 
.custom-array table.ls-answers thead {
display: table-header-group;
} 
.custom-array table.ls-answers tbody {
display: table-row-group;
} 
.custom-array table.ls-answers tr {
display: table-row;
} 
.custom-array table.ls-answers tr.ls-hidden {
display: none;
} 
.custom-array table.ls-answers th,
.custom-array table.ls-answers td {
display: table-cell;
} 
.dir-ltr .custom-array table.ls-answers th,
.dir-ltr .custom-array table.ls-answers td {
text-align: left;
} 
.dir-ltr .custom-array table.ls-answers tbody th.answertext {
text-align: right;
} 
.custom-array table.ls-answers tbody td {
text-align:left;
} 
.dir-ltr .custom-array .ls-answers td.radio-item,
.dir-ltr .custom-array .ls-answers td.checkbox-item {
padding: 8px 0;
}
.custom-array table.ls-answers tbody .control-label {
text-align:left
}
.custom-array .answers-list.radio-list th,.custom-array .question-item.slider-item .control-label,.custom-array .dropdown-array .control-label {
font-weight:normal;
font-size:95%;
}
.custom-array table.ls-answers .ls-label-xs-visibility {
display: inline-block;
position: relative;
overflow: hidden;
width: 17px;
height: 17px;
line-height: 21px;
text-indent: 21px;
left: auto;
margin-left: -20px;
} 
.dir-ltr .custom-array table.ls-answers .radio-item label.ls-label-xs-visibility::before,
.dir-ltr .custom-array table.ls-answers .checkbox-item label.ls-label-xs-visibility::before {
margin-left: 0px;
} 
.dir-ltr .custom-array table.ls-answers .radio-item label.ls-label-xs-visibility::after,
.dir-ltr .custom-array table.ls-answers .checkbox-item label.ls-label-xs-visibility::after {
margin-left: 0px;
} 
.custom-array table.ls-answers > tbody > tr:hover {
background-color: inherit;
}
}
@media (min-width: 768px) {
.fruity .token-page .btn-default {
color: var(--sg-accent-contrast);
background-color: var(--sg-accent);
border:1px solid var(--sg-accent);
font-size:15.5px;
padding:8px 16px;
}
.fruity .token-page .btn-default:hover, .fruity .token-page .btn-default:focus, .fruity .token-page .btn-default:active, .fruity .token-page .btn-default.active {
color: var(--sg-white);
background-color: var(--sg-ink);
border:1px solid var(--sg-ink);
font-size:15.5px;
padding:8px 16px;
}
.fruity .token-page {
padding-top:10px;
}
.fruity .token-page .text-info, 
.fruity .token-page .text-info:hover {
font-size:1.25rem;
padding:5px 0px;
line-height:1.25;
hyphens:none;
}
.fruity .token-page .text-info2, 
.fruity .token-page .text-info2:hover {
padding:5px 0px;
line-height:1.25;
font-size:1.25rem;
hyphens:none;
}
.fruity .token-page .text-info3, 
.fruity .token-page .text-info3:hover {
font-size:1.25rem;
padding-top:5px;
padding-bottom:15px;
line-height:1.25;
hyphens:none;
}
.fruity .token-page .form-group {
font-size:0.8em;
padding-top:5px;
}
.privacy {
padding-left: 2.5em;
font-size: 15px;
line-height: 1.6;
hyphens:none;
}
.privacy .control-label {
display: inline-block;
vertical-align: middle;
position: relative;
padding-left:25px;
hyphens:none;
}
.privacy input[type=checkbox] {
width: 24px;
height: 24px;
margin-left: -1.25em;
border: 1px solid var(--sg-ink);
margin-top: 9px;
}
.desktop-hide2 {
display:none;
}
body {
font-size:15px;
}
.fruity .navbar a.animate:after {
background-color:var(--sg-accent)!important;
}
.progress .progress-bar {
line-height:2;
}
#block_error div {
padding:75px 40px 0 186px;
}
.navbar-nav>li>a {
padding-bottom:10px;
}
.subquestion-list.questions-list .answertext {
font-style:oblique;
}
.subquestion-list.questions-list .answertextright {
font-style:oblique;
}
td.dual_scale_separator.information-item, div.answer-container.col-xs-12 > table > thead > tr > td.header_separator {
background-color:var(--sg-border);
}
.answer-container {
    border-top-color:#fff;
}
.slider.slider-untouched .slider-handle {
background-color:rgba(255, 179, 0, .5);
}
.subquestion-list {
hyphens:none;
}
.completed-text {
hyphens:none;
}
.col-sm-2.slider-left.text-right.col-xs-6 {
color: var(--sg-grey-500);
font-size: smaller;
bottom: 0;
padding-top: 7.5px;
}
.col-xs-12.col-sm-2.slider-right.text-left.hidden-xs {
color: var(--sg-grey-500);
font-size: smaller;
bottom: 0;
padding-top: 7.5px;
}
.slider-list .slider-item .control-label {
margin-top: 1.5em;
}
.ls-answers.slider-list {
padding-top: 20px;
padding-bottom: 20px;
}
.ls-answers {
padding-top: 15px;
padding-bottom: 5px;
}
.ls-answers.text-item {
padding-top: 15px;
padding-bottom: 15px;
}
.ls-answers.dropdown-item {
padding-top: 15px;
padding-bottom: 10px; 
}
.ls-answers.map-item.geoloc-item.row {
padding-top: 10px;
padding-bottom: 10px; 
}
.ls-answers.date-item {
padding-bottom:15px;
}
.radio-list, .checkbox-list {
padding-top:2em;
}
.ls-answers.numeric-item .ls-input-group {
padding-bottom:10px;
}
.outerframe.container {
margin-bottom:1.5em;
}
.save-form .return-to-survey {
margin-bottom:2.5em;
}
}
@media (min-width: 2559px) {
.logo-container>img {
max-height: 5em!important;
}
.logo-container2>img {
max-height: 6.5em!important;
}
.logo-container4>img {
max-height: 8em!important;
}
}

/* Datasecurity Kontrollbox */

.checkbox-item input[type="checkbox"]:checked+label::after, .checkbox-item input[type="radio"]:checked+label::after {
background-color:var(--sg-accent);
}
body .answer-item label::after {
background-color:var(--sg-accent);
}

#datasecurity_accepted:hover {
transition: transform 0.2s ease-in-out;
}

/* 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(--sg-accent);
color:var(--sg-accent) ;
}

/* Fragenindex Styling */

.fruity .navbar .dropdown-menu a {
font-size:95%;
}

.fruity .bg-warning {
background-color:var(--sg-bg-warm);
}

.fruity .nav .open>a {
background-color:var(--sg-ink)!important;
color:white!important;
text-decoration:none!important;
}

.fruity .nav .open>a:hover {
background-color:var(--sg-ink-strong)!important;
color:white!important;
text-decoration:none!important;
}

.fruity .dropdown-menu>.disabled>a:hover {
color:white!important;
}

.fruity .dropdown-menu>li>a:hover {
background-color:var(--sg-ink-strong);
color:var(--sg-white);
}

@media (min-width: 761px) {
.fruity .checkbox-item label::before, .fruity .checkbox-item label::after {
width:25px;
height:25px;
}
.welcome-container {
padding-top:2em;
}
.question-help-container {
padding-top:4px;
margin-top:10px;
width: 97.5%;
margin-left: 15px;
}
.question-valid-container {
    width: 97.5%;
    margin-left: 15px;
}
.nav .dropdown-menu {
opacity: 0;
visibility: hidden;
transition: opacity 0.5s ease, visibility 0.5s ease;
display: block; /* unbedingt block lassen, sonst klappt fade nicht */
}
.nav .dropdown.open .dropdown-menu {
opacity: 1;
visibility: visible;
}
#navigator-container,
#groupContainer,
.navbar,
.dropdown,
.dropdown-menu {
overflow: visible !important;
}
.navbar .dropdown-menu {
left: auto !important;
right: -150% !important;
transform: none !important;
z-index: 9999;
}
.fruity .dropdown-menu>.disabled>a {
color:white!important;
background-color:var(--sg-ink);
}
.fruity .ls-index-menu a.dropdown-toggle {
text-decoration:none;
border: none;
}
.fruity .ls-index-menu a.dropdown-toggle:after {
text-align: right;
content: '';
display: block;
width: 0;
height: 2px;
background-color: var(--sg-accent);
}
.fruity .ls-index-menu a.dropdown-toggle:hover {
text-decoration: none;
border: none;
}
.fruity .ls-index-menu a.dropdown-toggle:hover:after {
transition: width 0.3s;
width: 100%;
}
.fruity .ls-index-menu.open a.dropdown-toggle:after {
text-align: right;
content: '';
display: block;
width: 0;
height: 2px;
background-color: white;
}
.fruity .ls-index-menu.open a.dropdown-toggle:hover {
text-decoration: none;
border: none;
}
.fruity .ls-index-menu.open a.dropdown-toggle:hover:after {
transition: width 0.3s;
width: 100%;
}
}

@media (max-width:767px){
.navbar-nav .open .dropdown-menu .dropdown-header, .navbar-nav .open .dropdown-menu>li>a {
font-size:.95em;
}
.nav .dropdown-menu li a {
display: block;
max-width: 390px; 
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.dropdown-menu {
border:none!important;
}
}

@media (min-width:768px) and (max-width:1240px) {
.nav .dropdown-menu li a {
display: block;
max-width: 600px; 
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}

@media (min-width:1241px) and (max-width:1700px) {
.nav .dropdown-menu li a {
display: block;
max-width: 1000px; 
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}

/* Kartenfrage */
/* Ausblenden Koordinaten Eingabefelder */
.coordinate-item, .geoname_search {
display:none!important;
}
/* Custom Marker */
/* Hinweis: um den Standard-Marker / default zu nutzen: folgende CSS-Regel einfach entfernen */
/*
.leaflet-marker-icon {
content: url("/upload/themes/survey/Standard_v2/files/marker-icon-custom3.png")!important;
width: 40px!important;
height: auto!important;
margin-top: -25px;
margin-left: -20px!important;
}
*/
/* Farbe Suchbutton */

.fruity .input-group-addon {
background-color:var(--sg-accent);
color:var(--sg-accent-contrast);
}

/* Tooltip (Mouseover): VARIANTE 2 (.info-tooltip) */
.info-tooltip {
text-decoration: underline dotted;
cursor: help;
position: relative;
}
.info-tooltip::after {
content: "Hiermit sind Orte gemeint, die Du vor allem in Deiner Freizeit aufsuchst";
position: absolute;
bottom: 100%;
left: 50%;
transform: translateX(-50%);
padding: 8px;
background-color: var(--sg-ink);
color: white;
border-radius: 4px;
font-size: 14px;
white-space: normal;
visibility: hidden;
opacity: 0;
transition: opacity 0.3s;
z-index: 1000;
width: 25em;
max-width: 40em;
text-align: center;
}
.info-tooltip:hover::after {
visibility: visible;
opacity: 1;
} 

/* Tooltip (Mouseover): VARIANTE 1 (mytooltip + tooltiptext) */
/* Markierung Tooltip */
.mytooltip {
position: relative;
cursor: pointer;
border-bottom: 1px dotted var(--sg-grey-400);
}
/* Eigenschaften Tooltip - Sichtbarkeit, Größe, Farben, Position */
.mytooltip .tooltiptext {
visibility: hidden;
width: 25em;
background-color: var(--sg-ink);
color: var(--sg-white);
text-align: center;
border-radius: 6px;
padding: 1em;
position: absolute;
z-index: 2;
top: 120%;
left: 50%;
margin-left: -12.5em; /* Use half of the width (120/2 = 60), to center the tooltip */

}
/* Hover Tooltip */
.mytooltip:hover .tooltiptext {
visibility: visible;
}

/* Language Switch */

.language_change_container.dropdown-menu {
overflow-x:hidden;
overflow-y:hidden;
}

/* Alte Regel entfernt - margin-bottom jetzt Teil des SP-Button-Nachbaus weiter unten */

/* ============================================================
   Buttons, Checkboxen & Tooltip
   ============================================================ */

button, input[type="button"], input[type="submit"] {
border: 1px solid var(--sg-white);
}
button:hover, input[type="button"]:hover, input[type="submit"]:hover {
border: 1px solid var(--sg-ink);
}
.ls-answers .radio-item label {
line-height:1.1;
}
.ls-answers .checkbox-item label {
/* line-height:1.15;*/
}
.control-label.radio-label.radio-item label::before {
margin-top: 1px;
}
.control-label.radio-label.radio-item input[type="radio"]:checked+label::after {
margin-top: 1px;
}
.checkbox-item label::before {
margin-top: 1px;
}
label::after {
/* Auswahlflaeche in Akzentfarbe gemaess Styleguide */
background-color: var(--sg-accent);
}
.fruity a {
text-decoration: none;
border-bottom: 1px solid transparent;
transition: all 0.5s ease-in-out;
line-height: 1.2;
color:var(--sg-ink);
}
.fruity a:hover, .fruity a:focus {
border-color: var(--sg-accent);
color:var(--sg-ink-strong);
}
.fruity .question-text a {
color:var(--sg-ink);
border-bottom: 1px solid transparent;
}
.fruity .question-text a:hover, .fruity .question-text a:focus {
color:var(--sg-ink);
border-color:var(--sg-ink);
} 
.fruity .question-item {
padding-top:0;
}
.fruity input[type="text"], .fruity input[type="password"], .fruity .ui-autocomplete-input, .fruity textarea, .fruity .uneditable-input {
    color: var(--sg-text);
}
.checkbox-item label {
display: inline-block;
vertical-align: middle;
position: relative;
padding-left: 20px;
line-height: 1.75;
}
.checkbox-item label::after {
display: inline-block;
position: absolute;
left: 1px;
top: 1px;
border-radius: 3px;
margin-left: -20px;
padding-left: 3px;
padding-top: 1px;
font-size: 11px;
color: var(--sg-accent-contrast); /* Glyphe dunkel auf Akzentflaeche */
text-align: center;
}
.input-group-addon.checkbox {
display: none;
}
.fruity .btn, .fruity .modal-footer .btn+.btn {
margin-bottom: 0.5em;
}
.fruity .btn-lg, .fruity .btn-group-lg>.btn {
padding: 18px 27px;
font-size: 19px;
line-height: 1.3333333;
border-radius: 6px;
}

/* ============================================================
   .btn-primary  ==  SP-Button + SP-Button--default + focus--mouse
   (1:1-Nachbau des externen Design-Systems, siehe style-BUlBPL08.css)
   ============================================================ */
.fruity .panel-footer .btn {
    min-width: 2.125rem;      /* SP-Button */
    min-height: 2.125rem;     /* SP-Button */
    padding: .3625rem .9625em !important;
    text-transform:lowercase;
    font-weight:300;
}

.fruity .btn-primary {
display: inline-flex !important;
align-items: baseline;
justify-content: center;
min-width: 3.125rem;      /* SP-Button */
min-height: 3.125rem;     /* SP-Button */
padding: .5625rem 1.0625em; /* SP-Button (Mobile-Basiswert) */
font-family: inherit;
font-size: 1rem;
line-height: 1.625;
text-align: left;
text-decoration: none;
color: var(--spbtn-color-accent-text) !important;        /* SP-Button--default: color */
background-color: var(--spbtn-color-accent) !important;  /* SP-Button--default: background-color */
background-image: none !important;   /* Bootstrap-Gradient entfernen */
border-style: solid !important;
border-width: 3px !important;        /* SP-Button: border-width */
border-color: var(--spbtn-color-accent) !important;       /* SP-Button--default: border-color */
border-radius: 0 !important;         /* SP-Button definiert keinen radius -> eckig */
box-shadow: none !important;         /* Bootstrap inset-shadow entfernen */
transition: background-color .3s, border-color .3s, color .3s, fill .3s;
cursor: pointer;
}

/* SP-Button: responsive Padding-Staffelung */
@media (min-width: 61.5rem) {
.fruity .btn-primary {
padding: .875em 1.375em;
}
}
@media (min-width: 89rem) {
.fruity .btn-primary {
padding: .69445em .94445em;
font-size: 1.125rem;   /* SP-Button @ >=89rem */
line-height: 1.61111;  /* SP-Button @ >=89rem */
}
}

/* SP-Button--default:not(:disabled):hover -> abgedunkelte Akzentfarbe */
.fruity .btn-primary:hover,
.fruity .btn-primary:focus,
.fruity .btn-primary.focus {
color: var(--spbtn-color-accent-text) !important;
background-color: var(--spbtn-color-accent-hover) !important;
border-color: var(--spbtn-color-accent-hover) !important;
box-shadow: none !important;
}

.fruity .btn-primary:active,
.fruity .btn-primary.active,
.fruity .open .dropdown-toggle.btn-primary {
color: var(--spbtn-color-accent-text) !important;
background-color: var(--spbtn-color-accent-hover) !important;
border-color: var(--spbtn-color-accent-hover) !important;
box-shadow: none !important;
}

/* SP-Button--default:disabled */
.fruity .btn-primary[disabled],
.fruity .btn-primary.disabled {
color: var(--spbtn-color-disabled-text) !important;
background-color: var(--spbtn-color-disabled-bg) !important;
border-color: var(--spbtn-color-disabled-bg) !important;
cursor: not-allowed;
opacity: 1 !important;
}
.fruity .btn-primary[disabled]:hover,
.fruity .btn-primary.disabled:hover {
color: var(--spbtn-color-disabled-text) !important;
background-color: var(--spbtn-color-disabled-bg) !important;
border-color: var(--spbtn-color-disabled-bg) !important;
}

/* focus--mouse: bei Mausfokus keinen Tastatur-Ring anzeigen */
.fruity .btn-primary:focus:not(:focus-visible) {
outline: none !important;
box-shadow: none !important;
}

/* Sichtbarer Fokus-Ring nur bei echter Tastaturnavigation */
.fruity .btn-primary:focus-visible {
outline: 3px solid Highlight;
outline: 3px auto -webkit-focus-ring-color;
outline-offset: 5px;
z-index: 2;
}

.fruity .btn-default {
color: var(--sg-text);
background-color: var(--sg-border);
border:1px solid var(--sg-grey-200);
}
.fruity .btn-default:hover, .fruity .btn-default:focus, .fruity .btn-default:active, .fruity .btn-default.active, .fruity .open .dropdown-toggle.btn-default {
color: var(--sg-white);
background-color: var(--sg-ink);
border:1px solid var(--sg-ink);
}
/* Alte .btn-info Regel entfernt - vollstaendig ersetzt durch SP-Button-Nachbau am Dateiende */
.fruity .radio-item label::before, .checkbox-item label::before {
border: 2px solid #26262c;
}

/* Meldungen / Alerts - NEU ergaenzt (im Styleguide farblich abgeleitet) */
/* Annahme: der Styleguide definiert keine Erfolgsfarbe (kein Gruen);
Erfolg wird daher neutral-dunkel, Fehler in --sg-danger ausgezeichnet. */

.fruity .alert {
border: 1px solid var(--sg-border);
border-radius: var(--sg-radius);
background-color: var(--sg-surface-alt);
color: var(--sg-ink-muted);
}
.fruity .alert-danger,
.fruity .has-error .help-block {
background-color: var(--sg-surface);
border-left: 4px solid var(--sg-danger);
color: var(--sg-ink-muted);
}
.fruity .alert-success {
background-color: var(--sg-bg-warm);
border-left: 4px solid var(--sg-ink);
color: var(--sg-ink-muted);
}
.fruity .alert-info {
background-color: var(--sg-surface-alt);
border-left: 4px solid var(--sg-grey-200);
color: var(--sg-ink-muted);
}
.fruity .alert-warning {
background-color: var(--sg-bg-warm);
border-left: 4px solid var(--sg-accent);
color: var(--sg-ink-muted);
}
.fruity .ls-em-error,
.fruity .text-danger.ls-em-error {
color: var(--sg-danger);
}
.fruity .has-error .form-control {
border-color: var(--sg-danger);
}
.fruity #question384 .ls-em-error,
.fruity #question384 .text-danger.ls-em-error {
color: var(--sg-text-muted);
}

/* Formularfelder - NEU ergaenzt (Rahmen/Fokus gemaess Styleguide) */

.fruity .form-control {
background-color: var(--sg-surface);
border: 1px solid var(--sg-grey-200);
border-radius: var(--sg-radius);
color: var(--sg-text);
box-shadow: none;
}
.fruity .form-control:focus {
border-color: var(--sg-accent);
box-shadow: 0 0 0 3px rgba(255, 179, 0, 0.25);
}
.fruity .form-control::placeholder {
color: var(--sg-grey-500);
}

/* Sichtbarer Tastaturfokus - NEU ergaenzt (Barrierefreiheit) */

.fruity a:focus-visible,
.fruity .btn:focus-visible,
.fruity button:focus-visible,
.fruity input:focus-visible,
.fruity select:focus-visible,
.fruity textarea:focus-visible,
.fruity .checkbox-item input[type="checkbox"]:focus-visible + label::before,
.fruity .radio-item input[type="radio"]:focus-visible + label::before {
outline: 2px solid var(--sg-ink);
outline-offset: 2px;
}

/* Inhaltslinks sichtbar auszeichnen - NEU ergaenzt
(Navigation bleibt bewusst ohne Unterstreichung) */

.fruity .panel-body a,
.fruity .survey-welcome a,
.fruity .completed-text a,
.fruity .question-help-container a {
border-bottom: 1px solid var(--sg-accent);
}
.fruity .panel-body a:hover,
.fruity .survey-welcome a:hover,
.fruity .completed-text a:hover,
.fruity .question-help-container a:hover {
border-bottom-color: var(--sg-ink);
}

/* Main / Body / Startseite / Datenschutz / Fragen */

@media (max-width:769px) {
.fruity .checkbox-item.datasecurity-accepted-wrapper label {
font-size:16px;
hyphens:none;
}
}
.checkbox-item.datasecurity-accepted-wrapper label {
display: inline-block;
vertical-align: middle;
position: relative;
padding-left: 26px;
font-size:16px;
line-height:1.5;
}
.checkbox-item.datasecurity-accepted-wrapper label::after {
display: inline-block;
position: absolute;
width: 17px;
height: 17px;
left: 1px;
top: 1px;
border-radius: 3px;
margin-left: -20px;
padding-left: 3px;
padding-top: 1px;
font-size: 11px;
color: var(--sg-accent-contrast); /* Glyphe dunkel auf Akzentflaeche */
text-align: center;
}
.datasecurity-accepted-wrapper {
padding-left: 2.5em;
font-size: 15px;
line-height: 22px;
}
.datasecurity-accepted-wrapper.checkbox-item label::before {
width: 24px;
height: 24px;
margin-left: -1.25em;
border: 1px solid var(--sg-ink);
margin-top: 9px;
}
.datasecurity-accepted-wrapper.checkbox-item label::after {
padding: 0;
width: 24px;
height: 24px;
margin-left:-1.25em;
color: var(--sg-accent-contrast);
font-size: 15px;
line-height: 22px;
margin-top: 8.5px;
}
.datasecurity-accepted-wrapper a, .url-wrapper a, .url-wrapper-survey-print a, .url-wrapper-survey-return a {
color: var(--sg-ink);
text-decoration: none;
border-bottom: 1px solid transparent;
transition: all 0.5s ease-in-out;
}
.datasecurity-accepted-wrapper a:hover, .url-wrapper a:hover, .url-wrapper-survey-print a:hover, .url-wrapper-survey-return a:hover, 
.datasecurity-accepted-wrapper a:focus, .url-wrapper a:focus, .url-wrapper-survey-print a:focus, .url-wrapper-survey-return a:focus {
border-color: var(--sg-accent);
color: var(--sg-ink-strong);
}

body {
/* Seitenhintergrund gemaess Styleguide (warmes Off-White) */
background-color: var(--sg-bg);
padding-bottom: 5px;
padding-top: 30px;
/* now is redefine in JS to fit any title length */
color: var(--sg-text);
}
body .top-container {
margin-top: 20px!important;
line-height: 1.42857143;
color: var(--sg-ink-muted);
background-color: var(--sg-white);
}
.fruity .progress {
background-color: var(--sg-border);
}
.fruity .progress-bar {
color: var(--sg-ink-muted);
background-color: var(--sg-accent);
font-size: 75%;
}
/* Panel-Kopf: dunkle Styleguide-Flaeche mit weisser Schrift */
.fruity .panel-primary>.panel-heading {
color: var(--sg-white);
background-color: var(--sg-ink);
border-color: var(--sg-ink);
}
.fruity .panel-body {
hyphens: none;
line-height:1.75;
}
.fruity .panel-body h1, .fruity .panel-body h2, .fruity .panel-body h3  {
    padding-top:5px;
}
.ls-answers, .checkbox-list, .answers-list {
hyphens: none; 
}
.fruity .panel-body h1, h2, h3, h4 {
font-weight:600
}
.fruity .panel-body h3, h4 {
margin-top:15px;
margin-bottom:15px;
}
.fruity .panel-body h1 {
font-size:200%;
margin-top:0;
margin-bottom:15px;
}
.fruity .panel-body h2 {
font-size:165%;
margin-bottom:15px;
margin-top:5px;
}
.fruity .panel-body h3 {
font-size:125%; 
}
.fruity .panel-body h4 {
font-size:110%; 
}
.fruity .panel-primary {
border-color: var(--sg-ink);
}
#block_error {
background-color:white;
}
.fruity #block_error .text-danger, .fruity #block-error .text-info {
color:inherit;
background-color:white;
}
.dir-ltr .ls-questionhelp {
margin-left: 1.2em;
color: var(--sg-text-muted);
padding-top:5px;
font-style:italic;
font-size: 1rem;
hyphens:none;
}
.ls-question-message, .ls-question-mandatory, .ls-question-mandatory-multiplechoice, .text-danger  {
    font-style:italic;
    font-size: 1rem;
}
.vmsg_364_q_fn_validation {
    padding-top:.25rem;
}
.error {
    font-style:italic;
    padding-bottom:.5rem;
    font-size: 1rem;
}
.control-label {
    font-size:1rem;
}
.dir-ltr .ls-answers td.radio-item, .dir-ltr .ls-answers td.checkbox-item {
padding-top:15px;
}
.radio-item label::before, .checkbox-item label::before {
border: 2px solid #26262c;
}
.navbar .table-responsive {
margin-bottom:0;
}
.table-responsive {
width: 100%;
margin-bottom: 15.75px;
overflow-y: hidden;
-ms-overflow-style: -ms-autohiding-scrollbar;
border: 0 solid var(--sg-border);
}
.table-responsive2 {
table-layout: fixed;
/*display: table;*/
overflow-y: hidden;
-ms-overflow-style: -ms-autohiding-scrollbar;
border: 0 solid var(--sg-border);
border-collapse: collapse;
margin-bottom: 0!important;
vertical-align: middle;
}
.table-responsive2 td {
vertical-align: middle;
}
.table-bordered>tbody>tr>td, .table-bordered>tbody>tr>th, .table-bordered>tfoot>tr>td, .table-bordered>tfoot>tr>th, .table-bordered>thead>tr>td, .table-bordered>thead>tr>th {
border:1px solid var(--sg-border);
}
.fruity .text-primary:hover {
color: var(--sg-text);
}
.fruity .text-primary {
color: var(--sg-text);
}
.asterisk {
display: none;
}
.question-title-container {
color: var(--sg-ink);
/*background-color: var(--sg-ink);*/
}
.question-valid-container, .question-help-container {
background-color: white;
color:var(--sg-ink-muted);
border:none;
border-bottom-color:#fff;
}
.question-title-container {
border-bottom:1px solid var(--sg-grey-200);
}
.question-container {
color: var(--sg-text);
}
.fruity .question-container.input-error {
box-shadow:0 1px 2px rgba(0,0,0,.2)!important;
}
.fruity .text-danger, .fruity .text-danger:hover, .fruity .text-info {
color: var(--sg-ink-muted);
background-color:var(--sg-white);
font-weight:normal!important;
}
.completed-text .text-danger {
color:var(--sg-danger);
}
.question-valid-container .text-info, .question-valid-container .ls-em-tip {
font-weight:normal!important;
color:var(--sg-text-muted); 
}
.question-message {
font-size: 16px;
color: var(--sg-white);
}
.em-tip {
font-size: 16px;
color: var(--sg-white);
}
.em-success {
font-size: 16px;
color: var(--sg-white);
}
.fruity .save-message .text-info, .fruity .save-message .text-info:hover, .fruity .token-page .text-info, .fruity .token-page .text-info:hover {
color:black;
}
.fruity .text-danger, .fruity .text-danger:hover, .fruity .text-info {
    background-color:#f5f5f5;
}
.fruity .token-page .text-info, .fruity .token-page .text-info:hover {
background-color:var(--sg-surface-alt);
}
.save-message .h2 {
margin-top:0;
margin-bottom:15px;
}
.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;
}
.fruity .slider-selection {
background-image: linear-gradient(to right, var(--sg-border) 0%, var(--sg-accent) 100%);
}
.space-col {
margin-top: 1em;
margin-bottom: 0.5em;
}
.survey-name {
padding-bottom: 0.35em;
padding-top: 1.25em;
font-family: "Merriweather Sans", sans-serif;
font-size: 2rem;        /* 30px */
font-weight:700;
hyphens:none;
color:#26262C;
text-align:left;
letter-spacing: normal;
}
.survey-description.text-info.text-center {
background-color:var(--sg-white);
}
#navigator-container {
padding-bottom:6em;
}
#main-row {
/*padding-bottom:2.5em;*/
}
.fruity .survey-welcome {
    padding-top:1.5rem;
}
.fruity .survey-welcome p {
font-weight: 300;
line-height: 1.5;
margin:0 0 1em;
hyphens: none;
font-size:1.125rem;
color:#26262C;
}
.fruity .survey-welcome ul, .survey-welcome li {
font-weight: 300;
line-height: 1.15;
hyphens: none;
font-size:18px; 
}
@media (max-width: 767px) {
.fruity .question-text, .fruity .question-text p {
        font-size:1.2rem!important;
    }
}
.fruity .question-text, .fruity .question-text p {
margin: 10px 0 10px;
hyphens: none;
color:var(--sg-ink);
line-height:1.5;
font-size: 1.1rem;
font-weight:600;
}
.fruity .question-count-text {
padding-bottom: 0.75em;
}
.fruity .completed-wrapper {
padding-top: 60px;
}
.datasecurity-accepted-wrapper a, .url-wrapper a, .url-wrapper-survey-print a, .url-wrapper-survey-return a {
color: var(--sg-ink);
text-decoration: none;
border-bottom: 1px solid transparent;
transition: all 0.5s ease-in-out;
}
.datasecurity-accepted-wrapper a:hover, .url-wrapper a:hover, .url-wrapper-survey-print a:hover, .url-wrapper-survey-return a:hover {
border-color: var(--sg-accent);
color: var(--sg-ink-strong);
}

/* Navbar / Logo */

.logo-container>img {
max-height: 4.5em;
padding: 20px;
width: auto;
height: auto;
}
.logo-container2>img {
max-height: 5em;
padding: 20px;
width: auto;
height: auto;
}
.logo-container4>img {
max-height: 8em;
margin-top: 5px;
padding: 10px;
width: auto;
height: auto;
}
.logo-container2 {
float: right!important;
}
.logo-container3 {
flex-basis: 55%;
}
.navbar-default {
background-color: var(--sg-white);
height: auto;
border-bottom: 3px solid var(--sg-accent); /* Akzentlinie gemaess Styleguide */
}
.navbar-brand {
line-height: normal;
color: var(--sg-text);
}
.logo-container.hidden-xs {
display: block !important;
}
.navbar-default .navbar-nav>li>a {
transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
color: var(--sg-ink);
font-size:95%;
}
.navbar-default .navbar-nav>li>a:hover {
color: var(--sg-ink-strong)!important;
font-size:95%;
}
.navbar-default .navbar-toggle .icon-bar {
background-color: var(--sg-text);
}
.navbar-row {
max-height: 10vh;
}
.navbar-column {
float: left;
width: 50%;
padding: 5px;
height: auto;
}
.navbar-row::after {
content: "";
clear: both;
display: table;
}
img.logo.img-responsive.rechts {
float: right!important;
padding-right: 10px!important;
margin-right: 0!important;
}
.rechts {
float: right;
}
.form-control {
margin-bottom: 5px;
}

/* Footer */

html, body {
  min-height: 100%;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* Ersetze .content-wrapper mit der tatsächlichen Klasse/ID
   des LimeSurvey-Fruity-Wrapper-Elements, z.B. #pjax-content
   oder .container, je nach Theme-Markup */
.fruity .container {
  flex: 1 0 auto;
}

.fruity .footer {
  position: static;   /* statt fixed */
  width: 100%;
  height: auto;
  background-color: var(--sg-ink);
  color: var(--sg-white);
  text-align: center;
  margin-top: auto;    /* neu: schiebt den Footer ans Ende, wenn Content kürzer ist */
}
.footer-text {
color: white;
text-align: center;
font-size:.925rem;
}
.footer-inner {
position: relative;
top: 50%;
transform: translateY(-50%);
}
.fruity .footer a {
text-decoration: none;
border-bottom: 1px solid transparent;
transition: all 0.5s ease-in-out;
line-height: 1.2;
color:white;
}
.fruity .footer a:hover {
border-color: white;
color:white;
}

/* Custom Slider */
/* NOCH ANZUPASSEN */

/* Some more height for the slider container */
.slider-container {
margin-top: 4.5em;
}

/* Background image for the slider handle */

/* Move the tooltip up a bit */
.slider .tooltip.top {
margin-top: -40px;
}

/* Colour gradient for the left part of the slider */
/* Farben gemaess Styleguide (Akzent -> warme Flaeche); hier bewusst literale
Hex-Werte, da der IE-Filter keine CSS-Variablen verarbeitet. */
.slider-selection {
background-image: -webkit-linear-gradient(top, #ffb300 0%, #efede8 100%);
background-image: -o-linear-gradient(top, #ffb300 0%, #efede8 100%);
background-image: linear-gradient(to bottom, #ffb300 0%, #efede8 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffb300', endColorstr='#efede8', GradientType=0);
}

/* Candidate Image - Bild und Text nebeneinander (responsiv) */ 

.candidate-container {
display: flex;
flex-wrap: wrap;
margin-right: 10px;
margin-top:10px;
}
.candidate {
display: flex;
width: 100%;
align-items: center;
}
.candidate img {
width: 25%;
height: auto;
max-width: 100%;
background-color:white!important;
margin-bottom: 20px;
flex-shrink: 0;
}
.candidate-info {
flex: 1;
padding-left: 10px;
padding-bottom:10px;
display: flex;
flex-direction: column;
justify-content: center;
}
@media (max-width: 800px) {
.candidate {
flex-direction: column;
align-items: center;
}
.candidate img {
width: 50%;
height: auto;
}
.candidate-info {
text-align: center;
}
}
/* ============================================================================
   .btn-default.ls-move-previous-btn  ==  .SP-Button + .SP-Button--letter
   1:1-Nachbau des externen Design-Systems (Quelle: style-BUlBPL08.css)

   Uebernommene Quellregeln:
     .SP-Button                                        (Basis-Box, Border, Transition)
     .SP-Button  @media <=19.99 / 20-88.99 / >=89rem   (Typografie)
     .SP-Button  @media >=61.5rem / >=89rem            (Padding-Staffelung)
     .SP-Button--letter                                (Groesse, uppercase, bold)
     .SP-Button--letter:not(.SP-Button--active)        (Ruhezustand)
     .SP-Button--letter:...:hover                      (Hover)
     .SP-Button--letter.SP-Button--active              (Aktiv/Pressed)
     .SP-Button--letter:disabled                       (Disabled, gestrichelter Rahmen)
     :focus-visible                                    (globaler Fokusring)

   Aufgeloeste Custom Properties des Quellsystems:
     --color-carrara   #eae8e3 | --color-main       #26262c
     --color-accent    #ffb300 | --color-accent-text#26262c
     --color-dove-gray #727272
   ============================================================================ */

/* --- Basis: SP-Button + SP-Button--letter (Mobile-Basiswerte) ------------- */

.fruity .btn-default.ls-move-previous-btn,
.fruity .btn-lg.ls-move-previous-btn,
.fruity .btn-group-lg>.btn.ls-move-previous-btn,
.fruity #button_365.btn.btn-default {
/* SP-Button: Layout */
display: inline-flex !important;
justify-content: center;
align-items: baseline;
position: relative;
min-width: 3.125rem;
min-height: 3.125rem;
padding: .5625rem 1.0625em !important;  /* !important schlaegt .fruity .btn-lg */
/* SP-Button: Typografie */
font-family: inherit;
font-style: normal;
font-size: 1rem !important;             /* !important schlaegt .fruity .btn-lg (19px) */
text-align: left;
text-decoration: none;
/* SP-Button--letter: Typografie */
/*text-transform: uppercase;*/
/*font-weight: 700;*/
line-height: 0;
/* SP-Button--letter: feste Kantenlaenge + Abstaende */
width: 3.125rem;
height: 3.125rem;
margin-bottom: .3125rem;
margin-right: .3125rem;
/* SP-Button--letter:not(.SP-Button--active): Farben */
color: var(--spbtn-color-main) !important;
background-color: transparent !important;
background-image: none !important;      /* Bootstrap-Gradient entfernen */
border-style: solid !important;
border-width: 3px !important;
border-color: var(--sg-grey-500) !important;
border-radius: 0 !important;            /* SP-Button kennt keinen Radius */
box-shadow: none !important;            /* Bootstrap inset-shadow entfernen */
/* SP-Button: Rest */
transition: background-color .3s, border-color .3s, color .3s, fill .3s;
cursor: pointer;
-webkit-user-select: none;
user-select: none;
}

/* --- Textanpassung -------------------------------------------------------
   .SP-Button--letter ist im Quellsystem fuer EINEN Buchstaben gedacht
   (feste 50x50 px, line-height: 0). Der LimeSurvey-Zurueck-Button traegt
   dagegen ein Wort ("Zurueck") bzw. Icon + Text. Die folgenden vier Zeilen
   geben die Breite frei und zentrieren den Text vertikal.
   Fuer den strikten Quadrat-Look diesen Block einfach loeschen.          */

.fruity .btn-default.ls-move-previous-btn, .fruity #button_365.btn.btn-default {
width: auto;
white-space: nowrap;
line-height: 1;
align-items: center;
}

/* --- Icon im Button (fa / remixicon / inline-SVG) ------------------------ */
/* SP-Button__icon: fill: currentColor; flex-shrink: 0                       */

.fruity .btn-default.ls-move-previous-btn .fa,
.fruity .btn-default.ls-move-previous-btn [class^="ri-"],
.fruity .btn-default.ls-move-previous-btn [class*=" ri-"],
.fruity .btn-default.ls-move-previous-btn svg,
.fruity #button_365.btn.btn-default {
color: inherit;
fill: currentColor;
flex-shrink: 0;
margin-right: .5em;
}

/* --- Responsive Staffelung wie im Quellsystem ---------------------------- */
/* .SP-Button @media (width>=61.5rem) -> padding: .875em 1.375em
   .SP-Button--letter @media (width>=61.5rem) -> 3.75rem x 3.75rem          */

@media (min-width: 61.5rem) { /* = 984px */
.fruity .btn-default.ls-move-previous-btn,
.fruity .btn-lg.ls-move-previous-btn,
.fruity .btn-group-lg>.btn.ls-move-previous-btn,
.fruity #button_365.btn.btn-default {
padding: .875em 1.375em !important;
min-width: 3.75rem;
min-height: 3.75rem;
height: 3.75rem;
}
.fruity .btn-default.ls-move-previous-btn,
.fruity #button_365.btn.btn-default {
width: auto;                          /* strikt waere: width: 3.75rem; */
}
}

/* .SP-Button @media (width>=89rem) -> padding: .69445em .94445em; 1.125rem  */

@media (min-width: 89rem) { /* = 1424px */
.fruity .btn-default.ls-move-previous-btn,
.fruity .btn-lg.ls-move-previous-btn,
.fruity .btn-group-lg>.btn.ls-move-previous-btn,
.fruity #button_365.btn.btn-default {
padding: .69445em .94445em !important;
font-size: 1.125rem !important;
}
}

/* --- Zustand: Fokus (ohne Farbwechsel, wie im Quellsystem) --------------- */
/* Bootstrap faerbt .btn-default:focus um - hier zurueck auf Ruhezustand.    */

.fruity .btn-default.ls-move-previous-btn:focus,
.fruity .btn-default.ls-move-previous-btn.focus,
.fruity #button_365.btn.btn-default:focus {
color: var(--spbtn-color-main) !important;
background-color: transparent !important;
border-color: var(--spbtn-color-carrara) !important;
box-shadow: none !important;
}

/* --- Zustand: Hover ------------------------------------------------------ */
/* .SP-Button--letter:not(.SP-Button--active):not(:disabled):hover
   -> nur die Rahmenfarbe wechselt auf den Akzent                            */

.fruity .btn-default.ls-move-previous-btn:not([disabled]):not(.disabled):hover,
.fruity .btn-default.ls-move-previous-btn:not([disabled]):not(.disabled):focus:hover,
.fruity #button_365.btn.btn-default:hover, 
.fruity #button_365.btn.btn-default.hover {
color: var(--spbtn-color-main) !important;
background-color: transparent !important;
border-color: var(--spbtn-color-accent) !important;
box-shadow: none !important;
}

/* --- Zustand: Aktiv / gedrueckt ------------------------------------------ */
/* .SP-Button--letter.SP-Button--active
   -> gefuellte Akzentflaeche. Bootstrap-.active wird gleich behandelt.      */

.fruity .btn-default.ls-move-previous-btn:not([disabled]):not(.disabled):active,
.fruity .btn-default.ls-move-previous-btn:not([disabled]):not(.disabled).active,
.fruity .open .dropdown-toggle.btn-default.ls-move-previous-btn {
color: var(--spbtn-color-accent-text) !important;
background-color: var(--spbtn-color-accent) !important;
border-color: var(--spbtn-color-accent) !important;
background-image: none !important;
box-shadow: none !important;
}

/* --- Zustand: Disabled --------------------------------------------------- */
/* .SP-Button--letter:disabled -> graue Schrift + gestrichelter Rahmen
   .SP-Button[disabled]        -> cursor: not-allowed                        */

.fruity .btn-default.ls-move-previous-btn[disabled],
.fruity .btn-default.ls-move-previous-btn:disabled,
.fruity .btn-default.ls-move-previous-btn.disabled,
.fruity .btn-default.ls-move-previous-btn[disabled]:hover,
.fruity .btn-default.ls-move-previous-btn.disabled:hover {
color: var(--spbtn-color-dove-gray) !important;
background-color: transparent !important;
border-color: var(--spbtn-color-carrara) !important;
border-style: dashed !important;
box-shadow: none !important;
cursor: not-allowed;
opacity: 1 !important;
}

/* --- Fokusring ----------------------------------------------------------- */
/* Mausklick: kein Ring. Tastatur: globaler :focus-visible aus dem Quellsystem */

.fruity .btn-default.ls-move-previous-btn:focus:not(:focus-visible) {
outline: none !important;
box-shadow: none !important;
}
.fruity .btn-default.ls-move-previous-btn:focus-visible,
.fruity #button_365.btn.btn-default:focus-visible {
outline: 3px solid Highlight;
outline: 3px auto -webkit-focus-ring-color;
outline-offset: 5px;
z-index: 2;
}

/* ============================================================================
   .btn / .btn-info / .ls-language-changer-item  ==  .SP-Button + .SP-Button--default + .focus--mouse
   1:1-Nachbau des externen Design-Systems (Quelle: style-BUlBPL08.css)
   ============================================================================ */

.fruity .btn,
.fruity .btn-info,
.fruity .ls-language-changer-item,
.fruity .btn.btn-info.ls-language-changer-item {
/* SP-Button: Layout */
display: inline-flex !important;
align-items: baseline;
justify-content: center;
min-width: 3.125rem;
min-height: 3.125rem;
padding: .5625rem 1.0625em !important;
margin-bottom: 5px;
/* SP-Button: Typografie */
font-family: inherit;
font-size: 1rem !important;
line-height: 1.625;
text-align: left;
text-decoration: none;
/* SP-Button--default: Farben */
color: var(--spbtn-color-accent-text) !important;
background-color: var(--spbtn-color-accent) !important;
background-image: none !important;
border-style: solid !important;
border-width: 3px !important;
border-color: var(--spbtn-color-accent) !important;
border-radius: 0 !important;
box-shadow: none !important;
/* SP-Button: Rest */
transition: background-color .3s, border-color .3s, color .3s, fill .3s;
cursor: pointer;
}

/* SP-Button: responsive Padding-Staffelung */
@media (min-width: 61.5rem) {
.fruity .btn,
.fruity .btn-info,
.fruity .ls-language-changer-item,
.fruity .btn.btn-info.ls-language-changer-item {
padding: .875em 1.375em !important;
}
}
@media (min-width: 89rem) {
.fruity .btn,
.fruity .btn-info,
.fruity .ls-language-changer-item,
.fruity .btn.btn-info.ls-language-changer-item {
padding: .69445em .94445em !important;
font-size: 1.125rem !important;
line-height: 1.61111;
}
}

/* SP-Button--default:not(:disabled):hover -> abgedunkelte Akzentfarbe */
.fruity .btn:hover,
.fruity .btn:focus,
.fruity .btn.focus,
.fruity .btn-info:hover,
.fruity .btn-info:focus,
.fruity .ls-language-changer-item:hover,
.fruity .ls-language-changer-item:focus,
.fruity .btn.btn-info.ls-language-changer-item:hover,
.fruity .btn.btn-info.ls-language-changer-item:focus {
color: var(--spbtn-color-accent-text) !important;
background-color: var(--spbtn-color-accent-hover) !important;
border-color: var(--spbtn-color-accent-hover) !important;
box-shadow: none !important;
}

/* SP-Button--default: aktiver / gedrueckter Zustand */
.fruity .btn:active,
.fruity .btn.active,
.fruity .btn-info:active,
.fruity .btn-info.active,
.fruity .ls-language-changer-item:active,
.fruity .ls-language-changer-item.active,
.fruity .btn.btn-info.ls-language-changer-item:active,
.fruity .btn.btn-info.ls-language-changer-item.active,
.fruity .open .dropdown-toggle.btn,
.fruity .open .dropdown-toggle.btn-info {
color: var(--spbtn-color-accent-text) !important;
background-color: var(--spbtn-color-accent-hover) !important;
border-color: var(--spbtn-color-accent-hover) !important;
box-shadow: none !important;
}

/* SP-Button--default:disabled */
.fruity .btn[disabled],
.fruity .btn.disabled,
.fruity .btn-info[disabled],
.fruity .btn-info.disabled,
.fruity .ls-language-changer-item[disabled],
.fruity .ls-language-changer-item.disabled {
color: var(--spbtn-color-disabled-text) !important;
background-color: var(--spbtn-color-disabled-bg) !important;
border-color: var(--spbtn-color-disabled-bg) !important;
cursor: not-allowed;
opacity: 1 !important;
}
.fruity .btn[disabled]:hover,
.fruity .btn.disabled:hover,
.fruity .btn-info[disabled]:hover,
.fruity .btn-info.disabled:hover,
.fruity .ls-language-changer-item[disabled]:hover,
.fruity .ls-language-changer-item.disabled:hover {
color: var(--spbtn-color-disabled-text) !important;
background-color: var(--spbtn-color-disabled-bg) !important;
border-color: var(--spbtn-color-disabled-bg) !important;
}

/* focus--mouse: bei Mausfokus keinen Tastatur-Ring anzeigen */
.fruity .btn:focus:not(:focus-visible),
.fruity .btn-info:focus:not(:focus-visible),
.fruity .ls-language-changer-item:focus:not(:focus-visible) {
outline: none !important;
box-shadow: none !important;
}

/* Sichtbarer Fokus-Ring nur bei echter Tastaturnavigation */
.fruity .btn:focus-visible,
.fruity .btn-info:focus-visible,
.fruity .ls-language-changer-item:focus-visible {
outline: 3px solid Highlight;
outline: 3px auto -webkit-focus-ring-color;
outline-offset: 5px;
z-index: 2;
}

/* ============================================================================
   Sprachumschalter (.btn.btn-info.ls-language-changer-item):
   Groesse zurueck auf Ausgangslage, aber in rem/em statt px
   ============================================================================ */

.fruity .ls-language-changer-item,
.fruity .btn.btn-info.ls-language-changer-item {
min-width: 0 !important;
min-height: 0 !important;
padding: .375rem .75rem !important;
font-size: .875rem !important;
line-height: 1.42857143 !important;
/*border-width: 1px !important;*/
/*border-radius: .25rem !important;*/
}

@media (min-width: 61.5rem) {
.fruity .ls-language-changer-item,
.fruity .btn.btn-info.ls-language-changer-item {
padding: .375rem .75rem !important;
font-size: .875rem !important;
}
}
@media (min-width: 89rem) {
.fruity .ls-language-changer-item,
.fruity .btn.btn-info.ls-language-changer-item {
padding: .375rem .75rem !important;
font-size: .875rem !important;
line-height: 1.42857143 !important;
}
}

/* === NEUE ERGÄNZUNG === */

:root {
  /* Farben 1:1 aus dem SP-Design-System */
  --sp-accent:              #ffb300;  /* --color-accent          */
  --sp-accent-hover:        #d99800;  /* color-mix(accent 85%, black 15%) */
  --sp-accent-text:         #26262c;  /* --color-accent-text     */
  --sp-field-bg:            #efede8;  /* --color-pampas-darker   */
  --sp-field-text:          #26262c;  /* --color-text            */
  --sp-field-text-disabled: #7d7d80;  /* :disabled color         */
  --sp-label:               #727272;  /* --color-dove-gray       */
  --sp-invalid:             #db3703;  /* --color-invalid         */
  --sp-autofill:            #faffbd;  /* --color-autofill        */
  --sp-link-border:         #ffb300;  /* --color-link-border     */

  /* Pfeil-Icon = Original-Pfad aus <symbol id="SPi-link"> (viewBox 0 0 60 60).
     Der viewBox ist hier auf die Glyphe zugeschnitten (20 21.586 21.414 16.829),
     damit "mask-size: contain" die Groesse exakt trifft.
     Wird per mask eingefaerbt, nimmt also automatisch currentColor an. */
  --sp-icon-link: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='20%2021.586%2021.414%2016.829'%3E%3Cpath%20d='M37.586,29L31.586,23L33,21.586L41.414,30L33,38.414L31.586,37L37.586,31L20,31L20,29Z'/%3E%3C/svg%3E");

  /* Rendergroesse der Glyphe:
     Button: 1em    x scale(2.5) x (21.414/60 bzw. 16.829/60)
     Link:   1.25em x scale(2)   x (21.414/60 bzw. 16.829/60)  -> identisch */
  --sp-icon-link-w: .892em;
  --sp-icon-link-h: .701em;
}

/* ============================================================================
   ZIEL 1 – Submit-Button  ==  .SP-Button.SP-Button--default.SP-Iconized--left
   Geometrie/Farben liegen bereits im .fruity .btn-Block der custom.css.
   Hier nur die Deltas: exakter Hover-Wert + Icon.
   ============================================================================ */

.fruity .ls-move-submit-btn {
    text-transform:lowercase;
}

/* Exakter Hover-Wert aus color-mix(in sRGB, #ffb300 85%, black 15%) */
.fruity .btn:hover,
.fruity .btn:focus,
.fruity .btn.focus,
.fruity .btn-primary:hover,
.fruity .btn-primary:focus,
.fruity .btn-primary.focus,
.fruity .btn:active,
.fruity .btn.active,
.fruity .btn-primary:active,
.fruity .btn-primary.active {
  background-color: var(--sp-accent-hover) !important;
  border-color:     var(--sp-accent-hover) !important;
}

/* Ggf. vorhandenes LimeSurvey-Icon im Submit-Button ausblenden
   (verhindert doppelte Icons) */
.fruity .ls-move-submit-btn .fa,
.fruity .ls-move-submit-btn [class^="ri-"],
.fruity .ls-move-submit-btn [class*=" ri-"],
.fruity #ls-button-submit .fa,
.fruity #ls-button-submit [class^="ri-"],
.fruity #ls-button-submit [class*=" ri-"] {
  display: none !important;
}

/* SP-Iconized--left: Pfeil-Icon vor dem Text.
   Der Button ist durch die bestehenden Regeln bereits inline-flex,
   das ::before wird damit automatisch zum ersten Flex-Item. */
@supports ((-webkit-mask-image: none) or (mask-image: none)) {

  .fruity .ls-move-submit-btn::before,
  .fruity #ls-button-submit::before {
    content: "";
    align-self: center;      /* SP-Button__icon sitzt optisch mittig */
    flex: 0 0 auto;
    width:  var(--sp-icon-link-w);
    height: var(--sp-icon-link-h);
    /* Original: 1em-Box, margin-left -.15em / margin-right .75em.
       Da unsere Box nur .892em statt 1em breit ist, um (1-.892)/2 = .054em
       korrigiert -> optisch identische Abstaende. */
    margin-left: -.096em;
    margin-right: .804em;
    background-color: currentColor;
    -webkit-mask: var(--sp-icon-link) no-repeat center / contain;
            mask: var(--sp-icon-link) no-repeat center / contain;
    transition: background-color .3s ease;
  }

  /* Optional: gleiches Icon auch fuer "Weiter" aktivieren
  .fruity .ls-move-next-btn::before { ...gleiche Deklarationen... }
  */
}

/* ============================================================================
   ZIEL 2 – Eingabefelder  ==  .SP-Field__control
   Referenz: bg #efede8, KEIN sichtbarer Rahmen, KEIN Radius, kein Schatten.
   ============================================================================ */

.fruity .form-control,
.fruity input.form-control,
.fruity select.form-control,
.fruity textarea.form-control {
  background-color: var(--sp-field-bg);
  background-image: none;
  border: 0 solid var(--sp-field-bg);   /* SP: border: 0px solid ... */
  border-radius: 0;                     /* SP kennt keinen Radius     */
  color: var(--sp-field-text);
  font-family: inherit;
  line-height: inherit;
  box-shadow: none;
  transition: background-color .3s ease, box-shadow .3s ease;
}

/* Bootstrap faerbt/schattiert :focus um – hier auf SP-Ruhezustand zurueck */
.fruity .form-control:focus {
  background-color: var(--sp-field-bg);
  border-color: var(--sp-field-bg);
  box-shadow: none;
  outline: none;
}

/* SP zeigt nur bei echter Tastaturnavigation einen Fokusring */
.fruity .form-control:focus-visible {
  outline: 3px solid Highlight;
  outline: 3px auto -webkit-focus-ring-color;
  outline-offset: 1px;
  z-index: 2;
}

/* OPTIONAL – zusaetzlicher Akzent-Rahmen bei Fokus (bessere Bedienbarkeit
   in Umfragen, weicht minimal vom Original ab). Bei Bedarf einkommentieren:
.fruity .form-control:focus {
  box-shadow: inset 0 0 0 3px var(--sp-accent);
}
*/

.fruity .form-control::placeholder {
  color: var(--sp-label);
  opacity: 1;
}

.fruity .form-control:disabled,
.fruity .form-control[readonly],
.fruity .form-control.disabled {
  background-color: var(--sp-field-bg);
  color: var(--sp-field-text-disabled);
  cursor: not-allowed;
  opacity: 1;
}

/* Autofill (SP: --color-autofill) */
.fruity .form-control:-webkit-autofill,
.fruity .form-control:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 100px var(--sp-autofill) inset;
  -webkit-text-fill-color: var(--sp-field-text);
}

/* Fehlerzustand: da border-width 0 ist, ueber inset-Shadow visualisieren
   (ERSETZT die alte Regel .fruity .has-error .form-control) */
.fruity .has-error .form-control {
  border-color: var(--sp-invalid);
  box-shadow: inset 0 0 0 3px var(--sp-invalid);
}
.fruity .has-error .control-label,
.fruity .has-error .ls-label-xs-visibility {
  color: var(--sp-invalid);
}

/* ============================================================================
   ZIEL 3b - Pfeil-Links OHNE zusaetzliches <span>
   Zwei Anwendungsformen:
     a) .stuttgart-link   -> Klasse direkt auf das <a>
     b) .stuttgart-links  -> Klasse auf einen Container; alle <a> darin
                             bekommen die Gestaltung automatisch
   Unterschied zu .stuttgart-link-arrow: die Unterstreichung wird hier per
   ::after gezeichnet statt per border-bottom am Innen-<span>. Dadurch bleibt
   das Icon frei von der Linie, ohne dass zusaetzliches Markup noetig ist.
   ============================================================================ */

@keyframes sp-flickering-bar {
  0%   { background-color: var(--sp-link-border); }
  50%  { background-color: transparent; }
  100% { background-color: var(--sp-link-border); }
}

.fruity a.stuttgart-link,
a.stuttgart-link,
.stuttgart-links a:not(.btn):not(.stuttgart-link-arrow):not(.ls-language-changer-item) {
  /* Pro Link ueberschreibbar, z.B. style="--sp-link-icon:url(...)"
     -> so lassen sich andere Symbole aus dem SP-Sprite einsetzen. */
  --sp-link-icon:   var(--sp-icon-link);
  --sp-link-icon-w: var(--sp-icon-link-w);
  --sp-link-icon-h: var(--sp-icon-link-h);
  --sp-link-gap:    .43em;

  position: relative;
  display: inline-block;
  white-space: nowrap;            /* wie .SP-Paragraph__link */
  line-height: 1.15;              /* wie .SP-Paragraph__linkText */
  color: inherit;
  text-decoration: none;
  padding-bottom: 2px;            /* Platz fuer die Akzentlinie */
  border-bottom: 0 !important;    /* schlaegt .fruity .panel-body a usw. */
}

/* Icon (im Fluss, damit die Textposition automatisch stimmt) */
@supports ((-webkit-mask-image: none) or (mask-image: none)) {

  .fruity a.stuttgart-link::before,
  a.stuttgart-link::before,
  .stuttgart-links a:not(.btn):not(.stuttgart-link-arrow):not(.ls-language-changer-item)::before {
    content: "";
    display: inline-block;
    width:  var(--sp-link-icon-w);
    height: var(--sp-link-icon-h);
    margin-right: var(--sp-link-gap);
    vertical-align: baseline;
    background-color: currentColor;
    -webkit-mask: var(--sp-link-icon) no-repeat center / contain;
            mask: var(--sp-link-icon) no-repeat center / contain;
  }
}

/* Akzentlinie - beginnt exakt hinter dem Icon */
.fruity a.stuttgart-link::after,
a.stuttgart-link::after,
.stuttgart-links a:not(.btn):not(.stuttgart-link-arrow):not(.ls-language-changer-item)::after {
  content: "";
  position: absolute;
  left: calc(var(--sp-link-icon-w) + var(--sp-link-gap));
  right: 0;
  bottom: 0;
  height: 2px;
  background-color: var(--sp-link-border);
}

.fruity a.stuttgart-link:hover::after,
a.stuttgart-link:hover::after,
.stuttgart-links a:not(.btn):not(.stuttgart-link-arrow):not(.ls-language-changer-item):hover::after {
  animation: sp-flickering-bar .5s ease;
}

.fruity a.stuttgart-link:focus-visible,
a.stuttgart-link:focus-visible,
.stuttgart-links a:not(.btn):not(.stuttgart-link-arrow):not(.ls-language-changer-item):focus-visible {
  outline: 3px solid Highlight;
  outline: 3px auto -webkit-focus-ring-color;
  outline-offset: 3px;
}

/* Bilder-Links im Container ausnehmen (kein Icon, keine Linie) */
.stuttgart-links a:has(> img)::before,
.stuttgart-links a:has(> img)::after {
  content: none;
}

/* =========================================================
   Footer Layout – reine Struktur-/Flexbox-Regeln
   (keine Farben, Schriften, Border, Schatten o.ä. – das
   visuelle Design kommt vollständig aus dem bestehenden Theme)
   ========================================================= */

.ls-footer-container {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding: 16px 24px;
    box-sizing: border-box;
}

/* Basis: Mobile-First -> gestapelt */
.ls-footer-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
    width: 100%;
}

/* Link-Gruppe: auf Mobilgeräten untereinander, zentriert */
.ls-footer-links {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    margin-top:1.5rem;
}

.ls-footer-links a {
    display: block;
}

/* Logo-Container: horizontal zentriert, unterhalb der Links */
.ls-footer-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-top:-5px;
}

.ls-footer-logo-img {
    height: 40px;
    width: auto;
    max-width: 100%;
}

/* =========================================================
   Desktop / Tablet ab 768px: nebeneinander
   ========================================================= */
@media (min-width: 768px) {

    .ls-footer-row {
        flex-direction: row;
        align-items: self-end;
        justify-content: space-between;
        gap: 24px;
    }

    /* Links nebeneinander mit ausreichendem Abstand */
    .ls-footer-links {
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        gap: 32px;
        width: auto;
        margin-top:0;
    }

    /* Logo rechts, vertikal zentriert auf Höhe der Links */
    .ls-footer-logo {
        justify-content: flex-end;
        width: auto;
        margin-left: auto;
        margin-top:0;
    }
}

.fruity .footer {
    padding:1em;
}

html, body {
  margin: 0;
  padding: 0;
}
.fruity .footer > *:last-child,
.footer-inner > *:last-child,
.ls-footer-row > *:last-child {
  margin-bottom: 0;
}

html, body {
  height: 100%;
  min-height: 100%;
}
body {
    padding-bottom:0!important;
}

#question403 .question-title-container {
    border:none;
}
#question403 .question-valid-container,
#question403 .question-help-container,
#question403 .answer-container {
    display:none;
}
#question403.question-container {
    border-top:none;
    box-shadow:none;
    border-left:none;
    border-right:none;
    border-bottom:none;
    font-weight:400!important;
    font-style:italic;
    font-size:.75rem!important;
}
.fruity #question403.question-container .question-text {
    font-weight:400!important;
    font-style:italic;
    font-size:.95rem!important;
    margin-top:0!important;
}
.fruity #question403 .question-title-container {
    padding-top:0;
    padding-bottom:0;
}

.fruity .btn.btn-success.ls-move-submit-btn {
    text-transform:none;
}

/* ---------- 1. Backdrop bleibt fixiert und liegt unter dem Modal ---------- */

.modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--ls-vh, 100vh);
    z-index: 1040;
}


/* ---------- 2. Stapelreihenfolge, sobald das Modal im <body> hängt -------- */

body > .file-upload-modal { z-index: 1050; }
body > .modal-backdrop    { z-index: 1040; }


/* ---------- 3. Rahmen und Zentrierung ------------------------------------ */

body > .file-upload-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: var(--ls-vh, 100vh);
    margin: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* display:flex + margin:auto zentriert echt und vermeidet den bekannten
   Flexbox-Effekt, bei dem align-items:center den oberen Rand langer Inhalte
   abschneidet und unscrollbar macht. Das !important überschreibt das inline
   gesetzte display:block von Bootstrap. */
body > .file-upload-modal.in {
    display: flex !important;
    align-items: center;
    justify-content: center;
}

body > .file-upload-modal .modal-dialog {
    margin: auto;
    width: auto;
    max-width: 600px;
    max-height: calc(var(--ls-vh, 100vh) - 20px);
    display: flex;
    flex-direction: column;

    /* transform erzeugt einen Containing-Block für position:fixed-Kinder und
       einen eigenen Stacking-Context. Für ein Modal, das einen iframe mit
       Uploader trägt, ist das reines Risiko ohne Nutzen - die Slide-in-
       Animation von Bootstrap entfällt bewusst. */
    -webkit-transform: none !important;
            transform: none !important;
}

body > .file-upload-modal .modal-content {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}


/* ---------- 4. Uploader-Fläche -------------------------------------------
   Der iframe braucht eine verlässliche Höhe und darf von nichts überlagert
   werden. Reagiert der Button im Modal sichtbar auf :hover, erreichen Zeiger-
   Events den iframe bereits korrekt - dann liegt die Ursache nicht hier.     */

body > .file-upload-modal .modal-body {
    position: relative;
    z-index: 1;
    padding: 10px;
}

body > .file-upload-modal iframe {
    display: block;
    width: 100%;
    min-height: 320px;
    border: 0;
    pointer-events: auto;
}


/* ---------- 5. Scroll-Lock ----------------------------------------------- */

body.ls-modal-lock {
    position: fixed;
    top: var(--ls-lock-top, 0px);
    left: 0;
    right: 0;
    width: 100%;
    overflow: hidden;
}


/* ---------- 6. Kleine Viewports ------------------------------------------ */

@media (max-width: 767px) {
    body > .file-upload-modal .modal-dialog {
        width: calc(100% - 20px);
        max-width: none;
    }

    body > .file-upload-modal iframe {
        min-height: 260px;
    }
}

p.uploadmsg { font-size: 0; }
p.uploadmsg::after {
    content: "Folgende Formate sind erlaubt: JPG, JPEG, PNG, HEIC. Die maximale Dateigröße beträgt 10 MB.";
    font-size: 14px;
}

#vmsg_384_num_answers {
    display:none;
}

#ls-button-previous.ls-move-btn.ls-move-previous-btn.action--ls-button-previous.btn.btn-lg.btn-default  {
    text-transform:lowercase;
}