/* ===================================================
   Imports CSS
=================================================== */

@import "colors.css";
@import "site-header.css";
@import "page-tabs.css";
@import "page-headers.css";
@import "cards.css";
@import "buttons.css";
@import "team.css";
@import "accordion.css";
@import "contact.css";
@import "sidebar.css";
@import "herobanner.css";
@import "footer.css";
@import "layout.css";
@import "stats-bar.css";
@import "homepage.css";
@import "dashboard.css";
@import "lists.css";
@import "classes.css";
@import "raid-composition.css";


/* ===================================================
   Startseite – Willkommensanimation
=================================================== */

.homepage-welcome {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    min-height: 100vh;
    z-index: 7000;
    display: grid;
    place-items: center;
    overflow: hidden;
    pointer-events: none;
}

.homepage-welcome__backdrop {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 50% 44%, rgba(48, 104, 143, .34), transparent 31%),
        linear-gradient(135deg, rgba(8, 13, 21, .98), rgba(14, 25, 37, .96));
    background-size: 125% 125%, 100% 100%;
    animation: homepage-welcome-background 12s ease-in-out infinite alternate;
    opacity: 1;
    transition: opacity 1.4s ease;
}

@keyframes homepage-welcome-background {
    from { background-position: 42% 42%, 0 0; }
    to { background-position: 58% 54%, 0 0; }
}

.homepage-welcome__particles {
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow: hidden;
    transition: opacity 1.4s ease;
}

.homepage-welcome__particles i {
    position: absolute;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: rgba(212, 175, 55, .68);
    box-shadow: 0 0 12px rgba(64, 214, 248, .72);
    opacity: 0;
    animation: homepage-welcome-particle 7s ease-in-out infinite;
}

.homepage-welcome__particles i:nth-child(1) { left: 9%; top: 78%; animation-delay: -1s; }
.homepage-welcome__particles i:nth-child(2) { left: 17%; top: 26%; animation-delay: -4s; transform: scale(.6); }
.homepage-welcome__particles i:nth-child(3) { left: 28%; top: 88%; animation-delay: -2s; transform: scale(1.3); }
.homepage-welcome__particles i:nth-child(4) { left: 39%; top: 18%; animation-delay: -5s; transform: scale(.7); }
.homepage-welcome__particles i:nth-child(5) { left: 51%; top: 80%; animation-delay: -3s; transform: scale(.9); }
.homepage-welcome__particles i:nth-child(6) { left: 63%; top: 32%; animation-delay: -6s; transform: scale(1.2); }
.homepage-welcome__particles i:nth-child(7) { left: 72%; top: 73%; animation-delay: -2.5s; transform: scale(.6); }
.homepage-welcome__particles i:nth-child(8) { left: 82%; top: 20%; animation-delay: -4.5s; transform: scale(1.1); }
.homepage-welcome__particles i:nth-child(9) { left: 91%; top: 63%; animation-delay: -1.5s; transform: scale(.75); }
.homepage-welcome__particles i:nth-child(10) { left: 46%; top: 45%; animation-delay: -5.5s; transform: scale(.5); }

@keyframes homepage-welcome-particle {
    0%, 100% { opacity: 0; translate: 0 22px; }
    24%, 76% { opacity: .8; }
    50% { translate: 14px -30px; }
}

/* Die Jahreszeit richtet sich nach dem lokalen Kalendermonat; Weihnachten
   überschreibt sie am 24.–26. Dezember mit eigenen Motiven. */
.homepage-welcome--summer .homepage-welcome__backdrop {
    background:
        radial-gradient(circle at 50% 44%, rgba(73, 133, 106, .34), transparent 31%),
        linear-gradient(135deg, rgba(12, 26, 29, .98), rgba(24, 40, 38, .96));
}

.homepage-welcome--summer .homepage-welcome__backdrop::after {
    content: "";
    position: absolute;
    top: 10%;
    right: 12%;
    width: clamp(76px, 9vw, 138px);
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 231, 143, .76) 0 18%, rgba(238, 182, 66, .24) 43%, transparent 70%);
    box-shadow: 0 0 45px rgba(238, 182, 66, .18);
    opacity: .72;
    animation: homepage-welcome-sun 8s ease-in-out infinite alternate;
}

.homepage-welcome--summer .homepage-welcome__particles i {
    background: rgba(255, 206, 98, .72);
    box-shadow: 0 0 14px rgba(255, 190, 76, .58);
}

@keyframes homepage-welcome-sun {
    from { transform: translateY(0) scale(.96); filter: brightness(.9); }
    to { transform: translateY(10px) scale(1.04); filter: brightness(1.16); }
}

.homepage-welcome--autumn .homepage-welcome__backdrop {
    background:
        radial-gradient(circle at 50% 44%, rgba(122, 64, 35, .34), transparent 31%),
        linear-gradient(135deg, rgba(30, 18, 16, .98), rgba(48, 31, 25, .96));
}

