/*
    Zuerst setzten wir die Eigenschaften für margin, padding und border zurück,
    sodass Browserabweichungen ausgeglichen werden können.
*/
* {
    margin: 0px;
    padding: 0px;
    border: none;
}

/*
    Für den kompletten HTML Bereich setzen wir die Standard Schrift und verpassen
    der Seite noch eine Hintergrundfarbe.
*/


/*
    Nun kommt der Header: Wir werden ihm ein schönes Hintergrundbild verpassen.
    Damit dieses auch komplett angezeigt wird, setzte ich als Höhe die Höhe des Bildes.
    Danach platziere ich den Text nach rechts oben in die Ecke und setze eine Schriftfarbe.
*/

/*
#title {

        Als Hintergrundbild setzte ich header.jpg.
        Da dieses aber nicht breit genug ist, setzte ich zusätzlich
        als Hintergrundfarbe den Blauton, den der Hintergrund im Bild hat.
        Da dessen HEX-Code sehr komplex ist, nutze ich die RGB Angabe von CSS

    background: rgb(115,183,254) url(/img/bg1.jpg) no-repeat top left;
    height: 170px;  170px + 10px (padding) gibt die 180px des Bildes
    text-align: right;
    padding: 10px 15px 0px 0px;
    font-weight: normal;
}

.mein-element {
 background-color: #F8FBEF;
    height: 33%;
    opacity: 0;
    transition: opacity .5s ease-in-out;


}*/


.SchrägHaupt{
    position: absolute;

}

.BeschrHaupt{
    position:absolute;
    margin-left:220px;
    margin-top: 50px;

}

.LOGOHAUPT{
    height: 100%;
    width: 100%;

}


body {
    background: url(img/Leder.jpg);
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    margin: 0;
    scroll-snap-type: y mandatory; /* Vertikal Scrollen und Snap Points streng einhalten */
    border-left:20px;

}


section img {
    width: 100%;
    height: 100%;

}
section {
    margin-left: 2%;
    margin-right: 2%;
    height: 100vh;
    scroll-snap-align: start; /* An der Oberkante jeder Sektion soll gestoppt werden */
    border-left-width: 2%;

}

section:nth-of-type(even) {
    background: #8cb11c;

}

section:nth-of-type(odd) {
    background: #147c85;

}

.mein-element {
    background: url("img/background1.jpg");
    margin:0 auto;
    margin-bottom:2em;
}

.deko1 {
    position: absolute;
    padding-left: 80%;
}

.visible {
    background: lime;
}

.visible {
    opacity: 0;
}

ul {
    position: absolute;
    list-style-type: none;
    margin-top: 400px;
    margin-left: 200px;
    padding: 0;
    width: 400px;
    background-color: #f1f1f1;
    background-image: url("img/Leder.jpg");
    transform: skewX(40grad);
}

ul li {
      text-align:center;
  }

ul li a {
    display: block;
    color: #f1f1f1;
    padding: 40px 16px;
    text-decoration: none;

}


li a {
    display: block;
    color: #f1f1f1;
    padding: 40px 16px;
    text-decoration: none;
}

/* Change the link color on hover */
li a:hover {
    background-color: #555;
    color: white;
}




.diagonale img {
    height: 400px ;
    height: 400px;


}

.diagonale{
    text-align: left;
    al

}
#beschr {
    position: absolute;
    left:430px;
    top: 420px;

}