@charset "utf-8";
/* ===================================================== */
/* Media-Queries sind ganz am Ende */
/* ===================================================== */


/* ===================================================== */
/* Globale Definitionen für tags */
/* ===================================================== */
*{
	box-sizing: border-box;
	padding: 0px;
	margin: 0px;
	font-family: Arial, Helvetica, sans-serif;	
	font-size: 100.01%;
}
html, body {
	height: 100%;
	margin: 0;
	}

body {
	background-size: 100% 100%;
	background-repeat: no-repeat;
	background-position: center;
	background-color: whitesmoke;
	}
p {
	margin-bottom: 5px;
	} 
h1{
	margin-bottom: 10px;
	font-size: 120%;
	}
h2{
	margin-top: 10px; 	
	margin-bottom: 5px;
	font-size: 110%;
	}
h3{
	margin-top: 5px;
	margin-bottom: 5px;
	font-size: 100%;
	}
input, select, button{
	padding: 5px;
	cursor: pointer;
	}
section{
	display: none;
	margin: 10px;
	border: 1px solid black;
	border-radius: 10px;
	padding: 10px;
	margin-bottom: 10px;
	background-color: lightgray;	
	}
legend{
	margin-left: 5px;
	padding:5px;
	font-weight: bold;
	text-align: left;
	}
div[data-placeholder]:empty:before {
	content: attr(data-placeholder);
	color: #888;
	pointer-events: none;
	display: block;
	}
pre{
background-color: lightgray;	
	}

div.editable{
	background-color: #e0e0e0;
	padding: 2px;
	position: relative;
	padding-left: 20px;	
	}
div.editable::after {
	content: "✏️";
	position: absolute;
	left: 0px;
	top: 4px;
	font-size: 12px;
	opacity: 1;
	pointer-events: none;
}




/* ===================================================== */
/* Globale IDs */
/* ===================================================== */
#signature-joerg{
	background-image: url(../bilder/signature-joerg.jpg);
	background-position: 0px 10px;
	background-repeat: no-repeat;
	background-size: 200px;
	padding-top: 40px;
	padding-bottom: 10px;
	}
#overlay{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(100,100,100,0.5);
	display: none;
	z-index: 50;
	background-image: url(../bilder/processing.gif);
	background-position: center center;
	background-repeat: no-repeat;
	}
#overlayInfobox{
	display: none;
	width: 50%;
	border-radius: 10px;
	background-color: lightblue;
	padding: 10px;
	position: relative;
	top: 25%;
	left: 25%;
	text-align: center;	
	}
#overlayInfobox table{
	width: 100%;
	}
#overlayInfobox td{
	width: 25%;
	}

#overlayInfobox td.progressbar{
	border: 1px solid black;
	}

#overlayInfobox .progressbar1{
	background-color: #e4c465;
	height: 20px;
	}
#overlayInfobox .progressbar2{
	background-color: #e4c465;
	height: 20px;
	}
@keyframes progressBar {
	0% { width: 100%; }
	100% { width: 0; }
	}
	
#website{
	margin-left: auto;
	margin-right: auto;
	padding-bottom: 30px;
	}
#gpt{
	display: none;
	}
	
	
/* ===================================================== */
/* Message */
/* ===================================================== */
#message{
	}
#message fieldset{
	padding: 10px;
	}
#message legend{
	font-size: 120%;
	}
#message p{
	}



/* ===================================================== */
/* Globale Klassen */
/* ===================================================== */
.zentriert{
	text-align: center;	
	}
.links{
	text-align: left;
	}
.rechts{
	text-align: right;
	}
.error {
	color: red;
	}
.bgred{
	background-color: red ;
	}
.bggreen{
	background-color: lightgreen !important;
	}
.fett{
	font-weight: bold;
	}
.aktiv0{
	background-color: red;
	}
.aktiv1{
	background-color: lightgreen;
	}
.randGruen{
	border-color: green !important;	
	}
.randRot{
	border-color: red !important;	
	}
.schriftGruen{
	color: darkgreen;
	}
.schriftRot{
	color: red;
	}
.floatRight{
	float: right;
	}
.level1{
	background-color: green;
	}
.level2{
	background-color: orange;
	}
.level3{
	background-color: red;
	}
.toggle{
	cursor: pointer;
	}
.topline{
	border-top: 1px solid black;	
	}
.toplineBold{
	border-top: 2px solid black;	
	}
.bottomline{
	border-bottom: 1px solid black;	
	}
.bottomlineBold{
	border-bottom: 2px solid black;	
	}
.hide{
	width: 0px;
	background-color: transparent;
	border-color: transparent;
	margin-left: -20px;
	}
.btn50{
	width: 40% !important;
	margin: 0 3% 0 3%;
	}
.closeX {
	position: relative;
	}





/* ===================================================== */
/* Kopf */
/* ===================================================== */
#kopf{
	position: relative;
	background-color: lightgray;	
	height: 50px;
/*	border: 1px solid black;		*/
/*	border-radius: 10px;				*/
	font-size: 150%;
	padding-top: 12px;
/*	padding-left: 10px;				*/
/*	margin: 0px 10px 10px 10px;	*/
	text-align: center;
	width: 100%;
}
#kopf aside.info{
	padding: 2px;
	position: absolute;
	font-size: 45%;
	right: 10px;
	top: -3px;
	}
#kopf img.gpt{
	position: absolute;
	left: 10px;
	height: 25px;
	}
#kopf td:nth-child(1) {
	text-align: right;
	}
#kopf td:nth-child(2) {
	text-align: left;
	}
#kopf td:nth-child(3) {
	width: 20px;
	}
#kopf td:nth-child(4) {
	text-align: right;
	}
#kopf td:nth-child(5) {
	text-align: left;
	}



/* ===================================================== */
/* Fuss */
/* ===================================================== */
#fuss{
	position: fixed;
	bottom: 0px;
	background-color: lightgray;	
	border-top: 1px solid black;
/*	border-radius: 10px;					*/
	font-size: 80%;
	padding: 8px 10px 4px 10px;
/*	margin: 10px 10px 0px 10px;		*/
	width: 100%;
	height: 30px;
	}
#fuss a{
	color: royalblue;
	text-decoration: none;
	}
#fuss a:hover{
	color: crimson;
	}
#fuss div.adminToolsLinks{
	float: left;
	}
#fuss div.adminToolsRechts{
	float: right;
	}
#fuss div.adminToolsLinks button{
	padding: 2px;
	margin-top: -4px;
	}

/* ===================================================== */
/* Menü */
/* ===================================================== */
#menu{
	text-align: center;
	}
#menu ul{
	margin-bottom: -10px;
	}
#menu li{
	display: inline-block;
	list-style-type: none;
	border: 1px solid black;
	text-align: center;
	cursor: pointer;
	padding: 4px 8px 2px 8px;
	margin: 0px 5px 10px 5px;
	border-radius: 10px;
	}
