/*!*************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[4].use[3]!./src/patterns/content-group-home.scss ***!
  \*************************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/* =============================================
   Video thumbnail overlay
   --------------------------------------------
   Used wherever a post with `top_video_id` post-meta is rendered as
   a teaser/hero — the post_thumbnail_html filter (functions.php)
   wraps the image in `<div class="sport1-video-teaser-wrap">` along
   with the play button + duration badge.

   This partial is the base-component layer. Position/size overrides
   for specific contexts (hero teaser, small teaser, slider card) live
   alongside those component styles and reuse these classes.
   ============================================= */
.sport1-video-teaser-wrap {
  position: relative;
  display: block;
  line-height: 0;
}
.sport1-video-teaser-wrap img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}

.sport1-video-teaser-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* Smaller play button variant for teaser thumbnails. Default 48×48 with
   #106BFE blue (highlight sky). Hero/article uses larger size by
   overriding width/height/position in its own scss. */
.sport1-video-play-btn--sm {
  position: absolute;
  bottom: 10px;
  left: 10px;
  width: 48px;
  height: 48px;
  background: #1068fe;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sport1-video-play-btn--sm .sport1-video-play-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}
.sport1-video-play-btn--sm .sport1-video-play-icon svg {
  width: 14px;
  height: 18px;
  fill: #ffffff;
  margin-left: 2px;
}

/* Duration badge — base styles. Position is per-context (hero overrides
   bottom/right). Mirrors the in-block sport1/video block's badge so the
   look is consistent on pages where the video block isn't rendered. */
.sport1-video-duration-badge {
  position: absolute;
  bottom: 24px;
  right: 16px;
  background: #ffffff;
  padding: 2px 6px 2px 4px;
  height: 22px;
  display: flex;
  align-items: center;
  font-family: "Barlow SC Black Italic", "Barlow", sans-serif;
  font-weight: 900;
  font-size: 14px;
  font-style: italic;
  text-transform: uppercase;
  line-height: 18px;
  color: #000000;
  pointer-events: none;
  box-sizing: border-box;
}

/* =============================================
   Section-layout coordinators
   --------------------------------------------
   Spacing rules between siblings inside .sport1-home-section, plus
   right-column flex behavior so ads/newsticker fill the hero's 690
   height. Section padding/background lives in content-group-home.scss;
   these rules govern *flow between* the sections, not the sections
   themselves.

   Newspack's `.wp-block-column > *` defaults to `margin: 32px 0` and
   list-mode articles get `margin-bottom: 1.5em` — both are normalised
   to a 12px sibling gap matching the design system.

   `!important` is preserved here because every selector competes with
   Newspack/WP-core block-editor defaults at matching specificity.
   ============================================= */
/* Reset newspack-parent's `.wp-block-column > * { margin: 32px 0 }`
   inside home sections; sibling spacing is controlled via the next
   rule (12px between adjacent siblings). */
.sport1-home-section .wp-block-column > * {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.sport1-home-section .wp-block-column > * + * {
  margin-top: 12px !important;
}

/* 12px gap between every direct section in the group */
.sport1-home-section .wp-block-newspack-blocks-homepage-articles.sport1-teaser--small {
  margin-top: 12px !important;
}

/* When sport1-teaser--small is the first (and only) block inside a
   column — e.g. the sidebar in the lifestyle pattern — cancel the 12px
   top margin so it sits flush with the hero in the adjacent column. */
.sport1-home-section .wp-block-column > .wp-block-newspack-blocks-homepage-articles.sport1-teaser--small:first-child {
  margin-top: 0 !important;
}

/* In list mode (no postLayout:grid), newspack applies `margin-bottom:
   1.5em` between articles. Normalise to 12px to match the design system. */
.sport1-home-section .wp-block-column .wp-block-newspack-blocks-homepage-articles.sport1-teaser--small article {
  margin-bottom: 12px !important;
}

.sport1-home-section .wp-block-column .wp-block-newspack-blocks-homepage-articles.sport1-teaser--small article:last-of-type {
  margin-bottom: 0 !important;
}

/* ─── Right-column flex behavior (hero row) ───────────────────────── */
/* Ad-unit as a direct child of the right column fills the remaining
   height so the column matches the 690px hero (used in
   content-top-themen and content-without-newsticker). Groups/wrappers
   in content-group-news are not direct children so this doesn't reach
   them — they handle their own column layout. */
.sport1-home-section > .wp-block-columns:first-of-type > .wp-block-column:last-child > .wp-block-sport1-ad-unit {
  flex: 1 !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
}

/* The inner .sport1-ad slot must also stretch so the creative centres
   vertically inside the column. */
.sport1-home-section > .wp-block-columns:first-of-type > .wp-block-column:last-child > .wp-block-sport1-ad-unit .sport1-ad {
  flex: 1 !important;
  height: 100% !important;
}

/* Right column in row 1 is itself a flex column so children with
   `flex: 1` (e.g. the newsticker) can fill it. */
.sport1-home-section > .wp-block-columns:first-of-type > .wp-block-column:last-child {
  display: flex !important;
  flex-direction: column !important;
}

/* =============================================
   Section Header — Title + Chips + Sponsor
   Used in content-without-newsticker pattern.
   ============================================= */
/* Outer row: title+chips on the left, sponsor on the right. */
.sport1-section-header.wp-block-group {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  padding: 0;
  margin-bottom: 12px;
}

/* Left column: title stacked above chips */
.sport1-section-header__left.wp-block-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1 1 auto;
  min-width: 0;
  padding: 0;
}

/* ─── Chips row ───────────────────────────────────────────────────── */
.sport1-section-chips.wp-block-buttons {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 12px;
  margin: 0;
}

.sport1-section-chips .wp-block-button {
  margin: 0;
}

.sport1-section-chips .wp-block-button .wp-block-button__link {
  font-family: "Barlow Regular", sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 22px;
  line-height: 1.375;
  color: #000000;
  background: #ffffff;
  border: 1px solid #e5e5e5;
  border-radius: 999px;
  padding: 8px 10px;
  text-decoration: none;
  display: inline-block;
}

.sport1-section-chips .wp-block-button .wp-block-button__link:hover {
  background: #f5f5f5;
  border-color: #ccc;
}

/* ─── Sponsor column ─────────────────────────────────────────────── */
/* "sponsored by" label + logo. Desktop/tablet: row, gap 12, label
   pinned to top of the tall logo container (Figma). */
.sport1-section-sponsor.wp-block-group {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: flex-start;
  gap: 12px;
  flex-shrink: 0;
  padding: 0;
}

.sport1-sponsor-label {
  font-family: "Barlow Regular", sans-serif;
  font-weight: 400;
  font-size: 12px;
  line-height: 16px;
  line-height: 1.333;
  color: #777777;
  margin: 0;
  white-space: nowrap;
}

/* Logo wrapper: padding 24, rounded 12, centered. */
.sport1-sponsor-logo-wrap.wp-block-group {
  padding: 24px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sport1-sponsor-logo-wrap .wp-block-image {
  margin: 0;
  line-height: 0;
}

.sport1-sponsor-logo-wrap .wp-block-image img {
  display: block;
  height: 46px;
  width: auto;
}

/* ─── Mobile (≤767px) ─────────────────────────────────────────────── */
/* Header stays a single row; sponsor column flips to vertical.
   Logo padding shrinks to 16, image to 32. */
@media (max-width: 767px) {
  .sport1-section-header.wp-block-group {
    flex-wrap: nowrap;
  }
  .sport1-section-header__left.wp-block-group {
    flex: 0 0 calc(50% - 6px);
    min-width: 0;
  }
  .sport1-section-title.wp-block-heading {
    font-size: 32px;
    line-height: 1.125;
  }
  .sport1-section-sponsor.wp-block-group {
    flex: 0 0 calc(50% - 6px);
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
  }
  .sport1-sponsor-logo-wrap.wp-block-group {
    padding: 16px;
  }
  .sport1-sponsor-logo-wrap .wp-block-image img {
    height: 32px;
  }
}
/* =============================================
   Horizontal Teaser — newspack-blocks variant
   Used in Top Themen pattern (.sport1-horizontal-teaser className).

   Desktop:  image 525×350 left, body right with grid layout
             (title row 1, excerpt row 2, spacer 1fr, meta row 4).
   Tablet:   flips to vertical card; excerpt hidden.
   Mobile:   smaller title (24/30) and meta (14/20).
   ============================================= */
.wp-block-newspack-blocks-homepage-articles.sport1-horizontal-teaser article {
  display: flex;
  flex-direction: row;
  border: 1px solid #e5e5e5;
  border-radius: 12px;
  background: #ffffff;
  overflow: hidden;
  box-sizing: border-box;
}
.wp-block-newspack-blocks-homepage-articles.sport1-horizontal-teaser .post-thumbnail {
  flex: 0 0 525px;
  width: 525px;
  margin: 0;
  overflow: hidden;
  line-height: 0;
}
.wp-block-newspack-blocks-homepage-articles.sport1-horizontal-teaser .post-thumbnail img {
  width: 100%;
  height: 350px;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}
.wp-block-newspack-blocks-homepage-articles.sport1-horizontal-teaser {
  /*
   * entry-wrapper grid:
   * Newspack-blocks renders children as cat-links → entry-title → <p>
   * (bare excerpt) → entry-meta. The bare <p> has no class, so flex
   * `order` tricks aren't reliable. Grid lets us pin each piece by
   * row/column directly.
   *
   *   row 1 — title       (auto)
   *   row 2 — excerpt     (auto)
   *   row 3 — spacer 1fr  (pushes meta to bottom)
   *   row 4 — meta        (cat left, date right)
   */
}
.wp-block-newspack-blocks-homepage-articles.sport1-horizontal-teaser .entry-wrapper {
  flex: 1;
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  grid-template-columns: 1fr auto;
  padding: 12px;
  box-sizing: border-box;
  row-gap: 12px;
  -moz-column-gap: 0;
       column-gap: 0;
}
.wp-block-newspack-blocks-homepage-articles.sport1-horizontal-teaser .entry-title {
  grid-row: 1;
  grid-column: 1/-1;
  font-family: "Barlow Bold", sans-serif;
  font-weight: 700;
  font-size: 32px;
  line-height: 1.3125;
  color: #000000;
  margin: 0;
}
.wp-block-newspack-blocks-homepage-articles.sport1-horizontal-teaser .entry-title a, .wp-block-newspack-blocks-homepage-articles.sport1-horizontal-teaser .entry-title a:hover, .wp-block-newspack-blocks-homepage-articles.sport1-horizontal-teaser .entry-title a:focus {
  color: inherit;
  text-decoration: none;
}
.wp-block-newspack-blocks-homepage-articles.sport1-horizontal-teaser {
  /* Bare <p> excerpt newspack outputs */
}
.wp-block-newspack-blocks-homepage-articles.sport1-horizontal-teaser .entry-wrapper > p {
  grid-row: 2;
  grid-column: 1/-1;
  font-family: "Barlow Regular", sans-serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 24px;
  color: #000000;
  margin: 0;
  overflow: hidden;
}
.wp-block-newspack-blocks-homepage-articles.sport1-horizontal-teaser .cat-links {
  grid-row: 4;
  grid-column: 1;
  display: flex;
  align-items: center;
  font-family: "Barlow Regular", sans-serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 24px;
  color: #000000;
}
.wp-block-newspack-blocks-homepage-articles.sport1-horizontal-teaser .cat-links a, .wp-block-newspack-blocks-homepage-articles.sport1-horizontal-teaser .cat-links a:hover, .wp-block-newspack-blocks-homepage-articles.sport1-horizontal-teaser .cat-links a:focus {
  color: inherit;
  text-decoration: none;
  text-transform: uppercase;
}
.wp-block-newspack-blocks-homepage-articles.sport1-horizontal-teaser .entry-meta {
  grid-row: 4;
  grid-column: 2;
  display: flex;
  align-items: center;
}
.wp-block-newspack-blocks-homepage-articles.sport1-horizontal-teaser .entry-meta .entry-date {
  font-family: "Barlow Regular", sans-serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 24px;
  color: #000000;
}
.wp-block-newspack-blocks-homepage-articles.sport1-horizontal-teaser {
  /* ─── Tablet (≤1024px): flip to vertical card ─────────────────── */
}
@media (max-width: 1024px) {
  .wp-block-newspack-blocks-homepage-articles.sport1-horizontal-teaser article {
    flex-direction: column;
  }
  .wp-block-newspack-blocks-homepage-articles.sport1-horizontal-teaser .post-thumbnail {
    flex: 0 0 auto;
    width: 100%;
  }
  .wp-block-newspack-blocks-homepage-articles.sport1-horizontal-teaser .post-thumbnail img {
    width: 100%;
    height: auto;
    aspect-ratio: 3/2;
  }
  .wp-block-newspack-blocks-homepage-articles.sport1-horizontal-teaser .entry-wrapper {
    grid-template-rows: auto 1fr auto;
  }
  .wp-block-newspack-blocks-homepage-articles.sport1-horizontal-teaser .entry-wrapper > p {
    display: none;
  }
}
.wp-block-newspack-blocks-homepage-articles.sport1-horizontal-teaser {
  /* ─── Mobile (≤767px): smaller type ───────────────────────────── */
}
@media (max-width: 767px) {
  .wp-block-newspack-blocks-homepage-articles.sport1-horizontal-teaser .entry-title {
    font-size: 24px;
    line-height: 30px;
  }
  .wp-block-newspack-blocks-homepage-articles.sport1-horizontal-teaser .cat-links,
  .wp-block-newspack-blocks-homepage-articles.sport1-horizontal-teaser .entry-meta .entry-date {
    font-size: 14px;
    line-height: 20px;
  }
}

/* =============================================
   Sport1 Slider — horizontal-scroll teaser strip.
   Used in the content-sport1-slider pattern.

   Figma: container 1113×421, padding 36, gap 12, radius 12, white bg.
          4 visible cards on desktop (~290px each).

   All selectors are scoped under `.sport1-slider-section` to avoid
   bleeding into other homepage patterns.

   DOM (newspack-blocks/homepage-articles output):
     .sport1-slider-section                          ← wp:group wrapper
       └ .wpnbha.is-grid.columns-4.sport1-slider     ← outer block
           └ div                                       ← inner flex wrapper
               ├ article
               ├ …
   ============================================= */
.sport1-slider-section {
  background: #ffffff;
  border-radius: 12px;
  padding: 36px;
  position: relative;
  contain: inline-size;
  overflow: hidden;
  box-sizing: border-box;
  /* ─── Outer newspack block ─────────────────────────────────── */
}
.sport1-slider-section .sport1-slider {
  position: relative;
  overflow: hidden;
  min-width: 0;
  box-sizing: border-box;
  /* Inner flex wrapper — the actual scroll container.
     Newspack-blocks ships `.wpnbha.is-grid > div { display:flex;
     flex-flow:row wrap; gap:var(--wpnbha-col-gap) }` at the same
     specificity as `.sport1-slider > div`, so we need !important
     to flip it to nowrap + horizontal scroll. */
}
.sport1-slider-section .sport1-slider > div {
  display: flex !important;
  flex-flow: row nowrap !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  gap: 12px !important;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 4px;
  min-width: 0;
}
.sport1-slider-section .sport1-slider > div::-webkit-scrollbar {
  display: none;
}
.sport1-slider-section .sport1-slider {
  /* ─── Each teaser card ─────────────────────────────────── */
  /* Spec: Figma node 808:48615 (Teaser, Style=VerticalTeaser,
     Size=XS). 290×293: image 290×193 (3:2), body 100 fixed
     (padding 12, gap 8, title clamps to 2 × 26 = 52, meta 16).
     Newspack ships `.wpnbha.is-grid article { flex-basis: 100%;
     margin-bottom: 0 }` with matching specificity, so flex
     sizing here also needs !important. */
}
.sport1-slider-section .sport1-slider article {
  flex: 0 0 290px !important;
  width: 290px !important;
  max-width: none;
  display: flex;
  flex-direction: column;
  border: 1px solid #e5e5e5;
  border-radius: 12px;
  background: #ffffff;
  overflow: hidden;
  box-sizing: border-box;
  scroll-snap-align: start;
  margin: 0;
}
.sport1-slider-section .sport1-slider {
  /* Image — 290×193 fixed (3:2) */
}
.sport1-slider-section .sport1-slider .post-thumbnail {
  flex: 0 0 193px;
  height: 193px;
  margin: 0;
  overflow: hidden;
  line-height: 0;
}
.sport1-slider-section .sport1-slider .post-thumbnail img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}
.sport1-slider-section .sport1-slider {
  /* Body — locked to 100 (Figma spec: spacing-6 padding,
     spacing-4 gap, height fixed 100). Single-column grid lays
     the headline (52px frame) above the channel/cat row (16).
     Date is intentionally hidden on slider cards per design.
     !important on flex/height fights Newspack's
     `.wpnbha.image-alignright .post-has-image .entry-wrapper
     { flex-basis: 67% }` (higher specificity). */
}
.sport1-slider-section .sport1-slider .entry-wrapper {
  flex: 0 0 100px !important;
  height: 100px !important;
  padding: 12px !important;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas: "title" "cat";
  grid-template-rows: 52px auto;
  gap: 8px;
}
.sport1-slider-section .sport1-slider .entry-title {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
  grid-area: title;
  margin: 0;
  font-family: "Barlow Bold", sans-serif;
  font-weight: 700;
  font-size: 20px;
  line-height: 26px;
  color: #000000;
  height: 52px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.sport1-slider-section .sport1-slider .entry-title a, .sport1-slider-section .sport1-slider .entry-title a:visited, .sport1-slider-section .sport1-slider .entry-title a:hover, .sport1-slider-section .sport1-slider .entry-title a:focus {
  color: inherit;
  text-decoration: none;
}
.sport1-slider-section .sport1-slider .cat-links {
  -ms-grid-row: 3;
  -ms-grid-column: 1;
  grid-area: cat;
  margin: 0;
  font-family: "Barlow Regular", sans-serif;
  font-weight: 400;
  font-size: 12px;
  line-height: 16px;
  color: #000000;
  text-transform: uppercase;
  min-width: 0;
}
.sport1-slider-section .sport1-slider .cat-links a, .sport1-slider-section .sport1-slider .cat-links a:visited, .sport1-slider-section .sport1-slider .cat-links a:hover, .sport1-slider-section .sport1-slider .cat-links a:focus {
  color: inherit;
  text-decoration: none;
}
.sport1-slider-section .sport1-slider .entry-meta {
  display: none;
}
.sport1-slider-section {
  /* ─── Forward / back arrow buttons (injected by sport1-slider.js) ──
     40×40 sharp-cornered square. 24×24 white chevron via CSS mask.
     The button's [hidden] attribute is toggled by the JS based on
     scroll position: at scroll start only --next is visible,
     mid-scroll both, at scroll end only --prev. */
}
.sport1-slider-section .sport1-slider-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 0;
  background: #000000;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
  transition: opacity 0.15s ease-in-out;
  padding: 0;
  line-height: 1;
}
.sport1-slider-section .sport1-slider-arrow:hover, .sport1-slider-section .sport1-slider-arrow:focus-visible {
  opacity: 0.85;
}
.sport1-slider-section .sport1-slider-arrow--prev {
  left: -4px;
}
.sport1-slider-section .sport1-slider-arrow--next {
  right: -4px;
}
.sport1-slider-section .sport1-slider-arrow[hidden] {
  display: none;
}
.sport1-slider-section .sport1-slider-arrow .sport1-slider-arrow__icon {
  display: block;
  width: 24px;
  height: 24px;
  background-color: #ffffff;
  -webkit-mask-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMTgiIHZpZXdCb3g9IjAgMCAyNCAyNCIgd2lkdGg9IjE4Ij4KCTxwYXRoIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiLz4KCTxwYXRoIGQ9Ik0xMCA2TDguNTkgNy40MSAxMy4xNyAxMmwtNC41OCA0LjU5TDEwIDE4bDYtNnoiLz4KPC9zdmc+Cg==);
  mask-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMTgiIHZpZXdCb3g9IjAgMCAyNCAyNCIgd2lkdGg9IjE4Ij4KCTxwYXRoIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiLz4KCTxwYXRoIGQ9Ik0xMCA2TDguNTkgNy40MSAxMy4xNyAxMmwtNC41OCA0LjU5TDEwIDE4bDYtNnoiLz4KPC9zdmc+Cg==);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: center;
  mask-position: center;
}
.sport1-slider-section .sport1-slider-arrow--prev .sport1-slider-arrow__icon {
  transform: scaleX(-1);
}

