/* =========================================================
   HGS - BLOG
   ---------------------------------------------------------
   Loaded ONLY by the generated pages under /blog/. Additive: it never
   modifies global.css, header.css, footer.css or animations.css, and
   the existing website does not load it.

   Design language is taken from the existing site:

     yellow         #f7d34f  (hover #e6c845)   - .btn-yellow, .service-icon
     ink            #111 / #161616             - headings, dark bands
     body text      #374151
     muted text     #6b7280
     hairlines      #e5e7eb / #ededed
     surfaces       #ffffff / #fafafa / #f9f9f9
     radius         16px cards, 6-12px buttons
     type           the site's system-ui stack - no webfont is added
     breakpoints    1350 / 1150 / 1024 / 900 / 768 / 600 / 520

   Editorial character comes from scale, weight, letter-spacing and
   whitespace rather than from borders, shadows or filled boxes. Yellow
   is an accent only: eyebrow marks, section rules, quote bars, links
   and buttons.

   `.btn-yellow.big` is redeclared here because it is defined in
   index.css, which blog pages do not load.
   ========================================================= */

.b-article,
.b-hero,
.b-featured,
.b-latest,
.b-more {
    /* one place to retune the whole blog's rhythm and measure */
    --b-ink: #111;
    --b-body: #374151;
    --b-muted: #6b7280;
    --b-line: #e5e7eb;
    --b-line-soft: #ededed;
    --b-tint: #f9f9f9;
    --b-yellow: #f7d34f;
    /* reading measure - used only where there is no second column */
    --b-measure: 720px;
    --b-aside: 300px;
    /* Fixed separation between article and sidebar at every desktop width.
       The main column absorbs all surplus space, so this stays constant
       instead of growing with the viewport. */
    --b-gap: 40px;
}

/* =========================================================
   SHARED PRIMITIVES
   ========================================================= */

.btn-yellow.big {
    padding: 14px 28px;
    font-size: 18px;
    border-radius: 8px;
}

.btn-yellow:focus-visible,
.b-card__link:focus-visible,
.b-feature__link:focus-visible,
.b-mini:focus-visible,
.b-back__link:focus-visible,
.b-section-link:focus-visible,
.b-aside__all:focus-visible {
    outline: 3px solid #f7d34f;
    outline-offset: 3px;
    border-radius: 4px;
}

/* ---------- eyebrow: the blog's signature label ---------- */
.b-eyebrow {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 20px 0;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #111;
}

.b-eyebrow__mark {
    display: block;
    width: 28px;
    height: 3px;
    border-radius: 2px;
    background: #f7d34f;
    flex: none;
}

.b-eyebrow--invert {
    color: #ffffff;
}

/* ---------- section heading + optional right-hand link ---------- */
.b-section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 40px;
    padding-bottom: 20px;
    border-bottom: 1px solid #e5e7eb;
}

.b-section-title {
    margin: 0;
    font-size: clamp(24px, 2.4vw, 30px);
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: #111;
}

.b-section-link,
.b-aside__all {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: none;
    font-size: 15px;
    font-weight: 600;
    color: #111;
    text-decoration: none;
    transition: color 0.2s ease;
}

.b-section-link:hover,
.b-aside__all:hover {
    color: #000;
}

/* ---------- arrow affordance ---------- */
.b-arrow {
    width: 18px;
    height: 18px;
    flex: none;
    transition: transform 0.25s ease;
}

.b-section-link:hover .b-arrow,
.b-aside__all:hover .b-arrow,
.b-card__link:hover .b-arrow,
.b-feature__link:hover .b-arrow {
    transform: translateX(5px);
}

.b-back__link:hover .b-arrow--back {
    transform: translateX(-5px);
}

/* ---------- inline meta separator ---------- */
.b-sep {
    display: inline-block;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: #d1d5db;
    vertical-align: middle;
}

/* ---------- breadcrumb ---------- */
.b-crumb {
    font-size: 14px;
    color: #6b7280;
}