#menu li:hover{
	background-color: yellow;
	}
#menu li.aktiv{
	background-color:lightcoral;
	}

/* ===================================================== */
/* log */
/* ===================================================== */
#log{
	position: fixed;
	top: 0;
	right: 0;
	width: 400px;
	background-color: whitesmoke;
	font-size: 60%;
	overflow: hidden;
	z-index: 10;
	}
#log fieldset{
	min-width: 0px;
	}
#log fieldset.action{
	}
#log fieldset.data{
	}
#log div.logdata{
	overflow-x: scroll;
	padding-bottom: 10px;
	}

#log .logeintrag{
	white-space: nowrap;
	}
#log button.active{
	background-color: springgreen !important;
	}

#log .logMainStart{
	background-color: aquamarine;
	}
#log .logAjaxStart{
	background-color: greenyellow;
	}
#log .logSql{
	color: darkblue;
	}
#log .logWarning{
	background-color: coral;
	font-weight: bold;
	color: white;
	}
#log .logError{
	background-color: red;
	font-weight: bold;
	color: white;
	}




/* ===================================================== */
/* Nachricht */
/* ===================================================== */
#nachricht{

	}
#nachricht button{
	float: right;
	margin-left: 10px;
	padding: 2px;
	}



/* ===================================================== */
/* Login */
/* ===================================================== */
#login{
	min-width: 230px;
	max-width: 230px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 100px;
	}
#login h3{
	text-align: center;
	}
#login label{
	display: block;
	margin-top: 10px;
	}
#login input{
	border-radius: 5px;
	width: 100%;
	}

#login input.button{
	margin-top: 10px;
	}
#login div{
	margin-top: 10px;
	}

/* ===================================================== */
/* Startseite */
/* ===================================================== */
#startseite article{
	background-color: white;
	border-radius: 10px;
	margin: 5px;
	padding: 10px;
	}
#startseite li{
	padding: 0px;
	margin: 5px 0px 5px 20px;
	}
#startseite h1{
	margin-bottom: 0px;
	padding-top: 4px;
	}

#startseite div.ebene{
	border-radius: 5px;
	}

#startseite div.ebene1{
	background-color: lavender;
	margin-left: 0px;
	padding: 10px 10px 6px 10px;
	margin-bottom: 10px;
	cursor: pointer;
	}
#startseite div.ebene2{
	display: none;
	}
#startseite div.ebene2entry{
	margin-top: 5px;
	border-radius: 5px;
	margin-left: 10px;
	padding: 10px 10px 6px 10px;
	background-color: paleturquoise;
	}
#startseite div.block {
	display: none;
	margin-top: 10px;
	}







/* ===================================================== */
/* Benutzerverwaltung */
/* ===================================================== */
#benutzerliste table{
	width: 100%;
	border-collapse: collapse;
	}
#benutzerliste table td{
	border: 1px solid black;
	}
#benutzerliste tr.geloescht{
	background-color: yellow;
	}

#benutzermenu fieldset{
	display: inline-block;
	}


/* ===================================================== */
/* Freigaben */
/* ===================================================== */
#freigaben{
	display: none;
	}
#freigaben table{
	width: 100%;
	}
#freigaben td{
	padding: 2px;
	border: 1px solid black;
	border-collapse: collapse;
	}
#freigaben .freigegeben{
	background-color: lightgreen;
	}
#freigaben .vhdThemen{
	display: inline-block;
	float: right;
	}
#freigaben .freiThemen{
	display: inline-block;
	float: left;
	}
#freigaben .ebene1{
	}
#freigaben .ebene2{
	}
#freigaben .ebene3{
	padding-left: 22px;
	}
#freigaben .ebene4{
	}
#freigaben .ebene5{
	}
#freigaben .klickbar{
	color: darkgreen;
	}

/* ===================================================== */
/* Filter */
/* ===================================================== */
#filter{
	font-size: 90%;
	}
fieldset.ebene{
	display: inline-block;
	width: 90%;
	border: 1px solid black;
	padding-bottom: 10px;
	margin: 1px;
	height: 72px;
	}
#filter select{
	width: 90%;
	}
#filter button{
	width: 90%;
	}
#filter input[type=date]{
	background-color: #e9e9ed;
	border: 1px solid #8f8f9d;
	border-radius: 3px;
	padding: 6px;
	margin-right: 10px;
	width: 80%;
	}
#filter input[type=checkbox]{
	font: inherit;
	width: 1.15em;
	height: 1.15em;
	transform: translateY(0.2em);	
  }

#filter button[name=btnshowAnswers].import{
	background-color: green !important;
	}
#filter fieldset label{
	cursor: pointer;
	}
#filter fieldset .button-kompakt{
	width: 45%;
	}


/* ===================================================== */
/* Fragen */
/* ===================================================== */
#fragen{
	display: none;
	}

#fragen div.vFrageBlock{
	background-color: salmon;
	}
#fragen div.vFrageVorspann{
	padding: 2px;
	margin-top: 10px;	
	margin-left: 60px;
	background-color: lightblue;
	border-top: 1px solid black;
	}
#fragen div.vFrageText{
	padding: 2px;
	margin-left: 60px;
	background-color: violet;
	border-top: 1px solid black;
	font-size: 130%;
	}
#fragen div.vFrageInfo{
	padding: 2px;
	background-color: yellow;
	margin-left: 15px;
	margin-right: 2px;
	width: 100px;
	border-top: 1px solid black;
	float: left;
	text-align: left;
	display: none;
	}
#fragen div.vFrageAntwort{
	padding: 2px;
	background-color: yellow;
	margin-left: 10px;
	border-top: 1px solid black;
	display: none;
	}
#fragen div.vFrageID{
	background-color: orange;
	float: left;
	width: 60px;
	padding: 2px;
	text-align: right;
	}
#fragen div.vFrageLevel{
	background-color: orange;
	float: right;
	width: 40px;
	padding: 2px;
	text-align: right;
	font-size: 130%;
	}

#fragen div.richtig{
	width: 16px;
	float: left;
	height: 16px;
	border-radius: 8px;
	margin-top: 2px;
	padding: 0px;
	margin-right: 10px;
	text-align: center;
	background-color: green;
	}
#fragen div.falsch{
	width: 16px;
	float: left;
	height: 16px;
	border-radius: 8px;
	margin-top: 2px;
	padding: 0px;
	margin-right: 10px;
	text-align: center;
	background-color: red;
	}



/* ===================================================== */
/* Themen */
/* ===================================================== */
#themen div.vhdThemen{
	display: inline-block;
	width: 49%;
	min-height: 70px;
	}
#themen div.neuesThema{
	float: right;
	width: 49%;
	}
