@charset "UTF-8";
/*
 * Sitewide multi-column grid object. Ported 1:1 from Scss/Content/_grids.scss. Already pure CSS
 * Grid (no Bootstrap dependency) -- used both for uniform repeating lists (e.g. product listing,
 * .grid-3 in Family/List.html) and for editorial asymmetric multi-column layouts (b13/container's
 * ct-2cols/ct-3cols/ct-4cols/ct-3-2/ct-2-3, rendered via the *Spalter.html container templates).
 *
 * ".grid-58-42"/".grid-75-25" added (CON-1277, Bootstrap ".row"/".col-*" migration) for two
 * one-off asymmetric page layouts that don't match any Bootstrap-column ratio already covered
 * here: Pages/Templates/Default.html's two-column page layout was Bootstrap's ".col-lg-7"/
 * ".col-lg-5" (7:5), Family/Orders.html's main+sidebar split was ".col-lg-9"/".col-lg-3" (9:3 =
 * 3:1) -- both use "fr" units directly (7fr/5fr, 3fr/1fr) rather than rounded percentages, same
 * convention as the existing ".grid-66-33"/".grid-33-66" (2fr/1fr, not "66%/33%").
 *
 * ".grid-4"'s own tablet tier was extended from 2 to 3 columns (CON-1277,
 * same migration): its only real consumer, the b13/container "ct-4cols" content section
 * (4Spalter.html), needs Bootstrap's original ".col-lg-3 col-md-4" behavior (4 per row at
 * lg/≥992px via "-lg-3", 3 per row at md/768-991px via "-md-4") -- the previous 2-per-row md tier
 * only matched a DIFFERENT template (Family/All.html's product listing, migrated in this same
 * step) that needed exactly that ratio. Verified live afterward that 4Spalter.html's existing
 * ct-4cols usage still renders correctly at md with the wider tier.
 */
