/* ==========================================================================
   Blog overview (Blogbuster page 7)
   ========================================================================== */

[data-page="7"] .blog-overview {
  width: calc(100% - (2 * var(--spacing-3)));
  max-width: var(--max-container);
  padding-top: var(--spacing-6);
  padding-inline: 0;
}

[data-page="7"] .blog-overview .blog-overview-main {
  display: none;
}

[data-page="7"] .blog-overview .blog-overview-main form,
[data-page="7"] .blog-overview .blog-overview-main fieldset {
  margin: 0;
}

[data-page="7"] .blog-overview .blog-overview-main .form-row {
  gap: var(--spacing-3);
}

[data-page="7"] .blog-overview .blog-overview-main .form-row > .col {
  flex: 1 1 220px;
  width: auto;
  max-width: none;
  padding: 0;
}

[data-page="7"] .blog-overview .blog-overview-main .custom-select {
  min-height: 44px;
  border: 2px solid var(--color-tertiary-50);
  border-radius: var(--border-radius-sm);
  background-color: var(--color-white);
  color: var(--color-primary-100);
  font-family: var(--font-family-base);
  font-weight: var(--font-weight-bold);
  box-shadow: none;
}

[data-page="7"] .blog-overview .blog-overview-main .custom-select:focus {
  border-color: var(--color-primary-100);
  outline: none;
  box-shadow: 0 0 0 2px rgba(0, 34, 147, .12);
}

[data-page="7"] .blog-overview .blog-overview-main > .blog-overview-pagination,
[data-page="7"] .blog-overview > .blog-overview-hr {
  display: none;
}

[data-page="7"] .blog-overview .blog-overview-preview {
  align-items: stretch;
  margin-right: calc(-1 * var(--spacing-3));
  margin-left: calc(-1 * var(--spacing-3));
}

[data-page="7"] .blog-overview .blog-overview-preview-item {
  display: flex;
  margin-bottom: var(--spacing-6);
  padding-right: var(--spacing-3);
  padding-left: var(--spacing-3);
}

[data-page="7"] .blog-overview .blog-overview-preview-item .newsbox {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
  padding: var(--spacing-3) !important;
  overflow: hidden;
  border: 2px solid var(--color-tertiary-100) !important;
  border-radius: var(--border-radius-sm);
  background: var(--color-white);
  box-shadow: var(--shadow-sm);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
}

[data-page="7"] .blog-overview .blog-overview-preview-item .newsbox:hover {
  border-color: var(--color-tertiary-50) !important;
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

[data-page="7"] .blog-overview .blog-overview-preview-item .newsbox-header,
[data-page="7"] .blog-overview .blog-overview-preview-item .newsbox-header > a {
  display: block;
}

[data-page="7"] .blog-overview .blog-overview-preview-item .newsbox-image {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--border-radius-sm);
  background: var(--color-tertiary-50);
}

[data-page="7"] .blog-overview .blog-overview-preview-item .newsbox-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-base);
}

[data-page="7"] .blog-overview .blog-overview-preview-item .newsbox:hover .newsbox-image img {
  transform: scale(1.015);
}

[data-page="7"] .blog-overview .blog-overview-preview-item .newsbox-body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  padding: var(--spacing-3) var(--spacing-1) !important;
}

[data-page="7"] .blog-overview .blog-overview-preview-item .newsbox-body > .row {
  display: none;
}

