body {
    overflow-x: hidden;
    font-family: 'Ubuntu', sans-serif;
}
.navbar {
    background-color: #9cd8e9 !important;
    height: 96px;
    border-bottom: #6f9aa6 5px solid;
}

.navbar-nav {
    display: flex;
    width: 100%;
    max-width: 900px;
    margin-left: auto;
    justify-content: space-between;
}

.navbar-nav .nav-link {
    font-size: 21px;
    font-weight: normal;
    color: #313131 !important;
    border-radius: 4px;
    padding-left: 20px !important;
    padding-right: 20px !important;
    margin-right: 0px !important;
}

#navbarNavAltMarkup {
    border-top: 2px solid #6f9aa6;
    background-color: #6f9aa6;
}

.nav-link:hover {
    background-color: white;
}

.nav-link-item {
    margin-right: 54px !important;
}

.burger-menu-icon {
    background-image: url("/toolkit/images/burger.svg");
    width: 37px;
    height: 37px;
    background-color: transparent !important;
}

.ubuntu15r {
    font-size: 15px;
    font-weight: normal;
    color: #9cd8e9 !important;
}

.ubuntu21r {
    font-size: 21px;
    font-weight: normal;
    color: #313131 !important;
}

.ubuntu22b {
    font-size: 22px;
    font-weight: bold;
    color: #313131 !important;
}

.ubuntu22i {
    font-size: 22px;
    font-style: italic;
    font-weight: normal;
    color: #313131 !important;
}

.ubuntu22r {
    font-size: 22px;
    font-weight: normal;
    color: #313131 !important;
}

.ubuntu35r {
    font-size: 35px;
    font-weight: normal;
    color: #1989ab !important;
}

.ubuntu45r {
    font-size: 45px;
    font-weight: normal;
    color: #1989ab !important;
}

.ubuntu29b {
    font-size: 29px;
    font-weight: bold;
    color: #313131 !important;
}

.nav-content-left {
    margin-left: 84px;
}

.nav-content-right {
    margin-right: 64px;
}

.content-container {
    margin-left: 84px;
    margin-right: 84px;
}

.content-section
{
    background-color: #e2f4f9;
    padding-top: 36px;
    padding-bottom: 84px;
    margin-bottom: 84px;
}

.sub7 {
    margin-top: -17px;
}

.image-slide-container {
    margin-top: 65px;
}

.image-slide {
    margin-top: 65px;
    gap: 68px;
}

.image-slide-1 {
    width: 539px;
    min-height: 434px;
    background-image: url("/toolkit/images/x2/IMG_1551.jpg");
    background-size: contain;
    background-repeat: no-repeat;
}

.image-slide-2 {
    width: 539px;
    height: 434px;
    background-image: url("/toolkit/images/x2/_DSC1148.jpg");
    background-size: contain;
    background-repeat: no-repeat;
}

.image-slide-3 {
    width: 539px;
    height: 434px;
    background-image: url("/toolkit/images/x2/_DSC1159.jpg");
    background-size: contain;
    background-repeat: no-repeat;
}

.slide-image {
    width: 90%;
    max-width: 539px;
    max-height: 434px;
}

.hero-image {
    height: 413px;
    width: 100%;
    margin-bottom: 56px;
    background-image: url("/toolkit/images/bild_header.jpg");
    background-position: center;
    background-size: cover;
    background-position-y: center;
    background-repeat: no-repeat;
}

.hero-name {
    margin-bottom: 47px;
}

.hero-intro {
    margin-bottom: 92px;
}

.hero-picture {
    width: 234px;
    height: 349px;
    background-image: url("/toolkit/images/x2/_DSC1189.jpg");
    background-size: contain;
    background-repeat: no-repeat;
}

.hero-outro {
    margin-bottom: 98px;
    width: 1100px;
    margin-left: auto;
    margin-right: auto;
}

.hero-story-header {
    height: 84px;
    background-color: #9cd8e9;
    font-weight: bold;
    font-size: 45px;
    color: white;
    padding-top: 12px;
    margin-bottom: 44px;
}

.hero-story-section {
    background-color: #e2f4f9;
    padding-bottom: 84px;
    margin-bottom: 84px;
}

.hero-story-education {
    margin-left: 62px;
    margin-right: 62px;
}

.hero-story-education-report {
    margin-top: 19px;
    width: 100%;
    display: inline-flex;
    margin-bottom: 52px;
}

