/* =========================================================
   BOSS HERO
   ========================================================= */

.mk-boss-hero {
    position: relative;

    width: 100%;
    max-width: 1400px;
    min-height: 470px;

    margin: 0 0 24px;
    padding: 0;

    box-sizing: border-box;

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

    border-radius: 22px;
    overflow: hidden;
    isolation: isolate;
}


/* =========================================================
   HERO OVERLAY
   ========================================================= */

.mk-boss-overlay {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(8, 8, 8, .96) 0%,
            rgba(8, 8, 8, .86) 35%,
            rgba(8, 8, 8, .48) 65%,
            rgba(8, 8, 8, .12) 100%
        );

    z-index: 1;
}


/* =========================================================
   HERO CONTENT
   ========================================================= */

.mk-boss-hero-content {
    position: relative;
    z-index: 2;

    width: 100%;
    max-width: 760px;
    min-height: 470px;

    box-sizing: border-box;

    display: flex;
    flex-direction: column;
    justify-content: center;

    padding: 60px;
}


/* =========================================================
   INSTANCE
   ========================================================= */

.mk-boss-instance {
    display: inline-flex;
    align-self: flex-start;

    width: fit-content;
    max-width: 100%;

    margin-bottom: 18px;
    padding: 7px 14px;

    box-sizing: border-box;

    border-radius: 999px;

    background: var(--mk-orange);
    color: #fff;

    font-size: 12px;
    font-weight: 800;

    text-transform: uppercase;
    letter-spacing: .05em;
}


/* =========================================================
   TITLE
   ========================================================= */

.mk-boss-title {
    margin: 0 0 18px;

    max-width: 100%;

    color: #fff;

    font-size: clamp(42px, 5vw, 76px);
    line-height: .98;

    font-weight: 900;
    letter-spacing: -.03em;

    overflow-wrap: anywhere;
    word-break: normal;
}


/* =========================================================
   PATCH
   ========================================================= */

.mk-boss-patch {
    display: inline-flex;
    align-self: flex-start;

    width: fit-content;
    max-width: 100%;

    margin-bottom: 22px;
    padding: 6px 12px;

    box-sizing: border-box;

    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 999px;

    background: rgba(15, 15, 15, .65);

    color: #d0d0d0;

    font-size: 13px;
    font-weight: 600;

    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}


/* =========================================================
   DESCRIPTION
   ========================================================= */

.mk-boss-description {
    width: 100%;
    max-width: 650px;

    margin: 0;

    color: #d0d0d0;

    font-size: 18px;
    line-height: 1.65;

    overflow-wrap: anywhere;
}


/* =========================================================
   META
   ========================================================= */

.mk-boss-meta {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 10px;

    width: 100%;
    max-width: 760px;

    margin-top: 30px;

    box-sizing: border-box;
}


/* =========================================================
   META ITEM
   ========================================================= */

.mk-boss-meta-item {
    min-width: 0;

    padding: 14px 16px;

    box-sizing: border-box;

    background: rgba(15, 15, 15, .82);

    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 12px;

    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}


/* =========================================================
   META LABEL
   ========================================================= */

.mk-boss-meta-label {
    display: block;

    margin-bottom: 7px;

    color: #888;

    font-size: 10px;
    font-weight: 800;

    text-transform: uppercase;
    letter-spacing: .08em;
}


/* =========================================================
   META VALUE
   ========================================================= */

.mk-boss-meta-value {
    display: block;

    color: #fff;

    font-size: 15px;
    font-weight: 700;

    overflow-wrap: anywhere;
}


/* =========================================================
   SCHWIERIGKEIT
   ========================================================= */

.mk-boss-difficulty {
    display: flex;
    align-items: center;
    gap: 2px;
}


.mk-boss-star {
    color: #555;

    font-size: 18px;
    line-height: 1;
}


.mk-boss-star.active {
    color: #ff7a00;

    text-shadow:
        0 0 8px rgba(255, 122, 0, .35);
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 768px) {

    .mk-boss-hero {
        width: 100%;
        max-width: 100%;

        min-height: 620px;

        margin-bottom: 25px;

        border-radius: 16px;

        background-position: center top;
    }


    .mk-boss-overlay {
        background:
            linear-gradient(
                180deg,
                rgba(8, 8, 8, .20) 0%,
                rgba(8, 8, 8, .52) 38%,
                rgba(8, 8, 8, .90) 72%,
                rgba(8, 8, 8, .98) 100%
            );
    }


    .mk-boss-hero-content {
        width: 100%;
        max-width: 100%;

        min-height: 620px;

        padding: 30px 22px;

        box-sizing: border-box;

        justify-content: flex-end;
    }


    .mk-boss-instance {
        margin-bottom: 12px;

        padding: 6px 12px;

        font-size: 11px;
    }


    .mk-boss-title {
        width: 100%;
        max-width: 100%;

        margin-bottom: 14px;

        font-size: 42px;
        line-height: 1;

        overflow-wrap: normal;
        word-break: normal;
    }


    .mk-boss-patch {
        margin-bottom: 15px;
    }


    .mk-boss-description {
        width: 100%;
        max-width: 100%;

        font-size: 15px;
        line-height: 1.55;
    }


    /* META AUF MOBILE */

    .mk-boss-meta {
        width: 100%;
        max-width: 100%;

        grid-template-columns: 1fr 1fr;

        gap: 8px;

        margin-top: 22px;
    }


    .mk-boss-meta-item {
        min-width: 0;

        padding: 11px 13px;
    }


    .mk-boss-meta-label {
        font-size: 10px;
    }


    .mk-boss-meta-value {
        font-size: 13px;
    }

}


/* =========================================================
   SEHR KLEINE HANDYS
   ========================================================= */

@media (max-width: 480px) {

    .mk-boss-hero {
        min-height: 620px;
    }


    .mk-boss-hero-content {
        min-height: 620px;

        padding: 25px 20px;
    }


    .mk-boss-title {
        font-size: 38px;
    }


    .mk-boss-description {
        font-size: 14px;
    }


    .mk-boss-meta {
        grid-template-columns: 1fr;
    }

}


/* =========================================================
   META ITEM
========================================================= */

.mk-boss-meta-item {

    min-width: 0;

    padding: 14px 16px;

    background: rgba(15, 15, 15, .82);

    border: 1px solid rgba(255, 255, 255, .12);

    border-radius: 12px;

    backdrop-filter: blur(8px);

    -webkit-backdrop-filter: blur(8px);

}


/* =========================================================
   LABEL
========================================================= */

.mk-boss-meta-label {

    display: block;

    margin-bottom: 7px;

    color: #888;

    font-size: 10px;

    font-weight: 800;

    text-transform: uppercase;

    letter-spacing: .08em;

}


/* =========================================================
   VALUE
========================================================= */

.mk-boss-meta-value {

    display: block;

    color: #fff;

    font-size: 15px;

    font-weight: 700;

}


/* =========================================================
   STERNE
========================================================= */

.mk-boss-difficulty {

    display: flex;

    align-items: center;

    gap: 2px;

}


.mk-boss-star {

    color: #555;

    font-size: 18px;

    line-height: 1;

}


.mk-boss-star.active {

    color: #ff7a00;

    text-shadow:
        0 0 8px rgba(255, 122, 0, .35);

}


