/* --- Grundlegende Einstellungen --- */
/*--- body {
 /*---   background-color: #0d0c0a; /* Sehr dunkles Braun/Schwarz für den Rand */
 /*---   background-image: repeating-linear-gradient(45deg, #111 25%, transparent 25%, transparent 75%, #111 75%, #111), repeating-linear-gradient(45deg, #111 25%, #0d0c0a 25%, #0d0c0a 75%, #111 75%, #111);
 /*---   background-position: 0 0, 9px 9px;
 /*---   background-size: 18px 18px; /* Simuliert ein dunkles Stein/Muster im Hintergrund */
 /*---   color: #c9b99b;
 /*---   font-family: Arial, Helvetica, sans-serif;
  /*---  margin: 0;
  /*---  padding: 20px 0;
} --- */
/* --- Grundlegende Einstellungen --- */
body {
    background-color: #0d0c0a; /* Fallback-Farbe, falls das Bild mal nicht lädt */
    
    /* Hier fügst du den Link oder den Pfad zu deinem Hintergrundbild ein */
    background-image: url("../images/background/RSNecro.png"); 
    
    background-repeat: repeat; /* Typisch für 2009: Das Bild kachelt sich über den ganzen Bildschirm */
    background-attachment: fixed; /* Sehr cool: Das Hintergrundbild bleibt stehen, wenn man scrollt! */
    background-position: center top;
    
    color: #c9b99b;
    font-family: Arial, Helvetica, sans-serif;
    margin: 0;
    padding: 20px 0;
}
h1, h2, h3 {
    font-family: Georgia, "Times New Roman", Times, serif; /* Klassische Mittelalter-Schrift */
    font-weight: normal;
}

/* --- Wrapper (Der Container in der Mitte) --- */
#page-wrapper {
    width: 900px;
    margin: 0 auto;
    background-color: #1e1811; /* Dunkles Holz/Leder */
    border: 3px solid #5c4a30; /* Bronzener/Holziger Rand */
    box-shadow: 0 0 20px #000;
}
/* --- Kopfzeile --- */
#header {
    background-color: #2b2318;
    text-align: center;
    /* Wir entfernen das Padding hier, damit das Bild direkt an den Rand stößt */
    padding: 0; 
}

/* Das neue Banner-Bild */
.header-banner {
    width: 100%; /* Füllt exakt die 900px Breite des Wrappers aus */
    height: auto;
    display: block;
    border-bottom: 2px solid #8e7343; /* Goldener Trennstrich unter dem Bild */
}

/* Der Text unter dem Bild (optional) */
.header-text {
    padding: 15px 0; /* Gibt dem Text wieder etwas Luft zum Atmen */
}

#header h1 {
    color: #ffd700; /* RS Gold */
    font-size: 36px; /* Etwas kleiner, da das Bild jetzt der Fokus ist */
    margin: 0;
    text-shadow: 2px 2px 4px #000;
}

#header p {
    color: #a3957b;
    margin-top: 5px;
    margin-bottom: 0;
    font-style: italic;
}


/* --- Navigation --- */
#main-nav {
    background-color: #14110d;
    border-bottom: 2px solid #5c4a30;
}

#main-nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
}

#main-nav li {
    border-right: 1px solid #332a1e;
}

#main-nav li:last-child {
    border-right: none;
}

#main-nav a {
    display: block;
    color: #d7c5a3;
    text-decoration: none;
    padding: 12px 25px;
    font-size: 15px;
    font-weight: bold;
    text-transform: uppercase;
    transition: all 0.2s ease;
}

#main-nav a:hover, #main-nav a.active {
    background-color: #3b3022;
    color: #ffd700;
    text-shadow: 1px 1px 2px #000;
}

/* --- Hauptinhalt Layout --- */
#content {
    display: flex;
    padding: 20px;
    gap: 20px;
}

/* --- Pergament-Box (Für News / Text) --- */
.parchment-box {
    flex: 3;
    background-color: #e5d4aa; /* Helles Pergament */
    border: 2px solid #7a6344;
    border-radius: 4px;
    color: #3a2a18; /* Dunkelbrauner Text, gut lesbar */
    box-shadow: inset 0 0 20px rgba(139, 115, 85, 0.4);
}

