:root{
	--TastSynbCol: #044935;
}
body {
	font-family: Arial, Tahoma, sans-serif;
	height: 100vh;
	padding: 4mm;
	margin: 0;
	background-color: #4b6455;
	background-image: url(../Hintergrundbild_005.png);
	background-repeat: no-repeat;
	background-size: auto 219mm;
	background-position: 218mm 1.5mm;
	background-attachment: fixed;
	background-blend-mode: lighten;
	/*outline: 2px dashed yellow;*/
}
#SEITE {
	box-sizing: border-box;
	position: relative;
	width: 210mm;
	height: auto;
	min-height: 297mm;
	padding: 8mm 4mm 2mm 12mm;
	background-color: white;
	border: 1px solid black;
	overflow-y: scroll;
}
#seitenKopf {
	/*position: relative;*/
	display: grid;
	grid-template-columns: 40% 1fr;
	/*grid-template-columns: minmax(min-content, 50%) 1fr;*/
	grid-auto-rows: auto;
	grid-gap: 0 3mm;
	/*height: auto;*/
	/*min-height: 10mm;*/
	width: 100%;
	border-bottom: 0.5mm solid black;
	/*padding: 1mm;*/
	margin-bottom: 3mm;
}
#seitenFussText{
	position: absolute;
	bottom: 2mm;
	left: 5mm;
	font-size: 4.5mm;
}
#LEGENDE_DIV {			
	position: fixed;
	top: 2.75mm;
	left: 215mm;
	width: 115mm;
	height: 99svh;
	min-height: 195mm;
	max-height: 297mm;
	/*padding: 15mm; wirkungslos bei pos. absol.*/
	/*margin-left: 5svw;*/
	user-select: none;
	pointer-events: none;
	/*border: 2px dotted yellow;*/
}
.klickbar{
	pointer-events: auto;
}
.btIMG {
	/*Kästchen*/
	position: relative;
	height: 5mm;
	right: -1mm;
}
#NOTENLEGENDE {
	position: absolute;
	display: none;
	top: 24mm;
	left: 7mm;
	width: 96mm;
	height: 161mm;
	padding-left: 4mm;
	border: 2px solid #eb6606;
	border-radius: 1.5mm;
	background-color: #dbe1bc;
}
.InstrumentLeg{
	display: none;
	position: absolute;
	top: 25mm;
	height: 72mm;
	left: 32mm;
	width: 65mm;
	/*background-color: #9caa8f;*/
	background-image: linear-gradient(#ccd3a7, transparent);
	border: 1px solid darkred;
	border-bottom: none;
	border-right: none;
}
.InstrumTab{
	position: absolute;
	left: 9mm;
	height: 5.5mm;
	width: 21.5mm;
	font-size: 5mm;
	padding: 0 .5mm 1.25mm 1mm;
	border: 1px solid darkred;
	color: #500707;
	border-right: none;
	/*border-radius: 1.5mm;*/
	border-top-left-radius: 1.5mm;
	border-bottom-left-radius: 1.5mm;
	/*outline: 1px solid #b32c2c;*/
	background-color: #ccd3a7;
	z-index: 1;
}
.InstrumTabPassiv{
	position: absolute;
	left: 3.5mm;
	height: 5.5mm;
	width: 21mm;
	font-size: 5mm;
	padding: 0 .5mm 1.25mm 1mm;
	color: #222;
}
.legZeichMantel{
	position: absolute;
	display: flex;
	justify-content: center;
	top: 6mm;
	width: 7.5mm;
	padding: 1mm;
	height: 11mm;
	pointer-events: auto;
	/*outline: 2px dotted green;*/
}
.legKopfZeichMantel{
	position: relative;
	top: 6mm;
	width: 8mm;
	height: 3.5mm;
	padding: .5mm;
	/*outline: 1px solid grey;*/
}

.tasteLeg{	/*Tastensymbol*/
	position: absolute;
	bottom: .4mm;
	padding: .5mm;
	width: 3.5mm;
	height: 3.5mm;
	font-size: 4.5mm;
	font-weight: bold;
	display: flex;
	right: .45mm;
	justify-content: center;
	align-items: center;
	color: var(--TastSynbCol);
	border: 1px solid var(--TastSynbCol);
	border-radius: .6mm;
}
.leerTasteLeg{	/*Tastensymbol Leertaste*/
	position: absolute;
	top: 2.5mm;
	width: 4.75mm;
	height: 1.5mm;
	left: 4mm;
	color: var(--TastSynbCol);
	border: .5mm solid var(--TastSynbCol);
	border-right: none;
	border-bottom-left-radius: .5mm;
	border-top-left-radius: .5mm;
}
.keyboard{	/*Rahmen links+unten*/
	position: absolute;
	top: 0;
	left: .2mm;
	width: 9.5mm;
	height: 5mm;
	border-bottom: .45mm solid var(--TastSynbCol);
	border-left: .45mm solid var(--TastSynbCol);
	border-bottom-left-radius: 4px;
}
.keybErklTxt{
	position: absolute;
	left: 10mm;
	font-size: 4.5mm;
	text-wrap: nowrap;
	color: var(--TastSynbCol);
}
.UMS-Taste, .STR-Taste{
	position: absolute;
	/*top: 0;*/
	left: .55mm;
	width: 2.5mm;
	height: 1.5mm;
	border: .5mm solid var(--TastSynbCol);
	border-radius: .5mm;
	/*background-color: darkred;*/
}
.UMS-Taste{
	top: 0;
}
.STR-Taste{
	top: 2.5mm;
}
/*.tastenSymbol{
	font-size: 6mm;
	font-weight: bold;
}*/
#notenZeileLeg {
	position: absolute;
	top: 11mm;
	left: 7mm;
	height: 7.5mm;
	width: 19.5mm;
	display: none;
}
#textFeldPattLeg {
	position: absolute;
	top: 11mm;
	left: 31.5mm;
	height: 7.5mm;
	width: 19.5mm;
	display: none;
}
.versatz {	/*Flam, Triolen, Zwischenschr,*/
	position: absolute;
	width: 15mm;
	height: 8mm;
	padding: 1mm;
	border: 0.5mm solid gray;
}
.tippFeld {
	position: absolute;
	height: 16mm;
	padding: 2mm;
	font-size: 5mm;
	-webkit-hyphens: auto;
	hyphens: auto;	
	background-color: #f2fcc6;
	border: 2px solid #bb0707;
	border-radius: 1.5mm;
	visibility: hidden;
}
.tippFStart{
	top: 24mm; 
	left: 7mm;
	width: 96mm;
	/*display: none;*/
}
.tippFNoten{
	bottom: 1.5mm;
	left: 1.5mm;
	width: 92mm;
}

