/* ----------------------------- Basis  --------------------------- */
/* ------------------------ Layout  -------------------------*/

#linkeSpalte {width:25%;}



/* ------------------------ Fortschrittsanzeige  -------------------------*/

#ProBar {
    width: 250px;
    display: none;
    background-color: #f3f3f3;
    border: 1px solid #aaa;
    border-radius: 5px;
    margin: 3px 0 10px 0;
    box-shadow: 3px 4px 12px rgba(0, 0, 0, 0.3);
}

#ProBarFill {
    height: 30px;
    width: 0%;
    color: #000080;
    text-align: center;
    line-height: 30px;
	background: #6BA500;
    background: linear-gradient(to bottom, #7ABCFF	, #3297FF);
}


/* ----------------- Tabelle ------------------ */

table {
	border-spacing: 0;
	padding: 0;
}

table.Liste {
	font-family: "Open Sans", sans-serif;
	min-width: 300px;
	border-radius: 3px;
	border: 1px solid #ddd;
	box-shadow: 3px 3px 9px 0 #e3e3e3;
}

tr.Zl1, div.Zl1 {background-color:#F6F6F6;}
tr.Zl2, div.Zl2 {background-color:#fff;}

th {
	font-family: "Open Sans", sans-serif;
	font-size: 14px;
	font-weight: 400;
	background-color : #FFFAE1;
	color: #666;
	padding: 3px 5px;
	text-align: left;
	background-color: #FAFAFA;
	border-right: 1px solid #dddddd;
	border-bottom: 1px solid #FF8300;
}

td {
	font-family: Ubuntu, sans-serif;
	text-align: left;
	vertical-align: top;
	padding: 2px 5px;
}

td.Txt16 {
	font-size: 16px;
	padding: 2px 3px 1px 3px;
	border-right: 1px solid #ddd;
}

td.Txt14 {
	font-size: 14px;
	padding: 3px 3px 2px 3px;
	border-right: 1px solid #ddd;
}

td.Txt12 {
	font-size: 12px;
	padding: 4px 3px 2px 3px;
	border-right: 1px solid #ddd;
}

td.Zahl {
	font-size: 14px;
	padding: 2px;
	text-align: right;
	vertical-align: top;
	border-right: 1px solid #ddd;
}

td.Zeit {
	font-size: 16px;
	padding: 4px 3px 2px 3px;
	border-right: 1px solid #ddd;
	white-space:nowrap;
}

td.Sym {
	text-align: center;
	padding: 1px 0 0 0;
}

/* ------- Liste  ----------*/
.SelZl {
	display: flex;
	gap: 12px;
	padding: 1px;
	margin-bottom: 2px;
	font-size: 18px;
	cursor: pointer;
}
.SelZl:hover {background-color: #FCFFC7;}

.SelZl > div:first-child {
	width: 32px;
	color: #999;
	text-align: right;
}

.SelZl > div:last-child {
	color: #000080;
}


/* ------------------------ allgemein  -------------------------*/

hr {border: 1px solid #ddd;}
strong, b {font-weight: 700;}
em, i {font-style: italic;}

i.icon {
	font-family: "icons" !important;
	font-style: normal !important;
	font-weight: 100 !important;
}

a.icon {
	font-size: 24px;
	display: inline-block;
	color: #777;
	border: none;
}

div {font-family: sans-serif;}
ul {margin: 0;}

.ausgeblendet {display: none !important;}

.weiss {color: #fff;}
.rot {color: #ff0000;}
.rot1 {color: #DD0000;}
.orange {color: #FFAC04;}
.dunkelorange {color: #AD4400;}
.gruen {color: #008000;}
.gruen1 {color: #00aa00;}
.gelb {color: #FFD700;}
.dunkelblau {color: #000080;}
.blau {color: #0000ff;}
.hellblau {color: #4141D5;}
.grau {color: #ddd;}
.dunkelgrau {color: #666;}
.light {font-weight: 300;}
.ohneRand {margin: 0;}
.MausStd {cursor: default;}
.flexNL {flex-basis: 100%;  height: 0;}
tr.mark {cursor: pointer;}
tr.mark:hover, td.mark:hover {	background-color: #FEFFDC;}
.links {text-align: left;}
.Mitte {text-align: center;}
.elMitte {left:50%,   transform: translateX (-50%);}
.flexMitte {justify-content: center;}
.rechts {text-align: right;}
.flex {display: flex;}
.grow {flex-grow:1;}
.grow0 {flex-grow:0;}
.wrap {flex-wrap: wrap;}
.Zeile {flex-direction: row;}
.gap {gap: 12px;}
.posrel {position: relative;}
.inline {display: inline;}
.flexUnten {align-items: flex-end;}
.flex-between {
 display: flex;
  justify-content: space-between;
}

.breit1 {width: 100%;}
.breit2 {width: 50%;}
.breit3 {width: 33%;}
.breit4 {width: 25%;}
.breit24 {width: 24px;}
.breit32 {width: 32px}
.breit48 {width: 48px;}
.breit64 {width: 64px;}
.breit72 {width: 72px;}
.breit96 {width: 96px;}
.breit128 {width: 128px;}
.breit140 {width: 140px;}
.breit160 {width: 160px;}
.breit180 {width: 180px;}
.breit200 {width: 200px;}
.breit240 {width: 240px;}
.breit280 {width: 280px;}
.breit320 {width: 320px;}
.breit400 {width: 400px;}
.breit480 {width: 480px;}
.breit640 {width: 640px;}

.font18 {font-size: 18px;}
.font24 {font-size: 24px;}
.font30 {font-size: 30px;}
.font36 {font-size: 36px;}

.unten3 {margin-bottom: 3px !important;}
.unten5 {margin-bottom: 5px !important;}
.unten7 {margin-bottom: 7px !important;}
.unten10 {margin-bottom: 10px !important;}
.unten15 {margin-bottom: 15px !important;}
.unten20 {margin-bottom: 20px !important;}

.flexGruppe {
	display: flex;
	gap: 9px;
	width: 100%;
}

#wartenDiv {
	width: 32px;
	display: none;
}

/* ------------------------- Listen ------------------------------------- */


#ListeHG {
	margin: 0;
}

#ListeHG h2.intern {
	margin: 24px 0 9px 0;
}

.ListeDiv {
	min-width: 300px;
	padding: 5px 0;
	cursor: pointer;
}
.ListeDiv:hover {background-color: #f4f4f4;}

.ListeDiv > h4 {
	font-family: sans-serif;
	font-size: 20px;
	color: #740E00;
	margin: 0;
}

.ListeDiv > p {
	font-family: sans-serif;
	font-size: 16px;
	color: #000080;
	margin: 0;
}

iframe {
	width: 100%;
	height: 100%;
	border: none;
  	display: block;
}

#obenBtn {
  z-index: 100;
  position: fixed;
  bottom: 10px;
  right: 10px;
  width: 50px;
  height: 50px;
  border: none;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.3);
  color: #000;
  font-size: 24px;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
}
#obenBtn i {color: #999 !important;}

#obenBtn.visible {
  opacity: .7;
  pointer-events: auto;
}

#warten {
  z-index: 120;
  position: fixed;
  width: 100px;
  top: 50%;
  left: 50%;
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, -50%);
  pointer-events: none;
  transition: .5s;
  animation: drehenPause 1s infinite;
  transform-origin: center center;
}

@keyframes drehenPause {
  0%   { transform: rotate(0deg); }
  50%  { transform: rotate(360deg); }
  100% { transform: rotate(360deg); }
}

#warten.aktiv {
  opacity: .8;
  visibility: visible;
  animation-play-state: running;
}

#warten.visible {
  opacity: 1;
  pointer-events: auto;
}


/* ----Hintergrund- oder Vollbild ----*/
.Vollbild {
	position: fixed;
    z-index: -1;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
}

.Vollbild img  {
	position: absolute;
	top: 50%;
	left: 50%;
	min-width: 100%;
	min-height: 100%;
	transform: translate(-50%, -50%);
	object-fit: cover;
}




@media screen and (max-width: 800px) {

	#linkeSpalte {
		z-index: 30;
		position: fixed;
		left: 5px;
		top: 75px;		
		width: 280px;
		max-height: 90%; 
	    box-shadow: 5px 5px 12px rgba(0, 0, 0, 0.4);
	    visibility: hidden;
	    display: none;
	    opacity: 0;
	}
	#linkeSpalte.show {
	  opacity: .9;
	  visibility: visible;
	  display: block;
	}

}


/* ----------------------------- Benutzer  --------------------------- */
#Benutzer_Frm {
	max-width: 700px;
	
}


#UserKeinBild {
	width: 180px;	
	height: 200px;
	margin-left: 30px;	
	border: solid 1px #aaa;
	font-size: 140px;
	color: #999;	
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 2px 2px 9px 0 #ccc;
}

img.UserFoto {
	width: 200px;
	display: none;
	margin-left: 30px;
	border-radius: 5px;
	box-shadow: 2px 2px 9px 0 #ccc;
}

#UpUsrFoto_Btn {
	margin: 20px 0 20px 30px;
}


/*  -----------------------  Login  ----------------------------------*/

#Login {
	z-index: 100;
	position: absolute;
	min-width: 200px;
	max-width: 320px;
	min-height: 140px;
	margin: 100px auto 16px auto;
	border-radius: 7px;
	padding: 10px 10px 0 10px;
	display: none;
	flex-direction: column;
	background-color: #fff;
	box-shadow: 1px 1px 24px rgba(0, 0, 0, 0.7);
	transition: .5s;	
}

.LogFrm {
	position: relative;
	max-width: 300px;
	display: flex;
	flex-wrap: wrap;
	border-radius: 5px;
	background-color: #f4f4f4;
	padding: 15px;
	margin: 0;
	border: none;
}


#Login_Btn {
	margin: 0 auto 0 auto;	
}

#LogMsg {
	text-align: center;
	font-family: sans-serif;
	font-size: 18px;
	margin-top: 12px;
	color: red;
}



/* ----------------------------- Dialog  --------------------------- */
.DialogHG, .DialogGrHG {
	z-index: 99;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(3px);
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s;
}

.DialogGrHG {
	z-index: 89;
}

.DiaWin, .DiaWinGr {
	z-index: 100;
	position: relative;
    background: white;
    padding: 20px 20px 7px 20px;
    border-radius: 14px;
    box-shadow: 4px 4px 15px rgba(0, 0, 0, 0.3);
    min-width: 250px;
    min-height: 120px;
    max-width: 97%;
    max-height: 97%;
    display: flex;
    flex-direction: column;
    opacity: 0;
    border: 3px solid #FFE1B5;
    transform: scale(0.9);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.DiaWinGr {
	z-index: 90;
    border: 3px solid #ddd;
}

.DiaWin .max, .DiaWinGr .max {
	width: 100%;
	height: 100%;
}


.DiaWin h4 {
	font-family: sans-serif;
	font-size: 20px;	
	font-weight: 700;
	line-height: 1;
	margin: 0 0 10px 0;
	color: #D08E33;

}

/* Scrollbarer Inhalt */
.DialogInhalt {
    flex-grow: 1;
    overflow-y: auto;
    padding-right: 10px;
}
/* Schalter */
.DialogSchalter {
    margin-top: 10px;
    text-align: center;
}

.DialogSchalter button {
	margin: 0 3px 0 3px
}

.DialogEingabe {
	width: 360px;
	display: none;
	margin: 9px 0 5px 0;
}

.DialogHG.show {
    opacity: 1;
    visibility: visible;
}
.DialogHG.show .DiaWin, .DiaWinGr {
    opacity: 1;
    transform: scale(1);
}

.DialogSchalter {
	text-align: center;
}

button.closeDialog {
	position: absolute;
	color: #666;
	right: -4px;
	top: -4px;
	font-size: 16px;
	padding: 1px 10px 1px 10px;
}

button.Esc_klein {
	all: unset;
	position: absolute;
	right: -1px;
	top: -3px;
	font-family: sans-serif;
	font-size: 16px;	
	font-weight: 400;
	line-height: 1;
	color: #000;
 	padding: 2px;
 	cursor: pointer;
 	border: 1px solid #ccc;
 	border-radius: 5px;
 	background-color: rgba(255,255,255,.5);
}
button.Esc_klein:hover {color: red;}

#Hinweis {
	z-index: 200;
	position: fixed;
	left: 50%;
	transform: translateX(-50%);
	bottom: 10px;
    padding: 10px;
    border-radius: 9px;
    background-color: rgba(255,255,255, .8);
    box-shadow: 4px 4px 15px rgba(0, 0, 0, 0.3);
    min-width: 100px;
    max-width: 95%;
    max-height: 72px;
    visibility: hidden;
    display: none;
    opacity: 0;
    border: 3px solid #0076F4;
    transition: opacity 1s;
}
#Hinweis.show {
  opacity: 1;
  visibility: visible;
  display: block;
}

