@import "_reset.css";

body {
    /*font-size: 2vw; /*16px*/
    font-family: 'Inconsolata', monospace;
    line-height: 1;
}

/* .grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-column-gap: 10px;
    justify-items: start;
    align-items: start;
} */

/* header {
    grid-column: 1 / span 12; <--- header takes all columns
} */

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

header {
    display: grid;
    grid-template-columns: repeat(12, 1fr);/* 12 columns */
    grid-gap: 10px;
    /* Adjust the gap as needed */
    margin-bottom:20px;
}

.headertitel {
    white-space: no;
}

.contact {
    grid-column: 1;
    /* Place .contact in the second column */
}

.projects {
    grid-column: 2;
    /* Place .contact in the second column */
}

.brand-identity {
    grid-column: 4;
    grid-column-end: 6;
}

.editorial-design {
    grid-column-start: 6;
    grid-column-end: 8;
}

.information-design {
    grid-column-start: 8;
    grid-column-end: 10;
}

.typography {
    grid-column-start: 10;
    grid-column-end: end;
}



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

main {
    font-size: 18px;
    line-height: 1;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    /* 12 columns */
    grid-gap: 10px;
    /* Adjust the gap as needed */
}

.Valerie {
    grid-column-start: 1;
    grid-column-end: 6;
}

.aboutme {
    grid-column-start: 3;
    grid-column-end: 12;
}

.titel-titel {
    grid-column-start: 2;
    grid-column-end: 12;
}

.titel-zahlen {
    grid-column-start: 3;
    grid-column-end: 12;
}

.T01-A-Gruppe {
    padding-top: 10px;
    grid-column-start: 10;
    grid-column-end: 12;
}

/*.T01-A:hover { /*Hintergrund der Titelelemente ändern
    border: 0.5px solid black;
    color: black;
    display: inline-flex; 
}
/*.T01-B:hover {
    background-color: black;
    color: white;
    display: inline-flex; 
}*/

::selection { /*Farbe des Highlighters des Textes ändern*/
    background-color: lightgrey; /* Change this to the desired background color */
    color: black; /* Change this to the desired text color */
}

#containerOverview { /* HIER EINSTELLUNGEN FüR PREVIEW BILD MACHEN*/
    width: 100%;
    height: 100%;
    display: none;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: -1;
}

#overviewE02C { /* Eine solche spezifische ID machen falls nötig wenn einzlene Previews nicht funktionieren (mit widht und hight spielen) */
    height: auto;
    width: 35%;
    display: none;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: -1;
}

#overviewB04A {
    height: 120%;
    width: auto;
    display: none;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: -1;
}

#overviewB04B {
    height: 180%;
    width: auto;
    display: none;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: -1;
}

#overviewE02A {
    height: 100%;
    width: auto;
    display: none;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: -1;
}

.overviewPreviewImg {
    display: none;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    
}

#containerProject { /*Project übercontainer (füllt die ganze seite)*/
    width: 100%;
    display: none;
    position: fixed;
    overflow-y: scroll;
    left: 0px;
    top: 0px;
    bottom: 0px;
    z-index: 1;
}

#containerProjectSub { /*Container direkt über den Projekten (lässt einen gap oben offen)*/
    margin-top: 18vh; /* Gap oben Bilder, vier zeilen 26vh*/
    margin-bottom: 2vh;
}

.projectMain { /*container für konkretes Projekt*/
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: none;
    margin-bottom: 2vh;
}

.image-border {
    border: 1px solid black;
}


/*.T01-A-Gruppe {
    background-image: url("../assets/schrift-03.svg");
    background-repeat: no-repeat;
    position: absolute;
    left: 0px;
    top: 0px;
    z-index: -1;

}*/



/*------Projekte In Raster einteilen------*/

.project-description-T01-A { 
    grid-column-start: 1;
    grid-column-end: end;
}

.T01-B-Gruppe {
    padding-top: 30px;
    grid-column-start: 10;
    grid-column-end: 12;
} 

.project-description-T01-B {
    grid-column-start: 1;
    grid-column-end: end;
}

.E02-A-Gruppe {
    padding-top: 30px;
    grid-column-start: 6;
    grid-column-end: 12;
}

.project-description-E02-A {
    grid-column-start: 1;
    grid-column-end: end;
}

.E02-B-Gruppe {
    padding-top: 30px;
    grid-column-start: 6;
    grid-column-end: 12;
}

.project-description-T01-B {
    grid-column-start: 1;
    grid-column-end: end;
}

.E02-C-Gruppe {
    padding-top: 30px;
    grid-column-start: 6;
    grid-column-end: 12;
}

.project-description-E02-C {
    grid-column-start: 1;
    grid-column-end: end;
}

.I03–A-Gruppe {
    padding-top: 30px;
    grid-column-start: 8;
    grid-column-end: 12;
}

.project-description-I03–A {
    grid-column-start: 1;
    grid-column-end: end;
}

.B04–A-Gruppe {
    padding-top: 30px;
    grid-column-start: 10;
    grid-column-end: end;
}

.project-description-B04–A {
    grid-column-start: 1;
    grid-column-end: end;
}

.B04–B-Gruppe {
    padding-top: 30px;
    grid-column-start: 10;
    grid-column-end: end;
}

.project-description-B04–B {
    grid-column-start: 1;
    grid-column-end: end;
}

h1 {
    font-size: 18px;
    font-weight: 500;
    text-align: left;
    margin: 0;
}

