﻿/******************************************************************************
 * Hilfe & Service von EDV-Fachleuten.cascading style sheets                  *
 * mit den Standard-Formaten,                                                 *
 * welche von der Homepage der Firma verwendet werden sollen.                 *
 * Die Benutzng erfolgt durch                                                 *
 * - Einbindung mittels (Auf Pfad achten!!!)                                  *
 *   <head>                                                                   *
 *   ...                                                                      *
 *   <link rel="stylesheet" href="./hus.css" type="text/css">                 *
 *    <!-- Oder -\->                                                          *
 *   <style type="text/css">@import url("./hus.css");</s\tyle>                *
 *     ...                                                                    *
 *   </head>                                                                  *
 * Aufruf mittels den global verwendbaren Attributen class und id             *
 *  - Beispiel anhand einer Klasse:                                           *
 *    <div class="EditR">Editzeile</div>                                      *
 *  - Beispiel anhand einer ID:                                               *
 *    <iframe src="..." id="Haupt">text</iframe>                              *
 * Hinweise:                                                                  *
 * - Pro HTML-Datei darf jede ID nur einmal vorkommen                         *
 *  (IDs sind Ansteuerbar).                                                   *
 * - IDs lassen sich auch per Anker ansprechen.                               *
 *   (macht <a name="...">text</a> ueberfluessig)                             *
 * - Klassen (class) duerfen beliebig oft verwendet werden.                   *
 * - Gekoppelt = Klasse oder ID laesst sich nur auf vorrangestellten HTML-    *
 *   Tag anwenden (BSP: iframe#Oben {} erlaubt die ID Oben nur bei iFrames)   *
 * - Ungekoppelt = Klasse oder ID laesst sich ueberall anwenden.              *
 *   (BSP: .EditR {} kann ueberall angewannt werden. div, span, usw...)       *
 * - Die Standardwerte befinden sich nun in default.css                       *
 * Zustaendigkeit der jeweiligen hus.css fuer was?                            *
 * - TSc: Diese Angaben sind nicht mehr aktuell, muss neu gemacht werden.     *
 * - include/hus_avse: Fuer die Mitnahme einer HTML-Seite nach Extern.        *
 * - include/hus_av/include: Ja, wofuer ist die Frage?                        *
 * - husvedvf.tmp/include: Alte Homepage bis in die Version v2.999            *
 * - husvedvf/templates/husvedvf/css: CMS von Joomla.                         *
 * - intern/templates/husvedvf/css: CMS von Joomla und die Sandbox.           *
 * ========================================================================== *
 * Copyright by Hilfe & Service von EDV-Fachleuten                            *
 *              Reilstr. 6, D-06114 Halle (Saale)                             *
 *              Tel. (0345) 521 13 40                                         *
 * Edit v5.021 from 2008-05-14 to 2022-05-05 by TSc+HSc+SBa                   *
 ******************************************************************************/


/******************************************************************************
 * Absatzformate                                                              *
 ******************************************************************************/
/* #region */
.AbsBlock { /* Absatz Block fuer Blocktextformatierung */
 text-align: justify;
 }
.AbsLinks {   /* Richtet Inhalt eines beliebigen Elementes Links aus */
 text-align: left;
 }
pre.AbsLinksNP {   /* Absatz Links, Nicht Proportional und Fett fuer Re./Ang. */
 border: 1px dashed var(--colorBorder3dA);
 font-family: var(--fontBlock);
 font-weight: bold;
 overflow-x: auto;
 }
pre.AbsLinksNP::-webkit-scrollbar { /* TSc: Verhalten der Scroll-Leiste */
 -webkit-appearance: none; /* TSc: Chrome blendet ein/aus wie es lustig ist */
 width: 14px;
 height: 14px;
 }
pre.AbsLinksNP::-webkit-scrollbar-thumb { /* TSc: Verhalten des Scrollbalken */
 border-radius: 8px;
 border: 3px solid var(--colorScrollBorder);
 background-color: var(--colorScrollBackground);
 }
.AbsRechts {   /* Richtet Inhalt eines beliebigen Elementes Rechts aus */
 text-align: right;
 }
.AbsTitel {   /* Frei verwendbarer Titel, kleiner als h* groeszer als Text */
 color: var(--colorHeading);
 font-size: 1.1rem;
 font-weight: bold;
 text-align: center;
 text-decoration: underline;
 vertical-align: top;
 }
.AbsZentriert {   /* Richtet Inhalt eines beliebigen Elementes Mittig aus */
 text-align: center;
 }
ul.Gleichung {   /* Linkliste mit = am Anfang. */
 list-style-type: '=  ';
 }
/* #endregion */


/******************************************************************************
 * Blockschriftformate                                                        *
 ******************************************************************************/
/* #region */
/******* Konsolenansicht ******************************************************/
code.Konsole {   /* Inline, flieszt im Text */
 background-color: var(--colorText);
 border-style: solid;
 color: var(--colorBackground);
 font-family: var(--fontBlock);
 }
pre.Konsole {   /* Block, 80 Zeichen pro Zeile */
 background-color: var(--colorText);
 border-color: var(--colorBorder3dB)
               var(--colorBorder3dA)
               var(--colorBorder3dA)
               var(--colorBorder3dB);
 border-style: inset;
 border-width: 2px;
 color: var(--colorBackground);
 font-family: var(--fontBlock);
 font-size: 0.99rem;
 max-width: 80ch !important;
 overflow-x: auto;
 padding: 3px;
 tab-size: 4; -moz-tab-size: 4;
 }
