:root {
    --soft-red: #E5D0D0;
    --bright-red: #DD0742;
    --medium-red: #B4163D;
    --dark-red: #78132F;
    --gray: #F2F2F2;
    --dark-gray: #2D2E2C;
    --black: #1B1B1B;
    --white: #FFFFFF;
}

:root {
    --fluid-14-20: clamp(0.875rem, 0.8rem + 0.375vi, 1.25rem);
    --fluid-20-26: clamp(1.25rem, 1.175rem + 0.375vi, 1.625rem);
    --fluid-26-40: clamp(1.625rem, 1.45rem + 0.875vi, 2.5rem);
    --space-xl-3xl: clamp(3.375rem, 2.55rem + 4.125vi, 7.5rem);
    --smaller: .75;
}

a,
abbr,
acronym,
address,
applet,
article,
aside,
audio,
b,
big,
blockquote,
body,
canvas,
caption,
center,
cite,
code,
dd,
del,
details,
dfn,
div,
dl,
dt,
em,
embed,
fieldset,
figcaption,
figure,
footer,
form,
h1,
h2,
h3,
h4,
h5,
h6,
header,
hgroup,
html,
i,
iframe,
img,
ins,
kbd,
label,
legend,
li,
mark,
menu,
nav,
object,
ol,
output,
p,
pre,
q,
ruby,
s,
samp,
section,
small,
span,
strike,
strong,
sub,
summary,
sup,
table,
tbody,
td,
tfoot,
th,
thead,
time,
tr,
tt,
u,
ul,
var,
video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}


*,
:after,
:before {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

* {
    scroll-behavior: smooth;
    scroll-padding-top: 7rem;
}

::-moz-selection {
    background: var(--dark-red);
    color: var(--white);
}

::selection {
    background: var(--dark-red);
    color: var(--white);
}

/* raleway-100 - latin */
@font-face {
    font-display: swap;
    font-family: 'Raleway';
    font-style: normal;
    font-weight: 100;
    src: url('../fonts/raleway-v29-latin-100.woff2') format('woff2');
}

/* raleway-100italic - latin */
@font-face {
    font-display: swap;
    font-family: 'Raleway';
    font-style: italic;
    font-weight: 100;
    src: url('../fonts/raleway-v29-latin-100italic.woff2') format('woff2');
}

/* raleway-200 - latin */
@font-face {
    font-display: swap;
    font-family: 'Raleway';
    font-style: normal;
    font-weight: 200;
    src: url('../fonts/raleway-v29-latin-200.woff2') format('woff2');
}

/* raleway-200italic - latin */
@font-face {
    font-display: swap;
    font-family: 'Raleway';
    font-style: italic;
    font-weight: 200;
    src: url('../fonts/raleway-v29-latin-200italic.woff2') format('woff2');
}

/* raleway-300 - latin */
@font-face {
    font-display: swap;
    font-family: 'Raleway';
    font-style: normal;
    font-weight: 300;
    src: url('../fonts/raleway-v29-latin-300.woff2') format('woff2');
}

/* raleway-300italic - latin */
@font-face {
    font-display: swap;
    font-family: 'Raleway';
    font-style: italic;
    font-weight: 300;
    src: url('../fonts/raleway-v29-latin-300italic.woff2') format('woff2');
}

/* raleway-regular - latin */
@font-face {
    font-display: swap;
    font-family: 'Raleway';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/raleway-v29-latin-regular.woff2') format('woff2');
}

/* raleway-italic - latin */
@font-face {
    font-display: swap;
    font-family: 'Raleway';
    font-style: italic;
    font-weight: 400;
    src: url('../fonts/raleway-v29-latin-italic.woff2') format('woff2');
}

/* raleway-500 - latin */
@font-face {
    font-display: swap;
    font-family: 'Raleway';
    font-style: normal;
    font-weight: 500;
    src: url('../fonts/raleway-v29-latin-500.woff2') format('woff2');
}

/* raleway-500italic - latin */
@font-face {
    font-display: swap;
    font-family: 'Raleway';
    font-style: italic;
    font-weight: 500;
    src: url('../fonts/raleway-v29-latin-500italic.woff2') format('woff2');
}

/* raleway-600 - latin */
@font-face {
    font-display: swap;
    font-family: 'Raleway';
    font-style: normal;
    font-weight: 600;
    src: url('../fonts/raleway-v29-latin-600.woff2') format('woff2');
}

/* raleway-600italic - latin */
@font-face {
    font-display: swap;
    font-family: 'Raleway';
    font-style: italic;
    font-weight: 600;
    src: url('../fonts/raleway-v29-latin-600italic.woff2') format('woff2');
}

/* raleway-700 - latin */
@font-face {
    font-display: swap;
    font-family: 'Raleway';
    font-style: normal;
    font-weight: 700;
    src: url('../fonts/raleway-v29-latin-700.woff2') format('woff2');
}

/* raleway-700italic - latin */
@font-face {
    font-display: swap;
    font-family: 'Raleway';
    font-style: italic;
    font-weight: 700;
    src: url('../fonts/raleway-v29-latin-700italic.woff2') format('woff2');
}

/* raleway-800 - latin */
@font-face {
    font-display: swap;
    font-family: 'Raleway';
    font-style: normal;
    font-weight: 800;
    src: url('../fonts/raleway-v29-latin-800.woff2') format('woff2');
}

/* raleway-800italic - latin */
@font-face {
    font-display: swap;
    font-family: 'Raleway';
    font-style: italic;
    font-weight: 800;
    src: url('../fonts/raleway-v29-latin-800italic.woff2') format('woff2');
}

/* raleway-900 - latin */
@font-face {
    font-display: swap;
    font-family: 'Raleway';
    font-style: normal;
    font-weight: 900;
    src: url('../fonts/raleway-v29-latin-900.woff2') format('woff2');
}

/* raleway-900italic - latin */
@font-face {
    font-display: swap;
    font-family: 'Raleway';
    font-style: italic;
    font-weight: 900;
    src: url('../fonts/raleway-v29-latin-900italic.woff2') format('woff2');
}


/********************** GENERAL ************************/

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.no-scroll {
    overflow: hidden;
}

.no-scroll::-webkit-scrollbar {
    display: none;
}

.reveal {
    position: relative;
    transform: translateY(150px);
    opacity: 0;
    transition: 1s;
}

.reveal.active {
    transform: translateY(0);
    opacity: 1;
}

.flex-box {
    display: flex;
}

.wrap5 {
    max-width: 1920px;
    padding: 0 5% 0 5%;
    margin: auto;
}

.wrap10 {
    max-width: 1920px;
    padding: 0 10% 0 10%;
    margin: auto;
}

.wrap15 {
    max-width: 1920px;
    padding: 0 15% 0 15%;
    margin: auto;
}

.font-gradient {
    background: linear-gradient(to top right, var(--dark-red), var(--bright-red));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.header-gradient {
    background: linear-gradient(to top right, var(--dark-red), var(--bright-red));
}

.background-gradient {
    background: linear-gradient(to bottom, var(--soft-red), var(--white));
}

.white-button {
    color: var(--medium-red);
    background: var(--white);
}

.red-button {
    background: var(--medium-red);
    color: var(--white);
}

.push-button {
    padding: 10px 20px;
    border-radius: 200px;
    font-weight: 600;
    margin: 2vw 0 0 0;
}

.push-button:hover {
    background: var(--dark-gray);
    color: var(--white);
    -webkit-transition: .2s ease-in-out;
    -o-transition: .2s ease-in-out;
    transition: .2s ease-in-out;
}

#interested-in .flex-box div:hover,
#faq .faq-accordion:hover,
#accordion .faq-accordion:hover,
#feature .worko-tabs .flex-tabs .tab:hover,
#doxis-info .stoerer:hover,
#ser-info .stoerer:hover,
#solutions-advantage .container div:last-of-type:hover,

#company-information .wrap15 .container:hover,
#feedback-area .flex-box .container:hover,
#overview-feedback select:hover,
#overview-feedback #resetFilters:hover,
#overview-solution .flex-box:hover,
#timeline .cd-horizontal-timeline .events a:hover,
#appointment .flex-box .container:hover,
#feature .worko-tabs .flex-tabs:hover,
#service .service-card:hover,
#industry .stoerer:hover {
    transform: translateY(-5px);
    -webkit-transition: .2s ease-in-out;
    -o-transition: .2s ease-in-out;
    transition: .2s ease-in-out;
}

#overview-team .reference-item:hover,
#overview-feedback .reference-item:hover,
#overview-special-solution .card:hover,
#overview-special-integration .card:hover,
#statistics .statistics-item:hover,
#reasons-for-hk .tile:hover,
#reference-slide .slide svg:hover {

    transform: scale(1.05);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    -webkit-transition: .2s ease-in-out;
    -o-transition: .2s ease-in-out;
    transition: .2s ease-in-out;
}

#integration-slide .slide svg:hover {
    transform: scale(1.05);
    filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, 0.5));
    -webkit-transition: .2s ease-in-out;
    -o-transition: .2s ease-in-out;
    transition: .2s ease-in-out;
}

body {
    font-family: 'Raleway';
    height: 100%;
}

h1 {
    font-size: var(--fluid-26-40);
    margin-bottom: var(--fluid-26-40);
    font-weight: 900;
    line-height: 1.5;
    text-transform: uppercase;
    color: var(--dark-gray);
}

#overview-solution .flex-box div span {
    font-size: var(--fluid-26-40);
    font-weight: 900;
    text-transform: uppercase;
    color: var(--dark-gray);
}

h2,
.highlight.stoerer p span {
    font-size: var(--fluid-26-40);
    margin-bottom: var(--fluid-26-40);
    font-weight: 600;
    line-height: 1.5;
    text-transform: uppercase;
    color: var(--dark-gray);
}

h3 {
    font-size: var(--fluid-20-26);
    margin-bottom: var(--fluid-20-26);
    font-weight: 600;
    line-height: 1.5;
    color: var(--dark-gray);
}

h4 {
    font-weight: 600;
}

p,
li,
a,
h1 span,
h4,
th,
td,
#overview-feedback select,
#overview-feedback #resetFilters {
    font-size: var(--fluid-14-20);
    margin-bottom: var(--fluid-14-20);
    line-height: 1.5;
    color: var(--dark-gray);

}

a {
    text-decoration: none;
}

b,
strong {
    font-weight: 600;
}

/********************** HEADER ************************/

/* navbar */

header .navbar {
    background: var(--white);
    height: 65px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 10px 5px 0 rgba(0, 0, 0, .1);
    -webkit-box-shadow: 0 10px 5px 0 rgba(0, 0, 0, .1);
    -moz-box-shadow: 0 10px 5px 0 rgba(0, 0, 0, .1);
    z-index: 999;
}



header .sticky {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 999;
    padding: 0 2% 0 2%;
}

header .navbar .logo {
    width: 50px;
    height: auto;
    line-height: 0;
    margin: 0;

}

header .navbar .logo:hover {
    transform: scale(1.05);
    -webkit-transition: .2s ease-in-out;
    -o-transition: .2s ease-in-out;
    transition: .2s ease-in-out;
}

/* nav menu button */

header .menu-btn {
    position: relative;
    display: none;
    justify-content: center;
    align-items: center;
    width: 1.5rem;
    height: 1.5rem;
    cursor: pointer;
    z-index: 2;
}

header .navbar .menu-btn__lines::before,
header .navbar .menu-btn__lines::after {
    content: "";
    position: absolute;
}

header .navbar .menu-btn__lines,
header .navbar .menu-btn__lines::before,
header .navbar .menu-btn__lines::after {
    width: 1.5rem;
    height: 0.2rem;
    border-radius: 0.2rem;
    background: var(--dark-gray);
    transition: all 0.4s ease-in-out;
}

header .navbar .menu-btn__lines::before {
    transform: translateY(-0.5rem);
}

.navbar .menu-btn__lines::after {
    transform: translateY(0.5rem);
}

header .navbar .menu-items {
    display: flex;
    align-items: center;
}

header .navbar ul li {
    list-style: none;
    transition: 0.3s ease;
    margin-left: 25px;
    margin-bottom: 0;
}

header .navbar ul li a {
    text-decoration: none;
    color: var(--medium-gray);
    font-weight: 600;
    font-size: 1rem;
}

header .navbar ul li a:hover {
    color: var(--dark-red);
    transform: scale(1.1);
    -webkit-transition: .2s ease-in-out;
    -o-transition: .2s ease-in-out;
    transition: .2s ease-in-out;
}

/* mega menu  */

header .navbar .mega-menu {
    position: absolute;
    left: 0;
    width: 100vw;
    top: 65px;
    border-top: 1px solid var(--white);
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s ease-out 0s, visibility 0.1s linear 0s;

}

header .navbar .mega-menu .content {
    background: var(--white);
    border-top: .5px solid var(--gray);
    padding: 2rem;
    padding-bottom: 50px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 100px;
    width: 100%;
    justify-content: space-between;
    -webkit-box-shadow: 0 20px 50px 0 rgb(0 0 0 / 5%);
    box-shadow: 0 20px 50px 0 rgb(0 0 0 / 5%);
}

header .navbar .content .col {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    line-height: 2rem;
}

header .navbar .content .col .menu-title {


    line-height: 1rem;
    font-weight: bold;
    margin-bottom: 20px;
}

header .navbar .content .col .menu-title a {
    color: var(--medium-red);
    font-size: 1.2rem;
}

header .navbar .content .col .menu-title a:hover {
    color: var(--dark-red);
    -webkit-transition: .2s ease-in-out;
    -o-transition: .2s ease-in-out;
    transition: .2s ease-in-out;
}

header .navbar .content .col p {
    line-height: 1rem;
    margin-top: 5px;
}

header .navbar .content .col .mega-links {
    border-left: 1px solid var(--dark-gray);
}

header .navbar .menu-items li:hover .mega-menu {
    opacity: 1;
    visibility: visible;
}

header .navbar .menu-btn.open .menu-btn__lines {
    transform: translateX(1rem);
    background: transparent;
}

header .navbar .menu-btn.open .menu-btn__lines::before {
    transform: rotate(45deg) translate(-0.5rem, 0.5rem);
    background: var(--dark-gray);
}

header .navbar .menu-btn.open .menu-btn__lines::after {
    transform: rotate(-45deg) translate(-0.5rem, -0.5rem);
    background: var(--dark-gray);
}

header .navbar ul li .menu-item {
    position: relative;
}

header .navbar ul li .menu-item::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    display: block;
    margin-top: 5px;
    right: 0;
    background: var(--dark-red);
    transition: width 0.4s ease, left 0.4s ease;
}

header .next-area {
    position: absolute;
    bottom: 50px;
    transform: translateX(-50%);
    left: 50%;
}

header .next-area .scroll {
    width: 60px;
    height: 60px;
    border: 2px solid var(--white);
    border-radius: 50%;
    position: relative;
    animation: down 1.5s infinite;
    -webkit-animation: down 1.5s infinite;
}

header .next-area .scroll::before {
    content: '';
    position: absolute;
    top: 15px;
    left: 18px;
    width: 18px;
    height: 18px;
    border-left: 2px solid var(--white);
    border-bottom: 2px solid var(--white);
    transform: rotate(-45deg);
}

@keyframes down {
    0% {
        transform: translate(0);
    }

    20% {
        transform: translateY(15px);
    }

    40%,
    100% {
        transform: translate(0);
    }
}

@-webkit-keyframes down {
    0% {
        -webkit-transform: translate(0);
    }

    20% {
        -webkit-transform: translateY(15px);
    }

    40%,
    100% {
        -webkit-transform: translate(0);
    }
}


