/* Kommentare beziehen sich immer auf den Code unter ihnen */

/*** Überschreiben von Standard-LimeSurvey-Definitionen ***/

/* Abstand links und rechts von der Fortschrittsanzeige */

.progress {
  margin-left: 5px;
  margin-right: 5px;
}

/* Farbe des Fortschrittsbalkens */

.progress-bar {
  background-color: #23396E;
  background-color: #d64265;
}

/* Für Textanzeigen
    - Antwort-Container ausblenden
    - Abstand unter Textanzeige verringern, so dass folgende Frage direkt 
      anschließt
*/

.boilerplate > .answer-container {
  display: none;
}

.boilerplate {
  margin-bottom: -2px;
}

/* Aufeinanderfolgende Frageblöcke direkt aneinander anschließen */

.question-container {
    margin-bottom: -2px;
}

/* Design für Fragetyp Matrix
    - Fragen erscheinen fett gedruckt und in schwarzer Schrift
    - Zusätzlicher Leerraum oben und unten für Zeilen
    - Jede zweite Zeile hat hellblauen Hintergrund
    - Antwortoptionen am oberen Rand ausgerichtet
    - Zusätzlicher Leerraum unter der Matrix
*/

.radio-array th.answertext {
  font-weight: 700;
  padding-top: 1.5em;
  padding-bottom: 1.5em;
  color: black;
  -webkit-hyphens: none;
  -ms-hyphens: none;
  hyphens: none;
}
.radio-array tr.ls-even {
  background-color: #F7FBFF;
}
.radio-array .ls-heading > th {
  vertical-align: top;
  -webkit-hyphens: none;
  -ms-hyphens: none;
  hyphens: none;
}
.radio-array {
  margin-bottom: 30px;
}

/* Ja-Nein-Button am rechten Rand */

.yesno-button {
  float: right;
}

/* Sternchen an Pflicht-Fragen entfernen */

.asterisk {
  display: none;
}

/* Korrekte Anzeige von KaTeX-svg-Elementen in Antworten 
    (Fragetyp Optionsfelder)  
*/

.ls-answers .katex svg {
    height: inherit;
}

/* Hervorhebung bei Fokussierung von Elementen, z.B. per Tab-Taste */
input[type="text"]:focus,               /* Textfelder */
.list-question-select:focus,            /* Dropdown-Listen */
.radio-item:focus-within,               /* Optionsfelder in Liste oder Matrix*/
.btn:focus, .btn.focus, .osabtn:focus   /* Buttons */
{
  outline: 2px dotted #23396E;
  outline-offset: 2px;
}
td.radio-item:focus-within   /* Optionsfelder in Matrix*/
{
  outline-offset: -2px;
}

/* Anpassen der Farben für Buttons */

.btn-primary {
	background-color: #23396e;
  border-color: #23396e;
  background-color: #d64265;
  border-color: #d64265;
}

.btn-default {
	color: #23396e;
  background-color: transparent;
  border-color: #23396e;
}

.yesno-button > .btn-primary {
  background-color: #2256a0;
  border-color: #2256a0;
}

.btn-primary:hover, .btn-primary:focus, 
.btn-primary:active, .btn-primary.active, 
.btn-primary.active:focus,
.btn-default:hover, .btn-default:focus, 
.btn-default:active, .btn-default.active, 
.btn-default.active:focus {
	color: #23396e;
	background-color: #eff0f1;
  color: #d64265;
}

/* Weiter-Button */

#ls-button-submit {
  width: 100%;
  min-height: 60px;
}

/*** Allgemeine Formatierungen ***/

/* Prinzip 'Mobile First': Design für mobile Endgeräte wird als Standard 
    festgelegt und für größere Bildschirme bei Bedarf angepasst
*/

/* Textformatierung für die gesamte Seite
    - Schriftgröße 16px
    - Zeilenabstand 1,5-fach
    - Blocksatz
*/

body {
  font-size: 16px;
  line-height: 150%;
  text-align: justify;
}

/* Kompensation des Container-Paddings (Innenabstände links und rechts) */

.comp_padding {
  padding-left: -15px;
  padding-right: -15px;
}

/* Bilder
    - Standard-Abstände darüber und darunter
    - maximale Breite höchstens Breite des Parent-Elements
*/
/*
img {
  margin-top: 10px;
  margin-bottom: 10px;
  max-width: 100%;
}
*/

/* Horizontal zentrieren
    - automatische Margins zentrieren das Element
    - 'float' deaktivieren um auch Bootstrap-Columns zentrieren zu können
*/

.hcenter{
  display: block;
  margin-left: auto;
  margin-right: auto;
  float: none;
}

/* Ein- und Ausblenden von Elementen
    - nützlich für Daten, die für Benutzer nicht sichtbar sein sollen
*/

.visible, 
.sichtbar {
  display: initial;
}
.hidden,
.versteckt {
  display: none;
}

/* Responsives Ausblenden
    - *-xs für extra kleine Geräte (Bildschirm < 768px, z.B. Smartphone)
    - *-sm für kleine Geräte (Bildschirm > 768px, z.B. Tablet)
    - *-md für mittlere Geräte (Bildschirm > 992px, z.B. Desktop)
    - *-lg für große Geräte (Bildschirm > 1200px, sehr großer Bildschirm)
*/

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

  .mobilehidden {
    display: none;
  }

}

.visible-xs {
  display: initial;
}
.hidden-xs {
  display: none;
}

@media only screen and (min-width: 768px),
        print { 

  .visible-sm {
    display: initial;
  }
  .hidden-sm {
    display: none;
  }

}

@media only screen and (min-width: 992px) { 

  .visible-md {
    display: initial;
  }
  .hidden-md {
    display: none;
  }

}

@media only screen and (min-width: 1200px) { 

  .visible-lg {
    display: initial;
  }
  .hidden-lg {
    display: none;
  }

}

/* Standard-Rahmen */

.thingreyborder,
.border-grey-1 {
  border: 1px solid SlateGrey;
}

.border-grey-2 {
  border: 2px solid SlateGrey;
}

/* Liste von Anforderungsmodulen 
    - erste Zeile jedes Items soll fett erscheinen */

.modulelist {
  margin-top: 1.5em;
  margin-bottom: 1.5em;
}
.modulelist > li::first-line {
  font-weight: 700;
}

/* Buttons, die nicht zur Hauptnavigation gehören */

.osabtn {
  background-color: #2256a0;
  border: 1px solid #2256a0;
  color: white;
  padding: 0.6em 1em;
  font-size: 1.15em;
  line-height: -webkit-calc(4/3);
  line-height: -moz-calc(4/3);
  line-height: calc(4/3);
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
  cursor: pointer;
}

.osabtn:hover, .osabtn:focus {
  color: #2256a0;
	background-color: #eff0f1;
}

.disabled, .btn.disabled, button[disabled],
.disabled:hover, .btn.disabled:hover, button[disabled]:hover,
.disabled:focus, .btn.disabled:focus, button[disabled]:focus {
  cursor: not-allowed;
  /*opacity: 0.3;*/
  color: #e3e3e3;
  background-color: #f5f5f5;
  border-color: #e3e3e3;
}

/* Zeilenabstand in Latex-Formeln */
.katex .katex-html > .newline {
  margin-bottom: 0.5em;
}
.katex .katex-html > .base:not(:first-child) {
  margin-top: 0.2em;
}

/* Link mit nach rechts zeigendem Pfeil */

.link_arrow::after {
	content: '\1F86A';
	display: inline;
	padding-left: 0.4em;
}

/* Standard-Breiten */

.w10{
  width: 10%;
}

.w20{
  width: 20%;
}

.w30{
  width: 30%;
}

.w40{
  width: 40%;
}

.w50{
  width: 50%;
}

.w60{
  width: 60%;
}

.w70{
  width: 70%;
}

.w80{
  width: 80%;
}

.w90{
  width: 90%;
}

.w100{
  width: 100%;
}

.min-w10{
  min-width: 10%;
}

.min-w20{
  min-width: 20%;
}

.min-w30{
  min-width: 30%;
}

.min-w40{
  min-width: 40%;
}

.min-w50{
  min-width: 50%;
}

.min-w60{
  min-width: 60%;
}

.min-w70{
  min-width: 70%;
}

.min-w80{
  min-width: 80%;
}

.min-w90{
  min-width: 90%;
}

.min-w100{
  min-width: 100%;
}

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

  .mobilew100 {
    width: 100%;
  }

}

/* Responsive Breiten (in Anlehnung an Bootstrap)
    - w-xs-* für extra kleine Geräte (Bildschirm < 768px, z.B. Smartphone)
    - w-sm-* für kleine Geräte (Bildschirm > 768px, z.B. Tablet)
    - w-md-* für mittlere Geräte (Bildschirm > 992px, z.B. Desktop)
    - w-lg-* für große Geräte (Bildschirm > 1200px, sehr großer Bildschirm) 
*/

.w-xs-10{
  width: 10%;
}
.w-xs-20{
  width: 20%;
}
.w-xs-30{
  width: 30%;
}
.w-xs-40{
  width: 40%;
}
.w-xs-50{
  width: 50%;
}
.w-xs-60{
  width: 60%;
}
.w-xs-70{
  width: 70%;
}
.w-xs-80{
  width: 80%;
}
.w-xs-90{
  width: 90%;
}
.w-xs-100{
  width: 100%;
}

