/* =========================================================
   CHATDESIGN NUR FÜR RUN-POSITION 110
   nur Seiten mit .wa_screen
   Instruktionsseite bleibt normal
   funktioniert mit chatformat_v3.xlsx
   ========================================================= */

div.run_position_110:has(.wa_screen) {
    background: #d9dbd5 !important;
}

/* ---------------------------------------------------------
   Hauptcontainer
   --------------------------------------------------------- */
div.run_position_110:has(.wa_screen) .survey-container,
div.run_position_110:has(.wa_screen) .main-survey-container,
div.run_position_110:has(.wa_screen) .form-horizontal,
div.run_position_110:has(.wa_screen) .container,
div.run_position_110:has(.wa_screen) .run_content {
    max-width: 760px !important;
    width: min(92vw, 760px) !important;
    margin: 24px auto !important;
    padding: 0 !important;
    background: #efeae2 !important;
    border-radius: 26px !important;
    overflow: hidden !important;
    box-shadow: 0 12px 34px rgba(0,0,0,0.14) !important;
    border: none !important;
    position: relative !important;
    background-image:
        radial-gradient(rgba(0,0,0,0.022) 1px, transparent 1px),
        radial-gradient(rgba(0,0,0,0.016) 1px, transparent 1px);
    background-position: 0 0, 12px 12px;
    background-size: 24px 24px;
}

/* ---------------------------------------------------------
   Header
   --------------------------------------------------------- */
div.run_position_110:has(.wa_screen) .survey-container::before,
div.run_position_110:has(.wa_screen) .main-survey-container::before,
div.run_position_110:has(.wa_screen) .form-horizontal::before,
div.run_position_110:has(.wa_screen) .container::before,
div.run_position_110:has(.wa_screen) .run_content::before {
    content: "Lea\Aonline";
    white-space: pre;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 108px;
    padding: 18px 24px 0 88px;
    box-sizing: border-box;
    background: #0b8f7a;
    color: #ffffff;
    font-size: 22px;
    line-height: 1.15;
    font-weight: 700;
    z-index: 20;
    pointer-events: none;
}

/* Profilbild */
div.run_position_110:has(.wa_screen) .survey-container::after,
div.run_position_110:has(.wa_screen) .main-survey-container::after,
div.run_position_110:has(.wa_screen) .form-horizontal::after,
div.run_position_110:has(.wa_screen) .container::after,
div.run_position_110:has(.wa_screen) .run_content::after {
    content: "";
    position: absolute;
    top: 16px;
    left: 20px;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 0 0 4px rgba(255,255,255,0.16);
    z-index: 22;
}

/* ---------------------------------------------------------
   Form unter Header schieben
   --------------------------------------------------------- */
div.run_position_110:has(.wa_screen) form {
    position: static !important;
    margin: 0 !important;
    padding: 146px 24px 28px 24px !important;
    background: transparent !important;
}

