@charset "utf-8";
  html {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10pt; /**/
    line-height: 1.4em;
    text-size-adjust: none;
    -webkit-text-size-adjust: none;
    -moz-text-size-adjust: none;
    -ms-text-size-adjust: none;
  }
@media screen and (max-device-width : 450px) and (orientation:portrait) { 
  html {                                  /* Mobile Device allgemein */
    font-size: 16pt; /**/
/*  zoom: calc(320/490); /**/
/*  -moz-transform: scale(calc(320/525)); /* iPhone 5 */
/*  -moz-transform: scale(calc(375/525)); /* iPhone 7 */
/*  -moz-transform: scale(calc(var(--dev_width)/525)); /**/
/*  -moz-transform-origin: 0 0; /**/
  }
}
@media screen and (max-device-width : 376px) and (orientation:portrait) { 
  html {
    -moz-transform: scale(calc(375/525)); /* iPhone 7 */
    -moz-transform-origin: 0 0; /**/
  }
}
@media screen and (max-device-width : 321px) and (orientation:portrait) { 
  html {
    -moz-transform: scale(calc(320/525)); /* iPhone 5 */
    -moz-transform-origin: 0 0; /**/
  }
}

  body {
/*  font-size: 1rem; /**/
 /*  background: #ADC9E5; /* #666666; */
    background: #68bcFF; /* fallback old0 */
/*  background-rgb: 104,188,255"; /* fallback old0 */
    background: var(--hintergrund-farbe);
    /* background: #1E90FF; /* DodgerBlue */
    /* background: #349BFF; /* */
    /* background: #4BA6FF; /* */
    /* background: #62B1FF; /* */ 
/*  background: #78BCFF; /* */ 
    /* background: #8EC8FF; /* */
    /* background: #A5D3FF; /* */
    /* background: #BCDEFF; /* */
    /* background: #D2E9FF; /* */
    
    /* background: #3E90FF; /*  */
    /* background: #0066FF; /*  */
    /* background: #00CED1; /* DarkTurquoise */ 
    /* background: #66FFCC; /*  */      
    /* background: #666666; /*  */      
    
    background-image: none; /* */
/*  background-image: url("../img/DSCN2875_mod35.jpg"); /* */
/*  background-repeat: repeat; /**/
/*  background-position: top left; /**/
/*  margin: 0; /* Es empfiehlt sich, margin (Rand) und padding (Auffüllung) des Body-Elements auf 0 einzustellen, um unterschiedlichen Browser-Standardeinstellungen Rechnung zu tragen. */
/*  padding: 0; /**/
/*  color: #000000; /**/
  }
/* http://www.stichpunkt.de/html/umbruch.html */
  .textwrap {
/*  word-wrap:break-word; /**/
    word-wrap: normal;
    -moz-hyphens: auto;
    -o-hyphens: auto;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
  }
  nobr
 ,.nowrap {
    white-space: nowrap;
  }
  .nohyphens {
    -moz-hyphens: manual;
    -o-hyphens: manual;
    -webkit-hyphens: manual;
    -ms-hyphens: manual;
    hyphens: manual;
  }
  .teampic img {
    width: 180px; /* normal */
    height: 55px; /**/
  }
  .teampic div {
    position: relative;
    width: 180px;
    height: 55px;
  }
  .teampic span {
    position: absolute;
    top: 10px;
    left: 40px;
    display: block;
    cursor: pointer;
    color: #424242;
    text-align: center;
    width: 140px;
  }
@media screen and (max-device-width : 376px) and (orientation:portrait) { 
  .teampic img {
    width: calc(180px /375*525); /* iPhone 7 */
    height: calc(55px /375*525); /**/
  }
  .teampic div {
    width: calc(200px /375*525);
    height: calc(55px /375*525);
  }
  .teampic span {
    top: calc(10px /375*525);
    left: calc(40px /375*525);
    width: calc(140px /375*525);
  }
}
@media screen and (max-device-width : 321px) and (orientation:portrait) { 
  .teampic img {
    width: calc(160px /320*525); /* iPhone 5 */
    height: calc(55px /320*525); /**/
  }
  .teampic div {
    width: calc(165px /320*525);
    height: calc(55px /320*525);
  }
  .teampic span {
    top: calc(10px /320*525);
    left: calc(35px /320*525);
    width: calc(120px /320*525);
  }
}
  .datum {
/*  width: 158px; /**/
    width: 14em; /**/
/*  width: 50%; /**/
    vertical-align: bottom; /**/
    padding-bottom: 0.2em;
  }
  .mpre
 ,.zitat {
    font-size: 1.3rem; /**/
    padding-top: 0.7em; /**/
    line-height: 1.4em; /**/
    text-indent: -0.35em;
    padding-left: 0.35em; /**/
    padding-right: 0.35em; /**/
    padding-bottom: 0.7em; /**/
/*  border-spacing: 0px;        /* ersetzt cellspacing */
/*  border-collapse: collapse;  /* ersetzt cellspacing */
  }
@media screen and (max-device-width : 450px) and (orientation:portrait) { 
  .mpre
 ,.zitat {
/*.textwrap /**/
    word-wrap: normal;
    -moz-hyphens: auto;
    -o-hyphens: auto;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
  }
}
  .mmid {
    margin-top: 0.8em; /**/
/*  line-height: 1.4em; /**/
/*  text-indent: -0.35em;
/*  padding-left: 0.35em; /**/
/*  padding-right: 0.35em; /**/
    margin-bottom: 1.0em; /**/
  }
