*{
margin:0;
padding:0;
box-sizing:border-box;
}


body{

background:#050505;

color:white;

font-family:'Segoe UI',Arial,sans-serif;

overflow-x:hidden;

}


/* Hintergrund NUR unter Navigation */

.page-background{

min-height:calc(100vh - 70px);

background:

linear-gradient(
rgba(0,0,0,0.55),
rgba(0,0,0,0.85)
),

url("Background.png");


background-size:cover;

background-position:center;

padding-top:60px;

padding-bottom:60px;

}



/* Navigation */

nav{

background:#000;

padding:22px;

text-align:center;

border-bottom:1px solid #333;

}


nav a{

color:white;

text-decoration:none;

margin:18px;

letter-spacing:2px;

font-size:15px;

}


nav a:hover{

color:#d89b4d;

}



/* Inhalt */

.container{

width:900px;

max-width:90%;

margin:auto;

}



.box{

background:rgba(10,10,10,0.9);

border:1px solid #8f5a1f;

border-radius:12px;

padding:40px;

box-shadow:0 0 30px black;

}



h1{

text-align:center;

color:#d89b4d;

font-size:45px;

margin-bottom:40px;

}



.news{

background:#111;

border:1px solid #333;

border-radius:10px;

padding:25px;

margin-bottom:25px;

}


.news h2{

color:#d89b4d;

margin-bottom:15px;

}


.news p{

line-height:1.6;

color:#ddd;

}



.footer{

text-align:center;

padding:40px;

background:#000;

color:#777;

}


.footer a{

color:#d89b4d;

text-decoration:none;

}

/* Elesmera Live Server Status */

.server-status {
    position: absolute;
    top: 18px;
    right: 25px;

    background: rgba(0, 0, 0, 0.55);
    border: 1px solid rgba(180, 140, 70, 0.5);
    border-radius: 8px;

    padding: 6px 12px;

    color: #ddd;
    font-size: 13px;
    text-align: center;

    backdrop-filter: blur(4px);

    min-width: 90px;

    transition: 0.3s;
}

.server-status.online {
    color: #8cff8c;
}

.server-status.offline {
    color: #ff6b6b;
}

.server-status .players {
    display: block;
    color: #fff;
    font-size: 12px;
    margin-top: 2px;
}
.lore-navigation{

display:flex;
justify-content:space-between;
align-items:center;

margin-top:40px;
padding-top:25px;

border-top:1px solid #8f5a1f;

}


.lore-navigation a{

color:#d89b4d;

text-decoration:none;

font-size:16px;

}


.lore-navigation a:hover{

color:white;

}
/* ============================= */
/* Elesmera Chroniken Navigation */
/* ============================= */


.lore-layout {

    display:flex;
    gap:30px;
    align-items:flex-start;

}



.lore-sidebar {

    width:230px;

    background:rgba(10,10,10,0.92);

    border:1px solid #8f5a1f;

    border-radius:12px;

    padding:25px;

    box-shadow:0 0 30px black;

    position:sticky;

    top:20px;

}



.lore-sidebar h2 {

    color:#d89b4d;

    font-size:22px;

    margin-bottom:20px;

    text-align:center;

}



.lore-sidebar a {

    display:block;

    color:#ddd;

    text-decoration:none;

    padding:10px 5px;

    border-bottom:1px solid rgba(255,255,255,0.1);

    transition:0.3s;

}



.lore-sidebar a:hover {

    color:#d89b4d;

    padding-left:12px;

}



.lore-content {

    flex:1;

}




@media(max-width:900px){


.lore-layout {

    flex-direction:column;

}


.lore-sidebar {

    width:100%;

    position:relative;

}


}
/* ============================= */
/* Chroniken Seitenleiste links */
/* ============================= */


.chronicle-sidebar {

    position: fixed !important;

    left: 20px !important;

    top: 160px !important;

    width: 220px;

    background: rgba(10,10,10,0.95);

    border: 1px solid #8f5a1f;

    border-radius: 12px;

    padding: 25px;

    box-shadow: 0 0 30px black;

    z-index: 9999;

}


.chronicle-sidebar h2 {

    color:#d89b4d;

    text-align:center;

    font-size:22px;

    margin-bottom:20px;

}


.chronicle-sidebar a {

    display:block;

    color:#ddd;

    text-decoration:none;

    padding:10px 5px;

    border-bottom:1px solid rgba(255,255,255,0.1);

}


.chronicle-sidebar a:hover {

    color:#d89b4d;

    padding-left:15px;

}

/* verhindert Überlappung auf kleinen Bildschirmen */

@media(max-width:1200px){

.chronicle-sidebar{

    display:none;

}

}
/* Chroniken Layout Abstand */

body:has(.chronicle-sidebar) .container {

    margin-left:320px;
    margin-right:auto;

}


@media(max-width:1200px){

body:has(.chronicle-sidebar) .container {

    margin-left:auto;

}

}
/* FIX: Chroniken Sidebar wirklich am Bildschirmrand */

.chronicle-sidebar {

    position: fixed !important;

    left: 20px !important;

    top: 150px !important;

    width: 230px !important;

    z-index: 99999 !important;

}


/* Story nicht unter Sidebar quetschen */

body:has(.chronicle-sidebar) .container {

    width:900px;

    margin-left:auto;

    margin-right:auto;

}


@media(max-width:1300px){

    body:has(.chronicle-sidebar) .container {

        margin-left:280px;

    }

}