/* CSS-Document */

/*
100 – Thin
200 – Extra Light (Ultra Light)
300 – Light
400 – Normal
500 – Medium
600 – Semi Bold (Demi Bold)
700 – Bold
800 – Extra Bold (Ultra Bold)
900 – Black (Heavy)
*/

/* roboto-300 - latin */
@font-face {
    font-display: swap;
    /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 300;
    src: url('fonts/roboto-v30-latin-300.woff2') format('woff2');
    /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* roboto-regular - latin */
@font-face {
    font-display: swap;
    /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    src: url('fonts/roboto-v30-latin-regular.woff2') format('woff2');
    /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* roboto-500 - latin */
@font-face {
    font-display: swap;
    /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 500;
    src: url('fonts/roboto-v30-latin-500.woff2') format('woff2');
    /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* roboto-700 - latin */
@font-face {
    font-display: swap;
    /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 700;
    src: url('fonts/roboto-v30-latin-700.woff2') format('woff2');
    /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

.search-slide-in{
    position: fixed;
    right: -100%;
    top: 120px;
}

#such-btn{
    cursor: pointer;
}

.slide-in-search{
    right: 50px;
}

html,
body {
    scroll-behavior: smooth;
}

* {
    margin: 0;
    padding: 0;
    font-family: 'Roboto';
    transition: all .3s;
}

.large-wrapper {
    width: 93%;
    margin: 0 auto;
}

.content-wrapper {
    width: 85%;
    margin: 0 auto;
}

.flex {
    display: flex;
    justify-content: space-between;
}

nav ul {
    display: flex;
    justify-content: space-between;
    list-style-type: none;
}

nav ul li a {
    display: block;
    padding: 10px;
    margin: 0 10px;
    font-size: 15px;
    color: #313130;
    text-transform: uppercase;
    text-decoration: none;
}

nav ul li a:hover {
    color: #D21113;
    text-decoration: underline;
}

nav ul li ul {
    position: fixed;
    top: 100px;
    width: 100%;
    left: 0;
    background-color: #D21113;
    padding: 0;
    max-height: 0;
    overflow: hidden;
    flex-wrap: wrap;
}

.inhaltspunkte .flex{
	flex-wrap: wrap;
}

.inhaltspunkte .flex div{
	width: 48%;
	margin: 30px 0;
} 

nav ul li:hover ul {
    max-height: 300px;
    padding: 20px 0;
}

nav ul li ul li:last-of-type {
    border-right: none;
}

nav ul li ul li {
    border-right: solid 1px white;
}

nav ul li ul li a {
    color: white;
    font-size: 15px;
}

nav ul li ul li a:hover {
    color: white;
    text-decoration: underline;
}

header {
    background-color: white;
    position: fixed;
    top: 0;
    width: 100%;
    left: 0;
    display: flex;
    z-index: 3;
}

header .flex {
    align-items: center;
}

#such-btn {
    margin-right: 30px;
}

#nav-btn {
    cursor: pointer;
}

header .large-wrapper {
    padding: 35px 0;
}

#sticky-icons {
    position: fixed;
    bottom: 20px;
    right: 20px;
    text-align: center;
    z-index: 1;
}

#sticky-icons img {
    width: 50px;
    margin: 0 auto;
    border-radius: 50%;
    padding: 15px;
}

#contact-icon {
    position: relative;
    text-align: center;
    margin-bottom: 30px;
}

.contact-content {
    position: absolute;
    right: 0;
    bottom: 100px;
    opacity: 0;
    visibility: hidden;
}

.contact-content-bottom a {
    background-color: transparent !important;
}

#contact-icon:hover .contact-content {
    opacity: 1;
    visibility: visible;
}

.contact-content::after {
    content: '';
    background-image: url('img/after-mark-contact.svg');
    position: absolute;
    bottom: -20px;
    width: 23px;
    height: 20px;
    background-repeat: no-repeat;
    right: 55px;
}

.contact-content-top {
    background-color: #D21113;
    padding: 30px;
}

#sticky-icons .contact-content-top img {
    width: auto;
    margin: 0 10px 0 0;
}

.contact-content-top a {
    display: flex;
    text-decoration: none;
    justify-content: center;
    align-items: center;
}

.contact-content-top p,
.contact-content-top h3,
.contact-content-top a,
.contact-content-top h4 {
    color: white;
}

.contact-content-bottom {
    background-color: white;
    padding: 30px;
}

.contact-content-bottom p,
.contact-content-bottom h3,
.contact-content-bottom a,
.contact-content-bottom h4 {
    color: #D21113;
}

#sub-nav {
    position: fixed;
    top: 109px;
    background-color: #D21113;
    width: 100%;
    padding-left: 3.5%;
    max-height: 0;
    overflow: hidden;
}

.sub-nav-container ul {
    display: flex;
    flex-wrap: wrap;
    list-style-type: none;
}

.sub-nav-container ul li {
    width: 50%;
}

.sub-nav-container ul li a {
    color: white;
    text-transform: uppercase;
    text-decoration: none;
    padding: 8px 0;
    display: block;
}

.sub-nav-container ul li a:hover {
    text-decoration: underline;
}

img,
video {
    display: block;
    width: 100%;
}

.statement {
    color: white;
    font-size: 48px;
}

.statement p {
    color: white;
    font-size: 48px;
    line-height: 55px;
}

.slide-in-sub {
    max-height: 300px !important;
}

main {
    margin-top: 109px;
}

