/* ===================================================================
   DIE SEITE „AERONA SPACE IM STORE"

   Die achtundzwanzigste Seite im neuen Aussehen — und die kleinste:
   eine einzige Karte in der Bildmitte, die sagt, dass es hier noch
   nichts gibt.

   ## Eine Seite, die eine Absage ist

   Das ist ihre ganze Aufgabe. Der Knopf „Vorschau im Microsoft Store"
   ist abgeschaltet, weil die Anmeldung noch läuft; darunter stehen
   drei Versprechen für später und ein Verweis auf den Zeitplan.

   Sie war trotzdem die lauteste Seite der Webseite: ein blauer
   Schein um das Zeichen, zwei blaue Nebelflecken im Hintergrund, ein
   blaues Schild mit einem leuchtenden Punkt darin, drei blaue Mulden
   und ein Knopf mit Vollverlauf — für eine Nachricht, die im Kern
   „noch nicht" lautet.

   ## Und noch eine Endlosbewegung

   Das Zeichen 📦 trug `pulse-slow`: alle vier Sekunden größer und
   kleiner, `infinite`, ab dem Laden. Das ist die zweite ungefragte
   Endlosbewegung, die beim Umbau auffällt (die erste war der grüne
   Punkt auf „Neu in Aerona").

   Nachgezählt waren noch zwei übrig, beide auf Seiten, die damals noch
   nicht umgebaut waren: `error-pages.css` und `office-buehne.css`.
   Beide sind inzwischen dran gewesen.

   Eine dritte lief auf DIESER Seite, ohne dass ein Blatt von ihr
   etwas wusste: Die zwei Nebelflecken wandern seit jeher, weil
   `gebaut.css` das `.blob` mitgibt. Sie ist unten abgestellt.
   =================================================================== */

:root[data-thema] .store-gate-hero {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;

    padding-inline: 2rem;
    padding-bottom: 4rem;
    text-align: center;
    overflow: hidden;
}


:root[data-thema] .store-gate-blobs .blob {
    position: absolute;
    z-index: 0;
    width: 60vw;
    height: 60vw;
    background: radial-gradient(circle,
            var(--k-schein-leise) 0%, transparent 70%);
    filter: blur(80px);
    pointer-events: none;


    animation: none;
}

:root[data-thema] .blob-top {
    top: -20%;
    right: -10%;
}

:root[data-thema] .blob-bottom {
    bottom: -20%;
    left: -10%;
}


:root[data-thema] .store-card {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 800px;
    padding: 4rem 2rem;
    border-width: 1px;
    border-style: solid;
    border-radius: 32px;
    background: var(--k-menue);
    backdrop-filter: var(--k-glas-filter);
    -webkit-backdrop-filter: var(--k-glas-filter);
}


:root[data-thema] .store-icon-large {
    margin-bottom: 2rem;
    font-size: 5rem;
    line-height: 1;
}


:root[data-thema] .store-icon-large.pulse-slow {
    animation: none;
}


:root[data-thema] .store-title {
    margin-bottom: 1.5rem;
    font-family: 'Aerona Sans', system-ui, sans-serif;
    font-size: 3rem;
    font-weight: 800;
    letter-spacing: -0.025em;
    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] .store-title.zeichen--zerfaellt {
    visibility: hidden;
}


:root[data-thema] .store-unter {
    margin-bottom: 2rem;
    color: var(--k-text-leise);
}


:root[data-thema] .store-features-list {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 2rem;
    margin-top: 3rem;
}

:root[data-thema] .store-feat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    max-width: 200px;
}

:root[data-thema] .store-feat-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: var(--k-rund-mittel);
    background: var(--k-vertieft);
    font-size: 1.25rem;
}

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

:root[data-thema] .store-feat-text {
    color: var(--k-text-leise);
    font-size: 0.9rem;
    font-weight: 500;
    line-height: 1.4;
}


:root[data-thema] .store-help-text {
    position: relative;
    margin-top: 2.5rem;
    color: var(--k-text-still);
    font-size: 0.85rem;
}


:root[data-thema] .store-help-text .store-pixel,
:root[data-thema] .store-card .fenster__zeichen-pixel {
    position: absolute;
    pointer-events: none;
    max-width: none;
    max-height: none;
}


:root[data-thema] .store-help-text .store-pixel {
    left: 0;
    top: 0;
}



@media (max-width: 768px) {
    :root[data-thema] .store-title {
        font-size: 2.25rem;
    }

    :root[data-thema] .store-card {
        padding: 3rem 1.5rem;
    }

    :root[data-thema] .store-features-list {
        gap: 1.5rem;
    }
}