/* ============================================================
   CHARTERED INVESTMENT — MAUTIC FORM
   ============================================================ */
.mauticform-label{
    font-family: "Inter", sans-serif;
    font-style: normal;
    font-weight: 400 !important;
    font-size: 16px !important;
}
.mauticform_wrapper {
    width: 100%;
    max-width: 716px;
    margin: 0;
    padding: 0;

    font-size: 14px;
    line-height: 1.35;
    color: #252a2e;
}

.mauticform_wrapper *,
.mauticform_wrapper *::before,
.mauticform_wrapper *::after {
    box-sizing: border-box;
}

input:-webkit-autofill,
textarea:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px #fff inset !important;
    -webkit-text-fill-color: #000 !important;
    background-color: #fff !important;
}

/* ============================================================
   RESET MAUTIC
   ============================================================ */

.mauticform_wrapper .mauticform-innerform,
.mauticform_wrapper .mauticform-page-wrapper {
    width: 100%;
    margin: 0;
    padding: 0;
}

.mauticform_wrapper .mauticform-row {
    margin: 0;
    padding: 0;
    width: 100% !important;
}

.mauticform_wrapper input,
.mauticform_wrapper textarea,
.mauticform_wrapper button {
    font-family: inherit;
}


/* ============================================================
   MAIN LAYOUT
   ============================================================ */

.mauticform_wrapper .mauticform-page-wrapper {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 22px;
}


/* ============================================================
   INVESTOR + TOPIC GROUPS
   ============================================================ */

.mauticform_wrapper .mauticform-radiogrp,
.mauticform_wrapper .mauticform-checkboxgrp {
    grid-column: 1 / -1;
}

.mauticform_wrapper .mauticform-radiogrp {
    margin-bottom: 21px;
    margin-left: 0 !important;
}

.mauticform_wrapper .mauticform-checkboxgrp {
    margin-bottom: 27px;
}


/* Group headings */

.mauticform_wrapper .mauticform-radiogrp > .mauticform-label,
.mauticform_wrapper .mauticform-checkboxgrp > .mauticform-label {
    display: block;

    width: 100%;
    margin: 0 0 14px;
    padding: 0;

    color: #69727b;
    font-size: 14px;
    line-height: 20px;
    font-weight: 400;
}


/* ============================================================
   OPTION BOXES
   ============================================================ */

.mauticform_wrapper .mauticform-radiogrp .mauticform-radiogrp-row,
.mauticform_wrapper .mauticform-checkboxgrp .mauticform-checkboxgrp-row {
    position: relative;

    display: inline-flex;
    align-items: center;

    min-height: 46px;

    margin: 0 8px 10px 0;
    padding: 0;

    vertical-align: top;
}


/* Hide original checkbox */

.mauticform_wrapper .mauticform-radiogrp .mauticform-radiogrp-radio,
.mauticform_wrapper .mauticform-checkboxgrp .mauticform-checkboxgrp-checkbox {
    position: absolute;

    width: 1px;
    height: 1px;

    margin: 0;
    padding: 0;

    opacity: 0;
    pointer-events: none;
}


/* Option label/card */

.mauticform_wrapper .mauticform-radiogrp .mauticform-radiogrp-label,
.mauticform_wrapper .mauticform-checkboxgrp .mauticform-checkboxgrp-label {
    position: relative;

    display: flex;
    align-items: center;

    width: auto;
    min-height: 46px;

    margin: 0;
    padding: 10px 13px 10px 41px;

    background: #ffffff;

    border: 1px solid #d4e0e8;
    border-radius: 5px;

    color: #252a2e;

    font-size: 16px;
    line-height: 24px;
    font-family: "Inter", sans-serif;
    font-style: normal;
    font-weight: 400;

    white-space: nowrap;

    cursor: pointer;
    user-select: none;

    transition:
            background-color .15s ease,
            border-color .15s ease;
}


/* ============================================================
   INVESTOR OPTIONS — RADIO APPEARANCE
   ============================================================ */

.mauticform_wrapper .mauticform-radiogrp .mauticform-radiogrp-label {
    min-width: 175px;
}


/* outer circle */

.mauticform_wrapper .mauticform-radiogrp .mauticform-radiogrp-label::before {
    content: "";

    position: absolute;

    left: 13px;
    top: 50%;

    width: 19px;
    height: 19px;

    transform: translateY(-50%);

    background: #ffffff;

    border: 1px solid #bfd1dd;
    border-radius: 50%;
}


/* blue inner circle */

.mauticform_wrapper .mauticform-radiogrp .mauticform-radiogrp-label::after {
    content: "";

    position: absolute;

    left: 18px;
    top: 50%;

    width: 9px;
    height: 9px;

    transform: translateY(-50%);

    background: #20a9ed;

    border-radius: 50%;

    opacity: 0;
}


/* selected card */

.mauticform_wrapper
.mauticform-radiogrp
.mauticform-radiogrp-radio:checked
+ .mauticform-radiogrp-label {
    background: #f0f8fc;
}


/* selected outer circle */

.mauticform_wrapper
.mauticform-radiogrp
.mauticform-radiogrp-radio:checked
+ .mauticform-radiogrp-label::before {
    border-color: #20a9ed;
}


/* selected dot */

.mauticform_wrapper
.mauticform-radiogrp
.mauticform-radiogrp-radio:checked
+ .mauticform-radiogrp-label::after {
    opacity: 1;
}


/* ============================================================
   TOPIC OPTIONS — CHECKBOX APPEARANCE
   ============================================================ */

.mauticform_wrapper .mauticform-checkboxgrp .mauticform-checkboxgrp-label::before {
    content: "";

    position: absolute;

    left: 13px;
    top: 50%;

    width: 18px;
    height: 18px;

    transform: translateY(-50%);

    background: #ffffff;

    border: 1px solid #bfd1dd;
    border-radius: 5px;
}


/* checkmark */