@media only screen and (min-width: 768px),
        print {

  .w-sm-10{
    width: 10%;
  }
  .w-sm-20{
    width: 20%;
  }
  .w-sm-30{
    width: 30%;
  }
  .w-sm-40{
    width: 40%;
  }
  .w-sm-50{
    width: 50%;
  }
  .w-sm-60{
    width: 60%;
  }
  .w-sm-70{
    width: 70%;
  }
  .w-sm-80{
    width: 80%;
  }
  .w-sm-90{
    width: 90%;
  }
  .w-sm-100{
    width: 100%;
  }

}

@media only screen and (min-width: 992px) {

  .w-md-10{
    width: 10%;
  }
  .w-md-20{
    width: 20%;
  }
  .w-md-30{
    width: 30%;
  }
  .w-md-40{
    width: 40%;
  }
  .w-md-50{
    width: 50%;
  }
  .w-md-60{
    width: 60%;
  }
  .w-md-70{
    width: 70%;
  }
  .w-md-80{
    width: 80%;
  }
  .w-md-90{
    width: 90%;
  }
  .w-md-100{
    width: 100%;
  }

}

@media only screen and (min-width: 1200px) {

  .w-lg-10{
    width: 10%;
  }
  .w-lg-20{
    width: 20%;
  }
  .w-lg-30{
    width: 30%;
  }
  .w-lg-40{
    width: 40%;
  }
  .w-lg-50{
    width: 50%;
  }
  .w-lg-60{
    width: 60%;
  }
  .w-lg-70{
    width: 70%;
  }
  .w-lg-80{
    width: 80%;
  }
  .w-lg-90{
    width: 90%;
  }
  .w-lg-100{
    width: 100%;
  }

}

/*** Formatierung von Überschriften ***/

/* Schriftgröße und -dicke nehmen mit Bildschirmgröße zu */

.h1, h1 {
  font-size: 1.6em;
  font-weight: 600;
}
.h2, h2 {
  font-size: 1.3em;
  font-weight: 600;
}
.h3, h3 {
  font-size: 1.15em;
  font-weight: 400;
}

@media only screen and (min-width: 600px) {

  .h1, h1 {
    font-size: 1.8em;
  }
  .h2, h2 {
    font-size: 1.4em;
  }
  .h3, h3 {
    font-size: 1.2em;
  }

}

@media only screen and (min-width: 768px),
        print {

  .h1, h1 {
    font-size: 2.2em;
    font-weight: 800;
  }

  .h2, h2 {
    font-size: 1.65em;
    font-weight: 700;
  }

  .h3, h3 {
    font-size: 1.3em;
    font-weight: 600;
  }

}

/* Farbig hinterlegte Überschriften-Blöcke 
    - vertikale Ausdehnung nimmt mit Bildschirmgröße zu
    - margin-Kompensation streckt Blöcke auf gesamte Breite 
    - Silbentrennung vermeiden
    - 'h1block': Schrift in Kapitälchen und mit vergrößertem Zeichenabstand
*/

.h1block {
  background-color: #23396E;
  color: white;
  text-align: center;
  padding: 24px 15px;
  margin: 48px -15px 30px -15px;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  border-radius: 0;
  font-variant: small-caps;
  letter-spacing: 0.03em;
}

.h2block {
  border: 2px #23396E;
  border-bottom-style: solid;
  border-top-style: solid;
  background-color: #F7FBFF;
  color: #23396E;
  text-align: center;
  padding: 14px 15px;
  margin: 40px -15px 25px -15px;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  border-radius: 0;
  line-height: 133%;
}
@media only screen and (min-width: 400px){
  .h1block, .h2block {
    -webkit-hyphens: none;
    -ms-hyphens: none;
    hyphens: none;
  }
}

.h3block {
  border: none;
  background-color: #2256A0;
  color: #FFFFFF;
  font-weight: 400;
  text-align: left;
  padding: 12px 15px;
  margin: 30px -15px 24px;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  border-radius: 0;
}

/* Unterüberschrift für 'h3block' */
.h3sub {
  display: block;
  border: none;
  background-color: #F7FBFF;
  color: #2256A0;
  border-bottom: 2px solid #2256A0;
  font-weight: inherit;
  font-size: 0.9em;
  text-align: inherit;
  padding: 0.6em 15px;
  margin: 12px -15px -12px;
}

/* Aufeinanderfolgende Blöcke schließen direkt aneinander an */

.h1block + .h2block {
  margin-top: -30px;
  border-top-style: none;
}

@media only screen and (min-width: 600px) {

  .h1block {
    padding: 30px 15px;
    margin-top: 60px;
    margin-bottom: 36px;
  }
  .h2block {
    padding: 16px 15px;
    margin-top: 45px;
    margin-bottom: 30px;
    text-align: left;
  }
  .h3block {
    padding: 14px 15px;
  }
  .h3sub {
    margin: 14px -15px -14px;
  }

  .h1block + .h2block {
    margin-top: -36px;
  }

}

@media only screen and (min-width: 768px),
        print {

  .h1block {
    padding: 40px 20px;
    margin-top: 72px;
    margin-bottom: 42px;
  }
  .h2block {
    padding: 20px 15px;
    margin-top: 60px;
    margin-bottom: 40px;
  }
  .h3block {
    padding: 16px 15px;
  }
  .h3sub {
    margin: 16px -15px -16px;
  }

  .h1block + .h2block {
    margin-top: -42px;
  }

}

/* Kompensiere padding des Frage-Containers (Klasse 'question-title-container', 
    5px auf kleinen Bildschirmen) um mit oberem Rand abzuschließen
*/

.h1block:first-child,
.h2block:first-child,
.h3block:first-child {
  margin-top: -5px;
}
/* analog: unterer Rand */
/*
.h1block:last-child,
.h2block:last-child {
  margin-bottom: -5px;
}
*/

/* Frage-Container hat auf großen Bildschirmen 16px padding statt 5px wie auf 
    kleinen Bildschirmen (im zugrunde liegenden LimeSurvey-Theme 'fruity' wird 
    'min-device-width: 761px' verwendet, deswegen hier ebenfalls)
*/

@media only screen and (min-device-width: 761px) {
  .h1block:first-child,
  .h2block:first-child,
  .h3block:first-child {
    margin-top: -16px;
  }
  /*
  .h1block:last-child,
  .h2block:last-child {
    margin-bottom: -16px;
  }
  */
}

/*
.h3block:first-child {
  margin-top: 0;
}
*/

.h3block:last-child {
  margin-bottom: 0;
}

/* Auf Hinweisseiten, z.B. zum Laden und Speichern, sind Überschriften evtl. 
    direkt im Block mit der ID "main-col". In diesem Fall soll oberhalb der 
    Überschriften Abstand eingefügt werden.
*/

#main-col > .h1block:first-child,
#main-col > .h2block:first-child,
#main-col > .h3block:first-child {
  margin-top: 16px;
}

/* Schriftformatierung
    - Ausrichtung links, rechts, zentriert, Blocksatz
    - Silbentrennung vermeiden (jedoch nicht auf den kleinsten Bildschirmen, 
      d.h. bei Bildschirmbreiten unter 400px)
    - Fettdruck
    - kursiv
    - größere Schrift
    - fette und größere Schrift
*/

.textleft, .text-left,
.text-links {
  text-align: left;
}
.textright, .text-right,
.text-rechts {
  text-align: right;
}
.textcenter, .text-center,
.text-zentriert {
  text-align: center;
}
.textjustify, .text-justify, .textjust, .text-just,
.text-blocksatz {
  text-align: justify;
}

@media only screen and (min-width: 400px){
  .no-hyphens, .nohyphens,
  .keine-trennung {
    -webkit-hyphens: none;
    -ms-hyphens: none;
    hyphens: none;
  }
}

.textbold, .text-bold, .textb, .text-b,
.text-fett, .schrift-fett {
  font-weight: 600;
}

.textitalic, .text-italic, .text-i,
.textkursiv, .text-kursiv, .schrift-kursiv {
  font-weight: 100;
  font-style: italic;
}

.textlarge, .text-l,
.schrift-gross {
  font-size: 1.1em;
}

.textxlarge, .text-xl,
.schrift-sehr-gross {
  font-size: 1.15em;
}

.textb-l, .text-b-l, .large_bold,
.schrift-gross-fett {
  font-size: 1.1em;
  font-weight: 600;
}

.textb-xl, .text-b-xl, .bigbold, .xlarge_bold,
.schrift-sehr-gross-fett {
  font-size: 1.15em;
  font-weight: 600;
}

/* Schriftformatierung für größere Bildschirme
    - stärkere Hervorhebung als auf kleinen Bildschirmen
*/

@media only screen and (min-width: 768px),
        print {

  
  .textbold, .text-bold, .textb, .text-b,
  .text-fett, .schrift-fett {
    font-weight: 700;
  }

  .textlarge, .text-l,
  .schrift-gross {
    font-size: 1.15em;
  }

  .textxlarge, .text-xl,
  .schrift-sehr-gross {
    font-size: 1.25em;
  }

  .textb-l, .text-b-l, .large_bold,
  .schrift-gross-fett {
    font-size: 1.15em;
    font-weight: 700;
  }

  .textb-xl, .text-b-xl, .bigbold, .xlarge_bold,
  .schrift-sehr-gross-fett {
    font-size: 1.25em;
    font-weight: 700;
  }

}

