/*
	CSS for a minimal base layout
	Containing a CSS reset and minimal definitons for a responsive,
	single column layout with sans serif fonts, supporting dark mode
	print layout definitions pending

	created 2022 by daniel.ammann@n3xt.ch

	source_date = "2022-12-02T23:38:27.000Z"
	file_version = 192;

*/

/* A Modern CSS Reset by Andy Bell https://hankchizljaw.com/wrote/a-modern-css-reset/*/
	/* Box sizing rules */
	*,
	*::before,
	*::after {
	  box-sizing: border-box;
	}

	/* Remove default padding */
	ul[class],
	ol[class] {
	  padding: 0;
	}

	/* Remove default margin */
	body,
	h1,
	h2,
	h3,
	h4,
	p,
	ul[class],
	ol[class],
	li,
	figure,
	figcaption,
	blockquote,
	dl,
	dd {
	  margin: 0;
	}

	/* Set core body defaults */
	body {
	  min-height: 100vh;
	  scroll-behavior: smooth;
	  text-rendering: optimizeSpeed;
	  line-height: 1.5;
	}

	/* Remove list styles on ul, ol elements with a class attribute */
	/*
	ul[class],
	ol[class] {
	  list-style: none;
	}*/

	/* A elements that don't have a class get default styles */
	a:not([class]) {
	  text-decoration-skip-ink: auto;
	}

	/* Make images easier to work with */
	img {
	  max-width: 100%;
	  display: block;
	}

	/* Natural flow and rhythm in articles by default */
	article > * + * {
	  margin-top: 1em;
	}

	/* Inherit fonts for inputs and buttons */
	input,
	button,
	textarea,
	select {
	  font: inherit;
	}

	/* Remove all animations and transitions for people that prefer not to see them */
	@media (prefers-reduced-motion: reduce) {
	  * {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	  }
	}

/* layout definitions for responsive layout, dark mode / bright mode and print layout */