.b-crumb ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.b-crumb li {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.b-crumb li + li::before {
    content: "";
    width: 5px;
    height: 5px;
    border-top: 1px solid #d1d5db;
    border-right: 1px solid #d1d5db;
    transform: rotate(45deg);
    flex: none;
}

.b-crumb a {
    color: #6b7280;
    text-decoration: none;
    transition: color 0.2s ease;
}

.b-crumb a:hover {
    color: #111;
}

/* The article title can be long. It gets its own line if needed and is
   truncated rather than allowed to push the row sideways. */
.b-crumb li[aria-current] {
    color: #111;
    font-weight: 600;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* =========================================================
   ARTICLE - OUTER WIDTH
   ---------------------------------------------------------
   `.container` is 80% of the viewport, which keeps growing on very wide
   monitors. The main column takes all of that surplus, so this cap is what
   actually limits the line length:

       1220 = 880 main column + 40 gap + 300 sidebar

   Because the header band, the hero and the two-column section all use the
   same container, they stay aligned on the same left and right edges at
   every width. Below 1220px this rule does nothing at all.
   ========================================================= */

.b-article .container,
.b-more .container,
.b-back {
    max-width: 1220px;
}

/* =========================================================
   ARTICLE - HEADER BAND
   ========================================================= */

.b-article__head {
    padding: 36px 0 44px 0;
    background: #ffffff;
}

.b-article__headline {
    max-width: 920px;
    margin-top: 32px;
}

.b-article__head h1 {
    margin: 0;
    font-size: clamp(30px, 4.4vw, 54px);
    line-height: 1.08;
    letter-spacing: -0.022em;
    color: #111;
    /* long German compounds wrap instead of overflowing */
    overflow-wrap: break-word;
    hyphens: auto;
}

.b-article__lead {
    max-width: 760px;
    margin: 24px 0 0 0;
    font-size: clamp(18px, 1.7vw, 21px);
    line-height: 1.6;
    color: #4b5563;
}

/* ---------- meta strip ----------
   A labelled strip rather than a run-on byline: this site documents and
   inspects, and precise, scannable metadata suits it. */
.b-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 56px;
    margin: 40px 0 0 0;
    padding: 24px 0 0 0;
    border-top: 1px solid #e5e7eb;
}

.b-meta__item {
    min-width: 0;
}

.b-meta dt {
    margin: 0 0 6px 0;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #9ca3af;
}

.b-meta dd {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: #111;
}

/* =========================================================
   ARTICLE - HERO
   Wider than the reading column on purpose: the photograph is the
   page's main visual event. 3:2 is a photographic ratio, so real
   HGS photography is cropped as little as possible.
   ========================================================= */

.b-article__hero {
    padding-bottom: 8px;
}

/* Full width of the article's outer container: the hero spans the whole
   area that the main column, the gap and the sidebar occupy below it.
   It is deliberately NOT tied to the reading measure. */
.b-hero-figure {
    margin: 0;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    border-radius: 20px;
    background: #f3f4f6;
}

.b-hero-figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* =========================================================
   ARTICLE - TWO-COLUMN LAYOUT
   ========================================================= */

.b-layout {
    display: grid;
    /* The main column takes every pixel the container has left over, so the
       gap is exactly --b-gap at every width. Deliberately NOT
       `justify-content: space-between`: that distributed surplus container
       width into the gap, which made the sidebar drift away from the text
       on wide screens. The container cap above is what bounds the column. */
    grid-template-columns: minmax(0, 1fr) var(--b-aside);
    gap: var(--b-gap);
    padding: 64px 0 0 0;
    /* NOT align-items:start. The aside must stretch to the row height,
       otherwise its sticky child has no room to travel inside it and
       position:sticky silently does nothing. */
    align-items: stretch;
}

.b-layout__main {
    min-width: 0;
}

.b-layout__aside {
    min-width: 0;
}

/* ---------- sticky sidebar ----------
   `top` must clear the site's own sticky header, which is about 121px
   tall on desktop (100px logo + padding + hairline). Anything smaller
   and the sidebar slides underneath it. max-height + overflow keep a
   long list usable on short windows. */
.b-aside {
    --b-header-clearance: 136px;
    position: sticky;
    top: var(--b-header-clearance);
    max-height: calc(100vh - var(--b-header-clearance) - 32px);
    overflow-y: auto;
    padding-left: 32px;
    border-left: 1px solid #e5e7eb;
}

.b-aside__title {
    margin: 0 0 24px 0;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #111;
}

.b-aside__list {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.b-aside__empty {
    margin: 0;
    font-size: 15px;
    line-height: 1.6;
    color: #6b7280;
}

.b-aside__all {
    margin-top: 28px;
    padding-top: 20px;
    border-top: 1px solid #e5e7eb;
    width: 100%;
}

/* ---------- compact sidebar item ---------- */
.b-mini {
    display: grid;
    grid-template-columns: 76px minmax(0, 1fr);
    gap: 14px;
    align-items: start;
    text-decoration: none;
    color: inherit;
}

.b-mini__media {
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 10px;
    background: #f3f4f6;
}

.b-mini__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

.b-mini:hover .b-mini__media img {
    transform: scale(1.06);
}

.b-mini__body {
    min-width: 0;
}

.b-mini__cat {
    margin: 0 0 6px 0;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #6b7280;
}

.b-mini__title {
    margin: 0;
    font-size: 15px;
    line-height: 1.4;
    font-weight: 600;
    color: #111;
    overflow-wrap: break-word;
    transition: color 0.2s ease;
}

.b-mini:hover .b-mini__title {
    color: #000;
    text-decoration: underline;
    text-decoration-color: #f7d34f;
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}

.b-mini__date {
    margin: 8px 0 0 0;
    font-size: 13px;
    color: #9ca3af;
}

/* =========================================================
   ARTICLE - BODY TYPOGRAPHY
   The reading measure is capped well below the column width. Filling
   the available space would make long technical German harder to read,
   which is the opposite of the point.
   ========================================================= */

.blog-body {
    /* Fills its grid column - the column itself is what limits the line
       length (see .b-layout). A second cap here would leave dead space
       inside the column. The single-column layout below 1250px restores
       an explicit measure, because there is no column to do it there. */
    max-width: none;
    font-size: 19px;
    line-height: 1.78;
    color: #374151;
    margin: 0;
}

.blog-body > *:first-child {
    margin-top: 0;
}

/* opening paragraph reads slightly larger, as in print */
.blog-body > p:first-of-type {
    font-size: 21px;
    line-height: 1.7;
    color: #1f2937;
}

.blog-body p {
    margin: 0 0 28px 0;
}

/* ---------- headings ----------
   H2 carries a short yellow rule above it: a section marker that reads
   as structure rather than decoration. */
.blog-body h2 {
    position: relative;
    margin: 72px 0 20px 0;
    padding-top: 28px;
    font-size: clamp(25px, 2.6vw, 32px);
    line-height: 1.2;
    letter-spacing: -0.015em;
    color: #111;
    overflow-wrap: break-word;
}

.blog-body h2::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 40px;
    height: 3px;
    border-radius: 2px;
    background: #f7d34f;
}

.blog-body h3 {
    margin: 44px 0 14px 0;
    font-size: clamp(19px, 1.8vw, 22px);
    line-height: 1.35;
    letter-spacing: -0.005em;
    color: #111;
    overflow-wrap: break-word;
}

.blog-body h2 + h3 {
    margin-top: 28px;
}

/* ---------- inline emphasis ---------- */
.blog-body strong {
    font-weight: 700;
    color: #111;
}

.blog-body em {
    font-style: italic;
    color: #1f2937;
}

.blog-body a {
    color: #111;
    text-decoration: underline;
    text-decoration-color: #f7d34f;
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
    transition: text-decoration-color 0.2s ease, color 0.2s ease;
}

.blog-body a:hover {
    color: #000;
    text-decoration-color: #111;
}

/* ---------- lists ---------- */
.blog-body ul,
.blog-body ol {
    margin: 0 0 28px 0;
    padding-left: 26px;
}

.blog-body li {
    margin-bottom: 12px;
    padding-left: 4px;
}

.blog-body li:last-child {
    margin-bottom: 0;
}

.blog-body li::marker {
    color: #f7d34f;
    font-weight: 700;
}

.blog-body ol li::marker {
    color: #6b7280;
}

.blog-body li > ul,
.blog-body li > ol {
    margin: 12px 0 0 0;
}

/* ---------- figures: images between sections ----------
   Generated automatically from a markdown image that sits alone in a
   paragraph; the image title becomes the caption. */
.blog-figure {
    margin: 48px 0;
}

.blog-figure img,
.blog-body > p > img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 14px;
    background: #f3f4f6;
}

