:root {
    --bg: #050607;
    --panel: #101216;
    --panel2: #161a20;
    --text: #f4f7fb;
    --muted: #7f8792;
    --muted2: #5f6873;
    --line: #242a33;

    --blue: #00a3e0;
    --blue2: #0077b6;
    --blueSoft: rgba(0, 163, 224, 0.16);

    --green: #26d07c;
    --greenBg: rgba(38, 208, 124, 0.15);

    --yellow: #f3c94c;
    --yellowBg: rgba(243, 201, 76, 0.16);

    --red: #ff4d5e;
    --redBg: rgba(255, 77, 94, 0.15);

    --neutral: #aab2bd;
    --neutralBg: rgba(170, 178, 189, 0.12);
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    background:
        radial-gradient(circle at top left, rgba(0,163,224,0.20), transparent 28%),
        linear-gradient(135deg, #000 0%, var(--bg) 52%, #07090c 100%);
    color: var(--text);
}

.topbar {
    background: rgba(0,0,0,0.94);
    border-bottom: 3px solid var(--blue);
    padding: 18px 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 20;
    box-shadow: 0 10px 34px rgba(0,0,0,0.55);
}

.brand {
    display: flex;
    align-items: center;
    gap: 18px;
}

.brand img {
    height: 56px;
    max-width: 190px;
    object-fit: contain;
    border-radius: 10px;
}

.logo-fallback {
    font-size: 24px;
    font-weight: 900;
    background: var(--blue);
    color: #000;
    border-radius: 20px;
    padding: 12px 18px;
}

.title {
    font-size: 28px;
    font-weight: 900;
    letter-spacing: -0.6px;
}

.subtitle {
    color: var(--muted);
    font-size: 12px;
    margin-top: 3px;
}

.container {
    max-width: 1640px;
    margin: 0 auto;
    padding: 26px 24px 48px;
}

.cards {
    display: grid;
    grid-template-columns: repeat(4, minmax(180px, 1fr));
    gap: 16px;
    margin-bottom: 20px;
}

.card {
    background: linear-gradient(180deg, var(--panel) 0%, var(--panel2) 100%);
    border: 1px solid var(--line);
    border-radius: 22px;
    padding: 18px;
    box-shadow: 0 10px 28px rgba(0,0,0,0.38);
}

.card.highlight {
    border-color: var(--blue);
    background: linear-gradient(135deg, rgba(0,163,224,0.22), rgba(0,0,0,0.78));
}

.card .label {
    font-size: 12px;
    color: var(--muted);
    margin-bottom: 7px;
}

.card .value {
    font-size: 30px;
    font-weight: 900;
}
.card .value.slot-value {
    font-size: 20px;
    font-weight: 850;
    letter-spacing: -0.2px;
}
/* --- NEU: Grid-Layout für die Slot-Anzeige --- */
.slot-grid {
    display: grid;
    grid-template-columns: auto 1fr; /* Zwei Spalten: Label links, Wert rechts */
    row-gap: 6px;
    column-gap: 12px;
    font-size: 15px; /* Etwas kleiner wie gewünscht */
    font-weight: 800;
    margin-top: 4px;
}

.slot-grid .s-label {
    color: rgba(255, 255, 255, 0.75); /* Leicht dezent abgedunkelt */
}

.slot-grid .s-val {
    /* Monospace erzwingt gleiche Zeichenbreite -> Zahlen stehen auf den Pixel genau untereinander */
    font-family: 'Consolas', 'Courier New', monospace;
    color: #ffffff;
    letter-spacing: -0.5px; /* Zieht die Zahlen wieder minimal enger zusammen */
}
.toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
    margin: 18px 0 22px;
}

input[type="search"] {
    width: 460px;
    max-width: 100%;
    background: #080a0d;
    color: var(--text);
    border: 1px solid #303844;
    border-radius: 999px;
    padding: 12px 17px;
    font-size: 15px;
    outline: none;
}

input[type="search"]:focus {
    border-color: var(--blue);
    box-shadow: 0 0 0 4px var(--blueSoft);
}

.hint {
    color: var(--muted);
    font-size: 12px;
}

table {
    width: 100%;
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 0 11px;
}

col.col-zuordnung {
    width: 52%;
}

col.col-offered {
    width: 13%;
}

col.col-forecast-value {
    width: 13%;
}

col.col-quote {
    width: 22%;
}

thead th {
    color: var(--muted);
    font-size: 11px;
    text-transform: uppercase;
    text-align: left;
    letter-spacing: 0.6px;
    padding: 0 14px;
}

tbody tr.row-section td {
    border: none;
    background: transparent;
    padding: 28px 4px 6px;
}

.section-title {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 30px;
    font-weight: 950;
    letter-spacing: -0.6px;
}

.section-title::before {
    content: "";
    width: 7px;
    height: 34px;
    border-radius: 999px;
    background: var(--blue);
    box-shadow: 0 0 18px rgba(0,163,224,0.55);
}