pre.Konsole::-webkit-scrollbar { /* TSc: Verhalten der Scroll-Leiste */
 -webkit-appearance: none; /* TSc: Chrome blendet ein/aus wie es lustig ist */
 width: 14px;
 height: 14px;
 }
pre.Konsole::-webkit-scrollbar-thumb { /* TSc: Verhalten des Scrollbalken */
 border-radius: 8px;
 border: 3px solid var(--colorScrollBorder);
 background-color: var(--colorScrollBackground);
 }

/******* Darstellung von Code (ohne Syntax-Highlighting) **********************/
textarea.Code { /* Code innerhalb einer textarea -> Gut fuer HTML-Code */
 background-color: var(--colorBox);
 border-color: var(--colorBorder3dB)
               var(--colorBorder3dA)
               var(--colorBorder3dA)
               var(--colorBorder3dB);
 border-style: inset;
 border-width: 2px;
 font-size: 0.9rem;
 min-height: 11rem;
 outline: none;
 overflow-x: auto;
 padding: 3px;
 resize: none; /* TSc: Groesze soll nicht verstellbar sein */
 tab-size: 4; -moz-tab-size: 4;
 width: 99%;
 }
textarea.Code::-webkit-scrollbar { /* TSc: Verhalten der Scroll-Leiste */
 -webkit-appearance: none; /* TSc: Chrome blendet ein/aus wie es lustig ist */
 width: 14px;
 height: 14px;
 }
textarea.Code::-webkit-scrollbar-thumb { /* TSc: Verhalten des Scrollbalken */
 border-radius: 8px;
 border: 3px solid var(--colorScrollBorder);
 background-color: var(--colorScrollBackground);
 }

/******* Darstellung von Quelltext (mit Syntax-Highlighting per highlight.js) */
/* TSc: Das Format kann auch ohne highlight.js verwendet werden. */
.Quelltext { /* Quelltext allgemein */
 background-color: var(--colorSource);
 border-color: var(--colorBorder3dB)
               var(--colorBorder3dA)
               var(--colorBorder3dA)
               var(--colorBorder3dB);
 border-style: inset;
 border-width: 2px;
 font-size: 0.9rem;
 min-height: 11rem;
 outline: none;
 overflow: auto;
 padding: 3px;
 tab-size: 4; -moz-tab-size: 4;
 white-space: pre;
 }
.Quelltext::-webkit-scrollbar { /* TSc: Verhalten der Scroll-Leiste */
 -webkit-appearance: none; /* TSc: Chrome blendet ein/aus wie es lustig ist */
 width: 14px;
 height: 14px;
 }
.Quelltext::-webkit-scrollbar-thumb { /* TSc: Verhalten des Scrollbalken */
 border-radius: 8px;
 border: 3px solid var(--colorScrollBorder);
 background-color: var(--colorScrollBackground);
 }
.Quelltext>span.hljs { /* highlight.js Wrapper */
 padding: 0;
 }
.Quelltext>span.hljs::-webkit-scrollbar { /* TSc: Verhalten der Scroll-Leiste */
 -webkit-appearance: none; /* TSc: Chrome blendet ein/aus wie es lustig ist */
 width: 14px;
 height: 14px;
 }
.Quelltext>span.hljs::-webkit-scrollbar-thumb { /* TSc: Verhalten des Scroll. */
 border-radius: 8px;
 border: 3px solid var(--colorScrollBorder);
 background-color: var(--colorScrollBackground);
 }
.Quelltext.Kompakt { /* Kompaktansicht = Scrollbalken wird angezeigt */
 overflow-y: scroll;
 max-height: 26rem;
 }
pre.Quelltext { /* Quelltext in pre */
 min-height: auto;
 }
textarea.Quelltext { /* Quelltext in textarea */
 resize: none; /* TSc: Groesze soll nicht verstellbar sein */
 }
xmp.Quelltext {
 min-height: auto;
 }

/******* Kontaktbox ***********************************************************/
div.Kontakt {
 background-color: var(--colorBox);
 border-color: var(--colorBorder3dB)
               var(--colorBorder3dA)
               var(--colorBorder3dA)
               var(--colorBorder3dB);
 border-style: inset;
 border-width: 2px;
 clear: both;
 display: inline-block;
 font-family: var(--fontBlock);
 margin: 0 auto 0 auto;
 }
div.Kontakt>div.Links {
 padding: 3px;
 white-space: pre-wrap;
 }
div.Kontakt>div.Rechts {
 padding: 3px;
 white-space: pre-wrap;
 }
@media only screen and (min-width: 640px) {
 div.Kontakt {
  display: inline-flex;
  flex-wrap: wrap;
  }
 div.Kontakt>div.Rechts {
  padding-left: 50px;
  }
 }
/* #endregion */


/******************************************************************************
 * Linienformate                                                              *
 ******************************************************************************/
/* #region */
hr.Trenner { /* Sichtbare linie */
 clear: both;
 }
hr.FluszEnde,hr.FlussEnde { /* Unsichtbare Linie */
 background-color: transparent;
 border-color: transparent;
 clear: both !important;
 color: transparent;
 display: block; /* TSc: Muss block sein, sonst Hoehenangabe nicht moeglich! */
 height: 1px;
 line-height: 1px;
 margin: 0;
 padding: 0;
 }
/* #endregion */