.box-header {
    background-color: #c7b384;
    border-bottom: 1px solid #8e7343;
    padding: 10px 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.box-header h2 {
    margin: 0;
    font-size: 22px;
    color: #332211;
}

.box-header .date {
    font-size: 12px;
    color: #554433;
    font-weight: bold;
}

.box-content {
    padding: 15px;
    line-height: 1.6;
}

.box-content h3 {
    color: #661100; /* Dunkelrot für Überschriften im Pergament */
    border-bottom: 1px dotted #8e7343;
    padding-bottom: 5px;
}

.box-content hr {
    border: 0;
    border-top: 1px solid #c7b384;
    margin: 20px 0;
}

/* --- Sidebar Box --- */
.side-box {
    flex: 1;
    background-color: #262016;
    border: 2px solid #5c4a30;
    padding: 15px;
    text-align: center;
}

.side-box h3 {
    color: #ffd700;
    margin-top: 0;
    border-bottom: 1px solid #5c4a30;
    padding-bottom: 10px;
}

.avatar {
    border: 2px solid #8e7343;
    border-radius: 4px;
    margin-bottom: 10px;
}

/* --- Buttons --- */
.btn {
    display: inline-block;
    background-color: #4a3b26;
    color: #e5d4aa;
    text-decoration: none;
    padding: 8px 12px;
    border: 1px solid #8e7343;
    border-radius: 3px;
    font-size: 13px;
    margin-top: 10px;
}

.btn:hover {
    background-color: #634f33;
    color: #fff;
}

/* --- Fußzeile --- */
#footer {
    background-color: #110e0b;
    border-top: 2px solid #5c4a30;
    text-align: center;
    padding: 20px;
    font-size: 12px;
    color: #6a5d4a;
}

/* --- Mitglieder Tabelle --- */
.member-table {
    width: 100%;
    border-collapse: collapse; /* Entfernt doppelte Rahmenlinien */
    margin-top: 20px;
    font-size: 15px;
}

.member-table th {
    background-color: #2b2318; /* Dunkles Holz für den Tabellenkopf */
    color: #ffd700; /* RS Gold */
    padding: 12px;
    border: 2px solid #8e7343;
    text-align: left;
    font-family: Georgia, "Times New Roman", Times, serif;
}

.member-table td {
    background-color: #e5d4aa; /* Helles Pergament */
    color: #3a2a18;
    padding: 10px 12px;
    border: 1px solid #7a6344; /* Brauner Rand */
}

/* Zebra-Streifen für bessere Lesbarkeit (jede zweite Zeile wird etwas dunkler) */
.member-table tr:nth-child(even) td {
    background-color: #d7c5a3; 
}

/* Schöner Hover-Effekt, wenn man mit der Maus über eine Zeile fährt */
.member-table tr:hover td {
    background-color: #fdf3d9;
    cursor: default;
}

/* Kleine Icons für die Ränge */
.rank-icon {
    width: 20px;
    height: 20px;
    vertical-align: middle;
    margin-right: 5px;
    border: 1px solid #5c4a30;
    border-radius: 2px;
}

/* --- Bildergalerie Layout --- */

/* Der Container, der das Raster aufbaut */
.image-gallery {
    display: grid;
    /* Erstellt automatisch so viele Spalten, wie bei einer Mindestbreite von 250px nebeneinander passen */
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px; /* Abstand zwischen den Bildern */
    margin-top: 20px;
}

/* Ein einzelnes Bild mit Rahmen und Text */
.gallery-item {
    background-color: #2b2318; /* Dunkler Hintergrund wie ein Bilderrahmen */
    border: 2px solid #8e7343; /* Goldener Rahmen */
    border-radius: 4px;
    padding: 10px;
    text-align: center;
    transition: transform 0.2s ease, box-shadow 0.2s ease; /* Weicher Übergang für den Hover-Effekt */
}

