﻿/*body für Hauptframe am desktop*/
body {
	background-image: url('images/GfZahlen.png');
	background-color: var(--DesktopBackgrColor);
	background-blend-mode: overlay;
	margin-top: 2;
	margin-bottom: 2;
	margin-left: 20;
	margin-right: 20;
}
body.noimage
{
	background-image: none;
	background-color: white;
}
div.Rahmen-MENU {
	width: 100%;
	min-width:600px;/*zu schmaler Rahmen bricht Menü zu oft um  */
	max-width:1300px;/*zu breiter Rahmen verkleinert Menü stark beim auszoomen*/
	margin:auto;/*sorgt für die Zentrierung des DIV-blocks, wenn 100%>900px*/
	padding:0.2em;
}
div.Rahmen-EINE-Kachel {
	width: 100%;
	min-width:0px;/*kein min-width, sonst könnte man nicht zoomen*/
	max-width:610px;/* 1x max-width der Kachel = 1 Block*/
	margin-left:auto; margin-right:auto; /*sorgt für die Zentrierung des DIV-blocks, wenn 100%>max-width*/
	margin-top: 1em; margin-bottom: 1em; 
}
div.Rahmen-ZWEI-Kacheln {
	width: 100%;
	min-width:0px;/*kein min-width, sonst könnte man nicht zoomen*/
	max-width:1300px;/* 2x max-width der Kachel = 2 Blöcke*/
	margin-left:auto; margin-right:auto; /*sorgt für die Zentrierung des DIV-blocks, wenn 100%>max-width*/
	margin-top: 1em; margin-bottom: 1em; 
}
div.Rahmen-MAX {
	width: 100%;
	min-width:0px;/*kein min-width, sonst könnte man nicht zoomen*/
	max-width:1800px;/* 2x max-width der Kachel = 2 Blöcke*/
	/* margin-left:auto; margin-right:auto;  */
	margin-left:auto; margin-right:auto; /*sorgt für die Zentrierung des DIV-blocks, wenn 100%>max-width*/
	margin-top: 1em; margin-bottom: 1em; 
}

div.kachel0, div.kachel-doppelt, div.kachel1, div.kachel1-3, div.kachel1-5, div.kachel1-8, div.kachel2, div.kachel2-5, div.kachel3, div.kachel3-5,div.kachel4 {
	float: left; /*float sortiert die Blöcke nebeneinander oder untereinander*/
	width: 98%; /*98+1+1margin=100%*/
	min-width: 530px; /*zu schmale Kachel quetscht Text nach unten*/
	max-width: 624px; /*48% von 1300 */
	box-sizing: border-box; /*padding geht nach innen*/
	/*padding: 1.3em 1.7em 1.7em 1.7em;*/
	padding: 1.8em 2.3em 2.3em 2.3em;
	margin-top: 10px;/*0.8em; */
	margin-bottom: 30px;/*0.5em;*/
	margin-right: 2%;/*2%;*/
	margin-left: 2%;/*2%;*/
	background-color: var(--KachelBackgrColor);
/* box-shadow offset-x | offset-y | blur-radius | color  */
	box-shadow: 0.5em 1em 1em #BBB; /*#DDD 1 3 3*/
	border-radius: 0; /*10px;*/
}

/*breiter Block mit automatischer Höhe, Breite kann stärker variieren*/
div.kachel0 {
	min-width: 350px; /*zu schmale Kachel quetscht Text nach unten*/
	max-width: 680px; /*zu breite Kachel macht lange Zeilen und leere Flächen*/
}
/*Doppel-breiter Block mit automatischer Höhe*/
div.kachel-doppelt {
	width: 96%;/*96*/
	max-width: 1274px; /*98% von 1300px*/
	padding: 2em; /*breiterer Rand sieht besser aus*/
}

/* diese Blöcke sind haben eine festgelegte höhe und eine halbierte Breite für den 2-spaltigen Kachelbereich */
div.kachel1, div.kachel1-3, div.kachel1-5, div.kachel1-8, div.kachel2, div.kachel2-5, div.kachel3, div.kachel3-5,div.kachel4 {
	width: 46%;/*46*/
	max-height: 0px;
}
div.kachel1 {
	min-height: 140px; /*mit Rand 160 >> 180 */
}
div.kachel1-3 {
	min-height: 185px; /*mit margin 200 >> 225- 2xkachel1-3 = kachel 2-5 */
}
div.kachel1-5 {
	min-height: 230px; /*mit margin 240 >> 270*/
}
div.kachel1-8 {
	min-height: 275px; /*mit margin 275 >> 305*/
}
div.kachel2 {
	min-height: 320px; /*mit Rand 320 >> 360*/
}
div.kachel2-5 {
	min-height: 410px; /*mit margin 400 >> 450*/
}
div.kachel3 {
	min-height: 500px; /*mit margin 480 >> 540*/
}
div.kachel3-5 {
	min-height: 535px;
}
div.kachel4 {
	min-height: 618px;
}

/*extrabreit unbenutzt*/
div.kachel-extrabreit {
	min-width: 800px; 
	width: 1000px;
	max-width: 95%; 
	padding: 1em;
	margin-top: 1em;
	margin-bottom: 1em;
	margin-right: 1%;
	margin-left: 1%;
	background-color: var(--KachelBackgrColor);
	box-shadow: 1px 3px 3px #CCC;
	border-radius: 10px;
	float: left;
	height: 700px;
}
/*extraschmal unbenutzt*/
div.kachel-extraschmal {
	min-width: 400px; 
	width: 500px; 
	max-width: 50%; 
	padding: 1em;
	margin-top: 1em;
	margin-bottom: 1em;
	margin-right: 1%;
	margin-left: 1%;
	background-color: var(--KachelBackgrColor);
	box-shadow: 1px 3px 3px #CCC;
	border-radius: 10px;
	float: left;
	height: 700px;
}
div.kachel0breite {
	float: left; /*float sortiert die Blöcke nebeneinander oder untereinander*/
	width: 98%; /*98+1+1margin=100%*/
	box-sizing: border-box; /*padding geht nach innen*/
	/* padding: 1em; */
	padding: 0;
	min-width: 350px; /*zu schmale Kachel quetscht Text nach unten*/
	max-width: 680px; /*zu breite Kachel macht lange Zeilen und leere Flächen*/
}
