/* ==========================================================================
   RSCE Schlafgeschichten Personenboxen
   ========================================================================== */

.rsce-schlafgeschichten-personenboxen {
  --sg-person-primary: #4b4a83;
  --sg-person-primary-dark: #2f2e5f;
  --sg-person-soft: #f4f3fb;
  --sg-person-soft-strong: #dadae9;
  --sg-person-white: #ffffff;
  --sg-person-text: #3f3f46;
  --sg-person-muted: #6b6b78;
  --sg-person-border: rgba(75, 74, 131, 0.14);

  position: relative;
  color: var(--sg-person-text);
}

/* Hintergründe */
.rsce-schlafgeschichten-personenboxen--bg-white {
  background: #ffffff;
}

.rsce-schlafgeschichten-personenboxen--bg-soft {
  background:
    linear-gradient(
      180deg,
      #ffffff 0%,
      var(--sg-person-soft) 100%
    );
}

.rsce-schlafgeschichten-personenboxen--bg-none {
  background: transparent;
}

/* Abstände */
.rsce-schlafgeschichten-personenboxen--top-small {
  padding-top: clamp(2rem, 4vw, 3rem);
}

.rsce-schlafgeschichten-personenboxen--top-medium {
  padding-top: clamp(3rem, 6vw, 5rem);
}

.rsce-schlafgeschichten-personenboxen--top-large {
  padding-top: clamp(4rem, 8vw, 7rem);
}

.rsce-schlafgeschichten-personenboxen--bottom-small {
  padding-bottom: clamp(2rem, 4vw, 3rem);
}

.rsce-schlafgeschichten-personenboxen--bottom-medium {
  padding-bottom: clamp(3rem, 6vw, 5rem);
}

.rsce-schlafgeschichten-personenboxen--bottom-large {
  padding-bottom: clamp(4rem, 8vw, 7rem);
}

/* Innenbereich */
.rsce-schlafgeschichten-personenboxen__inner {
  width: min(75rem, calc(100% - 3rem));
  margin-inline: auto;
}

/* Header */
.rsce-schlafgeschichten-personenboxen__header {
  max-width: 52rem;
  margin: 0 auto clamp(2rem, 4vw, 3rem);
  text-align: center;
}

.rsce-schlafgeschichten-personenboxen__label {
  margin: 0 0 0.7rem;
  font-family: "Poppins", Arial, sans-serif;
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sg-person-primary);
}

.rsce-schlafgeschichten-personenboxen__headline,
.main-content h2.rsce-schlafgeschichten-personenboxen__headline {
  margin: 0;
  font-family: "Lora", Georgia, serif;
  font-size: clamp(1.65rem, 3.5vw, 3rem);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.035em;
  color: var(--sg-person-primary-dark);
  text-wrap: balance;
}

.rsce-schlafgeschichten-personenboxen__intro {
  max-width: 44rem;
  margin: 1.1rem auto 0;
  font-family: "Poppins", Arial, sans-serif;
  font-size: clamp(1rem, 1.3vw, 1.13rem);
  line-height: 1.75;
  color: var(--sg-person-muted);
}

.rsce-schlafgeschichten-personenboxen__intro p {
  margin: 0;
}

.rsce-schlafgeschichten-personenboxen__intro p + p {
  margin-top: 0.75rem;
}

/* Grid */
.rsce-schlafgeschichten-personenboxen__grid {
  display: grid;
  gap: clamp(1.25rem, 2.5vw, 2rem);
}

.rsce-schlafgeschichten-personenboxen--cols-auto
.rsce-schlafgeschichten-personenboxen__grid {
  grid-template-columns:
    repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
}

.rsce-schlafgeschichten-personenboxen--cols-2
.rsce-schlafgeschichten-personenboxen__grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.rsce-schlafgeschichten-personenboxen--cols-3
.rsce-schlafgeschichten-personenboxen__grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Karte */
.rsce-schlafgeschichten-personenboxen__card {
  display: grid;
  grid-template-columns: minmax(9rem, 13rem) minmax(0, 1fr);
  gap: clamp(1rem, 2vw, 1.4rem);
  align-items: center;
  padding: clamp(1rem, 2.2vw, 1.45rem);
  border: 1px solid var(--sg-person-border);
  border-radius: 1.5rem;
  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.98),
      rgba(244, 243, 251, 0.82)
    );
  box-shadow: 0 1.15rem 3rem rgba(75, 74, 131, 0.08);
}