.video-hero video {
    height: calc(100vh - 109px);
    object-fit: cover;
}

#phone-icon {
    border: solid 2px white;
    border-radius: 50%;
    padding: 5px;
    aspect-ratio: 1 / 1;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 30px;
}

#phone-icon:hover {
    background-color: #D21113;
}

#phone-icon img {
    width: 25px;
    height: 25px;
    margin: 0 auto;
}

#jubi-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 15px;
    border-radius: 50%;
    aspect-ratio: 1 / 1;
}

#jubi-icon svg {
    width: 84px;
    height: auto;
}

.video-hero {
    position: relative;
    display: flex;
    align-items: center;
}

.video-hero .content-wrapper {
    position: absolute;
    left: 0;
    right: 0;
}

.video-onlay {
    top: 0;
    width: 100%;
    height: 100%;
}

.video-onlay p {
    color: white;
    font-size: 50px;
}

.video-onlay p strong {
    font-size: 111px;
    line-height: 135px;
}

.video-onlay span {
    font-size: 111px;
}

.entry-text aside {
    width: 50%;
}

.entry-text article {
    width: 40%;
}

.entry-text {
    background-color: #D21113;
    padding: 115px 0;
}

h1 {
    font-size: 60px;
    font-weight: 500;
    color: white;
}

p {
    font-weight: 300;
    font-size: 19px;
    color: #313130;
    line-height: 30px;
}

.entry-text p {
    color: white;
}

.entry-text aside p {
    text-transform: uppercase;
    font-size: 15px;
}

.button {
    display: inline-block;
    padding: 15px;
    color: white;
    border: solid 2px white;
    border-radius: 30px;
    margin-top: 55px;
    text-decoration: none;
    font-size: 15px;
    text-transform: uppercase;
    z-index: 1;
    position: relative;
}

.button svg {
    margin-left: 25px;
    position: relative;
    top: 3px;
}

.button:hover {
    background-color: white;
    color: #D21113;
}

.button:hover path {
    fill: #D21113 !important;
}

h3 {
    color: #D21113;
    font-size: 15px;
    font-weight: 400;
    text-transform: uppercase;
}

h4 {
    color: #313130;
    font-size: 60px;
    font-weight: 500;
}

h4 span {
    color: #D21113;
}

.jubi-content {
    background-color: #F2F1EE;
}

.jubi-content .large-wrapper {
    position: relative;
    top: -150px;
}

.jubi-content h4 strong {
    color: #D21113;
    font-weight: 500;
}

figure {
    margin: 0;
}

.jubi-content figure {
    width: 50%;
    position: relative;
}

.jubi-content article {
    width: 37%;
}

.jubi-content .large-wrapper {
    margin: 0;
}

.jubi-content .flex {
    align-items: flex-end;
}

.jubi-marke {
    position: absolute;
    top: -50px;
    right: -50px;
}

.karriere-verweis {
    background-color: #F2F1EE;
    padding-bottom: 100px;
}

.karriere-verweis aside {
    width: 55%;
    position: relative;
}

.karriere-verweis article {
    width: 30%;
}

.karriere-verweis .button {
    color: white;
    background-color: #D21113;
    border: #D21113 solid 2px;
}

.karriere-verweis h4 {
    margin-bottom: 40px;
}

.aside-content {
    position: absolute;
    left: -20%;
    width: calc(80% - 60px);
    top: 70%;
    background-color: white;
    padding: 30px;
}

.karriere-verweis .button:hover {
    background-color: white;
    color: #D21113;
}

.karriere-verweis .aside-content h4 {
    color: #D21113;
    text-transform: uppercase;
    font-size: 20px;
    font-weight: 400;
    margin: 35px 0 0;
}

.no-image .onlay {
    justify-content: center;
    align-items: center;
}

.no-image .onlay a {
    color: #313130;
    font-size: 35px;
    font-weight: 300;
    line-height: 45px;
    margin: 0;
    text-align: center;
    text-transform: none;
    padding: 0;
}

.current_page_item>a,
.current_page_ancestor>a {
    color: #D21113;
    text-decoration: underline;
}

.no-image .onlay a:hover {
    background-color: transparent;
}

.no-image svg {
    display: none;
}

.karriere-verweis .aside-content p {
    font-size: 35px;
    font-weight: 300;
    line-height: 45px;
}

.karriere-verweis .aside-content h5 {
    color: #313130;
    font-weight: 400;
    font-size: 20px;
    margin-top: 5px;
}

.leistungen {
    margin: 120px 0;
    z-index: 1;
    position: relative;
}

.leistungen h3 {
    font-size: 80px;
    color: #D21113;
    line-height: 95px;
    font-weight: 500;
}

.kachel {
    width: calc(33.33% - 15px);
    position: relative;
}

.onlay {
    position: absolute;
    left: 0;
    top: 0;
    width: calc(100% - 60px);
    padding: 30px;
    height: calc(100% - 60px);
    display: flex;
    justify-content: flex-start;
    align-items: flex-end;
}

.onlay a {
    display: inline-block;
    padding: 15px;
    color: white;
    border: solid 2px white;
    border-radius: 30px;
    margin-top: 55px;
    text-decoration: none;
    font-size: 15px;
    text-transform: uppercase;
    position: relative;
}

.onlay svg {
    position: relative;
    top: 2px;
    margin-left: 25px;
}

.onlay:hover {
    background-color: rgba(255, 255, 255, .75)
}

.onlay:hover a {
    background-color: #D21113;
}

.no-image .onlay:hover a {
    background-color: transparent;
}

