/* ===================================================================
   „EIN OFFICE, DAS AUF DEM GERÄT BLEIBT" — DER BALKENVERGLEICH

   Acht Zeilen: wie viele Menschen welches Office benutzen. Die
   Tabelle daneben steht in `buero-markt.css`; getrennt wurde, als
   beides zusammen ueber dreihundert Zeilen ging — an der Naht, nicht
   an der Zeile (Regel 03). Die Naht ist deutlich: Die eine
   Darstellung zaehlt Eigenschaften auf, die andere misst eine Zahl.

   ## Durchgezogen gegen gestrichelt

   Im Balkendiagramm war Aeronas Balken violett gestrichelt, die
   anderen blau durchgezogen. Dieser Unterschied ist der wichtigste der
   ganzen Seite und bleibt genau so — er sagt nämlich nicht „besser",
   sondern **„gibt es noch nicht"**.

   Gestrichelt gegen durchgezogen ist außerdem ein Muster, keine Farbe:
   Es funktioniert auch für jemanden, der Farben nicht unterscheidet,
   und es funktioniert ausgedruckt.
   =================================================================== */

:root[data-thema] .of-vergleich {
    display: grid;
    gap: 0.75rem;
    margin-top: 1.8rem;
}

:root[data-thema] .of-balkenzeile {
    display: grid;
    grid-template-columns: 160px minmax(0, 1fr) auto;
    gap: 1rem;
    align-items: center;
}

:root[data-thema] .of-balkenzeile__name {
    color: var(--k-text-leise);
    font-size: 0.87rem;
    font-weight: 650;
    text-align: end;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

:root[data-thema] .of-balken {
    position: relative;
    height: 26px;
    border-radius: 7px;
    background: var(--k-vertieft-tief);
    overflow: hidden;
}

:root[data-thema] .of-balken__fuellung {
    height: 100%;
    border-radius: 7px;
    background-image: var(--k-verlauf);
    opacity: 0.55;
}

:root[data-thema] .of-balkenzeile--plan .of-balken__fuellung {
    opacity: 1;
    border: 1px dashed var(--k-rand-oben);
    background-image: repeating-linear-gradient(115deg,
            var(--k-verlauf-a) 0 9px,
            transparent 9px 18px);
}

:root[data-thema] .of-balkenzeile--plan .of-balkenzeile__name,
:root[data-thema] .of-balkenzeile--plan .of-balkenzeile__wert {
    color: var(--k-text);
    font-weight: 750;
}

:root[data-thema] .of-balkenzeile__wert {
    min-width: 2.4rem;
    color: var(--k-text-still);
    font-size: 0.87rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    text-align: end;
}

:root[data-thema] .of-legende {
    display: flex;
    flex-wrap: wrap;
    gap: 1.4rem;
    margin-top: 1.4rem;
    color: var(--k-text-still);
    font-size: 0.82rem;
}

:root[data-thema] .of-legende__stueck {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

:root[data-thema] .of-legende__probe {
    width: 26px;
    height: 13px;
    border-radius: 4px;
    background-image: var(--k-verlauf);
    opacity: 0.55;
}

:root[data-thema] .of-legende__probe--plan {
    opacity: 1;
    border: 1px dashed var(--k-rand-oben);
    background-image: repeating-linear-gradient(115deg,
            var(--k-verlauf-a) 0 7px,
            transparent 7px 14px);
}

@media (max-width: 640px) {
    :root[data-thema] .of-balkenzeile {
        grid-template-columns: 108px minmax(0, 1fr) auto;
        gap: 0.6rem;
    }

    :root[data-thema] .of-balkenzeile__name {
        font-size: 0.78rem;
    }

    :root[data-thema] .of-balken {
        height: 22px;
    }
}