/* COLOR: #000000, BACKGROUND-COLOR: #F57E20 oder #FFFFFF */
/* Buchstaben Hellblau: COLOR: #0A81DF, BACKGROUND-COLOR: #F57E20 oder #FFFFFF */
/*   Achtung bei change-all zurueck: border-color soll auf 000000 bleiben */

/* # steht fuer ID */
/* mit div id=... erreicht man, dass der header den body bei Bedarf ueberlappt. 
   dadurch wird das ganze Menue angezeigt. 
   der hoechste z-index liegt ueber allen anderen. 
   im Normal fall liegt der body ueber dem header - was nicht schadet, weil er
   darunter steht. Dadurch kann der header aber gross genug fuer jedes Pulldown sein.
   Sobald ein Menuepunkt ausgewaehlt wird, setzen wir den z-index fuer den header auf 3,
   wodurch der header ueber den body kommt und das Menue den Seiteninhalt ueberlappt 
*/

/* media print jetzt in eigenem css druck.css */

/* z-index:
 0: verborgen
 1: bgweiss - als Hintergrund
 5: Standard
 10-20: Menue
 100-: dragBoxen und dragSeiten
 5000: pictoleiste
 10000/10001: Fehlerschirm aktiv
*/

/* number-Felder rechtsbündig
*/
input[type=number] { text-align: right; }

input[type=number][id^="z"]::-webkit-inner-spin-button, 
input[type=number][id^="z"]::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
  margin: 0; 
}

/* number Felder mit Längenangabe id='z3'
  ohne Plus-Minus-Pfeile bei Angabe von id='z...
*/
input[type=number][id^="z"] {
  -moz-appearance: textfield;
  appearance: textfield;
}
input[type=number]#z1 { width: 1em !important; }
input[type=number]#z2 { width: 2em !important; }
input[type=number]#z3 { width: 3em !important; }
input[type=number]#z4 { width: 4em !important; }
input[type=number]#z5 { width: 5em !important; }
input[type=number]#z6 { width: 6em !important; }
input[type=number]#z7 { width: 7em !important; }
input[type=number]#z8 { width: 8em !important; }
input[type=number]#z9 { width: 9em !important; }
input[type=number]#z10 { width: 10em !important; }

/* Standardwerte fuer Desktopaufloesung */
:root {
 font-family: Arial, Helvetica, Verdana, Tahoma, sans-serif;
 box-sizing:border-box; 
 background: #FFFFFF;
 margin: 0px;
 z-index: 5;
 --main-bg-color: #FFFFFF;
 --main-fg-color: #000000;
 --version: web;
 --fs: calc(9px + 0.3vw);
 --fsmenu: calc(var(--fs)*1.1);
 --arbeitsbereich_margin: 50px;
 --menu_zi: 10;
 --menublock_disp: inline-block;
 --menumobil_zi: 0;
 --menu_top: 0px;
 --menu_logow: 200px;
 --menu_left: 220px;
 --menu_right: 0px;
 --menu_width: calc(100vw-var(--menu_left));
 --menu_pos: static;
 --menu_height: 100px; /* wird von resizeseite korrigiert */
 --menuz_span_disp: inline-block;
 --display_img: inline;
 --body_padding_top: calc(var(--fs)*2);
/* usermobil-Variablen werden vom User in der Mobilansicht gesetzt und nur dort verwendet (s.u.) */
 --usermobil_zi: 0;
 --usermobil_disp: none;
/* dragboxen */
 --dg_top: 15vh;
 --dg_left: 10vw;
 --dg_height: 70vh;
 --dg_width: 80vw;
 --dg_header_height: calc(var(--fs)*3);
 --dg_body_pad: 10px;
 --dg_body_height: calc(var(--dg_height) - var(--dg_header_height) - 20px); /* zweimal body_pad */
/* pictoleiste */
 --picto_disp: none;
/* aus-/einblenden summary-details bei open */
 --anzeigespan_st1: inline-block;
 --anzeigespan_st2: inline-block;
 --anzeigespan_st3: inline-block;
 --anzeigespan_xt1: none;
 --anzeigespan_xt2: none;
 --anzeigespan_xt3: none;
/* für slider (Schiebeschalter) */
 --sl: calc(var(--fs)*1.5);
 --slw: calc(var(--sl)*2.5);
 --slh: calc(var(--sl)*1.3);
 --slround: calc(var(--slh));
/* rem definieren */
 font-size: var(--fs);
} 

/* Werte fuer Desktopaufloesung unter 800-1199 Breite, Rand auf 0 und Dragboxen bis zum Bildschirmende */
@media only screen and (max-width: 1299px) and (min-width: 800px) {
  :root {
   --arbeitsbereich_margin: 20px;
   --dg_left: 0px;
   --dg_width: 100vw;
   --dg_height: 100vh;
  }
}

/* Werte fuer Desktopaufloesung unter 800px Breite wird als Mobil betrachtet (anderes Menü)
@media only screen and (max-width: 799px) {
  :root {
   --version: mobile;
/* auf Mobil-Menue umschalten */
   --arbeitsbereich_margin: 5px;
/* usermobil-Variablen werden vom User in der Mobilansicht gesetzt und nur hier verwendet */
   --menublock_disp: var(--usermobil_disp);
   --menu_zi: var(--usermobil_zi);
   --menumobil_zi: 10;
   --menu_top: 100px;
   --menu_logow: 10px;;
   --menu_width: auto;
   --menu_pos: fixed;
   --menuz_span_disp: block;
   --display_img: none; /* Menuebilder nicht anzeigen */
   --body_padding_top: 0px;
   --fsmenu: var(--fs);
/* dragboxen */
   --dg_top: 0px;
   --dg_left: 0px;
   --dg_height: 100vh;
   --dg_width: 100vw;
   --dg_body_pad: 0px;
  }
}

html {
 top: 0px;
 left: 0px;
 right: 0px;
 height: 100%; /* damit restliche Seitengroesse von unter-DIV richtig berechnet wird */
 width: 100%;
 margin: 0px;
 font-size: var(--fs);
 overflow: hidden;
}
body
{
 font-weight: normal;
 color: #000000;
 background: #FFFFFF;
 background-color: rgba(255,255,255,0);
/* overflow: auto; */
 height: 100%; /* damit restliche Seitengroesse von unter-DIV richtig berechnet wird */
}
button { 
 cursor: pointer;
 border-radius: calc(var(--fs)/5) var(--fs);
 color: #000000;
 background-color: #F57E20;
 font-weight: bold;
 border: 0px;
 padding: 7px; /* 5 wie die anderen plus 2 für border */
}
button.unsichtbar { 
 cursor: pointer;
 background-color: transparent;
 border: 0px;
 font-weight: normal; /* Produktgruppen sind in button.unsichtbar. Darum nicht generell bold */
 border: 0px;
}
button:disabled { 
 cursor: default;
 color: #000000;
 background-color: #AAAAAA;
 font-weight: bold;
}
button.picto {
 vertical-align: text-top;
 padding: 0px;
 width: auto;
 height: auto;
 border: 0px;
 background-color: #FFFFFF;
}
img {
 border: 0px;
}
img.logo {
 width: 10vw;
 min-width: 100px;
 height: auto;
}
img.picto {
 vertical-align: text-top;
 width: auto;
 height: 2rem;
 border: 2px;
 background-color: #FFFFFF;
}
img.mobil {
 width: 5vw;
 min-width: 54px;
 height: auto;
}
/* TEXT über Bild Start */
img.center {
 vertical-align: middle;
 border: 0px;
 margin: 0px;
}
div.imgcontainer {
 position: relative;
 text-align: center;
 color: #FFFFFF
}
div.imgtextunten {
 position: absolute;
 bottom: var(--fs);
 left: 7px;
 color: var(--main-fg-color);
 background-color: rgb(255,255,255);
 background-color: rgba(255,255,255,0.5);
 text-shadow:
     2px  2px 2px white,
     2px -2px 2px white,
    -2px  2px 2px white,
    -2px -2px 2px white;
}
div.imgtextaktion {
 position: absolute;
 bottom: var(--fs);
 min-width: 10%;
 max-width: 90%;
 vertical-align: center;
 color: white;
 left: 5%;
 background-color: rgb(245,126,32);
 background-color: rgba(245,126,32,0.6);
 border-top: 5px solid orange;
 border-bottom: 5px solid orange;
 padding-left: 5px;
 font-style: italic;
 font-weight: bold;
 font-size: calc(var(--fs)*1.4);
 transition: background 0.5s;
}
div.imgtextaktion:hover {
 background-color: rgba(245,126,32,0.9);
}
/* TEXT über Bild Ende */
/* hoehe in Prozent div oder Seite ist leider nicht moeglich */
iframe {
 display: block;
 border: 0px;
 padding: 0px;
 width: 100%;
 height: 100vh;
 overflow: auto;
}
.iframebox {
 height: 360px;
}
/* Fuer anzeigebox um unnoetiges doppeltes Scrollen (iframe und divbox zu vermeiden
   der Scrollbalken fuer die divbox geht zwar trotzdem nicht weg - zumindest bei edge -
   aber er laesst sich nicht bewegen und verringert die Verwirrung beim Kunden
   kann/wird mit resizehauptseiteiframe() in groesse angepasst
*/
.imgset {
 display: var(--display_img);
 position: -webkit-sticky; /* Safari */
 position: sticky;
 top: 50px;
}
a { 
 cursor: pointer;
 text-decoration: none;
 color: #000000; 
}
/* Links durch Farbwechsel anzeigen */
a:hover {
 color: #F57E20;
 background: #FFFFFF;
}
img.startbild {
 padding-top: 50px;
 border: 0px;
 background-color: #FFFFFF;
 vertical-align: middle;
 width: 40%;
 height: auto;
 position: -webkit-sticky; /* Safari */
 position: sticky;
 top: 0px;
}
img.produktbild {
 padding-top: 50px;
 padding-bottom: 30px;
 border: 0px;
 background-color: #FFFFFF;
 vertical-align: middle;
 width: auto;
 height: auto;
 min-height: 300px;
 max-height: 600px;
}
/* im Hauptfenster Blockelemente auch nebeneinander */
.flex-container
{
 padding: 0px;
 margin: 0;
 list-style: none;
 display: -webkit-box;
 display: -moz-box;
 display: -ms-flexbox;
 display: -webkit-flex;
 display: flex;
 -webkit-flex-flow: row wrap;
 justify-content: space-between;
 align-content: flex-start;
}
.flex-item {
  padding: 5px;
/*
  width: 200px;
  height: 150px;
  margin-top: 10px;
  line-height: 150px;
  font-weight: bold;
*/
  text-align: left;
  align: left;
}
.floatleft {
  float: left;
  width: 10%;
}
.floatcenter {
  width: 80%;
}
.floatright {
  float: right;
  width: 10%;
}

/* enthaelt menu_container(mit menu) und body */
div#ganzeseite
{
 position: fixed;
 top: 0px;
 left: 0px;
 margin: 0px;
 width: 100vw;
 height: 100vh;
 z-index: 5;
 background: #FFFFFF;
}

