/* CSS-Umsetzung von ecohtml5 für SHI-Produkte,  Stand 8.2022 mit table.Spalten.Synopse */

/* Strong übernimmt die Formatierung des Elternelements, stellt nicht automatisch fett */
#contentContainer strong {
    font-weight: inherit;
}

/* Kommt das überhaupt vor? Title steht im head und wird nicht ausgegeben? */
#contentContainer title {
text-align:left;
font-weight: bold; font-size: 0.8em; font-family: "Noto Sans", Cambria, Georgia, Times;
color:red;
padding: 0em;
margin-left:0em; margin-right:0em; margin-top:1em; margin-bottom:0.5em;
}

#contentContainer hgroup {
display: none;
}

#contentContainer abbr {
cursor: pointer;
}

#contentContainer h1 {
text-align:left;
font-weight: bold; font-size: 1.2em; font-family: "Noto Sans", Cambria, Georgia, Times;
color: black;
padding: 0em;
margin-left:0em; margin-right:0em; margin-top:1em; margin-bottom:0.5em;
}

/* Hauptüberschriften */
#contentContainer header > h1 {
text-align:left;
font-weight: bold; font-size: 1.8rem; font-family: "Noto Sans", Cambria, Georgia, Times;
color:black;
padding: 0em;
margin-left:0em; margin-right:0em; margin-top:1em; margin-bottom:0.5em;
} 
#contentContainer header > h1 strong {
text-align:left;
font-weight: bold; font-size: 1.8rem; font-family: "Noto Sans", Cambria, Georgia, Times;
color:black;
padding: 0em;
margin-left:0em; margin-right:0em; margin-top:1em; margin-bottom:0.5em;
} 

/* In StoffMB, GruppenMB: Überschrift Stoffname */
#contentContainer article.Merkblatt > header > h1 {
text-align:left;
font-weight: bold; font-size: 2em; font-family: "Noto Sans", Cambria, Georgia, Times;
color:black;
padding: 0em;
margin-left:0em; margin-right:0em; margin-top:1em; margin-bottom:0.5em;
background-color:PeachPuff;
border-top-style:solid; border-top-width:thin;
border-bottom-style:solid; border-bottom-width:thin;
} 

/* In EG-Liste: Überschrift "Legaleinstufung (Anhang VI der CLP/GHS-Verordnung)" und viele Zwischenüberschriften*/
#contentContainer header > h2 {
text-align:left;
font-weight: bold; font-size: 1.6rem; font-family: "Noto Sans", Cambria, Georgia, Times;
color: black;
padding: 0em;
margin-left:0em; margin-right:0em; margin-top:1em; margin-bottom:0.5em;
}
/* Strong in diesen Zwischenüberschriften (s. direkt oberhalb)*/
#contentContainer header > h2 strong{
text-align:left;
font-weight: bold; font-size: 1.6rem; font-family: "Noto Sans", Cambria, Georgia, Times;
color: black;
padding: 0em;
margin-left:0em; margin-right:0em; margin-top:1em; margin-bottom:0.5em;
}
/* Zaehler in diesen Zwischenüberschriften (s. direkt oberhalb)*/
#contentContainer header > h2 span.Zaehler {
text-align:left;
font-weight: bold; font-size: 1.6rem; font-family: "Noto Sans", Cambria, Georgia, Times;
color: black;
padding: 0em;
margin-left:0em; margin-right:0em; margin-top:1em; margin-bottom:0.5em;
}
/* In MBA kleine Zwischenüberschriften im Merkblatt */
#contentContainer section.BioMB.OhneZaehler header.BioMB > h2 {
text-align:left;
font-weight: bold; font-size: 1.1em; font-family: "Noto Sans", Cambria, Georgia, Times;
color: black;
padding: 0em;
margin-left:0em; margin-right:0em; margin-top:0.5em; margin-bottom:0.5em;
} 

/* In EG-Liste: Überschrift "Legaleinstufung (Anhang VI der CLP/GHS-Verordnung)" */
#contentContainer section[class='Kapitel'] header > h2 {
text-align:left;
font-weight: bold; font-size: 1.4em; font-family: "Noto Sans", Cambria, Georgia, Times;
color: black;
padding: 0em;
margin-left:0em; margin-right:0em; margin-top:1em; margin-bottom:0.5em;
} 

#contentContainer section[class='Text'] h1 {
text-align:left;
font-weight: bold; font-size: 0.8em; font-family: "Noto Sans", Cambria, Georgia, Times;
color:black;
padding: 0em;
margin-left:0em; margin-right:0em; margin-top:1em; margin-bottom:0.5em;
} 

#contentContainer section[class='Zaehler'] h1 {
text-align:left;
font-weight: bold; font-size: 0.8em; font-family: "Noto Sans", Cambria, Georgia, Times;
color:black;
padding: 0em;
margin-left:0em; margin-right:0em; margin-top:1em; margin-bottom:0.5em;
} 

#contentContainer section[class='Text'] h2 {
text-align:left;
font-weight: bold; font-size: 1em; font-family: "Noto Sans", Cambria, Georgia, Times;
color:black;
padding: 0em;
margin-left:0em; margin-right:0em; margin-top:1em; margin-bottom:0.5em;
} 

#contentContainer section[class='Zaehler'] h2 {
text-align:left;
font-weight: bold; font-size: 1.6em; font-family: "Noto Sans", Cambria, Georgia, Times;
color:black;
padding: 0em;
margin-left:0em; margin-right:0em; margin-top:1em; margin-bottom:0.5em;
} 

#contentContainer section[class='Titel'] h2 {
text-align:center;
font-weight: bold; font-size: 1.6em; font-family: "Noto Sans", Cambria, Georgia, Times;
color:black;
padding: 0em;
margin-left:0em; margin-right:0em; margin-top:1em; margin-bottom:0.5em;
} 
#contentContainer section[class='Abschnitt'] h2 {
text-align:center;
font-weight: bold; font-size: 1.6em; font-family: "Noto Sans", Cambria, Georgia, Times;
color:black;
padding: 0em;
margin-left:0em; margin-right:0em; margin-top:1em; margin-bottom:0.5em;
} 
/* Paragrafen-Überschriften */
#contentContainer section[class='Paragraph'] h2 {
text-align:center;
font-weight: bold; font-size: 1.5em; font-family: "Noto Sans", Cambria, Georgia, Times;
color:black;
padding: 0em;
margin-left:0em; margin-right:0em; margin-top:1em; margin-bottom:0.5em;
}
/* Nummern-Überschriften */
#contentContainer section[class='Nummer'] h2 {
font-weight: bold; font-size: 1.3em; font-family: "Noto Sans", Cambria, Georgia, Times;
color:black;
padding: 0em;
margin-left:0em; margin-right:0em; margin-top:1em; margin-bottom:0.5em;
}

/* In Gefahrgut-Datenblättern: Zwischenüberschriften*/
#contentContainer header.Datenblatt.Ebene_2 > h2 {
text-align:left;
font-weight: bold; font-size: 1.8em; font-family: "Noto Sans", Cambria, Georgia, Times;
color: black;
padding: 0em;
margin-left:0em; margin-right:0em; margin-top:1em; margin-bottom:0.5em;
}

#contentContainer article.Gesetz h1 {
text-align:left;
font-weight: bold; font-size: 1.6em; font-family: "Noto Sans", Cambria, Georgia, Times;
color:black; 
padding: 0em;
margin-left:0em; margin-right:0em; margin-top:1em; margin-bottom:0.5em;         
}

#contentContainer article.Gesetz h2 {
text-align:left;
font-weight: bold; font-size: 1.3em; font-family: "Comic Sans", Cambria, Georgia, Times;
color:Black; 
padding: 0em;
margin-left:0em; margin-right:0em; margin-top:1em; margin-bottom:0.5em;         
}

/* Unterüberschriften */
#contentContainer h3 {
text-align:left;
font-weight: bold; font-size: 1.1em; font-family: "Noto Sans", Cambria, Georgia, Times;
color:black;
padding: 0em;
margin-left:0em; margin-right:0em; margin-top:1em; margin-bottom:0.5em;
}
/* Zwischenüberschrift ohne explizite Farbsetzung, damit Tabellenköpfe grau bleiben */
#contentContainer h4 {
font-weight: bold; font-size: 1em; font-family: "Noto Sans", Cambria, Georgia, Times;
/* color:black; */
padding: 0em;
margin-left:0em; margin-right:0em; margin-top:0.5em; margin-bottom:0.2em;
}

/* Tooltip */
.ecomed_tooltip.tooltip.show {
    opacity:1;
}

