/* -------------------------
FONT IMPORT & VARIABLES
------------------------- */

@font-face {
  font-family: Satoshi;
  src: url(assets/fonts/Satoshi-Variable.ttf);
}

:root { 
    /* Fonts */
    --font_main: Satoshi;

    /* Colors */
    --color_bg: #FFF8F3;
    --color_text: #191919;
    --color_grid: #343434;

    /* Spacing */
    --default-padding: 3rem;

    /* Grid Lines */
    --grid_line-height: 1px;
    --grid_line-opacity: 0.40;
}

/* -------------------------
GENERAL STYLES
------------------------- */

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--font_main);
    background-color: var(--color_bg);
}

/* -------------------------
TYPOGRAPHY
------------------------- */

.text_x-large { font-size: 4rem; }
.text_large { font-size: 2rem; }
.text_medium { font-size: 1.25rem; }
.text_small { font-size: 1rem; }
.text_x-small { font-size: 0.875rem; }

/* -------------------------
HEADER
------------------------- */

.section_nav {
    display: flex;
    justify-content: space-between;
    padding: var(--default-padding);
    position: fixed;
    width: 100%;
    z-index: 1;
}

/* Logo */

.nav_logo {
    width: 120px;
    z-index: 10;
}

.nav_logo path {
    fill: var(--color_bg);
}

/* Hamburger Menu */

.nav_ham-wrapper {
    width: 40px;
    height: 40px;
    background-color: var(--color_bg);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-end;
    padding: 12px 10px;
    z-index: 10;
}

.nav_ham-wrapper div {
    height: 1px;
    background-color: var(--color_text);
}

.ham_line-1 { width: 100%; }
.ham_line-2 { width: 80%; }
.ham_line-3 { width: 90%; }

.nav_ham-links {
    position: fixed;
    height: 100%;
    background-color: var(--color_text);
    top: 0;
    left: -100%;
    width: 0%;
    display: flex;
    flex-direction: column;
    padding: var(--default-padding);
}

/* When the menu is open, force these colors and animate them */
.menu-open .nav_logo path {
  fill: var(--color_bg) !important;
  transition: 0.3s ease;
}

.menu-open .nav_ham-wrapper {
  background-color: var(--color_bg) !important;
  transition: 0.3s ease;
}

.menu-open .nav_ham-wrapper div {
  background-color: var(--color_text) !important;
  transition: 0.3s ease;
}

/* -------------------------
MAIN
------------------------- */

main {
    min-height: 100vh;
}


/* -------------------------
MAIN SECTION: INTRO
------------------------- */

.section_intro {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

/* Grid Lines */

.intro_h-lines, 
.intro_v-lines {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    display: flex;
    z-index: 1;
    pointer-events: none;
}

.intro_h-lines > div,
.intro_v-lines > div {
    background-color: var(--color_grid);
    opacity: var(--grid_line-opacity);
    position: absolute;
}

.intro_h-line-1 { left: 20%; top: 100%; width: var(--grid_line-height); height: 0%; }
.intro_h-line-2 { left: 40%; top: 100%; width: var(--grid_line-height); height: 0%; }
.intro_h-line-3 { left: 60%; top: 0; width: var(--grid_line-height); height: 0%; }
.intro_h-line-4 { left: 80%; top: 0; width: var(--grid_line-height); height: 0%; }
.intro_v-line-1 { top: 33.33%; left: 0; height: var(--grid_line-height); width: 0%; }
.intro_v-line-2 { top: 66.66%; left: 100%; height: var(--grid_line-height); width: 0%; }

/* Intro Grid */

.intro_grid {
    position: absolute;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(5 , 1fr);
    grid-template-rows: repeat(3,1fr);
}

/* Intro Grid Initial */

.intro_grid-init {
    opacity: 1;
    visibility: visible;
    --after-opacity: 1;
}

.intro_grid-init::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.5) 0%, transparent 30%);
    pointer-events: none;
    opacity: var(--after-opacity);
}

