﻿ 
body {
    /*font-family:'Roboto Condensed', 'UbuntuRegular', Georgia,'Arial Narrow', sans-serif !important;*/
color:#000!important;
font-size:15px;
}
h2 {font-family:'Fira Mono', monospace;font-weight:800;font-size:18px; margin-bottom:10px;}
p {font-size:15px;}
a.linkS {color:#000; text-decoration:none; padding:3px 10px 3px 10px ;font-size:14px;  }
.rot {color:#CF0000;}

#logooben {position:fixed;  height:37px; left:8px; z-index:2}
#logooben img {max-width:220px;}

#Anmelden hr {border:none; border-bottom:1px dashed rgba(0,0,0,0.36); }

.clear {clear:both;}
.abstand10{height:10px;}
.btn-default {border:1px solid #ccc;}

#btn_zumDeckblatt {float:right;}

#AufgInner a {color:#CF0000;}

 
.HMenue {position: fixed;top:15px;  
        padding: 15px;  bottom:inherit; right:15px;
        height: auto;  min-width:calc(16.6666666667% - 8px); max-width:300px;
        background-color: #CF0000;color:#fff;
        z-index:999999999999999999999999999;
        }

.HMenue ul { list-style:none; margin:30px 12px 10px 0px; padding:0px;} 
.HMenue ul li {  line-height:100%; padding:0px; margin:10px 0px 0px 0px;
                font-size:16px; font-family:'Fira Sans Condensed';  }
.HMenue ul li ul   {margin: 0px 0px 40px 0px;} 
.HMenue ul li ul li {border:none;padding-left:30px!important; } 
.HMenue ul li a {color:#fff;}
.HMenue h2 {font-family:'Fira Mono', monospace; font-size:20px;}

        .padding-0 {padding:0px;}
        .ptag {display:inline-block;padding:0px 10px 0px 10px ;font-size:12px; font-family:'Fira Sans Condensed'; font-weight:600; color:#fff;background-color:#CF0000;}
        .ptitel {font-size:13px; color:#000; display:inline-block; line-height:100%; padding:3px 10px 3px 10px ; background-color:#fff;  font-weight:600;font-family:'Fira Sans Condensed';}
        h3  {font-family:'Fira Sans Condensed'; font-weight:600;font-size:16px; border-left:7px solid #CF0000;
            padding-left:10px;line-height:100%;display:inline-block;padding-bottom:0px;
            margin-bottom:0px;margin-top:30px;
        }

#AufgInner .abs_inhaltsverzeichnis ul { margin:0px; padding:0px; list-style:none;}
#AufgInner .abs_inhaltsverzeichnis ul li {margin:0px; padding:0px;}



#Aufgabe   {position:absolute; z-index:99; 
                    width: calc(100vw - 40px); max-width:600px;
                    bottom: 75px; border-top:0px solid #CF0000;
                    height: auto; 
                    max-height: calc(100vh - 140px);
                    padding: 0px;                    
                    left: 20px;
                    background-color: rgba(255, 255, 255, 0.9);
                    z-index: 2;
                    -webkit-box-shadow: 0px 0px 17px 6px rgba(81,65,56,0.4);
                    box-shadow: 0px 0px 17px 6px rgba(81,65,56,0.4);
                    border:0px solid #000;
                    border-left:7px solid #CF0000;
}
#Aufgabe h1 {font-size:28px;font-weight:700;font-family:'Fira Sans Condensed', sans-serif;}

#Aufgabe input,#Aufgabe textarea {font-size:14px!important;}


#AufgInner .abs_textarea_bild { margin-left:20px; margin-top:20px; padding-right:15px; }
#AufgInner .abs_textarea_bild .bild{ float:left; width:45%;margin-right:5%;margin-left:-20px; }
#AufgInner .abs_textarea_bild .textbereich{ float:left; width:50%;}
#AufgInner .abs_textarea_bild .textbereich textarea{ height:250px;}
#AufgInner .abs_textarea_bild .textarea_label { margin-top:0px;}

.block { background-color:#fff; border:1px solid #000; padding:20px;margin-bottom:30px;border-radius:10px; border-top-left-radius:0px; border-top-right-radius:0px; }

.abs.abs_haken {
    padding-top: 0px !important;
    padding-bottom: 0px !important;
}
/*
*/

#AufgInner   p  { -moz-hyphens: auto; -webkit-hyphens: auto; -ms-hyphens: auto;hyphens: auto;
                 line-height:130%;
}

#AufgInner textarea { width:100%; margin-top:3px;height:200px; }
#AufgInner .textarea_label { margin-top:15px; 
    font-family:'Fira Mono', monospace; line-height:110%;
                            font-weight:700; font-size:14px;letter-spacing:1px;
}
#AufgInner .textarea_label p {font-size:13px;}


#AufgInner .abs_empfehlung1  {padding:0px 20px 10px 20px;}
#AufgInner .abs_empfehlung1 h2 {padding:0px 0px 0px 0px;  margin:20px 0px 5px 0px ; }
#AufgInner .abs_empfehlung1 ul {margin:0px; padding:0px; list-style:none;}
#AufgInner .AufgNr { float:left; margin-left:-20px; font-size:14px; text-align:center; font-weight:700; margin-right:10px; 
                     width:30px; background-color:#CF0000; color:#fff; }

/*#AufgInner .abs_bildstrecke { height:220px; white-space:nowrap; overflow:auto; width:100%;}
#AufgInner .abs_bildstrecke .bilder { cursor:pointer; height:220px; white-space:nowrap; width:2500px; }
#AufgInner .abs_bildstrecke .bilder .abbBstr { height:220px; float:left; margin-right:5px; }
#AufgInner .abs_bildstrecke .bilder .abbBstr img { height:220px; }
*/

/*ausgabe*/
#AufgInner .abs_bildstrecke {  margin-bottom:30px;   }
#AufgInner .abs_bildstrecke .bilder {   }
#AufgInner .abs_bildstrecke h3 { margin-bottom:15px;   }
#AufgInner .abs_bildstrecke .bilder .abbBstr {  margin:0px 7px 0px 0px ;}
#AufgInner .abs_bildstrecke .bilder .abbBstr img { height:160px; }
 
/*Zoom*/
#fensterBild {display:none; position:fixed; left:0px; top:0px; height:calc(100vh - 0px);
    border:0px solid #000;width:calc(100% - 0px); 
    z-index:999999995;background-color:#000;background-image:url(''); 
    background-size:contain; background-repeat:no-repeat; background-position:left top;}
#fensterBildClose {position:absolute; right:0px; top:0px;padding:8px 10px 20px 20px;}
#fensterBildClose i {text-shadow: 0px 0px 1px rgba(0, 0, 0, 1);cursor:pointer; font-size:22px;color:#fff;}
#fensterBildBu {position:absolute; left:0px; bottom:0px; max-width:100%;font-size:15px;  }
#fensterBildBu span  { padding:3px 10px 3px 10px; background-color:rgba(255, 255, 255, 0.7)}

#AufgInner .abs_text {margin-left:20px; margin-top:20px; padding-right:15px;}
#AufgInner .abs_text p {  margin-bottom:7px; }
#AufgInner .abs_text h1 {font-size:22px; }
#AufgInner .abs_text h2 {/*font-size:22px;*/ }

#AufgInner .abs_text ul  { font-size:13px; list-style:none; padding:0px; margin:10px 0px 15px 0px;}
#AufgInner .abs_text ul li  {  font-family:'Fira Mono', monospace; line-height:130%; margin:10px 0px 0px 0px; font-weight:700; }
#AufgInner .abs_text ul li:before  {font-family:'FontAwesome'; color:#CF0000; content:'\f04d\00a0\00a0\00a0'; margin-left:-20px;}
#AufgInner .abs_text ul li a {color:#000; text-decoration:none;}



#AufgInner .abs_textarea {padding-right:20px;}
#AufgInner .abs_textarea .textarea_label {margin-left:20px;font-size:13px; line-height:130%;}
#AufgInner .abs_textarea textarea {border:1px solid #3A7CD0; width:calc(100% - 20px); margin-left: 20px ; }
#AufgInner .abs_textarea .btnSpeichernTextarea {margin-top:10px; font-family:'Fira Mono', monospace;font-weight:700; font-size:12px; 
                                                 letter-spacing:1px; padding:3px 10px 3px 20px ; border-radius:0px; 
                                                 background-color:#3A7CD0;text-transform:uppercase; color:#fff; }

#AufgInner .abs_inhaltsverzeichnis h2 {  margin:20px 0px 0px 20px;}
#AufgInner .abs_inhaltsverzeichnis p { margin:20px 0px 0px 20px;}
#AufgInner ul.inhaltsverzeichnis  { margin:10px 0px 0px 0px;}
#AufgInner ul.inhaltsverzeichnis li  { line-height:100%; margin:10px 0px 0px 0px;  }
/*#AufgInner ul.inhaltsverzeichnis li:before  {font-family:'FontAwesome'; color:#3A7CD0; content:'\f061\00a0\00a0';}*/
/*#AufgInner ul.inhaltsverzeichnis li {border-left:10px solid #CF0000; padding-left:10px;}*/
#AufgInner ul.inhaltsverzeichnis li a {display:inline-block; width:calc(100% - 20px); margin:-2px 0px 0px 0px ; font-family:'Fira Mono', monospace; 
                                       font-size:14px; color:#000; text-decoration:none;}
#AufgInner ul.inhaltsverzeichnis li a:hover {color:#CF0000;}



#AufgInner .abs_abb_klein   {  margin:20px 15px 0px  0px;}
#AufgInner .abs_abb_klein p  {  margin:0px 0px 10px 20px;}
#AufgInner .abs_abb_klein h3 { font-size:16px;line-height:130%; margin: 2px 0px 5px -10px;}
#AufgInner .abs_abb_klein .bild  { width:50%; float:left; margin:2px 10px 5px 0px; }

#AufgInner .abs_vertiefung   {margin:15px 0px 0px 0px; }
#AufgInner .abs_vertiefung h3 {margin:0px 0px 0px 0px;font-size:14px; font-weight:700; font-family:'Fira Mono', monospace; 
                               line-height:110%; letter-spacing:1px; padding-bottom:0px;}
#AufgInner .abs_vertiefung p {margin:0px 0px 0px 20px;  }

#AufgInner .abs_abbgross h2  {margin:15px 0px 15px 0px;/*font-size:20px;*/padding-left:15px; }
#AufgInner .abs_abbgross img  { width:100%; margin:0px 0px 15px 0px; }


#AufgInner ol {margin-left:25px; padding-left:0px;}
#AufgInner ol li {    padding-left:5px; line-height:120%; margin-bottom:10px;
                     font-family:'Fira Mono', monospace; line-height:110%;
                            font-weight:700; font-size:13px;letter-spacing:1px;
}

#AufgStart {position:fixed; max-width:550px; top:120px;  left:15px;  width:95%; z-index:2;}
#AufgStart h1,#AufgStart h2 { font-family:'Fira Mono', monospace; line-height:110%;
                            font-weight:700;  letter-spacing:1px;}

