/* =========================================
   PRIMARY BUTTON
   ========================================= */

.btn-primary {
    background-color: #08090c !important;
    border: 1px solid #B08D2C !important;
    color: #B08D2C !important;

    padding: 11px 34px;

    text-transform: uppercase;
    font-weight: bold;
    letter-spacing: 1.5px;

    transition: none;
}

.btn-primary:hover {
    background-color: #B08D2C !important;
    border-color: #B08D2C !important;
    color: #08090c !important;

    box-shadow: none;
    transform: none;
}


/* =========================================
   FORM INPUTS
   ========================================= */

input[type="text"],
input[type="password"],
select,
input[type="date"],
.form-control,
.form-select {
    background-color: #08090c !important;

    border: 1px solid #2a2a2a !important;

    color: #fff !important;

    box-shadow: none !important;
}


/* =========================================
   FORM INPUT FOCUS
   ========================================= */

.form-control:focus,
.form-select:focus {
    color: #fff !important;

    background-color: #08090c !important;

    border-color: #B08D2C !important;

    outline: 0 !important;

    /*
       Kein Glow / keine animierte Linie
    */
    box-shadow: none !important;
}


/* =========================================
   FORM PLACEHOLDER
   ========================================= */

.form-control::placeholder {
    color: #666 !important;

    opacity: 1;
}


/* =========================================
   BANNER SECTION
   ========================================= */

.home-banner__item h1 {
    color: #B08D2C;

    font-size: 40px;

    letter-spacing: 3px;

    padding: 7px 50px 14px;

    margin: 0;

    text-transform: uppercase;
}


.home-banner__item p {
    color: #B08D2C;

    font-size: 18px;

    line-height: 1.4;

    padding: 0 50px 0;

    margin: 0;

    position: relative;
}


/*
   Keine animierte Linie unter dem Banner
*/

.home-banner__item p:after {
    display: none;
}


/* =========================================
   BANNER BUTTON
   ========================================= */

.banner-button {
    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    width: 160px;

    height: 110px;

    border-radius: 3px;

    padding: 5px;

    margin: 0 15px;

    overflow: hidden;

    cursor: pointer;

    background: #08090c;

    border: 1px solid #3A2D12;

    /*
       Keine Animation
    */
    transition: none;
}


.banner-button:hover {
    background-color: #B08D2C;

    background-image: none;

    border-color: #B08D2C;

    box-shadow: none;

    text-decoration: none;

    transform: none;
}


/* =========================================
   BANNER BUTTON ICON
   ========================================= */

.banner-button .icon {
    width: 150px;
    height: 80px;
}


/* =========================================
   BANNER BUTTON TITLE
   ========================================= */

.banner-button h4 {
    color: #B08D2C;

    margin: 0;

    text-transform: uppercase;

    letter-spacing: 1.5px;
}


/* =========================================
   BREADCRUMBS
   ========================================= */

.breadcrumb {
    justify-content: center;
}


.breadcrumb .separator {
    color: #8c7f7e !important;

    padding: 0 5px;
}


/* =========================================
   HOME CONTENT
   ========================================= */

.home-content {
    background-color: rgba(0, 0, 0, 0.75);
}


/* =========================================
   WIDE CONTENT
   ========================================= */

@media (min-width: 1368px) {

    .content--wide {
        width: 1358px;
    }

}


/* =========================================
   HOME WRAPPER
   ========================================= */

.home-wrap {
    display: flex;

    margin: 40px auto 10px;
}


/* =========================================
   FOOTER
   ========================================= */

.footer {
    background-color: #040404;

    padding: 0 0 28px 0;

    border-top: 2px solid #3A2D12;

    margin-top: 100px;
}


/* =========================================
   FOOTER LINKS
   ========================================= */

.footer .footer__links {
    display: flex;

    flex-wrap: wrap;

    width: 100%;

    justify-content: center;

    user-select: none;

    box-sizing: border-box;

    background: #0a0a0c;

    padding: 18px;

    margin: 0;

    color: #666;

    font-weight: 700;

    font-size: 13px;

    letter-spacing: .08em;

    text-align: center;

    text-transform: uppercase;
}


