/* ===================================================================
   DIE SEITE „HERUNTERLADEN UND HILFE"

   Die siebzehnte Seite im neuen Aussehen. Ein Hinweis, dass es noch
   nichts herunterzuladen gibt, zwei Wege zum Kontakt, vier Wege
   weiter, fünf häufige Fragen.

   ## Die Seite, auf der am meisten anklickbar ist

   Sechs Verweise im Inhalt — mehr als auf jeder anderen Seite außer
   „Alle Apps". Alle sechs sind Kästen, also bekommen alle sechs den
   Ring aus Punkten.

   Damit ist das hier die dritte Seite mit Ringen, und die Regel dahinter
   ist auf allen dreien dieselbe geblieben: **Was ein Ziel ist,
   antwortet auf Zeigen. Was eine Aussage ist, kommt an.**

   Die fünf Fragen sind der Sonderfall dazwischen. Man klickt sie an, sie
   führen aber nirgendwohin — sie klappen auf. Sie bekommen deshalb
   keinen Ring, sondern das, was Aufklappen sagt: Der Pfeil dreht sich.
   =================================================================== */

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

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

:root[data-thema] .sup-hero {
    position: relative;
    text-align: center;
    margin-bottom: 3.5rem;
}

:root[data-thema] .sup-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] .sup-hero h1 {
    font-family: 'Outfit', 'Inter', system-ui, sans-serif;
    font-size: clamp(1.9rem, 5.2vw, 2.9rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.2;
    margin-bottom: 1.1rem;
    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] .sup-karte > i.zeichen--zerfaellt::before,
:root[data-thema] .sup-weg > i.zeichen--zerfaellt::before,
:root[data-thema] .sup-hinweis > i.zeichen--zerfaellt::before {
    visibility: hidden;
}

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

:root[data-thema] .sup-unter {
    max-width: 680px;
    margin: 0 auto 1.8rem;
    color: var(--k-text-leise);
    font-size: 1.05rem;
    line-height: 1.85;
}

:root[data-thema] .sup-hinweis {
    position: relative;
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    max-width: 680px;
    margin: 0 auto;
    padding: 1.2rem 1.4rem;
    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;
    line-height: 1.78;
    text-align: left;
}

:root[data-thema] .sup-hinweis > i {
    flex-shrink: 0;
    margin-top: 0.3rem;
}

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

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

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

:root[data-thema] .sup-block__titel {
    font-family: 'Outfit', 'Inter', system-ui, sans-serif;
    color: var(--k-text);
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin-bottom: 0.8rem;
}

:root[data-thema] .sup-block__unter {
    max-width: 640px;
    margin-bottom: 1.6rem;
    color: var(--k-text-leise);
    font-size: 1rem;
    line-height: 1.8;
}

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

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