@import url('fonts.css'); /* Set here your fonts, if not only Arial, Helvetica, system-ui will be displayed */
@import url('standard.css');
@import url('navigation.css');
@import url('icons.css');

:root {
	
	--black: #000;
	--green: #bac00a;
	--blue: #345678;
	--lightblue: #5ab6fa;
	--red: #ff0000;
	--yellow: #ffcb3e;
	--orange: #ff4800;
	--pink: #e50046;
	--grey: #ccc;
	--lightgrey: #eee;
	
	--fontcolor: var(--black);
	--fontsize: 18px;
	--fontsize-max: 20px;
	
	--container: 1400px;
	--gap: 1rem;
	--headerheight: calc(100px + calc(var(--gap) * 2));
	
	--grid: 
		[full-width-start] 
			minmax(var(--gap), 1fr) 	
				[picture-start]
					calc(var(--gap) * 2)
						[content-start]	
							min((50% - calc(var(--gap) * 3)), calc(var(--container) / 2)) 
								[center-start] 
									0px 
								[center-end] 
							min((50% - calc(var(--gap) * 3)), calc(var(--container) / 2)) 
						[content-end] 
					calc(var(--gap) * 2)
				[picture-end]
			minmax(var(--gap), 1fr) 
		[full-width-end];
	
	
	--columns-fill-4: repeat(auto-fill, minmax(min(calc(calc(var(--container) / 4) - calc(var(--gap) * 1)), 100%), 1fr));
	--columns-fit-4: repeat(auto-fit, minmax(min(calc(calc(var(--container) / 4) - calc(var(--gap) * 1)), 100%), 1fr));
	--columns-fill-3: repeat(auto-fill, minmax(min(calc(calc(var(--container) / 3) - calc(var(--gap) * 1)), 100%), 1fr));
	--columns-fit-3: repeat(auto-fit, minmax(min(calc(calc(var(--container) / 3) - calc(var(--gap) * 1)), 100%), 1fr));
	--columns-fill-2: repeat(auto-fill, minmax(min(calc(calc(var(--container) / 2) - calc(var(--gap) * 1)), 100%), 1fr));
	--columns-fit-2: repeat(auto-fit, minmax(min(calc(calc(var(--container) / 2) - calc(var(--gap) * 1)), 100%), 1fr));
	
	--btn-color: var(--yellow);
	--btn-color-hover: rgba(from var(--yellow) r g b / .9);
	--btn-text-color: var(--fontcolor);
	--btn-text-color-reverse: #fff;
	--btn-radius: 0px;
	--btn-text-transform: normal;
	
	--link-color: var(--fontcolor);
	--link-color-hover: var(--blue);
	
	--nav-sub-color: rgb(255, 255, 255);
	--nav-sub-fontcolor: var(--fontcolor);
	--nav-sub-fontcolor-hover: var(--btn-color);
	--nav-sub-box-shadow: 0 0 3px 1px #888;
	
	--teaser-text-color: /*#fff*/ black;
	--teaser-text-shadow: /*0 0 2px var(--fontcolor)*/ none;
	
	--summary-color: var(--lightgrey);
	
	--icon-size: var(--fontsize);
	--icon-color: #000;
		

	
	/*@media (dynamic-range: high) {*/
  		@supports (color: color(display-p3 1 1 1)) {
			
			--green: color(display-p3 0.729412 0.752941 0.039216);
			--blue: color(display-p3 0.203922 0.337255 0.470588);
			--lightblue: color(display-p3 0.352941 0.713725 0.980392);
			--red: color(display-p3 0.666667 0.000000 0.000000);
			--yellow: color(display-p3 1.000000 0.796078 0.243137);
			--orange: color(display-p3 1.000000 0.282353 0.000000);
			
			--btn-color-hover: color(display-p3 1.000000 0.796078 0.243137 / .9);
		}
	/*}*/
	
	--green-light: color-mix(in srgb, var(--green), white 60%);
	--blue-light: color-mix(in srgb, var(--blue), white 70%);
	--lightblue-light: color-mix(in srgb, var(--lightblue), white 70%);
	--red-light: color-mix(in srgb, var(--red), white 50%);
	--yellow-light: color-mix(in srgb, var(--yellow), white 60%);
	--orange-light: color-mix(in srgb, var(--orange), white 60%);
	--pink-light: color-mix(in srgb, var(--pink), white 50%);
	
	--footercolor: var(--lightgrey);
}

@media(max-width:800px) {
	:root {
		--grid: 
		[full-width-start] 
			var(--gap) 	
				[picture-start]
					1px
						[content-start]	
							calc(50% - var(--gap))
								[center-start] 
									0px 
								[center-end] 
							calc(50% - var(--gap))
						[content-end] 
					1px
				[picture-end]
			var(--gap) 
		[full-width-end];
		
	}
}




/***********************************************************

		Individual Styling for Page

***********************************************************/


