/*
    HAUPT-STYLESHEET
    Irgendwo einbinden: 
        <link rel="stylesheet" href="utils/css/stylesheet.css">
*/


/*  
    Hier werden die Schriftarten (Raleway & Inter) von Google Fonts importiert.
    =>  "Raleway:400,800" bedeutet:
        "Importiere Raleway mit den Stärken 400 und 800"
        also mit "normal" und "extra-fett"
*/
@import url("https://fonts.googleapis.com/css?family=Raleway:400,800|Inter:400,800");


/* Objektübergreifende Einstellungen */
:root {
    font-family: "Inter";
    font-size: 12pt;
    line-height: 20pt;
    --primary: #3D30BD;
    --on-primary: #FFFFFF; 
    --secondary: #FFFFFF;
    --on-secondary: #150A82;
    --highlight: #FF2C6B;
    --hero-path:  url("assets/images/hero_home.jpg");
}

/* Entfernt weiße Ränder */
body {
    height: 100vh;
    margin: 0;
}


/* Scrollbar */
body::-webkit-scrollbar {width: 0.75rem;}
body::-webkit-scrollbar-track {background: rgb(70, 70, 70);}
body::-webkit-scrollbar-thumb {background: rgb(200, 200, 200); border-radius: 0.25rem;}


/* Navigation */
nav {
    display: inline;
    position: fixed;
    width: 100vw;
    z-index: 1337;
    background-color: transparent;
}

/* Nav-Elemente */
nav ul {
    display: flex;
    padding: 0;
    align-content: center;
    justify-content: center;
}

/* Nav-Elementinhalte */
nav ul li {
    position: relative;
    float: left;
    list-style: none;
}

/* Nav-Elementlinks */
nav ul li a {
    display: block;
    padding: 0.5rem;
    text-decoration: none;
    color: var(--on-primary);
}

/* Nav-Elementlinks bei Hover */
nav ul li a:hover {
    border-radius: 0.5rem;
}

/* Nav-Elementlinks bei Hover */
.nav-single:hover {
    border-radius: 0.5rem;
    /* background-color: var(--highlight); */
    background-color: rgba(0, 0, 0, 0.2);
}

/* Aktuelle Seite bei Navbar */
.nav-active {
    text-decoration: underline;
    text-decoration-color: var(--highlight);
    text-underline-offset: 4px;
    text-decoration-thickness: 0.2rem;
}

/* Dropdown-Menu */
nav ul li ul {
    display: none;
    flex-flow: column nowrap;
    z-index: 42069;
    width: 100%;
    position: absolute;
    padding: 0.25rem;
    border-radius: 0.5rem;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.42);
    background-color: var(--secondary);
}

/* Dropdown-Menu bei Nav-Element-Hover */
nav ul li:hover ul {
    display: flex;
}

/* Dropdown-Menu-Links */
nav ul li ul a {
    border-radius: 0.5rem;
    color: var(--on-secondary);
}

/* Dropdown-Menu-Links bei Hover */
nav ul li ul a:hover {
    color: var(--on-primary);
    background-color: var(--highlight);
}

/* Navigation bei scrollen */
.nav-scroll {
    background-color: var(--primary);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.42);
}

/* Mobile Navigation (Button) */
.nav-fab {
    display: none;
    position: fixed;
    z-index: 9999;
    justify-content: center;
    align-items: center;
    width: 60px; height: 60px;
    right: 24px; bottom: 24px;
    border-radius: 100%;
    background: var(--highlight);
    border: none;
    outline: none;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.42);
    cursor: pointer;
}

/* Mobile Navigation (Button-Inhalt) */
.nav-fab img {
    width: 69%;
    height: 100%;
}


/* Überschriften */
h1, h2, h3, h4, h5, h6 {
    font-family: "Raleway";
}

/* Hero-Überschriften */
h1{
    text-align: center;
    line-height: normal;
    color: var(--on-primary);
    margin: 0rem;
    font-size: 8rem;
    font-weight: 800;
}

/* Tile-Überschriften */
h2 {
    font-size: 2rem;
    margin-top: 0;
}