/* =========================================
   FOOTER LINK ITEMS
   ========================================= */

.footer__links a,
.footer-legal-links a {
    display: block;

    padding: 8px 16px;

    text-decoration: none;

    color: #ccc;

    transition: none;
}


.footer__links a:hover,
.footer-legal-links a:hover {
    background: #08090c;

    color: #B08D2C;

    border-radius: 2px;

    box-shadow: none;
}


/* =========================================
   FOOTER COPYRIGHT
   ========================================= */

.footer .footer__copyright {
    margin: 0 auto;

    max-width: 640px;

    padding: 24px 0 8px;

    font-weight: 500;

    font-size: 13px;

    line-height: 140%;

    text-align: center;

    word-break: keep-all;

    color: #666;
}


/* =========================================
   FOOTER LEGAL LINKS
   ========================================= */

.footer .footer-legal-links {
    display: flex;

    justify-content: center;

    user-select: none;

    box-sizing: border-box;

    padding: 24px 0 28px;

    font-weight: 700;

    font-size: 13px;

    letter-spacing: .08em;

    text-align: center;

    text-transform: uppercase;
}


/* =========================================
   DONATE BACKGROUNDS
   ========================================= */

/*
   Dunkler Onyx-Hintergrund statt der bisherigen Bilder.
*/

.donate-item .bg-1,
.donate-item .bg-2,
.donate-item .bg-3,
.donate-item .bg-4,
.donate-item .bg-5,
.donate-item .bg-6,
.donate-item .bg-7,
.donate-item .bg-8,
.donate-item .bg-9 {
    background: linear-gradient(
        135deg,
        #101114 0%,
        #08090c 100%
    );

    background-size: cover;

    background-position: center;

    border: 1px solid #3A2D12;
}


/* =========================================
   PREMIUM PANEL
   ========================================= */

.premium-panel {
    background: #0c0c0c;

    padding: 25px;

    border: 1px solid #3A2D12;

    border-radius: 4px;

    position: relative;

    overflow: hidden;

    box-shadow:
        0 15px 40px rgba(0, 0, 0, .8);
}


/*
   Keine bewegliche Gold-Linie.
*/

.premium-panel::before {
    display: none;
}


/*
   Alte Animation bewusst deaktiviert.
*/

@keyframes v-s {
    0% {
        transform: none;
    }

    100% {
        transform: none;
    }
}


/* =========================================
   ONYX GRID
   ========================================= */

.onyx-grid {
    display: grid;

    grid-template-columns: 1fr 1.7fr 1fr;

    gap: 25px;

    margin-top: 40px;

    width: 100%;
}


/* =========================================
   ONYX BOX
   ========================================= */

.onyx-box {
    background-color: #040404;

    border: 1px solid #3A2D12;

    box-shadow:
        0 0 10px rgba(0, 0, 0, 0.8),
        inset 0 0 20px rgba(0, 0, 0, 0.8);

    position: relative;

    overflow: hidden;
}


/* =========================================
   ONYX BOX HEADER
   ========================================= */

.onyx-box-header {
    background: linear-gradient(
        180deg,
        #1a1a1a 0%,
        #0a0a0c 100%
    );

    border-bottom: 1px solid #3A2D12;

    padding: 10px 15px;

    font-size: 11px;

    font-weight: bold;

    text-transform: uppercase;

    color: #B08D2C;

    letter-spacing: 2px;
}


/* =========================================
   ONYX BOX CONTENT
   ========================================= */

.onyx-box-content {
    padding: 20px;

    background-color: #040404;
}


/* =========================================
   ONYX IMAGE BOX
   ========================================= */

.onyx-box.image-box {
    min-height: 200px;

    display: flex;

    align-items: center;

    justify-content: center;

    background:
        linear-gradient(
            135deg,
            #101114 0%,
            #08090c 100%
        );

    background-size: cover;

    background-position: center;

    cursor: pointer;

    transition: none;
}


/* =========================================
   IMAGE BOX HOVER
   ========================================= */