/******************************************************************************
 * Editzeilenformate                                                          *
 * Die Editzeile, welche die Artikelversion, die Autoren und                  *
 * das Erstellungsdatum, sowie das Aenderungsdatum enthaelt.                  *
 ******************************************************************************/
/* #region */
/******* Editzeile Linksbuendig ***********************************************/
div.EditL, p.EditL {
 color: var(--colorText);
 font-size: 0.75rem;
 font-family: var(--fontNormal);
 font-weight: 100;
 margin: 0;
 text-align: left;
 }

/******* Editzeile Rechtsbuendig **********************************************/
div.EditR, p.EditR {
 color: var(--colorText);
 font-size: 0.75rem;
 font-family: var(--fontNormal);
 font-weight: 100;
 margin: 0;
 text-align: right;
 }
/* #endregion */


/******************************************************************************
 * Layoutformate wie                                                          *
 * - eine Tabelle fuer Logo, Editzeile,Titel und Nutzen                       *
 * - eine Tabelle fuer die Linkliste und                                      *
 * - eine Tabelle fuer den Inhalt.                                            *
 * - Garantie der Breite: Voll, Halb und Viertel.                             *
 * - Uebergrosze Inhalte in der X-Achse scrollen.                             *
 * - Ausblenden von Elementen.                                                *
 ******************************************************************************/
/* #region */
/******* Tabelle: Logo, Edit, Titel und Nutzen ********************************/
main>article>header,
main>article>header.LgEdTtNz {
 /* TSc: Wird in template.css definiert */
 display: block;
 }
main>table.LgEdTtNz {   /* Die Tabelle selbst */
 background-color: var(--colorContent);
 border: 1px solid var(--colorBorder);
 border-collapse: collapse;
 display: block;
 margin: 0 5px 5px 0;
 }
main>table.LgEdTtNz>tbody,
main>table.LgEdTtNz>tfoot,
main>table.LgEdTtNz>thead {   /* Kopf, Koerper und Fusz */
 display: block;
 }
main>table.LgEdTtNz>tbody>tr,
main>table.LgEdTtNz>tfoot>tr,
main>table.LgEdTtNz>thead>tr {   /* Tabellenzeilen */
 align-items: stretch;
 display: flex;
 }
@media only screen and (max-width: 500px) { /* < 500px = Logo untereinander */
 main>table.LgEdTtNz>tbody>tr,
 main>table.LgEdTtNz>tfoot>tr,
 main>table.LgEdTtNz>thead>tr {   /* Tabellenzeilen */
  display: block;
  }
 main>table.LgEdTtNz>tbody>tr>td:nth-child(1),
 main>table.LgEdTtNz>tbody>tr>th:nth-child(1),
 main>table.LgEdTtNz>tfoot>tr>td:nth-child(1),
 main>table.LgEdTtNz>tfoot>tr>th:nth-child(1),
 main>table.LgEdTtNz>thead>tr>td:nth-child(1),
 main>table.LgEdTtNz>thead>tr>th:nth-child(1) { /* Logo zentrieren */
  text-align: center;
  }
 }
main>table.LgEdTtNz>tbody>tr>td,
main>table.LgEdTtNz>tbody>tr>th,
main>table.LgEdTtNz>tfoot>tr>td,
main>table.LgEdTtNz>tfoot>tr>th,
main>table.LgEdTtNz>thead>tr>td,
main>table.LgEdTtNz>thead>tr>th {   /* Zellen der Inhaltstabelle selbst */
 display: block;
 flex-basis: content;
 flex-grow: 1;
 padding: 10px;
 text-align: justify;
 font-weight: normal;
 }

/******* Tabelle: Linkliste ***************************************************/
main>article>nav,
main>article>nav.LkLst {
 /* TSc: Wird in template.css definiert */
 display: block;
 }
main>table.LkLst {   /* Die Tabelle selbst */
 background-color: var(--colorContent);
 border: 1px solid var(--colorBorder);
 border-collapse: collapse;
 display: block;
 margin: 0 5px 5px 0;
 }
main>table.LkLst>tbody,
main>table.LkLst>tfoot,
main>table.LkLst>thead {   /* Kopf, Koerper und Fusz */
 display: block;
 }
main>table.LkLst>tbody>tr,
main>table.LkLst>tfoot>tr,
main>table.LkLst>thead>tr {   /* Tabellenzeilen */
 align-items: stretch;
 display: flex;
 }
@media only screen and (max-width: 500px) { /* < 500px = Zellen untereinander */
 main>table.LkLst>tbody>tr,
 main>table.LkLst>tfoot>tr,
 main>table.LkLst>thead>tr {   /* Tabellenzeilen */
  display: block;
  }
 }
main>table.LkLst>tbody>tr>td,
main>table.LkLst>tbody>tr>th,
main>table.LkLst>tfoot>tr>td,
main>table.LkLst>tfoot>tr>th,
main>table.LkLst>thead>tr>td,
main>table.LkLst>thead>tr>th {   /* Zellen der Inhaltstabelle selbst */
 display: block;
 flex-basis: content;
 flex-grow: 1;
 padding: 10px;
 text-align: justify;
 font-weight: normal;
 }

/******* Tabelle: Inhalt ******************************************************/
main>article>section,
main>article>section.Inhalt {
 /* TSc: Wird in template.css definiert */
 display: block;
 }
main>table.Inhalt {   /* Die Tabelle selbst */
 background-color: var(--colorContent);
 border: 1px solid var(--colorBorder);
 border-collapse: collapse;
 display: block;
 margin: 0 5px 5px 0;
 }
