* {box-sizing: border-box;}

body {
    color: black;
    margin: 0;
}

img {
    display: block;
    width: 100%;
}

a {
    display: contents;
    color: black;
}

p {
    margin: 0;
}

@font-face {
    font-family: 'w500';
    src: url(../fonts/W500-Regular.woff) format('woff2');
    font-weight: 400;
}

@font-face {
    font-family: 'siencegothic';
    src: url(../fonts/ScienceGothic-Light.woff) format('woff2');
    font-weight: 300;
}

/* NAV HOMEPAGE */
.nav_header {
    font-size: clamp(24px, 2vw, 32px);;
    text-decoration: none;
    font-family: w500, monospace;
    padding: 34px 30px 20px 30px;
    text-align: left;
    max-width: 1300px;
    width: 100%;
}

/* TEXT */
.text__bereich {
    padding: 0 30px;
}

.text__titel {
    grid-area: titel;
    color: rgb(0, 0, 0);
    font-size: clamp(32px, 5vw, 64px);
    font-family: w500, monospace;
    margin: 0 30px;
}

.text__eigenschaften {
    grid-area: eigenschaften;
    font-size: clamp(15px, 2vw, 15px);
    font-family: siencegothic, sans-serif;
    font-weight: 300;
    line-height: 1.3;
    /* margin-bottom: 70px; */
    margin: 5px 30px 50px 30px;
}

.text__text {
    grid-area: text;
    font-size: clamp(15px, 2vw, 15px);
    /* font-size: clamp(12px, 2vw, 20px); */
    font-family: siencegothic, sans-serif;
    font-weight: 300;
    line-height: 1.3;
    text-align: left;
    margin: 0 30px 50px 30px;
    /* margin-bottom: 100px; */
}

/* BILDER */
.image {
    width: 100%;
    margin-bottom: 30px;
}

.image2 {
    width: 100%;
}

.image3 {
    width: 100%;
    margin-bottom: 90px;
}

.vollbild {
    width: 100%;
    /* margin: 0 -90px 0px -90px; */
    /* width: calc(100% + 180px); */
}

/* PARENTCONTAINER */
.parentcontainer {
    display: grid;
    place-items: center;
}

/* KLEIN */
/* GRID HOMEPAGE */
.grid-homepage {
    display: grid;
    gap: 30px;
}

.grid-homepage__spalte {
    display: flex;
    flex-direction: column;
    gap: 30px;
}