@media screen and (max-device-width : 450px) and (orientation:portrait) { 
  .mmid {
    margin-top: 0.4em; /**/
/*  margin-bottom: 1.0em; /**/
  }
}
  .mcont {
    margin-top: 1.0em; /**/
    margin-bottom: 1.0em; /**/
  }
@media screen and (max-device-width : 450px) and (orientation:portrait) { 
  .mcont {
/*  margin-top: 0.5em; /**/
    margin-bottom: 0.5em; /**/
  }
}
  .mpost {
    margin-top: 2.0em; /**/
/*  line-height: 1.4em; /**/
/*  text-indent: -0.35em;
/*  padding-left: 0.35em; /**/
/*  padding-right: 0.35em; /**/
    margin-bottom: 1.0em; /**/
  }
@media screen and (max-device-width : 450px) and (orientation:portrait) { 
  .mpost {
    margin-top: 1.0em; /**/
    margin-bottom: 0.7em; /**/
  }
}
  .textOhover {
    visibility: hidden;
    white-space: nowrap;
    position: relative;
    left: -0.5em;
  }
  a:hover + .textOhover
 ,a:focus + .textOhover {
    visibility: visible;
  }
  .text1Zeile {
    position: relative; /**/
    padding-top: 0.2em; /**/
    overflow: hidden; /**/
/*  text-overflow: ellipsis; /* nur bedingt Einzeilig */
    line-height: 1.4em; /**/
    max-height: 1.35em; /*Vorgabehöhe:  1.5em(line-height) */
    min-height: 1.35em; /*              rem : relative to body */
    text-indent: -0.35em;
    padding-left: 0.35em; /**/
    padding-bottom: 0.2em; /**/
    margin-bottom: 0.5em;
  }
  .text2Zeilen {
    position: relative; /**/
    padding-top: 0.2em; /**/
    overflow: hidden; /**/
/*  text-overflow: ellipsis; /* nur bedingt Einzeilig */
    line-height: 1.4em; /**/
    max-height: 2.7em; /*Vorgabehöhe:  1.5em(line-height) x 2 Zeilen = 3.0em */
    min-height: 1.4em; /*              rem : relative to body */
    text-indent: -0.35em;
    padding-left: 0.35em; /**/
    padding-bottom: 0.2em; /**/
    margin-bottom: 0.5em;
/*  font-size: 1.0rem; /**/
  }
  .text1Zeile:hover
 ,.text1Zeile:focus
 ,.text2Zeilen:hover
 ,.text2Zeilen:focus {
    max-height: none;
    height: auto;
  }
  .text1Zeile:after
 ,.text2Zeilen:after {
/*content: "..."; /**/
    content: ""; /**/
    text-align: right;
/*font-size: x-small; /**/
/*text-color: blue; /**/
    position: absolute;
    width: 15em; /**/
/*height: 1.5em; /**/
    height: 1.4em; /**/
    background-image: linear-gradient(to right, rgba(104,188,255,0) 0%, rgba(104,188,255,1) 70%); /**/
    background-image: linear-gradient(to right, rgba(var(--hintergrund-rgb),0) 0%, rgba(var(--hintergrund-rgb),1) 70%); /**/
    right: 0px;
    bottom: 0px;
  }
  .text1Zeile:hover:after 
 ,.text1Zeile:focus:after
 ,.text2Zeilen:hover:after 
 ,.text2Zeilen:focus:after {
    content: none;
  }
  table {
    /* table-layout: fixed; /**/
/*  font-family: Arial, Helvetica, sans-serif; /**/
/*  font-size: 10pt; /**/
/*  line-height: 1.4em; /**/
    /* position: absolut; */
    width: 675px;
    width: var(--window_width);
    margin: 0px; /* Es empfiehlt sich, margin (Rand) und padding (Auffüllung) des Body-Elements auf 0 einzustellen, um unterschiedlichen Browser-Standardeinstellungen Rechnung zu tragen. */
    margin-left: auto; /* mobile weg */
    margin-right: auto; /* mobile weg */
    padding: 0px;
    margin-top: 10px;
    border-spacing: 0px;        /* ersetzt cellspacing */
    border-collapse: collapse;  /* ersetzt cellspacing */
    color: #000000;
    border-width: 0;
    border-width: var(--border_width);
    border-style: solid; /**/
/*  font-size: 1.0rem; /**/
  }
  .x-small {
    font-size: 0.75em;
  }
  .fullwidth {
    width: 100%; /**/
    margin-left: 0px; /**/
  }
  .flatter {
/*  width: unset; /**/
    width: auto; /**/
    margin-left: 0px; /**/
  }  
  .logo {
    position: relative;
    top: 9px;
    right: -6px; /**/
    height: 60px;
  }
  .logo_okeil {
    text-align: right;
    z-index: 0;
    z-index: var(--z_index);
    height: 5px;
    width:  0px;
    position: relative;
    top:   0px;
    left: -6px;
    border-left:  240px solid #0000FF;
    border-bottom: 17px solid transparent;
  }
  .logo_ukeil {
    z-index: 1;
    z-index: var(--z_index);
    height: 5px;
    width:  0px;
    position: relative;
    top:  36px;
    left: -6px;
    border-left: 240px solid #0000FF;
    border-top:   17px solid transparent;
  }
  .logo_zahlen {
    z-index: 2;
    z-index: var(--z_index);
    height: 0px;
    position: relative;
    top: -44px;
  }
  .logo_zahlen img {
    width: 250px;
  }
  .logo_text {
    z-index: 3;
    z-index: var(--z_index);
    height: 50px;
    position: relative;
    top: -44px;
  }
  .logo_text img {
    width: 250px;
  }
  iframe.fb_video {
    width: 240px;
    height: 120px;
    float: right;
    margin: 0em 10px 10px 10px;
    border: none;
    overflow: hidden;
  }
  .beitr_left {
/*  height: 9.0em; /**/
    float: left;
    margin: 12px 20px 10px 0px;
    border-width: 1px;
    border-style: solid;
/*  height=\"200px\" border=\"1px\" style=\"float:left;margin:0px 10px 10px 0px;\" */
  }
  .beitr_right {
    float: right;
    margin: 12px 10px 10px 0px;
/*  float:right;margin:0px 50px 10px 10px;\" */
/*  float:right;margin:0px 50px 10px 10px;\"  */
  }
  ._webanfrage {
    font-size: 1.3rem; /**/
/*  padding-top: 0.7em; /**/
/*  line-height: 1.4em; /**/
/*  text-indent: -0.35em;
/*  padding-left: 0.35em; /**/
/*  padding-right: 0.35em; /**/
/*  padding-bottom: 0.7em; /**/
/*  border-spacing: 0px;        /* ersetzt cellspacing */
/*  border-collapse: collapse;  /* ersetzt cellspacing */
  }
  .formular {
/*  font-size: 1.0rem; /**/
    width: 80%;
    margin-top: 0px;
    margin-left: 0px;
    padding-left: 0px;         /* standard */
    border-spacing: 2px;       /* standard */
/*  border-collapse: separate; /* standard */
  }