tbody tr.row-detail {
    background: linear-gradient(180deg, var(--panel) 0%, #0d1014 100%);
    box-shadow: 0 8px 22px rgba(0,0,0,0.35);
}

tbody tr.row-summary {
    background:
        linear-gradient(90deg, rgba(0,163,224,0.28) 0%, rgba(0,119,182,0.18) 100%),
        #081018;
    box-shadow: 0 13px 30px rgba(0,163,224,0.16);
    outline: 1px solid rgba(0,163,224,0.50);
}

tbody td {
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    padding: 15px 14px;
    vertical-align: middle;
    overflow: hidden;
}

tbody td:first-child {
    border-left: 1px solid var(--line);
    border-top-left-radius: 18px;
    border-bottom-left-radius: 18px;
    padding-left: 10px;
    padding-right: 6px;
}
tbody td:last-child {
    border-right: 1px solid var(--line);
    border-top-right-radius: 18px;
    border-bottom-right-radius: 18px;
    text-align: right;
    padding-right: 36px;
    overflow: visible;
}

.tiny-info {
    margin-top: 6px;
    color: #46515e;
    font-size: 8px;
    line-height: 1.25;
    max-width: 760px;
    max-height: 28px;
    overflow: hidden;
    word-break: break-word;
}

.row-summary .tiny-info {
    color: #607080;
    font-size: 8px;
    max-height: 32px;
}

.zuordnung {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.line-label {
    font-size: 25px;
    font-weight: 950;
    letter-spacing: -0.4px;
    color: #ffffff;
    line-height: 1.05;
}

.row-summary .line-label {
    font-size: 38px;
    line-height: 1.05;
}

.dienstleister-label {
    display: inline-block;
    width: fit-content;
    font-size: 19px;
    font-weight: 900;
    color: var(--blue);
    background: var(--blueSoft);
    border: 1px solid rgba(0,163,224,0.28);
    border-radius: 999px;
    padding: 5px 12px;
    line-height: 1.05;
}

.row-summary .dienstleister-label {
    font-size: 24px;
    color: #ffffff;
    background: rgba(0,163,224,0.34);
    border-color: rgba(0,163,224,0.55);
    padding: 7px 14px;
}
.overflow-metric {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: fit-content;
    margin-top: 8px;
    border-radius: 18px;
    padding: 8px 13px;
    border: 1px solid transparent;
    font-weight: 950;
    white-space: nowrap;
}

.overflow-label {
    font-size: 8px;
    text-transform: uppercase;
    letter-spacing: 0.7px;
    opacity: 0.85;
}

.overflow-value {
    font-size: 30px;
    letter-spacing: -0.7px;
}

.row-summary .overflow-metric {
    margin-top: 9px;
    padding: 9px 15px;
}

.row-summary .overflow-value {
    font-size: 60px;
}

.overflow-metric.good {
    color: var(--green);
    background: var(--greenBg);
    border-color: rgba(38,208,124,0.50);
}

.overflow-metric.warn {
    color: var(--yellow);
    background: var(--yellowBg);
    border-color: rgba(243,201,76,0.50);
}

.overflow-metric.bad {
    color: var(--red);
    background: var(--redBg);
    border-color: rgba(255,77,94,0.50);
}

.overflow-metric.neutral {
    color: var(--neutral);
    background: var(--neutralBg);
    border-color: rgba(170,178,189,0.28);
}
.number {
    font-size: 24px;
    font-weight: 900;
    white-space: nowrap;
}

.row-summary .number {
    font-size: 30px;
}

.percent {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 132px;
    border-radius: 20px;
    padding: 12px 16px;
    font-size: 32px;
    font-weight: 950;
    letter-spacing: -1px;
    border: 1px solid transparent;
    white-space: nowrap;
}

.row-summary .percent {
    font-size: 40px;
    min-width: 145px;
    max-width: 100%;
    padding: 12px 14px;
}

.percent.good {
    color: var(--green);
    background: var(--greenBg);
    border-color: rgba(38,208,124,0.50);
}

.percent.warn {
    color: var(--yellow);
    background: var(--yellowBg);
    border-color: rgba(243,201,76,0.50);
}

.percent.bad {
    color: var(--red);
    background: var(--redBg);
    border-color: rgba(255,77,94,0.50);
}

.percent.neutral {
    color: var(--neutral);
    background: var(--neutralBg);
    border-color: rgba(170,178,189,0.28);
}

.summary-marker {
    display: none;
}

.quality {
    margin-top: 34px;
    color: var(--muted2);
    font-size: 9px;
    line-height: 1.35;
}

.quality h2 {
    color: var(--muted);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin: 16px 0 6px;
}

.quality-box {
    background: rgba(255,255,255,0.025);
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 14px;
    padding: 10px 12px;
}

.error {
    background: rgba(255,77,94,0.15);
    color: #ffb8c0;
    border: 1px solid rgba(255,77,94,0.35);
    border-radius: 18px;
    padding: 18px;
    font-weight: 800;
}

@media (max-width: 1100px) {
    .cards {
        grid-template-columns: repeat(2, minmax(180px, 1fr));
    }

    .toolbar {
        flex-direction: column;
        align-items: flex-start;
    }
    
    col.col-zuordnung {
        width: 46%;
    }

    col.col-offered {
        width: 14%;
    }

    col.col-forecast-value {
        width: 14%;
    }

    col.col-quote {
        width: 26%;
    }

    .percent {
        font-size: 24px;
        min-width: 105px;
    }

    .row-summary .percent {
        font-size: 34px;
        min-width: 140px;
    }

    .line-label {
        font-size: 20px;
    }

    .row-summary .line-label {
        font-size: 28px;
    }
}

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

    .topbar {
        flex-direction: column;
        align-items: flex-start;
    }

    table {
        font-size: 12px;
    }

    .line-label {
        font-size: 17px;
    }

    .row-summary .line-label {
        font-size: 22px;
    }

    .dienstleister-label {
        font-size: 13px;
    }

    .row-summary .dienstleister-label {
        font-size: 15px;
    }

    .number {
        font-size: 18px;
    }

    .row-summary .number {
        font-size: 22px;
    }
}

/* ==========================================================
   Tagesgrafik Intervallerfüllung
   ========================================================== */
.day-chart-section.hidden,
.matrix-section.hidden { display: none; }
.day-chart-panel {
    display: none;
    border: 1px solid rgba(0,163,224,.34);
    border-radius: 28px;
    padding: 18px;
    background: radial-gradient(circle at 18% 0%, rgba(0,163,224,.22), transparent 34%), linear-gradient(180deg, rgba(16,18,22,.98), rgba(6,8,10,.98));
    box-shadow: 0 22px 60px rgba(0,0,0,.48), inset 0 1px 0 rgba(255,255,255,.045);
}
.day-chart-panel.active { display:block; }
.day-chart-title { font-size: 26px; font-weight: 950; letter-spacing: -.7px; }
.day-chart-subtitle { color: var(--muted); font-size: 12px; margin-top: 4px; }
.day-chart-kpis { display:grid; grid-template-columns: repeat(5, minmax(120px,1fr)); gap:10px; margin:16px 0; }
.day-kpi { background: linear-gradient(180deg, rgba(255,255,255,.065), rgba(255,255,255,.025)); border:1px solid rgba(255,255,255,.09); border-radius:18px; padding:12px 14px; }
.day-kpi span { display:block; color:rgba(255,255,255,.62); font-size:11px; text-transform:uppercase; font-weight:950; letter-spacing:.5px; margin-bottom:7px; }
.day-kpi strong { display:block; color:#fff; font-size:28px; font-weight:950; letter-spacing:-.7px; }
.day-chart-canvas-wrap { height:min(62vh,680px); min-height:430px; border:1px solid rgba(255,255,255,.075); border-radius:22px; background:linear-gradient(180deg, rgba(0,0,0,.40), rgba(0,0,0,.18)); overflow:hidden; }
#day-chart-canvas { width:100%; height:100%; display:block; }
.day-chart-legend { display:flex; flex-wrap:wrap; gap:14px; margin-top:14px; color:var(--muted); font-size:11px; font-weight:800; }
.day-chart-legend span { display:inline-flex; align-items:center; gap:7px; }
.day-chart-legend i { width:22px; height:8px; border-radius:999px; display:inline-block; }
.legend-forecast { background:rgba(0,163,224,.42); }
.legend-offered-dl { background:#168dff; }
.legend-offered-overflow { background:#14d4ef; }
.legend-handled-dl { background:#b9f02f; }
.legend-handled-overflow { background:#f5c84b; }
.filter-chip.active { color:#fff; border-color:var(--blue); background:linear-gradient(135deg, rgba(0,163,224,.18), rgba(0,0,0,.85)); box-shadow:0 0 18px rgba(0,163,224,.35); }
@media (max-width:1100px){ .day-chart-kpis{ grid-template-columns:repeat(2,minmax(120px,1fr)); } }

/* ==========================================================
   MOBILE RESPONSIVE FIX 2026-06-13
   Ziel: PC-Layout unverändert lassen, Mobile <= 820px sauber nutzbar machen.
   Betroffen: Forecast-Monitor + Intervallerfüllung + Tagesgrafik.
   ========================================================== */
@media (max-width: 820px) {
    html {
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
        overflow-x: hidden;
    }

    body {
        overflow-x: hidden;
        min-width: 0 !important;
        background:
            radial-gradient(circle at 18% 0%, rgba(0,163,224,0.18), transparent 30%),
            linear-gradient(135deg, #000 0%, var(--bg) 55%, #07090c 100%) !important;
    }

    /* Header auf Mobile nicht als riesiges Sticky-Overlay über dem Content liegen lassen */
    .topbar {
        position: static !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        gap: 14px !important;
        width: 100% !important;
        padding: 16px 14px 18px !important;
        border-bottom-width: 2px !important;
        box-shadow: 0 12px 34px rgba(0,0,0,0.48) !important;
    }

    .brand {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 auto !important;
        margin-right: 0 !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 12px !important;
        text-align: left !important;
    }

    .brand a {
        flex: 0 0 auto !important;
        display: inline-flex !important;
        align-items: center !important;
    }

    .brand img {
        height: clamp(58px, 16vw, 82px) !important;
        max-width: 34vw !important;
        object-fit: contain !important;
        border-radius: 12px !important;
    }

    .logo-fallback {
        font-size: 18px !important;
        padding: 10px 14px !important;
    }

    .brand > div:last-child {
        min-width: 0 !important;
        max-width: 64vw !important;
        flex: 0 1 auto !important;
    }

    .title {
        font-size: clamp(32px, 9vw, 48px) !important;
        line-height: 0.98 !important;
        letter-spacing: -1.1px !important;
        overflow-wrap: anywhere !important;
    }

    .subtitle {
        font-size: clamp(13px, 3.4vw, 17px) !important;
        line-height: 1.25 !important;
        margin-top: 7px !important;
        color: var(--muted) !important;
    }

    /* Forecast-Monitor Filterbereich + Intervallerfüllung Filterbereich */
    .filter-area,
    .bm-filter-area {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        flex: 0 0 auto !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
    }

    .filter-group,
    .bm-filter-group {
        width: 100% !important;
        max-width: 100% !important;
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
    }

    .filter-group > span:first-child,
    .bm-filter-label,
    .filter-label {
        flex: 0 0 100% !important;
        width: 100% !important;
        min-width: 0 !important;
        text-align: center !important;
        font-size: 12px !important;
        line-height: 1.1 !important;
        letter-spacing: 0.7px !important;
        margin: 0 0 1px !important;
        color: var(--muted) !important;
    }

    .filter-chip {
        appearance: none !important;
        flex: 0 1 auto !important;
        min-width: 0 !important;
        max-width: 100% !important;
        min-height: 40px !important;
        padding: 10px 14px !important;
        border-radius: 999px !important;
        font-size: clamp(13px, 3.3vw, 16px) !important;
        font-weight: 900 !important;
        line-height: 1.08 !important;
        white-space: normal !important;
        text-align: center !important;
        background: #171c24 !important;
        color: #9aa3af !important;
        border: 1px solid #2c3440 !important;
        box-shadow: 0 5px 13px rgba(0,0,0,0.22) !important;
    }

    .filter-chip[data-value="Mobilfunk + Sales"] {
        min-width: min(190px, 78vw) !important;
    }

    .filter-chip.active {
        color: #ffffff !important;
        border-color: var(--blue) !important;
        background: linear-gradient(135deg, rgba(0,163,224,0.22), rgba(0,0,0,0.82)) !important;
        box-shadow: 0 0 18px rgba(0,163,224,0.36) !important;
    }

    .filter-chip:hover {
        color: #ffffff !important;
        border-color: var(--blue) !important;
    }

    /* Meta/Cache im Forecast-Monitor aus der rechten Ecke holen */
    .topbar > div[style*="text-align: right"] {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 auto !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        white-space: normal !important;
        gap: 3px !important;
        color: var(--muted) !important;
    }

    /* Intervallerfüllung: rechte Headerseite sauber untereinander statt seitlich zerfallen */
    .bm-topbar-right {
        width: 100% !important;
        margin-left: 0 !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        justify-items: center !important;
        align-items: center !important;
        gap: 12px !important;
    }

    .bm-meta {
        width: 100% !important;
        min-width: 0 !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
    }

    .timeframe-toggle {
        border-radius: 18px !important;
        padding: 4px !important;
        box-shadow: 0 8px 20px rgba(0,0,0,0.30) !important;
    }

    .timeframe-toggle button {
        min-width: 104px !important;
        height: 46px !important;
        padding: 10px 16px !important;
        font-size: 15px !important;
        font-weight: 950 !important;
        border-radius: 14px !important;
    }

    .bm-last-import,
    .bm-rule-text,
    .topbar div[style*="Letzter Import"] {
        text-align: center !important;
        white-space: normal !important;
        font-size: 12px !important;
        line-height: 1.3 !important;
    }

    .container {
        width: 100% !important;
        max-width: none !important;
        padding: 16px 12px 38px !important;
        margin: 0 !important;
        overflow-x: hidden !important;
    }

    /* KPI-Karten bleiben modern, aber mobil kompakt */
    .cards {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px !important;
        margin-bottom: 16px !important;
    }

    .card {
        min-width: 0 !important;
        overflow: hidden !important;
        border-radius: 18px !important;
        padding: 14px !important;
    }

    .card .label {
        font-size: 11px !important;
        line-height: 1.2 !important;
    }

    .card .value {
        font-size: clamp(26px, 7.2vw, 38px) !important;
        line-height: 1 !important;
        letter-spacing: -0.7px !important;
    }

    .toolbar {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
        margin: 14px 0 18px !important;
    }

    input[type="search"] {
        width: 100% !important;
        font-size: 16px !important;
        padding: 13px 16px !important;
    }

    /* Forecast-Monitor Tabelle: nicht mehr kaputtquetschen, sondern horizontal scrollen */
    .container > table:not(.matrix-table) {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        border-spacing: 0 10px !important;
    }

    .container > table:not(.matrix-table) thead,
    .container > table:not(.matrix-table) tbody {
        display: table !important;
        width: 920px !important;
        min-width: 920px !important;
    }

    .container > table:not(.matrix-table) td,
    .container > table:not(.matrix-table) th {
        white-space: normal !important;
    }

    .line-label {
        font-size: clamp(23px, 7vw, 34px) !important;
        line-height: 1.05 !important;
    }

    .row-summary .line-label {
        font-size: clamp(30px, 9vw, 44px) !important;
    }

    .dienstleister-label {
        font-size: clamp(15px, 4.2vw, 22px) !important;
    }

    .number {
        font-size: clamp(21px, 6vw, 30px) !important;
    }

    .percent {
        min-width: 104px !important;
        padding: 10px 12px !important;
        font-size: clamp(25px, 7vw, 36px) !important;
    }

    .overflow-value,
    .row-summary .overflow-value {
        font-size: clamp(38px, 14vw, 64px) !important;
    }

    .tiny-info {
        max-width: 520px !important;
    }

    /* Intervallerfüllung Matrix: 7 Tage bleiben lesbar durch horizontales Scrollen */
    .matrix-section,
    #matrix-section {
        width: 100% !important;
        overflow-x: auto !important;
        overflow-y: visible !important;
        -webkit-overflow-scrolling: touch !important;
        padding-bottom: 8px !important;
        border-top: 2px solid rgba(0,163,224,0.70) !important;
        margin-top: 10px !important;
    }

    .matrix-table {
        width: 1040px !important;
        min-width: 1040px !important;
        max-width: none !important;
        table-layout: fixed !important;
        border-spacing: 4px !important;
    }

    .matrix-table th,
    .matrix-table td {
        height: 50px !important;
        font-size: 11px !important;
        overflow: hidden !important;
    }

    .matrix-table th:first-child,
    .matrix-table td:first-child {
        width: 92px !important;
        min-width: 92px !important;
        max-width: 92px !important;
        position: sticky !important;
        left: 0 !important;
        z-index: 3 !important;
        background: linear-gradient(180deg, #11161d 0%, #0b0f14 100%) !important;
        box-shadow: 8px 0 16px rgba(0,0,0,0.36) !important;
    }

    .matrix-table th:first-child {
        z-index: 4 !important;
    }

    .interval-label {
        text-align: center !important;
        padding-right: 0 !important;
        font-size: 12px !important;
        color: #aeb8c6 !important;
    }

    .cell-stats,
    .matrix-cell {
        font-size: 11px !important;
        line-height: 1.05 !important;
    }

    /* Tagesgrafik: auf Mobile bewusst hoch und KPI-grid kompakt */
    .day-chart-panel {
        border-radius: 22px !important;
        padding: 14px !important;
        margin-top: 4px !important;
    }

    .day-chart-title {
        font-size: clamp(25px, 7.2vw, 34px) !important;
        line-height: 1 !important;
    }

    .day-chart-subtitle {
        font-size: 12px !important;
        line-height: 1.3 !important;
    }

    .day-chart-kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
        margin: 14px 0 !important;
    }

    .day-kpi {
        border-radius: 16px !important;
        padding: 11px 12px !important;
    }

    .day-kpi span,
    .day-kpi .label {
        font-size: 10px !important;
        letter-spacing: 0.4px !important;
    }

    .day-kpi strong,
    .day-kpi .value {
        font-size: clamp(25px, 7vw, 36px) !important;
        line-height: 1 !important;
    }

    .day-chart-canvas-wrap {
        min-height: 360px !important;
        height: 52vh !important;
        border-radius: 18px !important;
    }

    .day-chart-legend {
        gap: 10px 12px !important;
        font-size: 11px !important;
        line-height: 1.2 !important;
    }

    .quality {
        font-size: 10px !important;
    }
}

@media (max-width: 480px) {
    .topbar {
        padding: 14px 10px 16px !important;
        gap: 12px !important;
    }

    .brand {
        gap: 10px !important;
    }

    .brand img {
        height: clamp(54px, 15vw, 70px) !important;
        max-width: 32vw !important;
    }

    .title {
        font-size: clamp(30px, 8.6vw, 42px) !important;
    }

    .subtitle {
        font-size: clamp(12px, 3.25vw, 15px) !important;
    }

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

    .filter-chip {
        padding: 10px 13px !important;
        font-size: clamp(12px, 3.55vw, 15px) !important;
    }

    .container {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    .container > table:not(.matrix-table) thead,
    .container > table:not(.matrix-table) tbody {
        width: 860px !important;
        min-width: 860px !important;
    }

    .matrix-table {
        width: 980px !important;
        min-width: 980px !important;
    }

    .day-chart-kpis {
        grid-template-columns: 1fr 1fr !important;
    }
}

/* ==========================================================
   HOTFIX 2026-06-13: Sticky Wochenkopf + kompakte Forecast-KPIs
   ========================================================== */

/* 1) Intervallerfüllung/Woche: Matrix bekommt eigenen Scrollbereich.
   Dadurch bleibt die Tabellen-Kopfzeile im sichtbaren Bereich stehen. */
body:has(#matrix-section:not(.hidden)) {
    overflow: hidden;
}

#matrix-section:not(.hidden),
.matrix-section:not(.hidden) {
    height: calc(100vh - 235px) !important;
    max-height: calc(100vh - 235px) !important;
    overflow: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding-bottom: 18px;
    border-top: 1px solid rgba(0,163,224,0.40);
}

#matrix-table,
.matrix-table {
    border-collapse: separate !important;
    border-spacing: 4px !important;
}

#matrix-table thead,
.matrix-table thead {
    position: sticky !important;
    top: 0 !important;
    z-index: 90 !important;
}

#matrix-table thead th,
.matrix-table thead th {
    position: sticky !important;
    top: 0 !important;
    z-index: 95 !important;
    height: 34px !important;
    min-height: 34px !important;
    padding: 4px 6px !important;
    font-size: 10px !important;
    line-height: 0.98 !important;
    letter-spacing: 0.35px !important;
    background: linear-gradient(180deg, #111821 0%, #070b10 100%) !important;
    border: 1px solid rgba(0,163,224,0.38) !important;
    border-bottom-color: rgba(0,163,224,0.72) !important;
    box-shadow: 0 8px 18px rgba(0,0,0,0.55) !important;
    backdrop-filter: blur(10px);
}

#matrix-table thead th:first-child,
.matrix-table thead th:first-child {
    z-index: 100 !important;
    width: 82px !important;
}

#matrix-table th:first-child,
#matrix-table td:first-child,
.matrix-table th:first-child,
.matrix-table td:first-child {
    width: 82px !important;
}

/* 2) Forecast-Monitor: erste KPI-Reihe in eine einzige, kompakte Desktop-Zeile bringen. */
.top-kpi-grid {
    grid-template-columns: minmax(190px, 0.95fr) repeat(6, minmax(128px, 1fr)) !important;
    gap: 12px !important;
    align-items: stretch !important;
    margin-bottom: 18px !important;
}

.top-kpi-grid .card,
.top-kpi-grid .kpi-card {
    min-height: 92px !important;
    height: 92px !important;
    padding: 14px 16px !important;
    border-radius: 20px !important;
    justify-content: center !important;
    gap: 6px !important;
}

.top-kpi-grid .label,
.top-kpi-grid .kpi-card .label {
    font-size: 11px !important;
    line-height: 1.05 !important;
    margin-bottom: 4px !important;
    letter-spacing: 0.35px !important;
    white-space: nowrap !important;
}

.top-kpi-grid .value,
.top-kpi-grid .kpi-card .value {
    font-size: clamp(25px, 2.25vw, 34px) !important;
    line-height: 0.98 !important;
    letter-spacing: -0.7px !important;
    white-space: nowrap !important;
}

/* Erste Kachel: untereinander — Label, Forecast-Zeile, VIER-Zeile */
.top-kpi-grid .kpi-card-time {
    align-items: flex-start !important;
    text-align: left !important;
}

.top-kpi-grid .kpi-card-time .kpi-time-grid {
    display: grid !important;
    grid-template-columns: auto auto !important;
    grid-auto-rows: min-content !important;
    gap: 3px 8px !important;
    align-items: baseline !important;
    justify-content: start !important;
    font-size: clamp(9px, 1.25vw, 7px) !important;
    line-height: 1.05 !important;
    width: 100% !important;
}

.top-kpi-grid .kpi-card-time .kpi-time-grid span,
.top-kpi-grid .kpi-card-time .kpi-time-grid strong {
    display: inline-block !important;
    white-space: nowrap !important;
    font-weight: 950 !important;
}

.top-kpi-grid .kpi-card-time .kpi-time-grid span {
    color: #ffffff !important;
}

.top-kpi-grid .kpi-card-time .kpi-time-grid strong {
    color: #ffffff !important;
}

/* Falls die erste Kachel noch alte Inline-Struktur mit <br> nutzt, bleibt sie ebenfalls kompakt. */
.top-kpi-grid .kpi-card-time br {
    display: block !important;
}

@media (max-width: 1500px) {
    .top-kpi-grid {
        grid-template-columns: repeat(4, minmax(150px, 1fr)) !important;
    }
    .top-kpi-grid .card,
    .top-kpi-grid .kpi-card {
        height: auto !important;
        min-height: 98px !important;
    }
}

@media (max-width: 820px) {
    body:has(#matrix-section:not(.hidden)) {
        overflow: auto;
    }

    #matrix-section:not(.hidden),
    .matrix-section:not(.hidden) {
        height: calc(100vh - 330px) !important;
        max-height: calc(100vh - 330px) !important;
    }

    #matrix-table thead th,
    .matrix-table thead th {
        height: 36px !important;
        min-height: 36px !important;
        font-size: 9px !important;
    }

    .top-kpi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .top-kpi-grid .kpi-card-time {
        grid-column: 1 / -1 !important;
    }
}
/* ==========================================================
   HOTFIX 2026-06-13: Forecast-Monitor KPI-Zeile ERZWINGEN
   Zweck: Erste KPI-Reihe passt auch bei schmalerer Desktop-Breite in genau eine Zeile.
   Diese Datei ans ENDE von public/css/style.css anhängen oder nach style.css laden.
   ========================================================== */

/* Container darf für die KPI-Zeile die komplette Breite nutzen */
.container:has(.top-kpi-grid) {
    max-width: none !important;
    width: 100% !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
}

/* 7 Spalten knallhart erzwingen: 1 Zeit-Kachel + 6 KPI-Kacheln */
.cards.top-kpi-grid,
div.cards.top-kpi-grid,
#top-kpi-grid {
    display: grid !important;
    grid-template-columns: 170px repeat(6, minmax(96px, 1fr)) !important;
    gap: 8px !important;
    align-items: stretch !important;
    width: 100% !important;
    max-width: none !important;
    margin: 12px 0 14px !important;
}

/* Alle KPI-Karten deutlich schmaler/kompakter */
.cards.top-kpi-grid > .card,
.cards.top-kpi-grid > .kpi-card,
#top-kpi-grid > .card,
#top-kpi-grid > .kpi-card {
    min-width: 0 !important;
    width: auto !important;
    min-height: 76px !important;
    height: 76px !important;
    padding: 9px 10px !important;
    border-radius: 16px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    gap: 3px !important;
    overflow: hidden !important;
}

.cards.top-kpi-grid .label,
#top-kpi-grid .label {
    font-size: 10px !important;
    line-height: 1.05 !important;
    margin: 0 0 2px !important;
    letter-spacing: 0.2px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.cards.top-kpi-grid .value,
#top-kpi-grid .value {
    font-size: clamp(22px, 1.9vw, 30px) !important;
    line-height: 0.95 !important;
    letter-spacing: -0.7px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: clip !important;
}

/* Erste Kachel: kompakt untereinander */
.cards.top-kpi-grid .kpi-card-time,
#top-kpi-grid .kpi-card-time {
    min-width: 0 !important;
    align-items: flex-start !important;
    text-align: left !important;
    padding-left: 12px !important;
    padding-right: 8px !important;
}

.cards.top-kpi-grid .kpi-card-time .label,
#top-kpi-grid .kpi-card-time .label {
    font-size: 10px !important;
    margin-bottom: 4px !important;
}

.cards.top-kpi-grid .kpi-card-time .kpi-time-grid,
#top-kpi-grid .kpi-card-time .kpi-time-grid {
    display: grid !important;
    grid-template-columns: auto 1fr !important;
    grid-template-rows: auto auto !important;
    gap: 2px 6px !important;
    align-items: baseline !important;
    width: 100% !important;
    font-size: clamp(9px, 1.25vw, 7px) !important;
    line-height: 1.05 !important;
}

.cards.top-kpi-grid .kpi-card-time .kpi-time-grid span,
.cards.top-kpi-grid .kpi-card-time .kpi-time-grid strong,
#top-kpi-grid .kpi-card-time .kpi-time-grid span,
#top-kpi-grid .kpi-card-time .kpi-time-grid strong {
    white-space: nowrap !important;
    font-weight: 950 !important;
    color: #fff !important;
    min-width: 0 !important;
}

.cards.top-kpi-grid .kpi-card-time .kpi-time-grid strong,
#top-kpi-grid .kpi-card-time .kpi-time-grid strong {
    overflow: hidden !important;
    text-overflow: clip !important;
}

/* Alte Hotfix-Regel überschreiben: auch unter 1500px weiterhin 7 Spalten, nicht 4 */
@media (max-width: 1500px) {
    .cards.top-kpi-grid,
    div.cards.top-kpi-grid,
    #top-kpi-grid {
        grid-template-columns: 155px repeat(6, minmax(82px, 1fr)) !important;
        gap: 7px !important;
    }

    .cards.top-kpi-grid > .card,
    .cards.top-kpi-grid > .kpi-card,
    #top-kpi-grid > .card,
    #top-kpi-grid > .kpi-card {
        height: 72px !important;
        min-height: 72px !important;
        padding: 8px 9px !important;
    }

    .cards.top-kpi-grid .value,
    #top-kpi-grid .value {
        font-size: clamp(20px, 1.75vw, 27px) !important;
    }
}