div.run_position_110:has(.wa_screen) fieldset {
    border: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* ---------------------------------------------------------
   Standardlayout neutralisieren
   --------------------------------------------------------- */
div.run_position_110:has(.wa_screen) .row,
div.run_position_110:has(.wa_screen) .form-group,
div.run_position_110:has(.wa_screen) .control-group {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

div.run_position_110:has(.wa_screen) .form-group,
div.run_position_110:has(.wa_screen) .control-group,
div.run_position_110:has(.wa_screen) .fieldbook-item,
div.run_position_110:has(.wa_screen) .survey-item {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    margin: 0 0 18px 0 !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    clear: both !important;
}

/* ---------------------------------------------------------
   Chat-Wrapper neutralisieren
   --------------------------------------------------------- */
div.run_position_110:has(.wa_screen) .wa_note,
div.run_position_110:has(.wa_screen) .wa_number,
div.run_position_110:has(.wa_screen) .wa_submit,
div.run_position_110:has(.wa_screen) .wa_intro_lea,
div.run_position_110:has(.wa_screen) .wa_intro_prompt {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    position: relative !important;
}

div.run_position_110:has(.wa_screen) .wa_note > label,
div.run_position_110:has(.wa_screen) .wa_note .control-label,
div.run_position_110:has(.wa_screen) .wa_number > label,
div.run_position_110:has(.wa_screen) .wa_number .control-label,
div.run_position_110:has(.wa_screen) .wa_intro_lea > label,
div.run_position_110:has(.wa_screen) .wa_intro_prompt > label {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    float: none !important;
    text-align: left !important;
    overflow: visible !important;
}

/* ---------------------------------------------------------
   Intro links: Lea-Nachricht
   --------------------------------------------------------- */
div.run_position_110:has(.wa_screen) .wa_intro_lea .wa_screen,
div.run_position_110:has(.wa_screen) .wa_intro_lea {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
    margin: 0 0 8px 0 !important;
    padding: 0 !important;
    overflow: visible !important;
}

div.run_position_110:has(.wa_screen) .wa_intro_lea .wa_bubble.wa_lea,
div.run_position_110:has(.wa_screen) .wa_intro_lea .wa_bubble,
div.run_position_110:has(.wa_screen) .wa_intro_lea label .wa_bubble {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    align-self: flex-start !important;
    width: fit-content !important;
    max-width: 76% !important;
    margin: 0 0 12px 0 !important;
    padding: 16px 18px !important;
    background: #ffffff !important;
    color: #111b21 !important;
    border-radius: 12px 12px 12px 4px !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08) !important;
    font-size: 18px !important;
    line-height: 1.45 !important;
    font-weight: 400 !important;
    text-align: left !important;
    border: none !important;
    clear: both !important;
    float: none !important;
}

/* ---------------------------------------------------------
   Intro rechts: grüner Prompt
   --------------------------------------------------------- */
div.run_position_110:has(.wa_screen) .wa_intro_prompt,
div.run_position_110:has(.wa_screen) .wa_intro_prompt label,
div.run_position_110:has(.wa_screen) .wa_intro_prompt .control-label {
    display: flex !important;
    justify-content: flex-end !important;
    align-items: flex-start !important;
    width: 100% !important;
    margin: 0 0 12px 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

div.run_position_110:has(.wa_screen) .wa_intro_prompt .wa_bubble.wa_du,
div.run_position_110:has(.wa_screen) .wa_intro_prompt .wa_bubble,
div.run_position_110:has(.wa_screen) .wa_intro_prompt label .wa_bubble {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: fit-content !important;
    max-width: 76% !important;
    margin: 0 !important;
    padding: 14px 16px !important;
    background: #d9fdd3 !important;
    color: #111b21 !important;
    border-radius: 12px 12px 4px 12px !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08) !important;
    font-size: 18px !important;
    line-height: 1.45 !important;
    font-weight: 400 !important;
    text-align: left !important;
    border: none !important;
    clear: both !important;
    float: none !important;
}

/* ---------------------------------------------------------
   Antwortoptionen rechts grün
   --------------------------------------------------------- */
div.run_position_110:has(.wa_screen) .wa_number label,
div.run_position_110:has(.wa_screen) .wa_number .control-label {
    display: flex !important;
    justify-content: flex-end !important;
    align-items: flex-start !important;
    width: 100% !important;
    max-width: 100% !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 0 8px 0 !important;
    float: none !important;
    text-align: left !important;
}

div.run_position_110:has(.wa_screen) .wa_number label .wa_bubble.wa_du,
div.run_position_110:has(.wa_screen) .wa_number .control-label .wa_bubble.wa_du,
div.run_position_110:has(.wa_screen) .wa_number .wa_bubble.wa_du {
    display: inline-block !important;
    width: fit-content !important;
    max-width: 78% !important;
    margin: 0 !important;
    padding: 14px 16px !important;
    background: #d9fdd3 !important;
    color: #111b21 !important;
    border-radius: 12px 12px 4px 12px !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08) !important;
    font-size: 18px !important;
    line-height: 1.45 !important;
    font-weight: 400 !important;
    text-align: left !important;
    border: none !important;
}

/* ---------------------------------------------------------
   Zahlenfelder rechts
   --------------------------------------------------------- */
div.run_position_110:has(.wa_screen) .col-sm-9,
div.run_position_110:has(.wa_screen) .col-md-9,
div.run_position_110:has(.wa_screen) .col-lg-9,
div.run_position_110:has(.wa_screen) .controls,
div.run_position_110:has(.wa_screen) .form-group > div,
div.run_position_110:has(.wa_screen) .control-group > div {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    justify-content: flex-end !important;
}