.blog-figure figcaption {
    margin-top: 14px;
    padding-left: 16px;
    border-left: 3px solid #f7d34f;
    font-size: 14px;
    line-height: 1.55;
    color: #6b7280;
}

/* an image used inside a sentence stays inline-sized */
.blog-body p img {
    max-width: 100%;
}

/* ---------- pull quote ----------
   A plain markdown blockquote. Deliberately not a box: a yellow rule, a
   larger face and whitespace do the work. */
.blog-body blockquote {
    margin: 48px 0;
    padding: 4px 0 4px 32px;
    border-left: 4px solid #f7d34f;
}

.blog-body blockquote p {
    margin: 0 0 16px 0;
    font-size: clamp(20px, 2vw, 24px);
    line-height: 1.5;
    font-weight: 500;
    letter-spacing: -0.01em;
    color: #111;
}

.blog-body blockquote p:last-child {
    margin-bottom: 0;
}

/* ---------- callouts ----------
   A blockquote whose first line is a bold label: **Hinweis:**,
   **Praxis-Tipp:**, **Wichtig:**. Reads as a note, not as a quote. */
.blog-body blockquote.blog-callout {
    margin: 40px 0;
    padding: 26px 28px;
    border-left: 4px solid #f7d34f;
    border-radius: 0 14px 14px 0;
    background: #fafafa;
}

