.mod-sofunktionierts {
    --sf-bg: #EEF4FD;
    --sf-heading-bg: #1C5AA6;
    --sf-heading-area-text: #FFFFFF;
    --sf-heading: #053E92;
    --sf-text: #1F2937;
    --sf-accent: #1C5AA6;
    --sf-icon: #1C5AA6;
    --sf-mt: 0px;
    --sf-mb: 0px;
    --sf-pt: 30px;
    --sf-pr: 20px;
    --sf-pb: 60px;
    --sf-pl: 20px;
    --sf-heading-icons-gap: 30px;
    --sf-icon-size-desktop: 74px;
    --sf-icon-size-mobile: 56px;
    --sf-circle-size-desktop: 118px;
    --sf-circle-radius-desktop: 59px;
    --sf-circle-size-mobile: 86px;
    --sf-circle-radius-mobile: 43px;
    background: var(--sf-bg);
    margin: var(--sf-mt) 0 var(--sf-mb);
    padding: var(--sf-pt) var(--sf-pr) var(--sf-pb) var(--sf-pl);
    width: 100%;
}

.mod-sofunktionierts,
.mod-sofunktionierts * {
    box-sizing: border-box;
}

.mod-sofunktionierts__inner {
    width: 100%;
    margin: 0 auto;
    padding: 0;
}


.mod-sofunktionierts__timeline {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    width: 100%;
}

.mod-sofunktionierts__step {
    position: relative;
    min-width: 0;
    padding: 0;
}

.mod-sofunktionierts__step:not(:last-child)::after {
    content: "";
    position: absolute;
    top: calc(var(--sf-circle-size-desktop) + 30px);
    right: 0;
    width: 1px;
    height: calc(100% - var(--sf-circle-size-desktop) - 30px);
    background: var(--sf-accent);
    opacity: .22;
}