/* Formatierung von Formeln */

.formel {
  font-size: 1.1em;
}

.formel-gross {
  font-size: 1.25em;
}

/* Zeilenumbruch innerhalb des Elements vermeiden
    - Benutzung mit Inline-Elementen, wie z.B. <span>
    - Nützlich für feststehende Begriffe aus mehreren Wörtern, die immer
      zusammen angezeigt werden sollen (z.B.: "Philipps-Universität Marburg")
*/

.nobreak{
  display: inline-block;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
}
/*
@media only screen and (min-width: 400px){
  .nobreak {
    hyphens: none;
  }
}
*/

/* Textblock mit Abständen darüber und darunter
*/

.textblock{
    margin-top: 30px;
    margin-bottom: 30px;
}
.textblock:last-child{
    margin-bottom: 0;
}
  
/* Hervorgehobener ("Emphasized") Block mit Text und optionalem Titel (z.B. für 
    Frage-Antwort-Format)
    - subtile Hintergrundfarbe
    - farbiger Rahmen, abgerundetet Ecken
    - Titel fett gedruckt und farbig hinterlegt (Farbe entspricht Rahmenfarbe)
*/

.emphblock{
    background-color: #FCFCFC;
    background-color: #F7FBFF;
    /*background-color: rgba(240, 240, 240, 0.2);*/
    margin-top: 40px;
    margin-bottom: 30px;
    padding: 15px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    overflow: hidden;
    border: 2px solid #2256A0;
}
.emphblock:last-child{
    margin-bottom: 0;
}
  
.emphblock > p:last-child,
.emphblock > div:last-child,
.emphblock > div:last-child > div:last-child {
    margin-bottom: 0;
}
  
.emphblock > .emphtitle:last-child {
    margin-bottom: 10px;
}
  
.emphtitle{
    background-color: #2256A0;
    color: white;
    font-weight: bold;
    padding: 10px 15px;
    margin: -15px -15px 10px;
}
  
/* Alternative Farbe für wichtige Informationen und Frage-Antwort-Format */
  
.important_color{
    border-color: #A20B54;
    background-color: #FFF9FC;
}
  
.nocolor {
    background-color: transparent;
    border-color: transparent;
    padding: 0;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
    margin-top: 20px;
    margin-bottom: 15px;
}
  
.important_color > .emphtitle{
    background-color: #A20B54;
}
  
.nocolor > .emphtitle {
    background-color: transparent;
    color: inherit;
}
  
/* Alternative Farbe und größerer Abstand oben für Bearbeitungshinweise auf der 
    Willkommensseite */

.info_welcome {
    background-color: transparent;
    border-color: #2256a0;
    border-color: rgba(34,86,160,0.2);
    margin-top: 75px;
    margin-bottom: 15px;
}

.info_welcome > .emphtitle {
    background-color: #f7fbff;
    color: inherit;
}

/* Block mit flexiblem Spalten-Layout
    - Elemente in 'flex-container' sind zeilenweise angeordnet. Die Anzahl der 
      Elemente pro Zeile passt sich dynamisch der Element- und Bildschirmgröße 
      an
    - Standardeinstellung: Elemente horizontal zentriert
    - vertikale Ausrichtung: zentriert, oben, unten (Klassen 
      'flex-align-center', '...-top', '...-bottom') oder Elemente vertikal 
      strecken, so dass sie die gesamte Höhe einnehmen ('...-stretch')
    - horizontale Ausrichtung: zentriert, links, rechts (Klassen 
      'flex-just-center', '...-start', '...-end')
*/

.flex-container {
    display: -webkit-flex;
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    margin-top: 10px;
    margin-bottom: 20px;
}
  
.flex-aligncenter, .flex-align-center {
    align-items: center;
}
  
.flex-aligntop, .flex-align-top {
    align-items: flex-start;
}
  
.flex-alignbottom, .flex-align-bottom {
    align-items: flex-end;
}
  
.flex-alignstretch, .flex-align-stretch {
    align-items: stretch;
}
  
.flex-just-center {
    justify-content: center;
}
  
.flex-just-start {
    justify-content: flex-start;
}
  
.flex-just-end {
    justify-content: flex-end;
}
  
/* Elemente, die nebeneinander angeordnet werden, wobei nur eines seine Breite 
    ändert
*/
  
.flex-static-r, .flex-static-l {
    width: max-content;
    height: min-content;
}
.flex-static-r {
    margin-left: 1em;
}
.flex-static-l {
    margin-right: 1em;
}

.flex-filler {
    flex-grow: 1;
    flex-shrink: 0;
    flex-basis: auto;
    width: 100%;
    margin-bottom: 0.5em;
}

@media only screen and (min-width: 768px),
        print {
  
    .flex-filler {
      flex-basis: 0;
    }
    
}
  
/* Element für ein- oder zweispaltiges Layout (responsiv)
      - Gesamte Breite auf kleinen Bildschirmen
      - 50% Breite auf größeren Bildschirmen
*/
  
.flexitem50mobile100,
.flexitem50mobile100.imgcontainer {
    width: 100%;
    padding: 0 20px;
    margin: 10px 0;
}
  
/* Kein Abstand über-/unterhalb für erstes/letztes Element */
  
.flexitem50mobile100:first-child,
.flexitem50mobile100.imgcontainer:first-child {
    margin-top: 0;
}
  
.flexitem50mobile100:last-child,
.flexitem50mobile100.imgcontainer:last-child {
    margin-bottom: 0;
}

@media only screen and (min-width: 768px),
        print { 

  .flexitem50mobile100,
  .flexitem50mobile100.imgcontainer  {
    width: 50%;
    margin: 0;
  }

}

/* Block mit flexiblem Spalten-Layout speziell für mehrere Bilder
    - Bilder werden horizontal zentriert
    - Standardwerte für Breite, Minimalbreite, Maximalbreite vorgegeben. Diese 
      können jedoch per Inline CSS (style="...") überschrieben werden
    - Das Festlegen der Minimalbreite sorgt dafür, dass auf kleinen 
      Bildschirmen diese nicht zu schmal werden, sondern weniger Bilder 
      nebeneinander angezeigt werden
    - Das Festlegen der Maximalbreite ermöglicht die Anzeige mehrerer Bilder 
      nebeneinander, wenn der Bildschirm groß genug ist
*/

.flex-images {
    display: -webkit-flex;
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-items: flex-start;
}
.flex-images > img {
    width: 45%;
    min-width: 200px;
    max-width: 450px;
    height: auto;
    margin: 10px;
    flex-grow: 1;
}

/* Kachel-Darstellung
    - die Kachel-Elemente müssen innerhalb eines Flex-Containers eingebunden 
      werden. Damit die Kacheln gleich hoch erscheinen, benötigt der Container 
      die Klasse 'flex-align-stretch'
    - responsives Design in Anlehnung an Bootstrap, die Zahl steht dabei für 
      die Gesamtzahl der Spalten: 
      + tile-xs-* für extra kleine Geräte (Bildschirm < 768px, z.B. Smartphone)
      + tile-sm-* für kleine Geräte (Bildschirm > 768px, z.B. Tablet)
      + tile-md-* für mittlere Geräte (Bildschirm > 992px, z.B. Desktop)
      + tile-lg-* für große Geräte (Bildschirm > 1200px, sehr großer Bildschirm)
*/

.tile-xs-1, .tile-xs-2, .tile-xs-3, .tile-xs-4, .tile-xs-5, .tile-xs-6, 
.tile-sm-1, .tile-sm-2, .tile-sm-3, .tile-sm-4, .tile-sm-5, .tile-sm-6, 
.tile-md-1, .tile-md-2, .tile-md-3, .tile-md-4, .tile-md-5, .tile-md-6, 
.tile-lg-1, .tile-lg-2, .tile-lg-3, .tile-lg-4, .tile-lg-5, .tile-lg-6 {
  padding: 16px;
}

.tile-xs-1 {
  width: 100%;
}
.tile-xs-2 {
  width: -webkit-calc(100% / 2);
  width: -moz-calc(100% / 2);
  width: calc(100% / 2);
}
.tile-xs-3 {
  width: -webkit-calc(100% / 3);
  width: -moz-calc(100% / 3);
  width: calc(100% / 3);
}
.tile-xs-4 {
  width: -webkit-calc(100% / 4);
  width: -moz-calc(100% / 4);
  width: calc(100% / 4);
}
.tile-xs-5 {
  width: -webkit-calc(100% / 5);
  width: -moz-calc(100% / 5);
  width: calc(100% / 5);
}
.tile-xs-6 {
  width: -webkit-calc(100% / 6);
  width: -moz-calc(100% / 6);
  width: calc(100% / 6);
}