/* =========================================================
   PRIORITÄTEN
========================================================= */

.mk-boss-meta-priorities {

    min-width: 0;

}


.mk-boss-meta-priorities .mk-boss-meta-value {

    color: #d0d0d0;

    font-size: 14px;

    font-weight: 500;

    line-height: 1.5;

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 900px) {

    .mk-boss-meta {

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

    }

}


@media (max-width: 600px) {

    .mk-boss-meta {

        grid-template-columns: 1fr;

        gap: 8px;

        margin-top: 22px;

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 768px) {

    .mk-boss-hero {

        min-height: 500px;

        border-radius: 16px;

        background-position: center;

    }


    .mk-boss-overlay {

        background:
            linear-gradient(180deg,
                rgba(8, 8, 8, .30) 0%,
                rgba(8, 8, 8, .60) 45%,
                rgba(8, 8, 8, .97) 100%);

    }


    .mk-boss-hero-content {

        min-height: 500px;

        max-width: none;

        justify-content: flex-end;

        padding: 30px 22px;

    }


    .mk-boss-instance {

        margin-bottom: 12px;

        font-size: 11px;

    }


    .mk-boss-title {

        font-size: 44px;

        line-height: .98;

        margin-bottom: 14px;

    }


    .mk-boss-patch {

        margin-bottom: 15px;

    }


    .mk-boss-description {

        font-size: 15px;

        line-height: 1.55;

    }

}

/* =========================================================
   META
========================================================= */

.mk-boss-meta {

    display: flex;

    flex-wrap: wrap;

    gap: 12px;

    margin-top: 32px;

}


/* =========================================================
   META ITEM
========================================================= */

.mk-boss-meta-item {

    min-width: 120px;

    padding: 13px 18px;

    background: rgba(20, 20, 20, .78);

    border: 1px solid rgba(255, 255, 255, .10);

    border-radius: 12px;

    backdrop-filter: blur(8px);

    -webkit-backdrop-filter: blur(8px);

}


/* =========================================================
   META LABEL
========================================================= */

.mk-boss-meta-label {

    display: block;

    margin-bottom: 5px;

    color: #858585;

    font-size: 11px;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: .08em;

}


/* =========================================================
   META VALUE
========================================================= */

.mk-boss-meta-value {

    display: block;

    color: #fff;

    font-size: 15px;

    font-weight: 700;

}

.mk-boss-hero-image img {

    display: block;

    width: 100%;

    height: 100%;

    object-fit: contain;

    object-position: center bottom;

    transform: scale(1.12);

    filter:
        drop-shadow(0 20px 35px rgba(0, 0, 0, .55));

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 768px) {

    .mk-boss-hero {

        min-height: 620px;

        margin-bottom: 25px;

        border-radius: 16px;

        background-position: center;

    }


    .mk-boss-overlay {

        background:
            linear-gradient(180deg,
                rgba(12, 12, 12, .55) 0%,
                rgba(12, 12, 12, .82) 45%,
                rgba(12, 12, 12, .98) 100%);

    }


    .mk-boss-hero-inner {

        min-height: 620px;

        display: flex;

        flex-direction: column;

        justify-content: flex-end;

        gap: 0;

        padding: 30px 22px;

    }


    .mk-boss-hero-image {

        position: absolute;

        top: 15px;

        left: 0;

        width: 100%;

        height: 330px;

        z-index: 1;

    }


    .mk-boss-hero-image img {

        transform: scale(1.05);

    }


    .mk-boss-hero-content {

        width: 100%;

        max-width: none;

    }


    .mk-boss-instance {

        margin-bottom: 12px;

        padding: 6px 12px;

        font-size: 11px;

    }


    .mk-boss-title {

        margin-bottom: 14px;

        font-size: 42px;

        line-height: 1;

    }


    .mk-boss-description {

        font-size: 15px;

        line-height: 1.55;

    }


    .mk-boss-meta {

        display: grid;

        grid-template-columns: repeat(2, minmax(0, 1fr));

        gap: 8px;

        margin-top: 22px;

    }


    .mk-boss-meta-item {

        min-width: 0;

        padding: 11px 13px;

    }


    .mk-boss-meta-label {

        font-size: 10px;

    }


    .mk-boss-meta-value {

        font-size: 13px;

    }

}

/* =========================================================
   BOSSFÄHIGKEIT – WAS IST ZU TUN
========================================================= */

.mk-boss-ability-action {

    margin-top: 10px;

    color: #00d69b;

    font-size: 12px;

    line-height: 1.5;

}


.mk-boss-ability-action strong {

    display: block;

    margin-bottom: 3px;

    color: #00d69b;

    font-weight: 800;

    font-style: italic;

}


/* =========================================================
   WICHTIGE FÄHIGKEIT
========================================================= */

.mk-boss-ability-action.is-important {

    padding: 10px 12px;

    border: 1px solid #ff8009;

    border-radius: 6px;

    background: rgba(213, 34, 42, .12);

    box-shadow:
        inset 0 0 12px rgba(213, 34, 42, .08);

}


.mk-boss-ability-action.is-important strong {

    color: #ff4b52;

}

/* ==========================================================
   BOSS – ÄNDERUNGEN
========================================================== */

.mk-boss-changes {

    display: flex;
    flex-direction: column;
    gap: 18px;

}


/* ==========================================================
   CHANGE CARD
========================================================== */

.mk-boss-change {

    position: relative;

    padding: 24px;

    background: rgba(28, 28, 28, .15);

    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);

    border: 1px solid #292929;

    border-radius: 18px;

    transition:
        border-color .2s ease,
        transform .2s ease,
        box-shadow .2s ease;

}

.mk-boss-change:hover {

    border-color: rgba(255, 122, 0, .45);

    transform: translateY(-2px);

    box-shadow:
        0 12px 30px rgba(0, 0, 0, .25);

}


/* ==========================================================
   SCHWIERIGKEIT
========================================================== */

.mk-boss-change-difficulty {

    display: flex;

    flex-wrap: wrap;

    gap: 8px;

    margin-bottom: 18px;

}

.mk-boss-change-badge {

    display: inline-flex;

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

    padding: 6px 12px;

    border-radius: 999px;

    font-size: 12px;

    font-weight: 800;

    text-transform: uppercase;

    letter-spacing: .04em;

}

.mk-boss-change-badge.heroic {

    background: rgba(25, 118, 210, .18);

    border: 1px solid rgba(25, 118, 210, .45);

    color: #64b5f6;

}

.mk-boss-change-badge.mythic {

    background: rgba(123, 31, 162, .18);

    border: 1px solid rgba(123, 31, 162, .45);

    color: #ce93d8;

}


/* ==========================================================
   CHANGE HEADER
========================================================== */

.mk-boss-change-header {

    display: flex;

    align-items: center;

    gap: 16px;

    margin-bottom: 18px;

}

.mk-boss-change-icon {

    width: 56px;
    height: 56px;

    flex: 0 0 56px;

    border-radius: 12px;

    overflow: hidden;

}

.mk-boss-change-icon img {

    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

}

.mk-boss-change-header h3 {

    margin: 0;

    color: #fff;

    font-size: 21px;

    line-height: 1.3;

}