main>table.Inhalt>tbody,
main>table.Inhalt>tfoot,
main>table.Inhalt>thead {   /* Kopf, Koerper und Fusz */
 display: block;
 }
main>table.Inhalt>tbody>tr,
main>table.Inhalt>tfoot>tr,
main>table.Inhalt>thead>tr {   /* Tabellenzeilen */
 align-items: stretch;
 display: flex;
 }
@media only screen and (max-width: 500px) { /* < 500px = Zellen untereinander */
 main>table.Inhalt>tbody>tr,
 main>table.Inhalt>tfoot>tr,
 main>table.Inhalt>thead>tr {   /* Tabellenzeilen */
  display: block;
  }
 }
main>table.Inhalt>tbody>tr>td,
main>table.Inhalt>tbody>tr>th,
main>table.Inhalt>tfoot>tr>td,
main>table.Inhalt>tfoot>tr>th,
main>table.Inhalt>thead>tr>td,
main>table.Inhalt>thead>tr>th {   /* Zellen der Inhaltstabelle selbst */
 display: block;
 flex-basis: content;
 flex-grow: 1;
 padding: 10px;
 text-align: left;
 font-weight: normal;
 }
table.Inhalt table {   /* Tabellen innerhalb der Inhaltstabelle */
 margin: 4px;
 }
table.Inhalt>tbody>tr>td table td,
table.Inhalt>tfoot>tr>td table td,
table.Inhalt>thead>tr>td table td {   /* Verschachtelte Tabellenzellen */
 padding: 3px;
 }
table.Inhalt table.Inhalt {   /* TSc: Inhaltstabelle in Inhaltstabelle */
 border: 1px dashed var(--colorBorder3dA);
 margin: 0 0 5px 0;
 width: 100%;
 }

/******* SpanVoll = Volle Breite garantieren **********************************/
/* TSc: Element ist immer volle Breite, egal wie viel Platz vorhanden ist. */
body>main>article>nav.SpanVoll,
body>main>article>section.SpanVoll {
 grid-column: span 4;
 }

/******* SpanHalb = Halbe Breite garantieren **********************************/
/* TSc: Element ist immer halbe Breite, wenn der Platz es zulaesst. */
body>main>article>nav.SpanHalb,
body>main>article>section.SpanHalb {
 grid-column: span 4;
 }
@media only screen and (min-width: 500px) {
 body>main>article>nav.SpanHalb {
  grid-column: span 2;
  }
 }
@media only screen and (min-width: 1280px) {
 body>main>article>nav.SpanHalb,
 body>main>article>section.SpanHalb {
  grid-column: span 2;
  }
 }
@media only screen and (min-width: 2560px) {
 body>main>article>nav.SpanHalb,
 body>main>article>section.SpanHalb {
  grid-column: span 2;
  }
 }

/******* SpanViertel = Viertel Breite garantieren *****************************/
/* TSc: Element ist immer viertel Breite, wenn der Platz es zulaesst. */
body>main>article>nav.SpanViertel,
body>main>article>section.SpanViertel {
 grid-column: span 4;
 }
@media only screen and (min-width: 500px) {
 body>main>article>nav.SpanViertel {
  grid-column: span 2;
  }
 }
@media only screen and (min-width: 1280px) {
 body>main>article>nav.SpanViertel,
 body>main>article>section.SpanViertel {
  grid-column: span 1;
  }
 }
@media only screen and (min-width: 2560px) {
 body>main>article>nav.SpanViertel,
 body>main>article>section.SpanViertel {
  grid-column: span 1;
  }
 }

/******* ScrolleX = Inhalt horizontal scrollen ********************************/
div.ScrolleX {
 /* TSc: Deklariere Variablen fuer 100%, 50% und 25% Breite */
 /*
 --w100: calc(100vw - 5px - 1px - 10px - 2px - 10px - 1px - 5px - 10px);
 --w50:  calc( 50vw - 5px - 1px - 10px - 2px - 10px - 1px - 5px - 10px);
 --w25:  calc( 25vw - 5px - 1px - 10px - 2px - 10px - 1px - 5px - 10px);
 */
 /*           ^       ^     ^     ^      ^     ^      ^     ^     ^
              |       |     |     |      |     |      |     |     |
              |       |     |     |      |     |      |     |     + = Extra
              |       |     |     |      |     |      |     + = section:margin-r
              |       |     |     |      |     |      + = section:border-right
              |       |     |     |      |     + = section:padding-right
              |       |     |     |      + = .ScrolleX:border(left+right)
              |       |     |     + section:padding-left
              |       |     + = section:border-left
              |       + = main:margin-left
              + = 100% vom Eltern-ElementS
 */
 background-color: var(--colorOverflow);
 border: 1px dashed var(--colorBorder);
 margin: 10px 0px 10px 0px;
 min-height: 0; /* TSc: Damit overflow richtig funktioniert */
 min-width: 0; /* TSc: Damit overflow richtig funktioniert */
 max-width: 100%;
 /*max-width: var(--w100);*/ /* TSc: Volle Breite ist Standard */
 overflow-x: auto; /* TSc: Das allein funktioniert leider nicht! */
 }