.ecomed_tooltip-inner {
    text-align: left;
    background-color:lightyellow;
    color:black;
    max-height:300px;
    max-width:800px;
    box-shadow:3px 3px 3px 0 rgba(0,0,0,0.75);
    -webkit-box-shadow:3px 3px 3px 0 rgba(0,0,0,0.75);
    -moz-box-shadow:3px 3px 3px 0 rgba(0,0,0,0.75);
    border-radius:0;
    border:1px solid black;
    overflow:auto;
}

#contentContainer section.Rahmen {
padding: 0.3em;
margin:0.5em;
border:darkgrey; border-width:medium; border-style:solid;
}
/* Linie setzen */
#contentContainer hr {border-style:solid; border-color:darkgrey; border-width:thin;
}

/* Juristische Absätze ---------------------------------------------------------- */
/* Number davorstellen (nicht ID) */
#contentContainer div.JurAbsatz {display:table-row}
#contentContainer div.JurAbsatz::before { content: "(" attr(number) ") "; display:table-cell;}

/* Abstand vor jedem juristischem Absatz */
#contentContainer div.JurAbsatz  {margin-top:1em;} 

/* juristische Absätze: Satzzähler unterdrücken */
#contentContainer sup.Satzzaehler { display:none;}

/* folgende Konstruktion funktioniert nicht (wie dort beschrieben): */
/* #contentContainer div.JurAbsatz p { display:inline;}  /* damit  Zähler in der selben Zeile steht; führt leider dazu, dass der nächste p nicht in neuer Zeile beginnt */
/* #contentContainer div.JurAbsatz::before { content: "(" attr(Number) ") "; display:inline;} */

/* -------------------------------------------------------------------- */

/* Doppelzeilenvorschub in HUC-Literatur: <br></br> auf <br> reduzieren */
 #contentContainer br:nth-child(even) { display:none;}

/* nicht HTML5-Elemente */

#contentContainer indexterm {
  color:navy;
  background-color:LemonChiffon;
   display:none;
}
#contentContainer indexterm:before {content: "░";font-family: "Noto Sans", Calibri, Arial;
                     display:inline;font-size:70%; color:red }

#contentContainer indexterm:active {
display:none;
}

#contentContainer indexterm>keyword { display:none;
}
#contentContainer indexterm:active>keyword {
visibility : visible; display:inline;
}
/* ---------------- weitere Spezialelemente ---------------------------  */

#contentContainer em.Blau {
    color:blue;
}

#contentContainer em.Rot {
    color:red;
}

#contentContainer em.Gelb {
    color:gold;
}

#contentContainer em.Gruen {
    color:green;
}

#contentContainer em.Gesperrt {
    letter-spacing: 0.1em;
}

/* Im BioMB nicht gesperrt, nicht kursiv */
#contentContainer em.BioMB.Gesperrt {
    letter-spacing: 0em;
    font-style: normal; font-size: 1em; font-family: "Noto Sans", Cambria, Georgia, Times;
}

#contentContainer mark:before {
    content:attr(media)' | 'attr(class)': '; display:inline; color:green;
}
#contentContainer mark {
    background-color:lightgray;
    padding:0.3em;
}
/* ------------------ Blöcke ---------------------------------------*/

#contentContainer div.AGS  {background-color:LightGray; padding:1em;} /*TODO*/
#contentContainer div.Beispiel  {border-color:Green; border-style:solid; border-width:medium; padding:0.75em; margin-top:0.4em; margin-bottom:0.4em;} 
#contentContainer div.Checkliste {border-color:Green; border-style:dotted; border-width:medium; padding:1em;} 
#contentContainer div.Definition  {border-color:Red; border-style:solid; border-width:medium; padding:1em;} 

 * /*#contentContainer div.Kommentar  {border-color:black; border-style:solid; border-width:thin; padding:1em;} nicht allgemein mit Rahmen, weil im ADR sonst falsch*/
#contentContainer div.Kommentar.Ablaufplan  {border-color:black; border-style:solid; border-width:thin; padding:1em;} /* Rahmen setzen für ELH */
#contentContainer div.Kommentar.Redtext  {border-color:black; border-style:solid; border-width:thin; padding:1em;} /* Rahmen setzen */
#contentContainer div.Kommentar  {margin-bottom:0.5em;} /* Abstand nach einem Kommentar, Hinweis etc */
#contentContainer div.Kurzinfo  {border-color:Red; border-style:dotted; border-width:medium; padding:1em;} 
#contentContainer div.Leitsaetze {background-color:LightGray; padding:1em;} 
/*   #contentContainer div.Literaturverzeichnis  {background-color:LightGray; padding:1em;} */
#contentContainer div.Merke  {border-color:Blue; border-style:solid; border-width:medium; padding:0.75em; margin-top:0.4em; margin-bottom:0.4em;} 

#contentContainer div.Minitabelle  {background-color:LightGray; padding:1em;} /*TODO*/

#contentContainer div.Norminfo  {background-color:LightGray; padding:1em;} /*TODO*/
#contentContainer div.Orientierungssaetze  {background-color:LightGray; padding:1em;} /*TODO*/
#contentContainer div.Vortext  {background-color:LightGray; padding:1em;} /*TODO*/

/* Literaturverzeichnis Medizin: Zähler und Text in eine Zeile */
#contentContainer div.Literaturverzeichnis > ol > li > p {
    display:inline;
}

/* Formel inaktiv */
#contentContainer div.formel {
 font-size: 1.3em;
 background-color:Azure;
 }

/* ------------------ Absätze ---------------------------------------*/
#contentContainer p {
padding: 0.2em;
margin:0em;
font-family: "Noto Sans", Calibri, Arial;  
display:block;
}

#contentContainer div[class='Norminfo'] p {
padding: 0.2em;
font-weight: bold;
margin-left:2em; margin-right:0em; margin-top:0em; margin-bottom:0.2em;
font-family: "Noto Sans", Calibri, Arial;   
}

/* ---------------  Verweise ----------------------------    */
 #contentContainer a.verweis-extern {
  color:DarkMagenta;
  padding-left: 0.2em;
  padding-right: 0.2em;
}
#contentContainer a.PFS-Entscheidung {
  color:Crimson;
  background-color:LemonChiffon;
  padding-left: 0.2em;
  padding-right: 0.2em;
}

#contentContainer table.Inhaltsuebersicht { border-width:thin;  border-style:none; margin-bottom:0em;}

#contentContainer table.Liste { border-width:thin;  border-style:none; margin-bottom:0em;}

/* #contentContainer table { box-shadow: 0px 1px 0px 0px #000000;} */


/* ---------------------- Glossar ----------------------------------------- */
 #contentContainer div.Glossar {display:block}
 #contentContainer div.Glossar dl {display:block;}
 #contentContainer div.Glossar dt {display:block; margin-left:1em;}
 #contentContainer div.Glossar dd {display:block; margin-left:3em;} 
 
/* ---------------------- manuelle Listen  (padding-left 22px bringt auf den gleichen Einzug wie ul-Listen) ---------------------------------*/
 #contentContainer div.Liste {display:table; table-layout:auto; padding-left:22px} /* Nicht width:100% setzen, obwohl dadurch ADR-Randverweise an DL nicht mehr ganz rechts stehen */
 #contentContainer section.BioMB > div.Liste {width:100%; display:table; table-layout:auto; padding-left:12px}
 #contentContainer div.Liste dl {display:table-row;}
 #contentContainer div.Liste dt {display:table-cell; padding-right:0.5em; padding-top:0.2em; font-family: "Noto Sans", Calibri, Arial; font-weight: normal;vertical-align:top;}
 #contentContainer div.Liste dd {display:table-cell; font-family: "Noto Sans", Calibri, Arial; font-weight: normal;} /* display:inline-block */

 /* Inhaltsverzeichnisse -------------------------- */
 #contentContainer nav h2 {
 color:black;
 font-family: "Noto Sans", Calibri, Arial;
 font-size: 1.4em;
 font-weight: bold;
 margin-top:1em;
 }

#contentContainer div.Inhaltsverzeichnis dl {width:100%; padding:0; margin:0; display:inline-block;} /* inline-block ist erforderlich, sonst passen Höhe (Normzitat-Grauhinterlegung läuft rein) und Einzüge nicht */
#contentContainer div.Inhaltsverzeichnis dl.Kapitel > dt {float: left; width:10%; padding-right:1em;}
#contentContainer div.Inhaltsverzeichnis dl.Kapitel > dd {float: left; width:90%;}
#contentContainer div.Inhaltsverzeichnis dl.Paragraf > dt {float: left; width:9%; padding-right:1em;}
#contentContainer div.Inhaltsverzeichnis dl.Paragraf > dd {float: left; width:91%;}
#contentContainer div.Inhaltsverzeichnis dl.Anhang > dt {float: left; width:16%; padding-right:1em;}
#contentContainer div.Inhaltsverzeichnis dl.Anhang > dd {float: left; width:84%;}

