/* ----------------------------------------------------------------
	Custom CSS

	Add all your Custom Styled CSS here for New Styles or
	Overwriting Default Theme Styles for Better Handling Updates
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
	General
-----------------------------------------------------------------*/

body {
    font-family: "Sparkasse Web", sans-serif;
    font-weight: normal;
}

body p {
    font-weight: 200;
}

#copyrights a {
    cursor: pointer;
}

:root {
    --cnvs-themecolor: #FF0000;
    --cnvs-themecolor-rgb: 255, 0, 0;
    --bs-modal-zindex: 99999;
    --cnvs-header-bg: #FF0000;
    --color-white: #FFFFFF;
    --color-red: #FF0000;
    --cnvs-body-font: "Sparkasse Web", Helvetica, Arial, sans-serif;
    --font-SK-Web: "Sparkasse Web", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --font-SK-Serif-Web: "Sparkasse Serif Web", Georgia, "Times New Roman", Times, serif;
    --font-SK-Head: "Sparkasse Web Head", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.modal {
    --bs-modal-zindex: 99999;
}

.gototop-active #gotoTop {
    z-index: 99999 !important;
}

.bg-red {
    background-color: #FF0000;
}

.text-white {
    color: #FFFFFF;
}

.text-red {
    color: #FF0000;
}

.text-small {
    font-size: 14px !important;
    line-height: 20px !important;
}

.no-mobil {
    display: none;
}

.custom-wrapper {
    max-width: 2588px;
    margin: 0 auto !important;
    /*border-left: #000000 1px solid;
    border-right: #000000 1px solid*/
}

.sectionName {
    font-size: 16px;
    text-transform: uppercase;
    font-family: var(--font-SK-Web);
    font-weight: 200;
    color: #666666;
    line-height: 0.8;
    margin-bottom: 10px;
}

.introText {
    font-size: 30px;
    color: var(--color-red);
    font-family: var(--font-SK-Head);
    font-style: normal;
    font-weight: normal;
    line-height: 36px;
}

.section-margin {
    margin-top: 150px
}

.section-margin-mobile {
    margin-top: 50px
}


/* ----------------------------------------------------------------
  start Section
-----------------------------------------------------------------*/
.sk-logo-start {
    margin-left: 158px;
    margin-top: 50px
}

.scroll-masonry {
    height: auto;
    white-space: nowrap
}

.no-overflow {
    overflow: hidden;
}

.keyfacts {
    margin-top: 120px;
    margin-left: 220px;
    color: #FFFFFF;
}

.keyfact {
    color: #FFFFFF;
    font-weight: bolder;
    line-height: 0.8;
    font-size: 60px;
    font-family: var(--font-SK-Head);
    font-style: normal;
}

.keyfactSubline {
    font-size: 24px;
    margin-top: 50px;
    font-family: var(--font-SK-Web);
    font-weight: 200;
    font-style: normal;
}

#autoScroll {
    margin-top: 0;
}

.pfeil {
    transform: scale(1);
    animation: pulsieren 2s infinite;
}

@keyframes pulsieren {
    0% {
        transform: scale(0.5);

    }

    70% {
        transform: scale(1);

    }

    100% {
        transform: scale(0.5);

    }
}

/* ----------------------------------------------------------------
  Scrollable Container
-----------------------------------------------------------------*/

.red-box {
    width: 50%;
    height: 70vh;
    background-color: #ff0000;
    position: absolute;
    right: 0;
    margin-top: -5%;
    z-index: 0;
}

.redbox-item {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: none;
}


.redbox-item:nth-child(1) {
    display: block;
}

.content-container {
    width: 50%;
    height: 70vh;
}

.content-item {
    margin: auto;
    width: 50%;
    height: 70vh;
}

.content-scroll-h3 {
    color: #FF0000;
    font-family: var(--font-SK-Web);
    font-weight: bold;
    font-size: 30px;
}

#red-box-about-item-2,
#red-box-about-item-3,
#red-box-business-item-1,
#red-box-business-item-2 {
    width: 85%;
}

.hideZitat-1100 {
    display: block;
}

.showZitat-1100 {
    display: none;
}

@media (min-width: 1100px) {
    .hideZitat-1100 {
        display: none;
    }

    .showZitat-1100 {
        display: block;
    }
}

/* ----------------------------------------------------------------
  About
-----------------------------------------------------------------*/
.about-scroll-container,
.dehaem-scroll-container {
    width: 100vw;
    height: 70vh;
    background-color: #f0f0f0;
    margin-top: 150px;
    max-width: 2588px;
}

#content-about-item-1 {
    padding-top: 200px;
    padding-bottom: 200px;
}

#content-about-item-2 {
    padding-top: 250px;
    padding-bottom: 250px;
}

#content-about-item-3 {
    padding-top: 200px;
    padding-bottom: 200px;
}