#AufgStart h3  { font-size:16px; font-weight:300;border:none; padding:0px;line-height:100%; margin:0px 0px 0px 0px;  width:100%; display:block;}
#AufgStart h1  { font-size:20px; display:block;margin:0px 0px 0px 0px; width:100%; }
#AufgStart h2 { /*font-size: 16px; */font-weight: 300;display:block;margin:0px 0px 0px 0px; width:100%; }

     #AufgStart h3.mitRot  {font-family:'Fira Sans Condensed'; font-weight:600;font-size:16px; border-left:10px solid #CF0000;
            padding-left:10px;line-height:100%;display:inline-block;padding-bottom:0px;
            margin-bottom:10px;margin-top:0px; margin-left:-20px;
        }


#AufgStart h3 span {display:inline-block;padding:0px 10px 0px 10px ;  
                    font-size:12px; font-family:'Fira Sans Condensed'; 
                    font-weight:600; color:#fff;background-color:#CF0000;}

#AufgStart h1 span {font-size:25px; color:#000; display:inline-block; line-height:100%;  width:100%;
                      padding:10px 10px 5px 15px ; background-color:#fff;  
                      font-weight:600;font-family:'Fira Sans Condensed';}

#AufgStart h2 span {  font-size:15px; color:#000; display:inline-block; line-height:100%;  width:100%;
                      padding:3px 10px 10px 15px ; background-color:#fff;  
                      font-weight:600;font-family:'Fira Sans Condensed';  }
