.bmds-download {
    position: relative;
    display: flex;
    align-items: center;
    gap: 1.125rem;
    padding: 1.375rem var(--kern-metric-space-large);
    background: var(--kern-color-layout-background-default);
    color: var(--kern-color-layout-text-default);
    border: var(--kern-metric-border-width-light) solid var(--bmds-color-line-card);
    border-radius: var(--kern-metric-border-radius-default);
}
/* `display: flex` schlaegt sonst das `hidden`-Attribut, das `bmds.js`
   zum Einklappen setzt. */
.bmds-download[hidden] { display: none; }
.bmds-download--link:hover {
    border-color: var(--kern-color-action-default);
    background: var(--bmds-color-mint-pale);
}

/* Der Ring gehoert an die Zeile, weil die ganze Zeile das Ziel ist. Ohne
   `:has()` behaelt der Link seinen eigenen. */
@supports selector(:has(*)) {
    .bmds-download:has(.bmds-download__link:focus-visible) {
        outline: var(--kern-metric-border-width-bold) solid var(--kern-color-action-focus-default-contextual);
        outline-offset: var(--kern-metric-space-2x-small);
    }
    .bmds-download__link:focus-visible { outline: none; }
}
.bmds-download__link::after {
    content: "";
    position: absolute;
    inset: 0;
}

.bmds-download__badge {
    flex: none;
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 3.375rem;
    background: var(--bmds-surface-accent);
}
.bmds-download__badge .kern-icon {
    width: 1.625rem;
    height: 1.625rem;
    background-color: var(--bmds-on-surface-accent);
}

.bmds-download__text {
    flex: 1;
    min-width: 0;
    overflow-wrap: anywhere;
}

.bmds-download__title {
    display: block;
    font-size: var(--bmds-size-body);
    font-weight: var(--kern-typography-font-weight-semi-bold);
    line-height: 1.35;
    color: inherit;
    text-decoration: none;
}

.bmds-download__meta {
    display: block;
    margin-top: 0.375rem;
    font-size: var(--bmds-size-meta);
    line-height: 1.4;
    color: var(--kern-color-layout-text-muted);
}

.bmds-download__action {
    flex: none;
    background-color: var(--kern-color-decorative-brand-default);
}