[id$="__button"]{
    cursor:pointer;
    transition:all .25s ease;
}

[id$="__button"].active{
    background:var(--primary);
    color:#fff;
    transform:translateY(-3px);
    box-shadow:0 12px 30px rgba(0,0,0,.15);
    animation:activePulse .35s ease;
}

@keyframes activePulse{
    0%{
        transform:translateY(-3px) scale(1);
    }
    50%{
        transform:translateY(-3px) scale(1.03);
    }
    100%{
        transform:translateY(-3px) scale(1);
    }
}
[id$="__button"].active i,
[id$="__button"].active svg{
    color:#fff;
    fill:#fff;
}

/* AT DE SEITE */
#inixtra__background_de_at .ce_bgimage-image{
    /*background: linear-gradient(
        135deg,
        #008C97,
        #006BB4
    );
    
	background: linear-gradient(
	    135deg,
	    #00B37E 0%,
	    #00B37E 30%,
	    #009F88 55%,
	    #006BB4 100%
	);
    */
    
	background: linear-gradient(
	    135deg,
	    #00B37E 0%,
	    #00AF7C 20%,
	    #00A08A 45%,
	    #008C97 70%,
	    #006BB4 100%
	); 

    background-size:200% 200%;
    animation: inixtraGradient 12s ease infinite;
}

@keyframes inixtraGradient{
    0%{background-position:0% 50%;}
    50%{background-position:100% 50%;}
    100%{background-position:0% 50%;}
}
#inixtra__title_de_at h1{
    margin:0;
    font-weight:800;
    letter-spacing:-0.03em;
    text-shadow:0 3px 12px rgba(0,0,0,.18);
        padding-top: 6rem;
    padding-bottom: 6rem;
    font-size: clamp(4rem, 6vw, 8rem);
}
#inixtra__background_de_at .contentwrap{

}


/* ==========================================================
   INIXTRA – TOP NAVIGATION
   ========================================================== */

.inixtra-nav {
    width: 100%;
    margin: 0 0 0;
}

#TopNav-Outer-Article > .container {
    padding-bottom: 0 !important;
}

#LowNav-Outer-Article > .container {
    padding-top: 4rem !important;
}


/* ----------------------------------------------------------
   BUTTONS
   ---------------------------------------------------------- */

.inixtra-nav-tabs {
    display: flex;
    width: 100%;
    margin: 0;
    padding: 0;

    border: 1px solid #006BB4 !important;
    border-radius: 10px;
    overflow: hidden;

    box-sizing: border-box;
}

.inixtra-nav-button {
    appearance: none !important;
    -webkit-appearance: none !important;

    flex: 1 1 33.333%;
    width: 33.333%;

    margin: 0 !important;

    padding: 0.65rem 1rem;

    background: #fff !important;
    color: #006BB4 !important;

    border: 0 !important;
    border-right: 1px solid #006BB4 !important;
    border-radius: 0 !important;

    outline: none !important;
    box-shadow: none !important;

    font-family: inherit;
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;

    cursor: pointer;

    transition:
        background-color .25s ease,
        color .25s ease;
}


/* Linker Button */

.inixtra-nav-button:first-child {
    border-radius: 9px 0 0 9px !important;
}


/* Rechter Button */

.inixtra-nav-button:last-child {
    border-right: 0 !important;
    border-radius: 0 9px 9px 0 !important;
}


/* Hover */

.inixtra-nav-button:hover {
    background: #f5faff !important;
    color: #006BB4 !important;
}


/* Aktiv */

.inixtra-nav-button.active {
    background: #006BB4 !important;
    color: #fff !important;

    border-color: #006BB4 !important;
}


/* ----------------------------------------------------------
   PROGRESSBAR
   ---------------------------------------------------------- */

.inixtra-progress {
    position: relative;

    width: 100%;
    height: 22px;

    margin: 0.5rem 0 0 0;

    display: block;
}


/* komplette helle Linie */

.inixtra-progress::before {
    content: "";

    position: absolute;

    left: 0;
    right: 0;

    top: 50%;
    transform: translateY(-50%);

    width: 100%;
    height: 3px;

    background: #8ac8f5;

    z-index: 0;
}


/* aktive Linie */

.inixtra-progress-line {
    position: absolute;

    left: 0;
    top: 50%;

    width: 16.6667%;
    height: 3px;

    transform: translateY(-50%);

    background: #006BB4;

    transition: width .35s ease;

    z-index: 1;
}


/* ----------------------------------------------------------
   PUNKTE
   ---------------------------------------------------------- */