img.DialogBild {
	height: calc(100% - 20px);
    width: auto;
    max-width: calc(100% - 20px);
    object-fit: cover;
    display: block;
}


@media screen and (max-width: 600px) {
	.DialogEingabe {
		width: 280px;
	}


}


/* ----------------------------- Formular  --------------------------- */

form {
	position: relative;
	padding: 5px;
	text-align: left;
	background-color: #fcfcfc;
	border-radius: 7px;
	display: flex;
  	flex-wrap: wrap;
  	gap: 7px;
}

fieldset {
	display: flex;
	padding: 0;
  	flex-wrap: wrap;
  	width: 100%;
  	gap: 16px;
	border: none;
}

.imH1 {
	position: absolute !important;
	right: 14px;
	top:20px;
	
}


/* ---------------- Schalter -----------------*/


button {
	font-family: sans-serif;
	font-size: 16px;
	margin: 0;
	height: 34px;
    padding: 7px 12px;
    background: #ddd;
	background: linear-gradient(to bottom, #fff, #ddd);
	border: 1px solid #999;
	border-radius: 5px;
}
button:hover {background: linear-gradient(to bottom, #fff, #eee);}

button.small {
	font-size: 13px;
	height: 24px;
    padding: 3px 6px 3px 4px;
	border-radius: 3px;
}

button.large {
	font-size: 19px;
	height: 40px;
    padding: 9px 15px;
	border-radius: 7px;
}

button.orange {
	color: #000;
	border: 1px solid #FC730A;
	background: #FFC687;
	background: linear-gradient(to bottom, #FFC687, #FF7B0D);
}
button.orange:hover {background: linear-gradient(to bottom, #FFDB87, #FFA050);}

button.green {
	border: 1px solid #669E00;
	background: #8FC401;
	background: linear-gradient(to bottom, #A6E400, #75B204);
}
button.green:hover {background: linear-gradient(to bottom, #B8FD00, #90DD00);}

button.blue {
	border: 1px solid #1D6DC1;
	background: #6BA500;
	background: linear-gradient(to bottom, #7ABCFF	, #3297FF);
}
button.blue:hover {background: linear-gradient(to bottom, #A4D2FF	, #76BAFF);}

button.red {
	border: 1px solid #B21203;
	background: #FF917A;
	background: linear-gradient(to bottom, #FF917A , #FF3735);
}
button.red:hover {background: linear-gradient(to bottom, #FFB6A6 , #FF5E5C);}

button.shadow {box-shadow: 2px 3px 9px rgba(0, 0, 0, 0.4);}
button.pill {
	padding: 0 9px;
	border-radius: 50%;
}

button.hoch12 {height: 12px;}
button.hoch16 {height: 16px;}
button.hoch20 {height: 20px;}
	

a.SuchDel {
	position: relative;	
	z-index: 10;
	top: -5px;
	right: 12px;
	color: #999;
	font-size: 20px;
	border: none;
	text-decoration: none;
}


label {
	display: block;
	width: 100%;
	height: 16px;
	line-height: 16px;
	font-size: 13px;
	font-family: sans-serif;
	color: #666;
}

label.large {
	font-family: sans-serif;
	margin-bottom: 5px;
	font-size: 16px;
	font-weight: bold;
	color: #333;
}

input, file, textarea {
	font-family: "Open Sans", sans-serif;
	font-size: 18px;
	line-height: 1.4;	
	height: 29px;
	display: block;
	width: 100%;
	color: #001166;
	font-weight: 400;
	border: 1px solid #ccc;
	background-color: #fff;
	padding: 4px 3px 3px 3px;
	border-radius: 3px;
	box-shadow: 2px 2px 9px 0 #e9e9e9;
}
input:focus, button:focus {outline: 1px solid #2C89F7;}
input[type="slider"] {outline-color: none;}

input.klein, file.klein, textarea.klein {
	font-size: 14px;
	height: 18px;
	padding: 3px 2px 1px 2px;
	border-radius: 2px;
	box-shadow: 2px 2px 7px 0 #e9e9e9;
}

input.large, file.large, textarea.large {
	font-family: "Open Sans", sans-serif;
	font-size: 24px;
	line-height: 1.4;	
	height: 40px;
	display: block;
	width: 100%;
	color: #001166;
	font-weight: 400;
	border: 1px solid #ccc;
	background-color: #fff;
	padding: 4px 3px 3px 3px;
	border-radius: 3px;
	box-shadow: 2px 2px 9px 0 #e9e9e9;
}

input[type="range"]:focus {
    outline: none;
}


/* ----------------- Checkbox ------------------ */

input[type="checkbox"] {display: none;}

.checkbox-label {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
}

.eigeneCheckbox {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 1px solid #333;
    background-color: #fff;
    border-radius: 4px;
    position: relative;
    margin-right: 8px;
}

.eigeneCheckbox::after {
    content: "";
    position: absolute;
    top: -1px;
    left: 6px;
    width: 7px;
    height: 13px;
    border: solid #00aa00;
    border-width: 0 3px 3px 0;
    transform: rotate(45deg);
    display: none;
}

input[type="checkbox"]:checked + .eigeneCheckbox::after {
    display: block;
}

span.CheckLabel {
	font-size: 18px;
	color: #000080;
	margin-top: 1px;
}




/* -------------------------------------- Schieberegler (Slider) --------------------------------------- */

.slider {
    -webkit-appearance: none;
	float: left;   
    width: calc(100% - 40px);
    height: 19px;
    margin: 5px 0 0 0;
    background: #ddd;
    outline: none;
    opacity: 0.7;
    -webkit-transition: .2s;
    transition: opacity .2s;
}
.slider:hover {opacity: 1;}

.slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 14px;
    height: 28px;
    background: #fff;
    cursor: pointer;
    border-bottom: 1px solid #aaa;
}

.slider::-moz-range-thumb {
    width: 14px;
    height: 28px;
    background: #fff;
    cursor: pointer;
    border-bottom: 1px solid #aaa;
}

div.slidervalue {
	float: left;
	width: 40px;
	height: 23px;
	padding-top: 2px;
	margin-top: 3px;
	font-family: "Open Sans", sans-serif;
	line-height: 1;
	text-align: center;
	border: 1px solid #aaa;
	background-color: #fff;
}


/* ---------------- Farbwähler --------------------------*/
input.FarbSelect {
	width:100%;
	height: 28px;
	padding: 1px;
	border: 1px solid #fff;
}




div.DropTxt, div.InputDiv {
	position: relative;
	min-width: calc(100% - 36px);
	height: 29px;
	padding: 1px 2px 4px 5px;
	cursor: pointer;
	color: #000080;
	background-color: #fff;
	border: 1px solid #ccc;
	border-radius: 3px;
	overflow: hidden;
	box-shadow: 2px 2px 9px 0 #e9e9e9;
}
div.DropTxt.gruen {color: #00aa00;}
div.DropTxt.rot {color: red;}


button.DropBtn {
	top: 4px;
	width: 36px;	
	height: 29px;
	font-size: 24px;
	padding: 2px;
	margin-left: -11px;
	border-radius: 3px;
	cursor: pointer;
	box-shadow: 2px 2px 9px 0 #f4f4f4;
}

button.suchen_Btn {
	top:4px;
	width: 36px;	
	height: 29px;
	font-size: 14px;
	color: #777;
	padding: 2px;
	margin: -4px;
	border-radius: 3px;
	box-shadow: 2px 2px 9px 0 #e1e1e1;
}

div.DropList {
	position: absolute;
	z-index:120;
	top: 100%;
	width: 100%;
	min-height: 12px;
	max-height: 300px;
	border: 1px solid #bbb;
	background-color: #fff;
	margin: 2px;
	border-radius: 4px;
	display: none;
	overflow-x:hidden;
	overflow-y:auto;
	cursor: pointer;
	box-shadow: 0 5px 10px 0 #777;
	padding-left: 5px;	
}
div.DropList.offen {display: block;}
div.DropList.gruen {color: #00aa00;}
div.DropList.rot {color: red;}

div.DropItemGrp {
	display: flex;
	gap:5px;
}

div.DropItem {
	padding: 2px;
	white-space:nowrap;
	background-color: #fafafa;
	border-bottom: 1px solid #eee;
	cursor: pointer;
}
div.DropItem:hover, div.DropItemSub:hover {
	background-color: #fff;
}

div.DropItemSub {
	font-size: 16px;
	padding: 1px 1px 1px 20px;
	white-space:nowrap;
	background-color: #fafafa;
	cursor: pointer;
}



div.DropItemGrp div.edit {
	color: #999;
	font-size: 16px;
}
div.DropItemGrp div.edit:hover {color: red;}

div.FormGruppe {
	position: relative;
	display: flex;
}

h3.Formular {
	width: 100%;
	margin: 12px 0 0 0;
	font-weight: normal;
	color: #1E90FF;
	text-align: left;
}

div.FormBtnDiv {
	display: flex;
	width:100%;
	gap:12px;
	justify-content: flex-start;
	background-color: #eee;
}

.FormFeld {
	position: relative;
	min-width: 64px;
	max-width: 100%;
	margin: 0;
	display: flex;
    flex-direction: column;
}

button.FormBtn {
	font-size: 17px;
}

div.saveBTNunten {
	width: 120px;
	flex-shrink:1;
	margin-top:16px;
}

button.FormBtn.del {
	align-self: flex-end;
	margin-left: auto;	
}

#FrmMsg {
	font-size: 18px;
	min-height: 20px;
	width: 300px;
	color: red;
}

#SprDrop {
	position: relative;
	display: flex;
	width: 200px;
	height: 28px;
	margin: 4px 0 0 20px;
}

img.ListFlagge {
	width: 27px;
	float: left;
	margin: 2px 7px 0 0;
}

/* ----------------------------------- Passworteingabe  ----------------------------------*/

.pw-container {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.strength-bar {
  height: 5px;
  background: #ccc;
  margin-top: 3px;
  border-radius: 3px;
  transition: width 0.3s, background 0.3s;
}
.pw-icons {
  display: flex;
  gap: 9px;
  margin-top: 2px;
  margin-top: 15px;
}



/* ----------------------------- Editor  --------------------------- */
#Leiste {
	position: relative;
	font-family: times new roman;
	display: flex;
	align-content: flex-start;
	transition: 0.3s ease;
	background-color: #f1f1f1;
}

.LeisteFix {
	z-index: 30;
	position: fixed !important;
	left: auto;
	top: 3px;
	box-shadow: 2px 2px 7px rgba(0, 0, 0, 0.3);
}

div.LeisteBtn {
	position: relative;
	width: 30px;
	height: 30px;
	text-align: center;
	font-size: 19px;
	font-family: times new roman;
	line-height: 30px;
	color: #333;
	cursor: pointer;
	border: 1px solid #ccc;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	background-color: #F1F1F1;
}

div.LeisteBtn.passiv {
	background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ddd));
	background: -moz-linear-gradient(top, #fff, #ddd);
	background-color: #ddd;
}

div.LeisteBtn.aktiv, div.LeisteBtn:hover {
	background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ddd));
	background: -moz-linear-gradient(top, #ddd, #fff);
	background-color: #eee;
}

div.BtnColor {
	width: 5px;
	height: 4px;
	margin-bottom: 1px;	
}

#BtnColorBez {
	float:left;
	margin: 0 3px 0 3px;
	font-family: times new roman;
} 

div.EditorHG {
	position: relative;
	width: 100%;
	min-height: 100px;
	display: flex;
	gap: 3px;
	flex-grow: 1;
	flex-direction: column;
}

div.Editor {
	background-color: #fff;	  
	border: 1px solid #ddd;
    padding: 5px;
    overflow-y: auto;
    outline: none;
    flex-grow:1;
 }

div.Bild_im_Text {
	display: inline-block;
	float: left;
    resize: both;
    width: 300px;
    max-width: 100%; 
    overflow: hidden;
    margin: 20px 20px 20px 0;
	box-shadow:  3px 3px 20px 0 #ccc;
	cursor: pointer;
}

div.EditMnuSubHG {
	z-index: 10;
	position:absolute;
	top:32px;
	left: -37px;
	min-width: 100px;
	min-height: 32px;
	max-height: 300px;
	overflow-y: auto;
	padding: 5px;
	text-align: left;
	background-color: #fafafa;
	border: 1px solid #bbb;
	box-shadow:  3px 3px 20px 0 #ccc;
	display: none;
}

.MnuSubZl {margin: 0 ; line-height: 1.3;}
.MnuSubZl:hover {background-color: FEFFE6;}


#QuellDiv {
	position: relative;
	display: none;
	width: 100%;
	min-height: 300px;
}

#QuellEsc {
	position: absolute;
	left:0;
	top: -24px;
	margin-top: 7px;
}

#Quelltext {
	position: relative;
	width: 100%;
	min-height: 200px;
	font-family: monospace;
	font-size: 18px;
	color: #000;
	margin-top: 16px;
	border: 1px solid #ccc;
	outline:none;
}


/* ------------------------------------------ Formatvorlagen ----------------------------------------------------------------- */

#FormatvorlagenHG {
	position: absolute;
	z-index: 90;
	top: 0;
	left: 0;
	min-height: 64px;
	padding: 10px;
	background-color: #f7f7f7;
	border: 1px solid #bbb;
	box-shadow: 5px 5px 15px 0 #777;
	display: none;
}

div.FrmVorBtnsHG {
	height: 40px;
	margin-top: 12px;
	display: flex;
	flex-grow:1;
	gap:12px;
	justify-content: flex-end;
}

#FrmVorNeu {
	cursor: pointer;
	color: #008000;
	font-size: 20px;
	font-weight: bold;
	border-top: 1px solid #aaa;	
}
#FrmVorNeul:hover {background-color: #FEFFE6;}

#FrmVorCSS {
	position: absolute;
  	top: 15px;
}

#FrmVorBeispiel {
	background-color: #fff;
	border-top-color: 1px solid #999;
	border-bottom-color: 1px solid #999;
}

#insTxtBtn .EditMnuSubHG {white-space:nowrap;}
#insTxtBtn:hover .EditMnuSubHG {display: block;}




/* ----------------------------- Dokumente  --------------------------- */
.DokHG {
	padding: 60px 0 10px 0;
	max-height: 100%;
	display: none;
	opacity: 0;
	gap: 16px;
}
.DokHG.show {
	display: flex;
	opacity: 1;
}

.DokSpalte {
	position: relative;
	min-width: 190px;
	max-width: 300px;
	min-height: 100px;
    box-shadow: 4px 4px 15px rgba(0, 0, 0, 0.3);
   	background-color: rgba(255, 255, 255, .9);
   	border: 1px solid #aaa;
   	border-radius: 8px;
   	display: flex;
   	flex-direction: column;
}
.DokSpalte.breit {min-width: 400px;}

.DokSpalte header {
	height: 32px;
	min-height: 32px;
	display: flex;
	gap:3px;
	background: linear-gradient(to bottom, #80B1ED, #3F85DB);	
	
}

#TextTitel, .DokSpalte header > label {
	position: absolute;
	top: 8px;
	left: 8px;
}

.DokSpalte header label {
	font-size: 16px;
	color: #000080;
	width: auto;
	cursor: pointer;
}

.DokSpalte > div {
	padding: 10px;
}

.DokSpalte header i {
	margin-top: -2px;
	width: 20px;
    color: #444;
    cursor: pointer;
}
.DokSpalte header i:hover {
	color: red;
}

.ListeHG {
	overflow-y: auto;
}


.ListDiv {
	padding: 2px !important;
	margin-bottom: 3px;
	cursor: pointer;
}
.ListDiv:hover {background-color: #FCFFC7;}

.ListDiv h4 {
	margin: 0 0 1px 0;
	font-family: Ubuntu, sans-serif;
	font-size: 16px;
	color: #33a;
	line-height: 1;
}

.ListDiv p {
	font-size: 13px;
	line-height: 1;
	color: #555;
	margin: 0;
}

#saveLED {
	position: absolute;
	top: 25px;
	left: 10px;
	width: 20px;
	height: 4px;
	display: none;
	background-color: #00FF00;
}


@media screen and (max-width: 1024px) {
	
	.DokHG {
		gap:0;
		padding: 80px 0 0 0;
		
	}
}


@media screen and (max-width: 480px) {

	.DokSpalte {
	   	background-color: #fff;
		width: 100vw;
	}
	.DokSpalte.breit {min-width: "";}



}


/* ----------------------------- Medien  --------------------------- */
#MedienView {
	display: flex;
	gap: 16px;
	flex-wrap: wrap;
	overflow: hidden;
	margin-bottom: 20px;
}

#MedienView .ViewDiv {
	position: relative;
	height: 140px;
	cursor: pointer;
	border-radius: 5px;
    box-shadow: 3px 4px 12px rgba(0, 0, 0, 0.3);
}
#MedienView .ViewDiv:hover {opacity: .9;}

.move-bereit {
	opacity: .5;
}

.orange-hover:hover {
  box-shadow: 0 0 15px 4px orange;
  filter: brightness(1.1);
}


.ViewMnuBtn {
	z-index: 5;
	position: absolute;
	width: 40px;
	left: 0;
	top: 0;
    border-radius: 5px;
	padding: 0 7px;
    opacity: .6;
}
.ViewMnuBtn:hover {
	opacity: .9;
}

#MedienView .ViewDiv img {
	height: 100%;
}

#MedienView .Stern {
	z-index: 5;
	position: absolute;
	font-size: 24px;
	right: 0;
	top: 0;
	color: #999;
}

#MedienView .markiert {
	font-size: 28px;
	color: #FFE300;
	top: -2px;
	text-shadow: 1px 1px 0px #999; 
}

