@charset "UTF-8";
/*
.my-component {
  padding: 1rem;

  // Mobile-first responsive design
  @include media-md {
    padding: 2rem;
  }

  @include media-lg {
    padding: 3rem;
  }

  // Desktop-first (use sparingly)
  @include media-down-md {
    font-size: 14px;
  }

  // Between specific breakpoints
  @include media-between($breakpoint-md, $breakpoint-lg) {
    background: blue;
  }

  // Reduced motion for accessibility
  @include reduced-motion {
    transition: none !important;
  }
}
*/
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes pulse {
  0%, 100% {
    opacity: 0.6;
  }
  50% {
    opacity: 0.8;
  }
}
@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@keyframes slide-down {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes slide-up {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes scale-in {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
/*
.button {
  @include transition(background-color);  // Single property

  &:hover {
    background-color: blue;
  }
}

.card {
  @include transitions($transition-shadow, $transition-transform);  // Multiple properties

  &:hover {
    box-shadow: $shadow-lg;
    transform: translateY(-2px);
  }
}

.spinner {
  animation: $animation-spin;
}

// Respect reduced motion
* {
  @include respect-reduced-motion;
}
*/
/*
Z-Index Layering Strategy:

1-9:          Base content, subtle layering
10-99:        Above content (previews, highlights)
100-999:      Dropdowns, menus, navigation
1000-1999:    Fixed/sticky elements, modals
2000+:        Notifications, alerts, critical UI

Example:
.my-dropdown {
  z-index: $z-index-dropdown;  // 100
}

.my-modal {
  z-index: $z-index-modal;     // 1050
}

.my-tooltip {
  z-index: $z-index-tooltip;   // 1070 (always above modals)
}
*/
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes pulse {
  0%, 100% {
    opacity: 0.6;
  }
  50% {
    opacity: 0.8;
  }
}
@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@keyframes slide-down {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes slide-up {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes scale-in {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
/*
.button {
  @include transition(background-color);  // Single property

  &:hover {
    background-color: blue;
  }
}

.card {
  @include transitions($transition-shadow, $transition-transform);  // Multiple properties

  &:hover {
    box-shadow: $shadow-lg;
    transform: translateY(-2px);
  }
}

.spinner {
  animation: $animation-spin;
}

// Respect reduced motion
* {
  @include respect-reduced-motion;
}
*/
/**
 * Robo-button style (green gradient, darker on hover)
 * Use this for primary action buttons across the site
 * Note: !important needed to override .btn.btn-primary in all.scss
 * Hover, keyboard focus and press swap in the darker hover gradient (Knopf-Regel C, Sanda bb5df082, 21.10.2026), never
 * a light layer (Sanda 5d454195: the white overlay made the button pale). A mouse focus gets none, so a clicked button
 * keeps its resting look; the keyboard focus also gets the ring of the product page's buttons.
 */
/**
 * A locked cart button: a parent article before its variation is chosen (Sanda 43471d7c point 5) and the configurator
 * while a required group is open. Pale grey, dark text (7.5:1), no hover gradient, not-allowed. Include it under the
 * button's own selector plus a state, so its hover/focus/active rules outrank robo-button-style's by one class.
 */
/**
 * Apply shadow with level
 * @param {string} $level - Shadow level (xs, sm, base, md, lg, xl, 2xl)
 */
/**
 * Card shadow with hover effect
 * @param {boolean} $hover - Enable hover effect (default: true)
 */
/**
 * Product item shadow
 */
/**
 * Focus ring for accessibility
 * @param {color} $color - Focus ring color (default: primary)
 */
/**
 * Focus visible (only on keyboard focus)
 */
/**
 * Hidden (display: none)
 */
/**
 * Visually hidden (for screen readers)
 */
/**
 * Not visually hidden (undo sr-only)
 */
/**
 * Disabled state
 */
/**
 * Loading state
 */
/**
 * Centered spinner on a positioned parent — without any wash overlay.
 * Uses ::after only; parent must have position: relative.
 * Use this when element children are hidden via visibility:hidden so no
 * wash layer is needed to mask them.
 *
 * @param $spinner-color Visible spinner arc color
 * @param $spinner-track Faint track ring color
 * @param $spinner-size  Diameter of the spinner
 * @param $z-index       Z-index of the spinner
 */
/**
 * Loading overlay: semi-transparent wash + centered spinner over a positioned parent.
 * Parent must have position: relative (or absolute/fixed).
 * Uses ::before for the wash layer and ::after for the spinner (via loading-spinner-centered).
 * Do not apply to elements that already use both pseudo-elements for other content.
 *
 * @param $bg            Background color of the wash layer
 * @param $spinner-color Visible spinner arc color
 * @param $spinner-track Faint track ring color
 * @param $spinner-size  Diameter of the spinner
 * @param $z-index       Z-index for wash (spinner gets +1)
 */
/**
 * Inline spinner appended after element content — for navigation buttons and links.
 * Uses ::after; incompatible with elements that already use ::after for other content.
 *
 * @param $size        Spinner diameter
 * @param $color       Visible spinner arc color
 * @param $track-color Faint track ring color
 * @param $duration    One-rotation duration
 */
/**
 * Truncate text with ellipsis
 */
/**
 * Line clamp (multi-line truncation)
 * @param {number} $lines - Number of lines to show
 */
/**
 * Custom scrollbar styling
 * @param {color} $thumb - Scrollbar thumb color
 * @param {color} $track - Scrollbar track color
 */
/**
 * Absolute center
 */
/**
 * Absolute cover (stretch to fill parent)
 */
/**
 * Fixed cover (stretch to fill viewport)
 */
/**
 * Flex center (both axes)
 */
/**
 * Flex between (space-between)
 */
/**
 * Flex column
 */
/**
 * Grid with auto-fit columns
 * @param {size} $min - Minimum column width
 * @param {size} $max - Maximum column width (default: 1fr)
 * @param {size} $gap - Gap between columns (default: $spacing-4)
 */
/**
 * Grid with auto-fill columns
 * @param {size} $min - Minimum column width
 * @param {size} $max - Maximum column width (default: 1fr)
 * @param {size} $gap - Gap between columns (default: $spacing-4)
 */
/**
 * Object fit cover
 */
/**
 * Object fit contain
 */
/**
 * Aspect ratio box
 * @param {number} $width - Width ratio
 * @param {number} $height - Height ratio
 */
/**
 * Clearfix for floats
 */
/**
 * Hide in print
 */
/**
 * Show only in print
 */
/*
.my-card {
  @include card-shadow;             // Card with hover shadow
  @include transition(transform);
  border-radius: $radius-md;

  &:hover {
    transform: translateY(-2px);
  }
}

.my-input {
  @include focus-visible;            // Accessible focus ring

  &:disabled {
    @include disabled;               // Disabled state
  }
}

.truncated-text {
  @include line-clamp(3);            // Show 3 lines max
}

.product-grid {
  @include grid-auto-fit(250px);     // Responsive grid
}

.centered-modal {
  @include absolute-center;          // Center in viewport
}
*/
/*
After importing this file, you have access to:

COLORS:
- Primary colors: $color-primary, $color-primary-light, $color-primary-dark
- Grays: $color-gray-50 through $color-gray-900
- Semantic: $color-success, $color-danger, $color-warning, $color-info
- Backgrounds: $bg-page, $bg-light, $bg-dark, etc.
- Text: $text-primary, $text-secondary, $text-muted, etc.
- Borders: $border-default, $border-light, $border-strong
- Gradients: $gradient-primary, $gradient-primary-button, etc.

TYPOGRAPHY:
- Font families: $font-family-base, $font-family-heading
- Font sizes: $font-size-xs through $font-size-6xl
- Heading sizes: $h1-size, $h2-size, etc.
- Font weights: $font-weight-light through $font-weight-black
- Line heights: $line-height-tight, $line-height-normal, etc.

SPACING:
- Scale: $spacing-0 through $spacing-32
- Semantic: $spacing-xs, $spacing-sm, $spacing-md, $spacing-lg, $spacing-xl
- Component-specific: $input-padding-y, $button-padding-x, $card-padding, etc.

SHADOWS:
- Scale: $shadow-xs through $shadow-2xl
- Semantic: $shadow-card, $shadow-dropdown, $shadow-modal, etc.
- Methods: @include shadow('lg');

BORDERS:
- Radius: $radius-none through $radius-full
- Widths: $border-width-1 through $border-width-5
- Styles: $border-default-style, $border-focus-style, etc.

MEDIA QUERIES:
- Breakpoints: $breakpoint-sm, $breakpoint-md, $breakpoint-lg, etc.
- Mixins: @include media-md { ... }, @include media-lg { ... }

TRANSITIONS:
- Durations: $duration-fast, $duration-base, $duration-slow
- Easings: $ease-in, $ease-out, $ease-in-out
- Complete transitions: $transition-button, $transition-card, etc.
- Animations: $animation-spin, $animation-pulse, etc.

Z-INDEX:
- Scale: $z-index-base through $z-index-max
- Semantic: $z-index-dropdown, $z-index-modal, $z-index-tooltip, etc.

MIXINS:
- Shadows: @include card-shadow, @include product-shadow
- Focus: @include focus-ring, @include focus-visible
- Visibility: @include sr-only, @include hidden
- States: @include disabled, @include loading
- Text: @include truncate, @include line-clamp(3)
- Layout: @include flex-center, @include absolute-center
- Grid: @include grid-auto-fit(250px)
- And many more...
*/
/*
Common patterns:

// Card with shadow
.card {
  padding: $spacing-4;
  border-radius: $radius-md;
  @include card-shadow;
}

// Responsive text
.heading {
  font-size: $h2-size-mobile;

  @include media-md {
    font-size: $h2-size-desktop;
  }
}

// Button
.button {
  padding: $button-padding-y $button-padding-x;
  border-radius: $radius-button;
  background: $gradient-primary-button;
  color: $text-inverse;
  @include transition(background-color, $duration-hover);

  &:hover {
    background: $color-primary-dark;
  }

  &:focus-visible {
    @include focus-ring;
  }
}

// Grid layout
.product-grid {
  @include grid-auto-fit(250px, 1fr, $spacing-4);
}

// Truncated text
.description {
  @include line-clamp(3);  // Show 3 lines max
}
*/
/*
.my-component {
  padding: 1rem;

  // Mobile-first responsive design
  @include media-md {
    padding: 2rem;
  }

  @include media-lg {
    padding: 3rem;
  }

  // Desktop-first (use sparingly)
  @include media-down-md {
    font-size: 14px;
  }

  // Between specific breakpoints
  @include media-between($breakpoint-md, $breakpoint-lg) {
    background: blue;
  }

  // Reduced motion for accessibility
  @include reduced-motion {
    transition: none !important;
  }
}
*/
.datte-blog-tile {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  height: 100%;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
  color: #262626;
  text-decoration: none;
}
.datte-blog-tile:hover .datte-blog-tile__title {
  text-decoration: underline;
}

.datte-blog-tile__media {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 16/10;
  background: #eef5ef;
}
.datte-blog-tile__media img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  min-height: 100%;
  max-height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

.datte-blog-tile__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
.datte-blog-tile__icon svg {
  width: 64px;
  height: 64px;
  fill: none;
  stroke: #1e7a30;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.datte-blog-tile__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 6px;
  padding: 16px 18px 18px;
}

.datte-blog-tile__topic {
  color: #1e7a30;
  font-size: 13px;
  font-weight: 700;
}

.datte-blog-tile__title {
  color: #111;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.3;
}

.datte-blog-tile__teaser {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  color: #555;
  font-size: 15px;
  line-height: 1.5;
}

.datte-blog-tile__meta {
  margin-top: auto;
  color: #666;
  font-size: 13px;
}

.datte-blog-article {
  padding: 20px 0 40px;
  background: #f4f5f3;
  box-shadow: 0 0 0 100vmax #f4f5f3;
  clip-path: inset(0 -100vmax);
  color: #262626;
  font-size: 17px;
  line-height: 1.7;
}
.datte-blog-article > * {
  max-width: 980px;
  margin-right: auto;
  margin-left: auto;
}
.datte-blog-article a:not([class]) {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.datte-blog-article img {
  max-width: 100%;
  height: auto;
}

#nw-ct.datte-blog-article a:not([class]):not(.btn):not(.mm-mainlink):not(.nav-link):not(.title):not([class*=datte-tile]):not([class*=datte-card]), #nw-ct.datte-blog-article a:not([class]):not(.btn):not(.mm-mainlink):not(.nav-link):not(.title):not([class*=datte-tile]):not([class*=datte-card]):visited, #nw-ct.datte-blog-article a:not([class]):not(.btn):not(.mm-mainlink):not(.nav-link):not(.title):not([class*=datte-tile]):not([class*=datte-card]):hover, #nw-ct.datte-blog-article a:not([class]):not(.btn):not(.mm-mainlink):not(.nav-link):not(.title):not([class*=datte-tile]):not([class*=datte-card]):focus {
  color: #1e7a30;
}
#nw-ct.datte-blog-article a:not([class]):not(.btn):not(.mm-mainlink):not(.nav-link):not(.title):not([class*=datte-tile]):not([class*=datte-card]):focus-visible {
  box-shadow: 0 0 0 2px #fff, 0 0 0 5px #1e7a30;
}

.datte-blog-head {
  padding: 8px 0 20px;
}

.datte-blog-head__topic {
  display: inline-block;
  margin-bottom: 12px;
  padding: 4px 12px;
  border-radius: 999px;
  background: #e9f5eb;
  font-size: 14px;
  font-weight: 600;
}

#nw-ct.datte-blog-article a.datte-blog-head__topic:not(.btn):not(.mm-mainlink):not(.nav-link):not(.title):not([class*=datte-tile]):not([class*=datte-card]), #nw-ct.datte-blog-article a.datte-blog-head__topic:not(.btn):not(.mm-mainlink):not(.nav-link):not(.title):not([class*=datte-tile]):not([class*=datte-card]):visited, #nw-ct.datte-blog-article a.datte-blog-head__topic:not(.btn):not(.mm-mainlink):not(.nav-link):not(.title):not([class*=datte-tile]):not([class*=datte-card]):hover, #nw-ct.datte-blog-article a.datte-blog-head__topic:not(.btn):not(.mm-mainlink):not(.nav-link):not(.title):not([class*=datte-tile]):not([class*=datte-card]):focus {
  color: #1e7a30;
  text-decoration: none;
}

#nw-ct.datte-blog-article a.datte-blog-head__topic:focus-visible {
  box-shadow: 0 0 0 2px #fff, 0 0 0 5px #1e7a30;
}

.datte-blog-head__title {
  margin: 0 0 10px;
  color: #111;
  font-size: 38px;
  font-family: inherit;
  font-weight: 800;
  line-height: 1.25;
  text-align: left;
}

.datte-blog-head__meta {
  margin: 0;
  color: #666;
  font-size: 15px;
}

.datte-blog-card {
  margin-bottom: 20px;
  padding: 28px 32px;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}

#nw-ct.datte-blog-article > .datte-blog-card {
  margin-top: 0;
  margin-bottom: 20px;
}

.datte-blog-card__title {
  margin: 0 0 12px;
  line-height: 1.3;
  position: relative;
  padding-left: 8px;
  color: #111;
  font-size: 22px !important;
  font-weight: 700;
}
.datte-blog-card__title::before {
  content: "";
  position: absolute;
  top: 0px;
  bottom: 0px;
  left: -8px;
  width: 4px;
  border-radius: 2px;
  background: #2ba742;
}

.datte-blog-summary ul {
  margin: 0;
  padding-left: 20px;
}
.datte-blog-summary li {
  margin: 4px 0;
}

.datte-blog-lead {
  margin-top: 24px;
  margin-bottom: 20px;
  color: #333;
  font-size: 19px;
  line-height: 1.65;
}

.datte-blog-section p {
  margin: 0 0 1em;
}

.datte-blog-section__row {
  display: flex;
  gap: 28px;
  align-items: flex-start;
}

.datte-blog-section__media {
  flex: 0 0 160px;
}
.datte-blog-section__media img {
  display: block;
  width: 160px;
}

.datte-blog-section__text {
  flex: 1;
  min-width: 0;
}

.datte-blog-section .datte-blog-section__links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin: 0;
}

.datte-blog-products {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 16px;
  margin-top: 20px;
  padding: 16px;
  border-radius: 14px;
  background: #f4f5f3;
}

.datte-blog-help p {
  margin: 0 0 14px;
  font-size: 16px;
}

.datte-blog-help__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.datte-blog-button {
  display: inline-block;
  padding: 10px 20px;
  border: 2px solid transparent;
  border-radius: 10px;
  background: linear-gradient(90deg, #23863a, #081f0c) border-box;
  font-weight: 700;
}
.datte-blog-button--ghost {
  border-color: #1e7a30;
  background: #fff;
}

#nw-ct.datte-blog-article a.datte-blog-button:not(.btn):not(.mm-mainlink):not(.nav-link):not(.title):not([class*=datte-tile]):not([class*=datte-card]), #nw-ct.datte-blog-article a.datte-blog-button:not(.btn):not(.mm-mainlink):not(.nav-link):not(.title):not([class*=datte-tile]):not([class*=datte-card]):visited, #nw-ct.datte-blog-article a.datte-blog-button:not(.btn):not(.mm-mainlink):not(.nav-link):not(.title):not([class*=datte-tile]):not([class*=datte-card]):hover, #nw-ct.datte-blog-article a.datte-blog-button:not(.btn):not(.mm-mainlink):not(.nav-link):not(.title):not([class*=datte-tile]):not([class*=datte-card]):focus {
  color: #fff;
  text-decoration: none;
}
#nw-ct.datte-blog-article a.datte-blog-button:not(.btn):not(.mm-mainlink):not(.nav-link):not(.title):not([class*=datte-tile]):not([class*=datte-card]):focus-visible {
  box-shadow: 0 0 0 2px #fff, 0 0 0 5px #1e7a30;
}
#nw-ct.datte-blog-article a.datte-blog-button:not(.btn):not(.mm-mainlink):not(.nav-link):not(.title):not([class*=datte-tile]):not([class*=datte-card]).datte-blog-button--ghost, #nw-ct.datte-blog-article a.datte-blog-button:not(.btn):not(.mm-mainlink):not(.nav-link):not(.title):not([class*=datte-tile]):not([class*=datte-card]).datte-blog-button--ghost:visited, #nw-ct.datte-blog-article a.datte-blog-button:not(.btn):not(.mm-mainlink):not(.nav-link):not(.title):not([class*=datte-tile]):not([class*=datte-card]).datte-blog-button--ghost:hover, #nw-ct.datte-blog-article a.datte-blog-button:not(.btn):not(.mm-mainlink):not(.nav-link):not(.title):not([class*=datte-tile]):not([class*=datte-card]).datte-blog-button--ghost:focus {
  color: #1e7a30;
}
#nw-ct.datte-blog-article a.datte-blog-button:not(.btn):not(.mm-mainlink):not(.nav-link):not(.title):not([class*=datte-tile]):not([class*=datte-card]):not(.datte-blog-button--ghost):hover {
  background: linear-gradient(90deg, #1e7a30, #061a0a) border-box;
}

