@charset "utf-8";
@import url('https://fonts.googleapis.com/css?family=Open+Sans');
html, body {background-color:#232835;width:100%;height:100%;margin:0;padding:0;overflow:auto;font-family: 'Open Sans', sans-serif;}
@font-face {
  font-family: 'Open Sans', sans-serif;
  font-display: fallback;
}

/* ANIMATIONEN */

@keyframes errorfeld {
    0%   {background-color: #7d9da4;}
    50%  {background-color: #e57147;}
    100% {background-color: #7d9da4;}
}
@keyframes momenubgcol {
    0%   {background-color: #4D535E;}
    50%  {background-color: #232835;}
    100% {background-color: #4D535E;}
}
input.login                {-webkit-transition: width 0.4s, background-color 0.4s ease-in-out;transition: width 0.4s, background-color 0.4s ease-in-out;}
input.loginerror           {background-color:red;animation-name: errorfeld;animation-duration: 4s;animation-iteration-count: infinite;-webkit-transition: width 0.4s, background-color 0.4s ease-in-out;transition: width 0.4s, background-color 0.4s ease-in-out;}
input.submitbutton          {-webkit-transition: background-color 0.2s, color 0.2s ease-in-out;transition: background-color 0.2s, color 0.2s ease-in-out;}
img#navigrow-uebersicht, img#navigrow-standorte, img#navigrow-terrarien, img#navigrow-tiere,
img#navigrow-klima, img#navigrow-pflege, img#navigrow-geraete, img#navigrow-konfiguration,
img#navigrow-konto         {-webkit-transition: width 0.4s ease-in-out;transition: width 0.4s ease-in-out;}
#mobilmenu-bg              {animation-name: momenubgcol; animation-duration:20s; animation-iteration-count:infinite;}

/* GLOBAL */
a img { border:0px; }
p     { margin:0px; }

#preloader, #mobilmenu, #mobilmenu-bg, #momenu_shad, .info_konto_dropdown {display:none;}
#bigframe {scrollbar-base-color:#7d9da4;scrollbar-face-color:#7d9da4;scrollbar-3dlight-color:#beced1;scrollbar-highlight-color:#beced1;scrollbar-track-color:#87aab2;scrollbar-arrow-color:#4D535E;scrollbar-shadow-color:#4D535E;scrollbar-dark-shadow-color:#4D535E;}
#bigframe::-webkit-scrollbar-thumb, #bigframe::-webkit-scrollbar-button            {border: 1px solid #4D535E;}
#bigframe::-webkit-scrollbar, #bigframe::-webkit-scrollbar-thumb,
#bigframe::-webkit-scrollbar-button, #bigframe::-webkit-scrollbar-track            {background-color:#7d9da4;}
#bigframe::-webkit-scrollbar-track-piece                                           {background-color:#87aab2;}
#pageframe, #descframe, #loginframe, #info_statusbox, #loginbody,
.modulbox_standard, .modulbox_sub, .modulbox_subsub                                {background-color:#ffffff;}
#mobilmenu-bg                                                                      {background-color: #4D535E;}
#navimobil, #infobox, input.submitbutton                                            {background-color:#232835;}
#naviframe, input.login:focus, input.loginerror:focus, input.submitbutton:hover     {background-color:#beced1;}
#headframe, #bodyframe, #bigframe, input.login, input.submitbutton:active, .info_konto_dropdown {background-color:#7d9da4;}
#page_shad, #momenu_shad                    {background-image:url(../images/page_shadow.png);background-image:url(../images/page_shadow.svg), linear-gradient(transparent, transparent);background-size:cover;}
#naviframe                                  {background-image:url(../images/navi_bg.png);background-image:url(../images/navi_bg.svg), linear-gradient(transparent, transparent);background-size:cover;}
div.navi-topshadow                          {background-image:url(../images/navi_topshadow.png);background-image:url(../images/navi_topshadow.svg), linear-gradient(transparent, transparent);}
div.navi-bottomshadow                       {background-image:url(../images/navi_bottomshadow.png);background-image:url(../images/navi_bottomshadow.svg), linear-gradient(transparent, transparent);}
div.navibutton                              {background-image:url(../images/navi_shrink.png);background-image:url(../images/navi_shrink.svg), linear-gradient(transparent, transparent);}
div#modulbox_overview                       {background-image:url(../images/graphic_manager_thumbup.png);background-image:url(../images/graphic_manager_thumbup.svg), linear-gradient(transparent, transparent);}
div.navi-topshadow, div.navi-bottomshadow   {background-repeat:no-repeat;background-size:contain;}
#infobox, #headframe, .info_konto_container {background-repeat:no-repeat;background-position:center;}
div#modulbox_overview                       {background-repeat:no-repeat;background-position:right;background-size:auto 80%;}
#mainframe, #momenuframe                                    {margin-left:auto;margin-right:auto;}
#headframe, #header_video_cont, #mobilmenu-bg               {overflow:hidden;}
#bigframe, #descframe, #mobilmenu                           {overflow:auto;}
#headframe, .info_konto_container                           {position:relative;}
#header_logo_cont, #header_video_cont, .info_konto_dropdown {position:absolute;}
#page_shad, #momenu_shad, #mobilmenu, #mobilmenu-bg         {position: fixed;}
#momenu_shad                            {z-index: 199;}
#mobilmenu                              {z-index: 101;}
#mobilmenu-bg                           {z-index: 100;}
#page_shad                              {z-index: 99;}
#header_logo_cont, .info_konto_dropdown {z-index: 1;}
#header_video_cont                      {z-index: 0;}
.info_konto_container                                                                         {display:inline-block;}
.info_konto_container:hover .info_konto_dropdown, img.symbol-status-mobil,
#omenumobil:hover #mobilmenu, #omenumobil:hover #mobilmenu-bg, #omenumobil:hover #momenu_shad {display:block;}
.infolampe_mobil                                                                              {display:flex;}
.navileft, .navicent, #omenumobil, #stmomenu {float:left;}
#naviframe, .navirigh, #infomobil, #netmobil                                                                       {float:right;}
#headframe, #bodyframe, #page_shad, #momenu_shad, #mobilmenu, img#menu-mobil-bgimg, img.menu-mobil-button,
#navimobil, #bigframe, div.navibutton, #loginbody                                                                 {width:100%;}
img#menu-mobil-bgimg, #loginbody                                                                                  {height:100%;}
#header_logo, #navimobil, #infobox, input.login, input.login:focus, input.loginerror, input.loginerror:focus      {text-align:center;}
#loginframe, #naviframe                                                                                           {text-align:right;}
#info_statusbox, .info_konto_dropdown                                                                             {text-align:left;}
#infobox, #info_statusbox, .info_konto_dropdown     {box-sizing:border-box;border-style:solid;border-width:1px;}
img#symbol-infobox-user, img.info-button            {box-shadow: 0 0 0.4em #ffffff, 0 0 0.4em #ffffff;}
img.info-button:hover, img#symbol-infobox-user:hover {box-shadow: 0 0 0.4em #ffffff, 0 0 0.4em #ffffff, 0 0 0.4em #ffffff;}
a.info, .info_konto, h1.descripto                   {text-shadow: 0 0 0.4em #ffffff, 0 0 0.4em #ffffff, 0 0 0.4em #ffffff;}
.textwolke, a.info_konto:hover                       {text-shadow: 0 0 0.7em #ffffff, 0 0 0.6em #ffffff, 0 0 0.5em #ffffff, 0 0 0.4em #ffffff, 0 0 0.3em #ffffff, 0 0 0.2em #ffffff, 0 0 0.1em #ffffff, 0 0 0.1em #ffffff;}
.modulbox_standard, .modulbox_sub, .modulbox_subsub {box-sizing:border-box;width:94%;margin:3px auto 3px auto;}
.modulbox_standard, .modulbox_sub                   {border-width:2px;}
.modulbox_subsub                                    {border-width:1px;}
.modulbox_standard, .modulbox_subsub                {border-style:solid;}
.modulbox_sub                                       {border-style:dotted;}
input.login, input.login:focus, input.loginerror,
input.loginerror:focus, input.submitbutton,
input.submitbutton:hover, input.submitbutton:active   {border:none;}
a.info, a.statusinfo, a.info_konto                  {font-weight:bold;}
a.info, a.statusinfo, a.info_konto, input.submitbutton {text-decoration:none;}
input.submitbutton, input.submitbutton:active {color:#beced1;}
a.info_konto:active, a.info_konto:hover, a.info:hover, a.info:active, a.statusinfo:hover, a.statusinfo:active {color:#232835;}
input.submitbutton:hover {color:#232835;}
a.info_konto:link, a.info_konto:visited, a.info:link, a.info:visited, a.statusinfo:link, a.statusinfo:visited {color:#000000;}
input.submitbutton, input.submitbutton:hover, input.submitbutton:active {cursor:pointer;}
img#symbol-konto-dropdown-logout:hover {content:url(../images/symbol_konto_logout_h.svg);}
img#symbol-konto-dropdown-setup:hover  {content:url(../images/symbol_konto_setup_h.svg);}

/* MEDIA QUERIES */

/* Standard Bildschirme */
@media only screen and ( min-width: 950px ) {
#mainframe {width:700px;height:calc(100% - 8px);min-height:650px;margin-top:4px;margin-bottom:4px;}
#headframe {height:135px;background-size:680px;}
#header_video, #header_logo, #header_video_cont {width:700px;height:135px;}
#header_video {object-fit: fill;}
#bodyframe {height:calc(100% - 138px);}
#pageframe {width:506px;height:100%;float:left;margin-left:14px;}
#naviframe {width:166px;height:100%;margin-right:14px;}
#navimobil, #page_shad, #momenu_shad {display:none;}
#bigframe  {height:100%;}
#descframe {width:100%;height:221px;}
.textmodulbox {padding: 0 8px;}
#infobox {width:166px;height:190px;}
#info_statusbox {width:120px;height:60px;}
.info_konto_dropdown {width:90px;height:46px;}
#info_statusbox      {padding:5px;margin-left:23px;}
h1.descripto {font-size:1.2em;}
.descripto {padding-right:5px;margin:0px;font-size:0.9em;}
a.info:link, a.info:visited, a.info:hover, a.info:active, .info_konto:link, .info_konto:visited, .info_konto:hover, .info_konto:active, p.info {font-size:0.7em;}
a.statusinfo:link, a.statusinfo:visited, a.statusinfo:hover, a.statusinfo:active {font-size:1em;}
img#symbol-infobox-user {width:15px;height:15px;}
img.symbol-statusbox {width:12px;height:12px;}
img#banner-info-status {width:164px;height:43px;}
img.info-button, img.symbol-konto-dropdown {width:44px;height:44px;}
img.navishadow {width:2px;height:30px;}
div.navibutton {height:30px;background-size:contain;}
div.navi-topshadow, div.navi-bottomshadow {width:166px; height:30px;}
img#navigator-uebersicht, img#navigator-standorte, img#navigator-terrarien, img#navigator-tiere, img#navigator-klima, img#navigator-pflege, img#navigator-geraete, img#navigator-konfiguration, img#navigator-konto {width:135px;height:30px;}
img#navigrow-uebersicht, img#navigrow-standorte, img#navigrow-terrarien, img#navigrow-tiere, img#navigrow-klima, img#navigrow-pflege, img#navigrow-geraete, img#navigrow-konfiguration, img#navigrow-konto {width:8px;height:30px;}
img#navigator-uebersicht:hover + img#navigrow-uebersicht, img#navigator-standorte:hover + img#navigrow-standorte, img#navigator-terrarien:hover + img#navigrow-terrarien, img#navigator-tiere:hover + img#navigrow-tiere, img#navigator-klima:hover + img#navigrow-klima, img#navigator-pflege:hover + img#navigrow-pflege, img#navigator-geraete:hover + img#navigrow-geraete, img#navigator-konfiguration:hover + img#navigrow-konfiguration, img#navigator-konto:hover + img#navigrow-konto {width:18px;}
input.login, input.loginerror             {font-size:1.2em;margin: 4px 0;width: 100px;}
input.login:focus, input.loginerror:focus {font-size:1.2em;margin: 4px 0;width: 120px;}
input#loginbutton, input#loginbutton:hover, input#loginbutton:active {font-size:1.1em;margin: 4px 0;width:100px;height:40px;}
input#swbutton, input#swbutton:hover, input#swbutton:active          {font-size:1.1em;margin: 4px 0;width:200px;height:40px;}
#loginframe         {width:400px;height:135px;font-size:1.2em;padding-right:5px;padding-top:10px;}
}

/* Tablets und mittlere Bildschirme */
@media only screen and ( min-width: 440px ) and ( max-width: 950px ) {
#mainframe {width:440px;height:calc(100% - 8px);min-height:440px;margin-top:4px;margin-bottom:4px;}
#headframe {height:90px;background-size:430px;}
#header_video, #header_logo, #header_video_cont {width:440px;height:90px;}
#header_video {object-fit: fill;}
#bodyframe {height:calc(100% - 93px);}
#pageframe {width:320px;height:100%;float:left;margin-left:10px;}
#naviframe {width:100px;height:100%;margin-right:10px;}
#navimobil, #page_shad, #momenu_shad {display:none;}
#bigframe  {height:100%;}
#descframe {width:100%;height:133px;}
.textmodulbox {padding: 0 6px;}
#infobox   {width:100px;height:130px;}
#info_statusbox      {width:80px;height:40px;}
.info_konto_dropdown {width:54px;height:28px;}
#info_statusbox      {padding:3px;margin-left:10px;}
h1.descripto {font-size:0.9em;}
.descripto {padding-right:5px;margin:0px;font-size:0.6em;}
a.info:link, a.info:visited, a.info:hover, a.info:active, .info_konto:link, .info_konto:visited, .info_konto:hover, .info_konto:active, p.info {font-size:0.4em;}
a.statusinfo:link, a.statusinfo:visited, a.statusinfo:hover, a.statusinfo:active {font-size:1em;}
img#symbol-infobox-user {width:10px;height:10px;}
img.symbol-statusbox {width:8px;height:8px;}
img#banner-info-status {width:98px;height:26px;}
img.info-button, img.symbol-konto-dropdown {width:26px;height:26px;}
img.navishadow {width:2px;height:18px;}
div.navibutton {height:18px;background-size:contain;}
div.navi-topshadow, div.navi-bottomshadow {width:100px; height:18px;}
img#navigator-uebersicht, img#navigator-standorte, img#navigator-terrarien, img#navigator-tiere, img#navigator-klima, img#navigator-pflege, img#navigator-geraete, img#navigator-konfiguration, img#navigator-konto {width:81px;height:18px;}
img#navigrow-uebersicht, img#navigrow-standorte, img#navigrow-terrarien, img#navigrow-tiere, img#navigrow-klima, img#navigrow-pflege, img#navigrow-geraete, img#navigrow-konfiguration, img#navigrow-konto {width:5px;height:18px;}
img#navigator-uebersicht:hover + img#navigrow-uebersicht, img#navigator-standorte:hover + img#navigrow-standorte, img#navigator-terrarien:hover + img#navigrow-terrarien, img#navigator-tiere:hover + img#navigrow-tiere, img#navigator-klima:hover + img#navigrow-klima, img#navigator-pflege:hover + img#navigrow-pflege, img#navigator-geraete:hover + img#navigrow-geraete, img#navigator-konfiguration:hover + img#navigrow-konfiguration, img#navigator-konto:hover + img#navigrow-konto {width:11px;}
input.login, input.loginerror             {font-size:1em;margin: 3px 0;width: 65px;}
input.login:focus, input.loginerror:focus {font-size:1em;margin: 3px 0;width: 80px;}
input#loginbutton, input#loginbutton:hover, input#loginbutton:active {font-size:0.9em;margin: 4px 0;width:65px;height:25px;}
input#swbutton, input#swbutton:hover, input#swbutton:active          {font-size:0.9em;margin: 4px 0;width:120px;height:25px;}
#loginframe         {width:250px;height:70px;font-size:1em;padding-right:5px;padding-top:10px;}
}

/* Moderne Smartphones etc */
@media only screen and ( min-width: 320px ) and ( max-width: 440px ) {
#mainframe {width:100%;height:100%;}
#headframe {background-color:#232835;}
#headframe, #header_logo, #header_logo_cont, #header_video_cont {width:100%;height:70px;}
#header_video                               {min-height:70px;width:100%;object-fit: fill;}
#bodyframe, #mobilmenu, #mobilmenu-bg {height:calc(100% - 70px);}
#pageframe {height:calc(100% - 50px);}
#pageframe {width:100%;}
#naviframe {display:none;}
#navimobil, #omenumobil, img#symbol-mobil-menu, #infomobil, #netmobil, #stmomenu, img#style-mobil-menu, .navileft, .navicent, .navirigh {height:50px;}
#omenumobil, img#symbol-mobil-menu {width:40px;}
#infomobil, #netmobil              {width:120px;}
#stmomenu, img#style-mobil-menu    {width:25px;}
.navileft, .navicent, .navirigh    {width:40px;}
img.symbol-status-mobil {height:40px;width:40px;}
img.symbol-status-mobgen {height:10px;width:40px;}
.infolampe_mobil  {height:10px;width:40px;}
#page_shad, #momenu_shad, #mobilmenu, #mobilmenu-bg {top:120px;}
#page_shad, #momenu_shad                            {height:14px;}
#momenuframe {margin:10px 50px 0;width:auto;padding:0 0 75px 0;}
.textmodulbox {padding: 0 3px;}
#bigframe  {height:100%;}
#descframe {width:100%;height:240px;}
#infobox {background-image:none;}
h1.descripto {font-size:1em;}
.descripto {padding-top:2px;padding-left:5px;padding-right:5px;margin:0px;font-size:0.8em;}
input.login, input.loginerror       {font-size:1em;margin: 4px 0;width: 50%;}
input.login:focus, input.loginerror:focus {font-size:1em;margin: 4px 0;width: 55%;}
input#loginbutton, input#loginbutton:hover, input#loginbutton:active {font-size:1em;margin: 4px 0;width:50%;height:40px;}
input#swbutton, input#swbutton:hover, input#swbutton:active          {font-size:1em;margin: 4px 0;width:90%;height:40px;}
#loginframe   {width:68%;height:135px;font-size:1em;padding-top:10px;}
}

/* Kleine Smartphones etc */
@media only screen and ( max-width: 320px ) {
#mainframe {width:100%;height:100%;}
#headframe {background-color:#232835;}
#headframe, #header_logo, #header_logo_cont, #header_video_cont {width:100%;height:70px;top:0;}
#header_video                   {min-height:70px;width:100%;object-fit: fill;}
#bodyframe, #mobilmenu, #mobilmenu-bg {height:calc(100% - 70px);}
#pageframe {height:calc(100% - 31px);}
#pageframe {width:100%;}
#naviframe {display:none;}
#navimobil, #omenumobil, img#symbol-mobil-menu, #infomobil, #netmobil, #stmomenu, img#style-mobil-menu, .navileft, .navicent, .navirigh {height:31px;}
#omenumobil, img#symbol-mobil-menu {width:25px;}
#infomobil, #netmobil              {width:75px;}
#stmomenu, img#style-mobil-menu    {width:16px;}
.navileft, .navicent, .navirigh    {width:25px;}
img.symbol-status-mobil {height:25px;width:25px;}
img.symbol-status-mobgen {height:6px;width:25px;}
.infolampe_mobil  {height:6px;width:25px;}
#page_shad, #momenu_shad, #mobilmenu, #mobilmenu-bg {top:101px;}
#page_shad, #momenu_shad                            {height:10px;}
#momenuframe {margin:8px 40px 0;width:auto;padding:0 0 75px 0;}
.textmodulbox {padding: 0 3px;}
#bigframe  {height:100%;}
#descframe {width:100%;height:120px;}
#infobox {background-image:none;}
h1.descripto {font-size:0.8em;}
.descripto {padding-top:2px;padding-left:5px;padding-right:5px;margin:0px;font-size:0.6em;}
input.login, input.loginerror {font-size:1em;margin: 4px 0;width: 50%;}
input.login:focus, input.loginerror:focus {font-size:1em;margin: 4px 0;width: 55%;}
input#loginbutton, input#loginbutton:hover, input#loginbutton:active {font-size:1em;margin: 4px 0;width:50%;height:40px;}
input#swbutton, input#swbutton:hover, input#swbutton:active          {font-size:1em;margin: 4px 0;width:90%;height:40px;}
#loginframe   {width:68%;height:135px;font-size:1em;padding-top:5px;}
}