/** Shopify CDN: Minification failed

Line 36:40 Unexpected "*"
Line 39:66 Unterminated string token

**/
/* ==========================================================================
   Cooperation Landing — shared stylesheet
   Used by all sections/custom-cooperation-*.liquid sections.
   Breakpoints match the theme: 700px ("sm:") and 1000px ("md:").

   Note: each section wrapper also carries a "cooperation-section--<name>"
   modifier class (e.g. cooperation-section--hero). These are intentionally
   unstyled here — they exist as stable hooks for future per-section
   overrides; all current styling comes from the shared "cooperation-section"
   rules above plus the theme's own color-scheme classes.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0) Overflow safety net
   .container uses margins (not padding + overflow:hidden), so nothing in
   this theme clips horizontal overflow above the section level. Any child
   that miscalculates its width (e.g. a carousel row) can otherwise bleed
   past the viewport and force a page-wide horizontal scrollbar. Every
   section wrapper carries "cooperation-section", so this contains that
   risk at the section boundary regardless of the root cause inside.
   -------------------------------------------------------------------------- */
.cooperation-section {
  overflow-x: hidden;
}

/* --------------------------------------------------------------------------
   1) Typography
   Titles use SilvaDisplay; everything else (body copy, labels, eyebrows,
   buttons, card sub-titles) uses Halis R. Declared explicitly (not just via
   the pre-existing .display-*/.heading-*/.h6/h2 utility classes) so the
   font choice is guaranteed regardless of cascade/specificity elsewhere.
   Bridges the native section-header/.h6/h2 output into this rebrand
   typography, mirroring assets/custom-expert-grid.css's approach.
   -------------------------------------------------------------------------- */
.cooperation-section,
.cooperation-section button,
.cooperation-section input {
  font-family: "Halis R", sans-serif;
}

.cooperation-section .section-header .h6 {
  font-family: "Halis R", sans-serif;
  text-transform: uppercase;
  font-weight: 700;
  color: #fb7882;
}

/* Equal, generous spacing between the eyebrow, heading and subtext of a
   section header — the native .prose default reads as too tight once the
   SilvaDisplay/Halis R fonts (different metrics) are swapped in. */
.cooperation-section .section-header .prose > * {
  margin: 0;
}

.cooperation-section .section-header .prose > * + * {
  margin-block-start: 1rem;
}

/* CTAs stay black regardless of a section's own color_scheme (matches the
   "Jetzt shoppen" button on the About Us page), so switching a section's
   background scheme in the customizer never turns its button white. */
.cooperation-section .button {
  --button-background: 28 28 28;
  --button-text-color: 255 255 255;
}

.cooperation-section h1,
.cooperation-section .section-header h2 {
  font-family: "SilvaDisplay", sans-serif;
}

/* --------------------------------------------------------------------------
   2) Hero
   -------------------------------------------------------------------------- */
.cooperation-hero {
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  gap: 2rem;
  /* Guaranteed breathing room below the site header, independent of the
     ambient section-spacing value (Hero has separate_section_with_border
     off, but still needs a visible gap above its badge). */
  padding-block-start: 2rem;
}

@media screen and (min-width: 700px) {
  .cooperation-hero {
    grid-template-columns: 1.1fr .9fr;
    gap: 3rem;
  }
}

.cooperation-hero__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.25rem;
}

.cooperation-hero__content > * {
  margin: 0;
}

/* Column flex items shrink-to-fit by default (align-items: flex-start above);
   force the full-width, wrapping elements back to 100% so only the badge
   and the CTA button hug their own content width. */
.cooperation-hero__title,
.cooperation-hero__body {
  width: 100%;
}

.cooperation-hero__eyebrow {
  margin: 0;
}

.cooperation-hero__badge {
  display: inline-flex;
  align-items: center;
  background-color: #fff;
  border-radius: var(--rounded-full, 9999px);
  padding: .5rem 1rem;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .1);
}

.cooperation-hero__title em {
  /* Color is set per-instance via a sibling <style> tag in the section. */
  font-style: italic;
}

/* Collage — desktop only (gated by the pre-existing .desktop-only utility) */
.cooperation-hero__collage {
  position: relative;
  aspect-ratio: 1 / 1;
}

.cooperation-hero__collage-photo,
.cooperation-hero__collage-icon,
.cooperation-hero__collage-accent {
  position: absolute;
  border-radius: 1.5rem;
  box-shadow: 0 12px 28px rgba(0, 0, 0, .12);
}

.cooperation-hero__collage-photo {
  top: 0;
  left: 0;
  width: 65%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  z-index: 1;
  background-color: rgb(var(--border-color));
}

.cooperation-hero__collage-photo img,
.cooperation-hero__collage-photo svg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Small image tile, peeking out top-right, mostly hidden behind the photo
   tile — matches the mockup's small pink accent square. */
.cooperation-hero__collage-accent {
  top: -4%;
  right: 6%;
  width: 30%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  z-index: 0;
  background-color: rgb(var(--border-color));
}

/* Larger image tile, front-most, overlapping the photo tile bottom-right —
   matches the mockup's blue square with a centered icon/video glyph. */
.cooperation-hero__collage-icon {
  bottom: 0;
  right: 0;
  width: 48%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  z-index: 2;
  background-color: rgb(var(--border-color));
}

.cooperation-hero__collage-accent img,
.cooperation-hero__collage-accent svg,
.cooperation-hero__collage-icon img,
.cooperation-hero__collage-icon svg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* --------------------------------------------------------------------------
   3) Stats
   -------------------------------------------------------------------------- */
.cooperation-stats__bar {
  border-radius: 2rem;
  padding: 2.5rem 1.5rem;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem 1rem;
  text-align: center;
}

