/** Shopify CDN: Minification failed

Line 16:0 Unexpected "{"
Line 16:1 Unexpected "{"
Line 16:3 Expected identifier but found "'slideshow.css'"
Line 17:0 Unexpected "{"
Line 17:1 Expected identifier but found "%"
Line 39:0 Unexpected "<"
Line 44:1 Unexpected "<"
Line 63:0 Unexpected "<"
Line 85:0 Unexpected "<"
Line 90:7 Expected identifier but found "%"
... and 38 more hidden warnings

**/
{{ 'slideshow.css' | asset_url | stylesheet_tag }}
{% liquid
  assign desktop_height = section.settings.desktop_height
  assign mobile_height = section.settings.mobile_height
  assign full_width = section.settings.full_width
  assign autoplay = section.settings.autoplay
  assign fade = section.settings.fade
  assign overlay_opacity = section.settings.overlay_opacity
  assign content_position = section.settings.content_position
  assign text_alignment = section.settings.text_alignment
  assign content_size = section.settings.content_size
  assign disable_top_spacing = section.settings.disable_top_spacing
  assign disable_bottom_spacing = section.settings.disable_bottom_spacing
  assign dots = true
  if section.blocks.size < 2
    assign dots = false
  endif

  if autoplay
    assign autoplay = section.settings.autoplay_length | times: 1000
  endif
%}

<style>
  .hero-button-wrapper {
    margin-top: 20px;
    text-align: center;
  }
 <style>
.hero-button {
  background-color: black !important;
  border: 2px solid black !important;
  color: white !important;
  font-weight: bold;
  text-transform: uppercase;
  padding: 12px 30px;
  font-size: 16px;
  border-radius: 30px;
  text-decoration: none;
  display: inline-block;
  transition: all 0.3s ease;
}
.hero-button:hover {
  background-color: white !important;
  color: black !important;
  border: 2px solid black !important;
}
</style>

  @media screen and (max-width: 767px) {
    .slideshow__slide-content {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
    }

    .hero-button-wrapper {
      width: 100%;
      display: flex;
      justify-content: center;
      margin-top: 20px;
    }

    .hero-button {
      margin: 0 auto;
    }
  }
</style>

<div class="row{% if full_width %} full-width-row{% endif %}">
  <div class="small-12 columns">
    <div class="slideshow main-slideshow carousel text-{{ text_alignment }} content-size-{{ content_size }} {{ mobile_height }} {{ desktop_height }} section-spacing{% if disable_top_spacing %} section-spacing--disable-top{% endif %}{% if disable_bottom_spacing %} section-spacing--disable-bottom{% endif %}" data-dots="{{ dots }}" data-autoplay="{{ autoplay }}" data-fade="{{ fade }}" style="--overlay-opacity: {{ overlay_opacity | divided_by: 100.0 }}">
      {% for block in section.blocks %}
        <div class="slideshow__slide carousel__slide {{ mobile_height }} {{ desktop_height }} content-{{ content_position }}" {{ block.shopify_attributes }}>
          <div class="slideshow__slide-bg">
            {% if block.settings.image %}
              <picture>
                <source media="(max-width: 767px)" srcset="{{ 'banner-mobile.jpg' | file_url }}">
                <img 
                  src="{{ block.settings.image | image_url: width: 2000 }}" 
                  alt="{{ block.settings.image.alt | escape }}" 
                  loading="lazy"
                  style="width:100%; height:100%; object-fit: cover;"
                >
              </picture>
            {% endif %}
          </div>
          <div class="slideshow__slide-content">
            {% if block.settings.subheading != blank %}
              <p class="subheading">{{ block.settings.subheading }}</p>
            {% endif %}
            {% if block.settings.heading != blank %}
              <h1 class="split-text">{{ block.settings.heading | newline_to_br }}</h1>
              <div class="hero-button-wrapper">
                <a href="/collections/all" class="hero-button">ENTDECKE JETZT</a>
              </div>
            {% endif %}
            {% if block.settings.content != blank %}
              <p class="split-text">{{ block.settings.content | newline_to_br }}</p>
            {% endif %}
            {% if block.settings.button_text != blank %}
              <a class="button {{ block.settings.button_style | escape }} {{ block.settings.button_color | escape }}{% if block.settings.button_outline %} outline{%- endif %}" href="{{ block.settings.button_link }}" role="button" title="{{ block.settings.button_text | escape }}">
                <span>{{ block.settings.button_text }}</span>
              </a>
            {% endif %}
          </div>
        </div>
      {% endfor %}
    </div>
  </div>
</div>

a.button.accent2 {
  background-color: black !important;
  border: 2px solid black !important;
  color: white !important;
  border-radius: 30px;
  padding: 12px 30px;
  font-weight: bold;
  text-transform: uppercase;
  font-size: 16px;
  text-decoration: none;
  transition: all 0.3s ease;
  
  /* Horizontal zentrieren */
  display: block;
  margin-left: auto;
  margin-right: auto;
}

a.button.accent2:hover {
  background-color: white !important;
  color: black !important;
  border-color: black !important;
}


.slideshow__slide-content a.button.accent2,
.slideshow__slide-content a.button.accent2 span {
  background-color: black !important;
  border: 2px solid black !important;
  color: white !important;
  opacity: 1 !important;
}

.slideshow__slide-content a.button.accent2:hover,
.slideshow__slide-content a.button.accent2:hover span {
  background-color: white !important;
  color: black !important;
  border-color: black !important;
}
.section-slideshow {
  background-color: black !important;
}

.row.full-width-row {
  background-color: black !important;
}

/* Button optisch zentrieren */
a.button.accent2 {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: fit-content;
  
  background-color: black !important;
  border: 2px solid black !important;
  color: white !important;
  border-radius: 30px;
  padding: 12px 30px;
  font-weight: bold;
  text-transform: uppercase;
  font-size: 16px;
  text-decoration: none;
  transition: all 0.3s ease;
}

/* Hover-Effekt */
a.button.accent2:hover {
  background-color: white !important;
  color: black !important;
  border-color: black !important;
}