/* Der Hover-Effekt: Das Bild hebt sich leicht an und leuchtet etwas */
.gallery-item:hover {
    transform: translateY(-5px); /* Schiebt das Bild 5px nach oben */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.7);
    border-color: #ffd700; /* Rahmen wird heller beim drüberfahren */
}

/* Das eigentliche Bild (Screenshot) */
.gallery-item img {
    width: 100%; /* Passt sich der Breite des Rahmens an */
    height: 180px; /* Feste Höhe, damit alle Boxen gleich groß aussehen */
    object-fit: cover; /* Verhindert Verzerrung bei komischen Bildformaten */
    border: 1px solid #1a140d;
    border-radius: 2px;
}

/* Der Text unter dem Bild */
.gallery-item .caption {
    color: #d7c5a3;
    font-size: 13px;
    margin-top: 10px;
    font-style: italic;
    line-height: 1.4;
}
/* --- Erfolge / Ruhmeshalle --- */

.achievement-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 15px;
    margin-bottom: 20px;
}

/* Die einzelne Erfolgs-Karte */
.achievement-card {
    display: flex;
    align-items: center;
    background-color: #d7c5a3; /* Etwas dunkleres Pergament für Kontrast */
    border: 2px solid #8e7343;
    border-radius: 5px;
    padding: 10px;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
    transition: background-color 0.2s;
}

.achievement-card:hover {
    background-color: #fdf3d9; /* Heller beim drüberfahren */
}

/* Spezielle Farbe für die Beute-Karten, um sie von Level 99 zu unterscheiden */
.loot-card {
    border-color: #5c4a30;
    background-color: #c7b384;
}

.loot-card:hover {
    background-color: #d7c5a3;
}

/* Das Icon (Skill-Symbol oder Item) */
.achievement-icon {
    width: 50px;
    height: 50px;
    border: 2px solid #3a2a18;
    border-radius: 4px;
    margin-right: 15px;
    background-color: #2b2318;
}

/* Der Textbereich in der Karte */
.achievement-info h4 {
    margin: 0 0 5px 0;
    color: #661100; /* Dunkelrot */
    font-size: 16px;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
}

.achievement-info p {
    margin: 2px 0;
    font-size: 13px;
    color: #3a2a18;
}

.achievement-info .date {
    font-size: 11px;
    color: #554433;
    font-style: italic;
    margin-top: 5px;
}
/* --- Termine / Event-Liste --- */

.event-list {
    display: flex;
    flex-direction: column;
    gap: 15px; /* Abstand zwischen den Events */
    margin-top: 20px;
}

/* Das einzelne Event */
.event-item {
    display: flex;
    background-color: #d7c5a3; /* Dunkleres Pergament für Kontrast */
    border: 2px solid #8e7343; /* Goldener Rahmen */
    border-radius: 4px;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
    overflow: hidden; /* Damit die Ecken abgerundet bleiben */
    transition: transform 0.2s, box-shadow 0.2s;
}

.event-item:hover {
    transform: translateX(5px); /* Event schiebt sich leicht nach rechts, wenn man drüberfährt */
    box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.3);
    background-color: #fdf3d9;
}

/* Der Datums-Block (Kalenderblatt-Optik) */
.event-date {
    background-color: #3b3022; /* Dunkles Holz */
    color: #ffd700; /* RS Gold */
    padding: 15px 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-right: 2px solid #8e7343;
    min-width: 80px;
    text-shadow: 1px 1px 2px #000;
}

.event-date .day {
    font-size: 28px;
    font-weight: bold;
    font-family: Georgia, "Times New Roman", Times, serif;
}

.event-date .month {
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Die Event-Details */
.event-details {
    padding: 15px;
    color: #3a2a18;
}

.event-details h3 {
    margin: 0 0 10px 0;
    color: #661100; /* Dunkelrot */
    font-size: 18px;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    border-bottom: 1px dotted #8e7343;
    padding-bottom: 5px;
}

.event-details p {
    margin: 5px 0;
    font-size: 14px;
}

.event-details strong {
    color: #332211;
}