.elementor-6544 .elementor-element.elementor-element-0c27273{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-6544 .elementor-element.elementor-element-0c27273:not(.elementor-motion-effects-element-type-background), .elementor-6544 .elementor-element.elementor-element-0c27273 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("http://test.bootsschulex.de/wp-content/uploads/2024/11/BGKontakt.webp");background-position:top center;background-size:cover;}.elementor-6544 .elementor-element.elementor-element-0f0d3b6{--display:flex;--margin-top:0%;--margin-bottom:0%;--margin-left:0%;--margin-right:0%;--padding-top:5%;--padding-bottom:5%;--padding-left:0%;--padding-right:0%;}.elementor-6544 .elementor-element.elementor-element-0f0d3b6:not(.elementor-motion-effects-element-type-background), .elementor-6544 .elementor-element.elementor-element-0f0d3b6 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF00;}.elementor-6544 .elementor-element.elementor-element-0f0d3b6.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-6544 .elementor-element.elementor-element-0b02be1 > .elementor-widget-container{margin:0% 0% 0% 0%;}.elementor-6544 .elementor-element.elementor-element-0b02be1{text-align:center;}.elementor-6544 .elementor-element.elementor-element-0b02be1 .elementor-heading-title{font-family:"Roboto", Sans-serif;font-size:40px;font-weight:400;text-transform:none;font-style:normal;text-decoration:none;line-height:1.2em;letter-spacing:0px;word-spacing:0em;color:#FFFFFF;}.elementor-6544 .elementor-element.elementor-element-12ab222{--spacer-size:20px;}.elementor-6544 .elementor-element.elementor-element-a41a097 .twae-wrapper{--tw-cbx-text-align:center;--tw-lbl-big-color:#FFFFFF;--tw-lbl-big-size:24px;--tw-lbl-small-color:#B5B5D8;--tw-lbl-small-size:16px;--tw-ybx-size:80px;--tw-cbx-bottom-margin:60px;--tw-cbx-bd-top-width:0px;--tw-cbx-bd-right-width:0px;--tw-cbx-bd-bottom-width:0px;--tw-cbx-bd-left-width:0px;--tw-cbx-title-color:#FFFFFF;--tw-cbx-des-color:#EEEEEE;}.elementor-6544 .elementor-element.elementor-element-a41a097 .twae-wrapper, .elementor-6544 .elementor-element.elementor-element-a41a097 .twae-navigationBar{--tw-ibx-bg:#191B44;--tw-ibx-color:#FFFFFF;--tw-ybx-text-color:#FFFFFF;}.elementor-6544 .elementor-element.elementor-element-a41a097 .twae-wrapper, .elementor-page .twae-popup .twae-popup-content{--tw-cbx-bg:#FFFFFF;}.elementor-6544 .elementor-element.elementor-element-a41a097 .twae-title, .twae-popup .twae-title{font-size:20px;}@media(max-width:1024px){.elementor-6544 .elementor-element.elementor-element-0c27273{--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );}.elementor-6544 .elementor-element.elementor-element-0f0d3b6{--padding-top:5%;--padding-bottom:5%;--padding-left:0%;--padding-right:0%;}.elementor-6544 .elementor-element.elementor-element-0b02be1 .elementor-heading-title{font-size:35px;}.elementor-6544 .elementor-element.elementor-element-a41a097.elementor-element{--align-self:center;}.elementor-6544 .elementor-element.elementor-element-a41a097 .twae-wrapper{--tw-lbl-big-size:20px;--tw-lbl-small-size:14px;--tw-ybx-size:80px;}}@media(max-width:767px){.elementor-6544 .elementor-element.elementor-element-0f0d3b6{--padding-top:10%;--padding-bottom:15%;--padding-left:0%;--padding-right:0%;}.elementor-6544 .elementor-element.elementor-element-0b02be1 > .elementor-widget-container{margin:0% 0% 3% 0%;}.elementor-6544 .elementor-element.elementor-element-0b02be1 .elementor-heading-title{font-size:28px;line-height:1.1em;}.elementor-6544 .elementor-element.elementor-element-a41a097 .twae-wrapper{--tw-lbl-big-size:18px;--tw-lbl-small-size:14px;--tw-ybx-size:80px;}}@media(max-width:1024px) and (min-width:768px){.elementor-6544 .elementor-element.elementor-element-0f0d3b6{--width:100%;}}@media(min-width:1025px){.elementor-6544 .elementor-element.elementor-element-0c27273:not(.elementor-motion-effects-element-type-background), .elementor-6544 .elementor-element.elementor-element-0c27273 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-attachment:scroll;}}/* Start custom CSS for timeline-widget-addon, class: .elementor-element-a41a097 *//* Standard: Inhalt verstecken und Animation vorbereiten */
.twae-wrapper .twae-repeater-item .twae-content {
    display: none;
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Standard: Pfeil 180 Grad gedreht */
.twae-wrapper .twae-repeater-item .twae-arrow {
    transform: rotate(225deg);
    transition: transform 0.3s ease;
}

/* Aktiver Tab (gesteuert durch JavaScript) */
.twae-wrapper .twae-repeater-item.active .twae-content {
    display: block;
    opacity: 1;
    transform: translateY(0);
}

.twae-wrapper .twae-repeater-item.active .twae-arrow {
    transform: rotate(45deg);
}

.twae-wrapper .twae-content {
    display: flex !important;
    flex-flow: column !important;
    overflow: hidden !important;
    position: relative !important;
    margin: 0 !important;
    padding: var(--tw-cbx-padding) !important;
    background: linear-gradient(135deg, #469adf, #3445c4) !important; /* Beispiel: diagonaler Verlauf */
    border-width: var(--tw-cbx-bd-top-width) var(--tw-cbx-bd-right-width) var(--tw-cbx-bd-bottom-width) var(--tw-cbx-bd-left-width) !important;
    border-color: var(--tw-cbx-bd-color) !important;
    border-style: var(--tw-cbx-bd-style) !important;
    box-shadow: var(--tw-cbx-shadow) !important;
    border-radius: var(--tw-cbx-radius) !important;
    -webkit-border-radius: var(--tw-cbx-radius) !important;
    -moz-border-radius: var(--tw-cbx-radius) !important;
    -ms-border-radius: var(--tw-cbx-radius) !important;
    -o-border-radius: var(--tw-cbx-radius) !important;
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-0f0d3b6 */.progress-steps {
    display: flex;
    justify-content: space-around;
    align-items: flex-start;
    margin-bottom: 20px;
    position: relative;
}

.step-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    width: 100px;
}

.step-title {
    margin-bottom: 50px;
    font-size: 1.2em;
    color: #fff;
    text-align: center;
    font-weight: bold;
}

.step {
    width: 30px;
    height: 30px;
    background-color: #fff;
    border-radius: 50%;
    cursor: pointer;
    position: relative;
    z-index: 1;
    margin-bottom: 40px;
    --line-height: 0; /* Standardhöhe der Linie */
    --line-color: transparent; /* Standardfarbe der Linie */
}

.step::before {
    content: '';
    position: absolute;
    top: -30px;
    left: -30px;
    width: 90px;
    height: 90px;
    border: 8px solid #fff;
    border-radius: 50%;
    z-index: -1;
}

.step::after {
    content: '';
    position: absolute;
    top: calc(100% + 22px); /* Startet unterhalb des äußeren Rings */
    left: 50%;
    width: 8px; /* Gleiche Dicke wie horizontale Linien */
    height: var(--line-height);
    background-color: var(--line-color);
    transform: translateX(-50%);
    transition: height 0.3s, background-color 0.3s;
}

.step:hover,
.step.selected {
    background-color: #683BFB;
}

.step:hover::before,
.step.selected::before {
    border-color: #683BFB;
}

/* Horizontale Linien zwischen den Kreisen */
.step-container:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 60%;
    left: 130%;
    width: 60px;
    height: 3px;
    background-color: #fff; /* Bleibt weiß */
    transform: translateY(-50%);
    z-index: 0;
    pointer-events: none;
}

.step-description {
    background-color: #683BFB;
    color: #fff;
    padding: 15px 20px;
    border-radius: 10px;
    text-align: center;
    transition: all 0.3s ease;
    max-width: 400px;
    position: absolute;
    font-size: 1.2em;
    margin-top: 20px;
    z-index: 10;
}

/* Mobile Anpassungen */
@media screen and (max-width: 600px) {
    .progress-steps {
        justify-content: space-between;
        padding: 0 10px; /* Horizontaler Abstand */
    }

    .step-container {
        width: 50px; /* Weitere Verkleinerung der Breite */
    }

    .step-title {
        margin-bottom: 30px;
        font-size: 0.7em;
    }

    .step {
        width: 20px;
        height: 20px;
        margin-bottom: 1.8em;
    }

    .step::before {
        top: -20px;
        left: -20px;
        width: 60px;
        height: 60px;
        border-width: 5px;
    }

    .step::after {
        top: calc(100% + 15px);
        width: 5px;
    }

    .step-container:not(:last-child)::after {
        left: 120%; /* Angepasst an die verkleinerte Breite */
        width: 10px; /* Verkleinerte Länge der horizontalen Linie */
        height: 2px;
    }

    .step-description {
        font-size: 0.9em;
        max-width: 90%;
    }
}

/* Zusätzliche Anpassungen für sehr kleine Bildschirme */
@media screen and (max-width: 400px) {
    .progress-steps {
        padding: 0 1px;
    }

    .step-container {
        width: 10em;
    }

    .step-title {
        margin-bottom: 25px;
        font-size: 0.6em;
    }

    .step {
        width: 15px;
        height: 15px;
        margin-bottom: 25px;
    }

    .step::before {
        top: -15px;
        left: -15px;
        width: 45px;
        height: 45px;
        border-width: 4px;
    }

    .step::after {
        top: calc(100% + 10px);
        width: 4px;
    }

    .step-container:not(:last-child)::after {
        left: 95%; /* Angepasst an die verkleinerte Breite */
        width: 8px; /* Verkleinerte Länge der horizontalen Linie */
        height: 2px;
    }

    .step-description {
        font-size: 0.8em;
    }
}


a {
    color: white;
    font-weight: bold;
    text-decoration: none; /* Unterstreichung entfernen, falls gewünscht */
    transition: color 0.3s ease; /* Sanfter Übergang bei Farbänderung */
}

a:hover {
    color: #cccccc; /* Leicht grauer Ton beim Hovern */
}/* End custom CSS */