/* Erst auf wirklich kleinen Breiten umbrechen */
@media (max-width: 980px) {
    .cards.top-kpi-grid,
    div.cards.top-kpi-grid,
    #top-kpi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }

    .cards.top-kpi-grid .kpi-card-time,
    #top-kpi-grid .kpi-card-time {
        grid-column: 1 / -1 !important;
    }
}


/* Forecast-Monitor: Offered/Forecast-Labels in Ergebniszeilen wie KPI-Kopfzeile */
tr .label,
tr .metric-mini-label,
td .label {
    color: var(--muted) !important;
    font-size: 11px !important;
    font-weight: 400 !important;
    line-height: 1.05 !important;
    letter-spacing: 0.2px !important;
    margin-bottom: 6px !important;
    text-transform: none !important;
}

/* ==========================================================
   MOBILE RESCUE FINAL 2026-06-13
   Ziel: Desktop bleibt unverändert, Mobile <= 820px wird wieder sauber nutzbar.
   Fixes:
   - Forecast-Monitor: keine Tabellen-Überläufe mehr, Ergebniszeilen werden Karten.
   - Intervallerfüllung: Header/Filter stehen nicht mehr über der Matrix, Matrix scrollt horizontal.
   - Desktop-Hotfixes für 7 KPI-Spalten werden auf Mobile neutralisiert.
   ========================================================== */
