:root {
/* 	//=== PANE colors ===// */
	--farbe: 30;
	--sat: 	5%;
	--c200: hsl(var(--farbe), var(--sat), 90%);
	--c400: hsl(var(--farbe), var(--sat), 80%);
	--c600: hsl(var(--farbe), var(--sat), 70%);
	--c700: hsl(var(--farbe), var(--sat), 60%);
	--c800: hsl(var(--farbe), var(--sat), 50%);
	--c900: hsl(var(--farbe), var(--sat), 20%);
/* 	//---------------------// */
	
	
/* 	//=== BUTTON colors ===// */
	--blau-ton: 	243;
	--gruen-ton: 	160;
	--rot-ton: 		0;
	--beige-ton:	30;
	--gelb-ton:  	40;
	--grau-ton:		180;
	
	
	--sat-hell: 	82%;
	--sat-dunkel: 	100%;
	--lum-hell: 	60%;
	--lum-dunkel: 	40%; 
	--hover-hell: 	63%;
	--hover-dunkel: 44%;
	
	--hellrot: 			var(--rot-ton), var(--sat-hell), var(--lum-hell);
	--dunkelrot: 		var(--rot-ton), var(--sat-dunkel), var(--lum-dunkel);
	--hover-hellrot: 	var(--rot-ton), var(--hover-hell), var(--lum-hell);
	--hover-dunkelrot: 	var(--rot-ton), var(--hover-dunkel), var(--lum-dunkel);
	
	
	--hellblau: 		var(--blau-ton), var(--sat-hell), var(--lum-hell);
	--dunkelblau: 		var(--blau-ton), var(--sat-dunkel), var(--lum-dunkel);
	--hover-hellblau: 	var(--blau-ton), var(--hover-hell), var(--lum-hell);
	--hover-dunkelblau: var(--blau-ton), var(--hover-dunkel), var(--lum-dunkel);
	
	--hellgruen: 		var(--gruen-ton), var(--sat-hell), var(--lum-hell);
	--dunkelgruen: 		var(--gruen-ton), var(--sat-dunkel), var(--lum-dunkel);
	--hover-hellgruen: 	var(--gruen-ton), var(--hover-hell), var(--lum-hell);
	--hover-dunkelgruen:var(--gruen-ton), var(--hover-dunkel), var(--lum-dunkel);
	
	--hellbeige: 		var(--beige-ton), var(--sat-hell), var(--lum-hell);
	--dunkelbeige: 		var(--beige-ton), var(--sat-dunkel), var(--lum-dunkel);
	--hover-hellbeige: 	var(--beige-ton), var(--hover-hell), var(--lum-hell);
	--hover-dunkelbeige:var(--beige-ton), var(--hover-dunkel), var(--lum-dunkel);
	
	--hellgelb: 		var(--gelb-ton), var(--sat-hell), var(--lum-hell);
	--dunkelgelb: 		var(--gelb-ton), var(--sat-dunkel), var(--lum-dunkel);
	--hover-hellgelb: 	var(--gelb-ton), var(--hover-hell), var(--lum-hell);
	--hover-dunkelgelb:	var(--gelb-ton), var(--hover-dunkel), var(--lum-dunkel);
	
	--hellgrau: 		var(--grau-ton), var(--sat-hell), var(--lum-hell);
	--dunkelgrau: 		var(--grau-ton), var(--sat-dunkel), var(--lum-dunkel);
	--hover-hellgrau: 	var(--grau-ton), var(--hover-hell), var(--lum-hell);
	--hover-dunkelgrau:	var(--grau-ton), var(--hover-dunkel), var(--lum-dunkel);
	
	--schalterBreit: 200px;
	--schalterHoch: 40px;
	
/* 	//---------------------// */
	
/* 	//== BOOTSTRAP colors ===// */
	--blue: #007bff;
	--indigo: #6610f2;
	--purple: #6f42c1;
	--pink: #e83e8c;
	--red: #dc3545;
	--orange: #fd7e14;
	--yellow: #ffc107;
	--green: #28a745;
	--teal: #20c997;
	--cyan: #17a2b8;
	--white: #fff;
	--gray: #6c757d;
	--gray-dark: #343a40;
	--primary: #007bff;
	--secondary: #6c757d;
	--success: #28a745;
	--info: #17a2b8;
	--warning: #ffc107;
	--danger: #dc3545;
	--light: #f8f9fa;
	--dark: #343a40;
	--font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
	--font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

*, *::before, *::after {
	box-sizing: border-box;
	font-family: sans-serif;
}

body {
	display: flex;
	flex-direction: column;
	align-items: center;	
	justify-content: center;
	margin: 0;
	padding: 0;
	font-size: 1rem;
	font-family: sans-serif;
}

#main {
	width: 1200px;
	height: 700px;
	margin: auto;
	margin-top: 1rem;
}