.progress-container {
    width: 100%;
    height: 5px;
    background: var(--gray);
    position: fixed;
    top: 65px;
    z-index: 99;
}

.progress-bar {
    height: 5px;
    background: var(--medium-red);
    width: 0%;
}

.menu-item::after {
    position: absolute;
    bottom: -2px;
}



#dokumentenmanagement header {
    background: url(../images/header/dokumentenmanagement.jpg) center center/cover no-repeat;
}

#elektronische-akte header {
    background: url(../images/header/elektronische-akte.jpg) center center/cover no-repeat;
}

#workflow header {
    background: url(../images/header/workflow.jpg) center center/cover no-repeat;
}

#posteingang header {
    background: url(../images/header/posteingang.jpg) center center/cover no-repeat;
}

#revisionssicherheit header {
    background: url(../images/header/revisionssicherheit.jpg) center center/cover no-repeat;
}

#fahrzeugmanagement header {
    background: url(../images/header/fahrzeugmanagement.jpg) center center/cover no-repeat;
}

#qualitaetsmanagement header {
    background: url(../images/header/qualitaetsmanagement.jpg) center center/cover no-repeat;
}

#rechnungsverarbeitung header {
    background: url(../images/header/rechnungsverarbeitung.jpg) center center/cover no-repeat;
}

#kundenakte header {
    background: url(../images/header/kundenakte.jpg) center center/cover no-repeat;
}

#lieferantenakte header {
    background: url(../images/header/lieferantenakte.jpg) center center/cover no-repeat;
}

#auftragsbestaetigung header {
    background: url(../images/header/auftragsbestaetigung.jpg) center center/cover no-repeat;
}

#vertragsmanagement header {
    background: url(../images/header/vertragsmanagement.jpg) center center/cover no-repeat;
}

#collaboration header {
    background: url(../images/header/collaboration.jpg) center center/cover no-repeat;
}

#personalakte header {
    background: url(../images/header/personalakte.jpg) center center/cover no-repeat;
}

#onboarding-workflow header {
    background: url(../images/header/onboarding-workflow.jpg) center center/cover no-repeat;
}

#bewerberworkflow header {
    background: url(../images/header/bewerberworkflow.jpg) center center/cover no-repeat;
}

#doxis-as-a-service header {
    background: url(../images/header/doxis-as-a-service.jpg) center center/cover no-repeat;
}

#managed-service header {
    background: url(../images/header/managed-service.jpg) center center/cover no-repeat;
}

#cloud header {
    background: url(../images/header/cloud.jpg) center center/cover no-repeat;
}

#zertifizierung header {
    background: url(../images/header/zertifizierung.jpg) center center/cover no-repeat;
}

#doxis-intelligent-content-automation header {
    background: url(../images/header/doxis-intelligent-content-automation.jpg) center center/cover no-repeat;
}

#doxis-fast-starters header {
    background: url(../images/header/doxis-fast-starters.jpg) center center/cover no-repeat;
}

#content-services header {
    background: url(../images/header/content-services.jpg) center center/cover no-repeat;
}

#content-understanding header {
    background: url(../images/header/content-understanding.jpg) center center/cover no-repeat;
}

#archivierung header {
    background: url(../images/header/archivierung.jpg) center center/cover no-repeat;
}

#prozessautomatisierung header {
    background: url(../images/header/prozessautomatisierung.jpg) center center/cover no-repeat;
}

#ecm header {
    background: url(../images/header/ecm.jpg) center center/cover no-repeat;
}

#kunden-und-lieferantenmanagement header {
    background: url(../images/header/kunden-und-lieferantenmanagement.jpg) center center/cover no-repeat;
}

#digitales-personalmanagement header {
    background: url(../images/header/digitales-personalmanagement.jpg) center center/cover no-repeat;
}

#services header {
    background: url(../images/header/services.jpg) center center/cover no-repeat;
}

#ica header {
    background: url(../images/header/ica.jpg) center center/cover no-repeat;
}

#kleinunternehmen-startups header {
    background: url(../images/header/kleinunternehmen-startups.jpg) center center/cover no-repeat;
}

#mittelstaendische-unternehmen header {
    background: url(../images/header/mittelstaendische-unternehmen.jpg) center center/cover no-repeat;
}

#industrie-fertigung header {
    background: url(../images/header/industrie-fertigung.jpg) center center/cover no-repeat;
}

#handel header {
    background: url(../images/header/handel.jpg) center center/cover no-repeat;
}

#logistik header {
    background: url(../images/header/logistik.jpg) center center/cover no-repeat;
}

#anlagen-und-maschinenbau header {
    background: url(../images/header/anlagen-und-maschinenbau.jpg) center center/cover no-repeat;
}

#stadtwerke-versorger header {
    background: url(../images/header/stadtwerke-versorger.jpg) center center/cover no-repeat;
}

#oeffentliche-verwaltung header {
    background: url(../images/header/oeffentliche-verwaltung.jpg) center center/cover no-repeat;
}

#gesundheitswesen header {
    background: url(../images/header/gesundheitswesen.jpg) center center/cover no-repeat;
}

#dienstleister header {
    background: url(../images/header/dienstleister.jpg) center center/cover no-repeat;
}

#beratung header {
    background: url(../images/header/beratung.jpg) center center/cover no-repeat;
}

#support header {
    background: url(../images/header/support.jpg) center center/cover no-repeat;
}

#implementierung header {
    background: url(../images/header/implementierung.jpg) center center/cover no-repeat;
}

#schulung header {
    background: url(../images/header/schulung.jpg) center center/cover no-repeat;
}

#ueber-uns header {
    background: url(../images/header/ueber-uns.jpg) center center/cover no-repeat;
}

#team header {
    background: url(../images/header/team.jpg) center center/cover no-repeat;
}

#hkconnect header {
    background: url(../images/header/hkconnect.jpg) center center/cover no-repeat;
}


header {
    position: relative;
    width: 100%;
}

#dokumentenmanagement header,
#elektronische-akte header,
#workflow header,
#posteingang header,
#revisionssicherheit header,
#fahrzeugmanagement header,
#qualitaetsmanagement header,
#rechnungsverarbeitung header,
#kundenakte header,
#lieferantenakte header,
#auftragsbestaetigung header,
#vertragsmanagement header,
#collaboration header,
#personalakte header,
#onboarding-workflow header,
#bewerberworkflow header,
#doxis-as-a-service header,
#managed-service header,
#cloud header,
#zertifizierung header,
#doxis-intelligent-content-automation header,
#doxis-fast-starters header,
#content-services header,
#content-understanding header,
#archivierung header,
#prozessautomatisierung header,
#ecm header,
#kunden-und-lieferantenmanagement header,
#digitales-personalmanagement header,
#services header,
#ica header,
#kleinunternehmen-startups header,
#mittelstaendische-unternehmen header,
#industrie-fertigung header,
#handel header,
#logistik header,
#anlagen-und-maschinenbau header,
#stadtwerke-versorger header,
#oeffentliche-verwaltung header,
#gesundheitswesen header,
#dienstleister header,
#beratung header,
#support header,
#implementierung header,
#schulung header,
#team header,
#hkconnect header {
    height: 100vh;
}

#ueber-uns header {
    height: 90vh;
}

#leistungen header,
#loesungen header,
#integration header,
#branche header,
#referenzen header,
#best-practise header,
#salesforce header,
#open-ai header,
#sap header,
#datev header,
#crm header,
#microsoft header,
#elektronische-signaturen header,
#erp header,
universalschnittstelle header,
#datenschutzerklaerung header,
#impressum header,
#agb header,
#nutzungsbedingungen header,
#datenschutzerklaerung-bewerber header,
#fernwartung header,
#ser-partner header,
#newsletter header,
#links header {
    background: linear-gradient(to top right, var(--dark-red), var(--bright-red));
    height: 30vw;
}

#index header {
    background: linear-gradient(to top right, var(--dark-red), var(--bright-red));
    height: 100vh;
}

#integration header {
    position: relative;
}

#integration header::before {
    content: '';
    position: absolute;
    bottom: 0px;
    right: 0px;
    width: 100vw;
    height: 100vh;
    background-image: url('../images/svg/network.svg');
    background-size: cover;
    opacity: 0.3;
}


header .stoerer {
    position: absolute;
    top: 50%;
    left: 5%;
    right: 5%;
    transform: translateY(-50%);
    width: 90%;
}


#index header .stoerer {
    top: 42%;
}


header .stoerer h1 {
    color: var(--white);
}

header .stoerer h1 span {
    color: var(--white);
    text-transform: none;
}

header .stoerer p {
    color: var(--white);
    margin-bottom: 30px;
    width: 80%;
}

header .stoerer div:first-of-type {
    width: 60%;
    margin: auto;
}

header .stoerer div:last-of-type {
    text-align: center;
    width: 40%;
    display: flex;
    align-items: center;
    justify-content: center;
}

#index header .stoerer div:last-of-type {
    width: 70%;
}

#index header .stoerer div svg {
    width: 100%;
}

header .stoerer div svg {
    width: 15vw;
    margin-left: 2%;
}

header .call-to-action {
    position: fixed;
    border-radius: 20px 0 0 20px;
    padding: 10px;
    top: 45vh;
    right: 0;
    background: var(--medium-red);
    z-index: 999;
    transition: width 0.3s ease-in-out, transform 0.3s ease-in-out;
    width: 50px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    overflow: hidden;
    transform: translateY(0);
    -webkit-box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

header .call-to-action:hover {
    width: 250px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

header .call-to-action .cta-item {
    display: flex;
    align-items: center;
    text-decoration: none;
    margin-bottom: 5px;
    transition: transform 0.3s ease-in-out;
}

header .call-to-action .cta-item:hover {
    transform: scale(1.05);
}

header .call-to-action svg {
    height: 35px;
    width: 35px;
    padding: 5px;
    fill: #fff;
    transition: fill 0.3s ease-in-out;
}

header .call-to-action .cta-text {
    display: none;
    color: #fff;
    padding-left: 10px;
    white-space: nowrap;
    min-width: 150px;
}

header .call-to-action:hover .cta-text {
    display: block;
}

#movesvg {
    transform: none;
    transition: transform 1s ease-out;
}

main section,
footer section {
    padding: var(--space-xl-3xl) 0;
}

/********************** MAIN ************************/



/********************** INDEX ************************/
/********************** SERVICE ************************/


#service h2 {
    text-align: center;
}

#service p.reveal {
    text-align: center;
}

#service .service-cards {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
}

#service .service-card {
    background: var(--white);
    border-radius: 20px;
    padding: 25px;
    max-width: 350px;
    margin: 10px;
    -webkit-box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

#service .service-card svg {
    fill: var(--medium-red);
    width: 50px;
}

#service .service-card h3 {
    color: var(--medium-red);
}

/********************** SERVICE ************************/

#solution {
    padding-bottom: 0;
}

#solution .info-banner,
#referenzen .info-banner,
#best-practise .info-banner {
    text-align: center;
}

#solution svg {
    width: 100%;
    height: auto;
    margin-bottom: -5px;
}

/********************** INDUSTRY ************************/

#industry h2 {
    text-align: center;
}

#industry p {
    max-width: 800px;
    text-align: center;
    margin: auto;
    padding-bottom: 3vw;
}

#industry .stoerer {
    background: linear-gradient(to top right, var(--dark-red), var(--bright-red));
    max-width: 800px;
    padding: 40px;
    border-radius: 20px;
    margin: auto;
    text-align: center;
    -webkit-box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

#industry .industries-list {
    justify-content: center;
    gap: 40px;
}

#industry .column {
    display: flex;
    flex-direction: column;
}

#industry .column ul {
    list-style: none;
    padding: 0 0 50px 0;
}

#industry .column ul li {
    margin: 10px 10px;
    color: var(--white);
    position: relative;
    text-align: left;
}

#industry .column ul li::before {
    content: '\2713';
    position: absolute;
    left: -25px;
    top: -5px;
    font-size: 1.5rem;
    color: white;
    font-weight: 600;
}

/********************** About Us ************************/

#about-us .container .text-box {
    width: 48%;
    margin: 0 1%;
}

#about-us .container .img-box {
    width: 48%;
    margin: 0 1%;
}

#about-us .container .img-box {
    background: url(../images/ueber-uns-teaser.jpg) center center/cover no-repeat;
    min-height: 500px;
    border-radius: 20px;
    -webkit-box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/********************** UNTERSEITEN ************************/

/********************** BREADCRUMB NAVIGATION ************************/

.breadcrumb-navigation {
    width: 100%;
    text-align: center;
    height: 10vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.breadcrumb-navigation a {
    margin: 0 2%;
}

/********************** STATISTICS ************************/


#statistics .statistics-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    max-width: 1200px;
    margin: auto;
    padding-top: 5vh;
}

#statistics .statistics-item {
    background: linear-gradient(to top right, var(--dark-red), var(--bright-red));
    color: var(--white);
    display: flex;
    align-items: center;
    text-align: center;
    justify-content: center;
    height: 350px;
    width: 350px;
    border-radius: 20px;
    padding: 30px;
    margin: auto;
    -webkit-box-shadow: 10px 10px 10px -10px rgba(0, 0, 0, 0.25);
    -moz-box-shadow: 10px 10px 10px -10px rgba(0, 0, 0, 0.25);
    box-shadow: 10px 10px 10px -10px rgba(0, 0, 0, 0.25);
}

#statistics .statistics-item h3 {
    color: var(--white);
    margin-bottom: 0;
    line-height: 0;
}


#statistics .statistics-item:nth-of-type(2) {
    background: url(../images/office-call.jpg) center center/cover no-repeat;
}

#statistics .statistics-item:nth-of-type(4) {
    background: url(../images/preisverleihung.jpg) center center/cover no-repeat;
}

#statistics .statistics-item:nth-of-type(6) {
    background: url(../images/office-work.jpg) center center/cover no-repeat;
}

#statistics .statistics-item:nth-of-type(8) {
    background: url(../images/buerohund.jpg) center center/cover no-repeat;
}

/********************** REASONS FOR HK ************************/

#reasons-for-hk h2 {
    text-align: center;
}

#reasons-for-hk .tiles {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    justify-content: center;
    margin-bottom: 10vh;
}

#reasons-for-hk .tile {
    padding: 50px;
    flex: 1 1 calc(33% - 40px);
    box-sizing: border-box;
    max-width: calc(33% - 40px);
    background: var(--white);
    border-radius: 20px;
    -webkit-box-shadow: 10px 10px 10px -10px rgba(0, 0, 0, 0.25);
    -moz-box-shadow: 10px 10px 10px -10px rgba(0, 0, 0, 0.25);
    box-shadow: 10px 10px 10px -10px rgba(0, 0, 0, 0.25);
}


/********************** VISION / MISSION ************************/

#mission-vision h2 {
    text-align: center;
}

#mission-vision .flex-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

#mission-vision .img-box,
#mission-vision .text-box {
    width: 48%;
    margin: 0 1%;
}

#mission-vision .img-box {
    text-align: center;
}

#mission-vision .img-box img {
    max-width: 40%;
}

#mission-vision .text-box {
    padding: 20px;
    display: flex;
    align-items: center;
}

/********************** ADVANTAGE ************************/

.highlight.stoerer {
    text-align: center;
    padding: 45px 0 28px 0;
}

.animateNumber {
    animation-timing-function: ease-out;
}

.highlight.stoerer p {
    width: 33%;
}

#industry-sectors-advantage .container:first-of-type .img-box {
    margin-right: 4%;
    border-radius: 20px;
}

