/* ===================================================================
   DIE SEITE „HIER ENTSTEHT EIN NEUER GUIDE"

   Die dreißigste Seite im neuen Aussehen. Ein Zeichen, ein Absatz, ein
   Hinweis und drei Wege — mehr steht nicht darauf.

   ## Die zweite Absage der Webseite

   Die erste war der Store („noch nicht"). Diese hier ist anders: Der
   alte Guide beschrieb die Aerona Main App, und die wird es nicht
   geben. Es ist keine Verzögerung, es ist eine zurückgenommene
   Entscheidung.

   Und dann steht darunter der Satz, der diese Seite von jeder anderen
   Absage im Netz unterscheidet:

       „Der alte Guide ist NICHT verschwunden. Er liegt vollständig im
        Archiv … bei Aerona wird nichts von der Webseite genommen, nur
        weil es das Produkt nicht mehr gibt."

   Das ist der wichtigste Satz der Seite. Er stand in einem violetten
   Kasten — der einzigen Stelle der Webseite mit `#8b5cf6` — und wirkte
   damit wie ein Werbebanner für die eigene Anständigkeit.

   ## Die sechste eigene Seitenfarbe, die geht

   Violett kam von nirgendwo. Es ist nicht `--k-verlauf-b` (das ist
   `#a855f7`), es ist ein Nachbarton — nah genug, um wie ein Versehen
   zu wirken, und weit genug, um daneben falsch auszusehen. Genau der
   Fall wie das Himmelblau auf „Was nach außen geht".

   ## Was einen Ring bekommt

   Alle drei Wege. Es sind Kästen und sie führen weiter — der erste ins
   Archiv, die beiden anderen zu den Apps und zur Hilfe.
   =================================================================== */

:root[data-thema] .gd-empty {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 70vh;

    padding-inline: 1.5rem;
    padding-bottom: 6rem;
}

:root[data-thema] .gd-empty__inner {
    position: relative;
    max-width: 640px;
    text-align: center;
}

:root[data-thema] .gd-empty__icon {
    margin-bottom: 1.6rem;
    font-size: 3.2rem;
    line-height: 1;
    opacity: 0.85;
}

:root[data-thema] .gd-empty h1 {
    margin-bottom: 1.2rem;
    font-family: 'Outfit', 'Inter', system-ui, sans-serif;
    font-size: clamp(1.9rem, 5vw, 2.7rem);
    font-weight: 800;
    letter-spacing: -0.025em;
    line-height: 1.2;
    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] .gd-empty h1.zeichen--zerfaellt {
    visibility: hidden;
}

:root[data-thema] .gd-empty p {
    margin-bottom: 2rem;
    color: var(--k-text-leise);
    font-size: 1.05rem;
    line-height: 1.85;
}

:root[data-thema] .gd-empty p strong {
    color: var(--k-text);
}

:root[data-thema] .gd-empty__note {
    position: relative;
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    padding: 1.3rem 1.5rem;
    margin-bottom: 2.5rem;
    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.8;
    text-align: left;
    overflow: hidden;
}

:root[data-thema] .gd-empty__note::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%);
    pointer-events: none;
}

:root[data-thema] .gd-empty__note > i {
    flex-shrink: 0;
    margin-top: 0.25rem;
    font-size: 1.05rem;
}

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

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

:root[data-thema] .gd-empty__links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    justify-content: center;
}

:root[data-thema] .gd-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.7rem 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.93rem;
    font-weight: 600;
    text-decoration: none;
    transition: color var(--bew-schnell) var(--bew-beides),
        transform var(--bew-ruhig) var(--bew-feder);
}

:root[data-thema] .gd-btn:hover,
:root[data-thema] .gd-btn:focus-visible {
    transform: translateY(-2px);
    color: var(--k-text);
    outline: none;
}

:root[data-thema] .gd-btn > i {
    color: var(--k-text-still);
}

:root[data-thema] .gd-btn--primary {
    color: var(--k-text);
}

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

:root[data-thema] .gd-btn > i.zeichen--zerfaellt::before {
    visibility: hidden;
}

:root[data-thema] .gd-empty .fenster__ring,
:root[data-thema] .gd-empty .fenster__zeichen-pixel {
    position: absolute;
    pointer-events: none;
    max-width: none;
    max-height: none;
}

@media (max-width: 768px) {
    :root[data-thema] .gd-empty {
        min-height: 60vh;
        padding-inline: 1.1rem;
        padding-bottom: 4rem;
    }

    :root[data-thema] .gd-empty__links {
        flex-direction: column;
    }

    :root[data-thema] .gd-btn {
        justify-content: center;
    }
}