.mauticform_wrapper .mauticform-checkboxgrp .mauticform-checkboxgrp-label::after {
    content: "";

    position: absolute;

    left: 19px;
    top: 50%;

    width: 5px;
    height: 9px;

    border: solid #20a9ed;
    border-width: 0 2px 2px 0;

    transform:
            translateY(-62%)
            rotate(45deg);

    opacity: 0;
}


/* selected */

.mauticform_wrapper
.mauticform-checkboxgrp
.mauticform-checkboxgrp-checkbox:checked
+ .mauticform-checkboxgrp-label {
    background: #f0f8fc;
}


/* selected square */

.mauticform_wrapper
.mauticform-checkboxgrp
.mauticform-checkboxgrp-checkbox:checked
+ .mauticform-checkboxgrp-label::before {
    border-color: #20a9ed;
}


/* selected tick */

.mauticform_wrapper
.mauticform-checkboxgrp
.mauticform-checkboxgrp-checkbox:checked
+ .mauticform-checkboxgrp-label::after {
    opacity: 1;
}


/* ============================================================
   INPUT FIELD LAYOUT
   ============================================================ */

.mauticform_wrapper .mauticform-field-3,
.mauticform_wrapper .mauticform-field-4,
.mauticform_wrapper .mauticform-field-5,
.mauticform_wrapper .mauticform-field-6,
.mauticform_wrapper .mauticform-field-7 {
    margin-bottom: 19px;
}


/* ============================================================
   INPUT LABELS
   ============================================================ */

.mauticform_wrapper .mauticform-field-3 > .mauticform-label,
.mauticform_wrapper .mauticform-field-4 > .mauticform-label,
.mauticform_wrapper .mauticform-field-5 > .mauticform-label,
.mauticform_wrapper .mauticform-field-6 > .mauticform-label,
.mauticform_wrapper .mauticform-field-7 > .mauticform-label,
.mauticform_wrapper .mauticform-field-8 > .mauticform-label {
    display: block;

    margin: 0 0 7px;
    padding: 0;

    color: #69727b;

    font-size: 14px;
    line-height: 18px;
    font-weight: 400;
}


/* ============================================================
   IMPORTANT:
   Design uses label text, not placeholder text.
   Hide generated placeholders.
   ============================================================ */

.mauticform_wrapper .mauticform-input::placeholder,
.mauticform_wrapper .mauticform-textarea::placeholder {
    color: transparent;
    opacity: 0;
}


/* ============================================================
   TEXT INPUTS
   ============================================================ */

.mauticform_wrapper .mauticform-input {
    display: block;

    width: 100%;
    height: 46px;

    margin: 0;
    padding: 10px 13px;

    background: #ffffff;

    border: 1px solid #d4e0e8;
    border-radius: 4px;

    outline: none;
    box-shadow: none;

    color: #252a2e;

    font-size: 15px;
    line-height: 24px;
    font-weight: 400;

    transition:
            border-color .15s ease,
            box-shadow .15s ease;
}



/* ============================================================
   MESSAGE
   ============================================================ */

.mauticform_wrapper .mauticform-field-8 {
    grid-column: 1 / -1;

    width: 100%;

    margin: 0 0 35px;
}


.mauticform_wrapper .mauticform-textarea {
    display: block;

    width: 100%;
    height: 134px;
    min-height: 134px;

    margin: 0;
    padding: 12px 13px;

    background: #ffffff;

    border: 1px solid #d4e0e8 !important;
    border-radius: 4px !important;

    outline: none;
    box-shadow: none;

    resize: vertical;

    color: #252a2e;

    font-size: 15px;
    line-height: 22px;

    transition:
            border-color .15s ease,
            box-shadow .15s ease;
}


.mauticform_wrapper .mauticform-textarea:hover {
    border-color: #becfdc;
}


.mauticform_wrapper .mauticform-textarea:focus {
}


/* ============================================================
   PRIVACY TEXT
   ============================================================ */

.mauticform_wrapper .mauticform-field-9 {
    grid-column: 1 / -1;

    position: relative;

    width: calc(100% - 31px);

    margin: 0 0 31px 31px;
}


.mauticform_wrapper .mauticform-freetext {
    margin: 0;
    padding: 0;

    color: #69727b;

    font-size: 14px;
    line-height: 18px;
    font-weight: 400;
}


.mauticform_wrapper .mauticform-freetext p {
    margin: 0;
    padding: 0;
}


.mauticform_wrapper .mauticform-freetext a,
.mauticform_wrapper .mauticform-freetext a:visited {
    color: #69727b !important;

    text-decoration: underline !important;
    text-underline-offset: 2px;
}


/* ============================================================
   CONSENT
   Your HTML puts the actual checkbox AFTER privacy text.
   Move it visually to the left of privacy paragraph.
   ============================================================ */

.mauticform_wrapper .mauticform-radiogrp0 {
    grid-column: 1 / -1;

    position: relative;

    width: 18px;
    height: 18px;

    margin-top: -102px;
    margin-bottom: 84px;

    z-index: 2;
}


/* remove group spacing */

.mauticform_wrapper
.mauticform-radiogrp0
.mauticform-checkboxgrp-row {
    position: relative;

    display: block;

    width: 18px;
    height: 18px;

    margin: 0;
    padding: 0;
}


/* hide native checkbox */

.mauticform_wrapper
.mauticform-radiogrp0
.mauticform-checkboxgrp-checkbox {
    position: absolute;

    width: 1px;
    height: 1px;

    opacity: 0;
}


/* hide "I agree." text */

.mauticform_wrapper
.mauticform-radiogrp0
.mauticform-checkboxgrp-label {
    position: relative;

    display: block;

    width: 18px;
    height: 18px;
    min-height: 18px;

    margin: 0;
    padding: 0;

    font-size: 0;
    line-height: 0;

    cursor: pointer;
}


/* consent square */

.mauticform_wrapper
.mauticform-radiogrp0
.mauticform-checkboxgrp-label::before {
    content: "";

    position: absolute;

    left: 0;
    top: 0;

    width: 18px;
    height: 18px;

    background: #ffffff;

    border: 1px solid #bfd1dd;
    border-radius: 5px;
}