#beratung #industry-sectors-advantage .container:first-of-type .img-box {
    background: url(../images/beratung.jpg) center center/cover no-repeat;
}

#implementierung #industry-sectors-advantage .container:first-of-type .img-box {
    background: url(../images/implementierung.jpg) center center/cover no-repeat;
}

#schulung #industry-sectors-advantage .container:first-of-type .img-box {
    background: url(../images/schulung.jpg) center center/cover no-repeat;
}

#support #industry-sectors-advantage .container:first-of-type .img-box {
    background: url(../images/support.jpg) center center/cover no-repeat;
}

#anlagen-und-maschinenbau #industry-sectors-advantage .container:first-of-type .img-box {
    background: url(../images/anlagen-und-maschinenbau.jpg) center center/cover no-repeat;
}

#dienstleister #industry-sectors-advantage .container:first-of-type .img-box {
    background: url(../images/dienstleister.jpg) center center/cover no-repeat;
}

#gesundheitswesen #industry-sectors-advantage .container:first-of-type .img-box {
    background: url(../images/gesundheitswesen.jpg) center center/cover no-repeat;
}

#handel #industry-sectors-advantage .container:first-of-type .img-box {
    background: url(../images/handel.jpg) center center/cover no-repeat;
}

#industrie-fertigung #industry-sectors-advantage .container:first-of-type .img-box {
    background: url(../images/industrie-fertigung.jpg) center center/cover no-repeat;
}

#kleinunternehmen-startups #industry-sectors-advantage .container:first-of-type .img-box {
    background: url(../images/kleinunternehmen-startups.jpg) center center/cover no-repeat;
}

#logistik #industry-sectors-advantage .container:first-of-type .img-box {
    background: url(../images/logistik.jpg) center center/cover no-repeat;
}

#mittelstaendische-unternehmen #industry-sectors-advantage .container:first-of-type .img-box {
    background: url(../images/mittelstaendische-unternehmen.jpg) center center/cover no-repeat;
}

#oeffentliche-verwaltung #industry-sectors-advantage .container:first-of-type .img-box {
    background: url(../images/oeffentliche-verwaltung.jpg) center center/cover no-repeat;
}

#stadtwerke-versorger #industry-sectors-advantage .container:first-of-type .img-box {
    background: url(../images/stadtwerke-versorger.jpg) center center/cover no-repeat;
}

#solutions-advantage .container div:first-of-type {
    width: 58%;
    padding-right: 2%;
}

#solutions-advantage .container div:last-of-type {
    width: 38%;
    padding-left: 2%;
}

#solutions-advantage .container div ul {
    text-align: left;
    padding: 50px 30px 50px 40px;
    background: linear-gradient(to top right, var(--dark-red), var(--bright-red));
    color: var(--white);
    border-radius: 20px;
    list-style: none;
    -webkit-box-shadow: 10px 10px 10px -10px rgba(0, 0, 0, 0.25);
    -moz-box-shadow: 10px 10px 10px -10px rgba(0, 0, 0, 0.25);
    box-shadow: 10px 10px 10px -10px rgba(0, 0, 0, 0.25);
}

#solutions-advantage .container div ul li {
    position: relative;
    padding-left: 30px;
    padding-bottom: 30px;
    color: var(--white)
}

#solutions-advantage .container div ul li:last-of-type {
    padding-bottom: 0;
}

#solutions-advantage .container div ul li:before {
    content: '\2713';
    position: absolute;
    left: 0;
    top: -5px;
    font-size: 1.5rem;
    color: white;
    font-weight: 600;
}

#solutions-advantage .container:last-of-type,
#integration-advantage .container:last-of-type {
    text-align: center;
    margin-top: 5vw;
}

#solutions-advantage .container:last-of-type img {
    width: 50%;
}

#industry-sectors-advantage {
    padding-bottom: 0;
}

#industry-sectors-advantage .container:last-of-type img {
    width: 100px;
    margin-bottom: 1vw;
}

#industry-sectors-advantage h2,
#integration-advantage h2 {
    text-align: center;
}

#integration-advantage .container p {
    column-count: 2;
    margin-bottom: 3vw;
    gap: 5%;
}

#integration-advantage .flex-box {
    justify-content: space-between;
    flex-wrap: wrap;
}

#integration-advantage .flex-box div {
    width: 30%;
    margin: auto;
    margin-bottom: 30px;
    padding: 20px;
    border-radius: 20px;
    background: linear-gradient(to top right, var(--dark-red), var(--bright-red));
    -webkit-box-shadow: 10px 10px 10px -10px rgba(0, 0, 0, 0.25);
    -moz-box-shadow: 10px 10px 10px -10px rgba(0, 0, 0, 0.25);
    box-shadow: 10px 10px 10px -10px rgba(0, 0, 0, 0.25);
}

#integration-advantage .flex-box h3::before {
    content: '\2713';
    position: absolute;
    left: 0;
    top: 0;
    font-size: 1.5rem;
    color: var(--white);
    font-weight: 600;
}

#integration-advantage .flex-box h3 {
    position: relative;
    padding-left: 30px;
    color: var(--white);
    margin-bottom: 0;
}

#industry-sectors-advantage .container:first-of-type div:first-of-type {
    width: 38%;
    height: 35vh;
}

#industry-sectors-advantage .container:first-of-type div:last-of-type {
    width: 58%;
}

#industry-sectors-advantage .container:nth-of-type(2) {
    margin-top: 5vw;
    padding: 3vw 0;
    text-align: center;
    background: linear-gradient(to top right, var(--dark-red), var(--bright-red));
}

#industry-sectors-advantage .container:nth-of-type(2) h3 {
    min-height: 96px;
}

#industry-sectors-advantage .container:nth-of-type(2) h3,
#industry-sectors-advantage .container:nth-of-type(2) p {
    color: var(--white);
}

#industry-sectors-advantage .container:nth-of-type(2) .flex-box .reveal {
    padding: 0 2vw;
}

/******************** COMPANY-INFORMATION **********************/


#company-information .flex-box {
    width: 100%;
}

#company-information .flex-box .container:last-of-type {
    width: 68%;
}

#company-information .flex-box .container:first-of-type {
    margin-right: 4%;
    width: 28%;
}

#company-information .flex-box .container p span {
    font-style: italic;
}

#company-information .flex-box .container svg {
    width: 100%;
}

#company-information .wrap15 .container {
    padding: 20px;
    background: linear-gradient(to top right, var(--dark-red), var(--bright-red));
    width: 100%;
    border-radius: 20px;
    margin-top: 5vw;
    font-weight: 600;
    -webkit-box-shadow: 10px 10px 10px -10px rgba(0, 0, 0, 0.25);
    -moz-box-shadow: 10px 10px 10px -10px rgba(0, 0, 0, 0.25);
    box-shadow: 10px 10px 10px -10px rgba(0, 0, 0, 0.25);
}

#company-information .container table {
    border-collapse: collapse;
    width: 100%;
}

#company-information .container table th,
#company-information .container table td {
    padding: 8px;
    text-align: left;
    color: var(--white);
}

/******************** FEEDBACK AREA **********************/

#feedback-area .flex-box .container {
    position: relative;
    width: 48%;
    padding: 2%;
    background: var(--white);
    margin: 2%;
    border-radius: 20px;
    -webkit-box-shadow: 10px 10px 10px -10px rgba(0, 0, 0, 0.25);
    -moz-box-shadow: 10px 10px 10px -10px rgba(0, 0, 0, 0.25);
    box-shadow: 10px 10px 10px -10px rgba(0, 0, 0, 0.25);
}

#feedback-area .flex-box .container::before {
    content: '';
    position: absolute;
    top: -25px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 60px;
    background-image: url('../images/svg/pin.svg');
    background-size: cover;
}


/********************** INTEGRATION ************************/

#integration-slide {
    padding: 0;
}

#integration-slide .container {
    background: linear-gradient(to top right, var(--dark-red), var(--bright-red));
    width: 100%;
    padding: 30px 0;
}

#integration-slide h2 {
    color: var(--white);
}

#reference-slide {
    position: absolute;
    bottom: 3vw;
    left: 0;
    right: 0;
}

#reference-slide h3 {
    text-align: center;
    color: var(--white);
}

#integration-slide .slideshow-container {
    overflow: hidden;
    position: relative;
    width: 100%;
    height: 100px;
}

#reference-slide .slideshow-container {
    overflow: hidden;
    position: relative;
    width: 100%;
    height: 150px;
}

#integration-slide .slideshow {
    display: flex;
    width: 400%;
    animation: slide 40s linear infinite;
    align-items: center;
    height: 100%;
}

#reference-slide .slideshow {
    display: flex;
    width: 250%;
    animation: slide 40s linear infinite;
    align-items: center;
    height: 100%;
}


#reference-slide .slide,
#integration-slide .slide {
    width: 50%;
    margin: 0 10px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
}

#reference-slide .slide img,
#integration-slide .slide img {
    width: auto;
    height: 50px;
}

#integration-slide .slide svg {
    width: auto;
    height: 50px;
    -webkit-transition: .2s ease-out;
    -o-transition: .2s ease-out;
    transition: .2s ease-out;
}

#reference-slide .slide svg {
    width: auto;
    height: 100px;
    -webkit-transition: .2s ease-out;
    -o-transition: .2s ease-out;
    transition: .2s ease-out;
}

#reference-slide .slide svg {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(6.1px);
    -webkit-backdrop-filter: blur(6.1px);
    padding: 4%;
}


header #reference-slide .slide svg {
    padding: 20px;
    margin: 0 20px;
}

header #reference-slide .slide {
    width: auto;
}

@keyframes slide {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

/********************** FEATURE ************************/

#feature .worko-tabs .state {
    position: absolute;
    left: -10000px;
}

#feature .worko-tabs .flex-tabs {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    gap: 10px;
    background: var(--white);
    border-radius: 20px;
    padding: 2vw;
    -webkit-box-shadow: 10px 10px 10px -10px rgba(0, 0, 0, 0.25);
    -moz-box-shadow: 10px 10px 10px -10px rgba(0, 0, 0, 0.25);
    box-shadow: 10px 10px 10px -10px rgba(0, 0, 0, 0.25);
    transition: 1s;

}

#feature .worko-tabs .flex-tabs .tab {
    flex-grow: 1;
    background: var(--medium-red);
    padding: 10px 20px;
    max-width: 19%;
    border-radius: 50px;
    text-align: center;

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

#feature .worko-tabs .flex-tabs .tab span {
    margin: 0;
    color: var(--white);
    font-weight: 600;
    display: block;
}

#feature .worko-tabs .flex-tabs .tab:hover {
    background: var(--dark-red);
    -webkit-transition: .2s ease-in-out;
    -o-transition: .2s ease-in-out;
    transition: .2s ease-in-out;
}

#feature .worko-tabs .flex-tabs .panel {
    padding: 2%;
    display: none;
    width: 100%;
    flex-basis: auto;
    margin-top: 5vh;

}

#feature .worko-tabs .tab {
    cursor: pointer;
}

#tab-one:checked ~ .tabs #tab-one-label,
#tab-two:checked ~ .tabs #tab-two-label,
#tab-three:checked ~ .tabs #tab-three-label,
#tab-four:checked ~ .tabs #tab-four-label,
#tab-five:checked ~ .tabs #tab-five-label {
    background-color: var(--dark-red);
    cursor: default;
}


#tab-one:checked ~ .tabs #tab-one-panel,
#tab-two:checked ~ .tabs #tab-two-panel,
#tab-three:checked ~ .tabs #tab-three-panel,
#tab-four:checked ~ .tabs #tab-four-panel,
#tab-five:checked ~ .tabs #tab-five-panel {
    display: block;

}

#feature .flex-box div {
    width: 50%;
}

#feature .panel .flex-box div:last-of-type {
    text-align: center;
    vertical-align: middle;
}

#feature .panel .flex-box div img {
    width: 40%;
    height: auto;
}

#elektronische-signaturen #feature .panel .flex-box div img {
    background: linear-gradient(to top right, var(--dark-red), var(--bright-red));
    padding: 50px;
    border-radius: 20px;
    width: 60%;
}

/********************** FEEDBACK ************************/

.slick-slider {
    position: relative;
    display: block;
    box-sizing: border-box;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -khtml-user-select: none;
    -ms-touch-action: pan-y;
    touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
}

.slick-list {
    position: relative;

    display: block;
    overflow-x: hidden;
    overflow-y: hidden;
    margin: 0;
    padding: 20px 0;
}

.slick-list:focus {
    outline: none;
}

.slick-list.dragging {
    cursor: pointer;
}

.slick-slider .slick-track,
.slick-slider .slick-list {
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

.slick-track {
    position: relative;
    top: 0;
    left: 0;

    display: block;
    margin-left: auto;
    margin-right: auto;
}

.slick-track:before,
.slick-track:after {
    display: table;
    content: '';
}

.slick-track:after {
    clear: both;
}

.slick-loading .slick-track {
    visibility: hidden;
}

.slick-slide {
    display: none;
    float: left;
    min-height: 1px;
}

[dir='rtl'] .slick-slide {
    float: right;
}

.slick-slide img {
    display: block;
}

.slick-slide.slick-loading img {
    display: none;
}

.slick-slide.dragging img {
    pointer-events: none;
}

.slick-initialized .slick-slide {
    display: block;
}

.slick-loading .slick-slide {
    visibility: hidden;
}

.slick-vertical .slick-slide {
    display: block;

    height: auto;

    border: 1px solid transparent;
}

.slick-arrow.slick-hidden {
    display: none;
}

.slick-dots li {
    display: inline;
    margin: 0 20px 0 20px;

}

.slick-dots {
    display: block;
    text-align: center;
    margin: 10px 0 0 0;
    position: absolute;
    left: 0;
    right: 0;
}

.slick-next {
    right: -55px;
}

.slick-prev {
    left: -55px;
}

.slick-prev,
.slick-next {
    font-size: 0;
    line-height: 0;
    position: absolute;
    top: 50%;
    display: block;
    width: 20px;
    height: 20px;
    padding: 0;
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);
    cursor: pointer;
    color: transparent;
    border: none;
    outline: none;
    background: transparent;
    z-index: 1;
}

.slick-prev:hover,
.slick-next:hover {
    opacity: 0.8;
    -webkit-transition: .2s ease-in;
    -o-transition: .2s ease-in;
    transition: .2s ease-in;
}

.slick-next::before {
    display: block;
    content: '';
    background-image: url('../images/svg/arrow-right.svg');
    background-repeat: no-repeat;
    background-size: contain;
    height: 40px;
    width: 40px;
}

.slick-prev::before {
    display: block;
    content: '';
    background-image: url('../images/svg/arrow-left.svg');
    background-repeat: no-repeat;
    background-size: contain;
    height: 40px;
    width: 40px;
}

.slick-dots li.slick-active button {
    background: var(--medium-red) !important;
}

.slick-dots button {
    height: 10px;
    width: 10px;
    text-indent: -9999px;
    border: none;
    border-radius: 10px;
    background: var(--gray);
}

.slick-dots button:hover {
    background: var(--medium-red);
    cursor: pointer;
    -webkit-transition: .2s ease-in;
    -o-transition: .2s ease-in;
    transition: .2s ease-in;
}

#feedback h2 {
    text-align: center;
    color: var(--dark-gray);
}

#feedback .feedback-slider .flex-box {
    width: 100%;
    align-items: center;
    justify-content: center;
}

