:root {
    --heptacom-darkgray: #3c3c3c;
    --heptacom-lightgray: #5f5e5e;
    --heptacom-white: #fff;
}

.jumbotron h1 {
    font-size: 35px;
    font-weight: 300;
    line-height: 1;
    line-break: after-white-space;
    margin-bottom: 20px;
}

.jumbotron .subline {
    font-size: 16px;
}

.sitecontainer .jumbotron h2 {
    font-size: 44px;
    font-weight: 200;
}

.jumbotron .btn {
    font-weight: bold;
}

.sitecontainer .row .enterprise h3 {
    font-size: 33px;
    font-weight: 300;
}

.heptacom-segment {
    stroke-width: 1;
    transform: translate(0, 0);
    transition: 1s ease stroke-width, 1s ease transform;
}
.heptacom-light .heptacom-segment {
    stroke: var(--heptacom-lightgray);
    fill: var(--heptacom-lightgray);
}
.heptacom-dark .heptacom-segment {
    stroke: var(--heptacom-darkgray);
    fill: var(--heptacom-darkgray);
}

.heptacom-highlight-dark .heptacom-segment.active,
.heptacom-highlight-dark .heptacom-segment:hover {
    stroke: var(--heptacom-accent);
    fill: var(--heptacom-accent);
}

.heptacom-highlight-light .heptacom-segment.active,
.heptacom-highlight-light .heptacom-segment:hover {
    stroke: var(--heptacom-lightgray);
    fill: var(--heptacom-lightgray);
}

.heptacom-highlight-stroke .heptacom-segment.active,
.heptacom-highlight-stroke .heptacom-segment:hover {
    stroke: var(--heptacom-white);
    stroke-width: 3;
    -webkit-stroke-location: outside;
}

.heptacom-highlight-fill .heptacom-segment.active,
.heptacom-highlight-fill .heptacom-segment:hover {
    fill: var(--heptacom-white);
    stroke: var(--heptacom-white);
    stroke-width: 2;
    stroke-location: outside;
}

.heptacom-segment.segment-6:hover,
.heptacom-fly-on-active .heptacom-segment.segment-6.active {
    transform: translate(10px, 1px);
}
.heptacom-segment.segment-0:hover,
.heptacom-fly-on-active .heptacom-segment.segment-0.active {
    transform: translate(5px, 8px);
}
.heptacom-segment.segment-1:hover,
.heptacom-fly-on-active .heptacom-segment.segment-1.active {
    transform: translate(-3px, 9px);
}
.heptacom-segment.segment-2:hover,
.heptacom-fly-on-active .heptacom-segment.segment-2.active {
    transform: translate(-9px, 3px);
}
.heptacom-segment.segment-3:hover,
.heptacom-fly-on-active .heptacom-segment.segment-3.active {
    transform: translate(-8px, -5px);
}
.heptacom-segment.segment-4:hover,
.heptacom-fly-on-active .heptacom-segment.segment-4.active {
    transform: translate(-1px, -10px);
}
.heptacom-segment.segment-5:hover,
.heptacom-fly-on-active .heptacom-segment.segment-5.active {
    transform: translate(7px, -7px);
}

/* Kontakt-Flyin */

.fixed-contact.telefon {
    position: fixed;
    background-color: #189eff;
    top: 82%;
    right: 0;
    width: 55px;
    height: 57px;
    z-index: 1029;
    cursor: pointer;
}

.heptacom-segment {
    stroke-width: 1;
    transform: translate(0, 0);
    transition: 1s ease stroke-width, 1s ease transform;
}

.heptacom-light .heptacom-segment,
.heptacom-dark .heptacom-segment {
    stroke: var(--heptacom-light);
    fill: var(--heptacom-light);
}

.heptacom-highlight-dark .heptacom-segment.active,
.heptacom-highlight-dark .heptacom-segment:hover {
    stroke: var(--heptacom-darkgray);
    fill: var(--heptacom-accent);
}

.heptacom-highlight-light .heptacom-segment.active,
.heptacom-highlight-light .heptacom-segment:hover {
    stroke: var(--heptacom-lightgray);
    fill: var(--heptacom-lightgray);
}

.heptacom-highlight-stroke .heptacom-segment.active,
.heptacom-highlight-stroke .heptacom-segment:hover {
    stroke: var(--heptacom-accent);
    stroke-width: 3;
    -webkit-stroke-location: outside;
}