/* consent check */

.mauticform_wrapper
.mauticform-radiogrp0
.mauticform-checkboxgrp-label::after {
    content: "";

    position: absolute;

    left: 6px;
    top: 3px;

    width: 5px;
    height: 9px;

    border: solid #20a9ed;
    border-width: 0 2px 2px 0;

    transform: rotate(45deg);

    opacity: 0;
}


.mauticform_wrapper
.mauticform-radiogrp0
.mauticform-checkboxgrp-checkbox:checked
+ .mauticform-checkboxgrp-label::before {
    border-color: #20a9ed;
}


.mauticform_wrapper
.mauticform-radiogrp0
.mauticform-checkboxgrp-checkbox:checked
+ .mauticform-checkboxgrp-label::after {
    opacity: 1;
}


/* ============================================================
   HIDDEN / CAPTCHA
   ============================================================ */

.mauticform_wrapper .mauticform-radiogrp2 {
    grid-column: 1 / -1;
}


/* ============================================================
   SUBMIT
   ============================================================ */

.mauticform_wrapper .mauticform-button-wrapper {
    grid-column: 1 / -1;

    margin: 0;
    padding: 0;
}


.mauticform_wrapper .mauticform-button,
.mauticform_wrapper .mauticform-button.btn,
.mauticform_wrapper .mauticform-button.btn-default {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 349px;
    max-width: 100%;
    height: 54px;

    margin: 0;
    padding: 0 20px;

    background: #ff7100;

    border: 0;
    border-radius: 9px;

    box-shadow: none;
    outline: none;

    color: #ffffff;

    font-size: 17px;
    line-height: 22px;
    font-weight: 600;

    text-align: center;

    cursor: pointer;

    transition: background-color .15s ease;
}


.mauticform_wrapper .mauticform-button:hover,
.mauticform_wrapper .mauticform-button:focus {
    background: #ee6900;

    border: 0;
    color: #ffffff;
}


/* Mautic initially generates disabled="" */

.mauticform_wrapper .mauticform-button:disabled {
    background: #ff7100;

    color: #ffffff;

    opacity: 1;
}


/* ============================================================
   ERROR MESSAGES
   ============================================================ */

.mauticform_wrapper .mauticform-errormsg {
    margin-top: 5px;

    color: #dc3545;

    font-size: 12px;
    line-height: 16px;
}


.mauticform_wrapper .mauticform-error {
    margin-bottom: 15px;

    color: #dc3545;

    font-size: 13px;
}


.mauticform_wrapper .mauticform-message {
    margin-bottom: 15px;

    color: #252a2e;

    font-size: 13px;
}


/* ============================================================
   ACCESSIBILITY FOCUS
   ============================================================ */

.mauticform_wrapper
.mauticform-checkboxgrp-checkbox:focus-visible
+ .mauticform-checkboxgrp-label {
    outline: 2px solid #20a9ed;
    outline-offset: 2px;
}


/* ============================================================
   TABLET
   Bootstrap lg/md range
   ============================================================ */

@media (max-width: 991.98px) {

    .mauticform_wrapper {
        max-width: 716px;
    }

}


/* ============================================================
   MOBILE
   Bootstrap MD breakpoint
   ============================================================ */

@media (max-width: 767.98px) {

    .mauticform_wrapper {
        width: 100%;
        max-width: 100%;
    }


    /* stack normal fields */

    .mauticform_wrapper .mauticform-page-wrapper {
        grid-template-columns: 1fr;
        column-gap: 0;
    }


    .mauticform_wrapper .mauticform-row {
        grid-column: 1 / -1;
    }


    .mauticform_wrapper .mauticform-field-3,
    .mauticform_wrapper .mauticform-field-4,
    .mauticform_wrapper .mauticform-field-5,
    .mauticform_wrapper .mauticform-field-6,
    .mauticform_wrapper .mauticform-field-7 {
        margin-bottom: 18px;
    }


    /* options */

    .mauticform_wrapper .mauticform-radiogrp .mauticform-checkboxgrp-row,
    .mauticform_wrapper .mauticform-checkboxgrp .mauticform-checkboxgrp-row {
        margin-right: 6px;
        margin-bottom: 8px;
    }


    .mauticform_wrapper .mauticform-radiogrp .mauticform-checkboxgrp-label,
    .mauticform_wrapper .mauticform-checkboxgrp .mauticform-checkboxgrp-label {
        min-width: 0;

        font-size: 15px;
    }


    /* privacy */

    .mauticform_wrapper .mauticform-field-9 {
        width: calc(100% - 31px);

        margin-left: 31px;
    }


    /*
       Privacy text gets taller on mobile, so use absolute-like
       positioning relative to its following field.
    */

    .mauticform_wrapper .mauticform-radiogrp0 {
        margin-top: -120px;
        margin-bottom: 102px;
    }


    /* button */

    .mauticform_wrapper .mauticform-button,
    .mauticform_wrapper .mauticform-button.btn,
    .mauticform_wrapper .mauticform-button.btn-default {
        width: 349px;
        max-width: 100%;
    }
}


/* ============================================================
   SMALL MOBILE
   Bootstrap SM breakpoint
   ============================================================ */