[data-page="7"] .blog-overview .blog-overview-preview-item .newsbox-headline {
  display: -webkit-box;
  min-height: calc(2 * 1.2em);
  margin: 0 0 var(--spacing-3);
  overflow: hidden;
  color: var(--color-neutral);
  font-size: var(--font-size-h5);
  font-weight: var(--font-weight-bold);
  line-height: 1.2;
  text-align: left;
  text-decoration: none !important;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

[data-page="7"] .blog-overview .blog-overview-preview-item .newsbox-headline:hover,
[data-page="7"] .blog-overview .blog-overview-preview-item .newsbox-headline:focus,
[data-page="7"] .blog-overview .blog-overview-preview-item .newsbox-headline:focus-visible {
  color: var(--color-primary-100) !important;
  text-decoration: none !important;
}

[data-page="7"] .blog-overview .blog-overview-preview-item .newsbox-body > p {
  display: -webkit-box;
  min-height: calc(2 * var(--lh-paragraph) * 1em);
  margin: 0;
  overflow: hidden;
  color: var(--color-neutral);
  font-size: var(--font-size-normal);
  line-height: var(--lh-paragraph);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

[data-page="7"] .blog-overview .blog-overview-preview-item .newsbox-footer {
  margin-top: auto;
  padding: 0 !important;
}

[data-page="7"] .blog-overview .blog-overview-preview-item .newsbox-footer > a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 44px;
  padding: var(--spacing-2) var(--spacing-4);
  border: 1px solid var(--color-primary-100);
  border-radius: var(--border-radius-sm);
  background: var(--color-primary-100);
  color: var(--color-white);
  font-size: 0;
  font-weight: var(--font-weight-regular);
  line-height: 1.2;
  text-align: center;
  text-decoration: none !important;
  transition: background-color var(--transition-fast), border-color var(--transition-fast);
}

[data-page="7"] .blog-overview .blog-overview-preview-item .newsbox-footer > a::before {
  content: "Mehr darüber lesen";
  font-size: var(--font-size-normal);
  text-decoration: none !important;
}

[data-page="7"] .blog-overview .blog-overview-preview-item .newsbox-footer > a:hover,
[data-page="7"] .blog-overview .blog-overview-preview-item .newsbox-footer > a:focus,
[data-page="7"] .blog-overview .blog-overview-preview-item .newsbox-footer > a:focus-visible {
  border-color: var(--color-secondary-100);
  background: var(--color-secondary-100);
  color: var(--color-white) !important;
  text-decoration: none !important;
}

[data-page="7"] .blog-overview .blog-overview-preview-item .newsbox-footer i {
  display: none;
}

[data-page="7"] .blog-overview > .pagination-wrapper {
  display: flex;
  justify-content: center;
  margin: 0 0 var(--spacing-12);
}

[data-page="7"] .blog-overview > .pagination-wrapper .pagination-group {
  position: static;
  top: auto;
  width: auto;
  margin: 0 !important;
}

[data-page="7"] .blog-overview > .pagination-wrapper .pagination {
  width: auto;
  gap: var(--spacing-1);
}

[data-page="7"] .blog-overview > .pagination-wrapper .pagination > li {
  flex: 0 0 auto;
  margin: 0 !important;
  padding: 0 !important;
  text-decoration: none !important;
}

[data-page="7"] .blog-overview > .pagination-wrapper .pagination a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  min-height: 40px;
  padding: var(--spacing-2);
  border: 1px solid var(--color-tertiary-100);
  border-radius: var(--border-radius-xs);
  text-decoration: none !important;
}

[data-page="7"] .blog-overview > .pagination-wrapper .pagination .active a,
[data-page="7"] .blog-overview > .pagination-wrapper .pagination a:hover,
[data-page="7"] .blog-overview > .pagination-wrapper .pagination a:focus,
[data-page="7"] .blog-overview > .pagination-wrapper .pagination a:focus-visible {
  border-color: var(--color-primary-100);
  background: var(--color-primary-100);
  color: var(--color-white);
  text-decoration: none !important;
}

/* ========================================================================== 
   Blog detail (Blogbuster page 41)
   ========================================================================== */

#snackys-tpl [data-page="41"] #bc {
  width: calc(100% - (2 * var(--spacing-6)));
  max-width: 960px;
  padding-right: 0;
  padding-left: 0;
}

[data-page="41"] .ws5_blogDetail {
  width: calc(100% - (2 * var(--spacing-6)));
  max-width: 960px;
  margin-right: auto;
  margin-left: auto;
  padding: 0;
}

[data-page="41"] .ws5_blogDetail .ws5_inhaltContainer {
  width: 100%;
  padding-right: 0;
}

[data-page="41"] .ws5_blogDetail h1 {
  margin: 0 0 var(--spacing-6);
  color: var(--color-primary-100);
  font-size: clamp(2rem, 4vw, var(--font-size-h1));
  font-weight: var(--font-weight-bold);
  line-height: var(--lh-heading);
  text-align: left;
}

[data-page="41"] .ws5_blogDetail .ws5_BlogHeaderWrapper {
  width: 100% !important;
  max-width: none !important;
  margin: 0 0 var(--spacing-4);
}

