#hero {
         position: relative;
         background: url(/assets/img/background_top_2.webp);
         background-size: cover;
         background-position: 0px -50px;
      }
      #hero::after {
         position: absolute;
         z-index: 10;
         top:0;
         left:0;
         width: 100%;
         height: 100%;
         display: block;
         content:'';
         background: linear-gradient(90deg, rgb(255 255 255 / 85%) 0%, rgb(243 243 243 / 6%) 100%);
      }
      #hero .container {
         z-index: 11;
      }

   @media(max-width: 768px) {
      .hide-on-mobile {
         display: none;
      }  
   }

   @media(min-width: 769px) {
      .hide-on-desktop {
         display: none;
      }  
   }
   @media (max-width: 768px) {
    #hero {
        margin-top: 20px;
        background-position: top !important;
    }
}

   .headline {
      color: #1292a1;
      font-weight: bold;
   }
   #svg-map{
            display: flex;
            flex-direction: row;
            height: 350px;
            width: auto;
            border-radius: 30px;
            box-shadow: 0 0 29px 0 rgba(68, 88, 144, 0.12);
         }
         #map-wrapper{
            display: flex;
            flex-direction: row;
            height: 350px;
            
            max-width: fit-content;
        }
        #map-text{
            display: flex;
        height: 100%;
        }
        #map-text-sub{
            display: flex;
            padding: 0;
            width: 100%;
            margin: auto;
        }
        .map-pins{
            fill: #79c5bb;
        }
        .map-pins:hover{
            fill: #1793a1;
            cursor: pointer;
        }    
        #map-pin-4:hover #map-pin-4{
            fill: red;
        }
        body:has(#map-pin-1:hover) #map-pin-1 {
        fill: #1793a1;
        }
        body:has(#map-pin-2:hover) #map-pin-2 {
        fill: #1793a1;
        }
        body:has(#map-pin-3:hover) #map-pin-3 {
        fill: #1793a1;
        }
        body:has(#map-pin-4:hover) #map-pin-4 {
        fill: #1793a1;
        }
       .map-pins.active{
        fill: #1793a1;
       }
       .map-pins-text{
        display: none;
         animation-duration: 1s;
        animation-fill-mode: both;
        -webkit-animation-duration: 1s;
        -webkit-animation-fill-mode: both
        opacity: 0;
    animation-name: fadeInUp;
    -webkit-animation-name: fadeInUp;
    padding: 20px;
       }
       .map-pins-text.active{
        display: block;
       }
       .pin-title{
        font-size: 2em;
        font-weight: bold;
        color: #1793a1;
        text-align: left;
       }
       .pin-subtitle{
         text-align: left;
       }
       .pin-text{
         padding-top: 10px;
         padding-bottom: 10px;
         text-align: left;
       }
       @keyframes fadeInUp {
            from {
                transform: translate3d(0,40px,0)
            }

            to {
                transform: translate3d(0,0,0);
                opacity: 1
            }
        }

        @-webkit-keyframes fadeInUp {
            from {
                transform: translate3d(0,40px,0)
            }

            to {
                transform: translate3d(0,0,0);
                opacity: 1
            }
        } 
        @-webkit-keyframes anim-pulse{
          0%   { 
            opacity: 0 ;
            -webkit-transform : scale(.5);
            }
          10% {
            opacity: 1 ;
          }

            90% {
            opacity: 0 ;
          }

          100% {
            -webkit-transform : scale(1.25)
          }
        }
       @media screen and (max-width: 800px){
         #svg-map{
            display: flex;
            height: auto;
            width: auto;
            max-width: 100%;
            max-height: 68%;
         }
         #map-wrapper{
            display: flex;
            flex-direction: column;
            height: unset;
        }
        .map-pins-text {

        }
       
    }
    main{
        margin-top: 0px;
    }
    .xxl{
        font-size: 1.6em;
    }
    .sm{
        font-size: 1em;
    }
    .vcard { 
    color: rgba(0, 0, 0, 0.5);
    max-width: 450px;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
    padding: 5vw 3vw;
    box-shadow: 0rem 1.25rem 7rem 0.375rem rgb(0 0 0 / 9%);
    border-radius: .5rem;
    animation-name: cardDrop;
    animation-iteration-count: 1;
    animation-timing-function: all;
    animation-duration: 1s;
    }
    .company{
        margin-bottom: 10px !important;
        color: rgba(0, 0, 0, 0.25);
    }
    .vcard p {
        font-size: 0.875rem;
        margin-bottom: 0px;
        line-height: 1.2rem;
    }
    .vcard-logo{
        position: absolute;
        top: 6%;
        right: 7%;
        height: 41px;
        width: 56px;
        background: url(https://tucore.de/kontakt/2c.png);
        background-size: 59px;
        background-position: center;
    }
    .gravatar {
      border-radius: 100%; 
      margin-bottom: 1em;
      height: 100px;
      width: 100px;
      
      background-size: cover;
      overflow: hidden;
    }
    .contact-details, .files{
        display: block;
        text-align: left;
        border-radius: 10px;
        box-shadow: inset 0rem 0rem 3rem 0rem rgb(115 115 115 / 9%);
        padding: 12px;
        width: 100%;
    }
    .contact-details{
        margin-bottom: 25px;
    }
    .contact-heading, .files h3{
        font-weight: 600;
        font-size: 13px;
        padding-bottom: 8px;
    }
    .files a {
        font-size: 0.875rem;
    }
    .savecontact {
        display: block;
        background: #78c5bc;
        padding: 8px 25px;
        border-radius: 50px;
            font-size: 14px;
        color: #fff;
        margin-bottom: 17px !important;
        width: max-content;
        margin: auto;
    }
     .slick-dotted.slick-slider {
         margin-bottom: 0px !important;
         }
         .section-title-new h2{
            font-size: 2.4em !important;
            margin-bottom: 1em;
         }
         #hero {

         }
  .learn-more-button {
         font-family: "Raleway", sans-serif;
         font-weight: 500;
         font-size: 16px;
         letter-spacing: 1px;
         display: inline-block;
         padding: 10px 30px;
         border-radius: 50px;
         transition: 0.5s;
         color: #0f96a4;
         border: 2px solid #0f96a4;
         }
         @media (max-width:991.98px) {
         .padding {
         padding: 1.5rem
         }
         }
         @media (max-width:767.98px) {
         .padding {
         padding: 1rem
         }
         }
         .padding {
         padding: 5rem
         }
         .card {
         position: relative;
         display: flex;
         width: 350px;
         flex-direction: column;
         min-width: 0;
         word-wrap: break-word;
         background-color: #fff;
         background-clip: border-box;
         /*-webkit-box-shadow: 0px 0px 5px 0px rgb(249, 249, 250);
         -moz-box-shadow: 0px 0px 5px 0px rgba(212,182,212,1);
         box-shadow: 0px 0px 5px 0px rgb(161, 163, 164);
         */
         /*background: linear-gradient(189deg, #a6d9d34d, transparent);*/
         }
         .card .card-body {
         padding: 1rem 1rem;
         }
         .card-body {
         flex: 1 1 auto;
         padding: 1.25rem
         }
         p {
         font-size: 0.875rem;
         margin-bottom: .5rem;
         line-height: 1.5rem
         }
         h4{
         line-height: .2 !important;
         }
         .profile{
         margin-top: 16px;
         margin-left: 11px;
         }
         .profile-pic{
         width: 58px;
         }
         .cust-name{
         font-size: 18px;
         }
         .cust-profession{
         font-size: 10px;
         }
         .items {
         width: 90%;
         margin: 0px auto;
         }
         .slick-slide {
         margin: 10px
         }
         .main-content {
            flex: 3;
        }

       
        .main-wrapper {
            display: flex;
            background-color: #fff;
            box-shadow: 0 0 29px 0 rgba(68, 88, 144, 0.12);
            border-radius: 8px;
        }
        .main-content img{
            height: 140px;
            display: block;
            margin: 40px auto;
        }
        .btn-keyword {
        position: relative;
        display: inline-block;
        font-size: 1em;
        line-height: 1;
        vertical-align: top;
        background-color: transparent;
        border-radius: 2em;
        border: 1px solid #353535;
        padding: 10px .6em 12px;
        color: #353535;
        transition: background-color .2s, color .2s, border-color .2s;
        }
        .btn-keyword:hover {
            background-color: #353535;
            color: #fff;
        }
        .btn-keyword::after {
            display: block;
            content: attr(data-count);
            position: absolute;
            right: 0;
            top: 0;
            transform: translate(40%, -40%);
            font-size: 12px;
            color: #fff;
            line-height: 2;
            width: 2em;
            height: 2em;
            overflow: hidden;
            background-color: #8c0e28;
            text-align: center;
            border-radius: 1em;
            font-weight: 700;
            box-shadow: -2px 2px 4px rgba(0, 0, 0, .4);
            opacity: 0;
            transition: opacity .2s, padding-top .2s;
            pointer-events: none;
            padding-top: 2em;
            box-sizing: border-box;
        }
        .tag-list {
            display: flex;
            flex-wrap: wrap;
            gap: 16px;
            padding: 0;
        }
        .tag-list li {
            display: block;
        }
        .grid-container {
          display: grid;
          grid-template-columns: repeat(2, 1fr);
          max-width: 1900px;
            margin: auto;
        }

        .grid-item {
          
          
        }
        .fullw{
            width: 100%;
            height: 100%;
            padding: 20px;
            min-height: 400px;
        }
        .flexend {
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
        }
        .flexc {
            display: flex;
            flex-direction: column;
            justify-content: center;
        }
        .btn-get-started {
            font-weight: 500;
            font-size: 16px;
            display: inline-block;
            padding: 8px 17px;
            border-radius: 50px;
            transition: 0.5s;
            color: #0f96a4;
            margin-top: 10px;
            border: 1px solid #0f96a4;
        }
        .btn-get-started:hover {
            background-color: #0f96a4;
            border-color: #0f96a4 !important;
            color: #fff;
        }
        .cw {
            color: white !important;
        }
        .bw{
            border-color: white !important;
        }
        @media (max-width: 768px) {
          .grid-container {
            grid-template-columns: 1fr; /* Eine Spalte pro Zeile */
          }
        }
        .graphic-container {
            position: relative;
            width: 100%;
            max-width: 400px;
        }

        svg {
            width: 100%;
            height: auto;
        }

        .clickable-text {
            position: absolute;
            color: #647775;
            font-size: 1.6rem;
            text-decoration: none;
            font-family: Lato;
        }
        .fa-name{
            text-align: center;
            display: block;
        }
        .fa-sub{
           display: block;
            font-size: 0.5em;
            text-align: center;
            color: #c3c3c3;
            border-radius: 10px;
            white-space: nowrap;
        }

        .text-top {
            top: -17%;
            left: 50%;
            transform: translateX(-50%);
        }

        .text-left {
            bottom: 1%;
            left: -24%;
        }

        .text-right {
            bottom: 1%;
            right: -40%;
        }

        @media (max-width: 768px) {
            .clickable-text {
                font-size: 1rem;
                white-space: nowrap;
            }
            .text-top {
                top: -12%;
                left: 50%;
                transform: translateX(-50%);
            }
            .text-right {
                bottom: 0%;
                right: -31%;
            }
            .text-left {
                bottom: 0%;
                left: -26%;
            }
            .graphic-container {
                width: 57%;
                margin: auto;
            }
        }
         /* Transition Effekt */
        path {
            transition: fill 0.3s ease;
        }

        path.hovered {
            fill: #009999;
        }

        .clickable-text.hovered {
            color: #007980;
        }
        .polygon{
            cursor: pointer;
        }
        .content-ltr-flex{
            display: flex;
            flex-direction: row;
            width: 100%;
            max-width: 1300px;
        }
        .content-l{
            width: 50%;
            margin: auto 0;
        }
        .content-r{
            margin: auto;
        }
        .content-l-text{
            padding: 30px;
        }
        .core-text{
        display: none;
         animation-duration: 1s;
        animation-fill-mode: both;
        -webkit-animation-duration: 1s;
        -webkit-animation-fill-mode: both
        opacity: 0;
        animation-name: fadeInUp;
        -webkit-animation-name: fadeInUp;
        padding: 20px;
        }
       .core-text.active{
        display: block;
       }
       .btn-moreinfo{
        background: #78c5bc;
        padding: 8px 25px;
        border-radius: 50px;
        color: #fff;
       }
       .btn-moreinfo:hover{
        background: #1392a1;
        color:white;
       }
       .core-head-img{
        height: 100px;
       }
       @media (max-width: 768px) {
            .content-ltr-flex{
                flex-direction: column-reverse;
            }
            .content-l{
                width: 100%;
            }
            .core-head-img{
                height: 80px;
            }
       }