.wall {
    flex-wrap: wrap;
    gap: 15px;
}

.leistungen .heads {
    margin-bottom: 50px;
}

.imagevideo {
    background-color: #F2F1EE;
    padding: 300px 0 0;
    position: relative;
    top: -250px;
}

.imagevideo h4 {
    margin-bottom: 40px;
}

.imagevideo figure {
    width: 68%;
}

.imagevideo article {
    width: 22%;
}

.imagevideo .large-wrapper {
    margin: 0;
    align-items: center;
}

.imagevideo iframe {
    width: 100%;
    height: 690px;
}

.news {
    margin-top: -195px;
    padding: 150px 0;
    background-color: #F2F1EE;
}

.news .heads {
    margin-bottom: 40px;
}

.news .heads h3 {
    font-size: 60px;
    color: #313130;
    font-weight: 500;
    text-transform: none;
}

.kontakt {
    background-color: #F2F1EE;
    padding: 150px 0;
}

.kontakt .flex {
    flex-wrap: wrap;
    align-items: center;
}

.kontakt figure {
    width: 52%;
}

.kontakt article {
    width: 35%;
}

.banner-container {
    width: calc(60% - 100px);
    margin: 0 auto;
    position: relative;
    top: -50px;
    background-color: white;
    padding: 50px;
}

.banner-content div {
    width: 48%;
}

.banner-content div a {
    background-color: #D21113;
    text-decoration: none;
    text-transform: uppercase;
    color: white;
    border-radius: 50px;
    padding: 15px;
    display: flex;
    align-items: center;
    margin: 20px 0 0;
    width: auto;
    max-width: 300px;
    border: solid 2px #D21113;
    font-size: 15px;
}

.banner-content div a:hover {
    color: #D21113;
    border: solid 2px #D21113;
    background-color: white;
}

.banner-content div a:hover path {
    fill: #D21113 !important;
}

.banner-content div svg {
    margin-right: 10px;
}

.red-footer {
    background-color: #D21113;
    padding: 80px 0;
}

footer h4 {
    color: white;
    font-size: 20px;
    font-weight: 700;
    line-height: 35px;
}

footer .red-footer p,
footer .red-footer a,
footer .red-footer ul li {
    color: white;
    font-size: 15px;
    text-decoration: none;
}

footer .red-footer ul {
    list-style-image: url('img/list-item-footer.svg');
    padding-left: 20px;
}

footer .red-footer ul li a {
    margin: 10px 0;
    display: block;
}

.footer-logos a {
    display: block;
    margin-bottom: 50px;
}

.footer-block,
.footer-logos {
    width: 23%;
}

.footer-logos .flex {
    align-items: flex-start;
    margin-top: 30px;
}

.footer-logos .flex img {
    object-fit: contain;
    height: 120px;
    width: auto;
}

.footer-last-bar {
    background-color: #4A4A55;
    padding: 15px 0;
}

.footer-last-bar a,
.footer-last-bar p {
    color: white;
    text-decoration: none;
    font-size: 15px;
}

.footer-last-bar .flex {
    align-items: center;
}

.add-bg {
    background-color: #D21113;
}

.article-container {
    display: flex;
    justify-content: space-between;
    margin: 0 0 0 7.5%;
    width: 92.5%;
    overflow-x: auto;
    padding-bottom: 50px;
    scrollbar-width: none;
    /* Firefox: Ausblenden der Scrollbar */
    -ms-overflow-style: none;
    /* Internet Explorer: Ausblenden der Scrollbar */
}

.article-container article {
    flex: 0 0 auto;
    width: 20%;
    /* Prozentsatz der Breite eines einzelnen Artikels */
    margin-right: 2%;
    /* Prozentsatz des Abstands zwischen den Artikeln */
    box-sizing: border-box;
    background-color: white;
    padding-bottom: 85px;
    position: relative;
}

.news-slider {
    align-items: center;
}

.scroll-divider {
    width: 2px;
    background-color: #D21113;
    margin: 0 15px;
    height: 100%;
}

.scroll-arrow {
    padding: 5px;
    cursor: pointer;
}

.article-container a {
    text-decoration: none;
    display: block;
}

.article-container img {
    height: 260px;
    object-fit: cover;
    width: 100%;
    margin-bottom: 30px;
}

.article-container h5 {
    font-size: 15px;
    color: #D21113;
    font-weight: 400;
}

.article-container h4 {
    font-size: 30px;
    line-height: 36px;
    color: #313130;
    font-weight: 700;
    margin: 7px 0 25px;
}

.article-container p {
    color: #313130;
    font-size: 19px;
    font-weight: 300;
}

.article-wrap {
    width: 85%;
    margin: 0 auto;
}

.more {
    border: solid 2px #D21113;
    border-radius: 30px;
    padding: 5px 15px;
    display: inline-block;
    margin-top: 30px;
    position: absolute;
    bottom: 33px;
    font-size: 15px !important;
    text-transform: uppercase;
    color: #D21113 !important;
}

.excerpt {
    margin-bottom: 30px;
}

.more svg {
    margin-left: 10px;
    position: relative;
    top: 2px;
}

.article-container article:hover .more {
    background: #D21113;
    color: white !important;
}

.article-container article:hover .more svg path,
.article-container article:hover .more svg line {
    stroke: white !important;
}

.news-site .wrapper {
    width: 65%;
    margin: 0 auto;
}

.insta-feed{
    margin: 150px 0;
}