.hero-story-education-entry {
    width: 45%;
    float: left;
}

.hero-story-education-entry-r {
    width: 45%;
    margin-left: auto;
    float: left;
}

.hero-story-education-row {
    margin-bottom: 32px;
}

.hero-contact {
    margin-top: 84px;
    background-color: #e2f4f9;
    padding-left: 84px;
    padding-right: 84px;
    display: flex;
}

.hero-contact-header {
    margin-top: 66px;
    margin-bottom: 75px;
}

.hero-contact-section-a {
    height: 221px;
}

.hero-contact-section-b {
    /*margin-left: 84px;
    margin-right: 84px;*/
    /*padding-left: 84px;*/
    margin-bottom: 119px;
    width: 100%;
    display: inline-flex;
}

.hero-contact-image2 {
    width:100%;
    max-width: 538px;
    max-height: 290px;
    float: left;
}


.hero-contact-image {
    min-width: 538px;
    width: 538px;
    height: 290px;
    background-image: url("/toolkit/images/x2/Mask Group 2.jpg");
    background-position-x: center;
    background-size: contain;

    background-repeat: no-repeat;
}

.hero-contact-section-entry-a {
    margin-top: 0px;
    margin-left: 70px;
    width: 606px;
}

.hero-contact-section-entry-b {

}

.hero-visit {
    margin-top: 66px;
    margin-left: 84px;
    margin-right: 84px;
}

.hero-visit-container {
    margin-top: 72px;
}

.hero-visit-block-a {

}
.hero-visit-block-b {
    width: 808px;
    height: 360px;
    margin-bottom: 112px;
}

.hero-footer {
    background-color: #9cd8e9;
    height: 136px;
    display: flex;
    flex-direction: column;
}

.hero-footer-color {
    background-color: #9cd8e9;
    height: 136px;
    display: flex;
    flex-direction: column;
}

.hero-footer2-color {
    background-color: #6f9aa6;
    height: 83px;
    display: flex;
    flex-direction: column;
}

.hero-footer2 {
    background-color: #6f9aa6;
    height: 83px;
    display: inline-flex;
}

.hero-footer-wrapper {
    margin-top: 112px;
}

.hero-footer-content {
    margin-left: 84px;
    margin-right: 84px;
    margin-bottom: auto;
}

.hero-doc {
    background-image: url("/toolkit/images/docfinder.svg");
    width: 168px;
    height: 31px;
    background-repeat: no-repeat;
}

.hero-top {
    background-image: url("/toolkit/images/top.svg");
    width: 47px;
    height: 47px;
    background-repeat: no-repeat;
}

.doc-map {
    background-image: url("/toolkit/images/osm_ok.png");
    background-repeat: no-repeat;
    background-position-x: center;
    background-size: cover;
    height: 360px;
}

a {
    color: #313131;
    text-decoration: none;
}
.details a:hover {
    text-decoration: underline;
}



@media screen and (max-width: 768px)
{
    .hero-story-education-report
    {
        display: block;
    }
    .hero-story-education-entry
    {
        width: 100%;
        float: left;
    }
    .hero-story-education-entry-r
    {
        width: 100%;
        float: left;
    }

    .image-slide-container
    {
        margin-top: 24px;
    }

    .content-section {
        padding-bottom: 64px;
        margin-bottom: 64px;
    }

    /*.hero-story-section {
        padding-bottom: 84px;
        margin-bottom: 84px;
    }*/
    .hero-story-education {
        margin-left: 29px;
        margin-right: 29px;
    }

    .hero-contact {
        margin-top: 64px;
        padding-left: 37px;
        padding-right: 29px;
    }

    .hero-visit {
        margin-left: 29px;
        margin-right: 29px;
    }

    .hero-contact-section-b {
        margin-bottom: 64px;
    }

    .hero-visit-container {
        margin-top: 64px;
    }

    .doc-map {
        margin-top: 16px;
    }

    .hero-footer-color {
        min-height: 212px;
        height: 100%
    }

    .hero-footer-content {
        margin-left: 29px;
        margin-right: 29px;
    }
}

@media screen and (max-width: 1170px)
{
    .ubuntu45r {
        font-size: 35px;
    }
    .ubuntu35r {
        font-size: 30px;
    }
    .ubuntu22r {
        font-size: 18px;
    }
    .ubuntu22b {
        font-size: 18px;
    }
    .ubuntu22i {
        font-size: 18px;
    }
    .hero-story-header {
        font-size: 35px;
    }
    /*Navi: 21 => 12
    HL: 45 => 35
    Copy: 22 => 18
    “Ausbildung” 35 => 30*/
}


