/* Farben KSGL */

/* Rot rgb(205,45,50)
*/
:root {
  --ksgl-color1: rgb(205,45,50);
  --ksgl-color1hover: rgb(255,102,102);
}

/*
  color: var(--ksgl-color1);
  color: var(--ksgl-color1hover);
*/


/* Debugging ****************/
.pagetest {
    display:none!important;
}
.querytest {
    display:none!important;
}

/* Eigene CSS-Deklarationen */

body {
    color:#333;
    font-family: Roboto, Helvetica, Arial, sans-serif;
    background-color:#fff;
    /*font-size: 16px;
    line-height:1.3em;*/
}
/* Header 
-------------------------------------------- */
    
header {
    height:75px;
    display:flex;
    justify-content: space-between;
    padding:12px;
}
header div.suche {
    width: 55px;
}
header div.suche a img {
    margin-top: 0px;
    width:40px;
    height:40px;
    background:none;  
}
header div.suche a img:hover {
    transition: width 1s, height 1s, margin-top 1s;
    margin-top: -6px;
    width:45px;
    height:45px;
}
header div.logo img {
    width:300px;
    height:66px;
    background:none;
    margin-top: -8px;
}


header div.burger img {
    width:40px;
    height:40px;
    background:none;
}

div.desc {
    display:block;
}
div.smart {
    display:none;
}
/* Footer */
.right > p > a > img {
    width:30px;
    height:auto;
}
.right > p > a > img:hover {
    opacity:0.5;
}

/* WYSIWYG EDITOR ALIGNMENT CLASSES 
-------------------------------------------- */
.left {
    text-align: left
}
.center {
    text-align: center
}
.right {
    text-align: right
}
/* IMAGES 
-------------------------------------------- */
img {
    height: auto; /* resets the image height so that it maintains its aspect ratio when width is set */
    background: transparent url(../images/ajax-loader.gif) no-repeat center center;
}
img.left {
    float: left;
    max-width: 50%;
    margin: 5px 20px 10px 0;
}
img.right {
    float: right;
    max-width: 100%;
    width:auto;
    margin: 0;
}
img.leftAlone {
    /*float: left;
    margin-right: 100%;
    margin-bottom: 10px;
    clear: both;*/
    width:auto;
    max-width:100%;
    height:auto;
}
img.center {
    float: none;
    margin-left: auto;
    margin-right: auto;
    display: block;
    margin-bottom: 10px;
    clear: both;
    width: auto;
    max-width: 100%;
    height: auto;
}
p.weiter {
    width: 100%;
    border-top: 1px solid silver;
    padding: 5px 0px;
    margin: 20px 0px 10px 0px;
    clear: both;
}
hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
        border-top-color: currentcolor;
        border-top-style: none;
        border-top-width: 0px;
    border-top: 1px solid silver;
}

/* Flex-Box ******************************************/
div.FlexBox {
    display: flex; 
    /*justify-content: end; */
    flex-wrap: wrap;
    }
div.portrait {
    max-width:280px;
    margin-right: 12px;
}
/* ImageBox ******************************************/
div.imagebox {
    display: flex; 
    justify-content: start;
    flex-wrap: wrap;
}
div.imageboxcontent {
    margin-bottom:12px;
    margin-right:12px;
}
p.boxtitle {
    font-weight: bold;
    margin: 8px 0px 0px 0px;
}
div.imageboxcontent p {
    hyphens: none;
}

/* B BreadNavigation ************************************************************************/



 /* A Breadnav Top *****************/
 .breadnavcontainer.navihome {
    min-height: 32px !important;
}
div.flexrow {
    display:flex;
}
.logocol1 {
    background-color: rgb(205,45,50);
    width: 66px;
    min-height: 32px;
}

 img.ksgl {
    width: 66px;
    height: 96px;
    background:none;
}
 
div.breadnavcontainer {
    background-color: #333;
    margin: -10px 0 0 0;
    min-height: 96px;
}
/* Startnavigation */
ul.nav.levelhome {
    margin-left: 0px;
    margin-top: 4px;
}
ul.nav.levelhome a {
    font-size:17px;
    display:block;
    height: auto;
    padding-right: 6px;
}
.navlist {
    padding-top: 3px;
}
nav.breadnav ul {
    padding: 0!important;
}
ul.nav.level1 {
    margin-left: 10px;
    margin-top: -16px;
}
nav.breadnav ul li {
    display:inline-block;
    font-size:0px;
    line-height:normal;
}
li.li3 {
    line-height: normal;
    letter-spacing: normal;
}
nav.breadnav ul li a {
	font-size: 17px;
    padding-right: 12px;
}




/* ausblenden */
nav.breadnav ul li a.link {
    display:none;
}
.link.li2.leer {
    /*display: none;*/
}
.link.child.level1, 
.link.child.level2, 
.link.child.level3, 
.link.child.level4 {
    display: none;
}
.link.li1 {
    display: none;
}
/* einblenden */
ul.current li a.link {
    display:block!important;
}
ul.section ul.current li a,
ul.section ul.section ul.current li a {
    display:block!important;
}
ul li a.toview {
    display:block!important;
}

/* Pfeil links ausblenden */
nav.breadnav a span.glyphicon.glyphicon-chevron-right {
    display: inline;
}
/*ul.child.level1 {
    display: none;
}*/

/* a, a.current, a:hover */
nav.breadnav a {
    color: #fff;
    text-decoration: none;
    background-color:transparent;
    margin:0;
    padding:0;
}
nav.breadnav a:hover {
    color: rgb(205,45,50);
    background-color:transparent;
}
nav.breadnav a.current, nav.breadnav a.section {
    color: rgb(242,60,60);
    background-color:transparent;
}
nav.breadnav a.current:hover, nav.breadnav a.section:hover {
    color: rgb(255,102,102)!important;
    background-color:transparent;
}




