@layer FHSSR {

/*** Reset browser styles ***/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {

	margin: 0;
	padding: 0;
	border: 0;
	vertical-align: baseline;
}

html {
	font-family: arial, verdana, helvetica, sans-serif;
	font-size: 100%;
}

ol, ul {
	list-style:none;
}

html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: border-box; /* TBD chrome issue: box-sizing does not get correctly inherited inside <details> */
}

/**** FHSSR utility classes */

.FHSSRhidden {
	display:none !important; /* should always happen! */
}

#FHSSRskipnav,
.FHSSRvisuallyhidden:not(:focus) {
	position:absolute;
	clip:rect(0 0 0 0);
	border:0;
	height:1px;
	margin:-1px;
	overflow:hidden;
	padding:0;
	width:1px;
	white-space:nowrap;
}

#FHSSRskipnav:focus-within {
	clip:auto;
	left:0;
	top:0;
	width:100%;
	height:auto;
	margin:0;
	padding:10px 0;
	background:#fdf6e7;
	border:2px solid #990000;
	border-left:none;
	border-right:none;
	text-align:center;
	font-weight:bold;
	color:#990000;
}

}

nav {
	--fhnavborderthickness:1px;
	border-bottom:var(--fhnavborderthickness) solid var(--colfg3);
	margin-bottom:16px;

	& .fhnavcontainer {
		display:flex;
		flex-direction:row;
		align-items:end;
		justify-content:space-between;
		gap:16px;
		padding:16px 16px calc(16px - var(--fhnavborderthickness)) 16px;
		max-width:1500px;
		margin:0 auto;
	}

	& .fhnavicon > a {
		display:flex;
		flex-direction:column;
		align-items:center;
		align-content:end;
		padding-bottom:2px;
		& .fhnavcompanyname {
			font-size:0.8em;
			text-align:center;
			white-space:nowrap;
			margin-bottom:-1px;
			color:var(--pcolaccent1);
		}
		& svg {
			height:2em;
			stroke:var(--colbgaccent1);
		}
	}

	& .curaction {
		display:inline-block;
		white-space:nowrap;
	}

	& .fhnavitems {
		/* display:none; */
		display:flex;
		gap:8px 32px;
		width:auto;
		margin:0;
		background-color:var(--colbg1);
		color:var(--colfg1);

		/*
		& > li {
			white-space:nowrap;
		}
		*/
	}

	& .butfhnav {
		/* align-self:center; */
		margin-bottom:-3px;
	}

}

nav:not(.fhnav2) {
	& .fhnavitems {
		display:none;
	}

	& .fhnavitems:popover-open {
		position-area:end span-start;
		display:flex;
		flex-direction:column;
		gap:16px;
		padding:16px;
		border:1px solid var(--colfg1);
	}

}

@media screen and (min-width: 700px) {
	nav {
		& .fhnavcontainer {
			justify-content:start;
			/* gap:32px; */
			gap:64px;
		}

		& .fhnavicon > a {
			/* margin-bottom:-2px; */
		}

		& .curaction {
			display:none;
		}

		& .fhnavitems:not(:popover-open) {
			display:flex;
		}
		& .fhnavitems {
			position:static;
			display:flex;
			flex-direction:row;
			align-items:center;
			align-content:end;
			flex-wrap:wrap;
			margin-bottom:-3px;

			& a {
				display:inline-block;
				padding:4px;
				&[aria-current] {
					background-color:var(--colbgaccent1);
					color:var(--colfgaccent1);
				}
				&[aria-current]:hover {
					text-decoration-color:var(--colfgaccent1);
				}
			}
		}

		& .butfhnav {
			display:none;
		}
	}
}

.iconstyle {
	fill:var(--colbgaccent1);
	stroke:var(--colfgaccent1);
}
nav:not(.fhnav2):has(+ #FHSSRpagemain > .fhnav2) {
	margin-bottom:0;
}

nav.fhnav2 {
	padding:8px 8px;
    border:none;
    margin-bottom:32px;
    background-color: var(--colbg2);
    /* background: linear-gradient(to bottom, var(--colfg1), 1%, var(--colbg1)); */
	/* background:linear-gradient(to bottom, var(--colbg2), var(--colbg1)); */
    border-radius: 0 0 4px 4px;
    /* border-bottom: 1px solid var(--colfg3); */
    border-bottom: 1px solid var(--colbg25);

	& .fhnavitems {
		background-color:transparent;
		flex-wrap:wrap;
		& a {
			white-space:nowrap;
			display:inline-block;
			padding:4px;
			&[aria-current] {
				background-color:var(--colbgaccent1);
				color:var(--colfgaccent1);
			}
			&[aria-current]:hover {
				text-decoration-color:var(--colfgaccent1);
			}
		}
	}
}