/* Geht leider nicht bei den nachstehenden H4, da kein Hüllelement für ein unabdingbar davorstehendes "display: table" vorhanden ist: */
/* #contentContainer nav > h4.Anhang  {display:table-row;}
#contentContainer nav > h4.Anhang > span.Zaehler {display:table-cell; width:20%;}
#contentContainer nav > h4.Anhang > span.Text {display:table-cell; width:80%;} */

/*  ------ Normzitate ----------  */

#contentContainer blockquote {
     background-color:LightGray;
}
/* .Normzitat kann raus, wenn keine Altdaten mehr live sind */
#contentContainer div.Normzitat {background-color:LightGray;}
#contentContainer section.Normzitat {background-color:LightGray;}

/*----------------------  Fußnoten -------------------------------- */

#contentContainer footnote {
     background-color:LightGray;
     display:inline;
}

#contentContainer footnote:before {content: "* " attr(id);font-family: "Noto Sans", Calibri, Arial;
                     display:inline-block;font-size:70%; position:relative;
                     bottom:0.3em;}

#contentContainer footnote:active {
visibility : visible; display:inline-block;
}

#contentContainer footnote * { display:none;
}
#contentContainer footnote:active * {background-color:LightGray; display:inline-block; font-size:10pt;
}

/* -------------------- Fußnotenanker ------------------------*/
#contentContainer span.fnid {
    vertical-align: super; color: blue; font-size: smaller;
}

/* -------------------- Dem Fußnotenanker automatisch eine "Klammer zu" nachstellen ------------------------*/
#contentContainer span.fnid::after {
content: ")";
} 
/* -------------------- Dem Fußnotenanker automatisch ein Leerzeichen vorstellen ------------------------*/
#contentContainer span.fnid::before {
content: " ";
} 

/* -------------------- Automatischen Numerierungen ein Leerzeichen nachstellen ------------------------*/
#contentContainer h1 > span.Zaehler::after {
content: " ";
} 
#contentContainer h2 > span.Zaehler::after {
content: " ";
} 
#contentContainer h4 > span.Zaehler::after {
content: " ";
} 
#contentContainer h5 > span.Zaehler::after {
content: " ";
} 
#contentContainer h2 > span.Zusatz::after {
content: " ";
} 
/* Für Medizin h5-Zusatz Leerzeichen davor */
#contentContainer h5 > span.Zusatz::before {
content: " ";
}
/* Für Gefahrgut h4-Zusatz Leerzeichen davor */
#contentContainer h4 > span.Zusatz::before {
content: " ";
}
/* Für Multilaterale Vereinbarungen: Leerzeichen vor Zusatz */
#contentContainer h1 > span.Zusatz::before {
content: " ";
}
/* Für Handbuch Export und Versand h1-Zusatz Trenner davor */
#contentContainer header.Redtext > h1 > span.Zusatz::before {
content: " – ";
}
/* -------------------- StoffMB Abschnitt D ein Leerzeichen vor Zusatz (CAS ...) voranstellen ------------------------*/
#contentContainer h2 > span.Zusatz::before {
content: " ";
} 
#contentContainer h2 > span.Zusatz {
font-weight: normal;
} 


/* Hochstellungen */
 #contentContainer sup {
 font-family: "Noto Sans", Calibri, Arial;
 font-size: smaller;
 }
        
/* Tiefstellungen */
 #contentContainer sub {
 font-family: "Noto Sans", Calibri, Arial;
 font-size: smaller;
 }

/* Footer u.a. als Metadatencontainer*/

#contentContainer footer {
    background-color:LightGray;
    margin: 1em;
    padding: 0.5em;
        width: 21em;
}   

#contentContainer address {background-color:Lavender;
    margin: 0.5em;
    width: 20em;
}   


#contentContainer p.Autor:before {
    content: "Autor: "; color:blue;
  }

#contentContainer p.Fundstelle:before {
    content: "Fundstelle: "; color:blue;
  }
#contentContainer p.Preiskategorie:before {
    content: "Preiskategorie: "; color:blue;
  }
  
#contentContainer span.Organ:after {content: " "; color:blue;} 

#contentContainer span.Seitenzahl {color:red;background-color:LightGray;
  }
 
#contentContainer span.Jahrgang:after {
    content: ", "; color:blue;
  }
#contentContainer span.Heft:before {
    content: "Heft "; color:blue;
  }
#contentContainer span.Heft:after {
    content: ", "; color:blue;
  }


/* -------------------- Formularelemente ------------------------*/
#contentContainer form.Rahmen {
    border-style:solid;
    border-width:thin;
    padding:0.5em;
}

#contentContainer form {
    padding:0.5em;
}

#contentContainer textarea {
    display: block; 
    border-bottom-style:solid;
    border-bottom-width:thin;
    border-top-style:none;
    border-left-style:none;
    border-right-style:none;
    pointer-events: none;
    width:100%;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
}

/* Manuelle Liste neben Radiobutton  */  

#contentContainer fieldset {
    display:table;
}
#contentContainer p.InlinetabelleBreit {
/* breite Autotabelle, ex: Formularzeile */
    display:table;
    width:100%;
}
#contentContainer p.InlinetabelleSchmal {
/* kompakte Autotabelle, ex MehrfachauswahlZeile */
    display:table-row;
    width:100%;
    border-style:solid;
}


#contentContainer span.Inlinezelle {
/* ex:Formularzelle, TextfeldMitLegende */
    display:table-cell;
    padding-left: 0.5em;
    padding-right: 0.5em;
}

#contentContainer label {
    display:table-cell;
    padding-left: 0.5em;
    padding-right: 0.5em;
}
#contentContainer input.Unterstrichen {
    display: table-cell; 
    border-color:black;
    border-bottom-width:thin;
    border-bottom-style:solid;
    border-top-style:none;
    border-left-style:none;
    border-right-style:none;
    pointer-events: none;
    padding-left:0.5em;
    padding-right:0.5em;
}
#contentContainer input.Punktiert {
    display: table-cell; 
    border-color:black;
    border-bottom-width:thin;
    border-bottom-style:dotted;
    border-top-style:none;
    border-left-style:none;
    border-right-style:none;
    pointer-events: none;
    padding-left:0.5em;
    padding-right:0.5em;
}
#contentContainer input.Normal {
    display: table-cell; 
    border-bottom-width:thin;
    border-bottom-style:solid;
    border-top-style:none;
    border-left-style:none;
    border-right-style:none;
    pointer-events: none;
    padding-left:0.5em;
    padding-right:0.5em;
}
/* die Breite des input-Elements auf dem @size muss nicht ans CSS übergeben werden, das läuft automatisch */
#contentContainer output {
display:inline-block;
    width:20em;
    border-bottom-style:none;
    border-top-style:none;
    border-left-style:none;
    border-right-style:none;
    background-color:LightGreen;
    padding-left:0.5em;
    padding-right:0.5em;
   /*  padding-top:0.5em;
    padding-bottom:0.5em;*/
}


/* Funktioniert NICHT:
#contentContainer span.Herausstellen {
    display: inline-flex;
    flex-direction: row;
    justify-content: space-between;
}
*/


#contentContainer span.Herausstellen::before {
content: "    ";}

#contentContainer p.Herausstellen {
    display:flex;
    flex-direction: row;
    justify-content: space-between;
}

#contentContainer div.Herausstellen {
    display:inline-flex;
}

/* -------------- Tabellen ---------------------------- */

#contentContainer img {max-width: 100%;} /*Damit Bilder innerhalb der Tabellenzellen bleiben */

#contentContainer col, thead, tbody, td, tr {border:inherit;}
#contentContainer table {table-layout: fixed;
}

#contentContainer table[width='narrow'] {table-layout: fixed; width: 40%;}
#contentContainer table[width='medium'] {table-layout: fixed; width: 100%;}
#contentContainer table[width='wide'] {table-layout: fixed; width: 150%;}
#contentContainer table[width='extrawide'] {table-layout: fixed; width: 200%;}

#contentContainer table.unecht[width='narrow'] {table-layout: fixed; width: 40%;}
#contentContainer table.unecht[width='medium'] {table-layout: fixed; width: 100%;}
#contentContainer table.unecht[width='wide'] {table-layout: fixed; width: 150%;}
#contentContainer table.unecht[width='extrawide'] {table-layout: fixed; width: 200%;}

