/* Grundlegende Styles für zweiterblick.at */

/* Inhalt von main.css */

/* Content wf: neue Reihenfolge umzusetzen          */
/* #Variables       */
/* #Regions         */
/* #HTML Elements   */
/* #IDs             */
/* #Classes         */
/* #Attributes      */
/* #Selectors       */

/*        */
/* dringende Agenda */
/* Style Variablen (:root) */
/* HTML Elements general */
/* Regions */
  /* Regions main */
/* Divs */
/* Classes */

/* dringende Agenda */
/*
wf Fokuseffekte neu
?statt border outline verwenden!!:

*:focus {
  outline: 2px solid var(--red7-1);
}

::-moz-focus-inner {
  border: 0;
}
wf Ende Fokuseffekte neu

*/
/* Ende dringende Agenda

/* Style Variablen */

:root {

/* :root Dimensionen margin, width, ...*/

  /* Einrücken des Hauptinhalts auf Desktop, nicht aber am Handy */
--margin-mitte: 20%;

/* Ende :root Dimensionen margin, width, ...*/

/* :root Farben Colors (tw Kontrastverhältnis zu Weiß mit W, Schwarz mit B) */
--black: #000000;
  --black1-12: #1A1A1A;

  --darkred: #8b0000;
  --white: #FFFFFF;
  --yellow: #FFFF00;

  /* mittlere Luminanz (Kontrast zu schwarz und weiß ca. 4.58:1) */
  --lumMiddle: #53821B;

/* Kontraste zu Weiß */

  --blue2-1: #BFABFF;
  --blue3-1: #8788FF;
  --blue3-1_K: #0038FF;
  --blue45-1: #6460FF;
  --blue7-1: #3130FF;
  --darkblue: #003366;

  --brown3-1: #C38A30;

  --brownblue3-1: #9C8BCC;

  --cyan3-1: #19A887;
  --cyan45-1: #15838C;
  --cyan7-1: #156363;

  --green1-25-1: #BFF4AF;
  --green1-6-1: #9ADF66;
  --green2-1: #60CF40;
  --green3-1: #32A960;

  --grey-d: #DDDDDD;
  --grey2-1: #B7B7B8;
  --grey3-1: #949595;
/*  --grey3-1: #AC9250; */
  --grey45-1: #4F8256;
  --grey7-1: #595959;

/*  Kontrast 3:1 zu --grey3-1 */
  --grey36: #494948;
/* --grey36b: #4F4F4F; */
  --grey7-1w: #5A5956;
  --grey7-1b: #9592AF;

/* Kontraste zu Schwarz */
  --grey3-1b: #59595A;

  --magenta3-1: #DA5DFF
/*  --magenta3-1: #FA5F7A; */
  --magenta45-1:#DA1DA0;

  --orange: #E3660E;

  --red3-1: #FA5F7A;
  --red45-1: #E71F3F;
  --red7-1: #B50320;

  --yellow1-12: #EFEE99;
  --yellow3-1: #A99500;
/*  --yellow3-1: #CC861F; */

/* Ende: Kontraste zu Weiß */

  /* Rahmen und Schriftfarbe für Links */
  --link: #A52947;

/* Schriftarten font-family */
  --monospace: Courier, monospace;
  --serif: Times, serif;

/* Schriftgrößen font-size */
  --FSnormal: 16px;

/* Abstände distances */
hr  --side-panel: 200px;
}
/* Ende Style Variablen */

/* HTML-Elements general */

*, ::before, ::after {
  box-sizing: border-box;
}

* {
  font-family: Verdana, Arial, sans-serif;
  font-size: var(--FSnormal);
  font-size: 1rem;
  line-height: 140%;
  margin: 0;
  padding: 0;
}

audio, blockquote, main button, main details, main dl, .example, figure, main h1, main h2, main h3, main h4, main h5, main h6, .linklist, main p, main ul, main ol, main pre, main form, main table, #slider-container, .col_mid  {
  margin-left: var(--margin-mitte);
}

/* #HTML Elements   */

abbr {
  background: transparent;
  font-size: inherit;
}

blockquote {
  background-color: none;
  border-left: solid 2px var(--blue3-1);
  font-family: var(--serif);
  font-size: 1.25rem;
  /* font-style: italic; */
  margin-bottom: 1ex;
  padding: .1ex 1em ;
}

blockquote dd, blockquote dl, blockquote dt, blockquote h2, blockquote h3, blockquote h4, blockquote h5, blockquote img, blockquote li, blockquote ol, blockquote p, blockquote table, blockquote ul {
  font-family: var(--serif);
  margin-left: 0;
}

button {
  background: var(--grey3-1);
  border: solid 1px var(--black);
  border-radius: 5px;
  color: var(--black);
  display: inline;
  font-size: var(--FSnormal);
  font-weight: bold;
  padding: .5ex .63em .4ex;
  text-align: center;
}

button:focus {
  background: var(--yellow);
  outline: solid 2px var(--red7-1);
  outline-offset: 2px;
}

button:hover {
  border: 1px dotted var(--black);
  color: var(--black);
}

code {
background: transparent;
  font-family: var(--monospace);
  font-size: larger;
}

details blockquote {
  margin: 1ex 0;
  padding: .3ex .4em;
}

input:focus, select:focus {
  background: yellow;
  outline: solid 2px var(--red7-1);
  outline-offset: 2px;
}

sub {
  vertical-align: sub;
  font-size: smaller;
}

/* Sprachkennzeichnungen in Elementen 
  wf class für normale (nicht hervorzuhebende) Elemente entwickeln!
*/

/* HTML-Elemente mit einem TITLE-Attribut unterstreichen; underline dotted gibt es nicht! */
*[title] { 
  border-bottom: dotted 1px;
  cursor: help;
}

/* Regions */

/* Regions main */

/* Linke Spalte nur für Desktop, ansonsten ausgeblendet
  Ausnahme: Die Grafik ist nicht nur ein visueller Orientierungspunkt
  wf agenda: mainLeft durch desktop-only bei Review ersetzen 
 */
.desktop-only, .mainLeft {
  float: left;
  width: 18%;
}