.blog-body .blog-callout p {
    font-size: 17px;
    line-height: 1.7;
    font-weight: 400;
    letter-spacing: normal;
    color: #374151;
    margin-bottom: 14px;
}

.blog-body .blog-callout p:last-child {
    margin-bottom: 0;
}

/* the leading bold label becomes the callout's title */
.blog-body .blog-callout > p:first-child > strong:first-child {
    display: block;
    margin-bottom: 8px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #111;
}

.blog-body .blog-callout ul,
.blog-body .blog-callout ol {
    margin-bottom: 0;
}

.blog-body .blog-callout--wichtig {
    border-left-color: #111;
    background: #f4f4f5;
}

.blog-body .blog-callout--tipp {
    background: #fdfaef;
}

/* ---------- code, rules ---------- */
.blog-body code {
    padding: 2px 7px;
    border-radius: 5px;
    background: #f3f4f6;
    font-size: 0.88em;
}

.blog-body pre {
    margin: 32px 0;
    padding: 20px 24px;
    border-radius: 14px;
    background: #f4f4f5;
    overflow-x: auto;
}

.blog-body pre code {
    padding: 0;
    background: none;
}

.blog-body hr {
    margin: 56px 0;
    border: 0;
    border-top: 1px solid #e5e7eb;
}

.blog-body table {
    width: 100%;
    margin: 32px 0;
    border-collapse: collapse;
    font-size: 16px;
}

.blog-body th,
.blog-body td {
    padding: 12px 14px;
    border-bottom: 1px solid #e5e7eb;
    text-align: left;
}

.blog-body th {
    font-weight: 700;
    color: #111;
}

/* =========================================================
   ARTICLE - RELATED SERVICE CTA
   The commercial next step. Dark, constrained to the reading column, and
   clearly a different kind of block from the editorial content above it.
   ========================================================= */

.b-cta {
    /* belongs to the main column and uses its full width - it must never
       extend under the sidebar */
    max-width: none;
    margin: 72px 0 0 0;
    padding: 44px 44px 48px 44px;
    border-radius: 20px;
    background: #161616;
    color: #ffffff;
}

.b-cta__title {
    margin: 0 0 14px 0;
    font-size: clamp(22px, 2.2vw, 28px);
    line-height: 1.25;
    letter-spacing: -0.015em;
    color: #ffffff;
}

.b-cta__text {
    margin: 0 0 32px 0;
    max-width: 52ch;
    font-size: 17px;
    line-height: 1.65;
    color: #c9c9c9;
}

.b-cta__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px 28px;
}

.b-cta__secondary {
    font-size: 16px;
    font-weight: 600;
    color: #ffffff;
    text-decoration: none;
    border-bottom: 2px solid rgba(255, 255, 255, 0.3);
    padding-bottom: 3px;
    transition: border-color 0.2s ease;
}

.b-cta__secondary:hover {
    border-bottom-color: #f7d34f;
}

.b-cta__secondary:focus-visible {
    outline: 3px solid #f7d34f;
    outline-offset: 4px;
}

/* =========================================================
   CARD GRID  (blog index + "Weitere Beiträge")
   Editorial, not product-like: image, type, whitespace. No border, no
   shadow, no filled box.
   ========================================================= */

.b-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 48px 36px;
}

.b-card__link {
    display: flex;
    flex-direction: column;
    height: 100%;
    text-decoration: none;
    color: inherit;
}

.b-card__media {
    aspect-ratio: 3 / 2;
    overflow: hidden;
    border-radius: 14px;
    background: #f3f4f6;
}

.b-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

.b-card__link:hover .b-card__media img {
    transform: scale(1.04);
}

.b-card__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding-top: 20px;
}