.mod-sofunktionierts__iconcol {
    position: relative;
    height: calc(var(--sf-circle-size-desktop) + 14px);
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

.mod-sofunktionierts__iconcircle {
    position: relative;
    z-index: 2;
    width: var(--sf-circle-size-desktop);
    height: var(--sf-circle-size-desktop);
    flex: 0 0 var(--sf-circle-size-desktop);
    border-radius: 50%;
    background: #fff;
    color: var(--sf-icon);
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 1px 5px rgba(0, 0, 0, .03);
}

.mod-sofunktionierts__iconcircle svg {
    width: var(--sf-icon-size-desktop);
    height: var(--sf-icon-size-desktop);
    display: block;
}

.mod-sofunktionierts__connector {
    position: absolute;
    top: var(--sf-circle-radius-desktop);
    left: 50%;
    width: 100%;
    height: 2px;
    background: var(--sf-accent);
    z-index: 1;
}

.mod-sofunktionierts__dot {
    position: absolute;
    width: 12px;
    height: 12px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: var(--sf-accent);
}

.mod-sofunktionierts__content {
    padding: 12px 18px 0;
}

.mod-sofunktionierts__step-title {
    margin: 0 0 14px;
    color: var(--sf-heading);
    font-size: var(--sf-step-h-size);
    line-height: 1.25;
    font-weight: 700;
    text-align: center;
    min-height: 2.5em;
}

.mod-sofunktionierts__text {
    margin: 0;
    color: var(--sf-text);
    font-size: var(--sf-text-size);
    line-height: 1.55;
    text-align: justify;
    text-justify: inter-word;
}

@media (max-width: 900px) {

    .mod-sofunktionierts__timeline {
        display: block;
    }

   .mod-sofunktionierts__step {
        display: grid;
        grid-template-columns: calc(var(--sf-circle-size-mobile) + 4px) minmax(0, 1fr);
        column-gap: 22px;
        padding: 0 0 34px;
        min-height: calc(var(--sf-circle-size-mobile) + 60px);
    }

    .mod-sofunktionierts__step:last-child {
        padding-bottom: 0;
    }

    .mod-sofunktionierts__step:not(:last-child)::after {
        display: none;
    }

    .mod-sofunktionierts__iconcol {
        height: 100%;
        min-height: calc(var(--sf-circle-size-mobile) + 52px);
        align-items: flex-start;
        justify-content: center;
    }

    .mod-sofunktionierts__iconcircle {
        width: var(--sf-circle-size-mobile);
        height: var(--sf-circle-size-mobile);
        flex: 0 0 var(--sf-circle-size-mobile);
    }

    .mod-sofunktionierts__iconcircle svg {
        width: var(--sf-icon-size-mobile);
        height: var(--sf-icon-size-mobile);
    }

    .mod-sofunktionierts__connector {
        display: block;
        top: var(--sf-circle-size-mobile);
        left: 50%;
        width: 2px;
        height: calc(100% - var(--sf-circle-size-mobile));
        background: var(--sf-accent);
    }

    .mod-sofunktionierts__dot {
        width: 12px;
        height: 12px;
        left: 50%;
        top: 0;
        transform: translate(-50%, -50%);
    }

    .mod-sofunktionierts__content {
        padding: 12px 0 0;
    }

    .mod-sofunktionierts__step-title {
        margin-bottom: 10px;
        min-height: 0;
    }
}

@media (max-width: 540px) {
   .mod-sofunktionierts__step {
        grid-template-columns: calc(var(--sf-circle-size-mobile) + 4px) minmax(0, 1fr);
        column-gap: 16px;
        min-height: calc(var(--sf-circle-size-mobile) + 52px);
        padding-bottom: 26px;
    }

    .mod-sofunktionierts__iconcircle svg {
        width: var(--sf-icon-size-mobile);
        height: var(--sf-icon-size-mobile);
    }

    .mod-sofunktionierts__connector {
        top: var(--sf-circle-size-mobile);
        left: 50%;
        height: calc(100% - var(--sf-circle-size-mobile));
    }

    .mod-sofunktionierts__content {
        padding-top: 6px;
    }

    .mod-sofunktionierts__text {
        text-align: left;
        line-height: 1.5;
    }
}

/* Blauer Überschriftenbereich: Hintergrund und Schriftfarbe sind im Backend einstellbar. */
.mod-sofunktionierts__heading-area {
    width: calc(100% + var(--sf-pl) + var(--sf-pr));
    box-sizing: border-box;
    background: var(--sf-heading-bg);
    color: var(--sf-heading-area-text);
    margin: calc(-1 * var(--sf-pt)) calc(-1 * var(--sf-pr)) var(--sf-heading-icons-gap) calc(-1 * var(--sf-pl));
    padding: var(--sf-pt) var(--sf-pr) 20px var(--sf-pl);
}

/* Hauptüberschrift: Ausrichtung kommt direkt aus dem Joomla-Editor. */
.sf-main-heading {
    color: inherit;
    margin: 0;
}

.mod-sofunktionierts__heading-area .sf-main-heading h1,
.mod-sofunktionierts__heading-area .sf-main-heading h2,
.mod-sofunktionierts__heading-area .sf-main-heading h3,
.mod-sofunktionierts__heading-area .sf-main-heading h4,
.mod-sofunktionierts__heading-area .sf-main-heading h5,
.mod-sofunktionierts__heading-area .sf-main-heading h6,
.mod-sofunktionierts__heading-area .sf-main-heading p,
.mod-sofunktionierts__heading-area .sf-main-heading div,
.mod-sofunktionierts__heading-area .sf-main-heading span {
    color: inherit;
}

.sf-main-heading--custom-size {
    font-size: var(--sf-main-heading-size);
}

.sf-main-heading--custom-size * {
    font-size: inherit !important;
}

.sf-main-heading > :first-child {
    margin-top: 0 !important;
}

.sf-main-heading > :last-child {
    margin-bottom: 0 !important;
}

/* Optionaler Editor-Text unter der Hauptüberschrift. */
.mod-sofunktionierts__intro {
    width: 100%;
    box-sizing: border-box;
    color: inherit;
    line-height: 1.55;
    margin: 12px 0 0;
}

.mod-sofunktionierts__heading-area .mod-sofunktionierts__intro p,
.mod-sofunktionierts__heading-area .mod-sofunktionierts__intro div,
.mod-sofunktionierts__heading-area .mod-sofunktionierts__intro span,
.mod-sofunktionierts__heading-area .mod-sofunktionierts__intro strong,
.mod-sofunktionierts__heading-area .mod-sofunktionierts__intro em {
    color: inherit;
}

.mod-sofunktionierts__intro--custom-size {
    font-size: var(--sf-intro-size);
}

.mod-sofunktionierts__intro--custom-size * {
    font-size: inherit !important;
}

.mod-sofunktionierts__intro > :first-child {
    margin-top: 0 !important;
}

.mod-sofunktionierts__intro > :last-child {
    margin-bottom: 0 !important;
}