.slogan {
    color: #FFFFFF;
    font-weight: bolder;
    line-height: 1.5;
    font-size: 60px;
    font-family: var(--font-SK-Head);
    font-style: normal;
    width: 100%;
}

.team-content {
    font-family: var(--font-SK-Web);
    font-style: italic;
    font-size: 30px;
}

.team-title > h4 {
    font-family: var(--font-SK-Web);
    font-size: 16px
}

.dsgv-link {
    width: 50%;
    float: left;
    margin-top: 20%;
    display: block;
    position: relative;
    z-index: 999;
    padding-right: 25px;
}

.dsgv-link .text-white a {
    margin-top: 15px;
    display: block;
}

.sk-image {
    float: left;
    width: 50%;
}

/* ----------------------------------------------------------------
   Business
-----------------------------------------------------------------*/


.sustainability-scroll-container {
    width: 100vw;
    height: 70vh;
    background-color: #f0f0f0;
    margin-top: 150px;
    max-width: 2588px;
}

#content-business-item-1 {
    padding-top: 200px;
    padding-bottom: 200px;
}

#content-business-item-2 {
    padding-top: 250px;
    padding-bottom: 250px;
}

#content-business-item-3 {
    padding-top: 200px;
    padding-bottom: 200px;
}

.slogan-business {
    line-height: 1.2;
}

.item-100 {
    width: 90%;
}

.indicator-headline {
    font-size: 35px;
    width: 75%;
}

.business-headline {
    font-family: var(--font-SK-Head);
    font-size: 60px;
    line-height: 1.2;
    font-weight: bold;
    color: #FF0000;
}


.chart-canvas {
    margin: auto;
    width: 85% !important;
    height: 85% !important;

}

.text-chart {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.text-chart-employees {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* ----------------------------------------------------------------
   Working
-----------------------------------------------------------------*/
.video-container {
    width: 100%;
    height: 70vh;
    overflow: hidden;
}

.video-container-overlay {
    position: absolute;
    left: 0;
    height: 40vh;
    width: 50%;
    margin-top: -5%;
    display: flex;
    align-items: center;
}

.video-container-overlay-headline {
    width: 70%;
    margin: auto;
}

.video-container-overlay-headline > h2 {
    font-size: 70px;
    font-family: var(--font-SK-Head);
    font-weight: bold;
    line-height: 1.15;
    margin-bottom: 0px;
}


.section-video {
    width: 100%;
    margin: auto;
    background-color: #f0f0f0;
}

.chart-employees {

    margin: auto;
}

.working-scroll-container,
.customer-scroll-container {
    background-color: #f0f0f0;
}

#working-scroll-content,
#customer-scroll-content {
    width: 50%;
    float: left;

}

.working-content-container,
.customer-content-container {
    width: 90%;
    height: 70vh;
}

.customer-content-container .content-item {
    width: 75%;
}

.working-content-item {
    width: 90% !important;
}

.working-item-box,
.customer-item-box {
    width: 50%;
    height: 70vh;
    float: left;
}

.working-item {
    display: none;
    width: 100%;
    height: 70vh;
    margin: auto;
}

.working-item:nth-child(1) {
    display: block;
}

.working-scroll-item {
    width: 80%;
    margin: auto;

}

#working-scroll-item-1 {
    padding-top: 200px;
    padding-bottom: 200px;
}

#working-scroll-item-2 {
    padding-top: 200px;
    padding-bottom: 200px;
}

#working-scroll-item-3 {
    padding-top: 200px;
    padding-bottom: 200px;
}

#working-scroll-item-4 {
    padding-top: 300px;
    padding-bottom: 700px;
}

#working-scroll-item-5 {
    padding-top: 150px;
    padding-bottom: 100px;
}

.no-mobil .wl-1-image1 {
    width: 50%;
    float: left;
    display: flex;
    height: 70vh;
    align-items: center;
    justify-content: flex-end
}

#customer-item-box .no-mobil .wl-1-image1 {
    align-items: end;
}

#customer-item-box .no-mobil .wl-1-image1 img {
    max-width: 450px;
    padding-bottom: 25px;
}

.no-mobil .wl-1-images2 {
    width: 50%;
    float: right;
    display: flex;
    height: 70vh;
    align-items: center;
}

#customer-item-box .no-mobil .wl-1-images2 {
    align-items: start;
    flex-direction: column;
    justify-content: flex-end;
}

#customer-item-box .no-mobil .wl-1-images2 img {
    max-width: 300px;
}

#customer-item-box .no-mobil .wl-1-images2 img:last-child {
    padding-bottom: 25px;
}

.no-mobil .wl-1-image1 img, .no-mobil .wl-1-images2 img {
    width: 100%;
    max-width: 330px;
    padding: 10px 20px 0px 20px;
}


.no-mobil .wl-2-image1 {
    width: 50%;
    float: left;
    display: flex;
    height: 70vh;
    align-items: center;
    justify-content: flex-end
}


.no-mobil .wl-2-image2 {
    width: 50%;
    float: right;
    display: flex;
    height: 70vh;
    align-items: end;
}