/* TSc: Mache ScrolleX Responsiv und Kompatibel zu SpanVoll/Halb/Viertel */
/*
body>main>article>nav.SpanVoll div.ScrolleX,
body>main>article>section.SpanVoll div.ScrolleX {
 max-width: var(--w100);
 }
@media only screen and (min-width: 500px) {
 body>main>article>nav.SpanHalb div.ScrolleX {
  max-width: var(--w50);
  }
 body>main>article>nav.SpanViertel div.ScrolleX {
  max-width: var(--w25);
  }
 }
@media only screen and (min-width: 1280px) {
 div.ScrolleX {
  max-width: var(--w50);
  }
 body>main>article>nav.SpanHalb div.ScrolleX,
 body>main>article>section.SpanHalb div.ScrolleX {
  max-width: var(--w50);
  }
 body>main>article>nav.SpanViertel div.ScrolleX,
 body>main>article>section.SpanViertel div.ScrolleX {
  max-width: var(--w25);
  }
 }
@media only screen and (min-width: 2560px) {
 div.ScrolleX {
  max-width: var(--w25);
  }
 body>main>article>nav.SpanHalb div.ScrolleX,
 body>main>article>section.SpanHalb div.ScrolleX {
  max-width: var(--w50);
  }
 body>main>article>nav.SpanViertel div.ScrolleX,
 body>main>article>section.SpanViertel div.ScrolleX {
  max-width: var(--w25);
  }
 }*/
/* TSc: Scrollbalken fuer ScrolleX */
div.ScrolleX::-webkit-scrollbar { /* TSc: Verhalten der Scroll-Leiste */
 -webkit-appearance: none; /* TSc: Chrome blendet ein/aus wie es lustig ist */
 width: 14px;
 height: 14px;
 }
div.ScrolleX::-webkit-scrollbar-thumb { /* TSc: Verhalten des Scrollbalken */
 border-radius: 8px;
 border: 3px solid var(--colorScrollBorder);
 background-color: var(--colorScrollBackground);
 }

/******* Ausblenden ***********************************************************/
.Ausblenden {
 display: none !important;
 }
/* #endregion */


/******************************************************************************
 * Ueberschriftenformate                                                      *
 ******************************************************************************/
/* #region */
h1.Kopf,h2.Kopf,h3.Kopf,h4.Kopf,h5.Kopf,h6.Kopf {/* ohne oberen Abstand. */
 margin-top: 0px;
 }
/* #endregion */


/******************************************************************************
 * Textflussformate (komplex)                                                 *
 * Bild mit Untertitel und das Ganze links/rechts ausgerichtet.               *
 * Das verschachtelte DIV-Element dient als Container,                        *
 * um einen Untertitel zu einem Bild,                                         *
 * welches ebenfalls in diesem DIV-Element ist.                               *
 * Das Element im inneren DIV sollte von Links, Unten und Rechts etwas        *
 * eingerueckt sein und                                                       *
 * kann mehrere Bilder oder Figuren enthalten.                                *
 * <div class="BmUudG*a"><div><img/></div></div>                              *
 * <div class="BmUudG*a"><div><figure></figure></div></div>                   *
 * TSc: Warum soll der Hauptcontainer BmUudGra links flieszen?                *
 * HSc: Weil das Bild darin rechts flieszen soll.                             *
 ******************************************************************************/
/* #region */
div.BmUudGla { /* Hauptcontainer Links */
 display: block;
 /* float: right; */ /* TSc: Warum soll der Hauptcontainer rechts flieszen? */
 margin: 0pt;
 text-align: justify;
 }
div.BmUudGla div { /* Container fuer das Bild und den Untertitel */
 display: block;
 float: left; /* TSc: Den Bildcontainer flieszen zu lassen ist korrekt */
 margin-bottom: 3px;
 margin-right: 8px;
 padding-bottom: 2px;
 padding-left: 3px;
 padding-right: 3px;
 }
div.BmUudGla div img { /* Das Bild */
 display: block;
 }

div.BmUudGra {
 display: block;
 /* float: left; */ /* TSc: Warum soll der Hauptcontainer BmUudGra links flieszen?  */
 margin: 0pt;
 text-align: justify;
 }
div.BmUudGra div { /* Container fuer das Bild und den Untertitel */
 display: block;
 float: right; /* TSc: Den Bildcontainer flieszen zu lassen ist korrekt */
 margin-bottom: 3px;
 margin-right: 3px;
 padding-bottom: 2px;
 padding-left: 8px;
 padding-right: 3px;
 }
div.BmUudGra div img { /* Das Bild */
 display: block;
 }

/* TSc: Neues Verfahren seit HTML5 */
/* TSc: Bitte nicht verwenden, falscher Style, benutze bitte: BmUla */
figure.BmUudGla { /* Container nur links */
 float: left;
 margin: 0 5px 5px 0;
 }
/* TSc: Bitte nicht verwenden, falscher Style, benutze bitte: BmUra */
figure.BmUudGra { /* Container nur rechts */
 float: right;
 margin: 0 0 5px 5px;
 }
/* #endregion */


/******************************************************************************
 * Textflussformate (einfach)                                                 *
 * Bild mit Untertitel links/rechts ausgerichtet.                             *
 * <div class="BmU*a"><img/></div>                                            *
 * <figure class="BmU*a"><img/><figcaption></figcaption></figure>             *
 ******************************************************************************/
 /* #region */
div.BmUla { /* Der Textfluszcontainer Links */
 float: left;
 margin: 0 5px 0 0;
 padding: 0 0 0.5em 0;
 }
div.BmUla img { /* Das Bild */
 display: block;
 }
div.BmUra { /* Der Textfluszcontainer Rechts */
 float: right;
 margin: 0 0 0 5px;
 padding: 0 0 0.5em 0;
 }
div.BmUra img { /* Das Bild */
 display: block;
 }

