/* Unified chart header: headline + subtitle across all chart types.
   Scoped inside main#main to beat the margin: 0 reset in typography.css */
main#main {

    .stats-staircase-wrapper,
    .diagram,
    .diagram-placements {

        >p {
            font-size: 1em;
            color: var(--c-secondary);
            opacity: 0.6;
            margin-bottom: 1.25rem;
        }
    }

    .diagram-placements>h2 {
        margin-bottom: 0;
    }

    .diagram-placements>.text-info {
        margin-bottom: 1.25rem;
    }
}

.diagram-container {
    display: flex;
    flex-direction: column;
    gap: 4rem;

    @media (width >=768px) {
        flex-direction: row;
    }
}

.diagram-1 {
    height: stretch;
    display: flex;
    flex-direction: column;
}

.diagram-2 {
    .bar {
        height: 64px;

        &:first-child {
            .bar-inner {
                width: 100%;
            }
        }

        &.spacing-top {
            margin-top: 2rem;
        }

        &[style*="--c-infographic-9"],
        &[style*="--c-infographic-10"] {
            .bar-inner {
                color: var(--c-white);
            }
        }

        .bar-inner {
            height: 100%;
            display: flex;
            align-items: center;
            gap: 12px;
            width: calc((var(--bar-width) / var(--bar-total)) * 100%);
            min-width: 150px;
            background-color: var(--bar-color, var(--c-primary));
            padding: 12px 16px;

            &.small {
                font-size: 0.9em;
                ;
            }

            span {
                font-size: 2rem;
                font-weight: bold;
                color: inherit;
            }
        }
    }
}

/* Treemap Grid - 100x100 grid for proportional areas */
.diagram-treemap {
    flex-grow: 1;
    display: grid;
    grid-template-columns: repeat(100, 1fr);
    grid-template-rows: repeat(100, 1fr);
    width: 100%;
    aspect-ratio: 1;

    @media (width < 768px) {
        grid-template-columns: 8fr 7fr;
        grid-template-rows: 22fr 13fr 15fr 50fr;
        aspect-ratio: 1 / 3;
    }
}

.diagram-treemap .panel {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    padding: 1rem;
    grid-column: var(--panel-col-start) / span var(--panel-cols);
    grid-row: var(--panel-row-start) / span var(--panel-rows);
    background-color: var(--panel-color, #ccc);
}

/* Mobile panel positions — !important overrides inline CSS variables */
@media (width < 768px) {
    .diagram-treemap .panel-22 {
        grid-column: 1 / -1 !important;
        grid-row: 1 !important;
    }

    .diagram-treemap .panel-13 {
        grid-column: 1 / -1 !important;
        grid-row: 2 !important;
    }

    .diagram-treemap .panel-8 {
        grid-column: 1 !important;
        grid-row: 3 !important;
    }

    .diagram-treemap .panel-7 {
        grid-column: 2 !important;
        grid-row: 3 !important;
    }

    .diagram-treemap .panel-50 {
        grid-column: 1 / -1 !important;
        grid-row: 4 !important;
    }
}

.diagram-treemap .panel-percentage {
    font-size: 2.5rem;
    line-height: 1;
    font-weight: bold;
    margin-bottom: 0.5rem;
}

.diagram-treemap .panel-label {
    font-size: 0.9rem;
    line-height: 1.3;
}

/* Stats Staircase Grid */

/*
  Mobile 2-column layout (2fr 3fr):

       1    2
  1    Pr   .
  2    .    Le
  3    .    F
  4    .    R
  5    K    Pu
  6    V    V

  Desktop 13×9 grid (Teaching expanded to 3×3 to match Publikationen):

       1  2  3  4  5  6  7  8  9  10 11 12 13
  1    .  .  Pr Pr .  .  .  K  K  K  Pu Pu Pu
  2    .  .  Pr Pr .  .  .  K  K  K  Pu Pu Pu
  3    .  .  .  .  F  F  F  K  K  K  Pu Pu Pu
  4    .  .  .  .  F  F  F  V  V  V  V  V  V
  5    .  .  .  .  F  F  F  V  V  V  V  V  V
  6    .  .  .  R  R  R  R  V  V  V  V  V  V
  7    Le Le Le R  R  R  R  V  V  V  V  V  V
  8    Le Le Le R  R  R  R  V  V  V  V  V  V
  9    Le Le Le R  R  R  R  V  V  V  V  V  V
*/

.stats-staircase {
    display: grid;
    grid-template-columns: repeat(6, 1fr);

    @media (width >=768px) {
        grid-template-columns: repeat(13, 1fr);
        grid-template-rows: repeat(9, 1fr);
        aspect-ratio: 13 / 9;
    }
}

.stats-staircase .stats-block {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 0.75rem;
    container-type: size;
    overflow: hidden;
    aspect-ratio: 1;

    @media (width >=768px) {
        aspect-ratio: unset;
        padding: 1rem 1.25rem;
    }
}

.stats-staircase .stats-label {
    font-size: 1.2rem;
    line-height: 1.2;

    -webkit-hyphens: auto;
    hyphens: auto;

    @media (width >=768px) {
        font-size: 1.5rem;
    }
}

.stats-label.small {
    @media (width >=768px) {
        font-size: 1.1rem;
    }
}

.stats-staircase .stats-sublabel {
    font-size: 1em;
    line-height: 1.2;
}

.stats-staircase .stats-number {
    font-size: 48cqi;
    font-weight: bold;
    line-height: 0.82;
    margin-top: auto;

    @media (width >=768px) {
        font-size: 55cqb;
    }
}

.stats-preise {
    background-color: var(--c-infographic-6);
    grid-column: 1 / 3;
    grid-row: 1;

    @media (width >=768px) {
        grid-column: 3 / 5;
        grid-row: 1 / 3;
    }
}

.stats-lehrtaetigkeiten {
    background-color: var(--c-infographic-3);
    grid-column: 4 / 7;
    grid-row: 2;

    @media (width >=768px) {
        grid-column: 1 / 4;
        grid-row: 7 / 10;
    }
}

.stats-forschung {
    background-color: var(--c-infographic-11);
    grid-column: 4 / 7;
    grid-row: 3;

    @media (width >=768px) {
        grid-column: 5 / 8;
        grid-row: 3 / 6;
    }
}

.stats-referee {
    background-color: var(--c-infographic-1);
    grid-column: 3 / 7;
    grid-row: 4;

    @media (width >=768px) {
        grid-column: 4 / 8;
        grid-row: 6 / 10;
    }
}

.stats-konferenzen {
    background-color: var(--c-infographic-9);
    grid-column: 1 / 4;
    grid-row: 5;

    @media (width >=768px) {
        grid-column: 8 / 11;
        grid-row: 1 / 4;
    }

    span {
        color: var(--c-white);
    }
}

.stats-publikationen {
    background-color: var(--c-infographic-4);
    grid-column: 4 / 7;
    grid-row: 5;

    @media (width >=768px) {
        grid-column: 11 / 14;
        grid-row: 1 / 4;
    }
}

.stats-vortraege {
    background-color: var(--c-infographic-2);
    grid-column: 1 / -1;
    grid-row: 6;

    @media (width >=768px) {
        grid-column: 8 / 14;
        grid-row: 4 / 10;
    }
}