.b-card__meta,
.b-feature__body .b-card__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin: 0 0 12px 0;
    font-size: 13px;
    color: #6b7280;
}

.b-card__cat {
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #111;
}

.b-card__title {
    margin: 0 0 12px 0;
    font-size: 21px;
    line-height: 1.32;
    letter-spacing: -0.01em;
    color: #111;
    overflow-wrap: break-word;
    transition: color 0.2s ease;
}

.b-card__link:hover .b-card__title {
    text-decoration: underline;
    text-decoration-color: #f7d34f;
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
}

.b-card__excerpt {
    margin: 0 0 20px 0;
    font-size: 16px;
    line-height: 1.65;
    color: #6b7280;
    /* keeps a grid row visually even when excerpts differ in length */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.b-card__more {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: auto;
    font-size: 15px;
    font-weight: 600;
    color: #111;
}

/* =========================================================
   BLOG INDEX - HERO
   ========================================================= */

.b-hero {
    padding: 36px 0 64px 0;
    background: #ffffff;
    border-bottom: 1px solid #ededed;
}

.b-hero__inner {
    max-width: 860px;
    margin-top: 48px;
}

.b-hero h1 {
    margin: 0;
    font-size: clamp(34px, 5.2vw, 60px);
    line-height: 1.06;
    letter-spacing: -0.025em;
    color: #111;
    overflow-wrap: break-word;
}

.b-hero__text {
    max-width: 640px;
    margin: 24px 0 0 0;
    font-size: clamp(18px, 1.7vw, 21px);
    line-height: 1.65;
    color: #6b7280;
}

/* =========================================================
   BLOG INDEX - FEATURED ARTICLE
   Asymmetric so it never reads as an oversized card.
   ========================================================= */

.b-featured {
    padding: 72px 0;
    background: #ffffff;
}

.b-feature__link {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: 56px;
    align-items: center;
    text-decoration: none;
    color: inherit;
}

.b-feature__media {
    aspect-ratio: 3 / 2;
    overflow: hidden;
    border-radius: 20px;
    background: #f3f4f6;
}

.b-feature__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s ease;
}

.b-feature__link:hover .b-feature__media img {
    transform: scale(1.03);
}

.b-feature__body {
    min-width: 0;
}

.b-feature__title {
    margin: 0 0 18px 0;
    font-size: clamp(26px, 3vw, 38px);
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: #111;
    overflow-wrap: break-word;
}

.b-feature__link:hover .b-feature__title {
    text-decoration: underline;
    text-decoration-color: #f7d34f;
    text-decoration-thickness: 3px;
    text-underline-offset: 5px;
}

.b-feature__excerpt {
    margin: 0 0 28px 0;
    font-size: 18px;
    line-height: 1.7;
    color: #6b7280;
}

.b-feature__cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    font-weight: 700;
    color: #111;
    padding-bottom: 4px;
    border-bottom: 2px solid #f7d34f;
}

/* =========================================================
   BLOG INDEX - LATEST  /  ARTICLE - WEITERE BEITRÄGE
   ========================================================= */

.b-latest {
    padding: 80px 0;
    background: #f9f9f9;
}

.b-more {
    padding: 80px 0;
    background: #f9f9f9;
    border-top: 1px solid #ededed;
}

.b-empty {
    margin: 0;
    font-size: 18px;
    color: #6b7280;
}

/* =========================================================
   ARTICLE - BACK LINK
   ========================================================= */

.b-back {
    padding: 48px 0 72px 0;
}

.b-back__link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    font-weight: 600;
    color: #111;
    text-decoration: none;
    transition: color 0.2s ease;
}

.b-back__link:hover {
    color: #000;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

/* The article/sidebar gap is a single fixed value (--b-gap) across every
   width at which the sidebar exists - it no longer needs a per-breakpoint
   override, because the main column, not the gap, absorbs surplus width. */

@media (max-width: 1250px) {

    /* ARTICLE - the sidebar leaves here, not lower down.

       The container is 80% of the viewport, so below roughly 1250px the
       reading column (container - 300px sidebar - gap) drops under ~640px,
       which is too narrow for 19px body text. Collapsing early keeps the
       measure comfortable instead of letting it be squeezed. */
    .b-layout {
        grid-template-columns: minmax(0, 1fr);
        padding-top: 52px;
    }

    /* The sidebar and "Weitere Beiträge" list the same articles. Stacking
       both would repeat the same links twice; the richer bottom section
       wins and the sidebar steps out entirely. */
    .b-layout__aside {
        display: none;
    }

    .blog-body,
    .b-cta {
        /* No grid column to limit the line length here, so the reading
           measure is applied explicitly and centred. */
        max-width: var(--b-measure);
        margin-left: auto;
        margin-right: auto;
    }

    .b-hero-figure {
        border-radius: 18px;
    }
}

@media (max-width: 1024px) {

    /* CARDS */
    .b-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 40px 28px;
    }

    /* BLOG INDEX */
    .b-feature__link {
        gap: 40px;
    }
}