#themen h2{
	font-size:110%;
	}
#themen div.themabox{
	border: 1px solid gray;
	margin: 2px;
	}
#themen div.kopf{
	font-weight: bold;
	}
#themen div.delete{
	display: inline-block;
	width: 20px;
	float: left;
	margin-right: 2px;
	padding: 2px;
	text-align: center;
	}
#themen div.fragen{
	display: inline-block;
	width: 80px;
	float: left;
	margin-right: 2px;
	padding: 2px;
	background-color: yellow;
	text-align: center;
	}
#themen div.thema{
	padding: 2px;
	}
#themen div.aktivRed{
	background-color: red !important;
	}
#themen div.aktivOrange{
	background-color: orange !important;
	}
#themen div.aktivGreen{
	background-color: lightgreen !important;
	}


/* ===================================================== */
/* Test */
/* ===================================================== */
#startTest{
	margin: 10px;
	border: 1px solid black;
	border-radius: 10px;
	padding: 10px;
	margin-bottom: 10px;
	}
#startTest p{
	margin-bottom: 10px;
	}
#chooseSusWrapper {
  width: 400px;
  height: 50px;
  overflow: hidden;
  border: 2px solid #aaa;
  margin: 20px auto;
  position: relative;
  font-size: 1.5em;
  text-align: center;
}
#chooseSusBox {
  display: flex;
  flex-direction: column;
  transition: transform 0.2s ease-out;
  color: transparent;
}
.susSlot {
  height: 50px;
  line-height: 50px;
  background: #f0f0f0;
}
#frageblock div.vorspann{
	margin-top: 10px;
	margin-bottom: 5px;
	}
#frageblock div.bereich{
	}
#frageblock div.frage{
	}
#frageblock div.antwort{
	border: 2px solid black;
	width: 90%;
	font-size: 110%;
	text-align: center;
	padding: 10px;
	margin-bottom: 10px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 10px;
	border-radius: 10px;
	cursor: pointer;
	}
	
#frageblock div.btnBox{
	margin: 20px -10px 10px -10px;
	padding-left: 0px;
	padding-right: 0px;
	}
#btnWeiter1, #btnWeiter2, #btnProblem, #btnKI{
	padding: 5px;
	}
#btnWeiter1, #btnWeiter2{
	margin-top:20px;
	margin-bottom: 20px;
	}
#btnProblem{
	margin-top:20px;
	margin-left: 10px;
	}
#btnKI{
	margin-top:20px;
	margin-right: 10px;
	float: right;
	}



#btnSendProblem{
	float: right;
	}

#problembeschreibung{
	min-height: 80px;
	width: 100%;
	text-align: left; 
	background-color: white;
	padding: 5px;
	border-radius: 5px;
	margin-top: 10px;
	margin-bottom: 10px;
	}

#btnInsertFrage{
	float: right;
	margin-top: 15px;
	}
#ki fieldset{
	padding: 10px;
	}
#ki li{
	margin-left: 20px;
	}
#kiPrompt{
	background-color: ghostwhite;
	margin-top: -10px;
	padding: 10px;
	min-height: 100px;
	}
#kiAnswer{
	background-color: ghostwhite;
	margin-top: -10px;
	padding: 10px;
	min-height: 30px;
	}
#btnSendPrompt, #btnCancelPrompt {
	margin-top: 10px;
	}

/* ===================================================== */
/* Noten */
/* ===================================================== */
#diagrammNoten{
	position: relative;
	min-height: 42px;
	}
#diagrammNoten button.close-btn{
	top: 12px;
	}
	
#listeNoten div.neuerEintrag{
	background-color: lightcyan;
	padding: 5px;
	border-radius: 5px;
	margin-top: 10px;
	}
#listeNoten div.klickbar{
	cursor: pointer;
	}
#listeNoten div.note{
	float: right;
	width: 30px;
	border-radius: 5px;
	padding: 5px;
	margin-left: 5px;
	margin-bottom: 5px;
	}
#listeNoten div.vorspann{
	font-size: 90%;
	font-style: italic;
	margin-bottom: 5px;
	}	
#listeNoten div.frage{
	margin-top: 5px;
	background-color: beige;
	padding: 5px;
	margin-left: 10px;
	border-radius: 0 5px 5px 0;
	}
#listeNoten div.antworten{
	margin-left: 30px;
	border-radius: 5px;
	display: none;
	margin-top: 5px;
	font-size: 80%;
	border-left: 1px solid black;
	border-right: 1px solid black;
	border-bottom: 1px solid black;
	background-color: aliceblue;
	}
#listeNoten div.antwort{
	padding: 2px;
	margin-bottom: 2px;
	}
#listeNoten .note1{
	background-color:hsl(120, 70%, 50%); /* Grün */ 
	}
#listeNoten .note2{
	background-color:hsl(90, 70%, 50%);
	}
#listeNoten .note3{
	background-color:hsl(60, 70%, 50%); 
	}
#listeNoten .note4{
	background-color:hsl(30, 70%, 50%); 
	}
#listeNoten .note5{
	background-color:hsl(0, 70%, 50%);   /* Rot */ 
	}
#listeNoten .note6{
	background-color:hsl(0, 70%, 50%);   /* Rot */ 
	}
#listeNoten button.btnDownload{
	float: right;
	margin-top: 5px;
	padding-bottom: 2px;
	margin-left: 10px;
	border-radius: 5px;
	}
#listeNoten div.level{
	border-radius: 5px 0 0 5px;
	margin-left: 10px;
	}

/* ===================================================== */
/* Prompts */
/* ===================================================== */
#promptData input[name=themenliste]{
	width: 100%;
	}
#promptData fieldset{
	text-align: center;
	}
#prompt textarea{
	resize: vertical;
	padding: 10px;
	}

#promptData fieldset.small{
	display: inline-block;
	width: 20%;
	border: 1px solid black;
	}
#promptData input[type=number]{
	width: 90%;
	}
#promptData fieldset.large{
	width: 100%;
	border: 1px solid black;
	}
#promptData fieldset.flex{
	border: 1px solid black;
	display: inline-block;
	}
#prompt textarea{
	width: 98%;
	}
#prompt .aktiv{
	border-color: green !important;
	color: black !important;
	}
#prompt div[name=preParent], #prompt div[name=postParent]{
	width: 98%;
	padding: 5px;
	background-color: lightgray;
	color: darkgray;
	border: 1px solid black;
	display: inline-block;
	}

#promptErgebnis div.ap{
	margin-bottom: 10px;
	}
#promptErgebnis span.typ{
	font-weight: bold;
	}
#promptErgebnis span.Unklarheit{
	color: orange;
	}
#promptErgebnis span.Fehler{
	color: red;
	}
#promptErgebnis span.Hinweis{
	color: pink;
	}
