/* =========================================================================
   SystemComb, Halteseite

   Laedt style.css davor und aendert daran nichts. Alle Farben, Radien und
   die Schrift kommen von dort, hier steht nur die Anordnung. Wer ein Token
   braucht, legt es in style.css an, nicht hier: zwei Saetze Farbwerte
   laufen sonst auseinander, und die Halteseite steht als erste live.

   Aufbau: eine Spalte Text, eine Spalte Lab, nebeneinander. Bewusst nicht
   der zentrierte Stapel der grossen Seite. Dort ist das Terminal der
   Beweis unter der Behauptung, hier steht es gleichberechtigt daneben,
   weil es das Einzige ist, was schon fertig ist.
   ========================================================================= */

.soonpage { background: var(--ink); }

.soon {
  position: relative;
  /* svh statt vh: die Adressleiste mobiler Browser schrumpft den Viewport
     beim Scrollen, vh springt dann und schneidet unten ab. */
  min-height: 100svh;
  display: flex;
  /* Oben ausrichten, nicht mittig. Der Erfolgskasten im Lab klappt am Ende
     auf und macht den Pane rund 190 px hoeher. Bei zentrierter Ausrichtung
     ruckte dadurch beim letzten Befehl die ganze Textspalte weg. So waechst
     nur der Pane nach unten und links bleibt alles stehen. */
  align-items: flex-start;
  padding-block: clamp(48px, 8vw, 96px);
  /* Der Strahlenfaecher ist 190vw breit. Ohne Clip sprengt er die
     Seitenbreite, siehe Falle F4 in STATUS.md. */
  overflow: hidden;
}

.soon__in {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}

/* ------------------------------------------------------------ Textspalte */

.soon__copy { display: flex; flex-direction: column; align-items: flex-start; }

.soon__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--ink-fg);
  margin-bottom: clamp(22px, 3.4vw, 40px);
}

/* Statuszeile. Bewusst Satzschrift statt der gesperrten Versalzeile, die
   auf der grossen Seite ueber jedem Abschnitt steht: hier gibt es nur
   einen Abschnitt, und die Zeile ist eine Aussage, kein Kapitelschild. */