@media screen and (min-width: 700px) {
  .cooperation-stats__bar {
    grid-template-columns: repeat(4, 1fr);
    padding: 3rem;
  }
}

.cooperation-stats__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .25rem;
}

.cooperation-stats__number,
.cooperation-stats__label {
  margin: 0;
}

.cooperation-stats__number {
  font-style: italic;
}

.cooperation-stats__caption {
  max-width: 40rem;
  margin-inline: auto;
  margin-block-start: 2rem;
  text-align: center;
}

/* --------------------------------------------------------------------------
   4) Perks
   -------------------------------------------------------------------------- */
.cooperation-perks__card {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  border-radius: 2rem;
  padding: 2rem;
}

@media screen and (min-width: 700px) {
  .cooperation-perks__card {
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    padding: 3rem;
  }
}

.cooperation-perks__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.cooperation-perks__inner {
  /* Background & text color come from the color-scheme classes already
     present on this element — intentionally not set here. */
  border-radius: 1.5rem;
  padding: 2rem;
}

.cooperation-perks__eyebrow {
  margin: 0 0 .5rem;
}

.cooperation-perks__inner-title {
  margin: 0;
}

.cooperation-perks__list {
  list-style: none;
  display: grid;
  gap: .75rem;
  margin-block: 1.5rem;
  margin-inline: 0;
  padding: 0;
}

.cooperation-perks__list-item {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
}

.cooperation-perks__check {
  display: inline-grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: #000;
  color: #fff;
  flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   5) Features + Process grids
   -------------------------------------------------------------------------- */
.cooperation-features,
.cooperation-process {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

@media screen and (min-width: 700px) {
  .cooperation-features,
  .cooperation-process {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* .cooperation-features--stack uses the exact same responsive rule above
   (1 col mobile / 3 col desktop) — no distinct rules needed. */

.cooperation-features__item {
  background: #fff;
  border-radius: 1.25rem;
  padding: 2rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.cooperation-features__icon-circle {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  margin-block-end: 1.25rem;
}

.cooperation-features__title {
  margin: 0 0 .5rem;
}

.cooperation-features__content {
  margin: 0;
}

.cooperation-process__step {
  position: relative;
  border-top: 4px solid rgb(var(--step-accent));
  border-radius: .75rem;
  padding: 1.5rem;
  background: #fff;
}

.cooperation-process__number {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: rgb(var(--step-accent));
  color: #fff;
  font-weight: 700;
  margin-block-end: 1rem;
}

.cooperation-process__title {
  margin: 0 0 .5rem;
}

.cooperation-process__content {
  margin: 0;
}

.cooperation-process__cta {
  text-align: center;
  margin-block-start: 2rem;
}

/* --------------------------------------------------------------------------
   6) Comparison table
   -------------------------------------------------------------------------- */
.cooperation-comparison {
  width: 100%;
  border-collapse: collapse;
}

.cooperation-comparison th,
.cooperation-comparison td {
  padding: .75rem 1rem;
  text-align: start;
  border-bottom: 1px solid rgb(var(--text-color) / .12);
}

.cooperation-comparison th {
  font-weight: 700;
}

.cooperation-comparison__value--with {
  font-weight: 700;
}

.cooperation-comparison__value--typical {
  opacity: .5;
}

.cooperation-comparison__check {
  display: inline-flex;
  vertical-align: middle;
  margin-inline-end: .4rem;
}

@media screen and (max-width: 699px) {
  .cooperation-comparison {
    font-size: .875rem;
  }
}

/* --------------------------------------------------------------------------
   7) Carousel-to-grid (Testimonials + Products, shared)
   -------------------------------------------------------------------------- */
.cooperation-cards-carousel-wrap {
  display: grid;
  gap: 1.5rem;
}

.cooperation-cards-carousel-wrap {
  max-width: 100%;
}

.cooperation-cards-carousel {
  display: flex;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  gap: 1rem;
  padding-inline: 1rem;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.cooperation-cards-carousel::-webkit-scrollbar {
  display: none;
}

.cooperation-cards-carousel > * {
  flex: 0 0 85%;
  min-width: 0;
  scroll-snap-align: center;
}

@media (min-width: 1000px) {
  .cooperation-cards-carousel {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    overflow: visible;
    scroll-snap-type: none;
    padding-inline: 0;
    gap: 2rem;
  }

  .cooperation-cards-carousel > * {
    flex: initial;
    min-width: 0;
    scroll-snap-align: none;
  }
}

.cooperation-cards-carousel-wrap .page-dots {
  margin-block-start: 1rem;
  justify-content: center;
}

.cooperation-testimonial {
  background: #fff;
  border-radius: 1.25rem;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.cooperation-testimonial__media {
  aspect-ratio: 4 / 5;
  background-color: rgb(var(--card-bg));
  background-image: var(--card-bg-gradient);
  display: grid;
  place-items: center;
  color: #fff;
}

.cooperation-testimonial__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.cooperation-testimonial__quote {
  font-style: italic;
  margin: 0;
  padding: 1.25rem 1.25rem 0;
}

.cooperation-testimonial__handle {
  margin: 0;
  padding: .75rem 1.25rem 0;
}

.cooperation-testimonial__stat {
  display: inline-block;
  width: fit-content;
  border-radius: 999px;
  padding: .35rem .75rem;
  margin: .75rem 1.25rem 1.25rem;
  background: #f1f1f1;
  font-size: .8rem;
}

/* Products now renders the theme's native product-card component inside
   the native .product-list--carousel wrapper (see
   sections/custom-cooperation-products.liquid), so it inherits that
   component's own styling instead of custom .cooperation-product__* rules.
   Only a light wrapper tweak is needed to sit flush inside our container. */
.cooperation-products__list {
  margin-inline: 0;
}