body {
    font-family: Trebuchet MS, Tahoma, Verdana, Avenir LTD, "FolioOffice", Helvetica, arial, sans-serif;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    background-color: none;
	    overflow-y: scroll;
    /*background-color: #F5F5F5;*/
}

#header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: none;
    position: relative;
    top: 0;
    left: 0;
    right: 0;
    z-index: 2;
	text-transform: uppercase;
}

#header a {
	padding: 30px 18px 18px 18px;
}



#info {
	background-color: #eeeeee;
}

a:hover {
    color: red;
}

h1 {
    text-align: left;
    margin: 0px;
    color: black;
    font-size: 16pt;
	font-weight: normal;
}

a {
    text-align: center;
    color: black;
    line-height: 145%;
    text-decoration: none;
}

p {
    text-align: justify;
    color: black;
    font-size: 16pt;
}
#counter-single {
	text-align: center;
    color: black;
    font-size: 16pt;
	font-weight: normal;
	position: absolute;
	bottom: 0px;
	left: 0px;
	padding: 18px 18px 30px 18px; /* Innenabstand */
}

#counter-left {
	text-align: center;
    color: black;
    font-size: 16pt;
	font-weight: normal;
	position: absolute;
	bottom: 0px;
	left: 0px;
	padding: 18px 18px 30px 18px; /* Innenabstand */
}

#counter-right {
	text-align: center;
    color: black;
    font-size: 16pt;
	font-weight: normal;
	position: absolute;
	bottom: 0px;
	right: 0px;
	padding: 18px 18px 30px 18px; /* Innenabstand */

}


#tagsContainer {
    display: flex;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    position: relative;
	padding:0px 10px 10px 10px;
    z-index: 3;
}

#tagsContainer::-webkit-scrollbar {
    display: none;
}

@media (min-width: 900px) {
    #tagsContainer {
    display: flex;
    position: absolute;
    top: 22px; /* Falls Sie den Container leicht nach oben verschieben möchten */
 left: 50%; /* Mittig in horizontaler Richtung */
    transform: translateX(-50%);
    z-index: 3;
    }
}
#tagsContainer a {
    text-decoration: none;
    padding: 3px 7px 3px 7px;
    margin-left: 0.5em;
    margin: 1px 7px 1px 1px;
    border-radius: 18px;
    outline: 1px solid;
    font-size: 12pt;
    color: black;
    font-weight: normal;
    background-color: white;
    white-space: nowrap; /* Verhindert das Umbruchverhalten der Tags */
}

#tagsContainer a.selected {
    color: white;
    background-color: black;
    outline: 1px solid #000000;
}

#tagsContainer a:hover {
    color: white;
    background-color: black;
    outline: 1px solid #000000;
}





#tagsContainer.expanded {
	display: flex;
    flex-wrap: wrap;
}

#expandTags {
    background-color: white;
    color: black;
    border-radius: 18px;
    outline: 1px solid;
    padding: 3px 7px 3px 7px;
    cursor: pointer;
    z-index: 4; /* Erhöhen Sie den z-index-Wert, um sicherzustellen, dass der Button über den Tags liegt */
}
#expandTagsButtonContainer {
 background-color: white;
    color: black;
    border-radius: 18px;
    outline: 1px solid;
    padding: 3px 7px 3px 7px;
    cursor: pointer;
    z-index: 4;
}

#expandTagsButtonContainer:hover {
    color: white;
    background-color: black;
    outline: 1px solid #000000;
}

.flex-container {
    margin:0px 0px 30px 0px ;
	display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}
@media (min-width: 900px) {
.flex-container {
    margin:30px 0px 0px 0px ;
}
}

.image-container {
    width: 475px; /* Setzen Sie die Breite Ihrer Container */
    height: 475px;
    overflow: hidden; /* Verhindert, dass Bilder über die Container hinausragen */
    position: relative;
}

.image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ändern Sie contain zu cover */
    display: block;
    margin: auto; /* Zentrieren Sie das Bild im Container */
}