*[role="img"] {
  background-color: var(--white);
  border: solid 2px var(--grey3-1);
  display: inline;
  margin-bottom: 2ex;
  padding: .8ex;
  width: 16%;
}

*[role="img"] p {
  margin-left: 0;
}

/* Anmerkungen haben links eine Border und sind leicht eingerückt.  */
*[role="note"] {
  background: none;
  border-left: var(--grey45-1) solid 2px;
  margin-left: var(--margin-mitte);
  margin-top: 2ex;
  padding-left: .8em;
}

/* Kindelemente von Anmerkungen sind vorerst grundsätzlich ohne linke Einrückung */
*[role="note"] * {
  margin-left: 0;
}

/* Ausnahmen für Anmerkungen und Kindelemente von Anmerkungen  */

li table,
ul[role="note"] li {
  margin-left: .8em;
}

div[role="note"] div {
  margin-left: 0;
}

figcaption {
  background-color: var(--blue2-1);
  font-size: var(--FSnormal);
  font-weight: bold;
  padding: .2ex 1em;
}

.codeSnippet {
  background-color: none;
  border-color: var(--darkred);
  border-style: dotted solid;
  border-width: 2px;
  font-family: var(--monospace);
  margin: 0 0 2.5ex var(--margin-mitte);
  max-width: max-content;
  padding: 6px;
}

pre {
  background-color: inherit;
  font-family: var(--monospace);
  font-size: 100%;
  margin: 0;
  padding: 1.25ex .8em;
}

pre b, pre i, pre span, pre strong, code strong {
  font-family: var(--monospace);
}

pre em, code em {
  font-family: var(--monospace);
  font-style: italic;
  font-weight: bold;
}

/* Regions */

/* Silly IE! aus webaim main.css 17-11 */

article, aside, figure, footer, header, hgroup, main, menu, nav, section {
  display:block;
}

dl ol, dl ul, dt.linklist, dd.linklist, dd p.linklist {
  margin-left: 0;
}

dl pre {
background: transparent;
  margin-left: 0;
}

figure {
  background-color: transparent; 
  border: var(--blue3-1) solid 1px;
  margin-bottom: 2.5ex;
  margin-top: 2.5ex;
}

figure div, figure dl, figure img, figure ol, figure p, figure pre, figure table, figure ul {
  margin: 1ex 1em;
}

/* Regions Ende */

/* Divs */

/* Classes */

.infobox {
  background: var(--green1-25-1);
  border: solid 1px var(--green3-1);
  margin: 1rem 10px 1rem var(--margin-mitte);
  padding: 6px;
  max-width: max-content;
}

.infobox * {
  background: none;
  margin-left: 0;
}

/* Darstellung von Gesten auf Touch Screen durch Unicode Zeichen  */
.gesture {
  background: var(--grey-d);
  border: solid .5px var(--black);
  border-radius: .3ex;
  color: var(--black);
  font-family: var(--monospace);
  font-size: 200%;
  padding: .1ex .25em;
}

/* Einzelnes Braillezeichen aus Unicode Pukte hinterlegen */
.braille {
  background: #DDD;
  border: solid .5px var(--black);
  color: var(--black);
  padding: 0ex;
}

/* kleinerer Text innerhalb einer Hauptüberschrift  */
.h1sub {
  font-size: 63%;
}

.col_mid {
  background-color: red;
  float: none;
  padding: 0;
  width: 80%;
}

.col_mid img {
  margin-bottom: 2ex;
}

/* externe Links mit BG-Image kennzeichnen */
.extern { 
  background-image: url("../images/extern.png");
  background-repeat: no-repeat;
  color: var(--link);
  padding-left: 18px;
}

.icon {
/* margin kann vertikale Zentrierung verunmöglichen */
  vertical-align: middle;
}

.italic {
  font-style: italic;
}

/* Darstellung der Ausgabe durch eine Sprachausgabe (z.B. JAWS Speech History) */
.speech {
  font-family: var(--serif);
  font-style: italic;
}

.speech::before { /* Lautsprechersymbol */
  content: '\1F4E2: ';
}

.speech b { /* Hervorhebungen */
  font-family: inherit;
}

/* Wenn die Sprachausgabe über mehrere Zeilen wiedergegeben wird  */
.speech p {
  font-family: var(--serif);
  margin-left: 2em;
}

/* Wenn die Spaltenzelle bereits eine Überschrift mit dem Lautsprechersymbol enthält  */
td.speech::before {
  content: '';
}

/* wf ab hier in neue Ordnung einbauen */

* { /*lange Wörter werden umgebrochen, falls sie über die Breite des Seitenbereichs hinausragen würden */
  word-wrap: break-word;
}


h1 code, caption code {
  font-family: inherit;
}

/* Seitenbereiche */

body {
  background-color: #DDD;
  margin: 0;
  padding: 0;
}

#skip a { 
border-radius: 5px;
  left: -1000em;
  position: absolute;
}

#skip a:focus {
  background: var(--yellow);
  color: var(--black);
  left: 3em;
  outline: solid 2px var(--red7-1);
  outline-offset: 0px;
  padding: .4ex;
  position: absolute;
  text-decoration: none;
  z-index: 1;
}

header {
  background: transparent;
  margin: 2ex 2em 1ex 2em;
  width: 80%;
}

#logo {
  background: transparent;
  float: right;
  font-size: 125%;
  text-align: right;
  width: 16em;
}

#logo a {
  background: transparent;
  border: transparent dotted 1px;
  padding: 1.6ex 0em .1ex .3em;
}

#logo a:link, #logo a:visited {
  text-decoration: none;
}

#logo a:focus {
  background-color: var(--yellow);
  outline: solid 2px var(--red7-1);
  outline-offset: 2px;
  text-decoration: none;
}

#logo a:hover {
  border: dotted 1px var(--black);
  color: var(--black);
  text-decoration: none;
}

#logo img {
  height: 8.5ex;
  position: relative;
  top: .63ex;
}

#logo span {
  color: var(--darkred);
  font-size: 3ex; 
  padding: 0 .2em;
  text-align: right;
}

/* Direktlinks im Quasi-Suchformular
  Elemente nach Auftreten gestylt 
*/

#keyterm {
background: transparent;
  margin-top: 2ex;
  padding-left: 1em;
  width: 55%;
}