/* ==========================================================
   BESCHREIBUNG
========================================================== */

.mk-boss-change-description {

    color: #bdbdbd;

    font-size: 15px;

    line-height: 1.7;

    margin-bottom: 20px;

}


/* ==========================================================
   WAS IST ZU TUN?
========================================================== */

.mk-boss-change-action {

    padding: 16px 18px;

    background: rgba(255, 122, 0, .05);

    border: 1px solid rgba(255, 122, 0, .18);

    border-left: 3px solid var(--mk-orange);

    border-radius: 10px;

    color: #d8d8d8;

    font-size: 15px;

    line-height: 1.7;

}

.mk-boss-change-action strong {

    display: block;

    margin-bottom: 6px;

    color: #fff;

    font-size: 14px;

}


/* ==========================================================
   EMPTY
========================================================== */

.mk-boss-empty {

    padding: 30px;

    border: 1px solid #292929;

    border-radius: 16px;

    background: rgba(28, 28, 28, .12);

    color: #888;

    text-align: center;

}

/* =========================================================
   BOSS ENCOUNTER
========================================================= */

.mk-boss-encounter {

    width: 100%;

    margin-top: 40px;

}


.mk-boss-encounter-grid {

    display: grid;

    grid-template-columns:
        minmax(0, 1fr) minmax(0, 1fr);

    gap: 28px;

    align-items: start;

}


.mk-boss-encounter-column {

    min-width: 0;

    padding: 26px;

    background: rgba(15, 15, 15, .35);

    border: 1px solid #292929;

    border-radius: 2px;

}


/* =========================================================
   SECTION HEADER
========================================================= */

.mk-boss-section-heading {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 12px;

    margin-bottom: 28px;

}


.mk-boss-heading-icon {

    color: #ffb000;

    font-size: 18px;

}


.mk-boss-section-heading h2 {

    margin: 0;

    color: #c9a35b;

    font-family: Georgia, serif;

    font-size: 25px;

    font-weight: 500;

    letter-spacing: .12em;

    text-transform: uppercase;

}


/* =========================================================
   ABILITY LIST
========================================================= */

.mk-boss-ability-list {

    display: flex;

    flex-direction: column;

    gap: 12px;

}


/* =========================================================
   PHASE
========================================================= */

.mk-boss-ability-phase {

    position: relative;

    margin: 24px 0 8px;

    padding-top: 8px;

}


.mk-boss-ability-phase:first-child {

    margin-top: 0;

}


.mk-boss-ability-phase::after {

    content: "";

    position: absolute;

    left: 0;
    right: 0;

    top: 50%;

    height: 1px;

    background:
        linear-gradient(90deg,
            rgba(255, 122, 0, 0),
            rgba(255, 122, 0, .55),
            rgba(255, 122, 0, 0));

    z-index: 0;

}


.mk-boss-ability-phase h3 {

    position: relative;

    z-index: 1;

    display: inline-block;

    margin: 0;

    padding: 0 12px 0 0;

    background: #111;

    color: #fff;

    font-size: 18px;

    font-weight: 800;

}


/* =========================================================
   PHASENHINWEIS
========================================================= */

.mk-boss-ability-note {

    margin: 4px 0 12px;

    padding: 18px 20px;

    background: rgba(255, 122, 0, .055);

    border-left: 2px solid #ff7a00;

    border-radius: 0 8px 8px 0;

    color: #cfcfcf;

    font-size: 13px;

    line-height: 1.7;

}


.mk-boss-ability-note p {

    margin: 0 0 8px;

}


.mk-boss-ability-note p:last-child {

    margin-bottom: 0;

}


.mk-boss-ability-note a {

    color: #6da8ff;

}


/* =========================================================
   ABILITY CARD
========================================================= */

.mk-boss-ability-item {

    position: relative;

    display: flex;

    align-items: flex-start;

    gap: 16px;

    padding: 16px;

    background:
        linear-gradient(135deg,
            rgba(35, 35, 35, .55),
            rgba(20, 20, 20, .65));

    border: 1px solid #292929;

    border-radius: 7px;

    transition:
        border-color .2s ease,
        transform .2s ease,
        box-shadow .2s ease;

}


.mk-boss-ability-item:hover {

    border-color: rgba(255, 122, 0, .45);

    transform: translateY(-1px);

}



/* =========================================================
   ABILITY BODY
========================================================= */

.mk-boss-ability-body {

    flex: 1;

    min-width: 0;

}

/* ==========================================================
   ABILITY TITLE + BADGES
========================================================== */

.mk-boss-ability-title {

    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    gap: 14px;

    width: 100%;

    min-width: 0;

}


/* ==========================================================
   TITEL
========================================================== */

.mk-boss-ability-title h3 {

    flex: 1 1 auto;

    min-width: 180px;

    margin: 0;

    color: #d8bf88;

    font-family: Georgia, serif;

    font-size: 17px;

    font-weight: 700;

    line-height: 1.3;

}


/* ==========================================================
   BADGES
========================================================== */

.mk-boss-ability-badges {

    display: flex;

    align-items: center;

    justify-content: flex-end;

    flex: 0 1 auto;

    flex-wrap: wrap;

    gap: 6px;

    max-width: 65%;

}


/* ==========================================================
   EINZELNES BADGE
========================================================== */

.mk-boss-strategy-badge {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    flex: 0 0 auto;

    padding: 4px 8px;

    border-radius: 6px;

    font-size: 9px;

    font-weight: 800;

    line-height: 1;

    text-transform: uppercase;

    letter-spacing: .03em;

    white-space: nowrap;

}


/* ==========================================================
   ORANGE
========================================================== */

.mk-boss-strategy-badge-orange {

    color: #ff7a00;

    background: rgba(255, 122, 0, .10);

    border: 1px solid rgba(255, 122, 0, .35);

}


/* ==========================================================
   TANK – BLAU
========================================================== */

.mk-boss-strategy-badge-tank {

    color: #64b5ff;

    background: rgba(50, 130, 210, .10);

    border: 1px solid rgba(80, 150, 220, .40);

}


/* ==========================================================
   HEILER – GRÜN
========================================================== */

.mk-boss-strategy-badge-healer {

    color: #48d597;

    background: rgba(40, 190, 120, .10);

    border: 1px solid rgba(60, 200, 140, .38);

}


.mk-boss-ability-description {

    margin: 7px 0 0;

    color: #aaa;

    font-size: 12px;

    line-height: 1.55;

}


/* =========================================================
   BADGES
========================================================= */

.mk-boss-badge {

    display: inline-flex;

    flex: 0 0 auto;

    align-items: center;

    padding: 4px 8px;

    border-radius: 4px;

    font-size: 9px;

    font-weight: 800;

    line-height: 1;

    text-transform: uppercase;

}


.mk-boss-badge-important {

    background: #ff8800;

    color: #fff;

}


.mk-boss-badge-deadly {

    background: #a61d24;

    color: #fff;

}


/* ==========================================================
   BOSSFÄHIGKEIT – WAS MUSS GEMACHT WERDEN
========================================================== */

.mk-boss-ability-action {

    margin-top: 14px;

    padding: 14px 16px;

    border: 1px solid rgba(0, 214, 155, .18);

    border-radius: 18px;

    background: rgba(0, 214, 155, .035);

    color: #00d69b;

    font-size: 13px;

    line-height: 1.6;

}


