/* ===========================================
   Allgemein
=========================================== */

html,
body{
    height:100%;
    margin:0;
    font-family:Arial,Helvetica,sans-serif;
    background:#f5f7fa;
}

/* ===========================================
   Sidebar
=========================================== */

#sidebar{

    position:fixed;

    top:0;
    left:0;

    width:280px;
    height:100vh;

    overflow-y:auto;

    background:#ffffff;

    border-right:1px solid #dcdcdc;

    padding:20px;

    transition:width .25s,left .25s;

}

/* eingeklappt */

body.sidebar-collapsed #sidebar{

    width:0;
    padding:0;
    overflow:hidden;
    border-right:none;

}

/* ===========================================
   Toggle Button
=========================================== */

#sidebarToggle{

    position:fixed;

    top:15px;
    left:290px;

    width:38px;
    height:38px;

    border:none;
    border-radius:8px;

    background:#0d6efd;
    color:#fff;

    cursor:pointer;

    z-index:1000;

    transition:left .25s;

}

body.sidebar-collapsed #sidebarToggle{

    left:15px;

}

/* ===========================================
   Überschrift
=========================================== */

#sidebar h3{

    text-align:center;
    font-weight:bold;

    margin-bottom:20px;

}

/* ===========================================
   Suche
=========================================== */

#search{

    margin-bottom:20px;

}

/* ===========================================
   Navigation
=========================================== */

.handbuch-nav{

    list-style:none;
    padding-left:0;
    margin:0;

}

.handbuch-nav ul{

    list-style:none;
    padding-left:20px;

}

.handbuch-nav li{

    margin:3px 0;

}

.handbuch-nav summary{

    cursor:pointer;
    padding:6px 8px;

    border-radius:6px;

    font-weight:bold;

    user-select:none;

}

.handbuch-nav summary:hover{

    background:#eef3ff;

}

.handbuch-nav a{

    display:block;

    padding:6px 10px;

    border-radius:6px;

    color:#444;

    text-decoration:none;

}

.handbuch-nav a:hover{

    background:#eef3ff;

    color:#0d6efd;

}

.handbuch-nav a.active{

    background:#0d6efd;
    color:#fff;

}

/* ===========================================
   Content
=========================================== */

#content{

    margin-left:280px;

    min-height:100vh;

    background:#fff;

    padding:50px;

    transition:margin-left .25s;

}

body.sidebar-collapsed #content{

    margin-left:0;

}

/* ===========================================
   Überschriften
=========================================== */

#content h1{

    margin-top:0;
    margin-bottom:25px;

}

#content h2{

    margin-top:40px;
    padding-bottom:8px;

    border-bottom:1px solid #ddd;

}

#content h3{

    margin-top:30px;

}

/* ===========================================
   Bilder
=========================================== */

.screenshot{

    max-width:100%;

    border-radius:8px;

    border:1px solid #ccc;

    box-shadow:0 2px 10px rgba(0,0,0,.12);

    margin:20px 0;

    cursor:pointer;

    transition:.25s;

}

.screenshot:hover{

    transform:scale(1.02);

}

/* ===========================================
   Hinweisboxen
=========================================== */

.note{

    background:#fff8dc;

    border-left:5px solid orange;

    padding:15px;

    margin:25px 0;

}

.warning{

    background:#ffecec;

    border-left:5px solid red;

    padding:15px;

    margin:25px 0;

}

.success{

    background:#eefdef;

    border-left:5px solid green;

    padding:15px;

    margin:25px 0;

}

/* ===========================================
   Tabellen
=========================================== */

table{

    width:100%;

    border-collapse:collapse;

    margin:25px 0;

}

table th{

    background:#f2f2f2;

}

table th,
table td{

    border:1px solid #ddd;

    padding:10px;

}

/* ===========================================
   Kapitelnavigation
=========================================== */

.chapter-nav{

    display:flex;

    justify-content:space-between;

    margin-top:60px;

    padding-top:20px;

    border-top:1px solid #ddd;

}

/* ===========================================
   Responsive
=========================================== */

@media(max-width:992px){

#sidebar{

    position:fixed;
    left:-280px;

}

body.mobile-sidebar-open #sidebar{

    left:0;

}

#sidebarToggle{

    left:15px;

}

#content{

    margin-left:0;
    padding:25px;

}

}