#legende {
  margin: 1.2em 2em 0;
  position: relative;
  list-style-type: none;
  border: 1px solid black;
  background-color: #e6e6e6;
  padding: 0.5em;
}

#legende li {
  padding: 0;
  text-align: left;
}

#ueberschrift {
  font-weight:         600;
}

#legende div.krone  {
	margin: 0 0.5em;
	display: inline;
}

#legende div.krone img  {
   width: 5%;
}

.zeitleiste {
  margin-top: 1.2em;
  position: relative;
  margin-left: 7.5em;
  list-style-type: none;
}

.zeitleistewuerdentraeger {
  margin-left: 7.5em;
}

.zeitleistegeschichte {
  margin-left: 2em;
}
 
.zeitleiste::before {
  position: absolute;
  content: "";
  bottom: 0;
  left: 0;
  top: 0;
  background: green;
  width: 0.4em;
}

.zeitleiste::after {
  position: absolute;
  content: "";
  bottom: 0;
  left: -0.8em;
  width: 0;
  height: 0;
  border-width: 0.2em 1em;
  border-style: solid;
  border-color: green;
}

.zeitleiste >li::before{
  position: absolute;
  content: "";
  width: 2.4em;
  height: 2.4em;
  left: -1.2em;
  border-radius: 50%;
  background: green;
} 
 
.zeitleiste >li.koenig::before{
  background: green;
  background-image: url("../objekte/icons/krone.png");
  background-size: 85%;
  background-repeat: no-repeat;
  background-position: center;
  border: 2px solid white;
}

.zeitleiste >li.kaiser::before{
  background: green;
  background-image: url("../objekte/icons/kaiserkrone-silber.png");
  background-size: 85%;
  background-repeat: no-repeat;
  background-position: center;
  border: 2px solid #b2b9bc;
}

.zeitleiste >li.kaiserin::before{
  background: green;
  background-image: url("../objekte/icons/kaiserkrone-gold.png");
  background-size: 85%;
  background-repeat: no-repeat;
  background-position: center;
  border: 2px solid #d9bb24;
} 
 
.zeitleiste >li.geschichte::before{
  background: green;
  background-image: url("../objekte/icons/icon-wappen.png");
  background-size: 75%;
  background-repeat: no-repeat;
  background-position: center;
  border: 2px solid #b2b9bc;
}

.zeitleiste > li {
  margin-bottom: 1.6em;
}

.zeitleiste li:last-child {
  padding-bottom: 2.5em;
}

.zeitleiste  li time, .zeitleiste  li div.schuetzenjahr {
  font-size: 0.9em;
  display: inline-block;
  margin-left: -26.5em;
  padding-top: 0.9em;
}

.zeitleiste  li time, .zeitleiste  li div.schuetzenjahr2 {
  font-size: 0.9em;
  display: inline-block;
  margin-left: -24em;
  padding-top: 0.9em;
}

.zeitleiste li div.koenigspaar {
  margin: -1.2em 0 0.2em 2.5em;
  text-align: left;
}

.zeitleiste li div.name {
  display: block;
  padding: 0;
}

.zeitleiste li div.name2 {
  display: block;
  padding: 0;
  text-align: left;
  margin: -0.9em 0 0.2em 2em;
  font-size: 0.9em;
}

.zeitleiste div.krone  {
	display: inline;
	margin: 0 0 0 0.2em;
	padding: 0;
}

div.krone  {
    display: inline;
	margin: 0 0 0 0.2em;
	padding: 0;
}

div.krone a {
    display: inline-block;
  width:               1.2em;
  background-size:     100%;
  background-repeat: no-repeat;
  background-position: center;
  text-decoration: none;
}

div.krone a.kronestadtkoenig,
div.krone a.kronestadtkoenigin {
  background-image:    url(../objekte/icons/krone-bronze.png);
}

div.krone a.kronekreiskoenig,
div.krone a.kronekreiskoenigin {
  background-image:    url(../objekte/icons/krone-silber.png);
}

div.krone a.kronebezirkskoenig,
div.krone a.kronebezirkskoenigin {
  background-image:    url(../objekte/icons/krone-gold.png);
}

div.krone a.kronestadtprinz,
div.krone a.kronestadtprinzessin {
  background-image:    url(../objekte/icons/krone-bronze.png);
}

div.krone a.kronekreisjugendkoenig,
div.krone a.kronekreisjugendkoenigin {
  background-image:    url(../objekte/icons/krone-silber.png);
}

div.krone a.kronebezirksjugendkoenig,
div.krone a.kronebezirksjugendkoenigin {
  background-image:    url(../objekte/icons/krone-gold.png);
}