#feedback .feedback-slider .slide {
    background: var(--white);
    padding: 30px;
    border-radius: 20px;
    margin: 0 10px;
    min-height: 350px;
    -webkit-box-shadow: 10px 10px 10px -10px rgba(0, 0, 0, 0.25);
    -moz-box-shadow: 10px 10px 10px -10px rgba(0, 0, 0, 0.25);
    box-shadow: 10px 10px 10px -10px rgba(0, 0, 0, 0.25);
}

#feedback .feedback-slider .push-button {
    justify-content: center;
    margin: auto;
    display: flex;
    width: 200px;
}

#feedback .feedback-slider .flex-box div:first-of-type {
    width: 28%;
    margin-right: 2%;
    padding: 2%;
}

#feedback .feedback-slider .flex-box div:last-of-type {
    width: 68%;
    margin-left: 2%;

}

#feedback .feedback-slider .flex-box div img {
    width: 100%;

}

/********************** TIMELINE ************************/


#timeline h2 {
    text-align: center;
}

#timeline .cd-horizontal-timeline {
    opacity: 0;
    margin: 2em auto;
    -webkit-transition: opacity 0.2s;
    -moz-transition: opacity 0.2s;
    transition: opacity 0.2s;

}

#timeline .cd-horizontal-timeline::before {
    content: 'mobile';
    display: none;
}

#timeline .cd-horizontal-timeline.loaded {
    opacity: 1;
}

#timeline .cd-horizontal-timeline .timeline {
    position: relative;
    height: 120px;
    width: 90%;
    max-width: 800px;
    margin: 0 auto;
    z-index: 3;
}

#timeline .cd-horizontal-timeline .events-wrapper {
    position: relative;
    height: 100%;
    margin: 0 40px;
    overflow: hidden;
}

#timeline .cd-horizontal-timeline .events-wrapper::before {
    left: 0;
    background-image: -webkit-linear-gradient(left, var(--white), rgba(248, 248, 248, 0));

}

#timeline .cd-horizontal-timeline .events-wrapper::after {
    right: 0;
    background-image: -webkit-linear-gradient(right, var(--white), rgba(248, 248, 248, 0));
}

#timeline .cd-horizontal-timeline .events {
    position: absolute;
    z-index: 1;
    left: 0;
    top: 60px;
    height: 2px;
    background: var(--white);
    -webkit-transition: -webkit-transform 0.4s;
    -moz-transition: -moz-transform 0.4s;
    transition: transform 0.4s;
}

#timeline .cd-horizontal-timeline .filling-line {
    position: absolute;
    z-index: 1;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    background-color: var(--medium-red);
    -webkit-transform: scaleX(0);
    -moz-transform: scaleX(0);
    -ms-transform: scaleX(0);
    -o-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transform-origin: left center;
    -moz-transform-origin: left center;
    -ms-transform-origin: left center;
    -o-transform-origin: left center;
    transform-origin: left center;
    -webkit-transition: -webkit-transform 0.3s;
    -moz-transition: -moz-transform 0.3s;
    transition: transform 0.3s;
}

#timeline .cd-horizontal-timeline .events a {
    position: absolute;
    bottom: 0;
    z-index: 2;
    text-align: center;
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0);
}

#timeline .cd-horizontal-timeline .events a::after {
    content: '';
    position: absolute;
    left: 50%;
    right: auto;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
    bottom: -15px;
    height: 12px;
    width: 12px;
    border-radius: 50%;
    background-color: var(--white);
    -webkit-transition: background-color 0.3s, border-color 0.3s;
    -moz-transition: background-color 0.3s, border-color 0.3s;
    transition: background-color 0.3s, border-color 0.3s;
}

#timeline .no-touch .cd-horizontal-timeline .events a:hover::after {
    background-color: var(--medium-red);
    border-color: var(--medium-red);
}

#timeline .cd-horizontal-timeline .events a.selected {
    pointer-events: none;
}

#timeline .cd-horizontal-timeline .events a.selected::after {
    background-color: var(--medium-red);
    border-color: var(--medium-red);
}

#timeline .cd-horizontal-timeline .events a.older-event::after {
    border-color: var(--medium-red);
}

#timeline .cd-horizontal-timeline li {
    list-style: none;
}

#timeline .cd-horizontal-timeline .next:hover,
#timeline .cd-horizontal-timeline .prev:hover {
    background: var(--medium-red);
    border: 1px solid var(--medium-red);
    -webkit-transition: .2s ease-in;
    -o-transition: .2s ease-in;
    transition: .2s ease-in;
}

#timeline .cd-timeline-navigation a {

    position: absolute;
    z-index: 1;
    top: 50%;
    bottom: auto;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    height: 34px;
    width: 34px;
    border-radius: 50%;
    border: 2px solid var(--white);
    overflow: hidden;
    color: transparent;
    text-indent: 100%;
    white-space: nowrap;
    -webkit-transition: border-color 0.3s;
    -moz-transition: border-color 0.3s;
    transition: border-color 0.3s;
}

#timeline .cd-timeline-navigation a::after {
    content: '';
    position: absolute;
    height: 34px;
    width: 34px;
    left: 50%;
    top: 50%;
    bottom: auto;
    right: auto;
    -webkit-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    -o-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    background: url(../images/svg/arrow-right.svg);
    background-repeat: no-repeat;
    background-size: contain;

}

#timeline .cd-timeline-navigation a.prev {
    left: 0;
    -webkit-transform: translateY(-50%) rotate(180deg);
    -moz-transform: translateY(-50%) rotate(180deg);
    -ms-transform: translateY(-50%) rotate(180deg);
    -o-transform: translateY(-50%) rotate(180deg);
    transform: translateY(-50%) rotate(180deg);
}

#timeline .cd-timeline-navigation a.next {
    right: 0;
}

#timeline .no-touch .cd-timeline-navigation a:hover {}

#timeline .cd-timeline-navigation a.inactive {
    cursor: not-allowed;
}

#timeline .no-touch .cd-timeline-navigation a.inactive:hover {
    border-color: var(--white);
}

#timeline .cd-horizontal-timeline .events-content {
    position: relative;
    width: 80%;
    margin: auto;
    -webkit-transition: height 0.4s;
    -moz-transition: height 0.4s;
    transition: height 0.4s;
}

#timeline .cd-horizontal-timeline .events-content li {
    position: absolute;
    z-index: 1;
    width: 100%;
    left: 0;
    top: 0;
    -webkit-transform: translateX(-100%);
    -moz-transform: translateX(-100%);
    -ms-transform: translateX(-100%);
    -o-transform: translateX(-100%);
    transform: translateX(-100%);
    padding: 0 5%;
    opacity: 0;
    -webkit-animation-duration: 0.4s;
    -moz-animation-duration: 0.4s;
    animation-duration: 0.4s;
    -webkit-animation-timing-function: ease-in-out;
    -moz-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
}

#timeline .cd-horizontal-timeline .events-content li.selected {
    position: relative;
    z-index: 2;
    opacity: 1;
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0);
}

#timeline .cd-horizontal-timeline .events-content li.selected {
    position: relative;
    padding: 20px;
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    margin-top: 40px;
}

/* Create the speech bubble tail pointing upwards */
#timeline .cd-horizontal-timeline .events-content li.selected::after {
    content: '';
    position: absolute;
    top: -180px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border: 100px solid transparent;
    border-radius: 20px;
    border-bottom-color: var(--white);
    z-index: 1;
}


#timeline .cd-horizontal-timeline .events-content .selected {
    background: var(--white);
    padding: 30px;
    border-radius: 20px;

}

#timeline .cd-horizontal-timeline .events-content div img {
    height: 250px;
    margin-right: 20px;
}

#timeline .cd-horizontal-timeline .events-content li.enter-right,
#timeline .cd-horizontal-timeline .events-content li.leave-right {
    -webkit-animation-name: cd-enter-right;
    -moz-animation-name: cd-enter-right;
    animation-name: cd-enter-right;
}

#timeline .cd-horizontal-timeline .events-content li.enter-left,
#timeline .cd-horizontal-timeline .events-content li.leave-left {
    -webkit-animation-name: cd-enter-left;
    -moz-animation-name: cd-enter-left;
    animation-name: cd-enter-left;
}

#timeline .cd-horizontal-timeline .events-content li.leave-right,
#timeline .cd-horizontal-timeline .events-content li.leave-left {
    -webkit-animation-direction: reverse;
    -moz-animation-direction: reverse;
    animation-direction: reverse;
}

#timeline .cd-horizontal-timeline .events-content li > * {
    max-width: 1200px;
    margin: 0 auto;
}

#timeline .cd-horizontal-timeline .events-content em {
    display: block;
    margin: 10px auto;
    color: var(--medium-red);
}

#timeline .cd-horizontal-timeline .events-content em::before {
    content: '- ';
}

@-webkit-keyframes cd-enter-right {
    0% {
        opacity: 0;
        -webkit-transform: translateX(100%);
    }

    100% {
        opacity: 1;
        -webkit-transform: translateX(0%);
    }
}

@-moz-keyframes cd-enter-right {
    0% {
        opacity: 0;
        -moz-transform: translateX(100%);
    }

    100% {
        opacity: 1;
        -moz-transform: translateX(0%);
    }
}

@keyframes cd-enter-right {
    0% {
        opacity: 0;
        -webkit-transform: translateX(100%);
        -moz-transform: translateX(100%);
        -ms-transform: translateX(100%);
        -o-transform: translateX(100%);
        transform: translateX(100%);
    }

    100% {
        opacity: 1;
        -webkit-transform: translateX(0%);
        -moz-transform: translateX(0%);
        -ms-transform: translateX(0%);
        -o-transform: translateX(0%);
        transform: translateX(0%);
    }
}

@-webkit-keyframes cd-enter-left {
    0% {
        opacity: 0;
        -webkit-transform: translateX(-100%);
    }

    100% {
        opacity: 1;
        -webkit-transform: translateX(0%);
    }
}

@-moz-keyframes cd-enter-left {
    0% {
        opacity: 0;
        -moz-transform: translateX(-100%);
    }

    100% {
        opacity: 1;
        -moz-transform: translateX(0%);
    }
}

@keyframes cd-enter-left {
    0% {
        opacity: 0;
        -webkit-transform: translateX(-100%);
        -moz-transform: translateX(-100%);
        -ms-transform: translateX(-100%);
        -o-transform: translateX(-100%);
        transform: translateX(-100%);
    }

    100% {
        opacity: 1;
        -webkit-transform: translateX(0%);
        -moz-transform: translateX(0%);
        -ms-transform: translateX(0%);
        -o-transform: translateX(0%);
        transform: translateX(0%);
    }
}


/********************** SER/DOXIS INFO ************************/

#ser-info .stoerer,
#doxis-info .stoerer {
    position: relative;
    background: var(--gray);
    border-radius: 30px;
    padding: 50px 50px 30px 50px;
    -webkit-box-shadow: 10px 10px 10px -10px rgba(0, 0, 0, 0.25);
    -moz-box-shadow: 10px 10px 10px -10px rgba(0, 0, 0, 0.25);
    box-shadow: 10px 10px 10px -10px rgba(0, 0, 0, 0.25);
}

#index #doxis-info .stoerer {
    background: var(--white);
}

#doxis-info .stoerer.integration {
    background: var(--white);
}

#doxis-info .stoerer svg {
    position: absolute;
    width: 100px;
    height: auto;
    top: -40px;
    right: 10%;
}

#ser-info .stoerer svg {
    position: absolute;
    width: 150px;
    height: auto;
    top: -20px;
    right: 10%;
}

#ser-info .stoerer p,
#doxis-info .stoerer p {
    column-count: 2;
    column-gap: 20px;
    margin-bottom: 30px;
}

/********************** TEAM / NEWS INFO ************************/

#team-info .stoerer,
#news-info .stoerer {
    background: var(--white);
    border-radius: 30px;
    padding: 50px 50px 30px 50px;
    -webkit-box-shadow: 10px 10px 10px -10px rgba(0, 0, 0, 0.25);
    -moz-box-shadow: 10px 10px 10px -10px rgba(0, 0, 0, 0.25);
    box-shadow: 10px 10px 10px -10px rgba(0, 0, 0, 0.25);
}

#team-info .stoerer .flex-box div,
#news-info .stoerer .flex-box div {
    width: 48%;
    margin: 0 1%;
}

#team-info .stoerer .a-box,
#news-info .stoerer .a-box {
    text-align: center;
}

#team-info .img-box,
#news-info .img-box {
    border-radius: 20px;
}

#team-info .img-box {
    background: url(../images/hk-team.jpg) center center/cover no-repeat;
}


#news-info .img-box {
    background: url(../images/header/news.jpg) center center/cover no-repeat;
}


#team-info .stoerer .flex-box,
#news-info .stoerer .flex-box {
    margin-bottom: 40px;
}

/********************** SOCIAL WORK ************************/

#social-work .slick-slide img {
    width: 400px;
    padding: 0 20px;
}

#social-work .slick-dots {
    visibility: hidden;
}

/********************** WHITEPAPER ************************/

.info-banner {
    background: linear-gradient(to top right, var(--dark-red), var(--bright-red));
    position: relative;
    color: var(--white);
    padding: 50px 0;
}

.info-banner h3 {
    color: var(--white);
}

.info-banner p {
    color: var(--white);
}

.info-banner img {
    width: 500px;
    position: absolute;
    top: -70px;
    right: 5%;
}

.info-banner .stoerer {
    text-align: center;
}

.info-banner button.formsapp-popup-button {
    padding: 10px 20px;
    border-radius: 200px;
    font-weight: 600;
    margin: 0;
    color: var(--medium-red) !important;
    background: var(--white);
    font-family: 'Raleway' !important;
    font-size: 1.2em;
}

.info-banner button.formsapp-popup-button:hover {
    background: var(--dark-gray) !important;
    color: var(--white) !important;
    -webkit-transition: .2s ease-in-out;
    -o-transition: .2s ease-in-out;
    transition: .2s ease-in-out;
}

/********************** APPOINTMENT ************************/

#appointment h2 {
    text-align: center;
}

#appointment .flex-box .text-box {
    background: var(--white);
    border-radius: 20px;
    padding: 25px;
    -webkit-box-shadow: 10px 10px 10px -10px rgba(0, 0, 0, 0.25);
    -moz-box-shadow: 10px 10px 10px -10px rgba(0, 0, 0, 0.25);
    box-shadow: 10px 10px 10px -10px rgba(0, 0, 0, 0.25);
}

#appointment .flex-box .container:first-of-type {
    width: 28%;
    margin-right: 2%;
}

#appointment .flex-box .container:last-of-type {
    width: 68%;
}

#appointment .flex-box .img-box {
    height: 100%;
    background: url(../images/lena-potthast.jpg) center center/cover no-repeat;
    border-radius: 20px;
    margin-bottom: 2%;
    -webkit-box-shadow: 10px 10px 10px -10px rgba(0, 0, 0, 0.25);
    -moz-box-shadow: 10px 10px 10px -10px rgba(0, 0, 0, 0.25);
    box-shadow: 10px 10px 10px -10px rgba(0, 0, 0, 0.25);
}

#appointment .flex-box a svg {
    height: 15px;
    width: auto;
    margin-right: 10px;
}

#appointment .stoerer {
    justify-content: center;
    margin-top: 2vw;
}

#appointment .stoerer a {
    margin-left: 3%;
    color: var(--dark-gray);
    margin-bottom: 0;
}

#appointment .stoerer a:hover {
    color: var(--medium-red);
    -webkit-transition: .2s ease-in-out;
    -o-transition: .2s ease-in-out;
    transition: .2s ease-in-out;
}

.brevo-overlay .brevo-content {
    max-width: 1100px !important;
    border-radius: 20px !important;
}

.brevo-overlay .brevo-content iframe {
    border-radius: 20px !important;
}