#contentContainer table.kariert[width='narrow'] {table-layout: fixed; width: 40%;}
#contentContainer table.kariert[width='medium'] {table-layout: fixed; width: 100%;}
#contentContainer table.kariert[width='wide'] {table-layout: fixed; width: 150%;}
#contentContainer table.kariert[width='extrawide'] {table-layout: fixed; width: 200%;}

#contentContainer table.frei[width='narrow'] {table-layout: fixed; width: 40%;}
#contentContainer table.frei[width='medium'] {table-layout: fixed; width: 100%;}
#contentContainer table.frei[width='wide'] {table-layout: fixed; width: 150%;}
#contentContainer table.frei[width='extrawide'] {table-layout: fixed; width: 200%;}

#contentContainer table.liniert[width='narrow'] {table-layout: fixed; width: 40%;}
#contentContainer table.liniert[width='medium'] {table-layout: fixed; width: 100%;}
#contentContainer table.liniert[width='wide'] {table-layout: fixed; width: 150%;}
#contentContainer table.liniert[width='extrawide'] {table-layout: fixed; width: 200%;}

#contentContainer table.Unliniert[width='narrow'] {table-layout: fixed; width: 40%;}
#contentContainer table.Unliniert[width='medium'] {table-layout: fixed; width: 100%;}
#contentContainer table.Unliniert[width='wide'] {table-layout: fixed; width: 150%;}
#contentContainer table.Unliniert[width='extrawide'] {table-layout: fixed; width: 200%;}

/* karierte Tabellen mit kleinem Text */
#contentContainer table.Kariert {table-layout: fixed;
font-size: smaller;
}
/* Kopf der Stoffmerkblätter (karierte Tabelle) aber normal großer Text */
#contentContainer div.Vortext > table.Kariert {table-layout: fixed;
font-size: medium;
}
/* Unter die Tabellen gestellte Fußnotentexte mit kleinem Text wie Tabelle selbst */
#contentContainer table.Tabellenfuss {
font-size: smaller;
}
/* Unecht | Spalten | Kariert | Zebra | Liniert | Frei | Warntafel */

#contentContainer table.Frei {
    table-layout: fixed;
    border-collapse:collapse;
    margin-bottom:1em;
    font-size: smaller;}
    
#contentContainer table.Frei thead {
background-color:Khaki;
} /*#F0E68C;Khaki*/

#contentContainer table.Kariert {
    border-collapse:collapse;
    margin-bottom:1em;
}

#contentContainer table.Kariert thead {background-color:Khaki;}
#contentContainer table.Kariert tr {
    border-style:solid;
    border-width:thin;   
}

#contentContainer table.Liniert {
    border-collapse:collapse;
    margin-bottom:1em;}
#contentContainer table.Liniert thead {background-color:Khaki;}
#contentContainer table.Liniert tr {    
    border-top-style:solid;
    border-top-width:thin;   
    border-bottom-style:solid;
    border-bottom-width:thin;   
    border-left-style:none;
    border-right-style:none;
}

#contentContainer table.Spalten {
    border-collapse:collapse;}
#contentContainer table.Spalten thead {background-color:Khaki;}
#contentContainer table.Spalten tr {    
    border-top-style:none;
    border-bottom-style:none;
    border-left-style:solid;
    border-left-width:thin;
    border-right-style:solid;
    border-right-width:thin;
}

#contentContainer table.Unecht {
    border-collapse:collapse;
    border-style: none;
    padding:0px;
    }

#contentContainer table.Unecht tbody {    
    border-style:none;
    padding:0px;
}
#contentContainer table.Unecht tr {    
    border-style:none;
    padding:0px;
}
#contentContainer table.Unecht td {    
    border-style:none;
    padding:0px;
}

#contentContainer table.Unliniert {
    border-collapse:collapse;
    border-style: none;
    padding:0px;
    }

#contentContainer table.Unliniert tbody {    
    border-style:none;
    padding:0px;
}
#contentContainer table.Unliniert tr {    
    border-style:none;
    padding:0px;
}
#contentContainer table.Unliniert td {    
    border-style:none;
    padding:0px;
}

#contentContainer table > caption { 
	caption-side: top;
	font-weight: bold;
	color: #6c757d;
	}
/* Bildunterschrifen unterhalb stellen (nicht möglich wegen Medizin) 
#contentContainer figure {
  display: table;
}
#contentContainer figcaption { 
    display: table-caption;
    caption-side: bottom;
	}
*/

/* Mouseover bei Bildertitel, zB für GCR */
img {font-size:0em}
img hover:after{content: attr(title);}

/*  Leerzeichen nachstellen bei Tabellen- und Bilder-Captions */
#contentContainer caption > span.Zaehler::after { 
content: " ";
	}
#contentContainer figcaption > span.Zaehler::after { 
content: " ";
	}
	
/* Bildüberschriften (figcaption): Schrift normal+fett, Bildbeschreibung (figure) kleinere Schrift, math wieder normal, damit Formeln nicht winzig kommen */
#contentContainer figure {
    font-family: "Noto Sans", Cambria, Georgia, Times;
	color: black;
}
#contentContainer figure p {
    font-size: small;
	color: black;
}
#contentContainer figure ol {
    font-size: small;
	color: black;
}
#contentContainer figure ul {
    font-size: small;
	color: black;
}
#contentContainer figure div {
    font-size: small;
	color: black;
}
#contentContainer figure table {
    font-size: small;
	color: black;
}
#contentContainer figcaption { 
  font-size: medium;
  color: black;
  font-weight: bold;
  margin-bottom: 1em;
}
#contentContainer math {
    font-family: "Noto Sans", Cambria, Georgia, Times; /* Schriftart wirkt sich auf math leider nicht aus */
    math-size: 1em; /* damit Formeln regulär kommen */
	color: black;
}
#contentContainer div.slider-caption { 
  font-size: medium;
  color: black;
  font-weight: bold;
  margin-top: 2em;
}
#contentContainer video { 
  margin-top: 1em;
}

/* Gedrehte Tabellenzellen (vertikal) werden nicht so ausgegeben 
  #contentContainer td.Gedreht { 
    writing-mode: vertical-lr;
    -webkit-text-orientation: upright;
    text-orientation: upright;
	 font-size: smaller;
	 }
*/

#contentContainer table.Zebra {
    border-collapse:collapse;
    margin-bottom:1em;}
#contentContainer table.Zebra thead {background-color:Khaki;}
#contentContainer table.Zebra tbody tr:nth-child(odd) {background:lightgrey}
#contentContainer table.Zebra tr {    
    border-style:solid;
    border-width:thin;   
}


/* ======================================= Einzeln definierte Linierung ==================================================================== */
/* ---------------     Styles  --------------------------------------------*/
/* bottom style */
#contentContainer table[border-bottom-style='solid'], tr[border-bottom-style='solid'], td[border-bottom-style='solid'] {
  border-bottom-style:solid;  
}
#contentContainer table[border-bottom-style='none'], tr[border-bottom-style='none'], td[border-bottom-style='none'] {
  border-bottom-style:none;  
}
#contentContainer table[border-bottom-style='dotted'], tr[border-bottom-style='dotted'], td[border-bottom-style='dotted'] {
  border-bottom-style:dotted;  
}
#contentContainer table[border-bottom-style='dashed'], tr[border-bottom-style='dashed'], td[border-bottom-style='dashed'] {
  border-bottom-style:dashed;  
}
/* top style */
#contentContainer table[border-top-style='solid'], tr[border-top-style='solid'], td[border-top-style='solid'] {
  border-top-style:solid;  
}
#contentContainer table[border-top-style='none'], tr[border-top-style='none'], td[border-top-style='none'] {
  border-top-style:none;  
}
#contentContainer table[border-top-style='dotted'], tr[border-top-style='dotted'], td[border-top-style='dotted'] {
  border-top-style:dotted;  
}
#contentContainer table[border-top-style='dashed'], tr[border-top-style='dashed'], td[border-top-style='dashed'] {
  border-top-style:dashed;  
}

