/* Login-Bereich oben rechts – Linkfarben */
.top-login a {
    color: #9cabb9 !important; /* Hellgrau-Blau für Links */
    text-decoration: none !important; /* Unterstreichung entfernen */
}

/* Dropdown-Menü-Container */
.dropdown-menu {
    z-index: 9999; /* Immer über anderen Elementen */
    visibility: visible; /* Sichtbar (nicht ausgeblendet) */
}

/* Dropdown-Position im Login-Bereich */
.top-login .dropdown {
    position: relative; /* Positionierung relativ zum Container */
    z-index: 9999; /* Damit es nicht verdeckt wird */
}

/* Hintergrundbilder – Seitenaufbau */
.page-wallpaper,
.page-wallpaper__body {
    overflow: visible !important; /* Überlauf sichtbar lassen */
    position: relative;
    z-index: 1; /* Stapelreihenfolge */
}

/* Dropdown-Design */
.dropdown-menu {
    background-color: #1a1a1a; /* Dunkler Hintergrund */
    border: none; /* Kein Rand */
    padding: 0;
    min-width: 140px; /* Mindestbreite */
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.6); /* Schatten */
}

/* Dropdown-Links */
.dropdown-menu .dropdown-item {
    color: #f7961e; /* Orange-Goldene Schrift */
    padding: 10px 15px; /* Innenabstand */
    font-weight: 500; /* Mittlere Schriftstärke */
    text-transform: uppercase; /* Alles groß */
    font-size: 13px;
}

/* Hover-Effekt für Dropdown-Links */
.dropdown-menu .dropdown-item:hover {
    background-color: #2b2b2b; /* Dunkler Hintergrund beim Hover */
    color: #ffffff; /* Weiße Schrift beim Hover */
}

/* Inventar-Container – Ausrichtung horizontal */
.inventory-items {
    display: flex; /* Flexbox für Anordnung */
    gap: 10px; /* Abstand zwischen Slots */
}

/* Inventar-Slots */
.inventory-items .player-inventory__slot,
#bmSellPopupModal .player-inventory__slot {
    width: 34px;
    height: 34px;
    border: 1px solid #2d222a; /* Dunkler Rahmen */
    padding: 1px;
    cursor: pointer; /* Mauszeiger als Hand */
}

/* Inventar-Slots in Modals */
#bmSellPopupModal .player-inventory__slot,
#bmBuyPopupModal .player-inventory__slot {
    display: inline-block;
    cursor: unset; /* Kein Klick-Cursor */
}

/* Blackmarket-Items */
.blackmarket-items__item {
    border: 1px solid #ca8945; /* Gold-Brauner Rahmen */
    padding: .5rem .6rem; /* Innenabstand */
}

/* Inventar-Slots im Blackmarket */
.blackmarket-items__item .player-inventory__slot {
    position: relative; /* Für Positionierung von Inhalt */
}

/* Blog-Preview-Karten */
.blog-preview-card {
    border-radius: 6px; /* Abgerundete Ecken */
    transition: transform 0.2s ease, box-shadow 0.2s ease; /* Animation */
}

/* Hover-Effekt für Blog-Karten */
.blog-preview-card:hover {
    transform: scale(1.01); /* Leichtes Vergrößern */
    box-shadow: 0 0 10px rgba(255, 200, 0, 0.15); /* Goldener Schimmer */
}
/* =========================
   Blog Preview Wrapper
   ========================= */
.blog-preview-wrapper {
    border-radius: 8px;       /* Abgerundete Ecken für die Blog-Box */
    overflow: hidden;         /* Verhindert, dass Inhalte über den Container hinaus ragen */
}

/* Wrapper für Blog-Bilder */
.blog-preview-image-wrapper {
    max-height: 250px;        /* Maximale Höhe des Bildes */
    overflow: hidden;         /* Verhindert, dass Bilder über die Box hinausragen */
}