/* ====== colors & icons ====== */
	@media (prefers-color-scheme: light) { /*default*/
		:root {
			/* colors bright*/
			--font-color: #000d6ff2;
			--accent-color: #B40082;
			--font-color-on-accent: white;
			--selection-color: #B4008240;
			--background-color: #fafafa; 
			--articleheader-color: #B4008280;
			--articlefooter-color: var(--articleheadercolor);
			--articleseparator-color: var(--articleheadercolor);

			--tablerow-hover-color: #B4008230;
			--font-tableedit-filtercol: var(--accent-color);

			--pageheader-backgroundcolor: transparent;
			--pagefooter-backgroundcolor: #00000009;

			--modal-backgroundcolor: #cccccccc;

			/* icons bright */
			--icon-cancel: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%230d006ff2' d='M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z' /></svg>");
			--icon-cancel-white :url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='white' d='M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z' /></svg>");
			--icon-cancel-round:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 0 24 24' width='24px' fill='white'><path d='M0 0h24v24H0z' fill='none'/><path d='M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z'/></svg>");
			--icon-menu:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 0 24 24' width='24px' fill='%23000d6ff2'><path d='M0 0h24v24H0z' fill='none'/><path d='M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z'/></svg>");
			--icon-dots-horizontal:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' height='24' width='24'><path fill='%23000d6ff2' d='M16,12A2,2 0 0,1 18,10A2,2 0 0,1 20,12A2,2 0 0,1 18,14A2,2 0 0,1 16,12M10,12A2,2 0 0,1 12,10A2,2 0 0,1 14,12A2,2 0 0,1 12,14A2,2 0 0,1 10,12M4,12A2,2 0 0,1 6,10A2,2 0 0,1 8,12A2,2 0 0,1 6,14A2,2 0 0,1 4,12Z' /></svg>");
			--icon-view-column:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' height='24' width='24'><path fill='%23000d6ff2' d='M16,5V18H21V5M4,18H9V5H4M10,18H15V5H10V18Z' /></svg>");
			--icon-unfold-less-horizontal:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' height='24' width='24'><path fill='%23000d6ff2' d='M4.08,11.92L12,4L19.92,11.92L18.5,13.33L13,7.83V22H11V7.83L5.5,13.33L4.08,11.92M12,4H22V2H2V4H12Z' /></svg>");
			--icon-unfold-more-horizontal:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' height='24' width='24'><path fill='%23000d6ff2' d='M19.9,16.1L12,24l-7.9-7.9l1.4-1.4l5.5,5.5V6h2v14.2l5.5-5.5L19.9,16.1 M12,4h10V2H2v2H12z'</svg>");
			--icon-contract-vertical:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' height='24' width='24'><path fill='%23000d6ff2' d='M16.59,5.41L15.17,4L12,7.17L8.83,4L7.41,5.41L12,10M7.41,18.59L8.83,20L12,16.83L15.17,20L16.58,18.59L12,14L7.41,18.59Z' /></svg>");
			--icon-expand-vertical:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' height='24' width='24'><path fill='%23000d6ff2' d='M12,18.17L8.83,15L7.42,16.41L12,21L16.59,16.41L15.17,15M12,5.83L15.17,9L16.58,7.59L12,3L7.41,7.59L8.83,9L12,5.83Z' /></svg>");
			--icon-sort-reverse-variant:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' height='24' width='24'><path fill='%23000d6ff2' d='M3 11H15V13H3M3 18V16H21V18M3 6H9V8H3Z' /></svg>");
			--icon-sort-variant:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' height='24' width='24'><path fill='%23000d6ff2' d='M3,13H15V11H3M3,6V8H21V6M3,18H9V16H3V18Z' /></svg>");
			--icon-filter:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' height='24' width='24'><path fill='%23000d6ff2' d='M6,13H18V11H6M3,6V8H21V6M10,18H14V16H10V18Z' /></svg>");
			--icon-pencil:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' height='24' width='24'><path fill='%23000d6ff2' d='M20.71,7.04C21.1,6.65 21.1,6 20.71,5.63L18.37,3.29C18,2.9 17.35,2.9 16.96,3.29L15.12,5.12L18.87,8.87M3,17.25V21H6.75L17.81,9.93L14.06,6.18L3,17.25Z'  /></svg>");
			--icon-chevron:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' height='48' width='48'><path class='color' fill='white' stroke='white' stroke-width='.05em' d='M24 31.9 10.8 18.7 14.15 15.35 24 25.25 33.85 15.4 37.2 18.75Z'/></svg>");
			--icon-chevron-hover:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' height='48' width='48'><path class='color' fill='%23B40082' stroke='%23B40082' stroke-width='.05em' d='M24 31.9 10.8 18.7 14.15 15.35 24 25.25 33.85 15.4 37.2 18.75Z'/></svg>");
			--icon-check-1:url("data:image/svg+xml;utf8,<svg viewBox='0 0 24 24'><path fill='lightgreen' d='M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z' /></svg>");
			--icon-check-2:url("data:image/svg+xml;utf8,<svg viewBox='0 0 24 24'><path fill='lightgreen' d='M0.41,13.41L6,19L7.41,17.58L1.83,12M22.24,5.58L11.66,16.17L7.5,12L6.07,13.41L11.66,19L23.66,7M18,7L16.59,5.58L10.24,11.93L11.66,13.34L18,7Z' /></svg>");
			--icon-alert-circle:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 0 24 24' width='24px' fill='white'><path d='M0 0h24v24H0z' fill='none'/><path fill='red' d='M13,13H11V7H13M13,17H11V15H13M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z' /></svg>");
			--icon-locked:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 0 24 24' width='24px' fill='white'><path d='M0 0h24v24H0z' fill='none'/><path fill='red' d='M12,17A2,2 0 0,0 14,15C14,13.89 13.1,13 12,13A2,2 0 0,0 10,15A2,2 0 0,0 12,17M18,8A2,2 0 0,1 20,10V20A2,2 0 0,1 18,22H6A2,2 0 0,1 4,20V10C4,8.89 4.9,8 6,8H7V6A5,5 0 0,1 12,1A5,5 0 0,1 17,6V8H18M12,3A3,3 0 0,0 9,6V8H15V6A3,3 0 0,0 12,3Z' /></svg>");
			--icon-unlocked:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 0 24 24' width='24px' fill='white'><path d='M0 0h24v24H0z' fill='none'/><path fill='lightgreen' d='M18 1C15.24 1 13 3.24 13 6V8H4C2.9 8 2 8.89 2 10V20C2 21.11 2.9 22 4 22H16C17.11 22 18 21.11 18 20V10C18 8.9 17.11 8 16 8H15V6C15 4.34 16.34 3 18 3C19.66 3 21 4.34 21 6V8H23V6C23 3.24 20.76 1 18 1M10 13C11.1 13 12 13.89 12 15C12 16.11 11.11 17 10 17C8.9 17 8 16.11 8 15C8 13.9 8.9 13 10 13Z' /></svg>");
		}
	}

