:root {
    --darkblue: #506ba0;
    --lightblue: #506ba022;
    --redframe: #F00;
    --schrift: #FFF;
}

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    font-family: arial, helvetica, sans-serif;
    background: #FFF;
}

#main {
    display: grid;
    grid-template-rows: 35px 35px 1fr 30px;
    grid-template-columns: 100%;
    height: 100vh; /* ganze Höhe des Viewports */
}

#kopfbereich {
		grid-row: 1 / 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 10px;
		background-color: var(--darkblue);
    color: var(--schrift);
}

#kopfbereich .leftGroup {
    display: flex;
		gap: 10px;
    align-items: center;
}

#boardText {
    color: var(--schrift);
    font-weight: normal;
    font-size: 1.5em;
    margin-left: 5px;
		white-space: nowrap; 
}

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

#kopfbereich .rightGroup {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--schrift);
		white-space: nowrap;
}

/* Buttons */
#openNav {
    font-weight: normal;
    font-size: x-large;
    color: var(--schrift);
    cursor: pointer;
}

#openNav:hover {
    background: #FFF;
    color: var(--darkblue);
}

#navibereich {
		grid-row: 2 / 3;
    background-color: var(--darkblue);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 10px;
    color: var(--schrift);
}

#navibereich .leftMenu {
    display: flex;
    gap: 2px;
}

#navibereich .menuItem {
    color: var(--schrift);
    background: var(--darkblue);
    border-radius: 8px;
    cursor: pointer;
}

#navibereich .rightMenu {
    display: flex;
    align-items: center;
    gap: 10px;
}

#HomeButton {
    display: inline-block;
    padding: 2px 6px;
    border-radius: 5px;
    color: var(--schrift);
}

#HomeButton:hover {
    cursor: pointer;
    color: var(--darkblue);
    background: var(--schrift);
}

#Login {
    display: inline-block;
    padding: 2px 6px;
    border-radius: 5px;
    color: var(--schrift);
}

#Login:hover {
    cursor: pointer;
	color: var(--darkblue);
	background: var(--schrift);
}

#textcontainer {
		grid-row: 3 / 4;
    background: #506ba011;
    overflow-y: auto;
    padding: 20px;
    box-sizing: border-box;
}

#textbereich {
    width: 100%;
}

#fussbereich {
	grid-row: 4 / 5;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	padding: 0 20px;
	background: var(--darkblue);
	color: #DDD;
	font-size: 14px;
}

.footerCenter {
	grid-column: 1/3;
	display: flex;
	align-items: center;
	justify-self: center;
	white-space: nowrap;
}

.footerRight {
	grid-column: 3/4;
	display: flex;
	align-items: center;
	justify-self: end;
	gap: 8px;
}

#fussbereich a {
    color: #DDD;
    text-decoration: none;
}

#fussbereich a:hover {
	cursor: pointer;
	background-color: #FFF;
	color: var(--darkblue);
}


.welcome {
  position: relative;
	top: 100px;
  left: 50%;
  width: 800px;
  height: 250px;
  padding: 50px;
  margin-left: -420px;
  box-sizing: border-box;
	background-color: #EEE;
	color: 888;
	font-size: 12pt;
}

.welcome h3 {
	margin-bottom: 12px;
}

/* Alle Text zu den Begriffen mit größerem Zeilenabstand */
#bgrKurztext,
#bgr_ctnt {
	font-size: 15pt;
	line-height: 1.5;
}

/* Alle Unterelemente ebenfalls */
#bgrKurztext *,
#bgr_ctnt * {
	font-size: 15pt;
	line-height: 1.5;
}


/*--- Ampel-Highlighting -------------------------------------*/

.OneStatus:hover circle {
	stroke-width: 2;
	stroke: #FFF;
}


/*--- START: ll_bgr2litmanager ----------------------------*/

#bgr2litContainer {
	height: 100%;
	overflow: hidden;
}

