/** 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: #000;
}

/* 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;
  text-transform: unset;
}

/* --------------------------------------------------------------------------
   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;
}

/* Single-image layout: the photo tile fills the whole collage area,
   accent/icon tiles are not rendered. */
.cooperation-hero__collage--single .cooperation-hero__collage-photo {
  width: 100%;
  height: 100%;
}

/* --------------------------------------------------------------------------
   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;
  margin-top: 1rem !important; /* override the theme's default section spacing */
}

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

/* .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;
    table-layout: fixed;
  }

  .cooperation-comparison th,
  .cooperation-comparison td {
    padding: .6rem .5rem;
    overflow-wrap: break-word;
  }

  .cooperation-comparison th:first-child,
  .cooperation-comparison td:first-child {
    width: 28%;
    padding-inline-start: 0;
  }
}

/* --------------------------------------------------------------------------
   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;
}

.cooperation-cards-carousel-wrap{
  margin-top: 1rem;
}

@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;
    margin-top: 1rem;
  }

  .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: bespoke editorial card (image, category pill, title,
   description; no price/vendor) inside the shared carousel-to-grid
   component, matching the Figma design exactly. */
.cooperation-product-item {
  width: 100%;
}

.cooperation-product-card {
  background: #fff;
  border-radius: 1.5rem;
  padding: 1.5rem;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: .75rem;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .06);
}

/* Real product photography here is already fully art-directed (its own
   background color, in-image stickers/badges) rather than a plain cutout
   on white — so the image fills its tile edge-to-edge with no additional
   backdrop or padding, instead of framing it inside a grey box. */
.cooperation-product-card__image {
  aspect-ratio: 1 / 1;
  border-radius: 1rem;
  overflow: hidden;
}

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

.cooperation-product-card__badge {
  display: none;
  width: fit-content;
  border-radius: 999px;
  padding: .35rem .85rem;
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
}

.cooperation-product-card__title {
  margin: 0;
}

.cooperation-product-card__title a {
  color: inherit;
  text-decoration: none;
}

.cooperation-product-card__description {
  margin: 0;
  color: rgb(var(--text-color) / .65);
}

div > div > div > div.cooperation-hero__content > a{
  background-image: white;
  color: black;
}