*,*:before,*:after {
  box-sizing: border-box;
}

.content-container {
  width: 350px;
  margin: auto;
}

.toc-storybar {
  position: relative;
  border-top: 1px solid gray;
}

.toc-storybar:last-child {
  border-bottom: 1px solid gray;
  margin-bottom: .25em;
}

.toc-storybar p {
  text-align: left;
  position: relative;
  padding: 5%;
  margin-bottom: 0;
  margin-top: 0;
  z-index: 100;
}

.toc-bar {
  position: absolute;
  top: 0;
  bottom:0;
  left:0;
  background: lightblue;
  -webkit-transition: width .2s;
  -moz-transition: width .2s;
  -ms-transition: width .2s;
  -o-transition: width .2s;
  transition: width .2s;
}


.wrapper {
width: 75%;
float: right;
}
#progress {
width: 20%;

top: 0;
left: 0;
font-size: .7em;
height: 100%;
background: white;
padding: 1em 0 0 0;
border-right: 1px solid #111;
}
.toc-storybar {
position: relative;
border-top: 1px solid gray;
}
.toc-storybar:last-child {
border-bottom: 1px solid gray;
margin-bottom: .25em;
}
.toc-storybar p {
text-indent: 0;
text-align: left;
position: relative;
padding: 5%;
margin-bottom: 0;
margin-top: 0;
z-index: 100;
}
.toc-bar {
position: absolute;
top: 0;
bottom: 0;
left: 0;
background: lightblue;
-webkit-transition: width .2s;
-moz-transition: width .2s;
-ms-transition: width .2s;
-o-transition: width .2s;
transition: width .2s;
}
.toc-top {
display: block;
text-align: right;
margin-right: 1em;
}
section.chapter {
margin-top: 2em;
border: 1px solid #ececec;
}
.toc-title {
text-align: center;
font-size: 1.2em;
font-weight: bold;
}

/* Eigener Code */

#progress {
width: 20%;
position: fixed;
top: 0;
left: 0;
font-size: .7em;
height: 100%;
background: white;
padding: 1em 0 0 0;
border-right: 1px solid #111;
}
.toc-storybar {
position: relative;
border-top: 1px solid gray;
}
.toc-storybar:last-child {
border-bottom: 1px solid gray;
margin-bottom: .25em;
}
.toc-storybar p {
text-indent: 0;
text-align: left;
position: relative;
padding: 5%;
margin-bottom: 0;
margin-top: 0;
z-index: 100;
}
.toc-bar {
position: absolute;
top: 0;
bottom: 0;
left: 0;
background: lightblue;
-webkit-transition: width .2s;
-moz-transition: width .2s;
-ms-transition: width .2s;
-o-transition: width .2s;
transition: width .2s;
}
.toc-top {
display: block;
text-align: right;
margin-right: 1em;
}
section.chapter {
margin-top: 2em;
border: 1px solid #ececec;
}
.toc-title {
text-align: center;
font-size: 1.2em;
font-weight: bold;
}