/********************** INTERESTED IN ************************/

#interested-in {
    text-align: center;

}

#interested-in h2 {
    color: var(--dark-gray);
    text-align: center;
}

#interested-in h3 {
    min-height: 80px;
}

#interested-in p {
    color: var(--dark-gray);
    font-weight: 600;
    min-height: 140px;
}

#interested-in .flex-box {
    margin: auto;
    margin-top: 50px;
}

#interested-in .flex-box div {
    width: 30%;
    margin: 0 1%;
    text-align: center;
}

#interested-in .flex-box img {
    width: 100%;
    height: auto;
    border-radius: 20px;
    max-width: 300px;
    margin: 10px 0 30px 0;
    background: linear-gradient(to top right, var(--dark-red), var(--bright-red));
}

#interested-in img[src$=".svg"] {
    padding: 20px;
    min-height: 200px;
}

#interested-in .flex-box {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    gap: 20px;
}

#interested-in .flex-box div {
    background: var(--white);
    padding: 30px;
    border-radius: 20px;
    -webkit-box-shadow: 10px 10px 10px -10px rgba(0, 0, 0, 0.25);
    -moz-box-shadow: 10px 10px 10px -10px rgba(0, 0, 0, 0.25);
    box-shadow: 10px 10px 10px -10px rgba(0, 0, 0, 0.25);
}

#interested-in a {
    display: inline-block;
    line-height: 0;
    padding: 20px 20px;
}

#interested-in .flex-box div {
    flex: 1;
}

/********************** FAQ ************************/
#faq h2,
#accordion h2 {
    text-align: center;
}

#faq .card-wrapper {
    margin: 2vw 0 5vw 0;
}

#faq .faq-card a,
#accordion .faq-card a {
    text-decoration: underline;
}

#faq .content-cc,
#accordion .content-cc {
    display: flex;
    justify-content: center;
    align-items: center;
}

#faq .faq-ilustrations,
#accordion .faq-ilustrations {
    position: relative;
}

#faq .faq-accordion,
#accordion .faq-accordion {
    padding: 10px 20px;
    background: var(--white);
    margin-bottom: 20px;
    border-radius: 20px;
    -webkit-box-shadow: 0px 5px 15px -5px rgba(0, 0, 0, 0.25);
    -moz-box-shadow: 0px 5px 15px -5px rgba(0, 0, 0, 0.25);
    box-shadow: 0px 5px 15px -5px rgba(0, 0, 0, 0.25);
    cursor: pointer;
}

#faq .faq-accordion:hover,
#accordion .faq-accordion:hover {
    text-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    -webkit-transition: .2s ease-in;
    -o-transition: .2s ease-in;
    transition: .2s ease-in;
}

#faq .faq-accordion-content p,
#accordion .faq-accordion-content p {
    padding-top: 20px;
}

#faq input.tgg-title,
#accordion input.tgg-title {
    appearance: unset;
    all: unset;
}

#faq .faq-accordion-title label,
#accordion .faq-accordion-title label {
    display: flex;
    align-items: center;
    cursor: pointer;
    padding: 20px 0;
    margin-top: -15px;
}

#faq .faq-accordion-title p,
#accordion .faq-accordion-title p {
    color: var(--medium-red);
    font-weight: 600;
    margin-bottom: 0;
    margin-top: -45px;
    ;
    position: relative;
    z-index: -1;
}

#faq .faq-accordion-title span,
#accordion .faq-accordion-title span {
    margin-left: auto;
    transition: transform .4s ease-in-out;
}

#faq .faq-accordion-title span img,
#accordion .faq-accordion-title span img {
    width: 15px;
    height: auto;
}

#faq .faq-accordion-content,
#accordion .faq-accordion-content {
    color: var(--dark-gray);
    overflow: hidden;
    max-height: 0;
    transition: max-height .4s ease-in-out;
}

#faq .faq-accordion-title:hover p,
#accordion .faq-accordion-title:hover p {
    color: var(--dark-red);
    -webkit-transition: .2s ease-in;
    -o-transition: .2s ease-in;
    transition: .2s ease-in;
}

#faq .faq-accordion .tgg-title:checked + div > label > p,
#accordion .faq-accordion .tgg-title:checked + div > label > p {
    font-weight: 600;
}

#faq .faq-accordion .tgg-title:checked + div > label > span,
#accordion .faq-accordion .tgg-title:checked + div > label > span {
    will-change: transform;
    transform: rotate(180deg);
}

#faq .faq-accordion .tgg-title:checked ~ .faq-accordion-content,
#accordion .faq-accordion .tgg-title:checked ~ .faq-accordion-content {
    will-change: max-height;
    max-height: 500px;
}

/********************** ADVANTAGE SOLUTION ************************/

#advantage-solution .container {
    padding: 50px 5% 30px 5%;
    background: linear-gradient(to top right, var(--dark-red), var(--bright-red));
    border-radius: 20px;
    margin: 50px 0;
}

#advantage-solution .container .flex-box div:first-of-type {
    width: 50px;
    margin-right: 40px;
}


#advantage-solution .container .flex-box div h3,
#advantage-solution .container .flex-box div p {
    color: var(--white);
    text-align: left;
}

#advantage-solution .container .flex-box:first-of-type div p,
#advantage-solution .container .flex-box:nth-of-type(2) div p {
    margin-bottom: 50px;

}

/********************** ADVANTAGE INTEGRATION ************************/


#advantage-integration .container svg path {
    fill: var(--medium-red);

}

#advantage-integration h2 {
    text-align: center;
}

#advantage-integration .text-box {
    padding: 30px 5% 30px 5%;
    background: linear-gradient(to top right, var(--dark-red), var(--bright-red));
    border-radius: 20px;
    color: var(--white);
}

#advantage-integration .container {
    text-align: center;
    margin-top: 5vw;
}

#advantage-integration .container div {
    padding: 0 2%;
    width: 100%;
}

#advantage-integration .container img {
    width: 100px;
    margin-bottom: 2rem;
    padding: 15px;
    background: linear-gradient(to top right, var(--dark-red), var(--bright-red));
    border-radius: 20px;
}
}

/********************** OVERVIEW SPECIAL SOLUTION ************************/

#overview-special-solution h2,
#overview-special-integration h2 {
    text-align: center;
    margin-bottom: 50px;
}

#overview-special-solution .card-container,
#overview-special-integration .card-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

#overview-special-solution .card,
#overview-special-integration .card {
    flex: 0 0 calc(33.333% - 3.333%);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    margin-bottom: 50px;
    background: var(--white);
    transition: transform 0.3s;
    border-radius: 20px;
    max-width: 33%;
    min-width: 300px;
}

#overview-special-solution .card div,
#overview-special-integration .card div {
    padding: 20px 20px 40px 20px;

}

#overview-special-solution .card p,
#overview-special-integration .card p {
    margin-bottom: 30px;
}

#overview-special-solution .card .img-box {
    max-width: 100%;
    height: 20vh;
    border-radius: 20px 20px 0 0;
}

#ecm #overview-special-solution .card:nth-of-type(1) .img-box {
    background: url(../images/header/dokumentenmanagement.jpg) center center/cover no-repeat;
}

#ecm #overview-special-solution .card:nth-of-type(2) .img-box {
    background: url(../images/header/workflow.jpg) center center/cover no-repeat;
}

#ecm #overview-special-solution .card:nth-of-type(3) .img-box {
    background: url(../images/header/elektronische-akte.jpg) center center/cover no-repeat;
}

#ecm #overview-special-solution .card:nth-of-type(4) .img-box {
    background: url(../images/header/posteingang.jpg) center center/cover no-repeat;
}

#ecm #overview-special-solution .card:nth-of-type(5) .img-box {
    background: url(../images/header/fahrzeugmanagement.jpg) center center/cover no-repeat;
}

#ecm #overview-special-solution .card:nth-of-type(6) .img-box {
    background: url(../images/header/qualitaetsmanagement.jpg) center center/cover no-repeat;
}

#ecm #overview-special-solution .card:nth-of-type(7) .img-box {
    background: url(../images/header/revisionssicherheit.jpg) center center/cover no-repeat;
}

#kunden-und-lieferantenmanagement #overview-special-solution .card:nth-of-type(1) .img-box {
    background: url(../images/header/rechnungsverarbeitung.jpg) center center/cover no-repeat;
}

#kunden-und-lieferantenmanagement #overview-special-solution .card:nth-of-type(2) .img-box {
    background: url(../images/header/kundenakte.jpg) center center/cover no-repeat;
}

#kunden-und-lieferantenmanagement #overview-special-solution .card:nth-of-type(3) .img-box {
    background: url(../images/header/lieferantenakte.jpg) center center/cover no-repeat;
}

#kunden-und-lieferantenmanagement #overview-special-solution .card:nth-of-type(4) .img-box {
    background: url(../images/header/auftragsbestaetigung.jpg) center center/cover no-repeat;
}

#kunden-und-lieferantenmanagement #overview-special-solution .card:nth-of-type(5) .img-box {
    background: url(../images/header/vertragsmanagement.jpg) center center/cover no-repeat;
}

#kunden-und-lieferantenmanagement #overview-special-solution .card:nth-of-type(6) .img-box {
    background: url(../images/header/collaboration.jpg) center center/cover no-repeat;
}

#digitales-personalmanagement #overview-special-solution .card:nth-of-type(1) .img-box {
    background: url(../images/header/personalakte.jpg) center center/cover no-repeat;
}

#digitales-personalmanagement #overview-special-solution .card:nth-of-type(2) .img-box {
    background: url(../images/header/onboarding-workflow.jpg) center center/cover no-repeat;
}

#digitales-personalmanagement #overview-special-solution .card:nth-of-type(3) .img-box {
    background: url(../images/header/bewerberworkflow.jpg) center center/cover no-repeat;
}

#services #overview-special-solution .card:nth-of-type(1) .img-box {
    background: url(../images/header/managed-service.jpg) center center/cover no-repeat;
}

#services #overview-special-solution .card:nth-of-type(2) .img-box {
    background: url(../images/header/services.jpg) center center/cover no-repeat;
}

#services #overview-special-solution .card:nth-of-type(3) .img-box {
    background: url(../images/header/doxis-as-a-service.jpg) center center/cover no-repeat;
}

#services #overview-special-solution .card:nth-of-type(4) .img-box {
    background: url(../images/header/zertifizierung.jpg) center center/cover no-repeat;
}

#ica #overview-special-solution .card:nth-of-type(1) .img-box {
    background: url(../images/header/doxis-intelligent-content-automation.jpg) center center/cover no-repeat;
}

#ica #overview-special-solution .card:nth-of-type(2) .img-box {
    background: url(../images/header/doxis-fast-starters.jpg) center center/cover no-repeat;
}

#ica #overview-special-solution .card:nth-of-type(3) .img-box {
    background: url(../images/header/content-services.jpg) center center/cover no-repeat;
}

#ica #overview-special-solution .card:nth-of-type(4) .img-box {
    background: url(../images/header/content-understanding.jpg) center center/cover no-repeat;
}

#ica #overview-special-solution .card:nth-of-type(5) .img-box {
    background: url(../images/header/archivierung.jpg) center center/cover no-repeat;
}

#ica #overview-special-solution .card:nth-of-type(6) .img-box {
    background: url(../images/header/prozessautomatisierung.jpg) center center/cover no-repeat;
}



#overview-special-integration .card .img-box {
    background: linear-gradient(to top right, var(--dark-red), var(--bright-red));
    border-radius: 20px 20px 0 0;
    max-width: 100%;
    height: 20vh;
    position: relative;
}

#overview-special-solution .card a,
#overview-special-integration .card a {
    padding: 10px 20px;
    border-radius: 20px;
}

#overview-special-integration .card svg {
    height: 75%;
    width: 75%;
    margin: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/********************** OVERVIEW SOLUTION ************************/

#branche #overview-solution .flex-box:first-of-type,
#leistungen #overview-solution .flex-box:first-of-type {
    padding-top: 5vw;
}

#overview-solution h2 {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    height: 3rem;
    margin-bottom: 2vw;
    margin-top: -3vw;
}

#overview-solution .list {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-left: 20px;
    margin-top: -3rem;
    padding: 0;
}

#overview-solution .list span {
    text-align: center;
    line-height: 3rem;

}

#overview-solution .flex-box {
    display: flex;
    flex-wrap: wrap;
    gap: 50px;
    margin-bottom: 3vw;
    align-items: center;
    justify-content: space-between;
}

#overview-solution .flex-box .img-box {
    flex: 1;
    min-width: 250px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    height: 30vw;
}

#loesungen #overview-solution .flex-box:nth-of-type(1) .img-box {
    background: url(../images/header/ecm.jpg) center center/cover no-repeat;
}

#loesungen #overview-solution .flex-box:nth-of-type(2) .img-box {
    background: url(../images/header/ica.jpg) center center/cover no-repeat;
}

#loesungen #overview-solution .flex-box:nth-of-type(3) .img-box {
    background: url(../images/header/kunden-und-lieferantenmanagement.jpg) center center/cover no-repeat;
}

#loesungen #overview-solution .flex-box:nth-of-type(4) .img-box {
    background: url(../images/header/digitales-personalmanagement.jpg) center center/cover no-repeat;
}

#loesungen #overview-solution .flex-box:nth-of-type(5) .img-box {
    background: url(../images/header/services.jpg) center center/cover no-repeat;
}



#leistungen #overview-solution .flex-box:nth-of-type(1) .img-box {
    background: url(../images/header/beratung.jpg) center center/cover no-repeat;
}

#leistungen #overview-solution .flex-box:nth-of-type(2) .img-box {
    background: url(../images/header/implementierung.jpg) center center/cover no-repeat;
}

#leistungen #overview-solution .flex-box:nth-of-type(3) .img-box {
    background: url(../images/header/schulung.jpg) center center/cover no-repeat;
}

#leistungen #overview-solution .flex-box:nth-of-type(4) .img-box {
    background: url(../images/header/support.jpg) center center/cover no-repeat;
}



#branche #overview-solution .flex-box:nth-of-type(1) .img-box {
    background: url(../images/header/kleinunternehmen-startup.jpg) center center/cover no-repeat;
}

#branche #overview-solution .flex-box:nth-of-type(2) .img-box {
    background: url(../images/header/mittelstaendische-unternehmen.jpg) center center/cover no-repeat;
}

#branche #overview-solution .flex-box:nth-of-type(3) .img-box {
    background: url(../images/header/industrie-fertigung.jpg) center center/cover no-repeat;
}

#branche #overview-solution .flex-box:nth-of-type(4) .img-box {
    background: url(../images/header/handel.jpg) center center/cover no-repeat;
}

#branche #overview-solution .flex-box:nth-of-type(5) .img-box {
    background: url(../images/header/logistik.jpg) center center/cover no-repeat;
}

#branche #overview-solution .flex-box:nth-of-type(6) .img-box {
    background: url(../images/header/anlagen-und-maschinenbau.jpg) center center/cover no-repeat;
}

#branche #overview-solution .flex-box:nth-of-type(7) .img-box {
    background: url(../images/header/stadtwerke-versorger.jpg) center center/cover no-repeat;
}

#branche #overview-solution .flex-box:nth-of-type(8) .img-box {
    background: url(../images/header/oeffentliche-verwaltung.jpg) center center/cover no-repeat;
}

#branche #overview-solution .flex-box:nth-of-type(9) .img-box {
    background: url(../images/header/gesundheitswesen.jpg) center center/cover no-repeat;
}