/* ─── Responsive ──────────────────────────────────────────────────── */
/* Tablet: cards stay 290 fixed; user just scrolls more to see all of
   them. Mobile: cards expand to 75vw so one mostly fills the screen. */
@media (max-width: 767px) {
  .sport1-slider-section {
    padding: 16px;
  }
  .sport1-slider-section .sport1-slider article {
    flex: 0 0 75vw !important;
    width: 75vw !important;
    min-width: 220px;
  }
  .sport1-slider-section .sport1-slider-arrow {
    display: none;
  }
}
/* =============================================
   Content Top Themen pattern
   --------------------------------------------
   Two-row layout:
     Row 1: hero teaser (left) | newsticker + ad (right column)
     Row 2: 2 single teasers side-by-side + ad full-width below

   Tablet (768–1024) reflows the bottom row to 2 teasers + 1 ad. Mobile
   relies on the global column-stacking rule.
   ============================================= */
@media (min-width: 768px) and (max-width: 1024px) {
  /* Bottom ad-row: 2 single teasers + ad full-width.
     Two selectors — class-based for new pattern inserts, structural
     :has() for existing DB content. The :has(> .wp-block-column:nth-child(3))
     targets 3-column rows only, safely excluding the 2-column blocks
     in content-group-home / content-group-home-tall-ad. */
  .sport1-top-themen-ad-row.wp-block-columns,
  .wp-block-columns.is-not-stacked-on-mobile:has(> .wp-block-column:nth-child(3)) {
    flex-wrap: wrap !important;
  }
  .sport1-top-themen-ad-row.wp-block-columns > .wp-block-column:not(:last-child),
  .wp-block-columns.is-not-stacked-on-mobile:has(> .wp-block-column:nth-child(3)) > .wp-block-column:not(:last-child) {
    flex-basis: calc(50% - 6px) !important;
    flex-grow: 0 !important;
    flex-shrink: 1 !important;
    max-width: calc(50% - 6px) !important;
    width: calc(50% - 6px) !important;
  }
  .sport1-top-themen-ad-row.wp-block-columns > .wp-block-column:last-child,
  .wp-block-columns.is-not-stacked-on-mobile:has(> .wp-block-column:nth-child(3)) > .wp-block-column:last-child {
    flex-basis: 100% !important;
    flex-grow: 1 !important;
  }
  /* Right column of row 1: switch to flex-row so ad + teaser sit
     side-by-side at the same calc(50% - 6px) width as the teaser
     grid below. align-items: stretch lets the ad placeholder
     auto-height to match the teaser. */
  .sport1-top-themen-section > .wp-block-columns:first-of-type > .wp-block-column:last-child {
    flex-direction: row !important;
    align-items: stretch !important;
    gap: 12px !important;
  }
  .sport1-top-themen-section > .wp-block-columns:first-of-type > .wp-block-column:last-child > * {
    flex: 0 0 calc(50% - 6px) !important;
    width: calc(50% - 6px) !important;
    min-width: 0 !important;
  }
  /* Single teaser article inside the right column: fill 100% of its
     newspack wrapper, not 50%-6px from the global rule. */
  .sport1-top-themen-section > .wp-block-columns:first-of-type > .wp-block-column:last-child .sport1-teaser--small article {
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
  }
}
/* =============================================
   Content Without Newsticker pattern
   --------------------------------------------
   Hero teaser left, 300×600 ad column right. The ad column is always
   300px wide; on desktop it stretches to match the hero height via
   flex; on tablet/mobile (when columns stack) it stays a fixed 300px
   centered, with the ad falling back to a 1:2 aspect-ratio box.
   ============================================= */