/* Überschrift */

.mk-boss-ability-action strong {

    display: block;

    margin-bottom: 4px;

    color: #00d69b;

    font-weight: 800;

    font-style: italic;

}


/* Inhalt */

.mk-boss-ability-action br+* {
    color: #00d69b;
}


/* ==========================================================
   WICHTIG
========================================================== */

.mk-boss-ability-item.priority-important .mk-boss-ability-action {

    border-color: #ff7a00;

    background: rgba(255, 122, 0, .08);

    color: #ff7a00;

    box-shadow:
        inset 0 0 12px rgba(255, 122, 0, .04);

}


.mk-boss-ability-item.priority-important .mk-boss-ability-action strong {

    color: #ff7a00;

}


/* ==========================================================
   TÖDLICH
========================================================== */

.mk-boss-ability-item.priority-deadly .mk-boss-ability-action {

    border-color: #d5222a;

    background: rgba(213, 34, 42, .10);

    color: #ff4b52;

    box-shadow:
        inset 0 0 12px rgba(213, 34, 42, .06);

}


.mk-boss-ability-item.priority-deadly .mk-boss-ability-action strong {

    color: #ff4b52;

}

/* =========================================================
   WICHTIG
========================================================= */

.mk-boss-ability-action.is-important {

    margin-top: 12px;

    padding: 11px 13px;

    border: 1px solid #d5222a;

    border-radius: 6px;

    background: rgba(213, 34, 42, .13);

    box-shadow:
        inset 0 0 15px rgba(213, 34, 42, .08);

}


.mk-boss-ability-action.is-important strong {

    color: #ff4b52;

}


/* =========================================================
   CHANGES
========================================================= */

.mk-boss-changes {

    display: flex;

    flex-direction: column;

    gap: 16px;

}


.mk-boss-change {

    padding: 20px;

    background:
        linear-gradient(135deg,
            rgba(30, 30, 30, .55),
            rgba(17, 17, 17, .7));

    border: 1px solid #292929;

    border-radius: 7px;

}


.mk-boss-change-difficulty {

    display: flex;

    gap: 7px;

    margin-bottom: 14px;

}


.mk-boss-change-badge {

    display: inline-flex;

    padding: 4px 9px;

    border-radius: 4px;

    font-size: 9px;

    font-weight: 800;

    text-transform: uppercase;

}


.mk-boss-change-badge.heroic {

    background: rgba(25, 118, 210, .25);

    border: 1px solid rgba(80, 150, 220, .55);

    color: #65b5ff;

}


.mk-boss-change-badge.mythic {

    background: rgba(123, 31, 162, .25);

    border: 1px solid rgba(180, 80, 220, .55);

    color: #d78cff;

}


/* =========================================================
   CHANGE HEADER
========================================================= */

.mk-boss-change-header {

    display: flex;

    align-items: center;

    gap: 14px;

}


.mk-boss-change-icon {

    width: 46px;

    height: 46px;

    flex: 0 0 46px;

    overflow: hidden;

    border-radius: 6px;

    border: 1px solid #444;

}


.mk-boss-change-icon img {

    display: block;

    width: 100%;

    height: 100%;

    object-fit: cover;

}


.mk-boss-change-header h3 {

    margin: 0;

    color: #d8bf88;

    font-family: Georgia, serif;

    font-size: 18px;

}


/* =========================================================
   CHANGE DESCRIPTION
========================================================= */

.mk-boss-change-description {

    margin-top: 13px;

    color: #bcbcbc;

    font-size: 12px;

    line-height: 1.65;

}


/* =========================================================
   CHANGE ACTION
========================================================= */

.mk-boss-change-action {

    margin-top: 15px;

    padding: 13px 15px;

    background: rgba(255, 122, 0, .05);

    border: 1px solid rgba(255, 122, 0, .18);

    border-left: 2px solid #ff7a00;

    border-radius: 5px;

    color: #d2d2d2;

    font-size: 12px;

    line-height: 1.6;

}


.mk-boss-change-action strong {

    display: block;

    margin-bottom: 4px;

    color: #00d69b;

    font-size: 11px;

    font-style: italic;

}


/* =========================================================
   EMPTY
========================================================= */

.mk-boss-empty {

    padding: 25px;

    background: rgba(20, 20, 20, .5);

    border: 1px solid #292929;

    border-radius: 7px;

    color: #777;

    text-align: center;

    font-size: 13px;

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 900px) {

    .mk-boss-encounter-grid {

        grid-template-columns: 1fr;

    }

}


@media (max-width: 600px) {

    .mk-boss-encounter-column {

        padding: 18px;

    }


    .mk-boss-section-heading h2 {

        font-size: 20px;

    }


    .mk-boss-ability-item {

        padding: 13px;

        gap: 12px;

    }


    .mk-boss-ability-icon {

        width: 42px;

        height: 42px;

        flex-basis: 42px;

    }


    .mk-boss-ability-title {

        flex-direction: column;

        gap: 7px;

    }

}

/* ==========================================================
   BOSS ENCOUNTER – ABGERUNDETE ECKEN
========================================================== */

/* Linke Spalte */
.mk-boss-encounter-column {

    border-radius: 18px;

}

/* Rechte Spalte */
.mk-boss-encounter-column {

    border-radius: 18px;

}


/* Falls der gemeinsame Container einen Rahmen/Hintergrund hat */
.mk-boss-encounter-grid {

    border-radius: 18px;

}


/* Einzelne Fähigkeit */
.mk-boss-ability-item {

    border-radius: 18px;

}


/* Phasenhinweis */
.mk-boss-ability-note {

    border-radius: 18px;

}


/* Phasenüberschrift */
.mk-boss-ability-phase {

    border-radius: 18px;

}


/* Änderungen */
.mk-boss-change {

    border-radius: 18px;

}


/* Was ist zu tun? */
.mk-boss-ability-action {

    border-radius: 18px;

}


/* Empty-State */
.mk-boss-empty {

    border-radius: 18px;

}

/* ==========================================================
   BOSS ENCOUNTER – MARKTHYR TYPOGRAFIE
========================================================== */

.mk-boss-encounter,
.mk-boss-encounter * {

    font-family: Inter, sans-serif;

}


/* ==========================================================
   SECTION HEADINGS
========================================================== */

.mk-boss-section-heading {

    display: flex;

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

    margin-bottom: 28px;

}


.mk-boss-section-heading h2 {

    margin: 0;

    font-family: Inter, sans-serif;

    color: var(--mk-orange);

    font-size: 24px;

    line-height: 1.2;

    font-weight: 800;

    letter-spacing: -.02em;

    text-transform: none;

}


/* Nicht mehr benötigt */
.mk-boss-heading-icon {

    display: none;

}

/* ==========================================================
   PRIORITÄTS-SYMBOL UNTER DEM FÄHIGKEITS-ICON
========================================================== */

.mk-boss-ability-icon {

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 8px;

}


/* ==========================================================
   GRUNDSTIL
========================================================== */

.mk-boss-priority-symbol {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 100%;

    line-height: 1;

}