div.run_position_110:has(.wa_screen) select,
div.run_position_110:has(.wa_screen) input[type="text"],
div.run_position_110:has(.wa_screen) input[type="number"],
div.run_position_110:has(.wa_screen) textarea,
div.run_position_110:has(.wa_screen) .form-control {
    width: 108px !important;
    min-width: 108px !important;
    max-width: 108px !important;
    height: 54px !important;
    padding: 10px 12px !important;
    margin: 0 !important;
    border: 1.5px solid #d1d7db !important;
    border-radius: 16px !important;
    background: #ffffff !important;
    color: #111b21 !important;
    font-size: 18px !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05) !important;
    appearance: auto !important;
}

div.run_position_110:has(.wa_screen) .bootstrap-touchspin,
div.run_position_110:has(.wa_screen) .input-group {
    width: 108px !important;
    min-width: 108px !important;
    max-width: 108px !important;
    margin-left: auto !important;
}

div.run_position_110:has(.wa_screen) .bootstrap-touchspin .input-group-btn,
div.run_position_110:has(.wa_screen) .bootstrap-touchspin-up,
div.run_position_110:has(.wa_screen) .bootstrap-touchspin-down,
div.run_position_110:has(.wa_screen) .btn.bootstrap-touchspin-up,
div.run_position_110:has(.wa_screen) .btn.bootstrap-touchspin-down {
    display: none !important;
}
/* ---------------------------------------------------------
   Fehlermeldung kompakt und wirklich zentriert
   --------------------------------------------------------- */
div.run_position_110:has(.wa_screen) .has-error,
div.run_position_110:has(.wa_screen) .help-block-wrapper,
div.run_position_110:has(.wa_screen) .validation-message-wrapper,
div.run_position_110:has(.wa_screen) .form-group.has-error,
div.run_position_110:has(.wa_screen) .control-group.has-error {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    width: 100% !important;
    text-align: center !important;
}

/* eigentliche rote Box */
div.run_position_110:has(.wa_screen) .alert-danger,
div.run_position_110:has(.wa_screen) .validation-message,
div.run_position_110:has(.wa_screen) .help-block.text-danger,
div.run_position_110:has(.wa_screen) .text-danger {
    display: table !important;
    width: auto !important;
    max-width: 80% !important;

    margin: 14px auto 10px auto !important;
    padding: 10px 14px !important;

    border-radius: 12px !important;
    border: 1px solid #e7bcc3 !important;
    background: #ead6d9 !important;
    color: #111b21 !important;

    font-size: 16px !important;
    line-height: 1.4 !important;

    box-shadow: none !important;
    text-align: center !important;
}

/* alles innen neutral halten */
div.run_position_110:has(.wa_screen) .alert-danger > *,
div.run_position_110:has(.wa_screen) .validation-message > *,
div.run_position_110:has(.wa_screen) .help-block.text-danger > *,
div.run_position_110:has(.wa_screen) .text-danger > * {
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: inherit !important;
}

/* Checkboxen ausblenden */
div.run_position_110:has(.wa_screen) .alert-danger input[type="checkbox"],
div.run_position_110:has(.wa_screen) .validation-message input[type="checkbox"],
div.run_position_110:has(.wa_screen) .help-block.text-danger input[type="checkbox"],
div.run_position_110:has(.wa_screen) .text-danger input[type="checkbox"],
div.run_position_110:has(.wa_screen) .alert-danger .checkbox,
div.run_position_110:has(.wa_screen) .validation-message .checkbox,
div.run_position_110:has(.wa_screen) .help-block.text-danger .checkbox,
div.run_position_110:has(.wa_screen) .text-danger .checkbox {
    display: none !important;
}
/* ---------------------------------------------------------
   Weiter-Button
   --------------------------------------------------------- */
div.run_position_110:has(.wa_screen) button,
div.run_position_110:has(.wa_screen) .btn,
div.run_position_110:has(.wa_screen) .btn-primary,
div.run_position_110:has(.wa_screen) input[type="submit"] {
    display: block !important;
    margin: 28px auto 10px auto !important;
    padding: 14px 34px !important;
    border-radius: 16px !important;
    border: 3px solid #53bdeb !important;
    background: #ffffff !important;
    color: #53bdeb !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    box-shadow: none !important;
}