#keyterm p {
  background: transparent;
}

#keyterm label {
background: transparent;
  padding-right: .2em;
}

#keyterm select {
  background: var(--white);
  color: var(--black);
  width: 14em;
}

#keyterm button {
  background-color: var(--white);
  border: 1px solid var(--grey3-1);
  font-weight: normal;
  padding: .1ex .3em .005ex;
}

#keyterm button:hover {
  color: var(--black);
  border: dotted 1px var(--black);
}

#keyterm button:focus {
  background-color: var(--yellow);
  color: var(--black);
  outline: 1px solid var(--black);
}

/* Ende keyterm/Direktlinks im Quasi-Suchformular */

/* Hauptnavigation */

#mainnav {
background-color: transparent;
  clear: both;
  font-size: 125%;
  margin-top: 2ex;
  padding-left: 1em;
  width: 95%;
}

#mainnav ul, #footernav ul {
  padding-left: 0em;
}

#mainnav li, #footernav li {
  display: inline;
}

#mainnav a, #footernav a {
  border: solid 1px transparent;
  border-radius: 5px;
  line-height: 160%; 
  padding: .5ex .5em .4ex .5em;
  text-decoration: underline 1px var(--link);
  text-underline-position: under;
}

#mainnav a:link, #mainnav a:visited, #footernav a:link, #footernav a:visited {
  border: dotted 1px transparent;
  color: var(--link);
}

#mainnav a:hover, #footernav a:hover {
  background: var(--white);
  border: dotted 1px var(--black);
  color: var(--black);
}

#mainnav a:focus, #footernav a:focus {
  background-color: yellow;
  color: var(--black);
  outline: solid 2px var(--red7-1);
  outline-offset: 2px;
}

/* Ende Hauptnavigation */

#breadcrumbs {
  background: inherit;
  margin: 2ex 0 0 0;
  padding: 1ex 0 0 0;
}

#breadcrumbs ol, #breadcrumbs ul  {
  padding-left: 0;
}

#breadcrumbs li {
  display: inline;
}

#breadcrumbs li:not(:last-child):after {
  content:' >';
}

#breadcrumbs a {
  background-color: transparent;
  border: solid 1px transparent ;
  border-radius: 5px;
  bottom: -0.27ex;
  color: var(--link);
  padding: 0.1ex .5em;
  position: relative;
  text-decoration: none;
}

#breadcrumbs [aria-current] {
  background-color: inherit;
  bottom: -0.27ex;
  font-weight: normal; /* Als visueller indikator genügt der Kontext, muss also nicht fett sein. */
  position: relative;
}

#breadcrumbs a:focus {
  background-color: yellow;
  color: var(--black);
  outline: solid 2px var(--red7-1);
  outline-offset: 2px;
}

#breadcrumbs a:hover {
  background-color: var(--white);
  color: var(--black);
  border: dotted 1px var(--black);
}

/* mobile only */
/* Übergeordnete Seite als mobile Breadcrumb */

@media only screen and (min-width: 500px) {
  #parentLnk {
    display: none;
  }
}

@media only screen and (min-width: 500px) {
  #mobilNav {
    display: none;
  }
}

/* Ende mobile only */

main { 
  background-color: var(--white);
  margin: 0;
  padding: 0 2em 2ex 2em;
  width: 83%;
}

/* veraltet: alles außer itsart 
#bfwd { 
  background-color: transparent;
border: green solid 5px;
  float: left;
  width: 84%;
}
*/

#access {
  background-color: transparent;
  float: left;
  font-size: 125%;
  padding: 4ex 0.5em 0.5ex 3em;
  width: 30%;
}

#access p {
  background-color: transparent;
}

#access a:link, #access a:visited {
  background-color: transparent;
  border-bottom: var(--darkred) solid 1px;
  color: var(--darkred);
  padding: .5ex .5em .4ex .5em;
  text-decoration: none;
}

#access a:hover {
  background-color: var(--white);
  color: var(--black);
  border: dotted 1px var(--black);
}

#access a:focus {
  background-color: yellow;
  border-bottom: var(--black) dotted 1px;
  color: var(--black);
}

#access img {
  background-color: #DDD;
  padding: 0;
}

#design_opts {
  background-color: var(--white);
  border: var(--darkred) solid 5px;
  padding: 1ex 1em;
  position: fixed;
  top: 2ex;
  width: 40%;
}

#design_opts h6 {
  background-color: transparent;
}

#design_opts li {
  list-style-type: none;
  margin: 0 0 .2ex 0;
}

#pageContent {
  background: var(--lumMiddle);
  margin: 0;
  padding: 1px;
  position: fixed;
  right: 0em;
  top: 32.5%;
  width: 16.75%;
}

#pageContent h2 {
  background: var(--white);
  border: none;
  font-size: 2ex;
  margin: 0;
  padding: .5ex .25em .25ex .25em;
}

#pageContent ul {
  background: var(--white);
  border: none;
  margin: 0;
 padding: .1ex .25em .4ex .25em;
}

#pageContent li {
  background: transparent;
  border-bottom: var(--lumMiddle) solid .5px;
  list-style-type: none;
  margin: 0;
  padding: 0;
}

#pageContent a {
  background: transparent;
  border: transparent solid 1px;
  border-radius: 5px;
  display: block;
  font-size: 1.6ex;
}

#pageContent a:link, #pageContent a:visited {
  background-color: transparent;
  color: var(--darkred);
}

#pageContent a:focus {
  background: var(--yellow);
  outline: solid 2px var(--red7-1);
  outline-offset: 2px;
  color: var(--black);
}

#pageContent a:hover {
  color: var(--black);
  border: dotted 1px var(--black);
}

h1, .h1 {
background: transparent;
  font-size: 3.2ex;
  margin-top: 0;
  padding: 0ex .8em .5ex 0; 
}

main h2 , .h2 {
  border-top: solid 3.2px Var(--darkblue);
  font-size: 1.6rem;
  margin-top: 2ex;
  padding: 1.25ex 1em .5ex 0;
}

blockquote h2 {
  background: transparent;
  border-top: none 0 transparent; 
  font-size: 1.6rem;
  margin-top: 0;
  padding: 0 1em .5ex 0;
}

