/* Startseite: vollständiges Motiv direkt unter der Navigation, die
   Überschrift mit dem gemeinsamen H2-Farbtoken, 2ch unter der bisherigen Lage. */
body[data-slug=""] .lesebereich {
    padding-top: 0;
}

body[data-slug=""] .titelbild {
    --titel-schleier: 99%;
}

/* Der helle bzw. dunkle Theme-Untergrund trägt die Schrift auch über
   wechselnden Wolkenfarben. Der untere Bildteil bleibt frei. */
body[data-slug=""] .titelbild::after {
    inset: 0;
    height: auto;
    background: linear-gradient(to bottom,
        color-mix(in srgb, var(--color-bg) var(--titel-schleier), transparent) 0% 34%,
        transparent 62%);
}

body[data-slug=""] .titelbild h1 {
    inset-inline: clamp(1rem, 4vw, 4rem);
    top: calc(100% / 6 + 2ch);
    bottom: auto;
    transform: translateY(-50%);
    text-align: center;
    color: var(--color-heading);
    font-size: clamp(1.35rem, calc(var(--kopfbildhoehe) * 0.075), 6rem);
    line-height: 1.04;
    padding-block-end: 0.14em;
}

/* Mobile H1: lesbare Größenhierarchie und ausgeglichene Umbrüche
   im hellen oberen Bildbereich. pgdoc://lisa-public/rules/52-gestaltung */
@media (max-width: 30rem) {
    body[data-slug=""] .titelbild h1 {
        font-size: clamp(24px, 6.7vw, 28px);
        top: 16px;
        transform: none;
        line-height: 1.16;
        padding-block-end: 0;
        hyphens: none;
        overflow-wrap: normal;
    }

    body[data-slug=""] .titelbild .zeile-klein {
        font-size: 0.76em;
        line-height: 1.25;
        margin-bottom: 6px;
        text-wrap: balance;
    }

    body[data-slug=""] .titelbild .zeile-gross {
        text-wrap: balance;
    }
}

/* Hier sind beide Titelzeilen große Schrift; weniger Aufhellung genügt. */
@media (min-width: 56rem) {
    body[data-slug=""] .titelbild {
        --titel-schleier: 85%;
    }
}