/* right style */
#contentContainer table[border-right-style='solid'], tr[border-right-style='solid'], td[border-right-style='solid'] {
  border-right-style:solid;  
}
#contentContainer table[border-right-style='none'], tr[border-right-style='none'], td[border-right-style='none'] {
  border-right-style:none;  
}
#contentContainer table[border-right-style='dotted'], tr[border-right-style='dotted'], td[border-right-style='dotted'] {
  border-right-style:dotted;  
}
#contentContainer table[border-right-style='dashed'], tr[border-right-style='dashed'], td[border-right-style='dashed'] {
  border-right-style:dashed;  
}
/* left style */
#contentContainer table[border-left-style='solid'], tr[border-left-style='solid'], td[border-left-style='solid'] {
  border-left-style:solid;  
}
#contentContainer table[border-left-style='none'], tr[border-left-style='none'], td[border-left-style='none'] {
  border-left-style:none;  
}
#contentContainer table[border-left-style='dotted'], tr[border-left-style='dotted'], td[border-left-style='dotted'] {
  border-left-style:dotted;  
}
#contentContainer table[border-left-style='dashed'], tr[border-left-style='dashed'], td[border-left-style='dashed'] {
  border-left-style:dashed;  
}

/* ---------------     width  --------------------------------------------*/
/* bottom width */
#contentContainer table[border-bottom-width='thick'], tr[border-bottom-width='thick'], td[border-bottom-width='thick'] {
  border-bottom-width:thick;  
}
#contentContainer table[border-bottom-width='medium'], tr[border-bottom-width='medium'], td[border-bottom-width='medium'] {
  border-bottom-width:medium;  
}
#contentContainer table[border-bottom-width='thin'], tr[border-bottom-width='thin'], td[border-bottom-width='thin'] {
  border-bottom-width:thin;  
}
/* top width */
#contentContainer table[border-top-width='thick'], tr[border-top-width='thick'], td[border-top-width='thick'] {
  border-top-width:thick;  
}
#contentContainer table[border-top-width='medium'], tr[border-top-width='medium'], td[border-top-width='medium'] {
  border-top-width:medium;  
}
#contentContainer table[border-top-width='thin'], tr[border-top-width='thin'], td[border-top-width='thin'] {
  border-top-width:thin;  
}

/* right width */
#contentContainer table[border-right-width='thick'], tr[border-right-width='thick'], td[border-right-width='thick'] {
  border-right-width:thick;  
}
#contentContainer table[border-right-width='medium'], tr[border-right-width='medium'], td[border-right-width='medium'] {
  border-right-width:medium;  
}
#contentContainer table[border-right-width='thin'], tr[border-right-width='thin'], td[border-right-width='thin'] {
  border-right-width:thin;  
}

/* left width */
#contentContainer table[border-left-width='thick'], tr[border-left-width='thick'], td[border-left-width='thick'] {
  border-left-width:thick;  
}
#contentContainer table[border-left-width='medium'], tr[border-left-width='medium'], td[border-left-width='medium'] {
  border-left-width:medium;  
}
#contentContainer table[border-left-width='thin'], tr[border-left-width='thin'], td[border-left-width='thin'] {
  border-left-width:thin;  
}

/* Datenblätter */
#contentContainer article.Datenblatt section > p {
    margin-left:7em;
}

/* ul-Listen: Spiegelstriche statt Circle und Disc verwenden --------------- */
#contentContainer ul {
  /* Standardsymbol unterdrücken und mit padding die Listentexte um 0.75em nach rechts schieben */
  list-style-type: none;
  padding-left: 0.75em;
  }
#contentContainer ul > li::before {
  /* Spiegelstrich vorstellen und mit margin um 0.75em nach links VOR die Texte schieben */
  content: "–";
  margin-left: -0.75em;
  display: block;
  float: left;
  width: 0.75em }

/* -------------------------- */

#contentContainer article.Datenblatt h1 {
text-align:left;
font-weight: bold; font-size: 1.6em; font-family: "Noto Sans", Cambria, Georgia, Times;
color: black; 
padding: 0em;
margin-left:0em; margin-right:0em; margin-top:1em; margin-bottom:0.5em;         
}

/* Stoffnamenüberschriften in APGW und EG-Liste und weitere Überschriften */
#contentContainer header > h2.Stoff {
text-align:left;
color: black;
font-weight: bold; font-size: 2.5em; font-family: "Noto Sans", Cambria, Georgia, Times;
padding: 0em;
background-color:PeachPuff;
margin-left:0em; margin-right:0em; margin-top:1em; margin-bottom:0.5em;         
border-top-style:solid; border-top-width:thin;
border-bottom-style:solid; border-bottom-width:thin;
}
/* Zwischenüberschriften gesplitteter Dateien in ADR+RID & GGS: Stoffnamen */
#contentContainer header.Ebene_1 > h2 {
text-align:left;
color: black;
font-weight: bold; font-size: 1.8em; font-family: "Noto Sans", Cambria, Georgia, Times;
padding: 0em;
padding-top:5px;
background-color:PeachPuff;
margin-left:0em; margin-right:0em; margin-top:1em; margin-bottom:0.5em;         
border-top-style:solid; border-top-width:thin;
border-bottom-style:solid; border-bottom-width:thin;
}
/* Zwischenüberschriften gesplitteter Dateien in ADR+RID & GGS: UN/Stoffname */
#contentContainer header.Ebene_1 > h2 > span.Zaehler {
text-align:left;
color: black;
font-weight: bold; font-size: 1.6em; font-family: "Noto Sans", Cambria, Georgia, Times; /* mit 1.6rem wäre die Größe wie der restliche h2-Text */
padding: 0em;
background-color:PeachPuff;
margin-left:0em; margin-right:0em; margin-top:1em; margin-bottom:0.5em;
/* Kein eigener Rand für Zaehler */
/* border-top-style:solid; border-top-width:thin;
border-bottom-style:solid; border-bottom-width:thin; */
}
/* Zwischenüberschriften gesplitteter Datenblätter in ADR+RID & GGS: UN/Stoffname Umbruch dazwischen */
#contentContainer header.Ebene_1 > h2 > span.Zaehler::after {
content: "\a";
white-space: pre;
}

/* Umbrüche im Titel multilateraler Vereinbarungen  */
#contentContainer header.MV > h1 > span.Zaehler::after {
content: "\a";
white-space: pre;
} 
#contentContainer header.MV > h1 > span.Text::after {
content: "\a";
white-space: pre;
}

/* Kann raus, wenn Umstellung erfolgt ist: Nur für alte Datenblätter: Zwischenüberschriften gesplitteter Dateien in ADR+RID & GGS: Stoffnamen */
#contentContainer header > h2.NoSplit.Stoff {
text-align:left;
color: black;
font-weight: bold; font-size: 1.6em; font-family: "Noto Sans", Cambria, Georgia, Times;
padding: 0em;
background-color:PeachPuff;
margin-left:0em; margin-right:0em; margin-top:1em; margin-bottom:0.5em;         
border-top-style:solid; border-top-width:thin;
border-bottom-style:solid; border-bottom-width:thin;
}
/* Kann raus, wenn Umstellung erfolgt ist: Nur für alte Datenblätter: Zwischenüberschriften gesplitteter Dateien in ADR+RID & GGS: UN/Stoffname */
#contentContainer header > h2.NoSplit.Stoff > span.Zaehler {
text-align:left;
color: black;
font-weight: bold; font-size: 1.6em; font-family: "Noto Sans", Cambria, Georgia, Times;
padding: 0em;
background-color:PeachPuff;
margin-left:0em; margin-right:0em; margin-top:1em; margin-bottom:0.5em;         
/* Kein eigener Rand für Zaehler */
/* border-top-style:solid; border-top-width:thin;
border-bottom-style:solid; border-bottom-width:thin; */
}

/* Neu Stoffnamenüberschriften in Gili-Verweisdatensätzen und GCR-Kurzstoffen und unbelegten UN-Datensätzen in GGS und Gefahrgut-Datenblatt-Zwischenüberschriften) */
#contentContainer header.Datenblatt.Ebene_2 > h2 {
text-align:left;
color: black;
font-weight: bold; font-size: 1.6em; font-family: "Noto Sans", Cambria, Georgia, Times;
padding: 0em;
background-color:PeachPuff;
margin-left:0em; margin-right:0em; margin-top:1em; margin-bottom:0.5em;         
border-top-style:solid; border-top-width:thin;
border-bottom-style:solid; border-bottom-width:thin;
}

/* Kann raus, wenn Umstellung erfolgt ist: Nur für alte Datenblätter: Stoffnamenüberschriften in Gili-Verweisdatensätzen und GCR-Kurzstoffen und unbelegten UN-Datensätzen in GGS (und ADR+RID?) */
#contentContainer section[class='Kapitel'] header > h2.Stoff {
text-align:left;
color: black;
font-weight: bold; font-size: 1.6em; font-family: "Noto Sans", Cambria, Georgia, Times;
padding: 0em;
background-color:PeachPuff;
margin-left:0em; margin-right:0em; margin-top:1em; margin-bottom:0.5em;         
border-top-style:solid; border-top-width:thin;
border-bottom-style:solid; border-bottom-width:thin;
}

