/* Lokale Einbindung der Expansiva-Schrift für das Logo */
@font-face {
    font-family: 'Expansiva';
    src: local('Expansiva'), local('Expansiva-Regular');
    font-display: swap;
}

:root {
    --primary-red: #d90429;
    --hover-red: #ef233c;
    --bg-light: #f8f9fa;
    --card-bg: #f0f2f5;
    --card-hover: #e4e7eb;
    --border-color: #e0e0e0;
    --text-dark: #1a1a1a;
    --text-muted: #6c757d;
    --accent-green: #37B700;
    --active-green: #37B700; 
    --club-color: #1F355C;
    --competition-league: #12233b;
    --competition-pokal: #185f34;
    --competition-friendly: #687386;
    --competition-tournament: #8a651f;
    --vsl-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

body { 
    font-family: var(--vsl-font);
    background-color: var(--bg-light); 
    color: var(--text-dark); 
    margin: 0; 
    padding: 0; 
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

header { 
    background: #ffffff; 
    padding: 12px 30px; 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    position: relative; 
    z-index: 100;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

/* Universelles Logo-Styling für konsistente Darstellung in Firefox und Edge */
.logo, .top-nav .logo-area, header .logo, .brand-title {
    font-family: 'Expansiva', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    font-size: 1.5em !important;
    color: var(--primary-red, #cc0000) !important;
    text-decoration: none !important;
    font-weight: 800 !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
}

.brand-container { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.brand-text { display: flex; flex-direction: column; }
.brand-title { line-height: 1; }
.brand-subtitle { font-size: 0.75em; color: var(--primary-red); font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; margin-top: 3px; }

.nav-wrapper { display: flex; align-items: center; margin-right: 180px; }
nav { display: flex; gap: 40px; position: relative; z-index: 101; }

nav a, .nav-links a { 
    font-family: inherit;
    font-weight: 700;
    font-size: 0.95em;
    color: #334155; 
    text-decoration: none; 
    transition: color 0.2s; 
    cursor: pointer; 
}
nav a.active, nav a:hover, .nav-links a:hover, .nav-links a.active { 
    color: #cc0000; 
}

.club-banner-strip {
    background-color: var(--club-color);
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 90;
    transition: all 0.2s ease-in-out;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

.club-banner-strip.sticky {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 105;
}

.banner-left-logo {
    position: absolute;
    left: 20px;
    height: 28px;
    width: auto;
    object-fit: contain;
}

.banner-club-name {
    font-size: 1.15em;
    font-weight: 400;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.user-sidebar { 
    position: fixed; 
    top: 10px; 
    right: 25px; 
    z-index: 999; 
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 12px;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    pointer-events: none;
}

.logo-home-wrapper {
    position: relative;
    display: inline-block;
    pointer-events: auto;
}

.logo-home-wrapper.logo-only-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
}

.user-team-logo { 
    height: 155px; 
    width: auto; 
    object-fit: contain; 
    filter: drop-shadow(0px 6px 14px rgba(0,0,0,0.3)); 
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    cursor: pointer; 
    display: block;
}

.user-sidebar.scrolled .user-team-logo {
    height: 155px;
    filter: drop-shadow(0px 6px 14px rgba(0,0,0,0.3));
}

.user-team-logo:hover { 
    transform: scale(1.06); 
}

.home-icon-btn {
    position: absolute;
    bottom: 0%;
    left: -10%;
    width: 22%;
    height: 22%;
    background: transparent;
    color: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    text-decoration: none;
    transition: color 0.2s;
    z-index: 10;
}

.home-icon-btn:hover {
    transform: scale(1.2);
    color: var(--primary-red);
}

.home-icon-btn svg {
    width: 100%;
    height: 100%;
    fill: currentColor;
    filter: drop-shadow(0px 2px 4px rgba(0,0,0,0.3));
}

.sidebar-widget {
    background: var(--club-bg-rgba, rgba(31, 53, 92, 0.90));
    backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.32);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
    border-radius: 7px;
    pointer-events: auto;
    text-align: center;
    box-sizing: border-box;
    transition: transform 0.2s, background-color 0.2s, opacity 0.2s;
}

.widget-games {
    padding: 8px 15px;
    min-width: 120px;
    cursor: pointer;
}
.widget-games:hover {
    transform: scale(1.03);
}
.widget-games .label { font-size: 0.8em; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; }
.widget-games .value { font-size: 1.35em; font-weight: 700; margin: 3px 0; }
.widget-games .value-played {
    color: #4bd12f !important;
}

button, input, select, textarea { font-family:inherit; }
h1, h2, h3, h4 { font-family:inherit; text-wrap:balance; }
.competition-row{position:relative;overflow:hidden;box-shadow:inset 0 1px rgba(255,255,255,.035)}
.competition-row::after{content:"";position:absolute;inset:0 0 auto;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.13),transparent);pointer-events:none}
.auto-result-badge{display:inline-flex;align-items:center;justify-content:center;margin-left:5px;padding:2px 5px;border:1px solid #d69b22;border-radius:5px;background:#fff4cf;color:#744b00;font-size:.56rem;font-weight:950;line-height:1;letter-spacing:.55px;vertical-align:middle;white-space:nowrap;box-shadow:0 1px 3px rgba(116,75,0,.14)}
.widget-games .subtext { font-size: 0.72em; opacity: 0.85; font-weight: 500; }

.widget-pill {
    padding: 6px 12px;
    font-size: 0.9em;
    font-weight: 700;
    border-radius: 6px;
    min-width: 120px;
}
.pill-money {
    color: #39ff14 !important;
}
.pill-money-negative {
    color: var(--primary-red) !important;
}
.pill-xp .xp-val {
    color: #39ff14 !important;
    font-weight: 700;
}

.sidebar-buttons {
    display: flex;
    flex-direction: column;
    gap: 14px;
    align-items: flex-end;
    margin-top: 4px;
}

.action-btn {
    position: relative;
    width: 48px;
    height: 48px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    text-decoration: none;
}

.action-btn:hover {
    transform: scale(1.08);
}

.action-btn.disabled-btn {
    background: #7f8c8d !important;
    opacity: 0.7;
    cursor: pointer;
}
.action-btn.disabled-btn:hover {
    transform: none;
}

.action-btn svg {
    width: 25px;
    height: 25px;
    fill: currentColor;
}

.btn-badge {
    position: absolute;
    top: -6px;
    left: -6px;
    background: var(--primary-red);
    color: #ffffff !important;
    font-size: 0.8em;
    font-weight: 700;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
}

.objectives-widget {
    background: transparent;
    border-radius: 8px;
    overflow: hidden;
    width: auto;
    align-self: flex-end;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    pointer-events: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.objectives-widget.expanded {
    width: 350px;
    background: var(--club-color, #1f355c);
    backdrop-filter: none;
    border: 1px solid rgba(255, 255, 255, 0.32);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.objectives-header {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    cursor: pointer;
    user-select: none;
    width: auto;
}

.objectives-widget.expanded .objectives-header {
    width: 100%;
    justify-content: space-between;
    padding: 10px 15px;
    background: rgba(0, 0, 0, 0.15);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    box-sizing: border-box;
}

.objectives-title { display: none; font-size: 0.95em; font-weight: 700; color: inherit; }
.objectives-widget.expanded .objectives-title { display: inline; }

.target-btn-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
}

.objectives-widget.expanded .target-btn-container {
    flex-direction: row;
}

.target-ratio-text {
    font-size: 0.9em;
    font-weight: 400;
    letter-spacing: 0.5px;
    margin-top: 2px;
    display: block;
}

.target-ratio-text .done-num { color: var(--primary-red); }
.target-ratio-text .total-num { color: #111111 !important; font-weight: normal !important; }

.objectives-widget.expanded .target-ratio-text {
    display: none;
}

.badge-count-icon {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.objectives-widget.expanded .badge-count-icon {
    width: auto;
    height: auto;
    background: transparent !important;
    box-shadow: none;
    border: none;
}

.objectives-body {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    padding: 0 15px;
    width: 0;              
    pointer-events: none;  
    color: inherit;
}

.objectives-widget.expanded .objectives-body {
    max-height: 380px;
    opacity: 1;
    padding: 15px;
    width: 330px;
    pointer-events: auto;
}

.objective-item { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 12px; line-height: 1.35; font-weight: 500; }
.objective-item:last-child { margin-bottom: 0; }
.objective-item input[type="checkbox"] { accent-color: var(--primary-red); margin-top: 3px; cursor: pointer; flex-shrink: 0; width: 16px; height: 16px; }
.objective-item span { word-break: break-word; }
.objective-item.completed span { text-decoration: line-through; opacity: 0.6; }
.objective-item .objective-system-state { display:grid; place-items:center; flex:0 0 22px; width:22px; height:22px; border-radius:50%; background:#f5c84b; color:#172033; font-weight:950; text-decoration:none !important; opacity:1 !important; }
.objective-item.completed .objective-system-state { background:#43bd51; color:#fff; }
.objective-item.failed .objective-system-state { background:#e34b55; color:#fff; }
.objective-item > span:last-child { display:grid; gap:4px; }
.objective-item small { display:block; font-size:.72rem; line-height:1.35; opacity:.78; }

.large-menu-overlay {
    display: flex;
    position: fixed;
    top: calc(50% + 42px);
    left: 50%;
    transform: translate(-50%, -50%) scale(0.95);
    width: min(1200px, 85vw);
    height: min(750px, 80vh);
    background-color: var(--club-modal-bg, rgba(31, 53, 92, 0.97));
    border-radius: 16px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.5);
    z-index: 2000;
    overflow: hidden;
    flex-direction: column;
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.18);
    
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    transition: opacity 0.28s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.28s cubic-bezier(0.16, 1, 0.3, 1),
                visibility 0.28s;
}

.large-menu-overlay.active {
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
    transform: translate(-50%, -50%) scale(1);
}

.large-menu-watermark {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 65%;
    width: auto;
    object-fit: contain;
    opacity: 0.06;
    pointer-events: none;
    z-index: 1;
}

.large-menu-header {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 24px;
}

.large-menu-header svg {
    width: 48px;
    height: 48px;
    fill: currentColor;
    filter: drop-shadow(0 2px 5px rgba(0,0,0,0.2));
}

.large-menu-content {
    position: relative;
    z-index: 2;
    padding: 20px 40px;
    flex-grow: 1;
    overflow-y: auto;
    min-height: 0;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
}

.match-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 15px;
}

.match-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(0, 0, 0, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 8px 15px;
    transition: background 0.2s, transform 0.15s;
    text-decoration: none;
    color: inherit;
}

.match-row:hover {
    background: rgba(0, 0, 0, 0.3);
    transform: scale(1.005);
}

.match-team {
    display: flex;
    align-items: center;
    gap: 15px;
    flex: 1;
}

.match-team.home {
    justify-content: flex-end;
    text-align: right;
}

.match-team.away {
    justify-content: flex-start;
    text-align: left;
}

.team-block-content {
    display: flex;
    flex-direction: column;
}

.match-team.home .team-block-content {
    align-items: flex-end;
}

.match-team.away .team-block-content {
    align-items: flex-start;
}

.trainer-subinfo {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 2px;
    font-size: 0.8em;
    opacity: 0.85;
}

.status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    display: inline-block;
}

.status-dot.active {
    background-color: var(--active-green);
}

.status-dot.inactive {
    background-color: var(--primary-red);
}

.team-logo {
    width: 32px;
    height: 32px;
    object-fit: contain;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));
}

.team-name {
    font-weight: 600;
    font-size: 1.05em;
    letter-spacing: 0.3px;
}

.match-score {
    background: rgba(0, 0, 0, 0.3);
    padding: 6px 15px;
    border-radius: 6px;
    font-size: 1.2em;
    font-weight: 800;
    min-width: 50px;
    text-align: center;
    margin: 0 15px;
    letter-spacing: 2px;
}

.widget-games .value div {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 4px;
}

.container { max-width: 1200px; margin: 30px auto; padding: 0 20px; }
h2 { color: var(--text-dark); border-bottom: none; padding-bottom: 8px; margin-top: 20px; display: inline-block; font-size: 1.3em; letter-spacing: 0.5px; font-weight: 700; }

.card, .box {
    background-color: var(--card-bg) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-dark) !important;
}

details summary::-webkit-details-marker {
    display: none;
}
details[open] summary {
    background: #f1f5f9;
}
details summary {
    transition: background 0.2s ease;
}
details > div {
    animation: fadeIn 0.3s ease-in-out;
}
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-5px); }
    to { opacity: 1; transform: translateY(0); }
}

.ea-circle-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    padding: 15px;
}