/* ---------------------------------------------------------
   Störendes ausblenden
   --------------------------------------------------------- */
div.run_position_110 .progress,
div.run_position_110 .progress-bar,
div.run_position_110 #progress,
div.run_position_110 #progress-bar,
div.run_position_110 [role="progressbar"],
div.run_position_110 .progress-container,
div.run_position_110 .progress-wrapper,
div.run_position_110 .survey-progress,
div.run_position_110 .question-progress,
div.run_position_110 .run-progress {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
}

div.run_position_110:has(.wa_screen) hr,
div.run_position_110:has(.wa_screen) .panel,
div.run_position_110:has(.wa_screen) .well {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
}
/* ---------------------------------------------------------
   Mobil
   --------------------------------------------------------- */
@media (max-width: 640px) {
    div.run_position_110:has(.wa_screen) .survey-container,
    div.run_position_110:has(.wa_screen) .main-survey-container,
    div.run_position_110:has(.wa_screen) .form-horizontal,
    div.run_position_110:has(.wa_screen) .container,
    div.run_position_110:has(.wa_screen) .run_content {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        border-radius: 0 !important;
        overflow: visible !important;
    }

    /* Header */
    div.run_position_110:has(.wa_screen) .survey-container::before,
    div.run_position_110:has(.wa_screen) .main-survey-container::before,
    div.run_position_110:has(.wa_screen) .form-horizontal::before,
    div.run_position_110:has(.wa_screen) .container::before,
    div.run_position_110:has(.wa_screen) .run_content::before {
        height: 120px !important;
        padding: 18px 20px 0 82px !important;
        font-size: 20px !important;
    }

    div.run_position_110:has(.wa_screen) .survey-container::after,
    div.run_position_110:has(.wa_screen) .main-survey-container::after,
    div.run_position_110:has(.wa_screen) .form-horizontal::after,
    div.run_position_110:has(.wa_screen) .container::after,
    div.run_position_110:has(.wa_screen) .run_content::after {
        top: 16px !important;
    }

    /* ganzer Chat-Content deutlich weiter runter */
    div.run_position_110:has(.wa_screen) form {
        padding: 220px 14px 22px 14px !important;
        position: relative !important;
        z-index: 1 !important;
    }

    /* Intro-Wrapper links */
    div.run_position_110:has(.wa_screen) .wa_intro_lea,
    div.run_position_110:has(.wa_screen) .wa_intro_lea > label,
    div.run_position_110:has(.wa_screen) .wa_intro_lea .control-label {
        display: flex !important;
        justify-content: flex-start !important;
        align-items: flex-start !important;
        width: 100% !important;
        margin: 0 0 8px 0 !important;
        padding: 0 !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        overflow: visible !important;
        position: static !important;
        z-index: auto !important;
    }

    /* weiße Lea-Blase */
    div.run_position_110:has(.wa_screen) .wa_intro_lea .wa_bubble,
    div.run_position_110:has(.wa_screen) .wa_intro_lea .wa_bubble.wa_lea,
    div.run_position_110:has(.wa_screen) .wa_intro_lea label .wa_bubble,
    div.run_position_110:has(.wa_screen) .wa_intro_lea .control-label .wa_bubble {
        display: inline-block !important;
        max-width: 86% !important;
        font-size: 16px !important;
        margin: 0 !important;
        padding: 16px 18px !important;
        position: static !important;
        top: auto !important;
        left: auto !important;
        transform: none !important;
        z-index: auto !important;
    }

    /* grüner Prompt direkt darunter rechts */
    div.run_position_110:has(.wa_screen) .wa_intro_prompt,
    div.run_position_110:has(.wa_screen) .wa_intro_prompt > label,
    div.run_position_110:has(.wa_screen) .wa_intro_prompt .control-label {
        display: flex !important;
        justify-content: flex-end !important;
        align-items: flex-start !important;
        width: 100% !important;
        margin: 0 0 12px 0 !important;
        padding: 0 !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        position: static !important;
        z-index: auto !important;
    }

    div.run_position_110:has(.wa_screen) .wa_intro_prompt .wa_bubble,
    div.run_position_110:has(.wa_screen) .wa_intro_prompt .wa_bubble.wa_du,
    div.run_position_110:has(.wa_screen) .wa_intro_prompt label .wa_bubble,
    div.run_position_110:has(.wa_screen) .wa_number .wa_bubble.wa_du {
        max-width: 86% !important;
        font-size: 16px !important;
        position: static !important;
        top: auto !important;
        transform: none !important;
    }

    /* restliche Antwortoptionen rechts */
    div.run_position_110:has(.wa_screen) .wa_number label,
    div.run_position_110:has(.wa_screen) .wa_number .control-label {
        display: flex !important;
        justify-content: flex-end !important;
        align-items: flex-start !important;
    }

    /* Inputs */
    div.run_position_110:has(.wa_screen) select,
    div.run_position_110:has(.wa_screen) input[type="text"],
    div.run_position_110:has(.wa_screen) input[type="number"],
    div.run_position_110:has(.wa_screen) textarea,
    div.run_position_110:has(.wa_screen) .form-control,
    div.run_position_110:has(.wa_screen) .bootstrap-touchspin,
    div.run_position_110:has(.wa_screen) .input-group {
        width: 96px !important;
        min-width: 96px !important;
        max-width: 96px !important;
        height: 50px !important;
    }
}
/* klassische Progress-Elemente */
.progress,
.progress-bar,
.progress-container,
.progress-wrapper,
.survey-progress,
.question-progress,
.run-progress,
#progress,
#progress-bar,
[role="progressbar"] {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    overflow: hidden !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* häufige Formr-/Bootstrap-Headerleisten oben */
.navbar .progress,
.navbar .progress-bar,
header .progress,
header .progress-bar,
body > .progress,
body > .progress-bar,
body > .container .progress:first-child,
body > .container .progress-bar:first-child {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    overflow: hidden !important;
}

/* Falls nur die Prozentanzeige übrig bleibt */
.progress + * ,
.progress-bar + * {
    margin-top: 0 !important;
}
/* =========================
   FEEDBACK-SEITE Position 140
   ========================= */

.run_position_140 .container,
.run_position_140 .main,
.run_position_140 .run_content {
    max-width: 980px;
    margin: 0 auto;
    padding-left: 20px;
    padding-right: 20px;
}

.run_position_140 {
    background: #f6f7fb;
    color: #222831;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    line-height: 1.6;
}

.run_position_140 p,
.run_position_140 li,
.run_position_140 td,
.run_position_140 th {
    font-size: 17px;
}

.run_position_140 h1 {
    font-size: 46px;
    line-height: 1.08;
    font-weight: 650;
    letter-spacing: -0.02em;
    color: #364152;
    margin-top: 10px;
    margin-bottom: 18px;
}

.run_position_140 h2 {
    font-size: 30px;
    line-height: 1.15;
    font-weight: 630;
    color: #3f4a5b;
    margin-top: 34px;
    margin-bottom: 14px;
}

.run_position_140 h3 {
    font-size: 22px;
    line-height: 1.2;
    font-weight: 620;
    color: #485365;
    margin-top: 18px;
    margin-bottom: 10px;
}

.run_position_140 h4 {
    font-size: 18px;
    line-height: 1.25;
    font-weight: 600;
    color: #4c5668;
    margin-top: 14px;
    margin-bottom: 8px;
}

.run_position_140 .form-group,
.run_position_140 .survey-item,
.run_position_140 .note-item,
.run_position_140 .space_DF_0 {
    margin-bottom: 18px;
}

.run_position_140 .note,
.run_position_140 .alert,
.run_position_140 .well,
.run_position_140 .form-group {
    background: #ffffff;
    border-radius: 18px;
    box-shadow: 0 8px 26px rgba(24, 39, 75, 0.07);
    padding: 22px 24px;
    border: 1px solid rgba(55, 65, 81, 0.06);
}

.run_position_140 .form-group:has(img) {
    background: transparent;
    box-shadow: none;
    border: none;
    padding: 0;
}

.run_position_140 img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 18px auto;
    border-radius: 18px;
    background: #fff;
    padding: 14px;
    box-shadow: 0 10px 24px rgba(24, 39, 75, 0.08);
}