/* ==========================================================
   WICHTIG – !
========================================================== */

.mk-boss-priority-important-symbol {

    color: #ff7a00;

    font-size: 42px;

    font-weight: 900;

    line-height: .8;

    text-shadow:
        0 0 10px rgba(255, 122, 0, .35);

}

/* ==========================================================
   ABILITY ICON
========================================================== */

.mk-boss-ability-icon {

    width: 48px;

    flex: 0 0 48px;

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 6px;

    overflow: visible;

}


/* ==========================================================
   SPELL ICON
========================================================== */

.mk-boss-ability-icon>img {

    display: block;

    width: 48px;

    height: 48px;

    object-fit: cover;

    border-radius: 7px;

    border: 1px solid #454545;

}


/* ==========================================================
   PRIORITÄTS-SYMBOL
========================================================== */

.mk-boss-priority-symbol {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 48px;

    line-height: 1;

}


/* ==========================================================
   WICHTIG – !
========================================================== */

.mk-boss-priority-important-symbol {

    color: #ff7a00;

    font-size: 60px;

    font-weight: 700;

    line-height: .8;

    text-shadow:
        0 0 10px rgba(255, 122, 0, .35);

}


/* ==========================================================
   TÖDLICH – TOTENKOPF
========================================================== */

.mk-boss-priority-deadly-symbol {

    color: #d5222a;

    font-size: 60px;

    font-weight: 300;

    line-height: 1;

    text-align: center;

    text-shadow:
        0 0 10px rgba(213, 34, 42, .35);

}

/* ==========================================================
   CHANGES – HEROISCH / MYTHISCH
========================================================== */

.mk-boss-change-section {

    display: flex;

    flex-direction: column;

    gap: 12px;

}


.mk-boss-change-section+.mk-boss-change-section {

    margin-top: 30px;

}


/* ==========================================================
   ÜBERSCHRIFT
========================================================== */

.mk-boss-change-section-title {

    display: flex;

    align-items: center;

    gap: 10px;

}


.mk-boss-change-section-title::after {

    content: "";

    flex: 1;

    height: 1px;

}


/* ==========================================================
   HEROISCH
========================================================== */

.mk-boss-change-section-title.heroic span {

    display: inline-flex;

    padding: 6px 12px;

    border-radius: 6px;

    background: rgba(25, 118, 210, .18);

    border: 1px solid rgba(80, 150, 220, .55);

    color: #65b5ff;

    font-size: 11px;

    font-weight: 800;

    text-transform: uppercase;

    letter-spacing: .05em;

}


.mk-boss-change-section-title.heroic::after {

    background:
        linear-gradient(90deg,
            rgba(80, 150, 220, .45),
            transparent);

}


/* ==========================================================
   MYTHISCH
========================================================== */

.mk-boss-change-section-title.mythic span {

    display: inline-flex;

    padding: 6px 12px;

    border-radius: 6px;

    background: rgba(123, 31, 162, .18);

    border: 1px solid rgba(180, 80, 220, .55);

    color: #d78cff;

    font-size: 11px;

    font-weight: 800;

    text-transform: uppercase;

    letter-spacing: .05em;

}


.mk-boss-change-section-title.mythic::after {

    background:
        linear-gradient(90deg,
            rgba(180, 80, 220, .45),
            transparent);

}


/* ==========================================================
   CHANGE LIST
========================================================== */

.mk-boss-change-list {

    display: flex;

    flex-direction: column;

    gap: 12px;

}


/* ==========================================================
   CHANGE ABILITY
   Nutzt exakt das Design der normalen Fähigkeit
========================================================== */

.mk-boss-change-ability {

    width: 100%;

    box-sizing: border-box;

}

/* ==========================================================
   KAMPFSTRATEGIE – BACKEND
========================================================== */

.mk-boss-strategy-fields {

    margin-top: 20px;

    padding: 18px;

    border: 1px solid #3a3a3a;

    border-radius: 10px;

    background: #181818;

}


.mk-boss-strategy-fields h4 {

    margin: 0 0 16px;

    color: #ff7a00;

    font-size: 14px;

    font-weight: 700;

}


.mk-boss-strategy-fields .mk-boss-field {

    margin-bottom: 18px;

}


.mk-boss-strategy-fields .mk-boss-field:last-child {

    margin-bottom: 0;

}


.mk-boss-strategy-fields label {

    display: block;

    margin-bottom: 7px;

    color: #ddd;

    font-weight: 600;

}


.mk-boss-strategy-fields select {

    width: 100%;

    max-width: 320px;

    padding: 8px 10px;

}


.mk-boss-strategy-badges {

    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 8px;

}


.mk-boss-strategy-badge-option {

    display: flex !important;

    align-items: center;

    gap: 8px;

    margin: 0 !important;

    padding: 9px 11px;

    border: 1px solid #333;

    border-radius: 7px;

    background: #111;

    cursor: pointer;

    transition:
        border-color .15s ease,
        background .15s ease;

}


.mk-boss-strategy-badge-option:hover {

    border-color: #ff7a00;

    background: #191919;

}


.mk-boss-strategy-badge-option input {

    margin: 0;

}


.mk-boss-strategy-badge-option span {

    color: #ccc;

    font-size: 12px;

    font-weight: 600;

}


@media (max-width: 600px) {

    .mk-boss-strategy-badges {

        grid-template-columns: 1fr;

    }

}

/* ==========================================================
   FÄHIGKEITS-BADGES
========================================================== */

.mk-boss-ability-badges {

    display: flex;

    align-items: center;

    justify-content: flex-end;

    flex-wrap: wrap;

    gap: 6px;

}


/* ==========================================================
   GRUNDSTIL
========================================================== */

.mk-boss-strategy-badge {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 4px 8px;

    border-radius: 6px;

    font-size: 9px;

    font-weight: 800;

    line-height: 1;

    text-transform: uppercase;

    letter-spacing: .03em;

}


/* ==========================================================
   ORANGE
========================================================== */

.mk-boss-strategy-badge-orange {

    color: #ff7a00;

    background: rgba(255, 122, 0, .10);

    border: 1px solid rgba(255, 122, 0, .35);

}


/* ==========================================================
   TANK – BLAU
========================================================== */

.mk-boss-strategy-badge-tank {

    color: #64b5ff;

    background: rgba(50, 130, 210, .10);

    border: 1px solid rgba(80, 150, 220, .40);

}


/* ==========================================================
   HEILER – GRÜN
========================================================== */

.mk-boss-strategy-badge-healer {

    color: #48d597;

    background: rgba(40, 190, 120, .10);

    border: 1px solid rgba(60, 200, 140, .38);

}


/* ==========================================================
   MOBILE
========================================================== */

@media (max-width: 600px) {

    .mk-boss-ability-badges {

        justify-content: flex-start;

    }

}

/* ==========================================================
   KAMPFSTRATEGIE
========================================================== */

.mk-boss-strategy {

    position: relative;

    width: 100%;

    margin-top: 70px;

}


/* ==========================================================
   HEADER
========================================================== */

.mk-boss-strategy-heading {

    position: relative;

    z-index: 5;

    text-align: center;

}


.mk-boss-strategy-kicker {

    display: block;

    margin-bottom: 8px;

    color: #777;

    font-size: 50px;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: .18em;

}