@media (max-width: 820px) {
    html,
    body {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        overflow-x: hidden !important;
        -webkit-text-size-adjust: 100% !important;
        text-size-adjust: 100% !important;
    }

    body {
        background:
            radial-gradient(circle at 18% 0%, rgba(0,163,224,0.18), transparent 30%),
            linear-gradient(135deg, #000 0%, var(--bg) 58%, #07090c 100%) !important;
    }

    body:has(#matrix-section:not(.hidden)) {
        overflow: auto !important;
    }

    /* Gemeinsamer Mobile-Header: nicht sticky/overlay, sondern normaler Dokumentfluss */
    .topbar {
        position: relative !important;
        top: auto !important;
        z-index: 10 !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        gap: 14px !important;
        padding: 14px 12px 18px !important;
        overflow: visible !important;
        background: rgba(0,0,0,0.96) !important;
        border-bottom: 3px solid var(--blue) !important;
        box-shadow: 0 12px 30px rgba(0,0,0,0.62) !important;
    }

    .brand {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 12px !important;
        margin: 0 !important;
        text-align: left !important;
    }

    .brand img {
        height: clamp(52px, 14vw, 72px) !important;
        max-width: 34vw !important;
        object-fit: contain !important;
        border-radius: 12px !important;
        flex: 0 0 auto !important;
    }

    .brand > div:last-child {
        min-width: 0 !important;
        max-width: 62vw !important;
        flex: 0 1 auto !important;
    }

    .title {
        font-size: clamp(30px, 8vw, 44px) !important;
        line-height: 0.98 !important;
        letter-spacing: -1px !important;
        overflow-wrap: anywhere !important;
    }

    .subtitle {
        font-size: clamp(12px, 3.3vw, 16px) !important;
        line-height: 1.25 !important;
        margin-top: 6px !important;
        color: var(--muted) !important;
    }

    /* Forecast-Monitor + Intervallerfüllung Filterbereiche */
    .filter-area,
    .bm-filter-area {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        gap: 10px !important;
        margin: 0 !important;
    }

    .filter-group,
    .bm-filter-group {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        margin: 0 !important;
    }

    .filter-label,
    .bm-filter-label,
    .filter-group > span:first-child {
        flex: 0 0 100% !important;
        width: 100% !important;
        text-align: center !important;
        font-size: 12px !important;
        line-height: 1.1 !important;
        letter-spacing: 0.7px !important;
        margin: 0 0 1px !important;
        color: var(--muted) !important;
    }

    .filter-chip {
        flex: 0 1 auto !important;
        max-width: 100% !important;
        min-width: 0 !important;
        min-height: 40px !important;
        padding: 9px 13px !important;
        border-radius: 999px !important;
        font-size: clamp(13px, 3.35vw, 16px) !important;
        line-height: 1.08 !important;
        font-weight: 900 !important;
        white-space: normal !important;
        text-align: center !important;
    }

    .filter-chip[data-value="Mobilfunk + Sales"] {
        min-width: min(190px, 76vw) !important;
    }

    /* Forecast-Monitor Metadaten im Header nicht rechts aus dem Layout laufen lassen */
    .topbar > div[style*="text-align: right"] {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        text-align: center !important;
        align-items: center !important;
        justify-content: center !important;
        white-space: normal !important;
        font-size: 12px !important;
        line-height: 1.25 !important;
        color: var(--muted) !important;
    }

    /* Intervallerfüllung rechter Headerbereich: Umschalter und Importzeit sauber untereinander */
    .bm-topbar-right {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin-left: 0 !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        justify-items: center !important;
        align-items: center !important;
        gap: 12px !important;
    }

    .bm-meta {
        width: 100% !important;
        max-width: 100% !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        font-size: 12px !important;
        line-height: 1.3 !important;
    }

    .timeframe-toggle {
        width: auto !important;
        max-width: 100% !important;
        border-radius: 18px !important;
        padding: 4px !important;
    }

    .timeframe-toggle button {
        min-width: 92px !important;
        height: 44px !important;
        padding: 9px 14px !important;
        font-size: 15px !important;
        border-radius: 14px !important;
    }

    .container {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 14px 10px 36px !important;
        overflow-x: hidden !important;
    }

    /* Forecast-Monitor obere KPI-Kacheln auf Mobile bewusst 2-spaltig statt Desktop-Zwang */
    .cards.top-kpi-grid,
    div.cards.top-kpi-grid,
    #top-kpi-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 12px 0 14px !important;
    }

    .cards.top-kpi-grid .kpi-card-time,
    #top-kpi-grid .kpi-card-time {
        grid-column: 1 / -1 !important;
    }

    .cards.top-kpi-grid > .card,
    .cards.top-kpi-grid > .kpi-card,
    #top-kpi-grid > .card,
    #top-kpi-grid > .kpi-card {
        height: auto !important;
        min-height: 88px !important;
        padding: 12px 13px !important;
        border-radius: 18px !important;
        overflow: hidden !important;
    }

    .cards.top-kpi-grid .value,
    #top-kpi-grid .value {
        font-size: clamp(24px, 7vw, 34px) !important;
        line-height: 1 !important;
        white-space: nowrap !important;
    }

    .cards.top-kpi-grid .kpi-card-time .kpi-time-grid,
    #top-kpi-grid .kpi-card-time .kpi-time-grid {
        display: grid !important;
        grid-template-columns: auto 1fr !important;
        gap: 4px 8px !important;
        font-size: clamp(13px, 3.4vw, 16px) !important;
        line-height: 1.1 !important;
    }

    /* Forecast-Monitor Ergebnisliste: Tabelle wird zu stabilen Mobile-Karten */
    table {
        width: 100% !important;
        max-width: 100% !important;
        table-layout: auto !important;
        border-spacing: 0 !important;
    }

    table colgroup,
    table thead {
        display: none !important;
    }

    table tbody {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    table tbody tr.row-section {
        display: block !important;
        width: 100% !important;
    }

    table tbody tr.row-section td {
        display: block !important;
        width: 100% !important;
        padding: 22px 4px 8px !important;
        border: 0 !important;
    }

    .section-title {
        font-size: clamp(30px, 8vw, 46px) !important;
        line-height: 1.05 !important;
        overflow-wrap: anywhere !important;
    }

    table tbody tr.row-detail,
    table tbody tr.row-summary {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
        gap: 12px !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 12px 0 18px !important;
        padding: 18px !important;
        border: 1px solid rgba(255,255,255,0.10) !important;
        border-radius: 24px !important;
        overflow: hidden !important;
        box-shadow: 0 12px 30px rgba(0,0,0,0.36) !important;
    }

    table tbody tr.row-summary {
        outline: 1px solid rgba(0,163,224,0.45) !important;
        border-color: rgba(0,163,224,0.34) !important;
    }

    table tbody tr.row-detail td,
    table tbody tr.row-summary td {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        overflow: hidden !important;
        text-align: left !important;
    }

    table tbody tr.row-detail td:first-child,
    table tbody tr.row-summary td:first-child {
        grid-column: 1 / -1 !important;
    }

    table tbody tr.row-detail td:last-child,
    table tbody tr.row-summary td:last-child {
        grid-column: 1 / -1 !important;
        overflow: visible !important;
        padding-right: 0 !important;
        text-align: left !important;
    }

    .line-label {
        font-size: clamp(27px, 7vw, 40px) !important;
        line-height: 1.05 !important;
        overflow-wrap: anywhere !important;
    }

    .row-summary .line-label {
        font-size: clamp(34px, 9vw, 52px) !important;
    }

    .dienstleister-label {
        font-size: clamp(16px, 4.4vw, 22px) !important;
        padding: 7px 13px !important;
    }

    .row-summary .dienstleister-label {
        font-size: clamp(18px, 5vw, 25px) !important;
    }

    .number {
        font-size: clamp(28px, 7vw, 40px) !important;
        line-height: 1 !important;
        white-space: nowrap !important;
    }

    .row-summary .number {
        font-size: clamp(30px, 7.4vw, 44px) !important;
    }

    .percent,
    .row-summary .percent {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        justify-content: center !important;
        padding: 12px 14px !important;
        font-size: clamp(34px, 10vw, 54px) !important;
        line-height: 1 !important;
        border-radius: 22px !important;
        white-space: nowrap !important;
    }

    .overflow-metric,
    .row-summary .overflow-metric {
        width: 100% !important;
        max-width: 100% !important;
        justify-content: center !important;
        padding: 14px 14px !important;
        border-radius: 22px !important;
        overflow: hidden !important;
    }

    .overflow-value,
    .row-summary .overflow-value {
        font-size: clamp(48px, 18vw, 86px) !important;
        line-height: 0.95 !important;
    }

    .tiny-info,
    .row-summary .tiny-info {
        max-width: 100% !important;
        max-height: 72px !important;
        font-size: 10px !important;
        line-height: 1.28 !important;
        overflow: hidden !important;
    }

    tr .label,
    tr .metric-mini-label,
    td .label {
        font-size: 11px !important;
        color: var(--muted) !important;
        margin-bottom: 5px !important;
    }

    /* Intervallerfüllung Matrix: kein Overlay, sondern horizontaler Scroll im Content */
    #matrix-section:not(.hidden),
    .matrix-section:not(.hidden),
    #matrix-section,
    .matrix-section {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        max-height: none !important;
        min-height: 0 !important;
        overflow-x: auto !important;
        overflow-y: visible !important;
        -webkit-overflow-scrolling: touch !important;
        overscroll-behavior: auto !important;
        padding: 0 0 10px !important;
        margin-top: 12px !important;
        border-top: 2px solid rgba(0,163,224,0.70) !important;
    }

    #matrix-table,
    .matrix-table {
        width: 980px !important;
        min-width: 980px !important;
        max-width: none !important;
        table-layout: fixed !important;
        border-spacing: 4px !important;
    }

    #matrix-table thead,
    .matrix-table thead {
        display: table-header-group !important;
        position: sticky !important;
        top: 0 !important;
        z-index: 20 !important;
    }

    #matrix-table thead th,
    .matrix-table thead th {
        position: sticky !important;
        top: 0 !important;
        z-index: 22 !important;
        height: 36px !important;
        min-height: 36px !important;
        padding: 5px 4px !important;
        font-size: 9px !important;
        line-height: 1 !important;
    }

    #matrix-table tbody,
    .matrix-table tbody {
        display: table-row-group !important;
    }

    #matrix-table tr,
    .matrix-table tr {
        display: table-row !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        box-shadow: none !important;
    }

    #matrix-table th,
    #matrix-table td,
    .matrix-table th,
    .matrix-table td {
        display: table-cell !important;
        width: auto !important;
        padding: 4px !important;
        overflow: hidden !important;
    }

    #matrix-table th:first-child,
    #matrix-table td:first-child,
    .matrix-table th:first-child,
    .matrix-table td:first-child {
        width: 86px !important;
        min-width: 86px !important;
        max-width: 86px !important;
        position: sticky !important;
        left: 0 !important;
        z-index: 18 !important;
        background: linear-gradient(180deg, #11161d 0%, #0b0f14 100%) !important;
        box-shadow: 8px 0 16px rgba(0,0,0,0.36) !important;
    }

    #matrix-table thead th:first-child,
    .matrix-table thead th:first-child {
        z-index: 24 !important;
    }

    .matrix-table th,
    .matrix-table td {
        height: 50px !important;
        font-size: 11px !important;
    }

    .interval-label {
        font-size: 12px !important;
        text-align: center !important;
        padding-right: 0 !important;
    }

    .matrix-cell {
        font-size: 11px !important;
        line-height: 1.06 !important;
    }

    /* Tagesgrafik mobil */
    .day-chart-panel {
        border-radius: 22px !important;
        padding: 14px !important;
        margin-top: 10px !important;
    }

    .day-chart-kpis,
    .day-chart-kpis-extended {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }

    .day-chart-canvas-wrap {
        min-height: 360px !important;
        height: 52vh !important;
        border-radius: 18px !important;
    }
}

@media (max-width: 480px) {
    .container {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    .topbar {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    table tbody tr.row-detail,
    table tbody tr.row-summary {
        padding: 16px !important;
        border-radius: 22px !important;
        gap: 10px !important;
    }

    .percent,
    .row-summary .percent {
        font-size: clamp(32px, 10vw, 50px) !important;
    }

    #matrix-table,
    .matrix-table {
        width: 940px !important;
        min-width: 940px !important;
    }
}

/* ==========================================================
   FINAL COMPACT NAV FILTER UI 2026-06-14
   ========================================================== */
.app-topbar,.topbar.app-topbar,.topbar[style].app-topbar{display:grid!important;grid-template-columns:minmax(330px,auto) minmax(420px,1fr) auto!important;align-items:center!important;gap:26px!important;padding:18px 28px!important;flex-wrap:nowrap!important}.app-brand,.brand.app-brand,.brand[style].app-brand{display:grid!important;grid-template-columns:auto minmax(0,1fr)!important;align-items:center!important;gap:18px!important;min-width:0!important;margin:0!important}.brand-logo img{height:56px!important;max-width:150px!important;object-fit:contain!important;cursor:default!important}.brand-copy{min-width:0!important}.app-filter-area,.filter-area.app-filter-area,.filter-area[style].app-filter-area{display:grid!important;grid-template-columns:1fr!important;gap:9px!important;min-width:0!important;width:100%!important}.app-filter-area .filter-group{display:flex!important;flex-wrap:wrap!important;align-items:center!important;gap:8px!important}.filter-label,.bm-filter-label,.filter-group>span:first-child{color:var(--muted)!important;text-transform:uppercase!important;font-weight:950!important;font-size:11px!important;letter-spacing:.55px!important;min-width:56px!important;width:auto!important}.app-nav{display:flex!important;align-items:center!important;justify-content:flex-end!important;flex-wrap:nowrap!important;gap:10px!important;align-self:center!important;margin:0!important;white-space:nowrap!important}.app-nav-btn,.filter-chip{display:inline-flex!important;align-items:center!important;justify-content:center!important;border-radius:999px!important;border:1px solid rgba(255,255,255,.10)!important;background:radial-gradient(circle at 18% 0%,rgba(0,163,224,.18),transparent 44%),linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.025))!important;color:var(--muted)!important;text-decoration:none!important;font-weight:950!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.045),0 8px 18px rgba(0,0,0,.24)!important;transition:all .15s ease!important}.app-nav-btn{min-height:40px!important;padding:9px 18px!important;font-size:14px!important}.filter-chip{min-height:31px!important;padding:6px 13px!important;font-size:12px!important;line-height:1.05!important}.app-nav-btn:hover,.filter-chip:hover{transform:translateY(-1px)!important;color:#fff!important;border-color:rgba(0,163,224,.55)!important}.app-nav-btn.active,.filter-chip.active{color:#fff!important;border-color:rgba(0,163,224,.86)!important;background:linear-gradient(135deg,rgba(0,163,224,.36),rgba(0,0,0,.82))!important;box-shadow:0 0 18px rgba(0,163,224,.33),inset 0 1px 0 rgba(255,255,255,.07)!important}.timeframe-toggle,#btn-view-day,#btn-view-week{display:none!important}.card,.day-kpi,.day-chart-panel,.row-detail,.row-summary{backdrop-filter:blur(10px)}.day-chart-legend span,.dienstleister-label,.overflow-metric,.percent{box-shadow:inset 0 1px 0 rgba(255,255,255,.045),0 8px 18px rgba(0,0,0,.18)}@media(max-width:1320px){.app-topbar,.topbar.app-topbar,.topbar[style].app-topbar{grid-template-columns:minmax(300px,auto) 1fr!important}.app-nav{grid-column:1/-1!important;justify-content:flex-end!important}}@media(max-width:820px){.app-topbar,.topbar.app-topbar,.topbar[style].app-topbar{grid-template-columns:1fr!important;gap:14px!important;padding:12px 10px 14px!important;overflow:hidden!important}.app-brand,.brand.app-brand,.brand[style].app-brand{grid-template-columns:auto minmax(0,1fr)!important;gap:12px!important}.brand-logo img{max-width:96px!important;max-height:56px!important;height:auto!important}.title{font-size:clamp(28px,8vw,40px)!important;line-height:1.02!important;overflow-wrap:anywhere!important}.app-nav{width:100%!important;justify-content:center!important;flex-wrap:wrap!important;gap:7px!important}.app-nav-btn{flex:1 1 30%!important;min-width:0!important;padding:9px 10px!important;font-size:clamp(11px,3.1vw,14px)!important}.filter-label,.bm-filter-label,.filter-group>span:first-child{flex:0 0 100%!important;text-align:center!important;min-width:0!important}.app-filter-area .filter-group{justify-content:center!important}.filter-chip{min-height:36px!important;padding:8px 12px!important;font-size:clamp(12px,3.25vw,15px)!important;white-space:normal!important;text-align:center!important}.container{width:100%!important;max-width:100%!important;overflow-x:hidden!important;padding-left:8px!important;padding-right:8px!important}table:not(.matrix-table) tbody tr.row-detail,table:not(.matrix-table) tbody tr.row-summary{display:grid!important;grid-template-columns:minmax(0,1fr)!important;width:100%!important;max-width:100%!important;overflow:hidden!important;padding:15px!important}table:not(.matrix-table) tbody tr.row-detail td,table:not(.matrix-table) tbody tr.row-summary td{grid-column:1/-1!important;width:100%!important;max-width:100%!important;min-width:0!important;overflow:hidden!important;padding:0!important;text-align:left!important}.percent,.row-summary .percent,.overflow-metric,.row-summary .overflow-metric{width:100%!important;max-width:100%!important;min-width:0!important;box-sizing:border-box!important;justify-content:center!important}}@media(max-width:480px){.app-nav{display:grid!important;grid-template-columns:1fr!important}.app-nav-btn{width:100%!important;flex:none!important}.cards,.cards.top-kpi-grid,div.cards.top-kpi-grid,#top-kpi-grid,.day-chart-kpis,.day-chart-kpis-extended{grid-template-columns:1fr!important}}

/* ==========================================================
   SHARED TOPBAR ALIGNMENT PATCH 2026-06-14
   Ziel: kein Hüpfen zwischen Forecast-Monitor / Intervallerfüllung / Tagesverlauf.
   Einfügen: ganz unten in public/css/style.css
   ========================================================== */

/* 1) Einheitliches Topbar-Raster für alle Seiten */
.topbar.app-topbar,
.topbar.app-topbar-monitor,
.topbar.app-topbar-bonus,
.app-topbar,
.app-topbar-unified {
    --app-topbar-pad-x: 28px;
    --app-topbar-pad-top: 18px;
    --app-topbar-pad-bottom: 14px;
    --app-brand-col: 470px;
    --app-logo-w: 136px;
    --app-logo-h: 74px;

    display: grid !important;
    grid-template-columns: var(--app-brand-col) minmax(0, 1fr) !important;
    grid-template-areas:
        "brand filters"
        "nav   filters" !important;
    align-items: start !important;
    justify-content: stretch !important;
    column-gap: 34px !important;
    row-gap: 8px !important;
    min-height: 154px !important;
    padding: var(--app-topbar-pad-top) var(--app-topbar-pad-x) var(--app-topbar-pad-bottom) !important;
    flex-wrap: nowrap !important;
    overflow: hidden !important;
}

/* 2) Brand/Logo auf identischer Höhe */
.topbar .brand,
.topbar .app-brand,
.app-brand {
    grid-area: brand !important;
    display: grid !important;
    grid-template-columns: var(--app-logo-w) minmax(0, 1fr) !important;
    align-items: start !important;
    justify-content: start !important;
    gap: 18px !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

.topbar .brand-logo,
.brand-logo {
    width: var(--app-logo-w) !important;
    height: var(--app-logo-h) !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
}

.topbar .brand-logo img,
.topbar .brand img,
.brand-logo img {
    width: var(--app-logo-w) !important;
    height: var(--app-logo-h) !important;
    max-width: var(--app-logo-w) !important;
    max-height: var(--app-logo-h) !important;
    object-fit: contain !important;
    cursor: default !important;
    display: block !important;
}

.topbar .brand-copy,
.brand-copy,
.topbar .brand > div:last-child {
    min-width: 0 !important;
    padding-top: 0 !important;
    margin-top: 0 !important;
}

.topbar .title,
.app-brand .title,
.brand-copy .title {
    font-size: 38px !important;
    line-height: 0.98 !important;
    letter-spacing: -0.9px !important;
    margin: 0 0 10px !important;
}

.topbar .subtitle,
.app-brand .subtitle,
.brand-copy .subtitle {
    color: var(--muted) !important;
    font-size: 13px !important;
    line-height: 1.25 !important;
}

#matrix-rule-text {
    color: var(--muted2) !important;
    font-size: 11px !important;
    line-height: 1.25 !important;
    margin-top: 3px !important;
    display: inline-block !important;
}

/* 3) Filter immer oben gleich ausrichten */
.topbar .filter-area,
.topbar .app-filter-area,
.app-filter-area {
    grid-area: filters !important;
    align-self: start !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    width: 100% !important;
    min-width: 0 !important;
    padding-top: 0 !important;
    margin-top: 0 !important;
}

.topbar .filter-group,
.app-filter-area .filter-group,
.bm-filter-group {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    min-width: 0 !important;
    margin: 0 !important;
}

.topbar .filter-label,
.topbar .bm-filter-label,
.topbar .filter-group > span:first-child,
.app-filter-area .filter-group > span:first-child {
    width: 62px !important;
    min-width: 62px !important;
    color: var(--muted) !important;
    text-transform: uppercase !important;
    font-size: 11px !important;
    line-height: 1 !important;
    letter-spacing: 0.65px !important;
    font-weight: 950 !important;
}

/* 4) Filterchips bleiben pillig/glowy */
.topbar .filter-chip,
.filter-chip {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 32px !important;
    padding: 7px 14px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(255,255,255,0.10) !important;
    background:
        radial-gradient(circle at 18% 0%, rgba(0,163,224,0.18), transparent 44%),
        linear-gradient(180deg, rgba(255,255,255,0.07), rgba(255,255,255,0.025)) !important;
    color: var(--muted) !important;
    font-size: 12px !important;
    line-height: 1.05 !important;
    font-weight: 950 !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.045), 0 7px 16px rgba(0,0,0,0.22) !important;
}

