* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/*
h2 {
	font-family: Arial;
	font-size:clamp(4px, 2vw, 27px);
}
*/

body {
    font-family: Arial, sans-serif;

    /*Webseite Hintergrundfarbe*/
	background-image:url(images/background.webp); background-repeat:repeat; background-size:auto; margin:0px; padding:0px;
	background-size: 1850px; /* Feste Größe*/
    color: black;
}

header {
    position: fixed;
    top: 0;
    width: 100%;
    background-color: #5c6f73; /* Dunkelgrün */
    border-bottom: 2px solid #d7d7d9; /* Weißer Rahmen nur unten */
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px 0;
    z-index: 10;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1); /* Schlagschatten für den Content-Bereich */
	min-width: 350px;
}

.header-content {
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 0 20px;
	flex-wrap: wrap;
}

header a img {
	width: 50%;
	height: auto;
}

/* Neue weiße Linie oberhalb der Hyperlinks */
.header-line {
    width: 100%;
    height: 1px;
    background-color: #d7d7d9;
    margin-top: 10px;
}

.header-right .description {
    font-size: clamp(14px, 2vw, 24px);
	font-family:Arial;
    color: #d7d7d9;
	font-weight:bold;
    text-align: right; /* Tätigkeitsbereich nach rechts */
	margin-top:84px;
}

nav ul {
    list-style: none;
    display: flex;
    justify-content: center;
		flex-wrap: wrap;
    gap: 10px;
    margin-top: 0px;
	margin-bottom: -10px;
}

nav ul .language {
    margin-left: 45px; /* Abstand zwischen Sprachlinks und anderen Links */
	min-width: unset; /* Entfernt die Breitenangaben für Sprachlinks */
    max-width: unset;
}

.language a {
    margin-right: -55px; /* Engerer Abstand zwischen DE und EN */
	min-width: unset; /* Entfernt die Breitenangaben für Sprachlinks */
    max-width: unset;
}

nav ul li a {
    color: #d7d7d9;
    text-decoration: none;
    padding: 15px;
    font-size: clamp(10px, 2vw, 16px);
    font-weight: bold;
	font-family:Arial;
	display: inline-block; /* Erlaubt Breitenangaben */
    min-width: 10.55vw; /* Mindestbreite */
    max-width: 180px; /* Maximalbreite */
    text-align: center;
}

nav ul li a:hover,
nav ul li a.active {
    background-color: #8aa3a6; /* Hellgrün */
}

/*Überschriften*/
.Ueberschrift{font-family:Arial; color:#d7d7d9; font-size:clamp(18px, 2vw, 28px);}

body video {
	width:63%;
	height:auto;
	background-color: transparent; /* Unsichtbares Overlay */
}

.content {
	margin-top: 240px; /* Platz für Header */
    padding-left: 1.18%; /* Linke Begrenzung ;für den Contentbereich */
    margin-bottom: 50px; /* Abstand zum Footer */
}

#content-sections {
    background-color: #8aa3a6; /* Helleres Grün */
    padding: 20px;
    margin-right: 0;
    margin-left: 14.96%;
	position: right;
    border-top: 2px solid #d7d7d9;
    border-left: 2px solid #d7d7d9;
    border-bottom: 2px solid #d7d7d9;
	font-family:Arial;
	color:#d7d7d9;
	font-size: clamp(12px, 2vw, 18px);
	min-width: 440px;
}

#content-sections h2 {
    scroll-margin-top: 200px; /* Abstand entsprechend der Headerhöhe */
    margin-top: 20px; /* Zusätzlicher Abstand oberhalb der Überschrift */
}

#content-sections-works {
    background-color: #8aa3a6; /* Helleres Grün */
    padding-top: 20px;
	padding-left: 20px;
	padding-bottom: -35px;
	padding-right: 20px;
    margin-right: 0;
    margin-left: 15.96%;
	position: right;
    border-top: 2px solid #d7d7d9;
    border-left: 2px solid #d7d7d9;
    border-bottom: 2px solid #d7d7d9;
	font-family:Arial;
	color:#d7d7d9;
	font-size:clamp(12px, 2vw, 18px);
	min-width: 350px;
}

#content-sections-datenschutz {
    background-color: #8aa3a6; /* Helleres Grün */
    padding-top: 20px;
	padding-left: 20px;
	padding-bottom: 5px;
	padding-right: 20px;
    margin-right: 0;
    margin-left: 15.96%;
	position: right;
    border-top: 2px solid #d7d7d9;
    border-left: 2px solid #d7d7d9;
    border-bottom: 2px solid #d7d7d9;
	font-family:Arial;
	color:#d7d7d9;
	font-size:clamp(12px, 1.5vw, 18px);
	min-width: 350px;
}

