/* barlow-100 - latin */
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 300; /* Gewichtswerte durch Leerzeichen trennen */
  src: url('../fonts/barlow-300.woff2') format('woff2'),
       url('../fonts/barlow-300.woff') format('woff');
}
       @font-face {
         font-family: 'Barlow';
         font-style: normal;
  font-weight: 500; /* Gewichtswerte durch Leerzeichen trennen */
  src: url('../fonts/barlow-500.woff2') format('woff2'),
       url('../fonts/barlow-500.woff') format('woff');
}
       @font-face {
         font-family: 'Barlow';
         font-style: normal;
  font-weight: 600; /* Gewichtswerte durch Leerzeichen trennen */
  src: url('../fonts/barlow-600.woff2') format('woff2'),
       url('../fonts/barlow-600.woff') format('woff');
}

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

/* html {
  font-family: 'Barlow', sans-serif;
} */

body {
    font-family: 'Barlow', sans-serif;
    font-size: 18px; /* Grundgröße für den Fließtext */
    overflow-x: hidden;
}

h1 {
  font-size: 50px;
    font-weight: 500;
    text-transform: uppercase;
    padding-bottom: 15px;
}

h2 {
  font-size: 40px;
    font-weight: 600;
    text-transform: uppercase;
    padding-bottom: 15px;
}

h3 {
  font-size: 35px;
    font-weight: 500;
    text-transform: uppercase;
    padding-bottom: 15px;
}

h4 {
  font-size: 30px;
    font-weight: 300;
    padding-bottom: 15px;
}

p {
  font-size: 22px;
    line-height: 1.6em;
    font-weight: 300;
}

.credits {
  font-size: 18px;
    line-height: 1.6em;
    font-weight: 300;
}

.footer img {
    height: 150px; /* Initiale Größe des Logos */
}

.footer2 {
    font-size: 16px;
    line-height: 1.6em;
    font-weight: 300;
}

.footer3 {
    font-size: 12px;
    line-height: 1.6em;
    font-weight: 300;
}

header {
    position: sticky;
    top: 0;
    background: #fff;
    color: #333;
    padding: 20px 0; /* Erhöht die Höhe der Navigationsleiste */
    z-index: 1000;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Leichter Schatten für Abhebung */
}

nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    background-color: #fff; /* Weißer Hintergrund für das Menü */
}

.logo img {
    height: 60px; /* Initiale Größe des Logos */
}

.nav-links {
    list-style: none;
    display: none;
    flex-direction: column;
    width: 100%;
    text-align: center;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: #fff; /* Weißer Hintergrund für das ausgeklappte Menü */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Schatten für das ausgeklappte Menü */
}

.nav-links.active {
    display: flex;
}

.nav-links li {
    margin: 10px 0;
}

.nav-links a {
    color: #333;
    text-decoration: none;
}

.menu-toggle {
    display: flex;
    align-items: center;
    justify-content: right;
    font-size: 30px;
    cursor: pointer;
    margin-top: -6px;
}

.mail-toggle {
    display: flex;
    padding-top: 10px; /* Anpassung der vertikalen Position */
    padding-left: 50px; /* Initiale Position */
}

.mail-icon {
    filter: invert(0%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(0%) contrast(100%);
    width: 24px;
    height: 24px;
    cursor: pointer;
}



.text-image-left,
.text-image-center {
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Stellt den Text linksbündig dar */
    padding: 0;
    margin: 0;
}

.text-image-left .image,
.text-image-center .image {
    width: 100%;
    margin: 0;
}

.text-image-left .text,
.text-image-center .text {
    width: 100%;
    padding: 20px; /* Fügt etwas Abstand zum Text hinzu */
    text-align: left; /* Links bündig */
    margin-top: 0px;
}

.text-image-left .textimpressum,
.text-image-center .textimpressum {
    width: 100%;
    /* padding: 20px; /* Fügt etwas Abstand zum Text hinzu */ */
    text-align: left; /* Links bündig */
    margin-top: 0px;
}

.text-image-left img,
.text-image-center img,
.box img {
    max-width: 100%;
    height: auto;
    display: block;
}

.box-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Dynamische Anpassung der Spaltenbreite */
  gap: 30px;
  padding: 50px 20px;
  max-width: 1200px; /* Maximale Breite des Rasters auf Desktop */
  margin: 0 auto;
}