#news-c.datte-blog-overview a.datte-blog-button:not(.btn):not(.mm-mainlink):not(.nav-link):not(.title):not([class*=datte-tile]):not([class*=datte-card]), #news-c.datte-blog-overview a.datte-blog-button:not(.btn):not(.mm-mainlink):not(.nav-link):not(.title):not([class*=datte-tile]):not([class*=datte-card]):visited, #news-c.datte-blog-overview a.datte-blog-button:not(.btn):not(.mm-mainlink):not(.nav-link):not(.title):not([class*=datte-tile]):not([class*=datte-card]):hover, #news-c.datte-blog-overview a.datte-blog-button:not(.btn):not(.mm-mainlink):not(.nav-link):not(.title):not([class*=datte-tile]):not([class*=datte-card]):focus {
  color: #fff;
  text-decoration: none;
}
#news-c.datte-blog-overview a.datte-blog-button:not(.btn):not(.mm-mainlink):not(.nav-link):not(.title):not([class*=datte-tile]):not([class*=datte-card]):focus-visible {
  box-shadow: 0 0 0 2px #fff, 0 0 0 5px #1e7a30;
}
#news-c.datte-blog-overview a.datte-blog-button:not(.btn):not(.mm-mainlink):not(.nav-link):not(.title):not([class*=datte-tile]):not([class*=datte-card]).datte-blog-button--ghost, #news-c.datte-blog-overview a.datte-blog-button:not(.btn):not(.mm-mainlink):not(.nav-link):not(.title):not([class*=datte-tile]):not([class*=datte-card]).datte-blog-button--ghost:visited, #news-c.datte-blog-overview a.datte-blog-button:not(.btn):not(.mm-mainlink):not(.nav-link):not(.title):not([class*=datte-tile]):not([class*=datte-card]).datte-blog-button--ghost:hover, #news-c.datte-blog-overview a.datte-blog-button:not(.btn):not(.mm-mainlink):not(.nav-link):not(.title):not([class*=datte-tile]):not([class*=datte-card]).datte-blog-button--ghost:focus {
  color: #1e7a30;
}
#news-c.datte-blog-overview a.datte-blog-button:not(.btn):not(.mm-mainlink):not(.nav-link):not(.title):not([class*=datte-tile]):not([class*=datte-card]):not(.datte-blog-button--ghost):hover {
  background: linear-gradient(90deg, #1e7a30, #061a0a) border-box;
}