.no-mobil .wl-2-image2 img {
    padding-left: 20px;
    margin-bottom: 18%;
}

.wl-3-image1 {
    float: right;
    width: 50%;
    margin-top: 200px;
}

.img-250 {
    width: 250px;
}

.mt-impression {
    margin-top: 10px;
}

.impression-1 {
    margin: 0;
}

.impression-2 {
    margin: 0;
}

.impression-3 {
    margin-top: -50px
}

.impression-4 {

    margin-top: -150px;
}

.impression-5 {
    margin-top: -200px;
}

.impression-6 {
    margin-top: -50px;
}

/* ----------------------------------------------------------------
  Customer
-----------------------------------------------------------------*/
#content-customer-item-1 {
    padding-top: 200px;
    padding-bottom: 200px;
}

#content-customer-item-2 {
    padding-top: 0px;
    padding-bottom: 250px;
}

/* ----------------------------------------------------------------
  Footer
-----------------------------------------------------------------*/

#footer a {
    font-family: "Sparkasse Web", sans-serif;
    font-weight: normal;
    color: #707070;
}

#footer #copyrights > div {
    --bs-black-rgb: #707070;
}

/* ----------------------------------------------------------------
  Media Queries
-----------------------------------------------------------------*/

@media (max-width: 1820px) {
    .video-container-overlay-headline > h2 {
        font-size: 57px;
        font-weight: bold;
        line-height: 1.15;
    }
}

@media (max-width: 1550px) {
    .slogan {
        font-size: 55px;
    }
}

@media (max-width: 1400px) {
    .slogan {
        font-size: 45px;
    }
}

@media (min-width: 1400px) {
    .container {
        max-width: 1480px;
    }


    .business-image {
    }

    .business-image-1 {
        position: absolute;
        right: 30px
    }

    .business-image-2 {
        position: absolute;
        right: 115px;
        top: 220px
    }

    .business-image-3 {
        position: absolute;
        left: 30px;
        top: 440px
    }

    .business-image-4 {
        position: absolute;
        left: 250px;
        top: 500px;
        width: 200px;
        height: 200px;
        font-size: 14px;
        padding: 25px;
    }
}


@media (min-width: 1200px) and (max-width: 1399px) {
    #textChartEmployees {
        top: 30% !important;
    }
}

@media (min-width: 1201px) and (max-width: 1441px) {

    #content-about-item-1 {
        padding-top: 100px;
        padding-bottom: 180px;
    }

    #content-about-item-2 {
        padding-top: 400px;
        padding-bottom: 400px;
    }

    #content-about-item-3 {
        padding-top: 150px;
        padding-bottom: 100px;
    }


    #content-business-item-1 {
        padding-top: 100px;
        padding-bottom: 250px;
    }

    #content-business-item-2 {
        padding-top: 450px;
        padding-bottom: 650px;
    }

    #content-business-item-3 {
        padding-top: 150px;
        padding-bottom: 200px;
    }

    .business-headline {
        margin-left: 25px;
        font-size: 52px;
    }


    .video-container-overlay {
        width: 50%;
        height: 40vh;
    }

    .video-container-overlay-headline {
        width: 60%;
        margin: auto;
    }

    .video-container-overlay-headline > h2 {
        font-size: 50px;
        margin-left: -20px;
    }

    .section-video {
        width: 100%;
    }
}


@media (min-width: 1200px) {


    .dsgv-link-mobil {
        display: none;
    }

    .no-mobil {
        display: block;
    }

    .tablet {
        display: none;
    }

    .mobil {
        display: none;
    }

    .image-section {
        margin-top: 25px;
    }

    .business-image-1 {
        position: absolute;
        right: 30px
    }

    .business-image-2 {
        position: absolute;
        right: 115px;
        top: 250px
    }

    .business-image-3 {
        position: absolute;
        left: 30px;
        top: 470px
    }

    .business-image-4 {
        position: absolute;
        left: 250px;
        top: 550px;
        width: 200px;
        height: 200px;
        font-size: 14px;
        padding: 25px;
    }

    .chart-canvas {
        width: 75% !important;
        height: 75% !important;
    }

    .text-chart {
        width: 50%;
    }
}

@media (max-width: 1023px) { 
    .chart-margin {
        margin-bottom: 280px;
    }
}