#promptErgebnis div.frage{
	font-weight: bold;
	}
#promptErgebnis ul{
	margin-left: 20px;
	}





#promptButtons button[name=btnImportSql].import{
	background-color: green !important;
	}
#promptButtons button[name=btnAutoSave].import{
	background-color: green !important;
	}

#promptPicture img[name=promptPicture]{
	width: 98%;
	}
#promptPicture input[name=picdesc] {
	width: 98%;
	}



button.close-btn {
	position: absolute;
	top: 0.3em; /* leicht anpassen */
	right: 0.3em; /* leicht anpassen */
	background: seashell;
	border: 1px solid black;
	border-radius: 5px;
	font-size: 1em;
	cursor: pointer;
	color: #900;
	}

button.close-btn:hover {
	color: red;
	}


#website[data-modul=prompts] fieldset{
	padding-bottom: 5px;
	}







/* ===================================================== */
/* Test */
/* ===================================================== */
#ergebnis{
	text-align: center;
	font-size: 120%;
	}
div.marked{
	background-color: lightskyblue;
	}
#frageblock h3{
	margin-bottom: 10px;
	text-decoration: underline;
	}


#frageblock div.level{
	width: 30px;
	float: right;
	height: 30px;
	border-radius: 15px;
	padding: 6px;
	text-align: center;
	}

#problembutton{
	background-color: lightgoldenrodyellow;
	float: left;
	width: 200px;
	margin-top: 20px;
	border-radius: 5px;
	}


/* ===================================================== */
/* Seitenstruktur Themen */
/* ===================================================== */
#themen table{
	width: 100%;
	}
#themen label{
	font-size: 80%;
	display: block;
	}
#themen select{
	width: 100%;
	}
#themen input{
	width: 100%;
	}
#themen td{
	width: 25%;
	}

div.pBlock{
	background-color: salmon;
	}
div.pInfo{
	margin-top: 10px;	
	background-color: yellow;
	border-bottom: 1px solid black;
	}
div.pHinweis{
	padding: 2px;
	margin-top: 0px;	
	margin-left: 40px;
	background-color: lightblue;
	border-bottom: 1px solid black;
	}
div.pPrompt{
	padding: 2px;
	margin-left: 40px;
	background-color: violet;
	border-bottom: 1px solid black;
	font-size: 100%;
	}
div.pHinweisNeu{
	padding: 2px;
	margin-top: 0px;	
	margin-left: 40px;
	background-color: lightblue;
	border-bottom: 1px solid black;
	}
div.pPromptNeu{
	padding: 2px;
	margin-left: 40px;
	background-color: violet;
	border-bottom: 1px solid black;
	font-size: 100%;
	}
div.pLabel{
	font-size: 80%;
	background-color: pink;
	margin-left: 40px;
	display:inline-block;
	padding-left: 5px;
	padding-right: 5px;
	border-top-right-radius: 5px;
	border-top-left-radius: 5px;
	}
	
#listeThemen table{
	width: 100%;
	}
#listeThemen td{
	padding: 2px;
	border: 1px solid black;
	border-collapse: collapse;
	}
#listeThemen td:last-of-type{
	background-color: yellow;
	width: 10%;
	}
#listeThemen .freigegeben{
	background-color: lightgreen;
	}
	
	
#running{
	display: none;
	}
td.waiting{
	background-color: red;
	}
	

/* ===================================================== */
/* Verwaltung */
/* ===================================================== */



/* Gesamtcontainer auf fixe Breite zentrieren */
#verwaltung {
	font-family: sans-serif;
	}

#verwaltung-container {
}

#verwaltung .thema-count{
	float: right;
	padding-left: 10px;
	padding-right: 10px;
	}

/* Linke Seite: Themenbaum */
#verwaltung-links {
	width: 50%;	/* 30% von 1200px wäre 360px */
	border-right: 1px solid #ccc;
	padding-right: 15px;
	box-sizing: border-box;
	float: left;
}

#verwaltung-links ul {
	list-style: none;
	padding-left: 0;
	margin: 8px 0px 0px 0px;
}

#verwaltung-links li {
	position: relative;
	padding: 5px 0;
	border: 1px solid black;
	margin: 2px 0px;
}

#verwaltung-links .toggle {
	cursor: pointer;
	margin-right: 10px;
	margin-left: 10px;
	font-size: 16px;
	color: #444;
}

/* ************************************** */
/* Anfang Hack für Freigaben */
/* ************************************** */
/* Freigabe-Hervorhebung: hellgrün voll, hellgrün schraffiert bei teilweiser Freigabe */
#themenbaum .fthema-name.freigabe-full { background: #d9f4d5; border-left: 4px solid #5ba85a; }
#themenbaum .fthema-name.freigabe-partial { background: repeating-linear-gradient(45deg, #e7f6e2, #e7f6e2 10px, #d9efcf 10px, #d9efcf 20px); border-left: 4px solid #7abf69; }
#themenbaum .fthema-name.freigabe-none { background: transparent; border-left: 4px solid transparent; }
/* Flat tree structure with thema-zeile */
#themenbaum .fthema-zeile { 
	display: flex; 
	align-items: center; 
	gap: 4px; 
	padding: 3px 6px;
	margin-bottom: 2px;
	flex-wrap: nowrap;
	min-height: 26px;
	border-bottom: 1px solid rgba(0,0,0,0.05);
	}
#themenbaum .fthema-zeile:hover { background: rgba(0,0,0,0.03); }
#themenbaum .fthema-zeile.active-thema { background: rgba(59,130,246,0.15); }
#themenbaum .ftoggle { cursor: pointer; min-width: 16px; text-align: center; }
#themenbaum .ftoggle.fleer { visibility: hidden; }
#verwaltung .fstatus-0 { color: #0a0 !important; }       /* grün */
#verwaltung .fstatus-1 { color: #c00 !important; }       /* rot */
#verwaltung .fstatus-2 { color: #e67e00 !important; }    /* orange */
#verwaltung-links .ftoggle {
	cursor: pointer;
	width: 16px;
	text-align: center;
	font-size: 14px;
	color: #444;
	flex-shrink: 0;
}
#verwaltung-links .fthema-name {
	cursor: pointer;
	flex: 1;
	min-width: 0;
	border-radius: 4px;
	padding: 3px 8px;
	min-height: 20px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	}
#verwaltung-links .fthema-count {
	flex-shrink: 0;
	color: #444;
	white-space: nowrap;
	display: flex;
	align-items: center;
	gap: 10px;	
	}
#verwaltung-links .ficonbar {
    display: inline-flex;
    gap: 6px;
    flex-shrink: 0;
}
#verwaltung-links .fleer {
	visibility: hidden;
	}