@media screen and (min-width: 700px) {
	nav.fhnav2 {
		padding:12px 12px;
	}
}
.curdate {
	color:lightgrey;
}
.aboutme {
	display:grid;
	grid-template-columns:1fr;
}

.imgme {
	width:90px;
}

@media screen and (min-width: 700px) {
	.imgme {
		width:240px;
	}

	.aboutme {
		grid-template-columns:1fr 1fr;
		grid-template-rows:auto;
		column-gap:32px;

		& img {
			grid-row:1 / 2;
			grid-column:2 / 3;
		}

		& .aboutmetext {
			grid-row:1 / 2;
			grid-column:1 / 2;
		}
	}

}
.blogartlist {
		display:flex;
		flex-direction:column;
		gap:32px;
		margin-top:32px;
	}

	.blogartsummary {
		margin-top:0;
	}
.blogartdate {
		color:var(--colfg2);
	}

	.blogart .blogartsummary {
		padding:4px 0;
		border-top:1px solid var(--colbg2);
		border-bottom:1px solid var(--colbg2);
	}

	.blogartcontent {
		margin-top:32px;
	}

	.blogartcontent ul {
		list-style:disc;
	}
	.blogartcontent ol {
		list-style:decimal;
	}
	.blogartcontent ul, .blogartcontent ol {
		list-style-position:outside;
		margin-left:16px;
	}
.photoart {
		& .date {
			font-size:0.8em;
		}
		& .descr {
			margin:32px 0;
		}
		& > ul {
			display:grid;
			grid-template-columns:repeat(auto-fill, minmax(var(--photosizeL), 1fr));	
			gap:16px;

			/*
			& img {
				width:100%;
				height:100%
				object-fit:cover;
			}
			display:flex;
			flex-direction:row;
			flex-wrap:wrap;
			align-items:flex-start;
			justify-content:space-evenly;
			gap:16px;

			& > li:last-child {
				margin-right:auto;
			}
			*/

			& img {
				/* width:100%; */
				width:var(--photosizeL);
				height:var(--photosizeL);
				max-width:var(--photosizeL);
				object-fit:contain;
			}
		}
	}
footer {
		margin:32px 0;
		border-top:1px solid var(--colbg3);
		color:var(--colfg25);
	}

	.footercontainer {
		max-width:1500px;
		margin:0 auto;
		padding:16px;
	}

	.footerlinks {
		display:flex;
		flex-direction:row;
		flex-wrap:wrap;
		align-items:baseline;
		margin:16px 0;

		& > * {
			white-space:nowrap;
		}
		
	}
	.footerlinks {
		gap:0 64px;
	}
.photoart.art5 {
		& > ul {
			grid-template-columns:1fr;
			& li {
				width:100%;
				& .beforeafter {
					display:grid;
					grid-template-columns:1fr 1fr;
					gap:16px;
					margin-top:8px;
					& a {
						display:flex;
						flex-direction:column;
						align-items:center;
						justify-content:flex-end;
						gap:8px;
						padding:8px;
						background-color:var(--colbg2);
						& img {
							width:100%;
							height:auto;
						}
					}
				}
			}
		}
		& h3 {
			margin-top:32px;
		}
		& .caption {
			font-size:0.8em;
		}
	}

	@media screen and (min-width: 700px) {
		.photoart.art5 > ul > li > .beforeafter {
			grid-template-columns:max-content max-content;
		}
	}
.photoart {
		& .date {
			font-size:0.8em;
		}
		& .descr {
			margin:32px 0;
		}
		& > ul {
			display:grid;
			grid-template-columns:repeat(auto-fill, minmax(var(--photosizeL), 1fr));	
			gap:16px;

			/*
			& img {
				width:100%;
				height:100%
				object-fit:cover;
			}
			display:flex;
			flex-direction:row;
			flex-wrap:wrap;
			align-items:flex-start;
			justify-content:space-evenly;
			gap:16px;

			& > li:last-child {
				margin-right:auto;
			}
			*/

			& img {
				/* width:100%; */
				width:var(--photosizeL);
				height:var(--photosizeL);
				max-width:var(--photosizeL);
				object-fit:contain;
			}
		}
	}
