/* ===================================================================
   DER STAND-HINWEIS GANZ OBEN AUF DEN FARBEN-SEITEN

   Herausgelöst aus `farben-reihe.css`, als die auf 329 Zeilen gewachsen
   war — die Grenze im Haus sind 300. Die Trennung ist auch inhaltlich
   richtig: Dort steht das Menü der Reihe, hier ein Kasten, der mit dem
   Menü nichts zu tun hat.

   Eingebunden auf den drei Farben-Seiten, NICHT auf der Startseite:
   Dort steht die Tafel als Schaufenster, ohne den Hinweis.

   Kevin: „mache auf den Farbenseiten noch ganz oben hin, dass es nur
   die v1.0.0 ist, noch weiterentwickelt wird."

   Er steht VOR dem Reihenmenü, also als Allererstes unter der
   Kopfleiste. Das ist Absicht: Wer die Seite öffnet, soll wissen, was
   er vor sich hat, bevor er anfängt zu lesen.

   Kein Warnkasten. Gelb und Ausrufezeichen sagen „hier ist etwas
   kaputt" — hier ist nichts kaputt, hier ist etwas erst angefangen.
   Deshalb dieselbe Scheibe wie jeder andere Kasten der Seite, nur mit
   dem Aerona-Verlauf an der linken Kante als Merkzeichen.
   =================================================================== */

:root[data-thema] .fk-stand {
    position: relative;
    margin-top: 1.75rem;
    padding: 1.4rem 1.5rem 1.5rem;
    border-width: 1px;
    border-style: solid;
    border-radius: var(--k-rund-gross);
    border-color: transparent;
    border-top-color: var(--k-rand-oben);
    border-left-color: var(--k-rand-seite);
    border-right-color: var(--k-rand-seite);
    border-bottom-color: var(--k-rand-unten);
    background: var(--k-vertieft);
    box-shadow: var(--k-glas-tiefe);
    color: var(--k-text);
    overflow: hidden;
}

:root[data-thema] .fk-stand::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background-image: linear-gradient(180deg,
            var(--k-verlauf-a) 0%, var(--k-verlauf-b) 100%);
}

:root[data-thema] .fk-stand-marke {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.22rem 0.7rem;
    border: 1px solid var(--k-rand-seite);
    border-radius: var(--k-rund-pille);
    background: rgba(128, 128, 128, 0.08);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--k-text-still);
    white-space: nowrap;
}

:root[data-thema] .fk-stand-text {
    margin: 0 0 0.7rem;
    max-width: 68ch;
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--k-text-still);
}

:root[data-thema] .fk-stand-text strong {
    color: var(--k-text);
    font-weight: 650;
}

:root[data-thema] .fk-stand-schild {
    display: block;
    margin: 1.1rem 0 0.6rem;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--k-text-still);
}

:root[data-thema] .fk-stand-liste {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 0.9rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

:root[data-thema] .fk-stand-liste li {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    column-gap: 0.55rem;
    row-gap: 0.25rem;
    align-items: start;
}

:root[data-thema] .fk-stand-liste .fk-zeichen {
    grid-row: 1;
    display: inline-flex;
    color: var(--k-verlauf-a);
}

:root[data-thema] .fk-stand-liste strong {
    grid-row: 1;
    font-size: 0.92rem;
    font-weight: 650;
    line-height: 1.25;
}

:root[data-thema] .fk-stand-liste span:not(.fk-zeichen) {
    grid-column: 1 / -1;
    grid-row: 2;
    font-size: 0.85rem;
    line-height: 1.55;
    color: var(--k-text-still);
}

:root[data-thema] .fk-stand-fuss {
    margin: 1.1rem 0 0;
    padding-top: 0.9rem;
    border-top: 1px solid var(--k-rand-seite);
    max-width: 68ch;
    font-size: 0.82rem;
    line-height: 1.55;
    color: var(--k-text-still);
}

:root[data-thema] .fk-stand-kopf {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 0.5rem 0.85rem;
    cursor: pointer;
    list-style: none;
    user-select: none;
}

:root[data-thema] .fk-stand-kopf::-webkit-details-marker {
    display: none;
}

:root[data-thema] .fk-stand-kurz {
    grid-column: 1 / -1;
    grid-row: 2;
    font-size: 0.86rem;
    line-height: 1.5;
    color: var(--k-text-still);
}

@media (min-width: 820px) {
    :root[data-thema] .fk-stand-kurz {
        grid-column: auto;
        grid-row: 1;
        justify-self: start;
    }
    :root[data-thema] .fk-stand-kopf {
        grid-template-columns: auto auto 1fr auto;
    }
}

:root[data-thema] .fk-stand-pfeil {
    grid-row: 1;
    grid-column: -1;
    display: inline-flex;
    color: var(--k-text-still);
    transition: transform 200ms ease, color 200ms ease;
}

:root[data-thema] .fk-stand-klapp[open] .fk-stand-pfeil {
    transform: rotate(180deg);
}

:root[data-thema] .fk-stand-kopf:hover .fk-stand-pfeil,
:root[data-thema] .fk-stand-kopf:hover .fk-stand-titel {
    color: var(--k-verlauf-a);
}

:root[data-thema] .fk-stand-kopf:focus-visible {
    outline: 2px solid var(--k-verlauf-a);
    outline-offset: 4px;
    border-radius: var(--k-rund-gross);
}

:root[data-thema] .fk-stand-titel {
    margin: 0;
    font-size: clamp(1.1rem, 2.2vw, 1.4rem);
    font-weight: 700;
    line-height: 1.2;
    transition: color 200ms ease;
}

:root[data-thema] .fk-stand-inhalt {
    margin-top: 1.1rem;
}

@media (prefers-reduced-motion: reduce) {
    :root[data-thema] .fk-stand-pfeil,
    :root[data-thema] .fk-stand-titel {
        transition: none;
    }
}