#verwaltung-rechts .ffrage-text {
	font-weight: bold;
	margin-bottom: 4px;
	width: 95%; 
}
#verwaltung-links .ficon {
	cursor: pointer;
	font-size: 16px;
	margin-left: 0px;
	margin-right: 10px;
	color: #444;
}


/* ************************************** */
/* Ende Hack für Freigaben */
/* ************************************** */


#verwaltung-links .leer {
	margin-right: 10px !important;
	margin-left: 10px !important;
	font-size: 16px !important;
	display: inline-block;
	width: 16px;
	}

#verwaltung-links .thema-name {
	cursor: pointer;
	display: inline-block;
	width: 50%;
	}

#verwaltung-links .iconbar{
	display: inline-block;
	float: right;
	}
#verwaltung-links .icon {
	cursor: pointer;
	font-size: 16px;
	margin-left: 10px;
	margin-right: 10px;
	color: #444;
	display: inline-block;
	width: 16px;
	}

/* Rechter Bereich */
#verwaltung-rechts {
	box-sizing: border-box;
	padding-left: 50%;
}

#verwaltung-rechts div.frage-problem {
	background: rgba(239, 68, 68, 0.08);
	border-left: 3px solid #ef4444;
	padding: 8px 8px;
	margin: 8px 0 2px 0;
	border-radius: 6px;
	}

#verwaltung-rechts span.problem {
	float: right;
	margin-right: 10px;
	cursor: pointer;
	color: darkgreen;
	}


#verwaltung-rechts .frage {
	border-bottom: 1px solid black;
	padding: 4px 0px 0px 0px;
}

#verwaltung-rechts .frage-text {
	font-weight: bold;
	margin-bottom: 4px;
	width: 75%; 
}
#verwaltung-rechts .frage-vorspann {
	margin-bottom: 4px;
	width: 75%; 
	}

#verwaltung .korrekt-toggle {
	cursor: pointer;
	margin-right: 4px;
	font-weight: bold;
}

#verwaltung .icon[data-korrekt="1"] {
	color: #0a0;	/* grün */
}

#verwaltung .icon[data-korrekt="0"] {
	color: #c00;	/* rot */
}

#verwaltung div.antwort-text{
	display: inline-block;
	width: 95%;
	margin-bottom: 1px;
	}

#verwaltung .geloescht {
	text-decoration: line-through;
/*	opacity: 0.6;*/
	color: #666;
	}
/* Level-Farben */
#verwaltung .level-1 { color: #0a0 !important; }       /* grün */
#verwaltung .level-2 { color: #e67e00 !important; }    /* orange */
#verwaltung .level-3 { color: #c00 !important; }       /* rot */

#verwaltung .status-0 { color: #c00 !important; }       /* rot */
#verwaltung .status-1 { color: #0a0 !important; }       /* grün */
#verwaltung .status-2 { color: #e67e00 !important; }    /* orange */



/* Popup-Container */
#level-popup {
	position: absolute;
	background: #fff;
	border: 1px solid #ccc;
	border-radius: 4px;
	padding: 6px;
	box-shadow: 0 2px 6px rgba(0,0,0,0.25);
	display: none;
	z-index: 2000;
}
#level-popup div {
	padding: 4px 6px;
	cursor: pointer;
}
#level-popup div:hover {
	background: #eee;
}
#neu-popup {
	position: absolute;
	background: #fff;
	border: 1px solid #ccc;
	border-radius: 4px;
	padding: 6px;
	box-shadow: 0 2px 6px rgba(0,0,0,0.25);
	display: none;
	z-index: 2000;
}
#neu-popup fieldset{
	padding: 5px;
	}
#neu-popup legend{
	margin-left: 0px;
	}




#verwaltung-rechts .frage-icons {
	margin-top: -5px;
	float: right;
	}

#verwaltung-rechts .frage-icons .icon {
	cursor: pointer;
	font-size: 16px;
	margin-left: 10px;
	margin-right: 10px;
	color: #444;
	}
.undelete {
	color: darkgreen !important;
	font-weight: bold;
	}
.loeschen {
	color: red !important;
	font-weight: bold;
	}
.neu{
	color: darkgreen !important;
	font-weight: bold;
	}
#verwaltung-rechts .frage-icons .problem{
	color: #f00 !important;
	font-weight: bold;
	}
#verwaltung-rechts div.frage-problem{
	color: red;
	}

.blink {
	animation-name: animation_blink_5s;
	animation-timing-function: ease-in;
	animation-duration: 1s; 
	animation-iteration-count: 5;   
	animation-fill-mode: both;
	}

@keyframes animation_blink_5s {
	0% {  
		background-color: transparent;
		}
	50% {  
		background-color: red;
		}
	100% {  
		background-color: transparent;
		}
	}



/* Antwortenbereich */
#verwaltung-rechts .antworten-container {
	margin-left: 10px;
	padding: 5px 0;
	border-left: 2px solid #ccc;
}

/* Verschiebe-Dialog */
#verschiebe-dialog {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.4);
	display: none; /* wird später per JS sichtbar */
	align-items: center;
	justify-content: center;
}

#verschiebe-content {
	background: #fff;
	padding: 20px;
	border-radius: 4px;
	min-width: 280px;
	box-shadow: 0 0 8px rgba(0,0,0,0.3);
}

#verschiebe-content h4 {
	margin-top: 0;
}

#verschiebe-content button {
	margin-top: 10px;
	margin-right: 8px;
}

#verwaltung .active-thema {
	background-color: lightyellow;
}


#zielbaum-container {
	border: 1px solid #ccc;
	padding: 10px;
	margin-top: 10px;
	background: #fafafa;
	position: relative;
	}
#zielbaum-container ul {
	list-style: none;
	padding-left: 0;
	margin-left: 0;
}

#zielbaum-container li {
	padding: 2px 0;
	border-bottom: 1px dashed #eee;
}
#zielbaum-container .thema-name {
	display: inline-block;
	padding: 2px 4px;
}
#zielbaum-container .toggle {
	cursor: pointer;
	margin-right: 6px;
}
#zielbaum-container .ziel-ziel {
	color: #0a0;
	font-weight: bold;
	cursor: pointer;
	margin-left: 8px;
}
#zielbaum-container .ziel-ziel:hover {
	color: #080;
}
#zielbaum-container .ziel-disabled {
	color: #aaa;
	margin-left: 8px;
	cursor: not-allowed;
}
#zielbaum-container .iconbar {
	display: inline-block;
	float: right;
	width: 20px; /* Platzhalter für linke Icons */
}
#zielbaum-container li:hover {
	background: #f0f0f0;
}





#zielbaum-links {
	border: 1px solid #ccc;
	padding: 10px;
	margin-top: 10px;
	background: #fafafa;
	position: relative;
	}
#zielbaum-links ul {
	list-style: none;
	padding-left: 0;
	margin-left: 0;
}

