/* ============================================================
   Die E-Mail-Seite sieht aus wie die anderen Seiten der Suite.

   WOHER DAS APRIKOT KAM: intentio-rahmen.css gibt allen
   Intentio-Apps einen gemeinsamen Look — die Leisten liegen in
   einem Verlauf der Designfarbe, der Inhalt darauf mit runder
   Ecke. In der Workstation ist das richtig: dort ist E-Mail ein
   eigenes Fenster und soll nach Intentio aussehen.

   In der SaaS ist E-Mail eine SEITE der CRM Suite, zwischen
   Kontakte und Kalender. Daneben wirkt derselbe Verlauf wie ein
   Fremdkoerper — und weil die Designfarbe hier Orange ist
   (#ef8a3c), wird aus dem Verlauf ein Hautton.

   Statt dreissig Regeln einzeln zu ueberschreiben, werden hier
   die VARIABLEN gesetzt, aus denen intentio-rahmen.css seine
   Farben mischt. Eine Stelle, und alles Abgeleitete folgt.

   DIE RUNDE ECKE kam von selbst in Ordnung: seit die Suite ihren
   Seitenkopf auch auf den Gastseiten zeigt, liegt die Rundung bei
   .crs-body ganz oben — dort, wo sie auf allen anderen Seiten
   auch liegt. Der Gastrahmen darunter braucht gar keine.

   WARUM !important: die Regeln, gegen die hier angetreten wird,
   tragen selbst welche. Ohne waere es wirkungslos.
   ============================================================ */

/* ---------- 1. Die Farben, aus denen alles gemischt wird ---------- */
#emailOverlay.crs-imrahmen {
  /* Kein Verlauf mehr, sondern der Seitengrund der Suite. */
  --ir-verlauf: #f5f8fc;
  --ir-kante: #e7eef6;
  /* Schrift und Symbole ohne Farbstich: auf den anderen Seiten
     steht die Tinte auf #12233a, die leisen Zeilen auf #64748b. */
  --ir-text: #12233a;
  --ir-aktiv: #12233a;
  --ir-ic: #64748b;
  --ir-leise: #64748b;
  --ir-knopf: #41556d;
  --ir-hover: #eef4fb;
}

/* ---------- 2. Der Rahmen ----------
   KEINE Rundung mehr. Kurz stand hier 18px oben links, weil der
   Gastrahmen damals die ganze Flaeche bedeckte und selbst an die
   Ecke stiess. Seit die Kopfzeile darueber steht, faengt er erst
   bei 129 Pixeln an — die runde Ecke gehoert .crs-body, und eine
   zweite mitten in der Flaeche waere eine Kerbe.

   crm-suite.css setzt hier 0 0 0 18px (unten links). Das ist
   ebenfalls daneben, faellt aber nicht auf, solange Rahmen und
   Flaeche dieselbe Farbe haben. */
#emailOverlay.crs-imrahmen > .email-frame {
  background: #f5f8fc !important;
  border-radius: 0 !important;
}

/* ---------- 3. Die Kopfzeile wie auf den anderen Seiten ----------
   Die Suite blendet ihre eigene Kopfzeile bei Gastseiten aus
   (crsSeitenkopf.hidden), weil der Gastrahmen die ganze Flaeche
   bedeckt. Sie wieder einzublenden hiesse, auch die Platzierung
   des Rahmens anzufassen. Stattdessen traegt die App ihre eigene
   Kopfzeile — mit denselben Massen wie .crs-seitenkopf. */
/* Nur noch eine Werkzeugzeile unter dem Seitenkopf der Suite,
   keine zweite Ueberschrift — darum schmaler als vorher. */
#emailOverlay.crs-imrahmen .email-topbar {
  align-items: center !important;
  gap: 14px !important;
  padding: 10px 20px 8px !important;
}
/* DER TITEL BLEIBT AUSGEBLENDET. Kurz stand er hier: die Suite
   blendet ihren Seitenkopf bei Gastseiten aus, also sollte die App
   ihren eigenen tragen. Inzwischen zeigt die Suite ihn auch auf den
   Gastseiten (Abschnitt 2d im Hol-Werkzeug) — jeder Titel hier
   waere der zweite. */
#emailOverlay.crs-imrahmen .iapp-titlestack h2 {
  margin: 0;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -.015em;
  color: #12233a;
}
/* "powered by IntentioDesk" gehoert in die Workstation, nicht auf
   eine Seite der CRM Suite — in der Leiste steht es ohnehin schon. */