.datte-blog-more {
  margin-top: 36px;
}

.datte-blog-more__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.datte-blog-more__title {
  margin: 0;
  color: #111;
  font-size: 24px;
  font-weight: 700;
}

.datte-blog-more__sub {
  margin: 2px 0 0;
  color: #666;
  font-size: 15px;
}

.datte-blog-more__all {
  font-weight: 700;
  white-space: nowrap;
}

#nw-ct.datte-blog-article a.datte-blog-more__all:not(.btn):not(.mm-mainlink):not(.nav-link):not(.title):not([class*=datte-tile]):not([class*=datte-card]), #nw-ct.datte-blog-article a.datte-blog-more__all:not(.btn):not(.mm-mainlink):not(.nav-link):not(.title):not([class*=datte-tile]):not([class*=datte-card]):visited, #nw-ct.datte-blog-article a.datte-blog-more__all:not(.btn):not(.mm-mainlink):not(.nav-link):not(.title):not([class*=datte-tile]):not([class*=datte-card]):hover, #nw-ct.datte-blog-article a.datte-blog-more__all:not(.btn):not(.mm-mainlink):not(.nav-link):not(.title):not([class*=datte-tile]):not([class*=datte-card]):focus {
  color: #1e7a30;
  text-decoration: none;
}

#nw-ct.datte-blog-article a.datte-blog-more__all:focus-visible {
  box-shadow: 0 0 0 2px #fff, 0 0 0 5px #1e7a30;
}

