:root{
  --surfcamp-grid-bg:transparent;
  --surfcamp-grid-text:#22272a;
  --surfcamp-grid-muted:#66727a;
  --surfcamp-grid-border:#e6edf0;

  --surfcamp-grid-primary:#1AA6B7;
  --surfcamp-grid-primary-light:#5ED3DF;
  --surfcamp-grid-primary-dark:#0E7490;

  --surfcamp-grid-accent:#F4A261;
  --surfcamp-grid-accent-soft:#FFF3E8;

  --surfcamp-grid-shadow:0 22px 54px rgba(15,111,143,.15);
  --surfcamp-grid-radius:24px;
}

.surfcamp-grid-section{
  color:var(--surfcamp-grid-text);
  padding:clamp(28px,4vw,56px) 0;
}

.surfcamp-grid-wrap{
  width:min(1400px,100%);
  margin:0 auto;
}

.surfcamp-grid-head{
  margin-bottom:24px;
}

.surfcamp-grid-kicker{
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin:0 0 12px;
  padding:7px 12px;
  border-radius:999px;

  background:rgba(26,166,183,.08);
  color:var(--surfcamp-grid-primary-dark);

  font:800 11px/1 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,"Helvetica Neue",Arial;
  letter-spacing:.14em;
  text-transform:uppercase;
}

.surfcamp-grid-kicker::before{
  content:"~\A~";
  white-space:pre;

  display:inline-block;

  font-size:14px;
  font-weight:900;
  line-height:0.7;

  color:var(--surfcamp-grid-primary);

  margin-right:6px;

  animation:waveStack 2.4s ease-in-out infinite;
}

.surfcamp-grid-kicker::before,
.surfcamp-grid-kicker::after{
  position:relative;
}

.surfcamp-grid-kicker::before{
  content:"~\A~";
  white-space:pre;

  display:inline-block;

  font-size:14px;
  font-weight:900;
  line-height:0.3;

  background:linear-gradient(
    180deg,
    var(--surfcamp-grid-primary),
    var(--surfcamp-grid-primary-light)
  );

  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;

  margin-right:4px;

  animation:waveStack 2.4s ease-in-out infinite;
}

@keyframes waveStack{
  0%,100%{
    transform:translateY(0);
    opacity:.7;
  }
  50%{
    transform:translateY(-2px);
    opacity:1;
  }
}

.surfcamp-grid-title{
  margin:0;
  color:var(--surfcamp-grid-text);
  font:800 clamp(28px,4vw,56px)/1.05 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,"Helvetica Neue",Arial;
  letter-spacing:-.02em;
}

.surfcamp-grid-subtitle{
  margin:20px 0 0 !important;
  max-width:100%;
  color:var(--surfcamp-grid-muted);
  font:500 16px/1.55 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,"Helvetica Neue",Arial;
}

.surfcamp-grid{
  display:grid;
  gap:20px;
  grid-template-columns:repeat(4,1fr);
  align-items:stretch;
}

@media(max-width:1100px){
  .surfcamp-grid{
    grid-template-columns:repeat(2,1fr);
  }
}

@media(max-width:620px){
  .surfcamp-grid{
    grid-template-columns:1fr;
  }
}

.surfcamp-card{
  background:#ffffff;
  border:1px solid var(--surfcamp-grid-border);
  border-radius:28px 28px 32px 22px;
  overflow:hidden;
  box-shadow:0 2px 12px rgba(15,111,143,.04);
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;
  display:flex;
  flex-direction:column;
  min-height:100%;
}

.surfcamp-card:hover,
.surfcamp-card:focus-within{
  transform:translateY(-5px);
  box-shadow:var(--surfcamp-grid-shadow);
  border-color:rgba(15,111,143,.26);
}

.surfcamp-card-media{
  position:relative;
  display:block;
  aspect-ratio:4/3;
  overflow:hidden;
  background:#f3f7f8;

  /* WICHTIG: Radius komplett hier definieren */
  border-radius:28px 28px 34px 12px;

  /* Fix für Hover-Flackern */
  isolation:isolate;
  transform:translateZ(0);
}

.surfcamp-card-media::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(
    180deg,
    rgba(0,0,0,0) 50%,
    rgba(0,0,0,.18) 100%
  );
  pointer-events:none;
}

.surfcamp-card-media img{
  width:100%;
  height:100%;
  object-fit:cover;

  /* kleiner Trick gegen Edge-Flackern */
  transform:scale(1.001);
  transition:transform .4s ease;

  display:block;

  /* übernimmt exakt den gleichen Radius */
  border-radius:inherit;

  /* GPU Fix */
  backface-visibility:hidden;
}

