@import url("site.css");

/* =========================================================================
   ClosingHub, Platzhalter-Seite auf /

   Aufbau in Ebenen:
     .bg-layer   ruhende Fläche, Geister-Karten, Marken-Kurve
     .stage      Kopf, Aussage, Produktkarten, Fusszeile
   Die Kurve besteht aus zwei überlappenden Kreisen im Verhältnis der
   Bildmarke (Versatz 0,888 des Radius). Das Ornament kommt damit aus dem
   Logo und nicht aus der Dekokiste.
   Bewegt wird ausschliesslich transform, opacity und stroke-dashoffset.
   ========================================================================= */

body { background: var(--paper); }

.stage-wrap {
  position: relative;
  min-height: 100dvh;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(120% 90% at 82% 6%, var(--tint) 0%, rgba(241, 235, 254, 0) 62%),
    linear-gradient(180deg, #FFFFFF 0%, #FBFAFE 100%);
}

/* ---------- Hintergrundebene --------------------------------------------- */

.bg-layer {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

/* Marken-Kurve.
   Die Ringe zeichnen sich beim Laden einmal und stehen dann still. Was am
   24.08.2026 rausgeflogen ist, ist die Dauerbewegung: das Schweben der
   Produktkarten, das Driften der Kurve und der Geister-Karten. Eine
   Endlos-Animation über eine Fläche dieser Größe muss jedes Bild neu
   gerastert werden, und genau das hakte. Einmalige Einblendungen kosten
   nichts und können nicht hängen bleiben. */
.ribbon {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.ribbon circle { fill: none; }
.ribbon .r-main   { stroke: var(--accent);      stroke-width: 15; opacity: .85; }
.ribbon .r-second { stroke: var(--accent-soft); stroke-width: 15; opacity: .95; }
.ribbon .r-far    { stroke: var(--accent-soft); stroke-width: 13; opacity: .5; }

.ribbon .draw {
  stroke-linecap: round;
  stroke-dasharray: var(--len);
  stroke-dashoffset: var(--len);
  animation: draw 2.4s cubic-bezier(.62, .03, .28, 1) forwards;
}
.ribbon .d2 { animation-delay: .28s; }
.ribbon .d3 { animation-delay: .52s; }
@keyframes draw { to { stroke-dashoffset: 0; } }

/* Schmale Bildschirme: die grosse Kurve schneidet dort quer durch die Copy.
   Stattdessen ein Bogen in der oberen rechten Ecke, wo neben den kurzen
   Überschriftzeilen wirklich Platz ist, plus das Ringpaar im Fussband. */
.ribbon-m { display: none; }
.ribbon-m i {
  position: absolute;
  border-radius: 999px;
  opacity: 0;
  animation: ring-in 1.4s cubic-bezier(.16, 1, .3, 1) .3s forwards;
}
.ribbon-m .band-a { animation-delay: .45s; }
.ribbon-m .band-b { animation-delay: .6s; }
@keyframes ring-in {
  from { opacity: 0; transform: scale(.93); }
  to   { opacity: .85; transform: none; }
}

.ribbon-m .arc {
  --d: 154vw;
  width: var(--d);
  height: var(--d);
  left: calc(100% - 49vw);
  top: -92vw;
  border: 12px solid var(--accent);
}

.ribbon-m .band {
  --d: 104vw;
  width: var(--d);
  height: var(--d);
  bottom: calc(104px - var(--d)); /* nur der obere Bogen steht im Fussband */
  border: 12px solid var(--accent);
}
.ribbon-m .band-a { left: 14vw; }
.ribbon-m .band-b { left: calc(14vw + var(--d) * .444); border-color: var(--accent-soft); }

/* Geister-Karten */
.ghost {
  position: absolute;
  border-radius: var(--r-card);
  background: rgba(255, 255, 255, .72);
  box-shadow: 0 18px 40px -30px rgba(23, 16, 43, .45);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  opacity: 0;
  transform: rotate(var(--rot, 0deg));
  animation: ghost-in 1s var(--ease) var(--in, .35s) forwards;
}
@keyframes ghost-in { to { opacity: var(--o, .5); } }
.ghost span { display: block; height: 7px; border-radius: 4px; background: var(--tint); }
.ghost span:nth-child(1) { width: 62%; background: #E6DDFA; }
.ghost span:nth-child(2) { width: 100%; }
.ghost span:nth-child(3) { width: 84%; }
.ghost span:nth-child(4) { width: 45%; }

.g1 { --o: .55; --rot: -6deg; --in: .35s; left: 5%;  top: 18%;    width: 168px; }
.g2 { --o: .40; --rot: 8deg;  --in: .55s; left: 41%; top: 5%;     width: 132px; }
.g3 { --o: .36; --rot: -3deg; --in: .75s; left: 31%; bottom: 7%;  width: 150px; }
.g4 { --o: .28; --rot: 11deg; --in: .95s; right: 3%; bottom: 10%; width: 138px; }
.g5 { --o: .32; --rot: -9deg; --in: .65s; left: 1%;  bottom: 27%; width: 120px; }

/* ---------- Bühne --------------------------------------------------------- */

.stage {
  position: relative;
  z-index: 1;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  gap: clamp(24px, 4vh, 44px);
  padding-block: clamp(24px, 4vh, 40px);
}

.stage-head {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.stage-body {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}

/* ---------- Aussage ------------------------------------------------------- */

.pitch { max-width: 32rem; }

.pitch h1 {
  font-size: clamp(38px, 4.8vw, 62px);
  line-height: 1.04;
  letter-spacing: -.035em;
  margin-bottom: 20px;
}
.pitch h1 b { font-weight: 600; color: var(--accent); display: block; }

.pitch .lead { font-size: clamp(16px, 1.5vw, 18px); max-width: 33ch; }
.pitch .facts { margin-top: 26px; }
.pitch .facts li { font-size: 15px; }

/* ---------- Kurzformular -------------------------------------------------- */

.soon-form { margin-top: 30px; max-width: 30rem; }
.soon-form .field { margin-bottom: 0; }

.soon-row { display: flex; gap: 10px; align-items: flex-start; }
.soon-row .field { flex: 1 1 auto; min-width: 0; }
.soon-row .field input,
.soon-row .btn { height: 48px; }
.soon-row .btn {
  flex: none;
  padding-block: 0;
  margin-top: 27px; /* Höhe des Feld-Labels, damit Knopf und Feld auf einer Linie sitzen */
}

.soon-form .form-note { margin-top: 14px; max-width: 40ch; }
.soon-form .form-status { margin-top: 12px; }

/* ---------- Produktansicht ------------------------------------------------
   Die Karte spricht die Sprache des Produkts, nicht die der Marketingseite.
   Alle Werte stammen aus crm-software/src/index.css (Quelle der Wahrheit),
   Beschriftungen und Gesprächsergebnisse aus services/dialer.ts und
   services/consent.ts. Deshalb hier ein eigener Token-Satz: kühle
   Neutraltöne, Geist statt Outfit, 13/18 als Grundgröße, keine Mono-Labels
   (im Produkt am 05.08.2026 abgeschafft), Radien 8/14/20.
   -------------------------------------------------------------------------- */

.showcase { position: relative; }

.app {
  --a:        #6c2bf2;   /* accent-base       */
  --a-soft:   #f1ebfe;   /* accent-soft       */
  --s-elev:   #ffffff;   /* bg-elevated       */
  --s-sunken: #f2f2f4;   /* bg-sunken         */
  --s-subtle: #efeff1;   /* bg-subtle         */
  --b-subtle: #ededef;   /* border-subtle     */
  --b-struct: #eaeaec;   /* border-structural */
  --b-def:    #dcdce0;   /* border-default    */
  --t-1:      #17171a;   /* text-primary      */
  --t-2:      #5c5c64;   /* text-secondary    */
  --t-3:      #6b6b74;   /* text-tertiary     */
  --ok-t:     #3e6b4e;  --ok-s:  #ecf2ed;  --ok-b:  #cfe0d5;
  --bad-t:    #8c3a32;  --bad-s: #f6ebea;  --bad-b: #f0dad6;

  font-family: Geist, system-ui, -apple-system, sans-serif;
  font-size: 13px;
  line-height: 18px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  color: var(--t-1);
}

/* Der Seitengrund des Produkts: gedeckte Fläche, darüber ein Hauch Akzent,
   der vor der Gegenecke ausläuft. Genau eine Verlaufsfläche, wie im Produkt. */
.panel-main {
  border-radius: 20px;
  border: 1px solid var(--b-struct);
  padding: 12px;
  background-color: var(--s-sunken);
  background-image: linear-gradient(
    155deg,
    color-mix(in oklab, var(--a) 22%, transparent) 0%,
    color-mix(in oklab, var(--a) 8%, transparent) 34%,
    transparent 72%
  );
  box-shadow: 0 1px 2px rgba(23, 23, 26, .05), 0 40px 80px -44px rgba(23, 23, 26, .34);
  animation: panel-in 1.1s var(--ease) .25s both;
}

.app-cols { display: grid; grid-template-columns: minmax(0, 200px) minmax(0, 1fr); gap: 12px; }

.app-card {
  background: var(--s-elev);
  border: 1px solid var(--b-subtle);
  border-radius: 14px;
  padding: 12px;
}

/* Die eine getönte Karte, die den Datensatz ausmacht. */
.app-card.tinted {
  background-image: linear-gradient(
    180deg,
    color-mix(in oklab, var(--a) 8%, transparent) 0%,
    color-mix(in oklab, var(--a) 3%, transparent) 42%,
    transparent 78%
  );
}

.app-label {
  font-size: 12px;
  line-height: 17px;
  font-weight: 500;
  color: var(--t-3);
  margin-bottom: 8px;
}

/* Warteschlange */
.q-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.q-list li { border-radius: 8px; padding: 7px 9px; border: 1px solid transparent; }
.q-list li.is-active { background: var(--a-soft); border-color: color-mix(in oklab, var(--a) 30%, transparent); }
.q-list b { display: block; font-weight: 500; font-size: 13px; }
.q-list small { display: block; font-size: 12px; line-height: 17px; color: var(--t-3); }

/* Aktiver Lead */
.lead-name { font-size: 16px; line-height: 24px; font-weight: 500; }
.lead-sub { font-size: 12px; line-height: 17px; color: var(--t-3); }

.chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; }
.chip {
  font-size: 11px;
  line-height: 14px;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid var(--b-def);
  color: var(--t-2);
  background: var(--s-elev);
}
.chip.ok  { border-color: var(--ok-b);  background: var(--ok-s);  color: var(--ok-t); }
.chip.bad { border-color: var(--bad-b); background: var(--bad-s); color: var(--bad-t); }

.note {
  margin-top: 10px;
  border: 1px solid var(--b-def);
  border-radius: 8px;
  padding: 8px 9px;
  min-height: 54px;
  font-size: 13px;
  line-height: 18px;
  background: var(--s-elev);
}
.note .caret {
  display: inline-block;
  width: 1px;
  height: 13px;
  background: var(--a);
  vertical-align: -2px;
  margin-left: 1px;
  animation: caret 1.1s steps(1) infinite;
}
@keyframes caret { 50% { opacity: 0; } }

.outcomes { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.outcome {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px; /* --spacing-control */
  padding: 0 10px;
  border-radius: 8px;
  border: 1px solid var(--b-def);
  background: var(--s-elev);
  font-size: 12px;
  line-height: 17px;
  color: var(--t-2);
}
.outcome kbd {
  font: inherit;
  font-size: 11px;
  color: var(--t-3);
  background: var(--s-subtle);
  border-radius: 4px;
  padding: 1px 4px;
}
.outcome.is-on { background: var(--a); border-color: var(--a); color: #fff; font-weight: 500; }
.outcome.is-on kbd { background: rgba(255, 255, 255, .22); color: #fff; }

/* Kleine Karte davor: die gesperrte Aufnahme */
.panel-float {
  position: absolute;
  left: -11%;
  bottom: -19%;
  width: min(268px, 62%);
  background: var(--s-elev);
  border: 1px solid var(--b-struct);
  border-radius: 14px;
  padding: 12px;
  box-shadow: 0 1px 2px rgba(23, 23, 26, .05), 0 26px 56px -34px rgba(23, 23, 26, .40);
  animation: panel-in 1.1s var(--ease) .6s both;
}
@keyframes panel-in {
  from { opacity: 0; transform: translate3d(0, 26px, 0) scale(.985); }
  to   { opacity: 1; transform: none; }
}
.locked {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  border-radius: 8px;
  padding: 9px 10px;
  background: var(--bad-s);
  border: 1px solid var(--bad-b);
}
.locked svg { flex: none; color: var(--bad-t); margin-top: 1px; }
.locked b { display: block; font-size: 13px; font-weight: 500; color: var(--bad-t); }
.locked span { display: block; font-size: 12px; line-height: 17px; color: var(--bad-t); }


/* ---------- Einzug der Textspalte ---------------------------------------- */

.rise { animation: rise 900ms var(--ease) both; animation-delay: calc(var(--i, 0) * 110ms); }
@keyframes rise {
  from { opacity: 0; transform: translate3d(0, 18px, 0); }
  to   { opacity: 1; transform: none; }
}

/* ---------- Umbrüche ------------------------------------------------------ */

@media (max-width: 1080px) {
  .stage-body {
    grid-template-columns: 1fr;
    gap: clamp(56px, 9vw, 80px);
    align-items: start;
    align-content: center; /* sonst dehnt die Zeile und reisst eine Luecke auf */
  }
  .pitch { max-width: 36rem; }
  .showcase { max-width: 560px; }
  .panel-float { left: -4%; bottom: -19%; }
  .g2, .g4 { display: none; }
}

@media (max-width: 900px) {
  .ribbon { display: none; }
  .ribbon-m { display: block; }
  /* Platz fuer das Fussband mit den Marken-Ringen */
  .stage { padding-bottom: 136px; }

  /* Die Geister-Karten hingen an der Seitenhöhe und landeten dadurch alle
     unten. Auf dem Handy sitzen sie fest in der oberen rechten Ecke, wo neben
     den kurzen Überschriftzeilen Platz ist, und eine über dem Fussband. */
  .g3, .g4 { display: none; }
  .m-top { left: auto; }
  .g1 { --o: .5;  --rot: 12deg; top: 2px;   right: -38px; width: 126px; }
  .g2 { --o: .34; --rot: -8deg; top: 104px; right: -64px; width: 104px; }
  .g5 { --o: .3;  --rot: -9deg; left: -28px; bottom: 168px; width: 118px; }
}

@media (max-width: 620px) {
  .stage-foot { flex-direction: column; align-items: center; gap: 12px; }
  .soon-row { flex-direction: column; align-items: stretch; }
  .soon-row .btn { width: 100%; margin-top: 12px; }
  .app-cols { grid-template-columns: 1fr; }
  .panel-float { position: relative; left: auto; bottom: auto; width: 100%; margin-top: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .ribbon .draw, .ribbon-m i, .ghost, .panel-main, .panel-float, .rise, .note .caret {
    animation: none !important;
  }
  .ribbon .draw { stroke-dashoffset: 0; }
  .ribbon-m i { opacity: .85; }
  .ghost { opacity: var(--o, .5); }
  .herzflug { display: none; }
}