.bmds-tutorials .bmds-sectionhead { margin-bottom: 2.25rem; }
.bmds-tutorials .bmds-sectionhead__subline {
    margin-top: 0.625rem;
    line-height: 1.7;
    max-width: 70ch;
    color: var(--bmds-color-ink-soft);
}

.bmds-tutorials__label {
    margin: 0 0 1.125rem;
    font-size: var(--bmds-size-caption);
    line-height: 1.2;
}

.bmds-videogrid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 16.25rem), 1fr));
    gap: var(--kern-metric-space-large);
}

.bmds-tutorials__guides { margin-top: var(--kern-metric-space-4x-large); }

.bmds-videocard { position: relative; }
.bmds-videocard--link:hover { opacity: 0.85; }
@supports selector(:has(*)) {
    .bmds-videocard:has(.bmds-videocard__link:focus-visible) {
        outline: var(--kern-metric-border-width-bold) solid var(--kern-color-action-focus-default-contextual);
        outline-offset: var(--kern-metric-space-x-small);
    }
    .bmds-videocard__link:focus-visible { outline: none; }
}
.bmds-videocard__link::after {
    content: "";
    position: absolute;
    inset: 0;
}

.bmds-videocard__media {
    position: relative;
    display: grid;
    place-items: center;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: var(--kern-metric-border-radius-default);
    background: repeating-linear-gradient(
        135deg,
        var(--bmds-color-hatch) 0 10px,
        var(--bmds-surface-tint) 10px 20px
    );
}

.bmds-videocard__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.bmds-videocard__placeholder {
    position: absolute;
    inset-inline-start: 0.75rem;
    inset-block-end: 0.625rem;
    font-size: var(--bmds-size-badge);
    color: var(--bmds-color-ink-muted);
}

/* `position`, damit der Kreis ueber dem absolut liegenden Standbild
   liegt. */
.bmds-videocard__play {
    position: relative;
    width: var(--kern-metric-dimension-2x-large);
    height: var(--kern-metric-dimension-2x-large);
    display: grid;
    place-items: center;
    border-radius: var(--kern-metric-border-radius-circle);
    background: var(--bmds-surface-ink);
}
.bmds-videocard__play .kern-icon {
    width: 1.875rem;
    height: 1.875rem;
    background-color: var(--bmds-surface-accent);
}

.bmds-videocard__kicker {
    margin: 0.875rem 0 0.375rem;
    font-size: var(--bmds-size-caption);
    line-height: 1.2;
    color: var(--bmds-color-blue);
    letter-spacing: var(--bmds-tracking-caps-tight);
}

.bmds-videocard__title {
    margin: 0;
    font-size: var(--bmds-size-lead);
    font-weight: var(--kern-typography-font-weight-semi-bold);
    line-height: 1.35;
    letter-spacing: var(--bmds-tracking-heading);
    overflow-wrap: anywhere;
}
.bmds-videocard__link { text-decoration: none; }

.bmds-videocard__meta,
.bmds-videocard__text {
    margin: 0.375rem 0 0;
    font-size: var(--bmds-size-meta);
    color: var(--kern-color-layout-text-muted);
}

.bmds-guides {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.875rem;
}

@media (max-width: 900px) {
    .bmds-guides { grid-template-columns: minmax(0, 1fr); }
}

.bmds-guides__toggle { margin-top: 1.375rem; }
/* `kern-btn` setzt `display`, das schlaegt sonst `hidden`. */
.bmds-guides__toggle[hidden] { display: none; }

/* Transparente Kontur, die nur im Kontrastmodus sichtbar wird, sonst
   waere der Dialog dort nicht vom Backdrop zu unterscheiden. */

.bmds-videodialog {
    width: min(64rem, 92vw);
    max-width: none;
    padding: 0;
    border: 0;
    outline: var(--kern-metric-border-width-light) solid transparent;
    background: var(--bmds-surface-ink);
    color: var(--bmds-on-surface-ink);
}

.bmds-videodialog::backdrop {
    background: color-mix(in srgb, var(--bmds-color-ink) 75%, transparent);
}

.bmds-videodialog__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--kern-metric-space-default);
    padding: var(--kern-metric-space-default);
}

.bmds-videodialog__title {
    margin: 0;
    font-size: var(--bmds-size-lead);
    font-weight: var(--kern-typography-font-weight-semi-bold);
    line-height: 1.3;
}

/* 44px fuer ein ausreichendes Touchziel (WCAG 2.5.5). Nicht `kern-btn--
   tertiary`: dessen 48px erhoehen die Kopfzeile. */
.bmds-videodialog__close {
    flex: none;
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.bmds-videodialog__stage { aspect-ratio: 16 / 9; }

/* `contain`, sonst wuerden Videos, die nicht 16:9 sind, beschnitten
   statt mit Balken gezeigt. */
.bmds-videodialog__player {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}