#zielbaum-links li {
	padding: 2px 0;
	border: 0px;
	}
#zielbaum-links .thema-name {
	display: inline-block;
	padding: 2px 4px;
}
#zielbaum-links .toggle {
	cursor: pointer;
	margin-right: 6px;
}



#zielbaum-links .ziel-ziel {
	color: #0a0;
	font-weight: bold;
	cursor: pointer;
	margin-left: 8px;
}
#zielbaum-links .ziel-ziel:hover {
	color: #080;
}
#zielbaum-links .ziel-disabled {
	color: #aaa;
	margin-left: 8px;
	cursor: not-allowed;
}
#zielbaum-links .iconbar {
	display: inline-block;
	float: right;
	width: 20px; /* Platzhalter für linke Icons */
}
#zielbaum-links li:hover {
	background: #f0f0f0;
}








/* ===================================================== */
/* kurztest */
/* ===================================================== */



/* Gesamtcontainer auf fixe Breite zentrieren */
#kurztest {
	font-family: sans-serif;
	}

#kurztest-container {
}

#kurztest .thema-count{
	float: right;
	padding-left: 10px;
	padding-right: 10px;
	}

/* Linke Seite: Themenbaum */
#kurztest-links {
	width: 40%;	/* 30% von 1200px wäre 360px */
	border-right: 1px solid #ccc;
	padding-right: 15px;
	box-sizing: border-box;
	float: left;
}

#kurztest-links ul {
	list-style: none;
	padding-left: 0;
	margin: 8px 0px 0px 0px;
}

#kurztest-links li {
	position: relative;
	padding: 5px 0;
	border: 1px solid black;
	margin: 2px 0px;
}

#kurztest-links .toggle {
	cursor: pointer;
	margin-right: 10px;
	margin-left: 10px;
	font-size: 16px;
	color: #444;
}
#kurztest-links .leer {
	margin-right: 22px;
	margin-left: 10px;
	font-size: 16px;
	}

#kurztest-links .thema-name {
	cursor: pointer;
	display: inline-block;
	width: 60%;
	}

#kurztest-links .iconbar{
	display: inline-block;
	float: right;
	}
#kurztest-links .icon {
	cursor: pointer;
	font-size: 16px;
	margin-left: 10px;
	margin-right: 10px;
	color: #444;
}

/* Rechter Bereich */
#kurztest-rechts {
	box-sizing: border-box;
	padding-left: 40%;
	}
#kurztest-rechts .frage {
	border-bottom: 1px solid black;
	padding: 6px 0;
	}
#kurztest-rechts .frage-text {
	font-weight: bold;
	margin-bottom: 4px;
	}
#kurztest .korrekt-toggle {
	cursor: pointer;
	margin-right: 4px;
	font-weight: bold;
	}
#kurztest .korrekt-toggle[data-korrekt="1"] {
	color: #0a0;	/* grün */
	}
#kurztest .korrekt-toggle[data-korrekt="0"] {
	color: #c00;	/* rot */
	}
#kurztest div.antwort-text{
	display: initial;
	}
#kurztest .geloescht {
	text-decoration: line-through;
/*	opacity: 0.6;*/
	color: #666;
	}
/* Level-Farben */
#kurztest .level-1 { color: #0a0 !important; }       /* grün */
#kurztest .level-2 { color: #e67e00 !important; }    /* orange */
#kurztest .level-3 { color: #c00 !important; }       /* rot */
#kurztest-rechts .frage-icons {
	margin-top: -5px;
	float: right;
	}
#kurztest-rechts .frage-icons .icon {
	cursor: pointer;
	font-size: 16px;
	margin-left: 10px;
	margin-right: 10px;
	color: #444;
	}
/* Antwortenbereich */
#kurztest-rechts .antworten-container {
	margin-left: 10px;
	padding: 5px 0;
	border-left: 2px solid #ccc;
	}
#kurztest .active-thema {
	background-color: lightyellow;
	}

#kurztest-auswahl{
	}
#kurztest-auswahl .frage-auswahl {
	border-bottom: 1px solid black;
	padding: 6px 0;
	margin-bottom: 5px;
	}
#kurztest-auswahl .frage-text {
	font-weight: bold;
	margin-bottom: 4px;
	}
#kurztest-auswahl .korrekt-toggle {
	cursor: pointer;
	margin-right: 4px;
	font-weight: bold;
	}
#kurztest-auswahl .korrekt-toggle[data-korrekt="1"] {
	color: #0a0;	/* grün */
	}
#kurztest-auswahl .korrekt-toggle[data-korrekt="0"] {
	color: #c00;	/* rot */
	}
#kurztest-auswahl div.antwort-text{
	display: initial;
	}
/* Level-Farben */
#kurztest-auswahl .level-1 { color: #0a0 !important; }       /* grün */
#kurztest-auswahl .level-2 { color: #e67e00 !important; }    /* orange */
#kurztest-auswahl .level-3 { color: #c00 !important; }       /* rot */
#kurztest-auswahl .frage-icons {
	margin-top: -1px;
	float: right;
	}
#kurztest-auswahl .frage-icons .icon {
	cursor: pointer;
	font-size: 16px;
	margin-left: 10px;
	margin-right: 10px;
	color: #444;
	}
#kurztest-status{
	margin-bottom: 5px;
	border-bottom: 1px solid black;	
	}

#kurztestAlle{
	}
#kurztestAlle table{
	border-collapse: collapse;
	width: 100%;
	}
#kurztestAlle tr{
	height: 40px;
	}
#kurztestAlle th{
	text-align: left;
	padding: 2px 10px;
	border-bottom: 1px solid black;
	}
#kurztestAlle td{
	padding: 2px 10px;
	border-bottom: 1px solid black;
	}

#kurztestAlle tr.open{
	background-color: lightcoral;
	}
#kurztestAlle tr.running{
	background-color: lightpink;
	}
#kurztestAlle tr.closed{
	background-color: lightgreen;
	}
#kurztestAlle tr.deleted{
	background-color: darkgray;
	}
#kurztestAlle button{
	width: 100%;
	}

#ktKlasse{
	}
#ktKlasse table{
	border-collapse: collapse;
	width: 100%;
	}
#ktKlasse tr{
	height: 40px;
	}
#ktKlasse th{
	text-align: left;
	padding: 2px 10px;
	border-bottom: 1px solid black;
	}
#ktKlasse td{
	padding: 2px 10px;
	border-bottom: 1px solid black;
	}
#ktKlasse tr.open{
	background-color: lightcoral;
	}
#ktKlasse tr.running{
	background-color: lightpink;
	}
#ktKlasse tr.closed{
	background-color: lightgreen;
	}
#ktKlasse tr.deleted{
	background-color: darkgray;
	}