@media only screen and (min-width: 768px) {

  .tile-sm-1 {
    width: 100%;
  }
  .tile-sm-2 {
    width: -webkit-calc(100% / 2);
    width: -moz-calc(100% / 2);
    width: calc(100% / 2);
  }
  .tile-sm-3 {
    width: -webkit-calc(100% / 3);
    width: -moz-calc(100% / 3);
    width: calc(100% / 3);
  }
  .tile-sm-4 {
    width: -webkit-calc(100% / 4);
    width: -moz-calc(100% / 4);
    width: calc(100% / 4);
  }
  .tile-sm-5 {
    width: -webkit-calc(100% / 5);
    width: -moz-calc(100% / 5);
    width: calc(100% / 5);
  }
  .tile-sm-6 {
    width: -webkit-calc(100% / 6);
    width: -moz-calc(100% / 6);
    width: calc(100% / 6);
  }

}

@media only screen and (min-width: 992px) {

  .tile-md-1 {
    width: 100%;
  }
  .tile-md-2 {
    width: -webkit-calc(100% / 2);
      width: -moz-calc(100% / 2);
      width: calc(100% / 2);
  }
  .tile-md-3 {
    width: -webkit-calc(100% / 3);
    width: -moz-calc(100% / 3);
    width: calc(100% / 3);
  }
  .tile-md-4 {
    width: -webkit-calc(100% / 4);
    width: -moz-calc(100% / 4);
    width: calc(100% / 4);
  }
  .tile-md-5 {
    width: -webkit-calc(100% / 5);
    width: -moz-calc(100% / 5);
    width: calc(100% / 5);
  }
  .tile-md-6 {
    width: -webkit-calc(100% / 6);
    width: -moz-calc(100% / 6);
    width: calc(100% / 6);
  }

}

@media only screen and (min-width: 1200px) {

  .tile-lg-1 {
    width: 100%;
  }
  .tile-lg-2 {
    width: -webkit-calc(100% / 2);
    width: -moz-calc(100% / 2);
    width: calc(100% / 2);
  }
  .tile-lg-3 {
    width: -webkit-calc(100% / 3);
    width: -moz-calc(100% / 3);
    width: calc(100% / 3);
  }
  .tile-lg-4 {
    width: -webkit-calc(100% / 4);
    width: -moz-calc(100% / 4);
    width: calc(100% / 4);
  }
  .tile-lg-5 {
    width: -webkit-calc(100% / 5);
    width: -moz-calc(100% / 5);
    width: calc(100% / 5);
  }
  .tile-lg-6 {
    width: -webkit-calc(100% / 6);
    width: -moz-calc(100% / 6);
    width: calc(100% / 6);
  }

}

/* Alternative Kachel-Darstellung: 
    - Kachel-Elemente bekommen Klasse 'tile'
    - maximale Breite, damit Kacheln auf kleinen Bildschirmen nicht zu sehr 
      gestreckt werden
    - in einspaltiger Darstellung zentriert
    - Kachel-Container steuert Breite der Kacheln: 
      + tiles-xs-* für extra kleine Geräte (Bildschirm < 768px, z.B. Smartphone)
      + tiles-sm-* für kleine Geräte (Bildschirm > 768px, z.B. Tablet)
      + tiles-md-* für mittlere Geräte (Bildschirm > 992px, z.B. Desktop)
      + tiles-lg-* für große Geräte (Bildschirm > 1200px, sehr großer Bildschirm)
*/

.tile {
  padding: 6px 16px;
  max-width: 560px;
  margin: 0;
}

.tiles-xs-1 > .tile {
  width: 100%;
  margin: 0 auto;
}
.tiles-xs-2 > .tile {
  width: -webkit-calc(100% / 2);
  width: -moz-calc(100% / 2);
  width: calc(100% / 2);
}
.tiles-xs-3 > .tile {
  width: -webkit-calc(100% / 3);
  width: -moz-calc(100% / 3);
  width: calc(100% / 3);
}
.tiles-xs-4 > .tile {
  width: -webkit-calc(100% / 4);
  width: -moz-calc(100% / 4);
  width: calc(100% / 4);
}
.tiles-xs-5 > .tile {
  width: -webkit-calc(100% / 5);
  width: -moz-calc(100% / 5);
  width: calc(100% / 5);
}
.tiles-xs-6 > .tile {
  width: -webkit-calc(100% / 6);
  width: -moz-calc(100% / 6);
  width: calc(100% / 6);
}

@media only screen and (min-width: 768px) {

  .tile {
    padding: 16px;
  }

  .tiles-sm-1 > .tile {
    width: 100%;
    margin: 0 auto;
  }
  .tiles-sm-2 > .tile {
    width: -webkit-calc(100% / 2);
    width: -moz-calc(100% / 2);
    width: calc(100% / 2);
    margin: 0;
  }
  .tiles-sm-3 > .tile {
    width: -webkit-calc(100% / 3);
    width: -moz-calc(100% / 3);
    width: calc(100% / 3);
    margin: 0;
  }
  .tiles-sm-4 > .tile {
    width: -webkit-calc(100% / 4);
    width: -moz-calc(100% / 4);
    width: calc(100% / 4);
    margin: 0;
  }
  .tiles-sm-5 > .tile {
    width: -webkit-calc(100% / 5);
    width: -moz-calc(100% / 5);
    width: calc(100% / 5);
    margin: 0;
  }
  .tiles-sm-6 > .tile {
    width: -webkit-calc(100% / 6);
    width: -moz-calc(100% / 6);
    width: calc(100% / 6);
    margin: 0;
  }

}

@media only screen and (min-width: 992px) {

  .tiles-md-1 > .tile {
    width: 100%;
    margin: 0 auto;
  }
  .tiles-md-2 > .tile {
    width: -webkit-calc(100% / 2);
    width: -moz-calc(100% / 2);
    width: calc(100% / 2);
    margin: 0;
  }
  .tiles-md-3 > .tile {
    width: -webkit-calc(100% / 3);
    width: -moz-calc(100% / 3);
    width: calc(100% / 3);
    margin: 0;
  }
  .tiles-md-4 > .tile {
    width: -webkit-calc(100% / 4);
    width: -moz-calc(100% / 4);
    width: calc(100% / 4);
    margin: 0;
  }
  .tiles-md-5 > .tile {
    width: -webkit-calc(100% / 5);
    width: -moz-calc(100% / 5);
    width: calc(100% / 5);
    margin: 0;
  }
  .tiles-md-6 > .tile {
    width: -webkit-calc(100% / 6);
    width: -moz-calc(100% / 6);
    width: calc(100% / 6);
    margin: 0;
  }

}

@media only screen and (min-width: 1200px) {

  .tiles-lg-1 > .tile {
    width: 100%;
    margin: 0 auto;
  }
  .tiles-lg-2 > .tile {
    width: -webkit-calc(100% / 2);
    width: -moz-calc(100% / 2);
    width: calc(100% / 2);
    margin: 0;
  }
  .tiles-lg-3 > .tile {
    width: -webkit-calc(100% / 3);
    width: -moz-calc(100% / 3);
    width: calc(100% / 3);
    margin: 0;
  }
  .tiles-lg-4 > .tile {
    width: -webkit-calc(100% / 4);
    width: -moz-calc(100% / 4);
    width: calc(100% / 4);
    margin: 0;
  }
  .tiles-lg-5 > .tile {
    width: -webkit-calc(100% / 5);
    width: -moz-calc(100% / 5);
    width: calc(100% / 5);
    margin: 0;
  }
  .tiles-lg-6 > .tile {
    width: -webkit-calc(100% / 6);
    width: -moz-calc(100% / 6);
    width: calc(100% / 6);
    margin: 0;
  }

}

/* Darstellung bearbeiteter Kacheln
    - grüne, halbtransparente Fläche über der Kachel
    - großes, grünes Häkchen in der rechten unteren Ecke
*/

.tile-done > .iconcard {
  position: relative;
}

.tile-done > .iconcard::before {
	content: '';
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: 2;
	background-color: rgba(32,180,32,0.3);
	top: 0;
	left: 0;
}

.tile-done > .iconcard::after {
	content: '\2714';
	display: block;
	position: absolute;
	width: 60px;
	height: 60px;
	bottom: 0;
	right: 4px;
	text-align: right;
	font-size: 60px;
	line-height: 100%;
	font-weight: bold;
	color: #1fb41f;
	text-shadow: 1px 1px 2px black;
	z-index: 3;
}

@media only screen and (min-width: 768px),
        print {
  .tile-done > .iconcard::after {
    font-size: 80px;
    height: 80px;
    width: 80px;
  }
}

/* Bild-Container */

.imgcontainer {
  min-width: min-content;
  margin-top: 1.5em;
  margin-bottom: 1.5em;
}
  
.imgcontainer > img {
  width: 100%;
  height: auto;
  margin: 0;
}

/* Bild-Container, der das enthaltene Bild horizontal zentriert. Wird ein 
    'figure'-Element verwendet, wird auch das enthaltene 'figcaption'-Element 
    zentriert.
*/

.childimgcenter > img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
}
  
.childimgcenter > figcaption {
    text-align: center;
}

/* Bild-Container, die das enthaltene Bild auf kleinen Bildschirmen horizontal 
    zentrieren und auf größeren Bildschirmen am linken/rechten Rand ausrichten
*/

.childimgrightmobilecenter > img,
.childimgleftmobilecenter > img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
}
  
@media only screen and (min-width: 768px),
        print { 
  
    .childimgrightmobilecenter > img {
      margin-right: 0;
    }
  
    .childimgleftmobilecenter > img {
      margin-left: 0;
    }
  
}