@media (max-width: 900px) {

    /* BLOG INDEX - side-by-side feature becomes too cramped */
    .b-feature__link {
        grid-template-columns: minmax(0, 1fr);
        gap: 28px;
    }

    .b-feature__media {
        aspect-ratio: 16 / 9;
    }
}

@media (max-width: 768px) {

    /* SHARED */
    .b-section-head {
        margin-bottom: 32px;
        padding-bottom: 16px;
    }

    .b-eyebrow {
        margin-bottom: 16px;
        font-size: 12px;
    }

    /* BLOG INDEX */
    .b-hero {
        padding: 28px 0 44px 0;
    }

    .b-hero__inner {
        margin-top: 32px;
    }

    .b-featured {
        padding: 48px 0;
    }

    .b-latest,
    .b-more {
        padding: 48px 0;
    }

    /* ARTICLE */
    .b-article__head {
        padding: 28px 0 32px 0;
    }

    .b-article__headline {
        margin-top: 24px;
    }

    .b-meta {
        gap: 18px 36px;
        margin-top: 28px;
        padding-top: 20px;
    }

    .b-hero-figure {
        /* a 3:2 hero is very tall on a phone; 4:3 keeps it present
           without pushing the article text off the first screen */
        aspect-ratio: 4 / 3;
        border-radius: 14px;
    }

    .b-layout {
        padding-top: 36px;
    }

    .blog-body {
        font-size: 17px;
        line-height: 1.75;
    }

    .blog-body > p:first-of-type {
        font-size: 19px;
    }

    .blog-body p {
        margin-bottom: 24px;
    }

    .blog-body h2 {
        margin-top: 52px;
        padding-top: 22px;
    }

    .blog-body h3 {
        margin-top: 34px;
    }

    .blog-figure {
        margin: 36px 0;
    }

    .blog-body blockquote {
        margin: 36px 0;
        padding-left: 22px;
    }

    .blog-body blockquote.blog-callout {
        margin: 32px 0;
        padding: 22px 22px;
    }

    .b-cta {
        margin-top: 52px;
        padding: 32px 26px 36px 26px;
        border-radius: 16px;
    }

    .b-back {
        padding: 32px 0 48px 0;
    }
}

@media (max-width: 600px) {

    /* CARDS */
    .b-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 40px;
    }
}

@media (max-width: 520px) {

    /* SHARED */
    .b-crumb {
        font-size: 13px;
    }

    .b-crumb ol {
        gap: 8px;
    }

    /* ARTICLE */
    .b-meta {
        /* two readable columns instead of one long list */
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px 20px;
    }

    .b-meta dd {
        font-size: 14px;
    }

    .blog-body {
        font-size: 16px;
    }

    .blog-body > p:first-of-type {
        font-size: 18px;
    }

    .b-cta__actions {
        /* full-width tap targets */
        flex-direction: column;
        align-items: stretch;
        gap: 18px;
    }

    .b-cta__actions .btn-yellow.big {
        text-align: center;
    }

    .b-cta__secondary {
        text-align: center;
        align-self: center;
    }

    /* CARDS */
    .b-card__title {
        font-size: 19px;
    }
}

/* =========================================================
   REDUCED MOTION
   animations.css already removes the entrance reveals. These are the
   blog's own hover transitions, which it does not know about.
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .b-card__media img,
    .b-feature__media img,
    .b-mini__media img,
    .b-arrow {
        transition: none !important;
    }

    .b-card__link:hover .b-card__media img,
    .b-feature__link:hover .b-feature__media img,
    .b-mini:hover .b-mini__media img,
    .b-section-link:hover .b-arrow,
    .b-aside__all:hover .b-arrow,
    .b-card__link:hover .b-arrow,
    .b-feature__link:hover .b-arrow,
    .b-back__link:hover .b-arrow--back {
        transform: none !important;
    }

    .b-aside {
        position: static;
        max-height: none;
    }
}