/* ============================================================
   Alles zum Erstellen und Bearbeiten kommt von rechts.

   In der SaaS stecken sieben verschiedene Dialog-Bauweisen, aus
   ebenso vielen Modulen: die Mail-App bringt ihre eigene mit, die
   CRM Suite, die CRM-Maschine darin, die Sales Suite, die
   Deal-Seite, die Anmeldung und die Rueckfrage.

   ZWEI ARTEN, NICHT EINE — und das ist der Kern dieser Datei:

   BLATT AM RECHTEN RAND, volle Hoehe, fuer alles, was ein
   FORMULAR ist: Firma anlegen, Produkt anlegen, Anforderung
   anlegen, Chance bearbeiten, Termin, neue E-Mail, die Dialoge der
   Sales Suite. Man liest und fuellt dort aus; ein Blatt am Rand
   laesst die Liste dahinter stehen, auf die man sich bezieht.

   MITTIG, aber mit deutlicher Bewegung von rechts, fuer die
   RUECKFRAGEN: "Wirklich loeschen?" und was sonst nur zwei
   Knoepfe hat. Eine Entscheidung gehoert dorthin, wo der Blick
   ist. Steht sie am Rand, sucht man sie — und klickt in der
   Zwischenzeit daneben.

   .scrm-schub, .sal-schub, .em-drawer, .cau-blatt und .kto-blatt
   fehlen hier mit Absicht: die sind schon Schubladen am rechten
   Rand und bringen ihre Bewegung selbst mit. Gemessen, nicht
   vermutet — .scrm-schub etwa ist 392 Pixel breit, buendig rechts
   und faehrt per transition:transform herein.

   OHNE #crsFrame bei .crs-dlgov und .sal-ov, und das ist Absicht.
   Die Dialogflaeche der Suite wandert an den body, solange die
   Deal-Seite offen ist (deal.js) — mit dem Vorsatz davor waere
   dort jede Regel wirkungslos. Und bei .sal-ov: die Sales
   Suite haengt ihre Dialogflaeche an den body, nicht in den
   Rahmen der CRM Suite. Mit dem Vorsatz davor hat die Regel nie
   gegriffen — aufgefallen ist es erst, als die Flaeche beim
   Messen wirklich offen war. Wer hier aus Symmetrie #crsFrame
   ergaenzt, schaltet die Einwand-Bibliothek wieder ab.

   WARUM EINE EIGENE DATEI: fast alle Bauweisen stehen in
   unveraenderten Kopien aus der Workstation. Dort nichts zu
   aendern ist die Regel dieses Projekts; eine Lage darueber ist
   die Ausnahme, die sie traegt. Fast ueberall genuegt dafuer,
   dass diese Datei zuletzt geladen wird — nur beim Kalender
   nicht, siehe Abschnitt 5.
   ============================================================ */

/* Ein Blatt kommt von ganz aussen: es war vorher neben dem
   Bildschirm, nicht nur ein Stueck weiter rechts. */
@keyframes vkBlatt {
  from { transform: translateX(100%); }
  to   { transform: none; }
}
/* Ein mittiger Kasten kann das nicht — er wuerde quer ueber den
   halben Bildschirm fliegen. 160 Pixel sind weit genug, dass man
   die Richtung sieht, und kurz genug, dass es nicht zur Reise
   wird. Die vorherigen 72 waren ein Stups: Flo hat ihn fuer "gar
   keine Bewegung" gehalten, und damit hatte er recht. */
@keyframes vkRein {
  from { opacity: 0; transform: translateX(160px); }
  to   { opacity: 1; transform: none; }
}
@keyframes vkSchleier {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ============================================================
   1. Formulare: Blatt am rechten Rand
   ============================================================ */

/* Die Flaeche dahinter hoert auf, ihren Inhalt zu zentrieren.
   align-items:stretch gibt dem Blatt die volle Hoehe, ohne dass
   irgendwo eine Zahl steht, die spaeter nicht mehr stimmt. */
.crs-dlgov.an,
.sal-ov.on,
#emailOverlay .modal-overlay.open {
  align-items: stretch;
  justify-content: flex-end;
  padding: 0;
}
/* Die Deal-Seite legt ihren Dialog als Raster aus, nicht als
   Flex — dieselbe Absicht, andere Worte. */
.pj-dlgraum {
  place-items: stretch end;
  padding: 0;
}

.crs-dlgov.an > .crs-dlg,
.sal-ov.on > .sal-dlg,
#emailOverlay .modal-overlay.open > .modal,
.pj-dlgraum > .pj-dlg {
  /* Die Breite bleibt, wie das jeweilige Modul sie gesetzt hat —
     ein Produktblatt braucht mehr Platz als eine Verlustmeldung.
     Hier wird nur aus einem Kasten ein Blatt. */
  height: 100%;
  max-height: none;
  max-width: 100%;
  margin: 0;
  border-radius: 0;
  /* Volle Hoehe heisst: der Inhalt kann laenger sein als der
     Bildschirm. Ohne das endet ein langes Formular unsichtbar
     unter dem unteren Rand. */
  overflow-y: auto;
  box-shadow: -24px 0 60px rgba(8, 30, 60, .3);
  animation: vkBlatt .26s cubic-bezier(.2, .7, .3, 1) both;
}