body {
	padding-top: var(--headerheight);

	> header {
		> div {
			> #navigation {
				> ul {
					flex: 0;
					justify-content: flex-end;
					gap: var(--gap);
				}
			}
		}
	}
	
	> main {
		
		h1 {
			margin-bottom: var(--gap);
		}
		
		a {		
			text-decoration: none;
			font-weight: 400;
			
			&:hover {
				text-decoration: underline;
			}
			
			&[rel*="nofollow"] {
				color: var(--fontcolor);
				
				&[target=_blank]:before,
				&[target=_blank]:after {
					background-color: var(--fontcolor);
				}
			}
			
			&[target=_blank]:after {
				display: inline-flex;
				content: "";
				-webkit-mask: url('data:image/svg+xml; utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d="M320 0c-17.7 0-32 14.3-32 32s14.3 32 32 32l82.7 0L201.4 265.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L448 109.3l0 82.7c0 17.7 14.3 32 32 32s32-14.3 32-32l0-160c0-17.7-14.3-32-32-32L320 0zM80 32C35.8 32 0 67.8 0 112L0 432c0 44.2 35.8 80 80 80l320 0c44.2 0 80-35.8 80-80l0-112c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 112c0 8.8-7.2 16-16 16L80 448c-8.8 0-16-7.2-16-16l0-320c0-8.8 7.2-16 16-16l112 0c17.7 0 32-14.3 32-32s-14.3-32-32-32L80 32z"/></svg>');
				mask: url('data:image/svg+xml; utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d="M320 0c-17.7 0-32 14.3-32 32s14.3 32 32 32l82.7 0L201.4 265.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L448 109.3l0 82.7c0 17.7 14.3 32 32 32s32-14.3 32-32l0-160c0-17.7-14.3-32-32-32L320 0zM80 32C35.8 32 0 67.8 0 112L0 432c0 44.2 35.8 80 80 80l320 0c44.2 0 80-35.8 80-80l0-112c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 112c0 8.8-7.2 16-16 16L80 448c-8.8 0-16-7.2-16-16l0-320c0-8.8 7.2-16 16-16l112 0c17.7 0 32-14.3 32-32s-14.3-32-32-32L80 32z"/></svg>');
				-webkit-mask-size: contain !important;
				-webkit-mask-repeat: no-repeat !important;
				-webkit-mask-position: center !important;
				mask-size: contain !important;
				mask-repeat: no-repeat !important;
				mask-position: center !important;
				background: var(--btn-color);
				width: calc(var(--fontsize) * .8);
				height: calc(var(--fontsize) * .8);
				margin-inline: calc(var(--gap) / 4);
				aspect-ratio: 1;
				vertical-align: baseline;
			}
		}
	}
	
	> footer {
		background: var(--lightgrey);
		
		ul {
			list-style: none;
			margin: 0;
			a {
				text-decoration: none;
			}
		}
		
		> * {
			display: flex;
			gap: var(--gap);
			> * {
				flex: 1;
			}
			> *:has(address) {
				flex: 2;
			}
			> *:last-child {
				display: flex;
				justify-content: flex-end;
			}
			@media(max-width: 800px) {
				flex-direction: column;	
				> *:last-child {
					justify-content: flex-start;	
				}
			}
		}
		> nav {
			display: flex;
			align-content: center;
			align-items: center;
			justify-content: center;
			margin-block: var(--gap);
			ul {
				list-style: none;
				margin: 0;
				flex: 0;
				display: flex;
				gap: var(--gap);
				a {
					text-decoration: none;
				}
			}
		}
		#flags {
			display: flex;
			gap: var(--gap);
			a {
				text-transform: uppercase;
				text-decoration: none;
				&.active {
					font-weight: 500;	
				}
			}
		}
		#social-nav {
			margin-block: var(--gap);
		}
	}
}

/* if CI color of brand not wanted
.icon {
	background: black !important;
}
*/

.grid {
	display: grid;
	grid-template-columns: var(--columns-fill-4);
	gap: var(--gap);
	
	&.grid-2 {
		grid-template-columns: var(--columns-fill-2);
	}
	&.grid-3 {
		grid-template-columns: var(--columns-fill-3);
	}
	
	&.gap-2 {
		gap: calc(var(--gap) * 2);
	}
}


.counter {
	list-style: none;
	counter-reset: list;
	
	li {
		counter-increment: list;
		margin: var(--gap);
		&:before {
			display: inline-flex;
			align-content: center;
			align-items: center;
			justify-content: center;
			content: counter(list);
			border-radius: 100vw;
			aspect-ratio: 1;
			padding: calc(var(--gap) / 2);
			width: 50px;
			background: var(--orange);
			margin-right: var(--gap);
			color: white;		
			font-weight: 900;
		}
		&:nth-child(2):before {
			background: var(--green);
		}
	}
}