/* Desktop: right column is a flex column so the ad wrapper fills the
   full hero height. align-items: stretch (flex default) makes both
   columns the same height. */
.sport1-without-newsticker-section > .wp-block-columns > .wp-block-column:last-child {
  display: flex !important;
  flex-direction: column !important;
}

.sport1-without-newsticker-section > .wp-block-columns > .wp-block-column:last-child > * {
  flex: 1 1 auto !important;
  min-height: 0 !important;
}

/* Tablet/mobile: the global column-stacking rule (ad-layout.scss) forces
   columns to 100% width. Override the right column back to 300px so the
   ad keeps its fixed width; the hero stacks above on its own row. */
@media (max-width: 1024px) {
  .sport1-without-newsticker-section > .wp-block-columns > .wp-block-column:last-child {
    flex-basis: 300px !important;
    width: 300px !important;
    max-width: 300px !important;
    flex-grow: 0 !important;
    flex-shrink: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}
/* =============================================
   Content Group News pattern
   --------------------------------------------
   Right column: newsticker (5 items, always) + ad fills remaining
   height. The right column is already display:flex; flex-direction:
   column from the shared section-layout.scss rule.
   ============================================= */
.sport1-news-group-section .sport1-news-group-ad {
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
  margin-top: 12px !important;
  min-height: 0 !important;
}

/* =============================================
   content-group-home pattern
   --------------------------------------------
   Section container, section title, hero teaser, small teaser cards.
   Spec: Figma node 808:48572 (file vvrlnhetztojXwjVJpNjEh).

   The hero teaser and small teaser cards both target newspack-blocks/
   homepage-articles output (we attach `sport1-hero-teaser` /
   `sport1-teaser--small` via the pattern's className), so most of the
   selectors below are shape-matching against newspack's DOM:
       <article>
         <figure class="post-thumbnail"> … </figure>
         <div class="entry-wrapper">
           <div class="cat-links"> … </div>
           <h2 class="entry-title"> … </h2>
           <div class="entry-meta"> <time class="entry-date"/> … </div>
         </div>
       </article>

   `!important` is used sparingly — only where Newspack ships a default
   that has equal or higher specificity (e.g. inline styles or theme
   fallbacks).
   ============================================= */
/* ─── Section container ─────────────────────────────────────────────── */
.sport1-home-section {
  background-color: #ffffff;
  padding: 36px;
  border-radius: 12px;
}
@media (max-width: 1024px) {
  .sport1-home-section {
    padding: 24px !important;
    background: transparent !important;
  }
}
@media (max-width: 767px) {
  .sport1-home-section {
    padding: 12px !important;
  }
}

@media (max-width: 767px) {
  #primary {
    max-width: 100% !important;
    width: 100% !important;
  }
  .sport1-section-heading {
    font-size: 28px !important;
    margin-bottom: 8px !important;
  }
}
/* ─── Section title ─────────────────────────────────────────────────── */
.sport1-section-title:empty,
.sport1-section-heading:empty {
  display: none;
}

