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

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

.Spalte25 {
	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;}
.gap5 {gap: 5px;}
.gap9 {gap: 9px;}
.gap {gap: 12px;}
.gap16 {gap: 16px;}
.gap20 {gap: 20px;}
.gap24 {gap: 24px;}
.posrel {position: relative !important;}
.inline {display: inline;}
.flexUnten {align-items: flex-end;}
.flexRechts {justify-content: flex-end;}
.flex-between {
 display: flex;
  justify-content: space-between;
}

.breit1 {width: 100%;}
.breit2 {width: 50%;}
.breit3 {width: 33%;}
.breit4 {width: 25%;}
.breit12 {width: 12px;}
.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;}

.maxbreit300 {max-width: 300px;}
.maxbreit480 {max-width: 480px;}
.maxbreit640 {max-width: 640px;}
.maxbreit800 {max-width: 800px;}

.hoch1 {height: 100%;}
.hoch24 {height: 24px;}
.hoch32 {height: 32px;}
.hoch48 {height: 48px;}
.hoch64 {height: 64px;}
.hoch72 {height: 72px;}
.hoch96 {height: 96px;}
.hoch128 {height: 128px;}

.minhoch24 {height: 24px;}
.minhoch32 {height: 32px;}
.minhoch48 {height: 48px;}
.minhoch64 {height: 64px;}
.minhoch72 {height: 72px;}
.minhoch96 {height: 96px;}
.minhoch128 {height: 128px;}
.minhoch160 {height: 160px;}
.minhoch200 {height: 200px;}
.minhoch500 {height: 500px;}


.font12 {font-size: 12px;}
.font14 {font-size: 14px;}
.font18 {font-size: 18px;}
.font20 {font-size: 20px;}
.font24 {font-size: 24px;}
.font30 {font-size: 30px;}
.font36 {font-size: 36px;}
.font48 {font-size: 48px;}

.links3 {margin-left: 3px !important;}
.links5 {margin-left: 5px !important;}
.links7 {margin-left: 7px !important;}

.oben3 {margin-top: 3px !important;}
.oben5 {margin-top: 5px !important;}
.oben7 {margin-top: 7px !important;}
.oben10 {margin-top: 10px !important;}
.oben16 {margin-top: 16px !important;}
.oben24 {margin-top: 24px !important;}

.unten3 {margin-bottom: 3px !important;}
.unten5 {margin-bottom: 5px !important;}
.unten7 {margin-bottom: 7px !important;}
.unten10 {margin-bottom: 10px !important;}
.unten16 {margin-bottom: 16px !important;}
.unten24 {margin-bottom: 24px !important;}

.leichterSchatten {box-shadow: 3px 4px 12px rgba(0, 0, 0, 0.3);}
.starkerSchatten {box-shadow: 4px 4px 15px rgba(0, 0, 0, 0.7);}

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

.flexZeileRechts {
	display: flex;
	gap: 9px;
	flex-grow:1;
	flex-wrap: wrap;		
	justify-content: flex-end;
}

#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;	
}

.LogFehler {
	text-align: center;
	font-family: sans-serif;
	font-size: 20px;
	margin-top: 12px;
	color: red;
}

.LogInfo {
	text-align: left;
	font-family: sans-serif;
	font-size: 20px;
	margin: 12px 0 12px; 0;
	color: #000080;
}


#PassView {
	width: 32px;
	float: right;
	text-align: center;
	display: inline-block;
	font-size: 18px;
	color: #555;
	cursor: pointer;
}
#PassView:hover {color: blue;}

#LogInfo {
	font-size: 20px;
	display: none;
}

#TgAnmLnk {
	display: inline-block;
}

#TgAnmIco {
	float: left;	
	margin: -4px 4px 0 0;
	
}