@media screen and (max-device-width : 450px) and (orientation:portrait) { 
  .formular {
/*  font-size: 1.0rem; /**/
    width: 98%;
  }
}
  .form_head {
/* font-size: 0px; /**/
/* height: 2px; /**/
   line-height: 0px;
  }
  .form_title {
    font-size: 1.3rem; /**/
    margin-left: 3px;
    padding-top: 0.6em; /**/
/*  line-height: 1.4em; /**/
    padding-bottom: 0.4em; /**/
  }
  .form_desc {
    vertical-align: top;
    width: 20%; /**/
    padding-top: 0.2em;
/*  width: unset; /**/
  }
  .form_comp {
/*  width: 100%; /**/
  }
  .form_plz {
/*  font-size: 1.0rem; /**/
/*  width: 2.5em; /**/
    width: 10%;
    padding-right: 2%; /**/
  }
  .form_plz-pren {
/*  font-size: 1.0rem; /**/
/*  width: 2.5em; /**/
    width: 20%;
  }
  .form_pren {
/*  width: 49.5%; /**/
    width: 30%; /**/
    padding-right: 2%; /**/
  }
@media screen and (max-device-width : 450px) and (orientation:portrait) { 
  .form_plz {
/*  font-size: 1.0rem; /**/
/*  width: 2.5em; /**/
    width: 12%;
/*  padding-right: 2%; /**/
  }
  .form_plz-pren {
/*  width: 10em; /**/
    width: 28%; /**/
  }
  .form_pren {
/*  width: 49.5%; /**/
    width: 40%; /**/
  }
}
  .form_name {
/*  width: 15em; /**/
/*  padding-left: 2%; /**/
  }
  .form_2col {
    width: 35%;
    padding-right: 2%; /**/
  }
  .form_container {
    position: relative;
  }
  .form_imgchecked>input[type=radio]:not(:checked)+label+img 
 ,.form_imgchecked2>input[type=radio]:not(:checked)+label+img {
    display: none;
  }
  .form_imgchecked>input[type=radio]:checked+label+img {
    height: 5em;
    width: auto;
    position: absolute;
    top: 0.9em;
    right: 0.5em;
  }
  .form_imgchecked2>input[type=radio]:checked+label+img {
    height: 10em;
    width: auto;
    position: absolute;
    top: 0.9em;
    right: 1.5em;
  }
@media screen and (max-device-width : 376px) and (orientation:portrait) { 
  .form_imgchecked>input[type=radio]:checked+label+img {
    height: auto;
    width: 4em;
    position: absolute;
    top: 1em;
    right: 0.3em;
  }
  .form_imgchecked2>input[type=radio]:checked+label+img {
    height: auto;
    width: 10em;
    position: absolute;
    top: 0.5em;
    right: 1.3em;
  }
}
  .form_place {
  }
  .form_mail {
  }
  .form_subj {
  }
  .form_text {
  }
  .form_upl {
  }
@media screen and (max-device-width : 450px) and (orientation:portrait) { 
  .__form_upl {
    display: none;
  }
}
  .form_pnum {
    vertical-align: top;
    width: 30%; /**/
    padding-top: 0.5em;
  }
  .form_code {
    font-size: 1.3rem; /**/
    padding-left: 2px;
  }
  .form_num {
    font-family: 'Courier New';
    font-size: 1.2rem;
    font-weight: bold;
    width: 2.7em; /**/
    text-align: center;
  }
  .form_agb {
    padding-left: 2px;
    text-align: left;
  }
  .AnfrButt {
    width: 7em;
/*  padding: 0px 0px 0px 0px; /**/
    margin-left: 5px; /**/
    border-width: 2px;
    vertical-align: bottom;
    text-align: center;
    }
  .NaviButt {
    display: none;
  }