/* ====== dark mode / bright mode ====== */
	@media (prefers-color-scheme: dark) { 
		:root {
			/* colors dark */
			--font-color: var(--font-color) #fafafa;
			--accent-color: #B40082;
			--font-color-on-accent: var(--font-color) white;
			--selection-color: #B40082B0;
			--background-color: #000105f2; 
			--articleheader-color: #B4008280;
			--articlefooter-color: var(--articleheadercolor);
			--articleseparator-color: var(--articleheadercolor);

			--tablerow-hover-color: #B4008230;
			--filter-accent-color: #B40082;
			--font-tableedit-filtercol: #ffa2e5;  /* brighter than var(--accent-color); */

			--pageheader-backgroundcolor: transparent;
			--pagefooter-backgroundcolor: #00000009;

			--modal-backgroundcolor: #00010599;
			/*--color-ok: ;*/
			--color-error: red;

			/* icons dark */
			--icon-cancel-white: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='white' d='M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z' /></svg>");
			--icon-cancel: var(--icon-cancel-white);
			--icon-cancel-round:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 0 24 24' width='24px' fill='white'><path d='M0 0h24v24H0z' fill='none'/><path d='M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z'/></svg>");
			--icon-menu:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 0 24 24' width='24px' fill='%23e6e1fc'><path d='M0 0h24v24H0z' fill='none'/><path d='M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z'/></svg>");
			--icon-dots-horizontal:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' height='24' width='24'><path fill='white' d='M16,12A2,2 0 0,1 18,10A2,2 0 0,1 20,12A2,2 0 0,1 18,14A2,2 0 0,1 16,12M10,12A2,2 0 0,1 12,10A2,2 0 0,1 14,12A2,2 0 0,1 12,14A2,2 0 0,1 10,12M4,12A2,2 0 0,1 6,10A2,2 0 0,1 8,12A2,2 0 0,1 6,14A2,2 0 0,1 4,12Z' /></svg>");
			--icon-view-column:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' height='24' width='24'><path fill='white' d='M16,5V18H21V5M4,18H9V5H4M10,18H15V5H10V18Z' /></svg>");
			--icon-unfold-less-horizontal:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' height='24' width='24'><path fill='white' d='M4.08,11.92L12,4L19.92,11.92L18.5,13.33L13,7.83V22H11V7.83L5.5,13.33L4.08,11.92M12,4H22V2H2V4H12Z' /></svg>");
			--icon-unfold-more-horizontal:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' height='24' width='24'><path fill='white' d='M19.9,16.1L12,24l-7.9-7.9l1.4-1.4l5.5,5.5V6h2v14.2l5.5-5.5L19.9,16.1 M12,4h10V2H2v2H12z' /></svg>");
			--icon-contract-vertical:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' height='24' width='24'><path fill='white' d='M16.59,5.41L15.17,4L12,7.17L8.83,4L7.41,5.41L12,10M7.41,18.59L8.83,20L12,16.83L15.17,20L16.58,18.59L12,14L7.41,18.59Z' /></svg>");
			--icon-expand-vertical:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' height='24' width='24'><path fill='white' d='M12,18.17L8.83,15L7.42,16.41L12,21L16.59,16.41L15.17,15M12,5.83L15.17,9L16.58,7.59L12,3L7.41,7.59L8.83,9L12,5.83Z' /></svg>");
			--icon-sort-reverse-variant:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' height='24' width='24'><path fill='white' d='M3 11H15V13H3M3 18V16H21V18M3 6H9V8H3Z' /></svg>");
			--icon-sort-variant:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' height='24' width='24'><path fill='white' d='M3,13H15V11H3M3,6V8H21V6M3,18H9V16H3V18Z' /></svg>");
			--icon-filter:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' height='24' width='24'><path fill='white' d='M6,13H18V11H6M3,6V8H21V6M10,18H14V16H10V18Z' /></svg>");
			--icon-pencil:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' height='24' width='24'><path fill='white' d='M20.71,7.04C21.1,6.65 21.1,6 20.71,5.63L18.37,3.29C18,2.9 17.35,2.9 16.96,3.29L15.12,5.12L18.87,8.87M3,17.25V21H6.75L17.81,9.93L14.06,6.18L3,17.25Z'  /></svg>");
			--icon-chevron:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' height='48' width='48'><path class='color' fill='white' stroke='white' stroke-width='.05em' d='M24 31.9 10.8 18.7 14.15 15.35 24 25.25 33.85 15.4 37.2 18.75Z'/></svg>");
			--icon-check-1:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 0 24 24' width='24px' fill='white'><path d='M0 0h24v24H0z' fill='none'/><path fill='lightgreen' d='M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z' /></svg>");
			--icon-check-2:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 0 24 24' width='24px' fill='white'><path d='M0 0h24v24H0z' fill='none'/><path fill='lightgreen' d='M0.41,13.41L6,19L7.41,17.58L1.83,12M22.24,5.58L11.66,16.17L7.5,12L6.07,13.41L11.66,19L23.66,7M18,7L16.59,5.58L10.24,11.93L11.66,13.34L18,7Z' /></svg>");
			--icon-alert-circle:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 0 24 24' width='24px' fill='white'><path d='M0 0h24v24H0z' fill='none'/><path fill='red' d='M13,13H11V7H13M13,17H11V15H13M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z' /></svg>");
			--icon-locked:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 0 24 24' width='24px' fill='white'><path d='M0 0h24v24H0z' fill='none'/><path fill='red' d='M12,17A2,2 0 0,0 14,15C14,13.89 13.1,13 12,13A2,2 0 0,0 10,15A2,2 0 0,0 12,17M18,8A2,2 0 0,1 20,10V20A2,2 0 0,1 18,22H6A2,2 0 0,1 4,20V10C4,8.89 4.9,8 6,8H7V6A5,5 0 0,1 12,1A5,5 0 0,1 17,6V8H18M12,3A3,3 0 0,0 9,6V8H15V6A3,3 0 0,0 12,3Z' /></svg>");
			--icon-unlocked:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 0 24 24' width='24px' fill='white'><path d='M0 0h24v24H0z' fill='none'/><path fill='lightgreen' d='M18 1C15.24 1 13 3.24 13 6V8H4C2.9 8 2 8.89 2 10V20C2 21.11 2.9 22 4 22H16C17.11 22 18 21.11 18 20V10C18 8.9 17.11 8 16 8H15V6C15 4.34 16.34 3 18 3C19.66 3 21 4.34 21 6V8H23V6C23 3.24 20.76 1 18 1M10 13C11.1 13 12 13.89 12 15C12 16.11 11.11 17 10 17C8.9 17 8 16.11 8 15C8 13.9 8.9 13 10 13Z' /></svg>");
		}
	}

