/* ==========================================================================
   ARC – Abschluss: CTA auf hellem Grund, darunter EINE abgerundete Fläche aus
   Wiesen-Bild + Grün-Balken. Der Balken hat exakt die Wiesenfarbe des unteren
   Bildrands (--meadow), darum ist der Übergang unsichtbar.
   ========================================================================== */

.finale {
  text-align: center;
  padding-top: clamp(3rem, 2rem + 4vw, 5.5rem);
  padding-bottom: clamp(2rem, 1.25rem + 3vw, 3.5rem);
}

.finale__title {
  color: var(--color-ink);
  max-width: 15ch;
  margin-inline: auto;
}

.finale__cta {
  display: grid;
  justify-items: center;
  margin-top: clamp(1.5rem, 1rem + 2vw, 2.25rem);
}

/* Die einzige Handlung, die heute wirklich funktioniert: der Kanal, auf dem
   der Start angekündigt wird. Bewusst als Textlink, damit er dem
   App-Store-Badge nicht die Aufmerksamkeit wegnimmt. */
.finale__follow {
  margin-top: 1.1rem;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-navy);
  border-bottom: 2px solid transparent;
  transition: border-color var(--duration-normal) var(--ease-out-quart);
}

.finale__follow:hover {
  border-bottom-color: currentColor;
}

/* --- Bild + Balken als eine Fläche ----------------------------------------
   Randlos über die volle Fensterbreite, nur OBEN abgerundet – unten läuft
   die Wiese bis an die Fensterkante. --- */
.closing {
  overflow: hidden;
  border-radius: var(--radius-scene) var(--radius-scene) 0 0;
  background: var(--meadow);
}

.closing__scene {
  display: block;
  width: 100%;
  height: auto;
  /* Winziger negativer Rand: verhindert eine Haarlinie zwischen Bildkante und
     Balken, falls der Browser die Bildhöhe krumm rundet. */
  margin-bottom: -1px;
}

/* Die Fläche läuft randlos durch, der Inhalt darin bleibt aber auf
   Lesebreite zentriert. */
.closing__bar {
  background: linear-gradient(180deg, var(--meadow) 0, var(--meadow-lit) 60%);
  padding-top: clamp(1.5rem, 1rem + 2vw, 2.75rem);
  padding-bottom: clamp(1rem, 0.5rem + 1.5vw, 1.75rem);
  padding-inline: var(--page-pad);
}

.closing__bar > * {
  max-width: var(--page-max);
  margin-inline: auto;
}

/* Rechtliches + Kontakt, eine ruhige Zeile auf der Wiese. */
.closing__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.6rem clamp(1.25rem, 0.5rem + 2vw, 2.5rem);
}

.closing__links a {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--meadow-ink);
  position: relative;
}

.closing__links a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -3px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  scale: 0 1;
  transform-origin: left;
  transition: scale var(--duration-normal) var(--ease-out-quart);
}

.closing__links a:hover::after {
  scale: 1 1;
}

/* --- Wortmarken-Echo unter den Links ------------------------------------- */
.wordmark {
  display: block;
  width: 100%;
  margin-top: clamp(0.5rem, 0.25rem + 1vw, 1.25rem);
  font-size: clamp(4.5rem, 1rem + 20vw, 15rem);
  font-weight: 700;
  line-height: 0.8;
  letter-spacing: -0.03em;
  text-align: center;
  color: rgba(255, 255, 255, 0.26);
  user-select: none;
}

/* Keine zusätzliche Deckkraft: mit 0,75 lag der Kontrast auf dem helleren
   Grün bei 4,39:1 und damit knapp unter den geforderten 4,5:1. Die Zeile
   tritt schon durch ihre Größe zurück, sie muss nicht auch noch blasser
   sein. */
.closing__copy {
  padding-top: 0.5rem;
  font-size: var(--text-xs);
  color: var(--meadow-ink);
  text-align: center;
}