#content-sections hr {
    border: none;
    border-top: 1px solid white;
    margin: 20px 0;
    width: calc(100% + 2*20px); /* Die Linie reicht bis zum rechten Rand */
    margin-left: -20px; /* Korrektur für den linken Rand */
}

#content-sections h2, #content-sections p, #content-sections .work-gallery {
    transition: opacity 0.3s ease-in-out; /* Animation fürs Ausblenden */
}

.work-gallery {
    display: grid;
	grid-template-columns: repeat(auto-fill, minmax(18%, 1fr));
    justify-content: start;
    flex-wrap: wrap;
	gap: 10px; /* Abstand zwischen den Arbeiten */
}

.work-item {
    width: 100%; /* Mindestens 5 Bilder nebeneinander */
    margin-bottom: -4px;
    text-align: center;
}

.work-item img {
    width: 100%;
	height: auto; /* Bewahrt die Proportionen */
    transition: opacity 0.3s ease;
}

.work-item img:hover {
    opacity: 0.575;
}

.bildausrichtung{
	vertical-align: top;
	width:auto;
}

table tr td img {
	width:11.8vw;
	height:auto;
	margin-right:16.5px;
}

/* Footer-Bereich */
footer {
    background-color: #8aa3a6;
    padding: 10px 20px;
    margin-top: 60px;
    width: 100%;
    border-top: 2px solid #d7d7d9;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
	height: 45px;
    align-items: center;
}

.footer-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

/*.social-media a {
    color: white;
    text-decoration: none;
    font-size: 20px;
    margin: 0 10px;
}*/

.privacy-policy {
    text-decoration: none;
    color:#d7d7d9;
    font-size: clamp(6px, 2vw, 12px);
	font-family:Arial;
	text-decoration: underline;
}

.privacy-policy:hover {
    text-decoration: underline;
	color:#000000;
}

footer p {
    font-size: clamp(6px, 2vw, 12px);
	color:#d7d7d9;
	font-family:Arial;
}

/* Dynamische Positionierung und Anpassung des "Zurück zu den Arbeiten"-Links */
.back-link {
    font-size: clamp(6px, 2vw, 12px); /* Gleiche Schriftgröße wie Datenschutzerklärung */
    color: #d7d7d9; /* Gleiche Farbe wie Datenschutzerklärung */
    text-decoration: none;
	align-self: flex-start;
	justify-content: space-between;
    position: absolute;
    bottom: 0%;
    left: 64.5%; /* Dynamische Positionierung, um sich an die Breite anzupassen */
    max-width: 100%; /* Sorgt dafür, dass der Link bei kleinen Bildschirmen nicht abgeschnitten wird */
	margin-bottom: 60px;
	font-family:Arial;
	text-decoration: underline;
}

.back-link:hover {
    text-decoration: underline;
	color:#000000;
}

.next-link {
    font-size: clamp(6px, 2vw, 12px); /* Gleiche Schriftgröße wie Datenschutzerklärung */
    color: #d7d7d9; /* Gleiche Farbe wie Datenschutzerklärung */
    text-decoration: none;
	align-self: flex-start;
	justify-content: space-between;
    position: absolute;
    bottom: 0%;
    left: 95.5%; /* Dynamische Positionierung, um sich an die Breite anzupassen */
    max-width: 100%; /* Sorgt dafür, dass der Link bei kleinen Bildschirmen nicht abgeschnitten wird */
	margin-bottom: 60px;
	font-family:Arial;
	text-decoration: underline;
}

.next-link:hover {
    text-decoration: underline;
	color:#000000;
}

.previous-link {
    font-size: clamp(6px, 2vw, 12px); /* Gleiche Schriftgröße wie Datenschutzerklärung */
    color: #d7d7d9; /* Gleiche Farbe wie Datenschutzerklärung */
    text-decoration: none;
	align-self: flex-start;
	justify-content: space-between;
    position: absolute;
    bottom: 0%;
    left: 90.5%; /* Dynamische Positionierung, um sich an die Breite anzupassen */
    max-width: 100%; /* Sorgt dafür, dass der Link bei kleinen Bildschirmen nicht abgeschnitten wird */
	margin-bottom: 60px;
	font-family:Arial;
	text-decoration: underline;
}

.previous-link:hover {
    text-decoration: underline;
	color:#000000;
}

