/* General Styles */

body {
	position: relative;
	width: 100%;
	margin: 0;
	padding: 0;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 100%;
	line-height: 1.6;
	/* background: url(../image/basic/body.gif) #ffffff; */
	background-repeat: no-repeat;
	background-position: 0px 0px;
}

a {
	color: #333;
	text-decoration: none;
	transition: color 0.3s ease;
}

a:hover {
	color: #ca0606;
}

a:active {
	color: #376b97;
}

td {
	color: #333;
	font-family: Verdana, Arial, Helvetica, sans-serif;
}

.text {
	color: #333;
	font-size: 0.9em;
	font-weight: normal;
	/* max-width: 50vw; */
}

.small {
	color: #333;
	font-size: 0.75em;
}

.headline {
	color: #333;
	font-size: 1em;
	font-weight: bold;
	line-height: 1.2;
}

.menue,
.menueakt, .language-menu {
	color: #333;
	font-size: 0.9em;
	display: inline;
	/* Default to inline for larger screens */
}

.menueakt {
	color: #376b97;
	font-weight: bold;
}

/* Responsive Styles */

@media only screen and (max-width: 1024px) {
	body {
		font-size: 90%;
	}

	.headline {
		font-size: 1.1em;
	}

	.text,
	.small,
	.menue,
	.menueakt, .language-menu {
		font-size: 0.85em;
	}

	img {
		max-width: 100%;
		height: auto;
	}

	table {
		width: 100%;
		border-collapse: collapse;
	}
}

@media only screen and (max-width: 768px) {
	body {
		font-size: 85%;
	}

	.headline {
		font-size: 1em;
	}

	.text,
	.small,
	.menue,
	.menueakt,
	.language-menu {
		font-size: 0.9em;
	}

	td {
		display: block;
		width: 100%;
		text-align: center;
		padding: 8px 0;
	}

	img {
		max-width: 100%;
		height: auto;
	}
}

@media only screen and (max-width: 480px) {
	body {
		font-size: 80%;
	}

	.headline {
		font-size: 0.9em;
	}

	.text,
	.small,
	.menue,
	.menueakt,
	.language-menu {
		font-size: 0.9em;
	}

	.logo,
	#flashcontent video {
		width: 100%;
		height: auto;
	}

	td,
	img {
		margin: 0 auto;
		padding: 5px 0;
	}
}



/* Additional Styles for Header */
header {
	position: relative;
	padding-top: 20px;
}

.language-menu {
	position: absolute;
	top: 10px;
	right: 20px;
}

nav.main-menu {
	padding: 10px;
	background-color: #e8e8e8;
}

.footer-content {
	background-color: #e8e8e8;
}

/* Additional Styles for Image Alignment */
.content-home {
	display: flex;
	flex-direction: row;
	/* Arrange items in a row */
	align-items: flex-start;
	/* Align items at the start */
	padding: 20px;
}

.content-home img {
	width: 20%;
	height: auto;
	/* Keep image aspect ratio */
	margin: 20px;
}

.content-home .text-container {
	width: 75%;
}

/* Additional responsive styles */
@media only screen and (max-width: 768px) {
	.content-home {
		flex-direction: column;
		/* Stack items on smaller screens */
	}

	.content-home .text-container {
		width: 100%;
	}

	.content-home img {
		width: 80%;
	}
}

.content {
	margin: 20px;
}

.vita-table td {
	text-align: left;
}

/* Desktop layout with image on the right */
@media (min-width: 768px) {
    .vita-container {
        display: flex;
        align-items: flex-start;
        gap: 20px;
    }

    .vita-table {
        width: 70%;
        border-collapse: collapse;
    }

    .vita-table td {
        padding: 8px;
        vertical-align: top;
    }

    .image-container {
        flex-shrink: 0;
        width: 30%;
        max-width: 300px;
    }

    .image-container img {
        width: 100%;
        height: auto;
        border-radius: 8px;
    }
}

/* Mobile layout with image below table */
@media (max-width: 767px) {
	header {
		padding-top: 40px;
	}
    .vita-container {
        display: block;
    }

    .image-container {
        margin-top: 20px;
        width: 100%;
    }

    .image-container img {
        width: 100%;
        height: auto;
    }
}

.projects-table table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}

.projects-table td {
    padding: 10px;
    vertical-align: top;
}

.project-title {
    font-weight: bold;
	text-align: left;
}

.project-description {
    color: #555;
	text-align: left;
}

.project-links {
	text-align: left;
}

.project-links a {
    color: #0073e6;
    text-decoration: none;
	text-align: left;
}

.project-links a:hover {
    text-decoration: underline;
}

.spacer {
    width: 20px;
}

@media (max-width: 768px) {
    .projects-table table, 
    .projects-table tr {
        display: block;
        width: 100%;
		padding-bottom:40px;
    }

    .projects-table td {
        display: block;
        width: 100%;
        padding: 5px 0;
    }

    .spacer {
        display: none;
    }
}

.three-column-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 20px;
    margin-top: 20px;
}

/* .column {
    padding: 10px;
} */

@media (max-width: 768px) {
    .three-column-wrapper {
        grid-template-columns: 1fr;
    }
}