/* === Extra Große Geräte, Breite Bildschirme === */
@media (max-width: 1199px) {
    /* Anpassungen für Geräte mit einer Bildschirmbreite von bis zu 1199px */
    .sectionName {
        font-size: 14px;
    }

    .introText {
        font-size: 20px;
        line-height: 28px;
    }


    /* ----------------------------------------------------------------
  start Section
-----------------------------------------------------------------*/
    .start {
        height: 840px;
    }

    .sk-logo-start {
        margin-left: 35px;
        margin-top: 35px
    }

    .keyfacts {
        margin-top: 120px;
        margin-left: 35px;
        color: #FFFFFF;
    }

    .keyfact {
        line-height: 1;
        font-size: 38px;
    }

    .keyfactSubline {
        font-size: 18px;
    }


    /* ----------------------------------------------------------------
  Scrollable Container
-----------------------------------------------------------------*/
    .red-box {
        width: 40%;
        height: 35vh;
        margin-top: -10%;
        z-index: 9999;
    }

    .grey-box {
        width: 100%;
        height: 17vh;
        position: absolute;
        z-index: 9998;
        background-color: #f0f0f0;
    }

    .redbox-item {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        display: none;
    }


    .redbox-item:nth-child(1) {
        display: block;
    }

    .content-container {
        width: 60%;
        height: 75vh;
        padding-left: 20px;
        padding-right: 20px;
    }

    .content-item {
        margin: auto;
        width: 80%;
        height: 75vh;
    }

    .content-scroll-h3 {
        font-size: 21px;
        margin-top: -21px;
    }

    .text-chart {
        width: 60%;
    }


    /* ----------------------------------------------------------------
  About
-----------------------------------------------------------------*/
    .about-scroll-container,
    .dehaem-scroll-container {
        width: 100vw;
        height: 70vh;
        background-color: #f0f0f0;
        margin-top: 150px;
        max-width: 2588px;
    }

    #content-about-item-1 {
        padding-top: 180px;
        padding-bottom: 180px;
    }

    #content-about-item-2 {
        padding-top: 400px;
        padding-bottom: 400px;
    }

    #content-about-item-3 {
        padding-top: 200px;
        padding-bottom: 100px;
    }

    .slogan {
        font-size: 30px;
        width: 100%;
        /*margin-top: 10px;*/
        margin-bottom: 0px;
    }

    .col-fix-991 {
        width: 100% !important;
        margin-top: 20px;
        margin-left: 40px;
    }

    .team-content {
        font-family: var(--font-SK-Web);
        font-style: italic;
        font-size: 15px;
        margin-top: -10px;
    }

    .team-title > h4 {
        font-family: var(--font-SK-Web);
        font-size: 14px
    }

    .team-image {
        width: 100px;
        margin-top: 10px;
    }

    .dsgv-link {
        display: none;
    }

    .dsgv-link-mobil {
        display: block;
    }

    .sk-image {
        width: 90%;
        margin: auto;
        text-align: center;
        clear: both;
        float: none;
    }

    /* ----------------------------------------------------------------
Business
-----------------------------------------------------------------*/
    .sustainability-scroll-container {
        width: 100vw;
        height: 70vh;
        background-color: #f0f0f0;
        margin-top: 150px;
        max-width: 2588px;
    }

    #content-business-item-1 {
        padding-top: 250px;
        padding-bottom: 250px;
    }

    #content-business-item-2 {
        padding-top: 350px;
        padding-bottom: 300px;
    }

    #content-business-item-3 {
        padding-top: 300px;
        padding-bottom: 200px;
    }

    .slogan-business {
        line-height: 1.2;
    }

    .item-100 {
        width: 80%;
        padding: 15px;
    }

    .indicator-headline {
        font-size: 14px;
    }

    .business-headline {
        margin-left: 25px;
        font-size: 40px;
    }

    .image-section {
        margin-top: 25px;
    }


    .business-image-1 {
        position: absolute;
        right: 0px
    }

    .business-image-2 {
        position: absolute;
        left: 0px;
        top: 245px
    }

    .business-image-3 {
        position: absolute;
        right: 0px;
        top: 465px
    }

    .business-image-4 {
        position: absolute;
        left: 0px;
        top: 680px;
        width: 200px;
        height: 200px;
        font-size: 14px;
        padding: 25px;
    }


    .video-container-overlay {
        width: 50%;
        height: 40vh;
    }

    .video-container-overlay-headline {
        width: 60%;
        margin: auto;
    }

    .video-container-overlay-headline > h2 {
        font-size: 50px;
        margin-left: -20px;
    }

    .section-video {
        width: 100%;
    }

    #working-scroll-content,
    #customer-scroll-content {
        width: 100%;
    }

    .working-content-container,
    .customer-scroll-container {
        width: 100%;
        height: 60vh;
    }

    #working-scroll-item-1 {
        padding-top: 150px;
        padding-bottom: 0px;
    }

    #working-scroll-item-2 {
        padding-top: 0px;
        padding-bottom: 0px;
    }

    #working-scroll-item-3 {
        padding-top: 0px;
        padding-bottom: 0px;
    }

    #working-scroll-item-4 {
        padding-top: 0px;
        padding-bottom: 0px;
    }

    #working-scroll-item-5 {
        padding-top: 300px;
        padding-bottom: 200px;
    }

    .working-item-box,
    .customer-item-box {
        width: 100%;
        height: 30vh;
        order: 2
    }

    .working-item {
        width: 100%;
    }
}

