/* -- = Variable :root = gilt überall  - wird so verwendet:  var(--Variablenname)*/
:root {
	--DesktopBackgrColor: rgba(216, 216, 216, 1);/*overlay !*/
 	--KachelBackgrColor: rgba(253, 253, 253, 1); /*heller als page*/
/* 	--KachelBackgrColor: rgba(255, 255, 255, 0.9); /*heller als page*/
	--MobileBackgrColor: rgb(248, 248, 248);
	--MobileKachelBackgrColor: rgb(238,238,238); /*dunkler als page*/
	--WarnungBackgrColor: rgb(240, 150, 150);
	--TextColor: rgb(90, 90, 90); /*mildes schwarz*/
	--LinkColor: rgb(60,130,200); /*hellblau*/
	--LinkColorIntensiv:  rgb(30,100,200); /*blau*/
	--LinkHoverColor: rgb(235,0,0); /*mittelrot*/
	--MenuColor: rgb(90, 90, 90);
	--MenuHoverColor:  black; 
	--SubMenuColor: black; 
	--SubMenuHoverColor: red; 
/*	--MenuBodyBackgrColor: rgba(180, 187, 195, 0.32); Menüfarbe: entsättigtes Blau, 68% transparent = hell (Basishintergrund weiss) ersetzt durch linear-gradient*/
	--UntermenuBackgroundColor: rgb(244, 245, 247);
	--MobilemenuHeaderBackgrColor: rgb(160, 210, 244);  /*blau*/	
	--MobilemenuBodyBackgrColor: rgb(230, 232, 235); /*hellgrau*/
	--MobilemenuBackgrColor: rgb(200, 202, 205); /*blaugrau dunkel*/
	--FusszeileBackgrColor:  rgba(245, 245, 245, 0.7);/* leicht entsättigtes weiss, 30% transparent*/
}
body {
	color: var(--TextColor);
	font-family: Arial, Helvetica, sans-serif;
	font-size: 17px;
	font-weight:normal;
	line-height: 1.3em; 
	user-select: None; /*verhindert unbeabsichtigte Markierungen bei ungenauem Anklicken*/
}
.gross { 
	font-size:1.1em; 
}
/*body für Hauptframe wird in peridata_desktop.css und peridata_mobile.css definiert*/
/*body für Menuframe am desktop*/
.BodyMenu {
	background-image: linear-gradient(rgb(140, 200, 244), rgb(240, 240, 235)); /*zweiter=unterer Wert=Farbe des Backgroundimage GfZahlen.png - linear-gradient funktioniert nicht mit Variablen !*/
	background-blend-mode: normal;
	margin-left: 10;
	margin-top: 7;	
}
/*body für Menuframe am mobile device*/
.BodyMobileMenu {
	background-image: none;
	background-color: var(--MobilemenuHeaderBackgrColor);
	background-blend-mode: normal;
}
.liftup-effekt {
	transition: 0.3s ease-in-out;
}
.liftup-effekt:hover {
	transform: scale(1.3);
	transition: 0.3s ease-in-out;
}
.liftup-effekt-2 {
	transition: 0.3s ease-in-out;
}
.liftup-effekt-2:hover {
	transform: scale(2);
	transition: 0.3s ease-in-out;
}
.liftup-effekt-11 {
	transition: 0.6s ease-in-out;
}
.liftup-effekt-11:hover {
	transform: scale(1.1);
	transition: 0.6s ease-in-out;
}
.kommentar
{
	font-size: 11px; /* alt 13 px small;*/
	font-style: italic;
}
.kommentarrel
{
	font-size: 0.9em; /*85% der aktuellen Schriftgröße*/
	font-style: italic;
}
a {
	text-decoration: underline;
	color: var(--LinkColor);
}
a:active {
}
a:visited {
}
a:hover {
	/*font-style: italic;Wortbreite ändert sich, Umbruch ändert sich, klicken wird verhindert ! */
	color: var(--LinkHoverColor);
	font-weight: bold;
}
a:link {
}
a.noline  {
	text-decoration: none; 
}
a.noline:hover {
	color: var(--LinkHoverColor);
}
a.hidden-link {
	text-decoration: none; 
	font-style: normal;
	font-weight: normal;	
	color: var(--TextColor);
}
a.hidden-link-hover-red {
	text-decoration:none; 
	font-style: normal;
	font-weight: normal;	
	color: var(--TextColor);
}
a.hidden-link-hover-red:hover {
	text-decoration:none; 
	font-style: normal;
	font-weight: normal;	
	color: red;
}
p {
	display: block;
	margin: 0.3em 0 0.3em 0;
	padding: 0 0 0 0;
}
p.abstand0 {
	margin: 0 0 0 0;
}
p.abstandplus {
	margin: 16 0 5 0;
}
h-link {
	display: block; /*margin/padding funktionieren nicht bei inline=default*/
	margin: 0;
	padding: 0;
	padding-bottom: 0.2em;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 22px;
	font-weight: bold;
	color: var(--TextColor);
	left: 0;
	text-decoration: none; 
}
/*hover ist kein textstyle, sondern Effekt, muss direkt deklariert werden*/
h-link:hover {
	color: var(--LinkHoverColor);
}
h1 {
	display: block;
	margin-top: 0;
	margin-bottom: 0.3em;
	font-size: 27px;
	line-height: 34px;
	font-weight: bold;
	color: var(--TextColor);

}
h2 {
	display: block;
	margin-top: 0.2em;
	margin-bottom: 0.5em;
	font-size: 24px;
	line-height: 30px;
	font-weight: bold;
	color: var(--TextColor);
}
h3 {
	display: block;
	margin-top: 0.2em;
	margin-bottom: 0.4em;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 22px;
	line-height: 27px;
	font-weight: bold;
	color: var(--TextColor);
	left: 0;
}
h4 {
	display: block;
	margin-top: 0.2em;
	margin-bottom: 0.1em;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 18px;
	line-height: 23px;
	font-weight: bold;
	color: var(--TextColor);
}
h5 {
	display: block;
	margin-bottom: 0;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 17px;
	font-weight: normal;
	color: var(--TextColor);
}
h6 {
	display: block;
	margin: 0 0 0 0;
	padding: 0 0 0 0;
	font-size: 14p;
	color: var(--TextColor);	
}
strong {
	font-weight: bold;
}
ul {
	list-style-position: outside;
	list-style: disc outside;
	margin-top: 0;
    margin-left: 1.7em;
    padding-left: 0em;/*margin+padding = Abstand Rand >> MitteBullet*/
	list-style-type: square;
	/* list-style-image: url("BulletGrauesQuadrat.png"); */
}
li {
	margin-top: 0.5em; 
	margin-bottom: 0.5em;/*vertikal zwischen den Listenelementen*/
	max-width: 30em;/*Liste nicht zu breit*/
}

