body {
    margin: 0;
    font-family: oso-sans-semicondensed, sans-serif;
    font-weight: 300;
    font-style: normal;
}

* {
    box-sizing: border-box;
}

/* Suche diesen Block in deinem CSS und füge 'video' hinzu */
img, video {
    width: 100%;
    display: block;
    height: auto; /* Sorgt dafür, dass die Proportionen erhalten bleiben */
}

h1 {
    font-size: 85px;
    font-family: kepler-std-display, serif;
    font-weight: 400;
    font-style: normal;
    line-height: 99px;
    margin: 0;
}

p {
    font-family: oso-sans-semicondensed, sans-serif;
    font-weight: 300;
    font-style: normal;
    font-size: 20px;
    margin: 17px 0 0 0;
    line-height: 32px;
}

/* --- Navigation & Sticky Elements --- */

.navigation {
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 2000;
}

.navigation ul {
    list-style-type: none;
    padding: 15px 15px;
    margin: 0;
    display: flex;
    justify-content: space-between;
    width: 100%;
}

.navigation a {
    color: black;
    font-size: 20px;
    text-decoration: none;
    font-weight: 400;
    display: inline-block !important; 
    width: auto;
}

.navigation a:hover {
    text-decoration: underline;
}

.navigation li {
    flex-grow: 0;
}

.project a {
    text-align: left;
}

.über_mich a {
    text-align: center;
}

.language a {
    text-align: right;
}

/* Styling für den E-Mail Link im Text */
.email-link {
    color: black;
    text-decoration: none;
    transition: text-decoration 0.2s ease;
}

.email-link:hover {
    text-decoration: underline;
}
/* ------------------------------------------------------------------- */
/* --- Project Grid Layout - BASIS --- */
/* ------------------------------------------------------------------- */

.project-grid {
    display: grid;
    padding: 0 15px 0 15px;
    gap: 15px;
    /* Definiert das universelle 6-Spalten-Raster für ALLE Projekte */
    grid-template-columns: repeat(6, 1fr);
}

/* H1 Sticky Container - Allgemeine Stile */
.project-grid_title {
    position: sticky;
    top: 0; 
    z-index: 999;
    background-color: white;
    padding-top: 60px;
    min-height: calc(100vh - 60px);
    /* ✨ KORREKTUR: Der Titel spannt sich standardmäßig über die Spalten 1, 2 und 3 */
    grid-column: 1 / 4;
    /* Optional: Standardmäßig in Zeile 1 platzieren */
    grid-row: 1; 
}

/* Text Container  - Allgemeine Stile */
.project-grid_text {
    font-family: kepler-std-display, serif;
    font-weight: 400;
    font-style: normal;
    min-height: calc(100vh - 60px);
}

.project-grid_info {
    font-family: kepler-std-display, serif;
    font-weight: 400;
    font-style: normal;
    min-height: calc(100vh - 60px);
}

/* Image Container - Allgemeine Stile */
.image-container {
    position: relative;
    z-index: 1000;
}


/* ------------------------------------------------------------------- */
/* --- Spezifisches Layout: Homepage --- */
/* ------------------------------------------------------------------- */

.project-grid.project-main .project-grid_title {
    /* grid-column: 1 / 4; wird durch die allgemeine Regel oben gesetzt */
    /* grid-row: 1; wird durch die allgemeine Regel oben gesetzt */
}

.project-grid.project-main .grid-item-1 {
    grid-column: 2 / 5;
    grid-row: 2;
    margin-top: -60px;
}

.project-grid.project-main .grid-item-2 {
    grid-column: 5 / 7;
    grid-row: 3;
}

.project-grid.project-main .grid-item-3 {
    grid-column: 2 / 5;
    grid-row: 4;
}

.project-grid.project-main .grid-item-4 {
    grid-column: 4 / 7;
    grid-row: 5;
}

.project-grid.project-main .grid-item-5 {
    grid-column: 2 / 4;
    grid-row: 6;
}

.project-grid.project-main .grid-item-6 {
    grid-column: 4 / 6;
    grid-row: 7;
}

.project-grid.project-main .grid-item-7 {
    grid-column: 4 / 6;
    grid-row: 8;
}

.project-grid.project-main .project-grid_text {
    grid-column: 4 / 7;
    grid-row: 9;
}

/* ------------------------------------------------------------------- */
/* --- Spezifisches Layout: Über Mich --- */
/* ------------------------------------------------------------------- */

.project-grid.project-uebermich .project-grid_title {
    /* grid-column: 1 / 4; wird durch die allgemeine Regel oben gesetzt */
    /* grid-row: 1; wird durch die allgemeine Regel oben gesetzt */
}

.project-grid.project-uebermich .grid-item-1 {
    grid-column: 3 / 5;
    grid-row: 2;
    margin-top: -60px;
}

.project-grid.project-uebermich .project-grid_info {
    grid-column: 5 / 6;
    grid-row: 2;
    margin-top: -80px;
}

