* {
    box-sizing: border-box; 
}

/* @import url('https://fonts.googleapis.com/css?family=Gothic+A1:100,200,300,400,500,600,700,800,900&display=swap');

@font-face {
    font-family: GothicA1-Regular;
    src: url(fonts/Gothic_A1/GothicA1-Regular.ttf);
} */

@font-face {
    font-family: GothicA1-Regular;
    src: url(fonts/Gothic_A1/GothicA1-Regular.ttf);
  }

/* @import url('https://fonts.googleapis.com/css?family=Gothic+A1:100,200,300,400,500,600,700,800,900&display=swap'); */



/* @font-face {
    font-family: Rubik;
    src: url(fonts/Rubik-Regular.ttf);
 } */

 /* @import url('https://fonts.googleapis.com/css?family=Josefin+Sans:300,400,400i,600,700&display=swap'); */





body {
    margin: 0; 
    padding: 0; 
    color: black; 
    /*font-family: 'GothicA1-Regular', 'Rubik', Verdana, Geneva, sans-serif; */
    line-height: 1.5; 
    list-style: none;
    font-family: 'Josefin Sans', sans-serif;
}

.container {
    max-width: 62.5rem; 
    background-color: ghostwhite; /* Lavenda */
    margin: 60px; 
    margin-left: auto; 
    margin-right: auto; 
    border-radius: 0.5rem 0.5rem 0.5rem 0.5rem;
}