#bgr2lit { 
	max-height: 100vh;
	display: grid;
	grid-template-rows: 45px 40px 1fr 40px;
	overflow-y: auto;
}

#bgr2litHead {
	grid-row: 1;
	padding: 8px;
}

#bgr2litMenu {
	grid-row: 2;
	padding: 8px;
}

#litSelect {
	grid-row: 3;
}

#bgr2litListe {
	padding: 8px;
	background-color: #EFE;
	overflow-y: scroll;
	margin-bottom: 8px;
}

#bgr2litDiv {
	padding: 8px;
	background-color: #EEF;
	margin-top: 8px;
	overflow-y: scroll;
}

#bgr2litButtons {
	grid-row: 4;
}
/* --- ENDE: ll_bgr2litmanager*/


/* --- Anfang: Menu mit Alt-Taste im Begriffsmenu */

#MenuActions {
	display: inline-block;
	padding: 0px;
	margin: 0px;
}

#MenuActions .AltMenu {
	width: 100%;
	text-align: center;
	color: #FFF;
	border: 1px solid #444;
	background-color: var(--darkblue);
}

#MenuActions .AltMenuOptions {
	background-color: #EEE;
	margin: 0px;
	padding: 0px;
}

#MenuActions .AltMenuOptions ul {
	list-style-type: none;
	margin-top: 5px;
	margin-bottom: 0px;
	padding-left: 3px;
	padding-right: 3px;
}
 
#MenuActions .AltMenuOptions ul li {
	display: block;
	padding: 1px;
	color: #444;
}

#MenuActions .AltMenuOptions ul li:hover {
	padding: 1px;
	color: var(--darkblue);
	background-color: var(--schrift);
}
/* --- Ende: Menu mit Alt-Taste im Begriffsmenu */



/* --- Start: Tabelle mit fixierten Kopf und rollendem Body
	 wird mit umgebenden <div clas='tableFixHead'> verwendet*/
.tableFixHead { 
	overflow: auto; 
	height: 100px; 
}

.tableFixHead thead th {
	position: sticky;
	top: 0; 
	z-index: 1; 
}
/* --- Ende: Tabelle mit fixierten Kopf und rollendem Body */


#Suchfeld{
	color: #DDD;
	padding-right: 15px;
	float: right;
}

.InputSearchfield {
	line-height: 10px;
	font-size: 8pt;
	padding: 0px;
	padding-left: 5px;
	height: 17px;
	width: 250px;
	vertical-align: middle;
}

.OptionSuchBegriff {
	font-size: 8pt;
}

datalist { 
  display: none;
}


#begriff {
	font-weight: bold;
	font-size: 20px;
	padding: 3px;
	margin: 2px;
	color: var(--schrift);
	border-radius: 10pt;
	background-color: var(--darkblue);
	border: 1px solid #CCC;	
}

#pfad {
	line-height: 1.4;	
}

.pfadElt {
	font-size: 9pt;
}

.pfadBtn {	
	margin-bottom: 3em;
	font-size: 9pt;
}

a {
	padding: 0px;
	color: var(--schrift);
	background: var(--darkblue);
	text-decoration: none;
}

a:hover {
	color: var(--darkblue);
	background: var(--schrift);
}

.sqlsuccwin { 
	border-color: #F99;
	background-color: #F99; 
}

.sqlerrwin {
	border-color: #FF9;
	background-color: #FF9;
}

.sqlwin {
	width: 600px; 
	border-width: 6px; 
	border-style: outset;
	padding: 5px;'
}

div {
	line-height: 1.2em ;
}

div.begriffsliteratur{
	line-height: 1px;	
}

p.lit, .liturl {
	padding: 0px;
	padding-left: 30px;
	text-indent: -30px;
	margin: 0px;
	border: 0px;
	padding-top: 0px;
	padding-bottom: 0px;
	margin: 0px;
}


