body {
	margin: 0;
	font-family: sans-serif;
	width: 100%
}
a {
	color: #000000
}
ul.navigation {
	list-style-type: none;
	margin: 0;
	padding: 0;
	overflow: hidden;
	background-color: #ffffff
}
ul.navigation li {
	float: left
}
ul.navigation li a {
	display: block;
	color: #000000;
	text-align: center;
	padding: 0.9em 1em;
	text-decoration: none;
	border-radius: 0.5em
}
ul.navigation li a:hover:not(.active) {
	background-color: #d5edf6
}
ul.navigation li a.active {
	background-color: #a6d9ec
}
ul.navigation li.right {
	float: right
}
nav {
	display: absolute;
  	width: 100%; /* Anpassen der Breite auf 100% */
}
.content, .nav {
	margin: 2%
}
.part1 {
	height: 50vh;
	margin: 10% 0 10% 0
}
.infoboxes {
	display: flex;
	flex-wrap: wrap
}
.rectangle {
	width: 25vw;
	height: 25vw;
	border-radius: 1em;
	flex: 1;
	margin-left: 2.5%;
	margin-right: 2.5%;
	margin-top: 5%;
	min-width: 300px;
	box-sizing: border-box;
	padding: 1%;
	background-repeat: repeat;
	/* Wiederholung der Textur in beide Richtungen */
	background-size: cover;
	position: relative
}
.r1 {
	background-image: url('img/backgrounds/tech_seamless_light.webp');
	/* Pfad zur nahtlosen Textur-Datei */
}
.r2 {
	background-image: url('img/backgrounds/connections_seamless_light.webp');
	/* Pfad zur nahtlosen Textur-Datei */
}
.r3 {
	background-image: url('img/backgrounds/bodies_seamless_light.webp');
	/* Pfad zur nahtlosen Textur-Datei */
}
/* CSS-Styling für die Toggle-Überschrift */

.toggle-heading {
	cursor: pointer;
	position: relative;
	/* Positionierung für das Dreieckssymbol */
	padding-left: 20px;
	/* Platz für das Dreieckssymbol */
	margin: 2% 0 0 3%;
	/* Entfernen des unteren Abstands */
}
/* Dreieckssymbol */

.toggle-heading::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	margin-top: -4px;
	/* Positionierung des Dreiecks in der Mitte der Überschrift */
	border: solid black;
	border-width: 0 2px 2px 0;
	padding: 3px;
	transform: rotate(45deg);
	/* Drehung des Dreiecks */
	transition: transform 0.2s ease-in-out;
	/* Übergangseffekt für das Dreieck */
}
/* Dreieckssymbol umdrehen, wenn die Liste geschlossen ist */

.toggle-heading.closed::before {
	transform: rotate(-45deg)
}
/* CSS-Styling für den ausgeblendeten Text */

.toggle-content {
	display: none;
	margin: 1% 0 0 3%
}
.end-text {
	margin: 5% 0 0 3%
}
.footer {
	background: linear-gradient(to bottom, white, #a6d9ec);
	/* Farbverlauf von oben nach unten */
	padding: 0;
}
.footer-ul {
	list-style-type: none;
	height: 5vw;
	margin: 0 1% 0 0;
  display: flex; /* Verwenden von Flexbox */
  align-items: flex-end;
	justify-content: flex-end;
}
.footer-ul li {
	float: right;
	margin: 0 0 0 1%
}
.objects {
    position: absolute;
    left: 95%;
    transform: translateX(-100%);
}
/*//////////////////*/
/* Portfolio Gallery*/
/*//////////////////*/
.gallery {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
}

.gallery-item {
	margin: 2%;
}

.x3dportfolio {
	width: 20vw;
	height: 20vw;
}
/*//////////////////*/
/*Screen Resolutions*/
/*//////////////////*/
@media screen and (max-width: 600px) {
	ul.navigation li.right, ul.navigation li {
		float: none
	}
	div.d3models, div.d3druck, div.programmierung {
		width: inherit;
		margin-left: 3%;
		margin-right: 3%
	}
	.objects {
		margin-top: 5%;
		top: 50%;
		left: 50%;
		transform: translateX(-50%);
		width: 50vw;
	}
	.rectangle {
		width: 100%;
		height: 100%;
	}
    .gallery {
        flex-direction: column;
        align-items: center;
    }

    .gallery-item {
        margin: 2% 0;
		width: 30vw;
    }

	.x3dportfolio {
		width: 60vw;
		height: 60vw;
		align-items: center;
	}
}
@media (max-width: 900px) {
	/* Media Query für Bildschirmbreiten kleiner als 600px */
	.rectangle {
		flex-basis: 100%;
		/* Ändern der flex-basis auf 100%, um Elemente auf volle Breite zu strecken */
		min-width: auto;
		/* Zurücksetzen der Mindestbreite */
	}
}