/* === Große Geräte, Desktops === */
@media (max-width: 991px) {
    /* Anpassungen für Geräte mit einer Bildschirmbreite von bis zu 991px */
    .sectionName {
        font-size: 14px;
    }

    .introText {
        font-size: 18px;
    }


    /* ----------------------------------------------------------------
  start Section
-----------------------------------------------------------------*/
    .start {
        height: 840px;
    }

    .sk-logo-start {
        margin-left: 35px;
        margin-top: 35px
    }

    .keyfacts {
        margin-top: 30px;
        margin-left: 35px;
        color: #FFFFFF;
    }

    .keyfact {
        line-height: 1;
        font-size: 38px;
    }

    .keyfactSubline {
        font-size: 18px;
    }


    /* ----------------------------------------------------------------
  Scrollable Container
-----------------------------------------------------------------*/
    .red-box {
        width: 40%;
        height: 30vh;
        margin-top: -10%;
        z-index: 9999;
    }

    .grey-box {
        width: 100%;
        height: 17vh;
        position: absolute;
        z-index: 9998;
        background-color: #f0f0f0;
    }

    .redbox-item {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        display: none;
    }


    .redbox-item:nth-child(1) {
        display: block;
    }

    .content-container {
        width: 60%;
        height: 75vh;
        padding-left: 20px;
        padding-right: 20px;
    }

    .content-item {
        margin: auto;
        width: 100%;
        height: 75vh;
    }

    .content-scroll-h3 {
        font-size: 21px;
        margin-top: -21px;
    }

    /* ----------------------------------------------------------------
  About
-----------------------------------------------------------------*/
    .about-scroll-container,
    .dehaem-scroll-container {
        width: 100vw;
        height: 70vh;
        background-color: #f0f0f0;
        margin-top: 150px;
        max-width: 2588px;
    }

    #content-about-item-1 {
        padding-top: 180px;
        padding-bottom: 180px;
    }

    #content-about-item-2 {
        padding-top: 400px;
        padding-bottom: 400px;
    }

    #content-about-item-3 {
        padding-top: 200px;
        padding-bottom: 100px;
    }

    .slogan {
        font-size: 24px;
        width: 100%;
    }

    .col-fix-991 {
        width: 100% !important;
        margin-top: 20px;
        margin-left: 40px;
    }

    .team-content {
        font-family: var(--font-SK-Web);
        font-style: italic;
        font-size: 15px;
        margin-top: -10px;
    }

    .team-title > h4 {
        font-family: var(--font-SK-Web);
        font-size: 14px
    }

    .team-image {
        width: 100px;
        margin-top: 10px;
    }

    .dsgv-link {
        display: none;
    }

    .dsgv-link-mobil {
        color: #FF0000;
        font-family: var(--font-SK-Web);
        font-weight: normal;
        font-size: 15px;
        display: block;
    }

    .dsgv-link-mobil > p {
        margin-bottom: 5px !important;
    }

    .sk-image {
        /*width: 100%;*/
    }

    /* ----------------------------------------------------------------
Business
-----------------------------------------------------------------*/
    .sustainability-scroll-container {
        width: 100vw;
        height: 70vh;
        background-color: #f0f0f0;
        margin-top: 150px;
        max-width: 2588px;
    }

    #content-business-item-1 {
        padding-top: 250px;
        padding-bottom: 250px;
    }

    #content-business-item-2 {
        padding-top: 350px;
        padding-bottom: 300px;
    }

    #content-business-item-3 {
        padding-top: 300px;
        padding-bottom: 200px;
    }

    .slogan-business {
        line-height: 1.2;
    }

    .item-100 {
        width: 100%;
        padding: 5px;
    }

    .indicator-headline {
        font-size: 14px;
    }


    .no-mobil {
        display: none;
    }

    .tablet {
        display: block;
    }

    .mobil {
        display: block;
    }


    .helper p {
        font-weight: 200;
        font-size: 14px;
        line-height: 18px;
    }

    .helper:nth-child(1) {
        order: 1;
    }

    .helper:nth-child(3) {
        order: 2;
    }

    .helper:nth-child(2) {
        order: 3;
    }

    .chart-canvas {
        margin: auto;
        width: 60% !important;
        height: 60% !important;
    }

    .text-chart {
        width: 50%;
    }

    .chart-employees {
        width: 100%;
    }

    .business-image {
        position: unset !important;
        float: left;
        width: 200px;
        height: 200px;
        padding: 10px;
    }

    .business-image-4 {
        padding: 15px;
        width: 180px;
        height: 185px;
        font-size: 13px;
        margin-top: 5px;
        margin-left: 10px;
    }

    .image-section {
        width: 440px;
        margin: auto;
    }

    .video-container-overlay {
        width: 50%;
        height: 40vh;
    }

    .video-container-overlay-headline {
        width: 60%;
        margin: auto;
    }

    .video-container-overlay-headline > h2 {
        font-size: 40px;
        margin-left: -20px;
    }

    .section-video {
        width: 200%;
        margin-left: -50%;
        margin-top: 10%;
    }

    #working-scroll-content,
    #customer-scroll-content {
        width: 100%;
    }

    .working-content-container,
    .customer-content-container {
        width: 100%;
        height: 60vh;
    }

    #working-scroll-item-1 {
        padding-top: 150px;
        padding-bottom: 200px;
    }

    #working-scroll-item-2 {
        padding-top: 200px;
        padding-bottom: 200px;
    }

    #working-scroll-item-3 {
        padding-top: 200px;
        padding-bottom: 200px;
    }

    #working-scroll-item-4 {
        padding-top: 300px;
        padding-bottom: 600px;
    }

    #working-scroll-item-5 {
        padding-top: 300px;
        padding-bottom: 200px;
    }

    .working-item-box,
    .customer-item-box {
        width: 100%;
        height: 55vh;
        order: 2
    }

    .working-item {
        width: 100%;
        height: 50vh;
    }


    img.section-image {
        width: 300%;
        max-width: 300%;
    }

    .impression-1 {
        margin-top: 10px;
    }

    .impression-2 {
        margin-top: 10px;
    }

    .impression-3 {
        margin-top: 10px;
    }

    .impression-4 {
        margin-top: -168px;
    }

    .impression-5 {
        margin-top: 10px;
    }

    .impression-6 {
        margin-top: -168px;
    }
}