/* EG-Liste- und APGW-Datenblatt Zwischenüberschrift wie "Identifikation" */
#contentContainer article.Datenblatt  > section > section > header >  h2  {
font-weight: bold; font-size: 1.4em; font-family: "Noto Sans", Cambria, Georgia, Times;
color:Black;
background-color:LightGray;
padding: 0em;
margin-left:0em; margin-right:0em; margin-top:1em; margin-bottom:0.5em;   
border-top-style:solid; border-top-width:thin;
border-bottom-style:solid; border-bottom-width:thin;
}

#contentContainer article.Datenblatt  > section > header > h2  {
 text-align:left;
font-weight: bold; font-size: 1.9em; font-family: "Noto Sans", Cambria, Georgia, Times;
background-color:LightGray;
padding: 0em;
margin-left:0em; margin-right:0em; margin-top:1em; margin-bottom:0.5em;       
}

#contentContainer article.Datenblatt  > section > section > section > header > h2  {
 text-align:left;
font-weight: bold; font-size: 1.2em; font-family: "Noto Sans", Cambria, Georgia, Times;
background-color:LightGray;
padding: 0em;
margin-left:0em; margin-right:0em; margin-top:1em; margin-bottom:0.5em;       
}

/* Formatierung der Warntafel */
#contentContainer table.Warntafel { 
    border-collapse:collapse;
    width:5em;
    margin-bottom:.5em;
    border-style:solid;
    border-width:thick;
    border-color:black;
    padding:0.5em;
    background-color:DarkOrange;
    font-weight: bold; font-size: 1.5em; font-family: "Noto Sans", Cambria, Georgia, Times; 
    text-align:center;
    vertical-align:middle;
}
/* Formatierung der Warntafel - auch die Mittellinie setzen */
#contentContainer table.Warntafel tr {
    border-style:solid;
    border-width:thick;
    border-color:black;
}

/* Wortumbruch in Tabellenzellen */
#contentContainer td p {
    word-wrap:break-word;
}

/* -------------- Kopf/Überschriften von technischen Regeln ---------------------- */

#contentContainer header.TechRegel  h1 {display:table;border-style:solid;
                        border-width:medium;  
} 
#contentContainer header.TechRegel  h1 > span.Zaehler {display:table-cell; width: 25%; font-weight: bold;
                                      padding-left:0.5em; padding-right:0.5em; padding-top: 0.7em;
                                      padding-bottom: 0.7em; text-align:center; border-right: solid; vertical-align:middle; }

#contentContainer header.TechRegel  h1 > span.Text {display:table-cell; width: 60%; font-weight: bold; padding-top: 0.7em;
                                 padding-bottom: 0.7em; padding-left:0.5em; padding-right:0.5em; text-align:center; vertical-align:middle; }

#contentContainer header.TechRegel  h1 > span.Zusatz {display:table-cell; width: 15%; font-weight: bold; padding-top: 0.7em;
                                padding-bottom: 0.7em; padding-left:0.5em; padding-right:0.5em; text-align:center; border-left: solid; vertical-align:middle;  }

#contentContainer header.TechRegel  h5 {font-weight:bold; font-size:1.2em; text-align:right; padding-right:0.5em;}

#contentContainer header.TechRegel div.Norminfo > h4 {font-weight:bold; font-size:1.2em; color:black; margin-left:2em; }

/* -------------- Kopf/Überschriften von Verpackungsanweisungen (ADR), auch in den ADR-Datenblättern  ---------------------- */

#contentContainer section.ADR.Rahmen header.ADR  h2 {display:table;border-style:solid;border-width:medium;width:100%;}

#contentContainer section.ADR.Rahmen header.ADR  h2 > span.Zaehler {display:table-cell; width: 20%;
                                      padding-left:0.5em; padding-right:0.5em; padding-top: 0.7em;font-weight: bold;font-size: 1.4rem;
                                      padding-bottom: 0.7em; text-align:center; border-right: solid; vertical-align:middle; }

#contentContainer section.ADR.Rahmen header.ADR  h2 > span.Text {display:table-cell; width: 60%; padding-top: 0.7em;font-weight: bold;font-size: 1.4rem;
                                 padding-bottom: 0.7em; padding-left:0.5em; padding-right:0.5em; text-align:center; vertical-align:middle; }

#contentContainer section.ADR.Rahmen header.ADR  h2 > span.Zusatz {display:table-cell; width: 20%; padding-top: 0.7em;font-weight: bold;font-size: 1.4rem;
                                padding-bottom: 0.7em; padding-left:0.5em; padding-right:0.5em; text-align:center; border-left: solid; vertical-align:middle;  }
                                
#contentContainer section.Datenblatt.Rahmen header.Datenblatt  h2 {display:table;border-style:solid;border-width:medium;width:100%; }

#contentContainer section.Datenblatt.Rahmen header.Datenblatt  h2 > span.Zaehler {display:table-cell; width: 20%; font-weight: bold;font-size: 1.4rem;
                                      padding-left:0.5em; padding-right:0.5em; padding-top: 0.7em;
                                      padding-bottom: 0.7em; text-align:center; border-right: solid; vertical-align:middle; }

#contentContainer section.Datenblatt.Rahmen header.Datenblatt  h2 > span.Text {display:table-cell; width: 60%; font-weight: bold;font-size: 1.4rem; padding-top: 0.7em;
                                 padding-bottom: 0.7em; padding-left:0.5em; padding-right:0.5em; text-align:center; vertical-align:middle; }

#contentContainer section.Datenblatt.Rahmen header.Datenblatt  h2 > span.Zusatz {display:table-cell; width: 20%; font-weight: bold;font-size: 1.4rem; padding-top: 0.7em;
                                padding-bottom: 0.7em; padding-left:0.5em; padding-right:0.5em; text-align:center; border-left: solid; vertical-align:middle;  }

/* ---------Datenblätter GSGGA mit bunten sections und Kurzinfo, Dez 19 sn
article.Datenblatt section[label$='GSGGA_Basis'] {background-color:LemonChiffon;}
article.Datenblatt section[id$='GSGGA_Basis'] {background-color:LemonChiffon;}

article.Datenblatt section[label$='GSGGA_Gefahrstoff'] {background-color:lightcyan;}
article.Datenblatt section[id$='GSGGA_Gefahrstoff'] {background-color:lightcyan;}

article.Datenblatt section[label$='GSGGA_Gefahrgut'] {background-color:Moccasin;}
article.Datenblatt section[id$='GSGGA_Gefahrgut'] {background-color:Moccasin;}

article.Datenblatt section[label$='GSGGA_Abfall'] {background-color:HoneyDew;}
article.Datenblatt section[id$='GSGGA_Abfall'] {background-color:HoneyDew;}

article.Datenblatt div.Kurzinfo {background-color:white;}
*/

/*-------------------------------------- Startseiten -------------------------------------------------- */

#contentContainer h1.Startseite {color:black; font-size:1.9em; font-family: Noto, Calibri, Arial;}    

#contentContainer p.Startseite {color:black; font-size:1.3em; font-family: Noto, Calibri, Arial;}    
 
#contentContainer div.Startseite a {color:black; font-weight:bold; text-decoration:none;}

#contentContainer a.Startseite {color:black; font-weight:bold; text-decoration:none; font-size:1.1em; display:block} /* display:block lässt ganze Tabzelle anklicken */

#contentContainer table.Unecht.Startseite {display:table; border-collapse:collapse; border-style: none; padding:0px; table-layout:auto;  }     
#contentContainer table.Unliniert.Startseite {display:table; border-collapse:collapse; border-style: none; padding:0px; table-layout:auto;  }     
    
#contentContainer img.Startseite {width:50%}

/* Schaltflächen */
#contentContainer div.Merke.Startseite p {text-align:center; }
#contentContainer div.Merke.Startseite p a {display:table-cell; vertical-align:middle; color:black; width:250px; height:100px; font-weight:bold; text-decoration:none; font-size:1.3em; }
#contentContainer div.Merke.Startseite p a:hover {display:table-cell; vertical-align:middle; color:white; width:250px; height:100px; font-weight:bold; text-decoration:none; font-size:1.3em; }

/*Grundform mit grauem Hintergrund CCCCCC */
#contentContainer div.Merke.Startseite {display:table; margin:.5em;  border-radius: 1em 1em 1em 1em; background-color:#CCCCCC; border-color:#ffffff; }