.bgr-url {
	padding: 0px;
	padding-left: 30px;
	text-indent: -30px;
	margin: 0px;
	border: 0px;
	padding-top: 0px;
	padding-bottom: 0px;
	margin: 0px;
}

.bgr_li {
	padding: 0px;
	margin: 0px;
	border: 0px;
	padding-top: 0px;
	padding-bottom: 0px;
	margin: 0px;
}

.bgr_li:hover {	
	cursor: pointer;
}

.liturl:hover {	
	cursor: pointer;
	background-color: #EEE;
	color: var(--darkblue);
}


.litalpha {
	background-color: var(--darkblue);
	text-align: center;
	color: var(--schrift);
	min-width:12px;
	border-radius: 10pt;
	border: 1px solid #FFF;
	transition: all 0.2s;
}	

.litalpha:hover {
	cursor: pointer;
	background-color: var(--schrift);
	color: var(--darkblue);
	border: 1px solid var(--lightblue);
}	


/*--- START: responsives Grid mit Namen und Typ der Aufgaben -------------*/

.afgContainer {
	position: relative;
	margin-top: 15px;
  display: grid;
	grid-template-rows: repeat(1fr);
  grid-template-columns: 1fr;
  grid-gap: 3px;
  align-items: center;
}

.afgbtn {
  width: 80%;
  height: auto;
	padding:10px;
	background-color: var(--schrift);
	color: var(--darkblue);
	border: 2px solid var(--darkblue);
}


.afgbtn:hover {
	background-color: var(--darkblue);
	color: var(--schrift);
	border: 2px solid var(--darkblue);
}
	
.afgbtn p {
	margin: auto;
}

/*--- ENDE: responsives Grid mit Namen und Typ der Aufgaben -------------*/

/*--- START: responsives Grid mit Namen und Typ der Aufgaben -------------
			im Listing aller Aufgaben zu einem Begriff in Gerlili_Master
*/

AfgGrid {
	margin-top: 15px;
  display: grid;
  grid-template-columns: 50px 220px 1fr;
  grid-gap: 3px;
}

editAfg {
	padding: 10px;
	border: 1px solid #444;
	transition: all 0.2s;
	background: #EFE;
	color: #444;
}

editAfg.head {
	background: var(--lightblue);
	color: #FFF;
	border: 1px solid #444;
}

editAfg p {
	margin: auto;
}

editAfg p.head {
  text-align: center;
	font-size: large;
	font-weight: bold;
}

editAfg p.center {
  text-align: center;
}

editAfg:hover {
	cursor: pointer;
	background: var(--darkblue);
	color: #FFF;
	border: 1px solid #FFF;
}

/*--- ENDE: responsives Grid mit Namen und Typ der Aufgaben -------------*/


/*--- START: Welcome: Startseite ---------------------------------------------*/

#wcGrid {
	position: relative;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: repeat(3, 1fr);
	justify-content: center;
	grid-gap: 1em;
	top: 1%;
	left: 1%;
	width: 900px;
	height: 950px;
	padding: 10px;
	overflow-y: auto;
}

.FadeIn {
  opacity: 1;
  transition: opacity 1000ms;
}

.FadeOut {
  opacity: 0;
  transition: opacity 1000ms;
}

.wci {
  display: flex;
	flex-direction: column;
  flex-wrap: wrap;
	font-size: 12pt;
	font-weight: 200;
	color: #444;
	background: #EEE;
	height: 300px;
	padding-bottom: 13px;
	border-radius: 12px;
	border: 2px solid #777;
}

.wch {
  display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 30px;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	background: var(--darkblue);
}

.wci:hover .wch {
	font-weight: 800;
	color: #FFF;
	background: var(--lightblue);
}


.wce {
	display: block;
	margin-left: auto;
	margin-right: auto;
	margin-top: auto;
	margin-bottom: auto;
	padding: 10px;
}

.wci:hover .wce {
	font-size: 10pt;
}