.project-grid.project-uebermich .project-grid_text {
    grid-column: 4 / 7;
    grid-row: 7;
}
/* ------------------------------------------------------------------- */
/* --- Spezifisches Layout: Das Verhör --- */
/* ------------------------------------------------------------------- */

.project-grid.project-verhoer .project-grid_title {
    /* grid-column: 1 / 4; wird durch die allgemeine Regel oben gesetzt */
    /* grid-row: 1; wird durch die allgemeine Regel oben gesetzt */
}


.project-grid.project-verhoer .grid-item-1 {
    grid-column: 3 / 5;
    grid-row: 2;
    margin-top: -60px;
}

.project-grid.project-verhoer .grid-item-2 {
    grid-column: 4 / 7;
    grid-row: 3;
}

.project-grid.project-verhoer .grid-item-3 {
    grid-column: 4 / 7;
    grid-row: 4;
}

.project-grid.project-verhoer .grid-item-4 {
    grid-column: 2 / 5;
    grid-row: 5;
}

.project-grid.project-verhoer .grid-item-5 {
    grid-column: 2 / 5;
    grid-row: 6;
}

.project-grid.project-verhoer .grid-item-6 {
    grid-column: 4 / 7;
    grid-row: 7;
}

.project-grid.project-verhoer .grid-item-7 {
    grid-column: 4 / 7;
    grid-row: 8;
}

.project-grid.project-verhoer .project-grid_text {
    grid-column: 4 / 7;
    grid-row: 12;
}

/* ------------------------------------------------------------------- */
/* --- Spezifisches Layout: Paris --- */
/* ------------------------------------------------------------------- */

.project-grid.project-paris .project-grid_title {
    /* grid-column: 1 / 4; wird durch die allgemeine Regel oben gesetzt */
    /* grid-row: 1; wird durch die allgemeine Regel oben gesetzt */
}


.project-grid.project-paris  .grid-item-1 {
    grid-column: 2 / 5;
    grid-row: 2;
    margin-top: -60px;
}


.project-grid.project-paris .grid-item-2 {
    grid-column: 4 / 7;
    grid-row: 3;
}


.project-grid.project-paris .grid-item-3 {
    grid-column: 4 / 7;
    grid-row: 4;
}


.project-grid.project-paris .grid-item-4 {
    grid-column: 2 / 5;
    grid-row: 5;
}


.project-grid.project-paris .grid-item-5 {
    grid-column: 2 / 5;
    grid-row: 6;
}


.project-grid.project-paris .grid-item-6 {
    grid-column: 5 / 7;
    grid-row: 7;
}

.project-grid.project-paris .grid-item-7 {
    grid-column: 3 / 5;
    grid-row: 8;
}

.project-grid.project-paris .project-grid_text {
    grid-column: 4 / 7;
    grid-row: 12;
}


/* ------------------------------------------------------------------- */
/* --- Spezifisches Layout: Umsetzung --- */
/* ------------------------------------------------------------------- */

.project-grid.project-umsetzung .project-grid_title {
    /* grid-column: 1 / 4; wird durch die allgemeine Regel oben gesetzt */
    /* grid-row: 1; wird durch die allgemeine Regel oben gesetzt */
}


.project-grid.project-umsetzung .grid-item-1 {
    grid-column: 2 / 4;
    grid-row: 2;
    margin-top: -60px;
}

.project-grid.project-umsetzung .grid-item-2 {
    grid-column: 4 / 7;
    grid-row: 3;
}

.project-grid.project-umsetzung .grid-item-3 {
    grid-column: 2 / 5;
    grid-row: 4;
}

.project-grid.project-umsetzung .grid-item-4 {
    grid-column: 2 / 5;
    grid-row: 5;
}

.project-grid.project-umsetzung .grid-item-5 {
    grid-column: 4 / 7;
    grid-row: 7;
}

.project-grid.project-umsetzung .grid-item-6 {
    grid-column: 4 / 7;
    grid-row: 6;
}


.project-grid.project-umsetzung .project-grid_text {
    grid-column: 4 / 7;
    grid-row: 11;
}


/* ------------------------------------------------------------------- */
/* --- Spezifisches Layout: London --- */
/* ------------------------------------------------------------------- */

.project-grid.project-london .project-grid_title {
    /* grid-column: 1 / 4; wird durch die allgemeine Regel oben gesetzt */
    /* grid-row: 1; wird durch die allgemeine Regel oben gesetzt */
}


.project-grid.project-london  .grid-item-1 {
    grid-column: 2 / 5;
    grid-row: 2;
    margin-top: -60px;
}


.project-grid.project-london .grid-item-2 {
    grid-column: 4 / 7;
    grid-row: 3;
}


.project-grid.project-london .grid-item-3 {
    grid-column: 4 / 7;
    grid-row: 4;
}


.project-grid.project-london .grid-item-4 {
    grid-column: 4 / 7;
    grid-row: 5;
}


.project-grid.project-london .grid-item-5 {
    grid-column: 4 / 7;
    grid-row: 6;
}


