/* ===================================================================
   „EIN OFFICE, DAS AUF DEM GERÄT BLEIBT" — DAS NACHGEBAUTE FENSTER

   Ein Programmfenster aus reinem CSS: Titelleiste mit drei Punkten,
   Werkzeugleiste, ein Blatt mit angedeuteten Textzeilen, zwei
   Schweber daneben. Dazu die drei Zahlen darunter.

   ## Ein Bild soll aussehen wie ein Bild

   Hier liefen die letzten beiden Endlosbewegungen der Webseite:

   · `of-blinken` — ein Textcursor, 1,15 Sekunden, `infinite`
   · `of-schweben` — zwei Schweber, 5,5 Sekunden, `infinite`

   Der Cursor ist der interessantere Fall, weil er *richtig gedacht*
   ist: 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.

   Der Cursor bleibt stehen, sichtbar, an seinem Platz. Er sagt damit
   immer noch „hier wäre der Schreibpunkt", nur behauptet er nicht
   mehr, das Fenster sei an.

   ## Was bleibt

   Die Drehung. Das Fenster steht sieben Grad schräg im Raum und
   richtet sich beim Zeigen auf drei Grad auf. Das ist eine Antwort auf
   Zeigen und damit erlaubt — es ist sogar die einzige Stelle der
   Webseite, an der etwas eine Tiefe im Raum hat.
   =================================================================== */

:root[data-thema] .of-buehne {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: 3rem;
    align-items: center;
}

:root[data-thema] .of-fenster {
    position: relative;
    border-width: 1px;
    border-style: solid;
    border-radius: var(--k-rund-mittel);
    background: var(--k-vertieft-tief);
    overflow: hidden;
    transform: perspective(1400px) rotateY(-7deg) rotateX(2deg);
    transition: transform var(--bew-ruhig) var(--bew-feder);
}

:root[data-thema] .of-fenster:hover {
    transform: perspective(1400px) rotateY(-3deg) rotateX(1deg);
}

:root[data-thema] .of-fenster__leiste {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.6rem 0.9rem;
    background: var(--k-vertieft);
    border-bottom: 1px solid var(--k-rand-dicke);
}

:root[data-thema] .of-punkt3 {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--k-rand-seite);
}

:root[data-thema] .of-fenster__name {
    margin-left: 0.6rem;
    color: var(--k-text-still);
    font-size: 0.76rem;
    font-weight: 600;
}

:root[data-thema] .of-fenster__werkzeug {
    display: flex;
    gap: 0.35rem;
    padding: 0.55rem 0.9rem;
    background: var(--k-vertieft);
    border-bottom: 1px solid var(--k-rand-dicke);
}

:root[data-thema] .of-knopf {
    width: 22px;
    height: 22px;
    border-radius: 5px;
    background: var(--k-rand-dicke);
}

:root[data-thema] .of-knopf--breit {
    width: 46px;
}

:root[data-thema] .of-knopf--aktiv {
    background-image: var(--k-verlauf);
}

:root[data-thema] .of-blatt {
    padding: 1.5rem 1.4rem 1.7rem;
}

:root[data-thema] .of-zeile {
    height: 9px;
    margin-bottom: 0.7rem;
    border-radius: 4px;
    background: var(--k-rand-dicke);
}

:root[data-thema] .of-zeile--titel {
    height: 15px;
    width: 62%;
    margin-bottom: 1.1rem;
    background-image: var(--k-verlauf);
    opacity: 0.55;
}

:root[data-thema] .of-zeile--kurz {
    width: 78%;
}

:root[data-thema] .of-zeile--kuerzer {
    width: 45%;
}

:root[data-thema] .of-strich {
    display: inline-block;
    width: 2px;
    height: 13px;
    vertical-align: middle;
    background-image: var(--k-verlauf);
    animation: none;
}

:root[data-thema] .of-schweber {
    box-shadow: var(--k-glas-tiefe);
    border-color: var(--k-glas-kante);
    position: absolute;
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.5rem 0.75rem;
    border-width: 1px;
    border-style: solid;
    border-radius: var(--k-rund-klein);
    background: var(--k-menue);
    backdrop-filter: blur(12px) saturate(1.45);
    -webkit-backdrop-filter: blur(12px) saturate(1.45);
    color: var(--k-text-leise);
    font-size: 0.76rem;
    font-weight: 650;
    animation: none;
}

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

:root[data-thema] .of-schweber--eins {
    right: -14px;
    top: 22%;
}

:root[data-thema] .of-schweber--zwei {
    left: -22px;
    bottom: 16%;
}

:root[data-thema] .of-zahlen {
    display: flex;
    flex-wrap: wrap;
    gap: 2.4rem;
    margin-top: 2.6rem;
    padding-top: 1.8rem;
    border-top: 1px solid var(--k-rand-dicke);
}

:root[data-thema] .of-zahl__wert {
    font-family: 'Outfit', 'Inter', system-ui, sans-serif;
    font-size: 1.9rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    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-zahl__text {
    margin-top: 0.4rem;
    color: var(--k-text-still);
    font-size: 0.82rem;
    line-height: 1.45;
}

@media (max-width: 900px) {
    :root[data-thema] .of-buehne {
        grid-template-columns: 1fr;
        gap: 2.4rem;
    }

    :root[data-thema] .of-fenster,
    :root[data-thema] .of-fenster:hover {
        max-width: 460px;
        transform: none;
    }

    :root[data-thema] .of-schweber--eins {
        right: 6px;
    }

    :root[data-thema] .of-schweber--zwei {
        left: 6px;
    }
}

@media (max-width: 560px) {
    :root[data-thema] .of-zahlen {
        gap: 1.4rem 2rem;
    }

    :root[data-thema] .of-zahl__wert {
        font-size: 1.55rem;
    }
}