/* Hier stehen keine Rohfarben, nur KERN-Rollen und `--bmds-*`-Tokens:
   wer die Palette wechselt, fasst nur _tokens.css an. */

body {
    margin: 0;
    color: var(--kern-color-layout-text-default);
    font-size: var(--bmds-size-body);
    font-weight: var(--kern-typography-font-weight-regular);
    line-height: 1.6;
    /* Ohne Glaettung setzt macOS helle Schrift auf dunklem Grund
       sichtbar fetter. */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a { color: inherit; }

/* KERNs globale Fokusregel deckt Links und Buttons ausserhalb seiner
   Komponenten nicht ab. `:where()` hat Spezifitaet 0, KERN-Bauteile
   behalten ihren eigenen Ring. `-contextual`, damit der Ring auf
   `.kern-dark`-Baendern mitschaltet. */
:where(a, button, input, select, textarea, summary):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-container` ist die Inhaltsbreite: der Gutter kommt oben
   drauf, sonst zoege `border-box` ihn von den 1240px ab. */
.bmds-container {
    width: 100%;
    max-width: calc(var(--bmds-container) + 2 * var(--bmds-gutter));
    margin-inline: auto;
    padding-inline: var(--bmds-gutter);
    container-type: inline-size;
}

.bmds-main { scroll-margin-top: var(--bmds-header-h); }

.bmds-splith {
    margin: 0;
    font-weight: var(--bmds-weight-light);
    line-height: 1.12;
    letter-spacing: -0.015em;
    text-wrap: balance;
}
.bmds-splith__lead,
.bmds-splith--solid {
    font-weight: var(--kern-typography-font-weight-semi-bold);
}

/* Blockelement statt `<br>` im Markup, damit der Umbruch nur in der
   Hero-Groesse entsteht. */
.bmds-splith--display .bmds-splith__lead { display: block; }

.bmds-splith--display { font-size: var(--bmds-size-display); }
.bmds-splith--h2      { font-size: var(--bmds-size-h2); }

/* Nicht `kern-preline`: die steht in gemischter Schreibung und wuerde,
   global umgebogen, die KERN-Karten der article-list mitveraendern. */
.bmds-eyebrow {
    font-size: var(--bmds-size-badge);
    font-weight: var(--kern-typography-font-weight-semi-bold);
    text-transform: uppercase;
    letter-spacing: var(--bmds-tracking-caps);
}

.bmds-kicker {
    display: flex;
    font-size: var(--bmds-size-label);
    align-items: center;
    gap: 0.625rem;
    margin: 0 0 1.375rem;
}
.bmds-kicker::before {
    content: "";
    width: 2.25rem;
    height: 0.3125rem;
    background: var(--kern-color-decorative-brand-default);
    flex: none;
}

/* Die Rechtstexte bringen viele h3 und h4 mit, ohne diese Regeln
   stuenden sie in Browser-Defaults da. */
.bmds-prose { line-height: var(--bmds-leading-prose); }
.bmds-prose > :first-child { margin-top: 0; }
.bmds-prose > :last-child  { margin-bottom: 0; }
.bmds-prose--narrow { max-width: var(--bmds-measure-prose); }
.bmds-prose a { text-decoration: underline; }

.bmds-prose h2,
.bmds-prose h3,
.bmds-prose h4 {
    margin: var(--kern-metric-space-2x-large) 0 var(--kern-metric-space-small);
    font-weight: var(--kern-typography-font-weight-semi-bold);
    line-height: var(--bmds-leading-heading);
    letter-spacing: var(--bmds-tracking-heading);
    text-wrap: balance;
}
.bmds-prose h2 { font-size: var(--bmds-size-h2); }
.bmds-prose h3 { font-size: var(--bmds-size-h3); }
.bmds-prose h4 { font-size: var(--bmds-size-h4); }

/* Die Gliederung der Rechtstexte lebt vom Abstand davor, nach einer
   Ueberschrift waere er doppelt. */
.bmds-prose h2 + h3,
.bmds-prose h3 + h4 { margin-top: var(--kern-metric-space-large); }

.bmds-prose ul,
.bmds-prose ol {
    margin: var(--kern-metric-space-default) 0;
    padding-inline-start: var(--kern-metric-space-large);
}
.bmds-prose li { margin-block: var(--kern-metric-space-x-small); }

/* Auf `.kern-dark` ist `action-default` weiss, `kern-btn--secondary`
   wird dort von selbst zum hellen Umriss-Button. Eine eigene Ghost-
   Variante braucht es deshalb nicht. */

.kern-btn {
    padding-inline: var(--kern-metric-space-large);
    font-family: inherit;
    text-decoration: none;
}

.kern-btn .kern-label {
    font-size: var(--bmds-size-action);
    font-weight: var(--kern-typography-font-weight-semi-bold);
}

/* KERN kennt keine Akzentaktion. Modifier auf `kern-btn--primary`,
   damit Form, Fokus und Kontrastmodus von KERN erhalten bleiben.
   `:active` braucht einen eigenen Wert: KERN dunkelt dort die
   Aktionsfarbe ab, die Beschriftung waere darauf nicht lesbar. */
.bmds-btn--accent { background: var(--bmds-color-yellow); }
.bmds-btn--accent .kern-label { color: var(--bmds-color-ink); }
.bmds-btn--accent:not(:disabled):hover,
.bmds-btn--accent:not([aria-disabled="true"]):hover,
.bmds-btn--accent:active { background: var(--bmds-color-yellow-light); }

/* `scroll-margin-top`, weil die Kopfzeile klebt und sonst die
   Schlagzeile des angesprungenen Abschnitts verdeckt. */
.bmds-section {
    padding-block: var(--bmds-section-y);
    scroll-margin-top: calc(var(--bmds-header-h) + var(--kern-metric-space-default));
}
.bmds-section--light  { background: var(--kern-color-layout-background-default); }
.bmds-section--tint,
.bmds-section--tint-plain { background: var(--bmds-surface-tint); }
.bmds-section--mint   { background: var(--bmds-surface-mint); }

.bmds-section--tint {
    position: relative;
    isolation: isolate;
}
.bmds-section--tint::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--kern-color-layout-text-default);
    opacity: 0.02;
    pointer-events: none;
    -webkit-mask: var(--bmds-brand-pattern) 0 0 / var(--bmds-brand-pattern-size) var(--bmds-brand-pattern-size) repeat;
    mask: var(--bmds-brand-pattern) 0 0 / var(--bmds-brand-pattern-size) var(--bmds-brand-pattern-size) repeat;
}
.bmds-section--accent { background: var(--bmds-surface-accent); color: var(--bmds-on-surface-accent); }

.bmds-sectionhead {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--kern-metric-space-large);
    margin-bottom: var(--kern-metric-space-3x-large);
    flex-wrap: wrap;
}
/* Ohne `max-width`: eine Grenze in `ch` waere falsch gerechnet, weil
   der Wrapper die Fliesstextgroesse erbt, die Schlagzeile aber doppelt
   so gross ist. */
.bmds-sectionhead__text { min-width: 0; }
.bmds-sectionhead__subline {
    margin: var(--kern-metric-space-small) 0 0;
    font-size: var(--kern-font-size-18);
    line-height: 1.6;
    max-width: var(--bmds-measure-lead);
    color: var(--kern-color-layout-text-muted);
}
/* Auf farbigen Flaechen ginge das gedeckte Grau unter. Bausteine mit
   eigener Flaechenklasse ziehen das selbst nach, siehe stats-band. */
.bmds-section--accent .bmds-sectionhead__subline { color: inherit; opacity: 0.85; }

/* Kontur aus der Maske, Farbe aus `background`: so dient dieselbe Form
   als Verlauf, Vollton oder Ornament. */
.bmds-brandmark {
    --brandmark-width: 12.5rem;

    position: absolute;
    inset-inline-end: -2.75rem;
    inset-block-end: -2.25rem;
    width: var(--brandmark-width);
    aspect-ratio: var(--bmds-brand-ratio);
    background: currentColor;
    opacity: 0.1;
    pointer-events: none;
    -webkit-mask: var(--bmds-brand-mask) center / contain no-repeat;
    mask: var(--bmds-brand-mask) center / contain no-repeat;
}

.bmds-brandshape {
    aspect-ratio: var(--bmds-brand-ratio);
    background: var(--bmds-gradient-brand);
    -webkit-mask: var(--bmds-brand-mask) center / contain no-repeat;
    mask: var(--bmds-brand-mask) center / contain no-repeat;
}

/* Nur mit JavaScript ausgeblendet, sonst bliebe der Inhalt unsichtbar. */
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
    [data-bmds-reveal] {
        opacity: 0;
        transform: translateY(var(--kern-metric-space-default));
        transition: opacity 500ms ease, transform 500ms ease;
    }
    [data-bmds-reveal].is-revealed {
        opacity: 1;
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    /* KERN setzt `scroll-behavior: smooth` auf `html`, sonst bliebe der
       Sprung zu Ankern animiert. */
    html { scroll-behavior: auto; }

    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}