/* TSc: Neues Verfahren seit HTML5 */
figure.BmUla { /* Container nur links */
 float: left;
 margin: 0 24px 5px 0;   /* top right 5->24 wegen Listenpunkten bottom left */
 }
figure.BmUra { /* Container nur rechts */
 float: right;
 margin: 0 0 5px 5px;
 }

div.Formel, p.Formel {
 border-color: var(--colorLink);
 border-style: outset;
 border-width: 3px;
 display: inline-block;
 font-family: var(--fontBlock);
 padding: 8px;
 margin: 8px;
 }

/******************************************************************************
 * Elemente fuer die Berechung in Form einer Gleichung und Zweispaltig.        *
 *******************************************************************************/
span.Gleichung {
 color: green;
 font-family: 'Consolas', 'Courier New', 'Courier', monospace;
 font-weight: bold;
 text-decoration: underline solid blue;
 }

ul.Gleichung {
 list-style-type: '=  ';
 }

div.Gl_Li {
 float: left;
 width: 48%;
 }

div.Gl_Re {
 overflow:hidden;
 padding: 0px 4px 2px 8px;   /* oben rechts unten links */
 width: 48%;
 }


/* #endregion */


/******************************************************************************
 * Rahmenformate                                                              *
 ******************************************************************************/
/* #region */
/******* Hier sind dateispezifische Formate erlaubt, wie Rahmen mit
         Rahmen 1=Unten, 2=Rechts, 4=Oben und 8=Links,
         d.h. 10D=0AH=Links und Rechts ****************************************/
.RahmenG {   /* Gesamt */
 border: 1px solid var(--colorBorder);
 }
.RahmenGW {   /* Gesamt Weiss */
 border: 1px solid var(--colorBackground);
 }
.RahmenL {   /* Links */
 border-left: 1px solid var(--colorBorder);
 }
.RahmenO {   /* Oben */
 border-top: 1px solid var(--colorBorder);
 }
.RahmenR {   /* Rechts */
 border-right: 1px solid var(--colorBorder);
 }
.RahmenU {   /* Unten */
 border-bottom: 1px solid var(--colorBorder);
 }

.Rahmen,   /* Rahmen um ein Element ziehen */
 table.Rahmen, table.Rahmen th, table.Rahmen td {   /* Tabelle mit Zellen */
 border-collapse: collapse;
 border-color: var(--colorBorder);
 border-style: solid;
 border-width: 1px;
 margin: 4px;
 padding: 2px;
 }

pre.Rahmen {   /* Rahmen um ein pre-Element */
 background-color: var(--colorBox);
 border-color: var(--colorBorder3dB)
               var(--colorBorder3dA)
               var(--colorBorder3dA)
               var(--colorBorder3dB);
 border-style: inset;
 border-width: 2px;
 font-size: 0.9rem;
 padding: 2px;
 width: 99%;
 }

/* Tabellen-Zebra (bessere Lesbarkeit, durch zeilenweise Farbschaltung */
table.Zebra>tbody>tr:nth-child(even),
table.Zebra>tfoot>tr:nth-child(even),
table.Zebra>thead>tr:nth-child(even) {   /* TSc: Jede gerade Zeile */
 background-color: var(--colorZebraEven);
 }
table.Zebra>tbody>tr:nth-child(odd),
table.Zebra>tfoot>tr:nth-child(odd),
table.Zebra>thead>tr:nth-child(odd) {   /* TSc: Jede ungerade Zeile */
 background-color: var(--colorZebraOdd);
 }
table.Zebra>tbody>tr>th,
table.Zebra>tfoot>tr>th,
table.Zebra>thead>tr>th {   /* TSc: Kopfzeilen immer etwas dunkler */
 background-color: var(--colorZebraHead);
 }
/* #endregion */


/******************************************************************************
 * Zellenformate                                                              *
 * Anwendung: Zelle[H][V] Bsp: ZelleRU fuer Rechts Unten                      *
 * ([H] = horizontale Aurichtung; [V] = vertikale Ausrichtung)                *
 ******************************************************************************/
/* #region */
td.ZelleBO, th.ZelleBO { /* Blocksatz Oben, i.d.R. fuer Texte */
 text-align: justify ! important;
 vertical-align: top ! important;
 }
td.ZelleBM, th.ZelleBM { /* Blocksatz Mitte, fuer Sonderfaelle */
 text-align: justify ! important;
 vertical-align: middle ! important;
 }
td.ZelleBU, th.ZelleBU { /* Blocksatz Unten, fuer Sonderfaelle */
 text-align: justify ! important;
 vertical-align: bottom ! important;
 }

td.ZelleLO, th.ZelleLO { /* Links Oben, i.d.R. fuer Texte */
 text-align: left ! important;
 vertical-align: top ! important;
 }
td.ZelleLM, th.ZelleLM { /* Links Mitte, fuer Sonderfaelle */
 text-align: left ! important;
 vertical-align: middle ! important;
 }
td.ZelleLU, th.ZelleLU { /* Links Unten, fuer Sonderfaelle */
 text-align: left ! important;
 vertical-align: bottom ! important;
 }

td.ZelleRO, th.ZelleRO { /* Rechts Oben, fuer Sonderfaelle */
 text-align: right ! important;
 vertical-align: top ! important;
 }
td.ZelleRM, th.ZelleRM { /* Rechts Mitte, fuer Sonderfaelle */
 text-align: right ! important;
 vertical-align: middle ! important;
 }