#TEXTBEREICH_LEG {
	position: absolute;
	display: none;
	top: 24mm;
	left: 7mm;
	width: 90mm;
	height: 100mm;
	font-size: 4.5mm;
	padding: 5mm;
	border: 2px solid #298c7c;
	border-radius: 1.5mm;
	background-color: #dbe1bc;
}
.buttonLeg{
	position: absolute;
	padding: .5mm .5mm 1.25mm 1mm;
	background-color: #dbe1bc;
	border: 1px solid #333;
	border-radius: 1.5mm;
	box-shadow: 1px 1px 1px #AAA;
}
.buttonLeg:hover {
	cursor: pointer;
	border: 1px solid #000;
	box-shadow: 1px 1px 3px #555 inset;
	background-color: #dbe1bc;
	color: black;
}
.flach{
	width: 44mm;
	height: 5.5mm;
	font-size: 5.5mm;
	padding: 1mm 0 1.5mm 2mm;
	/*background-color: #dbe1bc90;*/
}
.hoch{
	width: 18mm;
	height: 8.8mm;
	padding: 1mm 0 1.5mm 2mm;
}
.FlTrZw{
	top: 6mm; 
	height: 7mm;
	padding: 1mm;
}
.schriftGrButton {
	display: flex;
	justify-content: flex-start;
	align-items: center;
}
/*[contenteditable] {
	caret-color: red;
	height: auto;
	outline: 1mm solid lightgray;
}
[contenteditable]:focus {
	outline: 3px solid #3d78b2;
	background-color: white;
	user-select: text;
}*/
[contenteditable]::selection {
	color: black;
	background-color: #9bb2d9;
}
/*:not([contenteditable]){
    user-select: none;   
}*/
.seitenWechsel {
	position: relative;
	text-align: right;
	width: 100%;
	border-top: 0.5mm solid black;
	border-bottom: 0.5mm solid black;
	padding: 1mm;
	margin-bottom: 0;
	margin-top: 5mm;
}
.seitenWechselOben {
	position: relative;
	font-size: 5.5mm;
	text-align: left;
	break-before: page;
}
#titelText {
	grid-column: 1/2;	
	grid-row: 1/2;
	/*white-space: nowrap;*/
	bottom: 1mm;
	left: 1mm;
	/*width: 70mm;*/
	/*min-width: 20mm;*/
	padding: 0;
	margin: 0;
	font-size: 8mm;
	overflow: hidden;
	
}
#titelTextAnm {
	grid-column: 2/3;	
	grid-row: 1/2;
	/*white-space: nowrap;*/
	bottom: 1mm;
	/*left: 73mm;*/
	/*width: 123mm;*/
	padding: 0;
	margin: 0;
	font-size: 4.5mm;
	/*-webkit-hyphens: auto;
	hyphens: auto;*/
	overflow: hidden;
	resize: none;
}
[contentEditable=true]:empty::before{
	content: attr(placeholder);
	pointer-events: none;
	display: block; /* For Firefox */
	color: #4d867e;
}
input::placeholder {
 	color:  #4d867e;	/* Firefox */
}
.pattern {
	position: relative;
	display: grid;
  	grid-template-columns: 47mm auto;;
	grid-auto-rows: minmax(16mm, auto);
	padding: 1mm;
	margin-bottom: 2mm;
	border-bottom: 0.55mm dotted black;
}
.pattern:focus-within {
	background-color: #c2c6ad60;
	/*outline: 0.55mm solid darkred;*/
}
.spalteLinks {
	grid-column: 1/2;	
	grid-row: 1/2;
	/*height: 100%;*/
	/*border: dotted 2px red;*/
}
.spalteRechts {
	grid-column: 2/3;	
	grid-row: 1/2;
	/*height: 100%;*/
	/*border: dotted 2px green;*/
}
.pattName {
	position: relative;
	text-align: right;
	width: 92%;
	overflow: hidden;
	padding: 1mm;
	font-family: Arial, Tahoma, sans-serif;
	font-size: 6mm;
	resize: none;
	background-color: transparent;
}
.pattAnm {
	position: relative;
	top: 0;
	width: 92%;
	font-size: 4.5mm;
	padding: 1mm;
	padding-top: 0;
	margin-top: 1.5mm;
	text-align: right;
	overflow: visible;
	background-color: transparent;
}
#LOESCH_DIV_LEG{
	position: absolute;
	right: 5mm;
	top: 15mm;
	width: 14mm;
	height: 6mm;
}
.patternLoesch, .zeileLoesch {
	position: absolute;
	top: 2px;
	right: 3px;
	width: 16px; 
	height: 16px;
	padding: .5mm;
	z-index: 1;
	border: 0.5mm solid transparent;
}
.patternLoesch:hover, .zeileLoesch:hover {
	cursor: pointer;
	/*border: 0.5mm solid #f2fcc6;*/
	background-color: #e1e1e1;
}
.kopfText {	/*input*/
	position: absolute;
	font-size: 4mm;
	top: -1.2mm;
	height: auto;
	padding: 0;
	width: 30mm;
	background-color: transparent;
}

