/* Das war ein Versuch eine Schriftart zu importieren. Hat aber leider nicht funktioniert.
@font-face {
    font-family: 'Simplifica';
    font-style: normal;
    font-weight: normal;
    src: local('Simplifica'), url('/fonts/SIMPLIFICA Typeface.woff') format('woff');
}

 */

body {
    height: 100vh; /*Viewport Units für flexiblere Größenangaben*/
    width: 80vw;
    /*Die Einheiten „vw“ und „vh“ definieren eine Breite beziehungsweise Höhe in Relation zur Fenstergröße. Dabei steht „vw“ für „view width“ und „vh“ für „view height“.
                Diese sogenannten Viewport Units ermöglichen es, Größen in Relation zur jeweils aktuellen Größe des Browserfensters zu definieren.
                Das Beispiel legt die Größe eines Elementes auf 50 Prozent der Fensterbreite und 100 Prozent der Fensterhöhe fest. Während prozentuale Angaben immer in Relation zum
                jeweiligen Elternelement stehen, ist die Angabe mit Viewport Units immer in Relation zur Fenstergröße. */
    margin: auto;
    /*Indem man die Breite (width) eines Block-Elements definiert, verhindert man, dass es sich nach rechts und links bis zum Rand des umgebenden Containers ausbreitet.
                Durch Setzen des rechten und linken Außenabstands (margin) auf auto lässt sich das Element horizontal zentrieren. Das Element nimmt so die definierte Breite an und
                teilt den verbleibenden Außenabstand gleichmäßig auf.*/
    display: grid;
    grid-gap: 10px;
    grid-template-rows: 140px 50px 1fr 100px;
    /*1fr (1 Fraction) erstreckt sich über noch freien Platz; Wie viel Platz zur Verfügung steht wird durch die Gesamthöhe des body bestimmt.
                                                   Beachtet, dass die Angabe 1fr auch 0 Pixel bedeuten kann, wenn der Container eine zu niedrige bzw. keine Höhe erhalten hat.*/
    grid-template-columns: repeat(3, 1fr);
    grid-template-areas:
    "header 			header 				header"
    "nav			    nav 				nav"
    "content-tl 	    content-tr 			sidebar"
    "footer 			footer 				footer";
}

header {
    border-radius: 0px 0px 10px 10px;
    grid-area: header;
    background: #F29F05;
}

article {
    grid-area: content-tl;
    background-repeat: no-repeat;
    background-size: cover;
}

nav {
    grid-area: nav;
    background: darkgray; /* Absichtlich um Schatten an Navigationsleiste zu schaffen */
}

section {
    grid-area: content-tr;
}

aside {
    grid-area: sidebar;
}


footer {
    grid-area: footer;
}

img.photo {
    width: 100%;
    height: auto;
}

/* Navbar container */
.navbar {
    display: -webkit-flex;
    display: flex;
    justify-content: center;
    overflow: hidden;
    background-color: #333; /* Absichtlich um Schatten an Navigationsleiste zu schaffen */
    font-family: Arial;
}

/* Links inside the navbar */
.navbar a {
    float: left;
    font-size: 16px;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

/* dropdown container */
.dropdown {
    float: left;
    overflow: hidden;
}

/* Dropdown button */
.dropdown .dropbtn {
    font-size: 16px;
    border: none;
    outline: none;
    color: white;
    padding: 14px 16px;
    background-color: inherit;
    font-family: inherit;
    margin: 0;
}

.navbar a:hover, .dropdown:hover .dropbtn {
    background-color: #734B02;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    z-index: 1;
}


.dropdown-content a {
    float: none;
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}


.dropdown-content a:hover {
    background-color: #ddd;
}


.dropdown:hover .dropdown-content {
    display: block;
}

.footercontainer {
    display: -webkit-flex;
    display: flex;
    justify-content: center;
}

.impressumcontainer {
    grid-area: content-tr;
    border-radius: 25px;
    background: #ddd;
    padding-left: 15px;
    padding-right: 15px;
    text-align: center;
}

.zoom {
    transition: transform .5s;
    margin: 0 auto;
}

.zoom:hover {
    transform: scale(1.04);
    border-radius: 5px;
}