@CHARSET "UTF-8";

/* Hinweis: Styles für Bildschirmauflösungen mit einer Breite ab 1.600 Pixeln befinden sich am Ende der Datei und überschreiben ggf. die Standardwerte */

body { 
	font-family: 'Roboto', Verdana, sans-serif;
    font-size: 14px;
	color: #000000;
}

header, .header {
	display: flex; 
	align-items: center; 
	justify-content: space-between; 
	height: 50px;
	opacity: 0.8;
	line-height: 1;
	transition: height 0.4s ease-in-out;
}

.header-left {
	position: absolute;
	left: 16px;
}

.header-right {
	position: absolute;
	right: 16px;
	display: flex;
    gap: 8px; /* Optional: Space between links */
    align-items: end; 
}

.header-right a {
    display: inline-flex; /* Ensures links behave as inline-flex containers */
    padding: 8px;
}

.header-padding {
	padding-top: 55px !important; /* header height +5px */
}

.close-padding {
	padding: 8px;
}

.logo {
	width: 350px;
	height: auto;
	transition: width 0.4s ease-in-out;
}

.logo-small {
	display: none;
	border-radius: 3px;
}

p, div {
	text-align: justify;	
}

a			{ text-decoration: none; border: none;}
a:link		{ color: #000000; } 
a:visited	{ color: #000000; }
a:hover		{ color: #000000; }
a:active	{ color: #000000; } 

.disabled	{ color: #000000; }
.active		{ color: #000000; }

.news-title {
	font-weight: bold;
}

.project {
	padding: 0px 0px 0px 10px;
	text-align: left;
}

.thumb-overlay-dummy {
    background-color: #e1e1e1;
}

.overlay {
	position: absolute; /* Positioniert das Overlay relativ zum Container */
	top: 0;
	left: 0;
	width: 100%; /* Gleiche Breite wie das Bild */
	height: 100%; /* Gleiche Höhe wie das Bild */
	background-color: rgba(0, 0, 0, 0.50);
	justify-content: center; /* Horizontal zentrieren */
	align-items: center; /* Vertikal zentrieren */
	overflow: hidden;	
}

.associates-overlay .container, .team-overlay .container {
    position: absolute;
    top: 0;
    left: 0;
}

.gallery {
	padding: 0 0 0 10px;
	text-align: left;
}

.project-header {
	font-size: 90%;
}

.title {
	text-transform: uppercase;
	font-weight: bold;
}

.home-title {
	color: #ffffff !important;
	font-size: 28px;
	font-weight: 300;
	text-transform: uppercase;
	text-align: left;
	max-width: 75%;
}

.impressum-box {
	font-weight: bold;
	border: 1px solid #999999;
	padding: 8px;
	background-color: #efefef;
}

.overlay .title {
	color: #ffffff !important;
	font-weight: normal;
}

.section-title {
  	padding: 8px 32px; /* w3-padding */
  	font-weight: bold;
	font-size: large;
	text-align: left;
}

.strong {
	font-weight: bold;
}

.red {
	color: #a30000;	
}

.nowrap {
	white-space: nowrap;
}

.left {
	text-align: left;	
}

.right {
	text-align: right;
}

.center {
	text-align: center;
}

.justify {
	text-align: justify;	
}

.no_padding {
	padding: 0;
}

.left_no_padding {
	text-align: left;
	padding-left: 0;
}

.left_small_padding {
	text-align: left;
	padding-left: 5px;
}

.left_medium_padding {
	text-align: left;
	padding-left: 10px;
}

.left_large_padding {
	text-align: left;
	padding-left: 15px;
}

.right_no_padding {
	text-align: right;
	padding-right: 0;
}

.right_small_padding {
	text-align: right;
	padding-right: 5px;
}

.right_medium_padding {
	text-align: right;
	padding-right: 10px;
}

.right_large_padding {
	text-align: right;
	padding-right: 15px;
}

.projecttitle {
	font-weight: bold;
}

.legend {
	font-size: 90%;	
}

ul.project_list {
	padding-left: 25px;
	
}

img {
	border: 0;
}

img.full {
	width: 100%;
	margin: 0;
	display: block;
}

.home {
	font-size: 150%;
}

.gap-margin {
	margin-top : 1px;
}

.image-grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr); /* 5 images side-by-side */
	gap: 1px; /* Spacing between images */
	width: 100%;
}

.image-grid.col-1 {
	grid-template-columns: repeat(1, 1fr); /* 1 images side-by-side */
}

.image-grid.news {
	grid-template-columns: repeat(3, 1fr); /* 3 images side-by-side */
}

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

/**********************************************
 * Image switches between light and dark mode *
 **********************************************/
/* Default (Light Mode) */

.svg-logo {
	fill: #1D1D1B;
}

.img-instagram {
	content: url('/test/pixx/Instagram_Glyph_Black.png');
}

.img-burger {
	content: url('/test/pixx/ic_fluent_navigation_24_filled.png');
}

.img-close {
	content: url('/test/pixx/ic_fluent_pane_close_24_regular.png');
}

/* Dark Mode */
@media (prefers-color-scheme: dark) {

	body {
		color: #ffffff;
		background-color: #000000;
	}
	
	.svg-logo {
		fill: #ffffff;
	}

    .img-instagram {
		content: url('/test/pixx/Instagram_Glyph_White.png');
	}
	
	.img-burger {
		content: url('/test/pixx/ic_fluent_navigation_24_filled_dark.png');
	}

	.img-close {
		content: url('/test/pixx/ic_fluent_pane_close_24_regular_dark.png');
	}
	
	.w3-white, .w3-hover-white:hover {
	    color: #fff !important;
	    background-color: #000000 !important;
	}
	
	.w3-button:hover {
	    background-color: #666 !important;
	}
	
	.menu {
		background-color: rgba(0, 0, 0, 0.8) !important;
	}
	
	.menu a:hover {
		color: #fff !important;
	}
	
	.menu ul li:hover {
		background-color: #333333 !important;
	}
	
	a:link		{ color: #ffffff; }
	a:visited	{ color: #ffffff; }
	a:hover		{ color: #ffffff; }
	a:active	{ color: #ffffff; } 
	
	.disabled	{ color: #ffffff; }
	.active		{ color: #ffffff; }

	.impressum-box {
		border: 1px solid #57626A;
		background-color: #2F3437;
	}
}


/************************************************
 * Some stuff for fading overlays on start page *
 ************************************************/
.image-container {
    position: relative;
    width: 100%; /* Adjust as needed */
}

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

.image-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
  	align-items: center;
    background-color: rgba(0, 0, 0, 0.5); 
    opacity: 0; /* Fully transparent by default */
    transition: opacity 3.0s ease; /* Smooth fade-in */
}

.image-overlay.visible {
    opacity: 1; /* Fully opaque when visible */
}

/******** 
 * MENU *
 ********/
.menu {
	display:none;
	top: 0;
	right: 0;
	width: 300px;
	height: 100%;
	background-color: rgba(255, 255, 255, 0.8);
	box-sizing: border-box;
	z-index: 100;
	font-size: 150%;
	text-transform: uppercase;
	text-align: left;
}

.menu ul {
	list-style: none;
	margin: 0;
	padding: 0;
	line-height: 2;
}

.menu ul li, .menu ul li a {
	display: block;
	border-radius: 6px;
	margin: 10px;
}

.menu a:hover {
	color: #000000;
}

.menu ul li:hover {
	color: #000000;
	background-color: #ffffff;
	transition: all 0.4s;
}

.menu li {
	position: relative;
}

/*********************************************************************
 *                                                                   *
 * Styles für Bildschirmauflösungen mit einer Breite ab 1.600 Pixeln *
 *                                                                   *
 *********************************************************************/
@media (min-width: 1600px) {
	
	.title {
		font-size: 160%;
	}
	
	.thumb-overlay .title, .thumb-overlay .title-red {
		font-size: 150%;
	}
}

@media ( max-width : 1400px) {
	.image-grid {
		grid-template-columns: repeat(4, 1fr); /* 4 images side-by-side */
	}
}

@media ( min-width : 993px) {
	.title {
		font-size: 130%;
	}
	
	.thumb-overlay .title, .thumb-overlay .title-red {
		font-size: 120%;
	}
}

@media ( max-width : 992px) {
	.image-grid {
		grid-template-columns: repeat(3, 1fr); /* 3 images side-by-side */
	}
	
	.image-grid.news {
		grid-template-columns: repeat(2, 1fr); /* 2 images side-by-side */
	}
	
	.home-title {
		font-size: 18px;
		margin: 8px 16px;
	}
}

@media ( max-width : 768px) {
	.image-grid {
		grid-template-columns: repeat(2, 1fr); /* 2 images side-by-side */
	}
	
	.image-grid.home {
		font-size: 100%;
	}
}

@media ( max-width : 600px) {
	.image-grid {
		grid-template-columns: repeat(1, 1fr); /* 1 image side-by-side */
	}
	
	.image-grid.news {
		grid-template-columns: repeat(1, 1fr); /* 2 images side-by-side */
	}
	
	.home-title {
		max-width: 90%;
	}
}

@media (max-width: 450px) {
	
	header, .header {
		height: 40px;
	}
	
	.header-padding {
		padding-top: 45px !important; /* header height +5px */
	}
	
	.logo {
		width: 250px;
	}
}

@media (max-width: 350px) {

	.logo {
		width: 0px;
		display: none;
	}
	
	.logo-small {
		display: block;
		border-radius: 3px;
		margin-left: 16px;
	}
	
	.menu {
		width: 100%;
		height: 100%;
		font-size: 120%;
	}
}