#ViewMnu {
	z-index: 7;
	position: absolute;
	left:45px;
	top: 0;
	width: 123px;
	box-shadow: 0 0 15px 7px #fff;
    background-color: rgba(255,255,255,.5);
    border-radius: 9px;
}

#ViewInfo {
	font-size: 10px;
	padding: 2px;
	background-color: rgba(255,255,255, .7);
}

.ViewBtns {
	width: 36px;
	margin-left: -4px;
}

#MediaTitel_Bez {
	font-family: sans-serif;
	font-weight: 700;
	font-size: 30px;
	color: #FF8D00;
	margin: 0 0 10px 0;
}

#insInfoHG {
	height: 30px;
	font-size: 18px;
	margin-bottom: 4px;
	background-color: #f9f9f9;
	color: #000080;
	display: none;
}
#insInfoHG span {
	background-color: red;
	color: white;
}


/*  ------------------ Mehrfachfunktionen --------------------------*/

.MehrFktHG {
	height: 0;
	font-size: 18px;
	overflow-y: hidden;
	margin-bottom: 4px;
	white-space:nowrap;
	background-color: #f9f9f9;
	transition: .5s;
	color: #000080;
}
.MehrFktHG.show {
	height: 30px;
}

.MehrStern {
	font-size: 20px;
	color: #FFE300;
	display: inline-block;
	text-shadow: 1px 1px 0 #999;	
}
.MehrStern.grau {
	color: #999;
}