.counter-box {
	margin: var(--gap) 0;
	list-style: none;
	counter-reset: list;
	display: grid;
	grid-template-columns: repeat(auto-fill, calc(50% - calc(var(--gap) / 2)));
	gap: var(--gap);
	
	li {
		counter-increment: list;
		padding: var(--gap);
		background: var(--orange-light);
		color: white;
		color: var(--fontcolor);
		font-weight: 500;
		text-align: center;
		
		
		svg {
			display: block;
			margin: auto;
			margin-block: var(--gap);
			fill: white;
			fill: var(--fontcolor);
			height: 5em;
			transition: all .5s ease-in-out;
		}
		&:hover {
			svg {
				transform: scale(1.25);
			}
		}
		
		&::before {
			display: flex;
			align-content: center;
			align-items: center;
			justify-content: center;
			content: counter(list)'.';
			font-weight: 900;
			font-size: 2em;
		}
		&:nth-child(2) {
			background: var(--green-light);
		}
		&:nth-child(3) {
			background: var(--blue-light);
		}
		&:nth-child(4) {
			background: var(--red-light);
		}
		&:nth-child(5) {
			background: var(--yellow-light);
			color: var(--fontcolor);
			svg {
				fill: var(--fontcolor);	
			}
		}
		&:nth-child(6) {
			background: var(--pink-light);
		}
		
		
	}
	
}
.check-list {
	list-style: none;
	margin: var(--gap) 0;
	
	li {
		display: flex;
		
		&:before { 
			content:"\2713\0020"; 
			margin-right: calc(var(--gap) / 2);
		}
	}
}

.color-list {
	list-style: none;
	margin: var(--gap) 0;
	

	li:before {
		content: '';
		display: inline-block;
		height: .8em;
		width: .8em;
		vertical-align: baseline;
		margin-right: var(--gap);
		
		&.black:before {
			background: black;
		}
		&.red:before {
			background: red;
		}
		&.yellow:before {
			background: yellow;
		}
	}
}

.icon.socken {
	-webkit-mask: url('data:image/svg+xml; utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M175.2 476.6c-9.7-18-15.2-38.7-15.2-60.6c0-40.3 19-78.2 51.2-102.4l64-48c8.1-6 12.8-15.5 12.8-25.6l0-144L128 96l0 144c0 20.1-9.5 39.1-25.6 51.2l-64 48C14.2 357.3 0 385.8 0 416c0 53 43 96 96 96c20.8 0 41-6.7 57.6-19.2l21.6-16.2zM128 64l160 0 0-16c0-14.5 3.9-28.2 10.7-39.9C291 3 281.9 0 272 0L176 0c-26.5 0-48 21.5-48 48l0 16zM320 96l0 144c0 20.1-9.5 39.1-25.6 51.2l-64 48C206.2 357.3 192 385.8 192 416c0 53 43 96 96 96c20.8 0 41-6.7 57.6-19.2l115.2-86.4C493 382.2 512 344.3 512 304l0-208L320 96zM512 64l0-16c0-26.5-21.5-48-48-48L368 0c-26.5 0-48 21.5-48 48l0 16 192 0z"/></svg>');
	mask: url('data:image/svg+xml; utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M175.2 476.6c-9.7-18-15.2-38.7-15.2-60.6c0-40.3 19-78.2 51.2-102.4l64-48c8.1-6 12.8-15.5 12.8-25.6l0-144L128 96l0 144c0 20.1-9.5 39.1-25.6 51.2l-64 48C14.2 357.3 0 385.8 0 416c0 53 43 96 96 96c20.8 0 41-6.7 57.6-19.2l21.6-16.2zM128 64l160 0 0-16c0-14.5 3.9-28.2 10.7-39.9C291 3 281.9 0 272 0L176 0c-26.5 0-48 21.5-48 48l0 16zM320 96l0 144c0 20.1-9.5 39.1-25.6 51.2l-64 48C206.2 357.3 192 385.8 192 416c0 53 43 96 96 96c20.8 0 41-6.7 57.6-19.2l115.2-86.4C493 382.2 512 344.3 512 304l0-208L320 96zM512 64l0-16c0-26.5-21.5-48-48-48L368 0c-26.5 0-48 21.5-48 48l0 16 192 0z"/></svg>');
}

.bg {
	grid-column: full-width;
	display: grid;	
	grid-template-columns: var(--grid);
	background: var(--lightgrey);
	margin-block: var(--gap);
	padding-block: var(--gap);
	
	> * {
		grid-column: content;	
	}
}

.color-palette {
	display: grid;
	gap: 1px;
	grid-template-columns: repeat(auto-fill, minmax(min(calc(calc(var(--container) / 4) - calc(var(--gap) * 1)), 100%), 1fr));
	> * {
		padding: var(--gap);
		> * {
			font-size: 1.5rem;
			color: #fff;
			text-shadow: 0 0 3px #000;
		}
		h3 {
			font-size: 2rem;	
		}
		p {
			font-size: 1.25rem;	
			margin: 0;
		}
	}
}

table {
	margin-block: var(--gap);
	th, td {
		padding: calc(var(--gap) / 2);	
	}
	th {
		text-align: left;
		background-color: black;
		color: white;
	}
	tr:nth-child(odd) {
		background-color: lightgrey;	
	}
}

ul {
	margin-block: var(--gap);	
}