img {
	border-style: none;
	border-color: inherit;
	border-width: 0;
	padding: 3; 
	margin: 0;
/* padding ist link-sensibel, margin nicht !  */
}
img.bildzentriert {
	display:block; margin-left:auto; margin-right:auto;
}
img.linkbuttonheader {
	vertical-align:middle; 
	width:27; 
	min-width:10; 
	margin:0;
	margin-bottom:3;
	padding:0;
	border:0;
	transition: 0.3s ease-in-out;
}
img.linkbuttonheader:hover {
	transform: scale(1.3);
	transition: 0.3s ease-in-out;
}
img.linkbuttontext {
	vertical-align:top; 
	width:20; 
	min-width:10; 
	margin:0;
	padding:0;
	border:0;
}
img.linkbuttontext:hover {
	transform: scale(1.3);
	transition: 0.3s ease-in-out;
}
table {
	border-width: 0;
	font-size: 1em;
}
td {
	vertical-align: top;
}
div.seitezentriert {
	/* wird für Fusszeile benötigt, macht das gleiche wie gridzentriert (legacy) */
	/* oder man setzt das vor die Fusszeile: <div style="clear: both;"></div>*/
	display: grid;
	justify-content: center;
	align-items: center;
	
	/* margin: 0; */
	/* margin-left: 5; */
	/* margin-right: 5; */
	/* padding: 0; */
} 
div.gridzentriert {
	display: grid;
	justify-content: center;
	align-items: center;
}
div.lesbar {
	width: 95%;
	min-width: 15em;
	max-width: 50em;
	margin: 0.5em;
}
div.div-fusszeile {
	clear:both; /*beendet float-Anordnung, Div kommt an den Anfang*/
	width: 100%;
	margin-top: 20;
	background-color: var(--FusszeileBackgrColor);
}
ul.mobilemenu {
	/*Hauptmenü*/
	margin: 0;
	padding: 0;
	list-style: none; 
/*	margin: Rand um jedes Listen-Item -  Umgebungsfarbe
	padding: Innen-Abstand um jedes Listen-Item - Elementfarbe
	list-style: Nummerierung*/
}
ul.mobilemenu li {
	/*Hauptmenü listenelement*/
	background-color: var(--MobilemenuBackgrColor);
	margin: 0;
	xpadding-top: 1.5%;
	xpadding-bottom: 1.5%;
	padding-left: 20;
	padding-right: 20;
	border: thick var(--MobilemenuBodyBackgrColor) solid;
	border-radius: 20;
	list-style-image: none;
	list-style-position: outside;
	list-style-type: none;
	font-style: normal;
	font-weight: bold;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 32px; /*sollte man definieren*/
	text-align: center;
	color: black;
	line-height: 2.5;
	max-width: none;
}
ul.mobilemenu a {
	/*Hauptmenü-Link (direkter Link ohne Untermenü)*/
	color: black;  /*Hauptmenüfarbe statt Link-Farbe*/
	text-decoration: none; /*weitere definitionen*/
}
ul.mobilemenu a:hover {
	/*Hauptmenü-Link: Hovern (direkter Link)*/
	color: red;
}
ul.mobilemenu:hover .mobileuntermenu li {
	/*Hauptmenü: Hovern (items mit Untermenü) >> Effekte im Untermenü li*/
	color: red;
	font-size: x-large; /*von 0 auf x-large*/
	transition: all 0.5s;
}
ul.mobileuntermenu {
	/*Untermenü*/
	display: block; 
	position: relative;
	margin: 0;
	padding: 0;
	
}
ul.mobileuntermenu li {
	/*Untermenü li-element*/
	background-color: var(--MobilemenuBodyBackgrColor);
	font-size: 0;/*basis-Einstellung: unsichtbar*/
	font-weight: normal;
	font-style: italic;
	line-height: 1.5; /*bestimmt auch die Höhe, in der Klick-Empfindlichkeit besteht*/
	border: 0;
	transition: all 0.7s ease-in; /*langsamer als hover wegen Verschiebung der Menübalken > Fehlklick */
}
ul.mobileuntermenu li a {
	/*Untermenü-Link (alle items)*/ 
	text-decoration: none;
	padding-right: 10%;
	padding-left: 10%;
}
ul.mobileuntermenu li a:hover {
	color: red;
}
ul.mobileuntermenu li a:active {
	background-color: var(--MobilemenuBackgrColor); 
}
.menu {
	/*Hauptmenü*/
	position: relative;
	display: inline-block;
	border: 0;
	margin-top: 0;
	margin-bottom: 2;
	margin-left: 8;
	margin-right: 0;
	padding: 0;
	padding-bottom: 1em; /*vergrößert bei 2-zeiligem Menü (schmales Fenster) den Zeilenabstand*/
	vertical-align: top;/*middle;*/
	text-align: left;
	font-weight: bold;
	font-size: 30px;
	font-style: normal;
	font-family: Arial narrow, sans-serif;
	color:  var(--MenuColor); /*Hauptmenüfarbe dunkelgrau*/
	text-decoration: none;
	line-height: 1.2; /*bestimmt die Oberkante des Menüs und des Untermenüs, unter 1 = Überlappung*/

}
.menu a {
	/*Hauptmenü-Link (direkter Link ohne Untermenü - nur 1 item: DOWNLOAD)*/
	color: var(--MenuColor);  /*Hauptmenüfarbe statt Link-Farbe*/
	text-decoration: none;
	padding-bottom: 1em; /*Reaktionsbereich nach unten erweitern*/
}
.menu a:hover {
	/*Hauptmenü-Link: Hovern (direkter Link)*/
	color: red;
	font-style: normal;
}
.menu:hover {
	/*Hauptmenü: Hovern (über normale Items im Hauptmenü, die ein Untermenü öffnen)*/
	color:  var(--MenuHoverColor); /*ändert von grau auf schwarz*/
}

