/* ===================================================================
   DIE SEITE „WIE ALLES ZUSAMMENHÄNGT"

   Die vierte Seite im neuen Aussehen. Vier Schichten übereinander, vier
   Gruppen mit fünfzehn Kacheln, drei Gründe, drei Schritte.

   ## Eine Seite ohne einen einzigen Ring

   Nachgesehen: Auf dieser Seite ist **nichts anklickbar** — jede
   Schicht, jede Kachel, jeder Schritt ist ein `<div>`. Es gibt keinen
   einzigen Verweis im Inhalt.

   Deshalb bekommt hier auch nichts einen Ring aus Punkten. Ein Ring
   sagt „hier geht es weiter"; wo es nicht weitergeht, ist er eine
   Lüge, die gut aussieht. Die Seite antwortet stattdessen dort, wo sie
   etwas zu sagen hat: Die Überschriften kommen an, die drei Zeichen
   unter „Warum das so gebaut ist" bauen sich auf, wenn man dort
   ankommt.

   Das ist derselbe Gedanke wie bei den Bedingungen im Erklärfenster —
   eine Aussage baut sich auf, ein Ziel antwortet auf Zeigen.

   ## Die Zeichen der vier Schichten

   Emojis, wie auf „Das ganze Werk". Sie bekommen die Mulde und bleiben
   sonst, wie sie sind; der Grund steht dort ausführlich.
   =================================================================== */

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

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

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

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

:root[data-thema] .eco-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] .eco-section-title {
    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);
    text-align: center;
    margin: 3.5rem 0 1.4rem;
}

:root[data-thema] .eco-stack {
    display: grid;
    gap: 0.5rem;
}

:root[data-thema] .eco-link {
    text-align: center;
    color: var(--k-text-still);
    font-size: 0.82rem;
    padding: 0.3rem 0;
}

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

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

:root[data-thema] .eco-group__head h3 {
    font-family: 'Outfit', 'Inter', system-ui, sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: -0.015em;
    color: var(--k-text);
}

:root[data-thema] .eco-group__head span {
    color: var(--k-text-still);
    font-size: 0.84rem;
}

:root[data-thema] .eco-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] .eco-outro strong {
    color: var(--k-text);
}

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