td.ZelleRU, th.ZelleRU { /* Rechts Unten, i.d.R. fuer Zahlen */
 text-align: right ! important;
 vertical-align: bottom ! important;
 }

td.ZelleZO, th.ZelleZO { /* Zentriert Oben, i.d.R. fuer Texte */
 text-align: center ! important;
 vertical-align: top ! important;
 }
td.ZelleZM, th.ZelleZM { /* Zentriert Mitte, fuer Sonderfaelle */
 text-align: center ! important;
 vertical-align: middle ! important;
 }
td.ZelleZU, th.ZelleZU { /* Zentriert Unten, fuer Sonderfaelle */
 text-align: center ! important;
 vertical-align: bottom ! important;
 }
/* #endregion */


/******************************************************************************
 * Reihenformate                                                              *
 * Anwendung: Reihe[H][V] Bsp: ReiheRU fuer Rechts Unten                      *
 * ([H] = horizontale Aurichtung; [V] = vertikale Ausrichtung)                *
 ******************************************************************************/
/* #region */
tr.ReiheBO td, tr.ReiheBO th { /* Blocksatz Oben, i.d.R. fuer Texte */
 text-align: justify;
 vertical-align: top;
 }
tr.ReiheBM td, tr.ReiheBM th { /* Blocksatz Mitte, fuer Sonderfaelle */
 text-align: justify;
 vertical-align: middle;
 }
tr.ReiheBU td, tr.ReiheBU th { /* Blocksatz Unten, fuer Sonderfaelle */
 text-align: justify;
 vertical-align: bottom;
 }

tr.ReiheLO td, tr.ReiheLO th { /* Links Oben, i.d.R. fuer Texte */
 text-align: left;
 vertical-align: top;
 }
tr.ReiheLM td, tr.ReiheLM th { /* Links Mitte, fuer Sonderfaelle */
 text-align: left;
 vertical-align: middle;
 }
tr.ReiheLU td, tr.ReiheLU th { /* Links Unten, fuer Sonderfaelle */
 text-align: left;
 vertical-align: bottom;
 }

tr.ReiheRO td, tr.ReiheRO th { /* Rechts Oben, fuer Sonderfaelle */
 text-align: right;
 vertical-align: top;
 }
tr.ReiheRM td, tr.ReiheRM th { /* Rechts Mitte, fuer Sonderfaelle */
 text-align: right;
 vertical-align: middle;
 }
tr.ReiheRU td, tr.ReiheRU th { /* Rechts Unten, i.d.R. fuer Zahlen */
 text-align: right;
 vertical-align: bottom;
 }

tr.ReiheZO td, tr.ReiheZO th { /* Zentriert Oben, i.d.R. fuer Texte */
 text-align: center;
 vertical-align: top;
 }
tr.ReiheZM td, tr.ReiheZM th { /* Zentriert Mitte, fuer Sonderfaelle */
 text-align: center;
 vertical-align: middle;
 }
tr.ReiheZU td, tr.ReiheZU th { /* Zentriert Unten, fuer Sonderfaelle */
 text-align: center;
 vertical-align: bottom;
 }
/* #endregion */


/******************************************************************************
 * Zeichenformate                                                             *
 * - Hintergrundfarben gelblich, roetlich, gruenlich und blaeulich;           *
 * - Markierungen fuer Wichtig und Richtig, Wichtig und Falsch,               *
 *   Interessant und Merkenswert;                                             *
 *   Diese werden wie in Word fuer s/w und farbliche Ausdrucke gemeinsam      *
 *   definiert und verwendet. Damit laufen reinen die ...SW-Formate bis 2014  *
 *   aus!                                                                     *
 * - Punkt in roter Farbe                                                     *
 ******************************************************************************/
/* #region */
.HgfGEl,.HgfGEl>q {   /* Hintergrundfarbe Geblich */
 background-color: var(--colorBackgroundYellow);
 }
.HgfRTl,.HgfRTl>q {   /* Roetlich */
 background-color: var(--colorBackgroundRed);
 }
.HgfGNl,.HgfGNl>q {   /* Gruenlich */
 background-color: var(--colorBackgroundGreen);
 }
.HgfBLl,.HgfBLl>q {   /* Blaeulich */
 background-color: var(--colorBackgroundBlue);
 }

/* Markierung fuer Alt */
.MkugAlt,.MkugAlt>q,del,del>q {
 color: var(--colorMarkOld);
 font-style: italic;
 text-decoration-color: var(--colorMarkOld);
 text-decoration-line: line-through;
 text-decoration-style: solid;
 text-decoration-thickness: 1px;
 }

/* Markierung fuer Definitionen */
.MkugDef,.MkugDef>q {
 color: var(--colorMarkDefine);
 font-weight: bold;
 text-decoration-color: var(--colorMarkDefine);
 text-decoration-line: underline;
 text-decoration-style: solid;
 text-decoration-thickness: 2px;
 }

/* Markierung fuer Gegeben (z.B. Mathematik) */
.MkugGeg,.MkugGeg>q {
 text-decoration-color: var(--colorMarkGiven);
 text-decoration-line: underline;
 text-decoration-style: solid;
 text-decoration-thickness: 3px;
 }

/* Markierung fuer Gesucht (z.B. Mathematik) */
.MkugGes,.MkugGes>q {
 text-decoration-color: var(--colorMarkWanted);
 text-decoration-line: underline;
 text-decoration-style: solid;
 text-decoration-thickness: 3px;
 }