@media (max-width: 575.98px) {

    .mauticform_wrapper .mauticform-radiogrp {
        margin-bottom: 20px;
    }


    /*
       Investor choices full-width on small phones
    */

    .mauticform_wrapper
    .mauticform-radiogrp
    .mauticform-checkboxgrp-row {
        display: flex;

        width: 100%;

        margin-right: 0;
    }


    .mauticform_wrapper
    .mauticform-radiogrp
    .mauticform-checkboxgrp-label {
        width: 100%;
    }


    /*
       Topics also become full width so long labels don't overflow.
    */

    .mauticform_wrapper
    .mauticform-checkboxgrp
    .mauticform-checkboxgrp-row {
        display: flex;

        width: 100%;

        margin-right: 0;
    }


    .mauticform_wrapper
    .mauticform-checkboxgrp
    .mauticform-checkboxgrp-label {
        width: 100%;

        white-space: normal;
    }


    .mauticform_wrapper .mauticform-textarea {
        height: 134px;
        min-height: 134px;
    }


    .mauticform_wrapper .mauticform-freetext {
        font-size: 13px;
        line-height: 18px;
    }


    /*
       Because privacy paragraph wraps more on phones,
       the checkbox needs a larger negative offset.
    */

    .mauticform_wrapper .mauticform-radiogrp0 {
        margin-top: -156px;
        margin-bottom: 138px;
    }


    .mauticform_wrapper .mauticform-button,
    .mauticform_wrapper .mauticform-button.btn,
    .mauticform_wrapper .mauticform-button.btn-default {
        width: 100%;
    }
}


/* ============================================================
   MAUTIC PRIVACY CONSENT
   Checkbox + privacy text on same line
   ============================================================ */

.mauticform_wrapper .privacy-consent-row {
    grid-column: 1 / -1 !important;

    display: grid !important;
    grid-template-columns: 18px minmax(0, 1fr) !important;
    column-gap: 13px !important;

    align-items: start !important;

    width: 100% !important;

    margin: 0 0 31px !important;
    padding: 0 !important;
}


/* ============================================================
   CONSENT CHECKBOX FIELD
   ============================================================ */

.mauticform_wrapper
.privacy-consent-row
> .mauticform-checkboxgrp {
    grid-column: 1 !important;
    grid-row: 1 !important;

    position: relative !important;

    display: block !important;

    width: 18px !important;
    height: 18px !important;

    min-width: 18px !important;

    margin: 1px 0 0 !important;
    padding: 0 !important;
}


/* checkbox row */

.mauticform_wrapper
.privacy-consent-row
> .mauticform-checkboxgrp
.mauticform-checkboxgrp-row {
    position: relative !important;

    display: block !important;

    width: 18px !important;
    height: 18px !important;

    min-width: 18px !important;
    min-height: 18px !important;

    margin: 0 !important;
    padding: 0 !important;
}


/* ============================================================
   HIDE NATIVE CHECKBOX
   ============================================================ */

.mauticform_wrapper
.privacy-consent-row
.mauticform-checkboxgrp-checkbox {
    position: absolute !important;

    left: 0 !important;
    top: 0 !important;

    width: 18px !important;
    height: 18px !important;

    margin: 0 !important;
    padding: 0 !important;

    opacity: 0 !important;

    cursor: pointer !important;

    z-index: 2 !important;
}


/* ============================================================
   CONSENT LABEL
   Hide "I agree." / "Ich stimme zu."
   ============================================================ */

.mauticform_wrapper
.privacy-consent-row
.mauticform-checkboxgrp-label {
    position: relative !important;

    display: block !important;

    width: 18px !important;
    height: 18px !important;

    min-width: 18px !important;
    min-height: 18px !important;

    margin: 0 !important;
    padding: 0 !important;

    background: transparent !important;

    border: 0 !important;
    border-radius: 0 !important;

    font-size: 0 !important;
    line-height: 0 !important;

    cursor: pointer !important;
}


/* ============================================================
   CHECKBOX SQUARE
   ============================================================ */

.mauticform_wrapper
.privacy-consent-row
.mauticform-checkboxgrp-label::before {
    content: "" !important;

    position: absolute !important;

    left: 0 !important;
    top: 0 !important;

    width: 18px !important;
    height: 18px !important;

    background: #ffffff !important;

    border: 1px solid #bfd1dd !important;
    border-radius: 4px !important;

    box-sizing: border-box !important;

    transform: none !important;
}


/* ============================================================
   CHECKMARK
   ============================================================ */

.mauticform_wrapper
.privacy-consent-row
.mauticform-checkboxgrp-label::after {
    content: "" !important;

    position: absolute !important;

    left: 6px !important;
    top: 3px !important;

    width: 5px !important;
    height: 9px !important;

    background: transparent !important;

    border: solid #20a9ed !important;
    border-width: 0 2px 2px 0 !important;

    border-radius: 0 !important;

    transform: rotate(45deg) !important;

    opacity: 0 !important;
}


/* CHECKED */

.mauticform_wrapper
.privacy-consent-row
.mauticform-checkboxgrp-checkbox:checked
+ .mauticform-checkboxgrp-label::before {
    border-color: #20a9ed !important;
}


.mauticform_wrapper
.privacy-consent-row
.mauticform-checkboxgrp-checkbox:checked
+ .mauticform-checkboxgrp-label::after {
    opacity: 1 !important;
}


/* ============================================================
   PRIVACY TEXT
   ============================================================ */

.mauticform_wrapper
.privacy-consent-row
> .mauticform-freetext {
    grid-column: 2 !important;
    grid-row: 1 !important;

    width: 100% !important;
    min-width: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    color: #69727b !important;

    font-size: 14px !important;
    line-height: 18px !important;
    font-weight: 400 !important;
}


/* REMOVE DEFAULT PARAGRAPH MARGIN */

.mauticform_wrapper
.privacy-consent-row
> .mauticform-freetext
p {
    margin: 0 !important;
    padding: 0 !important;

    color: #69727b !important;

    font-size: 14px !important;
    line-height: 18px !important;
}


/* PRIVACY LINK */

.mauticform_wrapper
.privacy-consent-row
> .mauticform-freetext
a,

.mauticform_wrapper
.privacy-consent-row
> .mauticform-freetext
a:visited {
    color: #69727b !important;

    text-decoration: underline !important;
    text-underline-offset: 2px !important;
}


/* ============================================================
   ERROR MESSAGE
   ============================================================ */

.mauticform_wrapper
.privacy-consent-row
.mauticform-errormsg {
    position: absolute !important;

    left: 31px !important;
    top: 22px !important;

    width: max-content !important;
    max-width: calc(100vw - 60px) !important;

    margin: 3px 0 0 !important;

    color: #dc3545 !important;

    font-size: 12px !important;
    line-height: 16px !important;
}


