@charset "utf-8";
/* 
	Document    : inBrowserKorrekturVorlage.css
	Last change : 20.06.2025
	Author      : Immo Schulz-Gerlach
	Description:
		Ausschnitt der wichtigsten Styles aus der derzeit in Produktion verwendete inBrowserKorrektur.css-Datei, dem
		Stylesheet zur Verwendung in der Präsentation einer In-Browser-Korrektur (Studierendensicht und Korrektorensicht).
		
		Falls Sie für Ihre Kursumgebung (global oder auch nur für bestimmte Aufgabenhefte oder Aufgaben) 
		diese Standard-Stile der In-Browser-Korrektur modifizieren möchten
		(z.B. Abschaltung der roten Schriftfarbe für Korrektor-Kommentare),
		können Sie diese Datei als Vorlage nehmen und eigene Regeln zu den Selektoren
		in einer Aufgaben-CSS-Datei (s.u.) hinterlegen, die diese Standardregeln überstimmen.
		Die Aufgaben-CSS-Dateien werden zusätzlich zu diesem Standard-Stylesheet geladen,
		und zwar später, so dass darin definierte Regeln die hier definierten Standardregeln
		ergänzen oder überschreiben können.
		Dabei müssen Sie nicht alle Stile aus diesem CSS kopieren, sondern wirklich nur Regeln
		für Abweichungen von diesen Stilen definieren.
		
		Aufgaben-CSS:
		Aufgaben-CSS-Dateien werden entweder zu einer bestimmten Aufgabe, zu allen Aufgaben eines
		bestimmten Aufgabenheftes oder zu allen Aufgaben der gesamten Kursumgebung eingebunden,
		und zwar sowohl in die Aufgabenformulare für Studierende, in die Musterlösungsseiten
		als auch in die Korrekturseiten (sowohl in der Korrektoren- als auch der Studierendensicht).
		Darin können Sie also eigene Stylesheets für Ihre Aufgabenseiten, Lösungsseiten und Korrekturseiten
		festlegen, und insbesondere eben auch Stile der In-Browser-Korrektur modifizieren.
		
		Einbindung von Aufgaben-CSS
		- Eine Kursressource namens "aufgaben.css" wird für alle Aufgaben verwendet.
		- Eine Kursressource namens "aufgaben3.css" wird für alle Aufgaben von Aufgabenheft 3 verwendet.
		- Eine Kursressource namens "aufgabe3.2.css" wird spezifisch für Aufgabe 3.2 (Aufgabe Nr. 2 aus Aufgabenheft 3) verwendet.
*/
/* ----- GENERATED FILE! Do NOT EDIT directly! -----
   Always edit and re-compile original {less}-file!
   ------------------------------------------------- 
   (c) Copyright FernUniversitaet in Hagen, ZMI
 */
/* 
 * Allgemeines Format fuer normale Kommentar-Bloecke (div.KorrektorKommentar) und Inline-Kommentare (span.KorrektorKommentar)
 * sowie auch für die Eingabefelder des Korrektors:
 * form.ibk textarea für Plaintext-Textareas (ohne WYSIWYG-Editor) in IBK-Formularen,
 * form.ibk input[type="text"]) für reine Text-Inputs in IBK-Formularen (nicht dagegen für Number-Inputs für Punkte oder File-Uploads),
 * body.ibk wiederum selektiert den Inhalt (Body) eines WYSIWYG-Editors innerhalb eines IBK-Formulars
 */
.KorrektorKommentar,
form.ibk textarea,
form.ibk input[type="text"],
body.ibk {
  color: #8f0000;
}
@media (prefers-color-scheme: dark) {
  body.supportsDarkMode:not(.disableDarkMode) .KorrektorKommentar,
  body.supportsDarkMode:not(.disableDarkMode) form.ibk textarea,
  body.supportsDarkMode:not(.disableDarkMode) form.ibk input[type="text"],
  body.supportsDarkMode:not(.disableDarkMode) body.ibk {
    color: #f00;
  }
}
/* 
 * Styles nur für Kommentar-Blöcke (div), nicht für Inline-Kommentare,
 * z.B. Rahmen um den Block oder Hintergrundfarbe
 */