#AufgStart #deckblattinfo { display:none; background-color:#fff; margin-top:10px;
                            padding:15px;height:auto; max-height:50vh; 
                            overflow:auto;font-size:14px; }
#AufgStart #deckblattinfo.codeinfo {background-color:whitesmoke; border-left:5px solid #CF0000;}

#AufgStart #btnStart {/*clear:both; float:right; height:20px;
                      border-left:0px solid #CF0000; padding-left:10px;line-height:100%;*/
}
#AufgStart #btnStart i {/*line-height:100%; cursor:pointer; font-size:20px; display:inline-block; margin-top:-7px;*/}
#AufgStart #btnStart span {/*line-height:100%; display:inline-block; margin-top:-7px;*/}

#AufgabeNavi .btnMenuBottom  { background-color:#CF0000;height:100%; line-height:120%!important; padding-top:7px; padding-bottom:7px; }
#AufgabeNavi .btnMenuBottom:hover  { background-color:rgb(207, 0, 0 , 1); cursor:pointer;}
#AufgabeNavi .btnMenuBottom.aktiv  { background-color:rgb(207, 0, 0 , 1);  }
#AufgabeNavi .btnMenuBottom.aktiv a {   color:#fff ;}
#AufgabeNavi .btnMenuBottom:hover a { color:#fff;}
#AufgabeNavi .btnMenuBottom a   { color:#000; font-size:12px; text-decoration:none;  }
#AufgabeNavi .btnMenuBottom a  i {  font-size:25px!important;}