/* ============================================================
   RESPONSIVE

   Keep checkbox + first line together at EVERY screen size.
   Do NOT change privacy row to one column.
   ============================================================ */

@media (max-width: 767.98px) {

    .mauticform_wrapper
    .privacy-consent-row {
        grid-template-columns: 18px minmax(0, 1fr) !important;

        column-gap: 12px !important;

        width: 100% !important;

        margin-bottom: 28px !important;
    }


    .mauticform_wrapper
    .privacy-consent-row
    > .mauticform-checkboxgrp {
        grid-column: 1 !important;
        grid-row: 1 !important;

        width: 18px !important;

        margin-top: 1px !important;
    }


    .mauticform_wrapper
    .privacy-consent-row
    > .mauticform-freetext {
        grid-column: 2 !important;
        grid-row: 1 !important;

        width: 100% !important;

        margin: 0 !important;
    }
}

/* ============================================================
   GERMAN MAUTIC FORM
   Datenschutz + Zustimmung
   Checkbox aligned with FIRST LINE of privacy text

   HTML remains unchanged:
       .legal
       .legal + .mauticform-checkboxgrp
   ============================================================ */


/* ------------------------------------------------------------
   PRIVACY TEXT
   ------------------------------------------------------------ */

.mauticform_wrapper .legal {
    grid-column: 1 / -1 !important;

    /*
     * Leave 31px on the left:
     * 18px checkbox + 13px gap
     */
    width: 100% !important;

    margin: 0 0 31px !important;
    padding: 0 0 0 31px !important;

    position: relative !important;

    color: #69727b !important;
}


/* Inner privacy text */

.mauticform_wrapper
.legal
> .mauticform-freetext {
    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    color: #69727b !important;

    font-size: 14px !important;
    line-height: 18px !important;
    font-weight: 400 !important;
}


/* Remove browser paragraph margin */

.mauticform_wrapper
.legal
> .mauticform-freetext
> p {
    margin: 0 !important;
    padding: 0 !important;

    color: #69727b !important;

    font-size: 14px !important;
    line-height: 18px !important;
    font-weight: 400 !important;
}


/* Privacy link */

.mauticform_wrapper
.legal
> .mauticform-freetext
a,

.mauticform_wrapper
.legal
> .mauticform-freetext
a:visited {
    color: #69727b !important;

    text-decoration: underline !important;
    text-underline-offset: 2px !important;
}


/* ============================================================
   CONSENT FIELD

   Select ONLY a checkbox group directly following .legal.
   Therefore this doesn't depend on field-9 / field-10.
   ============================================================ */

.mauticform_wrapper
.legal
+ .mauticform-checkboxgrp {
    position: relative !important;

    grid-column: 1 / -1 !important;

    width: 18px !important;
    height: 18px !important;

    min-width: 18px !important;
    min-height: 18px !important;

    /*
     * Pull checkbox back beside the FIRST privacy line.
     *
     * Since it follows .legal in your Mautic HTML,
     * translate it upward over the previous row.
     */
    margin: 0 !important;
    padding: 0 !important;

    justify-self: start !important;

    z-index: 5 !important;
}


/* ============================================================
   IMPORTANT:
   Make parent grid place .legal and consent in SAME grid row.

   :has() identifies the privacy row without field numbers.
   ============================================================ */

.mauticform_wrapper
.mauticform-page-wrapper {
    position: relative;
}


/*
 * The checkbox follows the legal text.
 *
 * We pull it upward by the complete height of the legal block.
 * CSS alone cannot know that sibling's dynamic height reliably,
 * so use the modern CSS anchor solution below.
 */


/* ============================================================
   MODERN RESPONSIVE SOLUTION — CSS ANCHOR POSITIONING
   ============================================================ */

@supports (anchor-name: --privacy-text) {

    .mauticform_wrapper .legal {
        anchor-name: --privacy-text;
    }


    .mauticform_wrapper
    .legal
    + .mauticform-checkboxgrp {
        position: absolute !important;

        position-anchor: --privacy-text;

        left: anchor(left) !important;
        top: calc(anchor(top) + 1px) !important;

        margin: 0 !important;
    }
}


/* ============================================================
   CONSENT CHECKBOX ROW
   ============================================================ */

.mauticform_wrapper
.legal
+ .mauticform-checkboxgrp
.mauticform-checkboxgrp-row {
    position: relative !important;

    display: block !important;

    width: 18px !important;
    height: 18px !important;

    min-width: 18px !important;
    min-height: 18px !important;

    margin: 0 !important;
    padding: 0 !important;
}


/* ============================================================
   HIDE NATIVE CHECKBOX
   ============================================================ */

.mauticform_wrapper
.legal
+ .mauticform-checkboxgrp
.mauticform-checkboxgrp-checkbox {
    position: absolute !important;

    left: 0 !important;
    top: 0 !important;

    width: 18px !important;
    height: 18px !important;

    margin: 0 !important;
    padding: 0 !important;

    opacity: 0 !important;

    cursor: pointer !important;

    z-index: 2 !important;
}


/* ============================================================
   HIDE "Ich stimme zu."
   The checkbox itself remains visible.
   ============================================================ */

.mauticform_wrapper
.legal
+ .mauticform-checkboxgrp
.mauticform-checkboxgrp-label {
    position: relative !important;

    display: block !important;

    width: 18px !important;
    height: 18px !important;

    min-width: 18px !important;
    min-height: 18px !important;

    margin: 0 !important;
    padding: 0 !important;

    background: transparent !important;

    border: 0 !important;
    border-radius: 0 !important;

    font-size: 0 !important;
    line-height: 0 !important;

    cursor: pointer !important;
}


/* ============================================================
   CHECKBOX SQUARE
   ============================================================ */

.mauticform_wrapper
.legal
+ .mauticform-checkboxgrp
.mauticform-checkboxgrp-label::before {
    content: "" !important;

    position: absolute !important;

    left: 0 !important;
    top: 0 !important;

    width: 18px !important;
    height: 18px !important;

    background: #ffffff !important;

    border: 1px solid #bfd1dd !important;
    border-radius: 4px !important;

    box-sizing: border-box !important;

    transform: none !important;
}