.content-container {
	margin: 10px 10px 45px 10px;
}

.content-container img {
	width: 100%;
    height: 100%;
    object-fit: contain;
}

.content-container p {
  margin: 10px 0px 5px 0px;
	text-transform: uppercase;
}

.content-container:hover .image-title {
    color: red;
}

@media (max-width: 900px) {
    .content-container {
		margin: 0px 0px 50px 0px;
        position: relative;
        width: 100%;
    }

    .image-container {
        width: 100%; /* Setzen Sie die Breite Ihrer Container */
        height: auto; /* Automatische Höhe, um die Höhe nicht zu begrenzen */
        overflow: hidden; /* Verhindert, dass Bilder über die Container hinausragen */
        position: relative;
    }

    .image-container img {
        width: 100%;
        height: auto; /* Automatische Höhe, um die Höhe nicht zu begrenzen */
    }
	.content-container:hover .image-title {
    color: black;
}

}

/* ... (Ihr bestehendes CSS hier) ... */

/* ... (Ihr bestehendes CSS hier) ... */

/* Ihr bestehendes CSS hier ... */




/* styles.css 
#imageContainerProject {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}*/



/* styles.css 
#imageContainerProject {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}*/
/*#imageContainerProject {
    position: relative;
 
  }


.image-containerProject {
    margin: 10px;
    width: calc(50% - 20px);
    box-sizing: border-box;
    display: flex;
}

.image-containerProject img {
    max-width: 100%;
    height: auto;
    cursor: pointer;
    flex: 1;
    
}

@media (max-width: 1024px) {
    .image-containerProject {
        width: calc(50% - 20px);
    }
}

@media (max-width: 768px) {
    .image-containerProject {
        width: calc(50% - 20px);
    }
}

@media (max-width: 480px) {
    .image-containerProject {
        width: calc(100% - 20px);
     
    }
}


Stil für die Bildergalerie 
.image-gallery-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 80%;
    margin: 0 auto;
}
*/
/*.gallery-image {
    max-width: 100%;
    height: auto;
    cursor: pointer;
    transition: opacity 1s ease-in-out;
}*/

.gallery-image.active {
    opacity: 1;
}


.image-containerProject {
    position: absolute;
    z-index: 0;
    text-align: center;
    /* Optional: Zentriert das Bild horizontal im Container */
}


/* Fügen Sie dies zu Ihrer CSS-Datei hinzu (z. B. styles.css) */
#imageContainerProject {
	height: calc(100vh - 140px); /* 100% der Viewport-Höhe abzüglich der Höhe des Header-Bereichs (80px) */
    display: flex;
    justify-content: center;
    align-items: center;
}

#imageContainerProject img {
    height: 100%;
    width: 100%; /* 100% der Breite des Containers verwenden */
    object-fit: contain; /* Behält das Seitenverhältnis bei und füllt den Container */
}


@media (max-width: 900px) {
.image-pair-container {
    display: flex;
    flex-direction: column; /* Anordnung der Bilder untereinander */
    height: 100vh; /* Höhe des Containers auf 100% des Viewports setzen */
    overflow: hidden; /* Verhindern, dass Bilder über die Container hinausragen */
}

.left-image-container,
.right-image-container {
    width: 100%; /* Breite des Containers auf 100% setzen */
    height: 50%; /* Höhe auf 50% des Container setzen */
    overflow: hidden; /* Verhindern, dass Bilder über die Container hinausragen */
    display: flex;
    justify-content: center; /* Zentrieren des Bildes horizontal */
    align-items: center; /* Zentrieren des Bildes vertikal */
}

.left-image-container img,
.right-image-container img {
    width: auto; /* Automatische Breite für Bilder */
    height: 100%; /* Bilder nehmen den gesamten verfügbaren vertikalen Platz ein */
    object-fit: contain; /* Behält das Seitenverhältnis bei und füllt den Container */
}


}