.run_position_140 .trait-explain-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    margin-top: 10px;
    margin-bottom: 10px;
}

.run_position_140 .trait-mini-card {
    background: #ffffff;
    border: 1px solid rgba(55, 65, 81, 0.06);
    border-radius: 16px;
    padding: 16px 18px;
    box-shadow: 0 6px 18px rgba(24, 39, 75, 0.05);
}

.run_position_140 .trait-mini-card h3 {
    margin-top: 0;
    margin-bottom: 6px;
}

.run_position_140 .trait-mini-card p {
    margin-bottom: 0;
}

.run_position_140 table,
.run_position_140 .orientation-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin-top: 16px;
    margin-bottom: 24px;
    background: #ffffff;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(24, 39, 75, 0.07);
    border: 1px solid rgba(55, 65, 81, 0.06);
}

.run_position_140 thead th,
.run_position_140 .orientation-table thead th {
    background: #eef3fb;
    color: #334155;
    font-size: 15px;
    font-weight: 650;
    text-align: left;
    padding: 14px 12px;
    border-bottom: 1px solid #dfe7f3;
    vertical-align: bottom;
}

.run_position_140 tbody td,
.run_position_140 .orientation-table tbody td {
    padding: 14px 12px;
    border-bottom: 1px solid #edf1f7;
    vertical-align: top;
}