/* ============================================================
   BLUE CHECKMARK
   ============================================================ */

.mauticform_wrapper
.legal
+ .mauticform-checkboxgrp
.mauticform-checkboxgrp-label::after {
    content: "" !important;

    position: absolute !important;

    left: 6px !important;
    top: 3px !important;

    width: 5px !important;
    height: 9px !important;

    background: transparent !important;

    border: solid #20a9ed !important;
    border-width: 0 2px 2px 0 !important;

    border-radius: 0 !important;

    transform: rotate(45deg) !important;

    opacity: 0 !important;
}


/* ============================================================
   CHECKED
   ============================================================ */

.mauticform_wrapper
.legal
+ .mauticform-checkboxgrp
.mauticform-checkboxgrp-checkbox:checked
+ .mauticform-checkboxgrp-label::before {
    border-color: #20a9ed !important;
}


.mauticform_wrapper
.legal
+ .mauticform-checkboxgrp
.mauticform-checkboxgrp-checkbox:checked
+ .mauticform-checkboxgrp-label::after {
    opacity: 1 !important;
}


/* ============================================================
   VALIDATION ERROR
   ============================================================ */

.mauticform_wrapper
.legal
+ .mauticform-checkboxgrp
.mauticform-errormsg {
    position: absolute !important;

    left: 31px !important;
    top: 21px !important;

    width: max-content !important;
    max-width: calc(100vw - 62px) !important;

    margin: 4px 0 0 !important;

    color: #dc3545 !important;

    font-size: 12px !important;
    line-height: 16px !important;
}


/* ============================================================
   MOBILE
   Same alignment:
      checkbox | first line of text

   Do NOT stack the consent checkbox above/below privacy.
   ============================================================ */

@media (max-width: 767.98px) {

    .mauticform_wrapper .legal {
        width: 100% !important;

        padding-left: 30px !important;

        margin-bottom: 28px !important;
    }


    .mauticform_wrapper
    .legal
    > .mauticform-freetext,

    .mauticform_wrapper
    .legal
    > .mauticform-freetext
    > p {
        font-size: 14px !important;
        line-height: 18px !important;
    }

}

#mauticform_newcontactformsaxocharteredinvestmenten_your_message,
#mauticform_newcontactformibkrcharteredinvestmenten_your_message,
#mauticform_newcontactformamccharteredinvestmenten_your_message,
#mauticform_complaintformcharteredinvestment_your_criticism_suggestion,
#mauticform_beschwerdeformularcharteredinvestment_ihre_kritik_anregung_oder
{
    grid-column: 1 / -1;
    width: 100%;
    margin: 0 0 35px;
}

/* ==========================================================
   PRIVACY TEXT + CONSENT CHECKBOX
   Works with your ORIGINAL Mautic HTML.
   No HTML changes.
   No JS DOM manipulation.
   ========================================================== */


/* Privacy field */
#mauticform_newcontactformcharteredinvestmenten_privacy_policy,
#mauticform_newcontactformsaxocharteredinvestmenten_privacy_policy,
#mauticform_newcontactformibkrcharteredinvestmenten_privacy_policy,
#mauticform_newcontactformamccharteredinvestmenten_privacy_policy
{
    position: relative !important;

    grid-column: 1 / -1 !important;

    width: 100% !important;

    /*
     * Space for:
     * 18px checkbox + 13px gap
     */
    padding-left: 31px !important;

    margin: 0 0 30px !important;

    box-sizing: border-box !important;
}


/* Inner free-text container */
#mauticform_input_newcontactformcharteredinvestmenten_privacy_policy,
#mauticform_input_newcontactformsaxocharteredinvestmenten_privacy_policy,
#mauticform_input_newcontactformibkrcharteredinvestmenten_privacy_policy,
#mauticform_input_newcontactformamccharteredinvestmenten_privacy_policy
{
    display: block !important;

    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    color: #69727b !important;

    font-family: inherit !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 18px !important;
}


/* Paragraph */
#mauticform_input_newcontactformcharteredinvestmenten_privacy_policy p,
#mauticform_input_newcontactformsaxocharteredinvestmenten_privacy_policy p,
#mauticform_input_newcontactformibkrcharteredinvestmenten_privacy_policy p,
#mauticform_input_newcontactformamccharteredinvestmenten_privacy_policy p
{
    display: block !important;

    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    color: #69727b !important;

    font-family: inherit !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 18px !important;
}


/* Privacy link */
#mauticform_input_newcontactformcharteredinvestmenten_privacy_policy a,
#mauticform_input_newcontactformsaxocharteredinvestmenten_privacy_policy a,
#mauticform_input_newcontactformibkrcharteredinvestmenten_privacy_policy a,
#mauticform_input_newcontactformamccharteredinvestmenten_privacy_policy a
{
    color: #69727b !important;

    text-decoration: underline !important;
    text-decoration-thickness: 1px !important;
    text-underline-offset: 2px !important;
}


/* ==========================================================
   CONSENT FIELD

   Your consent field follows privacy_policy immediately.
   ========================================================== */

#mauticform_newcontactformcharteredinvestmenten_consent,
#mauticform_newcontactformsaxocharteredinvestmenten_consent,
#mauticform_newcontactformibkrcharteredinvestmenten_consent,
#mauticform_newcontactformamccharteredinvestmenten_consent
{
    /*
     * Remove it from normal visual layout.
     */
    position: absolute !important;

    width: 18px !important;
    height: 18px !important;

    margin: 0 !important;
    padding: 0 !important;

    z-index: 20 !important;
}