@media screen and (max-device-width : 450px) and (orientation:portrait) { 
  .NaviButt {
    display: block; /**/
    width: 7.5em;
    height: 1.5em;
    text-align: center;
    border-style: solid;
    border-width: 1px;
    padding: 0px;
    margin: 5px; /* 2px 2px 2px; /**/
    border-radius: 3px; /**/
    background-color: lightgrey;
  }
  .NaviButt:link
 ,.NaviButt:focus
 ,.NaviButt:hover {
    font-weight: bold;
    background-color: lightblue;
/*  opacity: 0.5; /**/
  }
}
  .__butt_upl:after {
    content: 'Set Your Text Here'; 
    background-color: lightgrey;
    position: absolute;
    display: block;
    padding: 5px;
    top: 2px;
  }
  textarea
 ,input {
    font-size: 1.0em; /**/
    width: 100%;
    padding: 0px;
  }
  hr {
    height: 3px;
    border: 0px;
    background-color: #0000FF;
  }
  tr
 ,td {
    margin: 0px;
    border: 0px;
    padding: 0px;
    border-width: 0px; /* fallback */
    border-width: var(--border_width); /**/
    border-style: solid; /**/
/*  font-size: 1.0rem; /**/
  }
  a {
    margin: 0px;
    border: 0px;
    padding: 0px;
/*  font-size: 1.0rem; /**/
    border-width: 0px; /* fallback */
    border-width: var(--border_width); /**/
    border-style: solid; /**/
  }
  sup {
    line-height: 0;
    vertical-align: super;
    font-size: x-small;
  }
  .pList {
    width: 90%; /**/
/*  min-width: 28em; /**/
/*  max-width: 28em; /**/
    margin-left: 0px; /**/
/*  margin-right: auto; /**/
/*  font-size: 1.0rem; /**/
  }  
@media screen and (max-device-width : 450px) and (orientation:portrait) { 
  .pList {
    width: 99%; /**/
  }
}
  .pLtop { /* xx-Kunden */
    width: unset; /**/
/*  width: 20.0em; /**/
    text-align: left;
    vertical-align: top;
  }  
  .pLtop1 { /* Speicherplatz */
    width: 10.0em;
    text-align: left;
    vertical-align: top;
  }  
  .pLtop2 { /* Speicherplatz */
    width: 4.0em;
    text-align: right;
    vertical-align: top;
  }  
  .pLtop3 { /* Speicherplatz */
    width: unset; /**/
/*  width: 4.0em; /**/
    text-align: right;
    vertical-align: top;
  }  
  .pLcur {
    width: 3.0em;
    text-align: right;
    vertical-align: top;
  }  
  .pLamo {
    width: 3.5em;
    text-align: right;
    vertical-align: top;
  }  
  .pLper {
    width: 2.0em;
    text-align: left;
    vertical-align: top;
  }  
/*
  textarea {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10pt;
  }
*/
  pre {
    margin: 0px; /* Es empfiehlt sich, margin (Rand) und padding (Auffüllung) des Body-Elements auf 0 einzustellen, um unterschiedlichen Browser-Standardeinstellungen Rechnung zu tragen. */
    padding: 0px;
    font-family: "courier new", courier, monospace;
/*  font-size: 9pt; /**/
    font-size: 0.9rem; /**/
    line-height: 1.14em;
  }
  pre a {
    text-decoration: none;
    color: inherit;
  }
  input {
    font-family: Arial, Helvetica, sans-serif;
/*  font-size: 10pt; /**/
/*  font-size: 1rem; /**/
  }
/*
  .spaceline {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 5pt;
    line-height: 0.7em;
  }
*/
  .recbrowser {
    font-family: Arial, Helvetica, sans-serif;
    font-style: italic;
/*  font-size: 8pt; /**/
    font-size: 0.8rem;
    line-height: 1.1em;
  }
  .rotate-15 {
    -webkit-transform: rotate(-15deg);
    -moz-transform: rotate(-15deg);
    -o-transform: rotate(-15deg);
    -ms-transform: rotate(-15deg);
    transform: rotate(-15deg);
  }
  .rotate15 {
    -webkit-transform: rotate(15deg);
    -moz-transform: rotate(15deg);
    -o-transform: rotate(15deg);
    -ms-transform: rotate(15deg);
    transform: rotate(15deg);
  }
  .foto_left {
    float:left;
    margin:5px 10px 10px 0px;
    border-radius: 15px;
}
  .foto_right {
    float:right;
    margin:5px 0px 10px 10px;
    border-radius: 15px;
  }
  .foto_vcenter {   
    position:relative;
    text-align: center;
  }
  .foto_vcenter img {
    margin: 0px 20px 10px 0px;
    vertical-align: middle;
    max-height: 120px;
    max-width: 440px;
  }
  #map {
    width: 240px;
    height: 200px;
  }
/* technisch versteckter, aber inhaltlich legitimer Content */
  .webOpti
 ,.hidden
 ,[hidden]
 ,.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
/* https://www.tjvantoll.com/2013/01/09/html5-hidden-attribute-browser-support/ */
  .webOpti-old
 ,.hidden-old
 ,[hidden-old] { 
    display: none;
  }
  ul {
    margin: 0px 0px 0px 0px;
    padding-left: 0px;
  }
  li {
    /*display: list-item; /**/
    margin-left: 1.1em;
    padding-left: 0px;
  }
  .footer {
/*  font-size: 1.5rem; /**/
    padding-top: 0.2em; /**/
/*  overflow: hidden; /**/
    line-height: 1.4em; /**/
    padding-bottom: 0.2em; /**/
    margin-bottom: 0.5em;
  }