.news-site a{
    color: #D21113;
}

.news-site {
    padding: 100px 0;
}

.news-site h3{
    font-size: 22px;
    margin: 0 0 20px;
}

.news-site ul{
    padding-left: 30px;
}

.news-site ul li {
    font-weight: 300;
    font-size: 19px;
    color: #313130;
    line-height: 30px;
}

.post-image img {
    max-width: 100%;
    height: auto;
    width: auto;
    object-fit: cover;
    margin-bottom: 30px;
}

.news-site h1 {
    color: #313130;
    margin: 10px 0;
    font-size: 24px;
}

.date {
    color: #D21113;
    font-size: 15px;
    text-transform: uppercase;
}

.gallery .grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 10px;
}

.gallery .grid img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gallery,
.main-content-news {
    margin: 50px 0;
}

.gallery .heads {
    margin-bottom: 30px;
}

.sub-header {
    justify-content: flex-end;
    position: relative;
}

.sub-header img {
    width: 65%;
}

.sub-header h1 {
    color: #D21113;
    font-size: 111px;
}

.sub-header .wrapper {
    width: 70%;
    margin: 0 auto;
}

.sub-overlay {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
}

.sub-page-intro {
    margin: 80px 0;
}

.sub-page h2 {
    color: #D21113;
    text-transform: uppercase;
    font-size: 15px;
    font-weight: 300;
}

.text-container {
    width: 70%;
}

.anchor {
    position: absolute;
    top: -180px;
    left: 0;
    width: 100%;
    height: 1px;
    visibility: hidden;
}

.content-container-kabelbau {
    position: relative;
}

.red-sect {
    background-color: #D21113;
    padding: 150px 0;
}

.content-container-kabelbau figure {
    width: 45%;
}

.content-container-kabelbau article {
    width: 50%;
}

.red-sect h3 {
    color: white;
    font-size: 15px;
    text-transform: uppercase;
    font-weight: 300;
}

.red-sect h4 {
    color: white;
    text-transform: uppercase;
    font-size: 60px;
    font-weight: 500;
    margin: 20px 0 40px;
}

.red-sect p {
    color: white;
}

.content-container-kanalbau .flex {
    flex-wrap: wrap;
}

.content-container-kanalbau {
    margin: 150px 0;
    position: relative;
}

.content-container-kanalbau .heads {
    width: 100%;
    text-align: center;
}

.content-container-kanalbau article,
.content-container-kanalbau figure {
    width: 48%;
}

.content-container-kanalbau .link {
    width: 100%;
    text-align: center;
}

.rohrleitungsbau,
.fernmeldetechnik {
    margin: 150px 0;
}

.rohrleitungsbau figure,
.rohrleitungsbau article,
.fernmeldetechnik figure,
.fernmeldetechnik article {
    width: 48%;
}

.rohrleitungsbau ul li,
.fernmeldetechnik ul li {
    display: inline-block;
    font-weight: 300;
    font-size: 19px;
    color: #313130;
    line-height: 30px;
    position: relative;
    margin: 20px 0 20px 50px;
}

.rohrleitungsbau ul li::before,
.fernmeldetechnik ul li::before {
    content: '';
    width: 15px;
    height: 15px;
    border: solid 8px #D6D6D6;
    background-color: #D21113;
    border-radius: 50%;
    left: -40px;
    top: 0;
    position: absolute;
}

.rohrleitungsbau .button,
.fernmeldetechnik .button,
.strassenbeleuchtung .button,
.horizontalbohrtechnik .button,
.kabeleinblastechnik .button,
.zeichenbuero .button,
.jubi-history .button,
.sub-header .button,
.benefits .button {
    color: #D21113;
    border: solid 2px #D21113;
}

.rohrleitungsbau .button:hover,
.fernmeldetechnik .button:hover,
.strassenbeleuchtung .button:hover,
.horizontalbohrtechnik .button:hover,
.kabeleinblastechnik .button:hover,
.zeichenbuero .button:hover,
.jubi-history .button:hover,
.sub-header .button:hover,
.benefits .button:hover {
    color: white;
    border: solid 2px #D21113;
    background-color: #D21113;
}

.rohrleitungsbau .button:hover svg path,
.fernmeldetechnik .button:hover svg path,
.strassenbeleuchtung .button:hover svg path,
.horizontalbohrtechnik .button:hover svg path,
.kabeleinblastechnik .button:hover svg path,
.zeichenbuero .button:hover svg path,
.jubi-history .button:hover svg path,
.sub-header .button:hover svg path,
.benefits .button:hover svg path,
.rohrleitungsbau .button:hover svg line,
.fernmeldetechnik .button:hover svg line,
.strassenbeleuchtung .button:hover svg line,
.horizontalbohrtechnik .button:hover svg line,
.kabeleinblastechnik .button:hover svg line,
.zeichenbuero .button:hover svg line,
.jubi-history .button:hover svg line,
.sub-header .button:hover svg line,
.benefits .button:hover svg line {
    stroke: white !important;
    fill: transparent !important;
}

.strassenbeleuchtung {
    position: relative;
}

.strassenbeleuchtung::after {
    content: '';
    position: absolute;
    left: 0;
    height: 200px;
    background-color: #F2F1EE;
    width: 100%;
    bottom: 0;
    z-index: -1;
}


.strassenbeleuchtung article,
.strassenbeleuchtung figure {
    width: 48%;
}

.horizontalbohrtechnik .flex {
    flex-wrap: wrap;
    align-items: flex-start;
}

