/* ============================================================
   RetainLens — Waitlist
   Zusatz zu ../styles.css, kein Ersatz. Hier steht ausschliesslich,
   was es auf der Produktseite nicht gibt oder was dort anders sein
   muss. Alles andere — Farben, Schriften, Raster, Knoepfe, Hero,
   dunkles Band, Fussbereich — kommt unveraendert von dort, damit die
   beiden Seiten nicht aehnlich aussehen, sondern gleich.
   Reihenfolge: das Formular im Hero → die Vorschaukarte → Fussbereich
   → Responsive.
   ============================================================ */

/* ── das Formular im Hero ────────────────────────────────────
   Auf der Produktseite ist .signup--hero die schmale Fassung und
   erscheint erst unter 901px; darueber traegt ein Knopf den Aufruf.
   Hier gibt es keinen Knopf und nichts weiter unten, worauf er zeigen
   koennte — das Formular ist die Seite und steht auf jeder Breite.
   Die Feldfarben von .signup--hero bleiben genau deshalb noetig: der
   Hero-Verlauf hat bei 44% Hoehe ein helles Band, genau dort steht es. */
.signup--hero{display:flex}
/* Breite ausdruecklich setzen. .hero__in ist eine zentrierte Flex-Spalte,
   das Formular bekommt darin sonst eine Shrink-to-fit-Breite und der Knopf
   faellt unter das Feld — gemessen bei 1280px, dort standen sie
   uebereinander statt nebeneinander. Auf der Produktseite faellt das nicht
   auf, weil dieses Formular dort erst unter 901px auftaucht und unter 560px
   ohnehin beide Elemente auf volle Breite gehen. */
.signup--hero{width:100%}

/* Das Formular reiht sich in den gestaffelten Auftritt des Heros ein.
   Ohne das steht es sofort da, waehrend Ueberschrift und Fliesstext
   noch von unten einlaufen — es ist das Element, das am spaetesten
   gebraucht wird, also kommt es zuletzt. Dieselbe Kurve und dieselbe
   Dauer wie die Geschwister in ../styles.css. */
.signup--hero{animation:heroIn 1.05s cubic-bezier(.16,1,.3,1) .30s both}
@media (prefers-reduced-motion:reduce){
  .signup--hero{animation:none}
}

/* ── der Hero fuellt den ersten Bildschirm ───────────────────
   Das App-Fenster darunter ist hoch genug, dass der Hero auf den
   meisten Fenstern ohnehin ueber die Falz reicht. Auf hohen Fenstern
   tat er das nicht, und dann schob sich unten ein weisser Streifen des
   Kompatibilitaetsabschnitts ins Bild — der Verlauf endete sichtbar
   vor dem Bildschirmrand. Untergrenze statt fester Hoehe: ist der
   Inhalt hoeher, waechst der Abschnitt weiter mit.
   Abgezogen wird nur die Navigationsleiste. Die Ankuendigungsleiste
   darueber bleibt unberuecksichtigt, weil man sie wegklicken kann —
   und die Richtung stimmt so: der Hero ist dann um deren Hoehe zu
   hoch, was man nicht sieht, statt zu niedrig, was man sieht. */
.hero{min-height:calc(100vh - var(--nav-h))}
/* svh statt vh, wo es das gibt: auf dem Handy meint vh die Hoehe ohne
   eingeblendete Browserleisten, der Hero waere dort zu hoch. */
@supports (height:100svh){
  .hero{min-height:calc(100svh - var(--nav-h))}
}

/* ── die FAQ auf dunklem Grund ───────────────────────────────
   Dieselben Mittel wie beim Band darueber (.dark in ../styles.css): der
   Grund bricht als Pseudo-Element auf volle Fensterbreite aus, und die
   beiden senkrechten Shell-Linien laufen als helle Fassung darueber
   weiter, sonst reisst das Raster der Seite hier ab.
   Damit laufen dunkles Band, FAQ und Abschluss zu einer durchgehenden
   dunklen Strecke zusammen. Getrennt werden sie von Haarlinien: oben von
   .cells::after, unten von der Linie an diesem Hintergrund. */