.menu .untermenu  {
	display: none; /*zunächst unsichtbar*/
}
.menu:hover .untermenu  {
	/*Hauptmenü: Hovern >> Effekte im Untermenü*/
	display: block; /*display macht es sichtbar*/
    animation: fade-in 0.8s;
}
@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.untermenu {
	/*Untermenü*/
	position: absolute;
	z-index: 3; /*vor dem Hauptmenü*/
	width: auto; 
	background-color: var(--UntermenuBackgroundColor);
	color: var(--SubMenuColor); /*schwarz= Vorauswahl*/	
	line-height: 1.35;
	border-radius: 0.2em;
	margin-top:0.1em;
	padding-top:0.1em;
	padding-bottom:0.1em;
}
.untermenu a {
	/*Untermenü-Link (alle items)*/ 
	font-size: large;
	color: var(--SubMenuColor); /*schwarz= Vorauswahl*/	
	text-decoration: none;
	padding-bottom:0;/*sonst wird irgendwie der Text nach unten vergrößert, was den Bereich überschreitet und einen Rollbalken verlangt*/ 
}
.untermenu a:hover {
	/*Untermenü-Link: hovern*/ 
	color: var(--SubMenuHoverColor); /*red*/	
	transition: color 0.1s ease-out; 
}
.menu-imageitem {
/* Hauptmenü-image (Flagge=Sprache)*/
	display: inline-block;
	margin-left: 6;
	margin-top: 0;
	margin-bottom: 0;
	margin-right: 0;
	vertical-align: top;
}