[data-page="41"] .ws5_blogDetail .previewImg {
  width: 100% !important;
  max-width: none !important;
  aspect-ratio: 16 / 9;
  margin: 0 !important;
  overflow: hidden;
  border-radius: var(--border-radius-md);
  background: var(--color-tertiary-50);
  box-shadow: none !important;
}

[data-page="41"] .ws5_blogDetail .previewImg img {
  display: block;
  width: 100% !important;
  height: 100%;
  max-width: none !important;
  object-fit: cover;
}

[data-page="41"] .ws5_blogDetail .author-meta {
  margin: 0 0 var(--spacing-6);
  color: var(--color-neutral);
  font-size: var(--font-size-xs);
  line-height: var(--lh-paragraph);
}

[data-page="41"] .ws5_blogDetail .blog-details-content {
  color: var(--color-neutral);
  font-size: var(--font-size-h6);
  line-height: var(--lh-paragraph);
}

[data-page="41"] .ws5_blogDetail .blog-details-content p,
[data-page="41"] .ws5_blogDetail .blog-details-content ul,
[data-page="41"] .ws5_blogDetail .blog-details-content ol {
  margin-bottom: var(--spacing-6);
}

[data-page="41"] .ws5_blogDetail .blog-details-content h2,
[data-page="41"] .ws5_blogDetail .blog-details-content h3 {
  margin-top: var(--spacing-10);
  margin-bottom: var(--spacing-4);
  color: var(--color-neutral);
  font-weight: var(--font-weight-bold);
  line-height: var(--lh-heading);
}

[data-page="41"] .ws5_blogDetail .blog-details-content a:not(.btn) {
  color: var(--color-primary-100);
  font-weight: var(--font-weight-bold);
  text-decoration: underline;
  text-underline-offset: 2px;
}

[data-page="41"] .ws5_blogDetail .blog-details-content .btn-primary {
  min-height: 48px;
  padding: var(--spacing-3) var(--spacing-6);
  border: 1px solid var(--color-primary-100);
  border-radius: var(--border-radius-sm);
  background: var(--color-primary-100);
  color: var(--color-white);
}

[data-page="41"] .ws5_blogDetail .blog-details-content .btn-primary:hover,
[data-page="41"] .ws5_blogDetail .blog-details-content .btn-primary:focus,
[data-page="41"] .ws5_blogDetail .blog-details-content .btn-primary:focus-visible {
  border-color: var(--color-primary-75);
  background: var(--color-primary-75);
}

[data-page="41"] .ws5_blogDetail .blog-details-content .btn-primary:active,
[data-page="41"] .ws5_blogDetail .blog-details-content .btn-primary.active {
  border-color: var(--color-primary-100);
  background: var(--color-primary-100);
}

@media (max-width: 767.98px) {
  #snackys-tpl [data-page="41"] #bc,
  [data-page="41"] .ws5_blogDetail {
    width: calc(100% - (2 * var(--spacing-4)));
  }

  [data-page="7"] .blog-overview {
    width: 100%;
    padding-top: var(--spacing-4);
  }

  [data-page="7"] .blog-overview .blog-overview-main {
    padding: var(--spacing-3);
  }

  [data-page="7"] .blog-overview .blog-overview-main .form-row {
    gap: var(--spacing-2);
  }

  [data-page="7"] .blog-overview .blog-overview-main .form-row > .col {
    flex-basis: 100%;
  }

  [data-page="7"] .blog-overview .blog-overview-preview {
    margin-right: calc(-1 * var(--spacing-2));
    margin-left: calc(-1 * var(--spacing-2));
  }

  [data-page="7"] .blog-overview .blog-overview-preview-item {
    margin-bottom: var(--spacing-6);
    padding-right: var(--spacing-2);
    padding-left: var(--spacing-2);
  }

  [data-page="7"] .blog-overview .blog-overview-preview-item .newsbox-headline {
    font-size: var(--font-size-h6);
  }

  [data-page="41"] .ws5_blogDetail .previewImg {
    aspect-ratio: 4 / 3;
  }

  [data-page="41"] .ws5_blogDetail .blog-details-content {
    font-size: var(--font-size-normal);
  }
}