/* ----------------------------- 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;}
	
button.neutral {
  background: none;
  border: none;
  padding: 4px;
  margin: 0;
  color: inherit;
  font: inherit;
  cursor: pointer;
}


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;
	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;
}

a.Btn {
	display: inline-block;
	text-align: center;
	font-size: 20px;
	width: 28px;
	border: none;
	cursor: pointer;
}
a.Btn:hover {
	background-color: #eee;
}

button.Sym {
	font-size: 22px;
	width: 32px;
	height: 32px;
	padding: 2px 5px 0 0;
	color: #777;
}



/* ----------------- 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;
}

.checkinline {margin: 24px 0 0 12px;}


/* -------------------------------------- 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 {
	position: relative;
	flex-grow:1;
	min-width: 120px;
	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;}

div.DropMulti {
	flex-wrap: wrap;
	padding: 0 2px 4px 0;
	border: 1px solid #ccc;
	border-radius: 3px;
	box-shadow: 2px 2px 9px 0 #e9e9e9;
}

.DropMulti span {
	max-width: 100px;
	white-space:nowrap;
	overflow-x: hidden;
	background-color: #eee;
	cursor: default;
}

.DropMulti i {
	display: inline-block;
	font-size: 14px;
	color: #aaa;
	vertical-align: super;
	margin-left: 3px;
}
.DropMulti i:hover {color: red; cursor: pointer;}

button.DropBtn {
	z-index: 10;
	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;
}

button.input {
	height: 28px;
	min-width: 28px;
	font-size: 14px;
}

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.nachoben {
	bottom: 0 !important;
	top: auto !important;
}

div.DropList.show {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, h3.Formular button {
	width: 100%;
	font-size: 20px;
	margin: 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: 4px 0 0 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;
}


/* ------------------------------------------------- Akkordion ------------------------------------------------ */

.acc { max-width: 800px; margin: 1rem auto; }

/* Buttons (unter h3) = sichtbar als Titel */
.acc-btn {
  width: 100%;
  text-align: left;
  padding: 3px;
  border: none;
  border-top: 1px solid #ccc;
  background: transparent;
  cursor: pointer;
}

.acc-btn::after {
  content: "▼";
  font-size: 19px;
  color: #999;
  float: right;
  transition: transform 0.25s;
}

.acc-btn:focus {
  outline: none;   /* entfernt den Standardrahmen */
  box-shadow: none;
}

/* Panel - versteckt, Transition mit max-height */
.acc-panel {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  padding: 3px;
  transition: max-height 0.35s ease, opacity 0.25s;
}

.acc-btn[aria-expanded="true"]::after {
  transform: rotate(180deg);
}

.acc-panel.open {
  opacity: 1;
}




/* ----------------------------- Menue  --------------------------- */

.Menue {
	z-index: 100;
    padding: 0;
    margin: 0;
    display: none;
    list-style: none;
}
.Menue .offen {display: block;}
.Menue .vertikal {flex-direction: column;}