/* Checkbox row */
#mauticform_newcontactformcharteredinvestmenten_consent .mauticform-checkboxgrp-row,
#mauticform_newcontactformsaxocharteredinvestmenten_consent .mauticform-checkboxgrp-row,
#mauticform_newcontactformibkrcharteredinvestmenten_consent .mauticform-checkboxgrp-row,
#mauticform_newcontactformamccharteredinvestmenten_consent .mauticform-checkboxgrp-row
{
    position: relative !important;

    display: block !important;

    width: 18px !important;
    height: 18px !important;

    min-width: 18px !important;
    min-height: 18px !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;
    background: transparent !important;
}


/* Real checkbox */
#mauticform_checkboxgrp_checkbox_consent_agreed0 {
    position: absolute !important;

    top: 0 !important;
    left: 0 !important;

    width: 18px !important;
    height: 18px !important;

    margin: 0 !important;
    padding: 0 !important;

    opacity: 0 !important;

    z-index: 5 !important;

    cursor: pointer !important;
}


/* Label */
#mauticform_checkboxgrp_label_consent_agreed0 {
    position: relative !important;

    display: block !important;

    width: 18px !important;
    height: 18px !important;

    min-width: 18px !important;
    min-height: 18px !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;
    background: transparent !important;

    font-size: 0 !important;
    line-height: 0 !important;

    cursor: pointer !important;
}


/* Checkbox square */
#mauticform_checkboxgrp_label_consent_agreed0::before {
    content: "" !important;

    position: absolute !important;

    top: 0 !important;
    left: 0 !important;

    width: 18px !important;
    height: 18px !important;

    box-sizing: border-box !important;

    background: #ffffff !important;

    border: 1px solid #bfd1dd !important;
    border-radius: 4px !important;

    transform: none !important;
}


/* Blue checkmark */
#mauticform_checkboxgrp_label_consent_agreed0::after {
    content: "" !important;

    position: absolute !important;

    top: 3px !important;
    left: 6px !important;

    width: 5px !important;
    height: 9px !important;

    box-sizing: border-box !important;

    background: transparent !important;

    border: solid #20a9ed !important;
    border-width: 0 2px 2px 0 !important;

    border-radius: 0 !important;

    transform: rotate(45deg) !important;

    opacity: 0 !important;
}


/* Checked */
#mauticform_checkboxgrp_checkbox_consent_agreed0:checked
+ #mauticform_checkboxgrp_label_consent_agreed0::before {
    border-color: #20a9ed !important;
}


#mauticform_checkboxgrp_checkbox_consent_agreed0:checked
+ #mauticform_checkboxgrp_label_consent_agreed0::after {
    opacity: 1 !important;
}


/* ==========================================================
   POSITION CHECKBOX RELATIVE TO FORM PAGE
   ========================================================== */

#mauticform_newcontactformcharteredinvestmenten .mauticform-page-wrapper,
#mauticform_newcontactformsaxocharteredinvestmenten .mauticform-page-wrapper,
#mauticform_newcontactformibkrcharteredinvestmenten .mauticform-page-wrapper,
#mauticform_newcontactformamccharteredinvestmenten .mauticform-page-wrapper
{
    position: relative !important;
}


/* ==========================================================
   BETTER SOLUTION:
   Make the PAGE grid overlap privacy + consent.

   Privacy is field 9.
   Consent is field 10.

   Both are placed in the same grid row.
   ========================================================== */

#mauticform_newcontactformcharteredinvestmenten_privacy_policy,
#mauticform_newcontactformsaxocharteredinvestmenten_privacy_policy,
#mauticform_newcontactformibkrcharteredinvestmenten_privacy_policy,
#mauticform_newcontactformamccharteredinvestmenten_privacy_policy
{
    grid-column: 1 / -1 !important;
    grid-row: 7 !important;
}


#mauticform_newcontactformcharteredinvestmenten_consent,
#mauticform_newcontactformsaxocharteredinvestmenten_consent,
#mauticform_newcontactformibkrcharteredinvestmenten_consent,
#mauticform_newcontactformamccharteredinvestmenten_consent
{
    position: relative !important;

    grid-column: 1 !important;
    grid-row: 7 !important;

    align-self: start !important;
    justify-self: start !important;

    width: 18px !important;
    height: 18px !important;

    margin: 1px 0 0 !important;

    z-index: 10 !important;
}


/* Privacy text sits behind/right of checkbox */
#mauticform_newcontactformcharteredinvestmenten_privacy_policy,
#mauticform_newcontactformsaxocharteredinvestmenten_privacy_policy,
#mauticform_newcontactformibkrcharteredinvestmenten_privacy_policy,
#mauticform_newcontactformamccharteredinvestmenten_privacy_policy
{
    z-index: 1 !important;
}


/* ==========================================================
   VALIDATION ERROR
   ========================================================== */

#mauticform_newcontactformcharteredinvestmenten_consent .mauticform-errormsg,
#mauticform_newcontactformsaxocharteredinvestmenten_consent .mauticform-errormsg,
#mauticform_newcontactformibkrcharteredinvestmenten_consent .mauticform-errormsg,
#mauticform_newcontactformamccharteredinvestmenten_privacy_policy .mauticform-errormsg
{
    position: absolute !important;

    top: 22px !important;
    left: 0 !important;

    width: 320px !important;
    max-width: calc(100vw - 40px) !important;

    margin: 4px 0 0 !important;

    color: #dc3545 !important;

    font-size: 12px !important;
    line-height: 16px !important;
}


/* ==========================================================
   MOBILE

   IMPORTANT:
   Both fields remain on same grid row.
   ========================================================== */

@media (max-width: 767.98px) {

    #mauticform_newcontactformcharteredinvestmenten_privacy_policy,
    #mauticform_newcontactformsaxocharteredinvestmenten_privacy_policy,
    #mauticform_newcontactformibkrcharteredinvestmenten_privacy_policy,
    #mauticform_newcontactformamccharteredinvestmenten_privacy_policy
    {
        grid-column: 1 !important;
        grid-row: 10 !important;

        width: 100% !important;

        padding-left: 30px !important;

        margin-bottom: 28px !important;
    }


    #mauticform_newcontactformcharteredinvestmenten_consent,
    #mauticform_newcontactformsaxocharteredinvestmenten_consent,
    #mauticform_newcontactformibkrcharteredinvestmenten_consent,
    #mauticform_newcontactformamccharteredinvestmenten_consent
    {
        grid-column: 1 !important;
        grid-row: 10 !important;

        width: 18px !important;
        height: 18px !important;

        margin: 1px 0 0 !important;

        justify-self: start !important;
        align-self: start !important;
    }

}