/* Texte */
p {
    margin: 0;
    hyphens: auto; 
	text-align: justify;
}

/* Fettgedruckte Textstellen */
p b {
    font-weight: 800;
    /* color: var(--highlight); */
}

/* Bilder bleiben im Rahmen*/
img {
    overflow: hidden;
    max-width: 100%;
    height: auto;
    margin-top: 25px;
    margin-bottom: 25px;
}

/* Hero-Banner */
.hero {
    /* background: var(--primary); */
    background: 
        linear-gradient(
            to bottom right, 
            var(--primary),
            var(--on-secondary)
        ),
        var(--hero-path);
    height: 48vh;
    background-blend-mode: multiply;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative; 
}

/* Hero-Banner-Inhalt */
.hero-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}


/* Block 1 - Hintergrund */
.tile {
    background-color: var(--secondary);
}

/* Block 2 - Hintergrund*/
main .tile:nth-child(even) {
    background-color: var(--primary);
    flex-direction: row-reverse;
}

/* Block 1 - Überschrift */
.tile h2 {
    flex-shrink: 0;    
    padding-right: 96px;
}

/* Block 2 - Überschrift */
main .tile:nth-child(even) h2 {
    padding-right: 0;
    padding-left: 96px;
}

/*  Block 1 - Inhalt */
.tile-content {
    display: flex;
    flex-flow: row nowrap;
    max-width: 60%;
    margin: 0 auto;
    padding-top: 96px;
    padding-bottom: 96px;
    color: var(--on-secondary);
}

/* Block 2 - Inhalt*/
main .tile:nth-child(even) > .tile-content {
    flex-direction: row-reverse;
    color: var(--on-primary);
}


footer {
    display: flex;
    flex-flow: column wrap;
    align-items: center;
    margin: 0;
    padding-top: 1.5rem; 
    padding-bottom: 1.5rem;
    color: var(--on-primary);
    background-color: var(--primary);
    box-shadow: 0 -3px 10px rgba(0, 0, 0, 0.42);
}

footer p {
    text-align: center;
    padding-left: 4em;
    padding-right: 4em;
}


/* Für kleinere Bildschirme */
@media screen and (max-width: 1400px){

    /* Hero-Überschrift kleiner */
    h1 {
        font-size: 4rem;
    }

    /* Hero weniger hoch */
    .hero {
        height: 40vh;
    }

    /* Überschrift über Text, statt daneben */
    .tile-content {
        flex-flow: column wrap;
    }

    /* Überschriften-Padding links/rechts weg */
    tile h2, main .tile:nth-child(even) h2 {
        padding-left: 0;
        padding-right: 0;
    }

    /* Überschrift über Text, statt daneben */
    main .tile:nth-child(even) > .tile-content {
        flex-direction: column;
        color: var(--on-primary);
    }
}

/* Für noch kleinere Bildschirme */
@media screen and (max-width: 860px) {

    /* Mobile Navigation als Fullscreen */
    nav {
        display: none;
        width: 100vw;
        height: 100vh;
        background-color: var(--primary);
    }

    /* Mobile Nav. (Inhalt) */
    nav ul {
        flex-flow: column nowrap;
        justify-content: center;
        align-items: center;
    }

    /* Mobile Nav. (Text) */
    nav ul li a {
        text-align: center;
    }

    /* Mobile Nav. (Dropdown-Menü) */
    nav ul li ul {
        height: 100%;
        z-index: 1;
        width: 100vw;
        position: static;
        padding: 0.25rem;
        border-radius: 0;
        box-shadow: none;
        background-color: var(--secondary);
    }

    /* Navigations-Button sichtbar */
    .nav-fab {
        display: flex;
    }

    /* Hero-Überschrift kleiner */
    h1 {
        font-size: 2.5rem;
    }

    h2 {
        font-size: 1.5rem;
    }

    /* Hero weniger hoch */
    .hero {
        height: 32%;
    }

    /* Kleinerer Textrand */
    .tile-content {
        max-width: 90%;
        padding-top: 48px;
        padding-bottom: 72px;
    }   
}