/* Container zur Darstellung eines Bilds mit Text daneben
    Klasse 'img-float-block'
    - Text fließt rechts vom Bild 
    - auf mobilen Endgeräten Bild und Text untereinander
    Klasse 'split-block'
    - Text rechts vom Bild, vertikal zentriert, fließt nicht um das Bild herum
    - auf mobilen Endgeräten Bild und Text untereinander
*/

.imgfloatblock,
.img-float-block,
.split-block {
  margin: 30px 10px;
}
.imgfloatblock::after,
.img-float-block::after {
  content: '';
  display: block;
  clear: both;
}

.split-block {
  display: -webkit-flex;
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: center;
}

@media only screen and (min-width: 768px),
        print {
  .imgfloatblock,
  .img-float-block,
  .split-block {
    margin-left: 40px;
    margin-right: 40px;
  }
}

/* Container für das Bild
    - auf mobilen Endgeräten zentriert, Breite 100%
    - dunkelblauer Schatten
*/

.img-floater,
.split-img {
  float: none;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 30px;
  /*border: 2px solid #23396E;*/
  -webkit-box-shadow: 0 2px 8px -2px #2256A0;
  -moz-box-shadow: 0 2px 8px -2px #2256A0;
  box-shadow: 0 2px 8px -2px #2256A0;
}
.img-floater.img-rounded,
.img-floater.img-rounded-30,
.split-img.img-rounded,
.split-img.img-rounded-30 {
  overflow: visible;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
}
.img-floater-circle,
.split-img-circle {
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  overflow: hidden;
}
/* Bild immer am oberen Rand ausgerichtet, auch wenn der Textblock höher ist 
    als das Bild
*/
.split-img, 
.split-img-circle {
  align-self: flex-start;
}

/* auf kleinen Bildschirmen (Breite zwischen 450px und 768px, z.B. Tablets) 
    erscheint das Bild immer noch zentriert über dem Text, nimmt aber nicht 
    mehr die gesamte Breite ein
*/

@media only screen and (min-width: 450px) {
  .img-floater,
  .split-img {
    width: 400px;
  }
}

/* auf größeren Bildschirmen Bild am linken Rand, Text fließt rechts davon */

@media only screen and (min-width: 768px),
        print {
  .img-floater,
  .split-img {
    width: 40%;
    margin-left: 0;
    margin-right: 40px;
  }
  .split-img {
    margin-bottom: 0;
  }
  .img-floater {
    float: left;
    margin-bottom: 20px;
  }
}

.img-floater > img,
.split-img > img {
  display: block;
  margin: 0 auto;
  width: 100%;
  height: auto;
}
.img-floater.img-rounded > img,
.img-floater.img-rounded-30 > img,
.split-img.img-rounded > img,
.split-img.img-rounded-30 > img {
  -webkit-border-radius: 30px;
  -moz-border-radius: 30px;
  border-radius: 30px;
  -webkit-box-shadow: 0 2px 8px -2px #2256A0;
  -moz-box-shadow: 0 2px 8px -2px #2256A0;
  box-shadow: 0 2px 8px -2px #2256A0;
}

.split-text {
  flex-basis: 100%;
  flex-shrink: 0;
  margin-top: 0;
  margin-bottom: 0;
}

@media only screen and (min-width: 768px),
        print {

  .split-text {
    flex-basis: 0;
    flex-grow: 1;
  }
  
}

.split-text > .textb-xl,
.split-text > .text-b-xl,
.split-text > .bigbold,
.split-text > .xlarge_bold,
.split-text > .schrift-sehr-gross-fett {
    margin-bottom: 20px;
}

.split-text > p:last-child {
    margin-bottom: 0;
}

/* Bild mit abgerundeten Ecken (funktioniert auch, wenn die Klasse dem 
    Container zugeordnet wird) 
*/

.img-rounded,
.img-rounded-30 {
  -webkit-border-radius: 30px;
  -moz-border-radius: 30px;
  border-radius: 30px;
  overflow: hidden;
}

/* Icon-Karten zur Darstellung von Icons mit Text darunter
  - Rahmen und Schatten */

.iconcard {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    border: 1px solid #23396E;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    /*box-shadow: 0 2px 6px 0 #b3b3b3;*/
    -webkit-box-shadow: 2px 4px 6px -3px #2256A0;
    -moz-box-shadow: 2px 4px 6px -3px #2256A0;
    box-shadow: 2px 4px 6px -3px #2256A0;
    padding: 10px;
    height: 100%;
}

/* Icon-Container für Icon-Karten (nur 'icon-img-container') und Icon-Blocks
(auch 'icon-img-container-lg' für größere Icons). Zusätzliche Klassen zum 
Zuschneiden des enthaltenen Bildes auf Seitenverhältnis 1:1 
('img-square' und 'img-square-lg').
    - Höhe steuert Größe des Icons
    - Icon-Karten: Trennlinie zwischen Icon und Text
*/

.icon-img-container,
.icon-img-container-lg {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}
.icon-img-container {
    height: 90px;
    margin-bottom: 16px;
}
.icon-img-container-lg {
    height: 150px;
    margin-bottom: 32px;
}

.iconcard > .icon-img-container {
    flex-basis: 90px;
    margin-bottom: 0;
    margin-left: 0;
    margin-right: 15px;
}

.iconcard > .icon-img-container::after {
    display: none;
}

@media only screen and (min-width: 600px) {
    .icon-img-container {
        height: 108px;
        margin-bottom: 20px;
    }
    .icon-img-container-lg {
        height: 180px;
        margin-bottom: 40px;
    }
    .iconcard > .icon-img-container {
        height: 90px;
    }
}

@media only screen and (min-width: 768px) {
    .icon-img-container {
        height: 120px;
        margin-bottom: 0;
    }
    .icon-img-container-lg {
        height: 200px;
        margin-bottom: 0;
    }
    .iconcard {
        display: block;
        padding: 16px;
        border-width: 2px;
    }
    .iconcard > .icon-img-container {
        height: 120px;
        margin-bottom: 32px;
        margin-left: auto;
        margin-right: auto;
    }
    .iconcard > .icon-img-container::after {
        content: '';
        display: block;
        height: 0;
        width: 240px;
        max-width: 80%;
        border-top: 2px solid #2256A0;
        margin-left: auto;
        margin-right: auto;
        margin-top: 16px;
    }
}

/* Bild in Icon-Container
    - Größe wird von Container bestimmt
    - zentriert 
*/

.icon-img {
    width: auto;
    height: 100%;
    display: block;
    margin: 0 auto;
    max-width: unset;
}

.img-square > .icon-img {
    width: 90px;
    height: 90px;
    object-fit: cover;
}
.img-square-lg > .icon-img {
    width: 150px;
    height: 150px;
    object-fit: cover;
}

@media only screen and (min-width: 600px) {

    .img-square > .icon-img {
        width: 108px;
        height: 108px;
        object-fit: cover;
    }
    .img-square-lg > .icon-img {
        width: 180px;
        height: 180px;
        object-fit: cover;
    }
    .iconcard > .img-square > .icon-img {
        width: 90px;
        height: 90px;
    }

}

@media only screen and (min-width: 768px),
        print {

    .img-square > .icon-img {
        width: 120px;
        height: 120px;
        object-fit: cover;
    }
    .img-square-lg > .icon-img {
        width: 200px;
        height: 200px;
        object-fit: cover;
    }
    .iconcard > .img-square > .icon-img {
        width: 120px;
        height: 120px;
    }

}

/* Textblock für Icon-Karte
    - maximale Breite 560px
    - zentriert, wenn der Block nicht die volle Breite einnimmt
*/

.icon-text {
    max-width: 560px;
    margin-left: 0;
    margin-right: 0;
    text-align: left;
}

.icon-text > .textcenter, 
.icon-text > .text-center,
.icon-text > .text-zentriert {
  text-align: left;
}

@media only screen and (min-width: 768px),
        print {
    .icon-text {
        margin-left: auto;
        margin-right: auto;
    }
    .icon-text > .textcenter, 
    .icon-text > .text-center,
    .icon-text > .text-zentriert {
        text-align: center;
    }
}

/* Icon-Block zur Darstellung normal großer und größerer Icons mit Text daneben
    - Darstellung untereinander auf mobilen Endgeräten
    - Keine Trennlinie unter Icon-Container
*/

.iconblock {
    margin: 30px 10px;
}

.iconblock-text-lg, .iconblock-text {
    width: 100%;
}

@media only screen and (min-width: 768px),
        print {
    .iconblock {
        margin-left: 40px;
        margin-right: 40px;
    }  
    .iconblock > .icon-img-container-lg {
        flex-basis: 250px;
        margin-right: 32px;
        min-width: max-content;
    }
    .iconblock > .icon-img-container {
        flex-basis: 200px;
        margin-right: 24px;
        min-width: max-content;
    }
    .iconblock > .iconblock-text-lg, 
    .iconblock > .iconblock-text  {
        flex-basis: 0;
        flex-grow: 1;
        align-self: center;
    }
}

/* Größerer Abstand, wenn zwei Blöcke (Icon- oder Bild-Text-) direkt 
    aufeinander folgen 
*/

.iconblock + .iconblock,
.iconblock + .imgfloatblock,
.imgfloatblock + .iconblock,
.imgfloatblock + .imgfloatblock {
    margin-top: 45px;
}