.left-image-container img,
.right-image-container img {
    width: auto; /* Automatische Breite für Bilder */
    height: 100%; /* Bilder nehmen den gesamten verfügbaren vertikalen Platz ein */
    object-fit: contain; /* Behält das Seitenverhältnis bei und füllt den Container */
}

	

.image-pair-container {
    display: flex;
    height: calc(100vh - 140px); /* Höhe des Containers auf 100% des Viewports setzen */
    overflow: hidden; /* Verhindern, dass Bilder über die Container hinausragen */
}
.left-image-container,
.right-image-container {
    flex: 1; /* Die Container nehmen gleich viel Platz ein */
    overflow: hidden; /* Verhindern Sie, dass Bilder außerhalb der Container angezeigt werden */
    max-height: 100%; /* Bilder nehmen den verfügbaren vertikalen Platz ein */
}
/* CSS-Stil für die Begrenzung der Höhe der Projektcontainer */


/* CSS-Stil für die Begrenzung der Höhe der Projektcontainer */
/* CSS-Stil für die Begrenzung der Höhe der Projektcontainer */
.image-containerProject {
    max-height: 500px; /* Ändern Sie diese Höhe nach Bedarf */
    overflow: hidden; /* Verhindern Sie, dass das Bild über die Containergrenzen hinausragt */
    display: flex;
    justify-content: center; /* Zentrieren Sie das Bild horizontal */
    align-items: center; /* Zentrieren Sie das Bild vertikal */
}

/* Stil für das Bild im Projektcontainer */
.project-image {
    max-width: 100%; /* Bild wird auf die maximale Breite des Containers skaliert */
    max-height: 100%; /* Bild wird auf die maximale Höhe des Containers skaliert */
    display: block; /* Ändern Sie das Display zu block, um den Inline-Abstand zu entfernen */
    margin: auto; /* Zentrieren Sie das Bild horizontal innerhalb seines Containers */
}





.image-containerProject {
    margin: 0px 0px 0px 0px;
    width: calc(50%);
    box-sizing: border-box;
    position: relative;
}


.image-containerProject img {
    max-width: 100%;
    height: auto;
    cursor: pointer;
    flex: 1;
}





#description-container p {
    margin: 0px 25px 0px 25px;
	font-size: 12pt;
}
#description-container {
          text-align: left;
    margin-top: 18px; /* Hier kannst du den gewünschten Abstand einstellen */
	width: 100%;
	max-width: 900px;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}


@media (max-width: 925px) {
	#description-container {
          text-align: left;
    margin-top: 18px; /* Hier kannst du den gewünschten Abstand einstellen */
	width: 100%;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
		
    }
}

.project-image {
    max-width: 100%;
    height: auto;
    cursor: pointer;
    /* Fügt den Zeiger hinzu, um anzuzeigen, dass das Bild anklickbar ist */
}



/* Infoseite! */
.middlecontainer {
    display: flex;
    justify-content: center;
    align-items: center;
    height: calc(100vh - 140px);
	margin: 0px 25px 0px 25px;
}

.middlecontainer p {
    font-size: 12pt;
}


.middle {
    text-align: center;
}

.contact3 {
    color: black;
    font-size: 14pt;
}


.image-title {
    text-align: center;
	  font-size: 12pt;
}



/* styles.css */

/* ... (dein vorhandener Code) */

@media (max-width: 925px) {
    .image-containerProject {
        width: calc(100%);
        /* Ein Bild pro Zeile für schmalere Ansichten */
    }
}


.image-containerProject {
    margin: 0px;
    width: calc(100%);
	max-height: calc(100%);
    box-sizing: border-box;
    display: flex;
}


#scrollLink {
	text-align: center;
    color: black;
    font-size: 16pt;
	font-weight: normal;
	position: absolute;
	bottom: 0px;
	right: 0px;
	padding: 18px 18px 30px 18px; /* Innenabstand */
}



.hidden {
    display: none;
}