/* ===================================================== */
/* Einstellungen */
/* ===================================================== */
#einstellungen input[type=checkbox]{
	font: inherit;
	width: 1.15em;
	height: 1.15em;
	transform: translateY(0.2em);	
	}

#pwdKriterien{
	text-align: left;
	padding: 5px;
	margin-bottom: 10px;
	}
#pwdKriterien legend{
	font-size: 90%;
	margin-bottom: -5px;
	}
#pwdKriterien li{
	font-size: 80%;
	margin-left: 10px;
	}
#pwd-area {
	text-align: left;
	}
#pwd-area label{
	display: block;
	}
#pwd-area input[type=password]{
	width: 60%;
	}
#password-strength-status, #password-equal-status {
	float: right;
	width: 30%;
	height: 2em;
	font-size:80%;
	padding: 5px 10px;
	color: #000000;
	border-radius: 4px;
	margin-top: 5px;
	text-align: center;
	}
#btnSavePassword{
	margin-top: 10px;
	}
#pwChangeMsg{
	float: right;
	width: 50%;
	margin-top: 20px;
	}
.pwd-info {
	list-style: none;
	padding: 0;
}
.pwd-info .invalid {
	padding-left: 30px;
	background:url(../bilder/invalid.png) no-repeat 0 50%;
	color:#ec3f41;
}
.pwd-info .valid {
	padding-left: 30px;
	background:url(../bilder/valid.png) no-repeat 0 50%;   
	color:#3a7d34;
}
.veryweak-password {
	background-color: #FF0000;
}
.weak-password {
	background-color: #d35400;
}
.medium-password {
	background-color: #f39c12;
}
.average-password {
	background-color: #f1c40f;	
}
.strong-password {
	background-color: #229954;
}
#einstellungen fieldset.ebene{
	display: inline-block;
	width: 90%;
	border: 1px solid black;
	padding-bottom: 10px;
	margin: 1px;
	padding-left: 10px;
	padding-right: 10px;
	height: auto;
	}
#einstellungen input[type=password]{
  }
#einstellungen button[id=savePassword]{
  }

#einstellungen div.dashboardModules label{
	display: inline-block;
	width:32%;
	text-align: left;
	padding: 5px;
	margin-right: 10px;
	}

#einstellungen div.dashboardModules label.important{
	color: red;
	}
#einstellungen div.dashboardModules label.optional{
	color: darkgreen;;
	}



/* ===================================================== */
/* Chat */
/* ===================================================== */
#chatProtokollContent {
	min-height: 20px;
	max-height: 200px;
	overflow-y: auto;
	}
#oldChatContent {
	min-height: 20px;
	max-height: 600px;
	overflow-y: auto;
	resize: vertical;
	}
#oldChat div.chat-user{
	float: right;
	width: 80%;
	border-radius: 5px;
	background-color: lightgreen;
	padding: 5px;
	margin: 5px;
	}
#oldChat div.chat-api{
	float: left;
	width: 80%;
	border-radius: 5px;
	background-color: lightblue;
	padding: 5px;
	margin: 5px;
	white-space: pre-wrap;
	}
#showChat{
	width: 220px;
	}
#showChat option.chat_neu{
	}
#showChat option.chat_aktiv{
	color: orangered;
	}
#showChat option.chat_pruefe{
	color: red;
	}
#showChat option.chat_abgeschlossen{
	color: green;
	}
	
	
	
	
	
#chatOutput {
	min-height: 20px;
	max-height: 400px;
	overflow-y: auto;
	}
#chatOutput div.chat-user{
	float: right;
	width: 80%;
	border-radius: 5px;
	background-color: lightgreen;
	padding: 5px;
	margin: 5px;
	}
#chatOutput div.chat-api{
	float: left;
	width: 80%;
	border-radius: 5px;
	background-color: lightblue;
	padding: 5px;
	margin: 5px;
	white-space: pre-wrap;
	}
#chatInputBar{
	position: relative;
	background-color: white;
	padding: 5px;
	margin: 5px;
	border-radius: 5px;
	}
#chatInput {
	resize: vertical;
	width: 100%;
	border: 0px;
	padding-right: 100px;
	}
#btnChatSend{
	position: absolute;
	right: 10px;
	bottom: 10px;
	}

#chatBezeichnung fieldset.ebene{
	display: inline-block;
	width: 32%;
	border: 1px solid black;
	padding-bottom: 10px;
	margin: 1px;
	height: 72px;
	}



/* ===================================================== */
/* pruefeQA-Bereich */
/* ===================================================== */
#pruefeQA fieldset{
	padding: 10px;
	}
#pruefeQA .frage {
	border-bottom: 1px solid black;
	padding: 6px 0;
	min-height: 90px;
	}
#pruefeQA .frage-text {
	font-weight: bold;
	margin-bottom: 4px;
	width: 80%;
	}
#pruefeQA .frage-vorspann {
	margin-bottom: 4px;
	width: 80%;
	}
#pruefeQA .korrekt-toggle {
	cursor: pointer;
	margin-right: 4px;
	font-weight: bold;
	}

#pruefeQA .korrekt-toggle[data-korrekt="1"] {
	color: #0a0;	/* grün */
	}
#pruefeQA .korrekt-toggle[data-korrekt="0"] {
	color: #c00;	/* rot */
	}

#pruefeQA div.antwort-text{
	display: inline-block;
	width: 95%;
	}
#pruefeQA .hinweis{
	font-weight: bold;
	color: red;
	padding-bottom: 5px;
	border-bottom: 1px solid black;
	margin-bottom: 10px;
	}
#pruefeQA .geloescht {
	text-decoration: line-through;
/*	opacity: 0.6;*/
	color: #666;
	}
/* Level-Farben */
#pruefeQA .level-1 { color: #0a0 !important; }       /* grün */
#pruefeQA .level-2 { color: #e67e00 !important; }    /* orange */
#pruefeQA .level-3 { color: #c00 !important; }       /* rot */

#pruefeQA .status-0 { color: #c00 !important; }       /* rot */
#pruefeQA .status-1 { color: #0a0 !important; }       /* grün */
#pruefeQA .status-2 { color: #e67e00 !important; }    /* orange */


#pruefeQA .akzeptieren { color: #0a0 !important; }       /* grün */
#pruefeQA .frage-icons {
	margin-top: -5px;
	float: right;
	}
#pruefeQA .frage-icons .icon {
	cursor: pointer;
	font-size: 16px;
	margin-left: 10px;
	margin-right: 10px;
	color: #444;
	display: block;
	}
/* Antwortenbereich */
#pruefeQA .antworten-container {
	margin-left: 10px;
	padding: 5px 0;
	border-left: 2px solid #ccc;
}