/*
	html:has(.fotografie) {
		background-color:white;
		animation:FadeIn 0.75s ease-in-out forwards;
	}
	*/

	.fotografie {
		--photosizeM:6em;
		--photosizeL:18em;
		display:flex;
		flex-direction:column;
		gap:16px;

		& ol {
			display:grid;
			grid-template-columns:repeat(auto-fit, minmax(16em,1fr));	
			gap:32px 32px;

			& li > a {
				display:grid;
				grid-template-columns:var(--photosizeM) minmax(4em,1fr);
				grid-template-rows:auto 1fr;
				grid-template-areas:
					"photo title"
					"photo date";
				gap:0 16px;

				h3 {
					grid-area:title;
				}

				span {
					grid-area:date;
					font-size:0.8em;
				}

				& img {
					grid-area:photo;
					width:100%;
					height:var(--photosizeM);
					object-fit:cover;
				}

			}
		}

	}

	.artlist {
		margin-top:32px;
	}
#FHSSRmain:has(> .fotografie > .photo) {
		& nav {
			display:none;
		}

	}

	#FHSSRpagemain.fotografie:has(.photo) {
		padding:0;
		align-items:center;
	}

	.photo {
		position:relative;
		outline:none;
		& > a, & > .photoalt {
			position:absolute;
			display:flex;
			align-items:center;
			justify-content:center;
			text-align:center;
			padding:8px;
			border-radius:16px;
			background-color:var(--colbg2);
			opacity:0;
		}
		&.show > a {
			animation:3s ease 0.3s animshow;
		}
		&.showalt > .photoalt {
			opacity:1;
		}
		& .photoprev, & .photonext {
			height:100svh;
			width:3em;
		}
		& .photoprev {
			left:0;
			top:0;
		}
		& .photonext {
			right:0;
			top:0;
		}
		& .photoback {
			min-width:max-content;
			width:25%;
			left:50%;
			transform:translateX(-50%);
			top:0;
		}
		& .photoalt {
			left:50%;
			transform:translateX(-50%);
			bottom:0;
			width:calc(100% - 6em);
			transition:opacity 1s ease;
		}
		> div {
			width:100svw;
			height:100svh;
			> img {
				width:100%;
				height:100%;
				object-fit:contain;
			}
		}

	}

	@keyframes animshow {
		0% {
			opacity:0;
		}
		15% {
			opacity:0.7;
		}
		85% {
			opacity:0.7;
		}
		100% {
			opacity:0;
		}
	}
.homecontent, .introcontent, .homeheader {
		display:flex;
		flex-direction:column;
		gap:32px;
	}

	.introcontent {
		gap:16px;
	}

	.introcontent > h2 {
		margin-top:0;
	}

	.imgme {
		width:100%;
		max-width:250px;
	}

	.introsmall, .introlarge {
		font-size:1.3em;
	}
	.introlarge {
		display:none;
	}

	@media screen and (min-width: 460px) {
		.introsmall {
			display:none;
		}
		.introlarge {
			display:flex;
			flex-direction:column;
			gap:16px;
		}
		.homeheader {
			display:grid;
			grid-template-columns:1fr auto;
			grid-template-rows:auto;
			column-gap:32px;
			max-width: min(60ch, 100%);
		}

		.imgme {
			width:32vw;
		}

	}
.ux {
		ul {
			max-width:60ch;
		}
	}

.protovalue {
		display:flex;
		flex-direction:column;
		gap:16px;

		& h2 {
			margin-top:1em;
		}
		& p {
			margin-top:0;
		}
	}
