@charset "UTF-8";
/* CSS Document */


/* Container für die Projekt-Buttons */
#projectList {
    width: 96%;
    margin: 0 auto;
    overflow: hidden;
    box-sizing: border-box;
}

/* Projekt-Button (Standard-Zustand in Liste) */
.project-button {
    float: left;
    margin: 1%;
    aspect-ratio: 3 / 1;
    width: 31.33%;
    background: linear-gradient(135deg, #999, #ccc);
    font-size: 1.0em;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    justify-content: center;
    color: black;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    box-sizing: border-box;
    text-align: center;
    border: none;
    cursor: pointer;
    position: relative;
}

/* Hover-Effekt */
.project-button:hover {
    background: linear-gradient(135deg, #777, #bbb);
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    color: orange;
}

/* Aktiver Zustand (optional) */
.project-button.active {
    background: linear-gradient(135deg, #555, #999);
    border: 2px solid #333;
    color: black;
    font-weight: bold;
}

/* iPad & iPhone horizontal: 2 Buttons */
@media screen and (max-width: 1024px) {
    .project-button {
        width: 48%;
    }
}

/* iPhone vertikal: 1 Button zentriert */
@media screen and (max-width: 480px) and (orientation: portrait) {
    .project-button {
        width: 95%;
        float: none;
        margin: 10px auto;
    }
}

/* ----------------------------------- */
/* ANGEKLICHTER BUTTON ÜBER DER GALERIE */
/* ----------------------------------- */

#imageHeader {
    width: 100%;
    margin: 40px auto 30px auto;
    text-align: center;
}

/* Der zentrierte Einzel-Button (über Galerie) */
#imageHeader .project-button {
    float: none;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 31.33%;
    aspect-ratio: 3 / 1;
}

/* Zurück-Pfeil im Einzelbutton */
.zurueck-button {
    position: absolute;
    left: 10px;
    font-size: 1.4em;
    font-weight: bold;
    color: orange;
    cursor: pointer;
}

/* Der Titeltext im Button bleibt zentriert */
.project-title {
    margin: 0 auto;
}

/* ----------------------------------- */
/* GALERIE – BILDER OHNE ABGERUNDETE ECKEN */
/* ----------------------------------- */

#imageContainer {
    width: 96%;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    gap: 1.5%;
    justify-content: center;
    box-sizing: border-box;
}

/* Einzelbild */
.projekt-bild {
    width: 31%;
    height: auto;
    object-fit: cover;
    margin-bottom: 20px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    border-radius: 0;
}

/* 2-spaltig Tablet */
@media screen and (max-width: 1024px) {
    .projekt-bild {
        width: 48%;
    }
}

/* 1-spaltig Mobil */
@media screen and (max-width: 480px) and (orientation: portrait) {
    .projekt-bild {
        width: 95%;
        margin: 0 auto 10px auto;
    }
}