@font-face {
    font-family: "Libre Franklin";
    src: url("../fonts/LibreFranklin-Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Libre Franklin";
    src: url("../fonts/LibreFranklin-Medium.ttf") format("truetype");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Libre Franklin";
    src: url("../fonts/LibreFranklin-SemiBold.ttf") format("truetype");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Libre Franklin";
    src: url("../fonts/LibreFranklin-Bold.ttf") format("truetype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

:root {
    --maxwidth: 1440px;
    --primary-color: #0d6efd;
    --accent-color: #f8f9fa;
    --color-black: #5d5c65;
    --color-grey: #82818a;
    --color-red: #b9004d;
    --color-white: #ffffff;
}

html {
    scroll-behavior: smooth;

}

body {
    font-family: "Libre Franklin", sans-serif;
    color: var(--color-black);
    font-size: 16px;
    font-weight: 500;
    hyphens: auto;
}

#scrollUpBtn {
  display: none; 
  position: fixed; 
  bottom: 20px;
  right: 30px; 
  z-index: 99; 
  border: none;
  outline: none;
  background-color: var(--color-black);
  color: var(--color-white);
  cursor: pointer;
  padding: 10px;
  width: 47px;
  border-radius: 10px;
  font-size: 18px;
  transition: opacity 0.3s;
}

#impressum {
    display: none;
}

h1 {
    font-size: 52px;
}

h2 {
    font-size: 32px;
}

h3 {
    font-size: 24px;
}

h4 {
    font-size: 20px;
}

.text-light {
    font-weight: 400;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

button:focus,
button:active,
.btn:focus,
.btn:active {
    outline: none;
    box-shadow: none;
}

.navbar-toggler:focus,
.navbar-toggler:active {
    outline: none;
    box-shadow: none;
}

.btn-close:focus,
.btn-close:active {
    outline: none;
    box-shadow: none;
}

.navbar-toggler {
    border: none;
}

/* Container */

div.container-custom {
    width: 100%;
    max-width: 1440px;
    margin-bottom: 80px;
}

div.container-navigation {
    width: 100%;    
    max-width: 1440px;
    margin: 0 auto;
    color: var(--color-grey);
}

div.container-custom, div.container-navigation {
    padding: 30px 80px;
}

#section-optimierung {
    padding: 90px 20px;
}

#section-optimierung div.container-custom > div {
    background-color: white;
    padding: 80px 20px;
}

.custom-gap {
    display: flex;
    grid-gap: 20px;
    --bs-gutter-x: 20px;
    --bs-gutter-y: 20px;
}

.slogan-box {
    display: flex;
    flex-direction: column;
    width: 100%;
    aspect-ratio: 1 / 1;
    padding: 30px;
    border-radius: 8px;
    background-color: var(--color-grey);
}

.slogan-box img {
    margin-bottom: 30px;
}

.slogan-box p {
    margin-top: auto;
    margin-bottom: 0;
    color: var(--color-white);
}

.top-fill {
    min-height: 100%;
}

.image-box {
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 8px;
}

.image-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Navigation */

.offcanvas {
    transition: transform 0.4s ease-in-out, opacity 0.3s ease;
}

div.offcanvas-custom div.container-navigation {
    height: 123px;
    color: var(--color-white);
}

div.offcanvas-custom {
    width: 100vw !important;
    min-height: 100vh;
    color: var(--color-white);
    background-color: rgba(130, 129, 138, 0.92);
    height: 100vh;
    overflow-y: auto;
    flex-direction: column;
    -webkit-overflow-scrolling: touch;
}

.lang-link, .lang-seperator {
    font-size: 17px;
    font-weight: 600;
}

.lang-link:hover,
.red-link {
    color: var(--color-red);
}

.btn-close {
    width: unset;
    height: unset;
    width: 44px;
    background-image: none;
}

.navbar-nav {
    text-align: right;
}

.navbar-nav a.nav-link {
    font-size: 30px;
    font-weight: 600;
    margin: 0;
}

.nav-link-button {
    display: inline-block;
    margin-top: 14px;
    padding: 14px 20px;
    justify-content: center;
    align-items: center;
    border-radius: 24px;
    border: 1px solid var(--color-red);
    background: var(--color-red);
    color: var(--color-white);
}

/* Listen */

.list-custom {
    list-style: none;
    padding: 0;
    margin: 0;
}

.list-custom  li {
    display: flex;
    align-items: center; 
    gap: 10px;
    margin-bottom: 10px;
}

.list-custom  li:last-child {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 0px;
}

.list-icon {
    display: inline-block;
}

/* Buttons */

.button-custom {
    display: inline-block;
    margin-top: 14px;
    padding: 14px 20px;
    justify-content: center;
    align-items: center;
    border-radius: 24px;
    text-decoration: none;
}

.button-custom img {
    display: inline;
    margin-left: 5px;
    margin-bottom: 1px;
}

.button-red {
    background: var(--color-red);
    color: var(--color-white);
    border: 2px solid var(--color-red);
}

.button-white {
    background: var(--color-white);
    color: var(--color-red);
    border: 2px solid var(--color-red);
}

.button-red-white {
    background: var(--color-red);
    color: var(--color-white);
    border: 2px solid var(--color-white);
}

#section-alternative {
    background-color: rgba(130, 129, 138, 0.10);
}

#section-alternative h1 {
    margin: 50px 0 50px 0;
    text-align: center;
}

