/* =============================================================================
   FINALE — der Abschluss-Abschnitt der Unterseiten (websites, shops, software)
   =============================================================================

   Eine Datei fuer alle drei. Vorher war derselbe Abschnitt dreimal definiert
   (websites.css, shops.css, software.css) und die Werte liefen auseinander:
   gemessen war die Ueberschrift auf /websites 51px gegen 72px auf der
   Startseite, mit line-height normal statt .98. Wer den Abschluss angleichen
   will, muss ihn an EINER Stelle haben — sonst gleicht man ihn dreimal an und
   beim naechsten Feinschliff wieder.

   Die Startseite bleibt bewusst aussen vor: dort haengt an .contact ein
   animierter Apparat (zuend-punkt, zeitgesteuerte Querlinien), der mit dem
   Scrollverlauf der Seite verzahnt ist. Diese Datei zitiert dessen Optik,
   fasst ihn aber nicht an.

   Wird als LETZTES Stylesheet geladen, damit sie die Reste in den
   Seiten-Stylesheets ueberschreibt, ohne dass dort etwas geloescht werden muss.
   ---------------------------------------------------------------------------*/

:root {
  --finale-cyan: 25, 191, 244;
  --finale-violett: 124, 92, 255;
}

/* --- Flaeche -------------------------------------------------------------- */

/* Hoehe: der Abschnitt und der Footer ergeben zusammen genau EINEN Bildschirm.
   Abgezogen werden beide Dinge, die sonst darueber hinausragen — die fixierte
   Navigationsleiste (liegt ueber dem Abschnitt) und der Footer darunter. Ohne
   die Leiste blieb exakt ihre Hoehe als ueberfluessiger Restscroll uebrig,
   sobald sie am Abschnitt ankam.

   svh statt vh: auf dem Handy schiebt die einklappende Browserleiste den
   Inhalt sonst aus dem Bild.

   --footer-h misst site-static.js, das auf den Unterseiten nicht laeuft. Die
   Rueckfallwerte sind gemessen — der Footer bricht zweimal um. */