main h3, .h3 {
  font-size: 2.0ex;
  margin-top: 1ex;
  padding: .63ex 0 .5ex 0;
}

main h4, .h4 {
  font-size: 1.6ex;
  margin-top: .5ex;
  padding: .5ex 0em 0.4ex 0em;
}

main h5, .h5 {
  font-family: var(--serif);
  font-size: 1.6ex;
  letter-spacing: .06em;
  padding: .4ex 0em 0.32ex 0;
}

main h6, .h6 {
  font-family: var(--serif);
  font-size: 1.6ex;
  letter-spacing: .06em;
  padding: .4ex 0em 0.32ex 0;
  font-style: italic;
}

main p {
  border-bottom: transparent solid 1px; /* damit z.B. Unterlinien für .term nicht stören */
  margin-bottom: 1ex;
}

main q {
  font-style: italic;
}

main ul, main ol {
  background-color: transparent;
  padding: .6ex 1em 1.6ex 1.6em;
}

main li {
  margin-bottom: .5ex;
}


main a {
  padding: 0 .1em;
  text-decoration: none;
}

main a:link, main a:visited {
  border: solid 1px;
  border-color: transparent transparent var(--darkred) transparent;
  color: var(--darkred);
}

main a:visited {
  border-bottom: grey solid 1px;
}

/* Geht anscheinend aus Privacy Gründen nicht:
  main a:visited::after {
    content:' ✔';
}
*/

main a:focus {
  background-color: yellow;
  border: 1px dotted transparent;
  color: var(--black);
  outline: solid 2px var(--red7-1);
  outline-offset: 1px;
}

main a:hover {
  background-color: transparent;
  border: dotted 1px var(--black);
}

main img {
  background-color: var(--white);
  border: solid 2px var(--grey3-1);
  float: left;
  margin-bottom: 2ex;
  padding: .8ex;
  width: 16%;
}

main blockquote img {
  float: none;
  width: 320px;
}

main form {
  background-color: #DDD;
  border: var(--darkred) solid 5px;
  margin-top: 0.5ex;
  padding: 1ex 1em;  
}

main form p {
  background-color: transparent;
  margin: 0;
}

main input, main select {
  background-color: var(--white);
  color: var(--black);
  vertical-align: middle;
}

main input[type=submit], main input[type=reset] {
  background-color: #DDD;
  border: var(--darkred) solid 2px;
  color: var(--darkred);
  margin: .4ex 0 1.25ex 0;
  padding: 0.1ex 0.2em;
}

main button:focus, main input[type=submit]:focus, main input[type=reset]:focus {
  background-color: var(--yellow);
  outline: solid 2px var(--red7-1);
  outline-offset: 2px;
}

main button:focus, main input[type=submit]:hover, main input[type=reset]:hover {
  background-color: var(--yellow);
  color: var(--black);
  border: solid 1px var(--black);
}

mark {
  background-color: var(--yellow3-1);
  font-family: inherit;
}

code mark, pre mark {
  font-family: inherit;
  font-weight: bold;
}

main nav {
background: green;
}

main table {
background-color: transparent;
  border: var(--grey45-1) solid 3px;
  margin-top: .5ex;
  margin-bottom: 1.6ex;
padding: 0;
}

main caption {
  border-color: var(--grey45-1);
  border-style: solid solid none solid;
  border-width: 3px;
  color: var(--black);
  font-size: 100%;
  font-weight: bold;
  padding: .8ex 2.5em;
  text-align: left;
}

main thead {
background-color: none;
}

main tr {
  background-color: none;
}

main td, main th {
  color: var(--black);
  margin: 0;
  padding: .5ex .8em;
  text-align: left;
  vertical-align: top;
}

main td p {
  color: var(--black);
  margin: 0 0 .3ex 0;
  padding: 0;
  text-align: left;
  vertical-align: top;
}

main th {
  background-color: var(--grey3-1);
  border: var(--grey45-1) solid 2px;
}

th a:active, th a:link, th a:visited {
  background-color: inherit;
  color: var(--black);
  border-color: var(--darkred);
  border-style: none none solid none;
}

th a:focus {
  background: var(--yellow);
  color: var(--black);
  border-style: none;
  outline: 2px solid var(--red7-1);
}

th a:hover {
  border-style: none none dotted none;
}


main th[scope="row"] {
  background-color: var(--white);
  border: var(--grey45-1) solid 2px;
}

main td {
  background-color: none;
  border: var(--grey45-1) solid 1px;
}

.old table {
  background-color: transparent;
  border: #DDD solid 5px;
  margin-top: 2ex;
  margin-bottom: 2ex;
width: 80%; /* verhindert im MF teilweise, dass die Tabelle in den ITSART-Bereich ragt. wf noch saubere Lösung v.a. für IE finden! */
}

.old caption {
  border-color: #999;
  border-style: solid solid none solid;
  border-width: 5px;
  color: var(--black);
  font-size: 125%;
  font-weight: bold;
  padding: .8ex 2.5em;
  text-align: left;
}

.old thead {
  background-color: #DDD;
  border: #DDD solid 2px;
  padding: .5ex .8em;
  text-align: left;
  vertical-align: top;
}

.old th, .old td {
  background-color: transparent;
  border: #DDD solid 2px;
  padding: .5ex .8em;
  text-align: left;
  vertical-align: top;
}

/* *********************** */

article, section, main nav {
  background-color: transparent;
  clear: both;
  margin-top: 1.0ex;
}

aside {
  background-color: transparent;
  border-top: var(--darkred) solid 2px;
  border-bottom: var(--darkred) solid 2px;
  margin: 0ex 1em 0ex 18%;
  padding: 2ex 1em 2ex 0;
  width: 64%;
}

aside h2 {
  font-size: 2.5ex;
  margin: 0 .8em 1ex 0;
}

aside h3 {
  font-size: 2.0ex;
  margin: .5ex .8em 1ex 0;
}

aside h6 {
  border-top: solid Var(--darkblue) 1.25px;
  font-size: 1.6ex;
  margin: 1.6ex 0 0 0;
}