.ea-stat-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.circular-progress {
    position: relative;
    width: 90px;
    height: 90px;
}

.circular-progress svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.circular-progress circle {
    fill: none;
    stroke-width: 8;
}

.circular-progress .bg-circle {
    stroke: rgba(255, 255, 255, 0.1);
}

.circular-progress .progress-circle {
    stroke: #00ffcc;
    stroke-linecap: round;
    transition: stroke-dashoffset 0.5s ease;
}

.circular-progress .percentage-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 16px;
    font-weight: bold;
    color: #ffffff;
}

.ea-stat-label {
    margin-top: 8px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #a0a0a0;
}
/* Saisonübergreifender Terminplaner-Marker für Trainerzuverlässigkeit */
.trainer-reliability {
    display: inline-flex;
    align-items: center;
    margin-left: 7px;
    padding: 2px 7px;
    border: 1px solid currentColor;
    border-radius: 999px;
    font-size: 0.72em;
    font-weight: 800;
    line-height: 1.15;
    white-space: nowrap;
}
.reliability-critical { color: #ff626d; background: rgba(220, 38, 38, .16); }
.reliability-low { color: #ff9a52; background: rgba(249, 115, 22, .16); }
.reliability-medium { color: #f6c84c; background: rgba(234, 179, 8, .16); }
.reliability-good { color: #78df85; background: rgba(34, 197, 94, .16); }
.reliability-excellent { color: #35e784; background: rgba(22, 163, 74, .20); }
.reliability-unrated { color: #b9c5d7; background: rgba(148, 163, 184, .15); }

.terminplaner-feedback-message {
    margin: -2px 0 15px;
    padding: 10px 13px;
    border-radius: 8px;
    font-size: .88em;
    font-weight: 700;
    line-height: 1.35;
}
.terminplaner-feedback-message.error { color: #ffd0d5; background: rgba(220, 38, 38, .22); border: 1px solid rgba(255, 107, 107, .45); }
.terminplaner-feedback-message.warning { color: #ffe8a3; background: rgba(234, 179, 8, .18); border: 1px solid rgba(250, 204, 21, .40); }
.terminplaner-feedback-message.success { color: #b7f7c6; background: rgba(34, 197, 94, .16); border: 1px solid rgba(74, 222, 128, .38); }
.terminplaner-feedback-message.info { color: #bfdbfe; background: rgba(59, 130, 246, .16); border: 1px solid rgba(147, 197, 253, .35); }
.terminplaner-row-notice{margin-top:7px;padding:5px 8px;border-radius:6px;background:rgba(245,158,11,.14);border:1px solid rgba(251,191,36,.35);color:#fde68a;font-size:.72em;font-weight:700;line-height:1.3}.terminplaner-row-notice.is-unread{box-shadow:0 0 0 2px rgba(239,68,68,.32)}
#basicProtectionDialog::backdrop{background:rgba(7,18,33,.68);backdrop-filter:blur(4px)}
/* XP-Ereignisse: positive Buchungen werden eingesammelt, Abzüge erklärt. */
.pill-xp { position: relative; overflow: visible !important; }
.sidebar-widget.xp-history-trigger{cursor:pointer!important}
        .finance-history-modal{
            position:fixed;
            inset:0;
            z-index:7000;
            display:grid;
            place-items:center;
            padding:20px;
            background:rgba(7,20,36,.76);
            backdrop-filter:blur(5px);
        }

        .finance-history-shell{
            width:min(900px,96vw);
            max-height:90vh;
            overflow:auto;
            border-radius:18px;
            background:#fff;
            box-shadow:0 22px 60px rgba(0,0,0,.35);
        }

        .finance-history-header{
            position:sticky;
            top:0;
            z-index:2;
            display:flex;
            align-items:flex-start;
            justify-content:space-between;
            gap:20px;
            padding:19px 22px;
            background:linear-gradient(
                135deg,
                #132a45,
                color-mix(in srgb,var(--office-club,#1F355C) 45%,#132a45)
            );
            color:#fff;
            border-bottom:1px solid rgba(255,255,255,.14);
        }

        .finance-history-header-main{
            min-width:0;
            display:flex;
            flex-direction:column;
            gap:5px;
        }

        .finance-history-header-main h2{
            margin:0;
            color:#fff;
            font-size:1.25rem;
            font-weight:950;
            line-height:1.2;
        }

        .finance-history-header-main small{
            display:block;
            color:#d8e6f2;
            font-size:.72rem;
            line-height:1.4;
        }

        .finance-history-close{
            flex:0 0 auto;
            display:grid;
            place-items:center;
            width:36px;
            height:36px;
            padding:0;
            border:1px solid rgba(255,255,255,.24);
            border-radius:9px;
            background:rgba(255,255,255,.08);
            color:#fff;
            font-size:1.35rem;
            line-height:1;
            cursor:pointer;
        }

        .finance-history-close:hover{
            background:#dc2626;
        }

        .finance-history-header-actions{
            flex:0 0 auto;
            display:flex;
            align-items:center;
            gap:10px;
            margin-left:auto;
        }

        .finance-history-clubmark{
            width:42px;
            height:42px;
            object-fit:contain;
            padding:0;
            border-radius:0;
            background:transparent;
            box-shadow:none;
        }

        .finance-history-close{
            background:#c62828;
            border-color:rgba(255,255,255,.18);
            color:#fff;
            font-size:1.2rem;
            font-weight:900;
        }

        .finance-history-close:hover{
            background:#dc2626;
        }

        .finance-history-close-wide{
            width:auto;
            min-width:92px;
            height:38px;
            padding:0 16px;
            border:0;
            border-radius:8px;
            background:#e60035;
            color:#fff;
            font-size:.72rem;
            font-weight:950;
            line-height:1;
            box-shadow:0 3px 9px rgba(230,0,53,.22);
        }

        .finance-history-close-wide:hover{
            background:#c9002e;
        }

        .finance-booking{
            display:grid;
            grid-template-columns:52px 118px minmax(0,1fr) auto;
            gap:12px;
            align-items:center;
            padding:11px 13px;
            border:1px solid #dbe4ee;
            border-radius:10px;
            background:#f8fafc;
        }

        .finance-booking-icon{
            display:grid;
            place-items:center;
            width:40px;
            height:40px;
            border-radius:10px;
            border:1px solid currentColor;
            color:#49657f;
            background:#fff;
            box-shadow:0 3px 8px rgba(15,35,60,.07);
        }

        .finance-booking-icon svg{
            width:21px;
            height:21px;
            display:block;
        }

        .finance-booking-icon.transfer{color:#2563eb;background:#eff6ff}
        .finance-booking-icon.salary{color:#b7791f;background:#fff8e6}
        .finance-booking-icon.signing-fee{color:#7c3aed;background:#f5f0ff}
        .finance-booking-icon.prize{color:#ca8a04;background:#fffbea}
        .finance-booking-icon.tv{color:#0f766e;background:#ecfdf5}
        .finance-booking-icon.credit{color:#166534;background:#f0fdf4}
        .finance-booking-icon.interest{color:#c2410c;background:#fff7ed}
        .finance-booking-icon.admin{color:#475569;background:#f1f5f9}
        .finance-booking-icon.reversal{color:#b91c1c;background:#fff1f2}

        .finance-booking time{
            color:#64748b;
            font-size:.7rem;
            white-space:nowrap;
        }

        .finance-booking-main{
            min-width:0;
        }

        .finance-booking-main strong{
            display:block;
            color:#17283d;
            font-size:.78rem;
        }

        .finance-booking-main small{
            display:block;
            margin-top:3px;
            color:#64748b;
            font-size:.68rem;
            line-height:1.35;
        }

        .finance-booking-amount{
            font-size:.8rem;
            font-weight:950;
            white-space:nowrap;
        }

        @media(max-width:700px){
            .finance-booking{
                grid-template-columns:44px 1fr auto;
            }

            .finance-booking time{
                grid-column:2 / -1;
            }

            .finance-booking-main{
                grid-column:2;
            }

            .finance-booking-amount{
                grid-column:3;
                grid-row:2;
            }
        }


.finance-history-trigger{
    cursor:pointer;
}
.finance-history-trigger:focus-visible{
    outline:3px solid rgba(59,130,246,.38);
    outline-offset:3px;
}
.sidebar-widget.finance-history-trigger:hover{
    filter:brightness(1.08);
}
.finance-history-modal[hidden]{
    display:none!important;
}
body.finance-history-open{
    overflow:hidden;
}
#financeHistoryBody{
    width:min(900px,96vw);
    max-height:90vh;
}
.finance-history-content{
    display:grid;
    gap:18px;
    padding:20px;
}
.finance-history-content h3{
    margin:0 0 9px;
    color:#1e3a5f;
}
.finance-history-list{
    display:grid;
    gap:7px;
}
.finance-history-empty,
.finance-history-loading,
.finance-history-error{
    margin:0;
    padding:38px 30px;
    text-align:center;
    color:#64748b;
    background:#fff;
    border-radius:18px;
}
.finance-history-error{
    color:#b91c1c;
}

.xp-history-trigger:focus-visible{outline:3px solid rgba(59,130,246,.38);outline-offset:3px}
.sidebar-widget.xp-history-trigger:hover{filter:brightness(1.08)}
.board-pressure-card.xp-history-trigger{transition:transform .18s ease,box-shadow .18s ease}
.board-pressure-card.xp-history-trigger:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(15,35,60,.14)}

.xp-history-modal{
    position:fixed;
    inset:0;
    z-index:7100;
    display:grid;
    place-items:center;
    padding:20px;
    background:rgba(7,20,36,.76);
    backdrop-filter:blur(5px);
}
.xp-history-modal[hidden]{display:none!important}
body.xp-history-open{overflow:hidden}

.xp-history-shell{
    width:min(900px,96vw);
    max-height:90vh;
    overflow:auto;
    border-radius:18px;
    background:#fff;
    box-shadow:0 22px 60px rgba(0,0,0,.35);
}
.xp-history-header{
    position:sticky;
    top:0;
    z-index:2;
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:20px;
    padding:19px 22px;
    background:linear-gradient(135deg,#132a45,#173f65);
    color:#fff;
    border-bottom:1px solid rgba(255,255,255,.14);
}
.xp-history-header-main{min-width:0;display:flex;flex-direction:column;gap:5px}
.xp-history-header-main h2{margin:0;color:#fff;font-size:1.25rem;font-weight:950;line-height:1.2}
.xp-history-header-main small{color:#d8e6f2;font-size:.72rem;line-height:1.4}
.xp-history-header-actions{display:flex;align-items:center;gap:10px;margin-left:auto}
.xp-history-clubmark{width:42px;height:42px;object-fit:contain}
.xp-history-close{
    min-width:92px;
    height:38px;
    padding:0 16px;
    border:0;
    border-radius:8px;
    background:#e60035;
    color:#fff;
    font-size:.72rem;
    font-weight:950;
    cursor:pointer;
}
.xp-history-close:hover{background:#c9002e}
.xp-history-body{display:grid;gap:18px;padding:20px}
.xp-history-loading,.xp-history-error,.xp-history-empty{
    padding:30px;
    margin:0;
    text-align:center;
    color:#64748b;
}
.xp-history-error{color:#b91c1c}

.xp-history-group h3{margin:0 0 9px;color:#1e3a5f}
.xp-history-list{display:grid;gap:7px}
.xp-history-booking{
    display:grid;
    grid-template-columns:52px 118px minmax(0,1fr) auto;
    gap:12px;
    align-items:center;
    padding:11px 13px;
    border:1px solid #dbe4ee;
    border-radius:10px;
    background:#f8fafc;
}
.xp-history-icon{
    display:grid;
    place-items:center;
    width:40px;
    height:40px;
    border:1px solid currentColor;
    border-radius:10px;
    background:#fff;
    color:#49657f;
    font-size:.72rem;
    font-weight:950;
    box-shadow:0 3px 8px rgba(15,35,60,.07);
}
.xp-history-icon.positive{color:#15803d;background:#f0fdf4}
.xp-history-icon.negative{color:#b91c1c;background:#fff1f2}
.xp-history-icon.pending{color:#a16207;background:#fffbeb}
.xp-history-booking time{color:#718096;font-size:.68rem}
.xp-history-main{min-width:0}
.xp-history-main strong{display:block;color:#17243a;font-size:.78rem}
.xp-history-main small{display:block;margin-top:3px;color:#718096;font-size:.66rem;line-height:1.45}
.xp-history-amount{white-space:nowrap;font-size:.85rem;font-weight:950}
.xp-history-amount.positive{color:#15803d}
.xp-history-amount.negative{color:#b91c1c}
.xp-history-amount.pending{color:#a16207}
.xp-history-pending{
    display:inline-block;
    margin-top:4px;
    padding:3px 6px;
    border-radius:999px;
    background:#fff3c4;
    color:#8a5a00;
    font-size:.58rem;
    font-weight:900;
}

@media(max-width:700px){
    .xp-history-booking{
        grid-template-columns:44px minmax(0,1fr) auto;
    }
    .xp-history-booking time{
        grid-column:2;
        grid-row:2;
    }
    .xp-history-main{
        grid-column:2 / 4;
    }
    .xp-history-amount{
        grid-column:3;
        grid-row:1;
    }
}

.xp-event-collector {
    position: absolute;
    right: -13px;
    top: -18px;
    min-width: 58px;
    height: 30px;
    padding: 0 11px;
    border: 1px solid rgba(134,239,172,.72);
    border-radius: 6px;
    background: linear-gradient(135deg, #166534 0%, #15803d 52%, #166534 100%);
    color: #ffffff;
    font: 900 .75rem/1 Arial, sans-serif;
    letter-spacing: .25px;
    white-space: nowrap;
    cursor: pointer;
    z-index: 8;
    box-shadow:
        0 5px 13px rgba(2,8,23,.30),
        0 0 10px rgba(34,197,94,.22),
        inset 0 1px 0 rgba(255,255,255,.15);
    animation: xpCollectorAttention 1.8s ease-in-out infinite;
}
.xp-event-collector.is-positive {
    background: linear-gradient(135deg, #166534 0%, #22c55e 52%, #166534 100%);
    border-color: rgba(134,239,172,.90);
    box-shadow:
        0 5px 13px rgba(2,8,23,.30),
        0 0 12px rgba(34,197,94,.30),
        inset 0 1px 0 rgba(255,255,255,.16);
}
.xp-event-collector.is-negative {
    background: linear-gradient(135deg, #7f1d1d, #991b1b);
    border-color: rgba(252,165,165,.72);
    color: #fff;
}
.xp-event-collector:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.xp-event-collector[data-waiting]:not([data-waiting=""])::after {
    content: attr(data-waiting);
    position: absolute;
    right: -10px;
    top: -10px;
    min-width: 20px;
    width: 20px;
    height: 20px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #e51b3e;
    color: #fff;
    font-size: .58rem;
    font-weight: 950;
    line-height: 1;
    box-shadow: 0 3px 8px rgba(0,0,0,.28);
}
@keyframes xpCollectorAttention {
    0%, 100% {
        transform: scale(1);
        filter: brightness(1);
    }
    50% {
        transform: scale(1.025);
        filter: brightness(1.12);
    }
}

/* Sidebar: Collector links neben der gesamten XP-Pill. */
.pill-xp > .xp-event-collector {
    right: calc(100% + 8px);
    top: 50%;
    margin-top: -15px;
}

.office-xp-value { position: relative; display: inline-flex; align-items: center; gap: 4px; }
.office-effective-xp-hero {
    position: relative;
    margin: 0 0 14px;
    padding: 15px 18px;
    overflow: visible;
    border: 2px solid #15803d;
    border-radius: 13px;
    background: linear-gradient(135deg, #f0fdf4, #dcfce7);
    text-align: center;
    box-shadow: 0 7px 20px rgba(21, 128, 61, .16);
}
.office-effective-xp-hero .office-xp-kicker { display:block; color:#334155; font-size:.76rem; font-weight:900; letter-spacing:.75px; text-transform:uppercase; }
.office-effective-xp-hero .office-xp-main { display:flex; align-items:baseline; justify-content:center; gap:7px; margin:3px 0; color:#15803d; font-size:2.25rem; font-weight:950; line-height:1.05; text-shadow:0 0 15px rgba(34,197,94,.24); }
.office-effective-xp-hero .office-xp-main small { font-size:.42em; }
.office-effective-xp-hero .office-xp-help { display:block; color:#475569; font-size:.72rem; font-weight:700; }
.office-effective-xp-hero.xp-status-warning { border-color:#d97706; background:linear-gradient(135deg,#fffbeb,#fef3c7); box-shadow:0 7px 20px rgba(217,119,6,.19); }
.office-effective-xp-hero.xp-status-warning .office-xp-main { color:#b45309; text-shadow:0 0 15px rgba(245,158,11,.25); }
.office-effective-xp-hero.xp-status-danger { border-color:#dc2626; background:linear-gradient(135deg,#fff1f2,#fee2e2); box-shadow:0 7px 20px rgba(220,38,38,.21); }
.office-effective-xp-hero.xp-status-danger .office-xp-main { color:#b91c1c; text-shadow:0 0 15px rgba(239,68,68,.25); }
.office-xp-breakdown { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin-bottom:12px; }
.office-xp-breakdown > div { padding:8px 9px; border:1px solid #dbe4ef; border-radius:8px; background:#f8fafc; text-align:center; }
.office-xp-breakdown > div > span { display:block; min-height:2.1em; color:#64748b; font-size:.67rem; font-weight:750; line-height:1.2; }
.office-xp-breakdown strong { display:block; margin-top:3px; color:#0f172a; font-size:.92rem; white-space:nowrap; }
.office-xp-breakdown strong > span { display:inline; min-height:0; color:inherit; font:inherit; line-height:inherit; }
@media (max-width:680px) { .office-xp-breakdown { grid-template-columns:1fr; }.office-xp-breakdown span { min-height:0; } }
.office-xp-value .xp-event-collector {
    position: relative;
    right: auto;
    top: auto;
    margin-left: 9px;
    vertical-align: middle;
}
.office-xp-main .xp-event-collector { position:relative; inset:auto; margin-left:9px; vertical-align:middle; }
.xp-global-fallback { position: fixed; right: 22px; top: 92px; z-index: 99990; }
.xp-global-fallback .xp-event-collector { position: relative; inset: auto; }
.xp-event-backdrop {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: grid;
    place-items: center;
    padding: 24px;
    background: rgba(4, 10, 22, .78);
    backdrop-filter: blur(5px);
}
.xp-event-backdrop[hidden] { display: none !important; }
.xp-event-dialog {
    width: min(480px, 100%);
    padding: 28px;
    border: 1px solid rgba(255,92,92,.55);
    border-radius: 18px;
    background: linear-gradient(145deg, #172235, #0c1422);
    color: #fff;
    text-align: center;
    box-shadow: 0 24px 70px rgba(0,0,0,.5);
}
.xp-event-dialog-icon {
    display: grid;
    place-items: center;
    width: 66px;
    height: 66px;
    margin: 0 auto 15px;
    border-radius: 50%;
    background: #ef4444;
    font-weight: 950;
    font-size: 1.2rem;
    box-shadow: 0 0 0 8px rgba(239,68,68,.14);
}
.xp-event-kicker { margin: 0 0 5px; color: #fca5a5; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.xp-event-dialog h2 { margin: 0; font-size: 2rem; color: #ff6b6b; }
.xp-event-reason { margin: 15px 0; color: #d7e0ee; line-height: 1.5; }
.xp-event-balance { padding-top: 14px; border-top: 1px solid rgba(255,255,255,.12); }
.xp-event-dialog button {
    margin-top: 10px;
    padding: 11px 20px;
    border: 0;
    border-radius: 8px;
    background: #ef4444;
    color: #fff;
    font-weight: 850;
    cursor: pointer;
}
.xp-value-pulse { animation: xpValuePulse .7s ease; }
@keyframes xpValuePulse {
    0% { transform: scale(1); }
    40% { transform: scale(1.24); filter: brightness(1.8); }
    100% { transform: scale(1); }
}