#btn_zumDeckblatt {cursor:pointer;}

#sendeErg {position: absolute;  display:none; z-index: 99999999;
            bottom: 55px; right:0px; width: auto;    max-width:100vw!important;
            background-color:#f6f6f6;
            -webkit-box-shadow: -12px -25px 50px 13px rgba(0,0,0,0.12);  box-shadow: -12px -25px 50px 13px rgba(0,0,0,0.12); 
}
#sendeErg .inner{padding: 0px  0px 20px 0px;}
#sendeErg h3  {font-size:18px; padding-top:7px; font-family:'Fira Sans Condensed';
                margin:10px 0px 10px 0px;}


#inhaltsvz {position: absolute;  display:none; z-index: 99999999;
            bottom: 55px; /*left:calc(16.6666666667% - 8px);*/ width: auto; max-height:calc(100vh - 70px); overflow:auto;   max-width:100vw!important;
            background-color: #f4f4f4;
            -webkit-box-shadow: -12px -25px 50px 13px rgba(0,0,0,0.15);  box-shadow: -12px -25px 50px 13px rgba(0,0,0,0.15); 
}
#inhaltsvz .inner{padding: 0px  20px 20px 0px;}
#inhaltsvz ul.inhalt  {}
#inhaltsvz .header {border-left:6px solid #CF0000;padding:10px 10px 0px 10px ;margin-bottom:15px;}
#inhaltsvz .header h3  {border:none; font-size:18px; padding-top:7px;   margin:0px 0px 0px 0px; 
                 font-family:'Fira Sans Condensed';  padding:  0px    ; font-weight:700;
}
#inhaltsvz .header h4  {border:none; font-size:12px; padding-top:7px; font-family:'Fira Sans Condensed';
                margin:0px 0px 0px 0px;padding:  0px    ; font-weight:500;}
