/* ===================================================================
   AERONA SPACE – AERONA OFFICE, Teil 2: der Markt

   Die Übersicht dessen, was es heute schon gibt. Bewusst nüchtern:
   vier Fragen je Programm, keine Wertung in Sternen. Wer hier gut
   abschneidet, ist nicht „besser" – die Fragen sind nur die, die für
   Aerona zählen.

   Die Tabelle rollt auf schmalen Bildschirmen in ihrem eigenen
   Kasten. Die Seite selbst bekommt nie einen Querbalken.
   =================================================================== */

.of-markt {
    overflow-x: auto;
    border-radius: 14px;
    border: 1px solid rgba(148, 163, 184, 0.14);
    background: rgba(15, 23, 42, 0.35);
    -webkit-overflow-scrolling: touch;
}

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

.of-tabelle thead th {
    position: sticky;
    top: 0;
    padding: 0.9rem 1rem;
    /* `start` statt `left`: folgt der Schreibrichtung von selbst, also
       rechtsbündig im Arabischen und Hebräischen ohne eigene Regel. */
    text-align: start;
    font-size: 0.73rem;
    font-weight: 750;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: #a5b4fc;
    background: rgba(30, 41, 59, 0.95);
    border-bottom: 1px solid rgba(148, 163, 184, 0.2);
    white-space: nowrap;
}

.of-tabelle tbody td {
    padding: 0.85rem 1rem;
    color: #cbd5e1;
    border-bottom: 1px solid rgba(148, 163, 184, 0.08);
    vertical-align: top;
}

.of-tabelle tbody tr:last-child td {
    border-bottom: none;
}

.of-tabelle tbody tr:hover td {
    background: rgba(167, 139, 250, 0.05);
}

/* Erste Spalte: Name und darunter der Anbieter */
.of-tabelle .of-name {
    font-weight: 700;
    color: #f1f5f9;
    white-space: nowrap;
}

.of-tabelle .of-anbieter {
    display: block;
    margin-top: 0.2rem;
    font-size: 0.78rem;
    font-weight: 400;
    color: #7f8ea3;
    white-space: nowrap;
}

/* Die Ja/Nein-Marken. Grün heißt nicht „gut", sondern nur:
   trifft auf das zu, wonach die Spalte fragt. */
.of-marke {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 20px;
    font-size: 0.78rem;
    font-weight: 650;
    white-space: nowrap;
}

.of-marke--ja {
    color: #86efac;
    background: rgba(34, 197, 94, 0.13);
    border: 1px solid rgba(34, 197, 94, 0.28);
}

.of-marke--nein {
    color: #fda4af;
    background: rgba(244, 63, 94, 0.12);
    border: 1px solid rgba(244, 63, 94, 0.26);
}

.of-marke--halb {
    color: #fcd34d;
    background: rgba(245, 158, 11, 0.12);
    border: 1px solid rgba(245, 158, 11, 0.28);
}

/* Die eigene Zeile am Ende – hervorgehoben, aber als Absicht
   gekennzeichnet, nicht als vorhandenes Produkt */
.of-tabelle tr.of-zeile--aerona td {
    background: rgba(167, 139, 250, 0.09);
    border-top: 1px solid rgba(167, 139, 250, 0.3);
}

.of-tabelle tr.of-zeile--aerona .of-name {
    color: #ddd6fe;
}

.of-plan {
    display: inline-block;
    margin-left: 0.45rem;
    padding: 1px 7px;
    border-radius: 5px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #c4b5fd;
    background: rgba(167, 139, 250, 0.16);
    border: 1px solid rgba(167, 139, 250, 0.32);
    vertical-align: middle;
}

/* Hinweis unter der Tabelle */
.of-markt__fuss {
    margin-top: 1rem;
    font-size: 0.84rem;
    line-height: 1.6;
    color: #7f8ea3;
}

/* Rolle-Hinweis nur auf schmalen Bildschirmen */
.of-rollhinweis {
    display: none;
    margin-bottom: 0.7rem;
    font-size: 0.8rem;
    color: #7f8ea3;
}

@media (max-width: 820px) {
    .of-rollhinweis {
        display: block;
    }

    .of-tabelle {
        font-size: 0.85rem;
    }
}