/* ===================================================================
   DIE PRODUKTTAFEL „AERONA FARBEN" — RASTER UND KACHELN

   Kevin hat als Vorbild eine Herstellertafel gezeigt: das große Bild,
   das bei einer neuen Uhr oder einem neuen System erscheint. Links die
   Zahlen, in der Mitte das Ding selbst, rechts die Merkmale, unten das
   Kleingedruckte. Der erste Anlauf hier war eine Kachel mit vier Listen
   darin — richtig im Inhalt, falsch in der Form. Kevin: „unseres sieht
   dagegen sehr schlecht aus." Er hat recht: Eine Liste ist keine Tafel.

   ## Was eine Tafel von einer Liste unterscheidet

   · **Ungleiche Kacheln.** Eine Zahl braucht wenig Platz und viel
     Aufmerksamkeit, eine Aufzählung das Gegenteil. Gleich große Kästen
     nebeneinander sagen „alles gleich wichtig" — und damit nichts.
   · **Ein Bild in der Mitte.** Ohne das Ding selbst ist es ein
     Datenblatt. Das Rad steht hier als reine Gestaltung: derselbe
     Ring, dasselbe Loch, dasselbe Feld — aber ohne Programm, damit es
     auf allen drei Seiten gleich aussieht, auch dort, wo das echte Rad
     nicht liegt.
   · **Kleingedrucktes.** Herstellertafeln haben es, und zwar nicht aus
     Vorsicht: Es ist die Stelle, an der die Einschränkungen stehen, die
     die großen Zahlen nicht zeigen. Wer es wegnimmt, macht Werbung.

   Die feinen Teile — Rad, Farbstreifen, schwarze Kachel, Fußnote —
   stehen in `farben-koennen-teile.css`.
   =================================================================== */

:root[data-thema] .fk-tafel {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 5.5fr) minmax(0, 3fr);
    gap: clamp(0.6rem, 1.2vw, 0.9rem);
    align-items: start;
    margin-block: 2.5rem 0;
    padding: clamp(1rem, 2.2vw, 1.6rem);
    border-width: 1px;
    border-style: solid;
    border-radius: var(--k-rund-gross);
    background: var(--k-vertieft);
}

:root[data-thema] .fk-spalte {
    display: grid;
    gap: clamp(0.6rem, 1.2vw, 0.9rem);
    align-content: start;
}

:root[data-thema] .fk-spalte--rechts {
    grid-template-columns: 1fr 1fr;
}

:root[data-thema] .fk-kachel--breit {
    grid-column: 1 / -1;
}

:root[data-thema] .fk-kachel {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    padding: 0.85rem 0.95rem 0.9rem;
    border-width: 1px;
    border-style: solid;
    border-radius: var(--k-rund-mittel);
    background: var(--k-vertieft);
}

:root[data-thema] .fk-marke {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--k-text-still);
}

:root[data-thema] .fk-marke--mitte {
    display: block;
    text-align: center;
    margin-bottom: 0.5rem;
}

:root[data-thema] .fk-gross {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    margin: 0.1rem 0 0;
    font-size: clamp(1.8rem, 3.4vw, 2.4rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.025em;
}

:root[data-thema] .fk-mittel {
    display: flex;
    align-items: baseline;
    gap: 0.35rem;
    flex-wrap: wrap;
    margin: 0.1rem 0 0;
    font-size: clamp(1.15rem, 2vw, 1.45rem);
    font-weight: 650;
    line-height: 1.15;
    letter-spacing: -0.015em;
}

:root[data-thema] .fk-einheit,
:root[data-thema] .fk-einheit-mini {
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    color: var(--k-text-still);
}

:root[data-thema] .fk-einheit-mini {
    margin-left: 0.15rem;
}

:root[data-thema] .fk-klein {
    font-size: 0.78rem;
    line-height: 1.45;
    color: var(--k-text-still);
}

:root[data-thema] .fk-paare {
    display: grid;
    gap: 0.3rem;
    margin: 0.35rem 0 0;
}

:root[data-thema] .fk-paare > div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
}

:root[data-thema] .fk-paare dt {
    font-size: 0.82rem;
    color: var(--k-text-still);
}

:root[data-thema] .fk-paare dd {
    margin: 0;
    font-size: 0.86rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

:root[data-thema] .fk-kachel--merkmal .fk-zeichen {
    display: inline-flex;
    color: var(--k-verlauf-a);
}

:root[data-thema] .fk-name {
    margin: 0.35rem 0 0;
    font-size: 0.92rem;
    font-weight: 650;
    line-height: 1.25;
    letter-spacing: 0.005em;
}

:root[data-thema] .fk-liste {
    margin: 0.4rem 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 0.4rem;
}

:root[data-thema] .fk-liste li {
    display: grid;
    grid-template-columns: 0.9em 1fr;
    gap: 0.5em;
    font-size: 0.82rem;
    line-height: 1.45;
    color: var(--k-text-still);
}

:root[data-thema] .fk-liste li::before {
    content: "";
    width: 5px;
    height: 5px;
    margin-top: 0.5em;
    border-radius: 50%;
    background: var(--k-verlauf-a);
}

@media (max-width: 900px) {
    :root[data-thema] .fk-tafel {
        grid-template-columns: minmax(0, 1fr);
    }

    :root[data-thema] .fk-mitte {
        order: -1;
    }

    :root[data-thema] .fk-spalte--links {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 560px) {
    :root[data-thema] .fk-spalte--links,
    :root[data-thema] .fk-spalte--rechts {
        grid-template-columns: minmax(0, 1fr);
    }
}