#MehrAnz {
	display: inline-block;
	font-weight: bold;
	color: #0000ff;
}

.MehrTxt {
	display: inline-block;
	
}

a.MehrLink {
	display: inline-block;
	margin: 0 12px 0 5px;
	color: #0000ff;	
}
a.MehrLink {background-color: #fff;}

/*  ------------------ Bildwechsler --------------------------*/
div.DiaShow {
	z-index: 10;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    opacity: 0;
    visibility: hidden;
    display: none;
    height: 100vh;
    transition: 2s;
}
div.DiaShow.show {
  opacity: 1;
  visibility: visible;
  display: block;
}

div.DiaShow img {
    position: absolute;
    opacity: 0;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(1);
    max-width: 100vw;
    object-fit: cover;
    transition: opacity 1s ease-in-out, transform 4s ease-in-out;
    cursor: none;
}
div.DiaShow img:hover {cursor: pointer;}
div.DiaShow img.hoch {max-height: 100vh;}

#Hintergrund {
	width: 100%;
    object-fit: cover;
	transform: translate(-50%, -50%);
}

#HgLayer {
	position: fixed;
	display: none;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.2);
	backdrop-filter: blur(20px);
}

.Steuerung {
	z-index: 10;
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(128, 128, 128, 0.7);
    color: white;
    padding: 10px 20px;
    border-radius: 10px;
    transition: opacity 0.5s ease-in-out;
    align-items: center;
    transition: opacity 0.5s ease, visibility 0.5s ease;
    visibility: hidden;
    display: none;
    opacity: 0;
}
.Steuerung.show {
  opacity: 1;
  visibility: visible;
  display: block;
}

