/* ===================================================================
   DREI SEITEN ÜBER GELD: PREISE, WERBUNG, UNTERNEHMEN

   Die Seiten vierzehn, fünfzehn und sechzehn im neuen Aussehen. Sie
   teilen sich seit jeher ihren Rahmen — Einstieg, Warnhinweis,
   Abschnitte, die Gegenüberstellung „kostenlos gegen Abo" —, und sie
   behalten ihn.

   · `preise.html`      — drei Stufen und wo die Grenze verläuft
   · `werbung.html`     — vier Wege, drei davon verworfen
   · `unternehmen.html` — die große Frage und was offen ist

   ## Was diese drei besonders macht

   Es gibt hier **nichts zu kaufen**. Kein Knopf, keine Stufe, die
   hervorsticht, keine Empfehlung. Das stand schon im alten Blatt als
   Vorsatz — „bewusst ohne Kauf-Gestaltung" —, war aber nur halb
   eingelöst: Die kostenlose Stufe war grün gerahmt, die große violett.
   Das IST eine Empfehlung, nur eine unausgesprochene.

   Jetzt tragen alle drei Stufen dieselbe Scheibe. Was sie
   unterscheidet, ist der Preis, der darauf steht — und der ist ohnehin
   das Lauteste auf der Karte.
   =================================================================== */

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

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

:root[data-thema] .pr-hero {
    position: relative;
    margin-bottom: 3.5rem;
    padding-bottom: 2.5rem;
    border-bottom: 1px solid var(--k-rand-seite);
}

:root[data-thema] .pr-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] .pr-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] .pr-hero h1.zeichen--zerfaellt,
:root[data-thema] .pr-block__titel.zeichen--zerfaellt {
    visibility: hidden;
}

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

:root[data-thema] .pr-warnung {
    position: relative;
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    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;
}

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

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

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

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

:root[data-thema] .pr-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: 1.4rem;
}

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

:root[data-thema] .pr-seite {
    position: relative;
    padding: 1.6rem 1.7rem;
    border-width: 1px;
    border-style: solid;
    border-radius: var(--k-rund-gross);
    background: var(--k-vertieft);
    min-width: 0;
}

:root[data-thema] .pr-seite h3 {
    margin-bottom: 1rem;
    color: var(--k-text);
    font-size: 1rem;
    font-weight: 700;
}

:root[data-thema] .pr-seite ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

:root[data-thema] .pr-seite li {
    position: relative;
    padding-left: 1.2rem;
    margin-bottom: 0.6rem;
    color: var(--k-text-leise);
    font-size: 0.9rem;
    line-height: 1.7;
}

:root[data-thema] .pr-seite li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.72em;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--k-text-still);
}

:root[data-thema] .pr-satz {
    position: relative;
    margin-top: 1.2rem;
    padding: 1.3rem 1.5rem;
    border-width: 1px;
    border-style: solid;
    border-radius: var(--k-rund-mittel);
    background: var(--k-vertieft);
    color: var(--k-text-leise);
    font-size: 0.95rem;
    line-height: 1.8;
}

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

:root[data-thema] .pr-werbung,
:root[data-thema] .pr-firma,
:root[data-thema] .erk-antwort,
:root[data-thema] .erk-offen {
    max-width: 720px;
}

:root[data-thema] .pr-werbung p,
:root[data-thema] .pr-firma p,
:root[data-thema] .erk-antwort p,
:root[data-thema] .erk-offen p {
    color: var(--k-text-leise);
    font-size: 0.98rem;
    line-height: 1.9;
    margin-bottom: 1.1rem;
}

:root[data-thema] .pr-main .abs__weiter {
    position: relative;
    color: var(--k-text);
    border-bottom: 1px solid var(--k-rand-seite);
}

:root[data-thema] .pr-block.hat-pixelstrich .abs__weiter {
    border-bottom-color: transparent;
}

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

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

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

    :root[data-thema] .pr-grenze {
        grid-template-columns: 1fr;
    }
}