/******25.09.2026**************/

#mauticform_input_newcontactformsaxocharteredinvestmenten_submit:not(:disabled),
#mauticform_input_newcontactformibkrcharteredinvestmenten_submit:not(:disabled),
#mauticform_input_newcontactformamccharteredinvestmenten_submit:not(:disabled)
{
    background: #FF7300 !important;
    color: #fff !important;
    opacity: 1 !important;
    cursor: pointer;
}
#mauticform_input_newcontactformsaxocharteredinvestmenten_submit:hover,
#mauticform_input_newcontactformibkrcharteredinvestmenten_submit:hover,
#mauticform_input_newcontactformamccharteredinvestmenten_submit:hover
{
    color: #fff;
    background: linear-gradient(90deg, rgba(255, 144, 0, 1) 0%, rgba(252, 63, 6, 1) 100%) !important;
    box-shadow: 1px 2px 10px rgba(255, 115, 0, 0.55) !important;
}

/* =========================================================
   CONSENT FIX — AMC + SAXO + IBKR
   ========================================================= */

#mauticform_newcontactformamccharteredinvestmenten_consent,
#mauticform_newcontactformsaxocharteredinvestmenten_consent,
#mauticform_newcontactformibkrcharteredinvestmenten_consent {
    position: relative !important;
    z-index: 20 !important;
    pointer-events: auto !important;
}


/* ROW */

#mauticform_newcontactformamccharteredinvestmenten_consent
.mauticform-checkboxgrp-row,

#mauticform_newcontactformsaxocharteredinvestmenten_consent
.mauticform-checkboxgrp-row,

#mauticform_newcontactformibkrcharteredinvestmenten_consent
.mauticform-checkboxgrp-row {
    position: relative !important;

    display: flex !important;
    align-items: flex-start !important;

    width: auto !important;
    height: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    pointer-events: auto !important;
    z-index: 21 !important;
}


/* =========================================================
   REAL CHECKBOX
   ========================================================= */

#mauticform_newcontactformamccharteredinvestmenten_consent
input[type="checkbox"],

#mauticform_newcontactformsaxocharteredinvestmenten_consent
input[type="checkbox"],

#mauticform_newcontactformibkrcharteredinvestmenten_consent
input[type="checkbox"] {
    position: relative !important;

    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;

    display: block !important;

    flex: 0 0 18px !important;

    width: 18px !important;
    min-width: 18px !important;
    max-width: 18px !important;

    height: 18px !important;
    min-height: 18px !important;
    max-height: 18px !important;

    margin: 0 !important;
    padding: 0 !important;

    opacity: 1 !important;
    visibility: visible !important;

    pointer-events: auto !important;
    cursor: pointer !important;

    z-index: 1000 !important;

    -webkit-appearance: none !important;
    appearance: none !important;

    background: #fff !important;

    border: 1px solid #bfd1dd !important;
    border-radius: 4px !important;

    transform: none !important;
}


/* =========================================================
   CHECKED STATE
   ========================================================= */

#mauticform_newcontactformamccharteredinvestmenten_consent
input[type="checkbox"]:checked,

#mauticform_newcontactformsaxocharteredinvestmenten_consent
input[type="checkbox"]:checked,

#mauticform_newcontactformibkrcharteredinvestmenten_consent
input[type="checkbox"]:checked {
    border-color: #20a9ed !important;
}


/* CHECKMARK */

#mauticform_newcontactformamccharteredinvestmenten_consent
input[type="checkbox"]:checked::after,

#mauticform_newcontactformsaxocharteredinvestmenten_consent
input[type="checkbox"]:checked::after,

#mauticform_newcontactformibkrcharteredinvestmenten_consent
input[type="checkbox"]:checked::after {
    content: "" !important;

    position: absolute !important;

    left: 5px !important;
    top: 2px !important;

    width: 5px !important;
    height: 9px !important;

    border: solid #20a9ed !important;
    border-width: 0 2px 2px 0 !important;

    transform: rotate(45deg) !important;

    pointer-events: none !important;
}


/* =========================================================
   HIDE "I AGREE." TEXT

   Important: do NOT make this label cover the checkbox.
   ========================================================= */

#mauticform_newcontactformamccharteredinvestmenten_consent
.mauticform-checkboxgrp-label,

#mauticform_newcontactformsaxocharteredinvestmenten_consent
.mauticform-checkboxgrp-label,

#mauticform_newcontactformibkrcharteredinvestmenten_consent
.mauticform-checkboxgrp-label {
    position: absolute !important;

    width: 1px !important;
    height: 1px !important;

    margin: -1px !important;
    padding: 0 !important;

    overflow: hidden !important;

    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;

    white-space: nowrap !important;

    border: 0 !important;

    pointer-events: none !important;
}


/* =========================================================
   PREVENT DECORATIVE ELEMENTS FROM BLOCKING CLICK
   ========================================================= */

#mauticform_newcontactformamccharteredinvestmenten_consent
.mauticform-checkboxgrp-row::before,

#mauticform_newcontactformamccharteredinvestmenten_consent
.mauticform-checkboxgrp-row::after,

#mauticform_newcontactformsaxocharteredinvestmenten_consent
.mauticform-checkboxgrp-row::before,

#mauticform_newcontactformsaxocharteredinvestmenten_consent
.mauticform-checkboxgrp-row::after,

#mauticform_newcontactformibkrcharteredinvestmenten_consent
.mauticform-checkboxgrp-row::before,

#mauticform_newcontactformibkrcharteredinvestmenten_consent
.mauticform-checkboxgrp-row::after {
    pointer-events: none !important;
}