/* ==========================================================================
   Quote band — a dark, quiet pause carrying a single sentence.
   ========================================================================== */

.quote-band {
  position: relative;
  display: grid;
  place-items: center;
  min-height: clamp(24rem, 56vh, 34rem);
  padding-block: var(--sp-10);
  overflow: hidden;
  /*
     A rose bloom held in the middle of the band, dissolving into the page at
     both edges — so the section has no top or bottom edge at all.

     The two ends fade to different creams on purpose: the deep band of the
     gallery sits above, the plain page below. Fading both to the same cream
     would trade a hard edge at the bottom for a hard edge at the top.
  */
  background: linear-gradient(
      to bottom,
      var(--quote-top) 0%,
      var(--quote-top-fade) 30%,
      var(--c-cream-fade) 70%,
      var(--c-cream) 100%
    ),
    /* Wider than the band so the tint reads as light in the room rather
       than as an oval sitting on the page. */
      radial-gradient(
        ellipse 132% 74% at 50% 50%,
        rgba(201, 35, 81, 0.22) 0%,
        rgba(201, 35, 81, 0.15) 34%,
        rgba(201, 35, 81, 0.07) 58%,
        rgba(201, 35, 81, 0.02) 78%,
        rgba(201, 35, 81, 0) 92%
      ),
    var(--c-cream);
  isolation: isolate;

  /*
     Die obere Kante nimmt die Farbe der Fläche über dem Band an — nur so
     löst es sich nach oben genauso auf wie nach unten. Voreinstellung ist
     das dunklere Band der früheren Kachelwand.
  */
  --quote-top: var(--c-cream-deep);
  --quote-top-fade: var(--c-cream-deep-fade);

  /*
     The bloom is a tinted surface, not paper: the page's muted grey only
     reaches 3.2:1 on it. Same warm family, dropped far enough to hold 4.5:1
     at the strongest point of the gradient.
  */
  --c-ink-muted: #5f5456;
}

.quote-band__body {
  position: relative;
  text-align: center;
  color: var(--c-ink);
}

.quote-band__text {
  max-width: 22ch;
  margin-inline: auto;
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3.6vw, 3.6rem);
  font-style: italic;
  font-weight: 400;
  line-height: 1.28;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

.quote-band__cite {
  display: grid;
  gap: 0.35rem;
  margin-block-start: clamp(1.75rem, 3.5vw, 2.75rem);
  font-size: var(--fs-meta);
  color: var(--c-ink-muted);
}

.quote-band__cite cite {
  font-style: normal;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-size: var(--fs-eyebrow);
  color: var(--c-ink);
}

.quote-band__cite span {
  font-size: var(--fs-meta);
  font-weight: 300;
}

/* Helle Sektion darüber (Startseite: Heiligenberg mit Karte). */
.quote-band--above-cream {
  --quote-top: var(--c-cream);
  --quote-top-fade: var(--c-cream-fade);
}