div.KorrektorKommentar:not(:empty) {
  border: 1px solid #c00;
  border-radius: 0.2em;
  padding: 0.2em;
}
div.KorrektorKommentar > p {
  margin: 0.5em 0 0.25em 0;
}
div.KorrektorKommentar > :first-child {
  margin-top: 0.25em;
}
/*
 * Styles für Teilkorrekturen (bei aktiver Mehrfachkorrektur)
 */
.tk {
  padding: 0.1em 0.2em;
  border-radius: 0.2em;
}
div.tk {
  padding: 0.1em 0.5em;
  margin: 0.3em;
}
.tk1 {
  background-color: rgba(204, 0, 0, 0.1);
}
.tk2 {
  background-color: rgba(97, 48, 122, 0.1);
}
.tk3 {
  background-color: rgba(128, 96, 0, 0.1);
}
.tk4 {
  background-color: rgba(0, 102, 102, 0.1);
}
.tk5 {
  background-color: rgba(0, 76, 151, 0.1);
}
.tk6 {
  background-color: rgba(51, 102, 0, 0.1);
}
@media (prefers-color-scheme: dark) {
  body.supportsDarkMode:not(.disableDarkMode)  .tk1 {
    background-color: rgba(204, 0, 0, 0.4);
  }
  body.supportsDarkMode:not(.disableDarkMode)  .tk2 {
    background-color: rgba(124, 75, 149, 0.4);
  }
  body.supportsDarkMode:not(.disableDarkMode)  .tk3 {
    background-color: rgba(128, 96, 0, 0.4);
  }
  body.supportsDarkMode:not(.disableDarkMode)  .tk4 {
    background-color: rgba(20, 129, 129, 0.4);
  }
  body.supportsDarkMode:not(.disableDarkMode)  .tk5 {
    background-color: rgba(0, 76, 151, 0.4);
  }
  body.supportsDarkMode:not(.disableDarkMode)  .tk6 {
    background-color: rgba(51, 102, 0, 0.4);
  }
}
/* 
 * Styles für "KorrektorChecks", genauer für deren Beschriftung.
 * Default: Grün für "richtig", rot für "falsch"
 * Durch Einkommentieren des Selektors "span.KorrektorPunkte.richtig" bzw. "span.KorrektorPunkte.falsch"
 * können Sie optional bewirken, dass bei Korrektorpunkte-Eingabe-/Auswahlfeldern die vergebene
 * Punktzahl bei voller Punktzahl ebenfalls in grün bzw. 0 Punkte ebenfalls in rot dargestellt werden.
 * (Per Default ist das nicht aktiv, Punktzahlangaben haben immer dieselbe Farbe wie untern unter
 * "span.KorrektorPunkte" festgelegt. Eine Angleichung mit rot/grün für 0 bzw. maximale Punktzahl
 * kann aber sinnvoll sein, wenn Sie KorrektorPunkte-Auswahlen mit KorrektorChecks mischen und
 * dabei möchten, dass eben volle Punktzahl bzw. 0 Punkte für Studierende immer gleich aussehen,
 * egal ob sie über ein KorrektorCheck- oder KorrektorPunkte erfasst werden.)
 */
.KorrektorCheckRichtig {
  color: #007700;
}
@media (prefers-color-scheme: dark) {
  body.supportsDarkMode:not(.disableDarkMode) .KorrektorCheckRichtig {
    color: #00c300;
  }
}
.KorrektorCheckFalsch {
  color: #8f0000;
}
@media (prefers-color-scheme: dark) {
  body.supportsDarkMode:not(.disableDarkMode) .KorrektorCheckFalsch {
    color: #f00;
  }
}
/*
 * Styles für "KorrektorPunkte", also Punkteingabefelder oder -Selectboxen
 */
