@charset "UTF-8";
/* EVA YELLOW BLACK */

html {
	scroll-behavior: smooth;
}

head {
	/*background-color: #ECFAB1;*/ 
	/*background-color: #FBFAF7;*/
	background-color: #FFFFEF;
	/* background-color: #f2b90d;*/
}

body {
	/*background-color: #ECFAB1;*/ 
	background-color: #FFFFEF;
	/* background-color: #f2b90d;*/
	margin-left: 6rem;
	margin-right: 6rem;
}

h1  {
	position: relative;
	font-family: "Roboto Mono", monospace;
	font-optical-sizing: auto;
	font-weight: 600;
	font-style: normal;
	font-size: 5.2rem;
	margin-top: 3.1rem;
	margin-bottom: 3.1rem;
}

/* Auf kleinen Bildschirmen (bis 768px) volle Breite für h1 und schmalere Seitenränder */
@media screen and (max-width: 768px) {
	body {
		margin-left: 1.2rem;
		margin-right: 1.2rem;
	}
	h1 {
		margin-left: 0;
		margin-right: 0;
		font-size: 4rem;
	}
}

h3  {
	font-family: "Roboto Mono", monospace;
	font-optical-sizing: auto;
	font-weight: 600;
	font-style: normal;
	font-size: 1.7rem;
}

/* Specific spacing for subtitle */
h3.subtitle {
	margin-bottom: 1.5rem;
	margin-top: 3rem;
}

h4 {
	font-family: "Roboto", sans-serif;
	font-optical-sizing: auto;
	font-weight: 360;
	font-style: normal;
	font-size: 1rem;
	margin-bottom: 3.1rem;
}

a {
	font-family: "Roboto", sans-serif;
	font-optical-sizing: auto;
	font-weight: 400;
	font-style: normal;
	font-variation-settings: "wdth" 100;
	color: black;
	margin-right: 0.3rem;
	text-decoration: none;
}

a:hover {
	color: black;
}

li {
	font-family: "Roboto", sans-serif;
	font-optical-sizing: auto;
	font-weight: 360;
	font-style: normal;
	font-variation-settings: "wdth" 100;
	color: black;
	list-style: none;
}

p {
	font-family: "Roboto", sans-serif;
	font-optical-sizing: auto;
	font-weight: 360;
	font-style: normal;
	font-variation-settings: "wdth" 100;
	text-align: justify;
}

.page-width {
	width: 95%;
	max-width: 900px;
	margin-inline: auto;
}

.mosaic {
	display: grid;
	gap: 1rem;
}

.mosaic-block {
	position: relative;
}

.mosaic-block img {
	position: absolute;
	width: 100%;
	height: 3rem;
	object-fit: cover;
}

/* Navigation styling */
.navigation {
	margin-bottom: 1.5rem;
	margin-top: 2rem;
}

.navigation a {
	position: relative;
	color: black;
	text-decoration: none;
	margin-right: 1.5em;
	padding-left: 0;
	padding-right: 0;
}

.navigation a::after {
	content: "|";
	margin-left: 0.5em;
	color: #999;
}

.navigation a:last-child::after {
	content: "";
}

/* Scientific Committee specific styling */
.scientific-committee-list {
	line-height: 1.5;
}

.mosaic-layout-2 {
	grid-template-columns: 1fr 1fr;
}

.mosaic-layout-2 ul {
	padding-left: 0;
	margin-left: 0;
}

.mosaic-layout-2 ul li {
	list-style-type: disc;
	list-style-position: outside;
	text-align: left;
	margin-left: 1.2em;
	padding-left: 0.5em;
}

.mosaic-layout-2 ul li::marker {
	font-size: 0.8em;
}

.mosaic-layout-3 {
	grid-template-columns: 1fr 1fr;
}

.mosaic-layout-4 {
	grid-template-columns: 1fr 1fr;
}

.mosaic-layout-4 ul {
	padding-left: 0;
	margin-left: 0;
}

.mosaic-layout-4 ul li {
	list-style-type: disc;
	list-style-position: outside;
	text-align: left;
	margin-left: 1.2em;
	padding-left: 0.5em;
}

.mosaic-layout-4 ul li::marker {
	font-size: 0.8em;
}

.mosaic-layout-5 {
	grid-template-columns: 1fr 1fr;
}

.mosaic-layout-6 {
	grid-template-columns: 1fr 1fr 1fr;
	align-items: center;
}

.mosaic-layout-6 img {
	display: block;
	margin: auto;
	max-width: 80%;
}

/* Grundsätzlich: einspaltig (Mobile First) */
.mosaic-layout-2,
.mosaic-layout-3,
.mosaic-layout-4,
.mosaic-layout-5,
.mosaic-layout-6 {
	grid-template-columns: 1fr;
}

/* Logos auf kleinen Bildschirmen schmaler machen */
@media screen and (max-width: 767px) {
	.mosaic-layout-6 img {
		max-width: 50%;
	}
}

/* Ab 768px: zwei Spalten für die meisten Layouts, drei für Logos */
@media screen and (min-width: 768px) {
	.mosaic-layout-2,
	.mosaic-layout-3,
	.mosaic-layout-4,
	.mosaic-layout-5 {
		grid-template-columns: 1fr 1fr;
	}
	
	.mosaic-layout-6 {
		grid-template-columns: 1fr 1fr 1fr;
	}
}

/* Tabellen-Styles beibehalten */
table {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 2rem;
	table-layout: auto;
}

th, td {
	padding: 0.5rem;
	border: 1px solid #ccc;
	text-align: left;
	vertical-align: top;
}

/* Logo-spezifische Anpassung für kleine Bildschirme */
@media screen and (max-width: 768px) {
	.mosaic-layout-6 img {
		max-width: 50%; /* Logos nehmen nur halbe Breite ein */
	}
}

/* Responsive horizontal scroll für kleine Bildschirme */
@media screen and (max-width: 768px) {
	.table-responsive {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		width: 100%;
	}
}