aside p {
  border-bottom: transparent solid 1px; /* damit z.B. Unterlinien für .term nicht stören */
  font-size: 1.6ex;
  margin: 0 0 1ex 0;
}

aside ul, aside ol {
}

aside li {
  list-style-type: none;
  margin: 0 0 .6ex 0;
}

aside a {
  border: 1px dotted transparent;
  display: block;
  font-weight: normal;
  padding: .5ex .5em .4ex .5em;
  text-decoration: none;
}

aside a:link {
  background-color: transparent;
  color: var(--darkred);
  text-decoration: underline;
  text-underline-position: under;
}

aside a:visited {
  color: var(--darkred);
  text-decoration: underline;
  text-underline-position: under;
}

aside a:focus {
  background-color: yellow;
  color: var(--black);
  outline: solid 2px var(--red7-1);
  outline-offset: 2px;
  text-decoration: none;
}

aside a:hover {
  background-color: transparent;
  color: var(--black);
  border: dotted 1px var(--black);
  text-decoration: none;
}

aside dl dd a {
  display: inline;
}

footer {
  background-color: transparent;
  font-size: 125%;
  margin-left: 3em;
  padding: 1ex 0.5em 3ex 0;
  text-align: center;
}

footer ul {
  background-color: transparent;
  line-height: 4ex;
  padding: 1ex 1em 1ex 0;
}

footer a {
  padding: .5ex .5em .4ex .5em;
  text-decoration: underline 1px var(--link);
  text-underline-position: under;
}

footer a:link, footer a:visited {
  color: var(--darkred);
}

footer a:hover {
  background-color: var(--white);
  color: var(--black);
  border: dotted 1px var(--black);
}

footer a:focus {
  background-color: yellow;
  color: var(--black);
}

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

/* Classes */

.hidden {
  display: none;
}

.sr-only {
  position: absolute;
  left: -1000em;
}

.term { /* für Fachausdrücke, die im title eine Erklärung erhalten wf, ist eigentlich nicht mehr notwendig wegen *[title] */
  border-bottom: var(--black) dotted  1px;
}

.linklist {
background-color: transparent;
  margin-bottom: 1.6ex;
  max-width: max-content;
  text-decoration: none;
}

.linklist ul {
  background-color: transparent;
}

.linklist li {
  background-color: transparent;
  list-style-type: none;
  margin-bottom: .6ex;
}

.linklist a {
  display: block;
} 

.linklist a:link {
  background-color: transparent;
  border-bottom: var(--darkred) solid 1px;
  color: var(--darkred);
}

.linklist a:visited {
  border-bottom: #666 solid 1px;
}

.linklist a:hover {
  background-color: var(--white);
  border: dotted 1px var(--black);
  color: var(--black);
}

.linklist a:focus {
  background-color: yellow;
  border-bottom: var(--black) dotted 1px;
  color: var(--black);
}

.code { /* inline-Codes */
  font-family: var(--monospace);
  font-size: 1rem;
  margin-bottom: 2ex;
}

.headinglink {
  color: var(--black);
  text-decoration: none;
}

/* gallery, z.B. für SVG Beispiele */

#gallery {
  background-color: transparent;
}

#gallery h2 {
clear: left; 
}

#gallery ul {
  clear: left;
  margin: 2ex .4em 1ex var(--margin-mitte);
  padding: 0;
}

#gallery li {
  display: inline;
  list-style-type: none;
  margin: 0;
  padding: 0;
}

#gallery a {
}

#gallery a:link, #gallery a:visited  {
  background-color: transparent;
  color: var(--darkred);
  text-decoration: none;
}

/* hover und focus - effekte muss ich mit js realisieren, weil das Link grafisch das Img nicht umrandet */

#gallery img {
  border: var(--darkred) solid 1px;
  margin: 0 1em 3ex 0;
  padding: 0;
} 

#img_table img {
  width: 100%;
}

/* Error (z.B. Fehlermeldung in Kontaktfrmular) */

.error {
  border: red dashed 5px;
margin: 0 0 1ex 0;
  padding: .5ex .5em;
}

.no-error { /* Formular ohne Fehler abgesendet */
  border: green solid 5px;
margin: 0 0 1ex 0;
  padding: .5ex .5em;
}

/* Inhaltsverzeichnis (IHV) */

#ihv {
}

#ihv ul {
  border-left: solid #DDD 5px;
  border-right: solid #DDD 5px;
  list-style-type: none;
}

#ihv ul.ebene2 {
  border: none;
  margin-left: 0;
  padding: .6ex 1em 0 1.6em;
}

#ihv a {
  display: block;
}


#ihv a.gesamt::before {
  content: "■ ";
  font-size: 2.6ex; 
}

/* Ende Inhaltsverzeichnis (IHV) */

.numcell { /* Tabellenzelle mit Zahlen */
  padding-right: 2.0em;
  text-align: right;
  vertical-align: top;
}

/* noch nicht in der richtigen Reihenfolge innerhalb der CSS Datei */

/* kbd = Tastaturbefehle Kurztasten Shortcuts */
kbd {
  background-color: var(--white); 
  border: .5px solid var(--grey3-1);
  color: var(--black);
  padding: 0 .3em;
  text-transform: uppercase;
}

/* Beispiel für das Verhalten von SR bei CSS-Anweisungen: */
a.darr::before
  { content: "▼ ";
}

/* Animierter Slider */

#slider-container {
  background-color: var(--darkred);
  height: 25ex;
  overflow: hidden;
  width: 80%;
}

#slider-container li, #slider-container ul {
  margin: 0;
  padding: 0;
}

#slider-container h2 {
  font-size: 2.5ex;
  margin: .5ex 1em 0 2em;
  padding: 0;
}

#slider-container p {
  color: var(--white);
  font-size: 2.0ex;
  margin: 2.5ex 1em 0 2em;
  padding: 0;
  text-align: center;
}

#slider-container a:link, #slider-container a:visited {
  background-color: transparent;
  border: var(--white) solid 2px;
  border-radius: 1.25ex;
  color: var(--white);
  display: block;
  padding: .2ex .3em;
  text-align: center;
}

#slider-container a:focus {
  background-color: #DDD;
  color: var(--black);
}

#slider-container a:hover {
  background-color: var(--white);
  border: dotted 1px var(--black);
  color: var(--black);
}