img {
	max-width: 100%;
}

footer {
	display: flex;
	position: fixed;
	bottom: 0;
	width: 100%;
	z-index: 10;
	align-content: center;
	justify-content: center;
	align-items: center;
	flex-direction: row;
	gap: 2rem;
	border-top: 1px solid var(--c400);
}


.bildname {
	margin: 0;
	background: var(--c200);
	text-align: center;
	font-weight: bold;
	color: grey;
}

.pane1, .pane2, .pane3, .pane4 {
	background: var(--c200);
	position: relative;
}

.pane1 {
	background: var(--c400);
	position: relative;
	overflow: hidden; 
	grid-area: pane1;
}

.pane2 {
	grid-area: pane2;
	position: relative;
	z-index: 3;
	overflow: hidden;
}

.pane3 {
	grid-area: pane3;
	position: relative;
}

.pane4 {
	position: relative;
	grid-area: pane4;
}

.pane5 {
	display: none;
	position: relative;
	grid-area: pane5;
	background: var(--c400);
	padding: 1rem;
}

/* KOPF === */
.titel {
	display: flex;
	align-items: center;
	font-size: 1.4rem;
	position: relative;
	width: 100%;
	padding: 20px;
}

.closeBtn {
	width: 40px;
	aspect-ratio: 1;
	position: absolute;
	right: 30px;
	margin: auto;
	top: 0;
	bottom: 0;
	cursor: pointer;
}

.closeBtn:hover {
	opacity: .7;
}

.titel h1 {
	color: var(--c600); 
}

.kopfname {
	margin-left: auto;
	margin-right: auto;
	color: white;
}

.seitenname {
	text-transform: uppercase;
}
/* === */

.list-titel {
	text-align: center;
	line-height: 1.8;
	background-color: var(--c600);
	color: var(--c900);
	text-transform: capitalize;
	height: 2rem;
	width: 100%;
	margin: 0;
}

.kopf {
	grid-area: kopf;
}

.fuss {
	grid-area: fuss;
}

.kopf {
	display: flex;
	justify-content: space-between;
	justify-items: center;
	background: var(--c800);
}

.fuss, .fuss2, .fuss3, .fuss4,  .fuss1 {
	display: flex;
	justify-content: space-around;
	align-items: center;
	background: var(--c400);
	gap: .5rem;
}

/* lokal INPUT Fields */
input {
	background-color: transparent;
	border: none;
	border-bottom: dotted 1px black;
	font-size: 1rem;
	align-self: center;
}

input:focus {
	  outline: none;
  }

select {
	background-color: transparent;
	border: 0;
	font-size: 1rem;
	font-weight: 600;	/* align-self: end; */
}

.readonly {
	font-weight: bold;
	text-align: center;
	pointer-events:none;
	border: none;
	width: 100%;
}

/* wichtigster Eintrag im Formular */
.fett {
	font-size: 1.2rem;
	font-weight: bold;
}

#dataForm {
	width: 90%;
	height: 94%;
	margin: auto;
}
.zusammen {
	display: flex;
	align-items: center;
}

input.large {
	width: 18rem;
}

input.medium {
	width: 11rem;
}

input.short > input {
	width: 4rem;
}

/* END lokal */

/* _______________________________ */
/* 	LISTE ELEMENT DETAILS */