.sport1-section-title.wp-block-heading,
.sport1-section-heading {
  font-family: "Barlow SC Black Italic", sans-serif;
  font-style: italic;
  font-weight: 900;
  font-size: 40px;
  line-height: 48px;
  line-height: 1.1;
  text-transform: uppercase;
  color: #000000;
  margin: 0 0 12px;
  display: flex;
  align-items: center;
  gap: 6px;
}
@media (max-width: 767px) {
  .sport1-section-title.wp-block-heading,
  .sport1-section-heading {
    font-size: 28px;
    line-height: 36px;
    line-height: 1.1;
  }
}

.sport1-section-title.wp-block-heading:has(a)::after {
  content: "";
  display: inline-block;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  background-color: currentColor;
  -webkit-mask-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMTgiIHZpZXdCb3g9IjAgMCAyNCAyNCIgd2lkdGg9IjE4Ij4KCTxwYXRoIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiLz4KCTxwYXRoIGQ9Ik0xMCA2TDguNTkgNy40MSAxMy4xNyAxMmwtNC41OCA0LjU5TDEwIDE4bDYtNnoiLz4KPC9zdmc+Cg==);
  mask-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMTgiIHZpZXdCb3g9IjAgMCAyNCAyNCIgd2lkdGg9IjE4Ij4KCTxwYXRoIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiLz4KCTxwYXRoIGQ9Ik0xMCA2TDguNTkgNy40MSAxMy4xNyAxMmwtNC41OCA0LjU5TDEwIDE4bDYtNnoiLz4KPC9zdmc+Cg==);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: center;
  mask-position: center;
}