div#menu_container
{
 position: absolute;
 top: 0px;
 background: #FFFFFF;
 margin: 0px;
 width: 100vw;
 height: auto;
 min-height: 70px;
 z-index: 20;
}
div#menu
{
 position: relative;
 background: #FFFFFF;
 vertical-align: top;
 margin: 0px;
 z-index: var(--menu_zi);
 top: var(--menu_top);
 padding-left: var(--menu_left);
 width: var(--menu_width);
 text-align: right;
}
div#menublock
{
 position: var(--menu_pos);
 right: var(--menu_right);
 display: var(--menublock_disp);
 background: #FFFFFF;
 vertical-align: top;
 text-align: right;
 margin: 0px;
 z-index: var(--menu_zi);
 width: var(--menu_width);
}
div.menuz {
 position: relative;
 color: black;
 padding: 0px;
 width: 100%;
}
span[class^="menuz"] {
 display: var(--menuz_span_disp);
 text-align: left;
 border: 2px solid white;
 padding-top: calc(var(--fs)/3);
 padding-bottom: calc(var(--fs)/3);
 padding-right: 1rem;
 padding-left: calc((100vw - 1500px)/5);
 min-height: 3ex;
 max-height: 100%;
 vertical-align: middle;
 background-color: var(--main-bg-color);
 background-clip: padding-box;
 width: calc(var(--fs)*15);
}

/* enthaelt  und bewegt sich in der
  Desktopansicht mit dem Menu mit */