/* === Mittlere Geräte, Tablets === */
@media (max-width: 767px) {
    /* Anpassungen für Geräte mit einer Bildschirmbreite von bis zu 767px */
    .chart-margin {
        margin-bottom: 440px;
    }
    
    .sk-logo {
        width: 150px;
    }

    .sectionName {
        font-size: 14px;
    }

    .introText {
        font-size: 18px;
    }

    #autoScroll {
        margin-top: 20px;
    }

    /* ----------------------------------------------------------------
  start Section
-----------------------------------------------------------------*/
    .start {
        height: 840px;
    }

    .sk-logo-start {
        margin-left: 35px;
        margin-top: 35px
    }

    .keyfacts {
        margin-top: 30px;
        margin-left: 35px;
        color: #FFFFFF;
    }

    .keyfact {
        line-height: 1;
        font-size: 38px;
    }

    .keyfactSubline {
        font-size: 18px;
    }


    /* ----------------------------------------------------------------
  Scrollable Container
-----------------------------------------------------------------*/
    .red-box {
        width: 75%;
        height: 25vh;
        margin-top: -20%;
        z-index: 9999;
    }

    .grey-box {
        width: 100%;
        height: 17vh;
        position: absolute;
        z-index: 9998;
        background-color: #f0f0f0;
    }

    .redbox-item {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        display: none;
    }


    .redbox-item:nth-child(1) {
        display: block;
    }

    .content-container {
        width: 100%;
        height: 75vh;
        padding-left: 20px;
        padding-right: 20px;
    }

    .content-item {
        margin: auto;
        width: 100%;
        height: 75vh;
    }

    .content-scroll-h3 {
        font-size: 21px;
        margin-top: -21px;
    }

    /* ----------------------------------------------------------------
  About
-----------------------------------------------------------------*/
    .about-scroll-container,
    .dehaem-scroll-container {
        width: 100vw;
        height: 70vh;
        background-color: #f0f0f0;
        margin-top: 150px;
        max-width: 2588px;
    }

    #content-about-item-1 {
        padding-top: 180px;
        padding-bottom: 180px;
    }

    #content-about-item-2 {
        padding-top: 400px;
        padding-bottom: 400px;
    }

    #content-about-item-3 {
        padding-top: 200px;
        padding-bottom: 100px;
    }

    .slogan {
        font-size: 24px;
        width: 100%;
    }

    .team-content {
        font-family: var(--font-SK-Web);
        font-style: italic;
        font-size: 15px;
        margin-top: -10px;
    }

    .team-title > h4 {
        font-family: var(--font-SK-Web);
        font-size: 14px
    }

    .team-image {
        width: 75px;
        margin-top: 10px;
    }

    .dsgv-link {
        display: none;
    }

    .dsgv-link-mobil {
        color: #FF0000;
        font-family: var(--font-SK-Web);
        font-weight: normal;
        font-size: 15px;
    }

    .dsgv-link-mobil > p {
        margin-bottom: 5px !important;
    }

    .sk-image img {
        /*  width: 100%;*/
        max-height: 25vh;
    }


    /* ----------------------------------------------------------------
Business
-----------------------------------------------------------------*/
    .sustainability-scroll-container {
        width: 100vw;
        height: 70vh;
        background-color: #f0f0f0;
        margin-top: 150px;
        max-width: 2588px;
    }

    #content-business-item-1 {
        padding-top: 250px;
        padding-bottom: 250px;
    }

    #content-business-item-2 {
        padding-top: 350px;
        padding-bottom: 300px;
    }

    #content-business-item-3 {
        padding-top: 300px;
        padding-bottom: 200px;
    }

    .slogan-business {
        line-height: 1.2;
    }

    .item-100 {
        width: 100%;
        padding: 5px;
    }

    .indicator-headline {
        font-size: 14px;
    }

    .no-mobil {
        display: none;
    }

    .tablet {
        display: block;
    }

    .mobil {
        display: none;
    }

    .business-image {

    }

    .video-container-overlay {
        width: 75%;
        height: 30vh;
    }

    .video-container-overlay-headline {
        width: 60%;
        margin: auto;
    }

    .video-container-overlay-headline > h2 {
        font-size: 30px;
        margin-left: -20px;
    }

    .section-video {
        width: 300%;
        margin-left: -100%;
        margin-top: 10%;
    }

    .chart-employees {
        width: 100%;
    }

    #working-scroll-content,
    #customer-scroll-content {
        width: 100%;
    }

    .working-content-container,
    .customer-content-container {
        width: 100%;
        height: 60vh;
    }

    #working-scroll-item-1 {
        padding-top: 100px;
        padding-bottom: 200px;
    }

    #working-scroll-item-2 {
        padding-top: 200px;
        padding-bottom: 200px;
    }

    #working-scroll-item-3 {
        padding-top: 200px;
        padding-bottom: 200px;
    }

    #working-scroll-item-4 {
        padding-top: 300px;
        padding-bottom: 600px;
    }

    #working-scroll-item-5 {
        padding-top: 450px;
        padding-bottom: 200px;
    }

    .working-item-box,
    .customer-item-box {
        width: 100%;
        height: 30vh;
        order: 2
    }

    .working-item {
        width: 100%;
    }


    img.section-image {
        width: 300%;
        max-width: 300%;
    }


    .impression-1 {
        margin-top: 10px;
    }

    .impression-2 {
        margin-top: 10px;
    }

    .impression-3 {
        margin-top: 10px;
    }

    .impression-4 {
        margin-top: -126px;
    }

    .impression-5 {
        margin-top: 10px;
    }

    .impression-6 {
        margin-top: -126px;
    }
}

