* {
	box-sizing: border-box;	/* so 100% means 100% */
	margin: 0;
	border: 0;
	padding: 0;
	
	font-size: 12pt;
	font-family: Arial, sans-serif;
	/* font-size-adjust: .724; too large */
	line-height: 1.22em;
	text-align: center;
}

a {
	color: var(--colorText);
	text-decoration: none;
}
a[target] {
	white-space: nowrap;
	border-bottom: .5mm solid silver;
}
a[target]::before {
	content: '🔗 ';
}

h1, h2, h3, h4, h5, h6, p {
	margin-bottom: 0.45em;
}
h1 {
	font-size: 18pt;
}
h2 {
	font-size: 14pt;
}
h6 {
	font-size: 9pt;
	font-weight: normal;
}
p {
	text-align: center;
/*	text-align: justify;
	text-align-last: center;
	text-justify: inter-character; */
	hyphens: auto;
}
.mngdBr > span {
	white-space: nowrap;
	font: inherit;
}
.info {
	padding: 2mm 3mm;
	border-radius: 3mm;
	background: var(--colorBack2);
	color: var(--colorBack1);
	text-align: left;
}
.info * {
	text-align: inherit;
}
.info h1 {
	font-style: italic;
}
.date {
	padding: 0;
	font-size: 10pt;
	text-align: center;
}

body {
	color: var(--colorText);
	
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: space-around;
	align-items: center;
	
	background-color: var(--colorBack1);
	background-image: var(--gradientBack);
	background-size: 100vw 100vh, 200vw 100vw;
	background-position: 0 50vw, -50vw 3cm;
	background-attachment: fixed;
	background-repeat:  no-repeat;
}

header {
	position: sticky;
	top: 0;
	background-color: var(--colorBack1);
	width: 100vw;
	margin: 1cm 0 5mm;
	padding: 1.5mm 1cm 3mm;
	text-align: center;
}
/* to do: turn logo elements into svg and drop the then obsolete header-childs */
header h2 {
	margin: 0;
	/*
	text-align: justify;
	text-align-last: justify;
	text-justify: inter-character;
	*/
	text-align: center;
	letter-spacing: .275rem;
	color: hsl(0, 0%, 50%);
}
header h2 span {
	font-size: 20pt;
	font-family: Courier New;
	color: hsl(0, 0%, 30%);
}
header h6 {
	margin: 0;
	padding-right: 1.2em;
	position: relative;
	top: -.45em;
	text-align: right;
	color: hsl(0, 0%, 75%);
}

main {
	min-height: calc(100vh - 8cm);
	/* max-width: 18cm;		move to sizing.css!? + see quickWin (body, header) */
	margin-top: 15mm;
}

address {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	
	font-style: normal;
}
address > *:first-child {
	margin-right: .5mm;
	border-radius: 3mm 0 0 3mm;
	font-weight: bold;
}
address > *:last-child {
	margin-left: .5mm;
	border-radius: 0 3mm 3mm 0;
}
address.extensive > *:first-child {
	margin: 0 .5mm .5mm 0;
	border-radius: 3mm 0 0 0;
	font-weight: normal;
}
address.extensive > *:nth-child(2) {
	margin: 0 0 .5mm .5mm;
	border-radius: 0 3mm 0 0;
}
address.extensive > *:nth-child(3) {
	margin: .5mm .5mm 0 0;
	border-radius: 0 0 0 3mm;
}
address.extensive > *:last-child {
	margin: .5mm 0 0 .5mm;
	border-radius: 0 0 3mm 0;
}
address p:last-child {
	margin-bottom: 0;
	color: var(--colorBack2);
}

section + p {
	display: none;
	background: var(--colorBack2);
	color: var(--colorBack1);
}
section {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-around;
	align-items: center;
}
section > article {
	flex-basis: 10%;
	flex-grow: 1;
	flex-shrink: 1;
}
section > article:first-child > a {
	margin-right: .5mm;
	border-radius: 3mm 0 0 3mm;
}
section > article:nth-child(1n+2) > a {
	margin-left: .75mm;
	margin-right: .75mm;
}
section > article:last-child > a {
	margin-left: .5mm;
	border-radius: 0 3mm 3mm 0;
}

article > div,
article > a,
address > div,
address > a {
	display: block;
	margin: 6mm 0;
	/* margin: 6mm 4mm;		BAK: may be valid for large screens!? */
	padding: 5mm 0 6mm;
	border-radius: 3mm;
	background-color: var(--colorSecondary);
}
article > a,
address > a {
}
article > a:hover,
address > a:hover {
	box-shadow: 0 0 3.5mm .1mm var(--colorSecondary);
	transition: box-shadow .25s;
}
article > div > *,
article > a > *,
address > div > *,
address > a > * {
	margin-left: 4mm;
	margin-right: 4mm;
}
article > div > *:last-child,
article > a > *:last-child,
address > div > *:last-child,
address > a > *:last-child {
	margin-bottom: 0;
}