.box {
  text-align: left;
  /* background: #fbf7f3; */
  background-image: linear-gradient(to bottom right, #ffffff, rgba(241, 230, 221, 0.44));
  position: relative; /* Positionierung relativ für Overlay */
  overflow: hidden; /* Verhindert, dass das Overlay über den Rahmen hinausragt */
}

.box img {
  width: 100%;
 height: 300px;
 display: block;
 object-fit: cover; /* Skalierung des Bildes, um sicherzustellen, dass es die Box füllt */
 object-position: center; /* Zentrierung des Bildes in der Box */
}

.boxtext {
    width: 90%;
    height: auto;
    display: block;
    margin: 10px 0px 15px 15px;
}

.title {
    font-weight: 500;
    text-transform: uppercase;
}

ul {
    list-style: "\00BB";
    font-size: 22px;
    padding: 10px 20px;
    margin-top: 10px; /* Zusätzlicher Abstand über den Listenpunkten */
}

ul li {
    margin-bottom: 5px; /* Abstand zwischen den Listeneinträgen */
    padding-left: 20px; /* Abstand zwischen Listenpunkt und Text */
    font-weight: 300;
}

.box ul {
    list-style: "\00BB";
    padding: 10px 20px;
    margin-top: 10px; /* Zusätzlicher Abstand über den Listenpunkten */
}

.box ul li {
    margin-bottom: 5px; /* Abstand zwischen den Listeneinträgen */
    padding-left: 20px; /* Abstand zwischen Listenpunkt und Text */
    font-weight: 300;
}

.alt-background {
    overflow: hidden;
    /* background: #fbf7f3; */
    background-image: linear-gradient(to bottom right, rgba(251, 250, 250), rgba(241, 230, 221, 0.44));
    width: 100%;
}

.boxlink  {
    text-decoration: none;
    color: #000;
}

.alt-background .content {
  max-width: 100%; /* Stellt sicher, dass der Container nicht die Breite überschreitet */
  margin: 0 auto;
  display: flex;
  align-items: center;
  padding: 50px 20px;
}

.alt-background .content .text {
    margin-bottom: 20px;
}

.alt-background .content .btn {
    margin: 25px auto;
}

.alt-background img {
    max-width: 1200px;
    height: auto;
    display: block;
    padding-left: 35px;
}

footer {
    background: #edeae2;
    color: #000;
    text-align: center;
    padding: 20px;
}

footer a {
    color: #000;
    text-decoration: none;
}

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

.btn,
.button-container {
    display: inline-block;
    background-color: #c80101;
    color: white;
    padding: 10px 20px;
    text-decoration: none;
    /* border: 1px solid #c80101;
    border-radius: 1px; */
    transition: background-color 0.3s, color 0.3s;
}

.btn:hover,
.button-container:hover {
    background-color: white;
    color: #c80101;
    /* border: 1px solid #c80101; */
}

.spacer {
    width: 100%;
    height: 0; /* Grundhöhe, falls keine data-size angegeben ist */
}

.spacer[data-size="small"] {
    height: 20px;
}

.spacer[data-size="medium"] {
    height: 60px;
}

.spacer[data-size="large"] {
    height: 100px;
}

.spacer[data-size="extra-large"] {
    height: 120px;
}

.customer-logos {
    display: flex;
    flex-wrap: wrap; /* Logos sollen umbrechen */
    justify-content: center; /* Zentriert auf allen Bildschirmgrößen */
    align-items: center;
    padding: 50px 20px; /* Anpassen nach Bedarf */
    /* background-color: #fbf7f3; */
    background-image: linear-gradient(120deg, #fdfbfb 0%, #ebedee 100%);
        }

.customer-logoimg {
    max-width: 170px; /* Maximale Breite der Logos */
    height: auto;
    margin: 20px; /* Abstand zwischen den Logos */
}

/* Sticker styles */
.sticker-container {
    /* position: relative; */
    width: auto;
    text-align: center;
    /* overflow: hidden; */
    /* float: right; */
    z-index: 15;
}

.sticker {
    position: absolute;
    z-index: 10;
    pointer-events: none;
}

.sticker1 {
    /* top: 110px;
    left: 76%; */
    width: 200px;
    transform: rotate(-3deg);
}

.sticker2 {
    /* top: 480px;
    left: 16%; */
    width: 190px;
    transform: rotate(-3deg);
    transform: scaleX(-1);
}

.sticker3 {
    /* top: 1160px;
    left: 60%; */
    width: 205px;
    transform: rotate(-15deg);
}

.sticker4 {
    /* top: 1904px;
    left: 17%; */
    width: 170px;
    transform: rotate(0deg);
}

.sticker5 {
    /* top: 3650px;
    left: 79%; */
    width: 205px;
    transform: rotate(4deg);
}

.sticker6 {
    /* top: 3890px;
    left: 10%; */
    width: 300px;
    transform: rotate(-3deg);
}


/* ########################################################### */
/* Media Queries */
/* ########################################################### */

@media (min-width: 450px) {
  body {
      overflow-x: hidden;
  }

    .box-grid {
         grid-template-columns: 1fr 1fr; /* Zwei Spalten auf mittleren Bildschirmen */
    }

    .logo img {
        height: 60px; /* Höhe des Logos */
    }

    .mail-toggle {
        padding-left: 345px; /* Anpassung der horizontalen Position */
    }

    .nav-links {
        display: flex;
        flex-direction: row;
        position: static;
        width: auto;
        box-shadow: none;
        margin: 0;
    }

    .nav-links li {
        margin: 0 15px;
    }

    .menu-toggle {
        display: none;
    }

    .mail-toggle {
        display: flex;
        padding-top: 10px;
        padding-left: 345px;
        display: none;
    }

    .text-image-left,
    .text-image-center {
        flex-direction: row;
        align-items: center;
        padding: 50px 20px;
        max-width: 1200px;
        margin: 0 auto;
        text-align: left;
    }

    .text-image-left .image,
    .text-image-center .image {
        flex: 1;
        min-width: 50%;
        max-width: 500px;
    }

    .text-image-left .text,
    .text-image-center .text {
        flex: 1;
        padding: 20px;
        /* margin-top: -90px; */
    }

    .text-image-left .image {
        margin-right: 20px;
    }

    .text-image-center {
        flex-direction: column;
        text-align: left;
    }

    .text-image-center .image {
        margin-bottom: 20px;
    }

    .text-image-center .text {
        text-align: left;
        max-width: 600px;
        margin: 0 auto;
    }

    /* .alt-background img {
        padding-left: 0px;
    } */




}



@media (min-width: 720px) {
  body {
      overflow-x: hidden;
  }

    .logo img {
        height: 80px; /* Vergrößert das Logo */
    }

    .mail-toggle {
        padding-left: 605px; /* Anpassung der horizontalen Position */
    }

    .box-grid {
        grid-template-columns: 1fr 1fr; /* Zwei Spalten auf größeren Bildschirmen */
    }
    .alt-background .content {
            display: flex;
            justify-content: space-between; /* Verteilt den Inhalt horizontal */
            align-items: center; /* Zentriert den Inhalt vertikal */
            padding: 50px 20px; /* Anpassen nach Bedarf */
            max-width: 1200px; /* Maximalbreite des Inhalts */
            margin: 0 auto; /* Zentriert den Inhalt horizontal */
        }

        .alt-background .content .text {
            width: 50%; /* 50% des Inhalts für den Text */
            margin-left: 50px; /* Abstand zum linken Rand */
        }

        .alt-background .content .image {
            width: 50%; /* 50% des Inhalts für das Bild */
        }

        .alt-background .content img {
            width: 100%; /* Bild nimmt die volle Breite ein */
            height: auto; /* Bewahrt das Seitenverhältnis */
        }




    }


/* Mobile First Ansatz für alt-background */
@media (max-width: 720px) {
  body {
      overflow-x: hidden;
  }

    .alt-background .content {
        flex-direction: column; /* Vertikale Ausrichtung der Inhalte */
        text-align: center; /* Zentriert den Text */
        align-items: center; /* Zentriert den Inhalt */
    }

    .alt-background .content .image {
        width: 100%; /* Bild nimmt die volle Breite des Containers ein */
        margin-bottom: 20px; /* Fügt Abstand unter dem Bild hinzu */
    }

    .alt-background .content .text {
        width: 100%; /* Text nimmt die volle Breite des Containers ein */
        text-align: center; /* Zentriert den Text */
        margin-bottom: 20px; /* Fügt Abstand unter dem Text hinzu */
    }

    .alt-background .content img {
        width: 100%; /* Bild nimmt die volle Breite des Containers ein */
        height: auto;
        padding-left: 0px;
        }

        .customer-logoimg {
            max-width: 200px; /* Maximale Breite der Logos */
            height: auto;
            margin: 20px; /* Abstand zwischen den Logos */
        }


    }


    /* Media Queries to hide stickers on smaller screens */
@media (max-width: 1024px) {

  body {
      overflow-x: hidden;
  }



  /* .sticker1 {

        width: 130px;
        transform: rotate(-3deg);
      }

.sticker2 {

        width: 190px;
        transform: rotate(-3deg);
        transform: scaleX(-1);
        display: none;
        overflow: hidden;

    }

.sticker3 {

        width: 20px;
        transform: rotate(-15deg);
        overflow: hidden;

    }

.sticker4 {

        width: 170px;
        transform: rotate(0deg);
        display: none;
        overflow: hidden;

    }

.sticker5 {

        width: 170px;
        transform: rotate(4deg);
        overflow: hidden;

    }

.sticker6 {

        transform: translateX(-50%);
        width: 210px;
        transform: rotate(14deg);
        overflow: hidden;

    } */


    }



/* ########################################################### */
    /* Font Deifinitions */
/* ########################################################### */

/*
.barlow-thin {
  font-family: "Barlow", sans-serif;
  font-weight: 100;
  font-style: normal;
}


.barlow-extralight {
  font-family: "Barlow", sans-serif;
  font-weight: 200;
  font-style: normal;
}


.barlow-light {
  font-family: "Barlow", sans-serif;
  font-weight: 300;
  font-style: normal;
}



.barlow-regular {
  font-family: "Barlow", sans-serif;
  font-weight: 400;
  font-style: normal;
}



.barlow-medium {
  font-family: "Barlow", sans-serif;
  font-weight: 500;
  font-style: normal;
}


.barlow-semibold {
  font-family: "Barlow", sans-serif;
  font-weight: 600;
  font-style: normal;
}


.barlow-bold {
  font-family: "Barlow", sans-serif;
  font-weight: 700;
  font-style: normal;
}


.barlow-extrabold {
  font-family: "Barlow", sans-serif;
  font-weight: 800;
  font-style: normal;
}

.barlow-black {
  font-family: "Barlow", sans-serif;
  font-weight: 900;
  font-style: normal;
} */


LALALALALALA