/* COLOR CODES

Hellgrau: 	hsl(0, 0%, 80%);									Linien
Neutralgrau: hsl(0, 0%, 60%);									Text allgemein
dunkleres Neuralgrau: hsl(0, 0%, 45%);				Hervorhebungen - Überschriften
Dunkelgrau: 	hsl(0, 0%, 25%);								aktive Links - Menu

*/


@charset "utf-8";

/*--------------------------- MEDIA QUERIES -------------------------- */

/* Übersicht unter der Arbeit wird 5-spaltig */
		@media (min-width: 38em) {

				.works_all__masonry_2{
					grid-template-columns: repeat(4, 1fr);
				}
		}


/* Header springt auf eine Zeile */
		@media (min-width: 40.5em) {

			#content {
				left: 1.5%;
				width: 97%;
				top: 0rem;
			}

			/* Header */

			#top_transparency { visibility: hidden;}

			#top_bar {
				top: -0.5em;
				left: 2%;
				width: 96%;
				height: 5.6em;
				opacity: 0.86;
				border-bottom: 0.1em dotted hsl(0, 0%, 70%);
			}

			.header_menue {
				position: fixed;
				top: 1.4em;
				left: 2%;
				display: flex;
				-webkit-flex-direction: row;
			  flex-direction:row;
				flex-wrap: nowrap;
			}

			.artist{
				padding-bottom: 0;
			}

			.pages {
				padding-top: 0;
				border: none;
				display:inline;
			}

			.trennstrich {visibility: visible;}

			#de_en {
				position: fixed;
				top: 2.3em;
				left: 2%;
				width: 96%;
				font-size: 1.05em;
			}

			/* Content */

			#index, #contact {
				margin-top: 10rem;
			}

			#cv {
				margin-top: 8rem;
			}

			h1 {
			    font-size: 1.8em;
			}

			#works, #exhibitions {
				margin-top: 4.5rem; }

			.works_all__masonry{
				grid-template-columns: repeat(4, 1fr);
			}


			/* EXHIBITIONS - LIST */

			.exhibitions_list {
	        flex-direction: row;
					margin-bottom: 2em;
					gap: 2em;
	    }
	    .exhibitions_list_image {
	        width: 50%;
	        min-width: 22rem;
					max-width: 35rem;
	    }
	    .exhibitions_list_details {
	        max-width: 50%;
	        padding-top: 2em;
	    }


			/* SLIDER  */

			#arrow_left,
			#arrow_right
				{
					top: 47%;
					width: 2.5%;
					height: 8%;
				}

		}


		@media (min-width: 50em) {

			.works_all__masonry_2{ grid-template-columns: repeat(5, 1fr);}

		}


		/* WORKS wird zweispaltig */
		@media (min-width: 55em) {

			/* Header */

			#top_bar {
				left: 1.5%;
				width: 97%;}

			.header_menue {
				left: 1.5%;
				font-size: 1.5em;
				padding-bottom: 1em;
			}

			/* WORKS --> zweispaltig */

			.selected_work {
					display: grid;
					grid-template-columns: min(71%) 1fr;
					grid-template-areas: "images text";
					margin-top: 5.1rem;
					column-gap: 1.2rem;
					min-height: min(100vh, 40rem);
			}

			.selected_work__portrait {
					display: grid;
					grid-template-columns: min(68%, 54rem) 1fr;
					grid-template-areas: "images text";
					margin-top: 5.1rem;
					column-gap: 1.2rem;
					min-height: min(100vh, 40rem);
			}

			.work_text {
					position: sticky;
					top: 5.5rem;
					align-self: start;
					height: fit-content;
			}

			.work_title {
					margin-top: 0em;
					font-size: 1.32em;
			}

			.work_details {
				margin-top: 0.5em;
				font-size: 1.1em;
				line-height: 1.2em;
			}

			.description {
				font-size: 1.25em;
				line-height: 1.28em;
				text-align: left;
			}

			.in_collaboration{
				font-size: 1.3em;
				margin-top: 1.6em;
				padding: 0.4em 0.7em 0.3em 0.7em;
			}

			.first_image__mobile,
			.additional_images__mobile {
					display: none;
			}

			.all_images__desktop,
			.all_images__desktop__portrait_all {
					position: relative;
					display: flex;
					flex-direction: column;
					grid-area: images;
					justify-self: end;
					align-items: flex-end;
					width: 100%;
			}

			.credits_details__first_image_mobile {
				margin-bottom: 0em;
			}

			.image_and_caption,
			.video,
			.image_and_caption_first_img_column {
					display: flex;
					flex-direction: column;
					margin-top: 1em;
					width: 100%; /* Bilder nehmen volle Breite des Containers ein */
				  height: auto; /* Höhenverhältnis beibehalten */
			}

			.image_and_caption_first_img_column {
					margin-top: 0em;
			}

		}



		@media (min-width: 60em) {

			.selected_work, .selected_work__portrait { column-gap: 1.5rem;}

			.works_all__masonry { grid-template-columns: repeat(5, 1fr);}
			.works_all__masonry_2 { grid-template-columns: repeat(6, 1fr);}

		}


		@media (min-width: 65em) {

			.description {
				text-align: justify;
				hyphens: auto;
			}

			#arrow_left,	#arrow_right {	display: none;}

		}


		@media (min-width: 72em) {

			.description {
				font-size: 1.3em;
				line-height: 1.3em;
			}

		}



		@media (min-width: 75em) {

			.works_all__masonry { grid-template-columns: repeat(6, 1fr);}
			.works_all__masonry_2 { grid-template-columns: repeat(7, 1fr); }

		}


		/* max Bildbreite Hochformat */

		@media (min-width: 84em) {

			.selected_work__portrait { column-gap: 2.1rem; }

		}


		@media (min-width: 90em) {

			#top_bar { 	height: 5.6em; }

			.header_menue {
				left: 1.5%;
				top: 1.4em;
				font-size: 1.5em;
				padding-bottom: 1em;
			}

			.selected_work {
					grid-template-columns: min(74%) 1fr;
					column-gap: 1.9rem;
			}

			.works_all__masonry { grid-template-columns: repeat(6, 1fr); }

		}


	 /* ---- gap in masonry -----*/
		@media (min-width: 95em) {

			.item { padding: 0.5em;	}

		}


		/* max Bildbreite */
		@media (min-width: 98em) {

			.selected_work {
					grid-template-columns: min(74%) 1fr;
					column-gap: 2.2rem;
			}

		}