.onyx-box.image-box:hover {
    transform: none;

    border-color: #3A2D12;

    box-shadow:
        0 0 10px rgba(0, 0, 0, 0.8),
        inset 0 0 20px rgba(0, 0, 0, 0.8);
}


/* =========================================
   IMAGE BOX TITLE
   ========================================= */

.onyx-box.image-box h3 {
    color: #fff;

    text-shadow:
        2px 2px 4px #000;

    margin: 0;

    text-transform: uppercase;

    letter-spacing: 3px;

    font-size: 24px;
}


/* =========================================
   IMAGE BOX SUBTITLE
   ========================================= */

.onyx-box.image-box .sub {
    color: #B08D2C;

    font-size: 14px;

    text-transform: uppercase;

    letter-spacing: 2px;

    text-shadow:
        1px 1px 2px #000;
}


/* =========================================
   ONYX BUTTON
   ========================================= */

.btn-onyx {
    background: #08090c;

    border: 1px solid #B08D2C;

    color: #B08D2C;

    padding: 10px 20px;

    text-transform: uppercase;

    font-weight: bold;

    letter-spacing: 2px;

    width: 100%;

    transition: none;
}


.btn-onyx:hover {
    background: #B08D2C;

    color: #08090c;

    border-color: #B08D2C;

    transform: none;

    box-shadow: none;
}


.btn-onyx:focus,
.btn-onyx:active {
    background: #B08D2C;

    color: #08090c;

    border-color: #B08D2C;

    box-shadow: none;

    outline: none;

    transform: none;
}


/* =========================================
   ONYX LINKS
   ========================================= */

.onyx-box a {
    color: #B08D2C;
}


.onyx-box a:hover {
    color: #D0AA4A;
}


/* =========================================
   ONYX STRONG TEXT
   ========================================= */

.onyx-box strong {
    color: #B08D2C;
}


/* =========================================
   ONYX HEADER ELEMENTS
   ========================================= */

.onyx-box-header span {
    color: #B08D2C;
}


/* =========================================
   ONYX FORM INPUTS
   ========================================= */

.onyx-box .form-control {
    background: #08090c;

    border: 1px solid #2a2a2a;

    color: #fff;

    box-shadow: none;
}


.onyx-box .form-control:focus {
    background: #08090c;

    border-color: #B08D2C;

    color: #fff;

    box-shadow: none;

    outline: none;
}


.onyx-box .form-control::placeholder {
    color: #666;
}


/* =========================================
   GOLD TEXT
   ========================================= */

.onyx-box .text-gold {
    color: #B08D2C;
}


/* =========================================
   REMOVE ANIMATIONS
   ========================================= */

.onyx-box a,
.onyx-box a:hover {
    transition: none;
}


.left-sidebar .onyx-box,
.right-sidebar .onyx-box {
    transform: none;
}


/* =========================================
   CLOCK ICON
   ========================================= */

.clock-icon {
    font-size: 24px;

    color: #B08D2C;

    margin-right: 10px;
}


/* =========================================
   RESPONSIVE
   ========================================= */

@media (max-width: 992px) {

    .onyx-grid {
        grid-template-columns: 1fr;

        gap: 20px;
    }

}





/* Constrols */
/*
.btn-primary {
    background-color: #101217;
    border: 1px solid #362d21;
    /* background-color: #14181d; */
	/*
    background-color: #101217 !important;
    border: 1px solid #322c24;
    color: #4297e4;
    padding: 11px 34px;
}
.btn-primary:hover {
    background-color: #14181d;
}


input[type="text"], input[type="password"], select, input[type="date"], .form-control, .form-select {
    background-color: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(66, 151, 228, 0.4) !important;
    color: #fff !important;
}

.form-control:focus, .form-select:focus {
    color: #fff !important;
    background-color: rgba(255, 255, 255, 0.08) !important;
    border-color: #4297e4 !important;
    outline: 0 !important;
    box-shadow: 0 0 10px rgba(66, 151, 228, 0.5) !important;
}

.form-control::placeholder {
    color: rgba(255, 255, 255, 0.4) !important;
}

/* banner section */