.tucore-nav {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            background: white;
            box-shadow: 0 0 29px 0 rgba(68, 88, 144, 0.12);
            z-index: 1000;
        }

        .tucore-container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
        }

        .tucore-nav-content {
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: 70px;
        }

        .tucore-logo {
            height: 40px;
        }

        .tucore-menu {
            display: flex;
            margin: 0;
            padding: 0;
            list-style: none;
            margin-left: 20px;
        }

        .tucore-menu-item {
            position: relative;
        }

        .tucore-menu-link {
            color: #333;
            text-decoration: none;
            font-size: 16px;
            padding: 10px 17px;
        }

        .tucore-menu-link:hover {
            color: #1292a1;
        }

        .tucore-submenu {
            display: none;
            position: absolute;
            top: 100%;
            left: 0;
            background: white;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            min-width: 200px;
            padding: 8px 0;
            list-style: none;
            border-radius: 13px;
        }

        .tucore-menu-item:hover .tucore-submenu {
            display: block;
        }

        .tucore-submenu-link {
            display: block;
            padding: 8px 16px;
            color: #333;
            text-decoration: none;
        }

        .tucore-submenu-link:hover {
            color: #1292a1;
        }

        .tucore-mobile-toggle {
            display: none;
            background: none;
            border: none;
            padding: 10px;
            cursor: pointer;
        }

        .tucore-mobile-toggle span {
            display: block;
            width: 24px;
            height: 2px;
            background: #333;
            margin: 5px 0;
            transition: 0.3s;
        }

        @media (max-width: 768px) {
            .tucore-mobile-toggle {
                display: block;
            }

            .tucore-menu {
                display: none;
                position: absolute;
                top: 60px;
                left: 0;
                right: 0;
                background: white;
                flex-direction: column;
                gap: 0;
                box-shadow: 0 2px 4px rgba(0,0,0,0.1);
                margin-left: 0px;
            }

            .tucore-menu-item {
                width: 100%;
            }

            .tucore-menu-link {
                display: block;
                padding: 16px  20px;
            }

            .tucore-submenu {
                display: none;
                position: static;
                box-shadow: none;
                padding-left: 16px;
            }

            .tucore-menu-item.active .tucore-submenu {
                display: block;
            }

            #tucore-nav-checkbox:checked ~ .tucore-menu {
                display: block;
            }

            #tucore-nav-checkbox:checked ~ .tucore-mobile-toggle span:nth-child(1) {
                transform: rotate(45deg) translate(5px, 5px);
            }

            #tucore-nav-checkbox:checked ~ .tucore-mobile-toggle span:nth-child(2) {
                opacity: 0;
            }

            #tucore-nav-checkbox:checked ~ .tucore-mobile-toggle span:nth-child(3) {
                transform: rotate(-45deg) translate(7px, -7px);
            }
        }

