/* CO Zitat - Vollbild mit Satz, der Wort fuer Wort erscheint. */

.co-zitat {
  position: relative;
  min-height: 88vh;
  display: grid;
  /* Der Satz sitzt unten, nicht mittig - in der Bildmitte steht bei Hochzeitsbildern
     fast immer das Paar. Dieselbe Entscheidung wie in der Botschaft-Sektion. */
  align-items: end;
  justify-items: center;
  overflow: hidden;
  background: var(--co-tinte, #1B1A19);
  color: var(--co-sand, #F4ECE5);
  padding: var(--co-sektion) var(--co-rand) clamp(56px, 8vh, 96px);
}

.co-zitat__bild {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.co-zitat__schleier {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse at center, rgba(27,26,25,.18) 0%, rgba(27,26,25,.5) 100%),
    linear-gradient(180deg, rgba(27,26,25,0) 45%, rgba(27,26,25,.72) 100%);
}

.co-zitat__innen {
  position: relative; z-index: 2;
  /* Bricks gibt jedem blockquote einen linken Rand und Innenabstand - der lief hier
     als senkrechte Linie mitten durchs Bild. Deshalb alles zuruecksetzen. */
  margin: 0;
  padding: 0;
  border: 0;
  max-width: min(980px, 94%);
  text-align: center;
}

.co-zitat__kicker {
  font-family: var(--co-sans, 'Manrope', sans-serif);
  font-size: 11px; letter-spacing: .3em; text-transform: uppercase;
  color: var(--co-sand-warm, #EADBCF);
  margin-bottom: 22px;
}

/* Alle Saetze liegen im Markup, sichtbar ist nur der gewaehlte. */
.co-zitat__satz { display: none; }
.co-zitat__satz.is-gewaehlt { display: block; }

.co-zitat__satz {
  font-family: var(--co-serif, 'Gilda Display', serif);
  font-weight: 400;
  /* Deutlich groesser - der Satz ist der Inhalt der Sektion, nicht eine Randnotiz. */
  font-size: clamp(28px, 4vw, 66px);
  line-height: 1.16;
  letter-spacing: -.01em;
  margin: 0;
  text-wrap: balance;
  text-shadow: 0 2px 30px rgba(0, 0, 0, .4);
}

/* Jedes Wort ist ein eigener Reveal mit eigener Verzoegerung.
   Anders als sonst kommt es zusaetzlich aus der Unschaerfe heran - das ist der
   Unterschied zwischen „Text faehrt ein“ und „Satz kommt in den Fokus“.
   Deshalb wird hier der allgemeine Uebergang bewusst ueberschrieben. */
.co-zitat__wort {
  display: inline-block;
  opacity: 0;
  transform: translateY(16px);
  filter: blur(11px);
  transition:
    opacity .9s ease var(--co-verzug, 0ms),
    transform 1.1s cubic-bezier(.2, .8, .2, 1) var(--co-verzug, 0ms),
    filter .9s ease var(--co-verzug, 0ms);
  will-change: filter, opacity, transform;
}
.co-zitat__wort.is-da {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

@media (prefers-reduced-motion: reduce) {
  .co-zitat__wort { opacity: 1; transform: none; filter: none; transition: none; }
}

/* Feine Senkrechte ueber der Unterschrift - fuehrt das Auge aus dem Satz heraus. */
.co-zitat__faden {
  display: block;
  width: 1px; height: 48px;
  margin: 36px auto 0;
  background: rgba(244, 236, 229, .5);
}

.co-zitat__name {
  font-family: var(--co-schreib, 'Alex Brush', cursive);
  font-size: clamp(26px, 2.4vw, 38px);
  color: var(--co-ton, #C9AE9B);
  margin-top: 28px;
}

@media (max-width: 820px) {
  .co-zitat__innen { max-width: 94%; }
}