@media screen and (max-width: 1199px)
{
    .content-container {
        margin-left: 29px;
        margin-right: 29px;
    }
    .nav-content-left {
        margin-left: auto;
        margin-right: auto;
    }
    .navbar-nav {
        margin-left: 0;
        margin-right: 0;
    }

}

@media screen and (max-width: 1420px)
{
    .hero-contact {
        display: flex;
       /* padding-left: 58px;
        padding-right: 58px;*/
    }

    .hero-contact-section-entry-a {
        margin-top: 16px;
        margin-left: 0px;
        width: 100%;
    }

    .hero-contact-section-b {
        display: flex;
        flex-direction: column;

        justify-content: center;
        justify-items: center;
        padding-left: 0px;
    }

}

.h1 {
    font-size: inherit !important;
    font-weight: inherit !important;
    line-height: inherit !important;
    color: inherit !important;
    margin: inherit !important;
    padding: inherit !important;
}

.h2 {
    font-size: inherit !important;
    font-weight: inherit !important;
    line-height: inherit !important;
    color: inherit !important;
    margin: inherit !important;
    padding: inherit !important;
}

:root {
    --bar-width: 40px;
    --bar-height: 8px;
    --bar-color: #000;
    --bar-radius: 0px;
    --burger-gap: 6px;
    --burger-amin-time: 300ms ease-in-out;
    --burger-menu-height: calc(var(--bar-height) * 3 + var(--burger-gap) * 2);
}

.hamburger-menu {
    --x-width: calc(var(--burger-menu-height) * 1.41421356237); /* height * sqrt(2) */
    margin-left: 29px;
    width:40px;
    display: flex;
    flex-direction: column;
    gap: var(--burger-gap);
    cursor: pointer;
    outline: none;
}

.hamburger-menu::before,
.hamburger-menu::after,
.hamburger-menu i {
    content: "";
    width: var(--bar-width);
    height: var(--bar-height);
    background-color: var(--bar-color);
    border-radius: var(--bar-radius);

    transition: opacity var(--burger-amin-time), width var(--burger-amin-time), rotate var(--burger-amin-time), transform var(--burger-amin-time), translate var(--burger-amin-time),
    background-color var(--burger-amin-time);
}

.hamburger-menu i {
    appearance: none;
    padding: 0;
    margin: 0;
    outline: none;
    pointer-events: none;
}

.navbar-toggler[aria-expanded="true"] .hamburger-menu::before {
    transform: translate3d(-4px,-8px,0px);

    rotate: -45deg;

    width: var(--x-width);
    /* transform: translate3d(calc(calc(var(--x-width) - var(--bar-width))/2),calc(calc(var(--burger-menu-height) / 2) + calc(var(--bar-height) / -2)),0); */

    transform-origin: bottom right;
}

.navbar-toggler[aria-expanded="false"] .hamburger-menu::before {
    transform: translate3d(0px,0px,0px);
    rotate: 0;
    width: var(--bar-width);
    /* transform: translate3d(calc(calc(var(--x-width) - var(--bar-width))/2),calc(calc(var(--burger-menu-height) / 2) + calc(var(--bar-height) / -2)),0); */

    transform-origin: bottom right;
}

.navbar-toggler[aria-expanded="true"] .hamburger-menu::after {
    transform: translate3d(-6px,14px,0px);
    rotate: 45deg;
    width: var(--x-width);
    /* transform: translate3d(calc(calc(var(--x-width) - var(--bar-width))/2),calc(calc(var(--burger-menu-height) / -2) + calc(var(--bar-height) / 2)),0); */
    transform-origin: bottom right;
}

.navbar-toggler[aria-expanded="false"] .hamburger-menu::after {
    transform: translate3d(0px,0px,0px);
    rotate: 0;
    width: var(--bar-width);
    /* transform: translate3d(calc(calc(var(--x-width) - var(--bar-width))/2),calc(calc(var(--burger-menu-height) / 2) + calc(var(--bar-height) / -2)),0); */

    transform-origin: bottom right;
}

.navbar-toggler[aria-expanded="true"] .hamburger-menu i {
    background-color: blueviolet;
    width: 0px;
    opacity: 0;
}