/* =====================================================
   BELLEGRAVES · MOURNING VEIL
   NAVIGATION V3.1 · Vollständiger Ersatz für mv_nav.css
   Bannertext + 5 öffentliche Links + persönliche Sidebar
   ===================================================== */
:root {
    --mvn-night: #20151d;
    --mvn-plum: #39232e;
    --mvn-wine: #633b4b;
    --mvn-gold: #cba27e;
    --mvn-light-gold: #efcaa2;
    --mvn-cream: #f1ddca;
    --mvn-border: rgba(203,162,126,.48);
}

/* BANNER – vorhandenes Hintergrundbild unverändert lassen */
#header.mv-header {
    position: relative;
    overflow: visible !important;
}

#header #logo.mv-hero {
    position: relative !important;
    box-sizing: border-box;
    height: 480px !important;
    min-height: 480px !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
}

#header #logo .mv-hero-wrapper {
    position: relative !important;
    box-sizing: border-box;
    height: 480px !important;
    min-height: 480px !important;
    max-height: none !important;
    overflow: visible !important;
}

/* Begrüssung liegt auf dem Bannerbild */
#header #logo .mv-banner-intro {
    position: absolute !important;
    z-index: 40;
    top: 40px !important;
    left: 50%;
    transform: translateX(-50%);
    display: flex !important;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    box-sizing: border-box;
    width: min(900px, calc(100% - 140px));
    margin: 0 !important;
    padding: 16px 26px 18px !important;
    border: 0 !important;
    border-radius: 34px;
    background: radial-gradient(
        ellipse at center,
        rgba(29,16,24,.74) 0%,
        rgba(29,16,24,.31) 60%,
        transparent 100%
    ) !important;
    text-align: center;
    text-decoration: none !important;
    text-shadow: 0 3px 12px rgba(0,0,0,.8);
}

#logo .mv-banner-eyebrow {
    display: block;
    color: #dfbb9c;
    font: normal 11px/1.4 Georgia, serif;
    letter-spacing: .28em;
}

#logo .mv-banner-title {
    display: block;
    color: #fff0dd;
    font: normal clamp(33px,4vw,54px)/1.12
        Baskerville, "Palatino Linotype", Georgia, serif;
    letter-spacing: .025em;
}

#logo .mv-banner-description {
    display: block;
    max-width: 680px;
    color: #f4e4d6;
    font: normal clamp(12px,1.1vw,15px)/1.65 Georgia, serif;
}

#logo .mv-banner-intro:hover .mv-banner-title,
#logo .mv-banner-intro:focus-visible .mv-banner-title {
    color: #ffe2bd;
}

#logo .mv-banner-intro:focus-visible {
    outline: 2px solid #e6ba91;
    outline-offset: 4px;
}

/* Fünf Links im unteren Teil des Banners */
#header #logo .mv-town-navigation {
    position: absolute !important;
    z-index: 35;
    top: auto !important;
    bottom: 50px !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    display: block !important;
    box-sizing: border-box;
    width: min(1080px,calc(100vw - 180px)) !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

#logo .mv-town-links {
    display: grid !important;
    grid-template-columns: repeat(5,minmax(0,1fr));
    gap: 11px;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

#logo .mv-town-links > li {
    display: block !important;
    float: none !important;
    min-width: 0;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

#logo .mv-town-link {
    position: relative;
    box-sizing: border-box;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 100%;
    min-width: 0;
    height: 111px;
    margin: 0 !important;
    padding: 13px 8px !important;
    overflow: hidden;
    border: 1px solid var(--mvn-border);
    border-radius: 29px 29px 13px 13px;
    background:
        radial-gradient(
            ellipse at 50% 0,
            rgba(188,131,103,.22),
            transparent 72%
        ),
        linear-gradient(
            155deg,
            rgba(67,39,51,.95),
            rgba(29,19,28,.97)
        ) !important;
    color: var(--mvn-cream) !important;
    text-align: center;
    text-decoration: none !important;
    box-shadow:
        0 12px 25px rgba(11,6,10,.4),
        inset 0 1px rgba(255,222,185,.15);
    transition:
        transform .24s ease,
        border-color .24s ease;
}

#logo .mv-town-link::before {
    content: "";
    position: absolute;
    inset: 5px;
    border: 1px solid rgba(215,166,124,.24);
    border-radius: 24px 24px 9px 9px;
    pointer-events: none;
}