/*Returns a CSS clamp function which resolves to $size-at-min-width when page width is
below $min-width,
$size-at-max-width when page width is above $max-width,
and linearly scales between the two between $min-width and $max-width*/
@layer templates {
  :where(.grid-2, .grid-3, .grid-4, .grid-66-33, .grid-33-66, .grid-58-42, .grid-75-25) {
    display: grid;
    gap: var(--grid-gutter-s);
    margin-bottom: var(--grid-gutter-s);
  }
  :where(.grid-2, .grid-3, .grid-4, .grid-66-33, .grid-33-66, .grid-58-42, .grid-75-25) .container {
    width: auto;
  }
  @media (min-width: 640px) {
    .grid-2 {
      grid-template-columns: repeat(2, 1fr);
    }
  }
  @media (min-width: 992px) {
    .grid-3 {
      grid-template-columns: repeat(3, 1fr);
    }
  }
  @media (min-width: 640px) {
    .grid-4 {
      grid-template-columns: repeat(2, 1fr);
    }
  }
  @media (min-width: 992px) {
    .grid-4 {
      grid-template-columns: repeat(4, 1fr);
    }
  }
  @media (min-width: 992px) {
    .grid-58-42 {
      grid-template-columns: 7fr 5fr;
    }
  }
  @media (min-width: 992px) {
    .grid-75-25 {
      grid-template-columns: 3fr 1fr;
    }
  }
  .grid-66-33 > div:last-child {
    grid-row: 1;
  }
  @media (min-width: 640px) {
    .grid-66-33 {
      grid-template-columns: 2fr 1fr;
    }
    .grid-66-33 > div:last-child {
      grid-row: auto;
    }
  }
  .grid-33-66 > div:first-child {
    grid-row: 1;
  }
  @media (min-width: 640px) {
    .grid-33-66 {
      grid-template-columns: 1fr 2fr;
    }
  }
  /* Column wrapper must not sit between the grid and a card, else the card's subgrid rows break.
     A shortcut (display:contents) in between only references the card, so it counts as the card itself.
     Subgrid only pays off when every column holds a subgrid card: next to anything else (text, "-fullImg"
     cards without subgrid) the card's rows share tracks with foreign items and get stretched. Such grids
     keep their plain column wrappers. The check sits on the grid, because :has() cannot be nested. */
  :is(.grid-2, .grid-3, .grid-4, .grid-66-33, .grid-33-66, .grid-58-42, .grid-75-25):not(:has(> .grid-col > :not(.card:not(.-fullImg), .linkcard, .frame-type-shortcut),
  > .grid-col > .frame-type-shortcut > :not(.card:not(.-fullImg), .linkcard))) > .grid-col:has(> :is(.card:not(.-fullImg), .linkcard),
  > .frame-type-shortcut > :is(.card:not(.-fullImg), .linkcard)) {
    display: contents;
  }
  /* Card-only grids that fall back to plain column wrappers (e.g. next to a "-fullImg" card) still
     want equal-height cards: a card inside a wrapper does not fill it by itself. Grids with a
     non-card column (text) keep natural card height. */
  :is(.grid-2, .grid-3, .grid-4, .grid-66-33, .grid-33-66, .grid-58-42, .grid-75-25):not(:has(> .grid-col > :not(.card, .linkcard, .frame-type-shortcut))) > .grid-col > .card {
    height: 100%;
    /* Without a subgrid the card's own auto rows would stretch into the extra height (head too tall). */
  }
  :is(.grid-2, .grid-3, .grid-4, .grid-66-33, .grid-33-66, .grid-58-42, .grid-75-25):not(:has(> .grid-col > :not(.card, .linkcard, .frame-type-shortcut))) > .grid-col > .card:not(.-fullImg) {
    align-content: start;
  }
  /* With display:contents the editor's backend columns are flattened into one DOM sequence (col 1 top
     to bottom, then col 2, ...), which would fill the grid row by row in the wrong order. Link cards
     are therefore pinned to their backend column (.-colN set in ContentColumns.html); "dense" lets
     each one take the first free row of its column. Only once the grid really has N columns. */
  @media (min-width: 640px) {
    .grid-2:has(.linkcard) {
      grid-auto-flow: dense;
    }
    .grid-2:has(.linkcard) > .grid-col.-col1 > .linkcard,
    .grid-2:has(.linkcard) > .grid-col.-col1 > .frame-type-shortcut > .linkcard {
      grid-column: 1;
    }
    .grid-2:has(.linkcard) > .grid-col.-col2 > .linkcard,
    .grid-2:has(.linkcard) > .grid-col.-col2 > .frame-type-shortcut > .linkcard {
      grid-column: 2;
    }
  }
  @media (min-width: 992px) {
    .grid-3:has(.linkcard) {
      grid-auto-flow: dense;
    }
    .grid-3:has(.linkcard) > .grid-col.-col1 > .linkcard,
    .grid-3:has(.linkcard) > .grid-col.-col1 > .frame-type-shortcut > .linkcard {
      grid-column: 1;
    }
    .grid-3:has(.linkcard) > .grid-col.-col2 > .linkcard,
    .grid-3:has(.linkcard) > .grid-col.-col2 > .frame-type-shortcut > .linkcard {
      grid-column: 2;
    }
    .grid-3:has(.linkcard) > .grid-col.-col3 > .linkcard,
    .grid-3:has(.linkcard) > .grid-col.-col3 > .frame-type-shortcut > .linkcard {
      grid-column: 3;
    }
  }
  @media (min-width: 992px) {
    .grid-4:has(.linkcard) {
      grid-auto-flow: dense;
    }
    .grid-4:has(.linkcard) > .grid-col.-col1 > .linkcard,
    .grid-4:has(.linkcard) > .grid-col.-col1 > .frame-type-shortcut > .linkcard {
      grid-column: 1;
    }
    .grid-4:has(.linkcard) > .grid-col.-col2 > .linkcard,
    .grid-4:has(.linkcard) > .grid-col.-col2 > .frame-type-shortcut > .linkcard {
      grid-column: 2;
    }
    .grid-4:has(.linkcard) > .grid-col.-col3 > .linkcard,
    .grid-4:has(.linkcard) > .grid-col.-col3 > .frame-type-shortcut > .linkcard {
      grid-column: 3;
    }
    .grid-4:has(.linkcard) > .grid-col.-col4 > .linkcard,
    .grid-4:has(.linkcard) > .grid-col.-col4 > .frame-type-shortcut > .linkcard {
      grid-column: 4;
    }
  }
  /* b13/container "ct-1-3rows" (1-3Zeilen.html): one main column left, right column = up to three
     stacked rows separated by a hairline (Figma "Headline News" section). */
  .grid-1-3rows {
    display: grid;
    gap: var(--gap-xxl) var(--grid-gutter-default);
    margin-bottom: var(--grid-gutter-s);
  }
  @media (min-width: 992px) {
    .grid-1-3rows {
      grid-template-columns: 1fr 1fr;
    }
  }
  .grid-1-3rows__side {
    display: flex;
    flex-direction: column;
    gap: var(--gap-l);
  }
  .grid-1-3rows__row + .grid-1-3rows__row {
    border-top: var(--border-default-width) solid var(--shade-grey-100);
    padding-top: var(--gap-l);
  }
  div[class^=grid-] h2,
  div[class^=grid-] h3 {
    margin-top: 0;
  }
}