@media screen and (max-device-width : 450px) and (orientation:portrait) { 
  .footer {
    text-align: center;
  }
}
  .facebook {
    height: 1.4em;
    border-width: 0px;
    border-radius: 25%;
    vertical-align: bottom;
  }
  form.inline {
    display: inline;
  }
/*label a /* IE fix */
/* ,label {
/*  display: inline;
/*  pointer-events: none; /**/
/*} /**/
  .m_label
 ,.marquee {
  }
@media screen and (max-device-width : 450px) and (orientation:portrait) { 
  .m_label {
    width: 15%; /**/
    white-space: nowrap; /**/
    overflow: hidden; /**/
    position: relative; /**/
  }
  .__marquee /**/
 ,.tabsWrapper5>input[type=radio]:not(:checked)+label>span /**/
 ,.tabsWrapper6>input[type=radio]:not(:checked)+label>span {
    display: inline-block; /**/
    position: relative; /**/
/*  animation: marquee var(--time_anim) cubic-bezier(.5,0,.5,1) infinite alternate; /**/
/*  -moz-animation: marquee var(--time_anim) cubic-bezier(.5,0,.5,1) infinite alternate; /**/
/*  -webkit-animation: marquee var(--time_anim) cubic-bezier(.5,0,.5,1) infinite alternate; /**/
    animation: marquee var(--time_anim) linear infinite alternate;
    -moz-animation: marquee var(--time_anim) linear infinite alternate;
    -webkit-animation: marquee var(--time_anim) linear infinite alternate;
  }
  @keyframes marquee {
    from { 
      left: 0%; /**/
    }
    to {
      left: var(--text_anim); /**/
    }
  }
  @-moz-keyframes marquee {
    from { 
      left: 0%; /**/
    }
    to {
      left: var(--text_anim); /**/
    }
  }
  @-webkit-keyframes marquee {
    from { 
      left: 0%; /**/
    }
    to {
      left: var(--text_anim); /**/
    }
  }
  .__marquee_bd /**/
 ,.tabsWrapper5>input[type=radio]:checked+label>span /**/
 ,.tabsWrapper6>input[type=radio]:checked+label>span {
    display: inline-block; /**/
    position: relative; /**/
/*  animation: marquee var(--time_anim) cubic-bezier(.5,0,.5,1) infinite alternate; /**/
/*  -moz-animation: marquee var(--time_anim) cubic-bezier(.5,0,.5,1) infinite alternate; /**/
/*  -webkit-animation: marquee var(--time_anim) cubic-bezier(.5,0,.5,1) infinite alternate; /**/
    animation: marquee_bd var(--time_anim_bd) linear infinite alternate;
    -moz-animation: marquee_bd var(--time_anim_bd) linear infinite alternate;
    -webkit-animation: marquee_bd var(--time_anim_bd) linear infinite alternate;
  }
  @keyframes marquee_bd {
    from { 
      left: 0%; /**/
    }
    to {
      left: var(--text_anim_bd); /**/
    }
  }
  @-moz-keyframes marquee_bd {
    from { 
      left: 0%; /**/
    }
    to {
      left: var(--text_anim_bd); /**/
    }
  }
  @-webkit-keyframes marquee_bd {
    from { 
      left: 0%; /**/
    }
    to {
      left: var(--text_anim_bd); /**/
    }
  }
}
  .NaviTabPoint {
    cursor: pointer; /* hand cursor for clickable (unchecked) tab labels */
  }
  .NaviText>input[type=submit]+label /**/
 ,.NaviText {
    -webkit-appearance: none;
    margin: 0px; /* Es empfiehlt sich, margin (Rand) und padding (Auffüllung) des Body-Elements auf 0 einzustellen, um unterschiedlichen Browser-Standardeinstellungen Rechnung zu tragen. */
    cursor: pointer; /* hand cursor for clickable (unchecked) tab labels */
    background: transparent; /**/
    border-style: none;
  }
  .NaviText:link
 ,.NaviText:focus
 ,.NaviText:hover {
    font-weight: bold;
  }
/* .NaviTab>input[type=submit]:not(:checked)+label /**/
  .NaviTab>input[type=submit]+label /**/
/*,.NaviTab>input[type=submit] /**/
/*,.NaviTab>label /**/ 
 ,.NaviTab {
    -webkit-appearance: none;
/*  -webkit-text-stroke: 0.4px blue; /* fette Darstellung für iPhone +iPad */
/*  text-stroke: unset; /* fette Darstellung für iPhone +iPad */
    /*positon: relative; /**/
    margin: 0; /* Es empfiehlt sich, margin (Rand) und padding (Auffüllung) des Body-Elements auf 0 einzustellen, um unterschiedlichen Browser-Standardeinstellungen Rechnung zu tragen. */
    /* padding: 0 0 0 0; /**/
/*  padding: 5px 20px 5px 2px; /**/
    padding: 0.5em 2.0em 0.5em 0.2em; /**/
    /*padding: 5px; /**/
    cursor: pointer; /* hand cursor for clickable (unchecked) tab labels */
    /*display:block; /* show content for each tab specific target */
    /*display:inline-block; /**/
    /*background-color: rgba(255,255,255,0.25); /**/
    /*background: rgba(255,255,255,0.25); /**/
    /*color: rgba(255,255,255,0.25); /**/
    background: transparent; /**/
    border-style: none;
  }
  .NaviTab:link
 ,.NaviTab:focus
 ,.NaviTab:hover {
  /*text-decoration: underline; /**/
    font-weight: bold;
  }
  .scrollable_x {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
/*  margin: 0 0 1em; /**/
  }
  .scrollable_x::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 14px;
    height: 14px;
  }

  .scrollable_x::-webkit-scrollbar-thumb {
    border-radius: 8px;
    border: 3px solid #fff;
    background-color: rgba(0, 0, 0, .3);
  }