/* Content ***************************************/

/* Startseite */

div.content.start p {
    display: flex;
    flex-wrap: wrap;
    justify-content: end;
    padding:0;
}
div.content.start p a {
    max-width:224px;
    margin-right: 8px;
    margin-bottom: 8px;
    border:1px solid transparent;
}
div.content.start p a:hover {
    /*border:1px solid rgb(205,45,50);*/
}
div.content a img, .imagebox a div img {
    border: 1px solid #ccc;
}
div.content a img:hover {
    border: 1px solid transparent!important;
}
.imagebox a div img {
    border: 1px solid transparent;
}
.imagebox > a:hover > div > img {
    border: 1px solid rgb(205,45,50);
}

/* Kapitelseite */
img.kapitel {
    max-width:400px;
    width:100%;
    height:auto;
}

.boxrot {
    background-image: url(/ksgl18/assets/7fef33b381/BoxRot-v2.png);
    background-repeat: no-repeat;
    padding: 26px;
    max-width: 480px;
    float: right;
    margin-top: -24px;
    position: relative;
}
b, strong {
    /*font-family: open_sansbold, Helvetica, Arial, sans-serif;
    font-weight: normal;*/
}
.chaptertop {
    float:right;
    width:28px;
    text-align:right;
}
a.chaptertop img {
    width: 28px;
    height: 32px;
    background: none;
    margin-left: 0px;
    padding-top:6px;
    padding-bottom:0px;
}
a.chaptertop img:hover {
    padding-top:0px;
    padding-bottom:6px;
}

.startbild {
    max-width: 660px;
    float:right;
}
.BoxRot {
    background-color: rgb(205,45,50);
    padding: 36px;
    color: #fff;
    max-width: 580px;
    min-height: 280px;
    margin-left: 30%;
    float:right;
    margin-top:-50px;
}
.triangle-up-right {
  width: 0;
  height: 0;
  border-top: 50px solid rgb(255, 255, 255);
  border-left: 50px solid transparent;
}
#page-content-wrapper {
    width: 100%;
    padding-top: 0px;
    min-height: 400px;
}
/* PageImages *************/

div.pageimage {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
}
div.pageimage figure {
    max-width:157px;
    margin-right:12px;
}

/* Form Search ***********************************/
form .btn-toolbar {
    margin: 12px 0;
    width: 200px;
}
form input {
    min-width: 200px;
}
div.results a {
    font-size: 1.4em;
}

div.results a span.rank {
    color: #ccc;
}
div.results span.pos, div.results span.urlsegment {
    color:#999;
    font-size:0.8em;
}
div.results p.kurz {
    display:none;
}

/* Footer ****************************************/
footer {
    background-color: #333;
    padding: 12px 0px;
    color:#ccc;
    font-size:1.1em;
}
footer a {
    color:#fff;
}
footer div.piktogramm {
    max-width:50%;
    margin:auto;
}
footer p {
	hyphens:none;
}
footer div.piktogramm img {
    background:none;
}
.breadcrumbGo {
    padding-top: 24px;
    color:var(--ksgl-color1);
}
.breadcrumbGo a {
    color: var(--ksgl-color1);
}
.breadcrumbGo a.link {
    color: #ccc;
    font-weight:bold;
}
.breadcrumbGo a:hover {
    color: var(--ksgl-color1hover)
}

/*==========  Non-Mobile First Method  ==========*/

/* Large Devices, Wide Screens */
@media only screen and (max-width : 1200px) {

}

/* Medium Devices, Desktops */
@media only screen and (max-width : 992px) {

}

/* Small Devices, Tablets */
@media only screen and (max-width : 768px) {
    div.breadnavcontainer {
        background-color: #333;
        margin: -10px 0 0 -13px;
        height: calc(100% - 100px) !important;
    }
    div.content.start p a {
	    max-width: 195px;
	    margin-right: 8px;
	    margin-bottom: 8px;
	    border: 1px solid transparent;
	}

}

/* Extra Small Devices, Phones */ 
@media only screen and (max-width : 480px) {
    div.desc {
        display:none;
    }
    div.smart {
        display:block;
    }
    /*div.logo img {
        background: transparent;
        max-height: 47px;
        margin-top: 1px;
    }*/
    header div.logo img {
        max-width: 200px;
        height: auto;
        background: none;
        margin-left: -40px;
    }
    nav ul.suche {
        width: 38px;
        border: transparent;
        padding: 0;
        margin: 0;
        position: absolute;
        right: 0px;
        left: 15px;
        top: 17px;
        background-color: transparent;
    }
    nav.breadnav ul li a {
        display:block;
        margin-right:9px;
    }
    nav.breadnav ul.levelhome {
        width:100%;
        list-style-type: none;
        padding:0;
        background-color: #333;
        margin-left:14px;
        text-align: left;
    }
    ul.nav.levelhome a {
        font-size: 17px;
        display: block;
        height: auto;
        padding-right: 5px;
        margin:2px 2px 2px 8px;
        line-height: 1.3em;
    }
    div.content.start p a {
	    max-width: 140px;
	    margin-right: 8px;
	    margin-bottom: 8px;
	    border: 1px solid transparent;
	}
div.imageboxcontent {
        margin-bottom: 12px;
        margin-right: 12px;
        /*width: calc(50% - 10px)!important;*/
    }

    footer div.row div {
        margin-bottom:48px;
    }
    form input, button.neusuche {
        min-width: 282px;
        font-size: 1.6em;
    }
}

/* Custom, iPhone Retina */ 
@media only screen and (max-width : 360px) {
	header div.logo img {
	    max-width: 160px;
	    height: auto;
	    background: none;
	    margin-left: -60px;
	}
    

}