@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville=swap');
:root{
    --main: rgb(35, 41, 51);
    --navleiste-hover-background: rgba(255, 255, 255, 0.36);
    --navleiste-hover-border: rgba(19, 46, 58, 0);
    --border: rgba(255, 255, 255, 0.1);
    --borderbutton: rgba(255, 255, 255, 0.518);
    --borderbuttonhover: rgb(204, 204, 204);
    --border-button-hover-light: whitesmoke;
    --text-shadow-weiß: rgba(139, 139, 139, 0.316);
    --kontakt: #3d3d3d;
    --kontakt-light: rgb(126, 126, 126);
    --swiper-theme-color: #262626!important;
    --highlight: #ad1f24;
    --highlighttrans: #3b0000;
    --anthra: rgb(38, 38, 38);
    --schrift: #2393BF;
    --schriftkontrast: #2d0202;
    --anthratrans: #262626c0;
}


/* Überschrift */
.titel1{
    top: 50%;
}
/* Ende Überschrift */
  

/*Impressum*/
.impressumstyle{
    padding: 10%;
    line-height: 1.6em;
}
.impressumstyle h1{
    font-size: 2em;
    margin-bottom: 1em;
}
.impressumstyle h2{
    font-size: 1.5em;
    margin-top: 2em;
}
.impressumstyle h3{
    font-size: 1em;
    margin-top: 1em;
}
.impressumstyle a{
    text-decoration: none;
    color: black;
}
.impressumstyle a :hover{
    cursor: pointer;
}
.strong{
    margin-top: 2em;
    margin-bottom: 0.5em;
    font-weight: 500;
}
.div{
    display: flex;
    flex-direction: column;
    margin-top: 0.5em;
    margin-bottom: 1em;
}
.div p{
    margin-top: 0.2em;
    margin-bottom: 0.2em;
}
.a{
    font-style: normal;
    color: black;
    text-decoration: underline;
}
.a:hover{
    cursor: pointer;
    text-decoration: underline;
}
.fa-file-pdf{
    color: red;
    margin-right: 1vw;
    margin-left: 2vw;
}
/*Ende Impressum*/

/*Aktuelles*/
.aktuell{
    display: inline-flex;
    flex-direction: column;
    justify-content: flex-start;
    width: 80%;
    margin-left: 10%;
    height: fit-content;
    margin-top: 10vh;
    margin-bottom: 10vh;
}
.aktuellanordnung{
    display: inline-flex;
    flex-direction: row;
    justify-content: center;
    width: 100%;
}
.aktuellimg{
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    width: 40%;
    height: 30vh;
    position: relative;
    margin-top: 0.5em;
}
.aktuelltext{
    width: 60%;
    padding-left: 2%;
    height: fit-content;
}
.deko1{
    position: absolute;
    height: available;
    width: 3vw;
    background-color: transparent;
    border-top: 41vh solid white;
    border-left: 2vw solid white;
    border-right: 1vw solid transparent;
    left: 0vw;
    overflow: hidden;
}
.deko2{
    position: absolute;
    height: available;
    width: 3vw;
    background-color: transparent;
    border-bottom: 41vh solid white;
    border-right: 2vw solid white;
    border-left: 1vw solid transparent;
    right: 0vw;
    overflow: hidden;
}
.aktuell h1{
    font-size: 1.8em;
    width: 50%;
    text-align: left;
    padding-bottom: 2vh;
    margin-bottom: 1em;
    border-bottom-style: solid;
    border-bottom-width: 0.01em;
}
.aktuell ul{
    display: flex;
    flex-direction: column;
    width: 90%;
    text-align: left;
    margin: 0 auto;
    padding-bottom: 1vh;
    padding-top: 2vh;
    line-height: 2em;
    padding-left: 2vw;
}
.aktuell li{
    display: flex;
    align-items: baseline;
    list-style-type: none;
    white-space: pre-wrap;
    color: var(--anthra);
}
.aktuell ul .fa-chevron-right{
    color: var(--anthra);
}
.fa-chevron-right{
    color: var(--highlight);
    font-size: 1em;
    align-items: center;
    justify-content: center;
    margin-right: 2vw;
}
/*Ende Aktuelles*/

/*Cidan*/
.cidanimg{
    background-image: url(medien/Bilder/kompri/101.webp);
}
/*Ende Cidan*/