.keyVisual {
	margin: 1em 0;
	aspect-ratio: 16/9;
	background-image: linear-gradient(180deg, var(--colorSecondary) 0, transparent 10%, transparent 90%, var(--colorSecondary) 100%), var(--img);
	background-size: 100%;
	background-blend-mode: normal;
	background-position: right top, center var(--pos);
	background-origin: border-box;
	background-attachment: local;
	background-repeat: no-repeat;
	background-color: transparent;
	/* force display of background as if it where an img element */
	color-adjust: exact;
	print-color-adjust: exact;
	-webkit-print-color-adjust: exact;
}
:has(> .keyVisualRight) {
	position: relative;
}
:has(> .keyVisualRight) > *:not(.keyVisualRight) {
	 width: calc(100% - 7cm);
}
.keyVisualRight {
	position: absolute;
	top: 0;
	left: calc(100% - 7cm);
	right: 0;
	bottom: 0;
	margin: 0;
	border-radius: inherit;
	background-image: linear-gradient(90deg, var(--colorSecondary) 5mm, transparent 8mm), var(--img);
	background-size: cover;
	background-blend-mode: normal;
	background-position: left center, calc(100% + var(--pos)) center;
	background-origin: border-box;
	background-attachment: local;
	background-repeat: no-repeat;
	/* force display of background as if it where an img element */
	color-adjust: exact;
	print-color-adjust: exact;
	-webkit-print-color-adjust: exact;
}

aside {
	margin-bottom: 12mm;
}

h1 > div {			/* ehemals aus dem summary block => überschrift auf themen seite */
	text-align: left;
	font-weight: normal;
	font-size: 10pt;
}

.topic > * {
	text-align: left;
}
.topic > p:first-of-type {
	font-weight: bold;
}
.topic > p:last-of-type {
	margin-top: 1.5em;
}
.topic > p:last-of-type::before {
	content: "➡️ ";
	white-space: pre;
}

.detailedTopic > * {
	text-align: left;
}
.detailedTopic > p {
	text-align: justify;
}
.detailedTopic > p.problem {
	color: maroon;
	margin-bottom: 1em;
}
.detailedTopic > p.solution {
	color: green;
	margin-top: 1em;
}
.detailedTopic > p.solutionTop {
	color: green;
	margin-bottom: 1em;
}

/*
span.note {
	position: relative;
	text-decoration: underline dashed .5mm;
}
span.note > span {
	visibility: hidden;
	position: absolute;
	background-color: white;
	border-radius: 0;
	padding: 2mm;
	z-index: 1;
	top: 100%;
	left: 50%;
}
span.note:hover > span {
	visibility: visible;
	top: 0;
	left: 0;
}*/

blockquote {
	margin-top: 13mm;
	margin-bottom: 16mm;
	padding: 0;
	background: none;
	text-align: right;
}
blockquote > p {
	margin: 0;
	padding: 5mm 4mm 6mm;
	background-color: var(--colorBack1);
}
blockquote > p:first-of-type {
	border-radius: 3mm 3mm 0 3mm;
	font-size: 14pt;
	font-family: "Bradley Hand", "Lucida Handwriting", cursive;
	font-style: italic;
	color: navy;
}
blockquote > p:last-of-type {
	display: inline-block;
	height: 2cm;
	/* emphasise person
	height: 2.2cm;
	border: 1mm solid white; */
	min-width: calc(50% + 1cm);
	background-image: var(--imgThis);
	background-size: 2cm 2cm;
	background-position: bottom left;
	background-repeat: no-repeat;
	border-radius: 1cm 0 3mm 1cm;
	padding-left: 23mm;
	font-style: normal;
	text-align: left;
	white-space: nowrap;
	hyphens: none;
	/* force display of background = portrait */
	color-adjust: exact;
	print-color-adjust: exact;
	-webkit-print-color-adjust: exact;
}
blockquote > p:last-of-type:first-line {
	font-weight: bold;
}

footer {
	/* position: sticky;	only on startpage */
	bottom: 0;
	background-color: var(--colorBack2);
	width: 100vw;
	margin: 1cm 0 5mm;
	padding: 2mm 0 1mm;
	text-align: center;
}
footer a {
	display: inline-block;
	padding: 3mm;
	border-radius: 2mm;
	color: var(--colorBack1);
}
footer a:hover {
	color: var(--colorBack2);
	background-color: var(--colorBack1);
}
footer a div {
	font-size: 36pt;
	line-height: 30pt;
}

/* development support - to be removed *
*			{	border: 1px dashed blue; }
main > *	{	border-color: red; }*/