/* Formatierungen für die Anzeige von KorrektorPunkten für Studierende, um diese von Standardtext wie den
   studentischen Eingaben etwas abzuheben.
   Hinweis: Diese Spans werden bei Vergabe von 0 Punkten zusätzlich mit der Klasse "falsch"
   und bei voller Punktzahl (nur möglich für KorrektorPunkte mit festgelegter Maximalpunktzahl "max")
   mit der Klasse "richtig" ausgezeichnet, so dass Sie auf Wunsch für volle Punktzahl bzw.
   0 Punkte abweichende Formatierungen / Farben festlegen können, siehe oben. */
span.KorrektorPunkte {
  color: #004c97;
}
@media (prefers-color-scheme: dark) {
  body.supportsDarkMode:not(.disableDarkMode) span.KorrektorPunkte {
    color: #409AF1;
  }
}
/*
 * Gemeinsame Styles für Anzeige von KorrektorChecks und KorrektorPunkten in der fertigen Korrektur / Studentensicht
 */
span.KorrektorCheckRichtig,
span.KorrektorCheckFalsch,
span.KorrektorPunkte {
  font-weight: 500;
}
/* KorrektorPunkte oder KorrektorChecks werden inline (als span) gerendert. Es ist aber möglich, sie gezielt in ein
   div der Klasse Wertungszeite einzupacken, wenn sie alleine einen Block darstellen sollen 
   (mit rechtsbündiger Ausrichtung nach diesem Default-Style): */
.WertungsZeile {
  margin: 0 0.2em 0.5em 0.2em;
  text-align: right;
}
/* Wenn KorrektorPunkte oder KorrektorChecks in ein KorrektorCheckliste-Element "gewrapped" werden, kommen diese
   Regeln hier zur Anwendung, die ein Tabellenlayout darüber legen.
   Dazu wird ein Div der Klasse "KorrektorCheckliste" erzeugt, das die ganze Checkliste (Tabelle) repräsentiert,
   jede Zeile darin wird ein "Unter-"DIV, und darin gibt es jeweils zwei SPANs, eins für die Beschriftung (prefix), sofern vorhanden,
   (bei Checklisten empfohlen) und eins für die eigentliche Eingabemöglichkeit bzw. Anzeige der Wertung. 
   Das erste Span fürs Prefix erhält auch nochmal explizit die Klasse "prefix" zugeordnet.
   */
/* Mobildarstellung: Auf Smartphones, ggf. auch Tablets und in schmaleren Fenstern aus Platzgründen keine Tabellenanordnung,
  sondern Präfixe als eigene Zeile den Inputs voranstellen: */
div.KorrektorCheckliste > div > span {
  display: block;
  margin-bottom: 0.7em;
}
div.KorrektorCheckliste > div > span.prefix {
  margin-bottom: 0;
}
/*
 * .KorrektorAnnotationen bezeichnet die Blöcke von studentischen Einsendungen, in denen
 * Korrektoren Annotationen anbringen können.
 * Unterschieden werden die Elemente mark für Textmarker, u für Unterstreichungen von Fehlern
 * sowie s für Durchstreichungen.
 * Für den (unwahrscheinlichen) Fall, dass die Studentische Einsendung bereits Elemente wie
 * mark, u oder s enthalten sollten, werden die vom Korrektor angebrachten Elemente explizit
 * noch mit der Klasse "ibk" (wie In-Browser-Korrektur) versehen. Die folgenden Stile sollten
 * also stets "mark.ibk", "u.ibk" bzw. "s.ibk" lauten.
 */
.KorrektorAnnotationen {
  /*Derzeit keine Hervorhebungen / Formatierungen*/
}
/*
 * Korrektor-Markierungen als Textmarker
 */