/* Icons in Überschriften von Anforderungsmodulen 
    - Icon wird am rechten Rand im 'h1block' angezeigt 
    - Vertikale Zentrierung durch JS
    - Überschrift braucht zusätzlichen Abstand zum Rand um Icon nicht zu 
    verdecken und weiterhin zentriert zu erscheinen
    - Icon erscheint rund, Größe wird so angepasst (Höhe 72%), dass es komplett 
    sichtbar ist
    - Icongröße nimmt mit Bildschirmgröße zu
    - Zur richtigen Positionierung muss beim Parent-Element die Eigenschaft 
    'position: relative' gesetzt werden
*/

.icon-position-reference {
    position: relative;
}
.with-icon {
    padding-left: 70px;
    padding-right: 70px;
} 
.modul-icon {
    position: absolute;
    top: 8px;
    right: 5px;
    height: 60px;
    width: 60px;
    background-color: #fff;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
}
.modul-icon > .icon-img {
    height: 71%;
    margin: 14.5% auto;
}
@media only screen and (min-width: 600px) {
    .with-icon {
        padding-left: 90px;
        padding-right: 90px;
    } 
    .modul-icon {
        top: 11px;
        right: 10px;
        height: 70px;
        width: 70px;
    }
}
@media only screen and (min-width: 768px),
        print {
    .with-icon {
        padding-left: 110px;
        padding-right: 110px;
    } 
    .modul-icon {
        top: 20px;
        right: 15px;
        height: 80px;
        width: 80px;
    }
}

/*** Spezifische Elemente für OSA-Module ***/

/* Direktfeedback Erwartungscheck - NEUE VERSION
    - Hintergrundfarbe weiß
    - eigenes div-Element zur Erzeugung des Rahmens, Farbe abhängig davon, ob 
      richtige Antwort gegeben wurde: Klasse 'ecfb_frame_kor' und 
      'ecfb_frame_ink'
    - separate Blöcke zur Erzeugung des Tags ("Ihre Erwartung ist korrekt" bzw. 
      "... nicht korrekt"): Klasse 'ecfb_tag_kor' und 'ecfb_tag_ink'
    - Anzeige des richtigen Rahmen- und Tag-Elements per JavaScript (siehe 
      feedback.js)
*/

.ecfbblock{
  position: relative;
  margin-top: 10px;
  margin-bottom: 20px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  overflow: hidden;
  background-color: white; 
  border: none;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  border-radius: 8px;
}

.ecfb_text{
  padding: 16px;
}

.ecfb_text > .h3block {
  margin-top: -12px;
  margin-bottom: 4px;
  background-color: transparent;
  color: inherit;
  font-weight: 600;
}

.ecfb_text > p:last-child {
  margin-bottom: 0;
}

.ecfb_tag_kor{
  position: relative;
  width: 100%;
  padding: 0.5em 1em;
  color: white;
  color: inherit;
  background-color: #78BC29;
}

.ecfb_tag_ink{
  position: relative;
  width: 100%;
  padding: 0.5em 1em 0.5em 2.3em;
  text-indent: -1.3em;
  color: white;
  color: inherit;
  background-color: #F2C718;
}

.ecfb_frame_kor{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 2px solid;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  border-radius: 8px;
  border-color: #78BC29;
}

.ecfb_frame_ink{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 2px solid;
  border-color: #F2C718;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  border-radius: 8px;
}

/* auf größeren Bildschirmen nicht mehr gesamte Breite */
@media only screen and (min-width: 768px),
        print { 

  .ecfbblock{
    width: 80%;
    /*min-width: 718px;*/
  }

}

/* Hervorherbung einer Formel, z.B. für Zahlenreihe */

.formelblock {
  background-color: #f7fbff;
  padding: 15px 30px;
  width: max-content;
  border: 1px solid #2256A0;
  -webkit-border-radius: 15px;
  -moz-border-radius: 15px;
  border-radius: 15px;
  -webkit-box-shadow: 0 2px 4px -2px #2256A0;
  -moz-box-shadow: 0 2px 4px -2px #2256A0;
  box-shadow: 0 2px 4px -2px #2256A0;
  word-spacing: 4px;
  letter-spacing: 0.04em;
  margin: 15px 10px 10px;
  /* font-family: Courier New; */
	/* font-family: KateX Math; */
	/* font-family: Verdana; */
}

/* Hervorgehobener Block für Feedback
    - nimmt auf mobilen Geräten gesamte Breite ein, auf grßeren Bildschirmen 
      weniger
    - Abstände oben und unten 50px, horizontal zentriert
    - Hervorhebung durch Hintergrundfarbe der Überschrift und Schatteneffekt
    - auf mobilen Geräten kein Schatten, dafür farbiger Rahmen unten
*/

.fbblock {
  width: -webkit-calc(100% + 30px);
  width: -moz-calc(100% + 30px);
  width: calc(100% + 30px);
  padding: 16px 15px;
  margin: 50px -15px 50px;
  border-bottom: 18px solid #FBD650;
  /*background-color: #FBD650;*/ /* equivalent to rgb(251, 214, 80) */
  /*background-color: rgba(251, 214, 80, 0.85);*/
  /*overflow: auto;*/
}

@media only screen and (min-width: 600px) {
  .fbblock {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    -webkit-box-shadow: 0 2px 6px 0 #999999;
    -moz-box-shadow: 0 2px 6px 0 #999999;
    box-shadow: 0 2px 6px 0 #999999;
    border-bottom-style: none;
  }
}
@media only screen and (min-width: 992px) {
  .fbblock{
    width: 80%;
    margin-left: auto;
    margin-right: auto;
  }
}

.fbblock > .h3block:first-child {
  margin-top: -16px;
  background-color: #FBD650;
  color: inherit;
}

/* Feedback-Graph
    - Tabellen-Layout mit grauem Rahmen, Zeilen alternierend mit/ohne 
      Hintergrundfarbe
    - nimmt gesamte Breite ein, jedoch maximal 520px, horizontal zentriert
*/

.fbg {
  width: 100%;
  max-width: 520px;
  margin: 30px auto 15px;
  border: 2px solid SlateGrey;
  position: relative;
}

/* Zeilen mit fester Höhe, Titelzeile mit dunkelblauem Hintergrund und weißer 
    Schrift, dritte Zeile mit hellblauem Hintergrund. Hervorhebung einer Zeile 
    mit gelbem Hintergrund
*/

.fbg-row {
  width: 100%;
  height: 100px;
  background-color: white;
}
.fbg-row:first-child{
  height: 70px;
  background-color: #2256A0;
  color: white;
}
.fbg-row::after {
  content: '';
  display: block;
  clear: both;
}
.fbg-row.fbg-row-highlight {
  background-color: #FBD650;
}

/* Zwei Spalten, Breitenverhältnis 2:1
    - Spalte 1: enthält nur Überschriften, linksbündig und vertikal zentriert
    - Spalte 2: Überschrift linksbündig (zweite Zeile rechtsbündig) und 
        vertikal zentriert, Zahlenwerte linksbündig und am unteren Rand 
        ausgerichtet 
*/

.fbg-col-1 {
  width: 67%;
  height: 100%;
  float: left;
  display: -webkit-flex;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}

.fbg-col-2 {
  width: 33%;
  height: 100%;
  float: left;
  display: -webkit-flex;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
}

/* Überschriften */

.fbg-header {
  padding-left: 10px;
  padding-right: 10px;
  text-align: left;
  font-size: 1em;
  font-weight: 400;
}
@media only screen and (min-width: 400px){
  .fbg-header {
    -webkit-hyphens: none;
    -ms-hyphens: none;
    hyphens: none;
  }
}

/* In Titelzeile immer fett gedruckt */
.fbg-row:first-child > .fbg-header {
  font-weight: 600;
}

.fbg-col-2.fbg-header {
  padding-left: 10px;
  padding-right: 10px;
  flex-flow: row wrap;
  justify-content: flex-start;
  align-content: center;
}

/* Zwei Überschriften in Spalte 2, falls diese nicht in eine Zeile passen, 
    erscheint die zweite Überschrift rechtsbündig
*/
.fbg-double-header {
  flex-basis: 0;
  flex-grow: 1;
  min-width: max-content;
  max-width: 100%;
}
.fbg-double-header:nth-child(1) {
  margin-right: 4px;
}
.fbg-double-header:nth-child(2) {
  text-align: right;
}
/* Wenn die erste der beiden Überschriften ausgeblendet wird, kann die zweite 
    die volle Breite einnehmen und zentriert erscheinen
*/
.fbg-header-center {
	flex-basis: 100%;
	text-align: center;
}

/* Zahlenwerte */
.fbg-wert {
  width: 40px;
  text-align: center;
  height: 30px;
  padding-top: 4px;
  line-height: 16px;
  padding-bottom: 10px;
  padding-left: 10px;
}

/* Container für Balkenanzeige
    - liegt transparent über Spalte 2, hat gleiche Breite
    - am linken Rand Freiraum, damit Zahlenwerte nicht überdeckt werden
    - Balken erscheint zentriert
*/
.fbg-bar-container {
  width: 33%;
  height: 300px;
  position: absolute;
  right: 0;
  bottom: 0;
  padding-left: 40px;
  display: -webkit-flex;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  z-index: 2;
}
/* Wenn Zahlenwerte nicht angezeigt werden: gleicher Freiraum links und rechts
*/
.fbg-bar-container-full-width {
  padding-left: 15px;
  padding-right: 15px;
}