.Menue > li {
    position: relative;
    display: block;
    padding: 7px 12px;
    text-decoration: none;
    font-family: sans-serif;
	font-size: 16px;
	line-height: 1;
    text-align: center;
    color: #000;
    background-color: #ccc;
    background: linear-gradient(to bottom, #fff, #ccc);
	border-left: 1px solid #fff;
    border-right: 1px solid #777;
    border-bottom: 1px solid #777;
    border-width: 0 1px;
    cursor: pointer;
    border-radius: 3px;
}

.Menue > li:hover {
    background-color: #fff;
    background: linear-gradient(to bottom, #fff, #eee);
}

.SubMenue {
    z-index: 1000;
    display: none;
    position: absolute;
    top: 100%;
    background-color: #eee;
    list-style: none;
    margin: 0;
    padding: 0;
    border: 1px solid #ccc;
    border-radius: 7px;
	box-shadow:  3px 3px 20px 0 #777;
	cursor: pointer;    
}

.SubMenue li {
	font-family: sans-serif;
	font-size: 18px;
    padding:5px 10px;
    white-space: nowrap;
    text-align: left;
    border-bottom: 1px solid #ccc;
    color: #000;
  	margin: 0 !important;
}

.SubMenue li:hover {
    background-color: #fff;
}


.ContMnu {
	z-index: 100;
	position: absolute;
	padding: 1px;
	display: none;
	list-style-type: none;
	font-size: 16px;
	font-family: "Open Sans", sans-serif;
	box-shadow: 4px 4px 15px rgba(0, 0, 0, 0.7);
    background-color: #f4f4f4;
    border: 1px solid #eee;
    border-radius: 5px;
}
.ContMnu.show {display: block}

.ContMnu li {
	padding: 5px;
	cursor: pointer;
	border-bottom: 1px solid #999;
}
.ContMnu li:hover {background-color: #fff;}


/* Hauptmenü-Hover zeigt Untermenü */
.Menue li:hover > .SubMenue,
.SubMenue li:hover > .SubMenue {
    display: block;
}

.MobilMenueBtn {
	position: fixed;
	z-index: 20;
	width: 48px;
	height: 48px;
	top: 0;
	left: 0;
	opacity: .8;
	display: none;	
	cursor: pointer;
	font-size: 24px;
	padding: 3px;
}
.MobilMenueBtn:hover {opacity: 1;}


li.Mnu {
	font-family: "Open Sans", sans-serif;
	font-size: 16px;
	line-height: 1.2;
	letter-spacing: 0;
	margin: 0;	
}

div.center_col {
	margin-top: 10px;
	display: flex;
	align-items: center;
	flex-direction: column;
	width: 100%;
}

button.Main.admin {
	text-align:  left;
	margin-top: 14px;
}



/* -------------------------- Navigation ------------------------------ */

#Nav {
	max-width: 720px;
}

div.NavMain {
	font-weight: bold;
	line-height: 1;
	margin-top: 5px;	
	cursor: pointer;
}

div.NavSub {
	line-height: 1;
	margin-left: 20px;
	cursor: pointer;
}
.NavSub::before {
    content: "•";
    color: #000080;
    font-size: 16px;
    margin-right: 6px;
}

div.NavMain:hover, div.NavSub:hover {background-color: #FDFFB3;}

div.NavStelle {
	height: 9px;
	cursor: pointer;
	line-height: 1;
	background-color: #EDFFED;
}
div.NavStelle.ind20 {
	margin-left: 20px;
	background-color: #EDEFFF;
}
div.NavStelle:hover {background-color: #52F152;}
div.NavStelle.ind20:hover {background-color: #A9B7FF;}
	
#MnuPunktFRM {
	display: none;
	position: relative;
	top: -30px;
	max-width: 700px;
	background-color: #f1f1f1;
	border: 1px solid #999;
	padding: 9px;
	box-shadow: 5px 5px 12px rgba(0, 0, 0, 0.4);
}

div.NavBezDiv {
	width: 100%;
	max-width: 2Fav50px;
	height: 100px;
	margin-right: 9px;
	flex:1;
}

#Nav {
	margin-bottom: 24px;
}

div.NavDiaZl2 {
	display: flex;
	width: 100%;
	padding-right: 9px;
	flex-wrap: wrap;
	gap: 5px;
}

div.MnuPunktBtns {
	height: 36px;
	flex-grow:1;
	display: flex;
	justify-content: flex-end;
	gap:9px;
	margin-top: 14px;	
}

.TxtMnu0 {
	font-weight: 700;
	font-size: 16px;
	color: #0000ff;
	margin: 16px 0 5px 0;
	cursor: default;
}

.TxtMnuZu {
	font-weight: 300;
	font-size: 14px;
	color: #0000ff;
	margin: 5px 0 0 16px;
	cursor: default;
}



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

	.Menue {
		position: fixed;
		top: 48px;
		left: 0;
		display: none;
		padding: 7px;
		background-color: rgba(255, 255, 255, 0.8);
		box-shadow: 5px 5px 12px rgba(0, 0, 0, 0.4);
		display: flex;
		flex-direction: column;
	}

	.SubMenue {
		left: 100%;
		top: 0;
	}

	.MobilMenueBtn {
		display: block;
	}


}




/* ----------------------------- 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;
} 

#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: 110;
	width: 790px;
	top: 0;
	left: 0;
	min-height: 64px;
	padding: 10px;
	background-color: #f7f7f7;
	border: 1px solid #bbb;
	border-radius: 5px;
	box-shadow: 5px 5px 15px 0 #777;
	display: none;
}
#FormatvorlagenHG.show {display: block;}

#FormatvorlagenHG header {
	height: 32px;
	min-height: 32px;
	display: flex;
	gap:3px;
	border-radius: 5px 5px 0 0;
	background: linear-gradient(to bottom, #80B1ED, #3F85DB);	
}

#FormatvorlagenHG header label {
	display: inline-block;	
	margin: 8px 0 0 8px;;
	font-size: 16px;
	color: #000080;
	width: auto;
	cursor: pointer;
}



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;}



@media screen and (max-width: 600px) {
	#FormatvorlagenHG {
		width: 100%;
	}

}


/* ----------------------------- Dokumente  --------------------------- */

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

.DokHG.zentriert {
	  justify-content: center;
	  padding: 0;
}

.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;
	border-radius: 5px 5px 0 0;
	background: linear-gradient(to bottom, #80B1ED, #3F85DB);	
	
}

#TextTitel {
	display: flex;
	width: 100%;
}

#TitelEdit {
	width: 200px;
}