.wci h4 {
	font-weight: 700;
}
/*--- Ende: Welcome: Startseite ---------------------------------------------*/

table {
	margin: 0px;
	padding: 3px;
	padding: 0px;
	margin-top: 0;
}

td {
	margin: 0px;
	padding: 3px;
}

td.frame {
	border: 1px solid #BBB;
	padding: 1px;
}

table.content {
	margin-top: 0;
}

table.lister {
	width: 80%;
	border: 1px solid black;
	spacing: 0px;
}

th {
	background-color: #DDD;
	font-weight: bold;
}

tr.head {
	background-color: #DDD;
	font-weight: bold;
}

tr.frame {
	border: 1px solid #BBB;
	padding: 1px;
	
}

tr:hover {
	background-color: #DDD;
}

td.listerselect {
	background-color: #AAA;
	vertical-align: middle;
}

/* START: Formelemente */
.formelements {
	width: 100%;
	height: 100%;
	padding: 20px;
	background-color: #FFE;
}

label {
	width: 15%;
	align: right; 
	font-weight: bold;
}

.formentry {
	margin-bottom: 8px;
	padding: 5px;
	background-color: #EEE;
	border: 1px solid #888;
}

.forminput {
	background-color: #EEE;
	padding:3px;
	padding-left:8px; 
	font-weight: normal;
}

input {
	font-size: 10pt;
	font-weight: normal;
}

select {
	font-size: 12pt;
	font-weight: normal;
}

.sendinfo {
	width: 100%;
	height: 100%;
	padding: 20px;
	background-color: #EEF;
}

.sendfield {
	padding: 2px;
	font-weight: normal;
	margin-bottom: 3px;
	background-color: #FFE;
	border: 1px solid #888;
}

.sendname {
	float: left;
	padding-left: 5px;
	width: 130px;
	font-weight: bold;	
}

.sendvalue {
	padding-left: 25px;
}

.inputwindow {
	width: 100%;
	height: 100%;
	padding: 10px;
	background-color: #FFE;
}

label {
	vertical-align: top;
}

div .label {
	margin: 4px;
	padding: 5px;
	clear: left;
}

.inputelement {
	position: relative;
	left: 0px;
	width: 70%;
	padding: 10px;
	vertical-align: top;
	border: 1px solid black;
	background-color: #EEE;
	margin-left: auto;
	margin-right: auto;
}

.inputname {
	float: left;
	background-color: #DDD;
	font-size: 12pt;
	font-weight: 600;
	text-align:right;
	padding-right: 12px;
	width: 30%;
}

.inputvalue {
	float: left;
	font-size: 12pt;
	font-weight: 300;
	background-color: #CCC;
	width: 70%;
}

	
textarea input:hover {
	background-color: #EEFFFF;
}

.inputtable {
	width: 60%;
	background-color: #EEE;
	border: 1px solid black;
	spacing: 0px;
	padding: 3px;
}

.inputtable:after {
	clear:both;	
}

.inputhead {
	background-color: #BBBBBB;
}

.send {
	display: flex;
	justify-content: center;
	align-items: center;
}

.editliteratur {
	padding: 15px;
	background-color: #EEFFFF;
	overflow-x:auto;
	overflow-y:auto;
}

form {
	display:inline;
}

* {
  box-sizing: border-box;
}

/* Create two columns that float next to each other */
#bdiv {
  float: left;
  width: 25%;
  padding: 10px;
  height: 50%; 
}

#ldiv {
  float: left;
  width: 75%;
  padding: 10px;
  height: 50%; 
}

/* Clear floats after the columns */
.row {
	padding:12px; 
	width: 100%; 
	height:50%; 
	background-color: #FFFFEE;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}


#yesCookie {
	background-color: var(--darkblue);
}
#yesCookie:hover {
	background-color: var(--lightblue);
}