#emailOverlay.crs-imrahmen .iapp-powered { display: none !important; }
/* Die Suche rueckt nach rechts, wie die Knoepfe im Seitenkopf.

   Mit !important, weil crm-suite.css Zeile 181 'max-width:none
   !important' setzt. Das war richtig, solange in der Zeile NUR die
   Suche stand — sie sollte sie dann ausfuellen. Jetzt steht der
   Titel daneben, und eine 890 Pixel breite Suchzeile sieht aus wie
   ein Versehen. */
#emailOverlay.crs-imrahmen .em-kopfsuche {
  flex: 0 1 340px !important;
  margin-left: auto !important;
  max-width: 340px !important;
}

/* ---------- 4. Die Leisten ----------
   Auf den anderen Seiten liegen Flaechen weiss auf dem hellen
   Grund, mit einer feinen Linie dazwischen. Vorher waren sie
   durchsichtig auf dem Verlauf — daher der Hautton. */
#emailOverlay.crs-imrahmen .em-layout {
  background: #f5f8fc !important;
}
#emailOverlay.crs-imrahmen .em-account-bar,
#emailOverlay.crs-imrahmen .em-sidebar {
  background: #fff !important;
  border-right: 1px solid #e7eef6 !important;
}
/* Die Liste trug die runde Ecke, weil sie im eigenen Fenster der
   Workstation die erste Inhaltsflaeche ist. Hier steht sie in der
   dritten Spalte — eine Rundung mitten im Raster. */
#emailOverlay.crs-imrahmen .em-list {
  border-top-left-radius: 0 !important;
  box-shadow: none !important;
  border-right: 1px solid #e7eef6 !important;
}
#emailOverlay.crs-imrahmen .em-detail {
  box-shadow: none !important;
}

/* ============================================================
   5. Gleiches Polster wie auf den anderen Seiten

   Gemessen: die CRM-Maschine rueckt ihren Inhalt um 16 Pixel ein
   (#scrmInhalt), der eigene Wirt der Suite um 14. Die Gastseiten
   und die Sales-Seiten um nichts — sie klebten am Rand.

   Jetzt ueberall 16. Die zwei Pixel bei den eigenen Seiten
   mitzunehmen kostet nichts und erspart die Frage, warum Firmen
   anders sitzt als Kontakte.

   NICHT MIT padding AN DER HUELLE, auch wenn das naheliegt: ich
   hatte es so gebaut und gemessen, dass sich nichts bewegt. inset:0
   bezieht sich auf die POLSTERBOX des Containers, und die schliesst
   das Polster ein — ein absolut positioniertes Kind sitzt also
   weiter an der Aussenkante. Die Zahl muss an den Rahmen selbst.

   Einmal als Variable, damit die vier Rahmen und die beiden
   Wirte nicht mit der Zeit auseinanderlaufen.
   ============================================================ */
.crs-imrahmen { --gastluft: 16px; }
.crs-imrahmen > .email-frame,
.crs-imrahmen > .kal-frame,
.crs-imrahmen > .gast-frame,
.crs-imrahmen > .lm-frame {
  top: var(--gastluft) !important;
  left: var(--gastluft) !important;
  /* NICHT right/bottom mit width:auto. Kalender und Meetings sind
     iframes, also ERSETZTE Elemente: mit width:auto nehmen sie ihre
     Eigengroesse, und gegenueberliegende Kanten spannen sie nicht
     auf. Gemessen waren es 300x150 — der Vorgabewert eines iframe.
     Derselbe Stolperstein wie bei der Rauch-Leinwand. */
  width: calc(100% - 2 * var(--gastluft)) !important;
  height: calc(100% - 2 * var(--gastluft)) !important;
  right: auto !important;
  bottom: auto !important;
}
/* #salFrame und .crs-eigen stehen in suite-schliff.css:
   die gelten fuer alle Seiten, nicht nur fuer E-Mail. */

/* ============================================================
   6. Die Postfachsuche steht im Kopf, nicht in einer zweiten Zeile

   Nachdem seitenkopf-suche.js das Feld nach #crsAkt gehaengt hat,
   ist von der Werkzeugzeile der App nichts mehr uebrig — alles
   andere darin war ohnehin ausgeblendet. Eine leere Zeile, die
   trotzdem Hoehe hat, ist genau das, was Flo als "zu hoch"
   gesehen hat.
   ============================================================ */
#emailOverlay.crs-imrahmen .email-topbar { display: none !important; }

/* Im Kopf soll sie aussehen wie die Suche oben in der Suite, nicht
   wie ein Fremdteil: feste Breite, rechtsbuendig, gleiche Hoehe
   wie die Knoepfe daneben. */
#crsAkt > .em-kopfsuche {
  flex: 0 0 320px !important;
  max-width: 320px !important;
  margin: 0 !important;
}