div#body_container
{
 position: absolute;
 top: var(--menu_height);
 background: #FFFFFF;
 margin: 0px;
 width: 100vw;
 height: calc(100vh - var(--menu_height));
 overflow-y: auto;
 overflow-x: auto;
}
div#body
{
 position: absolute;
 z-index: 5;
 margin: 0;
 top: 0px;
 padding-top: var(--body_padding_top);
 padding-right: var(--fs);
 left: 0px;
 right: 0px;
 height: calc(100vh - var(--menu_height) - var(--body_padding_top));
 background: #FFFFFF;
 margin-left: var(--arbeitsbereich_margin);
 margin-right: var(--arbeitsbereich_margin);
}
div#menulogo
{
 position: fixed;
 z-index: 11;
 margin: 5px;
 top: 0px;
 left: 0px;
 background: #FFFFFF;
 padding-right: var(--fs);
 width: var(--menu_logow);
}
/* bei Desktopanzeige unter menu versteckt */
div#menumobil {
 position: fixed;
 z-index: var(--menumobil_zi);
 margin: 5px;
 top: 0px;
 right: 0px;
 background: #FFFFFF;
}
div#menu_container_hide {
 position: fixed;
 z-index: 0;
 top: 0px;
 left: 0px;
 right: 0px;
 margin: 0;
 height: 40px;
 background: #FFFFFF;
}
div#bgweiss {
 position: fixed;
 top: 0px;
 left: 0px;
 right: 0px;
 bottom: 0px;
 margin: 0;
 z-index: 1;
 background: #FFFFFF;
 color: #FF0000;
}
div#fehlerschirm {
 position: fixed;
 top: 0px;
 left: 0px;
 right: 0px;
 bottom: 0px;
 margin: 0;
 z-index: 0;
 background: #FFFFFF;
 color: #FF0000;
 background-color: rgba(200,200,200,0.5);
}
div#fehlermeldung {
 position: relative;
 width: 50%;
 background: #FFFFFF;
 color: #FF0000;
 margin: auto auto;
 padding: 20px;
 top: 50%;
 -webkit-transform: translateY(-50%);
 -ms-transform: translateY(-50%);
 transform: translateY(-50%);
}
div#pictoleiste {
 display: var(--picto_disp);
 position: fixed;
 bottom: 5vh;
 left: 0px;
 margin: 0px;
 width: auto;
 height: auto;
 max-height: calc(95vh - var(--menu_height));
 z-index: 5000;
 background: #FFFFFF;
 background-color: rgba(255,255,255,0);
 overflow-x: hidden;
 overflow-y: auto;
}
span[class^="pictoleiste"] {
 display: block;
 width: var(--arbeitsbereich_margin);
 height: auto;
 cursor: pointer;
 text-decoration: none;
 border: 0;
 border-style: solid;
 border-color: #000000;
 border-radius: 8px;
 font-size: var(--fsmenu);
 font-weight: bold;
 color: #000000;
 background-color: #F57E20;
 margin-left: 0px;
 margin-right: 0px;
 margin-top: 1rem;
 margin-bottom: 0px;
 padding-left: 0px;
 padding-right: 0px;
 padding-top: 0px;
 padding-bottom: 0px;
 text-align: left;
 white-space: nowrap;
 overflow: hidden;
}
span.pictoleiste_animiert {
 animation-name: pictoleiste;
 animation-duration: 3s;
}
span[class^="pictoleiste"]:hover {
 width: auto;
 padding-left: 1rem;
 padding-right: 2rem;
}
/* damit ein Besucher die pictoleiste ueberhaupt mitbekommt werden die
 neuen span animiert und Laufen von Rot bis Orange, Breite 25% bis Minimalbreite 
*/
@keyframes pictoleiste
{
 from { background-color: #FF0000; width: 25vw; }
 to { background-color: #F57E20; width: var(--arbeitsbereich_margin); }
}
table.borderblau {
 border: thick solid #0000FF;
 width: 100%;
}

.schriftblau {
 font-weight: bold;
 font-style: normal;
 color: #0000FF;
 background-color: #FFFFFF;
}

.bgrot {
 color: #FFFFFF;
 background-color: #FF0000;
}
.bgblau {
 color: #FFFFFF;
 background-color: #0000FF;
}
.blauerrand {
 font-weight: bold;
 font-style: normal;
 border: 3px solid blue;
 text-align: center;
}
.bggrau {
 color: #000000;
 background-color: #DDDDDD;
}
/* aus historischen Gründen */
.grau {
 color: #000000;
 background-color: #DDDDDD;
}
.bggelb {
 color: #000000;
 background-color: #FFF000;
}
.bggruen {
 color: #FFFFFF;
 background-color: #009933;
}
.bgviolett {
 color: #000000;
 background-color: #8800FF;
}
.versteckt {
 display: none;
}

table.header {
 font-weight: bold;
/* Trick 17. Weisser Hintergrund zu 100 % transparent.
 Dadurch wird der darunter liegende div-Layer nur von Text und Bilder, nicht
 aber vom Hintergrund ueberdeckt.
 background-color: rgba(255,255,255,0);
*/
 vertical-align: top;
 align: top;
 border: 0;
 width: 100%;
 max-width: 1600px;
}

tr.header {
 vertical-align: top;
}

td.header {
 vertical-align: top;
 align: center;
 height: 100%;
 padding: 10px;
 overflow: auto;
/* Zeile darf umgebrochen werden */
 display: inline-block;
}

/* Login Link und Logout Button) */
a.menu { 
 cursor: pointer;
 text-decoration: none;
 border: 0;
 border-style: solid;
 border-color: #000000;
 border-radius: 8px;
 font-size: var(--fsmenu);
 font-weight: bold;
 display: block;
 min-width: 150px;
 max-width: 300px;
 color: #000000;
 background-color: #F57E20;
 margin-left: 0px;
 margin-right: 0px;
 margin-top: 0px;
 margin-bottom: 0px;
 padding-left: 20px;
 padding-right: 20px;
 padding-top: 5px;
 padding-bottom: 5px;
 vertical-align: top;
 overflow: hidden;
 text-align: left;
 background: #F57E20; /* für browser */
 background: -moz-linear-gradient(left, #F57E20 0%, #F57E20 20%, #FFFFFF 100%); /* FF3.6+ */
 background: -webkit-gradient(linear, left, right, color-stop(0%,#F57E20), color-stop(20%,#F57E20), color-stop(100%,#FFFFFF));/* Chrome,Safari4+ */
 background: -webkit-linear-gradient(left, #F57E20 0%, #F57E20 20%, #FFFFFF 100%); /* Chrome10+,Safari5.1+ */
 background: -o-linear-gradient(left, #F57E20 0%, #F57E20 20%, #FFFFFF 100%); /* Opera 11.10+ */
 background: -ms-linear-gradient(left, #F57E20 0%, #F57E20 20%, #FFFFFF 100%); /* IE10+ */
 background: linear-gradient(to right, #F57E20 0%, #F57E20 20%, #FFFFFF 100%); /* W3C */
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#F57E20', endColorstr='#FFFFFF',GradientType=0 );
}

button.menu { 
 display: inline-block;
 border-radius: calc(var(--fs)/5) var(--fs);
 width: calc(var(--fs)*15);
 cursor: pointer;
 border: 0;
 border-style: solid;
 border-color: #000000;
 font-size: var(--fsmenu);
 font-weight: bold;
 color: #000000;
 background-color: #F57E20;
 margin: 0px;
 padding-left: 20px;
 padding-right: 5px;
 padding-top: 5px;
 padding-bottom: 5px;
 vertical-align: top;
 overflow: hidden;
 text-align: left;
 background: #F57E20; /* für browser */
 background: -moz-linear-gradient(left, #F57E20 0%, #F57E20 20%, #FFFFFF 100%); /* FF3.6+ */
 background: -webkit-gradient(linear, left, right, color-stop(0%,#F57E20), color-stop(20%,#F57E20), color-stop(100%,#FFFFFF));/* Chrome,Safari4+ */
 background: -webkit-linear-gradient(left, #F57E20 0%, #F57E20 20%, #FFFFFF 100%); /* Chrome10+,Safari5.1+ */
 background: -o-linear-gradient(left, #F57E20 0%, #F57E20 20%, #FFFFFF 100%); /* Opera 11.10+ */
 background: -ms-linear-gradient(left, #F57E20 0%, #F57E20 20%, #FFFFFF 100%); /* IE10+ */
 background: linear-gradient(to right, #F57E20 0%, #F57E20 20%, #FFFFFF 100%); /* W3C */
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#F57E20', endColorstr='#FFFFFF',GradientType=0 );
}

button.ueberschrift { 
 border: 0;
 border-style: solid;
 border-color: #000000;
 border-radius: 8px;
 font-size: var(--fsmenu);
 font-weight: bold;
 min-width: 200px;
 max-width: 500px;
 color: #000000; 
 background-color: #F57E20;
 margin-left: 0px;
 margin-right: 0px;
 margin-top: 0px;
 margin-bottom: 0px;
 padding-left: 20px;
 padding-right: 20px;
 padding-top: 5px;
 padding-bottom: 5px;
 vertical-align: top;
 overflow: hidden;
 align: center;
 background: #F57E20; /* füe browser */
 background: -moz-linear-gradient(left, #F57E20 0%, #F57E20 20%, #FFFFFF 100%); /* FF3.6+ */
 background: -webkit-gradient(linear, left, right, color-stop(0%,#F57E20), color-stop(20%,#F57E20), color-stop(100%,#FFFFFF));/* Chrome,Safari4+ */
 background: -webkit-linear-gradient(left, #F57E20 0%, #F57E20 20%, #FFFFFF 100%); /* Chrome10+,Safari5.1+ */
 background: -o-linear-gradient(left, #F57E20 0%, #F57E20 20%, #FFFFFF 100%); /* Opera 11.10+ */
 background: -ms-linear-gradient(left, #F57E20 0%, #F57E20 20%, #FFFFFF 100%); /* IE10+ */
 background: linear-gradient(to right, #F57E20 0%, #F57E20 20%, #FFFFFF 100%); /* W3C */
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#F57E20', endColorstr='#FFFFFF',GradientType=0 );
}

/* kein Pfeil in Select-Box bei IE ab 11 */
select.menu: :-ms-expand { /* for IE 11 */
    display: none;
}

select.menu { 
 display: inline-block;
 border-radius: calc(var(--fs)/5) var(--fs);
 width: calc(var(--fs)*15);
 cursor: pointer;
 border: 0;
 border-style: solid;
 border-color: #000000;
/* Abschalten Standard-Pfeil in Select Box */
 -webkit-appearance: none;
 -moz-appearance: none;
 appearance: none;
 font-size: var(--fsmenu);
 font-weight: bold;
 color: #000000;
 background-color: #F57E20;
 margin: 0px;
 padding-left: 20px;
 padding-right: 5px;
 padding-top: 5px;
 padding-bottom: 5px;
 vertical-align: top;
 overflow: auto;
 text-align: left;
 background: #F57E20; /* füe browser */
 background: -moz-linear-gradient(left, #F57E20 0%, #F57E20 20%, #FFFFFF 100%); /* FF3.6+ */
 background: -webkit-gradient(linear, left, right, color-stop(0%,#F57E20), color-stop(20%,#F57E20), color-stop(100%,#FFFFFF));/* Chrome,Safari4+ */
 background: -webkit-linear-gradient(left, #F57E20 0%, #F57E20 20%, #FFFFFF 100%); /* Chrome10+,Safari5.1+ */
 background: -o-linear-gradient(left, #F57E20 0%, #F57E20 20%, #FFFFFF 100%); /* Opera 11.10+ */
 background: -ms-linear-gradient(left, #F57E20 0%, #F57E20 20%, #FFFFFF 100%); /* IE10+ */
 background: linear-gradient(to right, #F57E20 0%, #F57E20 20%, #FFFFFF 100%); /* W3C */
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#F57E20', endColorstr='#FFFFFF',GradientType=0 );
}

optgroup.menu { 
 font-weight: bold;
 font-style: italic;
 background-color: #FFFFFF;
 color: #F57E20;
/* wirkt nur bei pull-down, nicht bei groesserem Anzeigefenster */
 min-width: 100px;
 max-width: 500px;
}

option.menu { 
 font-weight: normal;
 background-color: #FFFFFF;
 color: #000000; 
/* wirkt nur bei pull-down, nicht bei groesserem Anzeigefenster */
 min-width: 100px;
 max-width: 500px;
}
/* um mit optgroup menu die Gruppen hervorzuheben, die Auswahl aber s/w anzuzeigen
   bzw. mit z.B. normalblau blau */
option[class*="normal"] {
 font-weight: normal;
 font-style: normal;
 background-color: #FFFFFF;
 color: #000000; 
 border: 3px solid #FFFFFF;
}
option[class$="right"] {
 text-align: right;
}
option[class$="center"] {
 text-align: center;
}
option[class*="unten"] {
 vertical-align: bottom;
 color: black;
}
option[class*="nowrap"] {
 white-space: nowrap;
}
/* option färbig */
option[class*="weiss"] {
 color: #000000;
 background-color: #FFFFFF;
}
option[class*="grau"] {
 color: #000000;
 background-color: #DDDDDD;
}
option[class*="gruen"] {
 color: #FFFFFF;
 background-color: #009933;
}
option[class*="gelb"] {
 color: #000000;
 background-color: #FFF000;
}
option[class*="blau"] {
 color: #FFFFFF;
 background-color: #0066FF;
}
option[class*="orange"] {
 color: #FFFFFF;
 background-color: #F57E20;
}
option[class*="rot"] {
 color: #FFFFFF;
 background-color: #FF0000;
}
option[class*="violett"] {
 color: #FFFFFF;
 background-color: #8800FF;
}
/* option ignoriert bei checked die background-color und nimmt immer grau
 die checked Werte werden nur bei ausgeklapptem Menü verwendet bzw. bei size>1
 ansonsten gelten die Werte für <select> und nicht für <option>!!
*/
option:hover[class^="normal"] {
 padding-left: 10px;
}
option:checked[class^="normal"] {
 font-weight: bold;
 font-style: italic;
 border: 5px solid #000000;
 border-radius: 10px;
}
/* option färbig */
option:checked[class*="weiss"] {
 border: 5px solid #FFFFFF;
}
option:checked[class*="grau"] {
 border: 5px solid #DDDDDD;
}
option:checked[class*="gruen"] {
 border: 5px solid #009933;
}
option:checked[class*="gelb"] {
 border: 5px solid yellow;
}
option:checked[class*="blau"] {
 border: 5px solid #0066FF;
}
option:checked[class*="orange"] {
 border: 5px solid #F57E20;
}
option:checked[class*="rot"] {
 border: 5px solid #FF0000;
}
option:checked[class*="violett"] {
 border: 5px solid #8800FF;
}

button.menumin { 
 cursor: pointer;
 border: 0;
 border-style: solid;
 border-color: #000000;
 border-radius: 8px;
 font-size: var(--fsmenu);
 font-weight: bold;
 min-width: 20px;
 max-width: 20px;
 color: #000000; 
 background-color: #FFFFFF;
 margin-left: 0px;
 margin-right: 0px;
 margin-top: 0px;
 margin-bottom: 0px;
 padding-left: 0px;
 padding-right: 0px;
 padding-top: 0px;
 padding-bottom: 0px;
 vertical-align: top;
 overflow: hidden;
 align: center;
 background: #FFFFFF; /* füe browser */
 background: -moz-linear-gradient(left, #F57E20 0%, #F57E20 20%, #FFFFFF 100%); /* FF3.6+ */
 background: -webkit-gradient(linear, left, right, color-stop(0%,#F57E20), color-stop(20%,#F57E20), color-stop(100%,#FFFFFF));/* Chrome,Safari4+ */
 background: -webkit-linear-gradient(left, #F57E20 0%, #F57E20 20%, #FFFFFF 100%); /* Chrome10+,Safari5.1+ */
 background: -o-linear-gradient(left, #F57E20 0%, #F57E20 20%, #FFFFFF 100%); /* Opera 11.10+ */
 background: -ms-linear-gradient(left, #F57E20 0%, #F57E20 20%, #FFFFFF 100%); /* IE10+ */
 background: linear-gradient(to right, #F57E20 0%, #F57E20 20%, #FFFFFF 100%); /* W3C */
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#F57E20', endColorstr='#FFFFFF',GradientType=0 );
}

button.hideformular { 
 cursor: pointer;
 border: 0;
 border-style: solid;
 border-color: #000000;
 border-radius: 8px;
 font-size: var(--fsmenu);
 font-weight: bold;
 min-width: 20px;
 max-width: 20px;
 color: #000000; 
 background-color: #FFFFFF;
 margin-left: 0px;
 margin-right: 0px;
 margin-top: 0px;
 margin-bottom: 0px;
 padding-left: 0px;
 padding-right: 0px;
 padding-top: 0px;
 padding-bottom: 0px;
 vertical-align: top;
 overflow: hidden;
 align: center;
 background: #FFFFFF; /* füe browser */
 background: -moz-linear-gradient(left, #F57E20 0%, #F57E20 20%, #FFFFFF 100%); /* FF3.6+ */
 background: -webkit-gradient(linear, left, right, color-stop(0%,#F57E20), color-stop(20%,#F57E20), color-stop(100%,#FFFFFF));/* Chrome,Safari4+ */
 background: -webkit-linear-gradient(left, #F57E20 0%, #F57E20 20%, #FFFFFF 100%); /* Chrome10+,Safari5.1+ */
 background: -o-linear-gradient(left, #F57E20 0%, #F57E20 20%, #FFFFFF 100%); /* Opera 11.10+ */
 background: -ms-linear-gradient(left, #F57E20 0%, #F57E20 20%, #FFFFFF 100%); /* IE10+ */
 background: linear-gradient(to right, #F57E20 0%, #F57E20 20%, #FFFFFF 100%); /* W3C */
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#F57E20', endColorstr='#FFFFFF',GradientType=0 );
}

h1 {
 font-weight: normal;
 font-style: normal;
 font-size: calc(var(--fs)*2);
}

h2 {
 font-weight: normal;
 font-style: normal;
 font-size: calc(var(--fs)*1.6);
}

h3 {
 font-weight: normal;
 font-style: normal;
 font-size: calc(var(--fs)*1.4);
}

h4 {
 font-weight: normal;
 font-style: normal;
 font-size: calc(var(--fs)*1.2);
}

h5 {
 font-weight: normal;
 font-style: normal;
 font-size: var(--fs);
}
/* h6 wie h3 mit weisser Schrift auf (DIC-)orangem Untergrund */
h6 {
 font-weight: bold;
 font-style: italic;
 font-size: calc(var(--fs)*1.4);
 background-color: #F57E20;
 color: white;
}

ul.gross {
 font-weight: normal;
 font-style: normal;
 font-size: var(--fs);
 background-color: #FFFFFF;
 color: #000000; 
}

li.gross {
 margin: 10px 0;
}

/* Drag Boxen fuer Formulare */
div.dragBox {
 position: fixed;
 top: var(--dg_top);
 left: var(--dg_left);
 width: var(--dg_width);
 height: var(--dg_height);
 background-color: #FFFFFF;
 padding-left: 0px;
 padding-right: 0px;
 padding-top: 0px;
 padding-bottom: 0px;
 cursor: move;
 z-index: 100;
 border-width: 1px;
 border-style: solid;
 border-color: #000000;
 overflow: hidden;
}
div.dragHeader {
 position: absolute;
 top: 0px;
 left: 0px;
 height: var(--dg_header_height);
 width: var(--dg_width);
 background: #F57E20;
 overflow: hidden;
}
/* alt: div.dragBox h3 { */
div.dragHeader h3 {
 background-color: #F57E20;
 font-weight: bold;
 padding-left: 15px;
 padding-right: 15px;
 padding-top: 10px;
 padding-bottom: 5px;
 margin-top: 0px;
}
div.dragBox img {
 cursor: default;
}
div.dragBox p {
 margin-bottom: 0px;
}
div.dragContBox {
 position: absolute;
 top: calc(var(--fs)*3);
 width: calc(var(--dg_width) - 10px);
 height: var(--dg_body_height);
 margin: 0px;
 background-color: #FFFFFF;
 padding-top: var(--dg_body_pad);
 padding-left: 5px;
 padding-right: 5px;
 padding-bottom: var(--dg_body_pad);
 cursor: default;
 left: 0px;
 overflow-x: auto;
 overflow-y: auto;
}

/* Drag Box Warenkorb */
div.dragBoxWk {
 position: fixed;
 top: 0px;
 left: var(--dg_left);
 width: var(--dg_width);
 height: 100vh;
 background-color: #FFFFFF;
 padding-left: 0px;
 padding-right: 0px;
 padding-top: 0px;
 padding-bottom: 0px;
 cursor: move;
 z-index: 100;
 border-width: 1px;
 border-style: solid;
 border-color: #000000;
 overflow-x: auto;
 overflow-y: auto;
/* bei Warenkorb ganze Seite nutzen */
 --dg_body_height: calc(95vh - 20px);
}
div.dragBoxWk h3 {
 background-color: #F57E20;
 font-weight: bold;
 padding-left: 15px;
 padding-right: 15px;
 padding-top: 10px;
 padding-bottom: 5px;
 margin-top: 0px;
}
div.dragBoxWk img {
 cursor: default;
}
div.dragBoxWk p {
 margin-bottom: 0px;
}
/* iframebox */
div.iframeContBox {
 position: absolute;
 top: calc(var(--fs)*3);
 left: 0px;
 width: calc(var(--dg_width) - 10px);
 height: var(--dg_body_height);
 margin: 0px;
 background-color: #FFFFFF;
 padding-top: var(--dg_body_pad);
 padding-left: 5px;
 padding-right: 5px;
 padding-bottom: var(--dg_body_pad);
 cursor: default;
}
/* passt genau in die ContBox, Cursor zum iframe, nicht zur Box */
iframe.iframeBoxUrl {
 width: calc(var(--dg_width) - 10px);
 height: var(--dg_body_height);
 margin: 0px;
 background-color: #FFFFFF;
 padding-top: 0px;
 padding-left: 0px;
 padding-right: 0px;
 padding-bottom: 0px;
 cursor: default;
 overflow-x: auto;
 overflow-y: auto;
}
/* Box ueber ganze Seite, komplett mit Menü */
div.dragKompletteSeite {
 position: fixed;
 top: 0px;
 left: 0px;
 width: 100vw;
 height: 100vh;
 background-color: #FFFFFF;
 padding-left: 0px;
 padding-right: 0px;
 padding-top: 0px;
 padding-bottom: 0px;
 cursor: default; 
 z-index: 100;
 border-width: 1px;
 border-style: solid;
 border-color: #000000;
 overflow: hidden;
}
/* Box ueber ganze Seite, Menü am PC frei */
div.dragSeite {
 position: fixed;
 top: var(--dg_top);
 left: 0px;
 width: 100vw;
 height: calc(100vh - var(--dg_top));
 background-color: #FFFFFF;
 padding-left: 0px;
 padding-right: 0px;
 padding-top: 0px;
 padding-bottom: 0px;
 cursor: default; 
 z-index: 100;
 border-width: 1px;
 border-style: solid;
 border-color: #000000;
 overflow: hidden;
}
div.dragSeiteHeader {
 position: absolute;
 top: 0px;
 left: 0px;
 height: var(--dg_header_height);
 width: 100vw;
 background: #F57E20;
 overflow: hidden;
}
div.dragSeiteHeader h3 {
 background-color: #F57E20;
 font-weight: bold;
 padding-left: 15px;
 padding-right: 15px;
 padding-top: 10px;
 padding-bottom: 5px;
 margin-top: 0px;
}
div.dragContKompletteSeite {
 position: absolute;
 top: var(--dg_header_height);
 width: 100vw;
 height: calc(100vh - var(--dg_header_height));
 margin: 0px;
 background-color: #FFFFFF;
 padding-top: 0px;
 padding-left: 0px;
 padding-right: 0px;
 padding-bottom: 0px;
 cursor: default;
 left: 0px;
 overflow-x: auto;
 overflow-y: auto;
}
div.dragContSeite {
 position: absolute;
 top: var(--dg_header_height);
 width: 100vw;
 height: var(--dg_height);
 margin: 0px;
 background-color: #FFFFFF;
 padding-top: 0px;
 padding-left: 0px;
 padding-right: 0px;
 padding-bottom: 0px;
 cursor: default;
 left: 0px;
 overflow-x: auto;
 overflow-y: auto;
}
div.iframeContSeite {
 position: absolute;
 top: var(--dg_header_height);
 left: 0px;
 width: 100vw;
 height: calc(100vh - var(--dg_header_height));
 margin: 0px;
 background-color: #FFFFFF;
 padding-top: 0px;
 padding-left: 0px;
 padding-right: 0px;
 padding-bottom: 0px;
 cursor: default;
}
/* passt genau in die ContBox, Cursor zum iframe, nicht zur Box */
iframe.iframeSeiteUrl {
 width: 100vw;
 height: calc(100vh - var(--dg_header_height));
 margin: 0px;
 background-color: #FFFFFF;
 padding-top: 0px;
 padding-left: 0px;
 padding-right: 0px;
 padding-bottom: 0px;
 cursor: default;
 overflow-x: auto;
 overflow-y: auto;
}

select.submitOnChange_wk { 
 cursor: pointer;
 border: 0;
 border-style: solid;
 border-color: #000000;
 box-shadow: 2px 2px grey;
 -webkit-appearance: none;
 -moz-appearance: none;
 appearance: none;
 font-size: var(--fsmenu);
 font-weight: normal;
 min-width: 150px;
 max-width: 400px;
 color: #000000; 
 background-color: #F57E20;
 margin-left: 0px;
 margin-right: 0px;
 margin-top: 0px;
 margin-bottom: 0px;
 padding-left: 0px;
 padding-right: 0px;
 padding-top: 0px;
 padding-bottom: 0px;
 vertical-align: top;
 overflow: auto;
 align: left;
}

optgroup.wk { 
 background-color: #F57E20;
 color: #000000;
 min-width: 100px;
 max-width: 300px;
 white-space: wrap;
 font-size: var(--fs);
 font-weight: small;
}

option.wk { 
 font-weight: normal;
 background-color: #FFFFFF;
 color: #000000; 
 min-width: 100px;
 max-width: 300px;
 white-space: wrap;
 font-size: var(--fsmenu);
 font-weight: small;
}

select.submitOnChange_agb { 
 cursor: pointer;
 border: 0;
 border-style: solid;
 border-color: #000000;
 -webkit-appearance: none;
 -moz-appearance: none;
 appearance: none;
 font-size: var(--fsmenu);
 font-weight: bold;
 color: #000000; 
 background-color: #F57E20;
 margin-left: 0px;
 margin-right: 0px;
 margin-top: 0px;
 margin-bottom: 0px;
 padding-left: 0px;
 padding-right: 0px;
 padding-top: 0px;
 padding-bottom: 0px;
 vertical-align: top;
 overflow: auto;
 align: left;
}

select.submitOnChange_kundenauswahl { 
 cursor: pointer;
 border: 0;
 border-style: solid;
 border-color: #000000;
 -webkit-appearance: none;
 -moz-appearance: none;
 appearance: none;
 font-size: var(--fsmenu);
 font-weight: bold;
 color: #000000; 
 background-color: #F57E20;
 margin-left: 0px;
 margin-right: 0px;
 margin-top: 0px;
 margin-bottom: 0px;
 padding-left: 0px;
 padding-right: 0px;
 padding-top: 0px;
 padding-bottom: 0px;
 vertical-align: top;
 overflow: auto;
 align: left;
 width: 1000px;
}

/* zur Darstellung mehrere Buttons/Formulare in einer Zeile ohne Zeilenumbruch */
form.zeile {
 display: inline-block;
}

.fehler {
 font-weight: bold;
 font-style: normal;
 background-color: #FFFFFF;
 color: #AA0000; 
 border: 3px solid red;
 text-align: center;
}

.auffallend {
 font-weight: bold;
 font-style: normal;
 background-color: #FFFFFF;
 color: #AA0000; 
 text-align: center;
}

.button { 
 font-weight: bold;
 font-style: normal;
 color: #000000;
 border: 2px solid #F57E20;
 background-color: #F57E20;
 padding: 5px;
 border-radius: calc(var(--fs)/5) var(--fs);
}

.buttonrot { 
 font-weight: bold;
 font-style: normal;
 color: #000000;
 border: 2px solid #FF0000;
 background-color: #FF0000;
 padding: 5px;
 border-radius: calc(var(--fs)/5) var(--fs);
}

.buttongrau { 
 font-weight: bold;
 font-style: normal;
 color: #000000;
 border: 2px solid #CCCCCC;
 background-color: #CCCCCC;
 padding: 5px;
 border-radius: calc(var(--fs)/5) var(--fs);
}

/* white statt weiss, weil sonst span *weiss greift */
.buttonwhite { 
 font-weight: bold;
 font-style: normal;
 color: #FFFFFF;
 border: 2px solid #F57E20;
 background-color: #F57E20;
 border-radius: calc(var(--fs)/5) var(--fs) var(--fs);
}

.submitOnChange_rechts { 
 text-align: right; 
}

.submitOnChange { 
 text-align: left; 
}

select.auswahlopt { 
 cursor: pointer;
 border: 0;
 border-style: solid;
 border-color: #000000;
/* Abschalten Standard-Pfeil in Select Box */
 -webkit-appearance: none;
 -moz-appearance: none;
 appearance: none;
 font-size: var(--fs);
 font-weight: bold;
 min-width: 30rem;
 max-width: 30rem;
 color: #000000; 
 background-color: #FFFFFF;
 margin-left: 0px;
 margin-right: 0px;
 margin-top: 0px;
 margin-bottom: 0px;
 padding-left: 5px;
 padding-right: 20px;
 padding-top: 0px;
 padding-bottom: 0px;
 vertical-align: top;
 overflow: auto;
 align: left;
}
/* kein Pfeil in Select-Box bei IE ab 11 */
select.auswahlopt: :-ms-expand { /* for IE 11 */
    display: none;
}

option.auswahlopt { 
 font-weight: bold;
 color: #000000; 
 background-color: #FFFFFF;
/* wirkt nur bei pull-down, nicht bei groesserem Anzeigefenster */
 min-width: 100px;
}

/* soll nur disabled verwendet werden - sind also keine Pull-Down sichtbar */
select.preisliste { 
 cursor: pointer;
 border: 0;
 border-style: solid;
 border-color: #000000;
/* Abschalten Standard-Pfeil in Select Box */
 -webkit-appearance: none;
 -moz-appearance: none;
 appearance: none;
 font-size: var(--fs);
 font-weight: normal;
 min-width: 100px;
 max-width: 800px;
 color: #000000; 
 background-color: #FFFFFF;
 margin-left: 0px;
 margin-right: 0px;
 margin-top: 0px;
 margin-bottom: 0px;
 padding-left: 5px;
 padding-right: 20px;
 padding-top: 0px;
 padding-bottom: 0px;
 vertical-align: top;
 overflow: auto;
 align: left;
}

/* Produktzeile in produktelisten.inc.php */
div[class^="zeile"] {
 display: block;
 position: relative;
 color: black;
 border: 0px;
 padding: calc(var(--fs)/3);
 min-width: 0px;
 max-width: 100%;
}
div[class*="start"] {
 margin-top: 2ex;
}
div[class$="right"] {
 text-align: right;
}
div[class$="center"] {
 text-align: center;
}
div[class*="durchsichtig"] {
 --main-bg-color: transparent;
 background: transparent;
 --main-fg-color: #000000;
 color: black;
}
div[class*="weiss"] {
 --main-bg-color: #FFFFFF;
 background: #FFFFFF;
 --main-fg-color: #000000;
 color: black;
}
div[class*="grau"] {
 --main-bg-color: #DDDDDD;
 background: #DDDDDD;
 --main-fg-color: #000000;
 color: black;
}
div[class*="gruen"] {
 --main-bg-color: #009933;
 background: #009933;
 --main-fg-color: #FFFFFF;
 color: white;
}
div[class*="gelb"] {
 --main-bg-color: #FFF000;
 background: #FFF000;
 --main-fg-color: #000000;
 color: black;
}
div[class*="blau"] {
 --main-bg-color: #0066FF;
 background: #0066FF;
 --main-fg-color: #FFFFFF;
 color: white;
}
div[class*="orange"] {
 --main-bg-color: #F57E20;
 background: #F57E20;
 --main-fg-color: #FFFFFF;
 color: white;
}
div[class*="rot"] {
 --main-bg-color: #FF0000;
 background: #FF0000;
 --main-fg-color: #FFFFFF;
 color: white;
}
div[class*="schwarz"] {
 --main-bg-color: #000000;
 background: #000000;
 --main-fg-color: #FFFFFF;
 color: white;
}
div[class*="violett"] {
 --main-bg-color: #FFF000;
 background: #FFF000;
 --main-fg-color: #FFFFFF;
 color: white;
}
div[class*="mausover"]:hover {
 border: 1px solid red;
}

/* Breite Spalte: width + padding(-right) + border */
/* Breite durch ID, BG-Color via Variable durch div */
#z2 { width: 1em !important; }
#z3 { width: 2em !important; }
#z4 { width: 3em !important; }
#z5 { width: 4em !important; }
#z6 { width: 5em !important; }
#z7 { width: 6em !important; }
#z8 { width: 7em !important; }
#z9 { width: 8em !important; }
#z10 { width: 9em !important; }
#z11 { width: 10em !important; }
#z12 { width: 11em !important; }
#z13 { width: 12em !important; }
#z14 { width: 13em !important; }
#z15 { width: 14em !important; }
#z16 { width: 15em !important; }
#z17 { width: 16em !important; }
#z18 { width: 17em !important; }
#z19 { width: 18em !important; }
#z20 { width: 19em !important; }
#z25 { width: 24em !important; }
#z30 { width: 29em !important; }
#z35 { width: 34em !important; }
#z40 { width: 39em !important; }
#z45 { width: 44em !important; }
#z50 { width: 49em !important; }
#z55 { width: 54em !important; }
#z60 { width: 59em !important; }
#z65 { width: 64em !important; }
#z70 { width: 69em !important; }
#z75 { width: 74em !important; }
#z80 { width: 79em !important; }
#z85 { width: 84em !important; }
#z90 { width: 89em !important; }
#z95 { width: 94em !important; }
#z100 { width: 99em !important; }
#z105 { width: 104em !important; }
#z110 { width: 109em !important; }
#z115 { width: 114em !important; }
#z120 { width: 119em !important; }
#z125 { width: 124em !important; }
#z130 { width: 129em !important; }
#z135 { width: 134em !important; }
#z140 { width: 139em !important; }
#z145 { width: 144em !important; }
#z150 { width: 149em !important; }
#z155 { width: 154em !important; }
#z160 { width: 159em !important; }
#z165 { width: 164em !important; }
#z170 { width: 169em !important; }
#z175 { width: 174em !important; }
#z180 { width: 179em !important; }
#z185 { width: 184em !important; }
#z190 { width: 189em !important; }
#z195 { width: 194em !important; }
#z200 { width: 199em !important; }

span[class^="zeile"] {
 display: inline-block;
 text-align: left;
 padding: 3px 1em 0px 0px;
 min-height: 3ex;
 max-height: 100%;
 vertical-align: top;
 background-color: var(--main-bg-color);
 background-clip: padding-box;
}
/* restliche Breite vom übergeordneten Element (DIV) */
span[class*="rest"] {
 float: right;
}
span[class*="rand"] {
 border: 1px solid black;
}
span[class*="oto_st1"] {
 display: var(--anzeigespan_st1);
}
span[class*="oto_st2"] {
 display: var(--anzeigespan_st2);
}
span[class*="oto_st3"] {
 display: var(--anzeigespan_st3);
}
span[class*="oto_xt1"] {
 display: var(--anzeigespan_xt1);
}
span[class*="oto_xt2"] {
 display: var(--anzeigespan_xt2);
}
span[class*="oto_xt3"] {
 display: var(--anzeigespan_xt3);
}
span[class*="rahmen"] {
 margin-left: calc(var(--fs)*2);
 margin-right: calc(var(--fs)*2);
 margin-top: calc(var(--fs)*1);
 margin-bottom: calc(var(--fs)*2);
 padding: calc(var(--fs)*1.5);
 padding-bottom: calc(var(--fs)*2);
 border: 2px solid #BBBBBB;
 border-radius: 5px 50px 50px;
 backgroup-clip: padding-box;
 background: linear-gradient(135deg, #BBBBBB, #FFFFFF);
}
span.artgruppe {
 background: transparent;
 color: var(--main-fg-color); 
 text-align: center;
 text-shadow:
     2px  2px 2px white,
     2px -2px 2px white,
    -2px  2px 2px white,
    -2px -2px 2px white;
}
span[class*="st1_"] {
 margin-top: 2ex;
}
span[class*="st2_"] {
 margin-top: 2ex;
}
span[class*="st3_"] {
 margin-top: 2ex;
}
span[class$="right"] {
 text-align: right;
}
span[class$="center"] {
 text-align: center;
}
span[class*="unten"] {
 vertical-align: bottom;
 color: black;
}
span[class*="nowrap"] {
 white-space: nowrap;
}
span[class*="transparent"] {
 --main-bg-color: transparent;
 background: transparent;
 color: black;
}
span[class*="weiss"] {
 --main-bg-color: #FFFFFF;
 background: #FFFFFF;
 color: var(--main-fg-color);
}
span[class*="grau"] {
 --main-bg-color: #DDDDDD;
 background: #DDDDDD;
 color: var(--main-fg-color);
}
span[class*="gruen"] {
 --main-bg-color: #009933;
 background: #009933;
 color: white;
}
span[class*="gelb"] {
 --main-bg-color: #FFF000;
 background: #FFF000;
 color: black;
}
span[class*="blau"] {
 --main-bg-color: #0066FF;
 background: #0066FF;
 color: white;
}
span[class*="orange"] {
 --main-bg-color: #F57E20;
 background: #F57E20;
 color: white;
}
span[class*="rot"] {
 --main-bg-color: #FF0000;
 background: #FF0000;
 color: white;
}
span[class*="schwarz"] {
 --main-bg-color: #000000;
 background: #000000;
 color: white;
}
span[class*="violett"] {
 --main-bg-color: #8800FF;
 background: #8800FF;
 color: white
}
span[class*="versteckt"] {
 --main-bg-color: #FFFFFF;
 background: #FFFFFF;
 color: white;
}
span[class*="hidden"] {
 visibility: hidden;
}
/* nicht grauverlauf, sonst schlägt grau auch zu */
span[class*="verlaufgr"] {
 background-image: linear-gradient(white 40%,grey);
}
span[class*="verlaufgr"]:hover {
 background-image: linear-gradient(white 40%,orange);
}
/* aufklappbare Details anzeigen */
details:hover {
 color: #F57E20;
 background: #FFFFFF;
}
/* Ordner (zu/aufgeklappt) statt Dreieck anzeigen
   verschiedene Symbolarten, sind deutlicher zu unterscheiden */
summary::marker {
 content: "\1F4C1   "; /* Dateiordner-Symbol */
 font-weight: bold;
 font-size: calc(var(--fs)*1.5);
}
details[open] summary::marker {
 content: "\1F5C1   ";  /* Karteiordner-Symbol */
 font-weight: bold;
 font-size: calc(var(--fs)*1.5);
}

details[class^="st1_"] summary::marker {
 content: "";
}
details[class^="st1_"][open] summary::marker {
 content: "";
}
details[class^="st2_"] summary::marker {
 content: "";
}
details[class^="st2_"][open] summary::marker {
 content: "";
}
details[class^="st3_"] summary::marker {
 content: "";
}
details[class^="st3_"][open] summary::marker {
 content: "";
}
/* für kaskadierte Details zurücksetzen, ohne [open]=close */
details[class^="st1_"] summary {
 --anzeigespan_st1: inline-block; 
 --anzeigespan_xt1: none; 
}
details[class^="st1_"][open] summary {
 --anzeigespan_st1: none; 
 --anzeigespan_xt1: inline-block; 
}
details[class^="st1_"]:hover {
 color: #F57E20;
 --main-fg-color: #F57E20;
 --main-bg-color: #FFFFFF;
}
details[class^="st1_"][open]:hover {
 --main-bg-color: #DDDDDD;
}
details[class^="st2_"] summary {
 --anzeigespan_st2: inline-block; 
 --anzeigespan_xt2: none; 
}
details[class^="st2_"][open] summary {
 --anzeigespan_st2: none; 
 --anzeigespan_xt2: inline-block; 
}
details[class^="st2_"]:hover {
 color: #F57E20;
 --main-fg-color: #F57E20;
 background: #FFFFFF;
 --main-bg-color: #FFFFFF;
}
details[class^="st2_"][open]:hover {
 --main-bg-color: #DDDDDD;
}
details[class^="st3_"] summary {
 --anzeigespan_st3: inline-block; 
 --anzeigespan_xt3: none; 
}
details[class^="st3_"][open] summary {
 --anzeigespan_st3: none; 
 --anzeigespan_xt3: inline-block; 
}
details[class^="st3_"]:hover {
 color: #F57E20;
 --main-fg-color: #F57E20;
 background: #FFFFFF;
 --main-bg-color: #FFFFFF;
}
details[class^="st3_"][open]:hover {
 --main-bg-color: #DDDDDD;
}

/* farbige Trennbalken */
hr.orange {
 height: 0.4rem;
 border: 0;
 background: #F57E20;
 margin-top: 0.3rem;
 margin-bottom: 0.3rem;
 margin-left: auto;
 margin-right: auto;
 padding: 0px;
 vertical-align: center;
}
/* Balken mit Text ODER */
hr.oder {
 display: block;
 overflow: visible; /* For IE */
 height: 0.4rem;
 border: 0;
 background: #F57E20;
 margin-top: 0.3rem;
 margin-bottom: 0.3rem;
 margin-left: auto;
 margin-right: auto;
 vertical-align: center;
}
hr.oder: after {
 content: "ODER";
 display: inline-block;
 position: relative;
 font-size: 1rem;
 font-weight: bold;
 border: 0;
 background: #FFFFFF;
 vertical-align: center;
 top: -0.2rem;
 padding-top: 0rem;
 padding-bottom: 0rem;
 padding-left: 2rem;
 padding-right: 2rem;
}
hr.oderok {
 display: block;
 overflow: visible; /* For IE */
 height: 2rem;
 width: 10rem;
 top: 0.1rem;
 border: 0;
 background: #FFFFFF;
 text-align: center;
 vertical-align: center;
 margin: 0rem;
}
hr.oderok: after {
 content: "oderok";
 display: inline-block;
 position: relative;
 font-size: 1.2rem;
 font-weight: bold;
 border: 0;
 background: #FFFFFF;
 vertical-align: center;
 margin-top: 0.3rem;
 margin-bottom: 0.3rem;
 margin-left: auto;
 margin-right: auto;
}

/* START Anzeige Diagramm Prozentekreise */
/****************************************************************
 *
 * CSS Percentage Circle
 * Author: Andre Firchow
 *
 * http://firchow.net/css3-prozentanzeige-kreis/
 * http://circle.firchow.net/
*****************************************************************/
.rect-auto, .c100.p51 .slice, .c100.p52 .slice, .c100.p53 .slice, .c100.p54 .slice, .c100.p55 .slice, .c100.p56 .slice, .c100.p57 .slice, .c100.p58 .slice, .c100.p59 .slice, .c100.p60 .slice, .c100.p61 .slice, .c100.p62 .slice, .c100.p63 .slice, .c100.p64 .slice, .c100.p65 .slice, .c100.p66 .slice, .c100.p67 .slice, .c100.p68 .slice, .c100.p69 .slice, .c100.p70 .slice, .c100.p71 .slice, .c100.p72 .slice, .c100.p73 .slice, .c100.p74 .slice, .c100.p75 .slice, .c100.p76 .slice, .c100.p77 .slice, .c100.p78 .slice, .c100.p79 .slice, .c100.p80 .slice, .c100.p81 .slice, .c100.p82 .slice, .c100.p83 .slice, .c100.p84 .slice, .c100.p85 .slice, .c100.p86 .slice, .c100.p87 .slice, .c100.p88 .slice, .c100.p89 .slice, .c100.p90 .slice, .c100.p91 .slice, .c100.p92 .slice, .c100.p93 .slice, .c100.p94 .slice, .c100.p95 .slice, .c100.p96 .slice, .c100.p97 .slice, .c100.p98 .slice, .c100.p99 .slice, .c100.p100 .slice {
  clip: rect(auto, auto, auto, auto);
}

.pie, .c100 .bar, .c100.p51 .fill, .c100.p52 .fill, .c100.p53 .fill, .c100.p54 .fill, .c100.p55 .fill, .c100.p56 .fill, .c100.p57 .fill, .c100.p58 .fill, .c100.p59 .fill, .c100.p60 .fill, .c100.p61 .fill, .c100.p62 .fill, .c100.p63 .fill, .c100.p64 .fill, .c100.p65 .fill, .c100.p66 .fill, .c100.p67 .fill, .c100.p68 .fill, .c100.p69 .fill, .c100.p70 .fill, .c100.p71 .fill, .c100.p72 .fill, .c100.p73 .fill, .c100.p74 .fill, .c100.p75 .fill, .c100.p76 .fill, .c100.p77 .fill, .c100.p78 .fill, .c100.p79 .fill, .c100.p80 .fill, .c100.p81 .fill, .c100.p82 .fill, .c100.p83 .fill, .c100.p84 .fill, .c100.p85 .fill, .c100.p86 .fill, .c100.p87 .fill, .c100.p88 .fill, .c100.p89 .fill, .c100.p90 .fill, .c100.p91 .fill, .c100.p92 .fill, .c100.p93 .fill, .c100.p94 .fill, .c100.p95 .fill, .c100.p96 .fill, .c100.p97 .fill, .c100.p98 .fill, .c100.p99 .fill, .c100.p100 .fill {
  position: absolute;
  border: 0.08em solid #307bbb;
  width: 0.84em;
  height: 0.84em;
  clip: rect(0em, 0.5em, 1em, 0em);
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  border-radius: 50%;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
}

.pie-fill, .c100.p51 .bar:after, .c100.p51 .fill, .c100.p52 .bar:after, .c100.p52 .fill, .c100.p53 .bar:after, .c100.p53 .fill, .c100.p54 .bar:after, .c100.p54 .fill, .c100.p55 .bar:after, .c100.p55 .fill, .c100.p56 .bar:after, .c100.p56 .fill, .c100.p57 .bar:after, .c100.p57 .fill, .c100.p58 .bar:after, .c100.p58 .fill, .c100.p59 .bar:after, .c100.p59 .fill, .c100.p60 .bar:after, .c100.p60 .fill, .c100.p61 .bar:after, .c100.p61 .fill, .c100.p62 .bar:after, .c100.p62 .fill, .c100.p63 .bar:after, .c100.p63 .fill, .c100.p64 .bar:after, .c100.p64 .fill, .c100.p65 .bar:after, .c100.p65 .fill, .c100.p66 .bar:after, .c100.p66 .fill, .c100.p67 .bar:after, .c100.p67 .fill, .c100.p68 .bar:after, .c100.p68 .fill, .c100.p69 .bar:after, .c100.p69 .fill, .c100.p70 .bar:after, .c100.p70 .fill, .c100.p71 .bar:after, .c100.p71 .fill, .c100.p72 .bar:after, .c100.p72 .fill, .c100.p73 .bar:after, .c100.p73 .fill, .c100.p74 .bar:after, .c100.p74 .fill, .c100.p75 .bar:after, .c100.p75 .fill, .c100.p76 .bar:after, .c100.p76 .fill, .c100.p77 .bar:after, .c100.p77 .fill, .c100.p78 .bar:after, .c100.p78 .fill, .c100.p79 .bar:after, .c100.p79 .fill, .c100.p80 .bar:after, .c100.p80 .fill, .c100.p81 .bar:after, .c100.p81 .fill, .c100.p82 .bar:after, .c100.p82 .fill, .c100.p83 .bar:after, .c100.p83 .fill, .c100.p84 .bar:after, .c100.p84 .fill, .c100.p85 .bar:after, .c100.p85 .fill, .c100.p86 .bar:after, .c100.p86 .fill, .c100.p87 .bar:after, .c100.p87 .fill, .c100.p88 .bar:after, .c100.p88 .fill, .c100.p89 .bar:after, .c100.p89 .fill, .c100.p90 .bar:after, .c100.p90 .fill, .c100.p91 .bar:after, .c100.p91 .fill, .c100.p92 .bar:after, .c100.p92 .fill, .c100.p93 .bar:after, .c100.p93 .fill, .c100.p94 .bar:after, .c100.p94 .fill, .c100.p95 .bar:after, .c100.p95 .fill, .c100.p96 .bar:after, .c100.p96 .fill, .c100.p97 .bar:after, .c100.p97 .fill, .c100.p98 .bar:after, .c100.p98 .fill, .c100.p99 .bar:after, .c100.p99 .fill, .c100.p100 .bar:after, .c100.p100 .fill {
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  transform: rotate(180deg);
}

.c100 {
  position: relative;
  font-size: 120px;
  width: 1em;
  height: 1em;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  border-radius: 50%;
  float: left;
  margin: 0 0.1em 0.1em 0;
  background-color: #cccccc;
}
.c100 *, .c100 *:before, .c100 *:after {
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
}
.c100.center {
  float: none;
  margin: 0 auto;
}
.c100.big {
  font-size: 240px;
}
.c100.small {
  font-size: 80px;
}
.c100 > span {
  position: absolute;
  width: 100%;
  z-index: 1;
  left: 0;
  top: 0;
  width: 5em;
  line-height: 5em;
  font-size: 0.2em;
  color: #cccccc;
  display: block;
  text-align: center;
  white-space: nowrap;
  -webkit-transition-property: all;
  -moz-transition-property: all;
  -o-transition-property: all;
  transition-property: all;
  -webkit-transition-duration: 0.2s;
  -moz-transition-duration: 0.2s;
  -o-transition-duration: 0.2s;
  transition-duration: 0.2s;
  -webkit-transition-timing-function: ease-out;
  -moz-transition-timing-function: ease-out;
  -o-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.c100:after {
  position: absolute;
  top: 0.08em;
  left: 0.08em;
  display: block;
  content: " ";
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  border-radius: 50%;
  background-color: whitesmoke;
  width: 0.84em;
  height: 0.84em;
  -webkit-transition-property: all;
  -moz-transition-property: all;
  -o-transition-property: all;
  transition-property: all;
  -webkit-transition-duration: 0.2s;
  -moz-transition-duration: 0.2s;
  -o-transition-duration: 0.2s;
  transition-duration: 0.2s;
  -webkit-transition-timing-function: ease-in;
  -moz-transition-timing-function: ease-in;
  -o-transition-timing-function: ease-in;
  transition-timing-function: ease-in;
}
.c100 .slice {
  position: absolute;
  width: 1em;
  height: 1em;
  clip: rect(0em, 1em, 1em, 0.5em);
}
.c100.p1 .bar {
  -webkit-transform: rotate(3.6deg);
  -moz-transform: rotate(3.6deg);
  -ms-transform: rotate(3.6deg);
  -o-transform: rotate(3.6deg);
  transform: rotate(3.6deg);
}
.c100.p2 .bar {
  -webkit-transform: rotate(7.2deg);
  -moz-transform: rotate(7.2deg);
  -ms-transform: rotate(7.2deg);
  -o-transform: rotate(7.2deg);
  transform: rotate(7.2deg);
}
.c100.p3 .bar {
  -webkit-transform: rotate(10.8deg);
  -moz-transform: rotate(10.8deg);
  -ms-transform: rotate(10.8deg);
  -o-transform: rotate(10.8deg);
  transform: rotate(10.8deg);
}
.c100.p4 .bar {
  -webkit-transform: rotate(14.4deg);
  -moz-transform: rotate(14.4deg);
  -ms-transform: rotate(14.4deg);
  -o-transform: rotate(14.4deg);
  transform: rotate(14.4deg);
}
.c100.p5 .bar {
  -webkit-transform: rotate(18deg);
  -moz-transform: rotate(18deg);
  -ms-transform: rotate(18deg);
  -o-transform: rotate(18deg);
  transform: rotate(18deg);
}
.c100.p6 .bar {
  -webkit-transform: rotate(21.6deg);
  -moz-transform: rotate(21.6deg);
  -ms-transform: rotate(21.6deg);
  -o-transform: rotate(21.6deg);
  transform: rotate(21.6deg);
}
.c100.p7 .bar {
  -webkit-transform: rotate(25.2deg);
  -moz-transform: rotate(25.2deg);
  -ms-transform: rotate(25.2deg);
  -o-transform: rotate(25.2deg);
  transform: rotate(25.2deg);
}
.c100.p8 .bar {
  -webkit-transform: rotate(28.8deg);
  -moz-transform: rotate(28.8deg);
  -ms-transform: rotate(28.8deg);
  -o-transform: rotate(28.8deg);
  transform: rotate(28.8deg);
}
.c100.p9 .bar {
  -webkit-transform: rotate(32.4deg);
  -moz-transform: rotate(32.4deg);
  -ms-transform: rotate(32.4deg);
  -o-transform: rotate(32.4deg);
  transform: rotate(32.4deg);
}
.c100.p10 .bar {
  -webkit-transform: rotate(36deg);
  -moz-transform: rotate(36deg);
  -ms-transform: rotate(36deg);
  -o-transform: rotate(36deg);
  transform: rotate(36deg);
}
.c100.p11 .bar {
  -webkit-transform: rotate(39.6deg);
  -moz-transform: rotate(39.6deg);
  -ms-transform: rotate(39.6deg);
  -o-transform: rotate(39.6deg);
  transform: rotate(39.6deg);
}
.c100.p12 .bar {
  -webkit-transform: rotate(43.2deg);
  -moz-transform: rotate(43.2deg);
  -ms-transform: rotate(43.2deg);
  -o-transform: rotate(43.2deg);
  transform: rotate(43.2deg);
}
.c100.p13 .bar {
  -webkit-transform: rotate(46.8deg);
  -moz-transform: rotate(46.8deg);
  -ms-transform: rotate(46.8deg);
  -o-transform: rotate(46.8deg);
  transform: rotate(46.8deg);
}
.c100.p14 .bar {
  -webkit-transform: rotate(50.4deg);
  -moz-transform: rotate(50.4deg);
  -ms-transform: rotate(50.4deg);
  -o-transform: rotate(50.4deg);
  transform: rotate(50.4deg);
}
.c100.p15 .bar {
  -webkit-transform: rotate(54deg);
  -moz-transform: rotate(54deg);
  -ms-transform: rotate(54deg);
  -o-transform: rotate(54deg);
  transform: rotate(54deg);
}
.c100.p16 .bar {
  -webkit-transform: rotate(57.6deg);
  -moz-transform: rotate(57.6deg);
  -ms-transform: rotate(57.6deg);
  -o-transform: rotate(57.6deg);
  transform: rotate(57.6deg);
}
.c100.p17 .bar {
  -webkit-transform: rotate(61.2deg);
  -moz-transform: rotate(61.2deg);
  -ms-transform: rotate(61.2deg);
  -o-transform: rotate(61.2deg);
  transform: rotate(61.2deg);
}
.c100.p18 .bar {
  -webkit-transform: rotate(64.8deg);
  -moz-transform: rotate(64.8deg);
  -ms-transform: rotate(64.8deg);
  -o-transform: rotate(64.8deg);
  transform: rotate(64.8deg);
}
.c100.p19 .bar {
  -webkit-transform: rotate(68.4deg);
  -moz-transform: rotate(68.4deg);
  -ms-transform: rotate(68.4deg);
  -o-transform: rotate(68.4deg);
  transform: rotate(68.4deg);
}
.c100.p20 .bar {
  -webkit-transform: rotate(72deg);
  -moz-transform: rotate(72deg);
  -ms-transform: rotate(72deg);
  -o-transform: rotate(72deg);
  transform: rotate(72deg);
}
.c100.p21 .bar {
  -webkit-transform: rotate(75.6deg);
  -moz-transform: rotate(75.6deg);
  -ms-transform: rotate(75.6deg);
  -o-transform: rotate(75.6deg);
  transform: rotate(75.6deg);
}
.c100.p22 .bar {
  -webkit-transform: rotate(79.2deg);
  -moz-transform: rotate(79.2deg);
  -ms-transform: rotate(79.2deg);
  -o-transform: rotate(79.2deg);
  transform: rotate(79.2deg);
}
.c100.p23 .bar {
  -webkit-transform: rotate(82.8deg);
  -moz-transform: rotate(82.8deg);
  -ms-transform: rotate(82.8deg);
  -o-transform: rotate(82.8deg);
  transform: rotate(82.8deg);
}
.c100.p24 .bar {
  -webkit-transform: rotate(86.4deg);
  -moz-transform: rotate(86.4deg);
  -ms-transform: rotate(86.4deg);
  -o-transform: rotate(86.4deg);
  transform: rotate(86.4deg);
}
.c100.p25 .bar {
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  transform: rotate(90deg);
}
.c100.p26 .bar {
  -webkit-transform: rotate(93.6deg);
  -moz-transform: rotate(93.6deg);
  -ms-transform: rotate(93.6deg);
  -o-transform: rotate(93.6deg);
  transform: rotate(93.6deg);
}
.c100.p27 .bar {
  -webkit-transform: rotate(97.2deg);
  -moz-transform: rotate(97.2deg);
  -ms-transform: rotate(97.2deg);
  -o-transform: rotate(97.2deg);
  transform: rotate(97.2deg);
}
.c100.p28 .bar {
  -webkit-transform: rotate(100.8deg);
  -moz-transform: rotate(100.8deg);
  -ms-transform: rotate(100.8deg);
  -o-transform: rotate(100.8deg);
  transform: rotate(100.8deg);
}
.c100.p29 .bar {
  -webkit-transform: rotate(104.4deg);
  -moz-transform: rotate(104.4deg);
  -ms-transform: rotate(104.4deg);
  -o-transform: rotate(104.4deg);
  transform: rotate(104.4deg);
}
.c100.p30 .bar {
  -webkit-transform: rotate(108deg);
  -moz-transform: rotate(108deg);
  -ms-transform: rotate(108deg);
  -o-transform: rotate(108deg);
  transform: rotate(108deg);
}
.c100.p31 .bar {
  -webkit-transform: rotate(111.6deg);
  -moz-transform: rotate(111.6deg);
  -ms-transform: rotate(111.6deg);
  -o-transform: rotate(111.6deg);
  transform: rotate(111.6deg);
}
.c100.p32 .bar {
  -webkit-transform: rotate(115.2deg);
  -moz-transform: rotate(115.2deg);
  -ms-transform: rotate(115.2deg);
  -o-transform: rotate(115.2deg);
  transform: rotate(115.2deg);
}
.c100.p33 .bar {
  -webkit-transform: rotate(118.8deg);
  -moz-transform: rotate(118.8deg);
  -ms-transform: rotate(118.8deg);
  -o-transform: rotate(118.8deg);
  transform: rotate(118.8deg);
}
.c100.p34 .bar {
  -webkit-transform: rotate(122.4deg);
  -moz-transform: rotate(122.4deg);
  -ms-transform: rotate(122.4deg);
  -o-transform: rotate(122.4deg);
  transform: rotate(122.4deg);
}
.c100.p35 .bar {
  -webkit-transform: rotate(126deg);
  -moz-transform: rotate(126deg);
  -ms-transform: rotate(126deg);
  -o-transform: rotate(126deg);
  transform: rotate(126deg);
}
.c100.p36 .bar {
  -webkit-transform: rotate(129.6deg);
  -moz-transform: rotate(129.6deg);
  -ms-transform: rotate(129.6deg);
  -o-transform: rotate(129.6deg);
  transform: rotate(129.6deg);
}
.c100.p37 .bar {
  -webkit-transform: rotate(133.2deg);
  -moz-transform: rotate(133.2deg);
  -ms-transform: rotate(133.2deg);
  -o-transform: rotate(133.2deg);
  transform: rotate(133.2deg);
}
.c100.p38 .bar {
  -webkit-transform: rotate(136.8deg);
  -moz-transform: rotate(136.8deg);
  -ms-transform: rotate(136.8deg);
  -o-transform: rotate(136.8deg);
  transform: rotate(136.8deg);
}
.c100.p39 .bar {
  -webkit-transform: rotate(140.4deg);
  -moz-transform: rotate(140.4deg);
  -ms-transform: rotate(140.4deg);
  -o-transform: rotate(140.4deg);
  transform: rotate(140.4deg);
}
.c100.p40 .bar {
  -webkit-transform: rotate(144deg);
  -moz-transform: rotate(144deg);
  -ms-transform: rotate(144deg);
  -o-transform: rotate(144deg);
  transform: rotate(144deg);
}
.c100.p41 .bar {
  -webkit-transform: rotate(147.6deg);
  -moz-transform: rotate(147.6deg);
  -ms-transform: rotate(147.6deg);
  -o-transform: rotate(147.6deg);
  transform: rotate(147.6deg);
}
.c100.p42 .bar {
  -webkit-transform: rotate(151.2deg);
  -moz-transform: rotate(151.2deg);
  -ms-transform: rotate(151.2deg);
  -o-transform: rotate(151.2deg);
  transform: rotate(151.2deg);
}
.c100.p43 .bar {
  -webkit-transform: rotate(154.8deg);
  -moz-transform: rotate(154.8deg);
  -ms-transform: rotate(154.8deg);
  -o-transform: rotate(154.8deg);
  transform: rotate(154.8deg);
}
.c100.p44 .bar {
  -webkit-transform: rotate(158.4deg);
  -moz-transform: rotate(158.4deg);
  -ms-transform: rotate(158.4deg);
  -o-transform: rotate(158.4deg);
  transform: rotate(158.4deg);
}
.c100.p45 .bar {
  -webkit-transform: rotate(162deg);
  -moz-transform: rotate(162deg);
  -ms-transform: rotate(162deg);
  -o-transform: rotate(162deg);
  transform: rotate(162deg);
}
.c100.p46 .bar {
  -webkit-transform: rotate(165.6deg);
  -moz-transform: rotate(165.6deg);
  -ms-transform: rotate(165.6deg);
  -o-transform: rotate(165.6deg);
  transform: rotate(165.6deg);
}
.c100.p47 .bar {
  -webkit-transform: rotate(169.2deg);
  -moz-transform: rotate(169.2deg);
  -ms-transform: rotate(169.2deg);
  -o-transform: rotate(169.2deg);
  transform: rotate(169.2deg);
}
.c100.p48 .bar {
  -webkit-transform: rotate(172.8deg);
  -moz-transform: rotate(172.8deg);
  -ms-transform: rotate(172.8deg);
  -o-transform: rotate(172.8deg);
  transform: rotate(172.8deg);
}
.c100.p49 .bar {
  -webkit-transform: rotate(176.4deg);
  -moz-transform: rotate(176.4deg);
  -ms-transform: rotate(176.4deg);
  -o-transform: rotate(176.4deg);
  transform: rotate(176.4deg);
}
.c100.p50 .bar {
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  transform: rotate(180deg);
}
.c100.p51 .bar {
  -webkit-transform: rotate(183.6deg);
  -moz-transform: rotate(183.6deg);
  -ms-transform: rotate(183.6deg);
  -o-transform: rotate(183.6deg);
  transform: rotate(183.6deg);
}
.c100.p52 .bar {
  -webkit-transform: rotate(187.2deg);
  -moz-transform: rotate(187.2deg);
  -ms-transform: rotate(187.2deg);
  -o-transform: rotate(187.2deg);
  transform: rotate(187.2deg);
}
.c100.p53 .bar {
  -webkit-transform: rotate(190.8deg);
  -moz-transform: rotate(190.8deg);
  -ms-transform: rotate(190.8deg);
  -o-transform: rotate(190.8deg);
  transform: rotate(190.8deg);
}
.c100.p54 .bar {
  -webkit-transform: rotate(194.4deg);
  -moz-transform: rotate(194.4deg);
  -ms-transform: rotate(194.4deg);
  -o-transform: rotate(194.4deg);
  transform: rotate(194.4deg);
}
.c100.p55 .bar {
  -webkit-transform: rotate(198deg);
  -moz-transform: rotate(198deg);
  -ms-transform: rotate(198deg);
  -o-transform: rotate(198deg);
  transform: rotate(198deg);
}
.c100.p56 .bar {
  -webkit-transform: rotate(201.6deg);
  -moz-transform: rotate(201.6deg);
  -ms-transform: rotate(201.6deg);
  -o-transform: rotate(201.6deg);
  transform: rotate(201.6deg);
}
.c100.p57 .bar {
  -webkit-transform: rotate(205.2deg);
  -moz-transform: rotate(205.2deg);
  -ms-transform: rotate(205.2deg);
  -o-transform: rotate(205.2deg);
  transform: rotate(205.2deg);
}
.c100.p58 .bar {
  -webkit-transform: rotate(208.8deg);
  -moz-transform: rotate(208.8deg);
  -ms-transform: rotate(208.8deg);
  -o-transform: rotate(208.8deg);
  transform: rotate(208.8deg);
}
.c100.p59 .bar {
  -webkit-transform: rotate(212.4deg);
  -moz-transform: rotate(212.4deg);
  -ms-transform: rotate(212.4deg);
  -o-transform: rotate(212.4deg);
  transform: rotate(212.4deg);
}
.c100.p60 .bar {
  -webkit-transform: rotate(216deg);
  -moz-transform: rotate(216deg);
  -ms-transform: rotate(216deg);
  -o-transform: rotate(216deg);
  transform: rotate(216deg);
}
.c100.p61 .bar {
  -webkit-transform: rotate(219.6deg);
  -moz-transform: rotate(219.6deg);
  -ms-transform: rotate(219.6deg);
  -o-transform: rotate(219.6deg);
  transform: rotate(219.6deg);
}
.c100.p62 .bar {
  -webkit-transform: rotate(223.2deg);
  -moz-transform: rotate(223.2deg);
  -ms-transform: rotate(223.2deg);
  -o-transform: rotate(223.2deg);
  transform: rotate(223.2deg);
}
.c100.p63 .bar {
  -webkit-transform: rotate(226.8deg);
  -moz-transform: rotate(226.8deg);
  -ms-transform: rotate(226.8deg);
  -o-transform: rotate(226.8deg);
  transform: rotate(226.8deg);
}
.c100.p64 .bar {
  -webkit-transform: rotate(230.4deg);
  -moz-transform: rotate(230.4deg);
  -ms-transform: rotate(230.4deg);
  -o-transform: rotate(230.4deg);
  transform: rotate(230.4deg);
}
.c100.p65 .bar {
  -webkit-transform: rotate(234deg);
  -moz-transform: rotate(234deg);
  -ms-transform: rotate(234deg);
  -o-transform: rotate(234deg);
  transform: rotate(234deg);
}
.c100.p66 .bar {
  -webkit-transform: rotate(237.6deg);
  -moz-transform: rotate(237.6deg);
  -ms-transform: rotate(237.6deg);
  -o-transform: rotate(237.6deg);
  transform: rotate(237.6deg);
}
.c100.p67 .bar {
  -webkit-transform: rotate(241.2deg);
  -moz-transform: rotate(241.2deg);
  -ms-transform: rotate(241.2deg);
  -o-transform: rotate(241.2deg);
  transform: rotate(241.2deg);
}
.c100.p68 .bar {
  -webkit-transform: rotate(244.8deg);
  -moz-transform: rotate(244.8deg);
  -ms-transform: rotate(244.8deg);
  -o-transform: rotate(244.8deg);
  transform: rotate(244.8deg);
}
.c100.p69 .bar {
  -webkit-transform: rotate(248.4deg);
  -moz-transform: rotate(248.4deg);
  -ms-transform: rotate(248.4deg);
  -o-transform: rotate(248.4deg);
  transform: rotate(248.4deg);
}
.c100.p70 .bar {
  -webkit-transform: rotate(252deg);
  -moz-transform: rotate(252deg);
  -ms-transform: rotate(252deg);
  -o-transform: rotate(252deg);
  transform: rotate(252deg);
}
.c100.p71 .bar {
  -webkit-transform: rotate(255.6deg);
  -moz-transform: rotate(255.6deg);
  -ms-transform: rotate(255.6deg);
  -o-transform: rotate(255.6deg);
  transform: rotate(255.6deg);
}
.c100.p72 .bar {
  -webkit-transform: rotate(259.2deg);
  -moz-transform: rotate(259.2deg);
  -ms-transform: rotate(259.2deg);
  -o-transform: rotate(259.2deg);
  transform: rotate(259.2deg);
}
.c100.p73 .bar {
  -webkit-transform: rotate(262.8deg);
  -moz-transform: rotate(262.8deg);
  -ms-transform: rotate(262.8deg);
  -o-transform: rotate(262.8deg);
  transform: rotate(262.8deg);
}
.c100.p74 .bar {
  -webkit-transform: rotate(266.4deg);
  -moz-transform: rotate(266.4deg);
  -ms-transform: rotate(266.4deg);
  -o-transform: rotate(266.4deg);
  transform: rotate(266.4deg);
}
.c100.p75 .bar {
  -webkit-transform: rotate(270deg);
  -moz-transform: rotate(270deg);
  -ms-transform: rotate(270deg);
  -o-transform: rotate(270deg);
  transform: rotate(270deg);
}
.c100.p76 .bar {
  -webkit-transform: rotate(273.6deg);
  -moz-transform: rotate(273.6deg);
  -ms-transform: rotate(273.6deg);
  -o-transform: rotate(273.6deg);
  transform: rotate(273.6deg);
}
.c100.p77 .bar {
  -webkit-transform: rotate(277.2deg);
  -moz-transform: rotate(277.2deg);
  -ms-transform: rotate(277.2deg);
  -o-transform: rotate(277.2deg);
  transform: rotate(277.2deg);
}
.c100.p78 .bar {
  -webkit-transform: rotate(280.8deg);
  -moz-transform: rotate(280.8deg);
  -ms-transform: rotate(280.8deg);
  -o-transform: rotate(280.8deg);
  transform: rotate(280.8deg);
}
.c100.p79 .bar {
  -webkit-transform: rotate(284.4deg);
  -moz-transform: rotate(284.4deg);
  -ms-transform: rotate(284.4deg);
  -o-transform: rotate(284.4deg);
  transform: rotate(284.4deg);
}
.c100.p80 .bar {
  -webkit-transform: rotate(288deg);
  -moz-transform: rotate(288deg);
  -ms-transform: rotate(288deg);
  -o-transform: rotate(288deg);
  transform: rotate(288deg);
}
.c100.p81 .bar {
  -webkit-transform: rotate(291.6deg);
  -moz-transform: rotate(291.6deg);
  -ms-transform: rotate(291.6deg);
  -o-transform: rotate(291.6deg);
  transform: rotate(291.6deg);
}
.c100.p82 .bar {
  -webkit-transform: rotate(295.2deg);
  -moz-transform: rotate(295.2deg);
  -ms-transform: rotate(295.2deg);
  -o-transform: rotate(295.2deg);
  transform: rotate(295.2deg);
}
.c100.p83 .bar {
  -webkit-transform: rotate(298.8deg);
  -moz-transform: rotate(298.8deg);
  -ms-transform: rotate(298.8deg);
  -o-transform: rotate(298.8deg);
  transform: rotate(298.8deg);
}
.c100.p84 .bar {
  -webkit-transform: rotate(302.4deg);
  -moz-transform: rotate(302.4deg);
  -ms-transform: rotate(302.4deg);
  -o-transform: rotate(302.4deg);
  transform: rotate(302.4deg);
}
.c100.p85 .bar {
  -webkit-transform: rotate(306deg);
  -moz-transform: rotate(306deg);
  -ms-transform: rotate(306deg);
  -o-transform: rotate(306deg);
  transform: rotate(306deg);
}
.c100.p86 .bar {
  -webkit-transform: rotate(309.6deg);
  -moz-transform: rotate(309.6deg);
  -ms-transform: rotate(309.6deg);
  -o-transform: rotate(309.6deg);
  transform: rotate(309.6deg);
}
.c100.p87 .bar {
  -webkit-transform: rotate(313.2deg);
  -moz-transform: rotate(313.2deg);
  -ms-transform: rotate(313.2deg);
  -o-transform: rotate(313.2deg);
  transform: rotate(313.2deg);
}
.c100.p88 .bar {
  -webkit-transform: rotate(316.8deg);
  -moz-transform: rotate(316.8deg);
  -ms-transform: rotate(316.8deg);
  -o-transform: rotate(316.8deg);
  transform: rotate(316.8deg);
}
.c100.p89 .bar {
  -webkit-transform: rotate(320.4deg);
  -moz-transform: rotate(320.4deg);
  -ms-transform: rotate(320.4deg);
  -o-transform: rotate(320.4deg);
  transform: rotate(320.4deg);
}
.c100.p90 .bar {
  -webkit-transform: rotate(324deg);
  -moz-transform: rotate(324deg);
  -ms-transform: rotate(324deg);
  -o-transform: rotate(324deg);
  transform: rotate(324deg);
}
.c100.p91 .bar {
  -webkit-transform: rotate(327.6deg);
  -moz-transform: rotate(327.6deg);
  -ms-transform: rotate(327.6deg);
  -o-transform: rotate(327.6deg);
  transform: rotate(327.6deg);
}
.c100.p92 .bar {
  -webkit-transform: rotate(331.2deg);
  -moz-transform: rotate(331.2deg);
  -ms-transform: rotate(331.2deg);
  -o-transform: rotate(331.2deg);
  transform: rotate(331.2deg);
}
.c100.p93 .bar {
  -webkit-transform: rotate(334.8deg);
  -moz-transform: rotate(334.8deg);
  -ms-transform: rotate(334.8deg);
  -o-transform: rotate(334.8deg);
  transform: rotate(334.8deg);
}
.c100.p94 .bar {
  -webkit-transform: rotate(338.4deg);
  -moz-transform: rotate(338.4deg);
  -ms-transform: rotate(338.4deg);
  -o-transform: rotate(338.4deg);
  transform: rotate(338.4deg);
}
.c100.p95 .bar {
  -webkit-transform: rotate(342deg);
  -moz-transform: rotate(342deg);
  -ms-transform: rotate(342deg);
  -o-transform: rotate(342deg);
  transform: rotate(342deg);
}
.c100.p96 .bar {
  -webkit-transform: rotate(345.6deg);
  -moz-transform: rotate(345.6deg);
  -ms-transform: rotate(345.6deg);
  -o-transform: rotate(345.6deg);
  transform: rotate(345.6deg);
}
.c100.p97 .bar {
  -webkit-transform: rotate(349.2deg);
  -moz-transform: rotate(349.2deg);
  -ms-transform: rotate(349.2deg);
  -o-transform: rotate(349.2deg);
  transform: rotate(349.2deg);
}
.c100.p98 .bar {
  -webkit-transform: rotate(352.8deg);
  -moz-transform: rotate(352.8deg);
  -ms-transform: rotate(352.8deg);
  -o-transform: rotate(352.8deg);
  transform: rotate(352.8deg);
}
.c100.p99 .bar {
  -webkit-transform: rotate(356.4deg);
  -moz-transform: rotate(356.4deg);
  -ms-transform: rotate(356.4deg);
  -o-transform: rotate(356.4deg);
  transform: rotate(356.4deg);
}
.c100.p100 .bar {
  -webkit-transform: rotate(360deg);
  -moz-transform: rotate(360deg);
  -ms-transform: rotate(360deg);
  -o-transform: rotate(360deg);
  transform: rotate(360deg);
}
.c100:hover {
  cursor: default;
}
.c100:hover > span {
  width: 3.33em;
  line-height: 3.33em;
  font-size: 0.3em;
  color: #307bbb;
}
.c100:hover:after {
  top: 0.04em;
  left: 0.04em;
  width: 0.92em;
  height: 0.92em;
}
.c100.dark {
  background-color: #777777;
}
.c100.dark .bar,
.c100.dark .fill {
  border-color: #c6ff00 !important;
}
.c100.dark > span {
  color: #777777;
}
.c100.dark:after {
  background-color: #666666;
}
.c100.dark:hover > span {
  color: #c6ff00;
}
.c100.green .bar, .c100.green .fill {
  border-color: #4db53c !important;
}
.c100.green:hover > span {
  color: #4db53c;
}
.c100.green.dark .bar, .c100.green.dark .fill {
  border-color: #5fd400 !important;
}
.c100.green.dark:hover > span {
  color: #5fd400;
}
.c100.orange .bar, .c100.orange .fill {
  border-color: #dd9d22 !important;
}
.c100.orange:hover > span {
  color: #dd9d22;
}
.c100.orange.dark .bar, .c100.orange.dark .fill {
  border-color: #e08833 !important;
}
.c100.orange.dark:hover > span {
  color: #e08833;
}
/* ENDE Anzeige Diagramm Prozentekreise */

/* START Schiebeschalter on-off (DMARC on off) */
/* The switch - the box around the slider */
.switch {
  position: relative;
  display: inline-block;
  height: var(--slh);
  width: var(--slw);
}
/* Hide default HTML checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #CCCCCC;
  -webkit-transition: .4s;
  transition: .4s;
}
.slider:before {
  position: absolute;
  content: "";
  height: var(--sl);
  width: var(--sl);
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}
input:checked + .slider {
  background-color: #F57E20;
}
input:focus + .slider {
  box-shadow: 0 0 1px #F57E20;
}
input:checked + .slider:before {
  -webkit-transform: translateX(var(--sl));
  -ms-transform: translateX(var(--sl));
  transform: translateX(var(--sl));
}
/* Rounded sliders */
.slider.round {
  border-radius: var(--slround);
}
.slider.round:before {
  border-radius: 50%;
}
/* Ende Schiebeschalter */