/*** Start: Ausgabe eines Begriffs (Lang-Kurztext, Literatur usw.) *****/
.bgrInfos {
	display: inline-block;
	width: 900px;
	padding: 10px;
	margin-bottom: 20px;
	overflow-y: auto;
}

.small {
	font-size: 9pt;
}

.large {
	font-size: 16pt;
}


/*--- START: Resizer ---------------------------------------------
 Schieberegler zwischen row-3 und row-4 in GerLiLi-Master---*/

.resizer{
	cursor: row-resize;
	height: 6px;
	border: 2px solid var(--lightblue);
}


/*--- START: Resizer ---------------------------------------------
 X-Kästchen oben rechts zum Leeren von row-3 und row-4 in GerLiLi-Master---*/

.xempty {
  position: fixed;
  left: 98%;
}

.xempty:hover rect {
	opacity: 1;
	fill: #F00;
}

.xempty:hover text {
	fill: #FFF;
}


/* Fade in*/
@keyframes FadeIn {
  from	{ opacity: 0 }
  to 		{ opacity: .9 }
}

/* Fade out*/
@keyframes FadeOut {
  from	{ opacity: .9 }
  to 		{ opacity: 0 }
}

/*--- START: Uebungsaufgaben ---*/

[draggable=true] {
  cursor: move;
}

[draggable=false] {
  cursor: not-allowed;
}

.dropzone {
	text-align: center;
	width: auto;
	margin: 1px;
	border: 1px solid #AAA;
}


#losgehts {
	padding: 10px;
	font-size: 14pt;
	margin-top: 3px;
	height:50px;
}

.losgehtsbtn, .fertigbtn { 
  background-color: #EFE;
  border: 1px solid #444;
  color: #000;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 14pt;
  padding: 2px 7px;
  cursor: pointer;
}

.losgehtsbtn:hover, .fertigbtn:hover  {
	color: #FFF;
	background: #4C4;
}

#UebungButtonFertig {
	float: right;
	margin-right:7px;
}

/* --- START: Info-Button, der bei jeder Aufgabe angezeigt wird --- */
.AfgInfoButton {
	display: flex;
	justify-content: flex-end;
	align-items: flex-start;
	padding: 5px;
}

.AfgInfoButton:hover {
	cursor: pointer;
}
/* --- ENDE: Info-Button, der bei jeder Aufgabe angezeigt wird --- */

.losgehtsbtn:active, .fertigbtn:active {
	background-color: #BFB;
	border-bottom: #EEE;
	border-right: #EEE;
}

.lueckentext, .fragen {
	background: #EFF;
	border: 1px solid #AAA;
	width: 100%;
	min-height: 100%;
	padding: 10px;
	margin-bottom: 5px;
}

.uebungsaufgaben {
	width: 100%;
	background: #EEF;
	border: 1px solid #AAA;
	font-size: large;
	overflow-x: auto;
}

.uebungsaufgabenHeadline {
	top: 0px;
	width: 100%;
	background-color: #EFE;
	color: #000;
	padding: 5px;
	margin-top: 0px;
	margin-bottom: 5px;
	border: 1px solid #AAA;
}

.antwortenHeadline, .fragenHeadline, .kategorienHeadline, .faHeadline {
	padding: 1px;
	width: 100%;
	background-color: var(--darkblue);
	color: var(--schrift);
}

#antworten {
	width: 100%;
	height: auto;
	min-height: 30px;
	padding: 3px;
	font-size: normal;
	background-color: #FFE;
	border: 1px solid #AAA;
}

#antworten:after {
	content: '.';
	display: block;
	clear: both;
	visibility: hidden;
}

.uebungsFrageAntwort {
	width: 100%;
	height: 100%;
	overflow-y: auto;
}

.uebungsFrage {
	float: left;
	width: 70%;
	height: 55px;
	padding: 3px;
	margin: 3px;
}

#uebungsLoesung {
	display: none;
}

.uebungsAntwort {
	float: left;
	width: 28%;
	height: 55px;
	background-color: #EEE;
	overflow-y: auto;
}