/*
.home-banner__item h1 {
    color: #937341;
    color: #ffe634;
    font-size: 40px;
    letter-spacing: 3px;
    padding: 7px 50px 14px;
    margin: 0;
    text-transform: uppercase;
}

.home-banner__item p {
    color: #4297e4;
    font-size: 18px;
    line-height: 1.4;
    padding: 0 50px 0;
    margin: 0;
    position: relative;
}

.home-banner__item p:after {
    -webkit-transition: opacity 1.5s ease;
    -moz-transition: opacity 1.5s ease;
    transition: opacity 1.5s ease;
    left: -webkit-calc(50% - 30px);
    left: calc(50% - 30px);
    background: #937341;
    bottom: 0;
    content: "";
    height: 2px;
    opacity: 0;
    position: absolute;
    width: 60px;
}

.banner-button {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 160px;
    height: 110px;
    border-radius: 3px;
    padding: 5px;
    margin: 0 15px;
    overflow: hidden;
    cursor: pointer;
    transition: background-color .125s,box-shadow .125s,transform .125s;
}
.banner-button:hover {
    background-color: #131417;
    background-image: none;
    box-shadow: 0 8px 16px rgb(0 0 0 / 20%);
    text-decoration: none;
    transform: translateY(-4px);
}
.banner-button .icon {
    width: 150px;
    height: 80px;
}
.banner-button h4 {
    color: #4297e4;
    margin: 0;
}

/* Breadcrumbs */ /*
.breadcrumb {
    justify-content: center;
}

.breadcrumb .separator {
    color: #8c7f7e !important;
    padding: 0 5px;
}

.home-content {
    background-color: rgba(0,0,0,.75);
}

@media (min-width: 1368px) {
    .content--wide {
        width: 1358px;
    }
}
.home-wrap {
    display: flex;
    margin: 40px auto 10px;
}

/* Borders */
/* FOOTER */ /*
.footer {
    background-color: #111;
    padding: 0px 0px 28px 0px;
    border-top: 2px solid #343434;
    margin-top: 100px;
}

.footer .footer__links {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    justify-content: center;
    user-select: none;
    box-sizing: border-box;
    background: #292929;
    padding: 18px;
    margin: 0;
    color: #7e7e7e;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: .08em;
    text-align: center;
    text-transform: uppercase;
}
.footer__links a, .footer-legal-links a {
    display: block;
    padding: 8px 16px;
    text-decoration: none;
    color: #f9f9f9;
    transition: all .2s linear;
}
.footer__links a:hover, .footer-legal-links a:hover {
    background: rgba(128,128,128,.3);
    border-radius: 6.4px;
}

.footer .footer__copyright {
    margin: 0 auto;
    max-width: 640px;
    padding: 24px 0 8px;
    font-weight: 500;
    font-size: 13px;
    line-height: 140%;
    text-align: center;
    word-break: keep-all;
    color: #7e7e7e;
}
.footer .footer-legal-links {
    display: flex;
    justify-content: center;
    user-select: none;
    box-sizing: border-box;
    padding: 24px 0px 28px;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: .08em;
    text-align: center;
    text-transform: uppercase;
}

/* Donate BGs */ /*
.donate-item .bg-1 {
    background: url(../../images/imperium/donate/donate-bg-1.jpg) no-repeat center;
    background-size: cover;
}

.donate-item .bg-2 {
    background: url(../../images/imperium/donate/donate-bg-2.jpg) no-repeat center;
    background-size: cover;
}

.donate-item .bg-3 {
    background: url(../../images/imperium/donate/donate-bg-3.jpg) no-repeat center;
    background-size: cover;
}

.donate-item .bg-4 {
    background: url(../../images/imperium/donate/donate-bg-4.jpg) no-repeat center;
    background-size: cover;
}

.donate-item .bg-5 {
    background: url(../../images/imperium/donate/donate-bg-5.jpg) no-repeat center;
    background-size: cover;
}

.donate-item .bg-6 {
    background: url(../../images/imperium/donate/donate-bg-8.jpg) no-repeat center;
    background-size: cover;
}

.donate-item .bg-7 {
    background: url(../../images/imperium/donate/donate-bg-9.jpg) no-repeat center;
    background-size: cover;
}

.donate-item .bg-8 {
    background: url(../../images/imperium/donate/donate-bg-9.jpg) no-repeat center;
    background-size: cover;
}

.donate-item .bg-9 {
    background: url(../../images/imperium/donate/donate-bg-9.jpg) no-repeat center;
    background-size: cover;
}
/* Premium Panel Unified Design */ /*
.premium-panel { background: #0c0c0c; padding: 25px; border: 1px solid #1a1a1a; border-radius: 4px; position: relative; overflow: hidden; box-shadow: 0 15px 40px rgba(0,0,0,.8); }
.premium-panel::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 2px; background: linear-gradient(90deg,transparent,#4297e4,transparent); animation: v-s 4s infinite linear; }
@keyframes v-s { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
*/
/* Onyx Grid Layout */
/*
.onyx-grid {
    display: grid;
    grid-template-columns: 28% 44% 28%;
    gap: 20px;
    margin-top: 40px;
}
.onyx-box {
    background-color: #040404;
    border: 1px solid #4297e4;
    box-shadow: 0 0 10px rgba(0,0,0,0.8), inset 0 0 20px rgba(0,0,0,0.8);
    position: relative;
    overflow: hidden;
}
.onyx-box-header {
    background: linear-gradient(180deg, #1a1a1a 0%, #0a0a0c 100%);
    border-bottom: 1px solid #2a2a2a;
    padding: 10px 15px;
    font-size: 11px;
    font-weight: bold;
    text-transform: uppercase;
    color: #4297e4;
    letter-spacing: 2px;
}
.onyx-box-content {
    padding: 20px;
}
.onyx-box.image-box {
    min-height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-size: cover;
    background-position: center;
    transition: transform 0.3s ease;
    cursor: pointer;
}
.onyx-box.image-box:hover {
    transform: scale(1.02);
    border-color: #6cb2f2;
    box-shadow: 0 0 15px rgba(108, 178, 242,0.4);
}
.onyx-box.image-box h3 {
    color: #fff;
    text-shadow: 2px 2px 4px #000;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 3px;
    font-size: 24px;
}
.onyx-box.image-box .sub {
    color: #4297e4;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-shadow: 1px 1px 2px #000;
}
.btn-onyx {
    background: #08090c;
    border: 1px solid #4297e4;
    color: #4297e4;
    padding: 10px 20px;
    text-transform: uppercase;
    font-weight: bold;
    letter-spacing: 2px;
    width: 100%;
    transition: all 0.3s ease;
}
.btn-onyx:hover {
    background: #4297e4;
    color: #000;
}



.clock-icon {
    font-size: 24px;
    color: #4297e4;
    margin-right: 10px;
}
@media(max-width: 992px) {
    .onyx-grid { grid-template-columns: 1fr; }
}



*/
.onyx-grid {
    display: grid;
    grid-template-columns: 1fr 1.7fr 1fr;
    gap: 25px;
    margin-top: 40px;
    width: 100%;
}