.horizontalbohrtechnik .heads {
    width: 100%;
}

.horizontalbohrtechnik article {
    width: 60%;
}

.horizontalbohrtechnik article div {
    width: 48%;
}

.horizontalbohrtechnik aside {
    width: 30%;
}

.horizontalbohrtechnik {
    background-color: #F2F1EE;
    padding: 150px 0 0;
}

.aside-text {
    padding: 40px;
    background-color: white;
}

.aside-text h5 {
    color: #D21113;
    font-size: 19px;
    font-weight: 500;
    margin-bottom: 30px;
}

.aside-text ul li {
    position: relative;
    list-style-type: none;
    font-weight: 300;
    font-size: 19px;
    color: #313130;
    line-height: 30px;
}

.aside-text ul {
    padding-left: 20px;
}

.aside-text ul li::before {
    content: '';
    width: 5px;
    height: 5px;
    border: solid 2px #D6D6D6;
    background-color: #D21113;
    border-radius: 50%;
    left: -15px;
    top: 10px;
    position: absolute;
}

.aside-img {
    position: relative;
}

.aside-img::before {
    content: '';
    background-image: url('img/info-icon.svg');
    position: absolute;
    bottom: -20px;
    left: -50px;
    width: 116px;
    height: 110px;
}

.kabeleinblastechnik {
    position: relative;
}

.kabeleinblastechnik article,
.kabeleinblastechnik figure,
.zeichenbuero article,
.zeichenbuero figure {
    width: 48%;
}

.kabeleinblastechnik .flex {
    align-items: flex-end;
}

.kabeleinblastechnik::before {
    content: '';
    position: absolute;
    left: 0;
    height: 200px;
    background-color: #F2F1EE;
    width: 100%;
    top: 0;
    z-index: -1;
}

.zeichenbuero {
    margin: 150px 0;
}

.leistungen-page section {
    position: relative;
}

.numbers .flex {
    flex-wrap: wrap;
}

.numbers aside {
    width: 30%;
    display: flex;
    flex-wrap: wrap;
}

.numbers aside figure {
    width: 100%;
}

.numbers aside figure:first-of-type {
    border-bottom: solid 1px white;
}

.numbers aside figure {
    padding: 50px 0;
}

.numbers article {
    width: calc(35% - 60px);
    padding: 0 30px;
    border-left: solid 1px white;
    border-right: solid 1px white;
    display: flex;
    align-items: center;
}

.numbers {
    background-color: #D21113;
    padding: 130px 0;
    text-align: center;
}

.numbers p {
    font-size: 30px;
    color: white;
    font-weight: 300;
}

.numbers h3 {
    color: white;
    text-transform: uppercase;
    margin-bottom: 50px;
}


.numbers h4 {
    font-size: 111px;
    font-weight: 500;
    color: white;
}

.anpacker figure {
    width: 60%;
}

.anpacker article {
    width: 30%;
}

.anpacker .flex {
    flex-wrap: wrap;
}

.anpacker {
    margin: 150px 0;
}

.partner-text {
    margin: 150px 0;
    text-align: center;
}

.anpacker a {
    color: #D21113;
}

.zukunft {
    padding: 150px 0;
    margin: 150px 0;
    text-align: center;
    background-color: #F2F1EE;
}

.zukunft h3 {
    font-size: 60px;
    font-weight: 500;
}

.zeitstrahl {
    display: flex;
    overflow: scroll;
    padding: 50px 0;
    position: relative;
}

.zeitstrahl::before {
    content: '';
    background-color: #D21113;
    height: 2px;
    width: 200%;
    position: absolute;
    top: 74px;
    left: 0;
    z-index: -1;
}

.zeitstrahl-marke {
    margin: 0 20px;
    min-width: 260px;
    text-align: center;
}

.zeitstrahl-marke:first-of-type {
    margin-left: 0;
}

.zeitstrahl-marke:last-of-type {
    margin-right: 0;
}

.zeitstrahl h4 {
    color: #D21113;
    font-size: 60px;
    font-weight: 500;
    margin-top: 30px;
}

.zeitstrahl p {
    font-size: 19px;
    font-weight: 300;
}

.zeitstrahl-box {
    position: relative;
    padding-top: 102px;
}

.zeitstrahl-contents .zeitstrahl-box:first-of-type::before {
    display: none;
}

.zeitstrahl-contents .zeitstrahl-box:first-of-type {
    padding-top: 0;
}

.zeitstrahl-box::before {
    content: '';
    background-image: url('img/marke-second.svg');
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 50px;
    height: 102px;
    top: 0;
}

.timeline h3 {
    color: #313130;
    font-size: 60px;
    font-weight: 500;
}

.prev,
.next {
    margin: 0 20px;
    cursor: pointer;
}

.jubi {
    position: relative;
}

.jubi-overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    top: 0;
    left: 0;
}

.jubi-overlay .flex {
    justify-content: flex-end;
    margin-bottom: 50px;
}

.jubi-overlay p {
    font-size: 60px;
    font-weight: 500;
    color: white;
}

.unternehmen-cta {
    position: relative;
}

.unternehmen-cta::before {
    background-color: #313130;
    top: 0;
    left: 0;
    width: 100%;
    height: 25%;
    content: '';
    position: absolute;
}

.unternehmen-cta .content-wrapper {
    z-index: 1;
    position: relative;
}

.logo-container img {
    width: 100%;
}

.jubi-page {
    background-image: url('img/jubi-bg.svg');
    background-repeat: no-repeat;
    background-position: top;
}

