/* =========================================
   Artikel Layout & Komponenten
========================================= */

/* -- Block-Renderer (renderArticleBlocks) -- */
.article-h3 {
    break-after: avoid;
    break-inside: avoid;
    margin-top: 1.5em;
    margin-bottom: 0.5em;
}

.article-quote {
    break-inside: avoid;
    margin: 14px 0;
}

.article-quote p {
    margin: 0;
}

.article-question {
    break-inside: avoid;
    margin-bottom: 8px;
}

.article-answer {
    break-inside: avoid;
    margin-top: 0;
}

.article-p {
    break-inside: avoid;
    margin-bottom: 1em;
}

/* Dynamische Platzhalter-Blöcke */
.article-links-block {
    break-inside: avoid;
    margin: 22px 0 8px;
    padding: 18px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px dashed rgba(255, 255, 255, 0.12);
}

.article-links-block h3 {
    margin-top: 0;
}

.article-links-flex {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.article-lexicon-block {
    break-inside: avoid;
    margin: 22px 0 8px;
    padding: 18px;
    border-radius: 16px;
    background: rgba(0, 207, 255, 0.05);
    border: 1px dashed rgba(0, 207, 255, 0.3);
    text-align: center;
}

.article-lexicon-title {
    display: block;
    color: #00cfff;
    font-size: 1.1em;
    margin-bottom: 10px;
}

/* -- Seiten-Layout & Cards -- */
.home-ticker-article {
    margin-top: 14px;
}

.vibe-action {
    cursor: pointer;
}

.nf-card-vibe {
    padding: 18px;
}

.vibe-subtitle {
    margin: 8px 0 14px;
}

.article-meta-card {
    padding: 16px 22px;
    margin-bottom: 14px;
}

.article-meta-flex {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.author-link {
    color: #00cfff;
    text-decoration: none;
}

.author-link:hover {
    text-decoration: underline;
}

.article-content-card {
    padding: 22px;
}

.article-figure {
    margin: 0 0 14px;
    break-inside: avoid;
}

.article-hero-img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 16px;
}