.datte-blog-more__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
@media (max-width: 991px) {
  .datte-blog-more__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .datte-blog-more {
    padding-right: 16px;
    padding-left: 16px;
  }
  .datte-blog-more__grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .datte-blog-article {
    font-size: 16px;
  }
  .datte-blog-head,
  .datte-blog-lead {
    padding-right: 16px;
    padding-left: 16px;
  }
  .datte-blog-head__title {
    font-size: 26px;
  }
  .datte-blog-lead {
    font-size: 17px;
  }
  .datte-blog-card {
    padding: 22px 18px;
    border-radius: 0;
  }
  .datte-blog-card__title {
    position: relative;
    padding-left: 22px;
    color: #111;
    font-size: 22px !important;
    font-weight: 700;
  }
  .datte-blog-card__title::before {
    content: "";
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 6px;
    width: 4px;
    border-radius: 2px;
    background: #2ba742;
  }
  .datte-blog-section__row {
    flex-direction: column;
    gap: 12px;
  }
  .datte-blog-section__media {
    flex: none;
  }
  .datte-blog-section__media img {
    width: 140px;
  }
  .datte-blog-products {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
}
.datte-blog-overview {
  padding: 20px 0 40px;
  background: #f4f5f3;
  box-shadow: 0 0 0 100vmax #f4f5f3;
  clip-path: inset(0 -100vmax);
  color: #262626;
}
.datte-blog-overview > * {
  max-width: 1140px;
  margin-right: auto;
  margin-left: auto;
}

.datte-blog-overview__title {
  margin: 0 0 8px;
  color: #111;
  font-family: inherit;
  font-size: 38px;
  font-weight: 800;
  line-height: 1.25;
}

.datte-blog-overview__intro {
  max-width: 760px;
  margin: 0 0 20px;
  color: #444;
  font-size: 18px;
  line-height: 1.6;
}

.datte-blog-topics {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 32px;
}

.datte-blog-topics__item {
  padding: 7px 16px;
  border: 2px solid #dfe5dc;
  border-radius: 999px;
  background: #fff;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.datte-blog-topics__item:hover {
  border-color: #2ba742;
  text-decoration: none;
}
.datte-blog-topics__item.is-active, .datte-blog-topics__item.is-active:hover {
  border-color: #1e7a30;
  background: #1e7a30;
}

#news-c.datte-blog-overview a.datte-blog-topics__item:not(.btn):not(.mm-mainlink):not(.nav-link):not(.title):not([class*=datte-tile]):not([class*=datte-card]), #news-c.datte-blog-overview a.datte-blog-topics__item:not(.btn):not(.mm-mainlink):not(.nav-link):not(.title):not([class*=datte-tile]):not([class*=datte-card]):visited, #news-c.datte-blog-overview a.datte-blog-topics__item:not(.btn):not(.mm-mainlink):not(.nav-link):not(.title):not([class*=datte-tile]):not([class*=datte-card]):hover, #news-c.datte-blog-overview a.datte-blog-topics__item:not(.btn):not(.mm-mainlink):not(.nav-link):not(.title):not([class*=datte-tile]):not([class*=datte-card]):focus {
  color: #1e7a30;
  text-decoration: none;
}
#news-c.datte-blog-overview a.datte-blog-topics__item:not(.btn):not(.mm-mainlink):not(.nav-link):not(.title):not([class*=datte-tile]):not([class*=datte-card]).is-active, #news-c.datte-blog-overview a.datte-blog-topics__item:not(.btn):not(.mm-mainlink):not(.nav-link):not(.title):not([class*=datte-tile]):not([class*=datte-card]).is-active:hover, #news-c.datte-blog-overview a.datte-blog-topics__item:not(.btn):not(.mm-mainlink):not(.nav-link):not(.title):not([class*=datte-tile]):not([class*=datte-card]).is-active:focus {
  color: #fff;
}

