/* Globale Einstellungen */
* {
    box-sizing: border-box;
}

body {
    margin: 0 auto;
    background-color: #11071e;
    width: 100%;
    height: 100%;
    font: 16px Helvetica, sans-serif;
}

/* Hauptcontainer */
#container {
    margin-left: auto;
    margin-right: auto;
    width: 1400px;
    border-style: none solid none solid;
    border-color: #140a21;
    border-radius: 0px;
    line-height: 25px;
    font-weight: normal;
    font-style: normal;
    transform: matrix(1, 0, 0, 1, 0, 0);
    opacity: 1;
    box-shadow: #261141 0 2px 20px 8px;
    text-align: left;
    background-color: #160A24;
    background-blend-mode: normal;
    color: #ad8dc7;
}

/* Header */
#header {
    width: 1400px;
    height: auto;
}

.header-logo {
    background-image: url("../images/assets/cover.png");
    width: 1395px;
    height: 442px;
    margin: 0 0 20px 0;
    background-color: #140a21;
    background-position: 0px -105px;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    box-shadow: 0 6px 10px #2f1350;
    border-radius: 0;
    max-height: 300px;
}

.header-logo-text {
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #9e00ff;
    font: 14px Helvetica, sans-serif;
}

/* Navigation und Content */
#navigation {
    transform: matrix(1, 0, 0, 1, 0, 0);
    font-size: 16px;
    display: block;
    float: left;
    width: 210px;
    padding: 0 10px 15px 15px;
    text-align: left;
    min-height: 1000px;
}

#content {
    margin-left: 225px;
    width: 1162px;
}

/* Footer */
#footer {
    width: auto;
    clear: both;
    background-color: rgb(16, 7, 27);
    opacity: 1;
    letter-spacing: 1px;
    word-spacing: 5px;
    text-transform: uppercase;
    font-size: 12px;
    font-style: italic;
    padding: 5px 80px;
    border-top: 1px solid #5b407b;
}

/* Flexbox Layout für Spalten */
.footer-content {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-bottom: 10px;
    text-align: left;
}

/* Jede Spalte mit individuellen Breiten */
.footer-help {
    flex: 0 0 15%;   /* Breite 15% */
    line-height: 1.6em;
    min-width: 150px;
}

.footer-legal {
    flex: 0 0 25%;   /* Breite 25% */
    line-height: 1.6em;
    min-width: 150px;
}

.footer-social {
    flex: 0 0 15%;   /* Breite 15% */
    line-height: 1.6em;
    min-width: 150px;
}

.footer-stats {
    flex: 0 0 30%;   /* Breite 30% */
    line-height: 1.6em;
    min-width: 150px;
    text-align: right;
}

/* Footer Bottom */
.footer-bottom {
    text-align: center;
    margin: 30px 0 10px 0;
}

/* Listen innerhalb der Spalten */
.footer-help ul,
.footer-legal ul,
.footer-social ul,
.footer-stats ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-help li,
.footer-legal li,
.footer-social li,
.footer-stats li {
    margin-bottom: 5px;
}

/* Für kleine Bildschirme: Spalten untereinander */
@media (max-width: 768px) {
    .footer-help,
    .footer-legal,
    .footer-social,
    .footer-stats {
        flex: 0 0 100%;
        text-align: left;
        margin-bottom: 10px;
    }
}

/* Artikel */
article {
    display: block;
    text-align: left;
    font-size: 16px;
    width: 1120px;
    margin: 25px auto;
    padding: 10px 20px;
    background-color: #0e0512;
    box-shadow: rgb(53 19 81 / 79%) 0px 0px 10px 2px;
}

/* Links */
a {
    color: plum;
    text-decoration: none;
}

a:hover {
    color: #FFF;
    text-decoration: none;
}

/* Überschriften */
h3 {
    text-decoration: underline;
}

/* Textarea */
textarea {
    background-color: #2c1448;
    font-family: Arial;
    font-size: 13.3333px;
    color: #ad8dc7;
    border: none;
    padding: 10px;
    max-height: 150px;
    max-width: 945px;
}

/* HR Element */
hr {
    border: 1px solid #321453;
    margin-bottom: 10px;
}

/* Placeholder */
::placeholder {
    color: #ad8dc7;
    opacity: 1;
}

:-ms-input-placeholder {
    color: #ad8dc7;
}

::-ms-input-placeholder {
    color: #ad8dc7;
}

/* Inputs */
input {
    border: none;
    background: #2f1350;
    color: #ad8dc7;
}

input:focus {
    border: none;
    background: #2f1350;
    color: #bb98d8;
}

/* Labels */
label {
    display: block;
}

/* Select #birthdate */
select#birthdate {
    width: 20%;
    margin: 10px 3px 10px 0;
    display: inline-block;
}

/* Select options */
select option:hover,
option:active,
option:checked {
    border: none;
    background: #2f1350;
    color: #ad8dc7;
}

select option:focus {
    border: none;
    background: #2f1350;
    color: #bb98d8;
}

/* Login-Form */
.loginform {
    font-family: Arial;
    font-size: 12.3333px;
    position: absolute;
    padding: 10px 10px 0px 20px;
    opacity: 1;
    text-align: left;
    height: 60px;
    background-color: rgb(40 20 58 / 76%);
    background-blend-mode: normal;
    width: 875px;
    top: -3px;
    left: 250px;
}