#Steuerung button {
    background: none;
    border: none;
    color: white;
    font-size: 20px;
    cursor: pointer;
}
#Steuerung button:hover {background-color: rgba(255,255,255,.3);}

#PlayBtn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	cursor: pointer;
}
#PlayBtn:hover {background-color: rgba(255,255,255,.2);}

#PlayBtnBez {
	color:#fff;
	font-size: 24px;
	line-height: .9;
}
#PlayBtn .klein {
	font-size: 16px;
	color:#fff;
}
#PlayBtnSym {
	font-size: 48px;
}

#BtnZeile {
	display: flex;
  	margin-top: 20px;
}


#Klickflaeche {
	z-index: 15;
	top: 0;
	position: absolute;
	width: 100%;
	height: calc(100% - 160px);
	display: flex;
}
#Klickflaeche > div {
	flex: 1;
  	font-size: 160px;
  	line-height: 1;
  	color: #fff;
  	opacity: 0;
	padding-top: 15%;
	cursor: pointer;
	transition: 1s;
}

#KlickflaecheUnten {
	position: fixed;
	width: 100%;
	height: 40px;
	bottom: 0;
}


/* ------------------------------------------ Bild-Optionen ---------------------------------------------- */
.SteuerDialogTitel {
	font-size: 24px;
	color: #FCFFC7;
	margin: -8px 12px 0 0;
}	