/* =========================================
   Onyx Box
   ========================================= */

.onyx-box {
    background-color: #040404;
    border: 1px solid #3A2D12;
    box-shadow:
        0 0 10px rgba(0, 0, 0, 0.8),
        inset 0 0 20px rgba(0, 0, 0, 0.8);
    position: relative;
    overflow: hidden;
}


/* =========================================
   Onyx Box Header
   ========================================= */

.onyx-box-header {
    background: linear-gradient(
        180deg,
        #1a1a1a 0%,
        #0a0a0c 100%
    );

    border-bottom: 1px solid #3A2D12;

    padding: 10px 15px;

    font-size: 11px;
    font-weight: bold;
    text-transform: uppercase;

    color: #B08D2C;

    letter-spacing: 2px;
}


/* =========================================
   Onyx Box Content
   ========================================= */

.onyx-box-content {
    padding: 20px;
    background-color: #040404;
}


/* =========================================
   Onyx Image / Download Box
   ========================================= */

.onyx-box.image-box {
    min-height: 200px;

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

    /*
       Kein Bild als Hintergrund.
       Dunkler Onyx-Hintergrund passend zur Sidebar.
    */
    background:
        linear-gradient(
            135deg,
            #101114 0%,
            #08090c 100%
        );

    background-size: cover;
    background-position: center;

    cursor: pointer;

    /*
       Keine Animation.
       Kein transform.
       Keine bewegliche Linie.
    */
    transition: none;
}


