.header-flex {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

/* Logo + Text untereinander */
.logo-block {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

/* Der Button-Container bekommt das gleiche wie ein <article> */
.mini-article-buttons {
    display: flex;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border-radius: var(--border-radius);
    background: var(--pico-card-background-color);  /* entspricht <article> */
    box-shadow: var(--pico-card-box-shadow);        /* sauberer Pico-Card-Schatten */
}

/* Kleinere Buttons */
.small-btn {
    display: flex;               /* WICHTIG: flex statt inline-flex */
    align-items: flex-start;     /* richtet Kinder an der Oberkante aus */
    gap: 0.35rem;
    padding: 0.25rem 0.6rem;
    line-height: 1;              /* verhindert zusätzlichen vertikalen Raum */
    font-size: 0.9rem;           /* Beispiel, anpassen wie gewünscht */
    text-decoration: none;
}

.small-btn .btn-text {
    display: inline-block;
    margin: 0;
    padding: 0;
    line-height: 1;              /* garantiert eine definierte Text-Box */
}

/* Icon-Wrapper: oben ausrichten */
.small-btn .ext-icon {
    display: inline-block;
    align-self: flex-start;   /* zwingt Icon an die Oberkante */
    margin: 0;
    line-height: 0;           /* kein zusätzlicher Abstand */
}

.small-btn .ext-icon .ext-img {
    display: block;           /* wichtig → keine Baseline */
    height: 0.9em;            /* skaliert proportional zur Textgröße */
    width: auto;              /* damit das PNG nicht verzerrt */
    opacity: 0.6;             /* wie dein SVG vorher */
}

/* Responsive header */
@media (max-width: 500px) {
    .header-flex {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
    .mini-article-buttons {
        width: 100%;      /* Buttons nehmen volle Breite */
        justify-content: flex-start;
    }
}