#BildOptNavigation {
	display: flex;
	align-items: center;
}

.ZoomBez {
	background-color: rgba(128,128,128, .5);

}

#BildOptNavigation button {
	padding: 0;
	font-size: 30px; 
}

#OrdBaumBtn {
	font-size: 42px;
	line-height: .9;
	margin: 0 20px 0 10px;
	cursor: pointer;
}
#OrdBaumBtn:hover {color: red;}

h1.Medien {
	display: inline;
	cursor: pointer;
}
h1.Medien:hover {background-color: #FCFFC7;}

.OrdBaumHG {
	position: absolute;
	z-index: 90;
	top: 15px;
	left: 15px;
	top: 54px;
	padding: 7px;
	min-width: 300px;
	min-height: 64px;
	background-color: #f7f7f7;
	border: 1px solid #bbb;
	border-radius: 5px;
	margin-top: 5px;
	box-shadow: 5px 5px 15px 0 #777;
	opacity: 0;
	display: none;
	visibility: hidden;
}
.OrdBaumHG.show {
	opacity: 1;
	display: block;
	visibility: visible;
}	
	
#OrdPlayBtn {
	font-size: 27px;
	cursor: pointer;
	margin-right: 12px;
}	
#OrdPlayBtn:hover {color:red;}

	
/* ------------------- Fotoserie um Eeinfügen ---------------------------- */
.FotoSerie {
	display: inline-block;
	float: left;
    min-width: 200px;
    overflow: hidden;
    padding: 7px;
    border-radius: 5px;
    margin: 20px 20px 20px 0;
	box-shadow:  3px 3px 20px 0 #ccc;
	cursor: pointer;
	background-color: #f4f4f4;
}