/* Dynamische Positionierung und Anpassung der Projektbeschreibung */
.project-description {
    align-self: flex-start;
	justify-content: space-between;
    color: #d7d7d9;
    position: relative;
    top: -2px; /* Projektbeschreibung rechts oben neben dem Video */
    	margin-left: 20px;

    	min-width: 15.5%;
	max-width: 35.5%; /* Maximal 25% der Bildschirmbreite für Flexibilität */
	height:auto;
	font-family:Arial;
	font-size:clamp(12px, 1.5vw, 18px);
}

.project-description_listing{
	list-style-type:"- ";
	margin-left: 11px;
}

.project-description_no_listing{
	list-style-type:none;
}


.Aufgaben_Tablle{border:none; margin:-2px;}

/* Sicherstellen, dass das Video und die Beschreibung im gleichen Layout bleiben */
.work-details {
    display: flex;
    align-items: flex-start;
    position: relative;
    padding-bottom: 60px; /* Platz für den Zurück-Link unter dem Video */
}

.Impressumlinks{font-family:Arial; font-size:clamp(12px, 1.5vw, 18px); color:#d7d7d9;}
.Impressumlinks:hover{color:#000000;}

/* Responsive Anpassungen */
@media (max-width: 1200px) {
    .header-content {
        flex-direction: column;
        align-items: center;
    }

	header a img {
		margin-bottom:-79px;
		margin-left:24%;
	}

	nav ul li a {
		padding:10px;
    	}

    .content {
        margin-left: 2%;
    }

    #content-sections {
        margin-left: 2%;
    }

	#content-sections-datenschutz {
        margin-left: 5.15%;
    }

	#content-sections-works {
        margin-left: 5.15%;
    }

    .work-gallery {
        grid-template-columns: repeat(auto-fill, minmax(25%, 1fr));
    }
	nav ul .language {
    margin-left: unset; /* Abstand zwischen Sprachlinks und anderen Links */
	min-width: unset; /* Entfernt die Breitenangaben für Sprachlinks */
    max-width: unset;
}

.language a {
    margin-right: unset; /* Engerer Abstand zwischen DE und EN */
	min-width: unset; /* Entfernt die Breitenangaben für Sprachlinks */
    max-width: unset;
}

footer {
		height: 35px;
		position:fixed;
		bottom:0px;
	}

.previous-link {
    	bottom: -10%;
	left: 88%; /* Dynamische Positionierung, um sich an die Breite anzupassen */
}

.next-link {
    	bottom: -10%;
	left: 96%; /* Dynamische Positionierung, um sich an die Breite anzupassen */
}

.back-link {
	left: 63.5%;
    	bottom: -10%;
}

}

@media (max-width: 768px) {
    header, footer {
        flex-direction: column;
        text-align: center;
    }

    .header-right .description {
        text-align: center;
        margin-top: 20px;
    }

	header a img {
		margin-left:0px;
		margin-bottom:-19px;
	}

	nav ul li a {
		padding:10px;
    	}


    nav ul {
        display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
        gap: 0px;
    }

    .work-gallery {
        grid-template-columns: repeat(auto-fill, minmax(45%, 1fr));
    }

    .content {
        margin-left: 1%;
    }

    #content-sections {
        margin-left: 1%;
    }
	#content-sections-datenschutz {
        margin-left: 3.2%;
    }
	#content-sections-works {
        margin-left: 3.2%;
    }
	table tr td img {
		width:11.8vw;
		height:auto;
		margin-right:10.5px;
	}
	footer {
		height: 35px;
		position:fixed;
		bottom:0px;
	}
}

@media (max-width: 480px) {
    .header-right .description {
        font-size: 1rem;
    }

    nav ul li a {
		padding:5px;
    	}

    .work-gallery {
        grid-template-columns: repeat(auto-fill, minmax(45%, 1fr));
    }

    .content, #content-sections {
        margin-left: 0;
        width: 100%;
        padding: 10px;

    }
	#content-sections-datenschutz {
        margin-left: 0;
        width: 100%;
        padding: 10px;
    }
	#content-sections-works {
        margin-left: 0;
        width: 100%;
        padding: 10px;
    }

#content-sections hr {
    border: none;
    border-top: 1px solid white;
    margin: 20px 0;
    width: calc(100% + 2*10px); /* Die Linie reicht bis zum rechten Rand */
    margin-left: -10px; /* Korrektur für den linken Rand */
}
	
}

@media (max-width: 400px) {
 .content, #content-sections {
        margin-left: -1.1%;
        width: 100%;
        padding: 10px;
	min-width:382px;
    }
}