/* Bild */
.rsce-schlafgeschichten-personenboxen__figure {
  position: relative;
  overflow: hidden;
  width: 100%;
  margin: 1rem 0 0;
  background: var(--sg-person-soft-strong);
}

.rsce-schlafgeschichten-personenboxen--shape-rounded
.rsce-schlafgeschichten-personenboxen__figure {
  border-radius: 1.1rem;
}

.rsce-schlafgeschichten-personenboxen--shape-soft
.rsce-schlafgeschichten-personenboxen__figure {
  border-radius: 2rem;
}

.rsce-schlafgeschichten-personenboxen--shape-circle
.rsce-schlafgeschichten-personenboxen__figure {
  border-radius: 999rem;
}

.rsce-schlafgeschichten-personenboxen--image-portrait
.rsce-schlafgeschichten-personenboxen__figure {
  aspect-ratio: 4 / 5;
}

.rsce-schlafgeschichten-personenboxen--image-square
.rsce-schlafgeschichten-personenboxen__figure,
.rsce-schlafgeschichten-personenboxen--shape-circle
.rsce-schlafgeschichten-personenboxen__figure {
  aspect-ratio: 1 / 1;
}

.rsce-schlafgeschichten-personenboxen--image-landscape
.rsce-schlafgeschichten-personenboxen__figure {
  aspect-ratio: 4 / 3;
}

.rsce-schlafgeschichten-personenboxen__figure img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Inhalt */
.rsce-schlafgeschichten-personenboxen__body {
  min-width: 0;
}

.rsce-schlafgeschichten-personenboxen__name {
  margin: 0;
  font-family: "Lora", Georgia, serif;
  font-size: clamp(1.45rem, 2.2vw, 2rem);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.025em;
  color: var(--sg-person-primary-dark);
}

.rsce-schlafgeschichten-personenboxen__name span,
.rsce-schlafgeschichten-personenboxen__name small {
  display: block;
}

.rsce-schlafgeschichten-personenboxen__name small {
  margin-top: 0.25rem;
  font-family: "Poppins", Arial, sans-serif;
  font-size: 0.85rem;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--sg-person-primary);
}

.rsce-schlafgeschichten-personenboxen__short {
  margin: 0.8rem 0 0;
  font-family: "Poppins", Arial, sans-serif;
  font-size: 0.98rem;
  font-weight: 500;
  line-height: 1.55;
  color: var(--sg-person-text);
}

.rsce-schlafgeschichten-personenboxen__text {
  margin: 0.75rem 0 0;
  font-family: "Poppins", Arial, sans-serif;
  font-size: 0.94rem;
  line-height: 1.68;
  color: var(--sg-person-muted);
}

.rsce-schlafgeschichten-personenboxen__text p {
  margin: 0;
}

.rsce-schlafgeschichten-personenboxen__text p + p {
  margin-top: 0.75rem;
}

/* Link */
.rsce-schlafgeschichten-personenboxen__link {
  margin: 1rem 0 0;
}

.rsce-schlafgeschichten-personenboxen__link a {
  display: inline-flex;
  align-items: center;
  font-family: "Poppins", Arial, sans-serif;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--sg-person-primary);
  text-decoration: none;
}

.rsce-schlafgeschichten-personenboxen__link a::after {
  content: "›";
  margin-left: 0.4em;
  transition: transform 0.2s ease;
}

.rsce-schlafgeschichten-personenboxen__link a:hover,
.rsce-schlafgeschichten-personenboxen__link a:focus {
  color: var(--sg-person-primary-dark);
  text-decoration: underline;
}

.rsce-schlafgeschichten-personenboxen__link a:hover::after,
.rsce-schlafgeschichten-personenboxen__link a:focus::after {
  transform: translateX(0.15rem);
}

/* ==========================================================================
   Sonderlayout: genau drei Personen
   Nur auf großen Bildschirmen Bild oberhalb des Textes.
   ========================================================================== */