/* Markierung fuer Interessant und Merkenswert */
.MkugIuM,.MkugIuMSW,.MkugIuM>q,.MkugIuMSW>q {
 background-color: var(--colorMarkRemarkable);
 font-style: italic;
 text-decoration-line: underline;
 }

/* Markierung fuer Kommentar */
.MkugKmtr {
 color: var(--colorMarkComment1);
 background-color: var(--colorMarkComment2);
 }
.MkugKmtr>q {
 background-color: var(--colorTransparent);
 }

/* Markierung fuer Menge */
.MkugMenge {
 color: var(--colorBackground);
 text-shadow: -1px -1px 0 var(--colorText),
               1px -1px 0 var(--colorText),
              -1px  1px 0 var(--colorText),
               1px  1px 0 var(--colorText);
}

/* Markierung fuer Neu */
.MkugNeu,.MkugNeu>q,ins,ins>q {
 color: var(--colorMarkNew);
 font-style: italic;
 text-decoration-color: var(--colorMarkNew);
 text-decoration-line: underline;
 text-decoration-style: solid;
 text-decoration-thickness: 2px;
 }

/* Markierung fuer Wichtig und Falsch */
.MkugWuF,.MkugWuFSW,.MkugWuF>q,.MkugWuFSW>q {
 color: var(--colorMarkFalse);
 font-style: italic;
 text-decoration-color: var(--colorMarkFalse);
 text-decoration-line: underline;
 text-decoration-style: solid;
 text-decoration-thickness: 2px;
 }

/* Markierung fuer Wichtig und Richtig */
.MkugWuR,.MkugWuRSW,.MkugWuR>q,.MkugWuRSW>q {
 color: var(--colorMarkTrue);
 font-style: italic;
 text-decoration-color: var(--colorMarkTrue);
 text-decoration-line: underline;
 text-decoration-style: solid;
 text-decoration-thickness: 2px;
 }

span.Punkt {   /* Formatiert &bull; aussagekraeftiger */
 color: var(--colorDot); /* Standardfarbe ist Rot */
 display: inline-block; /* Soll sich wie ein Bild (img) verhalten */
 font-size: 2.5rem; /* 2.5 root em macht den Punkt gut sichtbar */
 line-height: 1rem; /* Minimiert die Zeilenhoehe auf 1 root em */
 vertical-align: text-top; /* Punkt ist in gleicher Hoehe zum Text */
 }
/* #endregion */


/******************************************************************************
 * Sonderformate (Formate, die mit Javascript in Verbindung gebracht werden)  *
 * Aenderungen auf eigene Gefahr, einige Attribute werden durch JS gesteuert. *
 ******************************************************************************/
/* #region */
/******************************************************************************
 * Eigenschaften fuer ein Tooltip (nur Blockelemente!) Javascript-Element     *
 ******************************************************************************/
div.Tooltip,span.Tooltip,table.Tooltip { /* Standardmaeszig nicht Sichtbar */
 color: var(--colorText); /* Textfarbe Schwarz */
 background-color: var(--colorTooltip); /* Typische Tooltipfarbe (Eigelb?) */
 border: 1px solid var(--colorBorder);  /* Ein einfacher Rahmen */
 display: none; /* Standardmaeszig nicht anzeigen (JS schaltet die Eigenschaft)*/
 padding-left: 1px; /* Ein Pixel Innenabstand Links */
 padding-right: 1px; /* Ein Pixel Innenabstand Rechts */
 position: absolute; /* Fuer stupide Browser, die relativ als Standard haben */
 } /* Spezial, funktioniert nur in Kombination mit Javascript */
.ToolTip {
 position: absolute;
 border: 1px solid var(--colorBorder);
 background: var(--colorTooltip);
 padding: 2px 5px;
 color: var(--colorText);
 display: none;
 }
/* #endregion */


/******************************************************************************
 * Pfeilformate (Arrow GIFs)                                                  *
 ******************************************************************************/
/* #region */
img.Pfeil {
 display: inline-block;
 border: 0px none transparent;
 margin: 0;
 margin-bottom: 2px;
 padding: 0;
 width: 16px;
 height: 16px;
 vertical-align: middle;
 }
/* #endregion */


/******************************************************************************
 * Schriftformate, um Blockschrift und Normal definieren zu koennen.          *
 ******************************************************************************/
/* #region */
.SchriftB { /* Schrift: Block */
 font-family: var(--fontBlock);
 }
.SchriftN { /* Schrift: Normal */
 font-family: var(--fontNormal);
 }
/* #endregion */


/******************************************************************************
 * Bedienelemente.                                                            *
 ******************************************************************************/
/* #region */
a.Knopf { /* Anker-Element, welcher wie ein Knopf funktioniert und aussieht. */
 -moz-appearance: button;
 -ms-appearance: button;
 -o-appearance: button;
 -webkit-appearance: button;
 appearance: button;
 background-color: var(--colorBox);
 border: 2px outset var(--colorBorder);
 color: var(--colorText);
 display: inline-block;
 font-family: var(--fontNormal);
 font-size: 1rem;
 font-weight: normal;
 margin: 0;
 outline: none;
 padding: 0 3px 0 3px;
 text-decoration: none;
 vertical-align: middle;
 }
a.Knopf:active { /* Wenn der Knopf gedrueckt wird. */
 border-style: inset;
 }
a.Knopf:hover { /* Wenn die Maus auf den Knopf zeigt. */
 text-decoration: underline;
 }
/* #endregion */

/******* EOF ******************************************************************/
