/* ===================================================================
   DIE SEITE „ALLE APPS"

   Die sechste Seite im neuen Aussehen. Neunzehn Kacheln in fünf
   Gruppen, drei Wege zur Auslieferung, ein Kasten mit der Herkunft.

   ## Die erste Seite seit „Das ganze Werk" mit Ringen

   Hier ist wieder etwas anklickbar: Alle neunzehn Kacheln führen auf
   die Seite der jeweiligen App. Sie bekommen deshalb den Ring aus
   Punkten — anders als auf „Wie alles zusammenhängt" und „Warum
   Aerona", wo nichts weiterführt und deshalb auch nichts einen Ring
   bekommt.

   Das ist die Regel, an der sich das entscheidet, und sie steht
   inzwischen auf sechs Seiten dieselbe: **Was ein Ziel ist, antwortet
   auf Zeigen. Was eine Aussage ist, kommt an.**

   Die drei Wege dagegen sind Aussagen — sie sagen, woher es die Apps
   je nach System gibt. Kein Ring.
   =================================================================== */

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

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

:root[data-thema] .ap-hero {
    position: relative;
    padding: 3.5rem 0 2.5rem;
    text-align: center;
}

:root[data-thema] .ap-hero h1 {
    display: flex;
    flex-direction: column;
    gap: 0.1em;
    font-size: clamp(2.1rem, 6vw, 3.6rem);
    line-height: 1.1;
    color: var(--k-text);
    margin-bottom: 1.4rem;
}

:root[data-thema] .ap-accent {
    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] .ap-accent.zeichen--zerfaellt,
:root[data-thema] .ap-group__head h2.zeichen--zerfaellt,
:root[data-thema] .ap-source__head h2.zeichen--zerfaellt {
    visibility: hidden;
}

:root[data-thema] .ap-hero p {
    max-width: 680px;
    margin: 0 auto;
    color: var(--k-text-leise);
    font-size: clamp(1rem, 2.2vw, 1.08rem);
    line-height: 1.85;
}

:root[data-thema] .ap-group {
    position: relative;
    margin-bottom: 2.6rem;
}

:root[data-thema] .ap-group__head {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-bottom: 1rem;
}

:root[data-thema] .ap-group__head h2 {
    font-family: 'Outfit', 'Inter', system-ui, sans-serif;
    font-size: clamp(1.3rem, 2.8vw, 1.7rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--k-text);
}

:root[data-thema] .ap-group__head p,
:root[data-thema] .ap-group__head span {
    color: var(--k-text-still);
    font-size: 0.86rem;
}

:root[data-thema] .ap-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 0.9rem;
}

:root[data-thema] .ap-source {
    position: relative;
    margin-top: 3rem;
}

:root[data-thema] .ap-source__head {
    text-align: center;
    margin-bottom: 1.4rem;
}

:root[data-thema] .ap-source__head h2 {
    font-family: 'Outfit', 'Inter', system-ui, sans-serif;
    font-size: clamp(1.4rem, 3vw, 1.9rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--k-text);
    margin-bottom: 0.5rem;
}

:root[data-thema] .ap-source__head p {
    color: var(--k-text-still);
    font-size: 0.92rem;
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.7;
}

:root[data-thema] .ap-source__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 0.9rem;
}

:root[data-thema] .ap-source__note {
    max-width: 640px;
    margin: 1.4rem auto 0;
    text-align: center;
    color: var(--k-text-still);
    font-size: 0.86rem;
    line-height: 1.7;
}

:root[data-thema] .ap-outro {
    max-width: 640px;
    margin: 3rem auto 0;
    text-align: center;
    color: var(--k-text-leise);
    font-size: 0.98rem;
    line-height: 1.8;
}

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

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