/* Navi Member Picture */
.navi_member_picture {
    margin: 10px 10px 10px 0px;
    box-shadow: rgb(179 135 219 / 79%) 0px 0px 3px 1px;
    border-radius: 10px;
    width: 100%;
}

.navi_member_picture img {
    width: 100%;
    border-radius: 10px;
    display: flex;
}

.navi_member_picture:hover img {
    border: 1px solid #ad8dc7;
}

.navi_member_picture_auth img {
    filter: blur(8px) brightness(0.3);
    width: 100%;
    border-radius: 10px;
}

.navi_member_picture_auth:hover img {
    filter: blur(8px) brightness(0.3);
    width: 100%;
    border-radius: 10px;
    border: 1px solid #ad8dc7;
}

/* Auth Info */
.auth_info {
    position: absolute;
    width: 100%;
    margin: 70px 31px;
    font-size: large;
    z-index: 1;
}

/* Buttons */
.a_registerbtn,
.a_lostpassbtn,
.a_logoutbtn {
    background-color: #2c1448;
    font-family: Arial;
    font-size: 13.3333px;
    color: #ad8dc7;
    border: none;
    cursor: pointer;
    padding: 2px 5px;
}

.loginformbtn {
    font-family: Arial;
    font-size: 13.3333px;
    background-color: #2c1448;
    color: white;
    padding: 16px 20px;
    margin: 8px 0;
    border: none;
    cursor: pointer;
    width: 100%;
    opacity: 0.9;
}

/* Input fields - Full width */
.input_fields {
    width: 100%;
}

.input_fields textarea {
    width: 100%;
    height: 150px;
    border: none;
    background: #180a29;
    color: #ad8dc7;
}

.input_fields select,
.input_fields input[type=text],
.input_fields input[type=email],
.input_fields input[type=password] {
    width: 100%;
    padding: 15px;
    margin: 5px 0 22px 0;
    display: inline-block;
    border: none;
    background: #180a29;
    color: #ad8dc7;
}

.input_fields input[type=text]:focus,
.input_fields input[name=username]:focus,
.input_fields input[type=password]:focus,
.input_fields select:focus {
    background-color: #2c1448;
    color: white;
    outline: none;
}

.input_fields select[name=gender] {
    width: 100%;
    padding: 15px;
    margin: 5px 0 22px 0;
    display: inline-block;
    border: none;
    background: #180a29;
    color: #ad8dc7;
}

.input_fields select[name=gender]:focus {
    background-color: #2c1448;
    color: white;
    outline: none;
}

/* Register Button */
.registerbtn {
    background-color: #2c1448;
    color: white;
    padding: 16px 20px;
    margin: 8px 0;
    border: none;
    cursor: pointer;
    width: 100%;
    opacity: 0.9;
}

.registerbtn:hover {
    opacity: 1;
}

/* Signin Section */
.signin {
    background-color: #24103a;
    text-align: center;
}

/* Discord iframe */
.iframe-discord {
    float: right;
}

/* Video Content Layout */
.video-content-50 {
    display: flex;
}

.vc-50-video {
    flex: 0 0 50%;
}

.vc-50-text {
    flex-grow: 1;
    padding-left: 50px;
}

/* Grid Layout */
.grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.grid-colum {
    margin: 5px 20px 5px 0;
}

/* News-Artikel */
.news-container {
    max-width: 1000px;
    margin: 40px auto;
    padding: 25px;
    background: #0f0718;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgb(0 0 0 / 52%);
}
.news-header {
    text-align: center;
    margin-bottom: 30px;
}
.news-header h1 {
    margin: 0;
    font-size: 2rem;
    color: #ad8dc7;
}
.news-header p {
    font-size: 1rem;
    color: #666;
    margin-top: 10px;
}
.news-item {
    border-bottom: 1px solid #ddd;
    padding: 20px 0;
}
.news-item:last-child {
    border-bottom: none;
}
.news-title {
    font-size: 1.4rem;
    color: #ad8da8;
    margin: 0 0 10px 0;
}
.news-meta {
    font-size: 0.9rem;
    color: #f6c2ff;
    margin-bottom: 10px;
}
.news-content {
    font-size: 1rem;
    color: #ad8da8;
    line-height: 1.6;
}

/* Note Cards */
.notecard,
.notecard-red,
.notecard-green,
.notecard-yellow {
    background-color: #11071c;
    border-left: 10px solid #200f35;
    border-radius: 10px;
    padding: 5px 20px;
    position: relative;
    color: #ad8dc7;
    margin: 0 0 10px 0;
}

.notecard hr,
.notecard-red hr,
.notecard-green hr,
.notecard-yellow hr {
    border: 1px solid;
}

.notecard hr {
    border-color: #321453;
}

.notecard.space {
    margin: 0 5px;
    width: 50%;
}

.notecard-red {
    color: #ff5757;
    border-left-color: #ff5757;
    background-color: #0c0514;
}

.notecard-red hr {
    border-color: #ff5757;
}

.notecard-green {
    color: green;
    border-left-color: green;
    background-color: #0c0514;
}

.notecard-green hr {
    border-color: #ad8dc7;
}

.notecard-yellow {
    color: yellow;
    border-left-color: yellow;
    background-color: #0c0514;
}

.notecard-yellow hr {
    border-color: #ad8dc7;
}

/* Notecard Wrap */
.notecard-wrap {
    display: flex;
    flex-wrap: nowrap;
}