/**
    ========= grundlegende Styles =========
**/

body {
    background-color: #1a1a2e;
    color: #ffffff;
    min-height: 100vh;
}

.header {
    background: radial-gradient(circle, rgba(0, 255, 255, 0.05) 0%, rgba(26, 26, 46, 1) 70%);
    /** border-bottom: 1px solid #00ffff; **/
    text-align: center;
}

.header img {
    border-radius: 15px;
}

.header .hero-banner {
    width: 100%;
    opacity: 0.7;
}

.top {
    background: rgba(0, 255, 255, 0.05);
}
.content .left {
    background: rgba(255, 255, 255, 0.02);
}

.content .main{
    min-height: 400px;
}

.content .right {
    background: rgba(255, 255, 255, 0.02);
}

.top_footer {
    border-top: 1px solid rgba(0, 255, 255, 0.2);
}

.footer {
    background: #121225;
}

/**
    ========= Navigationsleiste =========
**/
.top {
  border-radius: 10px;
}
.main-navigation .navigation-list {
    display: flex;
    list-style: none;
    justify-content: space-evenly;
}

.main-navigation .navigation-list li a {
    display: block;
    color: #ffffff;
    text-decoration: none;
    padding: 8px 24px;
    font-size: 16px;
    /* transition: all 0.3s ease; */
    border-radius: 15px;
}

.main-navigation .navigation-list li a:hover{
    background: rgba(0, 255, 255, 0.1);
}

/**
    ========= Modulgestaltung =========
**/

.content .module, .main .beitrag1,  .content .main .home{
    background-color: #1a1a2e;
    color: #ffffff;
}

.content .main .home {
    text-align: center;
}

.content .main .home .phase h3{
    color: #ffd700;
    font-size: 1.17em;
    font-weight: bold;
    margin-bottom: 15px;
}

.home {
    padding: 20px;
}