.mk-boss-strategy-heading h2 {

    margin: 0;

    color: var(--mk-orange);

    font-size: 30px;

    line-height: 1.2;

    font-weight: 800;

}


/* ==========================================================
   TIMELINE
========================================================== */

.mk-boss-strategy-timeline {

    position: relative;

    width: 100%;

    padding: 10px 0 40px;

}


/* zentrale Linie */

.mk-boss-strategy-timeline::before {

    content: "";

    position: absolute;

    top: 0;
    bottom: 0;

    left: 50%;

    width: 2px;

    background:
        linear-gradient(
            180deg,
            transparent 0%,
            rgba(255, 122, 0, .18) 5%,
            rgba(255, 122, 0, .65) 25%,
            rgba(255, 122, 0, .65) 75%,
            rgba(255, 122, 0, .18) 95%,
            transparent 100%
        );

    box-shadow:
        0 0 6px rgba(255, 122, 0, .35),
        0 0 14px rgba(255, 122, 0, .15);

    transform: translateX(-50%);

    pointer-events: none;

    z-index: 0;
}


/* ==========================================================
   PHASE
========================================================== */

.mk-boss-strategy-phase {

    position: relative;

    z-index: 3;

    display: flex;

    align-items: center;

    width: 100%;

    margin: 45px 0 35px;

}


.mk-boss-strategy-phase::before {

    content: "";

    flex: 1;

    height: 1px;

    background:
        linear-gradient(90deg,
            transparent,
            rgba(255, 122, 0, .30));

}


.mk-boss-strategy-phase::after {

    content: "";

    flex: 1;

    height: 1px;

    background:
        linear-gradient(90deg,
            rgba(255, 122, 0, .30),
            transparent);

}


.mk-boss-strategy-phase span {

    position: relative;

    margin: 0 18px;

    padding: 7px 16px;

    background: #111;

    border: 1px solid rgba(255, 122, 0, .45);

    border-radius: 6px;

    color: var(--mk-orange);

    font-size: 20px;

    font-weight: 800;

    text-transform: uppercase;

    letter-spacing: .08em;

    box-shadow:
        0 0 20px rgba(255, 122, 0, .08);

}


/* ==========================================================
   STRATEGIE ROW
========================================================== */

.mk-boss-strategy-row {

    position: relative;

    z-index: 2;

    display: grid;

    grid-template-columns:
        minmax(0, 1fr) minmax(0, 1fr);

    align-items: center;

    gap: 0;

    margin: 35px 0;

}


/* ==========================================================
   VIDEO
========================================================== */

.mk-boss-strategy-video {

    position: relative;

    min-width: 0;

    z-index: 1;

}


.mk-boss-strategy-video-inner {

    position: relative;

    width: calc(100% + 10px);

    aspect-ratio: 16 / 9;

    overflow: hidden;

    background: #0b0b0b;

    border: 1px solid #292929;

    border-radius: 12px;

    box-shadow:
        0 15px 35px rgba(0, 0, 0, .35);

}


.mk-boss-strategy-video-inner iframe,
.mk-boss-strategy-video-inner video {

    display: block;

    width: 100%;

    height: 100%;

    border: 0;

    object-fit: cover;

}


.mk-boss-strategy-video-empty {

    display: flex;

    align-items: center;

    justify-content: center;

    aspect-ratio: 16 / 9;

    width: calc(100% + 10px);

    background:
        linear-gradient(135deg,
            rgba(30, 30, 30, .8),
            rgba(12, 12, 12, .9));

    border: 1px solid #292929;

    border-radius: 12px;

    color: #666;

    font-size: 12px;

}


/* ==========================================================
   FÄHIGKEIT
========================================================== */

.mk-boss-strategy-ability {

    position: relative;

    z-index: 3;

    min-width: 0;

}


.mk-boss-strategy-ability-inner {

    position: relative;

    background: rgba(28, 28, 28, .15);

    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);

    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 12px;

    padding: 22px 20px 20px;

}


/* ==========================================================
   REVERSE
========================================================== */

.mk-boss-strategy-row.is-reverse {

    direction: rtl;

}


.mk-boss-strategy-row.is-reverse .mk-boss-strategy-video {

    direction: ltr;

}


.mk-boss-strategy-row.is-reverse .mk-boss-strategy-ability {

    direction: ltr;

}


.mk-boss-strategy-row.is-reverse .mk-boss-strategy-ability-inner {

    margin-left: 0;

    margin-right: -10px;

}


/* ==========================================================
   ABILITY HEADER
========================================================== */

.mk-boss-strategy-ability-header {

    display: flex;

    align-items: flex-start;

    gap: 13px;

}


.mk-boss-strategy-icon {

    width: 48px;

    height: 48px;

    flex: 0 0 48px;

    overflow: hidden;

    border: 1px solid #454545;

    border-radius: 7px;

}


.mk-boss-strategy-icon img {

    display: block;

    width: 100%;

    height: 100%;

    object-fit: cover;

}


.mk-boss-strategy-title-wrap {

    min-width: 0;

    flex: 1;

}


.mk-boss-strategy-title-wrap h3 {

    margin: 0 0 9px;

    color: #d8bf88;

    font-family: Georgia, serif;

    font-size: 19px;

    line-height: 1.25;

    font-weight: 700;

}


/* ==========================================================
   BADGES
========================================================== */

.mk-boss-strategy-badges {

    display: flex;

    flex-wrap: wrap;

    align-items: center;

    gap: 5px;

}


.mk-boss-strategy-badge {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    flex: 0 0 auto;

    max-width: 100%;

    padding: 4px 7px;

    border-radius: 5px;

    font-size: 8px;

    font-weight: 800;

    line-height: 1.1;

    text-transform: uppercase;

    letter-spacing: .025em;

}


/* Orange */

.mk-boss-strategy-badge-orange {

    color: #ff7a00;

    background: rgba(255, 122, 0, .08);

    border: 1px solid rgba(255, 122, 0, .32);

}


/* Tank */

.mk-boss-strategy-badge-tank {

    color: #64b5ff;

    background: rgba(50, 130, 210, .08);

    border: 1px solid rgba(80, 150, 220, .38);

}


/* Heiler */

.mk-boss-strategy-badge-healer {

    color: #48d597;

    background: rgba(40, 190, 120, .08);

    border: 1px solid rgba(60, 200, 140, .35);

}


/* ==========================================================
   BESCHREIBUNG
========================================================== */

.mk-boss-strategy-description {

    margin-top: 16px;

    color: #aaa;

    font-size: 13px;

    line-height: 1.65;

}


/* ==========================================================
   ACTION
========================================================== */

.mk-boss-strategy-action {

    margin-top: 15px;

    padding: 13px 15px;

    background: rgba(0, 214, 155, .035);

    border: 1px solid rgba(0, 214, 155, .18);

    border-radius: 9px;

    color: #00d69b;

    font-size: 12px;

    line-height: 1.6;

}


.mk-boss-strategy-action strong {

    display: block;

    margin-bottom: 4px;

    color: #00d69b;

    font-weight: 800;

    font-style: italic;

}


/* ==========================================================
   MOBILE
========================================================== */