.heptacom-highlight-fill .heptacom-segment.active,
.heptacom-highlight-fill .heptacom-segment:hover {
    fill: var(--heptacom-accent);
    stroke: var(--heptacom-accent);
    stroke-width: 2;
    stroke-location: outside;
}

.heptacom-segment.segment-6:hover,
.heptacom-fly-on-active .heptacom-segment.segment-6.active {
    transform: translate(10px, 1px);
}
.heptacom-segment.segment-0:hover,
.heptacom-fly-on-active .heptacom-segment.segment-0.active {
    transform: translate(5px, 8px);
}
.heptacom-segment.segment-1:hover,
.heptacom-fly-on-active .heptacom-segment.segment-1.active {
    transform: translate(-3px, 9px);
}
.heptacom-segment.segment-2:hover,
.heptacom-fly-on-active .heptacom-segment.segment-2.active {
    transform: translate(-9px, 3px);
}
.heptacom-segment.segment-3:hover,
.heptacom-fly-on-active .heptacom-segment.segment-3.active {
    transform: translate(-8px, -5px);
}
.heptacom-segment.segment-4:hover,
.heptacom-fly-on-active .heptacom-segment.segment-4.active {
    transform: translate(-1px, -10px);
}
.heptacom-segment.segment-5:hover,
.heptacom-fly-on-active .heptacom-segment.segment-5.active {
    transform: translate(7px, -7px);
}
.blackLink a{
    color: #1D1D1D;
}
.blackLink a:hover{
    color: #1D1D1D;
    font-weight:bold;
}

/*Allgemeine Einstellungen*/
.bg-light{
    background-color: #ffffff!important;
}

.h3-small {
    font-family: din-2014, sans-serif;
}

.img-small {
    max-width: 220px;
}

.img-center {
    margin: 0 auto;
    display: block;
}

.geschaeftsbereicheBox a {
    font-weight: normal;
    font-style: normal;
}
.geschaeftsbereicheBoxLigth a{
    font-weight: normal;
    font-style: normal;
    color: #1D1D1D;
}

.bg-light-heptacom a{
    color: #1D1D1D;
}
.bg-light a{
    color: #1D1D1D;
}
.bg-light a:hover {
    color: #F1BE99;
    text-decoration: none;
}
.nichtUmbrechen {
    white-space: nowrap;
}
nav a {
    font-style: normal;
}
a.btn {
    font-style: normal;
}

.btn-light {
    background-color: #0070C9;
    border-color: #0070C9;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
    font-size: 1rem;
    color: #fff!important;
}

.btn-light:hover {
    color: #fff;
    background-color: #343a40;
    border-color: #343a40;
}

.btn-dark {
    background-color: #0070C9;
    border-color: #0070C9;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
    font-size: 1rem;
}

.btn-dark:hover {
    background-color: #f8f9fa;
    border-color: #f8f9fa;
}

a.btn.btn-dark.btn-lg:hover {
    color: #000;
}

.btn-link {
    color: #189eff;
}

img.fa-angle-right {
    height: 14px;
    width: auto;
}

.onlineshop-btn {
    margin: 3% auto;
    width: 180px;
    display: block;
}

/*Projekte*/
.projekte img{
    width: 330px;
}
.innerProjectContainer{
    width: 330px;
}

.col-md-1.mr-5{
    margin-left: 3rem;
}
.jumbotron .heptacom-dark.heptacom-highlight-light.heptacom-highlight-fill{
    margin-top: -20%;
}

.shopware-6-wrapper {
    max-width: 350px;
    margin: 20px auto;
}

.shopware-6-item.s6t-one {
    width: 50%;
}

.shopware-6-item img {
    width: 100%;
}

.shopware-6-item {
    float: left;
    padding-right: 35px;
}

.shopware-6-item.s6t-one {

}

.shopware-6-item.s6t-two {
    width: 50%;
}

.clear {
    clear: both;
}

.viewport-limiter {
    margin: 0 auto;
    width: 320px;
}

/* Webconnector */

.webconnector-container {
    -webkit-background-size: cover;
    background-size: cover;
}

.clear-webconnector {
    clear: both;
}

.webconnector-img-wrapper {
    width: 200px;
    float: none;
    margin: 10px auto 20px auto;
}

.webconnector-img-wrapper img {
    width: 100%;
}

.bg-min-width {
    min-width: 330px;
}

.border-none {
    border: none !important;
    border-color: transparent !important;
}