.jubi-page h1 {
    color: #D21113;
    text-transform: uppercase;
    font-size: 15px;
    font-weight: 300;
}

.jubi-intro {
    position: relative;
}

.jubi-intro .large-wrapper {
    position: relative;
}

.jubi-intro .flex {
    justify-content: flex-end;
    align-items: flex-end;
}

.jubi-intro article {
    width: 48%;
}

.jubi-intro article h3,
.jubi-intro article h4,
.jubi-intro article h5,
.jubi-intro article a,
.jubi-intro article p,
.jubi-content-sub h3,
.jubi-content-sub h4,
.jubi-content-sub h5,
.jubi-content-sub p,
.jubi-content-sub a {
    color: white;
}

.jubi-intro section {
    background-color: #313130;
}

.jubi-content-sub {
    background-color: #313130;
}

.jubi-content-sub .flex {
    align-items: flex-start;
    margin: 0 0 0 auto;
}

.jubi-content-sub article,
.jubi-content-sub figure {
    width: 48%;
}

.jubi-content-sub {
    padding: 100px 0 0;
}

.familie {
    margin: 100px 0;
}

.familie article,
.familie aside,
.jubi-history article,
.jubi-history figure {
    width: 48%;
}

.familie .flex {
    align-items: flex-end;
}

.familie h5 {
    font-size: 50px;
    color: #D21113;
    font-weight: 300;
    text-align: center;
}

.full-image {
    margin: 100px 0;
}

.jubi-history .flex {
    align-items: center;
}

.jubi-history {
    margin: 150px 0;
}

.jubi-leistungen h3 {
    font-size: 15px;
    font-weight: 400;
    color: #D21113;
    text-align: center;
}

.jubi-leistungen h4 {
    font-size: 60px;
    font-weight: 500;
    color: #313130;
    text-align: center;
}

.news-article .flex {
    flex-wrap: wrap;
    gap: 20px;
    justify-content: flex-start;
    z-index: 1;
    position: relative;
    padding-bottom: 100px;
}

.news-article article {
    width: calc(33.33% - 20px);
    position: relative;
    padding-bottom: 100px;
    background-color: white;
}

.news-article article img {
    height: 250px;
    width: 100%;
    object-fit: cover;
    margin-bottom: 30px;
}

.news-article {
    margin: 150px 0;
    position: relative;
}

.news-article::after {
    position: absolute;
    top: 10%;
    height: 90%;
    width: 100%;
    background-color: #D21113;
    content: '';
    left: 0;
    z-index: 0;
}

.news-article article a {
    text-decoration: none;
}

.news-article article h4 {
    font-size: 30px;
}

.news-article article h5 {
    font-size: 15px;
    color: #D21113;
    font-weight: 400;
}

.teamgeist {
    background-color: #D21113;
    padding: 150px 0;
}

.teamgeist aside {
    width: 50%;
    position: relative;
}

.teamgeist .tg-onlay {
    position: absolute;
    background-color: white;
    padding: 50px;
    bottom: -50px;
    right: -50px;
    text-align: center;
    width: 50%;
}

.teamgeist .tg-onlay h3 {
    font-size: 35px;
    font-weight: 300;
    text-align: center;
    color: #313130;
    margin-bottom: 35px;
    line-height: 45px;
}

.teamgeist .tg-onlay h4 {
    font-size: 15px;
    font-weight: 400;
    text-align: center;
    color: #D21113;
    line-height: 22px;
}

.teamgeist .tg-onlay h5 {
    font-size: 15px;
    font-weight: 400;
    text-align: center;
    line-height: 22px;
}

.teamgeist article {
    width: 40%;
}

.teamgeist article h3,
.teamgeist article h4,
.teamgeist article a,
.teamgeist article p {
    color: white;
}

.teamgeist article p {
    padding-left: 50px;
}

.job-wall {
    gap: 50px;
    flex-wrap: wrap;
}

.job-wall a {
    width: calc(50% - 80px);
    background-color: white;
    color: #313130;
    font-size: 19px;
    font-weight: 500;
    padding: 15px;
    text-decoration: none;
}

.job-wall a:hover {
    background-color: #313130;
    color: white;
}

.stellen {
    background-color: #D21113;
    padding: 150px 0;
}

.stellen .heads {
    text-align: center;
    margin: 50px 0;
}

.stellen .heads h3,
.stellen .heads h4,
.stellen .heads h5 {
    color: white;
    text-align: center;
}

.stellen .heads h3 {
    font-size: 15px;
}

.stellen .heads h4 {
    font-size: 60px;
    font-weight: 500;
    margin: 30px 0;
}

.stellen .heads h5 {
    font-size: 19px;
    font-weight: 300;
}

.cta-apply {
    text-align: center;
}

.videos article {
    width: 30%;
}

.videos .flex {
    align-items: center;
}

.videos aside {
    flex-wrap: wrap;
}

.videos aside .video:first-of-type {
    width: 100%;
}

.videos aside .video {
    width: 30%;
}

.videos aside .video h4 {
    color: white;
    font-size: 15px;
    font-weight: 400;
    text-transform: uppercase;
    margin: 30px 0;
}

iframe {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
}

.videos {
    padding: 150px 0;
    background-size: cover;
}

.videos article h3,
.videos article h4 {
    color: white;
}

.slider {
    position: relative;
    width: 800px;
    margin: 0 auto;
    overflow: hidden;
}

.slides {
    display: flex;
    transition: transform 0.5s ease-in-out;
}