/* ============================================================
   2. Rueckfragen und Ansichten: mittig, Bewegung von rechts
   ============================================================ */

/* .scrm-dlgov ist der Dialog der CRM-Maschine (role=alertdialog):
   loeschen, zusammenfuehren, exportieren. Er hatte als einziger
   GAR KEINE Bewegung — beim ersten Durchgang schlicht uebersehen. */
#crsFrame .scrm-dlgov.an > .scrm-dlg,
.an-raum > .an-karte,
.vkfr-scrim > .vkfr,
.vs-schicht.auf > .vs-blatt {
  animation: vkRein .22s cubic-bezier(.2, .7, .3, 1) both;
}
/* Die Vorschau kam bisher mit einem Aufziehen (scale). Das ist
   eine andere Sprache als alles andere hier, also weg damit — die
   Angabe muss ausdruecklich zurueckgenommen werden, sonst gewinnt
   der Uebergang aus vorschau.css gegen die Animation. */
.vs-schicht.auf > .vs-blatt {
  transform: none;
  transition: none;
}

/* ============================================================
   3. Der Schleier dahinter
   ============================================================ */

/* Ohne ihn wirkt die Bewegung wie ein Ruck statt wie ein
   Hereinkommen. */
#emailOverlay .modal-overlay.open,
.crs-dlgov.an,
#crsFrame .scrm-dlgov.an,
.sal-ov.on,
.pj-dlgraum,
.vkfr-scrim {
  animation: vkSchleier .16s ease-out both;
}

/* Die Anmeldung ist kein Dialog ueber etwas, sondern die ganze
   Seite — sie soll nicht blinken, nur ihre Karte bringt die
   Bewegung mit. */
.an-raum { animation: none; }

/* ============================================================
   4. Wer keine Bewegung will, bekommt keine

   Das ist keine Hoeflichkeit: fuer manche Menschen loest so etwas
   Uebelkeit aus. Die LAGE der Blaetter bleibt — nur das
   Hereinfahren faellt weg.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .crs-dlgov.an > .crs-dlg,
  #crsFrame .scrm-dlgov.an > .scrm-dlg,
  .sal-ov.on > .sal-dlg,
  #emailOverlay .modal-overlay.open > .modal,
  .pj-dlgraum > .pj-dlg,
  .an-raum > .an-karte,
  .vkfr-scrim > .vkfr,
  .vs-schicht.auf > .vs-blatt,
  #emailOverlay .modal-overlay.open,
  .crs-dlgov.an,
  #crsFrame .scrm-dlgov.an,
  .sal-ov.on,
  .pj-dlgraum,
  .vkfr-scrim {
    animation: none;
  }
}

/* ============================================================
   5. Der Kalender

   Die Kalenderseite laeuft in einem eigenen Rahmen (kalender.html)
   und laedt diese Datei seit dem Hol-Werkzeug mit.

   HIER STEHT !important, und zwar nicht aus Bequemlichkeit: der
   Termin-Editor ist kein Dialog mit Schleier, sondern ein
   Schwebefeld, das sein JavaScript per style.left und style.top
   neben den angeklickten Termin setzt (kalender.html, pop.style).
   Gegen eine Angabe am Element selbst kommt ein Stylesheet nur so
   an. Die Alternative waere, in der Kopie herumzuschneiden — und
   die ist unveraendert, damit die Workstation weiter die Wahrheit
   bleibt.
   ============================================================ */
#pop {
  left: auto !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  height: auto !important;
  max-height: none !important;
  border-radius: 0 !important;
  box-shadow: -24px 0 60px rgba(8, 30, 60, .3);
  animation: vkBlatt .26s cubic-bezier(.2, .7, .3, 1) both;
}

/* Die Kalender-Einstellungen sind ein Formular wie jedes andere. */
.scrim.open {
  align-items: stretch;
  justify-content: flex-end;
  padding: 0;
}
.scrim.open > .dialog {
  height: 100%;
  max-height: none;
  max-width: 100%;
  border-radius: 0;
  overflow-y: auto;
  box-shadow: -24px 0 60px rgba(8, 30, 60, .3);
  animation: vkBlatt .26s cubic-bezier(.2, .7, .3, 1) both;
}

@media (prefers-reduced-motion: reduce) {
  #pop, .scrim.open > .dialog { animation: none; }
}

/* ============================================================
   6. Nachrichtenvorlagen: nur die neue kommt herein

   Die Vorlagen sind kein Dialog, sondern zwei Spalten. Beim
   Durchklicken soll nichts fahren — nur das frisch angelegte
   Blatt, damit man sieht, dass etwas entstanden ist. Welcher
   der beiden Faelle vorliegt, entscheidet vorlagen-neu.js;
   hier steht nur, wie es dann aussieht.
   ============================================================ */
.cvl-blatt.cvl-reinkommt {
  animation: vkBlatt .26s cubic-bezier(.2, .7, .3, 1) both;
}
/* Waehrend es hereinfaehrt, steht das Blatt eine Breite weiter
   rechts und waere sonst kurz ueber dem Rand — mit Querleiste.
   clip statt hidden, damit senkrecht weiter gescrollt wird. */
.cvl-zwei { overflow-x: clip; }

@media (prefers-reduced-motion: reduce) {
  .cvl-blatt.cvl-reinkommt { animation: none; }
}