.FotoSerie h3 {
	margin: 0 0 9px 0;
}

.FotoSerie img {
	height: 70px;
	padding: 0 !important;	
	margin: 0 1px 0 0 !important;
}
	
	
	
	
@media screen and (max-width: 600px) {

	#MedienView .ViewDiv {height: 100px;}

}


/* ----------------------------- Uploader  --------------------------- */
.PreviewDiv {
	z-index: 20;
	position: absolute;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  flex-grow: 1;
  margin-bottom: 15px;
  border: 1px solid #ccc;
  padding: 10px;
  min-width: 200px;
  max-width: 700px;
  min-height: 50px;
  max-height: 500px;
  overflow: hidden;
  background-color: #f9f9f9;
  box-shadow: 3px 4px 12px rgba(0, 0, 0, 0.3);
}

.PreviewDiv img {
  display: block;
  max-width: 100px;
  max-height: 100px;
  height: auto;
  border: 1px solid #eee;
}


/* ----------------------------- Baum  --------------------------- */
#OrdSuchFrm {
	width: 300px;	
	display: none;
}

#OrdNeuBtnHG {
	position: relative;	
	margin-left: 24px;
}

button.NeuBtnTxt {
	all: unset;
	color: green;
	font-size: 18px;
	font-weight: 700;
	margin: -10px 0 0 24px;
	cursor: pointer;
}
button.NeuBtnTxt:hover {color: red;}

