* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Index", sans-serif;
    font-weight: 900;
    color: white;
    line-height: 1.2;

}

body {
    background-color: black;

    overflow: hidden;
    height: 100vh;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(5, 1fr);
    gap: 16px;
    line-height: normal;
    
    /* Baseline grid setup */
    --baseline-unit: 1rem;
    font-size: 1rem;
}
.title{
    position: fixed;
    font-weight: 900;
    font-size: 10vw;
    text-transform: uppercase;
    letter-spacing: -1px;
    text-decoration: none;
    margin: 0;
    margin-left: 8px;
    padding: 0;
    z-index: 900;
    text-shadow: 0 0 8px rgba(0, 0, 0, 0.25);
}

.title:hover{
    color: red;
    cursor: nw-resize;
}
.navigation{
    position: fixed;
    width: 31.2vw;
    margin-top: calc(10vw + 16px);
    margin-left: 16px;
    display: flex;
    align-items: start;
    z-index: 999;
    text-shadow: 0 0 8px rgba(0, 0, 0, 0.28);
}
.Back{
    width: 130px;
    z-index: 999;
    margin-right: 20px;
    text-decoration: none;
    color: white;
}
.Back:hover{
    color: red;
    cursor: nw-resize;
}
.Back a {
    display: block;
}
.Next{
    width: auto;
    text-align: right;
    flex: 1;
    text-decoration: none;
}
.Next:hover{
    color: red;
    cursor: ne-resize;
}
.Next a {
    display: block;  /* ← hinzufügen */
}


.Info{
    grid-column: 1/3;
    grid-row: 3/6;
    margin: 16px;
    overflow-y: scroll;
    scrollbar-width: none;
}

.discription{
grid-column: 1/3;
grid-row: 3/6;
margin-top: 16px;
}

p{
    padding-bottom: 8px;
}

.text-info__row {
    display: flex;
    align-items: start;
}

.text-info__title {
  width: 110px;
  flex-shrink: 0;
  margin-right: 16px;
}

.text-info__content {
  flex: 1;
}

.container {
grid-column: 3 / 7;
grid-row: 1 / 6;
overflow-y: auto;
overflow-x: hidden;
scroll-behavior: smooth;
-ms-overflow-style: none;
scrollbar-width: none;
z-index: 1;
}

.image-container {
background-color: rgb(255, 255, 255);
height: auto;
transition: opacity 0.3s ease;
border-left: 2px solid black;
border-right: 2px solid black;
border-bottom: 1px solid black;

}
.image-container img {
width: 100%;
height: auto;
display: block;
}

@media (max-width: 850px) {
    body {
        display: flex;
        flex-direction: column;
        overflow-y: auto;
        overflow-x: hidden;
         scrollbar-width: none;  /* ← Firefox */
        -ms-overflow-style: none;  /* ← Internet Explorer/Edge */
    }
    
    /* Chrome, Safari, Opera */
    body::-webkit-scrollbar {
        display: none;
    }
    
    .title{
    z-index: 999;
    display: block;
    position: fixed;
    font-weight: 900;
    font-size: 10vw;
    text-transform: uppercase;
    letter-spacing: -1px;
    text-decoration: none;
    margin: 0;
    margin-left: 8px;
    padding: 0;
    }

    .navigation{
    z-index: 999;
    width: 93vw;
    margin: 16px;
    margin-top: 10vw;
    font-size: 16px;
    color: white;
    display: flex;
    align-items: start;
    text-shadow: 0 0 8px rgba(0, 0, 0, 0.28);
}
    
    .Info {
        margin-top:calc(10vw + 16px);
        margin-bottom: 0px;
        position: relative;
        grid-column: unset;
        grid-row: unset;
        overflow-y: visible;
        order: 2;
        line-height: normal;
        pointer-events: none;
    }

    .text-info__row{
        margin: 0;
    }
    .discription {
        position: relative;
        grid-column: unset;
        grid-row: unset;
        order: 3;
    }
    
    .container {
        position: relative;
        grid-column: unset;
        grid-row: unset;
        overflow-y: visible;
        overflow-x: visible;
        width: 100%;
        order: 4;
    }
    
    .image-container {
        background-color: rgb(255, 255, 255);
        height: auto;
        transition: opacity 0.3s ease;
        border-left: 2px solid black;
        border-right: 2px solid black;
        border-bottom: 1px solid black;}   
    
    .text-info__row {
       display: flex;
       align-items: start;
    }
    
    .text-info__title {
        width: 110px;
        flex-shrink: 0;
        margin-right:16px;
    }
    .Back {
    color: white !important;
}
}