#logo .mv-town-link::after {
    content: "❧";
    position: absolute;
    top: -7px;
    right: 9px;
    color: rgba(219,177,139,.4);
    font: 18px Georgia, serif;
    pointer-events: none;
}

#logo a.mv-town-link:hover,
#logo a.mv-town-link:focus-visible {
    transform: translateY(-5px);
    border-color: #e6bd94;
    outline: none;
    box-shadow:
        0 15px 30px rgba(13,7,12,.5),
        0 0 15px rgba(221,170,128,.15);
}

#logo .mv-town-symbol {
    display: block;
    color: var(--mvn-light-gold);
    font: 27px/1 Georgia, serif;
}

#logo .mv-town-title {
    display: block;
    color: #f4dfce;
    font: normal clamp(13px,1.25vw,18px)/1.25
        Baskerville, "Palatino Linotype", Georgia, serif;
    white-space: normal;
}

#logo .mv-town-subtitle {
    display: block;
    color: #cca184;
    font: 9px/1.4 Georgia, serif;
    letter-spacing: .11em;
}

#logo .mv-link-pending {
    opacity: .78;
    cursor: default;
}

/* Banner-Motto unter den Links */
#header #logo .mv-hero-motto {
    position: absolute !important;
    z-index: 12;
    top: auto !important;
    bottom: 14px !important;
    left: 0 !important;
    right: 0 !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 12px !important;
    text-align: center;
    color: #e4b891;
    font: normal 10px/1.6 Georgia, serif;
    letter-spacing: .32em;
}

/* Kein zweiter horizontaler Nutzerbereich */
#header #panel.mv-rail-holder {
    position: relative !important;
    display: block !important;
    box-sizing: border-box;
    width: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
}

/* Alten Begrüssungsbereich inklusive BELLEGRAVES-Plakette
   ausblenden. Die drei Bildkarten und der Trenner bleiben. */
#content .mv-welcome > :not(.mv-feature-grid):not(.mv-welcome-end) {
    display: none !important;
}

#content .mv-welcome .mv-welcome-heading {
    display: none !important;
}

#content .mv-welcome {
    margin-top: 0 !important;
    padding: 16px 24px 10px !important;
}

#content .mv-welcome .mv-feature-grid {
    margin-top: 0 !important;
}

/* Persönliche Seitenleiste */
#mv-personal-rail {
    position: fixed !important;
    z-index: 850;
    top: 118px;
    left: 11px;
    display: block !important;
    box-sizing: border-box;
    width: 76px;
    max-height: calc(100vh - 135px);
    margin: 0 !important;
    padding: 12px 8px 15px;
    overflow-x: hidden;
    overflow-y: auto;
    border: 1px solid var(--mvn-border);
    border-radius: 29px 29px 22px 22px;
    background:
        radial-gradient(
            ellipse at 50% 0,
            rgba(129,74,92,.31),
            transparent 57%
        ),
        linear-gradient(
            165deg,
            #422936,
            #261a25 58%,
            #1d151e
        );
    box-shadow:
        0 17px 42px rgba(0,0,0,.44),
        inset 0 1px rgba(245,205,166,.12);
    transition: width .25s ease;
    scrollbar-width: thin;
    scrollbar-color: #805746 transparent;
}

#mv-personal-rail.is-open {
    width: 260px;
    box-shadow: 0 22px 55px rgba(0,0,0,.57);
}

.mv-rail-top {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 11px;
    padding: 3px 0 15px;
    border-bottom: 1px solid var(--mvn-border);
}

.mv-rail-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    padding: 0;
    border: 1px solid rgba(219,167,125,.55);
    border-radius: 50%;
    background: linear-gradient(145deg,#684050,#3e2734);
    color: var(--mvn-cream);
    font: 20px/1 Georgia, serif;
    cursor: pointer;
}

.mv-rail-toggle:hover,
.mv-rail-toggle:focus-visible {
    border-color: #edc39a;
    outline: 2px solid rgba(237,195,154,.35);
    outline-offset: 2px;
}