/* Blog-Bilder selbst */
.blog-preview-image {
    width: 100%;              /* Bild passt sich der Containerbreite an */
    height: 250px;            /* Feste Höhe für einheitliche Darstellung */
    object-fit: cover;        /* Bild wird zugeschnitten, um den Container zu füllen */
    display: block;           /* Block-Level-Element, keine Inline-Abstände */
}

/* Blog-Inhalt rechts neben Bild */
.blog-preview-content {
    padding: 1.5rem;          /* Innenabstand */
    display: flex;            /* Flexbox für vertikale Anordnung */
    flex-direction: column;   /* Inhalt wird vertikal angeordnet */
    justify-content: space-between; /* Abstand zwischen oberen und unteren Elementen */
}

/* Hervorhebung von Belohnungen (z.B. Gold-Boxen) */
.highlight-reward {
    border: 2px solid gold;   /* Goldener Rahmen */
    background: linear-gradient(135deg, rgba(255,215,0,0.2), rgba(255,215,0,0.05)); /* Leichtes Gold-Gradient */
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.5); /* Glow-Effekt */
    transform: scale(1.05);   /* Leichte Vergrößerung */
}

/* Bild innerhalb der Highlight-Box */
.highlight-reward img {
    border: 1px solid gold;   /* Goldener Rahmen um das Bild */
}

/* Überschrift innerhalb Highlight-Box */
.highlight-reward h6 {
    color: gold;              /* Schriftfarbe Gold */
}

/* =========================
   Responsive Grid für Spalten
   ========================= */
@media (min-width: 568px) {
    .col-md-4 {
        flex: 0 0 25%;        /* 25% Breite auf mittleren Bildschirmen */
        max-width: 25%;
    }
    .col-md-8 {
        flex: 0 0 75%;        /* 75% Breite auf mittleren Bildschirmen */
        max-width: 75%;
    }
}

/* =========================
   Allgemeine Sektionen / Boxen
   ========================= */
.section {
    border: 2px solid rgb(45, 34, 42);    /* Rahmen um die Box, gleiche farbe wie bei blog */ 
    border-radius: 6px;       /* Abgerundete Ecken */
    padding: 15px;            /* Innenabstand */
}


.section,
.server-box {
    font-family: 'Inter', sans-serif;
    font-size: 1rem; /* gleiche wie Willkommensbox */
    line-height: 1.5;
    color: #7e5d2f; /* gleiche Farbe wie Willkommensbox-Text */
}


/* Status-Linie innerhalb Server Status */
.status-line {
    display: flex;             /* Flexbox für Label und Wert */
    justify-content: space-between; /* Label links, Wert rechts */
    align-items: center;       /* Vertikal zentriert */
    padding: 0px 0;            /* Abstand oben und unten */
}

/* Letzte Status-Linie bekommt keine untere Linie */
.status-line:last-child {
    border-bottom: none;
}

/* Willkommen Box */
welcome-box {
    text-align: center;        /* Inhalt zentrieren */
    padding: 25px;             /* Innenabstand */
    border-radius: 12px;       /* Runde Ecken */
    margin-bottom: 20px;       /* Abstand nach unten */
}

/* Überschrift in Welcome-Box */
.welcome-box h2 {
    font-size: 26px;
    margin-bottom: 10px;
    font-weight: bold;         /* Fett */
}


/* Container für den Fraktions-Balken unterhalb der Server-Status-Infos */
.faction-balance {
    display: flex; /* Beide Fraktionen nebeneinander */
    width: 100%; /* Volle Breite der Status-Box */ 
    height: 32px; /* Höhe des Balkens */
    margin-top: 10px; /* Abstand nach oben */
    border: 1px solid #000; /* Schwarzer Rahmen */
    border-radius: 4px; /* Abgerundete Ecken */
    overflow: hidden; /* Alles außerhalb wird abgeschnitten */
}

/* Gemeinsamer Stil für beide Fraktionsbereiche */
.faction {
    flex: 1; /* Beide gleich groß (kann später prozentual angepasst werden) */
    text-align: center; /* Text mittig */
    line-height: 32px; /* Vertikal mittig */
    //font-weight: bold; /* Fett */
    color: #fff; /* Weißer Text */
    font-size: 11px; /* Gut lesbare Größe */
}