#slider-container img {
  border-radius: 1.6ex;
  height: 80%;
  margin: .5ex 0 0 2em;
  padding: 0em;
  width: 80%;
}

#slider-bar {
  background-color: #DDD;
  clear: left;
  opacity: 0.63;
}

#slider-bar button {
background-color: transparent;
  border: none;
}

/* Play/Pause Schalter */
#slider-bar-pp button { 
  float: left;
  margin: 0;
}

/* Indikatoren für aktuellen Slide */

#slider-bar-points { 
  margin: 0 2em;
  text-align: center;
}

#slider-bar-points button { 
  border: none;
  margin: 0;
  padding: 0 .2em .1ex .2em;
}

#slider-bar-points li { 
  display: inline;
margin-left: 0;
}

.slider-left {
  float: left;
  width: 50%;
}

.slider-right {
  margin-left: 50%;
}


.animate-right{
  position:relative;
  -webkit-animation:
    animateright 0.4s;
    animation:animateright 0.9s;
}

@-webkit-keyframes animateright{
  from{right:-50%; opacity:0}
  to{right:0; opacity:1}
}

@keyframes animateright{
  from{right:-50%; opacity:0} 
  to{right:0; opacity:1}
}

/* für dekoratives Karussel mit Büro Orange Eindrücken */

.dekorative_diashow {
background-color: transparent;
  float: left; 
  overflow: hidden;
  width: 17%; 
}

.dekorative_diashow img {
  border: 0px;
  margin: 0px;
  padding: 0px;
}

.dekorative_diashow li {
  margin: 0px;
  padding: 0px;
}

.dekorative_diashow ul {
  margin: 0;
  padding: 0;
}

/* ENDE für dekoratives Karussel mit Büro Orange Eindrücken */

/* Definition Lists */

dl {
  padding-left: 1em;
}

dt {
  font-weight: bolder;
}

dt code {
  font-size: calc(var(--FSnormal) * 1.25);
  font-weight: bold;
  letter-spacing: .01rem;
}

dd {
  margin: .3ex 0 .6ex 1.25em;
}

hr {
  background-color: darkgreen;
  border: none;
  height: .2ex;
  margin-bottom: 1.0ex;
}

time {
  font-style: italic;
}

/* PDF-Links */
a[href$=".pdf"]::after {
  background: url(../images/svg/PDF-icon.svg) right no-repeat;
  background: url(../images/PDF_Icon_16px.png) right no-repeat;
  background: url(../images/icons/pdf-indicator.svg) right no-repeat;
  content: " "; /* Damit überhaupt eine Hintergrundgrafik angezeigt wird. */
  /* line-height:16px; */
  padding-left: 25px;
}

/* Links mit automatischem Download */
a[download]::after {
  background: url(../images/icons/download.svg) right no-repeat;
  content: " "; /* Damit überhaupt eine Hintergrundgrafik angezeigt wird. */
  padding-left: 25px;
}

/* inpage Links dieser Seite */
/* p, damit nicht im Inhaltsverzeichnis  */
.inPageLink:after, p a[href^="#"]::after {
  background: url(../images/icons/in-page.svg) right no-repeat;
  content: " "; /* Damit überhaupt eine Hintergrundgrafik angezeigt wird. */
  padding-left: 18px;
}

/* Reiner Text zweiterblick.at */
.plain-2b {
  background-color: #DDD;
  color: var(--darkred);
  font-weight: bolder;
  padding: 0 .1em;
}

pre del {
  color: var(--red45-1);
  font-family: var(--monospace);
  text-decoration: line-through;
}

a code {
  font-weight: bold;
}

[required], [aria-required=true] {
  border: red dotted 1px;
}

/* Silbentrennung */
h1, h2, h3, h4, h5, h6, p, li {
  hyphens: manual;
  -moz-hyphens: manual;
  -o-hyphens: manual;
  -webkit-hyphens: manual;
  -ms-hyphens: manual;
}


/* wf descendent selector funktioniert hier leider nicht */

dd>p, div>ol, div>ul {
border-left: red none 1px;
  margin-left: 0;
}

details {
background: transparent;
  margin-bottom: 2ex;
  margin-top: 2ex;
}

details ul {
background: transparent;
  margin-left: 0;
}

details>summary {
background: transparent;
  border: 1px solid var(--lumMiddle);
  outline-offset: 0;
  padding: .2ex .5em;
}

details summary:focus {
  background: var(--yellow);
  outline: 2px solid var(--red7-1);
  outline-offset: 2px;
}

details summary:hover {
  border: dotted 1px var(--lumMiddle);
}

details dl, details dd ul, details h2, details h3, details h4, details h5, details h6, details ol, details p, details pre, details ul, details .linklist {
background: transparent;
  margin-left: 0;
}

/* Desktop-Mitte ist auf mobil.css links und horizontal füllend */
.mitte {
  margin-left: var(--margin-mitte); 
}

.mitte img, .mitte [role="img"] {
background: red;
  border: solid var(grey3-1) 2px;
  margin: 1ex 1em;
  width: 30%;
}

/* Abstände laut SC 1.4.12 */
.sc1412 { 
  line-height: 1.5;
  margin-bottom: 2ex;
  letter-spacing: 0.12em;
  word-spacing: 0.16em;
}

/* Link zu englischsprachiger Zielseite */
a[hreflang="en"]::after { 
  background: url(../images/icons/english.svg) right no-repeat;
  content: " "; /* Damit überhaupt eine Hintergrundgrafik angezeigt wird. */
  padding-left: 29px;
}

li>details, li>ol, li>p, li>ul {
  background: transparent;
  margin-left: .1em;
}

/* Checkboxen; ich konnte dem label keine class zuordnen */
input[type="checkbox"], input[type="radio"] {
  clear: left;
  float:left;
}

label {
background: transparent;
  float:left;
  margin-left: 6px;
  position: relative; /* zum vertikalen Zentrieren */
  top: -.4ex;
  width: 80%;
}

.chkbx li {
  list-style-type: none;
}

/* Ende Checkboxen */

/* alphabetische Einsprunglinks */
#abisz {
background: transparent;
}

