/* =========================================================
   SURFCAMP ENTSCHEIDUNGSHILFE
========================================================= */

.surfcamp-decision-section{
  color:var(--surfcamp-grid-text,#22272a);
  padding:clamp(32px,5vw,68px) 0;
}


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

.surfcamp-decision-layout{
  display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(360px,.92fr);
  gap:clamp(28px,5vw,72px);
  align-items:center;
}

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

.surfcamp-decision-content .surfcamp-grid-head{
  margin-bottom:26px;
}

.surfcamp-decision-content .surfcamp-grid-title{
  max-width:900px;
}

.surfcamp-decision-intro{
  max-width:780px;
}

.surfcamp-decision-intro > *:first-child{
  margin-top:0;
}

.surfcamp-decision-intro > *:last-child{
  margin-bottom:0;
}


/* =========================================================
   AKKORDEON
========================================================= */

.surfcamp-decision-accordion{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.surfcamp-decision-item{
  background:#ffffff;
  border:1px solid var(--surfcamp-grid-border,#e6edf0);
  border-radius:20px 20px 24px 16px;
  overflow:hidden;
  box-shadow:0 2px 10px rgba(15,111,143,.045);
  transition:
    border-color .22s ease,
    box-shadow .22s ease,
    transform .22s ease;
}

.surfcamp-decision-item:hover{
  border-color:rgba(26,166,183,.30);
}

.surfcamp-decision-item[open]{
  border-color:rgba(26,166,183,.32);
  box-shadow:0 14px 34px rgba(15,111,143,.11);
}


/* =========================================================
   SUMMARY
========================================================= */

.surfcamp-decision-summary{
  position:relative;
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  gap:14px;
  align-items:center;

  min-height:88px;
  padding:11px 16px 11px 11px;

  cursor:pointer;
  list-style:none;

  background:#ffffff;

  transition:
    background .2s ease,
    color .2s ease;
}

.surfcamp-decision-summary::-webkit-details-marker{
  display:none;
}

.surfcamp-decision-summary::marker{
  display:none;
}

.surfcamp-decision-summary:hover{
  background:rgba(26,166,183,.025);
}

.surfcamp-decision-summary:focus-visible{
  outline:3px solid rgba(94,211,223,.45);
  outline-offset:-3px;
}


/* =========================================================
   KLEINES CAMP-BILD
========================================================= */

.surfcamp-decision-thumb{
  display:block;
  width:86px;
  height:66px;

  border-radius:15px 15px 18px 10px;
  overflow:hidden;

  background:#f3f7f8;

  isolation:isolate;
  transform:translateZ(0);
}

.surfcamp-decision-thumb img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;

  transform:scale(1.001);
  transition:transform .35s ease;

  backface-visibility:hidden;
}

.surfcamp-decision-item:hover .surfcamp-decision-thumb img,
.surfcamp-decision-item[open] .surfcamp-decision-thumb img{
  transform:scale(1.055);
}


/* =========================================================
   CAMP-TEXT SUMMARY
========================================================= */

.surfcamp-decision-summary-text{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:6px;
}

.surfcamp-decision-camp-title{
  display:block;

  color:var(--surfcamp-grid-text,#22272a);

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

  letter-spacing:-.025em;

  transition:color .18s ease;
}

.surfcamp-decision-item:hover
.surfcamp-decision-camp-title,
.surfcamp-decision-item[open]
.surfcamp-decision-camp-title{
  color:var(--surfcamp-grid-primary-dark,#0E7490);
}

.surfcamp-decision-label{
  display:block;

  color:var(--surfcamp-grid-muted,#66727a);

  font:
    700 12px/1.35
    system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,
    "Helvetica Neue",Arial;
}


/* =========================================================
   PLUS / MINUS
========================================================= */

.surfcamp-decision-toggle{
  position:relative;
  flex:0 0 auto;

  width:34px;
  height:34px;

  border-radius:999px;

  background:rgba(26,166,183,.09);

  transition:
    background .2s ease,
    transform .25s ease;
}

.surfcamp-decision-toggle::before,
.surfcamp-decision-toggle::after{
  content:"";
  position:absolute;

  top:50%;
  left:50%;

  width:12px;
  height:2px;

  border-radius:999px;

  background:var(--surfcamp-grid-primary-dark,#0E7490);

  transform:translate(-50%,-50%);
}

.surfcamp-decision-toggle::after{
  transform:
    translate(-50%,-50%)
    rotate(90deg);

  transition:
    opacity .2s ease,
    transform .25s ease;
}

.surfcamp-decision-item[open]
.surfcamp-decision-toggle{
  background:linear-gradient(
    135deg,
    var(--surfcamp-grid-primary-light,#5ED3DF),
    var(--surfcamp-grid-primary-dark,#0E7490)
  );
}

.surfcamp-decision-item[open]
.surfcamp-decision-toggle::before,
.surfcamp-decision-item[open]
.surfcamp-decision-toggle::after{
  background:#ffffff;
}

.surfcamp-decision-item[open]
.surfcamp-decision-toggle::after{
  opacity:0;
  transform:
    translate(-50%,-50%)
    rotate(0deg);
}


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

.surfcamp-decision-panel{
  padding:
    4px
    20px
    20px
    111px;
}

.surfcamp-decision-copy{
  color:#374151;

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

.surfcamp-decision-copy p{
  margin:0 0 14px;
}

.surfcamp-decision-copy p:last-child{
  margin-bottom:0;
}

.surfcamp-decision-copy strong{
  color:var(--surfcamp-grid-text,#22272a);
  font-weight:800;
}


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

.surfcamp-decision-button{
  position:relative;

  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;

  margin-top:17px;
  min-height:42px;
  padding:10px 17px;

  border-radius:999px;

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

  color:#ffffff;

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

  text-decoration:none;

  box-shadow:0 9px 20px rgba(14,116,144,.24);

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

.surfcamp-decision-button:hover,
.surfcamp-decision-button:focus{
  background:linear-gradient(
    90deg,
    #7FE7F0,
    #0C6B86
  );

  color:#ffffff;
  text-decoration:none;

  transform:translateY(-2px);

  box-shadow:0 12px 25px rgba(26,166,183,.31);
}

.surfcamp-decision-button i{
  font-size:11px;
  transition:transform .2s ease;
}

.surfcamp-decision-button:hover i{
  transform:translateX(3px);
}


/* =========================================================
   GROSSES BILD RECHTS
========================================================= */

.surfcamp-decision-media{
  position:relative;

  min-height:520px;
  height:100%;

  overflow:hidden;

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

  background:#f3f7f8;

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

  isolation:isolate;
  transform:translateZ(0);
}

.surfcamp-decision-media img{
  position:absolute;
  inset:0;

  display:block;

  width:100%;
  height:100%;

  object-fit:cover;

  transform:scale(1.001);

  transition:transform .55s ease;

  backface-visibility:hidden;
}

.surfcamp-decision-media:hover img{
  transform:scale(1.035);
}

.surfcamp-decision-media-overlay{
  position:absolute;
  inset:0;

  background:linear-gradient(
    180deg,
    rgba(0,0,0,.02) 40%,
    rgba(8,74,91,.34) 100%
  );

  pointer-events:none;
}

.surfcamp-decision-media-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:#ffffff;

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

  backdrop-filter:blur(8px);

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

  letter-spacing:.06em;
  text-transform:uppercase;
}


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

@media(max-width:1100px){

  .surfcamp-decision-layout{
    grid-template-columns:minmax(0,1.1fr) minmax(310px,.9fr);
    gap:32px;
  }

  .surfcamp-decision-media{
    min-height:480px;
  }

}


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

@media(max-width:620px){

  .surfcamp-decision-section{
    padding:34px 0;
  }

  .surfcamp-decision-layout{
    grid-template-columns:1fr;
    gap:28px;
  }

  .surfcamp-decision-summary{
    grid-template-columns:auto minmax(0,1fr) auto;
    gap:11px;

    min-height:78px;
    padding:9px 12px 9px 9px;
  }

  .surfcamp-decision-thumb{
    width:70px;
    height:58px;

    border-radius:13px 13px 16px 9px;
  }

  .surfcamp-decision-camp-title{
    font-size:17px;
  }

  .surfcamp-decision-label{
    font-size:11px;
  }

  .surfcamp-decision-toggle{
    width:30px;
    height:30px;
  }

  .surfcamp-decision-panel{
    padding:
      4px
      16px
      18px
      16px;
  }

  .surfcamp-decision-media{
    min-height:330px;
    aspect-ratio:4/3;

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

}