/* https://code.sololearn.com/WHJcalsIWiiZ/#html */
  .tabContent {
    margin: 0px; /* Es empfiehlt sich, margin (Rand) und padding (Auffüllung) des Body-Elements auf 0 einzustellen, um unterschiedlichen Browser-Standardeinstellungen Rechnung zu tragen. */
    padding: 0px;
    /*-moz-box-sizing: border-box; /**/
    /*-webkit-box-sizing: border-box; /**/
    /*box-sizing: border-box; /**/
    /*-moz-user-select: none; /**/
    /*-webkit-user-select: none; /**/
    /*user-select: none; /**/
}
/*.tabsWrapper, /**/
  .tabsWrapper1 /**/
/*,.tabsWrapper2 /**/
/*,.tabsWrapper3 /**/
 ,.tabsWrapper4 /**/
 ,.tabsWrapper5 /**/
 ,.tabsWrapper6 {
    /*-moz-user-select: none; /**/
    /*-webkit-user-select: none; /**/
    /*user-select: none; /**/
  }
  .outterTabs
 ,.innerTabs {
    margin: 0px; /* Es empfiehlt sich, margin (Rand) und padding (Auffüllung) des Body-Elements auf 0 einzustellen, um unterschiedlichen Browser-Standardeinstellungen Rechnung zu tragen. */
/*  padding: 5px 0px 0px 0px; /**/
    padding: 0.5em 0em 0em 0em;
  }
  div.outterTabs {
    padding: 0px;
  }
/*.tabsWrapper>label, /**/
  .tabsWrapper1>label /* https://www.quirksmode.org/css/selectors/ */
/*,.tabsWrapper2>label /**/
/*,.tabsWrapper3>label /**/
 ,.tabsWrapper4>label /**/
 ,.tabsWrapper5>label /**/
 ,.tabsWrapper6>label {
    display: inline-block; /* default 'inline' which produce some overlay */
    /*-moz-user-select: none; /**/
    /*-webkit-user-select: none; /**/
    /*user-select: none; /**/
  }
  .outterTabs>label
 ,.innerTabs>label {
/*  font-size: 1.5em; /**/
/*  margin: 4px 0px 0px 0px; /**/
    margin: 0.4em 0.1em 0em 0em;
/*  padding: 0px 5px; /**/
    padding: 0em 0.35em 0em 0.35em; /**/
/*  line-height: 28px; /**/
    line-height: 2.0em; /**/
    text-align: center;
/*  border-radius: 5px 5px 0px 0px; /**/
    border-radius: 0.5em 0.5em 0em 0em; /**/
    /*-webkit-border-radius: 5px 5px 0 0; /**/
    /*-moz-user-select: none; /**/
    /*-webkit-user-select: none; /**/
    /*user-select: none; /**/
}

/* specific tabs css */

/*
    Use of '>' css operator allows more safe targetting, by select only direct child, instead any child in descendants ^^
*/

/*.tabsWrapper>input[type=radio], /**/
  .tabsWrapper1>input[type=hidden] /**/
 ,.tabsWrapper1>input[type=radio] /**/
/*,.tabsWrapper2>input[type=hidden] /**/
/*,.tabsWrapper2>input[type=radio] /**/
/*,.tabsWrapper3>input[type=hidden] /**/
/*,.tabsWrapper3>input[type=radio] /**/
 ,.tabsWrapper4>input[type=hidden] /**/
 ,.tabsWrapper4>input[type=radio] /**/
 ,.tabsWrapper5>input[type=hidden] /**/
 ,.tabsWrapper5>input[type=radio] /**/
 ,.tabsWrapper6>input[type=hidden] /**/
 ,.tabsWrapper6>input[type=radio] {
    display: none; /* retrieve element from page display */
    -ms-high-contrast: none; /**/
    border-style: solid; /**/
    border-style: solid\9 /* apply to all ie from 8 and below */
    *border-style: solid;  /* apply to ie 7 and below */
    _border-style: solid; /* apply to ie 6 and below */
    .border-style: solid;  /* apply to ie 7 and below */
    border-width: 1px; /**/
    border-width: 1px\9 /* apply to all ie from 8 and below */
    *border-width: 1px;  /* apply to ie 7 and below */
    _border-width: 1px; /* apply to ie 6 and below */
    .border-width: 1px;  /* apply to ie 7 and below */
  }
/*.tabsWrapper>label /**/
  .tabsWrapper1>label /**/
/*,.tabsWrapper2>label /**/
/*,.tabsWrapper3>label /**/
 ,.tabsWrapper4>label /**/
 ,.tabsWrapper5>label /**/
 ,.tabsWrapper6>label {
    white-space: nowrap; /* avoid auto new line inside tab label */
  }
/*.tabsWrapper>input[type=radio]:not(:checked)+label /**/
  .tabsWrapper1>input[type=radio]:not(:checked)+label /**/