.soon__state {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: .78rem;
  color: var(--ink-fg-2);
  padding: 7px 14px 7px 11px;
  border: 1px solid var(--ink-line);
  border-radius: 999px;
  background: rgba(255, 255, 255, .04);
  margin-bottom: 20px;
}
.soon__pulse {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--g4);
  flex: none;
  box-shadow: 0 0 0 0 rgba(245, 158, 11, .55);
  animation: soonpulse 2.6s var(--ease) infinite;
}
@keyframes soonpulse {
  0%        { box-shadow: 0 0 0 0   rgba(245, 158, 11, .5); }
  55%, 100% { box-shadow: 0 0 0 9px rgba(245, 158, 11, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .soon__pulse { animation: none; box-shadow: 0 0 0 3px rgba(245, 158, 11, .28); }
}

/* Kleiner als die H1 der grossen Seite: hier steht sie neben dem Lab,
   nicht ueber der ganzen Breite. */
.soon h1 {
  font-size: clamp(2rem, 2.55vw, 2.7rem);   /* Schibsted laeuft breiter als Outfit: „schon." stand sonst allein in Zeile drei */
  margin-bottom: 16px;
  text-wrap: balance;
}
/* Die zweite Haelfte steht hinter einem harten Umbruch und wird deshalb
   nicht mitausgeglichen. Unter 380 px stand sonst „schon." allein in der
   letzten Zeile. */
.soon h1 .grad { display: inline-block; text-wrap: balance; }

.soon__sub {
  font-size: clamp(1rem, 1.3vw, 1.1rem);
  line-height: 1.65;
  color: var(--ink-fg-2);
  max-width: 54ch;
  text-wrap: pretty;
  margin-bottom: 26px;
}

.soon .ctanote { margin-bottom: 26px; }

/* Untereinander statt als Dreierband: in einer halben Seitenbreite
   umbricht das Band sonst mitten im Wert. Wert oben, Erklaerung darunter
   erbt der Streifen aus style.css. */
.soon__stats {
  width: 100%;
  margin-top: 0;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  background: none;
  border-block-color: var(--ink-line);
}
.soon__stats > div, .soon__stats > div + div { padding: 13px 0; background: none; }
/* padding-left aus dem Dreierband der grossen Seite zuruecknehmen, sonst
   sitzt hier jede Zeile ausser der ersten 22 px eingerueckt. */
.soon__stats > div + div { border-top: 1px solid var(--ink-line); }
.soon__stats dt { margin-bottom: 0; }
/* ------------------------------------------------------------- Lab-Spalte */

.soon__demo { min-width: 0; }

/* Ein einzelner Pane statt des geteilten Fensters der grossen Seite.
   Der Auftrag steht oben drin, die Checkliste direkt darunter, dann die
   Shell: Aufgabe, Messlatte, Werkzeug, in dieser Reihenfolge. */
.soon__pane {
  border: 1px solid var(--ink-line);
  border-radius: var(--r-lg);
  overflow: hidden;
  min-height: 0;
  box-shadow:
    0 50px 110px -50px rgba(0, 0, 0, .95),
    0 0 0 1px rgba(139, 92, 246, .10);
}

.soon__pane .ticket { padding: 18px 20px 0; }
.soon__pane .ticket__txt { font-size: .9rem; }

/* Checkliste als umbrechende Reihe. Dieselben Zustaende wie im Produkt,
   nur flach statt untereinander, damit der Pane nicht zu hoch wird. */
.soon__checks {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 14px 20px 4px;
}
.soon__checks li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px 7px 9px;
  border: 1px solid var(--ink-line);
  border-radius: 999px;
  background: rgba(255, 255, 255, .03);
  font-size: .78rem;
  line-height: 1.3;
}
.soon__checks li .box { margin-top: 0; }
.soon__checks li[data-done="true"] {
  background: rgba(74, 222, 128, .10);
  border-color: rgba(74, 222, 128, .34);
}

/* Der Erfolgskasten klappt am Ende auf und war vorher rund 190 px hoch.
   Weil der Pane frei wuchs und die Spalten zentriert stehen, sprang beim
   letzten Befehl die halbe Seite nach unten. Also: feste Panehoehe, und
   die Ausgabe gibt den Platz her statt ihn zu fordern. */
/* Gedeckelt in beide Richtungen. Ohne max-height waechst die Ausgabe mit
   ihrem Inhalt weiter, statt in sich zu scrollen: nach drei Befehlen war
   der Pane 1181 px hoch. */
.soon__pane .term__out {
  flex: 1 1 auto;
  min-height: clamp(150px, 21vh, 210px);
  max-height: clamp(180px, 29vh, 300px);
  padding-top: 16px;
}


.soon__pane .pane__foot { border-top: 1px solid var(--ink-line); }

.soon__caption {
  margin-top: 18px;
  font-family: var(--mono);
  font-size: .74rem;
  line-height: 1.8;
  color: var(--ink-fg-3);
  max-width: 72ch;
}

/* ---------------------------------------------------------------- Schmal */

@media (max-width: 1000px) {
  .soon { min-height: 0; padding-top: clamp(40px, 9vw, 72px); }
  .soon__in { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .soon h1 { font-size: clamp(1.9rem, 6.2vw, 2.7rem); }
  .soon__brand { margin-bottom: 24px; }
  .soon__pane .term__out { max-height: clamp(200px, 38vh, 340px); }
}

@media (max-width: 560px) {
  .soon .row-cta { width: 100%; }
  .soon .row-cta .btn { flex: 1 1 auto; justify-content: center; }
  .soon__checks { padding-inline: 16px; }
  .soon__pane .ticket { padding-inline: 16px; }
}

/* ---------------------------------------------------------------- Fusszeile */

.soon__foot { padding-block: 32px 40px; }