.faq--dark{color:#fff; border-bottom:0}
.faq--dark::before{
  content:""; position:absolute; top:0; bottom:0;
  left:calc(50% - 50vw); width:100vw; background:var(--ink);
  border-bottom:1px solid rgba(255,255,255,.1); z-index:0;
}
.faq--dark::after{
  content:""; position:absolute; top:0; bottom:0; left:-1px; right:-1px;
  border-left:1px solid rgba(255,255,255,.26);
  border-right:1px solid rgba(255,255,255,.26);
  pointer-events:none; z-index:1;
}
.faq--dark > *{position:relative; z-index:1}

/* Die Pille traegt sonst Akzentblau auf hellblauem Grund und verschwindet
   auf --ink. Helle Fassung in derselben Farbe wie die Symbole im Band. */
.faq--dark .tagpill{background:rgba(125,149,245,.14); color:#9FB2F8}
.faq--dark .faq__more{color:#8F95A4}
/* :not(.lg__fill), sonst faerbt diese Regel den bernsteinfarbenen
   Platzhalter der Kontaktzeile mit ein — sie ist spezifischer als die
   .faq__more .lg__fill in ../styles.css. */
.faq--dark .faq__more a:not(.lg__fill){color:#9FB2F8}
.faq--dark .faq__list,.faq--dark .qa{border-color:rgba(255,255,255,.1)}
.faq--dark .qa summary i::before,.faq--dark .qa summary i::after{background:rgba(255,255,255,.55)}
.faq--dark .qa__a p{color:#9AA0AF}

/* ── Fussbereich: zwei Spalten statt vier ────────────────────
   Die Waitlist hat weniger zu verlinken als die Produktseite, und seit
   die Wege zur Produktseite auf einen einzigen zusammengezogen sind,
   bleiben zwei Gruppen: die Warteliste und die Rechtstexte. */
.foot__cols--2{grid-template-columns:repeat(2,1fr)}
/* Ohne Medienabfrage, und das mit Absicht: ../styles.css stellt .foot__cols
   unter 561px einspaltig, was bei zwei kurzen Gruppen eine halbe Bildschirm-
   hoehe fuer zwoelf Zeilen kostet. Diese Datei kommt danach, also gilt die
   Regel hier auf jeder Breite und beide Spalten bleiben stehen. */

/* ============================================================
   Responsive — nur die Stellen, an denen ../styles.css etwas
   annimmt, was hier nicht stimmt.
   ============================================================ */

@media (max-width:900px){
  /* ../styles.css blendet die Lede aus, weil sie dort wiederholt, was der
     Hero schon gesagt hat. Hier tut sie das nicht: sie benennt den Umfang
     der Bitte, und der Abschluss ist auf einer Waitlist die Seite selbst. */
  .cta__lede{display:revert}

  /* Der Knopf bleibt sichtbar. Auf der Produktseite faellt er hier weg,
     weil das Hero-Formular seinen Platz einnimmt — dort steht darunter
     aber auch der naechste Aufruf schon nach zwei Bildschirmen. Hier lagen
     zwischen dem Hero-Formular und dem Abschluss rund 4.700px ohne einen
     einzigen sichtbaren Aufruf; er stand nur im Burger-Menue. Die Groessen
     dafuer stehen bereits in ../styles.css (.nav__cta .btn, 40px). */
  .nav__cta{display:flex}
}

@media (max-width:760px){
  /* Einspaltig zentriert, dieselbe Begruendung wie bei .cells im dunklen
     Band (../styles.css): nebeneinander traegt die linke Kante die Ordnung,
     untereinander gibt es keine Spalte mehr, an der sie sich ausrichten
     muesste. Ueberschrift und Pille gehen mit, sonst zentrieren drei
     Schritte unter einem linksbuendigen Kopf. Gilt nur hier — die Schritte
     der Produktseite tragen je ein Mockup und bleiben linksbuendig. */
  .how .pad,.problem .pad{text-align:center}
  .steps__item,.stat{text-align:center}
  .steps__item p{margin-inline:auto; max-width:34ch}
  /* .stat > span, nicht span: im <b> steht .rng, das keine Breite bekommen
     darf — dieselbe Unterscheidung wie in ../styles.css. */
  .stat > span{margin-inline:auto}

  /* Die drei Fliesstext-Zellen fallen weg und die drei Zahlen bleiben.
     Sie sagen dasselbe: die Zellen erklaeren, die Zahlen belegen. Auf einer
     Seite, die ueberflogen wird, ist die Zahl das schnellere von beidem, und
     die Ueberschrift darueber traegt die Aussage ohnehin. Kostet 525px, also
     zwei Drittel eines Handybildschirms. Auf Desktop bleiben beide. */
  .tri{display:none}

  /* Die vier Zellen im dunklen Band sind untereinander vier Bildschirm-
     drittel Polster. Enger gesetzt, nicht zusammengeschoben. */
  .cells__c{padding:22px 24px 26px}

  /* ../styles.css legt hier die senkrechten Shell-Linien ab (.shell und
     .dark::after). Die helle Fassung ueber dem dunklen Grund geht mit. */
  .faq--dark::after{display:none}
}

/* Der Kasten nach dem Absenden. Bis dahin steht dort nichts: die Seite
   verspricht "one field, one email", also darf hier vorher nichts stehen,
   was danach aussieht, als kaeme noch etwas.
   Beide Formulare sitzen auf dunklem Grund - das Hero-Blau und .cta auf
   --ink - deshalb eine Regel fuer beide. flex-basis:100% wie beim
   .signup__msg daneben, sonst setzt er sich neben den Knopf. */
.signup__after{
  flex-basis:100%; margin-top:14px; padding:14px 16px;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16);
  border-radius:12px; text-align:left;
}
.signup__after p{
  margin:0; font-size:.86rem; line-height:1.55;
  color:rgba(255,255,255,.82); text-wrap:pretty;
}
.signup__after b{color:#fff; font-weight:600}