.run_position_140 tbody tr:nth-child(even),
.run_position_140 .orientation-table tbody tr:nth-child(even) {
    background: #fafbfe;
}

.run_position_140 tbody tr:last-child td,
.run_position_140 .orientation-table tbody tr:last-child td {
    border-bottom: none;
}

.run_position_140 .trait-card {
    background: #ffffff;
    border: 1px solid rgba(55, 65, 81, 0.06);
    border-radius: 18px;
    padding: 20px 22px;
    margin-bottom: 18px;
    box-shadow: 0 8px 22px rgba(24, 39, 75, 0.06);
}

.run_position_140 .trait-card h3 {
    margin-top: 0;
    margin-bottom: 8px;
}

.run_position_140 .trait-meta-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}

.run_position_140 .trait-meta {
    display: inline-block;
    padding: 6px 11px;
    border-radius: 999px;
    background: #f3f6fb;
    color: #334155;
    font-size: 14px;
    font-weight: 550;
}

.run_position_140 .trait-badge {
    display: inline-block;
    padding: 6px 11px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 650;
}

.run_position_140 .badge-low {
    background: #eef2ff;   /* sehr helles blau */
    color: #3b5bdb;
}

.run_position_140 .badge-mid {
    background: #e0e7ff;   /* mittleres blau */
    color: #364fc7;
}

.run_position_140 .badge-neutral {
    background: #e0e7ff;
    color: #364fc7;
}

.run_position_140 .badge-high {
    background: #dbe4ff;   /* etwas kräftiger */
    color: #2f49a3;
}
}

.run_position_140 ul {
    padding-left: 1.2em;
    margin-top: 10px;
    margin-bottom: 10px;
}

.run_position_140 li {
    margin-bottom: 10px;
}

.run_position_140 strong,
.run_position_140 b {
    font-weight: 650;
    color: #1f2937;
}

.run_position_140 p {
    max-width: 84ch;
}

.run_position_140 small,
.run_position_140 .text-muted {
    color: #6b7280;
    font-size: 14px;
}

.run_position_140 .btn,
.run_position_140 button,
.run_position_140 input[type="submit"] {
    border-radius: 12px;
    font-weight: 600;
    padding: 10px 18px;
}

@media (max-width: 768px) {
    .run_position_140 h1 {
        font-size: 36px;
    }

    .run_position_140 h2 {
        font-size: 26px;
    }

    .run_position_140 h3 {
        font-size: 20px;
    }

    .run_position_140 p,
    .run_position_140 li,
    .run_position_140 td,
    .run_position_140 th {
        font-size: 16px;
    }

    .run_position_140 .note,
    .run_position_140 .alert,
    .run_position_140 .well,
    .run_position_140 .form-group,
    .run_position_140 .trait-card,
    .run_position_140 .trait-mini-card {
        padding: 16px 16px;
    }

    .run_position_140 thead th,
    .run_position_140 tbody td {
        padding: 10px 10px;
    }
}
/* =========================================================
   INTRO-FIX NUR FÜR DESKTOP/TABLET
   ========================================================= */