.kategorien {
	width: 100%;
	height: 300px;
	background-color: #EFF;
	border: 1px solid #AAA;
	overflow-y: auto;	
}

.eineKategorie {
	margin-left: 2px;
	width: 100%;
	overflow-y: auto;
	background-color: #EEE;
	border: 1px solid #AAA;
}

.eineKategorieHeadline {
	color: #FFF;
	background-color: var(--darkblue); /* Unigruen*/
	border: 1px solid #AAA;
}

.eineKategorieElemente {
	padding-bottom: 1px;  
	border-bottom: 1px dotted #AAA;
	margin-bottom: 1px;  
}

.alleKategorien {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: stretch;
	width: 100%;
}	

.ltAufgabeBgrs {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
}


#ltAufgabeHeadline {
	width: 940px;
	color: #FFF;
	background-color: var(--darkblue);
	border: 1px solid #AAA;
	padding-left: 5px;
	margin: 4px;
}

#ltAufgabe {
	width: 700px;
	height: 300px;
	margin: 4px;
	padding:5px;
	border: 1px solid #AAA;
	overflow-y: auto;
}

#ltBegriffe {
	width: 240px;	
	height: 300px;
	padding-left: 10px;
	border: 1px solid #AAA;
	overflow-y: auto;
}

/* Start: Ergänzungen für Lückentext */
.ltdropzone {
	display: inline-block;
	min-width: 70px;
	height: 22px;
	font-size: normal;
	background: #DDF;	
	vertical-align: top;
}

.ltelement {
	height: 22px;
	margin: 1px;
	padding: 0px;
}
/* Ende: Ergänzungen für Lückentext */


/*---------- Start: Transkriptionsaufgabe -------------*/
[contenteditable] {
  outline: 0px solid transparent;
}

#Transkription {
	clear: both;	
}

.trWrapper {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-gap: 5px;
}

#trafg1 {
	grid-col: 1;
}

#trafg2 {
	grid-col: 2;
}

#trafg3 {
	grid-col: 3;
}

#trAufgabe, #trTranskript, #trMenu {
	padding: 5px;
	border: 1px solid #888;
	overflow-y: auto;
}

.SZ {
	display: inline-block;
	margin: 1px;
	padding: 2px;
	color: #444;
  width: 1.1em;
	text-align: center;
	font-size: 1.2em;
	border: .6px solid #888;
}

.SZ:hover {
	cursor: pointer;
	color: #FFF;
	background: var(--lightblue);
}


/*---------- Ende: Transkriptionsaufgabe -------------*/

.faWrapper, mcWrapper {
	width: 950px;
}

.mcFrage, .bsFrage {
	padding: 5px;
	color: #FFF;
	background: var(--darkblue);
}

.mcWrapper .mcAntworten {
	padding: 5px;
	color: #000;
	background:  #FEF;
}

.mcAntworten {
	padding: 10px;
}

.InstruktionsOl li {
	padding: 0px;
	margin: 8px 0;
}

#sendUebung {
	clear: left;
}

.afgInstruktion {
	border: 1px solid #888;
	background: var(--darkblue);
	color: #FFF;
	padding: 5px;
	margin-bottom: 5px;
}

.uebungsKategorie {
	width: 100%;
	height: 271px;
	padding: 3px;
	overflow-y: auto;
}

.uebungsSymbol {
	background-color: #E44;
	color: #FFF;
	min-width:15px;
	padding-left: 3px;
	padding-right: 3px;	
}

.uebungsOP {
	float: right;
	background-color: #E44;
	color: #FFF;
	min-width:15px;
	padding-left: 3px;
	padding-right: 3px;	
}

.uebungsOP:hover {
	cursor: pointer;
	color: #E44;
	background-color: #FFF;
}