/*,.tabsWrapper2>input[type=radio]:not(:checked)+label /**/
/*,.tabsWrapper3>input[type=radio]:not(:checked)+label /**/
 ,.tabsWrapper4>input[type=radio]:not(:checked)+label /**/
 ,.tabsWrapper5>input[type=radio]:not(:checked)+label /**/
 ,.tabsWrapper6>input[type=radio]:not(:checked)+label {
    /*-webkit-appearance__: none; /**/
    cursor: pointer; /* hand cursor for clickable (unchecked) tab labels */
    /*border-style: inset; /**/
    border-style: solid; /**/
    /*-ms-high-contrast: none; /**/
    /*border-style: solid\9 /* apply to all ie from 8 and below */
    /**border-style:solid;  /* apply to ie 7 and below */
    /*_border-style:solid; /* apply to ie 6 and below */
    /*.border-style:solid;  /* apply to ie 7 and below */
    /*border-width: 2px; /**/
    border-width: 1px; /**/
    /*border-width: 1px\9 /* apply to all ie from 8 and below */
    /**border-width:1px;  /* apply to ie 7 and below */
    /*_border-width:1px; /* apply to ie 6 and below */
    /*.border-width:1px;  /* apply to ie 7 and below */
    border-top-color:    #000; /**/
    border-left-color:   #000; /**/
    border-right-color:  #fff; /**/
    border-bottom-color: #fff; /**/
    /*-webkit-box-shadow: 0px 0px 0px 1px #aaa; /**/
    /*-ms-box-shadow:     0px 0px 0px 1px #aaa; /**/
    /*box-shadow:         0px 0px 0px 1px #aaa; /*#383e46; /**/
  }
/*.tabsWrapper>input[type=radio]:checked+label /**/
  .tabsWrapper1>input[type=radio]:checked+label /**/
/*,.tabsWrapper2>input[type=radio]:checked+label /**/
/*,.tabsWrapper3>input[type=radio]:checked+label /**/
 ,.tabsWrapper4>input[type=radio]:checked+label /**/
 ,.tabsWrapper5>input[type=radio]:checked+label /**/
 ,.tabsWrapper6>input[type=radio]:checked+label {
    /*-webkit-appearance__: none; /**/
    background-color: rgba(255,255,255,0.8);
    /*-ms-high-contrast: none; /**/
    /*border-style: outset; /**/
    border-style: solid; /**/
    /**border-style:solid;  /* apply to ie 7 and below */
    /*_border-style:solid; /* apply to ie 6 and below */
    /*.border-style:solid;  /* apply to ie 7 and below */
    /*border-width: 2px; /**/
    border-width: 1px; /**/
    /*border-width: 1px\9 /* apply to all ie from 8 and below */
    /**border-width:1px;  /* apply to ie 7 and below */
    /*_border-width:1px; /* apply to ie 6 and below */
    /*.border-width:1px;  /* apply to ie 7 and below */
    border-top-color:    #777; /**/
    border-left-color:   #777; /**/
    border-right-color:  #000; /**/
    /*border-right-color:  #777; /**/
    border-bottom-color: transparent; /**/
/*  opacity: .90; /* Standard: FF gt 1.5, Opera, Safari, CSS3 */
/*  filter: alpha(opacity=90); /* IE lt 8 */
/*  -ms-filter: "alpha(opacity=90)"; /* IE 8 */
/*  -khtml-opacity: .90; /* Safari 1.x */
/*  -moz-opacity: .90; /* FF lt 1.5, Netscape */
    font-weight: bold;
    /*-webkit-box-shadow: 0px 1px 0px 0px #aaa; /**/
    /*-ms-box-shadow:     0px 1px 0px 0px #aaa; /**/
    /*box-shadow:         0px 1px 0px 0px #aaa; /*#383e46; /**/
    /*-moz-user-select: none; /**/
    /*-webkit-user-select: none; /**/
    /*user-select: none; /**/
  }
/*.tabsWrapper>input[type=hidden]+label /**/
  .tabsWrapper1>input[type=hidden]+label /**/
/*,.tabsWrapper2>input[type=hidden]+label /**/
/*,.tabsWrapper3>input[type=hidden]+label /**/
 ,.tabsWrapper4>input[type=hidden]+label /**/
 ,.tabsWrapper5>input[type=hidden]+label /**/
 ,.tabsWrapper6>input[type=hidden]+label {
    display: none; /* default hide contents */
  }
/*.tabsWrapper>.tabContent /**/
  .tabsWrapper1>.tabContent /**/
/*,.tabsWrapper2>.tabContent /**/
/*,.tabsWrapper3>.tabContent /**/
 ,.tabsWrapper4>.tabContent /**/
 ,.tabsWrapper5>.tabContent /**/
 ,.tabsWrapper6>.tabContent {
    display: none; /* default hide contents */
  }
/* .tabsWrapper>input[type=radio]:checked+label+input+label+input+label+.tabContent /* 1.Element 3x3-Menu */
/*,.tabsWrapper>input[type=radio]:checked+label+input+label+.tabContent+.tabContent /* 2.Element 3x3-Menu */
/*,.tabsWrapper>input[type=radio]:checked+label+.tabContent+.tabContent+.tabContent /* 3.Element 3x3-Menu */
  .tabsWrapper1>input[type=radio]:checked+label+input+label+input+label+input+label+.tabContent /* 1.Element 4x4-Menu */
 ,.tabsWrapper1>input[type=radio]:checked+label+input+label+input+label+.tabContent+.tabContent /* 2.Element 4x4-Menu */
 ,.tabsWrapper1>input[type=radio]:checked+label+input+label+.tabContent+.tabContent+.tabContent /* 3.Element 4x4-Menu */
 ,.tabsWrapper1>input[type=radio]:checked+label+.tabContent+.tabContent+.tabContent+.tabContent /* 4.Element 4x4-Menu */ 
