/**
 * ST Startseite block_6:
 * View: html_list → Solo-Theme packt <ul> in <div class="item-list">.
 * Grid NUR auf das <ul> – sonst ist das ul nur 1 Zelle (2fr ≈ 640px).
 *
 * @2056px: margin 100px, Lead-Bild 980×400, Zeile 2: 2/3 + 1/3
 * Ab Artikel 3: Spalte = (st_body_inner − 2×20px) / 3
 */

:root {
  --st-startseite-margin-x: clamp(
    10px,
    calc(10px + (100vw - var(--st-logo-vw-min)) * 90 / var(--st-logo-vw-span)),
    100px
  );
  /* Lead: Bild 980×400 @2056 */
  --st-startseite-lead-width: clamp(
    280px,
    calc(280px + (100vw - var(--st-logo-vw-min)) * 700 / var(--st-logo-vw-span)),
    980px
  );
  --st-startseite-grid-gap: var(--st-space-20);
  /* Eine Spalte im 3er-Grid: (st_body_inner − 2×Gap) / 3 */
  --st-startseite-col-3: calc((100% - 2 * var(--st-startseite-grid-gap)) / 3);
}

.st-page--homepage #st_body {
  padding-inline: var(--st-startseite-margin-x) !important;
  box-sizing: border-box;
}

.st-page--homepage #st_body_inner,
.st-page--homepage #st_body_inner .st-homepage-content {
  width: 100%;
  box-sizing: border-box;
}

/* Spaltenbreite bezieht sich auf #st_body_inner (Content-Box nach Padding) */
.st-page--homepage #st_body_inner {
  --st-startseite-col-3: calc((100% - 2 * var(--st-startseite-grid-gap)) / 3);
}

.view-st-startseite.view-display-id-block_6.st-startseite-hero-grid,
.view-id-st_startseite.view-display-id-block_6.st-startseite-hero-grid {
  box-sizing: border-box;
  width: 100%;
  max-width: none;
  margin: 0;
}

/* Solo/Views: äußeres div.item-list – kein Grid */
.view-st-startseite.view-display-id-block_6 .view-content > .item-list,
.view-id-st_startseite.view-display-id-block_6 .view-content > .item-list {
  display: block;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}