.topbar .filter-chip:hover,
.filter-chip:hover {
    transform: translateY(-1px) !important;
    color: #fff !important;
    border-color: rgba(0,163,224,0.48) !important;
}

.topbar .filter-chip.active,
.filter-chip.active {
    color: #fff !important;
    border-color: rgba(0,163,224,0.78) !important;
    background: linear-gradient(135deg, rgba(0,163,224,0.32), rgba(0,0,0,0.82)) !important;
    box-shadow: 0 0 15px rgba(0,163,224,0.26), inset 0 1px 0 rgba(255,255,255,0.07) !important;
}

/* 5) Navigation nach links, kompakter und bewusst anders als Filter */
.topbar .app-nav,
.app-nav {
    grid-area: nav !important;
    display: flex !important;
    justify-content: flex-start !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 7px !important;
    margin: 0 !important;
    padding-left: calc(var(--app-logo-w) + 18px) !important;
    align-self: start !important;
    width: auto !important;
    white-space: normal !important;
}

.topbar .app-nav-btn,
.app-nav-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 29px !important;
    padding: 5px 12px !important;
    border-radius: 10px !important;
    border: 1px solid rgba(255,255,255,0.13) !important;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.060), rgba(255,255,255,0.012)) !important;
    color: var(--muted) !important;
    text-decoration: none !important;
    font-size: 12px !important;
    line-height: 1 !important;
    font-weight: 900 !important;
    letter-spacing: 0.1px !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 5px 12px rgba(0,0,0,0.22) !important;
}