#branche #overview-solution .flex-box:nth-of-type(10) .img-box {
    background: url(../images/header/dienstleister.jpg) center center/cover no-repeat;
}


#overview-solution .flex-box div {
    flex: 1;
    min-width: 300px;
    border-radius: 20px;
}

#overview-solution .flex-box div p {
    margin-bottom: 30px;
}

#overview-solution .flex-box div span {
    color: var(--white);
    text-align: center;
}


#overview-solution .flex-box div a {
    padding: 10px 20px;
    border-radius: 20px;
}

#overview-solution .flex-box div img {
    max-width: 100%;
    height: auto;

}

#branche #overview-solution .flex-box .img-box:first-of-type,
#branche #overview-solution .flex-box .img-box:nth-of-type(3),
#branche #overview-solution .flex-box .img-box:nth-of-type(5),
#branche #overview-solution .flex-box .text-box:first-of-type,
#branche #overview-solution .flex-box .text-box:nth-of-type(3),
#branche #overview-solution .flex-box .text-box:nth-of-type(5),
#leistungen #overview-solution .flex-box .img-box:first-of-type,
#leistungen #overview-solution .flex-box .img-box:nth-of-type(3),
#leistungen #overview-solution .flex-box .img-box:nth-of-type(5),
#leistungen #overview-solution .flex-box .text-box:first-of-type,
#leistungen #overview-solution .flex-box .text-box:nth-of-type(3),
#leistungen #overview-solution .flex-box .text-box:nth-of-type(5) {
    border-radius: 30px 0 0 30px;
    -webkit-box-shadow: 0px 5px 15px -5px rgba(0, 0, 0, 0.25);
    -moz-box-shadow: 0px 5px 15px -5px rgba(0, 0, 0, 0.25);
    box-shadow: 0px 5px 15px -5px rgba(0, 0, 0, 0.25);
}

#branche #overview-solution .flex-box .img-box:nth-of-type(2),
#branche #overview-solution .flex-box .img-box:nth-of-type(4),
#branche #overview-solution .flex-box .text-box:nth-of-type(2),
#branche #overview-solution .flex-box .text-box:nth-of-type(4),
#leistungen #overview-solution .flex-box .img-box:nth-of-type(2),
#leistungen #overview-solution .flex-box .img-box:nth-of-type(4),
#leistungen #overview-solution .flex-box .text-box:nth-of-type(2),
#leistungen #overview-solution .flex-box .text-box:nth-of-type(4) {
    border-radius: 0 30px 30px 0;
    -webkit-box-shadow: 0px 5px 15px -5px rgba(0, 0, 0, 0.25);
    -moz-box-shadow: 0px 5px 15px -5px rgba(0, 0, 0, 0.25);
    box-shadow: 0px 5px 15px -5px rgba(0, 0, 0, 0.25);
}

#branche #overview-solution .flex-box .text-box,
#leistungen #overview-solution .flex-box .text-box {
    background: var(--white);
    height: 20vw;
    padding: 25px;
}

#branche #overview-solution .flex-box .img-box,
#leistungen #overview-solution .flex-box .img-box {
    height: 20vw;
}

#branche #overview-solution .flex-box,
#leistungen #overview-solution .flex-box {
    gap: 0;

}

/********************** OVERVIEW FEEDBACK ************************/

#overview-feedback h2,
#overview-team h2 {
    text-align: center;
}

#overview-feedback .container,
#overview-team .container {
    width: 100%;
    margin-bottom: 5vw;
    text-align: center;

}

#overview-feedback select,
#overview-team select {
    padding: 10px 20px;
    border-radius: 20px;
    border: none;
    background: var(--white);
    color: var(--dark-gray);
    cursor: pointer;
    -webkit-box-shadow: 0px 5px 15px -5px rgba(0, 0, 0, 0.25);
    -moz-box-shadow: 0px 5px 15px -5px rgba(0, 0, 0, 0.25);
    box-shadow: 0px 5px 15px -5px rgba(0, 0, 0, 0.25);
    text-align: center;
    margin: 0 5%;
    width: 20%;
}

#overview-feedback select:focus,
#overview-team select:focus {
    outline: none;
    -webkit-box-shadow: 0px 5px 15px -5px rgba(0, 0, 0, 0.25);
    -moz-box-shadow: 0px 5px 15px -5px rgba(0, 0, 0, 0.25);
    box-shadow: 0px 5px 15px -5px rgba(0, 0, 0, 0.25);
}


#overview-feedback #resetFilters,
#overview-team #resetDepartmentFilters {
    padding: 10px 20px;
    background-color: var(--medium-red);
    color: var(--white);
    border: none;
    border-radius: 20px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    -webkit-box-shadow: 0px 5px 15px -5px rgba(0, 0, 0, 0.25);
    -moz-box-shadow: 0px 5px 15px -5px rgba(0, 0, 0, 0.25);
    box-shadow: 0px 5px 15px -5px rgba(0, 0, 0, 0.25);
    margin: 0 5%;
    width: 20%;

}

#overview-feedback #resetFilters:hover,
#overview-team #resetDepartmentFilters:hover {
    background-color: var(--dark-gray);
}

#overview-feedback #noMatchMessage,
#overview-team #noMatch {
    margin-top: 20px;
    text-align: center;
}

#overview-feedback .reference-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    justify-content: left;
}

#overview-team .reference-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    justify-content: center;
}

#overview-feedback .reference-item {
    background-color: var(--white);
}

#overview-feedback .reference-item,
#overview-team .reference-item {

    border-radius: 20px;
    width: calc(33.333% - 40px);
    -webkit-box-shadow: 0px 5px 15px -5px rgba(0, 0, 0, 0.25);
    -moz-box-shadow: 0px 5px 15px -5px rgba(0, 0, 0, 0.25);
    box-shadow: 0px 5px 15px -5px rgba(0, 0, 0, 0.25);
}

#overview-team .reference-item {
    width: 300px;
    height: 300px;
    position: relative;
    filter: grayscale(1);
}

#overview-team .reference-item:hover {
    filter: grayscale(0);
}

#overview-team .reference-item.ada {
    background: url(../images/team/ADA.jpg) center center/cover no-repeat;
}

#overview-team .reference-item.ame {
    background: url(../images/team/plazhalter-weiblich.jpg) center center/cover no-repeat;
}

#overview-team .reference-item.awe {
    background: url(../images/team/AWE.jpg) center center/cover no-repeat;
}

#overview-team .reference-item.bwa {
    background: url(../images/team/BWA.jpg) center center/cover no-repeat;
}

#overview-team .reference-item.cro {
    background: url(../images/team/platzhalter-maennlich.jpg) center center/cover no-repeat;
}

#overview-team .reference-item.fma {
    background: url(../images/team/FMA.jpg) center center/cover no-repeat;
}

#overview-team .reference-item.fni {
    background: url(../images/team/platzhalter-maennlich.jpg) center center/cover no-repeat;
}

#overview-team .reference-item.jeg {
    background: url(../images/team/JEG.jpg) center center/cover no-repeat;
}

#overview-team .reference-item.jke {
    background: url(../images/team/JKE.jpg) center center/cover no-repeat;
}

#overview-team .reference-item.jwo {
    background: url(../images/team/platzhalter-maennlich.jpg) center center/cover no-repeat;
}

#overview-team .reference-item.jbo {
    background: url(../images/team/platzhalter-maennlich.jpg) center center/cover no-repeat;
}

#overview-team .reference-item.kgu {
    background: url(../images/team/KGU.jpg) center center/cover no-repeat;
}

#overview-team .reference-item.kha {
    background: url(../images/team/KHA.jpg) center center/cover no-repeat;
}

#overview-team .reference-item.lke {
    background: url(../images/team/LKE.jpg) center center/cover no-repeat;
}

#overview-team .reference-item.lpo {
    background: url(../images/team/LPO.jpg) center center/cover no-repeat;
}

#overview-team .reference-item.mje {
    background: url(../images/team/MJE.jpg) center center/cover no-repeat;
}

#overview-team .reference-item.mko {
    background: url(../images/team/MKO.jpg) center center/cover no-repeat;
}

#overview-team .reference-item.mma {
    background: url(../images/team/MMA.jpg) center center/cover no-repeat;
}

#overview-team .reference-item.mro {
    background: url(../images/team/MRO.jpg) center center/cover no-repeat;
}

#overview-team .reference-item.nme {
    background: url(../images/team/NME.jpg) center center/cover no-repeat;
}

#overview-team .reference-item.nwu {
    background: url(../images/team/NWU.jpg) center center/cover no-repeat;
}

#overview-team .reference-item.pba {
    background: url(../images/team/PBA.jpg) center center/cover no-repeat;
}

#overview-team .reference-item.pke {
    background: url(../images/team/PKE.jpg) center center/cover no-repeat;
}

#overview-team .reference-item.pro {
    background: url(../images/team/PRO.jpg) center center/cover no-repeat;
}

#overview-team .reference-item.psa {
    background: url(../images/team/PSA.jpg) center center/cover no-repeat;
}

#overview-team .reference-item.psc {
    background: url(../images/team/PSC.jpg) center center/cover no-repeat;
}

#overview-team .reference-item.rme {
    background: url(../images/team/RME.jpg) center center/cover no-repeat;
}

#overview-team .reference-item.sle {
    background: url(../images/team/SLE.jpg) center center/cover no-repeat;
}

#overview-team .reference-item.swe {
    background: url(../images/team/SWE.jpg) center center/cover no-repeat;
}

#overview-team .reference-item.spi {
    background: url(../images/team/platzhalter-maennlich.jpg) center center/cover no-repeat;
}


#overview-team .reference-item.the {
    background: url(../images/team/THE.jpg) center center/cover no-repeat;
}

#overview-team .reference-item.tpa {
    background: url(../images/team/TPA.jpg) center center/cover no-repeat;
}

#overview-team .reference-item.twi {
    background: url(../images/team/TWI.jpg) center center/cover no-repeat;
}

#overview-team .reference-item.tda {
    background: url(../images/team/platzhalter-maennlich.jpg) center center/cover no-repeat;
}

#overview-team .reference-item.vre {
    background: url(../images/team/VRE.jpg) center center/cover no-repeat;
}

#overview-team .reference-item.wwi {
    background: url(../images/team/WWI.jpg) center center/cover no-repeat;
}

#overview-team .reference-item.ywa {
    background: url(../images/team/YWA.jpg) center center/cover no-repeat;
}

#overview-team .reference-item p {
    position: absolute;
    bottom: -20px;
    width: 90%;
    background: var(--white);
    padding: 5px 10px;
    transform: translate(-50%, -50%);
    left: 50%;
    border-radius: 20px;
    font-size: 10px;
}

#overview-feedback .reference-item .img-box {
    width: 100%;
    height: 10vw;
    object-fit: cover;
    background: linear-gradient(to top right, var(--dark-red), var(--bright-red));
    border-radius: 20px 20px 0 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

#overview-feedback .reference-item .img-box img {
    width: 80%;
}

#overview-feedback .reference-item .text-box {
    padding: 40px;
}

/********************** FOOTER ************************/
footer {
    background: var(--dark-gray);
}

footer .wrap10 .flex-box:first-of-type {
    padding: 5vw 0;
}

footer .wrap10 .flex-box div:first-of-type {
    width: 38%;
    margin-right: 2%;
}

footer .wrap10 .flex-box div:nth-of-type(2) {
    width: 28%;
    margin-right: 2%;
}

footer .wrap10 .flex-box div:last-of-type {
    width: 30%;
}

footer .wrap10 .flex-box div h3 {
    color: var(--white);
    font-weight: 600;
}

footer .wrap10 .flex-box div p {
    color: var(--white);
    margin-bottom: 0;
    line-height: 30px;
}

footer .wrap10 .flex-box div a,
footer .wrap10 .flex-box div span {
    line-height: 30px;
    color: var(--white);
}

footer .wrap10 a {
    position: relative;
    color: var(--white);
}

footer .wrap5 .flex-box {
    border-top: .5px solid var(--gray);
    padding: 20px 0 40px 0;

}

footer .wrap5 .flex-box div:first-of-type {
    width: 38%;
    margin-right: 2%;
}

footer .wrap5 .flex-box div:nth-of-type(2) {
    width: 38%;
    margin-right: 2%;
    justify-content: center;
    margin: auto;
    text-align: center;
}

footer .wrap5 .flex-box div:nth-of-type(2) img {
    width: 15px;
    height: auto;
}

footer .wrap5 .flex-box div:last-of-type {
    width: 20%;
    text-align: right;
}

footer .wrap5 .flex-box div a,
footer .wrap5 .flex-box div span {
    line-height: 0;
    color: var(--gray);
    font-size: 0.5rem;
    margin-bottom: 0;
}

footer .wrap5 .flex-box div a {
    margin-right: 10px;
}

footer .wrap5 a:hover,
footer .wrap10 a:hover {
    opacity: 0.5;
    -webkit-transition: .2s ease-in;
    -o-transition: .2s ease-in;
    transition: .2s ease-in;
}


/********************** DATENSCHUTZERKLÄRUNG/AGB/IMPRESSUM/NUTZUNGSBEDINUNG/404 ************************/

#legal section {
    padding: 10vh 5%;
    overflow: hidden;
}

#legal h2,
#legal h3,
#legal h4 {
    color: var(--medium-red);
}

#legal ul {
    list-style-type: disc;
    padding-left: 20px;
    margin-left: 20px;
}

#legal li::marker {
    color: var(--medium-red);
}

#legal h3 {
    margin-top: 3rem;
}

#legal a {
    color: var(--medium-red);
}

#agb #legal a,
#fernwartung #legal a,
#error #legal a,
#links #legal a {
    color: var(--white);
}

#links #legal .container {
    display: grid;
}

#legal a:hover {
    color: var(--dark-red);
}

#legal .img-box {
    margin-top: 100px;
    width: 100%;
}

#legal .img-box a {
    position: absolute;
    left: 50%;
    top: 38vw;
    transform: translate(u-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
}

#wartungsarbeiten #legal .img-box {
    padding: 10vw;
    width: 60%;
    margin: auto;
}

#newsletter iframe {
    height: 1000px;
}

/********************** HKCONNECT ************************/

#countdown-stoerer {
    width: 100%;
    position: fixed;
    top: 70px;
    z-index: 99;
    padding: 20px;
}


.animated-gradient {
    background-size: 500% 500%;
    background-image: linear-gradient(to top right,
            var(--dark-red),
            var(--bright-red));
    animation: diagonal 5s infinite alternate;
}

@keyframes diagonal {
    0% {
        background-position: 0% 50%;
    }

    100% {
        background-position: 100% 50%;
    }
}


#countdown-stoerer h3 {
    color: var(--white);
    text-align: center;
}

#countdown-stoerer .container {
    color: var(--white);
    margin: 0;
}

#countdown-stoerer .container ul {
    text-align: center;
}

#countdown-stoerer .container:first-of-type {
    width: 60%;
}

#countdown-stoerer .container:last-of-type {
    align-items: baseline;
    display: flex;
}

#countdown li {
    color: var(--white);
    display: inline-block;
    list-style-type: none;
    padding: 0 0.5em;
    text-transform: uppercase;
    margin: 0;
}

li span {
    color: var(--white);
    display: block;
}

.emoji {
    display: none;
    padding: 1rem;
}

.emoji span {
    font-size: 4rem;
    padding: 0 .5rem;
}

#hideButton {
    position: absolute;
    right: 20px;
    top: 20px;
    background: none;
    border: none;
    color: var(--white);
    font-weight: 900;

}

#hideButton:hover {
    cursor: pointer;
    transform: scale(1.5);
    -webkit-transition: .2s ease-in;
    -o-transition: .2s ease-in;
    transition: .2s ease-in;
}