@media (min-width: 641px) {

    div.run_position_110:has(.wa_screen) form {
        padding-top: 150px !important;
    }

    div.run_position_110:has(.wa_screen) .wa_screen {
        min-height: auto !important;
        padding-top: 0 !important;
        justify-content: flex-start !important;
    }

    div.run_position_110:has(.wa_screen) .wa_intro_lea,
    div.run_position_110:has(.wa_screen) .wa_intro_lea > label,
    div.run_position_110:has(.wa_screen) .wa_intro_lea .control-label {
        display: block !important;
        width: 100% !important;
        margin-top: 70px !important;
        margin-bottom: 8px !important;
        padding: 0 !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        overflow: visible !important;
        float: none !important;
        text-align: left !important;
        position: static !important;
        z-index: auto !important;
    }

    div.run_position_110:has(.wa_screen) .wa_intro_lea .wa_bubble,
    div.run_position_110:has(.wa_screen) .wa_intro_lea .wa_bubble.wa_lea,
    div.run_position_110:has(.wa_screen) .wa_intro_lea label .wa_bubble,
    div.run_position_110:has(.wa_screen) .wa_intro_lea .control-label .wa_bubble {
        display: inline-block !important;
        visibility: visible !important;
        opacity: 1 !important;
        max-width: 76% !important;
        width: fit-content !important;
        margin: 0 !important;
        padding: 16px 18px !important;
        background: #ffffff !important;
        color: #111b21 !important;
        border-radius: 12px 12px 12px 4px !important;
        box-shadow: 0 2px 6px rgba(0,0,0,0.08) !important;
        border: none !important;
        float: none !important;
        clear: both !important;
        position: static !important;
        z-index: auto !important;
    }

    div.run_position_110:has(.wa_screen) .wa_intro_prompt,
    div.run_position_110:has(.wa_screen) .wa_intro_prompt > label,
    div.run_position_110:has(.wa_screen) .wa_intro_prompt .control-label {
        display: flex !important;
        justify-content: flex-end !important;
        align-items: flex-start !important;
        width: 100% !important;
        margin-top: 6px !important;
        margin-bottom: 12px !important;
        padding: 0 !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
    }

    div.run_position_110:has(.wa_screen) .wa_intro_prompt .wa_bubble,
    div.run_position_110:has(.wa_screen) .wa_intro_prompt .wa_bubble.wa_du,
    div.run_position_110:has(.wa_screen) .wa_intro_prompt label .wa_bubble {
        display: inline-block !important;
        max-width: 76% !important;
        width: fit-content !important;
        margin: 0 !important;
        padding: 14px 16px !important;
        background: #d9fdd3 !important;
        color: #111b21 !important;
        border-radius: 12px 12px 4px 12px !important;
        box-shadow: 0 2px 6px rgba(0,0,0,0.08) !important;
        border: none !important;
        float: none !important;
        clear: both !important;
    }
}
/* =========================================================
   FINALER MOBILE-FIX FÜR DIE WEISSE LEA-NACHRICHT
   GANZ ANS ENDE DES CSS
   ========================================================= */