@media (max-width: 900px) {

    .mk-boss-strategy {

        margin-top: 50px;

    }


    .mk-boss-strategy-heading h2 {

        font-size: 25px;

    }


    .mk-boss-strategy-timeline::before {

        left: 18px;

    }


    .mk-boss-strategy-phase {

        justify-content: flex-start;

        padding-left: 18px;

    }


    .mk-boss-strategy-phase::before,
    .mk-boss-strategy-phase::after {

        display: none;

    }


    .mk-boss-strategy-phase span {

        margin: 0;

    }


    .mk-boss-strategy-row,
    .mk-boss-strategy-row.is-reverse {

        display: flex;

        flex-direction: column;

        gap: 0;

        margin-left: 18px;

        direction: ltr;

    }


    .mk-boss-strategy-video,
    .mk-boss-strategy-ability {

        width: 100%;

    }


    .mk-boss-strategy-video-inner,
    .mk-boss-strategy-video-empty {

        width: 100%;

    }


    .mk-boss-strategy-ability-inner,
    .mk-boss-strategy-row.is-reverse .mk-boss-strategy-ability-inner {

        margin: -10px 0 0;

    }

}


@media (max-width: 600px) {

    .mk-boss-strategy-heading {

        margin-bottom: 35px;

    }


    .mk-boss-strategy-heading h2 {

        font-size: 22px;

    }


    .mk-boss-strategy-ability-inner {

        padding: 17px;

    }


    .mk-boss-strategy-title-wrap h3 {

        font-size: 17px;

    }

}

/* ==========================================================
   DESKTOP – ETWAS MEHR ABSTAND
========================================================== */

@media (min-width: 901px) {

    .mk-boss-strategy-row {
        display: flex;
        align-items: center;
        gap: 28px;
    }

    .mk-boss-strategy-video {
        flex: 0 0 62%;
    }

    .mk-boss-strategy-card {
        flex: 0 0 calc(38% - 28px);
    }

}


/* ==========================================================
   MOBILE
========================================================== */

@media (max-width: 900px) {

    .mk-boss-strategy-row {
        flex-direction: column;
    }

    .mk-boss-strategy-video,
    .mk-boss-strategy-card {
        width: 100%;
        max-width: none;
    }

}


/* ==========================================================
   SCHRIFTEN GRÖSSER
========================================================== */

.mk-boss-strategy-ability h3 {
    margin: 0 0 10px;

    color: #d8bf88;

    font-size: 25px;
    line-height: 1.3;
    font-weight: 700;
}

.mk-boss-strategy-ability .mk-boss-ability-description {
    margin-top: 8px;

    color: #c0c0c0;

    font-size: 20px !important;
    line-height: 1.65;
}


/* "Was muss gemacht werden?" */
.mk-boss-strategy-ability .mk-boss-ability-action {
    margin-top: 14px;

    font-size: 14px;
    line-height: 1.6;
}

.mk-boss-strategy-ability .mk-boss-ability-action strong {
    font-size: 13px;
}


/* ==========================================================
   BADGES AUF DER OBEREN KANTE
========================================================== */

.mk-boss-strategy-ability .mk-boss-ability-badges {
    position: absolute;

    top: -11px;
    right: 16px;

    font-size: 17px;

    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;

    gap: 6px;

    padding: 0 4px;

    background: transparent;

    z-index: 5;
}


/* einzelne Badges */
.mk-boss-strategy-ability .mk-boss-strategy-badge,
.mk-boss-strategy-ability .mk-boss-badge {
    padding: 5px 9px;

    font-size: 19px;
    line-height: 1;

    border-radius: 5px;

    white-space: nowrap;
}

/* ==========================================================
   INHALT
========================================================== */

.mk-boss-strategy-ability-inner {
    position: relative;

    padding: 24px 20px 20px;
}


/* ==========================================================
   TITEL
========================================================== */

.mk-boss-strategy-title-wrap h3 {
    margin: 0;

    color: #d8bf88;

    font-size: 20px !important;
    line-height: 1.3;
    font-weight: 700;
}


/* ==========================================================
   BESCHREIBUNG
========================================================== */

.mk-boss-strategy-description {
    margin-top: 10px;

    color: #c0c0c0;

    font-size: 16px !important;
    line-height: 1.65;
}


/* ==========================================================
   WAS MUSS GEMACHT WERDEN?
========================================================== */

.mk-boss-strategy-action {
    margin-top: 15px;

    padding: 14px 16px;

    border: 1px solid rgba(0, 214, 155, .18);
    border-radius: 12px;

    background: rgba(0, 214, 155, .035);

    color: #00d69b;

    font-size: 15px;
    line-height: 1.6;
}

.mk-boss-strategy-action strong {
    display: block;

    margin-bottom: 5px;

    color: #00d69b;

    font-size: 14px;
    font-weight: 800;
    font-style: italic;
}


/* ==========================================================
   BADGES AUF DER OBEREN KANTE
========================================================== */

.mk-boss-strategy-badges {
    position: absolute;

    top: -11px;
    right: 16px;

    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;

    gap: 6px;

    z-index: 5;
}


/* ==========================================================
   EINZELNE BADGES
========================================================== */

.mk-boss-strategy-badge {
    display: inline-flex;

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

    padding: 5px 9px;

    border-radius: 5px;

    font-size: 9px;
    font-weight: 800;
    line-height: 1;

    text-transform: uppercase;
    letter-spacing: .03em;

    white-space: nowrap;

    background: #151515;
}


/* Orange */
.mk-boss-strategy-badge-orange {
    color: #ff7a00;

    background: rgba(28, 28, 28, .9);

    border: 1px solid rgba(255, 122, 0, .45);
}


/* Tank */
.mk-boss-strategy-badge-tank {
    color: #64b5ff;

    background: rgba(20, 30, 40, .9);

    border: 1px solid rgba(80, 150, 220, .45);
}


/* Heiler */
.mk-boss-strategy-badge-healer {
    color: #48d597;

    background: rgba(20, 35, 28, .9);

    border: 1px solid rgba(60, 200, 140, .45);
}


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

.mk-boss-strategy-icon {
    flex: 0 0 auto;
}

.mk-boss-strategy-icon img {
    display: block;

    width: 48px;
    height: 48px;

    object-fit: cover;

    border-radius: 7px;
}


/* ==========================================================
   HEADER
========================================================== */

.mk-boss-strategy-ability-header {
    display: flex;

    align-items: flex-start;

    gap: 12px;
}

/* ==========================================================
   KOMPLETTE STRATEGIE – TRANSPARENTER CONTAINER
========================================================== */

.mk-boss-strategy {

    width: 100%;

    box-sizing: border-box;

    padding: 30px;

    background: rgba(28, 28, 28, .15);

    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);

    border: 1px solid rgba(255, 255, 255, .10);

    border-radius: 18px;
}


/* ==========================================================
   MOBILE
========================================================== */

@media (max-width: 600px) {

    .mk-boss-strategy {
        padding: 18px;
        border-radius: 14px;
    }

}

/* ==========================================================
   BOSS CONTENT
   ========================================================== */

.mk-boss-main {

    width: min(1400px, calc(100% - 48px));

    margin: 0 auto;

    min-width: 0;

}