/* === Kleine Geräte, Landschafts-Handys === */
@media (max-width: 575px) {
    /* Anpassungen für Geräte mit einer Bildschirmbreite von bis zu 575px */
    .sectionName {
        font-size: 14px;
    }

    .introText {
        font-size: 18px;
    }


    /* ----------------------------------------------------------------
  start Section
-----------------------------------------------------------------*/
    .start {
        height: 840px;
    }

    .sk-logo-start {
        margin-left: 35px;
        margin-top: 35px
    }

    .keyfacts {
        margin-top: 30px;
        margin-left: 35px;
        color: #FFFFFF;
    }

    .keyfact {
        line-height: 1;
        font-size: 38px;
    }

    .keyfactSubline {
        font-size: 18px;
    }


    /* ----------------------------------------------------------------
  Scrollable Container
-----------------------------------------------------------------*/
    .red-box {
        width: 75%;
        height: 25vh;
        margin-top: -20%;
        z-index: 9999;
    }

    .grey-box {
        width: 100%;
        height: 17vh;
        position: absolute;
        z-index: 9998;
        background-color: #f0f0f0;
    }

    .redbox-item {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        display: none;
    }


    .redbox-item:nth-child(1) {
        display: block;
    }

    .content-container {
        width: 100%;
        height: 75vh;
        padding-left: 20px;
        padding-right: 20px;
    }

    .content-item {
        margin: auto;
        width: 100%;
        height: 75vh;
    }

    .content-scroll-h3 {
        font-size: 21px;
        margin-top: -21px;
    }

    #about-scroll-content {
        padding-top: 60px;
    }

    /* ----------------------------------------------------------------
  About
-----------------------------------------------------------------*/
    .about-scroll-container,
    .dehaem-scroll-container {
        width: 100vw;
        height: 80vh;
        background-color: #f0f0f0;
        margin-top: 150px;
        max-width: 2588px;
    }

    #content-about-item-1 {
        padding-top: 150px;
        padding-bottom: 180px;
    }

    #content-about-item-2 {
        padding-top: 400px;
        padding-bottom: 400px;
    }

    #content-about-item-3 {
        padding-top: 200px;
        padding-bottom: 100px;
    }

    .slogan {
        font-size: 24px;
        width: 100%;
    }

    .team-content {
        font-family: var(--font-SK-Web);
        font-style: italic;
        font-size: 15px;
        margin-top: -40px;
        font-weight: 200;
    }

    .team-title > h4 {
        font-family: var(--font-SK-Web);
        font-size: 14px
    }

    .team-image {
        width: 75px;
        margin-top: 10px;
    }

    .dsgv-link {
        display: none;
    }

    .dsgv-link-mobil {
        color: #FF0000;
        font-family: var(--font-SK-Web);
        font-weight: normal;
        font-size: 15px;
    }

    .dsgv-link-mobil > p {
        margin-bottom: 5px !important;
    }

    .sk-image {
        /* width: 100%; */
    }

    .video-container-overlay {
        width: 270px;
        height: 270px;
    }

    .video-container-overlay-headline {
        width: 217px;
    }


    .video-container-overlay-headline > h2 {
        font-size: 30px;
        margin-left: -20px;
    }

    .section-video {
        width: 300%;
        margin-left: -100%;
        margin-top: 10%;
    }

    /* ----------------------------------------------------------------
       Business
    -----------------------------------------------------------------*/
    .sustainability-scroll-container {
        width: 100vw;
        height: 70vh;
        background-color: #f0f0f0;
        margin-top: 150px;
        max-width: 2588px;
    }

    #content-business-item-1 {
        padding-top: 250px;
        padding-bottom: 250px;
    }

    #content-business-item-2 {
        padding-top: 350px;
        padding-bottom: 300px;
    }

    #content-business-item-3 {
        padding-top: 300px;
        padding-bottom: 200px;
    }

    .slogan-business {
        line-height: 1.2;
    }

    .item-100 {
        width: 70%;
        padding: 15px;
    }

    .indicator-headline {
        font-size: 14px;
    }

    .no-mobil {
        display: none;
    }

    .tablet {
        display: none;
    }

    .mobil {
        display: block;
    }

    .business-headline {
        font-family: var(--font-SK-Head);
        font-size: 30px;
        line-height: 1.5;
        font-weight: bold;
        color: #FF0000;
    }

    .text-chart {
        width: 50%;
    }

    /*

    .business-image {
        position: unset !important;
        width: 150px;
        float: left;
        height: 150px;
        padding: 5px;
    }

    .business-image-4 {
        font-size: 10px;
        padding: 15px;
        width: 150px;
        height: 140px;
    }

    .image-section {
        margin: auto;
        width: 310px;
    }
    */
    .col-fix-991 {
        width: 80%;
    }

    .chart-canvas {
        width: 70% !important;
        height: 70% !important;
    }

    .chart-employees {
        width: 100%;
    }


    .section-video {
        width: 300%;
        margin-left: -100%;
        margin-top: 10%;
    }

    #working-scroll-content,
    #customer-scroll-content {
        width: 100%;
    }

    .working-content-container,
    .customer-content-container {
        width: 100%;
        height: 60vh;
    }

    #working-scroll-item-1 {
        padding-top: 100px;
        padding-bottom: 200px;
    }

    #working-scroll-item-2 {
        padding-top: 440px;
        padding-bottom: 0px;
    }

    #working-scroll-item-3 {
        padding-top: 200px;
        padding-bottom: 200px;
    }

    #working-scroll-item-4 {
        padding-top: 115px;
        padding-bottom: 600px;
    }

    #working-scroll-item-5 {
        padding-top: 450px;
        padding-bottom: 200px;
    }

    .working-item-box,
    .customer-item-box {
        width: 100%;
        height: 30vh;
        order: 2
    }

    .working-item {
        width: 100%;
    }

    img.section-image {
        width: 300%;
        max-width: 300%;
    }

    .impression-image {
        margin: auto;
    }


    .impression-1 {
        margin-top: 10px;
    }

    .impression-2 {
        margin-top: 10px;
    }

    .impression-3 {
        margin-top: 10px;
    }

    .impression-4 {
        margin-top: -126px;
    }

    .impression-5 {
        margin-top: 10px;
    }

    .impression-6 {
        margin-top: -126px;
    }
}