.list-header {
	font-size: 1.2rem;
	font-weight: bold;
	text-align: center;
}

.listenfeld, .subListFeld {
	position: relative;
	padding: 10px;
	overflow-y: auto;
	overflow-x: hidden;
}

.listenfeld {
	width: 100%;
	max-height: 83%;
}

.listenZeile {
	display: none;
	width: 100%;
	cursor: pointer;
	gap: 5px;
	align-items: center;
	font-family: sans-serif;
	border-bottom: 1px solid  var(--c700)
}

.listenZeile:hover {
	opacity: .5;
}

.listenZeile.selected {
	background-color: var(--c700);
}

.bildliste {
	height: 94%;
	overflow-y: auto;
}

.bildZeile {
	display: block;
	width: 100%;
	cursor: pointer;
	gap: 5px;
	align-items: center;
	font-family: sans-serif;
	border-bottom: 1px solid  var(--c700)
}

.mittig {
	justify-content: flex-start;
}

.pikto {
	width: 50px;
	height: 50px;
	object-fit: contain;
}

.zeile {
	width: 78%;
	padding: .5rem;
	line-height: 1;
}

.zeile > div {
	padding: 4px;
	line-height: .5;
}

div.objekt, div.daten, div.info {
	color: var(--c900);
	white-space: nowrap;
	width: 185px;
	overflow: hidden;
	text-overflow: ellipsis;
}
	
div.objekt {
	font-size: .9rem;
	font-weight: bold;
}
	
div.daten, div.info {
	font-size: .8rem;
}

.datumfett {
	text-align: center;
	width: 100%;
	font-size: 1rem;
	font-weight: bold;
}

/* === ende LISTE */
	
.formgrid-1 {
	display: grid;
	grid-template-columns: 1fr 3fr 1fr 3fr;
	align-items: center;
	gap: 1rem;
	height: 90%;
}

.formgrid-2 {
	display: grid; 
	grid-template-columns: auto 1fr;
	justify-content: center;
	align-content: center;
	gap: 1rem;
}

label {
	align-self: end;
	text-align: end;
	font-size: 13px;
	font-weight: 700;
	font-family: 'Raleway', sans-serif;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: #555;
	align-self: center;
}

label.mitte {
	justify-self: center;
}

.formgrid-1 > .lang {
	grid-column: 2/ span 3;
}

.formgrid-1 > .hoch {
	grid-row: span 4;
}


.formgrid-2 > .lang {
	grid-column: 1/ span 2;
}

input[type=date], input[type=time] {
	text-align: center;
}

form > textarea {
	font-size: 1rem;
	background: transparent;
}


.eingabe {
	
} 

input:read-only { 
	border: none;
}

.reihe {
	display: flex;
	grid-column: 2/ span 3;
	justify-content: space-around;
	border-top: 1px solid var(--c400);
	border-bottom: 1px solid var(--c400);
}

.nach-rechts {
	grid-column: 2/ span 2;
}

.titel h1, .titel h3{
	margin: 0px;
}
	
/* _______________________________ */
/* 	BUTTONS */

.schalter {
  border-radius: 4px;
  box-sizing: border-box;
  color: #FFFFFF;
  cursor: pointer;
  direction: ltr;
  display: block;
  font-family: "SF Pro Text","SF Pro Icons","AOS Icons","Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size: 17px;
  font-weight: 400;
  letter-spacing: -.022em;
  line-height: 1.47059;
  min-width: 120px;
  width: auto;
  max-width: 200px;
  overflow: visible;
  padding: 4px 15px;
  text-align: center;
  text-shadow: 2px 1px #FF0000;
  vertical-align: baseline;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  white-space: nowrap;
  height: 34px;
}

.schalter.klein {
	width: 120px;
	height: 34px;
}

.b-gelb {
	background-image: linear-gradient(hsla(var(--hellgelb),1),hsla(var(--dunkelgelb),1));
	border: 1px solid var(--dunkelgelb);
}

.b-rot {
	background-image: linear-gradient(hsla(var(--hellrot),1),hsla(var(--dunkelrot),1));
	border: 1px solid var(--dunkelrot);
}

