@import url('https://fonts.googleapis.com/css2?family=Exo+2:wght@400;600&family=Exo:wght@400;600&display=swap');

body
{
       font-family: 'Exo 2', Helvetica, sans-serif;
       height: 100%;
       margin: 0px;
       padding: 0px;
       background-color: #FFFFFF;
       text-align: center;
}

#mittig {
        position: relative;
        width: 99%;
        margin: 0% auto;
        padding: 0% 0% 0% 1%;
        text-align: left;
}

#kopf {
        position: relative;
        width: 98%;
        padding: 2% 1% 5% 1%;
        text-align: left;
}

#navi {
        position: relative;
        width: 100%;
        text-align: right;
        padding: 0% 0% 3% 0%;
}

#inhalt {
        position: relative;
        width: 97%;
        margin: 0px;
        padding: 0px 1.5% 0px 0px;
        border-right: 4px solid #a8aab0;
}

#ganz {
        position: relative;
        width: 100%;
        padding: 0px;
        text-align: left;
}

#links {
        position: relative;
        width: 100%;
        padding: 0px 0% 10px 0%;
        text-align: left;
}

#rechts {
        position: relative;
        width: 100%;
        padding: 0px 0% 0px 0%;
        text-align: left;
}

#abschluss {
        position: relative;
        width: 100%;
        padding: 3% 0% 0% 0%;
        margin-bottom: 2%;
        text-align: right;
        clear: left;
}


td
{
        font-size: 100%;
        text-align: left;
        line-height: 140%;
        margin: 0px;
        color: #676869;
}

p
{
        font-size: 100%;
        text-align: left;
        line-height: 140%;
        margin: 0px;
        margin-bottom: 10px;
        color: #676869;
}

a
{
        font-size: 100%;
        line-height: 140%;
        text-decoration: none;
        margin: 0px;
        color: #3e240c;
}

a:hover, a:active, a.navi:hover, a.navi:active, #abschluss a.navi:hover, #abschluss a.navi:active
{
        color: #5767b5;
        font-weight: normal;
}

a.navi
{
        display: block;
        color: #9ea0a1;
        font-weight: normal;
        padding: 8px 0px 8px 30px;
}
a.navia
{
        display: block;
        color: #3c467a;
        font-weight: normal;
        padding: 8px 0px 8px 30px;
}

#abschluss a.navi
{
        color: #9ea0a1;
        font-weight: normal;
        padding: 8px 0px 8px 30px;
}
#abschluss a.navia
{
        color: #3c467a;
        font-weight: normal;
        padding: 8px 0px 8px 30px;
}

li   {
     font-size: 100%;
     line-height: 140%;
     font-weight: normal;
     text-align: left;
     color: #676869;
     }

ul   {
     padding-top: 0px;
     padding-bottom: 15px;
     margin-left: 0px;
     padding-left: 15px;
     }

h1
{
        font-size: 150%;
        line-height: 120%;
        letter-spacing: 4px;
        font-weight: bold;
        text-align: left;
        margin: 0px 0px 10px 0px;
        color: #3c467a;
}

h2
{
        font-size: 110%;
        line-height: 120%;
        font-weight: bold;
        text-align: left;
        margin: 0px 0px 5px 0px;
        color: #535d90;
}

h3
{
        font-size: 100%;
        line-height: 120%;
        font-weight: bold;
        text-align: left;
        margin: 0px 0px 5px 0px;
        color: #535d90;
}

h4
{
        font-size: 100%;
        line-height: 120%;
        font-weight: bold;
        text-align: left;
        margin: 0px;
        color: #535d90;
}

.abstand
{
        margin: 10px 0px 0px 0px;
}



.photo {
  position: absolute;
  width: 100%;
  margin-bottom: 30%;
  animation: round 24s infinite;
  opacity: 0;
}

@keyframes round {
  25% {
    opacity: 1;
  }
  40% {
    opacity: 0;
  }
}
img:nth-child(1) {
  animation-delay: 18s;
}

img:nth-child(2) {
  animation-delay: 12s;
}

img:nth-child(3) {
  animation-delay: 6s;
}

img:nth-child(4) {
  animation-delay: 0s;
}
}