/* ===================================================================
   DIE FUNKTIONEN-SEITE

   Zehn App-Kacheln, vier Punkte darunter, vier Dinge, die es bewusst
   nicht gibt, drei Plattformen. Das alte Stilblatt hatte einundzwanzig
   feste Farben — von `#94a3b8` für die Schrift bis `#fbbf24` für den
   Hinweis. Keine wusste, ob Tag oder Nacht ist.

   ## Was hier NICHT steht

   Fast alles. Die Bauteile dieser Seite sind Zwillinge von schon
   Gebautem, und sie stehen deshalb in denselben Listen:

   | hier            | ist dasselbe wie      | steht in        |
   |---|---|---|
   | `.fn-app`       | die Bausteinkachel    | `glas.css`      |
   | `.fn-teil`      | die Festlegung        | `glas.css`      |
   | `.fn-nie__punkt`| die Festlegung        | `glas.css`      |
   | `.fn-plattform` | die Plattformkachel   | `glas.css`      |
   | `.fn-notiz`     | eine Mulde            | `glas.css`      |
   | `.fn-block__titel` | die Abschnittsüberschrift | `schrift.css` |
   | `.fn-weiter`    | der Weg weiter        | `js/funktionen-leben.js` |

   Dass sie andere Namen tragen, ist keine andere Sache — die Seite ist
   nur früher gebaut worden. Umbenennen hieße das Markup von vier
   Abschnitten anfassen; sie in die Listen einzutragen kostet sechs
   Zeilen und sagt dasselbe.

   Hier stehen nur die **Maße**: wie groß, wie viel Abstand, wie viele
   Spalten.
   =================================================================== */

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

    padding-inline: 1.5rem;
}

:root[data-thema] .fn-hero {
    padding: 3.5rem 0 3rem;
    text-align: center;
}

:root[data-thema] .fn-label {
    color: var(--k-text-still);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin-bottom: 0.9rem;
}

:root[data-thema] .fn-hero h1 {
    position: relative;
    color: var(--k-text);
    font-size: clamp(2rem, 5.5vw, 3.2rem);
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -0.025em;
    margin-bottom: 1.1rem;
}

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

:root[data-thema] .fn-notiz {

    position: relative;
    display: flex;
    align-items: center;
    gap: 1rem;
    max-width: 720px;
    margin: 0 auto;
    padding: 1rem 1.3rem;
    border-width: 1px;
    border-style: solid;
    border-radius: var(--k-rund-mittel);
    background: var(--k-vertieft);
    text-align: left;
}

:root[data-thema] .fn-notiz__aeri {
    flex: 0 0 auto;
    display: block;
    width: 48px;
}

:root[data-thema] .fn-hinweis {
    color: var(--k-text-leise);
    font-size: 0.94rem;
    line-height: 1.7;
}

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

:root[data-thema] .fn-block {
    position: relative;
    padding: 3.5rem 0;
}

:root[data-thema] .fn-block__titel {
    color: var(--k-text);
    font-size: clamp(1.5rem, 3.6vw, 2.1rem);
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.02em;
    margin-bottom: 0.8rem;
}

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

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

:root[data-thema] .fn-block > .fenster__zeichen-pixel,
:root[data-thema] .fn-plattform > .fenster__zeichen-pixel,
:root[data-thema] .fn-hero > .fenster__zeichen-pixel {
    position: absolute;
    pointer-events: none;
    max-width: none;
    max-height: none;
    z-index: 1;
}

:root[data-thema] .fn-block .fn-pixel {
    position: absolute;
    left: 0;
    top: 0;
    pointer-events: none;
    max-width: none;
    max-height: none;
}