#zeilenKlammerLeg {	/*für Legende*/
	position: absolute;
	width: 2.5mm;
	border: 0.75mm solid black;
	border-left: 0;
	height: 13mm;
	border-top-right-radius: 1.5mm;
	border-bottom-right-radius: 1.5mm;
}
.zeilenKlammer {	/*für Notenzeile*/
	position: absolute;
	top: 0;
	height: 100%;
	width: 2mm;
	display: flex;
	align-content: center;
	border: 0.7mm solid black;
	border-left: 0;
	border-top-right-radius: 1.5mm;
	border-bottom-right-radius: 1.5mm;
}
.klammerX {
	position: absolute;
	/*z-index: 2;*/
	right: 2px;
	top: 1px;
	font-size: 5mm;
	font-weight: bold;
	line-height: 0.65;
	color: red;
	/*padding: 0;*/
	overflow: hidden;
	cursor: pointer;
	/*background-color: yellow;*/
	visibility: hidden;
}
.klammerPfeil {
	position: absolute;
	/*z-index: 2;*/
	right: 1px;
	bottom: 0;
	font-size: 9mm;
	line-height: 0.65;
	color: green;
	/*padding: 0;*/
	overflow: hidden;
	cursor: pointer;
	/*background-color: orange;*/
	visibility: hidden;
}
.klammerText {	/*input*/
	position: absolute;
	top: 11.5mm;
	left: 1.5mm;
	width: 12mm;
	height: 8mm;
	font-size: 6mm;
	text-align: center;
	transform: rotate(-90deg);
	transform-origin: 0 0;
	cursor: vertical-text;
	background-color: transparent;
}

