body{
	background: #ccc;
    font: 400 15px Lato, sans-serif;
    line-height: 1.8;
    color: #818181;
}

@font-face {
    font-family: gaby;
    src: url(../fonts/Gabriela-Regular.ttf);
}
 <link href="https://fonts.googleapis.com/css?family=Bree+Serif&display=swap" rel="stylesheet"> 

p.ordered_list{
	text-align: center;
	margin-top: 30px;
}

p.ordered_list img{
	vertical-align: top;
}

.navbar {
    font-family: Montserrat, sans-serif;
}

.container{
	padding: 2em 0;
	max-width: 860px;
	margin: 0 auto;
}

.container p{
	text-align: left;
}

h1,h2,h3,h4{
	text-align: left;
	font-family: "Aleo", serif;
	color: #DA7114;
}

.content{
	max-width: 530px;
	padding: 4em 1em;
	margin: 0 auto;
}

.navi{
	max-width: 320px;
	padding: 0 1em 0 0;
	position:fixed;
	margin: 0 1em;
}

.bg-1{
	background-color: #ccc;
	color:  #363B3C;
}

.logo{
	margin: 0.25em 0.8em;
}

.buch{
	margin: 0.8em 1.3em;
}

.bg-2{
	background-color: #ddd;
	color: #363B3C;
}

h1{
	font-size: 1.75em;
}
h2{
	font-size: 1.6em;
	margin-top: 1.5em;
}
h3{
	font-size: 1.15em;
	margin-top: 0;
}
h4{
	font-family: "Aleo", serif;
	font-size: 1.0em;
	font-style: italic;
	/*color: #555555;*/
}

.olive {
	color: #5a9536 !important;
}

.edition {
	letter-spacing: 6px;
    font-size: 2em;
}

.dotter {
	color: #d5aa17;
}

.bg-1 .list-group-item {
    display: block;
    padding: 10px 15px;
    margin-bottom: -1px;
    background-color: #ddd;
    border: 1px solid #ccc;
}

img{
	border-radius: 0.3em;
}

.list-group-item.active, .list-group-item.active:focus, .list-group-item.active:hover {
    z-index: 2;
    color: #fff;
    background-color: #DA7114;
    border-color: #DA7114;
}

.navbar{
	background-color: transparent;
}

button.navbar-toggle{
	background-color: white;
}

.icon-bar{
	background-color: #337ab7;
}

.navbar {
    margin-bottom: 0;
    background-color: white;
    z-index: 9999;
    border: 0;
    border-radius: 0;
}

.navbar li a, .navbar .navbar-brand {
    color: #DA7114;
    background-color:white;
}

.navbar-nav li a:hover, .navbar-nav li.active a {
    color: #fff;
    background-color: #DA7114;
}

.navbar-default .navbar-toggle {
    border-color: transparent;
    color: #fff;
}

#signet-huge{
	position:fixed;
	margin: 4em 2em;
	visibility: hidden;
}

#signet-small{
	position:fixed;
	visibility: visible;
	padding: 0.7em 0.5em;
}
.text-top{
    visibility: visible;
}

@media only screen and (min-width: 870px) {
    .content{
		max-width: 920px;
		padding-left: 350px;
    }
    #signet-huge{
		visibility: visible;
		width:290px;
		max-width: 490px;
    }
    #signet-small{
		visibility: hidden;
    }
    .text-top{
    	visibility: hidden;
    }
}

@media only screen and (min-width: 1150px) {

    #signet-huge{
		width:375px;
    }
}

@media only screen and (min-width: 1350px) {

    #signet-huge{
		width:425px;
    }
}