#inhaltsvz ul.inhalt li {font-family:'Fira Mono', monospace;  line-height:100%;padding:7px 10px 7px 20px ;font-size:14px;}
/*#inhaltsvz ul.inhalt li.active { 3}*/
#inhaltsvz ul.inhalt li a { display:inline-block; width:calc(100% - 20px);font-weight:500; color:#000; text-decoration:none; }
#inhaltsvz .AufgNr {background-color:#ccc; float:left; margin-left:-20px; text-align:center; font-weight:700; 
                    margin-right:10px; width:30px;  color:#fff; font-size:14px; padding:2px 0px; }
#inhaltsvz ul.inhalt li.active .AufgNr {background-color:#CF0000;}

#titelmini { }
#titelmini:hover { }
#logoleiste {position:fixed; background-color:#fff;    height:40px; z-index:2;}
#logoleiste img {width:auto;height:23px; margin:15px 0px 10px 5px;}

#titelmini #kapitelInfo{padding:3px 0px 3px 3px ;margin-left:10px; border:1px solid #fff;}
#titelmini #kapitelInfo:hover{cursor: pointer;border:1px solid rgba(0,0,0,0.7);}
#btn_menu1 {cursor:pointer;}

@media only screen  and (min-width: 991px)  {
    /*#Aufgabe {width:50%;  }*/
}


/*#rundgang {display:inherit;}*/
    #WrapperStart {position:absolute;z-index:999;top:40px; width:100%; 
                   margin: 0px 0px 0px 0px;
                   height:calc(100vh - 40px);  
                    border-top:20px solid #fff;
                   -webkit-box-shadow: 0px 0px 17px 6px rgba(0,0,0,0);
                    box-shadow: 0px 0px 17px 6px rgba(0,0,0,0);
                     
                    border-bottom:15px solid #fff;


                    padding: 3px 30px 20px  20px; overflow-y: auto; overflow-x: hidden; 
                    left: 15px; background-color: rgb(255, 255, 255 , 1);
    }

#btnAufg_weiter {position:absolute; width:60px; height:60px;   padding: 8px 0px 10px 3px; text-align:center; 
                 background-color:rgb(255, 255, 255 , 0.4);  
            bottom:15vh; border-radius:100px;  border:0px solid #f00;  word-spacing:10px;  
            color:#CF0000;z-index:99999999;
         left:calc(100vw - 40px);
}

#btnAufg_zurueck{position:absolute; width:60px; height:60px; text-align:center;  border-radius:100px; 
    padding: 8px 5px 0px 0px; background-color:rgb(255, 255, 255 , 0.4); 
    bottom:15vh; left:-20px; word-spacing:10px;  color:#CF0000;z-index:9;}

#slideInOut {position: absolute; bottom: 35px; height: 61px;  width: calc(100vw - 40px); max-width: 600px; left: calc(50% - 30px); left: 20px; z-index: 3; text-align: center;}    
#slideInOuticon {border-radius: 100px; display: inline-block; background-color: rgb(255, 255, 255, 0.2); color: #CF0000; padding: 5px 0px 0px 0px; line-height: 100%; font-size: 50px; width: 60px; height: 60px;}    
#btnAufg_weiter:hover,#btnAufg_zurueck:hover,#slideInOuticon:hover { background-color:rgb(255, 255, 255 , 0.5); }


#btn_menu1{margin:6px 8px 10px 10px ; font-size:26px;color:#fff; }

/*Einstellungen mobil/desktop*/
@media   (min-width: 601px)  { 
    #btn_menu1{ color:#fff;}
    #WrapperStart {position:absolute;z-index:999;top:50px; width:100%; max-width:400px; 
                   margin: 30px 20px 0px 0px;
                   background-color:#fff;padding:10px 20px 50px 20px;height:calc(100vh - 110px); overflow:auto;
                   padding-bottom:50px;
                   -webkit-box-shadow: 0px 0px 17px 6px rgba(0,0,0,0.4);
                    box-shadow: 0px 0px 17px 6px rgba(0,0,0,0.4);
    }

    /*#menu1 {display:none;}*/
    #menu1 {display:inherit;}
    /*#btn_menu1 {display:none;}*/
    #logoleiste {background-color:transparent;}

   #menu1a    {     max-width:calc(100vw - 435px);   }