#hkconnect #partnerstand {
    background: linear-gradient(to top right, var(--dark-red), var(--bright-red));
}

#hkconnect #reference-slide {
    position: relative;
    bottom: 0;
}


#hkconnect #videoplayer {
    text-align: center;
    padding: var(--space-xl-3xl) 5%;
}

#hkconnect #statistics {
    text-align: center;
}

#hkconnect #solutions-advantage .container div:first-of-type {
    text-align: left;
}

#hkconnect #solutions-advantage .container div ul li {
    padding-bottom: 0;
}

#hkconnect #timeline .cd-horizontal-timeline .events-content em::before {
    content: none;
}

#hkconnect #about-us .container .img-box {
     background: url(../images/hafendach.jpg) center center/cover no-repeat;
}

/********************** RESPONSIVE ************************/

/********************** >1920px ************************/

@media screen and (min-width: 1920px) {

    h1,
    #overview-solution .flex-box div span {
        margin-bottom: 1rem;
    }

    h2,
    .highlight.stoerer p span {
        margin-bottom: 2rem;
    }

    h3 {
        margin-bottom: 2rem;
    }

    p,
    li,
    a,
    h1 span,
    h4,
    th,
    td {
        margin-bottom: 2rem;
    }
}

/********************** MIN ************************/

@media only screen and (min-width: 1100px) {
    #timeline .cd-horizontal-timeline {
        margin: 6em auto;
    }

    #timeline .cd-horizontal-timeline::before {
        content: 'desktop';
    }
}

/********************** 1920px ************************/

@media screen and (max-width: 1920px) {}

/********************** 1680px ************************/

@media screen and (max-width: 1680px) {}

/********************** 1440px ************************/
@media screen and (max-width: 1440px) {

    #industry-sectors-advantage .container:last-of-type img {
        width: 50px;
    }

    #industry-sectors-advantage .container:nth-of-type(2) h3 {
        min-height: 60px;
    }
}

/********************** 1200px ************************/
@media screen and (max-width: 1200px) {



    #reference-slide .slide svg {
        height: 80px;
    }

    #integration-slide .slide svg {
        height: auto;
        width: 80px;
    }

    #branche #overview-solution .flex-box .text-box {
        height: 30vw;
    }

    #branche #overview-solution .flex-box .img-box {
        height: 30vw;
    }

    #feature .worko-tabs .flex-tabs .tab {
        max-width: 1200px;
        margin: 10px;
        background: var(--white);
        margin: 10px 0 0 0;
        -webkit-box-shadow: 10px 10px 10px -10px rgba(0, 0, 0, .1);
        -moz-box-shadow: 10px 10px 10px -10px rgba(0, 0, 0, .1);
        box-shadow: 10px 10px 10px -10px rgba(0, 0, 0, .1);
    }

    #company-information .flex-box {
        display: block;
    }

    #company-information .flex-box .container {
        width: 100%;
        text-align: center;
        padding-bottom: 5vw;
        margin: auto;
    }

    #company-information .flex-box .container svg {
        width: 100%;
        height: auto;
    }

    #company-information .container table th,
    #company-information .container table td {
        display: block;
        width: 100%;
        padding: 0;
    }

    #company-information .container table th {
        background: transparent;
        border-bottom: 1px solid var(--white);
        font-weight: 800;

    }

    #company-information .container table td {
        padding-bottom: 15px;
    }

    #company-information .flex-box .container:first-of-type {
        width: 60%;
        margin-right: 0;
        margin: auto;
    }

    #feature .worko-tabs .flex-tabs .tab:hover {
        transform: translateY(0);
        background: var(--gray);
    }

    #feature .worko-tabs .flex-tabs .tab p {
        color: var(--medium-red);
    }

    #feature .worko-tabs .flex-tabs .panel {
        margin: 0px 0px 10px 0;
        background: var(--white);
        border-radius: 0 0 20px 20px;
        -webkit-box-shadow: 10px 10px 10px -10px rgba(0, 0, 0, .1);
        -moz-box-shadow: 10px 10px 10px -10px rgba(0, 0, 0, .1);
        box-shadow: 10px 10px 10px -10px rgba(0, 0, 0, .1);
    }

    #feature .worko-tabs .flex-tabs {
        gap: 0;
    }

    #feature .flex-tabs {
        flex-direction: column;

    }

    #tab-one-label {
        order: 1;
    }


    #tab-two-label {
        order: 3;
    }

    #tab-three-label {
        order: 5;
    }

    #tab-four-label {
        order: 7;
    }

    #tab-five-label {
        order: 9;
    }

    #tab-one-panel {
        order: 2;
    }

    #tab-two-panel {
        order: 4;
    }

    #tab-three-panel {
        order: 6;
    }

    #tab-four-panel {
        order: 8;
    }

    #tab-five-panel {
        order: 10;
    }

    #tab-one:checked ~ .tabs #tab-one-label,
    #tab-two:checked ~ .tabs #tab-two-label,
    #tab-three:checked ~ .tabs #tab-three-label,
    #tab-four:checked ~ .tabs #tab-four-label,
    #tab-five:checked ~ .tabs #tab-five-label {
        background-color: var(--white);
        cursor: default;
        border-radius: 20px 20px 0 0;
        border-bottom: 2px solid var(--gray);
    }

    #feature .worko-tabs .flex-tabs .tab span {
        color: var(--medium-red);
    }

    #feature .worko-tabs .flex-tabs {
        background: none;
        -webkit-box-shadow: none;
        -moz-box-shadow: none;
        box-shadow: none;
    }

    .slick-dots {
        margin: 0px;
    }

    #ser-info .stoerer p,
    #doxis-info .stoerer p {
        column-count: 1;
    }

    .info-banner img {
        width: 300px;
        top: 0;
        right: 2%;
    }

    #overview-feedback .reference-item {
        width: calc(50% - 30px);
    }

    #overview-feedback select,
    #overview-feedback #resetFilters {
        margin: 0 1%;
        width: 30%;
    }


    #branche #overview-solution .flex-box .text-box,
    #leistungen #overview-solution .flex-box .text-box,
    #branche #overview-solution .flex-box .img-box,
    #leistungen #overview-solution .flex-box .img-box {
        height: 40vw;
    }

    #interested-in h3 {
        min-height: 60px;
    }


    #interested-in .flex-box {
        display: block;
    }

    #interested-in .flex-box div img {
        width: 100%;
    }

    #interested-in .flex-box div {
        width: 60%;
        margin: auto;
        margin-top: 30px;
        margin-bottom: 30px;
    }

    #interested-in p {
        min-height: auto;

    }

    #overview-feedback .reference-item .img-box {
        height: 20vw;
    }

    #feedback-area .flex-box .container::before {
        width: 40px;
        height: 40px;
        top: -20px;
    }

    #company-information .flex-box .container:last-of-type {
        width: 100%;
    }

    #statistics .statistics-container {
        grid-template-columns: repeat(2, 1fr);
    }

    #reasons-for-hk .tile {
        flex: 1 1 calc(45% - 40px);
        max-width: calc(45% - 40px);
    }

}

/********************** 1024px ************************/
@media screen and (max-width: 1024px) {


    #overview-solution h2 {
        margin-bottom: 5vw;
    }

    #overview-solution .list {
        margin-top: -1.75rem;
    }

    #overview-solution .list span {
        line-height: 1;
    }

    #overview-solution h2 {
        margin-top: 0;
        height: 2rem;
    }

    #industry-sectors-advantage .container:nth-of-type(2) h3 {
        min-height: 60px;
    }

    header .navbar {
        padding: 10px 20px;
    }

    header .overflow {
        overflow: hidden;
    }

    header .overlay {
        position: fixed;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        z-index: 500;
        background-color: rgba(0, 0, 0, 0.6);
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
    }

    header .overlay--active {
        opacity: 1;
        visibility: visible;
    }

    header .navbar .menu-btn {
        display: flex;
    }

    header .navbar .menu-items {
        position: fixed;
        height: 100%;
        max-height: initial;
        overflow-y: auto;
        width: 80%;
        top: 65px;
        left: 0;
        background: #fcfcfc;
        display: block;
        transform: translateX(-120vh);
        transition: 0.3s ease-out;
        padding-bottom: 100px;
    }

    header .navbar .menu-items.open {
        transform: translateY(0);
    }

    header .navbar .menu-items li:first-child {
        margin-top: 20px;
    }

    header .navbar .menu-items li a {
        padding: 10px 1rem;
        display: block;
    }

    header .navbar .menu-items .dropdown-right .right-arrow {
        transform: rotate(90deg);
    }

    header .navbar .menu-item.first-item {
        padding: 1rem 1rem;
    }

    /* MEGA MENUS */
    header .navbar .menu-items .menu-right,
    header .navbar .menu-items .mega-menu {
        position: static;
        opacity: 1;
        top: 4rem;
        visibility: visible;
        margin-left: -18px;
        width: auto;
        max-height: 0;
        transform: scaleX(0);
        transform-origin: left;
        overflow: hidden;
        transition: all 0.5s ease;
    }

    header .navbar .menu-items .mega-menu .col {
        padding-left: 1rem;
    }

    header .navbar .expand-btn.open + .sample {
        max-height: 100%;
        transform: scaleZ(1);
    }

    header .navbar .expand-btn.open + .blog.sample {
        max-height: 100%;
        transform: scaleZ(1);
        max-width: fit-content;
    }

    header .navbar .sample {
        border-top: none;
    }

    header .navbar .sample li {
        margin: 0;
    }

    header .navbar .sample li:last-child {
        border-bottom: none;
    }

    header .navbar .sample li a {
        font-size: 1rem;
    }

    header .navbar .mega-menu .content {
        grid-template-columns: auto;
        padding: 1rem 1rem 20px 1rem;
    }

    header .navbar .mega-menu .content .col {
        width: 100%;
        padding-top: 1rem;
        margin-bottom: 0.5rem;
    }

    header .navbar .col .mega-links li,
    header .navbar .col .mega-links li a {
        padding: 0 0.5rem;
    }

    header .navbar .content .col .mega-links {
        border-left: 0;
        padding-left: 0.5rem;
    }

    header .navbar .col .mega-links li {
        margin: 0;
    }

    header .navbar .mega-menu .content {
        gap: 50px;
    }

    #solutions-advantage .container:last-of-type img,
    #integration-advantage .container:last-of-type img {
        width: 60%;
    }

    #about-us .container .img-box {
        min-height: auto;
    }

    #branche #overview-solution .flex-box .text-box,
    #leistungen #overview-solution .flex-box .text-box {
        padding: 25px;
    }

    #leistungen header,
    #loesungen header,
    #integration header,
    #branche header,
    #referenzen header,
    #best-practise header,
    #salesforce header,
    #open-ai header,
    #sap header,
    #datev header,
    #crm header,
    #microsoft header,
    #elektronische-signaturen header,
    #erp header,
    universalschnittstelle header,
    #datenschutzerklaerung header,
    #impressum header,
    #agb header,
    #nutzungsbedingungen header,
    #datenschutzerklaerung-bewerber header,
    #fernwartung header,
    #ser-partner header,
    #newsletter header {
        height: 40vh;
    }

    .info-banner button.formsapp-popup-button {
        font-size: 0.875rem;
    }


}