/* ===================================================== */
/* FEEDBACK MODUL */
/* ===================================================== */
#feedback-floating-btn {
	position: fixed;
	bottom: 25px;
	right: 20px;
	width: 50px;
	height: 50px;
	background: #4a90d9;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	box-shadow: 0 2px 10px rgba(0,0,0,0.3);
	z-index: 9998;
	transition: transform 0.2s ease;
}
#feedback-floating-btn:hover {
	transform: scale(1.1);
	background: #357abd;
}
#feedback-floating-btn span { font-size: 22px; }

.feedback-modal-overlay {
	display: none;
	position: fixed;
	top: 0; left: 0;
	width: 100%; height: 100%;
	background: rgba(0, 0, 0, 0.5);
	z-index: 9999;
}
.feedback-modal-overlay[style*="block"] {
	display: flex !important;
	align-items: center;
	justify-content: center;
}

.feedback-modal-content {
	background: #fff;
	border-radius: 8px;
	width: 90%;
	max-width: 450px;
	max-height: 90vh;
	overflow-y: auto;
	box-shadow: 0 5px 20px rgba(0,0,0,0.3);
}
.feedback-modal-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 12px 15px;
	border-bottom: 1px solid #ccc;
	background: #f0f0f0;
	border-radius: 8px 8px 0 0;
}
.feedback-modal-header h3 { margin: 0; font-size: 16px; }
.feedback-modal-close {
	font-size: 24px;
	color: #666;
	cursor: pointer;
}
.feedback-modal-close:hover { color: #c00; }
.feedback-modal-body { padding: 15px; }

.feedback-field { margin-bottom: 15px; }
.feedback-field label { display: block; margin-bottom: 5px; font-weight: bold; }
.feedback-field textarea {
	width: 100%;
	padding: 10px;
	border: 1px solid #ccc;
	border-radius: 4px;
	font-size: 14px;
	resize: vertical;
	min-height: 100px;
	font-family: inherit;
}
.feedback-context-display {
	background: #f5f5f5;
	padding: 8px 10px;
	border-radius: 4px;
	margin-bottom: 15px;
	font-size: 12px;
	color: #666;
}
.feedback-buttons { display: flex; gap: 10px; justify-content: flex-end; margin-top: 15px; }
.feedback-buttons .btn-primary {
	background: #4a90d9;
	color: white;
	border: none;
	padding: 8px 16px;
	border-radius: 4px;
	cursor: pointer;
}
.feedback-buttons .btn-primary:hover { background: #357abd; }
.feedback-buttons .btn-secondary {
	background: #ddd;
	color: #333;
	border: none;
	padding: 8px 16px;
	border-radius: 4px;
	cursor: pointer;
}

#feedback-admin { padding: 15px; }
#feedback-filter {
	display: flex;
	gap: 15px;
	align-items: center;
	margin-bottom: 15px;
	padding: 10px;
	background: #f0f0f0;
	border-radius: 4px;
}
#feedback-filter select { padding: 5px 10px; }
#feedback-filter .btn-secondary {
	background: #4a90d9;
	color: white;
	border: none;
	padding: 6px 12px;
	border-radius: 4px;
	cursor: pointer;
}

#feedback-tabelle {
	width: 100%;
	border-collapse: collapse;
	background: #fff;
}
#feedback-tabelle th, #feedback-tabelle td {
	padding: 10px;
	text-align: left;
	border: 1px solid #ccc;
}
#feedback-tabelle th { background: #e0e0e0; font-weight: bold; }
#feedback-tabelle tbody tr:hover { background: #f5f5f5; }
.fb-seite { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fb-nachricht { max-width: 250px; }
.fb-status {
	display: inline-block;
	padding: 3px 8px;
	border-radius: 10px;
	font-size: 11px;
	font-weight: bold;
}
.fb-status.status-neu { background: #ffc; color: #960; }
.fb-status.status-bearbeitet { background: #cdf; color: #048; }
.fb-status.status-erledigt { background: #cfc; color: #060; }
.fb-aktionen select { padding: 3px 6px; font-size: 12px; }

#feedback-info { padding: 30px; text-align: center; }
#feedback-info p { color: #666; }

#feedback-tabelle .aktionen{
	min-width: 170px;
	text-align: center;
	}


/* ===================================================== */
/* Dark-Mode */
/* ===================================================== */
body.darkmode{
	color: white;
	background-color:#222;
	}
body.darkmode section{
	background-color: black !important;
	}
body.darkmode header{
	background-color: black !important;
	}
body.darkmode footer{
	background-color: black !important;
	}
body.darkmode article{
	background-color: black !important;
	}
body.darkmode #menu li{
	background-color: darkgray;
	}
	
/* ===================================================== */
/* Dark-Gray-Mode */
/* ===================================================== */
body.darkmode-gray{
	color: white;
	background-color:#333;
	}
body.darkmode-gray section{
	background-color: darkgray; !important;
	}
body.darkmode-gray header{
	background-color: darkgray !important;
	}
body.darkmode-gray footer{
	background-color: darkgray !important;
	}
body.darkmode-gray article{
	background-color: darkgray !important;
	}



	
/* ===================================================== */
/* Media-Queries wegen Überschreibungen am Ende */
/* ===================================================== */
@media (min-width: 600px) {
	#website {
		width: 600px;
		}
	fieldset.ebene{
		width: 45% !important;
		}
	#startseite {
		display: flex;
		flex-wrap: wrap;
		align-items: stretch;
		}
	#startseite article.w50{
		flex-basis: 48%;
		}
	#pruefeQA .frage{
		min-height: 0px;
		}
	#pruefeQA .frage-text{
		width: 70%;
		}
	#pruefeQA .frage-vorspann{
		width: 70%;
		}
	#pruefeQA .frage-icons .icon {
		display: inline-block;
		}
	#einstellungen fieldset.ebene{
		width: 90% !important;
		}
	}
@media (min-width: 900px) {
	#website {
		width: 900px;
		}
	fieldset.ebene{
		width: 33% !important;
		}
	#startseite {
		display: flex;
		flex-wrap: wrap;
		align-items: stretch;
		}
	#startseite article.w50{
		flex-basis: 48%;
		}
	#pruefeQA .frage-text{
		width: 80%;
		}
	#pruefeQA .frage-vorspann{
		width: 80%;
		}
	#einstellungen fieldset.ebene{
		width: 90% !important;
		}
	}
@media (min-width: 1200px) {
	#website {
		width: 1200px;
		}
	fieldset.ebene{
		width: 23% !important;
		}
	#startseite {
		display: flex;
		flex-wrap: wrap;
		align-items: stretch;
		}
	#startseite article.w50{
		flex-basis: 48%;
		}
	#pruefeQA .frage-text{
		width: 85%;
		}
	#pruefeQA .frage-vorspann{
		width: 85%;
		}
	#einstellungen fieldset.ebene{
		width: 90% !important;
		}
	}