.navbar .active {
    color: #78c5bc !important;
}

#hero h1 {
    color: #1292a1 !important;
}
.getstarted {
    background-color: #78c5bc !important;
    border-radius: 70px;
    color: white;
    margin: 15px;
    margin-top: 0px;
    text-align: center;
}
.getstarted:hover {
    background-color: #1292a1 !important;
    color: white;
}
.navbar .active {
    color: #78c5bc !important;
}

#hero h1 {
    color: #1292a1 !important;
}
 .hero-text-2c{
        display: block;
        margin: auto;
        background: #78c5bc82;
        padding: 20px;
        border-radius: 10px;
        color: white;
        backdrop-filter: blur(8px);
    }
    .grid-container-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    }

    .module {
        padding: 20px;
    border-radius: 8px;
    border-style: solid;
    border-width: 1px 1px 1px 1px;
    border-color: #c7d3e7;
    box-shadow: 0px 12px 24px 0px rgba(63.99999999999993, 71.99999999999994, 81.99999999999991, 0.08);
    margin-bottom: 20px;
    cursor: default;
    transition: ease 0.2s;
    }
    .module:hover {
    background-color: #FFFFFF;
    border-style: solid;
    border-width: 1px 1px 1px 1px;
    border-color: #FFFFFF;
    box-shadow: 0px 10px 20px 0px rgba(10.55543478260869, 45.36735822306239, 58.49999999999999, 0.14);
    transform: translateY(-10px);
    }

    @media (max-width: 768px) {
        .grid-container-3 {
            grid-template-columns: 1fr;
        }
    }
    .leadership-container {
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
        }
        .leadership-category {
            margin-bottom: 40px;
        }
        .leadership-card {
            background: white;
            border-radius: 20px;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
            padding: 20px;
            width: calc(33.333% - 20px);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            cursor: pointer;
        }
        .leadership-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
        }
        .leadership-card-title {
            font-size: 1.2em;
            font-weight: bold;
            margin-bottom: 10px;
        }
        .leadership-card-description {
            color: #666;
            font-size: 0.95em;
        }
        @media (max-width: 768px) {
            .leadership-card {
                width: 100%;
            }
        }
     .cta-button {
        background-color: #78c5bc;
        padding: 8px 25px;
        border-radius: 50px;
        color: #fff;
        border:none;
        cursor: pointer;
        transition: background 0.3s ease;
    }

    .cta-button:hover {
        background-color: #005bb5;
    }
     .sustainability {
        padding: 60px 20px;
    }
    #sustainable-goals{
     
    }
       .sustainability-hero {
        position: relative;
        background: url('nachhaltigkeit/leaves.jpg') no-repeat center center/cover;
        display: flex;
        justify-content: center;
        align-items: center;
        color: white;
        overflow: hidden;
        min-height: 60vh;

    }

    .sustainability-hero .overlay {
         position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(rgba(0, 0, 0, 0.4), rgb(163 181 193));
        z-index: 1;
    }

    .sustainability-hero .container {
           position: relative;
        z-index: 2;
        padding: 20px;
        border-radius: 33px;
        margin-top: 100px;
    }
      .development ul li {
        padding: 12px;
    }

    .development p em {
        color: #1292a1;
        font-style: italic;
    }
    .tucore-b{
        color: #1292a1;
    }
      .goals-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
        margin-top: 20px;
    }


    .goal-card {
        background: #fff;
        padding: 20px;
        border-radius: 16px;
        box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.1);
        text-align: left;
    }

    .goal-content {
        display: flex;
        align-items: center;
    }

    .goal-icon {
        width: 80px;
        height: 80px;
        background: #e0e0e0;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 8px;
        margin-right: 20px;
        font-weight: bold;
        font-size: 1.2rem;
        flex-shrink: 0;
    }
    .icons-centered .goal-icon {
        width: 130px;
        height: 130px;
    }
    .hoverup{
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }
    .hoverup:hover{
        transform: translateY(-10px);
    }
    #goal-icon-8{
        background: url('nachhaltigkeit/sdg_8.svg') no-repeat center center / cover;
    }
    #goal-icon-12{
        background: url('nachhaltigkeit/sdg_12.svg') no-repeat center center / cover;
    }
    #goal-icon-13{
        background: url('nachhaltigkeit/sdg_13.svg') no-repeat center center / cover;
    }
    #goal-icon-17{
        background: url('nachhaltigkeit/sdg_17.svg') no-repeat center center / cover;
    }

    .goal-content h3 {
        font-size: 1.5rem;
        margin-bottom: 0px;
    }

    .goal-text p {
        font-size: 1rem;
        color: #555;
        line-height: 1.5;
        margin: 0;
    }
    .icons-centered{
        display: flex;
        flex-direction: row;
    }
    @media (max-width: 768px) {
        .goals-grid {
            grid-template-columns: 1fr;
        }
        .goal-content h3{
            word-break: break-word;
        }
        .icons-centered .goal-icon{
            max-width: 60px;
            max-height: 60px;
        }
       
    }
     .leadership-container {
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
        }
        .leadership-category {
            margin-bottom: 40px;
        }
        .leadership-card {
            background: white;
            border-radius: 20px;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
            padding: 20px;
            width: calc(33.333% - 20px);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            cursor: pointer;
        }
        .leadership-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
        }
        .leadership-card-title {
            font-size: 1.2em;
            font-weight: bold;
            margin-bottom: 10px;
        }
        .leadership-card-description {
            color: #666;
            font-size: 0.95em;
        }
        @media (max-width: 768px) {
            .leadership-card {
                width: 100%;
            }
        }
          .learn-more-button {
         font-family: "Raleway", sans-serif;
         font-weight: 500;
         font-size: 16px;
         letter-spacing: 1px;
         display: inline-block;
         padding: 10px 30px;
         border-radius: 50px;
         transition: 0.5s;
         color: #0f96a4;
         border: 2px solid #0f96a4;
         }
         @media (max-width:991.98px) {
         .padding {
         padding: 1.5rem
         }
         }
         @media (max-width:767.98px) {
         .padding {
         padding: 1rem
         }
         }
         .padding {
         padding: 5rem
         }
         .card {
         position: relative;
         display: flex;
         width: 350px;
         flex-direction: column;
         min-width: 0;
         word-wrap: break-word;
         background-color: #fff;
         background-clip: border-box;
         /*-webkit-box-shadow: 0px 0px 5px 0px rgb(249, 249, 250);
         -moz-box-shadow: 0px 0px 5px 0px rgba(212,182,212,1);
         box-shadow: 0px 0px 5px 0px rgb(161, 163, 164);
         */
         /*background: linear-gradient(189deg, #a6d9d34d, transparent);*/
         }
         .card .card-body {
         padding: 1rem 1rem;
         }
         .card-body {
         flex: 1 1 auto;
         padding: 1.25rem
         }
         p {
         font-size: 0.875rem;
         margin-bottom: .5rem;
         line-height: 1.5rem
         }
         h4{
         line-height: .2 !important;
         }
         .profile{
         margin-top: 16px;
         margin-left: 11px;
         }
         .profile-pic{
         width: 58px;
         }
         .cust-name{
         font-size: 18px;
         }
         .cust-profession{
         font-size: 10px;
         }
         .items {
         width: 90%;
         margin: 0px auto;
         }
         .slick-slide {
         margin: 10px
         }
         .main-content {
            flex: 3;
        }

        .sidebar {
            flex: 1;
            text-align: center;
   
        }

        .sidebar img {
            width: 150px;
            height: 150px;
            border-radius: 50%;
            object-fit: cover;
            margin-bottom: 15px;
        }

        .sidebar h3 {
            margin: 10px 0 5px;
            color: #1292a1;
            font-size: 1em;
        }

        .sidebar p {
            margin: 5px 0;
        }
        .main-wrapper {
            max-width: 1200px;
            margin: 20px auto;
            display: flex;
            gap: 40px;
            padding: 40px;
            background-color: #fff;
            box-shadow: 0 0 29px 0 rgba(68, 88, 144, 0.12);
            border-radius: 8px;
        }
        .main-content img{
            height: 140px;
            display: block;
            margin: 40px auto;
        }
        .section-bg-blue{
            background: #f3f9fd;
        }