@media (max-width: 640px) {

    div.run_position_110:has(.wa_screen) .survey-container,
    div.run_position_110:has(.wa_screen) .main-survey-container,
    div.run_position_110:has(.wa_screen) .form-horizontal,
    div.run_position_110:has(.wa_screen) .container,
    div.run_position_110:has(.wa_screen) .run_content {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        border-radius: 0 !important;
        overflow: visible !important;
    }

    /* Header mobil */
    div.run_position_110:has(.wa_screen) .survey-container::before,
    div.run_position_110:has(.wa_screen) .main-survey-container::before,
    div.run_position_110:has(.wa_screen) .form-horizontal::before,
    div.run_position_110:has(.wa_screen) .container::before,
    div.run_position_110:has(.wa_screen) .run_content::before {
        height: 120px !important;
        padding: 18px 20px 0 82px !important;
        font-size: 20px !important;
    }

    div.run_position_110:has(.wa_screen) .survey-container::after,
    div.run_position_110:has(.wa_screen) .main-survey-container::after,
    div.run_position_110:has(.wa_screen) .form-horizontal::after,
    div.run_position_110:has(.wa_screen) .container::after,
    div.run_position_110:has(.wa_screen) .run_content::after {
        top: 16px !important;
    }

    /* Inhalt unter Header */
    div.run_position_110:has(.wa_screen) form {
        padding: 188px 14px 22px 14px !important;
        position: relative !important;
        z-index: 1 !important;
    }

    /* Lea-Intro-Wrapper */
    div.run_position_110:has(.wa_screen) .wa_intro_lea,
    div.run_position_110:has(.wa_screen) .wa_intro_lea > label,
    div.run_position_110:has(.wa_screen) .wa_intro_lea .control-label {
        display: flex !important;
        justify-content: flex-start !important;
        align-items: flex-start !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        overflow: visible !important;
        position: relative !important;
        z-index: 40 !important;
    }

    /* weiße Lea-Blase gezielt runter */
    div.run_position_110:has(.wa_screen) .wa_intro_lea .wa_bubble,
    div.run_position_110:has(.wa_screen) .wa_intro_lea .wa_bubble.wa_lea,
    div.run_position_110:has(.wa_screen) .wa_intro_lea label .wa_bubble,
    div.run_position_110:has(.wa_screen) .wa_intro_lea .control-label .wa_bubble {
        display: inline-block !important;
        visibility: visible !important;
        opacity: 1 !important;

        position: relative !important;
        top: 124px !important;
        left: 0 !important;
        z-index: 41 !important;

        max-width: 86% !important;
        width: fit-content !important;
        margin: 0 !important;
        padding: 16px 18px !important;

        background: #ffffff !important;
        color: #111b21 !important;
        border-radius: 12px 12px 12px 4px !important;
        box-shadow: 0 2px 6px rgba(0,0,0,0.08) !important;
        border: none !important;
        float: none !important;
        clear: both !important;

        font-size: 16px !important;
        line-height: 1.45 !important;
        text-align: left !important;
    }

    /* grüner Prompt direkt darunter */
    div.run_position_110:has(.wa_screen) .wa_intro_prompt,
    div.run_position_110:has(.wa_screen) .wa_intro_prompt > label,
    div.run_position_110:has(.wa_screen) .wa_intro_prompt .control-label {
        display: flex !important;
        justify-content: flex-end !important;
        align-items: flex-start !important;
        width: 100% !important;
        margin: 42px 0 12px 0 !important;
        padding: 0 !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        position: relative !important;
        z-index: 20 !important;
    }

    div.run_position_110:has(.wa_screen) .wa_intro_prompt .wa_bubble,
    div.run_position_110:has(.wa_screen) .wa_intro_prompt .wa_bubble.wa_du,
    div.run_position_110:has(.wa_screen) .wa_intro_prompt label .wa_bubble,
    div.run_position_110:has(.wa_screen) .wa_number .wa_bubble.wa_du {
        max-width: 86% !important;
        font-size: 16px !important;
    }

    /* restliche Antwortoptionen rechts */
    div.run_position_110:has(.wa_screen) .wa_number label,
    div.run_position_110:has(.wa_screen) .wa_number .control-label {
        display: flex !important;
        justify-content: flex-end !important;
        align-items: flex-start !important;
    }

    /* Inputs */
    div.run_position_110:has(.wa_screen) select,
    div.run_position_110:has(.wa_screen) input[type="text"],
    div.run_position_110:has(.wa_screen) input[type="number"],
    div.run_position_110:has(.wa_screen) textarea,
    div.run_position_110:has(.wa_screen) .form-control,
    div.run_position_110:has(.wa_screen) .bootstrap-touchspin,
    div.run_position_110:has(.wa_screen) .input-group {
        width: 96px !important;
        min-width: 96px !important;
        max-width: 96px !important;
        height: 50px !important;
    }
}
@media (max-width: 640px) {

    /* grünen Prompt unter die verschobene weiße Blase drücken */
    div.run_position_110:has(.wa_screen) .wa_intro_prompt,
    div.run_position_110:has(.wa_screen) .wa_intro_prompt > label,
    div.run_position_110:has(.wa_screen) .wa_intro_prompt .control-label {
        margin-top: 70px !important; /* exakt gleich wie top der weißen Blase */
    }

}