.kategorieFootline {
	bottom: 0px;
	height: 35px;
	width: 100%;
	font-size: 12px;
	font-weight: bold;
	text-align: center;
	color: #FFF;
	background: #981E32;
	border: 1px solid #AAA;
}

#TreeAufgabe {
	display: none;
}

.draggable {
	/*float: left;*/
	display: inline-block;
	/*white-space: nowrap;*/
	color: #EEE;
	border: 1px solid #EEE;
	padding: 2px;
	margin-right:5px;
	background-color: #777;
}

#uebungsResultat {
	display: none;
}

#uebungsMeldung {
	height: 60px;
	padding: 10px;
	color: #000;
}

#uebungsResultatHeadline {
	padding: 10px;
	width: 100%;
	background-color: var(--darkblue);
	color: var(--schrift);
	margin-bottom: 10px;
}

.dashedredframe {
	border: 2px dashed var(--redframe);
}

#ProgressWrapper {
	position: relative;
	padding-left: 10px;
	padding: 10px;
}

#ProgressBar {
	position: absolute;
	top: 0;
	left: 1;
  width: 600px;
  height: 32px;
	z-index: 1;
}

#ResultBar {
	position: absolute;
	top: 0;
	left: 1;
  width: 600px;
  height: 32px;
	background: #EEF;
	z-index: 2;
}

#FehlerKorrektur {
	margin-top: 20px;
	padding: 10px;
}
/* Ende: Uebungsaufgaben */


/* Anzeigen Aufgaben zu Uebungen */
.AufgabenIcon:hover circle {
	cursor: pointer;
	fill: red;
}
.AufgabenIcon:hover text {
	cursor: pointer;
}
/*--- ENDE: Uebungsaufgaben ---*/




/*--- START: loader zeigt ein drehendes Rad bei AJAX-Loading ---------------------------*/

.loader {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  width: 120px;
  height: 120px;
  margin: -76px 0 0 -76px;
  border: 10px solid #f3f3f3;
  border-radius: 50%;
  border-top: 10px solid var(--lightblue);
  border-bottom: 10px solid var(--darkblue);
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}

@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

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

.loaderText {  
	position: absolute;
  left: 40%;
  top: 30%;
  z-index: 1;
  width: 300px;
  height: 300px;
}
/*--- ENDE: Loader ---*/


/*--- START: Tooltip ---*/
@keyframes tooltipFadeIn {
  from {opacity: 0}
  to {opacity: 1}
}

.tooltip {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  color: #000;
  border-bottom: 1px dotted;
  position: relative;
}


#bgrKurztext .tooltip-dropdown__content,
#bgrKurztext .tooltip-dropdown__content *,
#bgr_ctnt .tooltip-dropdown__content,
#bgr_ctnt .tooltip-dropdown__content * {
	font-size: 12pt;
	line-height: 1;
}

.tooltip__label {
  &:before { 
    content: '';
    display: flex;
    cursor: help;
    position: absolute;
		inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
		pointer-events: auto;
  }
}

.tooltip-dropdown {
  display: block;
	visibility: hidden;
  position: fixed;
  top: 0;
  left: 0;
  transform: translateX(-50%);
  z-index: 10;
	pointer-events: none;
  padding-top: 32px;
}

.tooltip-dropdown__content {
  color: #FFF;
  background-color: #444;
  border-radius: 14px;
  padding: 8px 12px;
  width: 300px;
  text-align: left;
	pointer-events: auto;
}

.tooltip--open .tooltip-dropdown {
	visibility: visible;
	pointer-events: auto;
	animation: tooltipFadeIn 1s;
}


/*
@media (hover: hover) {
  .tooltip:hover .tooltip-dropdown {
      animation: tooltipFadeIn 1s;
      display: block;
    }
}
*/
/*--- ENDE: Tooltip ---*/



/*--- START: ProgressBar ---*/
.progress-container {
  width: 100%;
  height: 8px;
  background: var(--darkblue);
}