#section-alternative p.bold {
    margin: 60px 0 420px 0;
    font-size: 24px;
    font-weight: 600;
}

#section-alternativ-red {
    background-color: var(--color-red);
}

#section-alternativ-red div.container-custom {
    padding-bottom: 110px;
    margin-bottom: 0;
}

#section-alternativ-red div {
    margin-top: -242px;
}

#section-netzwerkprinzip div {
    margin-top: 20px;
}

#section-leistung div {
    margin-top: 20px;
}

#section-wirtschaftlichkeit p.bold {
    margin-top: 100px;
    font-size: 24px;
    font-weight: 600;
}

#section-wirtschaftlichkeit div.container-custom {
    margin-bottom: 50px;
}

#section-postprozesse {
    background-color: var(--color-red);
    color: var(--color-white);
}

#section-postprozesse div.container-custom {
    padding: 90px 90px;
    margin-bottom: 0;
}

#section-postprozesse a.button-custom {
    margin-top: 50px;
}

#section-qualitaet p.bold {
    margin-top: 50px;
    font-size: 24px;
    font-weight: 600;
}

#section-qualitaet div.container-custom {
    margin-bottom: 40px;
}

#section-transport div.container-custom {
    padding-top: 100px;
    padding-bottom: 100px;
    margin-bottom: 0;
}

#section-partnerschaft {
    background-color: rgba(130, 129, 138, 0.10);
}

#section-partnerschaft div.container-custom {
    padding-bottom: 70px;
    margin-bottom: 0;
}

#section-partnerschaft h1 {
    margin: 50px 0 50px 0;
    text-align: center;
}

#section-partnerschaft p.bold {
    margin-top: 60px;
    font-size: 24px;
    font-weight: 600;
}

#section-optimierung {
    background-image: url("../images/optimierung.jpg");
    background-size: cover;
    padding: 90px;
}

#section-optimierung div.container-custom {
    margin-bottom: 0;
}

#section-optimierung div.container-custom > div {
    background-color: white;
    padding: 80px;
}

#section-impressum h1 {
    margin-top: 70px;
    margin-bottom: 50px;
}

#section-impressum h3,
#section-impressum h4 {
    margin-top: 30px;
    margin-bottom: 20px;
}

#section-impressum ul {
    margin-top: 15px;
}

.note {
    padding: 30px;
    border-radius: 8px;
    color: var(--color-white);
    background-color: var(--color-grey);
    min-height: 250px;
    border-left: 10px solid var(--color-red) !important;
}

.note:hover {
    background-color: var(--color-red);
    transition: background-color 0.5s ease;
}

.note h3 {
    margin-bottom: 20px;
}

.iconnote {
    position: relative;
    height: 150px;
    display: flex;
    align-items: flex-end;
    box-shadow: 0 0 0 1px var(--color-black), 0 0 0 2px rgba(0,0,0,0.2);
    border-radius: 8px;
    padding: 20px;
    background-color: var(--color-white);
    margin-top: 25px;
}

.iconnote p {
    margin: 0;
}

.iconnote img {
    position: absolute;
    top: -35px;
    left: 17px;
    background-color: var(--color-white);
    padding: 8px;
}

.iconnote-2 p {
    margin: 0;
}

.iconnote-2 img {
    padding: 8px;
}

.p2-background {
    background-image: url("../images/P2_logo_2.png");
    background-repeat: no-repeat;
    background-size: auto 531px;
    background-position: calc(100% + 80px) center;
    margin-top: 80px;
}
/* Footer */

#footer {
    background-color: var(--color-black);
    color: var(--color-white);
}

#footer div.container-custom {
    padding-top: 90px;
    padding-bottom: 90px;
    margin-bottom: 0;
}

#footerlogo {
    display: flex;
    align-items: center;
    gap: 10px;
}

#footerlogo img {
    height: 100px;
}

#footerlogo span {
    display: inline-block;
    font-size: 52px;
    margin-left: 20px;
    margin-bottom: 5px;
}

#footer .contact {
    display: flex;
}

#footer .contact p {
    margin-top: 13px;
    margin-left: 15px;
}

#footer .bildbox {
    width: 35px;
    margin: 8px;
}

.bildbox img {
    max-width: 100%;
}

#footerimprint {
    margin-top: 25px;
}

#footer a {
    text-decoration: none;
    color: var(--color-white);
}

#footer a:hover {
    text-decoration: underline;
}

@media (max-width: 768px) {

    .nav-item {
        margin-bottom: 0 !important;
    }

    .navbar-nav a.nav-link {
        font-size: 20px;
    }

    #section-alternative div.container-custom {
        margin-bottom: 0;
    }

    #section-alternative p.bold {
        margin: 60px 0 70px 0;
    }

    #section-wirtschaftlichkeit p.bold {
        margin-top: 50px;
        margin-bottom: 30px;
    }

}

@media (max-width: 1200px) {

    body {
        font-size: 15px;
    }

    h1 {
        font-size: 40px;
    }

    h2 {
        font-size: 28px;
    }

    div.container-custom, div.container-navigation {
        padding: 20px 20px;
    }

    #section-postprozesse div.container-custom {
        padding: 90px 20px;
        margin-bottom: 0;
    }

    #section-optimierung {
        padding: 90px 0;
    }

    #section-optimierung div.container-custom > div {
        background-color: white;
        padding: 40px;
    }

    #footerlogo span {
        font-size: 40px;
    }

}