.project-grid.project-london .grid-item-6 {
    grid-column: 2 / 4;
    grid-row: 7;
}

.project-grid.project-london .grid-item-7 {
    grid-column: 4 / 6;
    grid-row: 8;
}

.project-grid.project-london .grid-item-8 {
    grid-column: 4 / 6;
    grid-row: 9;
}

.project-grid.project-london .grid-item-9 {
    grid-column: 2 / 4;
    grid-row: 10;
}

.project-grid.project-london .grid-item-10 {
    grid-column: 5 / 7;
    grid-row: 11;
}

.project-grid.project-london .grid-item-11 {
    grid-column: 5 / 7;
    grid-row: 12;
}

.project-grid.project-london .project-grid_text {
    grid-column: 4 / 7;
    grid-row: 16;
}

/* ------------------------------------------------------------------- */
/* --- Spezifisches Layout: Möbelhaus --- */
/* ------------------------------------------------------------------- */

.project-grid.project-moebelhaus .project-grid_title {
    /* grid-column: 1 / 4; wird durch die allgemeine Regel oben gesetzt */
    /* grid-row: 1; wird durch die allgemeine Regel oben gesetzt */
}


.project-grid.project-moebelhaus .grid-item-1 {
    grid-column: 2 / 5;
    grid-row: 2;
    margin-top: -60px;
}


.project-grid.project-moebelhaus .grid-item-2 {
    grid-column: 4 / 7;
    grid-row: 3;
}

.project-grid.project-moebelhaus .grid-item-3 {
    grid-column: 4 / 7;
    grid-row: 4;
}

.project-grid.project-moebelhaus .grid-item-4 {
    grid-column: 4 / 7;
    grid-row: 5;
}


.project-grid.project-moebelhaus .project-grid_text {
    grid-column: 4 / 7;
    grid-row: 9;
}

/* ------------------------------------------------------------------- */
/* --- Spezifisches Layout: Font Design --- */
/* ------------------------------------------------------------------- */

.project-grid.project-fontdesign .project-grid_title {
    /* grid-column: 1 / 4; wird durch die allgemeine Regel oben gesetzt */
    /* grid-row: 1; wird durch die allgemeine Regel oben gesetzt */
}


.project-grid.project-fontdesign .project-grid_text {
    grid-column: 4 / 7;
    grid-row: 9;
}

/* ------------------------------------------------------------------- */
/* --- Spezifisches Layout: Corporate --- */
/* ------------------------------------------------------------------- */

.project-grid.project-corporatedesign .project-grid_title {
    /* grid-column: 1 / 4; wird durch die allgemeine Regel oben gesetzt */
    /* grid-row: 1; wird durch die allgemeine Regel oben gesetzt */
}


.project-grid.project-corporatedesign .project-grid_text {
    grid-column: 4 / 7;
    grid-row: 11;
}

.project-grid.project-corporatedesign .grid-item-1 {
    grid-column: 3 / 5;
    grid-row: 2;
}

.project-grid.project-corporatedesign .grid-item-2 {
    grid-column: 5 / 7;
    grid-row: 3;
}

.project-grid.project-corporatedesign .grid-item-3 {
    grid-column: 3 / 5;
    grid-row: 4;
}

.project-grid.project-corporatedesign .grid-item-4 {
    grid-column: 3 / 5;
    grid-row: 5;
}

.project-grid.project-corporatedesign .grid-item-5 {
    grid-column: 5 / 7;
    grid-row: 6;
}

.project-grid.project-corporatedesign .grid-item-6 {
    grid-column: 4 / 5;
    grid-row: 7;
}

/* ------------------------------------------------------------------- */
/* --- Spezifisches Layout: Blickwechsel --- */
/* ------------------------------------------------------------------- */

.project-grid.project-blickwechsel .project-grid_title {
    /* grid-column: 1 / 4; wird durch die allgemeine Regel oben gesetzt */
    /* grid-row: 1; wird durch die allgemeine Regel oben gesetzt */
}

.project-grid.project-blickwechsel .grid-item-1 {
    grid-column: 3 / 5;
    grid-row: 2;
}

.project-grid.project-blickwechsel .grid-item-2 {
    grid-column: 5 / 7;
    grid-row: 3;
}

.project-grid.project-blickwechsel .grid-item-3 {
    grid-column: 5 / 7;
    grid-row: 4;
}

.project-grid.project-blickwechsel .grid-item-4 {
    grid-column: 3 / 5;
    grid-row: 5;
}

.project-grid.project-blickwechsel .grid-item-5 {
    grid-column: 3 / 5;
    grid-row: 6;
}

.project-grid.project-blickwechsel .grid-item-6 {
    grid-column: 5 / 7;
    grid-row: 7;
}

.project-grid.project-blickwechsel .grid-item-7 {
    grid-column: 3 / 5;
    grid-row: 8;
}

.project-grid.project-blickwechsel .project-grid_text {
    grid-column: 4 / 7;
    grid-row: 12;
}