#hero h1 {
    font-size: 1.8em;
}
#hero h2 {
    font-size: 1em;
    color: white;
    width: 500px;
}

@media (max-width: 768px) {
     #hero h1 {
        font-size: 1.4em;
        color: #19b5c7 !important;
    }
    #hero h2 {
        font-size: 1em;
        width: 100%;
    }
}

#hero{
    background: url(https://cdn.roockstar.de/rocketload/dl/public/grp-full.jpg);
    background-size: cover;
    background-position: center calc(100% + 25px);
    background-repeat: no-repeat;
}
#hero::after{
        background: linear-gradient(rgb(0 0 0 / 30%), rgb(163 181 193 / 77%));
}
@media (max-width: 991px) {
    #hero {
        height: 63vh;
            background-position: 66% calc(100% + 51px) !important;
    }
}
#hero .btn-get-started{
    color: #ffffff;
    border: 2px solid #ffffff;
}
 .solutions-sidebar {
    width: 300px;
    background: white;
    padding: 2rem;
    border-radius: 8px;
    position: sticky;
    height: fit-content;
    align-self: flex-start;
    z-index: 1;
    box-shadow: 0 0 29px 0 rgba(68, 88, 144, 0.12);
}
    .tucore-title {
        font-weight: bold;
        color: #333;
    }
    .tucore-description {
        color: #666;
    }
    .tucore-number {
        font-size: 1.5rem;
        color: #1292a1;
    }
    .tucore-box {
    position: absolute;
    right: -50px;
    top: 67%;
    transform: translateY(-50%);
}
   
    @media screen and (max-width: 800px){
       .tucore-box {
        position: unset;
        right: -50px;
        top: 67%;
        transform: translateY(5%);
    }
    .solutions-sidebar{
        width: 100%;
    }
    .row{
        margin: 0px;
    }
       
    }
    .tucore-label {
        font-size: 0.9rem;
        color: #666;
    }
    .tucore-image {
        border-radius: 8px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }
    .tucore-logos img {
        max-height: 100px;
        margin: 0 10px;
    }
    .text-primary{
      color: #1292a1 !important;
    }

    .tucore-heading {
        font-weight: bold;
        font-size: 1.8rem;
        color: #333;
    }
    .tucore-tech {
        padding: 50px 0;
        border-radius: 10px;
    }
    .tucore-tech-heading {
        font-weight: bold;
        font-size: 2rem;
        color: #333;
    }
    .tucore-tech-description {
        color: #666;
    }
    .tucore-digital {
        font-weight: bold;
        color: #1292a1;
    }
    .tucore-tech-image {
        border-radius: 8px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }
    .tucore-tech-card {

        padding: 20px;
        border-radius: 8px;
        border-style: solid;
         border-width: 1px 1px 1px 1px;
    border-color: #c7d3e7;
        box-shadow: 0px 12px 24px 0px rgba(63.99999999999993, 71.99999999999994, 81.99999999999991, 0.08);
        margin-bottom: 20px;
        display: flex;
         align-items: center; /* Vertikal ausrichten */
    gap: 10px; /* Abstand zwischen den Elementen */
        cursor: pointer;
        transition: ease 0.2s;
    }
    .tucore-tech-card-text {
       display: flex;
       flex-direction: column; /* Stapelt h5 über p */
   }
    .tucore-tech-card:hover {
    background-color: #FFFFFF;
    border-style: solid;
    border-width: 1px 1px 1px 1px;
    border-color: #FFFFFF;
    box-shadow: 0px 10px 20px 0px rgba(10.55543478260869, 45.36735822306239, 58.49999999999999, 0.14);
   }
    .testimonial-content:hover {
    box-shadow: 0px 10px 20px 0px rgba(10.55543478260869, 45.36735822306239, 58.49999999999999, 0.14);
   }
    .tucore-icon {
        font-size: 2rem;
        color: #1292a1;
        margin-right: 15px;
    }
    .tucore-tech-card h5 {
       margin-bottom: 5px;
    color: #14192d;
    font-weight: 600;
    }
    .tucore-tech-card p {
        margin: 0;
    }
    .q12-button {
  position: relative;
  transition: all 0.3s ease-in-out;
  box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2);
  padding-block: 0.5rem;
  padding-inline: 1.25rem;
  background-color: rgb(120 197 188);
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #ffff;
  gap: 10px;
  font-weight: bold;
  border: 3px solid #ffffff4d;
  outline: none;
  overflow: hidden;
  font-size: 15px;
}