.mainheader {
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    background-color: #e74c3c;
    background: linear-gradient(to bottom, #e74c3c 0%, #991515 100%);
    background: linear-gradient(to bottom, #e74c3c 28%, #991515 107%);
    border-radius: 0.5rem 0.5rem 0rem 0rem;
}


.mainheader-logo img {
    width: 70%; 
    height: auto; 
}

.mainheadernav-items {
    list-style: none; 
    margin: 0; 
    padding: 0; 
    display: none;   /* Im mobile-first-Layout ausblenden */ 
}

.mainheadernav-item {
    margin: 0 0.8rem; 
}

.mainheadernav-item a, 
.mobilenav-item a {
    font-size: 1.2rem; 
    text-decoration: none; 
    padding: 0.5rem;  
    color: ghostwhite; 
    letter-spacing: 0.1rem; 
    font-weight: inherit; 
    text-transform: inherit;
    background-color: rgb(59, 59, 59);
    border: 3px solid rgb(59, 59, 59); 
    border-radius: 2px;
    transition: all 500ms ease-in-out;
    
}

.mainheadernav-item a:hover, 
.mainheadernav-item a:active, 
.mobilenav-item a:hover, 
.mobilenav-item a:active {
    border: 3px solid rgb(59, 59, 59); 
    background-color: rgb(112, 112, 112);
} 

header, main, footer {
    padding: 1rem; 
} 

.sloganstrip {
    background-color: white;
    letter-spacing: 0.1rem;
    color: rgb(59, 59, 59);
    font-style: inherit;
}

/* .togglebutton {
    width: 3rem; 
    background-color: transparent; 
    border: none; 
    cursor: pointer; 
    padding-top: 0; 
    padding-bottom: 0; 
    vertical-align: middle; 
}

.togglebutton:focus {
    outline: none; 
}

.togglebutton-line {
    width: 100%; 
    height: 0.2rem; 
    background-color: black; 
    display: block; 
    margin: 0.6rem 0; 

    background-color: rgba(0, 0, 0, 0.151);
} */

.hamburger {
    width: 60px;
    height: 60px;
    padding: 1rem;
    border: none;
    cursor: pointer;
    background-color: transparent;
    background-color: rgba(0, 0, 0, 0.151);
    border-radius: 0.5rem;

    display: flex;
    align-items: center;
    justify-content: center;
}

.hamburger:focus {
    outline: none;
}

.hamburger > div {
    width: 100%;
    height: 2px;
    background-color: black;

    position: relative; /* Das Element ändert durch diese Angabe nicht seine Position. Die Angabe ist aber notwendig, um weitere Elemente absolut positionieren zu können. */
}

.hamburger > div::before,
.hamburger > div::after {
    content: ""; /* Diese Angabe - welche einen leeren Inhalt erzeugt - ist notwendig */

    width: 100%;
    height: 2px;
    background-color: inherit; /* Der wert wird vom Eltern-Element übernommen */

    position: absolute;
    top: -10px; /* Um die obere und untere Linie 10px vor der mittleren Linie zu positionieren */
    left: 0;
    right: 0;
    bottom: 0;

}

.hamburger > div::after {
    top: 10px; /* Den im voriegen Selektor gestzten wert überschreieben, um die untere Linie 10px nach der mittleren Linie zu positionieren. */
}

.hamburger > div,
.hamburger > div::before,
.hamburger > div::after {
    transition: all 500ms ease-in-out;
} /* Die Animation der Wertänderungen festlegen */


/* Transformation der 3 Linien, wenn auf das Hamburger-Menü gecklickt wird. Die Klasse "bbutton__clicked" wird per JavaScript gestzt */
.hamburger > div.button__clicked {
    background-color: transparent;
}

.hamburger > div.button__clicked::before {
    /* Die oberen Linien auf der Y-Achse um 10px nach unten verschieben und um 45Grad um den Mittelpunkt drehen (Die Reihenfolge ist hier wesentlich) */
    transform: translate3d(0, 10px, 0) rotateZ(45deg);
    background-color: black;
}

.hamburger > div.button__clicked::after {
    /* Die untere Linie auf der Y-Achse um 10px nach oben verschieben und um -45Grad um den Mittelpunkt drehen (Die reihenfolge ist hier wesentlich) */
    transform: translate3d(0, -10px, 0) rotateZ(-45deg);
    background-color: black;
}



@media screen and (min-width: 40rem) {   /* Ab einer Breite des Viewports von 640px ... */
    .hamburger {
        display: none;   /* ... wird das Burger-Menü ausgeblendet */
    }

    .mainheadernav-items {
        display: flex;   /* ... wird das im Smartphone-Layout ausgeblendete ul-Element (siehe ca. Zeile 59) zu einem sichtbaren Flexbox-Container */
    } 
}

/* .mobilenav {
    display: none; 
    position: fixed; 
    z-index: 200; 
    background-color: #e74c3c; 
    background: linear-gradient(to bottom, #e74c3c 28%, #991515 107%);
    top: 0; 
    left: 0; 
    width: 80vw; 
    height: 100vh; 
} */

.mobilenav {/*display: none;    Das Ein- und Ausblenden dieses Menüs des Smartphone-Layouts erfolgt per JS OLD OLD OLD*/

    transform: translate3d(-100%, 0, 0); /* Das Menü für Mobile Endgeräte wird um 100% nach links verschoben - damit befindet sich das Menü standardmäßig außerhalb des Viewports */

    transition: transform 400ms ease-out; /*Zum ende der animation wird die gschwindichkeit "ease-out" wird zum schluss langsamer..... Den Übergang zwischen zwei Zuständen der CSS-Eigenschaft "transform festlegen" */

    position: fixed; 
    z-index: 200; 
    background: linear-gradient(to bottom, #e74c3c, #991515);
    top: 0; 
    left: 0; 
    width: 80vw; /* Wie breit mobile nav ist */
    height: 100vh; 

    overflow-y: auto;   /* Damit gegebenenfalls eine vertikale Scrollleiste angezeigt wird */
}

.mobilenav__open {
    transform: translate3d(0, 0, 0); /* Keine Verschiebung dieses Elements, das Menü für  mobiele Endgeräte befindet sich dadurch an seiner standardmäßigen Position */
} 

/* .mobilenav-items {
    display: flex; 
    flex-direction: column; 
    justify-content: center;  
    align-items: center; 

    list-style: none; 
    margin: 0 auto; 
    padding: 0; 

    width: 80%; 
    height: 100%; 
} */

.mobilenav-items {
    display: flex; 
    flex-direction: column; 
    justify-content: center;   /* Um die Flex-Items entlang der Hauptachse - bei flex-direction: column; verläuft diese von oben nach unten - mittig zu zentrieren */
    align-items: center;   /* Um die Flex-Items entlang der Querachse - bei flex-direction: column; verläuft diese von links nach rechts - mittig zu zentrieren */

    list-style: none; 
    margin: 0 auto; 
    padding: 0; 

    width: 80%; 
    height: 100%; 
    /* background-color: yellow; */
}

.mobilenav-item {
    margin: 1rem 0; 
}

.bg-size_demo-1{ /* OLD */
    width: 100%;
    height: 280px;
    background-color: lightgray;
    background-image: url("pictures/background/FeuerloescherHintergrund.png");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}

/* ENDLEISTE MIT ITEMS */

.endleiste {
    border-radius: 0rem 0rem 0.5rem 0.5rem;
}


.endleiste {
    background-color: rgb(185, 185, 185);
    background-color: #a1a1a1;
    background: linear-gradient(to bottom, #b9b9b9 0%, #807d7d 100%);
    background: linear-gradient(to bottom, #b9b9b9 0%, #a1a1a1 100%);
    background: linear-gradient(to bottom, #b9b9b9 0%, #999999 100%);
    background: linear-gradient(to bottom, #b9b9b9 0%, #797979 100%);
    background: linear-gradient(to bottom, #b9b9b9 0%, #8d8d8d 100%);
    padding: 1rem;
    display: flex;
    text-decoration: none;
    justify-content: space-between;
    align-items: center;
}

.endleiste-item {
    list-style: none; 
    margin: 0; 
    padding: 0; 

}

.endleiste-item {
margin: 0 0.3rem; 
}

.endleiste-item a {
    font-size: 0.6rem;
    text-decoration: none;
    padding: 0.3rem;
    list-style: none; 
    text-decoration: none;
    color: ghostwhite; 
    letter-spacing: 0.1rem; 
    font-weight: inherit; 
    text-transform: inherit;
    background-color: gray;
    border: 3px solid gray; 
    border-radius: 20px; 
}

.endleiste-item a:hover,
.endleiste-item a:active {
    border: 3px solid rgb(99, 99, 99); 
    background-color: rgb(99, 99, 99);
    transition: all 1s ease-in-out;

    /* Ältere Farbe: 112, 112, 112 */
}

.endleiste-items {
    display:flex;
    margin: 0;
    padding: 0;
    list-style: none;
}

.fab {
    color: gray;
    font-size: 1.5rem;
    margin: 0 0.3rem;
}

.fab:hover {
    transition: all 1s ease-in-out;
    color: rgb(99, 99, 99);
}

li {
    display: grid; /* Innerhalb einer Liste kan es wider eine Liste geben */
    justify-items: center; /* Damit alle Objekte zentriert sind */
    align-items: center; 
    /* place-items: center;  =>  justify-items: center; + align-items: center; */ 
}



/* ENDLEISTE MIT ITEMS (ENDE) fab fa-youtube */