.mv-rail-avatar {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 54px;
    height: 54px;
    margin: 1px auto 0;
    overflow: hidden;
    border: 2px solid #c39a78;
    border-radius: 50%;
    background: linear-gradient(135deg,#80596d,#251923);
    box-shadow:
        0 0 0 4px rgba(202,159,117,.13),
        0 6px 18px rgba(0,0,0,.36);
}

.mv-rail-avatar-fallback {
    position: absolute;
    color: #f0cfaa;
    font: 26px Georgia, serif;
}

.mv-rail-avatar img {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    border-radius: 50%;
}

.mv-rail-identity {
    display: none;
    box-sizing: border-box;
    width: 100%;
    padding: 0 7px;
    text-align: center;
}

#mv-personal-rail.is-open .mv-rail-identity {
    display: block;
}

.mv-rail-eyebrow {
    display: block;
    color: #cba383;
    font: 9px/1.5 Georgia, serif;
    letter-spacing: .16em;
}

.mv-rail-username {
    display: block;
    margin-top: 6px;
    color: #f3dbc6;
    font: 19px/1.4 Baskerville,Georgia,serif;
    overflow-wrap: anywhere;
}

.mv-rail-navigation {
    padding-top: 13px;
}

#mv-personal-rail .mv-rail-links {
    display: block !important;
    float: none !important;
    width: 100%;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

#mv-personal-rail .mv-rail-links > li {
    display: block !important;
    float: none !important;
    margin: 0 0 7px !important;
    padding: 0 !important;
    list-style: none !important;
}

#mv-personal-rail .mv-rail-links > li > a,
#mv-personal-rail .mv-rail-pending,
#mv-personal-rail .mv-rail-logout {
    position: relative;
    box-sizing: border-box;
    display: flex !important;
    align-items: center;
    gap: 9px;
    width: 100%;
    min-height: 43px;
    margin: 0 !important;
    padding: 8px 11px !important;
    border: 1px solid rgba(199,149,111,.25);
    border-radius: 12px;
    background: rgba(48,31,42,.68) !important;
    background-image: none !important;
    color: #f0dbca !important;
    font: normal 0/1.4 Georgia,serif;
    white-space: nowrap;
    text-align: left;
    text-decoration: none !important;
    transition:
        background .2s ease,
        border-color .2s ease;
}

#mv-personal-rail .mv-rail-links > li > a:hover,
#mv-personal-rail .mv-rail-links > li > a:focus-visible,
#mv-personal-rail .mv-rail-logout:hover {
    border-color: #dcb38f;
    background: rgba(111,65,82,.78) !important;
    color: #ffefdd !important;
}

#mv-personal-rail .mv-rail-links > li > a::before {
    content: "✦";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 28px;
    width: 28px;
    color: #dbad86;
    font: 22px/1 Georgia,serif;
}

#mv-personal-rail .mv-rail-core a::before {
    content: "♙";
}

#mv-personal-rail a.mv-rail-home::before {
    content: "⌂";
}

#mv-personal-rail a.mv-rail-login::before {
    content: "✧";
}

#mv-personal-rail a.mv-rail-register::before {
    content: "+";
}

#mv-personal-rail a[href*="private.php"]::before {
    content: "✉";
}

#mv-personal-rail a[href*="getnew"]::before {
    content: "✧";
}

#mv-personal-rail a[href*="getdaily"]::before {
    content: "◷";
}

#mv-personal-rail a.portal::before {
    content: "⌂";
}

#mv-personal-rail a.search::before {
    content: "⌕";
}

#mv-personal-rail a.calendar::before {
    content: "◫";
}

#mv-personal-rail a.modcp::before {
    content: "✥";
}

#mv-personal-rail a.admincp::before {
    content: "⚙";
}

#mv-personal-rail.is-open .mv-rail-links > li > a {
    font-size: 13px;
}

.mv-rail-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 28px;
    width: 28px;
    color: #dcad88;
    font: 21px/1 Georgia,serif;
}

.mv-rail-text {
    display: none;
}

#mv-personal-rail.is-open .mv-rail-text {
    display: inline;
}

#mv-personal-rail .mv-rail-pending {
    opacity: .58;
    cursor: default;
}

#mv-personal-rail.is-open .mv-rail-pending {
    font-size: 13px;
}

#mv-personal-rail .mv-rail-user-tools,
#mv-personal-rail .mv-rail-site-tools,
#mv-personal-rail .mv-rail-team {
    margin-top: 12px !important;
    padding-top: 12px !important;
    border-top: 1px solid var(--mvn-border);
}

#mv-personal-rail .mv-rail-team:empty {
    display: none !important;
}

/* MyBB-Nachrichtenzähler ohne Überlauf */
#mv-personal-rail .mv-rail-user-tools {
    font-size: 0 !important;
    line-height: 0 !important;
}