.slide {
    box-sizing: border-box;
}

.videos button.prev,
.videos button.next {
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    padding: 10px;
    cursor: pointer;
    margin: 50px 0 0 0;
}

button.prev {
    left: 10px;
}

button.next {
    right: 10px;
}

.slides h4 {
    color: white;
    font-size: 15px;
    font-weight: 400;
    text-transform: uppercase;
    margin-top: 20px;
}

.benefits {
    padding: 130px 0;
}

.benefits .heads {
    text-align: center;
}

.vorteil {
    width: 30%;
    align-items: center;
}

.benefits .flex {
    flex-wrap: wrap;
}

.vorteil-img {
    width: 30%;
}

.vorteil-img img {
    width: 140px;
    height: auto;
    object-fit: contain;
}

.vorteil-content {
    width: 65%;
}

.benefit-wall {
    gap: 65px;
    margin: 100px 0;
}

.vorteil-content h3 {
    font-size: 19px;
}

.benefits .button {
    margin: 0 auto;
}

.cta-benefits {
    text-align: center;
}

.videos-front {
    padding: 150px 0;
}

.video-single {
    width: 48%;
    background-color: white;
}

.videos-front .video-single h3 {
    font-size: 35px;
    font-weight: 500;
    color: #313130;
}

.videos-front .video-single h4 {
    color: #D21113;
    font-size: 15px;
    text-transform: uppercase;
    font-weight: 400;
}

.desc-container {
    padding: 15px;
}

.videos-front .heads {
    margin: 0 0 65px 0;
    width: 50%;
}

.videos-front h3,
.videos-front h4 {
    color: white;
}

.video-wall {
    align-items: flex-start !important;
}

.single-video:first-of-type {
    width: 100%;
}

.single-video {
    width: calc(20% - 50px);
}

.single-video h4 {
    color: white;
    font-size: 15px;
    text-transform: uppercase;
}

.video-wall {
    gap: 30px 50px;
}

.videos article {
    width: 100%;
    text-align: center;
    margin-bottom: 65px;
}

@media only screen and (max-width:1650px) {
    .jubi-content .large-wrapper {
        top: -50px;
    }

    .jubi-marke {
        position: absolute;
        top: 25px;
        right: 25px;
        width: 200px;
    }

    h4,
    .leistungen h3 {
        font-size: 45px;
    }

    .leistungen h3 {
        line-height: 55px;
    }

    .no-image .onlay a {
        font-size: 20px;
        line-height: 35px;
    }
}

@media only screen and (max-width:1450px) {
    .sub-nav-container ul li a {
        padding: 5px 0;
    }

    .logo-container img {
        width: 450px;
    }

    .vorteil-img img {
        width: 100%;
    }

    .vorteil {
        width: calc(48% - 65px);
    }

    .jubi-overlay p {
        font-size: 30px;
    }

    .statement p {
        font-size: 30px;
        line-height: 45px;
    }

    nav ul li ul li a {
        margin: 10px;
    }

    .banner-container {
        top: 0;
    }

    .numbers h4 {
        font-size: 80px;
    }

    .red-sect h4 {
        font-size: 45px;
        margin: 20px 0;
    }
}