#abisz ul {
  background: #DDD;
  border: solid var(--darkred) 1px;
  padding: 4px;
}

#abisz li {
  display: inline;
  line-height: 3ex;
  margin: 2px;
}

#abisz a {
  background: var(--white);
font-weight: bold;
  outline: 1px solid Var(--darkblue);
  margin: 0;
  padding: .06ex .2em;
  text-decoration: none;
}
/* Ende alphabetische Einsprunglinks */


/* Classes für SC 2.4.13 Beispiele */


.sc2413RectBorder {
  background: var(--white);
}

.sc2413RectBorder button {
  border: solid 2px transparent; 
}

.sc2413RectBorder button:focus {
  border: solid 2px var(--red7-1); 
  outline: none;
}

.sc2413RectBorder button:hover {
  border: dotted 2px var(--white); 
}

.sc2413RectBorder p {
background: transparent;
  display: inline-block;
  padding: .8ex .1em;
}

.sc2413RectBorder p span {
  background: var(--cyan3-1);
  border: solid 2px var(--black); 
  display: inline;
  font-size: 125%;
  font-weight: bold;
  padding: .4ex .5em;
  vertical-align: middle;
}

.sc2413RectBorder p span:not(:last-child) {
  margin-right: 1em;
}

/*
  Rahmen mit Abstand zum Schalter: sc2413RectBorderDistance 
  entspricht 2b Standard
*/

.sc2413RectBorderDistance div {
  background: transparent;
}

.sc2413RectBorderDistance button {
  background: var(--cyan3-1);
  border: solid 1px var(--black); 
  border-radius: .8ex;
  color: var(--black);
}

.sc2413RectBorderDistance button:focus {
  background: var(--cyan3-1);
  outline: solid 2px var(--red7-1);
  outline-offset: 2px;
}

.sc2413RectBorderDistance button:hover {
  background: var(--cyan3-1);
  outline: solid 2px var(--red7-1);
  outline-offset: 2px;
}

.sc2413RectBorderDistance p {
background: transparent;
  display: inline-block;
  padding: .8ex .1em;
}

.sc2413RectBorderDistance p span {
  background: var(--cyan3-1);
  border: solid 2px var(--black); 
  border-radius: .8ex;
  display: inline;
  font-size: 125%;
  font-weight: bold;
  outline: solid 2px var(--red7-1);
  outline-offset: 2px;
  padding: .4ex .5em;
  vertical-align: middle;
}

.sc2413RectBorderDistance p span:not(:last-child) {
  margin-right: 1em;
}

/* Fokos links Balken  */

.sc2413leftBorderEnhanced button {
  background: var(--cyan3-1);
  border-color: var(--white);
  border-style: none none none solid;
  border-widht: 0 4px;
  color: var(--black);
  margin: 0px 1.6em;
  outline: none;
  padding: .2ex .5em;
}

.sc2413leftBorderEnhanced button:focus, .sc2413leftBorderEnhanced button:hover {
  background: var(--cyan3-1);
  border-color: #95000F;
}

/* Fokos Indikatorfläche abhängig vom Umfang des Steuerelements */

.sc2413areaPerimeter {
  background: var(--cyan3-1);
  border: none transparent 0;
  height: 30px;
  margin: 1ex .63em 1.25ex .63em;
  padding: 2px;
  width: 148px;
}

.sc2413areaPerimeter button {
  background: var(--cyan3-1);
  border-color: transparent;
  border-style: none solid none solid;
  border-width: 0 16px;
  color: var(--black);
  height: 22px;
  margin: 0;
  outline: none;
  padding: 0;
  vertical-align: middle;
  width: 140px;
}

.sc2413areaPerimeter button:focus, .sc2413areaPerimeter button:hover {
  background: var(--cyan3-1);
  border-color: transparent transparent transparent #82272F;
}


/* Ende: Classes für SC 2.4.13 Beispiele */

/* Bilder für Hauptinhalt-Mitte */
.main_img { 
background: transparent;
  border: solid 2px var(--grey3-1);
  float: left;
  padding: .8ex;
  width: 16%;
}

.main_img img { 
background-color: transparent;
  margin-bottom: 0ex;
  padding: 0;
  width: 100%;
}

.clearBoth {
  clear: both;
}

.floatNone {
  float: none;
}

.codeSnippet * {
  margin-left: 0;
}

/* example z.B. Demo von Fokuseffekten in 2.4.13, Übungsdatei alt_practice */
.example {
  border: dashed 1px var(--darkred);
  margin-top: 1.0ex;
  margin-bottom: .8ex;
  max-width: max-content;
  padding: .6ex .6em;
}

/* Innerhalb des Containers müssen standardmäßig alle Elemente links  ohne Abstand angeordnet sein. */
.example * {
  margin-left: 0;
}

.example button {
  background: var(--cyan3-1);
}

.example dd {
  margin-top: 0ex;
  margin-bottom: .8ex;
}

dd.example span {
  padding: .32ex;
}

.example summary, {
  background: var(--cyan3-1);
  border: var(--black) solid .1em;
  border-radius: 5px;
  display: inline;
  font-size: 100%;
  height: 30px;
  padding: 1ex;
  text-align: center;
}

.example details {
  padding: 0;
}

.example img {  
  border: var(--darkred) solid 1px;
  margin: 1ex 1em;
  padding: 0;
}

.example p {
  padding: 0;
}

/* Ende: example z.B. Übungsdatei alt_x */

/* Bild mit Bildunterschrift */
.imgTitled {
background: transparent;
  border: solid .1em var(--grey3-1);
  float: left;
  /* margin: 0; damit auch für .mitte eingerückt wird */
  padding: .1em;
  width: 22em;
}

.imgTitled img {
  border: solid .1em transparent;
  margin: .1ex .1em;
  padding: 0;
  width: 21.4em;
}

.imgTitled p {
  background-color: var(--white);
  border: solid .1em transparent;
  color: var(--black);
  margin: .1ex .1em;
  padding: 0;
  padding: .1ex .1em;
  text-align: center;
  width: 21.4em;
}

/* Ende imgTitled Bild mit Bildunterschrift */
/*  */
/* Grafiklink mit Bildunterschrift (imgDescribedFocusable) */