#TextTitel fieldset {
	margin: 7px;
}

#editTitel {
	font-size: 18px;
	color: #0000FF;
	margin: 4px 0 0 9px;
	cursor: pointer;
}
#editTitel:hover {color: red;}

.DokSpalte header label {
	display: inline-block;	
	margin: 8px 0 0 8px;;
	font-size: 16px;
	color: #000080;
	width: auto;
	cursor: pointer;
}

.DokSpalte header i {
	margin: 3px 0 0 7px;
}

.DokSpalte > div {
	padding: 10px;
}

.DokSpalte header fieldset {
	position: absolute;
	display: none;
	width: 300px;
	left: -5px;
	top: -6px;
	gap:0;
}


#ListeHG {
	overflow-y: auto;
}

.ListDiv {
	font-family: Ubuntu, sans-serif;
	padding: 2px !important;
	margin-bottom: 3px;
	cursor: pointer;
}
.ListDiv:hover {background-color: #FCFFC7;}
.ListDiv.markiert {
	background-color: #FCFFC7;
	box-shadow: 2px 2px 9px rgba(0, 0, 0, 0.2);
}

..ListDiv.markiert {
	color: #0000ff;
	background-color: #ffff99;
}

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

.ListDiv h5 {
	margin: 0 0 1px 0;
	font-family: Ubuntu, sans-serif;
	font-size: 14px;
	color: #777;
	line-height: 1;
}

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

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

.Stern {
	color: #999;
	font-size: 24px;
	cursor: pointer;
	margin-top: -3px;
}
.Stern:hover {
	color: #999;
}

.Stern.markiert {
	color: #FFE300;
	text-shadow: 1px 1px 0px #999; 
}



/* --------------------- Liste mit Ergebnissen --------------------*/

#ListSuchHG {
	display: flex;
	gap: 5px;
	background-color: #eee;
	padding: 3px 5px 2px 5px;
}

#ListSuchHG a {padding-top: 4px;}
#ListSuchHG a:hover {background-color: #fff;}

.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;
}


/* ---------------------------- Editor ---------------------------- */

#DocMenue {
	right: 0;
	top: 0;
}


#TextOkBtn {
	display: none;
}


@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 {
	overflow: hidden;
	margin-bottom: 20px;
}

.MedienView.large {
	display: flex;
	gap: 16px;
	flex-wrap: wrap;
}

.MedienView .ViewDiv {
	position: relative;
	cursor: pointer;
	border-radius: 5px;
}
.MedienView img:hover {opacity: .8;}

.MedienView .ViewDivZeile {
	display: flex;
	gap: 5px;
	height: 48px;
	padding: 5px;
	cursor: default;
	border-bottom: 2px solid #ddd;
}

.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: 36px;
	height: 32px;
	left: 0;
	top: 0;
    border-radius: 5px;
	padding: 0 7px;
    opacity: .6;
}
.ViewMnuBtn.aktiv {opacity: 1;}


.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; 
}


.ViewInfo {
	font-size: 14px;
	padding: 2px;
	display: none;
	margin: 12px 0;
}

.ViewInfoZeile {
	font-size: 16px;
	flex-grow: 1;
	align-items: center;
}


.ViewBtns {
	width: 32px;
    height: 32px;
	padding: 3px;
	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: 10px 0 0 10px;
	cursor: pointer;
}
#OrdBaumBtn:hover {color: red;}