@media (min-width: 1101px) {
  .rsce-schlafgeschichten-personenboxen--count-3
  .rsce-schlafgeschichten-personenboxen__card {
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    align-items: start;
  }

  .rsce-schlafgeschichten-personenboxen--count-3
  .rsce-schlafgeschichten-personenboxen__figure {
    margin: 0;
  }

  .rsce-schlafgeschichten-personenboxen--count-3
  .rsce-schlafgeschichten-personenboxen__body {
    width: 100%;
    padding-top: 0.25rem;
  }
}

/* Tablet */
@media (max-width: 1100px) {
  .rsce-schlafgeschichten-personenboxen__inner {
    width: min(58rem, calc(100% - 2rem));
  }

  .rsce-schlafgeschichten-personenboxen--cols-2
  .rsce-schlafgeschichten-personenboxen__grid,
  .rsce-schlafgeschichten-personenboxen--cols-3
  .rsce-schlafgeschichten-personenboxen__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .rsce-schlafgeschichten-personenboxen__card {
    grid-template-columns: 1fr;
    align-items: start;
    padding: clamp(1.15rem, 2.4vw, 1.6rem);
  }

  .rsce-schlafgeschichten-personenboxen__figure {
    width: 100%;
    max-width: none;
  }

  .rsce-schlafgeschichten-personenboxen--image-portrait
  .rsce-schlafgeschichten-personenboxen__figure {
    aspect-ratio: 4 / 3;
  }

  .rsce-schlafgeschichten-personenboxen__body {
    padding-top: 0.25rem;
  }

  .rsce-schlafgeschichten-personenboxen__short {
    max-width: 22rem;
  }

  .rsce-schlafgeschichten-personenboxen__text {
    max-width: 24rem;
  }
}

/*
 * Größeres Tablet:
 * Bei drei Personen stehen zwei Karten oben.
 * Die dritte Karte wird mittig darunter gesetzt.
 */
@media (min-width: 761px) and (max-width: 1100px) {
  .rsce-schlafgeschichten-personenboxen--count-3
  .rsce-schlafgeschichten-personenboxen__card:last-child {
    grid-column: 1 / -1;
    width: min(100%, 28rem);
    justify-self: center;
  }

  .rsce-schlafgeschichten-personenboxen--count-3
  .rsce-schlafgeschichten-personenboxen__short,
  .rsce-schlafgeschichten-personenboxen--count-3
  .rsce-schlafgeschichten-personenboxen__text {
    max-width: none;
  }
}

/* Schmales Tablet und Mobile */
@media (max-width: 760px) {
  .rsce-schlafgeschichten-personenboxen--cols-auto
  .rsce-schlafgeschichten-personenboxen__grid,
  .rsce-schlafgeschichten-personenboxen--cols-2
  .rsce-schlafgeschichten-personenboxen__grid,
  .rsce-schlafgeschichten-personenboxen--cols-3
  .rsce-schlafgeschichten-personenboxen__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .rsce-schlafgeschichten-personenboxen--count-3
  .rsce-schlafgeschichten-personenboxen__card:last-child {
    grid-column: auto;
    width: auto;
    max-width: none;
  }
}

/* Mobile */
@media (max-width: 640px) {
  .rsce-schlafgeschichten-personenboxen__inner {
    width: min(calc(100% - 2rem), 36rem);
  }

  .rsce-schlafgeschichten-personenboxen__header {
    text-align: left;
  }

  .rsce-schlafgeschichten-personenboxen__intro {
    margin-right: 0;
    margin-left: 0;
  }

  .rsce-schlafgeschichten-personenboxen__card {
    grid-template-columns: 1fr;
    align-items: start;
    border-radius: 1.2rem;
  }

  .rsce-schlafgeschichten-personenboxen__figure {
    max-width: 15rem;
  }

  .rsce-schlafgeschichten-personenboxen--shape-circle
  .rsce-schlafgeschichten-personenboxen__figure {
    max-width: 12rem;
  }

  .rsce-schlafgeschichten-personenboxen__name {
    font-size: 1.45rem;
  }

  .rsce-schlafgeschichten-personenboxen__short {
    font-size: 0.95rem;
  }

  .rsce-schlafgeschichten-personenboxen__text {
    font-size: 0.92rem;
  }
}