/* ====== typo (mobile first) ====== */
	:root {
		--font-family: "HKGrotesk",-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; /* doron brayer @https://github.com/necolas/normalize.css/issues/665#issue-218860829*/
		--font-weight: 400;
		--font-size: 1rem;
		/*--responsive-zoom: 100%;*/
		--letter-spacing: 0.09em;
		--line-height: 1.7em;

		--body-padding: 1em 1em 1em 2em;
		--min-width:  24em;
		--max-width:  48em;

		--icon-size: 1.5em;
	}
	@media (prefers-color-scheme: dark) { 
		:root {
			--font-weight: 300;
			--font-size: 1rem;
			--letter-spacing: 0.09em;
		}
	}

	:focus {
		outline-color: var(--accent-color);
	}
	::selection {
		background: var(--selection-color); /* WebKit/Blink Browsers */
	}
	::-moz-selection {
		background: var(--selection-color); /* Gecko Browsers */
	}
	:link {
		text-decoration-thickness: 0.05em;
		text-underline-offset: 0.2em;
		text-decoration-color:  transparent;
	}
	.template,
	.hidden, 
	.content-hidden-until-rendered  > * {
		display: none !important;
	}
	html,
	body {
		width: 100%;
		height: 100%;
		/* https://stackoverflow.com/a/22417120:  WebKit has an annoying function (for a properly designed responsive site) of trying to enlarge the font for the "primary" text on the screen, where primary is simply it's best guess. */
		text-size-adjust: 100%;
		-ms-text-size-adjust: 100%;
		-moz-text-size-adjust: 100%;
		-webkit-text-size-adjust: 100%;
	}
	body {
		font-family: sans-serif; 						/* fallback font for old browsers */
		font-family: var(--font-family, sans-serif);
		font-size: var(--font-size);
		/*transform: scale(var(--responsive-zoom));*/
		font-weight: var(--font-weight);
		letter-spacing: var(--letter-spacing);
		line-height: var(--line-height);

		color: var(--font-color);
		background-color: var(--background-color);

		margin:  auto;
		padding: var(--body-padding);
		min-width: var(--min-width);
		max-width: var(--max-width);

		-epub-hyphens: auto;
		-webkit-hyphens: auto;
			-ms-hyphens: auto;
			hyphens: auto;
			/* https://css-tricks.com/almanac/properties/h/hyphenate-limit-chars/#:~:text=As%20their%20names%20imply%2C%20%2Dwebkit,of%20characters%20after%20the%20hyphen. */
		-webkit-hyphenate-limit-before: 3;  /* For Safari */
		-webkit-hyphenate-limit-after: 4;   /* For Safari */
		-ms-hyphenate-limit-chars: 10 3 4;
		hyphenate-limit-chars: 10 3 4;    			
		-webkit-hyphenate-limit-lines: 3;   /* For Safari */
	}
	article {
	  margin-top: 3em;
	}
	header {
		text-align: right;
		padding-right: 0.5em;
		margin-bottom: 1em;
	}
	header.fixed {
		position: fixed;
		top: 0;
		left: 0;
		width: 100vw;
		height: 2.8em;
		padding: 0.5em 1em 0.5em 2.0em;
		text-align: left;
		background-color: var(--background-color);
	} 
	header.fixed + h1,
	header.fixed + p,
	header.fixed + nav + h1,
	header.fixed + nav + p {
		margin-top: 1.5em;
	}

	nav {
		position: fixed;
		top: env(safe-area-inset-top);
		left: 0;
		width: var(--icon-size);
		height: var(--icon-size);
		padding: var(--body-padding);
		vertical-align: bottom;
		z-index: 1000;
		background-color: transparent;
		transition: background-color 0.3s ease ;
	}
	header.fixed + nav {
		margin-top: -0.4em;
	} 
	header:empty + nav {
		/* place menu item in the top corner */
		margin-top: -0.6em;
	}
	nav * {
		display: none;
		--icon-size:  var(--icon-size); /* make integer value accessible in :before pseudo tag */ 
	}
	nav.hover {
		background-color: var(--modal-backgroundcolor);
		width: 100vw;
		height: 110vh;
	}
	nav.hover * {
		display: inherit;
	}
	nav:before {
		content:  "≡";
		color: transparent;
		position: absolute;
		margin-left: calc(var(--icon-size) * -1.15);
		width: var(--icon-size);
		height: var(--icon-size);
		background-image: var(--icon-menu);
		background-repeat: no-repeat;
		background-size: contain;
		opacity: 0.3;
	}
	nav.hover:before {
		opacity: 1;
	}
	nav ul, 
	nav ol {
		width: fit-content;
		background-color: var(--background-color);
		margin-top: -0.625em;
		padding: 0.3em 0;
	}
	nav.hover ul ul {
		padding-left: 1.5em;
		display: none;
	}
	nav.hover ul:hover ul {
		display: initial;
	}
	nav li {
		padding:  0.5em 1em;
		font-size: 1.25em;
	}
	nav :link, 
	nav :visited {
		color: var(--font-color);
		font-weight: bold;
		text-decoration: none;
		/*text-transform: uppercase;*/
	}

	footer {
		margin-top:  6em;
		padding-bottom: 1em;
	}
	p {
		margin-top: 1em;
	}
	code {
		font-size: 90%;
	}
	img {
		max-width: 100%;
		max-height: 24em;
	}
	img.icon {
		display: inline-block;
		height: 1em;
		vertical-align: middle;
	}
	h1, h2, h3, h4, h5, h6 {
		/* 2022-05 */ 
		/*margin-top:  1em;*/
		font-size: 1.17em;
		margin-bottom: 0.5em;  
		adobe-hyphenate: none;
		-epub-hyphens: none;
		-webkit-hyphens: none;
			-ms-hyphens: none;
			hyphens: none;
	}
	h2, h3, h4, h5, h6 {
		margin-top: 2em;
	}
	ol, ul {
		margin:  0;
		padding: 0;
	}
	li:empty {
		list-style-type: none ;
		display: none;
	}
	hr {
		height: 1px;
		margin-top: 1em !important;
		margin-bottom: 1em !important;
		/* border: 0px; */
		border-width: 1px 0 0 0;
		/* border-top: 1px; */
		border-color: var(--articleseparatorcolor);
	}
	table {
		margin-top: 1em;
		width: 100%;
		border-spacing: 0;
		border-collapse: collapse;
	}
	th, td {
		text-align: left;
		padding: 0;
		padding-left: 0.15em;
		padding-right: 0.5em;
		vertical-align: top;
	}
	th.align-right,
	td.align-right {
		text-align: right;
		padding-right: 0.4em;
	}
	th {
		border-bottom: 2px solid var(--font-color);
	}
	th:empty {
		font-size: 0;
		line-height: 0;
	}

	tr:last-child th {
		padding-bottom: 0.15em;
	}
	tr:first-child td {
		padding-top: 0.15em;
	}
	tr:hover td {
/*		background-color: var(--tablerow-hover-color);*/
		/* cursor: pointer;*/
	}
	.hide {
		display:  none !important;
	}
	a.btn {
		/* responsive size! */
		background-repeat: no-repeat;
		background-size: contain;
		width: var(--icon-size);
		height: var(--icon-size);
		padding-left: var(--icon-size);
		/*transform: translateY(0.25em);*/
		/*display: inline-block;*/
		/*position: absolute;*/
		margin-left: 0em;
		cursor: pointer;
		z-index: 100;
	}
	a.btn:last-child {
		margin-right: -1em;
	}
	a.btn.icon-only {
		display: inline-flex;
		width: var(--icon-size);
		color: transparent;
		overflow: hidden;
		width: 2em;
	}
	.btn[data_icon]:before {
		content: "x";
		position: absolute;
		/* display: inline-flex; */
		/*background-color: red;*/
		width: var(--icon-size);
		height: var(--icon-size);
		color: transparent;
	}
	.btn[data_icon="close"]:before {
		background-image: var(--icon-cancel-round);
	}
	#msg_wrapper {
		position: fixed;
		z-index: 1000;
		width: 100%;
		bottom: 0; /* default */
		bottom: env(safe-area-inset-bottom); /* iOS */
		/*margin-bottom: 0em;*/
		display: flex;
		flex-flow: column;
		height: 100vh; /* fallback for Js load */
		height: var(--doc-height);
	}
	#msg_wrapper .msg {
		display: inline-block;
		z-index: 1000;
		width: 100%;
		background-color: var(--accent-color);
		color: var(--font-color-on-accent);
		padding: 0.7em calc(2em / 1.1);
		font-weight: bold;
		font-size: 1.1em;
		min-height:  3em;
		visibility: hidden;
		box-shadow:  0px 1em 1em 1em #00000011, 0px 0.1em 0.1em 0.1em #00000022;
		transition: margin-bottom 0.5s ease-out, margin-top 1s ease-in, opacity 0.2s ease-in;
	}
	#msg_wrapper .msg.in {
		margin-bottom: 0px !important;
		visibility: visible;
	}
	#msg_wrapper .msg.out {
		opacity: 0;
		margin-bottom: 0; /* explicit setting in style tag will get active again, the msg will go down */
	}
	#msg_wrapper .msg.ok {
		background-color: green;

	}
	#msg_wrapper .msg.error {
		background-color: red;
	}
	#msg_wrapper .msg .btn {
		/* definitions in rem to reduce rounding errors and unpredictable behaviour */
		position: absolute;
		right: 0;
		display: inline-block;
		height: 2rem;
		width: 2rem;
		margin-right: 0.8rem;
		margin-top: -0.4rem;
		background-image: var(--icon-cancel-white);
		background-size: 1.5rem;
		background-repeat: no-repeat;
		background-position:  0.23rem 0.23rem;
	}
	#msg_wrapper .msg .btn circle {
		fill: transparent;
		stroke: white;
		stroke-width: 0.35rem;
		opacity: 1;
		stroke-dasharray: 100;
		stroke-dashoffset: 0;
		transform-origin: 50% 50%;
		transform: rotate(-90deg);
		transition: stroke-dashoffset 5s 0.3s linear; /* delay from #msg_wrapper .msg transition */
	}
	#msg_wrapper .msg .short,
	#msg_wrapper .msg .long {
		display: none;
	}
	section.accordion {},
	section.accordion .accordion-trigger {},
	section.accordion .accordion-trigger:before {
		content:  ">";
		color: transparent;
		float: left;
		/*position: absolute;*/
		margin-left: calc(var(--icon-size) * -1);
		width: var(--icon-size);
		height: var(--icon-size);
		vertical-align: middle;
		background-image: var(--icon-chevron);
		background-repeat: no-repeat;
		background-size: contain;
	}
	section.accordion .accordion-trigger:after {},
	section.accordion.collapsed .accordion-trigger:before {},
	section.accordion.collapsed .accordion-trigger:after {},
	section.accordion.collapsed :not(.accordion-trigger) {
		display: none;
	}

	.dropdown {
		position: absolute;
		padding: 0px 2px !important;
		background-color: var(--background-color);
		list-style-type: none;
/*		box-shadow: 0 0 10px black, 0 0 100px black;*/
		width: fit-content;
		cursor: pointer;
		transform: translateX(-100%);
	}
	:active > .dropdown,
	:hover > .dropdown {
		z-index: 1100;
		/* background-color: var(--accent-color);*/
		transition: display 0 0.3s, color 0.3s 0.4s, background-color 0.3s 0.4s;
	}
	.dropdown li {
		display: none;
		height: 2em;
		white-space: nowrap;
		padding: 0.15em 2em 0 0.3em;
		-webkit-touch-callout: none;   /* iOS Safari */
		-webkit-user-select: none;     /* Safari */
		-khtml-user-select: none;      /* Konqueror HTML */
		-moz-user-select: none;        /* Old versions of Firefox */
		-ms-user-select: none;         /* Internet Explorer/Edge */
		user-select: none;             /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */

	}
	.dropdown li > * {
		white-space: nowrap;
		transition: color 0s, background-color 0s;
	}
	/*.dropdown li label.left {
    	/* margin-right: 2em; */
		/* padding-right: 1.6em;*/
	/*}*/
	.dropdown li label.left input[type="checkbox"] {
		float: right;
		margin-left: -2em;
		margin-right: -1.5em;
		margin-top: 0.1em;
	}
	.dropdown li label.left:before {
		/* bugfix */
		position: absolute;
	}
	.dropdown li label:before {
		/* for checkboxes within */

	}
	:active > .dropdown li,
	:hover > .dropdown li {
		display: list-item;
/*		transition: color 0.1s, background-color 0.1s;*/
	}
	.dropdown li:hover {
		background-color: var(--accent-color);
		transition: color 0s, background-color 0s;
	}

	.collapsible * {
		opacity: 1;
		visibility: visible;
		transition: visibility 0s 0.7s, opacity 0.3s 0.6s ease-out;;
	}
	.collapsible > .collapsible-actor:hover {
		cursor: pointer;
	}
	/* mark idle active lines with an icon to the left */
	.collapsible > .collapsible-actor:before {
		content: ">";
		color: transparent;
		position: absolute;
		display: block;
		/*float: right;*/
		margin-left: -2em;
		/*margin-right: -0.3em;*/
		width: 1.5em;
		background-image: var(--icon-unfold-more-horizontal);
		background-repeat: no-repeat;
		background-size: contain;

		cursor: pointer;
		opacity: 0.1;
		transform: opacity 1s ease-out;
	}
	/* on hover, highlight and change the icon shape */
	.collapsible > .collapsible-actor:hover:before {
		background-image: var(--icon-unfold-less-horizontal);
		opacity: 100%;
	}
	/* Hide collapsed items */
	.collapsible.collapsed :not(.collapsible-actor) {
		display: none !important;
		visibility: hidden;
		opacity: 0;
	}
	/* invert the icon shapes on collapsed items */
	.collapsible.collapsed > .collapsible-actor:before {
		background-image: var(--icon-unfold-less-horizontal);
	}
	.collapsible.collapsed > .collapsible-actor:hover:before {
		background-image: var(--icon-unfold-more-horizontal);
		opacity: 1;
	}
	.collapsible h1,
	.collapsible h2,
	.collapsible h3,
	.collapsible h4,
	.collapsible h5,
	.collapsible h6 {
		transition: margin-bottom 0.7s cubic-bezier(0.5,0.25,0,1);
	}
	.collapsed > h1,
	.collapsed > h2,
	.collapsed > h3,
	.collapsed > h4,
	.collapsed > h5,
	.collapsed > h6 {
		/*	margin-top: 2em;	*/
/*		margin-bottom: -3em;*/
	}
	.collapsed + .collapsed > h1,
	.collapsed + .collapsed > h2,
	.collapsed + .collapsed > h3,
	.collapsed + .collapsed > h4,
	.collapsed + .collapsed > h5,
	.collapsed + .collapsed > h6 {
		margin-top: 1em;
	}

	@media (prefers-color-scheme: dark) {
		.invert_in_darkmode {
			filter: invert(1);
		}
	}
/* ====== responsive layout ====== */
	@media only screen and (min-width: 412px) {
		#msg_wrapper .msg .short {
			display: initial;
		}
	}
	@media only screen and (pointer: coarse) and (min-width: 652px) {
		/* smartphones in landscape (iPhone SE landscape = 653px) */
		:root {
			--font-size:  1em;
		}
		#msg_wrapper .msg .short {
			display: none;
		}
		#msg_wrapper .msg .long {
			display: initial;
		}
	}
	@media only screen and (min-width: 768px) {
		/* For desktop: */
		:root {
			--style-breakpoint:tablet;	/* without leading / trailing spaces */ 
			--font-size:  1.25em;
			--max-width: initial;

			--letter-spacing: 0.075em;
		}
		#msg_wrapper .msg .short {
			display: none;
		}
		#msg_wrapper .msg .long {
			display: initial;
		}
	}
	@media only screen and (min-width: 1200px) {
		:root{
			--style-breakpoint:desktop;	/* without leading / trailing spaces */ 
			--font-size:  1.5em;
			/*--responsive-zoom: 150%;*/
				--letter-spacing: 0.09rem;
		}
	}