/* =========================================================
   SURFCAMP CONTENT SPLIT
========================================================= */

.surfcamp-content-split-section{
  color:var(--surfcamp-grid-text,#22272a);

  padding:clamp(38px,5vw,72px) 0;

  scroll-margin-top:110px;
}


/* =========================================================
   LAYOUT
========================================================= */

.surfcamp-content-split{
  display:grid;

  grid-template-columns:
    minmax(0,1fr)
    minmax(380px,.92fr);

  gap:clamp(36px,6vw,82px);

  align-items:center;
}


/* =========================================================
   CONTENT
========================================================= */

.surfcamp-content-split__content{
  min-width:0;
}


.surfcamp-content-split__content
.surfcamp-grid-kicker{
  margin-bottom:18px;
}


.surfcamp-content-split__content
.surfcamp-grid-title{
  max-width:780px;
}


/* =========================================================
   TEXT
========================================================= */

.surfcamp-content-split__text{
  max-width:760px;

  margin-top:24px;

  color:#374151;

  font:
    500 16px/1.7
    system-ui,
    -apple-system,
    Segoe UI,
    Roboto,
    Ubuntu,
    Cantarell,
    "Helvetica Neue",
    Arial;
}


.surfcamp-content-split__text p{
  margin:0 0 17px;
}


.surfcamp-content-split__text p:last-child{
  margin-bottom:0;
}


.surfcamp-content-split__text strong{
  color:var(--surfcamp-grid-text,#22272a);

  font-weight:800;
}


.surfcamp-content-split__text ul,
.surfcamp-content-split__text ol{
  margin:18px 0 0;

  padding-left:21px;
}


.surfcamp-content-split__text li{
  margin-bottom:7px;
}


.surfcamp-content-split__text a{
  color:var(--surfcamp-grid-primary-dark,#0E7490);

  font-weight:700;

  text-decoration:underline;

  text-underline-offset:3px;
}


/* =========================================================
   IMAGE
========================================================= */

.surfcamp-content-split__media{
  position:relative;

  min-height:470px;

  overflow:hidden;

  border-radius:
    32px 32px 42px 18px;

  background:#f3f7f8;

  box-shadow:
    0 22px 54px
    rgba(15,111,143,.14);

  isolation:isolate;

  transform:translateZ(0);
}


.surfcamp-content-split__image{
  position:absolute;

  inset:0;

  display:block;

  width:100%;
  height:100%;

  object-fit:cover;

  transform:scale(1.001);

  backface-visibility:hidden;

  transition:transform .5s ease;
}


.surfcamp-content-split__media:hover
.surfcamp-content-split__image{
  transform:scale(1.035);
}


/* =========================================================
   IMAGE OVERLAY
========================================================= */

.surfcamp-content-split__overlay{
  position:absolute;

  inset:0;

  background:
    linear-gradient(
      180deg,
      rgba(0,0,0,0) 55%,
      rgba(8,74,91,.32) 100%
    );

  pointer-events:none;
}


/* =========================================================
   IMAGE LABEL
========================================================= */

.surfcamp-content-split__label{
  position:absolute;

  left:20px;
  bottom:20px;

  z-index:2;

  display:inline-flex;
  align-items:center;

  padding:9px 14px;

  border-radius:999px;

  background:
    rgba(14,116,144,.92);

  color:#fff;

  backdrop-filter:blur(8px);

  box-shadow:
    0 10px 26px
    rgba(14,116,144,.28);

  font:
    800 11px/1
    system-ui,
    -apple-system,
    Segoe UI,
    Roboto,
    Ubuntu,
    Cantarell,
    "Helvetica Neue",
    Arial;

  letter-spacing:.07em;

  text-transform:uppercase;
}


/* =========================================================
   IMAGE LEFT
========================================================= */

.surfcamp-content-split--image-left
.surfcamp-content-split__media{
  grid-column:1;
  grid-row:1;
}


.surfcamp-content-split--image-left
.surfcamp-content-split__content{
  grid-column:2;
  grid-row:1;
}


/* =========================================================
   BUTTON
========================================================= */

.surfcamp-content-split__actions{
  margin-top:26px;
}


.surfcamp-content-split__button{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  gap:9px;

  min-height:48px;

  padding:13px 19px;

  border-radius:999px;

  background:
    linear-gradient(
      90deg,
      var(--surfcamp-grid-primary-light,#5ED3DF),
      var(--surfcamp-grid-primary-dark,#0E7490)
    );

  color:#fff;

  font:
    900 14px/1
    system-ui,
    -apple-system,
    Segoe UI,
    Roboto,
    Ubuntu,
    Cantarell,
    "Helvetica Neue",
    Arial;

  text-decoration:none;

  box-shadow:
    0 10px 22px
    rgba(14,116,144,.28);

  transition:
    transform .18s ease,
    box-shadow .18s ease;
}


.surfcamp-content-split__button:hover,
.surfcamp-content-split__button:focus{
  color:#fff;

  text-decoration:none;

  transform:translateY(-2px);

  box-shadow:
    0 13px 28px
    rgba(26,166,183,.34);
}


.surfcamp-content-split__button i{
  font-size:12px;

  transition:transform .18s ease;
}


.surfcamp-content-split__button:hover i{
  transform:translateX(3px);
}


/* =========================================================
   TABLET
========================================================= */

@media(max-width:1100px){

  .surfcamp-content-split{
    grid-template-columns:
      minmax(0,1fr)
      minmax(320px,.85fr);

    gap:38px;
  }


  .surfcamp-content-split__media{
    min-height:430px;
  }

}


/* =========================================================
   MOBILE
========================================================= */

@media(max-width:620px){

  .surfcamp-content-split-section{
    padding:36px 0;
  }


  .surfcamp-content-split{
    display:flex;

    flex-direction:column;

    gap:28px;
  }


  /*
   * Mobile immer:
   * 1. Text
   * 2. Bild
   *
   * Unabhängig von der Desktop-Bildposition.
   */

  .surfcamp-content-split__content{
    order:1;
    width:100%;
  }


  .surfcamp-content-split__media{
    order:2;

    width:100%;

    min-height:0;

    aspect-ratio:4/3;

    border-radius:
      26px 26px 32px 16px;
  }


  .surfcamp-content-split__text{
    margin-top:20px;

    font-size:15px;
    line-height:1.65;
  }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media(prefers-reduced-motion:reduce){

  .surfcamp-content-split__image,
  .surfcamp-content-split__button,
  .surfcamp-content-split__button i{
    transition:none;
  }

}