.mgWindowBackgroundlayer {
		background-color: rgba(0,0,0,0.75);
		position: fixed;		/* ausgedacht hatte ich mir "fixed", aber "absolute" ist bei gorssen Fenstern scrollbar - der Grund fuer "absolute" erschliesst sich mir aktuell nicht mehr - falls doch "absolute", dann vielleicht height 1000% setzen fuer gescrollten Inhalt */
		z-index: 9999;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		cursor: pointer;
		backdrop-filter: blur(4px);
}

.mgWindowBackgroundElement {
		/* weil die CSS-Eigenschaft backdrop-filter noch nicht von allen Browser unterstuetzt wird, setzt das Script alle Elemente der obersten Ebene unter dem Fenster (alle direkten Unter-Elemente (ohne Kind-Elemente) von body ) */
		filter: blur(5px) grayscale(1);
		overflow: hidden;		/* das Blurring ragt aus dem Element heraus und erzeugt Scroll-Balken, die wir nicht benoetigen */
}

		.mgWindow {
				position: fixed;		/* ausgedacht hatte ich mir "fixed", aber bei "absolute" kann bei Fenstern groesser als der Bildschirm noch scrollen --> das mache ich jetzt per Javascript, weil dann die top-Position noch gesetzt werden muss */
				z-index: 9999;


				overflow: auto;

				background-color: white;
				/* border: 1px solid #000000;   wirkt auf Grund des ausgegrauten Hintergrunds zuviel  */


				display: flex;
				flex-direction: column;
				/* Der Sinn von display: flex mit flex-direction wird erkennbar, wenn beide Boxen .mgWindowTitle und .mgWindowBody vorhanden sind. Dann wuerde wegen .mgWindowBody height 100% ein zusaetzlicher stoerender Scrollbalken entstehen */

		}
				.mgWindowTitle {
						cursor: move;
						user-select: none;
						padding: 1em;
						font-weight: bold;
				}
				.mgWindowBody {
						height: 100%;
						overflow: auto;
				}
				iframe.mgWindowBody {
						width: 100%;
						height: 100%;
						display: block;
						box-sizing: border-box;
						border: none;
				}
				.mgWindowClose {
						position: absolute;
						right: 0;
						top: 0;
						cursor: pointer;
						margin: 15px;
						font-size: 25px;
						line-height: 15px;
						width: 15px;
						text-align: center;
						background-color: #ffffff;
				}
				.mgWindowClose:hover {
						font-weight: bold;
				}

				.btnOK {
						margin-top: 1em;
						text-align: right;
				}
						.btnOK > * {
								display: inline-block;
								background-color: #357dbc;
								color: #ffffff;
								padding-top: 0.5em;
								padding-bottom: 0.5em;
								padding-left: 2em;
								padding-right: 2em;
								text-decoration: none;
								cursor: pointer;
						}
				.windowText {
						margin-top: 1em;
						margin-bottom: 1em;
				}
						.windowText input {
								width: 100%;
								box-sizing: border-box;
						}

		.mgWindowImageOnly {
				display: block;
				width: 100%;
		}

@media (max-width: 500px) {
		.mgWindowClose {
				font-size: 35px;
				line-height: 25px;
				width: 25px;
		}
}


/* fuer confirmMG() */
.windowButton {
		margin-top: 1em;
		text-align: right;
}
		.windowButton > * {
				display: inline-block;
				padding-top: 0.5em;
				padding-bottom: 0.5em;
				padding-left: 2em;
				padding-right: 2em;
				text-decoration: none;
				cursor: pointer;
				margin-left: 1em;		/* fuer mehrere Button */
		}