/* ===================================================================
   DIE STARTSEITE — DIE FÜNF TEXTABSCHNITTE

   Zwischen den Bausteinen liegen fünf Abschnitte mit demselben Aufbau:
   Überschrift, Unterzeile, Inhalt, ein Weg weiter.

   Hier steht **nur dieses Gerüst**. Was in den Abschnitten steht — die
   drei Karten unter „Und das hier funktioniert nicht", die drei
   Festlegungen, die drei Wege am Schluss — liegt in
   `start-abschnitte-teile.css`.

   Geteilt wurde, als die Datei die dreihundert Zeilen erreichte, an der
   Naht: **wie ein Abschnitt gebaut ist** gegen **was darin steht**
   (Regel 03). Dieselbe Naht hatte auch das alte Stilblatt — dort hieß
   der zweite Teil `startseite-teile.css` —, und zwar aus demselben
   Grund. Das ist ein gutes Zeichen: Wenn zwei unabhängige Anläufe an
   derselben Stelle brechen, liegt dort wirklich eine Fuge.
   =================================================================== */

:root[data-thema] .abs {

    position: relative;
    max-width: 1100px;
    margin: 0 auto;
    padding: 4.5rem 1.5rem;
}

:root[data-thema] .abs > .abs-pixel {
    position: absolute;
    left: 0;
    top: 0;
    pointer-events: none;
    max-width: none;
    max-height: none;
    z-index: 1;
}

:root[data-thema] .abs__titel.zeichen--zerfaellt,
:root[data-thema] .section-title.zeichen--zerfaellt {
    visibility: hidden;
}

:root[data-thema] .abs > .fenster__zeichen-pixel,
:root[data-thema] .bento-section > .fenster__zeichen-pixel {
    position: absolute;
    pointer-events: none;
    max-width: none;
    max-height: none;
    z-index: 1;
}

:root[data-thema] .abs__titel {
    color: var(--k-text);
    font-size: clamp(1.6rem, 4vw, 2.3rem);
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -0.01em;
    margin-bottom: 0.9rem;
    max-width: 860px;
}

:root[data-thema] .abs__aeri {
    display: block;
    width: 64px;
    margin: 0.2rem 0 0.9rem;
}

:root[data-thema] .abs__unter {
    color: var(--k-text-leise);
    font-size: 1.02rem;
    line-height: 1.85;
    max-width: 700px;
    margin-bottom: 2.2rem;
}

:root[data-thema] .abs__fliess {
    max-width: 680px;
}

:root[data-thema] .abs__fliess p {
    color: var(--k-text-leise);
    font-size: 1rem;
    line-height: 1.95;
    margin-bottom: 1.2rem;
}

:root[data-thema] .abs__weiter {
    position: relative;
    display: inline-block;
    margin-top: 2rem;
    padding-bottom: 3px;
    color: var(--k-text-leise);
    font-size: 0.92rem;
    font-weight: 700;
    text-decoration: none;
    border-bottom: 0;
    transition: color var(--bew-schnell) var(--bew-beides);
}

:root[data-thema] .abs__weiter::after {
    content: " →";
}

:root[data-thema] .abs__weiter:hover,
:root[data-thema] .abs__weiter:focus-visible {
    color: var(--k-text);
    outline: none;
}

@media (max-width: 760px) {

    :root[data-thema] .abs {
        padding: 3rem 1.1rem;
    }
}