.icon {
  width: 24px;
  height: 24px;
  transition: all 0.3s ease-in-out;
}

.q12-button:hover {
  transform: scale(1.05);
  border-color: #fff9;
}

.q12-button:hover .icon {
  transform: translate(4px);
}

.q12-button:hover::before {
  animation: shine 1.5s ease-out infinite;
}

.q12-button::before {
  content: "";
  position: absolute;
  width: 100px;
  height: 100%;
  background-image: linear-gradient(
    120deg,
    rgba(255, 255, 255, 0) 30%,
    rgba(255, 255, 255, 0.8),
    rgba(255, 255, 255, 0) 70%
  );
  top: 0;
  left: -100px;
  opacity: 0.6;
}

@keyframes shine {
  0% {
    left: -100px;
  }

  60% {
    left: 100%;
  }

  to {
    left: 100%;
  }
}
.success-hl{
    margin-bottom: 0px !important;
}
     .leadership-circle {
      position: relative;
      width: 320px;
      height: 320px;
      border: 3px solid #00bcd4;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      text-align: center;
      padding: 30px;
      background-color: white;
      box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
    }

    .leadership-circle h2 {
      font-size: 1.2rem;
      color: #333;
      line-height: 1.5;
    }

    .leadership-info-line {
      position: absolute;
      width: 220px;
      display: flex;
      align-items: center;
      font-size: 0.9rem;
      color: #444;
    }

    .leadership-info-line::before {
      content: "";
      width: 30px;
      height: 2px;
      background-color: #00bcd4;
      margin-right: 10px;
      flex-shrink: 0;
    }

    .leadership-info-1 {
      top: 20px;
      left: 100%;
    }

    .leadership-info-2 {
      top: 130px;
      left: 100%;
    }

    .leadership-info-3 {
      bottom: 20px;
      left: 100%;
    }
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500&display=swap");
 @import url("https://fonts.googleapis.com/css2?family=Maven+Pro:wght@800&display=swap");
 :root {
     --font-size: 0.8em;
     --bg1: #ffffff;
     --blue: #3498db;
     --green: #2ecc71;
     --purple: #9b59b6;
     --gold: #f1c40f;
     --red: #e74c3c;
     --orange: #e67e22;
     --shadow1: 0 2px 4px #000 26, 0 3px 6px #000 1f;
     --shadow2: 0 2px 6px #000 44, 0 4px 7px #000 22;
}

 ul.infoGraphic {
     font-size: var(--font-size);
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
}
 ul.infoGraphic li {
     position: relative;
     width: 100%;
     max-width: 44em;
     border-radius: 0.5em;
     padding: 0.5em;
     z-index: 1;
     transition: all 0.2s;
     cursor: pointer;
     display: block;
     font-family: "Poppins", sans-serif;
}
 ul.infoGraphic li .numberWrap {
     position: absolute;
}
 ul.infoGraphic li .number {
     font-family: "maven pro", sans-serif;
     font-size: 13em;
     font-weight: 900;
     width: 0.9em;
     text-align: center;
}
 ul.infoGraphic li .number.fontColor1 {
     color: var(--blue);
}
 ul.infoGraphic li .number.fontColor2 {
     color: var(--green);
}
 ul.infoGraphic li .number.fontColor3 {
     color: var(--purple);
}
 ul.infoGraphic li .number.fontColor4 {
     color: var(--gold);
}
 ul.infoGraphic li .number.fontColor5 {
     color: var(--red);
}
 ul.infoGraphic li .number.fontColor6 {
     color: var(--orange);
}
 ul.infoGraphic li .number.fontColor7 {
     color: #46d1e9;
}
ul.infoGraphic li .iconWrap {
    width: 30px;
    display: block;
    margin: 6px auto;
}

 ul.infoGraphic li .coverWrap {
     transform: rotate(130deg);
    position: absolute;
    width: 18em;
    height: 15em;
    left: -1em;
    top: 1em;
}
 ul.infoGraphic li .coverWrap .numberCover {
     position: absolute;
     background: #f3f7fe;
     width: 18em;
     height: 6em;
     border-radius: 50% 50% 0 0;
     border-bottom: 3px solid #f3f7fe;
     transition: all 0.4s;
}
 ul.infoGraphic li .coverWrap .numberCover::before {
     position: absolute;
     content: "";
     bottom: 5px;
     left: 4em;
     right: 4em;
     top: 5em;
     box-shadow: 0 0 30px 17px #48668577;
     border-radius: 100px / 10px;
     z-index: -1;
}
 ul.infoGraphic li .coverWrap .numberCover::after {
     position: absolute;
     bottom: 0;
     content: "";
     left: -10%;
     width: 120%;
     height: 150%;
     background: radial-gradient(at bottom, #486685 33, transparent, transparent);
     z-index: 1;
}
 ul.infoGraphic li .content {
     margin: 9em 0em 1em 8em;
     position: relative;
}
 ul.infoGraphic li .content h2 {
     font-size: 1.7em;
     font-weight: 500;
     text-align: center;
     margin-bottom: 10px;
     text-transform: uppercase;
}
 ul.infoGraphic li .content p {
     line-height: 1.5em;
}
 ul.infoGraphic li:hover .coverWrap .numberCover {
     border-radius: 100%;
}
 .icon {
     position: absolute;
     font-size: 2rem;
     text-align: center;
     top: -1.3em;
     left: 50%;
     transform: translatex(-50%);
}
 .icon:before {
     color: #666;
     font-family: FontAwesome;
     font-style: normal;
     font-weight: normal;
     text-decoration: inherit;
}
 .iconCodepen:before {
     content: "\f1cb";
}
 .iconSocial:before {
     content: "\f08a";
}
 .iconAirplane:before {
     content: "\f1d9";
}
 .iconMap:before {
     content: "\f278";
}
 .iconBulb:before {
     content: "\f0eb";
}
 .iconPeace:before {
     content: "\f25b";
}


 .controls {
     position: fixed;
     z-index: 2;
     bottom: 0;
     display: flex;
     flex-wrap: wrap;
     align-items: center;
     justify-content: center;
     background: #d7d7d7 a1;
     padding: 0.5rem 2em;
     border-top-right-radius: 1rem;
     border-top-left-radius: 1rem;
     border: 1px solid #000 4d;
}
 .sliderBox {
     text-align: center;
}
 .sliderBox .range-value {
     font-weight: 500;
     font-size: 22px;
}
 input[type="range"] {
     width: 100%;
     margin: 1em 0;
     -webkit-appearance: none;
}
 input[type="range"]:focus {
     outline: none;
}
 input[type="range"]::-webkit-slider-runnable-track {
     background: #000 66;
     border: 0;
     border-radius: 1.3px;
     width: 100%;
     height: 2px;
     cursor: pointer;
}
 input[type="range"]::-webkit-slider-thumb {
     margin-top: -10px;
     width: 20px;
     height: 20px;
     background: #eee;
     box-shadow: inset 0px 1px 1px #fff 66, 0px 1px 3px rgba(0, 0, 0, 1);
     border: 1px solid rgba(0, 0, 0, 0);
     border-radius: 50px;
     cursor: pointer;
     -webkit-appearance: none;
}
 input[type="range"]:focus::-webkit-slider-runnable-track {
     background: #eee;
}
 input[type="range"]::-moz-range-track {
     background: #000;
     border: 0;
     border-radius: 1.3px;
     width: 100%;
     height: 1px;
     cursor: pointer;
}
 input[type="range"]::-moz-range-thumb {
     width: 25px;
     height: 25px;
     background: #151728;
     border: 1px solid rgba(0, 0, 0, 0);
     border-radius: 50px;
     cursor: pointer;
}
 input[type="range"]::-ms-track {
     background: transparent;
     border-color: transparent;
     border-width: 13px 0;
     color: transparent;
     width: 100%;
     height: 1px;
     cursor: pointer;
}
 input[type="range"]::-ms-fill-lower {
     background: #151728;
     border: 0;
     border-radius: 2.6px;
}
 input[type="range"]::-ms-fill-upper {
     background: #151728;
     border: 0;
     border-radius: 2.6px;
}
 input[type="range"]::-ms-thumb {
     width: 25px;
     height: 25px;
     background: #151728;
     border: 1px solid rgba(0, 0, 0, 0);
     border-radius: 50px;
     cursor: pointer;
     margin-top: 0px;
    /*Needed to keep the Edge thumb centred*/
}
 input[type="range"]:focus::-ms-fill-lower {
     background: #fff;
}
 input[type="range"]:focus::-ms-fill-upper {
     background: #fff;
}
@media (max-width: 768px) {
  ul.infoGraphic {
    padding-left: 0px;
  }
}
#winfographic-section {
     position: relative;
  height: 100vh;
background: url(/assets/img/bgw.jpg);
  background-size: cover;
  background-position: center;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  overflow: hidden;
}
 #winfographic-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.2)); /* Verlauf */
  z-index: 1;
}
.modul-badges-scroll {
    display: flex;
    overflow-x: auto;
    gap: 0.5rem;
    padding-bottom: 0.5rem;
    margin-top: 0.5rem;
}