.topbar .app-nav-btn:hover,
.app-nav-btn:hover {
    transform: translateY(-1px) !important;
    color: #fff !important;
    border-color: rgba(0,163,224,0.42) !important;
}

.topbar .app-nav-btn.active,
.app-nav-btn.active {
    color: #fff !important;
    border-color: rgba(0,163,224,0.95) !important;
    background: linear-gradient(180deg, rgba(0,163,224,0.24), rgba(0,0,0,0.56)) !important;
    box-shadow: 0 0 14px rgba(0,163,224,0.28), inset 0 1px 0 rgba(255,255,255,0.07) !important;
}

/* 6) Tag/Woche-Schalter bleibt weg */
.timeframe-toggle,
#btn-view-day,
#btn-view-week {
    display: none !important;
}

/* 7) Responsive Verhalten */
@media (max-width: 1320px) {
    .topbar.app-topbar,
    .topbar.app-topbar-monitor,
    .topbar.app-topbar-bonus,
    .app-topbar,
    .app-topbar-unified {
        --app-brand-col: 430px;
        column-gap: 24px !important;
    }

    .topbar .title,
    .app-brand .title,
    .brand-copy .title {
        font-size: 34px !important;
    }
}

@media (max-width: 980px) {
    .topbar.app-topbar,
    .topbar.app-topbar-monitor,
    .topbar.app-topbar-bonus,
    .app-topbar,
    .app-topbar-unified {
        --app-logo-w: 96px;
        --app-logo-h: 58px;
        grid-template-columns: 1fr !important;
        grid-template-areas:
            "brand"
            "nav"
            "filters" !important;
        min-height: 0 !important;
        row-gap: 13px !important;
        padding: 13px 10px 15px !important;
        position: relative !important;
    }

    .topbar .brand,
    .topbar .app-brand,
    .app-brand {
        grid-template-columns: var(--app-logo-w) minmax(0, 1fr) !important;
        gap: 12px !important;
    }

    .topbar .title,
    .app-brand .title,
    .brand-copy .title {
        font-size: clamp(28px, 8vw, 40px) !important;
        line-height: 1.02 !important;
        overflow-wrap: anywhere !important;
        margin-bottom: 7px !important;
    }

    .topbar .app-nav,
    .app-nav {
        padding-left: 0 !important;
        width: 100% !important;
        justify-content: center !important;
    }

    .topbar .app-nav-btn,
    .app-nav-btn {
        flex: 1 1 auto !important;
        min-height: 34px !important;
        font-size: clamp(11px, 3.1vw, 13px) !important;
        border-radius: 12px !important;
    }

    .topbar .filter-group,
    .app-filter-area .filter-group,
    .bm-filter-group {
        justify-content: center !important;
        gap: 7px !important;
    }

    .topbar .filter-label,
    .topbar .bm-filter-label,
    .topbar .filter-group > span:first-child,
    .app-filter-area .filter-group > span:first-child {
        flex: 0 0 100% !important;
        width: 100% !important;
        min-width: 0 !important;
        text-align: center !important;
    }
}