/* Grid auf die Liste (<ul>), nicht auf den Wrapper */
.view-st-startseite.view-display-id-block_6 .view-content > .item-list > ul,
.view-st-startseite.view-display-id-block_6 .view-content ul.item-list:not(#st-homepage-grid),
.view-id-st_startseite.view-display-id-block_6 .view-content > .item-list > ul,
.view-id-st_startseite.view-display-id-block_6 .view-content ul.item-list:not(#st-homepage-grid) {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, var(--st-startseite-col-3)));
  grid-auto-rows: auto;
  column-gap: var(--st-startseite-grid-gap);
  row-gap: var(--st-startseite-grid-gap);
  align-items: start;
  width: 100%;
  max-width: none;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Views-Zeilen: Wrapper auflösen */
.view-st-startseite.view-display-id-block_6 .view-content ul.item-list:not(#st-homepage-grid) > li:first-child,
.view-st-startseite.view-display-id-block_6 .view-content ul.item-list:not(#st-homepage-grid) > li:first-child .views-field,
.view-st-startseite.view-display-id-block_6 .view-content ul.item-list:not(#st-homepage-grid) > li:first-child .field-content,
.view-st-startseite.view-display-id-block_6 .view-content ul.item-list:not(#st-homepage-grid) > li:first-child .st-startseite-teaser--lead,
.view-id-st_startseite.view-display-id-block_6 .view-content ul.item-list:not(#st-homepage-grid) > li:first-child,
.view-id-st_startseite.view-display-id-block_6 .view-content ul.item-list:not(#st-homepage-grid) > li:first-child .views-field,
.view-id-st_startseite.view-display-id-block_6 .view-content ul.item-list:not(#st-homepage-grid) > li:first-child .field-content,
.view-id-st_startseite.view-display-id-block_6 .view-content ul.item-list:not(#st-homepage-grid) > li:first-child .st-startseite-teaser--lead,
.view-st-startseite.view-display-id-block_6 .view-content ul.item-list:not(#st-homepage-grid) > li:nth-child(2),
.view-st-startseite.view-display-id-block_6 .view-content ul.item-list:not(#st-homepage-grid) > li:nth-child(2) .views-field,
.view-st-startseite.view-display-id-block_6 .view-content ul.item-list:not(#st-homepage-grid) > li:nth-child(2) .field-content,
.view-st-startseite.view-display-id-block_6 .view-content ul.item-list:not(#st-homepage-grid) > li:nth-child(2) article,
.view-id-st_startseite.view-display-id-block_6 .view-content ul.item-list:not(#st-homepage-grid) > li:nth-child(2),
.view-id-st_startseite.view-display-id-block_6 .view-content ul.item-list:not(#st-homepage-grid) > li:nth-child(2) .views-field,
.view-id-st_startseite.view-display-id-block_6 .view-content ul.item-list:not(#st-homepage-grid) > li:nth-child(2) .field-content,
.view-id-st_startseite.view-display-id-block_6 .view-content ul.item-list:not(#st-homepage-grid) > li:nth-child(2) article {
  display: contents;
}

.view-st-startseite.view-display-id-block_6 .view-content ul.item-list:not(#st-homepage-grid) > li:first-child .st-startseite-teaser__media,
.view-id-st_startseite.view-display-id-block_6 .view-content ul.item-list:not(#st-homepage-grid) > li:first-child .st-startseite-teaser__media {
  grid-column: 1 / -1;
  grid-row: 1;
  width: 100%;
  min-width: 0;
  max-width: var(--st-startseite-lead-width);
  margin-inline: auto;
}

.view-st-startseite.view-display-id-block_6 .view-content ul.item-list:not(#st-homepage-grid) > li:first-child .st-startseite-teaser__media img,
.view-id-st_startseite.view-display-id-block_6 .view-content ul.item-list:not(#st-homepage-grid) > li:first-child .st-startseite-teaser__media img {
  display: block;
  width: 100%;
  max-width: var(--st-startseite-lead-width);
  height: auto;
  max-height: 400px;
  aspect-ratio: 980 / 400;
  object-fit: cover;
}

.view-st-startseite.view-display-id-block_6 .view-content ul.item-list:not(#st-homepage-grid) > li:first-child .st-startseite-teaser__content--lead,
.view-id-st_startseite.view-display-id-block_6 .view-content ul.item-list:not(#st-homepage-grid) > li:first-child .st-startseite-teaser__content--lead {
  grid-column: 1 / 3;
  grid-row: 2;
  min-width: 0;
}

.view-st-startseite.view-display-id-block_6 .view-content ul.item-list:not(#st-homepage-grid) > li:nth-child(2) .st-startseite-teaser__content,
.view-id-st_startseite.view-display-id-block_6 .view-content ul.item-list:not(#st-homepage-grid) > li:nth-child(2) .st-startseite-teaser__content {
  grid-column: 3;
  grid-row: 2;
  min-width: 0;
  align-self: start;
}

.view-st-startseite.view-display-id-block_6 .view-content ul.item-list:not(#st-homepage-grid) > li:nth-child(2) .st-startseite-teaser__media,
.view-st-startseite.view-display-id-block_6 .view-content ul.item-list:not(#st-homepage-grid) > li:nth-child(2) .grid-images,
.view-id-st_startseite.view-display-id-block_6 .view-content ul.item-list:not(#st-homepage-grid) > li:nth-child(2) .st-startseite-teaser__media,
.view-id-st_startseite.view-display-id-block_6 .view-content ul.item-list:not(#st-homepage-grid) > li:nth-child(2) .grid-images {
  display: none;
}

/* Solo clearfix stört Grid-Zellen */
.view-st-startseite.view-display-id-block_6 .view-content ul.item-list:not(#st-homepage-grid) > li::before,
.view-st-startseite.view-display-id-block_6 .view-content ul.item-list:not(#st-homepage-grid) > li::after,
.view-id-st_startseite.view-display-id-block_6 .view-content ul.item-list:not(#st-homepage-grid) > li::before,
.view-id-st_startseite.view-display-id-block_6 .view-content ul.item-list:not(#st-homepage-grid) > li::after {
  content: none;
  display: none;
}

/* Ab Artikel 3: explizite Grid-Zellen (Auto-Placement nach areas war leer) */
.view-st-startseite.view-display-id-block_6 .view-content ul.item-list:not(#st-homepage-grid) > li:nth-child(n + 3),
.view-id-st_startseite.view-display-id-block_6 .view-content ul.item-list:not(#st-homepage-grid) > li:nth-child(n + 3) {
  display: block;
  min-width: 0;
  position: relative;
  z-index: 1;
}

.view-st-startseite.view-display-id-block_6 .view-content ul.item-list:not(#st-homepage-grid) > li:nth-child(3),
.view-id-st_startseite.view-display-id-block_6 .view-content ul.item-list:not(#st-homepage-grid) > li:nth-child(3) {
  grid-column: 1;
  grid-row: 3;
}

.view-st-startseite.view-display-id-block_6 .view-content ul.item-list:not(#st-homepage-grid) > li:nth-child(4),
.view-id-st_startseite.view-display-id-block_6 .view-content ul.item-list:not(#st-homepage-grid) > li:nth-child(4) {
  grid-column: 2;
  grid-row: 3;
}

.view-st-startseite.view-display-id-block_6 .view-content ul.item-list:not(#st-homepage-grid) > li:nth-child(5),
.view-id-st_startseite.view-display-id-block_6 .view-content ul.item-list:not(#st-homepage-grid) > li:nth-child(5) {
  grid-column: 3;
  grid-row: 3;
}

.view-st-startseite.view-display-id-block_6 .view-content ul.item-list:not(#st-homepage-grid) > li:nth-child(6),
.view-id-st_startseite.view-display-id-block_6 .view-content ul.item-list:not(#st-homepage-grid) > li:nth-child(6) {
  grid-column: 1;
  grid-row: 4;
}

.view-st-startseite.view-display-id-block_6 .view-content ul.item-list:not(#st-homepage-grid) > li:nth-child(7),
.view-id-st_startseite.view-display-id-block_6 .view-content ul.item-list:not(#st-homepage-grid) > li:nth-child(7) {
  grid-column: 2;
  grid-row: 4;
}

.view-st-startseite.view-display-id-block_6 .view-content ul.item-list:not(#st-homepage-grid) > li:nth-child(8),
.view-id-st_startseite.view-display-id-block_6 .view-content ul.item-list:not(#st-homepage-grid) > li:nth-child(8) {
  grid-column: 3;
  grid-row: 4;
}

.view-st-startseite.view-display-id-block_6 .view-content ul.item-list:not(#st-homepage-grid) > li:nth-child(n + 3) .st-startseite-teaser--lead,
.view-id-st_startseite.view-display-id-block_6 .view-content ul.item-list:not(#st-homepage-grid) > li:nth-child(n + 3) .st-startseite-teaser--lead {
  display: flex;
  flex-direction: column;
  gap: var(--st-space-10);
}

.view-st-startseite.view-display-id-block_6 .view-content ul.item-list:not(#st-homepage-grid) > li:nth-child(n + 3) .st-startseite-teaser__media,
.view-id-st_startseite.view-display-id-block_6 .view-content ul.item-list:not(#st-homepage-grid) > li:nth-child(n + 3) .st-startseite-teaser__media {
  display: block;
}

.view-st-startseite.view-display-id-block_6 .view-content ul.item-list:not(#st-homepage-grid) > li:nth-child(n + 3),
.view-id-st_startseite.view-display-id-block_6 .view-content ul.item-list:not(#st-homepage-grid) > li:nth-child(n + 3) {
  width: var(--st-startseite-col-3);
  max-width: 100%;
}

.view-st-startseite.view-display-id-block_6 .view-content ul.item-list:not(#st-homepage-grid) > li:nth-child(n + 3) .st-startseite-teaser__media img,
.view-id-st_startseite.view-display-id-block_6 .view-content ul.item-list:not(#st-homepage-grid) > li:nth-child(n + 3) .st-startseite-teaser__media img {
  width: 100%;
  max-width: none;
  max-height: none;
  aspect-ratio: 330 / 220;
  object-fit: cover;
}

.view-st-startseite.view-display-id-block_6 .view-content ul.item-list:not(#st-homepage-grid) > li:nth-child(n + 3) .grid-title,
.view-id-st_startseite.view-display-id-block_6 .view-content ul.item-list:not(#st-homepage-grid) > li:nth-child(n + 3) .grid-title {
  font-size: 1.125rem;
  line-height: 1.3;
}

.view-st-startseite.view-display-id-block_6 .view-content ul.item-list:not(#st-homepage-grid) > li:nth-child(n + 3) .grid-body,
.view-id-st_startseite.view-display-id-block_6 .view-content ul.item-list:not(#st-homepage-grid) > li:nth-child(n + 3) .grid-body {
  font-size: 0.9375rem;
}

.st-startseite-teaser__content {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.st-startseite-teaser .grid-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.5rem;
  font-size: 0.875rem;
}

.st-startseite-teaser .grid-body {
  margin: 0;
  line-height: 1.5;
}

@media (max-width: 768px) {
  .view-st-startseite.view-display-id-block_6 .view-content ul.item-list:not(#st-homepage-grid),
  .view-id-st_startseite.view-display-id-block_6 .view-content ul.item-list:not(#st-homepage-grid) {
    grid-template-columns: minmax(0, 1fr);
  }

  .view-st-startseite.view-display-id-block_6 .view-content ul.item-list:not(#st-homepage-grid) > li:first-child .st-startseite-teaser__media,
  .view-id-st_startseite.view-display-id-block_6 .view-content ul.item-list:not(#st-homepage-grid) > li:first-child .st-startseite-teaser__media {
    grid-column: 1;
    grid-row: 1;
  }

  .view-st-startseite.view-display-id-block_6 .view-content ul.item-list:not(#st-homepage-grid) > li:first-child .st-startseite-teaser__content--lead,
  .view-id-st_startseite.view-display-id-block_6 .view-content ul.item-list:not(#st-homepage-grid) > li:first-child .st-startseite-teaser__content--lead {
    grid-column: 1;
    grid-row: 2;
  }

  .view-st-startseite.view-display-id-block_6 .view-content ul.item-list:not(#st-homepage-grid) > li:nth-child(2) .st-startseite-teaser__content,
  .view-id-st_startseite.view-display-id-block_6 .view-content ul.item-list:not(#st-homepage-grid) > li:nth-child(2) .st-startseite-teaser__content {
    grid-column: 1;
    grid-row: 3;
  }

  .view-st-startseite.view-display-id-block_6 .view-content ul.item-list:not(#st-homepage-grid) > li:first-child,
  .view-st-startseite.view-display-id-block_6 .view-content ul.item-list:not(#st-homepage-grid) > li:first-child .views-field,
  .view-st-startseite.view-display-id-block_6 .view-content ul.item-list:not(#st-homepage-grid) > li:first-child .field-content,
  .view-st-startseite.view-display-id-block_6 .view-content ul.item-list:not(#st-homepage-grid) > li:first-child .st-startseite-teaser--lead,
  .view-st-startseite.view-display-id-block_6 .view-content ul.item-list:not(#st-homepage-grid) > li:nth-child(2),
  .view-st-startseite.view-display-id-block_6 .view-content ul.item-list:not(#st-homepage-grid) > li:nth-child(2) .views-field,
  .view-st-startseite.view-display-id-block_6 .view-content ul.item-list:not(#st-homepage-grid) > li:nth-child(2) .field-content,
  .view-st-startseite.view-display-id-block_6 .view-content ul.item-list:not(#st-homepage-grid) > li:nth-child(2) article,
  .view-id-st_startseite.view-display-id-block_6 .view-content ul.item-list:not(#st-homepage-grid) > li:first-child,
  .view-id-st_startseite.view-display-id-block_6 .view-content ul.item-list:not(#st-homepage-grid) > li:first-child .views-field,
  .view-id-st_startseite.view-display-id-block_6 .view-content ul.item-list:not(#st-homepage-grid) > li:first-child .field-content,
  .view-id-st_startseite.view-display-id-block_6 .view-content ul.item-list:not(#st-homepage-grid) > li:first-child .st-startseite-teaser--lead,
  .view-id-st_startseite.view-display-id-block_6 .view-content ul.item-list:not(#st-homepage-grid) > li:nth-child(2),
  .view-id-st_startseite.view-display-id-block_6 .view-content ul.item-list:not(#st-homepage-grid) > li:nth-child(2) .views-field,
  .view-id-st_startseite.view-display-id-block_6 .view-content ul.item-list:not(#st-homepage-grid) > li:nth-child(2) .field-content,
  .view-id-st_startseite.view-display-id-block_6 .view-content ul.item-list:not(#st-homepage-grid) > li:nth-child(2) article {
    display: block;
  }

  .view-st-startseite.view-display-id-block_6 .view-content ul.item-list:not(#st-homepage-grid) > li:nth-child(3),
  .view-st-startseite.view-display-id-block_6 .view-content ul.item-list:not(#st-homepage-grid) > li:nth-child(4),
  .view-st-startseite.view-display-id-block_6 .view-content ul.item-list:not(#st-homepage-grid) > li:nth-child(5),
  .view-st-startseite.view-display-id-block_6 .view-content ul.item-list:not(#st-homepage-grid) > li:nth-child(6),
  .view-st-startseite.view-display-id-block_6 .view-content ul.item-list:not(#st-homepage-grid) > li:nth-child(7),
  .view-st-startseite.view-display-id-block_6 .view-content ul.item-list:not(#st-homepage-grid) > li:nth-child(8),
  .view-id-st_startseite.view-display-id-block_6 .view-content ul.item-list:not(#st-homepage-grid) > li:nth-child(3),
  .view-id-st_startseite.view-display-id-block_6 .view-content ul.item-list:not(#st-homepage-grid) > li:nth-child(4),
  .view-id-st_startseite.view-display-id-block_6 .view-content ul.item-list:not(#st-homepage-grid) > li:nth-child(5),
  .view-id-st_startseite.view-display-id-block_6 .view-content ul.item-list:not(#st-homepage-grid) > li:nth-child(6),
  .view-id-st_startseite.view-display-id-block_6 .view-content ul.item-list:not(#st-homepage-grid) > li:nth-child(7),
  .view-id-st_startseite.view-display-id-block_6 .view-content ul.item-list:not(#st-homepage-grid) > li:nth-child(8) {
    grid-column: 1;
    grid-row: auto;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .st-page--homepage #st_body_inner {
    --st-startseite-col-3: calc((100% - var(--st-startseite-grid-gap)) / 2);
  }

  .view-st-startseite.view-display-id-block_6 .view-content ul.item-list:not(#st-homepage-grid),
  .view-id-st_startseite.view-display-id-block_6 .view-content ul.item-list:not(#st-homepage-grid) {
    grid-template-columns: repeat(2, minmax(0, var(--st-startseite-col-3)));
  }

  .view-st-startseite.view-display-id-block_6 .view-content ul.item-list:not(#st-homepage-grid) > li:first-child .st-startseite-teaser__content--lead,
  .view-id-st_startseite.view-display-id-block_6 .view-content ul.item-list:not(#st-homepage-grid) > li:first-child .st-startseite-teaser__content--lead {
    grid-column: 1;
  }

  .view-st-startseite.view-display-id-block_6 .view-content ul.item-list:not(#st-homepage-grid) > li:nth-child(2) .st-startseite-teaser__content,
  .view-id-st_startseite.view-display-id-block_6 .view-content ul.item-list:not(#st-homepage-grid) > li:nth-child(2) .st-startseite-teaser__content {
    grid-column: 2;
    grid-row: 2;
  }
}