*{
    box-sizing: border-box;
}

body{
    margin: 0;
    font-family: Helvetica, Arial, sans-serif;
    background: white;
    color: black;
    overflow-x: hidden;
    overflow-y: auto;
}

/* Hintergrundbild Startseite */
.background-image{
    position: fixed;
    inset: 0;
    z-index: -1;
    background-image: url("images/hintergrund.jpg");
    background-size: cover;
    background-position: top;
}

.background-image::after{
    content: "";
    position: absolute;
    inset: 0;
    background: transparent;
}

/* Künstlername & Header */
.artist-name{
    position: fixed;
    top: 30px;
    left: 40px;
    font-size: 60px;
    font-weight: 400;
    color: white;
    z-index: 10;
}

.project-header {
    padding: 30px 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.artist-name-project {
    font-size: 32px;
    font-weight: 400;
    margin: 0;
}

.back {
    font-size: 20px;
    color: black;
    text-decoration: none;
}

/* Startseite Text-Container */
.project-container{
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
}

.project{
    font-size: clamp(45px, 8vw, 120px);
    font-weight: 300;
    color: white;
    text-decoration: none;
    white-space: nowrap;
    width: max-content;
    margin: 15px 0;
    animation: move 35s linear infinite;
}

.project:nth-child(even){
    animation-direction: reverse;
}

.project:nth-child(3n){
    animation-duration: 45s;
}

@keyframes move{
    from{ transform: translateX(-100%); }
    to{ transform: translateX(100vw); }
}

/* Projekttitel im Inhaltsbereich */
.gallery-title {
    font-size: 40px;
    font-weight: 300;
    padding: 20px 40px 0 40px;
    margin: 0;
}

/* --- Projekt Slideshow (Oben) --- */
.project-slider {
    position: relative;
    width: 100%;
    height: 70vh; /* Nutzt 70% der Bildschirmhöhe */
    overflow: hidden;
    margin-bottom: 40px;
    background: #000000;
}

.slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 1.5s ease-in-out; /* Reiner weicher Übergang, KEIN Zoom */
}

.slide.active {
    opacity: 1;
}

.slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Bildunterschrift dezent über dem Slider liegend (unten links) */
.slide-caption {
    position: absolute;
    bottom: 15px;
    left: 20px;
    color: rgba(255, 255, 255, 0.8);
    background: rgba(0, 0, 0, 0.5);
    padding: 5px 10px;
    font-size: 14px;
    font-family: sans-serif;
    pointer-events: none;
    z-index: 5;
}

/* --- Projekt Galerie (Unten) --- */
.gallery{
    width: 100%;
    max-width: 1700px;
    margin: 0 auto;
    padding: 40px 40px 60px 40px;
    display: flex;
    flex-direction: column;
    gap: 80px; /* Großer Abstand zwischen den Galerie-Blöcken */
}

/* Container für Bild + Unterschrift */
.gallery-item {
    width: 100%;
    display: flex;
    flex-direction: column;
}

.gallery-item img{
    width: 100%;
    height: auto;
    display: block;
}

/* Stil für die Werkangaben unter dem Galeriebild */
.image-caption {
    margin: 15px 0 0 0;
    font-size: 13px; /* Etwas kleiner & dezenter für edlere Ästhetik */
    color: #666666; /* Feines Grau */
    line-height: 1.6;
    font-family: Helvetica, Arial, sans-serif;
    white-space: pre-line; /* WICHTIG: Behält die Zeilenumbrüche aus der Datenbank bei! */
    letter-spacing: 0.02em; /* Minimal feinerer Zeichenabstand */
}

/* CV */
.cv-content{
    padding: 150px 40px;
    font-size: 24px;
    line-height: 1.8;
}

.cv-content h2{
    font-size: 60px;
    font-weight: 300;
}

/* Mobile Optimierung */
@media(max-width: 700px){
    .artist-name{
        top: 20px;
        left: 20px;
        font-size: 24px;
    }
    .project-header {
        padding: 20px;
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    .artist-name-project {
        font-size: 24px;
    }
    .gallery{
        padding: 40px 15px;
        gap: 50px;
    }
    .project-slider{
        height: 50vh;
    }
    .slide-caption {
        font-size: 12px;
        bottom: 10px;
        left: 10px;
    }
    .image-caption {
        font-size: 12px;
        margin-top: 8px;
    }
}