.datte-blog-row__title {
  margin: 0;
  color: #111;
  font-size: 26px;
  font-weight: 700;
}

.datte-blog-most {
  margin-bottom: 40px;
}
.datte-blog-most .datte-blog-row__title {
  margin-bottom: 16px;
}

.datte-blog-most__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  align-items: start;
  gap: 24px;
}
@media (max-width: 991px) {
  .datte-blog-most__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.datte-blog-most__list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.datte-blog-most__list .datte-blog-tile {
  height: auto;
}

.datte-blog-tile--lead .datte-blog-tile__media {
  aspect-ratio: 16/9;
}
.datte-blog-tile--lead .datte-blog-tile__title {
  font-size: 26px;
}

.datte-blog-tile--row {
  flex-direction: row;
}
.datte-blog-tile--row .datte-blog-tile__media {
  flex: 0 0 150px;
  aspect-ratio: auto;
}
.datte-blog-tile--row .datte-blog-tile__body {
  padding: 12px 14px;
}
.datte-blog-tile--row .datte-blog-tile__title {
  font-size: 17px;
}

.datte-blog-row {
  margin-bottom: 40px;
}

.datte-blog-all__title {
  margin-bottom: 16px;
}

.datte-blog-overview__content {
  max-width: 760px;
  margin-bottom: 20px;
}

.datte-blog-row__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.datte-blog-row__count {
  margin: 2px 0 0;
  color: #666;
  font-size: 15px;
}

.datte-blog-row__all {
  font-weight: 700;
  white-space: nowrap;
}

#news-c.datte-blog-overview a.datte-blog-row__all:not(.btn):not(.mm-mainlink):not(.nav-link):not(.title):not([class*=datte-tile]):not([class*=datte-card]), #news-c.datte-blog-overview a.datte-blog-row__all:not(.btn):not(.mm-mainlink):not(.nav-link):not(.title):not([class*=datte-tile]):not([class*=datte-card]):visited, #news-c.datte-blog-overview a.datte-blog-row__all:not(.btn):not(.mm-mainlink):not(.nav-link):not(.title):not([class*=datte-tile]):not([class*=datte-card]):hover, #news-c.datte-blog-overview a.datte-blog-row__all:not(.btn):not(.mm-mainlink):not(.nav-link):not(.title):not([class*=datte-tile]):not([class*=datte-card]):focus {
  color: #1e7a30;
  text-decoration: none;
}

.datte-blog-row__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
@media (max-width: 991px) {
  .datte-blog-row__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .datte-blog-overview > :not(.datte-blog-card) {
    padding-right: 16px;
    padding-left: 16px;
  }
  .datte-blog-overview__title {
    font-size: 28px;
  }
  .datte-blog-row__title {
    font-size: 22px;
  }
  .datte-blog-overview .datte-blog-topics {
    flex-wrap: nowrap;
    margin: 0 -16px 32px;
    padding: 0 16px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .datte-blog-tile--lead .datte-blog-tile__title {
    font-size: 21px;
  }
  .datte-blog-tile--row .datte-blog-tile__media {
    flex-basis: 110px;
  }
  .datte-blog-row__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}
/*# sourceMappingURL=blog.css.map */