.card {
  background: var(--grey3-1);
  border: solid 1px var(--lumMiddle);
  float: left;
  margin-bottom: 2ex;
  padding: 1ex;
/* width: 22em; */
}

.card a {
  background-color: var(--white);
  border: solid 1px var(--link);
  color: var(--link);
  margin: 0;
  padding: .3ex;
}

.card a:focus {
  background-color: var(--yellow);
  border: solid 1px var(--black);
  color: var(--black);
  opacity: 0.8;
  outline: solid 2px var(--black);
  outline-offset: 2px;
}

.card a:hover {
  border: dotted 1px var(--black);
  color: var(--black);
  opacity: 0.8;
}

.card a>p {
  background-color: var(--white);
  border: solid 1px transparent;
  margin: .1ex .1em;
  padding: 0;
  text-align: center;
  width: 21.4em;
}

.card a:focus>p {
  background: var(--yellow);
}

.card a:hover>p {
  border: dotted 1px var(--black);
}

.card img {
  border: solid 1px var(--grey3-1);
  margin: .1ex .1em;
  padding: 2px;
  width: 21.4em;
}

.card p {
  margin: 0;
  padding: 1ex .4em;
  text-align: left;
  width: 22em;
}

/* Ende Bild mit Bildunterschrift */

/* Burger Navigation */

.navPanel {
  background: #676767;
  overflow: hidden;
  width: var(--side-panel);
}

.closeBtn {
  background: #333;
  color: var(--white);
  font-size: 20px;
  float: right;
  margin: .5ex .5em;
  padding: 0 .2em;
}

.navPanel ul {
  list-style: none;
  margin: .2ex .5em;
  padding: 0;
}

.navPanel ul li {
  padding: 0;
}

.navPanel a{
  display: block;
  margin-right: 2.5em;
  padding: .3ex .3em .1ex .3em;
  text-decoration: none;
}

.navPanel a:link, .navPanel a:visited {
  background: #333;
  color: var(--white);
}

.navPanel a:hover {
  background-color: var(--white);
  border: 1px dotted var(--black);
  color: var(--black);
text-decoration: underline var(--darkred)ir 1px;
text-underline-position: under;
}

/* Ende Burger */


/* Fonts Schriftarten */

/* um z.B. Beispiele von der Umgebung abzuheben, Ausgabe durch Screen Reader */
.serif, p.serif {   
  font-family: var(--serif);
  font-size: 125%;
}

/* Ende Fonts Schriftarten */


/* Handy-Icon voranstellen */
.mobil:before {
  content: '\1F4F1'; 
}

/* .vertical0: Wenn z.B. in einem Satz eines SC kein vertikaler Abstand zu benachbarten Elementen erscheinen soll  */

p.vertical0 {
background: transparent;
}

ul.vertical0 {
background: transparent;
  margin-bottom: 0;
  margin-top: 0;
  padding: 0 2em;
}

.vertical0 li {
background: transparent;
}

/* Ende .vertical0 */

/* Ende Classes */

hgroup h1 {
  padding-bottom: .5ex; 
}

hgroup p {
  font-weight: bold;
  margin: 0 0 0 inherit;
  padding: 0 0 .2ex 0;
} 

hgroup p code {
  font-family: inherit;
}

/* falls sich der Hinweis auf eine Materialsammlung in einer hgroup befindet */
hgroup p em.h1sub { 
  font-size: 100%;
  font-weight: normal;
  margin: 0 0 0 inherit;
  padding: 0 0 .2ex 0;
}

hgroup p time {
  font-weight: normal;
  margin: 0 0 0 inherit;
  padding: 0 0 .2ex 0;
} 

h1 code, h2 code, h3 code, h4 code, h5 code, h6 code {
  font-size: 2.0rem;
}

h1 code strong, h2 code strong, h3 code strong, h4 code strong, h5 code strong, h6 code strong {
  font-size: inherit;
}

/* Damit sprachgekennzeichnete Abschnitte nicht klein erscheinen */
span[lang] { 
background-color: none;
  font-size: inherit;
}
/* Ende Damit sprachgekennzeichnete Abschnitte nicht klein erscheinen */

/* Schrift auf Hintergrundgrafik mit transparentem Hintergrund  */

.text-on-img {
background: transparent;
  border: transparent none 0;
  margin: 0 0 0 inherit;
  padding: 0 10px;
  width: 320px;
}

.text-on-img div {
  background-color: var(--grey7-1b);
  bottom: 60px;
  left: 20px;
  padding: 5px 10px 2px 10px;
  position: relative;
  width: 256px;
}

.text-on-img div p {
  background-color: transparent; /* Firefox Smart Phone Darstellung macht sonst weißen Hinterund für den Text */
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 800;
  margin: 0;
  padding: 0;
}

.text-on-img img {
  background-color: var(--white);
  border: solid 2px var(--grey7-1b);
  float: none;
  margin: 0;
  padding: auto;
  width: 296px;
}

/* Ende Schrift auf Hintergrundgrafik mit transparentem Hintergrund  */

.displayInline {
  display: inline;
}

/* #Attributes      */

[disabled] {
  background-color: #D0D0D0;
  color: var(--grey3-1b);
  border-color: var(--grey3-1b);
}

/* #Selectors */
  /* + (unmittelbar benachbartte Elemente) */

img+p {
background: none;
  margin-top: 0;
}



/*  Span, das aussieht wie ein Schalter für Darstellungsbeispiel */

.button-presentational {
  background: var(--grey2-1);
  border: solid 1px var(--darkblue);
  border-radius: 16px;
  color: var(--darkblue);
  display: inline;
  font-size: var(--FSnormal);
  font-weight: bold;
  margin: 0 .2em;
  padding: .5ex .63em .4ex;
  text-align: center;
}

/* Text in einem Zeitstempel, etwa in hgroup */
p:has(time) {
  font-size: 1rem;
  font-weight: normal;
  padding: 0 10px .2em 10px;
}

.newspaper {
  background: var(--yellow1-12);
  color: var(--black1-12);
}

.newspaper p {
  background: var(--yellow1-12);
  color: var(--black1-12);
  font-size: 16px;
  margin: 0;
}

.notBold {
  font-weight: normal;
}