/* ==========================================================================
   ARC – Abschluss. Drei Schichten, die als EINE Landschaft gelesen werden:

     1. .finale   – der Schluss-CTA steht im HIMMEL (--hero-sky)
     2. .closing__scene – die Park-Szene; ihre oberste Bildzeile ist exakt
        --hero-sky, ihre unterste exakt --meadow-lit
     3. .closing__bar – die Wiese läuft flächig bis zur Unterkante des
        Fensters weiter, in EINER Farbe

   Beide Nähte sind dadurch unsichtbar. Ein Farbverlauf im Balken ist
   ausdrücklich unerwünscht: er trennt Bild und Balken optisch wieder, genau
   das soll hier nicht passieren.
   ========================================================================== */

/* --- 1. Himmel mit dem Schluss-CTA ---------------------------------------- */
.finale {
  text-align: center;
  background: var(--hero-sky);
  /* Nur oben gerundet – Gegenstück zum Hero, der nur unten gerundet ist. */
  border-radius: var(--radius-scene) var(--radius-scene) 0 0;
  padding-top: clamp(3rem, 2rem + 4vw, 5.5rem);
  padding-bottom: clamp(2.5rem, 1.5rem + 4vw, 4.5rem);
}

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

.finale__cta {
  display: grid;
  justify-items: center;
  margin-top: clamp(1.25rem, 0.75rem + 1.5vw, 1.75rem);
}

/* Auf dem Himmel braucht der Hinweis mehr Tiefe als das weiche --ink-soft. */
.finale .badge-note {
  color: #3a4f74;
}

/* 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;
}

/* --- 2. + 3. Szene und Wiesenbalken --------------------------------------- */
.closing {
  background: var(--meadow-lit);
}

.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;
}

/* EINE Farbe, kein Verlauf. Die Fläche läuft randlos durch, der Inhalt darin
   bleibt auf Lesebreite zentriert – bis auf die Wortmarke, die absichtlich
   ausbricht. */
.closing__bar {
  background: var(--meadow-lit);
  padding-top: clamp(1.25rem, 0.75rem + 2vw, 2.25rem);
  padding-bottom: clamp(0.75rem, 0.5rem + 1vw, 1.25rem);
  padding-inline: var(--page-pad);
  overflow: hidden;
}

.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: von Kante zu Kante ----------------------------------
   Die Zeile bricht bewusst aus der Lesebreite aus und läuft über die volle
   Fensterbreite. 57vw ist gemessen, nicht geschätzt: bei dieser Größe füllt
   „ARC" in Pally Bold mit -0.045em Laufweite genau die Fensterbreite. Der
   Deckel bei 500px greift erst ab etwa 880px Fensterbreite – ohne ihn würde
   die Zeile auf dem Desktop über 600px hoch und der Footer zur eigenen Seite.
   text-indent gleicht die halbe negative Laufweite hinter dem letzten C aus,
   sonst steht das Wort minimal zu weit rechts. --- */
.wordmark {
  display: block;
  /* Nicht 100vw: das schließt die Scrollleiste mit ein und ragt dadurch um
     deren Breite raus. Der Innenabstand des Balkens wieder draufgerechnet
     trifft die Fensterbreite exakt. */
  width: calc(100% + 2 * var(--page-pad));
  max-width: none;
  margin-top: clamp(0.25rem, 0.1rem + 0.8vw, 0.9rem);
  margin-inline: calc(-1 * var(--page-pad));
  font-size: min(57vw, 500px);
  font-weight: 700;
  line-height: 0.76;
  letter-spacing: -0.045em;
  text-indent: -0.0225em;
  text-align: center;
  color: var(--meadow-ink);
  opacity: 0.14;
  user-select: none;
  /* Rein dekorativ – darf nie Klicks abfangen. Bei dieser Schriftgröße
     (bis 500px) reicht die Zeilenbox bis dicht unter die Links darüber, und
     je nach Ladezustand der Schrift verschiebt sich ihre gemessene Höhe
     minimal. Ohne das hier haben Datenschutz/AGB/Impressum/Instagram
     zeitweise gar nicht reagiert, weil die Wortmarke den Klick vor ihnen
     abgefangen hat. */
  pointer-events: none;
}

.closing__copy {
  padding-top: 0.4rem;
  font-size: var(--text-xs);
  color: var(--meadow-ink);
  text-align: center;
}