/* ─── Hero teaser (left column, mediaPosition=behind) ──────────────── */
/* Square 690×690 on desktop; 3:2 image-only on mobile.
   The image is the article's background; gradient + content layered
   absolutely on top so the headline sits at the bottom-left. */
.wp-block-newspack-blocks-homepage-articles.sport1-hero-teaser article {
  position: relative;
  margin: 0;
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 1/1;
  background-color: #a1a1a9;
}
.wp-block-newspack-blocks-homepage-articles.sport1-hero-teaser .post-thumbnail {
  position: absolute;
  inset: 0;
  margin: 0;
  z-index: 0;
}
.wp-block-newspack-blocks-homepage-articles.sport1-hero-teaser .post-thumbnail a {
  display: block;
  width: 100%;
  height: 100%;
}
.wp-block-newspack-blocks-homepage-articles.sport1-hero-teaser .post-thumbnail img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}
.wp-block-newspack-blocks-homepage-articles.sport1-hero-teaser .post-thumbnail::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.9) 100%);
  pointer-events: none;
}
.wp-block-newspack-blocks-homepage-articles.sport1-hero-teaser .entry-wrapper {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  padding: 24px;
  display: grid;
  grid-template-areas: "title title" "cat   date";
  grid-template-rows: 1fr auto;
  gap: 12px;
  color: #ffffff;
}
.wp-block-newspack-blocks-homepage-articles.sport1-hero-teaser .entry-title {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
  grid-area: title;
  margin: 0;
  font-family: "Barlow Bold", sans-serif;
  font-weight: 700;
  font-size: 36px;
  line-height: 46px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.wp-block-newspack-blocks-homepage-articles.sport1-hero-teaser .entry-title a, .wp-block-newspack-blocks-homepage-articles.sport1-hero-teaser .entry-title a:visited, .wp-block-newspack-blocks-homepage-articles.sport1-hero-teaser .entry-title a:hover, .wp-block-newspack-blocks-homepage-articles.sport1-hero-teaser .entry-title a:focus {
  color: #ffffff;
  text-decoration: none;
}
.wp-block-newspack-blocks-homepage-articles.sport1-hero-teaser .cat-links {
  -ms-grid-row: 3;
  -ms-grid-column: 1;
  grid-area: cat;
  margin: 0;
  font-family: "Barlow Regular", sans-serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 24px;
}
.wp-block-newspack-blocks-homepage-articles.sport1-hero-teaser .cat-links a, .wp-block-newspack-blocks-homepage-articles.sport1-hero-teaser .cat-links a:visited, .wp-block-newspack-blocks-homepage-articles.sport1-hero-teaser .cat-links a:hover, .wp-block-newspack-blocks-homepage-articles.sport1-hero-teaser .cat-links a:focus {
  color: #ffffff;
  text-decoration: none;
  text-transform: uppercase;
}
.wp-block-newspack-blocks-homepage-articles.sport1-hero-teaser .entry-meta {
  -ms-grid-row: 3;
  -ms-grid-column: 3;
  grid-area: date;
  justify-self: end;
  font-family: "Barlow Regular", sans-serif;
  font-size: 18px;
  line-height: 24px;
  color: #ffffff;
}
.wp-block-newspack-blocks-homepage-articles.sport1-hero-teaser .entry-meta .entry-date,
.wp-block-newspack-blocks-homepage-articles.sport1-hero-teaser .entry-meta time {
  color: #ffffff;
}
.wp-block-newspack-blocks-homepage-articles.sport1-hero-teaser .post-thumbnail .sport1-video-teaser-wrap {
  position: absolute;
  inset: 0;
}
.wp-block-newspack-blocks-homepage-articles.sport1-hero-teaser .post-thumbnail:has(.sport1-video-teaser-wrap)::after {
  display: none;
}
.wp-block-newspack-blocks-homepage-articles.sport1-hero-teaser .sport1-hero-gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.9) 100%);
  pointer-events: none;
}
.wp-block-newspack-blocks-homepage-articles.sport1-hero-teaser .sport1-video-play-btn--sm {
  width: 96px;
  height: 96px;
  bottom: 172px;
  left: 24px;
  top: auto;
}
.wp-block-newspack-blocks-homepage-articles.sport1-hero-teaser .sport1-video-play-btn--sm .sport1-video-play-icon svg {
  width: 29px;
  height: 37px;
}
.wp-block-newspack-blocks-homepage-articles.sport1-hero-teaser .sport1-video-duration-badge {
  bottom: 172px;
  right: 24px;
  top: auto;
  font-size: 20px;
  height: 28px;
}
@media (max-width: 767px) {
  .wp-block-newspack-blocks-homepage-articles.sport1-hero-teaser .entry-wrapper {
    padding: 12px;
    gap: 12px;
  }
  .wp-block-newspack-blocks-homepage-articles.sport1-hero-teaser .entry-title {
    font-size: 24px;
    line-height: 32px;
    -webkit-line-clamp: 2;
  }
  .wp-block-newspack-blocks-homepage-articles.sport1-hero-teaser .cat-links,
  .wp-block-newspack-blocks-homepage-articles.sport1-hero-teaser .cat-links a,
  .wp-block-newspack-blocks-homepage-articles.sport1-hero-teaser .entry-meta time {
    font-size: 12px;
    line-height: 16px;
  }
  .wp-block-newspack-blocks-homepage-articles.sport1-hero-teaser .sport1-video-play-btn--sm {
    width: 72px;
    height: 72px;
    bottom: 116px;
    left: 12px;
  }
  .wp-block-newspack-blocks-homepage-articles.sport1-hero-teaser .sport1-video-play-btn--sm .sport1-video-play-icon svg {
    width: 22px;
    height: 28px;
  }
  .wp-block-newspack-blocks-homepage-articles.sport1-hero-teaser .sport1-video-duration-badge {
    bottom: 116px;
    right: 12px;
    font-size: 14px;
    height: 22px;
  }
}