@media (max-width: 420px) {
    .chart-margin {
        margin-bottom: 440px;
    }
    
    .business-image {
        position: unset !important;
        float: none;
        padding: 5px;
        margin: auto;
    }

    .business-image-4 {
        font-size: 10px;
        padding: 15px;
        width: 191px;
        height: 178px;
        margin: auto;
    }

    .image-section {
        margin: auto;
        width: 100%;
    }

    .impression-1 {
        margin-top: 10px;
    }

    .impression-2 {
        margin-top: 10px;
    }

    .impression-3 {
        margin-top: 10px;
    }

    .impression-4 {
        margin-top: -106px;
    }

    .impression-5 {
        margin-top: 10px;
    }

    .impression-6 {
        margin-top: -106px;
    }

    .video-container-overlay {
        width: 270px;
        height: 270px;
    }

    .video-container-overlay-headline {
        width: 217px;
    }

    .video-container-overlay-headline > h2 {
        font-size: 30px;
    }
}

.big-number {
    font-size: 90px;
    font-family: 'Sparkasse Web', serif;
    color: #fff;
    line-height: 1.5 !important;
}

.big-number-mobile {
    font-size: 48px;
    font-family: 'Sparkasse Web', serif;
    color: #fff;
    line-height: 1.5 !important;
}

.image-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.image-grid img {
    width: 100%;
    height: auto;
    display: block;
}

.image-grid img:nth-child(1) {
    grid-column: 1 / -1;
}