/**Basic Elements**/
    @font-face {
        font-family:'gudea';
        src:url(./fonts/Gudea/Gudea-Regular.ttf) format("embedded-opentype"),url(./fonts/Gudea/Gudea-Regular.ttf) format("woff2"),url(./fonts/Gudea/Gudea-Regular.ttf) format("woff"),url(./fonts/Gudea/Gudea-Regular.ttf) format("truetype"),url(./fonts/Gudea/Gudea-Regular.ttf) format("svg")
    }
    
    * {
        scroll-behavior:smooth;
        color: #222;
    }
    
    :root {
        --bt-orange:#ed7205;
        --corner-rad:12px;
    }
    
    html, body {
        font-size: 14px;
        height: 100%;
        overflow-x: hidden;
        font-family:'gudea',sans-serif;
        color:#333;
        margin: 0;
        padding: 0;
        display: flex;
        justify-content: center;
    }

    #wrapper {
        height: 100%;
        overflow-y: scroll;
        scroll-behavior: smooth;
        overflow-x: hidden;
        scroll-snap-type: y mandatory;
        margin-top: 0px;
        width:100%;
        max-width:2560px;
        box-sizing: border-box;
    }

    .size-title {
        font-size: 2em;
    }
    
    .size-subtitle {
        font-size: 1.4em;
    }

    .size-text {
        font-size: 1.4em;
    }
    
    /*.text-black {
        color:#222;
        align-self:center;
    }*/
    
    .text-orange {
        color:var(--bt-orange);
        align-self:center;
    }

    /**Header Elements**/  

    .header {
        height: 80px;
        padding:10px 40px;
        background:inherit!important;
        align-items:center;
        position:sticky;
        display:flex;
        justify-content:space-between;
        background-color:#fbfaffbf!important;
        backdrop-filter:blur(12px)!important;
        box-shadow:0 4px 12px #0000001a;
        top: 0px;
        left:0;
        right:0;
        z-index: 999;
    }

    .header-nav-links {
        text-decoration:none;
        justify-content:center;
        align-items:center;
        display:flex;
        transition:all .3s ease;
    }
    
    /*.header-nav-links:hover {
        color:var(--bt-orange);
    }*/
    
    .tviewer {
        padding:6px 18px;
        border:none;
        outline:none;
        color:#FFF;
        background-color:var(--bt-orange);
        cursor:pointer;
        position:relative;
        text-decoration:none;
        border-radius:8px;
    }
    
    .tviewer:hover {
        background-color:transparent;
        color: var(--bt-orange);
        transition:color .3s ease, background-color .3s ease;
    }

    .bt_logo_hdr {
        width:200px;
        min-width:80px;
        height:auto;
        align-self:center;
    }
    
    .bt_logo_hdr:hover {
        cursor:pointer;
    }
    
    .nav {
        list-style-type:none;
        display:flex;
        align-items:center;
        gap:30px;
    }

    /**Homepage Elements**/
    .home-container {
        width:100%;
        text-align: center;
        align-content: center;
    }

    .home-sections-subtitle{
        margin: auto;
    }

    .home-features {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 5vw;
        --h-n-w: 45px;
        --margin: 13px;
    }
    
    .home-features ul {
        max-width: 40%;
        margin-top: 4.5vh;
        margin-bottom: 0;
        text-align: start;
        list-style: none;
        padding: 0;
    }
    
    .home-features ul li p {
        margin: 0;
    }
    
    .home-features ul li {
        display: flex;
        position: relative;
        margin: 0 0 70px 0;
        justify-content: flex-start;
        align-items: center;
    }
    
    .home-features ul li::before {
        content: "";
        height: var(--h-n-w);
        width: var(--h-n-w);
        background-size: contain;
        background-repeat: no-repeat;
        margin-right: var(--margin);
    }
    
    .home-features ul li[data-icon="wifi"]::before {
        background-image: url(img/sp_wifi.avif);
    }
    
    .home-features ul li[data-icon="storefront"]::before {
        background-image: url(img/sp_storefront.avif);
    }
    
    .home-features ul li[data-icon="consulting"]::before {
        background-image: url(img/sp_consulting.avif);
    }
    
    .home-features ul li[data-icon="print"]::before {
        background-image: url(img/sp_print.avif);
    }
    
    .home-features ul li[data-icon="maintenance"]::before {
        background-image: url(img/sp_maintenance.avif);
    }
    
    .home-features ul li[data-icon="tv"]::before {
        background-image: url(img/sp_tv.avif);
    }

    /**Section Elements**/
    .sections {
        /*align-content: end;*/
        align-content: center;
        
        display: flex;
        flex-direction: column;
        align-items: stretch;
        min-height: 100dvh;

        scroll-snap-align: end;
    }

    .sections>* {
        flex-grow: 0;
    }
    
    .sections-bg {
        max-width: 100vw;
        min-height: 20dvh;

        /*max-height: 50vh;
        background-size:contain;
        background-position:center;
        background-repeat:no-repeat;*/
    }

    /*#home-bg {
        
        background-image:url(img/hdr_startseite.avif);
    }
    
    #products-bg {
        background-image:url(img/hdr_produkte.avif);
    }
    
    #features-bg {
        background-image:url(img/hdr_leistungen.avif);
    }
    
    #cloud-bg {
        background-image:url(img/hdr_cloudservices.avif);
    }*/
    
    .sections-hdr-wrap {
        margin:0;
        text-decoration:none;
    }
    
    .sections-hdr {
        margin: 1.5%;
        text-align:center;
        cursor:default;
    }

    .home-sections-hdr {
        margin-top: 3%;
        margin-bottom:1%;
        text-align:center;
        cursor:default;
    }
    
    .card-container {
        max-height: fit-content;
        flex-grow: 1;
        padding-top: 2%;
        padding-bottom: 2%;
        overflow-x: auto;  /* Enable horizontal scrolling */
        display: flex;
        justify-content: space-evenly;
        flex-direction: row;
        column-gap: 32px;
        /*row-gap: 32px;*/
        scroll-behavior: smooth;
    }

    .feature-card {
        background-color:#fbfaffbf;
        box-shadow:0 4px 12px #0000001a;
        transition:transform .3s ease, box-shadow .3s ease, all .3s ease;
        text-decoration:none;
        justify-content:center;
        overflow: hidden;
        flex-wrap:wrap;
        min-width:300px;
        flex-shrink:1;
        width:22%;
    }
    
    .feature-card:hover:not(.cns-card) {
        transform:translateY(-10px);
        box-shadow:0 8px 16px #00000026;
    }
    
    .card-content {
        padding: 0% 5% 5% 5%;
    }
    
    .card-title {
        font-weight: 700;
        margin: 0%;
    }
    
    .card-description {
        line-height:130%;
    }
    
    .feature-card-image {
        width:90%;
        align-self: center;
        height: auto;
        margin: 5%;
    }
    /**Footer Elements**/
    #map {
        align-self: center;
    }

    .fter {
        margin: 2vh 0% 0% 0%;
        padding:20px 40px;
        background:inherit!important;
        align-items:center;
        justify-content:space-between;
        background-color:#fbfaffbf!important;
        backdrop-filter:blur(12px)!important;
        box-shadow:0 0 12px #0000001a;
        display:grid;
        grid-template-columns:1fr 1fr 1fr 1fr 1.5fr;
        gap:20px;
        bottom:0;
        position:relative;
    }

    #footer{
        min-height: fit-content;
        height: auto;
    }
    
    .ul_nobullet {
        list-style-type:none;
        margin:0;
        padding:0;
    }
    
    .ul_nobullet>p {
        margin:0;
    }
    
    .fterelement {
        background-color:#fbfaff;
        border-radius:5px;
        padding:0;
        align-self:center;
        justify-self:center;
    }
    
    .fterelement>h4 {
        margin:0;
    }
    
    .fterelement>p {
        margin:0;
    }
    
    .single-nav-links {
        min-width: fit-content;
        min-height: fit-content;
        list-style-type:none;
        display:flex;
        text-decoration:none;
        padding:0;
        margin:0;
        align-items:center;
        gap:0;
        text-decoration:none;
        transition:color .3s ease;
        cursor:pointer;
    }
    
    .single-nav-links:hover {
        color:var(--bt-orange)
    }
    
    .bt_logo_fter {
        width:140px;
        height:auto;
    }
    
    .space_invader_fter {
        background-image:url(img/fter_invader.avif);
        width:80px;
        height:80px;
        display:block;
        margin-left:auto;
        margin-right:auto;
        background-position:center;
        background-repeat:no-repeat;
        background-size:contain;
        border:none;
    }
    
    .space_invader_fter:hover {
        background-image:url(img/fter_invader_special.avif);
        cursor:pointer;
    }

    /*.center-element {
        display: flex;
        overflow: none;
        text-overflow: ellipsis;
        white-space: nowrap;
        justify-content:center;
        align-items:center;
        column-gap:4px;
        padding:0%;
        top: 0%;
        margin: 0%;
    }*/

    .center-element {
        display: flex;
        column-gap: 10px;
    }

    .frame {
        width: 100%;
        height: auto;
    }

    .seperator {
        margin: 0%;
    }

    /*******************************************************************************************/
    
    /*media queries < 600px, 768, 992, 1200px*/
    @media(max-width: 1200px) {

    }

    @media(min-width: 1201px) {

    }

    @media(max-width: 992px) {

    }

    @media(min-width: 993px) {

    }

    @media(max-width: 600px) {

    }

    @media(min-width: 601px) {
    }


    @media(min-width: 769px) {
        .hide-on-desktop {
            display: none;
        }
    }
    
    @media(max-width: 768px) {
        /*.team-cnt{
            padding: 4%;
        }*/

        .frame {
            width: 90vw;
            height: auto;
        }

        .size-title {
            font-size: 2em;
        }
        
        .size-subtitle {
            font-size: 1.5em;
        }
    
        .size-text {
            font-size: 1.5em;
        }

        #wrapper {
            overflow-x: hidden;
            /*scroll-snap-type: 70% proximity;*/
        }

        .fterelement {
            align-self: self-start;
            text-align: start;
        }

        .hide-on-mobile {
            display:none;
        }
            
        .sections {
            align-content: start;
            /*padding: 12.5vh 0% 10.5vh 0%;
            height: 77vh;
            min-height: 77vh;*/
            padding-top: 12dvh;
            height: 88dvh;
            scroll-snap-align: start;
            min-height: 88dvh;
            /*height: 75%;
            /*scroll-snap-align: center;*/
        }

        .home-sections-hdr {
            margin: 2% 4%;
            text-align:center;
            cursor:default;
        }

        .home-sections-subtitle{
            margin: 8%;
            margin-top: 1%;
        }
        
        .fter {
            height: 70dvh;
            /*gap:20px;*/
            grid-template-rows: auto;
            padding:4%;
            margin: 0%;
            /*background:inherit!important;
            justify-content:flex-start;
            background-color:#fbfaffbf!important;
            backdrop-filter:blur(12px)!important;
            box-shadow:0 0 12px #0000001a;*/
            display:flex;
            flex-direction:column;
            position:relative;
            overflow:none;
            bottom: 0;
            justify-content: flex-start;
        }
        .card-container {
            scrollbar-width: none;
            height: 100%;
            margin: 0%;
            max-height: 74dvh;
            scroll-snap-type: x mandatory;
            width: 100%;
            display: flex;
            justify-content: flex-start; /* Important for consistent width calculation */
            flex-wrap: nowrap;
            flex-direction: row;
            scroll-behavior: smooth;
            overflow-x: scroll;
            flex-grow: 1;
            position: relative; /* For positioning the scroll indicator */
            /* Ensure a consistent card width for the JavaScript calculation */
            --card-width: calc(100% / 4); /* Adjust the divisor based on the number of cards visible at once or your layout */
        }
        
        .feature-card {
            scroll-snap-align: start;
            width: var(--card-width); /* Use the CSS variable for width */
            flex-shrink: 0;
            /* Add other styles for your cards */
        }

        .feature-card:hover:not(.cns-card) {
            transform:none;
            box-shadow:none;
        }
        
        .scroll-indicator {
            position: relative;
            bottom: 2dvh;
            align-self: center;
            display: flex;
            gap: 8px;
            /* Add other styles for the indicator container */
        }
        
        .indicator-dot {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background-color: rgba(0, 0, 0, 0.3); /* Default inactive color */
            transition: background-color 0.3s ease;
            /* Add other styles for the dots */
        }

        .feature-card {
            scroll-snap-align: start;
            background-color:transparent;
            box-shadow:none;
            transition:none;
            text-decoration:none;
            justify-content:center;
            overflow: hidden;
            flex-wrap:wrap;
            min-width: 100vw;
            flex-shrink:1;
        }

        .tviewer{
            /*position: fixed;
            bottom: 8vh;
            right: 4%;
            z-index: 999;*/
            margin: 4% auto;
            max-width: fit-content;
            text-align: center;
            justify-self: center;
            border-radius: 0%;
        }

        .tviewer:hover {
            background-color: var(--bt-orange);
            color:#FFF;
            transition: none;
        }
            
        .feature-card-image {
            height: auto;
            width: 92%;
            margin: 4%;
            margin-top: 0%;
        }

        .card-title {
            text-transform: uppercase;
            margin-bottom: 4%;
        }
        
        .card-content {
            padding: 0%;
            margin: 4%;
        }

        .center-header-logo {
            display: flex;
            margin: 0% auto;
        }

        .header {
            top: auto;
            bottom: 0;
            position: fixed;
            flex-direction: column;
            height: 3dvh;
            padding: 1dvh;
        }

        .mobile-header {
            top: 0;
            bottom: auto;
            position: fixed;
            height: 12dvh;
            padding: 0%;
            align-items: center;
            justify-content: center;
            display:flex;
            background-color:#FFF;
            top: 0px;
            left:0;
            right:0;
            z-index: 999;
        }

        .nav {
            margin: auto;
        }

        .bt_logo_hdr {
            width: 66vw;
            height: auto;
            align-self:center;
        }

        .mobile-sections-bg {
            width: 92%;
            margin: 4%;
            height: 22dvh;
            background-repeat: no-repeat;
            background-size: cover;
        }

        .home-features {
            justify-content: center;
            align-items: start;
            flex-direction: row; /* Stack the lists vertically */
            gap: 8%;
            --h-n-w: 30px;
        }
    
        .home-features ul {
            max-width: 100%;
            margin-top: 0px;
        }

        .home-features ul li br {/*ignore line breaks in mobile version*/
            display: none;
        }

        #mobile-home-bg {
            background-image:url(img/hdr_mobilestart.avif);
        }

        .home-features ul li {
            margin: 0 0 2vh 0;
        }

        #footer {
            height: 85dvh;
            padding-bottom: 0%;
        }
    }