.surfcamp-card:hover .surfcamp-card-media img,
.surfcamp-card:focus-within .surfcamp-card-media img{
  transform:scale(1.045);
}

.surfcamp-card-badge{
  position:absolute;
  top:16px;
  right:16px;
  z-index:3;
  display:inline-flex;
  align-items:center;
  min-height:28px;
  padding:0 11px;
  border-radius:999px;
  background:var(--surfcamp-grid-accent);
  color:#22272a;
  box-shadow:0 8px 18px rgba(244,162,97,.22);
  backdrop-filter:blur(8px);
  font:800 10px/1 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,"Helvetica Neue",Arial;
  letter-spacing:.05em;
  text-transform:uppercase;
}

.surfcamp-card-price{
  position:absolute;
  right:18px;
  bottom:14px;
  z-index:2;
  display:inline-flex;
  align-items:baseline;
  gap:8px;
  padding:9px 14px;
  border-radius:999px;
  background:var(--surfcamp-grid-primary-dark);
  color:#ffffff;
  backdrop-filter:blur(6px);
  box-shadow:0 12px 28px rgba(14,116,144,.35);
  font:800 14px/1 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,"Helvetica Neue",Arial;
}

.surfcamp-card-price strong{
  font-size:20px;
  letter-spacing:-.01em;
}

.surfcamp-card-price small{
  opacity:.9;
  font-weight:700;
  font-size:12px;
}

.surfcamp-card-body{
  padding:18px 20px 20px;
  display:flex;
  flex-direction:column;
  gap:11px;
  flex:1;
}

.surfcamp-card-country{
  margin:0;
  color:var(--surfcamp-grid-muted);
  font:800 12px/1.2 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,"Helvetica Neue",Arial;
  letter-spacing:.13em;
  text-transform:uppercase;
}

.surfcamp-card-country::before{
  content:"\f57d";
  font-family:"Font Awesome 5 Free";
  font-weight:900;
  font-size:11px;
  line-height:1;
  color:inherit;
  margin-right:9px;
  opacity:.65;
}

.surfcamp-card-title{
  margin:1px 0 0;
  color:var(--surfcamp-grid-text);
  font:900 24px/1.12 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,"Helvetica Neue",Arial;
  letter-spacing:-.03em;
  transition:color .18s ease;
}

.surfcamp-card:hover .surfcamp-card-title,
.surfcamp-card:focus-within .surfcamp-card-title{
  color:var(--surfcamp-grid-primary-dark);
}

.surfcamp-card-title a{
  color:inherit;
  text-decoration:none;
}

.surfcamp-card-title a:hover{
  color:inherit;
  text-decoration:none;
}

.surfcamp-card-desc{
  margin:0;
  color:#374151;
  font:500 15px/1.55 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,"Helvetica Neue",Arial;
  opacity:.86;
}

.surfcamp-card-tags{
  list-style:none;
  padding:0;
  margin:4px 0 0;
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}

.surfcamp-card-tags li{
  border:0;
  background:rgba(26,166,183,.08);
  color:var(--surfcamp-grid-primary-dark);
  border-radius:12px;
  padding:6px 9px;
  font:800 11px/1 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,"Helvetica Neue",Arial;
  white-space:nowrap;
}

.surfcamp-card-actions{
  margin-top:auto;
  padding-top:14px;
}

.surfcamp-card-button{
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  width:100%;
  min-height:50px;
  padding:13px 16px;
  border-radius:999px;
  background:linear-gradient(
    90deg,
    var(--surfcamp-grid-primary-light),
    var(--surfcamp-grid-primary-dark)
  );
  color:#ffffff;
  font:900 14px/1 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,"Helvetica Neue",Arial;
  text-decoration:none;
  border:none;
  box-shadow:0 10px 22px rgba(14,116,144,.32);
  transition:transform .18s ease,background .18s ease,box-shadow .18s ease,color .18s ease;
}

.surfcamp-card-button::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  border-radius:inherit;
  background:inherit;
  filter:blur(14px);
  opacity:.22;
  transition:opacity .18s ease,filter .18s ease;
}

.surfcamp-card-button:hover,
.surfcamp-card-button:focus{
  background:linear-gradient(
    90deg,
    #7FE7F0,
    #0C6B86
  );
  color:#ffffff;
  text-decoration:none;
  transform:translateY(-2px);
  box-shadow:0 13px 28px rgba(26,166,183,.34);
}

.surfcamp-card-button:hover::after,
.surfcamp-card-button:focus::after{
  opacity:.34;
  filter:blur(18px);
}

.surfcamp-card-button i{
  font-size:13px;
  line-height:1;
  transition:transform .2s ease;
}

.surfcamp-card-button:hover i,
.surfcamp-card-button:focus i{
  transform:translateX(4px);
}