.b-rot:hover {
	background-image: linear-gradient(hsla(var(--hover-hellrot),1),hsla(var(--hover-dunkelrot),1));
}

.b-beige {
	background-image: linear-gradient(hsla(var(--hellbeige),1),hsla(var(--dunkelbeige),1));
	border: 1px solid var(--dunkelrot);
}

.b-beige:hover {
	background-image: linear-gradient(hsla(var(--hover-hellbeige),1),hsla(var(--hover-dunkelbeige),1));
}

.b-beige:hover {
	background-image: linear-gradient(hsla(var(--hover-hellbeige),1),hsla(var(--hover-dunkelbeige),1));
}

.b-blau {
	background-image: linear-gradient(hsla(var(--hellblau),1),hsla(var(--dunkelblau),1));
	border: 1px solid var(--dunkelblau);
}

.b-blau:hover {
	background-image: linear-gradient(hsla(var(--hover-hellblau),1),hsla(var(--hover-dunkelblau),1));
}

.b-gruen {
	background-image: linear-gradient(hsla(var(--hover-hellgruen),1),hsla(var(--hover-dunkelgruen),1));
	border: 1px solid var(--dunkelgruen);
}

.b-grau {
	background-image: linear-gradient(hsla(var(--hellgrau),1),hsla(var(--dunkelgrau),1));
	border: 1px solid var(--dunkelgrau);
}

.b-grau:hover {
	background-image: linear-gradient(hsla(var(--hover-hellgrau),1),hsla(var(--hover-dunkelblau),1));
}

.schalter:active {
  background-image: linear-gradient(#3D94D9, #0067B9);
  border-color: #006DBC;
  outline: none;
}

.schalter:focus {
  box-shadow: rgba(131, 192, 253, 0.5) 0 0 0 3px;
  outline: none;
}

.schalter:disabled {
	background-image: linear-gradient(#cdd0d3, #8e8f91);
	text-shadow: none;
	box-shadow: rgba(131, 192, 253, 0.5) 0 0 0 3px;
	user-select: none;
	outline: none;
	color: rgb(84, 83, 83);
}

.btn-rot {
	background-color: #F26763;
}

.btn-gelb {
	background-color: #be9408;
}

.btn-gruen {
	background-color: #09abae;
}

.btn-blau {
	background-color: #2d3ead;
}

.btn-braun {
	background-color: #945a02;
}

.btn-dunkelblau {
	background-color: #c809ee;
}

.btn-hellgrau {
	background-color: #b4b3b4;
}

.btn-dunkelgrau {
	background-color: #5b5a5b;
}

.btn-dunkelrot {
	background-color: #db0413;
}	
.btn-grau {
	background-color: #b4b4b4;
}

/* === Checkbox Stuff === */
.scheck {
	width: 20px;
    height: 20px;
    margin: 5px;
    border: 1px solid var(--c700);
    border-radius: 4px;
    cursor: pointer;
    background: var(--c700);
	position: relative;
	user-select: none;
}

.scheck:hover {
	opacity: .7;
}

.schecktext {
    font-family: sans-serif;
    font-size: 1.2rem;
    margin-left: 6px;
    margin-top: 4px;
}

.scheckbox {
	display: flex;
	justify-content: flex-start;
	margin: 10px;
	cursor: pointer;
}

.scheck.selected::before {
    content: '✔';
	color: var(--c900);
    position: absolute;
    left: 2px;
    font-size: 23px;
    bottom: -3px;
}
.scheck.selected {

}


.scheck.disabled {
	user-select: none;
	opacity: .5;
}

/* === HEADER styles === */
#header-wrap {
	margin-left: 110px;
	display: flex; 
	justify-content: space-between; 
	align-items: center;
	height: 5rem;
}

@media (prefers-color-scheme: dark) {
	body {
		background-color: var(--c900);
	}
	
	footer {
		background-color: var(--c900);
		color: var(--c200);
	}
}

/*=== SONSTIGE ===*/
.manual {
	/* die passende Seite aus dem Manual */
	display: none;
}