/* hover-Varianten (bereichsspezifische Farbverläufe) */
#contentContainer div.Merke:hover.Startseite.Blau {display:table; margin:.5em; border-radius: 1em 1em 1em 1em;
background: linear-gradient(130deg, #438ee7, #a5ccfa); }

#contentContainer div.Merke:hover.Startseite.Gruen {display:table; margin:.5em; border-radius: 1em 1em 1em 1em;
background: linear-gradient(130deg, #017846, #86fac9); }

#contentContainer div.Merke:hover.Startseite.Orange {display:table; margin:.5em; border-radius: 1em 1em 1em 1em;
background: linear-gradient(130deg, #f06c19, #facfb4); }

#contentContainer div.Merke:hover.Startseite.Rot {display:table; margin:.5em; border-radius: 1em 1em 1em 1em;
background: linear-gradient(130deg, #b40404, #fb5f5f); }

#contentContainer div.Merke:hover.Startseite.Weinrot {display:table; margin:.5em; border-radius: 1em 1em 1em 1em;
background: linear-gradient(130deg, #7a003f, #fc90c8); }

/* ----------------- Änderungsmarkierungen für Gefahrgut grün hinterlegen ------------------------ */
#contentContainer .Neu {
background: lightgreen;
}
#contentContainer ins {
background: lightgreen;
color: black;
}

/* ------------------------- Einzüge in Listen ------------------------------------------ */
#contentContainer div.Einzug {
margin-left: 20px;
}
#contentContainer p[indent='left'] {
margin-left:2em;
display:block;
}
/* -------------- Marginalelemente --------------------------------  */
#contentContainer aside.Marginalie {
text-align: right;
background-color:LightGray;
padding-left: 0em;
font-size: 0.9rem;
color: black;
font-weight: normal;
margin-left:80%; margin-right:0.2em; margin-top:0em; margin-bottom:0.2em;
font-family: "Noto Sans", Calibri, Arial;   
}

#contentContainer h2 aside.Marginalie {
text-align: right;
background-color:LightGray;
padding-left: 0em;
font-size: 0.9rem;
color: black;
font-weight: normal;
margin-left:80%; margin-right:0.2em; margin-top:0em; margin-bottom:0.2em;
font-family: "Noto Sans", Calibri, Arial;   
}

/*  Randziffern bei TR: ASiR */
#contentContainer aside.Randziffer {
float : left;
clear: left;
width : 2em;
background-color:LightGray;
color: black;
padding-left: 0em;
margin-right: 0.5em;
font-size: 1em;
font-weight: bold;
font-family: "Noto Sans", Calibri, Arial;   
}

#contentContainer p.MarginalieInTabelle {
text-align:left;
width:auto;
max-width:20em;
background-color:LightGray;
padding-left: 0em;
font-size: 1em;
font-weight: bold;
margin-left:1em; margin-right:1em; margin-top:0em; margin-bottom:0.2em;
font-family: "Noto Sans", Calibri, Arial;   
}

#contentContainer dl > dd > aside.Marginalie {
text-align:right;
background-color:LightGray;
color: black;
padding-left: 0em;
font-size: 0.9rem;
font-weight: normal;
margin-left:80%; margin-right:0.2em; margin-top:0em; margin-bottom:0.2em;
font-family: "Noto Sans", Calibri, Arial;   
} 

/* Gefahrgut: NEUe Klassen: synoptische Tabellen erhalten Trennline zwischen linker (1) und rechter (2) Spalte */
table.Synopse.ADR.EP {border-collapse:collapse; border:none;}
table.Synopse.ADR.EP td:nth-child(1) {border-left:solid thin white; border-right:solid thin black; padding-right:1em; vertical-align:top;}
table.Synopse.ADR.EP td:nth-child(2) {padding-left:1em; vertical-align:top; border-right:solid thin white; }

/* Gefahrgut: ALTe Klassen: synoptische Tabellen erhalten Trennline zwischen linker (1) und rechter (2) Spalte */
/* Muss noch erhalten bleiben bis alle Verkehrsträger umgestellt sind */
table.Spalten.Synopse {border-collapse:collapse; border:none;}
table.Spalten.Synopse td:nth-child(1) {border-left:solid thin white; border-right:solid thin black; padding-right:1em; vertical-align:top;}
table.Spalten.Synopse td:nth-child(2) {padding-left:1em; vertical-align:top; border-right:solid thin white; }





/* ======================================= gbpruef-eBook-spezifische Ausgaben ================================================================== */
/* VT-Farben */
/* NV grau: DimGray #696969 */
/* UEB lila:  #993399 */
/* Str rot: #b3003b */
/* Eisenbahn orange: #e68a00*/
/* Binnenschiff grün: #2E8B57 */
/* Seeschiff blau: #4169E1 */
/* h1 (Frageseiten): DarkBlue #00008B */ 
/* Startlinie des articles: DarkGrey #A9A9A9*/


/*  ================= Alle Seiten ================================= */

/* großer linker und rechter Rand verhindern, dass man beim Ausführen von Verweisen die Blätterfunktion erwischt
  bei iBooks egal, das setzt selbst Rand, Android-Apps ignorieren Rand aber auch und setzen selbst keinen */
#contentContainer article.gbpruef {margin-left: 20px; margin-right: 20px; margin-top:0px;  margin-bottom:10px; padding-top:10px; padding-bottom:2px; border-top: thin solid #A9A9A9}

/* ------------------ Absatzabstand auf 0 (wenn Buttons nebeneinander stehen sollen, sonst Versatz beim zweiten) --------------------------------------- */
#contentContainer p.Button.gbpruef {
padding: 0em;
}

#contentContainer div p.gbpruef.Redtext {display:table-cell; vertical-align:middle;}
/* Damit "Frage x/y zu diesem Thema" vertikal-mittig zentriert ist. Stellt aber auch anderes nebeneinander, daher die nächsten Zeilen */
#contentContainer div.gbpruef.Kommentar p.gbpruef.Redtext {display:block;} /* Stellt Fundstelle und Hinweis untereinander. ZB. Antwort 902 */
#contentContainer div.gbpruef.Beispiel.Frage p.gbpruef.Redtext {display:block;} /* Stellt Lösungsmöglichkeiten untereinander. ZB. Frage 93 */


/* Header hat besondere Optik mit grauer Abschlusslinie */
#contentContainer header.gbpruef { padding-top:2px; padding-bottom:10px; border-bottom: medium solid #A9A9A9}
/*   margin-left: 20px; margin-right: 20px; */
/* Links im Header VT-spezifisch, als Text */
#contentContainer header.gbpruef.NV > span > a { color:#696969; font-weight:bold; text-decoration:none; font-family: DejaVu; }
#contentContainer header.gbpruef.UEB > span > a { color:#993399; font-weight:bold; text-decoration:none; font-family: DejaVu; }
#contentContainer header.gbpruef.Str > span > a { color:#b3003b; font-weight:bold; text-decoration:none; font-family: DejaVu; }
#contentContainer header.gbpruef.Eis > span > a { color:#e68a00; font-weight:bold; text-decoration:none; font-family: DejaVu; }
#contentContainer header.gbpruef.BinS > span > a { color:#2E8B57; font-weight:bold; text-decoration:none; font-family: DejaVu; }
#contentContainer header.gbpruef.SeeS > span > a { color:#4169E1; font-weight:bold; text-decoration:none; font-family: DejaVu; }

/* Liste mit Verweisen auf die Einzelthemen-Startseiten in VT-Farbe */

#contentContainer li p.gbpruef.Uebersicht.NV  a {color:#696969;  text-decoration:none; font-weight:bold;}
#contentContainer li p.gbpruef.Uebersicht.UEB  a {color:#993399;  text-decoration:none; font-weight:bold;}
#contentContainer li p.gbpruef.Uebersicht.Str  a {color:#b3003b;  text-decoration:none; font-weight:bold;}
#contentContainer li p.gbpruef.Uebersicht.Eis  a {color:#e68a00;  text-decoration:none; font-weight:bold;}
#contentContainer li p.gbpruef.Uebersicht.BinS  a {color:#2E8B57;  text-decoration:none; font-weight:bold;}
#contentContainer li p.gbpruef.Uebersicht.SeeS  a {color:#4169E1;  text-decoration:none; font-weight:bold;}

/* Multiple-Choice Links jetzt für gesamten Text in VT-Farbe  (Zusatz div ist notwendig, sonst überschreibt diese Regel die Button a-Farbe, warum auch immer). Vor den Buttons, die Schriftfarbe dort in weiß vorgeben */