/* Balken: Breite richtet sich nach Breite des Containers, jedoch maximal 60px, 
    Farbe dunkelrot, Schrift weiß
*/
.fbg-bar {
  width: 66%;
  max-width: 60px;
  height: 0;
  background-color: #2256A0;
  background-color: #A20B54;
  color: white;
  -webkit-border-radius: 6px 6px 0 0;
  -moz-border-radius: 6px 6px 0 0;
  border-radius: 6px 6px 0 0;
}

.fbg-bar > .fbg-bar-text {
  display: block;
  width: 100%;
  margin-top: 4px;
  font-weight: 400;
  text-align: center;
  line-height: 16px;
}

/* Balkenhöhe richtet sich nach Stanine-Wert */

.fbg-bar-1 {
  height: 30px;
}
.fbg-bar-2 {
  height: 60px;
}
.fbg-bar-3 {
  height: 90px;
}
.fbg-bar-4 {
  height: 130px;
}
.fbg-bar-5 {
  height: 160px;
}
.fbg-bar-6 {
  height: 190px;
}
.fbg-bar-7 {
  height: 230px;
}
.fbg-bar-8 {
  height: 260px;
}
.fbg-bar-9 {
  height: 290px;
}

/* Wenn der Bildschirm groß genug ist: alle Überschriften und 
    Balkenbeschriftung fett gedruckt (ab 360px), Überschriften mit größerer 
    Schrift (ab 440px)
*/
@media only screen and (min-width: 360px) {
  .fbg-header {
    font-weight: 600;
  }
  .fbg-bar > .fbg-bar-text {
    font-weight: 600;
  }
}
@media only screen and (min-width: 440px) {
  .fbg-header {
    font-size: 1.1em;
    padding-left: 15px;
    padding-right: 15px;
  }
}

.hinweis-stichprobe-show {
  display: none;
}

.hinweis-stichprobe .hinweis-stichprobe-show {
  display: initial;
}

.hinweis-stichprobe .hinweis-stichprobe-hide {
  display: none;
}

/*** Banner-Formatierung ***/

/* Abstände des Containers */

.banner-container {
    margin-top: 0.5em;
    margin-bottom: 0;
}

/* Standard-Definitionen (für mobile Endgeräte) 
    - farbige Rahmen oben und unten
    - Text mit vergrößertem Zeichenabstand, Kapitälchen, zentriert
*/

#osabanner {
    margin: 0 auto 40px;
    padding: 0 10px 15px;
    background-color: #ffffff;
    border-top: 12px solid #23396E;
    border-bottom: 18px solid #23396E;
    color: #23396E;
    -webkit-box-shadow: 0 2px 6px 0 #999999;
    -moz-box-shadow: 0 2px 6px 0 #999999;
    box-shadow: 0 2px 6px 0 #999999;
}
#osabanner > .flex-static-l {
  margin-top: 6px;
}
.bannertext {
    font-size: 20px;
    font-weight: 100;
    letter-spacing: 0.05em;
    line-height: 120%;
    flex-grow: 1;
    font-variant: small-caps;
    text-align: center;
    width: 100%;
    margin-top: 8px;
}

/* Änderungen der obigen Definitionen auf größeren Bildschirmen
    - zusätzlicher vertikaler Abstand oben und dickere Rahmen
    - Text neben dem Logo und rechtsbündig (mit Abstand 10px)
*/

@media only screen and (min-width: 768px),
        print { 

    #osabanner {
        padding-top: 15px;
        border-top-width: 24px;
        border-bottom-width: 36px;
    }
    #osabanner > .flex-static-l {
      margin-top: 0;
      margin-left: 10px;
      margin-right: 10px;
    }
    .bannertext {
        max-width: -webkit-calc(100% - 176px - 30px); 
        max-width: -moz-calc(100% - 176px - 30px);
        max-width: calc(100% - 176px - 30px);
        text-align: right;
        margin-right: 10px;
        margin-top: 0;
    }
  
}

/* Änderungen der obigen Definitionen auf noch größeren Bildschirmen
    - größere Schrift und größerer Abstand rechts
*/

@media only screen and (min-width: 992px){

    #osabanner > .flex-static-l {
        margin-left: 15px;
        margin-right: 15px;
      }
    .bannertext {
        font-size: 28px;
        max-width: -webkit-calc(100% - 176px - 60px);
        max-width: -moz-calc(100% - 176px - 60px);
        max-width: calc(100% - 176px - 60px);
        margin-right: 30px;
    }
}

/* Tabellen */

.table-center {
  margin-left: auto;
  margin-right: auto;
}
.table-min,
.table-min-horizontal {
  border-collapse: collapse;
  margin-top: 15px;
  margin-bottom: 30px;
}
.table-min:last-child,
.table-min-horizontal:last-child {
  margin-bottom: 0;
}
.table-min th,
.table-min td,
.table-min-horizontal th,
.table-min-horizontal td {
  text-align: center;
  padding: 2px 8px;
  border: 1px black;
  border-right-style: solid;
  min-width: 2.5em;
}
.table-min th:last-child,
.table-min td:last-child,
.table-min-horizontal th:last-child,
.table-min-horizontal td:last-child {
  border-right-style: none;
}
.table-min th {
  border-bottom-style: solid;
}
.table-min-horizontal tr {
  border: 1px black;
  border-bottom-style: solid;
}
.table-min-horizontal tr:last-child {
  border-bottom-style: none;
}
.table-text-left th,
.table-text-left td {
  text-align: left;
}

.table-container {
  display: block;
  width: 100%;
  overflow: auto;
}

/* Collapsing elements have class 'collapse'. Associated trigger elements have 
    class 'collbtn'. Clicking the trigger element hides/displays the collapsing 
    element.
      - When the page is loaded, collapsing elements are by default initially 
        collapsed. For displaying them right away, add class 'in'. The 
        associated trigger element should have class 'collapsed' in the default  
        case but not when the collapsing element. is shown via class 'in'. 
        The correct class for the trigger element is automatically set via 
        JavaScript.
      - At the right side of trigger elements, an arrow symbol is included. 
      - When collapsing element is hidden: class 'collapsed' is added to trigger 
       element, arrow symbol points right.
      - When collapsing element is visible: class 'collapsed' is removed from 
        trigger element, arrow symbol points down.
*/

.collbtn {
    cursor: pointer;
    position: relative;
    padding-right: 40px;
  }
  
  .collbtn::after {
    font-size: 1.15em;
    content: "\2BC5";
    position: absolute;
    top: 0.4em;
    right: 15px;
  }
  
  .collbtn.collapsed::after {
    content: "\2BC6";
  }
  
  .emphtitle.collapsed {
    margin-bottom: -15px;
  }
  
  .collapse > p:last-child {
    margin-bottom: 0;
  }
  
  /* Larger arrow symbol if trigger element contains a heading of type 'h3' */
  
  .collbtnh3::before {
    font-size: 1.6em;
  }
  
  /* display heading in the same line as the arrow */
  
  .collbtnh3 > h3:first-child {
    margin-top: 10px;
    display: inline-block;
  }
  
  @media only screen and (max-width: 768px) { 
  
    .collbtnh3::before {
      font-size: 1.3em;
    }
  
  }

/* Comments always refer to code below them */

/**** Styling for feedback summary (print view) ****/

/* class for hiding certain elements in feedback summary (body id 'printpage')
  */

#printpage .printpage-hide {
    display: none;
}

/* fixed bar at the top of the window with a print button and instructions how 
    to save the document as PDF */

.topprintbar {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10;
    min-height: 3em;
    width: 100%;
    box-sizing: border-box;
    background-color: Lavender;
    border-bottom: 1px solid LightGrey;
    -webkit-box-shadow: 0 4px 4px -3px Grey;
    -moz-box-shadow: 0 4px 4px -3px Grey;
    box-shadow: 0 4px 4px -3px Grey;
    padding: 0.4em 1.2em;
}

.topprintbar.exp {
    align-items: center;
}

#printbar {
    margin-top: 0;
    margin-bottom: 0;
}

.topprintbar > button {
    min-height: 3em;
    margin: 0.3em 0 0.5em 1.2em;
    min-width: 120px;
}

.tpbtext {
    width: -webkit-calc(100% - 120px - 1.6em); 
    width: -moz-calc(100% - 120px - 1.6em);
    width: calc(100% - 120px - 1.6em); 
    min-height: 2em;
    position: relative;
}

/* on mobile devices, insctructions should take up full width and appear below 
    print button instead of next to it
*/

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

    .tpbtext {
        width: 100%;
        margin-top: 0.6em;
    }

}

/* instructions with a link toggling visibility (id 'clicker')
    - instructions are hidden initially
    - clicker remains same color unlike regular links */

#helptext {
    display: none;
}

#helptext.exp {
    margin: 0.4em 0 0.4em;
}

#clicker, #clicker:visited {
    color: royalblue;
    position: absolute;
    bottom: 0;
    right: 0;

}

/* print button */