/*Standrohre*/
.standrohre{
    margin-top: 20vh;
}
.standrohreimg{
    background-image: url(medien/Bilder/kompri/040.webp);
    height: 40vh;
}
.standrohrvorteile{
    display: inline-flex;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
    height: fit-content;
    margin-top: 3vh;
}
.vorteil{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    width: 49%;
}
.vorteilpunkt{
    display: flex;
    align-items: center;
    white-space: pre-wrap;
    width: 100%;
    height: fit-content;
    margin-bottom: 4vh;
}
.vor{
    height: 1.4em;
    width: 1.4em;
    background-image: url(medien/Icon/stoßfest.png);
    background-size: cover;
    background-position: center center;
    margin-right: 1em;
}
.vor1{
    background-image: url(medien/Icon/stoßfest.png);
}
.vor2{
    background-image: url(medien/Icon/sofortabholbereit.png);
}
.vor3{
    background-image: url(medien/Icon/keinadapterstück.png);
}
.vor4{
    background-image: url(medien/Icon/farbauswahl.png);
}
.vor5{
    background-image: url(medien/Icon/optik.png);
}
.standrohrmaterial{
    display: inline-flex;
    flex-direction: column;
    justify-content: flex-start;
    width: 60%;
    height: fit-content;
    margin-left: 15%;
    margin-top: 3vh;
}
.mat{
    display: inline-flex;
    flex-direction: row;
    width: 100%;
    height: fit-content;
    justify-content: space-between;
    padding: 0.1em;
}
.mat2{
    font-size: 0.8em;
    font-weight: lighter;
}
.mate{
    display: inline-flex;
    justify-content: flex-start;
    width: 3em;
    height: 3em;
    background-size: cover;
    background-position: center center;
    overflow: hidden;
}
.mate1{
    background-image: url(medien/Material/002.webp);
}
.mate2{
    background-image: url(medien/Material/003.webp);
}
.mate3{
    background-image: url(medien/Material/004.webp);
}
.mate4{
    background-image: url(medien/Material/001.webp);
}
.mate5{
    background-image: url(medien/Material/011.webp);
}
.mate6{
    background-image: url(medien/Material/010.webp);
}
/*Ende Standrohre*/





@media (max-width: 1200px) and (min-width:993px) and (orientation: landscape){
        /*Aktuelles*/
        .cidan{
            width: 90%;
            margin-left: 5%;
        }
        /*Ende Aktuelles*/
}

@media (max-width: 1200px) and (min-width:601px) and (orientation: portrait) {
    /*Aktuelles*/
.aktuell{
    width: 90%;
    margin-left: 5%;
}
.aktuellanordnung{
    flex-direction: column-reverse;
}
.standrohranordnung{
    flex-direction: column;
}
.aktuellimg{
    width: 100%;
    margin-left: 0%;
    height: 40vh;
    margin-top: 3vh;
}
.standrohreimg{
    height: 50vh;
    margin-bottom: 3vh;
    margin-top: 1vh;
}
.aktuelltext{
    width: 100%;
}
.standrohrvorteile{
    display: flex;
    width: 100%;
    padding: 1em;
    background-color: whitesmoke;
}
.vor{
    width: 1.2em;
    height: 1.2em;
}
.vorteillinks{
    width: 59%;
}
.vorteilrechts{
    width: 39%;
}
.deko1{
    border-top: 51vh solid white;
}
.deko2{
    border-bottom: 51vh solid white;
}
/*Ende Aktuelles*/
}

@media (max-width: 992px) and (orientation: landscape){
        /*Aktuelles*/
        .aktuell{
            width: 90%;
            margin-left: 5%;
            font-size: 0.9em;
        }
        .aktuellanordnung{
            flex-direction: column-reverse;
        }
        .aktuellimg{
            width: 90%;
            margin-left: 5%;
            height: 70vh;
            margin-top: 2em;
        }
        .aktuelltext{
            width: 100%;
        }
        .deko1{
            border-top: 75vh solid white;
        }
        .deko2{
            border-bottom: 75vh solid white;
        }
        .aktuell h1{
            font-size: 1.5em;
        }
        /*Ende Aktuelles*/
}

@media (max-width: 600px) and (orientation: portrait) { 
/*Einleitung */
    .titel1{
        top: 50%;
    }
/* Ende Einleitung*/ 

/*Impressum*/
.impressumstyle{
  padding: 5%;
  line-height: 1.5em;
}
.impressumstyle h1{
  font-size: 1.6em;
  margin-bottom: 1em;
  margin-top: 10vh;
}
.impressumstyle h2{
  font-size: 1.3em;
  margin-top: 2em;
}
.impressumstyle h3{
  font-size: 1.1em;
  margin-top: 1em;
} 
p{
  font-size: 0.9em;
}
/*Ende Impressum*/


/*Aktuelles*/
    .aktuell{
        width: 90%;
        margin-left: 5%;
    }
    .aktuellanordnung{
        flex-direction: column-reverse;
    }
    .standrohranordnung{
        flex-direction: column;
    }
    .aktuellimg{
        width: 100%;
        margin-left: 0%;
        height: 30vh;
        margin-top: 3vh;
    }
    .standrohreimg{
        height: 50vh;
        margin-bottom: 3vh;
        margin-top: 1vh;
    }
    .aktuelltext{
        width: 100%;
    }
    .deko1{
        border-top: 35vh solid white;
    }
    .deko2{
        border-bottom: 35vh solid white;
    }
    .aktuell h1{
        font-size: 1.5em;
        width: 70%;
    }
    .standrohrmaterial{
        width: 95%;
        margin-left: 2.5%;
    }
    .mate{
        width: 2.5em;
        height: 2.5em;
    }
    .standrohrvorteile{
        flex-direction: column;
        justify-content: flex-start;
        background-color: whitesmoke;
        padding: 0.2em;
        margin-top: 3vh;
        margin-bottom: 3vh;
    }
    .vorteil{
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        width: 90%;
        margin-left: 5%;
    }
    .vorteilpunkt{
        display: flex;
        justify-content: center;
        align-items: center;
        white-space: pre-wrap;
        width: 100%;
        height: fit-content;
        margin-bottom: 1vh;
        margin-top: 1vh;
    }
    .vor{
        width: 1em;
        height: 1em;
    }
/*Ende Aktuelles*/
}