#OrdnerOptBtn {
	font-size: 24px;
	margin: 0 0 0 5px;
	color: #999;
	cursor: pointer;
}
#OrdnerOptBtn:hover {color: red;}

#OrdnerInfo {
	margin: 20px 0 0 20px;	
}

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

.OrdBaumHG {
	padding: 7px;
	min-width: 180px;
}
	
#OrdPlayBtn {
	font-size: 27px;
	cursor: pointer;
	margin-right: 12px;
}	
#OrdPlayBtn:hover {
	color:red;
	display: none;	
}

	
/* ------------------- 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;
	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: 310px;
	left: .100px;
	top: -32px;
	display: none;
	padding: 10px;
	border: 1px solid #eee;
	box-shadow: 2px 2px 9px 0 #aaa;	
}
#ContMnu.show {display: block;}

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

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

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

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

.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;
	min-width: 32px;
}
.OrdnerLI .OrdBez.edit {
	border: 1px solid #eee;
	background-color: #fff;
}
.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: 19px;
  	display: block;
  	width: 32px;
  	text-align: center;
}
.OrdBtn:hover, .iconRefresh:hover {color:red;}

.OrdBezMarked, .OrdBezMarked:hover {
	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;}

#BaumHinweis {
	background-color: #fff;
	margin: 0 0 15px 0;
	color: blue;
	display: none;
}



/* ----------------------------- Kalender  --------------------------- */

/* Navigation */
#NavKalender {padding-top: 8px;}
#NavKalender i {color: #777; font-size: 20px;}
#NavKalender i:hover {color: red;}

/* Tabellen */
#Monat {
	height: 100%;
}

.MonatTab {
	height: calc(100% - 20px);
	table-layout: fixed;
}

.MonatTab, .WocheTab {
    width: 100%;
    border-collapse: collapse;
    background: white;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 3px 8px rgba(0,0,0,0.08);
}

.MonatTab th, .MonatTab td,
.WocheTab th, .WocheTab td {
    border: 1px solid #ddd;
    padding: 6px;
}

.MonatTab td {
	position: relative;	
}

.MonatTab td .innen {
	position: absolute;
	overflow: hidden;
	padding: 4px;
	display: flex;
	gap:3px;
	inset: 0;
	cursor: pointer;
}
.MonatTab td .innen:hover {background-color: #FCFFC7;}

.MonatTab .Nr {
	position: absolute;
	z-index: 10;
	right: 5px;
	top: 1px;
	font-size: 30px;
	font-weight: bold;
	color: #a8a1d5;
	background: #fff;
	padding: 0 0 5px 5px;
	margin-bottom: 2px;
}

.MonatTab th, .WocheTab th {
    background: #f4f4f4;
    font-weight: 600;
    height: 36px;
    color: #000080;
 }

.wochenende {
    background: #f6f6f6;
}
.sonntag {
    color: #f19b9b !important;
}

/* Spaltenbreiten */
.MonatTab td:first-child,
.MonatTab th:first-child,
.WocheTab td:first-child,
.WocheTab th:first-child {
    width: 55px;
    background: #f9f9f9;
    font-weight: 600;
    font-size: 16px;
    text-align: center;
    cursor: default;
    color: #000080;
}

.heute {
    background: #fff7af !important;
}

.TerminMarker {
	z-index: 5;
	border: 1px solid #ccc;
	border-radius: 10px;
	padding: 3px;
	color: #000;
	height: 25px;
	font-size: 14px;
	min-width: 32px;
	max-width: 200px;
	overflow-x: hidden;
	white-space:nowrap;
	margin-bottom: 3px;
	cursor: pointer;
}
.TerminMarker:hover {
	background: #FAFF93 !important;
	border: 1px solid red;
}

#TerminDlg h2 {
	margin: 0 0 5px 0;	
}

#TerminDlg h4 {
	color: #008000;
	margin: 0;
}

/* Responsive: auf Handy kleinere Schrift */
@media (max-width: 600px) {
    .MonatTab th, .MonatTab td
    .WocheTab th, .WocheTab td {
        font-size: 13px;
        padding: 4px;
    }
}