#contentContainer div p.gbpruef.Redtext.NV a {color:#696969; padding:.5em; font-weight:bold; text-decoration:none}
#contentContainer div p.gbpruef.Redtext.UEB a {color:#993399; padding:.5em; font-weight:bold; text-decoration:none}
#contentContainer div p.gbpruef.Redtext.Str  a {color:#b3003b; padding:.5em; font-weight:bold; text-decoration:none}
#contentContainer div p.gbpruef.Redtext.Eis a {color:#e68a00; padding:.5em; font-weight:bold; text-decoration:none}
#contentContainer div p.gbpruef.Redtext.BinS a {color:#2E8B57; padding:.5em; font-weight:bold; text-decoration:none}
#contentContainer div p.gbpruef.Redtext.SeeS a {color:#4169E1; padding:.5em; font-weight:bold; text-decoration:none}

#contentContainer div p.Button.gbpruef.NV a {background-color:#696969; display:block; color:white; font-weight:bold; text-decoration:none; 
border-radius: .5em .5em .5em .5em; 
/* padding-left:.5em; padding-right:.5em; padding-top:.5em; padding-bottom:.5em; */
margin-left:.5em; /* margin-right:1em; */  margin-top:0.5em; margin-bottom:0.5em;
float:left; width:320px;} /* clear:both würde die Buttons untereinanderstellen */

#contentContainer div p.Button.gbpruef.UEB a {background-color:#993399; display:block; color:white; font-weight:bold; text-decoration:none; 
border-radius: .5em .5em .5em .5em; 
/* padding-left:.5em; padding-right:.5em; padding-top:.5em; padding-bottom:.5em; */
margin-left:.5em; /* margin-right:1em; */  margin-top:0.5em; margin-bottom:0.5em;
float:left; width:320px;} /* clear:both würde die Buttons untereinanderstellen */

#contentContainer div p.Button.gbpruef.Str a {background-color:#b3003b; display:block; color:white; font-weight:bold; text-decoration:none; 
border-radius: .5em .5em .5em .5em; 
/* padding-left:.5em; padding-right:.5em; padding-top:.5em; padding-bottom:.5em; */
margin-left:.5em; /* margin-right:1em; */  margin-top:0.5em; margin-bottom:0.5em;
float:left; width:320px;} /* clear:both würde die Buttons untereinanderstellen */

#contentContainer div p.Button.gbpruef.Eis a {background-color:#e68a00; display:block; color:white; font-weight:bold; text-decoration:none; 
border-radius: .5em .5em .5em .5em; 
/* padding-left:.5em; padding-right:.5em; padding-top:.5em; padding-bottom:.5em; */
margin-left:.5em; /* margin-right:1em; */  margin-top:0.5em; margin-bottom:0.5em;
float:left; width:320px;} /* clear:both würde die Buttons untereinanderstellen */

#contentContainer div p.Button.gbpruef.BinS a {background-color:#2E8B57; display:block; color:white; font-weight:bold; text-decoration:none; 
border-radius: .5em .5em .5em .5em; 
/* padding-left:.5em; padding-right:.5em; padding-top:.5em; padding-bottom:.5em; */
margin-left:.5em; /* margin-right:1em; */  margin-top:0.5em; margin-bottom:0.5em;
float:left; width:320px;} /* clear:both würde die Buttons untereinanderstellen */

#contentContainer div p.Button.gbpruef.SeeS a {background-color:#4169E1; display:block; color:white; font-weight:bold; text-decoration:none; 
border-radius: .5em .5em .5em .5em; 
/* padding-left:.5em; padding-right:.5em; padding-top:.5em; padding-bottom:.5em; */
margin-left:.5em; /* margin-right:1em; */  margin-top:0.5em; margin-bottom:0.5em;
float:left; width:320px;} /* clear:both würde die Buttons untereinanderstellen */

/*  =================  Startseiten ======================================== */
#contentContainer article.gbpruef.Startseite h1 {color:#000000; font-size:1.9em; font-family: DejaVu;}    
#contentContainer article.gbpruef.Startseite p { color:#000000; font-size:1em; font-family: DejaVu;}
#contentContainer div p.gbpruef.Startseite {display:table-cell; vertical-align:middle;} /* Damit "Im Anschluss ..." neben dem Button vertikal-mittig zentriert ist. */
#contentContainer div p.gbpruef.Startseite.Button {display:block;} /* Damit auch die Startseitenbuttons (VT-Auswahl) richtig kommen. */


/*  ================= VT-Übersichtsseiten ================================= */
#contentContainer article.gbpruef.Uebersicht h1 {color:#000000;  text-decoration:none; font-weight:bold; font-size:1.5em}


/*  ================= Fragen UND Antworten ================================= */

/* Überschriften immer in Dkl.blau DarkBlue*/
#contentContainer article.gbpruef.Redtext h1 {color:#00008B;  text-decoration:none; font-weight:bold; font-size:1.2em}

#contentContainer article.gbpruef.Redtext h3 {color:#000000;  text-decoration:none; font-weight:normal; font-size:.9em}

 /*  ================= Fragen ================================= */
#contentContainer div.gbpruef.Beispiel.Frage {border-top: solid black thin; border-bottom: solid black thin; 
border-left: none; border-right:none;
margin-top:1em; margin-bottom:1em; margin-left:0em; margin-right:0em;
padding-top:.5em; padding-bottom:.5em; padding-left:0em; padding-right:0em;}

#contentContainer div.gbpruef.Beispiel.Frage p {margin-top:1em; margin-bottom:1em}


/*  ================= Antworten ================================= */
/* Frage */
#contentContainer div.Beispiel.Antwort {font-weight:normal; border-top: solid black thin; border-bottom: solid black thin; 
border-left: none; border-right:none;
margin-top:1em; margin-bottom:1em; margin-left:0em; margin-right:0em;
padding-top:.5em; padding-bottom:.5em; padding-left:0em; padding-right:0em;}

/* eigentliche Antwort */
#contentContainer div.Kurzinfo.Antwort {font-weight:bold; border: solid black thin; 
margin:0em; padding:.5em;}


/* Antwortkästen, Rahmen in VT-Farbe, keine Linie unten */
#contentContainer div.Kurzinfo.Antwort.NV {border: solid #696969 medium; margin:0em; padding:.5em; font-weight:bold; border-bottom:none; }
#contentContainer div.Kurzinfo.Antwort.UEB {border: solid #993399 medium; margin:0em; padding:.5em; font-weight:bold; border-bottom:none; }
#contentContainer div.Kurzinfo.Antwort.Str {border: solid #b3003b medium; margin:0em; padding:.5em; font-weight:bold; border-bottom:none; }
#contentContainer div.Kurzinfo.Antwort.Eis {border: solid #e68a00 medium; margin:0em; padding:.5em; font-weight:bold; border-bottom:none; }
#contentContainer div.Kurzinfo.Antwort.BinS {border: solid #2E8B57 medium; margin:0em; padding:.5em; font-weight:bold; border-bottom:none; }
#contentContainer div.Kurzinfo.Antwort.SeeS {border: solid #4169E1 medium; margin:0em; padding:.5em; font-weight:bold; border-bottom:none; }


/* Fundstelle oder Hinweis, Rahmen in VT-Farbe, keine Linie oben */
#contentContainer div.Kommentar.NV {border: solid #696969 medium; margin:0em; padding:.5em; font-weight:normal; border-top:none; margin-bottom:1em;}
#contentContainer div.Kommentar.UEB {border: solid #993399 medium; margin:0em; padding:.5em; font-weight:normal; border-top:none; margin-bottom:1em;}
#contentContainer div.Kommentar.Str {border: solid #b3003b medium; margin:0em; padding:.5em; font-weight:normal; border-top:none; margin-bottom:1em;}
#contentContainer div.Kommentar.Eis {border: solid #e68a00 medium; margin:0em; padding:.5em; font-weight:normal; border-top:none; margin-bottom:1em;}
#contentContainer div.Kommentar.BinS {border: solid #2E8B57 medium; margin:0em; padding:.5em; font-weight:normal; border-top:none; margin-bottom:1em;}
#contentContainer div.Kommentar.SeeS {border: solid #4169E1 medium; margin:0em; padding:.5em; font-weight:normal; border-top:none; margin-bottom:1em;}


#contentContainer div.gbpruef.Beispiel.Antwort p.gbpruef.Redtext {display:block;} /* Stellt dort die Absätze untereinander. ZB. Antwort 897 c) */

#contentContainer div.Kurzinfo.Antwort.Redtext.EP.gbpruef p.Redtext.EP.gbpruef {display:block;} /* Stellt dort die Absätze untereinander. ZB. Antwort 669 b) */

/*  ================= Autorenverzeichnis mit Kästen ================================= */
#contentContainer section > div.Kontakt {padding:.1em; border:thin dotted gray; margin:.5em}