/* ===================================================================
   DIE DESIGNSEITE — NEUN REITER STATT EINER BAHN

   Die Seite war 8426 Pixel hoch, ein einziger Strang. Wer wissen wollte,
   wie die Schrift gesetzt ist, musste am Glas, an den Punkten und an den
   Regeln vorbeirollen — und wusste unterwegs nicht, wie viel noch kommt.

   Neun Tafeln lösen das, und sie lösen noch etwas Zweites: Man sieht die
   Sprache jetzt als **Liste ihrer Teile**. Neun Reiter nebeneinander
   sagen in einer Sekunde, woraus „Ultra Chrome Pixel Glass" besteht;
   achttausend Pixel Text sagen das nie.

   ## Was oben und unten bleibt

   Der Einstieg und der Schluss gehören zu keiner Tafel. Beide gelten für
   alle neun — der Warnkasten („das hier ist nicht fertig") besonders. Ihn
   hinter einen Reiter zu legen hieße, ihn zu verstecken, und das ist
   genau das Gegenteil dessen, was er sagt.

   ## Der Reiter ist ein Ziel, also bekommt er den Ring

   Das ist die Hausregel, und sie hat einmal gefehlt: „Was ein Ziel ist,
   antwortet auf Zeigen." Ein Reiter ist ein Ziel — man zielt darauf,
   auch wenn man die Seite nicht verlässt. Die Punkte laufen deshalb um
   ihn herum wie um jeden anderen Knopf.

   Und der Wechsel dauert **420 Millisekunden**, nicht 140. Ein Reiter
   wechselt eine ganze Tafel; das ist kein Umschalten, das ist ein
   Wechsel. Die erste Fassung lief in 140 und wirkte hektisch — dieselbe
   Lehre wie bei den drei anderen Reiterpaaren auf dieser Webseite.
   =================================================================== */

:root[data-thema] .ds-reiterleiste {
    position: relative;
    margin-block: -22px calc(2.6rem - 22px);
}

:root[data-thema] .ds-reiter {
    display: flex;
    gap: 0.4rem;
    padding-block: 22px;
    overflow-x: auto;
    scrollbar-width: none;
}

:root[data-thema] .ds-reiter__pfeil {
    position: absolute;
    top: 50%;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    margin-top: -17px;
    padding: 0;
    border-width: 1px;
    border-style: solid;
    border-radius: 50%;
    background: var(--k-vertieft);
    color: var(--k-text-leise);
    font-size: 0.78rem;
    cursor: pointer;

    opacity: 0;
    pointer-events: none;
    transition: opacity var(--bew-ruhig) var(--bew-beides),
        color var(--bew-ruhig) var(--bew-beides);
}

:root[data-thema] .ds-reiter__pfeil--links {
    left: 0;
}

:root[data-thema] .ds-reiter__pfeil--rechts {
    right: 0;
}

:root[data-thema] .ds-reiterleiste.hat-links .ds-reiter__pfeil--links,
:root[data-thema] .ds-reiterleiste.hat-rechts .ds-reiter__pfeil--rechts {
    opacity: 1;
    pointer-events: auto;
}

:root[data-thema] .ds-reiter__pfeil:hover,
:root[data-thema] .ds-reiter__pfeil:focus-visible {
    color: var(--k-text);
    outline: none;
}

:root[data-thema] .ds-reiterleiste.hat-links .ds-reiter {
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 62px);
    mask-image: linear-gradient(to right, transparent 0, #000 62px);
}

:root[data-thema] .ds-reiterleiste.hat-rechts .ds-reiter {
    -webkit-mask-image: linear-gradient(to left, transparent 0, #000 62px);
    mask-image: linear-gradient(to left, transparent 0, #000 62px);
}

:root[data-thema] .ds-reiterleiste.hat-links.hat-rechts .ds-reiter {
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 62px,
            #000 calc(100% - 62px), transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 62px,
            #000 calc(100% - 62px), transparent 100%);
}

:root[data-thema] .ds-reiter::-webkit-scrollbar {
    display: none;
}

:root[data-thema] .ds-reiter__knopf {
    position: relative;
    flex: 0 0 auto;
    padding: 0.62rem 1.05rem;
    border: 0;
    border-radius: var(--k-rund-klein);
    background: transparent;
    color: var(--k-text-still);
    font-family: inherit;
    font-size: 0.92rem;
    font-weight: 650;
    white-space: nowrap;
    cursor: pointer;
    transition: color var(--bew-ruhig) var(--bew-beides);
}

:root[data-thema] .ds-reiter__knopf:hover,
:root[data-thema] .ds-reiter__knopf:focus-visible {
    color: var(--k-text);
    outline: none;
}

:root[data-thema] .ds-reiter__knopf.ist-aktiv {
    background: var(--k-vertieft);
    color: var(--k-text);
}

:root[data-thema] .ds-reiter__knopf.ist-aktiv::after {
    content: "";
    position: absolute;
    left: 1.05rem;
    right: 1.05rem;
    bottom: 0.28rem;
    height: 2px;
    border-radius: 2px;
    background-image: var(--k-verlauf);
}

:root[data-thema] .ds-tafel {
    display: none;
}

:root[data-thema] .ds-tafel.ist-offen {
    display: block;
    animation: ds-tafel-kommt var(--bew-ruhig) var(--bew-beides) both;
}

@keyframes ds-tafel-kommt {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    :root[data-thema] .ds-tafel.ist-offen {
        animation: none;
    }
}

@media (max-width: 768px) {
    :root[data-thema] .ds-reiterleiste {
        margin-inline: -1.1rem;
        margin-block: -22px calc(2rem - 22px);
    }

    :root[data-thema] .ds-reiter {
        padding-inline: 1.1rem;
    }

    :root[data-thema] .ds-reiter__pfeil--links {
        left: 0.3rem;
    }

    :root[data-thema] .ds-reiter__pfeil--rechts {
        right: 0.3rem;
    }

    :root[data-thema] .ds-reiter__knopf {
        padding: 0.55rem 0.85rem;
        font-size: 0.87rem;
    }
}