@media only screen and (max-width:1200px) {
    nav {
        position: fixed;
        height: calc(100vh - 109px);
        background-color: white;
        top: 109px;
        width: 50%;
        right: -100%;
        z-index: 2;
        overflow: scroll;
    }

    .full-image {
        margin: 50px 0;
    }

    .jubi-content-sub .flex {
        margin: 0 auto;
    }

    .jubi-intro article {
        width: 100%;
        padding-top: 30px;
    }

    .logo-container img {
        width: 250px;
    }

    .news-article article {
        width: calc(50% - 20px);
    }

    .jubi-overlay {
        position: initial;
        background-color: #313130;
    }

    .jubi-overlay .content {
        width: 100%;
        padding: 50px 0;
    }

    .unternehmen-cta::before {
        display: none;
    }

    .jubi-overlay .flex {
        margin-bottom: 0;
    }

    .text-container {
        width: 100%;
    }

    #sticky-icons {
        display: none;
    }

    .footer-block,
    .footer-logos {
        width: 48%;
    }

    .article-container article {
        width: 40%;
    }

    .kachel {
        width: calc(50% - 15px);
    }

    .content-wrapper {
        width: 93%;
    }

    nav ul li {
        display: block;
    }

    nav ul {
        display: block;
    }

    nav ul li ul {
        position: initial;
        top: 0;
        max-height: unset;
    }

    nav ul li ul li a {
        padding-left: 20px;
    }

    nav ul li ul li {
        display: block;
    }

    nav ul li:hover ul {
        max-height: unset;
        padding: 0;
    }

    #sub-nav {
        display: none;
    }

    nav ul li ul li {
        border-right: 0;
    }

    .slide-in-main {
        right: 0;
    }

    .flex {
        flex-wrap: wrap;
    }

    .entry-text aside,
    .entry-text article,
    .jubi-content figure,
    .jubi-content article,
    .karriere-verweis article,
    .karriere-verweis aside,
    .video-single,
    .kontakt article,
    .kontakt figure,
    .banner-content div,
    .anpacker figure,
    .anpacker article,
    .content-container-kabelbau figure,
    .content-container-kabelbau article,
    .content-container-kanalbau article,
    .content-container-kanalbau figure,
    .rohrleitungsbau figure,
    .rohrleitungsbau article,
    .fernmeldetechnik figure,
    .fernmeldetechnik article,
    .strassenbeleuchtung article,
    .strassenbeleuchtung figure,
    .horizontalbohrtechnik article div,
    .horizontalbohrtechnik aside,
    .horizontalbohrtechnik article,
    .kabeleinblastechnik article,
    .kabeleinblastechnik figure,
    .zeichenbuero article,
    .zeichenbuero figure,
    .teamgeist aside,
    .teamgeist article,
    .jubi-content-sub article,
    .jubi-content-sub figure,
    .familie article,
    .familie aside,
    .jubi-history article,
    .jubi-history figure,
    .familie article,
    .familie aside,
    .jubi-history article,
    .jubi-history figure {
        width: 100%;
        margin: 20px 0;
    }

    .stellen {
        padding: 50px 0;
    }

    .teamgeist .tg-onlay h3 {
        font-size: 20px;
        line-height: 35px;
    }

    .teamgeist {
        padding: 50px 0;
    }

    .teamgeist article p {
        padding: 0;
    }

    .teamgeist .tg-onlay {
        position: initial;
        padding: 10px;
        width: calc(100% - 20px);
    }

    .aside-img::before {
        bottom: -10px;
        left: -10px;
    }

    .content-container-kanalbau {
        margin: 20px 0;
    }

    .red-sect {
        padding: 50px 0;
    }

    .anpacker,
    .partner-text {
        margin: 50px 0;
    }


    .aside-content {
        position: initial;
        padding: 20px;
        width: calc(100% - 40px);
    }

    .videos-front .heads {
        width: 100%;
        margin: 0 0 30px 0;
    }

    .videos-front {
        padding: 50px 0;
    }

    .benefit-wall {
        gap: 0;
    }

    .vorteil {
        width: 48%;
        margin: 20px 0;
    }

    .karriere-verweis .aside-content p {
        font-size: 20px;
        font-weight: 300;
        line-height: 35px;
    }

    h1 {
        font-size: 45px;
    }

    .entry-text {
        padding: 50px 0;
    }

    header .flex {
        flex-wrap: nowrap;
    }

    .jubi-content .large-wrapper {
        margin: 0 auto;
    }

    .news .heads h3,
    .zukunft h3,
    .timeline h3,
    .stellen .heads h4 {
        font-size: 45px;
    }

    .job-wall a {
        width: calc(100% - 30px);
    }

    .zeitstrahl-controls {
        margin: 50px 0 0;
    }

    .sub-header h1 {
        font-size: 60px;
    }

    .numbers h4 {
        font-size: 50px;
    }

    .numbers p {
        font-size: 22px;
    }
}

@media only screen and (max-width:750px) {
    .video-onlay p strong {
        font-size: 80px;
        line-height: 95px;
    }

    .vorteil {
        align-items: initial;
        width: calc(48% - 20px);
    }

    .benefit-wall {
        gap: 20px;
    }

    .vorteil-img {
        width: 100%;
        margin-bottom: 20px;
    }

    .vorteil-content {
        width: 100%;
    }

    .vorteil-img img {
        max-width: 140px;
    }

    .text-container .button {
        margin-top: 10px;
        background-color: white;
    }

    .sub-header h1 {
        font-size: 45px;
    }

    .numbers aside {
        width: 100%;
    }

    .numbers {
        padding: 50px 0;
    }

    .numbers article {
        width: calc(100% - 60px);
        border-top: solid 1px white;
        border-bottom: solid 1px white;
        border-right: none;
        border-left: none;
        padding: 60px;
    }

    .numbers article div {
        margin: 0 auto;
    }

    .video-onlay p {
        font-size: 35px;
        line-height: 45px;
    }

    .no-image {
        height: 250px;
    }

    nav {
        width: 95%;
    }

    .kachel {
        width: calc(100% - 15px);
    }

    .article-container article {
        width: 70%;
    }

    .banner-container {
        width: calc(100% - 100px);
    }

    .footer-block,
    .footer-logos {
        width: 100%;
        margin: 20px 0;
    }

    .red-sect h4,
    .leistungen-page h4,
    .leistungen h3 {
        font-size: 22px;
        overflow-wrap: break-word;
    }

    .leistungen-page {
        overflow-wrap: break-word;
    }

    .leistungen-page img {
        max-height: 75vh;
        object-fit: cover;
    }

    .familie h5 {
        font-size: 32px;
    }

}

@media only screen and (max-width:650px) {
    .news-article article {
        width: calc(100% - 20px);
    }
}

@media only screen and (max-width:550px) {

    h1,
    h4,
    .leistungen h3 {
        font-size: 30px;
    }

    .anchor {
        top: -90px;
    }


    .logo-container img {
        width: 130px;
    }

    .article-container article {
        width: 90%;
    }

    .leistungen h3 {
        line-height: 45px;
    }

    .news {
        padding: 150px 0 0;
    }

    .sub-header h1 {
        font-size: 30px;
    }

    .videos-front .video-single h3 {
        font-size: 20px;
    }


    .vorteil {
        width: 100%;
    }

    .jubi-marke {
        position: absolute;
        top: 25px;
        right: 25px;
        width: 100px;
    }


    .vorteil {
        align-items: initial;
        width: calc(100% - 20px);
    }

    nav {
        height: calc(100vh - 98px);
        top: 98px;
    }

    .onlay a {
        border-radius: 50px;
    }

    .onlay a svg {
        display: none;
    }

    #logo img {
        width: 200px;
    }
}