/* GRIDS SEITEN */
.grid-pflanzenblau {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.grid-mak {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.grid-paris {
    display: flex;
    flex-direction: column;
    gap: 0 30px;
}

.grid-london {
    display: flex;
    flex-direction: column;
    gap: 0 30px;
    }

.grid-sw {
    display: flex;
    flex-direction: column;
    gap: 0 30px;
}

.grid-aboutme {
    display: flex;
    flex-direction: column;
    gap: 0 30px;
}

.grid-stuehle {
    display: flex;
    flex-direction: column;
    gap: 0 30px;
}

.grid-billard {
    display: flex;
    flex-direction: column;
    gap: 0 30px;
}

.grid-sonstiges {
    display: flex;
    flex-direction: column;
    gap: 0 30px;
    }

.grid-schrift {
    display: flex;
    flex-direction: column;
    gap: 0 30px;
}

/* MITTEL */
@media screen and (min-width: 640px) {
    /* GRID HOMEPAGE */
    .grid-homepage {
        display: grid;
        padding: 30px 30px 30px 30px;
        gap: 0 30px;
        grid-template-columns: 6fr 6fr;
        max-width: 1300px;
    }
}

/* GROSS */
@media screen and (min-width: 992px) {
    /* GRID HOMEPAGE */
    .grid-homepage {
        display: grid;
        padding: 30px 90px 90px 90px;
        gap: 0 30px;
        grid-template-columns: 4fr 3fr 3fr 2fr;
        max-width: 1300px;
    }

    .grid-homepage__spalte {
        display: flex;
        flex-direction: column;
        gap: 30px;
    }

    .nav_header {
        padding: 34px 90px 0 90px;
        /* max-width: 1300px; */
    }



    .text__bereich {
        padding: 0;
        /* max-width: 1300px; */
    }

    .text__titel {
        margin: 0;
    }
    
    .text__eigenschaften {
        margin: 0 0 70px 0;
    }
    
    .text__text {
        margin: 0 0 70px 0;
    }

    .vollbild {
        /* width: 100%; */
        margin: 0 -90px 0px -90px;
        width: calc(100% + 180px);
    }

    .grid-pflanzenblau {
        display: grid;
        padding: 30px 90px 0 90px;
        gap: 0 30px;
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
        grid-template-areas:
            "titel titel titel titel titel titel titel titel titel titel titel titel"
            "eigenschaften eigenschaften eigenschaften eigenschaften eigenschaften eigenschaften eigenschaften eigenschaften eigenschaften eigenschaften eigenschaften eigenschaften"
            "text text text text . . . . . . . ."
            "prozess prozess prozess prozess prozess prozess prozess prozess prozess prozess prozess prozess"
            "vollbild vollbild vollbild vollbild vollbild vollbild vollbild vollbild vollbild vollbild vollbild vollbild";
    }
    
    .grid-mak {
        display: grid;
        padding: 30px 90px 90px 90px;
        gap: 0 30px;
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
        grid-template-areas:
            "titel titel titel titel titel titel titel titel titel titel titel titel"
            "eigenschaften eigenschaften eigenschaften eigenschaften eigenschaften eigenschaften eigenschaften eigenschaften eigenschaften eigenschaften eigenschaften eigenschaften"
            "text text text text . . . . . . . ."
            "maktypo maktypo maktypo maktypo . animation animation animation . . . .";   
    }

    .grid-paris {
        display: grid;
        padding: 30px 90px 90px 90px;
        gap: 0 30px;
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
        grid-template-areas:
            "titel titel titel titel titel titel titel titel titel titel titel titel"
            "eigenschaften eigenschaften eigenschaften eigenschaften eigenschaften eigenschaften eigenschaften eigenschaften eigenschaften eigenschaften eigenschaften eigenschaften"
            "text text text text . . . . . . . ."
            "cover cover cover cover cover cover cover cover cover . . ."
            ". . . seite1 seite1 seite1 seite1 seite1 seite1 seite1 seite1 seite1"
            "seite2 seite2 seite2 seite2 seite2 seite2 seite2 seite2 seite2 . . ."
            ". . . seite3 seite3 seite3 seite3 seite3 seite3 seite3 seite3 seite3"
            "seite4 seite4 seite4 seite4 seite4 seite4 seite4 seite4 seite4 . . ."
            ". . . bundle bundle bundle bundle bundle bundle bundle bundle bundle"
            "postk postk postk postk postk postk . . . . . .";
    }
    
    .grid-london {
        display: grid;
        padding: 30px 90px 90px 90px;
        gap: 0 30px;
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
        grid-template-areas:
            "titel titel titel titel titel titel titel titel titel titel titel titel"
            "eigenschaften eigenschaften eigenschaften eigenschaften eigenschaften eigenschaften eigenschaften eigenschaften eigenschaften eigenschaften eigenschaften eigenschaften"
            "text text text text . . . . . . . ."
            "index index index index index index index index index . . ."
            ". . . inhalt1 inhalt1 inhalt1 inhalt1 inhalt1 inhalt1 inhalt1 inhalt1 inhalt1"
            "inhalt2 inhalt2 inhalt2 inhalt2 inhalt2 inhalt2 inhalt2 inhalt2 inhalt2 . . ."
            ". . . inhalt3 inhalt3 inhalt3 inhalt3 inhalt3 inhalt3 inhalt3 inhalt3 inhalt3"
            "inhalt4 inhalt4 inhalt4 inhalt4 inhalt4 inhalt4 inhalt4 inhalt4 inhalt4 . . ."
            ". . . inhalt5 inhalt5 inhalt5 inhalt5 inhalt5 inhalt5 inhalt5 inhalt5 inhalt5"
            "raster raster raster raster raster raster raster raster raster . . ."
            ". . . dimension dimension dimension dimension dimension dimension dimension dimension dimension";
        }
    
    .grid-sw {
        display: grid;
        padding: 30px 90px 90px 90px;
        gap: 0 30px;
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
        grid-template-areas:
            "titel titel titel titel titel titel titel titel titel titel titel titel"
            "eigenschaften eigenschaften eigenschaften eigenschaften eigenschaften eigenschaften eigenschaften eigenschaften eigenschaften eigenschaften eigenschaften eigenschaften"
            "text text text text . . . . . . . ."
            "dimension dimension dimension dimension dimension dimension dimension dimension dimension . . ."
            "serie1 serie1 serie1 serie1 serie1 serie1 serie1 serie1 serie1 . . ."
            ". . . serie2 serie2 serie2 serie2  serie2 serie2 serie2 serie2 serie2"
            "serie3 serie3 serie3 serie3  serie3 serie3 serie3 serie3 serie3 . . ."
            ". . . serie4 serie4 serie4 serie4  serie4 serie4 serie4 serie4 serie4"
            "serie5 serie5 serie5 serie5  serie5 serie5 serie5 serie5 serie5 . . ."
            ". . . . . kopfz kopfz kopfz kopfz kopfz kopfz kopfz"
            "skiz skiz skiz skiz skiz skiz skiz . . . . ."
            ". . . . . . nie1 nie1 nie1 nie2 nie2 nie2";
    }
    
    .grid-aboutme {
        display: grid;
        padding: 30px 90px 90px 90px;
        gap: 0 30px;
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
        grid-template-areas:
            "titel titel titel titel titel titel titel titel titel titel titel titel"
            "eigenschaften eigenschaften eigenschaften eigenschaften eigenschaften eigenschaften eigenschaften eigenschaften eigenschaften eigenschaften eigenschaften eigenschaften"
            "portrait portrait portrait box box . . . . . . ."
            "text text text text . . . . . . . ."
            "port port port port . . . . . . . .";  
    }
    
    .grid-stuehle {
        display: grid;
        padding: 30px 90px 90px 90px;
        gap: 0 30px;
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
        grid-template-areas:
            "titel titel titel titel titel titel titel titel titel titel titel titel"
            "eigenschaften eigenschaften eigenschaften eigenschaften eigenschaften eigenschaften eigenschaften eigenschaften eigenschaften eigenschaften eigenschaften eigenschaften"
            "text text text text . . . . . . . ."
            "tielseite tielseite tielseite tielseite tielseite tielseite tielseite tielseite tielseite . . ."
            ". . . schmutz schmutz schmutz schmutz schmutz schmutz schmutz schmutz schmutz"
            "landi landi landi landi landi landi landi landi landi . . ."
            ". . . coco coco coco coco coco coco coco coco coco"
            "egg egg egg egg egg egg egg egg egg . . ."
            ". . . imp imp imp imp imp imp imp imp imp"
            "back back back back back back back back back . . .";
    }
    
    .grid-billard {
        display: grid;
        padding: 30px 90px 90px 90px;
        gap: 0 30px;
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
        grid-template-areas:
            "titel titel titel titel titel titel titel titel titel titel titel titel"
            "eigenschaften eigenschaften eigenschaften eigenschaften eigenschaften eigenschaften eigenschaften eigenschaften eigenschaften eigenschaften eigenschaften eigenschaften"
            "text text text text . . . . . . . ."
            "animationb animationb animationb . . . . . . . . ."
            "z1 z1 z1 z1 z1 z1 z1 z1 z1 . . ."
            ". . . z2 z2 z2 z2 z2 z2 z2 z2 z2"
            "z3 z3 z3 z3 z3 z3 z3 z3 z3 . . ."
            ". . . z4 z4 z4 z4 z4 z4 z4 z4 z4"
            "z5 z5 z5 z5 z5 z5 z5 z5 z5 . . ."
            ". . . z6 z6 z6 z6 z6 z6 z6 z6 z6";
    }
    
    .grid-sonstiges {
        display: grid;
        padding: 30px 90px 90px 90px;
        gap: 0 30px;
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
        grid-template-areas:
            "titel titel titel titel titel titel titel titel titel titel titel titel"
            "eigenschaften eigenschaften eigenschaften eigenschaften eigenschaften eigenschaften eigenschaften eigenschaften eigenschaften eigenschaften eigenschaften eigenschaften"
            "magica magica magica magica . . . . . . . ."
            "text text text text . . . . . . . ."
            "spider1 spider1 spider1 spider2 spider2 spider2 spider3 spider3 spider3 spider4 spider4 spider4"
            "graun graun graun graun graun graun konstruiert konstruiert konstruiert konstruiert konstruiert konstruiert"
            "wal wal wal wal wal wal wal wal wal castle castle castle";
        }
    
    .grid-schrift {
        display: grid;
        padding: 30px 90px 90px 90px;
        gap: 0 30px;
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
        grid-template-areas:
            "titel titel titel titel titel titel titel titel titel titel titel titel"
            "eigenschaften eigenschaften eigenschaften eigenschaften eigenschaften eigenschaften eigenschaften eigenschaften eigenschaften eigenschaften eigenschaften eigenschaften"
            "text text text text . . . . . . . ."
            "schrift schrift schrift schrift schrift schrift schrift schrift schrift schrift schrift schrift"
            "tele tele tele tele tele tele tele tele tele tele tele .";
    }    
    
}