.printbtn {
    background-color: white;
    border: 1px solid indigo;
    color: indigo;
    padding: 0.6em 1em;
    font-size: 1.2em;
    line-height: -webkit-calc(4/3);
    line-height: -moz-calc(4/3);
    line-height: calc(4/3);
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    cursor: pointer
}

.printbtn:hover {
    background-color: #ebeaf2;
}

/* feedback content is displayed in blocks with plenty of space between them 
    to indicate related content */

.fbpageblock {
    margin-top: 180px;
    padding-bottom: 60px;
    border-bottom: 2px solid Black;
}
.fbpageblock:first-child {
    margin-top: 120px;
}
.fbpageblock:last-child {
    border-bottom-style: none;
}

/* specific styling for printing, overriding bootstrap's elimination of 
    background-colors */

@media print {

    /* page layout instead of continuous document */

    @page {
        size: A4;
    }

    /* elements not required in print can be hidden */

    .no-print {
        display: none;
    }

    /* remove spacing between content blocks, use page breaks instead */

    .fbpageblock {
        margin-top: 0;
        border-bottom: none;
    }

    .printpagebreak {
        break-after: always;
    }

    /* bootstrap CSS eliminates all background-colors when printing, add borders 
        for compensation */

    .h1block{
        border: 2px #23396E;
        border-top-style: solid;
        border-bottom-style: solid;
    }

    .h3block{
        border: 2px #2256A0;
        border-top-style: solid;
        border-bottom-style: solid;
    }
    .ecfb_text > .h3block {
        border: none;
    }
    .fbblock > .h3block:first-child {
        border-color: #FBD650;
        border-top-style: none;
    }

    /* Seitenumbruch vermeiden in 
        - Erwartungscheck-Feedback-Block
        - Hervorgehobener ("Emphasized") Block
        - Feedback-Block
    */

    .ecfbblock,
    .emphblock,
    .fbblock {
        break-inside: avoid;
    }

    .emphtitle{
        border-bottom: 2px solid #2256A0;
    }

    .fbblock{
        border: 2px solid #FBD650;
    }

    .fbg-row:not(:last-child){
        border-bottom: 1px solid SlateGrey;
    }

    .fbg-bar {
        border: 2px solid #A20B54;
        border-bottom-style: none;
        /*background-color: #A20B54;
            attempt to override eliminated background-color - not working, could 
            be forced by using '!important' */
    }

}

/* "Dark Mode" mit dunklem Hintergrund und heller Schrift */

/* Container für den Dark-Mode-Button */
#container_btn_darkmode {
  height: 0;
  position: relative;
  top: -40px;
  right: -24px;
  opacity: 70%;
}
#container_btn_darkmode:hover {
  opacity: 1;
}

/* Dark-Mode-Button */
#btn_darkmode {
  position: absolute;
  right: 40px;
  top: 20px;
  width: 60px;
  height: 60px;
  border-width: 0;
  border-radius: 50%;
  overflow: hidden;
  -webkit-box-shadow: -1px 3px 6px 0 #666666;
  -moz-box-shadow: -1px 3px 6px 0 #666666;
  box-shadow: -1px 3px 6px 0 #666666;
  background: white;
  cursor: pointer;
}

#btn_darkmode > img {
  width: 80%;
  height: auto;
  margin-top: 10%;
}

/* Beschriftung anzeigen, wenn Maus über dem Dark-Mode-Button
    (nur auf Bildschirmen ab Tablet-Größe) */
#btn_darkmode:hover::after {
  content: '';
  display: block;
  text-align: center;
  font-size: 0.8em;
  width: 90px;
  position: absolute;
  bottom: -30px;
  margin-left: auto;
  margin-right: auto;
  left: -15px;
}

@media only screen and (min-width: 768px) {

  #container_btn_darkmode {
    top: -48px;
  }

  #btn_darkmode {
    width: 72px;
    height: 72px;
  }

  #btn_darkmode:hover::after {
    content: 'Dark Mode an/aus';
    width: 102px;
  }

}

@media only screen and (min-width: 992px) {

  #container_btn_darkmode {
    position: absolute;
    top: 0;
    right: 0;
    opacity: 1;
  }

  #btn_darkmode:hover::after {
    width: 150px;
    left: -39px;
  }

}

/* Dunkle Hintergrundfarbe und helle Schrift im gesamten Dokument */
.darkmode {
  background-color: black;
  color: #eff0f1;
}

/* Hellbaue Schriftfarbe für Links im Darkmode */
.darkmode a {
  color: #a9c4ff;
}

/* Dunkle Hintergrundfarbe für Pop-Up-Felder */
.darkmode .modal-content {
  background-color: #404040;
}

/* Helle Hervorhebung bei Fokussierung von Elementen, z.B. per Tab-Taste */
.darkmode input[type="text"]:focus,               /* Textfelder */
.darkmode .list-question-select:focus,            /* Dropdown-Listen */
.darkmode .radio-item:focus-within,               /* Optionsfelder in Liste oder Matrix*/
.darkmode .btn:focus, .darkmode .btn.focus, .darkmode .osabtn:focus   /* Buttons */
{
  outline-color: #eff0f1;
}

/* Dunkle Hintergrundfarbe in Frage-Containern */
.darkmode .question-container {
  background-color: #242424;
}

/* Dunkle Hintergrundfarbe und helle Schrift in Matrix-Fragen */
.darkmode .radio-array th.answertext {
	color: inherit;
}

.darkmode .table-hover > tbody > tr:hover {
	color: #444;
}

.darkmode .radio-array tr.ls-even {
	background-color: #404040;
}

/* Heller Rahmen (und teilweise Schrift) in Buttons */

.darkmode .btn-primary {
	border-color: #eff0f1;
}

.darkmode .btn-default {
	color: #eff0f1;
  border-color: #eff0f1;
}

.darkmode .yesno-button > .btn-primary {
  border-color: #eff0f1;
}

/* Dunkle Hintergrundfarbe in hervorgehobenen Blöcken */
.darkmode .emphblock {
  background-color: #404040;
}

.darkmode .nocolor {
  background-color: transparent;
}

.darkmode .info_welcome {
  border-color: #606060;
  border-color: rgba(128,128,128,0.4);
}

.darkmode .info_welcome > .emphtitle {
  background-color: #404040;
}

/* Helle Hintergrundfarbe für Icons */
/*.darkmode .icon-img-container {
	background-image: radial-gradient(circle, #eff0f1 40%, transparent 60%);
}*/

/* Heller Rahmen für Kacheln mit Icons */
.darkmode .iconcard {
  border-color: #eff0f1;
}

/* Helle Hintergrundfarbe für Icons */
/*.darkmode .iconcard > .icon-img-container {
	background-image: radial-gradient(circle, #eff0f1 30%, transparent 50%);
}*/

/* Helle Trennlinie in Kacheln mit Icons */
.darkmode .iconcard > .icon-img-container::after {
  border-top-color: #eff0f1;
}

/* Dunkle Schrift in Formelblöcken */

.darkmode .formelblock {
  color: #404040;
}

/* Dunkle Hintergrundfarbe in Feedback-Blöcken und -Graphen */
.darkmode .ecfbblock{
  background-color: #404040;
}

.darkmode .fbblock{
  background-color: #404040;
}

.darkmode .fbg-row:not(:first-child) {
  background-color: #404040;
}

.darkmode .fbg-row-highlight {
  background-color: #FBD650;
  color: #444;
}

.darkmode .fbg-row-highlight .fbg-wert {
  color: #444;
}

/* Container für Bildnachweise mit kleinerer Schrift */
#bildnachweise {
	font-size: 0.8em;
	line-height: 1.5em;
	text-align: left;
}

/* Überschrift für Bildnachweise: etwas größer und fett */
#bildnachweise > .bn-heading {
	display: block;
	font-size: 1.05em;
	margin: 0 0 4px;
	font-weight: 700;
}

/* Bildnachweis: auf kleinen Bildschirmen ganze Breite durch Darstellung als 
    'block'
*/
#bildnachweise > .bn-item {
	margin: 0;
	display: block;
}

/* auf großen Bildschirmen: mehrere Elemente pro Zeile möglich durch 
    Darstellung als 'inline-block'. Trennzeichen nach jedem Element (nur nicht 
    nach letztem)
*/
@media only screen and (min-width: 768px) {
  
  #bildnachweise > .bn-item {
    display: inline-block;
  }

  #bildnachweise > .bn-item:not(:last-child)::after {
    content: '|';
    margin: 0 4px;
  }

}

/* Elemente, die unsichtbar sind, von Screenreadern aber gelesen werden
 * Quelle: https://github.com/ampproject/amphtml/blob/main/css/ampshared.css 
 */
 .screenreader-only {
  position: fixed !important;
  /* keep it on viewport */
  top: 0px !important;
  left: 0px !important;
  /* give it non-zero size, VoiceOver on Safari requires at least 2 pixels
     before allowing buttons to be activated. */
  width: 4px !important;
  height: 4px !important;
  /* visually hide it with overflow and opacity */
  opacity: 0 !important;
  overflow: hidden !important;
  /* remove any margin or padding */
  border: none !important;
  margin: 0 !important;
  padding: 0 !important;
  /* ensure no other style sets display to none */
  display: block !important;
  visibility: visible !important;
}