/* ==========================================================
   BOSS SIDEBAR
   EXAKT WIE KLASSENGUIDES
   ========================================================== */

.mk-boss-sidebar {

    position: fixed;

    top: 250px;

    left: calc(50% + 700px + 24px);

    width: 300px;

    max-height: calc(100vh - 220px);

    overflow-y: auto;

    z-index: 999;

}


/* Scrollbar */

.mk-boss-sidebar::-webkit-scrollbar {

    width: 8px;

}

.mk-boss-sidebar::-webkit-scrollbar-thumb {

    background: #333;

    border-radius: 999px;

}


/* ==========================================================
   SIDEBAR CONTAINER
   GLEICHES DESIGN WIE KLASSENGUIDES
   ========================================================== */

.mk-boss-sidebar .mk-sidebar {

    display: flex;

    flex-direction: column;

    gap: 30px;

    padding: 30px;

    box-sizing: border-box;

    background: rgba(28, 28, 28, .15);

    backdrop-filter: blur(6px);

    -webkit-backdrop-filter: blur(6px);

    border: 1px solid #2a2a2a;

    border-radius: 24px;

    box-shadow:
        inset 0 1px rgba(255, 255, 255, .03),
        0 0 40px rgba(255, 122, 0, .05);

}


/* ==========================================================
   SIDEBAR SECTION
   ========================================================== */

.mk-boss-sidebar .mk-sidebar-section {

    position: relative;

    padding-bottom: 30px;

}


/* ==========================================================
   ORANGE LINIE
   ========================================================== */

.mk-boss-sidebar .mk-sidebar-section:first-child::before {

    content: "";

    position: absolute;

    left: -32px;

    top: 0;

    bottom: 0;

    width: 3px;

    background: linear-gradient(
        to bottom,
        rgba(255, 122, 0, 0) 0%,
        rgba(255, 122, 0, .85) 8%,
        #ff7a00 20%,
        #ff7a00 80%,
        rgba(255, 122, 0, .85) 92%,
        rgba(255, 122, 0, 0) 100%
    );

    box-shadow:
        0 0 10px #ff7a00,
        0 0 25px #ff7a00,
        0 0 60px rgba(255, 122, 0, .95),
        0 0 120px rgba(255, 122, 0, .85),
        0 0 220px rgba(255, 122, 0, .55),
        0 0 320px rgba(255, 122, 0, .28),
        0 0 420px rgba(255, 122, 0, .12);

}


/* ==========================================================
   TITEL
   ========================================================== */

.mk-boss-sidebar .mk-sidebar-title {

    display: flex;

    align-items: center;

    gap: 14px;

    margin: 0 0 24px;

    color: #fff;

    font-size: 30px;

    font-weight: 700;

    text-transform: uppercase;

}


.mk-boss-sidebar .mk-sidebar-title i {

    color: #ff7a00;

    font-size: 28px;

}


/* ==========================================================
   NAVIGATION
   ========================================================== */

.mk-boss-sidebar .mk-sidebar-nav ul {

    margin: 0;

    padding: 0;

    list-style: none;

}


.mk-boss-sidebar .mk-sidebar-nav li {

    margin-bottom: 18px;

}


.mk-boss-sidebar .mk-sidebar-nav a {

    display: flex;
    align-items: center;
    padding: 14px 18px;
    border-radius: 14px;
    color: #bfbfbf;
    text-decoration: none;
    transition: .25s;

}


.mk-boss-sidebar .mk-sidebar-nav a:hover {

        background:#1a1a1a;

    color:#fff;

}


.mk-boss-sidebar .mk-sidebar-nav a::before {

    content: "";

    width: 8px;

    height: 8px;

    flex: 0 0 8px;

    border-radius: 50%;

    background: #4a4a4a;

    transition: .2s;

}


.mk-boss-sidebar .mk-sidebar-nav a:hover::before {

    background: var(--mk-orange);

    box-shadow:
        0 0 10px rgba(255, 122, 0, .45);

}


/* ==========================================================
   TRENNLINIE
   ========================================================== */

.mk-boss-sidebar .mk-sidebar-divider {

    border: 0;

    height: 1px;

    margin: 20px 0;

    background: rgba(255, 255, 255, .12);

}


/* ==========================================================
   EMPTY CARD
   ========================================================== */

.mk-boss-sidebar .mk-sidebar-card {

    padding: 22px;

    background: #151515;

    border: 1px solid #292929;

    border-radius: 22px;

    color: #bdbdbd;

}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 1600px) {

    .mk-boss-sidebar {

        left: auto;

        right: 24px;

    }

}


@media (max-width: 1100px) {

    .mk-boss-sidebar {

        display: none;

    }

}


@media (max-width: 900px) {

    .mk-boss-main {

        width: calc(100% - 24px);

    }

}

/* =========================================================
   BOSS SIDEBAR
   Gleiches Verhalten wie Klassenguides
========================================================= */

.mk-boss-sidebar {

	position: fixed;

	top: 250px;

	left: calc(50% + 700px + 24px);

	width: 300px;

	max-height: calc(100vh - 220px);

	overflow-y: auto;

	z-index: 999;

}


/* Scrollbar */

.mk-boss-sidebar::-webkit-scrollbar {
	width: 8px;
}

.mk-boss-sidebar::-webkit-scrollbar-thumb {

	background: #333;

	border-radius: 999px;

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 1700px) {

	.mk-boss-sidebar {

		left: auto;

		right: 24px;

	}

}


@media (max-width: 1200px) {

	.mk-boss-sidebar {

		position: static;

		width: 100%;

		max-height: none;

		overflow: visible;

		margin-top: 30px;

	}

}

/* =========================================================
   AKTIVER BOSS / AKTIVER RAID
   Gleicher Active-Stil wie die restliche Sidebar
========================================================= */

.mk-boss-sidebar
.mk-sidebar-nav li.active a {

	color: #fff;

	background:
		linear-gradient(
			90deg,
			rgba(255, 122, 0, .22),
			rgba(255, 122, 0, .08)
		);

	border: 1px solid rgba(255, 122, 0, .25);

	box-shadow: none;

}


/* =========================================================
   AKTIVES ICON
========================================================= */

.mk-boss-sidebar
.mk-sidebar-nav li.active a i {

	color: #ff7a00;

}


/* =========================================================
   HOVER
========================================================= */

.mk-boss-sidebar
.mk-sidebar-nav li.active a:hover {

	background:
		linear-gradient(
			90deg,
			rgba(255, 122, 0, .28),
			rgba(255, 122, 0, .10)
		);

	transform: translateX(0);

}

/* =========================================================
   BOSS- UND RAID-EINTRÄGE – ICON AUSBLENDEN
========================================================= */

.mk-boss-sidebar .mk-sidebar-nav a i {
	display: none;
}


/* Punkt bleibt erhalten */
.mk-boss-sidebar .mk-sidebar-nav a::before {
	content: "";

	width: 8px;
	height: 8px;

	flex: 0 0 8px;

	border-radius: 50%;

	background: #4a4a4a;

	transition: .2s ease;
}


/* Aktiver Eintrag */
.mk-boss-sidebar
.mk-sidebar-nav li.active a::before {

	background: #ff7a00;

	box-shadow:
		0 0 10px rgba(255, 122, 0, .45);

}