/* =========================================
   Image Box Hover
   ========================================= */

.onyx-box.image-box:hover {
    /*
       Box bleibt komplett statisch.
       Keine Bewegung.
       Keine Border-Animation.
       Kein Scaling.
    */

    transform: none;

    border-color: #3A2D12;

    box-shadow:
        0 0 10px rgba(0, 0, 0, 0.8),
        inset 0 0 20px rgba(0, 0, 0, 0.8);
}


/* =========================================
   Image Box Title
   ========================================= */

.onyx-box.image-box h3 {
    color: #fff;

    text-shadow:
        2px 2px 4px #000;

    margin: 0;

    text-transform: uppercase;

    letter-spacing: 3px;

    font-size: 24px;
}


/* =========================================
   Image Box Subtitles
   ========================================= */

.onyx-box.image-box .sub {
    color: #B08D2C;

    font-size: 14px;

    text-transform: uppercase;

    letter-spacing: 2px;

    text-shadow:
        1px 1px 2px #000;
}


/* =========================================
   Onyx Buttons
   ========================================= */

.btn-onyx {
    background: #08090c;

    border: 1px solid #B08D2C;

    color: #B08D2C;

    padding: 10px 20px;

    text-transform: uppercase;

    font-weight: bold;

    letter-spacing: 2px;

    width: 100%;

    /*
       Keine Animation.
    */
    transition: none;
}


/* =========================================
   Onyx Button Hover
   ========================================= */

.btn-onyx:hover {
    background: #B08D2C;

    color: #08090c;

    border-color: #B08D2C;

    /*
       Keine Bewegung.
       Keine Größenänderung.
       Kein Glow.
    */
    transform: none;

    box-shadow: none;
}


/* =========================================
   Onyx Button Focus
   ========================================= */

.btn-onyx:focus,
.btn-onyx:active {
    background: #B08D2C;

    color: #08090c;

    border-color: #B08D2C;

    box-shadow: none;

    outline: none;

    transform: none;
}


/* =========================================
   Gold Links
   ========================================= */

.onyx-box a {
    color: #B08D2C;
}


/* =========================================
   Gold Strong Text
   ========================================= */

.onyx-box strong {
    color: #B08D2C;
}


/* =========================================
   Gold Header Elements
   ========================================= */

.onyx-box-header span {
    color: #B08D2C;
}


/* =========================================
   Form Inputs
   ========================================= */

.onyx-box .form-control {
    background: #08090c;

    border: 1px solid #2a2a2a;

    color: #fff;

    box-shadow: none;
}


/* Input Focus
   Keine animierte Linie / kein Glow
*/

.onyx-box .form-control:focus {
    background: #08090c;

    border-color: #B08D2C;

    color: #fff;

    box-shadow: none;

    outline: none;
}


/* =========================================
   Placeholder
   ========================================= */

.onyx-box .form-control::placeholder {
    color: #666;
}


/* =========================================
   Gold Selection / Active Elements
   ========================================= */

.onyx-box .text-gold {
    color: #B08D2C;
}


/* =========================================
   Remove Possible Link Animation
   ========================================= */

.onyx-box a,
.onyx-box a:hover {
    transition: none;
}


/* =========================================
   Sidebar Box Stability
   ========================================= */

.left-sidebar .onyx-box,
.right-sidebar .onyx-box {
    transform: none;
}

.clock-icon {
    font-size: 24px;
    color: #B08D2C;
    margin-right: 10px;
}

@media (max-width: 992px) {
    .onyx-grid {
        grid-template-columns: 1fr;
    }
}