*{font-family:'Montserrat',helvetica,arial;font-size:14px;}

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

a{color:#FF0000;}
body
{
    max-height:100vh;
    overflow-y:hidden;
    zoom:79%;
}
/* ohne Zoom: */
/* #gebaeude_mit_tabs{float:left;width:calc(100% - 770px);height:1000px;} */
/* mit Zoom: */
#gebaeude_mit_tabs{float:left;width:calc(100% - 760px);}
#malert_innen{zoom:140%;max-width:60%;}

#fat_fbf_kombi
{
    float:left;
    width:500px;
    margin-left:210px;
    margin-right:17px;
}

.block{float:left;border:1px solid black;padding:0px;box-sizing:border-box;}

/* Lampen */
.lampe{border-radius:50%;width:20px;height:20px;display:inline-block;background-color:#ddd;}
/* .lampe_besch{margin:-16 0 20 25;border:1px solid white;} */
.lampe_besch{margin-left:10px;border:0px solid white;}
.lampe_mit_besch{display:flex;align-items: center;width:100%;}

.l{float:left;}
.r{float:right;}
.c{clear:both;}

/* Gebäude-Plan */
.area,#lautsprecher_ebene,#ventilator_ebene,#aufzug_ebene,.beschriftung_ebene{width:100%;max-width:850px;z-index:1;position:absolute;display:none;}
.area{mix-blend-mode:multiply;}
#lautsprecher_ebene,#ventilator_ebene,#aufzug_ebene,.beschriftung_ebene{z-index:3;display:block;}
.beschriftung_ebene{z-index:4;}
/* .nochnicht{max-width:100px !important;} */

#gebaeude
{
    background-color:white;
    width:100%;
    max-width:1097px;
    position:relative;
    z-index:0;
    /* max-width:850px; */
}
    
/* #gebaeude,.area{height:90%;} */

/* FAT */
#fat_block{margin-bottom:20px;margin-right:20px;}
.fatfbf{position:relative;border:20px solid #FF0000;background-color:#000;width:473px;box-sizing:border-box;}
.fatfbf *{font-family:helvetica,arial;color:#fff;}
.fatfbf h1{font-size:25px !important;transform: scale(1, 1.5);text-align:center;line-height:40px;font-weight:100;padding:10px;white-space:nowrap;}
.fatfbf td{border:3px solid #fff;padding:15px;}
.fatfbf .tab_unten td{padding:10px;}

.fatfbf table{width:100%;border-collapse:collapse;}
.fatfbf table.noborder td{border:0px;padding-top:0px;}
.fatfbf .pfeil{font-size:50px;display:block;float:left;margin-top:5px;margin-right:15px;cursor:pointer;}
.fatfbf .pfeil i{font-size:45px;}
.fatfbf #display{background-color:#D6D6D6;margin-top:5px;padding:5px;width:230px;height:110px;}
.fatfbf #display.hell{background-color:#EEEEEE !important;}

.fatfbf .display_meldung,.fatfbf .display_meldung span{font-family:courier,helvetica,arial;color:#141519;font-size:16px;border:0px solid red;line-height:25px;height:53px;}
.fatfbf #display_funktionstest{font-family:courier,helvetica,arial;color:#141519;font-size:16px;border:0px solid red;width:225px;height:110px;overflow:hidden;word-break: break-all;}
/* .display_meldung{border:1px solid green !important;} */
#keep_alive_strich{color:#000;margin-top:20px;}
#keep_alive_space{color:#000;margin-top:-15px;margin-bottom:0px;}

.fatfbf .knopf{width:70px;height:70px;background-color:#fff;cursor:pointer;}
.fatfbf .hochrunter{display:block;float:left;}
#fbf h1{margin:41 0 41 0;}
#weisses_schild{width:80px;background-color:white;height:20px;}

/* neue Navi */
.bedienfeld{z-index:10;position:absolute;display:inline-block;left:0px;border:0px solid black;}
.bf_zu{transform: translateX(calc( -100% + 85px));}
.bf_auf{transform: translateX(0px);}
#bf_simulation{top:8px;}
#bf_neustart{top:118px;}
#bf_bmz{top:228px;}
#bf_hilfe{top:328px;}

#bf_simulation_inner,#bf_simulation > .menubuttons{padding:10px;border:1px solid #FE0000;background-color:#DD7677;}
.menubuttons{margin-left:0px;border-left:0px solid red;}
#bf_simulation h2{color:#860101;}
#bf_neustart_inner,#bf_neustart > .menubuttons{padding:10px;border:1px solid #2CB066;background-color:#B4C7AD;}
/* #bf_neustart_inner{padding:10px;border:3px solid transparent;} */
#bf_bmz_inner,#bf_bmz > .menubuttons{padding:10px;border:1px solid #17375E;background-color:#878FA2;}
#bf_bmz h2{color:#17375E;}

#tablinks{display:inline-block;width:100%;}
.tablinks{background-color:#aaaaaa;color:white;float:left;display:inline;cursor:pointer;height:12px;top:4px;}
/* .tablinks{cursor: url(images/logo-cursor.png) 0 0, pointer;} */
.tablinks_aktiv{height:18px !important;top:2px;background-color:#dddddd;color:black;border-color:#FF3F00 !important;font-weight:bold;}
.rot{background-color:rgb(255,0,0) !important;box-shadow: 1px 1px 15px 10px rgba(255,0,0,0.5) !important;}
.gruen{background-color:rgb(0,255,0) !important;box-shadow: 1px 1px 15px 10px rgba(0,255,0,0.5) !important;}
.gelb{background-color:rgb(255,255,0) !important;box-shadow: 1px 1px 15px 10px rgba(255,255,0,0.5) !important;}
.weissgelb{background-color:white !important;}

.quadrat{width:15px;height:15px;float:left;display:inline-block;}
.dunkel{background-color:#000000;}

#infofeld{position:absolute;width:calc(100% - 60px);top:20px;left:20px;background-color:rgba(0, 200, 0, 1);z-index:100;color:white;padding:10px;text-align: justify;}

#infofeld.fade {
    opacity: 0;
    -webkit-transition: opacity 1000ms linear;
    transition: opacity 1000ms linear;
}

.lautsprecher,#lautsprecher_abschaltung{position:absolute;z-index:3;width:40px;}
#hilfe_zahl17{top:250px;left:610px;z-index:100;}
#hilfe_zahl18{top:280px;left:420px;z-index:100;}
#hilfe_zahl19{top:355px;left:510px;z-index:100;}

#lautsprecher_abschaltung{top:150px;left:70px;}

.aufzug{position:absolute;height:50px;z-index:3;}
#aufzug1{top:375px;left:494px;}

/* #area1{border:3px solid green;background-color:lightgreen;opacity:0.5;width:65px;height:170px;left:46px;top:160px;} */
/* #area1{left:27px;top:33px;width:195px;height:281px;} */

#hilfe_button,#hilfe_schliessen_button{background-color:rgba(0, 200, 0, 1);color:white;
    position:absolute;top:20px;right:20px;
    text-decoration:none;
    padding:10px;
}
#hilfe_schliessen_button{font-size:40px;}

.hilfe_zahl{display:none;border:4px solid rgba(0, 200, 0);position:absolute;z-index:1;color:white;text-decoration:none;font-weight:bold;background-color:rgba(0, 150, 0);padding:5px;font-size:20px;min-width:20px;text-align: center;}
.hilfe_zahl_aktiv{border-color:rgb(2, 35, 251);}
#hilfe_zahl1{top:298px;left:74px;}
#hilfe_zahl2{top:298px;left:205px;}
#hilfe_zahl3{top:431px;left:205px;}
#hilfe_zahl4{top:93px;left:320px;}
#hilfe_zahl5{top:366px;left:388;}
#hilfe_zahl6{top:171px;left:153px;}
#hilfe_zahl7{top:264px;left:153px;}
#hilfe_zahl8{top:356px;left:153px;}
#hilfe_zahl9{top:448px;left:153px;}
#hilfe_zahl10{top:171px;left:370px;}
#hilfe_zahl11{top:264px;left:370px;}
#hilfe_zahl12{top:356px;left:370px;}
#hilfe_zahl13{top:448px;left:370px;}

#hilfe_zahl14{top:33px;left:45px;z-index:101;}
#hilfe_zahl14_1{top:158px;left:125px;}
#hilfe_zahl14_2{top:403px;left:125px;}

#hilfe_zahl15{top:123px;left:45px;z-index:101;}
#hilfe_zahl15_1{top:72px;left:125px;}
#hilfe_zahl15_2{top:142px;left:125px;}
#hilfe_zahl15_3{top:210px;left:125px;}
#hilfe_zahl15_4{top:280px;left:125px;}

#hilfe_zahl16{top:216px;left:45px;z-index:101;}

#hilfe_texte{
    width:calc(100% - 200px);
    /* width:200px; */
    position:absolute;
    top:985px;
    left:180px;
    border:1px solid #2d2d2d;
    height:calc(100% - 1000px);
    /* margin-top:-150px; */
    /* height:100px; */
    /* margin-left:200px; */
    background:#c5c1c7;
    font-size:16px;
    display:none;
}

#hilfe_balken{background-color:#2d2d2d;height:50px;}
#hilfe_zahl_unten{display:inline-block;float:left;border-color:rgb(2, 35, 251);margin-left:4px;margin-top:3px;}
#hilfe_zahl_malert{display:inline-block;float:left;}
#hilfe_text_inner{background-color:#c5c1c7;padding:20px 7px 20px 7px;height:calc(100% - 110px);overflow-y:auto;}
#hilfe_ueb{font-weight:bold;float:left;margin-left:50px;margin-top:10px;font-size:20px;color:white;}
#hilfe_text{font-size:14px;}
#hilfe_schliessen_button_unten{display:inline-block;margin:5px;background:#2d2d2d;padding:10px;float:right;color:white;text-decoration:none;font-weight:bold;background-color:rgba(0, 200, 0, 0.7);}

button,.aufklapp_button
{
    all: unset;
    display: flex;
    /* float:left; */
    text-align: center;
    justify-content: center;
    align-items: center;
    padding:5px;
    margin:10px 10px 0px 0px;
    background-color:#DDDDDD;
    color:#666666;
    padding:5px;
    cursor:pointer;
    width:100px;
    height:50px;
}
.aufklapp_button{width:50px;margin-right:0px;}

.popup_hinweis{padding:10px;margin:20px 0px 20px 0px;background-color:#DD7677;border:1px solid red;color:white;}

body,html{
    margin:0;
    padding:0;
    height:100Vh;
    width:100vw;
    box-sizing:border-box;
}

body{
    background:#8c868d;
    margin:0px;
    overflow-x:hidden;
    overflow-y:auto;
    /* overflow: hidden; */
}

.tabs{
    background:#dddddd;
    z-index:4;
    top:0px;
    /* width:820px; */
    width:100%;
    height:100%;
    border:1px solid #FF3F00;
    display: flex;
    align-items: center; 
}
.ansicht
{
    padding:20px;
    position: relative;
    border:0px solid #FF3F00;
    isolation:isolate;
}


.black{
    background:#000000;
    padding:10px;
}

.tablinks{
    font-size:16px;

    padding:10px;
    padding-left:30px;
    padding-right:30px;
    border:5px;
    position: relative;
    z-index:5;

    border:1px solid #000000;
    border-bottom:0px;

    border-top-left-radius:6px;
    border-top-right-radius:6px;

    margin-right:2px;
    margin-bottom:0px;
    user-select:none;
}

/* .zoom{
    position: relative;
} */

.menu{
    position: absolute;
    top:12px;
    left:-184px;
    width:250px;
    z-index:100;
}

.flag{
    background:#2d2d2b;
    padding:10px;
    color:#FFFFFF;
    width:50px;
    text-align:center;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    float:right;
    border:1px solid #FF3F00;
    border-left:0px;
    cursor:pointer;
    /* neu ab 25.02.2025: */
    position:relative;
    left:-1px;
}

.fa-sharp-duotone{
    color:#FFFFFF;
    font-size: 30px;
}

.box{
    background:#2d2d2b;
    width:calc(100% - 112px);
    padding:20px;
    border-bottom-right-radius: 10px;
    color:#FFFFFF;
    text-align: center;
    border:1px solid #FF3F00;
    border-left:0px;
}

.box button{
    background-color:#CCCCCC;color:black;
    width:calc(100% - 10px);
    border-radius: 5px;
}
.box button.aktiv{background:#FF3F00;color:#FFFFFF;}

.box h2{
    position: relative;
    top:-10px;

}

#menu_bmz{
    top:104px;
}

#menu_reset{
    top:196px;
}

#menu_hilfe{
    top:288px;
}

#logo{
    position: absolute;
    left:0px;
    bottom:10px;
    text-align: center;
    width:300px;
    zoom:0.58;
}

#logo > span {
    font-size: 18px;
    position: relative;
    top:-25px;
    color:#BBBBBB;
    letter-spacing: 2.6px;
    border-top:1px solid #BBBBBB;
}

#logo > b {
    font-size: 17px;
    position: relative;
    top:-25px;
    color:#BBBBBB;
    font-weight: normal;
}

#mainLayer{
    width:126.5% !important;
    border:2px solid transparent;
    margin:0px;
    padding:10px;
    /* border:1px solid blue; */
}

#feedback
{
    padding:20px;
    max-width:500px;
    zoom:140%;
}
#feedback input[type=text],#feedback input[type=text],#feedback textarea
{
    width:100%;
    padding:5px;
    font-size:14px;
}

#hilfe_texte_umbruch{border:1px solid red;clear: both;height:20px;visibility: hidden;}

.hilfe_ul{margin-left:-20px;}

#neu_versuchen
{
    display:none;
    cursor:pointer;
    position: absolute;
    top: 100px;
    left: 50%;
    transform: translate(-50%, 0%);
}


@media(max-width: 1310px)
{
    #hilfe_texte_umbruch{clear: none;}
    #fat_fbf_kombi{width:1020px;}
    #gebaeude_mit_tabs{display:none;}

    #hilfe_texte
    {
        position:absolute;
        width:470px;
        height:455px;
        top:13px;
        left:1010px;
    }
}

@media(max-width: 700px) 
{
    #malert_innen{max-width:90%;}
}

@media(max-height: 370px) /* wenn die Höhe kleiner als 370 ist, muss das Logo UNTER die Navi*/
{
    #logo{bottom:-100px;}
}