/* Die Farbflächen greifen die Startseite auf; Regeln bleiben auf Unterseiten begrenzt. */
.hub-page {
    --hub-space: clamp(24px, 4vw, 52px);
}
.hub-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(240px, 1fr);
    gap: clamp(24px, 4vw, 55px);
    align-items: center;
    background: var(--skin);
    padding: var(--hub-space);
    border-radius: calc(var(--radius) + 10px);
    margin: 15px 0 45px;
}
.hub-page .hub-hero h1 {
    font-size: clamp(2rem, 3.8vw, 3.8rem);
    margin-bottom: .5em;
}
.hub-hero .article-lead {
    margin-bottom: 0;
}
.hub-reading-route {
    border-left: 1px solid var(--line);
    padding-left: 25px;
    min-width: 0;
}
.hub-page .hub-reading-route h2 {
    font-size: 1.55rem;
}
.hub-reading-route > p,
.hub-reading-route li {
    font-size: .95rem;
}
.hub-reading-route ol {
    padding-left: 22px;
    margin-bottom: 0;
}
.hub-reading-route li {
    padding: 8px 0 8px 5px;
}
.hub-hero-photo {
    margin: 0;
}
.hub-hero-photo img {
    width: 100%;
    height: auto;
    border-radius: calc(var(--radius) + 6px);
}
.hub-hero-photo figcaption {
    color: var(--muted);
    font-size: .72rem;
    margin-top: 8px;
}
.hub-introduction {
    margin: 0 0 55px;
}
.hub-introduction > div {
    max-width: 85ch;
}
.hub-introduction.with-route {
    display: grid;
    grid-template-columns: minmax(0, 1.8fr) minmax(240px, 1fr);
    gap: var(--hub-space);
    align-items: start;
}
.hub-introduction.with-route .hub-reading-route {
    background: var(--hair);
    padding: 25px;
    border: 0;
    border-radius: calc(var(--radius) + 6px);
}
.hub-page h2 {
    font-size: clamp(1.8rem, 2.8vw, 2.6rem);
}
.hub-section-heading {
    margin-bottom: 28px;
}
.hub-topic-list {
    display: grid;
    gap: 28px;
}
.hub-topic {
    padding: var(--hub-space);
    border-radius: calc(var(--radius) + 10px);
    background: var(--hair);
}
.hub-topic:nth-child(3n+2) {
    background: var(--makeup);
}
.hub-topic:nth-child(3n) {
    background: var(--skin);
}
.hub-topic.has-photo {
    display: grid;
    grid-template-columns: minmax(180px, 280px) minmax(0, 1fr);
    gap: var(--hub-space);
    align-items: start;
}
.hub-topic > img {
    width: 100%;
    height: auto;
    border-radius: calc(var(--radius) + 5px);
}
.hub-topic h3 {
    font-size: clamp(1.7rem, 2.5vw, 2.5rem);
}
.hub-topic h3 a {
    text-decoration: none;
}
.hub-article-links {
    list-style: none;
    padding: 0;
    margin: 22px 0;
    display: grid;
    gap: 12px;
}
.hub-article-links li {
    border-top: 1px solid var(--line);
    padding-top: 12px;
}
.hub-article-links a {
    font-weight: 600;
    font-size: .95rem;
}
.hub-article-links p {
    font-size: .87rem;
    margin: 5px 0 0;
}
.hub-direct {
    margin-block: 55px;
}
.hub-direct .stories-grid {
    margin-top: 28px;
}
.hub-direct .text-story {
    border: 1px solid var(--line);
    padding: 25px;
    background: var(--surface);
    border-radius: calc(var(--radius) + 5px);
}
.hub-practice {
    margin-block: 60px 35px;
}
.hub-step-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    list-style: none;
    gap: 20px;
    padding: 0;
    margin: 25px 0 0;
}
.hub-step-grid li {
    padding: 26px;
    background: var(--skin);
    border-radius: calc(var(--radius) + 6px);
}
.hub-step-grid li:nth-child(2) {
    background: var(--hair);
}
.hub-step-grid li:nth-child(3) {
    background: var(--makeup);
}
.hub-step-number {
    display: block;
    margin-bottom: 16px;
    color: var(--muted);
    font-size: .85rem;
    letter-spacing: .12em;
}
.hub-step-grid h3 {
    font-size: 1.5rem;
}
.hub-step-grid p {
    font-size: .95rem;
    margin-bottom: 0;
}
.hub-example {
    padding: var(--hub-space);
    margin-block: 35px 55px;
    background: var(--hair);
    border-radius: calc(var(--radius) + 10px);
}
.hub-example > p:last-child {
    max-width: 85ch;
    margin-bottom: 0;
}
.hub-faq > div {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 35px;
}
.hub-faq section {
    border-top: 1px solid var(--line);
    padding-top: 20px;
}
.hub-faq h3 {
    font-size: 1.45rem;
}
.article-page .article-header {
    max-width: none;
    padding: clamp(22px, 4vw, 45px);
    background: var(--skin);
    border-radius: calc(var(--radius) + 10px);
}
.article-page .article-body .quick-steps {
    background: var(--hair);
    border: 0;
}
.article-page .article-body .checklist {
    background: var(--makeup);
}
@media (max-width: 850px) {
    .hub-hero,
    .hub-introduction.with-route,
    .hub-topic.has-photo {
        grid-template-columns: 1fr;
    }
    .hub-reading-route {
        border-left: 0;
        border-top: 1px solid var(--line);
        padding: 24px 0 0;
    }
    .hub-hero-photo,
    .hub-topic > img {
        max-width: 400px;
    }
    .hub-step-grid {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 600px) {
    .hub-faq > div {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    .hub-direct .text-story {
        padding: 20px;
    }
}
@media print {
    .article-page .article-header {
        padding: 0;
        background: transparent;
    }
    .hub-hero,
    .hub-topic,
    .hub-example {
        background: transparent;
        break-inside: avoid;
    }
}