:root {
		/* primitive tokens */
		--pcol00:black;
		--pcol10:#222;
		--pcol20:#555;
		--pcol25:#777;
		--pcol30:#999;
		--pcol40:#ddd;
		--pcol45:#e5e5e5;
		--pcol50:#fafafa;
		--pcol60:white;
		--pcolaccent1:#0096d5;
		/* semantic tokens, for the default light theme */
		--colbg1:var(--pcol60);
		--colbg2:var(--pcol50);
		--colbg25:var(--pcol45);
		--colbg3:var(--pcol40);
		--colfg1:var(--pcol10);
		--colfg2:var(--pcol20);
		--colfg25:var(--pcol25);
		--colfg3:var(--pcol30);
		--colbgaccent1:var(--pcolaccent1);
		--colfgaccent1:var(--pcol60);
		/* styles that can be applied in any theme */
		/* font-size:max(1em, 20px); */
		font-size:clamp(16px, 14px + 0.5dvw, 20px);
		font-family:Georgia, Times, "Times New Roman", serif;
		background-color:var(--colbg1); 
		/* background-color:white; */
		color:var(--colfg25);
		line-height:1.3;
	}

	/*
	html:not(:has(.fotografie)) {
		/* background-color:var(--pcol10); *TBD/
		animation:FadeIn 0.75s ease-in-out reverse;
	}

	@keyframes FadeIn {
	  from {
		background-color:white;
	  }
	  
	  to {
		background-color:var(--pcol10);
	  }
	}
	*/

	.dark {
		--colbg1:var(--pcol10);
		--colbg2:var(--pcol20);
		--colbg25:var(--pcol25);
		--colbg3:var(--pcol30);
		--colfg1:var(--pcol60);
		--colfg2:var(--pcol50);
		--colfg25:var(--pcol45);
		--colfg3:var(--pcol40);
		--pcolaccent1:#90deff; /* TBD find a color that works in both dark and light theme, as bg and fg */
		--colfgaccent1:var(--pcol10);
	}

	#FHSSRmain {
		/*
		max-width:1500px;
		margin:0 auto;
		*/
		/*
		background-image:repeating-linear-gradient(
			to bottom,
			rgba(255, 255, 255, 0.3) 0,
			rgba(255, 255, 255, 0.3) 8px,
			rgba(255, 255, 255, 0) 8px,
			rgba(255, 255, 255, 0) 16px
		);
		*/
	}

	#FHSSRpagemain {
		max-width:1500px;
		margin:0 auto;
		padding:16px;

		&:has(.fhnav2) {
			padding-top:0;
		}
	}

	h1 {
		font-size:1.4rem;
		color:var(--pcolaccent1);
	}
	h2 {
		font-size:1.3rem;
		color:var(--pcolaccent1);
	}
	* + h2 {
		margin-top:32px;
	}
	h3 {
		font-size:1rem;
		color:var(--pcolaccent1);
	}
	* + h3 {
		margin-top:16px;
	}

	.sectext {
		font-size:0.8rem;
	}

	a {
		/* color:var(--colfg1); */
		color:currentColor;
		text-decoration-color:transparent;
	}
	a:hover {
		/* text-decoration-color:var(--pcolfg1); */
		text-decoration-color:currentColor;
	}

	button {
		background-color:var(--colbgaccent1);
		color:var(--colfgaccent1);
		border-radius:4px;
        padding:4px 8px;
	}

	p {
		max-width:min(60ch, 100%);

		& > a {
			color:var(--pcolaccent1);
		}
	}

	p + p, ul + p {
		margin-top:16px;
	}

	ul.mylist {
		margin-left:32px;
		list-style:outside disc;
		max-width:min(60ch, 100%);

		& a {
			color:var(--pcolaccent1);
		}
	}

	figure {
		& > img {
			max-width:100%;
		}
		& a {
			color:var(--pcolaccent1);
		}
	}

	.quote {
		border-left:4px solid var(--colbg3);
		padding-left:2.75em;
	}
	.quote > p {
		position:relative;
	}
	.quote > p:first-child:before {
		content:",,";
		font-size:4em;
		font-family:"Times New Roman";
		margin-top:-0.75em;
		color:var(--colbg3);
		position:absolute;
		top:0.6em;
		left:-0.6em;
		transform:scale(-1,-1);
	}
	.quote > p:last-child:after {
		content:",,";
		font-size:4em;
		font-family:"Times New Roman";
		margin-bottom:-0.1em;
		color:var(--colbg3);
		position:absolute;
		bottom:-0.05em;
		left:-0.6em;
	}

	.textswithimages {
		display:grid;
		grid-template-columns:1fr;
		grid-template-areas:"texts" "images";
		gap:32px;

		&.fliphor {
			grid-template-areas:"images" "texts" ;
		}

		& > .texts {
			grid-area:texts;
			& h2 {
				margin-top:0;
			}
		}
		&:has(h2) {
			margin-top:16px;
		}

		& > .images {
			grid-area:images;
			display:flex;
			flex-wrap:wrap;
			gap:16px;

			& img, figure {
				max-width:100%;
				max-height:200px;
			}
		}

	}

	@media screen and (min-width: 700px) {
		.textswithimages {
			grid-template-columns:1fr 1fr;
			grid-template-areas:"texts images";

			&.fliphor {
				grid-template-areas:"images texts" ;
			}

		}

	}
.ux {
		ul {
			max-width:60ch;
		}
	}
.uxservices {
		ul {
			max-width:60ch;
		}
	}
.uxvalue {
		display:flex;
		flex-direction:column;
		gap:16px;

		& h2 {
			margin-top:1em;
		}
		& p {
			margin-top:0;
		}
	}