#BaumHG {
	position: relative;
	display: flex;
	flex-direction: column;
	margin-left: -9px;
	overflow-y: auto
}

#OrdnerDialog {
	z-index: 100;
	position: absolute;
	max-width: 320px;
	margin: -36px 0 0 -3px;
	padding: 10px;
	border: 1px solid #eee;
	box-shadow: 2px 2px 9px 0 #aaa;	
}

#RootOrdnerHG {
	display: flex;
	gap:5px;
	margin: 0 0 3px 28px;
	cursor: pointer;	
}

.OrdDiaBtns {
	gap: 9px;
	justify-content: center;
	margin-top: 10px;
}

.OrdnerUL {
	position: relative;
	list-style: none;
	padding-left: 16px;
}

.OrdnerLI {
	display: flex;
	gap: 5px;	
}

.OrdnerLI .mehrPfeil {
	visibility: hidden;
	font-size: 20px;
	cursor: pointer;
}
.OrdnerLI .mehrPfeil:hover {color: red;}

.OrdnerLI .IconHG, .OrdDiaIconHG {
	width: 24px;
	display: block;
	font-size: 20px;
	color: #FF9000;
	text-align: center;
	margin-top: -2px; 
	text-shadow: 1px 1px 0px #999;
	cursor: default; 
}

.OrdnerLI .OrdBez {
	cursor: pointer;
	margin-right: 4px;
}
.OrdnerLI .OrdBez:hover {background-color: #FCFFC7;}

#suchen_Ordner_Esc {
	position: absolute;
	z-index: 10;
	left: 190px;
	top: 3px;
	color: #999;
	text-decoration: none;
}

.OrdBtn, .iconRefresh {
	cursor: pointer;
	color: #999;
	margin-top: 3px;
  	font-size: 18px;
  	display: block;
  	width: 20px;
}
.OrdBtn:hover, .iconRefresh:hover {color:red;}

.OrdBezMarked, .OrdBezMarked:hover {
	font-weight: 900;
	color: #0000ff;
	background-color: #ffff99;
}

#movZiel {
	position: relative;
	margin: -12px 0 10px 30px;
	width: 140px;
	height: 20px;
	font-size: 10px;
	padding: 1px 0 0 3px;	
	display: none;
	cursor: pointer;
	color: #000;
	background-color: #FFE4C1;
}
#movZiel:hover {background-color: #FFD092;}