/* ============================
SETCARD QUADRATISCH – HYBRID VERSION 2
============================ */

/* Grid für die Gesamtkarte */
.setcard-square {
  display: grid;
  grid-template-columns: 1fr; /*  Nur 1 Spalte */
  gap: 20px;

  width: 100%;
  max-width: 900px;
  margin: 0 auto 40px;
  padding: 20px;

  background: #0d0d0d;
  border-radius: 14px;

  border: 2px solid rgba(255, 0, 204, 0.35);
  box-shadow: 0 0 18px rgba(255, 0, 204, 0.15);
}

/* Desktop Schrftgrössen*/
.setcard-square-content h4 {
  font-size: 1.5rem;
  margin-bottom: 0px; padding-bottom:0;
  color: #ffff00; text-align:left;
}

.setcard-square-content .subtitel {
  font-size: 1.1rem;
 /* color: #ff00cc; */
color:lime;
  margin-bottom: 2px;
}

.setcard-square-content .profiltext {
  font-size: 1.0rem;
line-height:1.55;
}

/* Mobile */
@media (max-width: 900px) {
  .setcard-square-content h4 {
    font-size: 1.35rem;
  }

  .setcard-square-content .subtitel {
    font-size: 1rem;
  }
}

.setcard-square-content,
.setcard-square-content h4,
.setcard-square-content .subtitel,
.setcard-square-content .text {
  text-align: left !important;
}

/* Bild floatet links – Text fließt herum */
.setcard-square-image {
  float: left;
  width: 40%;
  margin: 0 20px 20px 0;
  shape-outside: inset(0 round 10px); /* Quadrat mit Radius */
}

/* Quadratisches Bild */
.setcard-square-image img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: top; /* DAS ist Top‑Crop */
  border-radius: 10px;
border: 2px solid rgba(255, 0, 204, 0.5);
  display: block;

  box-shadow: 0 0 12px rgba(255, 0, 204, 0.25);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

/* Hover */
.setcard-square-image img:hover { border:2px solid #ffff00;
  transform: scale(1.05);
  box-shadow:
    0 0 22px rgba(255, 0, 204, 0.55),
    0 0 40px rgba(255, 0, 204, 0.35),
    0 0 70px rgba(255, 0, 204, 0.25);
}

.setcard-square:hover {
  border-color: rgba(255, 0, 204, 0.85);
  box-shadow:
    0 0 28px rgba(255, 0, 204, 0.45),
    0 0 50px rgba(255, 0, 204, 0.25);
}


/* Footer bleibt Grid */
.setcard-square-footer {
  grid-column: 1 / -1;
  margin-top: 20px;
  display: flex;
  justify-content: center;
}

/* Mobile */
@media (max-width: 900px) {
  .setcard-square-image {
    float: none;
    width: 100%;
    margin: 0 0 20px 0;
    shape-outside: none;
  }
}