.notenZeile {
	position: relative;
	top: 0;
	left: 0;
	width: 38.5mm;
	height: 12mm;
	padding: 0;
	/*margin: 3px;*/
	caret-color: white;
	background-color: transparent;
	outline: 0 dotted red;
	border-width: 2px;
	border-radius: 1mm;
	border-style: dotted;
	border-color: #BBB;
	user-select: none;
}
.notenZeile:focus{
	border: 2px solid #eb6606;
}

.textFeld, .textFeldMini{		/*Reihenfolge beachten!*/
	height: auto;
	border: 2px dotted #BBB;
	border-radius: .75mm;
	-webkit-hyphens: auto;
	hyphens: auto;
	/*word-break: break-all;*/
}
.textFeld:focus, .textFeldMini:focus {
	outline: 0 dotted red;
	border: 2px solid #298c7c;
	/*caret-color: #ff6b00;*/
}
.textFeldPatt {
	/*display: none;*/
	position: relative;
	top: 0;
	left: 2mm;
	min-width: 46mm;
	width: max-content;
	max-width: 139mm;
	height: auto;
	font-size: 4.5mm;
	-webkit-hyphens: auto;
	hyphens: auto;
	resize: none;
	overflow: hidden;
}
.anleitungAus::after{
	content: ' aus';
}
#ifr_ANLEITUNG {
	position: fixed;
	top: 2.75mm;
	right: 4mm;
	width: 100mm;
	height: 96%;
	background-color: #dbe1bc;
	border: 1px solid #bb0707;
	border-radius: 1mm;
	/*visibility: hidden;*/
}
.displayBlock{
	display: block;
}
.displayNone{
	display: none;
}
#START{		/*iframe*/
	position: fixed;
	top: 0;
	left:0;
	width: 100%;
	height: 100%;
	border: none;
	display: none;
	border-bottom: 1px solid #666;
}
#seitenMuster{
	position: absolute;
	top: 30mm;
	left: 90mm;
	width: 50mm;
	height: 245mm;
	padding: 4mm;
	font-size: 6mm;
	z-index: 100;
	opacity: .9;
	text-align: center;
	background-color: lightgray;
	display: none;
}
@media print {
	body{
		padding: 0; 
			/*würde sich auf gedruckte Seite auswirken*/
	}
	#LEGENDE_DIV, .legend, .patternLoesch, .zeileLoesch, ::placeholder{
		display: none;
			/*beachte: window.addEventListener('beforeprint',...*/
	}
	.notenZeile, .textFeld, .textFeldMini, #SEITE{
		border-color: transparent;
		background-color: transparent;
		margin: 0;
	}
	/*#seitenMuster {
		display: block;
		background-color: grey;
	}*/
	
	
}
@page {
	margin: 0 !important;
	size: 210mm 297mm;
}