/* ─── Small teaser cards (3-up grid) ───────────────────────────────── */
/* Spec: Figma node 808:52431 (Teaser, Style=VerticalTeaser, Size=S).
     Outer:    339 wide × hug, 1px #E5E5E5 border, 12px radius.
     Image:    339 × 226 fixed (3:2).
     Body:     12px padding, 10px gap, column.
       Title frame: 60px fixed = 2 lines × 30px line-height (Title M Bold).
       Meta row:    fill horizontal — channel (4px right padding) + date right.
   Card height resolves to image 226 + body 110 = 336 px regardless of
   how short the headline is, because the title frame is height-locked.
   Newspack-blocks ships a 32px grid gap via --wpnbha-col-gap; we pin it
   to 12px so cards land at 339 wide on a 1041 content area. */
.wp-block-newspack-blocks-homepage-articles.sport1-teaser--small {
  --wpnbha-col-gap: 12px;
}
.wp-block-newspack-blocks-homepage-articles.sport1-teaser--small article {
  margin: 0;
  background-color: #ffffff;
  border: 1px solid #e5e5e5;
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.wp-block-newspack-blocks-homepage-articles.sport1-teaser--small .post-thumbnail {
  margin: 0;
  line-height: 0;
}
.wp-block-newspack-blocks-homepage-articles.sport1-teaser--small .post-thumbnail a {
  display: block;
}
.wp-block-newspack-blocks-homepage-articles.sport1-teaser--small .post-thumbnail img {
  display: block;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.wp-block-newspack-blocks-homepage-articles.sport1-teaser--small .post-thumbnail > a,
.wp-block-newspack-blocks-homepage-articles.sport1-teaser--small .post-thumbnail .sport1-video-teaser-wrap {
  display: block;
  width: 100%;
  height: 100%;
}
.wp-block-newspack-blocks-homepage-articles.sport1-teaser--small .entry-wrapper {
  padding: 12px;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "title title" "cat   date";
  gap: 10px;
  box-sizing: border-box;
}
@media (min-width: 1025px) {
  .wp-block-newspack-blocks-homepage-articles.sport1-teaser--small article {
    height: 336px;
  }
  .wp-block-newspack-blocks-homepage-articles.sport1-teaser--small .post-thumbnail {
    flex: 0 0 226px;
    height: 226px;
  }
  .wp-block-newspack-blocks-homepage-articles.sport1-teaser--small .post-thumbnail a {
    width: 100%;
    height: 100%;
  }
  .wp-block-newspack-blocks-homepage-articles.sport1-teaser--small .post-thumbnail img {
    height: 100%;
  }
  .wp-block-newspack-blocks-homepage-articles.sport1-teaser--small .entry-wrapper {
    flex: 0 0 110px;
    height: 110px;
  }
}
.wp-block-newspack-blocks-homepage-articles.sport1-teaser--small .entry-title {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
  grid-area: title;
  margin: 0;
  font-family: "Barlow Bold", sans-serif;
  font-weight: 700;
  font-size: 22px;
  line-height: 30px;
  color: #000000;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.wp-block-newspack-blocks-homepage-articles.sport1-teaser--small .entry-title a, .wp-block-newspack-blocks-homepage-articles.sport1-teaser--small .entry-title a:visited, .wp-block-newspack-blocks-homepage-articles.sport1-teaser--small .entry-title a:hover, .wp-block-newspack-blocks-homepage-articles.sport1-teaser--small .entry-title a:focus {
  color: inherit;
  text-decoration: none;
}
@media (min-width: 1025px) {
  .wp-block-newspack-blocks-homepage-articles.sport1-teaser--small .entry-title {
    height: 60px;
  }
}
.wp-block-newspack-blocks-homepage-articles.sport1-teaser--small .cat-links {
  -ms-grid-row: 3;
  -ms-grid-column: 1;
  grid-area: cat;
  margin: 0;
  padding-right: 4px;
  font-family: "Barlow Regular", sans-serif;
  font-weight: 400;
  font-size: 12px;
  line-height: 16px;
  color: #000000;
  text-transform: uppercase;
  min-width: 0;
}
.wp-block-newspack-blocks-homepage-articles.sport1-teaser--small .cat-links a, .wp-block-newspack-blocks-homepage-articles.sport1-teaser--small .cat-links a:visited, .wp-block-newspack-blocks-homepage-articles.sport1-teaser--small .cat-links a:hover, .wp-block-newspack-blocks-homepage-articles.sport1-teaser--small .cat-links a:focus {
  color: inherit;
  text-decoration: none;
}
.wp-block-newspack-blocks-homepage-articles.sport1-teaser--small .entry-meta {
  -ms-grid-row: 3;
  -ms-grid-column: 3;
  grid-area: date;
  justify-self: end;
  font-family: "Barlow Regular", sans-serif;
  font-size: 12px;
  line-height: 16px;
  color: #000000;
}
.wp-block-newspack-blocks-homepage-articles.sport1-teaser--small .entry-meta .entry-date,
.wp-block-newspack-blocks-homepage-articles.sport1-teaser--small .entry-meta time {
  color: #000000;
}
@media (min-width: 768px) and (max-width: 1024px) {
  .wp-block-newspack-blocks-homepage-articles.sport1-teaser--small > div {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
  }
  .wp-block-newspack-blocks-homepage-articles.sport1-teaser--small article {
    border: none !important;
    flex: 0 0 calc(50% - 6px) !important;
    width: calc(50% - 6px) !important;
    max-width: calc(50% - 6px) !important;
    min-width: 0 !important;
  }
}
@media (max-width: 767px) {
  .wp-block-newspack-blocks-homepage-articles.sport1-teaser--small article {
    flex-direction: row !important;
    flex: 0 0 100% !important;
    width: 100% !important;
    height: 120px !important;
    min-height: unset !important;
    background: #ffffff !important;
    border: none !important;
    border-radius: 12px !important;
    overflow: hidden !important;
  }
  .wp-block-newspack-blocks-homepage-articles.sport1-teaser--small .post-thumbnail {
    flex: 0 0 180px !important;
    width: 180px !important;
    height: 120px !important;
    padding: 0 !important;
    margin: 0 !important;
    align-self: stretch !important;
  }
  .wp-block-newspack-blocks-homepage-articles.sport1-teaser--small .post-thumbnail > a,
  .wp-block-newspack-blocks-homepage-articles.sport1-teaser--small .post-thumbnail .sport1-video-teaser-wrap {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
  }
  .wp-block-newspack-blocks-homepage-articles.sport1-teaser--small .post-thumbnail img {
    width: 180px !important;
    height: 100% !important;
    aspect-ratio: auto !important;
    -o-object-fit: cover !important;
       object-fit: cover !important;
  }
  .wp-block-newspack-blocks-homepage-articles.sport1-teaser--small .entry-wrapper {
    align-self: stretch !important;
    padding: 12px !important;
    gap: 8px !important;
  }
  .wp-block-newspack-blocks-homepage-articles.sport1-teaser--small .entry-title {
    font-size: 18px !important;
    line-height: 24px !important;
  }
}

/* ─── 2-up sidebar (lifestyle: hero + 2-stacked-teaser column) ──────── */
/* When sport1-teaser--small renders in list mode (no `.is-grid`) inside
   the right column of the first .wp-block-columns row, the wrapper fills
   the column's height (matched to hero's 690 via column-stretch) and
   distributes articles with space-between. Result: 2 × 336 cards + auto
   18 gap = 690, matching Figma node 889:60541. */
@media (min-width: 1025px) {
  .sport1-home-section > .wp-block-columns:first-of-type > .wp-block-column:last-child .wp-block-newspack-blocks-homepage-articles.sport1-teaser--small:not(.is-grid) {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  .sport1-home-section > .wp-block-columns:first-of-type > .wp-block-column:last-child .wp-block-newspack-blocks-homepage-articles.sport1-teaser--small:not(.is-grid) article {
    margin-bottom: 0 !important;
  }
}

/*# sourceMappingURL=content-group-home.css.map*/