/********************** 992px ************************/
@media screen and (max-width: 992px) {


    #branche #overview-solution .flex-box {
        display: flex;
        flex-wrap: wrap;
    }

    #branche #overview-solution .flex-box {
        flex-direction: column;
    }

    #branche #overview-solution .flex-box .text-box,
    #branche #overview-solution .flex-box .img-box {
        width: 100%;
    }

    #branche #overview-solution .flex-box:nth-of-type(1) .img-box,
    #branche #overview-solution .flex-box:nth-of-type(3) .img-box,
    #branche #overview-solution .flex-box:nth-of-type(5) .img-box,
    #branche #overview-solution .flex-box:nth-of-type(7) .img-box,
    #branche #overview-solution .flex-box:nth-of-type(9) .img-box {
        order: 1;
    }

    #branche #overview-solution .flex-box:nth-of-type(1) .text-box,
    #branche #overview-solution .flex-box:nth-of-type(3) .text-box,
    #branche #overview-solution .flex-box:nth-of-type(5) .text-box,
    #branche #overview-solution .flex-box:nth-of-type(7) .text-box,
    #branche #overview-solution .flex-box:nth-of-type(9) .text-box {
        order: 2;
    }


    #branche #overview-solution .flex-box .text-box {
        height: auto;
        padding: 5vw;
    }

    #branche #overview-solution .flex-box .img-box:first-of-type,
    #branche #overview-solution .flex-box .img-box:nth-of-type(2),
    #branche #overview-solution .flex-box .img-box:nth-of-type(3),
    #branche #overview-solution .flex-box .img-box:nth-of-type(4),
    #branche #overview-solution .flex-box .img-box:nth-of-type(5) {
        border-radius: 30px 30px 0 0;
        -webkit-box-shadow: 0px 5px 15px -5px rgba(0, 0, 0, 0.25);
        -moz-box-shadow: 0px 5px 15px -5px rgba(0, 0, 0, 0.25);
        box-shadow: 0px 5px 15px -5px rgba(0, 0, 0, 0.25);
    }


    #branche #overview-solution .flex-box .text-box:first-of-type,
    #branche #overview-solution .flex-box .text-box:nth-of-type(2),
    #branche #overview-solution .flex-box .text-box:nth-of-type(3),
    #branche #overview-solution .flex-box .text-box:nth-of-type(4),
    #branche #overview-solution .flex-box .text-box:nth-of-type(5) {
        border-radius: 0 0 30px 30px;
        -webkit-box-shadow: 0px 5px 15px -5px rgba(0, 0, 0, 0.25);
        -moz-box-shadow: 0px 5px 15px -5px rgba(0, 0, 0, 0.25);
        box-shadow: 0px 5px 15px -5px rgba(0, 0, 0, 0.25);
    }

    .wrap15 {
        padding: 0 10%;
    }

    header {
        height: 60vw;
    }

    header .stoerer {
        width: 90%;
        text-align: center;
    }

    header .stoerer p {
        width: 100%;
    }


    .highlight.stoerer .flex-box {
        display: block;
    }


    .highlight.stoerer .flex-box p {
        width: 100%;
        padding: 20px 0;
        line-height: 0;
    }

    .highlight.stoerer .flex-box p:hover {
        transform: translateY(-5px);
        -webkit-transition: .2s ease-in-out;
        -o-transition: .2s ease-in-out;
        transition: .2s ease-in-out;
    }

    .highlight.stoerer p span {
        line-height: 0;
    }


    .highlight.stoerer {
        padding: 20px 0 8px 0;
        background: linear-gradient(to top right, var(--dark-red), var(--bright-red));
    }

    .highlight.stoerer p {
        background: var(--white);
        height: 40px;
        border-radius: 20px;
        padding: 8px 0;

    }


    #ueber-uns .breadcrumb-navigation {
        display: flex;
        flex-direction: column;
        gap: 15px;
    }

    #solutions-advantage .flex-box {
        display: block;
    }

    #solutions-advantage .container div:first-of-type {
        width: 100%;
        padding: 0
    }

    #solutions-advantage .container div:last-of-type {
        width: 70%;
        padding: 0;
        margin: auto;
    }

    #solutions-advantage .container div ul {
        width: 100%;
        max-width: none;
        margin-top: 50px;
    }


    #integration-slide .slide svg {
        height: 75px;
    }

    #feature .flex-box {
        display: block;
    }

    #feature .flex-box div {
        width: 100%;
    }

    #feature .worko-tabs .flex-tabs .panel {
        min-height: 500px;
    }

    #feature .flex-box div img {
        width: 40%;
        margin: auto;
    }

    #feedback .feedback-slider {
        width: 80%;
        margin: auto;
        margin-top: 50px;
    }

    #feedback .feedback-slider .flex-box {
        display: block;
    }


    #feedback .feedback-slider .flex-box div:first-of-type {
        width: 50%;
        padding: 0;
        margin: auto;
    }

    #feedback .feedback-slider .flex-box div:last-of-type {
        width: 100%;
        padding: 20px;
    }

    .info-banner {
        padding: 30px;
    }

    .info-banner .stoerer h3 {
        width: 100%;
    }

    .info-banner img {
        top: -30px;
        width: 270px;
    }

    #appointment iframe {
        height: 1000px;

    }


    #service .service-card {
        max-width: 500px;
    }


    footer .wrap10 .flex-box:first-of-type {
        display: block;
        padding-bottom: 0;
    }

    footer .wrap10 .flex-box div:first-of-type,
    footer .wrap10 .flex-box div:nth-of-type(2),
    footer .wrap10 .flex-box div:last-of-type {
        width: 100%;
        padding-bottom: 25px;
        margin-bottom: 25px;
        border-bottom: .5px solid var(--gray);
    }

    footer .wrap10 .flex-box div:last-of-type {
        border: none;
    }

    #industry-sectors-advantage .flex-box {
        display: block;
    }

    #industry-sectors-advantage .container:first-of-type div {
        width: 100%;
    }

    #industry-sectors-advantage .container:first-of-type .img-box {
        height: 50vw;
        width: 50vw;
        margin: auto;
        margin-bottom: 3vw;
    }

    #industry-sectors-advantage .container:nth-of-type(2) .reveal {
        margin: 2vw 0;
    }


    #overview-feedback .reference-item {
        width: 80%;
        margin: auto;

    }

    #overview-feedback .container select,
    #overview-feedback .container #resetFilters {
        width: 100%;
        margin-bottom: 10px;
    }

    #overview-team .container select,
    #overview-team .container #resetDepartmentFilters {
        width: 80%;
        margin-bottom: 10px;
    }

    #overview-feedback .reference-item .img-box {
        height: 10vh;
    }

    #overview-feedback .reference-item .img-box img {
        height: 60%;
    }

    #overview-feedback .reference-grid {
        gap: 20px;
    }

    #overview-feedback .reference-item .text-box {
        padding: 20px;
    }

    header .stoerer.flex-box {
        display: block;
    }

    header .stoerer div:first-of-type {
        width: 100%;
        padding-top: 100px;
    }

    #index header .stoerer div:last-of-type {
        margin: auto;
    }

    #index header {
        860px;
    }

    #ser-info .stoerer svg {
        width: 150px
    }


    #doxis-info .stoerer svg {
        width: 75px;
    }


    .info-banner h3 {
        width: 60%;
    }

    #appointment .stoerer {
        background: var(--white);
        padding: 25px;
        border-radius: 20px;
        text-align: left;
        display: block;
        -webkit-box-shadow: 0px 5px 15px -5px rgba(0, 0, 0, 0.25);
        -moz-box-shadow: 0px 5px 15px -5px rgba(0, 0, 0, 0.25);
        box-shadow: 0px 5px 15px -5px rgba(0, 0, 0, 0.25);

    }

    #appointment .stoerer a {
        width: 100%;
        display: block;
        margin-bottom: 20px;
    }

    #appointment .flex-box .text-box {
        padding: 5%;
    }

    #industry-sectors-advantage .container:first-of-type div:first-of-type {
        width: 80%;
        height: 25vh;
    }

    #industry-sectors-advantage .container:first-of-type div:last-of-type {
        width: 100%;
    }

    #industry-sectors-advantage .container:nth-of-type(2) h3 {
        min-height: auto;
    }

    #overview-special-solution .card-container,
    #overview-special-integration .card-container {
        justify-content: center;
        gap: 30px;
    }

    #overview-special-solution .card,
    #overview-special-integration .card {
        margin-bottom: 0;
    }

    #overview-special-integration h2,
    #overview-special-solution h2 {
        text-align: center;
    }

    header .stoerer div svg {
        visibility: hidden;
    }

    #integration-advantage .flex-box div {
        width: 75%;
        margin-bottom: 10px;
        padding: 10px;
    }

    #integration-advantage .flex-box h3::before {
        top: -3px;
    }

    #integration-advantage .container p {
        column-count: 1;
        text-align: center;
    }

    #branche #overview-solution .flex-box .text-box:first-of-type,
    #branche #overview-solution .flex-box .text-box:nth-of-type(3),
    #branche #overview-solution .flex-box .text-box:nth-of-type(5),
    #leistungen #overview-solution .flex-box .text-box:first-of-type,
    #leistungen #overview-solution .flex-box .text-box:nth-of-type(3),
    #leistungen #overview-solution .flex-box .text-box:nth-of-type(5),
    #branche #overview-solution .flex-box .text-box:nth-of-type(2),
    #branche #overview-solution .flex-box .text-box:nth-of-type(4),
    #leistungen #overview-solution .flex-box .text-box:nth-of-type(2),
    #leistungen #overview-solution .flex-box .text-box:nth-of-type(4) {
        border-radius: 0 0 30px 30px;
    }


    #branche #overview-solution .flex-box .img-box:first-of-type,
    #branche #overview-solution .flex-box .img-box:nth-of-type(3),
    #branche #overview-solution .flex-box .img-box:nth-of-type(5),
    #leistungen #overview-solution .flex-box .img-box:first-of-type,
    #leistungen #overview-solution .flex-box .img-box:nth-of-type(3),
    #leistungen #overview-solution .flex-box .img-box:nth-of-type(5),
    #branche #overview-solution .flex-box .img-box:nth-of-type(2),
    #branche #overview-solution .flex-box .img-box:nth-of-type(4),
    #leistungen #overview-solution .flex-box .img-box:nth-of-type(2),
    #leistungen #overview-solution .flex-box .img-box:nth-of-type(4) {

        border-radius: 30px 30px 0 0;
    }

    .breadcrumb-navigation {
        height: auto;
        padding: 20px 0;
    }

    .breadcrumb-navigation a {
        width: 80%;
    }

    #mission-vision .flex-box:first-of-type {
        flex-direction: column;
    }

    #mission-vision .flex-box:last-of-type {
        flex-direction: column-reverse;
    }

    #mission-vision .img-box,
    #mission-vision .text-box {
        width: 100%;
    }

    #mission-vision .img-box img {
        max-width: 25%;
    }

    #timeline .cd-horizontal-timeline .events-content li.selected .flex-box {
        display: block;
    }

    #team-info .stoerer .flex-box,
    #news-info .stoerer .flex-box {
        display: block;
    }

    #team-info .stoerer .flex-box div,
    #news-info .stoerer .flex-box div {
        width: 100%;
        margin: 2% 0;
    }

    #team-info .img-box,
    #news-info .img-box {
        height: 300px;
    }

    #news-info .img-box {
        margin-bottom: 30px;
    }

    #social-work .slick-initialized .slick-slide .flex-box {
        display: block;
    }

    #social-work .slick-initialized .slick-slide {
        text-align: center;
    }

    #timeline {
        min-height: 800px;
    }

    #social-work .slick-slide img {
        margin: auto;
        padding-bottom: 30px;
    }
}

/********************** 768px ************************/
@media screen and (max-width: 768px) {

    h1,
    #overview-solution .flex-box div span {
        line-height: 1;
    }

    h2 {
        line-height: 1;
    }

    h3 {
        line-height: 1;
    }

    #about-us .flex-box {
        display: block;
    }

    #about-us .container .text-box {
        width: 100%;
        margin: 0 0 5vw 0;
    }

    #about-us .container .img-box {
        width: 100%;
        margin: 0 0 3vw 0;
        min-height: 350px;
    }

    #service .service-cards {
        margin-top: 3vw;
    }

    #feedback-area .flex-box {
        display: block;
    }

    #feedback-area .flex-box .container {
        width: 100%;
        margin: 0 0 30px 0;
        padding: 5%;
    }

    #integration-advantage .flex-box {
        display: block;
    }

    #integration-advantage .flex-box div {
        width: 100%;
    }

    #integration-advantage .container p {
        column-count: 1;
    }

    footer .wrap5 .flex-box {
        display: block;
    }

    footer .wrap5 .flex-box div:first-of-type,
    footer .wrap5 .flex-box div:nth-of-type(2),
    footer .wrap5 .flex-box div:last-of-type {
        width: 100%;
        margin-bottom: 20px;
        text-align: center;
    }

    #overview-special-solution .card,
    #overview-special-integration .card {
        flex: 0 0 100%;
        max-width: 100%;
    }

    #interested-in .flex-box {
        flex-direction: column;
    }

    #overview-solution .flex-box {
        flex-direction: column;
        margin-bottom: 10vw;
        padding: 30px;
        border-radius: 20px;
    }

    #overview-solution .flex-box .img-box {
        order: -1;
    }

    #overview-solution .flex-box div {
        order: 1;
        width: 100%;
        min-width: auto;
    }

    #overview-solution .flex-box .img-box {
        padding: 50px 0;
    }

    #branche #overview-solution .flex-box,
    #leistung #overview-solution .flex-box {
        background: none;
        -webkit-box-shadow: none;
        -moz-box-shadow: none;
        box-shadow: none;
    }

    #advantage-integration .container {
        display: block;
    }

    #advantage-integration .container svg {
        margin-top: 3vw;
    }

    #overview-solution h2 {
        margin-top: -3vw;
    }

    #faq .faq-accordion-title p,
    #accordion .faq-accordion-title p {
        margin-top: -40px;
        margin-right: 10px;
    }

    #statistics .statistics-container {
        grid-template-columns: 1fr;
    }

    #reasons-for-hk .tile {
        flex: 1 1 calc(100% - 40px);
        max-width: calc(100% - 40px);
    }

    #countdown-stoerer .flex-box {
        display: block;
    }

    #countdown-stoerer .container:first-of-type {
        width: 100%;
        margin: auto;
    }

    #countdown-stoerer .container:last-of-type {
        width: 100%;
        margin: auto;
        justify-content: center;
    }
}

/********************** Landscape ************************/

@media screen and (max-width: 1000px) and (orientation: landscape) {
    #index header {
        height: 130vw;
    }

    header .navbar .menu-items {
        width: 50%;
    }

    #leistungen header,
    #loesungen header,
    #integration header,
    #branche header,
    #referenzen header,
    #best-practise header,
    #salesforce header,
    #open-ai header,
    #sap header,
    #datev header,
    #crm header,
    #microsoft header,
    #elektronische-signaturen header,
    #erp header,
    universalschnittstelle header,
    #datenschutzerklaerung header,
    #impressum header,
    #agb header,
    #nutzungsbedingungen header,
    #datenschutzerklaerung-bewerber header,
    #fernwartung header,
    #ser-partner header,
    #newsletter header {
        height: 40vw;
    }

    #industry-sectors-advantage .container:first-of-type div:first-of-type {
        height: 30vw;
    }

    #overview-special-solution .card .img-box {
        height: 20vw;
    }

    #interested-in .flex-box div {
        width: 100%;
    }

    #interested-in .flex-box img {
        max-width: 500px;
    }

    #overview-feedback .reference-item .img-box {
        height: 10vw;
    }

    .info-banner h3 {
        width: 100%;
    }

    #ueber-uns header {
        height: 60vw;
    }
}

/********************** 600px ************************/
@media (max-width: 600px) {

    header .stoerer div {
        width: 100%;
    }

    #solutions-advantage .container div:last-of-type {
        width: 100%;
    }

    #solutions-advantage .container div ul li {
        padding-bottom: 10px;
    }

    #feature .worko-tabs {
        padding-top: 50px;
    }

    .slick-prev {
        left: -25px
    }

    .slick-next {
        right: -25px;
    }

    .info-banner img {
        width: 150px;
        top: 70px;
    }

    .info-banner h3 {
        width: 100%;
    }

    #interested-in .flex-box div {
        width: 100%;
    }

    #solutions-advantage .container:last-of-type {
        margin-top: 50px;
    }

    #ser-info .stoerer svg {
        width: 100px;
        top: -10px;
    }

    #ser-info .stoerer,
    #doxis-info .stoerer {
        padding: 30px;
    }

    #feedback .feedback-slider {
        width: 90%;
    }

    #industry .flex-box {
        display: block;
    }

    #about-us .container .img-box {
        min-height: 250px;
    }


    #overview-solution h2 {
        height: 0.75rem;
        font-size: 0.75rem;
    }

    #overview-solution .list {
        margin-top: -0.75rem;
    }

    #overview-solution .list span {
        line-height: 0.75rem;
    }

    #appointment .flex-box {
        display: block;
    }

    #appointment .flex-box .container:first-of-type {
        width: 100%;
        height: 300px;
        margin-bottom: 3vw;
    }

    #appointment .flex-box .container:last-of-type {
        width: 100%;
    }

    #leistungen header,
    #loesungen header,
    #integration header,
    #branche header,
    #referenzen header,
    #best-practise header,
    #salesforce header,
    #open-ai header,
    #sap header,
    #datev header,
    #crm header,
    #microsoft header,
    #elektronische-signaturen header,
    #erp header,
    universalschnittstelle header,
    #datenschutzerklaerung header,
    #impressum header,
    #agb header,
    #nutzungsbedingungen header,
    #datenschutzerklaerung-bewerber header,
    #fernwartung header,
    #ser-partner header,
    #newsletter header {
        height: 75vh;
    }

    #industry-sectors-advantage .container:last-of-type img {
        width: 75px;
    }

    .info-banner {
        text-align: center;
    }

    .info-banner h3 {
        width: 100%;
    }

    #feedback .feedback-slider .flex-box div:first-of-type {
        width: 100%;
        margin-bottom: 20px;
    }

    #statistics .statistics-container {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    #statistics .statistics-item {
        width: 100%;
        margin-bottom: 20px;
    }

    #ueber-uns header {
        height: 60vh;
    }

    #timeline .cd-horizontal-timeline .events-content div img {

        height: auto;
        width: 100%;
        padding-bottom: 20px;
    }

}

/********************** 425px ************************/
@media screen and (max-width: 425px) {



    .wrap5,
    .wrap10,
    .wrap15 {
        padding: 0 5%;
    }

    #appointment iframe {
        padding: 0 5%;
    }


    #integration-slide .slide svg {
        height: 50px;
    }

    #ser-info .stoerer a,
    #doxis-info .stoerer a {
        padding: 10px 20px;
    }

    .slick-next::before {
        width: 25px;
    }

    .slick-prev::before {
        width: 25px;
    }

    .slick-prev {
        left: -10px;
    }

    .slick-next {
        right: -10px;
    }

    header .stoerer div svg {
        visibility: hidden;
    }

    header .stoerer div:first-of-type {
        padding-top: 0px;
        margin-top: 200px;
        text-align: center;
    }

    #index #doxis-info .stoerer {
        text-align: center;
    }

    #about-us .container .text-box {
        text-align: center;
    }

    #service .service-card {
        text-align: center;
    }

    #doxis-info .stoerer svg {
        width: 50px;
        top: -20px;
    }
}

/********************** 600px ************************/
@media screen and (max-width: 375px) {

    .info-banner img {
        width: 100px;
        top: -30px;
    }

    #interested-in .flex-box div {
        width: 100%;
    }
}

/********************** 600px ************************/
@media screen and (max-width: 320px) {}