@charset "UTF-8";
/* CSS Document */
/*  Quellen:
https://rachelandrew.co.uk/archives/2016/03/30/should-i-use-grid-or-flexbox/
https://developer.mozilla.org/de/docs/Web/API/Document_Object_Model
https://thisinterestsme.com/change-src-image-javascript/
https://www.pixolum.com/blog/fotografie/wasserzeichen-erstellen
https://www.mediaevent.de/javascript/Javascript-Funktionen-Return.html
https://www.w3schools.com/cssref/playit.asp?filename=playcss_display&preval=inline-block
https://wiki.selfhtml.org/wiki/JavaScript/Tutorials/Web_Animations/Komfort-Bildwechsler
https://meyerweb.com/eric/css//edge/menus/demo.html
Und immer schön
validieren (http://validator.w3.org/) 

Note: (1) a:link (2) a:visited (3) a:hover (4) a:active // Reihe Eigenschaft eines Elements: O-R-U-L

The ::first-line pseudo-element is used to add a special style to the first line of a text.
*/

/*
	font-family: kallisto, HelveticaNeue, "Helvetica Neue", Helvetica, Arial, sans-serif; 
	font-family: fira-sans, HelveticaNeue, "Helvetica Neue", Helvetica, Arial, sans-serif;  
	font-family: kinesis-pro-3, Times, "Times New Roman", serif; 
	font-family: "kandal", Times, "Times New Roman", serif; 

Farben: https://www.w3schools.com/colors/colors_picker.asp
 background-color:#DEF089; /*bisque sicher, nicht so nah —> #ccff99
  background-color:#37CBCC; /*darkseagreen sehr nahe —> #33cccc
  background-color:#C2C23B; /*#808000 darkgoldenrod —> #cccc00
  background-color: darkcyan; /* —> #009999 

*/

body{/*font-size:1.5em;line-height:1.6;*/ 
	font-family: fira-sans, HelveticaNeue, "Helvetica Neue", Helvetica, Arial, sans-serif;
/*	font-weight:400;
	color:#222; */
}
/*
h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:0;} font-weight:300; margin-bottom:2rem; */
/*
h1{font-size:4rem;line-height:1.2;letter-spacing:-.1rem}
h2{font-size:3.6rem;line-height:1.25;letter-spacing:-.1rem}
h3{font-size:3rem;line-height:1.3;letter-spacing:-.1rem}
h4{font-size:2.4rem;line-height:1.35;letter-spacing:-.08rem}
h5{font-size:1.8rem;line-height:1.5;letter-spacing:-.05rem}
h6{font-size:1.5rem;line-height:1.6;letter-spacing:0}*/

/* vergrössert Schrift bei Screen vertikal auf iPhone */
/* @media (min-width:550px){ 
	h1{font-size:5rem}
	h2{font-size:4.2rem}
	h3{font-size:3.6rem}
	h4{font-size:3rem}
	h5{font-size:2.4rem}
	h6{font-size:1.5rem}
}
*/
.mainheader {
  grid-area: header;
	background-color: #036; /* evtl. violett: #306, dunkel wie erst im Titel: #003 heller wie erstmals im Footer #036 */
	text-align: center;
	padding: 16px 0px 8px 0px;
	position: -webkit-sticky;
    position: sticky;
	top: 0;
	transition: 0.2s;
	z-index: 30;
}
.mainheader h1, .mainheader h1 a {
	color: #69c; /* #369; */
	margin-bottom: 0px;
}
.mainheader h1 a:hover {
	color: aqua; 
}
.mainheader h2 {
	line-height: 1.9;
	color: #69c; /* #369; */
	margin-bottom: 0px;
}


a 	{
	color: #066; 
	font-weight: 600;
	text-decoration: none;
}
a:hover {
	color:#61C;
}


/*p, h1, h2, h3 {  
	overflow: hidden;
}
*/
p {  
	font-family: kinesis-pro-3, Times, "Times New Roman", serif; 
	font-family: kandal, Times, "Times New Roman", serif; 
	font-family: kallisto, HelveticaNeue, "Helvetica Neue", Helvetica, Arial, sans-serif; 
	font-family: fira-sans, HelveticaNeue, "Helvetica Neue", Helvetica, Arial, sans-serif;  
	
	font-style: normal;
	font-weight: 300;
	font-size: 16px;
	color: black; 
	line-height: 1.6;
	margin-top: 0;
	text-decoration: none;
} 
h1 {  
	font-family: kallisto, HelveticaNeue, "Helvetica Neue", Helvetica, Arial, sans-serif; 
	font-style: italic;
	font-weight: 900;
	font-size: 40px;
	line-height: 120%;
	color: #069; 
	padding-top: 5px;
	padding-bottom: 0px;
	margin-top: 5px;
	margin-bottom: 12px;
	} 
h2 {  
	font-family: kallisto, HelveticaNeue, "Helvetica Neue", Helvetica, Arial, sans-serif; 
	font-style: italic;
	font-weight: 600;
	font-size: 28px;
	line-height: 150%;
	color: #06c; 
	padding-top: 3px;
	padding-bottom: 0px;
	margin-top: 3px;
	margin-bottom: 8px;
	} 
h3 {
    font-family: kinesis-pro-3, Times, "Times New Roman", serif;
    font-family: kallisto, HelveticaNeue, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-style: italic;
    font-weight: 600;
    font-size: 22px;
    line-height: 150%;
	color: #036; 
    margin-bottom: 8px;
	} 

.legende {  
	font-family: fira-sans, HelveticaNeue, "Helvetica Neue", Helvetica, Arial, sans-serif;  
	font-style: normal;
	font-weight: 300;
	font-size: 10px;
	color: black; 
	line-height: 1.6;
	margin-top: 0;
	} 

div > ul {
	margin: 0;
	padding: 0;
}
div li {
	list-style: square;
	margin: 0;
	margin-left: 30px;
	padding: 0;
	width: 100%; 
	font-family: fira-sans, HelveticaNeue, "Helvetica Neue", Helvetica, Arial, sans-serif;  
	font-style: normal;
	font-weight: 500;
	font-size: 14px;
	color: #069; 
	line-height: 1.6;
}