/* ===== Seitentitel ===== */

.page-title {
  position: relative;
  background-color: var(--gray-medium);
  background-position: var(--bg-x, 50%) var(--bg-y, 0%);
  background-repeat: no-repeat;
  background-size: cover;
  overflow: hidden;

  /* full-bleed */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);

  /* Höhe via Seitenverhältnis */
  aspect-ratio: 24 / 7;
  min-height: 150px;
  max-height: 500px;

  /* zentrierter Inhalt */
  display: flex;
  align-items: center;       /* vertikal zentrieren */
  /* justify-content: center;  // nur nötig, wenn .container nicht schon per margin:auto mittig ist */

  color: var(--white);
  text-align: center;
  overflow: hidden;
}


.page-title > * {
  position: relative;
  z-index: 1;
}

/* Container & generelle Media Queries */
.page-title .container {
  padding: 2rem 1rem;
}

@media (max-width: 768px) {
  .page-title .container {
    padding: 2rem 1rem;
  }
}

/* Bild-Layer + Animation */
.page-title::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: inherit;
  background-size: cover;
  background-position: inherit;
  background-repeat: no-repeat;
  transform: scale(1.2);         /* Start: vergrößert */
  animation: pageTitleZoom 2s cubic-bezier(0.1, 1, 0.9, 1) forwards;
}

@keyframes pageTitleZoom {
  to {
    transform: scale(1);         /* Endzustand: normale Größe */
  }
}

/* Text-Elemente */
.page-title h1 {
  position: relative;
  z-index: 0;
  color: var(--bg-off-white);
  font-size: clamp(1.8rem, 4vw + 1.4rem, 5rem);
  display: inline-block;
  margin-bottom: 0;
  padding: 0.25em 0.5em 0.35em 0.5em;
  background-color: transparent;
  /* Wichtig: Das Overlay darf nicht vom Element beschnitten werden */
  overflow: visible;        /* vorher: hidden */
  border-radius: 0;         /* kein sichtbares Rechteck mehr */
}

.page-title p {
  background-color: transparent;
  font-size: clamp(0.9rem, 1vw + 0.85rem, 1.1rem);
}

/* Text & Pills: Fade-in */
.page-title h1,
.page-title p,
.page-title .pill-list li{
  opacity: 0;
  transform: translateY(8px);
  animation: ptFadeUp 2s ease-out forwards;
}

.page-title h1{ animation-delay: .15s; }
.page-title p{  animation-delay: .30s; }
.page-title .pill-list li{ animation-delay: .45s; }
.page-title .pill-list li:nth-child(2){ animation-delay: .52s; }
.page-title .pill-list li:nth-child(3){ animation-delay: .59s; }
.page-title .pill-list li:nth-child(4){ animation-delay: .66s; }
.page-title .pill-list li:nth-child(5){ animation-delay: .73s; }
.page-title .pill-list li:nth-child(6){ animation-delay: .80s; }
.page-title .pill-list li:nth-child(7){ animation-delay: .87s; }
.page-title .pill-list li:nth-child(8){ animation-delay: .94s; }

/* Layer */
.page-title h1::before {
  content: "";
  position: absolute;
  /* Position the glow at the center of the heading */
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);

  /* Make the overlay huge so its transparent edge is far away from the text box */
  width: 200vmax;
  height: 120vmax;
  z-index: -1;

  /* Softer fade: reach transparency earlier so no visible rectangle edge */
  background: radial-gradient(
    ellipse 40% 30% at 50% 50%,
    rgba(29,29,31,.50) 0%,
    rgba(29,29,31,.40) 20%,
    rgba(29,29,31,.20) 60%,
    rgba(29,29,31,0) 80%
  );
  pointer-events: none;
}

/* Varianten (.home-hero) */
.page-title.home-hero {
  aspect-ratio: 16 / 9;   /* klassisches Hero-Format */
  min-height: 300px;      /* für kleinere Screens */
  max-height: 800px;      /* großzügig für große Displays */
}

/* Titel-/Pills-Kombinationen */

.h1-pills-hero,
.h1-pills-std {
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  justify-content: center;
}

.h1-pills-hero {
  row-gap: clamp(1rem, 8vw + -1.4rem, 5rem);
}

.h1-pills-std {
  row-gap: clamp(1rem, 2vw + 0.4rem, 2rem);
}

/* Animation für Einblenden der Pills im Page Title */
@keyframes ptFadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}