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

   Die zweiunddreißigste Seite im neuen Aussehen — und die größte, die
   noch offen war: fünf Stilblätter, knapp tausend Zeilen, ein
   nachgebautes Programmfenster, zwanzig Werkzeuge, ein Marktvergleich
   mit Balken, acht Hürden.

   ## Die fünfte eigene Seitenfarbe

   Violett (`#a78bfa`), und zwar durchgehend: Marke, Überschrift,
   Kartenrahmen, Symbolmulden, Balken, Legende, Schlusskasten. Dazu
   Bernstein für die Warnung, Rosé für die Hürden, Grün/Rot/Gelb für
   die Marktbewertung — die Seite hatte am Ende SECHS Farbbedeutungen
   nebeneinander.

   Violett war hier näher an einer Begründung als auf den anderen
   Seiten: Es ist die Farbe, die Microsoft Office und LibreOffice
   beide NICHT tragen, also ein Gegenzeichen. Nur steht das nirgends,
   und niemand liest eine Farbe als Gegenzeichen.

   ## Und hier lief die letzte ungefragte Endlosbewegung

   Zwei sogar. Im nachgebauten Programmfenster blinkte ein Textcursor
   (`of-blinken`, 1,15 Sekunden), und zwei Elemente schwebten
   (`of-schweben`, 5,5 Sekunden) — beide `infinite`, ab dem Laden.

   Der blinkende Cursor ist der interessantere Fall, denn er ist
   *richtig gedacht*: Ein Cursor blinkt nun mal. Nur ist dieses Fenster
   kein Programm, sondern ein Bild davon. Ein Cursor, der darin blinkt,
   behauptet, man könne dort tippen — und das kann man nicht. Ein Bild
   soll aussehen wie ein Bild.

   Damit sind alle vier weg, die von allein liefen. Was noch mit
   `infinite` läuft, antwortet auf Zeigen: der Hammer im Statusband,
   der Ring um einen Kopfknopf, der Rahmen um ein offenes Klappmenü.

   ## Was einen Ring bekommt

   Der eine Verweis am Schluss. Mehr führt von dieser Seite nicht weg.
   =================================================================== */

:root[data-thema] .of-main {
    position: relative;
    max-width: 1180px;
    margin: 0 auto;

    padding-inline: 1.5rem;
    padding-bottom: 6rem;
    overflow-x: clip;
}

:root[data-thema] .of-hero {
    position: relative;
    margin-bottom: 4rem;
    padding-bottom: 3rem;
    border-bottom: 1px solid var(--k-rand-seite);
}

:root[data-thema] .of-hero::before {
    content: "";
    position: absolute;
    top: -90px;
    left: 0;
    z-index: -1;
    width: min(460px, 100%);
    height: 300px;
    background: radial-gradient(circle at 30% 40%,
            var(--k-schein-leise) 0%, transparent 68%);
    pointer-events: none;
}

:root[data-thema] .of-label {
    display: inline-block;
    padding: 4px 11px;
    margin-bottom: 1.4rem;
    border-width: 1px;
    border-style: solid;
    border-radius: var(--k-rund-klein);
    background: var(--k-vertieft);
    color: var(--k-text-still);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

:root[data-thema] .of-hero h1 {
    margin: 0 0 1.3rem;
    font-family: 'Outfit', 'Inter', system-ui, sans-serif;
    font-size: clamp(2.1rem, 5vw, 3.4rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.12;
    background-image: linear-gradient(var(--k-winkel),
            var(--k-verlauf-a) 0%, var(--k-verlauf-b) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

:root[data-thema] .of-hero h1.zeichen--zerfaellt,
:root[data-thema] .of-block__titel.zeichen--zerfaellt {
    visibility: hidden;
}

:root[data-thema] .of-unter {
    max-width: 66ch;
    margin: 0 0 2rem;
    color: var(--k-text-leise);
    font-size: 1.08rem;
    line-height: 1.75;
}

:root[data-thema] .of-warnung {
    position: relative;
    display: flex;
    gap: 0.9rem;
    align-items: flex-start;
    max-width: 74ch;
    padding: 1.1rem 1.3rem;
    border-width: 1px;
    border-style: solid;
    border-radius: var(--k-rund-mittel);
    background: var(--k-vertieft);
    color: var(--k-text-leise);
    font-size: 0.95rem;
    line-height: 1.65;
}

:root[data-thema] .of-warnung > i {
    flex-shrink: 0;
    margin-top: 0.25rem;
}

:root[data-thema] .of-warnung > i::before {
    background-image: var(--k-verlauf);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

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

:root[data-thema] .of-block {
    position: relative;
    margin-bottom: 4.5rem;
}

:root[data-thema] .of-block__titel {
    margin: 0 0 0.7rem;
    font-family: 'Outfit', 'Inter', system-ui, sans-serif;
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 800;
    letter-spacing: -0.015em;
    color: var(--k-text);
}

:root[data-thema] .of-block__unter {
    max-width: 68ch;
    margin: 0 0 2.2rem;
    color: var(--k-text-leise);
    font-size: 1rem;
    line-height: 1.7;
}

:root[data-thema] .of-schluss {
    position: relative;
    max-width: 74ch;
    padding: 1.6rem 1.7rem;
    border-width: 1px;
    border-style: solid;
    border-radius: var(--k-rund-mittel);
    background: var(--k-vertieft);
    color: var(--k-text-leise);
    font-size: 0.98rem;
    line-height: 1.75;
}

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

:root[data-thema] .of-weiter {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1.4rem;
    color: var(--k-text-leise);
    font-size: 0.92rem;
    font-weight: 650;
    text-decoration: none;
    transition: gap var(--bew-ruhig) var(--bew-feder),
        color var(--bew-schnell) var(--bew-beides);
}

:root[data-thema] .of-weiter:hover,
:root[data-thema] .of-weiter:focus-visible {
    gap: 0.85rem;
    color: var(--k-text);
    outline: none;
}

:root[data-thema] .of-block .of-pixel,
:root[data-thema] .of-main .fenster__zeichen-pixel {
    position: absolute;
    pointer-events: none;
    max-width: none;
    max-height: none;
}

:root[data-thema] .of-block .of-pixel {
    left: 0;
    top: 0;
}

@media (max-width: 640px) {
    :root[data-thema] .of-main {
        padding-inline: 1.1rem;
        padding-bottom: 4rem;
    }

    :root[data-thema] .of-block {
        margin-bottom: 3.5rem;
    }
}