a {
    color: black;
    text-decoration: none;
}

p {
    font-size: 18px;
    font-weight: 500;
    text-align: left;
    margin: 0;
}

h2 {
    font-size: 18px;
    font-weight: 500;
    text-align: left;
    margin: 0;
}

.T01-A-Gruppe:hover { /*Wenn über Titel hovert, Mouse wird zu Pointer*/
    cursor: url("/assets/img.png"), pointer;
}

.T01-B-Gruppe:hover { /*Wenn über Titel hovert, Mouse wird zu Pointer*/
    cursor: url("/assets/img.png"), pointer;
}

.E02-A-Gruppe:hover { /*Wenn über Titel hovert, Mouse wird zu Pointer*/
    cursor: url("/assets/img.png"), pointer;
}

.E02-B-Gruppe:hover { /*Wenn über Titel hovert, Mouse wird zu Pointer*/
    cursor: url("/assets/img.png"), pointer;
}

.E02-C-Gruppe:hover { /*Wenn über Titel hovert, Mouse wird zu Pointer*/
    cursor: url("/assets/img.png"), pointer;
}

.I03–A-Gruppe:hover { /*Wenn über Titel hovert, Mouse wird zu Pointer*/
    cursor: url("/assets/img.png"), pointer;
}

.B04–A-Gruppe:hover { /*Wenn über Titel hovert, Mouse wird zu Pointer*/
    cursor: url("/assets/img.png"), pointer;
}

.B04–B-Gruppe:hover { /*Wenn über Titel hovert, Mouse wird zu Pointer*/
    cursor: url("/assets/img.png"), pointer;
}







/* Media Query für kleinere Bildschirme */
@media (max-width: 768px) {

    h1,
    h2,
    p {
        font-size: 18px;
        /* Mittelgröße für Bildschirme bis zu 768px Breite */
    }
}

/* Media Query für noch kleinere Bildschirme ----- Hier Projekt Beschriebe im neuen Grid anordnen*/
@media (max-width: 576px) {

    h1,
    h2,
    p {
        font-size: 14px;
        /* Mindestgröße für Bildschirme bis zu 576px Breite */
    }

    header {
        display: grid;
        /*grid-template-columns: repeat(6, 1fr);*/
        grid-template-rows: repeat(5, 1fr);
        width:100%;

        /* 12 columns */
        grid-gap: 0px;
        /* Adjust the gap as needed */
        margin-bottom:0px;
    }


    .contact {
        grid-column: 1;
        /* Place .contact in the second column */
    }
    
    .projects {
        grid-area: 2 / 3 / 4 / 12;
        /* Place .contact in the second column */
    }
    
    .brand-identity {
        grid-area: 1 / 5 / 4 / 12;
    }
    
    .editorial-design {
        grid-area: 2 / 7 / 8 / 12;
    }
    
    .information-design {
        grid-area: 3 / 9 / 6 / 12;
    }
    
    .typography {
        grid-area: 4 / 11 / 6 / 12;
    }

    .contact, .projects, .brand-identity, .editorial-design, .information-design, .typography{
        height:16px;
    }

    main {
        font-size: 18px;
        line-height: 1;
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        /* 12 columns */
        grid-gap: 10px;
        /* Adjust the gap as needed */
    }
    
    .Valerie {
        grid-column-start: 1;
        grid-column-end: 6;
    }
    
    .aboutme {
        grid-column-start: 2;
        grid-column-end: 12;
    }
    
    .titel-titel {
        grid-column-start: 2;
        grid-column-end: 12;
    }
    
    .titel-zahlen {
        grid-column-start: 3;
        grid-column-end: 12;
    }
    
    .T01-A-Gruppe {
        padding-top: 10px;
        grid-column-start: 11;
        grid-column-end: 12;
    }
    
    .project-description-T01-A {
        grid-column-start: 1;
        grid-column-end: end;
    }
    
    .T01-B-Gruppe {
        padding-top: 30px;
        grid-column-start: 11;
        grid-column-end: 12;
    }
    
    .project-description-T01-B {
        grid-column-start: 1;
        grid-column-end: end;
    }
    
    .E02-A-Gruppe {
        padding-top: 30px;
        grid-column-start: 7;
        grid-column-end: 12;
    }
    
    .project-description-E02-A {
        grid-column-start: 1;
        grid-column-end: end;
    }
    
    .E02-B-Gruppe {
        padding-top: 30px;
        grid-column-start: 7;
        grid-column-end: 12;
    }
    
    .project-description-T01-B {
        grid-column-start: 1;
        grid-column-end: end;
    }
    
    .E02-C-Gruppe {
        padding-top: 30px;
        grid-column-start: 7;
        grid-column-end: 12;
    }
    
    .project-description-E02-C {
        grid-column-start: 1;
        grid-column-end: end;
    }
    
    .I03–A-Gruppe {
        padding-top: 30px;
        grid-column-start: 9;
        grid-column-end: 12;
    }
    
    .project-description-I03–A {
        grid-column-start: 1;
        grid-column-end: end;
    }
    
    .B04–A-Gruppe {
        padding-top: 30px;
        grid-column-start: 5;
        grid-column-end: end;
    }
    
    .project-description-B04–A {
        grid-column-start: 1;
        grid-column-end: end;
    }
    
    .B04–B-Gruppe {
        padding-top: 30px;
        grid-column-start: 5;
        grid-column-end: end;
    }
    
    .project-description-B04–B {
        grid-column-start: 1;
        grid-column-end: end;
    }


}