mark.ibk {
  /* Es sollten immer _beide_ Farben, Vordergrund- und Hintergrundfarbe, gesetzt werden,
	   um die Lesbarkeit des Textes zu gewährleisten! */
  color: black;
  background-color: rgba(255, 102, 102, 0.3);
}
mark.ibk.tk2 {
  background-color: rgba(175, 121, 202, 0.3);
}
mark.ibk.tk3 {
  background-color: rgba(255, 221, 0, 0.4);
}
mark.ibk.tk4 {
  background-color: rgba(0, 255, 255, 0.3);
}
mark.ibk.tk5 {
  background-color: rgba(49, 153, 255, 0.3);
}
mark.ibk.tk6 {
  background-color: rgba(128, 255, 0, 0.3);
}
/*
 * Korrektor-Markierungen als Unterstreichung
 */
u.ibk {
  -webkit-text-decoration-color: red;
  text-decoration: underline solid 2px red;
}
/*
 * Korrektor-Markierungen als durchgestrichener Text
 */
s.ibk {
  -webkit-text-decoration-color: red;
  text-decoration: line-through solid 2px red;
}
u.ibk.tk2,
s.ibk.tk2 {
  -webkit-text-decoration-color: #c044ff;
  text-decoration-color: #c044ff;
}
u.ibk.tk3,
s.ibk.tk3 {
  -webkit-text-decoration-color: #ffc61a;
  text-decoration-color: #ffc61a;
}
u.ibk.tk4,
s.ibk.tk4 {
  -webkit-text-decoration-color: #00ffff;
  text-decoration-color: #00ffff;
}
u.ibk.tk5,
s.ibk.tk5 {
  -webkit-text-decoration-color: #3199ff;
  text-decoration-color: #3199ff;
}
u.ibk.tk6,
s.ibk.tk6 {
  -webkit-text-decoration-color: #73e600;
  text-decoration-color: #73e600;
}
mark.ibk:focus-visible,
u.ibk:focus-visible,
s.ibk:focus-visible {
  transition-property: outline-width, outline-offset, outline-color;
  outline: 0px solid rgba(15, 136, 255, 0);
  transition-duration: 0.5s, 0.5s, 0.5s;
}
mark.ibk:focus-visible:focus-visible,
u.ibk:focus-visible:focus-visible,
s.ibk:focus-visible:focus-visible {
  outline: 3px solid #0f88ff;
  outline-offset: 2px;
  transition-duration: 0.05s, 0.05s, 0.05s ;
}
@media (prefers-color-scheme: dark) {
  body.supportsDarkMode:not(.disableDarkMode) mark.ibk:focus-visible:focus-visible,
  body.supportsDarkMode:not(.disableDarkMode) u.ibk:focus-visible:focus-visible,
  body.supportsDarkMode:not(.disableDarkMode) s.ibk:focus-visible:focus-visible {
    outline-color: white;
  }
}
mark.ibk.selected,
u.ibk.selected,
s.ibk.selected {
  background-color: #006EDB !important;
  color: white !important;
}
@media (prefers-color-scheme: dark) {
  body.supportsDarkMode:not(.disableDarkMode)  mark.ibk {
    background-color: rgba(255, 0, 0, 0.6);
    color: white;
  }
  body.supportsDarkMode:not(.disableDarkMode)  mark.ibk.tk2 {
    background-color: rgba(153, 84, 188, 0.6);
  }
  body.supportsDarkMode:not(.disableDarkMode)  mark.ibk.tk3 {
    background-color: rgba(255, 221, 0, 0.4);
  }
  body.supportsDarkMode:not(.disableDarkMode)  mark.ibk.tk4 {
    background-color: rgba(0, 204, 204, 0.3);
  }
  body.supportsDarkMode:not(.disableDarkMode)  mark.ibk.tk5 {
    background-color: rgba(49, 153, 255, 0.4);
  }
  body.supportsDarkMode:not(.disableDarkMode)  mark.ibk.tk6 {
    background-color: rgba(128, 255, 0, 0.3);
  }
}