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

   Vierzehn Anbieter, sechs Spalten. Das Balkendiagramm daneben steht
   in `buero-vergleich.css`.

   ## Die Ampel, die niemanden rot anmalt

   Die Tabelle hatte drei Marken: „Ja" in Grün, „Nein" in Rot,
   „Teilweise" in Bernstein — die klassische Ampel, und hier liegt die
   Versuchung am nächsten: Es IST eine Bewertung.

   Sie fällt trotzdem, aus zwei Gründen.

   Erstens steht in jeder Marke schon das Wort. „Nein" ist „Nein", ob
   rot oder nicht; die Farbe sagt nichts Zusätzliches, sie sagt es nur
   lauter.

   Zweitens — und das ist der eigentliche Grund — steht in dieser
   Tabelle Aerona neben vierzehn fremden Anbietern. Wer Konkurrenten
   rot anmalt und sich selbst violett hervorhebt, hat aufgehört zu
   vergleichen und angefangen zu werben. Dieselbe Seite, die auf
   „Was nach außen geht" keine erfundenen Zahlen zeigt und auf
   „Sicherheit" die offenen Punkte genauso prominent stellt wie die
   behobenen, kann das nicht wollen.

   Der Unterschied bleibt, als HELLIGKEIT: „Ja" steht am kräftigsten
   da, „Teilweise" leiser, „Nein" am leisesten. Das liest sich als
   Skala und behauptet nichts über gut und schlecht.
   =================================================================== */

:root[data-thema] .of-markt {
    position: relative;
    overflow-x: auto;
    border-width: 1px;
    border-style: solid;
    border-radius: var(--k-rund-mittel);
    background: var(--k-vertieft);
    -webkit-overflow-scrolling: touch;
}

:root[data-thema] .of-tabelle {
    width: 100%;
    min-width: 760px;
    border-collapse: collapse;
    font-size: 0.9rem;
}

:root[data-thema] .of-tabelle thead th {
    box-shadow: var(--k-glas-tiefe);
    border-color: var(--k-glas-kante);
    position: sticky;
    top: 0;
    padding: 0.9rem 1rem;
    background: var(--k-menue);
    backdrop-filter: blur(12px) saturate(1.45);
    -webkit-backdrop-filter: blur(12px) saturate(1.45);
    border-bottom: 1px solid var(--k-rand-seite);
    color: var(--k-text-still);
    font-size: 0.73rem;
    font-weight: 750;
    letter-spacing: 0.09em;
    text-align: start;
    text-transform: uppercase;
    white-space: nowrap;
}

:root[data-thema] .of-tabelle tbody td {
    padding: 0.85rem 1rem;
    border-bottom: 1px solid var(--k-rand-dicke);
    color: var(--k-text-leise);
    vertical-align: top;
}

:root[data-thema] .of-tabelle tbody tr:last-child td {
    border-bottom: none;
}

:root[data-thema] .of-tabelle .of-name {
    color: var(--k-text);
    font-weight: 700;
    white-space: nowrap;
}

:root[data-thema] .of-tabelle .of-anbieter {
    display: block;
    margin-top: 0.2rem;
    color: var(--k-text-still);
    font-size: 0.78rem;
    font-weight: 400;
    white-space: nowrap;
}

:root[data-thema] .of-marke {
    display: inline-block;
    padding: 2px 9px;
    border-width: 1px;
    border-style: solid;
    border-radius: 20px;
    background: var(--k-vertieft);
    font-size: 0.78rem;
    font-weight: 650;
    white-space: nowrap;
}

:root[data-thema] .of-marke--ja {
    color: var(--k-text);
}

:root[data-thema] .of-marke--halb {
    color: var(--k-text-leise);
}

:root[data-thema] .of-marke--nein {
    color: var(--k-text-still);
}

:root[data-thema] .of-tabelle tr.of-zeile--aerona td {
    position: relative;
    background: var(--k-vertieft);
}

:root[data-thema] .of-tabelle tr.of-zeile--aerona td::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 2px;
    background-image: var(--k-verlauf);
    pointer-events: none;
}

:root[data-thema] .of-tabelle tr.of-zeile--aerona .of-name {
    color: var(--k-text);
}

:root[data-thema] .of-plan {
    display: inline-block;
    margin-left: 0.45rem;
    padding: 1px 7px;
    border: 1px dashed var(--k-rand-oben);
    border-radius: var(--k-rund-klein);
    color: var(--k-text-still);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    vertical-align: middle;
}

:root[data-thema] .of-markt__fuss,
:root[data-thema] .of-rollhinweis {
    color: var(--k-text-still);
    font-size: 0.84rem;
    line-height: 1.6;
}

:root[data-thema] .of-markt__fuss {
    margin-top: 1rem;
}

:root[data-thema] .of-rollhinweis {
    display: none;
    margin-bottom: 0.7rem;
    font-size: 0.8rem;
}

@media (max-width: 820px) {
    :root[data-thema] .of-rollhinweis {
        display: block;
    }

    :root[data-thema] .of-tabelle {
        font-size: 0.85rem;
    }
}