#mv-personal-rail .mv-rail-user-tools li,
#mv-personal-rail .mv-rail-user-tools li a {
    line-height: 1.4 !important;
}

.mv-rail-footer {
    margin-top: 13px;
    padding-top: 12px;
    border-top: 1px solid var(--mvn-border);
}

#mv-personal-rail .mv-rail-logout {
    font-size: 0;
}

#mv-personal-rail.is-open .mv-rail-logout {
    font-size: 13px;
}

.mv-rail-ornament {
    padding: 17px 0 3px;
    color: #c39a7e;
    font: 28px/1 Georgia,serif;
    text-align: center;
}

/* Geöffnetes Menü verdrängt auf grossen Bildschirmen
   den Inhalt, statt ihn zu verdecken. */
@media (min-width: 1100px) {
    #container:has(#mv-personal-rail.is-open)
    #content > .wrapper {
        box-sizing: border-box;
        width: calc(100% - 280px) !important;
        max-width: 1210px !important;
        margin-left: 270px !important;
        margin-right: 10px !important;
        min-width: 0 !important;
    }
}

/* Tablet */
@media (max-width: 900px) {
    #header #logo.mv-hero {
        height: 530px !important;
        min-height: 530px !important;
    }

    #header #logo .mv-hero-wrapper {
        height: 530px !important;
        min-height: 530px !important;
    }

    #header #logo .mv-banner-intro {
        top: 31px !important;
        width: min(700px,calc(100% - 100px));
    }

    #logo .mv-banner-title {
        font-size: clamp(30px,4.4vw,46px);
    }

    #header #logo .mv-town-navigation {
        width: min(690px,calc(100vw - 100px)) !important;
        bottom: 48px !important;
    }

    #logo .mv-town-links {
        grid-template-columns: repeat(3,minmax(0,1fr));
        gap: 8px;
    }

    #logo .mv-town-link {
        height: 92px;
        border-radius: 22px 22px 12px 12px;
        padding: 10px 6px !important;
    }

    #logo .mv-town-symbol {
        font-size: 23px;
    }

    #logo .mv-town-title {
        font-size: 13px;
    }

    #logo .mv-town-subtitle {
        font-size: 8px;
    }
}

/* Handy */
@media (max-width: 600px) {
    #header #logo.mv-hero {
        height: 670px !important;
        min-height: 670px !important;
    }

    #header #logo .mv-hero-wrapper {
        height: 670px !important;
        min-height: 670px !important;
    }

    #header #logo .mv-banner-intro {
        top: 29px !important;
        width: calc(100% - 35px);
        padding: 12px 18px 18px !important;
    }

    #logo .mv-banner-title {
        font-size: clamp(29px,7.8vw,38px);
    }

    #logo .mv-banner-eyebrow {
        font-size: 9px;
        letter-spacing: .16em;
    }

    #logo .mv-banner-description {
        font-size: 12px;
        line-height: 1.55;
    }

    #header #logo .mv-town-navigation {
        width: calc(100vw - 24px) !important;
        bottom: 45px !important;
    }

    #logo .mv-town-links {
        grid-template-columns: repeat(2,minmax(0,1fr));
        gap: 7px;
    }

    #logo .mv-town-link {
        height: 77px;
        border-radius: 17px 17px 10px 10px;
        padding: 9px 5px !important;
    }

    #logo .mv-town-symbol {
        font-size: 18px;
    }

    #logo .mv-town-title {
        font-size: 12px;
    }

    #logo .mv-town-subtitle {
        font-size: 7px;
        letter-spacing: .04em;
    }

    #logo .mv-hero-motto {
        font-size: 9px;
        letter-spacing: .14em;
    }

    #mv-personal-rail {
        top: auto;
        bottom: 10px;
        left: 8px;
        width: 64px;
        max-height: 78vh;
        padding: 8px 5px;
    }

    #mv-personal-rail.is-open {
        width: min(260px,calc(100vw - 20px));
    }

    .mv-rail-avatar {
        width: 45px;
        height: 45px;
    }

    .mv-rail-toggle {
        width: 38px;
        height: 38px;
    }
}

@media (prefers-reduced-motion: reduce) {
    #mv-personal-rail,
    #logo .mv-town-link,
    #mv-personal-rail .mv-rail-links a {
        transition: none !important;
    }
}