/* .tabsWrapper2>input[type=radio]:checked+label+input+label+.tabContent /* 1.Element 2x2-Menu */
/*,.tabsWrapper2>input[type=radio]:checked+label+.tabContent+.tabContent /* 2.Element 2x2-Menu */
/*,.tabsWrapper3>input[type=radio]:checked+label+input+label+input+label+.tabContent /* 1.Element 3x3-Menu */
/*,.tabsWrapper3>input[type=radio]:checked+label+input+label+.tabContent+.tabContent /* 2.Element 3x3-Menu */
/*,.tabsWrapper3>input[type=radio]:checked+label+.tabContent+.tabContent+.tabContent /* 3.Element 3x3-Menu */
 ,.tabsWrapper4>input[type=radio]:checked+label+input+label+input+label+input+label+.tabContent /* 1.Element 4x4-Menu */
 ,.tabsWrapper4>input[type=radio]:checked+label+input+label+input+label+.tabContent+.tabContent /* 2.Element 4x4-Menu */
 ,.tabsWrapper4>input[type=radio]:checked+label+input+label+.tabContent+.tabContent+.tabContent /* 3.Element 4x4-Menu */
 ,.tabsWrapper4>input[type=radio]:checked+label+.tabContent+.tabContent+.tabContent+.tabContent /* 4.Element 4x4-Menu */
 ,.tabsWrapper5>input[type=radio]:checked+label+input+label+input+label+input+label+input+label+.tabContent /* 1.Element 5x5-Menu */
 ,.tabsWrapper5>input[type=radio]:checked+label+input+label+input+label+input+label+.tabContent+.tabContent /* 2.Element 5x5-Menu */
 ,.tabsWrapper5>input[type=radio]:checked+label+input+label+input+label+.tabContent+.tabContent+.tabContent /* 3.Element 5x5-Menu */
 ,.tabsWrapper5>input[type=radio]:checked+label+input+label+.tabContent+.tabContent+.tabContent+.tabContent /* 4.Element 5x5-Menu */ 
 ,.tabsWrapper5>input[type=radio]:checked+label+.tabContent+.tabContent+.tabContent+.tabContent+.tabContent /* 5.Element 5x5-Menu */ 
 ,.tabsWrapper6>input[type=radio]:checked+label+input+label+input+label+input+label+input+label+input+label+.tabContent /* 1.Element 6x6-Menu */
 ,.tabsWrapper6>input[type=radio]:checked+label+input+label+input+label+input+label+input+label+.tabContent+.tabContent /* 2.Element 6x6-Menu */
 ,.tabsWrapper6>input[type=radio]:checked+label+input+label+input+label+input+label+.tabContent+.tabContent+.tabContent /* 3.Element 6x6-Menu */
 ,.tabsWrapper6>input[type=radio]:checked+label+input+label+input+label+.tabContent+.tabContent+.tabContent+.tabContent /* 4.Element 6x6-Menu */ 
 ,.tabsWrapper6>input[type=radio]:checked+label+input+label+.tabContent+.tabContent+.tabContent+.tabContent+.tabContent /* 5.Element 6x6-Menu */ 
 ,.tabsWrapper6>input[type=radio]:checked+label+.tabContent+.tabContent+.tabContent+.tabContent+.tabContent+.tabContent /* 6.Element 6x6-Menu */ 
  {
    display: block; /* show content for each tab specific target */
  }

/*
    Used only in the last inner tabs group, for example purpose of more generic rules handling differents count of tabs in different groups without too much weighing the Html source code to keep it better readable/understandable...
    
    Html used as kind of ('wraptabs' class not used, but 'tansWrapper' one, for keeping global styling rules of others tabs groups in this running tuorial):
    
    <div class="wraptabs wrap2tabs">
        <input type="radio" id="cmdTab0" name="commandTab"> 
        <label for="cmdTab0">item 0</label>
        <input type="radio" id="cmdTab1" name="commandTab"> 
        <label for="cmdTab1">item 0</label>
        <div class="tabContent">
    </div>
*/

  .wraptabs>.tabContent 
 ,.wraptabs>input[type=radio] {
    display: none; /* default hide contents and radio elements */
  }
  .wraptabs>label {
    white-space: nowrap; /* avoid auto new line inside tab label */
  }
  .wraptabs:not(:checked)+label {
    cursor: pointer; /* hand cursor for clickable (unchecked) tab labels */
  }
  .wrap2tabs>input[type=radio]:checked+label+input+label+.tabContent
 ,.wrap2tabs>input[type=radio]:checked+label+.tabContent+.tabContent
 ,.wrap3tabs>input[type=radio]:checked+label+input+label+input+label+.tabContent
 ,.wrap3tabs>input[type=radio]:checked+label+input+label+.tabContent+.tabContent
 ,.wrap3tabs>input[type=radio]:checked+label+.tabContent+.tabContent+.tabContent
 ,.wrap4tabs>input[type=radio]:checked+label+input+label+input+label+input+label+.tabContent
 ,.wrap4tabs>input[type=radio]:checked+label+input+label+input+label+.tabContent+.tabContent
 ,.wrap4tabs>input[type=radio]:checked+label+input+label+.tabContent+.tabContent+.tabContent
 ,.wrap4tabs>input[type=radio]:checked+label+.tabContent+.tabContent+.tabContent+.tabContent {
    display: block; /* show content for each tab specific target */
  }