/*     #menu1a h2 {font-size:20px;margin:0px 0px 15px 3px ;}
    #menu1a  ul { list-style:none; margin:0px 0px 0px 4px ; padding:0px;}
    #menu1a  ul li ul  {margin:0px 0px 0px 20px ; padding:0px;}
    #menu1a  ul li ul li {padding:0px;}
    #menu1a  li { margin:0px 0px 0px 0px; padding: 3px 0px 3px 0px;}
*/
    #btnAufg_weiter {   left:600px; }
}

@media  (max-width: 400px)  {
    #menu1 {width:100%; display:inherit;}         
   
    #AufgInner .abs_textarea_bild { }
#AufgInner .abs_textarea_bild .bild{ float:inherit; width:100%;margin-right:0%;margin-left:-20px; }
#AufgInner .abs_textarea_bild .textbereich{ float:inherit; width:100%; margin-top:10px;}
#AufgInner .abs_textarea_bild .textbereich textarea{ height:100px;}
#AufgInner .abs_textarea_bild .textarea_label { margin-top:10px;}
/**/
}

@media  (max-width:600px)  {
    p {font-size:15px;}

     #WrapperStart {left:0px;    }

    #btn_menu1{ color:#CF0000;}
    #menu1 {display:inherit;}
    #menu1a {display:none;}
    /*#menu1 {display:;}*/

}




/*===========================*/

        /*
os-theme-round-dark
*/

.os-theme-round-dark > .os-scrollbar {
    padding: 0;
}
.os-theme-round-dark > .os-scrollbar-horizontal { right: 20px; height: 20px; }
.os-theme-round-dark > .os-scrollbar-vertical {
    bottom: 20px;
    width: 20px;
}
.os-theme-round-dark.os-host-rtl > .os-scrollbar-horizontal {
    left: 20px;
    right: 0;
}
.os-theme-round-dark > .os-scrollbar-corner {
    height: 20px;
    width: 20px;
    background-color: transparent;
}
.os-theme-round-dark > .os-scrollbar > .os-scrollbar-track {
    background: transparent;
}
.os-theme-round-dark > .os-scrollbar-horizontal > .os-scrollbar-track:before,
.os-theme-round-dark > .os-scrollbar-vertical > .os-scrollbar-track:before {
    content: '';
    display: block;
    position: absolute;
    background: rgba(0, 0, 0, 0.15);
}
.os-theme-round-dark > .os-scrollbar-horizontal > .os-scrollbar-track:before {
    left: 3px;
    right: 3px;
    height: 2px;
    top: 50%;
    margin-top: -1px;
}
.os-theme-round-dark > .os-scrollbar-vertical > .os-scrollbar-track:before {
    top: 3px;
    bottom: 3px;
    width: 2px;
    left: 50%;
    margin-left: -1px;
}
.os-theme-round-dark > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle {
    background: transparent;
}
.os-theme-round-dark > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle:before {
    content: '';
    display: block;
    position: absolute;
    background: #B61F29;
    border-radius: 100%;
    top: 3px;
    bottom: 3px;
    left: 3px;
    right: 3px;
    transform: scale(1);
}
.os-theme-round-dark > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle:hover:before,
.os-theme-round-dark > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle.active:before {
    transform: scale(1.3);
}
.os-theme-round-dark > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle {
    height: 100%;
    min-width: 20px;
    max-width: 20px;
}
.os-theme-round-dark > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle {
    width: 100%;
    min-height: 20px;
    max-height: 20px;
}
.os-theme-round-dark.os-host-transition > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle:before {
    transition: transform 0.3s;
}


.os-theme-round-dark > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle::before {
    height:   7px; width: 13px;border-radius:0px;
}