.inixtra-progress-dot {
    position: absolute;

    top: 50%;

    width: 12px;
    height: 12px;

    margin: 0;

    border-radius: 50%;
    border: 2px solid #8ac8f5;

    background: #8ac8f5;

    transform: translate(-50%, -50%);

    z-index: 2;

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


/*
 * Punkte exakt mittig unter den drei Buttons
 */

.inixtra-progress-dot:nth-of-type(2) {
    left: 16.6667%;
}

.inixtra-progress-dot:nth-of-type(3) {
    left: 50%;
}

.inixtra-progress-dot:nth-of-type(4) {
    left: 83.3333%;
}


.inixtra-progress-dot.active {
    background: #006BB4;
    border-color: #006BB4;

    transform: translate(-50%, -50%) scale(1.1);
}





@media (max-width: 640px) {

    /* ==========================================================
       INIXTRA – MOBILE NAVIGATION
       ========================================================== */

    /* Obere Navigation ausblenden */
    .inixtra-nav-tabs,
    .inixtra-progress {
        display: none !important;
    }


    /* ==========================================================
       KACHEL-BEREICH
       ========================================================== */

    #LowNav-Outer-Article {
        position: relative;
    }


    /*
     * Wir bauen den mobilen Bereich bewusst als Grid auf.
     *
     * Die drei Kacheln bilden die drei Grid-Zeilen.
     * Die drei Dot-Spalten werden jeweils über dieselbe
     * Grid-Zeile gelegt.
     */

    #LowNav-Outer-Article .autogrid_row {
        position: relative;

        display: grid !important;
        grid-template-columns: 1fr;
    }


    /* ==========================================================
       DIE 3 KACHELN
       ========================================================== */

    #LowNav-Outer-Article .autogrid_row > .column:nth-child(1) {
        grid-column: 1;
        grid-row: 1;

        width: 100% !important;
        float: none !important;
    }

    #LowNav-Outer-Article .autogrid_row > .column:nth-child(2) {
        grid-column: 1;
        grid-row: 2;

        width: 100% !important;
        float: none !important;
    }

    #LowNav-Outer-Article .autogrid_row > .column:nth-child(3) {
        grid-column: 1;
        grid-row: 3;

        width: 100% !important;
        float: none !important;
    }


    /* ==========================================================
       DOT-SPALTEN
       ========================================================== */

    #LowNav-Outer-Article .inixtra-mobile-dot-column {
        display: flex !important;

        position: relative !important;

        right: -33.5px !important;
        top: auto !important;

        width: 20px !important;
        height: 100% !important;

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

        justify-self: end;
        align-self: stretch;

        z-index: 5;
    }


    /*
     * Dot 1
     */

    #LowNav-Outer-Article .inixtra-mobile-dot-column:nth-child(4) {
        grid-column: 1;
        grid-row: 1;

        justify-content: center;
        align-items: center;
    }


    /*
     * Dot 2
     */

    #LowNav-Outer-Article .inixtra-mobile-dot-column:nth-child(5) {
        grid-column: 1;
        grid-row: 2;

        justify-content: center;
        align-items: center;
    }


    /*
     * Dot 3
     */

    #LowNav-Outer-Article .inixtra-mobile-dot-column:nth-child(6) {
        grid-column: 1;
        grid-row: 3;

        justify-content: center;
        align-items: center;
    }


    /* ==========================================================
       DOTS
       ========================================================== */

    .IniLife-mobile-dot,
    .IniCare-mobile-dot,
    .IniFlex-mobile-dot {

        display: block;

        width: 12px;
        height: 12px;

        margin: 0;

        background: #8ac8f5;

        border: 2px solid #8ac8f5;
        border-radius: 50%;

        box-sizing: border-box;

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


    /* Aktiver Punkt */

    .IniLife-mobile-dot.active,
    .IniCare-mobile-dot.active,
    .IniFlex-mobile-dot.active {

        background: #006BB4;
        border-color: #006BB4;

        transform: scale(1.1);
    }


    /* ==========================================================
       VERTIKALE LINIE
       ========================================================== */


	#LowNav-Outer-Article .autogrid_row::before {
	    content: "";
	
	    position: absolute;
	
	    top: 0;
	    bottom: auto;
	
	    right: -25px;
	
	    width: 3px;
	
	    height: var(--mobile-progress, 16.6667%);
	
	    background: #006BB4;
	
	    z-index: 2;
	
	    transition: height .35s ease;
	}


    #LowNav-Outer-Article .autogrid_row::after {

        content: "";

        position: absolute;

        top: 0;
        bottom: 0;

        right: -25px;

        width: 3px;

        background: #8ac8f5;

        z-index: 1;
    }


    /*
     * Die Punkte müssen über der Linie liegen.
     */

    #LowNav-Outer-Article .inixtra-mobile-dot-column {
        z-index: 2;
    }

}