/* === MATRIX_INTERNAL_SCROLLBAR_KILL_20260614 ===
   Entfernt den noch sichtbaren internen Scrollbalken der Wochenmatrix.
   Wichtig: Browser-/Seiten-Scroll bleibt erhalten; nur Matrix-/Container-Scrollbars werden unterdrückt.
*/
body:has(#matrix-section:not(.hidden)),
body:has(.matrix-section:not(.hidden)) {
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

/* Alle wahrscheinlichen Matrix-Scrollcontainer neutralisieren */
#matrix-section,
.matrix-section,
#matrix-section:not(.hidden),
.matrix-section:not(.hidden),
.matrix-scroll,
.matrix-wrapper,
.matrix-container,
.week-matrix,
.week-matrix-wrapper {
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    overflow: visible !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}

#matrix-section::-webkit-scrollbar,
.matrix-section::-webkit-scrollbar,
.matrix-scroll::-webkit-scrollbar,
.matrix-wrapper::-webkit-scrollbar,
.matrix-container::-webkit-scrollbar,
.week-matrix::-webkit-scrollbar,
.week-matrix-wrapper::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;
    display: none !important;
}

/* Tabelle nutzt komplette Breite; Sonntag darf nicht in eine Scrollbar laufen */
#matrix-table,
.matrix-table {
    width: calc(100% - 2px) !important;
    min-width: 0 !important;
    max-width: calc(100% - 2px) !important;
    table-layout: fixed !important;
    border-collapse: separate !important;
    border-spacing: 4px !important;
    margin-right: 0 !important;
}

#matrix-table th,
#matrix-table td,
.matrix-table th,
.matrix-table td {
    box-sizing: border-box !important;
    overflow: hidden !important;
}

#matrix-table th:first-child,
#matrix-table td:first-child,
.matrix-table th:first-child,
.matrix-table td:first-child {
    width: 82px !important;
    min-width: 82px !important;
    max-width: 82px !important;
}

/* Desktop: keine horizontale interne Matrix-Scrollfläche */
@media (min-width: 981px) {
    #matrix-section,
    .matrix-section,
    #matrix-section:not(.hidden),
    .matrix-section:not(.hidden) {
        padding-right: 10px !important;
        padding-left: 10px !important;
        padding-bottom: 28px !important;
    }
}

/* Mobile: horizontaler Touch-Scroll darf bleiben, vertikale interne Scrollbar nicht */
@media (max-width: 980px) {
    #matrix-section,
    .matrix-section,
    #matrix-section:not(.hidden),
    .matrix-section:not(.hidden) {
        overflow-x: auto !important;
        overflow-y: visible !important;
        scrollbar-width: thin !important;
        -webkit-overflow-scrolling: touch !important;
    }

    #matrix-table,
    .matrix-table {
        width: 940px !important;
        min-width: 940px !important;
        max-width: none !important;
    }
}