.modul-badges-scroll::-webkit-scrollbar {
    height: 6px;
}

.modul-badges-scroll::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 10px;
}
.badge{
        font-weight: normal;
    font-family: 'Open Sans';
    font-size: 13px;
}
.bg-secondary{
    background-color: #78c5bc !important;
}
.tucore-tech-card .iconWrap {
    width: 120px;
    color: #1292a1;
    margin: 15px;
    max-width: 80px;
}
.trainings-info-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    margin-top: 2rem;
}

.trainings-info-column {
    flex: 1;
    min-width: 280px;
}

.trainings-info-column h5 {
    font-size: 1.25rem;
    font-weight: bold;
    margin-bottom: 0.25rem;
}

.subheading {
    font-size: 0.9rem;
    color: #888;
    margin-bottom: 1rem;
}

.trainings-info-box {
    background-color: #f8f9fa;
    padding: 1rem;
    border-radius: 8px;
    margin-bottom: 1rem;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    cursor: default;
}

.trainings-info-box h6 {
    font-weight: bold;
    margin-bottom: 0.5rem;
}

.trainings-info-box p {
    font-size: 0.95rem;
    margin: 0;
}
.tucore-tech-card-text {
    max-width: 73%;
}
.tucore-tech-image{
    margin-bottom: 20px;
}
.leadership-adventures-icon-wrapper {
  text-align: left;
}
.leadership-adventures-card{
    background: #ffffff;
    border-radius: 40px;
    cursor: default;
}
.leadership-adventures-icon {
  width: 28px;
  height: 28px;
  color: #1292a1; /* Bootstrap primary color */
}

.leadership-adventures-title {
  font-weight: bold;
  text-align: left;
}

.leadership-adventures-card p,
.leadership-adventures-points {
  text-align: left;
}
#footer {
    box-shadow: none;
}