/* Allianz des Lichts (AoL) - heller oben, dunkler unten */
.faction-aol {
    background: radial-gradient(ellipse at center, #153058, #112849); /* Hell → Dunkel */
}

/* Union der Fury (UoF) - heller oben, dunkler unten */
.faction-uof {
    background: radial-gradient(ellipse at center, #601A1A, #4E1515); /* Hell → Dunkel */
}


/* =========================
   Countdown Styles
   ========================= */
.countdown-wrapper {
    padding: 20px;             /* Innenabstand */
    text-align: center;        /* Zentriert */
    margin-bottom: 20px;       /* Abstand nach unten */
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.3); /* Glow-Effekt */
}

/* Überschrift Countdown */
.countdown-wrapper h3 {
    margin-bottom: 15px;
    color: gold;               /* Schriftfarbe Gold */
    text-transform: uppercase; /* Großbuchstaben */
    font-weight: bold;
}

/* Countdown Box */
#countdown {
    display: flex;             /* Flexbox für die Timer-Zahlen */
    justify-content: center;   /* Zentriert horizontal */
    gap: 15px;                 /* Abstand zwischen Zahlen */
}

/* Jede einzelne Countdown-Einheit */
#countdown div {
    padding: 10px 15px;        /* Innenabstand */
    min-width: 60px;           /* Mindestbreite */
    box-shadow: inset 0 0 10px rgba(255, 215, 0, 0.3); /* Innen-Glow */
}

/* Countdown-Zahlen */
#countdown span {
    display: block;
    font-size: 22px;
    font-weight: bold;
}

/* Countdown-Kleintext (Days, Hours, etc.) */
#countdown small {
    font-size: 12px;
}

/* =========================
   Hintergrundbild / Wallpaper
   ========================= */
.page-wallpaper {
    position: relative;        /* wichtig für absolute Positionierung von Logo */
}

/* Logo Centering */
.logo-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* zentriert in Container */
    max-width: 300px;   
    width: auto;               /* Automatische Breite */
    height: auto;              /* Automatische Höhe */
    pointer-events: none;      /* Klicks durch das Logo durchlassen */
    user-select: none;         /* Nicht markierbar */
    z-index: 10;               /* Über allen anderen Elementen */
}

/* Countdown-Box ohne Rahmen */
#custom-countdown {
    border: none !important;
}

/* =========================
   Server Status Box
   ========================= */
.server-status {
        padding: 20px;
    border-radius: 6px;        /* Runde Ecken */
        color: #666;               /* Standardtextfarbe */
    font-size: 0.9rem;
    line-height: 1.2;
}

/* Titel innerhalb Server Status */
.server-status .title {
    text-align: center;
    margin-bottom: 15px;
    color: #b58d2f;            /* Goldbraun */
}

/* Status-Linien in Server Status */
.server-status .status-line {
    display: flex;             /* Flexbox für Label + Wert */
    justify-content: space-between; /* Label links, Wert rechts */
    align-items: center;       /* Vertikal zentriert */
    margin-bottom: 8px;        /* Abstand unten */
}

/* Label (Text) in Status-Linien */
.server-status .status-line .label {
    font-weight: 700;
    color: #7e5d2f;           /* Gold-Braun */
}

/* Wert (Value) in Status-Linien */
.server-status .status-line .value {
    font-weight: 700;
    color: #11BA0F;           /* Grün = Online */
}

/* Wert für Offline */
.server-status .status-line.offline .value {
    color: #F44336;           /* Rot = Offline */
}

/* =========================
   Logo Animation
   ========================= */
.logo-animate {
    animation: pulse 1s infinite; /* Endlosschleife, 1 Sekunde */
}

/* Pulsierende Animation */
@keyframes pulse {
    0%   { transform: scale(1); }      /* Startgröße normal */
    50%  { transform: scale(1.03); }   /* Größer werden */
    100% { transform: scale(1); }      /* Zurück zur Originalgröße */