.homepage-welcome--autumn .homepage-welcome__particles i {
    width: 11px;
    height: 8px;
    border-radius: 80% 15% 80% 15%;
    background: #d47737;
    box-shadow: 0 0 10px rgba(201, 82, 34, .28);
    animation: homepage-welcome-falling-leaf 7.5s linear infinite;
}

.homepage-welcome--autumn .homepage-welcome__particles i:nth-child(3n) { background: #b9452c; }
.homepage-welcome--autumn .homepage-welcome__particles i:nth-child(3n + 1) { background: #d7a139; }

@keyframes homepage-welcome-falling-leaf {
    0% { opacity: 0; translate: -5vw -28vh; rotate: -22deg; }
    14% { opacity: .82; }
    86% { opacity: .72; }
    100% { opacity: 0; translate: 10vw 110vh; rotate: 350deg; }
}

.homepage-welcome--winter .homepage-welcome__backdrop {
    background:
        radial-gradient(circle at 50% 44%, rgba(104, 156, 190, .28), transparent 31%),
        linear-gradient(135deg, rgba(8, 17, 28, .99), rgba(20, 35, 53, .97));
}

.homepage-welcome--winter .homepage-welcome__particles i {
    width: 7px;
    height: 7px;
    background: rgba(232, 248, 255, .88);
    box-shadow: 0 0 10px rgba(180, 226, 255, .52);
    animation: homepage-welcome-snowfall 8s linear infinite;
}

@keyframes homepage-welcome-snowfall {
    0% { opacity: 0; translate: -4vw -22vh; }
    16% { opacity: .9; }
    84% { opacity: .82; }
    100% { opacity: 0; translate: 6vw 108vh; }
}

.homepage-welcome--christmas .homepage-welcome__backdrop {
    background:
        radial-gradient(circle at 50% 42%, rgba(149, 41, 48, .32), transparent 34%),
        linear-gradient(135deg, rgba(21, 12, 19, .99), rgba(48, 17, 29, .97));
}

.homepage-welcome--christmas .homepage-welcome__particles i {
    width: 6px;
    height: 6px;
    background: rgba(255, 244, 214, .92);
    box-shadow: 0 0 12px rgba(255, 202, 91, .58);
    animation: homepage-welcome-christmas-snow 8.5s linear infinite;
}

.homepage-welcome--christmas .homepage-welcome__particles i:nth-child(3n) {
    background: rgba(255, 208, 95, .9);
}

@keyframes homepage-welcome-christmas-snow {
    0% { opacity: 0; translate: -4vw -22vh; }
    16% { opacity: .88; }
    84% { opacity: .78; }
    100% { opacity: 0; translate: 7vw 108vh; }
}

.homepage-welcome__lights {
    position: fixed;
    z-index: 4;
    top: 0;
    right: 0;
    left: 0;
    height: clamp(72px, 13vh, 138px);
    pointer-events: none;
    transition: opacity .55s ease;
}

.homepage-welcome__lights--departing {
    opacity: 0;
}

.homepage-welcome__lights::before {
    content: "";
    position: absolute;
    top: -92px;
    right: -4vw;
    left: -4vw;
    height: clamp(132px, 22vh, 224px);
    border-bottom: 2px solid rgba(26, 42, 31, .94);
    border-radius: 0 0 50% 50%;
    box-shadow: 0 2px 2px rgba(0, 0, 0, .45);
}

.homepage-welcome__lights i {
    --bulb-color: #ef5a55;
    position: absolute;
    top: var(--bulb-drop);
    left: var(--bulb-left);
    width: 11px;
    height: 17px;
    border: 1px solid rgba(255, 255, 255, .32);
    border-radius: 45% 45% 52% 52%;
    background: var(--bulb-color);
    box-shadow: 0 0 8px var(--bulb-color), 0 0 18px color-mix(in srgb, var(--bulb-color) 58%, transparent);
    transform: translateX(-50%);
    animation: homepage-welcome-bulb-pulse 1.9s ease-in-out infinite alternate;
}

.homepage-welcome__lights i::before {
    content: "";
    position: absolute;
    top: -5px;
    left: 50%;
    width: 7px;
    height: 5px;
    border-radius: 2px 2px 0 0;
    background: #1b2920;
    transform: translateX(-50%);
}

.homepage-welcome__lights i:nth-child(1) { --bulb-left: 3%; --bulb-drop: 22px; --bulb-color: #e95050; animation-delay: -.2s; }
.homepage-welcome__lights i:nth-child(2) { --bulb-left: 10%; --bulb-drop: 43px; --bulb-color: #4ccf82; animation-delay: -1s; }
.homepage-welcome__lights i:nth-child(3) { --bulb-left: 17%; --bulb-drop: 60px; --bulb-color: #5ea8f7; animation-delay: -.5s; }
.homepage-welcome__lights i:nth-child(4) { --bulb-left: 24%; --bulb-drop: 75px; --bulb-color: #f5c84b; animation-delay: -1.4s; }
.homepage-welcome__lights i:nth-child(5) { --bulb-left: 31%; --bulb-drop: 86px; --bulb-color: #e95050; animation-delay: -.8s; }
.homepage-welcome__lights i:nth-child(6) { --bulb-left: 38%; --bulb-drop: 94px; --bulb-color: #4ccf82; animation-delay: -1.6s; }
.homepage-welcome__lights i:nth-child(7) { --bulb-left: 45%; --bulb-drop: 99px; --bulb-color: #5ea8f7; animation-delay: -.35s; }
.homepage-welcome__lights i:nth-child(8) { --bulb-left: 52%; --bulb-drop: 101px; --bulb-color: #f5c84b; animation-delay: -1.1s; }
.homepage-welcome__lights i:nth-child(9) { --bulb-left: 59%; --bulb-drop: 99px; --bulb-color: #e95050; animation-delay: -.7s; }
.homepage-welcome__lights i:nth-child(10) { --bulb-left: 66%; --bulb-drop: 94px; --bulb-color: #4ccf82; animation-delay: -1.5s; }
.homepage-welcome__lights i:nth-child(11) { --bulb-left: 73%; --bulb-drop: 86px; --bulb-color: #5ea8f7; animation-delay: -.1s; }
.homepage-welcome__lights i:nth-child(12) { --bulb-left: 80%; --bulb-drop: 75px; --bulb-color: #f5c84b; animation-delay: -1.25s; }
.homepage-welcome__lights i:nth-child(13) { --bulb-left: 87%; --bulb-drop: 60px; --bulb-color: #e95050; animation-delay: -.6s; }
.homepage-welcome__lights i:nth-child(14) { --bulb-left: 94%; --bulb-drop: 42px; --bulb-color: #4ccf82; animation-delay: -1.7s; }

@keyframes homepage-welcome-bulb-pulse {
    from { opacity: .58; filter: brightness(.75); transform: translateX(-50%) scale(.92); }
    to { opacity: 1; filter: brightness(1.28); transform: translateX(-50%) scale(1.08); }
}

.homepage-welcome__tree {
    position: fixed;
    z-index: 2;
    right: clamp(18px, 6vw, 110px);
    bottom: clamp(18px, 5vh, 74px);
    width: clamp(120px, 17vw, 270px);
    max-height: 42vh;
    object-fit: contain;
    object-position: bottom right;
    filter: drop-shadow(0 18px 26px rgba(0, 0, 0, .52));
    pointer-events: none;
    animation: homepage-welcome-tree-glow 3.8s ease-in-out infinite alternate;
    transition: opacity .6s ease, transform .7s ease;
}

.homepage-welcome__tree--departing {
    opacity: 0;
    transform: translateY(16px) scale(.96);
}

@keyframes homepage-welcome-tree-glow {
    from { filter: drop-shadow(0 18px 26px rgba(0, 0, 0, .52)) brightness(.92); }
    to { filter: drop-shadow(0 18px 32px rgba(255, 190, 84, .24)) brightness(1.08); }
}

.homepage-welcome--spring .homepage-welcome__backdrop {
    background:
        radial-gradient(circle at 50% 44%, rgba(129, 115, 162, .3), transparent 31%),
        linear-gradient(135deg, rgba(17, 20, 34, .98), rgba(37, 34, 57, .96));
}

.homepage-welcome--spring .homepage-welcome__particles i {
    width: 10px;
    height: 7px;
    border-radius: 75% 20% 75% 20%;
    background: rgba(255, 185, 212, .9);
    box-shadow: 0 0 10px rgba(255, 158, 203, .34);
    animation: homepage-welcome-blossom 8.5s ease-in-out infinite;
}

.homepage-welcome--spring .homepage-welcome__particles i:nth-child(3n) { background: rgba(222, 183, 255, .88); }

@keyframes homepage-welcome-blossom {
    0% { opacity: 0; translate: -8vw -18vh; rotate: -18deg; }
    15% { opacity: .78; }
    82% { opacity: .72; }
    100% { opacity: 0; translate: 12vw 104vh; rotate: 210deg; }
}

.homepage-welcome__content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 210px 32px 32px;
    text-align: center;
    color: var(--text);
    opacity: 0;
    transform: translateY(14px) scale(.97);
    transition: opacity .55s ease, transform .7s cubic-bezier(.2, .8, .2, 1);
}

.homepage-welcome--visible .homepage-welcome__content {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.homepage-welcome__logo {
    position: fixed;
    z-index: 3;
    left: 50%;
    top: calc(50% - 150px);
    width: 154px;
    height: 154px;
    object-fit: cover;
    border: 0;
    border-radius: 30px;
    box-shadow: 0 0 0 7px rgba(64, 214, 248, .05), 0 18px 52px rgba(0, 0, 0, .48);
    transform: translate(-50%, -50%);
    transform-origin: center;
}

.homepage-welcome__season {
    position: fixed;
    z-index: 3;
    top: calc(50% - 254px);
    left: 50%;
    margin: 0;
    color: #f2c94c;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .22em;
    line-height: 1;
    text-shadow: 0 2px 14px rgba(0, 0, 0, .72);
    text-transform: uppercase;
    transform: translate(-50%, -50%) translateY(8px);
    opacity: 0;
    transition: opacity .22s ease, transform .28s ease;
}

.homepage-welcome--visible .homepage-welcome__season {
    animation: homepage-welcome-season-enter .65s .2s ease forwards;
}

.homepage-welcome__season--departing {
    animation: none !important;
    opacity: 0;
    transform: translate(-50%, -50%) translateY(-4px);
}

@keyframes homepage-welcome-season-enter {
    to {
        opacity: .92;
        transform: translate(-50%, -50%) translateY(0);
    }
}

.homepage-welcome__logo--departing {
    animation: homepage-welcome-logo-depart 1.15s cubic-bezier(.35, 0, .2, 1) forwards;
}

@keyframes homepage-welcome-logo-depart {
    to {
        transform: translate(
            calc(-50% + var(--welcome-logo-move-x)),
            calc(-50% + var(--welcome-logo-move-y))
        ) scale(var(--welcome-logo-scale));
    }
}

.homepage-welcome__kicker {
    margin: 0 0 11px;
    color: var(--gold);
    font: 800 11px/1.2 var(--font-body);
    letter-spacing: .24em;
}

.homepage-welcome h1 {
    margin: 0;
    color: var(--text);
    font: 800 clamp(30px, 5vw, 58px)/1.06 var(--font-body);
    letter-spacing: -.035em;
    text-shadow: 0 4px 24px rgba(0, 0, 0, .42);
}

.homepage-welcome__meta {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-top: 20px;
    color: #b8c5d3;
    font: 700 12px/1.2 var(--font-body);
    letter-spacing: .04em;
}

.homepage-welcome__meta i {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--gold);
}

.homepage-welcome--visible .homepage-welcome__content--departing {
    opacity: 0;
    transform: translateY(6px) scale(.96);
    transition-duration: .35s;
}

.homepage-welcome__backdrop--departing {
    opacity: 0;
}

.homepage-welcome__particles--departing {
    opacity: 0;
}

@media (max-width: 560px) {
    .homepage-welcome__content { padding: 165px 22px 22px; }
    .homepage-welcome__logo { width: 118px; height: 118px; border-radius: 24px; top: calc(50% - 125px); }
    .homepage-welcome__season { top: calc(50% - 210px); font-size: 9px; }
    .homepage-welcome__lights { height: 98px; }
    .homepage-welcome__lights::before { top: -72px; height: 145px; }
    .homepage-welcome__lights i { width: 8px; height: 13px; }
    .homepage-welcome__lights i::before { top: -4px; width: 5px; height: 4px; }
    .homepage-welcome__lights i:nth-child(n) { --bulb-drop: clamp(17px, 12vw, 52px); }
    .homepage-welcome__tree { right: 12px; bottom: 20px; width: clamp(92px, 30vw, 150px); max-height: 28vh; }
    .homepage-welcome__kicker { margin-top: 0; font-size: 9px; }
    .homepage-welcome__meta { flex-direction: column; gap: 6px; font-size: 11px; }
    .homepage-welcome__meta i { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .homepage-welcome { display: none; }
}


/* ===================================================
   Global visual consistency – Member Portal style
=================================================== */
:root {
    --surface-unified: #161e2a;
    --surface-unified-2: #121a25;
    --surface-border-unified: rgba(140,175,255,.16);
}

/* Hauptüberschriften: gold, abgerundet und nach rechts weich auslaufend. */
.page-header,
.admin-page-heading {
    background:
        linear-gradient(90deg, rgba(22,30,42,.98) 0%, rgba(22,30,42,.92) 55%, rgba(22,30,42,.52) 82%, rgba(22,30,42,0) 100%);
    border: 1px solid var(--surface-border-unified);
    border-radius: 14px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.025);
}

.page-header h1,
.page-header h2,
.admin-page-heading h1 {
    color: var(--gold) !important;
}

/* Einheitliche Grundfläche für die wichtigsten großen Cards/Panels. */
.card,
.team-card,
.raid-card,
.raid-panel,
.next-raid-panel,
.live-raid-panel,
.timeline-panel,
.raid-history-panel,
.raid-tab-panel,
.page-tab-panel,
.dashboard-tab-panel,
.difficulty-card {
    background: var(--surface-unified) !important;
    border-color: var(--surface-border-unified) !important;
}

/* Innere/kleinere Karten dürfen sich weiterhin sichtbar abheben. */
.team-task,
.next-raid-difficulty-box,
.raid-overview-note,
.raid-history-entry,
.dashboard-panel-heading,
.progress-marker {
    background: var(--surface-unified-2);
    border-color: rgba(140,175,255,.11);
}

/* Housing-Modal liegt im Inhaltsbereich unter dem fixierten Header. */
.housing-modal {
    z-index: 1100 !important;
    padding: 16px !important;
}
.housing-modal-window {
    margin-top: 0;
}

@media (max-width: 760px) {
    .site-header-inner { padding: 0 10px; }
    .external-nav { gap: 5px; }
    .external-nav-link { width: 44px; height: 44px; }
    .external-nav-link img { width: 38px; height: 38px; }
    .page-header,
    .admin-page-heading { border-radius: 12px; }
}


/* ===================================================
   Raid – nächster Raid: Difficulty-Bereich ohne Innen-Card
=================================================== */
.next-raid .next-raid-difficulty-box {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
}

/* ===================================================
   Raid – Tab-Inhalte als sauber abgerundetes Panel
=================================================== */
.raid-details-tabs-section .raid-tab-panel {
    margin-top: 12px;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--surface-border-unified);
    border-radius: 14px;
    background: var(--surface-unified) !important;
    box-shadow: 0 10px 30px rgba(0,0,0,.16);
}

.raid-details-tabs-section .raid-tab-panel > .page-section {
    margin: 0;
    padding: 0 0 20px;
}

.raid-details-tabs-section .raid-tab-panel > .page-section > h3 {
    margin: 0;
    padding: 14px 16px 10px;
    background: linear-gradient(90deg, rgba(22,30,42,.98), rgba(22,30,42,.68), rgba(22,30,42,0));
    border-bottom: 1px solid rgba(140,175,255,.10);
}

.raid-details-tabs-section .raid-tab-panel > .page-section > #guild-monitor,
.raid-details-tabs-section .raid-tab-panel > .page-section > #ranking,
.raid-details-tabs-section .raid-tab-panel > .page-section > #raid-history,
.raid-details-tabs-section .raid-tab-panel > .page-section > .raid-overview-note,
.raid-details-tabs-section .raid-tab-panel > .page-section > .raid-panel,
.raid-details-tabs-section .raid-tab-panel > .page-section > .timeline-panel {
    margin-left: 16px;
    margin-right: 16px;
}

.raid-details-tabs-section .raid-tab-panel .raid-timeline {
    margin-top: 18px !important;
    padding-bottom: 0 !important;
}

.raid-details-tabs-section .raid-tab-panel .raid-timeline > h3 {
    margin-top: 0;
}

/* ===================================================
   Gildenleitung – keine Rahmen bei Zuständigkeiten
=================================================== */
.leadership-section .leadership-responsibilities {
    margin-top: 18px;
    padding: 0;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

.leadership-section .leadership-responsibilities .team-tasks {
    margin-top: 0;
}

/* ===================================================
   Bewerber – Prioritäten als Tabs
=================================================== */
.recruitment-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    padding: 5px;
    margin: 8px 0 14px;
    border: 1px solid rgba(140,175,255,.14);
    border-radius: 12px;
    background: rgba(14,22,32,.9);
}

.recruitment-tab {
    flex: 1 1 140px;
    min-height: 42px;
    padding: 8px 12px;
    border: 1px solid transparent;
    border-radius: 9px;
    background: transparent;
    color: #9eabbc;
    font: 700 11px/1.2 var(--font-body);
    cursor: pointer;
    transition: .2s ease;
}

.recruitment-tab:hover {
    color: #eef3f8;
    background: rgba(255,255,255,.035);
}

.recruitment-tab.active {
    color: var(--accent-cyan);
    background: rgba(64,214,248,.10);
    border-color: rgba(64,214,248,.22);
    box-shadow: inset 0 -2px 0 var(--accent-cyan);
}

.recruitment-tab-count {
    margin-left: 5px;
    opacity: .72;
}

.recruitment-tab-panel[hidden] {
    display: none !important;
}

.recruitment-tab-panel {
    min-height: 20px;
}

@media (max-width: 700px) {
    .recruitment-tab { flex: 1 1 45%; }
}

/* Einheitliche Scrollbar – auch für das Housing-Fenster. */
html,
body,
.housing-modal,
.housing-modal-window {
    scrollbar-width: thin;
    scrollbar-color: rgba(140,175,255,.34) rgba(13,17,23,.55);
}

html::-webkit-scrollbar,
body::-webkit-scrollbar,
.housing-modal::-webkit-scrollbar,
.housing-modal-window::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track,
.housing-modal::-webkit-scrollbar-track,
.housing-modal-window::-webkit-scrollbar-track {
    background: rgba(13,17,23,.55);
}

html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb,
.housing-modal::-webkit-scrollbar-thumb,
.housing-modal-window::-webkit-scrollbar-thumb {
    background: rgba(140,175,255,.34);
    border-radius: 8px;
    border: 2px solid rgba(13,17,23,.55);
}

html::-webkit-scrollbar-thumb:hover,
body::-webkit-scrollbar-thumb:hover,
.housing-modal::-webkit-scrollbar-thumb:hover,
.housing-modal-window::-webkit-scrollbar-thumb:hover {
    background: rgba(140,175,255,.52);
}

/* ===================================================
   v7 Feinabstimmung
=================================================== */

/* Dashboard: alle Tab-Panels und Roster-Cards nutzen dieselbe Oberfläche. */
.dashboard-tab-panel {
    background: var(--surface-unified) !important;
    border: 1px solid var(--surface-border-unified) !important;
    border-radius: 14px !important;
    overflow: hidden;
}

.dashboard-panel-heading {
    background: linear-gradient(90deg, rgba(22,30,42,.98) 0%, rgba(22,30,42,.72) 65%, rgba(22,30,42,0) 100%) !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(140,175,255,.10) !important;
    border-radius: 0 !important;
    margin: 0 !important;
    padding: 18px 22px 14px !important;
}

.dashboard-panel-heading h3 {
    margin: 0 !important;
    color: var(--gold) !important;
}

.dashboard-panel-heading p {
    margin: 5px 0 0 !important;
}

.dashboard-tab-panel > #raid-roster {
    padding: 18px 22px 24px;
}

.raid-roster .raid-frame {
    background: var(--surface-unified-2) !important;
    border: 1px solid var(--surface-border-unified) !important;
    border-radius: 10px !important;
}

/* Zuständigkeiten sind reiner Inhalt und keine hervorgehobenen Unterkarten. */
.leadership-section .team-task,
.leadership-section .team-tasks {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* ===================================================
   Raid Übersicht – Timeline dauerhaft sichtbar
=================================================== */
.raid-overview-note {
    display: none !important;
}

.raid-overview .raid-panel {
    margin-bottom: 18px;
}

.raid-overview .raid-timeline,
.raid-tab-panel[data-raid-tab="raid-overview"] .raid-timeline {
    display: block !important;
}

/* Das Timeline-Panel folgt optisch direkt auf die Difficulty-Auswahl. */
.raid-tab-panel[data-raid-tab="raid-overview"] .raid-timeline {
    margin: 18px 16px 0 !important;
}

.raid-tab-panel[data-raid-tab="raid-overview"] .raid-timeline > h3 {
    margin: 0 !important;
    padding: 14px 16px 10px !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(140,175,255,.10) !important;
    border-radius: 0 !important;
    background: linear-gradient(90deg, rgba(22,30,42,.98), rgba(22,30,42,.68), rgba(22,30,42,0)) !important;
}

.raid-tab-panel[data-raid-tab="raid-overview"] .timeline-panel {
    margin: 0 !important;
    border-radius: 0 0 12px 12px !important;
}

/* Housing-Modal: Info links, Titel rechts. */
.housing-modal-header {
    justify-content: space-between !important;
    align-items: center !important;
    gap: 24px !important;
}

.housing-modal-plot-info {
    display: flex;
    align-items: center;
    gap: 18px;
    min-width: 0;
}

.housing-modal-plot-title {
    color: var(--gold);
    font-size: 16px;
    font-weight: 800;
    white-space: nowrap;
}

.housing-modal-plot-row {
    display: flex;
    align-items: center;
    gap: 14px;
    color: var(--text-secondary);
    font-size: 12px;
    white-space: nowrap;
}

.housing-modal-plot-row strong {
    color: var(--text);
    font-weight: 700;
}

.housing-modal-title-block {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-left: auto;
}

.housing-modal-title-block > div {
    text-align: right;
}

.housing-modal-title-block .housing-modal-kicker,
.housing-modal-title-block h3 {
    text-align: right;
}

.housing-modal-window {
    overflow: hidden !important;
}

.housing-modal-content {
    overflow-y: auto;
    max-height: calc(100vh - 178px);
}

.housing-modal-content .housing-debug-panel {
    display: none !important;
}

.housing-modal-content .housing-map-container {
    margin-bottom: 0;
}


/* ===================================================
   v8 – letzte Designanpassungen
=================================================== */

/* ---------------------------------------------------
   Dashboard: Raid Roster exakt wie die übrigen Tab-Panels
--------------------------------------------------- */
.dashboard-tab-panel > #raid-roster {
    margin: 0 22px 24px !important;
    padding: 24px !important;
    background: linear-gradient(180deg, #0a0e13, var(--panel-light)) !important;
    border: 1px solid rgba(212,175,55,.35) !important;
    border-radius: 18px !important;
    box-shadow: 0 12px 35px rgba(0,0,0,.35), 0 0 18px rgba(212,175,55,.06) !important;
}

.dashboard-tab-panel > #raid-roster .raid-roster {
    margin: 0 !important;
    gap: 28px !important;
}

.dashboard-tab-panel > #raid-roster .raid-role {
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
}

.dashboard-tab-panel > #raid-roster .raid-role-title {
    padding: 0 0 12px !important;
    margin: 0 0 14px !important;
    border-bottom: 1px solid rgba(140,175,255,.12) !important;
}

.dashboard-tab-panel > #raid-roster .raid-frame {
    background: var(--surface-unified-2) !important;
    border: 1px solid var(--surface-border-unified) !important;
    border-radius: 10px !important;
}

/* ---------------------------------------------------
   Bewerber: Prioritäten ohne Anzahl, mit festen Farben
--------------------------------------------------- */
.recruitment-tab-count {
    display: none !important;
}

.recruitment-tab.priority-2 {
    color: #ff5555;
}

.recruitment-tab.priority-1 {
    color: #ffb347;
}

.recruitment-tab.priority-0 {
    color: #b5b5b5;
}

.recruitment-tab.priority-2:hover,
.recruitment-tab.priority-2.active {
    color: #ff5555;
    background: rgba(255,85,85,.10);
    border-color: rgba(255,85,85,.30);
    box-shadow: inset 0 -2px 0 #ff5555;
}

.recruitment-tab.priority-1:hover,
.recruitment-tab.priority-1.active {
    color: #ffb347;
    background: rgba(255,179,71,.10);
    border-color: rgba(255,179,71,.30);
    box-shadow: inset 0 -2px 0 #ffb347;
}

.recruitment-tab.priority-0:hover,
.recruitment-tab.priority-0.active {
    color: #b5b5b5;
    background: rgba(181,181,181,.08);
    border-color: rgba(181,181,181,.24);
    box-shadow: inset 0 -2px 0 #888;
}

/* ---------------------------------------------------
   Raid Timeline: vollständig abgerundetes Panel
--------------------------------------------------- */
.raid-tab-panel[data-raid-tab="raid-overview"] .timeline-panel,
.raid-details-tabs-section .raid-tab-panel .timeline-panel {
    border-radius: 18px !important;
    overflow: hidden;
    border: 1px solid rgba(212,175,55,.35) !important;
    background: var(--surface-unified) !important;
    box-shadow: 0 12px 35px rgba(0,0,0,.35), 0 0 18px rgba(212,175,55,.06) !important;
}

/* ---------------------------------------------------
   Housing modal: Titel bleibt rechts, Grundstück links
--------------------------------------------------- */
.housing-modal-header {
    justify-content: space-between !important;
}

.housing-modal-title-block {
    margin-left: auto !important;
}

/* ---------------------------------------------------
   Smartphone – globale Layouts
--------------------------------------------------- */
@media (max-width: 768px) {
    body {
        padding-top: 62px;
    }

    .site-header-inner {
        width: 100% !important;
        padding: 0 8px !important;
        gap: 6px !important;
    }

    .site-brand-area {
        min-width: 0 !important;
        flex: 1 1 auto;
    }

    .site-brand > img {
        width: 40px !important;
        height: 40px !important;
    }

    .site-brand-text strong {
        margin-left: 6px !important;
        font-size: 15px !important;
    }

    .site-brand-text small {
        display: none;
    }

    .site-header-actions {
        gap: 5px !important;
    }

    .header-action-button {
        min-height: 40px !important;
        padding: 4px 7px !important;
        border-radius: 10px !important;
    }

    .header-action-button img {
        width: 29px !important;
        height: 29px !important;
    }

    .site-mobile-toggle {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        width: 40px !important;
        height: 40px !important;
    }

    .content {
        width: 100% !important;
        margin-left: 0 !important;
        padding: 18px 12px 36px !important;
    }

    .page-header {
        margin-bottom: 22px;
    }

    .page-header h1 {
        font-size: clamp(28px, 8vw, 38px);
    }

    .page-header p {
        font-size: 14px;
        line-height: 1.55;
    }

    .page-tabs {
        overflow-x: auto;
        flex-wrap: nowrap !important;
        scrollbar-width: thin;
    }

    .page-tab {
        flex: 0 0 auto !important;
        min-width: max-content;
    }

    .dashboard-tabs {
        overflow-x: auto;
        flex-wrap: nowrap !important;
    }

    .dashboard-tab {
        flex: 0 0 auto !important;
        white-space: nowrap;
    }

    .dashboard-tab-panel {
        padding: 14px !important;
        border-radius: 14px !important;
    }

    .dashboard-panel-heading {
        padding: 15px 4px 13px !important;
    }

    .dashboard-tab-panel > #raid-roster {
        margin: 12px 0 0 !important;
        padding: 16px !important;
        border-radius: 14px !important;
    }

    .dashboard-tab-panel > #raid-roster .raid-roster {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
    }

    .classes-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }

    .stats-bar {
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
    }

    .stat-item {
        min-width: 0;
        padding: 12px 8px !important;
    }

    .stat-value {
        font-size: 20px !important;
    }

    .hero-banner {
        height: 220px !important;
        border-radius: 12px !important;
    }

    .hero-divider {
        margin: 16px 0 20px !important;
    }

    .raid-details-tabs-section .raid-tab-panel {
        border-radius: 14px !important;
    }

    .raid-tab-panel[data-raid-tab="raid-overview"] .raid-timeline {
        margin: 14px 10px 0 !important;
    }

    .raid-tab-panel[data-raid-tab="raid-overview"] .timeline-panel {
        padding: 18px !important;
        border-radius: 14px !important;
    }

    .timeline-boss {
        margin-left: 18px !important;
        padding: 14px 15px !important;
    }

    .timeline-boss::before {
        left: -12px !important;
    }

    .next-raid-panel,
    .live-raid-panel,
    .raid-panel,
    .raid-history-panel {
        padding: 18px !important;
        border-radius: 14px !important;
    }

    .next-raid-content {
        gap: 18px !important;
    }

    .ranking-grid {
        grid-template-columns: 1fr !important;
    }

    .recruitment-tabs {
        flex-wrap: nowrap !important;
        overflow-x: auto;
    }

    .recruitment-tab {
        flex: 1 0 auto !important;
        min-width: 120px;
        white-space: nowrap;
    }

    .housing-modal {
        top: 62px !important;
        left: 0 !important;
        padding: 8px !important;
    }

    .housing-modal-backdrop {
        top: 0 !important;
    }

    .housing-modal-window {
        width: 100% !important;
        max-height: calc(100vh - 78px) !important;
        border-radius: 14px !important;
    }

    .housing-modal-header {
        padding: 14px !important;
        gap: 10px !important;
    }

    .housing-modal-plot-info {
        min-width: 0;
        flex-wrap: wrap;
        gap: 5px 10px !important;
    }

    .housing-modal-plot-row {
        flex-wrap: wrap;
        gap: 4px 9px !important;
        white-space: normal !important;
    }

    .housing-modal-title-block {
        flex-shrink: 0;
    }

    .housing-modal-header h3 {
        font-size: 17px !important;
    }

    .housing-modal-content {
        padding: 10px !important;
    }

    .housing-map-container {
        border-radius: 9px !important;
    }

    .housing-debug-panel {
        padding: 16px !important;
    }
}

@media (max-width: 480px) {
    .site-brand-text strong {
        font-size: 14px !important;
    }

    .site-brand > img {
        width: 36px !important;
        height: 36px !important;
    }

    .header-action-button {
        padding: 3px 5px !important;
    }

    .header-action-button img {
        width: 26px !important;
        height: 26px !important;
    }

    .site-mobile-toggle {
        width: 36px !important;
        height: 36px !important;
    }

    .content {
        padding-inline: 8px !important;
    }

    .stats-bar {
        grid-template-columns: 1fr !important;
    }

    .hero-banner {
        height: 180px !important;
    }

    .page-tabs,
    .dashboard-tabs {
        padding: 4px !important;
    }

    .page-tab,
    .dashboard-tab,
    .recruitment-tab {
        min-height: 40px !important;
        padding: 8px 11px !important;
        font-size: 10px !important;
    }

    .dashboard-tab-panel {
        padding: 11px !important;
    }

    .dashboard-tab-panel > #raid-roster {
        padding: 12px !important;
    }

    .housing-modal-header {
        align-items: flex-start !important;
    }

    .housing-modal-plot-title {
        font-size: 14px !important;
    }

    .housing-modal-header h3 {
        font-size: 15px !important;
    }
}


/* ===================================================
   Über uns – kompakter Header und Klassenfarben
=================================================== */

.about-page-header {
    min-height: 132px;
}

.about-page-header .page-header-grid {
    min-height: 76px;
}

.about-page-header .page-header-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.lead-name {
    font-weight: 800;
}

.lead-druid { color: #FF7C0A !important; }
.lead-hunter { color: #AAD372 !important; }
.lead-monk { color: #00FF98 !important; }
.lead-shaman { color: #0070DD !important; }