.intro_grid-init img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: top;
    grid-column: 1/6;
    grid-row: 1/4;
}

.intro_grid-init h1 {
    position: absolute;
    color: var(--color_bg);
    bottom: var(--default-padding);
    left: var(--default-padding);
    font-weight: bold;
    hyphens: auto;
    z-index: 5;
}

/* Intro Grid Slide 1 */

.intro_grid-1 img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: top;
    min-height: 0; 
    min-width: 0;
    grid-column: 1/6;
    grid-row: 1/4;
    clip-path: inset(0 20% 33.33% 60%);
}

.intro_grid-1 p {
    grid-column: 1/4;
    grid-row: 1/3;
    z-index: 1;
    place-self: center;
    padding: 0 8rem 0 var(--default-padding);
}

/* Intro Grid Slide 2 */

.intro_grid-2 img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: top;
    min-height: 0; 
    min-width: 0;
}

.intro_grid-2 img:nth-child(1) { grid-column: 2/3; grid-row: 1/2; }
.intro_grid-2 img:nth-child(2) { grid-column: 5/6; grid-row: 1/2; }
.intro_grid-2 img:nth-child(3) { grid-column: 3/4; grid-row: 2/3; }
.intro_grid-2 img:nth-child(4) { grid-column: 1/2; grid-row: 3/4; }

/* Intro Grid Slide 3 */

.intro_grid-3 p {
    grid-column: 3/6;
    grid-row: 1/3;
    z-index: 1;
    place-self: center;
    padding: 0 var(--default-padding) 0 8rem;
}

.intro_grid-3 img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: top;
    min-height: 0; 
    min-width: 0;
}

.intro_grid-3 img:nth-child(1) { grid-column: 1/3; grid-row: 1/4; clip-path: inset(33.33% 0% 33.33% 0%); }
.intro_grid-3 img:nth-child(2) { grid-column: 4/5; grid-row: 3/4; }

/* Intro Grid Slide 4 */

.intro_grid-4 div {
    grid-column: 3/6;
    grid-row: 1/3;
    z-index: 1;
    place-self: top;
    padding: 10rem 8rem;
}

/* Intro Grid Slide 5 */

.intro_grid-5 div {
    grid-column: 3/6;
    grid-row: 1/3;
    z-index: 1;
    place-self: top;
    padding: 10rem 8rem;
}

/* -------------------------
FOOTER
------------------------- */

.footer_top {
    display: flex;
    justify-content: space-between;
    background-color: var(--color_text);
    color: var(--color_bg);
}

.footer_top_text {
    padding: 50px;
}

.footer_bottom {
    background-color: var(--color_bg);
    color: var(--color_text);
    padding: 10px 50px;
}

footer a {
    text-decoration: none;
    color: inherit;
}

/* -------------------------
PAGE: IMPRESSUM
------------------------- */

.page_impressum main {
    padding: var(--default-padding);
}

.page_impressum .hero {
    padding-top: 8rem;
    padding-bottom: 1rem;
}

.page_impressum .nav_logo path {
    fill: var(--color_text);
}

.page_impressum .nav_ham-wrapper {
    background-color: var(--color_text);
}

.page_impressum .nav_ham-wrapper div {
    background-color: var(--color_bg);
}

/* -------------------------
MEDIA QUERY
------------------------- */

@media (max-width: 1120px) {

    .section_intro {
        height: auto;
        overflow: visible;
    }

    .intro_grid {
        position: relative;
        height: auto;
        opacity: 1;
        visibility: visible;
        display: flex;
        flex-direction: column;
    }

    .intro_h-lines, 
    .intro_v-lines {
        display: none;
    }

    .intro_grid p, 
    .intro_grid div {
        padding: 1rem 0; 
    }

    .intro_grid img {
        height: auto;
        max-height: 50vh; 
        width: 100%;
        object-fit: cover;
        clip-path: none !important;
    }

    .intro_grid p {
        padding: var(--default-padding);
    }
}