/* KERNs Innenteile (`__container`, `kern-title`) bleiben aussen vor,
   ihre Abstaende und Grade passen nicht zum Design. */

.bmds-icontiles {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    /* `min(100%, ...)`, sonst laeuft die Spalte auf schmalen Schirmen
       aus dem Container. */
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 18.75rem), 1fr));
    gap: var(--kern-metric-space-large);
}

.bmds-icontile {
    position: relative;
    gap: var(--kern-metric-space-default);
    padding: clamp(var(--kern-metric-space-large), 3vw, var(--kern-metric-space-2x-large));
    overflow: hidden;
}

/* Ohne die Ausnahme verliert das Wasserzeichen sein `absolute` und
   treibt die Kachelhoehe auf. */
.bmds-icontile > :not(.bmds-icontile__brandmark) { position: relative; }

/* Feste 52px, KERNs Stufen springen von 48 auf 56px. */
.bmds-icontile__symbol {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 3.25rem;
    height: 3.25rem;
    background: var(--bmds-surface-accent);
}

/* Bewusst ohne `!important`: im Hochkontrastmodus setzt `_icons.css`
   alle Symbole per `!important` auf `CanvasText`, das soll dort gewinnen. */
.bmds-icontile__icon {
    background-color: var(--bmds-on-surface-accent);
}

/* `balance`, weil lange Kennwoerter umbrechen und sonst ein Wort allein
   in der zweiten Zeile steht. Flaechen- statt Aktionsfarben, weil die
   Pille kein Bedienelement ist. Nicht `kern-badge`: die setzt 16px bei
   32px Mindesthoehe. */
.bmds-icontile__kicker {
    margin: 0;
    padding: var(--kern-metric-space-2x-small) var(--kern-metric-space-small);
    background: var(--bmds-surface-ink);
    color: var(--bmds-on-surface-ink);
    text-wrap: balance;
    border-radius: var(--kern-metric-border-radius-default);
}

.bmds-icontile__title {
    margin: 0;
    font-size: var(--bmds-size-tile);
    font-weight: var(--kern-typography-font-weight-semi-bold);
    line-height: var(--bmds-leading-heading);
    letter-spacing: var(--bmds-tracking-heading);
    color: var(--kern-color-decorative-brand-default);
}

.bmds-icontile__text {
    margin: 0;
    font-size: var(--kern-font-size-16);
    line-height: var(--bmds-leading-prose);
}

/* Kleiner und blasser als der Standard, auf Weiss konkurriert das D
   sonst mit dem Text. */
.bmds-icontile__brandmark {
    --brandmark-width: 9.375rem;

    inset-inline-end: -2.125rem;
    inset-block-end: -2.5rem;
    color: var(--kern-color-decorative-brand-default);
    opacity: 0.05;
}