.progress-bar {
  height: 10px;
  background: var(--lightblue);
  width: 0%;
}
/*--- ENDE: ProgressBar ---*/


/*--- START: SortUL ---*/

#SortSubMenu {
	width: 800px;
	background: #EEF;
	padding: 30px;
	padding-left: 50px;
	overflow-y: auto;
}

#SortUL {
	width: 500px;
	list-style: none;
	font-size: 14px; 
	background: rgba(230,255,230,.6);
}

#SortUL > li { 
	cursor: pointer; 
	user-select: none;
	border: .8px solid #444;
 }
 
.dragging {
	background: rgba(255,55,55,.3);
}

/*--- ENDE: SortUL ---*/

/* --- Fügt eine inline Box ein --- */

span.box {
	display: inline-flex;	
	width: 80%;
}

/* --- ENDE: inline Box --- */

/*--- START: Begriffsboxen ---*/

.begriffsboxen {
  display: grid;
  gap: 16px;
	grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  padding: 16px;
}

.bgrbox {
	background-color: var(--darkblue);
  border: 1px solid #ccc;
  border-radius: 8px;
  text-align: left;
	height: 350px;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.begriffsboxen .bgrbox .bgrhead {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 5px;
	font-weight: bold;
	color: white;
}


.begriffsboxen .bgrbox .bgrbody {
	padding: 8px;
	margin-top: 10px;
	height: 100%;
	background-color: lightblue;
	color: black;
	font-size: smaller;
	overflow-y: auto;
}
/*--- ENDE: Begriffsboxen ---*/


/* --- START: Geordnete Listen (1) a. iii. ---*/
.content {
  counter-reset: ol1;
}

ol {
  list-style: none;
  padding: 0;
  margin: 0;
}

.content ol {
  padding-left: 25px;
}

.content ol > li {
  counter-increment: ol1;
  position: relative;
  padding-left: 35px;
}

/* Nummerierung der ersten Ebene */
.content ol > li::before {
  content: "(" counter(ol1) ") ";
  position: absolute;
  left: 0;
  top: 0;
  margin-right: 20px; /* Abstand Menü 1 und Items */
}

.content ol > li > ol {
  padding-left: 0;
  counter-reset: ol2;
}

.content ol > li > ol > li {
  counter-increment: ol2;
  position: relative;
  padding-left: 30px;
}

/* Nummerierung der zweiten Ebene */
.content ol > li > ol > li::before {
  content: counter(ol2, lower-alpha) ") ";
  position: absolute;
  left: 0;
  top: 0;
  margin-right: 10px;
}

/* Dritte Ebene */
.content ol > li > ol > li > ol {
  counter-reset: ol3;
}

.content ol > li > ol > li > ol > li {
  counter-increment: ol3;
  position: relative;
	padding-left: 10px;
	margin-right: 15px;
}

.content ol > li > ol > li > ol > li::before {
  content: counter(ol3, lower-roman) ". ";
  position: absolute;
	text-align: right;
	width: 45px;
	display: inline-block;
  left: -45px;
  top: 0;
}

/* --- ENDE: Geordnete Listen (1) a. iii. ---*/


/* --- START: Wort.Ort-Anzeige: Tabellen mit head und body ---*/
.woTable {
	width: 100%;
}

.woTablehead {
	background-color: #CCC;
	padding: 5px;
	padding-left: 10px;
}

.woTablehead td {
	padding: 5px;
}


.woTablebody {
	width: 100%;
	background-color: #EEE;
}

.woRegel {
	width: 50%;
	padding: 10px;
	background-color: #EFE;
}

.woBeispiel {
	width: 50%;
	padding: 10px;
	background-color: #FFE;
}

.woHoppla {
	display: flex; 
	justify-content: center; 
	width:​ 400px;​​
	height: auto;
	padding:​ 10px;​ 
	border-radius:​ 1%;​
}
/* --- ENDE: Wort.Ort-Anzeige: Tabellen mit head und body ---*/