.cta {
  position: relative;
  display: grid;
  align-content: center;
  justify-items: start;
  min-height: calc(100vh - var(--nav-hoehe, 80px) - var(--footer-h, 119px));
  min-height: calc(100dvh - var(--nav-hoehe, 80px) - var(--footer-h, 119px));
  padding: clamp(26px, 7vh, 96px) var(--page, clamp(24px, 4.2vw, 68px)) clamp(22px, 4vh, 64px);
  overflow: hidden;
  background: var(--navy, #020914);
  color: #fff;
  text-align: left;
}

@media (min-width: 480px) { .cta { min-height: calc(100dvh - var(--nav-hoehe, 80px) - var(--footer-h, 101px)) } }
@media (min-width: 720px) { .cta { min-height: calc(100dvh - var(--nav-hoehe, 80px) - var(--footer-h, 71px)) } }

/* Auf /websites blendet hero.js die Kopfleiste unter 700px beim Runterscrollen
   weg (.topnav.is-weg -> translateY(-100%)). Am Seitenende steht sie also gar
   nicht mehr im Bild — ihre Hoehe darf dort nicht abgezogen werden, sonst
   bleibt exakt diese Hoehe als Luecke und der Abschnitt fuellt den Schirm nicht.
   Hoehere Spezifitaet als die Regeln oben, gewinnt also unabhaengig von der
   Reihenfolge. */
@media (max-width: 700px) {
  body.web .cta { min-height: calc(100dvh - var(--footer-h, 119px)) }
}

/* --- Leuchtleisten -------------------------------------------------------- */

/* Statisch, nicht animiert. Auf der Startseite laufen diese Linien als Finale
   eines langen Scrollwegs ein — das ist dort ein Ereignis. Auf jeder Unterseite
   wiederholt waere es keins mehr, sondern Tapete, und jede Seite zahlte
   Renderkosten fuer eine Bewegung, die nichts mehr sagt. Als stehender Rahmen
   leistet dieselbe Optik das, was hier gebraucht wird: Wiedererkennung.

   Zwei Ebenen, weil sie unterschiedlich scharf sind: ::before die Linien
   (1px, hart), ::after die Herde (weich, grossflaechig). */
.cta::before {
  position: absolute;
  z-index: 0;
  inset: 0;
  content: "";
  pointer-events: none;
  background:
    /* oben quer — hellster Punkt rechts, wie auf der Startseite */
    linear-gradient(90deg,
      rgba(var(--finale-cyan), .06) 0%,
      rgba(var(--finale-cyan), .30) 46%,
      rgba(var(--finale-cyan), .85) 100%) top left / 100% 1px no-repeat,
    /* Senkrechte links und rechts, nach unten auslaufend */
    linear-gradient(180deg,
      rgba(var(--finale-cyan), .40) 0%,
      rgba(var(--finale-cyan), 0) 58%) top left / 1px 100% no-repeat,
    linear-gradient(180deg,
      rgba(var(--finale-cyan), .55) 0%,
      rgba(var(--finale-cyan), 0) 72%) top right / 1px 100% no-repeat;
}

/* Zwei Herde auf der Diagonalen, farblich getrennt wie auf der Startseite:
   Violett oben rechts, wo die Querlinie ankommt; Cyan unten links. Bewusst
   rechts und unten — links oben steht die Ueberschrift, dort kostet jeder
   Schein Kontrast. */
.cta::after {
  position: absolute;
  z-index: 0;
  inset: 0;
  content: "";
  pointer-events: none;
  background:
    radial-gradient(52% 46% at 96% 0%, rgba(var(--finale-violett), .20), transparent 70%),
    radial-gradient(46% 44% at 100% 34%, rgba(var(--finale-violett), .10), transparent 72%),
    radial-gradient(48% 44% at 2% 100%, rgba(var(--finale-cyan), .13), transparent 72%);
}

/* Die Pseudo-Elemente sind absolut positioniert, erzeugen also keine
   Grid-Spuren. Der Inhalt braucht trotzdem eine eigene Ebene ueber ihnen. */
.cta > * {
  position: relative;
  z-index: 1;
}

/* --- Typografie ----------------------------------------------------------- */

/* Die Werte der Startseite. Gemessen war der Unterschied nicht die Farbe,
   sondern drei Zahlen: 72px statt 51px, Zeilenhoehe .98 statt normal (~1.2)
   und -.055em statt -.03em. Genau die machen aus einer Ueberschrift eine
   Flaeche — groesser, aber enger und etwas leichter gesetzt. */
.cta .eyebrow {
  margin: 0 0 clamp(10px, 1.8vh, 16px);
  color: rgba(var(--finale-cyan), 1);
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .16em;
}

.cta h2 {
  max-width: 850px;
  margin: 0 0 clamp(18px, 2.6vh, 28px);
  font-size: clamp(2.6rem, 5vw, 5rem);
  font-weight: 650;
  letter-spacing: -.055em;
  line-height: .98;
}

.cta__sub {
  max-width: 52ch;
  margin: 0 0 clamp(22px, 3.2vh, 32px);
  color: #aebccb;
  font-size: clamp(1.02rem, 1.4vw, 1.14rem);
  line-height: 1.55;
}

/* Der handgesetzte Umbruch im Fliesstext gilt erst ab Tablet. Auf dem Handy
   ist die Zeile ohnehin schon umgebrochen, ein zusaetzlicher fester Bruch
   erzeugt dort nur eine kurze Waisenzeile ("Wir sagen dir offen,"). Unten
   bricht der Text frei und damit gleichmaessig. */
@media (max-width: 760px) {
  .cta__sub br { display: none }
}

/* --- Aktionen ------------------------------------------------------------- */

/* Grid mit fit-content: der Block ist so breit wie sein breitestes Kind (der
   Button), die Nummer wird auf dieselbe Breite gestreckt. Mit space-between
   sitzt der Pfeil dann genau auf der rechten Buttonkante — beide Kanten
   buendig, ohne irgendwo eine Breite hart einzutragen. */
.cta__row {
  display: grid;
  justify-items: stretch;
  width: fit-content;
  gap: 16px;
}

/* Eckig wie die Buttons der Startseite, die kein border-radius tragen. */
.cta .web-btn {
  height: 54px;
  padding: 0 28px;
  border-radius: 0;
  font-size: 1rem;
  font-weight: 720;
}

.cta .web-link {
  justify-content: space-between;
  padding-left: 2px;
  color: #8fdcf7;
  font-size: 1rem;
}

/* =============================================================================
   HERO-LEAD — handgesetzter Umbruch auf allen Breiten
   =============================================================================
   Der Satz steht seit dem Umbau als zwei Aussagen statt einer mit
   Gedankenstrich, und der Bruch sitzt auf der SATZGRENZE. Deshalb gilt er
   anders als im Fliesstext des CTA auch auf dem Handy: dort wuerde ein Bruch
   mitten im Satzteil eine Waisenzeile erzeugen, hier faengt schlicht der
   zweite Satz eine Zeile tiefer an — das liest sich auf jeder Breite richtig.

   Das Leerzeichen vor dem <br> steht bewusst im Markup, damit die beiden
   Saetze nicht aneinanderkleben, falls der Bruch je ausgeblendet wird. */